@stack-spot/citric-react 0.41.2 → 0.42.0-beta.0

package/src/components/MenuOverlay/Menu.tsx

@@ -1,158 +1,158 @@
-import { listToClass } from '@stack-spot/portal-theme'
-import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
-import { createElement, useEffect, useMemo } from 'react'
-import { ValueController } from '../../utils/ValueController'
-import { CitricComponent } from '../CitricComponent'
-import { IconButton } from '../IconBox'
-import { useOverlayController } from '../Overlay/context'
-import { MenuProvider, useMenuController, useMenuState } from './context'
-import { keyboardNavigation } from './keyboard'
-import { MenuAction as MenuActionI, MenuCollapsible, MenuItem, MenuProps, MenuSection as MenuSectionI, MenuState } from './types'
-
-// Arbitrary time (ms) to wait before running a function that needs the view to be updated with the next state value.
-const RENDER_DELAY = 20
-
-function Submenu({ children, label, className, icon, iconRight, style }: MenuCollapsible) {
-  const controller = useMenuController()
-  return (
-    <button
-      className={listToClass([className, 'submenu'])}
-      style={style}
-      onClick={(e) => {
-        e.stopPropagation()
-        const menu = e.target instanceof HTMLElement ? e.target.closest('[data-citric="menu"]') : undefined
-        controller?.setValue({ items: children, label, parent: controller?.getValue() })
-        const isOpenedWithMouse = e.detail > 0
-        if (!isOpenedWithMouse) {
-          setTimeout(() => {
-            const firstFocusable = menu?.querySelector('a, button')
-            if (firstFocusable instanceof HTMLElement) firstFocusable.focus()
-          }, RENDER_DELAY) 
-        }
-      }}
-    >
-      {icon}
-      <span>{label}</span>
-      {iconRight}
-    </button>
-  )
-}
-
-function MenuSection({ children, label, className, style }: MenuSectionI) {
-  return (
-    <section className={className} style={style}>
-      {label && <h6>{label}</h6>}
-      <nav>
-        <MenuItems items={children} />
-      </nav>
-      {!label && <hr />}
-    </section>
-  )
-}
-
-function MenuAction({ label, active, href, icon, iconRight, className, onClick, ...props }: MenuActionI) {
-  const overlayController = useOverlayController()
-  const children = <>
-    {icon}
-    {typeof label === 'string' ? <span>{label}</span> : label.element}
-    {iconRight}
-  </>
-  return createElement(
-    href ? 'a' : 'button',
-    {
-      href,
-      'aria-label': typeof label === 'string' ? label : label.id,
-      className: listToClass([className, active && 'active']),
-      onClick: (e) => {
-        overlayController?.close()
-        onClick?.(e)
-      },
-      ...props,
-    },
-    children,
-  )
-}
-
-function hasSections(items: MenuItem[]) {
-  return items.some(i => 'children' in i && i.children.length && i.type === 'section')
-}
-
-function hasSubmenus(items: MenuItem[]) {
-  return items.some(i => 'children' in i && i.children.length && i.type === 'collapsible')
-}
-
-function MenuItems({ items }: { items: MenuItem[] }) {
-  return useMemo(() => items.map((item, index) => {
-    if ('children' in item && item.type === 'section') return <MenuSection key={item.label || index} {...item} />
-    if ('children' in item && item.type === 'collapsible') return <Submenu key={item.label || index} {...item} />
-    return <MenuAction key={(typeof item.label === 'string' ? item.label : item.label?.id) || index} {...item} />
-  }), [items])
-}
-
-/**
- * TODO: make the height changes animated.
- */
-export function Menu(
-  { items, appearance, bgLevel, header, roundedItems, showBorders, showShadows, spaced, className, onKeyDown, ...props }: MenuProps,
-) {
-  const controller = useMemo(() => new ValueController<MenuState>({ items }), [])
-  const current = useMenuState(controller)
-  const { sectioned, collapsible } = useMemo(
-    () => ({ sectioned: hasSections(current.items), collapsible: hasSubmenus(current.items) }),
-    [current.items],
-  )
-  const tag = header || sectioned || collapsible ? 'div' : 'nav'
-  const t = useTranslate(dictionary)
-
-  useEffect(() => {
-    if (items !== controller.getValue().items) controller.setValue({ items })
-  }, [items])
-  
-  return (
-    <MenuProvider value={controller}>
-      <CitricComponent
-        tag={tag}
-        component="menu"
-        className={listToClass([
-          className, appearance, roundedItems && 'rounded-items', showBorders && 'bordered', showShadows === false && 'no-shadow',
-          spaced && 'spaced', bgLevel && `bg-${bgLevel}`,
-        ])}
-        onKeyDown={(e: any) => {
-          keyboardNavigation(e)
-          onKeyDown?.(e)
-        }}
-        {...props}
-      >
-        {header && <header>{header}</header>}
-        {current.parent && (
-          <div className="back-button">
-            <IconButton
-              icon="ArrowLeft"
-              aria-label={t.goBack}
-              onClick={(e) => {
-                e.stopPropagation()
-                const menu = e.target instanceof HTMLElement ? e.target.closest('[data-citric="menu"]') : undefined
-                if (current.parent) controller.setValue(current.parent)
-                setTimeout(() => {
-                  const lastItem = Array.from(menu?.querySelectorAll('a, button') ?? []).find(el => el.textContent === current.label)
-                  if (lastItem instanceof HTMLElement) lastItem.focus()
-                }, RENDER_DELAY)
-              }}
-            />
-            <span>{current.label || t.goBack}</span>
-          </div>
-        )}
-        {sectioned ? <MenuItems items={current.items} /> : <nav><MenuItems items={current.items} /></nav>}
-      </CitricComponent>
-    </MenuProvider>
-  )
-}
-
-const dictionary = {
-  en: {
-    goBack: 'Go back',
-  },
-  pt: {
-    goBack: 'Voltar',
-  },
-} satisfies Dictionary
+import { listToClass } from '@stack-spot/portal-theme'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { createElement, useEffect, useMemo } from 'react'
+import { ValueController } from '../../utils/ValueController'
+import { CitricComponent } from '../CitricComponent'
+import { IconButton } from '../IconBox'
+import { useOverlayController } from '../Overlay/context'
+import { MenuProvider, useMenuController, useMenuState } from './context'
+import { keyboardNavigation } from './keyboard'
+import { MenuAction as MenuActionI, MenuCollapsible, MenuItem, MenuProps, MenuSection as MenuSectionI, MenuState } from './types'
+
+// Arbitrary time (ms) to wait before running a function that needs the view to be updated with the next state value.
+const RENDER_DELAY = 20
+
+function Submenu({ children, label, className, icon, iconRight, style }: MenuCollapsible) {
+  const controller = useMenuController()
+  return (
+    <button
+      className={listToClass([className, 'submenu'])}
+      style={style}
+      onClick={(e) => {
+        e.stopPropagation()
+        const menu = e.target instanceof HTMLElement ? e.target.closest('[data-citric="menu"]') : undefined
+        controller?.setValue({ items: children, label, parent: controller?.getValue() })
+        const isOpenedWithMouse = e.detail > 0
+        if (!isOpenedWithMouse) {
+          setTimeout(() => {
+            const firstFocusable = menu?.querySelector('a, button')
+            if (firstFocusable instanceof HTMLElement) firstFocusable.focus()
+          }, RENDER_DELAY) 
+        }
+      }}
+    >
+      {icon}
+      <span>{label}</span>
+      {iconRight}
+    </button>
+  )
+}
+
+function MenuSection({ children, label, className, style }: MenuSectionI) {
+  return (
+    <section className={className} style={style}>
+      {label && <h6>{label}</h6>}
+      <nav>
+        <MenuItems items={children} />
+      </nav>
+      {!label && <hr />}
+    </section>
+  )
+}
+
+function MenuAction({ label, active, href, icon, iconRight, className, onClick, ...props }: MenuActionI) {
+  const overlayController = useOverlayController()
+  const children = <>
+    {icon}
+    {typeof label === 'string' ? <span>{label}</span> : label.element}
+    {iconRight}
+  </>
+  return createElement(
+    href ? 'a' : 'button',
+    {
+      href,
+      'aria-label': typeof label === 'string' ? label : label.id,
+      className: listToClass([className, active && 'active']),
+      onClick: (e) => {
+        overlayController?.close()
+        onClick?.(e)
+      },
+      ...props,
+    },
+    children,
+  )
+}
+
+function hasSections(items: MenuItem[]) {
+  return items.some(i => 'children' in i && i.children.length && i.type === 'section')
+}
+
+function hasSubmenus(items: MenuItem[]) {
+  return items.some(i => 'children' in i && i.children.length && i.type === 'collapsible')
+}
+
+function MenuItems({ items }: { items: MenuItem[] }) {
+  return useMemo(() => items.map((item, index) => {
+    if ('children' in item && item.type === 'section') return <MenuSection key={item.label || index} {...item} />
+    if ('children' in item && item.type === 'collapsible') return <Submenu key={item.label || index} {...item} />
+    return <MenuAction key={(typeof item.label === 'string' ? item.label : item.label?.id) || index} {...item} />
+  }), [items])
+}
+
+/**
+ * TODO: make the height changes animated.
+ */
+export function Menu(
+  { items, appearance, bgLevel, header, roundedItems, showBorders, showShadows, spaced, className, onKeyDown, ...props }: MenuProps,
+) {
+  const controller = useMemo(() => new ValueController<MenuState>({ items }), [])
+  const current = useMenuState(controller)
+  const { sectioned, collapsible } = useMemo(
+    () => ({ sectioned: hasSections(current.items), collapsible: hasSubmenus(current.items) }),
+    [current.items],
+  )
+  const tag = header || sectioned || collapsible ? 'div' : 'nav'
+  const t = useTranslate(dictionary)
+
+  useEffect(() => {
+    if (items !== controller.getValue().items) controller.setValue({ items })
+  }, [items])
+  
+  return (
+    <MenuProvider value={controller}>
+      <CitricComponent
+        tag={tag}
+        component="menu"
+        className={listToClass([
+          className, appearance, roundedItems && 'rounded-items', showBorders && 'bordered', showShadows === false && 'no-shadow',
+          spaced && 'spaced', bgLevel && `bg-${bgLevel}`,
+        ])}
+        onKeyDown={(e: any) => {
+          keyboardNavigation(e)
+          onKeyDown?.(e)
+        }}
+        {...props}
+      >
+        {header && <header>{header}</header>}
+        {current.parent && (
+          <div className="back-button">
+            <IconButton
+              icon="ArrowLeft"
+              aria-label={t.goBack}
+              onClick={(e) => {
+                e.stopPropagation()
+                const menu = e.target instanceof HTMLElement ? e.target.closest('[data-citric="menu"]') : undefined
+                if (current.parent) controller.setValue(current.parent)
+                setTimeout(() => {
+                  const lastItem = Array.from(menu?.querySelectorAll('a, button') ?? []).find(el => el.textContent === current.label)
+                  if (lastItem instanceof HTMLElement) lastItem.focus()
+                }, RENDER_DELAY)
+              }}
+            />
+            <span>{current.label || t.goBack}</span>
+          </div>
+        )}
+        {sectioned ? <MenuItems items={current.items} /> : <nav><MenuItems items={current.items} /></nav>}
+      </CitricComponent>
+    </MenuProvider>
+  )
+}
+
+const dictionary = {
+  en: {
+    goBack: 'Go back',
+  },
+  pt: {
+    goBack: 'Voltar',
+  },
+} satisfies Dictionary

