@react-md/core 1.0.0-next.0

package/dist/form/utils.js

@@ -0,0 +1,63 @@
+/**
+ * This util should be used to implement the native "Enter" keypress behavior
+ * for "fake" form components to submit the form if exists.
+ *
+ * The way this will work will be:
+ * - attempt to find a form by querying for a parent form element. if no parent
+ *   form element can be found, try to use the `formId` in a
+ *   `document.getElementById`
+ * - if a form element is found, find the submit button within the form. If
+ *   there are no submit buttons within the form, try to find a submit button in
+ *   the document that is linked to this form by `form={formId}`
+ * - if the submit button was found, click it to trigger the form submit
+ *   behavior
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/requestSubmit
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit
+ * @internal
+ * @remarks
+ * \@since 2.7.0
+ * \@since 6.0.0 No longer returns a boolean, added the `formId` parameter, and
+ * moved into the form package.
+ * \@since 6.0.0 Uses `form.requestSubmit` instead of clicking the submit button
+ */ export function tryToSubmitRelatedForm(event, formId) {
+    const { currentTarget } = event;
+    let form = null;
+    if (formId) {
+        form = document.getElementById(formId);
+    } else {
+        form = currentTarget.closest("form");
+    }
+    if (!form || !(form instanceof HTMLFormElement)) {
+        return;
+    }
+    formId = formId || form.id;
+    let submit = form.querySelector('[type="submit"]');
+    if (!submit && formId) {
+        submit = document.querySelector(`[type="submit"][form="${formId}"]`);
+    }
+    form.requestSubmit(submit);
+}
+/**
+ * This is used to trigger a change event for a form element.
+ *
+ * @internal
+ * @see https://stackoverflow.com/a/46012210
+ * @remarks \@since 6.0.0
+ */ export function triggerManualChangeEvent(element, value) {
+    if (!element) {
+        return;
+    }
+    const prototype = Object.getPrototypeOf(element);
+    const setter = Object.getOwnPropertyDescriptor(prototype, "value")?.set;
+    if (!setter) {
+        return;
+    }
+    setter.call(element, value);
+    const event = new Event("input", {
+        bubbles: true
+    });
+    element.dispatchEvent(event);
+}
+
+//# sourceMappingURL=utils.js.map

package/dist/form/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/form/utils.ts"],"sourcesContent":["import { type KeyboardEvent } from \"react\";\n\n/**\n * This util should be used to implement the native \"Enter\" keypress behavior\n * for \"fake\" form components to submit the form if exists.\n *\n * The way this will work will be:\n * - attempt to find a form by querying for a parent form element. if no parent\n *   form element can be found, try to use the `formId` in a\n *   `document.getElementById`\n * - if a form element is found, find the submit button within the form. If\n *   there are no submit buttons within the form, try to find a submit button in\n *   the document that is linked to this form by `form={formId}`\n * - if the submit button was found, click it to trigger the form submit\n *   behavior\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/requestSubmit\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit\n * @internal\n * @remarks\n * \\@since 2.7.0\n * \\@since 6.0.0 No longer returns a boolean, added the `formId` parameter, and\n * moved into the form package.\n * \\@since 6.0.0 Uses `form.requestSubmit` instead of clicking the submit button\n */\nexport function tryToSubmitRelatedForm<E extends HTMLElement>(\n  event: KeyboardEvent<E>,\n  formId: string | undefined\n): void {\n  const { currentTarget } = event;\n  let form: HTMLElement | null = null;\n  if (formId) {\n    form = document.getElementById(formId);\n  } else {\n    form = currentTarget.closest(\"form\");\n  }\n\n  if (!form || !(form instanceof HTMLFormElement)) {\n    return;\n  }\n\n  formId = formId || form.id;\n  let submit = form.querySelector<HTMLButtonElement>('[type=\"submit\"]');\n  if (!submit && formId) {\n    submit = document.querySelector<HTMLButtonElement>(\n      `[type=\"submit\"][form=\"${formId}\"]`\n    );\n  }\n\n  form.requestSubmit(submit);\n}\n\n/**\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport type ChangeableHTMLElement =\n  | HTMLInputElement\n  | HTMLTextAreaElement\n  | HTMLSelectElement;\n\n/**\n * This is used to trigger a change event for a form element.\n *\n * @internal\n * @see https://stackoverflow.com/a/46012210\n * @remarks \\@since 6.0.0\n */\nexport function triggerManualChangeEvent(\n  element: ChangeableHTMLElement | null,\n  value: string | number\n): void {\n  if (!element) {\n    return;\n  }\n\n  const prototype = Object.getPrototypeOf(element);\n  const setter = Object.getOwnPropertyDescriptor(prototype, \"value\")?.set;\n  if (!setter) {\n    return;\n  }\n\n  setter.call(element, value);\n  const event = new Event(\"input\", { bubbles: true });\n  element.dispatchEvent(event);\n}\n"],"names":["tryToSubmitRelatedForm","event","formId","currentTarget","form","document","getElementById","closest","HTMLFormElement","id","submit","querySelector","requestSubmit","triggerManualChangeEvent","element","value","prototype","Object","getPrototypeOf","setter","getOwnPropertyDescriptor","set","call","Event","bubbles","dispatchEvent"],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;CAsBC,GACD,OAAO,SAASA,uBACdC,KAAuB,EACvBC,MAA0B;IAE1B,MAAM,EAAEC,aAAa,EAAE,GAAGF;IAC1B,IAAIG,OAA2B;IAC/B,IAAIF,QAAQ;QACVE,OAAOC,SAASC,cAAc,CAACJ;IACjC,OAAO;QACLE,OAAOD,cAAcI,OAAO,CAAC;IAC/B;IAEA,IAAI,CAACH,QAAQ,CAAEA,CAAAA,gBAAgBI,eAAc,GAAI;QAC/C;IACF;IAEAN,SAASA,UAAUE,KAAKK,EAAE;IAC1B,IAAIC,SAASN,KAAKO,aAAa,CAAoB;IACnD,IAAI,CAACD,UAAUR,QAAQ;QACrBQ,SAASL,SAASM,aAAa,CAC7B,CAAC,sBAAsB,EAAET,OAAO,EAAE,CAAC;IAEvC;IAEAE,KAAKQ,aAAa,CAACF;AACrB;AAWA;;;;;;CAMC,GACD,OAAO,SAASG,yBACdC,OAAqC,EACrCC,KAAsB;IAEtB,IAAI,CAACD,SAAS;QACZ;IACF;IAEA,MAAME,YAAYC,OAAOC,cAAc,CAACJ;IACxC,MAAMK,SAASF,OAAOG,wBAAwB,CAACJ,WAAW,UAAUK;IACpE,IAAI,CAACF,QAAQ;QACX;IACF;IAEAA,OAAOG,IAAI,CAACR,SAASC;IACrB,MAAMd,QAAQ,IAAIsB,MAAM,SAAS;QAAEC,SAAS;IAAK;IACjDV,QAAQW,aAAa,CAACxB;AACxB"}

