@carbon/react 1.29.1 → 1.30.0-rc.0

package/lib/components/Modal/Modal.js

@@ -75,35 +75,29 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
   const modalHeadingId = `${prefix}--modal-header__heading--${modalInstanceId}`;
   const modalBodyId = `${prefix}--modal-body--${modalInstanceId}`;
   const modalCloseButtonClass = `${prefix}--modal-close`;
-
   function isCloseButton(element) {
     return !onSecondarySubmit && element === secondaryButton.current || element.classList.contains(modalCloseButtonClass);
   }
-
   function handleKeyDown(evt) {
     if (open) {
       if (match.match(evt, keys.Escape)) {
         onRequestClose(evt);
       }
-
       if (match.match(evt, keys.Enter) && shouldSubmitOnEnter && !isCloseButton(evt.target)) {
         onRequestSubmit(evt);
       }
     }
   }
-
   function handleMousedown(evt) {
     if (innerModal.current && !innerModal.current.contains(evt.target) && !wrapFocus.elementOrParentIsFloatingMenu(evt.target, selectorsFloatingMenus) && !preventCloseOnClickOutside) {
       onRequestClose(evt);
     }
   }
-
   function handleBlur(_ref2) {
     let {
       target: oldActiveNode,
       relatedTarget: currentActiveNode
     } = _ref2;
-
     if (open && currentActiveNode && oldActiveNode) {
       const {
         current: bodyNode
@@ -124,7 +118,6 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
       });
     }
   }
