@x15ventures/x15-ui-library 3.15.0 → 3.16.0

package/dist/cjs/components/form/hookFormWrapper/HookFormWrapper.js

@@ -12,21 +12,38 @@ var _reactHookForm = require("react-hook-form");
 const HookFormWrapper = ({
   formCssClass = 'x15StandardForm',
   children,
-  formProps
+  formProps,
+  formContext,
+  onSubmit
 }) => {
-  const existingHookFormContext = (0, _reactHookForm.useFormContext)();
+  const inheritedHookFormContext = (0, _reactHookForm.useFormContext)();
   const hookFormMethods = (0, _reactHookForm.useForm)({
     mode: 'all',
     criteriaMode: 'all',
     shouldFocusError: true
   });
-  if (existingHookFormContext) {
-    return children;
+
+  // A manually supplied context re-publishes the form state across a boundary the
+  // React context could not cross (e.g. a Next.js server/client component split).
+  if (formContext) {
+    return /*#__PURE__*/_react.default.createElement(_reactHookForm.FormProvider, formContext, children);
+  }
+  if (inheritedHookFormContext) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
   }
+  const {
+    onSubmit: nativeOnSubmit,
+    ...remainingFormProps
+  } = formProps || {};
+
+  // `onSubmit` receives the validated values, so consumers never need to call useForm themselves.
+  const handleFormSubmit = onSubmit ? hookFormMethods.handleSubmit(onSubmit) : nativeOnSubmit;
   return /*#__PURE__*/_react.default.createElement(_reactHookForm.FormProvider, hookFormMethods, /*#__PURE__*/_react.default.createElement("form", (0, _extends2.default)({
     className: formCssClass,
     autoComplete: "off"
-  }, formProps), children));
+  }, remainingFormProps, {
+    onSubmit: handleFormSubmit
+  }), children));
 };
 exports.HookFormWrapper = HookFormWrapper;
 var _default = exports.default = HookFormWrapper;

package/dist/cjs/components/form/hookFormWrapper/HookFormWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"HookFormWrapper.js","names":["_interopRequireDefault","require","Object","defineProperty","exports","value","default","HookFormWrapper","_extends2","_react","_reactHookForm","formCssClass","children","formProps","existingHookFormContext","useFormContext","hookFormMethods","useForm","mode","criteriaMode","shouldFocusError","createElement","FormProvider","className","autoComplete","_default"],"sources":["../../../../../src/components/form/hookFormWrapper/HookFormWrapper.tsx"],"sourcesContent":["'use client';\n\nimport React, { ReactNode, ReactElement, FormHTMLAttributes } from 'react';\nimport { FormProvider, useForm, useFormContext } from 'react-hook-form';\n\ninterface FormWrapperProps {\n  formCssClass?: string;\n  formProps?: FormHTMLAttributes<HTMLFormElement>;\n  children: ReactNode | ReactElement;\n}\n\nexport const HookFormWrapper: React.FC<FormWrapperProps> = (\n  {\n    formCssClass = 'x15StandardForm',\n    children,\n    formProps\n  }\n) => {\n  const existingHookFormContext = useFormContext();\n\n  const hookFormMethods = useForm({\n    mode: 'all',\n    criteriaMode: 'all',\n    shouldFocusError: true\n  });\n\n  if (existingHookFormContext) {\n    return children;\n  }\n\n  return (\n    <FormProvider { ...hookFormMethods }>\n      <form className={ formCssClass } autoComplete=\"off\" { ...formProps }>\n        {\n          children\n        }\n      </form>\n    </FormProvider>\n  );\n};\n\nexport default HookFormWrapper;\n"],"mappings":";AAAA,YAAY;;AAAC,IAAAA,sBAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,KAAA;AAAA;AAAAD,OAAA,CAAAE,OAAA,GAAAF,OAAA,CAAAG,eAAA;AAAA,IAAAC,SAAA,GAAAR,sBAAA,CAAAC,OAAA;AAEb,IAAAQ,MAAA,GAAAT,sBAAA,CAAAC,OAAA;AACA,IAAAS,cAAA,GAAAT,OAAA;AAQO,MAAMM,eAA2C,GAAGA,CACzD;EACEI,YAAY,GAAG,iBAAiB;EAChCC,QAAQ;EACRC;AACF,CAAC,KACE;EACH,MAAMC,uBAAuB,GAAG,IAAAC,6BAAc,EAAC,CAAC;EAEhD,MAAMC,eAAe,GAAG,IAAAC,sBAAO,EAAC;IAC9BC,IAAI,EAAE,KAAK;IACXC,YAAY,EAAE,KAAK;IACnBC,gBAAgB,EAAE;EACpB,CAAC,CAAC;EAEF,IAAIN,uBAAuB,EAAE;IAC3B,OAAOF,QAAQ;EACjB;EAEA,oBACEH,MAAA,CAAAH,OAAA,CAAAe,aAAA,CAACX,cAAA,CAAAY,YAAY,EAAMN,eAAe,eAChCP,MAAA,CAAAH,OAAA,CAAAe,aAAA,aAAAb,SAAA,CAAAF,OAAA;IAAMiB,SAAS,EAAGZ,YAAc;IAACa,YAAY,EAAC;EAAK,GAAMX,SAAS,GAE9DD,QAEE,CACM,CAAC;AAEnB,CAAC;AAACR,OAAA,CAAAG,eAAA,GAAAA,eAAA;AAAA,IAAAkB,QAAA,GAAArB,OAAA,CAAAE,OAAA,GAEaC,eAAe","ignoreList":[]}
+{"version":3,"file":"HookFormWrapper.js","names":["_interopRequireDefault","require","Object","defineProperty","exports","value","default","HookFormWrapper","_extends2","_react","_reactHookForm","formCssClass","children","formProps","formContext","onSubmit","inheritedHookFormContext","useFormContext","hookFormMethods","useForm","mode","criteriaMode","shouldFocusError","createElement","FormProvider","Fragment","nativeOnSubmit","remainingFormProps","handleFormSubmit","handleSubmit","className","autoComplete","_default"],"sources":["../../../../../src/components/form/hookFormWrapper/HookFormWrapper.tsx"],"sourcesContent":["'use client';\n\nimport React, { ReactNode, ReactElement, FormHTMLAttributes } from 'react';\nimport { FieldValues, FormProvider, useForm, useFormContext, UseFormReturn } from 'react-hook-form';\n\ninterface FormWrapperProps {\n  formCssClass?: string;\n  formProps?: FormHTMLAttributes<HTMLFormElement>;\n  children: ReactNode | ReactElement;\n  formContext?: UseFormReturn<FieldValues, any, FieldValues>\n  /* eslint-disable-next-line no-unused-vars */\n  onSubmit?: (values: FieldValues) => void | Promise<void>;\n}\n\nexport const HookFormWrapper: React.FC<FormWrapperProps> = (\n  {\n    formCssClass = 'x15StandardForm',\n    children,\n    formProps,\n    formContext,\n    onSubmit,\n  }\n) => {\n  const inheritedHookFormContext = useFormContext();\n\n  const hookFormMethods = useForm({\n    mode: 'all',\n    criteriaMode: 'all',\n    shouldFocusError: true\n  });\n\n  // A manually supplied context re-publishes the form state across a boundary the\n  // React context could not cross (e.g. a Next.js server/client component split).\n  if (formContext) {\n    return (\n      <FormProvider { ...formContext }>\n        { children }\n      </FormProvider>\n    );\n  }\n\n  if (inheritedHookFormContext) {\n    return <>{ children }</>;\n  }\n\n  const { onSubmit: nativeOnSubmit, ...remainingFormProps } = formProps || {};\n\n  // `onSubmit` receives the validated values, so consumers never need to call useForm themselves.\n  const handleFormSubmit = onSubmit\n    ? hookFormMethods.handleSubmit(onSubmit)\n    : nativeOnSubmit;\n\n  return (\n    <FormProvider { ...hookFormMethods }>\n      <form\n        className={ formCssClass }\n        autoComplete=\"off\"\n        { ...remainingFormProps }\n        onSubmit={ handleFormSubmit }\n      >\n        {\n          children\n        }\n      </form>\n    </FormProvider>\n  );\n};\n\nexport default HookFormWrapper;\n"],"mappings":";AAAA,YAAY;;AAAC,IAAAA,sBAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,KAAA;AAAA;AAAAD,OAAA,CAAAE,OAAA,GAAAF,OAAA,CAAAG,eAAA;AAAA,IAAAC,SAAA,GAAAR,sBAAA,CAAAC,OAAA;AAEb,IAAAQ,MAAA,GAAAT,sBAAA,CAAAC,OAAA;AACA,IAAAS,cAAA,GAAAT,OAAA;AAWO,MAAMM,eAA2C,GAAGA,CACzD;EACEI,YAAY,GAAG,iBAAiB;EAChCC,QAAQ;EACRC,SAAS;EACTC,WAAW;EACXC;AACF,CAAC,KACE;EACH,MAAMC,wBAAwB,GAAG,IAAAC,6BAAc,EAAC,CAAC;EAEjD,MAAMC,eAAe,GAAG,IAAAC,sBAAO,EAAC;IAC9BC,IAAI,EAAE,KAAK;IACXC,YAAY,EAAE,KAAK;IACnBC,gBAAgB,EAAE;EACpB,CAAC,CAAC;;EAEF;EACA;EACA,IAAIR,WAAW,EAAE;IACf,oBACEL,MAAA,CAAAH,OAAA,CAAAiB,aAAA,CAACb,cAAA,CAAAc,YAAY,EAAMV,WAAW,EAC1BF,QACU,CAAC;EAEnB;EAEA,IAAII,wBAAwB,EAAE;IAC5B,oBAAOP,MAAA,CAAAH,OAAA,CAAAiB,aAAA,CAAAd,MAAA,CAAAH,OAAA,CAAAmB,QAAA,QAAIb,QAAY,CAAC;EAC1B;EAEA,MAAM;IAAEG,QAAQ,EAAEW,cAAc;IAAE,GAAGC;EAAmB,CAAC,GAAGd,SAAS,IAAI,CAAC,CAAC;;EAE3E;EACA,MAAMe,gBAAgB,GAAGb,QAAQ,GAC7BG,eAAe,CAACW,YAAY,CAACd,QAAQ,CAAC,GACtCW,cAAc;EAElB,oBACEjB,MAAA,CAAAH,OAAA,CAAAiB,aAAA,CAACb,cAAA,CAAAc,YAAY,EAAMN,eAAe,eAChCT,MAAA,CAAAH,OAAA,CAAAiB,aAAA,aAAAf,SAAA,CAAAF,OAAA;IACEwB,SAAS,EAAGnB,YAAc;IAC1BoB,YAAY,EAAC;EAAK,GACbJ,kBAAkB;IACvBZ,QAAQ,EAAGa;EAAkB,IAG3BhB,QAEE,CACM,CAAC;AAEnB,CAAC;AAACR,OAAA,CAAAG,eAAA,GAAAA,eAAA;AAAA,IAAAyB,QAAA,GAAA5B,OAAA,CAAAE,OAAA,GAEaC,eAAe","ignoreList":[]}

