@stack-spot/portal-layout 0.0.48 → 0.0.50

package/src/components/menu/PageSelector.tsx

@@ -1,152 +1,152 @@
-import { IconBox, Text } from '@citric/core'
-import { ArrowRight, Select } from '@citric/icons'
-import { LoadingCircular } from '@citric/ui'
-import { theme } from '@stack-spot/portal-theme'
-import { Dictionary, interpolate, useTranslate } from '@stack-spot/portal-translate'
-import { useMemo, useRef, useState } from 'react'
-import { styled } from 'styled-components'
-import { ListAction, SelectionList } from '../SelectionList'
-import { MENU_CONTENT_PADDING as PADDING } from './constants'
-import { Selector } from './types'
-import { useCheckTextOverflow } from './use-check-text-overflow'
-
-const SelectorBox = styled.div`
-  position: relative;
-  margin: ${PADDING}px;
-  margin-bottom: 28px;
-
-  > a {
-    display: flex;
-    gap: 8px;
-    align-items: center;
-    border-radius: 0.25rem;
-    border: 1px solid ${theme.color.light['500']};
-    padding: 8px;
-    transition: background-color 0.2s;
-
-    &:hover {
-      background-color: ${theme.color.light['500']};
-    }
-
-    .label {
-      flex: 1;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  }
-
-  .selection-list {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    box-shadow: none;
-    border-radius: 0.25rem;
-
-    .selection-list-content {
-      padding: 8px;
-      border-radius: 0.25rem;
-      border: none;
-      ul {
-        display: flex;
-        flex-direction: column;
-        gap: 8px;
-      }
-    }
-
-    li > a {
-      border: 1px solid ${theme.color.light['500']};
-      background-color: ${theme.color.light['400']};
-
-      &:hover {
-        background-color: ${theme.color.light['500']};
-      }
-    }
-
-    .view-all {
-      background: ${theme.color.light['500']};
-      border-radius: 0.25rem;
-      height: 40px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin-top: 8px;
-    }
-  }
-`
-
-export const PageSelector = ({ options, value, button, loading, title }: Selector) => {
-  const t = useTranslate(dictionary)
-  const [visible, setVisible] = useState(false)
-  const { ref, overflow } = useCheckTextOverflow()
-  const id = useRef(`pageSelector${title || Math.random()}`)
-  const { optionsWithIcon, selected } = useMemo(
-    () => {
-      let selected = options[0]
-      const optionsWithIcon = options.map<ListAction>((option) => {
-        if (option.key === value) {
-          selected = option
-          return { ...option, active: true }
-        }
-        return { ...option, iconRight: <ArrowRight /> }
-      })
-      return { optionsWithIcon, selected }
-    },
-    [options, value, button],
-  )
-
-  const label = selected?.label ?? button?.label ?? value
-  const isTextLabel = typeof label == 'string'
-  const labelText = typeof label === 'string' ? label : label.id
-  const buttonLabelText = typeof button?.label == 'string' ? button?.label : button?.label.id
-
-  return (
-    <SelectorBox>
-      {loading
-        ? <LoadingCircular />
-        : (
-          <>
-            {title && <Text colorScheme="light.700" sx={{ mb: 3 }}>{title}</Text>}
-            <a
-              onClick={() => setVisible(true)}
-              onKeyDown={e => e.key === 'Enter' && setVisible(true)}
-              title={value}
-              tabIndex={0}
-              aria-label={interpolate(t.accessibility, [value])}
-              aria-expanded={visible}
-              aria-controls={id.current}
-            >
-              {selected?.icon && <IconBox>{selected?.icon}</IconBox>}
-              {isTextLabel ?
-                <Text ref={ref} appearance="body2" className="label" title={overflow ? labelText : ''}>{labelText}</Text> :
-                label.element}
-              <IconBox size="xs"><Select /></IconBox>
-            </a>
-
-            <SelectionList
-              id={id.current}
-              visible={visible}
-              items={optionsWithIcon}
-              onHide={() => setVisible(false)}
-              after={button ?
-                <a className="view-all" tabIndex={0} href={button.href} onClick={button.onClick}>{buttonLabelText}</a>
-                : undefined}
-              scroll
-            />
-          </>
-        )
-      }
-    </SelectorBox>
-  )
-}
-
-const dictionary = {
-  en: {
-    accessibility: 'Current value: $0. Press Enter to change.',
-  },
-  pt: {
-    accessibility: 'Valor atual: $0. Aperte Enter para mudar.',
-  },
-} satisfies Dictionary
-
+import { IconBox, Text } from '@citric/core'
+import { ArrowRight, Select } from '@citric/icons'
+import { LoadingCircular } from '@citric/ui'
+import { theme } from '@stack-spot/portal-theme'
+import { Dictionary, interpolate, useTranslate } from '@stack-spot/portal-translate'
+import { useMemo, useRef, useState } from 'react'
+import { styled } from 'styled-components'
+import { ListAction, SelectionList } from '../SelectionList'
+import { MENU_CONTENT_PADDING as PADDING } from './constants'
+import { Selector } from './types'
+import { useCheckTextOverflow } from './use-check-text-overflow'
+
+const SelectorBox = styled.div`
+  position: relative;
+  margin: ${PADDING}px;
+  margin-bottom: 28px;
+
+  > a {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    border-radius: 0.25rem;
+    border: 1px solid ${theme.color.light['500']};
+    padding: 8px;
+    transition: background-color 0.2s;
+
+    &:hover {
+      background-color: ${theme.color.light['500']};
+    }
+
+    .label {
+      flex: 1;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  .selection-list {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    box-shadow: none;
+    border-radius: 0.25rem;
+
+    .selection-list-content {
+      padding: 8px;
+      border-radius: 0.25rem;
+      border: none;
+      ul {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+      }
+    }
+
+    li > a {
+      border: 1px solid ${theme.color.light['500']};
+      background-color: ${theme.color.light['400']};
+
+      &:hover {
+        background-color: ${theme.color.light['500']};
+      }
+    }
+
+    .view-all {
+      background: ${theme.color.light['500']};
+      border-radius: 0.25rem;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-top: 8px;
+    }
+  }
+`
+
+export const PageSelector = ({ options, value, button, loading, title }: Selector) => {
+  const t = useTranslate(dictionary)
+  const [visible, setVisible] = useState(false)
+  const { ref, overflow } = useCheckTextOverflow()
+  const id = useRef(`pageSelector${title || Math.random()}`)
+  const { optionsWithIcon, selected } = useMemo(
+    () => {
+      let selected = options[0]
+      const optionsWithIcon = options.map<ListAction>((option) => {
+        if (option.key === value) {
+          selected = option
+          return { ...option, active: true }
+        }
+        return { ...option, iconRight: <ArrowRight /> }
+      })
+      return { optionsWithIcon, selected }
+    },
+    [options, value, button],
+  )
+
+  const label = selected?.label ?? button?.label ?? value
+  const isTextLabel = typeof label == 'string'
+  const labelText = typeof label === 'string' ? label : label.id
+  const buttonLabelText = typeof button?.label == 'string' ? button?.label : button?.label.id
+
+  return (
+    <SelectorBox>
+      {loading
+        ? <LoadingCircular />
+        : (
+          <>
+            {title && <Text colorScheme="light.700" sx={{ mb: 3 }}>{title}</Text>}
+            <a
+              onClick={() => setVisible(true)}
+              onKeyDown={e => e.key === 'Enter' && setVisible(true)}
+              title={value}
+              tabIndex={0}
+              aria-label={interpolate(t.accessibility, [value])}
+              aria-expanded={visible}
+              aria-controls={id.current}
+            >
+              {selected?.icon && <IconBox>{selected?.icon}</IconBox>}
+              {isTextLabel ?
+                <Text ref={ref} appearance="body2" className="label" title={overflow ? labelText : ''}>{labelText}</Text> :
+                label.element}
+              <IconBox size="xs"><Select /></IconBox>
+            </a>
+
+            <SelectionList
+              id={id.current}
+              visible={visible}
+              items={optionsWithIcon}
+              onHide={() => setVisible(false)}
+              after={button ?
+                <a className="view-all" tabIndex={0} href={button.href} onClick={button.onClick}>{buttonLabelText}</a>
+                : undefined}
+              scroll
+            />
+          </>
+        )
+      }
+    </SelectorBox>
+  )
+}
+
+const dictionary = {
+  en: {
+    accessibility: 'Current value: $0. Press Enter to change.',
+  },
+  pt: {
+    accessibility: 'Valor atual: $0. Aperte Enter para mudar.',
+  },
+} satisfies Dictionary
+

