carbon-react 111.12.3 → 111.12.5

package/lib/components/select/simple-select/simple-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 _propTypes2 = _interopRequireDefault(require("@styled-system/prop-types"));
+
 var _invariant = _interopRequireDefault(require("invariant"));
+
 var _utils = require("../../../style/utils");
+
 var _select = _interopRequireDefault(require("../select.style"));
+
 var _selectTextbox = _interopRequireWildcard(require("../select-textbox/select-textbox.component"));
+
 var _selectList = _interopRequireDefault(require("../select-list/select-list.component"));
+
 var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid"));
+
 var _getNextChildByText = _interopRequireDefault(require("../utils/get-next-child-by-text"));
+
 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 SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
   value,
   defaultValue,
@@ -68,8 +85,7 @@ const SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
   const childOptions = (0, _react.useMemo)(() => _react.default.Children.toArray(children), [children]);
   const createCustomEvent = (0, _react.useCallback)(newValue => {
     const customEvent = {
-      target: {
-        ...(name && {
+      target: { ...(name && {
           name
         }),
         ...(id && {
@@ -84,15 +100,19 @@ const SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
     setSelectedValue(previousValue => {
       const previousIndex = childOptions.findIndex(child => (0, _isExpectedOption.default)(child, previousValue));
       const match = (0, _getNextChildByText.default)(newFilterText, childOptions, previousIndex);
+
       if (!match) {
         return previousValue;
       }
+
       if (onChange) {
         onChange(createCustomEvent(match.props.value));
       }
+
       if (isControlled.current) {
         return previousValue;
       }
+
       setTextValue(match.props.text);
       return match.props.value;
     });
@@ -107,6 +127,7 @@ const SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
       filterText.current = newCharacter;
       selectValueStartingWithText(newCharacter);
     }
+
     isTimerCounting.current = true;
     clearTimeout(filterTimer.current);
     filterTimer.current = setTimeout(() => {
@@ -118,18 +139,22 @@ const SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
     const {
       key
     } = event;
+
     if (onKeyDown) {
       onKeyDown(event);
     }
+
     if (readOnly) {
       return;
     }
+
     if (key === "Enter" || key === " " || (0, _isNavigationKey.default)(key)) {
       event.preventDefault();
       setOpenState(isAlreadyOpen => {
         if (!isAlreadyOpen && onOpen) {
           onOpen();
         }
+
         return true;
       });
     } else if (key.length === 1 && !event.metaKey && !event.ctrlKey) {
@@ -140,9 +165,11 @@ const SimpleSelect = /*#__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 && !isClickTriggeredBySelect.current) {
       setOpenState(false);
     }
+
     isClickTriggeredBySelect.current = false;
   }, []);
   (0, _react.useEffect)(() => {
@@ -150,6 +177,7 @@ const SimpleSelect = /*#__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(value);
     }
@@ -157,9 +185,11 @@ const SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
   (0, _react.useEffect)(() => {
     const matchingOption = childOptions.find(child => (0, _isExpectedOption.default)(child, selectedValue));
     let newText = "";
+
     if (matchingOption) {
       newText = matchingOption.props.text;
     }
+
     setTextValue(newText);
   }, [selectedValue, childOptions]);
   (0, _react.useEffect)(() => {
@@ -174,61 +204,78 @@ const SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
       clearTimeout(filterTimer.current);
     };
   }, []);
+
   function handleDropdownIconClick(event) {
     handleTextboxClick(event);
   }
+
   function handleListMouseDown() {
     isMouseDownReported.current = true;
   }
+
   function handleTextboxBlur(event) {
     if (isMouseDownReported.current) {
       return;
     }
+
     if (onBlur) {
       onBlur(event);
     }
   }
+
   function handleTextboxClick(event) {
     isMouseDownReported.current = false;
+
     if (onClick) {
       onClick(event);
     }
+
     setOpenState(isAlreadyOpen => {
       if (isAlreadyOpen) {
         return false;
       }
+
       if (onOpen) {
         onOpen();
       }
+
       return true;
     });
   }
+
   function handleTextboxMouseDown() {
     isMouseDownReported.current = true;
   }
+
   function handleTextboxFocus(event) {
     if (isClickTriggeredBySelect.current) {
       return;
     }
+
     if (onFocus) {
       onFocus(event);
     }
+
     if (isMouseDownReported.current) {
       isMouseDownReported.current = false;
       return;
     }
+
     if (openOnFocus) {
       setOpenState(isAlreadyOpen => {
         if (isAlreadyOpen) {
           return true;
         }
+
         if (onOpen) {
           onOpen();
         }
+
         return true;
       });
     }
   }
+
   function onSelectOption(optionData) {
     const {
       text,
@@ -239,32 +286,40 @@ const SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
     const isClickTriggered = selectionType === "click";
     updateValue(newValue, text);
     setActiveDescendantId(selectedOptionId);
+
     if (selectionType !== "navigationKey") {
       setOpenState(false);
     }
+
     if (isClickTriggered) {
       isClickTriggeredBySelect.current = true;
       textboxRef.focus();
     }
   }
+
   function updateValue(newValue, text) {
     if (!isControlled.current) {
       setSelectedValue(newValue);
       setTextValue(text);
     }
+
     if (onChange) {
       onChange(createCustomEvent(newValue));
     }
   }
+
   function onSelectListClose() {
     setOpenState(false);
   }
+
   function assignInput(input) {
     setTextboxRef(input.current);
+
     if (inputRef) {
       inputRef.current = input.current;
     }
   }
+
   function getTextboxProps() {
     return {
       id,
@@ -285,6 +340,7 @@ const SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
       ...(0, _utils.filterOutStyledSystemSpacingProps)(props)
     };
   }
+
   const selectList = /*#__PURE__*/_react.default.createElement(_selectList.default, {
     ref: listboxRef,
     id: selectListId.current,
@@ -305,6 +361,7 @@ const SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
     flipEnabled: flipEnabled,
     isOpen: isOpen
   }, children);
+
   return /*#__PURE__*/_react.default.createElement(_select.default, _extends({
     transparent: transparent,
     disabled: disabled,
@@ -323,46 +380,65 @@ const SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
     textboxRef: textboxRef
   }, getTextboxProps()))), selectList);
 });
+
 SimpleSelect.propTypes = {
   /** Styled system spacing props */
   ..._propTypes2.default.space,
   ..._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,
+
   /** The selected value(s), when the component is operating in controlled mode */
   value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
+
   /** Boolean to toggle where SelectList is rendered in relation to the Select Input */
   disablePortal: _propTypes.default.bool,
+
   /** 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,
+
   /** If true the Component opens on focus */
   openOnFocus: _propTypes.default.bool,
+
   /** If true the component input has no border and a transparent background */
   transparent: _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 callback for when the dropdown menu opens */
   onOpen: _propTypes.default.func,
+
   /** If true the loader animation is displayed below the last option */
   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/utils/get-next-child-by-text.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = getNextChildByText;
+
 /**
  * Recreates HTML Select element functionality of finding first match based on typed characters
  * */
@@ -12,26 +13,34 @@ function getNextChildByText(textToMatch, arrayOfChildren, previousIndex = -1) {
   const isTheSameCharacter = textToMatch.split("").every(character => character === lastCharacter);
   let indexOfMatch = findElementStartingWithText(textToMatch, arrayOfChildren);
   const listOfMatches = getListOfMatches(arrayOfChildren, lastCharacter);
+
   if (isTheSameCharacter && listOfMatches.length > 1) {
     indexOfMatch = getIndexOfNextElement(listOfMatches, previousIndex);
   }
+
   return arrayOfChildren[indexOfMatch];
 }
+
 function getListOfMatches(arrayOfChildren, lastCharacter) {
   return arrayOfChildren.reduce((acc, child, index) => {
     if (child.props.text && child.props.text.toLowerCase().startsWith(lastCharacter.toLowerCase())) {
       acc.push(index);
     }
+
     return acc;
   }, []);
 }
+
 function getIndexOfNextElement(listOfMatches, previousIndex) {
   const isLastIndex = previousIndex === listOfMatches[listOfMatches.length - 1];
+
   if (isLastIndex) {
     return listOfMatches[0];
   }
+
   return listOfMatches[listOfMatches.indexOf(previousIndex) + 1];
 }
+
 function findElementStartingWithText(textToMatch, list) {
   return list.findIndex(child => {
     return child.props.text && child.props.text.toLowerCase().startsWith(textToMatch.toLowerCase());

package/lib/components/select/utils/get-next-index-by-key.js

@@ -7,49 +7,63 @@ exports.default = getNextIndexByKey;
 exports.PAGE_SIZE = void 0;
 const PAGE_SIZE = 4;
 exports.PAGE_SIZE = PAGE_SIZE;
+
 function getNextIndexByKey(key, currentIndex, lastIndex, isLoading) {
   const isNoOptionSelected = currentIndex === -1;
   let newIndex = currentIndex;
+
   switch (key) {
     case "Home":
       newIndex = 0;
       break;
+
     case "End":
       newIndex = lastIndex;
       break;
+
     case "ArrowDown":
       if (isLoading && currentIndex === lastIndex) {
         return lastIndex;
       }
+
       if (currentIndex === lastIndex || isNoOptionSelected) {
         newIndex = 0;
       } else {
         newIndex = currentIndex + 1;
       }
+
       break;
+
     case "ArrowUp":
       if (currentIndex === 0 || isNoOptionSelected) {
         newIndex = lastIndex;
       } else {
         newIndex = currentIndex - 1;
       }
+
       break;
+
     case "PageDown":
       if (isNoOptionSelected) {
         newIndex = Math.min(PAGE_SIZE - 1, lastIndex);
       } else {
         newIndex = Math.min(currentIndex + PAGE_SIZE, lastIndex);
       }
+
       break;
+
     case "PageUp":
       if (isNoOptionSelected) {
         newIndex = Math.max(lastIndex + 1 - PAGE_SIZE, 0);
       } else {
         newIndex = Math.max(currentIndex - PAGE_SIZE, 0);
       }
+
       break;
+
     default:
       break;
   }
+
   return newIndex;
 }

package/lib/components/select/utils/highlight-part-of-text.js

@@ -4,23 +4,31 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = highlightPartOfTextRecursive;
+
 var _react = _interopRequireDefault(require("react"));
+
 var _matchingText = _interopRequireDefault(require("./matching-text.style"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function highlightPartOfText(text, partToHighlight) {
   if (!partToHighlight || !partToHighlight.length || !text) return text;
   const lowercaseText = text.toLowerCase();
   const lowercasePart = partToHighlight.toLowerCase();
   const indexOfFirstMatch = lowercaseText.indexOf(lowercasePart);
+
   if (indexOfFirstMatch === -1) {
     return text;
   }
+
   const precedingText = text.substr(0, indexOfFirstMatch);
   const matchingText = text.substr(indexOfFirstMatch, partToHighlight.length);
   let followingText = text.substr(indexOfFirstMatch + partToHighlight.length, text.length);
+
   if (followingText.length >= partToHighlight.length) {
     followingText = highlightPartOfText(followingText, partToHighlight);
   }
+
   const newValue = [/*#__PURE__*/_react.default.createElement("span", {
     key: "preceding"
   }, precedingText), /*#__PURE__*/_react.default.createElement(_matchingText.default, {
@@ -30,11 +38,14 @@ function highlightPartOfText(text, partToHighlight) {
   }, followingText)];
   return newValue;
 }
+
 function highlightPartOfTextRecursive(child, partToHighlight) {
   if (typeof child === "string") {
     return highlightPartOfText(child, partToHighlight);
   }
+
   const highlightedChildren = _react.default.Children.map(child.props.children, grandChild => highlightPartOfTextRecursive(grandChild, partToHighlight));
+
   return /*#__PURE__*/_react.default.cloneElement(child, {
     children: highlightedChildren
   });

package/lib/components/select/utils/is-expected-option.js

@@ -4,22 +4,31 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = isExpectedOption;
+
 var _option = _interopRequireDefault(require("../option/option.component"));
+
 var _optionRow = _interopRequireDefault(require("../option-row/option-row.component"));
+
 var _isExpectedValue = _interopRequireDefault(require("./is-expected-value"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function isExpectedOption(element, expectedValue) {
   if (element.type !== _option.default && element.type !== _optionRow.default) {
     return false;
   }
+
   if (expectedValue === null || expectedValue === undefined) {
     return false;
   }
+
   const {
     length
   } = typeof expectedValue === "string" ? expectedValue : Object.keys(expectedValue);
+
   if (!length) {
     return false;
   }
+
   return (0, _isExpectedValue.default)(element.props.value, expectedValue);
 }

package/lib/components/select/utils/is-expected-value.js

@@ -4,9 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = isExpectedValue;
+
 function isExpectedValue(currentValue, expectedValue) {
   if (typeof currentValue === "object" && currentValue.id !== null && currentValue.id !== undefined) {
     return currentValue.id === expectedValue.id;
   }
+
   return currentValue === expectedValue;
 }

package/lib/components/select/utils/is-navigation-key.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = isNavigationKey;
+
 function isNavigationKey(key) {
   const navigationKeys = ["ArrowDown", "ArrowUp", "Home", "End", "PageUp", "PageDown"];
   return navigationKeys.includes(key);

package/lib/components/select/utils/matching-text.style.js

@@ -4,8 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 const MatchingText = _styledComponents.default.span`
   font-weight: 700;
   text-decoration: underline;