@carbon/react 1.68.0 → 1.69.0

package/README.md

@@ -135,9 +135,9 @@ Licensed under the [Apache 2.0 License](/LICENSE).
 
 ## <picture><source height="20" width="20" media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-dark.svg"><source height="20" width="20" media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-light.svg"><img height="20" width="20" alt="IBM Telemetry" src="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-light.svg"></picture> IBM Telemetry
 
-This package uses IBM Telemetry to collect metrics data. By installing this
-package as a dependency you are agreeing to telemetry collection. To opt out,
-see
+This package uses IBM Telemetry to collect de-identified and anonymized metrics
+data. By installing this package as a dependency you are agreeing to telemetry
+collection. To opt out, see
 [Opting out of IBM Telemetry data collection](https://github.com/ibm-telemetry/telemetry-js/tree/main#opting-out-of-ibm-telemetry-data-collection).
 For more information on the data being collected, please see the
 [IBM Telemetry documentation](https://github.com/ibm-telemetry/telemetry-js/tree/main#ibm-telemetry-collection-basics).

package/es/components/Accordion/AccordionItem.js

@@ -108,7 +108,6 @@ function AccordionItem(_ref) {
     className: `${prefix}--accordion__title`
   }, title)), /*#__PURE__*/React__default.createElement("div", {
     ref: content,
-    hidden: !isOpen,
     className: `${prefix}--accordion__wrapper`,
     onTransitionEnd: onAnimationEnd
   }, /*#__PURE__*/React__default.createElement("div", {

package/es/components/Button/Button.js

@@ -26,6 +26,7 @@ const Button = /*#__PURE__*/React__default.forwardRef(function Button(props, ref
   const tooltipRef = useRef(null);
   const {
     as,
+    autoAlign = false,
     children,
     hasIconOnly = false,
     iconDescription,
@@ -84,6 +85,7 @@ const Button = /*#__PURE__*/React__default.forwardRef(function Button(props, ref
       onMouseLeave: onMouseLeave,
       onFocus: onFocus,
       onBlur: onBlur,
+      autoAlign: autoAlign,
       onClick: composeEventHandlers([onClick, handleClick]),
       renderIcon: iconOnlyImage ? null : ButtonImageElement // avoid doubling the icon.
     }), iconOnlyImage ?? children);
@@ -96,6 +98,10 @@ Button.propTypes = {
    * Make sure to apply all props to the root node and render children appropriately
    */
   as: PropTypes.oneOfType([PropTypes.func, PropTypes.string, PropTypes.elementType]),
+  /**
+   * **Experimental**: Will attempt to automatically align the tooltip
+   */
+  autoAlign: PropTypes.bool,
   /**
    * Specify the content of your Button
    */

package/es/components/Checkbox/Checkbox.js

@@ -81,7 +81,7 @@ const Checkbox = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
       }
       if (typeof ref === 'function') {
         ref(el);
-      } else if (ref && Object(ref) === ref) {
+      } else if (ref && 'current' in ref) {
         ref.current = el;
       }
     }

package/es/components/CheckboxGroup/CheckboxGroup.js

@@ -126,6 +126,5 @@ CheckboxGroup.propTypes = {
    */
   warnText: PropTypes.node
 };
-var CheckboxGroup$1 = CheckboxGroup;
 
-export { CheckboxGroup$1 as default };
+export { CheckboxGroup as default };

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

@@ -0,0 +1,10 @@
+/**
+ * Copyright IBM Corp. 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 CheckboxGroup from './CheckboxGroup';
+import { type CheckboxGroupProps, type CustomType } from './CheckboxGroup';
+export default CheckboxGroup;
+export { CheckboxGroup, type CheckboxGroupProps, type CustomType };

package/es/components/ComboBox/ComboBox.js

@@ -9,7 +9,7 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import cx from 'classnames';
 import { useCombobox } from 'downshift';
 import PropTypes from 'prop-types';
-import React__default, { forwardRef, useState, useRef, useEffect, useContext, useCallback, useMemo } from 'react';
+import React__default, { forwardRef, useRef, useEffect, useState, useContext, useCallback, useMemo } from 'react';
 import '../Text/index.js';
 import { WarningFilled, WarningAltFilled, Checkmark } from '@carbon/icons-react';
 import ListBox from '../ListBox/index.js';
@@ -23,6 +23,7 @@ import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 import { useFloating, flip, autoUpdate } from '@floating-ui/react';
 import { hide } from '../../node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs.js';
+import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { Text } from '../Text/Text.js';
 import { match } from '../../internal/keyboard/match.js';
 import { ListBoxSize } from '../ListBox/ListBoxPropTypes.js';
@@ -109,7 +110,6 @@ const findHighlightedIndex = (_ref3, inputValue) => {
  */
 
 const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
-  const [cursorPosition, setCursorPosition] = useState(0);
   const prevInputLengthRef = useRef(0);
   const inputRef = useRef(null);
   const {
@@ -147,19 +147,20 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
     slug,
     ...rest
   } = props;
+  const enableFloatingStyles = useFeatureFlag('enable-v12-dynamic-floating-styles') || autoAlign;
   const {
     refs,
     floatingStyles,
     middlewareData
-  } = useFloating(autoAlign ? {
+  } = useFloating(enableFloatingStyles ? {
     placement: direction,
     strategy: 'fixed',
-    middleware: [flip(), hide()],
+    middleware: autoAlign ? [flip(), hide()] : undefined,
     whileElementsMounted: autoUpdate
   } : {});
   const parentWidth = refs?.reference?.current?.clientWidth;
   useEffect(() => {
-    if (autoAlign) {
+    if (enableFloatingStyles) {
       const updatedFloatingStyles = {
         ...floatingStyles,
         visibility: middlewareData.hide?.referenceHidden ? 'hidden' : 'visible'
@@ -173,7 +174,7 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
         refs.floating.current.style.width = parentWidth + 'px';
       }
     }
-  }, [autoAlign, floatingStyles, refs.floating, parentWidth]);
+  }, [enableFloatingStyles, floatingStyles, refs.floating, parentWidth]);
   const [inputValue, setInputValue] = useState(getInputValue({
     initialSelectedItem,
     inputValue: '',
@@ -367,7 +368,7 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
     [`${prefix}--list-box--up`]: direction === 'top',
     [`${prefix}--combo-box--warning`]: showWarning,
     [`${prefix}--combo-box--readonly`]: readOnly,
-    [`${prefix}--autoalign`]: autoAlign
+    [`${prefix}--autoalign`]: enableFloatingStyles
   });
   const titleClasses = cx(`${prefix}--label`, {
     [`${prefix}--label--disabled`]: disabled
@@ -437,7 +438,6 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
         });
       }
       setHighlightedIndex(indexToHighlight(normalizedInput));
-      setCursorPosition(inputValue === null ? 0 : normalizedInput.length);
     },
     onSelectedItemChange(_ref5) {
       let {
@@ -486,11 +486,6 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
       };
     }
   }, [closeMenu, openMenu, reset, selectItem, setHighlightedIndex, downshiftSetInputValue, toggleMenu]);
-  useEffect(() => {
-    if (inputRef.current) {
-      inputRef.current.setSelectionRange(cursorPosition, cursorPosition);
-    }
-  }, [inputValue, cursorPosition]);
   const buttonProps = getToggleButtonProps({
     disabled: disabled || readOnly,
     onClick: handleToggleClick(isOpen),
@@ -534,9 +529,8 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
 
   // Memoize the value of getMenuProps to avoid an infinite loop
   const menuProps = useMemo(() => getMenuProps({
-    'aria-label': deprecatedAriaLabel || ariaLabel,
-    ref: autoAlign ? refs.setFloating : null
-  }), [autoAlign, deprecatedAriaLabel, ariaLabel, getMenuProps, refs.setFloating]);
+    ref: enableFloatingStyles ? refs.setFloating : null
+  }), [enableFloatingStyles, deprecatedAriaLabel, ariaLabel, getMenuProps, refs.setFloating]);
   useEffect(() => {
     if (textInput.current) {
       if (inputRef.current && typeaheadText) {
@@ -564,7 +558,7 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
     light: light,
     size: size,
     warn: warn,
-    ref: autoAlign ? refs.setReference : null,
+    ref: enableFloatingStyles ? refs.setReference : null,
     warnText: warnText,
     warnTextId: warnTextId
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -577,11 +571,13 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
     "aria-haspopup": "listbox",
     title: textInput?.current?.value
   }, getInputProps({
+    'aria-label': titleText ? undefined : deprecatedAriaLabel || ariaLabel,
     'aria-controls': isOpen ? undefined : menuProps.id,
     placeholder,
     value: inputValue,
     onChange: e => {
       const newValue = e.target.value;
+      setInputValue(newValue);
       downshiftSetInputValue(newValue);
     },
     ref: mergeRefs(textInput, ref, inputRef),
@@ -638,7 +634,6 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
         if (matchingItem) {
           const newValue = itemToString(matchingItem);
           downshiftSetInputValue(newValue);
-          setCursorPosition(newValue.length);
           selectItem(matchingItem);
         }
       }

package/es/components/ComboButton/index.js

@@ -20,6 +20,7 @@ import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { flip, size, useFloating, autoUpdate } from '@floating-ui/react';
 import { hide } from '../../node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs.js';
+import { useFeatureFlag } from '../FeatureFlags/index.js';
 import mergeRefs from '../../tools/mergeRefs.js';
 
 var _ChevronDown;
@@ -47,12 +48,18 @@ const ComboButton = /*#__PURE__*/React__default.forwardRef(function ComboButton(
     translateWithId: t = defaultTranslateWithId,
     ...rest
   } = _ref;
+  // feature flag utilized to separate out only the dynamic styles from @floating-ui
+  // flag is turned on when collision detection (ie. flip, hide) logic is not desired
+  const enableOnlyFloatingStyles = useFeatureFlag('enable-v12-dynamic-floating-styles');
   const id = useId('combobutton');
   const prefix = usePrefix();
   const containerRef = useRef(null);
-  const middlewares = [flip({
-    crossAxis: false
-  }), hide()];
+  let middlewares = [];
+  if (!enableOnlyFloatingStyles) {
+    middlewares = [flip({
+      crossAxis: false
+    }), hide()];
+  }
   if (menuAlignment === 'bottom' || menuAlignment === 'top') {
     middlewares.push(size({
       apply(_ref2) {

package/es/components/DataTable/TableCell.d.ts

@@ -28,8 +28,5 @@ interface TableCellProps extends ReactAttr<HTMLTableCellElement> {
      */
     headers?: string;
 }
-declare const TableCell: {
-    ({ children, className, hasSlugHeader, colSpan, ...rest }: TableCellProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare const TableCell: React.ForwardRefExoticComponent<TableCellProps & React.RefAttributes<HTMLTableCellElement>>;
 export default TableCell;

package/es/components/DataTable/TableCell.js

@@ -10,7 +10,7 @@ import React__default from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-const TableCell = _ref => {
+const TableCell = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   let {
     children,
     className,
@@ -24,9 +24,10 @@ const TableCell = _ref => {
   });
   return /*#__PURE__*/React__default.createElement("td", _extends({
     className: tableCellClassNames ? tableCellClassNames : undefined,
+    ref: ref,
     colSpan: colSpan
   }, rest), children);
-};
+});
 TableCell.displayName = 'TableCell';
 
 export { TableCell as default };

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

@@ -0,0 +1,18 @@
+/**
+ * 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.
+ */
+declare function useDisclosure(id: any): {
+    buttonProps: {
+        'aria-controls': any;
+        'aria-expanded': boolean;
+        onClick(): void;
+    };
+    contentProps: {
+        id: any;
+    };
+    open: boolean;
+};
+export { useDisclosure };

package/es/components/Dropdown/Dropdown.js

@@ -20,6 +20,7 @@ import { FormContext } from '../FluidForm/FormContext.js';
 import { useId } from '../../internal/useId.js';
 import { useFloating, size, flip, autoUpdate } from '@floating-ui/react';
 import { hide } from '../../node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs.js';
+import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { ListBoxSize, ListBoxType } from '../ListBox/ListBoxPropTypes.js';
 
 const {
@@ -71,11 +72,12 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     slug,
     ...other
   } = _ref;
+  const enableFloatingStyles = useFeatureFlag('enable-v12-dynamic-floating-styles');
   const {
     refs,
     floatingStyles,
     middlewareData
-  } = useFloating(autoAlign ? {
+  } = useFloating(enableFloatingStyles || autoAlign ? {
     placement: direction,
     // The floating element is positioned relative to its nearest
     // containing block (usually the viewport). It will in many cases also
@@ -93,12 +95,14 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
           width: `${rects.reference.width}px`
         });
       }
-    }), flip(), hide()],
+    }), autoAlign && flip(), autoAlign && hide()],
     whileElementsMounted: autoUpdate
-  } : {} // When autoAlign is turned off, floating-ui will not be used
+  } : {}
+  // When autoAlign is turned off & the `enable-v12-dynamic-floating-styles` feature flag is not
+  // enabled, floating-ui will not be used
   );
   useEffect(() => {
-    if (autoAlign) {
+    if (enableFloatingStyles || autoAlign) {
       const updatedFloatingStyles = {
         ...floatingStyles,
         visibility: middlewareData.hide?.referenceHidden ? 'hidden' : 'visible'
@@ -237,9 +241,7 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
       // NOTE: does not prevent click
       evt.preventDefault();
       // focus on the element as per readonly input behavior
-      if (mergedRef.current !== undefined) {
-        mergedRef.current.focus();
-      }
+      mergedRef?.current?.focus();
     },
     onKeyDown: evt => {
       const selectAccessKeys = ['ArrowDown', 'ArrowUp', ' ', 'Enter'];
@@ -267,7 +269,7 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     }
   };
   const menuProps = useMemo(() => getMenuProps({
-    ref: autoAlign ? refs.setFloating : null
+    ref: enableFloatingStyles || autoAlign ? refs.setFloating : null
   }), [autoAlign, getMenuProps, refs.setFloating]);
 
   // Slug is always size `mini`
@@ -292,7 +294,7 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     warnText: warnText,
     light: light,
     isOpen: isOpen,
-    ref: autoAlign ? refs.setReference : null,
+    ref: enableFloatingStyles || autoAlign ? refs.setReference : null,
     id: id
   }, invalid && /*#__PURE__*/React__default.createElement(WarningFilled, {
     className: `${prefix}--list-box__invalid-icon`

package/es/components/FileUploader/FileUploader.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 PropTypes from 'prop-types';
-import React from 'react';
+import { ReactElement } from 'react';
 import { ReactAttr } from '../../types/common';
 export interface FileUploaderProps extends ReactAttr<HTMLSpanElement> {
     /**
@@ -74,93 +73,10 @@ export interface FileUploaderProps extends ReactAttr<HTMLSpanElement> {
      */
     size?: 'sm' | 'small' | 'md' | 'field' | 'lg';
 }
-export default class FileUploader extends React.Component<FileUploaderProps, {
-    filenames: string[];
-}> {
-    static propTypes: {
-        /**
-         * Specify the types of files that this input should be able to receive
-         */
-        accept: PropTypes.Requireable<(string | null | undefined)[]>;
-        /**
-         * Specify the type of the `<FileUploaderButton>`
-         */
-        buttonKind: PropTypes.Requireable<string>;
-        /**
-         * Provide the label text to be read by screen readers when interacting with
-         * the `<FileUploaderButton>`
-         */
-        buttonLabel: PropTypes.Requireable<string>;
-        /**
-         * Provide a custom className to be applied to the container node
-         */
-        className: PropTypes.Requireable<string>;
-        /**
-         * Specify whether file input is disabled
-         */
-        disabled: PropTypes.Requireable<boolean>;
-        /**
-         * Specify the status of the File Upload
-         */
-        filenameStatus: PropTypes.Validator<string>;
-        /**
-         * Provide a description for the complete/close icon that can be read by screen readers
-         */
-        iconDescription: PropTypes.Requireable<string>;
-        /**
-         * Specify the description text of this `<FileUploader>`
-         */
-        labelDescription: PropTypes.Requireable<string>;
-        /**
-         * Specify the title text of this `<FileUploader>`
-         */
-        labelTitle: PropTypes.Requireable<string>;
-        /**
-         * Specify if the component should accept multiple files to upload
-         */
-        multiple: PropTypes.Requireable<boolean>;
-        /**
-         * Provide a name for the underlying `<input>` node
-         */
-        name: PropTypes.Requireable<string>;
-        /**
-         * Provide an optional `onChange` hook that is called each time the input is
-         * changed
-         */
-        onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        /**
-         * Provide an optional `onClick` hook that is called each time the
-         * FileUploader is clicked
-         */
-        onClick: PropTypes.Requireable<(...args: any[]) => any>;
-        /**
-         * Provide an optional `onDelete` hook that is called when an uploaded item
-         * is removed
-         */
-        onDelete: PropTypes.Requireable<(...args: any[]) => any>;
-        /**
-         * Specify the size of the FileUploaderButton, from a list of available
-         * sizes.
-         */
-        size: PropTypes.Requireable<string>;
-    };
-    static contextType: React.Context<string>;
-    state: {
-        filenames: string[];
-    };
-    nodes: HTMLElement[];
-    uploaderButton: React.RefObject<HTMLLabelElement>;
-    static getDerivedStateFromProps({ filenameStatus }: {
-        filenameStatus: any;
-    }, state: any): {
-        filenameStatus: any;
-        prevFilenameStatus: any;
-    } | null;
-    handleChange: (evt: any) => void;
-    handleClick: (evt: any, { index, filenameStatus }: {
-        index: any;
-        filenameStatus: any;
-    }) => void;
-    clearFiles: () => void;
-    render(): import("react/jsx-runtime").JSX.Element;
-}
+declare const FileUploader: {
+    <ItemType>(props: FileUploaderProps): ReactElement;
+    propTypes?: any;
+    contextTypes?: any;
+    defaultProps?: any;
+};
+export default FileUploader;