package/src/components/menu/constants.ts

@@ -1,2 +1,2 @@
-export const MENU_CONTENT_PADDING = 20
-export const MENU_CONTENT_ITEM_PADDING = 16
+export const MENU_CONTENT_PADDING = 20
+export const MENU_CONTENT_ITEM_PADDING = 16

package/src/components/menu/types.ts

@@ -1,112 +1,112 @@
-import { ReactElement, ReactNode } from 'react'
-import { Action } from '../types'
-
-interface BaseMenuItem {
-  hidden?: boolean,
-  /**
-   * React element on the left.
-   */
-  icon?: React.ReactElement,
-  /**
-   * React element on the right.
-   */
-  badge?: React.ReactElement,
-  /**
-   * Whether to wrap overflowing text, just hide or hide and add an ellipsis (...).
-   * @default 'wrap'
-   */
-  overflow?: 'hidden' | 'wrap' | 'ellipsis',
-}
-
-export interface ItemGroup extends BaseMenuItem {
-  label: string,
-  children: MenuItem[],
-  open?: boolean,
-}
-
-export interface MenuAction extends Action, BaseMenuItem {
-  active?: boolean,
-}
-
-export type MenuItem = ItemGroup | MenuAction
-
-export interface MenuButton extends Action {
-  icon?: ReactElement,
-}
-
-export interface SelectorItem extends Action {
-  key: string,
-  icon?: ReactElement,
-}
-
-export interface Selector {
-  value?: string,
-  options: SelectorItem[],
-  button?: Action,
-  title?: string,
-  subtitle?: string,
-  loading?: boolean,
-}
-
-export interface MenuSectionContent {
-  goBack?: Action,
-  title?: string,
-  subtitle?: string,
-  afterTitle?: React.ReactNode,
-  pageSelector?: Selector,
-  options?: MenuItem[],
-  loading?: boolean,
-  error?: string,
-}
-
-export interface MenuSection extends Action {
-  icon: ReactElement,
-  /**
-   * The content or a function that creates the content.
-   * If this is a function, it will be called only when the section is hovered, i.e. only when the content really needs to be rendered.
-   * Tip: this function can be a React Hook.
-   */
-  content?: MenuSectionContent | (() => MenuSectionContent),
-  /**
-   * The content or a function that creates the content.
-   * If this is a function, it will be called only when the section is hovered, i.e. only when the content really needs to be rendered.
-   * Tip: this function can be a React Hook.
-   * This should be used when the content you want to render is not the default content
-   */
-  customContent?: ReactNode,
-  active?: boolean,
-  onOpen?: () => void,
-  className?: string,
-}
-
-interface BaseMenuProps {
-  sections?: MenuSection[],
-  customContent?: ReactNode,
-  settings?: {
-    show?: boolean,
-    onClick?: () => void,
-    href?: string,
-    active?: boolean,
-    className?: string,
-  },
-}
-
-export interface MenuPropsWithStaticContent extends BaseMenuProps {
-  content?: MenuSectionContent,
-}
-
-export interface MenuPropsWithDynamicContent extends BaseMenuProps {
-  /**
-   * The function that creates the content. It will be called only when the content is rendered, i.e. only when the content really needs to
-   * be rendered.
-   * 
-   * Tip: this function can be a React Hook.
-   */
-  content: MenuSectionContent | (() => MenuSectionContent),
-  /**
-   * Identifies each content that might be rendered by the menu. This prevents React Hook errors when the content is a React Hook function.
-   */
-  contentKey: React.Key,
-}
-
-export type MenuProps = MenuPropsWithStaticContent | MenuPropsWithDynamicContent
+import { ReactElement, ReactNode } from 'react'
+import { Action } from '../types'
+
+interface BaseMenuItem {
+  hidden?: boolean,
+  /**
+   * React element on the left.
+   */
+  icon?: React.ReactElement,
+  /**
+   * React element on the right.
+   */
+  badge?: React.ReactElement,
+  /**
+   * Whether to wrap overflowing text, just hide or hide and add an ellipsis (...).
+   * @default 'wrap'
+   */
+  overflow?: 'hidden' | 'wrap' | 'ellipsis',
+}
+
+export interface ItemGroup extends BaseMenuItem {
+  label: string,
+  children: MenuItem[],
+  open?: boolean,
+}
+
+export interface MenuAction extends Action, BaseMenuItem {
+  active?: boolean,
+}
+
+export type MenuItem = ItemGroup | MenuAction
+
+export interface MenuButton extends Action {
+  icon?: ReactElement,
+}
+
+export interface SelectorItem extends Action {
+  key: string,
+  icon?: ReactElement,
+}
+
+export interface Selector {
+  value?: string,
+  options: SelectorItem[],
+  button?: Action,
+  title?: string,
+  subtitle?: string,
+  loading?: boolean,
+}
+
+export interface MenuSectionContent {
+  goBack?: Action,
+  title?: string,
+  subtitle?: string,
+  afterTitle?: React.ReactNode,
+  pageSelector?: Selector,
+  options?: MenuItem[],
+  loading?: boolean,
+  error?: string,
+}
+
+export interface MenuSection extends Action {
+  icon: ReactElement,
+  /**
+   * The content or a function that creates the content.
+   * If this is a function, it will be called only when the section is hovered, i.e. only when the content really needs to be rendered.
+   * Tip: this function can be a React Hook.
+   */
+  content?: MenuSectionContent | (() => MenuSectionContent),
+  /**
+   * The content or a function that creates the content.
+   * If this is a function, it will be called only when the section is hovered, i.e. only when the content really needs to be rendered.
+   * Tip: this function can be a React Hook.
+   * This should be used when the content you want to render is not the default content
+   */
+  customContent?: ReactNode,
+  active?: boolean,
+  onOpen?: () => void,
+  className?: string,
+}
+
+interface BaseMenuProps {
+  sections?: MenuSection[],
+  customContent?: ReactNode,
+  settings?: {
+    show?: boolean,
+    onClick?: () => void,
+    href?: string,
+    active?: boolean,
+    className?: string,
+  },
+}
+
+export interface MenuPropsWithStaticContent extends BaseMenuProps {
+  content?: MenuSectionContent,
+}
+
+export interface MenuPropsWithDynamicContent extends BaseMenuProps {
+  /**
+   * The function that creates the content. It will be called only when the content is rendered, i.e. only when the content really needs to
+   * be rendered.
+   * 
+   * Tip: this function can be a React Hook.
+   */
+  content: MenuSectionContent | (() => MenuSectionContent),
+  /**
+   * Identifies each content that might be rendered by the menu. This prevents React Hook errors when the content is a React Hook function.
+   */
+  contentKey: React.Key,
+}
+
+export type MenuProps = MenuPropsWithStaticContent | MenuPropsWithDynamicContent

