carbon-react 154.3.2 → 154.3.3-beta.1

package/esm/components/select/option-group-header/option-group-header.component.js

@@ -1,30 +1 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useRef } from "react";
-import guid from "../../../__internal__/utils/helpers/guid";
-import StyledOptionGroupHeader from "./option-group-header.style";
-import Icon from "../../icon";
-const OptionGroupHeader = /*#__PURE__*/React.forwardRef(({
-  label,
-  icon,
-  style,
-  id,
-  children,
-  ...rest
-}, ref) => {
-  const internalIdRef = useRef(id || guid());
-  if (!(children || label)) {
-    // eslint-disable-next-line no-console
-    console.warn("OptionGroupHeader requires either a label or children to be provided");
-  }
-  return /*#__PURE__*/React.createElement(StyledOptionGroupHeader, _extends({
-    style: style,
-    id: internalIdRef.current
-  }, rest, {
-    ref: ref,
-    "data-component": "option-group-header"
-  }), children || /*#__PURE__*/React.createElement(React.Fragment, null, icon && /*#__PURE__*/React.createElement(Icon, {
-    type: icon
-  }), /*#__PURE__*/React.createElement("h4", null, label)));
-});
-OptionGroupHeader.displayName = "OptionGroupHeader";
-export default OptionGroupHeader;
+import{jsx as e,jsxs as r,Fragment as t}from"react/jsx-runtime";import n,{useRef as o}from"react";import i from"../../../__internal__/utils/helpers/guid/index.js";import c from"./option-group-header.style.js";import l from"../../icon/icon.component.js";function p(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}const a=n.forwardRef(((n,a)=>{var{label:u,icon:f,style:s,id:b,children:O}=n,y=function(e,r){if(null==e)return{};var t,n,o=function(e,r){if(null==e)return{};var t,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||(o[t]=e[t]);return o}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}(n,["label","icon","style","id","children"]);const d=o(b||i());return O||u||console.warn("OptionGroupHeader requires either a label or children to be provided"),e(c,(m=function(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),n.forEach((function(r){p(e,r,t[r])}))}return e}({style:s,id:d.current},y),j=null!=(j={ref:a,"data-component":"option-group-header",children:O||r(t,{children:[f&&e(l,{type:f}),e("h4",{children:u})]})})?j:{},Object.getOwnPropertyDescriptors?Object.defineProperties(m,Object.getOwnPropertyDescriptors(j)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(j)).forEach((function(e){Object.defineProperty(m,e,Object.getOwnPropertyDescriptor(j,e))})),m));var m,j}));a.displayName="OptionGroupHeader";export{a as default};

package/esm/components/select/option-group-header/option-group-header.style.js

@@ -1,32 +1 @@
-import styled from "styled-components";
-import StyledIcon from "../../icon/icon.style";
-const StyledOptionGroupHeader = styled.div`
-  box-sizing: border-box;
-  position: absolute;
-  height: 40px;
-  padding-left: 16px;
-  padding-top: 16px;
-  display: flex;
-  align-items: center;
-  width: 100%;
-
-  h4 {
-    font-size: 12px;
-    text-transform: uppercase;
-    line-height: 18px;
-    text-align: left;
-    margin: 0;
-    color: var(--colorsUtilityYin055);
-  }
-
-  ${StyledIcon} {
-    margin-right: 4px;
-    margin-left: -5px;
-    color: var(--colorsUtilityYin055);
-
-    &:hover {
-      color: var(--colorsUtilityYin055);
-    }
-  }
-`;
-export default StyledOptionGroupHeader;
+import o from"styled-components";import i from"../../icon/icon.style.js";const t=o.div.withConfig({displayName:"option-group-header.style__StyledOptionGroupHeader",componentId:"sc-48ad131f-0"})(["box-sizing:border-box;position:absolute;height:40px;padding-left:16px;padding-top:16px;display:flex;align-items:center;width:100%;h4{font-size:12px;text-transform:uppercase;line-height:18px;text-align:left;margin:0;color:var(--colorsUtilityYin055);}","{margin-right:4px;margin-left:-5px;color:var(--colorsUtilityYin055);&:hover{color:var(--colorsUtilityYin055);}}"],i);export{t as default};

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