package/dist/cjs/components/form/validation/ValidationMessages.js

@@ -1,6 +1,4 @@
 "use strict";
-/* eslint-disable no-unused-vars */
-
 'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -9,17 +7,27 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.extractError = exports.default = exports.ValidationMessages = exports.GenericErrorMessages = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _errorMessage = require("@hookform/error-message");
 var _reactHookForm = require("react-hook-form");
-var _formUtilities = require("../formFields/utilities/formUtilities");
 // Type for generic error messages
 const GenericErrorMessages = exports.GenericErrorMessages = {
-  required: () => 'This field is required. Please enter a value.',
-  minLength: value => `Please provide a minimum of ${value} characters.`,
-  maxLength: value => `Please provide a maximum of ${value} characters.`,
-  min: value => `The value must be a minimum of ${value}.`,
-  max: value => `The value must be a maximum of ${value}.`,
-  unknown: () => 'An unknown error has occurred.'
+  required: 'This field is required. Please enter a value.',
+  minLength: 'Please provide a minimum of {value} characters.',
+  maxLength: 'Please provide a maximum of {value} characters.',
+  min: 'The value must be a minimum of {value}.',
+  max: 'The value must be a maximum of {value}.',
+  unknown: 'An unknown error has occurred.'
+};
+const isGenericErrorType = errorType => typeof errorType === 'string' && errorType !== 'unknown' && Object.prototype.hasOwnProperty.call(GenericErrorMessages, errorType);
+const getValidationValue = validator => typeof validator === 'object' ? validator.value : validator;
+const getGenericErrorMessage = (errorType, validation) => {
+  if (!isGenericErrorType(errorType)) {
+    return undefined;
+  }
+  if (errorType === 'required') {
+    return GenericErrorMessages.required;
+  }
+  const value = getValidationValue(validation?.[errorType]);
+  return value === undefined ? undefined : GenericErrorMessages[errorType].replace('{value}', String(value));
 };
 
 // Helper function to extract nested errors
@@ -40,49 +48,39 @@ const ValidationMessages = ({
   name,
   validation
 }) => {
+  const formContext = (0, _reactHookForm.useFormContext)();
+  if (!formContext) {
+    return null;
+  }
   const {
     formState: {
       errors
     }
-  } = (0, _reactHookForm.useFormContext)() || _formUtilities.NoHookFormContext;
+  } = formContext;
   const fieldError = extractError(errors, name);
   if (!fieldError) {
     return null;
   }
 
-  // Check all the validators have a message
-  if (validation) {
-    Object.entries(validation).forEach(([validatorKey, validator]) => {
-      if (GenericErrorMessages[validatorKey]) {
-        if (typeof validator === 'boolean') {
-          if (fieldError.type && fieldError.types && typeof fieldError.types[fieldError.type] === 'string') {
-            fieldError.message = fieldError.types[fieldError.type];
-          } else {
-            fieldError.message = GenericErrorMessages[validatorKey]();
-          }
-        } else if (typeof validator === 'object' && 'value' in validator) {
-          // @ts-ignore The hook form types don't seem to cater for versions with value properties properly
-          fieldError.message = GenericErrorMessages[validatorKey](validator.value || undefined);
-        }
-      }
-    });
-  }
+  // Derive a fallback message rather than mutating the error object held in formState.
+  const resolveMessage = () => {
+    if (fieldError.message) {
+      return fieldError.message;
+    }
+    if (fieldError.type && fieldError.types && typeof fieldError.types[fieldError.type] === 'string') {
+      return fieldError.types[fieldError.type];
+    }
+    return getGenericErrorMessage(fieldError.type, validation);
+  };
+  const message = resolveMessage() || GenericErrorMessages.unknown;
   return /*#__PURE__*/_react.default.createElement("span", {
     className: "validation",
     id: `${name}_errors`
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: "message"
-  }, !fieldError?.message && /*#__PURE__*/_react.default.createElement("span", {
+  }, /*#__PURE__*/_react.default.createElement("span", {
     className: "error"
-  }, GenericErrorMessages.unknown()), /*#__PURE__*/_react.default.createElement(_errorMessage.ErrorMessage, {
-    errors: errors,
-    name: name,
-    render: ({
-      message
-    }) => /*#__PURE__*/_react.default.createElement("span", {
-      className: "error"
-    }, message)
-  })));
+  }, message)));
 };
 exports.ValidationMessages = ValidationMessages;
 var _default = exports.default = ValidationMessages;

package/dist/cjs/components/form/validation/ValidationMessages.js.map

