@laerdal/life-react-components 3.5.2-uss.hackathon → 3.5.2

package/dist/InputFields/RichTextField.d.ts

@@ -29,24 +29,81 @@ export declare enum RichTextFieldFormats {
     Video = "video"
 }
 export interface RichTextFieldProps {
+    /**
+     * Optional. The ID of the rich text field.
+     */
     id?: string;
+    /**
+     * Optional. The CSS class name of the rich text field.
+     */
     className?: string;
+    /**
+     * Optional. The placeholder text to be displayed in the rich text field when it is empty.
+     */
     placeholder?: string;
+    /**
+     * Optional. A boolean indicating whether the rich text field is read-only.
+     */
     readOnly?: boolean;
+    /**
+     * Optional. A boolean indicating whether the rich text field is disabled.
+     */
     disabled?: boolean;
+    /**
+     * Optional. A boolean indicating whether the rich text field is resizable.
+     */
     resizable?: boolean;
+    /**
+     * Optional. An object containing the modules to be used by the rich text field.
+     */
     modules?: StringMap;
+    /**
+     * Optional. An array of formats to be used by the rich text field.
+     */
     formats?: RichTextFieldFormats[];
+    /**
+     * Optional. A function to be called when the rich text field gains focus.
+     */
     onFocus?(selection: Range, source: Sources, editor: UnprivilegedEditor): void;
+    /**
+     * Optional. A function to be called when the rich text field loses focus.
+     */
     onBlur?(previousSelection: Range, source: Sources, editor: UnprivilegedEditor): void;
+    /**
+     * Optional. A function to be called when a keydown event occurs in the rich text field.
+     */
     onKeyDown?: React.EventHandler<any>;
+    /**
+     * Optional. A function to be called when a keypress event occurs in the rich text field.
+     */
     onKeyPress?: React.EventHandler<any>;
+    /**
+     * Optional. A function to be called when a keyup event occurs in the rich text field.
+     */
     onKeyUp?: React.EventHandler<any>;
+    /**
+     * Required. The current value of the rich text field.
+     */
     value: any;
+    /**
+     * Required. A function to be called when the value of the rich text field changes.
+     */
     onChange: (value: any) => void;
+    /**
+     * Optional. The validation message to be displayed when the rich text field is in an error state.
+     */
     validationMessage?: string;
+    /**
+     * Optional. A note to be displayed below the rich text field.
+     */
     note?: TextFieldNote;
+    /**
+     * Optional. The size of the rich text field. Can be 'Small' or 'Medium'.
+     */
     size?: Size.Small | Size.Medium;
+    /**
+     * Optional. The state of the rich text field. Can be 'Invalid' or 'Valid'.
+     */
     state?: States.Invalid | States.Valid;
 }
 export declare const RichTextField: React.ForwardRefExoticComponent<RichTextFieldProps & React.RefAttributes<any>>;

package/dist/InputFields/RichTextField.js

@@ -4,11 +4,11 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLit
 import _pt from "prop-types";
 var _excluded = ["readOnly", "disabled", "validationMessage", "note", "size", "state", "resizable", "modules", "formats"];
 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; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
 import ReactQuill from "react-quill";
-import styled from "styled-components";
+import styled, { useTheme } from "styled-components";
 import { NoteMessage, readOnlyState, ValidationMessage } from "./styling";
 import { Size, States } from "../types";
 import { COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, scrollBarStyling } from "../styles";
