@sqrzro/ui 4.0.0-alpha.77 → 4.0.0-alpha.78

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

@@ -4,6 +4,7 @@ export interface ChkRadClassNames {
     details: string;
     icon: CheckableClassName;
     label: string;
+    root: string;
 }
 export interface ChkRadProps extends ClassNameProps<ChkRadClassNames>, InputProps<boolean> {
     details?: React.ReactNode;
@@ -14,5 +15,5 @@ export interface ChkRadProps extends ClassNameProps<ChkRadClassNames>, InputProp
  * 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;
+declare function ChkRad({ classNames, classNameProps, details, id, isDisabled, isReadOnly, name, label, onChange, type, value, }: Readonly<ChkRadProps>): React.ReactElement;
 export default ChkRad;

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

@@ -8,8 +8,11 @@ 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);
+function ChkRad({ classNames, classNameProps, details, id, isDisabled, isReadOnly, name, label, onChange, type = 'checkbox', value, }) {
+    const componentClassNames = useClassNames('chkrad', {
+        props: { ...classNameProps, isReadOnly: isReadOnly ?? false },
+        states: { isChecked: value ?? false },
+    }, classNames);
     const CheckedIcon = useIcon('chkrad.checked');
     const ref = useRef(null);
     function handleChange(event) {
@@ -17,6 +20,6 @@ function ChkRad({ classNames, classNameProps, details, id, isDisabled, name, lab
             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] })] }));
+    return (_jsxs("label", { className: tw(componentClassNames?.root, isDisabled ? 'pointer-events-none opacity-30' : null), children: [_jsx(Assistive, { children: _jsx("input", { checked: Boolean(value), disabled: isDisabled, id: id || name, name: name, readOnly: isReadOnly, 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

@@ -15,11 +15,12 @@ export interface EditableFormProps extends ClassNameProps<EditableFormClassNames
     actions?: SimpleActionObject[] | false;
     children: React.ReactNode;
     formProps: Omit<FormProps, 'children'>;
+    isEditable?: boolean;
     onCancel?: () => void;
     onEdit?: () => void;
     setStatus?: (status: EditingStatus | null) => void;
     status?: EditingStatus | null;
     title?: string;
 }
-declare function EditableForm({ classNameProps, classNames, children, formProps, onCancel, onEdit, setStatus, status, title, }: Readonly<EditableFormProps>): React.ReactElement;
+declare function EditableForm({ classNameProps, classNames, children, formProps, isEditable, onCancel, onEdit, setStatus, status, title, }: Readonly<EditableFormProps>): React.ReactElement;
 export default EditableForm;

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

@@ -3,21 +3,25 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import ActionList from '../../../components/utility/ActionList';
 import { useClassNames } from '../../../styles/context';
 import Form from '../Form';
-function EditableForm({ classNameProps, classNames, children, formProps, onCancel, onEdit, setStatus, status, title, }) {
-    const componentClassNames = useClassNames('editableForm', { props: classNameProps }, classNames);
+function EditableForm({ classNameProps, classNames, children, formProps, isEditable = true, onCancel, onEdit, setStatus, status, title, }) {
+    const componentClassNames = useClassNames('editableForm', { props: { ...classNameProps, hasTitle: Boolean(title), isEditable } }, classNames);
     function setCancelled() {
-        onCancel?.();
-        setStatus?.('CANCELLED');
+        if (isEditable) {
+            onCancel?.();
+            setStatus?.('CANCELLED');
+        }
     }
     function setEditing() {
-        onEdit?.();
-        setStatus?.('EDITING');
+        if (isEditable) {
+            onEdit?.();
+            setStatus?.('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'
+    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, isEditable ? (_jsx("footer", { className: componentClassNames?.actions, children: _jsx(ActionList, { actions: status === 'EDITING'
                                 ? [
                                     { label: 'Cancel', onClick: setCancelled },
                                     { isSubmittable: true, label: 'Save' },
                                 ]
-                                : [{ label: 'Edit', onClick: setEditing }] }) })] })] }));
+                                : [{ label: 'Edit', onClick: setEditing }] }) })) : null] })] }));
 }
 export default EditableForm;

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