@@ -1 +1 @@
-export { default } from "./option-row.component";
+export{default}from"./option-row.component.js";

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

@@ -1,50 +1 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useContext, useRef } from "react";
-import guid from "../../../__internal__/utils/helpers/guid";
-import StyledOptionRow from "./option-row.style";
-import SelectListContext from "../__internal__/select-list/select-list.context";
-const OptionRow = /*#__PURE__*/React.forwardRef(({
-  id,
-  text,
-  children,
-  disabled,
-  onSelect,
-  value,
-  index,
-  hidden,
-  style,
-  ...rest
-}, ref) => {
-  const internalIdRef = useRef(id || guid());
-  const handleClick = () => {
-    if (disabled) {
-      return;
-    }
-    onSelect?.({
-      text,
-      value,
-      id: internalIdRef.current
-    });
-  };
-  const selectListContext = useContext(SelectListContext);
-  let isSelected = selectListContext.currentOptionsListIndex === index;
-  if (selectListContext.multiselectValues) {
-    isSelected = selectListContext.multiselectValues.includes(value);
-  }
-  return /*#__PURE__*/React.createElement(StyledOptionRow, _extends({
-    id: internalIdRef.current,
-    ref: ref,
-    "aria-selected": isSelected,
-    "aria-disabled": disabled,
-    isDisabled: disabled,
-    onClick: handleClick,
-    isHighlighted: selectListContext.currentOptionsListIndex === index,
-    role: "option",
-    hidden: hidden,
-    style: style
-  }, rest, {
-    "data-component": "option-row"
-  }), children);
-});
-OptionRow.displayName = "OptionRow";
-export default OptionRow;
+import{jsx as e}from"react/jsx-runtime";import t,{useRef as r,useContext as n}from"react";import o from"../../../__internal__/utils/helpers/guid/index.js";import i from"./option-row.style.js";import l from"../__internal__/select-list/select-list.context.js";function c(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}const s=t.forwardRef(((t,s)=>{var{id:u,text:a,children:p,disabled:d,onSelect:f,value:b,index:O,hidden:y,style:m}=t,j=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(t,["id","text","children","disabled","onSelect","value","index","hidden","style"]);const g=r(u||o()),h=n(l);let w=h.currentOptionsListIndex===O;return h.multiselectValues&&(w=h.multiselectValues.includes(b)),e(i,(v=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){c(e,t,r[t])}))}return e}({id:g.current,ref:s,"aria-selected":w,"aria-disabled":d,isDisabled:d,onClick:()=>{d||null==f||f({text:a,value:b,id:g.current})},isHighlighted:h.currentOptionsListIndex===O,role:"option",hidden:y,style:m},j),x=null!=(x={"data-component":"option-row",children:p})?x:{},Object.getOwnPropertyDescriptors?Object.defineProperties(v,Object.getOwnPropertyDescriptors(x)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(x)).forEach((function(e){Object.defineProperty(v,e,Object.getOwnPropertyDescriptor(x,e))})),v));var v,x}));s.displayName="OptionRow";export{s as default};

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

@@ -1,42 +1 @@
-import styled, { css } from "styled-components";
-const StyledOptionRow = styled.tr`
-  cursor: pointer;
-  width: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-
-  ${({
-  hidden
-}) => hidden && "display: none;"}
-
-  ${({
-  isHighlighted
-}) => isHighlighted && css`
-      background-color: var(--colorsUtilityMajor200);
-    `}
-
-  :hover {
-    background-color: var(--colorsUtilityMajor100);
-  }
-
-  td {
-    line-height: 16px;
-    padding: 12px 16px;
-
-    &:first-child {
-      font-weight: 500;
-    }
-  }
-
-  ${({
-  isDisabled
-}) => isDisabled && css`
-      color: var(--colorsUtilityYin030);
-      cursor: not-allowed;
-      :hover {
-        background-color: var(--colorsUtilityYang100);
-      }
-    `}
-`;
-export default StyledOptionRow;
+import o,{css as t}from"styled-components";const i=o.tr.withConfig({displayName:"option-row.style__StyledOptionRow",componentId:"sc-a4c1b2fd-0"})(["cursor:pointer;width:100%;position:absolute;top:0;left:0;"," "," :hover{background-color:var(--colorsUtilityMajor100);}td{line-height:16px;padding:12px 16px;&:first-child{font-weight:500;}}",""],(({hidden:o})=>o&&"display: none;"),(({isHighlighted:o})=>o&&t(["background-color:var(--colorsUtilityMajor200);"])),(({isDisabled:o})=>o&&t(["color:var(--colorsUtilityYin030);cursor:not-allowed;:hover{background-color:var(--colorsUtilityYang100);}"])));export{i as default};

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

