@laerdal/life-react-components 3.4.2 → 3.5.0

package/dist/Dropdown/BasicDropdown.d.ts

@@ -1,42 +1,42 @@
-import * as React from 'react';
-import { DropdownItem } from './DropdownContent';
-import { Size, Testable } from '../types';
-export interface BasicDropdownCommonProps extends Testable, Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect' | 'placeholder' | 'tabIndex' | 'onMouseDown' | 'onClick' | 'onKeyDown'> {
-    list: DropdownItem[];
-    itemsType?: 'normal' | 'checkbox' | 'radio';
-    action?: () => void;
-    actionLabel?: string;
-    actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined;
-    actionIcon?: React.ReactNode;
-    actionLoading?: boolean;
-    actionDisabled?: boolean;
-    pinTopItem?: boolean;
-    scrollable?: boolean;
-    maxHeight?: string;
-    placeholder?: string;
-    disableSorting?: boolean;
-    messageOnNoResults?: string;
-    disabled?: boolean;
-    readOnly?: boolean;
-    isButton?: boolean;
-    activeValidationMessage?: string;
-    autofilledMessage?: string;
-    size?: Size.Small | Size.Medium;
-    margin?: string;
-    minWidth?: string;
-    textOverflow?: 'ellipsis' | 'default';
-    overflowTooltipPosition?: 'top' | 'bottom';
-}
-export type BasicDropdownMultiSelectProps = BasicDropdownCommonProps & {
-    multiSelect: true;
-    value?: string[];
-    onSelect: (value: string[]) => void;
-};
-export type BasucDropdownSingleSelectProps = BasicDropdownCommonProps & {
-    multiSelect?: false;
-    value?: string;
-    onSelect: (value: string) => void;
-};
-export type BasicDropdownProps = BasucDropdownSingleSelectProps | BasicDropdownMultiSelectProps;
-declare const BasicDropdown: React.ForwardRefExoticComponent<BasicDropdownProps & React.RefAttributes<unknown>>;
-export default BasicDropdown;
+import * as React from 'react';
+import { DropdownItem } from './DropdownContent';
+import { Size, Testable } from '../types';
+export interface BasicDropdownCommonProps extends Testable, Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect' | 'placeholder' | 'tabIndex' | 'onMouseDown' | 'onClick' | 'onKeyDown'> {
+    list: DropdownItem[];
+    itemsType?: 'normal' | 'checkbox' | 'radio';
+    action?: () => void;
+    actionLabel?: string;
+    actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined;
+    actionIcon?: React.ReactNode;
+    actionLoading?: boolean;
+    actionDisabled?: boolean;
+    pinTopItem?: boolean;
+    scrollable?: boolean;
+    maxHeight?: string;
+    placeholder?: string;
+    disableSorting?: boolean;
+    messageOnNoResults?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    isButton?: boolean;
+    activeValidationMessage?: string;
+    autofilledMessage?: string;
+    size?: Size.Small | Size.Medium;
+    margin?: string;
+    minWidth?: string;
+    textOverflow?: 'ellipsis' | 'default';
+    overflowTooltipPosition?: 'top' | 'bottom';
+}
+export type BasicDropdownMultiSelectProps = BasicDropdownCommonProps & {
+    multiSelect: true;
+    value?: string[];
+    onSelect: (value: string[]) => void;
+};
+export type BasucDropdownSingleSelectProps = BasicDropdownCommonProps & {
+    multiSelect?: false;
+    value?: string;
+    onSelect: (value: string) => void;
+};
+export type BasicDropdownProps = BasucDropdownSingleSelectProps | BasicDropdownMultiSelectProps;
+declare const BasicDropdown: React.ForwardRefExoticComponent<BasicDropdownProps & React.RefAttributes<unknown>>;
+export default BasicDropdown;

package/dist/Dropdown/BasicDropdown.js

@@ -187,7 +187,6 @@ var BasicDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
         disabled: disabled || false,
         readOnly: readOnly || false,
         isPlaceholder: !input,
-        placeholder: placeholder,
         showValidationMessage: !!activeValidationMessage,
         onKeyDown: handleKeyDown,
         minWidth: minWidth

