@onewelcome/react-lib-components 6.7.0 → 7.0.0

package/dist/cjs/Form/Select/MultiSelect/MultiSelect.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.cjs.js","sources":["../../../../../../../src/components/Form/Select/MultiSelect/MultiSelect.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport classes from \"./MultiSelect.module.scss\";\n\nimport React, {\n  ForwardRefRenderFunction,\n  Fragment,\n  ReactElement,\n  createRef,\n  useEffect,\n  useRef,\n  useState\n} from \"react\";\nimport { useBodyClick } from \"../../../../hooks/useBodyClick\";\nimport { useDetermineStatusIcon } from \"../../../../hooks/useDetermineStatusIcon\";\nimport readyclasses from \"../../../../readyclasses.module.scss\";\nimport { escapeRegExp, filterProps, generateID } from \"../../../../util/helper\";\nimport { Icon, Icons } from \"../../../Icon/Icon\";\nimport { MultiSelectProps } from \"../Select.interfaces\";\nimport { useAddNewBtn } from \"../useAddNewBtn\";\nimport { useSelectPositionList } from \"../useSelectPositionList\";\nimport { SelectButton } from \"./SelectButton\";\nimport { Display, SelectedOptions } from \"./SelectedOptions\";\nimport { useArrowNavigation } from \"./useArrowNavigation\";\nimport { useSearch } from \"./useSearch\";\n\nconst getOptionId = (multiSelectId: string, optionIndex: number) =>\n  `${multiSelectId}_option${optionIndex}`;\n\nconst getListboxId = (multiSelectId: string) => `${multiSelectId}_listbox`;\n\nconst MultiSelectComponent: ForwardRefRenderFunction<HTMLSelectElement, MultiSelectProps> = (\n  {\n    id,\n    children,\n    name,\n    disabled = false,\n    labeledBy,\n    placeholder,\n    describedBy,\n    searchPlaceholder = \"Search item\",\n    searchInputProps,\n    selectButtonProps = {},\n    className,\n    error = false,\n    success = false,\n    value,\n    clearLabel = \"Clear selection\",\n    noResultsLabel = \"No results found\",\n    onChange,\n    addNew,\n    search = { enabled: true, renderThreshold: 0 },\n    ...rest\n  }: MultiSelectProps,\n  ref\n) => {\n  const multiSelectId = useRef(id ?? generateID(20));\n  const [expanded, setExpanded] = useState(false);\n  const [display, setDisplay] = useState<Display[]>([]);\n  const containerReference = useRef<HTMLDivElement>(null);\n  const optionListReference = useRef<HTMLDivElement>(null);\n  const [focusedSelectItem, setFocusedSelectItem] = useState(0);\n  const [shouldClick, setShouldClick] =\n    useState(\n      false\n    ); /** We need this, because whenever we use the arrow keys to select the select item, and we focus the currently selected item it fires the \"click\" listener in Option component. Instead, we only want this to fire if we press \"enter\" or \"spacebar\" so we set this to true whenever that is the case, and back to false when it has been executed. */\n  const [shouldFocusButtonAfterClose, setShouldFocusButtonAfterClose] = useState(false);\n  const [optionsVisibleCount, setOptionsVisibleCount] = useState(\n    React.Children.count(children) - display.length\n  );\n  const { filter, renderSearch, searchInputRef, resetSearchState, searchVisible } = useSearch({\n    selectId: multiSelectId.current,\n    expanded,\n    search,\n    searchInputClassName: classes[\"select-search\"],\n    optionsCount: optionsVisibleCount,\n    focusedSelectItem,\n    setFocusedSelectItem,\n    searchInputProps,\n    searchPlaceholder,\n    describedBy,\n    getOptionId,\n    getListboxId\n  });\n  const { addBtnRef, addNewBtnOptionsContainerClassName, renderAddNew } = useAddNewBtn({\n    id: getOptionId(multiSelectId.current, optionsVisibleCount),\n    addNew,\n    filter,\n    focusedSelectItem,\n    optionsCount: optionsVisibleCount,\n    searchInputRef,\n    shouldClick,\n    onClickCallback: () => {\n      setShouldClick(false);\n      resetSearchState();\n    }\n  });\n\n  const nativeSelect = (ref as React.RefObject<HTMLSelectElement>) || createRef();\n\n  const onOptionChangeHandler = (optionElement: HTMLElement | null) => {\n    if (nativeSelect.current && optionElement) {\n      const value = optionElement.getAttribute(\"data-value\")!;\n      const options = [...nativeSelect.current.options];\n      const lastSelectedOptionValues = options\n        .filter(option => option.selected)\n        .map(option => option.value);\n      options.forEach(option => {\n        if (option.value === value || lastSelectedOptionValues.includes(option.value)) {\n          option.selected = true;\n        }\n      });\n      nativeSelect.current.dispatchEvent(new Event(\"change\", { bubbles: true }));\n    }\n    setExpanded(false);\n    resetSearchState();\n  };\n\n  const onSelectedOptionRemoveHandler = (value: string) => {\n    if (nativeSelect.current) {\n      const options = [...nativeSelect.current.options];\n      options.find(option => option.value === value)!.selected = false;\n      nativeSelect.current.dispatchEvent(new Event(\"change\", { bubbles: true }));\n    }\n  };\n\n  const customSelectButtonRef = useRef<HTMLButtonElement>(null);\n  const { onArrowNavigation } = useArrowNavigation({\n    expanded,\n    setExpanded,\n    setFocusedSelectItem,\n    childrenCount: optionsVisibleCount,\n    setShouldClick,\n    addBtnRef,\n    searchInputRef,\n    customSelectButtonRef,\n    onClose: resetSearchState\n  });\n\n  const { listPosition, opacity, optionsListMaxHeight, setListPosition, setOpacity } =\n    useSelectPositionList({ expanded, optionListReference, containerReference, addBtnRef });\n\n  const syncDisplayValue = (values: string[]) => {\n    const options = React.Children.map(children, child => child);\n    const displayArray: Display[] = values.map(value => {\n      const option = options.find(option => option.props.value === value);\n      return { value, label: option?.props.children, fixed: option?.props.fixed };\n    });\n    setDisplay(displayArray);\n  };\n\n  const syncSelectedOption = (vals: string[]) => {\n    if (nativeSelect.current) {\n      const options = [...nativeSelect.current.options];\n      options.forEach(option => {\n        if (vals.includes(option.value)) {\n          option.selected = true;\n        } else {\n          option.selected = false;\n        }\n      });\n    }\n  };\n\n  /**\n   * @description We have to modify the children (Option component) to have a additional props that allows us to keep track of which one is selected and focused at all times and if a filter is active.\n   * The `children` prop can be either a single object (1 child) or an array of multiple children.\n   */\n  const renderOptions = () => {\n    type ReactChildrenType = ReturnType<typeof React.Children.toArray>;\n\n    const filterOutSelectedChildren = (internalChildren: ReactChildrenType) => {\n      return internalChildren.filter(\n        child =>\n          typeof child === \"object\" &&\n          \"props\" in child &&\n          !display.find(option => option.value === child.props.value)\n      );\n    };\n\n    let results;\n    if (filter !== \"\") {\n      const filteredChildren = React.Children.toArray(children).filter(\n        child =>\n          (child as ReactElement).props.children\n            .toLowerCase()\n            .match(escapeRegExp(filter.toLowerCase())) !== null\n      );\n\n      results = _internalRenderChildren(filterOutSelectedChildren(filteredChildren));\n    } else {\n      results = _internalRenderChildren(\n        filterOutSelectedChildren(React.Children.toArray(children))\n      );\n    }\n\n    optionsVisibleCount !== results.length && setOptionsVisibleCount(results.length);\n\n    if (results.length === 0) {\n      return <li className={classes[\"no-results\"]}>{noResultsLabel}</li>;\n    }\n\n    return results;\n\n    function _internalRenderChildren(internalChildren: ReactChildrenType) {\n      return React.Children.map(internalChildren, (child, index) => {\n        return React.cloneElement(child as ReactElement, {\n          onFocusChange: (childIndex: number) => {\n            setFocusedSelectItem(childIndex);\n          },\n          onOptionSelect: (optionRef: React.RefObject<HTMLLIElement>) => {\n            onOptionChangeHandler(optionRef.current);\n            setExpanded(false);\n            setShouldClick(false);\n          },\n          isSearching: false,\n          selectOpened: expanded,\n          childIndex: index,\n          hasFocus: focusedSelectItem === index,\n          shouldClick: shouldClick,\n          id: getOptionId(multiSelectId.current, index)\n        });\n      });\n    }\n  };\n\n  const renderChevronIcon = () => {\n    return expanded ? (\n      <Icon className={classes[\"chevron-icon\"]} icon={Icons.ChevronUp} />\n    ) : (\n      <Icon className={classes[\"chevron-icon\"]} icon={Icons.ChevronDown} />\n    );\n  };\n\n  const icon = useDetermineStatusIcon({ success, error });\n\n  const nativeOnChangeHandler = (event: React.ChangeEvent<HTMLSelectElement>) => {\n    onChange?.(event);\n  };\n\n  useEffect(() => {\n    if (expanded && searchInputRef.current) {\n      setShouldFocusButtonAfterClose(true);\n      searchInputRef.current.focus();\n    }\n\n    if (!expanded && customSelectButtonRef.current && shouldFocusButtonAfterClose) {\n      setShouldFocusButtonAfterClose(false);\n      customSelectButtonRef.current.focus();\n    }\n  }, [\n    expanded,\n    customSelectButtonRef.current,\n    shouldFocusButtonAfterClose,\n    searchInputRef.current\n  ]);\n\n  useEffect(() => {\n    syncDisplayValue(value);\n    syncSelectedOption(value);\n  }, [value]);\n\n  useBodyClick(\n    (event: MouseEvent) => !(event.target as Element).closest(\".custom-select\") && expanded,\n    () => {\n      setExpanded(false);\n      setListPosition({ top: 0, bottom: \"initial\" });\n      setOpacity(0);\n    },\n    expanded\n  );\n\n  const additionalClasses = [];\n  expanded && additionalClasses.push(classes.expanded);\n  error && additionalClasses.push(classes.error);\n  disabled && additionalClasses.push(classes.disabled);\n  className && additionalClasses.push(className);\n  success && additionalClasses.push(classes.success);\n\n  const onSelectButtonClick = () => {\n    setExpanded(expanded => !expanded);\n    setShouldClick(false);\n  };\n\n  /** The native select is purely for external form libraries. We use it to emit an onChange with native select event object so they know exactly what's happening. */\n  return (\n    <Fragment>\n      <select\n        {...filterProps(rest, /^data-/, false)}\n        tabIndex={-1}\n        multiple={true}\n        aria-hidden=\"true\"\n        ref={nativeSelect}\n        name={name}\n        onChange={nativeOnChangeHandler}\n        className={readyclasses[\"sr-only\"]}\n      >\n        <option value=\"\"></option>\n        {React.Children.map(children, child => (\n          <option value={child.props.value}></option>\n        ))}\n      </select>\n      <div\n        {...filterProps(rest, /^data-/)}\n        id={multiSelectId.current}\n        ref={containerReference}\n        onKeyDown={onArrowNavigation}\n        className={`custom-select ${classes.select} ${additionalClasses.join(\" \")} ${\n          className ?? \"\"\n        }`}\n      >\n        <div\n          className={`${classes[\"custom-select\"]} ${additionalClasses.join(\" \")} `}\n          style={{ display: \"flex\" }}\n        >\n          <div className={classes[\"display-container\"]} data-display>\n            <SelectButton\n              {...selectButtonProps}\n              onClick={onSelectButtonClick}\n              name={name}\n              ref={customSelectButtonRef}\n              disabled={disabled}\n              aria-disabled={disabled}\n              aria-invalid={error}\n              aria-expanded={expanded}\n              aria-haspopup=\"listbox\"\n              aria-labelledby={labeledBy}\n              aria-describedby={describedBy}\n            />\n            {value?.length === 0 && placeholder && (\n              <span className={classes[\"placeholder\"]}>{placeholder}</span>\n            )}\n            {value?.length > 0 && (\n              <SelectedOptions\n                disabled={disabled}\n                display={display}\n                onClick={onSelectButtonClick}\n                onRemove={onSelectedOptionRemoveHandler}\n              />\n            )}\n            {searchVisible && renderSearch()}\n          </div>\n          <div className={classes[\"status\"]}>{icon || renderChevronIcon()}</div>\n        </div>\n        <div\n          ref={optionListReference}\n          className={`list-wrapper ${classes[\"list-wrapper\"]}`}\n          style={{\n            display: expanded ? \"block\" : \"none\",\n            opacity: opacity,\n            maxHeight: optionsListMaxHeight.wrapper,\n            pointerEvents: expanded ? \"auto\" : \"none\",\n            ...listPosition\n          }}\n        >\n          <ul\n            id={getListboxId(multiSelectId.current)}\n            className={addNewBtnOptionsContainerClassName}\n            role=\"listbox\"\n            aria-multiselectable=\"true\"\n            style={{ maxHeight: optionsListMaxHeight.list }}\n          >\n            {renderOptions()}\n          </ul>\n          {renderAddNew()}\n        </div>\n      </div>\n    </Fragment>\n  );\n};\n\nexport const MultiSelect = React.forwardRef(MultiSelectComponent);\n"],"names":["getOptionId","multiSelectId","optionIndex","getListboxId","MultiSelectComponent","id","children","name","disabled","labeledBy","placeholder","describedBy","searchPlaceholder","searchInputProps","selectButtonProps","className","error","success","value","clearLabel","noResultsLabel","onChange","addNew","search","enabled","renderThreshold","rest","ref","useRef","generateID","expanded","setExpanded","useState","display","setDisplay","containerReference","optionListReference","focusedSelectItem","setFocusedSelectItem","shouldClick","setShouldClick","shouldFocusButtonAfterClose","setShouldFocusButtonAfterClose","optionsVisibleCount","setOptionsVisibleCount","React","Children","count","length","filter","renderSearch","searchInputRef","resetSearchState","searchVisible","useSearch","selectId","current","searchInputClassName","classes","optionsCount","addBtnRef","addNewBtnOptionsContainerClassName","renderAddNew","useAddNewBtn","onClickCallback","nativeSelect","createRef","onOptionChangeHandler","optionElement","getAttribute","options","lastSelectedOptionValues","option","selected","map","forEach","includes","dispatchEvent","Event","bubbles","onSelectedOptionRemoveHandler","find","customSelectButtonRef","onArrowNavigation","useArrowNavigation","childrenCount","onClose","listPosition","opacity","optionsListMaxHeight","setListPosition","setOpacity","useSelectPositionList","syncDisplayValue","values","child","displayArray","props","label","fixed","syncSelectedOption","vals","renderOptions","filterOutSelectedChildren","internalChildren","results","filteredChildren","toArray","toLowerCase","match","escapeRegExp","_internalRenderChildren","createElement","index","cloneElement","onFocusChange","childIndex","onOptionSelect","optionRef","isSearching","selectOpened","hasFocus","renderChevronIcon","Icon","icon","Icons","ChevronUp","ChevronDown","useDetermineStatusIcon","nativeOnChangeHandler","event","useEffect","focus","useBodyClick","target","closest","top","bottom","additionalClasses","push","onSelectButtonClick","Fragment","filterProps","tabIndex","multiple","readyclasses","onKeyDown","select","join","style","SelectButton","onClick","SelectedOptions","onRemove","maxHeight","wrapper","pointerEvents","role","list","MultiSelect","forwardRef"],"mappings":"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"}
+{"version":3,"file":"MultiSelect.cjs.js","sources":["../../../../../../../src/components/Form/Select/MultiSelect/MultiSelect.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport classes from \"./MultiSelect.module.scss\";\n\nimport React, {\n  ForwardRefRenderFunction,\n  Fragment,\n  ReactElement,\n  createRef,\n  useEffect,\n  useRef,\n  useState\n} from \"react\";\nimport { useBodyClick } from \"../../../../hooks/useBodyClick\";\nimport { useDetermineStatusIcon } from \"../../../../hooks/useDetermineStatusIcon\";\nimport readyclasses from \"../../../../readyclasses.module.scss\";\nimport { escapeRegExp, filterProps, generateID } from \"../../../../util/helper\";\nimport { Icon, Icons } from \"../../../Icon/Icon\";\nimport { MultiSelectProps } from \"../Select.interfaces\";\nimport { useAddNewBtn } from \"../useAddNewBtn\";\nimport { useSelectPositionList } from \"../useSelectPositionList\";\nimport { SelectButton } from \"./SelectButton\";\nimport { Display, SelectedOptions } from \"./SelectedOptions\";\nimport { useArrowNavigation } from \"./useArrowNavigation\";\nimport { useSearch } from \"./useSearch\";\n\nconst getOptionId = (multiSelectId: string, optionIndex: number) =>\n  `${multiSelectId}_option${optionIndex}`;\n\nconst getListboxId = (multiSelectId: string) => `${multiSelectId}_listbox`;\n\nconst MultiSelectComponent: ForwardRefRenderFunction<HTMLSelectElement, MultiSelectProps> = (\n  {\n    id,\n    children,\n    name,\n    disabled = false,\n    labeledBy,\n    placeholder,\n    describedBy,\n    selectButtonProps = {},\n    className,\n    error = false,\n    success = false,\n    value,\n    clearLabel = \"Clear selection\",\n    noResultsLabel = \"No results found\",\n    onChange,\n    addNew,\n    search = { enabled: true, renderThreshold: 0, searchPlaceholder: \"Search item\" },\n    ...rest\n  }: MultiSelectProps,\n  ref\n) => {\n  const multiSelectId = useRef(id ?? generateID(20));\n  const [expanded, setExpanded] = useState(false);\n  const [display, setDisplay] = useState<Display[]>([]);\n  const containerReference = useRef<HTMLDivElement>(null);\n  const optionListReference = useRef<HTMLDivElement>(null);\n  const [focusedSelectItem, setFocusedSelectItem] = useState(0);\n  const [shouldClick, setShouldClick] =\n    useState(\n      false\n    ); /** We need this, because whenever we use the arrow keys to select the select item, and we focus the currently selected item it fires the \"click\" listener in Option component. Instead, we only want this to fire if we press \"enter\" or \"spacebar\" so we set this to true whenever that is the case, and back to false when it has been executed. */\n  const [shouldFocusButtonAfterClose, setShouldFocusButtonAfterClose] = useState(false);\n  const [optionsVisibleCount, setOptionsVisibleCount] = useState(\n    React.Children.count(children) - display.length\n  );\n  const { filter, renderSearch, searchInputRef, resetSearchState, searchVisible } = useSearch({\n    selectId: multiSelectId.current,\n    expanded,\n    search,\n    searchInputClassName: classes[\"select-search\"],\n    optionsCount: optionsVisibleCount,\n    focusedSelectItem,\n    setFocusedSelectItem,\n    describedBy,\n    getOptionId,\n    getListboxId\n  });\n  const { addBtnRef, addNewBtnOptionsContainerClassName, renderAddNew } = useAddNewBtn({\n    id: getOptionId(multiSelectId.current, optionsVisibleCount),\n    addNew,\n    filter,\n    focusedSelectItem,\n    optionsCount: optionsVisibleCount,\n    searchInputRef,\n    shouldClick,\n    onClickCallback: () => {\n      setShouldClick(false);\n      resetSearchState();\n    }\n  });\n\n  const nativeSelect = (ref as React.RefObject<HTMLSelectElement>) || createRef();\n\n  const onOptionChangeHandler = (optionElement: HTMLElement | null) => {\n    if (nativeSelect.current && optionElement) {\n      const value = optionElement.getAttribute(\"data-value\")!;\n      const options = [...nativeSelect.current.options];\n      const lastSelectedOptionValues = options\n        .filter(option => option.selected)\n        .map(option => option.value);\n      options.forEach(option => {\n        if (option.value === value || lastSelectedOptionValues.includes(option.value)) {\n          option.selected = true;\n        }\n      });\n      nativeSelect.current.dispatchEvent(new Event(\"change\", { bubbles: true }));\n    }\n    setExpanded(false);\n    resetSearchState();\n  };\n\n  const onSelectedOptionRemoveHandler = (value: string) => {\n    if (nativeSelect.current) {\n      const options = [...nativeSelect.current.options];\n      options.find(option => option.value === value)!.selected = false;\n      nativeSelect.current.dispatchEvent(new Event(\"change\", { bubbles: true }));\n    }\n  };\n\n  const customSelectButtonRef = useRef<HTMLButtonElement>(null);\n  const { onArrowNavigation } = useArrowNavigation({\n    expanded,\n    setExpanded,\n    setFocusedSelectItem,\n    childrenCount: optionsVisibleCount,\n    setShouldClick,\n    addBtnRef,\n    searchInputRef,\n    customSelectButtonRef,\n    onClose: resetSearchState\n  });\n\n  const { listPosition, opacity, optionsListMaxHeight, setListPosition, setOpacity } =\n    useSelectPositionList({ expanded, optionListReference, containerReference, addBtnRef });\n\n  const syncDisplayValue = (values: string[]) => {\n    const options = React.Children.map(children, child => child);\n    const displayArray: Display[] = values.map(value => {\n      const option = options.find(option => option.props.value === value);\n      return { value, label: option?.props.children, fixed: option?.props.fixed };\n    });\n    setDisplay(displayArray);\n  };\n\n  const syncSelectedOption = (vals: string[]) => {\n    if (nativeSelect.current) {\n      const options = [...nativeSelect.current.options];\n      options.forEach(option => {\n        if (vals.includes(option.value)) {\n          option.selected = true;\n        } else {\n          option.selected = false;\n        }\n      });\n    }\n  };\n\n  /**\n   * @description We have to modify the children (Option component) to have a additional props that allows us to keep track of which one is selected and focused at all times and if a filter is active.\n   * The `children` prop can be either a single object (1 child) or an array of multiple children.\n   */\n  const renderOptions = () => {\n    type ReactChildrenType = ReturnType<typeof React.Children.toArray>;\n\n    const filterOutSelectedChildren = (internalChildren: ReactChildrenType) => {\n      return internalChildren.filter(\n        child =>\n          typeof child === \"object\" &&\n          \"props\" in child &&\n          !display.find(option => option.value === child.props.value)\n      );\n    };\n\n    let results;\n    if (filter !== \"\") {\n      const filteredChildren = React.Children.toArray(children).filter(\n        child =>\n          (child as ReactElement).props.children\n            .toLowerCase()\n            .match(escapeRegExp(filter.toLowerCase())) !== null\n      );\n\n      results = _internalRenderChildren(filterOutSelectedChildren(filteredChildren));\n    } else {\n      results = _internalRenderChildren(\n        filterOutSelectedChildren(React.Children.toArray(children))\n      );\n    }\n\n    optionsVisibleCount !== results.length && setOptionsVisibleCount(results.length);\n\n    if (results.length === 0) {\n      return <li className={classes[\"no-results\"]}>{noResultsLabel}</li>;\n    }\n\n    return results;\n\n    function _internalRenderChildren(internalChildren: ReactChildrenType) {\n      return React.Children.map(internalChildren, (child, index) => {\n        return React.cloneElement(child as ReactElement, {\n          onFocusChange: (childIndex: number) => {\n            setFocusedSelectItem(childIndex);\n          },\n          onOptionSelect: (optionRef: React.RefObject<HTMLLIElement>) => {\n            onOptionChangeHandler(optionRef.current);\n            setExpanded(false);\n            setShouldClick(false);\n          },\n          isSearching: false,\n          selectOpened: expanded,\n          childIndex: index,\n          hasFocus: focusedSelectItem === index,\n          shouldClick: shouldClick,\n          id: getOptionId(multiSelectId.current, index)\n        });\n      });\n    }\n  };\n\n  const renderChevronIcon = () => {\n    return expanded ? (\n      <Icon className={classes[\"chevron-icon\"]} icon={Icons.ChevronUp} />\n    ) : (\n      <Icon className={classes[\"chevron-icon\"]} icon={Icons.ChevronDown} />\n    );\n  };\n\n  const icon = useDetermineStatusIcon({ success, error });\n\n  const nativeOnChangeHandler = (event: React.ChangeEvent<HTMLSelectElement>) => {\n    onChange?.(event);\n  };\n\n  useEffect(() => {\n    if (expanded && searchInputRef.current) {\n      setShouldFocusButtonAfterClose(true);\n      searchInputRef.current.focus();\n    }\n\n    if (!expanded && customSelectButtonRef.current && shouldFocusButtonAfterClose) {\n      setShouldFocusButtonAfterClose(false);\n      customSelectButtonRef.current.focus();\n    }\n  }, [\n    expanded,\n    customSelectButtonRef.current,\n    shouldFocusButtonAfterClose,\n    searchInputRef.current\n  ]);\n\n  useEffect(() => {\n    syncDisplayValue(value);\n    syncSelectedOption(value);\n  }, [value]);\n\n  useBodyClick(\n    (event: MouseEvent) => !(event.target as Element).closest(\".custom-select\") && expanded,\n    () => {\n      setExpanded(false);\n      setListPosition({ top: 0, bottom: \"initial\" });\n      setOpacity(0);\n    },\n    expanded\n  );\n\n  const additionalClasses = [];\n  expanded && additionalClasses.push(classes.expanded);\n  error && additionalClasses.push(classes.error);\n  disabled && additionalClasses.push(classes.disabled);\n  className && additionalClasses.push(className);\n  success && additionalClasses.push(classes.success);\n\n  const onSelectButtonClick = () => {\n    setExpanded(expanded => !expanded);\n    setShouldClick(false);\n  };\n\n  /** The native select is purely for external form libraries. We use it to emit an onChange with native select event object so they know exactly what's happening. */\n  return (\n    <Fragment>\n      <select\n        {...filterProps(rest, /^data-/, false)}\n        tabIndex={-1}\n        multiple={true}\n        aria-hidden=\"true\"\n        ref={nativeSelect}\n        name={name}\n        onChange={nativeOnChangeHandler}\n        className={readyclasses[\"sr-only\"]}\n      >\n        <option value=\"\"></option>\n        {React.Children.map(children, child => (\n          <option value={child.props.value}></option>\n        ))}\n      </select>\n      <div\n        {...filterProps(rest, /^data-/)}\n        id={multiSelectId.current}\n        ref={containerReference}\n        onKeyDown={onArrowNavigation}\n        className={`custom-select ${classes.select} ${additionalClasses.join(\" \")} ${\n          className ?? \"\"\n        }`}\n      >\n        <div\n          className={`${classes[\"custom-select\"]} ${additionalClasses.join(\" \")} `}\n          style={{ display: \"flex\" }}\n        >\n          <div className={classes[\"display-container\"]} data-display>\n            <SelectButton\n              {...selectButtonProps}\n              onClick={onSelectButtonClick}\n              name={name}\n              ref={customSelectButtonRef}\n              disabled={disabled}\n              aria-disabled={disabled}\n              aria-invalid={error}\n              aria-expanded={expanded}\n              aria-haspopup=\"listbox\"\n              aria-labelledby={labeledBy}\n              aria-describedby={describedBy}\n            />\n            {value?.length === 0 && placeholder && (\n              <span className={classes[\"placeholder\"]}>{placeholder}</span>\n            )}\n            {value?.length > 0 && (\n              <SelectedOptions\n                disabled={disabled}\n                display={display}\n                onClick={onSelectButtonClick}\n                onRemove={onSelectedOptionRemoveHandler}\n              />\n            )}\n            {searchVisible && renderSearch()}\n          </div>\n          <div className={classes[\"status\"]}>{icon || renderChevronIcon()}</div>\n        </div>\n        <div\n          ref={optionListReference}\n          className={`list-wrapper ${classes[\"list-wrapper\"]}`}\n          style={{\n            display: expanded ? \"block\" : \"none\",\n            opacity: opacity,\n            maxHeight: optionsListMaxHeight.wrapper,\n            pointerEvents: expanded ? \"auto\" : \"none\",\n            ...listPosition\n          }}\n        >\n          <ul\n            id={getListboxId(multiSelectId.current)}\n            className={addNewBtnOptionsContainerClassName}\n            role=\"listbox\"\n            aria-multiselectable=\"true\"\n            style={{ maxHeight: optionsListMaxHeight.list }}\n          >\n            {renderOptions()}\n          </ul>\n          {renderAddNew()}\n        </div>\n      </div>\n    </Fragment>\n  );\n};\n\nexport const MultiSelect = React.forwardRef(MultiSelectComponent);\n"],"names":["getOptionId","multiSelectId","optionIndex","getListboxId","MultiSelectComponent","id","children","name","disabled","labeledBy","placeholder","describedBy","selectButtonProps","className","error","success","value","clearLabel","noResultsLabel","onChange","addNew","search","enabled","renderThreshold","searchPlaceholder","rest","ref","useRef","generateID","expanded","setExpanded","useState","display","setDisplay","containerReference","optionListReference","focusedSelectItem","setFocusedSelectItem","shouldClick","setShouldClick","shouldFocusButtonAfterClose","setShouldFocusButtonAfterClose","optionsVisibleCount","setOptionsVisibleCount","React","Children","count","length","filter","renderSearch","searchInputRef","resetSearchState","searchVisible","useSearch","selectId","current","searchInputClassName","classes","optionsCount","addBtnRef","addNewBtnOptionsContainerClassName","renderAddNew","useAddNewBtn","onClickCallback","nativeSelect","createRef","onOptionChangeHandler","optionElement","getAttribute","options","lastSelectedOptionValues","option","selected","map","forEach","includes","dispatchEvent","Event","bubbles","onSelectedOptionRemoveHandler","find","customSelectButtonRef","onArrowNavigation","useArrowNavigation","childrenCount","onClose","listPosition","opacity","optionsListMaxHeight","setListPosition","setOpacity","useSelectPositionList","syncDisplayValue","values","child","displayArray","props","label","fixed","syncSelectedOption","vals","renderOptions","filterOutSelectedChildren","internalChildren","results","filteredChildren","toArray","toLowerCase","match","escapeRegExp","_internalRenderChildren","createElement","index","cloneElement","onFocusChange","childIndex","onOptionSelect","optionRef","isSearching","selectOpened","hasFocus","renderChevronIcon","Icon","icon","Icons","ChevronUp","ChevronDown","useDetermineStatusIcon","nativeOnChangeHandler","event","useEffect","focus","useBodyClick","target","closest","top","bottom","additionalClasses","push","onSelectButtonClick","Fragment","filterProps","tabIndex","multiple","readyclasses","onKeyDown","select","join","style","SelectButton","onClick","SelectedOptions","onRemove","maxHeight","wrapper","pointerEvents","role","list","MultiSelect","forwardRef"],"mappings":"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"}

