tw-react-components 0.0.142 → 0.0.144

package/index.cjs.js

@@ -155,11 +155,13 @@ function mergeRefs(refs) {
     };
 }
 
-function resolveTargetObject(payload, fieldChain) {
+function resolveTargetObject(payload, fieldChain, defaultValue) {
     if (!fieldChain.length) {
-        return payload;
+        return payload === null ? payload : payload || defaultValue;
     }
     if (typeof payload !== 'object' || !payload) {
+        if (defaultValue)
+            return defaultValue;
         throw new Error(`Could not resolve field ${fieldChain[0]} because payload is not an object!`);
     }
     const [key, ...rest] = fieldChain;
@@ -171,9 +173,9 @@ function resolveTargetObject(payload, fieldChain) {
         if (index < 0 || index >= payload.length) {
             throw new Error('Index out of payload boundaries!');
         }
-        return resolveTargetObject(payload[index], rest);
+        return resolveTargetObject(payload[index], rest, defaultValue);
     }
-    return resolveTargetObject(payload[key], rest);
+    return resolveTargetObject(payload[key], rest, defaultValue);
 }
 
 const variantClassNames = {
@@ -1336,7 +1338,7 @@ const SelectInput = react.forwardRef((_a, ref) => {
             }, children: jsxRuntime.jsx("span", { children: renderItem(option, !!selectedMap[option.id]) }) }));
     }, [ItemComponent, handleOnSelect, multiple, renderItem, selectedMap]);
     return (jsxRuntime.jsxs(DropdownMenu, { open: open, onOpenChange: setOpen, children: [jsxRuntime.jsx(DropdownMenu.Trigger, { className: cn('w-full', className), children: jsxRuntime.jsx(TextInput, Object.assign({ className: "[&>div>*]:cursor-pointer", inputClassName: "text-left" }, props, { value: text !== null && text !== void 0 ? text : '', clearable: clearable && !!selectedItems.length, onClear: handleOnClear, suffixIcon: lucideReact.ChevronDownIcon, onSuffixIconClick: () => setOpen((open) => !open), ref: ref, readOnly: true })) }), jsxRuntime.jsxs(DropdownMenu.Content, { className: "flex max-h-80 w-[calc(var(--radix-popper-anchor-width))] flex-col overflow-hidden", children: [search && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(TextInput, { value: searchValue, placeholder: "Search...", size: props.size, onChange: handleOnSearchValueChange, clearable: !!searchValue.length, onClear: clearSearchValue }), jsxRuntime.jsx(DropdownMenu.Separator, { className: "w-full" })] })), filteredItems.length === 0 &&
-                        (allowAddition && searchValue ? (jsxRuntime.jsxs("button", { className: "rounded bg-slate-100 text-center hover:bg-slate-200 dark:bg-slate-900/30 dark:hover:bg-slate-700/30", onClick: handleOnAddItemClicked, children: ["Add '", searchValue, "'"] })) : (jsxRuntime.jsx("div", { className: "text-center text-slate-500", children: "No items." }))), jsxRuntime.jsx(GroupComponent, { className: "flex flex-col gap-1 overflow-auto", value: !multiple && selectedItems.length ? String(selectedItems[0].id) : undefined, children: filteredItems.map((item, index) => item.group ? (jsxRuntime.jsxs(Flex, { className: "gap-1", direction: "column", fullWidth: true, children: [jsxRuntime.jsx(DropdownMenu.Label, { className: "sticky top-0 z-[51] w-full rounded-md border bg-white py-1 dark:bg-slate-900", children: item.label }), item.items.map((subItem) => (jsxRuntime.jsx(RenderOption, Object.assign({}, subItem), subItem.id))), index < filteredItems.length - 1 && (jsxRuntime.jsx("div", { className: "mb-1 h-px w-full bg-slate-200 dark:bg-slate-700" }))] }, item.id)) : (jsxRuntime.jsx(RenderOption, Object.assign({}, item), item.id))) })] })] }));
+                        (allowAddition && searchValue ? (jsxRuntime.jsxs("button", { className: "rounded bg-slate-100 py-1.5 text-center hover:bg-slate-200 dark:bg-slate-900/30 dark:hover:bg-slate-700/30", onClick: handleOnAddItemClicked, children: ["Add '", searchValue, "'"] })) : (jsxRuntime.jsx("div", { className: "py-1.5 text-center text-slate-500", children: "No items." }))), jsxRuntime.jsx(GroupComponent, { className: "flex flex-col gap-1 overflow-auto", value: !multiple && selectedItems.length ? String(selectedItems[0].id) : undefined, children: filteredItems.map((item, index) => item.group ? (jsxRuntime.jsxs(Flex, { className: "gap-1", direction: "column", fullWidth: true, children: [jsxRuntime.jsx(DropdownMenu.Label, { className: "sticky top-0 z-[51] w-full rounded-md border bg-white py-1 dark:bg-slate-900", children: item.label }), item.items.map((subItem) => (jsxRuntime.jsx(RenderOption, Object.assign({}, subItem), subItem.id))), index < filteredItems.length - 1 && (jsxRuntime.jsx("div", { className: "mb-1 h-px w-full bg-slate-200 dark:bg-slate-700" }))] }, item.id)) : (jsxRuntime.jsx(RenderOption, Object.assign({}, item), item.id))) })] })] }));
 });
 
 const FileInput = react.forwardRef((_a, ref) => {
@@ -1522,7 +1524,7 @@ const Table = Object.assign($Table, {
 
 const possiblePageSize = [5, 10, 25, 50, 100, 500, 1000];
 function defaultRender(item, field) {
-    return resolveTargetObject(item, field.split('.'));
+    return resolveTargetObject(item, field.split('.'), '-');
 }
 function DataTable({ className, columns, rows, sorting, pagination, actions = [], isLoading, rowExtraContent, noDataMessage, onRowClick, rowClassName, }) {
     var _a;
@@ -2112,8 +2114,11 @@ const LayoutContext = react.createContext(undefined);
 const THEME_MEDIA_QUERY = '(prefers-color-scheme: dark)';
 const THEME_COOKIE_NAME = 'theme:state';
 const THEME_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+const SHOW_IDS_COOKIE_NAME = 'show-ids:state';
+const SHOW_IDS_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 const LayoutContextProvider = ({ children }) => {
     const [theme, _setTheme] = react.useState(getValueFromCookie(THEME_COOKIE_NAME, 'system'));
+    const [showIds, _setShowIds] = react.useState(getValueFromCookie(SHOW_IDS_COOKIE_NAME, false));
     const [resolvedTheme, setResolvedTheme] = react.useState(() => theme === 'system' ? getSystemTheme() : theme);
     react.useEffect(() => {
         if (resolvedTheme === 'dark') {
@@ -2139,7 +2144,13 @@ const LayoutContextProvider = ({ children }) => {
         // This sets the cookie to keep the theme state.
         document.cookie = `${THEME_COOKIE_NAME}=${theme}; path=/; max-age=${THEME_COOKIE_MAX_AGE}`;
     };
-    return (jsxRuntime.jsx(LayoutContext.Provider, { value: { theme, resolvedTheme, setTheme }, children: children }));
+    const toggleShowIds = () => _setShowIds((showIds) => {
+        const newValue = !showIds;
+        // This sets the cookie to keep the showIds state.
+        document.cookie = `${SHOW_IDS_COOKIE_NAME}=${newValue}; path=/; max-age=${SHOW_IDS_COOKIE_MAX_AGE}`;
+        return newValue;
+    });
+    return (jsxRuntime.jsx(LayoutContext.Provider, { value: { theme, resolvedTheme, setTheme, showIds, toggleShowIds }, children: children }));
 };
 function useLayoutContext() {
     const context = react.useContext(LayoutContext);
@@ -2191,6 +2202,8 @@ exports.Pagination = Pagination;
 exports.PasswordInput = PasswordInput;
 exports.PdfViewerDialog = PdfViewerDialog;
 exports.Popover = Popover;
+exports.SHOW_IDS_COOKIE_MAX_AGE = SHOW_IDS_COOKIE_MAX_AGE;
+exports.SHOW_IDS_COOKIE_NAME = SHOW_IDS_COOKIE_NAME;
 exports.SIDEBAR_COOKIE_MAX_AGE = SIDEBAR_COOKIE_MAX_AGE;
 exports.SIDEBAR_COOKIE_NAME = SIDEBAR_COOKIE_NAME;
 exports.SIDEBAR_KEYBOARD_SHORTCUT = SIDEBAR_KEYBOARD_SHORTCUT;

package/index.esm.js

@@ -128,11 +128,13 @@ function mergeRefs(refs) {
     };
 }
 
-function resolveTargetObject(payload, fieldChain) {
+function resolveTargetObject(payload, fieldChain, defaultValue) {
     if (!fieldChain.length) {
-        return payload;
+        return payload === null ? payload : payload || defaultValue;
     }
     if (typeof payload !== 'object' || !payload) {
+        if (defaultValue)
+            return defaultValue;
         throw new Error(`Could not resolve field ${fieldChain[0]} because payload is not an object!`);
     }
     const [key, ...rest] = fieldChain;
@@ -144,9 +146,9 @@ function resolveTargetObject(payload, fieldChain) {
         if (index < 0 || index >= payload.length) {
             throw new Error('Index out of payload boundaries!');
         }
-        return resolveTargetObject(payload[index], rest);
+        return resolveTargetObject(payload[index], rest, defaultValue);
     }
-    return resolveTargetObject(payload[key], rest);
+    return resolveTargetObject(payload[key], rest, defaultValue);
 }
 
 const variantClassNames = {
@@ -1309,7 +1311,7 @@ const SelectInput = forwardRef((_a, ref) => {
             }, children: jsx("span", { children: renderItem(option, !!selectedMap[option.id]) }) }));
     }, [ItemComponent, handleOnSelect, multiple, renderItem, selectedMap]);
     return (jsxs(DropdownMenu, { open: open, onOpenChange: setOpen, children: [jsx(DropdownMenu.Trigger, { className: cn('w-full', className), children: jsx(TextInput, Object.assign({ className: "[&>div>*]:cursor-pointer", inputClassName: "text-left" }, props, { value: text !== null && text !== void 0 ? text : '', clearable: clearable && !!selectedItems.length, onClear: handleOnClear, suffixIcon: ChevronDownIcon, onSuffixIconClick: () => setOpen((open) => !open), ref: ref, readOnly: true })) }), jsxs(DropdownMenu.Content, { className: "flex max-h-80 w-[calc(var(--radix-popper-anchor-width))] flex-col overflow-hidden", children: [search && (jsxs(Fragment, { children: [jsx(TextInput, { value: searchValue, placeholder: "Search...", size: props.size, onChange: handleOnSearchValueChange, clearable: !!searchValue.length, onClear: clearSearchValue }), jsx(DropdownMenu.Separator, { className: "w-full" })] })), filteredItems.length === 0 &&
-                        (allowAddition && searchValue ? (jsxs("button", { className: "rounded bg-slate-100 text-center hover:bg-slate-200 dark:bg-slate-900/30 dark:hover:bg-slate-700/30", onClick: handleOnAddItemClicked, children: ["Add '", searchValue, "'"] })) : (jsx("div", { className: "text-center text-slate-500", children: "No items." }))), jsx(GroupComponent, { className: "flex flex-col gap-1 overflow-auto", value: !multiple && selectedItems.length ? String(selectedItems[0].id) : undefined, children: filteredItems.map((item, index) => item.group ? (jsxs(Flex, { className: "gap-1", direction: "column", fullWidth: true, children: [jsx(DropdownMenu.Label, { className: "sticky top-0 z-[51] w-full rounded-md border bg-white py-1 dark:bg-slate-900", children: item.label }), item.items.map((subItem) => (jsx(RenderOption, Object.assign({}, subItem), subItem.id))), index < filteredItems.length - 1 && (jsx("div", { className: "mb-1 h-px w-full bg-slate-200 dark:bg-slate-700" }))] }, item.id)) : (jsx(RenderOption, Object.assign({}, item), item.id))) })] })] }));
+                        (allowAddition && searchValue ? (jsxs("button", { className: "rounded bg-slate-100 py-1.5 text-center hover:bg-slate-200 dark:bg-slate-900/30 dark:hover:bg-slate-700/30", onClick: handleOnAddItemClicked, children: ["Add '", searchValue, "'"] })) : (jsx("div", { className: "py-1.5 text-center text-slate-500", children: "No items." }))), jsx(GroupComponent, { className: "flex flex-col gap-1 overflow-auto", value: !multiple && selectedItems.length ? String(selectedItems[0].id) : undefined, children: filteredItems.map((item, index) => item.group ? (jsxs(Flex, { className: "gap-1", direction: "column", fullWidth: true, children: [jsx(DropdownMenu.Label, { className: "sticky top-0 z-[51] w-full rounded-md border bg-white py-1 dark:bg-slate-900", children: item.label }), item.items.map((subItem) => (jsx(RenderOption, Object.assign({}, subItem), subItem.id))), index < filteredItems.length - 1 && (jsx("div", { className: "mb-1 h-px w-full bg-slate-200 dark:bg-slate-700" }))] }, item.id)) : (jsx(RenderOption, Object.assign({}, item), item.id))) })] })] }));
 });
 
 const FileInput = forwardRef((_a, ref) => {
@@ -1495,7 +1497,7 @@ const Table = Object.assign($Table, {
 
 const possiblePageSize = [5, 10, 25, 50, 100, 500, 1000];
 function defaultRender(item, field) {
-    return resolveTargetObject(item, field.split('.'));
+    return resolveTargetObject(item, field.split('.'), '-');
 }
 function DataTable({ className, columns, rows, sorting, pagination, actions = [], isLoading, rowExtraContent, noDataMessage, onRowClick, rowClassName, }) {
     var _a;
@@ -2085,8 +2087,11 @@ const LayoutContext = createContext(undefined);
 const THEME_MEDIA_QUERY = '(prefers-color-scheme: dark)';
 const THEME_COOKIE_NAME = 'theme:state';
 const THEME_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+const SHOW_IDS_COOKIE_NAME = 'show-ids:state';
+const SHOW_IDS_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 const LayoutContextProvider = ({ children }) => {
     const [theme, _setTheme] = useState(getValueFromCookie(THEME_COOKIE_NAME, 'system'));
+    const [showIds, _setShowIds] = useState(getValueFromCookie(SHOW_IDS_COOKIE_NAME, false));
     const [resolvedTheme, setResolvedTheme] = useState(() => theme === 'system' ? getSystemTheme() : theme);
     useEffect(() => {
         if (resolvedTheme === 'dark') {
@@ -2112,7 +2117,13 @@ const LayoutContextProvider = ({ children }) => {
         // This sets the cookie to keep the theme state.
         document.cookie = `${THEME_COOKIE_NAME}=${theme}; path=/; max-age=${THEME_COOKIE_MAX_AGE}`;
     };
-    return (jsx(LayoutContext.Provider, { value: { theme, resolvedTheme, setTheme }, children: children }));
+    const toggleShowIds = () => _setShowIds((showIds) => {
+        const newValue = !showIds;
+        // This sets the cookie to keep the showIds state.
+        document.cookie = `${SHOW_IDS_COOKIE_NAME}=${newValue}; path=/; max-age=${SHOW_IDS_COOKIE_MAX_AGE}`;
+        return newValue;
+    });
+    return (jsx(LayoutContext.Provider, { value: { theme, resolvedTheme, setTheme, showIds, toggleShowIds }, children: children }));
 };
 function useLayoutContext() {
     const context = useContext(LayoutContext);
@@ -2132,4 +2143,4 @@ const ThemeSelector = ({ className }) => {
     return (jsxs(DropdownMenu, { children: [jsx(DropdownMenu.Trigger, { asChild: true, children: jsx(Button, { prefixIcon: resolvedTheme === 'dark' ? MoonIcon : SunIcon, className: className, variant: "text" }) }), jsxs(DropdownMenu.Content, { children: [jsxs(DropdownMenu.Item, { onClick: () => setTheme('light'), children: [jsx(DropdownMenu.Icon, { icon: SunIcon }), "Light"] }), jsxs(DropdownMenu.Item, { onClick: () => setTheme('dark'), children: [jsx(DropdownMenu.Icon, { icon: MoonIcon }), "Dark"] }), jsxs(DropdownMenu.Item, { onClick: () => setTheme('system'), children: [jsx(DropdownMenu.Icon, { icon: MonitorIcon }), "System"] })] })] }));
 };
 
-export { Badge, BasicInput, BasicInputExtension, Block, Button, Card, CheckboxInput, ConfirmDialog, DataTable, DateTimeInput, Dialog, DropdownMenu, EmailInput, FileInput, Flex, FormDialog, FormGroup, FormInputs, Hint, Label, Layout, LayoutContext, LayoutContextProvider, List, ListSorter, ListSorterDialog, Navbar, NumberInput, Pagination, PasswordInput, PdfViewerDialog, Popover, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON, SIDEBAR_WIDTH_MOBILE, SelectInput, Separator, Sheet, Sidebar, SidebarContext, SidebarContextProvider, Skeleton, Spinner, Switch, THEME_COOKIE_MAX_AGE, THEME_COOKIE_NAME, THEME_MEDIA_QUERY, Table, Tabs, TextInput, TextareaInput, ThemeSelector, Tooltip, cn, compareDates, generalComparator, getDisplayDate, getValueFromCookie, isEmpty, mergeRefs, resolveTargetObject, useDays, useIsMobile, useLayoutContext, useLongPress, useMonths, useOnSwipe, useOutsideClick, usePagination, useSidebar };
+export { Badge, BasicInput, BasicInputExtension, Block, Button, Card, CheckboxInput, ConfirmDialog, DataTable, DateTimeInput, Dialog, DropdownMenu, EmailInput, FileInput, Flex, FormDialog, FormGroup, FormInputs, Hint, Label, Layout, LayoutContext, LayoutContextProvider, List, ListSorter, ListSorterDialog, Navbar, NumberInput, Pagination, PasswordInput, PdfViewerDialog, Popover, SHOW_IDS_COOKIE_MAX_AGE, SHOW_IDS_COOKIE_NAME, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON, SIDEBAR_WIDTH_MOBILE, SelectInput, Separator, Sheet, Sidebar, SidebarContext, SidebarContextProvider, Skeleton, Spinner, Switch, THEME_COOKIE_MAX_AGE, THEME_COOKIE_NAME, THEME_MEDIA_QUERY, Table, Tabs, TextInput, TextareaInput, ThemeSelector, Tooltip, cn, compareDates, generalComparator, getDisplayDate, getValueFromCookie, isEmpty, mergeRefs, resolveTargetObject, useDays, useIsMobile, useLayoutContext, useLongPress, useMonths, useOnSwipe, useOutsideClick, usePagination, useSidebar };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tw-react-components",
   "description": "A set of React components build with TailwindCSS to make a nice dashboard.",
-  "version": "0.0.142",
+  "version": "0.0.144",
   "license": "MIT",
   "homepage": "https://bacali95.github.io/tw-react-components",
   "author": {

package/src/contexts/LayoutContext.d.ts

@@ -4,10 +4,14 @@ export type LayoutContext = {
     theme: ThemeState;
     resolvedTheme: Exclude<ThemeState, 'system'>;
     setTheme: (theme: ThemeState) => void;
+    showIds: boolean;
+    toggleShowIds: () => void;
 };
 export declare const LayoutContext: import("react").Context<LayoutContext | undefined>;
 export declare const THEME_MEDIA_QUERY = "(prefers-color-scheme: dark)";
 export declare const THEME_COOKIE_NAME = "theme:state";
 export declare const THEME_COOKIE_MAX_AGE: number;
+export declare const SHOW_IDS_COOKIE_NAME = "show-ids:state";
+export declare const SHOW_IDS_COOKIE_MAX_AGE: number;
 export declare const LayoutContextProvider: FC<PropsWithChildren>;
 export declare function useLayoutContext(): LayoutContext;

package/src/helpers/resolveTargetObject.d.ts

@@ -1 +1 @@
-export declare function resolveTargetObject(payload: any, fieldChain: string[]): any;
+export declare function resolveTargetObject(payload: any, fieldChain: string[], defaultValue?: any): any;