@sqrzro/ui 4.0.0-alpha.54 → 4.0.0-alpha.56

package/dist/forms/components/Form/index.d.ts

@@ -8,6 +8,7 @@ export interface FormProps extends ClassNameProps<FormClassNames> {
     id?: string;
     onSubmit?: React.FormEventHandler<HTMLFormElement>;
     ref?: React.Ref<HTMLFormElement>;
+    uncaughtErrors: Record<string, string> | null;
 }
-declare function Form({ action, children, classNames, classNameProps, id, onSubmit, ref, }: Readonly<FormProps>): React.ReactElement;
+declare function Form({ action, children, classNames, classNameProps, id, onSubmit, uncaughtErrors, ref, }: Readonly<FormProps>): React.ReactElement;
 export default Form;

package/dist/forms/components/Form/index.js

@@ -1,9 +1,10 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useClassNames } from '../../../styles/context';
 import tw from '../../../styles/classnames/utility/tw';
-function Form({ action, children, classNames, classNameProps, id, onSubmit, ref, }) {
+import { InfoPanel } from '../../../components';
+function Form({ action, children, classNames, classNameProps, id, onSubmit, uncaughtErrors, ref, }) {
     const componentClassNames = useClassNames('form', { props: classNameProps }, classNames);
-    return (_jsx("form", { ref: ref, action: action, className: tw(componentClassNames?.root), id: id, onSubmit: onSubmit, children: children }));
+    return (_jsxs("form", { ref: ref, action: action, className: tw(componentClassNames?.root), id: id, onSubmit: onSubmit, children: [uncaughtErrors && Object.keys(uncaughtErrors).length ? (_jsx(InfoPanel, { variant: "error", children: Object.values(uncaughtErrors).map((item, index) => (_jsx("p", { children: item }, index))) })) : null, children] }));
 }
 export default Form;

package/dist/forms/components/FormField/index.d.ts

@@ -11,9 +11,10 @@ export interface FormFieldClassNames {
 }
 export interface FormFieldProps<T, V extends T> extends ClassNameProps<FormFieldClassNames>, InputProps<T, V> {
     action?: SimpleActionObject | null;
-    details?: string | null;
+    details?: React.ReactNode;
     error?: Record<string, string> | null;
     hasAssistiveError?: boolean;
+    hasAssistiveDetails?: boolean;
     hasAssistiveLabel?: boolean;
     isContentOnly?: boolean;
     isOptional?: boolean;
@@ -21,5 +22,5 @@ export interface FormFieldProps<T, V extends T> extends ClassNameProps<FormField
     onChange?: (event: InputEvent<T>) => void;
     render: (props: InputProps<T>) => React.ReactElement | null;
 }
-declare function FormField<T, V extends T>({ action, classNameProps, classNames, details, error, hasAssistiveError, hasAssistiveLabel, id, isContentOnly, isDisabled, isOptional, label, name, onChange, onKeyDown, render, value, }: Readonly<FormFieldProps<T, V>>): React.ReactElement | null;
+declare function FormField<T, V extends T>({ action, classNameProps, classNames, details, error, hasAssistiveError, hasAssistiveDetails, hasAssistiveLabel, id, isContentOnly, isDisabled, isOptional, label, name, onChange, onKeyDown, render, value, }: Readonly<FormFieldProps<T, V>>): React.ReactElement | null;
 export default FormField;

package/dist/forms/components/FormField/index.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { useClassNames } from '../../../styles/context';
+import tw from '../../../styles/classnames/utility/tw';
 import FormError from '../FormError';
 import FormLabel from '../FormLabel';
 import ActionButton from '../../../components/buttons/ActionButton';
@@ -10,7 +11,7 @@ function checkHasError(error) {
         Object.keys(error).length > 0 &&
         Object.values(error).some((item) => typeof item === 'string'));
 }
