@laerdal/life-react-components 2.0.1-dev.9 → 2.1.0

package/dist/InputFields/RadioButton.js

@@ -3,13 +3,9 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
 var _excluded = ["id", "selected", "label", "additionalLabel", "invalid", "select", "disabled", "margin", "iconPointerEventsTransparent", "size", "tabIndexVal", "className"];
-
 var _templateObject;
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import * as React from 'react';
 import styled from 'styled-components';
 import { RadioButtonOff, RadioButtonOn } from '../icons/systemicons/SystemIcons';
@@ -26,27 +22,24 @@ var StyledRadioButton = styled.div(_templateObject || (_templateObject = _tagged
 }, ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ComponentLStyling(ComponentTextStyle.Regular, COLORS.black), focusStyles, COLORS.primary_20, COLORS.primary_700, COLORS.primary_100, COLORS.primary_800, COLORS.neutral_300, COLORS.white, COLORS.neutral_300, COLORS.primary_20, COLORS.primary_700);
 var RadioButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _size;
-
   var id = _ref.id,
-      selected = _ref.selected,
-      label = _ref.label,
-      additionalLabel = _ref.additionalLabel,
-      invalid = _ref.invalid,
-      select = _ref.select,
-      disabled = _ref.disabled,
-      margin = _ref.margin,
-      iconPointerEventsTransparent = _ref.iconPointerEventsTransparent,
-      size = _ref.size,
-      tabIndexVal = _ref.tabIndexVal,
-      className = _ref.className,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    selected = _ref.selected,
+    label = _ref.label,
+    additionalLabel = _ref.additionalLabel,
+    invalid = _ref.invalid,
+    select = _ref.select,
+    disabled = _ref.disabled,
+    margin = _ref.margin,
+    iconPointerEventsTransparent = _ref.iconPointerEventsTransparent,
+    size = _ref.size,
+    tabIndexVal = _ref.tabIndexVal,
+    className = _ref.className,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var onKeyPress = function onKeyPress(e) {
     if (e.keyCode === 13 && !disabled) {
       select(!selected);
     }
   };
