@stackone/malachite 2.42.2 → 2.44.0
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/COMPONENTS.md +3 -3
- package/README.md +7 -0
- package/dist/components/ActionMenu.js +70 -70
- package/dist/components/ActionMenu.js.map +1 -1
- package/dist/components/CardStrip.js +179 -172
- package/dist/components/CardStrip.js.map +1 -1
- package/dist/components/Chat/ChatModelPicker.js +74 -73
- package/dist/components/Chat/ChatModelPicker.js.map +1 -1
- package/dist/components/Dropdown.js +432 -419
- package/dist/components/Dropdown.js.map +1 -1
- package/dist/components/MultiSelect.js +218 -213
- package/dist/components/MultiSelect.js.map +1 -1
- package/dist/components/Popover.js +102 -102
- package/dist/components/Popover.js.map +1 -1
- package/dist/components/QueryInput.js +65 -65
- package/dist/components/QueryInput.js.map +1 -1
- package/dist/components/SegmentedControl.js +40 -38
- package/dist/components/SegmentedControl.js.map +1 -1
- package/dist/components/SelectableCard.js +194 -168
- package/dist/components/SelectableCard.js.map +1 -1
- package/dist/components/focusRing.js +7 -6
- package/dist/components/focusRing.js.map +1 -1
- package/dist/components/overlayBehaviour.js +145 -94
- package/dist/components/overlayBehaviour.js.map +1 -1
- package/dist/components/overlayLayers.js +34 -0
- package/dist/components/overlayLayers.js.map +1 -0
- package/dist/components/portalOverlay.js.map +1 -1
- package/dist/index.d.ts +13 -0
- package/dist/tailwind.css.js +1 -1
- package/package.json +4 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectableCard.js","sources":["../../src/components/SelectableCard.tsx"],"sourcesContent":["import React, { useId, useRef } from 'react';\nimport Button from './Button';\nimport DismissIcon from './CustomIcons/DismissIcon';\nimport PinIcon from './CustomIcons/PinIcon';\nimport Tag, { type TagType } from './Tag';\nimport Tooltip from './Tooltip';\nimport TruncatedTooltip from './TruncatedTooltip';\nimport Text from './Typography/Text';\nimport { useCardStripSlot } from './cardStripSlot';\nimport { FOCUS_RING_WITHIN } from './focusRing';\nimport { useAdoptedStyleSheet } from './useAdoptedStyleSheet';\n\nexport interface SelectableCardStatus {\n label: string;\n /** Maps to Tag's palette — `default` (grey) for \"Disabled\", `warning` (amber) for \"Draft\". */\n type?: TagType;\n}\n\n/** The card's palette: `profile` is green, `library` neutral, `editing` amber for a\n * profile with unsaved changes. */\nexport type SelectableCardVariant = 'profile' | 'library' | 'editing';\n\nexport interface SelectableCardProps {\n /** Identifies the card inside its group; handed back to `onSelect`. */\n value: string;\n title: string;\n /** Leading glyph on the title line, e.g. a library/book icon. */\n titleIcon?: React.ReactNode;\n /** Pins the card as the account default, marked beside the title. */\n isDefault?: boolean;\n /** Palette only — gradient, borders, indicator and eyebrow; position is settled by the strip. */\n variant?: SelectableCardVariant;\n /** Small label above the title (\"Profile\", \"Explore\"). */\n eyebrow?: string;\n /** Status pill rendered next to the eyebrow — or in its place when there is no eyebrow. */\n status?: SelectableCardStatus;\n /** Supporting copy under the title, clamped to two lines. */\n description?: string;\n /** Bottom-left summary (\"16 Actions\", \"10 Selected\"). */\n countLabel?: string;\n /** Top-right cluster (markers, an ActionMenu…). The eyebrow row gives way to one\n * xsmall control; a wider cluster needs a shorter eyebrow and status to clear it. */\n actions?: React.ReactNode;\n /** Renders an x after `actions`, tinted like the eyebrow, that calls this. */\n onDismiss?: () => void;\n /** Names the x for assistive tech and its tooltip. */\n dismissLabel?: string;\n /** Disables the x and shows this as its tooltip instead. */\n dismissDisabledReason?: string;\n selected?: boolean;\n /** Replaces the card's content with a centred in-progress message. */\n loading?: boolean;\n loadingLabel?: string;\n loadingHint?: string;\n /** Blocks selection. Draws no dimming of its own — a switched-off profile is signalled by its `status` tag. */\n disabled?: boolean;\n /** Mutes the title without blocking selection. */\n dimmed?: boolean;\n onSelect?: (value: string) => void;\n /** Tab stop for the card. */\n tabIndex?: number;\n /** Replaces the generated accessible name (eyebrow + title + status). */\n 'aria-label'?: string;\n className?: string;\n style?: React.CSSProperties;\n}\n\nexport const CARD_WIDTH_PX = 240;\nconst CARD_WIDTH = `${CARD_WIDTH_PX}px`;\nconst CARD_HEIGHT = '116px';\nconst CARD_CORNER = 'var(--malachite-radius-xxl, 14px)';\nconst CARD_RADIUS = `${CARD_CORNER} ${CARD_CORNER} 0 0`;\n\nconst MUTED = 'var(--malachite-selectable-card-muted-foreground, #7b7b7b)';\nconst EYEBROW = 'var(--malachite-text-secondary, #7b7b7b)';\n\nconst PROFILE_ACCENT = 'var(--malachite-selectable-card-accent, #047b43)';\nconst PROFILE_TINT = 'var(--malachite-selectable-card-selected-tint, #e7f8f1)';\nconst PROFILE_SELECTED_BORDER = 'var(--malachite-selectable-card-selected-border, #047b43)';\nconst PROFILE_EYEBROW_OPACITY = 0.7;\n\nconst LIBRARY_TINT = 'var(--malachite-selectable-card-library-selected-tint, #f1f1f1)';\nconst LIBRARY_SELECTED_BORDER = 'var(--malachite-selectable-card-library-selected-border, #bbbbbb)';\n\nconst EDITING_ACCENT = 'var(--malachite-selectable-card-pending-foreground, #96580a)';\nconst EDITING_TINT = 'var(--malachite-selectable-card-editing-tint, #f9f2e9)';\n\nconst SELECTED_SURFACE_END = 'var(--malachite-selectable-card-selected-surface-end, #ffffff)';\n\nconst RESTING_SURFACE = 'var(--malachite-selectable-card-background, #f1f1f1)';\nconst RESTING_BORDER = '1px solid var(--malachite-selectable-card-border, #dddddd)';\n\nconst HOVER_SURFACE_FILL = 'var(--malachite-selectable-card-hover-background, #e8e8e8)';\n\n/** How far a selected card's outline sweeps past its own edge. The strip keeps this much\n * clear of its scroller's clip. */\nexport const CARD_FLARE_PX = 14;\nconst FLARE_PX = CARD_FLARE_PX;\nconst STROKE_PX = 2;\nconst CARD_HEIGHT_PX = 116;\nconst CORNER_PX = 14;\n\n/** Weight of the strip's bottom rule, which a selected card's flare reaches down through. */\nexport const STRIP_RULE_PX = 2;\n\n/** Where the strip's rule meets the flare. The stroke is centred on its path, so the tip\n * stops half a stroke inside the flare box. */\nexport const CARD_FLARE_TIP_PX = FLARE_PX - STROKE_PX / 2;\n\nconst FLARE_BOX_WIDTH = CARD_WIDTH_PX + FLARE_PX * 2;\nconst FLARE_BOX_HEIGHT = CARD_HEIGHT_PX + STRIP_RULE_PX + STROKE_PX;\n\n/** Stroke is centred on the path, so the card's own edges sit half a stroke inside the box. */\nconst pathTo = (base: number): string => {\n const inset = STROKE_PX / 2;\n const left = FLARE_PX + inset;\n const right = FLARE_PX + CARD_WIDTH_PX - inset;\n const top = inset;\n const r = CORNER_PX - inset;\n return [\n `M${left - FLARE_PX} ${base}`,\n `A${FLARE_PX} ${FLARE_PX} 0 0 0 ${left} ${base - FLARE_PX}`,\n `L${left} ${top + r}`,\n `A${r} ${r} 0 0 1 ${left + r} ${top}`,\n `L${right - r} ${top}`,\n `A${r} ${r} 0 0 1 ${right} ${top + r}`,\n `L${right} ${base - FLARE_PX}`,\n `A${FLARE_PX} ${FLARE_PX} 0 0 0 ${right + FLARE_PX} ${base}`,\n ].join(' ');\n};\n\nconst OUTLINE_PATH = pathTo(CARD_HEIGHT_PX + STRIP_RULE_PX / 2);\n\nconst FILL_PATH = `${OUTLINE_PATH} Z`;\n\nexport const FLARE_CLASS = 'malachite-selectable-card-outline';\n\nconst ROOT_CLASS = 'malachite-selectable-card';\nconst STYLE_ID = 'malachite-selectable-card-style';\n\nconst OUTLINE_PROPERTY = '--malachite-selectable-card-state-outline';\nconst TINT_PROPERTY = '--malachite-selectable-card-state-tint';\n\ntype CardState = 'resting' | 'hover' | 'selected';\ntype SettledState = Exclude<CardState, 'hover'>;\n\ntype Declarations = Record<string, string>;\n\nconst HOVER_SURFACE: Declarations = {\n 'background-color': HOVER_SURFACE_FILL,\n 'border-left-color': 'transparent',\n};\n\nconst RESTING_SURFACE_DECLARATIONS: Declarations = {\n 'background-color': RESTING_SURFACE,\n};\n\n/** Never inline styles: an inline declaration outranks the sheet, so `:hover` could never repaint the card. */\nconst SURFACES: Record<SelectableCardVariant, Record<CardState, Declarations>> = {\n profile: {\n resting: RESTING_SURFACE_DECLARATIONS,\n hover: HOVER_SURFACE,\n selected: {\n [OUTLINE_PROPERTY]: PROFILE_SELECTED_BORDER,\n [TINT_PROPERTY]: PROFILE_TINT,\n },\n },\n library: {\n resting: RESTING_SURFACE_DECLARATIONS,\n hover: HOVER_SURFACE,\n selected: {\n [OUTLINE_PROPERTY]: LIBRARY_SELECTED_BORDER,\n [TINT_PROPERTY]: LIBRARY_TINT,\n },\n },\n editing: {\n resting: RESTING_SURFACE_DECLARATIONS,\n hover: HOVER_SURFACE,\n selected: {\n [OUTLINE_PROPERTY]: EDITING_ACCENT,\n [TINT_PROPERTY]: EDITING_TINT,\n },\n },\n};\n\nconst RESTING_EYEBROW: React.CSSProperties = { color: EYEBROW };\n\nconst EYEBROWS: Record<SelectableCardVariant, Record<SettledState, React.CSSProperties>> = {\n profile: {\n resting: RESTING_EYEBROW,\n selected: { color: PROFILE_ACCENT, opacity: PROFILE_EYEBROW_OPACITY },\n },\n library: { resting: RESTING_EYEBROW, selected: RESTING_EYEBROW },\n editing: {\n resting: RESTING_EYEBROW,\n selected: { color: EDITING_ACCENT, opacity: PROFILE_EYEBROW_OPACITY },\n },\n};\n\nconst SCROLLED_SURFACE: Declarations = { 'border-left': RESTING_BORDER };\n\nconst OUTLINE_CSS = `\n.${ROOT_CLASS}[data-state='selected'] {\n z-index: 5;\n}\n.${ROOT_CLASS} > .${FLARE_CLASS} {\n position: absolute;\n left: -${FLARE_PX}px;\n top: 0;\n z-index: 0;\n overflow: visible;\n pointer-events: none;\n}\n.${ROOT_CLASS} > *:not(.${FLARE_CLASS}):not([data-selectable-card-actions]) {\n position: relative;\n z-index: 1;\n}\n.${ROOT_CLASS} > [data-selectable-card-actions] {\n z-index: 2;\n}`;\n\nconst bodyOf = (declarations: Declarations): string =>\n Object.entries(declarations)\n .map(([property, value]) => ` ${property}: ${value};`)\n .join('\\n');\n\nconst selectorFor = (variant: SelectableCardVariant, state: CardState): string =>\n state === 'hover'\n ? `.${ROOT_CLASS}[data-variant='${variant}'][data-state='resting'][data-hoverable]:hover`\n : `.${ROOT_CLASS}[data-variant='${variant}'][data-state='${state}']`;\n\nconst ruleFor = (\n variant: SelectableCardVariant,\n state: CardState,\n declarations: Declarations,\n): string => `${selectorFor(variant, state)} {\\n${bodyOf(declarations)}\\n}`;\n\nconst SURFACE_CSS = (Object.keys(SURFACES) as SelectableCardVariant[])\n .flatMap((variant) =>\n (Object.keys(SURFACES[variant]) as CardState[]).map((state) =>\n ruleFor(variant, state, SURFACES[variant][state]),\n ),\n )\n .join('\\n');\n\nconst SLOT_CSS = `.${ROOT_CLASS}[data-pinned='false'][data-state='resting'] {\\n${bodyOf(\n SCROLLED_SURFACE,\n)}\\n}`;\n\nconst CARD_CSS = `${SLOT_CSS}\\n${SURFACE_CSS}\\n${OUTLINE_CSS}`;\n\nconst DESCRIPTION_STYLE: React.CSSProperties = {\n display: '-webkit-box',\n WebkitLineClamp: 2,\n WebkitBoxOrient: 'vertical',\n overflow: 'hidden',\n color: MUTED,\n lineHeight: 1.6,\n};\n\nconst COUNT_STYLE: React.CSSProperties = { color: MUTED, letterSpacing: '0.11px' };\n\nconst PENDING = 'var(--malachite-selectable-card-pending-foreground, #96580a)';\n\nconst LOADING_LABEL_STYLE: React.CSSProperties = { color: PENDING };\nconst LOADING_HINT_STYLE: React.CSSProperties = { color: PENDING, opacity: 0.7 };\n\nconst PENDING_BODY_TOP_PX = 36;\nconst PENDING_BODY_BOTTOM_PX = 38;\n\n// The 16px library icon's glyph inset, so it lines up with the text below.\nconst TITLE_ICON_INSET_PX = 2.25;\nconst TITLE_ICON_STYLE: React.CSSProperties = {\n color: 'var(--malachite-text-primary)',\n marginLeft: -TITLE_ICON_INSET_PX,\n};\n\n// Offsets the outline button's 1px drop shadow so it centres on the eyebrow.\nconst ACTIONS_STYLE: React.CSSProperties = { transform: 'translateY(-1px)' };\n\nconst DISMISS_ICON_BOX = 'inline-flex items-center justify-center [&_svg]:size-[10px]!';\nconst DISABLED_DISMISS_STYLE: React.CSSProperties = { color: MUTED };\n\nconst DEFAULT_MARKER_LABEL = 'Default profile';\nconst DEFAULT_MARKER_SIZE_PX = 16;\n// The tilted pin's glyph inset.\nconst DEFAULT_MARKER_INSET_PX = 3;\nconst DEFAULT_MARKER_STYLE: React.CSSProperties = {\n color: PROFILE_ACCENT,\n display: 'inline-flex',\n transform: 'rotate(45deg)',\n};\nconst LEADING_DEFAULT_MARKER_STYLE: React.CSSProperties = {\n ...DEFAULT_MARKER_STYLE,\n marginLeft: -DEFAULT_MARKER_INSET_PX,\n};\n\n/** Announced rather than shown alone: a bare glyph reads as an unnamed graphic, and the tooltip\n * travels by `aria-describedby`, which describes rather than names. */\nconst DefaultMarker: React.FC<{ leading: boolean }> = ({ leading }) => (\n <Tooltip text={DEFAULT_MARKER_LABEL} triggerAs=\"span\" describesTrigger={false}>\n <span\n role=\"img\"\n aria-label={DEFAULT_MARKER_LABEL}\n style={leading ? LEADING_DEFAULT_MARKER_STYLE : DEFAULT_MARKER_STYLE}\n >\n <PinIcon size={DEFAULT_MARKER_SIZE_PX} />\n </span>\n </Tooltip>\n);\n\nconst joinIds = (ids: Array<string | undefined>): string | undefined => {\n const present = ids.filter((id): id is string => id !== undefined);\n return present.length > 0 ? present.join(' ') : undefined;\n};\n\n/** A fixed-size card that behaves as one option in a radio group: a card-shaped `Surface.Row`. */\nconst SelectableCard: React.FC<SelectableCardProps> = ({\n value,\n title,\n titleIcon,\n isDefault = false,\n variant = 'profile',\n eyebrow,\n status,\n description,\n countLabel,\n actions,\n onDismiss,\n dismissLabel = 'Dismiss',\n dismissDisabledReason,\n selected = false,\n loading = false,\n loadingLabel = 'Loading…',\n loadingHint,\n disabled = false,\n dimmed = false,\n onSelect,\n tabIndex,\n 'aria-label': ariaLabel,\n className = '',\n style,\n}) => {\n const { pinned } = useCardStripSlot();\n const hoverable = !selected && !disabled;\n\n const rootRef = useRef<HTMLDivElement>(null);\n useAdoptedStyleSheet(rootRef, CARD_CSS, STYLE_ID);\n\n const instanceId = `mal-selectable-card-${useId().replace(/[^a-zA-Z0-9_-]/g, '')}`;\n const outlineGradientId = `${instanceId}-outline`;\n const eyebrowId = `${instanceId}-eyebrow`;\n const statusId = `${instanceId}-status`;\n const titleId = `${instanceId}-title`;\n const descriptionId = `${instanceId}-description`;\n const countId = `${instanceId}-count`;\n\n const labelledBy = ariaLabel\n ? undefined\n : joinIds([eyebrow ? eyebrowId : undefined, titleId, status ? statusId : undefined]);\n const describedBy = joinIds([\n description ? descriptionId : undefined,\n countLabel ? countId : undefined,\n ]);\n\n if (loading) {\n return (\n <div\n ref={rootRef}\n role=\"status\"\n aria-busy=\"true\"\n aria-live=\"polite\"\n data-variant=\"editing\"\n data-state=\"selected\"\n className={`${ROOT_CLASS} relative flex shrink-0 flex-col items-center gap-2 px-5 text-center ${className}`.trim()}\n style={\n {\n width: CARD_WIDTH,\n height: CARD_HEIGHT,\n borderRadius: CARD_RADIUS,\n boxSizing: 'border-box',\n paddingTop: `${PENDING_BODY_TOP_PX}px`,\n paddingBottom: `${PENDING_BODY_BOTTOM_PX}px`,\n justifyContent: 'center',\n [OUTLINE_PROPERTY]: PENDING,\n [TINT_PROPERTY]: EDITING_TINT,\n ...style,\n } as React.CSSProperties\n }\n >\n {/* The same outline a selected card wears: this IS the selection while a profile\n is being built, so it has to break the strip's rule rather than sit on it. */}\n <svg\n className={FLARE_CLASS}\n width={FLARE_BOX_WIDTH}\n height={FLARE_BOX_HEIGHT}\n viewBox={`0 0 ${FLARE_BOX_WIDTH} ${FLARE_BOX_HEIGHT}`}\n fill=\"none\"\n aria-hidden=\"true\"\n >\n <defs>\n <linearGradient id={outlineGradientId} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop offset=\"0\" style={{ stopColor: `var(${TINT_PROPERTY})` }} />\n <stop offset=\"1\" style={{ stopColor: SELECTED_SURFACE_END }} />\n </linearGradient>\n </defs>\n <path\n d={FILL_PATH}\n data-malachite-shape=\"\"\n style={{ fill: `url(#${outlineGradientId})` }}\n />\n <path\n d={OUTLINE_PATH}\n data-malachite-shape=\"\"\n strokeWidth={STROKE_PX}\n style={{ fill: 'none', stroke: `var(${OUTLINE_PROPERTY})` }}\n />\n </svg>\n <Text size=\"small\" fontWeight=\"semi-bold\" style={LOADING_LABEL_STYLE}>\n {loadingLabel}\n </Text>\n {loadingHint ? (\n <Text size=\"xsmall\" fontWeight=\"semi-bold\" style={LOADING_HINT_STYLE}>\n {loadingHint}\n </Text>\n ) : null}\n </div>\n );\n }\n\n const titleInTopRow = variant === 'library';\n\n const eyebrowStyle = EYEBROWS[variant][selected ? 'selected' : 'resting'];\n const hasCornerCluster = Boolean(actions) || Boolean(onDismiss);\n const isDismissDisabled = dismissDisabledReason !== undefined;\n const eyebrowRowEnd =\n actions && onDismiss ? 'pr-[48px]' : hasCornerCluster ? 'pr-[18px]' : 'pr-1';\n\n return (\n <div\n ref={rootRef}\n data-variant={variant}\n data-pinned={pinned ? 'true' : 'false'}\n data-state={selected ? 'selected' : 'resting'}\n data-hoverable={hoverable ? '' : undefined}\n className={`${ROOT_CLASS} group relative grid shrink-0 grid-rows-[1fr_auto] ${FOCUS_RING_WITHIN} ${className}`.trim()}\n style={{\n width: CARD_WIDTH,\n height: CARD_HEIGHT,\n borderRadius: CARD_RADIUS,\n boxSizing: 'border-box',\n ...style,\n }}\n >\n {selected ? (\n <svg\n className={FLARE_CLASS}\n width={FLARE_BOX_WIDTH}\n height={FLARE_BOX_HEIGHT}\n viewBox={`0 0 ${FLARE_BOX_WIDTH} ${FLARE_BOX_HEIGHT}`}\n fill=\"none\"\n aria-hidden=\"true\"\n >\n <defs>\n <linearGradient id={outlineGradientId} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop offset=\"0\" style={{ stopColor: `var(${TINT_PROPERTY})` }} />\n <stop offset=\"1\" style={{ stopColor: SELECTED_SURFACE_END }} />\n </linearGradient>\n </defs>\n <path\n d={FILL_PATH}\n data-malachite-shape=\"\"\n style={{ fill: `url(#${outlineGradientId})` }}\n />\n <path\n d={OUTLINE_PATH}\n data-malachite-shape=\"\"\n strokeWidth={STROKE_PX}\n style={{ fill: 'none', stroke: `var(${OUTLINE_PROPERTY})` }}\n />\n </svg>\n ) : null}\n <button\n type=\"button\"\n role=\"radio\"\n data-value={value}\n aria-checked={selected}\n aria-label={ariaLabel}\n aria-labelledby={labelledBy}\n aria-describedby={describedBy}\n aria-disabled={disabled || undefined}\n tabIndex={tabIndex ?? (selected ? 0 : -1)}\n onClick={() => {\n if (disabled || selected) {\n return;\n }\n onSelect?.(value);\n }}\n className={`flex min-w-0 appearance-none flex-col border-0 bg-transparent py-0 pt-3 pr-4 pl-4 text-left outline-none ${\n disabled ? 'cursor-not-allowed' : 'cursor-pointer'\n }`}\n style={{ borderRadius: CARD_RADIUS }}\n >\n {/* Clears the corner buttons: 18px for one, 48px for `actions` and the x. */}\n <div className={`flex h-[13px] shrink-0 items-center gap-2 ${eyebrowRowEnd}`}>\n <div className=\"flex min-w-0 items-center gap-1.5\">\n {titleInTopRow ? (\n <span id={titleId} className=\"flex min-w-0 items-center gap-1.5\">\n {titleIcon ? (\n <span\n className=\"flex shrink-0 items-center\"\n style={TITLE_ICON_STYLE}\n >\n {titleIcon}\n </span>\n ) : null}\n {isDefault ? (\n <span className=\"flex shrink-0 items-center\">\n <DefaultMarker leading={!titleIcon} />\n </span>\n ) : null}\n <TruncatedTooltip text={title}>\n <Text\n size=\"small\"\n fontWeight=\"semi-bold\"\n style={dimmed ? { color: MUTED } : undefined}\n >\n {title}\n </Text>\n </TruncatedTooltip>\n </span>\n ) : null}\n {eyebrow ? (\n <span id={eyebrowId} className=\"flex min-w-0\">\n <Text size=\"xsmall\" fontWeight=\"semi-bold\" style={eyebrowStyle}>\n {eyebrow}\n </Text>\n </span>\n ) : null}\n {status ? (\n <span id={statusId} className=\"flex min-w-0\">\n <Tag\n value={status.label}\n type={status.type ?? 'default'}\n textTransform=\"none\"\n paddingSize=\"compact\"\n />\n </span>\n ) : null}\n </div>\n </div>\n\n <div\n className={`mt-[11px] flex min-w-0 flex-1 flex-col gap-1 pt-3 ${\n titleInTopRow ? 'justify-end' : 'justify-between'\n }`}\n >\n {titleInTopRow ? null : (\n <div id={titleId} className=\"flex min-w-0 items-center gap-1.5\">\n {titleIcon ? (\n <span\n className=\"flex shrink-0 items-center\"\n style={TITLE_ICON_STYLE}\n >\n {titleIcon}\n </span>\n ) : null}\n {isDefault ? (\n <span className=\"flex shrink-0 items-center\">\n <DefaultMarker leading={!titleIcon} />\n </span>\n ) : null}\n <TruncatedTooltip text={title}>\n <Text\n size=\"small\"\n fontWeight=\"semi-bold\"\n style={dimmed ? { color: MUTED } : undefined}\n >\n {title}\n </Text>\n </TruncatedTooltip>\n </div>\n )}\n {description ? (\n <span id={descriptionId} className=\"block min-w-0\">\n <Text size=\"xsmall\" style={DESCRIPTION_STYLE}>\n {description}\n </Text>\n </span>\n ) : null}\n </div>\n </button>\n\n <span id={countId} className=\"min-w-0 self-end truncate pr-4 pb-3 pl-4\">\n {countLabel ? (\n <Text size=\"xsmall\" fontWeight=\"semi-bold\" style={COUNT_STYLE}>\n {countLabel}\n </Text>\n ) : null}\n </span>\n\n {/* Lifted out of the flow rather than given a grid cell, so it can sit on the\n eyebrow row — which belongs to the control and cannot hold a second one. */}\n {hasCornerCluster ? (\n <div\n data-selectable-card-actions=\"\"\n className=\"absolute top-3 right-2 flex h-[13px] shrink-0 items-center gap-2.5\"\n >\n {actions ? (\n <span className=\"flex items-center gap-2.5\" style={ACTIONS_STYLE}>\n {actions}\n </span>\n ) : null}\n {onDismiss ? (\n <Button\n type=\"button\"\n variant=\"ghost\"\n size=\"xsmall\"\n iconOnly\n aria-label={dismissLabel}\n tooltip={dismissDisabledReason ?? dismissLabel}\n disabled={isDismissDisabled}\n className=\"shrink-0\"\n onClick={onDismiss}\n >\n <span\n className={DISMISS_ICON_BOX}\n style={isDismissDisabled ? DISABLED_DISMISS_STYLE : eyebrowStyle}\n >\n <DismissIcon />\n </span>\n </Button>\n ) : null}\n </div>\n ) : null}\n </div>\n );\n};\n\nexport default SelectableCard;\nexport { SelectableCard };\n"],"names":["CARD_WIDTH_PX","CARD_WIDTH","CARD_HEIGHT","CARD_CORNER","CARD_RADIUS","MUTED","EYEBROW","PROFILE_ACCENT","PROFILE_TINT","PROFILE_SELECTED_BORDER","PROFILE_EYEBROW_OPACITY","LIBRARY_TINT","LIBRARY_SELECTED_BORDER","EDITING_ACCENT","EDITING_TINT","SELECTED_SURFACE_END","RESTING_SURFACE","RESTING_BORDER","HOVER_SURFACE_FILL","CARD_FLARE_PX","FLARE_PX","STROKE_PX","CARD_HEIGHT_PX","CORNER_PX","STRIP_RULE_PX","CARD_FLARE_TIP_PX","FLARE_BOX_WIDTH","FLARE_BOX_HEIGHT","pathTo","base","inset","left","right","top","OUTLINE_PATH","FILL_PATH","FLARE_CLASS","ROOT_CLASS","STYLE_ID","OUTLINE_PROPERTY","TINT_PROPERTY","HOVER_SURFACE","RESTING_SURFACE_DECLARATIONS","SURFACES","RESTING_EYEBROW","EYEBROWS","SCROLLED_SURFACE","OUTLINE_CSS","bodyOf","declarations","property","value","selectorFor","variant","state","ruleFor","SURFACE_CSS","SLOT_CSS","CARD_CSS","DESCRIPTION_STYLE","COUNT_STYLE","PENDING","LOADING_LABEL_STYLE","LOADING_HINT_STYLE","PENDING_BODY_TOP_PX","PENDING_BODY_BOTTOM_PX","TITLE_ICON_STYLE","ACTIONS_STYLE","DISMISS_ICON_BOX","DISABLED_DISMISS_STYLE","DEFAULT_MARKER_LABEL","DEFAULT_MARKER_SIZE_PX","DEFAULT_MARKER_STYLE","LEADING_DEFAULT_MARKER_STYLE","DefaultMarker","leading","jsx","Tooltip","PinIcon","joinIds","ids","present","id","SelectableCard","title","titleIcon","isDefault","eyebrow","status","description","countLabel","actions","onDismiss","dismissLabel","dismissDisabledReason","selected","loading","loadingLabel","loadingHint","disabled","dimmed","onSelect","tabIndex","ariaLabel","className","style","pinned","useCardStripSlot","hoverable","rootRef","useRef","useAdoptedStyleSheet","instanceId","useId","outlineGradientId","eyebrowId","statusId","titleId","descriptionId","countId","labelledBy","describedBy","jsxs","Text","titleInTopRow","eyebrowStyle","hasCornerCluster","isDismissDisabled","eyebrowRowEnd","FOCUS_RING_WITHIN","TruncatedTooltip","Tag","Button","DismissIcon"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SelectableCard.js","sources":["../../src/components/SelectableCard.tsx"],"sourcesContent":["import React, { useId, useRef } from 'react';\nimport Button from './Button';\nimport DismissIcon from './CustomIcons/DismissIcon';\nimport ExternalLinkIcon from './CustomIcons/ExternalLinkIcon';\nimport PinIcon from './CustomIcons/PinIcon';\nimport Tag, { type TagType } from './Tag';\nimport Tooltip from './Tooltip';\nimport TruncatedTooltip from './TruncatedTooltip';\nimport Text from './Typography/Text';\nimport { useCardStripSlot } from './cardStripSlot';\nimport { FOCUS_RING, FOCUS_RING_WITHIN_RADIO } from './focusRing';\nimport { useAdoptedStyleSheet } from './useAdoptedStyleSheet';\n\nexport interface SelectableCardStatus {\n label: string;\n /** Maps to Tag's palette — `default` (grey) for \"Disabled\", `warning` (amber) for \"Draft\". */\n type?: TagType;\n}\n\nexport interface SelectableCardLink {\n label: string;\n href: string;\n}\n\n/** The card's palette: `profile` is green, `library` neutral, `editing` amber for a\n * profile with unsaved changes. */\nexport type SelectableCardVariant = 'profile' | 'library' | 'editing';\n\nexport interface SelectableCardProps {\n /** Identifies the card inside its group; handed back to `onSelect`. */\n value: string;\n title: string;\n /** Leading glyph on the title line, e.g. a library/book icon. */\n titleIcon?: React.ReactNode;\n /** Pins the card as the account default, marked beside the title. */\n isDefault?: boolean;\n /** Palette only — gradient, borders, indicator and eyebrow; position is settled by the strip. */\n variant?: SelectableCardVariant;\n /** Small label above the title (\"Profile\", \"Explore\"). */\n eyebrow?: string;\n /** Status pill rendered next to the eyebrow — or in its place when there is no eyebrow. */\n status?: SelectableCardStatus;\n /** Supporting copy under the title, clamped to two lines. */\n description?: string;\n /** Bottom-left summary (\"16 Actions\", \"10 Selected\"). */\n countLabel?: string;\n /** A link along the bottom edge, opened in a new tab. Rendered beside the radio rather than\n * inside it, so it stays its own tab stop. */\n link?: SelectableCardLink;\n /** Top-right cluster (markers, an ActionMenu…). The eyebrow row gives way to one\n * xsmall control; a wider cluster needs a shorter eyebrow and status to clear it. */\n actions?: React.ReactNode;\n /** Renders an x after `actions`, tinted like the eyebrow, that calls this. */\n onDismiss?: () => void;\n /** Names the x for assistive tech and its tooltip. */\n dismissLabel?: string;\n /** Disables the x and shows this as its tooltip instead. */\n dismissDisabledReason?: string;\n selected?: boolean;\n /** Replaces the card's content with a centred in-progress message. */\n loading?: boolean;\n loadingLabel?: string;\n loadingHint?: string;\n /** Blocks selection. Draws no dimming of its own — a switched-off profile is signalled by its `status` tag. */\n disabled?: boolean;\n /** Mutes the title without blocking selection. */\n dimmed?: boolean;\n onSelect?: (value: string) => void;\n /** Tab stop for the card. */\n tabIndex?: number;\n /** Replaces the generated accessible name (eyebrow + title + status). */\n 'aria-label'?: string;\n className?: string;\n style?: React.CSSProperties;\n}\n\nexport const CARD_WIDTH_PX = 240;\nconst CARD_WIDTH = `${CARD_WIDTH_PX}px`;\nconst CARD_HEIGHT = '116px';\nconst CARD_CORNER = 'var(--malachite-radius-xxl, 14px)';\nconst CARD_RADIUS = `${CARD_CORNER} ${CARD_CORNER} 0 0`;\n\nconst MUTED = 'var(--malachite-selectable-card-muted-foreground, #7b7b7b)';\nconst EYEBROW = 'var(--malachite-text-secondary, #7b7b7b)';\n\nconst PROFILE_ACCENT = 'var(--malachite-selectable-card-accent, #047b43)';\nconst PROFILE_TINT = 'var(--malachite-selectable-card-selected-tint, #e7f8f1)';\nconst PROFILE_SELECTED_BORDER = 'var(--malachite-selectable-card-selected-border, #047b43)';\nconst PROFILE_EYEBROW_OPACITY = 0.7;\n\nconst LIBRARY_TINT = 'var(--malachite-selectable-card-library-selected-tint, #f1f1f1)';\nconst LIBRARY_SELECTED_BORDER = 'var(--malachite-selectable-card-library-selected-border, #bbbbbb)';\n\nconst EDITING_ACCENT = 'var(--malachite-selectable-card-pending-foreground, #96580a)';\nconst EDITING_TINT = 'var(--malachite-selectable-card-editing-tint, #f9f2e9)';\n\nconst SELECTED_SURFACE_END = 'var(--malachite-selectable-card-selected-surface-end, #ffffff)';\n\nconst RESTING_SURFACE = 'var(--malachite-selectable-card-background, #f1f1f1)';\nconst RESTING_BORDER = '1px solid var(--malachite-selectable-card-border, #dddddd)';\n\nconst HOVER_SURFACE_FILL = 'var(--malachite-selectable-card-hover-background, #e8e8e8)';\n\n/** How far a selected card's outline sweeps past its own edge. The strip keeps this much\n * clear of its scroller's clip. */\nexport const CARD_FLARE_PX = 14;\nconst FLARE_PX = CARD_FLARE_PX;\nconst STROKE_PX = 2;\nconst CARD_HEIGHT_PX = 116;\nconst CORNER_PX = 14;\n\n/** Weight of the strip's bottom rule, which a selected card's flare reaches down through. */\nexport const STRIP_RULE_PX = 2;\n\n/** Where the strip's rule meets the flare. The stroke is centred on its path, so the tip\n * stops half a stroke inside the flare box. */\nexport const CARD_FLARE_TIP_PX = FLARE_PX - STROKE_PX / 2;\n\nconst FLARE_BOX_WIDTH = CARD_WIDTH_PX + FLARE_PX * 2;\nconst FLARE_BOX_HEIGHT = CARD_HEIGHT_PX + STRIP_RULE_PX + STROKE_PX;\n\n/** Stroke is centred on the path, so the card's own edges sit half a stroke inside the box. */\nconst pathTo = (base: number): string => {\n const inset = STROKE_PX / 2;\n const left = FLARE_PX + inset;\n const right = FLARE_PX + CARD_WIDTH_PX - inset;\n const top = inset;\n const r = CORNER_PX - inset;\n return [\n `M${left - FLARE_PX} ${base}`,\n `A${FLARE_PX} ${FLARE_PX} 0 0 0 ${left} ${base - FLARE_PX}`,\n `L${left} ${top + r}`,\n `A${r} ${r} 0 0 1 ${left + r} ${top}`,\n `L${right - r} ${top}`,\n `A${r} ${r} 0 0 1 ${right} ${top + r}`,\n `L${right} ${base - FLARE_PX}`,\n `A${FLARE_PX} ${FLARE_PX} 0 0 0 ${right + FLARE_PX} ${base}`,\n ].join(' ');\n};\n\nconst OUTLINE_PATH = pathTo(CARD_HEIGHT_PX + STRIP_RULE_PX / 2);\n\nconst FILL_PATH = `${OUTLINE_PATH} Z`;\n\nexport const FLARE_CLASS = 'malachite-selectable-card-outline';\n\nconst ROOT_CLASS = 'malachite-selectable-card';\nconst STYLE_ID = 'malachite-selectable-card-style';\n\nconst OUTLINE_PROPERTY = '--malachite-selectable-card-state-outline';\nconst TINT_PROPERTY = '--malachite-selectable-card-state-tint';\n\ntype CardState = 'resting' | 'hover' | 'selected';\ntype SettledState = Exclude<CardState, 'hover'>;\n\ntype Declarations = Record<string, string>;\n\nconst HOVER_SURFACE: Declarations = {\n 'background-color': HOVER_SURFACE_FILL,\n 'border-left-color': 'transparent',\n};\n\nconst RESTING_SURFACE_DECLARATIONS: Declarations = {\n 'background-color': RESTING_SURFACE,\n};\n\n/** Never inline styles: an inline declaration outranks the sheet, so `:hover` could never repaint the card. */\nconst SURFACES: Record<SelectableCardVariant, Record<CardState, Declarations>> = {\n profile: {\n resting: RESTING_SURFACE_DECLARATIONS,\n hover: HOVER_SURFACE,\n selected: {\n [OUTLINE_PROPERTY]: PROFILE_SELECTED_BORDER,\n [TINT_PROPERTY]: PROFILE_TINT,\n },\n },\n library: {\n resting: RESTING_SURFACE_DECLARATIONS,\n hover: HOVER_SURFACE,\n selected: {\n [OUTLINE_PROPERTY]: LIBRARY_SELECTED_BORDER,\n [TINT_PROPERTY]: LIBRARY_TINT,\n },\n },\n editing: {\n resting: RESTING_SURFACE_DECLARATIONS,\n hover: HOVER_SURFACE,\n selected: {\n [OUTLINE_PROPERTY]: EDITING_ACCENT,\n [TINT_PROPERTY]: EDITING_TINT,\n },\n },\n};\n\nconst RESTING_EYEBROW: React.CSSProperties = { color: EYEBROW };\n\nconst EYEBROWS: Record<SelectableCardVariant, Record<SettledState, React.CSSProperties>> = {\n profile: {\n resting: RESTING_EYEBROW,\n selected: { color: PROFILE_ACCENT, opacity: PROFILE_EYEBROW_OPACITY },\n },\n library: { resting: RESTING_EYEBROW, selected: RESTING_EYEBROW },\n editing: {\n resting: RESTING_EYEBROW,\n selected: { color: EDITING_ACCENT, opacity: PROFILE_EYEBROW_OPACITY },\n },\n};\n\nconst SCROLLED_SURFACE: Declarations = { 'border-left': RESTING_BORDER };\n\nconst OUTLINE_CSS = `\n.${ROOT_CLASS}[data-state='selected'] {\n z-index: 5;\n}\n.${ROOT_CLASS} > .${FLARE_CLASS} {\n position: absolute;\n left: -${FLARE_PX}px;\n top: 0;\n z-index: 0;\n overflow: visible;\n pointer-events: none;\n}\n.${ROOT_CLASS} > *:not(.${FLARE_CLASS}):not([data-selectable-card-actions]) {\n position: relative;\n z-index: 1;\n}\n.${ROOT_CLASS} > [data-selectable-card-actions] {\n z-index: 2;\n}`;\n\nconst bodyOf = (declarations: Declarations): string =>\n Object.entries(declarations)\n .map(([property, value]) => ` ${property}: ${value};`)\n .join('\\n');\n\nconst selectorFor = (variant: SelectableCardVariant, state: CardState): string =>\n state === 'hover'\n ? `.${ROOT_CLASS}[data-variant='${variant}'][data-state='resting'][data-hoverable]:hover`\n : `.${ROOT_CLASS}[data-variant='${variant}'][data-state='${state}']`;\n\nconst ruleFor = (\n variant: SelectableCardVariant,\n state: CardState,\n declarations: Declarations,\n): string => `${selectorFor(variant, state)} {\\n${bodyOf(declarations)}\\n}`;\n\nconst SURFACE_CSS = (Object.keys(SURFACES) as SelectableCardVariant[])\n .flatMap((variant) =>\n (Object.keys(SURFACES[variant]) as CardState[]).map((state) =>\n ruleFor(variant, state, SURFACES[variant][state]),\n ),\n )\n .join('\\n');\n\nconst SLOT_CSS = `.${ROOT_CLASS}[data-pinned='false'][data-state='resting'] {\\n${bodyOf(\n SCROLLED_SURFACE,\n)}\\n}`;\n\nconst CARD_CSS = `${SLOT_CSS}\\n${SURFACE_CSS}\\n${OUTLINE_CSS}`;\n\nconst DESCRIPTION_STYLE: React.CSSProperties = {\n display: '-webkit-box',\n WebkitLineClamp: 2,\n WebkitBoxOrient: 'vertical',\n overflow: 'hidden',\n color: MUTED,\n lineHeight: 1.6,\n};\n\nconst COUNT_STYLE: React.CSSProperties = { color: MUTED, letterSpacing: '0.11px' };\n\nconst LINK_CLASS = `rounded-xs text-[length:var(--malachite-font-size-xsmall,11px)] text-[var(--malachite-text-muted,rgb(76,75,75))] no-underline transition-colors hover:text-[var(--malachite-text-primary)] ${FOCUS_RING}`;\nconst LINK_STYLE: React.CSSProperties = { lineHeight: 1.6 };\nconst LINK_ICON_STYLE: React.CSSProperties = { marginLeft: 2, verticalAlign: '-1px' };\nconst LINK_ICON_SIZE_PX = 12;\n\nconst PENDING = 'var(--malachite-selectable-card-pending-foreground, #96580a)';\n\nconst LOADING_LABEL_STYLE: React.CSSProperties = { color: PENDING };\nconst LOADING_HINT_STYLE: React.CSSProperties = { color: PENDING, opacity: 0.7 };\n\nconst PENDING_BODY_TOP_PX = 36;\nconst PENDING_BODY_BOTTOM_PX = 38;\n\n// The 16px library icon's glyph inset, so it lines up with the text below.\nconst TITLE_ICON_INSET_PX = 2.25;\nconst TITLE_ICON_STYLE: React.CSSProperties = {\n color: 'var(--malachite-text-primary)',\n marginLeft: -TITLE_ICON_INSET_PX,\n};\n\n// Offsets the outline button's 1px drop shadow so it centres on the eyebrow.\nconst ACTIONS_STYLE: React.CSSProperties = { transform: 'translateY(-1px)' };\n\nconst DISMISS_ICON_BOX = 'inline-flex items-center justify-center [&_svg]:size-[10px]!';\nconst DISABLED_DISMISS_STYLE: React.CSSProperties = { color: MUTED };\n\nconst DEFAULT_MARKER_LABEL = 'Default profile';\nconst DEFAULT_MARKER_SIZE_PX = 16;\n// The tilted pin's glyph inset.\nconst DEFAULT_MARKER_INSET_PX = 3;\nconst DEFAULT_MARKER_STYLE: React.CSSProperties = {\n color: PROFILE_ACCENT,\n display: 'inline-flex',\n transform: 'rotate(45deg)',\n};\nconst LEADING_DEFAULT_MARKER_STYLE: React.CSSProperties = {\n ...DEFAULT_MARKER_STYLE,\n marginLeft: -DEFAULT_MARKER_INSET_PX,\n};\n\n/** Announced rather than shown alone: a bare glyph reads as an unnamed graphic, and the tooltip\n * travels by `aria-describedby`, which describes rather than names. */\nconst DefaultMarker: React.FC<{ leading: boolean }> = ({ leading }) => (\n <Tooltip text={DEFAULT_MARKER_LABEL} triggerAs=\"span\" describesTrigger={false}>\n <span\n role=\"img\"\n aria-label={DEFAULT_MARKER_LABEL}\n style={leading ? LEADING_DEFAULT_MARKER_STYLE : DEFAULT_MARKER_STYLE}\n >\n <PinIcon size={DEFAULT_MARKER_SIZE_PX} />\n </span>\n </Tooltip>\n);\n\nconst joinIds = (ids: Array<string | undefined>): string | undefined => {\n const present = ids.filter((id): id is string => id !== undefined);\n return present.length > 0 ? present.join(' ') : undefined;\n};\n\n/** A fixed-size card that behaves as one option in a radio group: a card-shaped `Surface.Row`. */\nconst SelectableCard: React.FC<SelectableCardProps> = ({\n value,\n title,\n titleIcon,\n isDefault = false,\n variant = 'profile',\n eyebrow,\n status,\n description,\n countLabel,\n link,\n actions,\n onDismiss,\n dismissLabel = 'Dismiss',\n dismissDisabledReason,\n selected = false,\n loading = false,\n loadingLabel = 'Loading…',\n loadingHint,\n disabled = false,\n dimmed = false,\n onSelect,\n tabIndex,\n 'aria-label': ariaLabel,\n className = '',\n style,\n}) => {\n const { pinned } = useCardStripSlot();\n const hoverable = !selected && !disabled;\n\n const rootRef = useRef<HTMLDivElement>(null);\n useAdoptedStyleSheet(rootRef, CARD_CSS, STYLE_ID);\n\n const instanceId = `mal-selectable-card-${useId().replace(/[^a-zA-Z0-9_-]/g, '')}`;\n const outlineGradientId = `${instanceId}-outline`;\n const eyebrowId = `${instanceId}-eyebrow`;\n const statusId = `${instanceId}-status`;\n const titleId = `${instanceId}-title`;\n const descriptionId = `${instanceId}-description`;\n const countId = `${instanceId}-count`;\n\n const labelledBy = ariaLabel\n ? undefined\n : joinIds([eyebrow ? eyebrowId : undefined, titleId, status ? statusId : undefined]);\n const describedBy = joinIds([\n description ? descriptionId : undefined,\n countLabel ? countId : undefined,\n ]);\n\n if (loading) {\n return (\n <div\n ref={rootRef}\n role=\"status\"\n aria-busy=\"true\"\n aria-live=\"polite\"\n data-variant=\"editing\"\n data-state=\"selected\"\n className={`${ROOT_CLASS} relative flex shrink-0 flex-col items-center gap-2 px-5 text-center ${className}`.trim()}\n style={\n {\n width: CARD_WIDTH,\n height: CARD_HEIGHT,\n borderRadius: CARD_RADIUS,\n boxSizing: 'border-box',\n paddingTop: `${PENDING_BODY_TOP_PX}px`,\n paddingBottom: `${PENDING_BODY_BOTTOM_PX}px`,\n justifyContent: 'center',\n [OUTLINE_PROPERTY]: PENDING,\n [TINT_PROPERTY]: EDITING_TINT,\n ...style,\n } as React.CSSProperties\n }\n >\n {/* The same outline a selected card wears: this IS the selection while a profile\n is being built, so it has to break the strip's rule rather than sit on it. */}\n <svg\n className={FLARE_CLASS}\n width={FLARE_BOX_WIDTH}\n height={FLARE_BOX_HEIGHT}\n viewBox={`0 0 ${FLARE_BOX_WIDTH} ${FLARE_BOX_HEIGHT}`}\n fill=\"none\"\n aria-hidden=\"true\"\n >\n <defs>\n <linearGradient id={outlineGradientId} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop offset=\"0\" style={{ stopColor: `var(${TINT_PROPERTY})` }} />\n <stop offset=\"1\" style={{ stopColor: SELECTED_SURFACE_END }} />\n </linearGradient>\n </defs>\n <path\n d={FILL_PATH}\n data-malachite-shape=\"\"\n style={{ fill: `url(#${outlineGradientId})` }}\n />\n <path\n d={OUTLINE_PATH}\n data-malachite-shape=\"\"\n strokeWidth={STROKE_PX}\n style={{ fill: 'none', stroke: `var(${OUTLINE_PROPERTY})` }}\n />\n </svg>\n <Text size=\"small\" fontWeight=\"semi-bold\" style={LOADING_LABEL_STYLE}>\n {loadingLabel}\n </Text>\n {loadingHint ? (\n <Text size=\"xsmall\" fontWeight=\"semi-bold\" style={LOADING_HINT_STYLE}>\n {loadingHint}\n </Text>\n ) : null}\n </div>\n );\n }\n\n const titleInTopRow = variant === 'library';\n\n const eyebrowStyle = EYEBROWS[variant][selected ? 'selected' : 'resting'];\n const hasCornerCluster = Boolean(actions) || Boolean(onDismiss);\n const isDismissDisabled = dismissDisabledReason !== undefined;\n const eyebrowRowEnd =\n actions && onDismiss ? 'pr-[48px]' : hasCornerCluster ? 'pr-[18px]' : 'pr-1';\n\n return (\n <div\n ref={rootRef}\n data-variant={variant}\n data-pinned={pinned ? 'true' : 'false'}\n data-state={selected ? 'selected' : 'resting'}\n data-hoverable={hoverable ? '' : undefined}\n className={`${ROOT_CLASS} group relative grid shrink-0 grid-rows-[1fr_auto] ${FOCUS_RING_WITHIN_RADIO} ${className}`.trim()}\n style={{\n width: CARD_WIDTH,\n height: CARD_HEIGHT,\n borderRadius: CARD_RADIUS,\n boxSizing: 'border-box',\n ...style,\n }}\n >\n {selected ? (\n <svg\n className={FLARE_CLASS}\n width={FLARE_BOX_WIDTH}\n height={FLARE_BOX_HEIGHT}\n viewBox={`0 0 ${FLARE_BOX_WIDTH} ${FLARE_BOX_HEIGHT}`}\n fill=\"none\"\n aria-hidden=\"true\"\n >\n <defs>\n <linearGradient id={outlineGradientId} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop offset=\"0\" style={{ stopColor: `var(${TINT_PROPERTY})` }} />\n <stop offset=\"1\" style={{ stopColor: SELECTED_SURFACE_END }} />\n </linearGradient>\n </defs>\n <path\n d={FILL_PATH}\n data-malachite-shape=\"\"\n style={{ fill: `url(#${outlineGradientId})` }}\n />\n <path\n d={OUTLINE_PATH}\n data-malachite-shape=\"\"\n strokeWidth={STROKE_PX}\n style={{ fill: 'none', stroke: `var(${OUTLINE_PROPERTY})` }}\n />\n </svg>\n ) : null}\n <button\n type=\"button\"\n role=\"radio\"\n data-value={value}\n aria-checked={selected}\n aria-label={ariaLabel}\n aria-labelledby={labelledBy}\n aria-describedby={describedBy}\n aria-disabled={disabled || undefined}\n tabIndex={tabIndex ?? (selected ? 0 : -1)}\n onClick={() => {\n if (disabled || selected) {\n return;\n }\n onSelect?.(value);\n }}\n className={`flex min-w-0 appearance-none flex-col border-0 bg-transparent py-0 pt-3 pr-4 pl-4 text-left outline-none ${\n disabled ? 'cursor-not-allowed' : 'cursor-pointer'\n }`}\n style={{ borderRadius: CARD_RADIUS }}\n >\n {/* Clears the corner buttons: 18px for one, 48px for `actions` and the x. */}\n <div className={`flex h-[13px] shrink-0 items-center gap-2 ${eyebrowRowEnd}`}>\n <div className=\"flex min-w-0 items-center gap-1.5\">\n {titleInTopRow ? (\n <span id={titleId} className=\"flex min-w-0 items-center gap-1.5\">\n {titleIcon ? (\n <span\n className=\"flex shrink-0 items-center\"\n style={TITLE_ICON_STYLE}\n >\n {titleIcon}\n </span>\n ) : null}\n {isDefault ? (\n <span className=\"flex shrink-0 items-center\">\n <DefaultMarker leading={!titleIcon} />\n </span>\n ) : null}\n <TruncatedTooltip text={title}>\n <Text\n size=\"small\"\n fontWeight=\"semi-bold\"\n style={dimmed ? { color: MUTED } : undefined}\n >\n {title}\n </Text>\n </TruncatedTooltip>\n </span>\n ) : null}\n {eyebrow ? (\n <span id={eyebrowId} className=\"flex min-w-0\">\n <Text size=\"xsmall\" fontWeight=\"semi-bold\" style={eyebrowStyle}>\n {eyebrow}\n </Text>\n </span>\n ) : null}\n {status ? (\n <span id={statusId} className=\"flex min-w-0\">\n <Tag\n value={status.label}\n type={status.type ?? 'default'}\n textTransform=\"none\"\n paddingSize=\"compact\"\n />\n </span>\n ) : null}\n </div>\n </div>\n\n <div\n className={`mt-[11px] flex min-w-0 flex-1 flex-col gap-1 pt-3 ${\n titleInTopRow ? 'justify-end' : 'justify-between'\n }`}\n >\n {titleInTopRow ? null : (\n <div id={titleId} className=\"flex min-w-0 items-center gap-1.5\">\n {titleIcon ? (\n <span\n className=\"flex shrink-0 items-center\"\n style={TITLE_ICON_STYLE}\n >\n {titleIcon}\n </span>\n ) : null}\n {isDefault ? (\n <span className=\"flex shrink-0 items-center\">\n <DefaultMarker leading={!titleIcon} />\n </span>\n ) : null}\n <TruncatedTooltip text={title}>\n <Text\n size=\"small\"\n fontWeight=\"semi-bold\"\n style={dimmed ? { color: MUTED } : undefined}\n >\n {title}\n </Text>\n </TruncatedTooltip>\n </div>\n )}\n {description ? (\n <span id={descriptionId} className=\"block min-w-0\">\n <Text size=\"xsmall\" style={DESCRIPTION_STYLE}>\n {description}\n </Text>\n </span>\n ) : null}\n </div>\n </button>\n\n <div className=\"flex min-w-0 flex-col gap-1 self-end pr-4 pb-3 pl-4\">\n {link ? (\n <span className=\"min-w-0\" style={LINK_STYLE}>\n <a\n href={link.href}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className={LINK_CLASS}\n data-selectable-card-link=\"\"\n >\n {link.label}\n <span aria-hidden=\"true\">\n <ExternalLinkIcon\n size={LINK_ICON_SIZE_PX}\n style={LINK_ICON_STYLE}\n />\n </span>{' '}\n <span className=\"sr-only\">(opens in a new tab)</span>\n </a>\n </span>\n ) : null}\n {countLabel ? (\n <span id={countId} className=\"min-w-0 truncate\">\n <Text size=\"xsmall\" fontWeight=\"semi-bold\" style={COUNT_STYLE}>\n {countLabel}\n </Text>\n </span>\n ) : null}\n </div>\n\n {/* Lifted out of the flow rather than given a grid cell, so it can sit on the\n eyebrow row — which belongs to the control and cannot hold a second one. */}\n {hasCornerCluster ? (\n <div\n data-selectable-card-actions=\"\"\n className=\"absolute top-3 right-2 flex h-[13px] shrink-0 items-center gap-2.5\"\n >\n {actions ? (\n <span className=\"flex items-center gap-2.5\" style={ACTIONS_STYLE}>\n {actions}\n </span>\n ) : null}\n {onDismiss ? (\n <Button\n type=\"button\"\n variant=\"ghost\"\n size=\"xsmall\"\n iconOnly\n aria-label={dismissLabel}\n tooltip={dismissDisabledReason ?? dismissLabel}\n disabled={isDismissDisabled}\n className=\"shrink-0\"\n onClick={onDismiss}\n >\n <span\n className={DISMISS_ICON_BOX}\n style={isDismissDisabled ? DISABLED_DISMISS_STYLE : eyebrowStyle}\n >\n <DismissIcon />\n </span>\n </Button>\n ) : null}\n </div>\n ) : null}\n </div>\n );\n};\n\nexport default SelectableCard;\nexport { SelectableCard };\n"],"names":["CARD_WIDTH_PX","CARD_WIDTH","CARD_HEIGHT","CARD_CORNER","CARD_RADIUS","MUTED","EYEBROW","PROFILE_ACCENT","PROFILE_TINT","PROFILE_SELECTED_BORDER","PROFILE_EYEBROW_OPACITY","LIBRARY_TINT","LIBRARY_SELECTED_BORDER","EDITING_ACCENT","EDITING_TINT","SELECTED_SURFACE_END","RESTING_SURFACE","RESTING_BORDER","HOVER_SURFACE_FILL","CARD_FLARE_PX","FLARE_PX","STROKE_PX","CARD_HEIGHT_PX","CORNER_PX","STRIP_RULE_PX","CARD_FLARE_TIP_PX","FLARE_BOX_WIDTH","FLARE_BOX_HEIGHT","pathTo","base","inset","left","right","top","r","OUTLINE_PATH","FILL_PATH","FLARE_CLASS","ROOT_CLASS","STYLE_ID","OUTLINE_PROPERTY","TINT_PROPERTY","HOVER_SURFACE","RESTING_SURFACE_DECLARATIONS","SURFACES","RESTING_EYEBROW","EYEBROWS","SCROLLED_SURFACE","OUTLINE_CSS","bodyOf","declarations","property","value","selectorFor","variant","state","ruleFor","SURFACE_CSS","SLOT_CSS","CARD_CSS","DESCRIPTION_STYLE","COUNT_STYLE","LINK_CLASS","FOCUS_RING","LINK_STYLE","LINK_ICON_STYLE","LINK_ICON_SIZE_PX","PENDING","LOADING_LABEL_STYLE","LOADING_HINT_STYLE","PENDING_BODY_TOP_PX","PENDING_BODY_BOTTOM_PX","TITLE_ICON_STYLE","ACTIONS_STYLE","DISMISS_ICON_BOX","DISABLED_DISMISS_STYLE","DEFAULT_MARKER_LABEL","DEFAULT_MARKER_SIZE_PX","DEFAULT_MARKER_STYLE","LEADING_DEFAULT_MARKER_STYLE","DefaultMarker","leading","jsx","Tooltip","PinIcon","joinIds","ids","present","id","SelectableCard","title","titleIcon","isDefault","eyebrow","status","description","countLabel","link","actions","onDismiss","dismissLabel","dismissDisabledReason","selected","loading","loadingLabel","loadingHint","disabled","dimmed","onSelect","tabIndex","ariaLabel","className","style","pinned","useCardStripSlot","hoverable","rootRef","useRef","useAdoptedStyleSheet","instanceId","useId","outlineGradientId","eyebrowId","statusId","titleId","descriptionId","countId","labelledBy","describedBy","jsxs","Text","titleInTopRow","eyebrowStyle","hasCornerCluster","isDismissDisabled","eyebrowRowEnd","FOCUS_RING_WITHIN_RADIO","TruncatedTooltip","Tag","ExternalLinkIcon","Button","DismissIcon"],"mappings":"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"}
|
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
const
|
|
1
|
+
const i = "outline-none focus-visible:outline-offset-2 focus-visible:[outline:2px_solid_var(--malachite-text-primary)]", o = "outline-none focus-visible:[outline:2px_solid_var(--malachite-text-primary)] focus-visible:[outline-offset:-2px]", e = "pointer-events-none absolute inset-0 z-[2] hidden group-focus-visible:block [outline:2px_solid_var(--malachite-text-primary)] [outline-offset:-2px]", t = "outline-none has-[input:focus-visible]:outline-offset-2 has-[input:focus-visible]:[outline:2px_solid_var(--malachite-text-primary)]", s = "outline-none has-[[role=radio]:focus-visible]:outline-offset-2 has-[[role=radio]:focus-visible]:[outline:2px_solid_var(--malachite-text-primary)]", l = "outline-none focus-visible:outline-offset-2 focus-visible:[outline:2px_solid_var(--malachite-selection-bar-foreground)]", n = "outline-none focus-visible:[outline:2px_solid_var(--malachite-inline-confirm-foreground)] focus-visible:[outline-offset:-2px]";
|
|
2
2
|
export {
|
|
3
|
-
|
|
3
|
+
i as FOCUS_RING,
|
|
4
4
|
n as FOCUS_RING_INLINE_CONFIRM_INSET,
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
t as
|
|
5
|
+
o as FOCUS_RING_INSET,
|
|
6
|
+
e as FOCUS_RING_INSET_OVERLAY,
|
|
7
|
+
l as FOCUS_RING_SELECTION_BAR,
|
|
8
|
+
t as FOCUS_RING_WITHIN_INPUT,
|
|
9
|
+
s as FOCUS_RING_WITHIN_RADIO
|
|
9
10
|
};
|
|
10
11
|
//# sourceMappingURL=focusRing.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"focusRing.js","sources":["../../src/components/focusRing.ts"],"sourcesContent":["// Shared keyboard focus indicator for interactive components.\n\n/** Standard focus ring — sits 2px outside the control. */\nexport const FOCUS_RING =\n 'outline-none focus-visible:outline-offset-2 focus-visible:[outline:2px_solid_var(--malachite-text-primary)]';\n\n/**\n * Inset focus ring — drawn 2px inside the element edge. Use for full-bleed elements\n * inside an `overflow-hidden` container (e.g. Surface.Row) where an outset outline\n * would be clipped.\n */\nexport const FOCUS_RING_INSET =\n 'outline-none focus-visible:[outline:2px_solid_var(--malachite-text-primary)] focus-visible:[outline-offset:-2px]';\n\n/** `FOCUS_RING_INSET` drawn by an overlay while its `group` ancestor has keyboard focus. */\nexport const FOCUS_RING_INSET_OVERLAY =\n 'pointer-events-none absolute inset-0 z-[2] hidden group-focus-visible:block [outline:2px_solid_var(--malachite-text-primary)] [outline-offset:-2px]';\n\n/** Ring drawn on a wrapper when a control *inside* it takes focus. */\nexport const FOCUS_RING_WITHIN =\n 'outline-none has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:[outline:2px_solid_var(--malachite-text-primary)]';\n\n/** Ring for a control on the SelectionBar, where `FOCUS_RING` would be invisible. */\nexport const FOCUS_RING_SELECTION_BAR =\n 'outline-none focus-visible:outline-offset-2 focus-visible:[outline:2px_solid_var(--malachite-selection-bar-foreground)]';\n\n/** Inset ring for a control on the InlineConfirm chip. */\nexport const FOCUS_RING_INLINE_CONFIRM_INSET =\n 'outline-none focus-visible:[outline:2px_solid_var(--malachite-inline-confirm-foreground)] focus-visible:[outline-offset:-2px]';\n"],"names":["FOCUS_RING","FOCUS_RING_INSET","FOCUS_RING_INSET_OVERLAY","
|
|
1
|
+
{"version":3,"file":"focusRing.js","sources":["../../src/components/focusRing.ts"],"sourcesContent":["// Shared keyboard focus indicator for interactive components.\n\n/** Standard focus ring — sits 2px outside the control. */\nexport const FOCUS_RING =\n 'outline-none focus-visible:outline-offset-2 focus-visible:[outline:2px_solid_var(--malachite-text-primary)]';\n\n/**\n * Inset focus ring — drawn 2px inside the element edge. Use for full-bleed elements\n * inside an `overflow-hidden` container (e.g. Surface.Row) where an outset outline\n * would be clipped.\n */\nexport const FOCUS_RING_INSET =\n 'outline-none focus-visible:[outline:2px_solid_var(--malachite-text-primary)] focus-visible:[outline-offset:-2px]';\n\n/** `FOCUS_RING_INSET` drawn by an overlay while its `group` ancestor has keyboard focus. */\nexport const FOCUS_RING_INSET_OVERLAY =\n 'pointer-events-none absolute inset-0 z-[2] hidden group-focus-visible:block [outline:2px_solid_var(--malachite-text-primary)] [outline-offset:-2px]';\n\n/** Ring drawn on a wrapper when a control *inside* it takes focus. */\nexport const FOCUS_RING_WITHIN =\n 'outline-none has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:[outline:2px_solid_var(--malachite-text-primary)]';\n\n/**\n * Use instead of `FOCUS_RING_WITHIN` when the wrapper also holds its own tabbable buttons:\n * `:has(:focus-visible)` matches any of them, so a focused clear button would draw two rings.\n */\nexport const FOCUS_RING_WITHIN_INPUT =\n 'outline-none has-[input:focus-visible]:outline-offset-2 has-[input:focus-visible]:[outline:2px_solid_var(--malachite-text-primary)]';\n\n/** As `FOCUS_RING_WITHIN_INPUT`, for a card whose control is a `role=\"radio\"` beside its links. */\nexport const FOCUS_RING_WITHIN_RADIO =\n 'outline-none has-[[role=radio]:focus-visible]:outline-offset-2 has-[[role=radio]:focus-visible]:[outline:2px_solid_var(--malachite-text-primary)]';\n\n/** Ring for a control on the SelectionBar, where `FOCUS_RING` would be invisible. */\nexport const FOCUS_RING_SELECTION_BAR =\n 'outline-none focus-visible:outline-offset-2 focus-visible:[outline:2px_solid_var(--malachite-selection-bar-foreground)]';\n\n/** Inset ring for a control on the InlineConfirm chip. */\nexport const FOCUS_RING_INLINE_CONFIRM_INSET =\n 'outline-none focus-visible:[outline:2px_solid_var(--malachite-inline-confirm-foreground)] focus-visible:[outline-offset:-2px]';\n"],"names":["FOCUS_RING","FOCUS_RING_INSET","FOCUS_RING_INSET_OVERLAY","FOCUS_RING_WITHIN_INPUT","FOCUS_RING_WITHIN_RADIO","FOCUS_RING_SELECTION_BAR","FOCUS_RING_INLINE_CONFIRM_INSET"],"mappings":"AAGO,MAAMA,IACT,+GAOSC,IACT,oHAGSC,IACT,uJAUSC,IACT,uIAGSC,IACT,qJAGSC,IACT,2HAGSC,IACT;"}
|
|
@@ -1,133 +1,184 @@
|
|
|
1
|
-
import { useSyncExternalStore as
|
|
2
|
-
import { getDeepActiveElement as
|
|
3
|
-
import { pushEscapeLayer as
|
|
4
|
-
import { FOCUS_RING as
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
|
|
1
|
+
import { useSyncExternalStore as y, useRef as f, useCallback as x, useEffect as T, useLayoutEffect as E } from "react";
|
|
2
|
+
import { getDeepActiveElement as k } from "./activeElement.js";
|
|
3
|
+
import { pushEscapeLayer as R } from "./escapeLayers.js";
|
|
4
|
+
import { FOCUS_RING as z } from "./focusRing.js";
|
|
5
|
+
import { nextLayerTicket as K, popupLayerHolding as H } from "./overlayLayers.js";
|
|
6
|
+
import { useOwnedByPopover as V } from "./popoverTree.js";
|
|
7
|
+
import { OVERLAY_Z_BASE as D, ensureElevatedOverlayStyles as W } from "./portalOverlay.js";
|
|
8
|
+
import { lockBodyScroll as Y } from "./scrollLock.js";
|
|
9
|
+
import { leaveTopLayer as M, raiseToTopLayer as j } from "./topLayer.js";
|
|
10
|
+
const de = `flex shrink-0 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent p-[4px] text-[var(--malachite-text-secondary)] hover:text-[var(--malachite-text-primary)] transition-colors ${z}`, q = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), summary, [tabindex]:not([tabindex="-1"])', P = (e) => {
|
|
11
|
+
if (e.tabIndex < 0 || e.matches(":disabled") || e.closest("[inert]"))
|
|
12
|
+
return !1;
|
|
13
|
+
const { visibility: t } = getComputedStyle(e);
|
|
14
|
+
if (t === "hidden" || t === "collapse")
|
|
15
|
+
return !1;
|
|
16
|
+
for (let r = e; r; r = r.parentElement) {
|
|
17
|
+
const { display: n, contentVisibility: u } = getComputedStyle(r);
|
|
18
|
+
if (n === "none" || r !== e && u === "hidden")
|
|
19
|
+
return !1;
|
|
20
|
+
}
|
|
21
|
+
return !0;
|
|
22
|
+
}, _ = (e) => e instanceof HTMLInputElement && e.type === "radio" && e.name !== "", Z = (e, t) => {
|
|
23
|
+
if (!_(e))
|
|
24
|
+
return !1;
|
|
25
|
+
const r = t.filter(
|
|
26
|
+
(n) => _(n) && n.name === e.name && n.form === e.form
|
|
27
|
+
);
|
|
28
|
+
return (r.find((n) => n.checked) ?? r[0]) !== e;
|
|
29
|
+
}, $ = (e) => {
|
|
30
|
+
for (let t = e.parentElement; t; t = t.parentElement)
|
|
31
|
+
if (t instanceof HTMLDetailsElement && !t.open) {
|
|
32
|
+
const r = Array.from(t.children).find((n) => n.tagName === "SUMMARY");
|
|
33
|
+
if (!(r != null && r.contains(e)))
|
|
34
|
+
return !0;
|
|
35
|
+
}
|
|
36
|
+
return !1;
|
|
37
|
+
}, J = (e) => e.map((t, r) => ({ element: t, index: r })).sort((t, r) => t.element.tabIndex !== r.element.tabIndex ? t.element.tabIndex === 0 ? 1 : r.element.tabIndex === 0 ? -1 : t.element.tabIndex - r.element.tabIndex : t.index - r.index).map(({ element: t }) => t), I = (e) => {
|
|
38
|
+
const t = Array.from(e.querySelectorAll(q)).filter(
|
|
39
|
+
(r) => P(r) && !$(r)
|
|
40
|
+
);
|
|
41
|
+
return J(t.filter((r) => !Z(r, t)));
|
|
42
|
+
}, Q = (e) => I(e)[0] ?? null, c = [], d = /* @__PURE__ */ new Set(), L = /* @__PURE__ */ new Map(), O = /* @__PURE__ */ new Map(), h = /* @__PURE__ */ new Set(), X = () => {
|
|
10
43
|
};
|
|
11
44
|
let m = [];
|
|
12
|
-
const
|
|
13
|
-
const e =
|
|
14
|
-
var
|
|
15
|
-
return (
|
|
16
|
-
}).filter((
|
|
17
|
-
if (e.length === m.length && e.every((
|
|
45
|
+
const ee = () => {
|
|
46
|
+
const e = d.size ? c.map((r) => {
|
|
47
|
+
var n;
|
|
48
|
+
return (n = L.get(r)) == null ? void 0 : n();
|
|
49
|
+
}).filter((r) => !!r) : [];
|
|
50
|
+
if (e.length === m.length && e.every((r, n) => r === m[n]))
|
|
18
51
|
return;
|
|
19
|
-
const
|
|
20
|
-
for (const
|
|
21
|
-
|
|
22
|
-
for (const
|
|
23
|
-
|
|
52
|
+
const t = new Set(e);
|
|
53
|
+
for (const r of m)
|
|
54
|
+
t.has(r) || M(r);
|
|
55
|
+
for (const r of e)
|
|
56
|
+
j(r);
|
|
24
57
|
m = e;
|
|
25
|
-
},
|
|
58
|
+
}, b = () => {
|
|
26
59
|
for (const e of h)
|
|
27
60
|
e();
|
|
28
|
-
},
|
|
61
|
+
}, B = (e) => (h.add(e), () => {
|
|
29
62
|
h.delete(e);
|
|
30
|
-
}),
|
|
63
|
+
}), g = (e, t, r, n) => {
|
|
64
|
+
const u = n[0], a = n[n.length - 1], o = t !== null && r.contains(t);
|
|
65
|
+
if (t && o && t !== r && !n.includes(t)) {
|
|
66
|
+
const i = e.shiftKey ? Node.DOCUMENT_POSITION_PRECEDING : Node.DOCUMENT_POSITION_FOLLOWING;
|
|
67
|
+
n.some((l) => t.compareDocumentPosition(l) & i) || (e.preventDefault(), (e.shiftKey ? a : u).focus());
|
|
68
|
+
return;
|
|
69
|
+
}
|
|
70
|
+
e.shiftKey ? (!o || t === u || t === r) && (e.preventDefault(), a.focus()) : (!o || t === a || t === r) && (e.preventDefault(), u.focus());
|
|
71
|
+
}, w = (e) => {
|
|
31
72
|
if (e.key !== "Tab" || e.defaultPrevented)
|
|
32
73
|
return;
|
|
33
|
-
let
|
|
34
|
-
for (let
|
|
35
|
-
|
|
36
|
-
if (!
|
|
74
|
+
let t = null, r = 0;
|
|
75
|
+
for (let o = c.length - 1; o >= 0 && !t; o -= 1)
|
|
76
|
+
t = c[o](), t && (r = O.get(c[o]) ?? 0);
|
|
77
|
+
if (!t)
|
|
78
|
+
return;
|
|
79
|
+
const n = k(), u = n ? H(n) : null;
|
|
80
|
+
if (n && u && u.ticket > r) {
|
|
81
|
+
const o = u.popup.shadowRoot ?? u.popup, i = I(o);
|
|
82
|
+
if (i.length === 0) {
|
|
83
|
+
e.preventDefault();
|
|
84
|
+
return;
|
|
85
|
+
}
|
|
86
|
+
g(e, n, o, i);
|
|
37
87
|
return;
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
88
|
+
}
|
|
89
|
+
const a = I(t);
|
|
90
|
+
if (a.length === 0) {
|
|
91
|
+
e.preventDefault(), t.focus();
|
|
41
92
|
return;
|
|
42
93
|
}
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
() => s.length > 0,
|
|
94
|
+
g(e, n, t, a);
|
|
95
|
+
}, te = (e, t) => (c.length === 0 && document.addEventListener("keydown", w), c.push(e), L.set(e, t), O.set(e, K()), b(), () => {
|
|
96
|
+
const r = c.lastIndexOf(e);
|
|
97
|
+
r !== -1 && c.splice(r, 1), d.delete(e), L.delete(e), O.delete(e);
|
|
98
|
+
const n = t();
|
|
99
|
+
n && M(n), c.length === 0 && document.removeEventListener("keydown", w), b();
|
|
100
|
+
}), pe = () => y(
|
|
101
|
+
B,
|
|
102
|
+
() => c.length > 0,
|
|
53
103
|
() => !1
|
|
54
|
-
),
|
|
55
|
-
if (
|
|
56
|
-
const
|
|
57
|
-
if (
|
|
104
|
+
), A = (e, t) => {
|
|
105
|
+
if (t === "content") {
|
|
106
|
+
const r = k();
|
|
107
|
+
if (r && e.contains(r))
|
|
58
108
|
return;
|
|
59
|
-
(e
|
|
109
|
+
(Q(e) ?? e).focus();
|
|
60
110
|
return;
|
|
61
111
|
}
|
|
62
112
|
e.focus();
|
|
63
|
-
},
|
|
113
|
+
}, me = ({
|
|
64
114
|
open: e,
|
|
65
|
-
onClose:
|
|
66
|
-
elevated:
|
|
67
|
-
hostRef:
|
|
68
|
-
initialFocus:
|
|
115
|
+
onClose: t,
|
|
116
|
+
elevated: r = !1,
|
|
117
|
+
hostRef: n,
|
|
118
|
+
initialFocus: u = "panel"
|
|
69
119
|
}) => {
|
|
70
|
-
const
|
|
71
|
-
|
|
72
|
-
|
|
120
|
+
const a = f(null), o = f(() => a.current).current;
|
|
121
|
+
V(
|
|
122
|
+
x(() => (n == null ? void 0 : n.current) ?? a.current, [n]),
|
|
73
123
|
e
|
|
74
124
|
);
|
|
75
|
-
const
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
}, [
|
|
125
|
+
const i = f(null), l = f(null), C = f(u), N = f(t);
|
|
126
|
+
T(() => {
|
|
127
|
+
N.current = t;
|
|
128
|
+
}, [t]), T(() => {
|
|
79
129
|
if (e)
|
|
80
|
-
return
|
|
81
|
-
const
|
|
82
|
-
|
|
130
|
+
return i.current = k(), () => {
|
|
131
|
+
const s = i.current;
|
|
132
|
+
i.current = null, s != null && s.isConnected && s.focus();
|
|
83
133
|
};
|
|
84
|
-
}, [e]),
|
|
134
|
+
}, [e]), T(() => {
|
|
85
135
|
if (!e)
|
|
86
136
|
return;
|
|
87
|
-
|
|
88
|
-
const
|
|
89
|
-
return
|
|
90
|
-
|
|
137
|
+
l.current = o;
|
|
138
|
+
const s = R(() => N.current()), U = Y(), G = te(o, () => (n == null ? void 0 : n.current) ?? null);
|
|
139
|
+
return a.current && A(a.current, C.current), () => {
|
|
140
|
+
l.current = null, G(), s(), U();
|
|
91
141
|
};
|
|
92
|
-
}, [e,
|
|
93
|
-
if (!(!e || !
|
|
94
|
-
return
|
|
95
|
-
|
|
142
|
+
}, [e, n, o]), E(() => {
|
|
143
|
+
if (!(!e || !r))
|
|
144
|
+
return d.add(o), b(), () => {
|
|
145
|
+
d.delete(o), b();
|
|
96
146
|
};
|
|
97
|
-
}, [e,
|
|
98
|
-
const
|
|
99
|
-
(
|
|
147
|
+
}, [e, r, o]);
|
|
148
|
+
const S = x(
|
|
149
|
+
(s) => e ? B(s) : X,
|
|
100
150
|
[e]
|
|
101
|
-
),
|
|
102
|
-
|
|
151
|
+
), F = y(
|
|
152
|
+
S,
|
|
103
153
|
// Gated on `open` so an overlay fading out stops claiming modal. Before it registers
|
|
104
154
|
// it is the one about to go on top, or aria-modal would drop for a frame on open.
|
|
105
|
-
() => e && (
|
|
155
|
+
() => e && (l.current === null || c[c.length - 1] === l.current),
|
|
106
156
|
() => !0
|
|
107
|
-
),
|
|
108
|
-
|
|
109
|
-
() => e && (
|
|
157
|
+
), p = y(
|
|
158
|
+
S,
|
|
159
|
+
() => e && (r || d.size > 0),
|
|
110
160
|
() => !1
|
|
111
|
-
),
|
|
112
|
-
|
|
161
|
+
), v = y(
|
|
162
|
+
S,
|
|
113
163
|
() => {
|
|
114
|
-
const
|
|
115
|
-
return
|
|
164
|
+
const s = l.current;
|
|
165
|
+
return D + (e && s ? Math.max(0, c.indexOf(s)) : 0);
|
|
116
166
|
},
|
|
117
|
-
() =>
|
|
167
|
+
() => D
|
|
118
168
|
);
|
|
119
|
-
return
|
|
120
|
-
|
|
121
|
-
}, [
|
|
122
|
-
|
|
123
|
-
}), { ref:
|
|
124
|
-
|
|
125
|
-
}, []), isTopmost:
|
|
169
|
+
return E(() => {
|
|
170
|
+
p && W();
|
|
171
|
+
}, [p]), E(() => {
|
|
172
|
+
ee();
|
|
173
|
+
}), { ref: x((s) => {
|
|
174
|
+
a.current = s, s && A(s, C.current);
|
|
175
|
+
}, []), isTopmost: F, zIndex: p ? void 0 : v, elevated: p };
|
|
126
176
|
};
|
|
127
177
|
export {
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
178
|
+
q as FOCUSABLE_SELECTOR,
|
|
179
|
+
de as OVERLAY_ICON_BUTTON_CLASSES,
|
|
180
|
+
Q as firstTabStopIn,
|
|
181
|
+
pe as useHasOpenOverlay,
|
|
182
|
+
me as useOverlayBehaviour
|
|
132
183
|
};
|
|
133
184
|
//# sourceMappingURL=overlayBehaviour.js.map
|