@trackunit/react-components 0.1.100 → 0.1.102

package/index.cjs

@@ -10,6 +10,7 @@ var reactUse = require('react-use');
 var reactDayPicker = require('react-day-picker');
 var locale = require('date-fns/locale');
 var react = require('@floating-ui/react');
+var lodash = require('lodash');
 var usePortal = require('react-useportal');
 var reactRouterDom = require('react-router-dom');
 var reactHelmetAsync = require('react-helmet-async');
@@ -1235,6 +1236,20 @@ function getDevicePixelRatio(options) {
     return rounded;
 }
 
+/**
+ * Differentiate between the first and subsequent renders.
+ *
+ * @returns {boolean} Returns true if it is the first render, false otherwise.
+ */
+const useIsFirstRender = () => {
+    const renderRef = React.useRef(true);
+    if (renderRef.current === true) {
+        renderRef.current = false;
+        return true;
+    }
+    return renderRef.current;
+};
+
 /**
  * The useLocalStorage hook works like useState, but saves to localstorage.
  *
@@ -1278,6 +1293,50 @@ function tryParse(value) {
     }
 }
 
+/**
+ * Given any value this hook will return the previous value whenever the current value changes
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function usePrevious(value) {
+    const ref = React.useRef();
+    React.useEffect(() => {
+        ref.current = value;
+    });
+    return ref.current;
+}
+/**
+ * Wraps a normal useReducer with local storage functionality
+ *
+ * @param {string} key - The key the state is saved with in local storage.
+ */
+const useLocalStorageReducer = (key, reducer, initialState
+//return must be explicitly typed atm for some reason
+) => {
+    const init = () => {
+        const stringState = localStorage.getItem(key);
+        if (stringState) {
+            try {
+                return JSON.parse(stringState);
+            }
+            catch (error) {
+                return initialState;
+            }
+        }
+        else {
+            return initialState;
+        }
+    };
+    const [state, dispatch] = React.useReducer(reducer, initialState, init);
+    const prevState = usePrevious(state);
+    React.useEffect(() => {
+        if (!lodash.isEqual(prevState, state)) {
+            const stringifiedState = JSON.stringify(state);
+            localStorage.setItem(key, stringifiedState);
+        }
+    }, [prevState, state, key]);
+    return [state, dispatch];
+};
+
 /**
  * Custom hook to handle window resize events and provide the current window size.
  *
@@ -1362,15 +1421,15 @@ const MoreMenu = ({ className, dataTestId, menuPlacement, iconProps = {
     circular: true,
     square: true,
     color: "tertiary",
-}, children, }) => {
+}, customButton, children, }) => {
     const [actionMenuIsOpen, setActionMenuIsOpen] = React.useState(false);
     const actionMenuRef = React.useRef(null);
     useClickOutside(actionMenuRef, () => {
         setActionMenuIsOpen(false);
     });
-    return (jsxRuntime.jsx(Root$3, Object.assign({ ref: actionMenuRef, className: className, "data-testid": dataTestId }, { children: jsxRuntime.jsxs(Popover, Object.assign({ placement: menuPlacement }, { children: [jsxRuntime.jsx(PopoverTrigger, { children: jsxRuntime.jsx(IconButton, Object.assign({}, iconButtonProps, { icon: iconProps.name ? jsxRuntime.jsx(Icon, Object.assign({}, iconProps, { name: iconProps.name })) : null, onClick: () => {
+    return (jsxRuntime.jsx(Root$3, Object.assign({ ref: actionMenuRef, className: className, "data-testid": dataTestId }, { children: jsxRuntime.jsxs(Popover, Object.assign({ placement: menuPlacement }, { children: [jsxRuntime.jsx(PopoverTrigger, { children: customButton !== null && customButton !== void 0 ? customButton : (jsxRuntime.jsx(IconButton, Object.assign({}, iconButtonProps, { icon: iconProps.name ? jsxRuntime.jsx(Icon, Object.assign({}, iconProps, { name: iconProps.name })) : null, onClick: () => {
                             setActionMenuIsOpen(!actionMenuIsOpen);
-                        } })) }), jsxRuntime.jsx(PopoverContent, { children: close => (typeof children === "function" ? children(close) : children) })] })) })));
+                        } }))) }), jsxRuntime.jsx(PopoverContent, { children: close => (typeof children === "function" ? children(close) : children) })] })) })));
 };
 const Root$3 = tailwindStyledComponents.tw.div `
   tu-more-menu
@@ -2244,7 +2303,9 @@ exports.useClickOutside = useClickOutside;
 exports.useContainerProps = useContainerProps;
 exports.useDebounce = useDebounce;
 exports.useDevicePixelRatio = useDevicePixelRatio;
+exports.useIsFirstRender = useIsFirstRender;
 exports.useLocalStorage = useLocalStorage;
+exports.useLocalStorageReducer = useLocalStorageReducer;
 exports.useModal = useModal;
 exports.usePopoverContext = usePopoverContext;
 exports.usePrompt = usePrompt;

package/index.js

@@ -1,12 +1,13 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { tw, tws, twx } from '@trackunit/tailwind-styled-components';
 import * as React from 'react';
-import React__default, { useState, useMemo, createContext, useContext, forwardRef, isValidElement, cloneElement, useCallback, useEffect, Children, useRef, memo } from 'react';
+import React__default, { useState, useMemo, createContext, useContext, forwardRef, isValidElement, cloneElement, useCallback, useEffect, Children, useRef, useReducer, memo } from 'react';
 import { HeroIconsArray, heroIconLookup, TrackunitSolidIconsArray, TrackunitOutlineIconsArray, trackunitIconLookup } from '@trackunit/ui-icons';
 import { useMeasure, useCopyToClipboard } from 'react-use';
 import { DayPicker as DayPicker$1 } from 'react-day-picker';
 import { enGB, enUS, da, de, cs, nl, fr, fi, hu, it, nb, pl, pt, ru, ro, es, sv, ja, th } from 'date-fns/locale';
 import { useFloating, autoUpdate, offset, flip, shift, size, useClick, useDismiss, useHover, useRole, useInteractions, useMergeRefs, FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
+import { isEqual } from 'lodash';
 import usePortal from 'react-useportal';
 import { UNSAFE_NavigationContext } from 'react-router-dom';
 import { HelmetProvider, Helmet } from 'react-helmet-async';
@@ -1208,6 +1209,20 @@ function getDevicePixelRatio(options) {
     return rounded;
 }
 
+/**
+ * Differentiate between the first and subsequent renders.
+ *
+ * @returns {boolean} Returns true if it is the first render, false otherwise.
+ */
+const useIsFirstRender = () => {
+    const renderRef = useRef(true);
+    if (renderRef.current === true) {
+        renderRef.current = false;
+        return true;
+    }
+    return renderRef.current;
+};
+
 /**
  * The useLocalStorage hook works like useState, but saves to localstorage.
  *
@@ -1251,6 +1266,50 @@ function tryParse(value) {
     }
 }
 
+/**
+ * Given any value this hook will return the previous value whenever the current value changes
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function usePrevious(value) {
+    const ref = useRef();
+    useEffect(() => {
+        ref.current = value;
+    });
+    return ref.current;
+}
+/**
+ * Wraps a normal useReducer with local storage functionality
+ *
+ * @param {string} key - The key the state is saved with in local storage.
+ */
+const useLocalStorageReducer = (key, reducer, initialState
+//return must be explicitly typed atm for some reason
+) => {
+    const init = () => {
+        const stringState = localStorage.getItem(key);
+        if (stringState) {
+            try {
+                return JSON.parse(stringState);
+            }
+            catch (error) {
+                return initialState;
+            }
+        }
+        else {
+            return initialState;
+        }
+    };
+    const [state, dispatch] = useReducer(reducer, initialState, init);
+    const prevState = usePrevious(state);
+    useEffect(() => {
+        if (!isEqual(prevState, state)) {
+            const stringifiedState = JSON.stringify(state);
+            localStorage.setItem(key, stringifiedState);
+        }
+    }, [prevState, state, key]);
+    return [state, dispatch];
+};
+
 /**
  * Custom hook to handle window resize events and provide the current window size.
  *
@@ -1335,15 +1394,15 @@ const MoreMenu = ({ className, dataTestId, menuPlacement, iconProps = {
     circular: true,
     square: true,
     color: "tertiary",
-}, children, }) => {
+}, customButton, children, }) => {
     const [actionMenuIsOpen, setActionMenuIsOpen] = useState(false);
     const actionMenuRef = useRef(null);
     useClickOutside(actionMenuRef, () => {
         setActionMenuIsOpen(false);
     });
-    return (jsx(Root$3, Object.assign({ ref: actionMenuRef, className: className, "data-testid": dataTestId }, { children: jsxs(Popover, Object.assign({ placement: menuPlacement }, { children: [jsx(PopoverTrigger, { children: jsx(IconButton, Object.assign({}, iconButtonProps, { icon: iconProps.name ? jsx(Icon, Object.assign({}, iconProps, { name: iconProps.name })) : null, onClick: () => {
+    return (jsx(Root$3, Object.assign({ ref: actionMenuRef, className: className, "data-testid": dataTestId }, { children: jsxs(Popover, Object.assign({ placement: menuPlacement }, { children: [jsx(PopoverTrigger, { children: customButton !== null && customButton !== void 0 ? customButton : (jsx(IconButton, Object.assign({}, iconButtonProps, { icon: iconProps.name ? jsx(Icon, Object.assign({}, iconProps, { name: iconProps.name })) : null, onClick: () => {
                             setActionMenuIsOpen(!actionMenuIsOpen);
-                        } })) }), jsx(PopoverContent, { children: close => (typeof children === "function" ? children(close) : children) })] })) })));
+                        } }))) }), jsx(PopoverContent, { children: close => (typeof children === "function" ? children(close) : children) })] })) })));
 };
 const Root$3 = tw.div `
   tu-more-menu
@@ -2155,4 +2214,4 @@ const Layout = tw.div `
   tu-layout-TwoColumnLayout
 `;
 
-export { Alert, Badge, Button, Card, CardBody, CardFooter, CardHeader, Collapse, ContentGridArea, CopyableText, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, Drawer, ExternalLink, FilterListMapLayout, FullWidthRepeatingLayout, GridArea, Heading$1 as Heading, Icon, IconButton, Indicator, IntrinsicallyResponsiveGrid, MenuItem, MenuList, MinTopFullContentLayout, Modal, ModalBackdrop, MoreMenu, NavGridArea, PageHeader, Pagination, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text$1 as Text, Timeline, TimelineElement, Tip, TitleGridArea, TitleNavContentLayout, Tooltip, TwoColumnLayout, ValueBar, docs, getDevicePixelRatio, getValueBarColorByValue, useClickOutside, useContainerProps, useDebounce, useDevicePixelRatio, useLocalStorage, useModal, usePopoverContext, usePrompt, useResize, useTimeout };
+export { Alert, Badge, Button, Card, CardBody, CardFooter, CardHeader, Collapse, ContentGridArea, CopyableText, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, Drawer, ExternalLink, FilterListMapLayout, FullWidthRepeatingLayout, GridArea, Heading$1 as Heading, Icon, IconButton, Indicator, IntrinsicallyResponsiveGrid, MenuItem, MenuList, MinTopFullContentLayout, Modal, ModalBackdrop, MoreMenu, NavGridArea, PageHeader, Pagination, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text$1 as Text, Timeline, TimelineElement, Tip, TitleGridArea, TitleNavContentLayout, Tooltip, TwoColumnLayout, ValueBar, docs, getDevicePixelRatio, getValueBarColorByValue, useClickOutside, useContainerProps, useDebounce, useDevicePixelRatio, useIsFirstRender, useLocalStorage, useLocalStorageReducer, useModal, usePopoverContext, usePrompt, useResize, useTimeout };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.100",
+  "version": "0.1.102",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {
@@ -10,6 +10,7 @@
     "@trackunit/ui-design-tokens": "0.0.66",
     "@trackunit/ui-icons": "0.0.64",
     "date-fns": "2.29.3",
+    "lodash": "4.17.21",
     "react": "18.2.0",
     "react-day-picker": "8.7.1",
     "react-dom": "18.2.0",

package/src/components/Menu/MoreMenu/MoreMenu.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { ReactNode } from "react";
 import { CommonProps } from "../../../common/CommonProps";
 import { IconButtonProps } from "../../buttons";
 import { IconProps } from "../../Icon/Icon";
@@ -11,6 +11,7 @@ export interface MoreMenuProps extends CommonProps {
     menuPlacement?: PopoverPlacement;
     iconProps?: FilteredIconProps;
     iconButtonProps?: FilteredIconButtonProps;
+    customButton?: ReactNode;
 }
 /**
  * A kebab menu component.
@@ -19,5 +20,5 @@ export interface MoreMenuProps extends CommonProps {
  * @param {MoreMenuProps} props - The props for the MoreMenu component
  * @returns {JSX.Element} MoreMenu component
  */