package/dist/Dropdown/BasicDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"BasicDropdown.js","names":["React","COLORS","SystemIcons","LoadingIndicator","DropdownContainer","DropdownInputFieldStyles","DropdownInputField","DropdownContent","AutofilledMessage","ErrorMessage","TooltipOverflow","Size","defaultOnMouseDownHandler","useClickOutsideRef","useFocusVisibleRef","useFocusOutsideRef","BasicDropdown","forwardRef","props","ref","id","list","placeholder","messageOnNoResults","itemsType","action","actionLabel","actionVariant","actionIcon","actionLoading","actionDisabled","pinTopItem","scrollable","maxHeight","disabled","readOnly","isButton","activeValidationMessage","autofilledMessage","size","margin","minWidth","className","overflowTooltipPosition","onBlur","dataTestId","onSelect","textOverflow","rest","useState","isOpen","setIsOpen","activeDescendant","setActiveDescendant","isLoading","setIsLoading","input","setInput","focused","setFocused","keyboardNavigated","setKeyboardNavigated","inputRef","useRef","styledFieldRef","dropdownRef","resetDropdown","containerRef","handleKeyDown","e","key","handleValueSelect","values","join","multiSelect","undefined","current","focus","focusVisible","useEffect","value","useImperativeHandle","customSetIsOpen","getDisplayItems","split","map","val","trim","listDisplayLabels","filter","item","includes","l","displayLabel","handleBlur","currentTarget","contains","relatedTarget","cls","concat","stopPropagation","blur","Small","neutral_600","onValueUpdate","items","critical_400","disableSorting"],"sources":["../../src/Dropdown/BasicDropdown.tsx"],"sourcesContent":["import * as React from 'react';\nimport {COLORS} from '../styles';\nimport {SystemIcons} from '../icons';\nimport {LoadingIndicator} from '../LoadingIndicator';\nimport {DropdownContainer, DropdownInputFieldStyles, DropdownInputField} from './CommonStyling';\nimport DropdownContent, {DropdownItem} from './DropdownContent';\nimport {AutofilledMessage, ErrorMessage} from '../InputFields';\nimport TooltipOverflow from '../Tooltips/TooltipOverflow';\nimport {Size, Testable} from '../types';\nimport {defaultOnMouseDownHandler, useClickOutsideRef, useFocusVisibleRef} from '../common';\nimport {useFocusOutsideRef} from '../common';\n\nexport interface BasicDropdownCommonProps extends Testable, Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect' | 'placeholder' | 'tabIndex' | 'onMouseDown' | 'onClick' | 'onKeyDown'>{\n  list: DropdownItem[];\n  itemsType?: 'normal' | 'checkbox' | 'radio';\n  action?: () => void;\n  actionLabel?: string;\n  actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined;\n  actionIcon?: React.ReactNode;\n  actionLoading?: boolean;\n  actionDisabled?: boolean;\n  pinTopItem?: boolean;\n  scrollable?: boolean;\n  maxHeight?: string;\n  placeholder?: string;\n  disableSorting?: boolean;\n  messageOnNoResults?: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  isButton?: boolean;\n  activeValidationMessage?: string;\n  autofilledMessage?: string;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  minWidth?: string;\n  textOverflow?: 'ellipsis' | 'default';\n  overflowTooltipPosition?: 'top' | 'bottom';\n}\n\nexport type BasicDropdownMultiSelectProps = BasicDropdownCommonProps & {\n  multiSelect: true;\n  value?: string[];\n  onSelect: (value: string[]) => void;\n}\n\nexport type BasucDropdownSingleSelectProps = BasicDropdownCommonProps & {\n  multiSelect?: false;\n  value?: string;\n  onSelect: (value: string) => void;\n}\n\nexport type BasicDropdownProps = BasucDropdownSingleSelectProps | BasicDropdownMultiSelectProps;\n\nconst BasicDropdown = React.forwardRef((props: BasicDropdownProps, ref) => {\n  const {\n    id,\n    list,\n    placeholder,\n    messageOnNoResults,\n    itemsType = 'normal',\n    action,\n    actionLabel,\n    actionVariant,\n    actionIcon,\n    actionLoading,\n    actionDisabled,\n    pinTopItem,\n    scrollable = true,\n    maxHeight,\n    disabled,\n    readOnly,\n    isButton,\n    activeValidationMessage,\n    autofilledMessage,\n    size,\n    margin,\n    minWidth,\n    className,\n    overflowTooltipPosition,\n    onBlur,\n    dataTestId,\n    onSelect,\n    textOverflow = 'ellipsis',\n    ...rest\n  } = props;\n\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [activeDescendant, setActiveDescendant] = React.useState<string>();\n  const [isLoading, setIsLoading] = React.useState<boolean>(false);\n  const [input, setInput] = React.useState<string>('');\n  const [focused, setFocused] = React.useState<number | null>(null);\n  \n  const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\n\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const styledFieldRef = useFocusVisibleRef([inputRef]);\n  const dropdownRef = React.useRef<HTMLDivElement>(null);\n\n  const resetDropdown = () => {\n    setIsOpen(false);\n    setFocused(null);\n  };\n\n  const containerRef = useFocusOutsideRef(resetDropdown, [dropdownRef]);\n\n  useClickOutsideRef(resetDropdown, [], containerRef);\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      setIsOpen(!isOpen);\n      setKeyboardNavigated(true);\n    }\n  };\n\n  const handleValueSelect = (values: string[]) => {\n    setInput(values.join(', '));\n\n    if (props.multiSelect === true) {\n      props.onSelect(values);\n    } else if (props.multiSelect === false || props.multiSelect === undefined) {\n      props.onSelect(values[0]);\n    }\n\n    //don't close dropdown on item select if have custom action or multiselect\n    if (actionLabel || props.multiSelect) return;\n\n    if (keyboardNavigated) {\n      styledFieldRef.current?.focus({focusVisible: true} as any);\n    }\n    setIsOpen(false);\n    setFocused(null);\n  };\n\n  React.useEffect(() => {\n    if (props.value) {\n      if (props.multiSelect) {\n        setInput(props.value.join(', '));\n      } else if (props.multiSelect === false || props.multiSelect === undefined) {\n        setInput(props.value);\n      }\n    } else {\n      setInput('');\n    }\n  }, [props.value, props.multiSelect]);\n\n  React.useEffect(() => {\n    setIsLoading(false);\n  }, [input]);\n\n  React.useEffect(() => {\n    !isOpen && setKeyboardNavigated(false);\n  }, [isOpen]);\n\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n  const customSetIsOpen = (isOpen: boolean) => {\n    setIsOpen(isOpen);\n  };\n\n  const getDisplayItems = () => {\n    const values = input.split(',').map((val) => val.trim());\n    const listDisplayLabels = list.filter((item) => values.includes(item.value)).map((l) => l.displayLabel);\n    return listDisplayLabels.join(', ');\n  };\n\n  const handleBlur = (e: React.FocusEvent<HTMLDivElement>) => {\n    // @ts-ignore\n    if (!e.currentTarget.contains(e.relatedTarget)) {\n      onBlur && onBlur(e);\n    }\n  };\n\n  const cls = (isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? ' button ' : '').concat(className ? ` ${className}` : '');\n  \n  return (\n    <>\n      <DropdownContainer ref={containerRef}\n                aria-expanded={isOpen ? true : false}\n                aria-activedescendant={activeDescendant}\n                aria-controls={`${id}_dropdowncontent`}\n                role=\"listbox\"\n                aria-multiselectable={props.multiSelect}\n                isButton={isButton || false}\n                className={size ? size : ''}\n                readOnly={readOnly}\n                disabled={disabled}\n                margin={margin}\n                onBlur={handleBlur}\n                minWidth={minWidth}>\n        <DropdownInputFieldStyles\n          ref={styledFieldRef}\n          className={cls}\n          onMouseDown={defaultOnMouseDownHandler}\n          onClick={(e) => {\n            if (!readOnly && !disabled) {\n              e.stopPropagation();\n              setIsOpen(!isOpen);\n              if (isOpen) {\n                inputRef.current?.blur();\n              } else {\n                inputRef.current?.focus();\n              }\n            }\n          }}\n          tabIndex={disabled || readOnly ? -1 : 0}\n          disabled={disabled || false}\n          readOnly={readOnly || false}\n          isPlaceholder={!input}\n          placeholder={placeholder}\n          showValidationMessage={!!activeValidationMessage}\n          onKeyDown={handleKeyDown}\n          minWidth={minWidth}\n          {...rest}>\n          <DropdownInputField\n            ref={inputRef}\n            type=\"search\"\n            ellipsis={textOverflow == 'ellipsis'}\n            id={id}\n            data-testid={dataTestId}\n            readOnly\n            placeholder={placeholder}\n            value={getDisplayItems()}\n            className={size ? `${size} value` : 'value'}\n            tabIndex={-1}\n            disabled={disabled || false}\n          />\n          {!isOpen ? <TooltipOverflow position={overflowTooltipPosition} input={inputRef} withArrow={true} maxWidth=\"100%\" size={size} align='end'>\n            {getDisplayItems()}\n        </TooltipOverflow> : null}\n          {isLoading ? <LoadingIndicator size={Size.Small} color={COLORS.neutral_600}/> : null}\n          <div className={'icon dropdown-arrow'}>\n            {isOpen ? <SystemIcons.ArrowDropUp size=\"24px\" className={size ? size : ''}/> :\n              <SystemIcons.ArrowDropDown size=\"24px\" className={size ? size : ''}/>}\n          </div>\n        </DropdownInputFieldStyles>\n        {!readOnly && !disabled && (\n          <DropdownContent\n            ref={dropdownRef}\n            containerRef={containerRef}\n            onActiveDescendantChanged={(id) => setActiveDescendant(id)}\n            customizationProps={{\n              itemsType: itemsType,\n              action: action ?? (() => {\n              }),\n              actionLabel: actionLabel,\n              actionVariant: actionVariant,\n              actionDisabled: actionDisabled,\n              scrollable: scrollable,\n              onValueUpdate: handleValueSelect,\n              items: list,\n              multiSelect: props.multiSelect,\n              pinTopItem: pinTopItem,\n              maxHeight: maxHeight,\n              actionIcon: actionIcon,\n              actionLoading: actionLoading,\n            }}\n            ariaRolesType=\"input\"\n            focused={focused}\n            setFocused={setFocused}\n            size={size ?? Size.Small}\n            filter={''}\n            isOpen={isOpen}\n            setIsOpen={customSetIsOpen}\n            messageOnNoResults={messageOnNoResults ?? ''}\n            outline={keyboardNavigated}\n            isButton={isButton || false}\n            selectedValues={props.multiSelect ? props.value || [] : [props.value || '']}\n            setSelectedValues={handleValueSelect}\n            id={`${id}_dropdowncontent`}\n          />\n        )}\n      </DropdownContainer>\n      {activeValidationMessage && (\n        <ErrorMessage>\n          <SystemIcons.TechnicalWarning color={COLORS.critical_400}/>\n          <span>{activeValidationMessage}</span>\n        </ErrorMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage>\n          <SystemIcons.Information color={COLORS.neutral_600}/>\n          <span>{autofilledMessage}</span>\n        </AutofilledMessage>\n      )}\n    </>\n  );\n});\n\nexport default BasicDropdown;\n"],"mappings":"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"}
+{"version":3,"file":"BasicDropdown.js","names":["React","COLORS","SystemIcons","LoadingIndicator","DropdownContainer","DropdownInputFieldStyles","DropdownInputField","DropdownContent","AutofilledMessage","ErrorMessage","TooltipOverflow","Size","defaultOnMouseDownHandler","useClickOutsideRef","useFocusVisibleRef","useFocusOutsideRef","BasicDropdown","forwardRef","props","ref","id","list","placeholder","messageOnNoResults","itemsType","action","actionLabel","actionVariant","actionIcon","actionLoading","actionDisabled","pinTopItem","scrollable","maxHeight","disabled","readOnly","isButton","activeValidationMessage","autofilledMessage","size","margin","minWidth","className","overflowTooltipPosition","onBlur","dataTestId","onSelect","textOverflow","rest","useState","isOpen","setIsOpen","activeDescendant","setActiveDescendant","isLoading","setIsLoading","input","setInput","focused","setFocused","keyboardNavigated","setKeyboardNavigated","inputRef","useRef","styledFieldRef","dropdownRef","resetDropdown","containerRef","handleKeyDown","e","key","handleValueSelect","values","join","multiSelect","undefined","current","focus","focusVisible","useEffect","value","useImperativeHandle","customSetIsOpen","getDisplayItems","split","map","val","trim","listDisplayLabels","filter","item","includes","l","displayLabel","handleBlur","currentTarget","contains","relatedTarget","cls","concat","stopPropagation","blur","Small","neutral_600","onValueUpdate","items","critical_400","disableSorting"],"sources":["../../src/Dropdown/BasicDropdown.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport {COLORS} from '../styles';\r\nimport {SystemIcons} from '../icons';\r\nimport {LoadingIndicator} from '../LoadingIndicator';\r\nimport {DropdownContainer, DropdownInputFieldStyles, DropdownInputField} from './CommonStyling';\r\nimport DropdownContent, {DropdownItem} from './DropdownContent';\r\nimport {AutofilledMessage, ErrorMessage} from '../InputFields';\r\nimport TooltipOverflow from '../Tooltips/TooltipOverflow';\r\nimport {Size, Testable} from '../types';\r\nimport {defaultOnMouseDownHandler, useClickOutsideRef, useFocusVisibleRef} from '../common';\r\nimport {useFocusOutsideRef} from '../common';\r\n\r\nexport interface BasicDropdownCommonProps extends Testable, Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect' | 'placeholder' | 'tabIndex' | 'onMouseDown' | 'onClick' | 'onKeyDown'>{\r\n  list: DropdownItem[];\r\n  itemsType?: 'normal' | 'checkbox' | 'radio';\r\n  action?: () => void;\r\n  actionLabel?: string;\r\n  actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined;\r\n  actionIcon?: React.ReactNode;\r\n  actionLoading?: boolean;\r\n  actionDisabled?: boolean;\r\n  pinTopItem?: boolean;\r\n  scrollable?: boolean;\r\n  maxHeight?: string;\r\n  placeholder?: string;\r\n  disableSorting?: boolean;\r\n  messageOnNoResults?: string;\r\n  disabled?: boolean;\r\n  readOnly?: boolean;\r\n  isButton?: boolean;\r\n  activeValidationMessage?: string;\r\n  autofilledMessage?: string;\r\n  size?: Size.Small | Size.Medium;\r\n  margin?: string;\r\n  minWidth?: string;\r\n  textOverflow?: 'ellipsis' | 'default';\r\n  overflowTooltipPosition?: 'top' | 'bottom';\r\n}\r\n\r\nexport type BasicDropdownMultiSelectProps = BasicDropdownCommonProps & {\r\n  multiSelect: true;\r\n  value?: string[];\r\n  onSelect: (value: string[]) => void;\r\n}\r\n\r\nexport type BasucDropdownSingleSelectProps = BasicDropdownCommonProps & {\r\n  multiSelect?: false;\r\n  value?: string;\r\n  onSelect: (value: string) => void;\r\n}\r\n\r\nexport type BasicDropdownProps = BasucDropdownSingleSelectProps | BasicDropdownMultiSelectProps;\r\n\r\nconst BasicDropdown = React.forwardRef((props: BasicDropdownProps, ref) => {\r\n  const {\r\n    id,\r\n    list,\r\n    placeholder,\r\n    messageOnNoResults,\r\n    itemsType = 'normal',\r\n    action,\r\n    actionLabel,\r\n    actionVariant,\r\n    actionIcon,\r\n    actionLoading,\r\n    actionDisabled,\r\n    pinTopItem,\r\n    scrollable = true,\r\n    maxHeight,\r\n    disabled,\r\n    readOnly,\r\n    isButton,\r\n    activeValidationMessage,\r\n    autofilledMessage,\r\n    size,\r\n    margin,\r\n    minWidth,\r\n    className,\r\n    overflowTooltipPosition,\r\n    onBlur,\r\n    dataTestId,\r\n    onSelect,\r\n    textOverflow = 'ellipsis',\r\n    ...rest\r\n  } = props;\r\n\r\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\r\n  const [activeDescendant, setActiveDescendant] = React.useState<string>();\r\n  const [isLoading, setIsLoading] = React.useState<boolean>(false);\r\n  const [input, setInput] = React.useState<string>('');\r\n  const [focused, setFocused] = React.useState<number | null>(null);\r\n  \r\n  const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\r\n\r\n  const inputRef = React.useRef<HTMLInputElement>(null);\r\n  const styledFieldRef = useFocusVisibleRef([inputRef]);\r\n  const dropdownRef = React.useRef<HTMLDivElement>(null);\r\n\r\n  const resetDropdown = () => {\r\n    setIsOpen(false);\r\n    setFocused(null);\r\n  };\r\n\r\n  const containerRef = useFocusOutsideRef(resetDropdown, [dropdownRef]);\r\n\r\n  useClickOutsideRef(resetDropdown, [], containerRef);\r\n\r\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\r\n    if (e.key === 'Enter' || e.key === ' ') {\r\n      setIsOpen(!isOpen);\r\n      setKeyboardNavigated(true);\r\n    }\r\n  };\r\n\r\n  const handleValueSelect = (values: string[]) => {\r\n    setInput(values.join(', '));\r\n\r\n    if (props.multiSelect === true) {\r\n      props.onSelect(values);\r\n    } else if (props.multiSelect === false || props.multiSelect === undefined) {\r\n      props.onSelect(values[0]);\r\n    }\r\n\r\n    //don't close dropdown on item select if have custom action or multiselect\r\n    if (actionLabel || props.multiSelect) return;\r\n\r\n    if (keyboardNavigated) {\r\n      styledFieldRef.current?.focus({focusVisible: true} as any);\r\n    }\r\n    setIsOpen(false);\r\n    setFocused(null);\r\n  };\r\n\r\n  React.useEffect(() => {\r\n    if (props.value) {\r\n      if (props.multiSelect) {\r\n        setInput(props.value.join(', '));\r\n      } else if (props.multiSelect === false || props.multiSelect === undefined) {\r\n        setInput(props.value);\r\n      }\r\n    } else {\r\n      setInput('');\r\n    }\r\n  }, [props.value, props.multiSelect]);\r\n\r\n  React.useEffect(() => {\r\n    setIsLoading(false);\r\n  }, [input]);\r\n\r\n  React.useEffect(() => {\r\n    !isOpen && setKeyboardNavigated(false);\r\n  }, [isOpen]);\r\n\r\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\r\n\r\n  const customSetIsOpen = (isOpen: boolean) => {\r\n    setIsOpen(isOpen);\r\n  };\r\n\r\n  const getDisplayItems = () => {\r\n    const values = input.split(',').map((val) => val.trim());\r\n    const listDisplayLabels = list.filter((item) => values.includes(item.value)).map((l) => l.displayLabel);\r\n    return listDisplayLabels.join(', ');\r\n  };\r\n\r\n  const handleBlur = (e: React.FocusEvent<HTMLDivElement>) => {\r\n    // @ts-ignore\r\n    if (!e.currentTarget.contains(e.relatedTarget)) {\r\n      onBlur && onBlur(e);\r\n    }\r\n  };\r\n\r\n  const cls = (isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? ' button ' : '').concat(className ? ` ${className}` : '');\r\n  \r\n  return (\r\n    <>\r\n      <DropdownContainer ref={containerRef}\r\n                aria-expanded={isOpen ? true : false}\r\n                aria-activedescendant={activeDescendant}\r\n                aria-controls={`${id}_dropdowncontent`}\r\n                role=\"listbox\"\r\n                aria-multiselectable={props.multiSelect}\r\n                isButton={isButton || false}\r\n                className={size ? size : ''}\r\n                readOnly={readOnly}\r\n                disabled={disabled}\r\n                margin={margin}\r\n                onBlur={handleBlur}\r\n                minWidth={minWidth}>\r\n        <DropdownInputFieldStyles\r\n          ref={styledFieldRef}\r\n          className={cls}\r\n          onMouseDown={defaultOnMouseDownHandler}\r\n          onClick={(e) => {\r\n            if (!readOnly && !disabled) {\r\n              e.stopPropagation();\r\n              setIsOpen(!isOpen);\r\n              if (isOpen) {\r\n                inputRef.current?.blur();\r\n              } else {\r\n                inputRef.current?.focus();\r\n              }\r\n            }\r\n          }}\r\n          tabIndex={disabled || readOnly ? -1 : 0}\r\n          disabled={disabled || false}\r\n          readOnly={readOnly || false}\r\n          isPlaceholder={!input}\r\n          showValidationMessage={!!activeValidationMessage}\r\n          onKeyDown={handleKeyDown}\r\n          minWidth={minWidth}\r\n          {...rest}>\r\n          <DropdownInputField\r\n            ref={inputRef}\r\n            type=\"search\"\r\n            ellipsis={textOverflow == 'ellipsis'}\r\n            id={id}\r\n            data-testid={dataTestId}\r\n            readOnly\r\n            placeholder={placeholder}\r\n            value={getDisplayItems()}\r\n            className={size ? `${size} value` : 'value'}\r\n            tabIndex={-1}\r\n            disabled={disabled || false}\r\n          />\r\n          {!isOpen ? <TooltipOverflow position={overflowTooltipPosition} input={inputRef} withArrow={true} maxWidth=\"100%\" size={size} align='end'>\r\n            {getDisplayItems()}\r\n        </TooltipOverflow> : null}\r\n          {isLoading ? <LoadingIndicator size={Size.Small} color={COLORS.neutral_600}/> : null}\r\n          <div className={'icon dropdown-arrow'}>\r\n            {isOpen ? <SystemIcons.ArrowDropUp size=\"24px\" className={size ? size : ''}/> :\r\n              <SystemIcons.ArrowDropDown size=\"24px\" className={size ? size : ''}/>}\r\n          </div>\r\n        </DropdownInputFieldStyles>\r\n        {!readOnly && !disabled && (\r\n          <DropdownContent\r\n            ref={dropdownRef}\r\n            containerRef={containerRef}\r\n            onActiveDescendantChanged={(id) => setActiveDescendant(id)}\r\n            customizationProps={{\r\n              itemsType: itemsType,\r\n              action: action ?? (() => {\r\n              }),\r\n              actionLabel: actionLabel,\r\n              actionVariant: actionVariant,\r\n              actionDisabled: actionDisabled,\r\n              scrollable: scrollable,\r\n              onValueUpdate: handleValueSelect,\r\n              items: list,\r\n              multiSelect: props.multiSelect,\r\n              pinTopItem: pinTopItem,\r\n              maxHeight: maxHeight,\r\n              actionIcon: actionIcon,\r\n              actionLoading: actionLoading,\r\n            }}\r\n            ariaRolesType=\"input\"\r\n            focused={focused}\r\n            setFocused={setFocused}\r\n            size={size ?? Size.Small}\r\n            filter={''}\r\n            isOpen={isOpen}\r\n            setIsOpen={customSetIsOpen}\r\n            messageOnNoResults={messageOnNoResults ?? ''}\r\n            outline={keyboardNavigated}\r\n            isButton={isButton || false}\r\n            selectedValues={props.multiSelect ? props.value || [] : [props.value || '']}\r\n            setSelectedValues={handleValueSelect}\r\n            id={`${id}_dropdowncontent`}\r\n          />\r\n        )}\r\n      </DropdownContainer>\r\n      {activeValidationMessage && (\r\n        <ErrorMessage>\r\n          <SystemIcons.TechnicalWarning color={COLORS.critical_400}/>\r\n          <span>{activeValidationMessage}</span>\r\n        </ErrorMessage>\r\n      )}\r\n      {autofilledMessage && (\r\n        <AutofilledMessage>\r\n          <SystemIcons.Information color={COLORS.neutral_600}/>\r\n          <span>{autofilledMessage}</span>\r\n        </AutofilledMessage>\r\n      )}\r\n    </>\r\n  );\r\n});\r\n\r\nexport default BasicDropdown;\r\n"],"mappings":"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"}

