@xyo-network/react-appbar 2.35.10 → 2.35.11

package/dist/esm/components/SiteMenu/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useMenuItemsShared';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/SiteMenu/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/SiteMenu/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAA"}

package/dist/esm/components/SiteMenu/hooks/index.js

@@ -0,0 +1,2 @@
+export * from './useMenuItemsShared';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/SiteMenu/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/SiteMenu/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAA"}

package/dist/esm/components/SiteMenu/hooks/useMenuItemsShared.d.ts

@@ -0,0 +1,8 @@
+import { SiteMenuListItemProps } from '../MenuItems';
+declare type DefaultSiteMenuListItemProps = Pick<SiteMenuListItemProps, 'collapseEnd' | 'dense' | 'iconOnly' | 'sx'>;
+export declare const useMenuItemsShared: () => {
+    defaultSiteMenuListItemProps: DefaultSiteMenuListItemProps;
+    onMenuItemToggle: (open?: boolean) => void;
+};
+export {};
+//# sourceMappingURL=useMenuItemsShared.d.ts.map

package/dist/esm/components/SiteMenu/hooks/useMenuItemsShared.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMenuItemsShared.d.ts","sourceRoot":"","sources":["../../../../../src/components/SiteMenu/hooks/useMenuItemsShared.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAA;AAEpD,aAAK,4BAA4B,GAAG,IAAI,CAAC,qBAAqB,EAAE,aAAa,GAAG,OAAO,GAAG,UAAU,GAAG,IAAI,CAAC,CAAA;AAE5G,eAAO,MAAM,kBAAkB;;8BAGI,OAAO;CAkBzC,CAAA"}

package/dist/esm/components/SiteMenu/hooks/useMenuItemsShared.js

@@ -0,0 +1,19 @@
+import { useMemo } from 'react';
+import { useCollapsible } from '../../../contexts';
+export const useMenuItemsShared = () => {
+    const { collapse, collapseEnd, setCollapse, setCollapseEnd } = useCollapsible();
+    const onMenuItemToggle = (open) => {
+        setCollapse?.((previous) => (open ? false : previous));
+        setCollapseEnd?.((previous) => (open ? false : previous));
+    };
+    const defaultSiteMenuListItemProps = useMemo(() => ({
+        collapseEnd,
+        dense: true,
+        iconOnly: collapse,
+        sx: {
+            px: '8px',
+        },
+    }), [collapse, collapseEnd]);
+    return { defaultSiteMenuListItemProps, onMenuItemToggle };
+};
+//# sourceMappingURL=useMenuItemsShared.js.map

package/dist/esm/components/SiteMenu/hooks/useMenuItemsShared.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMenuItemsShared.js","sourceRoot":"","sources":["../../../../../src/components/SiteMenu/hooks/useMenuItemsShared.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAE/B,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAKlD,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,EAAE;IACrC,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,cAAc,EAAE,GAAG,cAAc,EAAE,CAAA;IAE/E,MAAM,gBAAgB,GAAG,CAAC,IAAc,EAAE,EAAE;QAC1C,WAAW,EAAE,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAA;QACtD,cAAc,EAAE,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAA;IAC3D,CAAC,CAAA;IAED,MAAM,4BAA4B,GAAiC,OAAO,CACxE,GAAG,EAAE,CAAC,CAAC;QACL,WAAW;QACX,KAAK,EAAE,IAAI;QACX,QAAQ,EAAE,QAAQ;QAClB,EAAE,EAAE;YACF,EAAE,EAAE,KAAK;SACV;KACF,CAAC,EACF,CAAC,QAAQ,EAAE,WAAW,CAAC,CACxB,CAAA;IAED,OAAO,EAAE,4BAA4B,EAAE,gBAAgB,EAAE,CAAA;AAC3D,CAAC,CAAA"}

package/dist/esm/components/SiteMenu/index.d.ts

