@lumx/react 3.0.5 → 3.0.6-alpha.2

package/index.d.ts

@@ -63,10 +63,13 @@ 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}
@@ -182,7 +185,7 @@ interface AutocompleteProps extends GenericProps, HasTheme {
      * Only the props not managed by the Autocomplete can be set.
      * @see {@link TextFieldProps}
      */
-    textFieldProps?: TextFieldProps;
+    textFieldProps?: Partial<TextFieldProps>;
 }
 /**
  * Autocomplete component.
@@ -717,6 +720,12 @@ interface Offset {
  * Popover elevation index.
  */
 declare type Elevation = 1 | 2 | 3 | 4 | 5;
+declare const AnchorWidthOptions: {
+    readonly MAX_WIDTH: "maxWidth";
+    readonly MIN_WIDTH: "minWidth";
+    readonly WIDTH: "width";
+};
+declare type AnchorWidthOption = ValueOf<typeof AnchorWidthOptions>;
 /**
  * Defines the props of the component.
  */
@@ -733,8 +742,13 @@ 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. */
@@ -793,10 +807,13 @@ 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/index.js

@@ -16,6 +16,7 @@ import dropRight from 'lodash/dropRight';
 import partition from 'lodash/partition';
 import reduce from 'lodash/reduce';
 import { C as ClickAwayProvider } from './_internal/ClickAwayProvider.js';
+import memoize from 'lodash/memoize';
 import castArray from 'lodash/castArray';
 import pick from 'lodash/pick';
 import isObject from 'lodash/isObject';
@@ -5871,11 +5872,11 @@ const Placement = {
  * Arrow size (in pixel).
  */
 const ARROW_SIZE = 8;
-
-/**
- * Defines the props of the component.
- */
-
+const AnchorWidthOptions = {
+  MAX_WIDTH: 'maxWidth',
+  MIN_WIDTH: 'minWidth',
+  WIDTH: 'width'
+};
 /**
  * Component display name.
  */
@@ -5899,7 +5900,7 @@ const DEFAULT_PROPS$g = {
 /**
  * Popper js modifier to fit popover min width to the anchor width.
  */
-const sameWidth = {
+const sameWidth = memoize(anchorWidthOption => ({
   name: 'sameWidth',
   enabled: true,
   phase: 'beforeWrite',
@@ -5909,16 +5910,16 @@ const sameWidth = {
       state
     } = _ref;
     // 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(_ref2) {
     let {
       state
     } = _ref2;
     // 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.
@@ -6086,7 +6087,8 @@ const Popover = /*#__PURE__*/forwardRef((props, ref) => {
     });
   }
   if (fitToAnchorWidth) {
-    modifiers.push(sameWidth);
+    const anchorWidthOption = typeof fitToAnchorWidth === 'string' ? fitToAnchorWidth : AnchorWidthOptions.MIN_WIDTH;
+    modifiers.push(sameWidth(anchorWidthOption));
   }
   if (fitWithinViewportHeight) {
     modifiers.push(_objectSpread2(_objectSpread2({}, maxSize), {}, {