@duro-app/ui 5.34.1 → 5.34.3

package/src/components/Icon/phosphor-names.json

@@ -1,34 +1,49 @@
 [
+  "archive",
+  "arrow-arc-left",
   "arrow-circle-down",
   "arrow-circle-right",
   "arrow-circle-up",
   "arrow-clockwise",
   "arrow-down",
+  "arrow-elbow-down-left",
   "arrow-elbow-down-right",
   "arrow-left",
   "arrow-right",
   "arrow-square-out",
+  "arrow-up",
   "arrows-clockwise",
   "arrows-down-up",
+  "arrows-in",
   "arrows-left-right",
   "arrows-out",
   "article",
   "at",
+  "atom",
+  "backspace",
   "bell",
   "bell-slash",
+  "book",
+  "book-bookmark",
   "bookmark",
   "books",
   "browsers",
   "bug",
   "calendar",
+  "camera",
   "caret-down",
   "caret-left",
+  "caret-right",
+  "caret-up",
+  "chart-bar",
   "chart-line",
   "chat",
+  "chat-circle",
   "chat-circle-dots",
   "chat-dots",
   "chats-circle",
   "check",
+  "check-square",
   "checks",
   "circle",
   "circle-half",
@@ -42,27 +57,45 @@
   "code",
   "copy",
   "cpu",
+  "credit-card",
   "crosshair",
   "cube",
+  "currency-dollar",
   "desktop",
   "device-mobile",
+  "discord-logo",
+  "dots-six-vertical",
+  "dots-three",
   "download",
   "envelope",
+  "envelope-open",
   "envelope-simple-open",
   "eye",
   "eye-slash",
+  "file",
   "file-arrow-down",
   "file-arrow-up",
+  "file-code",
   "files",
+  "fingerprint",
   "first-aid-kit",
+  "flame",
   "flask",
   "floppy-disk",
   "folder",
   "folder-open",
   "funnel-simple",
+  "game-controller",
+  "gear",
+  "gif",
+  "gift",
+  "git-commit",
   "git-diff",
+  "git-merge",
+  "git-pull-request",
   "github-logo",
   "globe",
+  "google-logo",
   "graph",
   "grid-four",
   "hammer",
@@ -71,17 +104,36 @@
   "hard-drives",
   "heart",
   "hourglass",
+  "house",
+  "images",
+  "infinity",
   "info",
   "laptop",
   "leaf",
+  "lifebuoy",
   "lightbulb",
   "lightning",
   "link",
+  "link-break",
   "list",
+  "list-bullets",
+  "list-checks",
+  "list-numbers",
   "magnifying-glass",
+  "mailbox",
+  "map-pin",
+  "markdown-logo",
   "microphone",
+  "microphone-slash",
+  "minus",
   "minus-circle",
+  "music-notes",
   "navigation-arrow",
+  "newspaper",
+  "note",
+  "note-pencil",
+  "octagon-x",
+  "paint-brush",
   "palette",
   "paper-plane",
   "paper-plane-tilt",
@@ -90,22 +142,34 @@
   "pencil",
   "pencil-simple",
   "person",
+  "phone",
   "play-circle",
   "plus",
   "plus-circle",
   "pulse",
   "push-pin",
+  "push-pin-slash",
   "puzzle-piece",
   "qr-code",
   "question",
+  "quotes",
+  "radio",
   "radio-button",
   "resize",
   "robot",
   "rocket",
+  "rocket-launch",
+  "scissors",
   "share",
+  "shuffle",
+  "sidebar-left-close",
+  "sidebar-left-open",
   "sign-in",
   "sign-out",
+  "skip-back",
+  "skip-forward",
   "sliders-horizontal",
+  "smiley",
   "sparkle",
   "speaker-high",
   "speaker-slash",
@@ -114,14 +178,23 @@
   "stack",
   "stack-simple",
   "star",
+  "stop",
+  "stop-circle",
   "terminal",
   "text-aa",
+  "text-b",
+  "text-h",
+  "text-italic",
+  "text-strikethrough",
+  "text-underline",
   "timer",
   "toggle-right",
   "translate",
   "trash",
   "tray",
   "user-circle",
+  "user-minus",
+  "video-camera",
   "warning",
   "warning-circle",
   "wifi-high",

package/src/components/List/List.stories.tsx

@@ -7,6 +7,7 @@ import {clickLink} from '../../docs/clickLink'
 import {onThemeSurface} from '../../docs/themedSurface'
 import type {OnNavigate} from '../../shared/navigate'
 import {Icon} from '../Icon/Icon'
+import {Card} from '../Card/Card'
 import {Badge} from '../Badge/Badge'
 import {Button} from '../Button/Button'
 import {Checkbox} from '../Checkbox/Checkbox'
@@ -365,3 +366,45 @@ export const LinkItems: StoryObj<{onNavigate: OnNavigate}> = {
     await expect(canvas.queryByRole('link', {name: 'Usage'})).toBeNull()
   },
 }