package/dist/form/validation.d.ts

@@ -0,0 +1,152 @@
+import { type InputHTMLAttributes, type ReactNode } from "react";
+/**
+ * @remarks \@since 2.5.6
+ * @remarks \@since 6.0.0 Renamed from `TextConstraints` to
+ * `TextFieldValidationOptions`
+ */
+export type TextFieldValidationOptions = Pick<InputHTMLAttributes<HTMLInputElement>, "minLength" | "maxLength" | "required" | "pattern">;
+/**
+ * Since the default validation messages can be verbose, this type is used to
+ * configure when/how to display the native browser messages when the validation
+ * state changes during the `change` event phase. The validation message will
+ * always be shown on blur.
+ *
+ * When this is:
+ *
+ * - `true` -&gt; always show the browser message when it exists
+ * - `false` -&gt; never show the browser message
+ * - `"recommended"` -&gt; only shows the browser message if it is one of the
+ *   `RECOMMENDED_STATE_KEYS`/`RECOMMENDED_NUMBER_STATE_KEYS` validation errors
+ * - `keyof ValidityState` -&gt; only shows the browser message if it is not the
+ *   specific validation error
+ * - `(keyof ValidityState)[]` -&gt; only shows the browser message if it is not
+ *   the specific validation errors
+ *
+ * @see {@link RECOMMENDED_STATE_KEYS}
+ * @see {@link RECOMMENDED_NUMBER_STATE_KEYS}
+ * @remarks \@since 2.5.6
+ * @remarks \@since 6.0.0 Renamed from `ChangeValidationBehavior` to
+ * `TextFieldValidationType`
+ */
+export type TextFieldValidationType = "blur" | "change" | "recommended" | keyof ValidityState | readonly (keyof ValidityState)[];
+/**
+ * @remarks \@since 2.5.0
+ */
+export interface ErrorMessageOptions extends TextFieldValidationOptions {
+    /**
+     * The current input or textarea's validity state.
+     */
+    validity: ValidityState;
+    /**
+     * The browser defined validation message based on the validity state. This
+     * will be the empty string when there are no errors.
+     */
+    validationMessage: string;
+    /**
+     * The current `TextField` or `TextArea` value.
+     */
+    value: string;
+    /**
+     * This will only be `true` if called by the `useNumberField` hook.
+     */
+    isNumber: boolean;
+    /**
+     * Boolean if this is triggered from a blur event instead of a change event.
+     */
+    isBlurEvent: boolean;
+    /**
+     * The validation type defined by the `useTextField` hook.
+     */
+    validationType: TextFieldValidationType;
+}
+/**
+ * A function to get a custom error message for specific errors. This is really
+ * useful when using the `pattern` attribute to give additional information or
+ * changing the native "language translated" error message.
+ *
+ * @param options - An object containing metadata that can be used to create an
+ * error message for your `TextField` or `TextArea`.
+ * @returns An error message to display or an empty string.
+ * @remarks \@since 2.5.0
+ */
+export type GetErrorMessage = (options: ErrorMessageOptions) => string;
+/**
+ * @internal
+ * @remarks \@since 2.5.0
+ */
+export declare const RECOMMENDED_STATE_KEYS: readonly (keyof ValidityState)[];
+/**
+ * @internal
+ * @remarks \@since 2.5.0
+ */
+export declare const RECOMMENDED_NUMBER_STATE_KEYS: readonly (keyof ValidityState)[];
+/**
+ * The default implementation for getting an error message for the `TextField`
+ * or `TextArea` components that relies on the behavior of the
+ * {@link ChangeValidationBehavior}
+ *
+ * @remarks \@since 2.5.0
+ */
+export declare const defaultGetErrorMessage: GetErrorMessage;
+/**
+ * @remarks \@since 2.5.0
+ */
+export interface IsErroredOptions extends ErrorMessageOptions {
+    /**
+     * The current error message or an empty string.
+     */
+    errorMessage: string;
+}
+/**
+ * A function that is used to determine if a `TextField` or `TextArea` is in an
+ * errored state.
+ *
+ * @param options - All the current options that can be used to determine the
+ * error state.
+ * @returns True if the component is considered to be in an errored state.
+ * @remarks \@since 2.5.0
+ */
+export type IsErrored = (options: IsErroredOptions) => boolean;
+/**
+ * The default implementation for checking if a `TextField` or `TextArea` is
+ * errored by returning `true` if the `errorMessage` string is truthy or the
+ * value is not within the `minLength` and `maxLength` constraints when they
+ * exist.
+ *
+ * @remarks \@since 2.5.0
+ */
+export declare const defaultIsErrored: IsErrored;
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface GetErrorIconOptions {
+    /**
+     * This will be `true` if the `TextField` or `TextArea` is in an errored state.
+     */
+    error: boolean;
+    /**
+     * The current error icon that was provided.
+     */
+    errorIcon: ReactNode;
+    /**
+     * The current error message or an empty string.
+     */
+    errorMessage: string;
+}
+/**
+ * A function that can be used to dynamically get an error icon based on the
+ * current visible error.
+ *
+ * @param options - The {@link GetErrorIconOptions}
+ * @returns An icon to render or falsey to render nothing.
+ * @remarks \@since 2.5.0
+ * @remarks \@since 6.0.0 Updated to accept a single object argument
+ */
+export type GetErrorIcon = (options: GetErrorIconOptions) => ReactNode;
+/**
+ * The default implementation for showing an error icon in `TextField` and
+ * `TextArea` components that will only display when the error flag is enabled.
+ *
+ * @remarks \@since 2.5.0
+ */
+export declare const defaultGetErrorIcon: GetErrorIcon;

