@laerdal/life-react-components 2.2.0 → 2.2.1-dev.10

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 = '4px 0',\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","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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"}

package/dist/Dropdown/CommonStyling.cjs

@@ -20,7 +20,7 @@ var Dropdown = _styledComponents.default.div(_templateObject || (_templateObject
 }, function (props) {
   return props.readOnly || props.disabled ? 'cursor: not-allowed;' : '';
 }, function (props) {
-  return props.margin ? "margin: ".concat(props.margin, ";") : '';
+  return props.margin ? "margin: ".concat(props.margin, ";") : 'margin-bottom: 4px;';
 }, _zIndexes.Z_INDEXES.focus, _styles.COLORS.primary_600, _styles.COLORS.primary_800);
 exports.Dropdown = Dropdown;
 var lockedState = (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  box-shadow: inset 0px 0px 0px 1px ", ";\n  color: ", ";\n  pointer-events: none;\n  cursor: not-allowed;\n\n  input {\n    color: ", " !important;\n  }\n\n  .dropdown-arrow {\n    color: ", " !important;\n  }\n"])), _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_600, _styles.COLORS.neutral_600, _styles.COLORS.neutral_300);

package/dist/Dropdown/CommonStyling.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CommonStyling.cjs","names":["Dropdown","styled","div","props","isButton","minWidth","readOnly","disabled","margin","Z_INDEXES","focus","COLORS","primary_600","primary_800","lockedState","css","neutral_100","neutral_300","neutral_600","disabledState","white","activeValidationMessage","critical_400","placeholderStyling","ComponentMStyling","ComponentTextStyle","Italic","InputField","input","black","StyledField","ComponentSStyling","Regular","neutral_400","ComponentXXSStyling","BREAKPOINTS","MEDIUM","ComponentXSStyling","isPlaceholder","undefined","primary_200","primary_300","Bold","neutral_800","neutral_20","showValidationMessage","CommonInteractionStyling","dropdown","focusStyles","ButtonDropdownContentStyling","TextButtonDropdownContent","TextButtonDropdownIcon","TextButtonDropdownArrow","TextButtonDropdownText","TextButtonDropdownWrapper","primary_20","primary_700","primary_100"],"sources":["../../src/Dropdown/CommonStyling.tsx"],"sourcesContent":["import styled, {css} from 'styled-components';\nimport {CommonInteractionStyling} from '../common';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {\n  ComponentMStyling,\n  ComponentLStyling,\n  ComponentSStyling,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles/typography';\nimport {Size} from '../types';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nexport const Dropdown = styled.div<{ isButton: boolean; readOnly?: boolean; disabled?: boolean; margin?: string; minWidth?: string }>`\n  display: inline-block;\n\n  ${(props) => !props.isButton && (props?.minWidth ? `width: 100%; min-width: ${props.minWidth};` : 'width: 100%; min-width: 344px;')}\n  ${(props) => (props.readOnly || props.disabled ? 'cursor: not-allowed;' : '')}\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n  .show {\n    display: block;\n  }\n\n  .value {\n    flex-grow: 1;\n  }\n\n  &:focus-within {\n    z-index: ${Z_INDEXES.focus};\n  }\n\n  input:hover + div {\n    color: ${COLORS.primary_600};\n  }\n\n  input:active + div {\n    color: ${COLORS.primary_800};\n  }\n\n\n`;\n\nconst lockedState = css`\n  background-color: ${COLORS.neutral_100};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\n  color: ${COLORS.neutral_600};\n  pointer-events: none;\n  cursor: not-allowed;\n\n  input {\n    color: ${COLORS.neutral_600} !important;\n  }\n\n  .dropdown-arrow {\n    color: ${COLORS.neutral_300} !important;\n  }\n`;\n\nconst disabledState = css`\n  background-color: ${COLORS.white};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_100};\n  color: ${COLORS.neutral_300};\n  pointer-events: none;\n  cursor: not-allowed;\n\n  .dropdown-arrow {\n    color: ${COLORS.neutral_300} !important;\n  }\n\n  input {\n    color: ${COLORS.neutral_300} !important;\n\n    ::placeholder {\n      color: ${COLORS.neutral_300} !important;\n    }\n  }\n`;\n\nconst activeValidationMessage = css`\n  box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n`;\n\nconst placeholderStyling = css`\n  ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n`;\n\nexport const InputField = styled.input`\n  border: none;\n  outline: none;\n  background-color: inherit;\n  cursor: pointer;\n  color: ${COLORS.black} !important;\n  padding: 0;\n  flex-grow: 1;\n  display: flex;\n  justify-content: center;\n  \n  ::placeholder {\n    color: ${COLORS.neutral_600};\n    font-style: italic;\n  }\n\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n`;\n\nexport const StyledField = styled.div<{ disabled: boolean; readOnly: boolean; showValidationMessage?: boolean; isPlaceholder?: boolean; fontSize?: string; minWidth?: string }>`\n  ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n\n  padding: 12px 16px;\n  height: 48px;\n  min-width: ${(props) => (props.minWidth ? `${props.minWidth}` : '344px')};\n  width: 100%;\n\n  background: ${COLORS.white};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n  box-sizing: border-box;\n  border-radius: 4px;\n  cursor: pointer;\n\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  position: relative;\n\n  input {\n    font-size: inherit;\n    line-height: inherit;\n    color: inherit;\n  }\n\n  &::placeholder {\n    ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n    padding: 16px;\n    height: 56px;\n\n    &::placeholder {\n      ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n    padding: 12px 16px;\n    height: 48px;\n\n    &::placeholder {\n      ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n    height: 56px;\n    padding: 16px;\n\n    &::placeholder {\n      ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  .dropdown-arrow {\n    pointer-events: none;\n    width: 24px;\n    height: 24px;\n    color: ${(props) => props.isPlaceholder ? COLORS.neutral_600 : undefined};\n  }\n\n  &:focus {\n    outline: 3px solid #ddd;\n  }\n\n  &:focus-within,\n  &.focus-visible-within {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &:hover:not(.action-within) {\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_200};\n\n    input {\n      ::placeholder {\n        color: ${COLORS.primary_600};\n      }\n    }\n\n    .dropdown-arrow {\n      color: ${COLORS.primary_600};\n    }\n\n    cursor: pointer;\n  }\n\n  &:active:not(.action-within) {\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_300};\n\n    input {\n      ::placeholder {\n        color: ${COLORS.primary_800};\n      }\n    }\n\n    .dropdown-arrow {\n      color: ${COLORS.primary_800};\n    }\n  }\n\n  &.button {\n    ${(props) => ComponentSStyling(ComponentTextStyle.Bold, props.disabled ? COLORS.neutral_300 : COLORS.neutral_600)}\n\n    box-sizing: border-box;\n    height: 32px;\n    padding: 0 8px;\n    width: initial;\n    min-width: initial;\n    border: none !important;\n    box-shadow: none;\n    border-radius: 4px;\n\n    &.expanded {\n      color: ${COLORS.neutral_800};\n      background: ${COLORS.neutral_20};\n    }\n  }\n\n\n  ${(props) => (props.disabled ? disabledState : '')}\n  ${(props) => (props.readOnly ? lockedState : '')}\n  ${(props) => (props.showValidationMessage ? activeValidationMessage : '')}\n  ${(props) => (props.isPlaceholder ? placeholderStyling : '')}\n\n  ${CommonInteractionStyling};\n\n  &.focus-visible,\n  &.focus-visible-within {\n    z-index: ${Z_INDEXES.dropdown + 1} !important;\n    ${focusStyles}\n  }\n`;\n\nexport const ButtonDropdownContentStyling = css`\n  min-width: 344px;\n`;\n\n\n\nexport const TextButtonDropdownContent = styled.div`\n  display: flex;\n  gap: 4px;\n  align-items: center;\n  box-sizing: border-box;\n  min-width: 64px;\n  min-height: 32px;\n  padding: 4px 8px;\n  border-radius: 4px;\n`;\n\nexport const TextButtonDropdownIcon = styled.div`\n  width: 24px;\n  height: 24px;\n`;\n\nexport const TextButtonDropdownArrow = styled.div`\n  width: 24px;\n  height: 24px;\n\n  svg {\n    pointer-events: none;\n  }\n`;\n\nexport const TextButtonDropdownText = styled.div`\n  flex: 1\n`;\n\nexport const TextButtonDropdownWrapper = styled.div`\n  box-sizing: border-box;\n  min-height: 48px;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  cursor: pointer;\n\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n\n  .expanded {\n    color: ${COLORS.neutral_800};\n\n    ${TextButtonDropdownContent} {\n      background: ${COLORS.neutral_20};\n    }\n  }\n\n  &:focus {\n    ${focusStyles}\n  }\n\n  &:hover:not(.disabled) {\n    ${TextButtonDropdownContent} {\n      background-color: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n    }\n  }\n\n  &:active:not(.disabled) {\n    ${TextButtonDropdownContent} {\n      background-color: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n    color: ${COLORS.neutral_300};\n  }\n\n}`;\n"],"mappings":"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"}
+{"version":3,"file":"CommonStyling.cjs","names":["Dropdown","styled","div","props","isButton","minWidth","readOnly","disabled","margin","Z_INDEXES","focus","COLORS","primary_600","primary_800","lockedState","css","neutral_100","neutral_300","neutral_600","disabledState","white","activeValidationMessage","critical_400","placeholderStyling","ComponentMStyling","ComponentTextStyle","Italic","InputField","input","black","StyledField","ComponentSStyling","Regular","neutral_400","ComponentXXSStyling","BREAKPOINTS","MEDIUM","ComponentXSStyling","isPlaceholder","undefined","primary_200","primary_300","Bold","neutral_800","neutral_20","showValidationMessage","CommonInteractionStyling","dropdown","focusStyles","ButtonDropdownContentStyling","TextButtonDropdownContent","TextButtonDropdownIcon","TextButtonDropdownArrow","TextButtonDropdownText","TextButtonDropdownWrapper","primary_20","primary_700","primary_100"],"sources":["../../src/Dropdown/CommonStyling.tsx"],"sourcesContent":["import styled, {css} from 'styled-components';\nimport {CommonInteractionStyling} from '../common';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {\n  ComponentMStyling,\n  ComponentLStyling,\n  ComponentSStyling,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles/typography';\nimport {Size} from '../types';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nexport const Dropdown = styled.div<{ isButton: boolean; readOnly?: boolean; disabled?: boolean; margin?: string; minWidth?: string }>`\n  display: inline-block;\n\n  ${(props) => !props.isButton && (props?.minWidth ? `width: 100%; min-width: ${props.minWidth};` : 'width: 100%; min-width: 344px;')}\n  ${(props) => (props.readOnly || props.disabled ? 'cursor: not-allowed;' : '')}\n  ${(props) => (props.margin ? `margin: ${props.margin};` : 'margin-bottom: 4px;')}\n  .show {\n    display: block;\n  }\n\n  .value {\n    flex-grow: 1;\n  }\n\n  &:focus-within {\n    z-index: ${Z_INDEXES.focus};\n  }\n\n  input:hover + div {\n    color: ${COLORS.primary_600};\n  }\n\n  input:active + div {\n    color: ${COLORS.primary_800};\n  }\n\n\n`;\n\nconst lockedState = css`\n  background-color: ${COLORS.neutral_100};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\n  color: ${COLORS.neutral_600};\n  pointer-events: none;\n  cursor: not-allowed;\n\n  input {\n    color: ${COLORS.neutral_600} !important;\n  }\n\n  .dropdown-arrow {\n    color: ${COLORS.neutral_300} !important;\n  }\n`;\n\nconst disabledState = css`\n  background-color: ${COLORS.white};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_100};\n  color: ${COLORS.neutral_300};\n  pointer-events: none;\n  cursor: not-allowed;\n\n  .dropdown-arrow {\n    color: ${COLORS.neutral_300} !important;\n  }\n\n  input {\n    color: ${COLORS.neutral_300} !important;\n\n    ::placeholder {\n      color: ${COLORS.neutral_300} !important;\n    }\n  }\n`;\n\nconst activeValidationMessage = css`\n  box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n`;\n\nconst placeholderStyling = css`\n  ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n`;\n\nexport const InputField = styled.input`\n  border: none;\n  outline: none;\n  background-color: inherit;\n  cursor: pointer;\n  color: ${COLORS.black} !important;\n  padding: 0;\n  flex-grow: 1;\n  display: flex;\n  justify-content: center;\n  \n  ::placeholder {\n    color: ${COLORS.neutral_600};\n    font-style: italic;\n  }\n\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n`;\n\nexport const StyledField = styled.div<{ disabled: boolean; readOnly: boolean; showValidationMessage?: boolean; isPlaceholder?: boolean; fontSize?: string; minWidth?: string }>`\n  ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n\n  padding: 12px 16px;\n  height: 48px;\n  min-width: ${(props) => (props.minWidth ? `${props.minWidth}` : '344px')};\n  width: 100%;\n\n  background: ${COLORS.white};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n  box-sizing: border-box;\n  border-radius: 4px;\n  cursor: pointer;\n\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  position: relative;\n\n  input {\n    font-size: inherit;\n    line-height: inherit;\n    color: inherit;\n  }\n\n  &::placeholder {\n    ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n    padding: 16px;\n    height: 56px;\n\n    &::placeholder {\n      ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n    padding: 12px 16px;\n    height: 48px;\n\n    &::placeholder {\n      ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n    height: 56px;\n    padding: 16px;\n\n    &::placeholder {\n      ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  .dropdown-arrow {\n    pointer-events: none;\n    width: 24px;\n    height: 24px;\n    color: ${(props) => props.isPlaceholder ? COLORS.neutral_600 : undefined};\n  }\n\n  &:focus {\n    outline: 3px solid #ddd;\n  }\n\n  &:focus-within,\n  &.focus-visible-within {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &:hover:not(.action-within) {\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_200};\n\n    input {\n      ::placeholder {\n        color: ${COLORS.primary_600};\n      }\n    }\n\n    .dropdown-arrow {\n      color: ${COLORS.primary_600};\n    }\n\n    cursor: pointer;\n  }\n\n  &:active:not(.action-within) {\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_300};\n\n    input {\n      ::placeholder {\n        color: ${COLORS.primary_800};\n      }\n    }\n\n    .dropdown-arrow {\n      color: ${COLORS.primary_800};\n    }\n  }\n\n  &.button {\n    ${(props) => ComponentSStyling(ComponentTextStyle.Bold, props.disabled ? COLORS.neutral_300 : COLORS.neutral_600)}\n\n    box-sizing: border-box;\n    height: 32px;\n    padding: 0 8px;\n    width: initial;\n    min-width: initial;\n    border: none !important;\n    box-shadow: none;\n    border-radius: 4px;\n\n    &.expanded {\n      color: ${COLORS.neutral_800};\n      background: ${COLORS.neutral_20};\n    }\n  }\n\n\n  ${(props) => (props.disabled ? disabledState : '')}\n  ${(props) => (props.readOnly ? lockedState : '')}\n  ${(props) => (props.showValidationMessage ? activeValidationMessage : '')}\n  ${(props) => (props.isPlaceholder ? placeholderStyling : '')}\n\n  ${CommonInteractionStyling};\n\n  &.focus-visible,\n  &.focus-visible-within {\n    z-index: ${Z_INDEXES.dropdown + 1} !important;\n    ${focusStyles}\n  }\n`;\n\nexport const ButtonDropdownContentStyling = css`\n  min-width: 344px;\n`;\n\n\n\nexport const TextButtonDropdownContent = styled.div`\n  display: flex;\n  gap: 4px;\n  align-items: center;\n  box-sizing: border-box;\n  min-width: 64px;\n  min-height: 32px;\n  padding: 4px 8px;\n  border-radius: 4px;\n`;\n\nexport const TextButtonDropdownIcon = styled.div`\n  width: 24px;\n  height: 24px;\n`;\n\nexport const TextButtonDropdownArrow = styled.div`\n  width: 24px;\n  height: 24px;\n\n  svg {\n    pointer-events: none;\n  }\n`;\n\nexport const TextButtonDropdownText = styled.div`\n  flex: 1\n`;\n\nexport const TextButtonDropdownWrapper = styled.div`\n  box-sizing: border-box;\n  min-height: 48px;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  cursor: pointer;\n\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n\n  .expanded {\n    color: ${COLORS.neutral_800};\n\n    ${TextButtonDropdownContent} {\n      background: ${COLORS.neutral_20};\n    }\n  }\n\n  &:focus {\n    ${focusStyles}\n  }\n\n  &:hover:not(.disabled) {\n    ${TextButtonDropdownContent} {\n      background-color: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n    }\n  }\n\n  &:active:not(.disabled) {\n    ${TextButtonDropdownContent} {\n      background-color: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n    color: ${COLORS.neutral_300};\n  }\n\n}`;\n"],"mappings":"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"}

package/dist/Dropdown/CommonStyling.js

@@ -10,7 +10,7 @@ export var Dropdown = styled.div(_templateObject || (_templateObject = _taggedTe
 }, function (props) {
   return props.readOnly || props.disabled ? 'cursor: not-allowed;' : '';
 }, function (props) {
-  return props.margin ? "margin: ".concat(props.margin, ";") : '';
+  return props.margin ? "margin: ".concat(props.margin, ";") : 'margin-bottom: 4px;';
 }, Z_INDEXES.focus, COLORS.primary_600, COLORS.primary_800);
 var lockedState = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  box-shadow: inset 0px 0px 0px 1px ", ";\n  color: ", ";\n  pointer-events: none;\n  cursor: not-allowed;\n\n  input {\n    color: ", " !important;\n  }\n\n  .dropdown-arrow {\n    color: ", " !important;\n  }\n"])), COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_600, COLORS.neutral_600, COLORS.neutral_300);
 var disabledState = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  box-shadow: inset 0px 0px 0px 1px ", ";\n  color: ", ";\n  pointer-events: none;\n  cursor: not-allowed;\n\n  .dropdown-arrow {\n    color: ", " !important;\n  }\n\n  input {\n    color: ", " !important;\n\n    ::placeholder {\n      color: ", " !important;\n    }\n  }\n"])), COLORS.white, COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_300, COLORS.neutral_300, COLORS.neutral_300);

package/dist/Dropdown/CommonStyling.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommonStyling.js","names":["styled","css","CommonInteractionStyling","BREAKPOINTS","COLORS","ComponentTextStyle","focusStyles","ComponentMStyling","ComponentSStyling","ComponentXSStyling","ComponentXXSStyling","Z_INDEXES","Dropdown","div","props","isButton","minWidth","readOnly","disabled","margin","focus","primary_600","primary_800","lockedState","neutral_100","neutral_300","neutral_600","disabledState","white","activeValidationMessage","critical_400","placeholderStyling","Italic","InputField","input","black","StyledField","Regular","neutral_400","MEDIUM","isPlaceholder","undefined","primary_200","primary_300","Bold","neutral_800","neutral_20","showValidationMessage","dropdown","ButtonDropdownContentStyling","TextButtonDropdownContent","TextButtonDropdownIcon","TextButtonDropdownArrow","TextButtonDropdownText","TextButtonDropdownWrapper","primary_20","primary_700","primary_100"],"sources":["../../src/Dropdown/CommonStyling.tsx"],"sourcesContent":["import styled, {css} from 'styled-components';\nimport {CommonInteractionStyling} from '../common';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {\n  ComponentMStyling,\n  ComponentLStyling,\n  ComponentSStyling,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles/typography';\nimport {Size} from '../types';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nexport const Dropdown = styled.div<{ isButton: boolean; readOnly?: boolean; disabled?: boolean; margin?: string; minWidth?: string }>`\n  display: inline-block;\n\n  ${(props) => !props.isButton && (props?.minWidth ? `width: 100%; min-width: ${props.minWidth};` : 'width: 100%; min-width: 344px;')}\n  ${(props) => (props.readOnly || props.disabled ? 'cursor: not-allowed;' : '')}\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n  .show {\n    display: block;\n  }\n\n  .value {\n    flex-grow: 1;\n  }\n\n  &:focus-within {\n    z-index: ${Z_INDEXES.focus};\n  }\n\n  input:hover + div {\n    color: ${COLORS.primary_600};\n  }\n\n  input:active + div {\n    color: ${COLORS.primary_800};\n  }\n\n\n`;\n\nconst lockedState = css`\n  background-color: ${COLORS.neutral_100};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\n  color: ${COLORS.neutral_600};\n  pointer-events: none;\n  cursor: not-allowed;\n\n  input {\n    color: ${COLORS.neutral_600} !important;\n  }\n\n  .dropdown-arrow {\n    color: ${COLORS.neutral_300} !important;\n  }\n`;\n\nconst disabledState = css`\n  background-color: ${COLORS.white};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_100};\n  color: ${COLORS.neutral_300};\n  pointer-events: none;\n  cursor: not-allowed;\n\n  .dropdown-arrow {\n    color: ${COLORS.neutral_300} !important;\n  }\n\n  input {\n    color: ${COLORS.neutral_300} !important;\n\n    ::placeholder {\n      color: ${COLORS.neutral_300} !important;\n    }\n  }\n`;\n\nconst activeValidationMessage = css`\n  box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n`;\n\nconst placeholderStyling = css`\n  ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n`;\n\nexport const InputField = styled.input`\n  border: none;\n  outline: none;\n  background-color: inherit;\n  cursor: pointer;\n  color: ${COLORS.black} !important;\n  padding: 0;\n  flex-grow: 1;\n  display: flex;\n  justify-content: center;\n  \n  ::placeholder {\n    color: ${COLORS.neutral_600};\n    font-style: italic;\n  }\n\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n`;\n\nexport const StyledField = styled.div<{ disabled: boolean; readOnly: boolean; showValidationMessage?: boolean; isPlaceholder?: boolean; fontSize?: string; minWidth?: string }>`\n  ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n\n  padding: 12px 16px;\n  height: 48px;\n  min-width: ${(props) => (props.minWidth ? `${props.minWidth}` : '344px')};\n  width: 100%;\n\n  background: ${COLORS.white};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n  box-sizing: border-box;\n  border-radius: 4px;\n  cursor: pointer;\n\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  position: relative;\n\n  input {\n    font-size: inherit;\n    line-height: inherit;\n    color: inherit;\n  }\n\n  &::placeholder {\n    ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n    padding: 16px;\n    height: 56px;\n\n    &::placeholder {\n      ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n    padding: 12px 16px;\n    height: 48px;\n\n    &::placeholder {\n      ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n    height: 56px;\n    padding: 16px;\n\n    &::placeholder {\n      ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  .dropdown-arrow {\n    pointer-events: none;\n    width: 24px;\n    height: 24px;\n    color: ${(props) => props.isPlaceholder ? COLORS.neutral_600 : undefined};\n  }\n\n  &:focus {\n    outline: 3px solid #ddd;\n  }\n\n  &:focus-within,\n  &.focus-visible-within {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &:hover:not(.action-within) {\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_200};\n\n    input {\n      ::placeholder {\n        color: ${COLORS.primary_600};\n      }\n    }\n\n    .dropdown-arrow {\n      color: ${COLORS.primary_600};\n    }\n\n    cursor: pointer;\n  }\n\n  &:active:not(.action-within) {\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_300};\n\n    input {\n      ::placeholder {\n        color: ${COLORS.primary_800};\n      }\n    }\n\n    .dropdown-arrow {\n      color: ${COLORS.primary_800};\n    }\n  }\n\n  &.button {\n    ${(props) => ComponentSStyling(ComponentTextStyle.Bold, props.disabled ? COLORS.neutral_300 : COLORS.neutral_600)}\n\n    box-sizing: border-box;\n    height: 32px;\n    padding: 0 8px;\n    width: initial;\n    min-width: initial;\n    border: none !important;\n    box-shadow: none;\n    border-radius: 4px;\n\n    &.expanded {\n      color: ${COLORS.neutral_800};\n      background: ${COLORS.neutral_20};\n    }\n  }\n\n\n  ${(props) => (props.disabled ? disabledState : '')}\n  ${(props) => (props.readOnly ? lockedState : '')}\n  ${(props) => (props.showValidationMessage ? activeValidationMessage : '')}\n  ${(props) => (props.isPlaceholder ? placeholderStyling : '')}\n\n  ${CommonInteractionStyling};\n\n  &.focus-visible,\n  &.focus-visible-within {\n    z-index: ${Z_INDEXES.dropdown + 1} !important;\n    ${focusStyles}\n  }\n`;\n\nexport const ButtonDropdownContentStyling = css`\n  min-width: 344px;\n`;\n\n\n\nexport const TextButtonDropdownContent = styled.div`\n  display: flex;\n  gap: 4px;\n  align-items: center;\n  box-sizing: border-box;\n  min-width: 64px;\n  min-height: 32px;\n  padding: 4px 8px;\n  border-radius: 4px;\n`;\n\nexport const TextButtonDropdownIcon = styled.div`\n  width: 24px;\n  height: 24px;\n`;\n\nexport const TextButtonDropdownArrow = styled.div`\n  width: 24px;\n  height: 24px;\n\n  svg {\n    pointer-events: none;\n  }\n`;\n\nexport const TextButtonDropdownText = styled.div`\n  flex: 1\n`;\n\nexport const TextButtonDropdownWrapper = styled.div`\n  box-sizing: border-box;\n  min-height: 48px;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  cursor: pointer;\n\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n\n  .expanded {\n    color: ${COLORS.neutral_800};\n\n    ${TextButtonDropdownContent} {\n      background: ${COLORS.neutral_20};\n    }\n  }\n\n  &:focus {\n    ${focusStyles}\n  }\n\n  &:hover:not(.disabled) {\n    ${TextButtonDropdownContent} {\n      background-color: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n    }\n  }\n\n  &:active:not(.disabled) {\n    ${TextButtonDropdownContent} {\n      background-color: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n    color: ${COLORS.neutral_300};\n  }\n\n}`;\n"],"mappings":"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"}
+{"version":3,"file":"CommonStyling.js","names":["styled","css","CommonInteractionStyling","BREAKPOINTS","COLORS","ComponentTextStyle","focusStyles","ComponentMStyling","ComponentSStyling","ComponentXSStyling","ComponentXXSStyling","Z_INDEXES","Dropdown","div","props","isButton","minWidth","readOnly","disabled","margin","focus","primary_600","primary_800","lockedState","neutral_100","neutral_300","neutral_600","disabledState","white","activeValidationMessage","critical_400","placeholderStyling","Italic","InputField","input","black","StyledField","Regular","neutral_400","MEDIUM","isPlaceholder","undefined","primary_200","primary_300","Bold","neutral_800","neutral_20","showValidationMessage","dropdown","ButtonDropdownContentStyling","TextButtonDropdownContent","TextButtonDropdownIcon","TextButtonDropdownArrow","TextButtonDropdownText","TextButtonDropdownWrapper","primary_20","primary_700","primary_100"],"sources":["../../src/Dropdown/CommonStyling.tsx"],"sourcesContent":["import styled, {css} from 'styled-components';\nimport {CommonInteractionStyling} from '../common';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {\n  ComponentMStyling,\n  ComponentLStyling,\n  ComponentSStyling,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles/typography';\nimport {Size} from '../types';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nexport const Dropdown = styled.div<{ isButton: boolean; readOnly?: boolean; disabled?: boolean; margin?: string; minWidth?: string }>`\n  display: inline-block;\n\n  ${(props) => !props.isButton && (props?.minWidth ? `width: 100%; min-width: ${props.minWidth};` : 'width: 100%; min-width: 344px;')}\n  ${(props) => (props.readOnly || props.disabled ? 'cursor: not-allowed;' : '')}\n  ${(props) => (props.margin ? `margin: ${props.margin};` : 'margin-bottom: 4px;')}\n  .show {\n    display: block;\n  }\n\n  .value {\n    flex-grow: 1;\n  }\n\n  &:focus-within {\n    z-index: ${Z_INDEXES.focus};\n  }\n\n  input:hover + div {\n    color: ${COLORS.primary_600};\n  }\n\n  input:active + div {\n    color: ${COLORS.primary_800};\n  }\n\n\n`;\n\nconst lockedState = css`\n  background-color: ${COLORS.neutral_100};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\n  color: ${COLORS.neutral_600};\n  pointer-events: none;\n  cursor: not-allowed;\n\n  input {\n    color: ${COLORS.neutral_600} !important;\n  }\n\n  .dropdown-arrow {\n    color: ${COLORS.neutral_300} !important;\n  }\n`;\n\nconst disabledState = css`\n  background-color: ${COLORS.white};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_100};\n  color: ${COLORS.neutral_300};\n  pointer-events: none;\n  cursor: not-allowed;\n\n  .dropdown-arrow {\n    color: ${COLORS.neutral_300} !important;\n  }\n\n  input {\n    color: ${COLORS.neutral_300} !important;\n\n    ::placeholder {\n      color: ${COLORS.neutral_300} !important;\n    }\n  }\n`;\n\nconst activeValidationMessage = css`\n  box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n`;\n\nconst placeholderStyling = css`\n  ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n`;\n\nexport const InputField = styled.input`\n  border: none;\n  outline: none;\n  background-color: inherit;\n  cursor: pointer;\n  color: ${COLORS.black} !important;\n  padding: 0;\n  flex-grow: 1;\n  display: flex;\n  justify-content: center;\n  \n  ::placeholder {\n    color: ${COLORS.neutral_600};\n    font-style: italic;\n  }\n\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n`;\n\nexport const StyledField = styled.div<{ disabled: boolean; readOnly: boolean; showValidationMessage?: boolean; isPlaceholder?: boolean; fontSize?: string; minWidth?: string }>`\n  ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n\n  padding: 12px 16px;\n  height: 48px;\n  min-width: ${(props) => (props.minWidth ? `${props.minWidth}` : '344px')};\n  width: 100%;\n\n  background: ${COLORS.white};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n  box-sizing: border-box;\n  border-radius: 4px;\n  cursor: pointer;\n\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  position: relative;\n\n  input {\n    font-size: inherit;\n    line-height: inherit;\n    color: inherit;\n  }\n\n  &::placeholder {\n    ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n    padding: 16px;\n    height: 56px;\n\n    &::placeholder {\n      ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n    padding: 12px 16px;\n    height: 48px;\n\n    &::placeholder {\n      ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n    height: 56px;\n    padding: 16px;\n\n    &::placeholder {\n      ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  .dropdown-arrow {\n    pointer-events: none;\n    width: 24px;\n    height: 24px;\n    color: ${(props) => props.isPlaceholder ? COLORS.neutral_600 : undefined};\n  }\n\n  &:focus {\n    outline: 3px solid #ddd;\n  }\n\n  &:focus-within,\n  &.focus-visible-within {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &:hover:not(.action-within) {\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_200};\n\n    input {\n      ::placeholder {\n        color: ${COLORS.primary_600};\n      }\n    }\n\n    .dropdown-arrow {\n      color: ${COLORS.primary_600};\n    }\n\n    cursor: pointer;\n  }\n\n  &:active:not(.action-within) {\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_300};\n\n    input {\n      ::placeholder {\n        color: ${COLORS.primary_800};\n      }\n    }\n\n    .dropdown-arrow {\n      color: ${COLORS.primary_800};\n    }\n  }\n\n  &.button {\n    ${(props) => ComponentSStyling(ComponentTextStyle.Bold, props.disabled ? COLORS.neutral_300 : COLORS.neutral_600)}\n\n    box-sizing: border-box;\n    height: 32px;\n    padding: 0 8px;\n    width: initial;\n    min-width: initial;\n    border: none !important;\n    box-shadow: none;\n    border-radius: 4px;\n\n    &.expanded {\n      color: ${COLORS.neutral_800};\n      background: ${COLORS.neutral_20};\n    }\n  }\n\n\n  ${(props) => (props.disabled ? disabledState : '')}\n  ${(props) => (props.readOnly ? lockedState : '')}\n  ${(props) => (props.showValidationMessage ? activeValidationMessage : '')}\n  ${(props) => (props.isPlaceholder ? placeholderStyling : '')}\n\n  ${CommonInteractionStyling};\n\n  &.focus-visible,\n  &.focus-visible-within {\n    z-index: ${Z_INDEXES.dropdown + 1} !important;\n    ${focusStyles}\n  }\n`;\n\nexport const ButtonDropdownContentStyling = css`\n  min-width: 344px;\n`;\n\n\n\nexport const TextButtonDropdownContent = styled.div`\n  display: flex;\n  gap: 4px;\n  align-items: center;\n  box-sizing: border-box;\n  min-width: 64px;\n  min-height: 32px;\n  padding: 4px 8px;\n  border-radius: 4px;\n`;\n\nexport const TextButtonDropdownIcon = styled.div`\n  width: 24px;\n  height: 24px;\n`;\n\nexport const TextButtonDropdownArrow = styled.div`\n  width: 24px;\n  height: 24px;\n\n  svg {\n    pointer-events: none;\n  }\n`;\n\nexport const TextButtonDropdownText = styled.div`\n  flex: 1\n`;\n\nexport const TextButtonDropdownWrapper = styled.div`\n  box-sizing: border-box;\n  min-height: 48px;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  cursor: pointer;\n\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n\n  .expanded {\n    color: ${COLORS.neutral_800};\n\n    ${TextButtonDropdownContent} {\n      background: ${COLORS.neutral_20};\n    }\n  }\n\n  &:focus {\n    ${focusStyles}\n  }\n\n  &:hover:not(.disabled) {\n    ${TextButtonDropdownContent} {\n      background-color: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n    }\n  }\n\n  &:active:not(.disabled) {\n    ${TextButtonDropdownContent} {\n      background-color: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n    color: ${COLORS.neutral_300};\n  }\n\n}`;\n"],"mappings":"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"}

package/dist/Dropdown/DropdownFilter.cjs

@@ -44,8 +44,7 @@ var DropdownFilter = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     size = _ref.size,
     disableFiltering = _ref.disableFiltering,
     buttonFontSize = _ref.buttonFontSize,
-    _ref$margin = _ref.margin,
-    margin = _ref$margin === void 0 ? '4px 0' : _ref$margin,
+    margin = _ref.margin,
     loading = _ref.loading,
     _onFocus = _ref.onFocus,
     _onBlur = _ref.onBlur,

package/dist/Dropdown/DropdownFilter.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownFilter.cjs","names":["DropdownFilter","React","forwardRef","ref","id","list","placeholder","onSelect","onInputChange","value","required","messageOnNoResults","disabled","readOnly","scrollable","activeValidationMessage","autofilledMessage","size","disableFiltering","buttonFontSize","margin","loading","onFocus","onBlur","dataTestId","rest","useState","isOpen","setIsOpen","input","setInput","activeDescendant","setActiveDescendant","restartFilter","setRestartFilter","selectedItem","setSelectedItem","selectedValues","setSelectedValues","focused","setFocused","inputFocused","setInputFocused","init","setInit","styledFieldRef","useFocusVisibleRef","inputRef","clearButtonRef","useRef","useActionWithin","useImperativeHandle","current","containerRef","useClickOutsideRef","useFocusOutsideRef","handleInputKeyDown","e","key","preventDefault","useEffect","length","val","item","find","a","displayLabel","undefined","handleInputClear","focus","focusVisible","detail","renderInput","stopPropagation","blur","defaultOnMouseDownHandler","Math","floor","random","target","marginLeft","Size","Small","COLORS","neutral_600","itemsType","multiSelect","action","onValueUpdate","values","items","critical_400"],"sources":["../../src/Dropdown/DropdownFilter.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 { StyledField, Dropdown, InputField } from './CommonStyling';\nimport DropdownContent, { DropdownItem } from './DropdownContent';\nimport { Size, Testable } from '../types';\nimport { AutofilledMessage, ErrorMessage } from '../InputFields';\nimport { defaultOnMouseDownHandler, useActionWithin, useClickOutsideRef, useFocusOutsideRef, useFocusVisibleRef } from '../common';\nimport { IconButton } from '../Button';\nimport { SystemIcons } from '../icons';\n\ninterface DropdownFilterProps extends Testable, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onSelect' | 'size' | 'list' | 'autoComplete' | 'type' | 'placeholder' | 'onKeyDown' | 'value' | 'onChange' | 'required' | 'tabIndex' | 'disabled' | 'readOnly'> {\n  list: DropdownItem[];\n  placeholder?: string;\n  \n  value?: string;\n  onSelect?: (value: string) => void;\n  onInputChange?: (input: string) => void;\n\n  required?: boolean;\n  disabled?: boolean;\n  readOnly?: boolean;\n  loading?: boolean;\n\n  disableFiltering?: boolean;\n\n  messageOnNoResults?: string;\n  activeValidationMessage?: string;\n  autofilledMessage?: string;\n  size?: Size.Small | Size.Medium;\n\n  buttonFontSize?: string;\n  margin?: string;\n  scrollable?: boolean;\n}\n\nconst DropdownFilter = React.forwardRef( ({\n                                            id,\n                                            list,\n                                            placeholder,\n                                            onSelect,\n                                            onInputChange,\n                                            value,\n                                            required,\n                                            messageOnNoResults,\n                                            disabled,\n                                            readOnly,\n                                            scrollable,\n                                            activeValidationMessage,\n                                            autofilledMessage,\n                                            size,\n                                            disableFiltering,\n                                            buttonFontSize,\n                                            margin = '4px 0',\n                                            loading,\n                                            onFocus,\n                                            onBlur,\n                                            dataTestId,\n                                            ...rest\n                                          }: DropdownFilterProps, ref) => {\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [input, setInput] = React.useState<string>();\n  const [activeDescendant, setActiveDescendant] = React.useState<string>();\n  const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n  const [selectedItem, setSelectedItem] = React.useState<DropdownItem>();\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [inputFocused, setInputFocused] = React.useState<boolean>(false);\n  const [init, setInit] = React.useState<boolean>(true);\n\n  const styledFieldRef = useFocusVisibleRef();\n  const inputRef = useFocusVisibleRef([styledFieldRef]);\n  const clearButtonRef = React.useRef<HTMLButtonElement>(null);\n\n  useActionWithin(styledFieldRef, input && !readOnly && !disabled ? [clearButtonRef] : []);\n\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n  const containerRef = useClickOutsideRef(\n    () => setIsOpen(false),\n    [],\n    useFocusOutsideRef(() => setIsOpen(false)),\n  );\n\n  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === 'Esc' || e.key === 'Escape') {\n      e.preventDefault();\n    }\n    if (e.key === 'ArrowDown' || e.key === 'Down' || e.key === 'ArrowUp' || e.key === 'Up') {\n      e.preventDefault();\n      if (!isOpen) {\n        setIsOpen(true);\n      }\n    }\n  };\n\n  React.useEffect(() => {\n    setInit(true);\n    setSelectedValues(!!value ? [value] : []);\n  }, [value]);\n\n  React.useEffect(() => {\n    if (selectedValues?.length) {\n      const val = selectedValues[0];\n      const item = list.find((a) => a.value === val);\n      setSelectedItem(item);\n      setInput(item?.displayLabel ?? item?.value ?? '');\n      onSelect && !init && onSelect(val);\n    } else {\n      setSelectedItem(undefined);\n      onSelect && !init && onSelect('');\n      setInput('');\n    }\n  }, [selectedValues]);\n\n  React.useEffect(() => {\n    if (!isOpen) {\n      if (!!selectedItem) {\n        setInput(selectedItem?.displayLabel ?? selectedItem?.value ?? '');\n      } else {\n        setInput('');\n      }\n    }\n\n    setRestartFilter(true);\n  }, [isOpen, selectedItem]);\n\n  const handleInputClear = (e: any) => {\n    setInput('');\n    setSelectedValues([]);\n    onSelect && onSelect('');\n    inputRef.current?.focus({ focusVisible: e?.detail !== 1 } as any);\n  };\n\n  const renderInput = () => {\n    return (\n      <StyledField\n        ref={styledFieldRef}\n        className={size ? size : ''}\n        onClick={(e: any) => {\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        disabled={disabled || false}\n        readOnly={readOnly || false}\n        isPlaceholder={!input}\n        fontSize={buttonFontSize}\n        showValidationMessage={!!activeValidationMessage}\n        onMouseDown={defaultOnMouseDownHandler}\n        data-testid={`otherdiv_${id}`}>\n        <InputField\n          id={id}\n          ref={inputRef}\n          autoComplete={'off-' + Math.floor(Math.random() * 999999999999)}\n          type=\"search\"\n          placeholder={inputFocused ? '' : placeholder}\n          onKeyDown={handleInputKeyDown}\n          value={input || ''}\n          onChange={(e: any) => {\n            if (!e.target.value) {\n              setSelectedValues([]);\n            }\n            if (!readOnly && !disabled && e.target.value !== input) {\n              setRestartFilter(false);\n              setIsOpen(true);\n              setInput(e.target.value);\n              if (onInputChange) {\n                onInputChange(e.target.value || '');\n              }\n            }\n          }}\n          onFocus={(e) => {\n            setInputFocused(true);\n            onFocus && onFocus(e);\n          }}\n          onBlur={(e) => {\n            setInputFocused(false);\n            onBlur && onBlur(e);\n          }}\n          required={required}\n          tabIndex={disabled || readOnly ? -1 : 0}\n          disabled={disabled || false}\n          data-testid={dataTestId}\n          {...rest}\n        />\n        {input && !readOnly && !disabled && !loading && (\n          <IconButton action={handleInputClear} ref={clearButtonRef} useTransparentBackground={true} shape={'circular'} style={{ marginLeft: '-4px' }} variant={'secondary'}>\n            <SystemIcons.Clear />\n          </IconButton>\n        )}\n\n        {!disabled && !readOnly && loading && (\n          <div style={{ marginLeft: '-4xp' }}>\n            <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} />\n          </div>\n        )}\n\n        <div className={'dropdown-arrow'}>\n          {isOpen && !readOnly && !disabled ? <ArrowDropUp size=\"24px\" className={size ? size : ''} /> : <ArrowDropDown size=\"24px\" className={size ? size : ''} />}\n        </div>\n      </StyledField>\n    );\n  };\n\n  return (\n    <>\n      <Dropdown ref={containerRef}\n      role=\"combobox\"\n      aria-multiselectable={true} \n      aria-controls={`${id}_dropdowncontent`}\n      aria-activedescendant={activeDescendant}\n      aria-expanded={isOpen ? true : false}\n      disabled={disabled} isButton={false} readOnly={readOnly} className={size ? size : ''} margin={margin}>\n        {renderInput()}\n        {!readOnly && !disabled && (\n          <DropdownContent\n            containerRef={containerRef}\n            isOpen={isOpen && !loading}\n            messageOnNoResults={messageOnNoResults ?? ''}\n            selectedValues={selectedValues}\n            setSelectedValues={setSelectedValues}\n            size={size ?? Size.Small}\n            onActiveDescendantChanged={(e) => setActiveDescendant(e)}\n            focused={focused}\n            ariaRolesType=\"input\"\n            setFocused={setFocused}\n            outline={false}\n            customizationProps={{\n              itemsType: 'normal',\n              scrollable: scrollable,\n              multiSelect: false,\n              action: () => {},\n              onValueUpdate: (values: string[]) => {\n                setRestartFilter(true);\n                setInit(false);\n              },\n              items: list,\n            }}\n            filter={!disableFiltering && !restartFilter ? input || '' : ''}\n            setIsOpen={setIsOpen}\n            isButton={false}\n            id={`${id}_dropdowncontent`}\n          />\n        )}\n      </Dropdown>\n      {activeValidationMessage && (\n        <ErrorMessage className={size || ''}>\n          <TechnicalWarning color={COLORS.critical_400} />\n          <span>{activeValidationMessage}</span>\n        </ErrorMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage className={size || ''}>\n          <Information color={COLORS.neutral_600} />\n          <span>{autofilledMessage}</span>\n        </AutofilledMessage>\n      )}\n    </>\n  );\n});\n\nexport default DropdownFilter;\n"],"mappings":"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"}
+{"version":3,"file":"DropdownFilter.cjs","names":["DropdownFilter","React","forwardRef","ref","id","list","placeholder","onSelect","onInputChange","value","required","messageOnNoResults","disabled","readOnly","scrollable","activeValidationMessage","autofilledMessage","size","disableFiltering","buttonFontSize","margin","loading","onFocus","onBlur","dataTestId","rest","useState","isOpen","setIsOpen","input","setInput","activeDescendant","setActiveDescendant","restartFilter","setRestartFilter","selectedItem","setSelectedItem","selectedValues","setSelectedValues","focused","setFocused","inputFocused","setInputFocused","init","setInit","styledFieldRef","useFocusVisibleRef","inputRef","clearButtonRef","useRef","useActionWithin","useImperativeHandle","current","containerRef","useClickOutsideRef","useFocusOutsideRef","handleInputKeyDown","e","key","preventDefault","useEffect","length","val","item","find","a","displayLabel","undefined","handleInputClear","focus","focusVisible","detail","renderInput","stopPropagation","blur","defaultOnMouseDownHandler","Math","floor","random","target","marginLeft","Size","Small","COLORS","neutral_600","itemsType","multiSelect","action","onValueUpdate","values","items","critical_400"],"sources":["../../src/Dropdown/DropdownFilter.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 { StyledField, Dropdown, InputField } from './CommonStyling';\nimport DropdownContent, { DropdownItem } from './DropdownContent';\nimport { Size, Testable } from '../types';\nimport { AutofilledMessage, ErrorMessage } from '../InputFields';\nimport { defaultOnMouseDownHandler, useActionWithin, useClickOutsideRef, useFocusOutsideRef, useFocusVisibleRef } from '../common';\nimport { IconButton } from '../Button';\nimport { SystemIcons } from '../icons';\n\ninterface DropdownFilterProps extends Testable, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onSelect' | 'size' | 'list' | 'autoComplete' | 'type' | 'placeholder' | 'onKeyDown' | 'value' | 'onChange' | 'required' | 'tabIndex' | 'disabled' | 'readOnly'> {\n  list: DropdownItem[];\n  placeholder?: string;\n  \n  value?: string;\n  onSelect?: (value: string) => void;\n  onInputChange?: (input: string) => void;\n\n  required?: boolean;\n  disabled?: boolean;\n  readOnly?: boolean;\n  loading?: boolean;\n\n  disableFiltering?: boolean;\n\n  messageOnNoResults?: string;\n  activeValidationMessage?: string;\n  autofilledMessage?: string;\n  size?: Size.Small | Size.Medium;\n\n  buttonFontSize?: string;\n  margin?: string;\n  scrollable?: boolean;\n}\n\nconst DropdownFilter = React.forwardRef( ({\n                                            id,\n                                            list,\n                                            placeholder,\n                                            onSelect,\n                                            onInputChange,\n                                            value,\n                                            required,\n                                            messageOnNoResults,\n                                            disabled,\n                                            readOnly,\n                                            scrollable,\n                                            activeValidationMessage,\n                                            autofilledMessage,\n                                            size,\n                                            disableFiltering,\n                                            buttonFontSize,\n                                            margin,\n                                            loading,\n                                            onFocus,\n                                            onBlur,\n                                            dataTestId,\n                                            ...rest\n                                          }: DropdownFilterProps, ref) => {\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [input, setInput] = React.useState<string>();\n  const [activeDescendant, setActiveDescendant] = React.useState<string>();\n  const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n  const [selectedItem, setSelectedItem] = React.useState<DropdownItem>();\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [inputFocused, setInputFocused] = React.useState<boolean>(false);\n  const [init, setInit] = React.useState<boolean>(true);\n\n  const styledFieldRef = useFocusVisibleRef();\n  const inputRef = useFocusVisibleRef([styledFieldRef]);\n  const clearButtonRef = React.useRef<HTMLButtonElement>(null);\n\n  useActionWithin(styledFieldRef, input && !readOnly && !disabled ? [clearButtonRef] : []);\n\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n  const containerRef = useClickOutsideRef(\n    () => setIsOpen(false),\n    [],\n    useFocusOutsideRef(() => setIsOpen(false)),\n  );\n\n  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === 'Esc' || e.key === 'Escape') {\n      e.preventDefault();\n    }\n    if (e.key === 'ArrowDown' || e.key === 'Down' || e.key === 'ArrowUp' || e.key === 'Up') {\n      e.preventDefault();\n      if (!isOpen) {\n        setIsOpen(true);\n      }\n    }\n  };\n\n  React.useEffect(() => {\n    setInit(true);\n    setSelectedValues(!!value ? [value] : []);\n  }, [value]);\n\n  React.useEffect(() => {\n    if (selectedValues?.length) {\n      const val = selectedValues[0];\n      const item = list.find((a) => a.value === val);\n      setSelectedItem(item);\n      setInput(item?.displayLabel ?? item?.value ?? '');\n      onSelect && !init && onSelect(val);\n    } else {\n      setSelectedItem(undefined);\n      onSelect && !init && onSelect('');\n      setInput('');\n    }\n  }, [selectedValues]);\n\n  React.useEffect(() => {\n    if (!isOpen) {\n      if (!!selectedItem) {\n        setInput(selectedItem?.displayLabel ?? selectedItem?.value ?? '');\n      } else {\n        setInput('');\n      }\n    }\n\n    setRestartFilter(true);\n  }, [isOpen, selectedItem]);\n\n  const handleInputClear = (e: any) => {\n    setInput('');\n    setSelectedValues([]);\n    onSelect && onSelect('');\n    inputRef.current?.focus({ focusVisible: e?.detail !== 1 } as any);\n  };\n\n  const renderInput = () => {\n    return (\n      <StyledField\n        ref={styledFieldRef}\n        className={size ? size : ''}\n        onClick={(e: any) => {\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        disabled={disabled || false}\n        readOnly={readOnly || false}\n        isPlaceholder={!input}\n        fontSize={buttonFontSize}\n        showValidationMessage={!!activeValidationMessage}\n        onMouseDown={defaultOnMouseDownHandler}\n        data-testid={`otherdiv_${id}`}>\n        <InputField\n          id={id}\n          ref={inputRef}\n          autoComplete={'off-' + Math.floor(Math.random() * 999999999999)}\n          type=\"search\"\n          placeholder={inputFocused ? '' : placeholder}\n          onKeyDown={handleInputKeyDown}\n          value={input || ''}\n          onChange={(e: any) => {\n            if (!e.target.value) {\n              setSelectedValues([]);\n            }\n            if (!readOnly && !disabled && e.target.value !== input) {\n              setRestartFilter(false);\n              setIsOpen(true);\n              setInput(e.target.value);\n              if (onInputChange) {\n                onInputChange(e.target.value || '');\n              }\n            }\n          }}\n          onFocus={(e) => {\n            setInputFocused(true);\n            onFocus && onFocus(e);\n          }}\n          onBlur={(e) => {\n            setInputFocused(false);\n            onBlur && onBlur(e);\n          }}\n          required={required}\n          tabIndex={disabled || readOnly ? -1 : 0}\n          disabled={disabled || false}\n          data-testid={dataTestId}\n          {...rest}\n        />\n        {input && !readOnly && !disabled && !loading && (\n          <IconButton action={handleInputClear} ref={clearButtonRef} useTransparentBackground={true} shape={'circular'} style={{ marginLeft: '-4px' }} variant={'secondary'}>\n            <SystemIcons.Clear />\n          </IconButton>\n        )}\n\n        {!disabled && !readOnly && loading && (\n          <div style={{ marginLeft: '-4xp' }}>\n            <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} />\n          </div>\n        )}\n\n        <div className={'dropdown-arrow'}>\n          {isOpen && !readOnly && !disabled ? <ArrowDropUp size=\"24px\" className={size ? size : ''} /> : <ArrowDropDown size=\"24px\" className={size ? size : ''} />}\n        </div>\n      </StyledField>\n    );\n  };\n\n  return (\n    <>\n      <Dropdown ref={containerRef}\n      role=\"combobox\"\n      aria-multiselectable={true} \n      aria-controls={`${id}_dropdowncontent`}\n      aria-activedescendant={activeDescendant}\n      aria-expanded={isOpen ? true : false}\n      disabled={disabled} isButton={false} readOnly={readOnly} className={size ? size : ''} margin={margin}>\n        {renderInput()}\n        {!readOnly && !disabled && (\n          <DropdownContent\n            containerRef={containerRef}\n            isOpen={isOpen && !loading}\n            messageOnNoResults={messageOnNoResults ?? ''}\n            selectedValues={selectedValues}\n            setSelectedValues={setSelectedValues}\n            size={size ?? Size.Small}\n            onActiveDescendantChanged={(e) => setActiveDescendant(e)}\n            focused={focused}\n            ariaRolesType=\"input\"\n            setFocused={setFocused}\n            outline={false}\n            customizationProps={{\n              itemsType: 'normal',\n              scrollable: scrollable,\n              multiSelect: false,\n              action: () => {},\n              onValueUpdate: (values: string[]) => {\n                setRestartFilter(true);\n                setInit(false);\n              },\n              items: list,\n            }}\n            filter={!disableFiltering && !restartFilter ? input || '' : ''}\n            setIsOpen={setIsOpen}\n            isButton={false}\n            id={`${id}_dropdowncontent`}\n          />\n        )}\n      </Dropdown>\n      {activeValidationMessage && (\n        <ErrorMessage className={size || ''}>\n          <TechnicalWarning color={COLORS.critical_400} />\n          <span>{activeValidationMessage}</span>\n        </ErrorMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage className={size || ''}>\n          <Information color={COLORS.neutral_600} />\n          <span>{autofilledMessage}</span>\n        </AutofilledMessage>\n      )}\n    </>\n  );\n});\n\nexport default DropdownFilter;\n"],"mappings":"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"}

package/dist/Dropdown/DropdownFilter.js

@@ -36,8 +36,7 @@ var DropdownFilter = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     size = _ref.size,
     disableFiltering = _ref.disableFiltering,
     buttonFontSize = _ref.buttonFontSize,
-    _ref$margin = _ref.margin,
-    margin = _ref$margin === void 0 ? '4px 0' : _ref$margin,
+    margin = _ref.margin,
     loading = _ref.loading,
     _onFocus = _ref.onFocus,
     _onBlur = _ref.onBlur,

package/dist/Dropdown/DropdownFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownFilter.js","names":["React","COLORS","ArrowDropDown","ArrowDropUp","Information","TechnicalWarning","LoadingIndicator","StyledField","Dropdown","InputField","DropdownContent","Size","AutofilledMessage","ErrorMessage","defaultOnMouseDownHandler","useActionWithin","useClickOutsideRef","useFocusOutsideRef","useFocusVisibleRef","IconButton","SystemIcons","DropdownFilter","forwardRef","ref","id","list","placeholder","onSelect","onInputChange","value","required","messageOnNoResults","disabled","readOnly","scrollable","activeValidationMessage","autofilledMessage","size","disableFiltering","buttonFontSize","margin","loading","onFocus","onBlur","dataTestId","rest","useState","isOpen","setIsOpen","input","setInput","activeDescendant","setActiveDescendant","restartFilter","setRestartFilter","selectedItem","setSelectedItem","selectedValues","setSelectedValues","focused","setFocused","inputFocused","setInputFocused","init","setInit","styledFieldRef","inputRef","clearButtonRef","useRef","useImperativeHandle","current","containerRef","handleInputKeyDown","e","key","preventDefault","useEffect","length","val","item","find","a","displayLabel","undefined","handleInputClear","focus","focusVisible","detail","renderInput","stopPropagation","blur","Math","floor","random","target","marginLeft","Small","neutral_600","itemsType","multiSelect","action","onValueUpdate","values","items","critical_400"],"sources":["../../src/Dropdown/DropdownFilter.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 { StyledField, Dropdown, InputField } from './CommonStyling';\nimport DropdownContent, { DropdownItem } from './DropdownContent';\nimport { Size, Testable } from '../types';\nimport { AutofilledMessage, ErrorMessage } from '../InputFields';\nimport { defaultOnMouseDownHandler, useActionWithin, useClickOutsideRef, useFocusOutsideRef, useFocusVisibleRef } from '../common';\nimport { IconButton } from '../Button';\nimport { SystemIcons } from '../icons';\n\ninterface DropdownFilterProps extends Testable, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onSelect' | 'size' | 'list' | 'autoComplete' | 'type' | 'placeholder' | 'onKeyDown' | 'value' | 'onChange' | 'required' | 'tabIndex' | 'disabled' | 'readOnly'> {\n  list: DropdownItem[];\n  placeholder?: string;\n  \n  value?: string;\n  onSelect?: (value: string) => void;\n  onInputChange?: (input: string) => void;\n\n  required?: boolean;\n  disabled?: boolean;\n  readOnly?: boolean;\n  loading?: boolean;\n\n  disableFiltering?: boolean;\n\n  messageOnNoResults?: string;\n  activeValidationMessage?: string;\n  autofilledMessage?: string;\n  size?: Size.Small | Size.Medium;\n\n  buttonFontSize?: string;\n  margin?: string;\n  scrollable?: boolean;\n}\n\nconst DropdownFilter = React.forwardRef( ({\n                                            id,\n                                            list,\n                                            placeholder,\n                                            onSelect,\n                                            onInputChange,\n                                            value,\n                                            required,\n                                            messageOnNoResults,\n                                            disabled,\n                                            readOnly,\n                                            scrollable,\n                                            activeValidationMessage,\n                                            autofilledMessage,\n                                            size,\n                                            disableFiltering,\n                                            buttonFontSize,\n                                            margin = '4px 0',\n                                            loading,\n                                            onFocus,\n                                            onBlur,\n                                            dataTestId,\n                                            ...rest\n                                          }: DropdownFilterProps, ref) => {\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [input, setInput] = React.useState<string>();\n  const [activeDescendant, setActiveDescendant] = React.useState<string>();\n  const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n  const [selectedItem, setSelectedItem] = React.useState<DropdownItem>();\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [inputFocused, setInputFocused] = React.useState<boolean>(false);\n  const [init, setInit] = React.useState<boolean>(true);\n\n  const styledFieldRef = useFocusVisibleRef();\n  const inputRef = useFocusVisibleRef([styledFieldRef]);\n  const clearButtonRef = React.useRef<HTMLButtonElement>(null);\n\n  useActionWithin(styledFieldRef, input && !readOnly && !disabled ? [clearButtonRef] : []);\n\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n  const containerRef = useClickOutsideRef(\n    () => setIsOpen(false),\n    [],\n    useFocusOutsideRef(() => setIsOpen(false)),\n  );\n\n  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === 'Esc' || e.key === 'Escape') {\n      e.preventDefault();\n    }\n    if (e.key === 'ArrowDown' || e.key === 'Down' || e.key === 'ArrowUp' || e.key === 'Up') {\n      e.preventDefault();\n      if (!isOpen) {\n        setIsOpen(true);\n      }\n    }\n  };\n\n  React.useEffect(() => {\n    setInit(true);\n    setSelectedValues(!!value ? [value] : []);\n  }, [value]);\n\n  React.useEffect(() => {\n    if (selectedValues?.length) {\n      const val = selectedValues[0];\n      const item = list.find((a) => a.value === val);\n      setSelectedItem(item);\n      setInput(item?.displayLabel ?? item?.value ?? '');\n      onSelect && !init && onSelect(val);\n    } else {\n      setSelectedItem(undefined);\n      onSelect && !init && onSelect('');\n      setInput('');\n    }\n  }, [selectedValues]);\n\n  React.useEffect(() => {\n    if (!isOpen) {\n      if (!!selectedItem) {\n        setInput(selectedItem?.displayLabel ?? selectedItem?.value ?? '');\n      } else {\n        setInput('');\n      }\n    }\n\n    setRestartFilter(true);\n  }, [isOpen, selectedItem]);\n\n  const handleInputClear = (e: any) => {\n    setInput('');\n    setSelectedValues([]);\n    onSelect && onSelect('');\n    inputRef.current?.focus({ focusVisible: e?.detail !== 1 } as any);\n  };\n\n  const renderInput = () => {\n    return (\n      <StyledField\n        ref={styledFieldRef}\n        className={size ? size : ''}\n        onClick={(e: any) => {\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        disabled={disabled || false}\n        readOnly={readOnly || false}\n        isPlaceholder={!input}\n        fontSize={buttonFontSize}\n        showValidationMessage={!!activeValidationMessage}\n        onMouseDown={defaultOnMouseDownHandler}\n        data-testid={`otherdiv_${id}`}>\n        <InputField\n          id={id}\n          ref={inputRef}\n          autoComplete={'off-' + Math.floor(Math.random() * 999999999999)}\n          type=\"search\"\n          placeholder={inputFocused ? '' : placeholder}\n          onKeyDown={handleInputKeyDown}\n          value={input || ''}\n          onChange={(e: any) => {\n            if (!e.target.value) {\n              setSelectedValues([]);\n            }\n            if (!readOnly && !disabled && e.target.value !== input) {\n              setRestartFilter(false);\n              setIsOpen(true);\n              setInput(e.target.value);\n              if (onInputChange) {\n                onInputChange(e.target.value || '');\n              }\n            }\n          }}\n          onFocus={(e) => {\n            setInputFocused(true);\n            onFocus && onFocus(e);\n          }}\n          onBlur={(e) => {\n            setInputFocused(false);\n            onBlur && onBlur(e);\n          }}\n          required={required}\n          tabIndex={disabled || readOnly ? -1 : 0}\n          disabled={disabled || false}\n          data-testid={dataTestId}\n          {...rest}\n        />\n        {input && !readOnly && !disabled && !loading && (\n          <IconButton action={handleInputClear} ref={clearButtonRef} useTransparentBackground={true} shape={'circular'} style={{ marginLeft: '-4px' }} variant={'secondary'}>\n            <SystemIcons.Clear />\n          </IconButton>\n        )}\n\n        {!disabled && !readOnly && loading && (\n          <div style={{ marginLeft: '-4xp' }}>\n            <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} />\n          </div>\n        )}\n\n        <div className={'dropdown-arrow'}>\n          {isOpen && !readOnly && !disabled ? <ArrowDropUp size=\"24px\" className={size ? size : ''} /> : <ArrowDropDown size=\"24px\" className={size ? size : ''} />}\n        </div>\n      </StyledField>\n    );\n  };\n\n  return (\n    <>\n      <Dropdown ref={containerRef}\n      role=\"combobox\"\n      aria-multiselectable={true} \n      aria-controls={`${id}_dropdowncontent`}\n      aria-activedescendant={activeDescendant}\n      aria-expanded={isOpen ? true : false}\n      disabled={disabled} isButton={false} readOnly={readOnly} className={size ? size : ''} margin={margin}>\n        {renderInput()}\n        {!readOnly && !disabled && (\n          <DropdownContent\n            containerRef={containerRef}\n            isOpen={isOpen && !loading}\n            messageOnNoResults={messageOnNoResults ?? ''}\n            selectedValues={selectedValues}\n            setSelectedValues={setSelectedValues}\n            size={size ?? Size.Small}\n            onActiveDescendantChanged={(e) => setActiveDescendant(e)}\n            focused={focused}\n            ariaRolesType=\"input\"\n            setFocused={setFocused}\n            outline={false}\n            customizationProps={{\n              itemsType: 'normal',\n              scrollable: scrollable,\n              multiSelect: false,\n              action: () => {},\n              onValueUpdate: (values: string[]) => {\n                setRestartFilter(true);\n                setInit(false);\n              },\n              items: list,\n            }}\n            filter={!disableFiltering && !restartFilter ? input || '' : ''}\n            setIsOpen={setIsOpen}\n            isButton={false}\n            id={`${id}_dropdowncontent`}\n          />\n        )}\n      </Dropdown>\n      {activeValidationMessage && (\n        <ErrorMessage className={size || ''}>\n          <TechnicalWarning color={COLORS.critical_400} />\n          <span>{activeValidationMessage}</span>\n        </ErrorMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage className={size || ''}>\n          <Information color={COLORS.neutral_600} />\n          <span>{autofilledMessage}</span>\n        </AutofilledMessage>\n      )}\n    </>\n  );\n});\n\nexport default DropdownFilter;\n"],"mappings":"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"}
+{"version":3,"file":"DropdownFilter.js","names":["React","COLORS","ArrowDropDown","ArrowDropUp","Information","TechnicalWarning","LoadingIndicator","StyledField","Dropdown","InputField","DropdownContent","Size","AutofilledMessage","ErrorMessage","defaultOnMouseDownHandler","useActionWithin","useClickOutsideRef","useFocusOutsideRef","useFocusVisibleRef","IconButton","SystemIcons","DropdownFilter","forwardRef","ref","id","list","placeholder","onSelect","onInputChange","value","required","messageOnNoResults","disabled","readOnly","scrollable","activeValidationMessage","autofilledMessage","size","disableFiltering","buttonFontSize","margin","loading","onFocus","onBlur","dataTestId","rest","useState","isOpen","setIsOpen","input","setInput","activeDescendant","setActiveDescendant","restartFilter","setRestartFilter","selectedItem","setSelectedItem","selectedValues","setSelectedValues","focused","setFocused","inputFocused","setInputFocused","init","setInit","styledFieldRef","inputRef","clearButtonRef","useRef","useImperativeHandle","current","containerRef","handleInputKeyDown","e","key","preventDefault","useEffect","length","val","item","find","a","displayLabel","undefined","handleInputClear","focus","focusVisible","detail","renderInput","stopPropagation","blur","Math","floor","random","target","marginLeft","Small","neutral_600","itemsType","multiSelect","action","onValueUpdate","values","items","critical_400"],"sources":["../../src/Dropdown/DropdownFilter.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 { StyledField, Dropdown, InputField } from './CommonStyling';\nimport DropdownContent, { DropdownItem } from './DropdownContent';\nimport { Size, Testable } from '../types';\nimport { AutofilledMessage, ErrorMessage } from '../InputFields';\nimport { defaultOnMouseDownHandler, useActionWithin, useClickOutsideRef, useFocusOutsideRef, useFocusVisibleRef } from '../common';\nimport { IconButton } from '../Button';\nimport { SystemIcons } from '../icons';\n\ninterface DropdownFilterProps extends Testable, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onSelect' | 'size' | 'list' | 'autoComplete' | 'type' | 'placeholder' | 'onKeyDown' | 'value' | 'onChange' | 'required' | 'tabIndex' | 'disabled' | 'readOnly'> {\n  list: DropdownItem[];\n  placeholder?: string;\n  \n  value?: string;\n  onSelect?: (value: string) => void;\n  onInputChange?: (input: string) => void;\n\n  required?: boolean;\n  disabled?: boolean;\n  readOnly?: boolean;\n  loading?: boolean;\n\n  disableFiltering?: boolean;\n\n  messageOnNoResults?: string;\n  activeValidationMessage?: string;\n  autofilledMessage?: string;\n  size?: Size.Small | Size.Medium;\n\n  buttonFontSize?: string;\n  margin?: string;\n  scrollable?: boolean;\n}\n\nconst DropdownFilter = React.forwardRef( ({\n                                            id,\n                                            list,\n                                            placeholder,\n                                            onSelect,\n                                            onInputChange,\n                                            value,\n                                            required,\n                                            messageOnNoResults,\n                                            disabled,\n                                            readOnly,\n                                            scrollable,\n                                            activeValidationMessage,\n                                            autofilledMessage,\n                                            size,\n                                            disableFiltering,\n                                            buttonFontSize,\n                                            margin,\n                                            loading,\n                                            onFocus,\n                                            onBlur,\n                                            dataTestId,\n                                            ...rest\n                                          }: DropdownFilterProps, ref) => {\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [input, setInput] = React.useState<string>();\n  const [activeDescendant, setActiveDescendant] = React.useState<string>();\n  const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n  const [selectedItem, setSelectedItem] = React.useState<DropdownItem>();\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [inputFocused, setInputFocused] = React.useState<boolean>(false);\n  const [init, setInit] = React.useState<boolean>(true);\n\n  const styledFieldRef = useFocusVisibleRef();\n  const inputRef = useFocusVisibleRef([styledFieldRef]);\n  const clearButtonRef = React.useRef<HTMLButtonElement>(null);\n\n  useActionWithin(styledFieldRef, input && !readOnly && !disabled ? [clearButtonRef] : []);\n\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n  const containerRef = useClickOutsideRef(\n    () => setIsOpen(false),\n    [],\n    useFocusOutsideRef(() => setIsOpen(false)),\n  );\n\n  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === 'Esc' || e.key === 'Escape') {\n      e.preventDefault();\n    }\n    if (e.key === 'ArrowDown' || e.key === 'Down' || e.key === 'ArrowUp' || e.key === 'Up') {\n      e.preventDefault();\n      if (!isOpen) {\n        setIsOpen(true);\n      }\n    }\n  };\n\n  React.useEffect(() => {\n    setInit(true);\n    setSelectedValues(!!value ? [value] : []);\n  }, [value]);\n\n  React.useEffect(() => {\n    if (selectedValues?.length) {\n      const val = selectedValues[0];\n      const item = list.find((a) => a.value === val);\n      setSelectedItem(item);\n      setInput(item?.displayLabel ?? item?.value ?? '');\n      onSelect && !init && onSelect(val);\n    } else {\n      setSelectedItem(undefined);\n      onSelect && !init && onSelect('');\n      setInput('');\n    }\n  }, [selectedValues]);\n\n  React.useEffect(() => {\n    if (!isOpen) {\n      if (!!selectedItem) {\n        setInput(selectedItem?.displayLabel ?? selectedItem?.value ?? '');\n      } else {\n        setInput('');\n      }\n    }\n\n    setRestartFilter(true);\n  }, [isOpen, selectedItem]);\n\n  const handleInputClear = (e: any) => {\n    setInput('');\n    setSelectedValues([]);\n    onSelect && onSelect('');\n    inputRef.current?.focus({ focusVisible: e?.detail !== 1 } as any);\n  };\n\n  const renderInput = () => {\n    return (\n      <StyledField\n        ref={styledFieldRef}\n        className={size ? size : ''}\n        onClick={(e: any) => {\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        disabled={disabled || false}\n        readOnly={readOnly || false}\n        isPlaceholder={!input}\n        fontSize={buttonFontSize}\n        showValidationMessage={!!activeValidationMessage}\n        onMouseDown={defaultOnMouseDownHandler}\n        data-testid={`otherdiv_${id}`}>\n        <InputField\n          id={id}\n          ref={inputRef}\n          autoComplete={'off-' + Math.floor(Math.random() * 999999999999)}\n          type=\"search\"\n          placeholder={inputFocused ? '' : placeholder}\n          onKeyDown={handleInputKeyDown}\n          value={input || ''}\n          onChange={(e: any) => {\n            if (!e.target.value) {\n              setSelectedValues([]);\n            }\n            if (!readOnly && !disabled && e.target.value !== input) {\n              setRestartFilter(false);\n              setIsOpen(true);\n              setInput(e.target.value);\n              if (onInputChange) {\n                onInputChange(e.target.value || '');\n              }\n            }\n          }}\n          onFocus={(e) => {\n            setInputFocused(true);\n            onFocus && onFocus(e);\n          }}\n          onBlur={(e) => {\n            setInputFocused(false);\n            onBlur && onBlur(e);\n          }}\n          required={required}\n          tabIndex={disabled || readOnly ? -1 : 0}\n          disabled={disabled || false}\n          data-testid={dataTestId}\n          {...rest}\n        />\n        {input && !readOnly && !disabled && !loading && (\n          <IconButton action={handleInputClear} ref={clearButtonRef} useTransparentBackground={true} shape={'circular'} style={{ marginLeft: '-4px' }} variant={'secondary'}>\n            <SystemIcons.Clear />\n          </IconButton>\n        )}\n\n        {!disabled && !readOnly && loading && (\n          <div style={{ marginLeft: '-4xp' }}>\n            <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} />\n          </div>\n        )}\n\n        <div className={'dropdown-arrow'}>\n          {isOpen && !readOnly && !disabled ? <ArrowDropUp size=\"24px\" className={size ? size : ''} /> : <ArrowDropDown size=\"24px\" className={size ? size : ''} />}\n        </div>\n      </StyledField>\n    );\n  };\n\n  return (\n    <>\n      <Dropdown ref={containerRef}\n      role=\"combobox\"\n      aria-multiselectable={true} \n      aria-controls={`${id}_dropdowncontent`}\n      aria-activedescendant={activeDescendant}\n      aria-expanded={isOpen ? true : false}\n      disabled={disabled} isButton={false} readOnly={readOnly} className={size ? size : ''} margin={margin}>\n        {renderInput()}\n        {!readOnly && !disabled && (\n          <DropdownContent\n            containerRef={containerRef}\n            isOpen={isOpen && !loading}\n            messageOnNoResults={messageOnNoResults ?? ''}\n            selectedValues={selectedValues}\n            setSelectedValues={setSelectedValues}\n            size={size ?? Size.Small}\n            onActiveDescendantChanged={(e) => setActiveDescendant(e)}\n            focused={focused}\n            ariaRolesType=\"input\"\n            setFocused={setFocused}\n            outline={false}\n            customizationProps={{\n              itemsType: 'normal',\n              scrollable: scrollable,\n              multiSelect: false,\n              action: () => {},\n              onValueUpdate: (values: string[]) => {\n                setRestartFilter(true);\n                setInit(false);\n              },\n              items: list,\n            }}\n            filter={!disableFiltering && !restartFilter ? input || '' : ''}\n            setIsOpen={setIsOpen}\n            isButton={false}\n            id={`${id}_dropdowncontent`}\n          />\n        )}\n      </Dropdown>\n      {activeValidationMessage && (\n        <ErrorMessage className={size || ''}>\n          <TechnicalWarning color={COLORS.critical_400} />\n          <span>{activeValidationMessage}</span>\n        </ErrorMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage className={size || ''}>\n          <Information color={COLORS.neutral_600} />\n          <span>{autofilledMessage}</span>\n        </AutofilledMessage>\n      )}\n    </>\n  );\n});\n\nexport default DropdownFilter;\n"],"mappings":"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"}

package/dist/InputFields/DatepickerField.cjs

@@ -43,9 +43,9 @@ var DatePickerContainer = _styledComponents.default.div(_templateObject || (_tem
 }, _colors.default.primary_20, _styles.focusStyles, _colors.default.neutral_20, _colors.default.neutral_200, _colors.default.neutral_20, function (props) {
   return !props.yearPicker ? '96px' : '54px';
 }, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _colors.default.neutral_600), (0, _styles.scrollBarStyling)(_types.Size.Small), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _colors.default.neutral_600), _colors.default.white, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _colors.default.neutral_600), _colors.default.neutral_600, _colors.default.white, _colors.default.primary_700, _colors.default.primary_20, _styles.focusStyles, _colors.default.white, _colors.default.primary_500, _colors.default.white, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _colors.default.neutral_600), _colors.default.neutral_600, _colors.default.white, _colors.default.primary_700, _colors.default.primary_20, _styles.focusStyles, _colors.default.white, _colors.default.primary_500, _colors.default.neutral_700, _colors.default.neutral_100, _colors.default.primary_700, _colors.default.primary_20, _styles.focusStyles);
