@stack-spot/portal-layout 1.0.2 → 1.1.0

package/src/components/menu/PageSelector.tsx

@@ -1,164 +1,164 @@
-import { IconBox, Text } from '@citric/core'
-import { ArrowRight, Select } from '@citric/icons'
-import { LoadingCircular } from '@citric/ui'
-import { useCheckTextOverflow } from '@stack-spot/portal-components'
-import { ListAction, SelectionList } from '@stack-spot/portal-components/SelectionList'
-import { useAnchorTag } from '@stack-spot/portal-components/anchor'
-import { theme } from '@stack-spot/portal-theme'
-import { Dictionary, interpolate, useTranslate } from '@stack-spot/portal-translate'
-import { KeyboardEvent, useMemo, useRef, useState } from 'react'
-import { styled } from 'styled-components'
-import { MENU_CONTENT_PADDING as PADDING } from './constants'
-import { Selector } from './types'
-
-const SelectorBox = styled.div`
-  position: relative;
-  margin: ${PADDING}px;
-  margin-bottom: 28px;
-
-  > button {
-    display: flex;
-    gap: 8px;
-    align-items: center;
-    border-radius: 0.25rem;
-    background-color: transparent;
-    border: 1px solid ${theme.color.light['500']};
-    padding: 8px;
-    transition: background-color 0.2s;
-    color: ${theme.color.light['contrastText']};
-    width: 100%;
-    text-align: left;
-
-    &:hover {
-      background-color: ${theme.color.light['500']};
-      cursor: pointer;
-    }
-
-    .label {
-      flex: 1;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  }
-
-  .selection-list {
-    position: absolute;
-    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;
-    }
-  }
-`
-
-/**
- * A selector component to render inside a menu-content. Allows the user to select another page.
- * 
- * @param props the React props for the component {@link Selector}.
- */
-export const PageSelector = ({ options, value, button, loading, title }: Selector) => {
-  const Link = useAnchorTag()
-  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>}
-            <button
-              onClick={() => setVisible(true)}
-              onKeyDown={(e: KeyboardEvent<HTMLButtonElement>) => e.key === 'Enter' && setVisible(true)}
-              title={label as string}
-              tabIndex={0}
-              aria-label={interpolate(t.accessibility, [label])}
-              aria-expanded={visible}
-              aria-controls={id.current}
-              aria-haspopup="listbox"
-            >
-              {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>
-            </button>
-
-            <SelectionList
-              id={id.current}
-              visible={visible}
-              items={optionsWithIcon}
-              onHide={() => setVisible(false)}
-              after={button ?
-                <Link className="view-all" tabIndex={0} href={button.href} onClick={button.onClick}>{buttonLabelText}</Link>
-                : undefined}
-              scroll
-            />
-          </>
-        )
-      }
-    </SelectorBox>
-  )
-}
-
-const dictionary = {
-  en: {
-    accessibility: 'Current value: $0.',
-  },
-  pt: {
-    accessibility: 'Valor atual: $0.',
-  },
-} satisfies Dictionary
-
+import { IconBox, Text } from '@citric/core'
+import { ArrowRight, Select } from '@citric/icons'
+import { LoadingCircular } from '@citric/ui'
+import { useCheckTextOverflow } from '@stack-spot/portal-components'
+import { ListAction, SelectionList } from '@stack-spot/portal-components/SelectionList'
+import { useAnchorTag } from '@stack-spot/portal-components/anchor'
+import { theme } from '@stack-spot/portal-theme'
+import { Dictionary, interpolate, useTranslate } from '@stack-spot/portal-translate'
+import { KeyboardEvent, useMemo, useRef, useState } from 'react'
+import { styled } from 'styled-components'
+import { MENU_CONTENT_PADDING as PADDING } from './constants'
+import { Selector } from './types'
+
+const SelectorBox = styled.div`
+  position: relative;
+  margin: ${PADDING}px;
+  margin-bottom: 28px;
+
+  > button {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    border-radius: 0.25rem;
+    background-color: transparent;
+    border: 1px solid ${theme.color.light['500']};
+    padding: 8px;
+    transition: background-color 0.2s;
+    color: ${theme.color.light['contrastText']};
+    width: 100%;
+    text-align: left;
+
+    &:hover {
+      background-color: ${theme.color.light['500']};
+      cursor: pointer;
+    }
+
+    .label {
+      flex: 1;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  .selection-list {
+    position: absolute;
+    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;
+    }
+  }
+`
+
+/**
+ * A selector component to render inside a menu-content. Allows the user to select another page.
+ * 
+ * @param props the React props for the component {@link Selector}.
+ */
+export const PageSelector = ({ options, value, button, loading, title }: Selector) => {
+  const Link = useAnchorTag()
+  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>}
+            <button
+              onClick={() => setVisible(true)}
+              onKeyDown={(e: KeyboardEvent<HTMLButtonElement>) => e.key === 'Enter' && setVisible(true)}
+              title={label as string}
+              tabIndex={0}
+              aria-label={interpolate(t.accessibility, [label])}
+              aria-expanded={visible}
+              aria-controls={id.current}
+              aria-haspopup="listbox"
+            >
+              {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>
+            </button>
+
+            <SelectionList
+              id={id.current}
+              visible={visible}
+              items={optionsWithIcon}
+              onHide={() => setVisible(false)}
+              after={button ?
+                <Link className="view-all" tabIndex={0} href={button.href} onClick={button.onClick}>{buttonLabelText}</Link>
+                : undefined}
+              scroll
+            />
+          </>
+        )
+      }
+    </SelectorBox>
+  )
+}
+
+const dictionary = {
+  en: {
+    accessibility: 'Current value: $0.',
+  },
+  pt: {
+    accessibility: 'Valor atual: $0.',
+  },
+} 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