@carbon/react 1.57.0-rc.0 → 1.57.0

package/es/components/MultiSelect/MultiSelect.js

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

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

@@ -0,0 +1,62 @@
+/**
+ * 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 PropTypes from 'prop-types';
+export declare const sortingPropTypes: {
+    /**
+     * Provide a compare function that is used to determine the ordering of
+     * options. `compareItems` has the following function signature:
+     *
+     * compareFunction :
+     *  (itemA: string, itemB: string, { locale: string }) => number
+     */
+    compareItems: PropTypes.Requireable<(...args: any[]) => any>;
+    /**
+     * 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.
+     *
+     * `sortItems` has the following signature:
+     *
+     * sortItems :
+     *   (items: Array<Item>, {
+     *     selectedItems: Array<Item>,
+     *     itemToString: Item => string,
+     *     compareItems: (itemA: string, itemB: string, {
+     *       locale: string
+     *     }) => number,
+     *     locale: string,
+     *   }) => Array<Item>
+     */
+    sortItems: PropTypes.Requireable<(...args: any[]) => any>;
+};
+export interface ItemBase {
+    disabled?: boolean;
+}
+export interface SortingPropTypes<Item extends ItemBase> {
+    /**
+     * Provide a compare function that is used
+     * to determine the ordering of options.
+     */
+    compareItems(itemA: string, itemB: string, ctx: {
+        locale: string;
+    }): 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.
+     */
+    sortItems(items: Item[], state: {
+        selectedItems: Item[];
+        itemToString(item: Item): string;
+        compareItems(itemA: string, itemB: string, ctx: {
+            locale: string;
+        }): number;
+        locale: string;
+    }): Item[];
+}

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

