@laerdal/life-react-components 2.2.1-dev.9.full → 2.3.0

package/dist/ChipsInput/ChipInputField.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChipInputField.cjs","names":["Wrapper","styled","div","Loading","ChipInputBoundItems","ChipInputContentContainer","scrollBarStyling","Size","Small","ChipInputEl","input","ComponentMStyling","ComponentTextStyle","Regular","COLORS","black","Italic","neutral_600","ChipInputContainer","neutral_400","white","ComponentSStyling","focusStyles","primary_700","primary_800","critical_500","neutral_100","neutral_300","ChipInputField","React","forwardRef","ref","inputId","items","disabled","placeholder","altPlaceholder","multiLine","size","Medium","validationMessage","loading","onRemoveItem","onInputValueChange","onInputKeyDown","onActivationChange","inputValue","required","onBlur","rest","containerRef","useRef","inputRef","useFocusVisibleRef","useImperativeHandle","current","useEffect","document","activeElement","scrollIntoView","block","inline","handleInputKeyDown","e","key","value","repeat","length","handleItemRemove","event","item","index","focus","focusVisible","detail","handleInputClear","handleContainerKeyDown","querySelectorAll","currentIndex","Array","from","indexOf","target","direction","cls","map","chip","icon","variant","States","Default","label","stopPropagation","marginLeft","critical_400"],"sources":["../../src/ChipsInput/ChipInputField.tsx"],"sourcesContent":["import React from 'react';\nimport {ChipItem} from './ChipInputTypes';\nimport {Size, States} from '../types';\nimport {InputChip} from '../Chips';\nimport {ErrorMessage} from '../InputFields/styling';\nimport {TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {\n  COLORS,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  focusStyles,\n  scrollBarStyling\n} from '../styles';\nimport styled from 'styled-components';\nimport {LoadingIndicator} from '../LoadingIndicator';\nimport {useFocusVisibleRef} from '../common';\nimport {IconButton} from '../Button';\nimport {SystemIcons} from '../icons';\n\nconst Wrapper = styled.div`\n  position: relative;\n`;\n\nconst Loading = styled.div`\n  height: 20px;\n  width: 20px;\n`;\n\nexport const ChipInputBoundItems = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n  flex: 1;\n  min-width: 40px;\n`;\n\nexport const ChipInputContentContainer = styled.div`\n  width: 100%;\n  background: transparent;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  column-gap: 8px;\n  margin-right: 6px;\n  padding-right: 10px;\n  padding-left: 16px;\n  flex-wrap: nowrap;\n  overflow-x: scroll;\n  min-height: 48px;\n\n  ${scrollBarStyling(Size.Small)}\n  ::-webkit-scrollbar:horizontal {\n    display: none;\n  }\n\n  .action-right:focus,\n  button:focus {\n    outline-offset: -4px !important;\n  }\n`;\n\nexport const ChipInputEl = styled.input`\n  border: none;\n  outline: none;\n\n  height: 40px;\n  min-width: 40px;\n  display: inline-flex;\n  flex: 1;\n  background: transparent;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n  color: ${COLORS.black} !important;\n\n  &::placeholder {\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n`;\n\nexport const ChipInputContainer = styled.div`\n  width: 100%;\n  height: auto;\n  border-radius: 4px;\n  margin-bottom: 4px;\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  cursor: text;\n  outline: none;\n  display: flex;\n  align-items: center;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  &.small {\n    padding: 0;\n    min-height: 48px;\n\n    ${ChipInputEl}::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.medium {\n    padding: 4px 0;\n    min-height: 56px;\n\n    ${ChipInputEl}::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.multiline.medium {\n    ${ChipInputContentContainer} {\n      max-height: calc(48px * 3);\n      flex-wrap: wrap;\n      overflow-y: auto;\n      overflow-x: unset;\n    }\n  }\n\n  &.focus-visible-within,\n  :focus {\n    ${focusStyles}\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_700};\n  }\n\n  &:focus-within {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n  }\n\n  &.invalid,\n  &.invalid:hover,\n  &.invalid:focus {\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_500};\n  }\n\n  &.disabled {\n    ${ChipInputContentContainer} {\n      pointer-events: none;\n    }\n\n    cursor: not-allowed;\n    box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n    outline: none;\n    color: ${COLORS.neutral_300} !important;\n  }\n`;\n\nexport interface ChipInputFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>,  'type' | 'id' | 'required' | 'tabIndex' | 'value' | 'onChange' | 'onKeyDown' | 'placeholder' | 'onClick' | 'disabled' | 'size'> {\n  inputId: string;\n  items: ChipItem[];\n  disabled?: boolean;\n  placeholder?: string;\n  altPlaceholder?: string;\n  multiLine?: boolean;\n  size?: Size.Large | Size.Medium | Size.Small;\n  loading?: boolean;\n  required?: boolean;\n\n  validationMessage?: string;\n\n  onRemoveItem: (item: ChipItem, index: number) => void;\n  inputValue: string;\n  onInputValueChange: (value: string) => void;\n  onInputKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n  onActivationChange?: (active: boolean) => void;\n}\n\nexport const ChipInputField = React.forwardRef<HTMLInputElement, ChipInputFieldProps>(\n  (\n    {\n      inputId,\n      items,\n      disabled = false,\n      placeholder,\n      altPlaceholder,\n      multiLine = true,\n      size = Size.Medium,\n      validationMessage,\n      loading,\n      onRemoveItem,\n      onInputValueChange,\n      onInputKeyDown,\n      onActivationChange,\n      inputValue,\n      required,\n      onBlur,\n      ...rest\n    },\n    ref,\n  ) => {\n    const containerRef = React.useRef<HTMLDivElement>(null);\n    const inputRef = useFocusVisibleRef([containerRef]);\n    \n    React.useImperativeHandle(ref, () => inputRef.current, [inputRef])\n\n    /**\n     * Scroll container to last item on change\n     * */\n    React.useEffect(() => {\n      if (inputRef.current && document.activeElement === inputRef.current) {\n        inputRef.current.scrollIntoView({\n          block: 'nearest',\n          inline: 'nearest',\n        });\n      }\n    }, [containerRef, inputRef, items]);\n\n    /**\n     * Remove last cheap on backspace\n     * */\n    const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (e.key === 'Backspace' && !inputRef.current?.value && !e.repeat && items.length > 0) {\n        onRemoveItem(items[items.length - 1], items.length - 1);\n      } else {\n        onInputKeyDown(e);\n      }\n    };\n\n    const handleItemRemove = (event: any, item: ChipItem, index: number) => {\n      onRemoveItem(item, index);\n      inputRef.current?.focus({focusVisible: event.detail !== 1} as any);\n    };\n\n    const handleInputClear = (e: any) => {\n      onInputValueChange('');\n      inputRef.current?.focus({focusVisible: e?.detail !== 1} as any);\n    };\n\n    const handleContainerKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n      if (!containerRef.current || (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight')) return;\n\n      const items = containerRef.current.querySelectorAll('[tabindex=\"0\"]') as NodeListOf<HTMLElement>;\n      const currentIndex = Array.from(items).indexOf(e.target as any);\n      const direction = e.key === 'ArrowLeft' ? -1 : 1;\n      const item = items[currentIndex + direction];\n      item?.focus({focusVisible: true} as any);\n\n      onActivationChange && onActivationChange(false);\n    };\n\n    const cls = `${multiLine ? 'multiline' : ''} ${validationMessage ? 'invalid' : ''} ${size} ${loading ? 'loading' : ''} ${disabled ? 'disabled' : ''}`;\n\n    return (\n      <Wrapper onBlur={onBlur}>\n        <ChipInputContainer\n          data-testid=\"chip-input-container\"\n          ref={containerRef}\n          onKeyDown={handleContainerKeyDown}\n          onClick={() => !disabled && inputRef.current?.focus()}\n          className={cls}>\n          <ChipInputContentContainer>\n            {items?.map((chip: ChipItem, index: number) => (\n              <InputChip\n                key={`chip_${index}`}\n                icon={chip?.icon}\n                size={size}\n                disabled={chip.disabled || disabled}\n                variant={chip.variant || States.Default}\n                text={chip.label}\n                onRemove={(e) => handleItemRemove(e, chip, index)}\n              />\n            ))}\n            <ChipInputBoundItems>\n              <ChipInputEl\n                ref={inputRef}\n                type=\"text\"\n                id={inputId}\n                required={required}\n                tabIndex={disabled ? -1 : 0}\n                value={inputValue}\n                onChange={(e) => onInputValueChange(e.target.value)}\n                onKeyDown={handleInputKeyDown}\n                placeholder={items?.length === 0 ? placeholder : altPlaceholder || ''}\n                onClick={(e) => {\n                  e.stopPropagation();\n                  onActivationChange && onActivationChange(true);\n                }}\n                {...rest}\n              />\n              {inputValue && !disabled && (\n                <IconButton\n                  id={`clear-btn-${inputId}`}\n                  dataTestId={`clear-btn-${inputId}`}\n                  action={handleInputClear}\n                  ref={(ref) => {\n                    ref?.scrollIntoView({\n                      block: 'nearest',\n                      inline: 'nearest',\n                    });\n                  }}\n                  useTransparentBackground={true}\n                  shape={'circular'}\n                  style={{marginLeft: '-8px'}}\n                  focusOnClick={true}\n                  variant={'secondary'}>\n                  <SystemIcons.Clear/>\n                </IconButton>\n              )}\n\n              {loading && (\n                <Loading className={size}>\n                  <LoadingIndicator size={Size.Small} color={COLORS.neutral_600}/>\n                </Loading>\n              )}\n            </ChipInputBoundItems>\n          </ChipInputContentContainer>\n        </ChipInputContainer>\n        {validationMessage && (\n          <ErrorMessage>\n            <TechnicalWarning color={COLORS.critical_400}/>\n            <span>{validationMessage}</span>\n          </ErrorMessage>\n        )}\n      </Wrapper>\n    );\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"ChipInputField.cjs","names":["Wrapper","styled","div","Loading","ChipInputBoundItems","ChipInputContentContainer","scrollBarStyling","Size","Small","ChipInputEl","input","ComponentMStyling","ComponentTextStyle","Regular","COLORS","black","Italic","neutral_600","ChipInputContainer","neutral_400","white","ComponentSStyling","focusStyles","primary_700","primary_800","critical_500","neutral_100","neutral_300","ChipInputField","React","forwardRef","ref","inputId","items","disabled","placeholder","altPlaceholder","multiLine","size","Medium","validationMessage","loading","onRemoveItem","onInputValueChange","onInputKeyDown","onActivationChange","inputValue","required","onBlur","rest","containerRef","useRef","inputRef","useFocusVisibleRef","useImperativeHandle","current","useEffect","document","activeElement","scrollIntoView","block","inline","handleInputKeyDown","e","key","value","repeat","length","handleItemRemove","event","item","index","focus","focusVisible","detail","handleInputClear","handleContainerKeyDown","querySelectorAll","currentIndex","Array","from","indexOf","target","direction","cls","map","chip","icon","variant","States","Default","label","stopPropagation","marginLeft","critical_400"],"sources":["../../src/ChipsInput/ChipInputField.tsx"],"sourcesContent":["import React from 'react';\nimport {ChipItem} from './ChipInputTypes';\nimport {Size, States} from '../types';\nimport {InputChip} from '../Chips';\nimport {ErrorMessage} from '../InputFields/styling';\nimport {TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {\n  COLORS,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  focusStyles,\n  scrollBarStyling\n} from '../styles';\nimport styled from 'styled-components';\nimport {LoadingIndicator} from '../LoadingIndicator';\nimport {useFocusVisibleRef} from '../common';\nimport {IconButton} from '../Button';\nimport {SystemIcons} from '../icons';\n\nconst Wrapper = styled.div`\n  position: relative;\n`;\n\nconst Loading = styled.div`\n  height: 20px;\n  width: 20px;\n`;\n\nexport const ChipInputBoundItems = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n  flex: 1;\n  min-width: 40px;\n`;\n\nexport const ChipInputContentContainer = styled.div`\n  width: 100%;\n  background: transparent;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  column-gap: 8px;\n  margin-right: 6px;\n  padding-right: 10px;\n  padding-left: 16px;\n  flex-wrap: nowrap;\n  overflow-x: scroll;\n  min-height: 48px;\n\n  ${scrollBarStyling(Size.Small)}\n  ::-webkit-scrollbar:horizontal {\n    display: none;\n  }\n\n  .action-right:focus,\n  button:focus {\n    outline-offset: -4px !important;\n  }\n`;\n\nexport const ChipInputEl = styled.input`\n  border: none;\n  outline: none;\n\n  height: 40px;\n  min-width: 40px;\n  display: inline-flex;\n  flex: 1;\n  background: transparent;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n  color: ${COLORS.black} !important;\n\n  &::placeholder {\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n`;\n\nexport const ChipInputContainer = styled.div`\n  width: 100%;\n  height: auto;\n  border-radius: 4px;\n  margin: 4px 0px;\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  cursor: text;\n  outline: none;\n  display: flex;\n  align-items: center;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  &.small {\n    padding: 0;\n    min-height: 48px;\n\n    ${ChipInputEl}::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.medium {\n    padding: 4px 0;\n    min-height: 56px;\n\n    ${ChipInputEl}::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.multiline.medium {\n    ${ChipInputContentContainer} {\n      max-height: calc(48px * 3);\n      flex-wrap: wrap;\n      overflow-y: auto;\n      overflow-x: unset;\n    }\n  }\n\n  &.focus-visible-within,\n  :focus {\n    ${focusStyles}\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_700};\n  }\n\n  &:focus-within {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n  }\n\n  &.invalid,\n  &.invalid:hover,\n  &.invalid:focus {\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_500};\n  }\n\n  &.disabled {\n    ${ChipInputContentContainer} {\n      pointer-events: none;\n    }\n\n    cursor: not-allowed;\n    box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n    outline: none;\n    color: ${COLORS.neutral_300} !important;\n  }\n`;\n\nexport interface ChipInputFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>,  'type' | 'id' | 'required' | 'tabIndex' | 'value' | 'onChange' | 'onKeyDown' | 'placeholder' | 'onClick' | 'disabled' | 'size'> {\n  inputId: string;\n  items: ChipItem[];\n  disabled?: boolean;\n  placeholder?: string;\n  altPlaceholder?: string;\n  multiLine?: boolean;\n  size?: Size.Large | Size.Medium | Size.Small;\n  loading?: boolean;\n  required?: boolean;\n\n  validationMessage?: string;\n\n  onRemoveItem: (item: ChipItem, index: number) => void;\n  inputValue: string;\n  onInputValueChange: (value: string) => void;\n  onInputKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n  onActivationChange?: (active: boolean) => void;\n}\n\nexport const ChipInputField = React.forwardRef<HTMLInputElement, ChipInputFieldProps>(\n  (\n    {\n      inputId,\n      items,\n      disabled = false,\n      placeholder,\n      altPlaceholder,\n      multiLine = true,\n      size = Size.Medium,\n      validationMessage,\n      loading,\n      onRemoveItem,\n      onInputValueChange,\n      onInputKeyDown,\n      onActivationChange,\n      inputValue,\n      required,\n      onBlur,\n      ...rest\n    },\n    ref,\n  ) => {\n    const containerRef = React.useRef<HTMLDivElement>(null);\n    const inputRef = useFocusVisibleRef([containerRef]);\n    \n    React.useImperativeHandle(ref, () => inputRef.current, [inputRef])\n\n    /**\n     * Scroll container to last item on change\n     * */\n    React.useEffect(() => {\n      if (inputRef.current && document.activeElement === inputRef.current) {\n        inputRef.current.scrollIntoView({\n          block: 'nearest',\n          inline: 'nearest',\n        });\n      }\n    }, [containerRef, inputRef, items]);\n\n    /**\n     * Remove last cheap on backspace\n     * */\n    const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (e.key === 'Backspace' && !inputRef.current?.value && !e.repeat && items.length > 0) {\n        onRemoveItem(items[items.length - 1], items.length - 1);\n      } else {\n        onInputKeyDown(e);\n      }\n    };\n\n    const handleItemRemove = (event: any, item: ChipItem, index: number) => {\n      onRemoveItem(item, index);\n      inputRef.current?.focus({focusVisible: event.detail !== 1} as any);\n    };\n\n    const handleInputClear = (e: any) => {\n      onInputValueChange('');\n      inputRef.current?.focus({focusVisible: e?.detail !== 1} as any);\n    };\n\n    const handleContainerKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n      if (!containerRef.current || (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight')) return;\n\n      const items = containerRef.current.querySelectorAll('[tabindex=\"0\"]') as NodeListOf<HTMLElement>;\n      const currentIndex = Array.from(items).indexOf(e.target as any);\n      const direction = e.key === 'ArrowLeft' ? -1 : 1;\n      const item = items[currentIndex + direction];\n      item?.focus({focusVisible: true} as any);\n\n      onActivationChange && onActivationChange(false);\n    };\n\n    const cls = `${multiLine ? 'multiline' : ''} ${validationMessage ? 'invalid' : ''} ${size} ${loading ? 'loading' : ''} ${disabled ? 'disabled' : ''}`;\n\n    return (\n      <Wrapper onBlur={onBlur}>\n        <ChipInputContainer\n          data-testid=\"chip-input-container\"\n          ref={containerRef}\n          onKeyDown={handleContainerKeyDown}\n          onClick={() => !disabled && inputRef.current?.focus()}\n          className={cls}>\n          <ChipInputContentContainer>\n            {items?.map((chip: ChipItem, index: number) => (\n              <InputChip\n                key={`chip_${index}`}\n                icon={chip?.icon}\n                size={size}\n                disabled={chip.disabled || disabled}\n                variant={chip.variant || States.Default}\n                text={chip.label}\n                onRemove={(e) => handleItemRemove(e, chip, index)}\n              />\n            ))}\n            <ChipInputBoundItems>\n              <ChipInputEl\n                ref={inputRef}\n                type=\"text\"\n                id={inputId}\n                required={required}\n                tabIndex={disabled ? -1 : 0}\n                value={inputValue}\n                onChange={(e) => onInputValueChange(e.target.value)}\n                onKeyDown={handleInputKeyDown}\n                placeholder={items?.length === 0 ? placeholder : altPlaceholder || ''}\n                onClick={(e) => {\n                  e.stopPropagation();\n                  onActivationChange && onActivationChange(true);\n                }}\n                {...rest}\n              />\n              {inputValue && !disabled && (\n                <IconButton\n                  id={`clear-btn-${inputId}`}\n                  dataTestId={`clear-btn-${inputId}`}\n                  action={handleInputClear}\n                  ref={(ref) => {\n                    ref?.scrollIntoView({\n                      block: 'nearest',\n                      inline: 'nearest',\n                    });\n                  }}\n                  useTransparentBackground={true}\n                  shape={'circular'}\n                  style={{marginLeft: '-8px'}}\n                  focusOnClick={true}\n                  variant={'secondary'}>\n                  <SystemIcons.Clear/>\n                </IconButton>\n              )}\n\n              {loading && (\n                <Loading className={size}>\n                  <LoadingIndicator size={Size.Small} color={COLORS.neutral_600}/>\n                </Loading>\n              )}\n            </ChipInputBoundItems>\n          </ChipInputContentContainer>\n        </ChipInputContainer>\n        {validationMessage && (\n          <ErrorMessage>\n            <TechnicalWarning color={COLORS.critical_400}/>\n            <span>{validationMessage}</span>\n          </ErrorMessage>\n        )}\n      </Wrapper>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;AAAA;AAEA;AACA;AACA;AACA;AACA;AAQA;AACA;AACA;AACA;AACA;AAAqC;AAAA;AAAA;AAAA;AAAA;AAErC,IAAMA,OAAO,GAAGC,yBAAM,CAACC,GAAG,4GAEzB;AAED,IAAMC,OAAO,GAAGF,yBAAM,CAACC,GAAG,wHAGzB;AAEM,IAAME,mBAAmB,GAAGH,yBAAM,CAACC,GAAG,sMAO5C;AAAC;AAEK,IAAMG,yBAAyB,GAAGJ,yBAAM,CAACC,GAAG,+fAc/C,IAAAI,wBAAgB,EAACC,WAAI,CAACC,KAAK,CAAC,CAS/B;AAAC;AAEK,IAAMC,WAAW,GAAGR,yBAAM,CAACS,KAAK,6SAUnC,IAAAC,yBAAiB,EAACC,0BAAkB,CAACC,OAAO,EAAE,IAAI,CAAC,EAC5CC,cAAM,CAACC,KAAK,EAGjB,IAAAJ,yBAAiB,EAACC,0BAAkB,CAACI,MAAM,EAAEF,cAAM,CAACG,WAAW,CAAC,CAErE;AAAC;AAEK,IAAMC,kBAAkB,GAAGjB,yBAAM,CAACC,GAAG,kqCAKZY,cAAM,CAACK,WAAW,EAC5BL,cAAM,CAACM,KAAK,EAO9B,IAAAT,yBAAiB,EAACC,0BAAkB,CAACC,OAAO,EAAEC,cAAM,CAACC,KAAK,CAAC,EAKzDN,WAAW,EACT,IAAAY,yBAAiB,EAACT,0BAAkB,CAACI,MAAM,EAAEF,cAAM,CAACG,WAAW,CAAC,EAQlER,WAAW,EACT,IAAAE,yBAAiB,EAACC,0BAAkB,CAACI,MAAM,EAAEF,cAAM,CAACG,WAAW,CAAC,EAKlEZ,yBAAyB,EAUzBiB,mBAAW,EAIiBR,cAAM,CAACS,WAAW,EAIlBT,cAAM,CAACU,WAAW,EAMlBV,cAAM,CAACW,YAAY,EAI/CpB,yBAAyB,EAKGS,cAAM,CAACY,WAAW,EAEvCZ,cAAM,CAACa,WAAW,CAE9B;AAAC;AAsBK,IAAMC,cAAc,gBAAGC,cAAK,CAACC,UAAU,CAC5C,gBAoBEC,GAAG,EACA;EAAA,IAnBDC,OAAO,QAAPA,OAAO;IACPC,KAAK,QAALA,KAAK;IAAA,qBACLC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAChBC,WAAW,QAAXA,WAAW;IACXC,cAAc,QAAdA,cAAc;IAAA,sBACdC,SAAS;IAATA,SAAS,+BAAG,IAAI;IAAA,iBAChBC,IAAI;IAAJA,IAAI,0BAAG/B,WAAI,CAACgC,MAAM;IAClBC,iBAAiB,QAAjBA,iBAAiB;IACjBC,OAAO,QAAPA,OAAO;IACPC,YAAY,QAAZA,YAAY;IACZC,kBAAkB,QAAlBA,kBAAkB;IAClBC,cAAc,QAAdA,cAAc;IACdC,kBAAkB,QAAlBA,kBAAkB;IAClBC,UAAU,QAAVA,UAAU;IACVC,QAAQ,QAARA,QAAQ;IACRC,MAAM,QAANA,MAAM;IACHC,IAAI;EAIT,IAAMC,YAAY,GAAGrB,cAAK,CAACsB,MAAM,CAAiB,IAAI,CAAC;EACvD,IAAMC,QAAQ,GAAG,IAAAC,0BAAkB,EAAC,CAACH,YAAY,CAAC,CAAC;EAEnDrB,cAAK,CAACyB,mBAAmB,CAACvB,GAAG,EAAE;IAAA,OAAMqB,QAAQ,CAACG,OAAO;EAAA,GAAE,CAACH,QAAQ,CAAC,CAAC;;EAElE;AACJ;AACA;EACIvB,cAAK,CAAC2B,SAAS,CAAC,YAAM;IACpB,IAAIJ,QAAQ,CAACG,OAAO,IAAIE,QAAQ,CAACC,aAAa,KAAKN,QAAQ,CAACG,OAAO,EAAE;MACnEH,QAAQ,CAACG,OAAO,CAACI,cAAc,CAAC;QAC9BC,KAAK,EAAE,SAAS;QAChBC,MAAM,EAAE;MACV,CAAC,CAAC;IACJ;EACF,CAAC,EAAE,CAACX,YAAY,EAAEE,QAAQ,EAAEnB,KAAK,CAAC,CAAC;;EAEnC;AACJ;AACA;EACI,IAAM6B,kBAAkB,GAAG,SAArBA,kBAAkB,CAAIC,CAAwC,EAAK;IAAA;IACvE,IAAIA,CAAC,CAACC,GAAG,KAAK,WAAW,IAAI,uBAACZ,QAAQ,CAACG,OAAO,8CAAhB,kBAAkBU,KAAK,KAAI,CAACF,CAAC,CAACG,MAAM,IAAIjC,KAAK,CAACkC,MAAM,GAAG,CAAC,EAAE;MACtFzB,YAAY,CAACT,KAAK,CAACA,KAAK,CAACkC,MAAM,GAAG,CAAC,CAAC,EAAElC,KAAK,CAACkC,MAAM,GAAG,CAAC,CAAC;IACzD,CAAC,MAAM;MACLvB,cAAc,CAACmB,CAAC,CAAC;IACnB;EACF,CAAC;EAED,IAAMK,gBAAgB,GAAG,SAAnBA,gBAAgB,CAAIC,KAAU,EAAEC,IAAc,EAAEC,KAAa,EAAK;IAAA;IACtE7B,YAAY,CAAC4B,IAAI,EAAEC,KAAK,CAAC;IACzB,sBAAAnB,QAAQ,CAACG,OAAO,uDAAhB,mBAAkBiB,KAAK,CAAC;MAACC,YAAY,EAAEJ,KAAK,CAACK,MAAM,KAAK;IAAC,CAAC,CAAQ;EACpE,CAAC;EAED,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgB,CAAIZ,CAAM,EAAK;IAAA;IACnCpB,kBAAkB,CAAC,EAAE,CAAC;IACtB,sBAAAS,QAAQ,CAACG,OAAO,uDAAhB,mBAAkBiB,KAAK,CAAC;MAACC,YAAY,EAAE,CAAAV,CAAC,aAADA,CAAC,uBAADA,CAAC,CAAEW,MAAM,MAAK;IAAC,CAAC,CAAQ;EACjE,CAAC;EAED,IAAME,sBAAsB,GAAG,SAAzBA,sBAAsB,CAAIb,CAAsC,EAAK;IACzE,IAAI,CAACb,YAAY,CAACK,OAAO,IAAKQ,CAAC,CAACC,GAAG,KAAK,WAAW,IAAID,CAAC,CAACC,GAAG,KAAK,YAAa,EAAE;IAEhF,IAAM/B,KAAK,GAAGiB,YAAY,CAACK,OAAO,CAACsB,gBAAgB,CAAC,gBAAgB,CAA4B;IAChG,IAAMC,YAAY,GAAGC,KAAK,CAACC,IAAI,CAAC/C,KAAK,CAAC,CAACgD,OAAO,CAAClB,CAAC,CAACmB,MAAM,CAAQ;IAC/D,IAAMC,SAAS,GAAGpB,CAAC,CAACC,GAAG,KAAK,WAAW,GAAG,CAAC,CAAC,GAAG,CAAC;IAChD,IAAMM,IAAI,GAAGrC,KAAK,CAAC6C,YAAY,GAAGK,SAAS,CAAC;IAC5Cb,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEE,KAAK,CAAC;MAACC,YAAY,EAAE;IAAI,CAAC,CAAQ;IAExC5B,kBAAkB,IAAIA,kBAAkB,CAAC,KAAK,CAAC;EACjD,CAAC;EAED,IAAMuC,GAAG,aAAM/C,SAAS,GAAG,WAAW,GAAG,EAAE,cAAIG,iBAAiB,GAAG,SAAS,GAAG,EAAE,cAAIF,IAAI,cAAIG,OAAO,GAAG,SAAS,GAAG,EAAE,cAAIP,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAE;EAErJ,oBACE,sBAAC,OAAO;IAAC,MAAM,EAAEc,MAAO;IAAA,wBACtB,qBAAC,kBAAkB;MACjB,eAAY,sBAAsB;MAClC,GAAG,EAAEE,YAAa;MAClB,SAAS,EAAE0B,sBAAuB;MAClC,OAAO,EAAE;QAAA;QAAA,OAAM,CAAC1C,QAAQ,2BAAIkB,QAAQ,CAACG,OAAO,uDAAhB,mBAAkBiB,KAAK,EAAE;MAAA,CAAC;MACtD,SAAS,EAAEY,GAAI;MAAA,uBACf,sBAAC,yBAAyB;QAAA,WACvBnD,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEoD,GAAG,CAAC,UAACC,IAAc,EAAEf,KAAa;UAAA,oBACxC,qBAAC,gBAAS;YAER,IAAI,EAAEe,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEC,IAAK;YACjB,IAAI,EAAEjD,IAAK;YACX,QAAQ,EAAEgD,IAAI,CAACpD,QAAQ,IAAIA,QAAS;YACpC,OAAO,EAAEoD,IAAI,CAACE,OAAO,IAAIC,aAAM,CAACC,OAAQ;YACxC,IAAI,EAAEJ,IAAI,CAACK,KAAM;YACjB,QAAQ,EAAE,kBAAC5B,CAAC;cAAA,OAAKK,gBAAgB,CAACL,CAAC,EAAEuB,IAAI,EAAEf,KAAK,CAAC;YAAA;UAAC,kBANrCA,KAAK,EAOlB;QAAA,CACH,CAAC,eACF,sBAAC,mBAAmB;UAAA,wBAClB,qBAAC,WAAW;YACV,GAAG,EAAEnB,QAAS;YACd,IAAI,EAAC,MAAM;YACX,EAAE,EAAEpB,OAAQ;YACZ,QAAQ,EAAEe,QAAS;YACnB,QAAQ,EAAEb,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAE;YAC5B,KAAK,EAAEY,UAAW;YAClB,QAAQ,EAAE,kBAACiB,CAAC;cAAA,OAAKpB,kBAAkB,CAACoB,CAAC,CAACmB,MAAM,CAACjB,KAAK,CAAC;YAAA,CAAC;YACpD,SAAS,EAAEH,kBAAmB;YAC9B,WAAW,EAAE,CAAA7B,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEkC,MAAM,MAAK,CAAC,GAAGhC,WAAW,GAAGC,cAAc,IAAI,EAAG;YACtE,OAAO,EAAE,iBAAC2B,CAAC,EAAK;cACdA,CAAC,CAAC6B,eAAe,EAAE;cACnB/C,kBAAkB,IAAIA,kBAAkB,CAAC,IAAI,CAAC;YAChD;UAAE,GACEI,IAAI,EACR,EACDH,UAAU,IAAI,CAACZ,QAAQ,iBACtB,qBAAC,kBAAU;YACT,EAAE,sBAAeF,OAAO,CAAG;YAC3B,UAAU,sBAAeA,OAAO,CAAG;YACnC,MAAM,EAAE2C,gBAAiB;YACzB,GAAG,EAAE,aAAC5C,KAAG,EAAK;cACZA,KAAG,aAAHA,KAAG,uBAAHA,KAAG,CAAE4B,cAAc,CAAC;gBAClBC,KAAK,EAAE,SAAS;gBAChBC,MAAM,EAAE;cACV,CAAC,CAAC;YACJ,CAAE;YACF,wBAAwB,EAAE,IAAK;YAC/B,KAAK,EAAE,UAAW;YAClB,KAAK,EAAE;cAACgC,UAAU,EAAE;YAAM,CAAE;YAC5B,YAAY,EAAE,IAAK;YACnB,OAAO,EAAE,WAAY;YAAA,uBACrB,qBAAC,kBAAW,CAAC,KAAK;UAAE,EAEvB,EAEApD,OAAO,iBACN,qBAAC,OAAO;YAAC,SAAS,EAAEH,IAAK;YAAA,uBACvB,qBAAC,kCAAgB;cAAC,IAAI,EAAE/B,WAAI,CAACC,KAAM;cAAC,KAAK,EAAEM,cAAM,CAACG;YAAY;UAAE,EAEnE;QAAA,EACmB;MAAA;IACI,EACT,EACpBuB,iBAAiB,iBAChB,sBAAC,qBAAY;MAAA,wBACX,qBAAC,6BAAgB;QAAC,KAAK,EAAE1B,cAAM,CAACgF;MAAa,EAAE,eAC/C;QAAA,UAAOtD;MAAiB,EAAQ;IAAA,EAEnC;EAAA,EACO;AAEd,CAAC,CACF;AAAC;AAAA;EAxKAR,OAAO;EACPC,KAAK;EACLC,QAAQ;EACRC,WAAW;EACXC,cAAc;EACdC,SAAS;EAETI,OAAO;EACPM,QAAQ;EAERP,iBAAiB;EAEjBE,YAAY;EACZI,UAAU;EACVH,kBAAkB;EAClBC,cAAc;EACdC,kBAAkB;AAAA"}

package/dist/ChipsInput/ChipInputField.js

@@ -24,7 +24,7 @@ var Loading = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplate
 export var ChipInputBoundItems = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n  flex: 1;\n  min-width: 40px;\n"])));
 export var ChipInputContentContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 100%;\n  background: transparent;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  column-gap: 8px;\n  margin-right: 6px;\n  padding-right: 10px;\n  padding-left: 16px;\n  flex-wrap: nowrap;\n  overflow-x: scroll;\n  min-height: 48px;\n\n  ", "\n  ::-webkit-scrollbar:horizontal {\n    display: none;\n  }\n\n  .action-right:focus,\n  button:focus {\n    outline-offset: -4px !important;\n  }\n"])), scrollBarStyling(Size.Small));
 export var ChipInputEl = styled.input(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  border: none;\n  outline: none;\n\n  height: 40px;\n  min-width: 40px;\n  display: inline-flex;\n  flex: 1;\n  background: transparent;\n\n  ", "\n  color: ", " !important;\n\n  &::placeholder {\n    ", "\n  }\n"])), ComponentMStyling(ComponentTextStyle.Regular, null), COLORS.black, ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600));
-export var ChipInputContainer = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: auto;\n  border-radius: 4px;\n  margin-bottom: 4px;\n  box-shadow: inset 0 0 0 1px ", ";\n  background-color: ", ";\n  box-sizing: border-box;\n  cursor: text;\n  outline: none;\n  display: flex;\n  align-items: center;\n\n  ", "\n  &.small {\n    padding: 0;\n    min-height: 48px;\n\n    ", "::placeholder {\n      ", "\n    }\n  }\n\n  &.medium {\n    padding: 4px 0;\n    min-height: 56px;\n\n    ", "::placeholder {\n      ", "\n    }\n  }\n\n  &.multiline.medium {\n    ", " {\n      max-height: calc(48px * 3);\n      flex-wrap: wrap;\n      overflow-y: auto;\n      overflow-x: unset;\n    }\n  }\n\n  &.focus-visible-within,\n  :focus {\n    ", "\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &:focus-within {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.invalid,\n  &.invalid:hover,\n  &.invalid:focus {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.disabled {\n    ", " {\n      pointer-events: none;\n    }\n\n    cursor: not-allowed;\n    box-shadow: inset 0 0 0 1px ", ";\n    outline: none;\n    color: ", " !important;\n  }\n"])), COLORS.neutral_400, COLORS.white, ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ChipInputEl, ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600), ChipInputEl, ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600), ChipInputContentContainer, focusStyles, COLORS.primary_700, COLORS.primary_800, COLORS.critical_500, ChipInputContentContainer, COLORS.neutral_100, COLORS.neutral_300);
+export var ChipInputContainer = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: auto;\n  border-radius: 4px;\n  margin: 4px 0px;\n  box-shadow: inset 0 0 0 1px ", ";\n  background-color: ", ";\n  box-sizing: border-box;\n  cursor: text;\n  outline: none;\n  display: flex;\n  align-items: center;\n\n  ", "\n  &.small {\n    padding: 0;\n    min-height: 48px;\n\n    ", "::placeholder {\n      ", "\n    }\n  }\n\n  &.medium {\n    padding: 4px 0;\n    min-height: 56px;\n\n    ", "::placeholder {\n      ", "\n    }\n  }\n\n  &.multiline.medium {\n    ", " {\n      max-height: calc(48px * 3);\n      flex-wrap: wrap;\n      overflow-y: auto;\n      overflow-x: unset;\n    }\n  }\n\n  &.focus-visible-within,\n  :focus {\n    ", "\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &:focus-within {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.invalid,\n  &.invalid:hover,\n  &.invalid:focus {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.disabled {\n    ", " {\n      pointer-events: none;\n    }\n\n    cursor: not-allowed;\n    box-shadow: inset 0 0 0 1px ", ";\n    outline: none;\n    color: ", " !important;\n  }\n"])), COLORS.neutral_400, COLORS.white, ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ChipInputEl, ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600), ChipInputEl, ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600), ChipInputContentContainer, focusStyles, COLORS.primary_700, COLORS.primary_800, COLORS.critical_500, ChipInputContentContainer, COLORS.neutral_100, COLORS.neutral_300);
 export var ChipInputField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var inputId = _ref.inputId,
     items = _ref.items,

package/dist/ChipsInput/ChipInputField.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChipInputField.js","names":["React","Size","States","InputChip","ErrorMessage","TechnicalWarning","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","focusStyles","scrollBarStyling","styled","LoadingIndicator","useFocusVisibleRef","IconButton","SystemIcons","Wrapper","div","Loading","ChipInputBoundItems","ChipInputContentContainer","Small","ChipInputEl","input","Regular","black","Italic","neutral_600","ChipInputContainer","neutral_400","white","primary_700","primary_800","critical_500","neutral_100","neutral_300","ChipInputField","forwardRef","ref","inputId","items","disabled","placeholder","altPlaceholder","multiLine","size","Medium","validationMessage","loading","onRemoveItem","onInputValueChange","onInputKeyDown","onActivationChange","inputValue","required","onBlur","rest","containerRef","useRef","inputRef","useImperativeHandle","current","useEffect","document","activeElement","scrollIntoView","block","inline","handleInputKeyDown","e","key","value","repeat","length","handleItemRemove","event","item","index","focus","focusVisible","detail","handleInputClear","handleContainerKeyDown","querySelectorAll","currentIndex","Array","from","indexOf","target","direction","cls","map","chip","icon","variant","Default","label","stopPropagation","marginLeft","critical_400"],"sources":["../../src/ChipsInput/ChipInputField.tsx"],"sourcesContent":["import React from 'react';\nimport {ChipItem} from './ChipInputTypes';\nimport {Size, States} from '../types';\nimport {InputChip} from '../Chips';\nimport {ErrorMessage} from '../InputFields/styling';\nimport {TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {\n  COLORS,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  focusStyles,\n  scrollBarStyling\n} from '../styles';\nimport styled from 'styled-components';\nimport {LoadingIndicator} from '../LoadingIndicator';\nimport {useFocusVisibleRef} from '../common';\nimport {IconButton} from '../Button';\nimport {SystemIcons} from '../icons';\n\nconst Wrapper = styled.div`\n  position: relative;\n`;\n\nconst Loading = styled.div`\n  height: 20px;\n  width: 20px;\n`;\n\nexport const ChipInputBoundItems = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n  flex: 1;\n  min-width: 40px;\n`;\n\nexport const ChipInputContentContainer = styled.div`\n  width: 100%;\n  background: transparent;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  column-gap: 8px;\n  margin-right: 6px;\n  padding-right: 10px;\n  padding-left: 16px;\n  flex-wrap: nowrap;\n  overflow-x: scroll;\n  min-height: 48px;\n\n  ${scrollBarStyling(Size.Small)}\n  ::-webkit-scrollbar:horizontal {\n    display: none;\n  }\n\n  .action-right:focus,\n  button:focus {\n    outline-offset: -4px !important;\n  }\n`;\n\nexport const ChipInputEl = styled.input`\n  border: none;\n  outline: none;\n\n  height: 40px;\n  min-width: 40px;\n  display: inline-flex;\n  flex: 1;\n  background: transparent;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n  color: ${COLORS.black} !important;\n\n  &::placeholder {\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n`;\n\nexport const ChipInputContainer = styled.div`\n  width: 100%;\n  height: auto;\n  border-radius: 4px;\n  margin-bottom: 4px;\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  cursor: text;\n  outline: none;\n  display: flex;\n  align-items: center;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  &.small {\n    padding: 0;\n    min-height: 48px;\n\n    ${ChipInputEl}::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.medium {\n    padding: 4px 0;\n    min-height: 56px;\n\n    ${ChipInputEl}::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.multiline.medium {\n    ${ChipInputContentContainer} {\n      max-height: calc(48px * 3);\n      flex-wrap: wrap;\n      overflow-y: auto;\n      overflow-x: unset;\n    }\n  }\n\n  &.focus-visible-within,\n  :focus {\n    ${focusStyles}\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_700};\n  }\n\n  &:focus-within {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n  }\n\n  &.invalid,\n  &.invalid:hover,\n  &.invalid:focus {\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_500};\n  }\n\n  &.disabled {\n    ${ChipInputContentContainer} {\n      pointer-events: none;\n    }\n\n    cursor: not-allowed;\n    box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n    outline: none;\n    color: ${COLORS.neutral_300} !important;\n  }\n`;\n\nexport interface ChipInputFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>,  'type' | 'id' | 'required' | 'tabIndex' | 'value' | 'onChange' | 'onKeyDown' | 'placeholder' | 'onClick' | 'disabled' | 'size'> {\n  inputId: string;\n  items: ChipItem[];\n  disabled?: boolean;\n  placeholder?: string;\n  altPlaceholder?: string;\n  multiLine?: boolean;\n  size?: Size.Large | Size.Medium | Size.Small;\n  loading?: boolean;\n  required?: boolean;\n\n  validationMessage?: string;\n\n  onRemoveItem: (item: ChipItem, index: number) => void;\n  inputValue: string;\n  onInputValueChange: (value: string) => void;\n  onInputKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n  onActivationChange?: (active: boolean) => void;\n}\n\nexport const ChipInputField = React.forwardRef<HTMLInputElement, ChipInputFieldProps>(\n  (\n    {\n      inputId,\n      items,\n      disabled = false,\n      placeholder,\n      altPlaceholder,\n      multiLine = true,\n      size = Size.Medium,\n      validationMessage,\n      loading,\n      onRemoveItem,\n      onInputValueChange,\n      onInputKeyDown,\n      onActivationChange,\n      inputValue,\n      required,\n      onBlur,\n      ...rest\n    },\n    ref,\n  ) => {\n    const containerRef = React.useRef<HTMLDivElement>(null);\n    const inputRef = useFocusVisibleRef([containerRef]);\n    \n    React.useImperativeHandle(ref, () => inputRef.current, [inputRef])\n\n    /**\n     * Scroll container to last item on change\n     * */\n    React.useEffect(() => {\n      if (inputRef.current && document.activeElement === inputRef.current) {\n        inputRef.current.scrollIntoView({\n          block: 'nearest',\n          inline: 'nearest',\n        });\n      }\n    }, [containerRef, inputRef, items]);\n\n    /**\n     * Remove last cheap on backspace\n     * */\n    const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (e.key === 'Backspace' && !inputRef.current?.value && !e.repeat && items.length > 0) {\n        onRemoveItem(items[items.length - 1], items.length - 1);\n      } else {\n        onInputKeyDown(e);\n      }\n    };\n\n    const handleItemRemove = (event: any, item: ChipItem, index: number) => {\n      onRemoveItem(item, index);\n      inputRef.current?.focus({focusVisible: event.detail !== 1} as any);\n    };\n\n    const handleInputClear = (e: any) => {\n      onInputValueChange('');\n      inputRef.current?.focus({focusVisible: e?.detail !== 1} as any);\n    };\n\n    const handleContainerKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n      if (!containerRef.current || (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight')) return;\n\n      const items = containerRef.current.querySelectorAll('[tabindex=\"0\"]') as NodeListOf<HTMLElement>;\n      const currentIndex = Array.from(items).indexOf(e.target as any);\n      const direction = e.key === 'ArrowLeft' ? -1 : 1;\n      const item = items[currentIndex + direction];\n      item?.focus({focusVisible: true} as any);\n\n      onActivationChange && onActivationChange(false);\n    };\n\n    const cls = `${multiLine ? 'multiline' : ''} ${validationMessage ? 'invalid' : ''} ${size} ${loading ? 'loading' : ''} ${disabled ? 'disabled' : ''}`;\n\n    return (\n      <Wrapper onBlur={onBlur}>\n        <ChipInputContainer\n          data-testid=\"chip-input-container\"\n          ref={containerRef}\n          onKeyDown={handleContainerKeyDown}\n          onClick={() => !disabled && inputRef.current?.focus()}\n          className={cls}>\n          <ChipInputContentContainer>\n            {items?.map((chip: ChipItem, index: number) => (\n              <InputChip\n                key={`chip_${index}`}\n                icon={chip?.icon}\n                size={size}\n                disabled={chip.disabled || disabled}\n                variant={chip.variant || States.Default}\n                text={chip.label}\n                onRemove={(e) => handleItemRemove(e, chip, index)}\n              />\n            ))}\n            <ChipInputBoundItems>\n              <ChipInputEl\n                ref={inputRef}\n                type=\"text\"\n                id={inputId}\n                required={required}\n                tabIndex={disabled ? -1 : 0}\n                value={inputValue}\n                onChange={(e) => onInputValueChange(e.target.value)}\n                onKeyDown={handleInputKeyDown}\n                placeholder={items?.length === 0 ? placeholder : altPlaceholder || ''}\n                onClick={(e) => {\n                  e.stopPropagation();\n                  onActivationChange && onActivationChange(true);\n                }}\n                {...rest}\n              />\n              {inputValue && !disabled && (\n                <IconButton\n                  id={`clear-btn-${inputId}`}\n                  dataTestId={`clear-btn-${inputId}`}\n                  action={handleInputClear}\n                  ref={(ref) => {\n                    ref?.scrollIntoView({\n                      block: 'nearest',\n                      inline: 'nearest',\n                    });\n                  }}\n                  useTransparentBackground={true}\n                  shape={'circular'}\n                  style={{marginLeft: '-8px'}}\n                  focusOnClick={true}\n                  variant={'secondary'}>\n                  <SystemIcons.Clear/>\n                </IconButton>\n              )}\n\n              {loading && (\n                <Loading className={size}>\n                  <LoadingIndicator size={Size.Small} color={COLORS.neutral_600}/>\n                </Loading>\n              )}\n            </ChipInputBoundItems>\n          </ChipInputContentContainer>\n        </ChipInputContainer>\n        {validationMessage && (\n          <ErrorMessage>\n            <TechnicalWarning color={COLORS.critical_400}/>\n            <span>{validationMessage}</span>\n          </ErrorMessage>\n        )}\n      </Wrapper>\n    );\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"ChipInputField.js","names":["React","Size","States","InputChip","ErrorMessage","TechnicalWarning","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","focusStyles","scrollBarStyling","styled","LoadingIndicator","useFocusVisibleRef","IconButton","SystemIcons","Wrapper","div","Loading","ChipInputBoundItems","ChipInputContentContainer","Small","ChipInputEl","input","Regular","black","Italic","neutral_600","ChipInputContainer","neutral_400","white","primary_700","primary_800","critical_500","neutral_100","neutral_300","ChipInputField","forwardRef","ref","inputId","items","disabled","placeholder","altPlaceholder","multiLine","size","Medium","validationMessage","loading","onRemoveItem","onInputValueChange","onInputKeyDown","onActivationChange","inputValue","required","onBlur","rest","containerRef","useRef","inputRef","useImperativeHandle","current","useEffect","document","activeElement","scrollIntoView","block","inline","handleInputKeyDown","e","key","value","repeat","length","handleItemRemove","event","item","index","focus","focusVisible","detail","handleInputClear","handleContainerKeyDown","querySelectorAll","currentIndex","Array","from","indexOf","target","direction","cls","map","chip","icon","variant","Default","label","stopPropagation","marginLeft","critical_400"],"sources":["../../src/ChipsInput/ChipInputField.tsx"],"sourcesContent":["import React from 'react';\nimport {ChipItem} from './ChipInputTypes';\nimport {Size, States} from '../types';\nimport {InputChip} from '../Chips';\nimport {ErrorMessage} from '../InputFields/styling';\nimport {TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {\n  COLORS,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  focusStyles,\n  scrollBarStyling\n} from '../styles';\nimport styled from 'styled-components';\nimport {LoadingIndicator} from '../LoadingIndicator';\nimport {useFocusVisibleRef} from '../common';\nimport {IconButton} from '../Button';\nimport {SystemIcons} from '../icons';\n\nconst Wrapper = styled.div`\n  position: relative;\n`;\n\nconst Loading = styled.div`\n  height: 20px;\n  width: 20px;\n`;\n\nexport const ChipInputBoundItems = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n  flex: 1;\n  min-width: 40px;\n`;\n\nexport const ChipInputContentContainer = styled.div`\n  width: 100%;\n  background: transparent;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  column-gap: 8px;\n  margin-right: 6px;\n  padding-right: 10px;\n  padding-left: 16px;\n  flex-wrap: nowrap;\n  overflow-x: scroll;\n  min-height: 48px;\n\n  ${scrollBarStyling(Size.Small)}\n  ::-webkit-scrollbar:horizontal {\n    display: none;\n  }\n\n  .action-right:focus,\n  button:focus {\n    outline-offset: -4px !important;\n  }\n`;\n\nexport const ChipInputEl = styled.input`\n  border: none;\n  outline: none;\n\n  height: 40px;\n  min-width: 40px;\n  display: inline-flex;\n  flex: 1;\n  background: transparent;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n  color: ${COLORS.black} !important;\n\n  &::placeholder {\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n`;\n\nexport const ChipInputContainer = styled.div`\n  width: 100%;\n  height: auto;\n  border-radius: 4px;\n  margin: 4px 0px;\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  cursor: text;\n  outline: none;\n  display: flex;\n  align-items: center;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  &.small {\n    padding: 0;\n    min-height: 48px;\n\n    ${ChipInputEl}::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.medium {\n    padding: 4px 0;\n    min-height: 56px;\n\n    ${ChipInputEl}::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.multiline.medium {\n    ${ChipInputContentContainer} {\n      max-height: calc(48px * 3);\n      flex-wrap: wrap;\n      overflow-y: auto;\n      overflow-x: unset;\n    }\n  }\n\n  &.focus-visible-within,\n  :focus {\n    ${focusStyles}\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_700};\n  }\n\n  &:focus-within {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n  }\n\n  &.invalid,\n  &.invalid:hover,\n  &.invalid:focus {\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_500};\n  }\n\n  &.disabled {\n    ${ChipInputContentContainer} {\n      pointer-events: none;\n    }\n\n    cursor: not-allowed;\n    box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n    outline: none;\n    color: ${COLORS.neutral_300} !important;\n  }\n`;\n\nexport interface ChipInputFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>,  'type' | 'id' | 'required' | 'tabIndex' | 'value' | 'onChange' | 'onKeyDown' | 'placeholder' | 'onClick' | 'disabled' | 'size'> {\n  inputId: string;\n  items: ChipItem[];\n  disabled?: boolean;\n  placeholder?: string;\n  altPlaceholder?: string;\n  multiLine?: boolean;\n  size?: Size.Large | Size.Medium | Size.Small;\n  loading?: boolean;\n  required?: boolean;\n\n  validationMessage?: string;\n\n  onRemoveItem: (item: ChipItem, index: number) => void;\n  inputValue: string;\n  onInputValueChange: (value: string) => void;\n  onInputKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n  onActivationChange?: (active: boolean) => void;\n}\n\nexport const ChipInputField = React.forwardRef<HTMLInputElement, ChipInputFieldProps>(\n  (\n    {\n      inputId,\n      items,\n      disabled = false,\n      placeholder,\n      altPlaceholder,\n      multiLine = true,\n      size = Size.Medium,\n      validationMessage,\n      loading,\n      onRemoveItem,\n      onInputValueChange,\n      onInputKeyDown,\n      onActivationChange,\n      inputValue,\n      required,\n      onBlur,\n      ...rest\n    },\n    ref,\n  ) => {\n    const containerRef = React.useRef<HTMLDivElement>(null);\n    const inputRef = useFocusVisibleRef([containerRef]);\n    \n    React.useImperativeHandle(ref, () => inputRef.current, [inputRef])\n\n    /**\n     * Scroll container to last item on change\n     * */\n    React.useEffect(() => {\n      if (inputRef.current && document.activeElement === inputRef.current) {\n        inputRef.current.scrollIntoView({\n          block: 'nearest',\n          inline: 'nearest',\n        });\n      }\n    }, [containerRef, inputRef, items]);\n\n    /**\n     * Remove last cheap on backspace\n     * */\n    const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (e.key === 'Backspace' && !inputRef.current?.value && !e.repeat && items.length > 0) {\n        onRemoveItem(items[items.length - 1], items.length - 1);\n      } else {\n        onInputKeyDown(e);\n      }\n    };\n\n    const handleItemRemove = (event: any, item: ChipItem, index: number) => {\n      onRemoveItem(item, index);\n      inputRef.current?.focus({focusVisible: event.detail !== 1} as any);\n    };\n\n    const handleInputClear = (e: any) => {\n      onInputValueChange('');\n      inputRef.current?.focus({focusVisible: e?.detail !== 1} as any);\n    };\n\n    const handleContainerKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n      if (!containerRef.current || (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight')) return;\n\n      const items = containerRef.current.querySelectorAll('[tabindex=\"0\"]') as NodeListOf<HTMLElement>;\n      const currentIndex = Array.from(items).indexOf(e.target as any);\n      const direction = e.key === 'ArrowLeft' ? -1 : 1;\n      const item = items[currentIndex + direction];\n      item?.focus({focusVisible: true} as any);\n\n      onActivationChange && onActivationChange(false);\n    };\n\n    const cls = `${multiLine ? 'multiline' : ''} ${validationMessage ? 'invalid' : ''} ${size} ${loading ? 'loading' : ''} ${disabled ? 'disabled' : ''}`;\n\n    return (\n      <Wrapper onBlur={onBlur}>\n        <ChipInputContainer\n          data-testid=\"chip-input-container\"\n          ref={containerRef}\n          onKeyDown={handleContainerKeyDown}\n          onClick={() => !disabled && inputRef.current?.focus()}\n          className={cls}>\n          <ChipInputContentContainer>\n            {items?.map((chip: ChipItem, index: number) => (\n              <InputChip\n                key={`chip_${index}`}\n                icon={chip?.icon}\n                size={size}\n                disabled={chip.disabled || disabled}\n                variant={chip.variant || States.Default}\n                text={chip.label}\n                onRemove={(e) => handleItemRemove(e, chip, index)}\n              />\n            ))}\n            <ChipInputBoundItems>\n              <ChipInputEl\n                ref={inputRef}\n                type=\"text\"\n                id={inputId}\n                required={required}\n                tabIndex={disabled ? -1 : 0}\n                value={inputValue}\n                onChange={(e) => onInputValueChange(e.target.value)}\n                onKeyDown={handleInputKeyDown}\n                placeholder={items?.length === 0 ? placeholder : altPlaceholder || ''}\n                onClick={(e) => {\n                  e.stopPropagation();\n                  onActivationChange && onActivationChange(true);\n                }}\n                {...rest}\n              />\n              {inputValue && !disabled && (\n                <IconButton\n                  id={`clear-btn-${inputId}`}\n                  dataTestId={`clear-btn-${inputId}`}\n                  action={handleInputClear}\n                  ref={(ref) => {\n                    ref?.scrollIntoView({\n                      block: 'nearest',\n                      inline: 'nearest',\n                    });\n                  }}\n                  useTransparentBackground={true}\n                  shape={'circular'}\n                  style={{marginLeft: '-8px'}}\n                  focusOnClick={true}\n                  variant={'secondary'}>\n                  <SystemIcons.Clear/>\n                </IconButton>\n              )}\n\n              {loading && (\n                <Loading className={size}>\n                  <LoadingIndicator size={Size.Small} color={COLORS.neutral_600}/>\n                </Loading>\n              )}\n            </ChipInputBoundItems>\n          </ChipInputContentContainer>\n        </ChipInputContainer>\n        {validationMessage && (\n          <ErrorMessage>\n            <TechnicalWarning color={COLORS.critical_400}/>\n            <span>{validationMessage}</span>\n          </ErrorMessage>\n        )}\n      </Wrapper>\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/Dropdown/BasicDropdown.cjs

@@ -17,11 +17,11 @@ var _LoadingIndicator = require("../LoadingIndicator");
 var _CommonStyling = require("./CommonStyling");
 var _DropdownContent = _interopRequireDefault(require("./DropdownContent"));
 var _styling = require("../InputFields/styling");
+var _TooltipOverflow = _interopRequireDefault(require("../Tooltips/TooltipOverflow"));
 var _types = require("../types");
 var _common = require("../common");
 var _jsxRuntime = require("react/jsx-runtime");
-var _BasicDropdown$propTy;
-var _excluded = ["id", "list", "placeholder", "messageOnNoResults", "itemsType", "action", "actionLabel", "actionVariant", "actionIcon", "actionLoading", "actionDisabled", "pinTopItem", "scrollable", "maxHeight", "disabled", "readOnly", "isButton", "activeValidationMessage", "autofilledMessage", "size", "margin", "minWidth", "className", "onBlur", "dataTestId", "onSelect"];
+var _excluded = ["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"];
 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; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -49,12 +49,16 @@ var BasicDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
     activeValidationMessage = props.activeValidationMessage,
     autofilledMessage = props.autofilledMessage,
     size = props.size,
-    margin = props.margin,
+    _props$margin = props.margin,
+    margin = _props$margin === void 0 ? '4px 0' : _props$margin,
     minWidth = props.minWidth,
     className = props.className,
+    overflowTooltipPosition = props.overflowTooltipPosition,
     onBlur = props.onBlur,
     dataTestId = props.dataTestId,
     onSelect = props.onSelect,
+    _props$textOverflow = props.textOverflow,
+    textOverflow = _props$textOverflow === void 0 ? 'ellipsis' : _props$textOverflow,
     rest = (0, _objectWithoutProperties2.default)(props, _excluded);
   var _React$useState = React.useState(false),
     _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
@@ -199,6 +203,7 @@ var BasicDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CommonStyling.InputField, {
           ref: inputRef,
           type: "search",
+          ellipsis: textOverflow == 'ellipsis',
           id: id,
           "data-testid": dataTestId,
           readOnly: true,
@@ -207,7 +212,15 @@ var BasicDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
           className: size ? "".concat(size, " value") : 'value',
           tabIndex: -1,
           disabled: disabled || false
-        }), isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicator.LoadingIndicator, {
+        }), !isOpen ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipOverflow.default, {
+          position: overflowTooltipPosition,
+          input: inputRef,
+          withArrow: true,
+          maxWidth: "100%",
+          size: size,
+          align: "end",
+          children: getDisplayItems()
+        }) : null, isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicator.LoadingIndicator, {
           size: _types.Size.Small,
           color: _styles.COLORS.neutral_600
         }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -270,7 +283,7 @@ var BasicDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
     })]
   });
 });
-BasicDropdown.propTypes = (_BasicDropdown$propTy = {
+BasicDropdown.propTypes = {
   list: _propTypes.default.array.isRequired,
   itemsType: _propTypes.default.oneOf(['normal', 'checkbox', 'radio']),
   action: _propTypes.default.func,
@@ -291,10 +304,12 @@ BasicDropdown.propTypes = (_BasicDropdown$propTy = {
   autofilledMessage: _propTypes.default.string,
   margin: _propTypes.default.string,
   minWidth: _propTypes.default.string,
+  textOverflow: _propTypes.default.oneOf(['ellipsis', 'default']),
+  overflowTooltipPosition: _propTypes.default.oneOf(['top', 'bottom']),
   multiSelect: _propTypes.default.oneOf([false]),
   value: _propTypes.default.string,
   onSelect: _propTypes.default.func.isRequired
-}, (0, _defineProperty2.default)(_BasicDropdown$propTy, "list", _propTypes.default.array.isRequired), (0, _defineProperty2.default)(_BasicDropdown$propTy, "itemsType", _propTypes.default.oneOf(['normal', 'checkbox', 'radio'])), _BasicDropdown$propTy);
+};
 var _default = BasicDropdown;
 exports.default = _default;
 //# sourceMappingURL=BasicDropdown.cjs.map

package/dist/Dropdown/BasicDropdown.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BasicDropdown.cjs","names":["BasicDropdown","React","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","onBlur","dataTestId","onSelect","rest","useState","isOpen","setIsOpen","activeDescendant","setActiveDescendant","isLoading","setIsLoading","input","setInput","focused","setFocused","keyboardNavigated","setKeyboardNavigated","inputRef","useRef","styledFieldRef","useFocusVisibleRef","dropdownRef","resetDropdown","containerRef","useFocusOutsideRef","useClickOutsideRef","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","defaultOnMouseDownHandler","stopPropagation","blur","Size","Small","COLORS","neutral_600","onValueUpdate","items","critical_400","disableSorting"],"sources":["../../src/Dropdown/BasicDropdown.tsx"],"sourcesContent":["import * as React from 'react';\nimport {COLORS} from '../styles';\nimport {ArrowDropDown, ArrowDropUp, Information, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {LoadingIndicator} from '../LoadingIndicator';\nimport {Dropdown, StyledField, InputField} from './CommonStyling';\nimport DropdownContent, {DropdownItem} from './DropdownContent';\nimport {AutofilledMessage, ErrorMessage} from '../InputFields/styling';\nimport {Size, Testable} from '../types';\nimport {defaultOnMouseDownHandler, useClickOutsideRef, useFocusVisibleRef} from '../common';\nimport {useFocusOutsideRef} from '../common';\n\ninterface 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}\n\ntype DropdownFilterMultiSelectProps = BasicDropdownCommonProps & {\n  multiSelect: true;\n  value?: string[];\n  onSelect: (value: string[]) => void;\n}\n\ntype DropdownFilterSingleSelectProps = BasicDropdownCommonProps & {\n  multiSelect?: false;\n  value?: string;\n  onSelect: (value: string) => void;\n}\n\ntype DropdownFilterProps = DropdownFilterSingleSelectProps | DropdownFilterMultiSelectProps;\n\nconst BasicDropdown = React.forwardRef((props: DropdownFilterProps, 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    onBlur,\n    dataTestId,\n    onSelect,\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  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      <Dropdown 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        <StyledField\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          <InputField\n            ref={inputRef}\n            type=\"search\"\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          {isLoading ? <LoadingIndicator size={Size.Small} color={COLORS.neutral_600}/> : null}\n          <div className={'icon dropdown-arrow'}>\n            {isOpen ? <ArrowDropUp size=\"24px\" className={size ? size : ''}/> :\n              <ArrowDropDown size=\"24px\" className={size ? size : ''}/>}\n          </div>\n        </StyledField>\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      </Dropdown>\n      {activeValidationMessage && (\n        <ErrorMessage>\n          <TechnicalWarning color={COLORS.critical_400}/>\n          <span>{activeValidationMessage}</span>\n        </ErrorMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage>\n          <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.cjs","names":["BasicDropdown","React","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","useFocusVisibleRef","dropdownRef","resetDropdown","containerRef","useFocusOutsideRef","useClickOutsideRef","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","defaultOnMouseDownHandler","stopPropagation","blur","Size","Small","COLORS","neutral_600","onValueUpdate","items","critical_400","disableSorting"],"sources":["../../src/Dropdown/BasicDropdown.tsx"],"sourcesContent":["import * as React from 'react';\nimport {COLORS} from '../styles';\nimport {ArrowDropDown, ArrowDropUp, Information, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {LoadingIndicator} from '../LoadingIndicator';\nimport {Dropdown, StyledField, InputField} from './CommonStyling';\nimport DropdownContent, {DropdownItem} from './DropdownContent';\nimport {AutofilledMessage, ErrorMessage} from '../InputFields/styling';\nimport TooltipOverflow from '../Tooltips/TooltipOverflow';\nimport {Size, Testable} from '../types';\nimport {defaultOnMouseDownHandler, useClickOutsideRef, useFocusVisibleRef} from '../common';\nimport {useFocusOutsideRef} from '../common';\n\ninterface 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\ntype DropdownFilterMultiSelectProps = BasicDropdownCommonProps & {\n  multiSelect: true;\n  value?: string[];\n  onSelect: (value: string[]) => void;\n}\n\ntype DropdownFilterSingleSelectProps = BasicDropdownCommonProps & {\n  multiSelect?: false;\n  value?: string;\n  onSelect: (value: string) => void;\n}\n\ntype DropdownFilterProps = DropdownFilterSingleSelectProps | DropdownFilterMultiSelectProps;\n\nconst BasicDropdown = React.forwardRef((props: DropdownFilterProps, 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 = '4px 0',\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      <Dropdown 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        <StyledField\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          <InputField\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 ? <ArrowDropUp size=\"24px\" className={size ? size : ''}/> :\n              <ArrowDropDown size=\"24px\" className={size ? size : ''}/>}\n          </div>\n        </StyledField>\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      </Dropdown>\n      {activeValidationMessage && (\n        <ErrorMessage>\n          <TechnicalWarning color={COLORS.critical_400}/>\n          <span>{activeValidationMessage}</span>\n        </ErrorMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage>\n          <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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"}

package/dist/Dropdown/BasicDropdown.d.ts

@@ -24,6 +24,8 @@ interface BasicDropdownCommonProps extends Testable, Omit<React.HTMLAttributes<H
     size?: Size.Small | Size.Medium;
     margin?: string;
     minWidth?: string;
+    textOverflow?: 'ellipsis' | 'default';
+    overflowTooltipPosition?: 'top' | 'bottom';
 }
 type DropdownFilterMultiSelectProps = BasicDropdownCommonProps & {
     multiSelect: true;

package/dist/Dropdown/BasicDropdown.js

@@ -2,8 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _pt from "prop-types";
-var _BasicDropdown$propTy;
-var _excluded = ["id", "list", "placeholder", "messageOnNoResults", "itemsType", "action", "actionLabel", "actionVariant", "actionIcon", "actionLoading", "actionDisabled", "pinTopItem", "scrollable", "maxHeight", "disabled", "readOnly", "isButton", "activeValidationMessage", "autofilledMessage", "size", "margin", "minWidth", "className", "onBlur", "dataTestId", "onSelect"];
+var _excluded = ["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"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import * as React from 'react';
@@ -13,12 +12,13 @@ import { LoadingIndicator } from '../LoadingIndicator';
 import { Dropdown, StyledField, InputField } from './CommonStyling';
 import DropdownContent from './DropdownContent';
 import { AutofilledMessage, ErrorMessage } from '../InputFields/styling';
+import TooltipOverflow from '../Tooltips/TooltipOverflow';
 import { Size } from '../types';
 import { defaultOnMouseDownHandler, useClickOutsideRef, useFocusVisibleRef } from '../common';
 import { useFocusOutsideRef } from '../common';
-import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 var BasicDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var id = props.id,
     list = props.list,
@@ -42,12 +42,16 @@ var BasicDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
     activeValidationMessage = props.activeValidationMessage,
     autofilledMessage = props.autofilledMessage,
     size = props.size,
-    margin = props.margin,
+    _props$margin = props.margin,
+    margin = _props$margin === void 0 ? '4px 0' : _props$margin,
     minWidth = props.minWidth,
     className = props.className,
+    overflowTooltipPosition = props.overflowTooltipPosition,
     onBlur = props.onBlur,
     dataTestId = props.dataTestId,
     onSelect = props.onSelect,
+    _props$textOverflow = props.textOverflow,
+    textOverflow = _props$textOverflow === void 0 ? 'ellipsis' : _props$textOverflow,
     rest = _objectWithoutProperties(props, _excluded);
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -192,6 +196,7 @@ var BasicDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
         children: [/*#__PURE__*/_jsx(InputField, {
           ref: inputRef,
           type: "search",
+          ellipsis: textOverflow == 'ellipsis',
           id: id,
           "data-testid": dataTestId,
           readOnly: true,
@@ -200,7 +205,15 @@ var BasicDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
           className: size ? "".concat(size, " value") : 'value',
           tabIndex: -1,
           disabled: disabled || false
-        }), isLoading ? /*#__PURE__*/_jsx(LoadingIndicator, {
+        }), !isOpen ? /*#__PURE__*/_jsx(TooltipOverflow, {
+          position: overflowTooltipPosition,
+          input: inputRef,
+          withArrow: true,
+          maxWidth: "100%",
+          size: size,
+          align: "end",
+          children: getDisplayItems()
+        }) : null, isLoading ? /*#__PURE__*/_jsx(LoadingIndicator, {
           size: Size.Small,
           color: COLORS.neutral_600
         }) : null, /*#__PURE__*/_jsx("div", {
@@ -263,7 +276,7 @@ var BasicDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
     })]
   });
 });
-BasicDropdown.propTypes = (_BasicDropdown$propTy = {
+BasicDropdown.propTypes = {
   list: _pt.array.isRequired,
   itemsType: _pt.oneOf(['normal', 'checkbox', 'radio']),
   action: _pt.func,
@@ -284,9 +297,11 @@ BasicDropdown.propTypes = (_BasicDropdown$propTy = {
   autofilledMessage: _pt.string,
   margin: _pt.string,
   minWidth: _pt.string,
+  textOverflow: _pt.oneOf(['ellipsis', 'default']),
+  overflowTooltipPosition: _pt.oneOf(['top', 'bottom']),
   multiSelect: _pt.oneOf([false]),
   value: _pt.string,
   onSelect: _pt.func.isRequired
-}, _defineProperty(_BasicDropdown$propTy, "list", _pt.array.isRequired), _defineProperty(_BasicDropdown$propTy, "itemsType", _pt.oneOf(['normal', 'checkbox', 'radio'])), _BasicDropdown$propTy);
+};
 export default BasicDropdown;
 //# sourceMappingURL=BasicDropdown.js.map

package/dist/Dropdown/BasicDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"BasicDropdown.js","names":["React","COLORS","ArrowDropDown","ArrowDropUp","Information","TechnicalWarning","LoadingIndicator","Dropdown","StyledField","InputField","DropdownContent","AutofilledMessage","ErrorMessage","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","onBlur","dataTestId","onSelect","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 {ArrowDropDown, ArrowDropUp, Information, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {LoadingIndicator} from '../LoadingIndicator';\nimport {Dropdown, StyledField, InputField} from './CommonStyling';\nimport DropdownContent, {DropdownItem} from './DropdownContent';\nimport {AutofilledMessage, ErrorMessage} from '../InputFields/styling';\nimport {Size, Testable} from '../types';\nimport {defaultOnMouseDownHandler, useClickOutsideRef, useFocusVisibleRef} from '../common';\nimport {useFocusOutsideRef} from '../common';\n\ninterface 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}\n\ntype DropdownFilterMultiSelectProps = BasicDropdownCommonProps & {\n  multiSelect: true;\n  value?: string[];\n  onSelect: (value: string[]) => void;\n}\n\ntype DropdownFilterSingleSelectProps = BasicDropdownCommonProps & {\n  multiSelect?: false;\n  value?: string;\n  onSelect: (value: string) => void;\n}\n\ntype DropdownFilterProps = DropdownFilterSingleSelectProps | DropdownFilterMultiSelectProps;\n\nconst BasicDropdown = React.forwardRef((props: DropdownFilterProps, 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    onBlur,\n    dataTestId,\n    onSelect,\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  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      <Dropdown 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        <StyledField\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          <InputField\n            ref={inputRef}\n            type=\"search\"\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          {isLoading ? <LoadingIndicator size={Size.Small} color={COLORS.neutral_600}/> : null}\n          <div className={'icon dropdown-arrow'}>\n            {isOpen ? <ArrowDropUp size=\"24px\" className={size ? size : ''}/> :\n              <ArrowDropDown size=\"24px\" className={size ? size : ''}/>}\n          </div>\n        </StyledField>\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      </Dropdown>\n      {activeValidationMessage && (\n        <ErrorMessage>\n          <TechnicalWarning color={COLORS.critical_400}/>\n          <span>{activeValidationMessage}</span>\n        </ErrorMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage>\n          <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","ArrowDropDown","ArrowDropUp","Information","TechnicalWarning","LoadingIndicator","Dropdown","StyledField","InputField","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 {ArrowDropDown, ArrowDropUp, Information, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {LoadingIndicator} from '../LoadingIndicator';\nimport {Dropdown, StyledField, InputField} from './CommonStyling';\nimport DropdownContent, {DropdownItem} from './DropdownContent';\nimport {AutofilledMessage, ErrorMessage} from '../InputFields/styling';\nimport TooltipOverflow from '../Tooltips/TooltipOverflow';\nimport {Size, Testable} from '../types';\nimport {defaultOnMouseDownHandler, useClickOutsideRef, useFocusVisibleRef} from '../common';\nimport {useFocusOutsideRef} from '../common';\n\ninterface 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\ntype DropdownFilterMultiSelectProps = BasicDropdownCommonProps & {\n  multiSelect: true;\n  value?: string[];\n  onSelect: (value: string[]) => void;\n}\n\ntype DropdownFilterSingleSelectProps = BasicDropdownCommonProps & {\n  multiSelect?: false;\n  value?: string;\n  onSelect: (value: string) => void;\n}\n\ntype DropdownFilterProps = DropdownFilterSingleSelectProps | DropdownFilterMultiSelectProps;\n\nconst BasicDropdown = React.forwardRef((props: DropdownFilterProps, 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 = '4px 0',\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      <Dropdown 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        <StyledField\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          <InputField\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 ? <ArrowDropUp size=\"24px\" className={size ? size : ''}/> :\n              <ArrowDropDown size=\"24px\" className={size ? size : ''}/>}\n          </div>\n        </StyledField>\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      </Dropdown>\n      {activeValidationMessage && (\n        <ErrorMessage>\n          <TechnicalWarning color={COLORS.critical_400}/>\n          <span>{activeValidationMessage}</span>\n        </ErrorMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage>\n          <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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"}