@carbon/react 1.67.1 → 1.68.0

package/lib/components/FluidDatePicker/FluidDatePicker.Skeleton.js

@@ -23,7 +23,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-function FluidDatePickerSkeleton(_ref) {
+const FluidDatePickerSkeleton = _ref => {
   let {
     className,
     datePickerType = 'single',
@@ -60,7 +60,7 @@ function FluidDatePickerSkeleton(_ref) {
     role: "img",
     "aria-hidden": "true"
   }))));
-}
+};
 FluidDatePickerSkeleton.propTypes = {
   /**
    * Specify an optional className to be applied to the outer FluidForm wrapper

package/lib/components/FluidDatePicker/FluidDatePicker.d.ts

@@ -0,0 +1,39 @@
+/**
+ * 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 from 'react';
+export interface FluidDatePickerProps {
+    /**
+     * The child node(s)
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify an optional className to be applied to the outer FluidForm wrapper
+     */
+    className?: string;
+    /**
+     * Specify whether or not the control is invalid
+     */
+    invalid?: boolean;
+    /**
+     * Provide the text that is displayed when the control is in error state
+     */
+    invalidText?: React.ReactNode;
+    /**
+     * Whether the input should be read-only
+     */
+    readOnly?: 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?: React.ReactNode;
+}
+declare const FluidDatePicker: React.FC<FluidDatePickerProps>;
+export default FluidDatePicker;

package/lib/components/FluidDatePicker/FluidDatePicker.js

@@ -11,18 +11,18 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var PropTypes = require('prop-types');
-var React = require('react');
 var cx = require('classnames');
 var DatePicker = require('../DatePicker/DatePicker.js');
 require('../DatePicker/DatePicker.Skeleton.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var FormContext = require('../FluidForm/FormContext.js');
+var React = require('react');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const FluidDatePicker = /*#__PURE__*/React__default["default"].forwardRef(function FluidDatePicker(_ref, ref) {
   let {
@@ -86,6 +86,5 @@ FluidDatePicker.propTypes = {
    */
   warnText: PropTypes__default["default"].node
 };
-var FluidDatePicker$1 = FluidDatePicker;
 
-exports["default"] = FluidDatePicker$1;
+exports["default"] = FluidDatePicker;

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

@@ -0,0 +1,13 @@
+/**
+ * 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 FluidDatePicker from './FluidDatePicker';
+import type { FluidDatePickerProps } from './FluidDatePicker';
+import { FluidDatePickerSkeletonProps } from './FluidDatePicker.Skeleton';
+export type { FluidDatePickerProps, FluidDatePickerSkeletonProps };
+export { default as FluidDatePickerSkeleton } from './FluidDatePicker.Skeleton';
+export default FluidDatePicker;
+export { FluidDatePicker };

package/lib/components/FluidDatePickerInput/FluidDatePickerInput.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 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 from 'react';
+import { DatePickerInputProps } from '../DatePickerInput';
+declare const FluidDatePickerInput: React.ForwardRefExoticComponent<DatePickerInputProps & React.RefAttributes<HTMLDivElement>>;
+export default FluidDatePickerInput;

package/lib/components/FluidDatePickerInput/FluidDatePickerInput.js

@@ -30,6 +30,5 @@ const FluidDatePickerInput = /*#__PURE__*/React__default["default"].forwardRef(f
     ref: ref
   }, other)));
 });
-var FluidDatePickerInput$1 = FluidDatePickerInput;
 
-exports["default"] = FluidDatePickerInput$1;
+exports["default"] = FluidDatePickerInput;

package/lib/components/FluidDatePickerInput/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 FluidDatePickerInput from './FluidDatePickerInput';
+export default FluidDatePickerInput;
+export { FluidDatePickerInput };

package/lib/components/FluidMultiSelect/FluidFilterableMultiSelect.d.ts