package/dist/cjs/Form/Select/MultiSelect/useSearch.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:true});var e=require("react");function o(e){return e&&typeof e==="object"&&"default"in e?e:{default:e}}var t=o(e);const r=({selectId:o,search:r,optionsCount:l,searchPlaceholder:a,searchInputProps:n,searchInputClassName:s,expanded:d,setFocusedSelectItem:c,focusedSelectItem:i,describedBy:u,getOptionId:v,getListboxId:p})=>{var h,f;const[b,I]=e.useState("");const m=0;const x=e.useRef(null);const y=(h=r===null||r===void 0?void 0:r.renderThreshold)!==null&&h!==void 0?h:m;const P=l>=y;const S=()=>{if(r===null||r===void 0?void 0:r.enabled)return P;if(r)return r.enabled;return l>m};const C=()=>{var e,l,c;return t["default"].createElement("input",{...(l=(e=r===null||r===void 0?void 0:r.searchInputProps)!==null&&e!==void 0?e:n)!==null&&l!==void 0?l:{},ref:x,value:b,onChange:e=>I(e.currentTarget.value),className:[s,n===null||n===void 0?void 0:n.className].join(" "),style:{display:d?"block":"none"},type:"text",name:"search-option",placeholder:(c=r===null||r===void 0?void 0:r.searchPlaceholder)!==null&&c!==void 0?c:a,role:"combobox",autoComplete:"off",autoCorrect:"off",spellCheck:false,"aria-controls":p(o),"aria-describedby":u,"aria-autocomplete":"none","aria-expanded":d,"aria-activedescendant":v(o,i),"aria-haspopup":true})};const g=()=>{I("");c(0)};const j=S();e.useEffect((()=>{var e;if(((e=r===null||r===void 0?void 0:r.searchInputProps)===null||e===void 0?void 0:e.reset)||(n===null||n===void 0?void 0:n.reset))g()}),[n===null||n===void 0?void 0:n.reset,(f=r===null||r===void 0?void 0:r.searchInputProps)===null||f===void 0?void 0:f.reset]);return{renderSearch:C,resetSearchState:g,searchVisible:j,searchThreshold:y,searchInputRef:x,filter:b}};exports.useSearch=r;
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});var e=require("react");function t(e){return e&&typeof e==="object"&&"default"in e?e:{default:e}}var o=t(e);const r=({selectId:t,search:r,optionsCount:a,searchInputClassName:n,expanded:s,setFocusedSelectItem:l,focusedSelectItem:c,describedBy:d,getOptionId:u,getListboxId:i})=>{var v,p;const[h,f]=e.useState("");const b=0;const I=e.useRef(null);const m=(v=r===null||r===void 0?void 0:r.renderThreshold)!==null&&v!==void 0?v:b;const x=a>=m;const y=()=>{if(r===null||r===void 0?void 0:r.enabled)return x;if(r)return r.enabled;return a>b};const S=()=>{var e,a;return o["default"].createElement("input",{...(e=r===null||r===void 0?void 0:r.searchInputProps)!==null&&e!==void 0?e:{},ref:I,value:h,onChange:e=>f(e.currentTarget.value),className:[n,(a=r===null||r===void 0?void 0:r.searchInputProps)===null||a===void 0?void 0:a.className].join(" "),style:{display:s?"block":"none"},type:"text",name:"search-option",placeholder:r===null||r===void 0?void 0:r.searchPlaceholder,role:"combobox",autoComplete:"off",autoCorrect:"off",spellCheck:false,"aria-controls":i(t),"aria-describedby":d,"aria-autocomplete":"none","aria-expanded":s,"aria-activedescendant":u(t,c),"aria-haspopup":true})};const C=()=>{f("");l(0)};const P=y();e.useEffect((()=>{var e;if((e=r===null||r===void 0?void 0:r.searchInputProps)===null||e===void 0?void 0:e.reset)C()}),[(p=r===null||r===void 0?void 0:r.searchInputProps)===null||p===void 0?void 0:p.reset]);return{renderSearch:S,resetSearchState:C,searchVisible:P,searchThreshold:m,searchInputRef:I,filter:h}};exports.useSearch=r;
 //# sourceMappingURL=useSearch.cjs.js.map

