feat(Menu, Dropdown): add width props on MenuOverlay and allow it in …

…SelectInput Dropdown (#2276) * feat: add width props on menuoverlay and allow on selectinput * docs: add jsdoc for types * Create lucky-plums-lie.md
razorpay · Jun 27, 2024 · 0023818 · 0023818
1 parent 8b3a4f6
commit 0023818
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 6 deletions.
diff --git a/.changeset/lucky-plums-lie.md b/.changeset/lucky-plums-lie.md
@@ -0,0 +1,5 @@
+---
+"@razorpay/blade": patch
+---
+
+feat(Menu, Dropdown): add width props on MenuOverlay and allow it in SelectInput Dropdown
diff --git a/packages/blade/src/components/Dropdown/DropdownOverlay.web.tsx b/packages/blade/src/components/Dropdown/DropdownOverlay.web.tsx
@@ -37,6 +37,8 @@ const _DropdownOverlay = ({
   testID,
   zIndex = componentZIndices.dropdownOverlay,
   width,
+  minWidth,
+  maxWidth,
   referenceRef,
   defaultPlacement = 'bottom-start',
 }: DropdownOverlayProps): React.ReactElement | null => {
@@ -73,12 +75,16 @@ const _DropdownOverlay = ({
       }),
       sizeMiddleware({
         apply({ rects, elements }) {
+          const overlayWidth = isMenu ? undefined : makeSize(rects.reference.width);
+          const overlayMinWidth = isMenu ? makeSize(size['240']) : undefined;
+          const overlayMaxWidth = isMenu ? makeSize(size['400']) : undefined;
+
           Object.assign(elements.floating.style, {
             // in menu, we have flexible width between min and max
             // in input triggers, we just take width of trigger
-            width: isMenu ? undefined : makeSize(rects.reference.width),
-            minWidth: isMenu ? makeSize(size['240']) : undefined,
-            maxWidth: isMenu ? makeSize(size['400']) : undefined,
+            width: width ?? overlayWidth,
+            minWidth: minWidth ?? overlayMinWidth,
+            maxWidth: maxWidth ?? overlayMaxWidth,
           });
         },
       }),
@@ -120,6 +126,8 @@ const _DropdownOverlay = ({
           elevation={bottomSheetAndDropdownGlue?.dropdownHasBottomSheet ? undefined : 'midRaised'}
           style={{ ...styles }}
           width={width ? width : '100%'}
+          minWidth={minWidth}
+          maxWidth={maxWidth}
           {...metaAttribute({ name: MetaConstants.DropdownOverlay, testID })}
         >
           {children}

diff --git a/packages/blade/src/components/Dropdown/docs/DropdownWithSelect.stories.tsx b/packages/blade/src/components/Dropdown/docs/DropdownWithSelect.stories.tsx
@@ -199,7 +199,7 @@ export const InternalMultiSelect = (): React.ReactElement => {
     <Box padding="spacing.5" maxWidth="300px">
       <Dropdown selectionType="multiple">
         <SelectInput label="Select City" maxRows="single" />
-        <DropdownOverlay>
+        <DropdownOverlay width="500px">
           <DropdownHeader title="Header Title" subtitle="Header subtitle" />
           <ActionList>
             <ActionListItem title="Mumbai" value="mumbai" />

diff --git a/packages/blade/src/components/Dropdown/types.ts b/packages/blade/src/components/Dropdown/types.ts
@@ -28,7 +28,27 @@ type DropdownOverlayProps = {
    * @default 1001
    */
   zIndex?: number;
+  /**
+   * Override the default width of dropdown
+   *
+   * Avoid overriding width in SelectInput and AutoComplete as its expected to match the input
+   */
   width?: BoxProps['width'];
+
+  /**
+   * Override the default minWidth of dropdown
+   *
+   * Avoid overriding minWidth in SelectInput and AutoComplete as its expected to match the input
+   */
+  minWidth?: BoxProps['minWidth'];
+
+  /**
+   * Override the default maxWidth of dropdown
+   *
+   * Avoid overriding maxWidth in SelectInput and AutoComplete as its expected to match the input
+   */
+  maxWidth?: BoxProps['maxWidth'];
+
   /**
    * Reference to the element which triggers the DropdownOverlay
    *

diff --git a/packages/blade/src/components/Menu/MenuOverlay.web.tsx b/packages/blade/src/components/Menu/MenuOverlay.web.tsx
@@ -16,16 +16,27 @@ const UnfocussableOverlay = styled(BaseBox)((_props) => {
 });
 
 const _MenuOverlay: React.ForwardRefRenderFunction<BladeElementRef, MenuOverlayProps> = (
-  { children, zIndex = componentZIndices.dropdownOverlay, _transitionStyle, testID, ...props },
+  {
+    children,
+    zIndex = componentZIndices.dropdownOverlay,
+    _transitionStyle,
+    minWidth,
+    maxWidth,
+    width,
+    testID,
+    ...props
+  },
   ref,
 ): React.ReactElement => {
   return (
     <UnfocussableOverlay
       ref={ref as never}
       {...props}
-      minWidth={MENU_MIN_WIDTH}
       zIndex={zIndex}
       {...metaAttribute({ name: MetaConstants.Menu, testID })}
+      minWidth={minWidth ?? MENU_MIN_WIDTH}
+      width={width}
+      maxWidth={maxWidth}
     >
       {/* 
         Requires another nested div since floatingStyles clash with floatingTransitionStyles 

diff --git a/packages/blade/src/components/Menu/types.ts b/packages/blade/src/components/Menu/types.ts
@@ -111,8 +111,36 @@ type MenuItemProps = {
 };
 
 type MenuOverlayProps = {
+  /**
+   * JSX Slot for MenuItem or anything else
+   */
   children: React.ReactElement[] | React.ReactElement;
+
+  /**
+   * zIndex override
+   */
   zIndex?: BoxProps['zIndex'];
+
+  /**
+   * width override.
+   *
+   * By default width is not set
+   */
+  width?: BoxProps['width'];
+
+  /**
+   * minWidth override
+   */
+  minWidth?: BoxProps['minWidth'];
+
+  /**
+   * maxWidth override
+   */
+  maxWidth?: BoxProps['maxWidth'];
+
+  /**
+   * @private Internal Prop. Do not override or you'll be fired
+   */
   _transitionStyle?: React.CSSProperties;
 } & TestID;