-export declare const MoreMenu: ({ className, dataTestId, menuPlacement, iconProps, iconButtonProps, children, }: MoreMenuProps) => JSX.Element;
+export declare const MoreMenu: ({ className, dataTestId, menuPlacement, iconProps, iconButtonProps, customButton, children, }: MoreMenuProps) => JSX.Element;
 export {};

package/src/hooks/index.d.ts

@@ -1,6 +1,8 @@
 export * from "./useClickOutside";
 export * from "./useDebounce";
 export * from "./useDevicePixelRatio";
+export * from "./useIsFirstRender";
 export * from "./useLocalStorage";
+export * from "./useLocalStorageReducer";
 export * from "./useResize";
 export * from "./useTimeout";

package/src/hooks/useIsFirstRender.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Differentiate between the first and subsequent renders.
+ *
+ * @returns {boolean} Returns true if it is the first render, false otherwise.
+ */
+export declare const useIsFirstRender: () => boolean;

package/src/hooks/useLocalStorageReducer.d.ts

@@ -0,0 +1,7 @@
+import { Dispatch } from "react";
+/**
+ * Wraps a normal useReducer with local storage functionality
+ *
+ * @param {string} key - The key the state is saved with in local storage.
+ */
+export declare const useLocalStorageReducer: <State, Action>(key: string, reducer: (state: State, action: Action) => State, initialState: State) => [State, Dispatch<Action>];