@trackunit/react-components 0.1.132 → 0.1.134

package/index.cjs

@@ -18868,8 +18868,20 @@ const SkeletonLines = React.memo(({ margin = "10px 0", lines = 1, height, width
     return jsxRuntime.jsx(jsxRuntime.Fragment, { children: skeletonLines });
 });
 
-const containerStyles = cssClassVarianceUtilities.cvaMerge(["flex flex-col items-center gap-5 p-12 text-center justify-center h-full"]);
-const textStyles = cssClassVarianceUtilities.cvaMerge(["flex flex-col items-center gap-2"]);
+const cvaContainerStyles = cssClassVarianceUtilities.cvaMerge([
+    "flex",
+    "flex-col",
+    "items-center",
+    "gap-5",
+    "p-4",
+    "sm:p-6",
+    "md:p-12",
+    "text-center",
+    "justify-center",
+    "h-full",
+]);
+const cvaTextStyles = cssClassVarianceUtilities.cvaMerge(["flex", "flex-col", "items-center", "gap-2"]);
+const cvaImgStyles = cssClassVarianceUtilities.cvaMerge(["w-2/3", "min-w-[60px]", "max-w-[200px]"]);
 
 var WorkerWithSign = "8df3d27593b5fba4.svg";
 
@@ -18915,7 +18927,7 @@ const EmptyState = ({ title, description, altText, image, customImageSrc, action
             lazyLoadImage();
         }
     }, [customImageSrc, image]);
-    return (jsxRuntime.jsx("div", { className: `${containerStyles()} ${className}`, "data-testid": dataTestId !== null && dataTestId !== void 0 ? dataTestId : "empty-state", children: loading ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Spinner, { dataTestId: "spinner", size: "large", centering: "centered" }), jsxRuntime.jsx(SkeletonLines, { dataTestId: "skeleton-lines", width: 50 })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("img", { src: customImageSrc ? customImageSrc : imageSource, alt: altText }), jsxRuntime.jsxs("div", { className: textStyles(), children: [jsxRuntime.jsx(Heading, { variant: "secondary", children: title }), jsxRuntime.jsx(Text, { align: "center", children: description })] }), action] })) }));
+    return (jsxRuntime.jsx("div", { className: `${cvaContainerStyles()} ${className}`, "data-testid": dataTestId !== null && dataTestId !== void 0 ? dataTestId : "empty-state", children: loading ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Spinner, { dataTestId: "spinner", size: "large", centering: "centered" }), jsxRuntime.jsx(SkeletonLines, { dataTestId: "skeleton-lines", width: 50 })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("img", { className: cvaImgStyles(), width: 200, height: 200, src: customImageSrc ? customImageSrc : imageSource, alt: altText }), jsxRuntime.jsxs("div", { className: cvaTextStyles(), children: [jsxRuntime.jsx(Heading, { variant: "secondary", children: title }), jsxRuntime.jsx(Text, { align: "center", children: description })] }), action] })) }));
 };
 
 /**
@@ -36470,7 +36482,7 @@ const useLocalStorageReducer = ({ key, defaultState, reducer, schema, onValidati
  * Custom hook to handle click outside events.
  *
  * @param {RefObject<HTMLElement> | Array<RefObject<HTMLElement>>} el - The reference(s) to the element(s) to watch for click outside events.
- * @param {Object | Function} [options={}] - Configuration options or the click event handler if options are not provided.
+ * @param {object | Function} [options={}] - Configuration options or the click event handler if options are not provided.
  * @param {boolean} [options.active=true] - Whether the click outside event listener should be active.
  * @param {Function} [onClick] - The event handler for the click outside event.
  */
