carbon-react 111.12.3 → 111.12.5

package/esm/components/select/select-list/select-list.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, { useEffect, useState, useCallback, useLayoutEffect, useRef, useMemo } from "react";
 import PropTypes from "prop-types";
 import { flip, offset, size } from "@floating-ui/dom";
@@ -54,6 +55,7 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
     if (isOpen) {
       blockScroll();
     }
+
     return () => {
       if (isOpen) {
         allowScroll();
@@ -72,11 +74,11 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
     if ((child === null || child === void 0 ? void 0 : child.type) === Option || (child === null || child === void 0 ? void 0 : child.type) === OptionRow) {
       return /*#__PURE__*/React.createRef();
     }
+
     return null;
   }).filter(child => child), [children]);
   const handleSelect = useCallback(optionData => {
-    onSelect({
-      ...optionData,
+    onSelect({ ...optionData,
       selectionType: "click"
     });
   }, [onSelect]);
@@ -85,6 +87,7 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
     if (!child || child.type !== Option && child.type !== OptionRow) {
       return child;
     }
+
     const newProps = {
       index,
       id: childIds[index],
@@ -108,9 +111,11 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
     const lastIndex = lastOptionIndex;
     let nextIndex = getNextIndexByKey(key, indexOfHighlighted, lastIndex, isLoading);
     const nextElement = childrenList[nextIndex];
+
     if (nextElement && nextElement.type !== Option && nextElement.type !== OptionRow) {
       nextIndex = getNextHighlightableItemIndex(key, nextIndex, lastIndex);
     }
+
     return nextIndex;
   }, [childrenList, lastOptionIndex, isLoading]);
   const getIndexOfMatch = useCallback(valueToMatch => {
@@ -118,14 +123,18 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
   }, [childrenList]);
   const highlightNextItem = useCallback(key => {
     let currentIndex = currentOptionsListIndex;
+
     if (highlightedValue) {
       const indexOfHighlighted = getIndexOfMatch(highlightedValue);
       currentIndex = indexOfHighlighted;
     }
+
     const nextIndex = getNextHighlightableItemIndex(key, currentIndex);
+
     if (currentIndex === nextIndex) {
       return;
     }
+
     const {
       text,
       value,
@@ -157,10 +166,12 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
     if (!isOpen) {
       return;
     }
+
     const {
       key
     } = event;
     const isActionButtonFocused = document.activeElement === listActionButtonRef.current;
+
     if (key === "Tab" && listActionButton) {
       handleActionButtonTab(event, isActionButtonFocused);
     } else if (key === "Tab" || key === "Escape") {
@@ -168,10 +179,12 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
     } else if (key === "Enter" && !isActionButtonFocused) {
       event.preventDefault();
       const currentOption = childrenList[currentOptionsListIndex];
+
       if (!currentOption) {
         onSelectListClose();
         return;
       }
+
       const {
         id: itemId,
         text,
@@ -190,6 +203,7 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
   }, [childrenList, listActionButton, handleActionButtonTab, onSelectListClose, currentOptionsListIndex, onSelect, highlightNextItem, focusOnAnchor, isOpen]);
   const handleListScroll = useCallback(event => {
     const element = event.target;
+
     if (onListScrollBottom && element.scrollHeight - element.scrollTop === element.clientHeight) {
       onListScrollBottom();
     }
@@ -209,12 +223,15 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
       lastFilter.current = filterText;
       return;
     }
+
     lastFilter.current = filterText;
     setCurrentOptionsListIndex(previousIndex => {
       const match = getNextChildByText(filterText, childrenList, previousIndex);
+
       if (!match) {
         return previousIndex;
       }
+
       const indexOfMatch = getIndexOfMatch(match.props.value);
       updateListScrollTop(indexOfMatch, multiColumn ? tableRef.current : listRef.current, optionRefList);
       return indexOfMatch;
@@ -224,6 +241,7 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
     if (!highlightedValue) {
       return;
     }
+
     const indexOfMatch = getIndexOfMatch(highlightedValue);
     setCurrentOptionsListIndex(indexOfMatch);
     updateListScrollTop(indexOfMatch, multiColumn ? tableRef.current : listRef.current, optionRefList);
@@ -242,16 +260,20 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
         width: `${rects.reference.width}px`
       });
     }
+
   }), ...(flipEnabled ? [flip({
     fallbackStrategy: "initialPlacement"
   })] : [])], [flipEnabled]);
