@laerdal/life-react-components 1.10.1-dev.5.full → 1.10.3-dev.11

package/dist/InputFields/PasswordField.js

@@ -1,9 +1,16 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
+var _excluded = ["id", "disabled", "onChange", "invalid", "value", "validationMessage", "autoComplete", "placeholder", "required", "readOnly", "size", "margin", "className", "name"];
 
 var _templateObject, _templateObject2;
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { 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 { COLORS } from '../styles';
@@ -18,8 +25,7 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 var StyledPassSwitch = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  z-index: ", ";\n  right: 0;\n  position: absolute;\n"])), Z_INDEXES.badge);
 var PasswordRow = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n"])));
-
-var PasswordField = function PasswordField(_ref) {
+var PasswordField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var id = _ref.id,
       disabled = _ref.disabled,
       _onChange = _ref.onChange,
@@ -31,7 +37,11 @@ var PasswordField = function PasswordField(_ref) {
       required = _ref.required,
       readOnly = _ref.readOnly,
       size = _ref.size,
-      margin = _ref.margin;
+      margin = _ref.margin,
+      className = _ref.className,
+      _ref$name = _ref.name,
+      name = _ref$name === void 0 ? 'password' : _ref$name,
+      rest = _objectWithoutProperties(_ref, _excluded);
 
   var _React$useState = React.useState(true),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -39,6 +49,9 @@ var PasswordField = function PasswordField(_ref) {
       setPasswordHidden = _React$useState2[1];
 
   var inputRef = useFocusVisibleRef();
+  React.useImperativeHandle(ref, function () {
+    return inputRef.current;
+  }, [inputRef]);
 
   var handleKeyDown = function handleKeyDown(e) {
     if (e.keyCode === 13) {
@@ -46,6 +59,7 @@ var PasswordField = function PasswordField(_ref) {
     }
   };
 
+  var cls = "".concat(invalid ? 'invalid' : '', "  ").concat(size || '', " ").concat(className);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(InputWrapper, {
       disabled: disabled,
@@ -57,13 +71,13 @@ var PasswordField = function PasswordField(_ref) {
           margin: '4px 0px'
         },
         children: /*#__PURE__*/_jsxs(PasswordRow, {
-          children: [/*#__PURE__*/_jsx(InputFieldStyling, {
+          children: [/*#__PURE__*/_jsx(InputFieldStyling, _objectSpread({
             id: id,
             ref: inputRef,
             type: passwordHidden ? 'password' : 'text',
-            name: "password",
+            name: name,
             value: value,
-            className: (invalid ? 'invalid ' : '').concat(size ? size : ''),
+            className: cls,
             tabIndex: disabled || readOnly ? -1 : 0,
             autoComplete: autoComplete,
             activeErrorMessage: !!validationMessage,
@@ -76,7 +90,7 @@ var PasswordField = function PasswordField(_ref) {
 
               return _onChange && _onChange((e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value) || '');
             }
-          }), /*#__PURE__*/_jsx(StyledPassSwitch, {
+          }, rest)), /*#__PURE__*/_jsx(StyledPassSwitch, {
             className: size ? size : '',
             children: !disabled && !readOnly ? passwordHidden ? /*#__PURE__*/_jsx(IconButton, {
               id: "".concat(id, "_Visible"),
@@ -111,8 +125,7 @@ var PasswordField = function PasswordField(_ref) {
       })]
     })]
   });
-};
-
+});
 PasswordField.propTypes = {
   id: _pt.string.isRequired,
   disabled: _pt.bool,

package/dist/InputFields/PasswordField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/PasswordField.tsx"],"names":["React","styled","COLORS","InputFieldStyling","InputWrapper","ErrorMessage","Z_INDEXES","useFocusVisibleRef","IconButton","SystemIcons","TechnicalWarning","StyledPassSwitch","div","badge","PasswordRow","PasswordField","id","disabled","onChange","invalid","value","validationMessage","autoComplete","placeholder","required","readOnly","size","margin","useState","passwordHidden","setPasswordHidden","inputRef","handleKeyDown","e","keyCode","display","concat","target","critical_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS } from '../styles';\nimport { Size } from '../types';\nimport { InputFieldStyling, InputWrapper, ErrorMessage } from './styling';\nimport { Z_INDEXES } from '../styles';\nimport { useFocusVisibleRef } from '../common';\nimport { IconButton } from '../Button';\nimport { SystemIcons } from '../icons';\nimport { TechnicalWarning } from '../icons/systemicons/SystemIcons';\n\ntype PasswordFieldProps = {\n  id: string;\n  disabled?: boolean;\n  onChange?: (text: string) => void;\n  invalid?: boolean;\n  value?: string;\n  validationMessage?: string;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  readOnly?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n};\n\nconst StyledPassSwitch = styled.div`\n  z-index: ${Z_INDEXES.badge};\n  right: 0;\n  position: absolute;\n`;\n\nconst PasswordRow = styled.div`\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nconst PasswordField = ({ id, disabled, onChange, invalid, value, validationMessage, autoComplete, placeholder, required, readOnly, size, margin }: PasswordFieldProps) => {\n  const [passwordHidden, setPasswordHidden] = React.useState<Boolean>(true);\n  const inputRef = useFocusVisibleRef();\n\n  const handleKeyDown = (e: any) => {\n    if (e.keyCode === 13) {\n      setPasswordHidden(!passwordHidden);\n    }\n  };\n  return (\n    <>\n      <InputWrapper disabled={disabled} readOnly={readOnly} margin={margin}>\n        <div style={{ display: 'block', margin: '4px 0px'}}>\n          <PasswordRow>\n            <InputFieldStyling\n              id={id}\n              ref={inputRef}\n              type={passwordHidden ? 'password' : 'text'}\n              name=\"password\"\n              value={value}\n              className={(invalid ? 'invalid ' : '').concat(size ? size : '')}\n              tabIndex={disabled || readOnly ? -1 : 0}\n              autoComplete={autoComplete}\n              activeErrorMessage={!!validationMessage}\n              placeholder={placeholder}\n              disabled={disabled}\n              required={required}\n              readOnly={readOnly}\n              onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n            />\n            <StyledPassSwitch className={size ? size : ''}>\n              {!disabled && !readOnly ? (\n                passwordHidden ? (\n                  <IconButton\n                    id={`${id}_Visible`}\n                    iconColor={'#666666'}\n                    variant={'secondary'}\n                    shape={'circular'}\n                    onKeyPress={handleKeyDown}\n                    action={() => setPasswordHidden(!passwordHidden)}>\n                    <SystemIcons.VisibleOff />\n                  </IconButton>\n                ) : (\n                  <IconButton\n                    id={`${id}_NotVisible`}\n                    iconColor={'#666666'}\n                    variant={'secondary'}\n                    shape={'circular'}\n                    onKeyPress={handleKeyDown}\n                    action={() => setPasswordHidden(!passwordHidden)}>\n                    <SystemIcons.VisibleOn />\n                  </IconButton>\n                )\n              ) : null}\n            </StyledPassSwitch>\n          </PasswordRow>\n        </div>\n      </InputWrapper>\n      {validationMessage && (\n        <ErrorMessage className={size || ''}>\n          <TechnicalWarning color={COLORS.critical_400} />\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n};\n\nexport default PasswordField;\n"],"file":"PasswordField.js"}
+{"version":3,"sources":["../../src/InputFields/PasswordField.tsx"],"names":["React","styled","COLORS","InputFieldStyling","InputWrapper","ErrorMessage","Z_INDEXES","useFocusVisibleRef","IconButton","SystemIcons","TechnicalWarning","StyledPassSwitch","div","badge","PasswordRow","PasswordField","forwardRef","ref","id","disabled","onChange","invalid","value","validationMessage","autoComplete","placeholder","required","readOnly","size","margin","className","name","rest","useState","passwordHidden","setPasswordHidden","inputRef","useImperativeHandle","current","handleKeyDown","e","keyCode","cls","display","target","critical_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS } from '../styles';\nimport { Size } from '../types';\nimport { InputFieldStyling, InputWrapper, ErrorMessage } from './styling';\nimport { Z_INDEXES } from '../styles';\nimport { useFocusVisibleRef } from '../common';\nimport { IconButton } from '../Button';\nimport { SystemIcons } from '../icons';\nimport { TechnicalWarning } from '../icons/systemicons/SystemIcons';\n\ntype PasswordFieldProps =\n  Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'id' | 'onChange' | 'readOnly' | 'required' | 'placeholder' | 'autoComplete' | 'value' | 'disabled' | 'tabIndex' | 'type'>\n  & {\n  id: string;\n  disabled?: boolean;\n  onChange?: (text: string) => void;\n  invalid?: boolean;\n  value?: string;\n  validationMessage?: string;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  readOnly?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n};\n\nconst StyledPassSwitch = styled.div`\n  z-index: ${Z_INDEXES.badge};\n  right: 0;\n  position: absolute;\n`;\n\nconst PasswordRow = styled.div`\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nconst PasswordField = React.forwardRef(({\n                                          id,\n                                          disabled,\n                                          onChange,\n                                          invalid,\n                                          value,\n                                          validationMessage,\n                                          autoComplete,\n                                          placeholder,\n                                          required,\n                                          readOnly,\n                                          size,\n                                          margin,\n                                          className,\n                                          name = 'password',\n                                          ...rest\n                                        }: PasswordFieldProps, ref) => {\n  const [passwordHidden, setPasswordHidden] = React.useState<Boolean>(true);\n  const inputRef = useFocusVisibleRef();\n\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n  const handleKeyDown = (e: any) => {\n    if (e.keyCode === 13) {\n      setPasswordHidden(!passwordHidden);\n    }\n  };\n\n  const cls = `${invalid ? 'invalid' : ''}  ${size || ''} ${className}`;\n\n  return (\n    <>\n      <InputWrapper disabled={disabled} readOnly={readOnly} margin={margin}>\n        <div style={{ display: 'block', margin: '4px 0px'}}>\n          <PasswordRow>\n            <InputFieldStyling\n              id={id}\n              ref={inputRef}\n              type={passwordHidden ? 'password' : 'text'}\n              name={name}\n              value={value}\n              className={cls}\n              tabIndex={disabled || readOnly ? -1 : 0}\n              autoComplete={autoComplete}\n              activeErrorMessage={!!validationMessage}\n              placeholder={placeholder}\n              disabled={disabled}\n              required={required}\n              readOnly={readOnly}\n              onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n              {...rest}\n            />\n            <StyledPassSwitch className={size ? size : ''}>\n              {!disabled && !readOnly ? (\n                passwordHidden ? (\n                  <IconButton\n                    id={`${id}_Visible`}\n                    iconColor={'#666666'}\n                    variant={'secondary'}\n                    shape={'circular'}\n                    onKeyPress={handleKeyDown}\n                    action={() => setPasswordHidden(!passwordHidden)}>\n                    <SystemIcons.VisibleOff />\n                  </IconButton>\n                ) : (\n                  <IconButton\n                    id={`${id}_NotVisible`}\n                    iconColor={'#666666'}\n                    variant={'secondary'}\n                    shape={'circular'}\n                    onKeyPress={handleKeyDown}\n                    action={() => setPasswordHidden(!passwordHidden)}>\n                    <SystemIcons.VisibleOn />\n                  </IconButton>\n                )\n              ) : null}\n            </StyledPassSwitch>\n          </PasswordRow>\n        </div>\n      </InputWrapper>\n      {validationMessage && (\n        <ErrorMessage className={size || ''}>\n          <TechnicalWarning color={COLORS.critical_400} />\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n});\n\nexport default PasswordField;\n"],"file":"PasswordField.js"}

package/dist/InputFields/RadioButton.cjs

@@ -9,6 +9,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -27,12 +31,18 @@ var _common = require("../common");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _excluded = ["id", "selected", "label", "additionalLabel", "invalid", "select", "disabled", "margin", "iconPointerEventsTransparent", "size", "tabIndexVal", "className"];
+
 var _templateObject;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 var StyledRadioButton = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ", "\n  cursor: pointer;\n\n  color: ", ";\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: ", ";\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      ", "\n    }\n  }\n\n  &.small {\n    ", "\n    .radio-button-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ", "\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ", "\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):focus {\n    ", "\n  }\n\n  &:not(.disabled):hover {\n    .radio-button-icon {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .radio-button-icon {\n      background: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    color: ", ";\n\n    .radio-button-icon,\n    .radio-button-label {\n      pointer-events: none;\n    }\n\n    .radio-button-icon {\n      background-color: ", ";\n    }\n\n    .radio-button-icon svg {\n      color: ", ";\n    }\n  }\n\n  &.dropdown-hover:not(.disabled) {\n    .radio-button-icon {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n"])), function (props) {
   return props.margin ? "margin: ".concat(props.margin, ";") : '';
 }, _styles.COLORS.black, function (props) {
@@ -53,7 +63,8 @@ var RadioButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       iconPointerEventsTransparent = _ref.iconPointerEventsTransparent,
       size = _ref.size,
       tabIndexVal = _ref.tabIndexVal,
-      className = _ref.className;
+      className = _ref.className,
+      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
   var onKeyPress = function onKeyPress(e) {
     if (e.keyCode === 13 && !disabled) {
@@ -63,7 +74,7 @@ var RadioButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
   size = (_size = size) !== null && _size !== void 0 ? _size : _types.Size.Medium;
   var cls = "".concat(size, " ").concat(className || '', " ").concat(disabled ? ' disabled' : '');
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledRadioButton, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledRadioButton, _objectSpread(_objectSpread({
     margin: margin,
     ref: ref,
     onClick: function onClick() {
@@ -75,7 +86,8 @@ var RadioButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className: cls,
     tabIndex: disabled ? -1 : tabIndexVal ? tabIndexVal : 0,
     invalid: invalid,
-    selected: selected,
+    selected: selected
+  }, rest), {}, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: 'radio-button-icon',
       id: id,
@@ -95,10 +107,10 @@ var RadioButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         children: additionalLabel
       })]
     })]
-  }, id);
+  }), id);
 });
 RadioButton.propTypes = {
-  id: _propTypes.default.string.isRequired,
+  id: _propTypes.default.string,
   selected: _propTypes.default.bool.isRequired,
   select: _propTypes.default.func.isRequired,
   label: _propTypes.default.string,

package/dist/InputFields/RadioButton.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/RadioButton.tsx"],"names":["StyledRadioButton","styled","div","props","margin","COLORS","black","selected","primary_500","invalid","critical_400","neutral_600","ComponentTextStyle","Regular","focusStyles","primary_20","primary_700","primary_100","primary_800","neutral_300","white","RadioButton","React","forwardRef","ref","id","label","additionalLabel","select","disabled","iconPointerEventsTransparent","size","tabIndexVal","className","onKeyPress","e","keyCode","Size","Medium","cls","defaultOnMouseDownHandler","undefined"],"mappings":"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","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 {\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                                                             }: 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} 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      <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"],"file":"RadioButton.cjs"}
+{"version":3,"sources":["../../src/InputFields/RadioButton.tsx"],"names":["StyledRadioButton","styled","div","props","margin","COLORS","black","selected","primary_500","invalid","critical_400","neutral_600","ComponentTextStyle","Regular","focusStyles","primary_20","primary_700","primary_100","primary_800","neutral_300","white","RadioButton","React","forwardRef","ref","id","label","additionalLabel","select","disabled","iconPointerEventsTransparent","size","tabIndexVal","className","rest","onKeyPress","e","keyCode","Size","Medium","cls","defaultOnMouseDownHandler","undefined"],"mappings":"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","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"],"file":"RadioButton.cjs"}

package/dist/InputFields/RadioButton.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Size } from '../types';
-interface Props {
-    id: string;
+interface Props extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'className' | 'onClick' | 'onMouseDown' | 'onKeyDown'> {
+    id?: string;
     selected: boolean;
     select: (selected: boolean) => void;
     label?: string;

package/dist/InputFields/RadioButton.js

@@ -1,8 +1,15 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 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); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { 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';
@@ -31,7 +38,8 @@ var RadioButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       iconPointerEventsTransparent = _ref.iconPointerEventsTransparent,
       size = _ref.size,
       tabIndexVal = _ref.tabIndexVal,
-      className = _ref.className;
+      className = _ref.className,
+      rest = _objectWithoutProperties(_ref, _excluded);
 
   var onKeyPress = function onKeyPress(e) {
     if (e.keyCode === 13 && !disabled) {
@@ -41,7 +49,7 @@ var RadioButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
   size = (_size = size) !== null && _size !== void 0 ? _size : Size.Medium;
   var cls = "".concat(size, " ").concat(className || '', " ").concat(disabled ? ' disabled' : '');
-  return /*#__PURE__*/_jsxs(StyledRadioButton, {
+  return /*#__PURE__*/_jsxs(StyledRadioButton, _objectSpread(_objectSpread({
     margin: margin,
     ref: ref,
     onClick: function onClick() {
@@ -53,7 +61,8 @@ var RadioButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className: cls,
     tabIndex: disabled ? -1 : tabIndexVal ? tabIndexVal : 0,
     invalid: invalid,
-    selected: selected,
+    selected: selected
+  }, rest), {}, {
     children: [/*#__PURE__*/_jsxs("div", {
       className: 'radio-button-icon',
       id: id,
@@ -73,10 +82,10 @@ var RadioButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         children: additionalLabel
       })]
     })]
-  }, id);
+  }), id);
 });
 RadioButton.propTypes = {
-  id: _pt.string.isRequired,
+  id: _pt.string,
   selected: _pt.bool.isRequired,
   select: _pt.func.isRequired,
   label: _pt.string,

package/dist/InputFields/RadioButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/RadioButton.tsx"],"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","onKeyPress","e","keyCode","Medium","cls","undefined"],"mappings":"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","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 {\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                                                             }: 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} 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      <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"],"file":"RadioButton.js"}
+{"version":3,"sources":["../../src/InputFields/RadioButton.tsx"],"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"],"mappings":"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","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"],"file":"RadioButton.js"}

