@youngonesworks/ui 0.1.104 → 0.1.106

package/dist/index.js

@@ -7,12 +7,12 @@ import { IconAlertCircle, IconAlertTriangle, IconArrowNarrowLeft, IconBold, Icon
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { Tooltip as Tooltip$1 } from "react-tooltip";
+import { FloatingArrow, FloatingFocusManager, FloatingPortal, arrow, autoUpdate, flip, offset, shift, useClick, useDismiss, useFloating, useFocus, useHover, useInteractions, useRole } from "@floating-ui/react";
 import { DayPicker, useDayPicker } from "react-day-picker";
 import { addMonths, format, setMonth } from "date-fns";
 import { enGB, fr, nl, nlBE } from "date-fns/locale";
-import { FloatingArrow, FloatingFocusManager, FloatingPortal, arrow, autoUpdate, flip, offset, shift, useClick, useDismiss, useFloating, useFocus, useHover, useInteractions, useRole } from "@floating-ui/react";
 import { createPortal } from "react-dom";
+import { Tooltip as Tooltip$1 } from "react-tooltip";
 import { Placeholder } from "@tiptap/extension-placeholder";
 import { Underline } from "@tiptap/extension-underline";
 import { EditorContent, useEditor } from "@tiptap/react";
@@ -92,6 +92,113 @@ const AccordionWrapper = ({ children, className }) => /* @__PURE__ */ jsx("div",
 	children
 });
 