@@ -1,3 +1,4 @@
+export * from './hooks';
 export * from './Menu';
 export * from './MenuItems';
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/components/SiteMenu/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/SiteMenu/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA;AACtB,cAAc,aAAa,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/SiteMenu/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,aAAa,CAAA"}

package/dist/esm/components/SiteMenu/index.js

@@ -1,3 +1,4 @@
+export * from './hooks';
 export * from './Menu';
 export * from './MenuItems';
 //# sourceMappingURL=index.js.map

package/dist/esm/components/SiteMenu/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/SiteMenu/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA;AACtB,cAAc,aAAa,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/SiteMenu/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,aAAa,CAAA"}

package/package.json

@@ -16,11 +16,11 @@
     "@xylabs/react-flexbox": "^2.14.20",
     "@xylabs/react-link": "^2.14.20",
     "@xylabs/react-shared": "^2.14.20",
-    "@xyo-network/react-app-settings": "^2.35.10",
-    "@xyo-network/react-archive": "^2.35.10",
-    "@xyo-network/react-auth-sets": "^2.35.10",
-    "@xyo-network/react-network": "^2.35.10",
-    "@xyo-network/react-shared": "^2.35.10",
+    "@xyo-network/react-app-settings": "^2.35.11",
+    "@xyo-network/react-archive": "^2.35.11",
+    "@xyo-network/react-auth-sets": "^2.35.11",
+    "@xyo-network/react-network": "^2.35.11",
+    "@xyo-network/react-shared": "^2.35.11",
     "tslib": "^2.4.0"
   },
   "peerDependencies": {
@@ -76,5 +76,5 @@
   },
   "sideEffects": false,
   "types": "dist/esm/index.d.ts",
-  "version": "2.35.10"
+  "version": "2.35.11"
 }

package/src/components/CollapsibleDrawer/CollapseDrawer.stories.tsx

@@ -0,0 +1,64 @@
+import PublicRoundedIcon from '@mui/icons-material/PublicRounded'
+import { Divider, List, useTheme } from '@mui/material'
+import { ComponentMeta, ComponentStory, DecoratorFn } from '@storybook/react'
+import { FlexGrowCol } from '@xylabs/react-flexbox'
+
+import { CollapsibleProvider, useCollapsible } from '../../contexts'
+import { SiteMenuListItem, SiteMenuListItemProps } from '../SiteMenu'
+import { CollapseToggleFlex } from './CollapseToggle'
+import { CollapsibleDrawer } from './CollapsibleDrawer'
+
+const CollapseProviderDecorator: DecoratorFn = (Story, args) => {
+  return (
+    <CollapsibleProvider>
+      <Story {...args} />
+    </CollapsibleProvider>
+  )
+}
+
+const StorybookEntry = {
+  argTypes: {},
+  component: CollapsibleDrawer,
+  decorators: [CollapseProviderDecorator],
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'appbar/CollapseDrawer',
+} as ComponentMeta<typeof CollapsibleDrawer>
+
+const SiteMenuList: React.FC<SiteMenuListItemProps> = (args) => {
+  return (
+    <List>
+      <SiteMenuListItem {...args} />
+      <SiteMenuListItem {...args} />
+      <SiteMenuListItem {...args} />
+    </List>
+  )
+}
+
+const Template: ComponentStory<typeof CollapsibleDrawer> = (args) => {
+  const { collapse, setCollapseEnd, collapseEnd } = useCollapsible()
+  const theme = useTheme()
+  return (
+    <>
+      <FlexGrowCol alignItems="start" height="calc(100vh - 2rem)">
+        <CollapsibleDrawer in={!collapse} orientation="horizontal" collapsedSize={theme.spacing(5)} onExited={() => setCollapseEnd?.(true)} {...args}>
+          <SiteMenuList iconOnly={collapse} collapseEnd={collapseEnd} primary="test" icon={<PublicRoundedIcon />} />
+          <FlexGrowCol />
+          <CollapseToggleFlex justifyContent="start" />
+        </CollapsibleDrawer>
+        <Divider orientation="vertical" flexItem />
+      </FlexGrowCol>
+    </>
+  )
+}
+
+const Default = Template.bind({})
+Default.args = {}
+
+export { Default }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/SiteMenu/MenuItem.stories.tsx

