@trackunit/react-components 0.1.96 → 0.1.99

package/index.cjs

@@ -1159,18 +1159,28 @@ const useClickOutside = (el, options = {}, onClick) => {
  *
  * @param {any} value The value to set
  * @param {number} delay The debounce time
- * @returns {any} value The latest values received
+ * @param {"in" | "out" | "both"} direction Considers truthiness of value. If set to "in", the value will only be debounced if it is truthy. If set to "out", the value will only be debounced if it is falsy. If set to "both" or if not defined, the value will be debounced regardless of truthiness.
+ * @returns {any} The latest value received
  */
-const useDebounce = (value, delay = 500) => {
+const useDebounce = (value, delay = 500, direction) => {
     const [debouncedValue, setDebouncedValue] = React.useState(value);
     React.useEffect(() => {
-        const handler = setTimeout(() => {
+        let handler;
+        if ((direction === "in" && !debouncedValue && value) ||
+            (direction === "out" && debouncedValue && !value) ||
+            direction === "both" ||
+            !direction) {
+            handler = setTimeout(() => {
+                setDebouncedValue(value);
+            }, delay);
+        }
+        else {
             setDebouncedValue(value);
-        }, delay);
+        }
         return () => {
             clearTimeout(handler);
         };
-    }, [value, delay]);
+    }, [value, delay, direction, debouncedValue]);
     return debouncedValue;
 };
 
@@ -1743,11 +1753,18 @@ const Space = tailwindStyledComponents.tw.div `
  * @param {SectionHeaderProps} props - The props for the section header component
  * @returns {JSX.Element} SectionHeader component
  */
-const SectionHeader = ({ title, subtitle, dataTestId, addon }) => {
-    return (jsxRuntime.jsxs(SectionHeaderContainer, { children: [jsxRuntime.jsx(reactHelmetAsync.HelmetProvider, { children: jsxRuntime.jsx(reactHelmetAsync.Helmet, { title: title }) }), jsxRuntime.jsxs(StyledFlex, { children: [jsxRuntime.jsx(Heading$1, Object.assign({ variant: "secondary", dataTestId: dataTestId }, { children: title })), addon] }), subtitle && (jsxRuntime.jsx(Heading$1, Object.assign({ variant: "subtitle", subtle: true }, { children: subtitle }))), jsxRuntime.jsx(Spacer, { minHeight: "normal" })] }));
+const SectionHeader = ({ title, subtitle, dataTestId, addons }) => {
+    return (jsxRuntime.jsxs(SectionHeaderContainer, { children: [jsxRuntime.jsx(reactHelmetAsync.HelmetProvider, { children: jsxRuntime.jsx(reactHelmetAsync.Helmet, { title: title }) }), jsxRuntime.jsxs(StyledFlex, Object.assign({ className: "flex-row mb-2" }, { children: [jsxRuntime.jsxs(StyledFlex, Object.assign({ className: "flex-col grow" }, { children: [jsxRuntime.jsx(Heading$1, Object.assign({ variant: "secondary", dataTestId: dataTestId }, { children: title })), subtitle && (jsxRuntime.jsx(Heading$1, Object.assign({ variant: "subtitle", subtle: true }, { children: subtitle })))] })), addons && jsxRuntime.jsx(StyledFlex, { children: addons })] })), jsxRuntime.jsx(Spacer, { minHeight: "normal" })] }));
 };
-const SectionHeaderContainer = tailwindStyledComponents.tw.div `tu-section-header`;
-const StyledFlex = tailwindStyledComponents.tw.div `tu-section-header__flex`;
+const SectionHeaderContainer = tailwindStyledComponents.tw.div `
+  tu-section-header
+  flex
+  flex-col
+`;
+const StyledFlex = tailwindStyledComponents.tw.div `
+  flex
+  gap-2
+`;
 
 /**
  * A hook used to detect what children are overflowing a container.

package/index.css

@@ -192,14 +192,3 @@
       hover:bg-transparent;
   }
 }
-
-.tu-section-header {
-  @apply w-full;
-
-  &__flex {
-    @apply flex
-      items-center
-      flex-wrap-reverse
-      gap-2;
-  }
-}

package/index.js

@@ -1132,18 +1132,28 @@ const useClickOutside = (el, options = {}, onClick) => {
  *
  * @param {any} value The value to set
  * @param {number} delay The debounce time
- * @returns {any} value The latest values received
+ * @param {"in" | "out" | "both"} direction Considers truthiness of value. If set to "in", the value will only be debounced if it is truthy. If set to "out", the value will only be debounced if it is falsy. If set to "both" or if not defined, the value will be debounced regardless of truthiness.
+ * @returns {any} The latest value received
  */
-const useDebounce = (value, delay = 500) => {
+const useDebounce = (value, delay = 500, direction) => {
     const [debouncedValue, setDebouncedValue] = useState(value);
     useEffect(() => {
-        const handler = setTimeout(() => {
+        let handler;
+        if ((direction === "in" && !debouncedValue && value) ||
+            (direction === "out" && debouncedValue && !value) ||
+            direction === "both" ||
+            !direction) {
+            handler = setTimeout(() => {
+                setDebouncedValue(value);
+            }, delay);
+        }
+        else {
             setDebouncedValue(value);
-        }, delay);
+        }
         return () => {
             clearTimeout(handler);
         };
-    }, [value, delay]);
+    }, [value, delay, direction, debouncedValue]);
     return debouncedValue;
 };
 
@@ -1716,11 +1726,18 @@ const Space = tw.div `
  * @param {SectionHeaderProps} props - The props for the section header component
  * @returns {JSX.Element} SectionHeader component
  */
