@carbon/react 1.29.0 → 1.30.0-rc.0

package/es/components/Dropdown/Dropdown.js

@@ -14,7 +14,6 @@ import { WarningFilled, WarningAltFilled, Checkmark } from '@carbon/icons-react'
 import ListBox from '../ListBox/index.js';
 import mergeRefs from '../../tools/mergeRefs.js';
 import deprecate from '../../prop-types/deprecate.js';
-import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
@@ -22,23 +21,18 @@ import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
 import { ListBoxSize, ListBoxType } from '../ListBox/ListBoxPropTypes.js';
 
 const getInstanceId = setupGetInstanceId();
-
 const defaultItemToString = item => {
   if (typeof item === 'string') {
     return item;
   }
-
   if (typeof item === 'number') {
     return `${item}`;
   }
-
   if (item !== null && typeof item === 'object' && 'label' in item && typeof item['label'] === 'string') {
     return item['label'];
   }
-
   return '';
 };
-
 const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   let {
     className: containerClassName,
@@ -74,7 +68,8 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   const {
     isFluid
   } = useContext(FormContext);
-  const selectProps = { ...downshiftProps,
+  const selectProps = {
+    ...downshiftProps,
     items,
     itemToString,
     initialSelectedItem,
@@ -82,13 +77,13 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   };
   const {
     current: dropdownInstanceId
-  } = useRef(getInstanceId()); // only set selectedItem if the prop is defined. Setting if it is undefined
-  // will overwrite default selected items from useSelect
+  } = useRef(getInstanceId());
 
+  // only set selectedItem if the prop is defined. Setting if it is undefined
+  // will overwrite default selected items from useSelect
   if (controlledSelectedItem !== undefined) {
     selectProps.selectedItem = controlledSelectedItem;
   }
-
   const {
     isOpen,
     getToggleButtonProps,
@@ -100,9 +95,8 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   } = useSelect(selectProps);
   const inline = type === 'inline';
   const showWarning = !invalid && warn;
-  const enabled = useFeatureFlag('enable-v11-release');
   const [isFocused, setIsFocused] = useState(false);
-  const className = cx(`${prefix}--dropdown`, [enabled ? null : containerClassName], {
+  const className = cx(`${prefix}--dropdown`, {
     [`${prefix}--dropdown--invalid`]: invalid,
     [`${prefix}--dropdown--warning`]: showWarning,
     [`${prefix}--dropdown--open`]: isOpen,
@@ -120,7 +114,7 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   const helperClasses = cx(`${prefix}--form__helper-text`, {
     [`${prefix}--form__helper-text--disabled`]: disabled
   });
-  const wrapperClasses = cx(`${prefix}--dropdown__wrapper`, `${prefix}--list-box__wrapper`, [enabled ? containerClassName : null], {
+  const wrapperClasses = cx(`${prefix}--dropdown__wrapper`, `${prefix}--list-box__wrapper`, containerClassName, {
     [`${prefix}--dropdown__wrapper--inline`]: inline,
     [`${prefix}--list-box__wrapper--inline`]: inline,
     [`${prefix}--dropdown__wrapper--inline--invalid`]: inline && invalid,
@@ -128,52 +122,74 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     [`${prefix}--list-box__wrapper--fluid--invalid`]: isFluid && invalid,
     [`${prefix}--list-box__wrapper--fluid--focus`]: isFluid && isFocused && !isOpen
   });
-  const helperId = !helperText ? undefined : `dropdown-helper-text-${dropdownInstanceId}`; // needs to be Capitalized for react to render it correctly
+  const helperId = !helperText ? undefined : `dropdown-helper-text-${dropdownInstanceId}`;
 
+  // needs to be Capitalized for react to render it correctly
   const ItemToElement = itemToElement;
   const toggleButtonProps = getToggleButtonProps();
   const helper = helperText && !isFluid ? /*#__PURE__*/React__default.createElement("div", {
     id: helperId,
     className: helperClasses
   }, helperText) : null;
-
   function onSelectedItemChange(_ref2) {
     let {
       selectedItem
     } = _ref2;
     setIsFocused(false);
-
     if (onChange) {
       onChange({
         selectedItem: selectedItem ?? null
       });
     }
   }
-
   const menuItemOptionRefs = useRef(items.map(_ => /*#__PURE__*/React__default.createRef()));
-
   const handleFocus = evt => {
     setIsFocused(evt.type === 'focus' ? true : false);
   };
-
   const mergedRef = mergeRefs(toggleButtonProps.ref, ref);
+  const [currTimer, setCurrTimer] = useState();
+
+  // eslint-disable-next-line prefer-const
+  let [isTyping, setIsTyping] = useState(false);
   const readOnlyEventHandlers = readOnly ? {
     onClick: evt => {
       // NOTE: does not prevent click
-      evt.preventDefault(); // focus on the element as per readonly input behavior
-
+      evt.preventDefault();
+      // focus on the element as per readonly input behavior
       if (mergedRef.current !== undefined) {
         mergedRef.current.focus();
       }
     },
     onKeyDown: evt => {
-      const selectAccessKeys = ['ArrowDown', 'ArrowUp', ' ', 'Enter']; // This prevents the select from opening for the above keys
-
+      const selectAccessKeys = ['ArrowDown', 'ArrowUp', ' ', 'Enter'];
+      // This prevents the select from opening for the above keys
       if (selectAccessKeys.includes(evt.key)) {
         evt.preventDefault();
       }
     }
-  } : {};
+  } : {
+    onKeyDown: evt => {
+      console.log('typing should be false', isTyping);
+      if (evt.code !== 'Space' || !['ArrowDown', 'ArrowUp', ' ', 'Enter'].includes(evt.key)) {
+        setIsTyping(true);
+      }
+      if (isTyping && evt.code === 'Space' || !['ArrowDown', 'ArrowUp', ' ', 'Enter'].includes(evt.key)) {
+        console.log(evt.key);
+        if (evt.code === 'Space') {
+          evt.preventDefault();
+          return;
+        }
+        if (currTimer) {
+          clearTimeout(currTimer);
+        }
+        setCurrTimer(setTimeout(() => {
+          setIsTyping(false);
+        }, 3000));
+      }
+      toggleButtonProps.onKeyDown(evt);
+    }
+  };
+  const menuProps = getMenuProps();
   return /*#__PURE__*/React__default.createElement("div", _extends({
     className: wrapperClasses
   }, other), titleText && /*#__PURE__*/React__default.createElement("label", _extends({
@@ -196,7 +212,8 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   }), showWarning && /*#__PURE__*/React__default.createElement(WarningAltFilled, {
     className: `${prefix}--list-box__invalid-icon ${prefix}--list-box__invalid-icon--warning`
   }), /*#__PURE__*/React__default.createElement("button", _extends({
-    type: "button" // aria-expanded is already being passed through {...toggleButtonProps}
+    type: "button"
+    // aria-expanded is already being passed through {...toggleButtonProps}
     ,
     role: "combobox" // eslint-disable-line jsx-a11y/role-has-required-aria-props
     ,
@@ -214,7 +231,7 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   }, selectedItem ? renderSelectedItem ? renderSelectedItem(selectedItem) : itemToString(selectedItem) : label), /*#__PURE__*/React__default.createElement(ListBox.MenuIcon, {
     isOpen: isOpen,
     translateWithId: translateWithId
-  })), /*#__PURE__*/React__default.createElement(ListBox.Menu, getMenuProps(), isOpen && items.map((item, index) => {
+  })), /*#__PURE__*/React__default.createElement(ListBox.Menu, menuProps, isOpen && items.map((item, index) => {
     const isObject = item !== null && typeof item === 'object';
     const disabled = isObject && 'disabled' in item && item.disabled === true;
     const itemProps = getItemProps({
@@ -245,143 +262,117 @@ Dropdown.propTypes = {
    * Specify a label to be read by screen readers on the container node
    */
   ['aria-label']: PropTypes.string,
-
   /**
    * Deprecated, please use `aria-label` instead.
    * Specify a label to be read by screen readers on the container note.
    */
   ariaLabel: deprecate(PropTypes.string, 'This prop syntax has been deprecated. Please use the new `aria-label`.'),
-
   /**
    * Provide a custom className to be applied on the bx--dropdown node
    */
   className: PropTypes.string,
-
   /**
    * Specify the direction of the dropdown. Can be either top or bottom.
    */
   direction: PropTypes.oneOf(['top', 'bottom']),
-
   /**
    * Disable the control
    */
   disabled: PropTypes.bool,
-
   /**
    * Additional props passed to Downshift
    */
   downshiftProps: PropTypes.object,
-
   /**
    * Provide helper text that is used alongside the control label for
    * additional help
    */
   helperText: PropTypes.node,
-
   /**
    * Specify whether the title text should be hidden or not
    */
   hideLabel: PropTypes.bool,
-
   /**
    * Specify a custom `id`
    */
   id: PropTypes.string.isRequired,
-
   /**
    * Allow users to pass in an arbitrary item or a string (in case their items are an array of strings)
    * from their collection that are pre-selected
    */
   initialSelectedItem: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.number]),
-
   /**
    * Specify if the currently selected value is invalid.
    */
   invalid: PropTypes.bool,
-
   /**
    * Message which is displayed if the value is invalid.
    */
   invalidText: PropTypes.node,
-
   /**
    * Function to render items as custom components instead of strings.
    * Defaults to null and is overridden by a getter
    */
   itemToElement: PropTypes.func,
-
   /**
    * 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: PropTypes.func,
-
   /**
    * 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: PropTypes.array.isRequired,
-
   /**
    * Generic `label` that will be used as the textual representation of what
    * this field is for
    */
   label: PropTypes.node.isRequired,
-
   /**
    * `true` to use the light version.
    */
   light: deprecate(PropTypes.bool, 'The `light` prop for `Dropdown` has ' + 'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.'),
-
   /**
    * `onChange` is a utility for this controlled component to communicate to a
    * consuming component what kind of internal state changes are occurring.
    */
   onChange: PropTypes.func,
-
   /**
    * Whether or not the Dropdown is readonly
    */
   readOnly: PropTypes.bool,
-
   /**
    * An optional callback to render the currently selected item as a react element instead of only
    * as a string.
    */
   renderSelectedItem: PropTypes.func,
-
   /**
    * In the case you want to control the dropdown selection entirely.
    */
   selectedItem: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.number]),
-
   /**
    * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
    */
   size: ListBoxSize,
-
   /**
    * Provide the title text that will be read by a screen reader when
    * visiting this control
    */
   titleText: PropTypes.node.isRequired,
-
   /**
    * Callback function for translating ListBoxMenuIcon SVG title
    */
   translateWithId: PropTypes.func,
-
   /**
    * The dropdown type, `default` or `inline`
    */
   type: ListBoxType,
-
   /**
    * Specify whether the control is currently in warning state
    */
   warn: PropTypes.bool,
-
   /**
    * Provide the text that is displayed when the control is in warning state
    */

package/es/components/ErrorBoundary/ErrorBoundary.js

@@ -27,26 +27,21 @@ import { ErrorBoundaryContext } from './ErrorBoundaryContext.js';
  * Reference:
  * https://reactjs.org/docs/error-boundaries.html#introducing-error-boundaries
  */
-
 class ErrorBoundary extends React__default.Component {
   constructor() {
     super(...arguments);
-
     _defineProperty(this, "state", {
       hasError: false
     });
   }
-
   static getDerivedStateFromError() {
     return {
       hasError: true
     };
   }
-
   componentDidCatch(error, info) {
     this.context.log(error, info);
   }
-
   componentDidUpdate(prevProps) {
     if (prevProps.children !== this.props.children) {
       this.setState({
@@ -54,22 +49,17 @@ class ErrorBoundary extends React__default.Component {
       });
     }
   }
-
   render() {
     if (this.state.hasError) {
       return this.props.fallback;
     }
-
     return this.props.children;
   }
-
 }
-
 _defineProperty(ErrorBoundary, "propTypes", {
   children: PropTypes.node,
   fallback: PropTypes.node
 });
-
 _defineProperty(ErrorBoundary, "contextType", ErrorBoundaryContext);
 
 export { ErrorBoundary as default };

package/es/components/ErrorBoundary/ErrorBoundaryContext.js

@@ -11,7 +11,6 @@ const ErrorBoundaryContext = /*#__PURE__*/createContext({
   log(error, info) {
     console.log(info.componentStack);
   }
-
 });
 
 export { ErrorBoundaryContext };

package/es/components/ExpandableSearch/ExpandableSearch.js

@@ -25,31 +25,23 @@ function ExpandableSearch(_ref) {
   const [hasContent, setHasContent] = useState(false);
   const searchRef = useRef(null);
   const prefix = usePrefix();
-
   function handleFocus() {
     if (!expanded) {
       setExpanded(true);
     }
   }
-
   function handleBlur(evt) {
     const relatedTargetIsAllowed = evt.relatedTarget && evt.relatedTarget.classList.contains(`${prefix}--search-close`);
-
     if (expanded && !relatedTargetIsAllowed && !hasContent) {
       setExpanded(false);
     }
   }
-
   function handleChange(evt) {
     setHasContent(evt.target.value !== '');
   }
-
   function handleExpand() {
-    var _searchRef$current, _searchRef$current$fo;
-
-    (_searchRef$current = searchRef.current) === null || _searchRef$current === void 0 ? void 0 : (_searchRef$current$fo = _searchRef$current.focus) === null || _searchRef$current$fo === void 0 ? void 0 : _searchRef$current$fo.call(_searchRef$current);
+    searchRef.current?.focus?.();
   }
-
   const classes = cx(`${prefix}--search--expandable`, {
     [`${prefix}--search--expanded`]: expanded
   }, props.className);
@@ -62,7 +54,6 @@ function ExpandableSearch(_ref) {
     onExpand: composeEventHandlers([onExpand, handleExpand])
   }));
 }
-
 ExpandableSearch.propTypes = Search.propTypes;
 ExpandableSearch.displayName = 'ExpandableSearch';
 

package/es/components/FeatureFlags/index.js

@@ -13,14 +13,13 @@ import React__default, { useContext, useState, useRef, useEffect, createContext
  * Our FeatureFlagContext is used alongside the FeatureFlags component to enable
  * or disable feature flags in a given React tree
  */
-
 const FeatureFlagContext = /*#__PURE__*/createContext(FeatureFlags$1);
+
 /**
  * Supports an object of feature flag values with the `flags` prop, merging them
  * along with the current `FeatureFlagContext` to provide consumers to check if
  * a feature flag is enabled or disabled in a given React tree
  */
-
 function FeatureFlags(_ref) {
   let {
     children,
@@ -33,17 +32,16 @@ function FeatureFlags(_ref) {
     scope.mergeWithScope(parentScope);
     return scope;
   });
-
   if (parentScope !== prevParentScope) {
     const scope = createScope(flags);
     scope.mergeWithScope(parentScope);
     updateScope(scope);
     setPrevParentScope(parentScope);
-  } // We use a custom hook to detect if any of the keys or their values change
+  }
+
+  // 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 => {
     const scope = createScope(changedFlags);
     scope.mergeWithScope(parentScope);
@@ -53,15 +51,14 @@ function FeatureFlags(_ref) {
     value: scope
   }, children);
 }
-
 FeatureFlags.propTypes = {
   children: PropTypes.node,
-
   /**
    * Provide the feature flags to enabled or disabled in the current React tree
    */
   flags: PropTypes.objectOf(PropTypes.bool)
 };
+
 /**
  * This hook will store previous versions of the given `value` and compare the
  * current value to the previous one using the `compare` function. If the
@@ -72,16 +69,13 @@ FeatureFlags.propTypes = {
  * @param {Function} compare
  * @param {Function} callback
  */
-
 function useChangedValue(value, compare, callback) {
   const initialRender = useRef(false);
   const savedCallback = useRef(callback);
   const [prevValue, setPrevValue] = useState(value);
-
   if (!compare(prevValue, value)) {
     setPrevValue(value);
   }
-
   useEffect(() => {
     savedCallback.current = callback;
   });
@@ -95,28 +89,27 @@ function useChangedValue(value, compare, callback) {
     initialRender.current = true;
   }, []);
 }
+
 /**
  * Access whether a given flag is enabled or disabled in a given
  * FeatureFlagContext
  *
  * @returns {boolean}
  */
-
-
 function useFeatureFlag(flag) {
   const scope = useContext(FeatureFlagContext);
   return scope.enabled(flag);
 }
+
 /**
  * Access all feature flag information for the given FeatureFlagContext
  *
  * @returns {FeatureFlagScope}
  */
-
-
 function useFeatureFlags() {
   return useContext(FeatureFlagContext);
 }
+
 /**
  * Compare two objects and determine if they are equal. This is a shallow
  * comparison since the objects we are comparing are objects with boolean flags
@@ -126,25 +119,20 @@ function useFeatureFlags() {
  * @param {object} b
  * @returns {boolean}
  */
-
-
 function isEqual(a, b) {
   if (a === b) {
     return true;
   }
-
   for (const key of Object.keys(a)) {
     if (a[key] !== b[key]) {
       return false;
     }
   }
-
   for (const key of Object.keys(b)) {
     if (b[key] !== a[key]) {
       return false;
     }
   }
-
   return true;
 }
 

package/es/components/FileUploader/FileUploader.Skeleton.js

@@ -14,7 +14,6 @@ import ButtonSkeleton from '../Button/Button.Skeleton.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
 var _SkeletonText, _ButtonSkeleton;
-
 function FileUploaderSkeleton(_ref) {
   let {
     className,
@@ -31,7 +30,6 @@ function FileUploaderSkeleton(_ref) {
     className: `${prefix}--label-description`
   }), _ButtonSkeleton || (_ButtonSkeleton = /*#__PURE__*/React__default.createElement(ButtonSkeleton, null)));
 }
-
 FileUploaderSkeleton.propTypes = {
   /**
    * Specify an optional className to add.