package/src/components/MenuOverlay/context.ts

@@ -1,20 +1,20 @@
-import { createContext, useContext, useEffect, useState } from 'react'
-import { ValueController } from '../../utils/ValueController'
-import { MenuState } from './types'
-
-const context = createContext<ValueController<MenuState> | undefined>(undefined)
-
-export const MenuProvider = context.Provider
-
-export function useMenuController() {
-  return useContext(context)
-}
-
-export function useMenuState(controller?: ValueController<MenuState>) {
-  const controllerFromContext = useMenuController()
-  controller ??= controllerFromContext
-  if (!controller) throw new Error('useMenuState used outside the context of a Menu')
-  const [state, setState] = useState(controller.getValue())
-  useEffect(() => controller.onChange(setState))
-  return state
-}
+import { createContext, useContext, useEffect, useState } from 'react'
+import { ValueController } from '../../utils/ValueController'
+import { MenuState } from './types'
+
+const context = createContext<ValueController<MenuState> | undefined>(undefined)
+
+export const MenuProvider = context.Provider
+
+export function useMenuController() {
+  return useContext(context)
+}
+
+export function useMenuState(controller?: ValueController<MenuState>) {
+  const controllerFromContext = useMenuController()
+  controller ??= controllerFromContext
+  if (!controller) throw new Error('useMenuState used outside the context of a Menu')
+  const [state, setState] = useState(controller.getValue())
+  useEffect(() => controller.onChange(setState))
+  return state
+}