package/src/components/menu/use-check-text-overflow.tsx

@@ -1,26 +1,26 @@
-import { useState, useRef, useEffect } from 'react'
-
-export function useCheckTextOverflow() {
-  const [overflow, setOverflow] = useState<boolean>(false)
-  const ref = useRef<HTMLParagraphElement>(null) 
-
-  const checkOverflow = () => {
-    if (!ref.current) {
-      return
-    }
-
-    const hasOverflow = ref.current.offsetWidth < ref.current.scrollWidth
-    
-    if (hasOverflow === overflow) {
-      return
-    }
-
-    setOverflow(hasOverflow)  
-  }
-
-  useEffect(() => {    
-    checkOverflow()
-  }, [ref.current])
-
-  return { overflow, ref }
-}
+import { useState, useRef, useEffect } from 'react'
+
+export function useCheckTextOverflow() {
+  const [overflow, setOverflow] = useState<boolean>(false)
+  const ref = useRef<HTMLParagraphElement>(null) 
+
+  const checkOverflow = () => {
+    if (!ref.current) {
+      return
+    }
+
+    const hasOverflow = ref.current.offsetWidth < ref.current.scrollWidth
+    
+    if (hasOverflow === overflow) {
+      return
+    }
+
+    setOverflow(hasOverflow)  
+  }
+
+  useEffect(() => {    
+    checkOverflow()
+  }, [ref.current])
+
+  return { overflow, ref }
+}