package/dist/cjs/Form/Select/MultiSelect/useSearch.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSearch.cjs.js","sources":["../../../../../../../src/components/Form/Select/MultiSelect/useSearch.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, { useEffect, useRef, useState } from \"react\";\nimport { PartialInputProps, SearchProps } from \"../Select.interfaces\";\n\ninterface Props {\n  selectId: string;\n  search?: SearchProps;\n  optionsCount: number;\n  /**\n   * @deprecated\n   */\n  searchPlaceholder?: string;\n  /**\n   * @deprecated\n   */\n  searchInputProps?: PartialInputProps & { reset?: boolean };\n  searchInputClassName: string;\n  expanded: boolean;\n  setFocusedSelectItem: (idx: number) => void;\n  focusedSelectItem: number;\n  describedBy?: string;\n  getOptionId: (multiSelectId: string, optionIndex: number) => string;\n  getListboxId: (multiSelectId: string) => string;\n}\n\n/** @scope .*/\nexport const useSearch = ({\n  selectId,\n  search,\n  optionsCount,\n  searchPlaceholder,\n  searchInputProps,\n  searchInputClassName,\n  expanded,\n  setFocusedSelectItem,\n  focusedSelectItem,\n  describedBy,\n  getOptionId,\n  getListboxId\n}: Props) => {\n  const [filter, setFilter] = useState(\"\");\n\n  const DEFAULT_RENDER_THRESHOLD = 0;\n\n  const searchInputRef = useRef<HTMLInputElement>(null);\n\n  const threshold = search?.renderThreshold ?? DEFAULT_RENDER_THRESHOLD;\n  const hasEnoughChildren = optionsCount >= threshold;\n\n  const shouldRenderSearch = () => {\n    if (search?.enabled) {\n      return hasEnoughChildren;\n    }\n\n    if (search) {\n      return search.enabled as boolean;\n    }\n\n    return optionsCount > DEFAULT_RENDER_THRESHOLD;\n  };\n\n  const renderSearch = () => {\n    return (\n      <input\n        {...((search?.searchInputProps as any) ?? searchInputProps ?? {})}\n        ref={searchInputRef}\n        value={filter}\n        onChange={event => setFilter(event.currentTarget.value)}\n        className={[searchInputClassName, searchInputProps?.className].join(\" \")}\n        style={{\n          display: expanded ? \"block\" : \"none\"\n        }}\n        type=\"text\"\n        name=\"search-option\"\n        placeholder={search?.searchPlaceholder ?? searchPlaceholder}\n        role=\"combobox\"\n        autoComplete=\"off\"\n        autoCorrect=\"off\"\n        spellCheck={false}\n        aria-controls={getListboxId(selectId)}\n        aria-describedby={describedBy}\n        aria-autocomplete=\"none\"\n        aria-expanded={expanded}\n        aria-activedescendant={getOptionId(selectId, focusedSelectItem)}\n        aria-haspopup={true}\n      />\n    );\n  };\n\n  const resetSearchState = () => {\n    setFilter(\"\");\n    setFocusedSelectItem(0);\n  };\n\n  const visible = shouldRenderSearch();\n\n  useEffect(() => {\n    if (search?.searchInputProps?.reset || searchInputProps?.reset) {\n      resetSearchState();\n    }\n  }, [searchInputProps?.reset, search?.searchInputProps?.reset]);\n\n  return {\n    renderSearch,\n    resetSearchState,\n    searchVisible: visible,\n    searchThreshold: threshold,\n    searchInputRef,\n    filter\n  };\n};\n"],"names":["useSearch","selectId","search","optionsCount","searchPlaceholder","searchInputProps","searchInputClassName","expanded","setFocusedSelectItem","focusedSelectItem","describedBy","getOptionId","getListboxId","filter","setFilter","useState","DEFAULT_RENDER_THRESHOLD","searchInputRef","useRef","threshold","_a","renderThreshold","hasEnoughChildren","shouldRenderSearch","enabled","renderSearch","React","createElement","_b","ref","value","onChange","event","currentTarget","className","join","style","display","type","name","placeholder","_c","role","autoComplete","autoCorrect","spellCheck","resetSearchState","visible","useEffect","reset","searchVisible","searchThreshold"],"mappings":"iLAyCO,MAAMA,EAAY,EACvBC,WACAC,SACAC,eACAC,oBACAC,mBACAC,uBACAC,WACAC,uBACAC,oBACAC,cACAC,cACAC,2BAEA,MAAOC,EAAQC,GAAaC,EAAQA,SAAC,IAErC,MAAMC,EAA2B,EAEjC,MAAMC,EAAiBC,SAAyB,MAEhD,MAAMC,GAAYC,EAAAlB,IAAA,MAAAA,SAAA,OAAA,EAAAA,EAAQmB,mBAAmB,MAAAD,SAAA,EAAAA,EAAAJ,EAC7C,MAAMM,EAAoBnB,GAAgBgB,EAE1C,MAAMI,EAAqB,KACzB,GAAIrB,UAAAA,SAAM,OAAA,EAANA,EAAQsB,QACV,OAAOF,EAGT,GAAIpB,EACF,OAAOA,EAAOsB,QAGhB,OAAOrB,EAAea,CAAwB,EAGhD,MAAMS,EAAe,eACnB,OACEC,aAAAC,cAAA,QAAA,KACOC,GAACR,EAAAlB,IAAA,MAAAA,SAAA,OAAA,EAAAA,EAAQG,oBAA4B,MAAAe,SAAA,EAAAA,EAAAf,KAAoB,MAAAuB,SAAA,EAAAA,EAAA,GAC9DC,IAAKZ,EACLa,MAAOjB,EACPkB,SAAUC,GAASlB,EAAUkB,EAAMC,cAAcH,OACjDI,UAAW,CAAC5B,EAAsBD,IAAgB,MAAhBA,SAAgB,OAAA,EAAhBA,EAAkB6B,WAAWC,KAAK,KACpEC,MAAO,CACLC,QAAS9B,EAAW,QAAU,QAEhC+B,KAAK,OACLC,KAAK,gBACLC,aAAaC,EAAAvC,IAAM,MAANA,SAAM,OAAA,EAANA,EAAQE,qBAAiB,MAAAqC,SAAA,EAAAA,EAAIrC,EAC1CsC,KAAK,WACLC,aAAa,MACbC,YAAY,MACZC,WAAY,MACG,gBAAAjC,EAAaX,GAAS,mBACnBS,EAAW,oBACX,OAAM,gBACTH,EAAQ,wBACAI,EAAYV,EAAUQ,GAC9B,gBAAA,MAEjB,EAGJ,MAAMqC,EAAmB,KACvBhC,EAAU,IACVN,EAAqB,EAAE,EAGzB,MAAMuC,EAAUxB,IAEhByB,EAAAA,WAAU,WACR,OAAI9C,IAAM,MAANA,SAAA,OAAA,EAAAA,EAAQG,oBAAgB,MAAAe,SAAA,OAAA,EAAAA,EAAE6B,SAAS5C,UAAAA,SAAgB,OAAA,EAAhBA,EAAkB4C,OACvDH,GACD,GACA,CAACzC,IAAgB,MAAhBA,SAAA,OAAA,EAAAA,EAAkB4C,OAAOrB,EAAA1B,IAAA,MAAAA,kBAAAA,EAAQG,oBAAkB,MAAAuB,SAAA,OAAA,EAAAA,EAAAqB,QAEvD,MAAO,CACLxB,eACAqB,mBACAI,cAAeH,EACfI,gBAAiBhC,EACjBF,iBACAJ,SACD"}
+{"version":3,"file":"useSearch.cjs.js","sources":["../../../../../../../src/components/Form/Select/MultiSelect/useSearch.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, { useEffect, useRef, useState } from \"react\";\nimport { SearchProps } from \"../Select.interfaces\";\n\ninterface Props {\n  selectId: string;\n  search?: SearchProps;\n  optionsCount: number;\n  searchInputClassName: string;\n  expanded: boolean;\n  setFocusedSelectItem: (idx: number) => void;\n  focusedSelectItem: number;\n  describedBy?: string;\n  getOptionId: (multiSelectId: string, optionIndex: number) => string;\n  getListboxId: (multiSelectId: string) => string;\n}\n\n/** @scope .*/\nexport const useSearch = ({\n  selectId,\n  search,\n  optionsCount,\n  searchInputClassName,\n  expanded,\n  setFocusedSelectItem,\n  focusedSelectItem,\n  describedBy,\n  getOptionId,\n  getListboxId\n}: Props) => {\n  const [filter, setFilter] = useState(\"\");\n\n  const DEFAULT_RENDER_THRESHOLD = 0;\n\n  const searchInputRef = useRef<HTMLInputElement>(null);\n\n  const threshold = search?.renderThreshold ?? DEFAULT_RENDER_THRESHOLD;\n  const hasEnoughChildren = optionsCount >= threshold;\n\n  const shouldRenderSearch = () => {\n    if (search?.enabled) {\n      return hasEnoughChildren;\n    }\n\n    if (search) {\n      return search.enabled as boolean;\n    }\n\n    return optionsCount > DEFAULT_RENDER_THRESHOLD;\n  };\n\n  const renderSearch = () => {\n    return (\n      <input\n        {...((search?.searchInputProps as any) ?? {})}\n        ref={searchInputRef}\n        value={filter}\n        onChange={event => setFilter(event.currentTarget.value)}\n        className={[searchInputClassName, search?.searchInputProps?.className].join(\" \")}\n        style={{\n          display: expanded ? \"block\" : \"none\"\n        }}\n        type=\"text\"\n        name=\"search-option\"\n        placeholder={search?.searchPlaceholder}\n        role=\"combobox\"\n        autoComplete=\"off\"\n        autoCorrect=\"off\"\n        spellCheck={false}\n        aria-controls={getListboxId(selectId)}\n        aria-describedby={describedBy}\n        aria-autocomplete=\"none\"\n        aria-expanded={expanded}\n        aria-activedescendant={getOptionId(selectId, focusedSelectItem)}\n        aria-haspopup={true}\n      />\n    );\n  };\n\n  const resetSearchState = () => {\n    setFilter(\"\");\n    setFocusedSelectItem(0);\n  };\n\n  const visible = shouldRenderSearch();\n\n  useEffect(() => {\n    if (search?.searchInputProps?.reset) {\n      resetSearchState();\n    }\n  }, [search?.searchInputProps?.reset]);\n\n  return {\n    renderSearch,\n    resetSearchState,\n    searchVisible: visible,\n    searchThreshold: threshold,\n    searchInputRef,\n    filter\n  };\n};\n"],"names":["useSearch","selectId","search","optionsCount","searchInputClassName","expanded","setFocusedSelectItem","focusedSelectItem","describedBy","getOptionId","getListboxId","filter","setFilter","useState","DEFAULT_RENDER_THRESHOLD","searchInputRef","useRef","threshold","_a","renderThreshold","hasEnoughChildren","shouldRenderSearch","enabled","renderSearch","React","createElement","searchInputProps","ref","value","onChange","event","currentTarget","className","_b","join","style","display","type","name","placeholder","searchPlaceholder","role","autoComplete","autoCorrect","spellCheck","resetSearchState","visible","useEffect","reset","searchVisible","searchThreshold"],"mappings":"iLAiCa,MAAAA,EAAY,EACvBC,WACAC,SACAC,eACAC,uBACAC,WACAC,uBACAC,oBACAC,cACAC,cACAC,2BAEA,MAAOC,EAAQC,GAAaC,EAAQA,SAAC,IAErC,MAAMC,EAA2B,EAEjC,MAAMC,EAAiBC,SAAyB,MAEhD,MAAMC,GAAYC,EAAAhB,IAAA,MAAAA,SAAA,OAAA,EAAAA,EAAQiB,mBAAmB,MAAAD,SAAA,EAAAA,EAAAJ,EAC7C,MAAMM,EAAoBjB,GAAgBc,EAE1C,MAAMI,EAAqB,KACzB,GAAInB,UAAAA,SAAM,OAAA,EAANA,EAAQoB,QACV,OAAOF,EAGT,GAAIlB,EACF,OAAOA,EAAOoB,QAGhB,OAAOnB,EAAeW,CAAwB,EAGhD,MAAMS,EAAe,aACnB,OACEC,aAAAC,cAAA,QAAA,KACOP,EAAChB,IAAM,MAANA,SAAM,OAAA,EAANA,EAAQwB,oBAAwB,MAAAR,SAAA,EAAAA,EAAI,CAAE,EAC5CS,IAAKZ,EACLa,MAAOjB,EACPkB,SAAUC,GAASlB,EAAUkB,EAAMC,cAAcH,OACjDI,UAAW,CAAC5B,GAAsB6B,EAAA/B,IAAM,MAANA,SAAM,OAAA,EAANA,EAAQwB,oBAAgB,MAAAO,SAAA,OAAA,EAAAA,EAAED,WAAWE,KAAK,KAC5EC,MAAO,CACLC,QAAS/B,EAAW,QAAU,QAEhCgC,KAAK,OACLC,KAAK,gBACLC,YAAarC,IAAM,MAANA,SAAA,OAAA,EAAAA,EAAQsC,kBACrBC,KAAK,WACLC,aAAa,MACbC,YAAY,MACZC,WAAY,MAAK,gBACFlC,EAAaT,GACV,mBAAAO,EACA,oBAAA,uBACHH,EAAQ,wBACAI,EAAYR,EAAUM,GAC9B,gBAAA,MAEjB,EAGJ,MAAMsC,EAAmB,KACvBjC,EAAU,IACVN,EAAqB,EAAE,EAGzB,MAAMwC,EAAUzB,IAEhB0B,EAAAA,WAAU,WACR,IAAI7B,EAAAhB,IAAM,MAANA,SAAM,OAAA,EAANA,EAAQwB,oBAAgB,MAAAR,SAAA,OAAA,EAAAA,EAAE8B,MAC5BH,GACD,GACA,EAACZ,EAAA/B,UAAAA,SAAM,OAAA,EAANA,EAAQwB,oBAAgB,MAAAO,SAAA,OAAA,EAAAA,EAAEe,QAE9B,MAAO,CACLzB,eACAsB,mBACAI,cAAeH,EACfI,gBAAiBjC,EACjBF,iBACAJ,SACD"}

