@carbon/react 1.38.0 → 1.39.0

package/es/components/CodeSnippet/CodeSnippet.js

@@ -27,6 +27,7 @@ const defaultMinCollapsedNumberOfRows = 3;
 const defaultMinExpandedNumberOfRows = 16;
 function CodeSnippet(_ref) {
   let {
+    align = 'bottom',
     className,
     type,
     children,
@@ -146,6 +147,7 @@ function CodeSnippet(_ref) {
       }, children));
     }
     return /*#__PURE__*/React__default.createElement(Copy, _extends({}, rest, {
+      align: align,
       onClick: handleCopyClick,
       "aria-label": deprecatedAriaLabel || ariaLabel,
       "aria-describedby": uid,
@@ -200,6 +202,7 @@ function CodeSnippet(_ref) {
   }), hasRightOverflow && type !== 'multi' && /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--snippet__overflow-indicator--right`
   }), !hideCopyButton && /*#__PURE__*/React__default.createElement(CopyButton, {
+    align: align,
     size: type === 'multi' ? 'sm' : 'md',
     disabled: disabled,
     onClick: handleCopyClick,
@@ -222,13 +225,17 @@ function CodeSnippet(_ref) {
 }
 CodeSnippet.propTypes = {
   /**
-   * Specify a label to be read by screen readers on the containing <textbox>
+   * Specify how the trigger should align with the tooltip
+   */
+  align: PropTypes.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right']),
+  /**
+   * Specify a label to be read by screen readers on the containing textbox
    * node
    */
   ['aria-label']: PropTypes.string,
   /**
    * Deprecated, please use `aria-label` instead.
-   * Specify a label to be read by screen readers on the containing <textbox>
+   * Specify a label to be read by screen readers on the containing textbox
    * node
    */
   ariaLabel: deprecate(PropTypes.string, 'This prop syntax has been deprecated. Please use the new `aria-label`.'),

package/es/components/ComboBox/ComboBox.d.ts

@@ -5,11 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 import Downshift from 'downshift';
-import { ReactNodeLike } from 'prop-types';
-import React from 'react';
+import { type ComponentProps, type ReactNode, type ComponentType, type ReactElement, type RefAttributes, type PropsWithChildren, type PropsWithoutRef, type InputHTMLAttributes, type MouseEvent } from 'react';
 import { ListBoxType, ListBoxSize } from '../ListBox';
 type ExcludedAttributes = 'id' | 'onChange' | 'onClick' | 'type' | 'size';
-export interface ComboBoxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes> {
+interface OnChangeData<ItemType> {
+    selectedItem: ItemType | null;
+}
+type ItemToStringHandler<ItemType> = (item: ItemType | null) => string;
+export interface ComboBoxProps<ItemType> extends Omit<InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes> {
     /**
      * Specify a label to be read by screen readers on the container node
      * 'aria-label' of the ListBox component.
@@ -35,12 +38,12 @@ export interface ComboBoxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
     /**
      * Additional props passed to Downshift
      */
-    downshiftProps?: React.ComponentProps<typeof Downshift>;
+    downshiftProps?: ComponentProps<typeof Downshift<ItemType>>;
     /**
      * Provide helper text that is used alongside the control label for
      * additional help
      */
-    helperText?: string;
+    helperText?: ReactNode;
     /**
      * Specify a custom `id` for the input
      */
@@ -49,7 +52,7 @@ export interface ComboBoxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
      * 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?: object | string | number;
+    initialSelectedItem?: ItemType;
     /**
      * Specify if the currently selected value is invalid.
      */
@@ -57,23 +60,23 @@ export interface ComboBoxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
     /**
      * Message which is displayed if the value is invalid.
      */
-    invalidText?: ReactNodeLike;
+    invalidText?: ReactNode;
     /**
      * Optional function to render items as custom components instead of strings.
      * Defaults to null and is overridden by a getter
      */
-    itemToElement?: React.ComponentType | null;
+    itemToElement?: ComponentType<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: unknown) => string;
+    itemToString?: ItemToStringHandler<ItemType>;
     /**
      * 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: (object | string | number)[];
+    items: ItemType[];
     /**
      * @deprecated
      * should use "light theme" (white background)?
@@ -85,9 +88,7 @@ export interface ComboBoxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
      * `({ selectedItem }) => void`
     //  * @param {{ selectedItem }}
      */
-    onChange: (data: {
-        selectedItem: any;
-    }) => void;
+    onChange: (data: OnChangeData<ItemType>) => void;
     /**
      * Callback function to notify consumer when the text input changes.
      * This provides support to change available items based on the text.
@@ -95,18 +96,12 @@ export interface ComboBoxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
      * @param {string} inputText
      */
     onInputChange?: (inputText: string) => void;
-    /**
-     * Helper function passed to Downshift that allows the user to observe internal
-     * state changes
-     * `(changes, stateAndHelpers) => void`
-     */
-    onStateChange?: (changes: object, stateAndHelpers: object) => void;
     /**
      * Callback function that fires when the combobox menu toggle is clicked
      * `(evt) => void`
      * @param {MouseEvent} event
      */
-    onToggleClick?: (evt: MouseEvent) => void;
+    onToggleClick?: (evt: MouseEvent<HTMLButtonElement>) => void;
     /**
      * Used to provide a placeholder text node before a user enters any input.
      * This is only present if the control has no items selected
@@ -119,13 +114,17 @@ export interface ComboBoxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
     /**
      * For full control of the selection
      */
-    selectedItem?: object | string | number;
+    selectedItem?: ItemType | null;
     /**
      * Specify your own filtering logic by passing in a `shouldFilterItem`
      * function that takes in the current input and an item and passes back
      * whether or not the item should be filtered.
      */
-    shouldFilterItem?: (input: any) => boolean;
+    shouldFilterItem?: (input: {
+        item: ItemType;
+        itemToString?: ItemToStringHandler<ItemType>;
+        inputValue: string | null;
+    }) => boolean;
     /**
      * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
      */
@@ -134,12 +133,12 @@ export interface ComboBoxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
      * Provide text to be used in a `<label>` element that is tied to the
      * combobox via ARIA attributes.
      */
-    titleText?: ReactNodeLike;
+    titleText?: ReactNode;
     /**
      * Specify a custom translation function that takes in a message identifier
      * and returns the localized string for the message
      */
-    translateWithId?: (id: any) => string;
+    translateWithId?: (id: string) => string;
     /**
      * Currently supports either the default type, or an inline variant
      */
@@ -151,7 +150,11 @@ export interface ComboBoxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
     /**
      * Provide the text that is displayed when the control is in warning state
      */
-    warnText?: ReactNodeLike;
+    warnText?: ReactNode;
+}
+type ComboboxComponentProps<ItemType> = PropsWithoutRef<PropsWithChildren<ComboBoxProps<ItemType>> & RefAttributes<HTMLInputElement>>;
+interface ComboBoxComponent {
+    <ItemType>(props: ComboboxComponentProps<ItemType>): ReactElement | null;
 }
-declare const ComboBox: React.ForwardRefExoticComponent<ComboBoxProps & React.RefAttributes<unknown>>;
-export default ComboBox;
+declare const _default: ComboBoxComponent;
+export default _default;

package/es/components/ComboBox/ComboBox.js

@@ -9,7 +9,7 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import cx from 'classnames';
 import Downshift from 'downshift';
 import PropTypes from 'prop-types';
-import React__default, { useContext, useRef, useState, useEffect } from 'react';
+import React__default, { forwardRef, useContext, useRef, useState, useEffect } from 'react';
 import '../Text/index.js';
 import { WarningFilled, WarningAltFilled, Checkmark } from '@carbon/icons-react';
 import ListBox from '../ListBox/index.js';
@@ -38,7 +38,13 @@ const defaultItemToString = item => {
   if (typeof item === 'string') {
     return item;
   }
-  return item && item.label;
+  if (typeof item === 'number') {
+    return `${item}`;
+  }
+  if (item !== null && typeof item === 'object' && 'label' in item && typeof item['label'] === 'string') {
+    return item['label'];
+  }
+  return '';
 };
 const defaultShouldFilterItem = () => true;
 const getInputValue = _ref => {
@@ -74,10 +80,10 @@ const findHighlightedIndex = (_ref2, inputValue) => {
   return -1;
 };
 const getInstanceId = setupGetInstanceId();
-const ComboBox = /*#__PURE__*/React__default.forwardRef((props, ref) => {
+const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
   var _Text;
   const {
-    ['aria-label']: ariaLabel,
+    ['aria-label']: ariaLabel = 'Choose an item',
     ariaLabel: deprecatedAriaLabel,
     className: containerClassName,
     direction,
@@ -90,7 +96,7 @@ const ComboBox = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     invalidText,
     items,
     itemToElement,
-    itemToString,
+    itemToString = defaultItemToString,
     light,
     onChange,
     onInputChange,
@@ -98,14 +104,13 @@ const ComboBox = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     placeholder,
     readOnly,
     selectedItem,
-    shouldFilterItem,
+    shouldFilterItem = defaultShouldFilterItem,
     size,
     titleText,
     translateWithId,
     type: _type,
     warn,
     warnText,
-    onStateChange: _onStateChange,
     ...rest
   } = props;
   const prefix = usePrefix();
@@ -168,7 +173,7 @@ const ComboBox = /*#__PURE__*/React__default.forwardRef((props, ref) => {
       const {
         inputValue
       } = changes;
-      const filteredItems = filterItems(items, itemToString, inputValue);
+      const filteredItems = filterItems(items, itemToString, inputValue || null);
       const indexToHighlight = findHighlightedIndex({
         ...props,
         items: filteredItems
@@ -176,7 +181,7 @@ const ComboBox = /*#__PURE__*/React__default.forwardRef((props, ref) => {
       setHighlightedIndex(indexToHighlight);
       return indexToHighlight;
     }
-    return highlightedIndex;
+    return highlightedIndex || 0;
   };
   const handleOnStateChange = (changes, _ref3) => {
     let {
@@ -351,7 +356,7 @@ const ComboBox = /*#__PURE__*/React__default.forwardRef((props, ref) => {
       disabled: disabled,
       className: inputClasses,
       type: "text",
-      tabIndex: "0",
+      tabIndex: 0,
       "aria-autocomplete": "list",
       "aria-expanded": rootProps['aria-expanded'],
       "aria-haspopup": "listbox",
@@ -378,24 +383,24 @@ const ComboBox = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     }))), /*#__PURE__*/React__default.createElement(ListBox.Menu, getMenuProps({
       'aria-label': deprecatedAriaLabel || ariaLabel
     }), isOpen ? filterItems(items, itemToString, inputValue).map((item, index) => {
+      const isObject = item !== null && typeof item === 'object';
+      const title = isObject && 'text' in item && itemToElement ? item.text?.toString() : itemToString(item);
+      const disabled = isObject && 'disabled' in item ? !!item.disabled : undefined;
       const itemProps = getItemProps({
         item,
         index,
         ['aria-current']: selectedItem === item ? 'true' : 'false',
         ['aria-selected']: highlightedIndex === index ? 'true' : 'false',
-        disabled: item.disabled
+        disabled
       });
       return /*#__PURE__*/React__default.createElement(ListBox.MenuItem, _extends({
         key: itemProps.id,
         isActive: selectedItem === item,
         isHighlighted: highlightedIndex === index,
-        title: itemToElement ? item.text : itemToString ? itemToString(item) : undefined
-      }, itemProps), itemToElement ?
-      /*#__PURE__*/
-      // @ts-ignore
-      React__default.createElement(ItemToElement, _extends({
+        title: title
+      }, itemProps), ItemToElement ? /*#__PURE__*/React__default.createElement(ItemToElement, _extends({
         key: itemProps.id
-      }, item)) : itemToString ? itemToString(item) : defaultItemToString(item), selectedItem === item && /*#__PURE__*/React__default.createElement(Checkmark, {
+      }, item)) : itemToString(item), selectedItem === item && /*#__PURE__*/React__default.createElement(Checkmark, {
         className: `${prefix}--list-box__menu-item__selected-icon`
       }));
     }) : null)), helperText && !invalid && !warn && !isFluid && (_Text || (_Text = /*#__PURE__*/React__default.createElement(Text, {
@@ -439,7 +444,7 @@ ComboBox.propTypes = {
    * Provide helper text that is used alongside the control label for
    * additional help
    */
-  helperText: PropTypes.string,
+  helperText: PropTypes.node,
   /**
    * Specify a custom `id` for the input
    */
@@ -491,12 +496,6 @@ ComboBox.propTypes = {
    * @param {string} inputText
    */
   onInputChange: PropTypes.func,
-  /**
-   * Helper function passed to Downshift that allows the user to observe internal
-   * state changes
-   * `(changes, stateAndHelpers) => void`
-   */
-  onStateChange: PropTypes.func,
   /**
    * Callback function that fires when the combobox menu toggle is clicked
    * `(evt) => void`

package/es/components/Copy/Copy.js

@@ -16,6 +16,7 @@ import { IconButton } from '../IconButton/index.js';
 
 function Copy(_ref) {
   let {
+    align = 'bottom',
     children,
     className,
     feedback,
@@ -49,7 +50,7 @@ function Copy(_ref) {
   const initialLabel = other['aria-label'] ?? '';
   return /*#__PURE__*/React__default.createElement(IconButton, _extends({
     closeOnActivation: false,
-    align: "bottom",
+    align: align,
     className: classNames,
     label: animation ? feedback : initialLabel,
     onClick: composeEventHandlers([onClick, handleClick]),
@@ -59,6 +60,10 @@ function Copy(_ref) {
   }), children);
 }
 Copy.propTypes = {
+  /**
+   * Specify how the trigger should align with the tooltip
+   */
+  align: PropTypes.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right']),
   /**
    * Pass in content to be rendered in the underlying `<button>`
    */

package/es/components/CopyButton/CopyButton.js

@@ -16,6 +16,7 @@ import { usePrefix } from '../../internal/usePrefix.js';
 
 function CopyButton(_ref) {
   let {
+    align = 'bottom',
     iconDescription,
     className,
     ...other
@@ -27,6 +28,7 @@ function CopyButton(_ref) {
       max: 'lg'
     }
   }, /*#__PURE__*/React__default.createElement(Copy, _extends({
+    align: align,
     className: cx(className, `${prefix}--copy-btn`),
     "aria-label": iconDescription
   }, other), /*#__PURE__*/React__default.createElement(Copy$1, {
@@ -34,6 +36,10 @@ function CopyButton(_ref) {
   })));
 }
 CopyButton.propTypes = {
+  /**
+   * Specify how the trigger should align with the tooltip
+   */
+  align: PropTypes.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right']),
   /**
    * Specify an optional className to be applied to the underlying `<button>`
    */

package/es/components/FileUploader/FileUploader.js

@@ -28,7 +28,7 @@ class FileUploader extends React__default.Component {
       evt.stopPropagation();
       const filenames = Array.prototype.map.call(evt.target.files, file => file.name);
       this.setState({
-        filenames: this.props.multiple ? this.state.filenames.concat(filenames) : filenames
+        filenames: this.props.multiple ? [...new Set([...this.state.filenames, ...filenames])] : filenames
       });
       if (this.props.onChange) {
         this.props.onChange(evt);

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

@@ -9,3 +9,4 @@ export { Grid } from './Grid';
 export { default as Row } from './Row';
 export { default as Column } from './Column';
 export { ColumnHang } from './ColumnHang';
+export { GridSettings } from './GridContext';

package/es/components/Link/Link.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { AnchorHTMLAttributes, AriaAttributes, ComponentType, HTMLAttributeAnchorTarget } from 'react';
-interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
     /**
      * @description Indicates the element that represents the
      *   current item within a container or set of related

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

@@ -4,6 +4,6 @@
  * 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 Link from './Link';
+import Link, { type LinkProps } from './Link';
 export default Link;
-export { Link };
+export { Link, type LinkProps };

package/es/components/MultiSelect/MultiSelect.d.ts

@@ -21,7 +21,31 @@ interface SortItemsOptions<ItemType> extends SharedOptions, DownshiftTypedProps<
     selectedItems: ItemType[];
 }
 interface MultiSelectSortingProps<ItemType> {
+    /**
+     * Provide a compare function that is used to determine the ordering of
+     * options. See 'sortItems' for more control.
+     */
     compareItems?(item1: ItemType, item2: ItemType, options: SharedOptions): number;
+    /**
+     * Provide a method that sorts all options in the control. Overriding this
+     * prop means that you also have to handle the sort logic for selected versus
+     * un-selected items. If you just want to control ordering, consider the
+     * `compareItems` prop instead.
+     *
+     * The return value should be a number whose sign indicates the relative order
+     * of the two elements: negative if a is less than b, positive if a is greater
+     * than b, and zero if they are equal.
+     *
+     * sortItems :
+     *   (items: Array<Item>, {
+     *     selectedItems: Array<Item>,
+     *     itemToString: Item => string,
+     *     compareItems: (itemA: string, itemB: string, {
+     *       locale: string
+     *     }) => number,
+     *     locale: string,
+     *   }) => Array<Item>
+     */
     sortItems?(items: ReadonlyArray<ItemType>, options: SortItemsOptions<ItemType>): ItemType[];
 }
 export interface MultiSelectProps<ItemType> extends MultiSelectSortingProps<ItemType>, InternationalProps<'close.menu' | 'open.menu' | 'clear.all' | 'clear.selection'> {

package/es/components/MultiSelect/MultiSelect.js

@@ -390,6 +390,11 @@ MultiSelect.propTypes = {
    * Specify the text that should be read for screen readers to clear selection.
    */
   clearSelectionText: PropTypes.string,
+  /**
+   * Provide a compare function that is used to determine the ordering of
+   * options. See 'sortItems' for more control.
+   */
+  compareItems: PropTypes.func.isRequired,
   /**
    * Specify the direction of the multiselect dropdown. Can be either top or bottom.
    */
@@ -491,6 +496,27 @@ MultiSelect.propTypes = {
    * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
    */
   size: ListBoxSize,
+  /**
+   * Provide a method that sorts all options in the control. Overriding this
+   * prop means that you also have to handle the sort logic for selected versus
+   * un-selected items. If you just want to control ordering, consider the
+   * `compareItems` prop instead.
+   *
+   * The return value should be a number whose sign indicates the relative order
+   * of the two elements: negative if a is less than b, positive if a is greater
+   * than b, and zero if they are equal.
+   *
+   * sortItems :
+   *   (items: Array<Item>, {
+   *     selectedItems: Array<Item>,
+   *     itemToString: Item => string,
+   *     compareItems: (itemA: string, itemB: string, {
+   *       locale: string
+   *     }) => number,
+   *     locale: string,
+   *   }) => Array<Item>
+   */
+  sortItems: PropTypes.func.isRequired,
   /**
    * Provide text to be used in a `<label>` element that is tied to the
    * multiselect via ARIA attributes.

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

@@ -4,7 +4,7 @@
  * 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, { type WeakValidationMap, type ElementType } from 'react';
+import React, { type ForwardedRef, type WeakValidationMap, type ElementType } from 'react';
 import { type PolymorphicProps } from '../../types/common';
 export type PopoverAlignment = 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'left-bottom' | 'left-top' | 'right' | 'right-bottom' | 'right-top';
 interface PopoverBaseProps {
@@ -52,10 +52,14 @@ interface PopoverBaseProps {
     open: boolean;
 }
 export type PopoverProps<E extends ElementType> = PolymorphicProps<E, PopoverBaseProps>;
-export declare const Popover: (<E extends React.ElementType<any> = "span">(props: PopoverProps<E>) => JSX.Element) & {
-    displayName?: string | undefined;
-    propTypes?: WeakValidationMap<PopoverProps<any>> | undefined;
-};
+export interface PopoverComponent {
+    <E extends ElementType = 'span'>(props: PopoverProps<E> & {
+        forwardRef?: ForwardedRef<ElementType>;
+    }): JSX.Element | null;
+    displayName?: string;
+    propTypes?: WeakValidationMap<PopoverProps<any>>;
+}
+export declare const Popover: PopoverComponent;
 export type PopoverContentProps = React.HTMLAttributes<HTMLSpanElement>;
 export declare const PopoverContent: React.ForwardRefExoticComponent<PopoverContentProps & React.RefAttributes<HTMLSpanElement>>;
 export {};

package/es/components/Popover/index.js

@@ -19,7 +19,7 @@ const PopoverContext = /*#__PURE__*/React__default.createContext({
     current: null
   }
 });
-function PopoverRenderFunction(_ref, forwardRef) {
+const Popover = /*#__PURE__*/React__default.forwardRef(function PopoverRenderFunction(_ref, forwardRef) {
   let {
     isTabTip,
     align = isTabTip ? 'bottom-left' : 'bottom',
@@ -179,8 +179,7 @@ function PopoverRenderFunction(_ref, forwardRef) {
     className: className,
     ref: ref
   }), isTabTip ? mappedChildren : children));
-}
-const Popover = /*#__PURE__*/React__default.forwardRef(PopoverRenderFunction);
+});
 
 // Note: this displayName is temporarily set so that Storybook ArgTable
 // correctly displays the name of this component

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

@@ -0,0 +1,32 @@
+/**
+ * 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.
+ */
+/// <reference types="react" />
+import PropTypes from 'prop-types';
+export interface StructuredListSkeletonProps {
+    /**
+     * Specify an optional className to add.
+     */
+    className?: string;
+    /**
+     * number of table rows
+     */
+    rowCount?: number;
+}
+declare function StructuredListSkeleton({ rowCount, className, ...rest }: StructuredListSkeletonProps): JSX.Element;
+declare namespace StructuredListSkeleton {
+    var propTypes: {
+        /**
+         * Specify an optional className to add.
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * number of table rows
+         */
+        rowCount: PropTypes.Requireable<number>;
+    };
+}
+export default StructuredListSkeleton;

package/es/components/StructuredList/StructuredList.Skeleton.js

@@ -12,32 +12,26 @@ import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 
 var _span, _span2, _span3;
-const StructuredListSkeleton = _ref => {
+function StructuredListSkeleton(_ref) {
   let {
-    rowCount,
+    rowCount = 5,
     className,
     ...rest
   } = _ref;
   const prefix = usePrefix();
-  const StructuredListSkeletonClasses = cx(className, {
-    [`${prefix}--skeleton`]: true,
-    [`${prefix}--structured-list`]: true
-  });
-  const rows = [];
-  for (var i = 0; i < rowCount; i++) {
-    rows.push( /*#__PURE__*/React__default.createElement("div", {
-      className: `${prefix}--structured-list-row`,
-      key: i
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: `${prefix}--structured-list-td`
-    }), /*#__PURE__*/React__default.createElement("div", {
-      className: `${prefix}--structured-list-td`
-    }), /*#__PURE__*/React__default.createElement("div", {
-      className: `${prefix}--structured-list-td`
-    })));
-  }
+  const classNames = cx(`${prefix}--skeleton`, `${prefix}--structured-list`, className);
+  const rows = new Array(rowCount).fill(null).map((_, i) => /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--structured-list-row`,
+    key: i
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--structured-list-td`
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--structured-list-td`
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--structured-list-td`
+  })));
   return /*#__PURE__*/React__default.createElement("div", _extends({
-    className: StructuredListSkeletonClasses
+    className: classNames
   }, rest), /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--structured-list-thead`
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -51,7 +45,7 @@ const StructuredListSkeleton = _ref => {
   }, _span3 || (_span3 = /*#__PURE__*/React__default.createElement("span", null))))), /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--structured-list-tbody`
   }, rows));
-};
+}
 StructuredListSkeleton.propTypes = {
   /**
    * Specify an optional className to add.
@@ -62,9 +56,5 @@ StructuredListSkeleton.propTypes = {
    */
   rowCount: PropTypes.number
 };
-StructuredListSkeleton.defaultProps = {
-  rowCount: 5
-};
-var StructuredListSkeleton$1 = StructuredListSkeleton;
 
-export { StructuredListSkeleton$1 as default };
+export { StructuredListSkeleton as default };