@@ -1,8 +1,6 @@
 import PublicRoundedIcon from '@mui/icons-material/PublicRounded'
-import { Button, Collapse, Divider, List, useTheme } from '@mui/material'
+import { List } from '@mui/material'
 import { ComponentMeta, ComponentStory } from '@storybook/react'
-import { FlexRow } from '@xylabs/react-flexbox'
-import { useState } from 'react'
 
 import { SiteMenuListItem, SiteMenuListItemProps } from './MenuItems'
 
@@ -27,30 +25,6 @@ const SiteMenuList: React.FC<SiteMenuListItemProps> = (args) => {
   )
 }
 
-const CollapseTemplate: ComponentStory<typeof SiteMenuListItem> = (args) => {
-  const [collapse, setCollapse] = useState(false)
-  const [onCollapseEnd, setOnCollapseEnd] = useState(false)
-  const theme = useTheme()
-  return (
-    <>
-      <FlexRow justifyContent="start">
-        <Collapse in={!collapse} orientation="horizontal" collapsedSize={theme.spacing(5)} onExited={() => setOnCollapseEnd(true)}>
-          <SiteMenuList {...args} iconOnly={collapse} collapseEnd={onCollapseEnd} />
-        </Collapse>
-        <Divider orientation="vertical" flexItem />
-      </FlexRow>
-      <Button
-        onClick={() => {
-          setOnCollapseEnd((previous) => (previous ? false : previous))
-          setCollapse(!collapse)
-        }}
-      >
-        Toggle
-      </Button>
-    </>
-  )
-}
-
 const Template: ComponentStory<typeof SiteMenuListItem> = (args) => {
   return <SiteMenuList {...args} />
 }
@@ -61,13 +35,6 @@ Default.args = {
   primary: 'Test',
 }
 
-const WithCollapse = CollapseTemplate.bind({})
-WithCollapse.args = {
-  dense: true,
-  icon: <PublicRoundedIcon />,
-  primary: 'Test',
-}
-
 const WithChildren = Template.bind({})
 WithChildren.args = {
   children: (
@@ -79,7 +46,7 @@ WithChildren.args = {
   primary: 'Test',
 }
 
-export { Default, WithChildren, WithCollapse }
+export { Default, WithChildren }
 
 // eslint-disable-next-line import/no-default-export
 export default StorybookEntry

package/src/components/SiteMenu/hooks/index.ts

@@ -0,0 +1 @@
+export * from './useMenuItemsShared'

package/src/components/SiteMenu/hooks/useMenuItemsShared.tsx

@@ -0,0 +1,29 @@
+import { useMemo } from 'react'
+
+import { useCollapsible } from '../../../contexts'
+import { SiteMenuListItemProps } from '../MenuItems'
+
+type DefaultSiteMenuListItemProps = Pick<SiteMenuListItemProps, 'collapseEnd' | 'dense' | 'iconOnly' | 'sx'>
+
+export const useMenuItemsShared = () => {
+  const { collapse, collapseEnd, setCollapse, setCollapseEnd } = useCollapsible()
+
+  const onMenuItemToggle = (open?: boolean) => {
+    setCollapse?.((previous) => (open ? false : previous))
+    setCollapseEnd?.((previous) => (open ? false : previous))
+  }
+
+  const defaultSiteMenuListItemProps: DefaultSiteMenuListItemProps = useMemo(
+    () => ({
+      collapseEnd,
+      dense: true,
+      iconOnly: collapse,
+      sx: {
+        px: '8px',
+      },
+    }),
+    [collapse, collapseEnd],
+  )
+
+  return { defaultSiteMenuListItemProps, onMenuItemToggle }
+}

package/src/components/SiteMenu/index.ts

@@ -1,2 +1,3 @@
+export * from './hooks'
 export * from './Menu'
 export * from './MenuItems'