@stack-spot/portal-layout 0.0.50 → 0.0.52

package/src/components/SelectionList.tsx

@@ -1,268 +1,272 @@
-import { Flex, IconBox, Text } from '@citric/core'
-import { ArrowLeft, Check, ChevronRight } from '@citric/icons'
-import { IconButton } from '@citric/ui'
-import { WithStyle, listToClass, theme } from '@stack-spot/portal-theme'
-import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
-import { ReactElement, useCallback, useEffect, useMemo, useState } from 'react'
-import { styled } from 'styled-components'
-import { useKeyboardControls } from './menu/use-keyboard-controls'
-import { Action } from './types'
-
-interface ItemWithIcon {
-  icon?: React.ReactElement,
-  iconRight?: React.ReactElement,
-}
-
-export interface ListAction extends ItemWithIcon, Action {
-  active?: boolean,
-}
-
-interface ListGroup {
-  type?: 'section' | 'collapsible',
-  children: ListItem[],
-}
-
-interface ListSection extends ListGroup {
-  type: 'section',
-  label?: string,
-}
-
-interface ListCollapsible extends ListGroup, ItemWithIcon {
-  type?: 'collapsible',
-  label: string,
-}
-
-type ListItem = ListSection | ListCollapsible | ListAction
-
-interface CurrentItemList {
-  items: ListItem[],
-  label?: string,
-  parent?: CurrentItemList,
-}
-
-const ANIMATION_DURATION_MS = 300
-const MAX_HEIGHT_TRANSITION = `max-height ease-in ${ANIMATION_DURATION_MS / 1000}s`
-
-export interface SelectionListProps extends WithStyle {
-  id: string,
-  visible?: boolean,
-  items: ListItem[],
-  onHide?: () => void,
-  maxHeight?: string,
-  before?: ReactElement,
-  after?: ReactElement,
-  scroll?: boolean,
-}
-
-interface RenderOptions {
-  setCurrent: (current: CurrentItemList) => void,
-  controllerId?: string,
-  onClose?: () => void,
-}
-
-const SelectionBox = styled.div<{ $maxHeight: string, $scroll?: boolean }>`
-  max-height: 0;
-  overflow-y: ${({ $scroll }) => $scroll ? 'auto' : 'hidden'};
-  overflow-x: hidden;
-  transition: ${MAX_HEIGHT_TRANSITION}, visibility 0s ${ANIMATION_DURATION_MS / 1000}s;
-  z-index: 1;
-  box-shadow: 4px 4px 48px #000;
-  border-radius: 0.5rem;
-  visibility: hidden;
-
-  .selection-list-content {
-    display: flex;
-    flex-direction: column;
-    background: ${theme.color.light['500']};
-    border-radius: 0.5rem;
-    border: 1px solid ${theme.color.light['600']};
-    background-color: ${theme.color.light['300']};
-  }
-
-  .section-title, li > a {
-    height: 40px;
-    padding: 0 8px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-  }
-
-  li > a {
-    gap: 4px;
-    transition: background-color 0.2s;
-    &:hover, &:focus {
-      background: ${theme.color.light['400']};
-    }
-    .label {
-      flex: 1;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  }
-
-  li.section {
-    border-bottom: 2px solid ${theme.color.light['600']};
-    &:last-child {
-      border-bottom: none;
-    }
-  }
-
-  &.visible {
-    max-height: ${({ $maxHeight }) => $maxHeight};
-    visibility: visible;
-    transition: ${MAX_HEIGHT_TRANSITION};
-  }
-`
-
-function renderAction({
-  label, href, onClick, icon, iconRight, active, target, iconActive = <Check />,
-}: ListAction, { onClose }: RenderOptions) {
-  function handleClick() {
-    onClick?.()
-    onClose?.()
-  }
-
-  const isTextLabel = typeof label === 'string'
-
-  return (
-    <li key={isTextLabel ? label : label.id} className="action">
-      <a href={href} onClick={handleClick} target={target} tabIndex={0} aria-selected={active}>
-        {icon && <IconBox>{icon}</IconBox>}
-        {isTextLabel ? <Text appearance="body2" className="label">{label}</Text> : label.element}
-        {iconRight && <IconBox>{iconRight}</IconBox>}
-        {active && <IconBox>{iconActive}</IconBox>}
-      </a>
-    </li>
-  )
-}
-
-function renderCollapsible({ label, icon, iconRight, children }: ListCollapsible, { setCurrent, controllerId }: RenderOptions) {
-  function handleClick(ev: React.MouseEvent) {
-    // accessibility: this will tell the screen reader the section was expanded before this link is removed from the DOM.
-    (ev.target as HTMLElement)?.setAttribute?.('aria-expanded', 'true')
-    setCurrent({ items: children, label })
-  }
-  return (
-    <li key={label} className="collapsible">
-      <a onClick={handleClick} tabIndex={0} aria-expanded={false} aria-controls={controllerId}>
-        {icon && <IconBox>{icon}</IconBox>}
-        <Text appearance="body2" className="label">{label}</Text>
-        {iconRight && <IconBox>{iconRight}</IconBox>}
-        <IconBox><ChevronRight /></IconBox>
-      </a>
-    </li>
-  )
-}
-
-function renderSection({ label, children }: ListSection, options: RenderOptions) {
-  return (
-    <li key={label ?? children.map(c => c.label).join('-')} className="section">
-      {label && <Text appearance="overheader2" colorScheme="primary" className="section-title">{label}</Text>}
-      <ul>{children.map(i => renderItem(i, options))}</ul>
-    </li>
-  )
-}
-
-function renderItem(item: ListItem, options: RenderOptions) {
-  if ('children' in item) {
-    return item.type === 'section' ? renderSection(item, options) : renderCollapsible(item, options)
-  }
-  return renderAction(item, options)
-}
-
-export const SelectionList = ({
-  id, items, className, style, visible = true, maxHeight = '300px', onHide, before, after, scroll,
-}: SelectionListProps) => {
-  const t = useTranslate(dictionary)
-  const [current, setCurrent] = useState<CurrentItemList>({ items })
-  const { keyboardControlledElement: wrapper, attachKeyboardListeners, detachKeyboardListeners } = useKeyboardControls(
-    { onPressEscape: onHide, querySelectors: 'li.action a, li.collapsible a, button' },
-  )
-
-  const listItems = useMemo(
-    () => current.items.map(i => renderItem(
-      i,
-      {
-        setCurrent: (next: CurrentItemList) => setCurrent({ ...next, parent: current }),
-        onClose: onHide,
-        controllerId: id,
-      },
-    )),
-    [current],
-  )
-
-  const hide = useCallback((event: Event) => {
-    const target = (event.target as HTMLElement | null)
-    // if the element is not in the DOM anymore, we'll consider the click was inside the selection list
-    const isClickInsideSelectionList = !target?.isConnected || wrapper.current?.contains(target)
-    const isAction = target?.classList?.contains('action') || !!target?.closest('.action')
-    if (!isClickInsideSelectionList || isAction) onHide?.()
-  }, [])
-
-  useEffect(() => {
-    if (visible) {
-      setCurrent({ items })
-      attachKeyboardListeners()
-      if (onHide) setTimeout(() => document.addEventListener('click', hide), 50)
-    }
-    else {
-      detachKeyboardListeners()
-      document.removeEventListener('click', hide)
-    }
-  }, [visible])
-
-  return (
-    <SelectionBox
-      id={id}
-      ref={wrapper}
-      $maxHeight={maxHeight}
-      style={style}
-      className={listToClass(['selection-list', visible ? 'visible' : undefined, className])}
-      $scroll={scroll}
-      aria-hidden={!visible}
-    >
-      <div className="selection-list-content">
-        {before}
-        {current.parent
-          ? (
-            <Flex mt={5} mb={1} alignItems="center">
-              <IconButton
-                onClick={(ev) => {
-                  // accessibility: this will tell the screen reader the section was collapsed before this button is removed from the DOM.
-                  (ev.target as HTMLElement)?.setAttribute?.('aria-expanded', 'false')
-                  setCurrent(current.parent ?? { items })
-                }}
-                sx={{ mr: 3 }}
-                title={t.back}
-                aria-controls={id}
-                aria-expanded={true}
-              >
-                <ArrowLeft />
-              </IconButton>
-              <Text appearance="microtext1">{current.label}</Text>
-            </Flex>
-          )
-          : undefined
-        }
-        <ul>
-          {listItems}
-          {after &&
-            <li className="action">
-              {after}
-            </li>
-          }
-        </ul>
-      </div>
-    </SelectionBox>
-  )
-}
-
-const dictionary = {
-  en: {
-    back: 'Go back',
-  },
-  pt: {
-    back: 'Voltar',
-  },
-} satisfies Dictionary
+import { Flex, IconBox, Text } from '@citric/core'
+import { ArrowLeft, Check, ChevronRight } from '@citric/icons'
+import { IconButton } from '@citric/ui'
+import { WithStyle, listToClass, theme } from '@stack-spot/portal-theme'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { ReactElement, useCallback, useEffect, useMemo, useState } from 'react'
+import { styled } from 'styled-components'
+import { AnchorComponent, useAnchorTag } from '../layout-context'
+import { useKeyboardControls } from './menu/use-keyboard-controls'
+import { Action } from './types'
+
+interface ItemWithIcon {
+  icon?: React.ReactElement,
+  iconRight?: React.ReactElement,
+}
+
+export interface ListAction extends ItemWithIcon, Action {
+  active?: boolean,
+}
+
+interface ListGroup {
+  type?: 'section' | 'collapsible',
+  children: ListItem[],
+}
+
+interface ListSection extends ListGroup {
+  type: 'section',
+  label?: string,
+}
+
+interface ListCollapsible extends ListGroup, ItemWithIcon {
+  type?: 'collapsible',
+  label: string,
+}
+
+type ListItem = ListSection | ListCollapsible | ListAction
+
+interface CurrentItemList {
+  items: ListItem[],
+  label?: string,
+  parent?: CurrentItemList,
+}
+
+const ANIMATION_DURATION_MS = 300
+const MAX_HEIGHT_TRANSITION = `max-height ease-in ${ANIMATION_DURATION_MS / 1000}s`
+
+export interface SelectionListProps extends WithStyle {
+  id: string,
+  visible?: boolean,
+  items: ListItem[],
+  onHide?: () => void,
+  maxHeight?: string,
+  before?: ReactElement,
+  after?: ReactElement,
+  scroll?: boolean,
+}
+
+interface RenderOptions {
+  setCurrent: (current: CurrentItemList) => void,
+  controllerId?: string,
+  onClose?: () => void,
+  Link: AnchorComponent,
+}
+
+const SelectionBox = styled.div<{ $maxHeight: string, $scroll?: boolean }>`
+  max-height: 0;
+  overflow-y: ${({ $scroll }) => $scroll ? 'auto' : 'hidden'};
+  overflow-x: hidden;
+  transition: ${MAX_HEIGHT_TRANSITION}, visibility 0s ${ANIMATION_DURATION_MS / 1000}s;
+  z-index: 1;
+  box-shadow: 4px 4px 48px #000;
+  border-radius: 0.5rem;
+  visibility: hidden;
+
+  .selection-list-content {
+    display: flex;
+    flex-direction: column;
+    background: ${theme.color.light['500']};
+    border-radius: 0.5rem;
+    border: 1px solid ${theme.color.light['600']};
+    background-color: ${theme.color.light['300']};
+  }
+
+  .section-title, li > a {
+    height: 40px;
+    padding: 0 8px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  li > a {
+    gap: 4px;
+    transition: background-color 0.2s;
+    &:hover, &:focus {
+      background: ${theme.color.light['400']};
+    }
+    .label {
+      flex: 1;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  li.section {
+    border-bottom: 2px solid ${theme.color.light['600']};
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  &.visible {
+    max-height: ${({ $maxHeight }) => $maxHeight};
+    visibility: visible;
+    transition: ${MAX_HEIGHT_TRANSITION};
+  }
+`
+
+function renderAction({
+  label, href, onClick, icon, iconRight, active, target, iconActive = <Check />,
+}: ListAction, { onClose, Link }: RenderOptions) {
+  function handleClick() {
+    onClick?.()
+    onClose?.()
+  }
+
+  const isTextLabel = typeof label === 'string'
+
+  return (
+    <li key={isTextLabel ? label : label.id} className="action">
+      <Link href={href} onClick={handleClick} target={target} tabIndex={0} aria-selected={active}>
+        {icon && <IconBox>{icon}</IconBox>}
+        {isTextLabel ? <Text appearance="body2" className="label">{label}</Text> : label.element}
+        {iconRight && <IconBox>{iconRight}</IconBox>}
+        {active && <IconBox>{iconActive}</IconBox>}
+      </Link>
+    </li>
+  )
+}
+
+function renderCollapsible({ label, icon, iconRight, children }: ListCollapsible, { setCurrent, controllerId, Link }: RenderOptions) {
+  function handleClick(ev: React.MouseEvent) {
+    // accessibility: this will tell the screen reader the section was expanded before this link is removed from the DOM.
+    (ev.target as HTMLElement)?.setAttribute?.('aria-expanded', 'true')
+    setCurrent({ items: children, label })
+  }
+  return (
+    <li key={label} className="collapsible">
+      <Link onClick={handleClick} tabIndex={0} aria-expanded={false} aria-controls={controllerId}>
+        {icon && <IconBox>{icon}</IconBox>}
+        <Text appearance="body2" className="label">{label}</Text>
+        {iconRight && <IconBox>{iconRight}</IconBox>}
+        <IconBox><ChevronRight /></IconBox>
+      </Link>
+    </li>
+  )
+}
+
+function renderSection({ label, children }: ListSection, options: RenderOptions) {
+  return (
+    <li key={label ?? children.map(c => c.label).join('-')} className="section">
+      {label && <Text appearance="overheader2" colorScheme="primary" className="section-title">{label}</Text>}
+      <ul>{children.map(i => renderItem(i, options))}</ul>
+    </li>
+  )
+}
+
+function renderItem(item: ListItem, options: RenderOptions) {
+  if ('children' in item) {
+    return item.type === 'section' ? renderSection(item, options) : renderCollapsible(item, options)
+  }
+  return renderAction(item, options)
+}
+
+export const SelectionList = ({
+  id, items, className, style, visible = true, maxHeight = '300px', onHide, before, after, scroll,
+}: SelectionListProps) => {
+  const Link = useAnchorTag()
+  const t = useTranslate(dictionary)
+  const [current, setCurrent] = useState<CurrentItemList>({ items })
+  const { keyboardControlledElement: wrapper, attachKeyboardListeners, detachKeyboardListeners } = useKeyboardControls(
+    { onPressEscape: onHide, querySelectors: 'li.action a, li.collapsible a, button' },
+  )
+
+  const listItems = useMemo(
+    () => current.items.map(i => renderItem(
+      i,
+      {
+        setCurrent: (next: CurrentItemList) => setCurrent({ ...next, parent: current }),
+        onClose: onHide,
+        controllerId: id,
+        Link,
+      },
+    )),
+    [current],
+  )
+
+  const hide = useCallback((event: Event) => {
+    const target = (event.target as HTMLElement | null)
+    // if the element is not in the DOM anymore, we'll consider the click was inside the selection list
+    const isClickInsideSelectionList = !target?.isConnected || wrapper.current?.contains(target)
+    const isAction = target?.classList?.contains('action') || !!target?.closest('.action')
+    if (!isClickInsideSelectionList || isAction) onHide?.()
+  }, [])
+
+  useEffect(() => {
+    if (visible) {
+      setCurrent({ items })
+      attachKeyboardListeners()
+      if (onHide) setTimeout(() => document.addEventListener('click', hide), 50)
+    }
+    else {
+      detachKeyboardListeners()
+      document.removeEventListener('click', hide)
+    }
+  }, [visible])
+
+  return (
+    <SelectionBox
+      id={id}
+      ref={wrapper}
+      $maxHeight={maxHeight}
+      style={style}
+      className={listToClass(['selection-list', visible ? 'visible' : undefined, className])}
+      $scroll={scroll}
+      aria-hidden={!visible}
+    >
+      <div className="selection-list-content">
+        {before}
+        {current.parent
+          ? (
+            <Flex mt={5} mb={1} alignItems="center">
+              <IconButton
+                onClick={(ev) => {
+                  // accessibility: this will tell the screen reader the section was collapsed before this button is removed from the DOM.
+                  (ev.target as HTMLElement)?.setAttribute?.('aria-expanded', 'false')
+                  setCurrent(current.parent ?? { items })
+                }}
+                sx={{ mr: 3 }}
+                title={t.back}
+                aria-controls={id}
+                aria-expanded={true}
+              >
+                <ArrowLeft />
+              </IconButton>
+              <Text appearance="microtext1">{current.label}</Text>
+            </Flex>
+          )
+          : undefined
+        }
+        <ul>
+          {listItems}
+          {after &&
+            <li className="action">
+              {after}
+            </li>
+          }
+        </ul>
+      </div>
+    </SelectionBox>
+  )
+}
+
+const dictionary = {
+  en: {
+    back: 'Go back',
+  },
+  pt: {
+    back: 'Voltar',
+  },
+} satisfies Dictionary

