@laerdal/life-react-components 5.0.8-dev.1.full → 5.0.8-dev.2.full

package/dist/InputFields/RichTextField.js

@@ -2,7 +2,7 @@ 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 = ["readOnly", "disabled", "validationMessage", "note", "size", "state", "resizable", "modules", "formats"];
+const _excluded = ["readOnly", "disabled", "validationMessage", "note", "size", "state", "resizable", "modules", "formats"];
 var _templateObject;
 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; }
@@ -14,37 +14,9 @@ import { Size, States } from "../types";
 import { COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, scrollBarStyling } from "../styles";
 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"])), 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) {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const 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"])), props => COLORS.getColor('neutral_400', props.theme), props => COLORS.getColor('correct_500', props.theme), props => COLORS.getColor('critical_500', props.theme), props => COLORS.getColor('primary_700', props.theme), props => COLORS.getColor('primary_800', props.theme), props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme)), props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme)), props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme)), props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme)), props => COLORS.getColor('neutral_200', props.theme), scrollBarStyling(Size.Small), readOnlyState, props => COLORS.getColor('neutral_100', props.theme), props => COLORS.getColor('neutral_300', props.theme), props => COLORS.getColor('neutral_300', props.theme));
+export let RichTextFieldFormats = /*#__PURE__*/function (RichTextFieldFormats) {
   RichTextFieldFormats["Background"] = "background";
   RichTextFieldFormats["Bold"] = "bold";
   RichTextFieldFormats["Color"] = "color";
@@ -66,34 +38,34 @@ export var RichTextFieldFormats;
   RichTextFieldFormats["Formula"] = "formula";
   RichTextFieldFormats["Image"] = "image";
   RichTextFieldFormats["Video"] = "video";
-})(RichTextFieldFormats || (RichTextFieldFormats = {}));
-var defaultToolBarOptions = [[{
+  return RichTextFieldFormats;
+}({});
+const defaultToolBarOptions = [[{
   header: [1, 2, 3, false]
 }], ['bold', 'italic', 'underline', 'strike'], [{
   'list': 'ordered'
 }, {
   'list': 'bullet'
 }], ['link'], ['clean']];
-export var RichTextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+export const RichTextField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   var _modules$toolbar;
-  var readOnly = _ref.readOnly,
-    disabled = _ref.disabled,
-    validationMessage = _ref.validationMessage,
-    note = _ref.note,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? Size.Medium : _ref$size,
-    state = _ref.state,
-    resizable = _ref.resizable,
-    modules = _ref.modules,
-    formats = _ref.formats,
+  let {
+      readOnly,
+      disabled,
+      validationMessage,
+      note,
+      size = Size.Medium,
+      state,
+      resizable,
+      modules,
+      formats
+    } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var theme = useTheme();
-  var m = _objectSpread(_objectSpread({}, modules !== null && modules !== void 0 ? modules : {}), {}, {
+  const theme = useTheme();
+  let 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
   });
-  var f = formats !== null && formats !== void 0 ? formats : Object.values(RichTextFieldFormats).filter(function (a) {
-    return a !== RichTextFieldFormats.Image && a !== RichTextFieldFormats.Video && a !== RichTextFieldFormats.Formula;
-  });
+  let f = formats !== null && formats !== void 0 ? formats : Object.values(RichTextFieldFormats).filter(a => a !== RichTextFieldFormats.Image && a !== RichTextFieldFormats.Video && a !== RichTextFieldFormats.Formula);
   return /*#__PURE__*/_jsxs(RichTextFieldContainer, {
     className: "".concat(resizable ? 'resizable' : '', " ").concat(size, " ").concat(state || '', " ").concat(readOnly ? 'readonly' : '', "  ").concat(disabled ? 'disabled' : ''),
     children: [/*#__PURE__*/_jsx(ReactQuill, _objectSpread({

package/dist/InputFields/RichTextField.js.map

@@ -1 +1 @@
-{"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';\nimport ReactQuill, {Range, UnprivilegedEditor} from \"react-quill\";\nimport {TextFieldNote} from \"./types\";\nimport styled, { useTheme } from \"styled-components\";\nimport {NoteMessage, readOnlyState, ValidationMessage} from \"./styling\";\nimport {Size, States} from \"../types\";\nimport {COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, scrollBarStyling} from \"../styles\";\nimport {CheckMark, TechnicalWarning} from \"../icons/systemicons\";\nimport {Sources, StringMap} from \"quill\";\nimport 'react-quill/dist/quill.snow.css';\n\nexport const RichTextFieldContainer = styled.div`\n  .quill {\n    width: 100%;\n    margin-bottom: 4px;\n    overflow: hidden;\n\n    box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_400', props.theme)};\n    border-radius: 4px;\n  }\n\n  .quill.valid {\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('correct_500', props.theme)};\n  }\n\n  .quill.invalid {\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('critical_500', props.theme)};\n  }\n\n  .quill:hover {\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('primary_700', props.theme)};\n  }\n\n  .quill:focus-within {\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('primary_800', props.theme)};\n  }\n\n  .ql-editor,\n  .ql-editor p{\n    ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\n  }\n\n  .ql-editor.ql-blank::before {\n    ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}\n  }\n\n  &.medium {\n    .ql-editor,\n    .ql-editor p{\n      ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\n    }\n\n    .ql-editor.ql-blank::before {\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}\n    }\n  }\n\n  .ql-toolbar.ql-snow {\n    border: none;\n    padding: 8px 7px;\n    margin: 0 1px;\n    border-bottom: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\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    ${scrollBarStyling(Size.Small)}\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      ${readOnlyState}\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    .quill {\n      pointer-events: none;\n      box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_100', props.theme)};\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\n\n      .ql-editor.ql-blank::before {\n        color: ${props => COLORS.getColor('neutral_300', props.theme)};\n      }\n    }\n  }\n`;\n\nexport enum RichTextFieldFormats {\n  Background = 'background',\n  Bold = 'bold',\n  Color = 'color',\n  Font = 'font',\n  Code = 'code',\n  Italic = 'italic',\n  Link = 'link',\n  Size = 'size',\n  Strike = 'strike',\n  Script = 'script',\n  Underline = 'underline',\n  Blockquote = 'blockquote',\n  Header = 'header',\n  Indent = 'indent',\n  List = 'list',\n  Align = 'align',\n  Direction = 'direction',\n  CodeBlock = 'code-block',\n  Formula = 'formula',\n  Image = 'image',\n  Video = 'video'\n}\n\nconst defaultToolBarOptions = [\n  [{header: [1, 2, 3, false]}],\n  ['bold', 'italic', 'underline', 'strike'],\n  [{'list': 'ordered'}, {'list': 'bullet'}],\n  ['link'],\n  ['clean']\n];\n\nexport interface RichTextFieldProps {\n  /**\n   * Optional. The ID of the rich text field.\n   */\n  id?: string;\n\n  /**\n   * Optional. The CSS class name of the rich text field.\n   */\n  className?: string;\n\n  /**\n   * Optional. The placeholder text to be displayed in the rich text field when it is empty.\n   */\n  placeholder?: string;\n\n  /**\n   * Optional. A boolean indicating whether the rich text field is read-only.\n   */\n  readOnly?: boolean;\n\n  /**\n   * Optional. A boolean indicating whether the rich text field is disabled.\n   */\n  disabled?: boolean;\n\n  /**\n   * Optional. A boolean indicating whether the rich text field is resizable.\n   */\n  resizable?: boolean;\n\n  /**\n   * Optional. An object containing the modules to be used by the rich text field.\n   */\n  modules?: StringMap;\n\n  /**\n   * Optional. An array of formats to be used by the rich text field.\n   */\n  formats?: RichTextFieldFormats[];\n\n  /**\n   * Optional. A function to be called when the rich text field gains focus.\n   */\n  onFocus?(selection: Range, source: Sources, editor: UnprivilegedEditor): void;\n\n  /**\n   * Optional. A function to be called when the rich text field loses focus.\n   */\n  onBlur?(previousSelection: Range, source: Sources, editor: UnprivilegedEditor): void;\n\n  /**\n   * Optional. A function to be called when a keydown event occurs in the rich text field.\n   */\n  onKeyDown?: React.EventHandler<any>;\n\n  /**\n   * Optional. A function to be called when a keypress event occurs in the rich text field.\n   */\n  onKeyPress?: React.EventHandler<any>;\n\n  /**\n   * Optional. A function to be called when a keyup event occurs in the rich text field.\n   */\n  onKeyUp?: React.EventHandler<any>;\n\n  /**\n   * Required. The current value of the rich text field.\n   */\n  value: any;\n\n  /**\n   * Required. A function to be called when the value of the rich text field changes.\n   */\n  onChange: (value: any) => void;\n\n  /**\n   * Optional. The validation message to be displayed when the rich text field is in an error state.\n   */\n  validationMessage?: string;\n\n  /**\n   * Optional. A note to be displayed below the rich text field.\n   */\n  note?: TextFieldNote;\n\n  /**\n   * Optional. The size of the rich text field. Can be 'Small' or 'Medium'.\n   */\n  size?: Size.Small | Size.Medium;\n\n  /**\n   * Optional. The state of the rich text field. Can be 'Invalid' or 'Valid'.\n   */\n  state?: States.Invalid | States.Valid;\n}\n\nexport const RichTextField = React.forwardRef<any, RichTextFieldProps>(({\n                                                                          readOnly,\n                                                                          disabled,\n                                                                          validationMessage,\n                                                                          note,\n                                                                          size = Size.Medium,\n                                                                          state,\n                                                                          resizable,\n                                                                          modules,\n                                                                          formats,\n                                                                          ...rest\n                                                                        }: RichTextFieldProps, ref) => {\n\n  const theme = useTheme();\n  let m = {...(modules ?? {}), toolbar: modules?.toolbar ?? defaultToolBarOptions};\n  let f = formats ?? Object.values(RichTextFieldFormats).filter(a => a !== RichTextFieldFormats.Image && a !== RichTextFieldFormats.Video && a !== RichTextFieldFormats.Formula);\n\n  return (\n    <RichTextFieldContainer\n      className={`${resizable ? 'resizable' : ''} ${size} ${state || ''} ${readOnly ? 'readonly' : ''}  ${disabled ? 'disabled' : ''}`}>\n      <ReactQuill ref={ref}\n                  readOnly={readOnly || disabled}\n                  modules={m}\n                  theme={'snow'}\n                  formats={f}\n                  {...rest}\n      />\n      {validationMessage && (\n        <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n          {\n            state === States.Valid\n              ? <CheckMark color={COLORS.getColor('correct_400', theme)}/>\n              : <TechnicalWarning color={COLORS.getColor('critical_400', theme)}/>\n          }\n          <span>{validationMessage}</span>\n        </ValidationMessage>\n      )}\n      {note && !disabled && (\n        <NoteMessage className={size}>\n          {note.icon}\n          <span>{note.message}</span>\n        </NoteMessage>\n      )}\n    </RichTextFieldContainer>\n  )\n});"],"mappings":"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","ignoreList":[]}
+{"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","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,12 +1,10 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+exports.default = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
@@ -21,42 +19,38 @@ var _Dropdown = require("../Dropdown");
 var _common = require("../common");
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject;
-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,
-    _setSearchTerm = _ref.setSearchTerm,
-    enterSearch = _ref.enterSearch,
-    removeSearch = _ref.removeSearch,
-    placeholder = _ref.placeholder,
-    performSearchLabel = _ref.performSearchLabel,
-    disabled = _ref.disabled,
-    validationMessage = _ref.validationMessage,
-    onKeyDown = _ref.onKeyDown,
-    size = _ref.size,
-    margin = _ref.margin,
-    showDropdown = _ref.showDropdown,
-    dropdownButtonIcon = _ref.dropdownButtonIcon,
-    dropdownButtonLabel = _ref.dropdownButtonLabel,
-    dropdownButtonVariant = _ref.dropdownButtonVariant,
-    dropdownButtonAction = _ref.dropdownButtonAction,
-    _ref$searchList = _ref.searchList,
-    searchList = _ref$searchList === void 0 ? [] : _ref$searchList,
-    addToSearchList = _ref.addToSearchList,
-    dropdownScrollable = _ref.dropdownScrollable;
-  var containerRef = _react["default"].useRef(null);
-  var 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 () {
-    return setIsOpen(false);
-  }, [containerRef, topLevelRef]);
-  var isPressingEnter = function isPressingEnter(e) {
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (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; }
+const 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"])));
+const SearchBar = _ref => {
+  let {
+    id,
+    searchTerm,
+    setSearchTerm,
+    enterSearch,
+    removeSearch,
+    placeholder,
+    performSearchLabel,
+    disabled,
+    validationMessage,
+    onKeyDown,
+    size,
+    margin,
+    showDropdown,
+    dropdownButtonIcon,
+    dropdownButtonLabel,
+    dropdownButtonVariant,
+    dropdownButtonAction,
+    searchList = [],
+    addToSearchList,
+    dropdownScrollable
+  } = _ref;
+  const containerRef = _react.default.useRef(null);
+  const theme = (0, _styledComponents.useTheme)();
+  const topLevelRef = _react.default.useRef(null);
+  const [isOpen, setIsOpen] = _react.default.useState(false);
+  const dropdownRef = (0, _common.useClickOutsideRef)(() => setIsOpen(false), [containerRef, topLevelRef]);
+  const isPressingEnter = e => {
     if (e.key === 'Enter') {
       e.preventDefault();
       e.stopPropagation();
@@ -64,13 +58,13 @@ var SearchBar = function SearchBar(_ref) {
     }
     return false;
   };
-  var enteredSearchTerm = function enteredSearchTerm(e) {
+  const enteredSearchTerm = e => {
     addToSearchList && addToSearchList({
       value: e.target.value
     });
     enterSearch(e);
   };
-  var dropdownAction = function dropdownAction() {
+  const dropdownAction = () => {
     if (dropdownButtonAction) dropdownButtonAction();
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
@@ -78,28 +72,24 @@ var SearchBar = function SearchBar(_ref) {
       $disabled: disabled,
       ref: topLevelRef,
       $margin: margin,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_SearchField["default"], {
+      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,
           disabled: disabled,
-          setSearchTerm: function setSearchTerm(term) {
-            return _setSearchTerm(term);
-          },
+          setSearchTerm: term => setSearchTerm(term),
           searchTerm: searchTerm,
           onKeyDown: onKeyDown,
           enterSearch: enteredSearchTerm,
           focusParentRefs: [containerRef],
-          onClick: function onClick() {
-            return setIsOpen(!isOpen);
-          },
+          onClick: () => setIsOpen(!isOpen),
           ref: dropdownRef
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styling.SearchIconWrapper, {
           className: size ? size : '',
@@ -110,9 +100,7 @@ var SearchBar = function SearchBar(_ref) {
             shape: "circular",
             action: enterSearch,
             disabled: disabled,
-            onKeyPress: function onKeyPress(e) {
-              return isPressingEnter(e) ? enterSearch(e) : null;
-            },
+            onKeyPress: e => isPressingEnter(e) ? enterSearch(e) : null,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.Search, {
               size: "24px"
             })
@@ -125,9 +113,7 @@ var SearchBar = function SearchBar(_ref) {
             shape: "circular",
             action: removeSearch,
             disabled: disabled,
-            onKeyPress: function onKeyPress(e) {
-              return isPressingEnter(e) ? removeSearch(e) : null;
-            },
+            onKeyPress: e => isPressingEnter(e) ? removeSearch(e) : null,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.Clear, {
               size: "24px"
             })
@@ -145,7 +131,7 @@ var SearchBar = function SearchBar(_ref) {
           actionLabel: dropdownButtonLabel,
           actionIcon: dropdownButtonIcon,
           actionVariant: dropdownButtonVariant,
-          onValueUpdate: function onValueUpdate(e) {},
+          onValueUpdate: e => {},
           scrollable: dropdownScrollable,
           pinTopItem: true
         },
@@ -153,12 +139,10 @@ var SearchBar = function SearchBar(_ref) {
         setIsOpen: setIsOpen,
         filter: '',
         selectedValues: searchTerm ? [searchTerm] : [],
-        setSelectedValues: function setSelectedValues(e) {
-          return _setSearchTerm(e[0]);
-        },
+        setSelectedValues: e => setSearchTerm(e[0]),
         messageOnNoResults: '',
         focused: null,
-        setFocused: function setFocused() {}
+        setFocused: () => {}
       })]
     }), validationMessage && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styling.ErrorMessage, {
       className: size || '',
@@ -172,26 +156,25 @@ 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,
-  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;
+var _default = exports.default = SearchBar;
 //# sourceMappingURL=SearchBar.cjs.map

package/dist/InputFields/SearchBar.cjs.map

@@ -1 +1 @@
-{"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","$disabled","ref","$margin","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';\nimport {COLORS} from '../styles/index';\nimport {SystemIcons} from '../icons';\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, { useTheme } from 'styled-components';\nimport { DropdownContent, DropdownItem } from '../Dropdown';\nimport { useClickOutsideRef } from '../common';\n\nexport type SearchBarProps = {\n  /**\n   * Required. The ID of the search bar.\n   */\n  id: string;\n\n  /**\n   * Optional. The current search term in the search bar.\n   */\n  searchTerm?: string;\n  /**\n   * Required. A function to be called when the search term changes.\n   * It should take a string representing the new search term.\n   */\n  setSearchTerm: (term: string) => void;\n  /**\n   * Required. A function to be called when the enter key is pressed in the search bar.\n   * It should take an event object as a parameter.\n   */\n  enterSearch: (e: any) => void;\n  /**\n   * Required. A function to be called when the search term is removed.\n   * It should take an event object as a parameter.\n   */\n  removeSearch: (e: any) => void;\n  /**\n   * Optional. The placeholder text to be displayed in the search bar when it is empty.\n   */\n  placeholder?: string;\n  /**\n   * Optional. The label for the search button in the search bar.\n   */\n  performSearchLabel?: string;\n  /**\n   * Optional. A boolean indicating whether the search bar is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Optional. The validation message to be displayed when the search bar is in an error state.\n   */\n  validationMessage?: string;\n  /**\n   * Optional. A function to be called when a keydown event occurs in the search bar.\n   */\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  /**\n   * Optional. The size of the search bar. Can be 'Small' or 'Medium'.\n   */\n  size?: Size.Small | Size.Medium;\n  /**\n   * Optional. The margin of the search bar. Can be any valid CSS margin value.\n   */\n  margin?: string;\n  /**\n   * Optional. A boolean indicating whether the dropdown in the search bar should be shown.\n   */\n  showDropdown?: boolean;\n  /**\n   * Optional. The icon for the dropdown button in the search bar.\n   */\n  dropdownButtonIcon?: React.ReactNode;\n  /**\n   * Optional. The label for the dropdown button in the search bar.\n   */  \n  dropdownButtonLabel?: string;\n  /**\n   * Optional. The variant of the dropdown button in the search bar. Can be 'primary', 'secondary', or 'tertiary'.\n   */  \n  dropdownButtonVariant?: 'primary' | 'secondary' | 'tertiary';\n  /**\n   * Optional. A function to be called when the dropdown button in the search bar is clicked.\n   */  \n  dropdownButtonAction?: () => boolean | void | undefined;\n  /**\n   * Optional. An array of DropdownItem objects representing the items in the dropdown.\n   */\n  searchList?: DropdownItem[];\n  /**\n   * Optional. A function to be called when an item is added to the dropdown.\n   * It should take a DropdownItem object as a parameter.\n   */\n  addToSearchList?: (e: DropdownItem) => void;\n  /**\n   * Optional. A boolean indicating whether the dropdown in the search bar is scrollable.\n   */\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<SearchBarProps> = ({\n                                                             id,\n                                                             searchTerm,\n                                                             setSearchTerm,\n                                                             enterSearch,\n                                                             removeSearch,\n                                                             placeholder,\n                                                             performSearchLabel,\n                                                             disabled,\n                                                             validationMessage,\n                                                             onKeyDown,\n                                                             size,\n                                                             margin,\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  const theme = useTheme();\n  const topLevelRef = React.useRef<any>(null);\n\n  const [isOpen, setIsOpen] = React.useState(false);\n  const dropdownRef = useClickOutsideRef(()=>setIsOpen(false), [containerRef, topLevelRef]);\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        ref={topLevelRef}\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              <SystemIcons.Search 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              <SystemIcons.Clear size=\"24px\"/>\n            </IconButton>\n          </ClearIconWrapper>\n        </SearchField>\n\n      {showDropdown && <DropdownContent id={'search'}\n                                        containerRef={containerRef}\n          size={size}\n          isButton={false}\n          ariaRolesType=\"input\"\n          customizationProps={{\n            items:searchList,\n            action: dropdownAction,\n            actionLabel: dropdownButtonLabel,\n            actionIcon: dropdownButtonIcon,\n            actionVariant: dropdownButtonVariant,\n            onValueUpdate:(e)=>{},\n            scrollable: dropdownScrollable,\n            pinTopItem: true\n          }}\n          isOpen={isOpen}\n          setIsOpen={setIsOpen}\n          filter={''}\n          selectedValues={searchTerm ? [searchTerm] : []}\n          setSelectedValues={(e)=>setSearchTerm(e[0])}\n          messageOnNoResults={''}\n          focused={null}\n          setFocused={()=>{}}\n        />}\n\n      </InputWrapper>\n      {validationMessage && (\n        <ErrorMessage className={size || ''}>\n          <SystemIcons.TechnicalWarning color={COLORS.getColor('critical_400', theme)} className={size || ''}/>\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n};\n\nexport default SearchBar;\n"],"mappings":"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","ignoreList":[]}
+{"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","default","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","searchList","addToSearchList","dropdownScrollable","containerRef","React","useRef","theme","useTheme","topLevelRef","isOpen","setIsOpen","useState","dropdownRef","useClickOutsideRef","isPressingEnter","key","preventDefault","stopPropagation","enteredSearchTerm","value","target","dropdownAction","jsxs","Fragment","children","InputWrapper","$disabled","ref","$margin","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":[]}