+//#endregion
+//#region src/hooks/useMergeRefs.ts
+function useMergeRefs(...refs) {
+	return useCallback((value) => {
+		refs.forEach((ref) => {
+			if (typeof ref === "function") {
+				ref(value);
+			} else if (ref) {
+				ref.current = value;
+			}
+		});
+	}, [refs]);
+}
+
+//#endregion
+//#region src/components/tooltip/index.tsx
+const sizeClasses = {
+	xs: "max-w-xs",
+	sm: "max-w-sm",
+	md: "max-w-md",
+	lg: "max-w-lg"
+};
+const Tooltip = ({ content, children, passedOpen = false, size = "md", variant = "default" }) => {
+	const [isOpen, setIsOpen] = useState(passedOpen);
+	const arrowRef = useRef(null);
+	const { refs, floatingStyles, context } = useFloating({
+		open: isOpen,
+		onOpenChange: setIsOpen,
+		placement: "top",
+		middleware: [
+			variant === "default" ? offset(20) : offset(25),
+			flip(),
+			shift(),
+			arrow({ element: arrowRef })
+		],
+		whileElementsMounted: autoUpdate
+	});
+	const hover = useHover(context, { move: false });
+	const focus = useFocus(context);
+	const dismiss = useDismiss(context);
+	const role = useRole(context, { role: "tooltip" });
+	const { getReferenceProps, getFloatingProps } = useInteractions([
+		hover,
+		focus,
+		dismiss,
+		role
+	]);
+	const childRef = children.ref;
+	const mergedRef = useMergeRefs(refs.setReference, childRef);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [isValidElement(children) && cloneElement(children, getReferenceProps({
+		...children.props,
+		...getReferenceProps(),
+		ref: mergedRef
+	})), isOpen && /* @__PURE__ */ jsx("div", {
+		ref: refs.setFloating,
+		style: floatingStyles,
+		...getFloatingProps(),
+		className: "z-70 drop-shadow-xl",
+		"data-testid": "tooltip",
+		"data-component": "tooltip",
+		children: variant === "default" ? /* @__PURE__ */ jsxs("div", {
+			"data-testid": "tooltip-container",
+			className: "w-full rounded bg-gray-800 pt-[3px] text-white",
+			children: [/* @__PURE__ */ jsx("div", {
+				"data-testid": "tooltip-content",
+				className: `${sizeClasses[size]} px-2 py-1 text-sm font-normal`,
+				children: content
+			}), /* @__PURE__ */ jsx(FloatingArrow, {
+				ref: arrowRef,
+				context,
+				width: 10,
+				height: 6,
+				tipRadius: 1,
+				"data-testid": "tooltip-arrow",
+				className: "fill-gray-800 drop-shadow-xl"
+			})]
+		}) : /* @__PURE__ */ jsxs("div", {
+			"data-testid": "tooltip-container",
+			className: "bg-linear-gradient-x pt-[3px]",
+			children: [/* @__PURE__ */ jsx("div", {
+				"data-testid": "tooltip-content",
+				className: `${sizeClasses[size]} overflow-hidden bg-white p-5 px-2 py-1 text-start text-sm font-normal`,
+				children: /* @__PURE__ */ jsx("p", { children: content })
+			}), size === "md" ? /* @__PURE__ */ jsx(FloatingArrow, {
+				ref: arrowRef,
+				context,
+				width: 25,
+				height: 17,
+				tipRadius: 1,
+				fill: "white",
+				className: "drop-shadow-xl",
+				"data-testid": "tooltip-arrow"
+			}) : /* @__PURE__ */ jsx(FloatingArrow, {
+				ref: arrowRef,
+				context,
+				width: 10,
+				height: 6,
+				tipRadius: 1,
+				fill: "white",
+				className: "drop-shadow-xl",
+				"data-testid": "tooltip-arrow"
+			})]
+		})
+	})] });
+};
+Tooltip.displayName = "Tooltip";
+
 //#endregion
 //#region src/utils/enums.ts
 let ACTION_ICON_STYLE_VARIANT = /* @__PURE__ */ function(ACTION_ICON_STYLE_VARIANT$1) {
@@ -169,34 +276,35 @@ function formatIcon(icon, defaultFormatAttributes) {
 
 //#endregion
 //#region src/components/actionIcon/index.tsx
-const ActionIcon = forwardRef(({ title, disabled = false, styleVariant = "default", icon, type = "button", "data-testid": testId, iconSize = 20, strokeWidth = 1, onClick, className,...props }, ref) => {
+const ActionIcon = ({ ref, title, disabled = false, styleVariant = "default", icon, type = "button", "data-testid": testId, iconSize = 20, strokeWidth = 1, onClick, className,...props }) => {
 	const variantClassNames = clsx({
 		"active:translate-y-[1px] content-center flex items-center justify-center rounded-[4px] border border-gray-200 hover:border-black text-black child:p-10 w-[36px] h-[36px] disabled:text-gray-500": styleVariant === ACTION_ICON_STYLE_VARIANT.DEFAULT,
 		"active:translate-y-[1px] border-none content-center flex items-center justify-center rounded-[4px] border text-black child:p-10 w-[36px] h-[36px] disabled:text-gray-500": styleVariant === ACTION_ICON_STYLE_VARIANT.TRANSPARENT,
 		"active:translate-y-[1px] content-center flex items-center justify-center rounded-[4px] child:p-10 w-[37px] h-[37px] text-black rounded-full bg-primary hover:bg-turquoise-700 disabled:turquoise-50 disabled:text-gray-800": styleVariant === ACTION_ICON_STYLE_VARIANT.ROUND,
 		"w-7 h-7 active:translate-y-[1px] content-center flex items-center justify-center rounded-[4px] border border-gray-200 hover:border-black text-black hover:bg-gray-50 disabled:text-gray-500": styleVariant === ACTION_ICON_STYLE_VARIANT.SMALL
 	});
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("button", {
-		title,
-		type,
-		disabled,
-		"data-testid": testId,
-		"data-component": "ActionIcon",
-		className: cn(variantClassNames, { "hover:bg-transparant cursor-not-allowed hover:border-gray-200": disabled }, className),
-		onClick,
-		ref,
-		"data-tooltip-id": title,
-		"data-tooltip-content": title,
-		...props,
-		children: icon ? formatIcon(icon, {
-			stroke: strokeWidth,
-			size: iconSize
-		}) : props.children
-	}), /* @__PURE__ */ jsx(Tooltip$1, {
-		id: title,
-		className: "z-[99]"
-	})] });
-});
+	return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(Tooltip, {
+		size: "sm",
+		content: title,
+		children: /* @__PURE__ */ jsx("button", {
+			title,
+			type,
+			disabled,
+			"data-testid": testId,
+			"data-component": "ActionIcon",
+			className: cn(variantClassNames, { "hover:bg-transparant cursor-not-allowed hover:border-gray-200": disabled }, className),
+			onClick,
+			ref,
+			"data-tooltip-id": title,
+			"data-tooltip-content": title,
+			...props,
+			children: icon ? formatIcon(icon, {
+				stroke: strokeWidth,
+				size: iconSize
+			}) : props.children
+		})
+	}) });
+};
 ActionIcon.displayName = "ActionIcon";
 
 //#endregion