+
   const loader = () => /*#__PURE__*/React.createElement(StyledSelectLoaderContainer, {
     key: "loader",
     as: multiColumn ? "div" : "li"
   }, /*#__PURE__*/React.createElement(Loader, {
     "data-role": loaderDataRole
   }));
+
   let selectListContent = childrenWithListProps;
+
   if (multiColumn) {
     selectListContent = /*#__PURE__*/React.createElement(StyledSelectListTable, null, /*#__PURE__*/React.createElement(StyledSelectListTableHeader, {
       scrollbarWidth: scrollbarWidth
@@ -259,6 +281,7 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
       ref: tableRef
     }, childrenWithListProps));
   }
+
   return /*#__PURE__*/React.createElement(SelectListContext.Provider, {
     value: {
       currentOptionsListIndex,
@@ -296,46 +319,66 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
 SelectList.propTypes = {
   /** The ID for the parent <div> */
   id: PropTypes.string,
+
   /** The Id of the label */
   labelId: PropTypes.string,
+
   /** Child components (such as <Option>) */
   children: PropTypes.node,
+
   /** Boolean to toggle where DatePicker is rendered in relation to the Date Input */
   disablePortal: PropTypes.bool,
+
   /** DOM element to position the dropdown menu list relative to */
   anchorElement: PropTypes.object,
+
   /** A callback for when a child is selected */
   onSelect: PropTypes.func.isRequired,
+
   /** A callback for when the list should be closed */
   onSelectListClose: PropTypes.func.isRequired,
+
   /** Text value to highlight an option */
   filterText: PropTypes.string,
+
   /** Value of option to be highlighted on component render */
   highlightedValue: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+
   /** True for default text button or a Button Component to be rendered */
   listActionButton: PropTypes.oneOfType([PropTypes.bool, PropTypes.element]),
+
   /** Maximum list height - defaults to 180 */
   listMaxHeight: PropTypes.number,
+
   /** A callback for when the Action Button is triggered */
   onListAction: 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,
+
   /** 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,
+
   /** Data role for loader component */
   loaderDataRole: PropTypes.string,
+
   /** Placement of the select list relative 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,
+
   /** @private @ignore
    * Hides the list (with CSS display: none) if not set
    */
   isOpen: PropTypes.bool,
+
   /** array of selected values, if rendered as part of a MultiSelect */
   multiselectValues: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.object)])
 };

package/esm/components/select/select-list/select-list.style.js

@@ -50,9 +50,8 @@ const StyledSelectListTable = styled.table`
     width: 100%;
     table-layout: fixed;
   }
-`;
+`; // TODO (design-tokens): to match current style for border bottom colorsUtilityMajor100
 
-// TODO (design-tokens): to match current style for border bottom colorsUtilityMajor100
 const StyledSelectListTableHeader = styled.thead`
   border-bottom: 1px solid var(--colorsUtilityMajor050);
 

package/esm/components/select/select-list/update-list-scroll.js

@@ -3,6 +3,7 @@ export default function updateListScrollTop(indexOfCurrent, list, options) {
     list.scrollTop = 0;
     return;
   }
+
   let newPosition = 0;
   const {
     offsetHeight: listHeight
@@ -11,8 +12,10 @@ export default function updateListScrollTop(indexOfCurrent, list, options) {
     offsetTop: itemTop,
     offsetHeight: currentItemHeight
   } = options[indexOfCurrent].current;
+
   if (itemTop + currentItemHeight > listHeight) {
     newPosition = itemTop + currentItemHeight - listHeight;
   }
+
   list.scrollTop = newPosition;
 }

package/esm/components/select/select-textbox/select-textbox.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, { useRef, useMemo } from "react";
 import PropTypes from "prop-types";
 import { offset, size as sizeMiddleware } from "@floating-ui/dom";
@@ -19,7 +20,9 @@ const floatingMiddleware = [offset(({
     elements.reference.style.height = `${rects.floating.height}px`;
     elements.floating.style.width = `${rects.reference.width}px`;
   }
+
 })];
