@carbon/react 1.39.0-rc.0 → 1.40.0

package/es/components/CodeSnippet/CodeSnippet.js

@@ -229,13 +229,13 @@ CodeSnippet.propTypes = {
    */
   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>
+   * 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/DataTable/TableSelectAll.js

@@ -24,6 +24,7 @@ const TableSelectAll = _ref => {
   } = _ref;
   const prefix = usePrefix();
   return /*#__PURE__*/React__default.createElement("th", {
+    "aria-live": "off",
     scope: "col",
     className: cx(`${prefix}--table-column-checkbox`, className)
   }, /*#__PURE__*/React__default.createElement(InlineCheckbox, {

package/es/components/DataTable/TableSelectRow.js

@@ -42,7 +42,8 @@ const TableSelectRow = _ref => {
     [`${prefix}--table-column-radio`]: radio
   });
   return /*#__PURE__*/React__default.createElement("td", {
-    className: tableSelectRowClasses
+    className: tableSelectRowClasses,
+    "aria-live": "off"
   }, /*#__PURE__*/React__default.createElement(InlineInputComponent, _extends({}, selectionInputProps, radio && {
     labelText: ariaLabel,
     hideLabel: true

package/es/components/FileUploader/FileUploaderItem.d.ts

@@ -28,6 +28,10 @@ export interface FileUploaderItemProps extends ReactAttr<HTMLSpanElement> {
      * Name of the uploaded file
      */
     name?: string;
+    /**
+     * Event handler that is called after files are added to the uploader
+     */
+    onAddFiles?: (event: React.ChangeEvent<HTMLInputElement>) => void;
     /**
      * Event handler that is called after removing a file from the file uploader
      * The event handler signature looks like `onDelete(evt, { uuid })`

package/es/components/FileUploader/FileUploaderItem.js

@@ -8,10 +8,12 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default, { useRef } from 'react';
+import React__default, { useState, useRef, useLayoutEffect } from 'react';
 import Filename from './Filename.js';
 import uniqueId from '../../tools/uniqueId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import '../Tooltip/DefinitionTooltip.js';
+import { Tooltip } from '../Tooltip/Tooltip.js';
 import { matches } from '../../internal/keyboard/match.js';
 import { Enter, Space } from '../../internal/keyboard/keys.js';
 
@@ -28,6 +30,7 @@ function FileUploaderItem(_ref) {
     size,
     ...other
   } = _ref;
+  const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
   const prefix = usePrefix();
   const {
     current: id
@@ -37,13 +40,37 @@ function FileUploaderItem(_ref) {
     [`${prefix}--file__selected-file--md`]: size === 'md',
     [`${prefix}--file__selected-file--sm`]: size === 'sm'
   });
+  const isInvalid = invalid ? `${prefix}--file-filename-container-wrap-invalid` : `${prefix}--file-filename-container-wrap`;
+  const isEllipsisActive = element => {
+    setIsEllipsisApplied(element.offsetWidth < element.scrollWidth);
+    return element.offsetWidth < element.scrollWidth;
+  };
+  useLayoutEffect(() => {
+    const element = document.querySelector(`[title="${name}"]`);
+    isEllipsisActive(element);
+  }, [prefix, name]);
   return /*#__PURE__*/React__default.createElement("span", _extends({
     className: classes
-  }, other), /*#__PURE__*/React__default.createElement("p", {
-    className: `${prefix}--file-filename`,
+  }, other), isEllipsisApplied ? /*#__PURE__*/React__default.createElement("div", {
+    className: isInvalid
+  }, /*#__PURE__*/React__default.createElement(Tooltip, {
+    label: name,
+    align: "bottom",
+    className: `${prefix}--file-filename-tooltip`
+  }, /*#__PURE__*/React__default.createElement("button", {
+    className: `${prefix}--file-filename-button`,
+    type: "button"
+  }, /*#__PURE__*/React__default.createElement("p", {
+    title: name,
+    className: `${prefix}--file-filename-button`,
+    id: name
+  }, name)))) : /*#__PURE__*/React__default.createElement("p", {
     title: name,
+    className: `${prefix}--file-filename`,
     id: name
-  }, name), /*#__PURE__*/React__default.createElement("span", {
+  }, name), /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--file-container-item`
+  }, /*#__PURE__*/React__default.createElement("span", {
     className: `${prefix}--file__state-container`
   }, /*#__PURE__*/React__default.createElement(Filename, {
     name: name,
@@ -68,7 +95,7 @@ function FileUploaderItem(_ref) {
         });
       }
     }
-  })), invalid && errorSubject && /*#__PURE__*/React__default.createElement("div", {
+  }))), invalid && errorSubject && /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--form-requirement`,
     role: "alert",
     id: `${name}-id-error`

package/es/components/FileUploader/Filename.js

@@ -28,7 +28,8 @@ function Filename(_ref) {
       return /*#__PURE__*/React__default.createElement(Loading, {
         description: iconDescription,
         small: true,
-        withOverlay: false
+        withOverlay: false,
+        className: `${prefix}--file-loading`
       });
     case 'edit':
       return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, invalid && /*#__PURE__*/React__default.createElement(WarningFilled, {

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/Search/Search.js

@@ -125,7 +125,7 @@ const Search = /*#__PURE__*/React__default.forwardRef(function Search(_ref, forw
     className: `${prefix}--search-magnifier`,
     onClick: onExpand,
     onKeyDown: handleExpandButtonKeyDown,
-    tabIndex: onExpand && !isExpanded ? 1 : -1,
+    tabIndex: onExpand && !isExpanded ? 0 : -1,
     ref: expandButtonRef,
     "aria-expanded": onExpand && isExpanded ? true : undefined,
     "aria-controls": onExpand ? uniqueId : undefined

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 };

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

@@ -0,0 +1,271 @@
+/**
+ * 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 { type HTMLAttributes, type ReactNode, type KeyboardEvent, type ChangeEvent, type MouseEvent } from 'react';
+import PropTypes from 'prop-types';
+type DivAttrs = HTMLAttributes<HTMLDivElement>;
+export interface StructuredListWrapperProps extends DivAttrs {
+    /**
+     * Specify a label to be read by screen readers on the container node
+     */
+    'aria-label'?: string;
+    /**
+     * Provide the contents of your StructuredListWrapper
+     */
+    children?: ReactNode;
+    /**
+     * Specify an optional className to be applied to the container node
+     */
+    className?: string;
+    /**
+     * Specify if structured list is condensed, default is false
+     */
+    isCondensed?: boolean;
+    /**
+     * Specify if structured list is flush, default is false
+     */
+    isFlush?: boolean;
+    /**
+     * Specify whether your StructuredListWrapper should have selections
+     */
+    selection?: boolean;
+}
+export declare function StructuredListWrapper(props: StructuredListWrapperProps): JSX.Element;
+export declare namespace StructuredListWrapper {
+    var propTypes: {
+        /**
+         * Specify a label to be read by screen readers on the container node
+         */
+        "aria-label": PropTypes.Requireable<string>;
+        /**
+         * Deprecated, please use `aria-label` instead.
+         * Specify a label to be read by screen readers on the container note.
+         */
+        ariaLabel: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
+        /**
+         * Provide the contents of your StructuredListWrapper
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify an optional className to be applied to the container node
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify if structured list is condensed, default is false
+         */
+        isCondensed: PropTypes.Requireable<boolean>;
+        /**
+         * Specify if structured list is flush, not valid for selection variant, default is false
+         */
+        isFlush: PropTypes.Requireable<boolean>;
+        /**
+         * Specify whether your StructuredListWrapper should have selections
+         */
+        selection: PropTypes.Requireable<boolean>;
+    };
+}
+export interface StructuredListHeadProps extends DivAttrs {
+    /**
+     * Provide the contents of your StructuredListHead
+     */
+    children?: ReactNode;
+    /**
+     * Specify an optional className to be applied to the node
+     */
+    className?: string;
+}
+export declare function StructuredListHead(props: any): JSX.Element;
+export declare namespace StructuredListHead {
+    var propTypes: {
+        /**
+         * Provide the contents of your StructuredListHead
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify an optional className to be applied to the node
+         */
+        className: PropTypes.Requireable<string>;
+    };
+}
+export interface StructuredListBodyProps extends DivAttrs {
+    /**
+     * Provide the contents of your StructuredListBody
+     */
+    children?: ReactNode;
+    /**
+     * Specify an optional className to be applied to the container node
+     */
+    className?: string;
+    head?: boolean;
+    /**
+     * Provide a handler that is invoked on the key down event for the control
+     */
+    onKeyDown?(event: KeyboardEvent): void;
+}
+export declare function StructuredListBody(props: StructuredListBodyProps): JSX.Element;
+export declare namespace StructuredListBody {
+    var propTypes: {
+        /**
+         * Provide the contents of your StructuredListBody
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify an optional className to be applied to the container node
+         */
+        className: PropTypes.Requireable<string>;
+        head: PropTypes.Requireable<boolean>;
+        /**
+         * Provide a handler that is invoked on the key down event for the control
+         */
+        onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+}
+export interface StructuredListRowProps extends DivAttrs {
+    /**
+     * Provide the contents of your StructuredListRow
+     */
+    children?: ReactNode;
+    /**
+     * Specify an optional className to be applied to the container node
+     */
+    className?: string;
+    /**
+     * Specify whether your StructuredListRow should be used as a header row
+     */
+    head?: boolean;
+    /**
+     * Provide a handler that is invoked on the click
+     */
+    onClick?(event: MouseEvent): void;
+    /**
+     * Provide a handler that is invoked on the key down event for the control
+     */
+    onKeyDown?(event: KeyboardEvent): void;
+}
+export declare function StructuredListRow(props: StructuredListRowProps): JSX.Element;
+export declare namespace StructuredListRow {
+    var propTypes: {
+        /**
+         * Provide the contents of your StructuredListRow
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify an optional className to be applied to the container node
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify whether your StructuredListRow should be used as a header row
+         */
+        head: PropTypes.Requireable<boolean>;
+        /**
+         * Specify whether a `<label>` should be used
+         */
+        label: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
+        /**
+         * Provide a handler that is invoked on the click
+         */
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Provide a handler that is invoked on the key down event for the control,
+         */
+        onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+}
+export interface StructuredListInputProps extends DivAttrs {
+    /**
+     * Specify an optional className to be applied to the input
+     */
+    className?: string;
+    /**
+     * Specify a custom `id` for the input
+     */
+    id?: string;
+    /**
+     * Provide a `name` for the input
+     */
+    name?: string;
+    /**
+     * Provide an optional hook that is called each time the input is updated
+     */
+    onChange?(event: ChangeEvent<HTMLInputElement>): void;
+    /**
+     * Provide a `title` for the input
+     */
+    title?: string;
+}
+export declare function StructuredListInput(props: StructuredListInputProps): JSX.Element;
+export declare namespace StructuredListInput {
+    var propTypes: {
+        /**
+         * Specify an optional className to be applied to the input
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify whether the underlying input should be checked by default
+         */
+        defaultChecked: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
+        /**
+         * Specify a custom `id` for the input
+         */
+        id: PropTypes.Requireable<string>;
+        /**
+         * Provide a `name` for the input
+         */
+        name: PropTypes.Requireable<string>;
+        /**
+         * Provide an optional hook that is called each time the input is updated
+         */
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Provide a `title` for the input
+         */
+        title: PropTypes.Requireable<string>;
+        /**
+         * Specify the value of the input
+         */
+        value: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
+    };
+}
+export interface StructuredListCellProps extends DivAttrs {
+    /**
+     * Provide the contents of your StructuredListCell
+     */
+    children?: ReactNode;
+    /**
+     * Specify an optional className to be applied to the container node
+     */
+    className?: string;
+    /**
+     * Specify whether your StructuredListCell should be used as a header cell
+     */
+    head?: boolean;
+    /**
+     * Specify whether your StructuredListCell should have text wrapping
+     */
+    noWrap?: boolean;
+}
+export declare function StructuredListCell(props: StructuredListCellProps): JSX.Element;
+export declare namespace StructuredListCell {
+    var propTypes: {
+        /**
+         * Provide the contents of your StructuredListCell
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify an optional className to be applied to the container node
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify whether your StructuredListCell should be used as a header cell
+         */
+        head: PropTypes.Requireable<boolean>;
+        /**
+         * Specify whether your StructuredListCell should have text wrapping
+         */
+        noWrap: PropTypes.Requireable<boolean>;
+    };
+}
+export {};