@sqrzro/ui 4.0.0-alpha.74 → 4.0.0-alpha.75

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

@@ -0,0 +1,12 @@
+import type { DropdownObject, InputProps } from '../../../forms/interfaces';
+import type { ClassNameProps, ErrorableClassName } from '../../../styles/classnames/interfaces';
+export interface CheckboxInputClassNames {
+    root: ErrorableClassName;
+    item: ErrorableClassName;
+}
+export interface CheckboxInputComponentProps<T> {
+    options?: DropdownObject<T>[];
+}
+export type CheckboxInputProps<T> = ClassNameProps<CheckboxInputClassNames> & InputProps<T[]> & CheckboxInputComponentProps<T>;
+declare function CheckboxInput<T>({ classNames, classNameProps, hasError, name, onChange, options, value, }: CheckboxInputProps<T>): React.ReactElement;
+export default CheckboxInput;

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

@@ -0,0 +1,15 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { toggleArrayItem } from '@sqrzro/utility';
+import { useClassNames } from '../../../styles/context';
+import ChkRad from '../ChkRad';
+function CheckboxInput({ classNames, classNameProps, hasError, name, onChange, options = [], value, }) {
+    const componentClassNames = useClassNames('checkboxInput', { props: classNameProps, states: { isError: hasError ?? false } }, classNames);
+    function handleChange(id) {
+        return () => {
+            onChange?.({ target: { name, value: toggleArrayItem(value || [], id) } });
+        };
+    }
+    return (_jsx("ul", { className: componentClassNames?.root, role: "listbox", children: options.map((item) => (_jsx("li", { children: _jsx(ChkRad, { classNameProps: classNameProps, label: item.label, name: `${name}[]`, onChange: handleChange(item.value), value: value?.includes(item.value) ?? false }) }, String(item.value)))) }));
+}
+export default CheckboxInput;

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

@@ -0,0 +1,18 @@
+import { InputProps } from '../../../forms/interfaces';
+import { CheckableClassName, ClassNameProps } from '../../../styles/classnames/interfaces';
+export interface ChkRadClassNames {
+    details: string;
+    icon: CheckableClassName;
+    label: string;
+}
+export interface ChkRadProps extends ClassNameProps<ChkRadClassNames>, InputProps<boolean> {
+    details?: React.ReactNode;
+    label: React.ReactNode;
+    type?: 'checkbox' | 'radio';
+}
+/**
+ * Either a checkbox or a radio button. The onChange event will return a string of the value of
+ * the checked item.
+ */
+declare function ChkRad({ classNames, classNameProps, details, id, isDisabled, name, label, onChange, type, value, }: Readonly<ChkRadProps>): React.ReactElement;
+export default ChkRad;

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

@@ -0,0 +1,22 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { useClassNames, useIcon } from '../../../styles/context';
+import tw from '../../../styles/classnames/utility/tw';
+import Assistive from '../../../components/utility/Assistive';
+/**
+ * Either a checkbox or a radio button. The onChange event will return a string of the value of
+ * the checked item.
+ */
+function ChkRad({ classNames, classNameProps, details, id, isDisabled, name, label, onChange, type = 'checkbox', value, }) {
+    const componentClassNames = useClassNames('chkrad', { props: classNameProps, states: { isChecked: value ?? false } }, classNames);
+    const CheckedIcon = useIcon('chkrad.checked');
+    const ref = useRef(null);
+    function handleChange(event) {
+        if (onChange) {
+            onChange({ target: { name, value: event.target.checked } });
+        }
+    }
+    return (_jsxs("label", { className: tw('flex cursor-pointer', isDisabled ? 'pointer-events-none opacity-30' : null), "data-testid": "chkrad-root", children: [_jsx(Assistive, { children: _jsx("input", { checked: Boolean(value), disabled: isDisabled, id: id || name, name: name, onChange: handleChange, type: type }) }), _jsx("span", { className: componentClassNames?.icon, children: CheckedIcon && value ? _jsx(CheckedIcon, {}) : null }), _jsxs("div", { ref: ref, className: tw(componentClassNames?.label), children: [label, details ? _jsx("div", { className: tw(componentClassNames?.details), children: details }) : null] })] }));
+}
+export default ChkRad;

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