package/dist/InputFields/SearchBar.cjs

@@ -156,6 +156,7 @@ var SearchBar = function SearchBar(_ref) {
         })]
       }), showDropdown && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.DropdownContent, {
         id: 'search',
+        containerRef: containerRef,
         size: size,
         isButton: false,
         customizationProps: {

package/dist/InputFields/SearchBar.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/SearchBar.tsx"],"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","isPressingEnter","e","key","preventDefault","stopPropagation","enteredSearchTerm","value","target","dropdownAction","term","concat","items","action","actionLabel","actionIcon","actionVariant","onValueUpdate","scrollable","pinTopItem","COLORS","critical_400"],"mappings":"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","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          size={size}\n          isButton={false}\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"],"file":"SearchBar.cjs"}
+{"version":3,"sources":["../../src/InputFields/SearchBar.tsx"],"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","isPressingEnter","e","key","preventDefault","stopPropagation","enteredSearchTerm","value","target","dropdownAction","term","concat","items","action","actionLabel","actionIcon","actionVariant","onValueUpdate","scrollable","pinTopItem","COLORS","critical_400"],"mappings":"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","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          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"],"file":"SearchBar.cjs"}

package/dist/InputFields/SearchBar.js

@@ -135,6 +135,7 @@ var SearchBar = function SearchBar(_ref) {
         })]
       }), showDropdown && /*#__PURE__*/_jsx(DropdownContent, {
         id: 'search',
+        containerRef: containerRef,
         size: size,
         isButton: false,
         customizationProps: {

package/dist/InputFields/SearchBar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/SearchBar.tsx"],"names":["React","COLORS","Search","SearchIcon","Clear","ClearIcon","TechnicalWarning","ErrorMessage","InputWrapper","SearchIconWrapper","IconButton","SearchBarInput","SearchField","styled","DropdownContent","useClickOutsideRef","ClearIconWrapper","div","SearchBar","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","validationMessage","onKeyDown","size","margin","showDropdown","dropdownButtonIcon","dropdownButtonLabel","dropdownButtonVariant","dropdownButtonAction","searchList","addToSearchList","dropdownScrollable","containerRef","useRef","useState","isOpen","setIsOpen","dropdownRef","isPressingEnter","e","key","preventDefault","stopPropagation","enteredSearchTerm","value","target","dropdownAction","term","concat","items","action","actionLabel","actionIcon","actionVariant","onValueUpdate","scrollable","pinTopItem","critical_400"],"mappings":"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","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          size={size}\n          isButton={false}\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"],"file":"SearchBar.js"}
+{"version":3,"sources":["../../src/InputFields/SearchBar.tsx"],"names":["React","COLORS","Search","SearchIcon","Clear","ClearIcon","TechnicalWarning","ErrorMessage","InputWrapper","SearchIconWrapper","IconButton","SearchBarInput","SearchField","styled","DropdownContent","useClickOutsideRef","ClearIconWrapper","div","SearchBar","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","validationMessage","onKeyDown","size","margin","showDropdown","dropdownButtonIcon","dropdownButtonLabel","dropdownButtonVariant","dropdownButtonAction","searchList","addToSearchList","dropdownScrollable","containerRef","useRef","useState","isOpen","setIsOpen","dropdownRef","isPressingEnter","e","key","preventDefault","stopPropagation","enteredSearchTerm","value","target","dropdownAction","term","concat","items","action","actionLabel","actionIcon","actionVariant","onValueUpdate","scrollable","pinTopItem","critical_400"],"mappings":";;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAAQC,MAAR,QAAqB,iBAArB;AACA,SAAQC,MAAM,IAAIC,UAAlB,EAA8BC,KAAK,IAAIC,SAAvC,EAAkDC,gBAAlD,QAAyE,kCAAzE;AACA,SAAQC,YAAR,EAAsBC,YAAtB,EAAoCC,iBAApC,QAA4D,WAA5D;AACA,SAAQC,UAAR,QAAyB,WAAzB;AACA,OAAOC,cAAP,MAA2B,6BAA3B;AACA,OAAOC,WAAP,MAAwB,0BAAxB;AAEA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,eAAT,QAA8C,aAA9C;AACA,SAASC,kBAAT,QAAmC,WAAnC;;;;AAyBA,IAAMC,gBAAgB,GAAGH,MAAM,CAACI,GAAV,qKAAtB;;AASA,IAAMC,SAAiD,GAAG,SAApDA,SAAoD,OAqBO;AAAA,MApBJC,EAoBI,QApBJA,EAoBI;AAAA,MAnBJC,UAmBI,QAnBJA,UAmBI;AAAA,MAlBJC,cAkBI,QAlBJA,aAkBI;AAAA,MAjBJC,WAiBI,QAjBJA,WAiBI;AAAA,MAhBJC,YAgBI,QAhBJA,YAgBI;AAAA,MAfJC,WAeI,QAfJA,WAeI;AAAA,MAdJC,kBAcI,QAdJA,kBAcI;AAAA,MAbJC,QAaI,QAbJA,QAaI;AAAA,MAZJC,iBAYI,QAZJA,iBAYI;AAAA,MAXJC,SAWI,QAXJA,SAWI;AAAA,MAVJC,IAUI,QAVJA,IAUI;AAAA,yBATJC,MASI;AAAA,MATJA,MASI,4BATK,OASL;AAAA,MARJC,YAQI,QARJA,YAQI;AAAA,MAPJC,kBAOI,QAPJA,kBAOI;AAAA,MANJC,mBAMI,QANJA,mBAMI;AAAA,MALJC,qBAKI,QALJA,qBAKI;AAAA,MAJJC,oBAII,QAJJA,oBAII;AAAA,6BAHJC,UAGI;AAAA,MAHJA,UAGI,gCAHO,EAGP;AAAA,MAFJC,eAEI,QAFJA,eAEI;AAAA,MADJC,kBACI,QADJA,kBACI;AAC/D,MAAMC,YAAY,GAAGvC,KAAK,CAACwC,MAAN,CAAkB,IAAlB,CAArB;;AAEA,wBAA4BxC,KAAK,CAACyC,QAAN,CAAe,KAAf,CAA5B;AAAA;AAAA,MAAOC,MAAP;AAAA,MAAeC,SAAf;;AACA,MAAMC,WAAW,GAAG7B,kBAAkB,CAAC;AAAA,WAAI4B,SAAS,CAAC,KAAD,CAAb;AAAA,GAAD,EAAuB,CAACJ,YAAD,CAAvB,CAAtC;;AAEA,MAAMM,eAAe,GAAG,SAAlBA,eAAkB,CAACC,CAAD,EAAY;AAClC,QAAIA,CAAC,CAACC,GAAF,KAAU,OAAd,EAAuB;AACrBD,MAAAA,CAAC,CAACE,cAAF;AACAF,MAAAA,CAAC,CAACG,eAAF;AACA,aAAO,IAAP;AACD;;AACD,WAAO,KAAP;AACD,GAPD;;AASA,MAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,CAACJ,CAAD,EAAY;AACpCT,IAAAA,eAAe,IAAIA,eAAe,CAAC;AAACc,MAAAA,KAAK,EAACL,CAAC,CAACM,MAAF,CAASD;AAAhB,KAAD,CAAlC;AACA7B,IAAAA,WAAW,CAACwB,CAAD,CAAX;AACD,GAHD;;AAKA,MAAMO,cAAc,GAAG,SAAjBA,cAAiB,GAAM;AAC3B,QAAGlB,oBAAH,EACEA,oBAAoB;AACvB,GAHD;;AAKA,sBACE;AAAA,4BACE,MAAC,YAAD;AACE,MAAA,QAAQ,EAAET,QADZ;AAEE,MAAA,MAAM,EAAEI,MAFV;AAAA,8BAGE,MAAC,WAAD;AAAa,QAAA,EAAE,EAAE,IAAjB;AAAuB,QAAA,IAAI,EAAED,IAA7B;AACa,QAAA,GAAG,EAAEU,YADlB;AAEa,QAAA,UAAU,EAAEnB,UAFzB;AAGa,QAAA,QAAQ,EAAEM,QAHvB;AAIa,QAAA,iBAAiB,EAAEC,iBAJhC;AAAA,gCAKE,KAAC,cAAD;AACE,UAAA,WAAW,EAAED,QAAQ,GAAG,EAAH,GAAQF,WAD/B;AAEE,UAAA,EAAE,EAAEL,EAFN;AAGE,UAAA,IAAI,EAAEU,IAHR;AAIE,UAAA,QAAQ,EAAEH,QAJZ;AAKE,UAAA,aAAa,EAAE,uBAAC4B,IAAD;AAAA,mBAAkBjC,cAAa,CAACiC,IAAD,CAA/B;AAAA,WALjB;AAME,UAAA,UAAU,EAAElC,UANd;AAOE,UAAA,SAAS,EAAEQ,SAPb;AAQE,UAAA,WAAW,EAAEsB,iBARf;AASE,UAAA,eAAe,EAAE,CAACX,YAAD,CATnB;AAUE,UAAA,OAAO,EAAE;AAAA,mBAAII,SAAS,CAAC,CAACD,MAAF,CAAb;AAAA,WAVX;AAWE,UAAA,GAAG,EAAEE;AAXP,UALF,eAkBE,KAAC,iBAAD;AAAmB,UAAA,SAAS,EAAEf,IAAI,GAAGA,IAAH,GAAU,EAA5C;AAAgD,wBAAYJ,kBAA5D;AAAA,iCACE,KAAC,UAAD;AAAY,YAAA,EAAE,YAAKN,EAAL,YAAd;AACY,YAAA,OAAO,EAAC,WADpB;AAEY,YAAA,KAAK,EAAC,UAFlB;AAGY,YAAA,MAAM,EAAEG,WAHpB;AAIY,YAAA,QAAQ,EAAEI,QAJtB;AAKY,YAAA,UAAU,EAAE,oBAACoB,CAAD;AAAA,qBAAaD,eAAe,CAACC,CAAD,CAAf,GAAqBxB,WAAW,CAACwB,CAAD,CAAhC,GAAsC,IAAnD;AAAA,aALxB;AAAA,mCAME,KAAC,UAAD;AAAY,cAAA,IAAI,EAAC;AAAjB;AANF;AADF,UAlBF,eA4BE,KAAC,gBAAD;AAAkB,UAAA,SAAS,EAAE,CAACjB,IAAI,GAAGA,IAAH,GAAU,EAAf,EAAmB0B,MAAnB,CAA0B,CAACnC,UAAD,GAAc,SAAd,GAA0B,EAApD,CAA7B;AAAA,iCACE,KAAC,UAAD;AAAY,YAAA,EAAE,YAAKD,EAAL,WAAd;AACY,YAAA,OAAO,EAAC,WADpB;AAEY,YAAA,KAAK,EAAC,UAFlB;AAGY,YAAA,MAAM,EAAEI,YAHpB;AAIY,YAAA,QAAQ,EAAEG,QAJtB;AAKY,YAAA,UAAU,EAAE,oBAACoB,CAAD;AAAA,qBAAaD,eAAe,CAACC,CAAD,CAAf,GAAqBvB,YAAY,CAACuB,CAAD,CAAjC,GAAuC,IAApD;AAAA,aALxB;AAAA,mCAME,KAAC,SAAD;AAAW,cAAA,IAAI,EAAC;AAAhB;AANF;AADF,UA5BF;AAAA,QAHF,EA2CCf,YAAY,iBAAI,KAAC,eAAD;AAAiB,QAAA,EAAE,EAAE,QAArB;AACiB,QAAA,YAAY,EAAEQ,YAD/B;AAEb,QAAA,IAAI,EAAEV,IAFO;AAGb,QAAA,QAAQ,EAAE,KAHG;AAIb,QAAA,kBAAkB,EAAE;AAClB2B,UAAAA,KAAK,EAACpB,UADY;AAElBqB,UAAAA,MAAM,EAAEJ,cAFU;AAGlBK,UAAAA,WAAW,EAAEzB,mBAHK;AAIlB0B,UAAAA,UAAU,EAAE3B,kBAJM;AAKlB4B,UAAAA,aAAa,EAAE1B,qBALG;AAMlB2B,UAAAA,aAAa,EAAC,uBAACf,CAAD,EAAK,CAAE,CANH;AAOlBgB,UAAAA,UAAU,EAAExB,kBAPM;AAQlByB,UAAAA,UAAU,EAAE;AARM,SAJP;AAcb,QAAA,MAAM,EAAErB,MAdK;AAeb,QAAA,SAAS,EAAEC,SAfE;AAgBb,QAAA,MAAM,EAAE,EAhBK;AAiBb,QAAA,cAAc,EAAEvB,UAAU,GAAG,CAACA,UAAD,CAAH,GAAkB,EAjB/B;AAkBb,QAAA,iBAAiB,EAAE,2BAAC0B,CAAD;AAAA,iBAAKzB,cAAa,CAACyB,CAAC,CAAC,CAAD,CAAF,CAAlB;AAAA,SAlBN;AAmBb,QAAA,kBAAkB,EAAE,EAnBP;AAoBb,QAAA,OAAO,EAAE,IApBI;AAqBb,QAAA,UAAU,EAAE,sBAAI,CAAE;AArBL,QA3CjB;AAAA,MADF,EAqEGnB,iBAAiB,iBAChB,MAAC,YAAD;AAAc,MAAA,SAAS,EAAEE,IAAI,IAAI,EAAjC;AAAA,8BACE,KAAC,gBAAD;AAAkB,QAAA,KAAK,EAAE5B,MAAM,CAAC+D,YAAhC;AAA8C,QAAA,SAAS,EAAEnC,IAAI,IAAI;AAAjE,QADF,eAEE;AAAA,kBAAOF;AAAP,QAFF;AAAA,MAtEJ;AAAA,IADF;AA8ED,CA5HD;;;AA/BER,EAAAA,E;AACAC,EAAAA,U;AACAC,EAAAA,a;AACAC,EAAAA,W;AACAC,EAAAA,Y;AACAC,EAAAA,W;AACAC,EAAAA,kB;AACAC,EAAAA,Q;AACAC,EAAAA,iB;AACAC,EAAAA,S;AAEAE,EAAAA,M;AACAC,EAAAA,Y;AACAC,EAAAA,kB;AACAC,EAAAA,mB;AACAC,EAAAA,qB,aAAwB,S,EAAY,W,EAAc,U;AAClDC,EAAAA,oB;AACAC,EAAAA,U;AACAC,EAAAA,e;AACAC,EAAAA,kB;;AA0IF,eAAepB,SAAf","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          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"],"file":"SearchBar.js"}