@lumx/react 3.0.5 → 3.0.6-alpha.1

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.1",
+        "@lumx/icons": "^3.0.6-alpha.1",
         "@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.1",
+    "gitHead": "e230447f554272d8cd29c103842f961ec424c5f4"
 }

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';
@@ -44,7 +44,7 @@ export interface AutocompleteProps extends GenericProps, HasTheme {
      * Whether the dropdown should fit to the anchor width or not.
      * @see {@link DropdownProps#fitToAnchorWidth}
      */
-    fitToAnchorWidth?: boolean;
+    fitToAnchorWidth?: DropdownProps['fitToAnchorWidth'];
     /**
      * The error related to the component.
      * @see {@link TextFieldProps#error}
@@ -160,7 +160,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

@@ -37,7 +37,7 @@ export interface DropdownProps extends GenericProps {
      * Whether the dropdown should fit to the anchor width (if dropdown is smaller) or not.
      * @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,8 @@ 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 size to not be bigger (`width` & `maxWidth`) or smaller (`width`, `minWidth`, `true`) than 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 +135,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 +298,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);