@kanso-labs/kanso-ui 0.44.1 → 0.45.1
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.
- package/README.md +69 -18
- package/dist/chip/index.js +24 -4
- package/dist/chip/index.js.map +1 -1
- package/dist/chip/styles.js +13 -5
- package/dist/chip/styles.js.map +1 -1
- package/dist/components/app-bar/index.d.ts +14 -2
- package/dist/components/app-bar/index.js +36 -7
- package/dist/components/app-bar/index.js.map +1 -1
- package/dist/components/autocomplete/index.d.ts +44 -0
- package/dist/components/autocomplete/index.js +44 -0
- package/dist/components/autocomplete/index.js.map +1 -1
- package/dist/components/button/index.d.ts +3 -2
- package/dist/components/button/index.js +53 -59
- package/dist/components/button/index.js.map +1 -1
- package/dist/components/card/index.d.ts +11 -3
- package/dist/components/card/index.js +23 -1
- package/dist/components/card/index.js.map +1 -1
- package/dist/components/checkbox/index.js +65 -58
- package/dist/components/checkbox/index.js.map +1 -1
- package/dist/components/chip/index.d.ts +46 -30
- package/dist/components/chip/index.js +38 -17
- package/dist/components/chip/index.js.map +1 -1
- package/dist/components/chip-group/index.d.ts +5 -2
- package/dist/components/chip-group/index.js +8 -2
- package/dist/components/chip-group/index.js.map +1 -1
- package/dist/components/dialog/index.d.ts +27 -0
- package/dist/components/dialog/index.js +81 -37
- package/dist/components/dialog/index.js.map +1 -1
- package/dist/components/fab/index.d.ts +1 -1
- package/dist/components/fab/index.js.map +1 -1
- package/dist/components/form/index.d.ts +14 -4
- package/dist/components/form/index.js +6 -3
- package/dist/components/form/index.js.map +1 -1
- package/dist/components/icon-button/index.d.ts +15 -1
- package/dist/components/icon-button/index.js +15 -1
- package/dist/components/icon-button/index.js.map +1 -1
- package/dist/components/link/index.d.ts +4 -0
- package/dist/components/link/index.js +4 -0
- package/dist/components/link/index.js.map +1 -1
- package/dist/components/list/index.d.ts +34 -0
- package/dist/components/list/index.js +47 -13
- package/dist/components/list/index.js.map +1 -1
- package/dist/components/list-detail/index.d.ts +34 -1
- package/dist/components/list-detail/index.js +34 -1
- package/dist/components/list-detail/index.js.map +1 -1
- package/dist/components/list-item/index.d.ts +21 -2
- package/dist/components/list-item/index.js +6 -0
- package/dist/components/list-item/index.js.map +1 -1
- package/dist/components/menu/index.d.ts +6 -3
- package/dist/components/menu/index.js +3 -1
- package/dist/components/menu/index.js.map +1 -1
- package/dist/components/meter/index.d.ts +4 -0
- package/dist/components/meter/index.js +4 -0
- package/dist/components/meter/index.js.map +1 -1
- package/dist/components/navigation-bar/index.d.ts +14 -2
- package/dist/components/navigation-bar/index.js +14 -2
- package/dist/components/navigation-bar/index.js.map +1 -1
- package/dist/components/navigation-tree/index.js +2 -9
- package/dist/components/navigation-tree/index.js.map +1 -1
- package/dist/components/number-field/index.d.ts +7 -1
- package/dist/components/number-field/index.js +7 -1
- package/dist/components/number-field/index.js.map +1 -1
- package/dist/components/popover/index.d.ts +15 -1
- package/dist/components/popover/index.js +15 -1
- package/dist/components/popover/index.js.map +1 -1
- package/dist/components/product-icon/index.d.ts +8 -1
- package/dist/components/product-icon/index.js +8 -1
- package/dist/components/product-icon/index.js.map +1 -1
- package/dist/components/progress-indicator/index.d.ts +12 -6
- package/dist/components/progress-indicator/index.js +57 -46
- package/dist/components/progress-indicator/index.js.map +1 -1
- package/dist/components/radio-group/index.d.ts +7 -0
- package/dist/components/radio-group/index.js +23 -14
- package/dist/components/radio-group/index.js.map +1 -1
- package/dist/components/search-field/index.d.ts +13 -4
- package/dist/components/search-field/index.js +10 -4
- package/dist/components/search-field/index.js.map +1 -1
- package/dist/components/search-view/index.d.ts +2 -0
- package/dist/components/search-view/index.js.map +1 -1
- package/dist/components/segmented-button/index.d.ts +1 -1
- package/dist/components/segmented-button/index.js.map +1 -1
- package/dist/components/separator/index.d.ts +31 -6
- package/dist/components/separator/index.js +30 -6
- package/dist/components/separator/index.js.map +1 -1
- package/dist/components/sheet/index.d.ts +96 -37
- package/dist/components/sheet/index.js +420 -136
- package/dist/components/sheet/index.js.map +1 -1
- package/dist/components/snackbar/index.d.ts +8 -1
- package/dist/components/snackbar/index.js +7 -0
- package/dist/components/snackbar/index.js.map +1 -1
- package/dist/components/stack/index.d.ts +21 -5
- package/dist/components/stack/index.js +10 -0
- package/dist/components/stack/index.js.map +1 -1
- package/dist/components/switch/index.d.ts +12 -0
- package/dist/components/switch/index.js +12 -0
- package/dist/components/switch/index.js.map +1 -1
- package/dist/components/text-field/index.d.ts +39 -9
- package/dist/components/text-field/index.js +29 -7
- package/dist/components/text-field/index.js.map +1 -1
- package/dist/components/tree/index.js +11 -15
- package/dist/components/tree/index.js.map +1 -1
- package/dist/field/styles.js.map +1 -1
- package/dist/glyphs/index.js +19 -18
- package/dist/glyphs/index.js.map +1 -1
- package/dist/hooks/useBottomEdge.js +6 -3
- package/dist/hooks/useBottomEdge.js.map +1 -1
- package/dist/hooks/useRipple.js +216 -192
- package/dist/hooks/useRipple.js.map +1 -1
- package/dist/i18n/index.js +1 -0
- package/dist/i18n/index.js.map +1 -1
- package/dist/i18n/messages.js +34 -0
- package/dist/i18n/messages.js.map +1 -1
- package/dist/index.d.ts +3 -3
- package/dist/indicator/styles.js +7 -4
- package/dist/indicator/styles.js.map +1 -1
- package/dist/{tokens/theme.d.ts → kanso-ui-core/defaults-DMH0HWCw.d.ts} +3 -3
- package/dist/kanso-ui-core/glyphs.js +48 -0
- package/dist/kanso-ui-core/glyphs.js.map +1 -0
- package/dist/mark/styles.js +11 -5
- package/dist/mark/styles.js.map +1 -1
- package/dist/react-aria.d.ts +2 -2
- package/dist/row/index.js +90 -62
- package/dist/row/index.js.map +1 -1
- package/dist/row/styles.js +6 -1
- package/dist/row/styles.js.map +1 -1
- package/dist/styles/focus.js.map +1 -1
- package/dist/styles/overlay.js +8 -0
- package/dist/styles/overlay.js.map +1 -1
- package/dist/styles.css +135 -114
- package/dist/theme-scope.d.ts +15 -3
- package/dist/theme-scope.js +86 -98
- package/dist/theme-scope.js.map +1 -1
- package/dist/tokens/design.tokens.stylex.js.map +1 -1
- package/dist/tokens/values.js.map +1 -1
- package/package.json +12 -10
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","RefObject","ClassNameOrFunction","DialogProps","DialogTriggerProps","HeadingProps","PopoverRenderProps","StyleOrFunction","TextProps","stylex","createContext","useCallback","useContext","useEffect","useId","useMemo","useRef","useState","useInteractOutside","ButtonContext","DEFAULT_SLOT","Dialog","DialogContext","DialogTrigger","Heading","HeadingContext","OverlayTriggerStateContext","PreviewTrigger","Popover","RACPopover","PopoverContext","RACPopoverContext","Text","TextContext","useSlottedContext","OverlayAlign","OverlaySide","OverlayScope","mergeRefs","focus","mergeStatefulStyles","mergeStyles","overlay","placementOf","popupOrigin","colors","spacing","typography","DEFAULT_SIDE_OFFSET","styles","content","kGO01o","kLKAdn","kg3NbH","$$css","description","kB7OPa","kMwMTN","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","kogj98","md","ks0D6T","sm","title","DEFAULT_HOVER_DELAY","DEFAULT_HOVER_CLOSE_DELAY","PopoverAlign","PopoverSide","PopoverSize","modal","size","DescriptionContext","id","TitleContext","TEXT_SLOTS","slots","PopoverProps","Omit","children","closeDelay","delay","trigger","PopoverTrigger","PanelDialog","t0","$","labelledBy","onPressWithin","props","slot","t1","t2","t3","t4","render","_render","t5","t6","ref","state","triggerOf","pressed","undefined","titleId","titled","setTitled","Symbol","for","registerTitle","level","headings","onPress","close","t7","t8","buttons","t10","t9","element","current","contains","document","activeElement","preventScroll","t11","t12","t13","t14","popupDialog","ring","t15","t16","t17","t18","context","PopoverContent","alignOffset","className","container","style","triggerRef","align","side","sideOffset","handed","panel","merged","pressedWithin","markPressWithin","own","triggers","fromTrigger","isOutsideTrigger","isOpen","event","target","Element","isDisabled","onInteractOutside","onInteractOutsideStart","descriptions","setDescriptions","ids","ids_0","at","indexOf","slice","registerDescription","length","Set","join","describedBy","t19","t20","popup","placement","t21","t22","t23","PopoverDescription","register","generated","PopoverTitle","Content","Description","Title","PopoverContentProps","PopoverDescriptionProps","PopoverTitleProps","PopoverContext","_c","props","stylex.props","Popover","RACPopoverContext","RACPopover"],"sources":["../../../src/components/popover/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes, RefObject } from 'react';\nimport type { ClassNameOrFunction, DialogProps, DialogTriggerProps, HeadingProps, PopoverRenderProps, StyleOrFunction, TextProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from 'react';\nimport { useInteractOutside } from 'react-aria';\nimport { ButtonContext, DEFAULT_SLOT, Dialog, DialogContext, DialogTrigger, Heading, HeadingContext, OverlayTriggerStateContext, PreviewTrigger, Popover as RACPopover, PopoverContext as RACPopoverContext, Text, TextContext, useSlottedContext } from 'react-aria-components';\nimport type { OverlayAlign, OverlaySide } from '../../styles/overlay';\nimport { OverlayScope } from '../../overlay';\nimport { mergeRefs } from '../../render/ref';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport { overlay, placementOf, popupOrigin } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// The gap between the anchor and the panel, matching `spacing.sm`'s default.\n// A number rather than the token, because React Aria computes the position in\n// JavaScript and so cannot read a CSS custom property — this is the one place\n// in the component where a step of the spacing scale is spelled out. React\n// Aria's own default is 8 as well, but the value is this component's decision\n// rather than an inherited one.\nconst DEFAULT_SIDE_OFFSET = 8;\n\n// The surface, its entry and the dialog's focus ring are the overlay module's,\n// shared with every anchored overlay; what is here is Popover's own — its\n// inset, its two widths, and the type of its title and description.\n//\n// Popover has no page of its own, so the inset and the type follow the rich\n// tooltip, the nearest thing the Material Design pages draw: a plain rounded\n// panel offset from its anchor, with no caret drawn between the two, holding\n// a subhead over supporting text.\n//\n// React Aria's popover is two elements — the positioned panel and the dialog\n// inside it — so the styles are split the same way: the surface, `content`\n// and a size on the panel, the dialog style on the element that carries the\n// role.\nconst styles = {\n content: {\n kGO01o: \"xqf7pud\",\n kLKAdn: \"x6gmt8y\",\n kg3NbH: \"x790zyz\",\n $$css: true\n },\n description: {\n kB7OPa: \"x9f619\",\n kMwMTN: \"x1w5n3ug\",\n kMv6JI: \"xpo2rfv\",\n kGuDYH: \"x193rfdd\",\n k63SB2: \"x1hews6w\",\n kb6lSQ: \"xn43zvd\",\n kLWn49: \"xv61bfh\",\n kogj98: \"x1ghz6dp\",\n $$css: true\n },\n md: {\n ks0D6T: \"x10u2fgw\",\n $$css: true\n },\n sm: {\n ks0D6T: \"xjjheoa\",\n $$css: true\n },\n title: {\n kB7OPa: \"x9f619\",\n kMwMTN: \"x1w5n3ug\",\n kMv6JI: \"xrgwony\",\n kGuDYH: \"x12s497w\",\n k63SB2: \"x1szcwkt\",\n kb6lSQ: \"xo803ec\",\n kLWn49: \"xyl1r0q\",\n kogj98: \"x1ghz6dp\",\n $$css: true\n }\n};\n\n// How long a pointer rests on the trigger before a hovered popover opens,\n// and how long it has to leave before it closes. React Aria's own defaults,\n// spelled out because they are the whole feel of a hover trigger and worth\n// finding in the component rather than in a changelog.\nconst DEFAULT_HOVER_DELAY = 600;\nconst DEFAULT_HOVER_CLOSE_DELAY = 200;\n\n// The overlay module's, since which side a surface opens on is the same\n// question for every anchored overlay. Aliased rather than re-declared so\n// the names a call site imports stay this component's.\ntype PopoverAlign = OverlayAlign;\ntype PopoverSide = OverlaySide;\ntype PopoverSize = 'md' | 'sm';\n\n// `size` and `modal` are declared on the root, where a reader expects to set\n// the shape of the whole popover, but it is `Popover.Content` that has to\n// apply them. Through context rather than making the call site repeat them —\n// the same arrangement Sheet uses, and worth keeping identical between the\n// two panels a consumer is most likely to reach for in the same afternoon.\nconst PopoverContext = createContext<{\n modal: boolean;\n size: PopoverSize;\n}>({\n modal: false,\n size: 'md'\n});\n\n// React Aria points a dialog's `aria-describedby` at its description slot\n// only for an alert dialog, on the grounds that an ordinary dialog's content\n// is read anyway. A popover's description names what the panel is for, so it\n// is pointed at here: each description reports the id it renders while it is\n// mounted, and the dialog follows those ids, since an `aria-describedby` with\n// nothing at the other end is an invalid reference rather than a harmless one.\n// The id is the one the element carries, a call site's own included, and each\n// description has one of its own, so a second description adds its id rather\n// than sharing the first's, and unmounting either leaves the other.\nconst DescriptionContext = createContext<(id: string) => () => void>(() => () => {});\n\n// The same for the title, which the non-modal panel names itself by — see\n// PanelDialog. React Aria's own Dialog finds its title by looking for it;\n// the panel here is told it is there.\nconst TitleContext = createContext<() => () => void>(() => () => {});\n\n// The text slot the description fills, with the default beside it so a\n// plain `Text` still renders. Hoisted, since it never changes.\nconst TEXT_SLOTS = {\n slots: {\n [DEFAULT_SLOT]: {},\n description: {}\n }\n};\ntype PopoverProps = Omit<DialogTriggerProps, 'children'> & {\n children?: ReactNode;\n /**\n * How long the pointer has to leave a hovered popover before it closes, in\n * milliseconds. Ignored by a pressed one.\n * @default 200\n */\n closeDelay?: number;\n /**\n * How long the pointer has to rest on the trigger before a hovered popover\n * opens, in milliseconds. Ignored by a pressed one.\n * @default 600\n */\n delay?: number;\n /**\n * Blocks the page behind the panel while it is open, as a dialog would.\n * Off by default: a popover leaves the page interactive, which is the\n * difference from `Sheet`.\n * @default false\n */\n modal?: boolean;\n /**\n * Panel width: `sm` caps at 240px, `md` at 320px. Either way the panel is\n * only as wide as its contents, and never wider than the viewport.\n * @default 'md'\n */\n size?: PopoverSize;\n /**\n * What opens the panel: a press, or a pointer resting on the trigger.\n * `hover` is the tooltips page's rich tooltip — it opens on hover, focus\n * or a long press, and stays open while the pointer is inside it, so the\n * panel's own buttons and links can be reached.\n * @default 'press'\n */\n trigger?: PopoverTrigger;\n};\ntype PopoverTrigger = 'hover' | 'press';\n\n/**\n * The element that carries the dialog role in a non-modal popover: what\n * React Aria's `Dialog` gives a modal one — the role, the name from the\n * title, the description, and the close slot — without the two things that\n * make `Dialog` a modal's.\n *\n * `Dialog` moves focus into itself as it mounts, whatever opened it, and\n * holds focus inside the overlay until it closes. A hover popover therefore\n * took focus from wherever the reader was typing the moment a pointer\n * rested on its trigger, and Tab in an open popover went round its own\n * controls forever, though the page behind a non-modal popover is meant to\n * stay in reach. Here a pressed popover still takes focus as it opens, since\n * a press asked for the panel, but a hovered one leaves it where it is, and\n * Tab past the panel's last control carries on from the trigger in the\n * page. React Aria's popover sees a dialog inside it and so adds no role or\n * focus handling of its own.\n */\nfunction PanelDialog({\n 'aria-labelledby': labelledBy,\n children,\n id,\n onPressWithin,\n // React Aria's render prop is the one part of a dialog's props this\n // element cannot honour, being an element of its own rather than React\n // Aria's; left out rather than spread onto the DOM.\n render: _render,\n slot,\n ...props\n}: Omit<PopoverContentProps, 'align' | 'alignOffset' | 'className' | 'container' | 'side' | 'sideOffset' | 'style' | 'triggerRef'> & {\n /**\n * Called when a press starts anywhere inside the panel in React's tree,\n * which takes in what an overlay opened from the panel draws elsewhere in\n * the document — see `PopoverContent`.\n */\n onPressWithin: () => void;\n}) {\n const ref = useRef<HTMLElement>(null);\n const state = useContext(OverlayTriggerStateContext);\n // What the trigger hands its overlay: the id the trigger's\n // `aria-controls` points at, and the trigger itself as the name of a\n // panel with no title. A hover trigger hands nothing, and is a hover\n // trigger for exactly that reason.\n const trigger = triggerOf(useContext(DialogContext));\n const pressed = trigger !== undefined;\n const titleId = useId();\n const [titled, setTitled] = useState(false);\n const registerTitle = useCallback(() => {\n setTitled(true);\n return () => {\n setTitled(false);\n };\n }, []);\n const headings = useMemo(() => ({\n slots: {\n [DEFAULT_SLOT]: {},\n title: {\n id: titleId,\n level: 2\n }\n }\n }), [titleId]);\n const buttons = useMemo(() => ({\n slots: {\n close: {\n onPress: () => {\n state?.close();\n }\n },\n [DEFAULT_SLOT]: {}\n }\n }), [state]);\n useEffect(() => {\n const element = ref.current;\n if (pressed && element !== null && !element.contains(document.activeElement)) {\n element.focus({\n preventScroll: true\n });\n }\n }, [pressed]);\n return (\n // A section with the role, as React Aria's own dialog is: a `<dialog>`\n // element brings the browser's own positioning, border, padding and top\n // layer, all of which the panel around it already decides.\n <section {...props} aria-labelledby={labelledBy ?? (titled ? titleId : trigger?.labelledBy)} id={id ?? trigger?.id} onPointerDownCapture={onPressWithin} ref={ref}\n // oxlint-disable-next-line jsx-a11y/prefer-tag-over-role -- a `<dialog>` element would bring the browser's own positioning and top layer, which the panel around it already decides\n role=\"dialog\" slot={slot ?? undefined} tabIndex={-1} {...stylex.props(overlay.popupDialog, focus.ring)}>\n <HeadingContext value={headings}>\n <TextContext value={TEXT_SLOTS}>\n <ButtonContext value={buttons}>\n <TitleContext value={registerTitle}>{children}</TitleContext>\n </ButtonContext>\n </TextContext>\n </HeadingContext>\n </section>\n );\n}\n\n// React Aria names a placement by the side and, along it, the end the panel\n// is aligned to — `bottom start`, or `left top` on the sides where the axis\n// runs the other way.\n/**\n * A panel anchored to the control that opened it. Open state is React Aria's:\n * pass `isOpen` with `onOpenChange` to control it, or `defaultOpen` to let it\n * keep its own.\n *\n * Non-modal by design — the page behind stays scrollable and clickable, which\n * is the difference from `Sheet`. Pass `modal` to change that. Escape, a press\n * anywhere outside the panel and a button given `slot=\"close\"` close it, and\n * a press on its trigger toggles it. Inside a dialog, a press on the scrim\n * closes the popover first and the dialog on the next, as a menu does.\n *\n * Composed rather than configured by props, because a popover's contents are\n * arbitrary — the parts are `Popover.Content`, `Popover.Title`, and\n * `Popover.Description`. A `Button` or `IconButton` placed directly inside\n * `Popover` opens it, and one given `slot=\"close\"` inside the content closes\n * it; neither needs a part of its own.\n */\nfunction Popover({\n children,\n closeDelay = DEFAULT_HOVER_CLOSE_DELAY,\n delay = DEFAULT_HOVER_DELAY,\n modal = false,\n size = 'md',\n trigger = 'press',\n ...props\n}: PopoverProps) {\n // A hovered popover is React Aria's preview trigger, which is a different\n // element around the same parts rather than a mode of the pressed one: it\n // opens from hover, focus or a long press, and it is always non-modal,\n // since a panel that blocked the page while the pointer merely rested on\n // something would be a trap. `modal` is ignored there rather than\n // refused, so the content draws the non-modal panel whatever it says.\n const context = useMemo(() => ({\n modal: modal && trigger !== 'hover',\n size\n }), [modal, size, trigger]);\n if (trigger === 'hover') {\n return <PopoverContext value={context}>\n <PreviewTrigger closeDelay={closeDelay} delay={delay} {...props}>\n {children}\n </PreviewTrigger>\n </PopoverContext>;\n }\n return <PopoverContext value={context}>\n <DialogTrigger {...props}>{children}</DialogTrigger>\n </PopoverContext>;\n}\n\n/**\n * The panel itself. Everything the popover shows goes in here; the trigger\n * stays outside it, since the trigger lives in the page while this is\n * portalled out to the end of the body.\n *\n * Placement is React Aria's anchor positioning, so the panel flips to the\n * opposite side and shifts along the edge of the viewport on its own rather\n * than being clipped by it.\n */\nfunction PopoverContent({\n align = 'center',\n alignOffset,\n children,\n className,\n container,\n ref,\n side = 'bottom',\n sideOffset = DEFAULT_SIDE_OFFSET,\n style,\n triggerRef,\n ...props\n}: PopoverContentProps & RefAttributes<HTMLElement>) {\n const {\n modal,\n size\n } = useContext(PopoverContext);\n const state = useContext(OverlayTriggerStateContext);\n // The trigger React Aria hands its popover, for a content part given no\n // `triggerRef` of its own.\n const handed = useSlottedContext(RACPopoverContext)?.triggerRef;\n\n // A non-modal popover is one React Aria closes on blur alone: a press on\n // blank page left it open, and a press on its own trigger closed it as\n // focus left the panel and opened it again on the same press. Here a\n // press anywhere outside the panel closes it, and a press on the trigger\n // is left to the trigger, which toggles it.\n //\n // What an overlay opened from inside the panel draws — a select's list, a\n // menu — is portalled elsewhere in the document, so a press there is\n // outside the panel's element though it is within the panel's tree. React\n // carries the press up that tree, and the panel marks it as within before\n // the press ends; the outside press is read on its end, so the mark is\n // there to read. Each press outside clears it as it starts.\n const panel = useRef<HTMLElement>(null);\n const merged = useMemo(() => mergeRefs(panel, ref ?? undefined), [ref]);\n const pressedWithin = useRef(false);\n const markPressWithin = useCallback(() => {\n pressedWithin.current = true;\n }, []);\n // The two refs the trigger may come through, kept where a callback can\n // read them at the moment of a press rather than as dependencies, which a\n // ref is not.\n const triggers = useRef({\n handed,\n own: triggerRef\n });\n useEffect(() => {\n triggers.current = {\n handed,\n own: triggerRef\n };\n });\n const isOutsideTrigger = useCallback((element: Element) => {\n const {\n handed: fromTrigger,\n own\n } = triggers.current;\n const trigger = own?.current ?? fromTrigger?.current;\n return !(trigger?.contains(element) ?? false);\n }, []);\n useInteractOutside({\n isDisabled: modal || state === null || !state.isOpen,\n onInteractOutside: event => {\n if (pressedWithin.current) {\n pressedWithin.current = false;\n return;\n }\n if (event.target instanceof Element && !isOutsideTrigger(event.target)) {\n return;\n }\n state?.close();\n },\n onInteractOutsideStart: () => {\n pressedWithin.current = false;\n },\n ref: panel\n });\n\n // The ids of the descriptions mounted in the panel, one entry per\n // description, in the order they mounted.\n const [descriptions, setDescriptions] = useState<readonly string[]>([]);\n const registerDescription = useCallback((id: string) => {\n setDescriptions(ids => [...ids, id]);\n return () => {\n setDescriptions(ids => {\n const at = ids.indexOf(id);\n return at === -1 ? ids : [...ids.slice(0, at), ...ids.slice(at + 1)];\n });\n };\n }, []);\n const describedBy = descriptions.length > 0 ? [...new Set(descriptions)].join(' ') : undefined;\n return <OverlayScope>\n <RACPopover crossOffset={alignOffset} isNonModal={!modal} offset={sideOffset} placement={placementOf(side, align)}\n // The surface, where the call site's class and style land, rather than\n // the dialog inside it, which takes the rest of the props.\n ref={merged}\n // Focus leaving for the trigger closes nothing: the trigger's own\n // press toggles the panel, and closing it first reopened it.\n shouldCloseOnInteractOutside={modal ? undefined : isOutsideTrigger} triggerRef={triggerRef}\n // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n UNSTABLE_portalContainer={container} {...mergeStatefulStyles((render: PopoverRenderProps) => stylex.props(overlay.popup, styles.content, styles[size], popupOrigin(render.placement)), {\n className,\n style\n })}>\n {modal ? <Dialog aria-describedby={describedBy} {...props} {...stylex.props(overlay.popupDialog, focus.ring)}>\n <DescriptionContext value={registerDescription}>\n {children}\n </DescriptionContext>\n </Dialog> : <PanelDialog aria-describedby={describedBy} onPressWithin={markPressWithin} {...props}>\n <DescriptionContext value={registerDescription}>\n {children}\n </DescriptionContext>\n </PanelDialog>}\n </RACPopover>\n </OverlayScope>;\n}\n\n/**\n * Supporting copy under the title. The panel's `aria-describedby` points at\n * it — see DescriptionContext for why that is this component's doing.\n */\nfunction PopoverDescription(props: PopoverDescriptionProps & RefAttributes<HTMLElement>) {\n const register = useContext(DescriptionContext);\n const generated = useId();\n const id = props.id ?? generated;\n useEffect(() => register(id), [id, register]);\n return <Text slot=\"description\" {...props} id={id} {...mergeStyles({\n className: \"x9f619 x1w5n3ug xpo2rfv x193rfdd x1hews6w xn43zvd xv61bfh x1ghz6dp\"\n }, props)} />;\n}\n\n/**\n * Names the popover. Rendered through React Aria's title slot, which is what\n * points the panel's `aria-labelledby` at it — a popover without one announces\n * itself unnamed.\n */\nfunction PopoverTitle(props: PopoverTitleProps & RefAttributes<HTMLHeadingElement>) {\n const register = useContext(TitleContext);\n useEffect(() => register(), [register]);\n return <Heading slot=\"title\" {...props} {...mergeStyles({\n className: \"x9f619 x1w5n3ug xrgwony x12s497w x1szcwkt xo803ec xyl1r0q x1ghz6dp\"\n }, props)} />;\n}\n\n/**\n * What a pressed trigger hands the overlay it opens: the id its\n * `aria-controls` points at, and its own id to name a panel with no title.\n * Read field by field, since the context's type also admits a slotted\n * value; a hover trigger hands nothing.\n */\nfunction triggerOf(context: unknown) {\n if (typeof context !== 'object' || context === null || 'slots' in context) {\n return undefined;\n }\n return {\n id: 'id' in context && typeof context.id === 'string' ? context.id : undefined,\n labelledBy: 'aria-labelledby' in context && typeof context['aria-labelledby'] === 'string' ? context['aria-labelledby'] : undefined\n };\n}\nPopover.Content = PopoverContent;\nPopover.Description = PopoverDescription;\nPopover.Title = PopoverTitle;\n\n// The dialog's own props, plus the four that place the panel and its\n// styling. Those belong to the positioned panel rather than to the dialog,\n// but a call site has no reason to know there are two elements — `className`\n// and `style` reach the panel, which is the one worth restyling, and\n// everything else lands on the dialog.\ntype PopoverContentProps = Omit<DialogProps, 'children' | 'className' | 'style'> & {\n /**\n * Where the panel sits along the side it opens on.\n * @default 'center'\n */\n align?: PopoverAlign;\n /** Moves the panel along that side, in pixels. */\n alignOffset?: number;\n children?: ReactNode;\n /** A function may compute the class from the panel's render state. */\n className?: ClassNameOrFunction<PopoverRenderProps>;\n /**\n * Where to portal the panel. Defaults to the container of the `ThemeScope`\n * around it, which keeps the popover on that scope's tokens, or to the end of\n * `<body>` where there is none. A subtree themed through the `themeScope`\n * class has no container of its own, so point this inside it, or the popover\n * renders outside and keeps the page's tokens.\n */\n container?: Element;\n /**\n * Which side of the trigger the panel opens on. It flips to the opposite\n * side when there is no room. `start` and `end` follow the writing\n * direction, so `end` is the right in English and the left in Arabic;\n * `left` and `right` stay put in either.\n * @default 'bottom'\n */\n side?: PopoverSide;\n /**\n * The gap between the trigger and the panel, in pixels.\n * @default 8\n */\n sideOffset?: number;\n /** A function may compute the style from the panel's render state. */\n style?: StyleOrFunction<PopoverRenderProps>;\n /**\n * An element to anchor the panel to other than the trigger that opened it.\n */\n triggerRef?: RefObject<Element | null>;\n};\ntype PopoverDescriptionProps = TextProps;\ntype PopoverTitleProps = HeadingProps;\nexport type { PopoverAlign, PopoverContentProps, PopoverDescriptionProps, PopoverProps, PopoverSide, PopoverSize, PopoverTitleProps, PopoverTrigger };\nexport { PopoverContent, PopoverDescription, PopoverTitle };\nexport default Popover;"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","RefObject","ClassNameOrFunction","DialogProps","DialogTriggerProps","HeadingProps","PopoverRenderProps","StyleOrFunction","TextProps","stylex","createContext","useCallback","useContext","useEffect","useId","useMemo","useRef","useState","useInteractOutside","ButtonContext","DEFAULT_SLOT","Dialog","DialogContext","DialogTrigger","Heading","HeadingContext","OverlayTriggerStateContext","PreviewTrigger","Popover","RACPopover","PopoverContext","RACPopoverContext","Text","TextContext","useSlottedContext","OverlayAlign","OverlaySide","OverlayScope","mergeRefs","focus","mergeStatefulStyles","mergeStyles","overlay","placementOf","popupOrigin","colors","spacing","typography","DEFAULT_SIDE_OFFSET","styles","content","kGO01o","kLKAdn","kg3NbH","$$css","description","kB7OPa","kMwMTN","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","kogj98","md","ks0D6T","sm","title","DEFAULT_HOVER_DELAY","DEFAULT_HOVER_CLOSE_DELAY","PopoverAlign","PopoverSide","PopoverSize","modal","size","DescriptionContext","id","TitleContext","TEXT_SLOTS","slots","PopoverProps","Omit","children","closeDelay","delay","trigger","PopoverTrigger","PanelDialog","t0","$","labelledBy","onPressWithin","props","slot","t1","t2","t3","t4","render","_render","t5","t6","ref","state","triggerOf","pressed","undefined","titleId","titled","setTitled","Symbol","for","registerTitle","level","headings","onPress","close","t7","t8","buttons","t10","t9","element","current","contains","document","activeElement","preventScroll","t11","t12","t13","t14","popupDialog","ring","t15","t16","t17","t18","context","PopoverContent","alignOffset","className","container","style","triggerRef","align","side","sideOffset","handed","panel","merged","pressedWithin","markPressWithin","own","triggers","fromTrigger","isOutsideTrigger","isOpen","event","target","Element","isDisabled","onInteractOutside","onInteractOutsideStart","descriptions","setDescriptions","ids","ids_0","at","indexOf","slice","registerDescription","length","Set","join","describedBy","t19","t20","popup","placement","t21","t22","t23","PopoverDescription","register","generated","PopoverTitle","Content","Description","Title","PopoverContentProps","PopoverDescriptionProps","PopoverTitleProps","PopoverContext","_c","props","stylex.props","Popover","RACPopoverContext","RACPopover"],"sources":["../../../src/components/popover/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes, RefObject } from 'react';\nimport type { ClassNameOrFunction, DialogProps, DialogTriggerProps, HeadingProps, PopoverRenderProps, StyleOrFunction, TextProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from 'react';\nimport { useInteractOutside } from 'react-aria';\nimport { ButtonContext, DEFAULT_SLOT, Dialog, DialogContext, DialogTrigger, Heading, HeadingContext, OverlayTriggerStateContext, PreviewTrigger, Popover as RACPopover, PopoverContext as RACPopoverContext, Text, TextContext, useSlottedContext } from 'react-aria-components';\nimport type { OverlayAlign, OverlaySide } from '../../styles/overlay';\nimport { OverlayScope } from '../../overlay';\nimport { mergeRefs } from '../../render/ref';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport { overlay, placementOf, popupOrigin } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// The gap between the anchor and the panel, matching `spacing.sm`'s default.\n// A number rather than the token, because React Aria computes the position in\n// JavaScript and so cannot read a CSS custom property — this is the one place\n// in the component where a step of the spacing scale is spelled out. React\n// Aria's own default is 8 as well, but the value is this component's decision\n// rather than an inherited one.\nconst DEFAULT_SIDE_OFFSET = 8;\n\n// The surface, its entry and the dialog's focus ring are the overlay module's,\n// shared with every anchored overlay; what is here is Popover's own — its\n// inset, its two widths, and the type of its title and description.\n//\n// Popover has no page of its own, so the inset and the type follow the rich\n// tooltip, the nearest thing the Material Design pages draw: a plain rounded\n// panel offset from its anchor, with no caret drawn between the two, holding\n// a subhead over supporting text.\n//\n// React Aria's popover is two elements — the positioned panel and the dialog\n// inside it — so the styles are split the same way: the surface, `content`\n// and a size on the panel, the dialog style on the element that carries the\n// role.\nconst styles = {\n content: {\n kGO01o: \"xqf7pud\",\n kLKAdn: \"x6gmt8y\",\n kg3NbH: \"x790zyz\",\n $$css: true\n },\n description: {\n kB7OPa: \"x9f619\",\n kMwMTN: \"x1w5n3ug\",\n kMv6JI: \"xpo2rfv\",\n kGuDYH: \"x193rfdd\",\n k63SB2: \"x1hews6w\",\n kb6lSQ: \"xn43zvd\",\n kLWn49: \"xv61bfh\",\n kogj98: \"x1ghz6dp\",\n $$css: true\n },\n md: {\n ks0D6T: \"x10u2fgw\",\n $$css: true\n },\n sm: {\n ks0D6T: \"xjjheoa\",\n $$css: true\n },\n title: {\n kB7OPa: \"x9f619\",\n kMwMTN: \"x1w5n3ug\",\n kMv6JI: \"xrgwony\",\n kGuDYH: \"x12s497w\",\n k63SB2: \"x1szcwkt\",\n kb6lSQ: \"xo803ec\",\n kLWn49: \"xyl1r0q\",\n kogj98: \"x1ghz6dp\",\n $$css: true\n }\n};\n\n// How long a pointer rests on the trigger before a hovered popover opens,\n// and how long it has to leave before it closes. React Aria's own defaults,\n// spelled out because they are the whole feel of a hover trigger and worth\n// finding in the component rather than in a changelog.\nconst DEFAULT_HOVER_DELAY = 600;\nconst DEFAULT_HOVER_CLOSE_DELAY = 200;\n\n// The overlay module's, since which side a surface opens on is the same\n// question for every anchored overlay. Aliased rather than re-declared so\n// the names a call site imports stay this component's.\ntype PopoverAlign = OverlayAlign;\ntype PopoverSide = OverlaySide;\ntype PopoverSize = 'md' | 'sm';\n\n// `size` and `modal` are declared on the root, where a reader expects to set\n// the shape of the whole popover, but it is `Popover.Content` that has to\n// apply them. Through context rather than making the call site repeat them —\n// the same arrangement Sheet uses, and worth keeping identical between the\n// two panels a consumer is most likely to reach for in the same afternoon.\nconst PopoverContext = createContext<{\n modal: boolean;\n size: PopoverSize;\n}>({\n modal: false,\n size: 'md'\n});\n\n// React Aria points a dialog's `aria-describedby` at its description slot\n// only for an alert dialog, on the grounds that an ordinary dialog's content\n// is read anyway. A popover's description names what the panel is for, so it\n// is pointed at here: each description reports the id it renders while it is\n// mounted, and the dialog follows those ids, since an `aria-describedby` with\n// nothing at the other end is an invalid reference rather than a harmless one.\n// The id is the one the element carries, a call site's own included, and each\n// description has one of its own, so a second description adds its id rather\n// than sharing the first's, and unmounting either leaves the other.\nconst DescriptionContext = createContext<(id: string) => () => void>(() => () => {});\n\n// The same for the title, which the non-modal panel names itself by — see\n// PanelDialog. React Aria's own Dialog finds its title by looking for it;\n// the panel here is told it is there.\nconst TitleContext = createContext<() => () => void>(() => () => {});\n\n// The text slot the description fills, with the default beside it so a\n// plain `Text` still renders. Hoisted, since it never changes.\nconst TEXT_SLOTS = {\n slots: {\n [DEFAULT_SLOT]: {},\n description: {}\n }\n};\ntype PopoverProps = Omit<DialogTriggerProps, 'children'> & {\n children?: ReactNode;\n /**\n * How long the pointer has to leave a hovered popover before it closes, in\n * milliseconds. Ignored by a pressed one.\n * @default 200\n */\n closeDelay?: number;\n /**\n * How long the pointer has to rest on the trigger before a hovered popover\n * opens, in milliseconds. Ignored by a pressed one.\n * @default 600\n */\n delay?: number;\n /**\n * Blocks the page behind the panel while it is open, as a dialog would.\n * Off by default: a popover leaves the page interactive, which is the\n * difference from `Sheet`.\n * @default false\n */\n modal?: boolean;\n /**\n * Panel width: `sm` caps at 240px, `md` at 320px. Either way the panel is\n * only as wide as its contents, and never wider than the viewport.\n * @default 'md'\n */\n size?: PopoverSize;\n /**\n * What opens the panel: a press, or a pointer resting on the trigger.\n * `hover` is the tooltips page's rich tooltip — it opens on hover, focus\n * or a long press, and stays open while the pointer is inside it, so the\n * panel's own buttons and links can be reached.\n * @default 'press'\n */\n trigger?: PopoverTrigger;\n};\ntype PopoverTrigger = 'hover' | 'press';\n\n/**\n * The element that carries the dialog role in a non-modal popover: what\n * React Aria's `Dialog` gives a modal one — the role, the name from the\n * title, the description, and the close slot — without the two things that\n * make `Dialog` a modal's.\n *\n * `Dialog` moves focus into itself as it mounts, whatever opened it, and\n * holds focus inside the overlay until it closes. A hover popover therefore\n * took focus from wherever the reader was typing the moment a pointer\n * rested on its trigger, and Tab in an open popover went round its own\n * controls forever, though the page behind a non-modal popover is meant to\n * stay in reach. Here a pressed popover still takes focus as it opens, since\n * a press asked for the panel, but a hovered one leaves it where it is, and\n * Tab past the panel's last control carries on from the trigger in the\n * page. React Aria's popover sees a dialog inside it and so adds no role or\n * focus handling of its own.\n */\nfunction PanelDialog({\n 'aria-labelledby': labelledBy,\n children,\n id,\n onPressWithin,\n // React Aria's render prop is the one part of a dialog's props this\n // element cannot honour, being an element of its own rather than React\n // Aria's; left out rather than spread onto the DOM.\n render: _render,\n slot,\n ...props\n}: Omit<PopoverContentProps, 'align' | 'alignOffset' | 'className' | 'container' | 'side' | 'sideOffset' | 'style' | 'triggerRef'> & {\n /**\n * Called when a press starts anywhere inside the panel in React's tree,\n * which takes in what an overlay opened from the panel draws elsewhere in\n * the document — see `PopoverContent`.\n */\n onPressWithin: () => void;\n}) {\n const ref = useRef<HTMLElement>(null);\n const state = useContext(OverlayTriggerStateContext);\n // What the trigger hands its overlay: the id the trigger's\n // `aria-controls` points at, and the trigger itself as the name of a\n // panel with no title. A hover trigger hands nothing, and is a hover\n // trigger for exactly that reason.\n const trigger = triggerOf(useContext(DialogContext));\n const pressed = trigger !== undefined;\n const titleId = useId();\n const [titled, setTitled] = useState(false);\n const registerTitle = useCallback(() => {\n setTitled(true);\n return () => {\n setTitled(false);\n };\n }, []);\n const headings = useMemo(() => ({\n slots: {\n [DEFAULT_SLOT]: {},\n title: {\n id: titleId,\n level: 2\n }\n }\n }), [titleId]);\n const buttons = useMemo(() => ({\n slots: {\n close: {\n onPress: () => {\n state?.close();\n }\n },\n [DEFAULT_SLOT]: {}\n }\n }), [state]);\n useEffect(() => {\n const element = ref.current;\n if (pressed && element !== null && !element.contains(document.activeElement)) {\n element.focus({\n preventScroll: true\n });\n }\n }, [pressed]);\n return (\n // A section with the role, as React Aria's own dialog is: a `<dialog>`\n // element brings the browser's own positioning, border, padding and top\n // layer, all of which the panel around it already decides.\n <section {...props} aria-labelledby={labelledBy ?? (titled ? titleId : trigger?.labelledBy)} id={id ?? trigger?.id} onPointerDownCapture={onPressWithin} ref={ref}\n // oxlint-disable-next-line jsx-a11y/prefer-tag-over-role -- a `<dialog>` element would bring the browser's own positioning and top layer, which the panel around it already decides\n role=\"dialog\" slot={slot ?? undefined} tabIndex={-1} {...stylex.props(overlay.popupDialog, focus.ring)}>\n <HeadingContext value={headings}>\n <TextContext value={TEXT_SLOTS}>\n <ButtonContext value={buttons}>\n <TitleContext value={registerTitle}>{children}</TitleContext>\n </ButtonContext>\n </TextContext>\n </HeadingContext>\n </section>\n );\n}\n\n/**\n * A panel anchored to the control that opened it. Open state is React Aria's:\n * pass `isOpen` with `onOpenChange` to control it, or `defaultOpen` to let it\n * keep its own.\n *\n * Non-modal by design — the page behind stays scrollable and clickable, which\n * is the difference from `Sheet`. Pass `modal` to change that. Escape, a press\n * anywhere outside the panel and a button given `slot=\"close\"` close it, and\n * a press on its trigger toggles it. Inside a dialog, a press on the scrim\n * closes the popover first and the dialog on the next, as a menu does.\n *\n * Composed rather than configured by props, because a popover's contents are\n * arbitrary — the parts are `Popover.Content`, `Popover.Title`, and\n * `Popover.Description`. A `Button` or `IconButton` placed directly inside\n * `Popover` opens it, and one given `slot=\"close\"` inside the content closes\n * it; neither needs a part of its own. Where the panel sits against its\n * trigger is `Popover.Content`'s `side` and `align`.\n *\n * ```tsx\n * <Popover>\n * <Button>Open</Button>\n * <Popover.Content side=\"end\">\n * <Popover.Title>Headline</Popover.Title>\n * <Popover.Description>Supporting line</Popover.Description>\n * <Button slot=\"close\" variant=\"text\">\n * Dismiss\n * </Button>\n * </Popover.Content>\n * </Popover>\n * ```\n */\nfunction Popover({\n children,\n closeDelay = DEFAULT_HOVER_CLOSE_DELAY,\n delay = DEFAULT_HOVER_DELAY,\n modal = false,\n size = 'md',\n trigger = 'press',\n ...props\n}: PopoverProps) {\n // A hovered popover is React Aria's preview trigger, which is a different\n // element around the same parts rather than a mode of the pressed one: it\n // opens from hover, focus or a long press, and it is always non-modal,\n // since a panel that blocked the page while the pointer merely rested on\n // something would be a trap. `modal` is ignored there rather than\n // refused, so the content draws the non-modal panel whatever it says.\n const context = useMemo(() => ({\n modal: modal && trigger !== 'hover',\n size\n }), [modal, size, trigger]);\n if (trigger === 'hover') {\n return <PopoverContext value={context}>\n <PreviewTrigger closeDelay={closeDelay} delay={delay} {...props}>\n {children}\n </PreviewTrigger>\n </PopoverContext>;\n }\n return <PopoverContext value={context}>\n <DialogTrigger {...props}>{children}</DialogTrigger>\n </PopoverContext>;\n}\n\n/**\n * The panel itself. Everything the popover shows goes in here; the trigger\n * stays outside it, since the trigger lives in the page while this is\n * portalled out to the end of the body.\n *\n * Placement is React Aria's anchor positioning, so the panel flips to the\n * opposite side and shifts along the edge of the viewport on its own rather\n * than being clipped by it.\n */\nfunction PopoverContent({\n align = 'center',\n alignOffset,\n children,\n className,\n container,\n ref,\n side = 'bottom',\n sideOffset = DEFAULT_SIDE_OFFSET,\n style,\n triggerRef,\n ...props\n}: PopoverContentProps & RefAttributes<HTMLElement>) {\n const {\n modal,\n size\n } = useContext(PopoverContext);\n const state = useContext(OverlayTriggerStateContext);\n // The trigger React Aria hands its popover, for a content part given no\n // `triggerRef` of its own.\n const handed = useSlottedContext(RACPopoverContext)?.triggerRef;\n\n // A non-modal popover is one React Aria closes on blur alone: a press on\n // blank page left it open, and a press on its own trigger closed it as\n // focus left the panel and opened it again on the same press. Here a\n // press anywhere outside the panel closes it, and a press on the trigger\n // is left to the trigger, which toggles it.\n //\n // What an overlay opened from inside the panel draws — a select's list, a\n // menu — is portalled elsewhere in the document, so a press there is\n // outside the panel's element though it is within the panel's tree. React\n // carries the press up that tree, and the panel marks it as within before\n // the press ends; the outside press is read on its end, so the mark is\n // there to read. Each press outside clears it as it starts.\n const panel = useRef<HTMLElement>(null);\n const merged = useMemo(() => mergeRefs(panel, ref ?? undefined), [ref]);\n const pressedWithin = useRef(false);\n const markPressWithin = useCallback(() => {\n pressedWithin.current = true;\n }, []);\n // The two refs the trigger may come through, kept where a callback can\n // read them at the moment of a press rather than as dependencies, which a\n // ref is not.\n const triggers = useRef({\n handed,\n own: triggerRef\n });\n useEffect(() => {\n triggers.current = {\n handed,\n own: triggerRef\n };\n });\n const isOutsideTrigger = useCallback((element: Element) => {\n const {\n handed: fromTrigger,\n own\n } = triggers.current;\n const trigger = own?.current ?? fromTrigger?.current;\n return !(trigger?.contains(element) ?? false);\n }, []);\n useInteractOutside({\n isDisabled: modal || state === null || !state.isOpen,\n onInteractOutside: event => {\n if (pressedWithin.current) {\n pressedWithin.current = false;\n return;\n }\n if (event.target instanceof Element && !isOutsideTrigger(event.target)) {\n return;\n }\n state?.close();\n },\n onInteractOutsideStart: () => {\n pressedWithin.current = false;\n },\n ref: panel\n });\n\n // The ids of the descriptions mounted in the panel, one entry per\n // description, in the order they mounted.\n const [descriptions, setDescriptions] = useState<readonly string[]>([]);\n const registerDescription = useCallback((id: string) => {\n setDescriptions(ids => [...ids, id]);\n return () => {\n setDescriptions(ids => {\n const at = ids.indexOf(id);\n return at === -1 ? ids : [...ids.slice(0, at), ...ids.slice(at + 1)];\n });\n };\n }, []);\n const describedBy = descriptions.length > 0 ? [...new Set(descriptions)].join(' ') : undefined;\n return <OverlayScope>\n <RACPopover crossOffset={alignOffset} isNonModal={!modal} offset={sideOffset} placement={placementOf(side, align)}\n // The surface, where the call site's class and style land, rather than\n // the dialog inside it, which takes the rest of the props.\n ref={merged}\n // Focus leaving for the trigger closes nothing: the trigger's own\n // press toggles the panel, and closing it first reopened it.\n shouldCloseOnInteractOutside={modal ? undefined : isOutsideTrigger} triggerRef={triggerRef}\n // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n UNSTABLE_portalContainer={container} {...mergeStatefulStyles((render: PopoverRenderProps) => stylex.props(overlay.popup, styles.content, styles[size], popupOrigin(render.placement)), {\n className,\n style\n })}>\n {modal ? <Dialog aria-describedby={describedBy} {...props} {...stylex.props(overlay.popupDialog, focus.ring)}>\n <DescriptionContext value={registerDescription}>\n {children}\n </DescriptionContext>\n </Dialog> : <PanelDialog aria-describedby={describedBy} onPressWithin={markPressWithin} {...props}>\n <DescriptionContext value={registerDescription}>\n {children}\n </DescriptionContext>\n </PanelDialog>}\n </RACPopover>\n </OverlayScope>;\n}\n\n/**\n * Supporting copy under the title. The panel's `aria-describedby` points at\n * it — see DescriptionContext for why that is this component's doing.\n */\nfunction PopoverDescription(props: PopoverDescriptionProps & RefAttributes<HTMLElement>) {\n const register = useContext(DescriptionContext);\n const generated = useId();\n const id = props.id ?? generated;\n useEffect(() => register(id), [id, register]);\n return <Text slot=\"description\" {...props} id={id} {...mergeStyles({\n className: \"x9f619 x1w5n3ug xpo2rfv x193rfdd x1hews6w xn43zvd xv61bfh x1ghz6dp\"\n }, props)} />;\n}\n\n/**\n * Names the popover. Rendered through React Aria's title slot, which is what\n * points the panel's `aria-labelledby` at it — a popover without one announces\n * itself unnamed.\n */\nfunction PopoverTitle(props: PopoverTitleProps & RefAttributes<HTMLHeadingElement>) {\n const register = useContext(TitleContext);\n useEffect(() => register(), [register]);\n return <Heading slot=\"title\" {...props} {...mergeStyles({\n className: \"x9f619 x1w5n3ug xrgwony x12s497w x1szcwkt xo803ec xyl1r0q x1ghz6dp\"\n }, props)} />;\n}\n\n/**\n * What a pressed trigger hands the overlay it opens: the id its\n * `aria-controls` points at, and its own id to name a panel with no title.\n * Read field by field, since the context's type also admits a slotted\n * value; a hover trigger hands nothing.\n */\nfunction triggerOf(context: unknown) {\n if (typeof context !== 'object' || context === null || 'slots' in context) {\n return undefined;\n }\n return {\n id: 'id' in context && typeof context.id === 'string' ? context.id : undefined,\n labelledBy: 'aria-labelledby' in context && typeof context['aria-labelledby'] === 'string' ? context['aria-labelledby'] : undefined\n };\n}\nPopover.Content = PopoverContent;\nPopover.Description = PopoverDescription;\nPopover.Title = PopoverTitle;\n\n// The dialog's own props, plus the four that place the panel and its\n// styling. Those belong to the positioned panel rather than to the dialog,\n// but a call site has no reason to know there are two elements — `className`\n// and `style` reach the panel, which is the one worth restyling, and\n// everything else lands on the dialog.\ntype PopoverContentProps = Omit<DialogProps, 'children' | 'className' | 'style'> & {\n /**\n * Where the panel sits along the side it opens on.\n * @default 'center'\n */\n align?: PopoverAlign;\n /** Moves the panel along that side, in pixels. */\n alignOffset?: number;\n children?: ReactNode;\n /** A function may compute the class from the panel's render state. */\n className?: ClassNameOrFunction<PopoverRenderProps>;\n /**\n * Where to portal the panel. Defaults to the container of the `ThemeScope`\n * around it, which keeps the popover on that scope's tokens, or to the end of\n * `<body>` where there is none. A subtree themed through the `themeScope`\n * class has no container of its own, so point this inside it, or the popover\n * renders outside and keeps the page's tokens.\n */\n container?: Element;\n /**\n * Which side of the trigger the panel opens on. It flips to the opposite\n * side when there is no room. `start` and `end` follow the writing\n * direction, so `end` is the right in English and the left in Arabic;\n * `left` and `right` stay put in either.\n * @default 'bottom'\n */\n side?: PopoverSide;\n /**\n * The gap between the trigger and the panel, in pixels.\n * @default 8\n */\n sideOffset?: number;\n /** A function may compute the style from the panel's render state. */\n style?: StyleOrFunction<PopoverRenderProps>;\n /**\n * An element to anchor the panel to other than the trigger that opened it.\n */\n triggerRef?: RefObject<Element | null>;\n};\ntype PopoverDescriptionProps = TextProps;\ntype PopoverTitleProps = HeadingProps;\nexport type { PopoverAlign, PopoverContentProps, PopoverDescriptionProps, PopoverProps, PopoverSide, PopoverSize, PopoverTitleProps, PopoverTrigger };\nexport { PopoverContent, PopoverDescription, PopoverTitle };\nexport default Popover;"],"mappings":"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"}
|
|
@@ -50,8 +50,15 @@ type ProductIconProps = Omit<RenderComponentProps<'span'>, 'children'> & {
|
|
|
50
50
|
* The mark is letterboxed rather than cropped, so a logo of any aspect ratio
|
|
51
51
|
* can be handed over as it was drawn.
|
|
52
52
|
*
|
|
53
|
+
* ```tsx
|
|
54
|
+
* <ProductIcon name="Label" src={logo} size="lg" />
|
|
55
|
+
* ```
|
|
56
|
+
*
|
|
53
57
|
* When the thing's name is already written next to the mark, mark it
|
|
54
|
-
* `decorative`, so a screen reader reads the name once
|
|
58
|
+
* `decorative`, so a screen reader reads the name once: the square is then
|
|
59
|
+
* `aria-hidden`, where it is otherwise an image named by `name`.
|
|
60
|
+
*
|
|
61
|
+
* The call site's `className`, `style` and `ref` land on the square.
|
|
55
62
|
*/
|
|
56
63
|
declare function ProductIcon({ size, tone, ...props }: ProductIconProps): import("react").JSX.Element;
|
|
57
64
|
//#endregion
|
|
@@ -10,8 +10,15 @@ import { jsx } from "react/jsx-runtime";
|
|
|
10
10
|
* The mark is letterboxed rather than cropped, so a logo of any aspect ratio
|
|
11
11
|
* can be handed over as it was drawn.
|
|
12
12
|
*
|
|
13
|
+
* ```tsx
|
|
14
|
+
* <ProductIcon name="Label" src={logo} size="lg" />
|
|
15
|
+
* ```
|
|
16
|
+
*
|
|
13
17
|
* When the thing's name is already written next to the mark, mark it
|
|
14
|
-
* `decorative`, so a screen reader reads the name once
|
|
18
|
+
* `decorative`, so a screen reader reads the name once: the square is then
|
|
19
|
+
* `aria-hidden`, where it is otherwise an image named by `name`.
|
|
20
|
+
*
|
|
21
|
+
* The call site's `className`, `style` and `ref` land on the square.
|
|
15
22
|
*/
|
|
16
23
|
function ProductIcon(t0) {
|
|
17
24
|
const $ = c(8);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["c","_c","ImgHTMLAttributes","RenderComponentProps","Mark","ProductIconProps","Omit","decorative","imgProps","Pick","HTMLImageElement","name","size","src","tone","ProductIcon","t0","$","props","t1","t2","undefined","t3","_c"],"sources":["../../../src/components/product-icon/index.tsx"],"sourcesContent":["'use client'\n\nimport type { ImgHTMLAttributes } from 'react'\n\nimport type { RenderComponentProps } from '../../render/useRender'\n\nimport Mark from '../../mark'\n\n// The counterpart to Avatar: Avatar stands for a person, this stands for\n// everything else — an application, a service, a brand. It is drawn as a\n// rounded square with the mark letterboxed, and its tone tints the fallback\n// rather than the square. The header of `src/mark/styles.ts` says why on all\n// three counts.\n//\n// The box, the sizes, the tones, the mark's loading and the labelling are the\n// mark's in `src/mark`, which Avatar draws a person through as well. No\n// Material Design page draws a product mark, so its sizes are Avatar's — 36,\n// 40 and 56 — which is what lets a mark and a person fill the same slot.\n\ntype ProductIconProps = Omit<RenderComponentProps<'span'>, 'children'> & {\n /**\n * Hides the mark from assistive technology, for one beside the name of\n * what it identifies, where it would otherwise announce the name a second\n * time. `name` still supplies the initial, and is not announced.\n * @default false\n */\n decorative?: boolean\n /**\n * Attributes for the picture's own `<img>`: a `srcSet` and `sizes` for a\n * screen's density, a `referrerPolicy` or `crossOrigin` for where it is\n * served from, a `fetchPriority`, or `loading` and `decoding`, which are\n * `lazy` and `async` unless given.\n */\n imgProps?: Pick<\n ImgHTMLAttributes<HTMLImageElement>,\n | 'crossOrigin'\n | 'decoding'\n | 'fetchPriority'\n | 'loading'\n | 'referrerPolicy'\n | 'sizes'\n | 'srcSet'\n >\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. The initial is the name's first letter, number or\n * emoji, passing over punctuation it opens with: a handle's at sign, a\n * channel's hash or a bracket.\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/**\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 *\n * When the thing's name is already written next to the mark, mark it\n * `decorative`, so a screen reader reads the name once.\n */\nfunction ProductIcon({\n size = 'md',\n tone = 'primary',\n ...props\n}: ProductIconProps) {\n return <Mark {...props} kind=\"thing\" size={size} tone={tone} />\n}\n\nexport type { ProductIconProps }\n\nexport default ProductIcon\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","names":["c","_c","ImgHTMLAttributes","RenderComponentProps","Mark","ProductIconProps","Omit","decorative","imgProps","Pick","HTMLImageElement","name","size","src","tone","ProductIcon","t0","$","props","t1","t2","undefined","t3","_c"],"sources":["../../../src/components/product-icon/index.tsx"],"sourcesContent":["'use client'\n\nimport type { ImgHTMLAttributes } from 'react'\n\nimport type { RenderComponentProps } from '../../render/useRender'\n\nimport Mark from '../../mark'\n\n// The counterpart to Avatar: Avatar stands for a person, this stands for\n// everything else — an application, a service, a brand. It is drawn as a\n// rounded square with the mark letterboxed, and its tone tints the fallback\n// rather than the square. The header of `src/mark/styles.ts` says why on all\n// three counts.\n//\n// The box, the sizes, the tones, the mark's loading and the labelling are the\n// mark's in `src/mark`, which Avatar draws a person through as well. No\n// Material Design page draws a product mark, so its sizes are Avatar's — 36,\n// 40 and 56 — which is what lets a mark and a person fill the same slot.\n\ntype ProductIconProps = Omit<RenderComponentProps<'span'>, 'children'> & {\n /**\n * Hides the mark from assistive technology, for one beside the name of\n * what it identifies, where it would otherwise announce the name a second\n * time. `name` still supplies the initial, and is not announced.\n * @default false\n */\n decorative?: boolean\n /**\n * Attributes for the picture's own `<img>`: a `srcSet` and `sizes` for a\n * screen's density, a `referrerPolicy` or `crossOrigin` for where it is\n * served from, a `fetchPriority`, or `loading` and `decoding`, which are\n * `lazy` and `async` unless given.\n */\n imgProps?: Pick<\n ImgHTMLAttributes<HTMLImageElement>,\n | 'crossOrigin'\n | 'decoding'\n | 'fetchPriority'\n | 'loading'\n | 'referrerPolicy'\n | 'sizes'\n | 'srcSet'\n >\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. The initial is the name's first letter, number or\n * emoji, passing over punctuation it opens with: a handle's at sign, a\n * channel's hash or a bracket.\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/**\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 *\n * ```tsx\n * <ProductIcon name=\"Label\" src={logo} size=\"lg\" />\n * ```\n *\n * When the thing's name is already written next to the mark, mark it\n * `decorative`, so a screen reader reads the name once: the square is then\n * `aria-hidden`, where it is otherwise an image named by `name`.\n *\n * The call site's `className`, `style` and `ref` land on the square.\n */\nfunction ProductIcon({\n size = 'md',\n tone = 'primary',\n ...props\n}: ProductIconProps) {\n return <Mark {...props} kind=\"thing\" size={size} tone={tone} />\n}\n\nexport type { ProductIconProps }\n\nexport default ProductIcon\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAwFA,SAAAe,YAAAC,IAAA;CAAA,MAAAC,IAAAhB,EAAA,CAAA;CAAA,IAAAiB;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAH,EAAA,OAAAD,IAAA;EAAqB,CAAA,CAAAJ,MAAAO,IAAAL,MAAAM,IAAA,GAAAF,SAAAF;EAIFC,EAAA,KAAAD;EAAAC,EAAA,KAAAC;EAAAD,EAAA,KAAAE;EAAAF,EAAA,KAAAG;CAAA,OAAA;EAAAF,QAAAD,EAAA;EAAAE,KAAAF,EAAA;EAAAG,KAAAH,EAAA;CAAA;CAHjB,MAAAL,OAAAO,OAAAE,KAAAA,IAAA,OAAAF;CACA,MAAAL,OAAAM,OAAAC,KAAAA,IAAA,YAAAD;CAAgB,IAAAE;CAAA,IAAAL,EAAA,OAAAC,SAAAD,EAAA,OAAAL,QAAAK,EAAA,OAAAH,MAAA;EAGTQ,KAAA,oBAAC,MAAD;GAAK,GAAKJ;GAAY,MAAA;GAAcN;GAAYE;EAAI,CAAA;EAAIG,EAAA,KAAAC;EAAAD,EAAA,KAAAL;EAAAK,EAAA,KAAAH;EAAAG,EAAA,KAAAK;CAAA,OAAAA,KAAAL,EAAA;CAAA,OAAxDK;AAAwD"}
|
|
@@ -7,19 +7,21 @@ type ProgressIndicatorProps = {
|
|
|
7
7
|
* How far the work is loaded ahead of the value — a video's buffered
|
|
8
8
|
* seconds, a queue's fetched pages. Read on the same scale as `value`: the
|
|
9
9
|
* track is solid up to it and dotted beyond. Ignored while the indicator
|
|
10
|
-
* is indeterminate, and
|
|
10
|
+
* is indeterminate, and by the ring, which draws no buffer; left out for
|
|
11
|
+
* work with nothing to buffer.
|
|
11
12
|
*/
|
|
12
13
|
buffer?: number;
|
|
13
14
|
/** A function may compute the class from the indicator's render state. */
|
|
14
15
|
className?: ProgressBarProps['className'];
|
|
15
16
|
/**
|
|
16
|
-
* How wide the ring is drawn, as a CSS length
|
|
17
|
-
* with it, so `1em` gives a
|
|
18
|
-
*
|
|
17
|
+
* How wide the ring is drawn, as a CSS length: 40px unless given, or 48px
|
|
18
|
+
* for the wavy ring. Everything inside scales with it, so `1em` gives a
|
|
19
|
+
* ring the size of the type around it. Ignored by the line, which fills
|
|
20
|
+
* the width it is given.
|
|
19
21
|
*
|
|
20
22
|
* A length rather than a step of the size scale: a ring sized to the type
|
|
21
23
|
* around it is what the prop is for, and no fixed scale gives that.
|
|
22
|
-
* @default '40px'
|
|
24
|
+
* @default '40px'
|
|
23
25
|
*/
|
|
24
26
|
diameter?: string;
|
|
25
27
|
/**
|
|
@@ -56,7 +58,7 @@ type ProgressIndicatorProps = {
|
|
|
56
58
|
tone?: ProgressIndicatorTone;
|
|
57
59
|
/**
|
|
58
60
|
* The line the page draws, or the ring: `linear` fills the width it is
|
|
59
|
-
* given, `circular` is 40dp across.
|
|
61
|
+
* given, `circular` is 40dp across, or 48dp for the wavy ring.
|
|
60
62
|
* @default 'linear'
|
|
61
63
|
*/
|
|
62
64
|
variant?: ProgressIndicatorVariant;
|
|
@@ -71,6 +73,10 @@ type ProgressIndicatorVariant = 'circular' | 'linear';
|
|
|
71
73
|
* says how the value reads, in the locale the page is in, and `buffer` marks
|
|
72
74
|
* how far the work is loaded ahead of it.
|
|
73
75
|
*
|
|
76
|
+
* ```tsx
|
|
77
|
+
* <ProgressIndicator label="Label" showValue value={40} />
|
|
78
|
+
* ```
|
|
79
|
+
*
|
|
74
80
|
* The call site's `className` and `style` land on the indicator as a whole,
|
|
75
81
|
* which is the element a layout positions.
|
|
76
82
|
*/
|
|
@@ -10,7 +10,6 @@ import { ProgressBar } from "react-aria-components";
|
|
|
10
10
|
const CIRCULAR_SIZE = 40;
|
|
11
11
|
const CIRCULAR_SIZE_PX = `${CIRCULAR_SIZE}px`;
|
|
12
12
|
const THICKNESS = 4;
|
|
13
|
-
const GAP = 4;
|
|
14
13
|
const RADIUS = 18;
|
|
15
14
|
const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
|
|
16
15
|
const WAVE_AMPLITUDE = 3;
|
|
@@ -174,7 +173,7 @@ const styles = {
|
|
|
174
173
|
$$css: true
|
|
175
174
|
},
|
|
176
175
|
trackBufferedAt: (share) => [_temp2, { "--x-inlineSize": ((val) => typeof val === "number" ? val + "px" : val != null ? val : void 0)(`${share}%`) }],
|
|
177
|
-
waveAt: (percentage) => [_temp3, { "--x-strokeDasharray": `max(0px, (100cqi -
|
|
176
|
+
waveAt: (percentage) => [_temp3, { "--x-strokeDasharray": `max(0px, (100cqi - 8px) * ${percentage / 100} - ${THICKNESS}px) ${WAVE_REACH * 2}px` != null ? `max(0px, (100cqi - 8px) * ${percentage / 100} - ${THICKNESS}px) ${WAVE_REACH * 2}px` : void 0 }],
|
|
178
177
|
waveFlat: {
|
|
179
178
|
kSiTet: "xg01cxk",
|
|
180
179
|
$$css: true
|
|
@@ -190,15 +189,18 @@ const styles = {
|
|
|
190
189
|
};
|
|
191
190
|
function arcsFor(percentage, circumference) {
|
|
192
191
|
const active = (percentage ?? 0) / 100 * circumference;
|
|
193
|
-
const
|
|
192
|
+
const room = Math.min(active, 8);
|
|
193
|
+
const track = Math.max(0, circumference - active - 2 * room);
|
|
194
194
|
return {
|
|
195
195
|
active: {
|
|
196
196
|
strokeDasharray: `${active} ${circumference}`,
|
|
197
|
-
strokeDashoffset: 0
|
|
197
|
+
strokeDashoffset: 0,
|
|
198
|
+
strokeLinecap: capFor(active)
|
|
198
199
|
},
|
|
199
200
|
track: {
|
|
200
201
|
strokeDasharray: `${track} ${circumference}`,
|
|
201
|
-
strokeDashoffset: -(active +
|
|
202
|
+
strokeDashoffset: -(active + room),
|
|
203
|
+
strokeLinecap: capFor(track)
|
|
202
204
|
}
|
|
203
205
|
};
|
|
204
206
|
}
|
|
@@ -211,8 +213,11 @@ function bufferShare(buffer, percentage, minValue, maxValue) {
|
|
|
211
213
|
if (remaining <= 0) return 0;
|
|
212
214
|
return Math.min(100, Math.max(0, (buffered - value) / remaining * 100));
|
|
213
215
|
}
|
|
216
|
+
function capFor(length) {
|
|
217
|
+
return length > 0 ? "round" : "butt";
|
|
218
|
+
}
|
|
214
219
|
function CircularTrack(t0) {
|
|
215
|
-
const $ = c(
|
|
220
|
+
const $ = c(43);
|
|
216
221
|
const { diameter, isIndeterminate, percentage, shape, tone } = t0;
|
|
217
222
|
const inherit = tone === "inherit";
|
|
218
223
|
const wavy = shape === "wavy";
|
|
@@ -253,7 +258,7 @@ function CircularTrack(t0) {
|
|
|
253
258
|
r: radius,
|
|
254
259
|
strokeDasharray: arcs.track.strokeDasharray,
|
|
255
260
|
strokeDashoffset: arcs.track.strokeDashoffset,
|
|
256
|
-
strokeLinecap:
|
|
261
|
+
strokeLinecap: arcs.track.strokeLinecap,
|
|
257
262
|
strokeWidth: THICKNESS,
|
|
258
263
|
...props(styles.arcMotion, styles.arcTrack, inherit && indicatorStyles.inheritTrack)
|
|
259
264
|
});
|
|
@@ -269,18 +274,19 @@ function CircularTrack(t0) {
|
|
|
269
274
|
const t8 = isIndeterminate ? 100 : void 0;
|
|
270
275
|
const t9 = isIndeterminate ? void 0 : arcs.active.strokeDasharray;
|
|
271
276
|
const t10 = isIndeterminate ? void 0 : arcs.active.strokeDashoffset;
|
|
272
|
-
|
|
277
|
+
const t11 = isIndeterminate ? "round" : arcs.active.strokeLinecap;
|
|
278
|
+
let t12;
|
|
273
279
|
if ($[16] !== inherit || $[17] !== isIndeterminate || $[18] !== waving || $[19] !== wavy) {
|
|
274
|
-
|
|
280
|
+
t12 = props(isIndeterminate ? styles.arcIndeterminate : styles.arcMotion, isIndeterminate ? null : styles.arcActive, inherit && indicatorStyles.inheritActive, wavy && !isIndeterminate && styles.arcFade, waving && styles.flatUnderWave);
|
|
275
281
|
$[16] = inherit;
|
|
276
282
|
$[17] = isIndeterminate;
|
|
277
283
|
$[18] = waving;
|
|
278
284
|
$[19] = wavy;
|
|
279
|
-
$[20] =
|
|
280
|
-
} else
|
|
281
|
-
let
|
|
282
|
-
if ($[21] !== radius || $[22] !== t10 || $[23] !== t11 || $[24] !==
|
|
283
|
-
|
|
285
|
+
$[20] = t12;
|
|
286
|
+
} else t12 = $[20];
|
|
287
|
+
let t13;
|
|
288
|
+
if ($[21] !== radius || $[22] !== t10 || $[23] !== t11 || $[24] !== t12 || $[25] !== t6 || $[26] !== t7 || $[27] !== t8 || $[28] !== t9) {
|
|
289
|
+
t13 = /* @__PURE__ */ jsx("circle", {
|
|
284
290
|
cx: t6,
|
|
285
291
|
cy: t7,
|
|
286
292
|
fill: "none",
|
|
@@ -288,58 +294,59 @@ function CircularTrack(t0) {
|
|
|
288
294
|
r: radius,
|
|
289
295
|
strokeDasharray: t9,
|
|
290
296
|
strokeDashoffset: t10,
|
|
291
|
-
strokeLinecap:
|
|
297
|
+
strokeLinecap: t11,
|
|
292
298
|
strokeWidth: THICKNESS,
|
|
293
|
-
...
|
|
299
|
+
...t12
|
|
294
300
|
});
|
|
295
301
|
$[21] = radius;
|
|
296
302
|
$[22] = t10;
|
|
297
303
|
$[23] = t11;
|
|
298
|
-
$[24] =
|
|
299
|
-
$[25] =
|
|
300
|
-
$[26] =
|
|
301
|
-
$[27] =
|
|
302
|
-
$[28] =
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
304
|
+
$[24] = t12;
|
|
305
|
+
$[25] = t6;
|
|
306
|
+
$[26] = t7;
|
|
307
|
+
$[27] = t8;
|
|
308
|
+
$[28] = t9;
|
|
309
|
+
$[29] = t13;
|
|
310
|
+
} else t13 = $[29];
|
|
311
|
+
let t14;
|
|
312
|
+
if ($[30] !== arcs || $[31] !== circumference || $[32] !== inherit || $[33] !== isIndeterminate || $[34] !== waving || $[35] !== wavy) {
|
|
313
|
+
t14 = wavy ? /* @__PURE__ */ jsx("path", {
|
|
307
314
|
d: RING_WAVE,
|
|
308
315
|
fill: "none",
|
|
309
316
|
pathLength: isIndeterminate ? 100 : circumference,
|
|
310
317
|
strokeDasharray: isIndeterminate ? void 0 : arcs.active.strokeDasharray,
|
|
311
|
-
strokeLinecap: "round",
|
|
318
|
+
strokeLinecap: isIndeterminate ? "round" : arcs.active.strokeLinecap,
|
|
312
319
|
strokeWidth: THICKNESS,
|
|
313
320
|
...props(isIndeterminate ? styles.arcIndeterminate : styles.arcMotion, isIndeterminate ? null : [styles.arcActive, styles.arcFade], inherit && indicatorStyles.inheritActive, styles.ringWave, !waving && styles.waveFlat)
|
|
314
321
|
}) : null;
|
|
315
|
-
$[
|
|
316
|
-
$[
|
|
317
|
-
$[
|
|
318
|
-
$[
|
|
319
|
-
$[
|
|
320
|
-
$[
|
|
321
|
-
$[
|
|
322
|
-
} else
|
|
323
|
-
let
|
|
324
|
-
if ($[
|
|
325
|
-
|
|
322
|
+
$[30] = arcs;
|
|
323
|
+
$[31] = circumference;
|
|
324
|
+
$[32] = inherit;
|
|
325
|
+
$[33] = isIndeterminate;
|
|
326
|
+
$[34] = waving;
|
|
327
|
+
$[35] = wavy;
|
|
328
|
+
$[36] = t14;
|
|
329
|
+
} else t14 = $[36];
|
|
330
|
+
let t15;
|
|
331
|
+
if ($[37] !== t13 || $[38] !== t14 || $[39] !== t3 || $[40] !== t4 || $[41] !== t5) {
|
|
332
|
+
t15 = /* @__PURE__ */ jsxs("svg", {
|
|
326
333
|
"aria-hidden": "true",
|
|
327
334
|
viewBox: t3,
|
|
328
335
|
...t4,
|
|
329
336
|
children: [
|
|
330
337
|
t5,
|
|
331
|
-
|
|
332
|
-
|
|
338
|
+
t13,
|
|
339
|
+
t14
|
|
333
340
|
]
|
|
334
341
|
});
|
|
335
|
-
$[36] = t12;
|
|
336
342
|
$[37] = t13;
|
|
337
|
-
$[38] =
|
|
338
|
-
$[39] =
|
|
339
|
-
$[40] =
|
|
340
|
-
$[41] =
|
|
341
|
-
|
|
342
|
-
|
|
343
|
+
$[38] = t14;
|
|
344
|
+
$[39] = t3;
|
|
345
|
+
$[40] = t4;
|
|
346
|
+
$[41] = t5;
|
|
347
|
+
$[42] = t15;
|
|
348
|
+
} else t15 = $[42];
|
|
349
|
+
return t15;
|
|
343
350
|
}
|
|
344
351
|
function indicatorContent(label, showValue, variant, buffer, minValue, maxValue, diameter, shape, tone) {
|
|
345
352
|
return (state) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(IndicatorLabels, {
|
|
@@ -613,6 +620,10 @@ function linearWave(wavelength) {
|
|
|
613
620
|
* says how the value reads, in the locale the page is in, and `buffer` marks
|
|
614
621
|
* how far the work is loaded ahead of it.
|
|
615
622
|
*
|
|
623
|
+
* ```tsx
|
|
624
|
+
* <ProgressIndicator label="Label" showValue value={40} />
|
|
625
|
+
* ```
|
|
626
|
+
*
|
|
616
627
|
* The call site's `className` and `style` land on the indicator as a whole,
|
|
617
628
|
* which is the element a layout positions.
|
|
618
629
|
*/
|