@@ -0,0 +1,144 @@
+/**
+ * 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, { FunctionComponent } from 'react';
+import { UseComboboxProps, UseMultipleSelectionProps } from 'downshift';
+import { FilterableMultiSelectProps } from '../MultiSelect/FilterableMultiSelect';
+interface OnChangeData<ItemType> {
+    selectedItems: ItemType[] | null;
+}
+export interface FluidFilterableMultiSelectProps<ItemType> extends FilterableMultiSelectProps<ItemType> {
+    /**
+     * Specify an optional className to be applied to the outer FluidForm wrapper
+     */
+    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. Can be either top or bottom.
+     */
+    direction?: 'top' | 'bottom';
+    /**
+     * Specify whether the `<input>` should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * Additional props passed to Downshift.
+     *
+     * **Use with caution:** anything you define here overrides the components'
+     * internal handling of that prop. Downshift APIs and internals are subject to
+     * change, and in some cases they can not be shimmed by Carbon to shield you
+     * from potentially breaking changes.
+     */
+    downshiftProps?: Partial<UseMultipleSelectionProps<ItemType>>;
+    /**
+     * Specify a custom `id` for the `<input>`
+     */
+    id: string;
+    /**
+     * Allow users to pass in arbitrary items from their collection that are
+     * pre-selected
+     */
+    initialSelectedItems?: ItemType[];
+    /**
+     * Specify if the currently selected value is invalid.
+     */
+    invalid?: boolean;
+    /**
+     * Provide the text that is displayed when the control is in an invalid state
+     */
+    invalidText?: React.ReactNode;
+    /**
+     * Specify if the `FluidMultiSelect` should render its menu items in condensed mode
+     */
+    isCondensed?: boolean;
+    /**
+     * Function to render items as custom components instead of strings.
+     * Defaults to null and is overridden by a getter
+     */
+    itemToElement?: FunctionComponent<ItemType>;
+    /**
+     * 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. Consider
+     * declaring function with `useCallback` to prevent unnecessary re-renders.
+     */
+    itemToString?(item: ItemType): 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: ItemType[];
+    /**
+     * Generic `label` that will be used as the textual representation of what
+     * this field is for
+     */
+    label: NonNullable<React.ReactNode>;
+    /**
+     * Specify the locale of the control. Used for the default `compareItems`
+     * 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?(data: OnChangeData<ItemType>): void;
+    /**
+     * **Filterable variant only** - `onInputValueChange` is a utility for this controlled component to communicate to
+     * the currently typed input.
+     */
+    onInputValueChange?: UseComboboxProps<ItemType>['onInputValueChange'];
+    /**
+     * `onMenuChange` is a utility for this controlled component to communicate to a
+     * consuming component that the menu was open(`true`)/closed(`false`).
+     */
+    onMenuChange?(open: boolean): void;
+    /**
+     * Whether or not the Multiselect is readonly
+     */
+    readOnly?: boolean;
+    /**
+     * For full control of the selected items
+     */
+    selectedItems?: ItemType[];
+    /**
+     * Specify feedback (mode) of the selection.
+     * `top`: selected item jumps to top
+     * `fixed`: selected item stays at it's position
+     * `top-after-reopen`: selected item jump to top after reopen dropdown
+     */
+    selectionFeedback?: 'top' | 'fixed' | 'top-after-reopen';
+    /**
+     * Provide the title text that will be read by a screen reader when
+     * visiting this control
+     */
+    titleText?: React.ReactNode;
+    /**
+     * Callback function for translating ListBoxMenuIcon SVG title
+     */
+    translateWithId?: (id: string) => string;
+    /**
+     * 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?: React.ReactNode;
+}
+declare const FluidMultiSelect: React.ForwardRefExoticComponent<Omit<FluidFilterableMultiSelectProps<unknown>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default FluidMultiSelect;

package/lib/components/FluidMultiSelect/FluidMultiSelect.Skeleton.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 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 React from 'react';
+export interface FluidMultiSelectSkeletonProps {
+    /**
+     * Specify an optional className to add.
+     */
+    className?: string;
+}
+declare const FluidMultiSelectSkeleton: React.FC<FluidMultiSelectSkeletonProps>;
+export default FluidMultiSelectSkeleton;

package/lib/components/FluidMultiSelect/FluidMultiSelect.Skeleton.js

@@ -44,6 +44,5 @@ FluidMultiSelectSkeleton.propTypes = {
    */
   className: PropTypes__default["default"].string
 };
-var FluidMultiSelectSkeleton$1 = FluidMultiSelectSkeleton;
 
-exports["default"] = FluidMultiSelectSkeleton$1;
+exports["default"] = FluidMultiSelectSkeleton;

package/lib/components/FluidMultiSelect/FluidMultiSelect.d.ts

