@laerdal/life-react-components 1.5.1-dev.28 → 1.5.1-dev.31

package/dist/Card/CardTopSection.cjs

@@ -21,6 +21,8 @@ var _typography = require("../styles/typography");
 
 var _Checkbox = _interopRequireDefault(require("../InputFields/Checkbox"));
 
+var _Tag = require("../Tag");
+
 var _ = require("..");
 
 var _jsxRuntime = require("react/jsx-runtime");
@@ -31,23 +33,23 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var Img = _styledComponents.default.img(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  object-fit: cover;\n  width: 100%;\n  height: 100%;\n"])));
+var Img = _styledComponents.default.img(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  object-fit: cover;\n  width: 100%;\n  height: 100%;\n  border-top-right-radius: 8px;\n  border-top-left-radius: 8px;\n"])));
 
-var TagContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  color: white;\n  border-radius: 2px;\n  padding: 4px;\n  display: flex;\n  position: absolute;\n  flex-direction: row;\n  align-items: center;\n  top: 16px;\n  left: 16px;\n\n  svg {\n    color: white;\n    margin-right: 4px;\n  }\n"])), _.COLORS.correct_500);
+var TagContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  color: white;\n  position: absolute;\n\n  top: 16px;\n  left: 16px;\n"])), _.COLORS.correct_500);
 
-var Container = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  width: 100%;\n  height: 200px;\n  overflow: hidden;\n  border-top-right-radius: 8px;\n  border-top-left-radius: 8px;\n\n  ", "\n\n  ", "\n"])), function (props) {
+var Container = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  width: 100%;\n  height: 200px;\n  overflow: visible;\n\n  ", "\n\n  ", "\n"])), function (props) {
   return props.disabled ? "\n  img, svg {\n    filter: grayscale(100%);\n  }" : '';
 }, function (props) {
   return props.interactionType == _.InteractionType.Clickable ? "\n    cursor: ".concat(props.disabled ? 'not-allowed' : 'pointer', ";\n  ") : '';
 });
 
-var RibbonContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  height: calc(40px - 16px);\n  background-color: ", ";\n  width: calc(100% - 32px);\n  position: absolute;\n  bottom: 0px;\n  left: 0px;\n  padding: 8px 16px 8px 16px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    color: ", ";\n    margin-right: 9px;\n  }\n"])), function (props) {
+var RibbonContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  height: calc(40px - 16px);\n  background-color: ", ";\n  width: calc(100% - 32px);\n  position: absolute;\n  bottom: 0px;\n  left: 0px;\n  padding: 8px 16px 8px 16px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    color: ", ";\n    margin-right: 9px;\n    width: 24px;\n    height: 24px;\n  }\n"])), function (props) {
   return props.$backgroundColor;
 }, function (props) {
   return props.$color;
 });
 
-var CheckboxContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: 14px;\n  right: 14px;\n\n  .checkbox-icon {\n    background-color: ", ";\n  }\n"])), _.COLORS.white);
+var CheckboxContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: 0px;\n  right: 0px;\n\n  .checkbox-icon {\n    background-color: ", ";\n  }\n"])), _.COLORS.white);
 
 var CardTopSection = function CardTopSection(_ref) {
   var interactionType = _ref.interactionType,
@@ -56,6 +58,8 @@ var CardTopSection = function CardTopSection(_ref) {
       image = _ref.image,
       tagLabel = _ref.tagLabel,
       tagIcon = _ref.tagIcon,
+      _ref$tagVariant = _ref.tagVariant,
+      tagVariant = _ref$tagVariant === void 0 ? 'positive' : _ref$tagVariant,
       highlightRibbonIcon = _ref.highlightRibbonIcon,
       highlightRibbonText = _ref.highlightRibbonText,
       highlightRibbonContentColor = _ref.highlightRibbonContentColor,
@@ -73,10 +77,12 @@ var CardTopSection = function CardTopSection(_ref) {
         },
         selected: selected
       })
