@laerdal/life-react-components 1.11.0-dev.9 → 2.0.0

package/dist/Button/Iconbutton.js.map

@@ -1 +1 @@
-{"version":3,"file":"Iconbutton.js","names":["React","styled","BREAKPOINTS","COLORS","focusStyles","invertedFocusStyles","defaultOnMouseDownHandler","getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","flatEdge","IconButtonContent","div","StyledIconButton","button","hideOnLowWidth","MEDIUM","unsetIconSize","invertFocus","StyledPrimaryIconButton","useTransparentBackground","primary_500","iconColor","white","primary_700","primary_800","neutral_200","StyledSecondaryIconButton","neutral_600","shouldNotInteract","primary_20","primary_100","neutral_300","IconButton","forwardRef","ref","id","variant","shape","action","isInMobileMenu","children","disabled","tabIndex","focusBackgroundColor","type","hidden","rest","event","stopPropagation"],"sources":["../../src/Button/Iconbutton.tsx"],"sourcesContent":["import React from 'react';\nimport styled, { css, CSSProperties } from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles } from '../styles';\nimport { defaultOnMouseDownHandler } from '../common';\n\ninterface HeaderItemProps {\n  hideOnLowWidth: boolean;\n  inMobileMenu?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  borderRadius?: number;\n  shape?: string;\n  flatEdge?: string;\n  focusBackgroundColor?: string;\n  invertFocus?: boolean;\n  shouldNotInteract?: boolean;\n}\n\nconst getBorderRadius = (props: HeaderItemProps) => (props.borderRadius ? `${props.borderRadius}px` : '4px');\n\nconst getBorderRadiusStyle = (props: HeaderItemProps) => {\n  const radius = getBorderRadius(props);\n  switch (props.flatEdge) {\n    case 'left':\n      return `0px ${radius} ${radius} 0px`;\n\n    case 'right':\n      return `${radius} 0px 0px ${radius}`;\n\n    case 'none':\n    default:\n      return `${radius}`;\n  }\n};\n\nexport const IconButtonContent = styled.div``;\n\nexport const StyledIconButton = styled.button<HeaderItemProps>`\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n  position: relative;\n\n  display: ${(props) => (props.hideOnLowWidth ? 'none' : 'block')};\n  ${BREAKPOINTS.MEDIUM} {\n    display: block;\n  }\n\n  border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n  ${IconButtonContent} {\n    height: 36px;\n    width: 36px;\n    border-radius: ${getBorderRadiusStyle};\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    svg {\n      height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      padding: 0;\n    }\n  }\n  &:only-child {\n    margin: 0;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  &:focus {\n    ${(props) => (props.invertFocus ? invertedFocusStyles : focusStyles)}\n  }\n`;\n\nexport const StyledPrimaryIconButton = styled(StyledIconButton)`\n  ${IconButtonContent} {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.primary_500)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.white};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.white};\n      }\n    }\n  }\n  &:hover:not(:disabled),\n  &.hover-state {\n    ${IconButtonContent} {\n      background-color: ${COLORS.primary_700};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ${IconButtonContent} {\n      background: ${COLORS.primary_800};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:disabled {\n    ${IconButtonContent} {\n      background-color: ${COLORS.neutral_200};\n    }\n    svg {\n      path {\n        fill: ${COLORS.white};\n      }\n      fill: ${COLORS.white};\n    }\n  }\n`;\n\nexport const StyledSecondaryIconButton = styled(StyledIconButton)`\n  ${IconButtonContent} {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      }\n    }\n  }\n\n  pointer-events: ${(props) => (props.shouldNotInteract ? 'none' : 'auto')};\n\n  &:hover:not(:disabled) {\n    ${IconButtonContent} {\n      background-color: ${COLORS.primary_20};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.primary_700};\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ${IconButtonContent} {\n      background: ${COLORS.primary_100};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    ${IconButtonContent} {\n      background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n    }\n    svg {\n      path {\n        fill: ${COLORS.neutral_300};\n      }\n      fill: ${COLORS.neutral_300};\n    }\n  }\n`;\n\nexport interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,  'onClick' | 'onMouseDown'> {\n  variant?: 'primary' | 'secondary';\n  shape?: 'square' | 'circular';\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  hideOnLowWidth?: boolean;\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\n  isInMobileMenu?: boolean;\n  useTransparentBackground?: boolean;\n  shouldNotInteract?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  borderRadius?: number;\n  focusBackgroundColor?: string;\n  children?: React.ReactNode;\n  invertFocus?: boolean;\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    {\n      id,\n      variant,\n      shape,\n      action,\n      hideOnLowWidth,\n      isInMobileMenu,\n      children,\n      useTransparentBackground,\n      shouldNotInteract,\n      disabled,\n      iconColor,\n      unsetIconSize,\n      tabIndex,\n      flatEdge,\n      borderRadius,\n      focusBackgroundColor,\n      type,\n      hidden,\n      invertFocus,\n      ...rest\n    }: IconButtonProps,\n    ref,\n  ) => {\n    // Let's render button\n    switch (variant) {\n      case 'secondary':\n        return (\n          <StyledSecondaryIconButton\n            id={id}\n            type={type ?? 'button'}\n            data-testid={id}\n            ref={ref}\n            onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n              event.stopPropagation();\n              action(event);\n            }}\n            disabled={disabled}\n            hideOnLowWidth={hideOnLowWidth || false}\n            inMobileMenu={isInMobileMenu}\n            useTransparentBackground={useTransparentBackground}\n            shouldNotInteract={shouldNotInteract}\n            iconColor={iconColor}\n            unsetIconSize={unsetIconSize}\n            tabIndex={tabIndex || 0}\n            borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n            onMouseDown={defaultOnMouseDownHandler}\n            hidden={hidden}\n            invertFocus={invertFocus}\n            focusBackgroundColor={focusBackgroundColor}\n            {...rest}>\n            <IconButtonContent>{children}</IconButtonContent>\n          </StyledSecondaryIconButton>\n        );\n      case 'primary':\n      default:\n        return (\n          <StyledPrimaryIconButton\n            id={id}\n            type={type ?? 'button'}\n            data-testid={id}\n            flatEdge={flatEdge}\n            ref={ref}\n            onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n              event.stopPropagation();\n              action(event);\n            }}\n            disabled={disabled}\n            hideOnLowWidth={hideOnLowWidth || false}\n            inMobileMenu={isInMobileMenu}\n            useTransparentBackground={useTransparentBackground}\n            iconColor={iconColor}\n            unsetIconSize={unsetIconSize}\n            tabIndex={tabIndex || 0}\n            borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n            onMouseDown={defaultOnMouseDownHandler}\n            hidden={hidden}\n            invertFocus={invertFocus}\n            focusBackgroundColor={focusBackgroundColor}\n            {...rest}>\n            <IconButtonContent>{children}</IconButtonContent>\n          </StyledPrimaryIconButton>\n        );\n    }\n  },\n);\n\nexport default IconButton;\n"],"mappings":"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"}
+{"version":3,"file":"Iconbutton.js","names":["React","styled","BREAKPOINTS","COLORS","focusStyles","invertedFocusStyles","defaultOnMouseDownHandler","getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","flatEdge","IconButtonContent","div","StyledIconButton","button","hideOnLowWidth","MEDIUM","unsetIconSize","invertFocus","StyledPrimaryIconButton","useTransparentBackground","primary_500","iconColor","white","primary_700","primary_800","neutral_200","StyledSecondaryIconButton","neutral_600","shouldNotInteract","primary_20","primary_100","neutral_300","IconButton","forwardRef","ref","id","variant","shape","action","isInMobileMenu","children","disabled","tabIndex","focusBackgroundColor","type","hidden","rest","event","stopPropagation"],"sources":["../../src/Button/Iconbutton.tsx"],"sourcesContent":["import React from 'react';\nimport styled, { css, CSSProperties } from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles } from '../styles';\nimport { defaultOnMouseDownHandler } from '../common';\n\ninterface HeaderItemProps {\n  hideOnLowWidth: boolean;\n  inMobileMenu?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  borderRadius?: number;\n  shape?: string;\n  flatEdge?: string;\n  focusBackgroundColor?: string;\n  invertFocus?: boolean;\n  shouldNotInteract?: boolean;\n}\n\nconst getBorderRadius = (props: HeaderItemProps) => (props.borderRadius ? `${props.borderRadius}px` : '4px');\n\nconst getBorderRadiusStyle = (props: HeaderItemProps) => {\n  const radius = getBorderRadius(props);\n  switch (props.flatEdge) {\n    case 'left':\n      return `0px ${radius} ${radius} 0px`;\n\n    case 'right':\n      return `${radius} 0px 0px ${radius}`;\n\n    case 'none':\n    default:\n      return `${radius}`;\n  }\n};\n\nexport const IconButtonContent = styled.div``;\n\nexport const StyledIconButton = styled.button<HeaderItemProps>`\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n  position: relative;\n\n  display: ${(props) => (props.hideOnLowWidth ? 'none' : 'block')};\n  ${BREAKPOINTS.MEDIUM} {\n    display: block;\n  }\n\n  border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n  ${IconButtonContent} {\n    height: 36px;\n    width: 36px;\n    border-radius: ${getBorderRadiusStyle};\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    svg {\n      height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      padding: 0;\n    }\n  }\n  &:only-child {\n    margin: 0;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  &:focus {\n    ${(props) => (props.invertFocus ? invertedFocusStyles : focusStyles)}\n  }\n`;\n\nexport const StyledPrimaryIconButton = styled(StyledIconButton)`\n  ${IconButtonContent} {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.primary_500)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.white};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.white};\n      }\n    }\n  }\n  &:hover:not(:disabled),\n  &.hover-state {\n    ${IconButtonContent} {\n      background-color: ${COLORS.primary_700};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ${IconButtonContent} {\n      background: ${COLORS.primary_800};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:disabled {\n    ${IconButtonContent} {\n      background-color: ${COLORS.neutral_200};\n    }\n    svg {\n      path {\n        fill: ${COLORS.white};\n      }\n      fill: ${COLORS.white};\n    }\n  }\n`;\n\nexport const StyledSecondaryIconButton = styled(StyledIconButton)`\n  ${IconButtonContent} {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      }\n    }\n  }\n\n  pointer-events: ${(props) => (props.shouldNotInteract ? 'none' : 'auto')};\n\n  &:hover:not(:disabled) {\n    ${IconButtonContent} {\n      background-color: ${COLORS.primary_20};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.primary_700};\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ${IconButtonContent} {\n      background: ${COLORS.primary_100};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    ${IconButtonContent} {\n      background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n    }\n    svg {\n      path {\n        fill: ${COLORS.neutral_300};\n      }\n      fill: ${COLORS.neutral_300};\n    }\n  }\n`;\n\nexport interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,  'onClick' | 'onMouseDown'> {\n  variant?: 'primary' | 'secondary';\n  shape?: 'square' | 'circular';\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  hideOnLowWidth?: boolean;\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\n  isInMobileMenu?: boolean;\n  useTransparentBackground?: boolean;\n  shouldNotInteract?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  borderRadius?: number;\n  focusBackgroundColor?: string;\n  children?: React.ReactNode;\n  invertFocus?: boolean;\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    {\n      id,\n      variant,\n      shape,\n      action,\n      hideOnLowWidth,\n      isInMobileMenu,\n      children,\n      useTransparentBackground,\n      shouldNotInteract,\n      disabled,\n      iconColor,\n      unsetIconSize,\n      tabIndex,\n      flatEdge,\n      borderRadius,\n      focusBackgroundColor,\n      type,\n      hidden,\n      invertFocus,\n      ...rest\n    }: IconButtonProps,\n    ref,\n  ) => {\n    // Let's render button\n    switch (variant) {\n      case 'secondary':\n        return (\n          <StyledSecondaryIconButton\n            id={id}\n            type={type ?? 'button'}\n            data-testid={id}\n            ref={ref}\n            onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n              event.stopPropagation();\n              action(event);\n            }}\n            disabled={disabled}\n            hideOnLowWidth={hideOnLowWidth || false}\n            inMobileMenu={isInMobileMenu}\n            useTransparentBackground={useTransparentBackground}\n            shouldNotInteract={shouldNotInteract}\n            iconColor={iconColor}\n            unsetIconSize={unsetIconSize}\n            tabIndex={tabIndex}\n            borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n            onMouseDown={defaultOnMouseDownHandler}\n            hidden={hidden}\n            invertFocus={invertFocus}\n            focusBackgroundColor={focusBackgroundColor}\n            {...rest}>\n            <IconButtonContent>{children}</IconButtonContent>\n          </StyledSecondaryIconButton>\n        );\n      case 'primary':\n      default:\n        return (\n          <StyledPrimaryIconButton\n            id={id}\n            type={type ?? 'button'}\n            data-testid={id}\n            flatEdge={flatEdge}\n            ref={ref}\n            onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n              event.stopPropagation();\n              action(event);\n            }}\n            disabled={disabled}\n            hideOnLowWidth={hideOnLowWidth || false}\n            inMobileMenu={isInMobileMenu}\n            useTransparentBackground={useTransparentBackground}\n            iconColor={iconColor}\n            unsetIconSize={unsetIconSize}\n            tabIndex={tabIndex}\n            borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n            onMouseDown={defaultOnMouseDownHandler}\n            hidden={hidden}\n            invertFocus={invertFocus}\n            focusBackgroundColor={focusBackgroundColor}\n            {...rest}>\n            <IconButtonContent>{children}</IconButtonContent>\n          </StyledPrimaryIconButton>\n        );\n    }\n  },\n);\n\nexport default IconButton;\n"],"mappings":"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"}