@@ -0,0 +1,149 @@
+/**
+ * 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 from 'react';
+import { UseSelectProps } from 'downshift';
+import { MultiSelectProps } from '../MultiSelect/MultiSelect';
+interface OnChangeData<ItemType> {
+    selectedItems: ItemType[] | null;
+}
+export interface FluidMultiSelectProps<ItemType> extends MultiSelectProps<ItemType> {
+    /**
+     * Specify an optional className to be applied to the outer FluidForm wrapper
+     */
+    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. Can be either top or bottom.
+     */
+    direction?: 'top' | 'bottom';
+    /**
+     * Specify whether the `<input>` should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * Additional props passed to Downshift.
+     *
+     * **Use with caution:** anything you define here overrides the components'
+     * internal handling of that prop. Downshift APIs and internals are subject to
+     * change, and in some cases they can not be shimmed by Carbon to shield you
+     * from potentially breaking changes.
+     */
+    downshiftProps?: Partial<UseSelectProps<ItemType>>;
+    /**
+     * Specify a custom `id` for the `<input>`
+     */
+    id: string;
+    /**
+     * Allow users to pass in arbitrary items from their collection that are
+     * pre-selected
+     */
+    initialSelectedItems?: ItemType[];
+    /**
+     * Specify if the currently selected value is invalid.
+     */
+    invalid?: boolean;
+    /**
+     * Provide the text that is displayed when the control is in an invalid state
+     */
+    invalidText?: React.ReactNode;
+    /**
+     * Specify if the `FluidMultiSelect` should render its menu items in condensed mode
+     */
+    isCondensed?: boolean;
+    /**
+     * Specify if the `FluidMultiSelect` should render the `filterable` variant of `FluidMultiSelect`
+     * @deprecated This prop is deprecated in favor of new component called FluidFilterableMultiSelect and will be removed in the next major release
+     */
+    isFilterable?: boolean;
+    /**
+     * Function to render items as custom components instead of strings.
+     * Defaults to null and is overridden by a getter
+     */
+    itemToElement?: React.JSXElementConstructor<ItemType>;
+    /**
+     * 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. Consider
+     * declaring function with `useCallback` to prevent unnecessary re-renders.
+     */
+    itemToString?(item: ItemType): 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: ItemType[];
+    /**
+     * Generic `label` that will be used as the textual representation of what
+     * this field is for
+     */
+    label: NonNullable<React.ReactNode>;
+    /**
+     * Specify the locale of the control. Used for the default `compareItems`
+     * 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?(data: OnChangeData<ItemType>): void;
+    /**
+     * **Filterable variant only** - `onInputValueChange` is a utility for this controlled component to communicate to
+     * the currently typed input.
+     */
+    onInputValueChange?: (inputValue: string) => void;
+    /**
+     * `onMenuChange` is a utility for this controlled component to communicate to a
+     * consuming component that the menu was open(`true`)/closed(`false`).
+     */
+    onMenuChange?(open: boolean): void;
+    /**
+     * Whether or not the Multiselect is readonly
+     */
+    readOnly?: boolean;
+    /**
+     * For full control of the selected items
+     */
+    selectedItems?: ItemType[];
+    /**
+     * Specify feedback (mode) of the selection.
+     * `top`: selected item jumps to top
+     * `fixed`: selected item stays at it's position
+     * `top-after-reopen`: selected item jump to top after reopen dropdown
+     */
+    selectionFeedback?: 'top' | 'fixed' | 'top-after-reopen';
+    /**
+     * Provide the title text that will be read by a screen reader when
+     * visiting this control
+     */
+    titleText?: React.ReactNode;
+    /**
+     * Callback function for translating ListBoxMenuIcon SVG title
+     */
+    translateWithId?: (id: string) => string;
+    /**
+     * 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?: React.ReactNode;
+}
+declare const FluidMultiSelect: React.ForwardRefExoticComponent<FluidMultiSelectProps<unknown> & React.RefAttributes<HTMLButtonElement>>;
+export default FluidMultiSelect;

package/lib/components/FluidMultiSelect/FluidMultiSelect.js

@@ -40,7 +40,10 @@ const FluidMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(funct
     value: {
       isFluid: true
     }
-  }, isFilterable ? /*#__PURE__*/React__default["default"].createElement(FilterableMultiSelect["default"], _rollupPluginBabelHelpers["extends"]({
+  }, isFilterable ?
+  /*#__PURE__*/
+  // @ts-ignore
+  React__default["default"].createElement(FilterableMultiSelect["default"], _rollupPluginBabelHelpers["extends"]({
     ref: ref,
     className: classNames
   }, other)) : /*#__PURE__*/React__default["default"].createElement(MultiSelect["default"], _rollupPluginBabelHelpers["extends"]({
@@ -209,6 +212,5 @@ FluidMultiSelect.propTypes = {
    */
   warnText: PropTypes__default["default"].node
 };
-var FluidMultiSelect$1 = FluidMultiSelect;
 
-exports["default"] = FluidMultiSelect$1;
+exports["default"] = FluidMultiSelect;

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

@@ -0,0 +1,13 @@
+/**
+ * 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 FluidMultiSelect from './FluidMultiSelect';
+import type { FluidMultiSelectProps } from './FluidMultiSelect';
+import type { FluidMultiSelectSkeletonProps } from './FluidMultiSelect.Skeleton';
+export type { FluidMultiSelectProps, FluidMultiSelectSkeletonProps };
+export default FluidMultiSelect;
+export { FluidMultiSelect };
+export { default as FluidMultiSelectSkeleton } from './FluidMultiSelect.Skeleton';

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

@@ -4,8 +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 { FluidNumberInputProps } from './FluidNumberInput';
-import { FluidNumberInputSkeletonProps } from './FluidNumberInput.Skeleton';
+import type { FluidNumberInputProps } from './FluidNumberInput';
+import type { FluidNumberInputSkeletonProps } from './FluidNumberInput.Skeleton';
 export { type FluidNumberInputProps, type FluidNumberInputSkeletonProps };
 export { default, default as FluidNumberInput } from './FluidNumberInput';
 export { default as FluidNumberInputSkeleton } from './FluidNumberInput.Skeleton';

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

@@ -4,8 +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 { FluidSearchProps } from './FluidSearch';
-import { FluidSearchSkeletonProps } from './FluidSearch.Skeleton';
+import type { FluidSearchProps } from './FluidSearch';
+import type { FluidSearchSkeletonProps } from './FluidSearch.Skeleton';
 export { default, default as FluidSearch } from './FluidSearch';
 export { type FluidSearchProps, type FluidSearchSkeletonProps };
 export { default as FluidSearchSkeleton } from './FluidSearch.Skeleton';

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

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 import FluidSelect from './FluidSelect';
-import FluidSelectSkeletonProps from './FluidSelect.Skeleton';
-import FluidSelectProps from './FluidSelect.Skeleton';
+import type FluidSelectSkeletonProps from './FluidSelect.Skeleton';
+import type FluidSelectProps from './FluidSelect.Skeleton';
 export type { FluidSelectSkeletonProps, FluidSelectProps };
 export default FluidSelect;
 export { FluidSelect };

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

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 import FluidTimePicker from './FluidTimePicker';
-import { FluidTimePickerProps } from './FluidTimePicker';
-import { FluidTimePickerSkeletonProps } from './FluidTimePicker.Skeleton';
+import { type FluidTimePickerProps } from './FluidTimePicker';
+import { type FluidTimePickerSkeletonProps } from './FluidTimePicker.Skeleton';
 export { default as FluidTimePickerSkeleton } from './FluidTimePicker.Skeleton';
 export type { FluidTimePickerProps, FluidTimePickerSkeletonProps };
 export default FluidTimePicker;

package/lib/components/Modal/Modal.js

@@ -275,7 +275,7 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
     id: modalLabelId,
     className: `${prefix}--modal-header__label`
   }, modalLabel), /*#__PURE__*/React__default["default"].createElement(Text.Text, {
-    as: "h3",
+    as: "h2",
     id: modalHeadingId,
     className: `${prefix}--modal-header__heading`
   }, modalHeading), normalizedSlug, !passiveModal && modalButton), /*#__PURE__*/React__default["default"].createElement(index$1.Layer, _rollupPluginBabelHelpers["extends"]({

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { type UseComboboxProps, type UseMultipleSelectionProps } from 'downshift';
-import { ReactNode, FunctionComponent, ReactElement } from 'react';
+import React, { ReactNode, FunctionComponent, ReactElement } from 'react';
 import { type MultiSelectSortingProps } from './MultiSelectPropTypes';
 import { TranslateWithId } from '../../types/common';
 /**
@@ -16,7 +16,7 @@ import { TranslateWithId } from '../../types/common';
  * ends up just being defined as "string".)
  */
 type TranslationKey = 'close.menu' | 'open.menu' | 'clear.all' | 'clear.selection';
-export interface FilterableMultiSelectProps<ItemType> extends MultiSelectSortingProps<ItemType>, TranslateWithId<TranslationKey> {
+export interface FilterableMultiSelectProps<ItemType> extends MultiSelectSortingProps<ItemType>, React.RefAttributes<HTMLDivElement>, TranslateWithId<TranslationKey> {
     /**
      * Specify a label to be read by screen readers on the container node
      * @deprecated

package/lib/components/Tabs/usePressable.js

@@ -11,6 +11,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 
+/* istanbul ignore file */
+
 /**
  * @param {React.RefObject<HTMLElement>} ref
  *

package/lib/components/Tooltip/DefinitionTooltip.js

@@ -70,8 +70,10 @@ const DefinitionTooltip = _ref => {
     onBlur: () => {
       setOpen(false);
     },
-    onClick: () => {
-      setOpen(!isOpen);
+    onMouseDown: event => {
+      // We use onMouseDown rather than onClick to make sure this triggers
+      // before onFocus.
+      if (event.button === 0) setOpen(!isOpen);
     },
     onKeyDown: onKeyDown,
     type: "button"