@xyo-network/react-appbar 2.81.10 → 2.82.0

package/src/components/SiteMenu/MenuListItem/MenuListItemContainer.tsx

@@ -1,12 +1,12 @@
 import { ListItemProps, ListItemText, useTheme } from '@mui/material'
 import { FlexRow } from '@xylabs/react-flexbox'
 import { LinkEx } from '@xylabs/react-link'
-import { useState } from 'react'
+import React, { useState } from 'react'
 
-import { useCollapsible } from '../../../contexts/index.js'
-import { MenuListItemBase, NavListItemProps } from '../lib/index.js'
-import { ListItemTooltip, MenuIcon, MenuListItem } from './list-item-components/index.js'
-import { SubNavListItemsCollapse, SubNavToggleIconButton } from './sub-nav/index.js'
+import { useCollapsible } from '../../../contexts/index.ts'
+import { MenuListItemBase, NavListItemProps } from '../lib/index.ts'
+import { ListItemTooltip, MenuIcon, MenuListItem } from './list-item-components/index.ts'
+import { SubNavListItemsCollapse, SubNavToggleIconButton } from './sub-nav/index.ts'
 
 export interface MenuListItemProps extends NavListItemProps, MenuListItemBase, ListItemProps {
   iconMenuTextSpacing?: string
@@ -64,19 +64,21 @@ export const MenuListItemContainer: React.FC<MenuListItemProps> = ({
           </FlexRow>
         </LinkEx>
         <FlexRow style={{ marginLeft: theme.spacing(1) }}>
-          {subNavListItems ?
-            <SubNavToggleIconButton setOpenSubNav={setOpenSubNav} openSubNav={openSubNav} />
-          : null}
-          {tooltip ?
-            <ListItemTooltip title={tooltip} />
-          : null}
+          {subNavListItems
+            ? <SubNavToggleIconButton setOpenSubNav={setOpenSubNav} openSubNav={openSubNav} />
+            : null}
+          {tooltip
+            ? <ListItemTooltip title={tooltip} />
+            : null}
         </FlexRow>
       </MenuListItem>
-      {subNavListItems ?
-        <SubNavListItemsCollapse openSubNav={openSubNav} collapse={collapse}>
-          {subNavListItems?.map((item, index) => <MenuListItemContainer dense={dense} sx={{ pl: theme.spacing(1) }} key={index} {...item} />)}
-        </SubNavListItemsCollapse>
-      : null}
+      {subNavListItems
+        ? (
+            <SubNavListItemsCollapse openSubNav={openSubNav} collapse={collapse}>
+              {subNavListItems?.map((item, index) => <MenuListItemContainer dense={dense} sx={{ pl: theme.spacing(1) }} key={index} {...item} />)}
+            </SubNavListItemsCollapse>
+          )
+        : null}
     </>
   )
 }

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

@@ -1 +1 @@
-export * from './MenuListItemContainer.js'
+export * from './MenuListItemContainer.tsx'

package/src/components/SiteMenu/MenuListItem/list-item-components/ListItemTooltip.tsx

@@ -1,5 +1,6 @@
 import { Tooltip, TooltipProps } from '@mui/material'
 import { FlexCol } from '@xylabs/react-flexbox'
+import React from 'react'
 // eslint-disable-next-line import/no-internal-modules
 import { VscInfo } from 'react-icons/vsc'
 

package/src/components/SiteMenu/MenuListItem/list-item-components/MenuIcon.tsx

@@ -1,5 +1,5 @@
 import { Typography, TypographyProps } from '@mui/material'
-import { ReactNode } from 'react'
+import React, { ReactNode } from 'react'
 
 export interface MenuIconProps extends TypographyProps {
   icon?: ReactNode

package/src/components/SiteMenu/MenuListItem/list-item-components/MenuListItem.tsx

@@ -1,6 +1,7 @@
 import { ListItem, ListItemProps } from '@mui/material'
+import React from 'react'
 
-import { MenuListItemBase } from '../../lib/index.js'
+import { MenuListItemBase } from '../../lib/index.ts'
 
 export interface ListItemExProps extends MenuListItemBase, ListItemProps {}
 

package/src/components/SiteMenu/MenuListItem/list-item-components/index.ts

@@ -1,3 +1,3 @@
-export * from './ListItemTooltip.js'
-export * from './MenuIcon.js'
-export * from './MenuListItem.js'
+export * from './ListItemTooltip.tsx'
+export * from './MenuIcon.tsx'
+export * from './MenuListItem.tsx'

package/src/components/SiteMenu/MenuListItem/sub-nav/SubNavListItemCollapse.tsx

@@ -1,7 +1,8 @@
 import { Collapse, CollapseProps, List } from '@mui/material'
 import { WithChildren } from '@xylabs/react-shared'
+import React from 'react'
 
-import { NavListItemProps } from '../../lib/index.js'
+import { NavListItemProps } from '../../lib/index.ts'
 
 export interface SubNavListItemsCollapseProps extends WithChildren, CollapseProps {
   collapse?: boolean

package/src/components/SiteMenu/MenuListItem/sub-nav/SubNavToggleIconButton.tsx

@@ -1,8 +1,7 @@
 import { IconButton, IconButtonProps, useTheme } from '@mui/material'
-import { Dispatch, SetStateAction, SyntheticEvent } from 'react'
+import React, { Dispatch, SetStateAction, SyntheticEvent } from 'react'
 // eslint-disable-next-line import/no-internal-modules
 import { VscChevronDown } from 'react-icons/vsc'
-
 export interface SubNavToggleIconButtonProps extends IconButtonProps {
   openSubNav?: boolean
   setOpenSubNav?: Dispatch<SetStateAction<boolean>>

package/src/components/SiteMenu/MenuListItem/sub-nav/index.ts

@@ -1,2 +1,2 @@
-export * from './SubNavListItemCollapse.js'
-export * from './SubNavToggleIconButton.js'
+export * from './SubNavListItemCollapse.tsx'
+export * from './SubNavToggleIconButton.tsx'

package/src/components/SiteMenu/MenuSection.tsx

@@ -1,7 +1,8 @@
 import { Collapse, ListSubheader } from '@mui/material'
 import { FlexBoxProps, FlexCol } from '@xylabs/react-flexbox'
+import React from 'react'
 
-import { MenuListItemContainer, MenuListItemProps } from './MenuListItem/index.js'
+import { MenuListItemContainer, MenuListItemProps } from './MenuListItem/index.ts'
 
 export interface MenuSectionProps extends FlexBoxProps {
   iconMenuTextSpacing?: string

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

@@ -1 +1 @@
-export * from './useMenuItemsShared.js'
+export * from './useMenuItemsShared.tsx'

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

@@ -1,7 +1,7 @@
 import { useMemo } from 'react'
 
-import { useCollapsible } from '../../../contexts/index.js'
-import { MenuListItemProps } from '../MenuListItem/index.js'
+import { useCollapsible } from '../../../contexts/index.ts'
+import { MenuListItemProps } from '../MenuListItem/index.ts'
 
 export type DefaultSiteMenuListItemProps = Pick<MenuListItemProps, 'collapseEnd' | 'dense' | 'iconOnly' | 'sx'>
 
@@ -9,8 +9,8 @@ export const useMenuItemsShared = () => {
   const { collapse, collapseEnd, setCollapse, setCollapseEnd } = useCollapsible()
 
   const onMenuItemToggle = (open?: boolean) => {
-    setCollapse?.((previous) => (open ? false : previous))
-    setCollapseEnd?.((previous) => (open ? false : previous))
+    setCollapse?.(previous => (open ? false : previous))
+    setCollapseEnd?.(previous => (open ? false : previous))
   }
 
   const defaultSiteMenuListItemProps: DefaultSiteMenuListItemProps = useMemo(

package/src/components/SiteMenu/index.ts

@@ -1,5 +1,5 @@
-export * from './hooks/index.js'
-export * from './lib/index.js'
-export * from './Menu.js'
-export * from './MenuListItem/index.js'
-export * from './MenuSection.js'
+export * from './hooks/index.ts'
+export * from './lib/index.ts'
+export * from './Menu.tsx'
+export * from './MenuListItem/index.ts'
+export * from './MenuSection.tsx'

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

@@ -1,2 +1,2 @@
-export * from './MenuListItemBase.js'
-export * from './NavListItemProps.js'
+export * from './MenuListItemBase.tsx'
+export * from './NavListItemProps.ts'

package/src/components/Toolbar/Context/ContextToolbar.stories.tsx

@@ -1,7 +1,8 @@
 import { Meta, StoryFn } from '@storybook/react'
+import React from 'react'
 import { BrowserRouter } from 'react-router-dom'
 
-import { ContextToolbar } from './ContextToolbar.js'
+import { ContextToolbar } from './ContextToolbar.tsx'
 
 const StorybookEntry = {
   argTypes: {},
@@ -14,7 +15,7 @@ const StorybookEntry = {
   title: 'appbar/Toolbar/Context',
 } as Meta<typeof ContextToolbar>
 
-const Template: StoryFn<typeof ContextToolbar> = (args) => (
+const Template: StoryFn<typeof ContextToolbar> = args => (
   <BrowserRouter>
     <ContextToolbar {...args}></ContextToolbar>
   </BrowserRouter>
@@ -28,5 +29,4 @@ WithVersion.args = { version: true }
 
 export { Default, WithVersion }
 
-// eslint-disable-next-line import/no-default-export
 export default StorybookEntry

package/src/components/Toolbar/Context/ContextToolbar.tsx

@@ -1,7 +1,8 @@
 import { Toolbar, ToolbarProps } from '@mui/material'
+import React from 'react'
 import { To } from 'react-router-dom'
 
-import { LogoLinkEx } from './LogoLinkEx.js'
+import { LogoLinkEx } from './LogoLinkEx.tsx'
 
 export interface ContextToolbarProps extends ToolbarProps {
   logoTo?: To

package/src/components/Toolbar/Context/Logo.tsx

@@ -1,10 +1,11 @@
 import { useTheme } from '@mui/material'
+import React from 'react'
 
 export const Logo: React.FC<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>> = (props) => {
   const theme = useTheme()
-  const logoUrl =
-    theme.palette.mode === 'dark' ?
-      'https://cdn.xy.company/img/brand/XYO/XYO_icon_white.svg'
-    : 'https://cdn.xy.company/img/brand/XYO/XYO_icon_white.svg'
+  const logoUrl
+    = theme.palette.mode === 'dark'
+      ? 'https://cdn.xy.company/img/brand/XYO/XYO_icon_white.svg'
+      : 'https://cdn.xy.company/img/brand/XYO/XYO_icon_white.svg'
   return <img src={logoUrl} {...props} />
 }

package/src/components/Toolbar/Context/LogoLinkEx.tsx

@@ -1,8 +1,9 @@
 import { Typography, useTheme } from '@mui/material'
 import { FlexRow } from '@xylabs/react-flexbox'
 import { LinkEx, LinkExProps } from '@xylabs/react-link'
+import React from 'react'
 
-import { Logo } from './Logo.js'
+import { Logo } from './Logo.tsx'
 
 export interface LogoLinkExProps extends LinkExProps {
   version?: boolean | string
@@ -14,22 +15,24 @@ export const LogoLinkEx: React.FC<LogoLinkExProps> = ({ to = '/', version = fals
     <LinkEx to={to} {...props}>
       <FlexRow paddingX="4px">
         <Logo height="40" width="43" />
-        {version ?
-          <Typography
-            position="absolute"
-            borderRadius={1}
-            right={6}
-            color={theme.palette.getContrastText(theme.palette.text.primary)}
-            bottom={0}
-            bgcolor={theme.palette.text.primary}
-            paddingX="2px"
-            lineHeight={1}
-            variant="caption"
-            border={`1px ${theme.palette.getContrastText(theme.palette.primary.main)} solid`}
-          >
-            {typeof version === 'string' ? version : '2.1'}
-          </Typography>
-        : null}
+        {version
+          ? (
+              <Typography
+                position="absolute"
+                borderRadius={1}
+                right={6}
+                color={theme.palette.getContrastText(theme.palette.text.primary)}
+                bottom={0}
+                bgcolor={theme.palette.text.primary}
+                paddingX="2px"
+                lineHeight={1}
+                variant="caption"
+                border={`1px ${theme.palette.getContrastText(theme.palette.primary.main)} solid`}
+              >
+                {typeof version === 'string' ? version : '2.1'}
+              </Typography>
+            )
+          : null}
       </FlexRow>
     </LinkEx>
   )

package/src/components/Toolbar/Context/index.ts

@@ -1 +1 @@
-export * from './ContextToolbar.js'
+export * from './ContextToolbar.tsx'

package/src/components/Toolbar/System/SystemToolbar.stories.tsx

@@ -1,13 +1,12 @@
-/* eslint-disable import/no-internal-modules */
 import { List } from '@mui/material'
 import { Meta, StoryFn } from '@storybook/react'
 import { NetworkMemoryProvider } from '@xyo-network/react-network'
 import { TypographyEx } from '@xyo-network/react-shared'
-import { SyntheticEvent } from 'react'
+import React, { SyntheticEvent } from 'react'
 import { BrowserRouter } from 'react-router-dom'
 
-import { MenuListItemContainer } from '../../SiteMenu/index.js'
-import { SystemToolbar } from './SystemToolbar.js'
+import { MenuListItemContainer } from '../../SiteMenu/index.ts'
+import { SystemToolbar } from './SystemToolbar.tsx'
 
 const DefaultMenu = (
   <List>
@@ -31,7 +30,7 @@ const StorybookEntry: Meta = {
   title: 'appbar/Toolbar/System',
 }
 
-const Template: StoryFn<typeof SystemToolbar> = (args) => (
+const Template: StoryFn<typeof SystemToolbar> = args => (
   <BrowserRouter>
     <NetworkMemoryProvider>
       <SystemToolbar {...args} />
@@ -54,10 +53,9 @@ PrecedingChildren.args = {
 const WithOnMenuToggle = Template.bind({})
 WithOnMenuToggle.args = {
   menuItems: DefaultMenu,
-  onMenuToggle: (state) => console.log(state),
+  onMenuToggle: state => console.log(state),
 }
 
 export { Default, PrecedingChildren, WithOnMenuToggle }
 
-// eslint-disable-next-line import/no-default-export
 export default StorybookEntry

package/src/components/Toolbar/System/SystemToolbar.tsx

@@ -2,9 +2,9 @@ import { Paper, Toolbar, ToolbarProps } from '@mui/material'
 import { FlexRow } from '@xylabs/react-flexbox'
 import { DarkModeIconButton } from '@xyo-network/react-app-settings'
 import { NetworkSelectEx, NetworkSelectExProps } from '@xyo-network/react-network'
-import { ReactNode } from 'react'
+import React, { ReactNode } from 'react'
 
-import { SiteMenu, SiteMenuProps } from '../../SiteMenu/index.js'
+import { SiteMenu, SiteMenuProps } from '../../SiteMenu/index.ts'
 
 export interface SystemToolbarProps extends ToolbarProps {
   darkModeButton?: boolean
@@ -29,20 +29,22 @@ export const SystemToolbar: React.FC<SystemToolbarProps> = ({
   return (
     <Toolbar {...props}>
       {precedingChildren}
-      {hideNetworkSelect ? null : (
-        <FlexRow marginX={0.5}>
-          <Paper variant="elevation">
-            <NetworkSelectEx fullWidth {...networkSelectProps} />
-          </Paper>
-        </FlexRow>
-      )}
+      {hideNetworkSelect
+        ? null
+        : (
+            <FlexRow marginX={0.5}>
+              <Paper variant="elevation">
+                <NetworkSelectEx fullWidth {...networkSelectProps} />
+              </Paper>
+            </FlexRow>
+          )}
       {children}
-      {darkModeButton ?
-        <DarkModeIconButton color="inherit" />
-      : null}
-      {menuItems ?
-        <SiteMenu onMenuToggle={onMenuToggle}>{menuItems}</SiteMenu>
-      : null}
+      {darkModeButton
+        ? <DarkModeIconButton color="inherit" />
+        : null}
+      {menuItems
+        ? <SiteMenu onMenuToggle={onMenuToggle}>{menuItems}</SiteMenu>
+        : null}
     </Toolbar>
   )
 }

package/src/components/Toolbar/System/index.ts

@@ -1 +1 @@
-export * from './SystemToolbar.js'
+export * from './SystemToolbar.tsx'

package/src/components/Toolbar/index.ts

@@ -1,2 +1,2 @@
-export * from './Context/index.js'
-export * from './System/index.js'
+export * from './Context/index.ts'
+export * from './System/index.ts'

package/src/components/index.ts

@@ -1,6 +1,6 @@
-export * from './AppBar/index.js'
-export * from './CollapsibleDrawer/index.js'
-export * from './MobileSystemControls/index.js'
-export * from './SearchBar/index.js'
-export * from './SiteMenu/index.js'
-export * from './Toolbar/index.js'
+export * from './AppBar/index.ts'
+export * from './CollapsibleDrawer/index.ts'
+export * from './MobileSystemControls/index.ts'
+export * from './SearchBar/index.ts'
+export * from './SiteMenu/index.ts'
+export * from './Toolbar/index.ts'

package/src/contexts/Collapsible/context.ts

@@ -1,5 +1,5 @@
 import { createContextEx } from '@xyo-network/react-shared'
 
-import { CollapsibleState } from './State.js'
+import { CollapsibleState } from './State.ts'
 
 export const CollapsibleContext = createContextEx<CollapsibleState>()

package/src/contexts/Collapsible/index.ts

@@ -1,3 +1,3 @@
-export * from './provider.js'
-export * from './State.js'
-export * from './use.js'
+export * from './provider.tsx'
+export * from './State.ts'
+export * from './use.ts'

package/src/contexts/Collapsible/provider.tsx

@@ -1,7 +1,7 @@
 import { WithChildren } from '@xylabs/react-shared'
-import { useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 
-import { CollapsibleContext } from './context.js'
+import { CollapsibleContext } from './context.ts'
 
 export interface CollapsibleProviderProps extends WithChildren {
   defaultCollapse?: boolean
@@ -21,6 +21,7 @@ export const CollapsibleProvider: React.FC<CollapsibleProviderProps> = ({ defaul
   }, [defaultCollapseEnd])
 
   return (
+    // eslint-disable-next-line @eslint-react/no-unstable-context-value
     <CollapsibleContext.Provider value={{ collapse, collapseEnd, provided: true, setCollapse, setCollapseEnd }}>
       {children}
     </CollapsibleContext.Provider>

package/src/contexts/Collapsible/{use.tsx → use.ts}

@@ -1,5 +1,5 @@
 import { useContextEx } from '@xyo-network/react-shared'
 
-import { CollapsibleContext } from './context.js'
+import { CollapsibleContext } from './context.ts'
 
 export const useCollapsible = () => useContextEx(CollapsibleContext, 'Collapsible', false)

package/src/contexts/index.ts

@@ -1 +1 @@
-export * from './Collapsible/index.js'
+export * from './Collapsible/index.ts'

package/src/index.ts

@@ -1,2 +1,2 @@
-export * from './components/index.js'
-export * from './contexts/index.js'
+export * from './components/index.ts'
+export * from './contexts/index.ts'