-
   const onSecondaryButtonClick = onSecondarySubmit ? onSecondarySubmit : onRequestClose;
   const modalClasses = cx__default["default"](`${prefix}--modal`, {
     [`${prefix}--modal-tall`]: !passiveModal,
@@ -151,16 +144,13 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
     'aria-labelledby': getAriaLabelledBy
   } : {};
   const alertDialogProps = {};
-
   if (alert && passiveModal) {
     alertDialogProps.role = 'alert';
   }
-
   if (alert && !passiveModal) {
     alertDialogProps.role = 'alertdialog';
     alertDialogProps['aria-describedby'] = modalBodyId;
   }
-
   React.useEffect(() => {
     return () => {
       toggleClass["default"](document.body, `${prefix}--body--with-modal-open`, false);
@@ -173,22 +163,17 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
     const initialFocus = focusContainerElement => {
       const containerElement = focusContainerElement || innerModal.current;
       const primaryFocusElement = containerElement ? containerElement.querySelector(danger ? `.${prefix}--btn--secondary` : selectorPrimaryFocus) : null;
-
       if (primaryFocusElement) {
         return primaryFocusElement;
       }
-
       return button && button.current;
     };
-
     const focusButton = focusContainerElement => {
       const target = initialFocus(focusContainerElement);
-
       if (target) {
         target.focus();
       }
     };
-
     if (open) {
       focusButton(innerModal.current);
     }
@@ -276,115 +261,93 @@ Modal.propTypes = {
    * Should go hand in hand with the danger prop.
    */
   alert: PropTypes__default["default"].bool,
-
   /**
    * Required props for the accessibility label of the header
    */
   ['aria-label']: requiredIfGivenPropIsTruthy["default"]('hasScrollingContent', PropTypes__default["default"].string),
-
   /**
    * Provide the contents of your Modal
    */
   children: PropTypes__default["default"].node,
-
   /**
    * Specify an optional className to be applied to the modal root node
    */
   className: PropTypes__default["default"].string,
-
   /**
    * Specify an label for the close button of the modal; defaults to close
    */
   closeButtonLabel: PropTypes__default["default"].string,
-
   /**
    * Specify whether the Modal is for dangerous actions
    */
   danger: PropTypes__default["default"].bool,
-
   /**
    * Specify whether the modal contains scrolling content
    */
   hasScrollingContent: PropTypes__default["default"].bool,
-
   /**
    * Specify the DOM element ID of the top-level node.
    */
   id: PropTypes__default["default"].string,
-
   /**
    * Specify whether or not the Modal content should have any inner padding.
    */
   isFullWidth: PropTypes__default["default"].bool,
-
   /**
    * Specify a label to be read by screen readers on the modal root node
    */
   modalAriaLabel: PropTypes__default["default"].string,
-
   /**
    * Specify the content of the modal header title.
    */
   modalHeading: PropTypes__default["default"].node,
-
   /**
    * Specify the content of the modal header label.
    */
   modalLabel: PropTypes__default["default"].node,
-
   /**
    * Specify a handler for keypresses.
    */
   onKeyDown: PropTypes__default["default"].func,
-
   /**
    * Specify a handler for closing modal.
    * The handler should care of closing modal, e.g. changing `open` prop.
    */
   onRequestClose: PropTypes__default["default"].func,
-
   /**
    * Specify a handler for "submitting" modal.
    * The handler should care of closing modal, e.g. changing `open` prop, if necessary.
    */
   onRequestSubmit: PropTypes__default["default"].func,
-
   /**
    * Specify a handler for the secondary button.
    * Useful if separate handler from `onRequestClose` is desirable
    */
   onSecondarySubmit: PropTypes__default["default"].func,
-
   /**
    * Specify whether the Modal is currently open
    */
   open: PropTypes__default["default"].bool,
-
   /**
    * Specify whether the modal should be button-less
    */
   passiveModal: PropTypes__default["default"].bool,
-
   /**
    * Prevent closing on click outside of modal
    */
   preventCloseOnClickOutside: PropTypes__default["default"].bool,
-
   /**
    * Specify whether the Button should be disabled, or not
    */
   primaryButtonDisabled: PropTypes__default["default"].bool,
-
   /**
    * Specify the text for the primary button
    */
   primaryButtonText: PropTypes__default["default"].node,
-
   /**
    * Specify the text for the secondary button
    */
   secondaryButtonText: PropTypes__default["default"].node,
-
   /**
    * Specify an array of config objects for secondary buttons
    * (`Array<{
@@ -397,7 +360,6 @@ Modal.propTypes = {
       if (!Array.isArray(props.secondaryButtons) || props.secondaryButtons.length !== 2) {
         return new Error(`${propName} needs to be an array of two button config objects`);
       }
-
       const shape = {
         buttonText: PropTypes__default["default"].node,
         onClick: PropTypes__default["default"].func
@@ -406,27 +368,22 @@ Modal.propTypes = {
         PropTypes__default["default"].checkPropTypes(shape, secondaryButton, propName, componentName);
       });
     }
-
     return null;
   },
-
   /**
    * Specify a CSS selector that matches the DOM element that should
    * be focused when the Modal opens
    */
   selectorPrimaryFocus: PropTypes__default["default"].string,
-
   /**
    * Specify CSS selectors that match DOM elements working as floating menus.
    * Focusing on those elements won't trigger "focus-wrap" behavior
    */
   selectorsFloatingMenus: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
-
   /**
    * Specify if Enter key should be used as "submit" action
    */
   shouldSubmitOnEnter: PropTypes__default["default"].bool,
-
   /**
    * Specify the size variant.
    */

package/lib/components/ModalWrapper/ModalWrapper.js

@@ -26,24 +26,18 @@ let didWarnAboutDeprecation = false;
 class ModalWrapper extends React__default["default"].Component {
   constructor() {
     super(...arguments);
-
     _rollupPluginBabelHelpers.defineProperty(this, "triggerButton", /*#__PURE__*/React__default["default"].createRef());
-
     _rollupPluginBabelHelpers.defineProperty(this, "modal", /*#__PURE__*/React__default["default"].createRef());
-
     _rollupPluginBabelHelpers.defineProperty(this, "state", {
       isOpen: false
     });
-
     _rollupPluginBabelHelpers.defineProperty(this, "handleOpen", () => {
       this.setState({
         isOpen: true
       });
     });
-
     _rollupPluginBabelHelpers.defineProperty(this, "handleClose", evt => {
       const innerModal = this.modal.current.querySelector('div');
-
       if (this.modal.current && evt && !innerModal.contains(evt.target) && this.props.preventCloseOnClickOutside) {
         return;
       } else {
@@ -52,27 +46,22 @@ class ModalWrapper extends React__default["default"].Component {
         }, () => this.triggerButton.current.focus());
       }
     });
-
     _rollupPluginBabelHelpers.defineProperty(this, "handleOnRequestSubmit", () => {
       const {
         handleSubmit,
         shouldCloseAfterSubmit
       } = this.props;
-
       if (handleSubmit && shouldCloseAfterSubmit) {
         handleSubmit();
         this.handleClose();
       }
-
       handleSubmit();
     });
   }
-
   if(__DEV__) {
     process.env.NODE_ENV !== "production" ? warning.warning(didWarnAboutDeprecation, '`<ModalWrapper>` has been deprecated in favor of `<ComposedModal/>` and will be removed in the next major version, `@carbon/react@v2.x`') : void 0;
     didWarnAboutDeprecation = true;
   }
-
   render() {
     const {
       children,
@@ -92,7 +81,8 @@ class ModalWrapper extends React__default["default"].Component {
       // eslint-disable-line no-unused-vars
       ...other
     } = this.props;
-    const props = { ...other,
+    const props = {
+      ...other,
       selectorPrimaryFocus,
       open: this.state.isOpen,
       onRequestClose: this.handleClose,
@@ -118,9 +108,7 @@ class ModalWrapper extends React__default["default"].Component {
       ref: this.modal
     }, props), children));
   }
-
 }
-
 _rollupPluginBabelHelpers.defineProperty(ModalWrapper, "propTypes", {
   buttonTriggerClassName: PropTypes__default["default"].string,
   buttonTriggerText: PropTypes__default["default"].node,
@@ -146,7 +134,6 @@ _rollupPluginBabelHelpers.defineProperty(ModalWrapper, "propTypes", {
   triggerButtonKind: PropTypes__default["default"].oneOf(types.ButtonKinds),
   withHeader: PropTypes__default["default"].bool
 });
-
 _rollupPluginBabelHelpers.defineProperty(ModalWrapper, "defaultProps", {
   shouldCloseAfterSubmit: true,
   primaryButtonText: 'Save',

package/lib/components/MultiSelect/FilterableMultiSelect.js

@@ -18,14 +18,13 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var filter = require('../ComboBox/tools/filter.js');
 var MultiSelectPropTypes = require('./MultiSelectPropTypes.js');
-var index$1 = require('../ListBox/index.js');
+var index = require('../ListBox/index.js');
 var Selection = require('../../internal/Selection.js');
 var itemToString = require('./tools/itemToString.js');
 var mergeRefs = require('../../tools/mergeRefs.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var useId = require('../../internal/useId.js');
 var sorting = require('./tools/sorting.js');
-var index = require('../FeatureFlags/index.js');
 var usePrefix = require('../../internal/usePrefix.js');
 require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
@@ -93,17 +92,14 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
   const [currentSelectedItems, setCurrentSelectedItems] = React.useState(initialSelectedItems ?? []);
   const textInput = React.useRef();
   const filterableMultiSelectInstanceId = useId.useId();
-  const enabled = index.useFeatureFlag('enable-v11-release');
   const prefix = usePrefix.usePrefix();
-
   if (prevOpen !== open) {
     setIsOpen(open);
     setPrevOpen(open);
   }
-
   const inline = type === 'inline';
   const showWarning = !invalid && warn;
-  const wrapperClasses = cx__default["default"](`${prefix}--multi-select__wrapper`, `${prefix}--multi-select--filterable__wrapper`, `${prefix}--list-box__wrapper`, [enabled ? containerClassName : null], {
+  const wrapperClasses = cx__default["default"](`${prefix}--multi-select__wrapper`, `${prefix}--multi-select--filterable__wrapper`, `${prefix}--list-box__wrapper`, containerClassName, {
     [`${prefix}--multi-select__wrapper--inline`]: inline,
     [`${prefix}--list-box__wrapper--inline`]: inline,
     [`${prefix}--multi-select__wrapper--inline--invalid`]: inline && invalid,
@@ -139,28 +135,22 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
       setTopItems(currentSelectedItems);
     }
   }, [currentSelectedItems, isOpen, setTopItems]);
-
   function handleOnChange(changes) {
     setCurrentSelectedItems(changes.selectedItems);
-
     if (onChange) {
       onChange(changes);
     }
   }
-
   function handleOnMenuChange(forceIsOpen) {
     const nextIsOpen = forceIsOpen ?? !isOpen;
     setIsOpen(nextIsOpen);
-
     if (onMenuChange) {
       onMenuChange(nextIsOpen);
     }
   }
-
   function handleOnOuterClick() {
     handleOnMenuChange(false);
   }
-
   function handleOnStateChange(changes) {
     const {
       type
@@ -168,60 +158,48 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
     const {
       stateChangeTypes
     } = Downshift__default["default"];
-
     switch (type) {
       case stateChangeTypes.keyDownArrowDown:
       case stateChangeTypes.keyDownArrowUp:
       case stateChangeTypes.keyDownHome:
       case stateChangeTypes.keyDownEnd:
         setHighlightedIndex(changes.highlightedIndex !== undefined ? changes.highlightedIndex : null);
-
         if (stateChangeTypes.keyDownArrowDown === type && !isOpen) {
           handleOnMenuChange(true);
         }
-
         break;
-
       case stateChangeTypes.keyDownEscape:
         handleOnMenuChange(false);
         break;
     }
   }
-
   function handleOnInputValueChange(inputValue, _ref2) {
     let {
       type
     } = _ref2;
-
     if (onInputValueChange) {
       onInputValueChange(inputValue);
     }
-
     if (type !== Downshift__default["default"].stateChangeTypes.changeInput) {
       return;
     }
-
     if (Array.isArray(inputValue)) {
       clearInputValue();
     } else {
       setInputValue(inputValue);
     }
-
     if (inputValue && !isOpen) {
       handleOnMenuChange(true);
     } else if (!inputValue && isOpen) {
       handleOnMenuChange(false);
     }
   }
-
   function clearInputValue() {
     setInputValue('');
-
     if (textInput.current) {
       textInput.current.focus();
     }
   }
-
   return /*#__PURE__*/React__default["default"].createElement(Selection["default"], {
     disabled: disabled,
     onChange: handleOnChange,
@@ -262,7 +240,7 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
           inputValue,
           selectedItem
         } = _ref4;
-        const className = cx__default["default"](`${prefix}--multi-select`, `${prefix}--combo-box`, `${prefix}--multi-select--filterable`, [enabled ? null : containerClassName], {
+        const className = cx__default["default"](`${prefix}--multi-select`, `${prefix}--combo-box`, `${prefix}--multi-select--filterable`, {
           [`${prefix}--multi-select--invalid`]: invalid,
           [`${prefix}--multi-select--invalid--focused`]: invalid && inputFocused,
           [`${prefix}--multi-select--open`]: isOpen,
@@ -278,12 +256,10 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
           disabled,
           onClick: () => {
             handleOnMenuChange(!isOpen);
-
             if (textInput.current) {
               textInput.current.focus();
             }
           },
-
           // When we moved the "root node" of Downshift to the <input> for
           // ARIA 1.2 compliance, we unfortunately hit this branch for the
           // "mouseup" event that downshift listens to:
@@ -298,7 +274,6 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
               event.stopPropagation();
             }
           }
-
         });
         const inputProps = getInputProps({
           'aria-controls': isOpen ? menuId : null,
@@ -315,11 +290,9 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
             if (match.match(event, keys.Space)) {
               event.stopPropagation();
             }
-
             if (match.match(event, keys.Enter)) {
               handleOnMenuChange(true);
             }
-
             if (!disabled) {
               if (match.match(event, keys.Delete) || match.match(event, keys.Escape)) {
                 if (isOpen) {
@@ -333,15 +306,12 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
                 }
               }
             }
-
             if (match.match(event, keys.Tab)) {
               handleOnMenuChange(false);
             }
-
             if (match.match(event, keys.Home)) {
               event.target.setSelectionRange(0, 0);
             }
-
             if (match.match(event, keys.End)) {
               event.target.setSelectionRange(event.target.value.length, event.target.value.length);
             }
@@ -359,7 +329,6 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
         }, {
           suppressRefError: true
         });
-
         const handleFocus = evt => {
           if (evt.target.classList.contains(`${prefix}--tag__close-icon`) || evt.target.classList.contains(`${prefix}--list-box__selection`)) {
             setIsFocused(false);
@@ -367,12 +336,11 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
             setIsFocused(evt.type === 'focus' ? true : false);
           }
         };
-
         return /*#__PURE__*/React__default["default"].createElement("div", {
           className: wrapperClasses
         }, titleText ? /*#__PURE__*/React__default["default"].createElement("label", _rollupPluginBabelHelpers["extends"]({
           className: titleClasses
-        }, labelProps), titleText) : null, /*#__PURE__*/React__default["default"].createElement(index$1["default"], {
+        }, labelProps), titleText) : null, /*#__PURE__*/React__default["default"].createElement(index["default"], {
           "aria-label": deprecatedAriaLabel || ariaLabel,
           onFocus: isFluid ? handleFocus : null,
           onBlur: isFluid ? handleFocus : null,
@@ -391,7 +359,6 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
         }, selectedItem.length > 0 && /*#__PURE__*/React__default["default"].createElement(ListBoxSelection["default"], {
           clearSelection: () => {
             clearSelection();
-
             if (textInput.current) {
               textInput.current.focus();
             }
@@ -422,7 +389,7 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
         }), /*#__PURE__*/React__default["default"].createElement(ListBoxTrigger["default"], _rollupPluginBabelHelpers["extends"]({}, buttonProps, {
           isOpen: isOpen,
           translateWithId: translateWithId
-        }))), isOpen ? /*#__PURE__*/React__default["default"].createElement(index$1["default"].Menu, menuProps, sortItems(filterItems(items, {
+        }))), isOpen ? /*#__PURE__*/React__default["default"].createElement(index["default"].Menu, menuProps, sortItems(filterItems(items, {
           itemToString,
           inputValue
         }), {
@@ -434,18 +401,18 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
           itemToString,
           compareItems,
           locale
-        }).map((item, index) => {
+        }).map((item, index$1) => {
           const itemProps = getItemProps({
             item,
             disabled: item.disabled
           });
           const itemText = itemToString(item);
           const isChecked = selectedItem.filter(selected => isEqual__default["default"](selected, item)).length > 0;
-          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,
             "aria-label": itemText,
             isActive: isChecked,
-            isHighlighted: highlightedIndex === index,
+            isHighlighted: highlightedIndex === index$1,
             title: itemText
           }, itemProps), /*#__PURE__*/React__default["default"].createElement("div", {
             className: `${prefix}--checkbox-wrapper`
@@ -467,113 +434,93 @@ FilterableMultiSelect.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`.'),
-
   /**
    * Specify the direction of the multiselect 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"].shape(Downshift__default["default"].propTypes),
-
   /**
    * 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 arbitrary items from their collection that are
    * pre-selected
    */
   initialSelectedItems: PropTypes__default["default"].array,
-
   /**
    * Is the current selection invalid?
    */
   invalid: PropTypes__default["default"].bool,
-
   /**
    * If invalid, what is the error?
    */
   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,
-
   /**
    * `true` to use the light version.
    */
   light: deprecate["default"](PropTypes__default["default"].bool, 'The `light` prop for `FilterableMultiSelect` has ' + 'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.'),
-
   /**
    * Specify the locale of the control. Used for the default `compareItems`
    * used for sorting the list of items in the control.
    */
   locale: PropTypes__default["default"].string,
-
   /**
    * `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,
-
   /**
    * `onInputValueChange` is a utility for this controlled component to communicate to
    * the currently typed input.
    */
   onInputValueChange: PropTypes__default["default"].func,
-
   /**
    * `onMenuChange` is a utility for this controlled component to communicate to a
    * consuming component that the menu was opened(`true`)/closed(`false`).
    */
   onMenuChange: PropTypes__default["default"].func,
-
   /**
    * Initialize the component with an open(`true`)/closed(`false`) menu.
    */
   open: PropTypes__default["default"].bool,
-
   /**
    * Generic `placeholder` that will be used as the textual representation of
    * what this field is for
    */
   placeholder: PropTypes__default["default"].string,
-
   /**
    * Specify feedback (mode) of the selection.
    * `top`: selected item jumps to top
@@ -581,28 +528,23 @@ FilterableMultiSelect.propTypes = {
    * `top-after-reopen`: selected item jump to top after reopen dropdown
    */
   selectionFeedback: PropTypes__default["default"].oneOf(['top', 'fixed', 'top-after-reopen']),
-
   /**
    * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
    */
   size: ListBoxPropTypes.ListBoxSize,
   ...MultiSelectPropTypes.sortingPropTypes,
-
   /**
    * Callback function for translating ListBoxMenuIcon SVG title
    */
   translateWithId: PropTypes__default["default"].func,
-
   /**
    * Specify title to show title on hover
    */
   useTitleInItem: PropTypes__default["default"].bool,
-
   /**
    * 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
    */