@@ -1,83 +1 @@
-import styled, { css } from "styled-components";
-import { margin } from "styled-system";
-import InputPresentationStyle from "../../__internal__/input/input-presentation.style";
-import StyledInput from "../../__internal__/input/input.style";
-import InputIconToggleStyle from "../../__internal__/input-icon-toggle/input-icon-toggle.style";
-import { baseTheme } from "../../style/themes";
-const StyledSelect = styled.div`
-  ${({
-  hasTextCursor,
-  disabled,
-  readOnly,
-  theme,
-  transparent,
-  isOpen
-}) => css`
-    margin-bottom: var(--fieldSpacing);
-    ${margin}
-
-    position: relative;
-
-    ${StyledInput} {
-      cursor: text;
-
-      ${disabled && css`
-        cursor: not-allowed;
-        color: var(--colorsUtilityYin030);
-        text-shadow: none;
-      `}
-
-      ${readOnly && css`
-        cursor: ${hasTextCursor ? "text" : "default"};
-        color: var(--colorsActionMinorYin090);
-        text-shadow: none;
-      `}
-    }
-
-    ${InputPresentationStyle} {
-      cursor: ${hasTextCursor ? "text" : "pointer"};
-      padding-right: 0;
-
-      ${isOpen && css`
-        z-index: ${theme.zIndex.aboveAll};
-      `}
-
-      ${disabled && css`
-        cursor: not-allowed;
-      `}
-
-      ${readOnly && css`
-        cursor: ${hasTextCursor ? "text" : "default"};
-      `}
-    }
-
-    ${InputIconToggleStyle} {
-      margin-right: 0;
-    }
-
-    ${transparent && css`
-      ${InputPresentationStyle} {
-        background: transparent;
-        border: none;
-      }
-
-      ${InputIconToggleStyle} {
-        margin-left: 0;
-      }
-    `}
-
-    ${!hasTextCursor && css`
-      ${StyledInput} {
-        position: absolute;
-        width: inherit;
-        opacity: 0;
-        padding: 0;
-      }
-    `}
-  `}
-`;
-StyledSelect.defaultProps = {
-  size: "medium",
-  theme: baseTheme
-};
-export default StyledSelect;
+import t,{css as e}from"styled-components";import{margin as o}from"styled-system";import n from"../../__internal__/input/input-presentation.style.js";import r from"../../__internal__/input/input.style.js";import i from"../../__internal__/input-icon-toggle/input-icon-toggle.style.js";import"../../style/themes/sage/index.js";import s from"../../style/themes/base/index.js";import"../../style/themes/none/index.js";const l=t.div.withConfig({displayName:"select.style__StyledSelect",componentId:"sc-d57d8d5e-0"})(["",""],(({hasTextCursor:t,disabled:s,readOnly:l,theme:a,transparent:d,isOpen:p})=>e(["margin-bottom:var(--fieldSpacing);"," position:relative;","{cursor:text;"," ","}","{cursor:",";padding-right:0;"," "," ","}","{margin-right:0;}"," ",""],o,r,s&&e(["cursor:not-allowed;color:var(--colorsUtilityYin030);text-shadow:none;"]),l&&e(["cursor:",";color:var(--colorsActionMinorYin090);text-shadow:none;"],t?"text":"default"),n,t?"text":"pointer",p&&e(["z-index:",";"],a.zIndex.aboveAll),s&&e(["cursor:not-allowed;"]),l&&e(["cursor:",";"],t?"text":"default"),i,d&&e(["","{background:transparent;border:none;}","{margin-left:0;}"],n,i),!t&&e(["","{position:absolute;width:inherit;opacity:0;padding:0;}"],r))));l.defaultProps={size:"medium",theme:s};export{l as default};

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

