@carbon/react 1.66.0 → 1.67.0-rc.0

package/es/components/ComboBox/ComboBox.js

@@ -22,7 +22,7 @@ import { usePrefix } from '../../internal/usePrefix.js';
 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/core/dist/floating-ui.core.mjs.js';
+import { hide } from '../../node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs.js';
 import { Text } from '../Text/Text.js';
 import { match } from '../../internal/keyboard/match.js';
 import { ListBoxSize } from '../ListBox/ListBoxPropTypes.js';
@@ -36,7 +36,8 @@ const {
   ItemMouseMove,
   InputKeyDownArrowUp,
   InputKeyDownArrowDown,
-  MenuMouseLeave
+  MenuMouseLeave,
+  FunctionSelectItem
 } = useCombobox.stateChangeTypes;
 const defaultItemToString = item => {
   if (typeof item === 'string') {
@@ -239,6 +240,14 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
           }
           return changes;
         }
+      case FunctionSelectItem:
+        if (onChange) {
+          onChange({
+            selectedItem: changes.selectedItem,
+            inputValue: changes.inputValue
+          });
+        }
+        return changes;
       case InputKeyDownEnter:
         if (allowCustomValue) {
           setInputValue(inputValue);

package/es/components/ComboButton/index.js

@@ -19,8 +19,8 @@ import { useAttachedMenu } from '../../internal/useAttachedMenu.js';
 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 mergeRefs from '../../tools/mergeRefs.js';
-import { hide } from '../../node_modules/@floating-ui/core/dist/floating-ui.core.mjs.js';
 
 var _ChevronDown;
 const defaultTranslations = {

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

@@ -22,7 +22,7 @@ type TableExpandHeaderPropsBase = {
      * Specify the string read by a voice reader when the expand trigger is
      * focused
      */
-    ['aria-label']: string;
+    ['aria-label']?: string;
     /**
      * @deprecated The enableExpando prop is being replaced by `enableToggle`
      */
@@ -79,7 +79,7 @@ declare const TableExpandHeader: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         className: PropTypes.Requireable<string>;
         /**
-         * The enableExpando prop is being replaced by enableToggle
+         * The enableExpando prop is being replaced by TableExpandHeader
          */
         enableExpando: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
         /**

package/es/components/DataTable/TableExpandHeader.js

@@ -69,7 +69,7 @@ TableExpandHeader.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   /**
-   * The enableExpando prop is being replaced by enableToggle
+   * The enableExpando prop is being replaced by TableExpandHeader
    */
   enableExpando: deprecate(PropTypes.bool, 'The `enableExpando` prop has been deprecated in favor of `enableToggle`. This prop will be removed in the next major release.'),
   /**

package/es/components/DatePicker/DatePicker.js

@@ -554,6 +554,7 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
     if (!calendarRef.current || !startInputField.current) return;
     const handleKeyDown = event => {
       if (match(event, Tab) && !event.shiftKey && document.activeElement === endInputField.current && calendarRef.current.isOpen) {
+        event.preventDefault();
         calendarRef.current.close();
         // Remove focus from endDate calendar input
         document.activeElement instanceof HTMLElement &&

package/es/components/Dropdown/Dropdown.js

@@ -19,7 +19,7 @@ import '../FluidForm/FluidForm.js';
 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/core/dist/floating-ui.core.mjs.js';
+import { hide } from '../../node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs.js';
 import { ListBoxSize, ListBoxType } from '../ListBox/ListBoxPropTypes.js';
 
 const {

package/es/components/FeatureFlags/index.js

@@ -8,6 +8,7 @@
 import { FeatureFlags as FeatureFlags$1, createScope } from '@carbon/feature-flags';
 import PropTypes from 'prop-types';
 import React__default, { createContext, useContext, useState, useRef, useEffect } from 'react';
+import deprecate from '../../prop-types/deprecate.js';
 
 /**
  * Our FeatureFlagContext is used alongside the FeatureFlags component to enable
@@ -23,17 +24,30 @@ const FeatureFlagContext = /*#__PURE__*/createContext(FeatureFlags$1);
 function FeatureFlags(_ref) {
   let {
     children,
-    flags = {}
+    flags = {},
+    enableV12TileDefaultIcons = false,
+    enableV12TileRadioIcons = false,
+    enableV12Overflowmenu = false,
+    enableTreeviewControllable = false,
+    enableExperimentalFocusWrapWithoutSentinels = false
   } = _ref;
   const parentScope = useContext(FeatureFlagContext);
   const [prevParentScope, setPrevParentScope] = useState(parentScope);
+  const combinedFlags = {
+    'enable-v12-tile-default-icons': enableV12TileDefaultIcons,
+    'enable-v12-tile-radio-icons': enableV12TileRadioIcons,
+    'enable-v12-overflowmenu': enableV12Overflowmenu,
+    'enable-treeview-controllable': enableTreeviewControllable,
+    'enable-experimental-focus-wrap-without-sentinels': enableExperimentalFocusWrapWithoutSentinels,
+    ...flags
+  };
   const [scope, updateScope] = useState(() => {
-    const scope = createScope(flags);
+    const scope = createScope(combinedFlags);
     scope.mergeWithScope(parentScope);
     return scope;
   });
   if (parentScope !== prevParentScope) {
-    const scope = createScope(flags);
+    const scope = createScope(combinedFlags);
     scope.mergeWithScope(parentScope);
     updateScope(scope);
     setPrevParentScope(parentScope);
@@ -42,7 +56,7 @@ function FeatureFlags(_ref) {
   // We use a custom hook to detect if any of the keys or their values change
   // for flags that are passed in. If they have changed, then we re-create the
   // FeatureFlagScope using the new flags
-  useChangedValue(flags, isEqual, changedFlags => {
+  useChangedValue(combinedFlags, isEqual, changedFlags => {
     const scope = createScope(changedFlags);
     scope.mergeWithScope(parentScope);
     updateScope(scope);
@@ -54,9 +68,14 @@ function FeatureFlags(_ref) {
 FeatureFlags.propTypes = {
   children: PropTypes.node,
   /**
-   * Provide the feature flags to enabled or disabled in the current React tree
+   * Provide the feature flags to enabled or disabled in the current Rea,ct tree
    */
-  flags: PropTypes.objectOf(PropTypes.bool)
+  flags: deprecate(PropTypes.objectOf(PropTypes.bool), 'The `flags` prop for `FeatureFlag` has ' + 'been deprecated. Please run the `featureflag-deprecate-flags-prop` codemod to migrate to individual boolean props.' + `npx @carbon/upgrade migrate featureflag-deprecate-flags-prop --write`),
+  enableV12TileDefaultIcons: PropTypes.bool,
+  enableV12TileRadioIcons: PropTypes.bool,
+  enableV12Overflowmenu: PropTypes.bool,
+  enableTreeviewControllable: PropTypes.bool,
+  enableExperimentalFocusWrapWithoutSentinels: PropTypes.bool
 };
 
 /**
@@ -98,7 +117,8 @@ function useChangedValue(value, compare, callback) {
  */
 function useFeatureFlag(flag) {
   const scope = useContext(FeatureFlagContext);
-  return scope.enabled(flag);
+  //updated to return false for undefined flags
+  return scope.enabled(flag) ?? false;
 }
 
 /**

package/es/components/FluidNumberInput/FluidNumberInput.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 FluidNumberInputSkeletonProps {
+    /**
+     * Specify an optional className to be applied to the outer FluidForm wrapper
+     */
+    className?: string;
+}
+declare const FluidNumberInputSkeleton: React.FC<FluidNumberInputSkeletonProps>;
+export default FluidNumberInputSkeleton;

package/es/components/FluidNumberInput/FluidNumberInput.d.ts

@@ -0,0 +1,95 @@
+/**
+ * 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 FluidNumberInputProps {
+    /**
+     * `true` to allow empty string.
+     */
+    allowEmpty?: boolean;
+    /**
+     * Specify an optional className to be applied to the wrapper node
+     */
+    className?: string;
+    /**
+     * Optional starting value for uncontrolled state
+     */
+    defaultValue?: number | string;
+    /**
+     * Specify if the wheel functionality for the input should be disabled, or not
+     */
+    disableWheel?: boolean;
+    /**
+     * Specify if the control should be disabled, or not
+     */
+    disabled?: boolean;
+    /**
+     * Provide a description for up/down icons that can be read by screen readers
+     */
+    iconDescription?: string;
+    /**
+     * Specify a custom `id` for the input
+     */
+    id: string;
+    /**
+     * Specify if the currently value is invalid.
+     */
+    invalid?: boolean;
+    /**
+     * Message which is displayed if the value is invalid.
+     */
+    invalidText?: React.ReactNode;
+    /**
+     * Generic `label` that will be used as the textual representation of what
+     * this field is for
+     */
+    label?: React.ReactNode;
+    /**
+     * The maximum value.
+     */
+    max?: number;
+    /**
+     * The minimum value.
+     */
+    min?: number;
+    onChange?: (event: React.MouseEvent<HTMLButtonElement>, state: {
+        value: number | string;
+        direction: string;
+    }) => void;
+    /**
+     * Provide an optional function to be called when the up/down button is clicked
+     */
+    onClick?: (event: React.MouseEvent<HTMLElement>, state?: {
+        value: number | string;
+        direction: string;
+    }) => void;
+    /**
+     * Provide an optional function to be called when a key is pressed in the number input
+     */
+    onKeyUp?: React.KeyboardEventHandler<HTMLInputElement>;
+    /**
+     * Specify how much the values should increase/decrease upon clicking on up/down button
+     */
+    step?: number;
+    /**
+     * Provide custom text for the component for each translation id
+     */
+    translateWithId?: (id: string) => string;
+    /**
+     * Specify the value of the input
+     */
+    value?: number | string;
+    /**
+     * 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 FluidNumberInput: React.FC<FluidNumberInputProps>;
+export default FluidNumberInput;

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

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

package/es/components/FluidSearch/FluidSearch.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 FluidSearchSkeletonProps {
+    /**
+     * Specify an optional className to be applied to the outer FluidForm wrapper
+     */
+    className?: string;
+}
+declare const FluidSearchSkeleton: React.FC<FluidSearchSkeletonProps>;
+export default FluidSearchSkeleton;

package/es/components/FluidSearch/FluidSearch.Skeleton.js

@@ -12,7 +12,7 @@ import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 
-function FluidSearchSkeleton(_ref) {
+const FluidSearchSkeleton = _ref => {
   let {
     className,
     ...other
@@ -29,7 +29,7 @@ function FluidSearchSkeleton(_ref) {
   }), /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--skeleton ${prefix}--text-input`
   })));
-}
+};
 FluidSearchSkeleton.propTypes = {
   /**
    * Specify an optional className to be applied to the outer FluidForm wrapper

package/es/components/FluidSearch/FluidSearch.d.ts

@@ -0,0 +1,73 @@
+/**
+ * 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 FluidSearchProps {
+    /**
+     * Specify an optional value for the `autocomplete` property on the underlying
+     * `<input>`, defaults to "off"
+     */
+    autoComplete?: string;
+    /**
+     * Specify an optional className to be applied to the container node
+     */
+    className?: string;
+    /**
+     * Specify a label to be read by screen readers on the "close" button
+     */
+    closeButtonLabelText?: string;
+    /**
+     * Optionally provide the default value of the `<input>`
+     */
+    defaultValue?: string | number;
+    /**
+     * Specify whether the `<input>` should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * Specify a custom `id` for the input
+     */
+    id?: string;
+    /**
+     * Provide the label text for the Search icon
+     */
+    labelText: React.ReactNode;
+    /**
+     * Optional callback called when the search value changes.
+     */
+    onChange?(e: {
+        target: HTMLInputElement;
+        type: 'change';
+    }): void;
+    /**
+     * Optional callback called when the search value is cleared.
+     */
+    onClear?: () => void;
+    /**
+     * Provide a handler that is invoked on the key down event for the input
+     */
+    onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
+    /**
+     * Provide an optional placeholder text for the Search.
+     * Note: if the label and placeholder differ,
+     * VoiceOver on Mac will read both
+     */
+    placeholder?: string;
+    /**
+     * Specify the role for the underlying `<input>`, defaults to `searchbox`
+     */
+    role?: string;
+    /**
+     * Optional prop to specify the type of the `<input>`
+     */
+    type?: string;
+    /**
+     * Specify the value of the `<input>`
+     */
+    value?: string | number;
+}
+declare const FluidSearch: React.FC<FluidSearchProps>;
+export default FluidSearch;

package/es/components/FluidSearch/FluidSearch.js

@@ -91,6 +91,5 @@ FluidSearch.propTypes = {
    */
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 };
-var FluidSearch$1 = FluidSearch;
 
-export { FluidSearch$1 as default };
+export { FluidSearch as default };

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

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

package/es/components/FluidSelect/FluidSelect.Skeleton.d.ts

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

package/es/components/FluidSelect/FluidSelect.Skeleton.js

@@ -34,6 +34,5 @@ FluidSelectSkeleton.propTypes = {
    */
   className: PropTypes.string
 };
-var FluidSelectSkeleton$1 = FluidSelectSkeleton;
 
-export { FluidSelectSkeleton$1 as default };
+export { FluidSelectSkeleton as default };

package/es/components/FluidSelect/FluidSelect.d.ts

@@ -0,0 +1,57 @@
+/**
+ * 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 FluidSelectProps {
+    /**
+     * Provide the contents of your Select
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify an optional className to be applied to the node containing the label and the select box
+     */
+    className?: string;
+    /**
+     * Optionally provide the default value of the `<select>`
+     */
+    defaultValue?: any;
+    /**
+     * Specify whether the control is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Specify a custom `id` for the `<select>`
+     */
+    id: string;
+    /**
+     * Specify if the currently value is invalid.
+     */
+    invalid?: boolean;
+    /**
+     * Message which is displayed if the value is invalid.
+     */
+    invalidText?: React.ReactNode;
+    /**
+     * Provide label text to be read by screen readers when interacting with the
+     * control
+     */
+    labelText?: React.ReactNode;
+    /**
+     * Provide an optional `onChange` hook that is called each time the value of
+     * the underlying `<input>` changes
+     */
+    onChange?: React.ChangeEventHandler<HTMLSelectElement>;
+    /**
+     * 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 FluidSelect: React.ForwardRefExoticComponent<FluidSelectProps & React.RefAttributes<HTMLSelectElement>>;
+export default FluidSelect;

package/es/components/FluidSelect/FluidSelect.js

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

package/es/components/FluidSelect/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 FluidSelect from './FluidSelect';
+import FluidSelectSkeletonProps from './FluidSelect.Skeleton';
+import FluidSelectProps from './FluidSelect.Skeleton';
+export type { FluidSelectSkeletonProps, FluidSelectProps };
+export default FluidSelect;
+export { FluidSelect };
+export { default as FluidSelectSkeleton } from './FluidSelect.Skeleton';

package/es/components/FluidSelect/index.js

@@ -7,3 +7,4 @@
 
 import FluidSelect from './FluidSelect.js';
 export { default as FluidSelect, default } from './FluidSelect.js';
+export { default as FluidSelectSkeleton } from './FluidSelect.Skeleton.js';

package/es/components/FluidTextInput/FluidPasswordInput.d.ts

@@ -0,0 +1,83 @@
+/**
+ * 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 FluidPasswordInputProps {
+    /**
+     * Specify an optional className to be applied to the outer FluidForm wrapper
+     */
+    className?: string;
+    /**
+     * Optionally provide the default value of the `<input>`
+     */
+    defaultValue?: string | number;
+    /**
+     * Specify whether the `<input>` should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * "Hide password" tooltip text on password visibility toggle
+     */
+    hidePasswordLabel?: string;
+    /**
+     * Specify a custom `id` for the `<input>`
+     */
+    id: string;
+    /**
+     * Specify whether the control is currently invalid
+     */
+    invalid?: boolean;
+    /**
+     * Provide the text that is displayed when the control is in an invalid state
+     */
+    invalidText?: React.ReactNode;
+    /**
+     * Specify whether the control is a password input
+     */
+    isPassword?: boolean;
+    /**
+     * Provide the text that will be read by a screen reader when visiting this
+     * control
+     */
+    labelText: React.ReactNode;
+    /**
+     * Optionally provide an `onChange` handler that is called whenever `<input>`
+     * is updated
+     */
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    /**
+     * Optionally provide an `onClick` handler that is called whenever the
+     * `<input>` is clicked
+     */
+    onClick?: React.MouseEventHandler<HTMLInputElement>;
+    /**
+     * Callback function that is called whenever the toggle password visibility
+     * button is clicked
+     */
+    onTogglePasswordVisibility?: React.MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Specify the placeholder attribute for the `<input>`
+     */
+    placeholder?: string;
+    /**
+     * "Show password" tooltip text on password visibility toggle
+     */
+    showPasswordLabel?: string;
+    /**
+     * Specify the value of the `<input>`
+     */
+    value?: string | number;
+    /**
+     * 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 FluidPasswordInput: React.FC<FluidPasswordInputProps>;
+export default FluidPasswordInput;