@hjmds/react 1.29.0 → 1.31.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/dist/auth-screen.d.ts +18 -3
- package/dist/auth-screen.d.ts.map +1 -1
- package/dist/auth-screen.js +22 -6
- package/dist/auth-screen.js.map +1 -1
- package/dist/bottom-navigation.d.ts +7 -0
- package/dist/bottom-navigation.d.ts.map +1 -1
- package/dist/bottom-navigation.js +64 -8
- package/dist/bottom-navigation.js.map +1 -1
- package/dist/carousel.d.ts +29 -1
- package/dist/carousel.d.ts.map +1 -1
- package/dist/carousel.js +27 -3
- package/dist/carousel.js.map +1 -1
- package/dist/display.d.ts +8 -2
- package/dist/display.d.ts.map +1 -1
- package/dist/display.js +12 -7
- package/dist/display.js.map +1 -1
- package/dist/evidence.d.ts +3 -1862
- package/dist/evidence.d.ts.map +1 -1
- package/dist/evidence.js +112 -300
- package/dist/evidence.js.map +1 -1
- package/dist/forms.d.ts.map +1 -1
- package/dist/forms.js +2 -1
- package/dist/forms.js.map +1 -1
- package/dist/image-choice.d.ts +5 -0
- package/dist/image-choice.d.ts.map +1 -1
- package/dist/image-choice.js +4 -3
- package/dist/image-choice.js.map +1 -1
- package/dist/index.d.ts +3 -3
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +3 -3
- package/dist/index.js.map +1 -1
- package/dist/internal/field-error.d.ts +19 -0
- package/dist/internal/field-error.d.ts.map +1 -0
- package/dist/internal/field-error.js +19 -0
- package/dist/internal/field-error.js.map +1 -0
- package/dist/internal/initial-focus.d.ts.map +1 -1
- package/dist/internal/initial-focus.js +49 -7
- package/dist/internal/initial-focus.js.map +1 -1
- package/dist/internal/media-album.d.ts +49 -0
- package/dist/internal/media-album.d.ts.map +1 -0
- package/dist/internal/media-album.js +31 -0
- package/dist/internal/media-album.js.map +1 -0
- package/dist/internal/message-reactions.d.ts +28 -2
- package/dist/internal/message-reactions.d.ts.map +1 -1
- package/dist/internal/message-reactions.js +21 -5
- package/dist/internal/message-reactions.js.map +1 -1
- package/dist/layout.d.ts +19 -3
- package/dist/layout.d.ts.map +1 -1
- package/dist/layout.js +10 -3
- package/dist/layout.js.map +1 -1
- package/dist/navigation.d.ts +3 -1
- package/dist/navigation.d.ts.map +1 -1
- package/dist/navigation.js +4 -2
- package/dist/navigation.js.map +1 -1
- package/dist/number-field.d.ts.map +1 -1
- package/dist/number-field.js +2 -1
- package/dist/number-field.js.map +1 -1
- package/dist/overlays.d.ts +65 -0
- package/dist/overlays.d.ts.map +1 -1
- package/dist/overlays.js +36 -3
- package/dist/overlays.js.map +1 -1
- package/dist/public-exports.generated.d.ts +221 -0
- package/dist/public-exports.generated.d.ts.map +1 -0
- package/dist/public-exports.generated.js +670 -0
- package/dist/public-exports.generated.js.map +1 -0
- package/dist/screen-flows.d.ts +104 -12
- package/dist/screen-flows.d.ts.map +1 -1
- package/dist/screen-flows.js +87 -18
- package/dist/screen-flows.js.map +1 -1
- package/dist/screens.d.ts +59 -8
- package/dist/screens.d.ts.map +1 -1
- package/dist/screens.js +57 -15
- package/dist/screens.js.map +1 -1
- package/dist/select.d.ts.map +1 -1
- package/dist/select.js +2 -1
- package/dist/select.js.map +1 -1
- package/dist/selection.d.ts.map +1 -1
- package/dist/selection.js +3 -2
- package/dist/selection.js.map +1 -1
- package/dist/steps.d.ts +11 -1
- package/dist/steps.d.ts.map +1 -1
- package/dist/steps.js +11 -6
- package/dist/steps.js.map +1 -1
- package/dist/styles.css +139 -20
- package/dist/styles.layered.css +139 -20
- package/dist/supplemental-display.d.ts.map +1 -1
- package/dist/supplemental-display.js +2 -48
- package/dist/supplemental-display.js.map +1 -1
- package/dist/theme.d.ts.map +1 -1
- package/dist/theme.js +1 -0
- package/dist/theme.js.map +1 -1
- package/package.json +3 -3
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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","sourcesContent":["export {\n HjmProvider,\n useHjmTheme,\n type HjmBrandPalette,\n type HjmProviderHost,\n type HjmProviderProps,\n} from \"./provider.js\";\n\nexport { TopBar, type TopBarProps } from \"./top-bar.js\";\nexport { BottomCTA, type BottomCTAAction, type BottomCTAProps } from \"./bottom-cta.js\";\n\nexport {\n hjmCompositionStyleKeys,\n type HjmCompositionStyle,\n type HjmCompositionStyleKey,\n type HjmCompositionStyleProp,\n} from \"./composition-style.js\";\n\nexport {\n AspectRatio,\n Container,\n Grid,\n Layout,\n Section,\n Stack,\n Surface,\n Text,\n VisuallyHidden,\n type AspectRatioProps,\n type AspectRatioValue,\n type ContainerGutter,\n type ContainerProps,\n type ContainerSize,\n type GridGap,\n type GridProps,\n type LayoutProps,\n type LayoutSidebar,\n type SectionProps,\n type StackAlign,\n type StackAxis,\n type StackGap,\n type StackJustify,\n type StackProps,\n type SurfacePadding,\n type SurfaceProps,\n type SurfaceRadius,\n type SurfaceTone,\n type TextEmphasis,\n type TextProps,\n type TextTone,\n type VisuallyHiddenProps,\n} from \"./layout.js\";\n\nexport {\n Button,\n IconButton,\n Link,\n type ButtonAlign,\n type ButtonProps,\n type ButtonShape,\n type ButtonSize,\n type ButtonTone,\n type IconButtonProps,\n type IconButtonShape,\n type IconButtonSize,\n type IconButtonTone,\n type LinkRenderProps,\n type LinkProps,\n} from \"./actions.js\";\n\nexport {\n Field,\n OtpField,\n PasswordField,\n SearchField,\n TextArea,\n TextField,\n type FieldControlProps,\n type FieldProps,\n type OtpFieldProps,\n type PasswordFieldProps,\n type PasswordFieldToggleRenderProps,\n type SearchFieldProps,\n type SearchFieldIconRenderProps,\n type TextAreaProps,\n type TextFieldProps,\n} from \"./forms.js\";\n\nexport {\n Combobox,\n Form,\n type ComboboxItem,\n type ComboboxOpenChangeReason,\n type ComboboxProps,\n type FormProps,\n type FormSubmitHandler,\n NativeSelect,\n type NativeSelectProps,\n type SelectOption,\n} from \"./advanced-forms.js\";\n\nexport {\n Select,\n type SelectItem,\n type SelectLeadingRenderProps,\n type SelectOptionLeadingRenderProps,\n type SelectProps,\n type SelectSection,\n} from \"./select.js\";\n\nexport {\n NumberField,\n type NumberFieldProps,\n} from \"./number-field.js\";\n\nexport {\n Slider,\n type SliderProps,\n} from \"./slider.js\";\n\nexport {\n DatePicker,\n type DatePickerMonthAction,\n type DatePickerProps,\n} from \"./date-picker.js\";\n\nexport {\n FilePicker,\n type FilePickerProps,\n} from \"./file-picker.js\";\n\nexport {\n Checkbox,\n CheckboxGroup,\n Chip,\n Radio,\n RadioGroup,\n SegmentedControl,\n Switch,\n type CheckboxProps,\n type CheckboxGroupItem,\n type CheckboxGroupProps,\n type ChipProps,\n type ChoiceLeadingRenderProps,\n type RadioProps,\n type RadioGroupItem,\n type RadioGroupProps,\n type SegmentedControlItem,\n type SegmentedControlProps,\n type SwitchProps,\n type SwitchSize,\n} from \"./selection.js\";\n\nexport {\n TabPanel,\n Tabs,\n getDynamicTabPanelId,\n getTabId,\n getTabPanelId,\n type TabLeadingRenderProps,\n type TabItem,\n type TabPanelProps,\n type TabsProps,\n} from \"./navigation.js\";\n\nexport { Breadcrumb, type BreadcrumbProps } from \"./breadcrumb.js\";\nexport { Pagination, type PaginationProps } from \"./pagination.js\";\n\nexport {\n LoadMore,\n type LoadMoreProps,\n} from \"./supplemental-navigation.js\";\n\nexport {\n Steps,\n type StepsProps,\n} from \"./steps.js\";\n\nexport {\n BottomNavigation,\n getBottomNavigationGridColumn,\n isUnmodifiedPrimaryBottomNavigationClick,\n shouldHideBottomNavigationForKeyboard,\n type BottomNavigationIconRenderProps,\n type BottomNavigationLinkRenderProps,\n type BottomNavigationProps,\n} from \"./bottom-navigation.js\";\n\nexport {\n Badge,\n Card,\n ListRow,\n Tag,\n type BadgeProps,\n type BadgeVariant,\n type CardHeadingLevel,\n type CardProps,\n type ListRowProps,\n type TagProps,\n type TagTone,\n} from \"./display.js\";\n\nexport {\n CounterBadge,\n Icon,\n Image,\n type CounterBadgeProps,\n type IconProps,\n type ImageAdapterProps,\n type ImageProps,\n} from \"./supplemental-display.js\";\n\nexport {\n Accordion,\n Avatar,\n AvatarGroup,\n type AvatarGroupProps,\n DescriptionList,\n Divider,\n List,\n Statistic,\n StatisticGroup,\n Table,\n Timeline,\n type AccordionItem,\n type AccordionProps,\n type AvatarProps,\n type DescriptionListProps,\n type DividerInset,\n type DividerOrientation,\n type DividerProps,\n type ListAppearance,\n type ListProps,\n type StatisticProps,\n type StatisticGroupProps,\n type StatisticTrendMarkRenderProps,\n type ComposeStatisticAccessibilityLabel,\n type TableColumn,\n type TableProps,\n type TableSortDirection,\n type TimelineProps,\n} from \"./advanced-display.js\";\n\nexport {\n UploadItem,\n type UploadItemProps,\n} from \"./upload-item.js\";\n\nexport {\n EmptyState,\n Notice,\n Progress,\n Result,\n Skeleton,\n Spinner,\n type EmptyStateProps,\n type NoticeProps,\n type ProgressProps,\n type ResultProps,\n type SkeletonProps,\n type SpinnerProps,\n} from \"./feedback.js\";\n\nexport {\n Toast,\n ToastProvider,\n useToast,\n type ToastApi,\n type ToastProps,\n type ToastProviderProps,\n} from \"./toast.js\";\n\nexport {\n AlertDialog,\n Dialog,\n Menu,\n Sheet,\n Tooltip,\n type AlertDialogProps,\n type DialogOpenChangeReason,\n type DialogProps,\n type MenuItem,\n type MenuAsyncState,\n type MenuOpenChangeReason,\n type MenuProps,\n type MenuSection,\n type OverlayTrigger,\n type SheetPlacement,\n type SheetProps,\n type SheetSize,\n type TooltipProps,\n} from \"./overlays.js\";\n\nexport { Carousel, type CarouselProps, type CarouselLabels } from \"./carousel.js\";\n\nexport { FloatingActionButton, useFloatingActionButtonScroll, resolveFloatingActionButtonContentClearance, type FloatingActionButtonProps } from \"./floating-action-button.js\";\n\nexport { Calendar, type CalendarProps, type CalendarMonthAction, type CalendarHandle, type CalendarOverflow } from \"./calendar.js\";\n\nexport { Anchor, type AnchorProps } from \"./anchor.js\";\n\nexport { Popover, type PopoverProps, type PopoverContentActions } from \"./popover.js\";\nexport { SidePanel, type SidePanelProps } from \"./side-panel.js\";\nexport { Splitter, type SplitterProps } from \"./splitter.js\";\nexport { Tour, type TourProps } from \"./tour.js\";\nexport { Tree, type TreeProps } from \"./tree.js\";\nexport { TransferList, type TransferListProps, type TransferListLabels } from \"./transfer-list.js\";\nexport { Mentions, type MentionsProps, type MentionCandidate } from \"./mentions.js\";\nexport { CommandPalette, type CommandPaletteProps } from \"./command-palette.js\";\nexport { Agreement, type AgreementProps } from \"./agreement.js\";\nexport { Top, type TopProps } from \"./top.js\";\nexport { Heading, type HeadingProps } from \"./heading.js\";\nexport { TextFormat, type TextFormatProps } from \"./text-formats.js\";\nexport { ClipboardButton, ClipboardIconButton, type ClipboardButtonProps, type ClipboardIconButtonProps } from \"./clipboard.js\";\nexport { ToggleGroup, type ToggleGroupProps } from \"./toggle-group.js\";\nexport { TagsInput, type TagsInputProps } from \"./tags-input.js\";\nexport { SkipNav, type SkipNavProps } from \"./skip-nav.js\";\nexport { BottomInfo, type BottomInfoProps } from \"./bottom-info.js\";\nexport { Sidebar, type SidebarProps } from \"./sidebar.js\";\nexport { DateRangePicker, type DateRangePickerProps } from \"./date-range.js\";\nexport {\n OverlayStackProvider,\n useOverlayStack,\n useDialog,\n useSheet,\n type OverlayStackApi,\n type OverlayStackProviderProps,\n type OverlayHandle,\n} from \"./overlay-stack.js\";\nexport { AuthProviderButton, type AuthProviderButtonProps } from \"./provider-button.js\";\nexport { AuthScreenLayout, AuthScreenHero, AuthScreenFooter, type AuthScreenLayoutProps, type AuthScreenHeroProps, type AuthScreenFooterProps, type AuthScreenPolicyLink } from \"./auth-screen.js\";\nexport { DataTable, type DataTableProps, type DataTableLabels } from \"./data-table.js\";\nexport { Collapsible, CollapsibleMarker, type CollapsibleProps } from \"./collapsible.js\";\nexport { ContextMenu, type ContextMenuItem, type ContextMenuProps } from \"./context-menu.js\";\nexport { Menubar, type MenubarProps } from \"./menubar.js\";\nexport { Asset, AssetGroup, type AssetProps, type AssetGroupProps } from \"./asset.js\";\n\nexport { StatusText, type StatusTextProps } from \"./status-text.js\";\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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","sourcesContent":["export {\n HjmProvider,\n useHjmTheme,\n type HjmBrandPalette,\n type HjmProviderHost,\n type HjmProviderProps,\n} from \"./provider.js\";\n\nexport { TopBar, type TopBarProps } from \"./top-bar.js\";\nexport { BottomCTA, type BottomCTAAction, type BottomCTAProps } from \"./bottom-cta.js\";\n\nexport {\n hjmCompositionStyleKeys,\n type HjmCompositionStyle,\n type HjmCompositionStyleKey,\n type HjmCompositionStyleProp,\n} from \"./composition-style.js\";\n\nexport {\n AspectRatio,\n Container,\n Grid,\n Layout,\n Section,\n Stack,\n Surface,\n Text,\n VisuallyHidden,\n type AspectRatioProps,\n type AspectRatioValue,\n type ContainerGutter,\n type ContainerProps,\n type ContainerSize,\n type GridGap,\n type GridProps,\n type LayoutProps,\n type LayoutSidebar,\n type SectionProps,\n type StackAlign,\n type StackAxis,\n type StackGap,\n type StackJustify,\n type StackProps,\n type SurfacePadding,\n type SurfaceProps,\n type SurfaceRadius,\n type SurfaceTone,\n type TextEmphasis,\n type TextProps,\n type TextTone,\n type VisuallyHiddenProps,\n} from \"./layout.js\";\n\nexport {\n Button,\n IconButton,\n Link,\n type ButtonAlign,\n type ButtonProps,\n type ButtonShape,\n type ButtonSize,\n type ButtonTone,\n type IconButtonProps,\n type IconButtonShape,\n type IconButtonSize,\n type IconButtonTone,\n type LinkRenderProps,\n type LinkProps,\n} from \"./actions.js\";\n\nexport {\n Field,\n OtpField,\n PasswordField,\n SearchField,\n TextArea,\n TextField,\n type FieldControlProps,\n type FieldProps,\n type OtpFieldProps,\n type PasswordFieldProps,\n type PasswordFieldToggleRenderProps,\n type SearchFieldProps,\n type SearchFieldIconRenderProps,\n type TextAreaProps,\n type TextFieldProps,\n} from \"./forms.js\";\n\nexport {\n Combobox,\n Form,\n type ComboboxItem,\n type ComboboxOpenChangeReason,\n type ComboboxProps,\n type FormProps,\n type FormSubmitHandler,\n NativeSelect,\n type NativeSelectProps,\n type SelectOption,\n} from \"./advanced-forms.js\";\n\nexport {\n Select,\n type SelectItem,\n type SelectLeadingRenderProps,\n type SelectOptionLeadingRenderProps,\n type SelectProps,\n type SelectSection,\n} from \"./select.js\";\n\nexport {\n NumberField,\n type NumberFieldProps,\n} from \"./number-field.js\";\n\nexport {\n Slider,\n type SliderProps,\n} from \"./slider.js\";\n\nexport {\n DatePicker,\n type DatePickerMonthAction,\n type DatePickerProps,\n} from \"./date-picker.js\";\n\nexport {\n FilePicker,\n type FilePickerProps,\n} from \"./file-picker.js\";\n\nexport {\n Checkbox,\n CheckboxGroup,\n Chip,\n Radio,\n RadioGroup,\n SegmentedControl,\n Switch,\n type CheckboxProps,\n type CheckboxGroupItem,\n type CheckboxGroupProps,\n type ChipProps,\n type ChoiceLeadingRenderProps,\n type RadioProps,\n type RadioGroupItem,\n type RadioGroupProps,\n type SegmentedControlItem,\n type SegmentedControlProps,\n type SwitchProps,\n type SwitchSize,\n} from \"./selection.js\";\n\nexport {\n TabPanel,\n Tabs,\n getDynamicTabPanelId,\n getTabId,\n getTabPanelId,\n type TabLeadingRenderProps,\n type TabItem,\n type TabPanelProps,\n type TabsProps,\n} from \"./navigation.js\";\n\nexport { Breadcrumb, type BreadcrumbProps } from \"./breadcrumb.js\";\nexport { Pagination, type PaginationProps } from \"./pagination.js\";\n\nexport {\n LoadMore,\n type LoadMoreProps,\n} from \"./supplemental-navigation.js\";\n\nexport {\n Steps,\n type StepsProps,\n} from \"./steps.js\";\n\nexport {\n BottomNavigation,\n BottomNavigationInsetProvider,\n useBottomNavigationInset,\n getBottomNavigationGridColumn,\n isUnmodifiedPrimaryBottomNavigationClick,\n shouldHideBottomNavigationForKeyboard,\n type BottomNavigationIconRenderProps,\n type BottomNavigationInsetProviderProps,\n type BottomNavigationLinkRenderProps,\n type BottomNavigationProps,\n} from \"./bottom-navigation.js\";\n\nexport {\n Badge,\n Card,\n ListRow,\n Tag,\n type BadgeProps,\n type BadgeVariant,\n type CardHeadingLevel,\n type CardProps,\n type ListRowProps,\n type TagProps,\n type TagTone,\n} from \"./display.js\";\n\nexport {\n CounterBadge,\n Icon,\n Image,\n type CounterBadgeProps,\n type IconProps,\n type ImageAdapterProps,\n type ImageProps,\n} from \"./supplemental-display.js\";\n\nexport {\n Accordion,\n Avatar,\n AvatarGroup,\n type AvatarGroupProps,\n DescriptionList,\n Divider,\n List,\n Statistic,\n StatisticGroup,\n Table,\n Timeline,\n type AccordionItem,\n type AccordionProps,\n type AvatarProps,\n type DescriptionListProps,\n type DividerInset,\n type DividerOrientation,\n type DividerProps,\n type ListAppearance,\n type ListProps,\n type StatisticProps,\n type StatisticGroupProps,\n type StatisticTrendMarkRenderProps,\n type ComposeStatisticAccessibilityLabel,\n type TableColumn,\n type TableProps,\n type TableSortDirection,\n type TimelineProps,\n} from \"./advanced-display.js\";\n\nexport {\n UploadItem,\n type UploadItemProps,\n} from \"./upload-item.js\";\n\nexport {\n EmptyState,\n Notice,\n Progress,\n Result,\n Skeleton,\n Spinner,\n type EmptyStateProps,\n type NoticeProps,\n type ProgressProps,\n type ResultProps,\n type SkeletonProps,\n type SpinnerProps,\n} from \"./feedback.js\";\n\nexport {\n Toast,\n ToastProvider,\n useToast,\n type ToastApi,\n type ToastProps,\n type ToastProviderProps,\n} from \"./toast.js\";\n\nexport {\n AlertDialog,\n Dialog,\n ImmersiveOverlay,\n Menu,\n Sheet,\n Tooltip,\n type AlertDialogProps,\n type DialogOpenChangeReason,\n type DialogProps,\n type ImmersiveOverlayOpenChangeReason,\n type ImmersiveOverlayProps,\n type MenuItem,\n type MenuAsyncState,\n type MenuOpenChangeReason,\n type MenuProps,\n type MenuSection,\n type OverlayTrigger,\n type SheetPlacement,\n type SheetProps,\n type SheetSize,\n type TooltipProps,\n} from \"./overlays.js\";\n\nexport { Carousel, PageIndicator, type CarouselProps, type CarouselLabels, type PageIndicatorProps } from \"./carousel.js\";\n\nexport { FloatingActionButton, useFloatingActionButtonScroll, resolveFloatingActionButtonContentClearance, type FloatingActionButtonProps } from \"./floating-action-button.js\";\n\nexport { Calendar, type CalendarProps, type CalendarMonthAction, type CalendarHandle, type CalendarOverflow } from \"./calendar.js\";\n\nexport { Anchor, type AnchorProps } from \"./anchor.js\";\n\nexport { Popover, type PopoverProps, type PopoverContentActions } from \"./popover.js\";\nexport { SidePanel, type SidePanelProps } from \"./side-panel.js\";\nexport { Splitter, type SplitterProps } from \"./splitter.js\";\nexport { Tour, type TourProps } from \"./tour.js\";\nexport { Tree, type TreeProps } from \"./tree.js\";\nexport { TransferList, type TransferListProps, type TransferListLabels } from \"./transfer-list.js\";\nexport { Mentions, type MentionsProps, type MentionCandidate } from \"./mentions.js\";\nexport { CommandPalette, type CommandPaletteProps } from \"./command-palette.js\";\nexport { Agreement, type AgreementProps } from \"./agreement.js\";\nexport { Top, type TopProps } from \"./top.js\";\nexport { Heading, type HeadingProps } from \"./heading.js\";\nexport { TextFormat, type TextFormatProps } from \"./text-formats.js\";\nexport { ClipboardButton, ClipboardIconButton, type ClipboardButtonProps, type ClipboardIconButtonProps } from \"./clipboard.js\";\nexport { ToggleGroup, type ToggleGroupProps } from \"./toggle-group.js\";\nexport { TagsInput, type TagsInputProps } from \"./tags-input.js\";\nexport { SkipNav, type SkipNavProps } from \"./skip-nav.js\";\nexport { BottomInfo, type BottomInfoProps } from \"./bottom-info.js\";\nexport { Sidebar, type SidebarProps } from \"./sidebar.js\";\nexport { DateRangePicker, type DateRangePickerProps } from \"./date-range.js\";\nexport {\n OverlayStackProvider,\n useOverlayStack,\n useDialog,\n useSheet,\n type OverlayStackApi,\n type OverlayStackProviderProps,\n type OverlayHandle,\n} from \"./overlay-stack.js\";\nexport { AuthProviderButton, type AuthProviderButtonProps } from \"./provider-button.js\";\nexport { AuthScreenLayout, AuthScreenHero, AuthScreenFooter, type AuthScreenLayoutProps, type AuthScreenHeroProps, type AuthScreenFooterProps, type AuthScreenPolicyLink } from \"./auth-screen.js\";\nexport { DataTable, type DataTableProps, type DataTableLabels } from \"./data-table.js\";\nexport { Collapsible, CollapsibleMarker, type CollapsibleProps } from \"./collapsible.js\";\nexport { ContextMenu, type ContextMenuItem, type ContextMenuProps } from \"./context-menu.js\";\nexport { Menubar, type MenubarProps } from \"./menubar.js\";\nexport { Asset, AssetGroup, type AssetProps, type AssetGroupProps } from \"./asset.js\";\n\nexport { StatusText, type StatusTextProps } from \"./status-text.js\";\n"]}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import type { ReactNode } from "react";
|
|
2
|
+
/**
|
|
3
|
+
* One error contract for every Field-based control (Field, TextField, TextArea, Select, NumberField,
|
|
4
|
+
* CheckboxGroup, RadioGroup and the composers built on them).
|
|
5
|
+
*
|
|
6
|
+
* A live region only announces changes to content it already contains, so the region is mounted before
|
|
7
|
+
* the first error and stays mounted: each new or changed error is announced assertively, matching
|
|
8
|
+
* Native's FieldMessage (Android live region, iOS announcement). The region carries the error id, so
|
|
9
|
+
* `aria-describedby` on the control reads the same node when it is focused.
|
|
10
|
+
*
|
|
11
|
+
* The visible copy is hidden from assistive technology: before 1.31 MessageComposer added its own hidden
|
|
12
|
+
* alert next to the visible error and browse mode read the text twice (2026-10-18). The region is
|
|
13
|
+
* visually hidden and absolutely positioned, so it adds no row or gap to the field grid.
|
|
14
|
+
*/
|
|
15
|
+
export declare function FieldError({ id, error }: Readonly<{
|
|
16
|
+
id?: string | undefined;
|
|
17
|
+
error?: ReactNode;
|
|
18
|
+
}>): import("react").JSX.Element;
|
|
19
|
+
//# sourceMappingURL=field-error.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"field-error.d.ts","sourceRoot":"","sources":["../../src/internal/field-error.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;;;;;;;;;;;GAYG;AACH,wBAAgB,UAAU,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,QAAQ,CAAC;IAAE,EAAE,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAA;CAAE,CAAC,+BAUjG"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
/**
|
|
3
|
+
* One error contract for every Field-based control (Field, TextField, TextArea, Select, NumberField,
|
|
4
|
+
* CheckboxGroup, RadioGroup and the composers built on them).
|
|
5
|
+
*
|
|
6
|
+
* A live region only announces changes to content it already contains, so the region is mounted before
|
|
7
|
+
* the first error and stays mounted: each new or changed error is announced assertively, matching
|
|
8
|
+
* Native's FieldMessage (Android live region, iOS announcement). The region carries the error id, so
|
|
9
|
+
* `aria-describedby` on the control reads the same node when it is focused.
|
|
10
|
+
*
|
|
11
|
+
* The visible copy is hidden from assistive technology: before 1.31 MessageComposer added its own hidden
|
|
12
|
+
* alert next to the visible error and browse mode read the text twice (2026-10-18). The region is
|
|
13
|
+
* visually hidden and absolutely positioned, so it adds no row or gap to the field grid.
|
|
14
|
+
*/
|
|
15
|
+
export function FieldError({ id, error }) {
|
|
16
|
+
const hasError = error !== undefined && error !== null && error !== false && error !== "";
|
|
17
|
+
return (_jsxs(_Fragment, { children: [hasError ? _jsx("div", { className: "hjm-field__error", "aria-hidden": "true", children: error }) : null, _jsx("span", { ...(id === undefined ? {} : { id }), role: "alert", className: "hjm-visually-hidden", "data-hjm-field-error": "", children: hasError ? error : null })] }));
|
|
18
|
+
}
|
|
19
|
+
//# sourceMappingURL=field-error.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"field-error.js","sourceRoot":"","sources":["../../src/internal/field-error.tsx"],"names":[],"mappings":";AAEA;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,UAAU,CAAC,EAAE,EAAE,EAAE,KAAK,EAA4D;IAChG,MAAM,QAAQ,GAAG,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,KAAK,IAAI,KAAK,KAAK,EAAE,CAAC;IAC1F,OAAO,CACL,8BACG,QAAQ,CAAC,CAAC,CAAC,cAAK,SAAS,EAAC,kBAAkB,iBAAa,MAAM,YAAE,KAAK,GAAO,CAAC,CAAC,CAAC,IAAI,EACrF,kBAAU,CAAC,EAAE,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,qBAAqB,0BAAsB,EAAE,YAC7G,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,GACnB,IACN,CACJ,CAAC;AACJ,CAAC","sourcesContent":["import type { ReactNode } from \"react\";\n\n/**\n * One error contract for every Field-based control (Field, TextField, TextArea, Select, NumberField,\n * CheckboxGroup, RadioGroup and the composers built on them).\n *\n * A live region only announces changes to content it already contains, so the region is mounted before\n * the first error and stays mounted: each new or changed error is announced assertively, matching\n * Native's FieldMessage (Android live region, iOS announcement). The region carries the error id, so\n * `aria-describedby` on the control reads the same node when it is focused.\n *\n * The visible copy is hidden from assistive technology: before 1.31 MessageComposer added its own hidden\n * alert next to the visible error and browse mode read the text twice (2026-10-18). The region is\n * visually hidden and absolutely positioned, so it adds no row or gap to the field grid.\n */\nexport function FieldError({ id, error }: Readonly<{ id?: string | undefined; error?: ReactNode }>) {\n const hasError = error !== undefined && error !== null && error !== false && error !== \"\";\n return (\n <>\n {hasError ? <div className=\"hjm-field__error\" aria-hidden=\"true\">{error}</div> : null}\n <span {...(id === undefined ? {} : { id })} role=\"alert\" className=\"hjm-visually-hidden\" data-hjm-field-error=\"\">\n {hasError ? error : null}\n </span>\n </>\n );\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"initial-focus.d.ts","sourceRoot":"","sources":["../../src/internal/initial-focus.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6F,KAAK,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AAC3K,OAAO,EAA0E,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC/H,OAAO,EAAoC,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AAEjF,KAAK,KAAK,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,OAAO,GAAG,SAAS,CAAC;IAAC,OAAO,IAAI,WAAW,GAAG,IAAI,CAAC;IAAC,SAAS,IAAI,OAAO,CAAA;CAAE,CAAC;AACrH,KAAK,QAAQ,GAAG;IAAE,SAAS,IAAI,MAAM,CAAC;IAAC,QAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,GAAG,MAAM,IAAI,CAAA;CAAE,CAAC;AAC9F,qGAAqG;AACrG,MAAM,MAAM,aAAa,GAAG;IAAE,OAAO,EAAE,WAAW,GAAG,IAAI,CAAA;CAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"initial-focus.d.ts","sourceRoot":"","sources":["../../src/internal/initial-focus.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6F,KAAK,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AAC3K,OAAO,EAA0E,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC/H,OAAO,EAAoC,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AAEjF,KAAK,KAAK,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,OAAO,GAAG,SAAS,CAAC;IAAC,OAAO,IAAI,WAAW,GAAG,IAAI,CAAC;IAAC,SAAS,IAAI,OAAO,CAAA;CAAE,CAAC;AACrH,KAAK,QAAQ,GAAG;IAAE,SAAS,IAAI,MAAM,CAAC;IAAC,QAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,GAAG,MAAM,IAAI,CAAA;CAAE,CAAC;AAC9F,qGAAqG;AACrG,MAAM,MAAM,aAAa,GAAG;IAAE,OAAO,EAAE,WAAW,GAAG,IAAI,CAAA;CAAE,CAAC;AAkC5D,MAAM,MAAM,uBAAuB,GAAG,QAAQ,CAAC;IAC7C,QAAQ,EAAE,QAAQ,CAAC;IACnB,KAAK,EAAE,aAAa,GAAG,IAAI,CAAC;IAC5B;;;OAGG;IACH,KAAK,CAAC,QAAQ,EAAE,OAAO,GAAG,WAAW,GAAG,IAAI,CAAC;CAC9C,CAAC,CAAC;AAEH;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,EAAE,IAAI,EAAE,MAAa,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;IAAE,IAAI,EAAE,gBAAgB,CAAC;IAAC,MAAM,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,aAAa,CAAA;CAAE,GAAG,uBAAuB,CAyF3K;AAED,wBAAgB,oBAAoB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;IAAE,KAAK,EAAE,uBAAuB,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAEhH;AAED,iHAAiH;AACjH,wBAAgB,iBAAiB,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAAE,IAAI,EAAE,gBAAgB,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAGpG;AAED,8GAA8G;AAC9G,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,UAAU,EAAE,OAAO,GAAG,SAAS,QAe5G"}
|
|
@@ -10,6 +10,20 @@ import { getTopModal, subscribeModalClose } from "../modal.js";
|
|
|
10
10
|
const InitialFocusContext = createContext(null);
|
|
11
11
|
/** Layer of the enclosing HJM overlay; null on the page itself. A ScreenLayout inside a sheet uses the sheet's. */
|
|
12
12
|
const ModalLayerContext = createContext(null);
|
|
13
|
+
/**
|
|
14
|
+
* Screen scopes rendered inside an HJM overlay, keyed by that overlay's layer. Their fields register with the screen,
|
|
15
|
+
* not the overlay, so the overlay's activation asks them for the entry field instead of focusing its first control
|
|
16
|
+
* over them (BurnTok search: a ScreenLayout in a Sheet left focus on the close button, 2026-10-18).
|
|
17
|
+
*/
|
|
18
|
+
const nestedScopes = new WeakMap();
|
|
19
|
+
/**
|
|
20
|
+
* Product modals (not on the HJM stack) layered above the scope. A product modal that contains the scope's own fields
|
|
21
|
+
* wraps the screen rather than covering it, so it does not block (BurnTok search overlay, 2026-10-18).
|
|
22
|
+
*/
|
|
23
|
+
function productModalAbove(fields) {
|
|
24
|
+
return [...document.querySelectorAll('[aria-modal="true"], dialog[open]')]
|
|
25
|
+
.some(modal => !fields.some(field => modal.contains(field)));
|
|
26
|
+
}
|
|
13
27
|
function isEditable(element) {
|
|
14
28
|
return element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement
|
|
15
29
|
|| (element instanceof HTMLElement && element.isContentEditable);
|
|
@@ -28,11 +42,18 @@ export function useInitialFocusScope({ mode, active = true, layer: ownLayer }) {
|
|
|
28
42
|
const scope = useMemo(() => {
|
|
29
43
|
const s = state.current;
|
|
30
44
|
const blocked = () => {
|
|
45
|
+
const own = layer?.current ?? null;
|
|
46
|
+
// Inside an HJM overlay that is not on the stack yet: its activation runs this scope's entry (`nestedScopes`).
|
|
47
|
+
if (layer !== null && own === null)
|
|
48
|
+
return true;
|
|
31
49
|
const top = getTopModal();
|
|
32
50
|
if (top)
|
|
33
|
-
return top !==
|
|
34
|
-
// A product's own modal
|
|
35
|
-
|
|
51
|
+
return top !== own;
|
|
52
|
+
// A product's own modal above the page still covers it; overlay content is portaled outside product markup.
|
|
53
|
+
if (layer !== null)
|
|
54
|
+
return false;
|
|
55
|
+
const fields = [...s.entries].map(entry => entry.element()).filter((element) => element !== null);
|
|
56
|
+
return productModalAbove(fields);
|
|
36
57
|
};
|
|
37
58
|
const dispatch = (event) => {
|
|
38
59
|
const candidates = [...s.entries].map(entry => ({ entry, order: entry.order, preference: entry.preference, focusable: entry.focusable() }));
|
|
@@ -67,17 +88,29 @@ export function useInitialFocusScope({ mode, active = true, layer: ownLayer }) {
|
|
|
67
88
|
return () => { s.entries.delete(entry); s.fresh.delete(entry); };
|
|
68
89
|
},
|
|
69
90
|
};
|
|
91
|
+
const settle = () => { s.phase = "settled"; };
|
|
70
92
|
const enter = (explicit) => {
|
|
71
93
|
s.fresh.clear();
|
|
72
94
|
dispatch({ kind: "activate" });
|
|
95
|
+
const nested = overlay && layer ? [...(nestedScopes.get(layer) ?? [])] : [];
|
|
73
96
|
if (explicit) {
|
|
74
|
-
|
|
97
|
+
settle();
|
|
98
|
+
for (const scope of nested)
|
|
99
|
+
scope.settle();
|
|
75
100
|
return null;
|
|
76
101
|
}
|
|
77
|
-
|
|
102
|
+
const own = dispatch({ kind: "enter" });
|
|
103
|
+
if (own)
|
|
104
|
+
return own;
|
|
105
|
+
for (const scope of nested) {
|
|
106
|
+
const target = scope.enter();
|
|
107
|
+
if (target)
|
|
108
|
+
return target;
|
|
109
|
+
}
|
|
110
|
+
return null;
|
|
78
111
|
};
|
|
79
|
-
return { registry, layer, dispatch, focus, enter };
|
|
80
|
-
}, [layer]);
|
|
112
|
+
return { registry, layer, dispatch, focus, enter, settle };
|
|
113
|
+
}, [layer, overlay]);
|
|
81
114
|
useEffect(() => {
|
|
82
115
|
if (!active) {
|
|
83
116
|
scope.dispatch({ kind: "deactivate" });
|
|
@@ -89,6 +122,14 @@ export function useInitialFocusScope({ mode, active = true, layer: ownLayer }) {
|
|
|
89
122
|
if (!overlay)
|
|
90
123
|
queueMicrotask(() => { if (!cancelled)
|
|
91
124
|
scope.focus(scope.enter(false)); });
|
|
125
|
+
// A screen inside an overlay that activates later enters when the overlay does (see `enter`).
|
|
126
|
+
let nested;
|
|
127
|
+
const nestedEntry = { enter: () => scope.enter(false), settle: scope.settle };
|
|
128
|
+
if (!overlay && scope.layer) {
|
|
129
|
+
nested = nestedScopes.get(scope.layer) ?? new Set();
|
|
130
|
+
nestedScopes.set(scope.layer, nested);
|
|
131
|
+
nested.add(nestedEntry);
|
|
132
|
+
}
|
|
92
133
|
const interact = () => { scope.dispatch({ kind: "interact" }); };
|
|
93
134
|
const events = ["pointerdown", "keydown", "wheel", "touchstart"];
|
|
94
135
|
for (const type of events)
|
|
@@ -97,6 +138,7 @@ export function useInitialFocusScope({ mode, active = true, layer: ownLayer }) {
|
|
|
97
138
|
const unsubscribe = subscribeModalClose(() => scope.focus(scope.dispatch({ kind: "unblock" })));
|
|
98
139
|
return () => {
|
|
99
140
|
cancelled = true;
|
|
141
|
+
nested?.delete(nestedEntry);
|
|
100
142
|
for (const type of events)
|
|
101
143
|
document.removeEventListener(type, interact, true);
|
|
102
144
|
unsubscribe();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"initial-focus.js","sourceRoot":"","sources":["../../src/internal/initial-focus.tsx"],"names":[],"mappings":"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","sourcesContent":["import { resolveEntryFocus, type EntryFocusEvent, type EntryFocusPhase, type InitialFocusCandidate, type InitialFocusMode } from \"@hjmds/design-contracts/screen-patterns\";\nimport { createContext, useContext, useEffect, useLayoutEffect, useMemo, useRef, type ReactNode, type RefObject } from \"react\";\nimport { getTopModal, subscribeModalClose, type ActiveModal } from \"../modal.js\";\n\ntype Entry = { order: number; preference: boolean | undefined; element(): HTMLElement | null; focusable(): boolean };\ntype Registry = { nextOrder(): number; register(entry: Entry, mounted: boolean): () => void };\n/** The overlay's own entry on the shared modal stack while it is active (set by `useModalFocus`). */\nexport type ModalLayerRef = { current: ActiveModal | null };\n\n/**\n * Nearest screen/overlay scope that chooses the field focused on entry (rules: screen-patterns `resolveEntryFocus`,\n * shared with Native). Fields register by context, the same model as Native, instead of the scope querying the DOM; a\n * scope with mode \"none\" still owns its fields so they never reach an outer scope.\n */\nconst InitialFocusContext = createContext<Registry | null>(null);\n/** Layer of the enclosing HJM overlay; null on the page itself. A ScreenLayout inside a sheet uses the sheet's. */\nconst ModalLayerContext = createContext<ModalLayerRef | null>(null);\n\nfunction isEditable(element: Element | null): boolean {\n return element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement\n || (element instanceof HTMLElement && element.isContentEditable);\n}\n\ntype Candidate = InitialFocusCandidate & { entry: Entry };\nexport type InitialFocusScopeHandle = Readonly<{\n registry: Registry;\n layer: ModalLayerRef | null;\n /**\n * Overlays only: runs entry when the modal activates and returns the field for `useModalFocus` to focus. `explicit`\n * means the overlay already has an `initialFocusRef`, so entry settles without choosing a field.\n */\n enter(explicit: boolean): HTMLElement | null;\n}>;\n\n/**\n * Screen scopes enter on mount (Web has no enter transition to wait for); overlays pass `layer` and enter through\n * `useModalFocus`. User pointer, key, wheel or touch input while no modal is above the scope ends the entry window.\n */\nexport function useInitialFocusScope({ mode, active = true, layer: ownLayer }: { mode: InitialFocusMode; active?: boolean; layer?: ModalLayerRef }): InitialFocusScopeHandle {\n const inherited = useContext(ModalLayerContext);\n const layer = ownLayer ?? inherited;\n const overlay = ownLayer !== undefined;\n const modeRef = useRef(mode); modeRef.current = mode;\n const state = useRef({ phase: \"inactive\" as EntryFocusPhase, entries: new Set<Entry>(), fresh: new Set<Entry>(), counter: 0, flushQueued: false });\n\n const scope = useMemo(() => {\n const s = state.current;\n const blocked = () => {\n const top = getTopModal();\n if (top) return top !== (layer?.current ?? null);\n // A product's own modal (not on the HJM stack) still covers the page.\n return layer === null && document.querySelector('[aria-modal=\"true\"], dialog[open]') !== null;\n };\n const dispatch = (event: EntryFocusEvent<Candidate> | { kind: \"register\"; entry: Entry }): HTMLElement | null => {\n const candidates: Candidate[] = [...s.entries].map(entry => ({ entry, order: entry.order, preference: entry.preference, focusable: entry.focusable() }));\n const resolved = event.kind === \"register\" && \"entry\" in event\n ? { kind: \"register\" as const, field: candidates.find(candidate => candidate.entry === event.entry)! }\n : event as EntryFocusEvent<Candidate>;\n const result = resolveEntryFocus(s.phase, resolved, { mode: modeRef.current, candidates, blocked: blocked(), textEntryFocused: isEditable(document.activeElement) });\n s.phase = result.phase;\n return result.target?.entry.element() ?? null;\n };\n const focus = (target: HTMLElement | null) => target?.focus({ preventScroll: true });\n // Fields mounting in one commit are judged together.\n const flush = () => {\n s.flushQueued = false;\n const fresh = [...s.fresh].filter(entry => s.entries.has(entry)).sort((a, b) => a.order - b.order);\n s.fresh.clear();\n const field = fresh.find(entry => entry.preference === true) ?? fresh[0];\n if (field) focus(dispatch({ kind: \"register\", entry: field }));\n };\n const registry: Registry = {\n nextOrder: () => s.counter++,\n register(entry, mounted) {\n s.entries.add(entry);\n if (mounted) { s.fresh.add(entry); if (!s.flushQueued) { s.flushQueued = true; queueMicrotask(flush); } }\n return () => { s.entries.delete(entry); s.fresh.delete(entry); };\n },\n };\n const enter = (explicit: boolean) => {\n s.fresh.clear();\n dispatch({ kind: \"activate\" });\n if (explicit) { s.phase = \"settled\"; return null; }\n return dispatch({ kind: \"enter\" });\n };\n return { registry, layer, dispatch, focus, enter };\n }, [layer]);\n\n useEffect(() => {\n if (!active) { scope.dispatch({ kind: \"deactivate\" }); return undefined; }\n // After every effect of this commit, so a modal opening in the same commit (an app-root consent dialog) is\n // already on the stack and blocks entry instead of taking focus away and handing it back later.\n let cancelled = false;\n if (!overlay) queueMicrotask(() => { if (!cancelled) scope.focus(scope.enter(false)); });\n const interact = () => { scope.dispatch({ kind: \"interact\" }); };\n const events = [\"pointerdown\", \"keydown\", \"wheel\", \"touchstart\"] as const;\n for (const type of events) document.addEventListener(type, interact, true);\n // A modal above closed (after its return focus ran): retry a pending entry.\n const unsubscribe = subscribeModalClose(() => scope.focus(scope.dispatch({ kind: \"unblock\" })));\n return () => {\n cancelled = true;\n for (const type of events) document.removeEventListener(type, interact, true);\n unsubscribe();\n scope.dispatch({ kind: \"deactivate\" });\n };\n }, [active, overlay, scope]);\n\n return useMemo(() => ({ registry: scope.registry, layer: scope.layer, enter: scope.enter }), [scope]);\n}\n\nexport function InitialFocusProvider({ scope, children }: { scope: InitialFocusScopeHandle; children: ReactNode }) {\n return <ModalLayerContext.Provider value={scope.layer}><InitialFocusContext.Provider value={scope.registry}>{children}</InitialFocusContext.Provider></ModalLayerContext.Provider>;\n}\n\n/** Screen scope: focuses the chosen field on mount, never over a field the user is in or under an open modal. */\nexport function InitialFocusScope({ mode, children }: { mode: InitialFocusMode; children: ReactNode }) {\n const scope = useInitialFocusScope({ mode });\n return <InitialFocusProvider scope={scope}>{children}</InitialFocusProvider>;\n}\n\n/** Registers a text field with the nearest scope. `preference` is the field's public `initialFocusTarget`. */\nexport function useInitialFocusTarget(element: RefObject<HTMLElement | null>, preference: boolean | undefined) {\n const registry = useContext(InitialFocusContext);\n // Tree order is fixed at first registration, so changing `preference` later does not move the field to the end.\n const order = useRef<number | null>(null);\n useLayoutEffect(() => {\n if (!registry) return undefined;\n // Only the first registration of this field instance counts as \"appeared\"; a later `preference` change does not.\n const mounted = order.current === null;\n order.current ??= registry.nextOrder();\n return registry.register({\n order: order.current, preference, element: () => element.current,\n // Disabled and read-only fields are never focused on entry.\n focusable: () => { const node = element.current as (HTMLInputElement | HTMLTextAreaElement | null); return !!node && !node.disabled && !node.readOnly; },\n }, mounted);\n }, [registry, preference, element]);\n}\n"]}
|
|
1
|
+
{"version":3,"file":"initial-focus.js","sourceRoot":"","sources":["../../src/internal/initial-focus.tsx"],"names":[],"mappings":"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","sourcesContent":["import { resolveEntryFocus, type EntryFocusEvent, type EntryFocusPhase, type InitialFocusCandidate, type InitialFocusMode } from \"@hjmds/design-contracts/screen-patterns\";\nimport { createContext, useContext, useEffect, useLayoutEffect, useMemo, useRef, type ReactNode, type RefObject } from \"react\";\nimport { getTopModal, subscribeModalClose, type ActiveModal } from \"../modal.js\";\n\ntype Entry = { order: number; preference: boolean | undefined; element(): HTMLElement | null; focusable(): boolean };\ntype Registry = { nextOrder(): number; register(entry: Entry, mounted: boolean): () => void };\n/** The overlay's own entry on the shared modal stack while it is active (set by `useModalFocus`). */\nexport type ModalLayerRef = { current: ActiveModal | null };\n\n/**\n * Nearest screen/overlay scope that chooses the field focused on entry (rules: screen-patterns `resolveEntryFocus`,\n * shared with Native). Fields register by context, the same model as Native, instead of the scope querying the DOM; a\n * scope with mode \"none\" still owns its fields so they never reach an outer scope.\n */\nconst InitialFocusContext = createContext<Registry | null>(null);\n/** Layer of the enclosing HJM overlay; null on the page itself. A ScreenLayout inside a sheet uses the sheet's. */\nconst ModalLayerContext = createContext<ModalLayerRef | null>(null);\n\ntype NestedScope = { enter(): HTMLElement | null; settle(): void };\n/**\n * Screen scopes rendered inside an HJM overlay, keyed by that overlay's layer. Their fields register with the screen,\n * not the overlay, so the overlay's activation asks them for the entry field instead of focusing its first control\n * over them (BurnTok search: a ScreenLayout in a Sheet left focus on the close button, 2026-10-18).\n */\nconst nestedScopes = new WeakMap<ModalLayerRef, Set<NestedScope>>();\n\n/**\n * Product modals (not on the HJM stack) layered above the scope. A product modal that contains the scope's own fields\n * wraps the screen rather than covering it, so it does not block (BurnTok search overlay, 2026-10-18).\n */\nfunction productModalAbove(fields: readonly HTMLElement[]): boolean {\n return [...document.querySelectorAll('[aria-modal=\"true\"], dialog[open]')]\n .some(modal => !fields.some(field => modal.contains(field)));\n}\n\nfunction isEditable(element: Element | null): boolean {\n return element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement\n || (element instanceof HTMLElement && element.isContentEditable);\n}\n\ntype Candidate = InitialFocusCandidate & { entry: Entry };\nexport type InitialFocusScopeHandle = Readonly<{\n registry: Registry;\n layer: ModalLayerRef | null;\n /**\n * Overlays only: runs entry when the modal activates and returns the field for `useModalFocus` to focus. `explicit`\n * means the overlay already has an `initialFocusRef`, so entry settles without choosing a field.\n */\n enter(explicit: boolean): HTMLElement | null;\n}>;\n\n/**\n * Screen scopes enter on mount (Web has no enter transition to wait for); overlays pass `layer` and enter through\n * `useModalFocus`. User pointer, key, wheel or touch input while no modal is above the scope ends the entry window.\n */\nexport function useInitialFocusScope({ mode, active = true, layer: ownLayer }: { mode: InitialFocusMode; active?: boolean; layer?: ModalLayerRef }): InitialFocusScopeHandle {\n const inherited = useContext(ModalLayerContext);\n const layer = ownLayer ?? inherited;\n const overlay = ownLayer !== undefined;\n const modeRef = useRef(mode); modeRef.current = mode;\n const state = useRef({ phase: \"inactive\" as EntryFocusPhase, entries: new Set<Entry>(), fresh: new Set<Entry>(), counter: 0, flushQueued: false });\n\n const scope = useMemo(() => {\n const s = state.current;\n const blocked = () => {\n const own = layer?.current ?? null;\n // Inside an HJM overlay that is not on the stack yet: its activation runs this scope's entry (`nestedScopes`).\n if (layer !== null && own === null) return true;\n const top = getTopModal();\n if (top) return top !== own;\n // A product's own modal above the page still covers it; overlay content is portaled outside product markup.\n if (layer !== null) return false;\n const fields = [...s.entries].map(entry => entry.element()).filter((element): element is HTMLElement => element !== null);\n return productModalAbove(fields);\n };\n const dispatch = (event: EntryFocusEvent<Candidate> | { kind: \"register\"; entry: Entry }): HTMLElement | null => {\n const candidates: Candidate[] = [...s.entries].map(entry => ({ entry, order: entry.order, preference: entry.preference, focusable: entry.focusable() }));\n const resolved = event.kind === \"register\" && \"entry\" in event\n ? { kind: \"register\" as const, field: candidates.find(candidate => candidate.entry === event.entry)! }\n : event as EntryFocusEvent<Candidate>;\n const result = resolveEntryFocus(s.phase, resolved, { mode: modeRef.current, candidates, blocked: blocked(), textEntryFocused: isEditable(document.activeElement) });\n s.phase = result.phase;\n return result.target?.entry.element() ?? null;\n };\n const focus = (target: HTMLElement | null) => target?.focus({ preventScroll: true });\n // Fields mounting in one commit are judged together.\n const flush = () => {\n s.flushQueued = false;\n const fresh = [...s.fresh].filter(entry => s.entries.has(entry)).sort((a, b) => a.order - b.order);\n s.fresh.clear();\n const field = fresh.find(entry => entry.preference === true) ?? fresh[0];\n if (field) focus(dispatch({ kind: \"register\", entry: field }));\n };\n const registry: Registry = {\n nextOrder: () => s.counter++,\n register(entry, mounted) {\n s.entries.add(entry);\n if (mounted) { s.fresh.add(entry); if (!s.flushQueued) { s.flushQueued = true; queueMicrotask(flush); } }\n return () => { s.entries.delete(entry); s.fresh.delete(entry); };\n },\n };\n const settle = () => { s.phase = \"settled\"; };\n const enter = (explicit: boolean) => {\n s.fresh.clear();\n dispatch({ kind: \"activate\" });\n const nested = overlay && layer ? [...(nestedScopes.get(layer) ?? [])] : [];\n if (explicit) { settle(); for (const scope of nested) scope.settle(); return null; }\n const own = dispatch({ kind: \"enter\" });\n if (own) return own;\n for (const scope of nested) { const target = scope.enter(); if (target) return target; }\n return null;\n };\n return { registry, layer, dispatch, focus, enter, settle };\n }, [layer, overlay]);\n\n useEffect(() => {\n if (!active) { scope.dispatch({ kind: \"deactivate\" }); return undefined; }\n // After every effect of this commit, so a modal opening in the same commit (an app-root consent dialog) is\n // already on the stack and blocks entry instead of taking focus away and handing it back later.\n let cancelled = false;\n if (!overlay) queueMicrotask(() => { if (!cancelled) scope.focus(scope.enter(false)); });\n // A screen inside an overlay that activates later enters when the overlay does (see `enter`).\n let nested: Set<NestedScope> | undefined;\n const nestedEntry: NestedScope = { enter: () => scope.enter(false), settle: scope.settle };\n if (!overlay && scope.layer) {\n nested = nestedScopes.get(scope.layer) ?? new Set();\n nestedScopes.set(scope.layer, nested);\n nested.add(nestedEntry);\n }\n const interact = () => { scope.dispatch({ kind: \"interact\" }); };\n const events = [\"pointerdown\", \"keydown\", \"wheel\", \"touchstart\"] as const;\n for (const type of events) document.addEventListener(type, interact, true);\n // A modal above closed (after its return focus ran): retry a pending entry.\n const unsubscribe = subscribeModalClose(() => scope.focus(scope.dispatch({ kind: \"unblock\" })));\n return () => {\n cancelled = true;\n nested?.delete(nestedEntry);\n for (const type of events) document.removeEventListener(type, interact, true);\n unsubscribe();\n scope.dispatch({ kind: \"deactivate\" });\n };\n }, [active, overlay, scope]);\n\n return useMemo(() => ({ registry: scope.registry, layer: scope.layer, enter: scope.enter }), [scope]);\n}\n\nexport function InitialFocusProvider({ scope, children }: { scope: InitialFocusScopeHandle; children: ReactNode }) {\n return <ModalLayerContext.Provider value={scope.layer}><InitialFocusContext.Provider value={scope.registry}>{children}</InitialFocusContext.Provider></ModalLayerContext.Provider>;\n}\n\n/** Screen scope: focuses the chosen field on mount, never over a field the user is in or under an open modal. */\nexport function InitialFocusScope({ mode, children }: { mode: InitialFocusMode; children: ReactNode }) {\n const scope = useInitialFocusScope({ mode });\n return <InitialFocusProvider scope={scope}>{children}</InitialFocusProvider>;\n}\n\n/** Registers a text field with the nearest scope. `preference` is the field's public `initialFocusTarget`. */\nexport function useInitialFocusTarget(element: RefObject<HTMLElement | null>, preference: boolean | undefined) {\n const registry = useContext(InitialFocusContext);\n // Tree order is fixed at first registration, so changing `preference` later does not move the field to the end.\n const order = useRef<number | null>(null);\n useLayoutEffect(() => {\n if (!registry) return undefined;\n // Only the first registration of this field instance counts as \"appeared\"; a later `preference` change does not.\n const mounted = order.current === null;\n order.current ??= registry.nextOrder();\n return registry.register({\n order: order.current, preference, element: () => element.current,\n // Disabled and read-only fields are never focused on entry.\n focusable: () => { const node = element.current as (HTMLInputElement | HTMLTextAreaElement | null); return !!node && !node.disabled && !node.readOnly; },\n }, mounted);\n }, [registry, preference, element]);\n}\n"]}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import { type ReactNode } from "react";
|
|
2
|
+
type MediaAlbumBase = Readonly<{
|
|
3
|
+
/** Number of photos in the set; at least one. */
|
|
4
|
+
count: number;
|
|
5
|
+
/**
|
|
6
|
+
* Draws one page. HJM calls it only for the page on screen, so the product can fetch, authorize and decode that
|
|
7
|
+
* photo alone instead of mounting every image in the set.
|
|
8
|
+
*/
|
|
9
|
+
renderPage(index: number): ReactNode;
|
|
10
|
+
/** Localized accessible name of a page, e.g. "Photo 2 of 5". */
|
|
11
|
+
pageLabel(index: number, count: number): string;
|
|
12
|
+
/** Localized accessible names of the previous/next icon buttons. */
|
|
13
|
+
previousLabel: string;
|
|
14
|
+
nextLabel: string;
|
|
15
|
+
/** Page frame width / height. Defaults to `mediaAlbumRecipe.defaultAspectRatio` (square). */
|
|
16
|
+
aspectRatio?: number;
|
|
17
|
+
/** Opens the shown page (viewer); without it the page is a static image. */
|
|
18
|
+
onPress?(index: number): void;
|
|
19
|
+
}>;
|
|
20
|
+
/**
|
|
21
|
+
* Paged photo set (2026-10-18). Products own image sources, authorization and the viewer; HJM owns the frame,
|
|
22
|
+
* the counter row and which page is mounted. Controlled with `index` + `onIndexChange`, or uncontrolled from
|
|
23
|
+
* `defaultIndex`.
|
|
24
|
+
*/
|
|
25
|
+
export type MediaAlbum = MediaAlbumBase & (Readonly<{
|
|
26
|
+
index: number;
|
|
27
|
+
onIndexChange(index: number): void;
|
|
28
|
+
defaultIndex?: never;
|
|
29
|
+
}> | Readonly<{
|
|
30
|
+
index?: never;
|
|
31
|
+
defaultIndex?: number;
|
|
32
|
+
onIndexChange?(index: number): void;
|
|
33
|
+
}>);
|
|
34
|
+
/**
|
|
35
|
+
* Hosts keep the page state so every copy of the album they render (the message and its hold-menu preview) shows
|
|
36
|
+
* the same page. Called unconditionally; `album` may be absent.
|
|
37
|
+
*/
|
|
38
|
+
export declare function useMediaAlbumIndex(album: MediaAlbum | undefined): readonly [number, (index: number) => void];
|
|
39
|
+
export declare function MediaAlbumView({ album, index, onIndexChange, width, radius, className }: Readonly<{
|
|
40
|
+
album: MediaAlbum;
|
|
41
|
+
index: number;
|
|
42
|
+
onIndexChange(index: number): void;
|
|
43
|
+
/** Host media width (chat `mediaWidth`, comment `mediaMaxWidth`); the album never grows past its container. */
|
|
44
|
+
width: number;
|
|
45
|
+
radius: number;
|
|
46
|
+
className?: string;
|
|
47
|
+
}>): import("react").JSX.Element;
|
|
48
|
+
export {};
|
|
49
|
+
//# sourceMappingURL=media-album.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"media-album.d.ts","sourceRoot":"","sources":["../../src/internal/media-album.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAMrE,KAAK,cAAc,GAAG,QAAQ,CAAC;IAC7B,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IACrC,gEAAgE;IAChE,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IAChD,oEAAoE;IACpE,aAAa,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,6FAA6F;IAC7F,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4EAA4E;IAC5E,OAAO,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CAC/B,CAAC,CAAC;AAEH;;;;GAIG;AACH,MAAM,MAAM,UAAU,GAAG,cAAc,GAAG,CACtC,QAAQ,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,YAAY,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC,GACrF,QAAQ,CAAC;IAAE,KAAK,CAAC,EAAE,KAAK,CAAC;IAAC,YAAY,CAAC,EAAE,MAAM,CAAC;IAAC,aAAa,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,CAAC,CAC1F,CAAC;AAEF;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,UAAU,GAAG,SAAS,GAAG,SAAS,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,CAS5G;AAED,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,QAAQ,CAAC;IACjG,KAAK,EAAE,UAAU,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrE,+GAA+G;IAC/G,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CACnD,CAAC,+BAgBD"}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useState } from "react";
|
|
3
|
+
import { mediaAlbumRecipe, resolveMediaAlbumIndex, validateMediaAlbum } from "@hjmds/design-contracts/screen-patterns";
|
|
4
|
+
import { IconButton } from "../actions.js";
|
|
5
|
+
import { Text } from "../layout.js";
|
|
6
|
+
import { Icon } from "../supplemental-display.js";
|
|
7
|
+
/**
|
|
8
|
+
* Hosts keep the page state so every copy of the album they render (the message and its hold-menu preview) shows
|
|
9
|
+
* the same page. Called unconditionally; `album` may be absent.
|
|
10
|
+
*/
|
|
11
|
+
export function useMediaAlbumIndex(album) {
|
|
12
|
+
const [own, setOwn] = useState(album?.defaultIndex ?? 0);
|
|
13
|
+
if (!album)
|
|
14
|
+
return [0, setOwn];
|
|
15
|
+
if (album.index !== undefined) {
|
|
16
|
+
validateMediaAlbum(album.count, album.index);
|
|
17
|
+
return [album.index, album.onIndexChange];
|
|
18
|
+
}
|
|
19
|
+
const current = resolveMediaAlbumIndex(album.count, own);
|
|
20
|
+
return [current, (next) => { setOwn(next); album.onIndexChange?.(next); }];
|
|
21
|
+
}
|
|
22
|
+
export function MediaAlbumView({ album, index, onIndexChange, width, radius, className }) {
|
|
23
|
+
validateMediaAlbum(album.count, index);
|
|
24
|
+
const label = album.pageLabel(index, album.count);
|
|
25
|
+
const frame = { aspectRatio: album.aspectRatio ?? mediaAlbumRecipe.defaultAspectRatio, borderRadius: radius };
|
|
26
|
+
const page = album.renderPage(index);
|
|
27
|
+
return _jsxs("div", { className: ["hjm-media-album", className].filter(Boolean).join(" "), style: { inlineSize: width, gap: mediaAlbumRecipe.controlGap }, children: [album.onPress
|
|
28
|
+
? _jsx("button", { type: "button", className: "hjm-media-album__page", "aria-label": label, style: frame, onClick: () => album.onPress?.(index), children: page })
|
|
29
|
+
: _jsx("div", { role: "img", "aria-label": label, className: "hjm-media-album__page", style: frame, children: page }), album.count > 1 ? _jsxs("div", { className: "hjm-media-album__controls", children: [_jsx(IconButton, { label: album.previousLabel, tone: "ghost", size: mediaAlbumRecipe.controlSize, edge: "start", disabled: index === 0, onClick: () => onIndexChange(index - 1), children: _jsx(Icon, { name: "chevronStart" }) }), _jsxs(Text, { variant: "caption", "aria-live": "polite", children: [index + 1, "/", album.count] }), _jsx(IconButton, { label: album.nextLabel, tone: "ghost", size: mediaAlbumRecipe.controlSize, edge: "end", disabled: index === album.count - 1, onClick: () => onIndexChange(index + 1), children: _jsx(Icon, { name: "chevronEnd" }) })] }) : null] });
|
|
30
|
+
}
|
|
31
|
+
//# sourceMappingURL=media-album.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"media-album.js","sourceRoot":"","sources":["../../src/internal/media-album.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, type CSSProperties, type ReactNode } from \"react\";\nimport { mediaAlbumRecipe, resolveMediaAlbumIndex, validateMediaAlbum } from \"@hjmds/design-contracts/screen-patterns\";\nimport { IconButton } from \"../actions.js\";\nimport { Text } from \"../layout.js\";\nimport { Icon } from \"../supplemental-display.js\";\n\ntype MediaAlbumBase = Readonly<{\n /** Number of photos in the set; at least one. */\n count: number;\n /**\n * Draws one page. HJM calls it only for the page on screen, so the product can fetch, authorize and decode that\n * photo alone instead of mounting every image in the set.\n */\n renderPage(index: number): ReactNode;\n /** Localized accessible name of a page, e.g. \"Photo 2 of 5\". */\n pageLabel(index: number, count: number): string;\n /** Localized accessible names of the previous/next icon buttons. */\n previousLabel: string;\n nextLabel: string;\n /** Page frame width / height. Defaults to `mediaAlbumRecipe.defaultAspectRatio` (square). */\n aspectRatio?: number;\n /** Opens the shown page (viewer); without it the page is a static image. */\n onPress?(index: number): void;\n}>;\n\n/**\n * Paged photo set (2026-10-18). Products own image sources, authorization and the viewer; HJM owns the frame,\n * the counter row and which page is mounted. Controlled with `index` + `onIndexChange`, or uncontrolled from\n * `defaultIndex`.\n */\nexport type MediaAlbum = MediaAlbumBase & (\n | Readonly<{ index: number; onIndexChange(index: number): void; defaultIndex?: never }>\n | Readonly<{ index?: never; defaultIndex?: number; onIndexChange?(index: number): void }>\n);\n\n/**\n * Hosts keep the page state so every copy of the album they render (the message and its hold-menu preview) shows\n * the same page. Called unconditionally; `album` may be absent.\n */\nexport function useMediaAlbumIndex(album: MediaAlbum | undefined): readonly [number, (index: number) => void] {\n const [own, setOwn] = useState(album?.defaultIndex ?? 0);\n if (!album) return [0, setOwn];\n if (album.index !== undefined) {\n validateMediaAlbum(album.count, album.index);\n return [album.index, album.onIndexChange];\n }\n const current = resolveMediaAlbumIndex(album.count, own);\n return [current, (next: number) => { setOwn(next); album.onIndexChange?.(next); }];\n}\n\nexport function MediaAlbumView({ album, index, onIndexChange, width, radius, className }: Readonly<{\n album: MediaAlbum; index: number; onIndexChange(index: number): void;\n /** Host media width (chat `mediaWidth`, comment `mediaMaxWidth`); the album never grows past its container. */\n width: number; radius: number; className?: string;\n}>) {\n validateMediaAlbum(album.count, index);\n const label = album.pageLabel(index, album.count);\n const frame = { aspectRatio: album.aspectRatio ?? mediaAlbumRecipe.defaultAspectRatio, borderRadius: radius } as CSSProperties;\n const page = album.renderPage(index);\n return <div className={[\"hjm-media-album\", className].filter(Boolean).join(\" \")} style={{ inlineSize: width, gap: mediaAlbumRecipe.controlGap }}>\n {album.onPress\n ? <button type=\"button\" className=\"hjm-media-album__page\" aria-label={label} style={frame} onClick={() => album.onPress?.(index)}>{page}</button>\n : <div role=\"img\" aria-label={label} className=\"hjm-media-album__page\" style={frame}>{page}</div>}\n {album.count > 1 ? <div className=\"hjm-media-album__controls\">\n {/* Same counter presentation as CarouselMotion navigation=\"counter\"; logical chevrons mirror in RTL. */}\n <IconButton label={album.previousLabel} tone=\"ghost\" size={mediaAlbumRecipe.controlSize} edge=\"start\" disabled={index === 0} onClick={() => onIndexChange(index - 1)}><Icon name=\"chevronStart\" /></IconButton>\n <Text variant=\"caption\" aria-live=\"polite\">{index + 1}/{album.count}</Text>\n <IconButton label={album.nextLabel} tone=\"ghost\" size={mediaAlbumRecipe.controlSize} edge=\"end\" disabled={index === album.count - 1} onClick={() => onIndexChange(index + 1)}><Icon name=\"chevronEnd\" /></IconButton>\n </div> : null}\n </div>;\n}\n"]}
|
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
import { type ReactNode } from "react";
|
|
1
|
+
import { type ReactNode, type Ref } from "react";
|
|
2
|
+
import { type ChatReactionSummaryItem } from "@hjmds/design-contracts/screen-patterns";
|
|
3
|
+
import type { MenuItemTone } from "@hjmds/design-contracts/recipes";
|
|
2
4
|
import { type ReactionPickerProps } from "../reaction-picker.js";
|
|
3
5
|
/** One row of the hold menu. Products supply copy and icons; HJM owns order, size and tone. */
|
|
4
6
|
export type MessageMenuAction = Readonly<{
|
|
@@ -8,6 +10,11 @@ export type MessageMenuAction = Readonly<{
|
|
|
8
10
|
onPress(): void;
|
|
9
11
|
disabled?: boolean; /** Shows › for rows that open a further list. */
|
|
10
12
|
submenu?: boolean;
|
|
13
|
+
/** Same vocabulary as Menu items: `danger` for destructive rows such as delete (default `neutral`). */ tone?: MenuItemTone;
|
|
14
|
+
}>;
|
|
15
|
+
/** Lets the owning message open the same hold menu from its reaction summary. */
|
|
16
|
+
export type MessageReactionsHandle = Readonly<{
|
|
17
|
+
open(): void;
|
|
11
18
|
}>;
|
|
12
19
|
type Props = ReactionPickerProps & Readonly<{
|
|
13
20
|
closeLabel: string;
|
|
@@ -35,8 +42,27 @@ type Props = ReactionPickerProps & Readonly<{
|
|
|
35
42
|
disabled?: boolean;
|
|
36
43
|
icon?: ReactNode;
|
|
37
44
|
}>;
|
|
45
|
+
menuRef?: Ref<MessageReactionsHandle>;
|
|
38
46
|
}>;
|
|
39
47
|
/** Chat-specific trigger translation; Popover retains collision, focus, Escape and outside dismissal. */
|
|
40
|
-
export declare function MessageReactions({ children, closeLabel, menuAction, interactiveContent, triggerClassName, replyAction, menuTitle, menuActions, reportAction, ...picker }: Props): import("react").JSX.Element;
|
|
48
|
+
export declare function MessageReactions({ children, closeLabel, menuAction, interactiveContent, triggerClassName, replyAction, menuTitle, menuActions, reportAction, menuRef, ...picker }: Props): import("react").JSX.Element;
|
|
49
|
+
/** ChatMessage strips its summary before spreading the rest into the hold menu. */
|
|
50
|
+
export declare function omitReactionSummary<T extends Readonly<{
|
|
51
|
+
summary?: unknown;
|
|
52
|
+
}>>({ summary: _summary, ...rest }: T): Omit<T, "summary">;
|
|
53
|
+
/**
|
|
54
|
+
* Current reactions as one button beside the time; pressing it opens the hold menu (the press target and its name
|
|
55
|
+
* are the whole pill, so per-emoji parts are hidden from assistive tech). The pill shows the brand border when the
|
|
56
|
+
* reader's own reaction is among the items.
|
|
57
|
+
*/
|
|
58
|
+
export declare function ReactionSummaryButton({ label, items, selected, disabled, onPress }: Readonly<{
|
|
59
|
+
label: string;
|
|
60
|
+
items: readonly (ChatReactionSummaryItem & Readonly<{
|
|
61
|
+
showCount: boolean;
|
|
62
|
+
}>)[];
|
|
63
|
+
selected: string | null;
|
|
64
|
+
disabled: boolean;
|
|
65
|
+
onPress(): void;
|
|
66
|
+
}>): import("react").JSX.Element;
|
|
41
67
|
export {};
|
|
42
68
|
//# sourceMappingURL=message-reactions.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"message-reactions.d.ts","sourceRoot":"","sources":["../../src/internal/message-reactions.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"message-reactions.d.ts","sourceRoot":"","sources":["../../src/internal/message-reactions.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useEffect, useRef, useState } from "react";
|
|
3
|
-
import { screenPatternRecipe } from "@hjmds/design-contracts/screen-patterns";
|
|
2
|
+
import { useEffect, useImperativeHandle, useRef, useState } from "react";
|
|
3
|
+
import { chatMessageRecipe, screenPatternRecipe } from "@hjmds/design-contracts/screen-patterns";
|
|
4
4
|
import { Text } from "../layout.js";
|
|
5
5
|
import { Popover } from "../popover.js";
|
|
6
6
|
import { ReactionPicker } from "../reaction-picker.js";
|
|
7
7
|
/** Chat-specific trigger translation; Popover retains collision, focus, Escape and outside dismissal. */
|
|
8
|
-
export function MessageReactions({ children, closeLabel, menuAction, interactiveContent = false, triggerClassName = "hjm-chat-message__bubble", replyAction, menuTitle, menuActions = [], reportAction, ...picker }) {
|
|
8
|
+
export function MessageReactions({ children, closeLabel, menuAction, interactiveContent = false, triggerClassName = "hjm-chat-message__bubble", replyAction, menuTitle, menuActions = [], reportAction, menuRef, ...picker }) {
|
|
9
9
|
// Reply leads and report trails; legacy single menuAction keeps its place before report.
|
|
10
10
|
const rows = [
|
|
11
11
|
...(replyAction ? [{ id: "reply", ...replyAction }] : []),
|
|
12
12
|
...menuActions,
|
|
13
13
|
...(menuAction ? [{ id: "menu", ...menuAction }] : []),
|
|
14
|
-
...(reportAction ? [{ id: "report", ...reportAction,
|
|
14
|
+
...(reportAction ? [{ id: "report", ...reportAction, tone: "danger" }] : []),
|
|
15
15
|
];
|
|
16
16
|
const [open, setOpen] = useState(false);
|
|
17
17
|
const press = useRef(null);
|
|
@@ -24,6 +24,8 @@ export function MessageReactions({ children, closeLabel, menuAction, interactive
|
|
|
24
24
|
cancel();
|
|
25
25
|
setOpen(false);
|
|
26
26
|
} }, [picker.disabled]);
|
|
27
|
+
useImperativeHandle(menuRef, () => ({ open: () => { if (!picker.disabled)
|
|
28
|
+
setOpen(true); } }), [picker.disabled]);
|
|
27
29
|
return _jsxs(Popover, { open: open && !picker.disabled, onOpenChange: (next) => { if (!next)
|
|
28
30
|
setOpen(false); }, title: picker.label, closeLabel: closeLabel, descriptor: { placement: "top", align: "start" }, className: "hjm-message-reactions", trigger: _jsx("div", { className: triggerClassName, tabIndex: picker.disabled ? -1 : 0, role: interactiveContent ? "group" : "button", "aria-label": picker.label, "aria-disabled": picker.disabled, onContextMenu: event => { event.preventDefault(); cancel(); if (!picker.disabled)
|
|
29
31
|
setOpen(true); },
|
|
@@ -44,6 +46,20 @@ export function MessageReactions({ children, closeLabel, menuAction, interactive
|
|
|
44
46
|
event.preventDefault();
|
|
45
47
|
event.stopPropagation();
|
|
46
48
|
held.current = false;
|
|
47
|
-
} }, children: children }), children: [picker.options.length ? _jsx(ReactionPicker, { ...picker, layout: "strip", onValueChange: value => { picker.onValueChange(value); setOpen(false); } }) : null, menuTitle || rows.length ? _jsxs("div", { className: "hjm-message-menu", children: [menuTitle ? _jsx(Text, { variant: "caption", tone: "muted", className: "hjm-message-menu__title", children: menuTitle }) : null, rows.map(row => _jsxs("button", { type: "button", className: "hjm-message-menu__item", "data-tone": row.danger ? "danger" : undefined, disabled: row.disabled, onClick: () => { setOpen(false); row.onPress(); }, children: [row.icon ? _jsx("span", { className: "hjm-message-menu__icon", "aria-hidden": "true", children: row.icon }) : null, _jsx("span", { className: "hjm-message-menu__label", children: row.label }), row.submenu ? _jsx("span", { className: "hjm-message-menu__chevron", "aria-hidden": "true", children: "\u203A" }) : null] }, row.id))] }) : null] });
|
|
49
|
+
} }, children: children }), children: [picker.options.length ? _jsx(ReactionPicker, { ...picker, layout: "strip", onValueChange: value => { picker.onValueChange(value); setOpen(false); } }) : null, menuTitle || rows.length ? _jsxs("div", { className: "hjm-message-menu", children: [menuTitle ? _jsx(Text, { variant: "caption", tone: "muted", className: "hjm-message-menu__title", children: menuTitle }) : null, rows.map(row => _jsxs("button", { type: "button", className: "hjm-message-menu__item", "data-tone": row.tone === "danger" ? "danger" : undefined, disabled: row.disabled, onClick: () => { setOpen(false); row.onPress(); }, children: [row.icon ? _jsx("span", { className: "hjm-message-menu__icon", "aria-hidden": "true", children: row.icon }) : null, _jsx("span", { className: "hjm-message-menu__label", children: row.label }), row.submenu ? _jsx("span", { className: "hjm-message-menu__chevron", "aria-hidden": "true", children: "\u203A" }) : null] }, row.id))] }) : null] });
|
|
50
|
+
}
|
|
51
|
+
/** ChatMessage strips its summary before spreading the rest into the hold menu. */
|
|
52
|
+
export function omitReactionSummary({ summary: _summary, ...rest }) {
|
|
53
|
+
return rest;
|
|
54
|
+
}
|
|
55
|
+
/**
|
|
56
|
+
* Current reactions as one button beside the time; pressing it opens the hold menu (the press target and its name
|
|
57
|
+
* are the whole pill, so per-emoji parts are hidden from assistive tech). The pill shows the brand border when the
|
|
58
|
+
* reader's own reaction is among the items.
|
|
59
|
+
*/
|
|
60
|
+
export function ReactionSummaryButton({ label, items, selected, disabled, onPress }) {
|
|
61
|
+
const r = chatMessageRecipe.reactionSummary;
|
|
62
|
+
const mine = items.some(item => item.id === selected);
|
|
63
|
+
return _jsx("button", { type: "button", className: "hjm-chat-message__reaction-summary", "aria-label": label, disabled: disabled, "data-selected": mine || undefined, onClick: onPress, style: { minBlockSize: r.minHeight, paddingInline: r.paddingInline, gap: r.itemGap }, children: items.map(item => _jsxs("span", { "aria-hidden": "true", style: { display: "inline-flex", alignItems: "center", gap: r.emojiGap }, children: [_jsx("span", { children: item.emoji }), item.showCount ? _jsx(Text, { as: "span", variant: "caption", children: item.count }) : null] }, item.id)) });
|
|
48
64
|
}
|
|
49
65
|
//# sourceMappingURL=message-reactions.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"message-reactions.js","sourceRoot":"","sources":["../../src/internal/message-reactions.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useRef, useState, type ReactNode } from \"react\";\nimport { screenPatternRecipe } from \"@hjmds/design-contracts/screen-patterns\";\nimport { Text } from \"../layout.js\";\nimport { Popover } from \"../popover.js\";\nimport { ReactionPicker, type ReactionPickerProps } from \"../reaction-picker.js\";\n\n/** One row of the hold menu. Products supply copy and icons; HJM owns order, size and tone. */\nexport type MessageMenuAction = Readonly<{ id: string; label: string; icon?: ReactNode; onPress(): void; disabled?: boolean; /** Shows › for rows that open a further list. */ submenu?: boolean }>;\ntype Props = ReactionPickerProps & Readonly<{ closeLabel: string; menuAction?: Readonly<{label:string;onPress():void;disabled?:boolean}>; children: ReactNode; interactiveContent?:boolean; /** Comments reuse the hold menu without chat bubble styling. */ triggerClassName?: string;\n replyAction?: Readonly<{label:string;onPress():void;disabled?:boolean;icon?:ReactNode}>;\n /** Shown above the actions, e.g. the exact send time that a run only shows once. */\n menuTitle?: string;\n menuActions?: readonly MessageMenuAction[];\n /** Always last and in the danger tone, matching the measured reference menu (2026-10-16). */\n reportAction?: Readonly<{label:string;onPress():void;disabled?:boolean;icon?:ReactNode}> }>;\n/** Chat-specific trigger translation; Popover retains collision, focus, Escape and outside dismissal. */\nexport function MessageReactions({ children, closeLabel, menuAction, interactiveContent=false, triggerClassName = \"hjm-chat-message__bubble\", replyAction, menuTitle, menuActions = [], reportAction, ...picker }: Props) {\n // Reply leads and report trails; legacy single menuAction keeps its place before report.\n const rows: (MessageMenuAction & { danger?: boolean })[] = [\n ...(replyAction ? [{ id: \"reply\", ...replyAction }] : []),\n ...menuActions,\n ...(menuAction ? [{ id: \"menu\", ...menuAction }] : []),\n ...(reportAction ? [{ id: \"report\", ...reportAction, danger: true }] : []),\n ];\n const [open, setOpen] = useState(false);\n const press = useRef<{ timer: ReturnType<typeof setTimeout>; x: number; y: number } | null>(null);\n const held = useRef(false);\n const cancel = () => { if (press.current) clearTimeout(press.current.timer); press.current = null; };\n useEffect(() => () => { if (press.current) clearTimeout(press.current.timer); }, []);\n useEffect(() => { if (picker.disabled) { cancel(); setOpen(false); } }, [picker.disabled]);\n return <Popover open={open && !picker.disabled} onOpenChange={(next) => { if (!next) setOpen(false); }} title={picker.label} closeLabel={closeLabel}\n descriptor={{ placement: \"top\", align: \"start\" }} className=\"hjm-message-reactions\" trigger={<div\n className={triggerClassName} tabIndex={picker.disabled ? -1 : 0} role={interactiveContent?\"group\":\"button\"} aria-label={picker.label} aria-disabled={picker.disabled}\n onContextMenu={event => { event.preventDefault(); cancel(); if (!picker.disabled) setOpen(true); }}\n // Only the bubble itself opens reactions: with interactiveContent, Enter/Space on a nested\n // link or button must keep its native activation instead of being swallowed here.\n onKeyDown={event => { if (event.target === event.currentTarget && (event.key === \"Enter\" || event.key === \" \") && !picker.disabled) { event.preventDefault(); setOpen(true); } }}\n onPointerDown={event => {\n if (picker.disabled || event.button !== 0 || (event.target as HTMLElement).closest(\"button,a,input,textarea\")) return;\n cancel(); held.current = false;\n const { clientX: x, clientY: y } = event;\n press.current = { x, y, timer: setTimeout(() => { held.current = true; press.current = null; setOpen(true); }, screenPatternRecipe.reactionHoldMs) };\n }}\n onPointerMove={event => { const start = press.current; if (start && Math.hypot(event.clientX - start.x, event.clientY - start.y) > screenPatternRecipe.reactionMoveTolerance) cancel(); }}\n onPointerCancel={cancel} onPointerLeave={cancel} onPointerUp={cancel}\n onClickCapture={event => { if (held.current) { event.preventDefault(); event.stopPropagation(); held.current = false; } }}\n >{children}</div>}>\n {/* Action-only menus (comments, 2026-10-16 reference) pass no options and show no strip. */}\n {picker.options.length ? <ReactionPicker {...picker} layout=\"strip\" onValueChange={value => { picker.onValueChange(value); setOpen(false); }} /> : null}\n {menuTitle || rows.length ? <div className=\"hjm-message-menu\">\n {menuTitle ? <Text variant=\"caption\" tone=\"muted\" className=\"hjm-message-menu__title\">{menuTitle}</Text> : null}\n {rows.map(row => <button key={row.id} type=\"button\" className=\"hjm-message-menu__item\" data-tone={row.danger ? \"danger\" : undefined} disabled={row.disabled} onClick={() => { setOpen(false); row.onPress(); }}>\n {row.icon ? <span className=\"hjm-message-menu__icon\" aria-hidden=\"true\">{row.icon}</span> : null}<span className=\"hjm-message-menu__label\">{row.label}</span>{row.submenu ? <span className=\"hjm-message-menu__chevron\" aria-hidden=\"true\">›</span> : null}</button>)}\n </div> : null}\n </Popover>;\n}\n"]}
|
|
1
|
+
{"version":3,"file":"message-reactions.js","sourceRoot":"","sources":["../../src/internal/message-reactions.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,mBAAmB,EAAE,MAAM,EAAE,QAAQ,EAA4B,MAAM,OAAO,CAAC;AACnG,OAAO,EAAE,iBAAiB,EAAE,mBAAmB,EAAgC,MAAM,yCAAyC,CAAC;AAE/H,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,cAAc,EAA4B,MAAM,uBAAuB,CAAC;AAejF,yGAAyG;AACzG,MAAM,UAAU,gBAAgB,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,UAAU,EAAE,kBAAkB,GAAC,KAAK,EAAE,gBAAgB,GAAG,0BAA0B,EAAE,WAAW,EAAE,SAAS,EAAE,WAAW,GAAG,EAAE,EAAE,YAAY,EAAE,OAAO,EAAE,GAAG,MAAM,EAAS;IAC/N,yFAAyF;IACzF,MAAM,IAAI,GAAwB;QAChC,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,WAAW,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QACzD,GAAG,WAAW;QACd,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,UAAU,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QACtD,GAAG,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,GAAG,YAAY,EAAE,IAAI,EAAE,QAAiB,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;KACtF,CAAC;IACF,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,KAAK,GAAG,MAAM,CAAwE,IAAI,CAAC,CAAC;IAClG,MAAM,IAAI,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAC3B,MAAM,MAAM,GAAG,GAAG,EAAE,GAAG,IAAI,KAAK,CAAC,OAAO;QAAE,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC;IACrG,SAAS,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,GAAG,IAAI,KAAK,CAAC,OAAO;QAAE,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IACrF,SAAS,CAAC,GAAG,EAAE,GAAG,IAAI,MAAM,CAAC,QAAQ,EAAE,CAAC;QAAC,MAAM,EAAE,CAAC;QAAC,OAAO,CAAC,KAAK,CAAC,CAAC;IAAC,CAAC,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC3F,mBAAmB,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,QAAQ;YAAE,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC;IAClH,OAAO,MAAC,OAAO,IAAC,IAAI,EAAE,IAAI,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,YAAY,EAAE,CAAC,IAAI,EAAE,EAAE,GAAG,IAAI,CAAC,IAAI;YAAE,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,UAAU,EAAE,UAAU,EACjJ,UAAU,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,SAAS,EAAC,uBAAuB,EAAC,OAAO,EAAE,cAC3F,SAAS,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,kBAAkB,CAAA,CAAC,CAAA,OAAO,CAAA,CAAC,CAAA,QAAQ,gBAAc,MAAM,CAAC,KAAK,mBAAiB,MAAM,CAAC,QAAQ,EACpK,aAAa,EAAE,KAAK,CAAC,EAAE,GAAG,KAAK,CAAC,cAAc,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ;gBAAE,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;YAClG,2FAA2F;YAC3F,kFAAkF;YAClF,SAAS,EAAE,KAAK,CAAC,EAAE,GAAG,IAAI,KAAK,CAAC,MAAM,KAAK,KAAK,CAAC,aAAa,IAAI,CAAC,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC;gBAAC,KAAK,CAAC,cAAc,EAAE,CAAC;gBAAC,OAAO,CAAC,IAAI,CAAC,CAAC;YAAC,CAAC,CAAC,CAAC,EAChL,aAAa,EAAE,KAAK,CAAC,EAAE;gBACrB,IAAI,MAAM,CAAC,QAAQ,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,IAAK,KAAK,CAAC,MAAsB,CAAC,OAAO,CAAC,yBAAyB,CAAC;oBAAE,OAAO;gBACtH,MAAM,EAAE,CAAC;gBAAC,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;gBAC/B,MAAM,EAAE,OAAO,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,GAAG,KAAK,CAAC;gBACzC,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,UAAU,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,mBAAmB,CAAC,cAAc,CAAC,EAAE,CAAC;YACvJ,CAAC,EACD,aAAa,EAAE,KAAK,CAAC,EAAE,GAAG,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,mBAAmB,CAAC,qBAAqB;gBAAE,MAAM,EAAE,CAAC,CAAC,CAAC,EACzL,eAAe,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,EACpE,cAAc,EAAE,KAAK,CAAC,EAAE,GAAG,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;gBAAC,KAAK,CAAC,cAAc,EAAE,CAAC;gBAAC,KAAK,CAAC,eAAe,EAAE,CAAC;gBAAC,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;YAAC,CAAC,CAAC,CAAC,YACzH,QAAQ,GAAO,aAEhB,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,KAAC,cAAc,OAAK,MAAM,EAAE,MAAM,EAAC,OAAO,EAAC,aAAa,EAAE,KAAK,CAAC,EAAE,GAAG,MAAM,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAI,CAAC,CAAC,CAAC,IAAI,EACtJ,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,eAAK,SAAS,EAAC,kBAAkB,aAC1D,SAAS,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,yBAAyB,YAAE,SAAS,GAAQ,CAAC,CAAC,CAAC,IAAI,EAC9G,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,kBAAqB,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAC,wBAAwB,eAAY,GAAG,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAAE,QAAQ,EAAE,GAAG,CAAC,QAAQ,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,aACtN,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,eAAM,SAAS,EAAC,wBAAwB,iBAAa,MAAM,YAAE,GAAG,CAAC,IAAI,GAAQ,CAAC,CAAC,CAAC,IAAI,EAAC,eAAM,SAAS,EAAC,yBAAyB,YAAE,GAAG,CAAC,KAAK,GAAQ,EAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,eAAM,SAAS,EAAC,2BAA2B,iBAAa,MAAM,uBAAS,CAAC,CAAC,CAAC,IAAI,KAD9N,GAAG,CAAC,EAAE,CACkO,CAAC,IACnQ,CAAC,CAAC,CAAC,IAAI,IACL,CAAC;AACb,CAAC;AAED,mFAAmF;AACnF,MAAM,UAAU,mBAAmB,CAA4C,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAK;IAC9G,OAAO,IAAI,CAAC;AACd,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,qBAAqB,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAA4K;IAC3P,MAAM,CAAC,GAAG,iBAAiB,CAAC,eAAe,CAAC;IAC5C,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,QAAQ,CAAC,CAAC;IACtD,OAAO,iBAAQ,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAC,oCAAoC,gBAAa,KAAK,EAAE,QAAQ,EAAE,QAAQ,mBAAiB,IAAI,IAAI,SAAS,EAAE,OAAO,EAAE,OAAO,EACnK,KAAK,EAAE,EAAE,YAAY,EAAE,CAAC,CAAC,SAAS,EAAE,aAAa,EAAE,CAAC,CAAC,aAAa,EAAE,GAAG,EAAE,CAAC,CAAC,OAAO,EAAE,YACnF,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,+BAAgC,MAAM,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC,QAAQ,EAAE,aAAE,yBAAO,IAAI,CAAC,KAAK,GAAQ,EAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,SAAS,YAAE,IAAI,CAAC,KAAK,GAAQ,CAAC,CAAC,CAAC,IAAI,KAA7M,IAAI,CAAC,EAAE,CAA8M,CAAC,GAC7O,CAAC;AACZ,CAAC","sourcesContent":["import { useEffect, useImperativeHandle, useRef, useState, type ReactNode, type Ref } from \"react\";\nimport { chatMessageRecipe, screenPatternRecipe, type ChatReactionSummaryItem } from \"@hjmds/design-contracts/screen-patterns\";\nimport type { MenuItemTone } from \"@hjmds/design-contracts/recipes\";\nimport { Text } from \"../layout.js\";\nimport { Popover } from \"../popover.js\";\nimport { ReactionPicker, type ReactionPickerProps } from \"../reaction-picker.js\";\n\n/** One row of the hold menu. Products supply copy and icons; HJM owns order, size and tone. */\nexport type MessageMenuAction = Readonly<{ id: string; label: string; icon?: ReactNode; onPress(): void; disabled?: boolean; /** Shows › for rows that open a further list. */ submenu?: boolean;\n /** Same vocabulary as Menu items: `danger` for destructive rows such as delete (default `neutral`). */ tone?: MenuItemTone }>;\n/** Lets the owning message open the same hold menu from its reaction summary. */\nexport type MessageReactionsHandle = Readonly<{ open(): void }>;\ntype Props = ReactionPickerProps & Readonly<{ closeLabel: string; menuAction?: Readonly<{label:string;onPress():void;disabled?:boolean}>; children: ReactNode; interactiveContent?:boolean; /** Comments reuse the hold menu without chat bubble styling. */ triggerClassName?: string;\n replyAction?: Readonly<{label:string;onPress():void;disabled?:boolean;icon?:ReactNode}>;\n /** Shown above the actions, e.g. the exact send time that a run only shows once. */\n menuTitle?: string;\n menuActions?: readonly MessageMenuAction[];\n /** Always last and in the danger tone, matching the measured reference menu (2026-10-16). */\n reportAction?: Readonly<{label:string;onPress():void;disabled?:boolean;icon?:ReactNode}>;\n menuRef?: Ref<MessageReactionsHandle> }>;\n/** Chat-specific trigger translation; Popover retains collision, focus, Escape and outside dismissal. */\nexport function MessageReactions({ children, closeLabel, menuAction, interactiveContent=false, triggerClassName = \"hjm-chat-message__bubble\", replyAction, menuTitle, menuActions = [], reportAction, menuRef, ...picker }: Props) {\n // Reply leads and report trails; legacy single menuAction keeps its place before report.\n const rows: MessageMenuAction[] = [\n ...(replyAction ? [{ id: \"reply\", ...replyAction }] : []),\n ...menuActions,\n ...(menuAction ? [{ id: \"menu\", ...menuAction }] : []),\n ...(reportAction ? [{ id: \"report\", ...reportAction, tone: \"danger\" as const }] : []),\n ];\n const [open, setOpen] = useState(false);\n const press = useRef<{ timer: ReturnType<typeof setTimeout>; x: number; y: number } | null>(null);\n const held = useRef(false);\n const cancel = () => { if (press.current) clearTimeout(press.current.timer); press.current = null; };\n useEffect(() => () => { if (press.current) clearTimeout(press.current.timer); }, []);\n useEffect(() => { if (picker.disabled) { cancel(); setOpen(false); } }, [picker.disabled]);\n useImperativeHandle(menuRef, () => ({ open: () => { if (!picker.disabled) setOpen(true); } }), [picker.disabled]);\n return <Popover open={open && !picker.disabled} onOpenChange={(next) => { if (!next) setOpen(false); }} title={picker.label} closeLabel={closeLabel}\n descriptor={{ placement: \"top\", align: \"start\" }} className=\"hjm-message-reactions\" trigger={<div\n className={triggerClassName} tabIndex={picker.disabled ? -1 : 0} role={interactiveContent?\"group\":\"button\"} aria-label={picker.label} aria-disabled={picker.disabled}\n onContextMenu={event => { event.preventDefault(); cancel(); if (!picker.disabled) setOpen(true); }}\n // Only the bubble itself opens reactions: with interactiveContent, Enter/Space on a nested\n // link or button must keep its native activation instead of being swallowed here.\n onKeyDown={event => { if (event.target === event.currentTarget && (event.key === \"Enter\" || event.key === \" \") && !picker.disabled) { event.preventDefault(); setOpen(true); } }}\n onPointerDown={event => {\n if (picker.disabled || event.button !== 0 || (event.target as HTMLElement).closest(\"button,a,input,textarea\")) return;\n cancel(); held.current = false;\n const { clientX: x, clientY: y } = event;\n press.current = { x, y, timer: setTimeout(() => { held.current = true; press.current = null; setOpen(true); }, screenPatternRecipe.reactionHoldMs) };\n }}\n onPointerMove={event => { const start = press.current; if (start && Math.hypot(event.clientX - start.x, event.clientY - start.y) > screenPatternRecipe.reactionMoveTolerance) cancel(); }}\n onPointerCancel={cancel} onPointerLeave={cancel} onPointerUp={cancel}\n onClickCapture={event => { if (held.current) { event.preventDefault(); event.stopPropagation(); held.current = false; } }}\n >{children}</div>}>\n {/* Action-only menus (comments, 2026-10-16 reference) pass no options and show no strip. */}\n {picker.options.length ? <ReactionPicker {...picker} layout=\"strip\" onValueChange={value => { picker.onValueChange(value); setOpen(false); }} /> : null}\n {menuTitle || rows.length ? <div className=\"hjm-message-menu\">\n {menuTitle ? <Text variant=\"caption\" tone=\"muted\" className=\"hjm-message-menu__title\">{menuTitle}</Text> : null}\n {rows.map(row => <button key={row.id} type=\"button\" className=\"hjm-message-menu__item\" data-tone={row.tone === \"danger\" ? \"danger\" : undefined} disabled={row.disabled} onClick={() => { setOpen(false); row.onPress(); }}>\n {row.icon ? <span className=\"hjm-message-menu__icon\" aria-hidden=\"true\">{row.icon}</span> : null}<span className=\"hjm-message-menu__label\">{row.label}</span>{row.submenu ? <span className=\"hjm-message-menu__chevron\" aria-hidden=\"true\">›</span> : null}</button>)}\n </div> : null}\n </Popover>;\n}\n\n/** ChatMessage strips its summary before spreading the rest into the hold menu. */\nexport function omitReactionSummary<T extends Readonly<{ summary?: unknown }>>({ summary: _summary, ...rest }: T): Omit<T, \"summary\"> {\n return rest;\n}\n\n/**\n * Current reactions as one button beside the time; pressing it opens the hold menu (the press target and its name\n * are the whole pill, so per-emoji parts are hidden from assistive tech). The pill shows the brand border when the\n * reader's own reaction is among the items.\n */\nexport function ReactionSummaryButton({ label, items, selected, disabled, onPress }: Readonly<{ label: string; items: readonly (ChatReactionSummaryItem & Readonly<{ showCount: boolean }>)[]; selected: string | null; disabled: boolean; onPress(): void }>) {\n const r = chatMessageRecipe.reactionSummary;\n const mine = items.some(item => item.id === selected);\n return <button type=\"button\" className=\"hjm-chat-message__reaction-summary\" aria-label={label} disabled={disabled} data-selected={mine || undefined} onClick={onPress}\n style={{ minBlockSize: r.minHeight, paddingInline: r.paddingInline, gap: r.itemGap }}>\n {items.map(item => <span key={item.id} aria-hidden=\"true\" style={{ display: \"inline-flex\", alignItems: \"center\", gap: r.emojiGap }}><span>{item.emoji}</span>{item.showCount ? <Text as=\"span\" variant=\"caption\">{item.count}</Text> : null}</span>)}\n </button>;\n}\n"]}
|