@carbon/react 1.57.0 → 1.58.0-rc.0

package/es/components/Tag/DismissibleTag.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 PropTypes, { ReactNodeLike } from 'prop-types';
-import React from 'react';
+import PropTypes from 'prop-types';
+import React, { ReactNode } from 'react';
 import { PolymorphicProps } from '../../types/common';
 import { SIZES, TYPES } from './Tag';
 export interface DismissibleTagBaseProps {
@@ -42,7 +42,7 @@ export interface DismissibleTagBaseProps {
     /**
      * **Experimental:** Provide a `Slug` component to be rendered inside the `DismissibleTag` component
      */
-    slug?: ReactNodeLike;
+    slug?: ReactNode;
     /**
      * Text to show on clear filters
      */

package/es/components/Tag/OperationalTag.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 PropTypes, { ReactNodeLike } from 'prop-types';
-import React, { MouseEventHandler } from 'react';
+import PropTypes from 'prop-types';
+import React, { MouseEventHandler, ReactNode } from 'react';
 import { PolymorphicProps } from '../../types/common';
 import { SIZES } from './Tag';
 declare const TYPES: {
@@ -51,7 +51,7 @@ export interface OperationalTagBaseProps {
     /**
      * **Experimental:** Provide a `Slug` component to be rendered inside the `OperationalTag` component
      */
-    slug?: ReactNodeLike;
+    slug?: ReactNode;
     /**
      * Specify the type of the `Tag`
      */

package/es/components/Tag/SelectableTag.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 PropTypes, { ReactNodeLike } from 'prop-types';
-import React from 'react';
+import PropTypes from 'prop-types';
+import React, { ReactNode } from 'react';
 import { PolymorphicProps } from '../../types/common';
 import { SIZES } from './Tag';
 export interface SelectableTagBaseProps {
@@ -42,7 +42,7 @@ export interface SelectableTagBaseProps {
     /**
      * **Experimental:** Provide a `Slug` component to be rendered inside the `SelectableTag` component
      */
-    slug?: ReactNodeLike;
+    slug?: ReactNode;
 }
 export type SelectableTagProps<T extends React.ElementType> = PolymorphicProps<T, SelectableTagBaseProps>;
 declare const SelectableTag: {

package/es/components/Tag/Tag.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 PropTypes, { ReactNodeLike } from 'prop-types';
-import React from 'react';
+import PropTypes from 'prop-types';
+import React, { ReactNode } from 'react';
 import { PolymorphicProps } from '../../types/common';
 export declare const TYPES: {
     red: string;
@@ -64,7 +64,7 @@ export interface TagBaseProps {
     /**
      * **Experimental:** Provide a `Slug` component to be rendered inside the `Tag` component
      */
-    slug?: ReactNodeLike;
+    slug?: ReactNode;
     /**
      * @deprecated This property is deprecated and will be removed in the next major version. Use DismissibleTag instead.
      */

package/es/components/TextArea/TextArea.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';
 export interface TextAreaProps extends React.InputHTMLAttributes<HTMLTextAreaElement> {
     /**
      * Provide a custom className that is applied directly to the underlying
@@ -31,7 +30,7 @@ export interface TextAreaProps extends React.InputHTMLAttributes<HTMLTextAreaEle
     /**
      * Provide text that is used alongside the control label for additional help
      */
-    helperText?: ReactNodeLike;
+    helperText?: ReactNode;
     /**
      * Specify whether you want the underlying label to be visually hidden
      */
@@ -47,12 +46,12 @@ export interface TextAreaProps extends React.InputHTMLAttributes<HTMLTextAreaEle
     /**
      * Provide the text that is displayed when the control is in an invalid state
      */
-    invalidText?: ReactNodeLike;
+    invalidText?: ReactNode;
     /**
      * Provide the text that will be read by a screen reader when visiting this
      * control
      */
-    labelText: ReactNodeLike;
+    labelText: ReactNode;
     /**
      * @deprecated
      * `true` to use the light version. For use on $ui-01 backgrounds only.
@@ -93,7 +92,7 @@ export interface TextAreaProps extends React.InputHTMLAttributes<HTMLTextAreaEle
     /**
      * **Experimental**: Provide a `Slug` component to be rendered inside the `TextArea` component
      */
-    slug?: ReactNodeLike;
+    slug?: ReactNode;
     /**
      * Provide the current value of the `<textarea>`
      */
@@ -105,7 +104,7 @@ export interface TextAreaProps extends React.InputHTMLAttributes<HTMLTextAreaEle
     /**
      * Provide the text that is displayed when the control is in warning state
      */
-    warnText?: ReactNodeLike;
+    warnText?: ReactNode;
     /**
      * Specify the method used for calculating the counter number
      */

package/es/components/TextInput/PasswordInput.d.ts

@@ -1,5 +1,4 @@
-import React, { InputHTMLAttributes } from 'react';
-import { ReactNodeLike } from 'prop-types';
+import React, { InputHTMLAttributes, ReactNode } from 'react';
 type ExcludedAttributes = 'size';
 export interface PasswordInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes> {
     /**
@@ -21,7 +20,7 @@ export interface PasswordInputProps extends Omit<InputHTMLAttributes<HTMLInputEl
     /**
      * Provide text that is used alongside the control label for additional help
      */
-    helperText?: ReactNodeLike;
+    helperText?: ReactNode;
     /**
      * Specify whether or not the underlying label is visually hidden
      */
@@ -45,11 +44,11 @@ export interface PasswordInputProps extends Omit<InputHTMLAttributes<HTMLInputEl
     /**
      * Provide the text that is displayed when the control is in an invalid state
      */
-    invalidText?: ReactNodeLike;
+    invalidText?: ReactNode;
     /**
      * Provide the text that will be read by a screen reader when visiting this control
      */
-    labelText: ReactNodeLike;
+    labelText: ReactNode;
     /**
      * @deprecated The `light` prop for `PasswordInput` has been deprecated in favor of the new `Layer` component. It will be removed in the next major release.
      * `true` to use the light version. For use on $ui-01 backgrounds only.
@@ -119,7 +118,7 @@ export interface PasswordInputProps extends Omit<InputHTMLAttributes<HTMLInputEl
     /**
      * Provide the text that is displayed when the control is in warning state
      */
-    warnText?: ReactNodeLike;
+    warnText?: ReactNode;
 }
 declare const PasswordInput: React.ForwardRefExoticComponent<PasswordInputProps & React.RefAttributes<unknown>>;
 export default PasswordInput;

package/es/components/TextInput/PasswordInput.js

@@ -139,10 +139,10 @@ const PasswordInput = /*#__PURE__*/React__default.forwardRef(function PasswordIn
       align = tooltipPosition;
     }
     if (tooltipAlignment === 'end') {
-      align = `${tooltipPosition}-right`;
+      align = `${tooltipPosition}-end`;
     }
     if (tooltipAlignment === 'start') {
-      align = `${tooltipPosition}-left`;
+      align = `${tooltipPosition}-start`;
     }
   }
   if (tooltipPosition === 'right' || tooltipPosition === 'left') {

package/es/components/TextInput/TextInput.d.ts

@@ -4,7 +4,6 @@
  * 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, { ReactNode } from 'react';
 type ExcludedAttributes = 'defaultValue' | 'id' | 'size' | 'value';
 export interface TextInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes> {
@@ -89,7 +88,7 @@ export interface TextInputProps extends Omit<React.InputHTMLAttributes<HTMLInput
     /**
      * **Experimental**: Provide a `Slug` component to be rendered inside the `TextInput` component
      */
-    slug?: ReactNodeLike;
+    slug?: ReactNode;
     /**
      * Specify the type of the `<input>`
      */

package/es/components/Theme/index.d.ts

@@ -49,4 +49,5 @@ export declare namespace Theme {
  * Get access to the current theme
  */
 export declare function useTheme(): GlobalThemeProps;
+export declare function usePrefersDarkScheme(): boolean;
 export {};

package/es/components/Theme/index.js

@@ -11,6 +11,7 @@ import PropTypes from 'prop-types';
 import React__default, { useMemo } from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { LayerContext } from '../Layer/LayerContext.js';
+import { useMatchMedia } from '../../internal/useMatchMedia.js';
 
 const ThemeContext = /*#__PURE__*/React__default.createContext({
   theme: 'white'
@@ -62,8 +63,10 @@ function Theme(_ref2) {
     [`${prefix}--layer-one`]: true
   });
   const value = React__default.useMemo(() => {
+    const isDark = theme && ['g90', 'g100'].includes(theme);
     return {
-      theme
+      theme,
+      isDark
     };
   }, [theme]);
   const BaseComponentAsAny = BaseComponent;
@@ -102,5 +105,8 @@ Theme.propTypes = {
 function useTheme() {
   return React__default.useContext(ThemeContext);
 }
+function usePrefersDarkScheme() {
+  return useMatchMedia('(prefers-color-scheme: dark)');
+}
 
-export { GlobalTheme, Theme, ThemeContext, useTheme };
+export { GlobalTheme, Theme, ThemeContext, usePrefersDarkScheme, useTheme };

package/es/components/Tile/Tile.d.ts

@@ -1,5 +1,4 @@
 import React, { type ReactNode, type MouseEvent, type KeyboardEvent, type HTMLAttributes, type ChangeEvent, type ComponentType } from 'react';
-import { ReactNodeLike } from 'prop-types';
 export interface TileProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
     className?: string;
@@ -13,7 +12,7 @@ export interface TileProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * **Experimental**: Provide a `Slug` component to be rendered inside the `SelectableTile` component
      */
-    slug?: ReactNodeLike;
+    slug?: ReactNode;
 }
 export declare const Tile: React.ForwardRefExoticComponent<TileProps & React.RefAttributes<HTMLDivElement>>;
 export interface ClickableTileProps extends HTMLAttributes<HTMLAnchorElement> {
@@ -104,7 +103,7 @@ export interface SelectableTileProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * **Experimental**: Provide a `Slug` component to be rendered inside the `SelectableTile` component
      */
-    slug?: ReactNodeLike;
+    slug?: ReactNode;
     /**
      * Specify the tab index of the wrapper element
      */
@@ -149,7 +148,7 @@ export interface ExpandableTileProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * **Experimental**: Provide a `Slug` component to be rendered inside the `ExpandableTile` component
      */
-    slug?: ReactNodeLike;
+    slug?: ReactNode;
     /**
      * The `tabindex` attribute.
      */

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

@@ -4,14 +4,15 @@
  * 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';
 import { ReactAttr } from '../../types/common';
 type ExcludedAttributes = 'onChange';
 export interface TileGroupProps extends Omit<ReactAttr<HTMLFieldSetElement>, ExcludedAttributes> {
     /**
      * Provide a collection of <RadioTile> components to render in the group
      */
-    children?: ReactNodeLike;
+    children?: ReactNode;
     /**
      * Provide an optional className to be applied to the container node
      */

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

@@ -0,0 +1,9 @@
+/**
+ * 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 TileGroup from './TileGroup';
+export default TileGroup;
+export { TileGroup };

package/es/components/Toggle/Toggle.js

@@ -89,7 +89,7 @@ function Toggle(_ref) {
       role: "switch",
       type: "button",
       "aria-checked": checked,
-      "aria-labelledby": ariaLabelledby ?? labelId,
+      "aria-labelledby": ariaLabelledby ?? (labelText ? labelId : undefined),
       disabled: disabled,
       onClick: handleClick
     })), /*#__PURE__*/React__default.createElement(LabelComponent, {

package/es/components/Tooltip/DefinitionTooltip.js

@@ -18,7 +18,7 @@ import { Escape } from '../../internal/keyboard/keys.js';
 
 const DefinitionTooltip = _ref => {
   let {
-    align = 'bottom-left',
+    align = 'bottom-start',
     className,
     children,
     definition,

package/es/index.js

@@ -80,6 +80,8 @@ export { default as OverflowMenuItem } from './components/OverflowMenuItem/Overf
 export { default as Pagination } from './components/Pagination/Pagination.js';
 export { default as PaginationSkeleton } from './components/Pagination/Pagination.Skeleton.js';
 export { default as PaginationNav } from './components/PaginationNav/PaginationNav.js';
+export { default as ControlledPasswordInput } from './components/TextInput/ControlledPasswordInput.js';
+export { default as PasswordInput } from './components/TextInput/PasswordInput.js';
 export { default as PrimaryButton } from './components/PrimaryButton/PrimaryButton.js';
 export { default as ProgressIndicatorSkeleton } from './components/ProgressIndicator/ProgressIndicator.Skeleton.js';
 export { ProgressIndicator, ProgressStep } from './components/ProgressIndicator/ProgressIndicator.js';
@@ -117,7 +119,7 @@ export { default as TextArea } from './components/TextArea/TextArea.js';
 export { default as TextAreaSkeleton } from './components/TextArea/TextArea.Skeleton.js';
 import './components/TextInput/index.js';
 export { ClickableTile, ExpandableTile, SelectableTile, Tile, TileAboveTheFoldContent, TileBelowTheFoldContent } from './components/Tile/Tile.js';
-export { default as TileGroup } from './components/TileGroup/index.js';
+export { default as TileGroup } from './components/TileGroup/TileGroup.js';
 export { default as TimePicker } from './components/TimePicker/TimePicker.js';
 export { default as TimePickerSelect } from './components/TimePickerSelect/TimePickerSelect.js';
 export { Toggle } from './components/Toggle/Toggle.js';
@@ -169,7 +171,7 @@ export { default as unstable__AiSkeletonText } from './components/AiSkeleton/AiS
 export { DefinitionTooltip } from './components/Tooltip/DefinitionTooltip.js';
 export { Tooltip } from './components/Tooltip/Tooltip.js';
 import './components/Text/index.js';
-export { GlobalTheme, Theme, ThemeContext, useTheme } from './components/Theme/index.js';
+export { GlobalTheme, Theme, ThemeContext, usePrefersDarkScheme, useTheme } from './components/Theme/index.js';
 export { PrefixContext, usePrefix } from './internal/usePrefix.js';
 export { useIdPrefix } from './internal/useIdPrefix.js';
 export { default as unstable__FluidDatePickerSkeleton } from './components/FluidDatePicker/FluidDatePicker.Skeleton.js';
@@ -230,6 +232,4 @@ export { default as TableToolbarSearch } from './components/DataTable/TableToolb
 export { default as TableToolbarMenu } from './components/DataTable/TableToolbarMenu.js';
 export { default as FilterableMultiSelect } from './components/MultiSelect/FilterableMultiSelect.js';
 export { default as MultiSelect } from './components/MultiSelect/MultiSelect.js';
-export { default as ControlledPasswordInput } from './components/TextInput/ControlledPasswordInput.js';
-export { default as PasswordInput } from './components/TextInput/PasswordInput.js';
 export { default as TreeNode } from './components/TreeView/TreeNode.js';

package/es/prop-types/deprecateValuesWithin.js

@@ -0,0 +1,35 @@
+/**
+ * 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 { warning } from '../internal/warning.js';
+
+const didWarnAboutDeprecation = {};
+function deprecateValuesWithin(propType, allowedValues, propMappingFunction) {
+  return function checker(props, propName, componentName) {
+    if (props[propName] === undefined) {
+      return;
+    }
+    if (!didWarnAboutDeprecation[componentName] || !didWarnAboutDeprecation[componentName][propName]) {
+      didWarnAboutDeprecation[componentName] = {
+        ...didWarnAboutDeprecation[componentName],
+        [propName]: true
+      };
+      const deprecatedValue = props[propName];
+      const newValue = propMappingFunction ? propMappingFunction(deprecatedValue) : null;
+      if (allowedValues && !allowedValues.includes(deprecatedValue)) {
+        const message = propMappingFunction ? `"${deprecatedValue}" is a deprecated value for the "${propName}" prop on the "${componentName}" component. Use "${newValue}" instead. "${deprecatedValue}" will be removed in the next major release.` : `"${deprecatedValue}" is a deprecated value for the "${propName}" prop on the "${componentName}" component. Allowed values is/are: ${allowedValues.join(', ')}.  "${deprecatedValue}" will be removed in the next major release. `;
+        process.env.NODE_ENV !== "production" ? warning(false, message) : void 0;
+      }
+    }
+    for (var _len = arguments.length, rest = new Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++) {
+      rest[_key - 3] = arguments[_key];
+    }
+    return propType(props, propName, componentName, ...rest);
+  };
+}
+
+export { deprecateValuesWithin as default };

package/lib/components/Button/Button.js

@@ -73,10 +73,10 @@ const Button = /*#__PURE__*/React__default["default"].forwardRef(function Button
         align = tooltipPosition;
       }
       if (tooltipAlignment === 'end') {
-        align = `${tooltipPosition}-right`;
+        align = `${tooltipPosition}-end`;
       }
       if (tooltipAlignment === 'start') {
-        align = `${tooltipPosition}-left`;
+        align = `${tooltipPosition}-start`;
       }
     }
     if (tooltipPosition === 'right' || tooltipPosition === 'left') {

package/lib/components/Checkbox/Checkbox.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';
 type ExcludedAttributes = 'id' | 'onChange' | 'onClick' | 'type';
 export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes> {
     /**
@@ -16,7 +15,7 @@ export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
      * Provide a label to provide a description of the Checkbox input that you are
      * exposing to the user
      */
-    labelText: NonNullable<ReactNodeLike>;
+    labelText: NonNullable<ReactNode>;
     /**
      * Specify whether the underlying input should be checked by default
      */
@@ -28,7 +27,7 @@ export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
     /**
      * Provide text for the form group for additional help
      */
-    helperText?: React.ReactNode;
+    helperText?: ReactNode;
     /**
      * Specify whether the label should be hidden, or not
      */
@@ -44,11 +43,11 @@ export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
     /**
      * Provide the text that is displayed when the Checkbox is in an invalid state
      */
-    invalidText?: React.ReactNode;
+    invalidText?: ReactNode;
     /**
      * **Experimental**: Provide a `Slug` component to be rendered inside the `Checkbox` component
      */
-    slug?: ReactNodeLike;
+    slug?: ReactNode;
     /**
      * Specify whether the Checkbox is currently invalid
      */
@@ -56,7 +55,7 @@ export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
     /**
      * Provide the text that is displayed when the Checkbox is in an invalid state
      */
-    warnText?: React.ReactNode;
+    warnText?: ReactNode;
     /**
      * Provide an optional handler that is called when the internal state of
      * Checkbox changes. This handler is called with event and state info.

package/lib/components/ComboBox/ComboBox.d.ts

@@ -4,9 +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 Downshift from 'downshift';
-import { ReactNodeLike } from 'prop-types';
-import { type ComponentProps, type ReactNode, type ComponentType, type ReactElement, type RefAttributes, type PropsWithChildren, type PropsWithRef, type InputHTMLAttributes, type MouseEvent } from 'react';
+import { UseComboboxProps } from 'downshift';
+import { type ReactNode, type ComponentType, type ReactElement, type RefAttributes, type PropsWithChildren, type PropsWithRef, type InputHTMLAttributes, type MouseEvent } from 'react';
 import { ListBoxSize } from '../ListBox';
 type ExcludedAttributes = 'id' | 'onChange' | 'onClick' | 'type' | 'size';
 interface OnChangeData<ItemType> {
@@ -45,7 +44,7 @@ export interface ComboBoxProps<ItemType> extends Omit<InputHTMLAttributes<HTMLIn
     /**
      * Additional props passed to Downshift
      */
-    downshiftProps?: ComponentProps<typeof Downshift<ItemType>>;
+    downshiftProps?: Partial<UseComboboxProps<ItemType>>;
     /**
      * Provide helper text that is used alongside the control label for
      * additional help
@@ -139,7 +138,7 @@ export interface ComboBoxProps<ItemType> extends Omit<InputHTMLAttributes<HTMLIn
     /**
      * **Experimental**: Provide a `Slug` component to be rendered inside the `ComboBox` component
      */
-    slug?: ReactNodeLike;
+    slug?: ReactNode;
     /**
      * Provide text to be used in a `<label>` element that is tied to the
      * combobox via ARIA attributes.