package/dist/cjs/Form/Select/SingleSelect/Select.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:true});var e=require("./Select.module.cjs.js");var t=require("react");var s=require("../../../src/hooks/useBodyClick.cjs.js");var a=require("../../../src/hooks/useDetermineStatusIcon.cjs.js");var r=require("../../../src/readyclasses.module.cjs.js");var l=require("../../../src/util/helper.cjs.js");var n=require("../../../Icon/Icon.cjs.js");var c=require("../useSelectPositionList.cjs.js");var o=require("../useAddNewBtn.cjs.js");var u=require("./useSearch.cjs.js");var d=require("./useArrowNavigation.cjs.js");function i(e){return e&&typeof e==="object"&&"default"in e?e:{default:e}}var f=i(t);const p=({children:i,name:p,disabled:h=false,labeledBy:m,placeholder:v,describedBy:b,searchPlaceholder:S="Search item",searchInputProps:C,selectButtonProps:j,className:E,error:N=false,success:y=false,value:g,clearLabel:I="Clear selection",noResultsLabel:w="No results found",onChange:x,addNew:R,search:B,...P},q)=>{const[A,L]=t.useState(false);const[k,F]=t.useState("");const O=t.useRef(null);const $=t.useRef(null);const[D,H]=t.useState(-1);const[M,T]=t.useState(false);const[_,K]=t.useState(false);const U=f["default"].Children.count(i);const{filter:V,isSearching:z,renderSearch:G,searchInputRef:J,setIsSearching:Q,searchThreshold:W,searchVisible:X}=u.useSearch({expanded:A,search:B,searchInputClassName:e["default"]["select-search"],optionsCount:U,setFocusedSelectItem:H,searchInputProps:C,searchPlaceholder:S});const{addBtnRef:Y,addNewBtnOptionsContainerClassName:Z,renderAddNew:ee}=o.useAddNewBtn({addNew:R,filter:V,focusedSelectItem:D,optionsCount:U,searchInputRef:J});const te=q||t.createRef();const se=e=>{if(te.current&&e){te.current.value=e.getAttribute("data-value");te.current.dispatchEvent(new Event("change",{bubbles:true}))}L(false)};const ae=t.useRef(null);const{onArrowNavigation:re}=d.useArrowNavigation({expanded:A,setExpanded:L,isSearching:z,setIsSearching:Q,setFocusedSelectItem:H,onOptionChangeHandler:se,childrenCount:U,setShouldClick:T,searchInputRef:J,addBtnRef:Y,renderThreshold:W});const{listPosition:le,opacity:ne,optionsListMaxHeight:ce,setListPosition:oe,setOpacity:ue}=c.useSelectPositionList({expanded:A,optionListReference:$,containerReference:O,addBtnRef:Y});const de=e=>{f["default"].Children.forEach(i,(t=>{if(t.props.value===e)F(t.props.children)}))};const ie=()=>{if(z||V!==""){const s=f["default"].Children.toArray(i).filter((e=>e.props.children.toLowerCase().match(V.toLowerCase())!==null));const a=t(s);if(a.length===0)return f["default"].createElement("li",{className:e["default"]["no-results"]},w);return t(s)}return t(i);function t(e){return f["default"].Children.map(e,((e,t)=>f["default"].cloneElement(e,{onFocusChange:e=>{H(e)},onOptionSelect:e=>{se(e.current);T(false)},isSelected:e.props.value===g,isSearching:z,selectOpened:A,childIndex:t,hasFocus:D===t,shouldClick:M,isAddBtnFocused:Y.current===document.activeElement})))}};const fe=()=>A?f["default"].createElement(n.Icon,{className:e["default"]["chevron-icon"],icon:n.Icons.ChevronUp}):f["default"].createElement(n.Icon,{className:e["default"]["chevron-icon"],icon:n.Icons.ChevronDown});const pe=a.useDetermineStatusIcon({success:y,error:N});const he=e=>{x===null||x===void 0?void 0:x(e)};t.useEffect((()=>{if(A){H(0);K(true)}if(!A&&ae.current&&_){ae.current.focus();K(false)}}),[A,ae.current,_]);t.useEffect((()=>{de(g)}),[g]);s.useBodyClick((e=>!e.target.closest(".custom-select")&&A),(()=>{L(false);oe({top:0,bottom:"initial"});ue(0)}),A);const me=[];A&&me.push(e["default"].expanded);N&&me.push(e["default"].error);h&&me.push(e["default"].disabled);E&&me.push(E);y&&me.push(e["default"].success);return f["default"].createElement(t.Fragment,null,f["default"].createElement("select",{...l.filterProps(P,/^data-/,false),tabIndex:-1,"aria-hidden":"true",ref:te,name:p,onChange:he,className:r["default"]["sr-only"]},f["default"].createElement("option",{value:""}),f["default"].Children.map(i,(e=>f["default"].createElement("option",{value:e.props.value})))),f["default"].createElement("div",{...l.filterProps(P,/^data-/),ref:O,onKeyDown:re,className:`custom-select ${e["default"].select} ${me.join(" ")} ${E!==null&&E!==void 0?E:""}`},X&&G(),f["default"].createElement("button",{...j,onClick:()=>{L(!A)},ref:ae,type:"button",name:p,className:`${e["default"]["custom-select"]} ${me.join(" ")} `,style:{display:A&&X?"none":"initial"},disabled:h,"aria-disabled":h,"aria-invalid":N,"aria-expanded":A,"aria-haspopup":"listbox","aria-labelledby":m,"aria-describedby":b},f["default"].createElement("div",{"data-display":true,className:e["default"]["selected"]},!g&&v&&f["default"].createElement("span",{className:e["default"]["placeholder"]},v),(g===null||g===void 0?void 0:g.length)>0&&f["default"].createElement("span",{"data-display-inner":true},k)),f["default"].createElement("div",{className:e["default"]["status"]},pe||fe())),f["default"].createElement("div",{ref:$,className:`list-wrapper ${e["default"]["list-wrapper"]}`,style:{display:A?"block":"none",opacity:ne,maxHeight:ce.wrapper,pointerEvents:A?"auto":"none",...le}},f["default"].createElement("ul",{className:Z,role:"listbox",style:{maxHeight:ce.list}},ie()),ee())))};const h=f["default"].forwardRef(p);exports.Select=h;
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});var e=require("./Select.module.cjs.js");var t=require("react");var s=require("../../../src/hooks/useBodyClick.cjs.js");var a=require("../../../src/hooks/useDetermineStatusIcon.cjs.js");var r=require("../../../src/readyclasses.module.cjs.js");var n=require("../../../src/util/helper.cjs.js");var l=require("../../../Icon/Icon.cjs.js");var c=require("../useSelectPositionList.cjs.js");var o=require("../useAddNewBtn.cjs.js");var u=require("./useSearch.cjs.js");var i=require("./useArrowNavigation.cjs.js");function d(e){return e&&typeof e==="object"&&"default"in e?e:{default:e}}var f=d(t);const p=({children:d,name:p,disabled:h=false,labeledBy:m,placeholder:v,describedBy:b,selectButtonProps:C,className:S,error:j=false,success:E=false,value:N,clearLabel:y="Clear selection",noResultsLabel:g="No results found",onChange:I,addNew:w,search:x,...R},B)=>{const[q,A]=t.useState(false);const[L,k]=t.useState("");const P=t.useRef(null);const F=t.useRef(null);const[O,$]=t.useState(-1);const[D,H]=t.useState(false);const[M,T]=t.useState(false);const _=f["default"].Children.count(d);const{filter:K,isSearching:U,renderSearch:V,searchInputRef:z,setIsSearching:G,searchThreshold:J,searchVisible:Q}=u.useSearch({expanded:q,search:x,searchInputClassName:e["default"]["select-search"],optionsCount:_,setFocusedSelectItem:$});const{addBtnRef:W,addNewBtnOptionsContainerClassName:X,renderAddNew:Y}=o.useAddNewBtn({addNew:w,filter:K,focusedSelectItem:O,optionsCount:_,searchInputRef:z});const Z=B||t.createRef();const ee=e=>{if(Z.current&&e){Z.current.value=e.getAttribute("data-value");Z.current.dispatchEvent(new Event("change",{bubbles:true}))}A(false)};const te=t.useRef(null);const{onArrowNavigation:se}=i.useArrowNavigation({expanded:q,setExpanded:A,isSearching:U,setIsSearching:G,setFocusedSelectItem:$,onOptionChangeHandler:ee,childrenCount:_,setShouldClick:H,searchInputRef:z,addBtnRef:W,renderThreshold:J});const{listPosition:ae,opacity:re,optionsListMaxHeight:ne,setListPosition:le,setOpacity:ce}=c.useSelectPositionList({expanded:q,optionListReference:F,containerReference:P,addBtnRef:W});const oe=e=>{f["default"].Children.forEach(d,(t=>{if(t.props.value===e)k(t.props.children)}))};const ue=()=>{if(U||K!==""){const s=f["default"].Children.toArray(d).filter((e=>e.props.children.toLowerCase().match(K.toLowerCase())!==null));const a=t(s);if(a.length===0)return f["default"].createElement("li",{className:e["default"]["no-results"]},g);return t(s)}return t(d);function t(e){return f["default"].Children.map(e,((e,t)=>f["default"].cloneElement(e,{onFocusChange:e=>{$(e)},onOptionSelect:e=>{ee(e.current);H(false)},isSelected:e.props.value===N,isSearching:U,selectOpened:q,childIndex:t,hasFocus:O===t,shouldClick:D,isAddBtnFocused:W.current===document.activeElement})))}};const ie=()=>q?f["default"].createElement(l.Icon,{className:e["default"]["chevron-icon"],icon:l.Icons.ChevronUp}):f["default"].createElement(l.Icon,{className:e["default"]["chevron-icon"],icon:l.Icons.ChevronDown});const de=a.useDetermineStatusIcon({success:E,error:j});const fe=e=>{I===null||I===void 0?void 0:I(e)};t.useEffect((()=>{if(q){$(0);T(true)}if(!q&&te.current&&M){te.current.focus();T(false)}}),[q,te.current,M]);t.useEffect((()=>{oe(N)}),[N]);s.useBodyClick((e=>!e.target.closest(".custom-select")&&q),(()=>{A(false);le({top:0,bottom:"initial"});ce(0)}),q);const pe=[];q&&pe.push(e["default"].expanded);j&&pe.push(e["default"].error);h&&pe.push(e["default"].disabled);S&&pe.push(S);E&&pe.push(e["default"].success);return f["default"].createElement(t.Fragment,null,f["default"].createElement("select",{...n.filterProps(R,/^data-/,false),tabIndex:-1,"aria-hidden":"true",ref:Z,name:p,onChange:fe,className:r["default"]["sr-only"]},f["default"].createElement("option",{value:""}),f["default"].Children.map(d,(e=>f["default"].createElement("option",{value:e.props.value})))),f["default"].createElement("div",{...n.filterProps(R,/^data-/),ref:P,onKeyDown:se,className:`custom-select ${e["default"].select} ${pe.join(" ")} ${S!==null&&S!==void 0?S:""}`},Q&&V(),f["default"].createElement("button",{...C,onClick:()=>{A(!q)},ref:te,type:"button",name:p,className:`${e["default"]["custom-select"]} ${pe.join(" ")} `,style:{display:q&&Q?"none":"initial"},disabled:h,"aria-disabled":h,"aria-invalid":j,"aria-expanded":q,"aria-haspopup":"listbox","aria-labelledby":m,"aria-describedby":b},f["default"].createElement("div",{"data-display":true,className:e["default"]["selected"]},!N&&v&&f["default"].createElement("span",{className:e["default"]["placeholder"]},v),(N===null||N===void 0?void 0:N.length)>0&&f["default"].createElement("span",{"data-display-inner":true},L)),f["default"].createElement("div",{className:e["default"]["status"]},de||ie())),f["default"].createElement("div",{ref:F,className:`list-wrapper ${e["default"]["list-wrapper"]}`,style:{display:q?"block":"none",opacity:re,maxHeight:ne.wrapper,pointerEvents:q?"auto":"none",...ae}},f["default"].createElement("ul",{className:X,role:"listbox",style:{maxHeight:ne.list}},ue()),Y())))};const h=f["default"].forwardRef(p);exports.Select=h;
 //# sourceMappingURL=Select.cjs.js.map