@@ -1490,100 +1598,9 @@ const Island = ({ children, className, noShadow = false, noPadding = false,...pr
 });
 Island.displayName = "Island";
 
-//#endregion
-//#region src/components/tooltip/index.tsx
-const sizeClasses = {
-	xs: "max-w-xs",
-	sm: "max-w-sm",
-	md: "max-w-md",
-	lg: "max-w-lg"
-};
-const Tooltip = ({ content, children, passedOpen = false, size = "md", variant = "default" }) => {
-	const [isOpen, setIsOpen] = useState(passedOpen);
-	const arrowRef = useRef(null);
-	const { refs, floatingStyles, context } = useFloating({
-		open: isOpen,
-		onOpenChange: setIsOpen,
-		placement: "top",
-		middleware: [
-			variant === "default" ? offset(20) : offset(25),
-			flip(),
-			shift(),
-			arrow({ element: arrowRef })
-		],
-		whileElementsMounted: autoUpdate
-	});
-	const hover = useHover(context, { move: false });
-	const focus = useFocus(context);
-	const dismiss = useDismiss(context);
-	const role = useRole(context, { role: "tooltip" });
-	const { getReferenceProps, getFloatingProps } = useInteractions([
-		hover,
-		focus,
-		dismiss,
-		role
-	]);
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [isValidElement(children) && cloneElement(children, getReferenceProps({
-		ref: refs.setReference,
-		...children.props,
-		...getReferenceProps()
-	})), isOpen && /* @__PURE__ */ jsx("div", {
-		ref: refs.setFloating,
-		style: floatingStyles,
-		...getFloatingProps(),
-		className: "z-70 drop-shadow-xl",
-		"data-testid": "tooltip",
-		"data-component": "tooltip",
-		children: variant === "default" ? /* @__PURE__ */ jsxs("div", {
-			"data-testid": "tooltip-container",
-			className: "w-full rounded bg-gray-800 pt-[3px] text-white",
-			children: [/* @__PURE__ */ jsx("div", {
-				"data-testid": "tooltip-content",
-				className: `${sizeClasses[size]} px-2 py-1 text-sm font-normal`,
-				children: content
-			}), /* @__PURE__ */ jsx(FloatingArrow, {
-				ref: arrowRef,
-				context,
-				width: 10,
-				height: 6,
-				tipRadius: 1,
-				"data-testid": "tooltip-arrow",
-				className: "fill-gray-800 drop-shadow-xl"
-			})]
-		}) : /* @__PURE__ */ jsxs("div", {
-			"data-testid": "tooltip-container",
-			className: "bg-linear-gradient-x pt-[3px]",
-			children: [/* @__PURE__ */ jsx("div", {
-				"data-testid": "tooltip-content",
-				className: `${sizeClasses[size]} overflow-hidden bg-white p-5 px-2 py-1 text-start text-sm font-normal`,
-				children: /* @__PURE__ */ jsx("p", { children: content })
-			}), size === "md" ? /* @__PURE__ */ jsx(FloatingArrow, {
-				ref: arrowRef,
-				context,
-				width: 25,
-				height: 17,
-				tipRadius: 1,
-				fill: "white",
-				className: "drop-shadow-xl",
-				"data-testid": "tooltip-arrow"
-			}) : /* @__PURE__ */ jsx(FloatingArrow, {
-				ref: arrowRef,
-				context,
-				width: 10,
-				height: 6,
-				tipRadius: 1,
-				fill: "white",
-				className: "drop-shadow-xl",
-				"data-testid": "tooltip-arrow"
-			})]
-		})
-	})] });
-};
-Tooltip.displayName = "Tooltip";
-
 //#endregion
 //#region src/components/kebabMenu/index.tsx
