@carbon/react 1.29.1 → 1.30.0

package/lib/components/Dropdown/Dropdown.js

@@ -15,10 +15,9 @@ var Downshift = require('downshift');
 var cx = require('classnames');
 var PropTypes = require('prop-types');
 var iconsReact = require('@carbon/icons-react');
-var index$1 = require('../ListBox/index.js');
+var index = require('../ListBox/index.js');
 var mergeRefs = require('../../tools/mergeRefs.js');
 var deprecate = require('../../prop-types/deprecate.js');
-var index = require('../FeatureFlags/index.js');
 var usePrefix = require('../../internal/usePrefix.js');
 require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
@@ -32,23 +31,18 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
 const getInstanceId = setupGetInstanceId["default"]();
-
 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["default"].forwardRef((_ref, ref) => {
   let {
     className: containerClassName,
@@ -84,7 +78,8 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
   const {
     isFluid
   } = React.useContext(FormContext.FormContext);
-  const selectProps = { ...downshiftProps,
+  const selectProps = {
+    ...downshiftProps,
     items,
     itemToString,
     initialSelectedItem,
@@ -92,13 +87,13 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
   };
   const {
     current: dropdownInstanceId
-  } = React.useRef(getInstanceId()); // only set selectedItem if the prop is defined. Setting if it is undefined
-  // will overwrite default selected items from useSelect
+  } = React.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,
@@ -110,9 +105,8 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
   } = Downshift.useSelect(selectProps);
   const inline = type === 'inline';
   const showWarning = !invalid && warn;
-  const enabled = index.useFeatureFlag('enable-v11-release');
   const [isFocused, setIsFocused] = React.useState(false);
-  const className = cx__default["default"](`${prefix}--dropdown`, [enabled ? null : containerClassName], {
+  const className = cx__default["default"](`${prefix}--dropdown`, {
     [`${prefix}--dropdown--invalid`]: invalid,
     [`${prefix}--dropdown--warning`]: showWarning,
     [`${prefix}--dropdown--open`]: isOpen,
@@ -130,7 +124,7 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
   const helperClasses = cx__default["default"](`${prefix}--form__helper-text`, {
     [`${prefix}--form__helper-text--disabled`]: disabled
   });
-  const wrapperClasses = cx__default["default"](`${prefix}--dropdown__wrapper`, `${prefix}--list-box__wrapper`, [enabled ? containerClassName : null], {
+  const wrapperClasses = cx__default["default"](`${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,
@@ -138,57 +132,79 @@ const Dropdown = /*#__PURE__*/React__default["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["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 = React.useRef(items.map(_ => /*#__PURE__*/React__default["default"].createRef()));
-
   const handleFocus = evt => {
     setIsFocused(evt.type === 'focus' ? true : false);
   };
-
   const mergedRef = mergeRefs["default"](toggleButtonProps.ref, ref);
+  const [currTimer, setCurrTimer] = React.useState();
+
+  // eslint-disable-next-line prefer-const
+  let [isTyping, setIsTyping] = React.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["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     className: wrapperClasses
   }, other), titleText && /*#__PURE__*/React__default["default"].createElement("label", _rollupPluginBabelHelpers["extends"]({
     className: titleClasses
-  }, getLabelProps()), titleText), /*#__PURE__*/React__default["default"].createElement(index$1["default"], {
+  }, getLabelProps()), titleText), /*#__PURE__*/React__default["default"].createElement(index["default"], {
     onFocus: handleFocus,
     onBlur: handleFocus,
     "aria-label": deprecatedAriaLabel || ariaLabel,
@@ -206,7 +222,8 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
   }), showWarning && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningAltFilled, {
     className: `${prefix}--list-box__invalid-icon ${prefix}--list-box__invalid-icon--warning`
   }), /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["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
     ,
@@ -221,25 +238,25 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     ref: mergedRef
   }), /*#__PURE__*/React__default["default"].createElement("span", {
     className: `${prefix}--list-box__label`
-  }, selectedItem ? renderSelectedItem ? renderSelectedItem(selectedItem) : itemToString(selectedItem) : label), /*#__PURE__*/React__default["default"].createElement(index$1["default"].MenuIcon, {
+  }, selectedItem ? renderSelectedItem ? renderSelectedItem(selectedItem) : itemToString(selectedItem) : label), /*#__PURE__*/React__default["default"].createElement(index["default"].MenuIcon, {
     isOpen: isOpen,
     translateWithId: translateWithId
-  })), /*#__PURE__*/React__default["default"].createElement(index$1["default"].Menu, getMenuProps(), isOpen && items.map((item, index) => {
+  })), /*#__PURE__*/React__default["default"].createElement(index["default"].Menu, menuProps, isOpen && items.map((item, index$1) => {
     const isObject = item !== null && typeof item === 'object';
     const disabled = isObject && 'disabled' in item && item.disabled === true;
     const itemProps = getItemProps({
       item,
-      index,
+      index: index$1,
       disabled
     });
     const title = isObject && 'text' in item && itemToElement ? item.text : itemToString(item);
-    return /*#__PURE__*/React__default["default"].createElement(index$1["default"].MenuItem, _rollupPluginBabelHelpers["extends"]({
+    return /*#__PURE__*/React__default["default"].createElement(index["default"].MenuItem, _rollupPluginBabelHelpers["extends"]({
       key: itemProps.id,
       isActive: selectedItem === item,
-      isHighlighted: highlightedIndex === index || selectedItem === item,
+      isHighlighted: highlightedIndex === index$1 || selectedItem === item,
       title: title,
       ref: {
-        menuItemOptionRef: menuItemOptionRefs.current[index]
+        menuItemOptionRef: menuItemOptionRefs.current[index$1]
       }
     }, itemProps), typeof item === 'object' && ItemToElement !== undefined && ItemToElement !== null ? /*#__PURE__*/React__default["default"].createElement(ItemToElement, _rollupPluginBabelHelpers["extends"]({
       key: itemProps.id
@@ -255,143 +272,117 @@ Dropdown.propTypes = {
    * Specify a label to be read by screen readers on the container node
    */
   ['aria-label']: PropTypes__default["default"].string,
-
   /**
    * Deprecated, please use `aria-label` instead.
    * Specify a label to be read by screen readers on the container note.
    */
   ariaLabel: deprecate["default"](PropTypes__default["default"].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__default["default"].string,
-
   /**
    * Specify the direction of the dropdown. Can be either top or bottom.
    */
   direction: PropTypes__default["default"].oneOf(['top', 'bottom']),
-
   /**
    * Disable the control
    */
   disabled: PropTypes__default["default"].bool,
-
   /**
    * Additional props passed to Downshift
    */
   downshiftProps: PropTypes__default["default"].object,
-
   /**
    * Provide helper text that is used alongside the control label for
    * additional help
    */
   helperText: PropTypes__default["default"].node,
-
   /**
    * Specify whether the title text should be hidden or not
    */
   hideLabel: PropTypes__default["default"].bool,
-
   /**
    * Specify a custom `id`
    */
   id: PropTypes__default["default"].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__default["default"].oneOfType([PropTypes__default["default"].object, PropTypes__default["default"].string, PropTypes__default["default"].number]),
-
   /**
    * Specify if the currently selected value is invalid.
    */
   invalid: PropTypes__default["default"].bool,
-
   /**
    * Message which is displayed if the value is invalid.
    */
   invalidText: PropTypes__default["default"].node,
-
   /**
    * Function to render items as custom components instead of strings.
    * Defaults to null and is overridden by a getter
    */
   itemToElement: PropTypes__default["default"].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__default["default"].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__default["default"].array.isRequired,
-
   /**
    * Generic `label` that will be used as the textual representation of what
    * this field is for
    */
   label: PropTypes__default["default"].node.isRequired,
-
   /**
    * `true` to use the light version.
    */
   light: deprecate["default"](PropTypes__default["default"].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__default["default"].func,
-
   /**
    * Whether or not the Dropdown is readonly
    */
   readOnly: PropTypes__default["default"].bool,
-
   /**
    * An optional callback to render the currently selected item as a react element instead of only
    * as a string.
    */
   renderSelectedItem: PropTypes__default["default"].func,
-
   /**
    * In the case you want to control the dropdown selection entirely.
    */
   selectedItem: PropTypes__default["default"].oneOfType([PropTypes__default["default"].object, PropTypes__default["default"].string, PropTypes__default["default"].number]),
-
   /**
    * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
    */
   size: ListBoxPropTypes.ListBoxSize,
-
   /**
    * Provide the title text that will be read by a screen reader when
    * visiting this control
    */
   titleText: PropTypes__default["default"].node.isRequired,
-
   /**
    * Callback function for translating ListBoxMenuIcon SVG title
    */
   translateWithId: PropTypes__default["default"].func,
-
   /**
    * The dropdown type, `default` or `inline`
    */
   type: ListBoxPropTypes.ListBoxType,
-
   /**
    * Specify whether the control is currently in warning state
    */
   warn: PropTypes__default["default"].bool,
-
   /**
    * Provide the text that is displayed when the control is in warning state
    */

package/lib/components/ErrorBoundary/ErrorBoundary.js

@@ -36,26 +36,21 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
  * Reference:
  * https://reactjs.org/docs/error-boundaries.html#introducing-error-boundaries
  */
-
 class ErrorBoundary extends React__default["default"].Component {
   constructor() {
     super(...arguments);
-
     _rollupPluginBabelHelpers.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({
@@ -63,22 +58,17 @@ class ErrorBoundary extends React__default["default"].Component {
       });
     }
   }
-
   render() {
     if (this.state.hasError) {
       return this.props.fallback;
     }
-
     return this.props.children;
   }
-
 }
-
 _rollupPluginBabelHelpers.defineProperty(ErrorBoundary, "propTypes", {
   children: PropTypes__default["default"].node,
   fallback: PropTypes__default["default"].node
 });
-
 _rollupPluginBabelHelpers.defineProperty(ErrorBoundary, "contextType", ErrorBoundaryContext.ErrorBoundaryContext);
 
 exports["default"] = ErrorBoundary;

package/lib/components/ErrorBoundary/ErrorBoundaryContext.js

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

package/lib/components/ExpandableSearch/ExpandableSearch.js

@@ -34,31 +34,23 @@ function ExpandableSearch(_ref) {
   const [hasContent, setHasContent] = React.useState(false);
   const searchRef = React.useRef(null);
   const prefix = usePrefix.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__default["default"](`${prefix}--search--expandable`, {
     [`${prefix}--search--expanded`]: expanded
   }, props.className);
@@ -71,7 +63,6 @@ function ExpandableSearch(_ref) {
     onExpand: events.composeEventHandlers([onExpand, handleExpand])
   }));
 }
-
 ExpandableSearch.propTypes = Search["default"].propTypes;
 ExpandableSearch.displayName = 'ExpandableSearch';
 

package/lib/components/FeatureFlags/index.js

@@ -22,14 +22,13 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  * Our FeatureFlagContext is used alongside the FeatureFlags component to enable
  * or disable feature flags in a given React tree
  */
-
 const FeatureFlagContext = /*#__PURE__*/React.createContext(FeatureFlags$1.FeatureFlags);
+
 /**
  * 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,
@@ -42,17 +41,16 @@ function FeatureFlags(_ref) {
     scope.mergeWithScope(parentScope);
     return scope;
   });
-
   if (parentScope !== prevParentScope) {
     const scope = FeatureFlags$1.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 = FeatureFlags$1.createScope(changedFlags);
     scope.mergeWithScope(parentScope);
@@ -62,15 +60,14 @@ function FeatureFlags(_ref) {
     value: scope
   }, children);
 }
-
 FeatureFlags.propTypes = {
   children: PropTypes__default["default"].node,
-
   /**
    * Provide the feature flags to enabled or disabled in the current React tree
    */
   flags: PropTypes__default["default"].objectOf(PropTypes__default["default"].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
@@ -81,16 +78,13 @@ FeatureFlags.propTypes = {
  * @param {Function} compare
  * @param {Function} callback
  */
-
 function useChangedValue(value, compare, callback) {
   const initialRender = React.useRef(false);
   const savedCallback = React.useRef(callback);
   const [prevValue, setPrevValue] = React.useState(value);
-
   if (!compare(prevValue, value)) {
     setPrevValue(value);
   }
-
   React.useEffect(() => {
     savedCallback.current = callback;
   });
@@ -104,28 +98,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 = React.useContext(FeatureFlagContext);
   return scope.enabled(flag);
 }
+
 /**
  * Access all feature flag information for the given FeatureFlagContext
  *
  * @returns {FeatureFlagScope}
  */
-
-
 function useFeatureFlags() {
   return React.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
@@ -135,25 +128,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/lib/components/FileUploader/FileUploader.Skeleton.js

@@ -24,7 +24,6 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _SkeletonText, _ButtonSkeleton;
-
 function FileUploaderSkeleton(_ref) {
   let {
     className,
@@ -41,7 +40,6 @@ function FileUploaderSkeleton(_ref) {
     className: `${prefix}--label-description`
   }), _ButtonSkeleton || (_ButtonSkeleton = /*#__PURE__*/React__default["default"].createElement(Button_Skeleton["default"], null)));
 }
-
 FileUploaderSkeleton.propTypes = {
   /**
    * Specify an optional className to add.