@laerdal/life-react-components 3.0.0 → 3.0.1-dev.2

package/dist/Accordion/ContentAccordion.cjs

@@ -112,7 +112,15 @@ var ContentAccordion = function ContentAccordion(_ref) {
         }
       }, rest), {}, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ContentAccordionItemHeaderIcon, {
-          children: multi ? isActive ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.Minus, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.Plus, {}) : isActive ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ChevronDown, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ChevronRight, {})
+          children: multi ? isActive ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.Minus, {
+            "aria-hidden": "true"
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.Plus, {
+            "aria-hidden": "true"
+          }) : isActive ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ChevronDown, {
+            "aria-hidden": "true"
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ChevronRight, {
+            "aria-hidden": "true"
+          })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ContentAccordionItemHeaderText, {
           children: title
         })]

package/dist/Accordion/ContentAccordion.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ContentAccordion.cjs","names":["ContentAccordionItemHeader","styled","div","COLORS","neutral_600","primary_700","primary_20","Z_INDEXES","hover","focusStyles","primary_800","primary_100","active","ContentAccordionItemHeaderIcon","ContentAccordionItemHeaderText","ContentAccordionItemContent","ContentAccordionItemContentHeader","ContentAccordionItemContentBody","p","ContentAccordionItemContentFooter","ContentAccordionItem","neutral_100","neutral_300","ContentAccordionWrapper","ComponentSStyling","ComponentTextStyle","Regular","Bold","black","ComponentMStyling","ComponentLStyling","ContentAccordion","items","multi","size","Size","Medium","className","rest","React","useState","opened","setOpened","useEffect","filter","item","map","id","find","onItemClick","disabled","includes","key","renderItem","title","header","body","footer","isActive","concat","undefined","defaultOnMouseDownHandler","event","cls","trim"],"sources":["../../src/Accordion/ContentAccordion.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport {Size} from '../types';\nimport {SystemIcons} from '../icons';\nimport {\n  COLORS,\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  focusStyles,\n  Z_INDEXES,\n} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\nexport const ContentAccordionItemHeader = styled.div`\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  min-height: 48px;\n  color: ${COLORS.neutral_600};\n  cursor: pointer;\n\n  &:hover {\n    color: ${COLORS.primary_700};\n    background-color: ${COLORS.primary_20};\n    z-index: ${Z_INDEXES.hover};\n  }\n\n  &:focus {\n    ${focusStyles}\n  }\n\n  &:active {\n    color: ${COLORS.primary_800};\n    background-color: ${COLORS.primary_100};\n    z-index: ${Z_INDEXES.active};\n  }\n`;\n\nexport const ContentAccordionItemHeaderIcon = styled.div`\n  width: 24px;\n  height: 24px;\n\n  svg {\n    width: 24px;\n    height: 24px;\n  }\n`;\n\nexport const ContentAccordionItemHeaderText = styled.div``;\n\nexport const ContentAccordionItemContent = styled.div`\n  display: none;\n  flex-direction: column;\n`;\n\nexport const ContentAccordionItemContentHeader = styled.div``;\n\nexport const ContentAccordionItemContentBody = styled.p``;\n\nexport const ContentAccordionItemContentFooter = styled.div``;\n\nexport const ContentAccordionItem = styled.div`\n  display: flex;\n  flex-direction: column;\n  border-top: 1px solid ${COLORS.neutral_100};\n\n  &.active {\n    ${ContentAccordionItemContent} {\n      display: flex;\n    }\n  }\n\n  &.disabled {\n    ${ContentAccordionItemHeader} {\n      color: ${COLORS.neutral_300};\n      cursor: not-allowed;\n      pointer-events: none;\n    }\n  }\n`;\n\nexport const ContentAccordionWrapper = styled.div`\n  width: 100%;\n  position: relative;\n\n  ${ContentAccordionItem}:last-child {\n    border-bottom: 1px solid ${COLORS.neutral_100};\n  }\n\n  &.small {\n    min-width: 320px;\n    max-width: 528px;\n\n    ${ContentAccordionItemHeader} {\n      gap: 8px;\n      padding: 0 8px;\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${ContentAccordionItemContent} {\n      padding: 0 8px 16px 40px;\n      gap: 8px;\n\n      ${ContentAccordionItemContentHeader} {\n        ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.black)}\n      }\n\n      ${ContentAccordionItemContentBody} {\n        //TODO\n      }\n    }\n  }\n\n  &.medium {\n    min-width: 344px;\n    max-width: 584px;\n\n    ${ContentAccordionItemHeader} {\n      gap: 12px;\n      padding: 0 12px;\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${ContentAccordionItemContent} {\n      padding: 8px 12px 24px 48px;\n      gap: 12px;\n\n      ${ContentAccordionItemContentHeader} {\n        ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.black)}\n      }\n\n      ${ContentAccordionItemContentBody} {\n        //TODO\n      }\n    }\n  }\n\n  &.large {\n    min-width: 384px;\n    max-width: 656px;\n\n    ${ContentAccordionItemHeader} {\n      gap: 16px;\n      padding: 0 16px;\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${ContentAccordionItemContent} {\n      padding: 16px 16px 32px 56px;\n      gap: 16px;\n\n      ${ContentAccordionItemContentHeader} {\n        ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.black)}\n      }\n\n      ${ContentAccordionItemContentBody} {\n        //TODO\n      }\n    }\n  }\n`;\n\nexport interface ContentAccordionItem extends Omit<React.HTMLAttributes<HTMLDivElement>, 'id' | 'onMouseDown' | 'onClick' | 'onKeyDown'> {\n  id: string;\n  title: string;\n  header?: string;\n  body: any;\n  footer?: any;\n  disabled?: boolean;\n  active?: boolean;\n}\n\nexport interface ContentAccordionProps extends React.HTMLAttributes<HTMLDivElement> {\n  items: ContentAccordionItem[];\n  multi?: boolean;\n  size?: Size.Small | Size.Medium | Size.Large;\n}\n\nexport const ContentAccordion: React.FunctionComponent<ContentAccordionProps> = ({\n                                                                                   items,\n                                                                                   multi = false,\n                                                                                   size = Size.Medium,\n                                                                                   className,\n                                                                                   ...rest\n                                                                                 }) => {\n  const [opened, setOpened] = React.useState<string[]>([]);\n\n  React.useEffect(() => {\n    if (multi) {\n      setOpened(items.filter((item) => item.active).map((item) => item.id));\n    } else {\n      let active = items.find((item) => !!item.active)?.id;\n      if (active) {\n        setOpened([active]);\n      }\n    }\n  }, [items, multi]);\n\n  const onItemClick = (item: ContentAccordionItem) => {\n    if (item.disabled) return;\n    if (opened.includes(item.id)) {\n      setOpened(opened.filter((key) => key !== item.id));\n    } else {\n      if (multi) {\n        setOpened([...opened, item.id]);\n      } else {\n        setOpened([item.id]);\n      }\n    }\n  };\n\n  const renderItem = (item: ContentAccordionItem) => {\n    const {id, title, header, body, footer, disabled, active, ...rest} = item;\n    const isActive = opened.includes(id);\n\n    return (\n      <ContentAccordionItem key={id} id={`item_${id}`}\n                            className={''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')}>\n        <ContentAccordionItemHeader\n          role=\"button\"\n          id={`headerFor_${id}`}\n          aria-expanded={isActive}\n          aria-controls={`itemContentFor_${id}`}\n          tabIndex={!disabled ? 0 : undefined}\n          onMouseDown={defaultOnMouseDownHandler}\n          onClick={() => !disabled && onItemClick(item)}\n          onKeyDown={(event) => event.key === 'Enter' && onItemClick(item)}\n          {...rest}>\n          <ContentAccordionItemHeaderIcon>\n            {multi ? isActive ? <SystemIcons.Minus/> : <SystemIcons.Plus/> : isActive ?\n              <SystemIcons.ChevronDown/> : <SystemIcons.ChevronRight/>}\n          </ContentAccordionItemHeaderIcon>\n          <ContentAccordionItemHeaderText>{title}</ContentAccordionItemHeaderText>\n        </ContentAccordionItemHeader>\n        <ContentAccordionItemContent id={`itemContentFor_${id}`}>\n          {header && <ContentAccordionItemContentHeader>{header}</ContentAccordionItemContentHeader>}\n          <ContentAccordionItemContentBody>{body}</ContentAccordionItemContentBody>\n          {footer && <ContentAccordionItemContentFooter>{footer}</ContentAccordionItemContentFooter>}\n        </ContentAccordionItemContent>\n      </ContentAccordionItem>\n    );\n  };\n\n  const cls = `${size} ${className ?? ''}`.trim();\n\n  return <ContentAccordionWrapper className={cls}>\n    {items.map((item) => renderItem(item))}\n  </ContentAccordionWrapper>;\n};\n\nexport default ContentAccordion;\n"],"mappings":"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"}
+{"version":3,"file":"ContentAccordion.cjs","names":["ContentAccordionItemHeader","styled","div","COLORS","neutral_600","primary_700","primary_20","Z_INDEXES","hover","focusStyles","primary_800","primary_100","active","ContentAccordionItemHeaderIcon","ContentAccordionItemHeaderText","ContentAccordionItemContent","ContentAccordionItemContentHeader","ContentAccordionItemContentBody","p","ContentAccordionItemContentFooter","ContentAccordionItem","neutral_100","neutral_300","ContentAccordionWrapper","ComponentSStyling","ComponentTextStyle","Regular","Bold","black","ComponentMStyling","ComponentLStyling","ContentAccordion","items","multi","size","Size","Medium","className","rest","React","useState","opened","setOpened","useEffect","filter","item","map","id","find","onItemClick","disabled","includes","key","renderItem","title","header","body","footer","isActive","concat","undefined","defaultOnMouseDownHandler","event","cls","trim"],"sources":["../../src/Accordion/ContentAccordion.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport {Size} from '../types';\nimport {SystemIcons} from '../icons';\nimport {\n  COLORS,\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  focusStyles,\n  Z_INDEXES,\n} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\nexport const ContentAccordionItemHeader = styled.div`\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  min-height: 48px;\n  color: ${COLORS.neutral_600};\n  cursor: pointer;\n\n  &:hover {\n    color: ${COLORS.primary_700};\n    background-color: ${COLORS.primary_20};\n    z-index: ${Z_INDEXES.hover};\n  }\n\n  &:focus {\n    ${focusStyles}\n  }\n\n  &:active {\n    color: ${COLORS.primary_800};\n    background-color: ${COLORS.primary_100};\n    z-index: ${Z_INDEXES.active};\n  }\n`;\n\nexport const ContentAccordionItemHeaderIcon = styled.div`\n  width: 24px;\n  height: 24px;\n\n  svg {\n    width: 24px;\n    height: 24px;\n  }\n`;\n\nexport const ContentAccordionItemHeaderText = styled.div``;\n\nexport const ContentAccordionItemContent = styled.div`\n  display: none;\n  flex-direction: column;\n`;\n\nexport const ContentAccordionItemContentHeader = styled.div``;\n\nexport const ContentAccordionItemContentBody = styled.p``;\n\nexport const ContentAccordionItemContentFooter = styled.div``;\n\nexport const ContentAccordionItem = styled.div`\n  display: flex;\n  flex-direction: column;\n  border-top: 1px solid ${COLORS.neutral_100};\n\n  &.active {\n    ${ContentAccordionItemContent} {\n      display: flex;\n    }\n  }\n\n  &.disabled {\n    ${ContentAccordionItemHeader} {\n      color: ${COLORS.neutral_300};\n      cursor: not-allowed;\n      pointer-events: none;\n    }\n  }\n`;\n\nexport const ContentAccordionWrapper = styled.div`\n  width: 100%;\n  position: relative;\n\n  ${ContentAccordionItem}:last-child {\n    border-bottom: 1px solid ${COLORS.neutral_100};\n  }\n\n  &.small {\n    min-width: 320px;\n    max-width: 528px;\n\n    ${ContentAccordionItemHeader} {\n      gap: 8px;\n      padding: 0 8px;\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${ContentAccordionItemContent} {\n      padding: 0 8px 16px 40px;\n      gap: 8px;\n\n      ${ContentAccordionItemContentHeader} {\n        ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.black)}\n      }\n\n      ${ContentAccordionItemContentBody} {\n        //TODO\n      }\n    }\n  }\n\n  &.medium {\n    min-width: 344px;\n    max-width: 584px;\n\n    ${ContentAccordionItemHeader} {\n      gap: 12px;\n      padding: 0 12px;\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${ContentAccordionItemContent} {\n      padding: 8px 12px 24px 48px;\n      gap: 12px;\n\n      ${ContentAccordionItemContentHeader} {\n        ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.black)}\n      }\n\n      ${ContentAccordionItemContentBody} {\n        //TODO\n      }\n    }\n  }\n\n  &.large {\n    min-width: 384px;\n    max-width: 656px;\n\n    ${ContentAccordionItemHeader} {\n      gap: 16px;\n      padding: 0 16px;\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${ContentAccordionItemContent} {\n      padding: 16px 16px 32px 56px;\n      gap: 16px;\n\n      ${ContentAccordionItemContentHeader} {\n        ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.black)}\n      }\n\n      ${ContentAccordionItemContentBody} {\n        //TODO\n      }\n    }\n  }\n`;\n\nexport interface ContentAccordionItem extends Omit<React.HTMLAttributes<HTMLDivElement>, 'id' | 'onMouseDown' | 'onClick' | 'onKeyDown'> {\n  id: string;\n  title: string;\n  header?: string;\n  body: any;\n  footer?: any;\n  disabled?: boolean;\n  active?: boolean;\n}\n\nexport interface ContentAccordionProps extends React.HTMLAttributes<HTMLDivElement> {\n  items: ContentAccordionItem[];\n  multi?: boolean;\n  size?: Size.Small | Size.Medium | Size.Large;\n}\n\nexport const ContentAccordion: React.FunctionComponent<ContentAccordionProps> = ({\n                                                                                   items,\n                                                                                   multi = false,\n                                                                                   size = Size.Medium,\n                                                                                   className,\n                                                                                   ...rest\n                                                                                 }) => {\n  const [opened, setOpened] = React.useState<string[]>([]);\n\n  React.useEffect(() => {\n    if (multi) {\n      setOpened(items.filter((item) => item.active).map((item) => item.id));\n    } else {\n      let active = items.find((item) => !!item.active)?.id;\n      if (active) {\n        setOpened([active]);\n      }\n    }\n  }, [items, multi]);\n\n  const onItemClick = (item: ContentAccordionItem) => {\n    if (item.disabled) return;\n    if (opened.includes(item.id)) {\n      setOpened(opened.filter((key) => key !== item.id));\n    } else {\n      if (multi) {\n        setOpened([...opened, item.id]);\n      } else {\n        setOpened([item.id]);\n      }\n    }\n  };\n\n  const renderItem = (item: ContentAccordionItem) => {\n    const {id, title, header, body, footer, disabled, active, ...rest} = item;\n    const isActive = opened.includes(id);\n\n    return (\n      <ContentAccordionItem key={id} id={`item_${id}`}\n                            className={''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')}>\n        <ContentAccordionItemHeader\n          role=\"button\"\n          id={`headerFor_${id}`}\n          aria-expanded={isActive}\n          aria-controls={`itemContentFor_${id}`}\n          tabIndex={!disabled ? 0 : undefined}\n          onMouseDown={defaultOnMouseDownHandler}\n          onClick={() => !disabled && onItemClick(item)}\n          onKeyDown={(event) => event.key === 'Enter' && onItemClick(item)}\n          {...rest}>\n          <ContentAccordionItemHeaderIcon>\n            {multi ? isActive ? <SystemIcons.Minus aria-hidden=\"true\" /> : <SystemIcons.Plus aria-hidden=\"true\" /> : isActive ?\n              <SystemIcons.ChevronDown aria-hidden=\"true\" /> : <SystemIcons.ChevronRight aria-hidden=\"true\" />}\n          </ContentAccordionItemHeaderIcon>\n          <ContentAccordionItemHeaderText>{title}</ContentAccordionItemHeaderText>\n        </ContentAccordionItemHeader>\n        <ContentAccordionItemContent id={`itemContentFor_${id}`}>\n          {header && <ContentAccordionItemContentHeader>{header}</ContentAccordionItemContentHeader>}\n          <ContentAccordionItemContentBody>{body}</ContentAccordionItemContentBody>\n          {footer && <ContentAccordionItemContentFooter>{footer}</ContentAccordionItemContentFooter>}\n        </ContentAccordionItemContent>\n      </ContentAccordionItem>\n    );\n  };\n\n  const cls = `${size} ${className ?? ''}`.trim();\n\n  return <ContentAccordionWrapper className={cls}>\n    {items.map((item) => renderItem(item))}\n  </ContentAccordionWrapper>;\n};\n\nexport default ContentAccordion;\n"],"mappings":"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"}

package/dist/Accordion/ContentAccordion.js

@@ -97,7 +97,15 @@ export var ContentAccordion = function ContentAccordion(_ref) {
         }
       }, rest), {}, {
         children: [/*#__PURE__*/_jsx(ContentAccordionItemHeaderIcon, {
-          children: multi ? isActive ? /*#__PURE__*/_jsx(SystemIcons.Minus, {}) : /*#__PURE__*/_jsx(SystemIcons.Plus, {}) : isActive ? /*#__PURE__*/_jsx(SystemIcons.ChevronDown, {}) : /*#__PURE__*/_jsx(SystemIcons.ChevronRight, {})
+          children: multi ? isActive ? /*#__PURE__*/_jsx(SystemIcons.Minus, {
+            "aria-hidden": "true"
+          }) : /*#__PURE__*/_jsx(SystemIcons.Plus, {
+            "aria-hidden": "true"
+          }) : isActive ? /*#__PURE__*/_jsx(SystemIcons.ChevronDown, {
+            "aria-hidden": "true"
+          }) : /*#__PURE__*/_jsx(SystemIcons.ChevronRight, {
+            "aria-hidden": "true"
+          })
         }), /*#__PURE__*/_jsx(ContentAccordionItemHeaderText, {
           children: title
         })]

package/dist/Accordion/ContentAccordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContentAccordion.js","names":["React","styled","Size","SystemIcons","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","focusStyles","Z_INDEXES","defaultOnMouseDownHandler","ContentAccordionItemHeader","div","neutral_600","primary_700","primary_20","hover","primary_800","primary_100","active","ContentAccordionItemHeaderIcon","ContentAccordionItemHeaderText","ContentAccordionItemContent","ContentAccordionItemContentHeader","ContentAccordionItemContentBody","p","ContentAccordionItemContentFooter","ContentAccordionItem","neutral_100","neutral_300","ContentAccordionWrapper","Regular","Bold","black","ContentAccordion","items","multi","size","Medium","className","rest","useState","opened","setOpened","useEffect","filter","item","map","id","find","onItemClick","disabled","includes","key","renderItem","title","header","body","footer","isActive","concat","undefined","event","cls","trim"],"sources":["../../src/Accordion/ContentAccordion.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport {Size} from '../types';\nimport {SystemIcons} from '../icons';\nimport {\n  COLORS,\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  focusStyles,\n  Z_INDEXES,\n} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\nexport const ContentAccordionItemHeader = styled.div`\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  min-height: 48px;\n  color: ${COLORS.neutral_600};\n  cursor: pointer;\n\n  &:hover {\n    color: ${COLORS.primary_700};\n    background-color: ${COLORS.primary_20};\n    z-index: ${Z_INDEXES.hover};\n  }\n\n  &:focus {\n    ${focusStyles}\n  }\n\n  &:active {\n    color: ${COLORS.primary_800};\n    background-color: ${COLORS.primary_100};\n    z-index: ${Z_INDEXES.active};\n  }\n`;\n\nexport const ContentAccordionItemHeaderIcon = styled.div`\n  width: 24px;\n  height: 24px;\n\n  svg {\n    width: 24px;\n    height: 24px;\n  }\n`;\n\nexport const ContentAccordionItemHeaderText = styled.div``;\n\nexport const ContentAccordionItemContent = styled.div`\n  display: none;\n  flex-direction: column;\n`;\n\nexport const ContentAccordionItemContentHeader = styled.div``;\n\nexport const ContentAccordionItemContentBody = styled.p``;\n\nexport const ContentAccordionItemContentFooter = styled.div``;\n\nexport const ContentAccordionItem = styled.div`\n  display: flex;\n  flex-direction: column;\n  border-top: 1px solid ${COLORS.neutral_100};\n\n  &.active {\n    ${ContentAccordionItemContent} {\n      display: flex;\n    }\n  }\n\n  &.disabled {\n    ${ContentAccordionItemHeader} {\n      color: ${COLORS.neutral_300};\n      cursor: not-allowed;\n      pointer-events: none;\n    }\n  }\n`;\n\nexport const ContentAccordionWrapper = styled.div`\n  width: 100%;\n  position: relative;\n\n  ${ContentAccordionItem}:last-child {\n    border-bottom: 1px solid ${COLORS.neutral_100};\n  }\n\n  &.small {\n    min-width: 320px;\n    max-width: 528px;\n\n    ${ContentAccordionItemHeader} {\n      gap: 8px;\n      padding: 0 8px;\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${ContentAccordionItemContent} {\n      padding: 0 8px 16px 40px;\n      gap: 8px;\n\n      ${ContentAccordionItemContentHeader} {\n        ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.black)}\n      }\n\n      ${ContentAccordionItemContentBody} {\n        //TODO\n      }\n    }\n  }\n\n  &.medium {\n    min-width: 344px;\n    max-width: 584px;\n\n    ${ContentAccordionItemHeader} {\n      gap: 12px;\n      padding: 0 12px;\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${ContentAccordionItemContent} {\n      padding: 8px 12px 24px 48px;\n      gap: 12px;\n\n      ${ContentAccordionItemContentHeader} {\n        ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.black)}\n      }\n\n      ${ContentAccordionItemContentBody} {\n        //TODO\n      }\n    }\n  }\n\n  &.large {\n    min-width: 384px;\n    max-width: 656px;\n\n    ${ContentAccordionItemHeader} {\n      gap: 16px;\n      padding: 0 16px;\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${ContentAccordionItemContent} {\n      padding: 16px 16px 32px 56px;\n      gap: 16px;\n\n      ${ContentAccordionItemContentHeader} {\n        ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.black)}\n      }\n\n      ${ContentAccordionItemContentBody} {\n        //TODO\n      }\n    }\n  }\n`;\n\nexport interface ContentAccordionItem extends Omit<React.HTMLAttributes<HTMLDivElement>, 'id' | 'onMouseDown' | 'onClick' | 'onKeyDown'> {\n  id: string;\n  title: string;\n  header?: string;\n  body: any;\n  footer?: any;\n  disabled?: boolean;\n  active?: boolean;\n}\n\nexport interface ContentAccordionProps extends React.HTMLAttributes<HTMLDivElement> {\n  items: ContentAccordionItem[];\n  multi?: boolean;\n  size?: Size.Small | Size.Medium | Size.Large;\n}\n\nexport const ContentAccordion: React.FunctionComponent<ContentAccordionProps> = ({\n                                                                                   items,\n                                                                                   multi = false,\n                                                                                   size = Size.Medium,\n                                                                                   className,\n                                                                                   ...rest\n                                                                                 }) => {\n  const [opened, setOpened] = React.useState<string[]>([]);\n\n  React.useEffect(() => {\n    if (multi) {\n      setOpened(items.filter((item) => item.active).map((item) => item.id));\n    } else {\n      let active = items.find((item) => !!item.active)?.id;\n      if (active) {\n        setOpened([active]);\n      }\n    }\n  }, [items, multi]);\n\n  const onItemClick = (item: ContentAccordionItem) => {\n    if (item.disabled) return;\n    if (opened.includes(item.id)) {\n      setOpened(opened.filter((key) => key !== item.id));\n    } else {\n      if (multi) {\n        setOpened([...opened, item.id]);\n      } else {\n        setOpened([item.id]);\n      }\n    }\n  };\n\n  const renderItem = (item: ContentAccordionItem) => {\n    const {id, title, header, body, footer, disabled, active, ...rest} = item;\n    const isActive = opened.includes(id);\n\n    return (\n      <ContentAccordionItem key={id} id={`item_${id}`}\n                            className={''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')}>\n        <ContentAccordionItemHeader\n          role=\"button\"\n          id={`headerFor_${id}`}\n          aria-expanded={isActive}\n          aria-controls={`itemContentFor_${id}`}\n          tabIndex={!disabled ? 0 : undefined}\n          onMouseDown={defaultOnMouseDownHandler}\n          onClick={() => !disabled && onItemClick(item)}\n          onKeyDown={(event) => event.key === 'Enter' && onItemClick(item)}\n          {...rest}>\n          <ContentAccordionItemHeaderIcon>\n            {multi ? isActive ? <SystemIcons.Minus/> : <SystemIcons.Plus/> : isActive ?\n              <SystemIcons.ChevronDown/> : <SystemIcons.ChevronRight/>}\n          </ContentAccordionItemHeaderIcon>\n          <ContentAccordionItemHeaderText>{title}</ContentAccordionItemHeaderText>\n        </ContentAccordionItemHeader>\n        <ContentAccordionItemContent id={`itemContentFor_${id}`}>\n          {header && <ContentAccordionItemContentHeader>{header}</ContentAccordionItemContentHeader>}\n          <ContentAccordionItemContentBody>{body}</ContentAccordionItemContentBody>\n          {footer && <ContentAccordionItemContentFooter>{footer}</ContentAccordionItemContentFooter>}\n        </ContentAccordionItemContent>\n      </ContentAccordionItem>\n    );\n  };\n\n  const cls = `${size} ${className ?? ''}`.trim();\n\n  return <ContentAccordionWrapper className={cls}>\n    {items.map((item) => renderItem(item))}\n  </ContentAccordionWrapper>;\n};\n\nexport default ContentAccordion;\n"],"mappings":"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"}
+{"version":3,"file":"ContentAccordion.js","names":["React","styled","Size","SystemIcons","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","focusStyles","Z_INDEXES","defaultOnMouseDownHandler","ContentAccordionItemHeader","div","neutral_600","primary_700","primary_20","hover","primary_800","primary_100","active","ContentAccordionItemHeaderIcon","ContentAccordionItemHeaderText","ContentAccordionItemContent","ContentAccordionItemContentHeader","ContentAccordionItemContentBody","p","ContentAccordionItemContentFooter","ContentAccordionItem","neutral_100","neutral_300","ContentAccordionWrapper","Regular","Bold","black","ContentAccordion","items","multi","size","Medium","className","rest","useState","opened","setOpened","useEffect","filter","item","map","id","find","onItemClick","disabled","includes","key","renderItem","title","header","body","footer","isActive","concat","undefined","event","cls","trim"],"sources":["../../src/Accordion/ContentAccordion.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport {Size} from '../types';\nimport {SystemIcons} from '../icons';\nimport {\n  COLORS,\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  focusStyles,\n  Z_INDEXES,\n} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\nexport const ContentAccordionItemHeader = styled.div`\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  min-height: 48px;\n  color: ${COLORS.neutral_600};\n  cursor: pointer;\n\n  &:hover {\n    color: ${COLORS.primary_700};\n    background-color: ${COLORS.primary_20};\n    z-index: ${Z_INDEXES.hover};\n  }\n\n  &:focus {\n    ${focusStyles}\n  }\n\n  &:active {\n    color: ${COLORS.primary_800};\n    background-color: ${COLORS.primary_100};\n    z-index: ${Z_INDEXES.active};\n  }\n`;\n\nexport const ContentAccordionItemHeaderIcon = styled.div`\n  width: 24px;\n  height: 24px;\n\n  svg {\n    width: 24px;\n    height: 24px;\n  }\n`;\n\nexport const ContentAccordionItemHeaderText = styled.div``;\n\nexport const ContentAccordionItemContent = styled.div`\n  display: none;\n  flex-direction: column;\n`;\n\nexport const ContentAccordionItemContentHeader = styled.div``;\n\nexport const ContentAccordionItemContentBody = styled.p``;\n\nexport const ContentAccordionItemContentFooter = styled.div``;\n\nexport const ContentAccordionItem = styled.div`\n  display: flex;\n  flex-direction: column;\n  border-top: 1px solid ${COLORS.neutral_100};\n\n  &.active {\n    ${ContentAccordionItemContent} {\n      display: flex;\n    }\n  }\n\n  &.disabled {\n    ${ContentAccordionItemHeader} {\n      color: ${COLORS.neutral_300};\n      cursor: not-allowed;\n      pointer-events: none;\n    }\n  }\n`;\n\nexport const ContentAccordionWrapper = styled.div`\n  width: 100%;\n  position: relative;\n\n  ${ContentAccordionItem}:last-child {\n    border-bottom: 1px solid ${COLORS.neutral_100};\n  }\n\n  &.small {\n    min-width: 320px;\n    max-width: 528px;\n\n    ${ContentAccordionItemHeader} {\n      gap: 8px;\n      padding: 0 8px;\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${ContentAccordionItemContent} {\n      padding: 0 8px 16px 40px;\n      gap: 8px;\n\n      ${ContentAccordionItemContentHeader} {\n        ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.black)}\n      }\n\n      ${ContentAccordionItemContentBody} {\n        //TODO\n      }\n    }\n  }\n\n  &.medium {\n    min-width: 344px;\n    max-width: 584px;\n\n    ${ContentAccordionItemHeader} {\n      gap: 12px;\n      padding: 0 12px;\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${ContentAccordionItemContent} {\n      padding: 8px 12px 24px 48px;\n      gap: 12px;\n\n      ${ContentAccordionItemContentHeader} {\n        ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.black)}\n      }\n\n      ${ContentAccordionItemContentBody} {\n        //TODO\n      }\n    }\n  }\n\n  &.large {\n    min-width: 384px;\n    max-width: 656px;\n\n    ${ContentAccordionItemHeader} {\n      gap: 16px;\n      padding: 0 16px;\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${ContentAccordionItemContent} {\n      padding: 16px 16px 32px 56px;\n      gap: 16px;\n\n      ${ContentAccordionItemContentHeader} {\n        ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.black)}\n      }\n\n      ${ContentAccordionItemContentBody} {\n        //TODO\n      }\n    }\n  }\n`;\n\nexport interface ContentAccordionItem extends Omit<React.HTMLAttributes<HTMLDivElement>, 'id' | 'onMouseDown' | 'onClick' | 'onKeyDown'> {\n  id: string;\n  title: string;\n  header?: string;\n  body: any;\n  footer?: any;\n  disabled?: boolean;\n  active?: boolean;\n}\n\nexport interface ContentAccordionProps extends React.HTMLAttributes<HTMLDivElement> {\n  items: ContentAccordionItem[];\n  multi?: boolean;\n  size?: Size.Small | Size.Medium | Size.Large;\n}\n\nexport const ContentAccordion: React.FunctionComponent<ContentAccordionProps> = ({\n                                                                                   items,\n                                                                                   multi = false,\n                                                                                   size = Size.Medium,\n                                                                                   className,\n                                                                                   ...rest\n                                                                                 }) => {\n  const [opened, setOpened] = React.useState<string[]>([]);\n\n  React.useEffect(() => {\n    if (multi) {\n      setOpened(items.filter((item) => item.active).map((item) => item.id));\n    } else {\n      let active = items.find((item) => !!item.active)?.id;\n      if (active) {\n        setOpened([active]);\n      }\n    }\n  }, [items, multi]);\n\n  const onItemClick = (item: ContentAccordionItem) => {\n    if (item.disabled) return;\n    if (opened.includes(item.id)) {\n      setOpened(opened.filter((key) => key !== item.id));\n    } else {\n      if (multi) {\n        setOpened([...opened, item.id]);\n      } else {\n        setOpened([item.id]);\n      }\n    }\n  };\n\n  const renderItem = (item: ContentAccordionItem) => {\n    const {id, title, header, body, footer, disabled, active, ...rest} = item;\n    const isActive = opened.includes(id);\n\n    return (\n      <ContentAccordionItem key={id} id={`item_${id}`}\n                            className={''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')}>\n        <ContentAccordionItemHeader\n          role=\"button\"\n          id={`headerFor_${id}`}\n          aria-expanded={isActive}\n          aria-controls={`itemContentFor_${id}`}\n          tabIndex={!disabled ? 0 : undefined}\n          onMouseDown={defaultOnMouseDownHandler}\n          onClick={() => !disabled && onItemClick(item)}\n          onKeyDown={(event) => event.key === 'Enter' && onItemClick(item)}\n          {...rest}>\n          <ContentAccordionItemHeaderIcon>\n            {multi ? isActive ? <SystemIcons.Minus aria-hidden=\"true\" /> : <SystemIcons.Plus aria-hidden=\"true\" /> : isActive ?\n              <SystemIcons.ChevronDown aria-hidden=\"true\" /> : <SystemIcons.ChevronRight aria-hidden=\"true\" />}\n          </ContentAccordionItemHeaderIcon>\n          <ContentAccordionItemHeaderText>{title}</ContentAccordionItemHeaderText>\n        </ContentAccordionItemHeader>\n        <ContentAccordionItemContent id={`itemContentFor_${id}`}>\n          {header && <ContentAccordionItemContentHeader>{header}</ContentAccordionItemContentHeader>}\n          <ContentAccordionItemContentBody>{body}</ContentAccordionItemContentBody>\n          {footer && <ContentAccordionItemContentFooter>{footer}</ContentAccordionItemContentFooter>}\n        </ContentAccordionItemContent>\n      </ContentAccordionItem>\n    );\n  };\n\n  const cls = `${size} ${className ?? ''}`.trim();\n\n  return <ContentAccordionWrapper className={cls}>\n    {items.map((item) => renderItem(item))}\n  </ContentAccordionWrapper>;\n};\n\nexport default ContentAccordion;\n"],"mappings":"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"}

package/dist/Button/BackButton.cjs

@@ -39,6 +39,7 @@ var BackButton = function BackButton(_ref) {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: 'button-content',
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        "aria-hidden": "true",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ArrowLineLeft, {
           size: size === _types.Size.XSmall ? '20' : '24'
         })

package/dist/Button/BackButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BackButton.cjs","names":["Button","styled","button","props","size","Size","XSmall","ComponentXSStyling","ComponentTextStyle","Bold","COLORS","neutral_600","ComponentSStyling","primary_20","primary_700","focusStyles","primary_100","primary_800","neutral_300","BackButton","children","Small","dataTestId","defaultOnMouseDownHandler","disabled"],"sources":["../../src/Button/BackButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, focusStyles} from '../styles';\nimport { Size, Testable } from '../types';\nimport { SystemIcons } from '../icons';\nimport { ComponentTextStyle, ComponentSStyling, ComponentXSStyling } from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst Button = styled.button<BackButtonProps>`\n  box-sizing: border-box;\n  min-height: 48px;\n  padding: 0;\n  margin: 0;\n  outline:none;\n  max-width: max-content;\n  display: flex;\n  align-items: center;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n\n  ${(props) => (props.size === Size.XSmall ? ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600) : ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600))};\n  font-feature-settings: 'liga' off;\n\n  & > .button-content {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-start;\n    max-width: max-content;\n    padding: 4px 4px 4px 0;\n    border-radius: 4px;\n    cursor: inherit;\n    min-width: 64px;\n\n  }\n\n  & > .button-content > span {\n    display: flex;\n    cursor: inherit;\n  }\n  & > .button-content > label {\n    display: flex;\n    cursor: inherit;\n    flex-grow: 1;\n    justify-content: center;\n  }\n\n  &:hover > .button-content,\n  &.hover-state > .button-content {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n  &:focus > .button-content,\n  &.focus-state > .button-content {\n    ${focusStyles}\n  }\n  &:active > .button-content,\n  &.active-state > .button-content {\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n  &:disabled > .button-content {\n    color: ${COLORS.neutral_300} !important;\n    background-color: transparent !important;\n  }\n`;\n\ninterface BackButtonProps extends Testable, React.ButtonHTMLAttributes<HTMLButtonElement> {\n  size: Size.Small | Size.XSmall;\n  disabled?: boolean;\n}\nconst BackButton: React.FunctionComponent<BackButtonProps> = ({ children, size = Size.Small, dataTestId, ...props }) => {\n  return (\n    <Button {...props} size={size} onMouseDown={defaultOnMouseDownHandler} dataTestId={dataTestId}>\n      <div className={'button-content'}>\n        <span>\n          <SystemIcons.ArrowLineLeft size={size === Size.XSmall ? '20' : '24'} />\n        </span>\n        <label>{children}</label>\n      </div>\n    </Button>\n  );\n};\n\nexport default BackButton;\n"],"mappings":";;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAEA;AAAoD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEpD,IAAMA,MAAM,GAAGC,yBAAM,CAACC,MAAM,ozCAaxB,UAACC,KAAK;EAAA,OAAMA,KAAK,CAACC,IAAI,KAAKC,WAAI,CAACC,MAAM,GAAG,IAAAC,0BAAkB,EAACC,0BAAkB,CAACC,IAAI,EAAEC,cAAM,CAACC,WAAW,CAAC,GAAG,IAAAC,yBAAiB,EAACJ,0BAAkB,CAACC,IAAI,EAAEC,cAAM,CAACC,WAAW,CAAC;AAAA,CAAC,EA6BtJD,cAAM,CAACG,UAAU,EAC5BH,cAAM,CAACI,WAAW,EAIzBC,mBAAW,EAIOL,cAAM,CAACM,WAAW,EAC7BN,cAAM,CAACO,WAAW,EAMlBP,cAAM,CAACQ,WAAW,CAG9B;AAMD,IAAMC,UAAoD,GAAG,SAAvDA,UAAoD,OAA8D;EAAA,IAAxDC,QAAQ,QAARA,QAAQ;IAAA,iBAAEhB,IAAI;IAAJA,IAAI,0BAAGC,WAAI,CAACgB,KAAK;IAAEC,UAAU,QAAVA,UAAU;IAAKnB,KAAK;EAC/G,oBACE,qBAAC,MAAM,kCAAKA,KAAK;IAAE,IAAI,EAAEC,IAAK;IAAC,WAAW,EAAEmB,iCAA0B;IAAC,UAAU,EAAED,UAAW;IAAA,uBAC5F;MAAK,SAAS,EAAE,gBAAiB;MAAA,wBAC/B;QAAA,uBACE,qBAAC,kBAAW,CAAC,aAAa;UAAC,IAAI,EAAElB,IAAI,KAAKC,WAAI,CAACC,MAAM,GAAG,IAAI,GAAG;QAAK;MAAG,EAClE,eACP;QAAA,UAAQc;MAAQ,EAAS;IAAA;EACrB,GACC;AAEb,CAAC;AAAC;EAbAI,QAAQ;AAAA;AAAA,eAeKL,UAAU;AAAA"}
+{"version":3,"file":"BackButton.cjs","names":["Button","styled","button","props","size","Size","XSmall","ComponentXSStyling","ComponentTextStyle","Bold","COLORS","neutral_600","ComponentSStyling","primary_20","primary_700","focusStyles","primary_100","primary_800","neutral_300","BackButton","children","Small","dataTestId","defaultOnMouseDownHandler","disabled"],"sources":["../../src/Button/BackButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, focusStyles} from '../styles';\nimport { Size, Testable } from '../types';\nimport { SystemIcons } from '../icons';\nimport { ComponentTextStyle, ComponentSStyling, ComponentXSStyling } from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst Button = styled.button<BackButtonProps>`\n  box-sizing: border-box;\n  min-height: 48px;\n  padding: 0;\n  margin: 0;\n  outline:none;\n  max-width: max-content;\n  display: flex;\n  align-items: center;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n\n  ${(props) => (props.size === Size.XSmall ? ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600) : ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600))};\n  font-feature-settings: 'liga' off;\n\n  & > .button-content {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-start;\n    max-width: max-content;\n    padding: 4px 4px 4px 0;\n    border-radius: 4px;\n    cursor: inherit;\n    min-width: 64px;\n\n  }\n\n  & > .button-content > span {\n    display: flex;\n    cursor: inherit;\n  }\n  & > .button-content > label {\n    display: flex;\n    cursor: inherit;\n    flex-grow: 1;\n    justify-content: center;\n  }\n\n  &:hover > .button-content,\n  &.hover-state > .button-content {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n  &:focus > .button-content,\n  &.focus-state > .button-content {\n    ${focusStyles}\n  }\n  &:active > .button-content,\n  &.active-state > .button-content {\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n  &:disabled > .button-content {\n    color: ${COLORS.neutral_300} !important;\n    background-color: transparent !important;\n  }\n`;\n\ninterface BackButtonProps extends Testable, React.ButtonHTMLAttributes<HTMLButtonElement> {\n  size: Size.Small | Size.XSmall;\n  disabled?: boolean;\n}\nconst BackButton: React.FunctionComponent<BackButtonProps> = ({ children, size = Size.Small, dataTestId, ...props }) => {\n  return (\n    <Button {...props} size={size} onMouseDown={defaultOnMouseDownHandler} dataTestId={dataTestId}>\n      <div className={'button-content'}>\n        <span aria-hidden=\"true\">\n          <SystemIcons.ArrowLineLeft size={size === Size.XSmall ? '20' : '24'} />\n        </span>\n        <label>{children}</label>\n      </div>\n    </Button>\n  );\n};\n\nexport default BackButton;\n"],"mappings":";;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAEA;AAAoD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEpD,IAAMA,MAAM,GAAGC,yBAAM,CAACC,MAAM,ozCAaxB,UAACC,KAAK;EAAA,OAAMA,KAAK,CAACC,IAAI,KAAKC,WAAI,CAACC,MAAM,GAAG,IAAAC,0BAAkB,EAACC,0BAAkB,CAACC,IAAI,EAAEC,cAAM,CAACC,WAAW,CAAC,GAAG,IAAAC,yBAAiB,EAACJ,0BAAkB,CAACC,IAAI,EAAEC,cAAM,CAACC,WAAW,CAAC;AAAA,CAAC,EA6BtJD,cAAM,CAACG,UAAU,EAC5BH,cAAM,CAACI,WAAW,EAIzBC,mBAAW,EAIOL,cAAM,CAACM,WAAW,EAC7BN,cAAM,CAACO,WAAW,EAMlBP,cAAM,CAACQ,WAAW,CAG9B;AAMD,IAAMC,UAAoD,GAAG,SAAvDA,UAAoD,OAA8D;EAAA,IAAxDC,QAAQ,QAARA,QAAQ;IAAA,iBAAEhB,IAAI;IAAJA,IAAI,0BAAGC,WAAI,CAACgB,KAAK;IAAEC,UAAU,QAAVA,UAAU;IAAKnB,KAAK;EAC/G,oBACE,qBAAC,MAAM,kCAAKA,KAAK;IAAE,IAAI,EAAEC,IAAK;IAAC,WAAW,EAAEmB,iCAA0B;IAAC,UAAU,EAAED,UAAW;IAAA,uBAC5F;MAAK,SAAS,EAAE,gBAAiB;MAAA,wBAC/B;QAAM,eAAY,MAAM;QAAA,uBACtB,qBAAC,kBAAW,CAAC,aAAa;UAAC,IAAI,EAAElB,IAAI,KAAKC,WAAI,CAACC,MAAM,GAAG,IAAI,GAAG;QAAK;MAAG,EAClE,eACP;QAAA,UAAQc;MAAQ,EAAS;IAAA;EACrB,GACC;AAEb,CAAC;AAAC;EAbAI,QAAQ;AAAA;AAAA,eAeKL,UAAU;AAAA"}

package/dist/Button/BackButton.js

@@ -31,6 +31,7 @@ var BackButton = function BackButton(_ref) {
     children: /*#__PURE__*/_jsxs("div", {
       className: 'button-content',
       children: [/*#__PURE__*/_jsx("span", {
+        "aria-hidden": "true",
         children: /*#__PURE__*/_jsx(SystemIcons.ArrowLineLeft, {
           size: size === Size.XSmall ? '20' : '24'
         })

package/dist/Button/BackButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"BackButton.js","names":["React","styled","COLORS","focusStyles","Size","SystemIcons","ComponentTextStyle","ComponentSStyling","ComponentXSStyling","defaultOnMouseDownHandler","Button","button","props","size","XSmall","Bold","neutral_600","primary_20","primary_700","primary_100","primary_800","neutral_300","BackButton","children","Small","dataTestId","disabled"],"sources":["../../src/Button/BackButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, focusStyles} from '../styles';\nimport { Size, Testable } from '../types';\nimport { SystemIcons } from '../icons';\nimport { ComponentTextStyle, ComponentSStyling, ComponentXSStyling } from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst Button = styled.button<BackButtonProps>`\n  box-sizing: border-box;\n  min-height: 48px;\n  padding: 0;\n  margin: 0;\n  outline:none;\n  max-width: max-content;\n  display: flex;\n  align-items: center;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n\n  ${(props) => (props.size === Size.XSmall ? ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600) : ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600))};\n  font-feature-settings: 'liga' off;\n\n  & > .button-content {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-start;\n    max-width: max-content;\n    padding: 4px 4px 4px 0;\n    border-radius: 4px;\n    cursor: inherit;\n    min-width: 64px;\n\n  }\n\n  & > .button-content > span {\n    display: flex;\n    cursor: inherit;\n  }\n  & > .button-content > label {\n    display: flex;\n    cursor: inherit;\n    flex-grow: 1;\n    justify-content: center;\n  }\n\n  &:hover > .button-content,\n  &.hover-state > .button-content {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n  &:focus > .button-content,\n  &.focus-state > .button-content {\n    ${focusStyles}\n  }\n  &:active > .button-content,\n  &.active-state > .button-content {\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n  &:disabled > .button-content {\n    color: ${COLORS.neutral_300} !important;\n    background-color: transparent !important;\n  }\n`;\n\ninterface BackButtonProps extends Testable, React.ButtonHTMLAttributes<HTMLButtonElement> {\n  size: Size.Small | Size.XSmall;\n  disabled?: boolean;\n}\nconst BackButton: React.FunctionComponent<BackButtonProps> = ({ children, size = Size.Small, dataTestId, ...props }) => {\n  return (\n    <Button {...props} size={size} onMouseDown={defaultOnMouseDownHandler} dataTestId={dataTestId}>\n      <div className={'button-content'}>\n        <span>\n          <SystemIcons.ArrowLineLeft size={size === Size.XSmall ? '20' : '24'} />\n        </span>\n        <label>{children}</label>\n      </div>\n    </Button>\n  );\n};\n\nexport default BackButton;\n"],"mappings":";;;;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,MAAM,EAAEC,WAAW,QAAO,WAAW;AAC7C,SAASC,IAAI,QAAkB,UAAU;AACzC,SAASC,WAAW,QAAQ,UAAU;AACtC,SAASC,kBAAkB,EAAEC,iBAAiB,EAAEC,kBAAkB,QAAQ,WAAW;AACrF,SAAQC,yBAAyB,QAAO,WAAW;AAAC;AAAA;AAEpD,IAAMC,MAAM,GAAGT,MAAM,CAACU,MAAM,syCAaxB,UAACC,KAAK;EAAA,OAAMA,KAAK,CAACC,IAAI,KAAKT,IAAI,CAACU,MAAM,GAAGN,kBAAkB,CAACF,kBAAkB,CAACS,IAAI,EAAEb,MAAM,CAACc,WAAW,CAAC,GAAGT,iBAAiB,CAACD,kBAAkB,CAACS,IAAI,EAAEb,MAAM,CAACc,WAAW,CAAC;AAAA,CAAC,EA6BtJd,MAAM,CAACe,UAAU,EAC5Bf,MAAM,CAACgB,WAAW,EAIzBf,WAAW,EAIOD,MAAM,CAACiB,WAAW,EAC7BjB,MAAM,CAACkB,WAAW,EAMlBlB,MAAM,CAACmB,WAAW,CAG9B;AAMD,IAAMC,UAAoD,GAAG,SAAvDA,UAAoD,OAA8D;EAAA,IAAxDC,QAAQ,QAARA,QAAQ;IAAA,iBAAEV,IAAI;IAAJA,IAAI,0BAAGT,IAAI,CAACoB,KAAK;IAAEC,UAAU,QAAVA,UAAU;IAAKb,KAAK;EAC/G,oBACE,KAAC,MAAM,kCAAKA,KAAK;IAAE,IAAI,EAAEC,IAAK;IAAC,WAAW,EAAEJ,yBAA0B;IAAC,UAAU,EAAEgB,UAAW;IAAA,uBAC5F;MAAK,SAAS,EAAE,gBAAiB;MAAA,wBAC/B;QAAA,uBACE,KAAC,WAAW,CAAC,aAAa;UAAC,IAAI,EAAEZ,IAAI,KAAKT,IAAI,CAACU,MAAM,GAAG,IAAI,GAAG;QAAK;MAAG,EAClE,eACP;QAAA,UAAQS;MAAQ,EAAS;IAAA;EACrB,GACC;AAEb,CAAC;AAAC;EAbAG,QAAQ;AAAA;AAeV,eAAeJ,UAAU"}
+{"version":3,"file":"BackButton.js","names":["React","styled","COLORS","focusStyles","Size","SystemIcons","ComponentTextStyle","ComponentSStyling","ComponentXSStyling","defaultOnMouseDownHandler","Button","button","props","size","XSmall","Bold","neutral_600","primary_20","primary_700","primary_100","primary_800","neutral_300","BackButton","children","Small","dataTestId","disabled"],"sources":["../../src/Button/BackButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, focusStyles} from '../styles';\nimport { Size, Testable } from '../types';\nimport { SystemIcons } from '../icons';\nimport { ComponentTextStyle, ComponentSStyling, ComponentXSStyling } from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst Button = styled.button<BackButtonProps>`\n  box-sizing: border-box;\n  min-height: 48px;\n  padding: 0;\n  margin: 0;\n  outline:none;\n  max-width: max-content;\n  display: flex;\n  align-items: center;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n\n  ${(props) => (props.size === Size.XSmall ? ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600) : ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600))};\n  font-feature-settings: 'liga' off;\n\n  & > .button-content {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-start;\n    max-width: max-content;\n    padding: 4px 4px 4px 0;\n    border-radius: 4px;\n    cursor: inherit;\n    min-width: 64px;\n\n  }\n\n  & > .button-content > span {\n    display: flex;\n    cursor: inherit;\n  }\n  & > .button-content > label {\n    display: flex;\n    cursor: inherit;\n    flex-grow: 1;\n    justify-content: center;\n  }\n\n  &:hover > .button-content,\n  &.hover-state > .button-content {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n  &:focus > .button-content,\n  &.focus-state > .button-content {\n    ${focusStyles}\n  }\n  &:active > .button-content,\n  &.active-state > .button-content {\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n  &:disabled > .button-content {\n    color: ${COLORS.neutral_300} !important;\n    background-color: transparent !important;\n  }\n`;\n\ninterface BackButtonProps extends Testable, React.ButtonHTMLAttributes<HTMLButtonElement> {\n  size: Size.Small | Size.XSmall;\n  disabled?: boolean;\n}\nconst BackButton: React.FunctionComponent<BackButtonProps> = ({ children, size = Size.Small, dataTestId, ...props }) => {\n  return (\n    <Button {...props} size={size} onMouseDown={defaultOnMouseDownHandler} dataTestId={dataTestId}>\n      <div className={'button-content'}>\n        <span aria-hidden=\"true\">\n          <SystemIcons.ArrowLineLeft size={size === Size.XSmall ? '20' : '24'} />\n        </span>\n        <label>{children}</label>\n      </div>\n    </Button>\n  );\n};\n\nexport default BackButton;\n"],"mappings":";;;;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,MAAM,EAAEC,WAAW,QAAO,WAAW;AAC7C,SAASC,IAAI,QAAkB,UAAU;AACzC,SAASC,WAAW,QAAQ,UAAU;AACtC,SAASC,kBAAkB,EAAEC,iBAAiB,EAAEC,kBAAkB,QAAQ,WAAW;AACrF,SAAQC,yBAAyB,QAAO,WAAW;AAAC;AAAA;AAEpD,IAAMC,MAAM,GAAGT,MAAM,CAACU,MAAM,syCAaxB,UAACC,KAAK;EAAA,OAAMA,KAAK,CAACC,IAAI,KAAKT,IAAI,CAACU,MAAM,GAAGN,kBAAkB,CAACF,kBAAkB,CAACS,IAAI,EAAEb,MAAM,CAACc,WAAW,CAAC,GAAGT,iBAAiB,CAACD,kBAAkB,CAACS,IAAI,EAAEb,MAAM,CAACc,WAAW,CAAC;AAAA,CAAC,EA6BtJd,MAAM,CAACe,UAAU,EAC5Bf,MAAM,CAACgB,WAAW,EAIzBf,WAAW,EAIOD,MAAM,CAACiB,WAAW,EAC7BjB,MAAM,CAACkB,WAAW,EAMlBlB,MAAM,CAACmB,WAAW,CAG9B;AAMD,IAAMC,UAAoD,GAAG,SAAvDA,UAAoD,OAA8D;EAAA,IAAxDC,QAAQ,QAARA,QAAQ;IAAA,iBAAEV,IAAI;IAAJA,IAAI,0BAAGT,IAAI,CAACoB,KAAK;IAAEC,UAAU,QAAVA,UAAU;IAAKb,KAAK;EAC/G,oBACE,KAAC,MAAM,kCAAKA,KAAK;IAAE,IAAI,EAAEC,IAAK;IAAC,WAAW,EAAEJ,yBAA0B;IAAC,UAAU,EAAEgB,UAAW;IAAA,uBAC5F;MAAK,SAAS,EAAE,gBAAiB;MAAA,wBAC/B;QAAM,eAAY,MAAM;QAAA,uBACtB,KAAC,WAAW,CAAC,aAAa;UAAC,IAAI,EAAEZ,IAAI,KAAKT,IAAI,CAACU,MAAM,GAAG,IAAI,GAAG;QAAK;MAAG,EAClE,eACP;QAAA,UAAQS;MAAQ,EAAS;IAAA;EACrB,GACC;AAEb,CAAC;AAAC;EAbAG,QAAQ;AAAA;AAeV,eAAeJ,UAAU"}

package/dist/Button/DualFunctionButton.cjs

@@ -28,7 +28,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var ButtonsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n\n  button:first-child {\n    margin-right: 2px;\n  }\n\n  div.button-content {\n    gap: 0px;\n    padding: ", ";\n  }\n"])), function (props) {
+var ButtonsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n\n  button:first-child {\n    margin-right: 2px;\n  }\n\n  div.button-content {\n    gap: 0px;\n    padding: ", ";\n  }\n\n  .extraMargin {\n    margin-bottom: 4px;\n  }\n"])), function (props) {
   return props.size == _types.Size.Large ? '4px 18px' : props.size == _types.Size.Medium ? '4px 14px' : '4px 10px';
 });
 var DualFunctionButton = function DualFunctionButton(_ref) {
@@ -137,6 +137,7 @@ var DualFunctionButton = function DualFunctionButton(_ref) {
           setKeyboardNavigated(true);
         }
       },
+      className: "extraMargin",
       testId: 'options_toggleBtn',
       ref: dropdownButtonRef,
       "aria-activedescendant": activeDescendant,
@@ -151,8 +152,10 @@ var DualFunctionButton = function DualFunctionButton(_ref) {
         setIsOpen(!isOpen);
       },
       icon: isOpen ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ArrowDropUp, {
+        "aria-hidden": "true",
         size: "16px"
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ArrowDropDown, {
+        "aria-hidden": "true",
         size: "16px"
       }),
       flatEdge: "left"

package/dist/Button/DualFunctionButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DualFunctionButton.cjs","names":["ButtonsContainer","styled","div","props","size","Size","Large","Medium","DualFunctionButton","children","variant","type","width","testId","disabled","id","dropdownMenuValues","setDropdownMenuValues","dropdownCustomizationProps","loading","icon","onClick","renderProps","React","useState","isOpen","setIsOpen","activeDescendant","setActiveDescendant","focused","setFocused","keyboardNavigated","setKeyboardNavigated","dropdownContainerRef","useRef","selectedValues","setSelectedValues","dropdownContentRef","dropdownButtonRef","useClickOutsideRef","useFocusOutsideRef","dropdownContentId","nanoid","useEffect","itemsType","e","key","stopPropagation"],"sources":["../../src/Button/DualFunctionButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport Button, { ButtonProps } from './Button';\nimport { SystemIcons } from '../icons';\nimport { Dropdown } from '../Dropdown/CommonStyling';\nimport { nanoid } from 'nanoid';\nimport { Size } from '../types';\nimport DropdownContent, { DropdownCustomizationProps } from '../Dropdown/DropdownContent';\nimport styled from 'styled-components';\nimport { useClickOutsideRef, useFocusOutsideRef } from '../common';\n\nconst ButtonsContainer = styled.div<{ size?: Size }>`\n  display: flex;\n  align-items: center;\n\n  button:first-child {\n    margin-right: 2px;\n  }\n\n  div.button-content {\n    gap: 0px;\n    padding: ${(props) => (props.size == Size.Large ? '4px 18px' : props.size == Size.Medium ? '4px 14px' : '4px 10px')};\n  }\n`;\n\nexport interface ButtonOption {\n  label: string;\n}\n\nexport interface DualButtonProps extends ButtonProps {\n  dropdownCustomizationProps: DropdownCustomizationProps;\n  dropdownMenuValues?: string[];\n  setDropdownMenuValues?: (values: string[]) => void | boolean | undefined;\n}\n\nconst DualFunctionButton: React.FunctionComponent<DualButtonProps> = ({\n  children = 'Primary Button',\n  variant = 'primary',\n  type = 'button',\n  size = Size.Medium,\n  width = 'auto',\n  testId,\n  disabled,\n  id,\n  dropdownMenuValues,\n  setDropdownMenuValues,\n  dropdownCustomizationProps,\n  ...props\n}) => {\n  // Let's filter out properties that we don't need to render.\n  const { loading, icon, onClick, ...renderProps } = props;\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [activeDescendant, setActiveDescendant] = React.useState<string>();\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\n  const dropdownContainerRef = React.useRef<HTMLDivElement>(null);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n\n  const dropdownContentRef = React.useRef<HTMLDivElement>(null);\n  const dropdownButtonRef = useClickOutsideRef(\n    () => setIsOpen(false),\n    [dropdownContainerRef],\n    useFocusOutsideRef(() => setIsOpen(false), [dropdownContentRef]),\n  );\n  \n  const dropdownContentId = id ? id + '_dropdownContent' : nanoid();\n\n  React.useEffect(() => {\n    !isOpen && setKeyboardNavigated(false);\n  }, [isOpen]);\n\n  return (\n    <ButtonsContainer ref={dropdownContainerRef} size={size}>\n      <Dropdown isButton={true} readOnly={false} disabled={false} margin=\"\">\n        <Button {...renderProps} testId={testId} onClick={onClick} disabled={disabled} type={type} loading={loading} icon={icon} size={size} width={width} variant={variant} flatEdge=\"right\">\n          {children}\n        </Button>\n        <DropdownContent\n          containerRef={dropdownContainerRef}\n          customizationProps={dropdownCustomizationProps}\n          filter=\"\"\n          ref={dropdownContentRef}\n          selectedValues={dropdownCustomizationProps.itemsType == 'normal' ? [] : dropdownMenuValues ?? selectedValues}\n          setSelectedValues={setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues}\n          isButton={true}\n          setIsOpen={setIsOpen}\n          focused={focused}\n          onActiveDescendantChanged={(e) => setActiveDescendant(e)}\n          setFocused={setFocused}\n          size={size}\n          outline={keyboardNavigated}\n          isOpen={isOpen}\n          id={dropdownContentId}\n          messageOnNoResults=\"\"\n          alignLeft={true}\n          ariaRolesType=\"menu\"\n        />\n      </Dropdown>\n      <Button\n        variant={variant}\n        {...renderProps}\n        onKeyPress={(e: any) => {\n          if (isOpen) return;\n\n          if (e.key === 'Enter' || e.key === ' ') {\n            setFocused(0);\n            setKeyboardNavigated(true);\n          }\n        }}\n        testId={'options_toggleBtn'}\n        ref={dropdownButtonRef}\n        aria-activedescendant={activeDescendant}\n        role=\"button\"\n        aria-controls={dropdownContentId}\n        disabled={disabled}\n        type={type}\n        size={size}\n        minWidth={'unset'}\n        onClick={(e) => {\n          e.stopPropagation();\n          setIsOpen(!isOpen);\n        }}\n        icon={isOpen ? <SystemIcons.ArrowDropUp size=\"16px\" /> : <SystemIcons.ArrowDropDown size=\"16px\" />}\n        flatEdge=\"left\"\n      />\n    </ButtonsContainer>\n  );\n};\n\nexport default DualFunctionButton;\n"],"mappings":"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"}
+{"version":3,"file":"DualFunctionButton.cjs","names":["ButtonsContainer","styled","div","props","size","Size","Large","Medium","DualFunctionButton","children","variant","type","width","testId","disabled","id","dropdownMenuValues","setDropdownMenuValues","dropdownCustomizationProps","loading","icon","onClick","renderProps","React","useState","isOpen","setIsOpen","activeDescendant","setActiveDescendant","focused","setFocused","keyboardNavigated","setKeyboardNavigated","dropdownContainerRef","useRef","selectedValues","setSelectedValues","dropdownContentRef","dropdownButtonRef","useClickOutsideRef","useFocusOutsideRef","dropdownContentId","nanoid","useEffect","itemsType","e","key","stopPropagation"],"sources":["../../src/Button/DualFunctionButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport Button, { ButtonProps } from './Button';\nimport { SystemIcons } from '../icons';\nimport { Dropdown } from '../Dropdown/CommonStyling';\nimport { nanoid } from 'nanoid';\nimport { Size } from '../types';\nimport DropdownContent, { DropdownCustomizationProps } from '../Dropdown/DropdownContent';\nimport styled from 'styled-components';\nimport { useClickOutsideRef, useFocusOutsideRef } from '../common';\n\nconst ButtonsContainer = styled.div<{ size?: Size }>`\n  display: flex;\n  align-items: center;\n\n  button:first-child {\n    margin-right: 2px;\n  }\n\n  div.button-content {\n    gap: 0px;\n    padding: ${(props) => (props.size == Size.Large ? '4px 18px' : props.size == Size.Medium ? '4px 14px' : '4px 10px')};\n  }\n\n  .extraMargin {\n    margin-bottom: 4px;\n  }\n`;\n\nexport interface ButtonOption {\n  label: string;\n}\n\nexport interface DualButtonProps extends ButtonProps {\n  dropdownCustomizationProps: DropdownCustomizationProps;\n  dropdownMenuValues?: string[];\n  setDropdownMenuValues?: (values: string[]) => void | boolean | undefined;\n}\n\nconst DualFunctionButton: React.FunctionComponent<DualButtonProps> = ({\n  children = 'Primary Button',\n  variant = 'primary',\n  type = 'button',\n  size = Size.Medium,\n  width = 'auto',\n  testId,\n  disabled,\n  id,\n  dropdownMenuValues,\n  setDropdownMenuValues,\n  dropdownCustomizationProps,\n  ...props\n}) => {\n  // Let's filter out properties that we don't need to render.\n  const { loading, icon, onClick, ...renderProps } = props;\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [activeDescendant, setActiveDescendant] = React.useState<string>();\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\n  const dropdownContainerRef = React.useRef<HTMLDivElement>(null);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n\n  const dropdownContentRef = React.useRef<HTMLDivElement>(null);\n  const dropdownButtonRef = useClickOutsideRef(\n    () => setIsOpen(false),\n    [dropdownContainerRef],\n    useFocusOutsideRef(() => setIsOpen(false), [dropdownContentRef]),\n  );\n  \n  const dropdownContentId = id ? id + '_dropdownContent' : nanoid();\n\n  React.useEffect(() => {\n    !isOpen && setKeyboardNavigated(false);\n  }, [isOpen]);\n\n  return (\n    <ButtonsContainer ref={dropdownContainerRef} size={size}>\n      <Dropdown isButton={true} readOnly={false} disabled={false} margin=\"\">\n        <Button {...renderProps} testId={testId} onClick={onClick} disabled={disabled} type={type} loading={loading} icon={icon} size={size} width={width} variant={variant} flatEdge=\"right\">\n          {children}\n        </Button>\n        <DropdownContent\n          containerRef={dropdownContainerRef}\n          customizationProps={dropdownCustomizationProps}\n          filter=\"\"\n          ref={dropdownContentRef}\n          selectedValues={dropdownCustomizationProps.itemsType == 'normal' ? [] : dropdownMenuValues ?? selectedValues}\n          setSelectedValues={setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues}\n          isButton={true}\n          setIsOpen={setIsOpen}\n          focused={focused}\n          onActiveDescendantChanged={(e) => setActiveDescendant(e)}\n          setFocused={setFocused}\n          size={size}\n          outline={keyboardNavigated}\n          isOpen={isOpen}\n          id={dropdownContentId}\n          messageOnNoResults=\"\"\n          alignLeft={true}\n          ariaRolesType=\"menu\"\n        />\n      </Dropdown>\n      <Button\n        variant={variant}\n        {...renderProps}\n        onKeyPress={(e: any) => {\n          if (isOpen) return;\n\n          if (e.key === 'Enter' || e.key === ' ') {\n            setFocused(0);\n            setKeyboardNavigated(true);\n          }\n        }}\n        className=\"extraMargin\"\n        testId={'options_toggleBtn'}\n        ref={dropdownButtonRef}\n        aria-activedescendant={activeDescendant}\n        role=\"button\"\n        aria-controls={dropdownContentId}\n        disabled={disabled}\n        type={type}\n        size={size}\n        minWidth={'unset'}\n        onClick={(e) => {\n          e.stopPropagation();\n          setIsOpen(!isOpen);\n        }}\n        icon={ isOpen ? <SystemIcons.ArrowDropUp aria-hidden=\"true\" size=\"16px\" /> \n        : <SystemIcons.ArrowDropDown aria-hidden=\"true\" size=\"16px\" /> }\n        flatEdge=\"left\"\n      />\n    </ButtonsContainer>\n  );\n};\n\nexport default DualFunctionButton;\n"],"mappings":"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"}

package/dist/Button/DualFunctionButton.js

@@ -19,7 +19,7 @@ import styled from 'styled-components';
 import { useClickOutsideRef, useFocusOutsideRef } from '../common';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var ButtonsContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  button:first-child {\n    margin-right: 2px;\n  }\n\n  div.button-content {\n    gap: 0px;\n    padding: ", ";\n  }\n"])), function (props) {
+var ButtonsContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  button:first-child {\n    margin-right: 2px;\n  }\n\n  div.button-content {\n    gap: 0px;\n    padding: ", ";\n  }\n\n  .extraMargin {\n    margin-bottom: 4px;\n  }\n"])), function (props) {
   return props.size == Size.Large ? '4px 18px' : props.size == Size.Medium ? '4px 14px' : '4px 10px';
 });
 var DualFunctionButton = function DualFunctionButton(_ref) {
@@ -128,6 +128,7 @@ var DualFunctionButton = function DualFunctionButton(_ref) {
           setKeyboardNavigated(true);
         }
       },
+      className: "extraMargin",
       testId: 'options_toggleBtn',
       ref: dropdownButtonRef,
       "aria-activedescendant": activeDescendant,
@@ -142,8 +143,10 @@ var DualFunctionButton = function DualFunctionButton(_ref) {
         setIsOpen(!isOpen);
       },
       icon: isOpen ? /*#__PURE__*/_jsx(SystemIcons.ArrowDropUp, {
+        "aria-hidden": "true",
         size: "16px"
       }) : /*#__PURE__*/_jsx(SystemIcons.ArrowDropDown, {
+        "aria-hidden": "true",
         size: "16px"
       }),
       flatEdge: "left"

package/dist/Button/DualFunctionButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"DualFunctionButton.js","names":["React","Button","SystemIcons","Dropdown","nanoid","Size","DropdownContent","styled","useClickOutsideRef","useFocusOutsideRef","ButtonsContainer","div","props","size","Large","Medium","DualFunctionButton","children","variant","type","width","testId","disabled","id","dropdownMenuValues","setDropdownMenuValues","dropdownCustomizationProps","loading","icon","onClick","renderProps","useState","isOpen","setIsOpen","activeDescendant","setActiveDescendant","focused","setFocused","keyboardNavigated","setKeyboardNavigated","dropdownContainerRef","useRef","selectedValues","setSelectedValues","dropdownContentRef","dropdownButtonRef","dropdownContentId","useEffect","itemsType","e","key","stopPropagation"],"sources":["../../src/Button/DualFunctionButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport Button, { ButtonProps } from './Button';\nimport { SystemIcons } from '../icons';\nimport { Dropdown } from '../Dropdown/CommonStyling';\nimport { nanoid } from 'nanoid';\nimport { Size } from '../types';\nimport DropdownContent, { DropdownCustomizationProps } from '../Dropdown/DropdownContent';\nimport styled from 'styled-components';\nimport { useClickOutsideRef, useFocusOutsideRef } from '../common';\n\nconst ButtonsContainer = styled.div<{ size?: Size }>`\n  display: flex;\n  align-items: center;\n\n  button:first-child {\n    margin-right: 2px;\n  }\n\n  div.button-content {\n    gap: 0px;\n    padding: ${(props) => (props.size == Size.Large ? '4px 18px' : props.size == Size.Medium ? '4px 14px' : '4px 10px')};\n  }\n`;\n\nexport interface ButtonOption {\n  label: string;\n}\n\nexport interface DualButtonProps extends ButtonProps {\n  dropdownCustomizationProps: DropdownCustomizationProps;\n  dropdownMenuValues?: string[];\n  setDropdownMenuValues?: (values: string[]) => void | boolean | undefined;\n}\n\nconst DualFunctionButton: React.FunctionComponent<DualButtonProps> = ({\n  children = 'Primary Button',\n  variant = 'primary',\n  type = 'button',\n  size = Size.Medium,\n  width = 'auto',\n  testId,\n  disabled,\n  id,\n  dropdownMenuValues,\n  setDropdownMenuValues,\n  dropdownCustomizationProps,\n  ...props\n}) => {\n  // Let's filter out properties that we don't need to render.\n  const { loading, icon, onClick, ...renderProps } = props;\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [activeDescendant, setActiveDescendant] = React.useState<string>();\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\n  const dropdownContainerRef = React.useRef<HTMLDivElement>(null);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n\n  const dropdownContentRef = React.useRef<HTMLDivElement>(null);\n  const dropdownButtonRef = useClickOutsideRef(\n    () => setIsOpen(false),\n    [dropdownContainerRef],\n    useFocusOutsideRef(() => setIsOpen(false), [dropdownContentRef]),\n  );\n  \n  const dropdownContentId = id ? id + '_dropdownContent' : nanoid();\n\n  React.useEffect(() => {\n    !isOpen && setKeyboardNavigated(false);\n  }, [isOpen]);\n\n  return (\n    <ButtonsContainer ref={dropdownContainerRef} size={size}>\n      <Dropdown isButton={true} readOnly={false} disabled={false} margin=\"\">\n        <Button {...renderProps} testId={testId} onClick={onClick} disabled={disabled} type={type} loading={loading} icon={icon} size={size} width={width} variant={variant} flatEdge=\"right\">\n          {children}\n        </Button>\n        <DropdownContent\n          containerRef={dropdownContainerRef}\n          customizationProps={dropdownCustomizationProps}\n          filter=\"\"\n          ref={dropdownContentRef}\n          selectedValues={dropdownCustomizationProps.itemsType == 'normal' ? [] : dropdownMenuValues ?? selectedValues}\n          setSelectedValues={setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues}\n          isButton={true}\n          setIsOpen={setIsOpen}\n          focused={focused}\n          onActiveDescendantChanged={(e) => setActiveDescendant(e)}\n          setFocused={setFocused}\n          size={size}\n          outline={keyboardNavigated}\n          isOpen={isOpen}\n          id={dropdownContentId}\n          messageOnNoResults=\"\"\n          alignLeft={true}\n          ariaRolesType=\"menu\"\n        />\n      </Dropdown>\n      <Button\n        variant={variant}\n        {...renderProps}\n        onKeyPress={(e: any) => {\n          if (isOpen) return;\n\n          if (e.key === 'Enter' || e.key === ' ') {\n            setFocused(0);\n            setKeyboardNavigated(true);\n          }\n        }}\n        testId={'options_toggleBtn'}\n        ref={dropdownButtonRef}\n        aria-activedescendant={activeDescendant}\n        role=\"button\"\n        aria-controls={dropdownContentId}\n        disabled={disabled}\n        type={type}\n        size={size}\n        minWidth={'unset'}\n        onClick={(e) => {\n          e.stopPropagation();\n          setIsOpen(!isOpen);\n        }}\n        icon={isOpen ? <SystemIcons.ArrowDropUp size=\"16px\" /> : <SystemIcons.ArrowDropDown size=\"16px\" />}\n        flatEdge=\"left\"\n      />\n    </ButtonsContainer>\n  );\n};\n\nexport default DualFunctionButton;\n"],"mappings":"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"}
+{"version":3,"file":"DualFunctionButton.js","names":["React","Button","SystemIcons","Dropdown","nanoid","Size","DropdownContent","styled","useClickOutsideRef","useFocusOutsideRef","ButtonsContainer","div","props","size","Large","Medium","DualFunctionButton","children","variant","type","width","testId","disabled","id","dropdownMenuValues","setDropdownMenuValues","dropdownCustomizationProps","loading","icon","onClick","renderProps","useState","isOpen","setIsOpen","activeDescendant","setActiveDescendant","focused","setFocused","keyboardNavigated","setKeyboardNavigated","dropdownContainerRef","useRef","selectedValues","setSelectedValues","dropdownContentRef","dropdownButtonRef","dropdownContentId","useEffect","itemsType","e","key","stopPropagation"],"sources":["../../src/Button/DualFunctionButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport Button, { ButtonProps } from './Button';\nimport { SystemIcons } from '../icons';\nimport { Dropdown } from '../Dropdown/CommonStyling';\nimport { nanoid } from 'nanoid';\nimport { Size } from '../types';\nimport DropdownContent, { DropdownCustomizationProps } from '../Dropdown/DropdownContent';\nimport styled from 'styled-components';\nimport { useClickOutsideRef, useFocusOutsideRef } from '../common';\n\nconst ButtonsContainer = styled.div<{ size?: Size }>`\n  display: flex;\n  align-items: center;\n\n  button:first-child {\n    margin-right: 2px;\n  }\n\n  div.button-content {\n    gap: 0px;\n    padding: ${(props) => (props.size == Size.Large ? '4px 18px' : props.size == Size.Medium ? '4px 14px' : '4px 10px')};\n  }\n\n  .extraMargin {\n    margin-bottom: 4px;\n  }\n`;\n\nexport interface ButtonOption {\n  label: string;\n}\n\nexport interface DualButtonProps extends ButtonProps {\n  dropdownCustomizationProps: DropdownCustomizationProps;\n  dropdownMenuValues?: string[];\n  setDropdownMenuValues?: (values: string[]) => void | boolean | undefined;\n}\n\nconst DualFunctionButton: React.FunctionComponent<DualButtonProps> = ({\n  children = 'Primary Button',\n  variant = 'primary',\n  type = 'button',\n  size = Size.Medium,\n  width = 'auto',\n  testId,\n  disabled,\n  id,\n  dropdownMenuValues,\n  setDropdownMenuValues,\n  dropdownCustomizationProps,\n  ...props\n}) => {\n  // Let's filter out properties that we don't need to render.\n  const { loading, icon, onClick, ...renderProps } = props;\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [activeDescendant, setActiveDescendant] = React.useState<string>();\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\n  const dropdownContainerRef = React.useRef<HTMLDivElement>(null);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n\n  const dropdownContentRef = React.useRef<HTMLDivElement>(null);\n  const dropdownButtonRef = useClickOutsideRef(\n    () => setIsOpen(false),\n    [dropdownContainerRef],\n    useFocusOutsideRef(() => setIsOpen(false), [dropdownContentRef]),\n  );\n  \n  const dropdownContentId = id ? id + '_dropdownContent' : nanoid();\n\n  React.useEffect(() => {\n    !isOpen && setKeyboardNavigated(false);\n  }, [isOpen]);\n\n  return (\n    <ButtonsContainer ref={dropdownContainerRef} size={size}>\n      <Dropdown isButton={true} readOnly={false} disabled={false} margin=\"\">\n        <Button {...renderProps} testId={testId} onClick={onClick} disabled={disabled} type={type} loading={loading} icon={icon} size={size} width={width} variant={variant} flatEdge=\"right\">\n          {children}\n        </Button>\n        <DropdownContent\n          containerRef={dropdownContainerRef}\n          customizationProps={dropdownCustomizationProps}\n          filter=\"\"\n          ref={dropdownContentRef}\n          selectedValues={dropdownCustomizationProps.itemsType == 'normal' ? [] : dropdownMenuValues ?? selectedValues}\n          setSelectedValues={setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues}\n          isButton={true}\n          setIsOpen={setIsOpen}\n          focused={focused}\n          onActiveDescendantChanged={(e) => setActiveDescendant(e)}\n          setFocused={setFocused}\n          size={size}\n          outline={keyboardNavigated}\n          isOpen={isOpen}\n          id={dropdownContentId}\n          messageOnNoResults=\"\"\n          alignLeft={true}\n          ariaRolesType=\"menu\"\n        />\n      </Dropdown>\n      <Button\n        variant={variant}\n        {...renderProps}\n        onKeyPress={(e: any) => {\n          if (isOpen) return;\n\n          if (e.key === 'Enter' || e.key === ' ') {\n            setFocused(0);\n            setKeyboardNavigated(true);\n          }\n        }}\n        className=\"extraMargin\"\n        testId={'options_toggleBtn'}\n        ref={dropdownButtonRef}\n        aria-activedescendant={activeDescendant}\n        role=\"button\"\n        aria-controls={dropdownContentId}\n        disabled={disabled}\n        type={type}\n        size={size}\n        minWidth={'unset'}\n        onClick={(e) => {\n          e.stopPropagation();\n          setIsOpen(!isOpen);\n        }}\n        icon={ isOpen ? <SystemIcons.ArrowDropUp aria-hidden=\"true\" size=\"16px\" /> \n        : <SystemIcons.ArrowDropDown aria-hidden=\"true\" size=\"16px\" /> }\n        flatEdge=\"left\"\n      />\n    </ButtonsContainer>\n  );\n};\n\nexport default DualFunctionButton;\n"],"mappings":"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"}

package/dist/Dropdown/BasicDropdown.cjs

@@ -21,7 +21,7 @@ var _TooltipOverflow = _interopRequireDefault(require("../Tooltips/TooltipOverfl
 var _types = require("../types");
 var _common = require("../common");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["id", "list", "placeholder", "messageOnNoResults", "itemsType", "action", "actionLabel", "actionVariant", "actionIcon", "actionLoading", "actionDisabled", "pinTopItem", "scrollable", "maxHeight", "disabled", "readOnly", "isButton", "activeValidationMessage", "autofilledMessage", "size", "margin", "minWidth", "className", "overflowTooltipPosition", "onBlur", "dataTestId", "onSelect", "textOverflow"];
+var _excluded = ["id", "list", "placeholder", "messageOnNoResults", "itemsType", "action", "actionLabel", "actionVariant", "actionIcon", "actionLoading", "actionDisabled", "pinTopItem", "scrollable", "maxHeight", "disabled", "readOnly", "isButton", "activeValidationMessage", "autofilledMessage", "size", "margin", "minWidth", "className", "onBlur", "dataTestId", "onSelect", "textOverflow"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -52,7 +52,6 @@ var BasicDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
     margin = props.margin,
     minWidth = props.minWidth,
     className = props.className,
-    overflowTooltipPosition = props.overflowTooltipPosition,
     onBlur = props.onBlur,
     dataTestId = props.dataTestId,
     onSelect = props.onSelect,
@@ -212,12 +211,12 @@ var BasicDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
           tabIndex: -1,
           disabled: disabled || false
         }), !isOpen ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipOverflow.default, {
-          position: overflowTooltipPosition,
           input: inputRef,
           withArrow: true,
           maxWidth: "100%",
           size: size,
           align: "end",
+          position: "bottom",
           children: getDisplayItems()
         }) : null, isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicator.LoadingIndicator, {
           size: _types.Size.Small,
@@ -282,7 +281,7 @@ var BasicDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
     })]
   });
 });
-BasicDropdown.propTypes = {
+BasicDropdown.propTypes = (0, _defineProperty2.default)({
   list: _propTypes.default.array.isRequired,
   itemsType: _propTypes.default.oneOf(['normal', 'checkbox', 'radio']),
   action: _propTypes.default.func,
@@ -304,11 +303,10 @@ BasicDropdown.propTypes = {
   margin: _propTypes.default.string,
   minWidth: _propTypes.default.string,
   textOverflow: _propTypes.default.oneOf(['ellipsis', 'default']),
-  overflowTooltipPosition: _propTypes.default.oneOf(['top', 'bottom']),
   multiSelect: _propTypes.default.oneOf([false]),
   value: _propTypes.default.string,
   onSelect: _propTypes.default.func.isRequired
-};
+}, "list", _propTypes.default.array.isRequired);
 var _default = BasicDropdown;
 exports.default = _default;
 //# sourceMappingURL=BasicDropdown.cjs.map

package/dist/Dropdown/BasicDropdown.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BasicDropdown.cjs","names":["BasicDropdown","React","forwardRef","props","ref","id","list","placeholder","messageOnNoResults","itemsType","action","actionLabel","actionVariant","actionIcon","actionLoading","actionDisabled","pinTopItem","scrollable","maxHeight","disabled","readOnly","isButton","activeValidationMessage","autofilledMessage","size","margin","minWidth","className","overflowTooltipPosition","onBlur","dataTestId","onSelect","textOverflow","rest","useState","isOpen","setIsOpen","activeDescendant","setActiveDescendant","isLoading","setIsLoading","input","setInput","focused","setFocused","keyboardNavigated","setKeyboardNavigated","inputRef","useRef","styledFieldRef","useFocusVisibleRef","dropdownRef","resetDropdown","containerRef","useFocusOutsideRef","useClickOutsideRef","handleKeyDown","e","key","handleValueSelect","values","join","multiSelect","undefined","current","focus","focusVisible","useEffect","value","useImperativeHandle","customSetIsOpen","getDisplayItems","split","map","val","trim","listDisplayLabels","filter","item","includes","l","displayLabel","handleBlur","currentTarget","contains","relatedTarget","cls","concat","defaultOnMouseDownHandler","stopPropagation","blur","Size","Small","COLORS","neutral_600","onValueUpdate","items","critical_400","disableSorting"],"sources":["../../src/Dropdown/BasicDropdown.tsx"],"sourcesContent":["import * as React from 'react';\nimport {COLORS} from '../styles';\nimport {SystemIcons} from '../icons';\nimport {LoadingIndicator} from '../LoadingIndicator';\nimport {Dropdown, StyledField, InputField} from './CommonStyling';\nimport DropdownContent, {DropdownItem} from './DropdownContent';\nimport {AutofilledMessage, ErrorMessage} from '../InputFields';\nimport TooltipOverflow from '../Tooltips/TooltipOverflow';\nimport {Size, Testable} from '../types';\nimport {defaultOnMouseDownHandler, useClickOutsideRef, useFocusVisibleRef} from '../common';\nimport {useFocusOutsideRef} from '../common';\n\ninterface BasicDropdownCommonProps extends Testable, Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect' | 'placeholder' | 'tabIndex' | 'onMouseDown' | 'onClick' | 'onKeyDown'>{\n  list: DropdownItem[];\n  itemsType?: 'normal' | 'checkbox' | 'radio';\n  action?: () => void;\n  actionLabel?: string;\n  actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined;\n  actionIcon?: React.ReactNode;\n  actionLoading?: boolean;\n  actionDisabled?: boolean;\n  pinTopItem?: boolean;\n  scrollable?: boolean;\n  maxHeight?: string;\n  placeholder?: string;\n  disableSorting?: boolean;\n  messageOnNoResults?: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  isButton?: boolean;\n  activeValidationMessage?: string;\n  autofilledMessage?: string;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  minWidth?: string;\n  textOverflow?: 'ellipsis' | 'default';\n  overflowTooltipPosition?: 'top' | 'bottom';\n}\n\ntype DropdownFilterMultiSelectProps = BasicDropdownCommonProps & {\n  multiSelect: true;\n  value?: string[];\n  onSelect: (value: string[]) => void;\n}\n\ntype DropdownFilterSingleSelectProps = BasicDropdownCommonProps & {\n  multiSelect?: false;\n  value?: string;\n  onSelect: (value: string) => void;\n}\n\ntype DropdownFilterProps = DropdownFilterSingleSelectProps | DropdownFilterMultiSelectProps;\n\nconst BasicDropdown = React.forwardRef((props: DropdownFilterProps, ref) => {\n  const {\n    id,\n    list,\n    placeholder,\n    messageOnNoResults,\n    itemsType = 'normal',\n    action,\n    actionLabel,\n    actionVariant,\n    actionIcon,\n    actionLoading,\n    actionDisabled,\n    pinTopItem,\n    scrollable = true,\n    maxHeight,\n    disabled,\n    readOnly,\n    isButton,\n    activeValidationMessage,\n    autofilledMessage,\n    size,\n    margin,\n    minWidth,\n    className,\n    overflowTooltipPosition,\n    onBlur,\n    dataTestId,\n    onSelect,\n    textOverflow = 'ellipsis',\n    ...rest\n  } = props;\n\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [activeDescendant, setActiveDescendant] = React.useState<string>();\n  const [isLoading, setIsLoading] = React.useState<boolean>(false);\n  const [input, setInput] = React.useState<string>('');\n  const [focused, setFocused] = React.useState<number | null>(null);\n  \n  const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\n\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const styledFieldRef = useFocusVisibleRef([inputRef]);\n  const dropdownRef = React.useRef<HTMLDivElement>(null);\n\n  const resetDropdown = () => {\n    setIsOpen(false);\n    setFocused(null);\n  };\n\n  const containerRef = useFocusOutsideRef(resetDropdown, [dropdownRef]);\n\n  useClickOutsideRef(resetDropdown, [], containerRef);\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      setIsOpen(!isOpen);\n      setKeyboardNavigated(true);\n    }\n  };\n\n  const handleValueSelect = (values: string[]) => {\n    setInput(values.join(', '));\n\n    if (props.multiSelect === true) {\n      props.onSelect(values);\n    } else if (props.multiSelect === false || props.multiSelect === undefined) {\n      props.onSelect(values[0]);\n    }\n\n    //don't close dropdown on item select if have custom action or multiselect\n    if (actionLabel || props.multiSelect) return;\n\n    if (keyboardNavigated) {\n      styledFieldRef.current?.focus({focusVisible: true} as any);\n    }\n    setIsOpen(false);\n    setFocused(null);\n  };\n\n  React.useEffect(() => {\n    if (props.value) {\n      if (props.multiSelect) {\n        setInput(props.value.join(', '));\n      } else if (props.multiSelect === false || props.multiSelect === undefined) {\n        setInput(props.value);\n      }\n    } else {\n      setInput('');\n    }\n  }, [props.value, props.multiSelect]);\n\n  React.useEffect(() => {\n    setIsLoading(false);\n  }, [input]);\n\n  React.useEffect(() => {\n    !isOpen && setKeyboardNavigated(false);\n  }, [isOpen]);\n\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n  const customSetIsOpen = (isOpen: boolean) => {\n    setIsOpen(isOpen);\n  };\n\n  const getDisplayItems = () => {\n    const values = input.split(',').map((val) => val.trim());\n    const listDisplayLabels = list.filter((item) => values.includes(item.value)).map((l) => l.displayLabel);\n    return listDisplayLabels.join(', ');\n  };\n\n  const handleBlur = (e: React.FocusEvent<HTMLDivElement>) => {\n    // @ts-ignore\n    if (!e.currentTarget.contains(e.relatedTarget)) {\n      onBlur && onBlur(e);\n    }\n  };\n\n  const cls = (isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? ' button ' : '').concat(className ? ` ${className}` : '');\n  \n  return (\n    <>\n      <Dropdown ref={containerRef}\n                aria-expanded={isOpen ? true : false}\n                aria-activedescendant={activeDescendant}\n                aria-controls={`${id}_dropdowncontent`}\n                role=\"listbox\"\n                aria-multiselectable={props.multiSelect}\n                isButton={isButton || false}\n                className={size ? size : ''}\n                readOnly={readOnly}\n                disabled={disabled}\n                margin={margin}\n                onBlur={handleBlur}\n                minWidth={minWidth}>\n        <StyledField\n          ref={styledFieldRef}\n          className={cls}\n          onMouseDown={defaultOnMouseDownHandler}\n          onClick={(e) => {\n            if (!readOnly && !disabled) {\n              e.stopPropagation();\n              setIsOpen(!isOpen);\n              if (isOpen) {\n                inputRef.current?.blur();\n              } else {\n                inputRef.current?.focus();\n              }\n            }\n          }}\n          tabIndex={disabled || readOnly ? -1 : 0}\n          disabled={disabled || false}\n          readOnly={readOnly || false}\n          isPlaceholder={!input}\n          placeholder={placeholder}\n          showValidationMessage={!!activeValidationMessage}\n          onKeyDown={handleKeyDown}\n          minWidth={minWidth}\n          {...rest}>\n          <InputField\n            ref={inputRef}\n            type=\"search\"\n            ellipsis={textOverflow == 'ellipsis'}\n            id={id}\n            data-testid={dataTestId}\n            readOnly\n            placeholder={placeholder}\n            value={getDisplayItems()}\n            className={size ? `${size} value` : 'value'}\n            tabIndex={-1}\n            disabled={disabled || false}\n          />\n          {!isOpen ? <TooltipOverflow position={overflowTooltipPosition} input={inputRef} withArrow={true} maxWidth=\"100%\" size={size} align='end'>\n            {getDisplayItems()}\n        </TooltipOverflow> : null}\n          {isLoading ? <LoadingIndicator size={Size.Small} color={COLORS.neutral_600}/> : null}\n          <div className={'icon dropdown-arrow'}>\n            {isOpen ? <SystemIcons.ArrowDropUp size=\"24px\" className={size ? size : ''}/> :\n              <SystemIcons.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          <SystemIcons.TechnicalWarning color={COLORS.critical_400}/>\n          <span>{activeValidationMessage}</span>\n        </ErrorMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage>\n          <SystemIcons.Information color={COLORS.neutral_600}/>\n          <span>{autofilledMessage}</span>\n        </AutofilledMessage>\n      )}\n    </>\n  );\n});\n\nexport default BasicDropdown;\n"],"mappings":";;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAA4F;AAAA;AAAA;AAAA;AAAA;AAAA;AA4C5F,IAAMA,aAAa,gBAAGC,KAAK,CAACC,UAAU,CAAC,UAACC,KAA0B,EAAEC,GAAG,EAAK;EAC1E,IACEC,EAAE,GA6BAF,KAAK,CA7BPE,EAAE;IACFC,IAAI,GA4BFH,KAAK,CA5BPG,IAAI;IACJC,WAAW,GA2BTJ,KAAK,CA3BPI,WAAW;IACXC,kBAAkB,GA0BhBL,KAAK,CA1BPK,kBAAkB;IAAA,mBA0BhBL,KAAK,CAzBPM,SAAS;IAATA,SAAS,iCAAG,QAAQ;IACpBC,MAAM,GAwBJP,KAAK,CAxBPO,MAAM;IACNC,WAAW,GAuBTR,KAAK,CAvBPQ,WAAW;IACXC,aAAa,GAsBXT,KAAK,CAtBPS,aAAa;IACbC,UAAU,GAqBRV,KAAK,CArBPU,UAAU;IACVC,aAAa,GAoBXX,KAAK,CApBPW,aAAa;IACbC,cAAc,GAmBZZ,KAAK,CAnBPY,cAAc;IACdC,UAAU,GAkBRb,KAAK,CAlBPa,UAAU;IAAA,oBAkBRb,KAAK,CAjBPc,UAAU;IAAVA,UAAU,kCAAG,IAAI;IACjBC,SAAS,GAgBPf,KAAK,CAhBPe,SAAS;IACTC,QAAQ,GAeNhB,KAAK,CAfPgB,QAAQ;IACRC,QAAQ,GAcNjB,KAAK,CAdPiB,QAAQ;IACRC,QAAQ,GAaNlB,KAAK,CAbPkB,QAAQ;IACRC,uBAAuB,GAYrBnB,KAAK,CAZPmB,uBAAuB;IACvBC,iBAAiB,GAWfpB,KAAK,CAXPoB,iBAAiB;IACjBC,IAAI,GAUFrB,KAAK,CAVPqB,IAAI;IACJC,MAAM,GASJtB,KAAK,CATPsB,MAAM;IACNC,QAAQ,GAQNvB,KAAK,CARPuB,QAAQ;IACRC,SAAS,GAOPxB,KAAK,CAPPwB,SAAS;IACTC,uBAAuB,GAMrBzB,KAAK,CANPyB,uBAAuB;IACvBC,MAAM,GAKJ1B,KAAK,CALP0B,MAAM;IACNC,UAAU,GAIR3B,KAAK,CAJP2B,UAAU;IACVC,QAAQ,GAGN5B,KAAK,CAHP4B,QAAQ;IAAA,sBAGN5B,KAAK,CAFP6B,YAAY;IAAZA,YAAY,oCAAG,UAAU;IACtBC,IAAI,0CACL9B,KAAK;EAET,sBAA4BF,KAAK,CAACiC,QAAQ,CAAU,KAAK,CAAC;IAAA;IAAnDC,MAAM;IAAEC,SAAS;EACxB,uBAAgDnC,KAAK,CAACiC,QAAQ,EAAU;IAAA;IAAjEG,gBAAgB;IAAEC,mBAAmB;EAC5C,uBAAkCrC,KAAK,CAACiC,QAAQ,CAAU,KAAK,CAAC;IAAA;IAAzDK,SAAS;IAAEC,YAAY;EAC9B,uBAA0BvC,KAAK,CAACiC,QAAQ,CAAS,EAAE,CAAC;IAAA;IAA7CO,KAAK;IAAEC,QAAQ;EACtB,uBAA8BzC,KAAK,CAACiC,QAAQ,CAAgB,IAAI,CAAC;IAAA;IAA1DS,OAAO;IAAEC,UAAU;EAE1B,wBAAkD3C,KAAK,CAACiC,QAAQ,CAAU,KAAK,CAAC;IAAA;IAAzEW,iBAAiB;IAAEC,oBAAoB;EAE9C,IAAMC,QAAQ,GAAG9C,KAAK,CAAC+C,MAAM,CAAmB,IAAI,CAAC;EACrD,IAAMC,cAAc,GAAG,IAAAC,0BAAkB,EAAC,CAACH,QAAQ,CAAC,CAAC;EACrD,IAAMI,WAAW,GAAGlD,KAAK,CAAC+C,MAAM,CAAiB,IAAI,CAAC;EAEtD,IAAMI,aAAa,GAAG,SAAhBA,aAAa,GAAS;IAC1BhB,SAAS,CAAC,KAAK,CAAC;IAChBQ,UAAU,CAAC,IAAI,CAAC;EAClB,CAAC;EAED,IAAMS,YAAY,GAAG,IAAAC,0BAAkB,EAACF,aAAa,EAAE,CAACD,WAAW,CAAC,CAAC;EAErE,IAAAI,0BAAkB,EAACH,aAAa,EAAE,EAAE,EAAEC,YAAY,CAAC;EAEnD,IAAMG,aAAa,GAAG,SAAhBA,aAAa,CAAIC,CAAsC,EAAK;IAChE,IAAIA,CAAC,CAACC,GAAG,KAAK,OAAO,IAAID,CAAC,CAACC,GAAG,KAAK,GAAG,EAAE;MACtCtB,SAAS,CAAC,CAACD,MAAM,CAAC;MAClBW,oBAAoB,CAAC,IAAI,CAAC;IAC5B;EACF,CAAC;EAED,IAAMa,iBAAiB,GAAG,SAApBA,iBAAiB,CAAIC,MAAgB,EAAK;IAC9ClB,QAAQ,CAACkB,MAAM,CAACC,IAAI,CAAC,IAAI,CAAC,CAAC;IAE3B,IAAI1D,KAAK,CAAC2D,WAAW,KAAK,IAAI,EAAE;MAC9B3D,KAAK,CAAC4B,QAAQ,CAAC6B,MAAM,CAAC;IACxB,CAAC,MAAM,IAAIzD,KAAK,CAAC2D,WAAW,KAAK,KAAK,IAAI3D,KAAK,CAAC2D,WAAW,KAAKC,SAAS,EAAE;MACzE5D,KAAK,CAAC4B,QAAQ,CAAC6B,MAAM,CAAC,CAAC,CAAC,CAAC;IAC3B;;IAEA;IACA,IAAIjD,WAAW,IAAIR,KAAK,CAAC2D,WAAW,EAAE;IAEtC,IAAIjB,iBAAiB,EAAE;MAAA;MACrB,yBAAAI,cAAc,CAACe,OAAO,0DAAtB,sBAAwBC,KAAK,CAAC;QAACC,YAAY,EAAE;MAAI,CAAC,CAAQ;IAC5D;IACA9B,SAAS,CAAC,KAAK,CAAC;IAChBQ,UAAU,CAAC,IAAI,CAAC;EAClB,CAAC;EAED3C,KAAK,CAACkE,SAAS,CAAC,YAAM;IACpB,IAAIhE,KAAK,CAACiE,KAAK,EAAE;MACf,IAAIjE,KAAK,CAAC2D,WAAW,EAAE;QACrBpB,QAAQ,CAACvC,KAAK,CAACiE,KAAK,CAACP,IAAI,CAAC,IAAI,CAAC,CAAC;MAClC,CAAC,MAAM,IAAI1D,KAAK,CAAC2D,WAAW,KAAK,KAAK,IAAI3D,KAAK,CAAC2D,WAAW,KAAKC,SAAS,EAAE;QACzErB,QAAQ,CAACvC,KAAK,CAACiE,KAAK,CAAC;MACvB;IACF,CAAC,MAAM;MACL1B,QAAQ,CAAC,EAAE,CAAC;IACd;EACF,CAAC,EAAE,CAACvC,KAAK,CAACiE,KAAK,EAAEjE,KAAK,CAAC2D,WAAW,CAAC,CAAC;EAEpC7D,KAAK,CAACkE,SAAS,CAAC,YAAM;IACpB3B,YAAY,CAAC,KAAK,CAAC;EACrB,CAAC,EAAE,CAACC,KAAK,CAAC,CAAC;EAEXxC,KAAK,CAACkE,SAAS,CAAC,YAAM;IACpB,CAAChC,MAAM,IAAIW,oBAAoB,CAAC,KAAK,CAAC;EACxC,CAAC,EAAE,CAACX,MAAM,CAAC,CAAC;EAEZlC,KAAK,CAACoE,mBAAmB,CAACjE,GAAG,EAAE;IAAA,OAAM2C,QAAQ,CAACiB,OAAO;EAAA,GAAE,CAACjB,QAAQ,CAAC,CAAC;EAElE,IAAMuB,eAAe,GAAG,SAAlBA,eAAe,CAAInC,MAAe,EAAK;IAC3CC,SAAS,CAACD,MAAM,CAAC;EACnB,CAAC;EAED,IAAMoC,eAAe,GAAG,SAAlBA,eAAe,GAAS;IAC5B,IAAMX,MAAM,GAAGnB,KAAK,CAAC+B,KAAK,CAAC,GAAG,CAAC,CAACC,GAAG,CAAC,UAACC,GAAG;MAAA,OAAKA,GAAG,CAACC,IAAI,EAAE;IAAA,EAAC;IACxD,IAAMC,iBAAiB,GAAGtE,IAAI,CAACuE,MAAM,CAAC,UAACC,IAAI;MAAA,OAAKlB,MAAM,CAACmB,QAAQ,CAACD,IAAI,CAACV,KAAK,CAAC;IAAA,EAAC,CAACK,GAAG,CAAC,UAACO,CAAC;MAAA,OAAKA,CAAC,CAACC,YAAY;IAAA,EAAC;IACvG,OAAOL,iBAAiB,CAACf,IAAI,CAAC,IAAI,CAAC;EACrC,CAAC;EAED,IAAMqB,UAAU,GAAG,SAAbA,UAAU,CAAIzB,CAAmC,EAAK;IAC1D;IACA,IAAI,CAACA,CAAC,CAAC0B,aAAa,CAACC,QAAQ,CAAC3B,CAAC,CAAC4B,aAAa,CAAC,EAAE;MAC9CxD,MAAM,IAAIA,MAAM,CAAC4B,CAAC,CAAC;IACrB;EACF,CAAC;EAED,IAAM6B,GAAG,GAAG,CAACnD,MAAM,GAAG,WAAW,GAAG,EAAE,EAAEoD,MAAM,CAAC/D,IAAI,GAAGA,IAAI,GAAG,EAAE,CAAC,CAAC+D,MAAM,CAAClE,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAC,CAACkE,MAAM,CAAC5D,SAAS,cAAOA,SAAS,IAAK,EAAE,CAAC;EAE5I,oBACE;IAAA,wBACE,sBAAC,uBAAQ;MAAC,GAAG,EAAE0B,YAAa;MAClB,iBAAelB,MAAM,GAAG,IAAI,GAAG,KAAM;MACrC,yBAAuBE,gBAAiB;MACxC,2BAAkBhC,EAAE,qBAAmB;MACvC,IAAI,EAAC,SAAS;MACd,wBAAsBF,KAAK,CAAC2D,WAAY;MACxC,QAAQ,EAAEzC,QAAQ,IAAI,KAAM;MAC5B,SAAS,EAAEG,IAAI,GAAGA,IAAI,GAAG,EAAG;MAC5B,QAAQ,EAAEJ,QAAS;MACnB,QAAQ,EAAED,QAAS;MACnB,MAAM,EAAEM,MAAO;MACf,MAAM,EAAEyD,UAAW;MACnB,QAAQ,EAAExD,QAAS;MAAA,wBAC3B,sBAAC,0BAAW;QACV,GAAG,EAAEuB,cAAe;QACpB,SAAS,EAAEqC,GAAI;QACf,WAAW,EAAEE,iCAA0B;QACvC,OAAO,EAAE,iBAAC/B,CAAC,EAAK;UACd,IAAI,CAACrC,QAAQ,IAAI,CAACD,QAAQ,EAAE;YAC1BsC,CAAC,CAACgC,eAAe,EAAE;YACnBrD,SAAS,CAAC,CAACD,MAAM,CAAC;YAClB,IAAIA,MAAM,EAAE;cAAA;cACV,qBAAAY,QAAQ,CAACiB,OAAO,sDAAhB,kBAAkB0B,IAAI,EAAE;YAC1B,CAAC,MAAM;cAAA;cACL,sBAAA3C,QAAQ,CAACiB,OAAO,uDAAhB,mBAAkBC,KAAK,EAAE;YAC3B;UACF;QACF,CAAE;QACF,QAAQ,EAAE9C,QAAQ,IAAIC,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAE;QACxC,QAAQ,EAAED,QAAQ,IAAI,KAAM;QAC5B,QAAQ,EAAEC,QAAQ,IAAI,KAAM;QAC5B,aAAa,EAAE,CAACqB,KAAM;QACtB,WAAW,EAAElC,WAAY;QACzB,qBAAqB,EAAE,CAAC,CAACe,uBAAwB;QACjD,SAAS,EAAEkC,aAAc;QACzB,QAAQ,EAAE9B;MAAS,GACfO,IAAI;QAAA,wBACR,qBAAC,yBAAU;UACT,GAAG,EAAEc,QAAS;UACd,IAAI,EAAC,QAAQ;UACb,QAAQ,EAAEf,YAAY,IAAI,UAAW;UACrC,EAAE,EAAE3B,EAAG;UACP,eAAayB,UAAW;UACxB,QAAQ;UACR,WAAW,EAAEvB,WAAY;UACzB,KAAK,EAAEgE,eAAe,EAAG;UACzB,SAAS,EAAE/C,IAAI,aAAMA,IAAI,cAAW,OAAQ;UAC5C,QAAQ,EAAE,CAAC,CAAE;UACb,QAAQ,EAAEL,QAAQ,IAAI;QAAM,EAC5B,EACD,CAACgB,MAAM,gBAAG,qBAAC,wBAAe;UAAC,QAAQ,EAAEP,uBAAwB;UAAC,KAAK,EAAEmB,QAAS;UAAC,SAAS,EAAE,IAAK;UAAC,QAAQ,EAAC,MAAM;UAAC,IAAI,EAAEvB,IAAK;UAAC,KAAK,EAAC,KAAK;UAAA,UACrI+C,eAAe;QAAE,EACJ,GAAG,IAAI,EACtBhC,SAAS,gBAAG,qBAAC,kCAAgB;UAAC,IAAI,EAAEoD,WAAI,CAACC,KAAM;UAAC,KAAK,EAAEC,cAAM,CAACC;QAAY,EAAE,GAAG,IAAI,eACpF;UAAK,SAAS,EAAE,qBAAsB;UAAA,UACnC3D,MAAM,gBAAG,qBAAC,kBAAW,CAAC,WAAW;YAAC,IAAI,EAAC,MAAM;YAAC,SAAS,EAAEX,IAAI,GAAGA,IAAI,GAAG;UAAG,EAAE,gBAC3E,qBAAC,kBAAW,CAAC,aAAa;YAAC,IAAI,EAAC,MAAM;YAAC,SAAS,EAAEA,IAAI,GAAGA,IAAI,GAAG;UAAG;QAAE,EACnE;MAAA,GACM,EACb,CAACJ,QAAQ,IAAI,CAACD,QAAQ,iBACrB,qBAAC,wBAAe;QACd,GAAG,EAAEgC,WAAY;QACjB,YAAY,EAAEE,YAAa;QAC3B,yBAAyB,EAAE,mCAAChD,EAAE;UAAA,OAAKiC,mBAAmB,CAACjC,EAAE,CAAC;QAAA,CAAC;QAC3D,kBAAkB,EAAE;UAClBI,SAAS,EAAEA,SAAS;UACpBC,MAAM,EAAEA,MAAM,aAANA,MAAM,cAANA,MAAM,GAAK,YAAM,CACzB,CAAE;UACFC,WAAW,EAAEA,WAAW;UACxBC,aAAa,EAAEA,aAAa;UAC5BG,cAAc,EAAEA,cAAc;UAC9BE,UAAU,EAAEA,UAAU;UACtB8E,aAAa,EAAEpC,iBAAiB;UAChCqC,KAAK,EAAE1F,IAAI;UACXwD,WAAW,EAAE3D,KAAK,CAAC2D,WAAW;UAC9B9C,UAAU,EAAEA,UAAU;UACtBE,SAAS,EAAEA,SAAS;UACpBL,UAAU,EAAEA,UAAU;UACtBC,aAAa,EAAEA;QACjB,CAAE;QACF,aAAa,EAAC,OAAO;QACrB,OAAO,EAAE6B,OAAQ;QACjB,UAAU,EAAEC,UAAW;QACvB,IAAI,EAAEpB,IAAI,aAAJA,IAAI,cAAJA,IAAI,GAAImE,WAAI,CAACC,KAAM;QACzB,MAAM,EAAE,EAAG;QACX,MAAM,EAAEzD,MAAO;QACf,SAAS,EAAEmC,eAAgB;QAC3B,kBAAkB,EAAE9D,kBAAkB,aAAlBA,kBAAkB,cAAlBA,kBAAkB,GAAI,EAAG;QAC7C,OAAO,EAAEqC,iBAAkB;QAC3B,QAAQ,EAAExB,QAAQ,IAAI,KAAM;QAC5B,cAAc,EAAElB,KAAK,CAAC2D,WAAW,GAAG3D,KAAK,CAACiE,KAAK,IAAI,EAAE,GAAG,CAACjE,KAAK,CAACiE,KAAK,IAAI,EAAE,CAAE;QAC5E,iBAAiB,EAAET,iBAAkB;QACrC,EAAE,YAAKtD,EAAE;MAAmB,EAE/B;IAAA,EACQ,EACViB,uBAAuB,iBACtB,sBAAC,yBAAY;MAAA,wBACX,qBAAC,kBAAW,CAAC,gBAAgB;QAAC,KAAK,EAAEuE,cAAM,CAACI;MAAa,EAAE,eAC3D;QAAA,UAAO3E;MAAuB,EAAQ;IAAA,EAEzC,EACAC,iBAAiB,iBAChB,sBAAC,8BAAiB;MAAA,wBAChB,qBAAC,kBAAW,CAAC,WAAW;QAAC,KAAK,EAAEsE,cAAM,CAACC;MAAY,EAAE,eACrD;QAAA,UAAOvE;MAAiB,EAAQ;IAAA,EAEnC;EAAA,EACA;AAEP,CAAC,CAAC;AAAC;EAjRDjB,IAAI;EACJG,SAAS,4BAAG,QAAQ,EAAG,UAAU,EAAG,OAAO;EAC3CC,MAAM;EACNC,WAAW;EAEXE,UAAU;EACVC,aAAa;EACbC,cAAc;EACdC,UAAU;EACVC,UAAU;EACVC,SAAS;EACTX,WAAW;EACX2F,cAAc;EACd1F,kBAAkB;EAClBW,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,uBAAuB;EACvBC,iBAAiB;EAEjBE,MAAM;EACNC,QAAQ;EACRM,YAAY,4BAAG,UAAU,EAAG,SAAS;EACrCJ,uBAAuB,4BAAG,KAAK,EAAG,QAAQ;EAU1CkC,WAAW,4BAAG,KAAK;EACnBM,KAAK;EACLrC,QAAQ;AAAA;AAAA,eAgPK/B,aAAa;AAAA"}
+{"version":3,"file":"BasicDropdown.cjs","names":["BasicDropdown","React","forwardRef","props","ref","id","list","placeholder","messageOnNoResults","itemsType","action","actionLabel","actionVariant","actionIcon","actionLoading","actionDisabled","pinTopItem","scrollable","maxHeight","disabled","readOnly","isButton","activeValidationMessage","autofilledMessage","size","margin","minWidth","className","onBlur","dataTestId","onSelect","textOverflow","rest","useState","isOpen","setIsOpen","activeDescendant","setActiveDescendant","isLoading","setIsLoading","input","setInput","focused","setFocused","keyboardNavigated","setKeyboardNavigated","inputRef","useRef","styledFieldRef","useFocusVisibleRef","dropdownRef","resetDropdown","containerRef","useFocusOutsideRef","useClickOutsideRef","handleKeyDown","e","key","handleValueSelect","values","join","multiSelect","undefined","current","focus","focusVisible","useEffect","value","useImperativeHandle","customSetIsOpen","getDisplayItems","split","map","val","trim","listDisplayLabels","filter","item","includes","l","displayLabel","handleBlur","currentTarget","contains","relatedTarget","cls","concat","defaultOnMouseDownHandler","stopPropagation","blur","Size","Small","COLORS","neutral_600","onValueUpdate","items","critical_400","disableSorting"],"sources":["../../src/Dropdown/BasicDropdown.tsx"],"sourcesContent":["import * as React from 'react';\nimport {COLORS} from '../styles';\nimport {SystemIcons} from '../icons';\nimport {LoadingIndicator} from '../LoadingIndicator';\nimport {Dropdown, StyledField, InputField} from './CommonStyling';\nimport DropdownContent, {DropdownItem} from './DropdownContent';\nimport {AutofilledMessage, ErrorMessage} from '../InputFields';\nimport TooltipOverflow from '../Tooltips/TooltipOverflow';\nimport {Size, Testable} from '../types';\nimport {defaultOnMouseDownHandler, useClickOutsideRef, useFocusVisibleRef} from '../common';\nimport {useFocusOutsideRef} from '../common';\n\ninterface BasicDropdownCommonProps extends Testable, Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect' | 'placeholder' | 'tabIndex' | 'onMouseDown' | 'onClick' | 'onKeyDown'>{\n  list: DropdownItem[];\n  itemsType?: 'normal' | 'checkbox' | 'radio';\n  action?: () => void;\n  actionLabel?: string;\n  actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined;\n  actionIcon?: React.ReactNode;\n  actionLoading?: boolean;\n  actionDisabled?: boolean;\n  pinTopItem?: boolean;\n  scrollable?: boolean;\n  maxHeight?: string;\n  placeholder?: string;\n  disableSorting?: boolean;\n  messageOnNoResults?: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  isButton?: boolean;\n  activeValidationMessage?: string;\n  autofilledMessage?: string;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  minWidth?: string;\n  textOverflow?: 'ellipsis' | 'default';\n}\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    textOverflow = 'ellipsis',\n    ...rest\n  } = props;\n\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [activeDescendant, setActiveDescendant] = React.useState<string>();\n  const [isLoading, setIsLoading] = React.useState<boolean>(false);\n  const [input, setInput] = React.useState<string>('');\n  const [focused, setFocused] = React.useState<number | null>(null);\n  \n  const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\n\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const styledFieldRef = useFocusVisibleRef([inputRef]);\n  const dropdownRef = React.useRef<HTMLDivElement>(null);\n\n  const resetDropdown = () => {\n    setIsOpen(false);\n    setFocused(null);\n  };\n\n  const containerRef = useFocusOutsideRef(resetDropdown, [dropdownRef]);\n\n  useClickOutsideRef(resetDropdown, [], containerRef);\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      setIsOpen(!isOpen);\n      setKeyboardNavigated(true);\n    }\n  };\n\n  const handleValueSelect = (values: string[]) => {\n    setInput(values.join(', '));\n\n    if (props.multiSelect === true) {\n      props.onSelect(values);\n    } else if (props.multiSelect === false || props.multiSelect === undefined) {\n      props.onSelect(values[0]);\n    }\n\n    //don't close dropdown on item select if have custom action or multiselect\n    if (actionLabel || props.multiSelect) return;\n\n    if (keyboardNavigated) {\n      styledFieldRef.current?.focus({focusVisible: true} as any);\n    }\n    setIsOpen(false);\n    setFocused(null);\n  };\n\n  React.useEffect(() => {\n    if (props.value) {\n      if (props.multiSelect) {\n        setInput(props.value.join(', '));\n      } else if (props.multiSelect === false || props.multiSelect === undefined) {\n        setInput(props.value);\n      }\n    } else {\n      setInput('');\n    }\n  }, [props.value, props.multiSelect]);\n\n  React.useEffect(() => {\n    setIsLoading(false);\n  }, [input]);\n\n  React.useEffect(() => {\n    !isOpen && setKeyboardNavigated(false);\n  }, [isOpen]);\n\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n  const customSetIsOpen = (isOpen: boolean) => {\n    setIsOpen(isOpen);\n  };\n\n  const getDisplayItems = () => {\n    const values = input.split(',').map((val) => val.trim());\n    const listDisplayLabels = list.filter((item) => values.includes(item.value)).map((l) => l.displayLabel);\n    return listDisplayLabels.join(', ');\n  };\n\n  const handleBlur = (e: React.FocusEvent<HTMLDivElement>) => {\n    // @ts-ignore\n    if (!e.currentTarget.contains(e.relatedTarget)) {\n      onBlur && onBlur(e);\n    }\n  };\n\n  const cls = (isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? ' button ' : '').concat(className ? ` ${className}` : '');\n  \n  return (\n    <>\n      <Dropdown ref={containerRef}\n                aria-expanded={isOpen ? true : false}\n                aria-activedescendant={activeDescendant}\n                aria-controls={`${id}_dropdowncontent`}\n                role=\"listbox\"\n                aria-multiselectable={props.multiSelect}\n                isButton={isButton || false}\n                className={size ? size : ''}\n                readOnly={readOnly}\n                disabled={disabled}\n                margin={margin}\n                onBlur={handleBlur}\n                minWidth={minWidth}>\n        <StyledField\n          ref={styledFieldRef}\n          className={cls}\n          onMouseDown={defaultOnMouseDownHandler}\n          onClick={(e) => {\n            if (!readOnly && !disabled) {\n              e.stopPropagation();\n              setIsOpen(!isOpen);\n              if (isOpen) {\n                inputRef.current?.blur();\n              } else {\n                inputRef.current?.focus();\n              }\n            }\n          }}\n          tabIndex={disabled || readOnly ? -1 : 0}\n          disabled={disabled || false}\n          readOnly={readOnly || false}\n          isPlaceholder={!input}\n          placeholder={placeholder}\n          showValidationMessage={!!activeValidationMessage}\n          onKeyDown={handleKeyDown}\n          minWidth={minWidth}\n          {...rest}>\n          <InputField\n            ref={inputRef}\n            type=\"search\"\n            ellipsis={textOverflow == 'ellipsis'}\n            id={id}\n            data-testid={dataTestId}\n            readOnly\n            placeholder={placeholder}\n            value={getDisplayItems()}\n            className={size ? `${size} value` : 'value'}\n            tabIndex={-1}\n            disabled={disabled || false}\n          />\n          {!isOpen ? <TooltipOverflow input={inputRef} withArrow={true} maxWidth=\"100%\" size={size} align='end' position='bottom'>\n            {getDisplayItems()}\n        </TooltipOverflow> : null}\n          {isLoading ? <LoadingIndicator size={Size.Small} color={COLORS.neutral_600}/> : null}\n          <div className={'icon dropdown-arrow'}>\n            {isOpen ? <SystemIcons.ArrowDropUp size=\"24px\" className={size ? size : ''}/> :\n              <SystemIcons.ArrowDropDown size=\"24px\" className={size ? size : ''}/>}\n          </div>\n        </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          <SystemIcons.TechnicalWarning color={COLORS.critical_400}/>\n          <span>{activeValidationMessage}</span>\n        </ErrorMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage>\n          <SystemIcons.Information color={COLORS.neutral_600}/>\n          <span>{autofilledMessage}</span>\n        </AutofilledMessage>\n      )}\n    </>\n  );\n});\n\nexport default BasicDropdown;\n"],"mappings":"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"}

package/dist/Dropdown/BasicDropdown.d.ts

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