package/dist/cjs/Form/Select/SingleSelect/Select.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.cjs.js","sources":["../../../../../../../src/components/Form/Select/SingleSelect/Select.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport classes from \"./Select.module.scss\";\n\nimport React, {\n  createRef,\n  ForwardRefRenderFunction,\n  Fragment,\n  ReactElement,\n  useEffect,\n  useRef,\n  useState\n} from \"react\";\nimport { useBodyClick } from \"../../../../hooks/useBodyClick\";\nimport { useDetermineStatusIcon } from \"../../../../hooks/useDetermineStatusIcon\";\nimport readyclasses from \"../../../../readyclasses.module.scss\";\nimport { filterProps } from \"../../../../util/helper\";\nimport { Icon, Icons } from \"../../../Icon/Icon\";\nimport { SingleSelectProps } from \"../Select.interfaces\";\nimport { useSelectPositionList } from \"../useSelectPositionList\";\nimport { useAddNewBtn } from \"../useAddNewBtn\";\nimport { useSearch } from \"./useSearch\";\nimport { useArrowNavigation } from \"./useArrowNavigation\";\n\nconst SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, SingleSelectProps> = (\n  {\n    children,\n    name,\n    disabled = false,\n    labeledBy,\n    placeholder,\n    describedBy,\n    searchPlaceholder = \"Search item\",\n    searchInputProps,\n    selectButtonProps,\n    className,\n    error = false,\n    success = false,\n    value,\n    clearLabel = \"Clear selection\",\n    noResultsLabel = \"No results found\",\n    onChange,\n    addNew,\n    search,\n    ...rest\n  }: SingleSelectProps,\n  ref\n) => {\n  const [expanded, setExpanded] = useState(false);\n  const [display, setDisplay] = useState(\"\");\n  const containerReference = useRef<HTMLDivElement>(null);\n  const optionListReference = useRef<HTMLDivElement>(null);\n  const [focusedSelectItem, setFocusedSelectItem] = useState(-1);\n  const [shouldClick, setShouldClick] = useState(false);\n  /** We need this, because whenever we use the arrow keys to select the select item, and we focus the currently selected item it fires the \"click\" listener in Option component. Instead, we only want this to fire if we press \"enter\" or \"spacebar\" so we set this to true whenever that is the case, and back to false when it has been executed. */\n  const [shouldFocusButtonAfterClose, setShouldFocusButtonAfterClose] = useState(false);\n  const optionsCount = React.Children.count(children);\n  const {\n    filter,\n    isSearching,\n    renderSearch,\n    searchInputRef,\n    setIsSearching,\n    searchThreshold,\n    searchVisible\n  } = useSearch({\n    expanded,\n    search,\n    searchInputClassName: classes[\"select-search\"],\n    optionsCount,\n    setFocusedSelectItem,\n    searchInputProps,\n    searchPlaceholder\n  });\n  const { addBtnRef, addNewBtnOptionsContainerClassName, renderAddNew } = useAddNewBtn({\n    addNew,\n    filter,\n    focusedSelectItem,\n    optionsCount,\n    searchInputRef\n  });\n\n  const nativeSelect = (ref as React.RefObject<HTMLSelectElement>) || createRef();\n\n  const onOptionChangeHandler = (optionElement: HTMLElement | null) => {\n    if (nativeSelect.current && optionElement) {\n      nativeSelect.current.value = optionElement.getAttribute(\"data-value\")!;\n      nativeSelect.current.dispatchEvent(new Event(\"change\", { bubbles: true }));\n    }\n\n    setExpanded(false);\n  };\n\n  const customSelectButtonRef = useRef<HTMLButtonElement>(null);\n  const { onArrowNavigation } = useArrowNavigation({\n    expanded,\n    setExpanded,\n    isSearching,\n    setIsSearching,\n    setFocusedSelectItem,\n    onOptionChangeHandler,\n    childrenCount: optionsCount,\n    setShouldClick,\n    searchInputRef,\n    addBtnRef,\n    renderThreshold: searchThreshold\n  });\n\n  const { listPosition, opacity, optionsListMaxHeight, setListPosition, setOpacity } =\n    useSelectPositionList({ expanded, optionListReference, containerReference, addBtnRef });\n\n  const syncDisplayValue = (val: string) => {\n    React.Children.forEach(children, child => {\n      if (child.props.value === val) {\n        setDisplay(child.props.children);\n      }\n    });\n  };\n\n  /**\n   * @description We have to modify the children (Option component) to have an additional props that allows us to keep track of which one is selected and focused at all times and if a filter is active.\n   * The `children` prop can be either a single object (1 child) or an array of multiple children.\n   */\n  const renderOptions = () => {\n    if (isSearching || filter !== \"\") {\n      const filteredChildren = React.Children.toArray(children).filter(\n        child =>\n          (child as ReactElement).props.children.toLowerCase().match(filter.toLowerCase()) !== null\n      );\n\n      const internalChildren = _internalRenderChildren(filteredChildren as ReactElement[]);\n\n      if (internalChildren.length === 0) {\n        return <li className={classes[\"no-results\"]}>{noResultsLabel}</li>;\n      }\n\n      return _internalRenderChildren(filteredChildren as ReactElement[]);\n    }\n\n    return _internalRenderChildren(children);\n\n    function _internalRenderChildren(internalChildren: ReactElement[]) {\n      return React.Children.map(internalChildren, (child, index) => {\n        return React.cloneElement(child, {\n          onFocusChange: (childIndex: number) => {\n            setFocusedSelectItem(childIndex);\n          },\n          onOptionSelect: (optionRef: React.RefObject<HTMLLIElement>) => {\n            onOptionChangeHandler(optionRef.current);\n            setShouldClick(false);\n          },\n          isSelected: child.props.value === value,\n          isSearching: isSearching,\n          selectOpened: expanded,\n          childIndex: index,\n          hasFocus: focusedSelectItem === index,\n          shouldClick: shouldClick,\n          isAddBtnFocused: addBtnRef.current === document.activeElement\n        });\n      });\n    }\n  };\n\n  const renderChevronIcon = () => {\n    return expanded ? (\n      <Icon className={classes[\"chevron-icon\"]} icon={Icons.ChevronUp} />\n    ) : (\n      <Icon className={classes[\"chevron-icon\"]} icon={Icons.ChevronDown} />\n    );\n  };\n\n  const icon = useDetermineStatusIcon({ success, error });\n\n  const nativeOnChangeHandler = (event: React.ChangeEvent<HTMLSelectElement>) => {\n    onChange?.(event);\n  };\n\n  useEffect(() => {\n    if (expanded) {\n      setFocusedSelectItem(0);\n      setShouldFocusButtonAfterClose(true);\n    }\n\n    if (!expanded && customSelectButtonRef.current && shouldFocusButtonAfterClose) {\n      customSelectButtonRef.current.focus();\n      setShouldFocusButtonAfterClose(false);\n    }\n  }, [expanded, customSelectButtonRef.current, shouldFocusButtonAfterClose]);\n\n  useEffect(() => {\n    syncDisplayValue(value);\n  }, [value]);\n\n  useBodyClick(\n    (event: MouseEvent) => !(event.target as Element).closest(\".custom-select\") && expanded,\n    () => {\n      setExpanded(false);\n      setListPosition({ top: 0, bottom: \"initial\" });\n      setOpacity(0);\n    },\n    expanded\n  );\n\n  const additionalClasses = [];\n  expanded && additionalClasses.push(classes.expanded);\n  error && additionalClasses.push(classes.error);\n  disabled && additionalClasses.push(classes.disabled);\n  className && additionalClasses.push(className);\n  success && additionalClasses.push(classes.success);\n\n  /** The native select is purely for external form libraries. We use it to emit an onChange with native select event object so they know exactly what's happening. */\n  return (\n    <Fragment>\n      <select\n        {...filterProps(rest, /^data-/, false)}\n        tabIndex={-1}\n        aria-hidden=\"true\"\n        ref={nativeSelect}\n        name={name}\n        onChange={nativeOnChangeHandler}\n        className={readyclasses[\"sr-only\"]}\n      >\n        <option value=\"\"></option>\n        {React.Children.map(children, child => (\n          <option value={child.props.value}></option>\n        ))}\n      </select>\n      <div\n        {...filterProps(rest, /^data-/)}\n        ref={containerReference}\n        onKeyDown={onArrowNavigation}\n        className={`custom-select ${classes.select} ${additionalClasses.join(\" \")} ${\n          className ?? \"\"\n        }`}\n      >\n        {searchVisible && renderSearch()}\n        <button\n          {...selectButtonProps}\n          onClick={() => {\n            setExpanded(!expanded);\n          }}\n          ref={customSelectButtonRef}\n          type=\"button\"\n          name={name}\n          className={`${classes[\"custom-select\"]} ${additionalClasses.join(\" \")} `}\n          style={{ display: expanded && searchVisible ? \"none\" : \"initial\" }}\n          disabled={disabled}\n          aria-disabled={disabled}\n          aria-invalid={error}\n          aria-expanded={expanded}\n          aria-haspopup=\"listbox\"\n          aria-labelledby={labeledBy}\n          aria-describedby={describedBy}\n        >\n          <div data-display className={classes[\"selected\"]}>\n            {!value && placeholder && <span className={classes[\"placeholder\"]}>{placeholder}</span>}\n            {value?.length > 0 && <span data-display-inner>{display}</span>}\n          </div>\n          <div className={classes[\"status\"]}>{icon || renderChevronIcon()}</div>\n        </button>\n\n        <div\n          ref={optionListReference}\n          className={`list-wrapper ${classes[\"list-wrapper\"]}`}\n          style={{\n            display: expanded ? \"block\" : \"none\",\n            opacity: opacity,\n            maxHeight: optionsListMaxHeight.wrapper,\n            pointerEvents: expanded ? \"auto\" : \"none\",\n            ...listPosition\n          }}\n        >\n          <ul\n            className={addNewBtnOptionsContainerClassName}\n            role=\"listbox\"\n            style={{ maxHeight: optionsListMaxHeight.list }}\n          >\n            {renderOptions()}\n          </ul>\n          {renderAddNew()}\n        </div>\n      </div>\n    </Fragment>\n  );\n};\nexport const Select = React.forwardRef(SelectComponent);\n"],"names":["SelectComponent","children","name","disabled","labeledBy","placeholder","describedBy","searchPlaceholder","searchInputProps","selectButtonProps","className","error","success","value","clearLabel","noResultsLabel","onChange","addNew","search","rest","ref","expanded","setExpanded","useState","display","setDisplay","containerReference","useRef","optionListReference","focusedSelectItem","setFocusedSelectItem","shouldClick","setShouldClick","shouldFocusButtonAfterClose","setShouldFocusButtonAfterClose","optionsCount","React","Children","count","filter","isSearching","renderSearch","searchInputRef","setIsSearching","searchThreshold","searchVisible","useSearch","searchInputClassName","classes","addBtnRef","addNewBtnOptionsContainerClassName","renderAddNew","useAddNewBtn","nativeSelect","createRef","onOptionChangeHandler","optionElement","current","getAttribute","dispatchEvent","Event","bubbles","customSelectButtonRef","onArrowNavigation","useArrowNavigation","childrenCount","renderThreshold","listPosition","opacity","optionsListMaxHeight","setListPosition","setOpacity","useSelectPositionList","syncDisplayValue","val","forEach","child","props","renderOptions","filteredChildren","toArray","toLowerCase","match","internalChildren","_internalRenderChildren","length","createElement","map","index","cloneElement","onFocusChange","childIndex","onOptionSelect","optionRef","isSelected","selectOpened","hasFocus","isAddBtnFocused","document","activeElement","renderChevronIcon","Icon","icon","Icons","ChevronUp","ChevronDown","useDetermineStatusIcon","nativeOnChangeHandler","event","useEffect","focus","useBodyClick","target","closest","top","bottom","additionalClasses","push","Fragment","filterProps","tabIndex","readyclasses","onKeyDown","select","join","onClick","type","style","maxHeight","wrapper","pointerEvents","role","list","Select","forwardRef"],"mappings":"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"}
+{"version":3,"file":"Select.cjs.js","sources":["../../../../../../../src/components/Form/Select/SingleSelect/Select.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport classes from \"./Select.module.scss\";\n\nimport React, {\n  createRef,\n  ForwardRefRenderFunction,\n  Fragment,\n  ReactElement,\n  useEffect,\n  useRef,\n  useState\n} from \"react\";\nimport { useBodyClick } from \"../../../../hooks/useBodyClick\";\nimport { useDetermineStatusIcon } from \"../../../../hooks/useDetermineStatusIcon\";\nimport readyclasses from \"../../../../readyclasses.module.scss\";\nimport { filterProps } from \"../../../../util/helper\";\nimport { Icon, Icons } from \"../../../Icon/Icon\";\nimport { SingleSelectProps } from \"../Select.interfaces\";\nimport { useSelectPositionList } from \"../useSelectPositionList\";\nimport { useAddNewBtn } from \"../useAddNewBtn\";\nimport { useSearch } from \"./useSearch\";\nimport { useArrowNavigation } from \"./useArrowNavigation\";\n\nconst SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, SingleSelectProps> = (\n  {\n    children,\n    name,\n    disabled = false,\n    labeledBy,\n    placeholder,\n    describedBy,\n    selectButtonProps,\n    className,\n    error = false,\n    success = false,\n    value,\n    clearLabel = \"Clear selection\",\n    noResultsLabel = \"No results found\",\n    onChange,\n    addNew,\n    search,\n    ...rest\n  }: SingleSelectProps,\n  ref\n) => {\n  const [expanded, setExpanded] = useState(false);\n  const [display, setDisplay] = useState(\"\");\n  const containerReference = useRef<HTMLDivElement>(null);\n  const optionListReference = useRef<HTMLDivElement>(null);\n  const [focusedSelectItem, setFocusedSelectItem] = useState(-1);\n  const [shouldClick, setShouldClick] = useState(false);\n  /** We need this, because whenever we use the arrow keys to select the select item, and we focus the currently selected item it fires the \"click\" listener in Option component. Instead, we only want this to fire if we press \"enter\" or \"spacebar\" so we set this to true whenever that is the case, and back to false when it has been executed. */\n  const [shouldFocusButtonAfterClose, setShouldFocusButtonAfterClose] = useState(false);\n  const optionsCount = React.Children.count(children);\n  const {\n    filter,\n    isSearching,\n    renderSearch,\n    searchInputRef,\n    setIsSearching,\n    searchThreshold,\n    searchVisible\n  } = useSearch({\n    expanded,\n    search,\n    searchInputClassName: classes[\"select-search\"],\n    optionsCount,\n    setFocusedSelectItem\n  });\n  const { addBtnRef, addNewBtnOptionsContainerClassName, renderAddNew } = useAddNewBtn({\n    addNew,\n    filter,\n    focusedSelectItem,\n    optionsCount,\n    searchInputRef\n  });\n\n  const nativeSelect = (ref as React.RefObject<HTMLSelectElement>) || createRef();\n\n  const onOptionChangeHandler = (optionElement: HTMLElement | null) => {\n    if (nativeSelect.current && optionElement) {\n      nativeSelect.current.value = optionElement.getAttribute(\"data-value\")!;\n      nativeSelect.current.dispatchEvent(new Event(\"change\", { bubbles: true }));\n    }\n\n    setExpanded(false);\n  };\n\n  const customSelectButtonRef = useRef<HTMLButtonElement>(null);\n  const { onArrowNavigation } = useArrowNavigation({\n    expanded,\n    setExpanded,\n    isSearching,\n    setIsSearching,\n    setFocusedSelectItem,\n    onOptionChangeHandler,\n    childrenCount: optionsCount,\n    setShouldClick,\n    searchInputRef,\n    addBtnRef,\n    renderThreshold: searchThreshold\n  });\n\n  const { listPosition, opacity, optionsListMaxHeight, setListPosition, setOpacity } =\n    useSelectPositionList({ expanded, optionListReference, containerReference, addBtnRef });\n\n  const syncDisplayValue = (val: string) => {\n    React.Children.forEach(children, child => {\n      if (child.props.value === val) {\n        setDisplay(child.props.children);\n      }\n    });\n  };\n\n  /**\n   * @description We have to modify the children (Option component) to have an additional props that allows us to keep track of which one is selected and focused at all times and if a filter is active.\n   * The `children` prop can be either a single object (1 child) or an array of multiple children.\n   */\n  const renderOptions = () => {\n    if (isSearching || filter !== \"\") {\n      const filteredChildren = React.Children.toArray(children).filter(\n        child =>\n          (child as ReactElement).props.children.toLowerCase().match(filter.toLowerCase()) !== null\n      );\n\n      const internalChildren = _internalRenderChildren(filteredChildren as ReactElement[]);\n\n      if (internalChildren.length === 0) {\n        return <li className={classes[\"no-results\"]}>{noResultsLabel}</li>;\n      }\n\n      return _internalRenderChildren(filteredChildren as ReactElement[]);\n    }\n\n    return _internalRenderChildren(children);\n\n    function _internalRenderChildren(internalChildren: ReactElement[]) {\n      return React.Children.map(internalChildren, (child, index) => {\n        return React.cloneElement(child, {\n          onFocusChange: (childIndex: number) => {\n            setFocusedSelectItem(childIndex);\n          },\n          onOptionSelect: (optionRef: React.RefObject<HTMLLIElement>) => {\n            onOptionChangeHandler(optionRef.current);\n            setShouldClick(false);\n          },\n          isSelected: child.props.value === value,\n          isSearching: isSearching,\n          selectOpened: expanded,\n          childIndex: index,\n          hasFocus: focusedSelectItem === index,\n          shouldClick: shouldClick,\n          isAddBtnFocused: addBtnRef.current === document.activeElement\n        });\n      });\n    }\n  };\n\n  const renderChevronIcon = () => {\n    return expanded ? (\n      <Icon className={classes[\"chevron-icon\"]} icon={Icons.ChevronUp} />\n    ) : (\n      <Icon className={classes[\"chevron-icon\"]} icon={Icons.ChevronDown} />\n    );\n  };\n\n  const icon = useDetermineStatusIcon({ success, error });\n\n  const nativeOnChangeHandler = (event: React.ChangeEvent<HTMLSelectElement>) => {\n    onChange?.(event);\n  };\n\n  useEffect(() => {\n    if (expanded) {\n      setFocusedSelectItem(0);\n      setShouldFocusButtonAfterClose(true);\n    }\n\n    if (!expanded && customSelectButtonRef.current && shouldFocusButtonAfterClose) {\n      customSelectButtonRef.current.focus();\n      setShouldFocusButtonAfterClose(false);\n    }\n  }, [expanded, customSelectButtonRef.current, shouldFocusButtonAfterClose]);\n\n  useEffect(() => {\n    syncDisplayValue(value);\n  }, [value]);\n\n  useBodyClick(\n    (event: MouseEvent) => !(event.target as Element).closest(\".custom-select\") && expanded,\n    () => {\n      setExpanded(false);\n      setListPosition({ top: 0, bottom: \"initial\" });\n      setOpacity(0);\n    },\n    expanded\n  );\n\n  const additionalClasses = [];\n  expanded && additionalClasses.push(classes.expanded);\n  error && additionalClasses.push(classes.error);\n  disabled && additionalClasses.push(classes.disabled);\n  className && additionalClasses.push(className);\n  success && additionalClasses.push(classes.success);\n\n  /** The native select is purely for external form libraries. We use it to emit an onChange with native select event object so they know exactly what's happening. */\n  return (\n    <Fragment>\n      <select\n        {...filterProps(rest, /^data-/, false)}\n        tabIndex={-1}\n        aria-hidden=\"true\"\n        ref={nativeSelect}\n        name={name}\n        onChange={nativeOnChangeHandler}\n        className={readyclasses[\"sr-only\"]}\n      >\n        <option value=\"\"></option>\n        {React.Children.map(children, child => (\n          <option value={child.props.value}></option>\n        ))}\n      </select>\n      <div\n        {...filterProps(rest, /^data-/)}\n        ref={containerReference}\n        onKeyDown={onArrowNavigation}\n        className={`custom-select ${classes.select} ${additionalClasses.join(\" \")} ${\n          className ?? \"\"\n        }`}\n      >\n        {searchVisible && renderSearch()}\n        <button\n          {...selectButtonProps}\n          onClick={() => {\n            setExpanded(!expanded);\n          }}\n          ref={customSelectButtonRef}\n          type=\"button\"\n          name={name}\n          className={`${classes[\"custom-select\"]} ${additionalClasses.join(\" \")} `}\n          style={{ display: expanded && searchVisible ? \"none\" : \"initial\" }}\n          disabled={disabled}\n          aria-disabled={disabled}\n          aria-invalid={error}\n          aria-expanded={expanded}\n          aria-haspopup=\"listbox\"\n          aria-labelledby={labeledBy}\n          aria-describedby={describedBy}\n        >\n          <div data-display className={classes[\"selected\"]}>\n            {!value && placeholder && <span className={classes[\"placeholder\"]}>{placeholder}</span>}\n            {value?.length > 0 && <span data-display-inner>{display}</span>}\n          </div>\n          <div className={classes[\"status\"]}>{icon || renderChevronIcon()}</div>\n        </button>\n\n        <div\n          ref={optionListReference}\n          className={`list-wrapper ${classes[\"list-wrapper\"]}`}\n          style={{\n            display: expanded ? \"block\" : \"none\",\n            opacity: opacity,\n            maxHeight: optionsListMaxHeight.wrapper,\n            pointerEvents: expanded ? \"auto\" : \"none\",\n            ...listPosition\n          }}\n        >\n          <ul\n            className={addNewBtnOptionsContainerClassName}\n            role=\"listbox\"\n            style={{ maxHeight: optionsListMaxHeight.list }}\n          >\n            {renderOptions()}\n          </ul>\n          {renderAddNew()}\n        </div>\n      </div>\n    </Fragment>\n  );\n};\nexport const Select = React.forwardRef(SelectComponent);\n"],"names":["SelectComponent","children","name","disabled","labeledBy","placeholder","describedBy","selectButtonProps","className","error","success","value","clearLabel","noResultsLabel","onChange","addNew","search","rest","ref","expanded","setExpanded","useState","display","setDisplay","containerReference","useRef","optionListReference","focusedSelectItem","setFocusedSelectItem","shouldClick","setShouldClick","shouldFocusButtonAfterClose","setShouldFocusButtonAfterClose","optionsCount","React","Children","count","filter","isSearching","renderSearch","searchInputRef","setIsSearching","searchThreshold","searchVisible","useSearch","searchInputClassName","classes","addBtnRef","addNewBtnOptionsContainerClassName","renderAddNew","useAddNewBtn","nativeSelect","createRef","onOptionChangeHandler","optionElement","current","getAttribute","dispatchEvent","Event","bubbles","customSelectButtonRef","onArrowNavigation","useArrowNavigation","childrenCount","renderThreshold","listPosition","opacity","optionsListMaxHeight","setListPosition","setOpacity","useSelectPositionList","syncDisplayValue","val","forEach","child","props","renderOptions","filteredChildren","toArray","toLowerCase","match","internalChildren","_internalRenderChildren","length","createElement","map","index","cloneElement","onFocusChange","childIndex","onOptionSelect","optionRef","isSelected","selectOpened","hasFocus","isAddBtnFocused","document","activeElement","renderChevronIcon","Icon","icon","Icons","ChevronUp","ChevronDown","useDetermineStatusIcon","nativeOnChangeHandler","event","useEffect","focus","useBodyClick","target","closest","top","bottom","additionalClasses","push","Fragment","filterProps","tabIndex","readyclasses","onKeyDown","select","join","onClick","type","style","maxHeight","wrapper","pointerEvents","role","list","Select","forwardRef"],"mappings":"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"}