@@ -1 +1 @@
-{"version":3,"file":"ValidationMessages.js","names":["_interopRequireDefault","require","Object","defineProperty","exports","value","extractError","default","ValidationMessages","GenericErrorMessages","_react","_errorMessage","_reactHookForm","_formUtilities","required","minLength","maxLength","min","max","unknown","errors","fieldName","undefined","pathComponents","split","reduce","accumulator","pathComponent","name","validation","formState","useFormContext","NoHookFormContext","fieldError","entries","forEach","validatorKey","validator","type","types","message","createElement","className","id","ErrorMessage","render","_default"],"sources":["../../../../../src/components/form/validation/ValidationMessages.tsx"],"sourcesContent":["/* eslint-disable no-unused-vars */\n\n'use client';\n\nimport React from 'react';\nimport { ErrorMessage } from '@hookform/error-message';\nimport {\n  FieldError,\n  FieldErrors,\n  FieldErrorsImpl,\n  Merge, useFormContext\n} from 'react-hook-form';\nimport {\n  ValidationProps\n} from '../formFields/formFieldWrapper/formFieldProps';\nimport { NoHookFormContext } from '../formFields/utilities/formUtilities';\nimport { InputCheckboxValidationProps } from '../formFields/subComponents/inputs/checkbox/inputCheckboxProps';\n\n// Type for generic error messages\nexport const GenericErrorMessages: Record<string, (value?: never) => string> = {\n  required: () => 'This field is required. Please enter a value.',\n  minLength: (value) => `Please provide a minimum of ${ value } characters.`,\n  maxLength: (value) => `Please provide a maximum of ${ value } characters.`,\n  min: (value) => `The value must be a minimum of ${ value }.`,\n  max: (value) => `The value must be a maximum of ${ value }.`,\n  unknown: () => 'An unknown error has occurred.'\n};\n\n// Helper function to extract nested errors\nexport const extractError = (\n  errors: FieldErrors,\n  fieldName: string\n): FieldError | Merge<FieldError, FieldErrorsImpl<never>> | undefined => {\n  if (!errors) {\n    return undefined;\n  }\n\n  const pathComponents = fieldName.split('.');\n\n  return pathComponents.reduce<FieldError | Merge<FieldError, FieldErrorsImpl<never>> | undefined>(\n    (accumulator, pathComponent) => {\n      if (!accumulator) {\n        return undefined;\n      }\n\n      return (accumulator as never)[pathComponent];\n    },\n    errors as never\n  );\n};\n\ninterface ValidationMessagesProps {\n  name: string;\n  validation?: ValidationProps | InputCheckboxValidationProps\n}\n\nexport const ValidationMessages: React.FC<ValidationMessagesProps> = (\n  {\n    name,\n    validation\n  }\n) => {\n  const { formState: { errors } } = useFormContext() || NoHookFormContext;\n\n  const fieldError = extractError(errors, name);\n\n  if (!fieldError) {\n    return null;\n  }\n\n  // Check all the validators have a message\n  if (validation) {\n    Object.entries(validation).forEach(([validatorKey, validator]) => {\n      if (GenericErrorMessages[validatorKey]) {\n        if (typeof validator === 'boolean') {\n          if (\n            fieldError.type &&\n            fieldError.types &&\n            typeof fieldError.types[fieldError.type] === 'string'\n          ) {\n            fieldError.message = fieldError.types[fieldError.type] as string;\n          } else {\n            fieldError.message = GenericErrorMessages[validatorKey]();\n          }\n        } else if (typeof validator === 'object' && 'value' in validator) {\n          // @ts-ignore The hook form types don't seem to cater for versions with value properties properly\n          fieldError.message = GenericErrorMessages[validatorKey](validator.value || undefined);\n        }\n      }\n    });\n  }\n\n  return (\n    <span className=\"validation\" id={ `${ name }_errors` }>\n      <span className=\"message\">\n        { !fieldError?.message && (\n          <span className=\"error\">{ GenericErrorMessages.unknown() }</span>\n        ) }\n\n        <ErrorMessage\n          errors={ errors }\n          name={ name }\n          render={ ({ message }) => <span className=\"error\">{ message }</span> }\n        />\n      </span>\n    </span>\n  );\n};\n\nexport default ValidationMessages;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ValidationMessages.js","names":["_interopRequireDefault","require","Object","defineProperty","exports","value","extractError","default","ValidationMessages","GenericErrorMessages","_react","_reactHookForm","required","minLength","maxLength","min","max","unknown","isGenericErrorType","errorType","prototype","hasOwnProperty","call","getValidationValue","validator","getGenericErrorMessage","validation","undefined","replace","String","errors","fieldName","pathComponents","split","reduce","accumulator","pathComponent","name","formContext","useFormContext","formState","fieldError","resolveMessage","message","type","types","createElement","className","id","_default"],"sources":["../../../../../src/components/form/validation/ValidationMessages.tsx"],"sourcesContent":[" \n\n'use client';\n\nimport React from 'react';\nimport {\n  FieldError,\n  FieldErrors,\n  FieldErrorsImpl,\n  Merge,\n  ValidationRule,\n  useFormContext\n} from 'react-hook-form';\nimport {\n  ValidationProps\n} from '../formFields/formFieldWrapper/formFieldProps';\nimport { InputCheckboxValidationProps } from '../formFields/subComponents/inputs/checkbox/inputCheckboxProps';\n\n// Type for generic error messages\nexport const GenericErrorMessages = {\n  required: 'This field is required. Please enter a value.',\n  minLength: 'Please provide a minimum of {value} characters.',\n  maxLength: 'Please provide a maximum of {value} characters.',\n  min: 'The value must be a minimum of {value}.',\n  max: 'The value must be a maximum of {value}.',\n  unknown: 'An unknown error has occurred.'\n};\n\ntype ValidationRules = ValidationProps | InputCheckboxValidationProps;\ntype GenericErrorType = Exclude<keyof typeof GenericErrorMessages, 'unknown'>;\ntype ValidationErrorType = NonNullable<ReturnType<typeof extractError>>['type'];\n\nconst isGenericErrorType = (errorType: ValidationErrorType): errorType is GenericErrorType =>\n  typeof errorType === 'string'\n  && errorType !== 'unknown'\n  && Object.prototype.hasOwnProperty.call(GenericErrorMessages, errorType);\n\nconst getValidationValue = <TValue extends string | number>(\n  validator: ValidationRule<TValue> | undefined\n): TValue | undefined => typeof validator === 'object' ? validator.value : validator;\n\nconst getGenericErrorMessage = (\n  errorType: ValidationErrorType,\n  validation?: ValidationRules\n): string | undefined => {\n  if (!isGenericErrorType(errorType)) {\n    return undefined;\n  }\n\n  if (errorType === 'required') {\n    return GenericErrorMessages.required;\n  }\n\n  const value = getValidationValue(validation?.[errorType]);\n\n  return value === undefined\n    ? undefined\n    : GenericErrorMessages[errorType].replace('{value}', String(value));\n};\n\n// Helper function to extract nested errors\nexport const extractError = (\n  errors: FieldErrors,\n  fieldName: string\n): FieldError | Merge<FieldError, FieldErrorsImpl<never>> | undefined => {\n  if (!errors) {\n    return undefined;\n  }\n\n  const pathComponents = fieldName.split('.');\n\n  return pathComponents.reduce<FieldError | Merge<FieldError, FieldErrorsImpl<never>> | undefined>(\n    (accumulator, pathComponent) => {\n      if (!accumulator) {\n        return undefined;\n      }\n\n      return (accumulator as never)[pathComponent];\n    },\n    errors as never\n  );\n};\n\ninterface ValidationMessagesProps {\n  name: string;\n  validation?: ValidationProps | InputCheckboxValidationProps\n}\n\nexport const ValidationMessages: React.FC<ValidationMessagesProps> = (\n  {\n    name,\n    validation\n  }\n) => {\n  const formContext = useFormContext();\n\n  if (!formContext) {\n    return null;\n  }\n\n  const { formState: { errors } } = formContext;\n\n  const fieldError = extractError(errors, name);\n\n  if (!fieldError) {\n    return null;\n  }\n\n  // Derive a fallback message rather than mutating the error object held in formState.\n  const resolveMessage = (): string | undefined => {\n    if (fieldError.message) {\n      return fieldError.message as string;\n    }\n\n    if (\n      fieldError.type\n      && fieldError.types\n      && typeof fieldError.types[fieldError.type] === 'string'\n    ) {\n      return fieldError.types[fieldError.type] as string;\n    }\n\n    return getGenericErrorMessage(fieldError.type, validation);\n  };\n\n  const message = resolveMessage() || GenericErrorMessages.unknown;\n\n  return (\n    <span className=\"validation\" id={ `${ name }_errors` }>\n      <span className=\"message\">\n        <span className=\"error\">{ message }</span>\n      </span>\n    </span>\n  );\n};\n\nexport default ValidationMessages;\n"],"mappings":";AAEA,YAAY;;AAAC,IAAAA,sBAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,KAAA;AAAA;AAAAD,OAAA,CAAAE,YAAA,GAAAF,OAAA,CAAAG,OAAA,GAAAH,OAAA,CAAAI,kBAAA,GAAAJ,OAAA,CAAAK,oBAAA;AAEb,IAAAC,MAAA,GAAAV,sBAAA,CAAAC,OAAA;AACA,IAAAU,cAAA,GAAAV,OAAA;AAaA;AACO,MAAMQ,oBAAoB,GAAAL,OAAA,CAAAK,oBAAA,GAAG;EAClCG,QAAQ,EAAE,+CAA+C;EACzDC,SAAS,EAAE,iDAAiD;EAC5DC,SAAS,EAAE,iDAAiD;EAC5DC,GAAG,EAAE,yCAAyC;EAC9CC,GAAG,EAAE,yCAAyC;EAC9CC,OAAO,EAAE;AACX,CAAC;AAMD,MAAMC,kBAAkB,GAAIC,SAA8B,IACxD,OAAOA,SAAS,KAAK,QAAQ,IAC1BA,SAAS,KAAK,SAAS,IACvBjB,MAAM,CAACkB,SAAS,CAACC,cAAc,CAACC,IAAI,CAACb,oBAAoB,EAAEU,SAAS,CAAC;AAE1E,MAAMI,kBAAkB,GACtBC,SAA6C,IACtB,OAAOA,SAAS,KAAK,QAAQ,GAAGA,SAAS,CAACnB,KAAK,GAAGmB,SAAS;AAEpF,MAAMC,sBAAsB,GAAGA,CAC7BN,SAA8B,EAC9BO,UAA4B,KACL;EACvB,IAAI,CAACR,kBAAkB,CAACC,SAAS,CAAC,EAAE;IAClC,OAAOQ,SAAS;EAClB;EAEA,IAAIR,SAAS,KAAK,UAAU,EAAE;IAC5B,OAAOV,oBAAoB,CAACG,QAAQ;EACtC;EAEA,MAAMP,KAAK,GAAGkB,kBAAkB,CAACG,UAAU,GAAGP,SAAS,CAAC,CAAC;EAEzD,OAAOd,KAAK,KAAKsB,SAAS,GACtBA,SAAS,GACTlB,oBAAoB,CAACU,SAAS,CAAC,CAACS,OAAO,CAAC,SAAS,EAAEC,MAAM,CAACxB,KAAK,CAAC,CAAC;AACvE,CAAC;;AAED;AACO,MAAMC,YAAY,GAAGA,CAC1BwB,MAAmB,EACnBC,SAAiB,KACsD;EACvE,IAAI,CAACD,MAAM,EAAE;IACX,OAAOH,SAAS;EAClB;EAEA,MAAMK,cAAc,GAAGD,SAAS,CAACE,KAAK,CAAC,GAAG,CAAC;EAE3C,OAAOD,cAAc,CAACE,MAAM,CAC1B,CAACC,WAAW,EAAEC,aAAa,KAAK;IAC9B,IAAI,CAACD,WAAW,EAAE;MAChB,OAAOR,SAAS;IAClB;IAEA,OAAQQ,WAAW,CAAWC,aAAa,CAAC;EAC9C,CAAC,EACDN,MACF,CAAC;AACH,CAAC;AAAC1B,OAAA,CAAAE,YAAA,GAAAA,YAAA;AAOK,MAAME,kBAAqD,GAAGA,CACnE;EACE6B,IAAI;EACJX;AACF,CAAC,KACE;EACH,MAAMY,WAAW,GAAG,IAAAC,6BAAc,EAAC,CAAC;EAEpC,IAAI,CAACD,WAAW,EAAE;IAChB,OAAO,IAAI;EACb;EAEA,MAAM;IAAEE,SAAS,EAAE;MAAEV;IAAO;EAAE,CAAC,GAAGQ,WAAW;EAE7C,MAAMG,UAAU,GAAGnC,YAAY,CAACwB,MAAM,EAAEO,IAAI,CAAC;EAE7C,IAAI,CAACI,UAAU,EAAE;IACf,OAAO,IAAI;EACb;;EAEA;EACA,MAAMC,cAAc,GAAGA,CAAA,KAA0B;IAC/C,IAAID,UAAU,CAACE,OAAO,EAAE;MACtB,OAAOF,UAAU,CAACE,OAAO;IAC3B;IAEA,IACEF,UAAU,CAACG,IAAI,IACZH,UAAU,CAACI,KAAK,IAChB,OAAOJ,UAAU,CAACI,KAAK,CAACJ,UAAU,CAACG,IAAI,CAAC,KAAK,QAAQ,EACxD;MACA,OAAOH,UAAU,CAACI,KAAK,CAACJ,UAAU,CAACG,IAAI,CAAC;IAC1C;IAEA,OAAOnB,sBAAsB,CAACgB,UAAU,CAACG,IAAI,EAAElB,UAAU,CAAC;EAC5D,CAAC;EAED,MAAMiB,OAAO,GAAGD,cAAc,CAAC,CAAC,IAAIjC,oBAAoB,CAACQ,OAAO;EAEhE,oBACEP,MAAA,CAAAH,OAAA,CAAAuC,aAAA;IAAMC,SAAS,EAAC,YAAY;IAACC,EAAE,EAAG,GAAIX,IAAI;EAAY,gBACpD3B,MAAA,CAAAH,OAAA,CAAAuC,aAAA;IAAMC,SAAS,EAAC;EAAS,gBACvBrC,MAAA,CAAAH,OAAA,CAAAuC,aAAA;IAAMC,SAAS,EAAC;EAAO,GAAGJ,OAAe,CACrC,CACF,CAAC;AAEX,CAAC;AAACvC,OAAA,CAAAI,kBAAA,GAAAA,kBAAA;AAAA,IAAAyC,QAAA,GAAA7C,OAAA,CAAAG,OAAA,GAEaC,kBAAkB","ignoreList":[]}

package/dist/cjs/exampleUIs/exampleComponents/DemoContactForm.js

@@ -75,8 +75,7 @@ const DemoContactForm = ({
   }), /*#__PURE__*/_react.default.createElement(_Textarea.Textarea, {
     field: {
       id: 'yourMessage',
-      name: 'yourMessage',
-      type: 'textarea'
+      name: 'yourMessage'
     },
     label: {
       text: 'Your message'

package/dist/cjs/exampleUIs/exampleComponents/DemoContactForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"DemoContactForm.js","names":["_react","_interopRequireWildcard","require","_reactHookForm","_InputVariants","_SimpleButton","_Textarea","_InputCheckbox","_Tooltip","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","DemoContactForm","onConsentClick","consentIsGiven","hasConsent","setHasConsent","React","useState","formContext","useFormContext","handleConsentClick","event","isChecked","target","checked","setValue","useEffect","createElement","className","TextInput","field","id","name","label","text","validation","required","EmailInput","PhoneInput","Textarea","type","InputCheckbox","defaultChecked","value","onChange","Tooltip","icon","SimpleButton","buttonType","buttonStyle","color","rightIcon","exports","_default"],"sources":["../../../../src/exampleUIs/exampleComponents/DemoContactForm.tsx"],"sourcesContent":["import React, { FC, useEffect } from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport {\n  TextInput,\n  EmailInput,\n  PhoneInput\n} from '../../components/form/formFields/subComponents/InputVariants';\nimport { SimpleButton } from '../../components/form/buttons/SimpleButton';\nimport { Textarea } from '../../components/form/formFields/subComponents/textarea/Textarea';\nimport { InputCheckbox } from '../../components/form/formFields/subComponents/inputs/checkbox/InputCheckbox';\nimport { Tooltip } from '../../components/design/tooltip/Tooltip';\nimport { GenericFunction } from '../../interfaces/generic.interface';\n\nexport const DemoContactForm: FC<{\n  onConsentClick: GenericFunction;\n  consentIsGiven: boolean;\n}> = (\n  {\n    onConsentClick = () => {},\n    consentIsGiven = false\n  }\n) => {\n  const [hasConsent, setHasConsent] = React.useState<boolean>(consentIsGiven);\n\n  const formContext = useFormContext();\n\n  const handleConsentClick = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const isChecked = event.target.checked;\n    formContext.setValue('consentCheckbox1', isChecked);\n    setHasConsent(isChecked);\n    onConsentClick(isChecked);\n  };\n\n  useEffect(() => {\n    formContext.setValue('consentCheckbox1', consentIsGiven);\n    setHasConsent(consentIsGiven);\n  });\n\n  return (\n    <div>\n      <h2 className=\"spaceAfter\">Can't find what you're looking for?</h2>\n      <h3 className=\"spaceAfter\">Send us a message</h3>\n\n      <p className=\"spaceAfter\">To provide you with the best service possible we'll need some details about you.</p>\n\n      <TextInput\n        field={ {\n          id: 'firstName',\n          name: 'firstName'\n        } }\n        label={ {\n          text: 'First Name'\n        } }\n        validation={ {\n          required: 'This is required'\n        } }\n      />\n\n      <TextInput\n        field={ {\n          id: 'lastName',\n          name: 'lastName'\n        } }\n        label={ {\n          text: 'Last Name'\n        } }\n        validation={ {\n          required: 'This is required'\n        } }\n      />\n\n      <EmailInput\n        field={ {\n          id: 'yourEmail',\n          name: 'yourEmail'\n        } }\n        label={ {\n          text: 'Your email address'\n        } }\n      />\n\n      <PhoneInput\n        field={ {\n          id: 'yourPhone',\n          name: 'yourPhone'\n        } }\n        label={ {\n          text: 'A number we can reach you on'\n        } }\n      />\n\n      <Textarea\n        field={ {\n          id: 'yourMessage',\n          name: 'yourMessage',\n          type: 'textarea'\n        } }\n        label={ {\n          text: 'Your message'\n        } }\n      />\n\n      <InputCheckbox\n        field={ {\n          defaultChecked: hasConsent,\n          id: 'consentCheckbox1',\n          name: 'consentCheckbox1',\n          value: 'consentIsGiven',\n          onChange: (event: React.ChangeEvent<HTMLInputElement>) => handleConsentClick(event)\n        } }\n        label={ {\n          text: <span>By leaving this checked you are <strong>consenting</strong> to one of our support staff contacting you in the event that they need more information. <Tooltip icon=\"info\">More about why we might contact you.</Tooltip></span>\n        } }\n      />\n\n      <div className=\"spaceBefore flexRow\">\n        <SimpleButton\n          label=\"Send Message\"\n          id=\"demoSubmitButton1\"\n          buttonType=\"submit\"\n          buttonStyle={\n            {\n              color: 'primary'\n            }\n          }\n          rightIcon={ {\n            icon: 'telegram'\n          } }\n        />\n      </div>\n    </div>\n  );\n};\n\nexport default DemoContactForm;"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,cAAA,GAAAD,OAAA;AACA,IAAAE,cAAA,GAAAF,OAAA;AAKA,IAAAG,aAAA,GAAAH,OAAA;AACA,IAAAI,SAAA,GAAAJ,OAAA;AACA,IAAAK,cAAA,GAAAL,OAAA;AACA,IAAAM,QAAA,GAAAN,OAAA;AAAkE,SAAAD,wBAAAQ,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAV,uBAAA,YAAAA,CAAAQ,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAG3D,MAAMkB,eAGX,GAAGA,CACH;EACEC,cAAc,GAAGA,CAAA,KAAM,CAAC,CAAC;EACzBC,cAAc,GAAG;AACnB,CAAC,KACE;EACH,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAGC,cAAK,CAACC,QAAQ,CAAUJ,cAAc,CAAC;EAE3E,MAAMK,WAAW,GAAG,IAAAC,6BAAc,EAAC,CAAC;EAEpC,MAAMC,kBAAkB,GAAIC,KAA0C,IAAK;IACzE,MAAMC,SAAS,GAAGD,KAAK,CAACE,MAAM,CAACC,OAAO;IACtCN,WAAW,CAACO,QAAQ,CAAC,kBAAkB,EAAEH,SAAS,CAAC;IACnDP,aAAa,CAACO,SAAS,CAAC;IACxBV,cAAc,CAACU,SAAS,CAAC;EAC3B,CAAC;EAED,IAAAI,gBAAS,EAAC,MAAM;IACdR,WAAW,CAACO,QAAQ,CAAC,kBAAkB,EAAEZ,cAAc,CAAC;IACxDE,aAAa,CAACF,cAAc,CAAC;EAC/B,CAAC,CAAC;EAEF,oBACE9B,MAAA,CAAAmB,OAAA,CAAAyB,aAAA,2BACE5C,MAAA,CAAAmB,OAAA,CAAAyB,aAAA;IAAIC,SAAS,EAAC;EAAY,GAAC,qCAAuC,CAAC,eACnE7C,MAAA,CAAAmB,OAAA,CAAAyB,aAAA;IAAIC,SAAS,EAAC;EAAY,GAAC,mBAAqB,CAAC,eAEjD7C,MAAA,CAAAmB,OAAA,CAAAyB,aAAA;IAAGC,SAAS,EAAC;EAAY,GAAC,kFAAmF,CAAC,eAE9G7C,MAAA,CAAAmB,OAAA,CAAAyB,aAAA,CAACxC,cAAA,CAAA0C,SAAS;IACRC,KAAK,EAAG;MACNC,EAAE,EAAE,WAAW;MACfC,IAAI,EAAE;IACR,CAAG;IACHC,KAAK,EAAG;MACNC,IAAI,EAAE;IACR,CAAG;IACHC,UAAU,EAAG;MACXC,QAAQ,EAAE;IACZ;EAAG,CACJ,CAAC,eAEFrD,MAAA,CAAAmB,OAAA,CAAAyB,aAAA,CAACxC,cAAA,CAAA0C,SAAS;IACRC,KAAK,EAAG;MACNC,EAAE,EAAE,UAAU;MACdC,IAAI,EAAE;IACR,CAAG;IACHC,KAAK,EAAG;MACNC,IAAI,EAAE;IACR,CAAG;IACHC,UAAU,EAAG;MACXC,QAAQ,EAAE;IACZ;EAAG,CACJ,CAAC,eAEFrD,MAAA,CAAAmB,OAAA,CAAAyB,aAAA,CAACxC,cAAA,CAAAkD,UAAU;IACTP,KAAK,EAAG;MACNC,EAAE,EAAE,WAAW;MACfC,IAAI,EAAE;IACR,CAAG;IACHC,KAAK,EAAG;MACNC,IAAI,EAAE;IACR;EAAG,CACJ,CAAC,eAEFnD,MAAA,CAAAmB,OAAA,CAAAyB,aAAA,CAACxC,cAAA,CAAAmD,UAAU;IACTR,KAAK,EAAG;MACNC,EAAE,EAAE,WAAW;MACfC,IAAI,EAAE;IACR,CAAG;IACHC,KAAK,EAAG;MACNC,IAAI,EAAE;IACR;EAAG,CACJ,CAAC,eAEFnD,MAAA,CAAAmB,OAAA,CAAAyB,aAAA,CAACtC,SAAA,CAAAkD,QAAQ;IACPT,KAAK,EAAG;MACNC,EAAE,EAAE,aAAa;MACjBC,IAAI,EAAE,aAAa;MACnBQ,IAAI,EAAE;IACR,CAAG;IACHP,KAAK,EAAG;MACNC,IAAI,EAAE;IACR;EAAG,CACJ,CAAC,eAEFnD,MAAA,CAAAmB,OAAA,CAAAyB,aAAA,CAACrC,cAAA,CAAAmD,aAAa;IACZX,KAAK,EAAG;MACNY,cAAc,EAAE5B,UAAU;MAC1BiB,EAAE,EAAE,kBAAkB;MACtBC,IAAI,EAAE,kBAAkB;MACxBW,KAAK,EAAE,gBAAgB;MACvBC,QAAQ,EAAGvB,KAA0C,IAAKD,kBAAkB,CAACC,KAAK;IACpF,CAAG;IACHY,KAAK,EAAG;MACNC,IAAI,eAAEnD,MAAA,CAAAmB,OAAA,CAAAyB,aAAA,eAAM,kCAAgC,eAAA5C,MAAA,CAAAmB,OAAA,CAAAyB,aAAA,iBAAQ,YAAkB,CAAC,8FAA0F,eAAA5C,MAAA,CAAAmB,OAAA,CAAAyB,aAAA,CAACpC,QAAA,CAAAsD,OAAO;QAACC,IAAI,EAAC;MAAM,GAAC,sCAA6C,CAAO;IAC5O;EAAG,CACJ,CAAC,eAEF/D,MAAA,CAAAmB,OAAA,CAAAyB,aAAA;IAAKC,SAAS,EAAC;EAAqB,gBAClC7C,MAAA,CAAAmB,OAAA,CAAAyB,aAAA,CAACvC,aAAA,CAAA2D,YAAY;IACXd,KAAK,EAAC,cAAc;IACpBF,EAAE,EAAC,mBAAmB;IACtBiB,UAAU,EAAC,QAAQ;IACnBC,WAAW,EACT;MACEC,KAAK,EAAE;IACT,CACD;IACDC,SAAS,EAAG;MACVL,IAAI,EAAE;IACR;EAAG,CACJ,CACE,CACF,CAAC;AAEV,CAAC;AAACM,OAAA,CAAAzC,eAAA,GAAAA,eAAA;AAAA,IAAA0C,QAAA,GAAAD,OAAA,CAAAlD,OAAA,GAEaS,eAAe","ignoreList":[]}
+{"version":3,"file":"DemoContactForm.js","names":["_react","_interopRequireWildcard","require","_reactHookForm","_InputVariants","_SimpleButton","_Textarea","_InputCheckbox","_Tooltip","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","DemoContactForm","onConsentClick","consentIsGiven","hasConsent","setHasConsent","React","useState","formContext","useFormContext","handleConsentClick","event","isChecked","target","checked","setValue","useEffect","createElement","className","TextInput","field","id","name","label","text","validation","required","EmailInput","PhoneInput","Textarea","InputCheckbox","defaultChecked","value","onChange","Tooltip","icon","SimpleButton","buttonType","buttonStyle","color","rightIcon","exports","_default"],"sources":["../../../../src/exampleUIs/exampleComponents/DemoContactForm.tsx"],"sourcesContent":["import React, { FC, useEffect } from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport {\n  TextInput,\n  EmailInput,\n  PhoneInput\n} from '../../components/form/formFields/subComponents/InputVariants';\nimport { SimpleButton } from '../../components/form/buttons/SimpleButton';\nimport { Textarea } from '../../components/form/formFields/subComponents/textarea/Textarea';\nimport { InputCheckbox } from '../../components/form/formFields/subComponents/inputs/checkbox/InputCheckbox';\nimport { Tooltip } from '../../components/design/tooltip/Tooltip';\nimport { GenericFunction } from '../../interfaces/generic.interface';\n\nexport const DemoContactForm: FC<{\n  onConsentClick: GenericFunction;\n  consentIsGiven: boolean;\n}> = (\n  {\n    onConsentClick = () => {},\n    consentIsGiven = false\n  }\n) => {\n  const [hasConsent, setHasConsent] = React.useState<boolean>(consentIsGiven);\n\n  const formContext = useFormContext();\n\n  const handleConsentClick = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const isChecked = event.target.checked;\n    formContext.setValue('consentCheckbox1', isChecked);\n    setHasConsent(isChecked);\n    onConsentClick(isChecked);\n  };\n\n  useEffect(() => {\n    formContext.setValue('consentCheckbox1', consentIsGiven);\n    setHasConsent(consentIsGiven);\n  });\n\n  return (\n    <div>\n      <h2 className=\"spaceAfter\">Can't find what you're looking for?</h2>\n      <h3 className=\"spaceAfter\">Send us a message</h3>\n\n      <p className=\"spaceAfter\">To provide you with the best service possible we'll need some details about you.</p>\n\n      <TextInput\n        field={ {\n          id: 'firstName',\n          name: 'firstName'\n        } }\n        label={ {\n          text: 'First Name'\n        } }\n        validation={ {\n          required: 'This is required'\n        } }\n      />\n\n      <TextInput\n        field={ {\n          id: 'lastName',\n          name: 'lastName'\n        } }\n        label={ {\n          text: 'Last Name'\n        } }\n        validation={ {\n          required: 'This is required'\n        } }\n      />\n\n      <EmailInput\n        field={ {\n          id: 'yourEmail',\n          name: 'yourEmail'\n        } }\n        label={ {\n          text: 'Your email address'\n        } }\n      />\n\n      <PhoneInput\n        field={ {\n          id: 'yourPhone',\n          name: 'yourPhone'\n        } }\n        label={ {\n          text: 'A number we can reach you on'\n        } }\n      />\n\n      <Textarea\n        field={ {\n          id: 'yourMessage',\n          name: 'yourMessage',\n        } }\n        label={ {\n          text: 'Your message'\n        } }\n      />\n\n      <InputCheckbox\n        field={ {\n          defaultChecked: hasConsent,\n          id: 'consentCheckbox1',\n          name: 'consentCheckbox1',\n          value: 'consentIsGiven',\n          onChange: (event: React.ChangeEvent<HTMLInputElement>) => handleConsentClick(event)\n        } }\n        label={ {\n          text: <span>By leaving this checked you are <strong>consenting</strong> to one of our support staff contacting you in the event that they need more information. <Tooltip icon=\"info\">More about why we might contact you.</Tooltip></span>\n        } }\n      />\n\n      <div className=\"spaceBefore flexRow\">\n        <SimpleButton\n          label=\"Send Message\"\n          id=\"demoSubmitButton1\"\n          buttonType=\"submit\"\n          buttonStyle={\n            {\n              color: 'primary'\n            }\n          }\n          rightIcon={ {\n            icon: 'telegram'\n          } }\n        />\n      </div>\n    </div>\n  );\n};\n\nexport default DemoContactForm;"],"mappings":"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","ignoreList":[]}

package/dist/cjs/helpers/index.js

@@ -33,6 +33,12 @@ Object.defineProperty(exports, "capitalizeFirstLetter", {
     return _stringHelpers.capitalizeFirstLetter;
   }
 });
+Object.defineProperty(exports, "clampToGraphemeMax", {
+  enumerable: true,
+  get: function () {
+    return _stringHelpers.clampToGraphemeMax;
+  }
+});
 Object.defineProperty(exports, "createCompareValueOverride", {
   enumerable: true,
   get: function () {
@@ -201,6 +207,12 @@ Object.defineProperty(exports, "getBranchFromPath", {
     return _objectHelpers.getBranchFromPath;
   }
 });
+Object.defineProperty(exports, "getCharacterCount", {
+  enumerable: true,
+  get: function () {
+    return _stringHelpers.getCharacterCount;
+  }
+});
 Object.defineProperty(exports, "getInitialsOrAcronym", {
   enumerable: true,
   get: function () {

package/dist/cjs/helpers/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_ageHelpers","require","_arrayHelpers","_dataHelpers","_dateHelpers","_formatters","_numberHelpers","_stringHelpers","_objectHelpers"],"sources":["../../../src/helpers/index.ts"],"sourcesContent":["export {\n  getMinAge,\n  getMaxAge,\n  getMinAndMaxAges,\n  validateBirthdate,\n  isDateEntryComplete,\n  getAgeInWeeks,\n  getAgeInYears\n} from './ageHelpers';\n\nexport {\n  binaryFindInArray,\n  addAndSortArray,\n  moveItemInArrayMutate,\n  moveItemInArrayCopy,\n  getRandomItemFromArray,\n  getItemIndexWithinArray,\n  getRoundedMedian,\n  getMostOccurringBoolean,\n  cssClassesArrayToString\n} from './arrayHelpers';\n\nexport {\n  transformPlacesData,\n  extractNamePieces\n} from './dataHelpers';\nexport type { NamePieces } from './dataHelpers';\n\nexport {\n  dateToShortIsoString,\n  isValidDate,\n  dateToShortReadableDate,\n  dateToShortReadableMonth,\n  timeStampToShortReadableDate,\n  dateToReadableTime,\n  dateToShortReadableDateTime,\n  getLastDateOfMonth,\n  daysSince\n} from './dateHelpers';\n\nexport {\n  USER_CURRENCY,\n  intlCurrencyFormatter,\n  intlNumberFormatter,\n  formatNumberForLocale,\n  formatAsCurrencyForLocale,\n  getNumberAbbreviation,\n  formatRoundedNumberWithAbbreviation,\n  formatNumberWithAbbreviation,\n  formatNumberForChartAxis,\n  formatAsSimpleCurrencyForChartAxis,\n  formatAsInternationalCurrencyForChartAxis,\n  formatAsCurrencyWithAbbreviation,\n  formatFileSize\n} from './formatters';\n\nexport {\n  getRandomNumberBelow,\n  getRandomBetweenInclusive,\n  getRandomBetweenExclusive,\n  hashCode,\n  roundToDecimal,\n  formatNumberToMinDigits,\n  formatDigitalTime\n} from './numberHelpers';\n\nexport {\n  richTextParser,\n  capitalize,\n  capitalizeFirstLetter,\n  lowerCaseFirstLetter,\n  useAnInsteadOfA,\n  splitCamelCase,\n  pluralize,\n  pluralizeIfNeeded,\n  getInitialsOrAcronym\n} from './stringHelpers';\n\nexport {\n  objectsAreTheSame,\n  isAnObject,\n  createCompareValueOverride,\n  deepMergeObjects,\n  overrideMergeObjects,\n  makeInheritanceObject,\n  updateNestedProperty,\n  filterObject,\n  getArrayOfObjectKeys,\n  getArrayOfReadableObjectKeys,\n  getBranchFromPath,\n  deepRemoveProps\n} from './objectHelpers';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,WAAA,GAAAC,OAAA;AAUA,IAAAC,aAAA,GAAAD,OAAA;AAYA,IAAAE,YAAA,GAAAF,OAAA;AAMA,IAAAG,YAAA,GAAAH,OAAA;AAYA,IAAAI,WAAA,GAAAJ,OAAA;AAgBA,IAAAK,cAAA,GAAAL,OAAA;AAUA,IAAAM,cAAA,GAAAN,OAAA;AAYA,IAAAO,cAAA,GAAAP,OAAA","ignoreList":[]}
+{"version":3,"file":"index.js","names":["_ageHelpers","require","_arrayHelpers","_dataHelpers","_dateHelpers","_formatters","_numberHelpers","_stringHelpers","_objectHelpers"],"sources":["../../../src/helpers/index.ts"],"sourcesContent":["export {\n  getMinAge,\n  getMaxAge,\n  getMinAndMaxAges,\n  validateBirthdate,\n  isDateEntryComplete,\n  getAgeInWeeks,\n  getAgeInYears\n} from './ageHelpers';\n\nexport {\n  binaryFindInArray,\n  addAndSortArray,\n  moveItemInArrayMutate,\n  moveItemInArrayCopy,\n  getRandomItemFromArray,\n  getItemIndexWithinArray,\n  getRoundedMedian,\n  getMostOccurringBoolean,\n  cssClassesArrayToString\n} from './arrayHelpers';\n\nexport {\n  transformPlacesData,\n  extractNamePieces\n} from './dataHelpers';\nexport type { NamePieces } from './dataHelpers';\n\nexport {\n  dateToShortIsoString,\n  isValidDate,\n  dateToShortReadableDate,\n  dateToShortReadableMonth,\n  timeStampToShortReadableDate,\n  dateToReadableTime,\n  dateToShortReadableDateTime,\n  getLastDateOfMonth,\n  daysSince\n} from './dateHelpers';\n\nexport {\n  USER_CURRENCY,\n  intlCurrencyFormatter,\n  intlNumberFormatter,\n  formatNumberForLocale,\n  formatAsCurrencyForLocale,\n  getNumberAbbreviation,\n  formatRoundedNumberWithAbbreviation,\n  formatNumberWithAbbreviation,\n  formatNumberForChartAxis,\n  formatAsSimpleCurrencyForChartAxis,\n  formatAsInternationalCurrencyForChartAxis,\n  formatAsCurrencyWithAbbreviation,\n  formatFileSize\n} from './formatters';\n\nexport {\n  getRandomNumberBelow,\n  getRandomBetweenInclusive,\n  getRandomBetweenExclusive,\n  hashCode,\n  roundToDecimal,\n  formatNumberToMinDigits,\n  formatDigitalTime\n} from './numberHelpers';\n\nexport {\n  richTextParser,\n  capitalize,\n  capitalizeFirstLetter,\n  lowerCaseFirstLetter,\n  getCharacterCount,\n  clampToGraphemeMax,\n  useAnInsteadOfA,\n  splitCamelCase,\n  pluralize,\n  pluralizeIfNeeded,\n  getInitialsOrAcronym\n} from './stringHelpers';\n\nexport {\n  objectsAreTheSame,\n  isAnObject,\n  createCompareValueOverride,\n  deepMergeObjects,\n  overrideMergeObjects,\n  makeInheritanceObject,\n  updateNestedProperty,\n  filterObject,\n  getArrayOfObjectKeys,\n  getArrayOfReadableObjectKeys,\n  getBranchFromPath,\n  deepRemoveProps\n} from './objectHelpers';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,WAAA,GAAAC,OAAA;AAUA,IAAAC,aAAA,GAAAD,OAAA;AAYA,IAAAE,YAAA,GAAAF,OAAA;AAMA,IAAAG,YAAA,GAAAH,OAAA;AAYA,IAAAI,WAAA,GAAAJ,OAAA;AAgBA,IAAAK,cAAA,GAAAL,OAAA;AAUA,IAAAM,cAAA,GAAAN,OAAA;AAcA,IAAAO,cAAA,GAAAP,OAAA","ignoreList":[]}

package/dist/cjs/helpers/stringHelpers.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useAnInsteadOfA = exports.splitCamelCase = exports.richTextParser = exports.pluralizeIfNeeded = exports.pluralize = exports.lowerCaseFirstLetter = exports.getInitialsOrAcronym = exports.capitalizeFirstLetter = exports.capitalize = void 0;
+exports.useAnInsteadOfA = exports.splitCamelCase = exports.richTextParser = exports.pluralizeIfNeeded = exports.pluralize = exports.lowerCaseFirstLetter = exports.getInitialsOrAcronym = exports.getCharacterCount = exports.clampToGraphemeMax = exports.capitalizeFirstLetter = exports.capitalize = void 0;
 var _htmlReactParser = _interopRequireDefault(require("html-react-parser"));
 const richTextParser = (richText, supportEscapedCharacters) => {
   // Adjusts text to replace line breaks with <br/> tags
@@ -42,13 +42,59 @@ const capitalizeFirstLetter = pString => `${pString.substring(0, 1).toUpperCase(
 exports.capitalizeFirstLetter = capitalizeFirstLetter;
 const lowerCaseFirstLetter = pString => `${pString.substring(0, 1).toLowerCase()}${pString.substring(1)}`;
 
+/**
+ * Splits a string into grapheme clusters so text metrics and clamping can share
+ * the same segmentation logic without forcing callers to pass pre-segmented data.
+ *
+ * @param {string} pString - The string to segment.
+ * @returns {string[]} The grapheme units in order, falling back to code points when Intl.Segmenter is unavailable.
+ */
+exports.lowerCaseFirstLetter = lowerCaseFirstLetter;
+const getGraphemeSegments = pString => {
+  if (typeof Intl !== 'undefined' && 'Segmenter' in Intl) {
+    const segmenter = new Intl.Segmenter(undefined, {
+      granularity: 'grapheme'
+    });
+    return Array.from(segmenter.segment(pString), ({
+      segment
+    }) => segment);
+  }
+  return Array.from(pString);
+};
+
+/**
+ * Counts user-perceived characters (grapheme clusters) so emojis and composed
+ * characters such as accented letters count as one.
+ *
+ * @param {string} pString - A string of text.
+ * @returns {number} The number of grapheme clusters, falling back to code points where Intl.Segmenter is unavailable.
+ */
+const getCharacterCount = pString => getGraphemeSegments(pString).length;
+
+/**
+ * Truncates a string to a maximum number of grapheme clusters without splitting
+ * an emoji or composed character in half.
+ *
+ * @param {string} pString - A string of text.
+ * @param {number} maxAllowed - The maximum number of user-perceived characters to keep.
+ * @returns {string} The truncated string, or the unchanged pString if it is already within the limit.
+ */
+exports.getCharacterCount = getCharacterCount;
+const clampToGraphemeMax = (pString, maxAllowed) => {
+  const graphemeSegments = getGraphemeSegments(pString);
+  if (graphemeSegments.length <= maxAllowed) {
+    return pString;
+  }
+  return graphemeSegments.slice(0, maxAllowed).join('');
+};
+
 /**
  * Determines if "an" should be used instead of "a" before the given word.
  *
  * @param {string} word - The word to check.
  * @returns {boolean} True if "an" should be used, false otherwise.
  */
-exports.lowerCaseFirstLetter = lowerCaseFirstLetter;
+exports.clampToGraphemeMax = clampToGraphemeMax;
 const useAnInsteadOfA = word => {
   const lettersRequiringAn = ['a', 'e', 'i', 'o', 'u', 'h'];
   const firstLetter = word.substring(0, 1).toLowerCase();

package/dist/cjs/helpers/stringHelpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"stringHelpers.js","names":["_htmlReactParser","_interopRequireDefault","require","richTextParser","richText","supportEscapedCharacters","adjustedText","split","join","parse","exports","capitalize","pString","substring","toUpperCase","toLowerCase","capitalizeFirstLetter","lowerCaseFirstLetter","useAnInsteadOfA","word","lettersRequiringAn","firstLetter","includes","splitCamelCase","replace","pluralize","endsWith","slice","pluralizeIfNeeded","count","getInitialsOrAcronym","map","piece"],"sources":["../../../src/helpers/stringHelpers.ts"],"sourcesContent":["import React from 'react';\nimport parse from 'html-react-parser';\n\nexport const richTextParser = (richText: string, supportEscapedCharacters: boolean): string | React.JSX.Element | React.JSX.Element[] => {\n  // Adjusts text to replace line breaks with <br/> tags\n  const adjustedText = richText.split('\\r\\n').join('<br/>');\n  if (supportEscapedCharacters) {\n    return parse(adjustedText);\n  }\n  return parse(richText);\n};\n\n/**\n * Takes a string and returns it with the first character capitalized and the remaining characters as lowercase.\n *\n * @param {string} pString - A string of text.\n * @returns {string} The capitalized string or the unchanged pString if anything other than a string is sent to it.\n */\nexport const capitalize = (pString: string): string => `${ pString.substring(0, 1).toUpperCase() }${ pString.substring(1).toLowerCase() }`;\n\n/**\n * Capitalizes the first letter of the given string.\n *\n * @param {string} pString - A string of text.\n * @returns {string} The string with the first letter capitalized, or the unchanged pString if it's not a string.\n */\nexport const capitalizeFirstLetter = (pString: string): string => `${ pString.substring(0, 1).toUpperCase() }${ pString.substring(1) }`;\n\n/**\n * Converts the first letter of the given string to lowercase.\n *\n * @param {string} pString - A string of text.\n * @returns {string} The string with the first letter converted to lowercase, or the unchanged pString if it's not a string.\n */\nexport const lowerCaseFirstLetter = (pString: string): string => `${ pString.substring(0, 1).toLowerCase() }${ pString.substring(1) }`;\n\n/**\n * Determines if \"an\" should be used instead of \"a\" before the given word.\n *\n * @param {string} word - The word to check.\n * @returns {boolean} True if \"an\" should be used, false otherwise.\n */\nexport const useAnInsteadOfA = (word: string): boolean => {\n  const lettersRequiringAn = ['a', 'e', 'i', 'o', 'u', 'h'];\n  const firstLetter = word.substring(0, 1).toLowerCase();\n  return lettersRequiringAn.includes(firstLetter);\n};\n\nexport const splitCamelCase = (pString: string): string => pString\n// Single regex to handle all cases: lowercase followed by uppercase/number, or number followed by letter\n  .replace(/([a-z])([A-Z0-9])|([0-9])([a-zA-Z])/g, '$1$3 $2$4')\n// Insert a space between capital letters and lowercase letters where missing\n  .replace(/([A-Z])([A-Z][a-z])/g, '$1 $2')\n// Convert the entire string to lowercase for consistency\n  .toLowerCase();\n\nexport const pluralize = (pString: string): string => {\n  if (pString.endsWith('y')) {\n    // If the word ends with 'y', replace 'y' with 'ies'\n    return `${ pString.slice(0, -1) }ies`;\n  } if (pString.endsWith('s') || pString.endsWith('x') || pString.endsWith('z') || pString.endsWith('ch') || pString.endsWith('sh')) {\n    // If the word ends with s, x, z, ch, or sh, add 'es'\n    return `${ pString }es`;\n  }\n  // For other cases, just add 's'\n  return `${ pString }s`;\n};\n\nexport const pluralizeIfNeeded = (pString: string, count: number): string => {\n  if (count && count > 1) {\n    return pluralize(pString);\n  }\n  return pString;\n};\n\nexport const getInitialsOrAcronym = (pString: string): string => {\n  return pString.split(' ').map((piece) => capitalize(piece.substring(0, 1))).join('');\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"stringHelpers.js","names":["_htmlReactParser","_interopRequireDefault","require","richTextParser","richText","supportEscapedCharacters","adjustedText","split","join","parse","exports","capitalize","pString","substring","toUpperCase","toLowerCase","capitalizeFirstLetter","lowerCaseFirstLetter","getGraphemeSegments","Intl","segmenter","Segmenter","undefined","granularity","Array","from","segment","getCharacterCount","length","clampToGraphemeMax","maxAllowed","graphemeSegments","slice","useAnInsteadOfA","word","lettersRequiringAn","firstLetter","includes","splitCamelCase","replace","pluralize","endsWith","pluralizeIfNeeded","count","getInitialsOrAcronym","map","piece"],"sources":["../../../src/helpers/stringHelpers.ts"],"sourcesContent":["import React from 'react';\nimport parse from 'html-react-parser';\n\nexport const richTextParser = (richText: string, supportEscapedCharacters: boolean): string | React.JSX.Element | React.JSX.Element[] => {\n  // Adjusts text to replace line breaks with <br/> tags\n  const adjustedText = richText.split('\\r\\n').join('<br/>');\n  if (supportEscapedCharacters) {\n    return parse(adjustedText);\n  }\n  return parse(richText);\n};\n\n/**\n * Takes a string and returns it with the first character capitalized and the remaining characters as lowercase.\n *\n * @param {string} pString - A string of text.\n * @returns {string} The capitalized string or the unchanged pString if anything other than a string is sent to it.\n */\nexport const capitalize = (pString: string): string => `${ pString.substring(0, 1).toUpperCase() }${ pString.substring(1).toLowerCase() }`;\n\n/**\n * Capitalizes the first letter of the given string.\n *\n * @param {string} pString - A string of text.\n * @returns {string} The string with the first letter capitalized, or the unchanged pString if it's not a string.\n */\nexport const capitalizeFirstLetter = (pString: string): string => `${ pString.substring(0, 1).toUpperCase() }${ pString.substring(1) }`;\n\n/**\n * Converts the first letter of the given string to lowercase.\n *\n * @param {string} pString - A string of text.\n * @returns {string} The string with the first letter converted to lowercase, or the unchanged pString if it's not a string.\n */\nexport const lowerCaseFirstLetter = (pString: string): string => `${ pString.substring(0, 1).toLowerCase() }${ pString.substring(1) }`;\n\n/**\n * Splits a string into grapheme clusters so text metrics and clamping can share\n * the same segmentation logic without forcing callers to pass pre-segmented data.\n *\n * @param {string} pString - The string to segment.\n * @returns {string[]} The grapheme units in order, falling back to code points when Intl.Segmenter is unavailable.\n */\nconst getGraphemeSegments = (pString: string): string[] => {\n  if (typeof Intl !== 'undefined' && 'Segmenter' in Intl) {\n    const segmenter = new Intl.Segmenter(undefined, { granularity: 'grapheme' });\n\n    return Array.from(segmenter.segment(pString), ({ segment }) => segment);\n  }\n\n  return Array.from(pString);\n};\n\n/**\n * Counts user-perceived characters (grapheme clusters) so emojis and composed\n * characters such as accented letters count as one.\n *\n * @param {string} pString - A string of text.\n * @returns {number} The number of grapheme clusters, falling back to code points where Intl.Segmenter is unavailable.\n */\nexport const getCharacterCount = (pString: string): number => getGraphemeSegments(pString).length;\n\n/**\n * Truncates a string to a maximum number of grapheme clusters without splitting\n * an emoji or composed character in half.\n *\n * @param {string} pString - A string of text.\n * @param {number} maxAllowed - The maximum number of user-perceived characters to keep.\n * @returns {string} The truncated string, or the unchanged pString if it is already within the limit.\n */\nexport const clampToGraphemeMax = (pString: string, maxAllowed: number): string => {\n  const graphemeSegments = getGraphemeSegments(pString);\n\n  if (graphemeSegments.length <= maxAllowed) {\n    return pString;\n  }\n\n  return graphemeSegments.slice(0, maxAllowed).join('');\n};\n\n/**\n * Determines if \"an\" should be used instead of \"a\" before the given word.\n *\n * @param {string} word - The word to check.\n * @returns {boolean} True if \"an\" should be used, false otherwise.\n */\nexport const useAnInsteadOfA = (word: string): boolean => {\n  const lettersRequiringAn = ['a', 'e', 'i', 'o', 'u', 'h'];\n  const firstLetter = word.substring(0, 1).toLowerCase();\n  return lettersRequiringAn.includes(firstLetter);\n};\n\nexport const splitCamelCase = (pString: string): string => pString\n// Single regex to handle all cases: lowercase followed by uppercase/number, or number followed by letter\n  .replace(/([a-z])([A-Z0-9])|([0-9])([a-zA-Z])/g, '$1$3 $2$4')\n// Insert a space between capital letters and lowercase letters where missing\n  .replace(/([A-Z])([A-Z][a-z])/g, '$1 $2')\n// Convert the entire string to lowercase for consistency\n  .toLowerCase();\n\nexport const pluralize = (pString: string): string => {\n  if (pString.endsWith('y')) {\n    // If the word ends with 'y', replace 'y' with 'ies'\n    return `${ pString.slice(0, -1) }ies`;\n  } if (pString.endsWith('s') || pString.endsWith('x') || pString.endsWith('z') || pString.endsWith('ch') || pString.endsWith('sh')) {\n    // If the word ends with s, x, z, ch, or sh, add 'es'\n    return `${ pString }es`;\n  }\n  // For other cases, just add 's'\n  return `${ pString }s`;\n};\n\nexport const pluralizeIfNeeded = (pString: string, count: number): string => {\n  if (count && count > 1) {\n    return pluralize(pString);\n  }\n  return pString;\n};\n\nexport const getInitialsOrAcronym = (pString: string): string => {\n  return pString.split(' ').map((piece) => capitalize(piece.substring(0, 1))).join('');\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/hooks/EdgeProximityDetect.js

@@ -11,6 +11,9 @@ const useOnEdgeProximityDetect = ({
   contentRef,
   requiresRecalc
 }) => {
+  // Only the shift classes this hook applied, so a consumer supplied
+  // customCssClass such as "shiftDown" is never stripped
+  const appliedShiftClasses = (0, _react.useRef)([]);
   const xAxisOverride = ({
     left,
     width,
@@ -45,6 +48,10 @@ const useOnEdgeProximityDetect = ({
   };
   (0, _react.useEffect)(() => {
     if (wrapperRef.current && contentRef.current && triggerRef.current && document && document.body) {
+      // Clear the previous run's shift, otherwise the content is measured in its
+      // already-shifted position and can accumulate opposing shift classes
+      appliedShiftClasses.current.forEach(cssClass => wrapperRef.current?.classList.remove(cssClass));
+      appliedShiftClasses.current = [];
       wrapperRef.current.classList.add('measuring');
       const {
         clientWidth,
@@ -58,22 +65,23 @@ const useOnEdgeProximityDetect = ({
       } = contentRef.current.getBoundingClientRect();
 
       // Check if it needs x-axis or y-axis adjustment
-      const xAxisOverrideCssClass = xAxisOverride({
+      const applyShift = cssClass => {
+        if (!cssClass || !wrapperRef.current || wrapperRef.current.classList.contains(cssClass)) {
+          return;
+        }
+        wrapperRef.current.classList.add(cssClass);
+        appliedShiftClasses.current.push(cssClass);
+      };
+      applyShift(xAxisOverride({
         left,
         width,
         clientWidth
-      });
-      if (xAxisOverrideCssClass) {
-        wrapperRef.current.classList.add(xAxisOverrideCssClass);
-      }
-      const yAxisOverrideCssClass = yAxisOverride({
+      }));
+      applyShift(yAxisOverride({
         top,
         height,
         clientHeight
-      });
-      if (yAxisOverrideCssClass) {
-        wrapperRef.current.classList.add(yAxisOverrideCssClass);
-      }
+      }));
       wrapperRef.current.classList.remove('measuring');
     }
   }, [triggerRef, wrapperRef, contentRef, requiresRecalc]);

package/dist/cjs/hooks/EdgeProximityDetect.js.map

@@ -1 +1 @@
-{"version":3,"file":"EdgeProximityDetect.js","names":["_react","require","useOnEdgeProximityDetect","triggerRef","wrapperRef","contentRef","requiresRecalc","xAxisOverride","left","width","clientWidth","yAxisOverride","top","height","clientHeight","useEffect","current","document","body","classList","add","getBoundingClientRect","xAxisOverrideCssClass","yAxisOverrideCssClass","remove","exports"],"sources":["../../../src/hooks/EdgeProximityDetect.ts"],"sourcesContent":["import React, { useEffect } from 'react';\n\ninterface UseOnEdgeProximityDetectProps {\n  triggerRef: React.RefObject<HTMLElement>;\n  wrapperRef: React.RefObject<HTMLElement>;\n  contentRef: React.RefObject<HTMLElement>;\n  requiresRecalc: boolean;\n  preferredPlacement?: 'right-middle' | 'right-top' | 'right-bottom' | 'left-middle' | 'left-top' | 'left-bottom' | 'top-middle' | 'top-top' | 'top-bottom' | 'bottom-middle' | 'bottom-top' | 'bottom-bottom';\n}\n\nexport const useOnEdgeProximityDetect = (\n  {\n    triggerRef,\n    wrapperRef,\n    contentRef,\n    requiresRecalc\n  }\n  :\n  UseOnEdgeProximityDetectProps\n) => {\n  const xAxisOverride = (\n    {\n      left,\n      width,\n      clientWidth\n    }\n    :\n    {\n      left: number;\n      width: number;\n      clientWidth: number\n    }\n  ) => {\n    // Too close to left\n    if (left < 0) {\n      return 'shiftRight';\n    }\n\n    // Too close to right\n    if (left + width > clientWidth) {\n      return 'shiftLeft';\n    }\n    return '';\n  };\n\n  const yAxisOverride = (\n    {\n      top,\n      height,\n      clientHeight\n    }\n    :\n    {\n      top: number;\n      height: number;\n      clientHeight: number\n    }\n  ) => {\n    // Too close to top\n    if (top - height < 0) {\n      return 'shiftDown';\n    }\n\n    // Too close to bottom\n    if (top + height > clientHeight) {\n      return 'shiftUp';\n    }\n    return '';\n  };\n\n  useEffect(() => {\n    if (\n      wrapperRef.current\n      && contentRef.current\n      && triggerRef.current\n      && document\n      && document.body\n    ) {\n      wrapperRef.current.classList.add('measuring');\n      const { clientWidth, clientHeight } = document.body;\n      const {\n        width, height, top, left\n      } = contentRef.current.getBoundingClientRect();\n\n      // Check if it needs x-axis or y-axis adjustment\n      const xAxisOverrideCssClass = xAxisOverride({ left, width, clientWidth });\n      if (xAxisOverrideCssClass) {\n        wrapperRef.current.classList.add(xAxisOverrideCssClass);\n      }\n\n      const yAxisOverrideCssClass = yAxisOverride({ top, height, clientHeight });\n      if (yAxisOverrideCssClass) {\n        wrapperRef.current.classList.add(yAxisOverrideCssClass);\n      }\n\n      wrapperRef.current.classList.remove('measuring');\n    }\n  }, [triggerRef, wrapperRef, contentRef, requiresRecalc]);\n\n  return {};\n};\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAUO,MAAMC,wBAAwB,GAAGA,CACtC;EACEC,UAAU;EACVC,UAAU;EACVC,UAAU;EACVC;AAG0B,CAAC,KAC1B;EACH,MAAMC,aAAa,GAAGA,CACpB;IACEC,IAAI;IACJC,KAAK;IACLC;EAOF,CAAC,KACE;IACH;IACA,IAAIF,IAAI,GAAG,CAAC,EAAE;MACZ,OAAO,YAAY;IACrB;;IAEA;IACA,IAAIA,IAAI,GAAGC,KAAK,GAAGC,WAAW,EAAE;MAC9B,OAAO,WAAW;IACpB;IACA,OAAO,EAAE;EACX,CAAC;EAED,MAAMC,aAAa,GAAGA,CACpB;IACEC,GAAG;IACHC,MAAM;IACNC;EAOF,CAAC,KACE;IACH;IACA,IAAIF,GAAG,GAAGC,MAAM,GAAG,CAAC,EAAE;MACpB,OAAO,WAAW;IACpB;;IAEA;IACA,IAAID,GAAG,GAAGC,MAAM,GAAGC,YAAY,EAAE;MAC/B,OAAO,SAAS;IAClB;IACA,OAAO,EAAE;EACX,CAAC;EAED,IAAAC,gBAAS,EAAC,MAAM;IACd,IACEX,UAAU,CAACY,OAAO,IACfX,UAAU,CAACW,OAAO,IAClBb,UAAU,CAACa,OAAO,IAClBC,QAAQ,IACRA,QAAQ,CAACC,IAAI,EAChB;MACAd,UAAU,CAACY,OAAO,CAACG,SAAS,CAACC,GAAG,CAAC,WAAW,CAAC;MAC7C,MAAM;QAAEV,WAAW;QAAEI;MAAa,CAAC,GAAGG,QAAQ,CAACC,IAAI;MACnD,MAAM;QACJT,KAAK;QAAEI,MAAM;QAAED,GAAG;QAAEJ;MACtB,CAAC,GAAGH,UAAU,CAACW,OAAO,CAACK,qBAAqB,CAAC,CAAC;;MAE9C;MACA,MAAMC,qBAAqB,GAAGf,aAAa,CAAC;QAAEC,IAAI;QAAEC,KAAK;QAAEC;MAAY,CAAC,CAAC;MACzE,IAAIY,qBAAqB,EAAE;QACzBlB,UAAU,CAACY,OAAO,CAACG,SAAS,CAACC,GAAG,CAACE,qBAAqB,CAAC;MACzD;MAEA,MAAMC,qBAAqB,GAAGZ,aAAa,CAAC;QAAEC,GAAG;QAAEC,MAAM;QAAEC;MAAa,CAAC,CAAC;MAC1E,IAAIS,qBAAqB,EAAE;QACzBnB,UAAU,CAACY,OAAO,CAACG,SAAS,CAACC,GAAG,CAACG,qBAAqB,CAAC;MACzD;MAEAnB,UAAU,CAACY,OAAO,CAACG,SAAS,CAACK,MAAM,CAAC,WAAW,CAAC;IAClD;EACF,CAAC,EAAE,CAACrB,UAAU,EAAEC,UAAU,EAAEC,UAAU,EAAEC,cAAc,CAAC,CAAC;EAExD,OAAO,CAAC,CAAC;AACX,CAAC;AAACmB,OAAA,CAAAvB,wBAAA,GAAAA,wBAAA","ignoreList":[]}
+{"version":3,"file":"EdgeProximityDetect.js","names":["_react","require","useOnEdgeProximityDetect","triggerRef","wrapperRef","contentRef","requiresRecalc","appliedShiftClasses","useRef","xAxisOverride","left","width","clientWidth","yAxisOverride","top","height","clientHeight","useEffect","current","document","body","forEach","cssClass","classList","remove","add","getBoundingClientRect","applyShift","contains","push","exports"],"sources":["../../../src/hooks/EdgeProximityDetect.ts"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\n\ninterface UseOnEdgeProximityDetectProps {\n  triggerRef: React.RefObject<HTMLElement>;\n  wrapperRef: React.RefObject<HTMLElement>;\n  contentRef: React.RefObject<HTMLElement>;\n  requiresRecalc: boolean;\n  preferredPlacement?: 'right-middle' | 'right-top' | 'right-bottom' | 'left-middle' | 'left-top' | 'left-bottom' | 'top-middle' | 'top-top' | 'top-bottom' | 'bottom-middle' | 'bottom-top' | 'bottom-bottom';\n}\n\nexport const useOnEdgeProximityDetect = (\n  {\n    triggerRef,\n    wrapperRef,\n    contentRef,\n    requiresRecalc\n  }\n  :\n  UseOnEdgeProximityDetectProps\n) => {\n  // Only the shift classes this hook applied, so a consumer supplied\n  // customCssClass such as \"shiftDown\" is never stripped\n  const appliedShiftClasses = useRef<string[]>([]);\n\n  const xAxisOverride = (\n    {\n      left,\n      width,\n      clientWidth\n    }\n    :\n    {\n      left: number;\n      width: number;\n      clientWidth: number\n    }\n  ) => {\n    // Too close to left\n    if (left < 0) {\n      return 'shiftRight';\n    }\n\n    // Too close to right\n    if (left + width > clientWidth) {\n      return 'shiftLeft';\n    }\n    return '';\n  };\n\n  const yAxisOverride = (\n    {\n      top,\n      height,\n      clientHeight\n    }\n    :\n    {\n      top: number;\n      height: number;\n      clientHeight: number\n    }\n  ) => {\n    // Too close to top\n    if (top - height < 0) {\n      return 'shiftDown';\n    }\n\n    // Too close to bottom\n    if (top + height > clientHeight) {\n      return 'shiftUp';\n    }\n    return '';\n  };\n\n  useEffect(() => {\n    if (\n      wrapperRef.current\n      && contentRef.current\n      && triggerRef.current\n      && document\n      && document.body\n    ) {\n      // Clear the previous run's shift, otherwise the content is measured in its\n      // already-shifted position and can accumulate opposing shift classes\n      appliedShiftClasses.current.forEach((cssClass) => wrapperRef.current?.classList.remove(cssClass));\n      appliedShiftClasses.current = [];\n\n      wrapperRef.current.classList.add('measuring');\n      const { clientWidth, clientHeight } = document.body;\n      const {\n        width, height, top, left\n      } = contentRef.current.getBoundingClientRect();\n\n      // Check if it needs x-axis or y-axis adjustment\n      const applyShift = (cssClass: string) => {\n        if (!cssClass || !wrapperRef.current || wrapperRef.current.classList.contains(cssClass)) {\n          return;\n        }\n        wrapperRef.current.classList.add(cssClass);\n        appliedShiftClasses.current.push(cssClass);\n      };\n\n      applyShift(xAxisOverride({ left, width, clientWidth }));\n      applyShift(yAxisOverride({ top, height, clientHeight }));\n\n      wrapperRef.current.classList.remove('measuring');\n    }\n  }, [triggerRef, wrapperRef, contentRef, requiresRecalc]);\n\n  return {};\n};\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAUO,MAAMC,wBAAwB,GAAGA,CACtC;EACEC,UAAU;EACVC,UAAU;EACVC,UAAU;EACVC;AAG0B,CAAC,KAC1B;EACH;EACA;EACA,MAAMC,mBAAmB,GAAG,IAAAC,aAAM,EAAW,EAAE,CAAC;EAEhD,MAAMC,aAAa,GAAGA,CACpB;IACEC,IAAI;IACJC,KAAK;IACLC;EAOF,CAAC,KACE;IACH;IACA,IAAIF,IAAI,GAAG,CAAC,EAAE;MACZ,OAAO,YAAY;IACrB;;IAEA;IACA,IAAIA,IAAI,GAAGC,KAAK,GAAGC,WAAW,EAAE;MAC9B,OAAO,WAAW;IACpB;IACA,OAAO,EAAE;EACX,CAAC;EAED,MAAMC,aAAa,GAAGA,CACpB;IACEC,GAAG;IACHC,MAAM;IACNC;EAOF,CAAC,KACE;IACH;IACA,IAAIF,GAAG,GAAGC,MAAM,GAAG,CAAC,EAAE;MACpB,OAAO,WAAW;IACpB;;IAEA;IACA,IAAID,GAAG,GAAGC,MAAM,GAAGC,YAAY,EAAE;MAC/B,OAAO,SAAS;IAClB;IACA,OAAO,EAAE;EACX,CAAC;EAED,IAAAC,gBAAS,EAAC,MAAM;IACd,IACEb,UAAU,CAACc,OAAO,IACfb,UAAU,CAACa,OAAO,IAClBf,UAAU,CAACe,OAAO,IAClBC,QAAQ,IACRA,QAAQ,CAACC,IAAI,EAChB;MACA;MACA;MACAb,mBAAmB,CAACW,OAAO,CAACG,OAAO,CAAEC,QAAQ,IAAKlB,UAAU,CAACc,OAAO,EAAEK,SAAS,CAACC,MAAM,CAACF,QAAQ,CAAC,CAAC;MACjGf,mBAAmB,CAACW,OAAO,GAAG,EAAE;MAEhCd,UAAU,CAACc,OAAO,CAACK,SAAS,CAACE,GAAG,CAAC,WAAW,CAAC;MAC7C,MAAM;QAAEb,WAAW;QAAEI;MAAa,CAAC,GAAGG,QAAQ,CAACC,IAAI;MACnD,MAAM;QACJT,KAAK;QAAEI,MAAM;QAAED,GAAG;QAAEJ;MACtB,CAAC,GAAGL,UAAU,CAACa,OAAO,CAACQ,qBAAqB,CAAC,CAAC;;MAE9C;MACA,MAAMC,UAAU,GAAIL,QAAgB,IAAK;QACvC,IAAI,CAACA,QAAQ,IAAI,CAAClB,UAAU,CAACc,OAAO,IAAId,UAAU,CAACc,OAAO,CAACK,SAAS,CAACK,QAAQ,CAACN,QAAQ,CAAC,EAAE;UACvF;QACF;QACAlB,UAAU,CAACc,OAAO,CAACK,SAAS,CAACE,GAAG,CAACH,QAAQ,CAAC;QAC1Cf,mBAAmB,CAACW,OAAO,CAACW,IAAI,CAACP,QAAQ,CAAC;MAC5C,CAAC;MAEDK,UAAU,CAAClB,aAAa,CAAC;QAAEC,IAAI;QAAEC,KAAK;QAAEC;MAAY,CAAC,CAAC,CAAC;MACvDe,UAAU,CAACd,aAAa,CAAC;QAAEC,GAAG;QAAEC,MAAM;QAAEC;MAAa,CAAC,CAAC,CAAC;MAExDZ,UAAU,CAACc,OAAO,CAACK,SAAS,CAACC,MAAM,CAAC,WAAW,CAAC;IAClD;EACF,CAAC,EAAE,CAACrB,UAAU,EAAEC,UAAU,EAAEC,UAAU,EAAEC,cAAc,CAAC,CAAC;EAExD,OAAO,CAAC,CAAC;AACX,CAAC;AAACwB,OAAA,CAAA5B,wBAAA,GAAAA,wBAAA","ignoreList":[]}

package/dist/cjs/interfaces/headerText.interface.js.map

@@ -1 +1 @@
-{"version":3,"file":"headerText.interface.js","names":[],"sources":["../../../src/interfaces/headerText.interface.ts"],"sourcesContent":["import React from 'react';\nimport { NotificationIconProps } from '../components/design/icons/notificationIcon/NotificationIcon';\nimport { ButtonProps } from '../components/form/buttons/button.interface';\nimport { IconProps } from '../components/design/icons/basicIcon/Icon';\nimport { NotificationsButtonProps } from '../components/form/buttons/notificationsButton/NotificationsButton';\n\nexport type SimpleHeaderButton = ButtonProps & {\n  kind?: 'simple'\n};\n\nexport type NotificationsHeaderButton = Omit<NotificationsButtonProps, 'label'> & {\n  kind?: 'notifications'\n};\n\nexport type HeaderButtonTypes = SimpleHeaderButton | NotificationsHeaderButton;\n\nexport interface HeaderTextInterface {\n  leftIcon?: IconProps;\n  rightIcon?: IconProps;\n  text?: string;\n  notificationIcon?: NotificationIconProps;\n  buttons?: HeaderButtonTypes[];\n  children?: React.ReactNode;\n}\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"headerText.interface.js","names":[],"sources":["../../../src/interfaces/headerText.interface.ts"],"sourcesContent":["import React from 'react';\nimport { NotificationIconProps } from '../components/design/icons/notificationIcon/NotificationIcon';\nimport { ButtonProps } from '../components/form/buttons/button.interface';\nimport { IconProps } from '../components/design/icons/basicIcon/Icon';\nimport { NotificationsButtonProps } from '../components/form/buttons/notificationsButton/NotificationsButton';\n\nexport type SimpleHeaderButton = ButtonProps & {\n  kind?: 'simple'\n};\n\nexport type NotificationsHeaderButton = Omit<NotificationsButtonProps, 'label'> & {\n  kind?: 'notifications'\n};\n\nexport type HeaderButtonTypes = SimpleHeaderButton | NotificationsHeaderButton;\n\nexport interface HeaderTextInterface {\n  leftIcon?: IconProps;\n  rightIcon?: IconProps;\n  text?: string;\n  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n  notificationIcon?: NotificationIconProps;\n  buttons?: HeaderButtonTypes[];\n  children?: React.ReactNode;\n}\n"],"mappings":"","ignoreList":[]}