@@ -1 +1 @@
-export { default } from "./simple-select.component";
+export{SimpleSelect as default}from"./simple-select.component.js";

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

@@ -1,354 +1 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useState, useEffect, useRef, useCallback, useMemo } from "react";
-import invariant from "invariant";
-import { filterOutStyledSystemSpacingProps, filterStyledSystemMarginProps } from "../../../style/utils";
-import StyledSelect from "../select.style";
-import SelectTextbox from "../__internal__/select-textbox";
-import SelectList from "../__internal__/select-list/select-list.component";
-import guid from "../../../__internal__/utils/helpers/guid";
-import getNextChildByText from "../__internal__/utils/get-next-child-by-text";
-import isExpectedOption from "../__internal__/utils/is-expected-option";
-import isNavigationKey from "../__internal__/utils/is-navigation-key";
-import Logger from "../../../__internal__/utils/logger";
-import useInputAccessibility from "../../../hooks/__internal__/useInputAccessibility/useInputAccessibility";
-let deprecateUncontrolledWarnTriggered = false;
-let deprecateOptionalWarnTriggered = false;
-export const SimpleSelect = /*#__PURE__*/React.forwardRef(({
-  "aria-describedby": ariaDescribedBy,
-  "aria-label": ariaLabel,
-  "aria-labelledby": ariaLabelledby,
-  value,
-  defaultValue,
-  id,
-  label,
-  name,
-  disabled,
-  readOnly,
-  children,
-  transparent,
-  openOnFocus = false,
-  onOpen,
-  onChange,
-  onClick,
-  onFocus,
-  onKeyDown,
-  onBlur,
-  isLoading,
-  listMaxHeight,
-  onListScrollBottom,
-  tableHeader,
-  multiColumn,
-  tooltipPosition,
-  "data-element": dataElement,
-  "data-role": dataRole,
-  listPlacement = "bottom",
-  flipEnabled = true,
-  enableVirtualScroll,
-  virtualScrollOverscan,
-  isOptional,
-  required,
-  listWidth,
-  ...props
-}, ref) => {
-  if (!deprecateOptionalWarnTriggered && isOptional) {
-    deprecateOptionalWarnTriggered = true;
-    Logger.deprecate("`isOptional` is deprecated in SimpleSelect and support will soon be removed. If the value of this component is not required, use the `required` prop and set it to false instead.");
-  }
-  const selectListId = useRef(guid());
-  const containerRef = useRef(null);
-  const listboxRef = useRef(null);
-  const filterTimer = useRef(undefined);
-  const isMouseDownReported = useRef();
-  const isControlled = useRef(value !== undefined);
-  const isTimerCounting = useRef();
-  const isClickTriggeredBySelect = useRef();
-  const filterText = useRef();
-  const [textboxRef, setTextboxRef] = useState();
-  const [isOpen, setOpenState] = useState(false);
-  const [activeDescendantId, setActiveDescendantId] = useState("");
-  const [textValue, setTextValue] = useState("");
-  const [selectedValue, setSelectedValue] = useState(value || defaultValue || "");
-  const inputId = useRef(id || guid());
-  const {
-    labelId
-  } = useInputAccessibility({
-    id: inputId.current,
-    label
-  });
-  const focusTimer = useRef(undefined);
-  const componentIsUncontrolled = !isControlled || !onChange && defaultValue;
-  if (!deprecateUncontrolledWarnTriggered && componentIsUncontrolled) {
-    deprecateUncontrolledWarnTriggered = true;
-    Logger.deprecate("Uncontrolled behaviour in `Simple Select` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
-  }
-  const childOptions = useMemo(() => React.Children.toArray(children), [children]);
-  const createCustomEvent = useCallback((newValue, selectionConfirmed = false) => {
-    const customEvent = {
-      target: {
-        ...(name && {
-          name
-        }),
-        ...(id && {
-          id
-        }),
-        value: newValue
-      },
-      selectionConfirmed
-    };
-    return customEvent;
-  }, [name, id]);
-  const selectValueStartingWithText = useCallback(newFilterText => {
-    setSelectedValue(previousValue => {
-      const previousIndex = childOptions.findIndex(child => /*#__PURE__*/React.isValidElement(child) && isExpectedOption(child, previousValue));
-      const match = getNextChildByText(newFilterText, childOptions, previousIndex);
-      if (!match) {
-        return previousValue;
-      }
-      onChange?.(createCustomEvent(match.props.value));
-      if (isControlled.current) {
-        return previousValue;
-      }
-      setTextValue(match.props.text);
-      return match.props.value;
-    });
-  }, [childOptions, createCustomEvent, onChange]);
-  const triggerFilterChange = useCallback(newCharacter => {
-    if (isTimerCounting.current) {
-      const newVal = filterText.current + newCharacter;
-      filterText.current = newVal;
-      selectValueStartingWithText(newVal);
-      window.clearTimeout(filterTimer.current);
-    } else {
-      filterText.current = newCharacter;
-      selectValueStartingWithText(newCharacter);
-    }
-    isTimerCounting.current = true;
-    window.clearTimeout(filterTimer.current);
-    filterTimer.current = window.setTimeout(() => {
-      isTimerCounting.current = false;
-      filterText.current = "";
-    }, 500);
-  }, [selectValueStartingWithText]);
-  const handleTextboxKeydown = useCallback(event => {
-    const {
-      key
-    } = event;
-    onKeyDown?.(event);
-    if (readOnly) return;
-    if (key === " " || isNavigationKey(key)) {
-      event.preventDefault();
-      setOpenState(isAlreadyOpen => {
-        if (!isAlreadyOpen) onOpen?.();
-        return true;
-      });
-    } else if (key.length === 1 && !event.metaKey && !event.ctrlKey) {
-      triggerFilterChange(key);
-    }
-  }, [triggerFilterChange, onKeyDown, onOpen, readOnly]);
-  const handleGlobalClick = useCallback(event => {
-    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(() => {
-    const modeSwitchedMessage = "Input elements should not switch from uncontrolled to controlled (or vice versa). " + "Decide between using a controlled or uncontrolled input element for the lifetime of the component";
-    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);
-    }
-  }, [value, onChange]);
-  useEffect(() => {
-    const matchingOption = childOptions.find(child => isExpectedOption(child, selectedValue));
-    let newText = "";
-    if (matchingOption) {
-      newText = matchingOption.props.text;
-    }
-    setTextValue(newText);
-  }, [selectedValue, childOptions]);
-  useEffect(() => {
-    const clickEvent = "click";
-    window.addEventListener(clickEvent, handleGlobalClick);
-    return function cleanup() {
-      window.removeEventListener(clickEvent, handleGlobalClick);
-    };
-  }, [handleGlobalClick]);
-  useEffect(() => {
-    return function cleanup() {
-      window.clearTimeout(filterTimer.current);
-      window.clearTimeout(focusTimer.current);
-    };
-  }, []);
-  function handleTextboxClick(event) {
-    isMouseDownReported.current = false;
-    onClick?.(event);
-    setOpenState(isAlreadyOpen => {
-      if (isAlreadyOpen) {
-        return false;
-      }
-      onOpen?.();
-      return true;
-    });
-  }
-  function handleDropdownIconClick(event) {
-    handleTextboxClick(event);
-  }
-  function handleListMouseDown() {
-    isMouseDownReported.current = true;
-  }
-  function handleTextboxBlur(event) {
-    if (isMouseDownReported.current) {
-      return;
-    }
-    onBlur?.(event);
-  }
-  function handleTextboxMouseDown() {
-    isMouseDownReported.current = true;
-  }
-  function handleTextboxFocus(event) {
-    if (isClickTriggeredBySelect.current) {
-      return;
-    }
-    onFocus?.(event);
-    if (isMouseDownReported.current) {
-      isMouseDownReported.current = false;
-      return;
-    }
-    if (openOnFocus) {
-      window.clearTimeout(focusTimer.current);
-
-      // we need to use a timeout here as there is a race condition when rendered in a modal
-      // whereby the select list isn't visible when the select is auto focused straight away
-      focusTimer.current = window.setTimeout(() => {
-        setOpenState(isAlreadyOpen => {
-          if (isAlreadyOpen) {
-            return true;
-          }
-          onOpen?.();
-          return true;
-        });
-      });
-    }
-  }
-  function updateValue(newValue, text, selectionConfirmed) {
-    if (!isControlled.current) {
-      setSelectedValue(newValue);
-      setTextValue(text);
-    }
-    onChange?.(createCustomEvent(newValue, selectionConfirmed));
-  }
-  const onSelectOption = optionData => {
-    const {
-      text,
-      value: newValue,
-      selectionType,
-      id: selectedOptionId,
-      selectionConfirmed
-    } = optionData;
-    const isClickTriggered = selectionType === "click";
-    updateValue(newValue, text, selectionConfirmed);
-    setActiveDescendantId(selectedOptionId);
-    if (selectionType !== "navigationKey") {
-      setOpenState(false);
-    }
-    if (isClickTriggered) {
-      isClickTriggeredBySelect.current = true;
-      textboxRef?.focus();
-    }
-  };
-  const onSelectListClose = useCallback(() => {
-    setOpenState(false);
-  }, []);
-  const assignInput = useCallback(element => {
-    if (!element) return;
-    setTextboxRef(element);
-    if (!ref) return;
-    if (typeof ref === "function") {
-      ref(element);
-    } else {
-      ref.current = element;
-    }
-  }, [ref]);
-  function getTextboxProps() {
-    return {
-      id: inputId.current,
-      name,
-      disabled,
-      readOnly,
-      selectedValue,
-      formattedValue: textValue,
-      onClick: handleTextboxClick,
-      iconOnClick: handleDropdownIconClick,
-      label,
-      labelId,
-      onMouseDown: handleTextboxMouseDown,
-      onFocus: handleTextboxFocus,
-      onKeyDown: handleTextboxKeydown,
-      onBlur: handleTextboxBlur,
-      tooltipPosition,
-      required,
-      isOptional,
-      transparent,
-      ...filterOutStyledSystemSpacingProps(props),
-      "data-component": undefined
-    };
-  }
-  let placement;
-  switch (listPlacement) {
-    case "top":
-      placement = "top-end";
-      break;
-    case "bottom":
-      placement = "bottom-end";
-      break;
-    default:
-      placement = listPlacement;
-  }
-  const selectList = /*#__PURE__*/React.createElement(SelectList, {
-    ref: listboxRef,
-    id: selectListId.current,
-    labelId: labelId,
-    anchorElement: textboxRef?.parentElement || undefined,
-    onSelect: onSelectOption,
-    onMouseDown: handleListMouseDown,
-    onSelectListClose: onSelectListClose,
-    highlightedValue: selectedValue,
-    listMaxHeight: listMaxHeight,
-    isLoading: isLoading,
-    onListScrollBottom: onListScrollBottom,
-    tableHeader: tableHeader,
-    multiColumn: multiColumn,
-    listPlacement: listWidth !== undefined ? placement : listPlacement,
-    flipEnabled: flipEnabled,
-    isOpen: isOpen,
-    enableVirtualScroll: enableVirtualScroll,
-    virtualScrollOverscan: virtualScrollOverscan,
-    listWidth: listWidth
-  }, children);
-  const marginProps = filterStyledSystemMarginProps(props);
-  return /*#__PURE__*/React.createElement(StyledSelect, _extends({
-    transparent: transparent,
-    disabled: disabled,
-    readOnly: readOnly,
-    "data-component": "simple-select",
-    "data-role": dataRole,
-    "data-element": dataElement,
-    isOpen: isOpen
-  }, marginProps), /*#__PURE__*/React.createElement("div", {
-    ref: containerRef
-  }, /*#__PURE__*/React.createElement(SelectTextbox, _extends({
-    ref: assignInput,
-    ariaLabel: ariaLabel,
-    "aria-controls": selectListId.current,
-    activeDescendantId: activeDescendantId,
-    ariaLabelledby: ariaLabelledby,
-    "aria-describedby": ariaDescribedBy,
-    isOpen: isOpen
-  }, getTextboxProps()))), selectList);
-});
-export default SimpleSelect;
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import n,{useRef as r,useState as o,useMemo as l,useCallback as i,useEffect as a}from"react";import c from"invariant";import"../../../style/utils/filter-styled-system-padding-props.js";import s from"../../../style/utils/filter-styled-system-margin-props.js";import u from"../../../style/utils/filter-out-styled-system-spacing-props.js";import d from"../select.style.js";import p from"../__internal__/select-textbox/select-textbox.component.js";import m from"../__internal__/select-list/select-list.component.js";import f from"../../../__internal__/utils/helpers/guid/index.js";import b from"../__internal__/utils/get-next-child-by-text.js";import y from"../__internal__/utils/is-expected-option.js";import O from"../__internal__/utils/is-navigation-key.js";import v from"../../../__internal__/utils/logger/index.js";import w from"../../../hooks/__internal__/useInputAccessibility/useInputAccessibility.js";function g(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function h(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),r.forEach((function(t){g(e,t,n[t])}))}return e}function _(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t}(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})),e}let j=!1,S=!1;const x=n.forwardRef(((g,x)=>{var{"aria-describedby":P,"aria-label":k,"aria-labelledby":C,value:D,defaultValue:E,id:L,label:I,name:V,disabled:T,readOnly:q,children:B,transparent:H,openOnFocus:K=!1,onOpen:F,onChange:M,onClick:A,onFocus:W,onKeyDown:R,onBlur:U,isLoading:z,listMaxHeight:G,onListScrollBottom:J,tableHeader:N,multiColumn:Q,tooltipPosition:X,"data-element":Y,"data-role":Z,listPlacement:$="bottom",flipEnabled:ee=!0,enableVirtualScroll:te,virtualScrollOverscan:ne,isOptional:re,required:oe,listWidth:le}=g,ie=function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},l=Object.keys(e);for(r=0;r<l.length;r++)n=l[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(r=0;r<l.length;r++)n=l[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(g,["aria-describedby","aria-label","aria-labelledby","value","defaultValue","id","label","name","disabled","readOnly","children","transparent","openOnFocus","onOpen","onChange","onClick","onFocus","onKeyDown","onBlur","isLoading","listMaxHeight","onListScrollBottom","tableHeader","multiColumn","tooltipPosition","data-element","data-role","listPlacement","flipEnabled","enableVirtualScroll","virtualScrollOverscan","isOptional","required","listWidth"]);!S&&re&&(S=!0,v.deprecate("`isOptional` is deprecated in SimpleSelect and support will soon be removed. If the value of this component is not required, use the `required` prop and set it to false instead."));const ae=r(f()),ce=r(null),se=r(null),ue=r(void 0),de=r(),pe=r(void 0!==D),me=r(),fe=r(),be=r(),[ye,Oe]=o(),[ve,we]=o(!1),[ge,he]=o(""),[_e,je]=o(""),[Se,xe]=o(D||E||""),Pe=r(L||f()),{labelId:ke}=w({id:Pe.current,label:I}),Ce=r(void 0);!j&&(!pe||!M&&E)&&(j=!0,v.deprecate("Uncontrolled behaviour in `Simple Select` is deprecated and support will soon be removed. Please make sure all your inputs are controlled."));const De=l((()=>n.Children.toArray(B)),[B]),Ee=i(((e,t=!1)=>({target:_(h({},V&&{name:V},L&&{id:L}),{value:e}),selectionConfirmed:t})),[V,L]),Le=i((e=>{xe((t=>{const r=De.findIndex((e=>n.isValidElement(e)&&y(e,t))),o=b(e,De,r);return o?(null==M||M(Ee(o.props.value)),pe.current?t:(je(o.props.text),o.props.value)):t}))}),[De,Ee,M]),Ie=i((e=>{if(me.current){const t=be.current+e;be.current=t,Le(t),window.clearTimeout(ue.current)}else be.current=e,Le(e);me.current=!0,window.clearTimeout(ue.current),ue.current=window.setTimeout((()=>{me.current=!1,be.current=""}),500)}),[Le]),Ve=i((e=>{const{key:t}=e;null==R||R(e),q||(" "===t||O(t)?(e.preventDefault(),we((e=>(e||null==F||F(),!0)))):1!==t.length||e.metaKey||e.ctrlKey||Ie(t))}),[Ie,R,F,q]),Te=i((e=>{const t=ce.current&&!ce.current.contains(e.target),n=se.current&&!se.current.contains(e.target);de.current=!1,t&&n&&!fe.current&&we(!1),fe.current=!1}),[]);function qe(e){de.current=!1,null==A||A(e),we((e=>!e&&(null==F||F(),!0)))}a((()=>{c(pe.current===(void 0!==D),"Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component"),c(!pe.current||pe.current&&M,"onChange prop required when using a controlled input element"),pe.current&&xe(D)}),[D,M]),a((()=>{const e=De.find((e=>y(e,Se)));let t="";e&&(t=e.props.text),je(t)}),[Se,De]),a((()=>{const e="click";return window.addEventListener(e,Te),function(){window.removeEventListener(e,Te)}}),[Te]),a((()=>function(){window.clearTimeout(ue.current),window.clearTimeout(Ce.current)}),[]);const Be=i((()=>{we(!1)}),[]),He=i((e=>{e&&(Oe(e),x&&("function"==typeof x?x(e):x.current=e))}),[x]);let Ke;switch($){case"top":Ke="top-end";break;case"bottom":Ke="bottom-end";break;default:Ke=$}const Fe=e(m,{ref:se,id:ae.current,labelId:ke,anchorElement:(null==ye?void 0:ye.parentElement)||void 0,onSelect:e=>{const{text:t,value:n,selectionType:r,id:o,selectionConfirmed:l}=e,i="click"===r;!function(e,t,n){pe.current||(xe(e),je(t)),null==M||M(Ee(e,n))}(n,t,l),he(o),"navigationKey"!==r&&we(!1),i&&(fe.current=!0,null==ye||ye.focus())},onMouseDown:function(){de.current=!0},onSelectListClose:Be,highlightedValue:Se,listMaxHeight:G,isLoading:z,onListScrollBottom:J,tableHeader:N,multiColumn:Q,listPlacement:void 0!==le?Ke:$,flipEnabled:ee,isOpen:ve,enableVirtualScroll:te,virtualScrollOverscan:ne,listWidth:le,children:B}),Me=s(ie);return t(d,_(h({transparent:H,disabled:T,readOnly:q,"data-component":"simple-select","data-role":Z,"data-element":Y,isOpen:ve},Me),{children:[e("div",{ref:ce,children:e(p,h({ref:He,ariaLabel:k,"aria-controls":ae.current,activeDescendantId:ge,ariaLabelledby:C,"aria-describedby":P,isOpen:ve},_(h({id:Pe.current,name:V,disabled:T,readOnly:q,selectedValue:Se,formattedValue:_e,onClick:qe,iconOnClick:function(e){qe(e)},label:I,labelId:ke,onMouseDown:function(){de.current=!0},onFocus:function(e){fe.current||(null==W||W(e),de.current?de.current=!1:K&&(window.clearTimeout(Ce.current),Ce.current=window.setTimeout((()=>{we((e=>(e||null==F||F(),!0)))}))))},onKeyDown:Ve,onBlur:function(e){de.current||null==U||U(e)},tooltipPosition:X,required:oe,isOptional:re,transparent:H},u(ie)),{"data-component":void 0})))}),Fe]}))}));export{x as SimpleSelect,x as default};

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

@@ -1 +1 @@
-export { default } from "./settings-row.component";
+export{SettingsRow as default}from"./settings-row.component.js";