chop-logic-components 4.0.1 → 4.1.0

package/dist/components/molecules/numeric-input/NumericInputStateful.js

@@ -1,108 +1,73 @@
-import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import { getClassName as R } from "../../../utils/get-class-name.js";
-import c from "../../atoms/button/Button.js";
-import { useNumericInputController as z } from "./NumericInput.controller.js";
-import './NumericInput.css';/* empty css                 */
-import { useElementIds as A } from "../../../hooks/use-element-ids/use-element-ids.js";
-import F from "../../atoms/label/Label.js";
-import G from "../../atoms/input/Input.js";
-import { IconName as u } from "../../../enums/icon-name.js";
-import { ButtonView as p } from "../../../enums/button-view.js";
-import H from "../../atoms/error-message/ErrorMessage.js";
-const q = ({
-  name: m,
-  label: r,
-  errorMessage: f,
-  onChange: h,
-  onBlur: v,
-  onFocus: I,
-  onIncrement: d,
-  onDecrement: g,
-  validator: C,
-  min: N,
-  max: x,
-  id: w,
-  tabIndex: V,
-  disabled: n = !1,
-  required: o = !1,
-  readOnly: j = !1,
-  hasSpinButtons: k = !0,
-  defaultValue: B = 0,
-  step: i = 1,
-  className: D,
-  style: E
-}) => {
-  const { elementId: a, errorId: l } = A(w), { value: L, valid: s, handleChange: S, handleDecrement: _, handleIncrement: $, minValue: b, maxValue: y } = z({
-    name: m,
-    defaultValue: B,
-    min: N,
-    max: x,
-    onChange: h,
-    required: o,
-    validator: C,
-    step: i,
-    onDecrement: g,
-    onIncrement: d
-  }), M = R(["cl-numeric-input", D]);
-  return /* @__PURE__ */ t("div", { style: E, className: M, children: [
-    /* @__PURE__ */ e(F, { label: r, required: o, inputId: a }),
-    /* @__PURE__ */ t(
-      G,
-      {
-        id: a,
-        name: m,
-        type: "number",
-        disabled: n,
-        required: o,
-        readOnly: j,
-        placeholder: "0",
-        "aria-invalid": !s,
-        "aria-errormessage": l,
-        value: L.toString(),
-        onChange: S,
-        min: b,
-        max: y,
-        step: i,
-        onBlur: v,
-        onFocus: I,
-        tabIndex: V,
-        children: [
-          k && /* @__PURE__ */ t("span", { children: [
-            /* @__PURE__ */ e(
-              c,
-              {
-                onClick: _,
-                view: p.Inner,
-                label: `Decrement value for ${r}`,
-                icon: u.ChevronLeft,
-                disabled: n
-              }
-            ),
-            /* @__PURE__ */ e(
-              c,
-              {
-                onClick: $,
-                view: p.Inner,
-                label: `Increment value for ${r}`,
-                icon: u.ChevronRight,
-                disabled: n
-              }
-            )
-          ] }),
-          /* @__PURE__ */ e(
-            H,
-            {
-              errorId: l,
-              message: f,
-              visible: !s,
-              className: "cl-numeric-input__error-message"
-            }
-          )
-        ]
-      }
-    )
-  ] });
-};
-export {
-  q as default
+import { getClassName as e } from "../../../utils/get-class-name.js";
+import { ButtonView as t } from "../../../enums/button-view.js";
+import { IconName as n } from "../../../enums/icon-name.js";
+import r from "../../atoms/button/Button2.js";
+import i from "../../atoms/error-message/ErrorMessage2.js";
+import a from "../../atoms/input/Input2.js";
+import o from "../../atoms/label/Label2.js";
+import { useElementIds as s } from "../../../hooks/use-element-ids/use-element-ids.js";
+import { useNumericInputController as c } from "./NumericInput.controller.js";
+import './NumericInput.css';/* empty css             */
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/molecules/numeric-input/NumericInputStateful.tsx
+var d = ({ name: d, label: f, errorMessage: p, onChange: m, onBlur: h, onFocus: g, onIncrement: _, onDecrement: v, validator: y, min: b, max: x, id: S, tabIndex: C, disabled: w = !1, required: T = !1, readOnly: E = !1, hasSpinButtons: D = !0, defaultValue: O = 0, step: k = 1, className: A, style: j }) => {
+	let { elementId: M, errorId: N } = s(S), { value: P, valid: F, handleChange: I, handleDecrement: L, handleIncrement: R, minValue: z, maxValue: B } = c({
+		name: d,
+		defaultValue: O,
+		min: b,
+		max: x,
+		onChange: m,
+		required: T,
+		validator: y,
+		step: k,
+		onDecrement: v,
+		onIncrement: _
+	});
+	return /* @__PURE__ */ u("div", {
+		style: j,
+		className: e(["cl-numeric-input", A]),
+		children: [/* @__PURE__ */ l(o, {
+			label: f,
+			required: T,
+			inputId: M
+		}), /* @__PURE__ */ u(a, {
+			id: M,
+			name: d,
+			type: "number",
+			disabled: w,
+			required: T,
+			readOnly: E,
+			placeholder: "0",
+			"aria-invalid": !F,
+			"aria-errormessage": N,
+			value: P.toString(),
+			onChange: I,
+			min: z,
+			max: B,
+			step: k,
+			onBlur: h,
+			onFocus: g,
+			tabIndex: C,
+			children: [D && /* @__PURE__ */ u("span", { children: [/* @__PURE__ */ l(r, {
+				onClick: L,
+				view: t.Inner,
+				label: `Decrement value for ${f}`,
+				icon: n.ChevronLeft,
+				disabled: w
+			}), /* @__PURE__ */ l(r, {
+				onClick: R,
+				view: t.Inner,
+				label: `Increment value for ${f}`,
+				icon: n.ChevronRight,
+				disabled: w
+			})] }), /* @__PURE__ */ l(i, {
+				errorId: N,
+				message: p,
+				visible: !F,
+				className: "cl-numeric-input__error-message"
+			})]
+		})]
+	});
 };
+//#endregion
+export { d as default };

package/dist/components/molecules/numeric-input/NumericInputStateless.js

@@ -1,96 +1,61 @@
-import { jsxs as i, jsx as r } from "react/jsx-runtime";
-import { getClassName as _ } from "../../../utils/get-class-name.js";
-import c from "../../atoms/button/Button.js";
-import './NumericInput.css';/* empty css                 */
-import b from "../../atoms/label/Label.js";
-import y from "../../atoms/input/Input.js";
-import { IconName as l } from "../../../enums/icon-name.js";
-import { ButtonView as p } from "../../../enums/button-view.js";
-import D from "../../atoms/error-message/ErrorMessage.js";
-const K = ({
-  name: e,
-  label: t,
-  errorMessage: o,
-  onChange: u,
-  onBlur: f,
-  onFocus: v,
-  onIncrement: I,
-  onDecrement: h,
-  min: d,
-  max: C,
-  id: g,
-  tabIndex: N,
-  disabled: n = !1,
-  required: m = !1,
-  readOnly: $ = !1,
-  hasSpinButtons: w = !0,
-  step: x = 1,
-  className: j,
-  value: k,
-  defaultValue: B,
-  style: L
-}) => {
-  const s = g ?? `numeric-input-${e}`, a = `${e}-error`, S = _(["cl-numeric-input", j]);
-  return /* @__PURE__ */ i("div", { style: L, className: S, children: [
-    /* @__PURE__ */ r(b, { label: t, required: m, inputId: s }),
-    /* @__PURE__ */ i(
-      y,
-      {
-        id: s,
-        name: e,
-        type: "number",
-        defaultValue: B,
-        disabled: n,
-        required: m,
-        readOnly: $,
-        placeholder: "0",
-        "aria-invalid": !!o,
-        "aria-errormessage": a,
-        value: k?.toString() ?? "",
-        onChange: u,
-        min: d,
-        max: C,
-        step: x,
-        onBlur: f,
-        onFocus: v,
-        tabIndex: N,
-        children: [
-          w && /* @__PURE__ */ i("span", { children: [
-            /* @__PURE__ */ r(
-              c,
-              {
-                onClick: h,
-                view: p.Inner,
-                label: `Decrement value for ${t}`,
-                icon: l.ChevronLeft,
-                disabled: n
-              }
-            ),
-            /* @__PURE__ */ r(
-              c,
-              {
-                onClick: I,
-                view: p.Inner,
-                label: `Increment value for ${t}`,
-                icon: l.ChevronRight,
-                disabled: n
-              }
-            )
-          ] }),
-          /* @__PURE__ */ r(
-            D,
-            {
-              errorId: a,
-              message: o,
-              visible: !!o,
-              className: "cl-numeric-input__error-message"
-            }
-          )
-        ]
-      }
-    )
-  ] });
-};
-export {
-  K as default
+import { getClassName as e } from "../../../utils/get-class-name.js";
+import { ButtonView as t } from "../../../enums/button-view.js";
+import { IconName as n } from "../../../enums/icon-name.js";
+import r from "../../atoms/button/Button2.js";
+import i from "../../atoms/error-message/ErrorMessage2.js";
+import a from "../../atoms/input/Input2.js";
+import o from "../../atoms/label/Label2.js";
+import './NumericInput.css';/* empty css             */
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/molecules/numeric-input/NumericInputStateless.tsx
+var l = ({ name: l, label: u, errorMessage: d, onChange: f, onBlur: p, onFocus: m, onIncrement: h, onDecrement: g, min: _, max: v, id: y, tabIndex: b, disabled: x = !1, required: S = !1, readOnly: C = !1, hasSpinButtons: w = !0, step: T = 1, className: E, value: D, defaultValue: O, style: k }) => {
+	let A = y ?? `numeric-input-${l}`, j = `${l}-error`;
+	return /* @__PURE__ */ c("div", {
+		style: k,
+		className: e(["cl-numeric-input", E]),
+		children: [/* @__PURE__ */ s(o, {
+			label: u,
+			required: S,
+			inputId: A
+		}), /* @__PURE__ */ c(a, {
+			id: A,
+			name: l,
+			type: "number",
+			defaultValue: O,
+			disabled: x,
+			required: S,
+			readOnly: C,
+			placeholder: "0",
+			"aria-invalid": !!d,
+			"aria-errormessage": j,
+			value: D?.toString() ?? "",
+			onChange: f,
+			min: _,
+			max: v,
+			step: T,
+			onBlur: p,
+			onFocus: m,
+			tabIndex: b,
+			children: [w && /* @__PURE__ */ c("span", { children: [/* @__PURE__ */ s(r, {
+				onClick: g,
+				view: t.Inner,
+				label: `Decrement value for ${u}`,
+				icon: n.ChevronLeft,
+				disabled: x
+			}), /* @__PURE__ */ s(r, {
+				onClick: h,
+				view: t.Inner,
+				label: `Increment value for ${u}`,
+				icon: n.ChevronRight,
+				disabled: x
+			})] }), /* @__PURE__ */ s(i, {
+				errorId: j,
+				message: d,
+				visible: !!d,
+				className: "cl-numeric-input__error-message"
+			})]
+		})]
+	});
 };
+//#endregion
+export { l as default };

package/dist/components/molecules/search/Search.controller.js

@@ -1,42 +1,32 @@
-import { useState as y, useRef as s, useEffect as E, useCallback as r } from "react";
-import { useDebounce as B } from "../../../hooks/use-debounce/use-debounce.js";
-function x({
-  onSearch: o,
-  onClear: i,
-  maxLength: S = 50,
-  minLength: b = 1,
-  searchMode: c = "automatic",
-  debounceDelay: d = 500
-}) {
-  const [e, h] = y(""), f = c === "manual", g = !f, p = e.length > 0, a = e.length >= b && e.trim().length > 0 && e.length <= S, u = B(e, d), n = s(o), V = s(c), m = s(a);
-  n.current = o, V.current = c, m.current = a, E(() => {
-    u.trim().length > 0 && V.current === "automatic" && m.current && n.current?.(u);
-  }, [u]);
-  const C = r((t) => {
-    const R = t.target.value;
-    h(R);
-  }, []), l = r(() => {
-    h(""), i?.();
-  }, [i]), k = r(() => {
-    n.current?.(e);
-  }, [e]), D = r(
-    (t) => {
-      t.key === "Enter" ? (t.preventDefault(), n.current && n.current(e)) : t.key === "Escape" && (t.preventDefault(), l());
-    },
-    [l, e]
-  );
-  return {
-    searchValue: e,
-    isSearchButtonVisible: f,
-    isLabelIconVisible: g,
-    isClearButtonVisible: p,
-    isSearchValueValid: a,
-    handleChange: C,
-    handleClear: l,
-    handleSearchClick: k,
-    handleKeyDown: D
-  };
+import { useDebounce as e } from "../../../hooks/use-debounce/use-debounce.js";
+import { useCallback as t, useEffect as n, useRef as r, useState as i } from "react";
+//#region src/components/molecules/search/Search.controller.ts
+function a({ onSearch: a, onClear: o, maxLength: s = 50, minLength: c = 1, searchMode: l = "automatic", debounceDelay: u = 500 }) {
+	let [d, f] = i(""), p = l === "manual", m = !p, h = d.length > 0, g = d.length >= c && d.trim().length > 0 && d.length <= s, _ = e(d, u), v = r(a), y = r(l), b = r(g);
+	v.current = a, y.current = l, b.current = g, n(() => {
+		_.trim().length > 0 && y.current === "automatic" && b.current && v.current?.(_);
+	}, [_]);
+	let x = t((e) => {
+		let t = e.target.value;
+		f(t);
+	}, []), S = t(() => {
+		f(""), o?.();
+	}, [o]);
+	return {
+		searchValue: d,
+		isSearchButtonVisible: p,
+		isLabelIconVisible: m,
+		isClearButtonVisible: h,
+		isSearchValueValid: g,
+		handleChange: x,
+		handleClear: S,
+		handleSearchClick: t(() => {
+			v.current?.(d);
+		}, [d]),
+		handleKeyDown: t((e) => {
+			e.key === "Enter" ? (e.preventDefault(), v.current && v.current(d)) : e.key === "Escape" && (e.preventDefault(), S());
+		}, [S, d])
+	};
 }
-export {
-  x as useSearchController
-};
+//#endregion
+export { a as useSearchController };

package/dist/components/molecules/search/Search.css

@@ -1 +1 @@
-.cl-search{display:flex;flex-direction:column;gap:var(--cl-m-gap);width:100%}.cl-search input[type=search]::-webkit-search-decoration,.cl-search input[type=search]::-webkit-search-cancel-button,.cl-search input[type=search]::-webkit-search-results-button,.cl-search input[type=search]::-webkit-search-results-decoration{display:none;-webkit-appearance:none}.cl-search input[type=search]::-ms-clear,.cl-search input[type=search]::-ms-reveal{display:none;width:0;height:0}.cl-search input:placeholder-shown+span{display:inline-block}
+.cl-search{gap:var(--cl-m-gap);flex-direction:column;width:100%;display:flex}.cl-search input[type=search]::-webkit-search-decoration{-webkit-appearance:none;display:none}.cl-search input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;display:none}.cl-search input[type=search]::-webkit-search-results-button{-webkit-appearance:none;display:none}.cl-search input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none;display:none}.cl-search input[type=search]::-ms-clear{width:0;height:0;display:none}.cl-search input[type=search]::-ms-reveal{width:0;height:0;display:none}.cl-search input:placeholder-shown+span{display:inline-block}

package/dist/components/molecules/search/Search2.js

@@ -0,0 +1,67 @@
+import { getClassName as e } from "../../../utils/get-class-name.js";
+import { ButtonView as t } from "../../../enums/button-view.js";
+import { IconName as n } from "../../../enums/icon-name.js";
+import r from "../../atoms/button/Button2.js";
+import i from "../../atoms/input/Input2.js";
+import a from "../../atoms/label/Label2.js";
+import { useElementIds as o } from "../../../hooks/use-element-ids/use-element-ids.js";
+import './Search.css';/* empty css       */
+import { useSearchController as s } from "./Search.controller.js";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { useRef as u } from "react";
+//#region src/components/molecules/search/Search.tsx
+var d = ({ label: d, onSearch: f, onBlur: p, onFocus: m, onClear: h, id: g, tabIndex: _, className: v, maxLength: y = 50, minLength: b = 1, searchMode: x = "automatic", name: S = "q", placeholder: C = "Type to search...", disabled: w = !1, clearable: T = !0, spellCheck: E = !1, autoComplete: D = "off", debounceDelay: O = 500, required: k, ...A }) => {
+	let { elementId: j } = o(g), M = u(null), N = e(["cl-search", v]), { searchValue: P, isSearchButtonVisible: F, isLabelIconVisible: I, isClearButtonVisible: L, isSearchValueValid: R, handleChange: z, handleClear: B, handleSearchClick: V, handleKeyDown: H } = s({
+		onSearch: f,
+		onClear: h,
+		maxLength: y,
+		minLength: b,
+		searchMode: x,
+		debounceDelay: O
+	}), U = () => {
+		B(), M.current && M.current.focus();
+	};
+	return /* @__PURE__ */ l("div", {
+		...A,
+		className: N,
+		children: [/* @__PURE__ */ c(a, {
+			label: d,
+			required: !!k,
+			inputId: j,
+			icon: I ? n.Search : void 0,
+			iconPosition: I ? "left" : void 0
+		}), /* @__PURE__ */ c(i, {
+			ref: M,
+			id: j,
+			name: S,
+			type: "search",
+			value: P,
+			onChange: z,
+			onKeyDown: H,
+			onBlur: p,
+			onFocus: m,
+			disabled: w,
+			placeholder: C,
+			autoComplete: D,
+			maxLength: y,
+			minLength: b,
+			spellCheck: E,
+			tabIndex: _,
+			required: k,
+			children: /* @__PURE__ */ l("span", { children: [T && L && /* @__PURE__ */ c(r, {
+				view: t.Inner,
+				onClick: U,
+				label: `Clear search input for ${d}`,
+				icon: n.Delete
+			}), F && /* @__PURE__ */ c(r, {
+				view: t.Inner,
+				onClick: V,
+				label: "Perform search",
+				icon: n.Search,
+				disabled: w || !R
+			})] })
+		})]
+	});
+};
+//#endregion
+export { d as default };

package/dist/components/molecules/select/Select.controller.js

@@ -1,32 +1,36 @@
-import { useContext as I, useState as d, useRef as f, useCallback as x } from "react";
-import { getSelectInitialValue as b } from "./Select.helpers.js";
-import { FormContext as k } from "../../contexts/form/FormContext.js";
-import { useResetFormInput as w } from "../../../hooks/use-reset-form-input/use-reset-form-input.js";
-function y({
-  name: e,
-  defaultValue: m,
-  onChange: c,
-  options: u
-}) {
-  const { onChangeFormInput: t, initialValues: p } = I(k), n = b({ name: e, options: u, defaultValue: m, initialValues: p }), [a, o] = d(!1), [C, l] = d(n), i = f(t), r = f(n);
-  i.current = t, r.current = n;
-  const h = () => o(!1), R = () => o(!a), S = (v) => {
-    const s = u.find((F) => F.id === v);
-    l(s), c?.(s), t?.({ name: e, value: s?.id });
-  }, V = () => {
-    l(void 0), c?.(void 0);
-  }, g = x(() => {
-    o(!1), l(r.current), i.current?.({ name: e, value: r.current?.id });
-  }, [e]);
-  return w(g), {
-    selected: C,
-    opened: a,
-    handleClear: V,
-    handleClose: h,
-    handleToggle: R,
-    handleSelect: S
-  };
+import { FormContext as e } from "../../contexts/form/FormContext.js";
+import { useResetFormInput as t } from "../../../hooks/use-reset-form-input/use-reset-form-input.js";
+import { getSelectInitialValue as n } from "./Select.helpers.js";
+import { useCallback as r, useContext as i, useRef as a, useState as o } from "react";
+//#region src/components/molecules/select/Select.controller.ts
+function s({ name: s, defaultValue: c, onChange: l, options: u }) {
+	let { onChangeFormInput: d, initialValues: f } = i(e), p = n({
+		name: s,
+		options: u,
+		defaultValue: c,
+		initialValues: f
+	}), [m, h] = o(!1), [g, _] = o(p), v = a(d), y = a(p);
+	return v.current = d, y.current = p, t(r(() => {
+		h(!1), _(y.current), v.current?.({
+			name: s,
+			value: y.current?.id
+		});
+	}, [s])), {
+		selected: g,
+		opened: m,
+		handleClear: () => {
+			_(void 0), l?.(void 0);
+		},
+		handleClose: () => h(!1),
+		handleToggle: () => h(!m),
+		handleSelect: (e) => {
+			let t = u.find((t) => t.id === e);
+			_(t), l?.(t), d?.({
+				name: s,
+				value: t?.id
+			});
+		}
+	};
 }
-export {
-  y as useSelectController
-};
+//#endregion
+export { s as useSelectController };

package/dist/components/molecules/select/Select.css

@@ -1 +1 @@
-.cl-select{position:relative;display:flex;justify-content:space-between;flex-direction:column;gap:var(--cl-m-gap);background:transparent}
+.cl-select{justify-content:space-between;gap:var(--cl-m-gap);background:0 0;flex-direction:column;display:flex;position:relative}

package/dist/components/molecules/select/Select.helpers.js

@@ -1,16 +1,11 @@
-function d({
-  name: o,
-  options: n,
-  initialValues: t,
-  defaultValue: r
-}) {
-  let f;
-  if (t && Object.hasOwn(t, o)) {
-    const c = t[o];
-    f = c?.id ?? c;
-  }
-  return !t?.[o] && r && typeof r == "string" && (f = r), n.find((c) => c.id === f);
+//#region src/components/molecules/select/Select.helpers.ts
+function e({ name: e, options: t, initialValues: n, defaultValue: r }) {
+	let i;
+	if (n && Object.hasOwn(n, e)) {
+		let t = n[e];
+		i = t?.id ?? t;
+	}
+	return !n?.[e] && r && typeof r == "string" && (i = r), t.find((e) => e.id === i);
 }
-export {
-  d as getSelectInitialValue
-};
+//#endregion
+export { e as getSelectInitialValue };

package/dist/components/molecules/select/Select2.js

@@ -0,0 +1,62 @@
+import { getClassName as e } from "../../../utils/get-class-name.js";
+import t from "../../atoms/label/Label2.js";
+import { useClickOutside as n } from "../../../hooks/use-click-outside/use-click-outside.js";
+import { useElementIds as r } from "../../../hooks/use-element-ids/use-element-ids.js";
+import { useKeyPress as i } from "../../../hooks/use-key-press/use-key-press.js";
+import './Select.css';/* empty css       */
+import { SelectCombobox as a } from "./combobox/Combobox2.js";
+import { SelectDropdown as o } from "./dropdown/Dropdown2.js";
+import { useSelectController as s } from "./Select.controller.js";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { useRef as u } from "react";
+//#region src/components/molecules/select/Select.tsx
+var d = ({ options: d, onChange: f, name: p, label: m, defaultValue: h, id: g, placeholder: _ = "Not selected", required: v = !1, disabled: y = !1, className: b, ...x }) => {
+	let S = u(null), { elementId: C, dropdownId: w } = r(g), { handleClear: T, handleClose: E, handleSelect: D, handleToggle: O, selected: k, opened: A } = s({
+		options: d,
+		onChange: f,
+		defaultValue: h,
+		name: p
+	}), j = e(["cl-select", b]);
+	return n({
+		ref: S,
+		onClickOutsideHandler: E
+	}), i({
+		keyCode: "Escape",
+		ref: S,
+		onKeyPress: E
+	}), /* @__PURE__ */ l("div", {
+		ref: S,
+		...x,
+		className: j,
+		children: [
+			/* @__PURE__ */ c(t, {
+				label: m,
+				required: v,
+				inputId: C
+			}),
+			/* @__PURE__ */ c(a, {
+				name: p,
+				opened: A,
+				comboboxId: C,
+				dropdownId: w,
+				onClick: O,
+				selected: k,
+				placeholder: _,
+				disabled: y,
+				required: v
+			}),
+			/* @__PURE__ */ c(o, {
+				options: d,
+				selected: k,
+				opened: A,
+				onClose: E,
+				dropdownId: w,
+				comboboxId: C,
+				onSelect: D,
+				onClear: T
+			})
+		]
+	});
+};
+//#endregion
+export { d as default };