package/dist/form/validation.js

@@ -0,0 +1,93 @@
+/**
+ * @internal
+ * @remarks \@since 2.5.0
+ */ const VALIDITY_STATE_KEYS = [
+    "badInput",
+    "customError",
+    "patternMismatch",
+    "rangeOverflow",
+    "rangeUnderflow",
+    "stepMismatch",
+    "tooLong",
+    "tooShort",
+    "typeMismatch",
+    "valueMissing"
+];
+/**
+ * @internal
+ * @remarks \@since 2.5.0
+ */ export const RECOMMENDED_STATE_KEYS = [
+    "badInput",
+    "tooLong",
+    "valueMissing"
+];
+/**
+ * @internal
+ * @remarks \@since 2.5.0
+ */ export const RECOMMENDED_NUMBER_STATE_KEYS = [
+    ...RECOMMENDED_STATE_KEYS,
+    "rangeOverflow",
+    "rangeUnderflow",
+    "tooShort",
+    "typeMismatch"
+];
+/**
+ * The validation message is actually kind of weird since it's possible for a
+ * form element to have multiple errors at once. The validation message will be
+ * the first error that appears, so need to make sure that the first error is
+ * one of the recommended state keys so the message appears for only those types
+ * of errors.
+ *
+ * @internal
+ * @remarks \@since 2.5.0
+ */ const isRecommended = (validity, isNumber)=>{
+    const errorable = isNumber ? RECOMMENDED_NUMBER_STATE_KEYS : RECOMMENDED_STATE_KEYS;
+    return VALIDITY_STATE_KEYS.every((key)=>{
+        const errored = validity[key];
+        return !errored || errorable.includes(key);
+    });
+};
+/**
+ * The default implementation for getting an error message for the `TextField`
+ * or `TextArea` components that relies on the behavior of the
+ * {@link ChangeValidationBehavior}
+ *
+ * @remarks \@since 2.5.0
+ */ export const defaultGetErrorMessage = (options)=>{
+    const { isNumber, isBlurEvent, validity, validationMessage, validationType: validate } = options;
+    if (isBlurEvent || !validationMessage || validate === "change") {
+        return validationMessage;
+    }
+    if (validate === "blur") {
+        return "";
+    }
+    if (validate === "recommended") {
+        return isRecommended(validity, isNumber) ? validationMessage : "";
+    }
+    const keys = typeof validate === "string" ? [
+        validate
+    ] : validate;
+    return keys.length && VALIDITY_STATE_KEYS.some((key)=>validity[key] && keys.includes(key)) ? validationMessage : "";
+};
+/**
+ * The default implementation for checking if a `TextField` or `TextArea` is
+ * errored by returning `true` if the `errorMessage` string is truthy or the
+ * value is not within the `minLength` and `maxLength` constraints when they
+ * exist.
+ *
+ * @remarks \@since 2.5.0
+ */ export const defaultIsErrored = (options)=>{
+    const { value, errorMessage, minLength, maxLength, isBlurEvent } = options;
+    return !!errorMessage || typeof maxLength === "number" && value.length > maxLength || isBlurEvent && typeof minLength === "number" && value.length < minLength;
+};
+/**
+ * The default implementation for showing an error icon in `TextField` and
+ * `TextArea` components that will only display when the error flag is enabled.
+ *
+ * @remarks \@since 2.5.0
+ */ export const defaultGetErrorIcon = (options)=>{
+    const { error, errorIcon } = options;
+    return error && errorIcon;
+};
+
+//# sourceMappingURL=validation.js.map