-    }), (tagLabel || tagIcon) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(TagContainer, {
-      children: [tagIcon, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        children: tagLabel
-      })]
+    }), (tagLabel || tagIcon) && /*#__PURE__*/(0, _jsxRuntime.jsx)(TagContainer, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tag.Tag, {
+        label: tagLabel,
+        variant: tagVariant,
+        icon: tagIcon
+      })
     }), (highlightRibbonIcon || highlightRibbonText) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(RibbonContainer, {
       $color: highlightRibbonContentColor !== null && highlightRibbonContentColor !== void 0 ? highlightRibbonContentColor : '',
       $backgroundColor: disabled ? _.COLORS.neutral_300 : highlightRibbonBgColor !== null && highlightRibbonBgColor !== void 0 ? highlightRibbonBgColor : '',

package/dist/Card/CardTopSection.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Card/CardTopSection.tsx"],"names":["Img","styled","img","TagContainer","div","COLORS","correct_500","Container","props","disabled","interactionType","InteractionType","Clickable","RibbonContainer","$backgroundColor","$color","CheckboxContainer","white","CardTopSection","selected","setSelected","image","tagLabel","tagIcon","highlightRibbonIcon","highlightRibbonText","highlightRibbonContentColor","highlightRibbonBgColor","undefined","Selectable","neutral_300","ComponentTextStyle","Regular"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { ComponentS, ComponentTextStyle } from '../styles/typography';\nimport Checkbox, { StyledCheckBox } from '../InputFields/Checkbox';\n\nimport { COLORS, InteractionType } from '..';\n\nexport interface CardTopSectionProps {\n  interactionType: InteractionType;\n  selected: boolean;\n  setSelected: (arg0: boolean) => void;\n  tagLabel?: string;\n  tagIcon?: React.ReactNode;\n  highlightRibbonText?: string;\n  highlightRibbonIcon?: string;\n  highlightRibbonContentColor?: string;\n  highlightRibbonBgColor?: string;\n  image?: string;\n  disabled: boolean;\n}\n\nconst Img = styled.img`\n  object-fit: cover;\n  width: 100%;\n  height: 100%;\n`;\n\nconst TagContainer = styled.div`\n  background-color: ${COLORS.correct_500};\n  color: white;\n  border-radius: 2px;\n  padding: 4px;\n  display: flex;\n  position: absolute;\n  flex-direction: row;\n  align-items: center;\n  top: 16px;\n  left: 16px;\n\n  svg {\n    color: white;\n    margin-right: 4px;\n  }\n`;\n\nconst Container = styled.div<{ interactionType: InteractionType; disabled: boolean }>`\n  position: relative;\n  width: 100%;\n  height: 200px;\n  overflow: hidden;\n  border-top-right-radius: 8px;\n  border-top-left-radius: 8px;\n\n  ${props => props.disabled ? `\n  img, svg {\n    filter: grayscale(100%);\n  }` : ''}\n\n  ${props =>\n    props.interactionType == InteractionType.Clickable\n      ? `\n    cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n  `\n      : ''}\n`;\n\nconst RibbonContainer = styled.div<{ $color: string; $backgroundColor: string }>`\n  height: calc(40px - 16px);\n  background-color: ${props => props.$backgroundColor};\n  width: calc(100% - 32px);\n  position: absolute;\n  bottom: 0px;\n  left: 0px;\n  padding: 8px 16px 8px 16px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    color: ${props => props.$color};\n    margin-right: 9px;\n  }\n`;\n\nconst CheckboxContainer = styled.div`\n  position: absolute;\n  top: 14px;\n  right: 14px;\n\n  .checkbox-icon {\n    background-color: ${COLORS.white};\n  }\n`;\n\nconst CardTopSection: React.FunctionComponent<CardTopSectionProps> = ({\n  interactionType,\n  selected,\n  setSelected,\n  image,\n  tagLabel,\n  tagIcon,\n  highlightRibbonIcon,\n  highlightRibbonText,\n  highlightRibbonContentColor,\n  highlightRibbonBgColor,\n  disabled\n}: CardTopSectionProps) => {\n  return (\n    <Container disabled={disabled} interactionType={interactionType}>\n      <Img src={image} />\n      {(selected !== undefined || setSelected !== undefined) && interactionType == InteractionType.Selectable && (\n        <CheckboxContainer>\n          <Checkbox select={(selected: boolean) => setSelected(selected)} selected={selected} />\n        </CheckboxContainer>\n      )}\n      {(tagLabel || tagIcon) && (\n        <TagContainer>\n          {tagIcon}\n          <div>{tagLabel}</div>\n        </TagContainer>\n      )}\n      {(highlightRibbonIcon || highlightRibbonText) && (\n        <RibbonContainer $color={highlightRibbonContentColor ?? ''} $backgroundColor={disabled ? COLORS.neutral_300 : highlightRibbonBgColor ?? ''}>\n          {highlightRibbonIcon}\n          {highlightRibbonText && (\n            <ComponentS color={highlightRibbonContentColor ?? ''} textStyle={ComponentTextStyle.Regular}>\n              {highlightRibbonText}\n            </ComponentS>\n          )}\n        </RibbonContainer>\n      )}\n    </Container>\n  );\n};\n\nexport default CardTopSection;\n"],"file":"CardTopSection.cjs"}
+{"version":3,"sources":["../../src/Card/CardTopSection.tsx"],"names":["Img","styled","img","TagContainer","div","COLORS","correct_500","Container","props","disabled","interactionType","InteractionType","Clickable","RibbonContainer","$backgroundColor","$color","CheckboxContainer","white","CardTopSection","selected","setSelected","image","tagLabel","tagIcon","tagVariant","highlightRibbonIcon","highlightRibbonText","highlightRibbonContentColor","highlightRibbonBgColor","undefined","Selectable","neutral_300","ComponentTextStyle","Regular"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { ComponentS, ComponentTextStyle } from '../styles/typography';\nimport Checkbox, { StyledCheckBox } from '../InputFields/Checkbox';\nimport { Tag, TagVariants } from '../Tag';\n\nimport { COLORS, InteractionType } from '..';\n\nexport interface CardTopSectionProps {\n  interactionType: InteractionType;\n  selected: boolean;\n  setSelected: (arg0: boolean) => void;\n  tagLabel?: string;\n  tagIcon?: React.ReactNode;\n  tagVariant?: TagVariants;\n  highlightRibbonText?: string;\n  highlightRibbonIcon?: string;\n  highlightRibbonContentColor?: string;\n  highlightRibbonBgColor?: string;\n  image?: string;\n  disabled: boolean;\n}\n\nconst Img = styled.img`\n  object-fit: cover;\n  width: 100%;\n  height: 100%;\n  border-top-right-radius: 8px;\n  border-top-left-radius: 8px;\n`;\n\nconst TagContainer = styled.div`\n  background-color: ${COLORS.correct_500};\n  color: white;\n  position: absolute;\n\n  top: 16px;\n  left: 16px;\n`;\n\nconst Container = styled.div<{ interactionType: InteractionType; disabled: boolean }>`\n  position: relative;\n  width: 100%;\n  height: 200px;\n  overflow: visible;\n\n  ${props => props.disabled ? `\n  img, svg {\n    filter: grayscale(100%);\n  }` : ''}\n\n  ${props =>\n    props.interactionType == InteractionType.Clickable\n      ? `\n    cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n  `\n      : ''}\n`;\n\nconst RibbonContainer = styled.div<{ $color: string; $backgroundColor: string }>`\n  height: calc(40px - 16px);\n  background-color: ${props => props.$backgroundColor};\n  width: calc(100% - 32px);\n  position: absolute;\n  bottom: 0px;\n  left: 0px;\n  padding: 8px 16px 8px 16px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    color: ${props => props.$color};\n    margin-right: 9px;\n    width: 24px;\n    height: 24px;\n  }\n`;\n\nconst CheckboxContainer = styled.div`\n  position: absolute;\n  top: 0px;\n  right: 0px;\n\n  .checkbox-icon {\n    background-color: ${COLORS.white};\n  }\n`;\n\nconst CardTopSection: React.FunctionComponent<CardTopSectionProps> = ({\n  interactionType,\n  selected,\n  setSelected,\n  image,\n  tagLabel,\n  tagIcon,\n  tagVariant = 'positive',\n  highlightRibbonIcon,\n  highlightRibbonText,\n  highlightRibbonContentColor,\n  highlightRibbonBgColor,\n  disabled\n}: CardTopSectionProps) => {\n  return (\n    <Container disabled={disabled} interactionType={interactionType}>\n      <Img src={image} />\n      {(selected !== undefined || setSelected !== undefined) && interactionType == InteractionType.Selectable && (\n        <CheckboxContainer>\n          <Checkbox select={(selected: boolean) => setSelected(selected)} selected={selected} />\n        </CheckboxContainer>\n      )}\n      {(tagLabel || tagIcon) && (\n        <TagContainer>\n          <Tag label={tagLabel} variant={tagVariant} icon={tagIcon} />\n        </TagContainer>\n      )}\n      {(highlightRibbonIcon || highlightRibbonText) && (\n        <RibbonContainer $color={highlightRibbonContentColor ?? ''} $backgroundColor={disabled ? COLORS.neutral_300 : highlightRibbonBgColor ?? ''}>\n          {highlightRibbonIcon}\n          {highlightRibbonText && (\n            <ComponentS color={highlightRibbonContentColor ?? ''} textStyle={ComponentTextStyle.Regular}>\n              {highlightRibbonText}\n            </ComponentS>\n          )}\n        </RibbonContainer>\n      )}\n    </Container>\n  );\n};\n\nexport default CardTopSection;\n"],"file":"CardTopSection.cjs"}

package/dist/Card/CardTopSection.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { TagVariants } from '../Tag';
 import { InteractionType } from '..';
 export interface CardTopSectionProps {
     interactionType: InteractionType;
@@ -6,6 +7,7 @@ export interface CardTopSectionProps {
     setSelected: (arg0: boolean) => void;
     tagLabel?: string;
     tagIcon?: React.ReactNode;
+    tagVariant?: TagVariants;
     highlightRibbonText?: string;
     highlightRibbonIcon?: string;
     highlightRibbonContentColor?: string;

package/dist/Card/CardTopSection.js

@@ -7,22 +7,23 @@ import * as React from 'react';
 import styled from 'styled-components';
 import { ComponentS, ComponentTextStyle } from '../styles/typography';
 import Checkbox from '../InputFields/Checkbox';
+import { Tag } from '../Tag';
 import { COLORS, InteractionType } from '..';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var Img = styled.img(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  object-fit: cover;\n  width: 100%;\n  height: 100%;\n"])));
-var TagContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  color: white;\n  border-radius: 2px;\n  padding: 4px;\n  display: flex;\n  position: absolute;\n  flex-direction: row;\n  align-items: center;\n  top: 16px;\n  left: 16px;\n\n  svg {\n    color: white;\n    margin-right: 4px;\n  }\n"])), COLORS.correct_500);
-var Container = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: relative;\n  width: 100%;\n  height: 200px;\n  overflow: hidden;\n  border-top-right-radius: 8px;\n  border-top-left-radius: 8px;\n\n  ", "\n\n  ", "\n"])), function (props) {
+var Img = styled.img(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  object-fit: cover;\n  width: 100%;\n  height: 100%;\n  border-top-right-radius: 8px;\n  border-top-left-radius: 8px;\n"])));
+var TagContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  color: white;\n  position: absolute;\n\n  top: 16px;\n  left: 16px;\n"])), COLORS.correct_500);
+var Container = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: relative;\n  width: 100%;\n  height: 200px;\n  overflow: visible;\n\n  ", "\n\n  ", "\n"])), function (props) {
   return props.disabled ? "\n  img, svg {\n    filter: grayscale(100%);\n  }" : '';
 }, function (props) {
   return props.interactionType == InteractionType.Clickable ? "\n    cursor: ".concat(props.disabled ? 'not-allowed' : 'pointer', ";\n  ") : '';
 });
-var RibbonContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  height: calc(40px - 16px);\n  background-color: ", ";\n  width: calc(100% - 32px);\n  position: absolute;\n  bottom: 0px;\n  left: 0px;\n  padding: 8px 16px 8px 16px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    color: ", ";\n    margin-right: 9px;\n  }\n"])), function (props) {
+var RibbonContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  height: calc(40px - 16px);\n  background-color: ", ";\n  width: calc(100% - 32px);\n  position: absolute;\n  bottom: 0px;\n  left: 0px;\n  padding: 8px 16px 8px 16px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    color: ", ";\n    margin-right: 9px;\n    width: 24px;\n    height: 24px;\n  }\n"])), function (props) {
   return props.$backgroundColor;
 }, function (props) {
   return props.$color;
 });
