carbon-react 111.12.3 → 111.12.5

package/lib/components/select/filterable-select/filterable-select.component.js

@@ -4,22 +4,39 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+
 var _react = _interopRequireWildcard(require("react"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _invariant = _interopRequireDefault(require("invariant"));
+
 var _utils = require("../../../style/utils");
+
 var _selectTextbox = _interopRequireWildcard(require("../select-textbox/select-textbox.component"));
+
 var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid"));
+
 var _withFilter = _interopRequireDefault(require("../utils/with-filter.hoc"));
+
 var _select = _interopRequireDefault(require("../select.style"));
+
 var _selectList = _interopRequireDefault(require("../select-list/select-list.component"));
+
 var _isExpectedOption = _interopRequireDefault(require("../utils/is-expected-option"));
+
 var _isNavigationKey = _interopRequireDefault(require("../utils/is-navigation-key"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 const FilterableSelectList = (0, _withFilter.default)(_selectList.default);
+
 const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
   value,
   defaultValue,
@@ -71,8 +88,7 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
   const [filterText, setFilterText] = (0, _react.useState)("");
   const createCustomEvent = (0, _react.useCallback)(newValue => {
     const customEvent = {
-      target: {
-        ...(name && {
+      target: { ...(name && {
           name
         }),
         ...(id && {
@@ -92,30 +108,37 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
     setSelectedValue(previousValue => {
       const match = findElementWithMatchingText(newFilterText, children);
       const isFilterCleared = isDeleteEvent && newFilterText === "";
+
       if (!match || isFilterCleared) {
         setTextValue(newFilterText);
         triggerChange("");
         return "";
       }
+
       if (isDeleteEvent) {
         setTextValue(newFilterText);
         return match.props.value;
       }
+
       triggerChange(match.props.value);
+
       if (match.props.text.toLowerCase().startsWith(newFilterText.toLowerCase())) {
         setTextValue(match.props.text);
       } else {
         setTextValue(newFilterText);
       }
+
       if (isControlled.current) {
         return previousValue;
       }
+
       setHighlightedValue(match.props.value);
       return match.props.value;
     });
   }, [children, triggerChange]);
   const setMatchingText = (0, _react.useCallback)((newValue, isClosing) => {
     const matchingOption = _react.default.Children.toArray(children).find(child => (0, _isExpectedOption.default)(child, newValue));
+
     if (!matchingOption || matchingOption.props.text === undefined) {
       setTextValue(filterText || "");
     } else if (isClosing || matchingOption.props.text.toLowerCase().startsWith(filterText.toLowerCase())) {
@@ -134,6 +157,7 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
       if (previousFilterText.length === textValue.length - 1 && key === textValue.slice(-1)) {
         return textValue;
       }
+
       return previousFilterText;
     });
   }, [textValue]);
@@ -141,16 +165,20 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
     const {
       key
     } = event;
+
     if (onKeyDown) {
       onKeyDown(event);
     }
+
     if (readOnly) {
       return;
     }
+
     if (!event.defaultPrevented && (0, _isNavigationKey.default)(key)) {
       event.preventDefault();
       setOpen(true);
     }
+
     fillLastFilterCharacter(key);
   }, [fillLastFilterCharacter, onKeyDown, readOnly]);
   const valueToUse = isControlled.current ? value : selectedValue;
@@ -158,6 +186,7 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
     const notInContainer = containerRef.current && !containerRef.current.contains(event.target);
     const notInList = listboxRef.current && !listboxRef.current.contains(event.target);
     isMouseDownReported.current = false;
+
     if (notInContainer && notInList) {
       setMatchingText(valueToUse, true);
       setOpen(false);
@@ -168,11 +197,13 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
     const onChangeMissingMessage = "onChange prop required when using a controlled input element";
     !(isControlled.current === (value !== undefined)) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, modeSwitchedMessage) : (0, _invariant.default)(false) : void 0;
     !(!isControlled.current || isControlled.current && onChange) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, onChangeMissingMessage) : (0, _invariant.default)(false) : void 0;
+
     if (isControlled.current) {
       setSelectedValue(prevValue => {
         if (value && prevValue !== value) {
           setMatchingText(value);
         }
+
         return value;
       });
       setHighlightedValue(value);
@@ -180,13 +211,14 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
       if (textValue !== selectedValue) {
         setMatchingText(selectedValue);
       }
+
       if (highlightedValue !== selectedValue) {
         setHighlightedValue(selectedValue);
       }
-    }
-    // prevent value update on filter change
+    } // prevent value update on filter change
     // selectedValue and highlightedValue omitted from deps, only want uncontrolled change if onChange/children update
     // eslint-disable-next-line react-hooks/exhaustive-deps
+
   }, [value, onChange, children]);
   (0, _react.useEffect)(() => {
     if (!isOpen) {
@@ -203,9 +235,9 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
   (0, _react.useEffect)(() => {
     if (isControlled.current) {
       setMatchingText(value);
-    }
-    // update text value only when children are changing
+    } // update text value only when children are changing
     // eslint-disable-next-line react-hooks/exhaustive-deps
+
   }, [value, children]);
   (0, _react.useEffect)(() => {
     if (onFilterChange) {
@@ -222,6 +254,7 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
   (0, _react.useEffect)(() => {
     const textStartsWithFilter = textValue.toLowerCase().startsWith(filterText.toLowerCase());
     const isTextboxActive = !disabled && !readOnly;
+
     if (isTextboxActive && textboxRef && filterText.length && textValue.length > filterText.length && textStartsWithFilter) {
       textboxRef.selectionStart = filterText.length;
     }
@@ -233,18 +266,22 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
       value: newValue,
       selectionType
     } = optionData;
+
     if (selectionType === "tab") {
       setOpen(false);
       textboxRef.focus();
       return;
     }
+
     if (!isControlled.current) {
       setSelectedValue(newValue);
       setHighlightedValue(newValue);
     }
+
     setTextValue(text);
     triggerChange(newValue);
     setActiveDescendantId(selectedOptionId);
+
     if (selectionType !== "navigationKey") {
       setOpen(false);
       textboxRef.focus();
@@ -255,38 +292,49 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
     setOpen(false);
     setMatchingText(selectedValue, true);
   }, [selectedValue, setMatchingText]);
+
   function handleTextboxClick(event) {
     isMouseDownReported.current = false;
+
     if (onClick) {
       onClick(event);
     }
   }
+
   function handleDropdownIconClick(event) {
     isMouseDownReported.current = false;
+
     if (onClick) {
       onClick(event);
     }
+
     setOpen(isAlreadyOpen => {
       return !isAlreadyOpen;
     });
   }
+
   function handleTextboxFocus(event) {
     const triggerFocus = () => onFocus(event);
+
     if (openOnFocus) {
       setOpen(isAlreadyOpen => {
         if (isAlreadyOpen) {
           return true;
         }
+
         if (onOpen) {
           onOpen();
         }
+
         if (onFocus && !isInputFocused.current) {
           triggerFocus();
           isInputFocused.current = true;
         }
+
         if (isMouseDownReported.current && !isMouseDownOnInput.current) {
           return false;
         }
+
         return true;
       });
     } else if (onFocus && !isInputFocused.current) {
@@ -294,25 +342,33 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
       isInputFocused.current = true;
     }
   }
+
   function handleTextboxBlur(event) {
     isMouseDownOnInput.current = false;
+
     if (isMouseDownReported.current) {
       return;
     }
+
     isInputFocused.current = false;
+
     if (onBlur) {
       onBlur(event);
     }
   }
+
   function handleTextboxMouseDown(event) {
     isMouseDownReported.current = true;
+
     if (event.target.attributes["data-element"] && event.target.attributes["data-element"].value === "input") {
       isMouseDownOnInput.current = true;
     }
   }
+
   function handleListMouseDown() {
     isMouseDownReported.current = true;
   }
+
   function findElementWithMatchingText(textToMatch, list) {
     return list.find(child => {
       const {
@@ -321,16 +377,20 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
       return text && text.toLowerCase().indexOf(textToMatch.toLowerCase()) !== -1;
     });
   }
+
   function handleOnListAction() {
     setOpen(false);
     onListAction();
   }
+
   function assignInput(input) {
     setTextboxRef(input.current);
+
     if (inputRef) {
       inputRef.current = input.current;
     }
   }
+
   function getTextboxProps() {
     return {
       id,
@@ -353,6 +413,7 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
       ...(0, _utils.filterOutStyledSystemSpacingProps)(textboxProps)
     };
   }
+
   const selectList = /*#__PURE__*/_react.default.createElement(FilterableSelectList, {
     ref: listboxRef,
     id: selectListId.current,
@@ -378,6 +439,7 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
     flipEnabled: flipEnabled,
     isOpen: isOpen
   }, children);
+
   return /*#__PURE__*/_react.default.createElement(_select.default, _extends({
     hasTextCursor: true,
     readOnly: readOnly,
@@ -397,50 +459,71 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
     textboxRef: textboxRef
   }, getTextboxProps()))), selectList);
 });
-FilterableSelect.propTypes = {
-  ..._selectTextbox.formInputPropTypes,
+
+FilterableSelect.propTypes = { ..._selectTextbox.formInputPropTypes,
+
   /** Identifier used for testing purposes, applied to the root element of the component. */
   "data-component": _propTypes.default.string,
+
   /** Identifier used for testing purposes, applied to the root element of the component. */
   "data-element": _propTypes.default.string,
+
   /** Identifier used for testing purposes, applied to the root element of the component. */
   "data-role": _propTypes.default.string,
+
   /** Boolean to toggle where SelectList is rendered in relation to the Select Input */
   disablePortal: _propTypes.default.bool,
+
   /** The selected value(s), when the component is operating in controlled mode */
   value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
+
   /** The default selected value(s), when the component is operating in uncontrolled mode */
   defaultValue: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
+
   /** Child components (such as Option or OptionRow) for the SelectList */
   children: _propTypes.default.node.isRequired,
+
   /** A custom callback for when the input text changes */
   onFilterChange: _propTypes.default.func,
+
   /** A custom callback for when the dropdown menu opens */
   onOpen: _propTypes.default.func,
+
   /** If true the Component opens on focus */
   openOnFocus: _propTypes.default.bool,
+
   /** SelectList table header, should consist of multiple th elements.
   Works only in multiColumn mode */
   tableHeader: _propTypes.default.node,
+
   /** When true component will work in multi column mode.
   Children should consist of OptionRow components in this mode */
   multiColumn: _propTypes.default.bool,
+
   /** A custom message to be displayed when any option does not match the filter text */
   noResultsMessage: _propTypes.default.string,
+
   /** True for default text button or a Button Component to be rendered */
   listActionButton: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.element]),
+
   /** A callback for when the Action Button is triggered */
   onListAction: _propTypes.default.func,
+
   /** If true the loader animation is displayed in the option list */
   isLoading: _propTypes.default.bool,
+
   /** A callback that is triggered when a user scrolls to the bottom of the list */
   onListScrollBottom: _propTypes.default.func,
+
   /** Overrides the default tooltip position */
   tooltipPosition: _propTypes.default.oneOf(["top", "bottom", "left", "right"]),
+
   /** Maximum list height - defaults to 180 */
   listMaxHeight: _propTypes.default.number,
+
   /** Placement of the select list in relation to the input element */
   listPlacement: _propTypes.default.oneOf(["top", "bottom", "right", "left"]),
+
   /** Use the opposite list placement if the set placement does not fit */
   flipEnabled: _propTypes.default.bool
 };

package/lib/components/select/index.js

@@ -39,10 +39,17 @@ Object.defineProperty(exports, "MultiSelect", {
     return _multiSelect.default;
   }
 });
+
 var _option = _interopRequireDefault(require("./option/option.component"));
+
 var _optionRow = _interopRequireDefault(require("./option-row/option-row.component"));
+
 var _optionGroupHeader = _interopRequireDefault(require("./option-group-header/option-group-header.component"));
+
 var _simpleSelect = _interopRequireDefault(require("./simple-select/simple-select.component"));
+
 var _filterableSelect = _interopRequireDefault(require("./filterable-select/filterable-select.component"));
+
 var _multiSelect = _interopRequireDefault(require("./multi-select/multi-select.component"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/components/select/list-action-button/list-action-button.component.js

@@ -4,17 +4,25 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+
 var _react = _interopRequireDefault(require("react"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _listActionButton = _interopRequireDefault(require("./list-action-button.style"));
+
 var _useLocale = _interopRequireDefault(require("../../../hooks/__internal__/useLocale"));
+
 var _button = _interopRequireDefault(require("../../button"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 const ListActionButton = /*#__PURE__*/_react.default.forwardRef(({
   listActionButton,
   onListAction
 }, ref) => {
   const l = (0, _useLocale.default)();
+
   function renderListActionButton() {
     if (!listActionButton || listActionButton === true) {
       return /*#__PURE__*/_react.default.createElement(_button.default, {
@@ -24,16 +32,20 @@ const ListActionButton = /*#__PURE__*/_react.default.forwardRef(({
         iconPosition: "after"
       }, l.select.actionButtonText());
     }
+
     return /*#__PURE__*/_react.default.cloneElement(listActionButton, {
       forwardRef: ref,
       onClick: onListAction
     });
   }
+
   return /*#__PURE__*/_react.default.createElement(_listActionButton.default, null, renderListActionButton());
 });
+
 ListActionButton.propTypes = {
   /** True for default text button or a Button Component to be rendered */
   listActionButton: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.element]),
+
   /** A callback for when the Action Button is triggered */
   onListAction: _propTypes.default.func.isRequired
 };

package/lib/components/select/list-action-button/list-action-button.style.js

@@ -4,9 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+
 var _button = _interopRequireDefault(require("../../button/button.style"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 const StyledListActionButtonWrapper = _styledComponents.default.div`
   padding-top: var(--spacing100);
   padding-bottom: var(--spacing100);