package/dist/form/validation.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/form/validation.ts"],"sourcesContent":["import { type InputHTMLAttributes, type ReactNode } from \"react\";\n\n/**\n * @remarks \\@since 2.5.6\n * @remarks \\@since 6.0.0 Renamed from `TextConstraints` to\n * `TextFieldValidationOptions`\n */\nexport type TextFieldValidationOptions = Pick<\n  InputHTMLAttributes<HTMLInputElement>,\n  \"minLength\" | \"maxLength\" | \"required\" | \"pattern\"\n>;\n\n/**\n * Since the default validation messages can be verbose, this type is used to\n * configure when/how to display the native browser messages when the validation\n * state changes during the `change` event phase. The validation message will\n * always be shown on blur.\n *\n * When this is:\n *\n * - `true` -&gt; always show the browser message when it exists\n * - `false` -&gt; never show the browser message\n * - `\"recommended\"` -&gt; only shows the browser message if it is one of the\n *   `RECOMMENDED_STATE_KEYS`/`RECOMMENDED_NUMBER_STATE_KEYS` validation errors\n * - `keyof ValidityState` -&gt; only shows the browser message if it is not the\n *   specific validation error\n * - `(keyof ValidityState)[]` -&gt; only shows the browser message if it is not\n *   the specific validation errors\n *\n * @see {@link RECOMMENDED_STATE_KEYS}\n * @see {@link RECOMMENDED_NUMBER_STATE_KEYS}\n * @remarks \\@since 2.5.6\n * @remarks \\@since 6.0.0 Renamed from `ChangeValidationBehavior` to\n * `TextFieldValidationType`\n */\nexport type TextFieldValidationType =\n  | \"blur\"\n  | \"change\"\n  | \"recommended\"\n  | keyof ValidityState\n  | readonly (keyof ValidityState)[];\n\n/**\n * @remarks \\@since 2.5.0\n */\nexport interface ErrorMessageOptions extends TextFieldValidationOptions {\n  /**\n   * The current input or textarea's validity state.\n   */\n  validity: ValidityState;\n\n  /**\n   * The browser defined validation message based on the validity state. This\n   * will be the empty string when there are no errors.\n   */\n  validationMessage: string;\n\n  /**\n   * The current `TextField` or `TextArea` value.\n   */\n  value: string;\n\n  /**\n   * This will only be `true` if called by the `useNumberField` hook.\n   */\n  isNumber: boolean;\n\n  /**\n   * Boolean if this is triggered from a blur event instead of a change event.\n   */\n  isBlurEvent: boolean;\n\n  /**\n   * The validation type defined by the `useTextField` hook.\n   */\n  validationType: TextFieldValidationType;\n}\n\n/**\n * A function to get a custom error message for specific errors. This is really\n * useful when using the `pattern` attribute to give additional information or\n * changing the native \"language translated\" error message.\n *\n * @param options - An object containing metadata that can be used to create an\n * error message for your `TextField` or `TextArea`.\n * @returns An error message to display or an empty string.\n * @remarks \\@since 2.5.0\n */\nexport type GetErrorMessage = (options: ErrorMessageOptions) => string;\n\n/**\n * @internal\n * @remarks \\@since 2.5.0\n */\nconst VALIDITY_STATE_KEYS: readonly (keyof ValidityState)[] = [\n  \"badInput\",\n  \"customError\",\n  \"patternMismatch\",\n  \"rangeOverflow\",\n  \"rangeUnderflow\",\n  \"stepMismatch\",\n  \"tooLong\",\n  \"tooShort\",\n  \"typeMismatch\",\n  \"valueMissing\",\n];\n\n/**\n * @internal\n * @remarks \\@since 2.5.0\n */\nexport const RECOMMENDED_STATE_KEYS: readonly (keyof ValidityState)[] = [\n  \"badInput\",\n  \"tooLong\",\n  \"valueMissing\",\n];\n\n/**\n * @internal\n * @remarks \\@since 2.5.0\n */\nexport const RECOMMENDED_NUMBER_STATE_KEYS: readonly (keyof ValidityState)[] = [\n  ...RECOMMENDED_STATE_KEYS,\n  \"rangeOverflow\",\n  \"rangeUnderflow\",\n  \"tooShort\",\n  \"typeMismatch\",\n];\n\n/**\n * The validation message is actually kind of weird since it's possible for a\n * form element to have multiple errors at once. The validation message will be\n * the first error that appears, so need to make sure that the first error is\n * one of the recommended state keys so the message appears for only those types\n * of errors.\n *\n * @internal\n * @remarks \\@since 2.5.0\n */\nconst isRecommended = (validity: ValidityState, isNumber: boolean): boolean => {\n  const errorable = isNumber\n    ? RECOMMENDED_NUMBER_STATE_KEYS\n    : RECOMMENDED_STATE_KEYS;\n\n  return VALIDITY_STATE_KEYS.every((key) => {\n    const errored = validity[key];\n    return !errored || errorable.includes(key);\n  });\n};\n\n/**\n * The default implementation for getting an error message for the `TextField`\n * or `TextArea` components that relies on the behavior of the\n * {@link ChangeValidationBehavior}\n *\n * @remarks \\@since 2.5.0\n */\nexport const defaultGetErrorMessage: GetErrorMessage = (options) => {\n  const {\n    isNumber,\n    isBlurEvent,\n    validity,\n    validationMessage,\n    validationType: validate,\n  } = options;\n\n  if (isBlurEvent || !validationMessage || validate === \"change\") {\n    return validationMessage;\n  }\n\n  if (validate === \"blur\") {\n    return \"\";\n  }\n\n  if (validate === \"recommended\") {\n    return isRecommended(validity, isNumber) ? validationMessage : \"\";\n  }\n\n  const keys = typeof validate === \"string\" ? [validate] : validate;\n\n  return keys.length &&\n    VALIDITY_STATE_KEYS.some((key) => validity[key] && keys.includes(key))\n    ? validationMessage\n    : \"\";\n};\n\n/**\n * @remarks \\@since 2.5.0\n */\nexport interface IsErroredOptions extends ErrorMessageOptions {\n  /**\n   * The current error message or an empty string.\n   */\n  errorMessage: string;\n}\n\n/**\n * A function that is used to determine if a `TextField` or `TextArea` is in an\n * errored state.\n *\n * @param options - All the current options that can be used to determine the\n * error state.\n * @returns True if the component is considered to be in an errored state.\n * @remarks \\@since 2.5.0\n */\nexport type IsErrored = (options: IsErroredOptions) => boolean;\n\n/**\n * The default implementation for checking if a `TextField` or `TextArea` is\n * errored by returning `true` if the `errorMessage` string is truthy or the\n * value is not within the `minLength` and `maxLength` constraints when they\n * exist.\n *\n * @remarks \\@since 2.5.0\n */\nexport const defaultIsErrored: IsErrored = (options) => {\n  const { value, errorMessage, minLength, maxLength, isBlurEvent } = options;\n\n  return (\n    !!errorMessage ||\n    (typeof maxLength === \"number\" && value.length > maxLength) ||\n    (isBlurEvent && typeof minLength === \"number\" && value.length < minLength)\n  );\n};\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface GetErrorIconOptions {\n  /**\n   * This will be `true` if the `TextField` or `TextArea` is in an errored state.\n   */\n  error: boolean;\n\n  /**\n   * The current error icon that was provided.\n   */\n  errorIcon: ReactNode;\n\n  /**\n   * The current error message or an empty string.\n   */\n  errorMessage: string;\n}\n\n/**\n * A function that can be used to dynamically get an error icon based on the\n * current visible error.\n *\n * @param options - The {@link GetErrorIconOptions}\n * @returns An icon to render or falsey to render nothing.\n * @remarks \\@since 2.5.0\n * @remarks \\@since 6.0.0 Updated to accept a single object argument\n */\nexport type GetErrorIcon = (options: GetErrorIconOptions) => ReactNode;\n\n/**\n * The default implementation for showing an error icon in `TextField` and\n * `TextArea` components that will only display when the error flag is enabled.\n *\n * @remarks \\@since 2.5.0\n */\nexport const defaultGetErrorIcon: GetErrorIcon = (options) => {\n  const { error, errorIcon } = options;\n\n  return error && errorIcon;\n};\n"],"names":["VALIDITY_STATE_KEYS","RECOMMENDED_STATE_KEYS","RECOMMENDED_NUMBER_STATE_KEYS","isRecommended","validity","isNumber","errorable","every","key","errored","includes","defaultGetErrorMessage","options","isBlurEvent","validationMessage","validationType","validate","keys","length","some","defaultIsErrored","value","errorMessage","minLength","maxLength","defaultGetErrorIcon","error","errorIcon"],"mappings":"AA0FA;;;CAGC,GACD,MAAMA,sBAAwD;IAC5D;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;CACD;AAED;;;CAGC,GACD,OAAO,MAAMC,yBAA2D;IACtE;IACA;IACA;CACD,CAAC;AAEF;;;CAGC,GACD,OAAO,MAAMC,gCAAkE;OAC1ED;IACH;IACA;IACA;IACA;CACD,CAAC;AAEF;;;;;;;;;CASC,GACD,MAAME,gBAAgB,CAACC,UAAyBC;IAC9C,MAAMC,YAAYD,WACdH,gCACAD;IAEJ,OAAOD,oBAAoBO,KAAK,CAAC,CAACC;QAChC,MAAMC,UAAUL,QAAQ,CAACI,IAAI;QAC7B,OAAO,CAACC,WAAWH,UAAUI,QAAQ,CAACF;IACxC;AACF;AAEA;;;;;;CAMC,GACD,OAAO,MAAMG,yBAA0C,CAACC;IACtD,MAAM,EACJP,QAAQ,EACRQ,WAAW,EACXT,QAAQ,EACRU,iBAAiB,EACjBC,gBAAgBC,QAAQ,EACzB,GAAGJ;IAEJ,IAAIC,eAAe,CAACC,qBAAqBE,aAAa,UAAU;QAC9D,OAAOF;IACT;IAEA,IAAIE,aAAa,QAAQ;QACvB,OAAO;IACT;IAEA,IAAIA,aAAa,eAAe;QAC9B,OAAOb,cAAcC,UAAUC,YAAYS,oBAAoB;IACjE;IAEA,MAAMG,OAAO,OAAOD,aAAa,WAAW;QAACA;KAAS,GAAGA;IAEzD,OAAOC,KAAKC,MAAM,IAChBlB,oBAAoBmB,IAAI,CAAC,CAACX,MAAQJ,QAAQ,CAACI,IAAI,IAAIS,KAAKP,QAAQ,CAACF,QAC/DM,oBACA;AACN,EAAE;AAuBF;;;;;;;CAOC,GACD,OAAO,MAAMM,mBAA8B,CAACR;IAC1C,MAAM,EAAES,KAAK,EAAEC,YAAY,EAAEC,SAAS,EAAEC,SAAS,EAAEX,WAAW,EAAE,GAAGD;IAEnE,OACE,CAAC,CAACU,gBACD,OAAOE,cAAc,YAAYH,MAAMH,MAAM,GAAGM,aAChDX,eAAe,OAAOU,cAAc,YAAYF,MAAMH,MAAM,GAAGK;AAEpE,EAAE;AAiCF;;;;;CAKC,GACD,OAAO,MAAME,sBAAoC,CAACb;IAChD,MAAM,EAAEc,KAAK,EAAEC,SAAS,EAAE,GAAGf;IAE7B,OAAOc,SAASC;AAClB,EAAE"}