-var CheckboxContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 14px;\n  right: 14px;\n\n  .checkbox-icon {\n    background-color: ", ";\n  }\n"])), COLORS.white);
+var CheckboxContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0px;\n  right: 0px;\n\n  .checkbox-icon {\n    background-color: ", ";\n  }\n"])), COLORS.white);
 
 var CardTopSection = function CardTopSection(_ref) {
   var interactionType = _ref.interactionType,
@@ -31,6 +32,8 @@ var CardTopSection = function CardTopSection(_ref) {
       image = _ref.image,
       tagLabel = _ref.tagLabel,
       tagIcon = _ref.tagIcon,
+      _ref$tagVariant = _ref.tagVariant,
+      tagVariant = _ref$tagVariant === void 0 ? 'positive' : _ref$tagVariant,
       highlightRibbonIcon = _ref.highlightRibbonIcon,
       highlightRibbonText = _ref.highlightRibbonText,
       highlightRibbonContentColor = _ref.highlightRibbonContentColor,
@@ -48,10 +51,12 @@ var CardTopSection = function CardTopSection(_ref) {
         },
         selected: selected
       })
-    }), (tagLabel || tagIcon) && /*#__PURE__*/_jsxs(TagContainer, {
-      children: [tagIcon, /*#__PURE__*/_jsx("div", {
-        children: tagLabel
-      })]
+    }), (tagLabel || tagIcon) && /*#__PURE__*/_jsx(TagContainer, {
+      children: /*#__PURE__*/_jsx(Tag, {
+        label: tagLabel,
+        variant: tagVariant,
+        icon: tagIcon
+      })
     }), (highlightRibbonIcon || highlightRibbonText) && /*#__PURE__*/_jsxs(RibbonContainer, {
       $color: highlightRibbonContentColor !== null && highlightRibbonContentColor !== void 0 ? highlightRibbonContentColor : '',
       $backgroundColor: disabled ? COLORS.neutral_300 : highlightRibbonBgColor !== null && highlightRibbonBgColor !== void 0 ? highlightRibbonBgColor : '',

package/dist/Card/CardTopSection.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Card/CardTopSection.tsx"],"names":["React","styled","ComponentS","ComponentTextStyle","Checkbox","COLORS","InteractionType","Img","img","TagContainer","div","correct_500","Container","props","disabled","interactionType","Clickable","RibbonContainer","$backgroundColor","$color","CheckboxContainer","white","CardTopSection","selected","setSelected","image","tagLabel","tagIcon","highlightRibbonIcon","highlightRibbonText","highlightRibbonContentColor","highlightRibbonBgColor","undefined","Selectable","neutral_300","Regular"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { ComponentS, ComponentTextStyle } from '../styles/typography';\nimport Checkbox, { StyledCheckBox } from '../InputFields/Checkbox';\n\nimport { COLORS, InteractionType } from '..';\n\nexport interface CardTopSectionProps {\n  interactionType: InteractionType;\n  selected: boolean;\n  setSelected: (arg0: boolean) => void;\n  tagLabel?: string;\n  tagIcon?: React.ReactNode;\n  highlightRibbonText?: string;\n  highlightRibbonIcon?: string;\n  highlightRibbonContentColor?: string;\n  highlightRibbonBgColor?: string;\n  image?: string;\n  disabled: boolean;\n}\n\nconst Img = styled.img`\n  object-fit: cover;\n  width: 100%;\n  height: 100%;\n`;\n\nconst TagContainer = styled.div`\n  background-color: ${COLORS.correct_500};\n  color: white;\n  border-radius: 2px;\n  padding: 4px;\n  display: flex;\n  position: absolute;\n  flex-direction: row;\n  align-items: center;\n  top: 16px;\n  left: 16px;\n\n  svg {\n    color: white;\n    margin-right: 4px;\n  }\n`;\n\nconst Container = styled.div<{ interactionType: InteractionType; disabled: boolean }>`\n  position: relative;\n  width: 100%;\n  height: 200px;\n  overflow: hidden;\n  border-top-right-radius: 8px;\n  border-top-left-radius: 8px;\n\n  ${props => props.disabled ? `\n  img, svg {\n    filter: grayscale(100%);\n  }` : ''}\n\n  ${props =>\n    props.interactionType == InteractionType.Clickable\n      ? `\n    cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n  `\n      : ''}\n`;\n\nconst RibbonContainer = styled.div<{ $color: string; $backgroundColor: string }>`\n  height: calc(40px - 16px);\n  background-color: ${props => props.$backgroundColor};\n  width: calc(100% - 32px);\n  position: absolute;\n  bottom: 0px;\n  left: 0px;\n  padding: 8px 16px 8px 16px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    color: ${props => props.$color};\n    margin-right: 9px;\n  }\n`;\n\nconst CheckboxContainer = styled.div`\n  position: absolute;\n  top: 14px;\n  right: 14px;\n\n  .checkbox-icon {\n    background-color: ${COLORS.white};\n  }\n`;\n\nconst CardTopSection: React.FunctionComponent<CardTopSectionProps> = ({\n  interactionType,\n  selected,\n  setSelected,\n  image,\n  tagLabel,\n  tagIcon,\n  highlightRibbonIcon,\n  highlightRibbonText,\n  highlightRibbonContentColor,\n  highlightRibbonBgColor,\n  disabled\n}: CardTopSectionProps) => {\n  return (\n    <Container disabled={disabled} interactionType={interactionType}>\n      <Img src={image} />\n      {(selected !== undefined || setSelected !== undefined) && interactionType == InteractionType.Selectable && (\n        <CheckboxContainer>\n          <Checkbox select={(selected: boolean) => setSelected(selected)} selected={selected} />\n        </CheckboxContainer>\n      )}\n      {(tagLabel || tagIcon) && (\n        <TagContainer>\n          {tagIcon}\n          <div>{tagLabel}</div>\n        </TagContainer>\n      )}\n      {(highlightRibbonIcon || highlightRibbonText) && (\n        <RibbonContainer $color={highlightRibbonContentColor ?? ''} $backgroundColor={disabled ? COLORS.neutral_300 : highlightRibbonBgColor ?? ''}>\n          {highlightRibbonIcon}\n          {highlightRibbonText && (\n            <ComponentS color={highlightRibbonContentColor ?? ''} textStyle={ComponentTextStyle.Regular}>\n              {highlightRibbonText}\n            </ComponentS>\n          )}\n        </RibbonContainer>\n      )}\n    </Container>\n  );\n};\n\nexport default CardTopSection;\n"],"file":"CardTopSection.js"}
+{"version":3,"sources":["../../src/Card/CardTopSection.tsx"],"names":["React","styled","ComponentS","ComponentTextStyle","Checkbox","Tag","COLORS","InteractionType","Img","img","TagContainer","div","correct_500","Container","props","disabled","interactionType","Clickable","RibbonContainer","$backgroundColor","$color","CheckboxContainer","white","CardTopSection","selected","setSelected","image","tagLabel","tagIcon","tagVariant","highlightRibbonIcon","highlightRibbonText","highlightRibbonContentColor","highlightRibbonBgColor","undefined","Selectable","neutral_300","Regular"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { ComponentS, ComponentTextStyle } from '../styles/typography';\nimport Checkbox, { StyledCheckBox } from '../InputFields/Checkbox';\nimport { Tag, TagVariants } from '../Tag';\n\nimport { COLORS, InteractionType } from '..';\n\nexport interface CardTopSectionProps {\n  interactionType: InteractionType;\n  selected: boolean;\n  setSelected: (arg0: boolean) => void;\n  tagLabel?: string;\n  tagIcon?: React.ReactNode;\n  tagVariant?: TagVariants;\n  highlightRibbonText?: string;\n  highlightRibbonIcon?: string;\n  highlightRibbonContentColor?: string;\n  highlightRibbonBgColor?: string;\n  image?: string;\n  disabled: boolean;\n}\n\nconst Img = styled.img`\n  object-fit: cover;\n  width: 100%;\n  height: 100%;\n  border-top-right-radius: 8px;\n  border-top-left-radius: 8px;\n`;\n\nconst TagContainer = styled.div`\n  background-color: ${COLORS.correct_500};\n  color: white;\n  position: absolute;\n\n  top: 16px;\n  left: 16px;\n`;\n\nconst Container = styled.div<{ interactionType: InteractionType; disabled: boolean }>`\n  position: relative;\n  width: 100%;\n  height: 200px;\n  overflow: visible;\n\n  ${props => props.disabled ? `\n  img, svg {\n    filter: grayscale(100%);\n  }` : ''}\n\n  ${props =>\n    props.interactionType == InteractionType.Clickable\n      ? `\n    cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n  `\n      : ''}\n`;\n\nconst RibbonContainer = styled.div<{ $color: string; $backgroundColor: string }>`\n  height: calc(40px - 16px);\n  background-color: ${props => props.$backgroundColor};\n  width: calc(100% - 32px);\n  position: absolute;\n  bottom: 0px;\n  left: 0px;\n  padding: 8px 16px 8px 16px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    color: ${props => props.$color};\n    margin-right: 9px;\n    width: 24px;\n    height: 24px;\n  }\n`;\n\nconst CheckboxContainer = styled.div`\n  position: absolute;\n  top: 0px;\n  right: 0px;\n\n  .checkbox-icon {\n    background-color: ${COLORS.white};\n  }\n`;\n\nconst CardTopSection: React.FunctionComponent<CardTopSectionProps> = ({\n  interactionType,\n  selected,\n  setSelected,\n  image,\n  tagLabel,\n  tagIcon,\n  tagVariant = 'positive',\n  highlightRibbonIcon,\n  highlightRibbonText,\n  highlightRibbonContentColor,\n  highlightRibbonBgColor,\n  disabled\n}: CardTopSectionProps) => {\n  return (\n    <Container disabled={disabled} interactionType={interactionType}>\n      <Img src={image} />\n      {(selected !== undefined || setSelected !== undefined) && interactionType == InteractionType.Selectable && (\n        <CheckboxContainer>\n          <Checkbox select={(selected: boolean) => setSelected(selected)} selected={selected} />\n        </CheckboxContainer>\n      )}\n      {(tagLabel || tagIcon) && (\n        <TagContainer>\n          <Tag label={tagLabel} variant={tagVariant} icon={tagIcon} />\n        </TagContainer>\n      )}\n      {(highlightRibbonIcon || highlightRibbonText) && (\n        <RibbonContainer $color={highlightRibbonContentColor ?? ''} $backgroundColor={disabled ? COLORS.neutral_300 : highlightRibbonBgColor ?? ''}>\n          {highlightRibbonIcon}\n          {highlightRibbonText && (\n            <ComponentS color={highlightRibbonContentColor ?? ''} textStyle={ComponentTextStyle.Regular}>\n              {highlightRibbonText}\n            </ComponentS>\n          )}\n        </RibbonContainer>\n      )}\n    </Container>\n  );\n};\n\nexport default CardTopSection;\n"],"file":"CardTopSection.js"}

package/dist/Dropdown/BasicDropdown.cjs

@@ -29,14 +29,15 @@ var _styling = require("../InputFields/styling");
 
 var _types = require("../types");
 
-var _common = require("../common");
-
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+var MAX_MENU_HEIGHT = 240;
+var AVG_OPTION_HEIGHT = 48;
+
 var BasicDropdown = function BasicDropdown(_ref) {
   var id = _ref.id,
       list = _ref.list,
@@ -85,30 +86,48 @@ var BasicDropdown = function BasicDropdown(_ref) {
       input = _React$useState6[0],
       setInput = _React$useState6[1];
 
-  var _React$useState7 = React.useState(null),
+  var _React$useState7 = React.useState(placeholder || ''),
       _React$useState8 = (0, _slicedToArray2.default)(_React$useState7, 2),
-      focused = _React$useState8[0],
-      setFocused = _React$useState8[1];
+      placeholderSearch = _React$useState8[0],
+      setPlaceholderSearch = _React$useState8[1];
 
-  var _React$useState9 = React.useState(initalValue ? [initalValue] : []),
+  var _React$useState9 = React.useState(false),
       _React$useState10 = (0, _slicedToArray2.default)(_React$useState9, 2),
-      selectedValues = _React$useState10[0],
-      setSelectedValues = _React$useState10[1];
+      restartFilter = _React$useState10[0],
+      setRestartFilter = _React$useState10[1];
+
+  var _React$useState11 = React.useState(null),
+      _React$useState12 = (0, _slicedToArray2.default)(_React$useState11, 2),
+      focused = _React$useState12[0],
+      setFocused = _React$useState12[1];
+
+  var _React$useState13 = React.useState(initalValue ? [initalValue] : []),
+      _React$useState14 = (0, _slicedToArray2.default)(_React$useState13, 2),
+      selectedValues = _React$useState14[0],
+      setSelectedValues = _React$useState14[1];
 
+  var styledFieldRef = React.useRef(null);
   var inputRef = React.useRef(null);
-  var styledFieldRef = (0, _common.useFocusVisibleRef)([inputRef]);
+  /*
+  if (!items.includes(input)) {
+    setInput('');
+    setPlaceholderSearch(placeholder || '');
+  } */
 
   var handleKeyPress = function handleKeyPress(e) {
-    if (e.key === 'Enter') {
-      setFocused(0);
-      setIsOpen(!isOpen);
-    } else if (e.key === 'ArrowDown' || e.key === 'Down') {
-      setFocused(0);
-      setIsOpen(!isOpen);
+    if (styledFieldRef !== null && styledFieldRef !== void 0 && styledFieldRef.current && styledFieldRef.current.contains(e.target)) {
+      if (e.keyCode === 13) {
+        setFocused(0);
+        setIsOpen(!isOpen);
+      } else if (e.keyCode === 40) {
+        setFocused(0);
+        setIsOpen(!isOpen);
+      }
     }
   };
 
   var handleValueSelect = function handleValueSelect(values) {
+    setRestartFilter(true);
     setInput(values.join(', '));
     onSelect && onSelect(values); //don't close dropdown on item select if have custom action or multiselect
 
@@ -121,9 +140,16 @@ var BasicDropdown = function BasicDropdown(_ref) {
     if (initalValue || dropdownMenuValues) {
       var initValue = dropdownMenuValues ? dropdownMenuValues.join(',') : initalValue ? initalValue : '';
       setInput(initValue);
+      setRestartFilter(true);
       setSelectedValues([initValue]);
     }
   }, [initalValue, dropdownMenuValues]);
+  React.useEffect(function () {
+    document.addEventListener('keypress', handleKeyPress);
+    return function () {
+      document.removeEventListener('keypress', handleKeyPress);
+    };
+  });
   React.useEffect(function () {
     setIsLoading(false);
   }, [input]);
@@ -156,37 +182,34 @@ var BasicDropdown = function BasicDropdown(_ref) {
         ref: styledFieldRef,
         className: (isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? 'button' : ''),
         onClick: function onClick(e) {
-          if (!locked && !disabled) {
-            e.stopPropagation();
-            setIsOpen(!isOpen);
-
-            if (isOpen) {
-              var _inputRef$current;
+          if (!locked || !disabled) {
+            var _inputRef$current;
 
-              (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.blur();
-            } else {
-              var _inputRef$current2;
-
-              (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
-            }
+            setIsOpen(!isOpen);
+            (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
           }
         },
         tabIndex: disabled || locked ? -1 : 0,
         disabled: disabled || false,
         locked: locked || false,
-        isPlaceholder: !input,
-        placeholder: placeholder,
         showValidationMessage: !!activeValidationMessage,
-        onKeyPress: handleKeyPress,
+        placeholder: placeholderSearch,
+        isPlaceholder: !input,
         minWidth: minWidth,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CommonStyling.InputField, {
           ref: inputRef,
           type: "search",
           readOnly: true,
-          placeholder: placeholder,
+          placeholder: placeholderSearch,
           value: getDisplayItems(),
           className: size ? "".concat(size, " value") : 'value',
-          tabIndex: -1,
+          onClick: function onClick(e) {
+            if (!locked && !disabled) {
+              e.stopPropagation();
+              setIsOpen(!isOpen);
+            }
+          },
+          tabIndex: disabled || locked ? -1 : 0,
           disabled: disabled || false
         }), isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicator.LoadingIndicator, {
           size: _types.Size.Small,

package/dist/Dropdown/BasicDropdown.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Dropdown/BasicDropdown.tsx"],"names":["BasicDropdown","id","list","placeholder","onSelect","setDropdownMenuValues","initalValue","disableSorting","messageOnNoResults","itemsType","action","actionLabel","actionVariant","actionIcon","actionLoading","actionDisabled","pinTopItem","multiSelect","scrollable","maxHeight","disabled","locked","isButton","activeValidationMessage","autofilledMessage","size","margin","dropdownMenuValues","minWidth","React","useState","isOpen","setIsOpen","isLoading","setIsLoading","input","setInput","focused","setFocused","selectedValues","setSelectedValues","inputRef","useRef","styledFieldRef","handleKeyPress","e","key","handleValueSelect","values","join","useEffect","initValue","customSetIsOpen","getDisplayItems","split","map","val","trim","listDisplayLabels","filter","item","includes","value","l","displayLabel","concat","stopPropagation","current","blur","focus","Size","Small","COLORS","neutral_600","onValueUpdate","items","warning_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { COLORS } from '../styles';\nimport { ArrowDropDown, ArrowDropUp, Information, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport {Dropdown, StyledField, InputField} from './CommonStyling';\nimport DropdownContent, { DropdownItem } from './DropdownContent';\nimport { AutofilledMessage, WarningMessage } from '../InputFields/styling';\nimport { Size } from '../types';\nimport {defaultOnMouseDownHandler, useFocusVisibleRef} from '../common';\n\ninterface DropdownFilterProps {\n  id: string;\n  list: DropdownItem[];\n  itemsType?: 'normal' | 'checkbox' | 'radio';\n  action?: () => void;\n  actionLabel?: string;\n  actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined;\n  actionIcon?: React.ReactNode;\n  actionLoading?: boolean;\n  actionDisabled?: boolean;\n  pinTopItem?: boolean;\n  multiSelect?: boolean;\n  scrollable?: boolean;\n  maxHeight?: string;\n  placeholder?: string;\n  onSelect?: (value: string[]) => void;\n  setDropdownMenuValues?: (values: string[]) => void | boolean | undefined;\n  initalValue?: string;\n  disableSorting?: boolean;\n  messageOnNoResults?: string;\n  disabled?: boolean;\n  locked?: boolean;\n  isButton?: boolean;\n  activeValidationMessage?: string;\n  autofilledMessage?: string;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  dropdownMenuValues?: string[];\n  minWidth?: string;\n}\nconst BasicDropdown = ({\n  id,\n  list,\n  placeholder,\n  onSelect,\n  setDropdownMenuValues,\n  initalValue,\n  disableSorting,\n  messageOnNoResults,\n  itemsType = 'normal',\n  action,\n  actionLabel,\n  actionVariant,\n  actionIcon,\n  actionLoading,\n  actionDisabled,\n  pinTopItem,\n  multiSelect,\n  scrollable = true,\n  maxHeight,\n  disabled,\n  locked,\n  isButton,\n  activeValidationMessage,\n  autofilledMessage,\n  size,\n  margin = '4px 0',\n  dropdownMenuValues,\n  minWidth,\n}: DropdownFilterProps) => {\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [isLoading, setIsLoading] = React.useState<boolean>(false);\n  const [input, setInput] = React.useState<string>('');\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>(initalValue ? [initalValue] : []);\n\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const styledFieldRef = useFocusVisibleRef([inputRef]);\n\n\n  const handleKeyPress = (e: React.KeyboardEvent) => {\n    if (e.key === 'Enter') {\n      setFocused(0);\n      setIsOpen(!isOpen);\n    } else if (e.key === 'ArrowDown' || e.key === 'Down') {\n      setFocused(0);\n      setIsOpen(!isOpen);\n    }\n  };\n\n  const handleValueSelect = (values: string[]) => {\n    setInput(values.join(', '));\n    onSelect && onSelect(values);\n    //don't close dropdown on item select if have custom action or multiselect\n    if (actionLabel || multiSelect) return;\n\n    setIsOpen(false);\n    setFocused(null);\n  };\n\n  React.useEffect(() => {\n    if (initalValue || dropdownMenuValues) {\n      const initValue = dropdownMenuValues ? dropdownMenuValues!.join(',') : initalValue ? initalValue : '';\n      setInput(initValue);\n      setSelectedValues([initValue]);\n    }\n  }, [initalValue, dropdownMenuValues]);\n\n  React.useEffect(() => {\n    setIsLoading(false);\n  }, [input]);\n\n  const customSetIsOpen = (isOpen: boolean) => {\n    setIsOpen(isOpen);\n  };\n\n  const getDisplayItems = () => {\n    const values = input.split(',').map((val) => val.trim());\n    const listDisplayLabels = list.filter((item) => values.includes(item.value)).map((l) => l.displayLabel);\n    return listDisplayLabels.join(', ');\n  };\n\n  return (\n    <>\n      <Dropdown isButton={isButton || false} className={size ? size : ''} locked={locked} disabled={disabled} margin={margin} minWidth={minWidth}>\n        <StyledField\n          ref={styledFieldRef}\n          className={(isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? 'button' : '')}\n          onClick={(e) => {\n            if (!locked && !disabled) {\n              e.stopPropagation();\n              setIsOpen(!isOpen);\n              if (isOpen) {\n                inputRef.current?.blur();\n              } else {\n                inputRef.current?.focus();\n              }\n            }\n          }}\n          tabIndex={disabled || locked ? -1 : 0}\n          disabled={disabled || false}\n          locked={locked || false}\n          isPlaceholder={!input}\n          placeholder={placeholder}\n          showValidationMessage={!!activeValidationMessage}\n          onKeyPress={handleKeyPress}\n          minWidth={minWidth}>\n          <InputField\n            ref={inputRef}\n            type=\"search\"\n            readOnly\n            placeholder={placeholder}\n            value={getDisplayItems()}\n            className={size ? `${size} value` : 'value'}\n            tabIndex={-1}\n            disabled={disabled || false}\n          />\n          {isLoading ? <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} /> : null}\n          <div onClick={() => setIsOpen(!isOpen)} className={'icon dropdown-arrow'}>\n            {isOpen ? <ArrowDropUp size=\"24px\" className={size ? size : ''} /> : <ArrowDropDown size=\"24px\" className={size ? size : ''} />}\n          </div>\n        </StyledField>\n        {!locked && !disabled && (\n          <DropdownContent\n            customizationProps={{\n              itemsType: itemsType,\n              action: action ?? (() => {}),\n              actionLabel: actionLabel,\n              actionVariant: actionVariant,\n              actionDisabled: actionDisabled,\n              scrollable: scrollable,\n              onValueUpdate: handleValueSelect,\n              items: list,\n              multiSelect: multiSelect,\n              pinTopItem: pinTopItem,\n              maxHeight: maxHeight,\n              actionIcon: actionIcon,\n              actionLoading: actionLoading,\n            }}\n            focused={focused}\n            setFocused={setFocused}\n            size={size ?? Size.Small}\n            filter={''}\n            hideOnClickOutside={true}\n            isOpen={isOpen}\n            setIsOpen={customSetIsOpen}\n            messageOnNoResults={messageOnNoResults ?? ''}\n            isButton={isButton || false}\n            selectedValues={dropdownMenuValues ?? selectedValues}\n            setSelectedValues={setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues}\n            id={`${id}_dropdowncontent`}\n          />\n        )}\n      </Dropdown>\n      {activeValidationMessage && (\n        <WarningMessage>\n          <TechnicalWarning size=\"20px\" color={COLORS.warning_400} />\n          <span>{activeValidationMessage}</span>\n        </WarningMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage>\n          <Information size=\"20px\" color={COLORS.neutral_600} />\n          <span>{autofilledMessage}</span>\n        </AutofilledMessage>\n      )}\n    </>\n  );\n};\n\nexport default BasicDropdown;\n"],"file":"BasicDropdown.cjs"}
+{"version":3,"sources":["../../src/Dropdown/BasicDropdown.tsx"],"names":["MAX_MENU_HEIGHT","AVG_OPTION_HEIGHT","BasicDropdown","id","list","placeholder","onSelect","setDropdownMenuValues","initalValue","disableSorting","messageOnNoResults","itemsType","action","actionLabel","actionVariant","actionIcon","actionLoading","actionDisabled","pinTopItem","multiSelect","scrollable","maxHeight","disabled","locked","isButton","activeValidationMessage","autofilledMessage","size","margin","dropdownMenuValues","minWidth","React","useState","isOpen","setIsOpen","isLoading","setIsLoading","input","setInput","placeholderSearch","setPlaceholderSearch","restartFilter","setRestartFilter","focused","setFocused","selectedValues","setSelectedValues","styledFieldRef","useRef","inputRef","handleKeyPress","e","current","contains","target","keyCode","handleValueSelect","values","join","useEffect","initValue","document","addEventListener","removeEventListener","customSetIsOpen","getDisplayItems","split","map","val","trim","listDisplayLabels","filter","item","includes","value","l","displayLabel","concat","focus","stopPropagation","Size","Small","COLORS","neutral_600","onValueUpdate","items","warning_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { COLORS } from '../styles';\nimport { ArrowDropDown, ArrowDropUp, Information, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport {Dropdown, StyledField, InputField} from './CommonStyling';\nimport DropdownContent, { DropdownItem } from './DropdownContent';\nimport { AutofilledMessage, WarningMessage } from '../InputFields/styling';\nimport { Size } from '../types';\nimport {defaultOnMouseDownHandler} from '../common';\n\ninterface DropdownFilterProps {\n  id: string;\n  list: DropdownItem[];\n  itemsType?: 'normal' | 'checkbox' | 'radio';\n  action?: () => void;\n  actionLabel?: string;\n  actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined;\n  actionIcon?: React.ReactNode;\n  actionLoading?: boolean;\n  actionDisabled?: boolean;\n  pinTopItem?: boolean;\n  multiSelect?: boolean;\n  scrollable?: boolean;\n  maxHeight?: string;\n  placeholder?: string;\n  onSelect?: (value: string[]) => void;\n  setDropdownMenuValues?: (values: string[]) => void | boolean | undefined;\n  initalValue?: string;\n  disableSorting?: boolean;\n  messageOnNoResults?: string;\n  disabled?: boolean;\n  locked?: boolean;\n  isButton?: boolean;\n  activeValidationMessage?: string;\n  autofilledMessage?: string;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  dropdownMenuValues?: string[];\n  minWidth?: string;\n}\n\nconst MAX_MENU_HEIGHT = 240;\nconst AVG_OPTION_HEIGHT = 48;\n\nconst BasicDropdown = ({\n  id,\n  list,\n  placeholder,\n  onSelect,\n  setDropdownMenuValues,\n  initalValue,\n  disableSorting,\n  messageOnNoResults,\n  itemsType = 'normal',\n  action,\n  actionLabel,\n  actionVariant,\n  actionIcon,\n  actionLoading,\n  actionDisabled,\n  pinTopItem,\n  multiSelect,\n  scrollable = true,\n  maxHeight,\n  disabled,\n  locked,\n  isButton,\n  activeValidationMessage,\n  autofilledMessage,\n  size,\n  margin = '4px 0',\n  dropdownMenuValues,\n  minWidth,\n}: DropdownFilterProps) => {\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [isLoading, setIsLoading] = React.useState<boolean>(false);\n  const [input, setInput] = React.useState<string>('');\n  const [placeholderSearch, setPlaceholderSearch] = React.useState<string>(placeholder || '');\n  const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>(initalValue ? [initalValue] : []);\n\n  const styledFieldRef = React.useRef<HTMLDivElement>(null);\n  const inputRef = React.useRef<HTMLInputElement>(null);\n\n  /*\n  if (!items.includes(input)) {\n    setInput('');\n    setPlaceholderSearch(placeholder || '');\n  } */\n\n  const handleKeyPress = (e: any) => {\n    if (styledFieldRef?.current && styledFieldRef.current.contains(e.target)) {\n      if (e.keyCode === 13) {\n        setFocused(0);\n        setIsOpen(!isOpen);\n      } else if (e.keyCode === 40) {\n        setFocused(0);\n        setIsOpen(!isOpen);\n      }\n    }\n  };\n\n  const handleValueSelect = (values: string[]) => {\n    setRestartFilter(true);\n    setInput(values.join(', '));\n    onSelect && onSelect(values);\n    //don't close dropdown on item select if have custom action or multiselect\n    if (actionLabel || multiSelect) return;\n\n    setIsOpen(false);\n    setFocused(null);\n  };\n\n  React.useEffect(() => {\n    if (initalValue || dropdownMenuValues) {\n      const initValue = dropdownMenuValues ? dropdownMenuValues!.join(',') : initalValue ? initalValue : '';\n      setInput(initValue);\n      setRestartFilter(true);\n      setSelectedValues([initValue]);\n    }\n  }, [initalValue, dropdownMenuValues]);\n\n  React.useEffect(() => {\n    document.addEventListener('keypress', handleKeyPress);\n    return () => {\n      document.removeEventListener('keypress', handleKeyPress);\n    };\n  });\n\n  React.useEffect(() => {\n    setIsLoading(false);\n  }, [input]);\n\n  const customSetIsOpen = (isOpen: boolean) => {\n    setIsOpen(isOpen);\n  };\n\n  const getDisplayItems = () => {\n    const values = input.split(',').map((val) => val.trim());\n    const listDisplayLabels = list.filter((item) => values.includes(item.value)).map((l) => l.displayLabel);\n    return listDisplayLabels.join(', ');\n  };\n\n  return (\n    <>\n      <Dropdown isButton={isButton || false} className={size ? size : ''} locked={locked} disabled={disabled} margin={margin} minWidth={minWidth}>\n        <StyledField\n          ref={styledFieldRef}\n          className={(isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? 'button' : '')}\n          onClick={(e) => {\n            if (!locked || !disabled) {\n              setIsOpen(!isOpen);\n              inputRef.current?.focus();\n            }\n          }}\n          tabIndex={disabled || locked ? -1 : 0}\n          disabled={disabled || false}\n          locked={locked || false}\n          showValidationMessage={!!activeValidationMessage}\n          placeholder={placeholderSearch}\n          isPlaceholder={!input}\n          minWidth={minWidth}>\n          <InputField\n            ref={inputRef}\n            type=\"search\"\n            readOnly\n            placeholder={placeholderSearch}\n            value={getDisplayItems()}\n            className={size ? `${size} value` : 'value'}\n            onClick={(e: any) => {\n              if (!locked && !disabled) {\n                e.stopPropagation();\n                setIsOpen(!isOpen);\n              }\n            }}\n            tabIndex={disabled || locked ? -1 : 0}\n            disabled={disabled || false}\n          />\n          {isLoading ? <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} /> : null}\n          <div onClick={() => setIsOpen(!isOpen)} className={'icon dropdown-arrow'}>\n            {isOpen ? <ArrowDropUp size=\"24px\" className={size ? size : ''} /> : <ArrowDropDown size=\"24px\" className={size ? size : ''} />}\n          </div>\n        </StyledField>\n        {!locked && !disabled && (\n          <DropdownContent\n            customizationProps={{\n              itemsType: itemsType,\n              action: action ?? (() => {}),\n              actionLabel: actionLabel,\n              actionVariant: actionVariant,\n              actionDisabled: actionDisabled,\n              scrollable: scrollable,\n              onValueUpdate: handleValueSelect,\n              items: list,\n              multiSelect: multiSelect,\n              pinTopItem: pinTopItem,\n              maxHeight: maxHeight,\n              actionIcon: actionIcon,\n              actionLoading: actionLoading,\n            }}\n            focused={focused}\n            setFocused={setFocused}\n            size={size ?? Size.Small}\n            filter={''}\n            hideOnClickOutside={true}\n            isOpen={isOpen}\n            setIsOpen={customSetIsOpen}\n            messageOnNoResults={messageOnNoResults ?? ''}\n            isButton={isButton || false}\n            selectedValues={dropdownMenuValues ?? selectedValues}\n            setSelectedValues={setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues}\n            id={`${id}_dropdowncontent`}\n          />\n        )}\n      </Dropdown>\n      {activeValidationMessage && (\n        <WarningMessage>\n          <TechnicalWarning size=\"20px\" color={COLORS.warning_400} />\n          <span>{activeValidationMessage}</span>\n        </WarningMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage>\n          <Information size=\"20px\" color={COLORS.neutral_600} />\n          <span>{autofilledMessage}</span>\n        </AutofilledMessage>\n      )}\n    </>\n  );\n};\n\nexport default BasicDropdown;\n"],"file":"BasicDropdown.cjs"}

package/dist/Dropdown/BasicDropdown.js

@@ -8,10 +8,11 @@ import { Dropdown, StyledField, InputField } from './CommonStyling';
 import DropdownContent from './DropdownContent';
 import { AutofilledMessage, WarningMessage } from '../InputFields/styling';
 import { Size } from '../types';
-import { useFocusVisibleRef } from '../common';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
+var MAX_MENU_HEIGHT = 240;
+var AVG_OPTION_HEIGHT = 48;
 
 var BasicDropdown = function BasicDropdown(_ref) {
   var id = _ref.id,
@@ -61,30 +62,48 @@ var BasicDropdown = function BasicDropdown(_ref) {
       input = _React$useState6[0],
       setInput = _React$useState6[1];
 
-  var _React$useState7 = React.useState(null),
+  var _React$useState7 = React.useState(placeholder || ''),
       _React$useState8 = _slicedToArray(_React$useState7, 2),
-      focused = _React$useState8[0],
-      setFocused = _React$useState8[1];
+      placeholderSearch = _React$useState8[0],
+      setPlaceholderSearch = _React$useState8[1];
 
-  var _React$useState9 = React.useState(initalValue ? [initalValue] : []),
+  var _React$useState9 = React.useState(false),
       _React$useState10 = _slicedToArray(_React$useState9, 2),
-      selectedValues = _React$useState10[0],
-      setSelectedValues = _React$useState10[1];
+      restartFilter = _React$useState10[0],
+      setRestartFilter = _React$useState10[1];
 
+  var _React$useState11 = React.useState(null),
+      _React$useState12 = _slicedToArray(_React$useState11, 2),
+      focused = _React$useState12[0],
+      setFocused = _React$useState12[1];
+
+  var _React$useState13 = React.useState(initalValue ? [initalValue] : []),
+      _React$useState14 = _slicedToArray(_React$useState13, 2),
+      selectedValues = _React$useState14[0],
+      setSelectedValues = _React$useState14[1];
+
+  var styledFieldRef = React.useRef(null);
   var inputRef = React.useRef(null);
-  var styledFieldRef = useFocusVisibleRef([inputRef]);
+  /*
+  if (!items.includes(input)) {
+    setInput('');
+    setPlaceholderSearch(placeholder || '');
+  } */
 
   var handleKeyPress = function handleKeyPress(e) {
-    if (e.key === 'Enter') {
-      setFocused(0);
-      setIsOpen(!isOpen);
-    } else if (e.key === 'ArrowDown' || e.key === 'Down') {
-      setFocused(0);
-      setIsOpen(!isOpen);
+    if (styledFieldRef !== null && styledFieldRef !== void 0 && styledFieldRef.current && styledFieldRef.current.contains(e.target)) {
+      if (e.keyCode === 13) {
+        setFocused(0);
+        setIsOpen(!isOpen);
+      } else if (e.keyCode === 40) {
+        setFocused(0);
+        setIsOpen(!isOpen);
+      }
     }
   };
 
   var handleValueSelect = function handleValueSelect(values) {
+    setRestartFilter(true);
     setInput(values.join(', '));
     onSelect && onSelect(values); //don't close dropdown on item select if have custom action or multiselect
 
@@ -97,9 +116,16 @@ var BasicDropdown = function BasicDropdown(_ref) {
     if (initalValue || dropdownMenuValues) {
       var initValue = dropdownMenuValues ? dropdownMenuValues.join(',') : initalValue ? initalValue : '';
       setInput(initValue);
+      setRestartFilter(true);
       setSelectedValues([initValue]);
     }
   }, [initalValue, dropdownMenuValues]);
+  React.useEffect(function () {
+    document.addEventListener('keypress', handleKeyPress);
+    return function () {
+      document.removeEventListener('keypress', handleKeyPress);
+    };
+  });
   React.useEffect(function () {
     setIsLoading(false);
   }, [input]);
@@ -132,37 +158,34 @@ var BasicDropdown = function BasicDropdown(_ref) {
         ref: styledFieldRef,
         className: (isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? 'button' : ''),
         onClick: function onClick(e) {
-          if (!locked && !disabled) {
-            e.stopPropagation();
-            setIsOpen(!isOpen);
-
-            if (isOpen) {
-              var _inputRef$current;
-
-              (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.blur();
-            } else {
-              var _inputRef$current2;
+          if (!locked || !disabled) {
+            var _inputRef$current;
 
-              (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
-            }
+            setIsOpen(!isOpen);
+            (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
           }
         },
         tabIndex: disabled || locked ? -1 : 0,
         disabled: disabled || false,
         locked: locked || false,
-        isPlaceholder: !input,
-        placeholder: placeholder,
         showValidationMessage: !!activeValidationMessage,
-        onKeyPress: handleKeyPress,
+        placeholder: placeholderSearch,
+        isPlaceholder: !input,
         minWidth: minWidth,
         children: [/*#__PURE__*/_jsx(InputField, {
           ref: inputRef,
           type: "search",
           readOnly: true,
-          placeholder: placeholder,
+          placeholder: placeholderSearch,
           value: getDisplayItems(),
           className: size ? "".concat(size, " value") : 'value',
-          tabIndex: -1,
+          onClick: function onClick(e) {
+            if (!locked && !disabled) {
+              e.stopPropagation();
+              setIsOpen(!isOpen);
+            }
+          },
+          tabIndex: disabled || locked ? -1 : 0,
           disabled: disabled || false
         }), isLoading ? /*#__PURE__*/_jsx(LoadingIndicator, {
           size: Size.Small,