+
 const SelectTextbox = ({
   accessibilityLabelId,
   labelId,
@@ -58,25 +61,31 @@ const SelectTextbox = ({
   });
   const l = useLocale();
   const textId = useRef(guid());
+
   function handleTextboxClick(event) {
     if (disabled || readOnly) {
       return;
     }
+
     onClick(event);
   }
+
   function handleTextboxFocus(event) {
     if (disabled || readOnly) {
       return;
     }
+
     if (onFocus) {
       onFocus(event);
     }
   }
+
   function handleTextboxBlur(event) {
     if (onBlur) {
       onBlur(event);
     }
   }
+
   function getTextboxProps() {
     return {
       disabled,
@@ -90,8 +99,10 @@ const SelectTextbox = ({
       ...restProps
     };
   }
+
   function getInputAriaAttributes() {
     const joinIds = (...ids) => ids.filter(item => item !== undefined).join(" ");
+
     const ariaLabelledby = hasTextCursor ? joinIds(labelId, accessibilityLabelId) : joinIds(labelId, textId.current);
     return {
       "aria-expanded": readOnly ? undefined : isOpen,
@@ -102,6 +113,7 @@ const SelectTextbox = ({
       role: readOnly ? undefined : "combobox"
     };
   }
+
   function renderSelectText() {
     return /*#__PURE__*/React.createElement(SelectText, _extends({
       textId: textId.current,
@@ -114,6 +126,7 @@ const SelectTextbox = ({
       size: size
     }, restProps));
   }
+
   function handleSelectTextKeydown(event) {
     if (event.key.length === 1) {
       onChange({
@@ -123,6 +136,7 @@ const SelectTextbox = ({
       });
     }
   }
+
   return /*#__PURE__*/React.createElement(Textbox, _extends({
     "data-element": "select-input",
     inputIcon: "dropdown",
@@ -133,6 +147,7 @@ const SelectTextbox = ({
     placeholder: hasTextCursor ? placeholder || l.select.placeholder() : undefined
   }, getInputAriaAttributes(), getTextboxProps()), !hasTextCursor && renderSelectText());
 };
+
 const formInputPropTypes = {
   /**
    * Id of the element containing the currently displayed value
@@ -141,16 +156,22 @@ const formInputPropTypes = {
    * @ignore
    */
   accessibilityLabelId: PropTypes.string,
+
   /** Id attribute of the input element */
   id: PropTypes.string,
+
   /** Name attribute of the input element */
   name: PropTypes.string,
+
   /** If true the Component will be read-only */
   readOnly: PropTypes.bool,
+
   /** If true the Component will be disabled */
   disabled: PropTypes.bool,
+
   /** If true the Component will be focused when rendered */
   autoFocus: PropTypes.bool,
+
   /**
    * Label id passed from Select component
    * @private
@@ -158,59 +179,77 @@ const formInputPropTypes = {
    *
    */
   labelId: PropTypes.string,
+
   /** Label */
   label: PropTypes.string,
+
   /** Text applied to label help tooltip */
   labelHelp: PropTypes.node,
+
   /** When true, label is placed in line with an input */
   labelInline: PropTypes.bool,
+
   /** Width of a label in percentage. Works only when labelInline is true */
   labelWidth: PropTypes.number,
+
   /** Width of an input in percentage. Works only when labelInline is true */
   inputWidth: PropTypes.number,
+
   /**
    * @ignore
    * @private
    * If true, the select is open
    */
   isOpen: PropTypes.bool,
+
   /** Size of an input */
   size: PropTypes.oneOf(["small", "medium", "large"]),
+
   /** Placeholder string to be displayed in input */
   placeholder: PropTypes.string,
+
   /** A custom callback for when changes occur */
   onChange: PropTypes.func,
+
   /** Callback function for when the Select Textbox is clicked. */
   onClick: PropTypes.func,
+
   /** Callback function for when the Select Textbox is focused. */
   onFocus: PropTypes.func,
+
   /** Callback function for when the Select Textbox loses it's focus. */
   onBlur: PropTypes.func,
+
   /** Callback function for when the key is pressed when focused on Select Textbox. */
   onKeyDown: PropTypes.func,
+
   /** Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set */
   adaptiveLabelBreakpoint: PropTypes.number,
+
   /** Flag to configure component as mandatory */
   required: PropTypes.bool
 };
-SelectTextbox.propTypes = {
-  ...formInputPropTypes,
+SelectTextbox.propTypes = { ...formInputPropTypes,
+
   /**
    * @ignore
    * @private
    * Id attribute of the select list
    */
   "aria-controls": PropTypes.string,
+
   /**
    * @private
    * @ignore
    * Value to be displayed in the Textbox */
   formattedValue: PropTypes.string,
+
   /**
    * @private
    * @ignore
    * If true, the input will be displayed */
   hasTextCursor: PropTypes.bool,
+
   /**
    * @private
    * @ignore