@applica-software-guru/react-admin 1.1.113 → 1.2.115

package/dist/themes/overrides/ListItemText.d.ts

@@ -0,0 +1,12 @@
+export default function ListItemIcon(): {
+    MuiListItemText: {
+        styleOverrides: {
+            root: {
+                '&.MuiListItemText-inset': {
+                    paddingLeft: number;
+                };
+            };
+        };
+    };
+};
+//# sourceMappingURL=ListItemText.d.ts.map

package/dist/themes/overrides/ListItemText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemText.d.ts","sourceRoot":"","sources":["../../../../src/themes/overrides/ListItemText.jsx"],"names":[],"mappings":"AAEA;;;;;;;;;;EAYC"}

package/dist/themes/overrides/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/themes/overrides/index.jsx"],"names":[],"mappings":"AAkDA,6DA+CC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/themes/overrides/index.jsx"],"names":[],"mappings":"AAmDA,6DAgDC"}

package/dist/types.d.ts

@@ -51,4 +51,8 @@ export type MenuItemProps = {
  * Indica come deve essere configurato il menu dell'applicazione.
  */
 export type MenuProps = MenuItemProps[];
+/**
+ * Consente di trasformare dei type rendendone opzionali solo alcune chiavi
+ */
+export type Optional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
 //# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB;;;;;OAKG;IACH,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,CAAC;IACpC;;;;;;;OAOG;IACH,GAAG,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC;IAClB;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,aAAa,EAAE,CAAC;CAC5B,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,aAAa,EAAE,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB;;;;;OAKG;IACH,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,CAAC;IACpC;;;;;;;OAOG;IACH,GAAG,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC;IAClB;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,aAAa,EAAE,CAAC;CAC5B,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,aAAa,EAAE,CAAC;AAExC;;GAEG;AACH,MAAM,MAAM,QAAQ,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,IAAI,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applica-software-guru/react-admin",
-  "version": "1.1.113",
+  "version": "1.2.115",
   "private": false,
   "repository": {
     "type": "git",

package/src/components/ra-forms/LongForm/BaseForm.tsx

@@ -0,0 +1,54 @@
+import _ from 'lodash';
+import { Form, FormProps } from 'react-admin';
+import { Grid } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { useThemeConfig } from '../../../hooks';
+
+type IBaseFormProps = FormProps & {
+  spacing?: number;
+};
+
+const StyledGrid = styled(Grid, {
+  name: 'ApplicaLongFormView',
+  slot: 'Root'
+})(({ theme }) => ({
+  '& .MuiToolbar-root': {
+    position: 'initial',
+    marginTop: theme.spacing(2),
+    marginLeft: `-${theme.spacing(3)}`,
+    marginRight: `-${theme.spacing(3)}`,
+    marginBottom: `-${theme.spacing(2)}`,
+    borderTop: `1px solid ${theme.palette.divider}`,
+    [theme.breakpoints.down('sm')]: {
+      position: 'initial !important',
+      width: 'auto !important'
+    }
+  },
+  '& form > .MuiToolbar-root': {
+    // È molto importante: questa regola serve per poter inserire form, all'interno di altri form, evitando
+    // che la toolbar del form interno recepisca gli stili della regola precedente (che genera un padding strano).
+    margin: 0,
+    marginRight: `-${theme.spacing(0.5)}`,
+    [theme.breakpoints.down('sm')]: {
+      marginRight: theme.spacing(0.5)
+    }
+  }
+}));
+
+function BaseForm(props: IBaseFormProps) {
+  const { spacing: themeSpacing } = useThemeConfig(),
+    { spacing = themeSpacing } = props,
+    formProps = _.omit(props, ['spacing']);
+
+  return (
+    <Form {...formProps}>
+      <StyledGrid container spacing={spacing * 2}>
+        {props.children}
+      </StyledGrid>
+    </Form>
+  );
+}
+
+export type { IBaseFormProps };
+
+export { BaseForm };

package/src/components/ra-forms/LongForm/Content.tsx

@@ -0,0 +1,19 @@
+import _ from 'lodash';
+import { Grid, GridProps } from '@mui/material';
+import { Disposition } from './types';
+
+type IContentProps = GridProps & {
+  disposition?: Disposition;
+};
+
+function Content(props: IContentProps) {
+  const { disposition = { xl: 9, lg: 9, md: 8, sm: 8, xs: 12 } } = props,
+    gridProps = _.omit(props, ['disposition']);
+  return (
+    <Grid {...gridProps} item {...disposition}>
+      {props.children}
+    </Grid>
+  );
+}
+
+export { Content };

package/src/components/ra-forms/LongForm/Form.tsx

@@ -0,0 +1,37 @@
+import _ from 'lodash';
+import { BaseForm, IBaseFormProps } from './BaseForm';
+import { IProviderProps, Provider } from './Provider';
+import { Disposition } from './types';
+import { Sidebar, useSidebarChildren } from './Sidebar';
+import { Content } from './Content';
+import { NavMenu } from './NavMenu';
+import { useBaseItemChildren } from './Tab';
+
+type IFormProps = IProviderProps &
+  IBaseFormProps & {
+    spacing?: number;
+    tabsDisposition: Disposition;
+    contentDisposition: Disposition;
+  };
+
+function Form(props: IFormProps) {
+  const { tabsDisposition, contentDisposition, spacing = 2 } = props,
+    providerProps = _.pick(props, ['syncWithLocation']),
+    baseFormProps = _.omit(props, ['tabsDisposition', 'contentDisposition', 'syncWithLocation']),
+    { top: sidebarTop, bottom: sidebarBottom } = useSidebarChildren(props),
+    contentChildren = useBaseItemChildren(props);
+  return (
+    <Provider {...providerProps}>
+      <BaseForm {...baseFormProps} spacing={spacing}>
+        <Sidebar disposition={tabsDisposition} spacing={spacing}>
+          {sidebarTop}
+          <NavMenu />
+          {sidebarBottom}
+        </Sidebar>
+        <Content disposition={contentDisposition}>{contentChildren}</Content>
+      </BaseForm>
+    </Provider>
+  );
+}
+
+export { Form };

package/src/components/ra-forms/LongForm/NavMenu.tsx

@@ -0,0 +1,128 @@
+import _ from 'lodash';
+import { Avatar } from '../../@extended';
+import { Card, Collapse, List, ListItem, ListItemProps, ListItemIcon, ListItemText, ListItemButton, ListItemAvatar } from '@mui/material';
+import { useSetActiveItem, useSyncWithLocation } from './Provider';
+import { IItem } from './types';
+import { useCallback, useMemo, useState } from 'react';
+import { useNavigate } from 'react-router';
+import { useChildren, useIsActive } from './hooks';
+import { ExpandLess, ExpandMore } from '@mui/icons-material';
+import { getLevel } from './utils';
+import { useThemeConfig } from '../../../hooks';
+
+type IBaseNavMenuItemProps = React.PropsWithChildren<{
+  id: string;
+  onClick?: React.MouseEventHandler<HTMLDivElement>;
+}>;
+type INavMenuItemProps = IItem & ListItemProps & IBaseNavMenuItemProps;
+
+function NavMenu() {
+  const items = useChildren();
+
+  return (
+    <Card variant="outlined">
+      <List
+        sx={{
+          '& .MuiListItemButton-root.Mui-selected': {
+            borderColor: 'palette.primary.main',
+            borderRightStyle: 'solid',
+            borderRightWidth: 2
+          },
+          '& .MuiListItemAvatar-root': {
+            minWidth: 24
+          }
+        }}
+      >
+        {_.map(items, (item, index) => {
+          return <NavMenuItem key={index} {...item} />;
+        })}
+      </List>
+    </Card>
+  );
+}
+
+function NavMenuItem(props: INavMenuItemProps) {
+  const navMenuItemProps = useNavMenuItem(props),
+    { selected, label, icon, onClick: _onClick, badge, items, isGroup, level } = navMenuItemProps,
+    { spacing } = useThemeConfig(),
+    [open, setOpen] = useState(selected),
+    onClick = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        setOpen(!open);
+        _onClick(e);
+      },
+      [_onClick, open]
+    ),
+    hasIcon = icon !== undefined,
+    listItemProps = _.omit(props, ['label', 'icon', 'selected', 'badge']);
+
+  return (
+    <>
+      <ListItem {...listItemProps} disablePadding>
+        <ListItemButton selected={selected && !isGroup} onClick={onClick} sx={{ pl: spacing * level }}>
+          {hasIcon && <ListItemIcon>{icon}</ListItemIcon>}
+          <ListItemText inset={!hasIcon} primary={label} />
+          {badge && (
+            <ListItemAvatar>
+              <Avatar type="filled" size="xs" color={badge.color ?? 'default'}>
+                {badge.content}
+              </Avatar>
+            </ListItemAvatar>
+          )}
+          {isGroup && (open ? <ExpandLess /> : <ExpandMore />)}
+        </ListItemButton>
+      </ListItem>
+      {isGroup && (
+        <Collapse in={open} timeout="auto">
+          <List>
+            {_.map(items, (item: IItem, index: number) => {
+              return <NavMenuItem key={index} {...item} />;
+            })}
+          </List>
+        </Collapse>
+      )}
+    </>
+  );
+}
+
+function useNavMenuItem(
+  item: INavMenuItemProps
+): IItem & { selected: boolean; onClick: React.MouseEventHandler<HTMLDivElement>; items: Array<IItem>; isGroup: boolean; level: number } {
+  const { id } = item,
+    isActive = useIsActive(id),
+    level = getLevel(id),
+    navigate = useNavigate(),
+    syncWithLocation = useSyncWithLocation(),
+    setActiveItem = useSetActiveItem(),
+    items = useChildren(id),
+    isGroup = !_.isEmpty(items),
+    onClick = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (!isGroup) {
+          if (syncWithLocation) {
+            navigate(item.id);
+          } else {
+            setActiveItem(item.id);
+          }
+        }
+        if (_.isFunction(item.onClick)) {
+          item.onClick(e);
+        }
+      },
+      [setActiveItem, navigate, item, syncWithLocation, isGroup]
+    ),
+    navMenuItem = useMemo(() => {
+      return {
+        ...item,
+        selected: isActive,
+        onClick: onClick,
+        items: items,
+        isGroup: isGroup,
+        level: level
+      };
+    }, [item, isActive, onClick, items, isGroup]);
+
+  return navMenuItem;
+}
+
+export { NavMenu, NavMenuItem, useNavMenuItem };