package/dist/cjs/Form/Select/SingleSelect/useSearch.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:true});var e=require("react");var r=require("../../Input/Input.cjs.js");function o(e){return e&&typeof e==="object"&&"default"in e?e:{default:e}}var s=o(e);const l=({search:o,optionsCount:l,searchPlaceholder:n,searchInputProps:t,searchInputClassName:u,expanded:a,setFocusedSelectItem:d})=>{var i,c;const[v,p]=e.useState("");const[h,f]=e.useState(false);const I=10;const P=e.useRef(null);const m=(i=o===null||o===void 0?void 0:o.renderThreshold)!==null&&i!==void 0?i:I;const S=l>=m;const b=e=>{p(e.currentTarget.value)};const y=()=>{if(o===null||o===void 0?void 0:o.enabled)return S;if(o)return o.enabled;return l>I};const N=()=>{var e,l,d,i,c,v,p;return s["default"].createElement(r.Input,{...(l=(e=o===null||o===void 0?void 0:o.searchInputProps)!==null&&e!==void 0?e:t)!==null&&l!==void 0?l:{},ref:P,onFocus:()=>f(true),onBlur:()=>f(false),onChange:b,className:u,wrapperProps:{className:(c=(i=(d=o===null||o===void 0?void 0:o.searchInputProps)===null||d===void 0?void 0:d.wrapperProps)===null||i===void 0?void 0:i.className)!==null&&c!==void 0?c:(v=t===null||t===void 0?void 0:t.wrapperProps)===null||v===void 0?void 0:v.className},style:{display:a?"block":"none"},type:"text",name:"search-option",placeholder:(p=o===null||o===void 0?void 0:o.searchPlaceholder)!==null&&p!==void 0?p:n})};const g=()=>{p("");f(false);d(-1)};const j=y();e.useEffect((()=>{var e;(((e=o===null||o===void 0?void 0:o.searchInputProps)===null||e===void 0?void 0:e.reset)||(t===null||t===void 0?void 0:t.reset))&&g()}),[t===null||t===void 0?void 0:t.reset,(c=o===null||o===void 0?void 0:o.searchInputProps)===null||c===void 0?void 0:c.reset]);e.useEffect((()=>{const e=!j&&!h;if(e)g()}),[h,j]);return{renderSearch:N,setIsSearching:f,searchVisible:j,searchThreshold:m,searchInputRef:P,filter:v,isSearching:h}};exports.useSearch=l;
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});var e=require("react");var r=require("../../Input/Input.cjs.js");function o(e){return e&&typeof e==="object"&&"default"in e?e:{default:e}}var s=o(e);const t=({search:o,optionsCount:t,searchInputClassName:n,expanded:l,setFocusedSelectItem:a})=>{var u,c;const[i,d]=e.useState("");const[v,p]=e.useState(false);const h=10;const f=e.useRef(null);const I=(u=o===null||o===void 0?void 0:o.renderThreshold)!==null&&u!==void 0?u:h;const P=t>=I;const m=e=>{d(e.currentTarget.value)};const S=()=>{if(o===null||o===void 0?void 0:o.enabled)return P;if(o)return o.enabled;return t>h};const b=()=>{var e,t,a;return s["default"].createElement(r.Input,{...(e=o===null||o===void 0?void 0:o.searchInputProps)!==null&&e!==void 0?e:{},ref:f,onFocus:()=>p(true),onBlur:()=>p(false),onChange:m,className:n,wrapperProps:{className:(a=(t=o===null||o===void 0?void 0:o.searchInputProps)===null||t===void 0?void 0:t.wrapperProps)===null||a===void 0?void 0:a.className},style:{display:l?"block":"none"},type:"text",name:"search-option",placeholder:(o===null||o===void 0?void 0:o.searchPlaceholder)?o===null||o===void 0?void 0:o.searchPlaceholder:"Search item"})};const y=()=>{d("");p(false);a(-1)};const g=S();e.useEffect((()=>{var e;((e=o===null||o===void 0?void 0:o.searchInputProps)===null||e===void 0?void 0:e.reset)&&y()}),[(c=o===null||o===void 0?void 0:o.searchInputProps)===null||c===void 0?void 0:c.reset]);e.useEffect((()=>{const e=!g&&!v;if(e)y()}),[v,g]);return{renderSearch:b,setIsSearching:p,searchVisible:g,searchThreshold:I,searchInputRef:f,filter:i,isSearching:v}};exports.useSearch=t;
 //# sourceMappingURL=useSearch.cjs.js.map