-const SectionHeader = ({ title, subtitle, dataTestId, addon }) => {
-    return (jsxs(SectionHeaderContainer, { children: [jsx(HelmetProvider, { children: jsx(Helmet, { title: title }) }), jsxs(StyledFlex, { children: [jsx(Heading$1, Object.assign({ variant: "secondary", dataTestId: dataTestId }, { children: title })), addon] }), subtitle && (jsx(Heading$1, Object.assign({ variant: "subtitle", subtle: true }, { children: subtitle }))), jsx(Spacer, { minHeight: "normal" })] }));
+const SectionHeader = ({ title, subtitle, dataTestId, addons }) => {
+    return (jsxs(SectionHeaderContainer, { children: [jsx(HelmetProvider, { children: jsx(Helmet, { title: title }) }), jsxs(StyledFlex, Object.assign({ className: "flex-row mb-2" }, { children: [jsxs(StyledFlex, Object.assign({ className: "flex-col grow" }, { children: [jsx(Heading$1, Object.assign({ variant: "secondary", dataTestId: dataTestId }, { children: title })), subtitle && (jsx(Heading$1, Object.assign({ variant: "subtitle", subtle: true }, { children: subtitle })))] })), addons && jsx(StyledFlex, { children: addons })] })), jsx(Spacer, { minHeight: "normal" })] }));
 };
-const SectionHeaderContainer = tw.div `tu-section-header`;
-const StyledFlex = tw.div `tu-section-header__flex`;
+const SectionHeaderContainer = tw.div `
+  tu-section-header
+  flex
+  flex-col
+`;
+const StyledFlex = tw.div `
+  flex
+  gap-2
+`;
 
 /**
  * A hook used to detect what children are overflowing a container.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.96",
+  "version": "0.1.99",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {

package/src/components/SectionHeader/SectionHeader.d.ts

@@ -1,6 +1,5 @@
 import { ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
-import "./SectionHeader.css";
 export interface SectionHeaderProps extends CommonProps {
     /**
      * The title of the section.
@@ -13,7 +12,7 @@ export interface SectionHeaderProps extends CommonProps {
     /**
      * The addon could be used to tell the state of a section header.
      */
-    addon?: ReactNode;
+    addons?: ReactNode;
 }
 /**
  * The SectionHeader component is used on sections to set the section title.
@@ -21,4 +20,4 @@ export interface SectionHeaderProps extends CommonProps {
  * @param {SectionHeaderProps} props - The props for the section header component
  * @returns {JSX.Element} SectionHeader component
  */
-export declare const SectionHeader: ({ title, subtitle, dataTestId, addon }: SectionHeaderProps) => JSX.Element;
+export declare const SectionHeader: ({ title, subtitle, dataTestId, addons }: SectionHeaderProps) => JSX.Element;

package/src/components/buttons/BackToTopButton/BackToTopButton.d.ts

@@ -0,0 +1,14 @@
+import { CommonProps, Size } from "../../../common";
+export type BackToTopColor = "primary" | "secondary";
+export interface StyledBackToTopProps {
+    $color?: BackToTopColor;
+}
+export interface BackToTopProps extends CommonProps {
+    color?: BackToTopColor;
+    size?: Size;
+}
+/**
+ * BackToTopButton appears at the bottom-right corner of the screen when the user scrolls down the page. When clicked, the page scrolls smoothly to the top.
+ *
+ */
+export declare const BackToTopButton: ({ color, size, dataTestId }: BackToTopProps) => JSX.Element;

package/src/hooks/useDebounce.d.ts

@@ -3,6 +3,7 @@
  *
  * @param {any} value The value to set
  * @param {number} delay The debounce time
- * @returns {any} value The latest values received
+ * @param {"in" | "out" | "both"} direction Considers truthiness of value. If set to "in", the value will only be debounced if it is truthy. If set to "out", the value will only be debounced if it is falsy. If set to "both" or if not defined, the value will be debounced regardless of truthiness.
+ * @returns {any} The latest value received
  */
-export declare const useDebounce: <T>(value: T, delay?: number) => T;
+export declare const useDebounce: <T>(value: T, delay?: number, direction?: "in" | "out" | "both") => T;