@carbon/react 1.57.0-rc.0 → 1.58.0-rc.0

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

@@ -4,14 +4,13 @@
  * 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 { ReactNodeLike } from 'prop-types';
-import React, { type MouseEventHandler } from 'react';
+import React, { type MouseEventHandler, ReactNode } from 'react';
 import { sortStates } from './state/sorting';
 import { ReactAttr } from '../../types/common';
 import { DataTableSortState } from './state/sortStates';
 export type TableHeaderTranslationKey = 'carbon.table.header.icon.description';
 export interface TableHeaderTranslationArgs {
-    header: React.ReactNode;
+    header: ReactNode;
     isSortHeader?: boolean;
     sortDirection?: DataTableSortState;
     sortStates: typeof sortStates;
@@ -20,7 +19,7 @@ interface TableHeaderProps extends ReactAttr<HTMLTableCellElement & HTMLButtonEl
     /**
      * Pass in children that will be embedded in the table header label
      */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /**
      * Specify an optional className to be applied to the container node
      */
@@ -56,7 +55,7 @@ interface TableHeaderProps extends ReactAttr<HTMLTableCellElement & HTMLButtonEl
     /**
      * **Experimental**: Provide a `Slug` component to be rendered inside the `TableSlugRow` component
      */
-    slug?: ReactNodeLike;
+    slug?: ReactNode;
     /**
      * Specify which direction we are currently sorting by, should be one of DESC,
      * NONE, or ASC.

package/lib/components/DataTable/TableSlugRow.d.ts

@@ -4,7 +4,8 @@
  * 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, { ReactNodeLike } from 'prop-types';
+import PropTypes from 'prop-types';
+import { ReactNode } from 'react';
 export interface TableSlugRowProps {
     /**
      * The CSS class names of the cell that wraps the underlying input control
@@ -13,7 +14,7 @@ export interface TableSlugRowProps {
     /**
      * Provide a `Slug` component to be rendered inside the `TableSlugRow` component
      */
-    slug?: ReactNodeLike;
+    slug?: ReactNode;
 }
 declare const TableSlugRow: {
     ({ className, slug }: TableSlugRowProps): import("react/jsx-runtime").JSX.Element;

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

@@ -4,9 +4,9 @@
  * 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 { ReactNodeLike } from 'prop-types';
-import React from 'react';
+import React, { ReactNode } 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;
@@ -33,7 +33,7 @@ interface DatePickerProps {
     /**
      * The child nodes.
      */
-    children: React.ReactNode | object;
+    children: ReactNode | object;
     /**
      * The CSS class names.
      */
@@ -57,11 +57,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.
      */
@@ -73,7 +73,7 @@ interface DatePickerProps {
     /**
      * Provide the text that is displayed when the control is in error state (Fluid Only)
      */
-    invalidText?: ReactNodeLike;
+    invalidText?: ReactNode;
     /**
      * `true` to use the light version.
      */
@@ -85,11 +85,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.
      */
@@ -128,7 +128,7 @@ interface DatePickerProps {
     /**
      * Provide the text that is displayed when the control is in warning state (Fluid only)
      */
-    warnText?: ReactNodeLike;
+    warnText?: ReactNode;
 }
 declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLDivElement>>;
 export default DatePicker;

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

@@ -6,7 +6,6 @@
  */
 import React, { ReactNode } from 'react';
 import { UseSelectProps } from 'downshift';
-import { ReactNodeLike } from 'prop-types';
 import { type ListBoxMenuIconTranslationKey, ListBoxSize, ListBoxType } from '../ListBox';
 import { ReactAttr } from '../../types/common';
 type ExcludedAttributes = 'id' | 'onChange';
@@ -40,7 +39,7 @@ export interface DropdownProps<ItemType> extends Omit<ReactAttr<HTMLDivElement>,
      * Provide helper text that is used alongside the control label for
      * additional help
      */
-    helperText?: React.ReactNode;
+    helperText?: ReactNode;
     /**
      * Specify whether the title text should be hidden or not
      */
@@ -61,7 +60,7 @@ export interface DropdownProps<ItemType> extends Omit<ReactAttr<HTMLDivElement>,
     /**
      * Message which is displayed if the value is invalid.
      */
-    invalidText?: React.ReactNode;
+    invalidText?: ReactNode;
     /**
      * Function to render items as custom components instead of strings.
      * Defaults to null and is overridden by a getter
@@ -114,12 +113,12 @@ export interface DropdownProps<ItemType> extends Omit<ReactAttr<HTMLDivElement>,
     /**
      * **Experimental**: Provide a `Slug` component to be rendered inside the `Dropdown` component
      */
-    slug?: ReactNodeLike;
+    slug?: ReactNode;
     /**
      * Provide the title text that will be read by a screen reader when
      * visiting this control
      */
-    titleText?: React.ReactNode;
+    titleText?: ReactNode;
     /**
      * Callback function for translating ListBoxMenuIcon SVG title
      */
@@ -135,7 +134,7 @@ export interface DropdownProps<ItemType> extends Omit<ReactAttr<HTMLDivElement>,
     /**
      * Provide the text that is displayed when the control is in warning state
      */
-    warnText?: React.ReactNode;
+    warnText?: ReactNode;
 }
 export type DropdownTranslationKey = ListBoxMenuIconTranslationKey;
 type DropdownComponentProps<ItemType> = React.PropsWithoutRef<React.PropsWithChildren<DropdownProps<ItemType>> & React.RefAttributes<HTMLButtonElement>>;

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

@@ -4,8 +4,7 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { ReactNodeLike } from 'prop-types';
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { ButtonSize } from '../Button';
 export declare const IconButtonKinds: readonly ["primary", "secondary", "ghost", "tertiary"];
 export type IconButtonKind = (typeof IconButtonKinds)[number];
@@ -17,7 +16,7 @@ interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>
     /**
      * Provide an icon or asset to be rendered inside of the IconButton
      */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /**
      * Specify an optional className to be added to your Button
      */
@@ -52,7 +51,7 @@ interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>
      * This means that if you have text in the child node it will not be
      * announced to the screen reader.
      */
-    label: ReactNodeLike;
+    label: ReactNode;
     /**
      * Specify the duration in milliseconds to delay before hiding the tooltip
      */

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

@@ -37,7 +37,8 @@ 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 +55,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

package/lib/components/Menu/Menu.js

@@ -140,7 +140,7 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(_ref, forwardRef) {
     }
   }
   function focusItem(e) {
-    const currentItem = focusableItems.findIndex(item => item.ref.current.contains(document.activeElement));
+    const currentItem = focusableItems.findIndex(item => item.ref?.current?.contains(document.activeElement));
     let indexToFocus = currentItem;
 
     // if currentItem is -1, no menu item is focused yet.

package/lib/components/Menu/MenuItem.js

@@ -34,6 +34,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var _CaretLeft, _CaretRight;
 const hoverIntentDelay = 150; // in ms
+const leaveIntentDelay = 300; // in ms
 
 const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(_ref, forwardRef) {
   let {
@@ -59,6 +60,7 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(_ref, forwardRe
   const hasChildren = Boolean(children);
   const [submenuOpen, setSubmenuOpen] = React.useState(false);
   const hoverIntentTimeout = React.useRef(null);
+  const leaveIntentTimeout = React.useRef(null);
   const isDisabled = disabled && !hasChildren;
   const isDanger = kind === 'danger' && !hasChildren;
   function registerItem() {
@@ -113,6 +115,11 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(_ref, forwardRe
     }
   }
   function handleMouseEnter() {
+    if (leaveIntentTimeout.current) {
+      // When mouse reenters before closing keep sub menu open
+      clearTimeout(leaveIntentTimeout.current);
+      leaveIntentTimeout.current = null;
+    }
     hoverIntentTimeout.current = setTimeout(() => {
       openSubmenu();
     }, hoverIntentDelay);
@@ -120,8 +127,12 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(_ref, forwardRe
   function handleMouseLeave() {
     if (hoverIntentTimeout.current) {
       clearTimeout(hoverIntentTimeout.current);
-      closeSubmenu();
-      menuItem.current?.focus();
+      // Avoid closing the sub menu as soon as mouse leaves
+      // prevents accidental closure due to scroll bar
+      leaveIntentTimeout.current = setTimeout(() => {
+        closeSubmenu();
+        menuItem.current?.focus();
+      }, leaveIntentDelay);
     }
   }
   function handleKeyDown(e) {

package/lib/components/Modal/Modal.d.ts

@@ -4,14 +4,13 @@
  * 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 { ReactNodeLike } from 'prop-types';
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { ReactAttr } from '../../types/common';
 import { InlineLoadingStatus } from '../InlineLoading/InlineLoading';
 export declare const ModalSizes: readonly ["xs", "sm", "md", "lg"];
 export type ModalSize = (typeof ModalSizes)[number];
 export interface ModalSecondaryButton {
-    buttonText?: string | React.ReactNode;
+    buttonText?: string | ReactNode;
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
 }
 export interface ModalProps extends ReactAttr<HTMLDivElement> {
@@ -27,7 +26,7 @@ export interface ModalProps extends ReactAttr<HTMLDivElement> {
     /**
      * Provide the contents of your Modal
      */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /**
      * Specify an optional className to be applied to the modal root node
      */
@@ -75,11 +74,11 @@ export interface ModalProps extends ReactAttr<HTMLDivElement> {
     /**
      * Specify the content of the modal header title.
      */
-    modalHeading?: React.ReactNode;
+    modalHeading?: ReactNode;
     /**
      * Specify the content of the modal header label.
      */
-    modalLabel?: React.ReactNode;
+    modalLabel?: ReactNode;
     /**
      * Specify a handler for keypresses.
      * @deprecated this property is unused
@@ -124,11 +123,11 @@ export interface ModalProps extends ReactAttr<HTMLDivElement> {
     /**
      * Specify the text for the primary button
      */
-    primaryButtonText?: React.ReactNode;
+    primaryButtonText?: ReactNode;
     /**
      * Specify the text for the secondary button
      */
-    secondaryButtonText?: React.ReactNode;
+    secondaryButtonText?: ReactNode;
     /**
      * Specify an array of config objects for secondary buttons
      */
@@ -154,7 +153,7 @@ export interface ModalProps extends ReactAttr<HTMLDivElement> {
     /**
      * **Experimental**: Provide a `Slug` component to be rendered inside the `Modal` component
      */
-    slug?: ReactNodeLike;
+    slug?: ReactNode;
 }
 declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;
 export default Modal;