carbon-react 118.5.1 → 118.5.2

package/esm/components/select/option-row/option-row.component.js

@@ -1,35 +1,32 @@
-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); }
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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, { useContext } from "react";
 import PropTypes from "prop-types";
 import StyledOptionRow from "./option-row.style";
 import SelectListContext from "../__internal__/select-list-context";
-const OptionRow = /*#__PURE__*/React.forwardRef(({
-  id,
-  text,
-  children,
-  onSelect,
-  value,
-  index,
-  hidden,
-  style,
-  ...rest
-}, ref) => {
+const OptionRow = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    id,
+    text,
+    children,
+    onSelect,
+    value,
+    index,
+    hidden,
+    style,
+    ...rest
+  } = _ref;
   const handleClick = () => {
-    onSelect === null || onSelect === void 0 ? void 0 : onSelect({
+    onSelect?.({
       id,
       text,
       value
     });
   };
-
   const selectListContext = useContext(SelectListContext);
   let isSelected = selectListContext.currentOptionsListIndex === index;
-
   if (selectListContext.multiselectValues) {
     isSelected = selectListContext.multiselectValues.includes(value);
   }
-
   return /*#__PURE__*/React.createElement(StyledOptionRow, _extends({
     id: id,
     ref: ref,

package/esm/components/select/option-row/option-row.style.js

@@ -6,15 +6,21 @@ const StyledOptionRow = styled.tr`
   left: 0;
   width: 100%;
 
-  ${({
-  hidden
-}) => hidden && "display: none;"}
+  ${_ref => {
+  let {
+    hidden
+  } = _ref;
+  return hidden && "display: none;";
+}}
 
-  ${({
-  isHighlighted
-}) => isHighlighted && css`
+  ${_ref2 => {
+  let {
+    isHighlighted
+  } = _ref2;
+  return isHighlighted && css`
       background-color: var(--colorsUtilityMajor200);
-    `}
+    `;
+}}
 
   :hover {
     background-color: var(--colorsUtilityMajor100);

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

@@ -5,21 +5,30 @@ const StyledSelectListContainer = styled.div`
   box-shadow: var(--boxShadow100);
   animation: fadeIn 250ms ease-out;
   position: absolute;
-  z-index: ${({
-  theme
-}) => theme.zIndex.popover};
-  max-height: ${({
-  maxHeight
-}) => `${maxHeight}px`};
+  z-index: ${_ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.zIndex.popover;
+}};
+  max-height: ${_ref2 => {
+  let {
+    maxHeight
+  } = _ref2;
+  return `${maxHeight}px`;
+}};
   overflow-y: auto;
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
   border-radius: var(--borderRadius050);
 
-  ${({
-  isLoading
-}) => isLoading && "min-height: 150px"};
+  ${_ref3 => {
+  let {
+    isLoading
+  } = _ref3;
+  return isLoading && "min-height: 150px";
+}};
 
   @keyframes fadeIn {
     0% {

package/esm/components/select/select-list/select-list.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); }
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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";
@@ -24,34 +23,33 @@ const SCROLL_OPTIONS = {
   behavior: "auto",
   align: "end"
 };
-const SelectList = /*#__PURE__*/React.forwardRef(({
-  listMaxHeight = 180,
-  listActionButton,
-  id,
-  labelId,
-  children,
-  onSelect,
-  onSelectListClose,
-  filterText,
-  anchorElement,
-  highlightedValue,
-  disablePortal,
-  onListAction,
-  isLoading,
-  onListScrollBottom,
-  multiColumn,
-  tableHeader,
-  loaderDataRole,
-  listPlacement = "bottom",
-  flipEnabled = true,
-  isOpen,
-  multiselectValues,
-  enableVirtualScroll,
-  virtualScrollOverscan = 5,
-  ...listProps
-}, listContainerRef) => {
-  var _childIdsRef$current;
-
+const SelectList = /*#__PURE__*/React.forwardRef((_ref, listContainerRef) => {
+  let {
+    listMaxHeight = 180,
+    listActionButton,
+    id,
+    labelId,
+    children,
+    onSelect,
+    onSelectListClose,
+    filterText,
+    anchorElement,
+    highlightedValue,
+    disablePortal,
+    onListAction,
+    isLoading,
+    onListScrollBottom,
+    multiColumn,
+    tableHeader,
+    loaderDataRole,
+    listPlacement = "bottom",
+    flipEnabled = true,
+    isOpen,
+    multiselectValues,
+    enableVirtualScroll,
+    virtualScrollOverscan = 5,
+    ...listProps
+  } = _ref;
   const [currentOptionsListIndex, setCurrentOptionsListIndex] = useState(-1);
   const [scrollbarWidth, setScrollbarWidth] = useState(0);
   const lastFilter = useRef("");
@@ -79,7 +77,6 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
     if (isOpen) {
       blockScroll();
     }
-
     return () => {
       if (isOpen) {
         allowScroll();
@@ -88,64 +85,54 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
   }, [allowScroll, blockScroll, isOpen]);
   useLayoutEffect(() => {
     if (multiColumn) {
-      setScrollbarWidth(tableRef.current ? tableRef.current.offsetWidth - tableRef.current.clientWidth :
-      /* istanbul ignore next */
-      0);
+      setScrollbarWidth(tableRef.current ? tableRef.current.offsetWidth - tableRef.current.clientWidth : /* istanbul ignore next */0);
     }
   }, [multiColumn]);
   const anchorRef = useMemo(() => ({
     current: anchorElement || null
   }), [anchorElement]);
   const handleSelect = useCallback(optionData => {
-    onSelect({ ...optionData,
+    onSelect({
+      ...optionData,
       selectionType: "click"
     });
   }, [onSelect]);
-  const childIdsRef = useRef(null); // childIds should be stable except when children are added or removed - can't use useMemo
-  // as that isn't absolutely guaranteed to never rerun when dependencies haven't changed.
+  const childIdsRef = useRef(null);
 
+  // childIds should be stable except when children are added or removed - can't use useMemo
+  // as that isn't absolutely guaranteed to never rerun when dependencies haven't changed.
   const setChildIds = () => {
-    childIdsRef.current = React.Children.map(children, () => guid()) ||
-    /* istanbul ignore next */
-    null;
+    childIdsRef.current = React.Children.map(children, () => guid()) || /* istanbul ignore next */null;
   };
-
-  if (((_childIdsRef$current = childIdsRef.current) === null || _childIdsRef$current === void 0 ? void 0 : _childIdsRef$current.length) !== React.Children.count(children)) {
+  if (childIdsRef.current?.length !== React.Children.count(children)) {
     setChildIds();
   }
-
   const childIds = childIdsRef.current;
   const childrenList = useMemo(() => React.Children.toArray(children), [children]);
   const optionChildrenList = useMemo(() => childrenList.filter(child => /*#__PURE__*/React.isValidElement(child) && (child.type === Option || child.type === OptionRow)), [childrenList]);
   const {
     measureElement
   } = virtualizer;
-
   const measureCallback = element => {
     // need a guard to prevent crash with too many rerenders when closing the list
     if (isOpen) {
       measureElement(element);
     }
   };
-
   const renderedChildren = items.map(item => {
     const {
       index,
       start
     } = item;
     const child = childrenList[index];
-
     if (! /*#__PURE__*/React.isValidElement(child)) {
       return child;
     }
-
     const optionChildIndex = optionChildrenList.indexOf(child);
     const isOption = optionChildIndex > -1;
     const newProps = {
       index,
-      id: childIds ? childIds[index] :
-      /* istanbul ignore next */
-      undefined,
+      id: childIds ? childIds[index] : /* istanbul ignore next */undefined,
       onSelect: handleSelect,
       hidden: isLoading && childrenList.length === 1,
       // these need to be inline styles rather than implemented in styled-components to avoid it generating thousands of classes
@@ -165,11 +152,9 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
     const lastIndex = lastOptionIndex;
     let nextIndex = getNextIndexByKey(key, indexOfHighlighted, lastIndex, isLoading);
     const nextElement = childrenList[nextIndex];
-
     if ( /*#__PURE__*/React.isValidElement(nextElement) && nextElement.type !== Option && nextElement.type !== OptionRow) {
       nextIndex = getNextHighlightableItemIndex(key, nextIndex);
     }
-
     return nextIndex;
   }, [childrenList, lastOptionIndex, isLoading]);
   const getIndexOfMatch = useCallback(valueToMatch => {
@@ -177,18 +162,14 @@ 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
@@ -197,9 +178,7 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
       text,
       value,
       selectionType: "navigationKey",
-      id: childIds ? childIds[nextIndex] :
-      /* istanbul ignore next */
-      undefined
+      id: childIds ? childIds[nextIndex] : /* istanbul ignore next */undefined
     });
   }, [childrenList, currentOptionsListIndex, getIndexOfMatch, getNextHighlightableItemIndex, highlightedValue, onSelect, childIds]);
   const handleActionButtonTab = useCallback((event, isActionButtonFocused) => {
@@ -208,10 +187,8 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
         selectionType: "tab"
       });
     } else {
-      var _listActionButtonRef$;
-
       event.preventDefault();
-      (_listActionButtonRef$ = listActionButtonRef.current) === null || _listActionButtonRef$ === void 0 ? void 0 : _listActionButtonRef$.focus();
+      listActionButtonRef.current?.focus();
     }
   }, [onSelect]);
   const focusOnAnchor = useCallback(() => {
@@ -223,12 +200,10 @@ 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") {
@@ -236,20 +211,16 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
     } else if (key === "Enter" && !isActionButtonFocused) {
       event.preventDefault();
       const currentOption = childrenList[currentOptionsListIndex];
-
       if (! /*#__PURE__*/React.isValidElement(currentOption)) {
         onSelectListClose();
         return;
       }
-
       const {
         text,
         value
       } = currentOption.props;
       onSelect({
-        id: childIds ? childIds[currentOptionsListIndex] :
-        /* istanbul ignore next */
-        undefined,
+        id: childIds ? childIds[currentOptionsListIndex] : /* istanbul ignore next */undefined,
         text,
         value,
         selectionType: "enterKey"
@@ -272,8 +243,8 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
   });
   const handleListScroll = useCallback(event => {
     const element = event.target;
-    /* istanbul ignore else */
 
+    /* istanbul ignore else */
     if (onListScrollBottom && element.scrollHeight - element.scrollTop === element.clientHeight) {
       onListScrollBottom();
     }
@@ -282,10 +253,10 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
     const keyboardEvent = "keydown";
     const listElement = listContainerRef.current;
     window.addEventListener(keyboardEvent, handleGlobalKeydown);
-    listElement === null || listElement === void 0 ? void 0 : listElement.addEventListener("scroll", handleListScroll);
+    listElement?.addEventListener("scroll", handleListScroll);
     return function cleanup() {
       window.removeEventListener(keyboardEvent, handleGlobalKeydown);
-      listElement === null || listElement === void 0 ? void 0 : listElement.removeEventListener("scroll", handleListScroll);
+      listElement?.removeEventListener("scroll", handleListScroll);
     };
   }, [handleGlobalKeydown, handleListScroll, listContainerRef]);
   useEffect(() => {
@@ -293,15 +264,12 @@ 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);
       virtualizer.scrollToIndex(indexOfMatch, SCROLL_OPTIONS);
       return indexOfMatch;
@@ -311,41 +279,38 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
     if (!highlightedValue) {
       return;
     }
-
     const indexOfMatch = getIndexOfMatch(highlightedValue);
-
     if (indexOfMatch === -1) {
       return;
     }
-
     setCurrentOptionsListIndex(indexOfMatch);
-    virtualizer.scrollToIndex(indexOfMatch, SCROLL_OPTIONS); // TODO: is there a better way than calling handleListScroll manually?
-
+    virtualizer.scrollToIndex(indexOfMatch, SCROLL_OPTIONS);
+    // TODO: is there a better way than calling handleListScroll manually?
     handleListScroll({
       target: listContainerRef.current
     });
   }, [getIndexOfMatch, highlightedValue, virtualizer, handleListScroll, listContainerRef]);
   useEffect(() => {
     if (isLoading && currentOptionsListIndex === lastOptionIndex && lastOptionIndex > -1) {
-      virtualizer.scrollToIndex(lastOptionIndex, { ...SCROLL_OPTIONS,
+      virtualizer.scrollToIndex(lastOptionIndex, {
+        ...SCROLL_OPTIONS,
         align: "start"
       });
     }
   }, [children, currentOptionsListIndex, isLoading, lastOptionIndex, listContainerRef, virtualizer]);
   const popoverMiddleware = useMemo(() => [offset(3), size({
-    apply({
-      rects,
-      elements
-    }) {
+    apply(_ref2) {
+      let {
+        rects,
+        elements
+      } = _ref2;
       Object.assign(elements.floating.style, {
         width: `${rects.reference.width}px`
       });
     }
-
   }), ...(flipEnabled ? [flip({
     fallbackStrategy: "initialPlacement"
   })] : [])], [flipEnabled]);
-
   const loader = () => {
     return /*#__PURE__*/React.createElement(StyledSelectLoaderContainer, {
       key: "loader"
@@ -353,7 +318,6 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
       "data-role": loaderDataRole
     }));
   };
-
   let selectListContent = renderedChildren;
   const listBoxProps = {
     role: "listbox",
@@ -363,12 +327,9 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
   };
   useLayoutEffect(() => {
     if (listActionButton && isOpen) {
-      var _listActionButtonRef$2, _listActionButtonRef$3;
-
-      actionButtonHeight.current = ((_listActionButtonRef$2 = listActionButtonRef.current) === null || _listActionButtonRef$2 === void 0 ? void 0 : (_listActionButtonRef$3 = _listActionButtonRef$2.parentElement) === null || _listActionButtonRef$3 === void 0 ? void 0 : _listActionButtonRef$3.offsetHeight) || 0;
+      actionButtonHeight.current = listActionButtonRef.current?.parentElement?.offsetHeight || 0;
     }
   }, [listActionButton, isOpen]);
-
   if (multiColumn) {
     selectListContent = /*#__PURE__*/React.createElement(StyledSelectListTable, null, /*#__PURE__*/React.createElement(StyledSelectListTableHeader, {
       scrollbarWidth: scrollbarWidth
@@ -378,7 +339,6 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
       listHeight: listHeight - TABLE_HEADER_HEIGHT
     }), renderedChildren));
   }
-
   return /*#__PURE__*/React.createElement(SelectListContext.Provider, {
     value: {
       currentOptionsListIndex,

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

@@ -1,8 +1,10 @@
 import styled, { css } from "styled-components";
 const StyledSelectList = styled.ul`
-  ${({
-  listHeight
-}) => css`
+  ${_ref => {
+  let {
+    listHeight
+  } = _ref;
+  return css`
     box-sizing: border-box;
     display: flex;
     align-items: flex-start;
@@ -14,7 +16,8 @@ const StyledSelectList = styled.ul`
     position: relative;
     width: 100%;
     ${listHeight === undefined ? "" : `height: ${listHeight}px;`}
-  `}
+  `;
+}}
 `;
 const StyledSelectLoaderContainer = styled.div`
   display: flex;
@@ -51,9 +54,12 @@ const StyledSelectListTableHeader = styled.thead`
   z-index: 1;
 
   tr {
-    width: ${({
-  scrollbarWidth
-}) => `calc(100% - ${scrollbarWidth}px)`};
+    width: ${_ref2 => {
+  let {
+    scrollbarWidth
+  } = _ref2;
+  return `calc(100% - ${scrollbarWidth}px)`;
+}};
   }
 
   th {
@@ -87,8 +93,11 @@ const StyledSelectListTableBody = styled.tbody`
   width: 100%;
   table-layout: fixed;
   width: 100%;
-  height: ${({
-  listHeight
-}) => `${listHeight}px`};
+  height: ${_ref3 => {
+  let {
+    listHeight
+  } = _ref3;
+  return `${listHeight}px`;
+}};
 `;
 export { StyledSelectList, StyledSelectLoaderContainer, StyledSelectListTable, StyledSelectListTableHeader, StyledSelectListTableBody };