@plitzi/plitzi-ui 1.6.3 → 1.6.4

package/dist/components/ContainerFloating/ContainerFloating.d.ts

@@ -17,7 +17,7 @@ export type ContainerFloatingProps = {
 } & useThemeSharedProps<typeof ContainerFloatingStyles, typeof variantKeys>;
 declare const ContainerFloating: {
     ({ ref, children, containerTopOffset, containerLeftOffset, open: openProp, disabled, loading, closeOnClick, testId, placement, container, onOpenChange }: ContainerFloatingProps): import("react/jsx-runtime").JSX.Element;
-    Trigger: ({ children, className, testId, ref, onClick }: ContainerFloatingTriggerProps) => import("react/jsx-runtime").JSX.Element;
-    Content: ({ ref, children, className, placement, testId, ...props }: ContainerFloatingContentProps) => import("react/jsx-runtime").JSX.Element;
+    Trigger: ({ children, className, testId, ref, placement, disabled, onClick }: ContainerFloatingTriggerProps) => import("react/jsx-runtime").JSX.Element;
+    Content: ({ ref, children, className, placement, testId, disabled, ...props }: ContainerFloatingContentProps) => import("react/jsx-runtime").JSX.Element;
 };
 export default ContainerFloating;

package/dist/components/ContainerFloating/ContainerFloating.js