@@ -0,0 +1,10 @@
+/**
+ * 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 MultiSelect from './MultiSelect';
+import { default as FilterableMultiSelect } from './FilterableMultiSelect';
+export { FilterableMultiSelect, MultiSelect };
+export default MultiSelect;

package/es/components/MultiSelect/index.js

@@ -12,6 +12,8 @@ import FilterableMultiSelect from './FilterableMultiSelect.js';
 export { default as FilterableMultiSelect } from './FilterableMultiSelect.js';
 
 FilterableMultiSelect.displayName = 'MultiSelect.Filterable';
+// @ts-expect-error: The attribute indeed does not exist on the object,
+// but since it is already deprecated, we do not have to fix it.
 MultiSelect.Filterable = FilterableMultiSelect;
 if (process.env.NODE_ENV !== "production") {
   deprecateFieldOnObject(MultiSelect, 'Filterable', FilterableMultiSelect);

package/es/components/Pagination/Pagination.js

@@ -68,10 +68,10 @@ const Pagination = /*#__PURE__*/React__default.forwardRef(function Pagination(_r
     pageSize: controlledPageSize,
     pageSizeInputDisabled,
     pageSizes: controlledPageSizes,
-    pageText = (page, pagesUnknown) => `page ${pagesUnknown ? '' : page}`,
+    pageText = page => `page ${page}`,
     pagesUnknown = false,
     size = 'md',
-    totalItems = 1,
+    totalItems,
     ...rest
   } = _ref;
   const prefix = usePrefix();
@@ -93,7 +93,7 @@ const Pagination = /*#__PURE__*/React__default.forwardRef(function Pagination(_r
     [`${prefix}--pagination--${size}`]: size,
     [customClassName]: !!customClassName
   });
-  const totalPages = Math.max(Math.ceil(totalItems / pageSize), 1);
+  const totalPages = totalItems ? Math.max(Math.ceil(totalItems / pageSize), 1) : NaN;
   const backButtonDisabled = disabled || page === 1;
   const backButtonClasses = cx({
     [`${prefix}--pagination__button`]: true,
@@ -145,7 +145,7 @@ const Pagination = /*#__PURE__*/React__default.forwardRef(function Pagination(_r
   }
   function handlePageInputChange(event) {
     const page = Number(event.target.value);
-    if (page > 0 && page <= Math.max(Math.ceil(totalItems / pageSize), 1)) {
+    if (page > 0 && totalItems && page <= Math.max(Math.ceil(totalItems / pageSize), 1)) {
       setPage(page);
       if (onChange) {
         onChange({
@@ -218,11 +218,11 @@ const Pagination = /*#__PURE__*/React__default.forwardRef(function Pagination(_r
     text: String(sizeObj.text)
   }))), /*#__PURE__*/React__default.createElement("span", {
     className: `${prefix}--pagination__text ${prefix}--pagination__items-count`
-  }, pagesUnknown ? itemText(pageSize * (page - 1) + 1, page * pageSize) : itemRangeText(Math.min(pageSize * (page - 1) + 1, totalItems), Math.min(page * pageSize, totalItems), totalItems))), /*#__PURE__*/React__default.createElement("div", {
+  }, pagesUnknown || !totalItems ? itemText(pageSize * (page - 1) + 1, page * pageSize) : itemRangeText(Math.min(pageSize * (page - 1) + 1, totalItems), Math.min(page * pageSize, totalItems), totalItems))), /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--pagination__right`
   }, pagesUnknown ? /*#__PURE__*/React__default.createElement("span", {
-    className: `${prefix}--pagination__text ${prefix}--pagination__page-text`
-  }, pagesUnknown ? pageText(page, pagesUnknown) : pageRangeText(page, totalPages)) : null, /*#__PURE__*/React__default.createElement(Select, {
+    className: `${prefix}--pagination__text ${prefix}--pagination__page-text ${prefix}--pagination__unknown-pages-text`
+  }, pageText(page)) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Select, {
     id: `${prefix}-pagination-select-${inputId}-right`,
     className: `${prefix}--select__page-number`,
     labelText: `Page number, of ${totalPages} pages`,
@@ -231,9 +231,9 @@ const Pagination = /*#__PURE__*/React__default.forwardRef(function Pagination(_r
     onChange: handlePageInputChange,
     value: page,
     disabled: pageInputDisabled || disabled
-  }, selectItems), pagesUnknown ? null : /*#__PURE__*/React__default.createElement("span", {
+  }, selectItems), /*#__PURE__*/React__default.createElement("span", {
     className: `${prefix}--pagination__text`
-  }, pagesUnknown ? pageText(page, pagesUnknown) : pageRangeText(page, totalPages)), /*#__PURE__*/React__default.createElement("div", {
+  }, pageRangeText(page, totalPages))), /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--pagination__control-buttons`
   }, /*#__PURE__*/React__default.createElement(IconButton, {
     align: "top",

package/es/components/RadioButton/RadioButton.d.ts

@@ -63,6 +63,10 @@ export interface RadioButtonProps extends Omit<React.InputHTMLAttributes<HTMLInp
      * Specify the value of the `<RadioButton>`
      */
     value?: string | number;
+    /**
+     * `true` to specify if the input is required.
+     */
+    required?: boolean;
 }
 declare const RadioButton: React.ForwardRefExoticComponent<RadioButtonProps & React.RefAttributes<unknown>>;
 export default RadioButton;

package/es/components/RadioButton/RadioButton.js

@@ -27,6 +27,7 @@ const RadioButton = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     onChange = () => {},
     value = '',
     slug,
+    required,
     ...rest
   } = props;
   const prefix = usePrefix();
@@ -60,7 +61,8 @@ const RadioButton = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     ref: mergeRefs(inputRef, ref),
     disabled: disabled,
     value: value,
-    name: name
+    name: name,
+    required: required
   })), /*#__PURE__*/React__default.createElement("label", {
     htmlFor: uniqueId,
     className: `${prefix}--radio-button__label`
@@ -119,6 +121,10 @@ RadioButton.propTypes = {
    * Provide a handler that is invoked when a user clicks on the control
    */
   onClick: PropTypes.func,
+  /**
+   * `true` to specify if the control is required.
+   */
+  required: PropTypes.bool,
   /**
    * **Experimental**: Provide a `Slug` component to be rendered inside the `RadioButton` component
    */

package/es/components/RadioButtonGroup/RadioButtonGroup.d.ts

@@ -79,6 +79,10 @@ export interface RadioButtonGroupProps extends Omit<React.InputHTMLAttributes<HT
      * Specify the value that is currently selected in the group
      */
     valueSelected?: string | number;
+    /**
+     * `true` to specify if input selection in group is required.
+     */
+    required?: boolean;
 }
 declare const RadioButtonGroup: React.ForwardRefExoticComponent<RadioButtonGroupProps & React.RefAttributes<unknown>>;
 export default RadioButtonGroup;

package/es/components/RadioButtonGroup/RadioButtonGroup.js

@@ -35,6 +35,7 @@ const RadioButtonGroup = /*#__PURE__*/React__default.forwardRef((props, ref) =>
     warn = false,
     warnText,
     slug,
+    required,
     ...rest
   } = props;
   const prefix = usePrefix();
@@ -62,7 +63,8 @@ const RadioButtonGroup = /*#__PURE__*/React__default.forwardRef((props, ref) =>
         key: value,
         value: value,
         onChange: handleOnChange,
-        checked: value === selected
+        checked: value === selected,
+        required: required
       };
       if (!selected && radioButton?.props.checked) {
         newProps.checked = true;
@@ -187,6 +189,10 @@ RadioButtonGroup.propTypes = {
    * Whether the RadioButtonGroup should be read-only
    */
   readOnly: PropTypes.bool,
+  /**
+   * `true` to specify if radio selection in group is required.
+   */
+  required: PropTypes.bool,
   /**
    * **Experimental**: Provide a `Slug` component to be rendered inside the `RadioButtonGroup` component
    */

package/es/components/TimePicker/TimePicker.js

@@ -113,7 +113,7 @@ const TimePicker = /*#__PURE__*/React__default.forwardRef(function TimePicker(_r
       if (item) {
         return /*#__PURE__*/React__default.cloneElement(item, {
           ...item.props,
-          disabled: disabled,
+          disabled: item.props.disabled ?? disabled,
           readOnly: readOnly,
           ...readOnlyEventHandlers
         });

package/es/index.js

@@ -26,6 +26,7 @@ export { ComboButton } from './components/ComboButton/index.js';
 export { default as ComposedModal, ModalBody } from './components/ComposedModal/ComposedModal.js';
 export { ModalHeader } from './components/ComposedModal/ModalHeader.js';
 export { ModalFooter } from './components/ComposedModal/ModalFooter.js';
+import './components/ContainedList/index.js';
 export { default as ContentSwitcher } from './components/ContentSwitcher/index.js';
 export { default as Copy } from './components/Copy/Copy.js';
 export { default as CopyButton } from './components/CopyButton/CopyButton.js';
@@ -69,6 +70,7 @@ export { MenuItem, MenuItemDivider, MenuItemGroup, MenuItemRadioGroup, MenuItemS
 export { MenuButton } from './components/MenuButton/index.js';
 export { default as Modal } from './components/Modal/Modal.js';
 export { default as ModalWrapper } from './components/ModalWrapper/ModalWrapper.js';
+import './components/MultiSelect/index.js';
 export { ActionableNotification, InlineNotification, NotificationActionButton, NotificationButton, StaticNotification, ToastNotification } from './components/Notification/Notification.js';
 export { default as NumberInputSkeleton } from './components/NumberInput/NumberInput.Skeleton.js';
 export { NumberInput } from './components/NumberInput/NumberInput.js';
@@ -179,6 +181,7 @@ export { default as unstable_PageSelector } from './components/Pagination/experi
 export { default as unstable_Pagination } from './components/Pagination/experimental/Pagination.js';
 export { default as CheckboxGroup } from './components/CheckboxGroup/CheckboxGroup.js';
 export { default as ContainedListItem } from './components/ContainedList/ContainedListItem/ContainedListItem.js';
+export { default as ContainedList } from './components/ContainedList/ContainedList.js';
 export { default as useContextMenu } from './components/ContextMenu/useContextMenu.js';
 export { default as SliderSkeleton } from './components/Slider/Slider.Skeleton.js';
 export { default as TextInputSkeleton } from './components/TextInput/TextInput.Skeleton.js';
@@ -203,7 +206,6 @@ export { default as unstable__ChatButton } from './components/ChatButton/ChatBut
 export { default as unstable__ChatButtonSkeleton } from './components/ChatButton/ChatButton.Skeleton.js';
 export { Text as unstable_Text } from './components/Text/Text.js';
 export { TextDirection as unstable_TextDirection } from './components/Text/TextDirection.js';
-export { default as ContainedList } from './components/ContainedList/ContainedList.js';
 export { default as DataTable } from './components/DataTable/DataTable.js';
 export { Table } from './components/DataTable/Table.js';
 export { default as TableActionList } from './components/DataTable/TableActionList.js';

package/lib/components/ComboBox/ComboBox.js

@@ -450,6 +450,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
       onClearSelection: handleSelectionClear,
       selectionCount: 0
     }), /*#__PURE__*/React__default["default"].createElement(ListBoxTrigger["default"], _rollupPluginBabelHelpers["extends"]({}, buttonProps, {
+      // @ts-expect-error
       isOpen: isOpen,
       translateWithId: translateWithId
     }))), normalizedSlug, /*#__PURE__*/React__default["default"].createElement(index["default"].Menu, getMenuProps({

package/lib/components/ContainedList/ContainedList.d.ts

@@ -5,9 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { ReactNode } from 'react';
+import ContainedListItem from './ContainedListItem';
 declare const variants: readonly ["on-page", "disclosed"];
-type Variants = (typeof variants)[number];
-interface ContainedListProps {
+interface ContainedListType extends React.FC<ContainedListProps> {
+    ContainedListItem: typeof ContainedListItem;
+}
+export type Variants = (typeof variants)[number];
+export interface ContainedListProps {
     /**
      * A slot for a possible interactive element to render.
      */
@@ -37,5 +41,5 @@ interface ContainedListProps {
      */
     size?: 'sm' | 'md' | 'lg' | 'xl';
 }
-declare const ContainedList: React.FC<ContainedListProps>;
+declare const ContainedList: ContainedListType;
 export default ContainedList;

package/lib/components/ContainedList/ContainedList.js

@@ -16,6 +16,7 @@ var cx = require('classnames');
 var index = require('../Layout/index.js');
 var useId = require('../../internal/useId.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var ContainedListItem = require('./ContainedListItem/ContainedListItem.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -140,6 +141,6 @@ ContainedList.propTypes = {
    */
   size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg', 'xl'])
 };
-var ContainedList$1 = ContainedList;
+ContainedList.ContainedListItem = ContainedListItem["default"];
 
-exports["default"] = ContainedList$1;
+exports["default"] = ContainedList;

package/lib/components/ContainedList/ContainedListItem/ContainedListItem.js

@@ -86,6 +86,5 @@ ContainedListItem.propTypes = {
   // @ts-expect-error: PropTypes are not expressive enough to cover this case
   renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object])
 };
-var ContainedListItem$1 = ContainedListItem;
 
-exports["default"] = ContainedListItem$1;
+exports["default"] = ContainedListItem;

package/lib/components/ContainedList/ContainedListItem/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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 ContainedListItem from './ContainedListItem';
+export default ContainedListItem;
+export { ContainedListItem };

package/lib/components/ContainedList/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 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 ContainedList from './ContainedList';
+import ContainedListItem from './ContainedListItem';
+export { ContainedListItem };
+export default ContainedList;
+export { ContainedList };

package/lib/components/ContainedList/index.js

@@ -0,0 +1,19 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var ContainedList = require('./ContainedList.js');
+var ContainedListItem = require('./ContainedListItem/ContainedListItem.js');
+
+ContainedList["default"].ContainedListItem = ContainedListItem["default"];
+
+exports.ContainedList = ContainedList["default"];
+exports["default"] = ContainedList["default"];
+exports.ContainedListItem = ContainedListItem["default"];

package/lib/components/DataTable/stories/examples/TableToolbarFilter.d.ts

@@ -0,0 +1,51 @@
+import { ChangeEvent } from 'react';
+import PropTypes from 'prop-types';
+export type PopoverAlignment = 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-end' | 'left-start' | 'right-end' | 'right-start';
+interface TableToolbarFilterProps {
+    /**
+     * Specify how the popover should align with the trigger element
+     */
+    align?: PopoverAlignment;
+    /**
+     * Provide an optional class name for the toolbar filter
+     */
+    className?: string;
+    /**
+     * Provide an optional hook that is called each time the input is updated
+     */
+    onChange?: (event: '' | ChangeEvent<HTMLInputElement>, value?: string) => void;
+    /**
+     * Provide an function that is called when the apply button is clicked
+     */
+    onApplyFilter?: (selectedCheckboxes: Array<string>) => void;
+    /**
+     * Provide an function that is called when the reset button is clicked
+     */
+    onResetFilter?: () => void;
+}
+declare const TableToolbarFilter: {
+    ({ align, onApplyFilter, onResetFilter, className, ...rest }: TableToolbarFilterProps): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
+        /**
+         * Specify how the popover should align with the trigger element
+         */
+        align: PropTypes.Requireable<string>;
+        /**
+         * Provide an optional class name for the search container
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Provide an function that is called when the apply button is clicked
+         */
+        onApplyFilter: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Provide an optional hook that is called each time the input is updated
+         */
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Provide an function that is called when the reset button is clicked
+         */
+        onResetFilter: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+};
+export default TableToolbarFilter;

package/lib/components/DatePicker/DatePicker.d.ts

@@ -7,6 +7,7 @@
 import { ReactNodeLike } from 'prop-types';
 import React from 'react';
 import flatpickr from 'flatpickr';
+import { DateLimit, DateOption } from 'flatpickr/dist/types/options';
 export type DatePickerTypes = 'simple' | 'single' | 'range';
 export type CalRef = {
     inline: boolean;
@@ -57,11 +58,11 @@ interface DatePickerProps {
     /**
      * The flatpickr `disable` option that allows a user to disable certain dates.
      */
-    disable?: string[];
+    disable?: DateLimit<DateOption>[];
     /**
      * The flatpickr `enable` option that allows a user to enable certain dates.
      */
-    enable?: string[];
+    enable?: DateLimit<DateOption>[];
     /**
      * The flatpickr `inline` option.
      */
@@ -85,11 +86,11 @@ interface DatePickerProps {
     /**
      * The maximum date that a user can pick to.
      */
-    maxDate?: string | number;
+    maxDate?: DateOption;
     /**
      * The minimum date that a user can start picking from.
      */
-    minDate?: string | number;
+    minDate?: DateOption;
     /**
      * The `change` event handler.
      */

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

@@ -35,14 +35,13 @@ var carbonFlatpickrRangePlugin = (config => {
         // where Flatpickr's range plugin takes care of fixing the first `<input>`
         if (!triggerChange) {
           const {
-            _input: inputFrom
+            _input: inputDates
           } = fp;
-          const {
-            input: inputTo
-          } = config;
-          [inputFrom, inputTo].forEach((input, i) => {
+          const inputDatesArray = inputDates.value.split(' ');
+          fp.close();
+          [inputDatesArray[0], inputDatesArray[2]].forEach((input, i) => {
             if (input) {
-              input.value = !dates[i] ? '' : fp.formatDate(new Date(dates[i]), fp.config.dateFormat);
+              input = !dates[i] ? '' : fp.formatDate(new Date(dates[i]), fp.config.dateFormat);
             }
           });
         }

package/lib/components/Dialog/index.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Copyright IBM Corp. 2014, 2024
+ *
+ * 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 'wicg-inert';
+import React from 'react';
+import { ReactAttr } from '../../types/common';
+export interface DialogProps extends ReactAttr<HTMLDialogElement> {
+    /**
+     * Provide the contents of the Dialog
+     */
+    children?: React.ReactNode;
+    /**
+     * Specifies whether the dialog is modal or non-modal
+     */
+    modal?: boolean;
+    /**
+     * Specify a handler for closing Dialog.
+     * The handler should care of closing Dialog, e.g. changing `open` prop.
+     */
+    onRequestClose?: React.ReactEventHandler<HTMLElement>;
+    /**
+     * Specify whether the Dialog is currently open
+     */
+    open?: boolean;
+}
+declare const Dialog: React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<unknown>>;
+export { Dialog };
+export default Dialog;

package/lib/components/ListBox/next/ListBoxTrigger.js

@@ -37,7 +37,7 @@ const defaultTranslateWithId = id => defaultTranslations[id];
  * `ListBoxTrigger` is used to orient the icon up or down depending on the
  * state of the menu for a given `ListBox`
  */
-const ListBoxTrigger = _ref => {
+const ListBoxTrigger = /*#__PURE__*/React__default["default"].forwardRef(function ListBoxTrigger(_ref, ref) {
   let {
     isOpen,
     translateWithId: t = defaultTranslateWithId,
@@ -54,9 +54,10 @@ const ListBoxTrigger = _ref => {
     title: description,
     className: className,
     type: "button",
-    tabIndex: "-1"
+    tabIndex: "-1",
+    ref: ref
   }), _ChevronDown || (_ChevronDown = /*#__PURE__*/React__default["default"].createElement(iconsReact.ChevronDown, null)));
-};
+});
 ListBoxTrigger.propTypes = {
   /**
    * Specify whether the menu is currently open, which will influence the