@oliasoft-open-source/react-ui-library 5.11.6-beta-2 → 5.11.6

package/dist/index.d.ts

@@ -93,8 +93,6 @@ export declare enum Color {
     MUTED = "muted"
 }
 
-export declare const ColorInput: ({ columns, disabled, options, small, value, onChange, }: IColorInputProps) => JSX_2.Element;
-
 export declare const Column: ({ background, borderLeft, borderRight, children, flex, flexbox, padding, scroll, showScrollbar, spacing, width, widthMobile, widthTablet, testId, }: ILayoutColumnProps) => JSX_2.Element;
 
 export declare const Dialog: ({ dialog }: IDialogProps) => JSX_2.Element;
@@ -332,18 +330,6 @@ export declare interface ICollapseProps {
     expanded: boolean;
 }
 
-export declare interface IColorInputProps {
-    columns?: number;
-    disabled?: boolean;
-    options?: {
-        value: string;
-        label: string;
-    }[];
-    small?: boolean;
-    value?: string;
-    onChange?: (value: string) => void;
-}
-
 /**
  * Icon wrapper component to support different icon formats:
  *     - string names (default recommendation)
@@ -1076,6 +1062,7 @@ export declare interface INumberInputProps {
 
 export declare interface IOptionDropdownProps {
     name?: string;
+    disabled?: boolean;
     label: string;
     options: IOptionType[];
     onChange: TChangeEventHandler;
@@ -1944,7 +1931,7 @@ declare interface NavigationEventArgs {
 
 export declare const NumberInput: ({ name, placeholder, disabled, error, left, small, width, value, onChange, onFocus, onBlur, selectOnFocus, tabIndex, testId, tooltip, warning, validationCallback, allowEmpty, isInTable, groupOrder, enableCosmeticRounding, enableDisplayRounding, roundDisplayValue, disableInternalErrorValidationMessages, disableValidationOnFocus, }: INumberInputProps) => JSX_2.Element;
 
-export declare const OptionDropdown: ({ name, label, options, onChange, small, showHeader, maxHeight, testId, }: IOptionDropdownProps) => ReactElement;
+export declare const OptionDropdown: ({ name, disabled, label, options, onChange, small, showHeader, maxHeight, testId, }: IOptionDropdownProps) => ReactElement;
 
 export declare const Page: ({ children, left, padding: paddingProp, scroll, top, }: ILayoutPageProps) => JSX_2.Element;
 

package/dist/index.js

@@ -1264,118 +1264,6 @@ const Card = ({ bordered: e = !0, heading: t = null, children: n, margin: r = "0
 		children: n
 	})]
 });
-var popover_module_default = {
-	toggleBox: "_toggleBox_rwod1_1",
-	enter: "_enter_rwod1_8",
-	enterActive: "_enterActive_rwod1_12",
-	fullWidthStyleFix: "_fullWidthStyleFix_rwod1_17",
-	dismiss: "_dismiss_rwod1_22"
-};
-const Popover = ({ children: t, content: n, placement: r = "top-center", closeOnOutsideClick: i = !0, fullWidth: a = !1, showCloseButton: o = !1, testId: l, disabled: u = !1, overflowContainer: d = !1, isOpen: f, onToggle: h }) => {
-	let _ = useContext(DisabledContext), v = useRef(null), [y, b] = f === void 0 ? useState(!1) : [f, h], x = () => {
-		!u && !_ && b && b(!1);
-	}, S = () => {
-		u || _ || b && b(!y);
-	};
-	useEffect(() => {
-		(u || _) && x();
-	}, [u, _]);
-	let { renderLayer: C, arrowProps: w, layerProps: T, triggerProps: E } = useLayer({
-		isOpen: y,
-		placement: r,
-		auto: !0,
-		triggerOffset: 6,
-		onOutsideClick: i ? x : void 0,
-		ResizeObserver: ResizeObserver$1,
-		overflowContainer: d
-	});
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
-		ref: E.ref,
-		onClick: S,
-		"data-testid": l,
-		children: t
-	}), /* @__PURE__ */ jsx(CSSTransition, {
-		nodeRef: v,
-		in: y,
-		timeout: 100,
-		classNames: {
-			enter: popover_module_default.enter,
-			enterActive: popover_module_default.enterActive
-		},
-		unmountOnExit: !0,
-		children: /* @__PURE__ */ jsx(Fragment$1, { children: y && C(/* @__PURE__ */ jsxs("div", {
-			className: a ? cx(popover_module_default.toggleBox, popover_module_default.fullWidthStyleFix) : cx(popover_module_default.toggleBox),
-			...T,
-			ref: (e) => {
-				v.current = e, T.ref(e);
-			},
-			children: [/* @__PURE__ */ jsxs("div", { children: [React.isValidElement(n) ? React.cloneElement(n, { close: x }) : n, o && /* @__PURE__ */ jsx("div", {
-				className: popover_module_default.dismiss,
-				children: /* @__PURE__ */ jsx(Button, {
-					small: !0,
-					round: !0,
-					onClick: x,
-					icon: IconType.CLOSE
-				})
-			})] }), /* @__PURE__ */ jsx(Arrow, {
-				...w,
-				backgroundColor: "var(--color-background-layer)",
-				borderColor: "var(--color-border)",
-				borderWidth: 1,
-				size: 6
-			})]
-		})) })
-	})] });
-};
-var color_input_module_default = {
-	colorInput: "_colorInput_14lq1_1",
-	trigger: "_trigger_14lq1_7",
-	buttonColor: "_buttonColor_14lq1_11",
-	options: "_options_14lq1_16",
-	option: "_option_14lq1_16"
-};
-const ColorInput = ({ columns: e = 9, disabled: t, options: n = [], small: r, value: i, onChange: a }) => {
-	let [o, s] = useState(!1), c = n.find((e) => e.value === i)?.label;
-	return /* @__PURE__ */ jsx("div", {
-		className: color_input_module_default.colorInput,
-		children: /* @__PURE__ */ jsx(Popover, {
-			placement: "bottom-start",
-			isOpen: o,
-			onToggle: s,
-			content: /* @__PURE__ */ jsx("div", {
-				className: color_input_module_default.options,
-				style: { gridTemplateColumns: `repeat(${e}, auto)` },
-				children: n.map((e) => /* @__PURE__ */ jsx("div", {
-					className: color_input_module_default.option,
-					children: /* @__PURE__ */ jsx(Button, {
-						basic: !0,
-						disabled: t,
-						width: "var(--size)",
-						tooltip: e.label,
-						label: /* @__PURE__ */ jsx("div", {
-							className: color_input_module_default.buttonColor,
-							style: { backgroundColor: e.value }
-						}),
-						onClick: () => {
-							a?.(e.value), s(!1);
-						}
-					}, e.value)
-				}))
-			}),
-			children: /* @__PURE__ */ jsx(Button, {
-				disabled: t,
-				small: r,
-				active: o,
-				width: r ? "var(--size-sm)" : "var(--size)",
-				tooltip: c,
-				label: /* @__PURE__ */ jsx("div", {
-					className: color_input_module_default.buttonColor,
-					style: { backgroundColor: i }
-				})
-			})
-		})
-	});
-};
 var noScrollbars = css`
   scrollbar-width: none;
   -ms-overflow-style: none;
@@ -2853,7 +2741,7 @@ const useCustomSelectLogic = ({ state: e, dispatch: t, options: n, setTriggerFoc
 		layerFocus: initialLayerFocus(e, C ?? 0),
 		triggerFocus: initialTriggerFocus,
 		isLayerOpen: !1
-	})), { getTriggerWidth: F, onKeyEvent: I, clearAllIsFocused: L, triggerProps: R, onClickTrigger: z, onChangeSearch: B, onClickDeselectOption: V, onClickClearAll: H, renderLayer: U, layerProps: W, closeLayer: G, onSelectOption: K, getLayerWidth: q, triggerBounds: Bd } = useCustomSelectLogic({
+	})), { getTriggerWidth: F, onKeyEvent: I, clearAllIsFocused: L, triggerProps: R, onClickTrigger: z, onChangeSearch: B, onClickDeselectOption: V, onClickClearAll: H, renderLayer: U, layerProps: W, closeLayer: G, onSelectOption: K, getLayerWidth: q, triggerBounds: Rd } = useCustomSelectLogic({
 		...e,
 		state: N,
 		dispatch: P,
@@ -2921,7 +2809,7 @@ const useCustomSelectLogic = ({ state: e, dispatch: t, options: n, setTriggerFoc
 					closeLayer: () => {
 						b && G();
 					},
-					width: q(Bd),
+					width: q(Rd),
 					small: d,
 					focusedOptionIndex: N.layerFocus.current,
 					firstSelectedOptionIndex: C ?? 0,
@@ -3523,7 +3411,70 @@ const Slider = ({ name: e, label: t, width: n = "100%", labelWidth: r = "auto",
 			children: /* @__PURE__ */ jsx(Icon, { icon: n })
 		})
 	});
-}, ActionsCell = ({ cell: e }) => /* @__PURE__ */ jsx(Actions, { actions: e.actions }), CellHelpIcon = ({ cell: e }) => {
+}, ActionsCell = ({ cell: e }) => /* @__PURE__ */ jsx(Actions, { actions: e.actions });
+var popover_module_default = {
+	toggleBox: "_toggleBox_rwod1_1",
+	enter: "_enter_rwod1_8",
+	enterActive: "_enterActive_rwod1_12",
+	fullWidthStyleFix: "_fullWidthStyleFix_rwod1_17",
+	dismiss: "_dismiss_rwod1_22"
+};
+const Popover = ({ children: t, content: n, placement: r = "top-center", closeOnOutsideClick: i = !0, fullWidth: a = !1, showCloseButton: o = !1, testId: l, disabled: u = !1, overflowContainer: d = !1, isOpen: f, onToggle: h }) => {
+	let _ = useContext(DisabledContext), v = useRef(null), [y, b] = f === void 0 ? useState(!1) : [f, h], x = () => {
+		!u && !_ && b && b(!1);
+	}, S = () => {
+		u || _ || b && b(!y);
+	};
+	useEffect(() => {
+		(u || _) && x();
+	}, [u, _]);
+	let { renderLayer: C, arrowProps: w, layerProps: T, triggerProps: E } = useLayer({
+		isOpen: y,
+		placement: r,
+		auto: !0,
+		triggerOffset: 6,
+		onOutsideClick: i ? x : void 0,
+		ResizeObserver: ResizeObserver$1,
+		overflowContainer: d
+	});
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+		ref: E.ref,
+		onClick: S,
+		"data-testid": l,
+		children: t
+	}), /* @__PURE__ */ jsx(CSSTransition, {
+		nodeRef: v,
+		in: y,
+		timeout: 100,
+		classNames: {
+			enter: popover_module_default.enter,
+			enterActive: popover_module_default.enterActive
+		},
+		unmountOnExit: !0,
+		children: /* @__PURE__ */ jsx(Fragment$1, { children: y && C(/* @__PURE__ */ jsxs("div", {
+			className: a ? cx(popover_module_default.toggleBox, popover_module_default.fullWidthStyleFix) : cx(popover_module_default.toggleBox),
+			...T,
+			ref: (e) => {
+				v.current = e, T.ref(e);
+			},
+			children: [/* @__PURE__ */ jsxs("div", { children: [React.isValidElement(n) ? React.cloneElement(n, { close: x }) : n, o && /* @__PURE__ */ jsx("div", {
+				className: popover_module_default.dismiss,
+				children: /* @__PURE__ */ jsx(Button, {
+					small: !0,
+					round: !0,
+					onClick: x,
+					icon: IconType.CLOSE
+				})
+			})] }), /* @__PURE__ */ jsx(Arrow, {
+				...w,
+				backgroundColor: "var(--color-background-layer)",
+				borderColor: "var(--color-border)",
+				borderWidth: 1,
+				size: 6
+			})]
+		})) })
+	})] });
+}, CellHelpIcon = ({ cell: e }) => {
 	let { helpIcon: t } = e;
 	return t ? /* @__PURE__ */ jsx("div", {
 		className: cell_module_default.icon,
@@ -5836,22 +5787,23 @@ const Layer = ({ options: e, onChangeOptions: t, showHeader: n, maxHeight: r, te
 			}, r);
 		}
 	})]
-}), OptionDropdown = ({ name: e, label: t, options: n, onChange: r, small: i = !1, showHeader: a = !0, maxHeight: o = "40vh", testId: s }) => /* @__PURE__ */ jsx(Menu, {
-	testId: s,
+}), OptionDropdown = ({ name: e, disabled: t, label: n, options: r, onChange: i, small: a = !1, showHeader: o = !0, maxHeight: s = "40vh", testId: c }) => /* @__PURE__ */ jsx(Menu, {
+	testId: c,
+	disabled: t,
 	menu: {
-		testId: s ? `${s}-menu-layer` : void 0,
-		small: i,
-		label: t,
+		testId: c ? `${c}-menu-layer` : void 0,
+		small: a,
+		label: n,
 		trigger: TriggerType.DROP_DOWN_BUTTON,
 		possiblePlacements: ["top-start", "bottom-start"],
 		sections: /* @__PURE__ */ jsx(Layer, {
-			testId: s,
-			options: n,
+			testId: c,
+			options: r,
 			onChangeOptions: (t, n) => {
-				t.target.name = e, t.target.value = n, r(t);
+				t.target.name = e, t.target.value = n, i(t);
 			},
-			showHeader: a,
-			maxHeight: o
+			showHeader: o,
+			maxHeight: s
 		})
 	}
 });
@@ -6784,7 +6736,7 @@ const UnitInput = ({ name: e, placeholder: t = "", disabled: n = !1, disabledUni
 	} : {
 		value: G,
 		unit: U
-	}), Bd = k || K?.value === void 0, [J, Vd] = useState(w ? PredefinedOptionsMenuState.PREDEFINED : PredefinedOptionsMenuState.CUSTOM), Hd = !!(O || n), Y = C && C.find((e) => {
+	}), Rd = k || K?.value === void 0, [J, zd] = useState(w ? PredefinedOptionsMenuState.PREDEFINED : PredefinedOptionsMenuState.CUSTOM), Bd = !!(O || n), Y = C && C.find((e) => {
 		if (!e?.value) return;
 		if (E) return E === e.valueKey;
 		let t = isValueWithUnit(e.value) ? getUnit(e.value) : "", { value: n = l } = convertUnit({
@@ -6793,7 +6745,7 @@ const UnitInput = ({ name: e, placeholder: t = "", disabled: n = !1, disabledUni
 			toUnit: t
 		});
 		return withUnit(n, t) === e.value;
-	}), Ud = () => {
+	}), Vd = () => {
 		let e = l ?? "", t = K.unit;
 		if (checkConversion({
 			value: e,
@@ -6807,7 +6759,7 @@ const UnitInput = ({ name: e, placeholder: t = "", disabled: n = !1, disabledUni
 				return null;
 			}
 		} else return getAltUnitsListByQuantity(u)?.map((e) => ["", e?.unit]);
-	}, Wd = (t) => {
+	}, Hd = (t) => {
 		let n = getStringName(e), r = t.target, { value: i, selectionStart: a } = r, o = withUnit(i, K?.unit || ""), s = A ? withUnit(convertAndGetValue(o, B), B) : o;
 		h({ target: {
 			value: s,
@@ -6820,7 +6772,7 @@ const UnitInput = ({ name: e, placeholder: t = "", disabled: n = !1, disabledUni
 		}), R(() => {
 			r.selectionStart = a, r.selectionEnd = a;
 		});
-	}, Gd = (e, t) => {
+	}, Ud = (e, t) => {
 		t === K.unit || isNaN(Number(e)) || (q({
 			value: e,
 			unit: t
@@ -6851,7 +6803,7 @@ const UnitInput = ({ name: e, placeholder: t = "", disabled: n = !1, disabledUni
 			e !== void 0 && q({
 				value: e,
 				unit: t
-			}), Vd(C && Y && T ? PredefinedOptionsMenuState.PREDEFINED : PredefinedOptionsMenuState.CUSTOM);
+			}), zd(C && Y && T ? PredefinedOptionsMenuState.PREDEFINED : PredefinedOptionsMenuState.CUSTOM);
 		}
 	}, [
 		U,
@@ -6859,7 +6811,7 @@ const UnitInput = ({ name: e, placeholder: t = "", disabled: n = !1, disabledUni
 		i,
 		T
 	]);
-	let X = Ud(), Z = label(K.unit) || K.unit || "", Kd = p || !X || X && X.length === 1, Q = getStringName(e), $, qd = (t) => {
+	let X = Vd(), Z = label(K.unit) || K.unit || "", Wd = p || !X || X && X.length === 1, Q = getStringName(e), $, Gd = (t) => {
 		let r = t?.value ? t.value : "", [i = "", a = ""] = isValueWithUnit(r) ? split(r) : [r], o = withPrettyUnitLabel(r);
 		if (checkConversion({
 			value: r,
@@ -6879,7 +6831,7 @@ const UnitInput = ({ name: e, placeholder: t = "", disabled: n = !1, disabledUni
 			type: MenuType.OPTION,
 			inline: !0,
 			onClick: () => {
-				validateNumber(i).valid && !n && (Vd(PredefinedOptionsMenuState.PREDEFINED), h({ target: {
+				validateNumber(i).valid && !n && (zd(PredefinedOptionsMenuState.PREDEFINED), h({ target: {
 					value: r,
 					name: typeof e == "string" ? e : e?.fieldName || "",
 					predefinedSelected: !0,
@@ -6906,10 +6858,10 @@ const UnitInput = ({ name: e, placeholder: t = "", disabled: n = !1, disabledUni
 		label: "Custom",
 		selected: J === PredefinedOptionsMenuState.CUSTOM
 	}], C?.length) {
-		let e = C.map(qd);
+		let e = C.map(Gd);
 		$ = [...$, ...e];
 	}
-	let Jd = (e) => {
+	let Kd = (e) => {
 		if (isValueWithUnit(e)) {
 			let t = getUnit(e), { value: n } = safeConvertValue({
 				value: e,
@@ -6921,7 +6873,7 @@ const UnitInput = ({ name: e, placeholder: t = "", disabled: n = !1, disabledUni
 			return n;
 		}
 		return e;
-	}, Yd = !C && (!F || F === GroupOrder.FIRST) ? GroupOrder.FIRST : GroupOrder.MIDDLE, Xd = !F || F === GroupOrder.LAST ? GroupOrder.LAST : GroupOrder.MIDDLE;
+	}, qd = !C && (!F || F === GroupOrder.FIRST) ? GroupOrder.FIRST : GroupOrder.MIDDLE, Jd = !F || F === GroupOrder.LAST ? GroupOrder.LAST : GroupOrder.MIDDLE;
 	return /* @__PURE__ */ jsx("div", {
 		className: J === PredefinedOptionsMenuState.PREDEFINED ? cx(unit_input_module_default.predefinedMenuActive) : "",
 		children: /* @__PURE__ */ jsxs(InputGroup, {
@@ -6953,31 +6905,31 @@ const UnitInput = ({ name: e, placeholder: t = "", disabled: n = !1, disabledUni
 						name: Q,
 						testId: x,
 						disabled: n,
-						placeholder: Jd(t),
+						placeholder: Kd(t),
 						value: K.value,
-						onChange: Wd,
+						onChange: Hd,
 						onFocus: v,
 						error: i === null ? void 0 : i,
 						warning: S === null ? void 0 : S,
 						left: a,
-						allowEmpty: Bd,
+						allowEmpty: Rd,
 						validationCallback: (e, t) => D(Q, t),
 						enableCosmeticRounding: j,
 						enableDisplayRounding: M,
 						roundDisplayValue: N,
-						groupOrder: Yd,
-						disableInternalErrorValidationMessages: Hd,
+						groupOrder: qd,
+						disableInternalErrorValidationMessages: Bd,
 						small: o,
 						selectOnFocus: P,
 						tooltip: I
 					}, Q)
 				}),
-				Z && (Kd || !H ? /* @__PURE__ */ jsx(InputGroupAddon, {
-					groupOrder: Xd,
+				Z && (Wd || !H ? /* @__PURE__ */ jsx(InputGroupAddon, {
+					groupOrder: Jd,
 					small: o,
 					children: Z
 				}) : /* @__PURE__ */ jsx(Menu, {
-					groupOrder: Xd,
+					groupOrder: Jd,
 					maxHeight: 380,
 					disabled: r,
 					testId: x && `${x}-menu`,
@@ -6993,7 +6945,7 @@ const UnitInput = ({ name: e, placeholder: t = "", disabled: n = !1, disabledUni
 								label: j ? safeRoundNumbers(i) : i,
 								inline: !0,
 								onClick: (n) => {
-									n.stopPropagation(), Gd(e, t);
+									n.stopPropagation(), Ud(e, t);
 								},
 								description: r,
 								selected: r === Z,
@@ -8893,4 +8845,4 @@ const ComparisonViewModal = ({ auditLog: e, auditLogs: t, data: n, isOpen: r, se
 		}
 	});
 };
-export { Accordion, AccordionWithDefaultToggle, Actions, Align, AuditLog, Badge, Breadcrumb, BreadcrumbLinkType, Button, ButtonGroup, ButtonPosition, ButtonType, Card, CheckBox, Chevron, Collapse, Color, ColorInput, Column, Dialog, DiffViewer, DisabledContext, Divider, Drawer, ElementType, Empty, Field, FileButton, FileInput, Flex, FormRow, Grid, GroupOrder, Heading, HelpIcon, Icon, IconType, Input, InputGroup, InputGroupAddon, InputReaderMethods, InputType, Label, List, ListHeading, ListSubheading, Loader, Menu, MenuCarat, MenuType, Message, MessageType, Modal, NativeSelect, NumberInput, OptionDropdown, Page, Pagination, PopConfirm, Popover, Portal, PrintHeader, ProgressBar, RadioButton, RichTextInput, Row, Select, SettingField, SideBar, Slider, SmartUploadModal, Spacer, Spinner, Table, TableImportExport, Tabs, Text, TextArea, TextLink, TextTransform, Theme, Toaster, Toggle, Tooltip, TopBar, Tree, TriggerType, UnitInput, UnitTable, UsageTracker, dismissToast, initializeContext, initializeGuiLibrary, readFile, toast, useFocus, useKeyboardEvent, useWindowWidth };
+export { Accordion, AccordionWithDefaultToggle, Actions, Align, AuditLog, Badge, Breadcrumb, BreadcrumbLinkType, Button, ButtonGroup, ButtonPosition, ButtonType, Card, CheckBox, Chevron, Collapse, Color, Column, Dialog, DiffViewer, DisabledContext, Divider, Drawer, ElementType, Empty, Field, FileButton, FileInput, Flex, FormRow, Grid, GroupOrder, Heading, HelpIcon, Icon, IconType, Input, InputGroup, InputGroupAddon, InputReaderMethods, InputType, Label, List, ListHeading, ListSubheading, Loader, Menu, MenuCarat, MenuType, Message, MessageType, Modal, NativeSelect, NumberInput, OptionDropdown, Page, Pagination, PopConfirm, Popover, Portal, PrintHeader, ProgressBar, RadioButton, RichTextInput, Row, Select, SettingField, SideBar, Slider, SmartUploadModal, Spacer, Spinner, Table, TableImportExport, Tabs, Text, TextArea, TextLink, TextTransform, Theme, Toaster, Toggle, Tooltip, TopBar, Tree, TriggerType, UnitInput, UnitTable, UsageTracker, dismissToast, initializeContext, initializeGuiLibrary, readFile, toast, useFocus, useKeyboardEvent, useWindowWidth };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oliasoft-open-source/react-ui-library",
-  "version": "5.11.6-beta-2",
+  "version": "5.11.6",
   "description": "Reusable UI components for React projects",
   "homepage": "https://oliasoft-open-source.gitlab.io/react-ui-library",
   "bugs": {