package/src/components/MenuOverlay/index.tsx

@@ -1,55 +1,55 @@
-import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
-import { useMemo } from 'react'
-import { IconButton } from '../IconBox'
-import { Overlay } from '../Overlay'
-import { Menu } from './Menu'
-import { MenuOverlayProps } from './types'
-
-/**
- * Creates a menu overlay for its child element. Whenever the child element is clicked, the menu appears. Closing the menu is also handled
- * by this component.
- * 
- * The menu is defined by the property "items" and can contain sections and sub menus.
- * 
- * If no child is provided, a button with the vertical ellipsis icon is rendered.
- * 
- * @example
- * 
- * ```
- * const items: MenuItem[] = useMemo([
- *   { label: 'View', href: `/resource/${id}` },
- *   { label: 'Edit', onClick: () => editResource(id) },
- *   { label: 'Remove', onClick: () => removeResource(id), style: { color: theme.color.danger[500] } },
- * ], [id])
- * 
- * return <MenuOverlay items={items}><IconButton icon="Plus" /></MenuOverlay>
- * ```
- */
-export const MenuOverlay = ({
-  id, items, appearance, bgLevel, header, roundedItems, showBorders, showShadows, spaced, menuClass, menuStyle, children, ...props
-}: MenuOverlayProps) => {
-  const t = useTranslate(dictionary)
-  const randomId = useMemo(() => `${Math.random()}`, [])
-  const menuProps = {
-    items, appearance, bgLevel, roundedItems, showBorders, showShadows, spaced, header, className: menuClass, style: menuStyle,
-  }
-  return (
-    <Overlay
-      content={<Menu {...menuProps} />}
-      attributes={{ id: id || randomId, style: { margin: '8px' } }}
-      triggerOn="click"
-      {...props}
-    >
-      {children ?? <IconButton icon="EllipsisVertical" aria-label={t.open} />}
-    </Overlay>
-  )
-}
-
-const dictionary = {
-  en: {
-    open: 'Open menu',
-  },
-  pt: {
-    open: 'Abrir menu',
-  },
-} satisfies Dictionary
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { useMemo } from 'react'
+import { IconButton } from '../IconBox'
+import { Overlay } from '../Overlay'
+import { Menu } from './Menu'
+import { MenuOverlayProps } from './types'
+
+/**
+ * Creates a menu overlay for its child element. Whenever the child element is clicked, the menu appears. Closing the menu is also handled
+ * by this component.
+ * 
+ * The menu is defined by the property "items" and can contain sections and sub menus.
+ * 
+ * If no child is provided, a button with the vertical ellipsis icon is rendered.
+ * 
+ * @example
+ * 
+ * ```
+ * const items: MenuItem[] = useMemo([
+ *   { label: 'View', href: `/resource/${id}` },
+ *   { label: 'Edit', onClick: () => editResource(id) },
+ *   { label: 'Remove', onClick: () => removeResource(id), style: { color: theme.color.danger[500] } },
+ * ], [id])
+ * 
+ * return <MenuOverlay items={items}><IconButton icon="Plus" /></MenuOverlay>
+ * ```
+ */
+export const MenuOverlay = ({
+  id, items, appearance, bgLevel, header, roundedItems, showBorders, showShadows, spaced, menuClass, menuStyle, children, ...props
+}: MenuOverlayProps) => {
+  const t = useTranslate(dictionary)
+  const randomId = useMemo(() => `${Math.random()}`, [])
+  const menuProps = {
+    items, appearance, bgLevel, roundedItems, showBorders, showShadows, spaced, header, className: menuClass, style: menuStyle,
+  }
+  return (
+    <Overlay
+      content={<Menu {...menuProps} />}
+      attributes={{ id: id || randomId, style: { margin: '8px' } }}
+      triggerOn="click"
+      {...props}
+    >
+      {children ?? <IconButton icon="EllipsisVertical" aria-label={t.open} />}
+    </Overlay>
+  )
+}
+
+const dictionary = {
+  en: {
+    open: 'Open menu',
+  },
+  pt: {
+    open: 'Abrir menu',
+  },
+} satisfies Dictionary