package/src/components/ra-forms/LongForm/Provider.tsx

@@ -0,0 +1,196 @@
+import { createContext, useCallback, useContext, useEffect, useMemo, useReducer } from 'react';
+import _ from 'lodash';
+import { IItem } from './types';
+import { useLocation } from 'react-router';
+import { getItemsIds } from './utils';
+
+enum ActionType {
+  SET_SYNC_WITH_LOCATION = 'setSyncWithLocation',
+  SET_ACTIVE_ITEM = 'setActiveItem',
+  ADD_ITEM = 'addItem',
+  REMOVE_ITEM = 'removeItem'
+}
+
+type IProviderProps = React.PropsWithChildren<{
+  syncWithLocation?: boolean;
+}>;
+type IState = {
+  syncWithLocation: boolean;
+  items: Array<IItem>;
+  activeItem?: string;
+};
+type IAction =
+  | {
+      type: ActionType.SET_SYNC_WITH_LOCATION;
+      payload: boolean;
+    }
+  | {
+      type: ActionType.SET_ACTIVE_ITEM;
+      payload?: string;
+    }
+  | {
+      type: ActionType.ADD_ITEM;
+      payload: IItem;
+    }
+  | {
+      type: ActionType.REMOVE_ITEM;
+      payload: string | IItem;
+    };
+type IDispatch = React.Dispatch<IAction>;
+type IContext = {
+  state: IState;
+  dispatch: IDispatch;
+};
+
+function reducer(state: IState, action: IAction): IState {
+  const newState = _.clone(state),
+    { type, payload } = action;
+  switch (type) {
+    case ActionType.SET_SYNC_WITH_LOCATION:
+      return _.extend(newState, { syncWithLocation: payload });
+    case ActionType.SET_ACTIVE_ITEM:
+      return _.includes(getItemsIds(state.items), payload) ? _.extend(newState, { activeItem: payload }) : newState;
+    case ActionType.ADD_ITEM: {
+      const id = payload.id,
+        items = _.reject(newState.items, (item: IItem) => item.id === id);
+      items.push(payload);
+      _.extend(newState, { items: items });
+      if (newState.activeItem === undefined) {
+        _.extend(newState, { activeItem: payload.id });
+      }
+      return newState;
+    }
+    case ActionType.REMOVE_ITEM: {
+      const id = _.isString(payload) ? payload : payload.id,
+        items = _.reject(newState.items, (item: IItem) => item.id === id);
+      _.extend(newState, { items: items });
+      if (newState.activeItem === id) {
+        _.extend(newState, { activeItem: _.first(items)?.id ?? undefined });
+      }
+
+      return newState;
+    }
+    default:
+      return newState;
+  }
+}
+
+const DefaultState: IState = {
+  syncWithLocation: true,
+  items: [],
+  activeItem: undefined
+};
+
+const Context = createContext<IContext | undefined>(undefined);
+
+function Provider(props: IProviderProps) {
+  const syncWithLocation = Boolean(props.syncWithLocation ?? true),
+    { pathname } = useLocation(),
+    [state, dispatch] = useReducer(reducer, _.cloneDeep(DefaultState)),
+    { items } = state,
+    value = useMemo(() => ({ state: state, dispatch: dispatch }), [state, dispatch]);
+
+  useEffect(() => {
+    dispatch({
+      type: ActionType.SET_SYNC_WITH_LOCATION,
+      payload: Boolean(syncWithLocation)
+    });
+  }, [syncWithLocation, dispatch]);
+
+  useEffect(() => {
+    if (syncWithLocation) {
+      const match = pathname.match(/([^/]+)$/);
+      if (match && match[0]) {
+        dispatch({
+          type: ActionType.SET_ACTIVE_ITEM,
+          payload: match[0]
+        });
+      }
+    }
+  }, [dispatch, pathname, syncWithLocation, items]);
+
+  return <Context.Provider value={value}>{props.children}</Context.Provider>;
+}
+
+function useFormContext(): IContext {
+  const context = useContext(Context);
+
+  if (context === undefined) {
+    throw new Error('[LongForm] useFormContext: context undefined. Please provide a valid Context using LongForm.Provider');
+  }
+
+  return context;
+}
+
+function useFormState(): IState {
+  const context = useFormContext();
+  return context.state;
+}
+
+function useFormDispatch(): IDispatch {
+  const context = useFormContext();
+  return context.dispatch;
+}
+
+function useActiveItem(): string | undefined {
+  const state = useFormState();
+  return state.activeItem;
+}
+
+function useItems(): Array<IItem> {
+  const state = useFormState();
+  return state.items;
+}
+
+function useSyncWithLocation(): boolean {
+  const state = useFormState();
+  return state.syncWithLocation;
+}
+
+function useSetActiveItem(): (activeItem: string) => void {
+  const dispatch = useFormDispatch(),
+    setActiveItem = useCallback(
+      (activeItem: string) => {
+        dispatch({
+          type: ActionType.SET_ACTIVE_ITEM,
+          payload: activeItem
+        });
+      },
+      [dispatch]
+    );
+
+  return setActiveItem;
+}
+
+function useAddItem(): (item: IItem) => void {
+  const dispatch = useFormDispatch(),
+    addItem = useCallback(
+      (item: IItem) => {
+        dispatch({
+          type: ActionType.ADD_ITEM,
+          payload: item
+        });
+      },
+      [dispatch]
+    );
+
+  return addItem;
+}
+
+function useRemoveItem(): (item: string | IItem) => void {
+  const dispatch = useFormDispatch(),
+    removeItem = useCallback(
+      (item: string | IItem) => {
+        dispatch({
+          type: ActionType.REMOVE_ITEM,
+          payload: item
+        });
+      },
+      [dispatch]
+    );
+
+  return removeItem;
+}
+
+export { Provider, useItems, useSyncWithLocation, useActiveItem, useSetActiveItem, useAddItem, useRemoveItem };
+export type { IProviderProps };