@@ -14,6 +14,7 @@ import PointsInput from '../PointsInput';
 import Switch from '../Switch';
 import TextArea from '../TextArea';
 import TextInput from '../TextInput';
+import ChkRad from '../ChkRad';
 export function EditableCheckboxFormField(props) {
     const classNames = useClassNames('checkboxInput');
     const { fieldProps, inputProps } = extractEditableInputProps(props);
@@ -24,7 +25,7 @@ export function EditableCheckboxFormField(props) {
         }
         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)))) }));
+                .map((option) => (_jsx("li", { className: classNames?.item, children: _jsx(ChkRad, { isReadOnly: true, label: option.label, name: props.name, value: true }) }, String(option.value)))) }));
     }, [fieldProps.value]);
     return _jsx(EditableFormField, { ...fieldProps, render: renderInput, renderValue: renderValue });
 }

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

@@ -6,6 +6,7 @@ export interface EditableFieldPropsReturn<Request, K extends keyof Request = key
 }
 export type UseEditableFormArgs<Request, Response> = UseFormArgs<Request, Response> & {
     defaultStatus?: EditingStatus;
+    isEditable?: boolean;
     onCancel?: () => void;
     onEdit?: () => void;
     title?: string;
@@ -20,5 +21,5 @@ export interface UseEditableFormReturn<Request> extends Omit<UseFormReturn<Reque
     setStatus: React.Dispatch<React.SetStateAction<EditingStatus | null>>;
     status: EditingStatus | null;
 }
-declare function useEditableForm<Request extends object, Response = Request>({ defaultStatus, onCancel, onEdit, onSuccess, title, ...args }: UseEditableFormArgs<Request, Response>): UseEditableFormReturn<Request>;
+declare function useEditableForm<Request extends object, Response = Request>({ defaultStatus, isEditable, onCancel, onEdit, onSuccess, title, ...args }: UseEditableFormArgs<Request, Response>): UseEditableFormReturn<Request>;
 export default useEditableForm;

package/dist/forms/hooks/useEditableForm.js

@@ -1,8 +1,11 @@
 import { useState } from 'react';
 import useForm from './useForm';
-function useEditableForm({ defaultStatus, onCancel, onEdit, onSuccess, title, ...args }) {
-    const [status, setStatus] = useState(defaultStatus ?? null);
+function useEditableForm({ defaultStatus, isEditable = true, onCancel, onEdit, onSuccess, title, ...args }) {
+    const [status, setStatus] = useState(isEditable ? (defaultStatus ?? null) : null);
     async function onEditableSuccess(response) {
+        if (!isEditable) {
+            return;
+        }
         if (onSuccess) {
             await onSuccess(response);
         }
@@ -15,7 +18,7 @@ function useEditableForm({ defaultStatus, onCancel, onEdit, onSuccess, title, ..
     });
     function editableFieldProps(name, label) {
         const fieldProps = useFormReturn.fieldProps(name, label);
-        return { ...fieldProps, status };
+        return { ...fieldProps, status: isEditable ? status : null };
     }
     function handleCancel() {
         if (onCancel) {
@@ -29,6 +32,7 @@ function useEditableForm({ defaultStatus, onCancel, onEdit, onSuccess, title, ..
         fieldProps: editableFieldProps,
         formProps: {
             formProps: useFormReturn.formProps,
+            isEditable,
             onCancel: handleCancel,
             onEdit,
             status,

package/dist/forms/interfaces.d.ts

@@ -31,6 +31,7 @@ export interface InputProps<V, T extends V = V> {
     hasError?: boolean;
     id?: string;
     isDisabled?: boolean;
+    isReadOnly?: boolean;
     name: string;
     ref?: React.Ref<HTMLInputElement>;
     onChange?: (event: InputEvent<T>) => void;

package/package.json

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