package/src/components/Toaster.tsx

@@ -1,16 +1,16 @@
-import { TimesMini } from '@citric/icons'
-import { IconButton } from '@citric/ui'
-import { CloseButtonProps, ToastContainer } from 'react-toastify'
-import 'react-toastify/dist/ReactToastify.css'
-import { useDictionary } from '../dictionary'
-
-const CloseButton = ({ closeToast }: CloseButtonProps) => {
-  const t = useDictionary()
-  return (
-    <IconButton onClick={() => closeToast(null as any)} title={t.dismiss}>
-      <TimesMini />
-    </IconButton>
-  )
-}
-
-export const Toaster = () => <ToastContainer closeButton={CloseButton} />
+import { TimesMini } from '@citric/icons'
+import { IconButton } from '@citric/ui'
+import { CloseButtonProps, ToastContainer } from 'react-toastify'
+import 'react-toastify/dist/ReactToastify.css'
+import { useDictionary } from '../dictionary'
+
+const CloseButton = ({ closeToast }: CloseButtonProps) => {
+  const t = useDictionary()
+  return (
+    <IconButton onClick={() => closeToast(null as any)} title={t.dismiss}>
+      <TimesMini />
+    </IconButton>
+  )
+}
+
+export const Toaster = () => <ToastContainer closeButton={CloseButton} />