@@ -3,8 +3,9 @@ import type { SimpleActionObject } from '../../../utility/interfaces';
 import type { EditingStatus } from '../../interfaces';
 import type { FormProps } from '../Form';
 export interface EditableFormClassNames {
-    actions: string;
     root: string;
+    errors: string;
+    actions: string;
     header: string;
     title: string;
     description: string;

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

@@ -13,7 +13,7 @@ function EditableForm({ classNameProps, classNames, children, formProps, onCance
         onEdit?.();
         setStatus?.('EDITING');
     }
-    return (_jsxs(Form, { ...formProps, classNames: { root: componentClassNames?.root }, children: [title ? (_jsx("header", { className: componentClassNames?.header, children: _jsx("legend", { className: componentClassNames?.title, children: title }) })) : null, _jsxs("div", { className: componentClassNames?.content, children: [children, _jsx("footer", { className: componentClassNames?.actions, children: _jsx(ActionList, { actions: status === 'EDITING'
+    return (_jsxs(Form, { ...formProps, classNames: { root: componentClassNames?.root, errors: componentClassNames?.errors }, children: [title ? (_jsx("header", { className: componentClassNames?.header, children: _jsx("legend", { className: componentClassNames?.title, children: title }) })) : null, _jsxs("div", { className: componentClassNames?.content, children: [children, _jsx("footer", { className: componentClassNames?.actions, children: _jsx(ActionList, { actions: status === 'EDITING'
                                 ? [
                                     { label: 'Cancel', onClick: setCancelled },
                                     { isSubmittable: true, label: 'Save' },

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

@@ -1,10 +1,13 @@
 import type { EditableFormFieldComponentProps } from '../../interfaces';
+import type { CheckboxInputComponentProps } from '../CheckboxInput';
 import type { ColorInputComponentProps } from '../ColorInput';
 import type { DropdownComponentProps } from '../Dropdown';
 import type { ImageInputComponentProps } from '../ImageInput';
 import type { SwitchComponentProps } from '../Switch';
 import type { TextAreaComponentProps } from '../TextArea';
 import type { TextInputComponentProps } from '../TextInput';
+export type EditableCheckboxFormFieldProps<T> = EditableFormFieldComponentProps<T[]> & CheckboxInputComponentProps<T>;
+export declare function EditableCheckboxFormField<T>(props: Readonly<EditableCheckboxFormFieldProps<T>>): React.ReactElement;
 export type EditableColorFormFieldProps = EditableFormFieldComponentProps<string | undefined> & ColorInputComponentProps;
 export declare function EditableColorFormField(props: Readonly<EditableColorFormFieldProps>): React.ReactElement;
 export type EditableDropdownFormFieldProps<T> = EditableFormFieldComponentProps<T | null> & DropdownComponentProps<T>;

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

@@ -3,6 +3,7 @@ import { useCallback } from 'react';
 import { useClassNames } from '../../../styles/context';
 import tw from '../../../styles/classnames/utility/tw';
 import extractEditableInputProps from '../../utility/extract-editable-input-props';
+import CheckboxInput from '../CheckboxInput';
 import ColorInput from '../ColorInput';
 import Dropdown from '../Dropdown';
 import EditableFormField from '../EditableFormField';
@@ -10,6 +11,20 @@ import ImageInput from '../ImageInput';
 import Switch from '../Switch';
 import TextArea from '../TextArea';
 import TextInput from '../TextInput';
+export function EditableCheckboxFormField(props) {
+    const classNames = useClassNames('checkboxInput');
+    const { fieldProps, inputProps } = extractEditableInputProps(props);
+    const renderInput = useCallback((renderProps) => (_jsx(CheckboxInput, { ...renderProps, ...inputProps })), [inputProps]);
+    const renderValue = useCallback((value) => {
+        if (!value) {
+            return '-';
+        }
+        return (_jsx("ul", { className: classNames?.root, role: "listbox", children: props.options
+                ?.filter((option) => value.includes(option.value))
+                .map((option) => (_jsx("li", { className: classNames?.item, children: option.label }, String(option.value)))) }));
+    }, [fieldProps.value]);
+    return _jsx(EditableFormField, { ...fieldProps, render: renderInput, renderValue: renderValue });
+}
 export function EditableColorFormField(props) {
     const classNames = useClassNames('colorInput');
     const { fieldProps, inputProps } = extractEditableInputProps(props);

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

@@ -1,6 +1,7 @@
 import type { ClassNameProps } from '../../../styles/classnames/interfaces';
 export interface FormClassNames {
     root: string;
+    errors: string;
 }
 export interface FormProps extends ClassNameProps<FormClassNames> {
     action?: (formData: FormData) => void;

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

@@ -5,6 +5,6 @@ import tw from '../../../styles/classnames/utility/tw';
 import { InfoPanel } from '../../../components';
 function Form({ action, children, classNames, classNameProps, id, onSubmit, uncaughtErrors, ref, }) {
     const componentClassNames = useClassNames('form', { props: classNameProps }, classNames);
-    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] }));
+    return (_jsxs("form", { ref: ref, action: action, className: tw(componentClassNames?.root), id: id, onSubmit: onSubmit, children: [uncaughtErrors && Object.keys(uncaughtErrors).length ? (_jsx("div", { className: tw(componentClassNames?.errors), children: _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/FormFields/index.d.ts

@@ -2,6 +2,7 @@ import type { FormFieldComponentProps } from '../../interfaces';
 import type { AutocompleteComponentProps } from '../Autocomplete';
 import type { ColorInputComponentProps } from '../ColorInput';
 import type { CalendarInputComponentProps } from '../CalendarInput';
+import type { CheckboxInputComponentProps } from '../CheckboxInput';
 import type { DropdownComponentProps } from '../Dropdown';
 import type { ImageInputComponentProps } from '../ImageInput';
 import type { PointsInputComponentProps } from '../PointsInput';
@@ -15,6 +16,8 @@ export type AutocompleteFormFieldProps<T> = FormFieldComponentProps<T | null> &
 export declare function AutocompleteFormField<T>(props: Readonly<AutocompleteFormFieldProps<T>>): React.ReactElement;
 export type CalendarFormFieldProps = FormFieldComponentProps<Date | null> & CalendarInputComponentProps;
 export declare function CalendarFormField(props: Readonly<CalendarFormFieldProps>): React.ReactElement;
+export type CheckboxFormFieldProps<T> = FormFieldComponentProps<T[]> & CheckboxInputComponentProps<T>;
+export declare function CheckboxFormField<T>(props: Readonly<CheckboxFormFieldProps<T>>): React.ReactElement;
 export type ColorFormFieldProps = FormFieldComponentProps<string> & ColorInputComponentProps;
 export declare function ColorFormField(props: Readonly<ColorFormFieldProps>): React.ReactElement;
 export type CSVFormFieldProps = FormFieldComponentProps<string>;

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

@@ -5,6 +5,7 @@ import Autocomplete from '../Autocomplete';
 import ColorInput from '../ColorInput';
 import CSVInput from '../CSVInput';
 import CalendarInput from '../CalendarInput';
+import CheckboxInput from '../CheckboxInput';
 import Dropdown from '../Dropdown';
 import FormField from '../FormField';
 import ImageInput from '../ImageInput';
@@ -25,6 +26,11 @@ export function CalendarFormField(props) {
     const renderInput = useCallback((renderProps) => (_jsx(CalendarInput, { ...renderProps, ...inputProps })), [inputProps]);
     return _jsx(FormField, { ...fieldProps, render: renderInput });
 }
+export function CheckboxFormField(props) {
+    const { fieldProps, inputProps } = extractInputProps(props);
+    const renderInput = useCallback((renderProps) => (_jsx(CheckboxInput, { ...renderProps, ...inputProps })), [inputProps]);
+    return _jsx(FormField, { ...fieldProps, render: renderInput });
+}
 export function ColorFormField(props) {
     const { fieldProps, inputProps } = extractInputProps(props);
     const renderInput = useCallback((renderProps) => (_jsx(ColorInput, { ...renderProps, ...inputProps })), [inputProps]);

package/dist/forms/hooks/useEditableForm.js

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import useForm from './useForm';
 function useEditableForm({ defaultStatus, onCancel, onEdit, onSuccess, title, ...args }) {
     const [status, setStatus] = useState(defaultStatus ?? null);
@@ -17,18 +17,19 @@ function useEditableForm({ defaultStatus, onCancel, onEdit, onSuccess, title, ..
         const fieldProps = useFormReturn.fieldProps(name, label);
         return { ...fieldProps, status };
     }
-    useEffect(() => {
-        if (status === 'CANCELLED') {
-            useFormReturn.setErrors(null);
+    function handleCancel() {
+        if (onCancel) {
+            onCancel();
         }
-    }, [status]);
+        useFormReturn.resetForm();
+    }
     return {
         ...useFormReturn,
         actionProps: { status, setStatus },
         fieldProps: editableFieldProps,
         formProps: {
             formProps: useFormReturn.formProps,
-            onCancel,
+            onCancel: handleCancel,
             onEdit,
             status,
             setStatus,

package/dist/forms/hooks/useForm.js

@@ -181,6 +181,7 @@ function useForm({ defaults = {}, onError, onSubmit, onSuccess, onValidation, re
         setTimeout(() => {
             setData((defaults || {}));
             setErrors(null);
+            setUncaughtErrors(null);
         }, 1);
     }
     useDeepCompareEffect(() => {

package/dist/styles/classnames/config.d.ts

@@ -27,6 +27,8 @@ import type { FilterClearButtonClassNames } from '../../filters/components/Filte
 import type { FilterItemClassNames } from '../../filters/components/FilterItem';
 import type { FilterPanelClassNames } from '../../filters/components/FilterPanel';
 import type { SearchFilterClassNames } from '../../filters/filters/SearchFilter';
+import type { CheckboxInputClassNames } from '../../forms/components/CheckboxInput';
+import type { ChkRadClassNames } from '../../forms/components/ChkRad';
 import type { ColorInputClassNames } from '../../forms/components/ColorInput';
 import type { CSVInputClassNames } from '../../forms/components/CSVInput';
 import type { DropdownClassNames } from '../../forms/components/Dropdown';
@@ -51,6 +53,8 @@ export interface UIClassNames {
     badge?: ComponentClassNames<BadgeClassNames>;
     button?: ComponentClassNames<ButtonClassNames>;
     calendar?: ComponentClassNames<CalendarClassNames>;
+    checkboxInput?: ComponentClassNames<CheckboxInputClassNames>;
+    chkrad?: ComponentClassNames<ChkRadClassNames>;
     colorInput?: ComponentClassNames<ColorInputClassNames>;
     container?: ComponentClassNames<ContainerClassNames>;
     csvInput?: ComponentClassNames<CSVInputClassNames>;

package/dist/styles/icons/config.d.ts

@@ -3,6 +3,7 @@ export interface UIIcons {
     'appNavigation.menu'?: IconComponent;
     'calendar.previous'?: IconComponent;
     'calendar.next'?: IconComponent;
+    'chkrad.checked'?: IconComponent;
     'csvInput.upload'?: IconComponent;
     'csvInput.success'?: IconComponent;
     'collection.empty'?: IconComponent;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sqrzro/ui",
   "type": "module",
-  "version": "4.0.0-alpha.74",
+  "version": "4.0.0-alpha.75",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "ISC",
@@ -57,8 +57,8 @@
     "react-dom": "^19.2.8",
     "tailwind-merge": "^3.6.0",
     "use-deep-compare-effect": "^1.8.1",
-    "@sqrzro/utility": "^4.0.0-alpha.21",
-    "@sqrzro/addons": "^4.0.0-alpha.14"
+    "@sqrzro/addons": "^4.0.0-alpha.14",
+    "@sqrzro/utility": "^4.0.0-alpha.21"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "^10.5.3",