package/dist/hoverMode/useHoverMode.d.ts

@@ -0,0 +1,62 @@
+import type { MouseEvent } from "react";
+import type { UseStateInitializer, UseStateSetter } from "../types.js";
+import type { SimpleHoverModeContext } from "./useHoverModeProvider.js";
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface HoverModeConfigurationOptions extends SimpleHoverModeContext {
+    /** @defaultValue `false` */
+    disabled?: boolean;
+    /**
+     * This can be used to override the `HoverModeContext`'s hover time.
+     */
+    hoverTime?: number;
+    /**
+     * This can be used to override the `HoverModeContext`'s leave time.
+     */
+    leaveTime?: number;
+}
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface ControlledHoverModeOptions extends HoverModeConfigurationOptions {
+    setVisible: UseStateSetter<boolean>;
+}
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface ControlledHoverModeImplementation {
+    startShowFlow(id?: string | MouseEvent): void;
+    startHideFlow(): void;
+    clearVisibilityTimeout(): void;
+}
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface UncontrolledHoverModeOptions extends HoverModeConfigurationOptions {
+    defaultVisible?: UseStateInitializer<boolean>;
+}
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface UncontrolledHoverModeImplementation extends ControlledHoverModeImplementation {
+    visible: boolean;
+    setVisible: UseStateSetter<boolean>;
+}
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface HoverModeImplementation extends ControlledHoverModeImplementation {
+    visible?: boolean;
+    setVisible?: UseStateSetter<boolean>;
+}
+/**
+ * @remarks
+ * \@since 2.8.0
+ * \@since 5.0.0 This hook no longer returns `handlers` or
+ * `stickyHandlers` and does not hide when an element on the page is clicked.
+ * \@since 6.0.0 Requires passing the custom hover mode context to
+ * work.
+ */
+export declare function useHoverMode(options: ControlledHoverModeOptions): ControlledHoverModeImplementation;
+export declare function useHoverMode(options: UncontrolledHoverModeOptions): UncontrolledHoverModeImplementation;

