@carbon/react 1.56.0 → 1.57.0-rc.0

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

@@ -179,7 +179,6 @@ 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';
@@ -204,6 +203,7 @@ 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/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/ContainedList/ContainedList.d.ts

@@ -0,0 +1,41 @@
+/**
+ * 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';
+declare const variants: readonly ["on-page", "disclosed"];
+type Variants = (typeof variants)[number];
+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: React.FC<ContainedListProps>;
+export default ContainedList;

package/lib/components/ContainedList/ContainedList.js

@@ -47,7 +47,7 @@ function renderChildren(children) {
   }
   return children;
 }
-function ContainedList(_ref) {
+const ContainedList = _ref => {
   let {
     action,
     children,
@@ -67,7 +67,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 +109,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 +140,6 @@ ContainedList.propTypes = {
    */
   size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg', 'xl'])
 };
+var ContainedList$1 = ContainedList;
 
-exports["default"] = ContainedList;
+exports["default"] = ContainedList$1;

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,7 +83,9 @@ 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])
 };
+var ContainedListItem$1 = ContainedListItem;
 
-exports["default"] = ContainedListItem;
+exports["default"] = ContainedListItem$1;

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

@@ -0,0 +1,300 @@
+/**
+ * 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';
+import React from 'react';
+/**
+ * @param {Element} menuBody The menu body with the menu arrow.
+ * @param {string} direction The floating menu direction.
+ * @returns {FloatingMenu~offset} The adjustment of the floating menu position, upon the position of the menu arrow.
+ * @private
+ */
+export declare const getMenuOffset: (menuBody: any, direction: any, trigger: any, flip: any) => {
+    left: number;
+    top: number;
+} | undefined;
+interface Offset {
+    top: number;
+    left: number;
+}
+interface OverflowMenuProps {
+    /**
+     * Specify a label to be read by screen readers on the container node
+     */
+    ['aria-label']: string;
+    /**
+     * Deprecated, please use `aria-label` instead.
+     * Specify a label to be read by screen readers on the container note.
+     * @deprecated
+     * */
+    ariaLabel: string;
+    /**
+     * The child nodes.
+     * */
+    children: React.ReactNode;
+    /**
+     *  The CSS class names.
+     *  */
+    className?: string;
+    /**
+     * The menu direction.
+     */
+    direction?: string;
+    /**
+     * `true` if the menu alignment should be flipped.
+     */
+    flipped?: boolean;
+    /**
+     * Enable or disable focus trap behavior
+     */
+    focusTrap?: boolean;
+    /**
+     * The CSS class for the icon.
+     */
+    iconClass?: string;
+    /**
+     * The element ID.
+     */
+    id?: string;
+    /**
+     * The icon description.
+     */
+    iconDescription?: string;
+    /**
+     * `true` to use the light version. For use on $ui-01 backgrounds only.
+     * Don't use this to make OverflowMenu background color same as container background color.
+     */
+    light?: boolean;
+    /**
+     * The adjustment in position applied to the floating menu.
+     */
+    menuOffset?: Offset | (() => void);
+    /**
+     * The adjustment in position applied to the floating menu.
+     */
+    menuOffsetFlip?: Offset | (() => void);
+    /**
+     * The class to apply to the menu options
+     */
+    menuOptionsClass?: string;
+    /**
+     * The event handler for the `click` event.
+     */
+    onClick?: (evt?: any) => void;
+    /**
+     * Function called when menu is closed
+     */
+    onClose?: () => void;
+    /**
+     * Function called when menu is opened
+     */
+    onOpen?: () => void;
+    /**
+     * `true` if the menu should be open.
+     */
+    open?: boolean;
+    /**
+     * Function called to override icon rendering.
+     */
+    renderIcon?: React.ElementType;
+    /**
+     * Specify a CSS selector that matches the DOM element that should
+     * be focused when the OverflowMenu opens
+     */
+    selectorPrimaryFocus?: string;
+    /**
+     * Specify the size of the OverflowMenu. Currently supports either `sm`, 'md' (default) or 'lg` as an option.
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * The ref to the HTML element that should receive focus when the OverflowMenu opens
+     */
+    innerRef?: React.Ref<any>;
+}
+interface OverflowMenuState {
+    open: boolean;
+    prevOpen?: boolean;
+    hasMountedTrigger: boolean;
+    click: boolean;
+}
+interface ReleaseHandle {
+    release: () => null;
+}
+declare class OverflowMenu extends React.Component<OverflowMenuProps, OverflowMenuState> {
+    state: OverflowMenuState;
+    instanceId: number;
+    static 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;
+        /**
+         * The child nodes.
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * The CSS class names.
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * The menu direction.
+         */
+        direction: PropTypes.Requireable<string>;
+        /**
+         * `true` if the menu alignment should be flipped.
+         */
+        flipped: PropTypes.Requireable<boolean>;
+        /**
+         * Enable or disable focus trap behavior
+         */
+        focusTrap: PropTypes.Requireable<boolean>;
+        /**
+         * The CSS class for the icon.
+         */
+        iconClass: PropTypes.Requireable<string>;
+        /**
+         * The icon description.
+         */
+        iconDescription: PropTypes.Requireable<string>;
+        /**
+         * The element ID.
+         */
+        id: PropTypes.Requireable<string>;
+        /**
+         * `true` to use the light version. For use on $ui-01 backgrounds only.
+         * Don't use this to make OverflowMenu background color same as container background color.
+         */
+        light: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
+        /**
+         * The adjustment in position applied to the floating menu.
+         */
+        menuOffset: PropTypes.Requireable<NonNullable<((...args: any[]) => any) | PropTypes.InferProps<{
+            top: PropTypes.Requireable<number>;
+            left: PropTypes.Requireable<number>;
+        }> | null | undefined>>;
+        /**
+         * The adjustment in position applied to the floating menu.
+         */
+        menuOffsetFlip: PropTypes.Requireable<NonNullable<((...args: any[]) => any) | PropTypes.InferProps<{
+            top: PropTypes.Requireable<number>;
+            left: PropTypes.Requireable<number>;
+        }> | null | undefined>>;
+        /**
+         * The class to apply to the menu options
+         */
+        menuOptionsClass: PropTypes.Requireable<string>;
+        /**
+         * The event handler for the `click` event.
+         */
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Function called when menu is closed
+         */
+        onClose: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * The event handler for the `focus` event.
+         */
+        onFocus: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * The event handler for the `keydown` event.
+         */
+        onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Function called when menu is opened
+         */
+        onOpen: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * `true` if the menu should be open.
+         */
+        open: PropTypes.Requireable<boolean>;
+        /**
+         * Function called to override icon rendering.
+         */
+        renderIcon: PropTypes.Requireable<object>;
+        /**
+         * Specify a CSS selector that matches the DOM element that should
+         * be focused when the OverflowMenu opens
+         */
+        selectorPrimaryFocus: PropTypes.Requireable<string>;
+        /**
+         * Specify the size of the OverflowMenu. Currently supports either `sm`, 'md' (default) or 'lg` as an option.
+         */
+        size: PropTypes.Requireable<string>;
+    };
+    static contextType: React.Context<string>;
+    /**
+     * The handle of `onfocusin` or `focus` event handler.
+     * @private
+     */
+    _hFocusIn: ReleaseHandle | null;
+    /**
+     * The timeout handle for handling `blur` event.
+     * @private
+     */
+    _hBlurTimeout: any;
+    /**
+     * The element ref of the tooltip's trigger button.
+     * @type {React.RefObject<Element>}
+     * @private
+     */
+    _triggerRef: React.RefObject<unknown>;
+    componentDidUpdate(_: any, prevState: any): void;
+    componentDidMount(): void;
+    static getDerivedStateFromProps({ open }: {
+        open: any;
+    }, state: any): {
+        open: any;
+        prevOpen: any;
+    } | null;
+    componentWillUnmount(): void;
+    handleClick: (evt: any) => void;
+    closeMenuAndFocus: () => void;
+    closeMenuOnEscape: () => void;
+    handleKeyPress: (evt: any) => void;
+    handleClickOutside: (evt: any) => void;
+    closeMenu: (onCloseMenu?: any) => void;
+    focusMenuEl: () => void;
+    /**
+     * Focuses the next enabled overflow menu item given the currently focused
+     * item index and direction to move
+     * @param {object} params
+     * @param {number} params.currentIndex - the index of the currently focused
+     * overflow menu item in the list of overflow menu items
+     * @param {number} params.direction - number denoting the direction to move
+     * focus (1 for forwards, -1 for backwards)
+     */
+    handleOverflowMenuItemFocus: ({ currentIndex, direction }: {
+        currentIndex: any;
+        direction: any;
+    }) => void;
+    /**
+     * Handles the floating menu being unmounted or non-floating menu being
+     * mounted or unmounted.
+     * @param {Element} menuBody The DOM element of the menu body.
+     * @private
+     */
+    _menuBody: HTMLElement | null;
+    _bindMenuBody: (menuBody: HTMLElement | null) => void;
+    /**
+     * Handles the floating menu being placed.
+     * @param {Element} menuBody The DOM element of the menu body.
+     * @private
+     */
+    _handlePlace: (menuBody: any) => void;
+    /**
+     * @returns {Element} The DOM element where the floating menu is placed in.
+     */
+    _getTarget: () => Element;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export { OverflowMenu };
+declare const _default: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<unknown>>;
+export default _default;