@laerdal/life-react-components 1.10.3-dev.2 → 1.10.3-dev.5

package/dist/InputFields/TextField.js

@@ -1,4 +1,12 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _pt from "prop-types";
+var _excluded = ["id", "disabled", "readOnly", "onChange", "value", "validationMessage", "type", "autoComplete", "placeholder", "required", "pattern", "maxLength", "withoutBorder", "state", "size", "margin", "note", "className"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 import * as React from 'react';
 import { CheckMark, TechnicalWarning } from '../icons/systemicons/SystemIcons';
 import { COLORS } from '../styles';
@@ -8,8 +16,7 @@ import { useFocusVisibleRef } from '../common';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-
-var TextField = function TextField(_ref) {
+var TextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var id = _ref.id,
       disabled = _ref.disabled,
       readOnly = _ref.readOnly,
@@ -27,8 +34,15 @@ var TextField = function TextField(_ref) {
       size = _ref.size,
       _ref$margin = _ref.margin,
       margin = _ref$margin === void 0 ? '4px 0' : _ref$margin,
-      note = _ref.note;
+      note = _ref.note,
+      className = _ref.className,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
   var elementRef = useFocusVisibleRef();
+  React.useImperativeHandle(ref, function () {
+    return elementRef.current;
+  }, [elementRef]);
+  var cls = "".concat(state || (validationMessage ? States.Invalid : ''), " ").concat(size || '');
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsxs(InputWrapper, {
       readOnly: readOnly,
@@ -39,12 +53,12 @@ var TextField = function TextField(_ref) {
           e.preventDefault();
         }
       },
-      children: [/*#__PURE__*/_jsx(InputFieldStyling, {
+      children: [/*#__PURE__*/_jsx(InputFieldStyling, _objectSpread({
         id: id,
         ref: elementRef,
         type: type || 'text',
         value: value,
-        className: "".concat(state || (validationMessage ? States.Invalid : ''), " ").concat(size || ''),
+        className: cls,
         tabIndex: readOnly || disabled ? -1 : 0,
         autoComplete: autoComplete,
         placeholder: disabled ? undefined : placeholder,
@@ -60,7 +74,7 @@ var TextField = function TextField(_ref) {
         pattern: pattern,
         maxLength: maxLength,
         withoutBorder: withoutBorder
-      }), validationMessage && /*#__PURE__*/_jsxs(ValidationMessage, {
+      }, rest)), validationMessage && /*#__PURE__*/_jsxs(ValidationMessage, {
         className: size || '',
         type: state !== null && state !== void 0 ? state : States.Invalid,
         children: [state === States.Valid ? /*#__PURE__*/_jsx(CheckMark, {
@@ -78,10 +92,9 @@ var TextField = function TextField(_ref) {
       })]
     })
   });
-};
-
+});
 TextField.propTypes = {
-  id: _pt.string.isRequired,
+  id: _pt.string,
   disabled: _pt.bool,
   readOnly: _pt.bool,
   onChange: _pt.func,

package/dist/InputFields/TextField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/TextField.tsx"],"names":["React","CheckMark","TechnicalWarning","COLORS","States","InputFieldStyling","InputWrapper","NoteMessage","ValidationMessage","useFocusVisibleRef","TextField","id","disabled","readOnly","onChange","value","validationMessage","type","autoComplete","placeholder","required","pattern","maxLength","withoutBorder","state","size","margin","note","elementRef","e","preventDefault","Invalid","undefined","target","Valid","correct_400","critical_400","icon","message"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { CheckMark, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { COLORS } from '../styles';\nimport { Size, States } from '../types';\nimport { ErrorMessage, InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage } from './styling';\nimport { useFocusVisibleRef } from '../common';\nimport { TextFieldNote } from './types';\n\ntype TextFieldProps = {\n  id: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  onChange?: (text: string) => void;\n  value?: string;\n  validationMessage?: string;\n  type?: string;\n  state?: States.Invalid | States.Valid;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  pattern?: string;\n  maxLength?: number;\n  withoutBorder?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  note?: TextFieldNote;\n};\n\nconst TextField = ({\n  id,\n  disabled,\n  readOnly,\n  onChange,\n  value,\n  validationMessage,\n  type,\n  autoComplete,\n  placeholder,\n  required,\n  pattern,\n  maxLength,\n  withoutBorder,\n  state,\n  size,\n  margin = '4px 0',\n  note,\n}: TextFieldProps) => {\n  const elementRef = useFocusVisibleRef();\n\n  return (\n    <>\n      <InputWrapper\n        readOnly={readOnly}\n        disabled={disabled}\n        margin={margin}\n        onClick={(e: any) => {\n          if (disabled || readOnly) {\n            e.preventDefault();\n          }\n        }}>\n        <InputFieldStyling\n          id={id}\n          ref={elementRef}\n          type={type || 'text'}\n          value={value}\n          className={`${state || (validationMessage ? States.Invalid : '')} ${size || ''}`}\n          tabIndex={readOnly || disabled ? -1 : 0}\n          autoComplete={autoComplete}\n          placeholder={disabled ? undefined : placeholder}\n          disabled={disabled}\n          readOnly={readOnly}\n          onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n          activeErrorMessage={!!validationMessage && state !== States.Valid}\n          required={required}\n          pattern={pattern}\n          maxLength={maxLength}\n          withoutBorder={withoutBorder}\n        />\n        {validationMessage && (\n          <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n            {state === States.Valid ? <CheckMark color={COLORS.correct_400} /> : <TechnicalWarning color={COLORS.critical_400} />}\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      </InputWrapper>\n    </>\n  );\n};\n\nexport default TextField;\n"],"file":"TextField.js"}
+{"version":3,"sources":["../../src/InputFields/TextField.tsx"],"names":["React","CheckMark","TechnicalWarning","COLORS","States","InputFieldStyling","InputWrapper","NoteMessage","ValidationMessage","useFocusVisibleRef","TextField","forwardRef","ref","id","disabled","readOnly","onChange","value","validationMessage","type","autoComplete","placeholder","required","pattern","maxLength","withoutBorder","state","size","margin","note","className","rest","elementRef","useImperativeHandle","current","cls","Invalid","e","preventDefault","undefined","target","Valid","correct_400","critical_400","icon","message"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {CheckMark, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {COLORS} from '../styles';\nimport {Size, States} from '../types';\nimport {ErrorMessage, InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage} from './styling';\nimport {useFocusVisibleRef} from '../common';\nimport {TextFieldNote} from './types';\n\ntype TextFieldProps =\n  Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'disabled' | 'id' | 'type' | 'readOnly' | 'autoComplete' | 'pattern' | 'maxLength'>\n  & {\n  id?: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  onChange?: (text: string) => void;\n  value?: string;\n  validationMessage?: string;\n  type?: string;\n  state?: States.Invalid | States.Valid;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  pattern?: string;\n  maxLength?: number;\n  withoutBorder?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  note?: TextFieldNote;\n};\n\nconst TextField = React.forwardRef(({\n                                      id,\n                                      disabled,\n                                      readOnly,\n                                      onChange,\n                                      value,\n                                      validationMessage,\n                                      type,\n                                      autoComplete,\n                                      placeholder,\n                                      required,\n                                      pattern,\n                                      maxLength,\n                                      withoutBorder,\n                                      state,\n                                      size,\n                                      margin = '4px 0',\n                                      note,\n                                      className,\n                                      ...rest\n                                    }: TextFieldProps, ref) => {\n  const elementRef = useFocusVisibleRef();\n\n  React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\n\n  const cls = `${state || (validationMessage ? States.Invalid : '')} ${size || ''}`;\n\n  return (\n    <>\n      <InputWrapper\n        readOnly={readOnly}\n        disabled={disabled}\n        margin={margin}\n        onClick={(e: any) => {\n          if (disabled || readOnly) {\n            e.preventDefault();\n          }\n        }}>\n        <InputFieldStyling\n          id={id}\n          ref={elementRef}\n          type={type || 'text'}\n          value={value}\n          className={cls}\n          tabIndex={readOnly || disabled ? -1 : 0}\n          autoComplete={autoComplete}\n          placeholder={disabled ? undefined : placeholder}\n          disabled={disabled}\n          readOnly={readOnly}\n          onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n          activeErrorMessage={!!validationMessage && state !== States.Valid}\n          required={required}\n          pattern={pattern}\n          maxLength={maxLength}\n          withoutBorder={withoutBorder}\n          {...rest}\n        />\n        {validationMessage && (\n          <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n            {state === States.Valid ? <CheckMark color={COLORS.correct_400}/> :\n              <TechnicalWarning color={COLORS.critical_400}/>}\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      </InputWrapper>\n    </>\n  );\n});\n\nexport default TextField;\n"],"file":"TextField.js"}

package/dist/InputFields/Textarea.cjs

@@ -9,6 +9,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var React = _interopRequireWildcard(require("react"));
@@ -25,12 +29,18 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _excluded = ["id", "placeholder", "state", "value", "size", "disabled", "validationMessage", "onChange", "margin", "autoHeight", "note", "required", "className"];
+
 var _templateObject, _templateObject2;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 // Add component-specific styles.
 var TextareaWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  ", "\n"])), function (props) {
   return props.margin ? "margin: ".concat(props.margin, ";") : '';
@@ -40,7 +50,7 @@ var TextArea = _styledComponents.default.textarea(_templateObject2 || (_template
   return props.autoHeight ? 'none' : '';
 }, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.black), (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.black), (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_500), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.black), _styles.COLORS.primary_700, _styles.COLORS.primary_800, _styles.COLORS.critical_500, _styles.COLORS.correct_500, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_500));
 
-var Textarea = function Textarea(_ref) {
+var Textarea = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var id = _ref.id,
       placeholder = _ref.placeholder,
       state = _ref.state,
@@ -52,14 +62,18 @@ var Textarea = function Textarea(_ref) {
       margin = _ref.margin,
       autoHeight = _ref.autoHeight,
       note = _ref.note,
-      required = _ref.required;
+      required = _ref.required,
+      className = _ref.className,
+      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var cls = "".concat(size, " ").concat(state || (validationMessage ? _types.States.Invalid : ''), " ").concat(className || '');
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(TextareaWrapper, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TextArea, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TextArea, _objectSpread({
       id: id,
+      ref: ref,
       value: value,
       placeholder: disabled ? undefined : placeholder,
       autoHeight: autoHeight,
-      className: "".concat(size, " ").concat(state || (validationMessage ? _types.States.Invalid : '')),
+      className: cls,
       disabled: disabled,
       onChange: function onChange(e) {
         var _e$target;
@@ -67,7 +81,7 @@ var Textarea = function Textarea(_ref) {
         return _onChange && _onChange((e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value) || '');
       },
       required: required
-    }), validationMessage && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styling.ValidationMessage, {
+    }, rest)), validationMessage && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styling.ValidationMessage, {
       className: size || '',
       type: state !== null && state !== void 0 ? state : _types.States.Invalid,
       children: [state === _types.States.Valid ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.CheckMark, {
@@ -84,8 +98,7 @@ var Textarea = function Textarea(_ref) {
       })]
     })]
   });
-};
-
+});
 var _default = Textarea;
 exports.default = _default;
 //# sourceMappingURL=Textarea.cjs.map

package/dist/InputFields/Textarea.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/Textarea.tsx"],"names":["TextareaWrapper","styled","div","props","margin","TextArea","textarea","COLORS","neutral_400","white","autoHeight","ComponentTextStyle","Italic","black","neutral_500","primary_700","primary_800","critical_500","correct_500","neutral_100","neutral_300","Textarea","id","placeholder","state","value","size","disabled","validationMessage","onChange","note","required","undefined","States","Invalid","e","target","Valid","correct_400","critical_400","icon","message"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport { COLORS, ComponentSStyling } from '../styles';\nimport { ErrorMessage, NoteMessage, ValidationMessage } from './styling';\nimport { Size, States } from '../types';\n\n/**\n * Import custom components.\n */\nimport { CheckMark, TechnicalWarning } from '../icons/systemicons/SystemIcons';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentMStyling, ComponentTextStyle } from '../styles';\nimport { TextareaProps, TextFieldNote } from './types';\n\n// Add component-specific styles.\nconst TextareaWrapper = styled.div<{ margin?: string }>`\n  width: 100%;\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\nconst TextArea = styled.textarea<{ autoHeight?: boolean }>`\n  border: 1px solid ${COLORS.neutral_400};\n  background: ${COLORS.white};\n  border-radius: 4px;\n  outline: none;\n  margin: 4px 0px;\n  padding: 16px;\n\n  resize: ${(props) => (props.autoHeight ? 'none' : '')};\n\n  ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.black)}\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.black)}\n    width: 304px;\n    &::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.black)}\n    width: 344px;\n  }\n\n  &:hover {\n    border: 2px solid ${COLORS.primary_700};\n    margin: 3px -1px;\n  }\n\n  &:active,\n  &:focus {\n    border: 2px solid ${COLORS.primary_800};\n    margin: 3px -1px;\n  }\n\n  &.invalid,\n  &.invalid:hover,\n  &.invalid:focus,\n  &.invalid:active {\n    border: none;\n    margin: 4px 0px;\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_500};\n  }\n\n  &.valid {\n    border: none;\n    margin: 4px 0px;\n    box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\n  }\n\n  &:disabled,\n  &:disabled:hover,\n  &:disabled:focus {\n    cursor: not-allowed;\n    border: 1px solid ${COLORS.neutral_100};\n    margin: 4px 0px;\n    box-shadow: none;\n\n    &::placeholder {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n  &::placeholder {\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n`;\n\nconst Textarea: React.FunctionComponent<TextareaProps> = ({\n  id,\n  placeholder,\n  state,\n  value,\n  size,\n  disabled,\n  validationMessage,\n  onChange,\n  margin,\n  autoHeight,\n  note,\n  required,\n}: TextareaProps) => {\n  return (\n    <TextareaWrapper>\n      <TextArea\n        id={id}\n        value={value}\n        placeholder={disabled ? undefined : placeholder}\n        autoHeight={autoHeight}\n        className={`${size} ${state || (validationMessage ? States.Invalid : '')}`}\n        disabled={disabled}\n        onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n        required={required}\n      />\n      {validationMessage && (\n        <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n          {state === States.Valid ? <CheckMark color={COLORS.correct_400} /> : <TechnicalWarning color={COLORS.critical_400} />}\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    </TextareaWrapper>\n  );\n};\n\nexport default Textarea;\n"],"file":"Textarea.cjs"}
+{"version":3,"sources":["../../src/InputFields/Textarea.tsx"],"names":["TextareaWrapper","styled","div","props","margin","TextArea","textarea","COLORS","neutral_400","white","autoHeight","ComponentTextStyle","Italic","black","neutral_500","primary_700","primary_800","critical_500","correct_500","neutral_100","neutral_300","Textarea","React","forwardRef","ref","id","placeholder","state","value","size","disabled","validationMessage","onChange","note","required","className","rest","cls","States","Invalid","undefined","e","target","Valid","correct_400","critical_400","icon","message"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport { COLORS, ComponentSStyling } from '../styles';\nimport { ErrorMessage, NoteMessage, ValidationMessage } from './styling';\nimport { Size, States } from '../types';\n\n/**\n * Import custom components.\n */\nimport { CheckMark, TechnicalWarning } from '../icons/systemicons/SystemIcons';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentMStyling, ComponentTextStyle } from '../styles';\nimport { TextareaProps, TextFieldNote } from './types';\n\n// Add component-specific styles.\nconst TextareaWrapper = styled.div<{ margin?: string }>`\n  width: 100%;\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\nconst TextArea = styled.textarea<{ autoHeight?: boolean }>`\n  border: 1px solid ${COLORS.neutral_400};\n  background: ${COLORS.white};\n  border-radius: 4px;\n  outline: none;\n  margin: 4px 0px;\n  padding: 16px;\n\n  resize: ${(props) => (props.autoHeight ? 'none' : '')};\n\n  ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.black)}\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.black)}\n    width: 304px;\n    &::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.black)}\n    width: 344px;\n  }\n\n  &:hover {\n    border: 2px solid ${COLORS.primary_700};\n    margin: 3px -1px;\n  }\n\n  &:active,\n  &:focus {\n    border: 2px solid ${COLORS.primary_800};\n    margin: 3px -1px;\n  }\n\n  &.invalid,\n  &.invalid:hover,\n  &.invalid:focus,\n  &.invalid:active {\n    border: none;\n    margin: 4px 0px;\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_500};\n  }\n\n  &.valid {\n    border: none;\n    margin: 4px 0px;\n    box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\n  }\n\n  &:disabled,\n  &:disabled:hover,\n  &:disabled:focus {\n    cursor: not-allowed;\n    border: 1px solid ${COLORS.neutral_100};\n    margin: 4px 0px;\n    box-shadow: none;\n\n    &::placeholder {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n  &::placeholder {\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n`;\n\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({\n  id,\n  placeholder,\n  state,\n  value,\n  size,\n  disabled,\n  validationMessage,\n  onChange,\n  margin,\n  autoHeight,\n  note,\n  required,\n  className,\n  ...rest\n}: TextareaProps, ref) => {\n\n  const cls = `${size} ${state || (validationMessage ? States.Invalid : '')} ${className || ''}`;\n  return (\n    <TextareaWrapper>\n      <TextArea\n        id={id}\n        ref={ref}\n        value={value}\n        placeholder={disabled ? undefined : placeholder}\n        autoHeight={autoHeight}\n        className={cls}\n        disabled={disabled}\n        onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n        required={required}\n        {...rest}\n      />\n      {validationMessage && (\n        <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n          {state === States.Valid ? <CheckMark color={COLORS.correct_400} /> : <TechnicalWarning color={COLORS.critical_400} />}\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    </TextareaWrapper>\n  );\n});\n\nexport default Textarea;\n"],"file":"Textarea.cjs"}

package/dist/InputFields/Textarea.d.ts

@@ -2,6 +2,20 @@
  * Import React libraries.
  */
 import * as React from 'react';
-import { TextareaProps } from './types';
-declare const Textarea: React.FunctionComponent<TextareaProps>;
+import { Size } from '../types';
+import { TextFieldNote } from './types';
+declare const Textarea: React.ForwardRefExoticComponent<Omit<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, "placeholder" | "onChange" | "disabled" | "value" | "required"> & {
+    id: string;
+    placeholder: string;
+    value?: string | undefined;
+    disabled?: boolean | undefined;
+    state?: "invalid" | "valid" | undefined;
+    onChange?: ((text: string) => void) | undefined;
+    validationMessage?: string | undefined;
+    size: Size.Small | Size.Medium;
+    autoHeight?: boolean | undefined;
+    margin?: string | undefined;
+    note?: TextFieldNote | undefined;
+    required: boolean;
+} & React.RefAttributes<HTMLTextAreaElement>>;
 export default Textarea;

package/dist/InputFields/Textarea.js

@@ -1,7 +1,14 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _excluded = ["id", "placeholder", "state", "value", "size", "disabled", "validationMessage", "onChange", "margin", "autoHeight", "note", "required", "className"];
 
 var _templateObject, _templateObject2;
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 /**
  * Import React libraries.
  */
@@ -33,8 +40,7 @@ var TextareaWrapper = styled.div(_templateObject || (_templateObject = _taggedTe
 var TextArea = styled.textarea(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border: 1px solid ", ";\n  background: ", ";\n  border-radius: 4px;\n  outline: none;\n  margin: 4px 0px;\n  padding: 16px;\n\n  resize: ", ";\n\n  ", "\n\n  &.small {\n    ", "\n    width: 304px;\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.medium {\n    ", "\n    width: 344px;\n  }\n\n  &:hover {\n    border: 2px solid ", ";\n    margin: 3px -1px;\n  }\n\n  &:active,\n  &:focus {\n    border: 2px solid ", ";\n    margin: 3px -1px;\n  }\n\n  &.invalid,\n  &.invalid:hover,\n  &.invalid:focus,\n  &.invalid:active {\n    border: none;\n    margin: 4px 0px;\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.valid {\n    border: none;\n    margin: 4px 0px;\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &:disabled,\n  &:disabled:hover,\n  &:disabled:focus {\n    cursor: not-allowed;\n    border: 1px solid ", ";\n    margin: 4px 0px;\n    box-shadow: none;\n\n    &::placeholder {\n      color: ", ";\n    }\n  }\n\n  &::placeholder {\n    ", "\n  }\n"])), COLORS.neutral_400, COLORS.white, function (props) {
   return props.autoHeight ? 'none' : '';
 }, ComponentMStyling(ComponentTextStyle.Italic, COLORS.black), ComponentSStyling(ComponentTextStyle.Italic, COLORS.black), ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500), ComponentMStyling(ComponentTextStyle.Italic, COLORS.black), COLORS.primary_700, COLORS.primary_800, COLORS.critical_500, COLORS.correct_500, COLORS.neutral_100, COLORS.neutral_300, ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500));
-
-var Textarea = function Textarea(_ref) {
+var Textarea = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var id = _ref.id,
       placeholder = _ref.placeholder,
       state = _ref.state,
@@ -46,14 +52,19 @@ var Textarea = function Textarea(_ref) {
       margin = _ref.margin,
       autoHeight = _ref.autoHeight,
       note = _ref.note,
-      required = _ref.required;
+      required = _ref.required,
+      className = _ref.className,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var cls = "".concat(size, " ").concat(state || (validationMessage ? States.Invalid : ''), " ").concat(className || '');
   return /*#__PURE__*/_jsxs(TextareaWrapper, {
-    children: [/*#__PURE__*/_jsx(TextArea, {
+    children: [/*#__PURE__*/_jsx(TextArea, _objectSpread({
       id: id,
+      ref: ref,
       value: value,
       placeholder: disabled ? undefined : placeholder,
       autoHeight: autoHeight,
-      className: "".concat(size, " ").concat(state || (validationMessage ? States.Invalid : '')),
+      className: cls,
       disabled: disabled,
       onChange: function onChange(e) {
         var _e$target;
@@ -61,7 +72,7 @@ var Textarea = function Textarea(_ref) {
         return _onChange && _onChange((e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value) || '');
       },
       required: required
-    }), validationMessage && /*#__PURE__*/_jsxs(ValidationMessage, {
+    }, rest)), validationMessage && /*#__PURE__*/_jsxs(ValidationMessage, {
       className: size || '',
       type: state !== null && state !== void 0 ? state : States.Invalid,
       children: [state === States.Valid ? /*#__PURE__*/_jsx(CheckMark, {
@@ -78,7 +89,6 @@ var Textarea = function Textarea(_ref) {
       })]
     })]
   });
-};
-
+});
 export default Textarea;
 //# sourceMappingURL=Textarea.js.map

package/dist/InputFields/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/Textarea.tsx"],"names":["React","COLORS","ComponentSStyling","NoteMessage","ValidationMessage","States","CheckMark","TechnicalWarning","styled","ComponentMStyling","ComponentTextStyle","TextareaWrapper","div","props","margin","TextArea","textarea","neutral_400","white","autoHeight","Italic","black","neutral_500","primary_700","primary_800","critical_500","correct_500","neutral_100","neutral_300","Textarea","id","placeholder","state","value","size","disabled","validationMessage","onChange","note","required","undefined","Invalid","e","target","Valid","correct_400","critical_400","icon","message"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport { COLORS, ComponentSStyling } from '../styles';\nimport { ErrorMessage, NoteMessage, ValidationMessage } from './styling';\nimport { Size, States } from '../types';\n\n/**\n * Import custom components.\n */\nimport { CheckMark, TechnicalWarning } from '../icons/systemicons/SystemIcons';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentMStyling, ComponentTextStyle } from '../styles';\nimport { TextareaProps, TextFieldNote } from './types';\n\n// Add component-specific styles.\nconst TextareaWrapper = styled.div<{ margin?: string }>`\n  width: 100%;\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\nconst TextArea = styled.textarea<{ autoHeight?: boolean }>`\n  border: 1px solid ${COLORS.neutral_400};\n  background: ${COLORS.white};\n  border-radius: 4px;\n  outline: none;\n  margin: 4px 0px;\n  padding: 16px;\n\n  resize: ${(props) => (props.autoHeight ? 'none' : '')};\n\n  ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.black)}\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.black)}\n    width: 304px;\n    &::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.black)}\n    width: 344px;\n  }\n\n  &:hover {\n    border: 2px solid ${COLORS.primary_700};\n    margin: 3px -1px;\n  }\n\n  &:active,\n  &:focus {\n    border: 2px solid ${COLORS.primary_800};\n    margin: 3px -1px;\n  }\n\n  &.invalid,\n  &.invalid:hover,\n  &.invalid:focus,\n  &.invalid:active {\n    border: none;\n    margin: 4px 0px;\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_500};\n  }\n\n  &.valid {\n    border: none;\n    margin: 4px 0px;\n    box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\n  }\n\n  &:disabled,\n  &:disabled:hover,\n  &:disabled:focus {\n    cursor: not-allowed;\n    border: 1px solid ${COLORS.neutral_100};\n    margin: 4px 0px;\n    box-shadow: none;\n\n    &::placeholder {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n  &::placeholder {\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n`;\n\nconst Textarea: React.FunctionComponent<TextareaProps> = ({\n  id,\n  placeholder,\n  state,\n  value,\n  size,\n  disabled,\n  validationMessage,\n  onChange,\n  margin,\n  autoHeight,\n  note,\n  required,\n}: TextareaProps) => {\n  return (\n    <TextareaWrapper>\n      <TextArea\n        id={id}\n        value={value}\n        placeholder={disabled ? undefined : placeholder}\n        autoHeight={autoHeight}\n        className={`${size} ${state || (validationMessage ? States.Invalid : '')}`}\n        disabled={disabled}\n        onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n        required={required}\n      />\n      {validationMessage && (\n        <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n          {state === States.Valid ? <CheckMark color={COLORS.correct_400} /> : <TechnicalWarning color={COLORS.critical_400} />}\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    </TextareaWrapper>\n  );\n};\n\nexport default Textarea;\n"],"file":"Textarea.js"}
+{"version":3,"sources":["../../src/InputFields/Textarea.tsx"],"names":["React","COLORS","ComponentSStyling","NoteMessage","ValidationMessage","States","CheckMark","TechnicalWarning","styled","ComponentMStyling","ComponentTextStyle","TextareaWrapper","div","props","margin","TextArea","textarea","neutral_400","white","autoHeight","Italic","black","neutral_500","primary_700","primary_800","critical_500","correct_500","neutral_100","neutral_300","Textarea","forwardRef","ref","id","placeholder","state","value","size","disabled","validationMessage","onChange","note","required","className","rest","cls","Invalid","undefined","e","target","Valid","correct_400","critical_400","icon","message"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport { COLORS, ComponentSStyling } from '../styles';\nimport { ErrorMessage, NoteMessage, ValidationMessage } from './styling';\nimport { Size, States } from '../types';\n\n/**\n * Import custom components.\n */\nimport { CheckMark, TechnicalWarning } from '../icons/systemicons/SystemIcons';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentMStyling, ComponentTextStyle } from '../styles';\nimport { TextareaProps, TextFieldNote } from './types';\n\n// Add component-specific styles.\nconst TextareaWrapper = styled.div<{ margin?: string }>`\n  width: 100%;\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\nconst TextArea = styled.textarea<{ autoHeight?: boolean }>`\n  border: 1px solid ${COLORS.neutral_400};\n  background: ${COLORS.white};\n  border-radius: 4px;\n  outline: none;\n  margin: 4px 0px;\n  padding: 16px;\n\n  resize: ${(props) => (props.autoHeight ? 'none' : '')};\n\n  ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.black)}\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.black)}\n    width: 304px;\n    &::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.black)}\n    width: 344px;\n  }\n\n  &:hover {\n    border: 2px solid ${COLORS.primary_700};\n    margin: 3px -1px;\n  }\n\n  &:active,\n  &:focus {\n    border: 2px solid ${COLORS.primary_800};\n    margin: 3px -1px;\n  }\n\n  &.invalid,\n  &.invalid:hover,\n  &.invalid:focus,\n  &.invalid:active {\n    border: none;\n    margin: 4px 0px;\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_500};\n  }\n\n  &.valid {\n    border: none;\n    margin: 4px 0px;\n    box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\n  }\n\n  &:disabled,\n  &:disabled:hover,\n  &:disabled:focus {\n    cursor: not-allowed;\n    border: 1px solid ${COLORS.neutral_100};\n    margin: 4px 0px;\n    box-shadow: none;\n\n    &::placeholder {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n  &::placeholder {\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n`;\n\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({\n  id,\n  placeholder,\n  state,\n  value,\n  size,\n  disabled,\n  validationMessage,\n  onChange,\n  margin,\n  autoHeight,\n  note,\n  required,\n  className,\n  ...rest\n}: TextareaProps, ref) => {\n\n  const cls = `${size} ${state || (validationMessage ? States.Invalid : '')} ${className || ''}`;\n  return (\n    <TextareaWrapper>\n      <TextArea\n        id={id}\n        ref={ref}\n        value={value}\n        placeholder={disabled ? undefined : placeholder}\n        autoHeight={autoHeight}\n        className={cls}\n        disabled={disabled}\n        onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n        required={required}\n        {...rest}\n      />\n      {validationMessage && (\n        <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n          {state === States.Valid ? <CheckMark color={COLORS.correct_400} /> : <TechnicalWarning color={COLORS.critical_400} />}\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    </TextareaWrapper>\n  );\n});\n\nexport default Textarea;\n"],"file":"Textarea.js"}

package/dist/InputFields/components/SearchBarInput.cjs

@@ -49,7 +49,10 @@ var SearchBarInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
       size = props.size,
       _onBlur = props.onBlur,
       onClick = props.onClick;
-  var elementRef = (0, _common.useFocusVisibleRef)(props.focusParentRefs || [], ref);
+  var elementRef = (0, _common.useFocusVisibleRef)(props.focusParentRefs || []);
+  React.useImperativeHandle(ref, function () {
+    return elementRef.current;
+  }, [elementRef]);
 
   var isPressingEnter = function isPressingEnter(e) {
     if (e.key === 'Enter') {

package/dist/InputFields/components/SearchBarInput.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/InputFields/components/SearchBarInput.tsx"],"names":["Search","styled","input","attrs","type","ComponentTextStyle","Italic","COLORS","neutral_500","Regular","black","neutral_600","BREAKPOINTS","MEDIUM","SearchBarInput","React","forwardRef","props","ref","id","searchTerm","setSearchTerm","enterSearch","placeholder","disabled","onKeyDown","size","onBlur","onClick","elementRef","focusParentRefs","isPressingEnter","e","key","preventDefault","stopPropagation","target","value"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../../styles/index';\nimport { Size } from '../../types';\nimport { ComponentMStyling, ComponentSStyling } from '../../styles';\nimport { useFocusVisibleRef } from '../../common';\n\nexport const Search = styled.input.attrs(() => ({ type: 'search' }))`\n  appearance: none;\n  width: calc(100% - 96px);\n\n  /* To prevent browser putting its own cross inside the search bar */\n\n  ::-ms-clear {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n\n  ::-ms-reveal {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    display: none;\n  }\n\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n\n  height: 32px;\n  border-width: 0;\n  margin-left: 48px;\n  outline: none;\n\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.small {\n    margin-left: 44px;\n\n    ::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.medium {\n    margin-left: 48px;\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    \n    ::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &:disabled {\n    background: transparent;\n    border: none;\n  }\n`;\n\ntype SearchBarInputProps = {\n  id: string;\n  searchTerm?: string;\n  setSearchTerm: (term: string) => void;\n  enterSearch: (e: any) => void;\n  placeholder?: string;\n  disabled?: boolean;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: Size.Small | Size.Medium;\n  onBlur?: (e: any) => void;\n  focusParentRefs?: React.RefObject<any>[];\n  onClick?: ()=>void;\n};\n\nconst SearchBarInput = React.forwardRef<HTMLInputElement, SearchBarInputProps>((props: SearchBarInputProps, ref) => {\n  const { id, searchTerm, setSearchTerm, enterSearch, placeholder, disabled, onKeyDown, size, onBlur, onClick } = props;\n\n  const elementRef = useFocusVisibleRef(props.focusParentRefs || [], ref);\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  return (\n    <Search\n      placeholder={disabled ? '' : placeholder}\n      ref={elementRef}\n      id={id}\n      data-testid={id}\n      className={size ? size : ''}\n      tabIndex={0}\n      disabled={disabled}\n      onChange={(e: any) => setSearchTerm(e.target.value)}\n      value={searchTerm}\n      onBlur={(e) => onBlur && onBlur(e)}\n      onKeyDown={onKeyDown}\n      onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}\n      onClick={onClick}\n    />\n  );\n});\n\nexport default SearchBarInput;\n"],"file":"SearchBarInput.cjs"}
+{"version":3,"sources":["../../../src/InputFields/components/SearchBarInput.tsx"],"names":["Search","styled","input","attrs","type","ComponentTextStyle","Italic","COLORS","neutral_500","Regular","black","neutral_600","BREAKPOINTS","MEDIUM","SearchBarInput","React","forwardRef","props","ref","id","searchTerm","setSearchTerm","enterSearch","placeholder","disabled","onKeyDown","size","onBlur","onClick","elementRef","focusParentRefs","useImperativeHandle","current","isPressingEnter","e","key","preventDefault","stopPropagation","target","value"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../../styles/index';\nimport { Size } from '../../types';\nimport { ComponentMStyling, ComponentSStyling } from '../../styles';\nimport { useFocusVisibleRef } from '../../common';\n\nexport const Search = styled.input.attrs(() => ({ type: 'search' }))`\n  appearance: none;\n  width: calc(100% - 96px);\n\n  /* To prevent browser putting its own cross inside the search bar */\n\n  ::-ms-clear {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n\n  ::-ms-reveal {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    display: none;\n  }\n\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n\n  height: 32px;\n  border-width: 0;\n  margin-left: 48px;\n  outline: none;\n\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.small {\n    margin-left: 44px;\n\n    ::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.medium {\n    margin-left: 48px;\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    \n    ::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &:disabled {\n    background: transparent;\n    border: none;\n  }\n`;\n\ntype SearchBarInputProps = {\n  id: string;\n  searchTerm?: string;\n  setSearchTerm: (term: string) => void;\n  enterSearch: (e: any) => void;\n  placeholder?: string;\n  disabled?: boolean;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: Size.Small | Size.Medium;\n  onBlur?: (e: any) => void;\n  focusParentRefs?: React.RefObject<any>[];\n  onClick?: ()=>void;\n};\n\nconst SearchBarInput = React.forwardRef<HTMLInputElement, SearchBarInputProps>((props: SearchBarInputProps, ref) => {\n  const { id, searchTerm, setSearchTerm, enterSearch, placeholder, disabled, onKeyDown, size, onBlur, onClick } = props;\n\n  const elementRef = useFocusVisibleRef(props.focusParentRefs || []);\n\n  React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\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  return (\n    <Search\n      placeholder={disabled ? '' : placeholder}\n      ref={elementRef}\n      id={id}\n      data-testid={id}\n      className={size ? size : ''}\n      tabIndex={0}\n      disabled={disabled}\n      onChange={(e: any) => setSearchTerm(e.target.value)}\n      value={searchTerm}\n      onBlur={(e) => onBlur && onBlur(e)}\n      onKeyDown={onKeyDown}\n      onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}\n      onClick={onClick}\n    />\n  );\n});\n\nexport default SearchBarInput;\n"],"file":"SearchBarInput.cjs"}

package/dist/InputFields/components/SearchBarInput.js

@@ -25,7 +25,10 @@ var SearchBarInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
       size = props.size,
       _onBlur = props.onBlur,
       onClick = props.onClick;
-  var elementRef = useFocusVisibleRef(props.focusParentRefs || [], ref);
+  var elementRef = useFocusVisibleRef(props.focusParentRefs || []);
+  React.useImperativeHandle(ref, function () {
+    return elementRef.current;
+  }, [elementRef]);
 
   var isPressingEnter = function isPressingEnter(e) {
     if (e.key === 'Enter') {

package/dist/InputFields/components/SearchBarInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/InputFields/components/SearchBarInput.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","ComponentMStyling","ComponentSStyling","useFocusVisibleRef","Search","input","attrs","type","Italic","neutral_500","Regular","black","neutral_600","MEDIUM","SearchBarInput","forwardRef","props","ref","id","searchTerm","setSearchTerm","enterSearch","placeholder","disabled","onKeyDown","size","onBlur","onClick","elementRef","focusParentRefs","isPressingEnter","e","key","preventDefault","stopPropagation","target","value"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../../styles/index';\nimport { Size } from '../../types';\nimport { ComponentMStyling, ComponentSStyling } from '../../styles';\nimport { useFocusVisibleRef } from '../../common';\n\nexport const Search = styled.input.attrs(() => ({ type: 'search' }))`\n  appearance: none;\n  width: calc(100% - 96px);\n\n  /* To prevent browser putting its own cross inside the search bar */\n\n  ::-ms-clear {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n\n  ::-ms-reveal {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    display: none;\n  }\n\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n\n  height: 32px;\n  border-width: 0;\n  margin-left: 48px;\n  outline: none;\n\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.small {\n    margin-left: 44px;\n\n    ::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.medium {\n    margin-left: 48px;\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    \n    ::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &:disabled {\n    background: transparent;\n    border: none;\n  }\n`;\n\ntype SearchBarInputProps = {\n  id: string;\n  searchTerm?: string;\n  setSearchTerm: (term: string) => void;\n  enterSearch: (e: any) => void;\n  placeholder?: string;\n  disabled?: boolean;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: Size.Small | Size.Medium;\n  onBlur?: (e: any) => void;\n  focusParentRefs?: React.RefObject<any>[];\n  onClick?: ()=>void;\n};\n\nconst SearchBarInput = React.forwardRef<HTMLInputElement, SearchBarInputProps>((props: SearchBarInputProps, ref) => {\n  const { id, searchTerm, setSearchTerm, enterSearch, placeholder, disabled, onKeyDown, size, onBlur, onClick } = props;\n\n  const elementRef = useFocusVisibleRef(props.focusParentRefs || [], ref);\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  return (\n    <Search\n      placeholder={disabled ? '' : placeholder}\n      ref={elementRef}\n      id={id}\n      data-testid={id}\n      className={size ? size : ''}\n      tabIndex={0}\n      disabled={disabled}\n      onChange={(e: any) => setSearchTerm(e.target.value)}\n      value={searchTerm}\n      onBlur={(e) => onBlur && onBlur(e)}\n      onKeyDown={onKeyDown}\n      onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}\n      onClick={onClick}\n    />\n  );\n});\n\nexport default SearchBarInput;\n"],"file":"SearchBarInput.js"}
+{"version":3,"sources":["../../../src/InputFields/components/SearchBarInput.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","ComponentMStyling","ComponentSStyling","useFocusVisibleRef","Search","input","attrs","type","Italic","neutral_500","Regular","black","neutral_600","MEDIUM","SearchBarInput","forwardRef","props","ref","id","searchTerm","setSearchTerm","enterSearch","placeholder","disabled","onKeyDown","size","onBlur","onClick","elementRef","focusParentRefs","useImperativeHandle","current","isPressingEnter","e","key","preventDefault","stopPropagation","target","value"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../../styles/index';\nimport { Size } from '../../types';\nimport { ComponentMStyling, ComponentSStyling } from '../../styles';\nimport { useFocusVisibleRef } from '../../common';\n\nexport const Search = styled.input.attrs(() => ({ type: 'search' }))`\n  appearance: none;\n  width: calc(100% - 96px);\n\n  /* To prevent browser putting its own cross inside the search bar */\n\n  ::-ms-clear {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n\n  ::-ms-reveal {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    display: none;\n  }\n\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n\n  height: 32px;\n  border-width: 0;\n  margin-left: 48px;\n  outline: none;\n\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.small {\n    margin-left: 44px;\n\n    ::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.medium {\n    margin-left: 48px;\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    \n    ::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &:disabled {\n    background: transparent;\n    border: none;\n  }\n`;\n\ntype SearchBarInputProps = {\n  id: string;\n  searchTerm?: string;\n  setSearchTerm: (term: string) => void;\n  enterSearch: (e: any) => void;\n  placeholder?: string;\n  disabled?: boolean;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: Size.Small | Size.Medium;\n  onBlur?: (e: any) => void;\n  focusParentRefs?: React.RefObject<any>[];\n  onClick?: ()=>void;\n};\n\nconst SearchBarInput = React.forwardRef<HTMLInputElement, SearchBarInputProps>((props: SearchBarInputProps, ref) => {\n  const { id, searchTerm, setSearchTerm, enterSearch, placeholder, disabled, onKeyDown, size, onBlur, onClick } = props;\n\n  const elementRef = useFocusVisibleRef(props.focusParentRefs || []);\n\n  React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\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  return (\n    <Search\n      placeholder={disabled ? '' : placeholder}\n      ref={elementRef}\n      id={id}\n      data-testid={id}\n      className={size ? size : ''}\n      tabIndex={0}\n      disabled={disabled}\n      onChange={(e: any) => setSearchTerm(e.target.value)}\n      value={searchTerm}\n      onBlur={(e) => onBlur && onBlur(e)}\n      onKeyDown={onKeyDown}\n      onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}\n      onClick={onClick}\n    />\n  );\n});\n\nexport default SearchBarInput;\n"],"file":"SearchBarInput.js"}

package/dist/InputFields/index.cjs

@@ -5,6 +5,18 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  TextField: true,
+  PasswordField: true,
+  Checkbox: true,
+  RadioButton: true,
+  SearchBar: true,
+  InputLabel: true,
+  DatepickerField: true,
+  Textarea: true,
+  QuickSearch: true,
+  NumberField: true
+};
 Object.defineProperty(exports, "Checkbox", {
   enumerable: true,
   get: function get() {
@@ -85,4 +97,18 @@ var _Textarea = _interopRequireDefault(require("./Textarea"));
 var _QuickSearch = _interopRequireDefault(require("./QuickSearch"));
 
 var _NumberField = _interopRequireDefault(require("./NumberField"));
+
+var _styling = require("./styling");
+
+Object.keys(_styling).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _styling[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _styling[key];
+    }
+  });
+});
 //# sourceMappingURL=index.cjs.map

package/dist/InputFields/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA","sourcesContent":["import TextField from './TextField';\nimport PasswordField from './PasswordField';\nimport Checkbox from './Checkbox';\nimport RadioButton from './RadioButton';\nimport SearchBar from './SearchBar';\nimport InputLabel from './Label';\nimport DatepickerField from './DatepickerField';\nimport Textarea from './Textarea';\nimport QuickSearch from './QuickSearch';\nimport NumberField from './NumberField';\n\nexport { TextField, PasswordField, Checkbox, RadioButton, SearchBar, InputLabel, DatepickerField, Textarea, QuickSearch, NumberField };\n"],"file":"index.cjs"}
+{"version":3,"sources":["../../src/InputFields/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["import TextField from './TextField';\nimport PasswordField from './PasswordField';\nimport Checkbox from './Checkbox';\nimport RadioButton from './RadioButton';\nimport SearchBar from './SearchBar';\nimport InputLabel from './Label';\nimport DatepickerField from './DatepickerField';\nimport Textarea from './Textarea';\nimport QuickSearch from './QuickSearch';\nimport NumberField from './NumberField';\n\nexport * from './styling';\n\nexport {\n  TextField,\n  PasswordField,\n  Checkbox,\n  RadioButton,\n  SearchBar,\n  InputLabel,\n  DatepickerField,\n  Textarea,\n  QuickSearch,\n  NumberField\n};\n"],"file":"index.cjs"}

package/dist/InputFields/index.d.ts

@@ -8,4 +8,5 @@ import DatepickerField from './DatepickerField';
 import Textarea from './Textarea';
 import QuickSearch from './QuickSearch';
 import NumberField from './NumberField';
+export * from './styling';
 export { TextField, PasswordField, Checkbox, RadioButton, SearchBar, InputLabel, DatepickerField, Textarea, QuickSearch, NumberField };

package/dist/InputFields/index.js

@@ -8,5 +8,6 @@ import DatepickerField from './DatepickerField';
 import Textarea from './Textarea';
 import QuickSearch from './QuickSearch';
 import NumberField from './NumberField';
+export * from './styling';
 export { TextField, PasswordField, Checkbox, RadioButton, SearchBar, InputLabel, DatepickerField, Textarea, QuickSearch, NumberField };
 //# sourceMappingURL=index.js.map

package/dist/InputFields/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/index.ts"],"names":["TextField","PasswordField","Checkbox","RadioButton","SearchBar","InputLabel","DatepickerField","Textarea","QuickSearch","NumberField"],"mappings":"AAAA,OAAOA,SAAP,MAAsB,aAAtB;AACA,OAAOC,aAAP,MAA0B,iBAA1B;AACA,OAAOC,QAAP,MAAqB,YAArB;AACA,OAAOC,WAAP,MAAwB,eAAxB;AACA,OAAOC,SAAP,MAAsB,aAAtB;AACA,OAAOC,UAAP,MAAuB,SAAvB;AACA,OAAOC,eAAP,MAA4B,mBAA5B;AACA,OAAOC,QAAP,MAAqB,YAArB;AACA,OAAOC,WAAP,MAAwB,eAAxB;AACA,OAAOC,WAAP,MAAwB,eAAxB;AAEA,SAAST,SAAT,EAAoBC,aAApB,EAAmCC,QAAnC,EAA6CC,WAA7C,EAA0DC,SAA1D,EAAqEC,UAArE,EAAiFC,eAAjF,EAAkGC,QAAlG,EAA4GC,WAA5G,EAAyHC,WAAzH","sourcesContent":["import TextField from './TextField';\nimport PasswordField from './PasswordField';\nimport Checkbox from './Checkbox';\nimport RadioButton from './RadioButton';\nimport SearchBar from './SearchBar';\nimport InputLabel from './Label';\nimport DatepickerField from './DatepickerField';\nimport Textarea from './Textarea';\nimport QuickSearch from './QuickSearch';\nimport NumberField from './NumberField';\n\nexport { TextField, PasswordField, Checkbox, RadioButton, SearchBar, InputLabel, DatepickerField, Textarea, QuickSearch, NumberField };\n"],"file":"index.js"}
+{"version":3,"sources":["../../src/InputFields/index.ts"],"names":["TextField","PasswordField","Checkbox","RadioButton","SearchBar","InputLabel","DatepickerField","Textarea","QuickSearch","NumberField"],"mappings":"AAAA,OAAOA,SAAP,MAAsB,aAAtB;AACA,OAAOC,aAAP,MAA0B,iBAA1B;AACA,OAAOC,QAAP,MAAqB,YAArB;AACA,OAAOC,WAAP,MAAwB,eAAxB;AACA,OAAOC,SAAP,MAAsB,aAAtB;AACA,OAAOC,UAAP,MAAuB,SAAvB;AACA,OAAOC,eAAP,MAA4B,mBAA5B;AACA,OAAOC,QAAP,MAAqB,YAArB;AACA,OAAOC,WAAP,MAAwB,eAAxB;AACA,OAAOC,WAAP,MAAwB,eAAxB;AAEA,cAAc,WAAd;AAEA,SACET,SADF,EAEEC,aAFF,EAGEC,QAHF,EAIEC,WAJF,EAKEC,SALF,EAMEC,UANF,EAOEC,eAPF,EAQEC,QARF,EASEC,WATF,EAUEC,WAVF","sourcesContent":["import TextField from './TextField';\nimport PasswordField from './PasswordField';\nimport Checkbox from './Checkbox';\nimport RadioButton from './RadioButton';\nimport SearchBar from './SearchBar';\nimport InputLabel from './Label';\nimport DatepickerField from './DatepickerField';\nimport Textarea from './Textarea';\nimport QuickSearch from './QuickSearch';\nimport NumberField from './NumberField';\n\nexport * from './styling';\n\nexport {\n  TextField,\n  PasswordField,\n  Checkbox,\n  RadioButton,\n  SearchBar,\n  InputLabel,\n  DatepickerField,\n  Textarea,\n  QuickSearch,\n  NumberField\n};\n"],"file":"index.js"}

package/dist/InputFields/types.d.ts

@@ -18,7 +18,7 @@ export declare type TextFieldProps = {
     margin?: string;
     note?: TextFieldNote;
 };
-export declare type TextareaProps = {
+export declare type TextareaProps = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'placeholder' | 'disabled' | 'required' | 'onChange'> & {
     id: string;
     placeholder: string;
     value?: string;