package/dist/hoverMode/useHoverMode.js

@@ -0,0 +1,95 @@
+"use client";
+import { useCallback, useEffect, useRef, useState } from "react";
+export function useHoverMode(options) {
+    const { disabled, hoverTime, hoverTimeoutRef, leaveTime, leaveTimeoutRef, enableHoverMode, disableHoverMode, startDisableTimer, clearDisableTimer, setVisible: propSetVisible, defaultVisible = false } = options;
+    const state = useState(defaultVisible);
+    let visible;
+    let setVisible;
+    if (typeof propSetVisible !== "undefined") {
+        setVisible = propSetVisible;
+    } else {
+        [visible, setVisible] = state;
+    }
+    const visibilityTimeout = useRef();
+    const clearVisibilityTimeout = useCallback(()=>{
+        window.clearTimeout(visibilityTimeout.current);
+    }, []);
+    // if the element is near the viewport edge, the mouseleave event might not
+    // trigger correctly. for these cases, just clear any timeouts to be safe.
+    // do not hide the visibility so that you can still inspect things in the
+    // devtools
+    useEffect(()=>{
+        if (disabled) {
+            return;
+        }
+        const handler = ()=>{
+            window.clearTimeout(visibilityTimeout.current);
+            // might need to play with this more or make it configurable. if the mouse
+            // leaves the window, you're _normally_ not interacting with the app
+            // anymore and state should reset.
+            disableHoverMode();
+        };
+        document.addEventListener("mouseleave", handler);
+        return ()=>{
+            document.removeEventListener("mouseleave", handler);
+        };
+    }, [
+        disableHoverMode,
+        disabled
+    ]);
+    useEffect(()=>{
+        return ()=>{
+            window.clearTimeout(visibilityTimeout.current);
+        };
+    }, []);
+    return {
+        visible,
+        setVisible: setVisible === propSetVisible ? undefined : setVisible,
+        startShowFlow: useCallback((eventOrId)=>{
+            const hoverTimeout = hoverTime ?? hoverTimeoutRef.current;
+            if (disabled || typeof hoverTimeout === "undefined") {
+                return;
+            }
+            let id;
+            if (typeof eventOrId === "string" || typeof eventOrId === "undefined") {
+                id = eventOrId || "";
+            } else {
+                id = eventOrId.currentTarget.id;
+            }
+            clearDisableTimer();
+            clearVisibilityTimeout();
+            visibilityTimeout.current = window.setTimeout(()=>{
+                enableHoverMode(id);
+                setVisible(true);
+            }, hoverTimeout);
+        }, [
+            clearDisableTimer,
+            clearVisibilityTimeout,
+            disabled,
+            enableHoverMode,
+            hoverTime,
+            hoverTimeoutRef,
+            setVisible
+        ]),
+        startHideFlow: useCallback(()=>{
+            if (disabled) {
+                return;
+            }
+            startDisableTimer();
+            clearVisibilityTimeout();
+            visibilityTimeout.current = window.setTimeout(()=>{
+                setVisible(false);
+            }, leaveTime ?? leaveTimeoutRef.current);
+        }, [
+            clearVisibilityTimeout,
+            disabled,
+            leaveTime,
+            leaveTimeoutRef,
+            setVisible,
+            startDisableTimer
+        ]),
+        clearVisibilityTimeout
+    };
+}
+
+//# sourceMappingURL=useHoverMode.js.map