@@ -23,6 +23,8 @@ var m = ({ ref: m, children: h, containerTopOffset: g = 0, containerLeftOffset:
 					e.trigger = o(t, {
 						testId: S ? `${S}-trigger` : void 0,
 						onClick: k,
+						disabled: y || b,
+						placement: C,
 						...n,
 						ref: A
 					});
@@ -30,6 +32,8 @@ var m = ({ ref: m, children: h, containerTopOffset: g = 0, containerLeftOffset:
 					let n = t.props;
 					e.content = o(t, {
 						testId: S ? `${S}-content` : void 0,
+						disabled: y || b,
+						placement: C,
 						...n,
 						onClick: j(n.onClick)
 					});
@@ -38,10 +42,13 @@ var m = ({ ref: m, children: h, containerTopOffset: g = 0, containerLeftOffset:
 		}), e;
 	}, [
 		h,
-		k,
-		j,
 		S,
-		A
+		k,
+		y,
+		b,
+		C,
+		A,
+		j
 	]);
 	return /* @__PURE__ */ p(d, { children: [M, /* @__PURE__ */ f(e, {
 		value: l(() => ({

package/dist/components/ContainerFloating/ContainerFloating.styles.d.ts

@@ -6,7 +6,9 @@ export declare const variantKeys: {
 export declare const STYLES_COMPONENT_NAME = "ContainerFloating";
 declare const _default: {
     root: (props?: ({} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-    trigger: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+    trigger: (props?: ({
+        disabled?: boolean | null | undefined;
+    } & import('class-variance-authority/types').ClassProp) | undefined) => string;
     content: (props?: ({
         intent?: "custom" | "dropdown" | null | undefined;
         disabled?: boolean | null | undefined;

package/dist/components/ContainerFloating/ContainerFloating.styles.js

@@ -5,7 +5,14 @@ var t = {
 		compoundVariants: [],
 		defaultVariants: {}
 	}),
-	trigger: e("cursor-pointer"),
+	trigger: e("", {
+		variants: { disabled: {
+			true: "cursor-not-allowed",
+			false: "cursor-pointer"
+		} },
+		compoundVariants: [],
+		defaultVariants: { disabled: !1 }
+	}),
 	content: e("flex w-full h-full", {
 		variants: {
 			intent: {

package/dist/components/ContainerFloating/ContainerFloatingContent.d.ts

@@ -7,5 +7,5 @@ export type ContainerFloatingContentProps = {
     className?: string;
     testId?: string;
 } & HTMLAttributes<HTMLDivElement> & useThemeSharedProps<typeof ContainerFloatingStyles, typeof variantKeys>;
-declare const ContainerFloatingContent: ({ ref, children, className, placement, testId, ...props }: ContainerFloatingContentProps) => import("react/jsx-runtime").JSX.Element;
+declare const ContainerFloatingContent: ({ ref, children, className, placement, testId, disabled, ...props }: ContainerFloatingContentProps) => import("react/jsx-runtime").JSX.Element;
 export default ContainerFloatingContent;

package/dist/components/ContainerFloating/ContainerFloatingContent.js

@@ -1,12 +1,15 @@
 import e from "../../hooks/useTheme/index.js";
 import { jsx as t } from "react/jsx-runtime";
 //#region src/components/ContainerFloating/ContainerFloatingContent.tsx
-var n = ({ ref: n, children: r, className: i, placement: a, testId: o, ...s }) => (i = e("ContainerFloating", {
+var n = ({ ref: n, children: r, className: i, placement: a, testId: o, disabled: s, ...c }) => (i = e("ContainerFloating", {
 	className: i,
 	componentKey: "content",
-	variants: { placement: a }
+	variants: {
+		placement: a,
+		disabled: s
+	}
 }), /* @__PURE__ */ t("div", {
-	...s,
+	...c,
 	ref: n,
 	className: i,
 	"data-testid": o,

package/dist/components/ContainerFloating/ContainerFloatingTrigger.d.ts

@@ -7,5 +7,5 @@ export type ContainerFloatingTriggerProps = {
     testId?: string;
     onClick?: (e: MouseEvent<HTMLDivElement>) => void;
 } & useThemeSharedProps<typeof ContainerFloatingStyles, typeof variantKeys>;
-declare const ContainerFloatingTrigger: ({ children, className, testId, ref, onClick }: ContainerFloatingTriggerProps) => import("react/jsx-runtime").JSX.Element;
+declare const ContainerFloatingTrigger: ({ children, className, testId, ref, placement, disabled, onClick }: ContainerFloatingTriggerProps) => import("react/jsx-runtime").JSX.Element;
 export default ContainerFloatingTrigger;

package/dist/components/ContainerFloating/ContainerFloatingTrigger.js

@@ -1,13 +1,17 @@
 import e from "../../hooks/useTheme/index.js";
 import { jsx as t } from "react/jsx-runtime";
 //#region src/components/ContainerFloating/ContainerFloatingTrigger.tsx
-var n = ({ children: n, className: r, testId: i, ref: a, onClick: o }) => (r = e("ContainerFloating", {
+var n = ({ children: n, className: r, testId: i, ref: a, placement: o, disabled: s, onClick: c }) => (r = e("ContainerFloating", {
 	className: r,
-	componentKey: "trigger"
+	componentKey: "trigger",
+	variants: {
+		placement: o,
+		disabled: s
+	}
 }), /* @__PURE__ */ t("div", {
 	ref: a,
 	className: r,
-	onClick: o,
+	onClick: c,
 	"data-testid": i,
 	children: n
 }));

package/dist/components/Select2/Select2.d.ts

@@ -29,6 +29,7 @@ type Select2PropsBase = {
     autoClose?: boolean;
     clearable?: boolean;
     open?: boolean;
+    loading?: boolean;
     allowRemoveOptions?: boolean;
     searchAutoFocus?: boolean;
 };

package/dist/components/Select2/Select2.js

@@ -1,19 +1,19 @@
 import e from "../../hooks/useTheme/index.js";
 import t from "../Flex/index.js";
 import n from "../Icon/index.js";
-import ee from "../Input/InputContainer.js";
-import r from "../ContainerFloating/index.js";
-import { isOptionGroup as i } from "./helpers/utils.js";
-import a from "./ListItem.js";
-import o from "./SelectInput.js";
-import te from "./SelectList.js";
-import { memo as s, useCallback as c, useEffect as l, useImperativeHandle as u, useMemo as d, useRef as f, useState as p } from "react";
-import { jsx as m, jsxs as h } from "react/jsx-runtime";
-import ne from "clsx";
+import r from "../Input/InputContainer.js";
+import i from "../ContainerFloating/index.js";
+import { isOptionGroup as a } from "./helpers/utils.js";
+import o from "./ListItem.js";
+import s from "./SelectInput.js";
+import ee from "./SelectList.js";
+import { memo as c, useCallback as l, useEffect as u, useImperativeHandle as d, useMemo as f, useRef as p, useState as m } from "react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import _ from "clsx";
 //#region src/components/Select2/Select2.tsx
-var g = [], _ = s((s) => {
-	let { ref: _, className: v = "", id: y, name: b, value: x, options: S = g, placeholder: C = "Select...", label: w = "", size: T, disabled: E = !1, error: D = !1, allowCreateOptions: O = !1, isSearchable: k = !0, clearable: A = !0, allowRemoveOptions: j = !1, open: M, searchAutoFocus: N = !0, autoClose: P = !0, onChange: F } = s, [I, L] = p(M), R = e("Select2", {
-		className: v,
+var v = [], y = c((c) => {
+	let { ref: y, className: b = "", id: te, name: ne, value: x, options: S = v, placeholder: C = "Select...", label: w = "", size: T, disabled: E = !1, error: D = !1, allowCreateOptions: O = !1, isSearchable: k = !0, clearable: A = !0, allowRemoveOptions: j = !1, open: M, searchAutoFocus: re = !0, autoClose: N = !0, loading: ie = !1, onChange: P } = c, [F, ae] = m(M), [I, L] = m(S instanceof Promise), R = I || ie, z = e("Select2", {
+		className: b,
 		componentKey: [
 			"root",
 			"listPopup",
@@ -25,12 +25,12 @@ var g = [], _ = s((s) => {
 			"value"
 		],
 		variants: { size: T }
-	}), z = f(null), [B, V] = p(), [H, U] = p(S instanceof Promise), [W, G] = p(() => !H && Array.isArray(S) ? S : []), [K, q] = p([]);
-	u(_, () => z.current, [z]);
-	let J = d(() => {
+	}), B = p(null), [V, H] = m(), [U, W] = m(() => !I && Array.isArray(S) ? S : []), [G, K] = m([]);
+	d(y, () => B.current, [B]);
+	let q = f(() => {
 		if (typeof x == "string") {
-			let e = W.find((e) => i(e) ? e.options.find((e) => e.value === x) : e.value === x);
-			return i(e) ? e.options.find((e) => e.value === x) : !e && x && O ? {
+			let e = U.find((e) => a(e) ? e.options.find((e) => e.value === x) : e.value === x);
+			return a(e) ? e.options.find((e) => e.value === x) : !e && x && O ? {
 				label: x,
 				value: x
 			} : e;
@@ -38,151 +38,151 @@ var g = [], _ = s((s) => {
 		return x;
 	}, [
 		O,
-		W,
+		U,
 		x
-	]), [Y, X] = p(""), re = c((e) => {
-		!I && z.current && z.current.click(), X(e);
+	]), [J, Y] = m(""), oe = l((e) => {
+		!F && B.current && B.current.click(), Y(e);
 	}, [
-		X,
-		I,
-		z
-	]), ie = c((e) => {
-		L(e), e || X("");
-	}, []), Z = c((e) => {
-		E || (s.valueAsString ? s.onChange?.(e?.value) : s.onChange?.(e), X(""), P && z.current && z.current.click());
+		Y,
+		F,
+		B
+	]), se = l((e) => {
+		ae(e), e || Y("");
+	}, []), X = l((e) => {
+		E || (c.valueAsString ? c.onChange?.(e?.value) : c.onChange?.(e), Y(""), N && B.current && B.current.click());
 	}, [
 		E,
-		s.valueAsString,
-		s.onChange,
-		P
-	]), ae = c((e) => {
-		j && (e.value === x && F?.(void 0), s.valueAsString ? s.onRemove?.(e.value) : s.onRemove?.(e));
+		c.valueAsString,
+		c.onChange,
+		N
+	]), ce = l((e) => {
+		j && (e.value === x && P?.(void 0), c.valueAsString ? c.onRemove?.(e.value) : c.onRemove?.(e));
 	}, [
 		j,
-		s.valueAsString,
-		s.onRemove
-	]), Q = c(async () => {
+		c.valueAsString,
+		c.onRemove
+	]), Z = l(async () => {
 		let e = S;
-		e instanceof Promise && (U(!0), e = await e, U(!1)), G(e);
+		e instanceof Promise && (L(!0), W([]), e = await e, L(!1)), W(e);
 	}, [S]);
-	l(() => {
-		Q();
-	}, [S, Q]), l(() => {
-		V(I ? z.current?.getBoundingClientRect() : void 0);
-	}, [I]), l(() => {
-		if (!(!O || !J || i(J))) return J.value && !W.find((e) => "value" in e && e.value === J.value) && q((e) => {
-			if (e.find((e) => "value" in e && e.value === J.value)) return e;
+	u(() => {
+		Z();
+	}, [S, Z]), u(() => {
+		H(F ? B.current?.getBoundingClientRect() : void 0);
+	}, [F]), u(() => {
+		if (!(!O || !q || a(q))) return q.value && !U.find((e) => "value" in e && e.value === q.value) && K((e) => {
+			if (e.find((e) => "value" in e && e.value === q.value)) return e;
 			let t = [...e];
 			return t.push({
-				label: J.label,
-				value: J.value
+				label: q.label,
+				value: q.value
 			}), t;
 		}), () => {
-			J.value && !W.find((e) => "value" in e && e.value === J.value) && q([]);
+			q.value && !U.find((e) => "value" in e && e.value === q.value) && K([]);
 		};
 	}, [
 		O,
-		J,
-		W,
+		q,
+		U,
 		x
 	]);
-	let $ = d(() => {
-		let e = (e) => (e.label ? e.label : "").toLowerCase().indexOf(Y.toLowerCase()) > -1, t = [...K, ...W].map((t) => i(t) ? {
+	let Q = f(() => {
+		let e = (e) => (e.label ? e.label : "").toLowerCase().indexOf(J.toLowerCase()) > -1, t = [...G, ...U].map((t) => a(t) ? {
 			icon: t.icon,
 			label: t.label,
 			options: t.options.filter(e)
 		} : t);
-		return t = t.filter((t) => i(t) ? t.options.length > 0 : e(t)), t;
+		return t = t.filter((t) => a(t) ? t.options.length > 0 : e(t)), t;
 	}, [
-		W,
-		K,
-		Y
-	]), oe = c((e) => {
-		e.stopPropagation(), F?.(void 0);
-	}, [F]), se = d(() => ({ width: B?.width }), [B]);
-	return /* @__PURE__ */ h(r, {
-		ref: z,
+		U,
+		G,
+		J
+	]), le = l((e) => {
+		e.stopPropagation(), P?.(void 0);
+	}, [P]), $ = f(() => ({ width: V?.width }), [V]);
+	return /* @__PURE__ */ g(i, {
+		ref: B,
 		containerTopOffset: D ? -26 : 4,
 		containerLeftOffset: 0,
-		onOpenChange: ie,
+		onOpenChange: se,
 		open: M,
-		loading: H,
+		loading: R,
 		disabled: E,
-		children: [/* @__PURE__ */ m(r.Trigger, {
-			className: R.trigger,
-			children: /* @__PURE__ */ h(ee, {
-				id: y,
+		children: [/* @__PURE__ */ h(i.Trigger, {
+			className: z.trigger,
+			children: /* @__PURE__ */ g(r, {
+				id: te,
 				size: T,
 				clearable: A,
 				disabled: E,
 				label: w,
 				error: D,
-				loading: H,
-				onClear: oe,
-				className: { iconFloatingContainer: R.inputContainer },
+				loading: R,
+				onClear: le,
+				className: { iconFloatingContainer: z.inputContainer },
 				value: x,
-				children: [/* @__PURE__ */ m("input", {
+				children: [/* @__PURE__ */ h("input", {
 					type: "hidden",
-					name: b,
+					name: ne,
 					className: "hidden invisible"
-				}), /* @__PURE__ */ h(t, {
+				}), /* @__PURE__ */ g(t, {
 					justify: "between",
 					items: "center",
 					className: "min-w-0",
 					grow: !0,
 					children: [
-						/* @__PURE__ */ m("div", {
-							className: ne("truncate select-none", {
-								"mr-8": !!D || H,
-								[R.placeholder]: !J?.label,
-								[R.value]: !!J?.label
+						/* @__PURE__ */ h("div", {
+							className: _("truncate select-none", {
+								"mr-8": !!D || R,
+								[z.placeholder]: !q?.label,
+								[z.value]: !!q?.label
 							}),
-							title: J?.label ?? C,
-							children: J?.label ?? C
+							title: q?.label ?? C,
+							children: q?.label ?? C
 						}),
-						!I && /* @__PURE__ */ m(n, { icon: "fa-solid fa-chevron-down" }),
-						I && /* @__PURE__ */ m(n, { icon: "fa-solid fa-chevron-up" })
+						!F && /* @__PURE__ */ h(n, { icon: "fa-solid fa-chevron-down" }),
+						F && /* @__PURE__ */ h(n, { icon: "fa-solid fa-chevron-up" })
 					]
 				})]
 			})
-		}), B && /* @__PURE__ */ h(r.Content, {
-			className: R.listPopup,
-			style: se,
+		}), V && /* @__PURE__ */ g(i.Content, {
+			className: z.listPopup,
+			style: $,
 			children: [
-				!H && /* @__PURE__ */ h("div", {
-					className: R.listPopupInner,
-					children: [k && I && /* @__PURE__ */ m(o, {
+				!R && /* @__PURE__ */ g("div", {
+					className: z.listPopupInner,
+					children: [k && F && /* @__PURE__ */ h(s, {
 						size: T,
-						value: Y,
+						value: J,
 						placeholder: "Search...",
 						disabled: E,
-						autoFocus: N,
+						autoFocus: re,
 						allowCreateOptions: O,
-						onChange: re,
-						onSelect: Z
-					}), $.length > 0 && /* @__PURE__ */ m(te, {
-						value: J?.value,
-						options: $,
+						onChange: oe,
+						onSelect: X
+					}), Q.length > 0 && /* @__PURE__ */ h(ee, {
+						value: q?.value,
+						options: Q,
 						size: T,
 						allowRemoveOptions: j,
-						onChange: Z,
-						onRemove: ae
+						onChange: X,
+						onRemove: ce
 					})]
 				}),
-				!H && O && Y && /* @__PURE__ */ m(a, {
+				!R && O && J && /* @__PURE__ */ h(o, {
 					className: "bg-slate-100 text-blue-500 dark:bg-zinc-700 dark:text-blue-400",
 					prefix: "Create:",
 					size: T,
-					label: Y,
-					value: Y,
-					onChange: Z
+					label: J,
+					value: J,
+					onChange: X
 				}),
-				H && /* @__PURE__ */ m("div", {
-					className: R.listMessage,
+				R && /* @__PURE__ */ h("div", {
+					className: z.listMessage,
 					children: "Loading..."
 				}),
-				!H && $.length === 0 && /* @__PURE__ */ m("div", {
-					className: R.listMessage,
+				!R && Q.length === 0 && /* @__PURE__ */ h("div", {
+					className: z.listMessage,
 					children: "No Options"
 				})
 			]
@@ -190,4 +190,4 @@ var g = [], _ = s((s) => {
 	});
 });
 //#endregion
-export { _ as default };
+export { y as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plitzi/plitzi-ui",
-  "version": "1.6.3",
+  "version": "1.6.4",
   "homepage": "./",
   "license": "Apache-2.0",
   "files": [