@carbon/react 1.57.0-rc.0 → 1.57.0

package/es/components/ComboBox/ComboBox.js

@@ -439,6 +439,7 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
       onClearSelection: handleSelectionClear,
       selectionCount: 0
     }), /*#__PURE__*/React__default.createElement(ListBoxTrigger, _extends({}, buttonProps, {
+      // @ts-expect-error
       isOpen: isOpen,
       translateWithId: translateWithId
     }))), normalizedSlug, /*#__PURE__*/React__default.createElement(ListBox.Menu, getMenuProps({

package/es/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/es/components/ContainedList/ContainedList.js

@@ -12,6 +12,7 @@ import cx from 'classnames';
 import { LayoutConstraint } from '../Layout/index.js';
 import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import ContainedListItem from './ContainedListItem/ContainedListItem.js';
 
 const variants = ['on-page', 'disclosed'];
 function filterChildren(children) {
@@ -130,6 +131,6 @@ ContainedList.propTypes = {
    */
   size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl'])
 };
-var ContainedList$1 = ContainedList;
+ContainedList.ContainedListItem = ContainedListItem;
 
-export { ContainedList$1 as default };
+export { ContainedList as default };

package/es/components/ContainedList/ContainedListItem/ContainedListItem.js

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

package/es/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/es/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/es/components/ContainedList/index.js

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

package/es/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/es/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/es/components/DatePicker/plugins/rangePlugin.js

@@ -27,14 +27,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/es/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/es/components/ListBox/next/ListBoxTrigger.js

@@ -27,7 +27,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.forwardRef(function ListBoxTrigger(_ref, ref) {
   let {
     isOpen,
     translateWithId: t = defaultTranslateWithId,
@@ -44,9 +44,10 @@ const ListBoxTrigger = _ref => {
     title: description,
     className: className,
     type: "button",
-    tabIndex: "-1"
+    tabIndex: "-1",
+    ref: ref
   }), _ChevronDown || (_ChevronDown = /*#__PURE__*/React__default.createElement(ChevronDown, null)));
-};
+});
 ListBoxTrigger.propTypes = {
   /**
    * Specify whether the menu is currently open, which will influence the

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

@@ -0,0 +1,177 @@
+/**
+ * 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 UseComboboxProps, type UseMultipleSelectionProps } from 'downshift';
+import { ReactNodeLike } from 'prop-types';
+import { ReactNode, FunctionComponent, ReactElement } from 'react';
+import { type ItemBase, type SortingPropTypes } from './MultiSelectPropTypes';
+export interface FilterableMultiSelectProps<Item extends ItemBase> extends SortingPropTypes<Item> {
+    /**
+     * Specify a label to be read by screen readers on the container node
+     * @deprecated
+     */
+    'aria-label'?: string;
+    /** @deprecated */
+    ariaLabel?: string;
+    className?: string;
+    /**
+     * Specify the text that should be read for screen readers that describes total items selected
+     */
+    clearSelectionDescription?: string;
+    /**
+     * Specify the text that should be read for screen readers to clear selection.
+     */
+    clearSelectionText?: string;
+    /**
+     * Specify the direction of the multiselect dropdown.
+     */
+    direction?: 'top' | 'bottom';
+    /**
+     * Disable the control
+     */
+    disabled?: boolean;
+    /**
+     * Additional props passed to Downshift
+     */
+    downshiftProps?: UseMultipleSelectionProps<Item>;
+    /**
+     * Default sorter is assigned if not provided.
+     */
+    filterItems(items: readonly Item[], extra: {
+        inputValue: string | null;
+        itemToString: NonNullable<UseMultipleSelectionProps<Item>['itemToString']>;
+    }): Item[];
+    /**
+     * Specify whether the title text should be hidden or not
+     */
+    hideLabel?: boolean;
+    /**
+     * Provide helper text that is used alongside
+     * the control label for additional help
+     */
+    helperText?: ReactNode;
+    /**
+     * Specify a custom `id`
+     */
+    id: string;
+    /**
+     * Allow users to pass in arbitrary items from their collection that are
+     * pre-selected
+     */
+    initialSelectedItems?: Item[];
+    /**
+     * Is the current selection invalid?
+     */
+    invalid?: boolean;
+    /**
+     * If invalid, what is the error?
+     */
+    invalidText?: ReactNode;
+    /**
+     * Function to render items as custom components instead of strings.
+     * Defaults to null and is overridden by a getter
+     */
+    itemToElement?: FunctionComponent<Item>;
+    /**
+     * Helper function passed to downshift that allows the library to render
+     * a given item to a string label.
+     *
+     * By default, it extracts the `label` field from a given item
+     * to serve as the item label in the list.
+     */
+    itemToString?(item: Item | null): string;
+    /**
+     * We try to stay as generic as possible here to allow individuals to pass
+     * in a collection of whatever kind of data structure they prefer
+     */
+    items: Item[];
+    /**
+     * @deprecated `true` to use the light version.
+     */
+    light?: boolean;
+    /**
+     * Specify the locale of the control.
+     * Used for the default `compareItems`,
+     * which is used for sorting the list of items in the control.
+     */
+    locale?: string;
+    /**
+     * `onChange` is a utility for this controlled component to communicate to a
+     * consuming component what kind of internal state changes are occurring.
+     */
+    onChange?(changes: {
+        selectedItems: Item[];
+    }): void;
+    /**
+     * A utility for this controlled component
+     * to communicate to the currently typed input.
+     */
+    onInputValueChange?: UseComboboxProps<Item>['onInputValueChange'];
+    /**
+     * `onMenuChange` is a utility for this controlled component to communicate to a
+     * consuming component that the menu was opened(`true`)/closed(`false`).
+     */
+    onMenuChange?(open: boolean): void;
+    /**
+     * Initialize the component with an open(`true`)/closed(`false`) menu.
+     */
+    open?: boolean;
+    /**
+     * Generic `placeholder` that will be used as the textual representation of
+     * what this field is for
+     */
+    placeholder?: string;
+    /**
+     * Specify feedback (mode) of the selection.
+     * `top`: selected item jumps to top
+     * `fixed`: selected item stays at its position
+     * `top-after-reopen`: selected item jump to top after reopen dropdown
+     */
+    selectionFeedback?: 'top' | 'fixed' | 'top-after-reopen';
+    /**
+     * For full control of the selected items
+     */
+    selectedItems?: Item[];
+    /**
+     * Specify the size of the ListBox.
+     * Currently, supports either `sm`, `md` or `lg` as an option.
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * **Experimental**: Provide a `Slug` component to be rendered inside the `Checkbox` component
+     */
+    slug?: ReactNodeLike;
+    /**
+     * Provide text to be used in a `<label>` element that is tied to the
+     * combobox via ARIA attributes.
+     */
+    titleText?: ReactNode;
+    /**
+     * Callback function for translating ListBoxMenuIcon SVG title
+     */
+    translateWithId?(messageId: string, args?: Record<string, unknown>): string;
+    type?: 'default' | 'inline';
+    /**
+     * Specify title to show title on hover
+     */
+    useTitleInItem?: boolean;
+    /**
+     * Specify whether the control is currently in warning state
+     */
+    warn?: boolean;
+    /**
+     * Provide the text that is displayed when the control is in warning state
+     */
+    warnText?: ReactNode;
+}
+declare const FilterableMultiSelect: {
+    <Item extends ItemBase>(props: FilterableMultiSelectProps<Item>): ReactElement;
+    propTypes?: any;
+    contextTypes?: any;
+    defaultProps?: any;
+    displayName?: any;
+};
+export default FilterableMultiSelect;