+
+/**
+ * A settings group: the rows in a flush Card, reaching its rounded edge, with a divider between
+ * rows and none under the last (a hidden conditional row does not count).
+ */
+export const InFlushCard: StoryObj<{showHidden: boolean}> = {
+  decorators: [onThemeSurface],
+  args: {showHidden: false},
+  render: (args) => (
+    <Card variant="outlined" size="flush">
+      <List.Root aria-label="General">
+        <List.Item href="#updates">
+          <List.Content>
+            <List.Text>Updates</List.Text>
+          </List.Content>
+        </List.Item>
+        <List.Item href="#appearance">
+          <List.Content>
+            <List.Text>Appearance</List.Text>
+          </List.Content>
+        </List.Item>
+        {args.showHidden ? (
+          <List.Item>
+            <List.Content>
+              <List.Text>Hidden</List.Text>
+            </List.Content>
+          </List.Item>
+        ) : null}
+      </List.Root>
+    </Card>
+  ),
+  play: async ({canvas}) => {
+    const list = canvas.getByRole('list', {name: 'General'})
+    const items = canvas.getAllByRole('listitem')
+    await expect(items).toHaveLength(2)
+    await expect(getComputedStyle(items[0]).borderBottomWidth).toBe('1px')
+    await expect(getComputedStyle(items[1]).borderBottomWidth).toBe('0px')
+    const card = list.parentElement as HTMLElement
+    await expect(getComputedStyle(card).paddingTop).toBe('0px')
+    await expect(getComputedStyle(card).overflow).toBe('hidden')
+  },
+}

package/src/components/List/List.tsx

@@ -1,4 +1,13 @@
-import {type ReactNode, createContext, useContext, useId, useMemo, useState} from 'react'
+import {
+  Children,
+  type ReactNode,
+  createContext,
+  isValidElement,
+  useContext,
+  useId,
+  useMemo,
+  useState,
+} from 'react'
 import {html} from 'react-strict-dom'
 import type {OnNavigate} from '../../shared/navigate'
 import {
@@ -22,6 +31,9 @@ interface ListContextValue {
 
 const ListContext = createContext<ListContextValue>({selectionMode: 'none'})
 
+// The Root's last item draws no divider below it: the list (or the card around it) ends there.
+const LastItemContext = createContext(false)
+
 function useList() {
   return useContext(ListContext)
 }
@@ -56,7 +68,7 @@ function Root({
       aria-labelledby={hasTitle ? titleId : undefined}
       style={styles.root}
     >
-      {children}
+      {markLastItem(children)}
     </html.div>
   )
   return (
@@ -78,6 +90,20 @@ function Root({
   )
 }
 
+/** The Root's children, the last one told it is last (a hidden conditional row is not counted). */
+function markLastItem(children: ReactNode): ReactNode {
+  const items = Children.toArray(children)
+  return items.map((child, index) =>
+    index === items.length - 1 ? (
+      <LastItemContext.Provider key={isValidElement(child) ? child.key : index} value={true}>
+        {child}
+      </LastItemContext.Provider>
+    ) : (
+      child
+    ),
+  )
+}
+
 // --- Item ---
 
 interface ItemBaseProps {
@@ -130,6 +156,7 @@ function Item({children, selected, disabled, onClick, href, onNavigate}: ItemPro
   const {selectionMode} = useList()
   const isSelectable = selectionMode !== 'none'
   const isDisabled = disabled === true
+  const isLast = useContext(LastItemContext)
   const [linkState] = useState(createItemLinkState)
   const action = useMemo<ItemAction | null>(() => {
     if (href !== undefined) return {kind: 'link', href, onNavigate, disabled: isDisabled, linkState}
@@ -155,6 +182,7 @@ function Item({children, selected, disabled, onClick, href, onNavigate}: ItemPro
           styles.item,
           (onClick != null || href !== undefined) && !disabled && styles.itemClickable,
           selected && styles.itemSelected,
+          isLast && styles.itemLast,
           disabled && styles.itemDisabled,
         ]}
       >