package/dist/Card/VerticalCard/Card.cjs

@@ -47,11 +47,11 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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 CardTopLevelContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n\n  border-radius: 8px;\n\n  background-clip: padding-box;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n\n  .elevated & {\n    box-shadow: ", ";\n  }\n\n  .outline & {\n    border: 1px solid ", ";\n  }\n"])), _index.COLORS.white, _index.BOXSHADOWS.BOXSHADOW_L1, _index.COLORS.neutral_200);
+var CardTopLevelContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  min-width: 240px;\n  max-width: 560px;\n  overflow: hidden;\n\n  border-radius: 8px;\n\n  background-clip: padding-box;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n\n  .elevated & {\n    box-shadow: ", ";\n  }\n\n  .outline & {\n    border: 1px solid ", ";\n  }\n"])), _index.COLORS.white, _index.BOXSHADOWS.BOXSHADOW_L1, _index.COLORS.neutral_200);
 
 exports.CardTopLevelContainer = CardTopLevelContainer;
 
-var Wrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  height: max-content;\n  width: max-content;\n\n  &.interactive:focus {\n    ", "\n  }\n\n  &.interactive:not(.disabled) {\n    cursor: pointer;\n\n    &.outline:not(.action-within) {\n      ", " {\n        &:hover {\n          background-color: ", ";\n        }\n\n        &:active, &.active-state {\n          background-color: ", ";\n        }\n      }\n    }\n\n    &.elevated:not(.action-within) {\n      ", " {\n        &:hover {\n          box-shadow: ", ";\n        }\n\n        &:active, &.active-state {\n          box-shadow: ", ";\n        }\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n    ", "{\n      border: 1px solid ", ";\n    }\n  }\n"])), _index.focusStyles, CardTopLevelContainer, _index.COLORS.primary_20, _index.COLORS.primary_100, CardTopLevelContainer, _index.BOXSHADOWS.BOXSHADOW_L3, _index.BOXSHADOWS.BOXSHADOW_L2, CardTopLevelContainer, _index.COLORS.neutral_100);
+var Wrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  &.interactive:focus {\n    ", "\n  }\n\n  &.interactive:not(.disabled) {\n    cursor: pointer;\n\n    &.outline:not(.action-within) {\n      ", " {\n        &:hover {\n          background-color: ", ";\n        }\n\n        &:active, &.active-state {\n          background-color: ", ";\n        }\n      }\n    }\n\n    &.elevated:not(.action-within) {\n      ", " {\n        &:hover {\n          box-shadow: ", ";\n        }\n\n        &:active, &.active-state {\n          box-shadow: ", ";\n        }\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n    ", "{\n      border: 1px solid ", ";\n    }\n  }\n"])), _index.focusStyles, CardTopLevelContainer, _index.COLORS.primary_20, _index.COLORS.primary_100, CardTopLevelContainer, _index.BOXSHADOWS.BOXSHADOW_L3, _index.BOXSHADOWS.BOXSHADOW_L2, CardTopLevelContainer, _index.COLORS.neutral_100);
 
 exports.Wrapper = Wrapper;
 

package/dist/Card/VerticalCard/Card.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Card.cjs","names":["CardTopLevelContainer","styled","div","COLORS","white","BOXSHADOWS","BOXSHADOW_L1","neutral_200","Wrapper","focusStyles","primary_20","primary_100","BOXSHADOW_L3","BOXSHADOW_L2","neutral_100","Card","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","disabled","variant","className","rest","React","useState","actionsRefs","setActionsRefs","checkBoxRef","useRef","containerRef","useActionWithin","cls","defaultOnMouseDownHandler","a","key","e","instance"],"sources":["../../../src/Card/VerticalCard/Card.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport CardTopSection, {CardTopSectionProps} from './CardTopSection';\nimport CardMiddleSection, {CardMiddleSectionProps} from './CardMiddleSection';\nimport CardBottomSection, {CardBottomSectionProps} from './CardBottomSection';\nimport {BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWithin} from '../../index';\n\nexport const CardTopLevelContainer = styled.div`\n  background-color: ${COLORS.white};\n\n  border-radius: 8px;\n\n  background-clip: padding-box;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n\n  .elevated & {\n    box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n  }\n\n  .outline & {\n    border: 1px solid ${COLORS.neutral_200};\n  }\n`;\n\n\nexport const Wrapper = styled.div`\n  height: max-content;\n  width: max-content;\n\n  &.interactive:focus {\n    ${focusStyles}\n  }\n\n  &.interactive:not(.disabled) {\n    cursor: pointer;\n\n    &.outline:not(.action-within) {\n      ${CardTopLevelContainer} {\n        &:hover {\n          background-color: ${COLORS.primary_20};\n        }\n\n        &:active, &.active-state {\n          background-color: ${COLORS.primary_100};\n        }\n      }\n    }\n\n    &.elevated:not(.action-within) {\n      ${CardTopLevelContainer} {\n        &:hover {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\n        }\n\n        &:active, &.active-state {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n        }\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n    ${CardTopLevelContainer}{\n      border: 1px solid ${COLORS.neutral_100};\n    }\n  }\n`;\n\n\nexport interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {\n  onCardClicked?: () => {};\n  disabled?: boolean;\n  topSectionProps?: CardTopSectionProps;\n  middleSectionProps?: CardMiddleSectionProps;\n  bottomSectionProps?: CardBottomSectionProps;\n  variant?: 'outline' | 'elevated';\n}\n\nconst Card: React.FunctionComponent<CardProps> = ({\n                                                    onCardClicked,\n                                                    topSectionProps,\n                                                    middleSectionProps,\n                                                    bottomSectionProps,\n                                                    disabled,\n                                                    variant = 'elevated',\n                                                    className,\n                                                    ...rest\n                                                  }: CardProps) => {\n\n\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLElement>[]>([]);\n  const checkBoxRef =  React.useRef<HTMLDivElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n\n  useActionWithin(containerRef, [...actionsRefs, checkBoxRef]);\n\n  const cls = `${!!onCardClicked ? 'interactive' : ''} ${disabled ? 'disabled' : ''} ${variant} ${className || ''}`;\n\n  return (\n    <Wrapper ref={containerRef}\n             className={cls}\n             tabIndex={!!onCardClicked && !disabled ? 0 : -1}\n             onMouseDown={defaultOnMouseDownHandler}\n             onKeyDown={a => a.key === 'Enter' && !disabled && onCardClicked && onCardClicked()}\n             onClick={e => !disabled && onCardClicked && onCardClicked()}\n             data-testid={'card-wrapper'}\n             {...rest}>\n      <CardTopLevelContainer>\n        {\n          topSectionProps &&\n          <CardTopSection ref={checkBoxRef}\n            {...topSectionProps} disabled={disabled}/>\n        }\n        {\n          middleSectionProps &&\n          <CardMiddleSection {...middleSectionProps} disabled={disabled}/>\n        }\n        {\n          bottomSectionProps &&\n          <CardBottomSection ref={instance => setActionsRefs(instance ?? [])}\n                             {...bottomSectionProps} disabled={disabled}/>\n        }\n      </CardTopLevelContainer>\n    </Wrapper>\n\n  );\n};\n\nexport default Card;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;AAEO,IAAMA,qBAAqB,GAAGC,yBAAA,CAAOC,GAAV,wVACZC,aAAA,CAAOC,KADK,EAWhBC,iBAAA,CAAWC,YAXK,EAeVH,aAAA,CAAOI,WAfG,CAA3B;;;;AAoBA,IAAMC,OAAO,GAAGP,yBAAA,CAAOC,GAAV,2vBAKdO,kBALc,EAYZT,qBAZY,EAcUG,aAAA,CAAOO,UAdjB,EAkBUP,aAAA,CAAOQ,WAlBjB,EAwBZX,qBAxBY,EA0BIK,iBAAA,CAAWO,YA1Bf,EA8BIP,iBAAA,CAAWQ,YA9Bf,EAsCdb,qBAtCc,EAuCMG,aAAA,CAAOW,WAvCb,CAAb;;;;AAsDP,IAAMC,IAAwC,GAAG,SAA3CA,IAA2C,OASkB;EAAA,IARfC,aAQe,QARfA,aAQe;EAAA,IAPfC,eAOe,QAPfA,eAOe;EAAA,IANfC,kBAMe,QANfA,kBAMe;EAAA,IALfC,kBAKe,QALfA,kBAKe;EAAA,IAJfC,QAIe,QAJfA,QAIe;EAAA,wBAHfC,OAGe;EAAA,IAHfA,OAGe,6BAHL,UAGK;EAAA,IAFfC,SAEe,QAFfA,SAEe;EAAA,IADZC,IACY;;EAGjE,sBAAsCC,KAAK,CAACC,QAAN,CAA+C,EAA/C,CAAtC;EAAA;EAAA,IAAOC,WAAP;EAAA,IAAoBC,cAApB;;EACA,IAAMC,WAAW,GAAIJ,KAAK,CAACK,MAAN,CAA6B,IAA7B,CAArB;EACA,IAAMC,YAAY,GAAGN,KAAK,CAACK,MAAN,CAA6B,IAA7B,CAArB;EAEA,IAAAE,sBAAA,EAAgBD,YAAhB,6CAAkCJ,WAAlC,IAA+CE,WAA/C;EAEA,IAAMI,GAAG,aAAM,CAAC,CAAChB,aAAF,GAAkB,aAAlB,GAAkC,EAAxC,cAA8CI,QAAQ,GAAG,UAAH,GAAgB,EAAtE,cAA4EC,OAA5E,cAAuFC,SAAS,IAAI,EAApG,CAAT;EAEA,oBACE,qBAAC,OAAD;IAAS,GAAG,EAAEQ,YAAd;IACS,SAAS,EAAEE,GADpB;IAES,QAAQ,EAAE,CAAC,CAAChB,aAAF,IAAmB,CAACI,QAApB,GAA+B,CAA/B,GAAmC,CAAC,CAFvD;IAGS,WAAW,EAAEa,gCAHtB;IAIS,SAAS,EAAE,mBAAAC,CAAC;MAAA,OAAIA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqB,CAACf,QAAtB,IAAkCJ,aAAlC,IAAmDA,aAAa,EAApE;IAAA,CAJrB;IAKS,OAAO,EAAE,iBAAAoB,CAAC;MAAA,OAAI,CAAChB,QAAD,IAAaJ,aAAb,IAA8BA,aAAa,EAA/C;IAAA,CALnB;IAMS,eAAa;EANtB,GAOaO,IAPb;IAAA,uBAQE,sBAAC,qBAAD;MAAA,WAEIN,eAAe,iBACf,qBAAC,uBAAD;QAAgB,GAAG,EAAEW;MAArB,GACMX,eADN;QACuB,QAAQ,EAAEG;MADjC,GAHJ,EAOIF,kBAAkB,iBAClB,qBAAC,0BAAD,kCAAuBA,kBAAvB;QAA2C,QAAQ,EAAEE;MAArD,GARJ,EAWID,kBAAkB,iBAClB,qBAAC,0BAAD;QAAmB,GAAG,EAAE,aAAAkB,QAAQ;UAAA,OAAIV,cAAc,CAACU,QAAD,aAACA,QAAD,cAACA,QAAD,GAAa,EAAb,CAAlB;QAAA;MAAhC,GACuBlB,kBADvB;QAC2C,QAAQ,EAAEC;MADrD,GAZJ;IAAA;EARF,GADF;AA4BD,CAhDD;;;EAREJ,a;EACAI,Q;EAIAC,O,4BAAU,S,EAAY,U;;eAqDTN,I"}
+{"version":3,"file":"Card.cjs","names":["CardTopLevelContainer","styled","div","COLORS","white","BOXSHADOWS","BOXSHADOW_L1","neutral_200","Wrapper","focusStyles","primary_20","primary_100","BOXSHADOW_L3","BOXSHADOW_L2","neutral_100","Card","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","disabled","variant","className","rest","React","useState","actionsRefs","setActionsRefs","checkBoxRef","useRef","containerRef","useActionWithin","cls","defaultOnMouseDownHandler","a","key","e","instance"],"sources":["../../../src/Card/VerticalCard/Card.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport CardTopSection, {CardTopSectionProps} from './CardTopSection';\nimport CardMiddleSection, {CardMiddleSectionProps} from './CardMiddleSection';\nimport CardBottomSection, {CardBottomSectionProps} from './CardBottomSection';\nimport {BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWithin} from '../../index';\n\nexport const CardTopLevelContainer = styled.div`\n  background-color: ${COLORS.white};\n  min-width: 240px;\n  max-width: 560px;\n  overflow: hidden;\n\n  border-radius: 8px;\n\n  background-clip: padding-box;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n\n  .elevated & {\n    box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n  }\n\n  .outline & {\n    border: 1px solid ${COLORS.neutral_200};\n  }\n`;\n\n\nexport const Wrapper = styled.div`\n  &.interactive:focus {\n    ${focusStyles}\n  }\n\n  &.interactive:not(.disabled) {\n    cursor: pointer;\n\n    &.outline:not(.action-within) {\n      ${CardTopLevelContainer} {\n        &:hover {\n          background-color: ${COLORS.primary_20};\n        }\n\n        &:active, &.active-state {\n          background-color: ${COLORS.primary_100};\n        }\n      }\n    }\n\n    &.elevated:not(.action-within) {\n      ${CardTopLevelContainer} {\n        &:hover {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\n        }\n\n        &:active, &.active-state {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n        }\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n    ${CardTopLevelContainer}{\n      border: 1px solid ${COLORS.neutral_100};\n    }\n  }\n`;\n\n\nexport interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {\n  onCardClicked?: () => {};\n  disabled?: boolean;\n  topSectionProps?: CardTopSectionProps;\n  middleSectionProps?: CardMiddleSectionProps;\n  bottomSectionProps?: CardBottomSectionProps;\n  variant?: 'outline' | 'elevated';\n}\n\nconst Card: React.FunctionComponent<CardProps> = ({\n                                                    onCardClicked,\n                                                    topSectionProps,\n                                                    middleSectionProps,\n                                                    bottomSectionProps,\n                                                    disabled,\n                                                    variant = 'elevated',\n                                                    className,\n                                                    ...rest\n                                                  }: CardProps) => {\n\n\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLElement>[]>([]);\n  const checkBoxRef =  React.useRef<HTMLDivElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n\n  useActionWithin(containerRef, [...actionsRefs, checkBoxRef]);\n\n  const cls = `${!!onCardClicked ? 'interactive' : ''} ${disabled ? 'disabled' : ''} ${variant} ${className || ''}`;\n\n  return (\n    <Wrapper ref={containerRef}\n             className={cls}\n             tabIndex={!!onCardClicked && !disabled ? 0 : -1}\n             onMouseDown={defaultOnMouseDownHandler}\n             onKeyDown={a => a.key === 'Enter' && !disabled && onCardClicked && onCardClicked()}\n             onClick={e => !disabled && onCardClicked && onCardClicked()}\n             data-testid={'card-wrapper'}\n             {...rest}>\n      <CardTopLevelContainer>\n        {\n          topSectionProps &&\n          <CardTopSection ref={checkBoxRef}\n            {...topSectionProps} disabled={disabled}/>\n        }\n        {\n          middleSectionProps &&\n          <CardMiddleSection {...middleSectionProps} disabled={disabled}/>\n        }\n        {\n          bottomSectionProps &&\n          <CardBottomSection ref={instance => setActionsRefs(instance ?? [])}\n                             {...bottomSectionProps} disabled={disabled}/>\n        }\n      </CardTopLevelContainer>\n    </Wrapper>\n\n  );\n};\n\nexport default Card;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;AAEO,IAAMA,qBAAqB,GAAGC,yBAAA,CAAOC,GAAV,uZACZC,aAAA,CAAOC,KADK,EAchBC,iBAAA,CAAWC,YAdK,EAkBVH,aAAA,CAAOI,WAlBG,CAA3B;;;;AAuBA,IAAMC,OAAO,GAAGP,yBAAA,CAAOC,GAAV,0sBAEdO,kBAFc,EASZT,qBATY,EAWUG,aAAA,CAAOO,UAXjB,EAeUP,aAAA,CAAOQ,WAfjB,EAqBZX,qBArBY,EAuBIK,iBAAA,CAAWO,YAvBf,EA2BIP,iBAAA,CAAWQ,YA3Bf,EAmCdb,qBAnCc,EAoCMG,aAAA,CAAOW,WApCb,CAAb;;;;AAmDP,IAAMC,IAAwC,GAAG,SAA3CA,IAA2C,OASkB;EAAA,IARfC,aAQe,QARfA,aAQe;EAAA,IAPfC,eAOe,QAPfA,eAOe;EAAA,IANfC,kBAMe,QANfA,kBAMe;EAAA,IALfC,kBAKe,QALfA,kBAKe;EAAA,IAJfC,QAIe,QAJfA,QAIe;EAAA,wBAHfC,OAGe;EAAA,IAHfA,OAGe,6BAHL,UAGK;EAAA,IAFfC,SAEe,QAFfA,SAEe;EAAA,IADZC,IACY;;EAGjE,sBAAsCC,KAAK,CAACC,QAAN,CAA+C,EAA/C,CAAtC;EAAA;EAAA,IAAOC,WAAP;EAAA,IAAoBC,cAApB;;EACA,IAAMC,WAAW,GAAIJ,KAAK,CAACK,MAAN,CAA6B,IAA7B,CAArB;EACA,IAAMC,YAAY,GAAGN,KAAK,CAACK,MAAN,CAA6B,IAA7B,CAArB;EAEA,IAAAE,sBAAA,EAAgBD,YAAhB,6CAAkCJ,WAAlC,IAA+CE,WAA/C;EAEA,IAAMI,GAAG,aAAM,CAAC,CAAChB,aAAF,GAAkB,aAAlB,GAAkC,EAAxC,cAA8CI,QAAQ,GAAG,UAAH,GAAgB,EAAtE,cAA4EC,OAA5E,cAAuFC,SAAS,IAAI,EAApG,CAAT;EAEA,oBACE,qBAAC,OAAD;IAAS,GAAG,EAAEQ,YAAd;IACS,SAAS,EAAEE,GADpB;IAES,QAAQ,EAAE,CAAC,CAAChB,aAAF,IAAmB,CAACI,QAApB,GAA+B,CAA/B,GAAmC,CAAC,CAFvD;IAGS,WAAW,EAAEa,gCAHtB;IAIS,SAAS,EAAE,mBAAAC,CAAC;MAAA,OAAIA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqB,CAACf,QAAtB,IAAkCJ,aAAlC,IAAmDA,aAAa,EAApE;IAAA,CAJrB;IAKS,OAAO,EAAE,iBAAAoB,CAAC;MAAA,OAAI,CAAChB,QAAD,IAAaJ,aAAb,IAA8BA,aAAa,EAA/C;IAAA,CALnB;IAMS,eAAa;EANtB,GAOaO,IAPb;IAAA,uBAQE,sBAAC,qBAAD;MAAA,WAEIN,eAAe,iBACf,qBAAC,uBAAD;QAAgB,GAAG,EAAEW;MAArB,GACMX,eADN;QACuB,QAAQ,EAAEG;MADjC,GAHJ,EAOIF,kBAAkB,iBAClB,qBAAC,0BAAD,kCAAuBA,kBAAvB;QAA2C,QAAQ,EAAEE;MAArD,GARJ,EAWID,kBAAkB,iBAClB,qBAAC,0BAAD;QAAmB,GAAG,EAAE,aAAAkB,QAAQ;UAAA,OAAIV,cAAc,CAACU,QAAD,aAACA,QAAD,cAACA,QAAD,GAAa,EAAb,CAAlB;QAAA;MAAhC,GACuBlB,kBADvB;QAC2C,QAAQ,EAAEC;MADrD,GAZJ;IAAA;EARF,GADF;AA4BD,CAhDD;;;EAREJ,a;EACAI,Q;EAIAC,O,4BAAU,S,EAAY,U;;eAqDTN,I"}

package/dist/Card/VerticalCard/Card.js

@@ -20,8 +20,8 @@ import CardBottomSection from './CardBottomSection';
 import { BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWithin } from '../../index';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export var CardTopLevelContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", ";\n\n  border-radius: 8px;\n\n  background-clip: padding-box;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n\n  .elevated & {\n    box-shadow: ", ";\n  }\n\n  .outline & {\n    border: 1px solid ", ";\n  }\n"])), COLORS.white, BOXSHADOWS.BOXSHADOW_L1, COLORS.neutral_200);
-export var Wrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: max-content;\n  width: max-content;\n\n  &.interactive:focus {\n    ", "\n  }\n\n  &.interactive:not(.disabled) {\n    cursor: pointer;\n\n    &.outline:not(.action-within) {\n      ", " {\n        &:hover {\n          background-color: ", ";\n        }\n\n        &:active, &.active-state {\n          background-color: ", ";\n        }\n      }\n    }\n\n    &.elevated:not(.action-within) {\n      ", " {\n        &:hover {\n          box-shadow: ", ";\n        }\n\n        &:active, &.active-state {\n          box-shadow: ", ";\n        }\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n    ", "{\n      border: 1px solid ", ";\n    }\n  }\n"])), focusStyles, CardTopLevelContainer, COLORS.primary_20, COLORS.primary_100, CardTopLevelContainer, BOXSHADOWS.BOXSHADOW_L3, BOXSHADOWS.BOXSHADOW_L2, CardTopLevelContainer, COLORS.neutral_100);
+export var CardTopLevelContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", ";\n  min-width: 240px;\n  max-width: 560px;\n  overflow: hidden;\n\n  border-radius: 8px;\n\n  background-clip: padding-box;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n\n  .elevated & {\n    box-shadow: ", ";\n  }\n\n  .outline & {\n    border: 1px solid ", ";\n  }\n"])), COLORS.white, BOXSHADOWS.BOXSHADOW_L1, COLORS.neutral_200);
+export var Wrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  &.interactive:focus {\n    ", "\n  }\n\n  &.interactive:not(.disabled) {\n    cursor: pointer;\n\n    &.outline:not(.action-within) {\n      ", " {\n        &:hover {\n          background-color: ", ";\n        }\n\n        &:active, &.active-state {\n          background-color: ", ";\n        }\n      }\n    }\n\n    &.elevated:not(.action-within) {\n      ", " {\n        &:hover {\n          box-shadow: ", ";\n        }\n\n        &:active, &.active-state {\n          box-shadow: ", ";\n        }\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n    ", "{\n      border: 1px solid ", ";\n    }\n  }\n"])), focusStyles, CardTopLevelContainer, COLORS.primary_20, COLORS.primary_100, CardTopLevelContainer, BOXSHADOWS.BOXSHADOW_L3, BOXSHADOWS.BOXSHADOW_L2, CardTopLevelContainer, COLORS.neutral_100);
 
 var Card = function Card(_ref) {
   var onCardClicked = _ref.onCardClicked,

package/dist/Card/VerticalCard/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","names":["React","styled","CardTopSection","CardMiddleSection","CardBottomSection","BOXSHADOWS","COLORS","defaultOnMouseDownHandler","focusStyles","useActionWithin","CardTopLevelContainer","div","white","BOXSHADOW_L1","neutral_200","Wrapper","primary_20","primary_100","BOXSHADOW_L3","BOXSHADOW_L2","neutral_100","Card","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","disabled","variant","className","rest","useState","actionsRefs","setActionsRefs","checkBoxRef","useRef","containerRef","cls","a","key","e","instance"],"sources":["../../../src/Card/VerticalCard/Card.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport CardTopSection, {CardTopSectionProps} from './CardTopSection';\nimport CardMiddleSection, {CardMiddleSectionProps} from './CardMiddleSection';\nimport CardBottomSection, {CardBottomSectionProps} from './CardBottomSection';\nimport {BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWithin} from '../../index';\n\nexport const CardTopLevelContainer = styled.div`\n  background-color: ${COLORS.white};\n\n  border-radius: 8px;\n\n  background-clip: padding-box;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n\n  .elevated & {\n    box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n  }\n\n  .outline & {\n    border: 1px solid ${COLORS.neutral_200};\n  }\n`;\n\n\nexport const Wrapper = styled.div`\n  height: max-content;\n  width: max-content;\n\n  &.interactive:focus {\n    ${focusStyles}\n  }\n\n  &.interactive:not(.disabled) {\n    cursor: pointer;\n\n    &.outline:not(.action-within) {\n      ${CardTopLevelContainer} {\n        &:hover {\n          background-color: ${COLORS.primary_20};\n        }\n\n        &:active, &.active-state {\n          background-color: ${COLORS.primary_100};\n        }\n      }\n    }\n\n    &.elevated:not(.action-within) {\n      ${CardTopLevelContainer} {\n        &:hover {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\n        }\n\n        &:active, &.active-state {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n        }\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n    ${CardTopLevelContainer}{\n      border: 1px solid ${COLORS.neutral_100};\n    }\n  }\n`;\n\n\nexport interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {\n  onCardClicked?: () => {};\n  disabled?: boolean;\n  topSectionProps?: CardTopSectionProps;\n  middleSectionProps?: CardMiddleSectionProps;\n  bottomSectionProps?: CardBottomSectionProps;\n  variant?: 'outline' | 'elevated';\n}\n\nconst Card: React.FunctionComponent<CardProps> = ({\n                                                    onCardClicked,\n                                                    topSectionProps,\n                                                    middleSectionProps,\n                                                    bottomSectionProps,\n                                                    disabled,\n                                                    variant = 'elevated',\n                                                    className,\n                                                    ...rest\n                                                  }: CardProps) => {\n\n\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLElement>[]>([]);\n  const checkBoxRef =  React.useRef<HTMLDivElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n\n  useActionWithin(containerRef, [...actionsRefs, checkBoxRef]);\n\n  const cls = `${!!onCardClicked ? 'interactive' : ''} ${disabled ? 'disabled' : ''} ${variant} ${className || ''}`;\n\n  return (\n    <Wrapper ref={containerRef}\n             className={cls}\n             tabIndex={!!onCardClicked && !disabled ? 0 : -1}\n             onMouseDown={defaultOnMouseDownHandler}\n             onKeyDown={a => a.key === 'Enter' && !disabled && onCardClicked && onCardClicked()}\n             onClick={e => !disabled && onCardClicked && onCardClicked()}\n             data-testid={'card-wrapper'}\n             {...rest}>\n      <CardTopLevelContainer>\n        {\n          topSectionProps &&\n          <CardTopSection ref={checkBoxRef}\n            {...topSectionProps} disabled={disabled}/>\n        }\n        {\n          middleSectionProps &&\n          <CardMiddleSection {...middleSectionProps} disabled={disabled}/>\n        }\n        {\n          bottomSectionProps &&\n          <CardBottomSection ref={instance => setActionsRefs(instance ?? [])}\n                             {...bottomSectionProps} disabled={disabled}/>\n        }\n      </CardTopLevelContainer>\n    </Wrapper>\n\n  );\n};\n\nexport default Card;\n"],"mappings":";;;;;;;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,OAAOC,cAAP,MAAkD,kBAAlD;AACA,OAAOC,iBAAP,MAAwD,qBAAxD;AACA,OAAOC,iBAAP,MAAwD,qBAAxD;AACA,SAAQC,UAAR,EAAoBC,MAApB,EAA4BC,yBAA5B,EAAuDC,WAAvD,EAAoEC,eAApE,QAA0F,aAA1F;;;AAEA,OAAO,IAAMC,qBAAqB,GAAGT,MAAM,CAACU,GAAV,0UACZL,MAAM,CAACM,KADK,EAWhBP,UAAU,CAACQ,YAXK,EAeVP,MAAM,CAACQ,WAfG,CAA3B;AAoBP,OAAO,IAAMC,OAAO,GAAGd,MAAM,CAACU,GAAV,6uBAKdH,WALc,EAYZE,qBAZY,EAcUJ,MAAM,CAACU,UAdjB,EAkBUV,MAAM,CAACW,WAlBjB,EAwBZP,qBAxBY,EA0BIL,UAAU,CAACa,YA1Bf,EA8BIb,UAAU,CAACc,YA9Bf,EAsCdT,qBAtCc,EAuCMJ,MAAM,CAACc,WAvCb,CAAb;;AAsDP,IAAMC,IAAwC,GAAG,SAA3CA,IAA2C,OASkB;EAAA,IARfC,aAQe,QARfA,aAQe;EAAA,IAPfC,eAOe,QAPfA,eAOe;EAAA,IANfC,kBAMe,QANfA,kBAMe;EAAA,IALfC,kBAKe,QALfA,kBAKe;EAAA,IAJfC,QAIe,QAJfA,QAIe;EAAA,wBAHfC,OAGe;EAAA,IAHfA,OAGe,6BAHL,UAGK;EAAA,IAFfC,SAEe,QAFfA,SAEe;EAAA,IADZC,IACY;;EAGjE,sBAAsC7B,KAAK,CAAC8B,QAAN,CAA+C,EAA/C,CAAtC;EAAA;EAAA,IAAOC,WAAP;EAAA,IAAoBC,cAApB;;EACA,IAAMC,WAAW,GAAIjC,KAAK,CAACkC,MAAN,CAA6B,IAA7B,CAArB;EACA,IAAMC,YAAY,GAAGnC,KAAK,CAACkC,MAAN,CAA6B,IAA7B,CAArB;EAEAzB,eAAe,CAAC0B,YAAD,+BAAmBJ,WAAnB,IAAgCE,WAAhC,GAAf;EAEA,IAAMG,GAAG,aAAM,CAAC,CAACd,aAAF,GAAkB,aAAlB,GAAkC,EAAxC,cAA8CI,QAAQ,GAAG,UAAH,GAAgB,EAAtE,cAA4EC,OAA5E,cAAuFC,SAAS,IAAI,EAApG,CAAT;EAEA,oBACE,KAAC,OAAD;IAAS,GAAG,EAAEO,YAAd;IACS,SAAS,EAAEC,GADpB;IAES,QAAQ,EAAE,CAAC,CAACd,aAAF,IAAmB,CAACI,QAApB,GAA+B,CAA/B,GAAmC,CAAC,CAFvD;IAGS,WAAW,EAAEnB,yBAHtB;IAIS,SAAS,EAAE,mBAAA8B,CAAC;MAAA,OAAIA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqB,CAACZ,QAAtB,IAAkCJ,aAAlC,IAAmDA,aAAa,EAApE;IAAA,CAJrB;IAKS,OAAO,EAAE,iBAAAiB,CAAC;MAAA,OAAI,CAACb,QAAD,IAAaJ,aAAb,IAA8BA,aAAa,EAA/C;IAAA,CALnB;IAMS,eAAa;EANtB,GAOaO,IAPb;IAAA,uBAQE,MAAC,qBAAD;MAAA,WAEIN,eAAe,iBACf,KAAC,cAAD;QAAgB,GAAG,EAAEU;MAArB,GACMV,eADN;QACuB,QAAQ,EAAEG;MADjC,GAHJ,EAOIF,kBAAkB,iBAClB,KAAC,iBAAD,kCAAuBA,kBAAvB;QAA2C,QAAQ,EAAEE;MAArD,GARJ,EAWID,kBAAkB,iBAClB,KAAC,iBAAD;QAAmB,GAAG,EAAE,aAAAe,QAAQ;UAAA,OAAIR,cAAc,CAACQ,QAAD,aAACA,QAAD,cAACA,QAAD,GAAa,EAAb,CAAlB;QAAA;MAAhC,GACuBf,kBADvB;QAC2C,QAAQ,EAAEC;MADrD,GAZJ;IAAA;EARF,GADF;AA4BD,CAhDD;;;EAREJ,a;EACAI,Q;EAIAC,O,aAAU,S,EAAY,U;;AAqDxB,eAAeN,IAAf"}
+{"version":3,"file":"Card.js","names":["React","styled","CardTopSection","CardMiddleSection","CardBottomSection","BOXSHADOWS","COLORS","defaultOnMouseDownHandler","focusStyles","useActionWithin","CardTopLevelContainer","div","white","BOXSHADOW_L1","neutral_200","Wrapper","primary_20","primary_100","BOXSHADOW_L3","BOXSHADOW_L2","neutral_100","Card","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","disabled","variant","className","rest","useState","actionsRefs","setActionsRefs","checkBoxRef","useRef","containerRef","cls","a","key","e","instance"],"sources":["../../../src/Card/VerticalCard/Card.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport CardTopSection, {CardTopSectionProps} from './CardTopSection';\nimport CardMiddleSection, {CardMiddleSectionProps} from './CardMiddleSection';\nimport CardBottomSection, {CardBottomSectionProps} from './CardBottomSection';\nimport {BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWithin} from '../../index';\n\nexport const CardTopLevelContainer = styled.div`\n  background-color: ${COLORS.white};\n  min-width: 240px;\n  max-width: 560px;\n  overflow: hidden;\n\n  border-radius: 8px;\n\n  background-clip: padding-box;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n\n  .elevated & {\n    box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n  }\n\n  .outline & {\n    border: 1px solid ${COLORS.neutral_200};\n  }\n`;\n\n\nexport const Wrapper = styled.div`\n  &.interactive:focus {\n    ${focusStyles}\n  }\n\n  &.interactive:not(.disabled) {\n    cursor: pointer;\n\n    &.outline:not(.action-within) {\n      ${CardTopLevelContainer} {\n        &:hover {\n          background-color: ${COLORS.primary_20};\n        }\n\n        &:active, &.active-state {\n          background-color: ${COLORS.primary_100};\n        }\n      }\n    }\n\n    &.elevated:not(.action-within) {\n      ${CardTopLevelContainer} {\n        &:hover {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\n        }\n\n        &:active, &.active-state {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n        }\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n    ${CardTopLevelContainer}{\n      border: 1px solid ${COLORS.neutral_100};\n    }\n  }\n`;\n\n\nexport interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {\n  onCardClicked?: () => {};\n  disabled?: boolean;\n  topSectionProps?: CardTopSectionProps;\n  middleSectionProps?: CardMiddleSectionProps;\n  bottomSectionProps?: CardBottomSectionProps;\n  variant?: 'outline' | 'elevated';\n}\n\nconst Card: React.FunctionComponent<CardProps> = ({\n                                                    onCardClicked,\n                                                    topSectionProps,\n                                                    middleSectionProps,\n                                                    bottomSectionProps,\n                                                    disabled,\n                                                    variant = 'elevated',\n                                                    className,\n                                                    ...rest\n                                                  }: CardProps) => {\n\n\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLElement>[]>([]);\n  const checkBoxRef =  React.useRef<HTMLDivElement>(null);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n\n  useActionWithin(containerRef, [...actionsRefs, checkBoxRef]);\n\n  const cls = `${!!onCardClicked ? 'interactive' : ''} ${disabled ? 'disabled' : ''} ${variant} ${className || ''}`;\n\n  return (\n    <Wrapper ref={containerRef}\n             className={cls}\n             tabIndex={!!onCardClicked && !disabled ? 0 : -1}\n             onMouseDown={defaultOnMouseDownHandler}\n             onKeyDown={a => a.key === 'Enter' && !disabled && onCardClicked && onCardClicked()}\n             onClick={e => !disabled && onCardClicked && onCardClicked()}\n             data-testid={'card-wrapper'}\n             {...rest}>\n      <CardTopLevelContainer>\n        {\n          topSectionProps &&\n          <CardTopSection ref={checkBoxRef}\n            {...topSectionProps} disabled={disabled}/>\n        }\n        {\n          middleSectionProps &&\n          <CardMiddleSection {...middleSectionProps} disabled={disabled}/>\n        }\n        {\n          bottomSectionProps &&\n          <CardBottomSection ref={instance => setActionsRefs(instance ?? [])}\n                             {...bottomSectionProps} disabled={disabled}/>\n        }\n      </CardTopLevelContainer>\n    </Wrapper>\n\n  );\n};\n\nexport default Card;\n"],"mappings":"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"}

package/dist/ChipsInput/ChipDropdownInput.cjs

@@ -89,40 +89,45 @@ var ChipDropdownInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       chips = _React$useState4[0],
       setChips = _React$useState4[1];
 
-  var _React$useState5 = React.useState(''),
+  var _React$useState5 = React.useState(),
       _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
-      value = _React$useState6[0],
-      setValue = _React$useState6[1];
+      activeDescendant = _React$useState6[0],
+      setActiveDescendant = _React$useState6[1];
 
-  var _React$useState7 = React.useState(false),
+  var _React$useState7 = React.useState(''),
       _React$useState8 = (0, _slicedToArray2.default)(_React$useState7, 2),
-      restartFilter = _React$useState8[0],
-      setRestartFilter = _React$useState8[1];
+      value = _React$useState8[0],
+      setValue = _React$useState8[1];
 
-  var _React$useState9 = React.useState(),
+  var _React$useState9 = React.useState(false),
       _React$useState10 = (0, _slicedToArray2.default)(_React$useState9, 2),
-      filteredList = _React$useState10[0],
-      setFilteredList = _React$useState10[1];
+      restartFilter = _React$useState10[0],
+      setRestartFilter = _React$useState10[1];
 
-  var _React$useState11 = React.useState(false),
+  var _React$useState11 = React.useState(),
       _React$useState12 = (0, _slicedToArray2.default)(_React$useState11, 2),
-      dropdownIsOpen = _React$useState12[0],
-      setDropdownIsOpen = _React$useState12[1];
+      filteredList = _React$useState12[0],
+      setFilteredList = _React$useState12[1];
 
-  var _React$useState13 = React.useState([]),
+  var _React$useState13 = React.useState(false),
       _React$useState14 = (0, _slicedToArray2.default)(_React$useState13, 2),
-      dropdownList = _React$useState14[0],
-      setDropdownList = _React$useState14[1];
+      dropdownIsOpen = _React$useState14[0],
+      setDropdownIsOpen = _React$useState14[1];
 
-  var _React$useState15 = React.useState(''),
+  var _React$useState15 = React.useState([]),
       _React$useState16 = (0, _slicedToArray2.default)(_React$useState15, 2),
-      dropdownValue = _React$useState16[0],
-      setDropdownValue = _React$useState16[1];
+      dropdownList = _React$useState16[0],
+      setDropdownList = _React$useState16[1];
 
-  var _React$useState17 = React.useState(null),
+  var _React$useState17 = React.useState(''),
       _React$useState18 = (0, _slicedToArray2.default)(_React$useState17, 2),
-      focused = _React$useState18[0],
-      setFocused = _React$useState18[1];
+      dropdownValue = _React$useState18[0],
+      setDropdownValue = _React$useState18[1];
+
+  var _React$useState19 = React.useState(null),
+      _React$useState20 = (0, _slicedToArray2.default)(_React$useState19, 2),
+      focused = _React$useState20[0],
+      setFocused = _React$useState20[1];
 
   var containerRef = (0, _common.useClickOutsideRef)(function () {
     return setDropdownIsOpen(false);
@@ -246,7 +251,7 @@ var ChipDropdownInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     return function () {
       document.removeEventListener('click', handleClickOutside);
     };
-  });
+  }, []);
   /**
    * update dropdown items when filtered list changes
    * */
@@ -348,6 +353,8 @@ var ChipDropdownInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       items: chips,
       required: required,
       inputValue: value,
+      role: "combobox",
+      "aria-activedescendant": activeDescendant,
       size: size,
       placeholder: placeholder,
       altPlaceholder: altPlaceholder,
@@ -375,8 +382,12 @@ var ChipDropdownInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         onValueUpdate: handleValueUpdate,
         items: dropdownList
       },
+      ariaRolesType: "input",
       focused: focused,
       setFocused: setFocused,
+      onActiveDescendantChanged: function onActiveDescendantChanged(e) {
+        return setActiveDescendant(e);
+      },
       selectedValues: [dropdownValue],
       messageOnNoResults: messageOnNoResults !== null && messageOnNoResults !== void 0 ? messageOnNoResults : '',
       setSelectedValues: function setSelectedValues() {},

package/dist/ChipsInput/ChipDropdownInput.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChipDropdownInput.cjs","names":["Wrapper","styled","div","ChipInputContainer","Z_INDEXES","dropdown","ChipDropdownInput","React","forwardRef","ref","list","onInputChange","disableSorting","messageOnNoResults","values","inputId","variants","placeholder","validationMessage","onValueChange","suggestion","loading","maxSelectedItems","multiLine","size","Size","Medium","icon","disableFiltering","disabled","altPlaceholder","required","rest","useState","givenList","setGivenList","chips","setChips","value","setValue","restartFilter","setRestartFilter","filteredList","setFilteredList","dropdownIsOpen","setDropdownIsOpen","dropdownList","setDropdownList","dropdownValue","setDropdownValue","focused","setFocused","containerRef","useClickOutsideRef","useFocusOutsideRef","inputRef","useRef","useImperativeHandle","current","useEffect","map","a","find","b","label","index","variant","States","Default","newList","e","options","filter","option","toUpperCase","indexOf","secondaryLabel","sort","push","o","length","handleClickOutside","contains","target","document","addEventListener","removeEventListener","x","displayLabel","noteLabel","SystemIcons","addChip","newChip","handleInputValueChange","handleValueUpdate","item","focus","handleInputKeyDown","event","key","stopPropagation","handleOnChipRemoved","newChips","splice","chip","action","pinTopItem","itemsType","scrollable","actionLabel","multiSelect","onValueUpdate","items"],"sources":["../../src/ChipsInput/ChipDropdownInput.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom components.\n */\nimport {ChipInputContainer, ChipInputField} from './ChipInputField';\nimport {Size, States} from '../types';\nimport {DropdownContent, DropdownItem} from '../Dropdown';\nimport {SystemIcons} from '../icons';\nimport {ChipInputProps, ChipItem} from './ChipInputTypes';\nimport {useClickOutsideRef, useFocusOutsideRef} from '../common';\nimport {Z_INDEXES} from '../styles';\n\nconst Wrapper = styled.div`\n  position: relative;\n  display: inline-block;\n  width: 100%;\n\n  ${ChipInputContainer} {\n    position: relative;\n\n    &:focus, &.focus-visible-within {\n      z-index: ${Z_INDEXES.dropdown + 1} !important;\n    }\n  }\n`;\n\n\ninterface ListItem extends ChipItem {\n  secondaryLabel?: string;\n  value: string;\n}\n\ninterface ChipDropdownInputProps extends ChipInputProps {\n  list: ListItem[] | string[];\n  onInputChange?: (input: string) => void;\n  messageOnNoResults?: string;\n  suggestion?: ListItem;\n  loading?: boolean;\n  maxSelectedItems?: number;\n  disableSorting?: boolean;\n  disableFiltering?: boolean;\n}\n\nexport const ChipDropdownInput = React.forwardRef<HTMLInputElement | undefined, ChipDropdownInputProps>(({\n                                                                                               list,\n                                                                                               onInputChange,\n                                                                                               disableSorting,\n                                                                                               messageOnNoResults,\n                                                                                               values,\n                                                                                               inputId,\n                                                                                               variants,\n                                                                                               placeholder,\n                                                                                               validationMessage,\n                                                                                               onValueChange,\n                                                                                               suggestion,\n                                                                                               loading,\n                                                                                               maxSelectedItems,\n                                                                                               multiLine = true,\n                                                                                               size = Size.Medium,\n                                                                                               icon,\n                                                                                               disableFiltering,\n                                                                                               disabled,\n                                                                                               altPlaceholder,\n                                                                                               required,\n                                                                                               ...rest\n                                                                                             }: ChipDropdownInputProps, ref) => {\n  // Initiate states\n  const [givenList, setGivenList] = React.useState<ListItem[]>([]);\n  const [chips, setChips] = React.useState<ListItem[]>([]);\n\n  const [value, setValue] = React.useState<string>('');\n  const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n  const [filteredList, setFilteredList] = React.useState<ListItem[]>();\n\n  const [dropdownIsOpen, setDropdownIsOpen] = React.useState<boolean>(false);\n  const [dropdownList, setDropdownList] = React.useState<DropdownItem[]>([]);\n  const [dropdownValue, setDropdownValue] = React.useState<string>('');\n\n  const [focused, setFocused] = React.useState<number | null>(null);\n\n  const containerRef = useClickOutsideRef(() => setDropdownIsOpen(false), [], useFocusOutsideRef(() => setDropdownIsOpen(false)));\n  const inputRef = React.useRef<any>();\n\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n\n  /**\n   * Sets initial values for the chips.\n   */\n  React.useEffect(() => {\n\n    const list =\n      values.map((a) => chips.find(b => b.value === a) || givenList.find(b => b.value === a) || {\n        label: a,\n        value: a,\n        icon: icon\n      })\n        .map((a, index) => ({...a, variant: a.variant || (variants && variants[index]) || States.Default}))\n        .map((a, index) => ({...a, icon: a.icon || icon}));\n\n    setChips(list);\n  }, [values, variants, icon, givenList]);\n\n  /**\n   * Convert string[] to List[] if necessary\n   */\n  React.useEffect(() => {\n    if (typeof list[0] === 'string') {\n      const newList: ListItem[] = (list as string[]).map((e: string) => ({label: e, value: e}));\n      setGivenList(newList);\n    } else {\n      setGivenList(list as ListItem[]);\n    }\n  }, [list]);\n\n  /**\n   * filter and sort list if remoteOperations is false\n   * */\n  React.useEffect(() => {\n    let options = [...givenList];\n    if (!disableFiltering) {\n      if (!restartFilter && value !== '') {\n        options = options.filter((option) => option.label.toUpperCase().indexOf(value.toUpperCase()) !== -1 ||\n          (option.secondaryLabel && option.secondaryLabel?.toUpperCase().indexOf(value.toUpperCase()) !== -1));\n      }\n    }\n\n    if (!disableSorting) {\n      options = options.sort();\n    }\n\n    suggestion && options.push(suggestion);\n\n    options = options.filter((o) => !chips.find(a => a.value === o.value));\n    setFilteredList(options);\n  }, [value, givenList, chips, disableFiltering, disableSorting]);\n\n  /**\n   * if there is only one active item in dropdown mark it as focused\n   * */\n  React.useEffect(() => {\n    if (dropdownIsOpen && !!value && dropdownList?.filter(a => !a.disabled).length === 1) {\n      setDropdownValue(dropdownList.find(a => !a.disabled)!.value);\n    } else {\n      setDropdownValue('');\n    }\n  }, [dropdownList, dropdownIsOpen, value]);\n\n  const handleClickOutside = (e: any) => {\n    if (!containerRef.current?.contains(e.target)) {\n      if (dropdownIsOpen) {\n        setDropdownIsOpen(false);\n        if (!givenList.find((e) => e.value === value)) {\n          setValue('');\n        }\n      }\n    }\n  };\n\n  /**\n   * register click outside event listener\n   * */\n  React.useEffect(() => {\n    document.addEventListener('click', handleClickOutside);\n    return () => {\n      document.removeEventListener('click', handleClickOutside);\n    };\n  });\n\n  /**\n   * update dropdown items when filtered list changes\n   * */\n  React.useEffect(() => {\n    setDropdownList(filteredList?.map(x => ({\n      value: x.value,\n      displayLabel: x.label,\n      noteLabel: x.secondaryLabel,\n      icon: (x.icon ?? icon) && SystemIcons[(x.icon || icon)!]({}),\n      disabled: x.disabled,\n    })) ?? []);\n  }, [filteredList]);\n\n  const addChip = (newChip: ListItem) => {\n    const newList = [...chips, newChip];\n    // Let's add the chip\n    setChips(newList);\n    onValueChange(newList.map(a => a.value));\n\n    setValue('');\n  };\n\n  const handleInputValueChange = (value: string) => {\n    setValue(value);\n    setRestartFilter(false);\n    setDropdownIsOpen(true);\n    onInputChange && onInputChange(value);\n  }\n\n  /**\n   * Add chip from dropdown\n   * */\n  const handleValueUpdate = (values: string[]) => {\n    const item = filteredList?.find(a => a.value === values[0]);\n    item && addChip(item);\n    setRestartFilter(true);\n    inputRef?.current?.focus();\n  }\n\n  /**\n   * Adds a chip to the chip list.\n   * @param event - Event handler from the key down event.\n   */\n  const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n    // Let's trigger only on enter, comma and space key press\n    if ((event.key === 'Enter' || event.key === ' ') && value) {\n      if (dropdownList?.filter(a => !a.disabled).length === 1) {\n        handleValueUpdate([dropdownList!.find(a => !a.disabled)!.value]);\n        event.stopPropagation();\n      }\n    }\n\n    if ((event.key === 'ArrowDown' || event.key === 'Down' || event.key === 'ArrowUp' || event.key === 'Up') && !!dropdownList?.length) {\n      setDropdownIsOpen(true);\n    }\n  };\n\n  /**\n   * Removes a specific chip from the chip list.\n   * @param index - Index of the chip that needs to be removed.\n   */\n  const handleOnChipRemoved = (index: number): void => {\n    // Let's copy the chips\n    const newChips = [...chips];\n\n    // Let's delete the chip\n    // If necessary, let's replace it with a different chip\n    newChips.splice(index, 1);\n\n    // Let's update the chip list\n    setChips([...newChips]);\n    onValueChange(newChips.map((e) => e.value));\n  };\n\n  return (\n    <Wrapper ref={containerRef}>\n      <ChipInputField inputId={inputId}\n                      ref={inputRef}\n                      items={chips}\n                      required={required}\n                      inputValue={value}\n                      size={size}\n                      placeholder={placeholder}\n                      altPlaceholder={altPlaceholder}\n                      disabled={disabled}\n                      multiLine={multiLine}\n                      validationMessage={validationMessage}\n                      loading={loading}\n                      onRemoveItem={(chip, index) => handleOnChipRemoved(index)}\n                      onInputValueChange={handleInputValueChange}\n                      onInputKeyDown={handleInputKeyDown}\n                      onActivationChange={(value) => setDropdownIsOpen(value)}\n                      {...rest}/>\n      <DropdownContent\n        containerRef={containerRef}\n        customizationProps={{\n          action: () => {\n          },\n          pinTopItem: true,\n\n          itemsType: 'normal',\n          scrollable: true,\n          actionLabel: '',\n          multiSelect: false,\n          onValueUpdate: handleValueUpdate,\n          items: dropdownList\n        }}\n        focused={focused}\n        setFocused={setFocused}\n        selectedValues={[dropdownValue]}\n        messageOnNoResults={messageOnNoResults ?? ''}\n        setSelectedValues={() => {\n        }}\n        isOpen={(!maxSelectedItems || (!!maxSelectedItems && chips.length < maxSelectedItems)) && dropdownIsOpen}\n        setIsOpen={setDropdownIsOpen}\n        filter={''}\n        isButton={false}\n        id={`${inputId}_dropdowncontent`}/>\n\n    </Wrapper>\n  );\n});\n"],"mappings":"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"}
+{"version":3,"file":"ChipDropdownInput.cjs","names":["Wrapper","styled","div","ChipInputContainer","Z_INDEXES","dropdown","ChipDropdownInput","React","forwardRef","ref","list","onInputChange","disableSorting","messageOnNoResults","values","inputId","variants","placeholder","validationMessage","onValueChange","suggestion","loading","maxSelectedItems","multiLine","size","Size","Medium","icon","disableFiltering","disabled","altPlaceholder","required","rest","useState","givenList","setGivenList","chips","setChips","activeDescendant","setActiveDescendant","value","setValue","restartFilter","setRestartFilter","filteredList","setFilteredList","dropdownIsOpen","setDropdownIsOpen","dropdownList","setDropdownList","dropdownValue","setDropdownValue","focused","setFocused","containerRef","useClickOutsideRef","useFocusOutsideRef","inputRef","useRef","useImperativeHandle","current","useEffect","map","a","find","b","label","index","variant","States","Default","newList","e","options","filter","option","toUpperCase","indexOf","secondaryLabel","sort","push","o","length","handleClickOutside","contains","target","document","addEventListener","removeEventListener","x","displayLabel","noteLabel","SystemIcons","addChip","newChip","handleInputValueChange","handleValueUpdate","item","focus","handleInputKeyDown","event","key","stopPropagation","handleOnChipRemoved","newChips","splice","chip","action","pinTopItem","itemsType","scrollable","actionLabel","multiSelect","onValueUpdate","items"],"sources":["../../src/ChipsInput/ChipDropdownInput.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom components.\n */\nimport {ChipInputContainer, ChipInputField} from './ChipInputField';\nimport {Size, States} from '../types';\nimport {DropdownContent, DropdownItem} from '../Dropdown';\nimport {SystemIcons} from '../icons';\nimport {ChipInputProps, ChipItem} from './ChipInputTypes';\nimport {useClickOutsideRef, useFocusOutsideRef} from '../common';\nimport {Z_INDEXES} from '../styles';\n\nconst Wrapper = styled.div`\n  position: relative;\n  display: inline-block;\n  width: 100%;\n\n  ${ChipInputContainer} {\n    position: relative;\n\n    &:focus, &.focus-visible-within {\n      z-index: ${Z_INDEXES.dropdown + 1} !important;\n    }\n  }\n`;\n\n\ninterface ListItem extends ChipItem {\n  secondaryLabel?: string;\n  value: string;\n}\n\ninterface ChipDropdownInputProps extends ChipInputProps {\n  list: ListItem[] | string[];\n  onInputChange?: (input: string) => void;\n  messageOnNoResults?: string;\n  suggestion?: ListItem;\n  loading?: boolean;\n  maxSelectedItems?: number;\n  disableSorting?: boolean;\n  disableFiltering?: boolean;\n}\n\nexport const ChipDropdownInput = React.forwardRef<HTMLInputElement | undefined, ChipDropdownInputProps>(({\n                                                                                               list,\n                                                                                               onInputChange,\n                                                                                               disableSorting,\n                                                                                               messageOnNoResults,\n                                                                                               values,\n                                                                                               inputId,\n                                                                                               variants,\n                                                                                               placeholder,\n                                                                                               validationMessage,\n                                                                                               onValueChange,\n                                                                                               suggestion,\n                                                                                               loading,\n                                                                                               maxSelectedItems,\n                                                                                               multiLine = true,\n                                                                                               size = Size.Medium,\n                                                                                               icon,\n                                                                                               disableFiltering,\n                                                                                               disabled,\n                                                                                               altPlaceholder,\n                                                                                               required,\n                                                                                               ...rest\n                                                                                             }: ChipDropdownInputProps, ref) => {\n  // Initiate states\n  const [givenList, setGivenList] = React.useState<ListItem[]>([]);\n  const [chips, setChips] = React.useState<ListItem[]>([]);\n\n  const [activeDescendant, setActiveDescendant] = React.useState<string>();\n  const [value, setValue] = React.useState<string>('');\n  const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n  const [filteredList, setFilteredList] = React.useState<ListItem[]>();\n\n  const [dropdownIsOpen, setDropdownIsOpen] = React.useState<boolean>(false);\n  const [dropdownList, setDropdownList] = React.useState<DropdownItem[]>([]);\n  const [dropdownValue, setDropdownValue] = React.useState<string>('');\n\n  const [focused, setFocused] = React.useState<number | null>(null);\n\n  const containerRef = useClickOutsideRef(() => setDropdownIsOpen(false), [], useFocusOutsideRef(() => setDropdownIsOpen(false)));\n  const inputRef = React.useRef<any>();\n\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n\n  /**\n   * Sets initial values for the chips.\n   */\n  React.useEffect(() => {\n\n    const list =\n      values.map((a) => chips.find(b => b.value === a) || givenList.find(b => b.value === a) || {\n        label: a,\n        value: a,\n        icon: icon\n      })\n        .map((a, index) => ({...a, variant: a.variant || (variants && variants[index]) || States.Default}))\n        .map((a, index) => ({...a, icon: a.icon || icon}));\n\n    setChips(list);\n  }, [values, variants, icon, givenList]);\n\n  /**\n   * Convert string[] to List[] if necessary\n   */\n  React.useEffect(() => {\n    if (typeof list[0] === 'string') {\n      const newList: ListItem[] = (list as string[]).map((e: string) => ({label: e, value: e}));\n      setGivenList(newList);\n    } else {\n      setGivenList(list as ListItem[]);\n    }\n  }, [list]);\n\n  /**\n   * filter and sort list if remoteOperations is false\n   * */\n  React.useEffect(() => {\n    let options = [...givenList];\n    if (!disableFiltering) {\n      if (!restartFilter && value !== '') {\n        options = options.filter((option) => option.label.toUpperCase().indexOf(value.toUpperCase()) !== -1 ||\n          (option.secondaryLabel && option.secondaryLabel?.toUpperCase().indexOf(value.toUpperCase()) !== -1));\n      }\n    }\n\n    if (!disableSorting) {\n      options = options.sort();\n    }\n\n    suggestion && options.push(suggestion);\n\n    options = options.filter((o) => !chips.find(a => a.value === o.value));\n    setFilteredList(options);\n  }, [value, givenList, chips, disableFiltering, disableSorting]);\n\n  /**\n   * if there is only one active item in dropdown mark it as focused\n   * */\n  React.useEffect(() => {\n    if (dropdownIsOpen && !!value && dropdownList?.filter(a => !a.disabled).length === 1) {\n      setDropdownValue(dropdownList.find(a => !a.disabled)!.value);\n    } else {\n      setDropdownValue('');\n    }\n  }, [dropdownList, dropdownIsOpen, value]);\n\n  const handleClickOutside = (e: any) => {\n    if (!containerRef.current?.contains(e.target)) {\n      if (dropdownIsOpen) {\n        setDropdownIsOpen(false);\n        if (!givenList.find((e) => e.value === value)) {\n          setValue('');\n        }\n      }\n    }\n  };\n\n  /**\n   * register click outside event listener\n   * */\n  React.useEffect(() => {\n    document.addEventListener('click', handleClickOutside);\n    return () => {\n      document.removeEventListener('click', handleClickOutside);\n    };\n  }, []);\n\n  /**\n   * update dropdown items when filtered list changes\n   * */\n  React.useEffect(() => {\n    setDropdownList(filteredList?.map(x => ({\n      value: x.value,\n      displayLabel: x.label,\n      noteLabel: x.secondaryLabel,\n      icon: (x.icon ?? icon) && SystemIcons[(x.icon || icon)!]({}),\n      disabled: x.disabled,\n    })) ?? []);\n  }, [filteredList]);\n\n  const addChip = (newChip: ListItem) => {\n    const newList = [...chips, newChip];\n    // Let's add the chip\n    setChips(newList);\n    onValueChange(newList.map(a => a.value));\n\n    setValue('');\n  };\n\n  const handleInputValueChange = (value: string) => {\n    setValue(value);\n    setRestartFilter(false);\n    setDropdownIsOpen(true);\n    onInputChange && onInputChange(value);\n  }\n\n  /**\n   * Add chip from dropdown\n   * */\n  const handleValueUpdate = (values: string[]) => {\n    const item = filteredList?.find(a => a.value === values[0]);\n    item && addChip(item);\n    setRestartFilter(true);\n    inputRef?.current?.focus();\n  }\n\n  /**\n   * Adds a chip to the chip list.\n   * @param event - Event handler from the key down event.\n   */\n  const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n    // Let's trigger only on enter, comma and space key press\n    if ((event.key === 'Enter' || event.key === ' ') && value) {\n      if (dropdownList?.filter(a => !a.disabled).length === 1) {\n        handleValueUpdate([dropdownList!.find(a => !a.disabled)!.value]);\n        event.stopPropagation();\n      }\n    }\n\n    if ((event.key === 'ArrowDown' || event.key === 'Down' || event.key === 'ArrowUp' || event.key === 'Up') && !!dropdownList?.length) {\n      setDropdownIsOpen(true);\n    }\n  };\n\n  /**\n   * Removes a specific chip from the chip list.\n   * @param index - Index of the chip that needs to be removed.\n   */\n  const handleOnChipRemoved = (index: number): void => {\n    // Let's copy the chips\n    const newChips = [...chips];\n\n    // Let's delete the chip\n    // If necessary, let's replace it with a different chip\n    newChips.splice(index, 1);\n\n    // Let's update the chip list\n    setChips([...newChips]);\n    onValueChange(newChips.map((e) => e.value));\n  };\n\n  return (\n    <Wrapper ref={containerRef}>\n      <ChipInputField inputId={inputId}\n                      ref={inputRef}\n                      items={chips}\n                      required={required}\n                      inputValue={value}\n                      role=\"combobox\"\n                      aria-activedescendant={activeDescendant}\n                      size={size}\n                      placeholder={placeholder}\n                      altPlaceholder={altPlaceholder}\n                      disabled={disabled}\n                      multiLine={multiLine}\n                      validationMessage={validationMessage}\n                      loading={loading}\n                      onRemoveItem={(chip, index) => handleOnChipRemoved(index)}\n                      onInputValueChange={handleInputValueChange}\n                      onInputKeyDown={handleInputKeyDown}\n                      onActivationChange={(value) => setDropdownIsOpen(value)}\n                      {...rest}/>\n      <DropdownContent\n        containerRef={containerRef}\n        customizationProps={{\n          action: () => {\n          },\n          pinTopItem: true,\n\n          itemsType: 'normal',\n          scrollable: true,\n          actionLabel: '',\n          multiSelect: false,\n          onValueUpdate: handleValueUpdate,\n          items: dropdownList,\n        }}\n        ariaRolesType=\"input\"\n        focused={focused}\n        setFocused={setFocused}\n        onActiveDescendantChanged={(e) => setActiveDescendant(e)}\n        selectedValues={[dropdownValue]}\n        messageOnNoResults={messageOnNoResults ?? ''}\n        setSelectedValues={() => {\n        }}\n        isOpen={(!maxSelectedItems || (!!maxSelectedItems && chips.length < maxSelectedItems)) && dropdownIsOpen}\n        setIsOpen={setDropdownIsOpen}\n        filter={''}\n        isButton={false}\n        id={`${inputId}_dropdowncontent`}/>\n\n    </Wrapper>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAGA;;AAKA;;AAKA;;AACA;;AACA;;AACA;;AAEA;;AACA;;;;;;;;;;;;;;;;AAEA,IAAMA,OAAO,GAAGC,yBAAA,CAAOC,GAAV,kRAKTC,kCALS,EASIC,iBAAA,CAAUC,QAAV,GAAqB,CATzB,CAAb;;AA+BO,IAAMC,iBAAiB,gBAAGC,KAAK,CAACC,UAAN,CAAuE,gBAsBgBC,GAtBhB,EAsBwB;EAAA,IArBjCC,IAqBiC,QArBjCA,IAqBiC;EAAA,IApBjCC,aAoBiC,QApBjCA,aAoBiC;EAAA,IAnBjCC,cAmBiC,QAnBjCA,cAmBiC;EAAA,IAlBjCC,kBAkBiC,QAlBjCA,kBAkBiC;EAAA,IAjBjCC,MAiBiC,QAjBjCA,MAiBiC;EAAA,IAhBjCC,OAgBiC,QAhBjCA,OAgBiC;EAAA,IAfjCC,QAeiC,QAfjCA,QAeiC;EAAA,IAdjCC,WAciC,QAdjCA,WAciC;EAAA,IAbjCC,iBAaiC,QAbjCA,iBAaiC;EAAA,IAZjCC,aAYiC,QAZjCA,aAYiC;EAAA,IAXjCC,UAWiC,QAXjCA,UAWiC;EAAA,IAVjCC,OAUiC,QAVjCA,OAUiC;EAAA,IATjCC,gBASiC,QATjCA,gBASiC;EAAA,0BARjCC,SAQiC;EAAA,IARjCA,SAQiC,+BARrB,IAQqB;EAAA,qBAPjCC,IAOiC;EAAA,IAPjCA,IAOiC,0BAP1BC,WAAA,CAAKC,MAOqB;EAAA,IANjCC,IAMiC,QANjCA,IAMiC;EAAA,IALjCC,gBAKiC,QALjCA,gBAKiC;EAAA,IAJjCC,QAIiC,QAJjCA,QAIiC;EAAA,IAHjCC,cAGiC,QAHjCA,cAGiC;EAAA,IAFjCC,QAEiC,QAFjCA,QAEiC;EAAA,IAD9BC,IAC8B;;EAC9H;EACA,sBAAkCzB,KAAK,CAAC0B,QAAN,CAA2B,EAA3B,CAAlC;EAAA;EAAA,IAAOC,SAAP;EAAA,IAAkBC,YAAlB;;EACA,uBAA0B5B,KAAK,CAAC0B,QAAN,CAA2B,EAA3B,CAA1B;EAAA;EAAA,IAAOG,KAAP;EAAA,IAAcC,QAAd;;EAEA,uBAAgD9B,KAAK,CAAC0B,QAAN,EAAhD;EAAA;EAAA,IAAOK,gBAAP;EAAA,IAAyBC,mBAAzB;;EACA,uBAA0BhC,KAAK,CAAC0B,QAAN,CAAuB,EAAvB,CAA1B;EAAA;EAAA,IAAOO,KAAP;EAAA,IAAcC,QAAd;;EACA,uBAA0ClC,KAAK,CAAC0B,QAAN,CAAwB,KAAxB,CAA1C;EAAA;EAAA,IAAOS,aAAP;EAAA,IAAsBC,gBAAtB;;EACA,wBAAwCpC,KAAK,CAAC0B,QAAN,EAAxC;EAAA;EAAA,IAAOW,YAAP;EAAA,IAAqBC,eAArB;;EAEA,wBAA4CtC,KAAK,CAAC0B,QAAN,CAAwB,KAAxB,CAA5C;EAAA;EAAA,IAAOa,cAAP;EAAA,IAAuBC,iBAAvB;;EACA,wBAAwCxC,KAAK,CAAC0B,QAAN,CAA+B,EAA/B,CAAxC;EAAA;EAAA,IAAOe,YAAP;EAAA,IAAqBC,eAArB;;EACA,wBAA0C1C,KAAK,CAAC0B,QAAN,CAAuB,EAAvB,CAA1C;EAAA;EAAA,IAAOiB,aAAP;EAAA,IAAsBC,gBAAtB;;EAEA,wBAA8B5C,KAAK,CAAC0B,QAAN,CAA8B,IAA9B,CAA9B;EAAA;EAAA,IAAOmB,OAAP;EAAA,IAAgBC,UAAhB;;EAEA,IAAMC,YAAY,GAAG,IAAAC,0BAAA,EAAmB;IAAA,OAAMR,iBAAiB,CAAC,KAAD,CAAvB;EAAA,CAAnB,EAAmD,EAAnD,EAAuD,IAAAS,0BAAA,EAAmB;IAAA,OAAMT,iBAAiB,CAAC,KAAD,CAAvB;EAAA,CAAnB,CAAvD,CAArB;EACA,IAAMU,QAAQ,GAAGlD,KAAK,CAACmD,MAAN,EAAjB;EAEAnD,KAAK,CAACoD,mBAAN,CAA0BlD,GAA1B,EAA+B;IAAA,OAAMgD,QAAQ,CAACG,OAAf;EAAA,CAA/B,EAAuD,CAACH,QAAD,CAAvD;EAGA;AACF;AACA;;EACElD,KAAK,CAACsD,SAAN,CAAgB,YAAM;IAEpB,IAAMnD,IAAI,GACRI,MAAM,CAACgD,GAAP,CAAW,UAACC,CAAD;MAAA,OAAO3B,KAAK,CAAC4B,IAAN,CAAW,UAAAC,CAAC;QAAA,OAAIA,CAAC,CAACzB,KAAF,KAAYuB,CAAhB;MAAA,CAAZ,KAAkC7B,SAAS,CAAC8B,IAAV,CAAe,UAAAC,CAAC;QAAA,OAAIA,CAAC,CAACzB,KAAF,KAAYuB,CAAhB;MAAA,CAAhB,CAAlC,IAAwE;QACxFG,KAAK,EAAEH,CADiF;QAExFvB,KAAK,EAAEuB,CAFiF;QAGxFpC,IAAI,EAAEA;MAHkF,CAA/E;IAAA,CAAX,EAKGmC,GALH,CAKO,UAACC,CAAD,EAAII,KAAJ;MAAA,uCAAmBJ,CAAnB;QAAsBK,OAAO,EAAEL,CAAC,CAACK,OAAF,IAAcpD,QAAQ,IAAIA,QAAQ,CAACmD,KAAD,CAAlC,IAA8CE,aAAA,CAAOC;MAApF;IAAA,CALP,EAMGR,GANH,CAMO,UAACC,CAAD,EAAII,KAAJ;MAAA,uCAAmBJ,CAAnB;QAAsBpC,IAAI,EAAEoC,CAAC,CAACpC,IAAF,IAAUA;MAAtC;IAAA,CANP,CADF;IASAU,QAAQ,CAAC3B,IAAD,CAAR;EACD,CAZD,EAYG,CAACI,MAAD,EAASE,QAAT,EAAmBW,IAAnB,EAAyBO,SAAzB,CAZH;EAcA;AACF;AACA;;EACE3B,KAAK,CAACsD,SAAN,CAAgB,YAAM;IACpB,IAAI,OAAOnD,IAAI,CAAC,CAAD,CAAX,KAAmB,QAAvB,EAAiC;MAC/B,IAAM6D,OAAmB,GAAI7D,IAAD,CAAmBoD,GAAnB,CAAuB,UAACU,CAAD;QAAA,OAAgB;UAACN,KAAK,EAAEM,CAAR;UAAWhC,KAAK,EAAEgC;QAAlB,CAAhB;MAAA,CAAvB,CAA5B;MACArC,YAAY,CAACoC,OAAD,CAAZ;IACD,CAHD,MAGO;MACLpC,YAAY,CAACzB,IAAD,CAAZ;IACD;EACF,CAPD,EAOG,CAACA,IAAD,CAPH;EASA;AACF;AACA;;EACEH,KAAK,CAACsD,SAAN,CAAgB,YAAM;IACpB,IAAIY,OAAO,oCAAOvC,SAAP,CAAX;;IACA,IAAI,CAACN,gBAAL,EAAuB;MACrB,IAAI,CAACc,aAAD,IAAkBF,KAAK,KAAK,EAAhC,EAAoC;QAClCiC,OAAO,GAAGA,OAAO,CAACC,MAAR,CAAe,UAACC,MAAD;UAAA;;UAAA,OAAYA,MAAM,CAACT,KAAP,CAAaU,WAAb,GAA2BC,OAA3B,CAAmCrC,KAAK,CAACoC,WAAN,EAAnC,MAA4D,CAAC,CAA7D,IAClCD,MAAM,CAACG,cAAP,IAAyB,0BAAAH,MAAM,CAACG,cAAP,gFAAuBF,WAAvB,GAAqCC,OAArC,CAA6CrC,KAAK,CAACoC,WAAN,EAA7C,OAAsE,CAAC,CAD1E;QAAA,CAAf,CAAV;MAED;IACF;;IAED,IAAI,CAAChE,cAAL,EAAqB;MACnB6D,OAAO,GAAGA,OAAO,CAACM,IAAR,EAAV;IACD;;IAED3D,UAAU,IAAIqD,OAAO,CAACO,IAAR,CAAa5D,UAAb,CAAd;IAEAqD,OAAO,GAAGA,OAAO,CAACC,MAAR,CAAe,UAACO,CAAD;MAAA,OAAO,CAAC7C,KAAK,CAAC4B,IAAN,CAAW,UAAAD,CAAC;QAAA,OAAIA,CAAC,CAACvB,KAAF,KAAYyC,CAAC,CAACzC,KAAlB;MAAA,CAAZ,CAAR;IAAA,CAAf,CAAV;IACAK,eAAe,CAAC4B,OAAD,CAAf;EACD,CAjBD,EAiBG,CAACjC,KAAD,EAAQN,SAAR,EAAmBE,KAAnB,EAA0BR,gBAA1B,EAA4ChB,cAA5C,CAjBH;EAmBA;AACF;AACA;;EACEL,KAAK,CAACsD,SAAN,CAAgB,YAAM;IACpB,IAAIf,cAAc,IAAI,CAAC,CAACN,KAApB,IAA6B,CAAAQ,YAAY,SAAZ,IAAAA,YAAY,WAAZ,YAAAA,YAAY,CAAE0B,MAAd,CAAqB,UAAAX,CAAC;MAAA,OAAI,CAACA,CAAC,CAAClC,QAAP;IAAA,CAAtB,EAAuCqD,MAAvC,MAAkD,CAAnF,EAAsF;MACpF/B,gBAAgB,CAACH,YAAY,CAACgB,IAAb,CAAkB,UAAAD,CAAC;QAAA,OAAI,CAACA,CAAC,CAAClC,QAAP;MAAA,CAAnB,EAAqCW,KAAtC,CAAhB;IACD,CAFD,MAEO;MACLW,gBAAgB,CAAC,EAAD,CAAhB;IACD;EACF,CAND,EAMG,CAACH,YAAD,EAAeF,cAAf,EAA+BN,KAA/B,CANH;;EAQA,IAAM2C,kBAAkB,GAAG,SAArBA,kBAAqB,CAACX,CAAD,EAAY;IAAA;;IACrC,IAAI,2BAAClB,YAAY,CAACM,OAAd,kDAAC,sBAAsBwB,QAAtB,CAA+BZ,CAAC,CAACa,MAAjC,CAAD,CAAJ,EAA+C;MAC7C,IAAIvC,cAAJ,EAAoB;QAClBC,iBAAiB,CAAC,KAAD,CAAjB;;QACA,IAAI,CAACb,SAAS,CAAC8B,IAAV,CAAe,UAACQ,CAAD;UAAA,OAAOA,CAAC,CAAChC,KAAF,KAAYA,KAAnB;QAAA,CAAf,CAAL,EAA+C;UAC7CC,QAAQ,CAAC,EAAD,CAAR;QACD;MACF;IACF;EACF,CATD;EAWA;AACF;AACA;;;EACElC,KAAK,CAACsD,SAAN,CAAgB,YAAM;IACpByB,QAAQ,CAACC,gBAAT,CAA0B,OAA1B,EAAmCJ,kBAAnC;IACA,OAAO,YAAM;MACXG,QAAQ,CAACE,mBAAT,CAA6B,OAA7B,EAAsCL,kBAAtC;IACD,CAFD;EAGD,CALD,EAKG,EALH;EAOA;AACF;AACA;;EACE5E,KAAK,CAACsD,SAAN,CAAgB,YAAM;IAAA;;IACpBZ,eAAe,sBAACL,YAAD,aAACA,YAAD,uBAACA,YAAY,CAAEkB,GAAd,CAAkB,UAAA2B,CAAC;MAAA;;MAAA,OAAK;QACtCjD,KAAK,EAAEiD,CAAC,CAACjD,KAD6B;QAEtCkD,YAAY,EAAED,CAAC,CAACvB,KAFsB;QAGtCyB,SAAS,EAAEF,CAAC,CAACX,cAHyB;QAItCnD,IAAI,EAAE,YAAC8D,CAAC,CAAC9D,IAAH,6CAAWA,IAAX,KAAoBiE,kBAAA,CAAaH,CAAC,CAAC9D,IAAF,IAAUA,IAAvB,EAA+B,EAA/B,CAJY;QAKtCE,QAAQ,EAAE4D,CAAC,CAAC5D;MAL0B,CAAL;IAAA,CAAnB,CAAD,iEAMR,EANQ,CAAf;EAOD,CARD,EAQG,CAACe,YAAD,CARH;;EAUA,IAAMiD,OAAO,GAAG,SAAVA,OAAU,CAACC,OAAD,EAAuB;IACrC,IAAMvB,OAAO,8CAAOnC,KAAP,IAAc0D,OAAd,EAAb,CADqC,CAErC;;IACAzD,QAAQ,CAACkC,OAAD,CAAR;IACApD,aAAa,CAACoD,OAAO,CAACT,GAAR,CAAY,UAAAC,CAAC;MAAA,OAAIA,CAAC,CAACvB,KAAN;IAAA,CAAb,CAAD,CAAb;IAEAC,QAAQ,CAAC,EAAD,CAAR;EACD,CAPD;;EASA,IAAMsD,sBAAsB,GAAG,SAAzBA,sBAAyB,CAACvD,KAAD,EAAmB;IAChDC,QAAQ,CAACD,KAAD,CAAR;IACAG,gBAAgB,CAAC,KAAD,CAAhB;IACAI,iBAAiB,CAAC,IAAD,CAAjB;IACApC,aAAa,IAAIA,aAAa,CAAC6B,KAAD,CAA9B;EACD,CALD;EAOA;AACF;AACA;;;EACE,IAAMwD,iBAAiB,GAAG,SAApBA,iBAAoB,CAAClF,MAAD,EAAsB;IAAA;;IAC9C,IAAMmF,IAAI,GAAGrD,YAAH,aAAGA,YAAH,uBAAGA,YAAY,CAAEoB,IAAd,CAAmB,UAAAD,CAAC;MAAA,OAAIA,CAAC,CAACvB,KAAF,KAAY1B,MAAM,CAAC,CAAD,CAAtB;IAAA,CAApB,CAAb;IACAmF,IAAI,IAAIJ,OAAO,CAACI,IAAD,CAAf;IACAtD,gBAAgB,CAAC,IAAD,CAAhB;IACAc,QAAQ,SAAR,IAAAA,QAAQ,WAAR,iCAAAA,QAAQ,CAAEG,OAAV,wEAAmBsC,KAAnB;EACD,CALD;EAOA;AACF;AACA;AACA;;;EACE,IAAMC,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,KAAD,EAAwD;IACjF;IACA,IAAI,CAACA,KAAK,CAACC,GAAN,KAAc,OAAd,IAAyBD,KAAK,CAACC,GAAN,KAAc,GAAxC,KAAgD7D,KAApD,EAA2D;MACzD,IAAI,CAAAQ,YAAY,SAAZ,IAAAA,YAAY,WAAZ,YAAAA,YAAY,CAAE0B,MAAd,CAAqB,UAAAX,CAAC;QAAA,OAAI,CAACA,CAAC,CAAClC,QAAP;MAAA,CAAtB,EAAuCqD,MAAvC,MAAkD,CAAtD,EAAyD;QACvDc,iBAAiB,CAAC,CAAChD,YAAY,CAAEgB,IAAd,CAAmB,UAAAD,CAAC;UAAA,OAAI,CAACA,CAAC,CAAClC,QAAP;QAAA,CAApB,EAAsCW,KAAvC,CAAD,CAAjB;QACA4D,KAAK,CAACE,eAAN;MACD;IACF;;IAED,IAAI,CAACF,KAAK,CAACC,GAAN,KAAc,WAAd,IAA6BD,KAAK,CAACC,GAAN,KAAc,MAA3C,IAAqDD,KAAK,CAACC,GAAN,KAAc,SAAnE,IAAgFD,KAAK,CAACC,GAAN,KAAc,IAA/F,KAAwG,CAAC,EAACrD,YAAD,aAACA,YAAD,eAACA,YAAY,CAAEkC,MAAf,CAA7G,EAAoI;MAClInC,iBAAiB,CAAC,IAAD,CAAjB;IACD;EACF,CAZD;EAcA;AACF;AACA;AACA;;;EACE,IAAMwD,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACpC,KAAD,EAAyB;IACnD;IACA,IAAMqC,QAAQ,oCAAOpE,KAAP,CAAd,CAFmD,CAInD;IACA;;IACAoE,QAAQ,CAACC,MAAT,CAAgBtC,KAAhB,EAAuB,CAAvB,EANmD,CAQnD;;IACA9B,QAAQ,kCAAKmE,QAAL,EAAR;IACArF,aAAa,CAACqF,QAAQ,CAAC1C,GAAT,CAAa,UAACU,CAAD;MAAA,OAAOA,CAAC,CAAChC,KAAT;IAAA,CAAb,CAAD,CAAb;EACD,CAXD;;EAaA,oBACE,sBAAC,OAAD;IAAS,GAAG,EAAEc,YAAd;IAAA,wBACE,qBAAC,8BAAD;MAAgB,OAAO,EAAEvC,OAAzB;MACgB,GAAG,EAAE0C,QADrB;MAEgB,KAAK,EAAErB,KAFvB;MAGgB,QAAQ,EAAEL,QAH1B;MAIgB,UAAU,EAAES,KAJ5B;MAKgB,IAAI,EAAC,UALrB;MAMgB,yBAAuBF,gBANvC;MAOgB,IAAI,EAAEd,IAPtB;MAQgB,WAAW,EAAEP,WAR7B;MASgB,cAAc,EAAEa,cAThC;MAUgB,QAAQ,EAAED,QAV1B;MAWgB,SAAS,EAAEN,SAX3B;MAYgB,iBAAiB,EAAEL,iBAZnC;MAagB,OAAO,EAAEG,OAbzB;MAcgB,YAAY,EAAE,sBAACqF,IAAD,EAAOvC,KAAP;QAAA,OAAiBoC,mBAAmB,CAACpC,KAAD,CAApC;MAAA,CAd9B;MAegB,kBAAkB,EAAE4B,sBAfpC;MAgBgB,cAAc,EAAEI,kBAhBhC;MAiBgB,kBAAkB,EAAE,4BAAC3D,KAAD;QAAA,OAAWO,iBAAiB,CAACP,KAAD,CAA5B;MAAA;IAjBpC,GAkBoBR,IAlBpB,EADF,eAoBE,qBAAC,yBAAD;MACE,YAAY,EAAEsB,YADhB;MAEE,kBAAkB,EAAE;QAClBqD,MAAM,EAAE,kBAAM,CACb,CAFiB;QAGlBC,UAAU,EAAE,IAHM;QAKlBC,SAAS,EAAE,QALO;QAMlBC,UAAU,EAAE,IANM;QAOlBC,WAAW,EAAE,EAPK;QAQlBC,WAAW,EAAE,KARK;QASlBC,aAAa,EAAEjB,iBATG;QAUlBkB,KAAK,EAAElE;MAVW,CAFtB;MAcE,aAAa,EAAC,OAdhB;MAeE,OAAO,EAAEI,OAfX;MAgBE,UAAU,EAAEC,UAhBd;MAiBE,yBAAyB,EAAE,mCAACmB,CAAD;QAAA,OAAOjC,mBAAmB,CAACiC,CAAD,CAA1B;MAAA,CAjB7B;MAkBE,cAAc,EAAE,CAACtB,aAAD,CAlBlB;MAmBE,kBAAkB,EAAErC,kBAAF,aAAEA,kBAAF,cAAEA,kBAAF,GAAwB,EAnB5C;MAoBE,iBAAiB,EAAE,6BAAM,CACxB,CArBH;MAsBE,MAAM,EAAE,CAAC,CAACS,gBAAD,IAAsB,CAAC,CAACA,gBAAF,IAAsBc,KAAK,CAAC8C,MAAN,GAAe5D,gBAA5D,KAAkFwB,cAtB5F;MAuBE,SAAS,EAAEC,iBAvBb;MAwBE,MAAM,EAAE,EAxBV;MAyBE,QAAQ,EAAE,KAzBZ;MA0BE,EAAE,YAAKhC,OAAL;IA1BJ,EApBF;EAAA,EADF;AAmDD,CA5PgC,CAA1B;;;EAVLL,I;IALAoE,c;IACAtC,K;;EAKA7B,a;EACAE,kB;EACAO,U;IARA0D,c;IACAtC,K;;EAQAnB,O;EACAC,gB;EACAV,c;EACAgB,gB"}

package/dist/ChipsInput/ChipDropdownInput.js

@@ -70,40 +70,45 @@ export var ChipDropdownInput = /*#__PURE__*/React.forwardRef(function (_ref, ref
       chips = _React$useState4[0],
       setChips = _React$useState4[1];
 
-  var _React$useState5 = React.useState(''),
+  var _React$useState5 = React.useState(),
       _React$useState6 = _slicedToArray(_React$useState5, 2),
-      value = _React$useState6[0],
-      setValue = _React$useState6[1];
+      activeDescendant = _React$useState6[0],
+      setActiveDescendant = _React$useState6[1];
 
-  var _React$useState7 = React.useState(false),
+  var _React$useState7 = React.useState(''),
       _React$useState8 = _slicedToArray(_React$useState7, 2),
-      restartFilter = _React$useState8[0],
-      setRestartFilter = _React$useState8[1];
+      value = _React$useState8[0],
+      setValue = _React$useState8[1];
 
-  var _React$useState9 = React.useState(),
+  var _React$useState9 = React.useState(false),
       _React$useState10 = _slicedToArray(_React$useState9, 2),
-      filteredList = _React$useState10[0],
-      setFilteredList = _React$useState10[1];
+      restartFilter = _React$useState10[0],
+      setRestartFilter = _React$useState10[1];
 
-  var _React$useState11 = React.useState(false),
+  var _React$useState11 = React.useState(),
       _React$useState12 = _slicedToArray(_React$useState11, 2),
-      dropdownIsOpen = _React$useState12[0],
-      setDropdownIsOpen = _React$useState12[1];
+      filteredList = _React$useState12[0],
+      setFilteredList = _React$useState12[1];
 
-  var _React$useState13 = React.useState([]),
+  var _React$useState13 = React.useState(false),
       _React$useState14 = _slicedToArray(_React$useState13, 2),
-      dropdownList = _React$useState14[0],
-      setDropdownList = _React$useState14[1];
+      dropdownIsOpen = _React$useState14[0],
+      setDropdownIsOpen = _React$useState14[1];
 
-  var _React$useState15 = React.useState(''),
+  var _React$useState15 = React.useState([]),
       _React$useState16 = _slicedToArray(_React$useState15, 2),
-      dropdownValue = _React$useState16[0],
-      setDropdownValue = _React$useState16[1];
+      dropdownList = _React$useState16[0],
+      setDropdownList = _React$useState16[1];
 
-  var _React$useState17 = React.useState(null),
+  var _React$useState17 = React.useState(''),
       _React$useState18 = _slicedToArray(_React$useState17, 2),
-      focused = _React$useState18[0],
-      setFocused = _React$useState18[1];
+      dropdownValue = _React$useState18[0],
+      setDropdownValue = _React$useState18[1];
+
+  var _React$useState19 = React.useState(null),
+      _React$useState20 = _slicedToArray(_React$useState19, 2),
+      focused = _React$useState20[0],
+      setFocused = _React$useState20[1];
 
   var containerRef = useClickOutsideRef(function () {
     return setDropdownIsOpen(false);
@@ -227,7 +232,7 @@ export var ChipDropdownInput = /*#__PURE__*/React.forwardRef(function (_ref, ref
     return function () {
       document.removeEventListener('click', handleClickOutside);
     };
-  });
+  }, []);
   /**
    * update dropdown items when filtered list changes
    * */
@@ -330,6 +335,8 @@ export var ChipDropdownInput = /*#__PURE__*/React.forwardRef(function (_ref, ref
       items: chips,
       required: required,
       inputValue: value,
+      role: "combobox",
+      "aria-activedescendant": activeDescendant,
       size: size,
       placeholder: placeholder,
       altPlaceholder: altPlaceholder,
@@ -357,8 +364,12 @@ export var ChipDropdownInput = /*#__PURE__*/React.forwardRef(function (_ref, ref
         onValueUpdate: handleValueUpdate,
         items: dropdownList
       },
+      ariaRolesType: "input",
       focused: focused,
       setFocused: setFocused,
+      onActiveDescendantChanged: function onActiveDescendantChanged(e) {
+        return setActiveDescendant(e);
+      },
       selectedValues: [dropdownValue],
       messageOnNoResults: messageOnNoResults !== null && messageOnNoResults !== void 0 ? messageOnNoResults : '',
       setSelectedValues: function setSelectedValues() {},