carbon-react 111.12.1 → 111.12.3

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

@@ -1,5 +1,4 @@
 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";
@@ -60,7 +59,8 @@ 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,19 +75,15 @@ 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;
     });
@@ -102,7 +98,6 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
       filterText.current = newCharacter;
       selectValueStartingWithText(newCharacter);
     }
-
     isTimerCounting.current = true;
     clearTimeout(filterTimer.current);
     filterTimer.current = setTimeout(() => {
@@ -114,22 +109,18 @@ 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) {
@@ -140,11 +131,9 @@ 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(() => {
@@ -152,7 +141,6 @@ 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);
     }
@@ -160,11 +148,9 @@ 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(() => {
@@ -179,78 +165,61 @@ 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,
@@ -261,40 +230,32 @@ 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,
@@ -315,7 +276,6 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
       ...filterOutStyledSystemSpacingProps(props)
     };
   }
-
   const selectList = /*#__PURE__*/React.createElement(SelectList, {
     ref: listboxRef,
     id: selectListId.current,
@@ -358,60 +318,42 @@ 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,34 +6,26 @@ 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,59 +2,46 @@ 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,24 +1,19 @@
 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, {
@@ -28,12 +23,10 @@ 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,18 +5,14 @@ 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,6 +2,5 @@ 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,5 +1,4 @@
 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";
@@ -8,20 +7,15 @@ 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 => {
@@ -29,38 +23,31 @@ 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 */
-
 
+/** Filters wrapped component children based on provided filter text and highlights matching content */
 const withFilter = WrappedComponent => {
   const FilteredComponent = /*#__PURE__*/React.forwardRef(({
     children,
@@ -74,16 +61,12 @@ 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: {
@@ -92,13 +75,10 @@ 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({
@@ -110,27 +90,22 @@ 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,
@@ -142,5 +117,4 @@ const withFilter = WrappedComponent => {
   };
   return FilteredComponent;
 };
-
 export default withFilter;

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

@@ -1,5 +1,4 @@
 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";
@@ -8,7 +7,6 @@ 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,
@@ -26,7 +24,6 @@ const SettingsRow = ({
       divider: false
     });
   };
-
   return /*#__PURE__*/React.createElement(StyledSettingsRow, _extends({
     className: className,
     hasDivider: divider
@@ -34,21 +31,16 @@ 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
 };