@youngonesworks/ui 1.0.14 → 1.0.15

package/dist/components/actionIcon/index.d.ts

@@ -6,6 +6,7 @@ export interface ActionIconProps {
     disabled?: boolean;
     type?: 'button' | 'submit' | 'reset' | undefined;
     styleVariant?: 'default' | 'transparent' | 'small' | 'round';
+    tooltipTitle?: string;
     onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
     icon?: React.ReactNode;
     iconSize?: number;
@@ -22,7 +23,7 @@ export interface ActionIconProps {
     height?: string;
 }
 declare const ActionIcon: {
-    ({ ref, title, disabled, styleVariant, icon, type, "data-testid": testId, iconSize, strokeWidth, onClick, className, ...props }: ActionIconProps): import("react/jsx-runtime").JSX.Element;
+    ({ ref, title, disabled, styleVariant, icon, type, tooltipTitle, "data-testid": testId, iconSize, strokeWidth, onClick, className, ...props }: ActionIconProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export { ActionIcon };

package/dist/index.cjs

@@ -281,34 +281,35 @@ function formatIcon(icon, defaultFormatAttributes) {
 }
 //#endregion
 //#region src/components/actionIcon/index.tsx
-const ActionIcon = ({ ref, title, disabled = false, styleVariant = "default", icon, type = "button", "data-testid": testId, iconSize = 20, strokeWidth = 1, onClick, className, ...props }) => {
+const ActionIcon = ({ ref, title, disabled = false, styleVariant = "default", icon, type = "button", tooltipTitle, "data-testid": testId, iconSize = 20, strokeWidth = 1, onClick, className, ...props }) => {
 	const variantClassNames = (0, clsx.default)({
 		"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-ultra-light-blue-gray disabled:text-gray-500": styleVariant === ACTION_ICON_STYLE_VARIANT.SMALL
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tooltip, {
+	const renderButton = () => /* @__PURE__ */ (0, react_jsx_runtime.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": tooltipTitle,
+		"data-tooltip-content": tooltipTitle,
+		...props,
+		children: icon ? formatIcon(icon, {
+			stroke: strokeWidth,
+			size: iconSize
+		}) : props.children
+	});
+	return tooltipTitle ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tooltip, {
 		size: "sm",
-		content: title,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.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
-		})
-	}) });
+		content: tooltipTitle,
+		children: renderButton()
+	}) : renderButton();
 };
 ActionIcon.displayName = "ActionIcon";
 //#endregion
@@ -1250,6 +1251,7 @@ const Divider = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runti
 const FavouriteButton = (0, react.forwardRef)((props, ref) => {
 	const { onClick, favourite, iconFilled, iconOutline, favouriteTitle, iconColorSelected = "text-secondary", iconColor = "text-gray-800", iconSize, className = "", styleVariant = "transparent", children, ...rest } = props;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionIcon, {
+		tooltipTitle: favouriteTitle || "Favorite",
 		onClick,
 		"data-component": "favouriteButton",
 		title: favouriteTitle || "Favorite",
@@ -1819,12 +1821,12 @@ const Modal = ({ title, children, withCloseButton = true, opened, additionalClas
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						className: "relative z-10 w-full",
 						children: withCloseButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionIcon, {
+							title: "Close modal",
 							onClick: handleClose,
-							"aria-label": "close modal",
+							"aria-label": "Close modal",
 							className: "absolute top-0 right-0",
 							"data-testid": "close-modal",
-							icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_tabler_icons_react.IconX, {}),
-							title: "Close modal"
+							icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_tabler_icons_react.IconX, {})
 						})
 					}),
 					title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {