se-design 1.0.3 → 1.0.8-5.dev.1

package/dist/index36.js.map

@@ -1 +1 @@
-{"version":3,"file":"index36.js","sources":["../src/components/DropdownWithInputTags/index.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef, forwardRef, ForwardedRef, useImperativeHandle, KeyboardEvent } from 'react';\nimport { Popover, PopoverHandle } from '../Popover';\nimport { Icon } from '../Icon';\nimport { Checkbox } from '../Checkbox';\nimport { Button } from '../Button';\nimport './styles.scss';\n\nexport interface DropdownOption {\n  id: string | number;\n  label: string;\n  value: string;\n  [key: string]: any; // Allow additional properties\n}\n\nexport interface DropdownWithInputTagsHandle {\n  toggleDropdown: () => void;\n}\n\nexport interface DropdownWithInputTagsProps {\n  value: string[];\n  onChange?: (tags: string[]) => void;\n  placeholder?: string;\n  className?: string;\n  options?: DropdownOption[];\n  renderOption?: (option: DropdownOption, onSelect: (option: DropdownOption) => void) => React.ReactNode;\n  onSearch?: (searchTerm: string) => void;\n  label?: string;\n  automationId?: string;\n  noOptionsMessage?: string;\n  allowCustomTags?: boolean;\n  disabled?: boolean;\n  type?: 'select' | 'multi-select' |'multi-select-without-cta';\n  showInput?: boolean;\n}\n\nexport const DropdownWithInputTags = forwardRef<DropdownWithInputTagsHandle, DropdownWithInputTagsProps>(\n  (\n    {\n      value = [],\n      onChange,\n      placeholder = \"Type to search or add custom tags...\",\n      className = '',\n      options = [],\n      renderOption,\n      onSearch,\n      label,\n      automationId = '',\n      noOptionsMessage = \"No options found\",\n      allowCustomTags = true,\n      disabled = false,\n      type = 'select',\n      showInput = true\n    },\n    ref: ForwardedRef<DropdownWithInputTagsHandle>\n  ) => {\n    const [tags, setTags] = useState<{ label: string; value: string }[]>(() => {\n      return value.map(val => {\n        const found = options.find(opt => opt.value === val);\n        return found ? { label: found.label, value: found.value } : { label: val, value: val };\n      });\n    });\n    const [inputValue, setInputValue] = useState('');\n    const [filteredOptions, setFilteredOptions] = useState<DropdownOption[]>(options);\n    const [isDropdownOpen, setIsDropdownOpen] = useState(false);\n    const popoverRef = useRef<PopoverHandle>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const applyClickedRef = useRef<boolean>(false);\n    \n    const isMultiSelectWithoutCTA = type === 'multi-select-without-cta';\n    const isMultiSelect = type === 'multi-select' ||isMultiSelectWithoutCTA;\n\n\n    useEffect(() => {\n      if (applyClickedRef.current) {\n        applyClickedRef.current = false;\n        return;\n      }\n      setTags(\n        value.map(val => {\n          const found = options.find(opt => opt.value === val);\n          return found ? { label: found.label, value: found.value } : { label: val, value: val };\n        })\n      );\n    }, [value, options,isDropdownOpen]);\n\n\n    useEffect(() => {\n      if (!inputValue.trim()) {\n        setFilteredOptions(options);\n      } else {\n        const filtered = options.filter(option =>\n          option.label.toLowerCase().includes(inputValue.toLowerCase()) ||\n          option.value.toLowerCase().includes(inputValue.toLowerCase())\n        );\n        setFilteredOptions(filtered);\n      }\n      \n      if (onSearch) {\n        onSearch(inputValue);\n      }\n    }, [inputValue, options, onSearch]);\n\n    const handleSelectOption = (option: DropdownOption) => {\n      if (disabled) return;\n      \n      const newTags = [...tags];\n      if (!newTags.some(tag => tag.value === option.value)) {\n        newTags.push({ label: option.label, value: option.value });\n        setTags(newTags);\n        onChange?.(newTags.map(tag => tag.value));\n      }\n      setInputValue('');\n      setIsDropdownOpen(false);\n    };\n\n    const handleRemoveTag = (indexToRemove: number) => {\n      if (disabled) return;\n      \n      const newTags = tags.filter((_, index) => index !== indexToRemove);\n      setTags(newTags);\n      \n      //in multiselect if tag removed while dorpdownopen, do not call onchange\n      if(!isMultiSelect || isMultiSelectWithoutCTA ||(isMultiSelect && !isDropdownOpen)) {\n        onChange?.(newTags.map(tag => tag.value));\n      }\n    };\n\n    const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n      if (disabled) return;\n      \n      if (e.key === 'Enter' && inputValue.trim()) {\n        e.preventDefault();\n        \n        if (filteredOptions.length > 0) {\n          if(isMultiSelect ) {\n            const isSelected = tags.some(tag => tag.value === filteredOptions[0].value);\n            handleMultiSelectDropdownOptionClick(!isSelected, filteredOptions[0]);\n          } else {\n            handleSelectOption(filteredOptions[0]);\n          }\n        } else if (allowCustomTags) {\n          const newTags = [...tags];\n          if (!newTags.some(tag => tag.value === inputValue.trim())) {\n            newTags.push({ label: inputValue.trim(), value: inputValue.trim() });\n            setTags(newTags);\n            onChange?.(newTags.map(tag => tag.value));\n          }\n          setInputValue('');\n        }\n        setIsDropdownOpen(false);\n      } else if (e.key === 'Backspace' && inputValue === \"\" && tags.length > 0) {\n        const newTags = tags.slice(0, -1);\n        setTags(newTags);\n        onChange?.(newTags.map(tag => tag.value));\n      } else if (e.key === 'ArrowDown') {\n        e.preventDefault();\n        if (!isDropdownOpen) {\n          setIsDropdownOpen(true);\n        }\n      } else if (e.key === 'Escape') {\n        setIsDropdownOpen(false);\n        setInputValue('');\n      }\n    };\n\n    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      if (disabled) return;\n      \n      const newValue = e.target.value;\n      setInputValue(newValue);\n      \n      if (newValue.trim() && !isDropdownOpen) {\n        setIsDropdownOpen(true);\n      }\n    };\n\n    const handleInputFocus = () => {\n      if (disabled) return;\n      \n      if (inputValue.trim() || options.length > 0) {\n        setIsDropdownOpen(true);\n      }\n    };\n\n    const handleInputContainerClick = (e: React.MouseEvent) => {\n      if (disabled) return;\n      \n      e.stopPropagation();\n      inputRef.current?.focus();\n      if (!isDropdownOpen && (inputValue.trim() || options.length > 0)) {\n        setIsDropdownOpen(true);\n      }\n    };\n\n    const handlePopoverWrapperClick = (e: React.MouseEvent) => {\n      if (disabled) {\n        e.preventDefault();\n        e.stopPropagation();\n        return;\n      }\n      \n      const target = e.target as HTMLElement;\n      const isInputArea = target.closest('.input-with-tags-container');\n      if (isInputArea) {\n        e.stopPropagation();\n      }\n    };\n\n    const toggleDropdown = () => {\n      if (disabled) return;\n      setIsDropdownOpen(!isDropdownOpen);\n    };\n\n    useImperativeHandle(ref, () => ({ toggleDropdown }), []);\n\n    const defaultRenderOption = (\n      option: DropdownOption,\n      onSelect: (option: DropdownOption) => void,\n      disabled: boolean\n    ) => {\n      const isSelected = tags.some((tag) => tag.value === option.value);\n      return (\n        <div\n          key={option.id}\n          className=\"dropdown-with-input-tags-option\"\n          role=\"option\"\n          aria-selected={isSelected}\n          onClick={() => !disabled && onSelect(option)}\n          data-automation-id={`${automationId}-option-${option.id}`}\n        >\n          <span className=\"option-label\">{option.label}</span>\n          {option.value !== option.label && <span className=\"option-value\">{option.value}</span>}\n        </div>\n      );\n    };\n    const handleMultiSelectDropdownOptionClick = (isSelected: boolean, option: DropdownOption) => {\n      let newSelectedTags: { label: string; value: string }[] = [];\n      if (isSelected) {\n        newSelectedTags = [...tags, { label: option.label, value: option.value }];\n      } else {\n        newSelectedTags = tags.filter(tag => tag.value !== option.value);\n      }\n      setTags(newSelectedTags);\n      if(isMultiSelectWithoutCTA) {\n        onChange?.(newSelectedTags.map(tag => tag.value));\n      }\n    };\n\n    const handleApplySelectedDropDownValues = () => {\n      applyClickedRef.current = true;\n      const newTagValues = tags.map(tag => tag.value);\n      onChange?.(newTagValues);\n      setIsDropdownOpen(false);\n    };\n\n    const clearSelectedDropDownValues = () => {\n      setTags([]);\n    };\n    const multiSelectRenderOption = (option: DropdownOption) => {\n      const isOptionSelected = tags.some(tag => tag.value === option.value);\n      return (\n        <div\n          key={option.id}\n          className=\"dropdown-with-input-tags-option dropdown-with-input-tags-multi-select-option\"\n          role=\"option\"\n          aria-checked={isOptionSelected}\n          data-automation-id={`${automationId}-option-${option.id}`}\n        >\n          <Checkbox\n            automationId=\"checkbox\"\n            className=\"checkbox\"\n            defaultChecked={isOptionSelected}\n            onChange={(value) => handleMultiSelectDropdownOptionClick(value, option)}\n            label={option.label}\n          />\n        </div>\n      );\n    };\n\n    const multiSelectRenderCTAs = () => {\n      return (\n        <div className=\"dropdown-with-input-tags-ctas-container\">\n          <Button label=\"Clear\" type=\"link\" size=\"sm\" onClick={clearSelectedDropDownValues} automationId={`${automationId}-clear-button`} />\n          <Button label=\"Apply\" type=\"primary\" size=\"sm\" onClick={handleApplySelectedDropDownValues} automationId={`${automationId}-apply-button`} />\n        </div>\n      );\n    };\n\n    \n\n    return (\n      <div\n        className={`dropdown-with-input-tags-wrapper ${className} ${disabled ? 'disabled-wrapper' : ''}`}\n        data-automation-id={automationId} \n      >\n        {label && <label id={`${automationId}-label`} className=\"dropdown-with-input-tags-label\">{label}</label>}\n\n        <div onClick={handlePopoverWrapperClick}>\n          <Popover\n            ref={popoverRef}\n            className=\"dropdown-with-input-tags-popover\"\n            contentWidth=\"full\"\n            position=\"bottom-left\"\n            isPopoverOpen={!disabled && isDropdownOpen}\n            onPopoverToggle={disabled ? () => {} : setIsDropdownOpen}\n            renderPopoverContents={({ closePopoverCb }) => (\n              <>\n                <div\n                  className=\"dropdown-with-input-tags-content\"\n                  role=\"listbox\"\n                  {...(isMultiSelect && { 'aria-multiselectable': 'true' })}\n                >\n                  {filteredOptions.length > 0 ? (\n                    filteredOptions.map((option) =>\n                      isMultiSelect\n                        ? multiSelectRenderOption(option)\n                        : renderOption\n                        ? renderOption(option, handleSelectOption)\n                        : defaultRenderOption(option, handleSelectOption, disabled)\n                    )\n                  ) : (\n                    <div className=\"dropdown-with-input-tags-no-options\">\n                      {inputValue.trim() ? (\n                        allowCustomTags ? (\n                          <div\n                            className=\"dropdown-with-input-tags-option dropdown-with-input-tags-custom-option\"\n                            onClick={() => {\n                              if (disabled) return;\n                              const newTags = [...tags];\n                              if (!newTags.some((tag) => tag.value === inputValue.trim())) {\n                                newTags.push({ label: inputValue.trim(), value: inputValue.trim() });\n                                setTags(newTags);\n                                onChange?.(newTags.map((tag) => tag.value));\n                              }\n                              setInputValue('');\n                              closePopoverCb();\n                            }}\n                          >\n                            Add \"{inputValue.trim()}\"\n                          </div>\n                        ) : (\n                          <div className=\"dropdown-with-input-tags-no-options-text\" role=\"status\" aria-live=\"polite\">\n                            {noOptionsMessage}\n                          </div>\n                        )\n                      ) : (\n                        <div className=\"dropdown-with-input-tags-no-options-text\" role=\"status\" aria-live=\"polite\">\n                          {noOptionsMessage}\n                        </div>\n                      )}\n                    </div>\n                  )}\n                </div>\n                {isMultiSelect && !isMultiSelectWithoutCTA && multiSelectRenderCTAs()}\n              </>\n            )}\n            renderPopoverSrcElement={() => (\n              <div className=\"dropdown-with-input-tags-input-container\">\n                <div\n                  className={`input-with-tags-container ${disabled ? 'disabled-input-with-tags-container' : ''}`}\n                  onClick={handleInputContainerClick}\n                >\n                  {tags.map((tag, index) => (\n                    <span key={index} className=\"tag-in-inputwithtags\">\n                      {tag.label}\n                      {!disabled && (\n                        <span\n                          className=\"close-icon-in-inputwithtags\"\n                          onClick={(e) => {\n                            e.stopPropagation();\n                            handleRemoveTag(index);\n                          }}\n                        >\n                          <Icon name=\"close\" />\n                        </span>\n                      )}\n                    </span>\n                  ))}\n                  {(showInput ||!tags.length) && (\n                    <input\n                      ref={inputRef}\n                      type=\"text\"\n                      value={inputValue}\n                      onChange={handleInputChange}\n                      onKeyDown={handleKeyDown}\n                      onFocus={handleInputFocus}\n                      placeholder={tags.length === 0 ? placeholder : ''}\n                      className=\"input-with-tags-input\"\n                      disabled={disabled}\n                    />\n                  )}\n                </div>\n              </div>\n            )}\n            automationId={automationId}\n            popoverContentAutomationId={`${automationId}-content`}\n          />\n        </div>\n      </div>\n    );\n  }\n); "],"names":["DropdownWithInputTags","value","onChange","placeholder","className","options","renderOption","onSearch","label","automationId","noOptionsMessage","allowCustomTags","disabled","type","showInput","ref","tags","setTags","useState","map","val","found","find","opt","inputValue","setInputValue","filteredOptions","setFilteredOptions","isDropdownOpen","setIsDropdownOpen","popoverRef","useRef","inputRef","applyClickedRef","isMultiSelectWithoutCTA","isMultiSelect","useEffect","current","trim","filtered","filter","option","toLowerCase","includes","handleSelectOption","newTags","some","tag","push","handleRemoveTag","indexToRemove","_","index","handleKeyDown","e","key","preventDefault","length","isSelected","handleMultiSelectDropdownOptionClick","slice","handleInputChange","newValue","target","handleInputFocus","handleInputContainerClick","stopPropagation","focus","handlePopoverWrapperClick","closest","toggleDropdown","useImperativeHandle","defaultRenderOption","onSelect","React","createElement","id","role","onClick","newSelectedTags","handleApplySelectedDropDownValues","newTagValues","clearSelectedDropDownValues","multiSelectRenderOption","isOptionSelected","Checkbox","defaultChecked","multiSelectRenderCTAs","Button","size","Popover","contentWidth","position","isPopoverOpen","onPopoverToggle","renderPopoverContents","closePopoverCb","Fragment","_extends","renderPopoverSrcElement","Icon","name","onKeyDown","onFocus","popoverContentAutomationId"],"mappings":"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"}
+{"version":3,"file":"index36.js","sources":["../src/components/CustomAccordion/index.tsx"],"sourcesContent":["import React, { FC, useEffect, useState } from 'react';\nimport { Icon } from '../Icon';\nimport { useStableId } from '../../utils/useStableId';\nimport { useAccessiblePress, getA11yNameAttributes } from '../../utils/a11y';\nimport { getRegionAttributes } from '../../utils/a11y/regionAttributes';\n\nexport interface CustomAccordionProps {\n  renderAccordionContents: (props: { isOpen: boolean }) => React.ReactNode;\n  renderAccordionSrcElement: (props: { isOpen: boolean }) => React.ReactNode;\n  renderControls?: () => React.ReactNode;\n  defaultOpen?: boolean;\n  expanded?: boolean;\n  onChange?: (isOpen: boolean) => void;\n  className?: string;\n  arrowPosition?: 'left' | 'right';\n  contentClassName?: string;\n  disabled?: boolean;\n  automationId?: string;\n  id?: string;\n  ariaLabel?: string;\n  titleTag?: string;\n}\n\nexport const CustomAccordion: FC<CustomAccordionProps> = ({\n  renderAccordionContents,\n  renderAccordionSrcElement,\n  renderControls,\n  defaultOpen,\n  expanded,\n  onChange,\n  className = '',\n  arrowPosition = 'left',\n  contentClassName = '',\n  disabled = false,\n  automationId = '',\n  id,\n  ariaLabel,\n  titleTag\n}) => {\n  const [isOpen, setIsOpen] = useState(false);\n  useEffect(() => {\n    setIsOpen(defaultOpen || false);\n  }, [defaultOpen]);\n\n  const isControlled = expanded !== undefined;\n  const open = isControlled ? expanded : isOpen;\n\n  const handleToggle = () => {\n    if (isControlled) {\n      onChange?.(!open);\n    } else {\n      setIsOpen(!open);\n    }\n  };\n\n  // Generate stable IDs for ARIA relationships\n  const triggerId = useStableId(id, 'custom-accordion');\n  const contentId = `${triggerId}-content`;\n\n  // Use accessible press hook for keyboard + mouse handling\n  const { pressProps, role, tabIndex } = useAccessiblePress({\n    onClick: handleToggle,\n    isNative: false,\n    disabled\n  });\n\n  // Get region attributes for content panel\n  const regionAttributes = getRegionAttributes({\n    titleId: triggerId,\n    isFocusable: false\n  });\n\n  const focusVisibleClasses = 'group-focus-visible:[outline:var(--focus-width)_solid_var(--focus-color)] group-focus-visible:[outline-offset:var(--focus-offset)] group-focus-visible:p-[2px]';\n\n  const getArrowRotation = () => {\n    if (disabled) {\n      return '';\n    }\n    if (arrowPosition === 'left') {\n      return open ? 'rotate-90' : '';\n    }\n    return open ? 'rotate-180' : '';\n  };\n\n  const TitleTag = titleTag as React.ElementType | undefined;\n\n  const triggerContent = (\n    <div className={`se-design-accordion-trigger-content flex items-center rounded ${focusVisibleClasses}`}>\n      {arrowPosition === 'left' && (\n        <div className={`se-design-accordion-icon transform transition-transform duration-300 ${getArrowRotation()} ${\n          disabled ? 'opacity-30 pointer-events-none' : ''\n        }`}>\n          <Icon name=\"rightSide\" />\n        </div>\n      )}\n      <div className=\"se-design-accordion-elements\">\n        <div id={triggerId} className=\"se-design-accordion-src-element title\">{renderAccordionSrcElement({ isOpen: open })}</div>\n      </div>\n      {arrowPosition === 'right' && (\n        <div className={`se-design-accordion-icon transform transition-transform duration-300 ${getArrowRotation()} ${\n          disabled ? 'opacity-30 pointer-events-none' : ''\n        }`}>\n          <Icon name=\"chevron\" />\n        </div>\n      )}\n    </div>\n  );\n\n  const trigger = TitleTag ? (\n    <TitleTag className=\"flex-1\">\n      <button\n        id={triggerId + '-btn'}\n        onClick={handleToggle}\n        aria-expanded={open}\n        aria-controls={contentId}\n        disabled={disabled}\n        className=\"flex items-center flex-1 w-full cursor-pointer group focus-visible:!outline-none bg-transparent border-0 p-0 text-left\"\n      >\n        {triggerContent}\n      </button>\n    </TitleTag>\n  ) : (\n    <div\n      {...pressProps}\n      {...getA11yNameAttributes({ ariaLabel })}\n      role={role}\n      tabIndex={tabIndex}\n      aria-expanded={open}\n      aria-controls={contentId}\n      className=\"flex items-center flex-1 cursor-pointer group focus-visible:outline-none\"\n    >\n      {triggerContent}\n    </div>\n  );\n\n  return (\n    <div className={`se-design-accordion ${className}`} data-automation-id={automationId}>\n      <div className=\"flex flex-col\">\n        <div className=\"se-design-accordion-src flex items-center\">\n          {trigger}\n          {renderControls?.()}\n        </div>\n        {open && (\n          <div id={contentId} {...regionAttributes} className={`se-design-accordion-content transition-all duration-300 mt-1 ${contentClassName}`}>\n            {renderAccordionContents({ isOpen: open })}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["CustomAccordion","renderAccordionContents","renderAccordionSrcElement","renderControls","defaultOpen","expanded","onChange","className","arrowPosition","contentClassName","disabled","automationId","id","ariaLabel","titleTag","isOpen","setIsOpen","useState","useEffect","isControlled","undefined","open","handleToggle","triggerId","useStableId","contentId","pressProps","role","tabIndex","useAccessiblePress","onClick","isNative","regionAttributes","getRegionAttributes","titleId","isFocusable","focusVisibleClasses","getArrowRotation","TitleTag","triggerContent","React","createElement","Icon","name","trigger","_extends","getA11yNameAttributes"],"mappings":"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"}

package/dist/index37.js

@@ -1,45 +1,58 @@
-import t from "react";
+import a, { useState as p, useRef as N } from "react";
 /* empty css         */
-function f({
-  value: i,
-  onChange: c,
-  onBlur: o,
-  disabled: a,
-  maxLength: e,
-  tag: l,
-  error: n,
-  errorMessage: m,
-  label: r,
-  placeholder: s,
-  style: d,
-  inputStyle: u,
-  automationId: p = ""
+import { Icon as k } from "./index6.js";
+function D({
+  value: g,
+  onChange: s,
+  placeholder: f,
+  className: d,
+  error: o,
+  errorMessage: h,
+  label: c,
+  automationId: w = ""
 }) {
-  const E = l || "input";
-  return /* @__PURE__ */ t.createElement("div", {
-    className: "input-main-container",
-    style: d,
-    "data-automation-id": p
-  }, r && /* @__PURE__ */ t.createElement("div", {
-    className: `label-container ${a ? "label-container-disabled" : ""}`
-  }, r), /* @__PURE__ */ t.createElement(E, {
+  const [n, l] = p([...g]), [i, r] = p(""), u = N(null), m = (t) => {
+    const e = n.filter((y, E) => E !== t);
+    l(e), s?.(e);
+  }, v = (t) => {
+    if (t.key === "Enter" && i.trim()) {
+      t.preventDefault();
+      const e = [...n, i.trim()];
+      l(e), r(""), s?.(e);
+    } else t.key === "Backspace" && i === "" && n.length > 0 && m(n.length - 1);
+  };
+  return /* @__PURE__ */ a.createElement("div", {
+    className: "input-with-tags-main-container",
+    "data-automation-id": w
+  }, c && /* @__PURE__ */ a.createElement("div", {
+    className: "label-container"
+  }, c), /* @__PURE__ */ a.createElement("div", {
+    className: `input-with-tags-container ${o ? "input-with-tags-error" : ""} ${d}`,
+    onClick: () => u.current?.focus()
+  }, n.map((t, e) => /* @__PURE__ */ a.createElement("span", {
+    key: e,
+    className: "tag-in-inputwithtags",
+    "data-automation-id": `input-tag-${e}`
+  }, t, /* @__PURE__ */ a.createElement(k, {
+    name: "close",
+    className: "close-icon-in-inputwithtags",
+    ariaLabel: `Remove tag ${t}`,
+    onClick: () => m(e),
+    shouldStopPropagation: !0
+  }))), /* @__PURE__ */ a.createElement("input", {
+    className: "input-with-tags-input",
+    ref: u,
+    type: "text",
     value: i,
-    onChange: (v) => c(v.target.value),
-    onBlur: o,
-    disabled: a,
-    className: `${n ? "input-container-error" : "input-container-default"} ${a ? "input-container-disabled" : ""}`,
-    maxLength: e || void 0,
-    placeholder: s,
-    style: u
-  }), (n || e) && /* @__PURE__ */ t.createElement("div", {
-    className: `${n ? "error-and-max-word" : "max-word-container"} ${a ? "disabled" : ""}`
-  }, n && /* @__PURE__ */ t.createElement("div", {
+    onChange: (t) => r(t.target.value),
+    onKeyDown: v,
+    placeholder: f,
+    "data-automation-id": "input-with-tags-input-field"
+  })), o && /* @__PURE__ */ a.createElement("div", {
     className: "error-message"
-  }, m), e && /* @__PURE__ */ t.createElement("div", {
-    className: "max-word"
-  }, e && i?.length + "/" + e)));
+  }, h));
 }
 export {
-  f as Input
+  D as InputWithTags
 };
 //# sourceMappingURL=index37.js.map

package/dist/index37.js.map

@@ -1 +1 @@
-{"version":3,"file":"index37.js","sources":["../src/components/Input/index.tsx"],"sourcesContent":["import React from 'react';\nimport './style.scss';\n\nexport interface InputProps {\n  value: string;\n  disabled?: boolean;\n  maxLength?: number | undefined;\n  onChange: (value: string) => void;\n  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;\n  tag?: string;\n  error?: boolean;\n  errorMessage?: string;\n  label?: string;\n  placeholder?: string;\n  style?: React.CSSProperties;\n  inputStyle?: React.CSSProperties;\n  automationId?: string;\n}\n\nexport function Input({\n  value,\n  onChange,\n  onBlur,\n  disabled,\n  maxLength,\n  tag,\n  error,\n  errorMessage,\n  label,\n  placeholder,\n  style,\n  inputStyle,\n  automationId = ''\n}: InputProps) {\n  const Element = tag || 'input';\n\n  return (\n    <div className=\"input-main-container\" style={style} data-automation-id={automationId}>\n      {label && <div className={`label-container ${disabled ? 'label-container-disabled' : ''}`}>{label}</div>}\n      {React.createElement(Element, {\n        value,\n        onChange: (e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value),\n        onBlur,\n        disabled,\n        className: `${error ? 'input-container-error' : 'input-container-default'} ${disabled ? 'input-container-disabled' : ''}`,\n        maxLength: maxLength ? maxLength : undefined,\n        placeholder: placeholder,\n        style: inputStyle\n      })}\n      {(error || maxLength) &&\n        <div className={`${error ? 'error-and-max-word' : 'max-word-container'} ${disabled ? 'disabled' : ''}`}>\n          {error && <div className=\"error-message\">{errorMessage}</div>}\n          {maxLength && <div className=\"max-word\">{maxLength && value?.length + '/' + maxLength}</div>}\n        </div>\n      }\n    </div>\n  );\n}\n"],"names":["React__default","Input","value","onChange","onBlur","disabled","maxLength","tag","error","errorMessage","label","placeholder","style","inputStyle","automationId","Element","React","createElement","className","e","target","undefined","length"],"mappings":"AAmBO,OAAAA,OAAA;AAAA,OAAA;AAAA,SAASC,EAAM;AAAA,EACpBC,OAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,YAAAA;AAAAA,EACAC,cAAAA,IAAe;AACL,GAAG;AACb,QAAMC,IAAUR,KAAO;AAGrBS,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,IAAuBN,OAAAA;AAAAA,IAAc,sBAAoBE;AAAAA,EACrEJ,GAAAA,KAASO,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAW,mBAAmBb,IAAW,6BAA6B,EAAE;AAAA,EAAKK,GAAAA,CAAW,GACtGM,gBAAAA,EAAMC,cAAcF,GAAS;AAAA,IAC5Bb,OAAAA;AAAAA,IACAC,UAAUA,CAACgB,MAA2ChB,EAASgB,EAAEC,OAAOlB,KAAK;AAAA,IAC7EE,QAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAa,WAAW,GAAGV,IAAQ,0BAA0B,yBAAyB,IAAIH,IAAW,6BAA6B,EAAE;AAAA,IACvHC,WAAWA,KAAwBe;AAAAA,IACnCV,aAAAA;AAAAA,IACAC,OAAOC;AAAAA,EAAAA,CACR,IACCL,KAASF,MACTU,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAW,GAAGV,IAAQ,uBAAuB,oBAAoB,IAAIH,IAAW,aAAa,EAAE;AAAA,EACjGG,GAAAA,KAASS,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,KAAiBT,CAAkB,GAC3DH,KAAaU,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAA,GAAYZ,KAAaJ,GAAOoB,SAAS,MAAMhB,CAAe,CACxF,CAEJ;AAET;"}
+{"version":3,"file":"index37.js","sources":["../src/components/InputWithTags/index.tsx"],"sourcesContent":["import React, { useState, KeyboardEvent, useRef } from \"react\";\nimport './styles.scss';\nimport { Icon } from '../Icon';\n\nexport interface InputWithTagsProps {\n    value: string[];\n    onChange?: (tags: string[]) => void;\n    placeholder?: string;\n    className?: string;\n    error?: boolean;\n    errorMessage?: string;\n    label?: string;\n    automationId?: string;\n}\n\nexport function InputWithTags({ \n    value, \n    onChange, \n    placeholder, \n    className, \n    error, \n    errorMessage, \n    label,\n    automationId = ''\n}: InputWithTagsProps) {\n    const [tags, setTags] = useState<string[]>([...value]);\n    const [inputValue, setInputValue] = useState('');\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    const removeTag = (indexToRemove: number) => {\n        const newTags = tags.filter((_, i) => i !== indexToRemove);\n        setTags(newTags);\n        onChange?.(newTags);\n    };\n\n    const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n        if (e.key === 'Enter' && inputValue.trim()) {\n            e.preventDefault();\n            const newTags = [...tags, inputValue.trim()];\n            setTags(newTags);\n            setInputValue(\"\");\n            onChange?.(newTags);\n        } else if (e.key === 'Backspace' && inputValue === \"\" && tags.length > 0) {\n            removeTag(tags.length - 1);\n        }\n    };\n\n    return (\n        <div className=\"input-with-tags-main-container\" data-automation-id={automationId}>\n            {label && <div className=\"label-container\">{label}</div>}\n            <div \n                className={`input-with-tags-container ${error ? 'input-with-tags-error' : ''} ${className}`} \n                onClick={() => inputRef.current?.focus()}\n            >\n                {tags.map((tag, index) => (\n                    <span key={index} className=\"tag-in-inputwithtags\" data-automation-id={`input-tag-${index}`}>\n                        {tag} \n                        <Icon\n                            name=\"close\"\n                            className=\"close-icon-in-inputwithtags\"\n                            ariaLabel={`Remove tag ${tag}`}\n                            onClick={() => removeTag(index)}\n                            shouldStopPropagation\n                        />\n                    </span>\n                ))}\n                <input\n                    className=\"input-with-tags-input\"\n                    ref={inputRef}\n                    type=\"text\"\n                    value={inputValue}\n                    onChange={(e) => setInputValue(e.target.value)}\n                    onKeyDown={handleKeyDown}\n                    placeholder={placeholder}\n                    data-automation-id=\"input-with-tags-input-field\"\n                />\n            </div>\n            {error && <div className=\"error-message\">{errorMessage}</div>}\n        </div>\n    );\n}"],"names":["React__default","useState","useRef","Icon","InputWithTags","value","onChange","placeholder","className","error","errorMessage","label","automationId","tags","setTags","inputValue","setInputValue","inputRef","removeTag","indexToRemove","newTags","filter","_","i","handleKeyDown","e","key","trim","preventDefault","length","React","createElement","onClick","current","focus","map","tag","index","name","ariaLabel","shouldStopPropagation","ref","type","target","onKeyDown"],"mappings":"AAeO,OAAAA,KAAA,YAAAC,GAAA,UAAAC,SAAA;AAAA,OAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,SAASC,EAAc;AAAA,EAC1BC,OAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,cAAAA,IAAe;AACC,GAAG;AACnB,QAAM,CAACC,GAAMC,CAAO,IAAIb,EAAmB,CAAC,GAAGI,CAAK,CAAC,GAC/C,CAACU,GAAYC,CAAa,IAAIf,EAAS,EAAE,GACzCgB,IAAWf,EAAyB,IAAI,GAExCgB,IAAYA,CAACC,MAA0B;AACzC,UAAMC,IAAUP,EAAKQ,OAAO,CAACC,GAAGC,MAAMA,MAAMJ,CAAa;AACzDL,IAAAA,EAAQM,CAAO,GACfd,IAAWc,CAAO;AAAA,EACtB,GAEMI,IAAgBA,CAACC,MAAuC;AAC1D,QAAIA,EAAEC,QAAQ,WAAWX,EAAWY,QAAQ;AACxCF,MAAAA,EAAEG,eAAAA;AACF,YAAMR,IAAU,CAAC,GAAGP,GAAME,EAAWY,MAAM;AAC3Cb,MAAAA,EAAQM,CAAO,GACfJ,EAAc,EAAE,GAChBV,IAAWc,CAAO;AAAA,IACtB,MAAA,CAAWK,EAAEC,QAAQ,eAAeX,MAAe,MAAMF,EAAKgB,SAAS,KACnEX,EAAUL,EAAKgB,SAAS,CAAC;AAAA,EAEjC;AAEA,SACIC,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKvB,WAAU;AAAA,IAAiC,sBAAoBI;AAAAA,EAAAA,GAC/DD,KAASmB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKvB,WAAU;AAAA,EAAA,GAAmBG,CAAW,GACvDmB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACIvB,WAAW,6BAA6BC,IAAQ,0BAA0B,EAAE,IAAID,CAAS;AAAA,IACzFwB,SAASA,MAAMf,EAASgB,SAASC,MAAAA;AAAAA,EAAM,GAEtCrB,EAAKsB,IAAI,CAACC,GAAKC,MACZP,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAML,KAAKW;AAAAA,IAAO7B,WAAU;AAAA,IAAuB,sBAAoB,aAAa6B,CAAK;AAAA,EAAA,GACpFD,GACDN,gBAAAA,EAAAC,cAAC5B,GAAI;AAAA,IACDmC,MAAK;AAAA,IACL9B,WAAU;AAAA,IACV+B,WAAW,cAAcH,CAAG;AAAA,IAC5BJ,SAASA,MAAMd,EAAUmB,CAAK;AAAA,IAC9BG,uBAAqB;AAAA,EAAA,CACxB,CACC,CACT,GACDV,gBAAAA,EAAAC,cAAA,SAAA;AAAA,IACIvB,WAAU;AAAA,IACViC,KAAKxB;AAAAA,IACLyB,MAAK;AAAA,IACLrC,OAAOU;AAAAA,IACPT,UAAWmB,CAAAA,MAAMT,EAAcS,EAAEkB,OAAOtC,KAAK;AAAA,IAC7CuC,WAAWpB;AAAAA,IACXjB,aAAAA;AAAAA,IACA,sBAAmB;AAAA,EAAA,CACtB,CACA,GACJE,KAASqB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKvB,WAAU;AAAA,EAAA,GAAiBE,CAAkB,CAC3D;AAEb;"}

package/dist/index38.js

@@ -1,87 +1,311 @@
-import a, { useState as d, useRef as $, useEffect as r, useMemo as D } from "react";
-import { Icon as g } from "./index5.js";
-import { LabelChip as F } from "./index9.js";
-import { debounce as L } from "./index172.js";
+import a, { forwardRef as be, useState as _, useRef as M, useCallback as F, useEffect as W, useImperativeHandle as Ee } from "react";
+import { Popover as Pe } from "./index19.js";
+import { Icon as Ce } from "./index6.js";
+import { Checkbox as Se } from "./index23.js";
+import { Button as X } from "./index4.js";
+import { getA11yNameAttributes as De } from "./index81.js";
+import "./index72.js";
+import { useCombobox as Ne } from "./index68.js";
+import { useStableId as $e } from "./index205.js";
+import { announce as Oe } from "./index75.js";
 /* empty css         */
-function z(p) {
-  const {
-    disabled: v = !1,
-    placeholder: I = "Search",
-    debounceDuration: h = 500,
-    onInputChange: c = () => {
-    },
-    onSearchClear: N = () => {
-    },
-    onChipRemove: S = () => {
-    },
-    updateSearchString: o = "",
-    collapsible: f = !1,
-    width: k = "200px",
-    chips: s = [],
-    showSearchIcon: w = !0,
-    renderFilterComponent: b = null,
-    automationId: R = ""
-  } = p, [n, l] = d(""), [t, C] = d(!p?.collapsible), [i, E] = d(s || []), m = $(null);
-  r(() => {
-    t && m.current && setTimeout(() => m?.current?.focus(), 0);
-  }, [t]), r(() => {
-    o !== n && l(o);
-  }, [o]), r(() => {
-    E(s);
-  }, [s]);
-  const u = D(() => L(c, h), [c, h]);
-  r(() => () => {
-    u.cancel();
-  }, [u]);
-  const y = (e) => {
-    l(e), u(e);
-  }, B = () => {
-    l(""), c(""), N();
-  }, H = () => {
-    f && n?.trimEnd() === "" && C(!1);
-  }, _ = (e) => {
-    E(i.filter((V) => V?.id !== e?.id)), S(e);
-  }, x = i?.length > 0;
-  return /* @__PURE__ */ a.createElement("div", {
-    className: `se-search-box ${t ? "expand-box" : "shrink-box"}`,
-    style: {
-      width: k
-    },
-    "data-automation-id": R
-  }, t && /* @__PURE__ */ a.createElement("div", {
-    className: "search-box-container"
-  }, /* @__PURE__ */ a.createElement("div", {
-    className: `chips-and-search-box-container${x ? " has-chips" : ""}`
-  }, x && i?.map((e) => /* @__PURE__ */ a.createElement(F, {
-    key: e?.value,
-    label: e?.label,
-    icon: "close",
-    onIconClick: () => _(e)
-  })), /* @__PURE__ */ a.createElement("div", {
-    className: "search-input-container"
-  }, w && /* @__PURE__ */ a.createElement(g, {
-    name: "search",
-    className: "search-icon img-wrap",
-    onClick: () => f && C((e) => !e)
-  }), /* @__PURE__ */ a.createElement("input", {
-    ref: m,
-    className: "search-input border-transparent focus:border-transparent active:border-transparent focus:ring-0",
-    id: "search_bar",
-    type: "text",
-    placeholder: I,
-    onChange: (e) => y(e.target.value),
-    value: n,
-    disabled: v,
-    onBlur: H
-  }), !!n && /* @__PURE__ */ a.createElement(g, {
-    name: "close",
-    className: "cross-icon img-wrap",
-    onClick: B
-  }))), b && /* @__PURE__ */ a.createElement("div", {
-    className: "filter-component-container"
-  }, b())));
+function g() {
+  return g = Object.assign ? Object.assign.bind() : function(h) {
+    for (var i = 1; i < arguments.length; i++) {
+      var k = arguments[i];
+      for (var y in k) ({}).hasOwnProperty.call(k, y) && (h[y] = k[y]);
+    }
+    return h;
+  }, g.apply(null, arguments);
 }
+const We = /* @__PURE__ */ be(({
+  value: h,
+  onChange: i,
+  placeholder: k = "Type to search or add custom tags...",
+  className: y = "",
+  options: d = [],
+  renderOption: x,
+  label: R,
+  ariaLabel: Y,
+  ariaLabelledBy: Z,
+  ariaDescribedBy: ee,
+  automationId: u = "",
+  noOptionsMessage: U = "No options found",
+  allowCustomTags: j = !0,
+  disabled: r = !1,
+  type: H = "select",
+  showInput: z = !0,
+  displayTagBy: B = "label",
+  isWithPortal: te = !1
+}, ne) => {
+  const G = (e) => e.map((t) => {
+    const n = d.find((s) => s.value === t);
+    return n ? {
+      label: n.label,
+      value: n.value
+    } : {
+      label: t,
+      value: t
+    };
+  }), [o, f] = _(() => G(h || [])), [l, b] = _(""), [K, ae] = _(d), [p, c] = _(!1), re = M(null), S = M(null), D = M(!1), E = H === "multi-select-without-cta", m = H === "multi-select" || E, oe = $e(u, "dropdown-input-tags-listbox"), N = F((e) => {
+    if (r) return;
+    const t = [...o];
+    t.some((n) => n.value === e.value) || (t.push({
+      label: e.label,
+      value: e.value
+    }), f(t), i?.(t.map((n) => n.value))), b(""), c(!1);
+  }, [r, o, i]), V = F((e, t) => {
+    let n = [];
+    e ? n = [...o, {
+      label: t.label,
+      value: t.value
+    }] : n = o.filter((s) => s.value !== t.value), f(n), b(""), E && (D.current = !0, i?.(n.map((s) => s.value)));
+  }, [o, E, i]), $ = "__add_custom_tag__", q = F((e) => {
+    if (!r) {
+      if (e.value === $) {
+        const t = l.trim();
+        if (!t) return;
+        const n = [...o];
+        n.some((s) => s.value === t) || (n.push({
+          label: t,
+          value: t
+        }), f(n), i?.(n.map((s) => s.value))), b(""), c(!1);
+        return;
+      }
+      if (m) {
+        const t = o.some((n) => n.value === e.value);
+        V(!t, e);
+      } else
+        N(e);
+    }
+  }, [r, m, o, l, i, V, N]), v = K.length > 0 ? K : j && l.trim() ? [{
+    id: $,
+    label: `Add "${l.trim()}"`,
+    value: $
+  }] : [], {
+    containerProps: le,
+    inputProps: J,
+    listboxProps: se,
+    getOptionProps: O,
+    highlightedIndex: A,
+    setHighlightedIndex: w,
+    isKeyboardFocused: Q
+  } = Ne({
+    items: v,
+    isOpen: p,
+    onOpenChange: c,
+    onSelect: q,
+    listboxId: oe,
+    hasItems: v.length > 0,
+    keepHighlightOnSelect: m,
+    closeOnTab: H !== "multi-select"
+  }), T = (e) => e ? `highlighted${Q ? " keyboard-highlight" : ""}` : "";
+  W(() => {
+    if (D.current) {
+      D.current = !1;
+      return;
+    }
+    f(G(h || []));
+  }, [h, d, p]), W(() => {
+    const e = d.filter((t) => t.label.toLowerCase().includes(l.toLowerCase()) || t.value.toLowerCase().includes(l.toLowerCase()));
+    ae(e);
+  }, [l, d]), W(() => {
+    p && v.length === 0 && l.trim() && Oe(U, {
+      assertiveness: "polite",
+      batchId: "dropdown-input-tags-empty-state",
+      delay: 300
+    });
+  }, [v.length, p, l]);
+  const ie = (e) => {
+    if (r) return;
+    const t = o.filter((n, s) => s !== e);
+    f(t), (!m || E || m && !p) && i?.(t.map((n) => n.value));
+  }, ce = (e) => {
+    if (!r) {
+      if (e.key === "Backspace" && l === "" && o.length > 0) {
+        e.preventDefault();
+        const t = o.slice(0, -1);
+        f(t), i?.(t.map((n) => n.value));
+        return;
+      }
+      if (e.key === "Enter" && l.trim() && K.length === 0 && j) {
+        e.preventDefault();
+        const t = [...o];
+        t.some((n) => n.value === l.trim()) || (t.push({
+          label: l.trim(),
+          value: l.trim()
+        }), f(t), i?.(t.map((n) => n.value))), b(""), w(-1), c(!1);
+        return;
+      }
+      J.onKeyDown(e);
+    }
+  }, ue = (e) => {
+    if (r) return;
+    const t = e.target.value;
+    b(t), w(-1), t.trim() && !p && c(!0);
+  }, pe = () => {
+    r || (l.trim() || d.length > 0) && c(!0);
+  }, me = (e) => {
+    r || (e.stopPropagation(), S.current?.focus(), !p && (l.trim() || d.length > 0) && c(!0));
+  }, fe = (e) => {
+    if (r) {
+      e.preventDefault(), e.stopPropagation();
+      return;
+    }
+    e.target.closest(".input-with-tags-container") && e.stopPropagation();
+  }, ge = () => {
+    r || c(!p);
+  };
+  Ee(ne, () => ({
+    toggleDropdown: ge
+  }), []);
+  const de = (e, t, n, s) => {
+    const P = o.some((C) => C.value === e.value), I = A === t, L = O(t, P);
+    return /* @__PURE__ */ a.createElement("div", g({
+      key: e.id
+    }, L, {
+      className: `dropdown-with-input-tags-option ${T(I)}`,
+      onClick: () => !s && n(e),
+      onMouseEnter: () => w(t),
+      "data-automation-id": `${u}-option-${e.id}`
+    }), /* @__PURE__ */ a.createElement("span", {
+      className: "option-label"
+    }, e.label), e.value !== e.label && /* @__PURE__ */ a.createElement("span", {
+      className: "option-value"
+    }, e.value));
+  }, he = () => {
+    D.current = !0;
+    const e = o.map((t) => t.value);
+    i?.(e), c(!1);
+  }, ve = () => {
+    f([]);
+  }, we = (e, t) => {
+    const n = o.some((I) => I.value === e.value), s = A === t, P = O(t, n);
+    return /* @__PURE__ */ a.createElement("div", g({
+      key: e.id
+    }, P, {
+      className: `dropdown-with-input-tags-option dropdown-with-input-tags-multi-select-option ${T(s)}`,
+      "aria-checked": n,
+      onClick: () => {
+        r || (V(!n, e), S.current?.focus());
+      },
+      onMouseEnter: () => w(t),
+      "data-automation-id": `${u}-option-${e.id}`
+    }), /* @__PURE__ */ a.createElement(Se, {
+      automationId: "checkbox",
+      className: "checkbox",
+      checked: n,
+      onChange: () => {
+      },
+      label: e.label,
+      tabIndex: -1
+    }));
+  }, ke = () => /* @__PURE__ */ a.createElement("div", {
+    className: "dropdown-with-input-tags-ctas-container",
+    onKeyDown: (e) => {
+      (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Home" || e.key === "End") && e.stopPropagation();
+    }
+  }, /* @__PURE__ */ a.createElement(X, {
+    label: "Clear",
+    type: "link",
+    size: "sm",
+    onClick: ve,
+    automationId: `${u}-clear-button`
+  }), /* @__PURE__ */ a.createElement(X, {
+    label: "Apply",
+    type: "primary",
+    size: "sm",
+    onClick: he,
+    automationId: `${u}-apply-button`
+  }));
+  return /* @__PURE__ */ a.createElement("div", g({
+    className: `dropdown-with-input-tags-wrapper ${y} ${r ? "disabled-wrapper" : ""}`,
+    "data-automation-id": u
+  }, le), R && /* @__PURE__ */ a.createElement("label", {
+    id: `${u}-label`,
+    className: "dropdown-with-input-tags-label"
+  }, R), /* @__PURE__ */ a.createElement("div", {
+    onClick: fe
+  }, /* @__PURE__ */ a.createElement(Pe, {
+    ref: re,
+    className: "dropdown-with-input-tags-popover",
+    contentWidth: "full",
+    position: "bottom-left",
+    isPopoverOpen: !r && p,
+    onPopoverToggle: r ? () => {
+    } : c,
+    disableClickToggle: !0,
+    isWithPortal: te,
+    renderPopoverContents: ({
+      closePopoverCb: e
+    }) => /* @__PURE__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.createElement("div", g({}, se, {
+      className: "dropdown-with-input-tags-content"
+    }, m && {
+      "aria-multiselectable": "true"
+    }), v.length > 0 ? v.map((t, n) => {
+      if (t.value === $) {
+        const C = A === n, ye = O(n, !1);
+        return /* @__PURE__ */ a.createElement("div", g({
+          key: t.id
+        }, ye, {
+          className: `dropdown-with-input-tags-option dropdown-with-input-tags-custom-option ${T(C)}`,
+          onClick: () => {
+            r || (q(t), e());
+          },
+          onMouseEnter: () => w(n)
+        }), 'Add "', l.trim(), '"');
+      }
+      if (m)
+        return we(t, n);
+      const s = o.some((C) => C.value === t.value), P = A === n, L = {
+        ...O(n, s),
+        onMouseEnter: () => w(n),
+        className: `dropdown-with-input-tags-option ${T(P)}`
+      };
+      return x ? x(t, L, N) : de(t, n, N, r);
+    }) : /* @__PURE__ */ a.createElement("div", {
+      className: "dropdown-with-input-tags-no-options"
+    }, /* @__PURE__ */ a.createElement("div", {
+      className: "dropdown-with-input-tags-no-options-text"
+    }, U))), m && !E && ke()),
+    renderPopoverSrcElement: () => /* @__PURE__ */ a.createElement("div", {
+      className: "dropdown-with-input-tags-input-container"
+    }, /* @__PURE__ */ a.createElement("div", {
+      className: `input-with-tags-container ${r ? "disabled-input-with-tags-container" : ""} ${Q ? "keyboard-focused" : ""}`,
+      onClick: me,
+      onKeyDown: (e) => {
+        e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey && S.current?.focus();
+      }
+    }, o.map((e, t) => /* @__PURE__ */ a.createElement("span", {
+      key: t,
+      className: "tag-in-inputwithtags"
+    }, e[B], !r && /* @__PURE__ */ a.createElement(Ce, {
+      name: "close",
+      className: "close-icon-in-inputwithtags",
+      ariaLabel: `Remove tag ${e[B]}`,
+      onClick: () => ie(t),
+      shouldStopPropagation: !0
+    }))), (z || !o.length || m) && /* @__PURE__ */ a.createElement("input", g({
+      ref: S
+    }, J, {
+      type: "text",
+      value: l,
+      onChange: ue,
+      onKeyDown: ce,
+      onFocus: pe,
+      placeholder: o.length === 0 ? k : "",
+      className: `input-with-tags-input${!z && o.length > 0 && !l ? " sr-only" : ""}`,
+      disabled: r
+    }, De({
+      ariaLabel: Y || R || "Search and select options",
+      ariaLabelledBy: Z,
+      ariaDescribedBy: ee
+    }))))),
+    automationId: u,
+    popoverContentAutomationId: `${u}-content`
+  })));
+});
 export {
-  z as SearchBox
+  We as DropdownWithInputTags
 };
 //# sourceMappingURL=index38.js.map