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

package/dist/index.d.ts

@@ -97,6 +97,8 @@ 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;
@@ -335,6 +337,18 @@ 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)

package/dist/index.js

@@ -1273,6 +1273,119 @@ 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_hb750_1",
+	trigger: "_trigger_hb750_8",
+	buttonColor: "_buttonColor_hb750_12",
+	options: "_options_hb750_17",
+	option: "_option_hb750_17"
+};
+const ColorInput = ({ columns: e = 9, disabled: t, options: n = [], small: r, value: i, onChange: a }) => {
+	var o;
+	let [s, c] = useState(!1), l = (o = n.find((e) => e.value === i)) == null ? void 0 : o.label;
+	return /* @__PURE__ */ jsx("div", {
+		className: color_input_module_default.colorInput,
+		children: /* @__PURE__ */ jsx(Popover, {
+			placement: "bottom-start",
+			isOpen: s,
+			onToggle: c,
+			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 == null || a(e.value), c(!1);
+						}
+					}, e.value)
+				}))
+			}),
+			children: /* @__PURE__ */ jsx(Button, {
+				disabled: t,
+				small: r,
+				active: s,
+				width: r ? "var(--size-sm)" : "var(--size)",
+				tooltip: l,
+				label: /* @__PURE__ */ jsx("div", {
+					className: color_input_module_default.buttonColor,
+					style: { backgroundColor: i }
+				})
+			})
+		})
+	});
+};
 var noScrollbars = css`
   scrollbar-width: none;
   -ms-overflow-style: none;
@@ -3450,70 +3563,7 @@ 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 });
-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 }) => {
+}, ActionsCell = ({ cell: e }) => /* @__PURE__ */ jsx(Actions, { actions: e.actions }), CellHelpIcon = ({ cell: e }) => {
 	let { helpIcon: t } = e;
 	return t ? /* @__PURE__ */ jsx("div", {
 		className: cell_module_default.icon,
@@ -6577,30 +6627,30 @@ var tree_module_default = {
 	placeholderContainer: "_placeholderContainer_1cqsz_38"
 };
 const TreeItem = ({ node: t, depth: n, isOpen: r, onToggle: i, hasChild: a, draggable: o, icons: s, onDrop: c }) => {
-	let { id: l, data: u } = t, { active: d, disabled: f, testId: p, onClick: m, actions: h = [] } = u, [_, v] = React.useState(!1), [y, b] = React.useState(0), x = (e) => {
+	let { id: l, data: u } = t, { active: d, testId: f, onClick: p, actions: m = [] } = u, [h, _] = React.useState(!1), [v, y] = React.useState(0), b = (e) => {
 		e.stopPropagation(), i(l);
+	}, x = (e) => {
+		e.preventDefault(), e.stopPropagation(), h || (_(!0), y((/* @__PURE__ */ new Date()).getTime()));
 	}, S = (e) => {
-		e.preventDefault(), e.stopPropagation(), _ || (v(!0), b((/* @__PURE__ */ new Date()).getTime()));
+		e.preventDefault(), e.stopPropagation(), (/* @__PURE__ */ new Date()).getTime() - v > 20 && _(!1);
 	}, C = (e) => {
-		e.preventDefault(), e.stopPropagation(), (/* @__PURE__ */ new Date()).getTime() - y > 20 && v(!1);
+		e.preventDefault(), e.stopPropagation(), a && !r && (/* @__PURE__ */ new Date()).getTime() - v > 200 && b(e);
 	}, w = (e) => {
-		e.preventDefault(), e.stopPropagation(), a && !r && (/* @__PURE__ */ new Date()).getTime() - y > 200 && x(e);
-	}, T = (e) => {
-		e.preventDefault(), e.stopPropagation(), v(!1), b((/* @__PURE__ */ new Date()).getTime()), c == null || c(e);
+		e.preventDefault(), e.stopPropagation(), _(!1), y((/* @__PURE__ */ new Date()).getTime()), c == null || c(e);
 	};
 	return /* @__PURE__ */ jsx("div", {
-		className: cx(list_module_default.item, f ? "" : list_module_default.action, d ? list_module_default.active : "", f ? list_module_default.disabled : "", n > 0 ? list_module_default.indented : "", _ ? list_module_default.bordered : ""),
+		className: cx(list_module_default.item, list_module_default.action, d ? list_module_default.active : "", n > 0 ? list_module_default.indented : "", h ? list_module_default.bordered : ""),
 		style: { marginInlineStart: n * 24 },
-		"data-testid": p,
+		"data-testid": f,
 		onClick: (e) => {
-			f || (m ? m(e) : a && x(e));
+			p ? p(e) : a && b(e);
 		},
-		onDrop: (e) => c ? T(e) : {},
-		onDragEnter: (e) => c ? S(e) : {},
-		onDragOver: (e) => c ? w(e) : {},
-		onDragLeave: (e) => c ? C(e) : {},
+		onDrop: (e) => c ? w(e) : {},
+		onDragEnter: (e) => c ? x(e) : {},
+		onDragOver: (e) => c ? C(e) : {},
+		onDragLeave: (e) => c ? S(e) : {},
 		children: /* @__PURE__ */ jsxs("div", {
-			className: cx(list_module_default.itemHeader, _ ? list_module_default.noPointerEvents : ""),
+			className: cx(list_module_default.itemHeader, h ? list_module_default.noPointerEvents : ""),
 			children: [
 				a && /* @__PURE__ */ jsx("div", {
 					className: tree_module_default.toggle,
@@ -6610,7 +6660,7 @@ const TreeItem = ({ node: t, depth: n, isOpen: r, onToggle: i, hasChild: a, drag
 						small: !0,
 						round: !0,
 						icon: r ? (s == null ? void 0 : s.collapse) || IconType.COLLAPSE : (s == null ? void 0 : s.expand) || IconType.EXPAND,
-						onClick: x
+						onClick: b
 					})
 				}),
 				o && /* @__PURE__ */ jsx("div", {
@@ -6620,9 +6670,9 @@ const TreeItem = ({ node: t, depth: n, isOpen: r, onToggle: i, hasChild: a, drag
 				/* @__PURE__ */ jsx(MetaContent, { item: u }),
 				/* @__PURE__ */ jsx("div", {
 					className: list_module_default.right,
-					children: !f && h.length > 0 && /* @__PURE__ */ jsx("div", {
+					children: /* @__PURE__ */ jsx("div", {
 						className: list_module_default.actions,
-						children: /* @__PURE__ */ jsx(Actions, { actions: h })
+						children: /* @__PURE__ */ jsx(Actions, { actions: m })
 					})
 				})
 			]
@@ -9127,4 +9177,4 @@ const ComparisonViewModal = ({ auditLog: e, auditLogs: t, data: n, isOpen: r, se
 		e === ConfigKeyType.Translations ? setConfig(e, getTranslations(t)) : setConfig(e, isPrimitiveValue(t) ? t : { ...t });
 	});
 };
-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, TreeTable, 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, 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, TreeTable, 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.14.1-beta-2",
+  "version": "5.15.0",
   "description": "Reusable UI components for React projects",
   "homepage": "https://oliasoft-open-source.gitlab.io/react-ui-library",
   "bugs": {