-var IconWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  pointer-events: none;\n  position: absolute;\n  right: 16px;\n  width: 24px;\n  height: 24px;\n  z-index: ", ";\n  color: ", ";\n"])), +_styles.Z_INDEXES.focus + 1, _colors.default.neutral_600);
+var IconWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  pointer-events: none;\n  position: absolute;\n  left: 16px;\n  width: 24px;\n  height: 24px;\n  z-index: ", ";\n"])), +_styles.Z_INDEXES.focus + 1);
 var DatepickerRow = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n"])));
-var StyledInputFieldStyling = (0, _styledComponents.default)(_styling.InputFieldStyling)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n\n    ::placeholder {\n      color: ", ";\n    }\n\n    cursor: pointer;\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:active,\n  &.open {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n    background-color: ", ";\n    color: ", ";\n\n    ::placeholder {\n      color: ", ";\n    }\n  }\n\n  &:disabled {\n    background-color: ", ";\n  }\n\n  &:hover ~ ", " {\n    color: ", ";\n  }\n\n  &:active ~ ", ", &.open ~ ", " {\n    color: ", ";\n  }\n\n  &:disabled ~ ", ", &:read-only ~ ", " {\n    color: ", ";\n  }\n"])), _colors.default.neutral_500, _colors.default.primary_300, _colors.default.primary_200, _colors.default.primary_700, _colors.default.primary_20, _colors.default.primary_700, _colors.default.primary_300, _colors.default.primary_100, _colors.default.primary_800, _colors.default.primary_800, _colors.default.white, IconWrapper, _colors.default.primary_700, IconWrapper, IconWrapper, _colors.default.primary_800, IconWrapper, IconWrapper, _colors.default.neutral_300);
+var StyledInputFieldStyling = (0, _styledComponents.default)(_styling.InputFieldStyling)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  padding-left: 48px !important;\n  \n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n\n    ::placeholder {\n      color: ", ";\n    }\n\n    cursor: pointer;\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:active,\n  &.open {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n    background-color: ", ";\n    color: ", ";\n\n    ::placeholder {\n      color: ", ";\n    }\n  }\n  \n  &:disabled {\n    background-color: ", ";\n  }\n\n  & ~ ", "{\n    color: ", ";\n  }\n\n  &:hover ~ ", " {\n    color: ", ";\n  }\n\n  &:active ~ ", ", &.open ~ ", " {\n    color: ", ";\n  }\n\n  &[tabindex='-1'] ~ ", " {\n    color: ", ";\n  }\n"])), _colors.default.neutral_500, _colors.default.primary_300, _colors.default.primary_200, _colors.default.primary_700, _colors.default.primary_20, _colors.default.primary_700, _colors.default.primary_300, _colors.default.primary_100, _colors.default.primary_800, _colors.default.primary_800, _colors.default.white, IconWrapper, _colors.default.neutral_600, IconWrapper, _colors.default.primary_700, IconWrapper, IconWrapper, _colors.default.primary_800, IconWrapper, _colors.default.neutral_300);
 var DatepickerField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var disabled = _ref.disabled,
     readOnly = _ref.readOnly,