package/src/components/MenuOverlay/keyboard.ts

@@ -1,60 +1,60 @@
-// TODO: scroll the element into view when it's focused. Very important for accessibility in scrollable menus.
-
-function getCurrent(element: Element | undefined | null) {
-  return element instanceof HTMLElement
-    ? element.querySelector('button:focus, a:focus') as HTMLElement | null
-    : null
-}
-
-function getMenuItems(element: Element | undefined | null) {
-  return element instanceof HTMLElement ? element.querySelectorAll('button, a') : undefined
-}
-
-function focusFirst(element: Element | undefined | null) {
-  const first = getMenuItems(element)?.[0]
-  if (first instanceof HTMLElement) first.focus()
-}
-
-function focusLast(element: Element | undefined | null) {
-  const all = getMenuItems(element)
-  const last = all?.[all.length]
-  if (last instanceof HTMLElement) last.focus()
-}
-
-function indexOf(elements: NodeListOf<Element>, element: Element | undefined | null) {
-  for (let i = 0; i < elements.length; i++) {
-    if (elements[i] === element) return i
-  }
-  return -1
-}
-
-function focusPrevious(element: Element | undefined | null, current: HTMLElement) {
-  const all = getMenuItems(element)
-  const index = all ? indexOf(all, current) : -1
-  if (!all || index === -1) return
-  const prev = index === 0 ? all[all.length - 1] : all[index - 1]
-  if (prev instanceof HTMLElement) prev.focus()
-}
-
-function focusNext(element: Element | undefined | null, current: HTMLElement) {
-  const all = getMenuItems(element)
-  const index = all ? indexOf(all, current) : -1
-  if (!all || index === -1) return
-  const next = index >= all.length - 1 ? all[0] : all[index + 1]
-  if (next instanceof HTMLElement) next.focus()
-}
-
-export function keyboardNavigation(event: React.KeyboardEvent) {
-  if (!['ArrowUp', 'ArrowDown'].includes(event.key)) return
-  event.stopPropagation()
-  event.preventDefault()
-  const menu = event.target instanceof HTMLElement ? event.target.closest('[data-citric="menu"]') : undefined
-  const current = getCurrent(menu)
-  if (event.key === 'ArrowUp') {
-    if (current) focusPrevious(menu, current)
-    else focusLast(menu)
-  } else {
-    if (current) focusNext(menu, current)
-    else focusFirst(menu)
-  }
-}
+// TODO: scroll the element into view when it's focused. Very important for accessibility in scrollable menus.
+
+function getCurrent(element: Element | undefined | null) {
+  return element instanceof HTMLElement
+    ? element.querySelector('button:focus, a:focus') as HTMLElement | null
+    : null
+}
+
+function getMenuItems(element: Element | undefined | null) {
+  return element instanceof HTMLElement ? element.querySelectorAll('button, a') : undefined
+}
+
+function focusFirst(element: Element | undefined | null) {
+  const first = getMenuItems(element)?.[0]
+  if (first instanceof HTMLElement) first.focus()
+}
+
+function focusLast(element: Element | undefined | null) {
+  const all = getMenuItems(element)
+  const last = all?.[all.length]
+  if (last instanceof HTMLElement) last.focus()
+}
+
+function indexOf(elements: NodeListOf<Element>, element: Element | undefined | null) {
+  for (let i = 0; i < elements.length; i++) {
+    if (elements[i] === element) return i
+  }
+  return -1
+}
+
+function focusPrevious(element: Element | undefined | null, current: HTMLElement) {
+  const all = getMenuItems(element)
+  const index = all ? indexOf(all, current) : -1
+  if (!all || index === -1) return
+  const prev = index === 0 ? all[all.length - 1] : all[index - 1]
+  if (prev instanceof HTMLElement) prev.focus()
+}
+
+function focusNext(element: Element | undefined | null, current: HTMLElement) {
+  const all = getMenuItems(element)
+  const index = all ? indexOf(all, current) : -1
+  if (!all || index === -1) return
+  const next = index >= all.length - 1 ? all[0] : all[index + 1]
+  if (next instanceof HTMLElement) next.focus()
+}
+
+export function keyboardNavigation(event: React.KeyboardEvent) {
+  if (!['ArrowUp', 'ArrowDown'].includes(event.key)) return
+  event.stopPropagation()
+  event.preventDefault()
+  const menu = event.target instanceof HTMLElement ? event.target.closest('[data-citric="menu"]') : undefined
+  const current = getCurrent(menu)
+  if (event.key === 'ArrowUp') {
+    if (current) focusPrevious(menu, current)
+    else focusLast(menu)
+  } else {
+    if (current) focusNext(menu, current)
+    else focusFirst(menu)
+  }
+}