package/dist/hoverMode/useHoverMode.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hoverMode/useHoverMode.ts"],"sourcesContent":["\"use client\";\nimport type { MouseEvent } from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport type { UseStateInitializer, UseStateSetter } from \"../types.js\";\nimport type { SimpleHoverModeContext } from \"./useHoverModeProvider.js\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface HoverModeConfigurationOptions extends SimpleHoverModeContext {\n  /** @defaultValue `false` */\n  disabled?: boolean;\n\n  /**\n   * This can be used to override the `HoverModeContext`'s hover time.\n   */\n  hoverTime?: number;\n\n  /**\n   * This can be used to override the `HoverModeContext`'s leave time.\n   */\n  leaveTime?: number;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface ControlledHoverModeOptions\n  extends HoverModeConfigurationOptions {\n  setVisible: UseStateSetter<boolean>;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface ControlledHoverModeImplementation {\n  startShowFlow(id?: string | MouseEvent): void;\n  startHideFlow(): void;\n  clearVisibilityTimeout(): void;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface UncontrolledHoverModeOptions\n  extends HoverModeConfigurationOptions {\n  defaultVisible?: UseStateInitializer<boolean>;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface UncontrolledHoverModeImplementation\n  extends ControlledHoverModeImplementation {\n  visible: boolean;\n  setVisible: UseStateSetter<boolean>;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface HoverModeImplementation\n  extends ControlledHoverModeImplementation {\n  visible?: boolean;\n  setVisible?: UseStateSetter<boolean>;\n}\n\n/**\n * @remarks\n * \\@since 2.8.0\n * \\@since 5.0.0 This hook no longer returns `handlers` or\n * `stickyHandlers` and does not hide when an element on the page is clicked.\n * \\@since 6.0.0 Requires passing the custom hover mode context to\n * work.\n */\nexport function useHoverMode(\n  options: ControlledHoverModeOptions\n): ControlledHoverModeImplementation;\nexport function useHoverMode(\n  options: UncontrolledHoverModeOptions\n): UncontrolledHoverModeImplementation;\nexport function useHoverMode(\n  options: ControlledHoverModeOptions | UncontrolledHoverModeOptions\n): HoverModeImplementation {\n  const {\n    disabled,\n    hoverTime,\n    hoverTimeoutRef,\n    leaveTime,\n    leaveTimeoutRef,\n    enableHoverMode,\n    disableHoverMode,\n    startDisableTimer,\n    clearDisableTimer,\n    setVisible: propSetVisible,\n    defaultVisible = false,\n  } = options as ControlledHoverModeOptions & UncontrolledHoverModeOptions;\n\n  const state = useState(defaultVisible);\n  let visible: boolean | undefined;\n  let setVisible: UseStateSetter<boolean>;\n  if (typeof propSetVisible !== \"undefined\") {\n    setVisible = propSetVisible;\n  } else {\n    [visible, setVisible] = state;\n  }\n\n  const visibilityTimeout = useRef<number | undefined>();\n  const clearVisibilityTimeout = useCallback(() => {\n    window.clearTimeout(visibilityTimeout.current);\n  }, []);\n\n  // if the element is near the viewport edge, the mouseleave event might not\n  // trigger correctly. for these cases, just clear any timeouts to be safe.\n  // do not hide the visibility so that you can still inspect things in the\n  // devtools\n  useEffect(() => {\n    if (disabled) {\n      return;\n    }\n\n    const handler = (): void => {\n      window.clearTimeout(visibilityTimeout.current);\n\n      // might need to play with this more or make it configurable. if the mouse\n      // leaves the window, you're _normally_ not interacting with the app\n      // anymore and state should reset.\n      disableHoverMode();\n    };\n\n    document.addEventListener(\"mouseleave\", handler);\n    return () => {\n      document.removeEventListener(\"mouseleave\", handler);\n    };\n  }, [disableHoverMode, disabled]);\n\n  useEffect(() => {\n    return () => {\n      window.clearTimeout(visibilityTimeout.current);\n    };\n  }, []);\n\n  return {\n    visible,\n    setVisible: setVisible === propSetVisible ? undefined : setVisible,\n    startShowFlow: useCallback(\n      (eventOrId) => {\n        const hoverTimeout = hoverTime ?? hoverTimeoutRef.current;\n        if (disabled || typeof hoverTimeout === \"undefined\") {\n          return;\n        }\n\n        let id: string;\n        if (typeof eventOrId === \"string\" || typeof eventOrId === \"undefined\") {\n          id = eventOrId || \"\";\n        } else {\n          id = eventOrId.currentTarget.id;\n        }\n\n        clearDisableTimer();\n        clearVisibilityTimeout();\n        visibilityTimeout.current = window.setTimeout(() => {\n          enableHoverMode(id);\n          setVisible(true);\n        }, hoverTimeout);\n      },\n      [\n        clearDisableTimer,\n        clearVisibilityTimeout,\n        disabled,\n        enableHoverMode,\n        hoverTime,\n        hoverTimeoutRef,\n        setVisible,\n      ]\n    ),\n    startHideFlow: useCallback(() => {\n      if (disabled) {\n        return;\n      }\n\n      startDisableTimer();\n      clearVisibilityTimeout();\n      visibilityTimeout.current = window.setTimeout(() => {\n        setVisible(false);\n      }, leaveTime ?? leaveTimeoutRef.current);\n    }, [\n      clearVisibilityTimeout,\n      disabled,\n      leaveTime,\n      leaveTimeoutRef,\n      setVisible,\n      startDisableTimer,\n    ]),\n    clearVisibilityTimeout,\n  };\n}\n"],"names":["useCallback","useEffect","useRef","useState","useHoverMode","options","disabled","hoverTime","hoverTimeoutRef","leaveTime","leaveTimeoutRef","enableHoverMode","disableHoverMode","startDisableTimer","clearDisableTimer","setVisible","propSetVisible","defaultVisible","state","visible","visibilityTimeout","clearVisibilityTimeout","window","clearTimeout","current","handler","document","addEventListener","removeEventListener","undefined","startShowFlow","eventOrId","hoverTimeout","id","currentTarget","setTimeout","startHideFlow"],"mappings":"AAAA;AAEA,SAASA,WAAW,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AA+EjE,OAAO,SAASC,aACdC,OAAkE;IAElE,MAAM,EACJC,QAAQ,EACRC,SAAS,EACTC,eAAe,EACfC,SAAS,EACTC,eAAe,EACfC,eAAe,EACfC,gBAAgB,EAChBC,iBAAiB,EACjBC,iBAAiB,EACjBC,YAAYC,cAAc,EAC1BC,iBAAiB,KAAK,EACvB,GAAGZ;IAEJ,MAAMa,QAAQf,SAASc;IACvB,IAAIE;IACJ,IAAIJ;IACJ,IAAI,OAAOC,mBAAmB,aAAa;QACzCD,aAAaC;IACf,OAAO;QACL,CAACG,SAASJ,WAAW,GAAGG;IAC1B;IAEA,MAAME,oBAAoBlB;IAC1B,MAAMmB,yBAAyBrB,YAAY;QACzCsB,OAAOC,YAAY,CAACH,kBAAkBI,OAAO;IAC/C,GAAG,EAAE;IAEL,2EAA2E;IAC3E,0EAA0E;IAC1E,yEAAyE;IACzE,WAAW;IACXvB,UAAU;QACR,IAAIK,UAAU;YACZ;QACF;QAEA,MAAMmB,UAAU;YACdH,OAAOC,YAAY,CAACH,kBAAkBI,OAAO;YAE7C,0EAA0E;YAC1E,oEAAoE;YACpE,kCAAkC;YAClCZ;QACF;QAEAc,SAASC,gBAAgB,CAAC,cAAcF;QACxC,OAAO;YACLC,SAASE,mBAAmB,CAAC,cAAcH;QAC7C;IACF,GAAG;QAACb;QAAkBN;KAAS;IAE/BL,UAAU;QACR,OAAO;YACLqB,OAAOC,YAAY,CAACH,kBAAkBI,OAAO;QAC/C;IACF,GAAG,EAAE;IAEL,OAAO;QACLL;QACAJ,YAAYA,eAAeC,iBAAiBa,YAAYd;QACxDe,eAAe9B,YACb,CAAC+B;YACC,MAAMC,eAAezB,aAAaC,gBAAgBgB,OAAO;YACzD,IAAIlB,YAAY,OAAO0B,iBAAiB,aAAa;gBACnD;YACF;YAEA,IAAIC;YACJ,IAAI,OAAOF,cAAc,YAAY,OAAOA,cAAc,aAAa;gBACrEE,KAAKF,aAAa;YACpB,OAAO;gBACLE,KAAKF,UAAUG,aAAa,CAACD,EAAE;YACjC;YAEAnB;YACAO;YACAD,kBAAkBI,OAAO,GAAGF,OAAOa,UAAU,CAAC;gBAC5CxB,gBAAgBsB;gBAChBlB,WAAW;YACb,GAAGiB;QACL,GACA;YACElB;YACAO;YACAf;YACAK;YACAJ;YACAC;YACAO;SACD;QAEHqB,eAAepC,YAAY;YACzB,IAAIM,UAAU;gBACZ;YACF;YAEAO;YACAQ;YACAD,kBAAkBI,OAAO,GAAGF,OAAOa,UAAU,CAAC;gBAC5CpB,WAAW;YACb,GAAGN,aAAaC,gBAAgBc,OAAO;QACzC,GAAG;YACDH;YACAf;YACAG;YACAC;YACAK;YACAF;SACD;QACDQ;IACF;AACF"}