@@ -16,7 +16,33 @@ import { CheckMark, TechnicalWarning } from "../icons/systemicons";
 import 'react-quill/dist/quill.snow.css';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export var RichTextFieldContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .quill {\n    width: 100%;\n    margin-bottom: 4px;\n    overflow: hidden;\n\n    box-shadow: inset 0 0 0 1px ", ";\n    border-radius: 4px;\n  }\n\n  .quill.valid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  .quill.invalid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  .quill:hover {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  .quill:focus-within {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  .ql-editor,\n  .ql-editor p{\n    ", "\n  }\n\n  .ql-editor.ql-blank::before {\n    ", "\n  }\n\n  &.medium {\n    .ql-editor,\n    .ql-editor p{\n      ", "\n    }\n\n    .ql-editor.ql-blank::before {\n      ", "\n    }\n  }\n\n  .ql-toolbar.ql-snow {\n    border: none;\n    padding: 8px 7px;\n    margin: 0 1px;\n    border-bottom: 1px solid ", ";\n  }\n\n  .quill.valid .ql-toolbar,\n  .quill.invalid .ql-toolbar,\n  .quill:hover .ql-toolbar,\n  .quill:focus-within .ql-toolbar {\n    padding: 8px 6px;\n    margin: 0 2px;\n  }\n\n  .ql-container {\n    font-family: unset !important;\n  }\n\n  .ql-container.ql-snow {\n    border: none;\n    overflow-y: hidden;\n    padding: 8px;\n  }\n\n  .ql-editor {\n    padding: 8px;\n    overflow-y: auto;\n\n    ", "\n  }\n\n  &.resizable {\n    height: initial;\n\n    .quill {\n      flex: none;\n      overflow: initial;\n    }\n\n    .ql-container {\n      flex: none;\n      resize: vertical;\n    }\n\n    .ql-editor {\n      height: 100%;\n    }\n  }\n\n  &.readonly {\n    .quill {\n      ", "\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    .quill {\n      pointer-events: none;\n      box-shadow: inset 0 0 0 1px ", ";\n      color: ", ";\n\n      .ql-editor.ql-blank::before {\n        color: ", ";\n      }\n    }\n  }\n"])), COLORS.neutral_400, COLORS.correct_500, COLORS.critical_500, COLORS.primary_700, COLORS.primary_800, ComponentSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500), COLORS.neutral_200, scrollBarStyling(Size.Small), readOnlyState, COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_300);
+export var RichTextFieldContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .quill {\n    width: 100%;\n    margin-bottom: 4px;\n    overflow: hidden;\n\n    box-shadow: inset 0 0 0 1px ", ";\n    border-radius: 4px;\n  }\n\n  .quill.valid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  .quill.invalid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  .quill:hover {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  .quill:focus-within {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  .ql-editor,\n  .ql-editor p{\n    ", "\n  }\n\n  .ql-editor.ql-blank::before {\n    ", "\n  }\n\n  &.medium {\n    .ql-editor,\n    .ql-editor p{\n      ", "\n    }\n\n    .ql-editor.ql-blank::before {\n      ", "\n    }\n  }\n\n  .ql-toolbar.ql-snow {\n    border: none;\n    padding: 8px 7px;\n    margin: 0 1px;\n    border-bottom: 1px solid ", ";\n  }\n\n  .quill.valid .ql-toolbar,\n  .quill.invalid .ql-toolbar,\n  .quill:hover .ql-toolbar,\n  .quill:focus-within .ql-toolbar {\n    padding: 8px 6px;\n    margin: 0 2px;\n  }\n\n  .ql-container {\n    font-family: unset !important;\n  }\n\n  .ql-container.ql-snow {\n    border: none;\n    overflow-y: hidden;\n    padding: 8px;\n  }\n\n  .ql-editor {\n    padding: 8px;\n    overflow-y: auto;\n\n    ", "\n  }\n\n  &.resizable {\n    height: initial;\n\n    .quill {\n      flex: none;\n      overflow: initial;\n    }\n\n    .ql-container {\n      flex: none;\n      resize: vertical;\n    }\n\n    .ql-editor {\n      height: 100%;\n    }\n  }\n\n  &.readonly {\n    .quill {\n      ", "\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    .quill {\n      pointer-events: none;\n      box-shadow: inset 0 0 0 1px ", ";\n      color: ", ";\n\n      .ql-editor.ql-blank::before {\n        color: ", ";\n      }\n    }\n  }\n"])), function (props) {
+  return COLORS.getColor('neutral_400', props.theme);
+}, function (props) {
+  return COLORS.getColor('correct_500', props.theme);
+}, function (props) {
+  return COLORS.getColor('critical_500', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_700', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_800', props.theme);
+}, function (props) {
+  return ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme));
+}, function (props) {
+  return ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme));
+}, function (props) {
+  return ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme));
+}, function (props) {
+  return ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme));
+}, function (props) {
+  return COLORS.getColor('neutral_200', props.theme);
+}, scrollBarStyling(Size.Small), readOnlyState, function (props) {
+  return COLORS.getColor('neutral_100', props.theme);
+}, function (props) {
+  return COLORS.getColor('neutral_300', props.theme);
+}, function (props) {
+  return COLORS.getColor('neutral_300', props.theme);
+});
 export var RichTextFieldFormats;
 (function (RichTextFieldFormats) {
   RichTextFieldFormats["Background"] = "background";
@@ -61,6 +87,7 @@ export var RichTextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     modules = _ref.modules,
     formats = _ref.formats,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var theme = useTheme();
   var m = _objectSpread(_objectSpread({}, modules !== null && modules !== void 0 ? modules : {}), {}, {
     toolbar: (_modules$toolbar = modules === null || modules === void 0 ? void 0 : modules.toolbar) !== null && _modules$toolbar !== void 0 ? _modules$toolbar : defaultToolBarOptions
   });
@@ -79,9 +106,9 @@ export var RichTextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       className: size || '',
       type: state !== null && state !== void 0 ? state : States.Invalid,
       children: [state === States.Valid ? /*#__PURE__*/_jsx(CheckMark, {
-        color: COLORS.correct_400
+        color: COLORS.getColor('correct_400', theme)
       }) : /*#__PURE__*/_jsx(TechnicalWarning, {
-        color: COLORS.critical_400
+        color: COLORS.getColor('critical_400', theme)
       }), /*#__PURE__*/_jsx("span", {
         children: validationMessage
       })]

package/dist/InputFields/RichTextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"RichTextField.js","names":["React","ReactQuill","styled","NoteMessage","readOnlyState","ValidationMessage","Size","States","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","scrollBarStyling","CheckMark","TechnicalWarning","RichTextFieldContainer","div","neutral_400","correct_500","critical_500","primary_700","primary_800","Regular","black","Italic","neutral_500","neutral_200","Small","neutral_100","neutral_300","RichTextFieldFormats","defaultToolBarOptions","header","RichTextField","forwardRef","ref","readOnly","disabled","validationMessage","note","size","Medium","state","resizable","modules","formats","rest","m","toolbar","f","Object","values","filter","a","Image","Video","Formula","Invalid","Valid","correct_400","critical_400","icon","message","id","className","placeholder","onKeyDown","onKeyPress","onKeyUp","value","onChange"],"sources":["../../src/InputFields/RichTextField.tsx"],"sourcesContent":["import React from 'react';\r\nimport ReactQuill, {Range, UnprivilegedEditor} from \"react-quill\";\r\nimport {TextFieldNote} from \"./types\";\r\nimport styled from \"styled-components\";\r\nimport {NoteMessage, readOnlyState, ValidationMessage} from \"./styling\";\r\nimport {Size, States} from \"../types\";\r\nimport {COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, scrollBarStyling} from \"../styles\";\r\nimport {CheckMark, TechnicalWarning} from \"../icons/systemicons\";\r\nimport {Sources, StringMap} from \"quill\";\r\nimport 'react-quill/dist/quill.snow.css';\r\n\r\nexport const RichTextFieldContainer = styled.div`\r\n  .quill {\r\n    width: 100%;\r\n    margin-bottom: 4px;\r\n    overflow: hidden;\r\n\r\n    box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\r\n    border-radius: 4px;\r\n  }\r\n\r\n  .quill.valid {\r\n    box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\r\n  }\r\n\r\n  .quill.invalid {\r\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_500};\r\n  }\r\n\r\n  .quill:hover {\r\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_700};\r\n  }\r\n\r\n  .quill:focus-within {\r\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\r\n  }\r\n\r\n  .ql-editor,\r\n  .ql-editor p{\r\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n  }\r\n\r\n  .ql-editor.ql-blank::before {\r\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\r\n  }\r\n\r\n  &.medium {\r\n    .ql-editor,\r\n    .ql-editor p{\r\n      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n    }\r\n\r\n    .ql-editor.ql-blank::before {\r\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\r\n    }\r\n  }\r\n\r\n  .ql-toolbar.ql-snow {\r\n    border: none;\r\n    padding: 8px 7px;\r\n    margin: 0 1px;\r\n    border-bottom: 1px solid ${COLORS.neutral_200};\r\n  }\r\n\r\n  .quill.valid .ql-toolbar,\r\n  .quill.invalid .ql-toolbar,\r\n  .quill:hover .ql-toolbar,\r\n  .quill:focus-within .ql-toolbar {\r\n    padding: 8px 6px;\r\n    margin: 0 2px;\r\n  }\r\n\r\n  .ql-container {\r\n    font-family: unset !important;\r\n  }\r\n\r\n  .ql-container.ql-snow {\r\n    border: none;\r\n    overflow-y: hidden;\r\n    padding: 8px;\r\n  }\r\n\r\n  .ql-editor {\r\n    padding: 8px;\r\n    overflow-y: auto;\r\n\r\n    ${scrollBarStyling(Size.Small)}\r\n  }\r\n\r\n  &.resizable {\r\n    height: initial;\r\n\r\n    .quill {\r\n      flex: none;\r\n      overflow: initial;\r\n    }\r\n\r\n    .ql-container {\r\n      flex: none;\r\n      resize: vertical;\r\n    }\r\n\r\n    .ql-editor {\r\n      height: 100%;\r\n    }\r\n  }\r\n\r\n  &.readonly {\r\n    .quill {\r\n      ${readOnlyState}\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    .quill {\r\n      pointer-events: none;\r\n      box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\r\n      color: ${COLORS.neutral_300};\r\n\r\n      .ql-editor.ql-blank::before {\r\n        color: ${COLORS.neutral_300};\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nexport enum RichTextFieldFormats {\r\n  Background = 'background',\r\n  Bold = 'bold',\r\n  Color = 'color',\r\n  Font = 'font',\r\n  Code = 'code',\r\n  Italic = 'italic',\r\n  Link = 'link',\r\n  Size = 'size',\r\n  Strike = 'strike',\r\n  Script = 'script',\r\n  Underline = 'underline',\r\n  Blockquote = 'blockquote',\r\n  Header = 'header',\r\n  Indent = 'indent',\r\n  List = 'list',\r\n  Align = 'align',\r\n  Direction = 'direction',\r\n  CodeBlock = 'code-block',\r\n  Formula = 'formula',\r\n  Image = 'image',\r\n  Video = 'video'\r\n}\r\n\r\nconst defaultToolBarOptions = [\r\n  [{header: [1, 2, 3, false]}],\r\n  ['bold', 'italic', 'underline', 'strike'],\r\n  [{'list': 'ordered'}, {'list': 'bullet'}],\r\n  ['link'],\r\n  ['clean']\r\n];\r\n\r\nexport interface RichTextFieldProps {\r\n  id?: string;\r\n  className?: string;\r\n  placeholder?: string;\r\n  readOnly?: boolean;\r\n  disabled?: boolean;\r\n  resizable?: boolean;\r\n\r\n  modules?: StringMap;\r\n  formats?: RichTextFieldFormats[];\r\n\r\n  onFocus?(selection: Range, source: Sources, editor: UnprivilegedEditor): void;\r\n\r\n  onBlur?(previousSelection: Range, source: Sources, editor: UnprivilegedEditor): void;\r\n\r\n  onKeyDown?: React.EventHandler<any>;\r\n  onKeyPress?: React.EventHandler<any>;\r\n  onKeyUp?: React.EventHandler<any>;\r\n\r\n  value: any;\r\n  onChange: (value: any) => void;\r\n\r\n  validationMessage?: string;\r\n  note?: TextFieldNote;\r\n  size?: Size.Small | Size.Medium;\r\n  state?: States.Invalid | States.Valid;\r\n}\r\n\r\nexport const RichTextField = React.forwardRef<any, RichTextFieldProps>(({\r\n                                                                          readOnly,\r\n                                                                          disabled,\r\n                                                                          validationMessage,\r\n                                                                          note,\r\n                                                                          size = Size.Medium,\r\n                                                                          state,\r\n                                                                          resizable,\r\n                                                                          modules,\r\n                                                                          formats,\r\n                                                                          ...rest\r\n                                                                        }: RichTextFieldProps, ref) => {\r\n\r\n  let m = {...(modules ?? {}), toolbar: modules?.toolbar ?? defaultToolBarOptions};\r\n  let f = formats ?? Object.values(RichTextFieldFormats).filter(a => a !== RichTextFieldFormats.Image && a !== RichTextFieldFormats.Video && a !== RichTextFieldFormats.Formula);\r\n\r\n  return (\r\n    <RichTextFieldContainer\r\n      className={`${resizable ? 'resizable' : ''} ${size} ${state || ''} ${readOnly ? 'readonly' : ''}  ${disabled ? 'disabled' : ''}`}>\r\n      <ReactQuill ref={ref}\r\n                  readOnly={readOnly || disabled}\r\n                  modules={m}\r\n                  theme={'snow'}\r\n                  formats={f}\r\n                  {...rest}\r\n      />\r\n      {validationMessage && (\r\n        <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\r\n          {\r\n            state === States.Valid\r\n              ? <CheckMark color={COLORS.correct_400}/>\r\n              : <TechnicalWarning color={COLORS.critical_400}/>\r\n          }\r\n          <span>{validationMessage}</span>\r\n        </ValidationMessage>\r\n      )}\r\n      {note && !disabled && (\r\n        <NoteMessage className={size}>\r\n          {note.icon}\r\n          <span>{note.message}</span>\r\n        </NoteMessage>\r\n      )}\r\n    </RichTextFieldContainer>\r\n  )\r\n});"],"mappings":"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"}
+{"version":3,"file":"RichTextField.js","names":["React","ReactQuill","styled","useTheme","NoteMessage","readOnlyState","ValidationMessage","Size","States","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","scrollBarStyling","CheckMark","TechnicalWarning","jsx","_jsx","jsxs","_jsxs","RichTextFieldContainer","div","_templateObject","_taggedTemplateLiteral","props","getColor","theme","Regular","Italic","Small","RichTextFieldFormats","defaultToolBarOptions","header","RichTextField","forwardRef","_ref","ref","_modules$toolbar","readOnly","disabled","validationMessage","note","_ref$size","size","Medium","state","resizable","modules","formats","rest","_objectWithoutProperties","_excluded","m","_objectSpread","toolbar","f","Object","values","filter","a","Image","Video","Formula","className","concat","children","type","Invalid","Valid","color","icon","message","propTypes","id","_pt","string","placeholder","bool","arrayOf","oneOf","onKeyDown","func","onKeyPress","onKeyUp","value","any","isRequired","onChange"],"sources":["../../src/InputFields/RichTextField.tsx"],"sourcesContent":["import React from 'react';\r\nimport ReactQuill, {Range, UnprivilegedEditor} from \"react-quill\";\r\nimport {TextFieldNote} from \"./types\";\r\nimport styled, { useTheme } from \"styled-components\";\r\nimport {NoteMessage, readOnlyState, ValidationMessage} from \"./styling\";\r\nimport {Size, States} from \"../types\";\r\nimport {COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, scrollBarStyling} from \"../styles\";\r\nimport {CheckMark, TechnicalWarning} from \"../icons/systemicons\";\r\nimport {Sources, StringMap} from \"quill\";\r\nimport 'react-quill/dist/quill.snow.css';\r\n\r\nexport const RichTextFieldContainer = styled.div`\r\n  .quill {\r\n    width: 100%;\r\n    margin-bottom: 4px;\r\n    overflow: hidden;\r\n\r\n    box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_400', props.theme)};\r\n    border-radius: 4px;\r\n  }\r\n\r\n  .quill.valid {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('correct_500', props.theme)};\r\n  }\r\n\r\n  .quill.invalid {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('critical_500', props.theme)};\r\n  }\r\n\r\n  .quill:hover {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('primary_700', props.theme)};\r\n  }\r\n\r\n  .quill:focus-within {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n\r\n  .ql-editor,\r\n  .ql-editor p{\r\n    ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n  }\r\n\r\n  .ql-editor.ql-blank::before {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}\r\n  }\r\n\r\n  &.medium {\r\n    .ql-editor,\r\n    .ql-editor p{\r\n      ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    }\r\n\r\n    .ql-editor.ql-blank::before {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}\r\n    }\r\n  }\r\n\r\n  .ql-toolbar.ql-snow {\r\n    border: none;\r\n    padding: 8px 7px;\r\n    margin: 0 1px;\r\n    border-bottom: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n  }\r\n\r\n  .quill.valid .ql-toolbar,\r\n  .quill.invalid .ql-toolbar,\r\n  .quill:hover .ql-toolbar,\r\n  .quill:focus-within .ql-toolbar {\r\n    padding: 8px 6px;\r\n    margin: 0 2px;\r\n  }\r\n\r\n  .ql-container {\r\n    font-family: unset !important;\r\n  }\r\n\r\n  .ql-container.ql-snow {\r\n    border: none;\r\n    overflow-y: hidden;\r\n    padding: 8px;\r\n  }\r\n\r\n  .ql-editor {\r\n    padding: 8px;\r\n    overflow-y: auto;\r\n\r\n    ${scrollBarStyling(Size.Small)}\r\n  }\r\n\r\n  &.resizable {\r\n    height: initial;\r\n\r\n    .quill {\r\n      flex: none;\r\n      overflow: initial;\r\n    }\r\n\r\n    .ql-container {\r\n      flex: none;\r\n      resize: vertical;\r\n    }\r\n\r\n    .ql-editor {\r\n      height: 100%;\r\n    }\r\n  }\r\n\r\n  &.readonly {\r\n    .quill {\r\n      ${readOnlyState}\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    .quill {\r\n      pointer-events: none;\r\n      box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_100', props.theme)};\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n\r\n      .ql-editor.ql-blank::before {\r\n        color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nexport enum RichTextFieldFormats {\r\n  Background = 'background',\r\n  Bold = 'bold',\r\n  Color = 'color',\r\n  Font = 'font',\r\n  Code = 'code',\r\n  Italic = 'italic',\r\n  Link = 'link',\r\n  Size = 'size',\r\n  Strike = 'strike',\r\n  Script = 'script',\r\n  Underline = 'underline',\r\n  Blockquote = 'blockquote',\r\n  Header = 'header',\r\n  Indent = 'indent',\r\n  List = 'list',\r\n  Align = 'align',\r\n  Direction = 'direction',\r\n  CodeBlock = 'code-block',\r\n  Formula = 'formula',\r\n  Image = 'image',\r\n  Video = 'video'\r\n}\r\n\r\nconst defaultToolBarOptions = [\r\n  [{header: [1, 2, 3, false]}],\r\n  ['bold', 'italic', 'underline', 'strike'],\r\n  [{'list': 'ordered'}, {'list': 'bullet'}],\r\n  ['link'],\r\n  ['clean']\r\n];\r\n\r\nexport interface RichTextFieldProps {\r\n  /**\r\n   * Optional. The ID of the rich text field.\r\n   */\r\n  id?: string;\r\n\r\n  /**\r\n   * Optional. The CSS class name of the rich text field.\r\n   */\r\n  className?: string;\r\n\r\n  /**\r\n   * Optional. The placeholder text to be displayed in the rich text field when it is empty.\r\n   */\r\n  placeholder?: string;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether the rich text field is read-only.\r\n   */\r\n  readOnly?: boolean;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether the rich text field is disabled.\r\n   */\r\n  disabled?: boolean;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether the rich text field is resizable.\r\n   */\r\n  resizable?: boolean;\r\n\r\n  /**\r\n   * Optional. An object containing the modules to be used by the rich text field.\r\n   */\r\n  modules?: StringMap;\r\n\r\n  /**\r\n   * Optional. An array of formats to be used by the rich text field.\r\n   */\r\n  formats?: RichTextFieldFormats[];\r\n\r\n  /**\r\n   * Optional. A function to be called when the rich text field gains focus.\r\n   */\r\n  onFocus?(selection: Range, source: Sources, editor: UnprivilegedEditor): void;\r\n\r\n  /**\r\n   * Optional. A function to be called when the rich text field loses focus.\r\n   */\r\n  onBlur?(previousSelection: Range, source: Sources, editor: UnprivilegedEditor): void;\r\n\r\n  /**\r\n   * Optional. A function to be called when a keydown event occurs in the rich text field.\r\n   */\r\n  onKeyDown?: React.EventHandler<any>;\r\n\r\n  /**\r\n   * Optional. A function to be called when a keypress event occurs in the rich text field.\r\n   */\r\n  onKeyPress?: React.EventHandler<any>;\r\n\r\n  /**\r\n   * Optional. A function to be called when a keyup event occurs in the rich text field.\r\n   */\r\n  onKeyUp?: React.EventHandler<any>;\r\n\r\n  /**\r\n   * Required. The current value of the rich text field.\r\n   */\r\n  value: any;\r\n\r\n  /**\r\n   * Required. A function to be called when the value of the rich text field changes.\r\n   */\r\n  onChange: (value: any) => void;\r\n\r\n  /**\r\n   * Optional. The validation message to be displayed when the rich text field is in an error state.\r\n   */\r\n  validationMessage?: string;\r\n\r\n  /**\r\n   * Optional. A note to be displayed below the rich text field.\r\n   */\r\n  note?: TextFieldNote;\r\n\r\n  /**\r\n   * Optional. The size of the rich text field. Can be 'Small' or 'Medium'.\r\n   */\r\n  size?: Size.Small | Size.Medium;\r\n\r\n  /**\r\n   * Optional. The state of the rich text field. Can be 'Invalid' or 'Valid'.\r\n   */\r\n  state?: States.Invalid | States.Valid;\r\n}\r\n\r\nexport const RichTextField = React.forwardRef<any, RichTextFieldProps>(({\r\n                                                                          readOnly,\r\n                                                                          disabled,\r\n                                                                          validationMessage,\r\n                                                                          note,\r\n                                                                          size = Size.Medium,\r\n                                                                          state,\r\n                                                                          resizable,\r\n                                                                          modules,\r\n                                                                          formats,\r\n                                                                          ...rest\r\n                                                                        }: RichTextFieldProps, ref) => {\r\n\r\n  const theme = useTheme();\r\n  let m = {...(modules ?? {}), toolbar: modules?.toolbar ?? defaultToolBarOptions};\r\n  let f = formats ?? Object.values(RichTextFieldFormats).filter(a => a !== RichTextFieldFormats.Image && a !== RichTextFieldFormats.Video && a !== RichTextFieldFormats.Formula);\r\n\r\n  return (\r\n    <RichTextFieldContainer\r\n      className={`${resizable ? 'resizable' : ''} ${size} ${state || ''} ${readOnly ? 'readonly' : ''}  ${disabled ? 'disabled' : ''}`}>\r\n      <ReactQuill ref={ref}\r\n                  readOnly={readOnly || disabled}\r\n                  modules={m}\r\n                  theme={'snow'}\r\n                  formats={f}\r\n                  {...rest}\r\n      />\r\n      {validationMessage && (\r\n        <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\r\n          {\r\n            state === States.Valid\r\n              ? <CheckMark color={COLORS.getColor('correct_400', theme)}/>\r\n              : <TechnicalWarning color={COLORS.getColor('critical_400', theme)}/>\r\n          }\r\n          <span>{validationMessage}</span>\r\n        </ValidationMessage>\r\n      )}\r\n      {note && !disabled && (\r\n        <NoteMessage className={size}>\r\n          {note.icon}\r\n          <span>{note.message}</span>\r\n        </NoteMessage>\r\n      )}\r\n    </RichTextFieldContainer>\r\n  )\r\n});"],"mappings":"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","ignoreList":[]}

package/dist/InputFields/SearchBar.cjs

@@ -1,10 +1,11 @@
 "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;
+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"));
@@ -15,12 +16,14 @@ 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 _styledComponents = _interopRequireWildcard(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"])));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+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,
@@ -38,16 +41,16 @@ var SearchBar = function SearchBar(_ref) {
     dropdownButtonIcon = _ref.dropdownButtonIcon,
     dropdownButtonLabel = _ref.dropdownButtonLabel,
     dropdownButtonVariant = _ref.dropdownButtonVariant,
-    dropdownButtonLoading = _ref.dropdownButtonLoading,
     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 topLevelRef = _react.default.useRef(null);
-  var _React$useState = _react.default.useState(false),
-    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+  var containerRef = _react["default"].useRef(null);
+  var theme = (0, _styledComponents.useTheme)();
+  var topLevelRef = _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];
   var dropdownRef = (0, _common.useClickOutsideRef)(function () {
@@ -73,16 +76,16 @@ var SearchBar = function SearchBar(_ref) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styling.InputWrapper, {
       disabled: disabled,
-      margin: margin,
       ref: topLevelRef,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_SearchField.default, {
+      margin: margin,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_SearchField["default"], {
         id: 'id',
         size: size,
         ref: containerRef,
         searchTerm: searchTerm,
         disabled: disabled,
         validationMessage: validationMessage,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SearchBarInput.default, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SearchBarInput["default"], {
           placeholder: disabled ? '' : placeholder,
           id: id,
           size: size,
@@ -144,8 +147,7 @@ var SearchBar = function SearchBar(_ref) {
           actionVariant: dropdownButtonVariant,
           onValueUpdate: function onValueUpdate(e) {},
           scrollable: dropdownScrollable,
-          pinTopItem: true,
-          actionLoading: dropdownButtonLoading
+          pinTopItem: true
         },
         isOpen: isOpen,
         setIsOpen: setIsOpen,
@@ -161,7 +163,7 @@ var SearchBar = function SearchBar(_ref) {
     }), validationMessage && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styling.ErrorMessage, {
       className: size || '',
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.TechnicalWarning, {
-        color: _index.COLORS.critical_400,
+        color: _index.COLORS.getColor('critical_400', theme),
         className: size || ''
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         children: validationMessage
@@ -170,27 +172,26 @@ var SearchBar = function SearchBar(_ref) {
   });
 };
 SearchBar.propTypes = {
-  id: _propTypes.default.string.isRequired,
-  searchTerm: _propTypes.default.string,
-  setSearchTerm: _propTypes.default.func.isRequired,
-  enterSearch: _propTypes.default.func.isRequired,
-  removeSearch: _propTypes.default.func.isRequired,
-  placeholder: _propTypes.default.string,
-  performSearchLabel: _propTypes.default.string,
-  disabled: _propTypes.default.bool,
-  validationMessage: _propTypes.default.string,
-  onKeyDown: _propTypes.default.func,
-  margin: _propTypes.default.string,
-  showDropdown: _propTypes.default.bool,
-  dropdownButtonIcon: _propTypes.default.node,
-  dropdownButtonLabel: _propTypes.default.string,
-  dropdownButtonLoading: _propTypes.default.bool,
-  dropdownButtonVariant: _propTypes.default.oneOf(['primary', 'secondary', 'tertiary']),
-  dropdownButtonAction: _propTypes.default.func,
-  searchList: _propTypes.default.array,
-  addToSearchList: _propTypes.default.func,
-  dropdownScrollable: _propTypes.default.bool
+  id: _propTypes["default"].string.isRequired,
+  searchTerm: _propTypes["default"].string,
+  setSearchTerm: _propTypes["default"].func.isRequired,
+  enterSearch: _propTypes["default"].func.isRequired,
+  removeSearch: _propTypes["default"].func.isRequired,
+  placeholder: _propTypes["default"].string,
+  performSearchLabel: _propTypes["default"].string,
+  disabled: _propTypes["default"].bool,
+  validationMessage: _propTypes["default"].string,
+  onKeyDown: _propTypes["default"].func,
+  margin: _propTypes["default"].string,
+  showDropdown: _propTypes["default"].bool,
+  dropdownButtonIcon: _propTypes["default"].node,
+  dropdownButtonLabel: _propTypes["default"].string,
+  dropdownButtonVariant: _propTypes["default"].oneOf(['primary', 'secondary', 'tertiary']),
+  dropdownButtonAction: _propTypes["default"].func,
+  searchList: _propTypes["default"].array,
+  addToSearchList: _propTypes["default"].func,
+  dropdownScrollable: _propTypes["default"].bool
 };
 var _default = SearchBar;
-exports.default = _default;
+exports["default"] = _default;
 //# sourceMappingURL=SearchBar.cjs.map

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","dropdownButtonLoading","dropdownButtonAction","searchList","addToSearchList","dropdownScrollable","containerRef","React","useRef","topLevelRef","useState","isOpen","setIsOpen","dropdownRef","useClickOutsideRef","isPressingEnter","e","key","preventDefault","stopPropagation","enteredSearchTerm","value","target","dropdownAction","term","concat","items","action","actionLabel","actionIcon","actionVariant","onValueUpdate","scrollable","pinTopItem","actionLoading","COLORS","critical_400"],"sources":["../../src/InputFields/SearchBar.tsx"],"sourcesContent":["import React from 'react';\r\nimport {COLORS} from '../styles/index';\r\nimport {SystemIcons} from '../icons';\r\nimport {ErrorMessage, InputWrapper, SearchIconWrapper} from './styling';\r\nimport {IconButton} from '../Button';\r\nimport SearchBarInput from './components/SearchBarInput';\r\nimport SearchField from './components/SearchField';\r\nimport {Size} from '../types';\r\nimport styled from 'styled-components';\r\nimport { DropdownContent, DropdownItem } from '../Dropdown';\r\nimport { useClickOutsideRef } from '../common';\r\n\r\nexport type SearchBarProps = {\r\n  id: string;\r\n  searchTerm?: string;\r\n  setSearchTerm: (term: string) => void;\r\n  enterSearch: (e: any) => void;\r\n  removeSearch: (e: any) => void;\r\n  placeholder?: string;\r\n  performSearchLabel?: string;\r\n  disabled?: boolean;\r\n  validationMessage?: string;\r\n  onKeyDown?: (e: React.KeyboardEvent) => void;\r\n  size?: Size.Small | Size.Medium;\r\n  margin?: string;\r\n  showDropdown?: boolean;\r\n  dropdownButtonIcon?: React.ReactNode;\r\n  dropdownButtonLabel?: string;\r\n  dropdownButtonLoading?: boolean;\r\n  dropdownButtonVariant?: 'primary' | 'secondary' | 'tertiary';\r\n  dropdownButtonAction?: () => boolean | void | undefined;\r\n  searchList?: DropdownItem[];\r\n  addToSearchList?: (e: DropdownItem) => void;\r\n  dropdownScrollable?: boolean;\r\n};\r\n\r\nconst ClearIconWrapper = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n\r\n  &.hidden {\r\n    display: none !important;\r\n  }\r\n`;\r\n\r\nconst SearchBar: React.FunctionComponent<SearchBarProps> = ({\r\n                                                             id,\r\n                                                             searchTerm,\r\n                                                             setSearchTerm,\r\n                                                             enterSearch,\r\n                                                             removeSearch,\r\n                                                             placeholder,\r\n                                                             performSearchLabel,\r\n                                                             disabled,\r\n                                                             validationMessage,\r\n                                                             onKeyDown,\r\n                                                             size,\r\n                                                             margin,\r\n                                                             showDropdown,\r\n                                                             dropdownButtonIcon,\r\n                                                             dropdownButtonLabel,\r\n                                                             dropdownButtonVariant,\r\n                                                             dropdownButtonLoading,\r\n                                                             dropdownButtonAction,\r\n                                                             searchList=[],\r\n                                                             addToSearchList,\r\n                                                             dropdownScrollable\r\n                                                           }) => {\r\n  const containerRef = React.useRef<any>(null);\r\n  const topLevelRef = React.useRef<any>(null);\r\n  const [isOpen, setIsOpen] = React.useState(false);\r\n  const dropdownRef = useClickOutsideRef(()=>setIsOpen(false), [containerRef, topLevelRef]);\r\n\r\n  const isPressingEnter = (e: any) => {\r\n    if (e.key === 'Enter') {\r\n      e.preventDefault();\r\n      e.stopPropagation();\r\n      return true;\r\n    }\r\n    return false;\r\n  };\r\n\r\n  const enteredSearchTerm = (e: any) => {\r\n    addToSearchList && addToSearchList({value:e.target.value});\r\n    enterSearch(e);\r\n  }\r\n\r\n  const dropdownAction = () => {\r\n    if(dropdownButtonAction)\r\n      dropdownButtonAction();    \r\n  }\r\n\r\n  return (\r\n    <>\r\n      <InputWrapper\r\n        disabled={disabled}\r\n        margin={margin}\r\n        ref={topLevelRef}>\r\n        <SearchField id={'id'} size={size}\r\n                     ref={containerRef}\r\n                     searchTerm={searchTerm}\r\n                     disabled={disabled}\r\n                     validationMessage={validationMessage}>\r\n          <SearchBarInput\r\n            placeholder={disabled ? '' : placeholder}\r\n            id={id}\r\n            size={size}\r\n            disabled={disabled}\r\n            setSearchTerm={(term: string) => setSearchTerm(term)}\r\n            searchTerm={searchTerm}\r\n            onKeyDown={onKeyDown}\r\n            enterSearch={enteredSearchTerm}\r\n            focusParentRefs={[containerRef]}\r\n            onClick={()=>setIsOpen(!isOpen)}\r\n            ref={dropdownRef}\r\n          />\r\n          <SearchIconWrapper className={size ? size : ''} aria-label={performSearchLabel}>\r\n            <IconButton id={`${id}_Search`}\r\n                        variant=\"secondary\"\r\n                        shape=\"circular\"\r\n                        action={enterSearch}\r\n                        disabled={disabled}\r\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}>\r\n              <SystemIcons.Search size=\"24px\"/>\r\n            </IconButton>\r\n          </SearchIconWrapper>\r\n          <ClearIconWrapper className={(size ? size : '').concat(!searchTerm ? ' hidden' : '')}>\r\n            <IconButton id={`${id}_Clear`}\r\n                        variant=\"secondary\"\r\n                        shape=\"circular\"\r\n                        action={removeSearch}\r\n                        disabled={disabled}\r\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? removeSearch(e) : null)}>\r\n              <SystemIcons.Clear size=\"24px\"/>\r\n            </IconButton>\r\n          </ClearIconWrapper>\r\n          </SearchField>\r\n\r\n      {showDropdown && <DropdownContent id={'search'}\r\n                                        containerRef={containerRef}\r\n          size={size}\r\n          isButton={false}\r\n          ariaRolesType=\"input\"\r\n          customizationProps={{\r\n            items:searchList,\r\n            action: dropdownAction,\r\n            actionLabel: dropdownButtonLabel,\r\n            actionIcon: dropdownButtonIcon,\r\n            actionVariant: dropdownButtonVariant,\r\n            onValueUpdate:(e)=>{},\r\n            scrollable: dropdownScrollable,\r\n            pinTopItem: true,\r\n            actionLoading: dropdownButtonLoading\r\n          }}\r\n          isOpen={isOpen}\r\n          setIsOpen={setIsOpen}\r\n          filter={''}\r\n          selectedValues={searchTerm ? [searchTerm] : []}\r\n          setSelectedValues={(e)=>setSearchTerm(e[0])}\r\n          messageOnNoResults={''}\r\n          focused={null}\r\n          setFocused={()=>{}}\r\n        />}\r\n\r\n      </InputWrapper>\r\n      {validationMessage && (\r\n        <ErrorMessage className={size || ''}>\r\n          <SystemIcons.TechnicalWarning color={COLORS.critical_400} className={size || ''}/>\r\n          <span>{validationMessage}</span>\r\n        </ErrorMessage>\r\n      )}\r\n    </>\r\n  );\r\n};\r\n\r\nexport default SearchBar;\r\n"],"mappings":"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"}
+{"version":3,"file":"SearchBar.cjs","names":["_react","_interopRequireDefault","require","_index","_icons","_styling","_Button","_SearchBarInput","_SearchField","_styledComponents","_interopRequireWildcard","_Dropdown","_common","_jsxRuntime","_templateObject","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ClearIconWrapper","styled","div","_taggedTemplateLiteral2","SearchBar","_ref","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","validationMessage","onKeyDown","size","margin","showDropdown","dropdownButtonIcon","dropdownButtonLabel","dropdownButtonVariant","dropdownButtonAction","_ref$searchList","searchList","addToSearchList","dropdownScrollable","containerRef","React","useRef","theme","useTheme","topLevelRef","_React$useState","useState","_React$useState2","_slicedToArray2","isOpen","setIsOpen","dropdownRef","useClickOutsideRef","isPressingEnter","key","preventDefault","stopPropagation","enteredSearchTerm","value","target","dropdownAction","jsxs","Fragment","children","InputWrapper","ref","jsx","term","focusParentRefs","onClick","SearchIconWrapper","className","IconButton","concat","variant","shape","action","onKeyPress","SystemIcons","Search","Clear","DropdownContent","isButton","ariaRolesType","customizationProps","items","actionLabel","actionIcon","actionVariant","onValueUpdate","scrollable","pinTopItem","filter","selectedValues","setSelectedValues","messageOnNoResults","focused","setFocused","ErrorMessage","TechnicalWarning","color","COLORS","getColor","propTypes","_propTypes","string","isRequired","func","bool","node","oneOf","array","_default","exports"],"sources":["../../src/InputFields/SearchBar.tsx"],"sourcesContent":["import React from 'react';\r\nimport {COLORS} from '../styles/index';\r\nimport {SystemIcons} from '../icons';\r\nimport {ErrorMessage, InputWrapper, SearchIconWrapper} from './styling';\r\nimport {IconButton} from '../Button';\r\nimport SearchBarInput from './components/SearchBarInput';\r\nimport SearchField from './components/SearchField';\r\nimport {Size} from '../types';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport { DropdownContent, DropdownItem } from '../Dropdown';\r\nimport { useClickOutsideRef } from '../common';\r\n\r\nexport type SearchBarProps = {\r\n  /**\r\n   * Required. The ID of the search bar.\r\n   */\r\n  id: string;\r\n\r\n  /**\r\n   * Optional. The current search term in the search bar.\r\n   */\r\n  searchTerm?: string;\r\n  /**\r\n   * Required. A function to be called when the search term changes.\r\n   * It should take a string representing the new search term.\r\n   */\r\n  setSearchTerm: (term: string) => void;\r\n  /**\r\n   * Required. A function to be called when the enter key is pressed in the search bar.\r\n   * It should take an event object as a parameter.\r\n   */\r\n  enterSearch: (e: any) => void;\r\n  /**\r\n   * Required. A function to be called when the search term is removed.\r\n   * It should take an event object as a parameter.\r\n   */\r\n  removeSearch: (e: any) => void;\r\n  /**\r\n   * Optional. The placeholder text to be displayed in the search bar when it is empty.\r\n   */\r\n  placeholder?: string;\r\n  /**\r\n   * Optional. The label for the search button in the search bar.\r\n   */\r\n  performSearchLabel?: string;\r\n  /**\r\n   * Optional. A boolean indicating whether the search bar is disabled.\r\n   */\r\n  disabled?: boolean;\r\n  /**\r\n   * Optional. The validation message to be displayed when the search bar is in an error state.\r\n   */\r\n  validationMessage?: string;\r\n  /**\r\n   * Optional. A function to be called when a keydown event occurs in the search bar.\r\n   */\r\n  onKeyDown?: (e: React.KeyboardEvent) => void;\r\n  /**\r\n   * Optional. The size of the search bar. Can be 'Small' or 'Medium'.\r\n   */\r\n  size?: Size.Small | Size.Medium;\r\n  /**\r\n   * Optional. The margin of the search bar. Can be any valid CSS margin value.\r\n   */\r\n  margin?: string;\r\n  /**\r\n   * Optional. A boolean indicating whether the dropdown in the search bar should be shown.\r\n   */\r\n  showDropdown?: boolean;\r\n  /**\r\n   * Optional. The icon for the dropdown button in the search bar.\r\n   */\r\n  dropdownButtonIcon?: React.ReactNode;\r\n  /**\r\n   * Optional. The label for the dropdown button in the search bar.\r\n   */  \r\n  dropdownButtonLabel?: string;\r\n  /**\r\n   * Optional. The variant of the dropdown button in the search bar. Can be 'primary', 'secondary', or 'tertiary'.\r\n   */  \r\n  dropdownButtonVariant?: 'primary' | 'secondary' | 'tertiary';\r\n  /**\r\n   * Optional. A function to be called when the dropdown button in the search bar is clicked.\r\n   */  \r\n  dropdownButtonAction?: () => boolean | void | undefined;\r\n  /**\r\n   * Optional. An array of DropdownItem objects representing the items in the dropdown.\r\n   */\r\n  searchList?: DropdownItem[];\r\n  /**\r\n   * Optional. A function to be called when an item is added to the dropdown.\r\n   * It should take a DropdownItem object as a parameter.\r\n   */\r\n  addToSearchList?: (e: DropdownItem) => void;\r\n  /**\r\n   * Optional. A boolean indicating whether the dropdown in the search bar is scrollable.\r\n   */\r\n  dropdownScrollable?: boolean;\r\n};\r\n\r\nconst ClearIconWrapper = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n\r\n  &.hidden {\r\n    display: none !important;\r\n  }\r\n`;\r\n\r\nconst SearchBar: React.FunctionComponent<SearchBarProps> = ({\r\n                                                             id,\r\n                                                             searchTerm,\r\n                                                             setSearchTerm,\r\n                                                             enterSearch,\r\n                                                             removeSearch,\r\n                                                             placeholder,\r\n                                                             performSearchLabel,\r\n                                                             disabled,\r\n                                                             validationMessage,\r\n                                                             onKeyDown,\r\n                                                             size,\r\n                                                             margin,\r\n                                                             showDropdown,\r\n                                                             dropdownButtonIcon,\r\n                                                             dropdownButtonLabel,\r\n                                                             dropdownButtonVariant,\r\n                                                             dropdownButtonAction,\r\n                                                             searchList=[],\r\n                                                             addToSearchList,\r\n                                                             dropdownScrollable\r\n                                                           }) => {\r\n  const containerRef = React.useRef<any>(null);\r\n  const theme = useTheme();\r\n  const topLevelRef = React.useRef<any>(null);\r\n\r\n  const [isOpen, setIsOpen] = React.useState(false);\r\n  const dropdownRef = useClickOutsideRef(()=>setIsOpen(false), [containerRef, topLevelRef]);\r\n\r\n  const isPressingEnter = (e: any) => {\r\n    if (e.key === 'Enter') {\r\n      e.preventDefault();\r\n      e.stopPropagation();\r\n      return true;\r\n    }\r\n    return false;\r\n  };\r\n\r\n  const enteredSearchTerm = (e: any) => {\r\n    addToSearchList && addToSearchList({value:e.target.value});\r\n    enterSearch(e);\r\n  }\r\n\r\n  const dropdownAction = () => {\r\n    if(dropdownButtonAction)\r\n      dropdownButtonAction();    \r\n  }\r\n\r\n  return (\r\n    <>\r\n      <InputWrapper\r\n        disabled={disabled}\r\n        ref={topLevelRef}\r\n        margin={margin}>\r\n        <SearchField id={'id'} size={size}\r\n                     ref={containerRef}\r\n                     searchTerm={searchTerm}\r\n                     disabled={disabled}\r\n                     validationMessage={validationMessage}>\r\n          <SearchBarInput\r\n            placeholder={disabled ? '' : placeholder}\r\n            id={id}\r\n            size={size}\r\n            disabled={disabled}\r\n            setSearchTerm={(term: string) => setSearchTerm(term)}\r\n            searchTerm={searchTerm}\r\n            onKeyDown={onKeyDown}\r\n            enterSearch={enteredSearchTerm}\r\n            focusParentRefs={[containerRef]}\r\n            onClick={()=>setIsOpen(!isOpen)}\r\n            ref={dropdownRef}\r\n          />\r\n          <SearchIconWrapper className={size ? size : ''} aria-label={performSearchLabel}>\r\n            <IconButton id={`${id}_Search`}\r\n                        variant=\"secondary\"\r\n                        shape=\"circular\"\r\n                        action={enterSearch}\r\n                        disabled={disabled}\r\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}>\r\n              <SystemIcons.Search size=\"24px\"/>\r\n            </IconButton>\r\n          </SearchIconWrapper>\r\n          <ClearIconWrapper className={(size ? size : '').concat(!searchTerm ? ' hidden' : '')}>\r\n            <IconButton id={`${id}_Clear`}\r\n                        variant=\"secondary\"\r\n                        shape=\"circular\"\r\n                        action={removeSearch}\r\n                        disabled={disabled}\r\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? removeSearch(e) : null)}>\r\n              <SystemIcons.Clear size=\"24px\"/>\r\n            </IconButton>\r\n          </ClearIconWrapper>\r\n        </SearchField>\r\n\r\n      {showDropdown && <DropdownContent id={'search'}\r\n                                        containerRef={containerRef}\r\n          size={size}\r\n          isButton={false}\r\n          ariaRolesType=\"input\"\r\n          customizationProps={{\r\n            items:searchList,\r\n            action: dropdownAction,\r\n            actionLabel: dropdownButtonLabel,\r\n            actionIcon: dropdownButtonIcon,\r\n            actionVariant: dropdownButtonVariant,\r\n            onValueUpdate:(e)=>{},\r\n            scrollable: dropdownScrollable,\r\n            pinTopItem: true\r\n          }}\r\n          isOpen={isOpen}\r\n          setIsOpen={setIsOpen}\r\n          filter={''}\r\n          selectedValues={searchTerm ? [searchTerm] : []}\r\n          setSelectedValues={(e)=>setSearchTerm(e[0])}\r\n          messageOnNoResults={''}\r\n          focused={null}\r\n          setFocused={()=>{}}\r\n        />}\r\n\r\n      </InputWrapper>\r\n      {validationMessage && (\r\n        <ErrorMessage className={size || ''}>\r\n          <SystemIcons.TechnicalWarning color={COLORS.getColor('critical_400', theme)} className={size || ''}/>\r\n          <span>{validationMessage}</span>\r\n        </ErrorMessage>\r\n      )}\r\n    </>\r\n  );\r\n};\r\n\r\nexport default SearchBar;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/InputFields/SearchBar.d.ts

@@ -2,26 +2,89 @@ import React from 'react';
 import { Size } from '../types';
 import { DropdownItem } from '../Dropdown';
 export type SearchBarProps = {
+    /**
+     * Required. The ID of the search bar.
+     */
     id: string;
+    /**
+     * Optional. The current search term in the search bar.
+     */
     searchTerm?: string;
+    /**
+     * Required. A function to be called when the search term changes.
+     * It should take a string representing the new search term.
+     */
     setSearchTerm: (term: string) => void;
+    /**
+     * Required. A function to be called when the enter key is pressed in the search bar.
+     * It should take an event object as a parameter.
+     */
     enterSearch: (e: any) => void;
+    /**
+     * Required. A function to be called when the search term is removed.
+     * It should take an event object as a parameter.
+     */
     removeSearch: (e: any) => void;
+    /**
+     * Optional. The placeholder text to be displayed in the search bar when it is empty.
+     */
     placeholder?: string;
+    /**
+     * Optional. The label for the search button in the search bar.
+     */
     performSearchLabel?: string;
+    /**
+     * Optional. A boolean indicating whether the search bar is disabled.
+     */
     disabled?: boolean;
+    /**
+     * Optional. The validation message to be displayed when the search bar is in an error state.
+     */
     validationMessage?: string;
+    /**
+     * Optional. A function to be called when a keydown event occurs in the search bar.
+     */
     onKeyDown?: (e: React.KeyboardEvent) => void;
+    /**
+     * Optional. The size of the search bar. Can be 'Small' or 'Medium'.
+     */
     size?: Size.Small | Size.Medium;
+    /**
+     * Optional. The margin of the search bar. Can be any valid CSS margin value.
+     */
     margin?: string;
+    /**
+     * Optional. A boolean indicating whether the dropdown in the search bar should be shown.
+     */
     showDropdown?: boolean;
+    /**
+     * Optional. The icon for the dropdown button in the search bar.
+     */
     dropdownButtonIcon?: React.ReactNode;
+    /**
+     * Optional. The label for the dropdown button in the search bar.
+     */
     dropdownButtonLabel?: string;
-    dropdownButtonLoading?: boolean;
+    /**
+     * Optional. The variant of the dropdown button in the search bar. Can be 'primary', 'secondary', or 'tertiary'.
+     */
     dropdownButtonVariant?: 'primary' | 'secondary' | 'tertiary';
+    /**
+     * Optional. A function to be called when the dropdown button in the search bar is clicked.
+     */
     dropdownButtonAction?: () => boolean | void | undefined;
+    /**
+     * Optional. An array of DropdownItem objects representing the items in the dropdown.
+     */
     searchList?: DropdownItem[];
+    /**
+     * Optional. A function to be called when an item is added to the dropdown.
+     * It should take a DropdownItem object as a parameter.
+     */
     addToSearchList?: (e: DropdownItem) => void;
+    /**
+     * Optional. A boolean indicating whether the dropdown in the search bar is scrollable.
+     */
     dropdownScrollable?: boolean;
 };
 declare const SearchBar: React.FunctionComponent<SearchBarProps>;

package/dist/InputFields/SearchBar.js

@@ -9,7 +9,7 @@ import { ErrorMessage, InputWrapper, SearchIconWrapper } from './styling';
 import { IconButton } from '../Button';
 import SearchBarInput from './components/SearchBarInput';
 import SearchField from './components/SearchField';
-import styled from 'styled-components';
+import styled, { useTheme } from 'styled-components';
 import { DropdownContent } from '../Dropdown';
 import { useClickOutsideRef } from '../common';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -33,13 +33,13 @@ var SearchBar = function SearchBar(_ref) {
     dropdownButtonIcon = _ref.dropdownButtonIcon,
     dropdownButtonLabel = _ref.dropdownButtonLabel,
     dropdownButtonVariant = _ref.dropdownButtonVariant,
-    dropdownButtonLoading = _ref.dropdownButtonLoading,
     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 theme = useTheme();
   var topLevelRef = React.useRef(null);
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -68,8 +68,8 @@ var SearchBar = function SearchBar(_ref) {
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs(InputWrapper, {
       disabled: disabled,
-      margin: margin,
       ref: topLevelRef,
+      margin: margin,
       children: [/*#__PURE__*/_jsxs(SearchField, {
         id: 'id',
         size: size,
@@ -139,8 +139,7 @@ var SearchBar = function SearchBar(_ref) {
           actionVariant: dropdownButtonVariant,
           onValueUpdate: function onValueUpdate(e) {},
           scrollable: dropdownScrollable,
-          pinTopItem: true,
-          actionLoading: dropdownButtonLoading
+          pinTopItem: true
         },
         isOpen: isOpen,
         setIsOpen: setIsOpen,
@@ -156,7 +155,7 @@ var SearchBar = function SearchBar(_ref) {
     }), validationMessage && /*#__PURE__*/_jsxs(ErrorMessage, {
       className: size || '',
       children: [/*#__PURE__*/_jsx(SystemIcons.TechnicalWarning, {
-        color: COLORS.critical_400,
+        color: COLORS.getColor('critical_400', theme),
         className: size || ''
       }), /*#__PURE__*/_jsx("span", {
         children: validationMessage
@@ -179,7 +178,6 @@ SearchBar.propTypes = {
   showDropdown: _pt.bool,
   dropdownButtonIcon: _pt.node,
   dropdownButtonLabel: _pt.string,
-  dropdownButtonLoading: _pt.bool,
   dropdownButtonVariant: _pt.oneOf(['primary', 'secondary', 'tertiary']),
   dropdownButtonAction: _pt.func,
   searchList: _pt.array,