chop-logic-components 4.3.0 → 4.4.0

package/dist/components/contexts/form/FormContext.d.ts

@@ -3,5 +3,6 @@ export interface FormContextProps {
     onChangeFormInput?: (params: FormInputParams) => void;
     initialValues?: FormValues;
     resetSignal?: number;
+    isPending?: boolean;
 }
 export declare const FormContext: import('react').Context<FormContextProps>;

package/dist/components/contexts/form/FormContext.js

@@ -1,5 +1,5 @@
 import { createContext as e } from "react";
 //#region src/components/contexts/form/FormContext.tsx
-var t = e({});
+var t = e({ isPending: !1 });
 //#endregion
 export { t as FormContext };

package/dist/components/molecules/numeric-input/NumericInput.controller.js

@@ -33,7 +33,8 @@ function c({ name: c, defaultValue: l, onChange: u, onDecrement: d, onIncrement:
 		});
 	}, [c])), {
 		handleChange: (e) => {
-			k(Number(e.target.value)), u?.(e);
+			let t = Number(e.target.value);
+			k(t), u?.(e);
 		},
 		value: C,
 		valid: T,

package/dist/components/organisms/form/Form.controller.d.ts

@@ -1,14 +1,22 @@
 import { FormInputParams, FormValues } from '../../../types';
-import { FormEvent, FormEventHandler } from 'react';
-export declare function useFormController({ initialValues, onReset, onSubmit, onClickSubmit, }: {
+import { SubmitEvent, SubmitEventHandler } from 'react';
+interface UseFormControllerParams<TActionState = void> {
     initialValues?: FormValues;
-    onReset?: FormEventHandler<HTMLFormElement>;
-    onSubmit?: FormEventHandler<HTMLFormElement>;
-    onClickSubmit?: (data: FormValues) => void;
-}): {
+    resetOnSuccess?: boolean;
+    onReset?: SubmitEventHandler<HTMLFormElement>;
+    action?: (prevState: TActionState, formData: FormData) => TActionState | Promise<TActionState>;
+    actionInitialState?: TActionState;
+    onActionComplete?: (state: TActionState) => void;
+    onSubmit?: (data: FormValues) => void | Promise<void>;
+}
+interface UseFormControllerReturn {
     handleInputChange: (params: FormInputParams) => void;
-    handleSubmit: (event: FormEvent<HTMLFormElement>) => void;
-    handleReset: (event: FormEvent<HTMLFormElement>) => void;
+    handleReset: (event: SubmitEvent<HTMLFormElement>) => void;
     resetSignal: number;
     valid: boolean;
-};
+    isPending: boolean;
+    formAction?: (formData: FormData) => void;
+    handleSubmit?: (event: SubmitEvent<HTMLFormElement>) => void;
+}
+export declare function useFormController<TActionState = void>({ initialValues, resetOnSuccess, onReset, action, actionInitialState, onActionComplete, onSubmit, }: UseFormControllerParams<TActionState>): UseFormControllerReturn;
+export {};

package/dist/components/organisms/form/Form.controller.js

@@ -1,29 +1,49 @@
 import { getInitialValidationState as e, isFormDataValid as t, updateValidationState as n } from "./Form.helpers.js";
-import { useState as r } from "react";
+import { useActionState as r, useCallback as i, useState as a } from "react";
 //#region src/components/organisms/form/Form.controller.ts
-function i({ initialValues: i, onReset: a, onSubmit: o, onClickSubmit: s }) {
-	let [c, l] = r(i), [u, d] = r(e(i)), [f, p] = r(0);
-	return {
-		handleInputChange: (e) => {
-			l({
-				...c,
-				[e.name]: e.value
-			}), d(n(u, e));
-		},
-		handleSubmit: (e) => {
-			e.preventDefault();
+function o({ initialValues: o, resetOnSuccess: s = !1, onReset: c, action: l, actionInitialState: u, onActionComplete: d, onSubmit: f }) {
+	let [p, m] = a(o), [h, g] = a(e(o)), [_, v] = a(0), [y, b] = a(!1), x = (e) => {
+		let t = {
+			...p,
+			[e.name]: e.value
+		};
+		m(t), g(n(h, e));
+	}, S = i(() => {
+		m(o), v((e) => e + 1), g(e(o));
+	}, [o]), C = (e) => {
+		c?.(e), S();
+	}, w = t(h), [, T, E] = r(async (e, t) => {
+		if (!l) return e;
+		let n = await l(e, t);
+		return d?.(n), s && S(), n;
+	}, u);
+	return l ? {
+		handleInputChange: x,
+		handleReset: C,
+		resetSignal: _,
+		valid: w,
+		isPending: E,
+		formAction: T
+	} : {
+		handleInputChange: x,
+		handleReset: C,
+		resetSignal: _,
+		valid: w,
+		isPending: y,
+		handleSubmit: async (e) => {
+			if (e.preventDefault(), !w || !f) return;
 			let t = {
 				...Object.fromEntries(new FormData(e.target)),
-				...c
+				...p
 			};
-			o?.(e), s?.(t);
-		},
-		handleReset: (e) => {
-			a?.(e), l(i), p(f + 1);
-		},
-		resetSignal: f,
-		valid: t(u)
+			b(!0);
+			try {
+				await f(t), s && S();
+			} finally {
+				b(!1);
+			}
+		}
 	};
 }
 //#endregion
-export { i as useFormController };
+export { o as useFormController };

package/dist/components/organisms/form/Form.css

@@ -1 +1 @@
-.cl-form{align-items:end;gap:var(--cl-l-gap);grid-template-rows:auto;grid-template-columns:auto;display:grid}@media screen and (width>=640px){.cl-form{grid-template-columns:repeat(2,1fr)}}@media screen and (width>=1024px){.cl-form{grid-template-columns:repeat(3,1fr)}}@media screen and (width>=1280px){.cl-form{grid-template-columns:repeat(4,1fr)}}.cl-form__buttons{padding-top:var(--cl-l-gap);grid-column:1/-1;justify-content:space-between;align-items:center;display:flex}
+.cl-form{align-items:end;gap:var(--cl-l-gap);grid-template-rows:auto;grid-template-columns:auto;display:grid}@media screen and (width>=640px){.cl-form{grid-template-columns:repeat(2,1fr)}}@media screen and (width>=1024px){.cl-form{grid-template-columns:repeat(3,1fr)}}@media screen and (width>=1280px){.cl-form{grid-template-columns:repeat(4,1fr)}}.cl-form__buttons{padding-top:var(--cl-l-gap);grid-column:1/-1;justify-content:space-between;align-items:center;display:flex}.cl-form_pending{opacity:.7;pointer-events:none}

package/dist/components/organisms/form/Form2.js

@@ -8,41 +8,50 @@ import './Form.css';/* empty css     */
 import { useMemo as o } from "react";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/components/organisms/form/Form.tsx
-var l = ({ children: l, initialValues: u, onReset: d, onSubmit: f, onClickSubmit: p, hasReset: m = !0, className: h, ...g }) => {
-	let { handleInputChange: _, handleSubmit: v, handleReset: y, resetSignal: b, valid: x } = a({
+var l = ({ children: l, initialValues: u, onReset: d, onSubmit: f, action: p, actionInitialState: m, onActionComplete: h, resetOnSuccess: g = !1, hasReset: _ = !0, className: v }) => {
+	let { handleInputChange: y, handleSubmit: b, handleReset: x, formAction: S, resetSignal: C, valid: w, isPending: T } = a({
 		initialValues: u,
+		resetOnSuccess: g,
 		onReset: d,
 		onSubmit: f,
-		onClickSubmit: p
-	}), S = n(["cl-form", h]), C = o(() => ({
-		onChangeFormInput: _,
+		action: p,
+		actionInitialState: m,
+		onActionComplete: h
+	}), E = n([
+		"cl-form",
+		v,
+		{ "cl-form_pending": T }
+	]), D = o(() => ({
+		onChangeFormInput: y,
 		initialValues: u,
-		resetSignal: b
+		resetSignal: C,
+		isPending: T
 	}), [
-		_,
+		y,
 		u,
-		b
+		C,
+		T
 	]);
 	return /* @__PURE__ */ s("form", {
-		onSubmit: v,
-		onReset: y,
-		...g,
-		className: S,
+		...p ? { action: S } : { onSubmit: b },
+		onReset: x,
+		className: E,
 		children: /* @__PURE__ */ c(i.Provider, {
-			value: C,
+			value: D,
 			children: [l, /* @__PURE__ */ c("div", {
 				className: "cl-form__buttons",
-				children: [m && /* @__PURE__ */ s(r, {
+				children: [_ && /* @__PURE__ */ s(r, {
 					type: "reset",
-					text: "Reset",
-					icon: t.Delete,
-					view: e.Secondary
+					text: "Clear",
+					icon: t.Trash,
+					view: e.Secondary,
+					disabled: T
 				}), /* @__PURE__ */ s(r, {
 					type: "submit",
 					text: "Submit",
 					icon: t.ArrowRight,
-					extended: !m,
-					disabled: !x
+					extended: !_,
+					disabled: !w || T
 				})]
 			})]
 		})

package/dist/components/organisms/grid/Grid.controller.js

@@ -17,10 +17,12 @@ var n = ({ data: n, id: r, onSelect: i }) => {
 			d([]);
 		},
 		handleSelectRowById: (e) => {
-			d([...o, e]);
+			let t = [...o, e];
+			d(t);
 		},
 		handleDeselectRowById: (e) => {
-			d(o.filter((t) => t !== e));
+			let t = o.filter((t) => t !== e);
+			d(t);
 		}
 	};
 };

package/dist/hooks/index.d.ts

@@ -3,6 +3,7 @@ export { useClickOutside } from './use-click-outside/use-click-outside';
 export { useContainerDimensions } from './use-container-dimensions/use-container-dimensions';
 export { useDebounce } from './use-debounce/use-debounce';
 export { useElementIds } from './use-element-ids/use-element-ids';
+export { useFormPending } from './use-form-pending/use-form-pending';
 export { useIsHovered } from './use-is-hovered/use-is-hovered';
 export { useIsMounted } from './use-is-mounted/use-is-mounted';
 export { useIsOverflow } from './use-is-overflow/use-is-overflow';

package/dist/hooks/index.js

@@ -3,6 +3,7 @@ export * from './use-click-outside/index.js';
 export * from './use-container-dimensions/index.js';
 export * from './use-debounce/index.js';
 export * from './use-element-ids/index.js';
+export * from './use-form-pending/index.js';
 export * from './use-is-hovered/index.js';
 export * from './use-is-mounted/index.js';
 export * from './use-is-overflow/index.js';

package/dist/hooks/use-click-outside/use-click-outside.js

@@ -3,7 +3,7 @@ import { useEffect as e } from "react";
 var t = ({ ref: t, onClickOutsideHandler: n, dependentRef: r }) => {
 	e(() => {
 		let e = (e) => {
-			let i = t?.current && !t.current.contains(e.target), a = r?.current ? !r?.current?.contains(e.target) : !0;
+			let i = t?.current && !t.current.contains(e.target), a = !r?.current || !r?.current?.contains(e.target);
 			i && a && n();
 		};
 		return document.addEventListener("mousedown", e), () => {

package/dist/hooks/use-form-pending/index.js

@@ -0,0 +1,2 @@
+export * from './use-form-pending.js';
+export { default } from './use-form-pending.js';

package/dist/hooks/use-form-pending/use-form-pending.d.ts

@@ -0,0 +1 @@
+export declare const useFormPending: () => boolean;

package/dist/hooks/use-form-pending/use-form-pending.js

@@ -0,0 +1,9 @@
+import { FormContext as e } from "../../components/contexts/form/FormContext.js";
+import { useContext as t } from "react";
+//#region src/hooks/use-form-pending/use-form-pending.ts
+var n = () => {
+	let { isPending: n } = t(e);
+	return n ?? !1;
+};
+//#endregion
+export { n as useFormPending };

package/dist/hooks/use-remaining-timer/use-remaining-timer.js

@@ -15,7 +15,9 @@ function r({ isOpened: r, isHovered: i, onClose: a, autoClose: o = !0, autoClose
 		u.current = Date.now() - d.current;
 		let e = () => {
 			let t = Date.now() - u.current;
-			if (d.current = t, l(Math.max(0, 100 - t / s * 100)), t >= s) {
+			d.current = t;
+			let n = Math.max(0, 100 - t / s * 100);
+			if (l(n), t >= s) {
 				a();
 				return;
 			}

package/dist/index.es.js

@@ -27,35 +27,36 @@ import { useClickOutside as T } from "./hooks/use-click-outside/use-click-outsid
 import { useContainerDimensions as E } from "./hooks/use-container-dimensions/use-container-dimensions.js";
 import { useDebounce as D } from "./hooks/use-debounce/use-debounce.js";
 import { useElementIds as O } from "./hooks/use-element-ids/use-element-ids.js";
-import { useIsHovered as k } from "./hooks/use-is-hovered/use-is-hovered.js";
-import { useIsMounted as A } from "./hooks/use-is-mounted/use-is-mounted.js";
-import { useIsOverflow as j } from "./hooks/use-is-overflow/use-is-overflow.js";
-import { useKeyPress as M } from "./hooks/use-key-press/use-key-press.js";
-import { useModalFocusTrap as N } from "./hooks/use-modal-focus-trap/use-modal-focus-trap.js";
-import { useRemainingTimer as P } from "./hooks/use-remaining-timer/use-remaining-timer.js";
-import { FormContext as F } from "./components/contexts/form/FormContext.js";
-import { CL_DARK_THEME_CLASS as I, CL_LIGHT_THEME_CLASS as L, ThemeContext as R } from "./components/contexts/theme/ThemeContext.js";
-import { ThemeProvider as z } from "./components/contexts/theme/ThemeProvider.js";
-import { useResetFormInput as B } from "./hooks/use-reset-form-input/use-reset-form-input.js";
-import { useTheme as V } from "./hooks/use-theme/use-theme.js";
-import { useTooltipPosition as H } from "./hooks/use-tooltip-position/use-tooltip-position.js";
-import { useWindowDimensions as U } from "./hooks/use-window-dimensions/use-window-dimensions.js";
-import W from "./components/atoms/tooltip/Tooltip2.js";
-import G from "./components/molecules/accordion/Accordion2.js";
-import K from "./components/molecules/alert/Alert2.js";
-import q from "./components/molecules/breadcrumbs/Breadcrumbs2.js";
-import J from "./components/molecules/checkbox/Checkbox2.js";
-import Y from "./components/molecules/multi-select/MultiSelect.js";
-import X from "./components/molecules/numeric-input/NumericInput2.js";
-import Z from "./components/molecules/search/Search2.js";
-import Q from "./components/molecules/select/Select2.js";
-import $ from "./components/molecules/switch/Switch2.js";
-import ee from "./components/molecules/text-input/TextInput2.js";
-import te from "./components/organisms/dialog/Dialog2.js";
-import ne from "./components/organisms/form/Form2.js";
-import re from "./components/organisms/gallery/Gallery2.js";
-import ie from "./components/organisms/grid/Grid2.js";
-import ae from "./components/organisms/menu/Menu2.js";
-import oe from "./components/organisms/preview-card/PreviewCard2.js";
-import se from "./components/organisms/tabs/Tabs2.js";
-export { G as Accordion, K as Alert, r as AlertMode, f as Avatar, q as Breadcrumbs, p as Button, i as ButtonView, I as CL_DARK_THEME_CLASS, L as CL_LIGHT_THEME_CLASS, J as Checkbox, te as Dialog, m as EditableText, a as ElementSize, h as ErrorMessage, ne as Form, F as FormContext, re as Gallery, ie as Grid, g as Header, _ as Icon, o as IconName, v as Image, y as Input, b as Label, x as Link, s as LinkTarget, c as LoaderView, ae as Menu, Y as MultiSelect, X as NumericInput, l as OrientationMode, S as Portal, oe as PreviewCard, Z as Search, Q as Select, u as SemanticColor, $ as Switch, se as Tabs, C as Tag, ee as TextInput, R as ThemeContext, z as ThemeProvider, W as Tooltip, d as TooltipContainer, w as useAutoClose, T as useClickOutside, E as useContainerDimensions, D as useDebounce, O as useElementIds, k as useIsHovered, A as useIsMounted, j as useIsOverflow, M as useKeyPress, N as useModalFocusTrap, P as useRemainingTimer, B as useResetFormInput, V as useTheme, H as useTooltipPosition, U as useWindowDimensions, e as withErrorBoundary, t as withFigureCaption, n as withTooltip };
+import { FormContext as k } from "./components/contexts/form/FormContext.js";
+import { CL_DARK_THEME_CLASS as A, CL_LIGHT_THEME_CLASS as j, ThemeContext as M } from "./components/contexts/theme/ThemeContext.js";
+import { ThemeProvider as N } from "./components/contexts/theme/ThemeProvider.js";
+import { useFormPending as P } from "./hooks/use-form-pending/use-form-pending.js";
+import { useIsHovered as F } from "./hooks/use-is-hovered/use-is-hovered.js";
+import { useIsMounted as I } from "./hooks/use-is-mounted/use-is-mounted.js";
+import { useIsOverflow as L } from "./hooks/use-is-overflow/use-is-overflow.js";
+import { useKeyPress as R } from "./hooks/use-key-press/use-key-press.js";
+import { useModalFocusTrap as z } from "./hooks/use-modal-focus-trap/use-modal-focus-trap.js";
+import { useRemainingTimer as B } from "./hooks/use-remaining-timer/use-remaining-timer.js";
+import { useResetFormInput as V } from "./hooks/use-reset-form-input/use-reset-form-input.js";
+import { useTheme as H } from "./hooks/use-theme/use-theme.js";
+import { useTooltipPosition as U } from "./hooks/use-tooltip-position/use-tooltip-position.js";
+import { useWindowDimensions as W } from "./hooks/use-window-dimensions/use-window-dimensions.js";
+import G from "./components/atoms/tooltip/Tooltip2.js";
+import K from "./components/molecules/accordion/Accordion2.js";
+import q from "./components/molecules/alert/Alert2.js";
+import J from "./components/molecules/breadcrumbs/Breadcrumbs2.js";
+import Y from "./components/molecules/checkbox/Checkbox2.js";
+import X from "./components/molecules/multi-select/MultiSelect.js";
+import Z from "./components/molecules/numeric-input/NumericInput2.js";
+import Q from "./components/molecules/search/Search2.js";
+import $ from "./components/molecules/select/Select2.js";
+import ee from "./components/molecules/switch/Switch2.js";
+import te from "./components/molecules/text-input/TextInput2.js";
+import ne from "./components/organisms/dialog/Dialog2.js";
+import re from "./components/organisms/form/Form2.js";
+import ie from "./components/organisms/gallery/Gallery2.js";
+import ae from "./components/organisms/grid/Grid2.js";
+import oe from "./components/organisms/menu/Menu2.js";
+import se from "./components/organisms/preview-card/PreviewCard2.js";
+import ce from "./components/organisms/tabs/Tabs2.js";
+export { K as Accordion, q as Alert, r as AlertMode, f as Avatar, J as Breadcrumbs, p as Button, i as ButtonView, A as CL_DARK_THEME_CLASS, j as CL_LIGHT_THEME_CLASS, Y as Checkbox, ne as Dialog, m as EditableText, a as ElementSize, h as ErrorMessage, re as Form, k as FormContext, ie as Gallery, ae as Grid, g as Header, _ as Icon, o as IconName, v as Image, y as Input, b as Label, x as Link, s as LinkTarget, c as LoaderView, oe as Menu, X as MultiSelect, Z as NumericInput, l as OrientationMode, S as Portal, se as PreviewCard, Q as Search, $ as Select, u as SemanticColor, ee as Switch, ce as Tabs, C as Tag, te as TextInput, M as ThemeContext, N as ThemeProvider, G as Tooltip, d as TooltipContainer, w as useAutoClose, T as useClickOutside, E as useContainerDimensions, D as useDebounce, O as useElementIds, P as useFormPending, F as useIsHovered, I as useIsMounted, L as useIsOverflow, R as useKeyPress, z as useModalFocusTrap, B as useRemainingTimer, V as useResetFormInput, H as useTheme, U as useTooltipPosition, W as useWindowDimensions, e as withErrorBoundary, t as withFigureCaption, n as withTooltip };

package/dist/types/form.d.ts

@@ -9,10 +9,13 @@ export interface FormInputParams {
     value: unknown;
     valid?: boolean;
 }
-export interface FormProps extends PropsWithChildren, ChopLogicComponentProps {
+export interface FormProps<TActionState = void> extends PropsWithChildren, ChopLogicComponentProps {
     initialValues?: FormValues;
     hasReset?: boolean;
-    onClickSubmit?: (data: FormValues) => void;
+    resetOnSuccess?: boolean;
+    action?: (prevState: TActionState, formData: FormData) => TActionState | Promise<TActionState>;
+    actionInitialState?: TActionState;
+    onActionComplete?: (state: TActionState) => void;
+    onSubmit?: (data: FormValues) => void | Promise<void>;
     onReset?: FormEventHandler<HTMLFormElement>;
-    onSubmit?: FormEventHandler<HTMLFormElement>;
 }

package/package.json

@@ -4,7 +4,7 @@
     "type": "git",
     "url": "git+https://github.com/ChopLogic/chop-logic-components.git"
   },
-  "version": "4.3.0",
+  "version": "4.4.0",
   "description": "Reusable React components and hooks for the Chop Logic project",
   "type": "module",
   "module": "dist/index.es.js",
@@ -72,6 +72,7 @@
     "prepublishOnly": "npm run build",
     "build": "vite build && node scripts/generate-exports.js",
     "build:storybook": "storybook build",
+    "upgrade:storybook": "npx storybook@latest upgrade",
     "prepare": "npm run build && husky",
     "format": "npm run format:biome && npm run format:prettier",
     "format:biome": "biome format --write",
@@ -107,8 +108,7 @@
     "chop-logic",
     "react",
     "typescript",
-    "storybook",
-    "styled-components"
+    "storybook"
   ],
   "author": "Dmitrii Suroviagin",
   "license": "MIT",
@@ -117,34 +117,34 @@
   },
   "homepage": "https://choplogic.github.io/chop-logic-components",
   "devDependencies": {
-    "@biomejs/biome": "^2.5.1",
-    "@commitlint/cli": "^21.1.0",
-    "@commitlint/config-conventional": "^21.1.0",
-    "@storybook/addon-a11y": "^10.4.6",
-    "@storybook/addon-docs": "^10.4.6",
-    "@storybook/react-vite": "^10.4.6",
+    "@biomejs/biome": "^2.5.4",
+    "@commitlint/cli": "^21.2.1",
+    "@commitlint/config-conventional": "^21.2.0",
+    "@storybook/addon-a11y": "^10.5.2",
+    "@storybook/addon-docs": "^10.5.2",
+    "@storybook/react-vite": "^10.5.2",
     "@storybook/test-runner": "^0.24.4",
     "@stryker-mutator/core": "^9.6.1",
     "@stryker-mutator/vitest-runner": "^9.6.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
-    "@types/node": "^26.0.1",
+    "@types/node": "^26.1.1",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
-    "@vitest/coverage-v8": "^4.1.9",
+    "@vitest/coverage-v8": "^4.1.10",
     "http-server": "^14.1.1",
     "husky": "^9.1.7",
-    "husky-init": "^8.0.0",
     "jsdom": "^29.1.1",
-    "prettier": "^3.8.5",
+    "prettier": "^3.9.5",
     "remark-gfm": "^4.0.1",
     "start-server-and-test": "^3.0.11",
-    "storybook": "^10.4.6",
+    "storybook": "^10.5.2",
     "typescript": "^6.0.3",
-    "vite": "^8.1.0",
+    "vite": "^8.1.5",
     "vite-plugin-dts": "^5.0.3",
     "vite-plugin-lib-inject-css": "^2.2.2",
-    "vitest": "^4.1.9"
+    "vitest": "^4.1.10",
+    "@storybook/addon-mcp": "^0.7.0"
   },
   "overrides": {
     "storybook": "$storybook"