-function FormField({ action, classNameProps, classNames, details, error, hasAssistiveError, hasAssistiveLabel, id, isContentOnly, isDisabled, isOptional, label, name, onChange, onKeyDown, render, value, }) {
+function FormField({ action, classNameProps, classNames, details, error, hasAssistiveError, hasAssistiveDetails, hasAssistiveLabel, id, isContentOnly, isDisabled, isOptional, label, name, onChange, onKeyDown, render, value, }) {
     const componentClassNames = useClassNames('formField', { props: classNameProps, states: { isError: checkHasError(error) } }, classNames);
     const inputId = id || `ff_${name}`;
     const [inputError, setInputError] = useState(null);
@@ -19,6 +20,7 @@ function FormField({ action, classNameProps, classNames, details, error, hasAssi
     }
     const renderProps = {
         classNameProps,
+        details,
         error,
         hasError: checkHasError(error),
         id: inputId,
@@ -34,6 +36,6 @@ function FormField({ action, classNameProps, classNames, details, error, hasAssi
     if (isContentOnly) {
         return render(renderProps);
     }
-    return (_jsxs("div", { className: componentClassNames?.root, children: [label ? (_jsx(FormLabel, { classNameProps: classNameProps, htmlFor: inputId, isAssistive: hasAssistiveLabel, isOptional: isOptional, children: label })) : null, details && label ? (_jsx("div", { className: componentClassNames?.details, children: details })) : null, _jsx("div", { className: componentClassNames?.field, children: render(renderProps) }), action ? (_jsx("div", { children: _jsx(ActionButton, { ...action, isDisabled: Boolean(isDisabled || action.isDisabled) }) })) : null, inputError || error?.[name] ? (_jsx(FormError, { classNameProps: classNameProps, id: inputId, isAssistive: hasAssistiveError, children: inputError || error?.[name] })) : null] }));
+    return (_jsxs("div", { className: componentClassNames?.root, children: [label ? (_jsx(FormLabel, { classNameProps: classNameProps, htmlFor: inputId, isAssistive: hasAssistiveLabel, isOptional: isOptional, children: label })) : null, details && label ? (_jsx("div", { className: tw(componentClassNames?.details, hasAssistiveDetails ? 'sr-only' : null), children: details })) : null, _jsx("div", { className: componentClassNames?.field, children: render(renderProps) }), action ? (_jsx("div", { children: _jsx(ActionButton, { ...action, isDisabled: Boolean(isDisabled || action.isDisabled) }) })) : null, inputError || error?.[name] ? (_jsx(FormError, { classNameProps: classNameProps, id: inputId, isAssistive: hasAssistiveError, children: inputError || error?.[name] })) : null] }));
 }
 export default FormField;

package/dist/forms/components/FormFields/index.d.ts

@@ -4,6 +4,7 @@ import type { DropdownComponentProps } from '../Dropdown';
 import type { PointsInputComponentProps } from '../PointsInput';
 import type { NumberInputComponentProps } from '../NumberInput';
 import type { PasswordInputComponentProps } from '../PasswordInput';
+import type { SwitchComponentProps } from '../Switch';
 import type { TextAreaComponentProps } from '../TextArea';
 import type { TextInputComponentProps } from '../TextInput';
 export type AutocompleteFormFieldProps<T> = FormFieldComponentProps<T | null> & AutocompleteComponentProps<T>;
@@ -18,6 +19,8 @@ export type NumberFormFieldProps = FormFieldComponentProps<number> & NumberInput
 export declare function NumberFormField(props: Readonly<NumberFormFieldProps>): React.ReactElement;
 export type PasswordFormFieldProps = FormFieldComponentProps<string> & PasswordInputComponentProps;
 export declare function PasswordFormField(props: Readonly<PasswordFormFieldProps>): React.ReactElement;
+export type SwitchFormFieldProps = FormFieldComponentProps<boolean> & SwitchComponentProps;
+export declare function SwitchFormField(props: SwitchFormFieldProps): React.ReactElement;
 export type TextFormFieldProps = FormFieldComponentProps<string> & TextInputComponentProps;
 export declare function TextFormField(props: Readonly<TextFormFieldProps>): React.ReactElement;
 export type TextAreaFormFieldProps = FormFieldComponentProps<string> & TextAreaComponentProps;

package/dist/forms/components/FormFields/index.js

@@ -8,6 +8,7 @@ import FormField from '../FormField';
 import PointsInput from '../PointsInput';
 import NumberInput from '../NumberInput';
 import PasswordInput from '../PasswordInput';
+import Switch from '../Switch';
 import TextArea from '../TextArea';
 import TextInput from '../TextInput';
 export function AutocompleteFormField(props) {
@@ -40,6 +41,11 @@ export function PasswordFormField(props) {
     const renderInput = useCallback((renderProps) => (_jsx(PasswordInput, { ...renderProps, ...inputProps })), [inputProps]);
     return _jsx(FormField, { ...fieldProps, render: renderInput });
 }
+export function SwitchFormField(props) {
+    const { fieldProps, inputProps } = extractInputProps(props);
+    const renderInput = useCallback((renderProps) => (_jsx(Switch, { ...renderProps, ...inputProps })), [inputProps]);
+    return _jsx(FormField, { ...fieldProps, hasAssistiveLabel: true, hasAssistiveDetails: true, render: renderInput });
+}
 export function TextFormField(props) {
     const { fieldProps, inputProps } = extractInputProps(props);
     const renderInput = useCallback((renderProps) => (_jsx(TextInput, { ...renderProps, ...inputProps })), [inputProps]);

package/dist/forms/components/ModalForm/index.d.ts

@@ -3,11 +3,12 @@ import type { FormProps } from '../Form';
 export interface ModalFormProps {
     children: React.ReactNode;
     formProps: Omit<FormProps, 'children'>;
-    hasServerError?: boolean;
     hasSubmit?: boolean;
     isDisabled?: boolean;
     modalProps: Omit<ModalProps, 'children'>;
+    serverError?: string | null;
     submitLabel?: string;
+    validationErrors?: string[];
 }
-declare function ModalForm({ children, formProps, hasServerError, hasSubmit, isDisabled, modalProps, submitLabel, }: Readonly<ModalFormProps>): React.ReactElement;
+declare function ModalForm({ children, formProps, hasSubmit, isDisabled, modalProps, serverError, submitLabel, validationErrors, }: Readonly<ModalFormProps>): React.ReactElement;
 export default ModalForm;

package/dist/forms/components/ModalForm/index.js

@@ -4,12 +4,13 @@ import Modal from '../../../components/modals/Modal';
 import ModalActions from '../../../components/modals/ModalActions';
 import useSearchParamsHref from '../../../hooks/useSearchParamsHref';
 import Form from '../Form';
-function ModalForm({ children, formProps, hasServerError, hasSubmit = true, isDisabled, modalProps, submitLabel, }) {
+import { InfoPanel } from '../../../components';
+function ModalForm({ children, formProps, hasSubmit = true, isDisabled, modalProps, serverError, submitLabel, validationErrors, }) {
     const { setSearchParamsHref } = useSearchParamsHref();
     function handleCancel() {
         setSearchParamsHref('action', null);
     }
-    return (_jsx(Modal, { ...modalProps, children: _jsxs(Form, { ...formProps, children: [children, hasServerError ? _jsx("div", { children: "SERVER ERROR" }) : null, _jsx(ModalActions, { actions: [
+    return (_jsx(Modal, { ...modalProps, children: _jsxs(Form, { ...formProps, children: [serverError ? _jsx(InfoPanel, { variant: "error", children: serverError }) : null, validationErrors?.length ? (_jsx(InfoPanel, { variant: "error", children: JSON.stringify(validationErrors) })) : null, children, _jsx(ModalActions, { actions: [
                         { label: 'Cancel', onClick: handleCancel },
                         ...(modalProps.actions || []),
                         hasSubmit

package/dist/forms/components/Switch/index.d.ts

@@ -5,7 +5,13 @@ export interface SwitchClassNames {
     control: string;
     input: CheckableClassName;
     icon: CheckableClassName;
+    label: string;
+    details: string;
 }
-export type SwitchProps = ClassNameProps<SwitchClassNames> & InputProps<boolean>;
-declare function Switch({ classNameProps, classNames, id, isDisabled, name, onChange, value, }: Readonly<SwitchProps>): React.ReactElement;
+export type SwitchComponentProps = {
+    details?: React.ReactNode;
+    label?: React.ReactNode;
+};
+export type SwitchProps = ClassNameProps<SwitchClassNames> & InputProps<boolean> & SwitchComponentProps;
+declare function Switch({ classNameProps, classNames, details, id, isDisabled, label, name, onChange, value, }: Readonly<SwitchProps>): React.ReactElement;
 export default Switch;

package/dist/forms/components/Switch/index.js

@@ -1,9 +1,10 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment } from 'react';
+import Assistive from '../../../components/utility/Assistive';
 import { useClassNames } from '../../../styles/context';
 import tw from '../../../styles/classnames/utility/tw';
-function Switch({ classNameProps, classNames, id, isDisabled, name, onChange, value, }) {
+function Switch({ classNameProps, classNames, details, id, isDisabled, label, name, onChange, value, }) {
     const componentClassNames = useClassNames('switch', { props: classNameProps, states: { isChecked: Boolean(value) } }, classNames);
     function handleChange(event) {
         if (onChange) {
@@ -13,6 +14,6 @@ function Switch({ classNameProps, classNames, id, isDisabled, name, onChange, va
             onChange(inputEvent);
         }
     }
-    return (_jsxs(Fragment, { children: [_jsx("input", { name: name, type: "hidden", value: "false" }), _jsx("div", { className: tw('block', componentClassNames?.root), children: _jsxs("div", { className: tw('relative', componentClassNames?.control), children: [_jsx("input", { "aria-checked": Boolean(value), checked: Boolean(value), className: tw('appearance-none', componentClassNames?.input), disabled: isDisabled, id: id || name, name: name, onChange: handleChange, type: "checkbox", value: "true" }), _jsx("i", { className: componentClassNames?.icon })] }) })] }));
+    return (_jsxs(Fragment, { children: [_jsx("input", { name: name, type: "hidden", value: "false" }), _jsxs("div", { className: tw('block', componentClassNames?.root), children: [_jsxs("div", { className: tw('relative', componentClassNames?.control), children: [_jsx("input", { "aria-checked": Boolean(value), checked: Boolean(value), className: tw('appearance-none', componentClassNames?.input), disabled: isDisabled, id: id || name, name: name, onChange: handleChange, type: "checkbox", value: "true" }), _jsx("i", { className: componentClassNames?.icon })] }), label ? (_jsxs("label", { htmlFor: id || name, children: [_jsx("span", { className: tw('', componentClassNames?.label), children: label }), details ? (_jsx("small", { className: tw('', componentClassNames?.details), children: details })) : null] })) : (_jsx(Assistive, { children: "Yes?" }))] })] }));
 }
 export default Switch;

package/dist/forms/hooks/useForm.d.ts

@@ -24,7 +24,7 @@ export interface UseFormArgs<Request, Response> extends UseSuccessArgs<Response>
     defaults?: Default<Request>;
     onError?: (message: string) => void;
     onSubmit?: (formData: Request) => FormResponse<Response>;
-    onValidation?: (errors: Record<string, string>) => void;
+    onValidation?: (errors: Record<string, string>, uncaughtErrors?: Record<string, string>) => void;
     toasts?: ToastsArgs | false;
 }
 export interface UseFormReturn<Request> {
@@ -38,6 +38,7 @@ export interface UseFormReturn<Request> {
     setFormData: <K extends keyof Request>(key: K, value: Request[K]) => void;
     submitForm: () => void;
 }
+export declare const DEFAULT_TOAST_MESSAGES: Record<keyof ToastsArgs, string>;
 /**
  * ## Overview
  *

package/dist/forms/hooks/useForm.js

@@ -4,7 +4,7 @@ import { formatTitle } from '@sqrzro/utility';
 import useDeepCompareEffect from 'use-deep-compare-effect';
 import useSuccess from '../../hooks/useSuccess';
 import useToast from '../../hooks/useToast';
-const DEFAULT_TOAST_MESSAGES = {
+export const DEFAULT_TOAST_MESSAGES = {
     server: 'There was a problem submitting your request. Please try again later.',
     success: 'Your request was submitted successfully.',
     validation: 'There was a problem with your submission. Please check the form and try again.',
@@ -121,9 +121,11 @@ function getToastMessage(key, toasts) {
  */
 function useForm({ defaults = {}, onError, onSubmit, onSuccess, onValidation, redirectOnSuccess, refreshOnSuccess, toasts, }) {
     const ref = useRef(null);
+    const usedFields = useRef(new Set());
     const { handleSuccess } = useSuccess({ onSuccess, redirectOnSuccess, refreshOnSuccess });
     const [isLoading] = useTransition();
     const [errors, setErrors] = useState(null);
+    const [uncaughtErrors, setUncaughtErrors] = useState(null);
     const [data, setData] = useState(defaults);
     const { toastError, toastSuccess } = useToast();
     function setFormData(key, value) {
@@ -141,8 +143,12 @@ function useForm({ defaults = {}, onError, onSubmit, onSuccess, onValidation, re
         toastError(getToastMessage('server', toasts));
     }
     function handleFormValidation(messages) {
-        onValidation?.(messages);
+        const uncaughtMessages = Object.keys(messages)
+            .filter((key) => !usedFields.current.has(key))
+            .reduce((acc, key) => ({ ...acc, [key]: messages[key] }), {});
+        onValidation?.(messages, uncaughtMessages);
         setErrors(messages);
+        setUncaughtErrors(uncaughtMessages);
         toastError(getToastMessage('validation', toasts));
     }
     async function handleSubmit() {
@@ -162,6 +168,7 @@ function useForm({ defaults = {}, onError, onSubmit, onSuccess, onValidation, re
         }
     }
     function fieldProps(name, label) {
+        usedFields.current.add(name);
         return {
             error: getErrorsForField(errors, name),
             label: getLabel(name, label),
@@ -186,6 +193,7 @@ function useForm({ defaults = {}, onError, onSubmit, onSuccess, onValidation, re
         formProps: {
             action: handleSubmit,
             ref,
+            uncaughtErrors,
         },
         isLoading,
         resetForm,

package/dist/forms/hooks/useModalForm.js

@@ -1,8 +1,10 @@
 'use client';
+import { useState } from 'react';
 import { useRouter } from 'next/navigation';
 import useSearchParamsHref from '../../hooks/useSearchParamsHref';
-import useForm from './useForm';
+import useForm, { DEFAULT_TOAST_MESSAGES } from './useForm';
 function useModalForm({ actions, icon, submitLabel, title, ...useFormArgs }) {
+    const [serverError, setServerError] = useState(null);
     const { setSearchParamsHref } = useSearchParamsHref();
     const router = useRouter();
     function handleSuccess(response) {
@@ -14,6 +16,10 @@ function useModalForm({ actions, icon, submitLabel, title, ...useFormArgs }) {
     }
     const useFormReturn = useForm({
         ...useFormArgs,
+        onError: (message) => {
+            setServerError(DEFAULT_TOAST_MESSAGES.server);
+            useFormArgs.onError?.(message);
+        },
         onSuccess: handleSuccess,
         toasts: false,
     });
@@ -22,6 +28,7 @@ function useModalForm({ actions, icon, submitLabel, title, ...useFormArgs }) {
         formProps: {
             formProps: useFormReturn.formProps,
             modalProps: { actions, icon, title },
+            serverError,
             submitLabel,
         },
     };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sqrzro/ui",
   "type": "module",
-  "version": "4.0.0-alpha.54",
+  "version": "4.0.0-alpha.56",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "ISC",