@mattermost/compass-ui 0.1.0-alpha.26 → 0.1.0-alpha.28
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/compass-ui.css +16 -0
- package/dist/components/admin-console-footer/AdminConsoleFooter.css +1 -1
- package/dist/components/admin-console-footer/AdminConsoleFooter.module.scss.cjs +1 -1
- package/dist/components/admin-console-footer/AdminConsoleFooter.module.scss.js +7 -7
- package/dist/components/admin-console-header/AdminConsoleHeader.css +1 -1
- package/dist/components/admin-console-header/AdminConsoleHeader.module.scss.cjs +1 -1
- package/dist/components/admin-console-header/AdminConsoleHeader.module.scss.js +8 -8
- package/dist/components/admin-panel/AdminPanel.css +1 -1
- package/dist/components/admin-panel/AdminPanel.module.scss.cjs +1 -1
- package/dist/components/admin-panel/AdminPanel.module.scss.js +5 -5
- package/dist/components/admin-panel-footer/AdminPanelFooter.css +1 -1
- package/dist/components/admin-panel-footer/AdminPanelFooter.module.scss.cjs +1 -1
- package/dist/components/admin-panel-footer/AdminPanelFooter.module.scss.js +5 -5
- package/dist/components/admin-panel-header/AdminPanelHeader.cjs +1 -1
- package/dist/components/admin-panel-header/AdminPanelHeader.cjs.map +1 -1
- package/dist/components/admin-panel-header/AdminPanelHeader.css +1 -1
- package/dist/components/admin-panel-header/AdminPanelHeader.d.ts +6 -0
- package/dist/components/admin-panel-header/AdminPanelHeader.d.ts.map +1 -1
- package/dist/components/admin-panel-header/AdminPanelHeader.js +145 -109
- package/dist/components/admin-panel-header/AdminPanelHeader.js.map +1 -1
- package/dist/components/admin-panel-header/AdminPanelHeader.module.scss.cjs +1 -1
- package/dist/components/admin-panel-header/AdminPanelHeader.module.scss.js +11 -10
- package/dist/components/admin-panel-header/AdminPanelHeader.module.scss.js.map +1 -1
- package/dist/components/attachment-card/AttachmentCard.css +1 -1
- package/dist/components/attachment-card/AttachmentCard.module.scss.cjs +1 -1
- package/dist/components/attachment-card/AttachmentCard.module.scss.js +22 -19
- package/dist/components/attachment-card/AttachmentCard.module.scss.js.map +1 -1
- package/dist/components/button/Button.css +1 -1
- package/dist/components/button/Button.module.scss.cjs +1 -1
- package/dist/components/button/Button.module.scss.js +20 -19
- package/dist/components/button/Button.module.scss.js.map +1 -1
- package/dist/components/card-button/CardButton.css +1 -1
- package/dist/components/card-button/CardButton.module.scss.cjs +1 -1
- package/dist/components/card-button/CardButton.module.scss.js +7 -7
- package/dist/components/card-button/CardButtonGroup.css +1 -1
- package/dist/components/card-button/CardButtonGroup.module.scss.cjs +1 -1
- package/dist/components/card-button/CardButtonGroup.module.scss.js +1 -1
- package/dist/components/channel-info-msg-header/ChannelInfoMsgHeader.css +1 -1
- package/dist/components/channel-info-msg-header/ChannelInfoMsgHeader.module.scss.cjs +1 -1
- package/dist/components/channel-info-msg-header/ChannelInfoMsgHeader.module.scss.js +8 -8
- package/dist/components/channel-sidebar-item/ChannelSidebarItem.cjs +1 -1
- package/dist/components/channel-sidebar-item/ChannelSidebarItem.cjs.map +1 -1
- package/dist/components/channel-sidebar-item/ChannelSidebarItem.css +1 -1
- package/dist/components/channel-sidebar-item/ChannelSidebarItem.d.ts +66 -7
- package/dist/components/channel-sidebar-item/ChannelSidebarItem.d.ts.map +1 -1
- package/dist/components/channel-sidebar-item/ChannelSidebarItem.js +163 -93
- package/dist/components/channel-sidebar-item/ChannelSidebarItem.js.map +1 -1
- package/dist/components/channel-sidebar-item/ChannelSidebarItem.module.scss.cjs +1 -1
- package/dist/components/channel-sidebar-item/ChannelSidebarItem.module.scss.js +35 -22
- package/dist/components/channel-sidebar-item/ChannelSidebarItem.module.scss.js.map +1 -1
- package/dist/components/checkbox/Checkbox.css +1 -1
- package/dist/components/checkbox/Checkbox.module.scss.cjs +1 -1
- package/dist/components/checkbox/Checkbox.module.scss.js +7 -7
- package/dist/components/chip/Chip.cjs +1 -1
- package/dist/components/chip/Chip.cjs.map +1 -1
- package/dist/components/chip/Chip.css +1 -1
- package/dist/components/chip/Chip.d.ts.map +1 -1
- package/dist/components/chip/Chip.js +8 -8
- package/dist/components/chip/Chip.js.map +1 -1
- package/dist/components/chip/Chip.module.scss.cjs +1 -1
- package/dist/components/chip/Chip.module.scss.js +13 -10
- package/dist/components/chip/Chip.module.scss.js.map +1 -1
- package/dist/components/chip/ChipGroup.cjs +1 -1
- package/dist/components/chip/ChipGroup.cjs.map +1 -1
- package/dist/components/chip/ChipGroup.css +1 -1
- package/dist/components/chip/ChipGroup.d.ts +1 -1
- package/dist/components/chip/ChipGroup.d.ts.map +1 -1
- package/dist/components/chip/ChipGroup.js +30 -30
- package/dist/components/chip/ChipGroup.js.map +1 -1
- package/dist/components/chip/ChipGroup.module.scss.cjs +1 -1
- package/dist/components/chip/ChipGroup.module.scss.js +1 -1
- package/dist/components/combobox/Combobox.cjs +1 -1
- package/dist/components/combobox/Combobox.cjs.map +1 -1
- package/dist/components/combobox/Combobox.css +1 -1
- package/dist/components/combobox/Combobox.d.ts +10 -0
- package/dist/components/combobox/Combobox.d.ts.map +1 -1
- package/dist/components/combobox/Combobox.js +269 -252
- package/dist/components/combobox/Combobox.js.map +1 -1
- package/dist/components/combobox/Combobox.module.scss.cjs +1 -1
- package/dist/components/combobox/Combobox.module.scss.js +34 -31
- package/dist/components/combobox/Combobox.module.scss.js.map +1 -1
- package/dist/components/date-range-picker/DateRangePicker.cjs +1 -1
- package/dist/components/date-range-picker/DateRangePicker.cjs.map +1 -1
- package/dist/components/date-range-picker/DateRangePicker.css +1 -1
- package/dist/components/date-range-picker/DateRangePicker.d.ts +14 -1
- package/dist/components/date-range-picker/DateRangePicker.d.ts.map +1 -1
- package/dist/components/date-range-picker/DateRangePicker.js +217 -195
- package/dist/components/date-range-picker/DateRangePicker.js.map +1 -1
- package/dist/components/date-range-picker/DateRangePicker.module.scss.cjs +1 -1
- package/dist/components/date-range-picker/DateRangePicker.module.scss.js +29 -26
- package/dist/components/date-range-picker/DateRangePicker.module.scss.js.map +1 -1
- package/dist/components/divider/Divider.css +1 -1
- package/dist/components/divider/Divider.module.scss.cjs +1 -1
- package/dist/components/divider/Divider.module.scss.js +1 -1
- package/dist/components/dropdown/Dropdown.css +1 -1
- package/dist/components/dropdown/Dropdown.module.scss.cjs +1 -1
- package/dist/components/dropdown/Dropdown.module.scss.js +23 -22
- package/dist/components/dropdown/Dropdown.module.scss.js.map +1 -1
- package/dist/components/emoji/Emoji.css +1 -1
- package/dist/components/emoji/Emoji.module.scss.cjs +1 -1
- package/dist/components/emoji/Emoji.module.scss.js +12 -12
- package/dist/components/emoji-button/EmojiButton.css +1 -1
- package/dist/components/emoji-button/EmojiButton.module.scss.cjs +1 -1
- package/dist/components/emoji-button/EmojiButton.module.scss.js +12 -9
- package/dist/components/emoji-button/EmojiButton.module.scss.js.map +1 -1
- package/dist/components/emoji-popover/EmojiPopover.css +1 -1
- package/dist/components/emoji-popover/EmojiPopover.module.scss.cjs +1 -1
- package/dist/components/emoji-popover/EmojiPopover.module.scss.js +21 -21
- package/dist/components/empty-state/EmptyState.cjs +1 -1
- package/dist/components/empty-state/EmptyState.cjs.map +1 -1
- package/dist/components/empty-state/EmptyState.css +1 -1
- package/dist/components/empty-state/EmptyState.d.ts +21 -1
- package/dist/components/empty-state/EmptyState.d.ts.map +1 -1
- package/dist/components/empty-state/EmptyState.js +30 -23
- package/dist/components/empty-state/EmptyState.js.map +1 -1
- package/dist/components/empty-state/EmptyState.module.scss.cjs +1 -1
- package/dist/components/empty-state/EmptyState.module.scss.js +7 -7
- package/dist/components/empty-state/index.d.ts +1 -1
- package/dist/components/empty-state/index.d.ts.map +1 -1
- package/dist/components/feature-discovery-panel/FeatureDiscoveryPanel.css +1 -1
- package/dist/components/feature-discovery-panel/FeatureDiscoveryPanel.module.scss.cjs +1 -1
- package/dist/components/feature-discovery-panel/FeatureDiscoveryPanel.module.scss.js +9 -9
- package/dist/components/field/FieldClearButton.css +1 -1
- package/dist/components/field/FieldClearButton.module.scss.cjs +1 -1
- package/dist/components/field/FieldClearButton.module.scss.js +3 -3
- package/dist/components/field-message/FieldMessage.css +1 -1
- package/dist/components/field-message/FieldMessage.module.scss.cjs +1 -1
- package/dist/components/field-message/FieldMessage.module.scss.js +7 -7
- package/dist/components/global-banner/GlobalBanner.css +1 -1
- package/dist/components/global-banner/GlobalBanner.module.scss.cjs +1 -1
- package/dist/components/global-banner/GlobalBanner.module.scss.js +10 -10
- package/dist/components/icon/Icon.css +1 -1
- package/dist/components/icon/Icon.module.scss.cjs +1 -1
- package/dist/components/icon/Icon.module.scss.js +13 -13
- package/dist/components/icon-button/IconButton.css +1 -1
- package/dist/components/icon-button/IconButton.module.scss.cjs +1 -1
- package/dist/components/icon-button/IconButton.module.scss.js +19 -16
- package/dist/components/icon-button/IconButton.module.scss.js.map +1 -1
- package/dist/components/illustration/Illustration.css +1 -1
- package/dist/components/illustration/Illustration.module.scss.cjs +1 -1
- package/dist/components/illustration/Illustration.module.scss.js +1 -1
- package/dist/components/image-preview/ImagePreview.css +1 -1
- package/dist/components/image-preview/ImagePreview.module.scss.cjs +1 -1
- package/dist/components/image-preview/ImagePreview.module.scss.js +15 -15
- package/dist/components/link-preview/LinkPreview.css +1 -1
- package/dist/components/link-preview/LinkPreview.module.scss.cjs +1 -1
- package/dist/components/link-preview/LinkPreview.module.scss.js +14 -14
- package/dist/components/mention-badge/MentionBadge.css +1 -1
- package/dist/components/mention-badge/MentionBadge.module.scss.cjs +1 -1
- package/dist/components/mention-badge/MentionBadge.module.scss.js +9 -9
- package/dist/components/menu-group-heading/MenuGroupHeading.css +1 -1
- package/dist/components/menu-group-heading/MenuGroupHeading.module.scss.cjs +1 -1
- package/dist/components/menu-group-heading/MenuGroupHeading.module.scss.js +2 -2
- package/dist/components/menu-item/MenuItem.css +1 -1
- package/dist/components/menu-item/MenuItem.module.scss.cjs +1 -1
- package/dist/components/menu-item/MenuItem.module.scss.js +18 -18
- package/dist/components/message-actions/MessageActions.css +1 -1
- package/dist/components/message-actions/MessageActions.module.scss.cjs +1 -1
- package/dist/components/message-actions/MessageActions.module.scss.js +2 -2
- package/dist/components/message-header/MessageHeader.css +1 -1
- package/dist/components/message-header/MessageHeader.module.scss.cjs +1 -1
- package/dist/components/message-header/MessageHeader.module.scss.js +3 -3
- package/dist/components/message-separator/MessageSeparator.css +1 -1
- package/dist/components/message-separator/MessageSeparator.module.scss.cjs +1 -1
- package/dist/components/message-separator/MessageSeparator.module.scss.js +11 -11
- package/dist/components/modal/Modal.cjs +1 -1
- package/dist/components/modal/Modal.cjs.map +1 -1
- package/dist/components/modal/Modal.css +1 -1
- package/dist/components/modal/Modal.d.ts +11 -1
- package/dist/components/modal/Modal.d.ts.map +1 -1
- package/dist/components/modal/Modal.js +38 -36
- package/dist/components/modal/Modal.js.map +1 -1
- package/dist/components/modal/Modal.module.scss.cjs +1 -1
- package/dist/components/modal/Modal.module.scss.js +11 -11
- package/dist/components/modal/ModalOverlay.css +1 -1
- package/dist/components/modal/ModalOverlay.module.scss.cjs +1 -1
- package/dist/components/modal/ModalOverlay.module.scss.js +5 -5
- package/dist/components/modal-footer/ModalFooter.css +1 -1
- package/dist/components/modal-footer/ModalFooter.module.scss.cjs +1 -1
- package/dist/components/modal-footer/ModalFooter.module.scss.js +11 -11
- package/dist/components/modal-header/ModalHeader.cjs +1 -1
- package/dist/components/modal-header/ModalHeader.cjs.map +1 -1
- package/dist/components/modal-header/ModalHeader.css +1 -1
- package/dist/components/modal-header/ModalHeader.d.ts +13 -3
- package/dist/components/modal-header/ModalHeader.d.ts.map +1 -1
- package/dist/components/modal-header/ModalHeader.js +61 -55
- package/dist/components/modal-header/ModalHeader.js.map +1 -1
- package/dist/components/modal-header/ModalHeader.module.scss.cjs +1 -1
- package/dist/components/modal-header/ModalHeader.module.scss.js +18 -16
- package/dist/components/modal-header/ModalHeader.module.scss.js.map +1 -1
- package/dist/components/more-unreads-banner/MoreUnreadsBanner.css +1 -1
- package/dist/components/more-unreads-banner/MoreUnreadsBanner.module.scss.cjs +1 -1
- package/dist/components/more-unreads-banner/MoreUnreadsBanner.module.scss.js +8 -5
- package/dist/components/more-unreads-banner/MoreUnreadsBanner.module.scss.js.map +1 -1
- package/dist/components/new-message-banner/NewMessageBanner.css +1 -1
- package/dist/components/new-message-banner/NewMessageBanner.module.scss.cjs +1 -1
- package/dist/components/new-message-banner/NewMessageBanner.module.scss.js +9 -9
- package/dist/components/pagination-dots/PaginationDots.css +1 -1
- package/dist/components/pagination-dots/PaginationDots.module.scss.cjs +1 -1
- package/dist/components/pagination-dots/PaginationDots.module.scss.js +10 -10
- package/dist/components/password-input/PasswordInput.css +1 -1
- package/dist/components/password-input/PasswordInput.module.scss.cjs +1 -1
- package/dist/components/password-input/PasswordInput.module.scss.js +15 -14
- package/dist/components/password-input/PasswordInput.module.scss.js.map +1 -1
- package/dist/components/permalink-preview/PermalinkPreview.css +1 -1
- package/dist/components/permalink-preview/PermalinkPreview.module.scss.cjs +1 -1
- package/dist/components/permalink-preview/PermalinkPreview.module.scss.js +13 -13
- package/dist/components/pinned-saved-indicators/PinnedSavedIndicators.css +1 -1
- package/dist/components/pinned-saved-indicators/PinnedSavedIndicators.module.scss.cjs +1 -1
- package/dist/components/pinned-saved-indicators/PinnedSavedIndicators.module.scss.js +7 -7
- package/dist/components/popover-menu/PopoverMenu.css +1 -1
- package/dist/components/popover-menu/PopoverMenu.module.scss.cjs +1 -1
- package/dist/components/popover-menu/PopoverMenu.module.scss.js +13 -13
- package/dist/components/popover-notice/PopoverNotice.css +1 -1
- package/dist/components/popover-notice/PopoverNotice.module.scss.cjs +1 -1
- package/dist/components/popover-notice/PopoverNotice.module.scss.js +14 -14
- package/dist/components/profile-popover/ProfilePopover.css +1 -1
- package/dist/components/profile-popover/ProfilePopover.module.scss.cjs +1 -1
- package/dist/components/profile-popover/ProfilePopover.module.scss.js +33 -33
- package/dist/components/progress-bar/ProgressBar.css +1 -1
- package/dist/components/progress-bar/ProgressBar.module.scss.cjs +1 -1
- package/dist/components/progress-bar/ProgressBar.module.scss.js +9 -9
- package/dist/components/radio/Radio.css +1 -1
- package/dist/components/radio/Radio.module.scss.cjs +1 -1
- package/dist/components/radio/Radio.module.scss.js +12 -12
- package/dist/components/reaction-button/ReactionButton.css +1 -1
- package/dist/components/reaction-button/ReactionButton.module.scss.cjs +1 -1
- package/dist/components/reaction-button/ReactionButton.module.scss.js +8 -8
- package/dist/components/reactions-row/ReactionsRow.css +1 -1
- package/dist/components/reactions-row/ReactionsRow.module.scss.cjs +1 -1
- package/dist/components/reactions-row/ReactionsRow.module.scss.js +8 -8
- package/dist/components/right-sidebar-header/RightSidebarHeader.cjs +1 -1
- package/dist/components/right-sidebar-header/RightSidebarHeader.cjs.map +1 -1
- package/dist/components/right-sidebar-header/RightSidebarHeader.css +1 -1
- package/dist/components/right-sidebar-header/RightSidebarHeader.d.ts.map +1 -1
- package/dist/components/right-sidebar-header/RightSidebarHeader.js +39 -36
- package/dist/components/right-sidebar-header/RightSidebarHeader.js.map +1 -1
- package/dist/components/right-sidebar-header/RightSidebarHeader.module.scss.cjs +1 -1
- package/dist/components/right-sidebar-header/RightSidebarHeader.module.scss.js +12 -13
- package/dist/components/right-sidebar-header/RightSidebarHeader.module.scss.js.map +1 -1
- package/dist/components/scrollbar/Scrollbar.css +1 -1
- package/dist/components/scrollbar/Scrollbar.module.scss.cjs +1 -1
- package/dist/components/scrollbar/Scrollbar.module.scss.js +5 -5
- package/dist/components/search-input/SearchInput.css +1 -1
- package/dist/components/search-input/SearchInput.module.scss.cjs +1 -1
- package/dist/components/search-input/SearchInput.module.scss.js +15 -15
- package/dist/components/search-tip-banner/SearchTipBanner.css +1 -1
- package/dist/components/search-tip-banner/SearchTipBanner.module.scss.cjs +1 -1
- package/dist/components/search-tip-banner/SearchTipBanner.module.scss.js +3 -3
- package/dist/components/section-notice/SectionNotice.css +1 -1
- package/dist/components/section-notice/SectionNotice.module.scss.cjs +1 -1
- package/dist/components/section-notice/SectionNotice.module.scss.js +12 -12
- package/dist/components/segmented-control/SegmentedControl.cjs +2 -0
- package/dist/components/segmented-control/SegmentedControl.cjs.map +1 -0
- package/dist/components/segmented-control/SegmentedControl.css +1 -0
- package/dist/components/segmented-control/SegmentedControl.d.ts +71 -0
- package/dist/components/segmented-control/SegmentedControl.d.ts.map +1 -0
- package/dist/components/segmented-control/SegmentedControl.js +173 -0
- package/dist/components/segmented-control/SegmentedControl.js.map +1 -0
- package/dist/components/segmented-control/SegmentedControl.module.scss.cjs +2 -0
- package/dist/components/segmented-control/SegmentedControl.module.scss.cjs.map +1 -0
- package/dist/components/segmented-control/SegmentedControl.module.scss.js +20 -0
- package/dist/components/segmented-control/SegmentedControl.module.scss.js.map +1 -0
- package/dist/components/segmented-control/index.cjs +2 -0
- package/dist/components/segmented-control/index.cjs.map +1 -0
- package/dist/components/segmented-control/index.d.ts +3 -0
- package/dist/components/segmented-control/index.d.ts.map +1 -0
- package/dist/components/segmented-control/index.js +5 -0
- package/dist/components/segmented-control/index.js.map +1 -0
- package/dist/components/select/Select.cjs +1 -1
- package/dist/components/select/Select.cjs.map +1 -1
- package/dist/components/select/Select.css +1 -1
- package/dist/components/select/Select.d.ts +14 -0
- package/dist/components/select/Select.d.ts.map +1 -1
- package/dist/components/select/Select.js +151 -130
- package/dist/components/select/Select.js.map +1 -1
- package/dist/components/select/Select.module.scss.cjs +1 -1
- package/dist/components/select/Select.module.scss.js +28 -26
- package/dist/components/select/Select.module.scss.js.map +1 -1
- package/dist/components/shortcut-tag/ShortcutTag.css +1 -1
- package/dist/components/shortcut-tag/ShortcutTag.module.scss.cjs +1 -1
- package/dist/components/shortcut-tag/ShortcutTag.module.scss.js +7 -7
- package/dist/components/spinner/Spinner.css +1 -1
- package/dist/components/spinner/Spinner.module.scss.cjs +1 -1
- package/dist/components/spinner/Spinner.module.scss.js +2 -2
- package/dist/components/status-badge/StatusBadge.cjs +1 -1
- package/dist/components/status-badge/StatusBadge.cjs.map +1 -1
- package/dist/components/status-badge/StatusBadge.css +1 -1
- package/dist/components/status-badge/StatusBadge.d.ts +3 -1
- package/dist/components/status-badge/StatusBadge.d.ts.map +1 -1
- package/dist/components/status-badge/StatusBadge.js +16 -15
- package/dist/components/status-badge/StatusBadge.js.map +1 -1
- package/dist/components/status-badge/StatusBadge.module.scss.cjs +1 -1
- package/dist/components/status-badge/StatusBadge.module.scss.js +11 -11
- package/dist/components/switch/Switch.css +1 -1
- package/dist/components/switch/Switch.module.scss.cjs +1 -1
- package/dist/components/switch/Switch.module.scss.js +8 -8
- package/dist/components/tabs/Tabs.css +1 -1
- package/dist/components/tabs/Tabs.module.scss.cjs +1 -1
- package/dist/components/tabs/Tabs.module.scss.js +16 -13
- package/dist/components/tabs/Tabs.module.scss.js.map +1 -1
- package/dist/components/tag/Tag.css +1 -1
- package/dist/components/tag/Tag.module.scss.cjs +1 -1
- package/dist/components/tag/Tag.module.scss.js +11 -11
- package/dist/components/team-avatar/TeamAvatar.css +1 -1
- package/dist/components/team-avatar/TeamAvatar.module.scss.cjs +1 -1
- package/dist/components/team-avatar/TeamAvatar.module.scss.js +17 -17
- package/dist/components/text-area/TextArea.css +1 -1
- package/dist/components/text-area/TextArea.module.scss.cjs +1 -1
- package/dist/components/text-area/TextArea.module.scss.js +12 -12
- package/dist/components/text-input/TextInput.css +1 -1
- package/dist/components/text-input/TextInput.module.scss.cjs +1 -1
- package/dist/components/text-input/TextInput.module.scss.js +19 -19
- package/dist/components/thread-footer/ThreadFooter.cjs +1 -1
- package/dist/components/thread-footer/ThreadFooter.cjs.map +1 -1
- package/dist/components/thread-footer/ThreadFooter.css +1 -1
- package/dist/components/thread-footer/ThreadFooter.d.ts.map +1 -1
- package/dist/components/thread-footer/ThreadFooter.js +14 -14
- package/dist/components/thread-footer/ThreadFooter.js.map +1 -1
- package/dist/components/thread-footer/ThreadFooter.module.scss.cjs +1 -1
- package/dist/components/thread-footer/ThreadFooter.module.scss.js +19 -20
- package/dist/components/thread-footer/ThreadFooter.module.scss.js.map +1 -1
- package/dist/components/thread-list-item/ThreadListItem.css +1 -1
- package/dist/components/thread-list-item/ThreadListItem.module.scss.cjs +1 -1
- package/dist/components/thread-list-item/ThreadListItem.module.scss.js +26 -26
- package/dist/components/tile-button/TileButton.css +1 -1
- package/dist/components/tile-button/TileButton.module.scss.cjs +1 -1
- package/dist/components/tile-button/TileButton.module.scss.js +6 -6
- package/dist/components/toast/Toast.css +1 -1
- package/dist/components/toast/Toast.module.scss.cjs +1 -1
- package/dist/components/toast/Toast.module.scss.js +11 -11
- package/dist/components/tooltip/Tooltip.cjs +1 -1
- package/dist/components/tooltip/Tooltip.cjs.map +1 -1
- package/dist/components/tooltip/Tooltip.css +1 -1
- package/dist/components/tooltip/Tooltip.d.ts +10 -1
- package/dist/components/tooltip/Tooltip.d.ts.map +1 -1
- package/dist/components/tooltip/Tooltip.js +29 -17
- package/dist/components/tooltip/Tooltip.js.map +1 -1
- package/dist/components/tooltip/Tooltip.module.scss.cjs +1 -1
- package/dist/components/tooltip/Tooltip.module.scss.js +7 -6
- package/dist/components/tooltip/Tooltip.module.scss.js.map +1 -1
- package/dist/components/tooltip/index.d.ts +1 -1
- package/dist/components/tooltip/index.d.ts.map +1 -1
- package/dist/components/tour-point/TourPoint.css +1 -1
- package/dist/components/tour-point/TourPoint.module.scss.cjs +1 -1
- package/dist/components/tour-point/TourPoint.module.scss.js +28 -28
- package/dist/components/unread-badge/UnreadBadge.css +1 -1
- package/dist/components/unread-badge/UnreadBadge.module.scss.cjs +1 -1
- package/dist/components/unread-badge/UnreadBadge.module.scss.js +5 -5
- package/dist/components/user-avatar/UserAvatar.cjs +1 -1
- package/dist/components/user-avatar/UserAvatar.cjs.map +1 -1
- package/dist/components/user-avatar/UserAvatar.css +1 -1
- package/dist/components/user-avatar/UserAvatar.d.ts +18 -8
- package/dist/components/user-avatar/UserAvatar.d.ts.map +1 -1
- package/dist/components/user-avatar/UserAvatar.js +84 -52
- package/dist/components/user-avatar/UserAvatar.js.map +1 -1
- package/dist/components/user-avatar/UserAvatar.module.scss.cjs +1 -1
- package/dist/components/user-avatar/UserAvatar.module.scss.js +33 -26
- package/dist/components/user-avatar/UserAvatar.module.scss.js.map +1 -1
- package/dist/components/user-avatar-group/UserAvatarGroup.css +1 -1
- package/dist/components/user-avatar-group/UserAvatarGroup.module.scss.cjs +1 -1
- package/dist/components/user-avatar-group/UserAvatarGroup.module.scss.js +14 -14
- package/dist/index.cjs +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +57 -55
- package/dist/index.js.map +1 -1
- package/package.json +4 -1
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import { HTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
import { BuiltInButtonProps } from '../../utils/props';
|
|
3
|
+
/** `tablist` switches views. `radiogroup` is a short exclusive form choice. */
|
|
4
|
+
export type SegmentedControlRole = 'tablist' | 'radiogroup';
|
|
5
|
+
/**
|
|
6
|
+
* `small` matches a small Button (12px label, 12px icon). `medium` matches a
|
|
7
|
+
* medium Button (14px label, 16px icon).
|
|
8
|
+
*/
|
|
9
|
+
export type SegmentedControlSize = 'small' | 'medium';
|
|
10
|
+
export interface SegmentedControlOption {
|
|
11
|
+
/**
|
|
12
|
+
* Stable id for this segment. Used as the React key and the `onChange`
|
|
13
|
+
* argument, so it is a string rather than translated text.
|
|
14
|
+
*/
|
|
15
|
+
key: string;
|
|
16
|
+
/** Segment label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */
|
|
17
|
+
label: ReactNode;
|
|
18
|
+
/**
|
|
19
|
+
* Optional leading icon. Pass `<Icon glyph={<SomeIcon />} />`;
|
|
20
|
+
* SegmentedControl provides the size via context (12px at `small`, 16px at
|
|
21
|
+
* `medium`), matching Button. No `size` prop is needed on the Icon.
|
|
22
|
+
*/
|
|
23
|
+
icon?: ReactNode;
|
|
24
|
+
/** Optional id for this segment (pair with `panelId` for `aria-controls`). */
|
|
25
|
+
id?: string;
|
|
26
|
+
/**
|
|
27
|
+
* Optional id of the host panel this segment controls. Applied as
|
|
28
|
+
* `aria-controls` when `role` is `tablist`. The host owns the panel.
|
|
29
|
+
*/
|
|
30
|
+
panelId?: string;
|
|
31
|
+
/** When true, the segment can't be selected and arrow keys skip it. */
|
|
32
|
+
disabled?: boolean;
|
|
33
|
+
/** Native tooltip text, e.g. to explain why the segment is disabled. */
|
|
34
|
+
title?: string;
|
|
35
|
+
/**
|
|
36
|
+
* Extra attributes for this segment's `<button>` (e.g. `data-testid`).
|
|
37
|
+
* Segment semantics (`role`, `aria-selected` / `aria-checked`, `tabIndex`,
|
|
38
|
+
* `type`) take precedence. `className` is merged. `onClick`, `onKeyDown`,
|
|
39
|
+
* and `onMouseDown` run first; `preventDefault()` skips selection.
|
|
40
|
+
*/
|
|
41
|
+
buttonProps?: BuiltInButtonProps;
|
|
42
|
+
}
|
|
43
|
+
export interface SegmentedControlProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'role'> {
|
|
44
|
+
/** Segments, in order. One is selected. */
|
|
45
|
+
options: SegmentedControlOption[];
|
|
46
|
+
/** Key of the selected segment. */
|
|
47
|
+
value: string;
|
|
48
|
+
/** Called with the segment key when the selection changes. */
|
|
49
|
+
onChange: (key: string) => void;
|
|
50
|
+
/**
|
|
51
|
+
* Semantics. `tablist` (default) switches views: arrow keys move focus, and
|
|
52
|
+
* Enter, Space, or a click selects. The host owns the panel. `radiogroup`
|
|
53
|
+
* is a short exclusive form choice: arrow keys move the selection. Pass
|
|
54
|
+
* `aria-label` or `aria-labelledby` so the group has a name.
|
|
55
|
+
*/
|
|
56
|
+
role?: SegmentedControlRole;
|
|
57
|
+
/**
|
|
58
|
+
* Size of the label and leading icon, matching Button. `small` (default)
|
|
59
|
+
* is 12px text with a 12px icon. `medium` is 14px text with a 16px icon.
|
|
60
|
+
*/
|
|
61
|
+
size?: SegmentedControlSize;
|
|
62
|
+
/** Optional CSS class name. */
|
|
63
|
+
className?: string;
|
|
64
|
+
}
|
|
65
|
+
/**
|
|
66
|
+
* Segmented controls let people pick one option from a short, exclusive set shown as one
|
|
67
|
+
* compact control — search modes in a header, a filter on a list, or a form choice that
|
|
68
|
+
* doesn't need a radio mark. One segment is selected; choosing another replaces it.
|
|
69
|
+
*/
|
|
70
|
+
export default function SegmentedControl({ options, value, onChange, role, size, className, onBlur, ...rest }: SegmentedControlProps): import("react/jsx-runtime").JSX.Element;
|
|
71
|
+
//# sourceMappingURL=SegmentedControl.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../src/components/segmented-control/SegmentedControl.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,cAAc,EAEnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAmB,KAAK,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAIzE,+EAA+E;AAC/E,MAAM,MAAM,oBAAoB,GAAG,SAAS,GAAG,YAAY,CAAC;AAE5D;;;GAGG;AACH,MAAM,MAAM,oBAAoB,GAAG,OAAO,GAAG,QAAQ,CAAC;AAOtD,MAAM,WAAW,sBAAsB;IACrC;;;OAGG;IACH,GAAG,EAAE,MAAM,CAAC;IACZ,4EAA4E;IAC5E,KAAK,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,8EAA8E;IAC9E,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wEAAwE;IACxE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,WAAW,CAAC,EAAE,kBAAkB,CAAC;CAClC;AAED,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CACjD,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,GAAG,MAAM,CACpB;IACC,2CAA2C;IAC3C,OAAO,EAAE,sBAAsB,EAAE,CAAC;IAClC,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,8DAA8D;IAC9D,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B;;;OAGG;IACH,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA4CD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,OAAO,EACP,KAAK,EACL,QAAQ,EACR,IAAgB,EAChB,IAAc,EACd,SAAS,EACT,MAAM,EACN,GAAG,IAAI,EACR,EAAE,qBAAqB,2CAgNvB"}
|
|
@@ -0,0 +1,173 @@
|
|
|
1
|
+
import { jsxs as V, jsx as k } from "react/jsx-runtime";
|
|
2
|
+
import { useRef as N, useState as p, useLayoutEffect as W, useEffect as q, createElement as U } from "react";
|
|
3
|
+
import { IconSlotContext as Z } from "../icon/Icon.js";
|
|
4
|
+
import { mergeClassNames as D } from "../../utils/props.js";
|
|
5
|
+
import { toKebab as B } from "../../utils/string.js";
|
|
6
|
+
import l from "./SegmentedControl.module.scss.js";
|
|
7
|
+
const G = {
|
|
8
|
+
small: "12",
|
|
9
|
+
medium: "16"
|
|
10
|
+
};
|
|
11
|
+
function J(r, t, d) {
|
|
12
|
+
return r < 0 ? t < 0 ? d - 1 : 0 : (r + t + d) % d;
|
|
13
|
+
}
|
|
14
|
+
function Q(r, t, d) {
|
|
15
|
+
const x = d ? "ArrowLeft" : "ArrowRight", h = d ? "ArrowRight" : "ArrowLeft";
|
|
16
|
+
return r === x || t && r === "ArrowDown" ? 1 : r === h || t && r === "ArrowUp" ? -1 : 0;
|
|
17
|
+
}
|
|
18
|
+
function X(r) {
|
|
19
|
+
return !r || r.offsetWidth === 0 ? null : {
|
|
20
|
+
x: r.offsetLeft,
|
|
21
|
+
y: r.offsetTop,
|
|
22
|
+
width: r.offsetWidth,
|
|
23
|
+
height: r.offsetHeight
|
|
24
|
+
};
|
|
25
|
+
}
|
|
26
|
+
function Y(r, t) {
|
|
27
|
+
return r === t || r != null && t != null && r.x === t.x && r.y === t.y && r.width === t.width && r.height === t.height;
|
|
28
|
+
}
|
|
29
|
+
function oe({
|
|
30
|
+
options: r,
|
|
31
|
+
value: t,
|
|
32
|
+
onChange: d,
|
|
33
|
+
role: x = "tablist",
|
|
34
|
+
size: h = "small",
|
|
35
|
+
className: S,
|
|
36
|
+
onBlur: P,
|
|
37
|
+
...A
|
|
38
|
+
}) {
|
|
39
|
+
const _ = N(null), g = N(/* @__PURE__ */ new Map()), [K, b] = p(t), [m, E] = p(null), [C, M] = p(!1), f = x === "radiogroup", z = f ? "radio" : "tab", L = r.map((e) => e.key).join("\0");
|
|
40
|
+
W(() => {
|
|
41
|
+
const e = () => {
|
|
42
|
+
const i = X(g.current.get(t));
|
|
43
|
+
E((y) => Y(y, i) ? y : i);
|
|
44
|
+
};
|
|
45
|
+
e();
|
|
46
|
+
const n = _.current;
|
|
47
|
+
if (typeof ResizeObserver > "u" || !n) return;
|
|
48
|
+
const s = new ResizeObserver(e);
|
|
49
|
+
s.observe(n);
|
|
50
|
+
for (const i of g.current.values())
|
|
51
|
+
s.observe(i);
|
|
52
|
+
return () => s.disconnect();
|
|
53
|
+
}, [t, L, h]);
|
|
54
|
+
const R = m !== null;
|
|
55
|
+
q(() => {
|
|
56
|
+
R && M(!0);
|
|
57
|
+
}, [R]);
|
|
58
|
+
const [O, j] = p(t);
|
|
59
|
+
O !== t && (j(t), b(t));
|
|
60
|
+
const H = G[h], a = r.filter((e) => !e.disabled).map((e) => e.key), $ = a.includes(K) ? K : a.includes(t) ? t : a[0], I = (e, n) => {
|
|
61
|
+
var s;
|
|
62
|
+
b(e), (s = g.current.get(e)) == null || s.focus(), n && d(e);
|
|
63
|
+
}, F = (e) => {
|
|
64
|
+
if (P == null || P(e), e.defaultPrevented || f) return;
|
|
65
|
+
const n = e.currentTarget;
|
|
66
|
+
queueMicrotask(() => {
|
|
67
|
+
if (!n.isConnected) return;
|
|
68
|
+
const s = document.activeElement;
|
|
69
|
+
if (s instanceof Node && n.contains(s)) return;
|
|
70
|
+
const i = a.includes(t) ? t : a[0];
|
|
71
|
+
i && b(i);
|
|
72
|
+
});
|
|
73
|
+
}, T = (e, n) => {
|
|
74
|
+
if (e.altKey || e.ctrlKey || e.metaKey) return;
|
|
75
|
+
const s = a.length;
|
|
76
|
+
if (s === 0) return;
|
|
77
|
+
const i = a.indexOf(n), y = _.current != null && getComputedStyle(_.current).direction === "rtl", w = Q(e.key, f, y);
|
|
78
|
+
if (w !== 0) {
|
|
79
|
+
e.preventDefault();
|
|
80
|
+
const o = a[J(i, w, s)];
|
|
81
|
+
I(o, f && o !== n);
|
|
82
|
+
return;
|
|
83
|
+
}
|
|
84
|
+
if (e.key === "Home" || e.key === "End") {
|
|
85
|
+
e.preventDefault();
|
|
86
|
+
const o = e.key === "Home" ? a[0] : a[s - 1];
|
|
87
|
+
I(o, f && o !== n);
|
|
88
|
+
return;
|
|
89
|
+
}
|
|
90
|
+
(e.key === "Enter" || e.key === " ") && i >= 0 && (e.preventDefault(), b(n), n !== t && d(n));
|
|
91
|
+
};
|
|
92
|
+
return /* @__PURE__ */ V(
|
|
93
|
+
"div",
|
|
94
|
+
{
|
|
95
|
+
...A,
|
|
96
|
+
ref: _,
|
|
97
|
+
role: x,
|
|
98
|
+
"aria-orientation": "horizontal",
|
|
99
|
+
onBlur: F,
|
|
100
|
+
className: D(
|
|
101
|
+
l["segmented-control"],
|
|
102
|
+
l[`segmented-control--size-${B(h)}`],
|
|
103
|
+
S
|
|
104
|
+
),
|
|
105
|
+
children: [
|
|
106
|
+
/* @__PURE__ */ k(
|
|
107
|
+
"span",
|
|
108
|
+
{
|
|
109
|
+
className: D(
|
|
110
|
+
l["segmented-control__indicator"],
|
|
111
|
+
C && l["segmented-control__indicator--ready"],
|
|
112
|
+
!m && l["segmented-control__indicator--unpositioned"]
|
|
113
|
+
),
|
|
114
|
+
style: m ? {
|
|
115
|
+
transform: `translate(${m.x}px, ${m.y}px)`,
|
|
116
|
+
width: m.width,
|
|
117
|
+
height: m.height
|
|
118
|
+
} : void 0,
|
|
119
|
+
"aria-hidden": !0
|
|
120
|
+
}
|
|
121
|
+
),
|
|
122
|
+
r.map((e) => {
|
|
123
|
+
var i, y, w;
|
|
124
|
+
const n = e.key === t, s = e.disabled === !0;
|
|
125
|
+
return /* @__PURE__ */ U(
|
|
126
|
+
"button",
|
|
127
|
+
{
|
|
128
|
+
...e.buttonProps,
|
|
129
|
+
key: e.key,
|
|
130
|
+
ref: (o) => {
|
|
131
|
+
o ? g.current.set(e.key, o) : g.current.delete(e.key);
|
|
132
|
+
},
|
|
133
|
+
id: e.id ?? ((i = e.buttonProps) == null ? void 0 : i.id),
|
|
134
|
+
type: "button",
|
|
135
|
+
role: z,
|
|
136
|
+
tabIndex: $ === e.key ? 0 : -1,
|
|
137
|
+
"aria-selected": f ? void 0 : n,
|
|
138
|
+
"aria-checked": f ? n : void 0,
|
|
139
|
+
"aria-controls": !f && e.panelId ? e.panelId : void 0,
|
|
140
|
+
"aria-disabled": s || void 0,
|
|
141
|
+
disabled: void 0,
|
|
142
|
+
title: e.title ?? ((y = e.buttonProps) == null ? void 0 : y.title),
|
|
143
|
+
className: D(
|
|
144
|
+
l["segmented-control__segment"],
|
|
145
|
+
n && l["segmented-control__segment--active"],
|
|
146
|
+
s && l["segmented-control__segment--disabled"],
|
|
147
|
+
(w = e.buttonProps) == null ? void 0 : w.className
|
|
148
|
+
),
|
|
149
|
+
onMouseDown: (o) => {
|
|
150
|
+
var c, u;
|
|
151
|
+
(u = (c = e.buttonProps) == null ? void 0 : c.onMouseDown) == null || u.call(c, o), s && o.preventDefault();
|
|
152
|
+
},
|
|
153
|
+
onClick: (o) => {
|
|
154
|
+
var c, u;
|
|
155
|
+
(u = (c = e.buttonProps) == null ? void 0 : c.onClick) == null || u.call(c, o), !(o.defaultPrevented || s) && (b(e.key), e.key !== t && d(e.key));
|
|
156
|
+
},
|
|
157
|
+
onKeyDown: (o) => {
|
|
158
|
+
var c, u;
|
|
159
|
+
(u = (c = e.buttonProps) == null ? void 0 : c.onKeyDown) == null || u.call(c, o), !o.defaultPrevented && T(o, e.key);
|
|
160
|
+
}
|
|
161
|
+
},
|
|
162
|
+
e.icon != null && /* @__PURE__ */ k("span", { className: l["segmented-control__icon"], children: /* @__PURE__ */ k(Z.Provider, { value: { size: H }, children: e.icon }) }),
|
|
163
|
+
/* @__PURE__ */ k("span", { className: l["segmented-control__label"], children: e.label })
|
|
164
|
+
);
|
|
165
|
+
})
|
|
166
|
+
]
|
|
167
|
+
}
|
|
168
|
+
);
|
|
169
|
+
}
|
|
170
|
+
export {
|
|
171
|
+
oe as default
|
|
172
|
+
};
|
|
173
|
+
//# sourceMappingURL=SegmentedControl.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SegmentedControl.js","sources":["../../../src/components/segmented-control/SegmentedControl.tsx"],"sourcesContent":["import {\n useEffect,\n useLayoutEffect,\n useRef,\n useState,\n type FocusEvent,\n type HTMLAttributes,\n type KeyboardEvent,\n type ReactNode,\n} from 'react';\nimport type { IconSize } from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport { mergeClassNames, type BuiltInButtonProps } from '@/utils/props';\nimport { toKebab } from '@/utils/string';\nimport styles from './SegmentedControl.module.scss';\n\n/** `tablist` switches views. `radiogroup` is a short exclusive form choice. */\nexport type SegmentedControlRole = 'tablist' | 'radiogroup';\n\n/**\n * `small` matches a small Button (12px label, 12px icon). `medium` matches a\n * medium Button (14px label, 16px icon).\n */\nexport type SegmentedControlSize = 'small' | 'medium';\n\nconst SIZE_ICON_MAP: Record<SegmentedControlSize, IconSize> = {\n small: '12',\n medium: '16',\n};\n\nexport interface SegmentedControlOption {\n /**\n * Stable id for this segment. Used as the React key and the `onChange`\n * argument, so it is a string rather than translated text.\n */\n key: string;\n /** Segment label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n label: ReactNode;\n /**\n * Optional leading icon. Pass `<Icon glyph={<SomeIcon />} />`;\n * SegmentedControl provides the size via context (12px at `small`, 16px at\n * `medium`), matching Button. No `size` prop is needed on the Icon.\n */\n icon?: ReactNode;\n /** Optional id for this segment (pair with `panelId` for `aria-controls`). */\n id?: string;\n /**\n * Optional id of the host panel this segment controls. Applied as\n * `aria-controls` when `role` is `tablist`. The host owns the panel.\n */\n panelId?: string;\n /** When true, the segment can't be selected and arrow keys skip it. */\n disabled?: boolean;\n /** Native tooltip text, e.g. to explain why the segment is disabled. */\n title?: string;\n /**\n * Extra attributes for this segment's `<button>` (e.g. `data-testid`).\n * Segment semantics (`role`, `aria-selected` / `aria-checked`, `tabIndex`,\n * `type`) take precedence. `className` is merged. `onClick`, `onKeyDown`,\n * and `onMouseDown` run first; `preventDefault()` skips selection.\n */\n buttonProps?: BuiltInButtonProps;\n}\n\nexport interface SegmentedControlProps extends Omit<\n HTMLAttributes<HTMLDivElement>,\n 'onChange' | 'role'\n> {\n /** Segments, in order. One is selected. */\n options: SegmentedControlOption[];\n /** Key of the selected segment. */\n value: string;\n /** Called with the segment key when the selection changes. */\n onChange: (key: string) => void;\n /**\n * Semantics. `tablist` (default) switches views: arrow keys move focus, and\n * Enter, Space, or a click selects. The host owns the panel. `radiogroup`\n * is a short exclusive form choice: arrow keys move the selection. Pass\n * `aria-label` or `aria-labelledby` so the group has a name.\n */\n role?: SegmentedControlRole;\n /**\n * Size of the label and leading icon, matching Button. `small` (default)\n * is 12px text with a 12px icon. `medium` is 14px text with a 16px icon.\n */\n size?: SegmentedControlSize;\n /** Optional CSS class name. */\n className?: string;\n}\n\nfunction stepIndex(index: number, delta: number, count: number) {\n if (index < 0) return delta < 0 ? count - 1 : 0;\n return (index + delta + count) % count;\n}\n\nfunction arrowDelta(key: string, isRadio: boolean, isRtl: boolean) {\n const forward = isRtl ? 'ArrowLeft' : 'ArrowRight';\n const backward = isRtl ? 'ArrowRight' : 'ArrowLeft';\n if (key === forward || (isRadio && key === 'ArrowDown')) return 1;\n if (key === backward || (isRadio && key === 'ArrowUp')) return -1;\n return 0;\n}\n\ninterface IndicatorBox {\n x: number;\n y: number;\n width: number;\n height: number;\n}\n\nfunction readBox(node: HTMLElement | null | undefined): IndicatorBox | null {\n if (!node || node.offsetWidth === 0) return null;\n return {\n x: node.offsetLeft,\n y: node.offsetTop,\n width: node.offsetWidth,\n height: node.offsetHeight,\n };\n}\n\nfunction sameBox(a: IndicatorBox | null, b: IndicatorBox | null) {\n return (\n a === b ||\n (a != null &&\n b != null &&\n a.x === b.x &&\n a.y === b.y &&\n a.width === b.width &&\n a.height === b.height)\n );\n}\n\n/**\n * Segmented controls let people pick one option from a short, exclusive set shown as one\n * compact control — search modes in a header, a filter on a list, or a form choice that\n * doesn't need a radio mark. One segment is selected; choosing another replaces it.\n */\nexport default function SegmentedControl({\n options,\n value,\n onChange,\n role = 'tablist',\n size = 'small',\n className,\n onBlur,\n ...rest\n}: SegmentedControlProps) {\n const trackRef = useRef<HTMLDivElement>(null);\n const segmentRefs = useRef(new Map<string, HTMLButtonElement>());\n const [focusedKey, setFocusedKey] = useState(value);\n const [indicator, setIndicator] = useState<IndicatorBox | null>(null);\n // The first placement is instant. Motion turns on after paint so the\n // surface doesn't slide in from the corner on mount.\n const [indicatorReady, setIndicatorReady] = useState(false);\n const isRadio = role === 'radiogroup';\n const itemRole = isRadio ? 'radio' : 'tab';\n\n // A string dependency: `options` is usually a fresh array each render, and\n // only added or removed segments need new observers (the observers already\n // cover label-driven size changes).\n const optionKeys = options.map((option) => option.key).join('\\u0000');\n\n useLayoutEffect(() => {\n const publish = () => {\n const next = readBox(segmentRefs.current.get(value));\n setIndicator((current) => (sameBox(current, next) ? current : next));\n };\n publish();\n\n const track = trackRef.current;\n if (typeof ResizeObserver === 'undefined' || !track) return;\n const observer = new ResizeObserver(publish);\n observer.observe(track);\n for (const node of segmentRefs.current.values()) {\n observer.observe(node);\n }\n return () => observer.disconnect();\n }, [value, optionKeys, size]);\n\n // Enable motion only after the first real placement has painted, so a first\n // measurement that is empty (hidden container) doesn't animate in later.\n const isPlaced = indicator !== null;\n useEffect(() => {\n if (isPlaced) setIndicatorReady(true);\n }, [isPlaced]);\n\n // Re-sync the roving focus to the selection while rendering, so there is no\n // render with a stale `focusedKey`.\n const [prevValue, setPrevValue] = useState(value);\n if (prevValue !== value) {\n setPrevValue(value);\n setFocusedKey(value);\n }\n\n const iconSize = SIZE_ICON_MAP[size];\n const enabledKeys = options\n .filter((option) => !option.disabled)\n .map((option) => option.key);\n const focusKey = enabledKeys.includes(focusedKey)\n ? focusedKey\n : enabledKeys.includes(value)\n ? value\n : enabledKeys[0];\n\n const moveFocus = (key: string, select: boolean) => {\n setFocusedKey(key);\n segmentRefs.current.get(key)?.focus();\n if (select) onChange(key);\n };\n\n const handleBlur = (event: FocusEvent<HTMLDivElement>) => {\n onBlur?.(event);\n // Manual tabs keep the last focused segment as the tab stop. Once focus\n // leaves the group, put it back on the selected segment so the next visit\n // lands on the choice, not a segment the user only passed through.\n if (event.defaultPrevented || isRadio) return;\n const track = event.currentTarget;\n queueMicrotask(() => {\n if (!track.isConnected) return;\n const active = document.activeElement;\n if (active instanceof Node && track.contains(active)) return;\n const tabStop = enabledKeys.includes(value) ? value : enabledKeys[0];\n if (tabStop) setFocusedKey(tabStop);\n });\n };\n\n const handleKeyDown = (\n event: KeyboardEvent<HTMLButtonElement>,\n key: string,\n ) => {\n // Alt, Ctrl, and Meta belong to the browser (Back, scroll-to-ends).\n // Shift still moves within the group.\n if (event.altKey || event.ctrlKey || event.metaKey) return;\n const count = enabledKeys.length;\n if (count === 0) return;\n const index = enabledKeys.indexOf(key);\n const isRtl =\n trackRef.current != null &&\n getComputedStyle(trackRef.current).direction === 'rtl';\n const delta = arrowDelta(event.key, isRadio, isRtl);\n\n if (delta !== 0) {\n event.preventDefault();\n const next = enabledKeys[stepIndex(index, delta, count)];\n moveFocus(next, isRadio && next !== key);\n return;\n }\n\n if (event.key === 'Home' || event.key === 'End') {\n event.preventDefault();\n const next =\n event.key === 'Home' ? enabledKeys[0] : enabledKeys[count - 1];\n moveFocus(next, isRadio && next !== key);\n return;\n }\n\n if ((event.key === 'Enter' || event.key === ' ') && index >= 0) {\n event.preventDefault();\n setFocusedKey(key);\n if (key !== value) onChange(key);\n }\n };\n\n return (\n <div\n {...rest}\n ref={trackRef}\n role={role}\n aria-orientation=\"horizontal\"\n onBlur={handleBlur}\n className={mergeClassNames(\n styles['segmented-control'],\n styles[`segmented-control--size-${toKebab(size)}`],\n className,\n )}\n >\n <span\n className={mergeClassNames(\n styles['segmented-control__indicator'],\n indicatorReady && styles['segmented-control__indicator--ready'],\n !indicator && styles['segmented-control__indicator--unpositioned'],\n )}\n style={\n indicator\n ? {\n transform: `translate(${indicator.x}px, ${indicator.y}px)`,\n width: indicator.width,\n height: indicator.height,\n }\n : undefined\n }\n aria-hidden\n />\n {options.map((option) => {\n const isSelected = option.key === value;\n const isDisabled = option.disabled === true;\n\n return (\n <button\n {...option.buttonProps}\n key={option.key}\n ref={(node) => {\n if (node) segmentRefs.current.set(option.key, node);\n else segmentRefs.current.delete(option.key);\n }}\n id={option.id ?? option.buttonProps?.id}\n type=\"button\"\n role={itemRole}\n tabIndex={focusKey === option.key ? 0 : -1}\n aria-selected={isRadio ? undefined : isSelected}\n aria-checked={isRadio ? isSelected : undefined}\n aria-controls={\n !isRadio && option.panelId ? option.panelId : undefined\n }\n aria-disabled={isDisabled || undefined}\n disabled={undefined}\n title={option.title ?? option.buttonProps?.title}\n className={mergeClassNames(\n styles['segmented-control__segment'],\n isSelected && styles['segmented-control__segment--active'],\n isDisabled && styles['segmented-control__segment--disabled'],\n option.buttonProps?.className,\n )}\n onMouseDown={(event) => {\n option.buttonProps?.onMouseDown?.(event);\n if (isDisabled) event.preventDefault();\n }}\n onClick={(event) => {\n option.buttonProps?.onClick?.(event);\n if (event.defaultPrevented || isDisabled) return;\n setFocusedKey(option.key);\n if (option.key !== value) onChange(option.key);\n }}\n onKeyDown={(event) => {\n option.buttonProps?.onKeyDown?.(event);\n if (event.defaultPrevented) return;\n handleKeyDown(event, option.key);\n }}\n >\n {option.icon != null && (\n <span className={styles['segmented-control__icon']}>\n <IconSlotContext.Provider value={{ size: iconSize }}>\n {option.icon}\n </IconSlotContext.Provider>\n </span>\n )}\n <span className={styles['segmented-control__label']}>\n {option.label}\n </span>\n </button>\n );\n })}\n </div>\n );\n}\n"],"names":["SIZE_ICON_MAP","stepIndex","index","delta","count","arrowDelta","key","isRadio","isRtl","forward","backward","readBox","node","sameBox","a","b","SegmentedControl","options","value","onChange","role","size","className","onBlur","rest","trackRef","useRef","segmentRefs","focusedKey","setFocusedKey","useState","indicator","setIndicator","indicatorReady","setIndicatorReady","itemRole","optionKeys","option","useLayoutEffect","publish","next","current","track","observer","isPlaced","useEffect","prevValue","setPrevValue","iconSize","enabledKeys","focusKey","moveFocus","select","_a","handleBlur","event","active","tabStop","handleKeyDown","jsxs","mergeClassNames","styles","toKebab","jsx","isSelected","isDisabled","createElement","_b","_c","IconSlotContext"],"mappings":"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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./SegmentedControl.css');const e={"segmented-control":"_segmented-control_1azc0_13","segmented-control__indicator":"_segmented-control__indicator_1azc0_24","segmented-control__indicator--ready":"_segmented-control__indicator--ready_1azc0_40","segmented-control__indicator--unpositioned":"_segmented-control__indicator--unpositioned_1azc0_48","segmented-control__segment":"_segmented-control__segment_1azc0_51","focus-ring-in":"_focus-ring-in_1azc0_1","-host-shadow-a":"_-host-shadow-a_1azc0_82","-host-shadow-b":"_-host-shadow-b_1azc0_82","segmented-control__segment--active":"_segmented-control__segment--active_1azc0_92","segmented-control__segment--disabled":"_segmented-control__segment--disabled_1azc0_92","segmented-control__icon":"_segmented-control__icon_1azc0_103","segmented-control__label":"_segmented-control__label_1azc0_108","segmented-control--size-small":"_segmented-control--size-small_1azc0_112","segmented-control--size-medium":"_segmented-control--size-medium_1azc0_116"};exports.default=e;
|
|
2
|
+
//# sourceMappingURL=SegmentedControl.module.scss.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SegmentedControl.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import './SegmentedControl.css';const e = {
|
|
2
|
+
"segmented-control": "_segmented-control_1azc0_13",
|
|
3
|
+
"segmented-control__indicator": "_segmented-control__indicator_1azc0_24",
|
|
4
|
+
"segmented-control__indicator--ready": "_segmented-control__indicator--ready_1azc0_40",
|
|
5
|
+
"segmented-control__indicator--unpositioned": "_segmented-control__indicator--unpositioned_1azc0_48",
|
|
6
|
+
"segmented-control__segment": "_segmented-control__segment_1azc0_51",
|
|
7
|
+
"focus-ring-in": "_focus-ring-in_1azc0_1",
|
|
8
|
+
"-host-shadow-a": "_-host-shadow-a_1azc0_82",
|
|
9
|
+
"-host-shadow-b": "_-host-shadow-b_1azc0_82",
|
|
10
|
+
"segmented-control__segment--active": "_segmented-control__segment--active_1azc0_92",
|
|
11
|
+
"segmented-control__segment--disabled": "_segmented-control__segment--disabled_1azc0_92",
|
|
12
|
+
"segmented-control__icon": "_segmented-control__icon_1azc0_103",
|
|
13
|
+
"segmented-control__label": "_segmented-control__label_1azc0_108",
|
|
14
|
+
"segmented-control--size-small": "_segmented-control--size-small_1azc0_112",
|
|
15
|
+
"segmented-control--size-medium": "_segmented-control--size-medium_1azc0_116"
|
|
16
|
+
};
|
|
17
|
+
export {
|
|
18
|
+
e as default
|
|
19
|
+
};
|
|
20
|
+
//# sourceMappingURL=SegmentedControl.module.scss.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SegmentedControl.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/segmented-control/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,YAAY,EACV,sBAAsB,EACtB,qBAAqB,EACrB,oBAAoB,EACpB,oBAAoB,GACrB,MAAM,oBAAoB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),l=require("react"),__qe=require("@mattermost/compass-icons/components/chevron-down.js"),qe=__qe?.default??__qe,Y=require("../icon/Icon.cjs"),R=require("../field/fieldDescribedBy.cjs"),Se=require("../field-message/FieldMessage.cjs"),Re=require("../menu-item/MenuItem.cjs"),C=require("../popover-menu/PopoverMenu.cjs"),Ce=require("../../hooks/use-anchored-popup-portal.cjs"),Ne=require("../../hooks/use-outside-close.cjs"),Ee=require("../../hooks/use-popover-transition.cjs"),Fe=require("../../utils/menuItemProps.cjs"),Oe=require("../../utils/string.cjs"),n=require("./Select.module.scss.cjs"),Z=280;function Ae({option:c,menuItemProps:v,listboxId:k,selected:_,active:w,onSelect:b,onHover:D,dividerAfter:d=!1}){return s.jsxs(s.Fragment,{children:[s.jsx("li",{className:n.default.select__option,role:"presentation",children:s.jsx(Re.default,{...Fe.mergeMenuItemProps(v,c.menuItemProps),id:`${k}-option-${c.value}`,role:"option",label:c.label,secondaryLabel:c.secondaryLabel,leadingElement:c.leadingVisual!=null,leadingVisual:c.leadingVisual,trailingElement:_,active:w,disabled:c.disabled,"aria-selected":_,onMouseDown:j=>j.preventDefault(),onMouseEnter:D,onPointerUp:()=>{c.disabled||b(c)}})}),d?s.jsx("li",{role:"presentation",children:s.jsx(C.PopoverMenuDivider,{"aria-hidden":"true"})}):null]})}const Be=l.forwardRef(function({options:v,menuItemProps:k,value:_,defaultValue:w="",onChange:b,placeholder:D,label:d,leadingIcon:j,size:ee="medium",invalid:te=!1,message:M,messageTone:N,required:se=!1,disabled:h=!1,id:le,name:E,className:ne="","aria-label":F,"aria-describedby":ae,listboxLabel:re="Options",portalContainer:oe=null,zIndex:ie},g){const ce=l.useId(),I=le??ce,m=`${I}-listbox`,O=l.useRef(null),A=l.useRef(null),B=l.useRef(null),ue=l.useCallback(e=>{B.current=e,typeof g=="function"?g(e):g&&(g.current=e)},[g]),q=_!==void 0,[de,fe]=l.useState(w),f=q?_:de,[r,V]=l.useState(!1),[pe,$]=l.useState(!1),[i,p]=l.useState(-1),P=l.useRef(!1),ve=l.useCallback(e=>{e!==i&&(P.current=!0,p(e))},[i]),S=l.useMemo(()=>v.find(e=>e.value===f),[v,f]),o=l.useMemo(()=>v.filter(e=>e.value!==""),[v]),H=f!=="",{mounted:z,visible:be}=Ee.usePopoverTransition(r),{placement:he,maxHeight:me,style:xe,portalRef:T,renderPortal:_e}=Ce.useAnchoredPopupPortal(A,z,{preferredHeight:Z,maxHeightCap:Z,portalContainer:oe,zIndex:ie}),x=l.useCallback(()=>{V(!1),p(-1)},[]),y=l.useCallback(()=>{h||V(!0)},[h]);Ne.useOutsideClose(O,r,x,T),l.useEffect(()=>{r&&p(e=>{if(o.length===0)return-1;if(e>=0&&e<o.length)return e;const t=o.findIndex(u=>u.value===f);if(t>=0)return t;const a=o.findIndex(u=>!u.disabled);return a>=0?a:0})},[r,o,f]);const U=l.useCallback(e=>{q||fe(e),b==null||b(e)},[q,b]),K=l.useCallback(e=>{var t;e.disabled||(U(e.value),x(),(t=B.current)==null||t.focus())},[U,x]),L=l.useCallback(e=>{P.current=!1;const t=o.map((a,u)=>({o:a,i:u})).filter(({o:a})=>!a.disabled);if(t.length===0){p(-1);return}p(a=>{const u=t.findIndex(({i:Me})=>Me===a),De=u<0?e>0?0:t.length-1:(u+e+t.length)%t.length;return t[De].i})},[o]);l.useEffect(()=>{var a;if(!r||i<0)return;if(P.current){P.current=!1;return}const e=o[i];if(!e)return;const t=document.getElementById(`${m}-option-${e.value}`);(a=t==null?void 0:t.scrollIntoView)==null||a.call(t,{block:"nearest"})},[r,i,o,m]);const je=e=>{var t;if(!h)switch(e.key){case"ArrowDown":e.preventDefault(),r?L(1):y();break;case"ArrowUp":e.preventDefault(),r?L(-1):y();break;case"Home":if(r&&o.length>0){e.preventDefault();const a=o.findIndex(u=>!u.disabled);p(a>=0?a:0)}break;case"End":if(r&&o.length>0){e.preventDefault();for(let a=o.length-1;a>=0;a--)if(!((t=o[a])!=null&&t.disabled)){p(a);break}}break;case"Enter":case" ":e.preventDefault(),r&&i>=0&&o[i]?K(o[i]):r||y();break;case"Escape":r&&(e.preventDefault(),x());break;case"Tab":x();break}},ge=pe||r||H,G=(S==null?void 0:S.label)??D??"",Ie=!H&&G!=="",X=i>=0?o[i]:void 0,Pe=r&&X!=null?`${m}-option-${X.value}`:void 0,J=R.isFieldInvalid(te,M,N),Q=R.hasFieldMessage(M),W=Q?`${I}-message`:void 0,ye=n.default[`select--size-${Oe.toKebab(ee)}`],ke=[n.default.select,ye,J?n.default["select--invalid"]:"",d!=null&&ge?n.default["select--label-floated"]:"",j!=null?n.default["select--has-leading-icon"]:"",r?n.default["select--open"]:"",h?n.default["select--disabled"]:"",ne].filter(Boolean).join(" "),we=[n.default.select__control,Ie?n.default["select__control--placeholder"]:""].filter(Boolean).join(" ");return s.jsxs("div",{className:ke,ref:O,children:[s.jsxs("div",{className:n.default.select__wrapper,ref:A,children:[d!=null&&s.jsx("label",{className:n.default.select__label,htmlFor:I,children:d}),s.jsxs("button",{ref:ue,id:I,type:"button",role:"combobox",className:we,disabled:h,"aria-haspopup":"listbox","aria-expanded":r,"aria-controls":m,"aria-activedescendant":Pe,"aria-invalid":J?!0:void 0,"aria-required":se?!0:void 0,"aria-describedby":R.mergeFieldDescribedBy(ae,W,void 0),"aria-label":F,onClick:()=>r?x():y(),onFocus:()=>$(!0),onBlur:()=>$(!1),onKeyDown:je,children:[j!=null&&s.jsx("span",{className:n.default["select__leading-icon"],"aria-hidden":!0,children:s.jsx(Y.IconSlotContext.Provider,{value:{size:"16"},children:j})}),s.jsx("span",{className:n.default.select__value,children:G}),s.jsx("span",{className:n.default["select__trailing-icon"],"aria-hidden":!0,children:s.jsx(Y.default,{size:"12",glyph:s.jsx(qe,{})})})]})]}),Q&&s.jsx(Se.default,{id:W,className:n.default.select__message,message:M,tone:N??"error"}),E!=null&&!h&&s.jsx("input",{type:"hidden",name:E,value:f}),z&&_e(s.jsx("div",{ref:T,className:[n.default.select__popup,he==="above"?n.default["select__popup--above"]:"",be?n.default["select__popup--visible"]:""].filter(Boolean).join(" "),style:xe,children:s.jsx(C.default,{className:n.default.select__menu,children:s.jsx(C.PopoverMenuScroll,{maxHeight:me,children:s.jsx("ul",{id:m,className:n.default.select__list,role:"listbox","aria-label":typeof d=="string"?d:F??re,children:o.map((e,t)=>s.jsx(Ae,{option:e,menuItemProps:k,listboxId:m,selected:e.value===f,active:t===i,onSelect:K,onHover:()=>ve(t),dividerAfter:e.dividerAfter},e.value))})})})}))]})});exports.default=Be;
|
|
2
2
|
//# sourceMappingURL=Select.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.cjs","sources":["../../../src/components/select/Select.tsx"],"sourcesContent":["import type { KeyboardEvent, ReactNode } from 'react';\nimport {\n forwardRef,\n useCallback,\n useEffect,\n useId,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport ChevronDownIcon from '@mattermost/compass-icons/components/chevron-down';\nimport Icon from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport MenuItem from '@/components/menu-item/MenuItem';\nimport type {\n MenuItemOwnedProps,\n MenuItemPassthroughProps,\n} from '@/components/menu-item/MenuItem';\nimport PopoverMenu, {\n PopoverMenuDivider,\n PopoverMenuScroll,\n} from '@/components/popover-menu/PopoverMenu';\nimport { useAnchoredPopupPortal } from '@/hooks/use-anchored-popup-portal';\nimport { useOutsideClose } from '@/hooks/use-outside-close';\nimport { usePopoverTransition } from '@/hooks/use-popover-transition';\nimport { mergeMenuItemProps } from '@/utils/menuItemProps';\nimport { toKebab } from '@/utils/string';\nimport styles from './Select.module.scss';\n\nexport type SelectSize = 'small' | 'medium' | 'large';\n\n// Select rows use `onPointerUp`, so `onClick` is left for callers.\ntype SelectMenuItemProps = MenuItemPassthroughProps<\n Exclude<MenuItemOwnedProps, 'onClick'>\n>;\n\nexport type SelectOption = {\n value: string;\n /** Kept as `string` like `ComboboxOption.label` (which drives filtering), so option lists can be shared. */\n label: string;\n disabled?: boolean;\n leadingVisual?: ReactNode;\n /** Accepts translated nodes. */\n secondaryLabel?: ReactNode;\n /** When true, renders a menu divider after this option. */\n dividerAfter?: boolean;\n /**\n * Extra `MenuItem` props for this row (e.g. `secondaryLabelPosition`, `tag`,\n * `trailingVisual`, `className`). Overrides the `menuItemProps` set on the\n * Select; the props Select owns (ARIA, selection, handlers) can't be set.\n */\n menuItemProps?: SelectMenuItemProps;\n};\n\nexport interface SelectProps {\n options: SelectOption[];\n /**\n * `MenuItem` props applied to every option row, e.g.\n * `menuItemProps={{ secondaryLabelPosition: 'inline' }}`. A row's own\n * `menuItemProps` wins.\n */\n menuItemProps?: SelectMenuItemProps;\n value?: string;\n defaultValue?: string;\n onChange?: (value: string) => void;\n /** Shown on the trigger when no value is selected. Empty-value options are not listed in the menu. */\n placeholder?: string;\n label?: ReactNode;\n /** Leading icon — pass `<Icon glyph={<SomeIcon />} />`; Select provides the correct size via context. */\n leadingIcon?: ReactNode;\n size?: SelectSize;\n invalid?: boolean;\n disabled?: boolean;\n id?: string;\n name?: string;\n className?: string;\n 'aria-label'?: string;\n /**\n * Accessible name for the options list when `label` isn't a string and no\n * `aria-label` is set. Default: \"Options\".\n */\n listboxLabel?: string;\n /** Portal mount node for the menu; defaults to `document.body`. */\n portalContainer?: HTMLElement | null;\n /** Stacking order for the portaled menu. */\n zIndex?: number;\n}\n\nconst POPUP_MAX_HEIGHT = 280;\n\nfunction SelectOptionRow({\n option,\n menuItemProps,\n listboxId,\n selected,\n active,\n onSelect,\n onHover,\n dividerAfter = false,\n}: {\n option: SelectOption;\n menuItemProps?: SelectMenuItemProps;\n listboxId: string;\n selected: boolean;\n active: boolean;\n onSelect: (option: SelectOption) => void;\n onHover: () => void;\n dividerAfter?: boolean;\n}) {\n return (\n <>\n <li className={styles.select__option} role=\"presentation\">\n <MenuItem\n {...mergeMenuItemProps(menuItemProps, option.menuItemProps)}\n id={`${listboxId}-option-${option.value}`}\n role=\"option\"\n label={option.label}\n secondaryLabel={option.secondaryLabel}\n leadingElement={option.leadingVisual != null}\n leadingVisual={option.leadingVisual}\n trailingElement={selected}\n active={active}\n disabled={option.disabled}\n aria-selected={selected}\n onMouseDown={(ev) => ev.preventDefault()}\n onMouseEnter={onHover}\n onPointerUp={() => {\n if (!option.disabled) onSelect(option);\n }}\n />\n </li>\n {dividerAfter ? (\n <li role=\"presentation\">\n <PopoverMenuDivider aria-hidden=\"true\" />\n </li>\n ) : null}\n </>\n );\n}\n\n/**\n * { value: 'town-square', label: 'Town Square' }, { value: 'off-topic', label: 'Off-Topic'\n * }, { value: 'design', label: 'Design' }, ];\n */\nconst Select = forwardRef<HTMLButtonElement, SelectProps>(function Select(\n {\n options,\n menuItemProps,\n value: valueProp,\n defaultValue = '',\n onChange,\n placeholder,\n label,\n leadingIcon,\n size = 'medium',\n invalid = false,\n disabled = false,\n id: idProp,\n name,\n className = '',\n 'aria-label': ariaLabel,\n listboxLabel = 'Options',\n portalContainer = null,\n zIndex,\n },\n ref,\n) {\n const generatedId = useId();\n const id = idProp ?? generatedId;\n const listboxId = `${id}-listbox`;\n\n const rootRef = useRef<HTMLDivElement>(null);\n const anchorRef = useRef<HTMLDivElement>(null);\n const buttonRef = useRef<HTMLButtonElement | null>(null);\n\n const setButtonRef = useCallback(\n (node: HTMLButtonElement | null) => {\n buttonRef.current = node;\n if (typeof ref === 'function') ref(node);\n else if (ref) ref.current = node;\n },\n [ref],\n );\n\n const isControlled = valueProp !== undefined;\n const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);\n const value = isControlled ? valueProp! : uncontrolledValue;\n\n const [isOpen, setIsOpen] = useState(false);\n const [isFocused, setIsFocused] = useState(false);\n const [activeIndex, setActiveIndex] = useState(-1);\n // Hover moves the highlight without scrolling; only keyboard changes scroll the row into view.\n const activatedByPointer = useRef(false);\n const hoverRow = useCallback(\n (index: number) => {\n if (index === activeIndex) return;\n activatedByPointer.current = true;\n setActiveIndex(index);\n },\n [activeIndex],\n );\n\n const selectedOption = useMemo(\n () => options.find((o) => o.value === value),\n [options, value],\n );\n\n const listOptions = useMemo(\n () => options.filter((o) => o.value !== ''),\n [options],\n );\n\n const hasValue = value !== '';\n\n const { mounted: popupMounted, visible: popupVisible } =\n usePopoverTransition(isOpen);\n\n const {\n placement,\n maxHeight,\n style: popupStyle,\n portalRef,\n renderPortal,\n } = useAnchoredPopupPortal(anchorRef, popupMounted, {\n preferredHeight: POPUP_MAX_HEIGHT,\n maxHeightCap: POPUP_MAX_HEIGHT,\n portalContainer,\n zIndex,\n });\n\n const close = useCallback(() => {\n setIsOpen(false);\n setActiveIndex(-1);\n }, []);\n\n const open = useCallback(() => {\n if (disabled) return;\n setIsOpen(true);\n }, [disabled]);\n\n useOutsideClose(rootRef, isOpen, close, portalRef);\n\n useEffect(() => {\n if (!isOpen) return;\n setActiveIndex((prev) => {\n if (listOptions.length === 0) return -1;\n if (prev >= 0 && prev < listOptions.length) return prev;\n const selectedIdx = listOptions.findIndex((o) => o.value === value);\n if (selectedIdx >= 0) return selectedIdx;\n const firstEnabled = listOptions.findIndex((o) => !o.disabled);\n return firstEnabled >= 0 ? firstEnabled : 0;\n });\n }, [isOpen, listOptions, value]);\n\n const commitValue = useCallback(\n (next: string) => {\n if (!isControlled) setUncontrolledValue(next);\n onChange?.(next);\n },\n [isControlled, onChange],\n );\n\n const selectOption = useCallback(\n (option: SelectOption) => {\n if (option.disabled) return;\n commitValue(option.value);\n close();\n buttonRef.current?.focus();\n },\n [commitValue, close],\n );\n\n const moveActive = useCallback(\n (delta: number) => {\n activatedByPointer.current = false;\n const enabled = listOptions\n .map((o, i) => ({ o, i }))\n .filter(({ o }) => !o.disabled);\n if (enabled.length === 0) {\n setActiveIndex(-1);\n return;\n }\n setActiveIndex((prev) => {\n const currentPos = enabled.findIndex(({ i }) => i === prev);\n const nextPos =\n currentPos < 0\n ? delta > 0\n ? 0\n : enabled.length - 1\n : (currentPos + delta + enabled.length) % enabled.length;\n return enabled[nextPos].i;\n });\n },\n [listOptions],\n );\n\n useEffect(() => {\n if (!isOpen || activeIndex < 0) return;\n if (activatedByPointer.current) {\n activatedByPointer.current = false;\n return;\n }\n const option = listOptions[activeIndex];\n if (!option) return;\n const el = document.getElementById(`${listboxId}-option-${option.value}`);\n el?.scrollIntoView?.({ block: 'nearest' });\n }, [isOpen, activeIndex, listOptions, listboxId]);\n\n const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {\n if (disabled) return;\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n if (!isOpen) open();\n else moveActive(1);\n break;\n case 'ArrowUp':\n e.preventDefault();\n if (!isOpen) open();\n else moveActive(-1);\n break;\n case 'Home':\n if (isOpen && listOptions.length > 0) {\n e.preventDefault();\n const idx = listOptions.findIndex((o) => !o.disabled);\n setActiveIndex(idx >= 0 ? idx : 0);\n }\n break;\n case 'End':\n if (isOpen && listOptions.length > 0) {\n e.preventDefault();\n for (let i = listOptions.length - 1; i >= 0; i--) {\n if (!listOptions[i]?.disabled) {\n setActiveIndex(i);\n break;\n }\n }\n }\n break;\n case 'Enter':\n case ' ':\n e.preventDefault();\n if (isOpen && activeIndex >= 0 && listOptions[activeIndex]) {\n selectOption(listOptions[activeIndex]);\n } else if (!isOpen) {\n open();\n }\n break;\n case 'Escape':\n if (isOpen) {\n e.preventDefault();\n close();\n }\n break;\n case 'Tab':\n close();\n break;\n default:\n break;\n }\n };\n\n const labelFloated = isFocused || isOpen || hasValue;\n const displayLabel = selectedOption?.label ?? placeholder ?? '';\n const showPlaceholderStyle = !hasValue && displayLabel !== '';\n\n const activeOption = activeIndex >= 0 ? listOptions[activeIndex] : undefined;\n const activeDescendant =\n isOpen && activeOption != null\n ? `${listboxId}-option-${activeOption.value}`\n : undefined;\n\n const sizeClass = styles[`select--size-${toKebab(size)}`];\n const rootClass = [\n styles.select,\n sizeClass,\n invalid ? styles['select--invalid'] : '',\n label != null && labelFloated ? styles['select--label-floated'] : '',\n leadingIcon != null ? styles['select--has-leading-icon'] : '',\n isOpen ? styles['select--open'] : '',\n disabled ? styles['select--disabled'] : '',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n const controlClass = [\n styles.select__control,\n showPlaceholderStyle ? styles['select__control--placeholder'] : '',\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <div className={rootClass} ref={rootRef}>\n <div className={styles.select__wrapper} ref={anchorRef}>\n {label != null && (\n <label className={styles.select__label} htmlFor={id}>\n {label}\n </label>\n )}\n <button\n ref={setButtonRef}\n id={id}\n type=\"button\"\n role=\"combobox\"\n className={controlClass}\n disabled={disabled}\n aria-haspopup=\"listbox\"\n aria-expanded={isOpen}\n aria-controls={listboxId}\n aria-activedescendant={activeDescendant}\n aria-invalid={invalid ? true : undefined}\n aria-label={ariaLabel}\n onClick={() => (isOpen ? close() : open())}\n onFocus={() => setIsFocused(true)}\n onBlur={() => setIsFocused(false)}\n onKeyDown={handleKeyDown}\n >\n {leadingIcon != null && (\n <span className={styles['select__leading-icon']} aria-hidden>\n <IconSlotContext.Provider value={{ size: '16' }}>\n {leadingIcon}\n </IconSlotContext.Provider>\n </span>\n )}\n <span className={styles.select__value}>{displayLabel}</span>\n <span className={styles['select__trailing-icon']} aria-hidden>\n <Icon size=\"12\" glyph={<ChevronDownIcon />} />\n </span>\n </button>\n </div>\n\n {name != null && !disabled && (\n <input type=\"hidden\" name={name} value={value} />\n )}\n\n {popupMounted &&\n renderPortal(\n <div\n ref={portalRef}\n className={[\n styles.select__popup,\n placement === 'above' ? styles['select__popup--above'] : '',\n popupVisible ? styles['select__popup--visible'] : '',\n ]\n .filter(Boolean)\n .join(' ')}\n style={popupStyle}\n >\n <PopoverMenu className={styles.select__menu}>\n <PopoverMenuScroll maxHeight={maxHeight}>\n <ul\n id={listboxId}\n className={styles.select__list}\n role=\"listbox\"\n aria-label={\n typeof label === 'string'\n ? label\n : (ariaLabel ?? listboxLabel)\n }\n >\n {listOptions.map((option, index) => (\n <SelectOptionRow\n key={option.value}\n option={option}\n menuItemProps={menuItemProps}\n listboxId={listboxId}\n selected={option.value === value}\n active={index === activeIndex}\n onSelect={selectOption}\n onHover={() => hoverRow(index)}\n dividerAfter={option.dividerAfter}\n />\n ))}\n </ul>\n </PopoverMenuScroll>\n </PopoverMenu>\n </div>,\n )}\n </div>\n );\n});\n\nexport default Select;\n"],"names":["POPUP_MAX_HEIGHT","SelectOptionRow","option","menuItemProps","listboxId","selected","active","onSelect","onHover","dividerAfter","jsxs","Fragment","jsx","styles","MenuItem","mergeMenuItemProps","ev","PopoverMenuDivider","Select","forwardRef","options","valueProp","defaultValue","onChange","placeholder","label","leadingIcon","size","invalid","disabled","idProp","name","className","ariaLabel","listboxLabel","portalContainer","zIndex","ref","generatedId","useId","id","rootRef","useRef","anchorRef","buttonRef","setButtonRef","useCallback","node","isControlled","uncontrolledValue","setUncontrolledValue","useState","value","isOpen","setIsOpen","isFocused","setIsFocused","activeIndex","setActiveIndex","activatedByPointer","hoverRow","index","selectedOption","useMemo","o","listOptions","hasValue","popupMounted","popupVisible","usePopoverTransition","placement","maxHeight","popupStyle","portalRef","renderPortal","useAnchoredPopupPortal","close","open","useOutsideClose","useEffect","prev","selectedIdx","firstEnabled","commitValue","next","selectOption","_a","moveActive","delta","enabled","currentPos","i","nextPos","el","handleKeyDown","idx","labelFloated","displayLabel","showPlaceholderStyle","activeOption","activeDescendant","sizeClass","toKebab","rootClass","controlClass","IconSlotContext","Icon","ChevronDownIcon","PopoverMenu","PopoverMenuScroll"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Select.cjs","sources":["../../../src/components/select/Select.tsx"],"sourcesContent":["import type { KeyboardEvent, ReactNode } from 'react';\nimport {\n forwardRef,\n useCallback,\n useEffect,\n useId,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport ChevronDownIcon from '@mattermost/compass-icons/components/chevron-down';\nimport Icon from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport {\n hasFieldMessage,\n isFieldInvalid,\n mergeFieldDescribedBy,\n} from '@/components/field/fieldDescribedBy';\nimport FieldMessage from '@/components/field-message/FieldMessage';\nimport type { FieldMessageTone } from '@/components/field-message/FieldMessage';\nimport MenuItem from '@/components/menu-item/MenuItem';\nimport type {\n MenuItemOwnedProps,\n MenuItemPassthroughProps,\n} from '@/components/menu-item/MenuItem';\nimport PopoverMenu, {\n PopoverMenuDivider,\n PopoverMenuScroll,\n} from '@/components/popover-menu/PopoverMenu';\nimport { useAnchoredPopupPortal } from '@/hooks/use-anchored-popup-portal';\nimport { useOutsideClose } from '@/hooks/use-outside-close';\nimport { usePopoverTransition } from '@/hooks/use-popover-transition';\nimport { mergeMenuItemProps } from '@/utils/menuItemProps';\nimport { toKebab } from '@/utils/string';\nimport styles from './Select.module.scss';\n\nexport type SelectSize = 'small' | 'medium' | 'large';\n\n// Select rows use `onPointerUp`, so `onClick` is left for callers.\ntype SelectMenuItemProps = MenuItemPassthroughProps<\n Exclude<MenuItemOwnedProps, 'onClick'>\n>;\n\nexport type SelectOption = {\n value: string;\n /** Kept as `string` like `ComboboxOption.label` (which drives filtering), so option lists can be shared. */\n label: string;\n disabled?: boolean;\n leadingVisual?: ReactNode;\n /** Accepts translated nodes. */\n secondaryLabel?: ReactNode;\n /** When true, renders a menu divider after this option. */\n dividerAfter?: boolean;\n /**\n * Extra `MenuItem` props for this row (e.g. `secondaryLabelPosition`, `tag`,\n * `trailingVisual`, `className`). Overrides the `menuItemProps` set on the\n * Select; the props Select owns (ARIA, selection, handlers) can't be set.\n */\n menuItemProps?: SelectMenuItemProps;\n};\n\nexport interface SelectProps {\n options: SelectOption[];\n /**\n * `MenuItem` props applied to every option row, e.g.\n * `menuItemProps={{ secondaryLabelPosition: 'inline' }}`. A row's own\n * `menuItemProps` wins.\n */\n menuItemProps?: SelectMenuItemProps;\n value?: string;\n defaultValue?: string;\n onChange?: (value: string) => void;\n /** Shown on the trigger when no value is selected. Empty-value options are not listed in the menu. */\n placeholder?: string;\n label?: ReactNode;\n /** Leading icon — pass `<Icon glyph={<SomeIcon />} />`; Select provides the correct size via context. */\n leadingIcon?: ReactNode;\n size?: SelectSize;\n /** When true, shows invalid/error styling. */\n invalid?: boolean;\n /**\n * Field message under the field. Accepts translated nodes (e.g. `<FormattedMessage/>`).\n * Defaults to error tone (invalid chrome) when set without `messageTone`. It is linked to\n * the trigger with `aria-describedby`.\n */\n message?: ReactNode;\n /** Visual tone for `message`. Default: `error` when `message` is set. */\n messageTone?: FieldMessageTone;\n /** Marks the field required for assistive tech (`aria-required=\"true\"`). */\n required?: boolean;\n disabled?: boolean;\n id?: string;\n name?: string;\n className?: string;\n 'aria-label'?: string;\n /** Extra description ids for the trigger; the field message id is appended. */\n 'aria-describedby'?: string;\n /**\n * Accessible name for the options list when `label` isn't a string and no\n * `aria-label` is set. Default: \"Options\".\n */\n listboxLabel?: string;\n /** Portal mount node for the menu; defaults to `document.body`. */\n portalContainer?: HTMLElement | null;\n /** Stacking order for the portaled menu. */\n zIndex?: number;\n}\n\nconst POPUP_MAX_HEIGHT = 280;\n\nfunction SelectOptionRow({\n option,\n menuItemProps,\n listboxId,\n selected,\n active,\n onSelect,\n onHover,\n dividerAfter = false,\n}: {\n option: SelectOption;\n menuItemProps?: SelectMenuItemProps;\n listboxId: string;\n selected: boolean;\n active: boolean;\n onSelect: (option: SelectOption) => void;\n onHover: () => void;\n dividerAfter?: boolean;\n}) {\n return (\n <>\n <li className={styles.select__option} role=\"presentation\">\n <MenuItem\n {...mergeMenuItemProps(menuItemProps, option.menuItemProps)}\n id={`${listboxId}-option-${option.value}`}\n role=\"option\"\n label={option.label}\n secondaryLabel={option.secondaryLabel}\n leadingElement={option.leadingVisual != null}\n leadingVisual={option.leadingVisual}\n trailingElement={selected}\n active={active}\n disabled={option.disabled}\n aria-selected={selected}\n onMouseDown={(ev) => ev.preventDefault()}\n onMouseEnter={onHover}\n onPointerUp={() => {\n if (!option.disabled) onSelect(option);\n }}\n />\n </li>\n {dividerAfter ? (\n <li role=\"presentation\">\n <PopoverMenuDivider aria-hidden=\"true\" />\n </li>\n ) : null}\n </>\n );\n}\n\n/**\n * { value: 'town-square', label: 'Town Square' }, { value: 'off-topic', label: 'Off-Topic'\n * }, { value: 'design', label: 'Design' }, ];\n */\nconst Select = forwardRef<HTMLButtonElement, SelectProps>(function Select(\n {\n options,\n menuItemProps,\n value: valueProp,\n defaultValue = '',\n onChange,\n placeholder,\n label,\n leadingIcon,\n size = 'medium',\n invalid = false,\n message,\n messageTone,\n required = false,\n disabled = false,\n id: idProp,\n name,\n className = '',\n 'aria-label': ariaLabel,\n 'aria-describedby': describedBy,\n listboxLabel = 'Options',\n portalContainer = null,\n zIndex,\n },\n ref,\n) {\n const generatedId = useId();\n const id = idProp ?? generatedId;\n const listboxId = `${id}-listbox`;\n\n const rootRef = useRef<HTMLDivElement>(null);\n const anchorRef = useRef<HTMLDivElement>(null);\n const buttonRef = useRef<HTMLButtonElement | null>(null);\n\n const setButtonRef = useCallback(\n (node: HTMLButtonElement | null) => {\n buttonRef.current = node;\n if (typeof ref === 'function') ref(node);\n else if (ref) ref.current = node;\n },\n [ref],\n );\n\n const isControlled = valueProp !== undefined;\n const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);\n const value = isControlled ? valueProp! : uncontrolledValue;\n\n const [isOpen, setIsOpen] = useState(false);\n const [isFocused, setIsFocused] = useState(false);\n const [activeIndex, setActiveIndex] = useState(-1);\n // Hover moves the highlight without scrolling; only keyboard changes scroll the row into view.\n const activatedByPointer = useRef(false);\n const hoverRow = useCallback(\n (index: number) => {\n if (index === activeIndex) return;\n activatedByPointer.current = true;\n setActiveIndex(index);\n },\n [activeIndex],\n );\n\n const selectedOption = useMemo(\n () => options.find((o) => o.value === value),\n [options, value],\n );\n\n const listOptions = useMemo(\n () => options.filter((o) => o.value !== ''),\n [options],\n );\n\n const hasValue = value !== '';\n\n const { mounted: popupMounted, visible: popupVisible } =\n usePopoverTransition(isOpen);\n\n const {\n placement,\n maxHeight,\n style: popupStyle,\n portalRef,\n renderPortal,\n } = useAnchoredPopupPortal(anchorRef, popupMounted, {\n preferredHeight: POPUP_MAX_HEIGHT,\n maxHeightCap: POPUP_MAX_HEIGHT,\n portalContainer,\n zIndex,\n });\n\n const close = useCallback(() => {\n setIsOpen(false);\n setActiveIndex(-1);\n }, []);\n\n const open = useCallback(() => {\n if (disabled) return;\n setIsOpen(true);\n }, [disabled]);\n\n useOutsideClose(rootRef, isOpen, close, portalRef);\n\n useEffect(() => {\n if (!isOpen) return;\n setActiveIndex((prev) => {\n if (listOptions.length === 0) return -1;\n if (prev >= 0 && prev < listOptions.length) return prev;\n const selectedIdx = listOptions.findIndex((o) => o.value === value);\n if (selectedIdx >= 0) return selectedIdx;\n const firstEnabled = listOptions.findIndex((o) => !o.disabled);\n return firstEnabled >= 0 ? firstEnabled : 0;\n });\n }, [isOpen, listOptions, value]);\n\n const commitValue = useCallback(\n (next: string) => {\n if (!isControlled) setUncontrolledValue(next);\n onChange?.(next);\n },\n [isControlled, onChange],\n );\n\n const selectOption = useCallback(\n (option: SelectOption) => {\n if (option.disabled) return;\n commitValue(option.value);\n close();\n buttonRef.current?.focus();\n },\n [commitValue, close],\n );\n\n const moveActive = useCallback(\n (delta: number) => {\n activatedByPointer.current = false;\n const enabled = listOptions\n .map((o, i) => ({ o, i }))\n .filter(({ o }) => !o.disabled);\n if (enabled.length === 0) {\n setActiveIndex(-1);\n return;\n }\n setActiveIndex((prev) => {\n const currentPos = enabled.findIndex(({ i }) => i === prev);\n const nextPos =\n currentPos < 0\n ? delta > 0\n ? 0\n : enabled.length - 1\n : (currentPos + delta + enabled.length) % enabled.length;\n return enabled[nextPos].i;\n });\n },\n [listOptions],\n );\n\n useEffect(() => {\n if (!isOpen || activeIndex < 0) return;\n if (activatedByPointer.current) {\n activatedByPointer.current = false;\n return;\n }\n const option = listOptions[activeIndex];\n if (!option) return;\n const el = document.getElementById(`${listboxId}-option-${option.value}`);\n el?.scrollIntoView?.({ block: 'nearest' });\n }, [isOpen, activeIndex, listOptions, listboxId]);\n\n const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {\n if (disabled) return;\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n if (!isOpen) open();\n else moveActive(1);\n break;\n case 'ArrowUp':\n e.preventDefault();\n if (!isOpen) open();\n else moveActive(-1);\n break;\n case 'Home':\n if (isOpen && listOptions.length > 0) {\n e.preventDefault();\n const idx = listOptions.findIndex((o) => !o.disabled);\n setActiveIndex(idx >= 0 ? idx : 0);\n }\n break;\n case 'End':\n if (isOpen && listOptions.length > 0) {\n e.preventDefault();\n for (let i = listOptions.length - 1; i >= 0; i--) {\n if (!listOptions[i]?.disabled) {\n setActiveIndex(i);\n break;\n }\n }\n }\n break;\n case 'Enter':\n case ' ':\n e.preventDefault();\n if (isOpen && activeIndex >= 0 && listOptions[activeIndex]) {\n selectOption(listOptions[activeIndex]);\n } else if (!isOpen) {\n open();\n }\n break;\n case 'Escape':\n if (isOpen) {\n e.preventDefault();\n close();\n }\n break;\n case 'Tab':\n close();\n break;\n default:\n break;\n }\n };\n\n const labelFloated = isFocused || isOpen || hasValue;\n const displayLabel = selectedOption?.label ?? placeholder ?? '';\n const showPlaceholderStyle = !hasValue && displayLabel !== '';\n\n const activeOption = activeIndex >= 0 ? listOptions[activeIndex] : undefined;\n const activeDescendant =\n isOpen && activeOption != null\n ? `${listboxId}-option-${activeOption.value}`\n : undefined;\n\n const showInvalid = isFieldInvalid(invalid, message, messageTone);\n const showMessage = hasFieldMessage(message);\n const messageId = showMessage ? `${id}-message` : undefined;\n\n const sizeClass = styles[`select--size-${toKebab(size)}`];\n const rootClass = [\n styles.select,\n sizeClass,\n showInvalid ? styles['select--invalid'] : '',\n label != null && labelFloated ? styles['select--label-floated'] : '',\n leadingIcon != null ? styles['select--has-leading-icon'] : '',\n isOpen ? styles['select--open'] : '',\n disabled ? styles['select--disabled'] : '',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n const controlClass = [\n styles.select__control,\n showPlaceholderStyle ? styles['select__control--placeholder'] : '',\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <div className={rootClass} ref={rootRef}>\n <div className={styles.select__wrapper} ref={anchorRef}>\n {label != null && (\n <label className={styles.select__label} htmlFor={id}>\n {label}\n </label>\n )}\n <button\n ref={setButtonRef}\n id={id}\n type=\"button\"\n role=\"combobox\"\n className={controlClass}\n disabled={disabled}\n aria-haspopup=\"listbox\"\n aria-expanded={isOpen}\n aria-controls={listboxId}\n aria-activedescendant={activeDescendant}\n aria-invalid={showInvalid ? true : undefined}\n aria-required={required ? true : undefined}\n aria-describedby={mergeFieldDescribedBy(\n describedBy,\n messageId,\n undefined,\n )}\n aria-label={ariaLabel}\n onClick={() => (isOpen ? close() : open())}\n onFocus={() => setIsFocused(true)}\n onBlur={() => setIsFocused(false)}\n onKeyDown={handleKeyDown}\n >\n {leadingIcon != null && (\n <span className={styles['select__leading-icon']} aria-hidden>\n <IconSlotContext.Provider value={{ size: '16' }}>\n {leadingIcon}\n </IconSlotContext.Provider>\n </span>\n )}\n <span className={styles.select__value}>{displayLabel}</span>\n <span className={styles['select__trailing-icon']} aria-hidden>\n <Icon size=\"12\" glyph={<ChevronDownIcon />} />\n </span>\n </button>\n </div>\n\n {showMessage && (\n <FieldMessage\n id={messageId}\n className={styles['select__message']}\n message={message}\n tone={messageTone ?? 'error'}\n />\n )}\n\n {name != null && !disabled && (\n <input type=\"hidden\" name={name} value={value} />\n )}\n\n {popupMounted &&\n renderPortal(\n <div\n ref={portalRef}\n className={[\n styles.select__popup,\n placement === 'above' ? styles['select__popup--above'] : '',\n popupVisible ? styles['select__popup--visible'] : '',\n ]\n .filter(Boolean)\n .join(' ')}\n style={popupStyle}\n >\n <PopoverMenu className={styles.select__menu}>\n <PopoverMenuScroll maxHeight={maxHeight}>\n <ul\n id={listboxId}\n className={styles.select__list}\n role=\"listbox\"\n aria-label={\n typeof label === 'string'\n ? label\n : (ariaLabel ?? listboxLabel)\n }\n >\n {listOptions.map((option, index) => (\n <SelectOptionRow\n key={option.value}\n option={option}\n menuItemProps={menuItemProps}\n listboxId={listboxId}\n selected={option.value === value}\n active={index === activeIndex}\n onSelect={selectOption}\n onHover={() => hoverRow(index)}\n dividerAfter={option.dividerAfter}\n />\n ))}\n </ul>\n </PopoverMenuScroll>\n </PopoverMenu>\n </div>,\n )}\n </div>\n );\n});\n\nexport default Select;\n"],"names":["POPUP_MAX_HEIGHT","SelectOptionRow","option","menuItemProps","listboxId","selected","active","onSelect","onHover","dividerAfter","jsxs","Fragment","jsx","styles","MenuItem","mergeMenuItemProps","ev","PopoverMenuDivider","Select","forwardRef","options","valueProp","defaultValue","onChange","placeholder","label","leadingIcon","size","invalid","message","messageTone","required","disabled","idProp","name","className","ariaLabel","describedBy","listboxLabel","portalContainer","zIndex","ref","generatedId","useId","id","rootRef","useRef","anchorRef","buttonRef","setButtonRef","useCallback","node","isControlled","uncontrolledValue","setUncontrolledValue","useState","value","isOpen","setIsOpen","isFocused","setIsFocused","activeIndex","setActiveIndex","activatedByPointer","hoverRow","index","selectedOption","useMemo","o","listOptions","hasValue","popupMounted","popupVisible","usePopoverTransition","placement","maxHeight","popupStyle","portalRef","renderPortal","useAnchoredPopupPortal","close","open","useOutsideClose","useEffect","prev","selectedIdx","firstEnabled","commitValue","next","selectOption","_a","moveActive","delta","enabled","i","currentPos","nextPos","el","handleKeyDown","idx","labelFloated","displayLabel","showPlaceholderStyle","activeOption","activeDescendant","showInvalid","isFieldInvalid","showMessage","hasFieldMessage","messageId","sizeClass","toKebab","rootClass","controlClass","mergeFieldDescribedBy","IconSlotContext","Icon","ChevronDownIcon","FieldMessage","PopoverMenu","PopoverMenuScroll"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._select_ew42w_13{position:relative;display:flex;flex-direction:column;width:100%}._select__wrapper_ew42w_19{position:relative;background-color:var(--center-channel-bg);border-radius:var(--radius-s);box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.16);transition:box-shadow var(--duration-quick) var(--ease-transition);cursor:pointer}._select_ew42w_13:not(._select--disabled_ew42w_27):hover:not(:focus-within) ._select__wrapper_ew42w_19{box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.24)}._select_ew42w_13:focus-within ._select__wrapper_ew42w_19{box-shadow:inset 0 0 0 1px var(--focus-ring-color),0 0 0 1px var(--focus-ring-color)}._select--disabled_ew42w_27 ._select__wrapper_ew42w_19{opacity:.56;cursor:not-allowed}._select__label_ew42w_37{position:absolute;left:var(--spacing-xs);top:50%;z-index:1;padding:0 var(--spacing-xxxs);transform:translateY(-50%);margin:0;font-family:var(--font-family-body);font-size:var(--font-size-75);line-height:var(--line-height-75);font-weight:var(--font-weight-regular);color:rgba(var(--center-channel-color-rgb),.64);background-color:var(--center-channel-bg);pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 24px);transition:transform var(--duration-quick) var(--ease-transition),font-size var(--duration-quick) var(--ease-transition),top var(--duration-quick) var(--ease-transition),left var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition)}._select--label-floated_ew42w_58 ._select__label_ew42w_37{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:1.4}._select_ew42w_13:focus-within ._select__label_ew42w_37{color:var(--button-bg)}._select__message_ew42w_67{margin-top:var(--spacing-xs)}._select__control_ew42w_70{display:flex;align-items:center;width:100%;margin:0;border:0;background:transparent;font-family:var(--font-family-body);font-size:var(--font-size-75);line-height:var(--line-height-75);font-weight:var(--font-weight-regular);color:var(--center-channel-color);text-align:left;cursor:pointer;gap:var(--spacing-xs)}._select__control_ew42w_70:focus{outline:none}._select__control_ew42w_70:focus-visible{outline:none}._select__control_ew42w_70:disabled{cursor:not-allowed;color:rgba(var(--center-channel-color-rgb),.64)}._select__control--placeholder_ew42w_96 ._select__value_ew42w_96{color:rgba(var(--center-channel-color-rgb),.64)}._select__value_ew42w_96{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}._select__leading-icon_ew42w_106{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:rgba(var(--center-channel-color-rgb),.64)}._select__trailing-icon_ew42w_113{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:rgba(var(--center-channel-color-rgb),.64);margin-right:var(--spacing-xxxs);transition:transform var(--duration-quick) var(--ease-transition)}._select--open_ew42w_122 ._select__trailing-icon_ew42w_113{transform:rotate(180deg)}._select__popup_ew42w_125{opacity:0;transform:scale(.9);transform-origin:top center;transition:opacity var(--duration-quick) var(--ease-exit),transform var(--duration-quick) var(--ease-exit);pointer-events:none}._select__popup--above_ew42w_132{transform-origin:bottom center}._select__popup--visible_ew42w_135{opacity:1;transform:scale(1);pointer-events:auto;transition:opacity var(--duration-quick) var(--ease-entrance),transform var(--duration-quick) var(--ease-entrance)}._select__popup_ew42w_125 ._select__menu_ew42w_141{width:100%;min-width:100%;max-width:none}._select__list_ew42w_146{margin:0;padding:0;list-style:none}._select__option_ew42w_151{display:block;width:100%;list-style:none}._select__option_ew42w_151[aria-disabled=true]{cursor:not-allowed}._select__option-content--disabled_ew42w_159{opacity:.4}._select--size-small_ew42w_162 ._select__wrapper_ew42w_19{min-height:32px}._select--size-small_ew42w_162 ._select__control_ew42w_70{min-height:32px;padding:var(--spacing-xs) var(--spacing-m);gap:var(--spacing-xs);font-size:var(--font-size-75);line-height:var(--line-height-75)}._select--size-small_ew42w_162 ._select__trailing-icon_ew42w_113 svg{width:var(--icon-size-12);height:var(--icon-size-12)}._select--size-small_ew42w_162._select--label-floated_ew42w_58 ._select__label_ew42w_37{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:1.4}._select--size-medium_ew42w_182 ._select__wrapper_ew42w_19{min-height:40px}._select--size-medium_ew42w_182 ._select__control_ew42w_70{min-height:40px;padding:var(--spacing-s) var(--spacing-l);gap:var(--spacing-s);font-size:var(--font-size-100);line-height:var(--line-height-100)}._select--size-medium_ew42w_182 ._select__label_ew42w_37{font-size:var(--font-size-100);left:var(--spacing-m);line-height:var(--line-height-100)}._select--size-medium_ew42w_182 ._select__trailing-icon_ew42w_113 svg{width:var(--icon-size-16);height:var(--icon-size-16)}._select--size-medium_ew42w_182._select--label-floated_ew42w_58 ._select__label_ew42w_37{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:1.4}._select--size-large_ew42w_207 ._select__wrapper_ew42w_19{min-height:48px}._select--size-large_ew42w_207 ._select__control_ew42w_70{min-height:48px;padding:var(--spacing-m) var(--spacing-l);gap:var(--spacing-s);font-size:var(--font-size-200);line-height:var(--line-height-200)}._select--size-large_ew42w_207 ._select__label_ew42w_37{font-size:var(--font-size-200);line-height:var(--line-height-200);left:var(--spacing-m)}._select--size-large_ew42w_207 ._select__trailing-icon_ew42w_113 svg{width:var(--icon-size-16);height:var(--icon-size-16)}._select--size-large_ew42w_207._select--label-floated_ew42w_58 ._select__label_ew42w_37{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:1.4}._select_ew42w_13:has(._select__label_ew42w_37):not(._select--label-floated_ew42w_58) ._select__value_ew42w_96{color:transparent}._select--invalid_ew42w_235 ._select__wrapper_ew42w_19{box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger))}._select--invalid_ew42w_235:focus-within ._select__wrapper_ew42w_19{box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger)),0 0 0 1px var(--error-text, var(--color-danger))}._select--invalid_ew42w_235 ._select__label_ew42w_37{color:var(--error-text, var(--color-danger))}._select--invalid_ew42w_235:focus-within ._select__label_ew42w_37{color:var(--error-text, var(--color-danger))}._select--has-leading-icon_ew42w_247 ._select__label_ew42w_37{left:calc(var(--spacing-m) + var(--icon-size-16) + var(--spacing-xs) - var(--spacing-xxxs))}._select--has-leading-icon_ew42w_247._select--label-floated_ew42w_58 ._select__label_ew42w_37{left:var(--spacing-xs)}._select--has-leading-icon_ew42w_247._select--size-medium_ew42w_182 ._select__label_ew42w_37,._select--has-leading-icon_ew42w_247._select--size-large_ew42w_207 ._select__label_ew42w_37{left:calc(var(--spacing-m) + var(--icon-size-16) + var(--spacing-s))}._select--has-leading-icon_ew42w_247._select--size-medium_ew42w_182._select--label-floated_ew42w_58 ._select__label_ew42w_37,._select--has-leading-icon_ew42w_247._select--size-large_ew42w_207._select--label-floated_ew42w_58 ._select__label_ew42w_37{left:var(--spacing-m)}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
|
+
import { FieldMessageTone } from '../field-message/FieldMessage';
|
|
2
3
|
import { MenuItemOwnedProps, MenuItemPassthroughProps } from '../menu-item/MenuItem';
|
|
3
4
|
export type SelectSize = 'small' | 'medium' | 'large';
|
|
4
5
|
type SelectMenuItemProps = MenuItemPassthroughProps<Exclude<MenuItemOwnedProps, 'onClick'>>;
|
|
@@ -36,12 +37,25 @@ export interface SelectProps {
|
|
|
36
37
|
/** Leading icon — pass `<Icon glyph={<SomeIcon />} />`; Select provides the correct size via context. */
|
|
37
38
|
leadingIcon?: ReactNode;
|
|
38
39
|
size?: SelectSize;
|
|
40
|
+
/** When true, shows invalid/error styling. */
|
|
39
41
|
invalid?: boolean;
|
|
42
|
+
/**
|
|
43
|
+
* Field message under the field. Accepts translated nodes (e.g. `<FormattedMessage/>`).
|
|
44
|
+
* Defaults to error tone (invalid chrome) when set without `messageTone`. It is linked to
|
|
45
|
+
* the trigger with `aria-describedby`.
|
|
46
|
+
*/
|
|
47
|
+
message?: ReactNode;
|
|
48
|
+
/** Visual tone for `message`. Default: `error` when `message` is set. */
|
|
49
|
+
messageTone?: FieldMessageTone;
|
|
50
|
+
/** Marks the field required for assistive tech (`aria-required="true"`). */
|
|
51
|
+
required?: boolean;
|
|
40
52
|
disabled?: boolean;
|
|
41
53
|
id?: string;
|
|
42
54
|
name?: string;
|
|
43
55
|
className?: string;
|
|
44
56
|
'aria-label'?: string;
|
|
57
|
+
/** Extra description ids for the trigger; the field message id is appended. */
|
|
58
|
+
'aria-describedby'?: string;
|
|
45
59
|
/**
|
|
46
60
|
* Accessible name for the options list when `label` isn't a string and no
|
|
47
61
|
* `aria-label` is set. Default: "Options".
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAmBtD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AAE/E,OAAO,KAAK,EACV,kBAAkB,EAClB,wBAAwB,EACzB,MAAM,gCAAgC,CAAC;AAYxC,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAGtD,KAAK,mBAAmB,GAAG,wBAAwB,CACjD,OAAO,CAAC,kBAAkB,EAAE,SAAS,CAAC,CACvC,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,4GAA4G;IAC5G,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,gCAAgC;IAChC,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,2DAA2D;IAC3D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;OAIG;IACH,aAAa,CAAC,EAAE,mBAAmB,CAAC;CACrC,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB;;;;OAIG;IACH,aAAa,CAAC,EAAE,mBAAmB,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,sGAAsG;IACtG,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,yGAAyG;IACzG,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,yEAAyE;IACzE,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,+EAA+E;IAC/E,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mEAAmE;IACnE,eAAe,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACrC,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAsDD;;;GAGG;AACH,QAAA,MAAM,MAAM,2GA0WV,CAAC;AAEH,eAAe,MAAM,CAAC"}
|