@@ -188,37 +188,31 @@ var DatepickerField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
         customInput: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styling.InputWrapper, {
           disabled: disabled,
           readOnly: readOnly,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            style: {
-              display: 'block',
-              margin: '4px 0px'
-            },
-            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(DatepickerRow, {
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledInputFieldStyling, _objectSpread({
-                ref: inputRef,
-                type: "text",
-                name: "datepicker",
-                onKeyDown: function onKeyDown(e) {
-                  return e.key === 'Enter' && datepickerRef.current.setOpen(true);
-                },
-                className: invalid ? 'invalid' : '' + (open ? ' open' : ''),
-                tabIndex: disabled || readOnly ? -1 : 0,
-                onFocus: function onFocus(e) {
-                  var _inputRef$current2;
-                  return (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.setSelectionRange(0, 0);
-                },
-                autoComplete: autoComplete,
-                placeholder: placeholder,
-                disabled: disabled,
-                readOnly: true,
-                suppressReadOnlyStyles: !readOnly,
-                required: required
-              }, rest)), /*#__PURE__*/(0, _jsxRuntime.jsx)(IconWrapper, {
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.Calendar, {
-                  size: "24"
-                })
-              })]
-            })
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(DatepickerRow, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledInputFieldStyling, _objectSpread({
+              ref: inputRef,
+              type: "text",
+              name: "datepicker",
+              onKeyDown: function onKeyDown(e) {
+                return e.key === 'Enter' && datepickerRef.current.setOpen(true);
+              },
+              className: invalid ? 'invalid' : '' + (open ? ' open' : ''),
+              tabIndex: disabled || readOnly ? -1 : 0,
+              onFocus: function onFocus(e) {
+                var _inputRef$current2;
+                return (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.setSelectionRange(0, 0);
+              },
+              autoComplete: autoComplete,
+              placeholder: placeholder,
+              disabled: disabled,
+              readOnly: true,
+              suppressReadOnlyStyles: !readOnly,
+              required: required
+            }, rest)), /*#__PURE__*/(0, _jsxRuntime.jsx)(IconWrapper, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.Calendar, {
+                size: "24"
+              })
+            })]
           })
         })
       })