@kanso-labs/kanso-ui 0.34.1 → 0.34.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -87,9 +87,10 @@ type MenuSide = OverlaySide;
|
|
|
87
87
|
type MenuSubmenuProps = {
|
|
88
88
|
/**
|
|
89
89
|
* The item that opens the submenu, then the `Menu.Content` it opens.
|
|
90
|
-
* Exactly those two, in that order.
|
|
90
|
+
* Exactly those two, in that order. The count is the type's to enforce;
|
|
91
|
+
* the order is not, since every JSX element has the same type.
|
|
91
92
|
*/
|
|
92
|
-
children: ReactElement
|
|
93
|
+
children: [trigger: ReactElement, content: ReactElement];
|
|
93
94
|
/**
|
|
94
95
|
* How long the pointer rests on the item before the submenu opens, in
|
|
95
96
|
* milliseconds.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["ComponentProps","ReactElement","ReactNode","ClassNameOrFunction","MenuItemRenderProps","PopoverRenderProps","MenuItemProps","RACMenuItemProps","MenuLoadMoreItemProps","RACMenuLoadMoreItemProps","MenuProps","RACMenuProps","MenuSectionProps","RACMenuSectionProps","MenuTriggerProps","RACMenuTriggerProps","StyleOrFunction","stylex","Header","Keyboard","Menu","RACMenu","MenuItem","RACMenuItem","MenuLoadMoreItem","RACMenuLoadMoreItem","MenuSection","RACMenuSection","MenuTrigger","RACMenuTrigger","Popover","RACPopover","SubmenuTrigger","RACSubmenuTrigger","Text","OverlayAlign","OverlaySide","CollectionLoadMore","textOf","ChevronEndGlyph","useRipple","RowContent","rowStyles","mergeStatefulStyles","mergeStyles","overlay","placementOf","popupOrigin","colors","radii","sizing","spacing","typography","Separator","MENU_MIN","MENU_MAX","styles","content","kWkggS","kaIpWk","ks0D6T","k7Eaqz","k3XXqK","k8WAf4","$$css","MenuAlign","MenuContentProps","align","alignOffset","className","container","Element","search","side","MenuSide","sideOffset","style","Omit","T","children","leading","shortcut","trailing","MenuLoadMoreProps","label","header","MenuSeparatorProps","MenuSubmenuProps","delay","itemContent","ripple","state","isDisabled","isSelected","trailingOf","itemStyles","props","base","menu","interactive","selectedMenu","disabled","t0","$","_c","t1","MenuContent","t2","t3","undefined","t4","t5","surfaceStyles","t6","t7","t8","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","textValue","T0","handlers","surface","MenuLoadMore","MenuSeparator","MenuSubmenu","popup","placement","hasSubmenu","Content","Item","LoadMore","Section","Submenu"],"sources":["../../../src/components/menu/index.tsx"],"sourcesContent":["import type { ComponentProps, ReactElement, ReactNode } from 'react';\nimport type { ClassNameOrFunction, MenuItemRenderProps, PopoverRenderProps, MenuItemProps as RACMenuItemProps, MenuLoadMoreItemProps as RACMenuLoadMoreItemProps, MenuProps as RACMenuProps, MenuSectionProps as RACMenuSectionProps, MenuTriggerProps as RACMenuTriggerProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Header, Keyboard, Menu as RACMenu, MenuItem as RACMenuItem, MenuLoadMoreItem as RACMenuLoadMoreItem, MenuSection as RACMenuSection, MenuTrigger as RACMenuTrigger, Popover as RACPopover, SubmenuTrigger as RACSubmenuTrigger, Text } from 'react-aria-components';\nimport type { OverlayAlign, OverlaySide } from '../../styles/overlay';\nimport { CollectionLoadMore } from '../../collection';\nimport { textOf } from '../../collection/text';\nimport { ChevronEndGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { RowContent } from '../../row';\nimport { rowStyles } from '../../row/styles';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport { overlay, placementOf, popupOrigin } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, sizing, spacing, typography } from '../../tokens/design.tokens.stylex';\nimport Separator from '../separator';\n\n// The menus page's menu: a surface between 112 and 280 wide with a 4dp\n// corner and 8dp above and below its items, holding rows of the row module's\n// menu variant — 48dp tall, a label-large label, tertiary container when\n// selected. The surface itself is the overlay module's, shared with Popover\n// and Sheet, with the two things the menus page decides differently applied\n// over it: the corner, which is the extra-small step rather than the\n// medium one every other overlay takes, and the container colour, which is\n// the Expressive column's surface container low rather than the baseline's\n// surface container.\n//\n// Six parts, because everything a menu holds takes arbitrary content:\n// `Menu.Content`, `Menu.Item`, `Menu.Section`, `Menu.Separator`,\n// `Menu.Submenu` and `Menu.LoadMore`. A `Button` or `IconButton` placed\n// directly inside `Menu` is the trigger, wired through React Aria's context\n// rather than a part of ours — the same arrangement Sheet and Popover use.\n//\n// Four things are worth knowing about how this maps onto React Aria.\n//\n// **The item's styles are a function of its render state.** StyleX cannot\n// target `[data-selected]` on the element it is styling, so selection,\n// disabled and the rest are read from the state React Aria hands the\n// `className` function, wrapped in `mergeStatefulStyles` so a call site's own\n// `className` survives.\n//\n// **A shortcut goes through React Aria's `Keyboard` slot**, and the label\n// through its `Text` slot. The second is what makes the first work: React\n// Aria points the item's `aria-labelledby` at the labelled text, so a screen\n// reader reads the label alone and announces the keystroke separately. Left\n// as plain content, the item's name is its whole text and the shortcut is\n// read as part of what the item does. The keycap itself is the library's.\n//\n// **A submenu's arrow is drawn from render state, not from a prop.** React\n// Aria reports `hasSubmenu` on the item inside a `SubmenuTrigger`, so an item\n// that opens one gets the chevron without the call site saying so twice. The\n// glyph carries no direction of its own, so the style mirrors it under a\n// right-to-left writing mode.\n//\n// **A menu's children are a collection**, so anything that is not an item is\n// dropped: React Aria walks them looking for items and finds a search input\n// no place to be. `Menu.Content` therefore takes a `search` slot, drawn on\n// the surface above the items — which is also what puts the bar and the\n// items inside one `Autocomplete` when the menu is filtered.\n//\n// **A separator needs no slot from the call site.** React Aria's menu\n// provides the separator context, which is what `Menu.Separator` picks up —\n// that is why Separator moved onto React Aria in Phase 0. What is added here\n// is the menus page's 8dp either side of the rule.\n\nconst MENU_MIN = '112px';\nconst MENU_MAX = '280px';\nconst styles = {\n content: {\n kWkggS: \"x1vnz5z6\",\n kaIpWk: \"x1tfhd1\",\n ks0D6T: \"x1jkqq1h\",\n k7Eaqz: \"x1c7vg25\",\n k3XXqK: \"x1t137rt\",\n k8WAf4: \"x1cmllll\",\n $$css: true\n }\n};\ntype MenuAlign = OverlayAlign;\ntype MenuContentProps<T extends object = object> = {\n /** Where the menu lines up along that side. @default 'start' */\n align?: MenuAlign;\n /** Moves the menu along that side, in pixels. */\n alignOffset?: number;\n /**\n * Lands on the surface, which is the element a layout positions. A\n * function may compute the class from the surface's render state.\n */\n className?: ClassNameOrFunction<PopoverRenderProps>;\n /**\n * Where to portal the menu. Defaults to the end of `<body>`, which is right\n * for an app that sets its StyleX theme on `:root`. An app that scopes the\n * theme to a subtree has to point this at an element inside it, or the menu\n * renders outside the theme and falls back to the tokens'\n * `prefers-color-scheme` default.\n */\n container?: Element;\n /**\n * Content drawn on the surface above the items — a search bar that filters\n * them, usually. It goes here rather than among the children because a\n * menu's children are a collection: React Aria walks them for items and\n * drops anything else, so an input written beside them disappears.\n *\n * To filter with it, wrap this whole part in `Autocomplete`, which puts\n * the bar and the items inside one wrapper.\n */\n search?: ReactNode;\n /** Which side of the trigger the menu opens on. @default 'bottom' */\n side?: MenuSide;\n /** How far the menu sits from the trigger, in pixels. @default 8 */\n sideOffset?: number;\n /** Lands on the surface, as `className` does. */\n style?: StyleOrFunction<PopoverRenderProps>;\n} & Omit<RACMenuProps<T>, 'className' | 'style'>;\ntype MenuItemProps<T extends object = object> = {\n /** The item's label — what it does. */\n children?: ReactNode;\n /** A function may compute the class from the item's render state. */\n className?: RACMenuItemProps<T>['className'];\n /** Content before the label, usually an icon. */\n leading?: ReactNode;\n /**\n * The keystroke that runs the item, drawn as a keycap at the end. Goes\n * through React Aria's keyboard slot, so a screen reader announces it\n * apart from the label rather than reading the two as one name.\n */\n shortcut?: ReactNode;\n /** A function may compute the style from the item's render state. */\n style?: RACMenuItemProps<T>['style'];\n /** Content after the label, before the shortcut. */\n trailing?: ReactNode;\n} & Omit<RACMenuItemProps<T>, 'children' | 'className' | 'style'>;\ntype MenuLoadMoreProps = Omit<RACMenuLoadMoreItemProps, 'children'> & {\n /**\n * What the row says while it is loading. Read by a screen reader; the ring\n * itself carries no text.\n * @default 'Loading more'\n */\n label?: string;\n};\n\n// `children` is optional here where React Aria makes it required, so the\n// type reads the way Sheet's and Popover's do: a root that composes rather\n// than one that has to be handed something. Sheet does the same for the same\n// reason.\ntype MenuProps = Omit<RACMenuTriggerProps, 'children'> & {\n /** The trigger, then the `Menu.Content` it opens. */\n children?: ReactNode;\n};\ntype MenuSectionProps<T extends object = object> = Omit<RACMenuSectionProps<T>, 'children'> & {\n /**\n * The items in the section. A section built from data puts React Aria's\n * `Collection` in here rather than a render function, since the header is\n * an element beside them.\n */\n children?: ReactNode;\n /**\n * The section's heading, rendered through React Aria's header so the\n * section is named by it. A section without one is a group with no name.\n */\n header?: ReactNode;\n};\ntype MenuSeparatorProps = Omit<ComponentProps<typeof Separator>, 'orientation'>;\ntype MenuSide = OverlaySide;\ntype MenuSubmenuProps = {\n /**\n * The item that opens the submenu, then the `Menu.Content` it opens.\n * Exactly those two, in that order.\n */\n children: ReactElement[];\n /**\n * How long the pointer rests on the item before the submenu opens, in\n * milliseconds.\n * @default 200\n */\n delay?: number;\n};\n\n// What the item draws, from React Aria's render state. Built by a call\n// rather than written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result\n// on its inputs.\n//\n// The render state decides two things: the chevron, which an item inside a\n// SubmenuTrigger gets without the call site asking twice, and the supporting\n// line's colour, which the row module takes from whether the row is selected\n// or disabled.\nfunction itemContent(children: ReactNode, leading: ReactNode, shortcut: ReactNode, trailing: ReactNode, ripple: ReactNode) {\n return (state: MenuItemRenderProps) => <>\n <RowContent isDisabled={state.isDisabled} isSelected={state.isSelected} leading={leading} trailing={trailingOf(state, shortcut, trailing)} variant=\"menu\">\n <Text slot=\"label\">{children}</Text>\n </RowContent>\n {state.isDisabled ? null : ripple}\n </>;\n}\n\n// StyleX cannot target `[data-selected]` on the element it is styling, so an\n// item's state comes from the render state React Aria hands its className.\n// The order matters: `disabled` is applied last so it wins over both the\n// interactive and the selected branches, and StyleX replaces a property\n// whole, so it takes their hover states with it.\n// No overline, and so no three-line row: the menus page gives one item\n// height and one line of text. `List.Item` and `ListBox.Item` take the prop\n// because the lists page is what they draw, and this row is 48dp rather than\n// that page's 56.\nfunction itemStyles(state: MenuItemRenderProps) {\n return stylex.props(rowStyles.base, rowStyles.menu, rowStyles.interactive, state.isSelected && rowStyles.selectedMenu, state.isDisabled && rowStyles.disabled);\n}\n\n/**\n * A list of actions opened from a control. Open state is React Aria's: pass\n * `isOpen` with `onOpenChange` to control it, or `defaultOpen` to let it keep\n * its own.\n *\n * A `Button` or `IconButton` placed directly inside opens it; everything the\n * menu shows goes in `Menu.Content`, since the trigger lives in the page\n * while the menu is portalled out to the end of the body.\n *\n * ```tsx\n * <Menu>\n * <Button>Open</Button>\n * <Menu.Content aria-label=\"Label\">\n * <Menu.Item id=\"first\">First item</Menu.Item>\n * </Menu.Content>\n * </Menu>\n * ```\n */\nfunction Menu({\n children,\n ...props\n}: MenuProps) {\n return <RACMenuTrigger {...props}>{children}</RACMenuTrigger>;\n}\n\n/**\n * The menu itself, and the surface it is drawn on. React Aria names it after\n * the control that opened it, so `aria-label` here is ignored — name the\n * trigger instead.\n *\n * The call site's `className` and `style` land on the surface, which is the\n * element a layout positions.\n */\nfunction MenuContent<T extends object = object>({\n align = 'start',\n alignOffset,\n className,\n container,\n search,\n side = 'bottom',\n sideOffset = 8,\n style,\n ...props\n}: MenuContentProps<T>) {\n return <RACPopover crossOffset={alignOffset} offset={sideOffset} placement={placementOf(side, align)}\n // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n UNSTABLE_portalContainer={container} {...mergeStatefulStyles(surfaceStyles, {\n className,\n style\n })}>\n {search === undefined ? null : <div className=\"x9f619 xqf7pud xn60lsn\">{search}</div>}\n <RACMenu<T> {...props} className=\"x9f619 x78zum5 xdt5ytf x1t137rt\" />\n </RACPopover>;\n}\n\n/**\n * One action. Its slots are the row's: `leading` before the label, the label\n * as children, and `trailing` after it, with `shortcut` at the end. An item\n * that opens a submenu draws the chevron itself.\n */\nfunction MenuItem<T extends object = object>({\n children,\n leading,\n onContextMenu,\n onPointerCancel,\n onPointerDown,\n onPointerLeave,\n onPointerUp,\n shortcut,\n textValue,\n trailing,\n ...props\n}: MenuItemProps<T>) {\n // The press ripple List's rows draw — see ListItem there.\n const ripple = useRipple<HTMLDivElement>(true, {\n onContextMenu,\n onPointerCancel,\n onPointerDown,\n onPointerLeave,\n onPointerUp\n }, true);\n return <RACMenuItem textValue={textValue ?? textOf(children)} {...ripple.handlers} {...props} {...mergeStatefulStyles(itemStyles, props)}>\n {itemContent(children, leading, shortcut, trailing, ripple.surface)}\n </RACMenuItem>;\n}\n\n/**\n * The row shown while more items are being fetched. React Aria calls\n * `onLoadMore` when it comes into view, and draws it only while `isLoading`.\n */\nfunction MenuLoadMore({\n label = 'Loading more',\n ...props\n}: MenuLoadMoreProps) {\n return <RACMenuLoadMoreItem {...props} {...mergeStyles({\n className: \"x6s0dn4 x9f619 x78zum5 xl56j7k x1ddmzdj\"\n }, props)}>\n <CollectionLoadMore label={label} size=\"20px\" />\n </RACMenuLoadMoreItem>;\n}\n\n/**\n * A named group of items. `header` names it, and is what a screen reader\n * reads before the items inside.\n */\nfunction MenuSection<T extends object = object>({\n children,\n header,\n ...props\n}: MenuSectionProps<T>) {\n return <RACMenuSection {...props}>\n {header === undefined ? null : <Header className=\"x9f619 x1w5n3ug xrgwony x12s497w x1szcwkt xo803ec xyl1r0q xw3mh6e x6gmt8y x790zyz\">{header}</Header>}\n {children}\n </RACMenuSection>;\n}\n\n/**\n * A rule between groups of items. It takes its role from the menu around it,\n * so it needs no slot from the call site.\n */\nfunction MenuSeparator(props: MenuSeparatorProps) {\n return <Separator {...props} {...mergeStyles({\n className: \"xwpi13i\"\n }, props)} />;\n}\n\n/**\n * An item that opens a menu of its own. Takes exactly two children: the\n * `Menu.Item` that opens it, then the `Menu.Content` it opens.\n */\nfunction MenuSubmenu(props: MenuSubmenuProps) {\n return <RACSubmenuTrigger {...props} />;\n}\n\n// The surface grows from the edge it is anchored by, which is what makes it\n// read as coming out of the trigger. Built by a call rather than written\n// inline at the prop, which is what react-perf's no-new-function-as-prop is\n// after.\nfunction surfaceStyles(state: PopoverRenderProps) {\n return stylex.props(overlay.popup, styles.content, popupOrigin(state.placement));\n}\n\n/** What sits after the label: the call site's content, then the shortcut or\n * the submenu's chevron. */\nfunction trailingOf(state: MenuItemRenderProps, shortcut: ReactNode, trailing: ReactNode) {\n if (state.hasSubmenu) {\n return <>\n {trailing}\n <ChevronEndGlyph className=\"x1qx5ct2 xw4jnvo x19axjrm x1c071of\" />\n </>;\n }\n if (shortcut === undefined && trailing === undefined) {\n return undefined;\n }\n return <>\n {trailing}\n {shortcut === undefined ? null : <Keyboard className=\"x1w5n3ug\">{shortcut}</Keyboard>}\n </>;\n}\nMenu.Content = MenuContent;\nMenu.Item = MenuItem;\nMenu.LoadMore = MenuLoadMore;\nMenu.Section = MenuSection;\nMenu.Separator = MenuSeparator;\nMenu.Submenu = MenuSubmenu;\nexport type { MenuAlign, MenuContentProps, MenuItemProps, MenuLoadMoreProps, MenuProps, MenuSectionProps, MenuSeparatorProps, MenuSide, MenuSubmenuProps };\nexport default Menu;"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["ComponentProps","ReactElement","ReactNode","ClassNameOrFunction","MenuItemRenderProps","PopoverRenderProps","MenuItemProps","RACMenuItemProps","MenuLoadMoreItemProps","RACMenuLoadMoreItemProps","MenuProps","RACMenuProps","MenuSectionProps","RACMenuSectionProps","MenuTriggerProps","RACMenuTriggerProps","StyleOrFunction","stylex","Header","Keyboard","Menu","RACMenu","MenuItem","RACMenuItem","MenuLoadMoreItem","RACMenuLoadMoreItem","MenuSection","RACMenuSection","MenuTrigger","RACMenuTrigger","Popover","RACPopover","SubmenuTrigger","RACSubmenuTrigger","Text","OverlayAlign","OverlaySide","CollectionLoadMore","textOf","ChevronEndGlyph","useRipple","RowContent","rowStyles","mergeStatefulStyles","mergeStyles","overlay","placementOf","popupOrigin","colors","radii","sizing","spacing","typography","Separator","MENU_MIN","MENU_MAX","styles","content","kWkggS","kaIpWk","ks0D6T","k7Eaqz","k3XXqK","k8WAf4","$$css","MenuAlign","MenuContentProps","align","alignOffset","className","container","Element","search","side","MenuSide","sideOffset","style","Omit","T","children","leading","shortcut","trailing","MenuLoadMoreProps","label","header","MenuSeparatorProps","MenuSubmenuProps","trigger","delay","itemContent","ripple","state","isDisabled","isSelected","trailingOf","itemStyles","props","base","menu","interactive","selectedMenu","disabled","t0","$","_c","t1","MenuContent","t2","t3","undefined","t4","t5","surfaceStyles","t6","t7","t8","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","textValue","T0","handlers","surface","MenuLoadMore","MenuSeparator","MenuSubmenu","popup","placement","hasSubmenu","Content","Item","LoadMore","Section","Submenu"],"sources":["../../../src/components/menu/index.tsx"],"sourcesContent":["import type { ComponentProps, ReactElement, ReactNode } from 'react';\nimport type { ClassNameOrFunction, MenuItemRenderProps, PopoverRenderProps, MenuItemProps as RACMenuItemProps, MenuLoadMoreItemProps as RACMenuLoadMoreItemProps, MenuProps as RACMenuProps, MenuSectionProps as RACMenuSectionProps, MenuTriggerProps as RACMenuTriggerProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Header, Keyboard, Menu as RACMenu, MenuItem as RACMenuItem, MenuLoadMoreItem as RACMenuLoadMoreItem, MenuSection as RACMenuSection, MenuTrigger as RACMenuTrigger, Popover as RACPopover, SubmenuTrigger as RACSubmenuTrigger, Text } from 'react-aria-components';\nimport type { OverlayAlign, OverlaySide } from '../../styles/overlay';\nimport { CollectionLoadMore } from '../../collection';\nimport { textOf } from '../../collection/text';\nimport { ChevronEndGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { RowContent } from '../../row';\nimport { rowStyles } from '../../row/styles';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport { overlay, placementOf, popupOrigin } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, sizing, spacing, typography } from '../../tokens/design.tokens.stylex';\nimport Separator from '../separator';\n\n// The menus page's menu: a surface between 112 and 280 wide with a 4dp\n// corner and 8dp above and below its items, holding rows of the row module's\n// menu variant — 48dp tall, a label-large label, tertiary container when\n// selected. The surface itself is the overlay module's, shared with Popover\n// and Sheet, with the two things the menus page decides differently applied\n// over it: the corner, which is the extra-small step rather than the\n// medium one every other overlay takes, and the container colour, which is\n// the Expressive column's surface container low rather than the baseline's\n// surface container.\n//\n// Six parts, because everything a menu holds takes arbitrary content:\n// `Menu.Content`, `Menu.Item`, `Menu.Section`, `Menu.Separator`,\n// `Menu.Submenu` and `Menu.LoadMore`. A `Button` or `IconButton` placed\n// directly inside `Menu` is the trigger, wired through React Aria's context\n// rather than a part of ours — the same arrangement Sheet and Popover use.\n//\n// Four things are worth knowing about how this maps onto React Aria.\n//\n// **The item's styles are a function of its render state.** StyleX cannot\n// target `[data-selected]` on the element it is styling, so selection,\n// disabled and the rest are read from the state React Aria hands the\n// `className` function, wrapped in `mergeStatefulStyles` so a call site's own\n// `className` survives.\n//\n// **A shortcut goes through React Aria's `Keyboard` slot**, and the label\n// through its `Text` slot. The second is what makes the first work: React\n// Aria points the item's `aria-labelledby` at the labelled text, so a screen\n// reader reads the label alone and announces the keystroke separately. Left\n// as plain content, the item's name is its whole text and the shortcut is\n// read as part of what the item does. The keycap itself is the library's.\n//\n// **A submenu's arrow is drawn from render state, not from a prop.** React\n// Aria reports `hasSubmenu` on the item inside a `SubmenuTrigger`, so an item\n// that opens one gets the chevron without the call site saying so twice. The\n// glyph carries no direction of its own, so the style mirrors it under a\n// right-to-left writing mode.\n//\n// **A menu's children are a collection**, so anything that is not an item is\n// dropped: React Aria walks them looking for items and finds a search input\n// no place to be. `Menu.Content` therefore takes a `search` slot, drawn on\n// the surface above the items — which is also what puts the bar and the\n// items inside one `Autocomplete` when the menu is filtered.\n//\n// **A separator needs no slot from the call site.** React Aria's menu\n// provides the separator context, which is what `Menu.Separator` picks up —\n// that is why Separator moved onto React Aria in Phase 0. What is added here\n// is the menus page's 8dp either side of the rule.\n\nconst MENU_MIN = '112px';\nconst MENU_MAX = '280px';\nconst styles = {\n content: {\n kWkggS: \"x1vnz5z6\",\n kaIpWk: \"x1tfhd1\",\n ks0D6T: \"x1jkqq1h\",\n k7Eaqz: \"x1c7vg25\",\n k3XXqK: \"x1t137rt\",\n k8WAf4: \"x1cmllll\",\n $$css: true\n }\n};\ntype MenuAlign = OverlayAlign;\ntype MenuContentProps<T extends object = object> = {\n /** Where the menu lines up along that side. @default 'start' */\n align?: MenuAlign;\n /** Moves the menu along that side, in pixels. */\n alignOffset?: number;\n /**\n * Lands on the surface, which is the element a layout positions. A\n * function may compute the class from the surface's render state.\n */\n className?: ClassNameOrFunction<PopoverRenderProps>;\n /**\n * Where to portal the menu. Defaults to the end of `<body>`, which is right\n * for an app that sets its StyleX theme on `:root`. An app that scopes the\n * theme to a subtree has to point this at an element inside it, or the menu\n * renders outside the theme and falls back to the tokens'\n * `prefers-color-scheme` default.\n */\n container?: Element;\n /**\n * Content drawn on the surface above the items — a search bar that filters\n * them, usually. It goes here rather than among the children because a\n * menu's children are a collection: React Aria walks them for items and\n * drops anything else, so an input written beside them disappears.\n *\n * To filter with it, wrap this whole part in `Autocomplete`, which puts\n * the bar and the items inside one wrapper.\n */\n search?: ReactNode;\n /** Which side of the trigger the menu opens on. @default 'bottom' */\n side?: MenuSide;\n /** How far the menu sits from the trigger, in pixels. @default 8 */\n sideOffset?: number;\n /** Lands on the surface, as `className` does. */\n style?: StyleOrFunction<PopoverRenderProps>;\n} & Omit<RACMenuProps<T>, 'className' | 'style'>;\ntype MenuItemProps<T extends object = object> = {\n /** The item's label — what it does. */\n children?: ReactNode;\n /** A function may compute the class from the item's render state. */\n className?: RACMenuItemProps<T>['className'];\n /** Content before the label, usually an icon. */\n leading?: ReactNode;\n /**\n * The keystroke that runs the item, drawn as a keycap at the end. Goes\n * through React Aria's keyboard slot, so a screen reader announces it\n * apart from the label rather than reading the two as one name.\n */\n shortcut?: ReactNode;\n /** A function may compute the style from the item's render state. */\n style?: RACMenuItemProps<T>['style'];\n /** Content after the label, before the shortcut. */\n trailing?: ReactNode;\n} & Omit<RACMenuItemProps<T>, 'children' | 'className' | 'style'>;\ntype MenuLoadMoreProps = Omit<RACMenuLoadMoreItemProps, 'children'> & {\n /**\n * What the row says while it is loading. Read by a screen reader; the ring\n * itself carries no text.\n * @default 'Loading more'\n */\n label?: string;\n};\n\n// `children` is optional here where React Aria makes it required, so the\n// type reads the way Sheet's and Popover's do: a root that composes rather\n// than one that has to be handed something. Sheet does the same for the same\n// reason.\ntype MenuProps = Omit<RACMenuTriggerProps, 'children'> & {\n /** The trigger, then the `Menu.Content` it opens. */\n children?: ReactNode;\n};\ntype MenuSectionProps<T extends object = object> = Omit<RACMenuSectionProps<T>, 'children'> & {\n /**\n * The items in the section. A section built from data puts React Aria's\n * `Collection` in here rather than a render function, since the header is\n * an element beside them.\n */\n children?: ReactNode;\n /**\n * The section's heading, rendered through React Aria's header so the\n * section is named by it. A section without one is a group with no name.\n */\n header?: ReactNode;\n};\ntype MenuSeparatorProps = Omit<ComponentProps<typeof Separator>, 'orientation'>;\ntype MenuSide = OverlaySide;\ntype MenuSubmenuProps = {\n /**\n * The item that opens the submenu, then the `Menu.Content` it opens.\n * Exactly those two, in that order. The count is the type's to enforce;\n * the order is not, since every JSX element has the same type.\n */\n children: [trigger: ReactElement, content: ReactElement];\n /**\n * How long the pointer rests on the item before the submenu opens, in\n * milliseconds.\n * @default 200\n */\n delay?: number;\n};\n\n// What the item draws, from React Aria's render state. Built by a call\n// rather than written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result\n// on its inputs.\n//\n// The render state decides two things: the chevron, which an item inside a\n// SubmenuTrigger gets without the call site asking twice, and the supporting\n// line's colour, which the row module takes from whether the row is selected\n// or disabled.\nfunction itemContent(children: ReactNode, leading: ReactNode, shortcut: ReactNode, trailing: ReactNode, ripple: ReactNode) {\n return (state: MenuItemRenderProps) => <>\n <RowContent isDisabled={state.isDisabled} isSelected={state.isSelected} leading={leading} trailing={trailingOf(state, shortcut, trailing)} variant=\"menu\">\n <Text slot=\"label\">{children}</Text>\n </RowContent>\n {state.isDisabled ? null : ripple}\n </>;\n}\n\n// StyleX cannot target `[data-selected]` on the element it is styling, so an\n// item's state comes from the render state React Aria hands its className.\n// The order matters: `disabled` is applied last so it wins over both the\n// interactive and the selected branches, and StyleX replaces a property\n// whole, so it takes their hover states with it.\n// No overline, and so no three-line row: the menus page gives one item\n// height and one line of text. `List.Item` and `ListBox.Item` take the prop\n// because the lists page is what they draw, and this row is 48dp rather than\n// that page's 56.\nfunction itemStyles(state: MenuItemRenderProps) {\n return stylex.props(rowStyles.base, rowStyles.menu, rowStyles.interactive, state.isSelected && rowStyles.selectedMenu, state.isDisabled && rowStyles.disabled);\n}\n\n/**\n * A list of actions opened from a control. Open state is React Aria's: pass\n * `isOpen` with `onOpenChange` to control it, or `defaultOpen` to let it keep\n * its own.\n *\n * A `Button` or `IconButton` placed directly inside opens it; everything the\n * menu shows goes in `Menu.Content`, since the trigger lives in the page\n * while the menu is portalled out to the end of the body.\n *\n * ```tsx\n * <Menu>\n * <Button>Open</Button>\n * <Menu.Content aria-label=\"Label\">\n * <Menu.Item id=\"first\">First item</Menu.Item>\n * </Menu.Content>\n * </Menu>\n * ```\n */\nfunction Menu({\n children,\n ...props\n}: MenuProps) {\n return <RACMenuTrigger {...props}>{children}</RACMenuTrigger>;\n}\n\n/**\n * The menu itself, and the surface it is drawn on. React Aria names it after\n * the control that opened it, so `aria-label` here is ignored — name the\n * trigger instead.\n *\n * The call site's `className` and `style` land on the surface, which is the\n * element a layout positions.\n */\nfunction MenuContent<T extends object = object>({\n align = 'start',\n alignOffset,\n className,\n container,\n search,\n side = 'bottom',\n sideOffset = 8,\n style,\n ...props\n}: MenuContentProps<T>) {\n return <RACPopover crossOffset={alignOffset} offset={sideOffset} placement={placementOf(side, align)}\n // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n UNSTABLE_portalContainer={container} {...mergeStatefulStyles(surfaceStyles, {\n className,\n style\n })}>\n {search === undefined ? null : <div className=\"x9f619 xqf7pud xn60lsn\">{search}</div>}\n <RACMenu<T> {...props} className=\"x9f619 x78zum5 xdt5ytf x1t137rt\" />\n </RACPopover>;\n}\n\n/**\n * One action. Its slots are the row's: `leading` before the label, the label\n * as children, and `trailing` after it, with `shortcut` at the end. An item\n * that opens a submenu draws the chevron itself.\n */\nfunction MenuItem<T extends object = object>({\n children,\n leading,\n onContextMenu,\n onPointerCancel,\n onPointerDown,\n onPointerLeave,\n onPointerUp,\n shortcut,\n textValue,\n trailing,\n ...props\n}: MenuItemProps<T>) {\n // The press ripple List's rows draw — see ListItem there.\n const ripple = useRipple<HTMLDivElement>(true, {\n onContextMenu,\n onPointerCancel,\n onPointerDown,\n onPointerLeave,\n onPointerUp\n }, true);\n return <RACMenuItem textValue={textValue ?? textOf(children)} {...ripple.handlers} {...props} {...mergeStatefulStyles(itemStyles, props)}>\n {itemContent(children, leading, shortcut, trailing, ripple.surface)}\n </RACMenuItem>;\n}\n\n/**\n * The row shown while more items are being fetched. React Aria calls\n * `onLoadMore` when it comes into view, and draws it only while `isLoading`.\n */\nfunction MenuLoadMore({\n label = 'Loading more',\n ...props\n}: MenuLoadMoreProps) {\n return <RACMenuLoadMoreItem {...props} {...mergeStyles({\n className: \"x6s0dn4 x9f619 x78zum5 xl56j7k x1ddmzdj\"\n }, props)}>\n <CollectionLoadMore label={label} size=\"20px\" />\n </RACMenuLoadMoreItem>;\n}\n\n/**\n * A named group of items. `header` names it, and is what a screen reader\n * reads before the items inside.\n */\nfunction MenuSection<T extends object = object>({\n children,\n header,\n ...props\n}: MenuSectionProps<T>) {\n return <RACMenuSection {...props}>\n {header === undefined ? null : <Header className=\"x9f619 x1w5n3ug xrgwony x12s497w x1szcwkt xo803ec xyl1r0q xw3mh6e x6gmt8y x790zyz\">{header}</Header>}\n {children}\n </RACMenuSection>;\n}\n\n/**\n * A rule between groups of items. It takes its role from the menu around it,\n * so it needs no slot from the call site.\n */\nfunction MenuSeparator(props: MenuSeparatorProps) {\n return <Separator {...props} {...mergeStyles({\n className: \"xwpi13i\"\n }, props)} />;\n}\n\n/**\n * An item that opens a menu of its own. Takes exactly two children: the\n * `Menu.Item` that opens it, then the `Menu.Content` it opens.\n */\nfunction MenuSubmenu(props: MenuSubmenuProps) {\n return <RACSubmenuTrigger {...props} />;\n}\n\n// The surface grows from the edge it is anchored by, which is what makes it\n// read as coming out of the trigger. Built by a call rather than written\n// inline at the prop, which is what react-perf's no-new-function-as-prop is\n// after.\nfunction surfaceStyles(state: PopoverRenderProps) {\n return stylex.props(overlay.popup, styles.content, popupOrigin(state.placement));\n}\n\n/** What sits after the label: the call site's content, then the shortcut or\n * the submenu's chevron. */\nfunction trailingOf(state: MenuItemRenderProps, shortcut: ReactNode, trailing: ReactNode) {\n if (state.hasSubmenu) {\n return <>\n {trailing}\n <ChevronEndGlyph className=\"x1qx5ct2 xw4jnvo x19axjrm x1c071of\" />\n </>;\n }\n if (shortcut === undefined && trailing === undefined) {\n return undefined;\n }\n return <>\n {trailing}\n {shortcut === undefined ? null : <Keyboard className=\"x1w5n3ug\">{shortcut}</Keyboard>}\n </>;\n}\nMenu.Content = MenuContent;\nMenu.Item = MenuItem;\nMenu.LoadMore = MenuLoadMore;\nMenu.Section = MenuSection;\nMenu.Separator = MenuSeparator;\nMenu.Submenu = MenuSubmenu;\nexport type { MenuAlign, MenuContentProps, MenuItemProps, MenuLoadMoreProps, MenuProps, MenuSectionProps, MenuSeparatorProps, MenuSide, MenuSubmenuProps };\nexport default Menu;"],"mappings":"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"}
|
|
@@ -89,16 +89,32 @@ function initialFrom(name) {
|
|
|
89
89
|
* can be handed over as it was drawn.
|
|
90
90
|
*/
|
|
91
91
|
function ProductIcon(t0) {
|
|
92
|
-
const $ = c(
|
|
92
|
+
const $ = c(18);
|
|
93
93
|
const { name, render, size: t1, src, tone: t2, ...props$1 } = t0;
|
|
94
94
|
const size = t1 === void 0 ? "md" : t1;
|
|
95
95
|
const tone = t2 === void 0 ? "primary" : t2;
|
|
96
96
|
const status = useImageLoadingStatus(src);
|
|
97
|
-
|
|
98
|
-
|
|
97
|
+
let t3;
|
|
98
|
+
if ($[0] !== name) {
|
|
99
|
+
t3 = name.trim();
|
|
100
|
+
$[0] = name;
|
|
101
|
+
$[1] = t3;
|
|
102
|
+
} else t3 = $[1];
|
|
103
|
+
const named = t3 !== "";
|
|
104
|
+
const t4 = "span";
|
|
99
105
|
let t5;
|
|
100
|
-
if ($[
|
|
101
|
-
t5 =
|
|
106
|
+
if ($[2] !== name || $[3] !== named) {
|
|
107
|
+
t5 = named ? {
|
|
108
|
+
"aria-label": name,
|
|
109
|
+
role: "img"
|
|
110
|
+
} : {};
|
|
111
|
+
$[2] = name;
|
|
112
|
+
$[3] = named;
|
|
113
|
+
$[4] = t5;
|
|
114
|
+
} else t5 = $[4];
|
|
115
|
+
let t6;
|
|
116
|
+
if ($[5] !== name || $[6] !== src || $[7] !== status || $[8] !== tone) {
|
|
117
|
+
t6 = status === "loaded" ? /* @__PURE__ */ jsx("img", {
|
|
102
118
|
alt: "",
|
|
103
119
|
src,
|
|
104
120
|
className: "x5yr21d xh8yej3 x19kjcj4"
|
|
@@ -106,40 +122,39 @@ function ProductIcon(t0) {
|
|
|
106
122
|
...props(styles.fallback, styles[tone]),
|
|
107
123
|
children: initialFrom(name)
|
|
108
124
|
});
|
|
109
|
-
$[0] = name;
|
|
110
|
-
$[1] = src;
|
|
111
|
-
$[2] = status;
|
|
112
|
-
$[3] = tone;
|
|
113
|
-
$[4] = t5;
|
|
114
|
-
} else t5 = $[4];
|
|
115
|
-
const t6 = mergeStyles(props(styles.base, styles[size]), props$1);
|
|
116
|
-
let t7;
|
|
117
|
-
if ($[5] !== name || $[6] !== props$1 || $[7] !== t5 || $[8] !== t6) {
|
|
118
|
-
t7 = {
|
|
119
|
-
"aria-label": name,
|
|
120
|
-
role: t4,
|
|
121
|
-
...props$1,
|
|
122
|
-
children: t5,
|
|
123
|
-
...t6
|
|
124
|
-
};
|
|
125
125
|
$[5] = name;
|
|
126
|
-
$[6] =
|
|
127
|
-
$[7] =
|
|
128
|
-
$[8] =
|
|
129
|
-
$[9] =
|
|
130
|
-
} else
|
|
126
|
+
$[6] = src;
|
|
127
|
+
$[7] = status;
|
|
128
|
+
$[8] = tone;
|
|
129
|
+
$[9] = t6;
|
|
130
|
+
} else t6 = $[9];
|
|
131
|
+
const t7 = mergeStyles(props(styles.base, styles[size]), props$1);
|
|
131
132
|
let t8;
|
|
132
|
-
if ($[10] !==
|
|
133
|
+
if ($[10] !== props$1 || $[11] !== t5 || $[12] !== t6 || $[13] !== t7) {
|
|
133
134
|
t8 = {
|
|
134
|
-
|
|
135
|
-
props
|
|
135
|
+
...t5,
|
|
136
|
+
...props$1,
|
|
137
|
+
children: t6,
|
|
138
|
+
...t7
|
|
139
|
+
};
|
|
140
|
+
$[10] = props$1;
|
|
141
|
+
$[11] = t5;
|
|
142
|
+
$[12] = t6;
|
|
143
|
+
$[13] = t7;
|
|
144
|
+
$[14] = t8;
|
|
145
|
+
} else t8 = $[14];
|
|
146
|
+
let t9;
|
|
147
|
+
if ($[15] !== render || $[16] !== t8) {
|
|
148
|
+
t9 = {
|
|
149
|
+
defaultTagName: t4,
|
|
150
|
+
props: t8,
|
|
136
151
|
render
|
|
137
152
|
};
|
|
138
|
-
$[
|
|
139
|
-
$[
|
|
140
|
-
$[
|
|
141
|
-
} else
|
|
142
|
-
return useRender(
|
|
153
|
+
$[15] = render;
|
|
154
|
+
$[16] = t8;
|
|
155
|
+
$[17] = t9;
|
|
156
|
+
} else t9 = $[17];
|
|
157
|
+
return useRender(t9);
|
|
143
158
|
}
|
|
144
159
|
//#endregion
|
|
145
160
|
export { ProductIcon as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["stylex","RenderComponentProps","useImageLoadingStatus","useRender","mergeStyles","colors","radii","typography","styles","base","kGNEyG","kaIpWk","kB7OPa","k1xSpc","kmuXW","kMv6JI","k63SB2","kjj79g","kVQacm","kfSwDN","$$css","fallback","kZKoxP","kzqmXN","image","kVIFPx","lg","kGuDYH","md","negative","kWkggS","kMwMTN","positive","primary","secondary","sm","tertiary","ProductIconProps","Omit","name","size","src","tone","initialFrom","trimmed","trim","Array","from","toLocaleUpperCase","ProductIcon","t0","$","_c","render","t1","t2","props","undefined","status","t3","t4","t5","t6","t7","
|
|
1
|
+
{"version":3,"file":"index.js","names":["stylex","RenderComponentProps","useImageLoadingStatus","useRender","mergeStyles","colors","radii","typography","styles","base","kGNEyG","kaIpWk","kB7OPa","k1xSpc","kmuXW","kMv6JI","k63SB2","kjj79g","kVQacm","kfSwDN","$$css","fallback","kZKoxP","kzqmXN","image","kVIFPx","lg","kGuDYH","md","negative","kWkggS","kMwMTN","positive","primary","secondary","sm","tertiary","ProductIconProps","Omit","name","size","src","tone","initialFrom","trimmed","trim","Array","from","toLocaleUpperCase","ProductIcon","t0","$","_c","render","t1","t2","props","undefined","status","t3","named","t4","t5","role","t6","t7","t8","children","t9","defaultTagName"],"sources":["../../../src/components/product-icon/index.tsx"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useImageLoadingStatus } from '../../hooks/useImageLoadingStatus';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, typography } from '../../tokens/design.tokens.stylex';\n\n// The counterpart to Avatar: Avatar stands for a person, this stands for\n// everything else — an application, a service, a brand. The two are the same\n// three sizes so either can fill a leading slot without moving what sits\n// beside it, and they differ in the two ways that matter for a mark rather\n// than a face.\n//\n// A rounded square rather than a circle. A logo is drawn to its own bounding\n// box, and a circle crops the corners it was composed with.\n//\n// `contain` rather than `cover`. Cropping a face to fill a circle loses\n// nothing anyone minds; cropping a wordmark loses the word. The cost is\n// letterboxing — a wide mark leaves space above and below — and that is the\n// right trade for a mark whose whole job is to be recognised.\n//\n// That cost is also why `tone` tints the fallback rather than the root. A mark\n// letterboxed into the square does not cover it, and neither does one drawn\n// with transparency, so a tint on the root showed as a coloured box around\n// every logo that was not an opaque square. On the fallback it is seen exactly\n// when it is meant to be: while there is no mark, or none has loaded.\n//\n// No Material Design page draws a product mark, so its sizes are Avatar's —\n// 36, 40 and 56 — which is what lets a mark and a person fill the same slot.\n// Avatar's own comment is where those three are argued, against the\n// library's control scale rather than against a page. The fallback's tint is\n// a container role under its on-colour, the pairing every filled surface in\n// the system uses.\nconst styles = {\n base: {\n kGNEyG: \"x6s0dn4\",\n kaIpWk: \"x1xdvaa9\",\n kB7OPa: \"x9f619\",\n k1xSpc: \"x3nfvp2\",\n kmuXW: \"x2lah0s\",\n kMv6JI: \"xkknnkr\",\n k63SB2: \"x1bf3uqz\",\n kjj79g: \"xl56j7k\",\n kVQacm: \"xb3r6kr\",\n kfSwDN: \"x87ps6o\",\n $$css: true\n },\n fallback: {\n kGNEyG: \"x6s0dn4\",\n kZKoxP: \"x5yr21d\",\n k1xSpc: \"x78zum5\",\n kzqmXN: \"xh8yej3\",\n kjj79g: \"xl56j7k\",\n $$css: true\n },\n image: {\n kZKoxP: \"x5yr21d\",\n kzqmXN: \"xh8yej3\",\n kVIFPx: \"x19kjcj4\",\n $$css: true\n },\n lg: {\n kZKoxP: \"xnnlda6\",\n kGuDYH: \"x1848etk\",\n kzqmXN: \"x15yg21f\",\n $$css: true\n },\n md: {\n kZKoxP: \"x1vqgdyp\",\n kGuDYH: \"x14zspaw\",\n kzqmXN: \"x100vrsf\",\n $$css: true\n },\n negative: {\n kWkggS: \"xkz0cvf\",\n kMwMTN: \"xylzu7l\",\n $$css: true\n },\n positive: {\n kWkggS: \"xa3zu90\",\n kMwMTN: \"x1di7zbg\",\n $$css: true\n },\n primary: {\n kWkggS: \"xp89om9\",\n kMwMTN: \"xscdzaa\",\n $$css: true\n },\n secondary: {\n kWkggS: \"x15dekr4\",\n kMwMTN: \"x1sawysd\",\n $$css: true\n },\n sm: {\n kZKoxP: \"xc9qbxq\",\n kGuDYH: \"xkucv67\",\n kzqmXN: \"x14qfxbe\",\n $$css: true\n },\n tertiary: {\n kWkggS: \"xs6yvni\",\n kMwMTN: \"x3cbcwg\",\n $$css: true\n }\n};\ntype ProductIconProps = Omit<RenderComponentProps<'span'>, 'children'> & {\n /**\n * What this identifies. Supplies both the fallback initial and the\n * accessible name, so a screen reader announces the thing rather than\n * reading a letter aloud.\n */\n name: string;\n /**\n * Edge length: `sm` 36px, `md` 40px, `lg` 56px. The same three Avatar uses,\n * so the two are interchangeable wherever one leads a row or a card.\n * @default 'md'\n */\n size?: 'lg' | 'md' | 'sm';\n /**\n * The mark to show in place of the initial. The initial stays until it has\n * loaded, and comes back if it fails.\n */\n src?: string;\n /**\n * Which container/on-container colour pair to tint the fallback with. It is\n * the fallback's own background, so it is gone once `src` has loaded rather\n * than sitting behind the mark.\n * @default 'primary'\n */\n tone?: 'negative' | 'positive' | 'primary' | 'secondary' | 'tertiary';\n};\n\n// One letter, where Avatar takes two. A person has a first name and a last\n// name to initialise; a thing usually has neither, so the same rule applied\n// to \"Second Item\" would produce \"SI\" — a pair of initials for something that\n// was never two words in that sense. Array.from rather than indexing, so a\n// name starting outside the Basic Multilingual Plane yields its whole first\n// character instead of half a surrogate pair.\nfunction initialFrom(name: string) {\n const trimmed = name.trim();\n return (Array.from(trimmed)[0] ?? '').toLocaleUpperCase();\n}\n\n/**\n * A small square mark identifying something that is not a person — an\n * application, a service, a brand. Reach for Avatar when it is a person.\n *\n * The mark is letterboxed rather than cropped, so a logo of any aspect ratio\n * can be handed over as it was drawn.\n */\nfunction ProductIcon({\n name,\n render,\n size = 'md',\n src,\n tone = 'primary',\n ...props\n}: ProductIconProps) {\n // The mark is shown only once it has loaded, and the letter stays until\n // then and comes back if it fails — see useImageLoadingStatus.\n const status = useImageLoadingStatus(src);\n\n // role/aria-label rather than letting the fallback letter be read: \"B\" is\n // not what anyone means to announce. Marking the root as an image also\n // makes its contents presentational, so neither the mark nor the letter\n // is announced a second time underneath the name. A span rather than an\n // <img>, which is void: this element's whole job is to hold the letter\n // shown when there is no mark, or none has loaded yet.\n //\n // A blank name — one still loading, say — names nothing, so the icon is\n // then a plain element rather than an image with no name, which a screen\n // reader reads as a bare \"image\". Its empty initial, or its mark with an\n // empty alt, leave it nothing to announce.\n const named = name.trim() !== '';\n return useRender({\n defaultTagName: 'span',\n props: {\n ...(named ? {\n 'aria-label': name,\n role: 'img'\n } : {}),\n ...props,\n children: status === 'loaded' ? <img alt=\"\" src={src} className=\"x5yr21d xh8yej3 x19kjcj4\" /> : <span {...stylex.props(styles.fallback, styles[tone])}>\n {initialFrom(name)}\n </span>,\n ...mergeStyles(stylex.props(styles.base, styles[size]), props)\n },\n render\n });\n}\nexport type { ProductIconProps };\nexport default ProductIcon;"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kanso-labs/kanso-ui",
|
|
3
|
-
"version": "0.34.
|
|
3
|
+
"version": "0.34.2",
|
|
4
4
|
"description": "A React component library built on React Aria Components primitives and styled with StyleX, with design tokens sourced from a single W3C DTCG file and compiled via Style Dictionary",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|