tw-react-components 0.0.142 → 0.0.145

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;
@@ -2053,7 +2055,11 @@ const Navbar = ({ className, sidebarTriggerClassName, leftSlot, rightSlot, }) =>
 
 const Layout = (_a) => {
     var { children, className } = _a, _b = _a.sidebarProps, { basePath, header, items, footer } = _b, sidebarProps = __rest(_b, ["basePath", "header", "items", "footer"]), { navbarProps } = _a;
-    return (jsxRuntime.jsxs(Flex, { className: "h-screen w-screen gap-0 text-black dark:bg-slate-900 dark:text-white", children: [jsxRuntime.jsxs(Sidebar, Object.assign({ collapsible: "icon" }, sidebarProps, { children: [header && (jsxRuntime.jsx(Sidebar.Header, { children: jsxRuntime.jsx(Sidebar.Menu, { children: jsxRuntime.jsx(Sidebar.MenuItem, { children: header }) }) })), jsxRuntime.jsx(Sidebar.Content, { className: "gap-0", children: items.map((item, index) => item.type === 'item' ? (jsxRuntime.jsx(Sidebar.Group, { children: jsxRuntime.jsx(Sidebar.Menu, { children: jsxRuntime.jsx(RenderSideBarItem, Object.assign({ basePath: basePath }, item)) }) }, index)) : (jsxRuntime.jsxs(Sidebar.Group, { children: [item.title && jsxRuntime.jsx(Sidebar.GroupLabel, { children: item.title }), jsxRuntime.jsx(Sidebar.GroupContent, { children: jsxRuntime.jsx(Sidebar.Menu, { children: item.items.map((item, index) => (jsxRuntime.jsx(RenderSideBarItem, Object.assign({ basePath: basePath }, item), index))) }) })] }, index))) }), footer && (jsxRuntime.jsx(Sidebar.Footer, { children: jsxRuntime.jsx(Sidebar.Menu, { children: jsxRuntime.jsx(Sidebar.MenuItem, { children: footer }) }) })), jsxRuntime.jsx(Sidebar.Rail, {})] })), jsxRuntime.jsxs(Flex, { className: "gap-0 overflow-hidden", direction: "column", fullHeight: true, fullWidth: true, children: [navbarProps && jsxRuntime.jsx(Navbar, Object.assign({}, navbarProps)), jsxRuntime.jsx(Flex, { className: cn('overflow-hidden p-3', className), direction: "column", fullWidth: true, fullHeight: true, children: children })] })] }));
+    return (jsxRuntime.jsxs(Flex, { className: "h-screen w-screen gap-0 text-black dark:bg-slate-900 dark:text-white", children: [jsxRuntime.jsxs(Sidebar, Object.assign({ collapsible: "icon" }, sidebarProps, { children: [header && (jsxRuntime.jsx(Sidebar.Header, { children: jsxRuntime.jsx(Sidebar.Menu, { children: jsxRuntime.jsx(Sidebar.MenuItem, { children: header }) }) })), jsxRuntime.jsx(Sidebar.Content, { className: "gap-0", children: items
+                            .filter((item) => !item.hidden)
+                            .map((item, index) => item.type === 'item' ? (jsxRuntime.jsx(Sidebar.Group, { children: jsxRuntime.jsx(Sidebar.Menu, { children: jsxRuntime.jsx(RenderSideBarItem, Object.assign({ basePath: basePath }, item)) }) }, index)) : (jsxRuntime.jsxs(Sidebar.Group, { children: [item.title && jsxRuntime.jsx(Sidebar.GroupLabel, { children: item.title }), jsxRuntime.jsx(Sidebar.GroupContent, { children: jsxRuntime.jsx(Sidebar.Menu, { children: item.items
+                                            .filter((subItem) => !subItem.hidden)
+                                            .map((subItem, index) => (jsxRuntime.jsx(RenderSideBarItem, Object.assign({ basePath: basePath }, subItem), index))) }) })] }, index))) }), footer && (jsxRuntime.jsx(Sidebar.Footer, { children: jsxRuntime.jsx(Sidebar.Menu, { children: jsxRuntime.jsx(Sidebar.MenuItem, { children: footer }) }) })), jsxRuntime.jsx(Sidebar.Rail, {})] })), jsxRuntime.jsxs(Flex, { className: "gap-0 overflow-hidden", direction: "column", fullHeight: true, fullWidth: true, children: [navbarProps && jsxRuntime.jsx(Navbar, Object.assign({}, navbarProps)), jsxRuntime.jsx(Flex, { className: cn('overflow-hidden p-3', className), direction: "column", fullWidth: true, fullHeight: true, children: children })] })] }));
 };
 const RenderSideBarItem = ({ basePath = '/', pathname, title, Icon, items, }) => {
     const location = reactRouterDom.useLocation();
@@ -2062,7 +2068,9 @@ const RenderSideBarItem = ({ basePath = '/', pathname, title, Icon, items, }) =>
     return (jsxRuntime.jsxs(Sidebar.MenuItem, { children: [jsxRuntime.jsx(Sidebar.MenuButton, { asChild: true, tooltip: title, isActive: isLinkStartsWithPathname(currentPath, pathname) &&
                     (!items ||
                         (!open &&
-                            items.some((item) => isLinkStartsWithPathname(currentPath, `${pathname}/${item.pathname}`)))), children: jsxRuntime.jsxs(reactRouterDom.Link, { to: pathname, className: "font-medium", children: [Icon && jsxRuntime.jsx(Icon, {}), title] }) }), items && (jsxRuntime.jsx(Sidebar.MenuSub, { children: items.map((subItem, index) => (jsxRuntime.jsx(Sidebar.MenuSubItem, { children: jsxRuntime.jsx(Sidebar.MenuSubButton, { asChild: true, isActive: isLinkStartsWithPathname(currentPath, `${pathname}/${subItem.pathname}`), children: jsxRuntime.jsx(reactRouterDom.Link, { to: `${pathname}/${subItem.pathname}`, children: subItem.title }) }) }, index))) }))] }));
+                            items.some((item) => isLinkStartsWithPathname(currentPath, `${pathname}/${item.pathname}`)))), children: jsxRuntime.jsxs(reactRouterDom.Link, { to: pathname, className: "font-medium", children: [Icon && jsxRuntime.jsx(Icon, {}), title] }) }), items && (jsxRuntime.jsx(Sidebar.MenuSub, { children: items
+                    .filter((subItem) => !subItem.hidden)
+                    .map((subItem, index) => (jsxRuntime.jsx(Sidebar.MenuSubItem, { children: jsxRuntime.jsx(Sidebar.MenuSubButton, { asChild: true, isActive: isLinkStartsWithPathname(currentPath, `${pathname}/${subItem.pathname}`), children: jsxRuntime.jsx(reactRouterDom.Link, { to: `${pathname}/${subItem.pathname}`, children: subItem.title }) }) }, index))) }))] }));
 };
 function isLinkStartsWithPathname(link, pathname) {
     return pathname === '' ? link === pathname : link.startsWith(pathname);
@@ -2112,8 +2120,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 +2150,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 +2208,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;
@@ -2026,7 +2028,11 @@ const Navbar = ({ className, sidebarTriggerClassName, leftSlot, rightSlot, }) =>
 
 const Layout = (_a) => {
     var { children, className } = _a, _b = _a.sidebarProps, { basePath, header, items, footer } = _b, sidebarProps = __rest(_b, ["basePath", "header", "items", "footer"]), { navbarProps } = _a;
-    return (jsxs(Flex, { className: "h-screen w-screen gap-0 text-black dark:bg-slate-900 dark:text-white", children: [jsxs(Sidebar, Object.assign({ collapsible: "icon" }, sidebarProps, { children: [header && (jsx(Sidebar.Header, { children: jsx(Sidebar.Menu, { children: jsx(Sidebar.MenuItem, { children: header }) }) })), jsx(Sidebar.Content, { className: "gap-0", children: items.map((item, index) => item.type === 'item' ? (jsx(Sidebar.Group, { children: jsx(Sidebar.Menu, { children: jsx(RenderSideBarItem, Object.assign({ basePath: basePath }, item)) }) }, index)) : (jsxs(Sidebar.Group, { children: [item.title && jsx(Sidebar.GroupLabel, { children: item.title }), jsx(Sidebar.GroupContent, { children: jsx(Sidebar.Menu, { children: item.items.map((item, index) => (jsx(RenderSideBarItem, Object.assign({ basePath: basePath }, item), index))) }) })] }, index))) }), footer && (jsx(Sidebar.Footer, { children: jsx(Sidebar.Menu, { children: jsx(Sidebar.MenuItem, { children: footer }) }) })), jsx(Sidebar.Rail, {})] })), jsxs(Flex, { className: "gap-0 overflow-hidden", direction: "column", fullHeight: true, fullWidth: true, children: [navbarProps && jsx(Navbar, Object.assign({}, navbarProps)), jsx(Flex, { className: cn('overflow-hidden p-3', className), direction: "column", fullWidth: true, fullHeight: true, children: children })] })] }));
+    return (jsxs(Flex, { className: "h-screen w-screen gap-0 text-black dark:bg-slate-900 dark:text-white", children: [jsxs(Sidebar, Object.assign({ collapsible: "icon" }, sidebarProps, { children: [header && (jsx(Sidebar.Header, { children: jsx(Sidebar.Menu, { children: jsx(Sidebar.MenuItem, { children: header }) }) })), jsx(Sidebar.Content, { className: "gap-0", children: items
+                            .filter((item) => !item.hidden)
+                            .map((item, index) => item.type === 'item' ? (jsx(Sidebar.Group, { children: jsx(Sidebar.Menu, { children: jsx(RenderSideBarItem, Object.assign({ basePath: basePath }, item)) }) }, index)) : (jsxs(Sidebar.Group, { children: [item.title && jsx(Sidebar.GroupLabel, { children: item.title }), jsx(Sidebar.GroupContent, { children: jsx(Sidebar.Menu, { children: item.items
+                                            .filter((subItem) => !subItem.hidden)
+                                            .map((subItem, index) => (jsx(RenderSideBarItem, Object.assign({ basePath: basePath }, subItem), index))) }) })] }, index))) }), footer && (jsx(Sidebar.Footer, { children: jsx(Sidebar.Menu, { children: jsx(Sidebar.MenuItem, { children: footer }) }) })), jsx(Sidebar.Rail, {})] })), jsxs(Flex, { className: "gap-0 overflow-hidden", direction: "column", fullHeight: true, fullWidth: true, children: [navbarProps && jsx(Navbar, Object.assign({}, navbarProps)), jsx(Flex, { className: cn('overflow-hidden p-3', className), direction: "column", fullWidth: true, fullHeight: true, children: children })] })] }));
 };
 const RenderSideBarItem = ({ basePath = '/', pathname, title, Icon, items, }) => {
     const location = useLocation();
@@ -2035,7 +2041,9 @@ const RenderSideBarItem = ({ basePath = '/', pathname, title, Icon, items, }) =>
     return (jsxs(Sidebar.MenuItem, { children: [jsx(Sidebar.MenuButton, { asChild: true, tooltip: title, isActive: isLinkStartsWithPathname(currentPath, pathname) &&
                     (!items ||
                         (!open &&
-                            items.some((item) => isLinkStartsWithPathname(currentPath, `${pathname}/${item.pathname}`)))), children: jsxs(Link, { to: pathname, className: "font-medium", children: [Icon && jsx(Icon, {}), title] }) }), items && (jsx(Sidebar.MenuSub, { children: items.map((subItem, index) => (jsx(Sidebar.MenuSubItem, { children: jsx(Sidebar.MenuSubButton, { asChild: true, isActive: isLinkStartsWithPathname(currentPath, `${pathname}/${subItem.pathname}`), children: jsx(Link, { to: `${pathname}/${subItem.pathname}`, children: subItem.title }) }) }, index))) }))] }));
+                            items.some((item) => isLinkStartsWithPathname(currentPath, `${pathname}/${item.pathname}`)))), children: jsxs(Link, { to: pathname, className: "font-medium", children: [Icon && jsx(Icon, {}), title] }) }), items && (jsx(Sidebar.MenuSub, { children: items
+                    .filter((subItem) => !subItem.hidden)
+                    .map((subItem, index) => (jsx(Sidebar.MenuSubItem, { children: jsx(Sidebar.MenuSubButton, { asChild: true, isActive: isLinkStartsWithPathname(currentPath, `${pathname}/${subItem.pathname}`), children: jsx(Link, { to: `${pathname}/${subItem.pathname}`, children: subItem.title }) }) }, index))) }))] }));
 };
 function isLinkStartsWithPathname(link, pathname) {
     return pathname === '' ? link === pathname : link.startsWith(pathname);
@@ -2085,8 +2093,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 +2123,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 +2149,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.145",
   "license": "MIT",
   "homepage": "https://bacali95.github.io/tw-react-components",
   "author": {

package/src/components/Layout/index.d.ts

@@ -17,6 +17,7 @@ export type SidebarProps = ComponentProps<typeof Sidebar> & {
     } & SidebarItem) | {
         type: 'group';
         title?: string;
+        hidden?: boolean;
         items: SidebarItem[];
     })[];
     footer?: ReactNode;

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;