@carbon/react 1.56.0 → 1.57.0

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/RadioTile/RadioTile.d.ts

@@ -50,6 +50,10 @@ export interface RadioTileProps {
      * Specify the value of the underlying `<input>`.
      */
     value: string | number;
+    /**
+     * `true` to specify if the input is required.
+     */
+    required?: boolean;
 }
 declare const RadioTile: React.ForwardRefExoticComponent<RadioTileProps & React.RefAttributes<HTMLInputElement>>;
 export default RadioTile;

package/es/components/RadioTile/RadioTile.js

@@ -33,6 +33,7 @@ const RadioTile = /*#__PURE__*/React__default.forwardRef(function RadioTile(_ref
     id,
     onChange = noopFn,
     tabIndex = 0,
+    required,
     ...rest
   } = _ref;
   const prefix = usePrefix();
@@ -74,7 +75,8 @@ const RadioTile = /*#__PURE__*/React__default.forwardRef(function RadioTile(_ref
     tabIndex: !disabled ? tabIndex : undefined,
     type: "radio",
     value: value,
-    ref: ref
+    ref: ref,
+    required: required
   }), /*#__PURE__*/React__default.createElement("label", _extends({}, rest, {
     htmlFor: inputId,
     className: className
@@ -120,6 +122,10 @@ RadioTile.propTypes = {
    * the underlying `<input>` changes.
    */
   onChange: PropTypes.func,
+  /**
+   * `true` to specify if the control is required.
+   */
+  required: PropTypes.bool,
   /**
    * Specify the tab index of the underlying `<input>`.
    */

package/es/components/Slider/Slider.js

@@ -511,7 +511,7 @@ class Slider extends PureComponent {
       if (clientX) {
         const leftOffset = this.state.isRtl ? (boundingRect?.right ?? 0) - clientX : clientX - (boundingRect?.left ?? 0);
         return leftOffset / width;
-      } else if (value && range) {
+      } else if (value !== null && value !== undefined && range) {
         // Prevent NaN calculation if the range is 0.
         return range === 0 ? 0 : (value - this.props.min) / range;
       }
@@ -1093,7 +1093,7 @@ class Slider extends PureComponent {
         hasTooltip: hideTextInput,
         className: lowerThumbWrapperClasses,
         label: `${value}`,
-        align: twoHandles ? 'top-right' : 'top'
+        align: "top"
       }, lowerThumbWrapperProps), /*#__PURE__*/React__default.createElement("div", {
         className: lowerThumbClasses,
         role: "slider",
@@ -1112,7 +1112,7 @@ class Slider extends PureComponent {
         hasTooltip: hideTextInput,
         className: upperThumbWrapperClasses,
         label: `${valueUpper}`,
-        align: "top-left"
+        align: "top"
       }, upperThumbWrapperProps), /*#__PURE__*/React__default.createElement("div", {
         className: upperThumbClasses,
         role: "slider",

package/es/components/StructuredList/StructuredList.js

@@ -17,7 +17,7 @@ import { RadioButtonChecked, RadioButton } from '@carbon/icons-react';
 import { useOutsideClick } from '../../internal/useOutsideClick.js';
 import { Text } from '../Text/Text.js';
 
-var _StructuredListCell, _RadioButtonChecked, _RadioButton;
+var _StructuredListCell;
 const GridSelectedRowStateContext = /*#__PURE__*/React__default.createContext(null);
 const GridSelectedRowDispatchContext = /*#__PURE__*/React__default.createContext(null);
 function StructuredListWrapper(props) {
@@ -192,7 +192,11 @@ function StructuredListRow(props) {
     onKeyDown: onKeyDown
   }), /*#__PURE__*/React__default.createElement(GridRowContext.Provider, {
     value: value
-  }, selection && /*#__PURE__*/React__default.createElement(StructuredListCell, null, selectedRow === id ? _RadioButtonChecked || (_RadioButtonChecked = /*#__PURE__*/React__default.createElement(RadioButtonChecked, null)) : _RadioButton || (_RadioButton = /*#__PURE__*/React__default.createElement(RadioButton, null))), children));
+  }, selection && /*#__PURE__*/React__default.createElement(StructuredListCell, null, selectedRow === id ? /*#__PURE__*/React__default.createElement(RadioButtonChecked, {
+    className: `${prefix}--structured-list__icon`
+  }) : /*#__PURE__*/React__default.createElement(RadioButton, {
+    className: `${prefix}--structured-list__icon`
+  })), children));
 }
 StructuredListRow.propTypes = {
   /**

package/es/components/TileGroup/TileGroup.d.ts

@@ -40,6 +40,10 @@ export interface TileGroupProps extends Omit<ReactAttr<HTMLFieldSetElement>, Exc
      * 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 TileGroup: {
     (props: any): import("react/jsx-runtime").JSX.Element;
@@ -73,6 +77,10 @@ declare const TileGroup: {
          * the group changes
          */
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * `true` to specify if input selection in group is required.
+         */
+        required: PropTypes.Requireable<boolean>;
         /**
          * Specify the value that is currently selected in the group
          */

package/es/components/TileGroup/TileGroup.js

@@ -21,7 +21,8 @@ const TileGroup = props => {
     legend,
     name,
     onChange = noopFn,
-    valueSelected
+    valueSelected,
+    required
   } = props;
   const prefix = usePrefix();
   const [selected, setSelected] = useState(valueSelected ?? defaultSelected);
@@ -45,6 +46,7 @@ const TileGroup = props => {
             ...otherProps
           } = child.props;
           return /*#__PURE__*/React__default.createElement(RadioTile, _extends({}, otherProps, {
+            required: required,
             name: name,
             key: value,
             value: value,
@@ -113,6 +115,10 @@ TileGroup.propTypes = {
    * the group changes
    */
   onChange: PropTypes.func,
+  /**
+   * `true` to specify if input selection in group is required.
+   */
+  required: PropTypes.bool,
   /**
    * Specify the value that is currently selected in the group
    */

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

package/es/internal/Selection.js

@@ -40,6 +40,9 @@ function useSelection(_ref2) {
   const [uncontrolledItems, setUncontrolledItems] = useState(initialSelectedItems);
   const isControlled = !!controlledItems;
   const [selectedItems, setSelectedItems] = useState(isControlled ? controlledItems : uncontrolledItems);
+  useEffect(() => {
+    setSelectedItems(isControlled ? controlledItems : uncontrolledItems);
+  }, [isControlled, controlledItems, uncontrolledItems]);
   useEffect(() => {
     callOnChangeHandler({
       isControlled,
@@ -74,7 +77,7 @@ function useSelection(_ref2) {
       isMounted: isMounted.current,
       onChangeHandlerControlled: savedOnChange.current,
       onChangeHandlerUncontrolled: setUncontrolledItems,
-      selectedItems: setSelectedItems([])
+      selectedItems: []
     });
   }, [disabled, isControlled]);
   useEffect(() => {

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

@@ -0,0 +1,45 @@
+/**
+ * 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, { ReactNode } from 'react';
+import ContainedListItem from './ContainedListItem';
+declare const variants: readonly ["on-page", "disclosed"];
+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.
+     */
+    action?: ReactNode;
+    /**
+     * A collection of ContainedListItems to be rendered in the ContainedList
+     */
+    children?: ReactNode;
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+    /**
+     * Specify whether the dividing lines in between list items should be inset.
+     */
+    isInset?: boolean;
+    /**
+     * The kind of ContainedList you want to display
+     */
+    kind?: Variants;
+    /**
+     * A label describing the contained list.
+     */
+    label: string | ReactNode;
+    /**
+     * Specify the size of the contained list.
+     */
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+}
+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 }; }
 
@@ -47,7 +48,7 @@ function renderChildren(children) {
   }
   return children;
 }
-function ContainedList(_ref) {
+const ContainedList = _ref => {
   let {
     action,
     children,
@@ -67,7 +68,20 @@ function ContainedList(_ref) {
     [`${prefix}--layout--size-${size}`]: size
   }, `${prefix}--contained-list--${kind}`, className);
   const filteredChildren = filterChildren(children);
-  const isActionSearch = ['Search', 'ExpandableSearch'].includes(action?.type?.displayName);
+  function isSearchAction(action) {
+    if (! /*#__PURE__*/React__default["default"].isValidElement(action)) {
+      return false;
+    }
+    const actionTypes = ['Search', 'ExpandableSearch'];
+    let actionType = '';
+    if (typeof action.type === 'string') {
+      actionType = action.type;
+    } else {
+      actionType = action.type.displayName || '';
+    }
+    return actionTypes.includes(actionType);
+  }
+  const isActionSearch = isSearchAction(action);
   const renderedChildren = renderChildren(children);
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     className: classes
@@ -96,7 +110,7 @@ function ContainedList(_ref) {
     role: "list",
     "aria-labelledby": labelId
   }, isActionSearch ? filteredChildren : renderedChildren));
-}
+};
 ContainedList.propTypes = {
   /**
    * A slot for a possible interactive element to render.
@@ -127,5 +141,6 @@ ContainedList.propTypes = {
    */
   size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg', 'xl'])
 };
+ContainedList.ContainedListItem = ContainedListItem["default"];
 
 exports["default"] = ContainedList;

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

@@ -0,0 +1,35 @@
+/**
+ * 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, { type ComponentType, type FunctionComponent, ReactNode } from 'react';
+interface ContainedListItemProps {
+    /**
+     * A slot for a possible interactive element to render within the item.
+     */
+    action?: ReactNode;
+    /**
+     * The content of this item. Must not contain any interactive elements. Use props.action to include those.
+     */
+    children?: ReactNode;
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+    /**
+     * Whether this item is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Provide an optional function to be called when the item is clicked.
+     */
+    onClick?: () => void;
+    /**
+     * Provide an optional icon to render in front of the item's content.
+     */
+    renderIcon?: ComponentType | FunctionComponent;
+}
+declare const ContainedListItem: React.FC<ContainedListItemProps>;
+export default ContainedListItem;

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

@@ -22,7 +22,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-function ContainedListItem(_ref) {
+const ContainedListItem = _ref => {
   let {
     action,
     children,
@@ -58,7 +58,7 @@ function ContainedListItem(_ref) {
     },
     className: `${prefix}--contained-list-item__action`
   }, action));
-}
+};
 ContainedListItem.propTypes = {
   /**
    * A slot for a possible interactive element to render within the item.
@@ -83,6 +83,7 @@ ContainedListItem.propTypes = {
   /**
    * Provide an optional icon to render in front of the item's content.
    */
+  // @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])
 };
 

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

@@ -108,7 +108,7 @@ const TableToolbarSearch = _ref => {
     disabled: disabled,
     className: searchClasses,
     value: value,
-    id: typeof id !== 'undefined' ? id : uniqueId.toString(),
+    id: typeof id !== 'undefined' ? id : `table-toolbar-search-${uniqueId.toString()}`,
     labelText: labelText || t('carbon.table.toolbar.search.label'),
     placeholder: placeholder || t('carbon.table.toolbar.search.placeholder'),
     onChange: onChange,

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