-const KebabMenu = ({ title, content, disabled = false, styleVariant = "default" }) => {
+const KebabMenu = ({ title, tooltip, content, disabled = false, styleVariant = "default" }) => {
 	const [isOpen, setIsOpen] = useState(false);
 	const menuRef = useRef(null);
 	const defaultStyling = "text-black flex items-center justify-self-end gap-1 bg-transparent font-medium py-1 h-9 min-w-9 cursor-pointer px-0";
@@ -1605,45 +1622,58 @@ const KebabMenu = ({ title, content, disabled = false, styleVariant = "default"
 			document.removeEventListener("mousedown", handleClickOutside);
 		};
 	}, []);
+	const button = useMemo(() => /* @__PURE__ */ jsxs(UnstyledButton, {
+		"aria-label": "Options Menu",
+		className: cn(buttonVariants["secondary"], defaultStyling, {
+			"md:pr-3.5 md:pl-5": title,
+			"h-7 min-w-7": styleVariant === "small"
+		}),
+		disabled,
+		onClick: handleToggle,
+		children: [title && /* @__PURE__ */ jsx("span", {
+			className: "hidden md:block",
+			children: title
+		}), /* @__PURE__ */ jsx(IconDotsVertical, {
+			size: 20,
+			stroke: 1,
+			fill: "black"
+		})]
+	}), [
+		title,
+		styleVariant,
+		disabled,
+		handleToggle
+	]);
 	return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsxs("div", {
-		className: "relative",
 		"data-component": "kebabMenu",
 		"data-testid": "kebab-menu",
 		ref: menuRef,
 		"data-tooltip-id": title,
 		"data-tooltip-content": title,
-		children: [/* @__PURE__ */ jsxs(UnstyledButton, {
-			"aria-label": "Options Menu",
-			className: cn(buttonVariants["secondary"], defaultStyling, {
-				"md:pr-3.5 md:pl-5": title,
-				"h-7 min-w-7": styleVariant === "small"
-			}),
-			disabled,
-			onClick: handleToggle,
-			children: [title && /* @__PURE__ */ jsx("span", {
-				className: "hidden md:block",
-				children: title
-			}), /* @__PURE__ */ jsx(IconDotsVertical, {
-				size: 20,
-				stroke: 1,
-				fill: "black"
-			})]
-		}), isOpen && /* @__PURE__ */ jsx("div", {
-			className: "absolute right-0 z-10 mt-2 w-auto min-w-[200px] rounded-md border-[0.0625rem] border-gray-200 bg-white p-1 shadow-md",
-			children: content.map((c, index) => {
-				const button = /* @__PURE__ */ jsx(UnstyledButton, {
-					onClick: () => handleItemClick(c.onClick),
-					className: "w-full rounded-md px-4 py-2 text-left text-sm font-normal whitespace-nowrap hover:bg-gray-50",
-					"aria-label": "Options Menu Item",
-					disabled: c.disabled,
-					children: c.title
-				});
-				return c.tooltip ? /* @__PURE__ */ jsx(Tooltip, {
-					passedOpen: false,
-					size: "sm",
-					content: c.tooltip,
-					children: button
-				}, index) : /* @__PURE__ */ jsx(React.Fragment, { children: button }, index);
+		children: [tooltip ? /* @__PURE__ */ jsx(Tooltip, {
+			passedOpen: false,
+			size: "sm",
+			content: tooltip,
+			children: button
+		}) : button, isOpen && /* @__PURE__ */ jsx("div", {
+			className: "relative",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "absolute right-0 z-10 mt-2 w-auto min-w-[200px] rounded-md border-[0.0625rem] border-gray-200 bg-white p-1 shadow-md",
+				children: content.map((c, index) => {
+					const button$1 = /* @__PURE__ */ jsx(UnstyledButton, {
+						onClick: () => handleItemClick(c.onClick),
+						className: "w-full rounded-md px-4 py-2 text-left text-sm font-normal whitespace-nowrap hover:bg-gray-50",
+						"aria-label": "Options Menu Item",
+						disabled: c.disabled,
+						children: c.title
+					});
+					return c.tooltip ? /* @__PURE__ */ jsx(Tooltip, {
+						passedOpen: false,
+						size: "sm",
+						content: c.tooltip,
+						children: button$1
+					}, index) : /* @__PURE__ */ jsx(Fragment, { children: button$1 }, index);
+				})
 			})
 		})]
 	}) });
@@ -2301,20 +2331,6 @@ function useDebouncedValue(value, delay = 200) {
 	return debouncedValue;
 }
 
-//#endregion
-//#region src/hooks/useMergeRefs.ts
-function useMergeRefs(...refs) {
-	return useCallback((value) => {
-		refs.forEach((ref) => {
-			if (typeof ref === "function") {
-				ref(value);
-			} else if (ref) {
-				ref.current = value;
-			}
-		});
-	}, [refs]);
-}
-
 //#endregion
 //#region src/components/select/index.tsx
 function Select({ id, options, placeholder, label, errorText, hideError = false, isClearable = false, disabled = false, multiSelect = false, searchable = false, value, defaultValue, onValueChange, className, searchPlaceholder, noResultsText,...props }) {