package/src/components/ra-forms/LongForm/Sidebar.tsx

@@ -0,0 +1,71 @@
+import _ from 'lodash';
+import { Children, isValidElement, useMemo } from 'react';
+import StickyBox from 'react-sticky-box';
+import { Disposition } from './types';
+import { Box, Grid, GridProps, Stack } from '@mui/material';
+
+enum SidebarSectionPosition {
+  TOP = 'top',
+  BOTTOM = 'bottom'
+}
+
+type ISidebarProps = {
+  sticky?: boolean;
+  disposition?: Disposition;
+} & GridProps;
+
+type ISidebarSectionProps = React.PropsWithChildren<{
+  position: SidebarSectionPosition;
+}>;
+
+function Sidebar(props: ISidebarProps) {
+  const { sticky = true, disposition = { xl: 3, lg: 3, md: 4, sm: 4, xs: 12 }, spacing = 2 } = props,
+    gridProps = _.omit(props, ['sticky', 'disposition', 'spacing']),
+    Wrapper = sticky ? StickyBox : Box,
+    wrapperProps = useMemo(() => {
+      return sticky ? { offsetTop: 74, offsetBottom: (spacing as number) * 2 } : {};
+    }, [sticky, spacing]);
+  return (
+    <Grid {...gridProps} item {...disposition}>
+      <Wrapper {...wrapperProps}>
+        <Stack spacing={spacing}>{props.children}</Stack>
+      </Wrapper>
+    </Grid>
+  );
+}
+
+function SidebarSection(props: ISidebarSectionProps) {
+  return <>{props.children}</>;
+}
+
+type ISidebarChildren = {
+  top: Array<React.ReactNode>;
+  bottom: Array<React.ReactNode>;
+};
+
+function useSidebarChildren(props: React.PropsWithChildren): ISidebarChildren {
+  const { children } = props,
+    result = useMemo<ISidebarChildren>(() => {
+      const result: ISidebarChildren = {
+        top: [],
+        bottom: []
+      };
+      Children.forEach<React.ReactNode>(children, (Child) => {
+        if (isValidElement(Child) && Child?.type === SidebarSection) {
+          const { position } = Child.props;
+          switch (position) {
+            case SidebarSectionPosition.TOP:
+              result.top.push(Child);
+              break;
+            case SidebarSectionPosition.BOTTOM:
+              result.bottom.push(Child);
+              break;
+          }
+        }
+      });
+      return result;
+    }, [children]);
+  return result;
+}
+
+export { Sidebar, SidebarSection, SidebarSectionPosition, useSidebarChildren };

