@lumx/react 3.0.5 → 3.0.6-alpha.2

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^3.0.5",
-        "@lumx/icons": "^3.0.5",
+        "@lumx/core": "^3.0.6-alpha.2",
+        "@lumx/icons": "^3.0.6-alpha.2",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.2.6",
@@ -114,6 +114,6 @@
         "build:storybook": "cd storybook && ./build"
     },
     "sideEffects": false,
-    "version": "3.0.5",
-    "gitHead": "83eccabdc29dbf61fd519c88729002a5bb8d4790"
+    "version": "3.0.6-alpha.2",
+    "gitHead": "08b0d777dc906cf3a6816c9cb9e2d4b57ddaf8e1"
 }

package/src/components/autocomplete/Autocomplete.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef, ReactNode, SyntheticEvent, useRef } from 'react';
 
 import classNames from 'classnames';
 
-import { Dropdown, IconButtonProps, Offset, Placement, TextField, TextFieldProps } from '@lumx/react';
+import { Dropdown, DropdownProps, IconButtonProps, Offset, Placement, TextField, TextFieldProps } from '@lumx/react';
 
 import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
@@ -41,10 +41,13 @@ export interface AutocompleteProps extends GenericProps, HasTheme {
      */
     placement?: Placement;
     /**
-     * Whether the dropdown should fit to the anchor width or not.
+     * Manage dropdown width:
+     *   - `maxWidth`: dropdown not bigger than anchor
+     *   - `minWidth` or `true`: dropdown not smaller than anchor
+     *   - `width`: dropdown equal to the anchor.
      * @see {@link DropdownProps#fitToAnchorWidth}
      */
-    fitToAnchorWidth?: boolean;
+    fitToAnchorWidth?: DropdownProps['fitToAnchorWidth'];
     /**
      * The error related to the component.
      * @see {@link TextFieldProps#error}
@@ -160,7 +163,7 @@ export interface AutocompleteProps extends GenericProps, HasTheme {
      * Only the props not managed by the Autocomplete can be set.
      * @see {@link TextFieldProps}
      */
-    textFieldProps?: TextFieldProps;
+    textFieldProps?: Partial<TextFieldProps>;
 }
 
 /**

package/src/components/dropdown/Dropdown.tsx

@@ -34,10 +34,13 @@ export interface DropdownProps extends GenericProps {
      */
     closeOnEscape?: boolean;
     /**
-     * Whether the dropdown should fit to the anchor width (if dropdown is smaller) or not.
+     * Manage dropdown width:
+     *   - `maxWidth`: dropdown not bigger than anchor
+     *   - `minWidth` or `true`: dropdown not smaller than anchor
+     *   - `width`: dropdown equal to the anchor.
      * @see {@link PopoverProps#fitToAnchorWidth}
      */