package/dist/Dropdown/ChipDropdownInput.cjs

@@ -0,0 +1,431 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _index = require("../Chips/index");
+
+var _SystemIcons = require("../icons/systemicons/SystemIcons");
+
+var _styling = require("../InputFields/styling");
+
+var _styles = require("../styles");
+
+var _ChipStyles = require("../Chips/ChipStyles");
+
+var _types = require("../types");
+
+var _DropdownContent = _interopRequireDefault(require("./DropdownContent"));
+
+var _LoadingIndicator = require("../LoadingIndicator");
+
+var _typography = require("../styles/typography");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  display: inline-block;\n  width: 100%;\n  min-width: 344px;\n"])));
+
+var StyledChipInputContainer = (0, _styledComponents.default)(_ChipStyles.ChipInputContainer)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 2px 2px 2px 48px !important;\n  min-height: 56px;\n  max-height: 176px;\n  overflow-y: auto;\n  box-shadow: 0px 0px 0px 1px ", ";\n\n  .medium {\n    margin-right: 8px !important;\n  }\n  .SearchIcon {\n    position: absolute;\n    left: 18px;\n    top: 18px;\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n\n  &.invalid {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n    -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n  &.alreadyInOrganization {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n    -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.empty:hover {\n    -webkit-box-shadow: 0px 0px 0px 2px ", ";\n    -moz-box-shadow: 0px 0px 0px 2px ", ";\n    box-shadow: 0px 0px 0px 2px ", ";\n  }\n\n  &.inputHasFocus {\n    -webkit-box-shadow: 0px 0px 0px 2px ", ";\n    -moz-box-shadow: 0px 0px 0px 2px ", ";\n    box-shadow: 0px 0px 0px 2px ", ";\n  }\n  &:hover {\n    -webkit-box-shadow: 0px 0px 0px 2px ", ";\n    -moz-box-shadow: 0px 0px 0px 2px ", ";\n    box-shadow: 0px 0px 0px 2px ", ";\n  }\n"])), _styles.COLORS.neutral_400, _styles.COLORS.primary_100, _styles.COLORS.critical_400, _styles.COLORS.critical_400, _styles.COLORS.critical_400, _styles.COLORS.warning_400, _styles.COLORS.warning_400, _styles.COLORS.warning_400, _styles.COLORS.primary_600, _styles.COLORS.primary_600, _styles.COLORS.primary_600, _styles.COLORS.primary_800, _styles.COLORS.primary_800, _styles.COLORS.primary_800, _styles.COLORS.primary_700, _styles.COLORS.primary_700, _styles.COLORS.primary_700);
+
+var ChipInput = _styledComponents.default.input(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  height: 40px;\n  width: auto;\n  display: inline-flex;\n  border: none;\n  outline: none;\n  margin: 4px;\n\n  ", "\n  color: ", " !important;\n  background-color: inherit;\n"])), (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black), _styles.COLORS.black);
+
+var Loading = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  margin: auto 16px auto auto !important;\n  height: 20px;\n  div {\n    height: 20px;\n  }\n"])));
+
+var ChipDropdownInput = function ChipDropdownInput(_ref) {
+  var list = _ref.list,
+      onInputChange = _ref.onInputChange,
+      disableSorting = _ref.disableSorting,
+      messageOnNoResults = _ref.messageOnNoResults,
+      values = _ref.values,
+      inputId = _ref.inputId,
+      variants = _ref.variants,
+      placeholder = _ref.placeholder,
+      validationType = _ref.validationType,
+      validationMessage = _ref.validationMessage,
+      onValueChange = _ref.onValueChange,
+      suggestion = _ref.suggestion,
+      excludeIcon = _ref.excludeIcon,
+      loading = _ref.loading,
+      maxSelectedItems = _ref.maxSelectedItems;
+
+  // Initiate states
+  var _React$useState = React.useState([]),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+      givenList = _React$useState2[0],
+      setGivenList = _React$useState2[1];
+
+  var _React$useState3 = React.useState([]),
+      _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+      chips = _React$useState4[0],
+      setChips = _React$useState4[1];
+
+  var _React$useState5 = React.useState(''),
+      _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
+      value = _React$useState6[0],
+      setValue = _React$useState6[1];
+
+  var _React$useState7 = React.useState(false),
+      _React$useState8 = (0, _slicedToArray2.default)(_React$useState7, 2),
+      dropdownIsOpen = _React$useState8[0],
+      setDropdownIsOpen = _React$useState8[1];
+
+  var _React$useState9 = React.useState(),
+      _React$useState10 = (0, _slicedToArray2.default)(_React$useState9, 2),
+      currentSearchResult = _React$useState10[0],
+      setCurrentSearchResult = _React$useState10[1];
+
+  var _React$useState11 = React.useState(false),
+      _React$useState12 = (0, _slicedToArray2.default)(_React$useState11, 2),
+      restartFilter = _React$useState12[0],
+      setRestartFilter = _React$useState12[1];
+
+  var _React$useState13 = React.useState(null),
+      _React$useState14 = (0, _slicedToArray2.default)(_React$useState13, 2),
+      focused = _React$useState14[0],
+      setFocused = _React$useState14[1]; // Initiate refs
+
+
+  var chipInput = React.useRef();
+  var styledFieldRef = React.useRef(null);
+  /**
+   * Sets initial values for the chips.
+   */
+
+  React.useEffect(function () {
+    // Let's add initial chip values
+    setChips(values);
+  }, [values]);
+  /**
+   * Convert string[] to List[] if necessary
+   */
+
+  React.useEffect(function () {
+    if (typeof list[0] === 'string') {
+      var newList = list.map(function (e) {
+        return {
+          label: e,
+          value: e
+        };
+      });
+      setGivenList(newList);
+    } else {
+      setGivenList(list);
+    }
+  }, [list]);
+
+  var addChip = function addChip(newChip) {
+    // Let's add the chip
+    setChips([].concat((0, _toConsumableArray2.default)(chips), [newChip]));
+    onValueChange([].concat((0, _toConsumableArray2.default)(chips), [newChip])); // Let's clear the old value
+
+    chipInput.current.value = '';
+    setValue('');
+  };
+  /**
+   * Adds a chip to the chip list.
+   * @param event - Event handler from the key down event.
+   */
+
+
+  var onAddChip = function onAddChip(event) {
+    // Let's trigger only on enter, comma and space key press
+    if ((event.keyCode === 13 || event.keyCode === 32 || event.keyCode === 188) && value) {
+      if (!givenList.find(function (e) {
+        return e.value === value;
+      })) {
+        setValue('');
+        return;
+      } // Let's prevent default action - adding new key to the value
+
+
+      event.preventDefault();
+      addChip(value);
+    }
+
+    if (event.keyCode === 8 && value === '') {
+      onRemoveChip(chips.length - 1);
+    }
+  };
+  /**
+   * Removes a specific chip from the chip list.
+   * @param index - Index of the chip that needs to be removed.
+   * @param elementToAdd - Element which needs to be added in the deleted element place.
+   */
+
+
+  var onRemoveChip = function onRemoveChip(index, elementToAdd) {
+    // Let's copy the chips
+    var newChips = (0, _toConsumableArray2.default)(chips); // Let's delete the chip
+    // If necessary, let's replace it with a different chip
+
+    if (elementToAdd) {
+      newChips.splice(index, 1, elementToAdd);
+    } else {
+      newChips.splice(index, 1);
+    } // Let's update the chip list
+
+
+    setChips((0, _toConsumableArray2.default)(newChips));
+    onValueChange((0, _toConsumableArray2.default)(newChips));
+  };
+  /**
+   * Changes a status of the chip to edit.
+   * @param text - Text of the chip that is being edited.
+   * @param index - Index of the chip in the array.
+   */
+
+
+  var onEditChip = function onEditChip(text, index) {
+    // Let's check if we have to add value as a chip (in case we have entered something in the input field)
+    if (chipInput.current.value !== '') {
+      // Let's replace the chip
+      onRemoveChip(index, chipInput.current.value);
+    } else {
+      // Let's just remove the chip
+      onRemoveChip(index);
+    } // Let's update the text value of input field
+
+
+    chipInput.current.value = text;
+    setValue(text);
+  };
+
+  React.useEffect(function () {
+    var options = (0, _toConsumableArray2.default)(givenList);
+
+    if (!restartFilter && value !== '') {
+      options = options.filter(function (option) {
+        var _option$secondaryLabe;
+
+        return option.label.toUpperCase().indexOf(value.toUpperCase()) !== -1 || option.secondaryLabel && ((_option$secondaryLabe = option.secondaryLabel) === null || _option$secondaryLabe === void 0 ? void 0 : _option$secondaryLabe.toUpperCase().indexOf(value.toUpperCase())) !== -1;
+      });
+    }
+
+    if (!disableSorting) {
+      options = options.sort();
+    }
+
+    options = options.filter(function (o) {
+      return !chips.includes(o.value);
+    });
+    setCurrentSearchResult(options);
+  }, [value, givenList, chips]);
+
+  var handleValueUpdate = function handleValueUpdate(values) {
+    var _chipInput$current;
+
+    setRestartFilter(true);
+    addChip(values[0]);
+    chipInput === null || chipInput === void 0 ? void 0 : (_chipInput$current = chipInput.current) === null || _chipInput$current === void 0 ? void 0 : _chipInput$current.focus();
+  };
+
+  var handleKeyPress = function handleKeyPress(e) {
+    if (styledFieldRef !== null && styledFieldRef !== void 0 && styledFieldRef.current && styledFieldRef.current.contains(e.target)) {
+      if (e.keyCode === 13) {
+        var matches = currentSearchResult === null || currentSearchResult === void 0 ? void 0 : currentSearchResult.filter(function (c) {
+          return c.value.toLowerCase() === value.toLowerCase();
+        });
+
+        if ((matches === null || matches === void 0 ? void 0 : matches.length) === 1
+        /*&& onSelect*/
+        ) {
+          addChip(matches[0].value); //onSelect(chips);
+        } else if (e.target.value === (suggestion === null || suggestion === void 0 ? void 0 : suggestion.label)) {
+          addChip(e.target.value);
+        }
+
+        setDropdownIsOpen(!dropdownIsOpen);
+
+        if ((matches === null || matches === void 0 ? void 0 : matches.length) === 0) {
+          setValue('');
+        }
+      } else if (e.keyCode === 40) {
+        setDropdownIsOpen(!dropdownIsOpen);
+      }
+    }
+  };
+
+  var handleClickOutside = function handleClickOutside(e) {
+    if (styledFieldRef !== null && styledFieldRef !== void 0 && styledFieldRef.current && !styledFieldRef.current.contains(e.target)) {
+      if (dropdownIsOpen) {
+        setDropdownIsOpen(false);
+
+        if (!givenList.find(function (e) {
+          return e.value === value;
+        })) {
+          setValue('');
+        }
+      }
+    }
+  };
+
+  React.useEffect(function () {
+    document.addEventListener('keypress', handleKeyPress);
+    document.addEventListener('click', handleClickOutside);
+    return function () {
+      document.removeEventListener('keypress', handleKeyPress);
+      document.removeEventListener('click', handleClickOutside);
+    };
+  });
+  /**
+   * Return Chip Input component.
+   */
+
+  var dropdownItems = [];
+  if (currentSearchResult) dropdownItems = currentSearchResult.map(function (x) {
+    return {
+      value: x.value,
+      displayLabel: x.label,
+      noteLabel: x.secondaryLabel
+    };
+  });
+  if (suggestion && !chips.includes(suggestion.value)) dropdownItems = [{
+    value: suggestion.value,
+    displayLabel: suggestion.label,
+    noteLabel: suggestion.secondaryLabel,
+    suggestion: true
+  }].concat((0, _toConsumableArray2.default)(dropdownItems));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledChipInputContainer, {
+      id: inputId,
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        setDropdownIsOpen(true);
+        chipInput.current.focus();
+      },
+      className: validationType,
+      ref: styledFieldRef,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.Search, {
+        size: "24px",
+        className: "SearchIcon"
+      }), chips === null || chips === void 0 ? void 0 : chips.map(function (chip, index) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.InputChip, {
+          icon: givenList.find(function (l) {
+            return l.value === chip;
+          }) ? 'User' : undefined,
+          size: _types.Size.Medium,
+          variant: variants && variants !== null && variants !== void 0 && variants.length && variants[index] ? variants[index] : 'normal',
+          text: chip,
+          onRemove: function onRemove() {
+            return onRemoveChip(index);
+          },
+          onClick: function onClick() {
+            return onEditChip(chip, index);
+          }
+        }, "chip_".concat(index));
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ChipInput, {
+        type: "text",
+        onChange: function onChange(event) {
+          setValue(event.target.value);
+          setRestartFilter(false);
+          setDropdownIsOpen(true);
+
+          if (onInputChange) {
+            onInputChange(event.target.value || '');
+          }
+        },
+        onKeyDown: function onKeyDown(event) {
+          onAddChip(event);
+        },
+        placeholder: placeholder && (chips === null || chips === void 0 ? void 0 : chips.length) === 0 ? placeholder : '',
+        onClick: function onClick(e) {
+          e.stopPropagation();
+          setDropdownIsOpen(true);
+        },
+        onFocus: function onFocus() {
+          setDropdownIsOpen(true);
+        },
+        ref: chipInput
+      }), loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Loading, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicator.LoadingIndicator, {
+          size: _types.Size.Small,
+          color: _styles.COLORS.neutral_600
+        })
+      }) : null]
+    }), (!maxSelectedItems || maxSelectedItems && chips.length < maxSelectedItems) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropdownContent.default, {
+      customizationProps: {
+        action: function action() {},
+        pinTopItem: true,
+        itemsType: 'normal',
+        scrollable: true,
+        actionLabel: '',
+        multiSelect: false,
+        onValueUpdate: handleValueUpdate,
+        items: dropdownItems
+      },
+      focused: focused,
+      setFocused: setFocused,
+      hideOnClickOutside: false,
+      selectedValues: [],
+      messageOnNoResults: messageOnNoResults !== null && messageOnNoResults !== void 0 ? messageOnNoResults : '',
+      setSelectedValues: function setSelectedValues() {},
+      isOpen: dropdownIsOpen,
+      setIsOpen: setDropdownIsOpen,
+      filter: '',
+      isButton: false,
+      id: "".concat(inputId, "_dropdowncontent")
+    }), validationMessage && validationType === 'warning' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styling.WarningMessage, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.TechnicalWarning, {
+        size: "20px",
+        color: _styles.COLORS.critical_500
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: validationMessage
+      })]
+    }) : validationType === 'error' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styling.ErrorMessage, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.TechnicalWarning, {
+        size: "20px",
+        color: _styles.COLORS.critical_400
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: validationMessage
+      })]
+    })]
+  });
+};
+
+ChipDropdownInput.propTypes = {
+  list: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.shape({
+    label: _propTypes.default.string.isRequired,
+    secondaryLabel: _propTypes.default.string,
+    value: _propTypes.default.string.isRequired
+  })), _propTypes.default.arrayOf(_propTypes.default.string)]).isRequired,
+  onInputChange: _propTypes.default.func,
+  disableSorting: _propTypes.default.bool,
+  messageOnNoResults: _propTypes.default.string,
+  isButton: _propTypes.default.bool,
+  autofilledMessage: _propTypes.default.string,
+  suggestion: _propTypes.default.shape({
+    label: _propTypes.default.string.isRequired,
+    secondaryLabel: _propTypes.default.string,
+    value: _propTypes.default.string.isRequired
+  }),
+  excludeIcon: _propTypes.default.bool,
+  loading: _propTypes.default.bool,
+  maxSelectedItems: _propTypes.default.number
+};
+var _default = ChipDropdownInput;
+exports.default = _default;
+//# sourceMappingURL=ChipDropdownInput.cjs.map