carbon-react 111.12.3 → 111.12.4

package/esm/components/select/simple-select/simple-select.component.js

@@ -1,4 +1,5 @@
 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); }
+
 import React, { useState, useEffect, useRef, useCallback, useMemo } from "react";
 import PropTypes from "prop-types";
 import propTypes from "@styled-system/prop-types";
@@ -59,8 +60,7 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
   const childOptions = useMemo(() => React.Children.toArray(children), [children]);
   const createCustomEvent = useCallback(newValue => {
     const customEvent = {
-      target: {
-        ...(name && {
+      target: { ...(name && {
           name
         }),
         ...(id && {
@@ -75,15 +75,19 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
     setSelectedValue(previousValue => {
       const previousIndex = childOptions.findIndex(child => isExpectedOption(child, previousValue));
       const match = getNextChildByText(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;
     });
@@ -98,6 +102,7 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
       filterText.current = newCharacter;
       selectValueStartingWithText(newCharacter);
     }
+
     isTimerCounting.current = true;
     clearTimeout(filterTimer.current);
     filterTimer.current = setTimeout(() => {
@@ -109,18 +114,22 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
     const {
       key
     } = event;
+
     if (onKeyDown) {
       onKeyDown(event);
     }
+
     if (readOnly) {
       return;
     }
+
     if (key === "Enter" || key === " " || isNavigationKey(key)) {
       event.preventDefault();
       setOpenState(isAlreadyOpen => {
         if (!isAlreadyOpen && onOpen) {
           onOpen();
         }
+
         return true;
       });
     } else if (key.length === 1 && !event.metaKey && !event.ctrlKey) {
@@ -131,9 +140,11 @@ const SimpleSelect = /*#__PURE__*/React.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;
   }, []);
   useEffect(() => {
@@ -141,6 +152,7 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
     const onChangeMissingMessage = "onChange prop required when using a controlled input element";
     !(isControlled.current === (value !== undefined)) ? process.env.NODE_ENV !== "production" ? invariant(false, modeSwitchedMessage) : invariant(false) : void 0;
     !(!isControlled.current || isControlled.current && onChange) ? process.env.NODE_ENV !== "production" ? invariant(false, onChangeMissingMessage) : invariant(false) : void 0;
+
     if (isControlled.current) {
       setSelectedValue(value);
     }
@@ -148,9 +160,11 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
   useEffect(() => {
     const matchingOption = childOptions.find(child => isExpectedOption(child, selectedValue));
     let newText = "";
+
     if (matchingOption) {
       newText = matchingOption.props.text;
     }
+
     setTextValue(newText);
   }, [selectedValue, childOptions]);
   useEffect(() => {
@@ -165,61 +179,78 @@ const SimpleSelect = /*#__PURE__*/React.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,
@@ -230,32 +261,40 @@ const SimpleSelect = /*#__PURE__*/React.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,
@@ -276,6 +315,7 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
       ...filterOutStyledSystemSpacingProps(props)
     };
   }
+
   const selectList = /*#__PURE__*/React.createElement(SelectList, {
     ref: listboxRef,
     id: selectListId.current,
@@ -318,42 +358,60 @@ SimpleSelect.propTypes = {
   /** Styled system spacing props */
   ...propTypes.space,
   ...formInputPropTypes,
+
   /** Identifier used for testing purposes, applied to the root element of the component. */
   "data-component": PropTypes.string,
+
   /** Identifier used for testing purposes, applied to the root element of the component. */
   "data-element": PropTypes.string,
+
   /** Identifier used for testing purposes, applied to the root element of the component. */
   "data-role": PropTypes.string,
+
   /** The selected value(s), when the component is operating in controlled mode */
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+
   /** Boolean to toggle where SelectList is rendered in relation to the Select Input */
   disablePortal: PropTypes.bool,
+
   /** The default selected value(s), when the component is operating in uncontrolled mode */
   defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+
   /** Child components (such as Option or OptionRow) for the SelectList */
   children: PropTypes.node.isRequired,
+
   /** If true the Component opens on focus */
   openOnFocus: PropTypes.bool,
+
   /** If true the component input has no border and a transparent background */
   transparent: PropTypes.bool,
+
   /** SelectList table header, should consist of multiple th elements.
   Works only in multiColumn mode */
   tableHeader: PropTypes.node,
+
   /** When true component will work in multi column mode.
   Children should consist of OptionRow components in this mode */
   multiColumn: PropTypes.bool,
+
   /** A custom callback for when the dropdown menu opens */
   onOpen: PropTypes.func,
+
   /** If true the loader animation is displayed below the last option */
   isLoading: PropTypes.bool,
+
   /** A callback that is triggered when a user scrolls to the bottom of the list */
   onListScrollBottom: PropTypes.func,
+
   /** Overrides the default tooltip position */
   tooltipPosition: PropTypes.oneOf(["top", "bottom", "left", "right"]),
+
   /** Maximum list height - defaults to 180 */
   listMaxHeight: PropTypes.number,
+
   /** Placement of the select list in relation to the input element */
   listPlacement: PropTypes.oneOf(["top", "bottom", "right", "left"]),
+
   /** Use the opposite list placement if the set placement does not fit */
   flipEnabled: PropTypes.bool
 };

package/esm/components/select/utils/get-next-child-by-text.js

@@ -6,26 +6,34 @@ export default function getNextChildByText(textToMatch, arrayOfChildren, previou
   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/esm/components/select/utils/get-next-index-by-key.js

@@ -2,46 +2,59 @@ export const PAGE_SIZE = 4;
 export default 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/esm/components/select/utils/highlight-part-of-text.js

@@ -1,19 +1,24 @@
 import React from "react";
 import MatchingText from "./matching-text.style";
+
 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.createElement("span", {
     key: "preceding"
   }, precedingText), /*#__PURE__*/React.createElement(MatchingText, {
@@ -23,10 +28,12 @@ function highlightPartOfText(text, partToHighlight) {
   }, followingText)];
   return newValue;
 }
+
 export default function highlightPartOfTextRecursive(child, partToHighlight) {
   if (typeof child === "string") {
     return highlightPartOfText(child, partToHighlight);
   }
+
   const highlightedChildren = React.Children.map(child.props.children, grandChild => highlightPartOfTextRecursive(grandChild, partToHighlight));
   return /*#__PURE__*/React.cloneElement(child, {
     children: highlightedChildren

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

@@ -5,14 +5,18 @@ export default function isExpectedOption(element, expectedValue) {
   if (element.type !== Option && element.type !== OptionRow) {
     return false;
   }
+
   if (expectedValue === null || expectedValue === undefined) {
     return false;
   }
+
   const {
     length
   } = typeof expectedValue === "string" ? expectedValue : Object.keys(expectedValue);
+
   if (!length) {
     return false;
   }
+
   return isExpectedValue(element.props.value, expectedValue);
 }

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

@@ -2,5 +2,6 @@ export default function isExpectedValue(currentValue, expectedValue) {
   if (typeof currentValue === "object" && currentValue.id !== null && currentValue.id !== undefined) {
     return currentValue.id === expectedValue.id;
   }
+
   return currentValue === expectedValue;
 }

package/esm/components/select/utils/with-filter.hoc.js

@@ -1,4 +1,5 @@
 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); }
+
 import React, { useCallback } from "react";
 import PropTypes from "prop-types";
 import useLocale from "../../../hooks/__internal__/useLocale";
@@ -7,15 +8,20 @@ import StyledOption from "../option/option.style";
 import Option from "../option/option.component";
 import OptionRow from "../option-row/option-row.component";
 import highlightPartOfText from "./highlight-part-of-text";
+
 const filterOptions = (option, filterText) => {
   var _option$props$text;
+
   const processedText = (_option$props$text = option.props.text) === null || _option$props$text === void 0 ? void 0 : _option$props$text.toLowerCase();
   const processedValue = filterText.toLowerCase();
+
   if (processedText.includes(processedValue)) {
     return option;
   }
+
   return null;
 };
+
 const filterOptionRows = (optionRow, filterText) => {
   const cells = React.Children.toArray(optionRow.props.children);
   const hasText = cells.find(cell => {
@@ -23,31 +29,38 @@ const filterOptionRows = (optionRow, filterText) => {
       const processedText = cell.props.children.toLowerCase();
       const processedValue = filterText.toLowerCase();
       return processedText.includes(processedValue);
-    }
-    // filter recursively based on children
+    } // filter recursively based on children
+
+
     return filterOptionRows(cell, filterText);
   });
+
   if (hasText) {
     return optionRow;
   }
+
   return null;
 };
+
 const filterChildren = filterText => children => {
   // eslint-disable-next-line consistent-return
   const filteredChildren = React.Children.map(children, child => {
     if (child.type === Option) {
       return filterOptions(child, filterText);
     }
+
     if (child.type === OptionRow) {
       return filterOptionRows(child, filterText);
     }
+
     return null;
   });
   if (React.Children.count(filteredChildren)) return filteredChildren;
   return null;
 };
-
 /** Filters wrapped component children based on provided filter text and highlights matching content */
+
+
 const withFilter = WrappedComponent => {
   const FilteredComponent = /*#__PURE__*/React.forwardRef(({
     children,
@@ -61,12 +74,16 @@ const withFilter = WrappedComponent => {
     const l = useLocale();
     const getFilteredChildren = useCallback(() => {
       let filteredElements = children;
+
       if (filterText && !isLoading) {
         filteredElements = filterChildren(filterText)(children);
+
         if (!filteredElements) {
           const noResultsText = l.select.noResultsForTerm(filterText);
+
           if (multiColumn) {
             var _tableHeader$props;
+
             const colSpan = React.Children.count(tableHeader === null || tableHeader === void 0 ? void 0 : (_tableHeader$props = tableHeader.props) === null || _tableHeader$props === void 0 ? void 0 : _tableHeader$props.children);
             return /*#__PURE__*/React.createElement(StyledOptionRow, null, /*#__PURE__*/React.createElement("td", {
               style: {
@@ -75,10 +92,13 @@ const withFilter = WrappedComponent => {
               colSpan: colSpan
             }, noResultsMessage || noResultsText));
           }
+
           return /*#__PURE__*/React.createElement(StyledOption, null, noResultsMessage || noResultsText);
         }
+
         return addHighlightedContent(filteredElements, filterText);
       }
+
       return children;
     }, [children, filterText, isLoading, multiColumn, noResultsMessage, tableHeader, l]);
     return /*#__PURE__*/React.createElement(WrappedComponent, _extends({
@@ -90,22 +110,27 @@ const withFilter = WrappedComponent => {
       ref: forwardedRef
     }), getFilteredChildren());
   });
+
   function addHighlightedContent(filteredElements, filterText) {
     return React.Children.map(filteredElements, child => {
       let highlightedContent;
+
       if (child.type === Option) {
         highlightedContent = highlightPartOfText(child.props.text, filterText);
       }
+
       if (child.type === OptionRow) {
         highlightedContent = React.Children.map(child.props.children, cell => /*#__PURE__*/React.cloneElement(cell, {
           children: highlightPartOfText(cell.props.children, filterText)
         }));
       }
+
       return /*#__PURE__*/React.cloneElement(child, {
         children: highlightedContent
       });
     });
   }
+
   FilteredComponent.propTypes = {
     forwardedRef: PropTypes.object,
     children: PropTypes.node,
@@ -117,4 +142,5 @@ const withFilter = WrappedComponent => {
   };
   return FilteredComponent;
 };
+
 export default withFilter;

package/esm/components/settings-row/settings-row.component.js

@@ -1,4 +1,5 @@
 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); }
+
 import React from "react";
 import PropTypes from "prop-types";
 import styledSystemPropTypes from "@styled-system/prop-types";
@@ -7,6 +8,7 @@ import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import { StyledSettingsRow, StyledSettingsRowHeader, StyledSettingsRowInput } from "./settings-row.style";
 const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
+
 const SettingsRow = ({
   title,
   description,
@@ -24,6 +26,7 @@ const SettingsRow = ({
       divider: false
     });
   };
+
   return /*#__PURE__*/React.createElement(StyledSettingsRow, _extends({
     className: className,
     hasDivider: divider
@@ -31,16 +34,21 @@ const SettingsRow = ({
     m: 0
   }, filterStyledSystemMarginProps(rest)), /*#__PURE__*/React.createElement(StyledSettingsRowHeader, null, heading()), /*#__PURE__*/React.createElement(StyledSettingsRowInput, null, children));
 };
-SettingsRow.propTypes = {
-  ...marginPropTypes,
+
+SettingsRow.propTypes = { ...marginPropTypes,
+
   /**  This component supports children. */
   children: PropTypes.node,
+
   /**  The CSS classes to apply to the component. */
   className: PropTypes.string,
+
   /**  A title for this group of settings. */
   title: PropTypes.string,
+
   /**  A string or JSX object that provides a short description about the group of settings. */
   description: PropTypes.node,
+
   /** Shows a divider below the component. */
   divider: PropTypes.bool
 };