@carbon/react 1.69.0 → 1.70.0

package/es/components/CheckboxGroup/CheckboxGroup.js

@@ -48,7 +48,7 @@ const CheckboxGroup = _ref => {
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if ( /*#__PURE__*/React__default.isValidElement(slug) && slug['type']?.displayName === 'AILabel') {
+  if (/*#__PURE__*/React__default.isValidElement(slug) && slug['type']?.displayName === 'AILabel') {
     normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
       size: 'mini',
       kind: 'default'

package/es/components/ComboBox/ComboBox.js

@@ -12,6 +12,7 @@ import PropTypes from 'prop-types';
 import React__default, { forwardRef, useRef, useEffect, useState, useContext, useCallback, useMemo } from 'react';
 import '../Text/index.js';
 import { WarningFilled, WarningAltFilled, Checkmark } from '@carbon/icons-react';
+import isEqual from 'react-fast-compare';
 import ListBox from '../ListBox/index.js';
 import ListBoxSelection from '../ListBox/next/ListBoxSelection.js';
 import ListBoxTrigger from '../ListBox/next/ListBoxTrigger.js';
@@ -225,11 +226,15 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
         selectedItem: selectedItemProp,
         prevSelectedItem: prevSelectedItemProp.current
       });
-      setInputValue(currentInputValue);
-      onChange({
-        selectedItem: selectedItemProp,
-        inputValue: currentInputValue
-      });
+
+      // selectedItem has been updated externally, need to update state and call onChange
+      if (inputValue !== currentInputValue) {
+        setInputValue(currentInputValue);
+        onChange({
+          selectedItem: selectedItemProp,
+          inputValue: currentInputValue
+        });
+      }
       prevSelectedItemProp.current = selectedItemProp;
     }
   }, [selectedItemProp]);
@@ -443,9 +448,12 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
       let {
         selectedItem
       } = _ref5;