-    fitToAnchorWidth?: boolean;
+    fitToAnchorWidth?: PopoverProps['fitToAnchorWidth'];
     /**
      * Whether the dropdown should shrink to fit within the viewport height or not.
      * @see {@link PopoverProps#fitWithinViewportHeight}

package/src/components/popover/Popover.stories.tsx

@@ -314,3 +314,73 @@ export const NestedWithoutPortal = () => {
         </div>
     );
 };
+
+export const FitToAnchorWidth = ({ theme }: any) => {
+    const demoPopperStyle = {
+        alignItems: 'center',
+        display: 'flex',
+        height: 100,
+        justifyContent: 'center',
+        width: 200,
+    };
+
+    const container = {
+        alignItems: 'center',
+        display: 'flex',
+        justifyContent: 'center',
+        flexDirection: 'column',
+        gap: 150,
+        marginTop: 150,
+    } as const;
+
+    const maxWidthAnchorRef = useRef(null);
+    const widthSmallAnchorRef = useRef(null);
+    const widthLargeAnchorRef = useRef(null);
+    const minWidthAnchorRef = useRef(null);
+    const defaultWidthAnchorRef = useRef(null);
+
+    return (
+        <div style={container}>
+            <div>
+                <Chip ref={maxWidthAnchorRef} theme={theme} size={Size.s}>
+                    Anchor
+                </Chip>
+            </div>
+            <Popover theme={theme} anchorRef={maxWidthAnchorRef} fitToAnchorWidth="maxWidth" isOpen placement="top">
+                <div style={demoPopperStyle}>Popover maxWidth</div>
+            </Popover>
+            <div>
+                <Chip ref={widthSmallAnchorRef} theme={theme} size={Size.s}>
+                    Anchor
+                </Chip>
+            </div>
+            <Popover theme={theme} anchorRef={widthSmallAnchorRef} fitToAnchorWidth="width" isOpen placement="top">
+                <div style={demoPopperStyle}>Popover width small anchor</div>
+            </Popover>
+            <div>
+                <Chip ref={widthLargeAnchorRef} theme={theme} size={Size.s}>
+                    VeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLargeAnchor
+                </Chip>
+            </div>
+            <Popover theme={theme} anchorRef={widthLargeAnchorRef} fitToAnchorWidth="width" isOpen placement="top">
+                <div style={demoPopperStyle}>Popover width large anchor</div>
+            </Popover>
+            <div>
+                <Chip ref={minWidthAnchorRef} theme={theme} size={Size.s}>
+                    VeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLargeAnchor
+                </Chip>
+            </div>
+            <Popover theme={theme} anchorRef={minWidthAnchorRef} fitToAnchorWidth="minWidth" isOpen placement="top">
+                <div style={demoPopperStyle}>Popover minWidth</div>
+            </Popover>
+            <div>
+                <Chip ref={defaultWidthAnchorRef} theme={theme} size={Size.s}>
+                    VeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLargeAnchor
+                </Chip>
+            </div>
+            <Popover theme={theme} anchorRef={defaultWidthAnchorRef} isOpen placement="top">
+                <div style={demoPopperStyle}>Popover default</div>
+            </Popover>
+        </div>
+    );
+};

package/src/components/popover/Popover.tsx

@@ -4,6 +4,7 @@ import { createPortal } from 'react-dom';
 import { usePopper } from 'react-popper';
 
 import classNames from 'classnames';
+import memoize from 'lodash/memoize';
 
 import { DOCUMENT, WINDOW } from '@lumx/react/constants';
 import { useCallbackOnEscape } from '@lumx/react/hooks/useCallbackOnEscape';
@@ -62,6 +63,13 @@ export type Elevation = 1 | 2 | 3 | 4 | 5;
  */
 const ARROW_SIZE = 8;
 
+const AnchorWidthOptions = {
+    MAX_WIDTH: 'maxWidth',
+    MIN_WIDTH: 'minWidth',
+    WIDTH: 'width',
+} as const;
+type AnchorWidthOption = ValueOf<typeof AnchorWidthOptions>;
+
 /**
  * Defines the props of the component.
  */
@@ -78,8 +86,13 @@ export interface PopoverProps extends GenericProps {
     closeOnEscape?: boolean;
     /** Shadow elevation. */
     elevation?: Elevation;
-    /** Whether the dropdown should fit to the anchor width (if dropdown is smaller). */
-    fitToAnchorWidth?: boolean;
+    /**
+     * Manage popover width:
+     *   - `maxWidth`: popover not bigger than anchor
+     *   - `minWidth` or `true`: popover not smaller than anchor
+     *   - `width`: popover equal to the anchor.
+     */
+    fitToAnchorWidth?: AnchorWidthOption | boolean;
     /** Shrink popover if even after flipping there is not enough space. */
     fitWithinViewportHeight?: boolean;
     /** Element to focus when opening the popover. */
@@ -127,20 +140,20 @@ const DEFAULT_PROPS: Partial<PopoverProps> = {
 /**
  * Popper js modifier to fit popover min width to the anchor width.
  */
-const sameWidth = {
+const sameWidth = memoize((anchorWidthOption: AnchorWidthOption) => ({
     name: 'sameWidth',
     enabled: true,
     phase: 'beforeWrite',
     requires: ['computeStyles'],
     fn({ state }: any) {
         // eslint-disable-next-line no-param-reassign
-        state.styles.popper.minWidth = `${state.rects.reference.width}px`;
+        state.styles.popper[anchorWidthOption] = `${state.rects.reference.width}px`;
     },
     effect({ state }: any) {
         // eslint-disable-next-line no-param-reassign
-        state.elements.popper.style.minWidth = `${state.elements.reference.offsetWidth}px`;
+        state.elements.popper.style[anchorWidthOption] = `${state.elements.reference.offsetWidth}px`;
     },
-};
+}));
 
 /**
  * Popper js modifier to compute max size of the popover.
@@ -290,7 +303,9 @@ export const Popover: Comp<PopoverProps, HTMLDivElement> = forwardRef((props, re
     }
 
     if (fitToAnchorWidth) {
-        modifiers.push(sameWidth);
+        const anchorWidthOption =
+            typeof fitToAnchorWidth === 'string' ? fitToAnchorWidth : AnchorWidthOptions.MIN_WIDTH;
+        modifiers.push(sameWidth(anchorWidthOption));
     }
     if (fitWithinViewportHeight) {
         modifiers.push({ ...maxSize, options: { boundary: boundaryRef?.current } }, applyMaxHeight);