package/dist/cjs/Form/Select/SingleSelect/useSearch.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSearch.cjs.js","sources":["../../../../../../../src/components/Form/Select/SingleSelect/useSearch.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, { useEffect, useRef, useState } from \"react\";\nimport { PartialInputProps, SearchProps } from \"../Select.interfaces\";\nimport { Input } from \"../../Input/Input\";\n\ninterface Props {\n  search?: SearchProps;\n  optionsCount: number;\n  /**\n   * @deprecated\n   */\n  searchPlaceholder?: string;\n  /**\n   * @deprecated\n   */\n  searchInputProps?: PartialInputProps & { reset?: boolean };\n  searchInputClassName: string;\n  expanded: boolean;\n  setFocusedSelectItem: (idx: number) => void;\n}\n\n/** @scope .*/\nexport const useSearch = ({\n  search,\n  optionsCount,\n  searchPlaceholder,\n  searchInputProps,\n  searchInputClassName,\n  expanded,\n  setFocusedSelectItem\n}: Props) => {\n  const [filter, setFilter] = useState(\"\");\n  const [isSearching, setIsSearching] = useState(false);\n\n  const DEFAULT_RENDER_THRESHOLD = 10;\n\n  const searchInputRef = useRef<HTMLInputElement>(null);\n\n  const threshold = search?.renderThreshold ?? DEFAULT_RENDER_THRESHOLD;\n  const hasEnoughChildren = optionsCount >= threshold;\n\n  const filterResults = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setFilter(event.currentTarget.value);\n  };\n\n  const shouldRenderSearch = () => {\n    if (search?.enabled) {\n      return hasEnoughChildren;\n    }\n\n    if (search) {\n      return search.enabled as boolean;\n    }\n\n    return optionsCount > DEFAULT_RENDER_THRESHOLD;\n  };\n\n  const renderSearch = () => (\n    <Input\n      {...(search?.searchInputProps ?? searchInputProps ?? {})}\n      ref={searchInputRef}\n      onFocus={() => setIsSearching(true)}\n      onBlur={() => setIsSearching(false)}\n      onChange={filterResults}\n      className={searchInputClassName}\n      wrapperProps={{\n        className:\n          search?.searchInputProps?.wrapperProps?.className ??\n          searchInputProps?.wrapperProps?.className\n      }}\n      style={{\n        display: expanded ? \"block\" : \"none\"\n      }}\n      type=\"text\"\n      name=\"search-option\"\n      placeholder={search?.searchPlaceholder ?? searchPlaceholder}\n    />\n  );\n\n  const resetSearchState = () => {\n    setFilter(\"\");\n    setIsSearching(false);\n    setFocusedSelectItem(-1);\n  };\n\n  const visible = shouldRenderSearch();\n\n  useEffect(() => {\n    (search?.searchInputProps?.reset || searchInputProps?.reset) && resetSearchState();\n  }, [searchInputProps?.reset, search?.searchInputProps?.reset]);\n\n  useEffect(() => {\n    const searchDeactivated =\n      !visible &&\n      !isSearching; /*solves issue in MultiSelect when we filtered result and selected result causes list to be shorter than threshold so still we have a filter applied but can't change it due to `visible` variable has false  */\n    if (searchDeactivated) {\n      resetSearchState();\n    }\n  }, [isSearching, visible]);\n\n  return {\n    renderSearch,\n    setIsSearching,\n    searchVisible: visible,\n    searchThreshold: threshold,\n    searchInputRef,\n    filter,\n    isSearching\n  };\n};\n"],"names":["useSearch","search","optionsCount","searchPlaceholder","searchInputProps","searchInputClassName","expanded","setFocusedSelectItem","filter","setFilter","useState","isSearching","setIsSearching","DEFAULT_RENDER_THRESHOLD","searchInputRef","useRef","threshold","_a","renderThreshold","hasEnoughChildren","filterResults","event","currentTarget","value","shouldRenderSearch","enabled","renderSearch","React","createElement","Input","_b","ref","onFocus","onBlur","onChange","className","wrapperProps","_e","_d","_c","_f","style","display","type","name","placeholder","_g","resetSearchState","visible","useEffect","reset","searchDeactivated","searchVisible","searchThreshold"],"mappings":"iOAqCaA,EAAY,EACvBC,SACAC,eACAC,oBACAC,mBACAC,uBACAC,WACAC,mCAEA,MAAOC,EAAQC,GAAaC,EAAQA,SAAC,IACrC,MAAOC,EAAaC,GAAkBF,EAAQA,SAAC,OAE/C,MAAMG,EAA2B,GAEjC,MAAMC,EAAiBC,SAAyB,MAEhD,MAAMC,GAAYC,EAAAhB,IAAA,MAAAA,SAAA,OAAA,EAAAA,EAAQiB,mBAAmB,MAAAD,SAAA,EAAAA,EAAAJ,EAC7C,MAAMM,EAAoBjB,GAAgBc,EAE1C,MAAMI,EAAiBC,IACrBZ,EAAUY,EAAMC,cAAcC,MAAM,EAGtC,MAAMC,EAAqB,KACzB,GAAIvB,UAAAA,SAAM,OAAA,EAANA,EAAQwB,QACV,OAAON,EAGT,GAAIlB,EACF,OAAOA,EAAOwB,QAGhB,OAAOvB,EAAeW,CAAwB,EAGhD,MAAMa,EAAe,uBAAM,OACzBC,EAAC,WAAAC,cAAAC,QACK,QAACZ,EAAAhB,IAAA,MAAAA,SAAA,OAAA,EAAAA,EAAQG,oBAAgB,MAAAa,SAAA,EAAAA,EAAIb,KAAgB,MAAA0B,SAAA,EAAAA,EAAI,CAAA,EACrDC,IAAKjB,EACLkB,QAAS,IAAMpB,EAAe,MAC9BqB,OAAQ,IAAMrB,EAAe,OAC7BsB,SAAUd,EACVe,UAAW9B,EACX+B,aAAc,CACZD,WACEE,GAAAC,GAAAC,EAAAtC,UAAAA,SAAM,OAAA,EAANA,EAAQG,oBAAgB,MAAAmC,SAAA,OAAA,EAAAA,EAAEH,gBAAc,MAAAE,SAAA,OAAA,EAAAA,EAAAH,aACxC,MAAAE,SAAA,EAAAA,GAAAG,EAAApC,IAAgB,MAAhBA,SAAgB,OAAA,EAAhBA,EAAkBgC,gBAAY,MAAAI,SAAA,OAAA,EAAAA,EAAEL,WAEpCM,MAAO,CACLC,QAASpC,EAAW,QAAU,QAEhCqC,KAAK,OACLC,KAAK,gBACLC,aAAaC,EAAA7C,IAAA,MAAAA,kBAAAA,EAAQE,qBAAqB,MAAA2C,SAAA,EAAAA,EAAA3C,GAE7C,EAED,MAAM4C,EAAmB,KACvBtC,EAAU,IACVG,EAAe,OACfL,GAAsB,EAAE,EAG1B,MAAMyC,EAAUxB,IAEhByB,EAAAA,WAAU,cACPhC,EAAAhB,IAAA,MAAAA,kBAAAA,EAAQG,oBAAgB,MAAAa,SAAA,OAAA,EAAAA,EAAEiC,SAAS9C,IAAA,MAAAA,SAAA,OAAA,EAAAA,EAAkB8C,SAAUH,GAAkB,GACjF,CAAC3C,IAAgB,MAAhBA,SAAA,OAAA,EAAAA,EAAkB8C,OAAOpB,EAAA7B,IAAA,MAAAA,kBAAAA,EAAQG,oBAAkB,MAAA0B,SAAA,OAAA,EAAAA,EAAAoB,QAEvDD,EAAAA,WAAU,KACR,MAAME,GACHH,IACArC,EACH,GAAIwC,EACFJ,GACD,GACA,CAACpC,EAAaqC,IAEjB,MAAO,CACLtB,eACAd,iBACAwC,cAAeJ,EACfK,gBAAiBrC,EACjBF,iBACAN,SACAG,cACD"}
+{"version":3,"file":"useSearch.cjs.js","sources":["../../../../../../../src/components/Form/Select/SingleSelect/useSearch.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, { useEffect, useRef, useState } from \"react\";\nimport { SearchProps } from \"../Select.interfaces\";\nimport { Input } from \"../../Input/Input\";\n\ninterface Props {\n  search?: SearchProps;\n  optionsCount: number;\n  searchInputClassName: string;\n  expanded: boolean;\n  setFocusedSelectItem: (idx: number) => void;\n}\n\n/** @scope .*/\nexport const useSearch = ({\n  search,\n  optionsCount,\n  searchInputClassName,\n  expanded,\n  setFocusedSelectItem\n}: Props) => {\n  const [filter, setFilter] = useState(\"\");\n  const [isSearching, setIsSearching] = useState(false);\n\n  const DEFAULT_RENDER_THRESHOLD = 10;\n\n  const searchInputRef = useRef<HTMLInputElement>(null);\n\n  const threshold = search?.renderThreshold ?? DEFAULT_RENDER_THRESHOLD;\n  const hasEnoughChildren = optionsCount >= threshold;\n\n  const filterResults = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setFilter(event.currentTarget.value);\n  };\n\n  const shouldRenderSearch = () => {\n    if (search?.enabled) {\n      return hasEnoughChildren;\n    }\n\n    if (search) {\n      return search.enabled as boolean;\n    }\n\n    return optionsCount > DEFAULT_RENDER_THRESHOLD;\n  };\n\n  const renderSearch = () => (\n    <Input\n      {...(search?.searchInputProps ?? {})}\n      ref={searchInputRef}\n      onFocus={() => setIsSearching(true)}\n      onBlur={() => setIsSearching(false)}\n      onChange={filterResults}\n      className={searchInputClassName}\n      wrapperProps={{\n        className: search?.searchInputProps?.wrapperProps?.className\n      }}\n      style={{\n        display: expanded ? \"block\" : \"none\"\n      }}\n      type=\"text\"\n      name=\"search-option\"\n      placeholder={search?.searchPlaceholder ? search?.searchPlaceholder : \"Search item\"}\n    />\n  );\n\n  const resetSearchState = () => {\n    setFilter(\"\");\n    setIsSearching(false);\n    setFocusedSelectItem(-1);\n  };\n\n  const visible = shouldRenderSearch();\n\n  useEffect(() => {\n    search?.searchInputProps?.reset && resetSearchState();\n  }, [search?.searchInputProps?.reset]);\n\n  useEffect(() => {\n    const searchDeactivated =\n      !visible &&\n      !isSearching; /*solves issue in MultiSelect when we filtered result and selected result causes list to be shorter than threshold so still we have a filter applied but can't change it due to `visible` variable has false  */\n    if (searchDeactivated) {\n      resetSearchState();\n    }\n  }, [isSearching, visible]);\n\n  return {\n    renderSearch,\n    setIsSearching,\n    searchVisible: visible,\n    searchThreshold: threshold,\n    searchInputRef,\n    filter,\n    isSearching\n  };\n};\n"],"names":["useSearch","search","optionsCount","searchInputClassName","expanded","setFocusedSelectItem","filter","setFilter","useState","isSearching","setIsSearching","DEFAULT_RENDER_THRESHOLD","searchInputRef","useRef","threshold","_a","renderThreshold","hasEnoughChildren","filterResults","event","currentTarget","value","shouldRenderSearch","enabled","renderSearch","React","Input","searchInputProps","ref","onFocus","onBlur","onChange","className","wrapperProps","_c","_b","style","display","type","name","placeholder","searchPlaceholder","resetSearchState","visible","useEffect","reset","searchDeactivated","searchVisible","searchThreshold"],"mappings":"2NA6Ba,MAAAA,EAAY,EACvBC,SACAC,eACAC,uBACAC,WACAC,mCAEA,MAAOC,EAAQC,GAAaC,EAAQA,SAAC,IACrC,MAAOC,EAAaC,GAAkBF,EAAQA,SAAC,OAE/C,MAAMG,EAA2B,GAEjC,MAAMC,EAAiBC,SAAyB,MAEhD,MAAMC,GAAYC,EAAAd,IAAA,MAAAA,SAAA,OAAA,EAAAA,EAAQe,mBAAmB,MAAAD,SAAA,EAAAA,EAAAJ,EAC7C,MAAMM,EAAoBf,GAAgBY,EAE1C,MAAMI,EAAiBC,IACrBZ,EAAUY,EAAMC,cAAcC,MAAM,EAGtC,MAAMC,EAAqB,KACzB,GAAIrB,UAAAA,SAAM,OAAA,EAANA,EAAQsB,QACV,OAAON,EAGT,GAAIhB,EACF,OAAOA,EAAOsB,QAGhB,OAAOrB,EAAeS,CAAwB,EAGhD,MAAMa,EAAe,eAAM,OACzBC,EAAAA,yBAACC,EAAKA,MAAA,KACCX,EAAAd,IAAA,MAAAA,SAAA,OAAA,EAAAA,EAAQ0B,oBAAgB,MAAAZ,SAAA,EAAAA,EAAI,CAAA,EACjCa,IAAKhB,EACLiB,QAAS,IAAMnB,EAAe,MAC9BoB,OAAQ,IAAMpB,EAAe,OAC7BqB,SAAUb,EACVc,UAAW7B,EACX8B,aAAc,CACZD,WAAWE,GAAAC,EAAAlC,IAAA,MAAAA,SAAA,OAAA,EAAAA,EAAQ0B,oBAAkB,MAAAQ,SAAA,OAAA,EAAAA,EAAAF,0CAAcD,WAErDI,MAAO,CACLC,QAASjC,EAAW,QAAU,QAEhCkC,KAAK,OACLC,KAAK,gBACLC,aAAavC,IAAA,MAAAA,kBAAAA,EAAQwC,mBAAoBxC,IAAM,MAANA,SAAA,OAAA,EAAAA,EAAQwC,kBAAoB,eAExE,EAED,MAAMC,EAAmB,KACvBnC,EAAU,IACVG,EAAe,OACfL,GAAsB,EAAE,EAG1B,MAAMsC,EAAUrB,IAEhBsB,EAAAA,WAAU,aACR7B,EAAAd,IAAA,MAAAA,SAAA,OAAA,EAAAA,EAAQ0B,oBAAkB,MAAAZ,SAAA,OAAA,EAAAA,EAAA8B,QAASH,GAAkB,GACpD,EAACP,EAAAlC,UAAAA,SAAM,OAAA,EAANA,EAAQ0B,oBAAgB,MAAAQ,SAAA,OAAA,EAAAA,EAAEU,QAE9BD,EAAAA,WAAU,KACR,MAAME,GACHH,IACAlC,EACH,GAAIqC,EACFJ,GACD,GACA,CAACjC,EAAakC,IAEjB,MAAO,CACLnB,eACAd,iBACAqC,cAAeJ,EACfK,gBAAiBlC,EACjBF,iBACAN,SACAG,cACD"}

package/dist/cjs/Icon/Icon.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:true});var e=require("react");var l=require("./Icon.module.cjs.js");function r(e){return e&&typeof e==="object"&&"default"in e?e:{default:e}}var i=r(e);exports.Icons=void 0;(function(e){e["Bell"]="bell";e["BellAlt"]="bell-alt";e["Bookmark"]="bookmark";e["BookmarkAlt"]="bookmark-alt";e["Build"]="build";e["Calendar"]="calendar";e["Change"]="change";e["Checkmark"]="checkmark";e["CheckmarkCircle"]="checkmark-circle";e["CheckmarkCircleAlt"]="checkmark-circle-alt";e["CheckmarkCircleBreakout"]="checkmark-circle-breakout";e["CheckmarkSquare"]="checkmark-square";e["ChevronUp"]="chevron-up";e["ChevronDown"]="chevron-down";e["ChevronLeft"]="chevron-left";e["ChevronRight"]="chevron-right";e["Circle"]="circle";e["Clock"]="clock";e["Copy"]="copy";e["Edit"]="edit";e["Ellipsis"]="ellipsis";e["EllipsisAlt"]="ellipsis-alt";e["Equal"]="equal";e["Error"]="error-circle";e["ErrorAlt"]="error-circle-alt";e["Eye"]="eye";e["EyeBlocked"]="eye-blocked";e["Filter"]="filter";e["FilterAlt"]="filter-alt";e["FilterAltArrow"]="filter-alt-arrow";e["FilterAltTimes"]="filter-alt-times";e["Forbidden"]="forbidden";e["Fullscreen"]="fullscreen";e["FullscreenExit"]="fullscreen-exit";e["Gearwheel"]="gearwheel";e["Grid"]="grid";e["Hamburger"]="hamburger";e["HomeFilled"]="home-filled";e["Heart"]="heart";e["Image"]="image";e["InfoBell"]="info-bell";e["InfoCircle"]="info-circle";e["Link"]="link";e["MinusSquare"]="minus-square";e["NavigationFirst"]="navigation-first";e["NavigationLast"]="navigation-last";e["Plus"]="plus";e["Radio"]="radio";e["Refresh"]="refresh";e["Search"]="search";e["Share"]="share";e["Square"]="square";e["Star"]="star";e["StarAlt"]="star-alt";e["TableSearch"]="table-search";e["Times"]="times";e["TimesCircle"]="times-circle";e["TimesCircleAlt"]="times-circle-alt";e["TimesThin"]="times-thin";e["Trash"]="trash";e["TriangleDown"]="triangle-down";e["TriangleDownCircle"]="triangle-down-circle";e["TriangleLeft"]="triangle-left";e["TriangleRight"]="triangle-right";e["TriangleUp"]="triangle-up";e["Undo"]="undo";e["Warning"]="warning";e["WarningFilled"]="warning-filled";e["FileOutline"]="file-outline";e["FileUpload"]="file-upload-outline";e["FileDownload"]="file-download-outline";e["UploadOutline"]="upload-outline";e["ReplyOutline"]="reply-outline";e["SaveOutline"]="save-outline";e["DownloadFile"]="download-file-outline";e["RetryFile"]="retry";e["AbortFile"]="cancel";e["FileAltIcon"]="file-alt"})(exports.Icons||(exports.Icons={}));const a=({icon:e,color:r,className:a,style:t,size:o,tag:n="span",...c},s)=>{const u=n;return i["default"].createElement(u,{...c,ref:s,style:{color:r,...t,fontSize:o},"data-icon":true,"aria-hidden":"true",className:`${l["default"]["icon"]} ${l["default"]["icon-"+e]} ${a?a:""}`})};const t=i["default"].forwardRef(a);exports.Icon=t;
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});var e=require("react");var l=require("./Icon.module.cjs.js");function r(e){return e&&typeof e==="object"&&"default"in e?e:{default:e}}var i=r(e);exports.Icons=void 0;(function(e){e["Bell"]="bell";e["BellAlt"]="bell-alt";e["Bookmark"]="bookmark";e["BookmarkAlt"]="bookmark-alt";e["Build"]="build";e["Calendar"]="calendar";e["Change"]="change";e["Checkmark"]="checkmark";e["CheckmarkCircle"]="checkmark-circle";e["CheckmarkCircleAlt"]="checkmark-circle-alt";e["CheckmarkCircleBreakout"]="checkmark-circle-breakout";e["CheckmarkSquare"]="checkmark-square";e["ChevronUp"]="chevron-up";e["ChevronDown"]="chevron-down";e["ChevronLeft"]="chevron-left";e["ChevronRight"]="chevron-right";e["Circle"]="circle";e["Clock"]="clock";e["Copy"]="copy";e["Edit"]="edit";e["Ellipsis"]="ellipsis";e["EllipsisAlt"]="ellipsis-alt";e["Equal"]="equal";e["Error"]="error-circle";e["ErrorAlt"]="error-circle-alt";e["Eye"]="eye";e["EyeBlocked"]="eye-blocked";e["Filter"]="filter";e["FilterAlt"]="filter-alt";e["FilterAltArrow"]="filter-alt-arrow";e["FilterAltTimes"]="filter-alt-times";e["Forbidden"]="forbidden";e["Fullscreen"]="fullscreen";e["FullscreenExit"]="fullscreen-exit";e["Gearwheel"]="gearwheel";e["Grid"]="grid";e["Hamburger"]="hamburger";e["HomeFilled"]="home-filled";e["Heart"]="heart";e["Image"]="image";e["InfoBell"]="info-bell";e["InfoCircle"]="info-circle";e["Link"]="link";e["MinusSquare"]="minus-square";e["NavigationFirst"]="navigation-first";e["NavigationLast"]="navigation-last";e["Plus"]="plus";e["Radio"]="radio";e["Refresh"]="refresh";e["Search"]="search";e["Share"]="share";e["Square"]="square";e["Star"]="star";e["StarAlt"]="star-alt";e["TableSearch"]="table-search";e["Times"]="times";e["TimesCircle"]="times-circle";e["TimesCircleAlt"]="times-circle-alt";e["TimesThin"]="times-thin";e["Trash"]="trash";e["TriangleDown"]="triangle-down";e["TriangleDownCircle"]="triangle-down-circle";e["TriangleLeft"]="triangle-left";e["TriangleRight"]="triangle-right";e["TriangleUp"]="triangle-up";e["Undo"]="undo";e["Warning"]="warning";e["WarningFilled"]="warning-filled";e["FileOutline"]="file-outline";e["FileUpload"]="file-upload-outline";e["FileDownload"]="file-download-outline";e["UploadOutline"]="upload-outline";e["ReplyOutline"]="reply-outline";e["SaveOutline"]="save-outline";e["DownloadFile"]="download-file-outline";e["RetryFile"]="retry";e["AbortFile"]="cancel";e["FileAltIcon"]="file-alt";e["AddCircle"]="add-circle"})(exports.Icons||(exports.Icons={}));const a=({icon:e,color:r,className:a,style:t,size:o,tag:n="span",...c},s)=>{const u=n;return i["default"].createElement(u,{...c,ref:s,style:{color:r,...t,fontSize:o},"data-icon":true,"aria-hidden":"true",className:`${l["default"]["icon"]} ${l["default"]["icon-"+e]} ${a?a:""}`})};const t=i["default"].forwardRef(a);exports.Icon=t;
 //# sourceMappingURL=Icon.cjs.js.map