-
   size = (_size = size) !== null && _size !== void 0 ? _size : Size.Medium;
   var cls = "".concat(size, " ").concat(className || '', " ").concat(disabled ? ' disabled' : '');
   return /*#__PURE__*/_jsxs(StyledRadioButton, _objectSpread(_objectSpread({

package/dist/InputFields/RadioButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.js","names":["React","styled","RadioButtonOff","RadioButtonOn","COLORS","ComponentTextStyle","focusStyles","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXXSStyling","defaultOnMouseDownHandler","StyledRadioButton","div","props","margin","black","selected","primary_500","invalid","critical_400","neutral_600","Regular","primary_20","primary_700","primary_100","primary_800","neutral_300","white","RadioButton","forwardRef","ref","id","label","additionalLabel","select","disabled","iconPointerEventsTransparent","size","tabIndexVal","className","rest","onKeyPress","e","keyCode","Medium","cls","undefined"],"sources":["../../src/InputFields/RadioButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {RadioButtonOff, RadioButtonOn} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst StyledRadioButton = styled.div<{ margin?: string, disabled?: boolean, invalid?: boolean, selected?: boolean }>`\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n  cursor: pointer;\n\n  color: ${COLORS.black};\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .radio-button-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ${props => (props.selected ? COLORS.primary_500 : props.invalid ? COLORS.critical_400 : COLORS.neutral_600)};\n    }\n  }\n\n  .radio-button-label {\n    user-select: none;\n    display: flex;\n    flex-direction: column;\n\n    label {\n      cursor: inherit;\n    }\n\n    span {\n      ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):focus {\n    ${focusStyles}\n  }\n\n  &:not(.disabled):hover {\n    .radio-button-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .radio-button-icon {\n      background: ${COLORS.primary_100};\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .radio-button-icon,\n    .radio-button-label {\n      pointer-events: none;\n    }\n\n    .radio-button-icon {\n      background-color: ${COLORS.white};\n    }\n\n    .radio-button-icon svg {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n  &.dropdown-hover:not(.disabled) {\n    .radio-button-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n`;\n\ninterface Props extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'className' | 'onClick' | 'onMouseDown' | 'onKeyDown'>{\n  id?: string;\n  selected: boolean;\n  select: (selected: boolean) => void;\n  label?: string;\n  additionalLabel?: string;\n  invalid?: boolean;\n  disabled?: boolean;\n  iconPointerEventsTransparent?: boolean;\n  margin?: string;\n  size?: Size;\n  tabIndexVal?: number;\n  className?: string;\n}\n\nconst RadioButton = React.forwardRef<HTMLDivElement, Props>(({\n                                                               id,\n                                                               selected,\n                                                               label,\n                                                               additionalLabel,\n                                                               invalid,\n                                                               select,\n                                                               disabled,\n                                                               margin,\n                                                               iconPointerEventsTransparent,\n                                                               size,\n                                                               tabIndexVal,\n                                                               className,\n                                                               ...rest\n                                                             }: Props, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled) {\n      select(!selected);\n    }\n  };\n\n  size = size ?? Size.Medium;\n\n  const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''}`;\n\n  return (\n    <StyledRadioButton key={id}\n                       margin={margin}\n                       ref={ref}\n                       onClick={() => !disabled && select(!selected)}\n                       onMouseDown={defaultOnMouseDownHandler}\n                       onKeyDown={onKeyPress}\n                       disabled={disabled}\n                       className={cls}\n                       tabIndex={disabled ? -1 : (tabIndexVal ? tabIndexVal : 0)}\n                       invalid={invalid}\n                       selected={selected}\n                       {...rest}>\n      <div className={'radio-button-icon'} id={id}>\n        {selected && <RadioButtonOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>}\n        {!selected &&\n          <RadioButtonOff className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>}\n      </div>\n      <div className={'radio-button-label'}>\n        {label && <label htmlFor={id}>{label}</label>}\n        {additionalLabel !== undefined && <span>{additionalLabel}</span>}\n      </div>\n    </StyledRadioButton>\n  );\n});\n\nexport default RadioButton;\n"],"mappings":"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"}
+{"version":3,"file":"RadioButton.js","names":["React","styled","RadioButtonOff","RadioButtonOn","COLORS","ComponentTextStyle","focusStyles","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXXSStyling","defaultOnMouseDownHandler","StyledRadioButton","div","props","margin","black","selected","primary_500","invalid","critical_400","neutral_600","Regular","primary_20","primary_700","primary_100","primary_800","neutral_300","white","RadioButton","forwardRef","ref","id","label","additionalLabel","select","disabled","iconPointerEventsTransparent","size","tabIndexVal","className","rest","onKeyPress","e","keyCode","Medium","cls","undefined"],"sources":["../../src/InputFields/RadioButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {RadioButtonOff, RadioButtonOn} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst StyledRadioButton = styled.div<{ margin?: string, disabled?: boolean, invalid?: boolean, selected?: boolean }>`\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n  cursor: pointer;\n\n  color: ${COLORS.black};\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .radio-button-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ${props => (props.selected ? COLORS.primary_500 : props.invalid ? COLORS.critical_400 : COLORS.neutral_600)};\n    }\n  }\n\n  .radio-button-label {\n    user-select: none;\n    display: flex;\n    flex-direction: column;\n\n    label {\n      cursor: inherit;\n    }\n\n    span {\n      ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):focus {\n    ${focusStyles}\n  }\n\n  &:not(.disabled):hover {\n    .radio-button-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .radio-button-icon {\n      background: ${COLORS.primary_100};\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .radio-button-icon,\n    .radio-button-label {\n      pointer-events: none;\n    }\n\n    .radio-button-icon {\n      background-color: ${COLORS.white};\n    }\n\n    .radio-button-icon svg {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n  &.dropdown-hover:not(.disabled) {\n    .radio-button-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n`;\n\ninterface Props extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'className' | 'onClick' | 'onMouseDown' | 'onKeyDown'>{\n  id?: string;\n  selected: boolean;\n  select: (selected: boolean) => void;\n  label?: string;\n  additionalLabel?: string;\n  invalid?: boolean;\n  disabled?: boolean;\n  iconPointerEventsTransparent?: boolean;\n  margin?: string;\n  size?: Size;\n  tabIndexVal?: number;\n  className?: string;\n}\n\nconst RadioButton = React.forwardRef<HTMLDivElement, Props>(({\n                                                               id,\n                                                               selected,\n                                                               label,\n                                                               additionalLabel,\n                                                               invalid,\n                                                               select,\n                                                               disabled,\n                                                               margin,\n                                                               iconPointerEventsTransparent,\n                                                               size,\n                                                               tabIndexVal,\n                                                               className,\n                                                               ...rest\n                                                             }: Props, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled) {\n      select(!selected);\n    }\n  };\n\n  size = size ?? Size.Medium;\n\n  const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''}`;\n\n  return (\n    <StyledRadioButton key={id}\n                       margin={margin}\n                       ref={ref}\n                       onClick={() => !disabled && select(!selected)}\n                       onMouseDown={defaultOnMouseDownHandler}\n                       onKeyDown={onKeyPress}\n                       disabled={disabled}\n                       className={cls}\n                       tabIndex={disabled ? -1 : (tabIndexVal ? tabIndexVal : 0)}\n                       invalid={invalid}\n                       selected={selected}\n                       {...rest}>\n      <div className={'radio-button-icon'} id={id}>\n        {selected && <RadioButtonOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>}\n        {!selected &&\n          <RadioButtonOff className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>}\n      </div>\n      <div className={'radio-button-label'}>\n        {label && <label htmlFor={id}>{label}</label>}\n        {additionalLabel !== undefined && <span>{additionalLabel}</span>}\n      </div>\n    </StyledRadioButton>\n  );\n});\n\nexport default RadioButton;\n"],"mappings":"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"}

package/dist/InputFields/ResponsiveComponentWrapper.cjs

@@ -1,30 +1,19 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var React = _interopRequireWildcard(require("react"));
-
 var _types = require("../types");
-
 var _styles = require("../styles");
-
 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; }
-
 /**
  * Import React libraries.
  */
@@ -32,22 +21,20 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 /**
  * Import custom styles.
  */
+
 var ReponsiveComponentWrapper = function ReponsiveComponentWrapper(_ref) {
   var children = _ref.children,
-      size = _ref.size;
-
+    size = _ref.size;
   // Globally used variables within the component
   var _React$useState = React.useState(false),
-      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-      isMediumView = _React$useState2[0],
-      setIsMediumView = _React$useState2[1];
-
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    isMediumView = _React$useState2[0],
+    setIsMediumView = _React$useState2[1];
   React.useEffect(function () {
     var handleResize = function handleResize() {
       var mql = window.matchMedia("".concat(_styles.BREAKPOINTS.MEDIUM.replace('@media ', '')));
       setIsMediumView(mql.matches);
     };
-
     window.addEventListener('resize', handleResize);
     return function () {
       return window.removeEventListener('resize', handleResize);
@@ -63,7 +50,6 @@ var ReponsiveComponentWrapper = function ReponsiveComponentWrapper(_ref) {
     children: children
   });
 };
-
 ReponsiveComponentWrapper.propTypes = {
   children: _propTypes.default.any
 };

package/dist/InputFields/ResponsiveComponentWrapper.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ResponsiveComponentWrapper.cjs","names":["ReponsiveComponentWrapper","children","size","React","useState","isMediumView","setIsMediumView","useEffect","handleResize","mql","window","matchMedia","BREAKPOINTS","MEDIUM","replace","matches","addEventListener","removeEventListener","Size","Medium","Small"],"sources":["../../src/InputFields/ResponsiveComponentWrapper.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport { Size } from '../types';\n\n/**\n * Import custom styles.\n */\nimport { BREAKPOINTS, ComponentXXS, ComponentXS } from '../styles';\n\n// Add component-specific types\ntype LabelProps = {\n  size?: Size.Small | Size.Medium;\n  children?: any;\n};\n\nconst ReponsiveComponentWrapper: React.FunctionComponent<LabelProps> = ({ children, size }: LabelProps) => {\n  // Globally used variables within the component\n  const [isMediumView, setIsMediumView] = React.useState<boolean>(false);\n\n  React.useEffect(() => {\n    const handleResize = () => {\n      const mql = window.matchMedia(`${BREAKPOINTS.MEDIUM.replace('@media ', '')}`);\n      setIsMediumView(mql.matches);\n    };\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, []);\n\n  return size && size === Size.Medium ? (\n    <ComponentXS>{children}</ComponentXS>\n  ) : size && size === Size.Small ? (\n    <ComponentXXS>{children}</ComponentXXS>\n  ) : isMediumView ? (\n    <ComponentXS>{children}</ComponentXS>\n  ) : (\n    <ComponentXXS>{children}</ComponentXXS>\n  );\n};\n\nexport default ReponsiveComponentWrapper;\n"],"mappings":";;;;;;;;;;;;;;;AAGA;;AACA;;AAKA;;;;;;;;AATA;AACA;AACA;;AAIA;AACA;AACA;AASA,IAAMA,yBAA8D,GAAG,SAAjEA,yBAAiE,OAAoC;EAAA,IAAjCC,QAAiC,QAAjCA,QAAiC;EAAA,IAAvBC,IAAuB,QAAvBA,IAAuB;;EACzG;EACA,sBAAwCC,KAAK,CAACC,QAAN,CAAwB,KAAxB,CAAxC;EAAA;EAAA,IAAOC,YAAP;EAAA,IAAqBC,eAArB;;EAEAH,KAAK,CAACI,SAAN,CAAgB,YAAM;IACpB,IAAMC,YAAY,GAAG,SAAfA,YAAe,GAAM;MACzB,IAAMC,GAAG,GAAGC,MAAM,CAACC,UAAP,WAAqBC,mBAAA,CAAYC,MAAZ,CAAmBC,OAAnB,CAA2B,SAA3B,EAAsC,EAAtC,CAArB,EAAZ;MACAR,eAAe,CAACG,GAAG,CAACM,OAAL,CAAf;IACD,CAHD;;IAIAL,MAAM,CAACM,gBAAP,CAAwB,QAAxB,EAAkCR,YAAlC;IACA,OAAO;MAAA,OAAME,MAAM,CAACO,mBAAP,CAA2B,QAA3B,EAAqCT,YAArC,CAAN;IAAA,CAAP;EACD,CAPD,EAOG,EAPH;EASA,OAAON,IAAI,IAAIA,IAAI,KAAKgB,WAAA,CAAKC,MAAtB,gBACL,qBAAC,mBAAD;IAAA,UAAclB;EAAd,EADK,GAEHC,IAAI,IAAIA,IAAI,KAAKgB,WAAA,CAAKE,KAAtB,gBACF,qBAAC,oBAAD;IAAA,UAAenB;EAAf,EADE,GAEAI,YAAY,gBACd,qBAAC,mBAAD;IAAA,UAAcJ;EAAd,EADc,gBAGd,qBAAC,oBAAD;IAAA,UAAeA;EAAf,EAPF;AASD,CAtBD;;;EAHEA,Q;;eA2BaD,yB"}
+{"version":3,"file":"ResponsiveComponentWrapper.cjs","names":["ReponsiveComponentWrapper","children","size","React","useState","isMediumView","setIsMediumView","useEffect","handleResize","mql","window","matchMedia","BREAKPOINTS","MEDIUM","replace","matches","addEventListener","removeEventListener","Size","Medium","Small"],"sources":["../../src/InputFields/ResponsiveComponentWrapper.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport { Size } from '../types';\n\n/**\n * Import custom styles.\n */\nimport { BREAKPOINTS, ComponentXXS, ComponentXS } from '../styles';\n\n// Add component-specific types\ntype LabelProps = {\n  size?: Size.Small | Size.Medium;\n  children?: any;\n};\n\nconst ReponsiveComponentWrapper: React.FunctionComponent<LabelProps> = ({ children, size }: LabelProps) => {\n  // Globally used variables within the component\n  const [isMediumView, setIsMediumView] = React.useState<boolean>(false);\n\n  React.useEffect(() => {\n    const handleResize = () => {\n      const mql = window.matchMedia(`${BREAKPOINTS.MEDIUM.replace('@media ', '')}`);\n      setIsMediumView(mql.matches);\n    };\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, []);\n\n  return size && size === Size.Medium ? (\n    <ComponentXS>{children}</ComponentXS>\n  ) : size && size === Size.Small ? (\n    <ComponentXXS>{children}</ComponentXXS>\n  ) : isMediumView ? (\n    <ComponentXS>{children}</ComponentXS>\n  ) : (\n    <ComponentXXS>{children}</ComponentXXS>\n  );\n};\n\nexport default ReponsiveComponentWrapper;\n"],"mappings":";;;;;;;;;;AAGA;AACA;AAKA;AAAmE;AAAA;AAAA;AATnE;AACA;AACA;;AAIA;AACA;AACA;;AASA,IAAMA,yBAA8D,GAAG,SAAjEA,yBAA8D,OAAuC;EAAA,IAAjCC,QAAQ,QAARA,QAAQ;IAAEC,IAAI,QAAJA,IAAI;EACtF;EACA,sBAAwCC,KAAK,CAACC,QAAQ,CAAU,KAAK,CAAC;IAAA;IAA/DC,YAAY;IAAEC,eAAe;EAEpCH,KAAK,CAACI,SAAS,CAAC,YAAM;IACpB,IAAMC,YAAY,GAAG,SAAfA,YAAY,GAAS;MACzB,IAAMC,GAAG,GAAGC,MAAM,CAACC,UAAU,WAAIC,mBAAW,CAACC,MAAM,CAACC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,EAAG;MAC7ER,eAAe,CAACG,GAAG,CAACM,OAAO,CAAC;IAC9B,CAAC;IACDL,MAAM,CAACM,gBAAgB,CAAC,QAAQ,EAAER,YAAY,CAAC;IAC/C,OAAO;MAAA,OAAME,MAAM,CAACO,mBAAmB,CAAC,QAAQ,EAAET,YAAY,CAAC;IAAA;EACjE,CAAC,EAAE,EAAE,CAAC;EAEN,OAAON,IAAI,IAAIA,IAAI,KAAKgB,WAAI,CAACC,MAAM,gBACjC,qBAAC,mBAAW;IAAA,UAAElB;EAAQ,EAAe,GACnCC,IAAI,IAAIA,IAAI,KAAKgB,WAAI,CAACE,KAAK,gBAC7B,qBAAC,oBAAY;IAAA,UAAEnB;EAAQ,EAAgB,GACrCI,YAAY,gBACd,qBAAC,mBAAW;IAAA,UAAEJ;EAAQ,EAAe,gBAErC,qBAAC,oBAAY;IAAA,UAAEA;EAAQ,EACxB;AACH,CAAC;AAAC;EAzBAA,QAAQ;AAAA;AAAA,eA2BKD,yBAAyB;AAAA"}

package/dist/InputFields/ResponsiveComponentWrapper.js

@@ -1,35 +1,31 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _pt from "prop-types";
-
 /**
  * Import React libraries.
  */
 import * as React from 'react';
 import { Size } from '../types';
+
 /**
  * Import custom styles.
  */
+import { BREAKPOINTS, ComponentXXS, ComponentXS } from '../styles';
 
-import { BREAKPOINTS, ComponentXXS, ComponentXS } from '../styles'; // Add component-specific types
-
+// Add component-specific types
 import { jsx as _jsx } from "react/jsx-runtime";
-
 var ReponsiveComponentWrapper = function ReponsiveComponentWrapper(_ref) {
   var children = _ref.children,
-      size = _ref.size;
-
+    size = _ref.size;
   // Globally used variables within the component
   var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      isMediumView = _React$useState2[0],
-      setIsMediumView = _React$useState2[1];
-
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    isMediumView = _React$useState2[0],
+    setIsMediumView = _React$useState2[1];
   React.useEffect(function () {
     var handleResize = function handleResize() {
       var mql = window.matchMedia("".concat(BREAKPOINTS.MEDIUM.replace('@media ', '')));
       setIsMediumView(mql.matches);
     };
-
     window.addEventListener('resize', handleResize);
     return function () {
       return window.removeEventListener('resize', handleResize);
@@ -45,7 +41,6 @@ var ReponsiveComponentWrapper = function ReponsiveComponentWrapper(_ref) {
     children: children
   });
 };
-
 ReponsiveComponentWrapper.propTypes = {
   children: _pt.any
 };

package/dist/InputFields/ResponsiveComponentWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResponsiveComponentWrapper.js","names":["React","Size","BREAKPOINTS","ComponentXXS","ComponentXS","ReponsiveComponentWrapper","children","size","useState","isMediumView","setIsMediumView","useEffect","handleResize","mql","window","matchMedia","MEDIUM","replace","matches","addEventListener","removeEventListener","Medium","Small"],"sources":["../../src/InputFields/ResponsiveComponentWrapper.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport { Size } from '../types';\n\n/**\n * Import custom styles.\n */\nimport { BREAKPOINTS, ComponentXXS, ComponentXS } from '../styles';\n\n// Add component-specific types\ntype LabelProps = {\n  size?: Size.Small | Size.Medium;\n  children?: any;\n};\n\nconst ReponsiveComponentWrapper: React.FunctionComponent<LabelProps> = ({ children, size }: LabelProps) => {\n  // Globally used variables within the component\n  const [isMediumView, setIsMediumView] = React.useState<boolean>(false);\n\n  React.useEffect(() => {\n    const handleResize = () => {\n      const mql = window.matchMedia(`${BREAKPOINTS.MEDIUM.replace('@media ', '')}`);\n      setIsMediumView(mql.matches);\n    };\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, []);\n\n  return size && size === Size.Medium ? (\n    <ComponentXS>{children}</ComponentXS>\n  ) : size && size === Size.Small ? (\n    <ComponentXXS>{children}</ComponentXXS>\n  ) : isMediumView ? (\n    <ComponentXS>{children}</ComponentXS>\n  ) : (\n    <ComponentXXS>{children}</ComponentXXS>\n  );\n};\n\nexport default ReponsiveComponentWrapper;\n"],"mappings":";;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,IAAT,QAAqB,UAArB;AAEA;AACA;AACA;;AACA,SAASC,WAAT,EAAsBC,YAAtB,EAAoCC,WAApC,QAAuD,WAAvD,C,CAEA;;;;AAMA,IAAMC,yBAA8D,GAAG,SAAjEA,yBAAiE,OAAoC;EAAA,IAAjCC,QAAiC,QAAjCA,QAAiC;EAAA,IAAvBC,IAAuB,QAAvBA,IAAuB;;EACzG;EACA,sBAAwCP,KAAK,CAACQ,QAAN,CAAwB,KAAxB,CAAxC;EAAA;EAAA,IAAOC,YAAP;EAAA,IAAqBC,eAArB;;EAEAV,KAAK,CAACW,SAAN,CAAgB,YAAM;IACpB,IAAMC,YAAY,GAAG,SAAfA,YAAe,GAAM;MACzB,IAAMC,GAAG,GAAGC,MAAM,CAACC,UAAP,WAAqBb,WAAW,CAACc,MAAZ,CAAmBC,OAAnB,CAA2B,SAA3B,EAAsC,EAAtC,CAArB,EAAZ;MACAP,eAAe,CAACG,GAAG,CAACK,OAAL,CAAf;IACD,CAHD;;IAIAJ,MAAM,CAACK,gBAAP,CAAwB,QAAxB,EAAkCP,YAAlC;IACA,OAAO;MAAA,OAAME,MAAM,CAACM,mBAAP,CAA2B,QAA3B,EAAqCR,YAArC,CAAN;IAAA,CAAP;EACD,CAPD,EAOG,EAPH;EASA,OAAOL,IAAI,IAAIA,IAAI,KAAKN,IAAI,CAACoB,MAAtB,gBACL,KAAC,WAAD;IAAA,UAAcf;EAAd,EADK,GAEHC,IAAI,IAAIA,IAAI,KAAKN,IAAI,CAACqB,KAAtB,gBACF,KAAC,YAAD;IAAA,UAAehB;EAAf,EADE,GAEAG,YAAY,gBACd,KAAC,WAAD;IAAA,UAAcH;EAAd,EADc,gBAGd,KAAC,YAAD;IAAA,UAAeA;EAAf,EAPF;AASD,CAtBD;;;EAHEA,Q;;AA2BF,eAAeD,yBAAf"}
+{"version":3,"file":"ResponsiveComponentWrapper.js","names":["React","Size","BREAKPOINTS","ComponentXXS","ComponentXS","ReponsiveComponentWrapper","children","size","useState","isMediumView","setIsMediumView","useEffect","handleResize","mql","window","matchMedia","MEDIUM","replace","matches","addEventListener","removeEventListener","Medium","Small"],"sources":["../../src/InputFields/ResponsiveComponentWrapper.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport { Size } from '../types';\n\n/**\n * Import custom styles.\n */\nimport { BREAKPOINTS, ComponentXXS, ComponentXS } from '../styles';\n\n// Add component-specific types\ntype LabelProps = {\n  size?: Size.Small | Size.Medium;\n  children?: any;\n};\n\nconst ReponsiveComponentWrapper: React.FunctionComponent<LabelProps> = ({ children, size }: LabelProps) => {\n  // Globally used variables within the component\n  const [isMediumView, setIsMediumView] = React.useState<boolean>(false);\n\n  React.useEffect(() => {\n    const handleResize = () => {\n      const mql = window.matchMedia(`${BREAKPOINTS.MEDIUM.replace('@media ', '')}`);\n      setIsMediumView(mql.matches);\n    };\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, []);\n\n  return size && size === Size.Medium ? (\n    <ComponentXS>{children}</ComponentXS>\n  ) : size && size === Size.Small ? (\n    <ComponentXXS>{children}</ComponentXXS>\n  ) : isMediumView ? (\n    <ComponentXS>{children}</ComponentXS>\n  ) : (\n    <ComponentXXS>{children}</ComponentXXS>\n  );\n};\n\nexport default ReponsiveComponentWrapper;\n"],"mappings":";;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,IAAI,QAAQ,UAAU;;AAE/B;AACA;AACA;AACA,SAASC,WAAW,EAAEC,YAAY,EAAEC,WAAW,QAAQ,WAAW;;AAElE;AAAA;AAMA,IAAMC,yBAA8D,GAAG,SAAjEA,yBAA8D,OAAuC;EAAA,IAAjCC,QAAQ,QAARA,QAAQ;IAAEC,IAAI,QAAJA,IAAI;EACtF;EACA,sBAAwCP,KAAK,CAACQ,QAAQ,CAAU,KAAK,CAAC;IAAA;IAA/DC,YAAY;IAAEC,eAAe;EAEpCV,KAAK,CAACW,SAAS,CAAC,YAAM;IACpB,IAAMC,YAAY,GAAG,SAAfA,YAAY,GAAS;MACzB,IAAMC,GAAG,GAAGC,MAAM,CAACC,UAAU,WAAIb,WAAW,CAACc,MAAM,CAACC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,EAAG;MAC7EP,eAAe,CAACG,GAAG,CAACK,OAAO,CAAC;IAC9B,CAAC;IACDJ,MAAM,CAACK,gBAAgB,CAAC,QAAQ,EAAEP,YAAY,CAAC;IAC/C,OAAO;MAAA,OAAME,MAAM,CAACM,mBAAmB,CAAC,QAAQ,EAAER,YAAY,CAAC;IAAA;EACjE,CAAC,EAAE,EAAE,CAAC;EAEN,OAAOL,IAAI,IAAIA,IAAI,KAAKN,IAAI,CAACoB,MAAM,gBACjC,KAAC,WAAW;IAAA,UAAEf;EAAQ,EAAe,GACnCC,IAAI,IAAIA,IAAI,KAAKN,IAAI,CAACqB,KAAK,gBAC7B,KAAC,YAAY;IAAA,UAAEhB;EAAQ,EAAgB,GACrCG,YAAY,gBACd,KAAC,WAAW;IAAA,UAAEH;EAAQ,EAAe,gBAErC,KAAC,YAAY;IAAA,UAAEA;EAAQ,EACxB;AACH,CAAC;AAAC;EAzBAA,QAAQ;AAAA;AA2BV,eAAeD,yBAAyB"}

package/dist/InputFields/SearchBar.cjs

@@ -1,100 +1,74 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _index = require("../styles/index");
-
 var _SystemIcons = require("../icons/systemicons/SystemIcons");
-
 var _styling = require("./styling");
-
 var _Button = require("../Button");
-
 var _SearchBarInput = _interopRequireDefault(require("./components/SearchBarInput"));
-
 var _SearchField = _interopRequireDefault(require("./components/SearchField"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _Dropdown = require("../Dropdown");
-
 var _common = require("../common");
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 var _templateObject;
-
 var ClearIconWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n\n  &.hidden {\n    display: none !important;\n  }\n"])));
-
 var SearchBar = function SearchBar(_ref) {
   var id = _ref.id,
-      searchTerm = _ref.searchTerm,
-      _setSearchTerm = _ref.setSearchTerm,
-      enterSearch = _ref.enterSearch,
-      removeSearch = _ref.removeSearch,
-      placeholder = _ref.placeholder,
-      performSearchLabel = _ref.performSearchLabel,
-      disabled = _ref.disabled,
-      validationMessage = _ref.validationMessage,
-      onKeyDown = _ref.onKeyDown,
-      size = _ref.size,
-      _ref$margin = _ref.margin,
-      margin = _ref$margin === void 0 ? '4px 0' : _ref$margin,
-      showDropdown = _ref.showDropdown,
-      dropdownButtonIcon = _ref.dropdownButtonIcon,
-      dropdownButtonLabel = _ref.dropdownButtonLabel,
-      dropdownButtonVariant = _ref.dropdownButtonVariant,
-      dropdownButtonAction = _ref.dropdownButtonAction,
-      _ref$searchList = _ref.searchList,
-      searchList = _ref$searchList === void 0 ? [] : _ref$searchList,
-      addToSearchList = _ref.addToSearchList,
-      dropdownScrollable = _ref.dropdownScrollable;
-
+    searchTerm = _ref.searchTerm,
+    _setSearchTerm = _ref.setSearchTerm,
+    enterSearch = _ref.enterSearch,
+    removeSearch = _ref.removeSearch,
+    placeholder = _ref.placeholder,
+    performSearchLabel = _ref.performSearchLabel,
+    disabled = _ref.disabled,
+    validationMessage = _ref.validationMessage,
+    onKeyDown = _ref.onKeyDown,
+    size = _ref.size,
+    _ref$margin = _ref.margin,
+    margin = _ref$margin === void 0 ? '4px 0' : _ref$margin,
+    showDropdown = _ref.showDropdown,
+    dropdownButtonIcon = _ref.dropdownButtonIcon,
+    dropdownButtonLabel = _ref.dropdownButtonLabel,
+    dropdownButtonVariant = _ref.dropdownButtonVariant,
+    dropdownButtonAction = _ref.dropdownButtonAction,
+    _ref$searchList = _ref.searchList,
+    searchList = _ref$searchList === void 0 ? [] : _ref$searchList,
+    addToSearchList = _ref.addToSearchList,
+    dropdownScrollable = _ref.dropdownScrollable;
   var containerRef = _react.default.useRef(null);
-
   var _React$useState = _react.default.useState(false),
-      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-      isOpen = _React$useState2[0],
-      setIsOpen = _React$useState2[1];
-
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    isOpen = _React$useState2[0],
+    setIsOpen = _React$useState2[1];
   var dropdownRef = (0, _common.useClickOutsideRef)(function () {
     return setIsOpen(false);
   }, [containerRef]);
-
   var isPressingEnter = function isPressingEnter(e) {
     if (e.key === 'Enter') {
       e.preventDefault();
       e.stopPropagation();
       return true;
     }
-
     return false;
   };
-
   var enteredSearchTerm = function enteredSearchTerm(e) {
     addToSearchList && addToSearchList({
       value: e.target.value
     });
     enterSearch(e);
   };
-
   var dropdownAction = function dropdownAction() {
     if (dropdownButtonAction) dropdownButtonAction();
   };
-
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styling.InputWrapper, {
       disabled: disabled,
@@ -192,7 +166,6 @@ var SearchBar = function SearchBar(_ref) {
     })]
   });
 };
-
 SearchBar.propTypes = {
   id: _propTypes.default.string.isRequired,
   searchTerm: _propTypes.default.string,

package/dist/InputFields/SearchBar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.cjs","names":["ClearIconWrapper","styled","div","SearchBar","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","validationMessage","onKeyDown","size","margin","showDropdown","dropdownButtonIcon","dropdownButtonLabel","dropdownButtonVariant","dropdownButtonAction","searchList","addToSearchList","dropdownScrollable","containerRef","React","useRef","useState","isOpen","setIsOpen","dropdownRef","useClickOutsideRef","isPressingEnter","e","key","preventDefault","stopPropagation","enteredSearchTerm","value","target","dropdownAction","term","concat","items","action","actionLabel","actionIcon","actionVariant","onValueUpdate","scrollable","pinTopItem","COLORS","critical_400"],"sources":["../../src/InputFields/SearchBar.tsx"],"sourcesContent":["import React from 'react';\nimport {COLORS} from '../styles/index';\nimport {Search as SearchIcon, Clear as ClearIcon, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {ErrorMessage, InputWrapper, SearchIconWrapper} from './styling';\nimport {IconButton} from '../Button';\nimport SearchBarInput from './components/SearchBarInput';\nimport SearchField from './components/SearchField';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport { DropdownContent, DropdownItem } from '../Dropdown';\nimport { useClickOutsideRef } from '../common';\n\ntype SeachBarProps = {\n  id: string;\n  searchTerm?: string;\n  setSearchTerm: (term: string) => void;\n  enterSearch: (e: any) => void;\n  removeSearch: (e: any) => void;\n  placeholder?: string;\n  performSearchLabel?: string;\n  disabled?: boolean;\n  validationMessage?: string;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  showDropdown?: boolean;\n  dropdownButtonIcon?: React.ReactNode;\n  dropdownButtonLabel?: string;\n  dropdownButtonVariant?: 'primary' | 'secondary' | 'tertiary';\n  dropdownButtonAction?: () => boolean | void | undefined;\n  searchList?: DropdownItem[];\n  addToSearchList?: (e: DropdownItem) => void;\n  dropdownScrollable?: boolean;\n};\n\nconst ClearIconWrapper = styled.div`\n  display: flex;\n  align-items: center;\n\n  &.hidden {\n    display: none !important;\n  }\n`;\n\nconst SearchBar: React.FunctionComponent<SeachBarProps> = ({\n                                                             id,\n                                                             searchTerm,\n                                                             setSearchTerm,\n                                                             enterSearch,\n                                                             removeSearch,\n                                                             placeholder,\n                                                             performSearchLabel,\n                                                             disabled,\n                                                             validationMessage,\n                                                             onKeyDown,\n                                                             size,\n                                                             margin = '4px 0',\n                                                             showDropdown,\n                                                             dropdownButtonIcon,\n                                                             dropdownButtonLabel,\n                                                             dropdownButtonVariant,\n                                                             dropdownButtonAction,\n                                                             searchList=[],\n                                                             addToSearchList,\n                                                             dropdownScrollable\n                                                           }) => {\n  const containerRef = React.useRef<any>(null);\n\n  const [isOpen, setIsOpen] = React.useState(false);\n  const dropdownRef = useClickOutsideRef(()=>setIsOpen(false), [containerRef]);\n\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n\n  const enteredSearchTerm = (e: any) => {\n    addToSearchList && addToSearchList({value:e.target.value});\n    enterSearch(e);\n  }\n\n  const dropdownAction = () => {\n    if(dropdownButtonAction)\n      dropdownButtonAction();    \n  }\n\n  return (\n    <>\n      <InputWrapper\n        disabled={disabled}\n        margin={margin}>\n        <SearchField id={'id'} size={size}\n                     ref={containerRef}\n                     searchTerm={searchTerm}\n                     disabled={disabled}\n                     validationMessage={validationMessage}>\n          <SearchBarInput\n            placeholder={disabled ? '' : placeholder}\n            id={id}\n            size={size}\n            disabled={disabled}\n            setSearchTerm={(term: string) => setSearchTerm(term)}\n            searchTerm={searchTerm}\n            onKeyDown={onKeyDown}\n            enterSearch={enteredSearchTerm}\n            focusParentRefs={[containerRef]}\n            onClick={()=>setIsOpen(!isOpen)}\n            ref={dropdownRef}\n          />\n          <SearchIconWrapper className={size ? size : ''} aria-label={performSearchLabel}>\n            <IconButton id={`${id}_Search`}\n                        variant=\"secondary\"\n                        shape=\"circular\"\n                        action={enterSearch}\n                        disabled={disabled}\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}>\n              <SearchIcon size=\"24px\"/>\n            </IconButton>\n          </SearchIconWrapper>\n          <ClearIconWrapper className={(size ? size : '').concat(!searchTerm ? ' hidden' : '')}>\n            <IconButton id={`${id}_Clear`}\n                        variant=\"secondary\"\n                        shape=\"circular\"\n                        action={removeSearch}\n                        disabled={disabled}\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? removeSearch(e) : null)}>\n              <ClearIcon size=\"24px\"/>\n            </IconButton>\n          </ClearIconWrapper>\n        </SearchField>\n\n      {showDropdown && <DropdownContent id={'search'}\n                                        containerRef={containerRef}\n          size={size}\n          isButton={false}\n          ariaRolesType=\"input\"\n          customizationProps={{\n            items:searchList,\n            action: dropdownAction,\n            actionLabel: dropdownButtonLabel,\n            actionIcon: dropdownButtonIcon,\n            actionVariant: dropdownButtonVariant,\n            onValueUpdate:(e)=>{},\n            scrollable: dropdownScrollable,\n            pinTopItem: true\n          }}\n          isOpen={isOpen}\n          setIsOpen={setIsOpen}\n          filter={''}\n          selectedValues={searchTerm ? [searchTerm] : []}\n          setSelectedValues={(e)=>setSearchTerm(e[0])}\n          messageOnNoResults={''}\n          focused={null}\n          setFocused={()=>{}}\n        />}\n\n      </InputWrapper>\n      {validationMessage && (\n        <ErrorMessage className={size || ''}>\n          <TechnicalWarning color={COLORS.critical_400} className={size || ''}/>\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n};\n\nexport default SearchBar;\n"],"mappings":"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"}
+{"version":3,"file":"SearchBar.cjs","names":["ClearIconWrapper","styled","div","SearchBar","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","validationMessage","onKeyDown","size","margin","showDropdown","dropdownButtonIcon","dropdownButtonLabel","dropdownButtonVariant","dropdownButtonAction","searchList","addToSearchList","dropdownScrollable","containerRef","React","useRef","useState","isOpen","setIsOpen","dropdownRef","useClickOutsideRef","isPressingEnter","e","key","preventDefault","stopPropagation","enteredSearchTerm","value","target","dropdownAction","term","concat","items","action","actionLabel","actionIcon","actionVariant","onValueUpdate","scrollable","pinTopItem","COLORS","critical_400"],"sources":["../../src/InputFields/SearchBar.tsx"],"sourcesContent":["import React from 'react';\nimport {COLORS} from '../styles/index';\nimport {Search as SearchIcon, Clear as ClearIcon, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {ErrorMessage, InputWrapper, SearchIconWrapper} from './styling';\nimport {IconButton} from '../Button';\nimport SearchBarInput from './components/SearchBarInput';\nimport SearchField from './components/SearchField';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport { DropdownContent, DropdownItem } from '../Dropdown';\nimport { useClickOutsideRef } from '../common';\n\ntype SeachBarProps = {\n  id: string;\n  searchTerm?: string;\n  setSearchTerm: (term: string) => void;\n  enterSearch: (e: any) => void;\n  removeSearch: (e: any) => void;\n  placeholder?: string;\n  performSearchLabel?: string;\n  disabled?: boolean;\n  validationMessage?: string;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  showDropdown?: boolean;\n  dropdownButtonIcon?: React.ReactNode;\n  dropdownButtonLabel?: string;\n  dropdownButtonVariant?: 'primary' | 'secondary' | 'tertiary';\n  dropdownButtonAction?: () => boolean | void | undefined;\n  searchList?: DropdownItem[];\n  addToSearchList?: (e: DropdownItem) => void;\n  dropdownScrollable?: boolean;\n};\n\nconst ClearIconWrapper = styled.div`\n  display: flex;\n  align-items: center;\n\n  &.hidden {\n    display: none !important;\n  }\n`;\n\nconst SearchBar: React.FunctionComponent<SeachBarProps> = ({\n                                                             id,\n                                                             searchTerm,\n                                                             setSearchTerm,\n                                                             enterSearch,\n                                                             removeSearch,\n                                                             placeholder,\n                                                             performSearchLabel,\n                                                             disabled,\n                                                             validationMessage,\n                                                             onKeyDown,\n                                                             size,\n                                                             margin = '4px 0',\n                                                             showDropdown,\n                                                             dropdownButtonIcon,\n                                                             dropdownButtonLabel,\n                                                             dropdownButtonVariant,\n                                                             dropdownButtonAction,\n                                                             searchList=[],\n                                                             addToSearchList,\n                                                             dropdownScrollable\n                                                           }) => {\n  const containerRef = React.useRef<any>(null);\n\n  const [isOpen, setIsOpen] = React.useState(false);\n  const dropdownRef = useClickOutsideRef(()=>setIsOpen(false), [containerRef]);\n\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n\n  const enteredSearchTerm = (e: any) => {\n    addToSearchList && addToSearchList({value:e.target.value});\n    enterSearch(e);\n  }\n\n  const dropdownAction = () => {\n    if(dropdownButtonAction)\n      dropdownButtonAction();    \n  }\n\n  return (\n    <>\n      <InputWrapper\n        disabled={disabled}\n        margin={margin}>\n        <SearchField id={'id'} size={size}\n                     ref={containerRef}\n                     searchTerm={searchTerm}\n                     disabled={disabled}\n                     validationMessage={validationMessage}>\n          <SearchBarInput\n            placeholder={disabled ? '' : placeholder}\n            id={id}\n            size={size}\n            disabled={disabled}\n            setSearchTerm={(term: string) => setSearchTerm(term)}\n            searchTerm={searchTerm}\n            onKeyDown={onKeyDown}\n            enterSearch={enteredSearchTerm}\n            focusParentRefs={[containerRef]}\n            onClick={()=>setIsOpen(!isOpen)}\n            ref={dropdownRef}\n          />\n          <SearchIconWrapper className={size ? size : ''} aria-label={performSearchLabel}>\n            <IconButton id={`${id}_Search`}\n                        variant=\"secondary\"\n                        shape=\"circular\"\n                        action={enterSearch}\n                        disabled={disabled}\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}>\n              <SearchIcon size=\"24px\"/>\n            </IconButton>\n          </SearchIconWrapper>\n          <ClearIconWrapper className={(size ? size : '').concat(!searchTerm ? ' hidden' : '')}>\n            <IconButton id={`${id}_Clear`}\n                        variant=\"secondary\"\n                        shape=\"circular\"\n                        action={removeSearch}\n                        disabled={disabled}\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? removeSearch(e) : null)}>\n              <ClearIcon size=\"24px\"/>\n            </IconButton>\n          </ClearIconWrapper>\n        </SearchField>\n\n      {showDropdown && <DropdownContent id={'search'}\n                                        containerRef={containerRef}\n          size={size}\n          isButton={false}\n          ariaRolesType=\"input\"\n          customizationProps={{\n            items:searchList,\n            action: dropdownAction,\n            actionLabel: dropdownButtonLabel,\n            actionIcon: dropdownButtonIcon,\n            actionVariant: dropdownButtonVariant,\n            onValueUpdate:(e)=>{},\n            scrollable: dropdownScrollable,\n            pinTopItem: true\n          }}\n          isOpen={isOpen}\n          setIsOpen={setIsOpen}\n          filter={''}\n          selectedValues={searchTerm ? [searchTerm] : []}\n          setSelectedValues={(e)=>setSearchTerm(e[0])}\n          messageOnNoResults={''}\n          focused={null}\n          setFocused={()=>{}}\n        />}\n\n      </InputWrapper>\n      {validationMessage && (\n        <ErrorMessage className={size || ''}>\n          <TechnicalWarning color={COLORS.critical_400} className={size || ''}/>\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n};\n\nexport default SearchBar;\n"],"mappings":"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"}

package/dist/InputFields/SearchBar.js

@@ -1,9 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
-
 var _templateObject;
-
 import React from 'react';
 import { COLORS } from '../styles/index';
 import { Search as SearchIcon, Clear as ClearIcon, TechnicalWarning } from '../icons/systemicons/SystemIcons';
@@ -18,62 +16,54 @@ 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 ClearIconWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  &.hidden {\n    display: none !important;\n  }\n"])));
-
 var SearchBar = function SearchBar(_ref) {
   var id = _ref.id,
-      searchTerm = _ref.searchTerm,
-      _setSearchTerm = _ref.setSearchTerm,
-      enterSearch = _ref.enterSearch,
-      removeSearch = _ref.removeSearch,
-      placeholder = _ref.placeholder,
-      performSearchLabel = _ref.performSearchLabel,
-      disabled = _ref.disabled,
-      validationMessage = _ref.validationMessage,
-      onKeyDown = _ref.onKeyDown,
-      size = _ref.size,
-      _ref$margin = _ref.margin,
-      margin = _ref$margin === void 0 ? '4px 0' : _ref$margin,
-      showDropdown = _ref.showDropdown,
-      dropdownButtonIcon = _ref.dropdownButtonIcon,
-      dropdownButtonLabel = _ref.dropdownButtonLabel,
-      dropdownButtonVariant = _ref.dropdownButtonVariant,
-      dropdownButtonAction = _ref.dropdownButtonAction,
-      _ref$searchList = _ref.searchList,
-      searchList = _ref$searchList === void 0 ? [] : _ref$searchList,
-      addToSearchList = _ref.addToSearchList,
-      dropdownScrollable = _ref.dropdownScrollable;
+    searchTerm = _ref.searchTerm,
+    _setSearchTerm = _ref.setSearchTerm,
+    enterSearch = _ref.enterSearch,
+    removeSearch = _ref.removeSearch,
+    placeholder = _ref.placeholder,
+    performSearchLabel = _ref.performSearchLabel,
+    disabled = _ref.disabled,
+    validationMessage = _ref.validationMessage,
+    onKeyDown = _ref.onKeyDown,
+    size = _ref.size,
+    _ref$margin = _ref.margin,
+    margin = _ref$margin === void 0 ? '4px 0' : _ref$margin,
+    showDropdown = _ref.showDropdown,
+    dropdownButtonIcon = _ref.dropdownButtonIcon,
+    dropdownButtonLabel = _ref.dropdownButtonLabel,
+    dropdownButtonVariant = _ref.dropdownButtonVariant,
+    dropdownButtonAction = _ref.dropdownButtonAction,
+    _ref$searchList = _ref.searchList,
+    searchList = _ref$searchList === void 0 ? [] : _ref$searchList,
+    addToSearchList = _ref.addToSearchList,
+    dropdownScrollable = _ref.dropdownScrollable;
   var containerRef = React.useRef(null);
-
   var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      isOpen = _React$useState2[0],
-      setIsOpen = _React$useState2[1];
-
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    isOpen = _React$useState2[0],
+    setIsOpen = _React$useState2[1];
   var dropdownRef = useClickOutsideRef(function () {
     return setIsOpen(false);
   }, [containerRef]);
-
   var isPressingEnter = function isPressingEnter(e) {
     if (e.key === 'Enter') {
       e.preventDefault();
       e.stopPropagation();
       return true;
     }
-
     return false;
   };
-
   var enteredSearchTerm = function enteredSearchTerm(e) {
     addToSearchList && addToSearchList({
       value: e.target.value
     });
     enterSearch(e);
   };
-
   var dropdownAction = function dropdownAction() {
     if (dropdownButtonAction) dropdownButtonAction();
   };
-
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs(InputWrapper, {
       disabled: disabled,
@@ -171,7 +161,6 @@ var SearchBar = function SearchBar(_ref) {
     })]
   });
 };
-
 SearchBar.propTypes = {
   id: _pt.string.isRequired,
   searchTerm: _pt.string,