carbon-react 154.3.2 → 154.4.0-beta.0

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

@@ -1,486 +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 } from "react";
-import invariant from "invariant";
-import { filterOutStyledSystemSpacingProps, filterStyledSystemMarginProps } from "../../../style/utils";
-import SelectTextbox from "../__internal__/select-textbox";
-import guid from "../../../__internal__/utils/helpers/guid";
-import withFilter from "../__internal__/utils/with-filter.hoc";
-import StyledSelect from "../select.style";
-import SelectList from "../__internal__/select-list/select-list.component";
-import isExpectedOption from "../__internal__/utils/is-expected-option";
-import areObjectsEqual from "../__internal__/utils/are-objects-equal";
-import isNavigationKey from "../__internal__/utils/is-navigation-key";
-import Logger from "../../../__internal__/utils/logger";
-import useStableCallback from "../../../hooks/__internal__/useStableCallback";
-import useInputAccessibility from "../../../hooks/__internal__/useInputAccessibility/useInputAccessibility";
-let deprecateUncontrolledWarnTriggered = false;
-const FilterableSelectList = withFilter(SelectList);
-let deprecateOptionalWarnTriggered = false;
-export const FilterableSelect = /*#__PURE__*/React.forwardRef(({
-  "aria-label": ariaLabel,
-  "aria-labelledby": ariaLabelledby,
-  value,
-  defaultValue,
-  id,
-  name,
-  label,
-  children,
-  onOpen: onOpenProp,
-  onChange,
-  onFilterChange: onFilterChangeProp,
-  onClick,
-  onKeyDown,
-  onFocus,
-  onBlur,
-  openOnFocus,
-  noResultsMessage,
-  listActionButton,
-  listMaxHeight,
-  onListAction,
-  isLoading,
-  disabled,
-  readOnly,
-  onListScrollBottom,
-  tableHeader,
-  multiColumn,
-  "data-element": dataElement,
-  "data-role": dataRole,
-  tooltipPosition,
-  listPlacement = "bottom",
-  flipEnabled = true,
-  enableVirtualScroll,
-  virtualScrollOverscan,
-  disableDefaultFiltering = false,
-  isOptional,
-  required,
-  listWidth,
-  ...textboxProps
-}, ref) => {
-  if (!deprecateOptionalWarnTriggered && isOptional) {
-    deprecateOptionalWarnTriggered = true;
-    Logger.deprecate("`isOptional` is deprecated in FilterableSelect 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 [activeDescendantId, setActiveDescendantId] = useState("");
-  const selectListId = useRef(guid());
-  const containerRef = useRef(null);
-  const listboxRef = useRef(null);
-  const isControlled = useRef(value !== undefined);
-  const isMouseDownReported = useRef(false);
-  const isInputFocused = useRef(false);
-  const isMouseDownOnInput = useRef(false);
-  const [textboxRef, setTextboxRef] = useState();
-  const [isOpen, setOpen] = useState(false);
-  const [textValue, setTextValue] = useState("");
-  const [selectedValue, setSelectedValue] = useState(value || defaultValue || "");
-  const receivedValue = useRef(value);
-  const [highlightedValue, setHighlightedValue] = useState("");
-  const [filterText, setFilterText] = useState("");
-  const inputId = useRef(id || guid());
-  const {
-    labelId
-  } = useInputAccessibility({
-    id: inputId.current,
-    label
-  });
-  const focusTimer = useRef(null);
-  const openOnFocusFlagBlock = useRef(false);
-  const componentIsUncontrolled = !isControlled || !onChange && defaultValue;
-  if (!deprecateUncontrolledWarnTriggered && componentIsUncontrolled) {
-    deprecateUncontrolledWarnTriggered = true;
-    Logger.deprecate("Uncontrolled behaviour in `Filterable Select` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
-  }
-  const createCustomEvent = useCallback((newValue, selectionConfirmed) => {
-    const customEvent = {
-      target: {
-        ...(name && {
-          name
-        }),
-        ...(id && {
-          id
-        }),
-        value: newValue
-      },
-      selectionConfirmed
-    };
-    return customEvent;
-  }, [name, id]);
-  const triggerChange = useCallback((newValue, selectionConfirmed) => {
-    /* istanbul ignore else */
-    if (onChange) {
-      onChange(createCustomEvent(newValue, selectionConfirmed));
-    }
-  }, [onChange, createCustomEvent]);
-  function findElementWithMatchingText(textToMatch, list) {
-    return React.Children.toArray(list).find(child => {
-      const {
-        text
-      } = child.props;
-      return text?.toLowerCase().indexOf(textToMatch?.toLowerCase()) !== -1;
-    });
-  }
-  const updateValues = useCallback((newFilterText, isDeleteEvent) => {
-    setSelectedValue(previousValue => {
-      const trimmed = newFilterText.trimStart();
-      const match = findElementWithMatchingText(trimmed, children);
-      const isFilterCleared = isDeleteEvent && !newFilterText.length;
-      if (!match || isFilterCleared || match.props.disabled) {
-        setTextValue(newFilterText);
-        triggerChange("", false);
-        return "";
-      }
-      if (trimmed.length) {
-        triggerChange(match.props.value, false);
-      }
-      if (isDeleteEvent) {
-        setTextValue(newFilterText);
-        return match.props.value;
-      }
-      if (trimmed.length && match.props.text?.toLowerCase().startsWith(trimmed.toLowerCase())) {
-        setTextValue(match.props.text);
-      } else {
-        setTextValue(newFilterText);
-      }
-      if (isControlled.current) {
-        return previousValue;
-      }
-      setHighlightedValue(match.props.value);
-      return match.props.value;
-    });
-  }, [children, triggerChange]);
-  const setMatchingText = useCallback((newValue, isClosing = false) => {
-    const matchingOption = React.Children.toArray(children).find(child => /*#__PURE__*/React.isValidElement(child) && isExpectedOption(child, newValue));
-    if (!matchingOption || matchingOption.props.text === undefined) {
-      setTextValue(filterText || "");
-      return;
-    }
-
-    /* istanbul ignore else */
-    if (isClosing || matchingOption.props.text?.toLowerCase().startsWith(filterText?.toLowerCase().trim())) {
-      setTextValue(matchingOption.props.text);
-    }
-  }, [children, filterText]);
-  const handleTextboxChange = useCallback(event => {
-    const newValue = event.target.value;
-    const {
-      inputType
-    } = event.nativeEvent;
-    const isDeleteEvent = inputType === "deleteContentBackward" || inputType === "deleteContentForward" || inputType === "delete";
-    updateValues(newValue, isDeleteEvent);
-    setFilterText(newValue);
-    setOpen(true);
-  }, [updateValues]);
-  const fillLastFilterCharacter = useCallback(key => {
-    setFilterText(previousFilterText => {
-      if (previousFilterText?.length === textValue?.length - 1 && key === textValue.slice(-1)) {
-        return textValue;
-      }
-      return previousFilterText;
-    });
-  }, [textValue]);
-  const handleTextboxKeydown = useCallback(event => {
-    const {
-      key
-    } = event;
-    if (onKeyDown) {
-      onKeyDown(event);
-    }
-    if (readOnly) {
-      return;
-    }
-    if (!event.defaultPrevented && isNavigationKey(key)) {
-      event.preventDefault();
-      setOpen(true);
-    }
-    fillLastFilterCharacter(key);
-  }, [fillLastFilterCharacter, onKeyDown, readOnly]);
-  const valueToUse = isControlled.current ? value : selectedValue;
-  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) {
-      setMatchingText(valueToUse, true);
-      setOpen(false);
-    }
-  }, [setMatchingText, valueToUse]);
-  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(prevValue => {
-        if (value && prevValue !== value) {
-          setMatchingText(value);
-        }
-        return value;
-      });
-      setHighlightedValue(value);
-    } else {
-      if (textValue !== selectedValue) {
-        setMatchingText(selectedValue);
-      }
-      if (highlightedValue !== selectedValue) {
-        setHighlightedValue(selectedValue);
-      }
-    }
-    // prevent value update on filter change
-    // selectedValue and highlightedValue omitted from deps, only want uncontrolled change if onChange/children update
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [value, onChange, children]);
-  const onOpen = useStableCallback(onOpenProp);
-  useEffect(() => {
-    if (!isOpen) {
-      setFilterText("");
-    } else if (onOpen) {
-      onOpen();
-    }
-  }, [onOpen, isOpen]);
-  useEffect(() => {
-    const hasListActionButton = listActionButton !== undefined;
-    const onListActionMissingMessage = "onListAction prop required when using listActionButton prop";
-    !(!hasListActionButton || hasListActionButton && onListAction) ? process.env.NODE_ENV !== "production" ? invariant(false, onListActionMissingMessage) : invariant(false) : void 0;
-  }, [listActionButton, onListAction]);
-  const isFirstRender = useRef(true);
-  useEffect(() => {
-    // when we render for the first time, we run setMatchingText to populate the input with the correct text
-    if (isFirstRender.current) {
-      setMatchingText(selectedValue);
-    }
-    if (isControlled.current) {
-      // when value is an object we should only run setMatchingText if the object changes between renders
-      if (typeof value === "object" && typeof receivedValue.current === "object") {
-        if (!areObjectsEqual(value, receivedValue.current)) {
-          setMatchingText(value);
-          receivedValue.current = value;
-        }
-      } else {
-        setMatchingText(value);
-      }
-    }
-    // update text value only when children are changing
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [value, children]);
-  const onFilterChange = useStableCallback(onFilterChangeProp);
-  useEffect(() => {
-    if (onFilterChange && !isFirstRender.current) {
-      onFilterChange(filterText);
-    }
-  }, [onFilterChange, filterText]);
-  useEffect(() => {
-    isFirstRender.current = false;
-  }, []);
-  useEffect(() => {
-    const clickEvent = "click";
-    window.addEventListener(clickEvent, handleGlobalClick);
-    return function cleanup() {
-      window.removeEventListener(clickEvent, handleGlobalClick);
-    };
-  }, [handleGlobalClick]);
-  useEffect(() => {
-    const trimmed = filterText?.trimStart();
-    const textStartsWithFilter = textValue?.toLowerCase().startsWith(trimmed.toLowerCase());
-    const isTextboxActive = !disabled && !readOnly;
-    if (isTextboxActive && textboxRef && trimmed.length && textValue?.length > trimmed.length && textStartsWithFilter) {
-      textboxRef.selectionStart = trimmed.length;
-    }
-  }, [textValue, filterText, textboxRef, disabled, readOnly]);
-  const onSelectOption = useCallback(optionData => {
-    const {
-      id: selectedOptionId,
-      text,
-      value: newValue,
-      selectionType,
-      selectionConfirmed
-    } = optionData;
-    if (!isControlled.current) {
-      setSelectedValue(newValue);
-      setHighlightedValue(newValue);
-    }
-    setTextValue(text);
-    triggerChange(newValue, !!selectionConfirmed);
-    setActiveDescendantId(selectedOptionId);
-    if (selectionType !== "navigationKey") {
-      openOnFocusFlagBlock.current = !!openOnFocus;
-      setOpen(false);
-      textboxRef?.focus();
-      textboxRef?.select();
-      openOnFocusFlagBlock.current = false;
-    }
-  }, [textboxRef, triggerChange, openOnFocus]);
-  const onSelectListClose = useCallback(() => {
-    setOpen(false);
-    setMatchingText(selectedValue, true);
-  }, [selectedValue, setMatchingText]);
-  function handleTextboxClick(event) {
-    isMouseDownReported.current = false;
-    if (onClick) {
-      onClick(event);
-    }
-    setOpen(true);
-  }
-  function handleDropdownIconClick(event) {
-    isMouseDownReported.current = false;
-    if (onClick) {
-      onClick(event);
-    }
-    setOpen(isAlreadyOpen => {
-      return !isAlreadyOpen;
-    });
-  }
-  useEffect(() => {
-    return () => {
-      if (focusTimer.current) {
-        clearTimeout(focusTimer.current);
-      }
-    };
-  }, []);
-  function handleTextboxFocus(event) {
-    const triggerFocus = () => onFocus?.(event);
-    if (openOnFocus) {
-      if (focusTimer.current) {
-        clearTimeout(focusTimer.current);
-      }
-      if (openOnFocusFlagBlock.current) {
-        return;
-      }
-
-      // 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 = setTimeout(() => {
-        setOpen(isAlreadyOpen => {
-          if (isAlreadyOpen) {
-            return true;
-          }
-          if (onFocus && !isInputFocused.current) {
-            triggerFocus();
-            isInputFocused.current = true;
-          }
-          if (isMouseDownReported.current && !isMouseDownOnInput.current) {
-            return false;
-          }
-          return true;
-        });
-      });
-    } else if (onFocus && !isInputFocused.current) {
-      triggerFocus();
-      isInputFocused.current = true;
-    }
-  }
-  function handleTextboxBlur(event) {
-    isMouseDownOnInput.current = false;
-    if (isMouseDownReported.current) {
-      return;
-    }
-    isInputFocused.current = false;
-    if (onBlur) {
-      onBlur(event);
-    }
-  }
-  function handleTextboxMouseDown(event) {
-    isMouseDownReported.current = true;
-    if (event.target.dataset.element === "input") {
-      isMouseDownOnInput.current = true;
-    }
-  }
-  function handleListMouseDown() {
-    isMouseDownReported.current = true;
-  }
-  function handleOnListAction() {
-    setOpen(false);
-    onListAction?.();
-  }
-  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,
-      label,
-      disabled,
-      readOnly,
-      selectedValue,
-      formattedValue: textValue,
-      onClick: handleTextboxClick,
-      iconOnClick: handleDropdownIconClick,
-      iconOnMouseDown: handleTextboxMouseDown,
-      onFocus: handleTextboxFocus,
-      onBlur: handleTextboxBlur,
-      onKeyDown: handleTextboxKeydown,
-      onChange: handleTextboxChange,
-      onMouseDown: handleTextboxMouseDown,
-      tooltipPosition,
-      required,
-      isOptional,
-      ...filterOutStyledSystemSpacingProps(textboxProps),
-      "data-component": undefined
-    };
-  }
-  let placement;
-  switch (listPlacement) {
-    case "top":
-      placement = "top-end";
-      break;
-    case "bottom":
-      placement = "bottom-end";
-      break;
-    default:
-      placement = listPlacement;
-  }
-  const selectListProps = {
-    ref: listboxRef,
-    id: selectListId.current,
-    labelId,
-    anchorElement: textboxRef?.parentElement || undefined,
-    onSelect: onSelectOption,
-    onSelectListClose,
-    onMouseDown: handleListMouseDown,
-    filterText: filterText.trim(),
-    highlightedValue,
-    noResultsMessage,
-    listActionButton,
-    listMaxHeight,
-    onListAction: handleOnListAction,
-    isLoading,
-    onListScrollBottom,
-    tableHeader,
-    multiColumn,
-    listPlacement: listWidth !== undefined ? placement : listPlacement,
-    flipEnabled,
-    isOpen,
-    enableVirtualScroll,
-    virtualScrollOverscan,
-    listWidth
-  };
-  const selectList = disableDefaultFiltering ? /*#__PURE__*/React.createElement(SelectList, selectListProps, children) : /*#__PURE__*/React.createElement(FilterableSelectList, selectListProps, children);
-  const marginProps = filterStyledSystemMarginProps(textboxProps);
-  return /*#__PURE__*/React.createElement(StyledSelect, _extends({
-    hasTextCursor: true,
-    readOnly: readOnly,
-    disabled: disabled,
-    "data-component": "filterable-select",
-    "data-role": dataRole,
-    "data-element": dataElement,
-    isOpen: isOpen
-  }, marginProps), /*#__PURE__*/React.createElement("div", {
-    ref: containerRef
-  }, /*#__PURE__*/React.createElement(SelectTextbox, _extends({
-    ref: assignInput,
-    activeDescendantId: activeDescendantId,
-    ariaLabel: ariaLabel,
-    ariaLabelledby: ariaLabelledby,
-    labelId: label ? labelId : undefined,
-    "aria-controls": selectListId.current,
-    isOpen: isOpen,
-    hasTextCursor: true
-  }, getTextboxProps()))), selectList);
-});
-export default FilterableSelect;
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import n,{useState as r,useRef as o,useCallback as l,useEffect as i}from"react";import a from"invariant";import"../../../style/utils/filter-styled-system-padding-props.js";import s from"../../../style/utils/filter-styled-system-margin-props.js";import c from"../../../style/utils/filter-out-styled-system-spacing-props.js";import u from"../__internal__/select-textbox/select-textbox.component.js";import d from"../../../__internal__/utils/helpers/guid/index.js";import p from"../__internal__/utils/with-filter.hoc.js";import m from"../select.style.js";import f from"../__internal__/select-list/select-list.component.js";import b from"../__internal__/utils/is-expected-option.js";import v from"../__internal__/utils/are-objects-equal.js";import h from"../__internal__/utils/is-navigation-key.js";import g from"../../../__internal__/utils/logger/index.js";import{useStableCallback as y}from"../../../hooks/__internal__/useStableCallback/useStableCallback.js";import O from"../../../hooks/__internal__/useInputAccessibility/useInputAccessibility.js";function w(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function _(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){w(e,t,n[t])}))}return e}function j(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 C=!1;const x=p(f);let S=!1;const L=n.forwardRef(((p,w)=>{var{"aria-label":L,"aria-labelledby":P,value:k,defaultValue:D,id:A,name:E,label:F,children:B,onOpen:I,onChange:M,onFilterChange:V,onClick:q,onKeyDown:T,onFocus:H,onBlur:W,openOnFocus:K,noResultsMessage:R,listActionButton:U,listMaxHeight:z,onListAction:G,isLoading:J,disabled:N,readOnly:Q,onListScrollBottom:X,tableHeader:Y,multiColumn:Z,"data-element":$,"data-role":ee,tooltipPosition:te,listPlacement:ne="bottom",flipEnabled:re=!0,enableVirtualScroll:oe,virtualScrollOverscan:le,disableDefaultFiltering:ie=!1,isOptional:ae,required:se,listWidth:ce}=p,ue=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}(p,["aria-label","aria-labelledby","value","defaultValue","id","name","label","children","onOpen","onChange","onFilterChange","onClick","onKeyDown","onFocus","onBlur","openOnFocus","noResultsMessage","listActionButton","listMaxHeight","onListAction","isLoading","disabled","readOnly","onListScrollBottom","tableHeader","multiColumn","data-element","data-role","tooltipPosition","listPlacement","flipEnabled","enableVirtualScroll","virtualScrollOverscan","disableDefaultFiltering","isOptional","required","listWidth"]);!S&&ae&&(S=!0,g.deprecate("`isOptional` is deprecated in FilterableSelect 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[de,pe]=r(""),me=o(d()),fe=o(null),be=o(null),ve=o(void 0!==k),he=o(!1),ge=o(!1),ye=o(!1),[Oe,we]=r(),[_e,je]=r(!1),[Ce,xe]=r(""),[Se,Le]=r(k||D||""),Pe=o(k),[ke,De]=r(""),[Ae,Ee]=r(""),Fe=o(A||d()),{labelId:Be}=O({id:Fe.current,label:F}),Ie=o(null),Me=o(!1);!C&&(!ve||!M&&D)&&(C=!0,g.deprecate("Uncontrolled behaviour in `Filterable Select` is deprecated and support will soon be removed. Please make sure all your inputs are controlled."));const Ve=l(((e,t)=>({target:j(_({},E&&{name:E},A&&{id:A}),{value:e}),selectionConfirmed:t})),[E,A]),qe=l(((e,t)=>{M&&M(Ve(e,t))}),[M,Ve]),Te=l(((e,t)=>{Le((r=>{var o;const l=e.trimStart(),i=(a=l,s=B,n.Children.toArray(s).find((e=>{const{text:t}=e.props;return-1!==(null==t?void 0:t.toLowerCase().indexOf(null==a?void 0:a.toLowerCase()))})));var a,s;const c=t&&!e.length;return!i||c||i.props.disabled?(xe(e),qe("",!1),""):(l.length&&qe(i.props.value,!1),t?(xe(e),i.props.value):(l.length&&(null===(o=i.props.text)||void 0===o?void 0:o.toLowerCase().startsWith(l.toLowerCase()))?xe(i.props.text):xe(e),ve.current?r:(De(i.props.value),i.props.value)))}))}),[B,qe]),He=l(((e,t=!1)=>{var r;const o=n.Children.toArray(B).find((t=>n.isValidElement(t)&&b(t,e)));o&&void 0!==o.props.text?(t||(null===(r=o.props.text)||void 0===r?void 0:r.toLowerCase().startsWith(null==Ae?void 0:Ae.toLowerCase().trim())))&&xe(o.props.text):xe(Ae||"")}),[B,Ae]),We=l((e=>{const t=e.target.value,{inputType:n}=e.nativeEvent;Te(t,"deleteContentBackward"===n||"deleteContentForward"===n||"delete"===n),Ee(t),je(!0)}),[Te]),Ke=l((e=>{Ee((t=>(null==t?void 0:t.length)===(null==Ce?void 0:Ce.length)-1&&e===Ce.slice(-1)?Ce:t))}),[Ce]),Re=l((e=>{const{key:t}=e;T&&T(e),Q||(!e.defaultPrevented&&h(t)&&(e.preventDefault(),je(!0)),Ke(t))}),[Ke,T,Q]),Ue=ve.current?k:Se,ze=l((e=>{const t=fe.current&&!fe.current.contains(e.target),n=be.current&&!be.current.contains(e.target);he.current=!1,t&&n&&(He(Ue,!0),je(!1))}),[He,Ue]);i((()=>{a(ve.current===(void 0!==k),"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"),a(!ve.current||ve.current&&M,"onChange prop required when using a controlled input element"),ve.current?(Le((e=>(k&&e!==k&&He(k),k))),De(k)):(Ce!==Se&&He(Se),ke!==Se&&De(Se))}),[k,M,B]);const Ge=y(I);i((()=>{_e?Ge&&Ge():Ee("")}),[Ge,_e]),i((()=>{const e=void 0!==U;a(!e||e&&G,"onListAction prop required when using listActionButton prop")}),[U,G]);const Je=o(!0);i((()=>{Je.current&&He(Se),ve.current&&("object"==typeof k&&"object"==typeof Pe.current?v(k,Pe.current)||(He(k),Pe.current=k):He(k))}),[k,B]);const Ne=y(V);i((()=>{Ne&&!Je.current&&Ne(Ae)}),[Ne,Ae]),i((()=>{Je.current=!1}),[]),i((()=>{const e="click";return window.addEventListener(e,ze),function(){window.removeEventListener(e,ze)}}),[ze]),i((()=>{const e=null==Ae?void 0:Ae.trimStart(),t=null==Ce?void 0:Ce.toLowerCase().startsWith(e.toLowerCase());!N&&!Q&&Oe&&e.length&&(null==Ce?void 0:Ce.length)>e.length&&t&&(Oe.selectionStart=e.length)}),[Ce,Ae,Oe,N,Q]);const Qe=l((e=>{const{id:t,text:n,value:r,selectionType:o,selectionConfirmed:l}=e;ve.current||(Le(r),De(r)),xe(n),qe(r,!!l),pe(t),"navigationKey"!==o&&(Me.current=!!K,je(!1),null==Oe||Oe.focus(),null==Oe||Oe.select(),Me.current=!1)}),[Oe,qe,K]),Xe=l((()=>{je(!1),He(Se,!0)}),[Se,He]);function Ye(e){he.current=!0,"input"===e.target.dataset.element&&(ye.current=!0)}i((()=>()=>{Ie.current&&clearTimeout(Ie.current)}),[]);const Ze=l((e=>{e&&(we(e),w&&("function"==typeof w?w(e):w.current=e))}),[w]);let $e;switch(ne){case"top":$e="top-end";break;case"bottom":$e="bottom-end";break;default:$e=ne}const et={ref:be,id:me.current,labelId:Be,anchorElement:(null==Oe?void 0:Oe.parentElement)||void 0,onSelect:Qe,onSelectListClose:Xe,onMouseDown:function(){he.current=!0},filterText:Ae.trim(),highlightedValue:ke,noResultsMessage:R,listActionButton:U,listMaxHeight:z,onListAction:function(){je(!1),null==G||G()},isLoading:J,onListScrollBottom:X,tableHeader:Y,multiColumn:Z,listPlacement:void 0!==ce?$e:ne,flipEnabled:re,isOpen:_e,enableVirtualScroll:oe,virtualScrollOverscan:le,listWidth:ce},tt=e(ie?f:x,j(_({},et),{children:B})),nt=s(ue);return t(m,j(_({hasTextCursor:!0,readOnly:Q,disabled:N,"data-component":"filterable-select","data-role":ee,"data-element":$,isOpen:_e},nt),{children:[e("div",{ref:fe,children:e(u,_({ref:Ze,activeDescendantId:de,ariaLabel:L,ariaLabelledby:P,labelId:F?Be:void 0,"aria-controls":me.current,isOpen:_e,hasTextCursor:!0},j(_({id:Fe.current,name:E,label:F,disabled:N,readOnly:Q,selectedValue:Se,formattedValue:Ce,onClick:function(e){he.current=!1,q&&q(e),je(!0)},iconOnClick:function(e){he.current=!1,q&&q(e),je((e=>!e))},iconOnMouseDown:Ye,onFocus:function(e){const t=()=>null==H?void 0:H(e);if(K){if(Ie.current&&clearTimeout(Ie.current),Me.current)return;Ie.current=setTimeout((()=>{je((e=>!(!e&&(H&&!ge.current&&(t(),ge.current=!0),he.current&&!ye.current))))}))}else H&&!ge.current&&(t(),ge.current=!0)},onBlur:function(e){ye.current=!1,he.current||(ge.current=!1,W&&W(e))},onKeyDown:Re,onChange:We,onMouseDown:Ye,tooltipPosition:te,required:se,isOptional:ae},c(ue)),{"data-component":void 0})))}),tt]}))}));export{L as FilterableSelect,L as default};

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

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

package/esm/components/select/index.js

@@ -1,6 +1 @@
-export { default as Option } from "./option";
-export { default as OptionRow } from "./option-row";
-export { default as OptionGroupHeader } from "./option-group-header";
-export { default as Select } from "./simple-select";
-export { default as FilterableSelect } from "./filterable-select";
-export { default as MultiSelect } from "./multi-select";
+export{default as Option}from"./option/option.component.js";export{default as OptionRow}from"./option-row/option-row.component.js";export{default as OptionGroupHeader}from"./option-group-header/option-group-header.component.js";export{SimpleSelect as Select}from"./simple-select/simple-select.component.js";export{FilterableSelect}from"./filterable-select/filterable-select.component.js";export{MultiSelect}from"./multi-select/multi-select.component.js";

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

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