-      onChange({
-        selectedItem
-      });
+      // only call onChange if new selection is updated from previous
+      if (!isEqual(selectedItem, selectedItemProp)) {
+        onChange({
+          selectedItem
+        });
+      }
     },
     onHighlightedIndexChange: _ref6 => {
       let {

package/es/components/ComposedModal/ComposedModal.js

@@ -210,7 +210,8 @@ const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedMo
           const el = child;
           return /*#__PURE__*/React__default.cloneElement(el, {
             closeModal,
-            inputref: button
+            inputref: button,
+            danger
           });
         }
       default:
@@ -227,7 +228,7 @@ const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedMo
   useEffect(() => {
     const initialFocus = focusContainerElement => {
       const containerElement = focusContainerElement || innerModal.current;
-      const primaryFocusElement = containerElement ? containerElement.querySelector(selectorPrimaryFocus) : null;
+      const primaryFocusElement = containerElement ? containerElement.querySelector(danger ? `.${prefix}--btn--secondary` : selectorPrimaryFocus) : null;
       if (primaryFocusElement) {
         return primaryFocusElement;
       }
@@ -235,8 +236,11 @@ const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedMo
     };
     const focusButton = focusContainerElement => {
       const target = initialFocus(focusContainerElement);
+      const closeButton = focusContainerElement.querySelector(`.${prefix}--modal-close`);
       if (target) {
         target.focus();
+      } else if (!target && closeButton) {
+        closeButton?.focus();
       }
     };
     if (open && isOpen) {

package/es/components/ContextMenu/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2020, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import useContextMenu from './useContextMenu';
+export { useContextMenu };

package/es/components/ContextMenu/useContextMenu.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Copyright IBM Corp. 2020, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/// <reference types="react" />
+type TriggerType = Element | Document | Window | React.RefObject<Element>;
+interface ContextMenuProps {
+    open: boolean;
+    x: number;
+    y: number;
+    onClose: () => void;
+    mode: string;
+}
+/**
+ * @param {TriggerType} [trigger=document] The element or ref which should trigger the Menu on right-click
+ * @returns {ContextMenuProps} Props object to pass onto Menu component
+ */
+declare function useContextMenu(trigger?: TriggerType): ContextMenuProps;
+export default useContextMenu;

package/es/components/ContextMenu/useContextMenu.js

@@ -8,8 +8,8 @@
 import { useState, useEffect } from 'react';
 
 /**
- * @param {Element|Document|Window|object} [trigger=document] The element or ref which should trigger the Menu on right-click
- * @returns {object} Props object to pass onto Menu component
+ * @param {TriggerType} [trigger=document] The element or ref which should trigger the Menu on right-click
+ * @returns {ContextMenuProps} Props object to pass onto Menu component
  */
 function useContextMenu() {
   let trigger = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : document;
@@ -18,8 +18,8 @@ function useContextMenu() {
   function openContextMenu(e) {
     e.preventDefault();
     const {
-      x,
-      y
+      clientX: x,
+      clientY: y
     } = e;
     setPosition([x, y]);
     setOpen(true);
@@ -28,11 +28,12 @@ function useContextMenu() {
     setOpen(false);
   }
   useEffect(() => {
-    const el = trigger?.current ?? trigger;
-    if (el && el instanceof Element || el instanceof Document || el instanceof Window) {
-      el.addEventListener('contextmenu', openContextMenu);
+    const el = trigger instanceof Element || trigger instanceof Document || trigger instanceof Window ? trigger : trigger.current;
+    if (el) {
+      const eventListener = e => openContextMenu(e);
+      el.addEventListener('contextmenu', eventListener);
       return () => {
-        el.removeEventListener('contextmenu', openContextMenu);
+        el.removeEventListener('contextmenu', eventListener);
       };
     }
   }, [trigger]);

package/es/components/DataTable/DataTable.d.ts

@@ -6,6 +6,7 @@
  */
 import PropTypes from 'prop-types';
 import React from 'react';
+import type { MouseEvent } from 'react';
 import type { DataTableSortState } from './state/sortStates';
 import Table from './Table';
 import TableActionList from './TableActionList';
@@ -131,13 +132,13 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
     }) => {
         ariaLabel: string;
         'aria-label': string;
-        checked?: boolean;
+        checked?: boolean | undefined;
         disabled?: boolean | undefined;
         id: string;
         indeterminate?: boolean;
         name: string;
         onSelect: (e: React.MouseEvent<HTMLInputElement>) => void;
-        radio?: boolean;
+        radio?: boolean | undefined;
         [key: string]: unknown;
     };
     getToolbarProps: (getToolbarPropsArgs?: {

package/es/components/DataTable/Table.d.ts

@@ -33,9 +33,13 @@ interface TableProps {
      * `true` to add useZebraStyles striping.
      */
     useZebraStyles?: boolean;
+    /**
+     * Specify the table tabIndex
+     */
+    tabIndex?: number;
 }
 export declare const Table: {
-    ({ className, children, useZebraStyles, size, isSortable, useStaticWidth, stickyHeader, overflowMenuOnHover, experimentalAutoAlign, ...other }: PropsWithChildren<TableProps>): import("react/jsx-runtime").JSX.Element;
+    ({ className, children, useZebraStyles, size, isSortable, useStaticWidth, stickyHeader, overflowMenuOnHover, experimentalAutoAlign, tabIndex, ...other }: PropsWithChildren<TableProps>): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Pass in the children that will be rendered within the Table
@@ -70,6 +74,10 @@ export declare const Table: {
          * `true` to add useZebraStyles striping.
          */
         useZebraStyles: PropTypes.Requireable<boolean>;
+        /**
+         * Specify the table tabIndex
+         */
+        tabIndex: PropTypes.Requireable<number>;
     };
 };
 export default Table;

package/es/components/DataTable/Table.js

@@ -54,6 +54,7 @@ const Table = _ref => {
     stickyHeader,
     overflowMenuOnHover = true,
     experimentalAutoAlign = false,
+    tabIndex,
     ...other
   } = _ref;
   const {
@@ -129,7 +130,7 @@ const Table = _ref => {
     className: `${prefix}--data-table-content`
     // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
     ,
-    tabIndex: isScrollable ? 0 : undefined
+    tabIndex: tabIndex ?? (isScrollable ? 0 : undefined)
   }, /*#__PURE__*/React__default.createElement("table", _extends({
     "aria-labelledby": titleId,
     "aria-describedby": descriptionId
@@ -174,7 +175,11 @@ Table.propTypes = {
   /**
    * `true` to add useZebraStyles striping.
    */
-  useZebraStyles: PropTypes.bool
+  useZebraStyles: PropTypes.bool,
+  /**
+   * Specify the table tabIndex
+   */
+  tabIndex: PropTypes.number
 };
 
 export { Table, Table as default };

package/es/components/DatePicker/DatePicker.js

@@ -530,9 +530,6 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
     const closeCalendar = event => {
       calendarRef.current.close();
       // Remove focus from endDate calendar input
-      if (document.activeElement instanceof HTMLElement) {
-        document.activeElement.blur();
-      }
       onCalendarClose(calendarRef.current.selectedDates, '', calendarRef.current, {
         type: 'clickOutside'
       });
@@ -558,12 +555,7 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
     if (!calendarRef.current || !startInputField.current) return;
     const handleKeyDown = event => {
       if (match(event, Tab) && !event.shiftKey && document.activeElement === endInputField.current && calendarRef.current.isOpen) {
-        event.preventDefault();
         calendarRef.current.close();
-        // Remove focus from endDate calendar input
-        document.activeElement instanceof HTMLElement &&
-        // this is to fix the TS warning
-        document?.activeElement?.blur();
         onCalendarClose(calendarRef.current.selectedDates, '', calendarRef.current, event);
       }
     };

package/es/components/DatePicker/plugins/appendToPlugin.js

@@ -9,7 +9,7 @@
  * @param {object} config Plugin configuration.
  * @returns {Plugin} A Flatpickr plugin to put adjust the position of calendar dropdown.
  */
-var carbonFlatpickrAppendToPlugin = (config => fp => {
+var carbonFlatpickrAppendToPlugin = config => fp => {
   /**
    * Adjusts the floating menu position after Flatpicker sets it.
    */
@@ -51,6 +51,6 @@ var carbonFlatpickrAppendToPlugin = (config => fp => {
     onReady: register,
     onPreCalendarPosition: handlePreCalendarPosition
   };
-});
+};
 
 export { carbonFlatpickrAppendToPlugin as default };

package/es/components/DatePicker/plugins/fixEventsPlugin.js

@@ -12,7 +12,7 @@ import { Enter, ArrowLeft, ArrowRight, ArrowDown } from '../../../internal/keybo
  * @param {object} config Plugin configuration.
  * @returns {Plugin} A Flatpickr plugin to fix Flatpickr's behavior of certain events.
  */
-var carbonFlatpickrFixEventsPlugin = (config => fp => {
+var carbonFlatpickrFixEventsPlugin = config => fp => {
   const {
     inputFrom,
     inputTo,
@@ -150,6 +150,6 @@ var carbonFlatpickrFixEventsPlugin = (config => fp => {
     onReady: [register, init],
     onDestroy: [release]
   };
-});
+};
 
 export { carbonFlatpickrFixEventsPlugin as default };

package/es/components/DatePicker/plugins/rangePlugin.js

@@ -14,7 +14,7 @@ import rangePlugin from 'flatpickr/dist/plugins/rangePlugin';
  *     Workaround for: https://github.com/flatpickr/flatpickr/issues/1944
  *   * A logic to ensure `fp.setDate()` call won't end up with "startDate to endDate" set to the first `<input>`
  */
-var carbonFlatpickrRangePlugin = (config => {
+var carbonFlatpickrRangePlugin = config => {
   const factory = rangePlugin(Object.assign({
     position: 'left'
   }, config));
@@ -49,6 +49,6 @@ var carbonFlatpickrRangePlugin = (config => {
       onPreCalendarPosition() {}
     });
   };
-});
+};
 
 export { carbonFlatpickrRangePlugin as default };

package/es/components/Dropdown/Dropdown.d.ts

@@ -12,7 +12,7 @@ type ExcludedAttributes = 'id' | 'onChange';
 export interface OnChangeData<ItemType> {
     selectedItem: ItemType | null;
 }
-export interface DropdownProps<ItemType> extends Omit<ReactAttr<HTMLDivElement>, ExcludedAttributes>, TranslateWithId<ListBoxMenuIconTranslationKey> {
+export interface DropdownProps<ItemType> extends Omit<ReactAttr<HTMLDivElement>, ExcludedAttributes>, TranslateWithId<ListBoxMenuIconTranslationKey>, React.RefAttributes<HTMLDivElement> {
     /**
      * Specify a label to be read by screen readers on the container node
      * 'aria-label' of the ListBox component.
@@ -127,7 +127,7 @@ export interface DropdownProps<ItemType> extends Omit<ReactAttr<HTMLDivElement>,
      * Provide the title text that will be read by a screen reader when
      * visiting this control
      */
-    titleText?: ReactNode;
+    titleText: ReactNode;
     /**
      * The dropdown type, `default` or `inline`
      */

package/es/components/FeatureFlags/index.d.ts

@@ -14,6 +14,7 @@ interface FeatureFlagsProps {
     enableV12Overflowmenu?: boolean;
     enableTreeviewControllable?: boolean;
     enableExperimentalFocusWrapWithoutSentinels?: boolean;
+    enableV12DynamicFloatingStyles?: boolean;
 }
 /**
  * Our FeatureFlagContext is used alongside the FeatureFlags component to enable
@@ -25,7 +26,7 @@ declare const FeatureFlagContext: React.Context<any>;
  * along with the current `FeatureFlagContext` to provide consumers to check if
  * a feature flag is enabled or disabled in a given React tree
  */
-declare function FeatureFlags({ children, flags, enableV12TileDefaultIcons, enableV12TileRadioIcons, enableV12Overflowmenu, enableTreeviewControllable, enableExperimentalFocusWrapWithoutSentinels, }: FeatureFlagsProps): JSX.Element;
+declare function FeatureFlags({ children, flags, enableV12TileDefaultIcons, enableV12TileRadioIcons, enableV12Overflowmenu, enableTreeviewControllable, enableExperimentalFocusWrapWithoutSentinels, enableV12DynamicFloatingStyles, }: FeatureFlagsProps): JSX.Element;
 declare namespace FeatureFlags {
     var propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
@@ -38,6 +39,7 @@ declare namespace FeatureFlags {
         enableV12Overflowmenu: PropTypes.Requireable<boolean>;
         enableTreeviewControllable: PropTypes.Requireable<boolean>;
         enableExperimentalFocusWrapWithoutSentinels: PropTypes.Requireable<boolean>;
+        enableV12DynamicFloatingStyles: PropTypes.Requireable<boolean>;
     };
 }
 /**

package/es/components/FeatureFlags/index.js

@@ -29,7 +29,8 @@ function FeatureFlags(_ref) {
     enableV12TileRadioIcons = false,
     enableV12Overflowmenu = false,
     enableTreeviewControllable = false,
-    enableExperimentalFocusWrapWithoutSentinels = false
+    enableExperimentalFocusWrapWithoutSentinels = false,
+    enableV12DynamicFloatingStyles = false
   } = _ref;
   const parentScope = useContext(FeatureFlagContext);
   const [prevParentScope, setPrevParentScope] = useState(parentScope);
@@ -39,6 +40,7 @@ function FeatureFlags(_ref) {
     'enable-v12-overflowmenu': enableV12Overflowmenu,
     'enable-treeview-controllable': enableTreeviewControllable,
     'enable-experimental-focus-wrap-without-sentinels': enableExperimentalFocusWrapWithoutSentinels,
+    'enable-v12-dynamic-floating-styles': enableV12DynamicFloatingStyles,
     ...flags
   };
   const [scope, updateScope] = useState(() => {
@@ -75,7 +77,8 @@ FeatureFlags.propTypes = {
   enableV12TileRadioIcons: PropTypes.bool,
   enableV12Overflowmenu: PropTypes.bool,
   enableTreeviewControllable: PropTypes.bool,
-  enableExperimentalFocusWrapWithoutSentinels: PropTypes.bool
+  enableExperimentalFocusWrapWithoutSentinels: PropTypes.bool,
+  enableV12DynamicFloatingStyles: PropTypes.bool
 };
 
 /**

package/es/components/FluidComboBox/FluidComboBox.Skeleton.js

@@ -17,12 +17,12 @@ const FluidComboBoxSkeleton = _ref => {
     ...rest
   } = _ref;
   const prefix = usePrefix();
-  const wrapperClasses = cx(className, `${prefix}--skeleton`, `${prefix}--list-box`);
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: `${prefix}--list-box__wrapper--fluid`
-  }, /*#__PURE__*/React__default.createElement("div", _extends({
+  const wrapperClasses = cx(className, `${prefix}--list-box__wrapper--fluid`);
+  return /*#__PURE__*/React__default.createElement("div", _extends({
     className: wrapperClasses
-  }, rest), /*#__PURE__*/React__default.createElement("span", {
+  }, rest), /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--skeleton ${prefix}--list-box`
+  }, /*#__PURE__*/React__default.createElement("span", {
     className: `${prefix}--list-box__label`
   }), /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--list-box__field`

package/es/components/FluidDropdown/FluidDropdown.Skeleton.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+export interface FluidDropdownSkeletonProps {
+    /**
+     * Specify an optional className to add.
+     */
+    className?: string;
+}
+declare const FluidDropdownSkeleton: React.FC<FluidDropdownSkeletonProps>;
+export default FluidDropdownSkeleton;

package/es/components/FluidDropdown/FluidDropdown.Skeleton.js

@@ -17,13 +17,12 @@ const FluidDropdownSkeleton = _ref => {
     ...rest
   } = _ref;
   const prefix = usePrefix();
-  const wrapperContainerClasses = cx(className, `${prefix}--list-box__wrapper--fluid`);
-  const wrapperClasses = cx(`${prefix}--skeleton`, `${prefix}--list-box`);
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: wrapperContainerClasses
-  }, /*#__PURE__*/React__default.createElement("div", _extends({
+  const wrapperClasses = cx(className, `${prefix}--list-box__wrapper--fluid`);
+  return /*#__PURE__*/React__default.createElement("div", _extends({
     className: wrapperClasses
-  }, rest), /*#__PURE__*/React__default.createElement("span", {
+  }, rest), /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--skeleton ${prefix}--list-box`
+  }, /*#__PURE__*/React__default.createElement("span", {
     className: `${prefix}--list-box__label`
   }), /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--list-box__field`
@@ -35,6 +34,5 @@ FluidDropdownSkeleton.propTypes = {
    */
   className: PropTypes.string
 };
-var FluidDropdownSkeleton$1 = FluidDropdownSkeleton;
 
-export { FluidDropdownSkeleton$1 as default };
+export { FluidDropdownSkeleton as default };

package/es/components/FluidDropdown/FluidDropdown.d.ts

@@ -0,0 +1,101 @@
+/**
+ * Copyright IBM Corp. 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import { DropdownProps } from '../Dropdown';
+export interface OnChangeData<ItemType> {
+    selectedItem: ItemType | null;
+}
+export interface FluidDropdownProps<ItemType> extends DropdownProps<ItemType> {
+    /**
+     * Specify an optional className to be applied to the outer FluidForm wrapper
+     */
+    className?: string;
+    /**
+     * Specify the direction of the dropdown. Can be either top or bottom.
+     */
+    direction?: 'top' | 'bottom';
+    /**
+     * Specify whether the `<input>` should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * Specify a custom `id` for the `<input>`
+     */
+    id: string;
+    /**
+     * Allow users to pass in an arbitrary item or a string (in case their items are an array of strings)
+     * from their collection that are pre-selected
+     */
+    initialSelectedItem?: ItemType;
+    /**
+     * Specify if the currently selected value is invalid.
+     */
+    invalid?: boolean;
+    /**
+     * Provide the text that is displayed when the control is in an invalid state
+     */
+    invalidText?: React.ReactNode;
+    /**
+     * Specify if the `FluidDropdown` should render its menu items in condensed mode
+     */
+    isCondensed?: boolean;
+    /**
+     * Function to render items as custom components instead of strings.
+     * Defaults to null and is overridden by a getter
+     */
+    itemToElement?: React.JSXElementConstructor<ItemType> | null;
+    /**
+     * Helper function passed to downshift that allows the library to render a
+     * given item to a string label. By default, it extracts the `label` field
+     * from a given item to serve as the item label in the list.
+     */
+    itemToString?(item: ItemType | null): string;
+    /**
+     * We try to stay as generic as possible here to allow individuals to pass
+     * in a collection of whatever kind of data structure they prefer
+     */
+    items: ItemType[];
+    /**
+     * Generic `label` that will be used as the textual representation of what
+     * this field is for
+     */
+    label: NonNullable<React.ReactNode>;
+    /**
+     * `onChange` is a utility for this controlled component to communicate to a
+     * consuming component what kind of internal state changes are occurring.
+     */
+    onChange?(data: OnChangeData<ItemType>): void;
+    /**
+     * An optional callback to render the currently selected item as a react element instead of only
+     * as a string.
+     */
+    renderSelectedItem?(item: ItemType): React.ReactNode;
+    /**
+     * In the case you want to control the dropdown selection entirely.
+     * This value is the selected item from the list of items
+     */
+    selectedItem?: ItemType;
+    /**
+     * Provide the title text that will be read by a screen reader when
+     * visiting this control
+     */
+    titleText: React.ReactNode;
+    /**
+     * Callback function for translating ListBoxMenuIcon SVG title
+     */
+    translateWithId?: (id: string) => string;
+    /**
+     * Specify whether the control is currently in warning state
+     */
+    warn?: boolean;
+    /**
+     * Provide the text that is displayed when the control is in warning state
+     */
+    warnText?: React.ReactNode;
+}
+declare const FluidDropdown: React.ForwardRefExoticComponent<Omit<FluidDropdownProps<unknown>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export default FluidDropdown;

package/es/components/FluidDropdown/FluidDropdown.js

@@ -120,6 +120,5 @@ FluidDropdown.propTypes = {
    */
   warnText: PropTypes.node
 };
-var FluidDropdown$1 = FluidDropdown;
 
-export { FluidDropdown$1 as default };
+export { FluidDropdown as default };

package/es/components/FluidDropdown/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Copyright IBM Corp. 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import FluidDropdown from './FluidDropdown';
+import { type FluidDropdownProps } from './FluidDropdown';
+import { type FluidDropdownSkeletonProps } from './FluidDropdown.Skeleton';
+export type { FluidDropdownProps, FluidDropdownSkeletonProps };
+export default FluidDropdown;
+export { FluidDropdown };
+export { default as FluidDropdownSkeleton } from './FluidDropdown.Skeleton';

package/es/components/FluidMultiSelect/FluidMultiSelect.Skeleton.js

@@ -17,12 +17,12 @@ const FluidMultiSelectSkeleton = _ref => {
     ...rest
   } = _ref;
   const prefix = usePrefix();
-  const wrapperClasses = cx(className, `${prefix}--skeleton`, `${prefix}--list-box`);
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: `${prefix}--list-box__wrapper--fluid`
-  }, /*#__PURE__*/React__default.createElement("div", _extends({
+  const wrapperClasses = cx(className, `${prefix}--list-box__wrapper--fluid`);
+  return /*#__PURE__*/React__default.createElement("div", _extends({
     className: wrapperClasses
-  }, rest), /*#__PURE__*/React__default.createElement("span", {
+  }, rest), /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--skeleton ${prefix}--list-box`
+  }, /*#__PURE__*/React__default.createElement("span", {
     className: `${prefix}--list-box__label`
   }), /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--list-box__field`

package/es/components/FluidSelect/FluidSelect.Skeleton.js

@@ -17,12 +17,12 @@ const FluidSelectSkeleton = _ref => {
     ...rest
   } = _ref;
   const prefix = usePrefix();
-  const wrapperClasses = cx(className, `${prefix}--skeleton`, `${prefix}--list-box`);
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: `${prefix}--list-box__wrapper--fluid`
-  }, /*#__PURE__*/React__default.createElement("div", _extends({
+  const wrapperClasses = cx(className, `${prefix}--list-box__wrapper--fluid`);
+  return /*#__PURE__*/React__default.createElement("div", _extends({
     className: wrapperClasses
-  }, rest), /*#__PURE__*/React__default.createElement("span", {
+  }, rest), /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--skeleton ${prefix}--list-box`
+  }, /*#__PURE__*/React__default.createElement("span", {
     className: `${prefix}--list-box__label`
   }), /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--list-box__field`

package/es/components/FluidTextArea/FluidTextArea.Skeleton.d.ts

@@ -1,20 +1,9 @@
-import PropTypes from 'prop-types';
+import React from 'react';
 export interface FluidTextAreaSkeletonProps {
     /**
      * Specify an optional className to be applied to the outer FluidForm wrapper
      */
     className?: string;
 }
-declare function FluidTextAreaSkeleton({ className, ...other }: {
-    [x: string]: any;
-    className: any;
-}): void;
-declare namespace FluidTextAreaSkeleton {
-    var propTypes: {
-        /**
-         * Specify an optional className to be applied to the outer FluidForm wrapper
-         */
-        className: PropTypes.Requireable<string>;
-    };
-}
+declare const FluidTextAreaSkeleton: React.FC<FluidTextAreaSkeletonProps>;
 export default FluidTextAreaSkeleton;