package/dist/cjs/Icon/Icon.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.cjs.js","sources":["../../../../../src/components/Icon/Icon.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, { ForwardRefRenderFunction, ComponentPropsWithRef } from \"react\";\nimport classes from \"./Icon.module.scss\";\n\nexport enum Icons {\n  Bell = \"bell\",\n  BellAlt = \"bell-alt\",\n  Bookmark = \"bookmark\",\n  BookmarkAlt = \"bookmark-alt\",\n  Build = \"build\",\n  Calendar = \"calendar\",\n  Change = \"change\",\n  Checkmark = \"checkmark\",\n  CheckmarkCircle = \"checkmark-circle\",\n  CheckmarkCircleAlt = \"checkmark-circle-alt\",\n  CheckmarkCircleBreakout = \"checkmark-circle-breakout\",\n  CheckmarkSquare = \"checkmark-square\",\n  ChevronUp = \"chevron-up\",\n  ChevronDown = \"chevron-down\",\n  ChevronLeft = \"chevron-left\",\n  ChevronRight = \"chevron-right\",\n  Circle = \"circle\",\n  Clock = \"clock\",\n  Copy = \"copy\",\n  Edit = \"edit\",\n  Ellipsis = \"ellipsis\",\n  EllipsisAlt = \"ellipsis-alt\",\n  Equal = \"equal\",\n  Error = \"error-circle\",\n  ErrorAlt = \"error-circle-alt\",\n  Eye = \"eye\",\n  EyeBlocked = \"eye-blocked\",\n  Filter = \"filter\",\n  FilterAlt = \"filter-alt\",\n  FilterAltArrow = \"filter-alt-arrow\",\n  FilterAltTimes = \"filter-alt-times\",\n  Forbidden = \"forbidden\",\n  Fullscreen = \"fullscreen\",\n  FullscreenExit = \"fullscreen-exit\",\n  Gearwheel = \"gearwheel\",\n  Grid = \"grid\",\n  Hamburger = \"hamburger\",\n  HomeFilled = \"home-filled\",\n  Heart = \"heart\",\n  Image = \"image\",\n  InfoBell = \"info-bell\",\n  InfoCircle = \"info-circle\",\n  Link = \"link\",\n  MinusSquare = \"minus-square\",\n  NavigationFirst = \"navigation-first\",\n  NavigationLast = \"navigation-last\",\n  Plus = \"plus\",\n  Radio = \"radio\",\n  Refresh = \"refresh\",\n  Search = \"search\",\n  Share = \"share\",\n  Square = \"square\",\n  Star = \"star\",\n  StarAlt = \"star-alt\",\n  TableSearch = \"table-search\",\n  Times = \"times\",\n  TimesCircle = \"times-circle\",\n  TimesCircleAlt = \"times-circle-alt\",\n  TimesThin = \"times-thin\",\n  Trash = \"trash\",\n  TriangleDown = \"triangle-down\",\n  TriangleDownCircle = \"triangle-down-circle\",\n  TriangleLeft = \"triangle-left\",\n  TriangleRight = \"triangle-right\",\n  TriangleUp = \"triangle-up\",\n  Undo = \"undo\",\n  Warning = \"warning\",\n  WarningFilled = \"warning-filled\",\n  FileOutline = \"file-outline\",\n  FileUpload = \"file-upload-outline\",\n  FileDownload = \"file-download-outline\",\n  UploadOutline = \"upload-outline\",\n  ReplyOutline = \"reply-outline\",\n  SaveOutline = \"save-outline\",\n  DownloadFile = \"download-file-outline\",\n  RetryFile = \"retry\",\n  AbortFile = \"cancel\",\n  FileAltIcon = \"file-alt\"\n}\n\ntype Tag = \"span\" | \"div\" | \"i\";\n\nexport interface Props extends ComponentPropsWithRef<\"div\"> {\n  icon: Icons;\n  color?: string;\n  size?: string;\n  tag?: Tag;\n}\n\nconst IconComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (\n  { icon, color, className, style, size, tag = \"span\", ...rest }: Props,\n  ref\n) => {\n  const Component = tag;\n\n  return (\n    <Component\n      {...rest}\n      ref={ref}\n      style={{ color: color, ...style, fontSize: size }}\n      data-icon\n      aria-hidden=\"true\"\n      className={`${classes[\"icon\"]} ${classes[\"icon-\" + icon]} ${className ? className : \"\"}`}\n    />\n  );\n};\n\nexport const Icon = React.forwardRef(IconComponent);\n"],"names":["Icons","IconComponent","icon","color","className","style","size","tag","rest","ref","Component","React","createElement","fontSize","classes","Icon","forwardRef"],"mappings":"uNAmBYA,QA+EXA,WAAA,GA/ED,SAAYA,GACVA,EAAA,QAAA,OACAA,EAAA,WAAA,WACAA,EAAA,YAAA,WACAA,EAAA,eAAA,eACAA,EAAA,SAAA,QACAA,EAAA,YAAA,WACAA,EAAA,UAAA,SACAA,EAAA,aAAA,YACAA,EAAA,mBAAA,mBACAA,EAAA,sBAAA,uBACAA,EAAA,2BAAA,4BACAA,EAAA,mBAAA,mBACAA,EAAA,aAAA,aACAA,EAAA,eAAA,eACAA,EAAA,eAAA,eACAA,EAAA,gBAAA,gBACAA,EAAA,UAAA,SACAA,EAAA,SAAA,QACAA,EAAA,QAAA,OACAA,EAAA,QAAA,OACAA,EAAA,YAAA,WACAA,EAAA,eAAA,eACAA,EAAA,SAAA,QACAA,EAAA,SAAA,eACAA,EAAA,YAAA,mBACAA,EAAA,OAAA,MACAA,EAAA,cAAA,cACAA,EAAA,UAAA,SACAA,EAAA,aAAA,aACAA,EAAA,kBAAA,mBACAA,EAAA,kBAAA,mBACAA,EAAA,aAAA,YACAA,EAAA,cAAA,aACAA,EAAA,kBAAA,kBACAA,EAAA,aAAA,YACAA,EAAA,QAAA,OACAA,EAAA,aAAA,YACAA,EAAA,cAAA,cACAA,EAAA,SAAA,QACAA,EAAA,SAAA,QACAA,EAAA,YAAA,YACAA,EAAA,cAAA,cACAA,EAAA,QAAA,OACAA,EAAA,eAAA,eACAA,EAAA,mBAAA,mBACAA,EAAA,kBAAA,kBACAA,EAAA,QAAA,OACAA,EAAA,SAAA,QACAA,EAAA,WAAA,UACAA,EAAA,UAAA,SACAA,EAAA,SAAA,QACAA,EAAA,UAAA,SACAA,EAAA,QAAA,OACAA,EAAA,WAAA,WACAA,EAAA,eAAA,eACAA,EAAA,SAAA,QACAA,EAAA,eAAA,eACAA,EAAA,kBAAA,mBACAA,EAAA,aAAA,aACAA,EAAA,SAAA,QACAA,EAAA,gBAAA,gBACAA,EAAA,sBAAA,uBACAA,EAAA,gBAAA,gBACAA,EAAA,iBAAA,iBACAA,EAAA,cAAA,cACAA,EAAA,QAAA,OACAA,EAAA,WAAA,UACAA,EAAA,iBAAA,iBACAA,EAAA,eAAA,eACAA,EAAA,cAAA,sBACAA,EAAA,gBAAA,wBACAA,EAAA,iBAAA,iBACAA,EAAA,gBAAA,gBACAA,EAAA,eAAA,eACAA,EAAA,gBAAA,wBACAA,EAAA,aAAA,QACAA,EAAA,aAAA,SACAA,EAAA,eAAA,UACD,EA/ED,CAAYA,gBAAAA,QAAAA,MA+EX,CAAA,IAWD,MAAMC,EAAiE,EACnEC,OAAMC,QAAOC,YAAWC,QAAOC,OAAMC,MAAM,UAAWC,GACxDC,KAEA,MAAMC,EAAYH,EAElB,OACEI,EAAAA,WAACC,cAAAF,EACK,IAAAF,EACJC,IAAKA,EACLJ,MAAO,CAAEF,MAAOA,KAAUE,EAAOQ,SAAUP,GAAM,YAAA,KAAA,cAErC,OACZF,UAAW,GAAGU,EAAO,WAAC,WAAWA,EAAO,WAAC,QAAUZ,MAASE,EAAYA,EAAY,MAEtF,EAGS,MAAAW,EAAOJ,EAAAA,WAAMK,WAAWf"}
+{"version":3,"file":"Icon.cjs.js","sources":["../../../../../src/components/Icon/Icon.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, { ForwardRefRenderFunction, ComponentPropsWithRef } from \"react\";\nimport classes from \"./Icon.module.scss\";\n\nexport enum Icons {\n  Bell = \"bell\",\n  BellAlt = \"bell-alt\",\n  Bookmark = \"bookmark\",\n  BookmarkAlt = \"bookmark-alt\",\n  Build = \"build\",\n  Calendar = \"calendar\",\n  Change = \"change\",\n  Checkmark = \"checkmark\",\n  CheckmarkCircle = \"checkmark-circle\",\n  CheckmarkCircleAlt = \"checkmark-circle-alt\",\n  CheckmarkCircleBreakout = \"checkmark-circle-breakout\",\n  CheckmarkSquare = \"checkmark-square\",\n  ChevronUp = \"chevron-up\",\n  ChevronDown = \"chevron-down\",\n  ChevronLeft = \"chevron-left\",\n  ChevronRight = \"chevron-right\",\n  Circle = \"circle\",\n  Clock = \"clock\",\n  Copy = \"copy\",\n  Edit = \"edit\",\n  Ellipsis = \"ellipsis\",\n  EllipsisAlt = \"ellipsis-alt\",\n  Equal = \"equal\",\n  Error = \"error-circle\",\n  ErrorAlt = \"error-circle-alt\",\n  Eye = \"eye\",\n  EyeBlocked = \"eye-blocked\",\n  Filter = \"filter\",\n  FilterAlt = \"filter-alt\",\n  FilterAltArrow = \"filter-alt-arrow\",\n  FilterAltTimes = \"filter-alt-times\",\n  Forbidden = \"forbidden\",\n  Fullscreen = \"fullscreen\",\n  FullscreenExit = \"fullscreen-exit\",\n  Gearwheel = \"gearwheel\",\n  Grid = \"grid\",\n  Hamburger = \"hamburger\",\n  HomeFilled = \"home-filled\",\n  Heart = \"heart\",\n  Image = \"image\",\n  InfoBell = \"info-bell\",\n  InfoCircle = \"info-circle\",\n  Link = \"link\",\n  MinusSquare = \"minus-square\",\n  NavigationFirst = \"navigation-first\",\n  NavigationLast = \"navigation-last\",\n  Plus = \"plus\",\n  Radio = \"radio\",\n  Refresh = \"refresh\",\n  Search = \"search\",\n  Share = \"share\",\n  Square = \"square\",\n  Star = \"star\",\n  StarAlt = \"star-alt\",\n  TableSearch = \"table-search\",\n  Times = \"times\",\n  TimesCircle = \"times-circle\",\n  TimesCircleAlt = \"times-circle-alt\",\n  TimesThin = \"times-thin\",\n  Trash = \"trash\",\n  TriangleDown = \"triangle-down\",\n  TriangleDownCircle = \"triangle-down-circle\",\n  TriangleLeft = \"triangle-left\",\n  TriangleRight = \"triangle-right\",\n  TriangleUp = \"triangle-up\",\n  Undo = \"undo\",\n  Warning = \"warning\",\n  WarningFilled = \"warning-filled\",\n  FileOutline = \"file-outline\",\n  FileUpload = \"file-upload-outline\",\n  FileDownload = \"file-download-outline\",\n  UploadOutline = \"upload-outline\",\n  ReplyOutline = \"reply-outline\",\n  SaveOutline = \"save-outline\",\n  DownloadFile = \"download-file-outline\",\n  RetryFile = \"retry\",\n  AbortFile = \"cancel\",\n  FileAltIcon = \"file-alt\",\n  AddCircle = \"add-circle\"\n}\n\ntype Tag = \"span\" | \"div\" | \"i\";\n\nexport interface Props extends ComponentPropsWithRef<\"div\"> {\n  icon: Icons;\n  color?: string;\n  size?: string;\n  tag?: Tag;\n}\n\nconst IconComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (\n  { icon, color, className, style, size, tag = \"span\", ...rest }: Props,\n  ref\n) => {\n  const Component = tag;\n\n  return (\n    <Component\n      {...rest}\n      ref={ref}\n      style={{ color: color, ...style, fontSize: size }}\n      data-icon\n      aria-hidden=\"true\"\n      className={`${classes[\"icon\"]} ${classes[\"icon-\" + icon]} ${className ? className : \"\"}`}\n    />\n  );\n};\n\nexport const Icon = React.forwardRef(IconComponent);\n"],"names":["Icons","IconComponent","icon","color","className","style","size","tag","rest","ref","Component","React","createElement","fontSize","classes","Icon","forwardRef"],"mappings":"uNAmBYA,QAgFXA,WAAA,GAhFD,SAAYA,GACVA,EAAA,QAAA,OACAA,EAAA,WAAA,WACAA,EAAA,YAAA,WACAA,EAAA,eAAA,eACAA,EAAA,SAAA,QACAA,EAAA,YAAA,WACAA,EAAA,UAAA,SACAA,EAAA,aAAA,YACAA,EAAA,mBAAA,mBACAA,EAAA,sBAAA,uBACAA,EAAA,2BAAA,4BACAA,EAAA,mBAAA,mBACAA,EAAA,aAAA,aACAA,EAAA,eAAA,eACAA,EAAA,eAAA,eACAA,EAAA,gBAAA,gBACAA,EAAA,UAAA,SACAA,EAAA,SAAA,QACAA,EAAA,QAAA,OACAA,EAAA,QAAA,OACAA,EAAA,YAAA,WACAA,EAAA,eAAA,eACAA,EAAA,SAAA,QACAA,EAAA,SAAA,eACAA,EAAA,YAAA,mBACAA,EAAA,OAAA,MACAA,EAAA,cAAA,cACAA,EAAA,UAAA,SACAA,EAAA,aAAA,aACAA,EAAA,kBAAA,mBACAA,EAAA,kBAAA,mBACAA,EAAA,aAAA,YACAA,EAAA,cAAA,aACAA,EAAA,kBAAA,kBACAA,EAAA,aAAA,YACAA,EAAA,QAAA,OACAA,EAAA,aAAA,YACAA,EAAA,cAAA,cACAA,EAAA,SAAA,QACAA,EAAA,SAAA,QACAA,EAAA,YAAA,YACAA,EAAA,cAAA,cACAA,EAAA,QAAA,OACAA,EAAA,eAAA,eACAA,EAAA,mBAAA,mBACAA,EAAA,kBAAA,kBACAA,EAAA,QAAA,OACAA,EAAA,SAAA,QACAA,EAAA,WAAA,UACAA,EAAA,UAAA,SACAA,EAAA,SAAA,QACAA,EAAA,UAAA,SACAA,EAAA,QAAA,OACAA,EAAA,WAAA,WACAA,EAAA,eAAA,eACAA,EAAA,SAAA,QACAA,EAAA,eAAA,eACAA,EAAA,kBAAA,mBACAA,EAAA,aAAA,aACAA,EAAA,SAAA,QACAA,EAAA,gBAAA,gBACAA,EAAA,sBAAA,uBACAA,EAAA,gBAAA,gBACAA,EAAA,iBAAA,iBACAA,EAAA,cAAA,cACAA,EAAA,QAAA,OACAA,EAAA,WAAA,UACAA,EAAA,iBAAA,iBACAA,EAAA,eAAA,eACAA,EAAA,cAAA,sBACAA,EAAA,gBAAA,wBACAA,EAAA,iBAAA,iBACAA,EAAA,gBAAA,gBACAA,EAAA,eAAA,eACAA,EAAA,gBAAA,wBACAA,EAAA,aAAA,QACAA,EAAA,aAAA,SACAA,EAAA,eAAA,WACAA,EAAA,aAAA,YACD,EAhFD,CAAYA,gBAAAA,QAAAA,MAgFX,CAAA,IAWD,MAAMC,EAAiE,EACnEC,OAAMC,QAAOC,YAAWC,QAAOC,OAAMC,MAAM,UAAWC,GACxDC,KAEA,MAAMC,EAAYH,EAElB,OACEI,EAAAA,WAACC,cAAAF,EACK,IAAAF,EACJC,IAAKA,EACLJ,MAAO,CAAEF,MAAOA,KAAUE,EAAOQ,SAAUP,GAAM,YAAA,KAAA,cAErC,OACZF,UAAW,GAAGU,EAAO,WAAC,WAAWA,EAAO,WAAC,QAAUZ,MAASE,EAAYA,EAAY,MAEtF,EAGS,MAAAW,EAAOJ,EAAAA,WAAMK,WAAWf"}