@@ -36590,8 +36602,8 @@ function getDevicePixelRatio(options) {
  * The boolean will be true if the element is being hovered, and false if it is not.
  * Can be directionally debounced.
  *
- * @param {ConditionalUseHoverProps} param0 The options
- * @returns {Object} The object containing the onMouseEnter, onMouseLeave and hovering props
+ * @param {UseHoverProps} param0 The options
+ * @returns {object} The object containing the onMouseEnter, onMouseLeave and hovering props
  */
 const useHover = ({ debounced = false, delay = 100, direction = "out" } = { debounced: false }) => {
     const [hovering, setHovering] = React.useState(false);
@@ -37265,13 +37277,17 @@ function useConfirmExit(confirmExit, when = true) {
  */
 const usePrompt = (message, when = true) => {
     React.useEffect(() => {
+        const onBeforeUnload = (event) => {
+            // According to https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event
+            // preventDefault() should be called to indicate that the event was handled.
+            event.preventDefault();
+            return message;
+        };
         if (when) {
-            window.onbeforeunload = function () {
-                return message;
-            };
+            window.addEventListener("beforeunload", onBeforeUnload);
         }
         return () => {
-            window.onbeforeunload = null;
+            window.removeEventListener("beforeunload", onBeforeUnload);
         };
     }, [message, when]);
     const confirmExit = React.useCallback(() => {

package/index.js

@@ -18841,8 +18841,20 @@ const SkeletonLines = memo(({ margin = "10px 0", lines = 1, height, width = "100
     return jsx(Fragment, { children: skeletonLines });
 });
 
-const containerStyles = cvaMerge(["flex flex-col items-center gap-5 p-12 text-center justify-center h-full"]);
-const textStyles = cvaMerge(["flex flex-col items-center gap-2"]);
+const cvaContainerStyles = cvaMerge([
+    "flex",
+    "flex-col",
+    "items-center",
+    "gap-5",
+    "p-4",
+    "sm:p-6",
+    "md:p-12",
+    "text-center",
+    "justify-center",
+    "h-full",
+]);
+const cvaTextStyles = cvaMerge(["flex", "flex-col", "items-center", "gap-2"]);
+const cvaImgStyles = cvaMerge(["w-2/3", "min-w-[60px]", "max-w-[200px]"]);
 
 var WorkerWithSign = "8df3d27593b5fba4.svg";
 
@@ -18888,7 +18900,7 @@ const EmptyState = ({ title, description, altText, image, customImageSrc, action
             lazyLoadImage();
         }
     }, [customImageSrc, image]);
-    return (jsx("div", { className: `${containerStyles()} ${className}`, "data-testid": dataTestId !== null && dataTestId !== void 0 ? dataTestId : "empty-state", children: loading ? (jsxs(Fragment, { children: [jsx(Spinner, { dataTestId: "spinner", size: "large", centering: "centered" }), jsx(SkeletonLines, { dataTestId: "skeleton-lines", width: 50 })] })) : (jsxs(Fragment, { children: [jsx("img", { src: customImageSrc ? customImageSrc : imageSource, alt: altText }), jsxs("div", { className: textStyles(), children: [jsx(Heading, { variant: "secondary", children: title }), jsx(Text, { align: "center", children: description })] }), action] })) }));
+    return (jsx("div", { className: `${cvaContainerStyles()} ${className}`, "data-testid": dataTestId !== null && dataTestId !== void 0 ? dataTestId : "empty-state", children: loading ? (jsxs(Fragment, { children: [jsx(Spinner, { dataTestId: "spinner", size: "large", centering: "centered" }), jsx(SkeletonLines, { dataTestId: "skeleton-lines", width: 50 })] })) : (jsxs(Fragment, { children: [jsx("img", { className: cvaImgStyles(), width: 200, height: 200, src: customImageSrc ? customImageSrc : imageSource, alt: altText }), jsxs("div", { className: cvaTextStyles(), children: [jsx(Heading, { variant: "secondary", children: title }), jsx(Text, { align: "center", children: description })] }), action] })) }));
 };
 
 /**
@@ -36443,7 +36455,7 @@ const useLocalStorageReducer = ({ key, defaultState, reducer, schema, onValidati
  * Custom hook to handle click outside events.
  *
  * @param {RefObject<HTMLElement> | Array<RefObject<HTMLElement>>} el - The reference(s) to the element(s) to watch for click outside events.
- * @param {Object | Function} [options={}] - Configuration options or the click event handler if options are not provided.
+ * @param {object | Function} [options={}] - Configuration options or the click event handler if options are not provided.
  * @param {boolean} [options.active=true] - Whether the click outside event listener should be active.
  * @param {Function} [onClick] - The event handler for the click outside event.
  */
@@ -36563,8 +36575,8 @@ function getDevicePixelRatio(options) {
  * The boolean will be true if the element is being hovered, and false if it is not.
  * Can be directionally debounced.
  *
- * @param {ConditionalUseHoverProps} param0 The options
- * @returns {Object} The object containing the onMouseEnter, onMouseLeave and hovering props
+ * @param {UseHoverProps} param0 The options
+ * @returns {object} The object containing the onMouseEnter, onMouseLeave and hovering props
  */
 const useHover = ({ debounced = false, delay = 100, direction = "out" } = { debounced: false }) => {
     const [hovering, setHovering] = useState(false);
@@ -37238,13 +37250,17 @@ function useConfirmExit(confirmExit, when = true) {
  */
 const usePrompt = (message, when = true) => {
     useEffect(() => {
+        const onBeforeUnload = (event) => {
+            // According to https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event
+            // preventDefault() should be called to indicate that the event was handled.
+            event.preventDefault();
+            return message;
+        };
         if (when) {
-            window.onbeforeunload = function () {
-                return message;
-            };
+            window.addEventListener("beforeunload", onBeforeUnload);
         }
         return () => {
-            window.onbeforeunload = null;
+            window.removeEventListener("beforeunload", onBeforeUnload);
         };
     }, [message, when]);
     const confirmExit = useCallback(() => {

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.132",
+  "version": "0.1.134",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
-    "node": ">=16.x"
+    "node": ">=18.x"
   },
   "dependencies": {
     "@floating-ui/react": "0.22.2",
-    "@trackunit/css-class-variance-utilities": "0.0.10",
-    "@trackunit/css-core": "0.0.89",
-    "@trackunit/tailwind-styled-components": "0.0.58",
-    "@trackunit/ui-design-tokens": "0.0.73",
-    "@trackunit/ui-icons": "0.0.70",
+    "@trackunit/css-class-variance-utilities": "0.0.11",
+    "@trackunit/css-core": "0.0.90",
+    "@trackunit/tailwind-styled-components": "0.0.59",
+    "@trackunit/ui-design-tokens": "0.0.74",
+    "@trackunit/ui-icons": "0.0.71",
     "date-fns": "2.29.3",
     "lodash": "4.17.21",
     "react": "18.2.0",

package/src/components/Card/Card.d.ts

@@ -25,7 +25,7 @@ export interface CardProps extends CommonProps, React.InputHTMLAttributes<HTMLDi
      */
     onMouseEnter?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     /**
-     * A MouseLEave handler function
+     * A MouseLeave handler function
      */
     onMouseLeave?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
 }

package/src/components/EmptyState/EmptyState.variants.d.ts

@@ -1,2 +1,3 @@
-export declare const containerStyles: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const textStyles: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaContainerStyles: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaTextStyles: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaImgStyles: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

package/src/components/buttons/shared/ButtonProps.d.ts

@@ -5,7 +5,18 @@ export type ButtonVariant = "filled" | "transparent";
 export type ButtonColor = Extract<GeneralColors, "primary" | "secondary"> | Extract<IntentColors, "warning" | "danger"> | "tertiary";
 export type ButtonType = "button" | "submit";
 export interface ButtonCommonProps extends CommonProps {
+    /**
+     * An onClick handler
+     */
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    /**
+     * A MouseEnter handler function
+     */
+    onMouseEnter?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    /**
+     * A MouseLeave handler function
+     */
+    onMouseLeave?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     /**
      * Whether the button is loading.
      */

package/src/hooks/useClickOutside.d.ts

@@ -3,7 +3,7 @@ import { RefObject } from "react";
  * Custom hook to handle click outside events.
  *
  * @param {RefObject<HTMLElement> | Array<RefObject<HTMLElement>>} el - The reference(s) to the element(s) to watch for click outside events.
- * @param {Object | Function} [options={}] - Configuration options or the click event handler if options are not provided.
+ * @param {object | Function} [options={}] - Configuration options or the click event handler if options are not provided.
  * @param {boolean} [options.active=true] - Whether the click outside event listener should be active.
  * @param {Function} [onClick] - The event handler for the click outside event.
  */

package/src/hooks/useHover.d.ts

@@ -1,5 +1,5 @@
 import { DebounceDirection } from "./useDebounce";
-type ConditionalUseHoverProps = {
+type UseHoverProps = {
     debounced: true;
     delay?: number;
     direction?: DebounceDirection;
@@ -13,10 +13,10 @@ type ConditionalUseHoverProps = {
  * The boolean will be true if the element is being hovered, and false if it is not.
  * Can be directionally debounced.
  *
- * @param {ConditionalUseHoverProps} param0 The options
- * @returns {Object} The object containing the onMouseEnter, onMouseLeave and hovering props
+ * @param {UseHoverProps} param0 The options
+ * @returns {object} The object containing the onMouseEnter, onMouseLeave and hovering props
  */
-export declare const useHover: ({ debounced, delay, direction }?: ConditionalUseHoverProps) => {
+export declare const useHover: ({ debounced, delay, direction }?: UseHoverProps) => {
     onMouseEnter: () => void;
     onMouseLeave: () => void;
     hovering: boolean;