package/src/components/ra-forms/LongForm/Tab.tsx

@@ -0,0 +1,67 @@
+import _ from 'lodash';
+import { Box } from '@mui/material';
+import React, { Children, cloneElement, isValidElement, useEffect, useMemo } from 'react';
+import { useAddItem, useRemoveItem } from './Provider';
+import { Optional } from 'src/types';
+import { IItem } from './types';
+import { useIsActive } from './hooks';
+import { getId } from './utils';
+
+type IBaseItemProps = React.PropsWithChildren<Optional<IItem, 'id'>>;
+type ITabProps = IBaseItemProps;
+type IGroupProps = IBaseItemProps;
+
+function BaseItem(props: IBaseItemProps) {
+  const { label, icon, badge } = props,
+    id = getId(props),
+    addItem = useAddItem(),
+    removeItem = useRemoveItem(),
+    visible = useIsActive(id);
+
+  useEffect(() => {
+    addItem({
+      id: id,
+      label: label,
+      icon: icon,
+      badge: badge
+    });
+    return () => {
+      removeItem(id);
+    };
+  }, [addItem, removeItem, label, icon, id, badge]);
+
+  /* All tabs are rendered (not only the one in focus), to allow validation
+  on tabs not in focus. The tabs receive a `hidden` property, which they'll
+  use to hide the tab using CSS if it's not the one in focus.
+  See https://github.com/marmelab/react-admin/issues/1866 */
+  return <Box display={visible ? 'unset' : 'none'}>{props.children}</Box>;
+}
+
+function Group(props: IGroupProps) {
+  const filteredChildren = useBaseItemChildren(props),
+    groupId = getId(props);
+  return (
+    <BaseItem {...props} id={groupId}>
+      {Children.map(filteredChildren, (Child) => {
+        const childId = getId(Child.props);
+        return cloneElement(Child, { id: `${groupId}.${childId}` });
+      })}
+    </BaseItem>
+  );
+}
+
+function Tab(props: ITabProps) {
+  return <BaseItem {...props} />;
+}
+
+function useBaseItemChildren(props: React.PropsWithChildren): Array<React.FunctionComponentElement<IBaseItemProps>> {
+  const { children } = props,
+    result = useMemo<Array<React.FunctionComponentElement<IBaseItemProps>>>(
+      //@ts-ignore
+      () => _.filter(Children.toArray(children), (Child) => isValidElement(Child) && (Child?.type === Tab || Child?.type === Group)),
+      [children]
+    );
+  return result;
+}
+
+export { Tab, Group, useBaseItemChildren };

package/src/components/ra-forms/LongForm/hooks.tsx

@@ -0,0 +1,25 @@
+import _ from 'lodash';
+import { useMemo } from 'react';
+import { useActiveItem, useItems } from './Provider';
+import { IItem } from './types';
+import { getLevel, isChild } from './utils';
+
+function useIsActive(id: string): boolean {
+  const activeItem = useActiveItem();
+  return isChild(id, activeItem ?? '');
+}
+
+function useChildren(id?: string): Array<IItem> {
+  const items = useItems(),
+    level = id !== undefined ? getLevel(id) : 0,
+    children = useMemo(() => {
+      return _.chain(items)
+        .filter((item) => (id !== undefined ? isChild(id, item.id) : true))
+        .filter((item) => getLevel(item.id) === level + 1)
+        .value();
+    }, [items, level, id]);
+
+  return children;
+}
+
+export { useChildren, useIsActive };