@k2b/ui 0.20.0 → 0.22.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/browser/actions/Button.js +20 -31
- package/dist/browser/actions/Button.js.map +1 -1
- package/dist/browser/actions/ContextMenu.js +10 -4
- package/dist/browser/actions/ContextMenu.js.map +1 -1
- package/dist/browser/actions/CopyButton.js +10 -8
- package/dist/browser/actions/CopyButton.js.map +1 -1
- package/dist/browser/actions/FilterChip.js +3 -1
- package/dist/browser/actions/FilterChip.js.map +1 -1
- package/dist/browser/actions/GestureMenu.js +4 -0
- package/dist/browser/actions/GestureMenu.js.map +1 -1
- package/dist/browser/actions/SpotlightSearch.js +3 -1
- package/dist/browser/actions/SpotlightSearch.js.map +1 -1
- package/dist/browser/actions/filter-messages.js +20 -0
- package/dist/browser/actions/filter-messages.js.map +1 -0
- package/dist/browser/actions/spotlight-messages.js +16 -0
- package/dist/browser/actions/spotlight-messages.js.map +1 -0
- package/dist/browser/chat/ChatComposer.js +47 -41
- package/dist/browser/chat/ChatComposer.js.map +1 -1
- package/dist/browser/chat/ChatPrimitives.js +25 -23
- package/dist/browser/chat/ChatPrimitives.js.map +1 -1
- package/dist/browser/chat/ChatRoot.js +3 -3
- package/dist/browser/chat/ChatRoot.js.map +1 -1
- package/dist/browser/chat/ChatTimeline.js +12 -12
- package/dist/browser/chat/ChatTimeline.js.map +1 -1
- package/dist/browser/chat/chat-messages.js +236 -0
- package/dist/browser/chat/chat-messages.js.map +1 -0
- package/dist/browser/content/Calendar.js +1960 -575
- package/dist/browser/content/Calendar.js.map +1 -1
- package/dist/browser/content/Chart.js +15 -8
- package/dist/browser/content/Chart.js.map +1 -1
- package/dist/browser/content/ChartExplorer.js +20 -12
- package/dist/browser/content/ChartExplorer.js.map +1 -1
- package/dist/browser/content/ChartExplorerControls.js +9 -7
- package/dist/browser/content/ChartExplorerControls.js.map +1 -1
- package/dist/browser/content/ChartFilterControls.js +4 -2
- package/dist/browser/content/ChartFilterControls.js.map +1 -1
- package/dist/browser/content/ChartSnapshotView.js +3 -3
- package/dist/browser/content/ChartSnapshotView.js.map +1 -1
- package/dist/browser/content/DataTable.js +68 -59
- package/dist/browser/content/DataTable.js.map +1 -1
- package/dist/browser/content/Docs.js +3 -1
- package/dist/browser/content/Docs.js.map +1 -1
- package/dist/browser/content/FileBrowser.js +30 -26
- package/dist/browser/content/FileBrowser.js.map +1 -1
- package/dist/browser/content/FileTree.js +9 -7
- package/dist/browser/content/FileTree.js.map +1 -1
- package/dist/browser/content/FileView.js +37 -28
- package/dist/browser/content/FileView.js.map +1 -1
- package/dist/browser/content/Lightbox.js +9 -7
- package/dist/browser/content/Lightbox.js.map +1 -1
- package/dist/browser/content/LogEntriesTable.js +3 -3
- package/dist/browser/content/LogEntriesTable.js.map +1 -1
- package/dist/browser/content/MessageRow.js +24 -22
- package/dist/browser/content/MessageRow.js.map +1 -1
- package/dist/browser/content/Pagination.js +7 -7
- package/dist/browser/content/Pagination.js.map +1 -1
- package/dist/browser/content/PdfPreview.js +15 -13
- package/dist/browser/content/PdfPreview.js.map +1 -1
- package/dist/browser/content/RangePicker.js +3 -1
- package/dist/browser/content/RangePicker.js.map +1 -1
- package/dist/browser/content/StructuredDataPreview.js +3 -1
- package/dist/browser/content/StructuredDataPreview.js.map +1 -1
- package/dist/browser/content/Timeline.js +13 -11
- package/dist/browser/content/Timeline.js.map +1 -1
- package/dist/browser/content/VideoPlayer.js +5 -5
- package/dist/browser/content/VideoPlayer.js.map +1 -1
- package/dist/browser/content/VirtualFeed.js +6 -4
- package/dist/browser/content/VirtualFeed.js.map +1 -1
- package/dist/browser/content/ZoomPanViewport.js +10 -7
- package/dist/browser/content/ZoomPanViewport.js.map +1 -1
- package/dist/browser/content/calendar-messages.js +121 -0
- package/dist/browser/content/calendar-messages.js.map +1 -0
- package/dist/browser/content/calendar-month-layout.js +108 -0
- package/dist/browser/content/calendar-month-layout.js.map +1 -0
- package/dist/browser/content/calendar-pointer.js +4 -3
- package/dist/browser/content/calendar-pointer.js.map +1 -1
- package/dist/browser/content/chart-messages.js +136 -0
- package/dist/browser/content/chart-messages.js.map +1 -0
- package/dist/browser/content/collection-selection.js +2 -0
- package/dist/browser/content/collection-selection.js.map +1 -1
- package/dist/browser/content/data-table-messages.js +24 -0
- package/dist/browser/content/data-table-messages.js.map +1 -0
- package/dist/browser/content/docs-messages.js +24 -0
- package/dist/browser/content/docs-messages.js.map +1 -0
- package/dist/browser/content/feed-messages.js +34 -0
- package/dist/browser/content/feed-messages.js.map +1 -0
- package/dist/browser/content/file-browser-messages.js +69 -0
- package/dist/browser/content/file-browser-messages.js.map +1 -0
- package/dist/browser/content/file-view-messages.js +64 -0
- package/dist/browser/content/file-view-messages.js.map +1 -0
- package/dist/browser/content/index.js.map +1 -1
- package/dist/browser/content/lightbox-messages.js +36 -0
- package/dist/browser/content/lightbox-messages.js.map +1 -0
- package/dist/browser/content/log-entries-messages.js +20 -0
- package/dist/browser/content/log-entries-messages.js.map +1 -0
- package/dist/browser/content/markdown-info-block-messages.js +24 -0
- package/dist/browser/content/markdown-info-block-messages.js.map +1 -0
- package/dist/browser/content/markdown-info-blocks.js +3 -3
- package/dist/browser/content/markdown-info-blocks.js.map +1 -1
- package/dist/browser/content/markdown-links.js +2 -2
- package/dist/browser/content/markdown-links.js.map +1 -1
- package/dist/browser/content/markdown-reference-messages.js +30 -0
- package/dist/browser/content/markdown-reference-messages.js.map +1 -0
- package/dist/browser/content/pagination-messages.js +38 -0
- package/dist/browser/content/pagination-messages.js.map +1 -0
- package/dist/browser/content/pdf-messages.js +43 -0
- package/dist/browser/content/pdf-messages.js.map +1 -0
- package/dist/browser/content/range-picker-messages.js +20 -0
- package/dist/browser/content/range-picker-messages.js.map +1 -0
- package/dist/browser/content/structured-data-messages.js +22 -0
- package/dist/browser/content/structured-data-messages.js.map +1 -0
- package/dist/browser/content/timeline-messages.js +62 -0
- package/dist/browser/content/timeline-messages.js.map +1 -0
- package/dist/browser/content/video-messages.js +24 -0
- package/dist/browser/content/video-messages.js.map +1 -0
- package/dist/browser/content/viewport-messages.js +28 -0
- package/dist/browser/content/viewport-messages.js.map +1 -0
- package/dist/browser/feedback/HoverPreview.js +34 -6
- package/dist/browser/feedback/HoverPreview.js.map +1 -1
- package/dist/browser/feedback/InstallGuide.js +18 -18
- package/dist/browser/feedback/InstallGuide.js.map +1 -1
- package/dist/browser/feedback/install-messages.js +104 -0
- package/dist/browser/feedback/install-messages.js.map +1 -0
- package/dist/browser/feedback/prompt-messages.js +65 -0
- package/dist/browser/feedback/prompt-messages.js.map +1 -0
- package/dist/browser/feedback/prompts.js +14 -11
- package/dist/browser/feedback/prompts.js.map +1 -1
- package/dist/browser/feedback/toast-messages.js +18 -0
- package/dist/browser/feedback/toast-messages.js.map +1 -0
- package/dist/browser/feedback/toast.js +4 -3
- package/dist/browser/feedback/toast.js.map +1 -1
- package/dist/browser/index.js +1 -1
- package/dist/browser/index.js.map +1 -1
- package/dist/browser/inputs/AutocompleteEditor.js +6 -4
- package/dist/browser/inputs/AutocompleteEditor.js.map +1 -1
- package/dist/browser/inputs/AutocompleteSelect.js +10 -8
- package/dist/browser/inputs/AutocompleteSelect.js.map +1 -1
- package/dist/browser/inputs/ChoiceGroups.js +4 -0
- package/dist/browser/inputs/ChoiceGroups.js.map +1 -1
- package/dist/browser/inputs/ChoiceInputs.js +5 -5
- package/dist/browser/inputs/ChoiceInputs.js.map +1 -1
- package/dist/browser/inputs/Combobox.js +3 -1
- package/dist/browser/inputs/Combobox.js.map +1 -1
- package/dist/browser/inputs/DatePicker.js +46 -10
- package/dist/browser/inputs/DatePicker.js.map +1 -1
- package/dist/browser/inputs/FileDropTarget.js +6 -6
- package/dist/browser/inputs/FileDropTarget.js.map +1 -1
- package/dist/browser/inputs/FileInputs.js +30 -21
- package/dist/browser/inputs/FileInputs.js.map +1 -1
- package/dist/browser/inputs/MultiSelectInput.js +7 -5
- package/dist/browser/inputs/MultiSelectInput.js.map +1 -1
- package/dist/browser/inputs/NumberInput.js +4 -2
- package/dist/browser/inputs/NumberInput.js.map +1 -1
- package/dist/browser/inputs/QrScanner.js +5 -5
- package/dist/browser/inputs/QrScanner.js.map +1 -1
- package/dist/browser/inputs/Select.js +7 -5
- package/dist/browser/inputs/Select.js.map +1 -1
- package/dist/browser/inputs/SelectChip.js +3 -3
- package/dist/browser/inputs/SelectChip.js.map +1 -1
- package/dist/browser/inputs/SignatureInput.js +9 -3
- package/dist/browser/inputs/SignatureInput.js.map +1 -1
- package/dist/browser/inputs/SpecialInputs.js +4 -2
- package/dist/browser/inputs/SpecialInputs.js.map +1 -1
- package/dist/browser/inputs/TagEditor.js +8 -6
- package/dist/browser/inputs/TagEditor.js.map +1 -1
- package/dist/browser/inputs/TagsInput.js +5 -5
- package/dist/browser/inputs/TagsInput.js.map +1 -1
- package/dist/browser/inputs/TemplateEditor.js +5 -5
- package/dist/browser/inputs/TemplateEditor.js.map +1 -1
- package/dist/browser/inputs/TextInput.js +3 -1
- package/dist/browser/inputs/TextInput.js.map +1 -1
- package/dist/browser/inputs/completion-messages.js +24 -0
- package/dist/browser/inputs/completion-messages.js.map +1 -0
- package/dist/browser/inputs/date-picker.js +24 -0
- package/dist/browser/inputs/date-picker.js.map +1 -1
- package/dist/browser/inputs/file-drop-messages.js +63 -0
- package/dist/browser/inputs/file-drop-messages.js.map +1 -0
- package/dist/browser/inputs/file-drop.js.map +1 -1
- package/dist/browser/inputs/file-input-messages.js +60 -0
- package/dist/browser/inputs/file-input-messages.js.map +1 -0
- package/dist/browser/inputs/icon-messages.js +22 -0
- package/dist/browser/inputs/icon-messages.js.map +1 -0
- package/dist/browser/inputs/input-messages.js +38 -0
- package/dist/browser/inputs/input-messages.js.map +1 -0
- package/dist/browser/inputs/markdown/MarkdownEditor.js +10 -6
- package/dist/browser/inputs/markdown/MarkdownEditor.js.map +1 -1
- package/dist/browser/inputs/markdown/Toolbar.js +13 -13
- package/dist/browser/inputs/markdown/Toolbar.js.map +1 -1
- package/dist/browser/inputs/markdown/editor-messages.js +43 -0
- package/dist/browser/inputs/markdown/editor-messages.js.map +1 -0
- package/dist/browser/inputs/markdown/toolbar-messages.js +40 -0
- package/dist/browser/inputs/markdown/toolbar-messages.js.map +1 -0
- package/dist/browser/inputs/qr-messages.js +26 -0
- package/dist/browser/inputs/qr-messages.js.map +1 -0
- package/dist/browser/inputs/select-messages.js +63 -0
- package/dist/browser/inputs/select-messages.js.map +1 -0
- package/dist/browser/inputs/tag-messages.js +44 -0
- package/dist/browser/inputs/tag-messages.js.map +1 -0
- package/dist/browser/inputs/template-messages.js +22 -0
- package/dist/browser/inputs/template-messages.js.map +1 -0
- package/dist/browser/internal/render-error-messages.js +20 -0
- package/dist/browser/internal/render-error-messages.js.map +1 -0
- package/dist/browser/internal/render-error.js +3 -1
- package/dist/browser/internal/render-error.js.map +1 -1
- package/dist/browser/internal/text-selection.js +101 -0
- package/dist/browser/internal/text-selection.js.map +1 -0
- package/dist/browser/intl/messages.js +12 -1155
- package/dist/browser/intl/messages.js.map +1 -1
- package/dist/browser/layout/AppWorkspace.js +561 -418
- package/dist/browser/layout/AppWorkspace.js.map +1 -1
- package/dist/browser/layout/BottomSheet.js +6 -1
- package/dist/browser/layout/BottomSheet.js.map +1 -1
- package/dist/browser/layout/Discussion.js +8 -5
- package/dist/browser/layout/Discussion.js.map +1 -1
- package/dist/browser/layout/FloatingWindow.js +8 -5
- package/dist/browser/layout/FloatingWindow.js.map +1 -1
- package/dist/browser/layout/Navigation.js +7 -6
- package/dist/browser/layout/Navigation.js.map +1 -1
- package/dist/browser/layout/PageTitle.js +370 -0
- package/dist/browser/layout/PageTitle.js.map +1 -0
- package/dist/browser/layout/PanelDialog.js +8 -6
- package/dist/browser/layout/PanelDialog.js.map +1 -1
- package/dist/browser/layout/Panes.js +23 -15
- package/dist/browser/layout/Panes.js.map +1 -1
- package/dist/browser/layout/PullToRefresh.js +13 -4
- package/dist/browser/layout/PullToRefresh.js.map +1 -1
- package/dist/browser/layout/Settings.js +14 -12
- package/dist/browser/layout/Settings.js.map +1 -1
- package/dist/browser/layout/SettingsCollection.js +6 -5
- package/dist/browser/layout/SettingsCollection.js.map +1 -1
- package/dist/browser/layout/SettingsModal.js +3 -1
- package/dist/browser/layout/SettingsModal.js.map +1 -1
- package/dist/browser/layout/app-workspace-controller.js +743 -12
- package/dist/browser/layout/app-workspace-controller.js.map +1 -1
- package/dist/browser/layout/app-workspace-state.js +3 -2
- package/dist/browser/layout/app-workspace-state.js.map +1 -1
- package/dist/browser/layout/floating-window-messages.js +28 -0
- package/dist/browser/layout/floating-window-messages.js.map +1 -0
- package/dist/browser/layout/index.js +2 -0
- package/dist/browser/layout/index.js.map +1 -1
- package/dist/browser/layout/navigation-model.js.map +1 -1
- package/dist/browser/layout/page-title-controller.js +169 -0
- package/dist/browser/layout/page-title-controller.js.map +1 -0
- package/dist/browser/layout/panel-dialog-messages.js +20 -0
- package/dist/browser/layout/panel-dialog-messages.js.map +1 -0
- package/dist/browser/layout/panes-messages.js +48 -0
- package/dist/browser/layout/panes-messages.js.map +1 -0
- package/dist/browser/layout/refresh-messages.js +20 -0
- package/dist/browser/layout/refresh-messages.js.map +1 -0
- package/dist/browser/layout/settings-messages.js +54 -0
- package/dist/browser/layout/settings-messages.js.map +1 -0
- package/dist/browser/layout/workspace-messages.js +56 -0
- package/dist/browser/layout/workspace-messages.js.map +1 -0
- package/dist/browser/surfaces/Avatar.js +5 -5
- package/dist/browser/surfaces/Avatar.js.map +1 -1
- package/dist/browser/surfaces/ResourceCard.js +4 -2
- package/dist/browser/surfaces/ResourceCard.js.map +1 -1
- package/dist/browser/surfaces/Tag.js +3 -3
- package/dist/browser/surfaces/Tag.js.map +1 -1
- package/dist/browser/surfaces/avatar-messages.js +26 -0
- package/dist/browser/surfaces/avatar-messages.js.map +1 -0
- package/dist/browser/surfaces/resource-messages.js +26 -0
- package/dist/browser/surfaces/resource-messages.js.map +1 -0
- package/dist/browser/widgets/Widget.js +6 -0
- package/dist/browser/widgets/Widget.js.map +1 -1
- package/dist/ssr/actions/Button.js +21 -32
- package/dist/ssr/actions/Button.js.map +1 -1
- package/dist/ssr/actions/ContextMenu.js +7 -3
- package/dist/ssr/actions/ContextMenu.js.map +1 -1
- package/dist/ssr/actions/CopyButton.js +9 -7
- package/dist/ssr/actions/CopyButton.js.map +1 -1
- package/dist/ssr/actions/FilterChip.js +3 -1
- package/dist/ssr/actions/FilterChip.js.map +1 -1
- package/dist/ssr/actions/GestureMenu.js +4 -0
- package/dist/ssr/actions/GestureMenu.js.map +1 -1
- package/dist/ssr/actions/SpotlightSearch.js +3 -1
- package/dist/ssr/actions/SpotlightSearch.js.map +1 -1
- package/dist/ssr/actions/filter-messages.js +20 -0
- package/dist/ssr/actions/filter-messages.js.map +1 -0
- package/dist/ssr/actions/spotlight-messages.js +16 -0
- package/dist/ssr/actions/spotlight-messages.js.map +1 -0
- package/dist/ssr/chat/ChatComposer.js +47 -41
- package/dist/ssr/chat/ChatComposer.js.map +1 -1
- package/dist/ssr/chat/ChatPrimitives.js +23 -21
- package/dist/ssr/chat/ChatPrimitives.js.map +1 -1
- package/dist/ssr/chat/ChatRoot.js +3 -3
- package/dist/ssr/chat/ChatRoot.js.map +1 -1
- package/dist/ssr/chat/ChatTimeline.js +11 -11
- package/dist/ssr/chat/ChatTimeline.js.map +1 -1
- package/dist/ssr/chat/chat-messages.js +236 -0
- package/dist/ssr/chat/chat-messages.js.map +1 -0
- package/dist/ssr/content/Calendar.js +1232 -115
- package/dist/ssr/content/Calendar.js.map +1 -1
- package/dist/ssr/content/Chart.js +12 -5
- package/dist/ssr/content/Chart.js.map +1 -1
- package/dist/ssr/content/ChartExplorer.js +10 -8
- package/dist/ssr/content/ChartExplorer.js.map +1 -1
- package/dist/ssr/content/ChartExplorerControls.js +9 -7
- package/dist/ssr/content/ChartExplorerControls.js.map +1 -1
- package/dist/ssr/content/ChartFilterControls.js +4 -2
- package/dist/ssr/content/ChartFilterControls.js.map +1 -1
- package/dist/ssr/content/ChartSnapshotView.js +3 -3
- package/dist/ssr/content/ChartSnapshotView.js.map +1 -1
- package/dist/ssr/content/DataTable.js +10 -4
- package/dist/ssr/content/DataTable.js.map +1 -1
- package/dist/ssr/content/Docs.js +3 -1
- package/dist/ssr/content/Docs.js.map +1 -1
- package/dist/ssr/content/FileBrowser.js +30 -26
- package/dist/ssr/content/FileBrowser.js.map +1 -1
- package/dist/ssr/content/FileTree.js +9 -7
- package/dist/ssr/content/FileTree.js.map +1 -1
- package/dist/ssr/content/FileView.js +37 -28
- package/dist/ssr/content/FileView.js.map +1 -1
- package/dist/ssr/content/Lightbox.js +8 -6
- package/dist/ssr/content/Lightbox.js.map +1 -1
- package/dist/ssr/content/LogEntriesTable.js +3 -3
- package/dist/ssr/content/LogEntriesTable.js.map +1 -1
- package/dist/ssr/content/MessageRow.js +24 -22
- package/dist/ssr/content/MessageRow.js.map +1 -1
- package/dist/ssr/content/Pagination.js +6 -6
- package/dist/ssr/content/Pagination.js.map +1 -1
- package/dist/ssr/content/PdfPreview.js +15 -13
- package/dist/ssr/content/PdfPreview.js.map +1 -1
- package/dist/ssr/content/RangePicker.js +3 -1
- package/dist/ssr/content/RangePicker.js.map +1 -1
- package/dist/ssr/content/StructuredDataPreview.js +3 -1
- package/dist/ssr/content/StructuredDataPreview.js.map +1 -1
- package/dist/ssr/content/Timeline.js +13 -11
- package/dist/ssr/content/Timeline.js.map +1 -1
- package/dist/ssr/content/VideoPlayer.js +5 -5
- package/dist/ssr/content/VideoPlayer.js.map +1 -1
- package/dist/ssr/content/VirtualFeed.js +6 -4
- package/dist/ssr/content/VirtualFeed.js.map +1 -1
- package/dist/ssr/content/ZoomPanViewport.js +7 -4
- package/dist/ssr/content/ZoomPanViewport.js.map +1 -1
- package/dist/ssr/content/calendar-messages.js +121 -0
- package/dist/ssr/content/calendar-messages.js.map +1 -0
- package/dist/ssr/content/calendar-month-layout.js +108 -0
- package/dist/ssr/content/calendar-month-layout.js.map +1 -0
- package/dist/ssr/content/calendar-pointer.js +4 -3
- package/dist/ssr/content/calendar-pointer.js.map +1 -1
- package/dist/ssr/content/chart-messages.js +136 -0
- package/dist/ssr/content/chart-messages.js.map +1 -0
- package/dist/ssr/content/collection-selection.js +2 -0
- package/dist/ssr/content/collection-selection.js.map +1 -1
- package/dist/ssr/content/data-table-messages.js +24 -0
- package/dist/ssr/content/data-table-messages.js.map +1 -0
- package/dist/ssr/content/docs-messages.js +24 -0
- package/dist/ssr/content/docs-messages.js.map +1 -0
- package/dist/ssr/content/feed-messages.js +34 -0
- package/dist/ssr/content/feed-messages.js.map +1 -0
- package/dist/ssr/content/file-browser-messages.js +69 -0
- package/dist/ssr/content/file-browser-messages.js.map +1 -0
- package/dist/ssr/content/file-view-messages.js +64 -0
- package/dist/ssr/content/file-view-messages.js.map +1 -0
- package/dist/ssr/content/index.js.map +1 -1
- package/dist/ssr/content/lightbox-messages.js +36 -0
- package/dist/ssr/content/lightbox-messages.js.map +1 -0
- package/dist/ssr/content/log-entries-messages.js +20 -0
- package/dist/ssr/content/log-entries-messages.js.map +1 -0
- package/dist/ssr/content/markdown-info-block-messages.js +24 -0
- package/dist/ssr/content/markdown-info-block-messages.js.map +1 -0
- package/dist/ssr/content/markdown-info-blocks.js +3 -3
- package/dist/ssr/content/markdown-info-blocks.js.map +1 -1
- package/dist/ssr/content/markdown-links.js +2 -2
- package/dist/ssr/content/markdown-links.js.map +1 -1
- package/dist/ssr/content/markdown-reference-messages.js +30 -0
- package/dist/ssr/content/markdown-reference-messages.js.map +1 -0
- package/dist/ssr/content/pagination-messages.js +38 -0
- package/dist/ssr/content/pagination-messages.js.map +1 -0
- package/dist/ssr/content/pdf-messages.js +43 -0
- package/dist/ssr/content/pdf-messages.js.map +1 -0
- package/dist/ssr/content/range-picker-messages.js +20 -0
- package/dist/ssr/content/range-picker-messages.js.map +1 -0
- package/dist/ssr/content/structured-data-messages.js +22 -0
- package/dist/ssr/content/structured-data-messages.js.map +1 -0
- package/dist/ssr/content/timeline-messages.js +62 -0
- package/dist/ssr/content/timeline-messages.js.map +1 -0
- package/dist/ssr/content/video-messages.js +24 -0
- package/dist/ssr/content/video-messages.js.map +1 -0
- package/dist/ssr/content/viewport-messages.js +28 -0
- package/dist/ssr/content/viewport-messages.js.map +1 -0
- package/dist/ssr/feedback/HoverPreview.js +34 -6
- package/dist/ssr/feedback/HoverPreview.js.map +1 -1
- package/dist/ssr/feedback/InstallGuide.js +18 -18
- package/dist/ssr/feedback/InstallGuide.js.map +1 -1
- package/dist/ssr/feedback/install-messages.js +104 -0
- package/dist/ssr/feedback/install-messages.js.map +1 -0
- package/dist/ssr/feedback/prompt-messages.js +65 -0
- package/dist/ssr/feedback/prompt-messages.js.map +1 -0
- package/dist/ssr/feedback/prompts.js +14 -11
- package/dist/ssr/feedback/prompts.js.map +1 -1
- package/dist/ssr/feedback/toast-messages.js +18 -0
- package/dist/ssr/feedback/toast-messages.js.map +1 -0
- package/dist/ssr/feedback/toast.js +4 -3
- package/dist/ssr/feedback/toast.js.map +1 -1
- package/dist/ssr/index.js +1 -1
- package/dist/ssr/index.js.map +1 -1
- package/dist/ssr/inputs/AutocompleteEditor.js +5 -3
- package/dist/ssr/inputs/AutocompleteEditor.js.map +1 -1
- package/dist/ssr/inputs/AutocompleteSelect.js +10 -8
- package/dist/ssr/inputs/AutocompleteSelect.js.map +1 -1
- package/dist/ssr/inputs/ChoiceGroups.js +4 -0
- package/dist/ssr/inputs/ChoiceGroups.js.map +1 -1
- package/dist/ssr/inputs/ChoiceInputs.js +5 -5
- package/dist/ssr/inputs/ChoiceInputs.js.map +1 -1
- package/dist/ssr/inputs/Combobox.js +3 -1
- package/dist/ssr/inputs/Combobox.js.map +1 -1
- package/dist/ssr/inputs/DatePicker.js +34 -4
- package/dist/ssr/inputs/DatePicker.js.map +1 -1
- package/dist/ssr/inputs/FileDropTarget.js +6 -6
- package/dist/ssr/inputs/FileDropTarget.js.map +1 -1
- package/dist/ssr/inputs/FileInputs.js +29 -20
- package/dist/ssr/inputs/FileInputs.js.map +1 -1
- package/dist/ssr/inputs/MultiSelectInput.js +7 -5
- package/dist/ssr/inputs/MultiSelectInput.js.map +1 -1
- package/dist/ssr/inputs/NumberInput.js +4 -2
- package/dist/ssr/inputs/NumberInput.js.map +1 -1
- package/dist/ssr/inputs/QrScanner.js +4 -4
- package/dist/ssr/inputs/QrScanner.js.map +1 -1
- package/dist/ssr/inputs/Select.js +7 -5
- package/dist/ssr/inputs/Select.js.map +1 -1
- package/dist/ssr/inputs/SelectChip.js +3 -3
- package/dist/ssr/inputs/SelectChip.js.map +1 -1
- package/dist/ssr/inputs/SignatureInput.js +9 -3
- package/dist/ssr/inputs/SignatureInput.js.map +1 -1
- package/dist/ssr/inputs/SpecialInputs.js +4 -2
- package/dist/ssr/inputs/SpecialInputs.js.map +1 -1
- package/dist/ssr/inputs/TagEditor.js +8 -6
- package/dist/ssr/inputs/TagEditor.js.map +1 -1
- package/dist/ssr/inputs/TagsInput.js +5 -5
- package/dist/ssr/inputs/TagsInput.js.map +1 -1
- package/dist/ssr/inputs/TemplateEditor.js +5 -5
- package/dist/ssr/inputs/TemplateEditor.js.map +1 -1
- package/dist/ssr/inputs/TextInput.js +3 -1
- package/dist/ssr/inputs/TextInput.js.map +1 -1
- package/dist/ssr/inputs/completion-messages.js +24 -0
- package/dist/ssr/inputs/completion-messages.js.map +1 -0
- package/dist/ssr/inputs/date-picker.js +24 -0
- package/dist/ssr/inputs/date-picker.js.map +1 -1
- package/dist/ssr/inputs/file-drop-messages.js +63 -0
- package/dist/ssr/inputs/file-drop-messages.js.map +1 -0
- package/dist/ssr/inputs/file-drop.js.map +1 -1
- package/dist/ssr/inputs/file-input-messages.js +60 -0
- package/dist/ssr/inputs/file-input-messages.js.map +1 -0
- package/dist/ssr/inputs/icon-messages.js +22 -0
- package/dist/ssr/inputs/icon-messages.js.map +1 -0
- package/dist/ssr/inputs/input-messages.js +38 -0
- package/dist/ssr/inputs/input-messages.js.map +1 -0
- package/dist/ssr/inputs/markdown/MarkdownEditor.js +9 -5
- package/dist/ssr/inputs/markdown/MarkdownEditor.js.map +1 -1
- package/dist/ssr/inputs/markdown/Toolbar.js +13 -13
- package/dist/ssr/inputs/markdown/Toolbar.js.map +1 -1
- package/dist/ssr/inputs/markdown/editor-messages.js +43 -0
- package/dist/ssr/inputs/markdown/editor-messages.js.map +1 -0
- package/dist/ssr/inputs/markdown/toolbar-messages.js +40 -0
- package/dist/ssr/inputs/markdown/toolbar-messages.js.map +1 -0
- package/dist/ssr/inputs/qr-messages.js +26 -0
- package/dist/ssr/inputs/qr-messages.js.map +1 -0
- package/dist/ssr/inputs/select-messages.js +63 -0
- package/dist/ssr/inputs/select-messages.js.map +1 -0
- package/dist/ssr/inputs/tag-messages.js +44 -0
- package/dist/ssr/inputs/tag-messages.js.map +1 -0
- package/dist/ssr/inputs/template-messages.js +22 -0
- package/dist/ssr/inputs/template-messages.js.map +1 -0
- package/dist/ssr/internal/render-error-messages.js +20 -0
- package/dist/ssr/internal/render-error-messages.js.map +1 -0
- package/dist/ssr/internal/render-error.js +3 -1
- package/dist/ssr/internal/render-error.js.map +1 -1
- package/dist/ssr/internal/text-selection.js +101 -0
- package/dist/ssr/internal/text-selection.js.map +1 -0
- package/dist/ssr/intl/messages.js +12 -1155
- package/dist/ssr/intl/messages.js.map +1 -1
- package/dist/ssr/layout/AppWorkspace.js +203 -96
- package/dist/ssr/layout/AppWorkspace.js.map +1 -1
- package/dist/ssr/layout/BottomSheet.js +1 -0
- package/dist/ssr/layout/BottomSheet.js.map +1 -1
- package/dist/ssr/layout/Discussion.js +8 -5
- package/dist/ssr/layout/Discussion.js.map +1 -1
- package/dist/ssr/layout/FloatingWindow.js +8 -5
- package/dist/ssr/layout/FloatingWindow.js.map +1 -1
- package/dist/ssr/layout/Navigation.js +6 -5
- package/dist/ssr/layout/Navigation.js.map +1 -1
- package/dist/ssr/layout/PageTitle.js +253 -0
- package/dist/ssr/layout/PageTitle.js.map +1 -0
- package/dist/ssr/layout/PanelDialog.js +8 -6
- package/dist/ssr/layout/PanelDialog.js.map +1 -1
- package/dist/ssr/layout/Panes.js +22 -14
- package/dist/ssr/layout/Panes.js.map +1 -1
- package/dist/ssr/layout/PullToRefresh.js +13 -4
- package/dist/ssr/layout/PullToRefresh.js.map +1 -1
- package/dist/ssr/layout/Settings.js +14 -12
- package/dist/ssr/layout/Settings.js.map +1 -1
- package/dist/ssr/layout/SettingsCollection.js +6 -5
- package/dist/ssr/layout/SettingsCollection.js.map +1 -1
- package/dist/ssr/layout/SettingsModal.js +3 -1
- package/dist/ssr/layout/SettingsModal.js.map +1 -1
- package/dist/ssr/layout/app-workspace-controller.js +743 -12
- package/dist/ssr/layout/app-workspace-controller.js.map +1 -1
- package/dist/ssr/layout/app-workspace-state.js +3 -2
- package/dist/ssr/layout/app-workspace-state.js.map +1 -1
- package/dist/ssr/layout/floating-window-messages.js +28 -0
- package/dist/ssr/layout/floating-window-messages.js.map +1 -0
- package/dist/ssr/layout/index.js +2 -0
- package/dist/ssr/layout/index.js.map +1 -1
- package/dist/ssr/layout/navigation-model.js.map +1 -1
- package/dist/ssr/layout/page-title-controller.js +169 -0
- package/dist/ssr/layout/page-title-controller.js.map +1 -0
- package/dist/ssr/layout/panel-dialog-messages.js +20 -0
- package/dist/ssr/layout/panel-dialog-messages.js.map +1 -0
- package/dist/ssr/layout/panes-messages.js +48 -0
- package/dist/ssr/layout/panes-messages.js.map +1 -0
- package/dist/ssr/layout/refresh-messages.js +20 -0
- package/dist/ssr/layout/refresh-messages.js.map +1 -0
- package/dist/ssr/layout/settings-messages.js +54 -0
- package/dist/ssr/layout/settings-messages.js.map +1 -0
- package/dist/ssr/layout/workspace-messages.js +56 -0
- package/dist/ssr/layout/workspace-messages.js.map +1 -0
- package/dist/ssr/surfaces/Avatar.js +5 -5
- package/dist/ssr/surfaces/Avatar.js.map +1 -1
- package/dist/ssr/surfaces/ResourceCard.js +4 -2
- package/dist/ssr/surfaces/ResourceCard.js.map +1 -1
- package/dist/ssr/surfaces/Tag.js +3 -3
- package/dist/ssr/surfaces/Tag.js.map +1 -1
- package/dist/ssr/surfaces/avatar-messages.js +26 -0
- package/dist/ssr/surfaces/avatar-messages.js.map +1 -0
- package/dist/ssr/surfaces/resource-messages.js +26 -0
- package/dist/ssr/surfaces/resource-messages.js.map +1 -0
- package/dist/ssr/widgets/Widget.js +6 -0
- package/dist/ssr/widgets/Widget.js.map +1 -1
- package/dist/styles.css +1 -1
- package/dist/types/actions/GestureMenu.d.ts +2 -0
- package/dist/types/actions/filter-messages.d.ts +8 -0
- package/dist/types/actions/spotlight-messages.d.ts +8 -0
- package/dist/types/chat/chat-messages.d.ts +116 -0
- package/dist/types/content/Calendar.d.ts +32 -0
- package/dist/types/content/DataTable.d.ts +2 -0
- package/dist/types/content/FileView.d.ts +0 -10
- package/dist/types/content/calendar-messages.d.ts +60 -0
- package/dist/types/content/calendar-month-layout.d.ts +52 -0
- package/dist/types/content/chart-messages.d.ts +32 -0
- package/dist/types/content/data-table-messages.d.ts +10 -0
- package/dist/types/content/docs-messages.d.ts +10 -0
- package/dist/types/content/feed-messages.d.ts +15 -0
- package/dist/types/content/file-browser-messages.d.ts +33 -0
- package/dist/types/content/file-view-messages.d.ts +30 -0
- package/dist/types/content/index.d.ts +1 -1
- package/dist/types/content/lightbox-messages.d.ts +16 -0
- package/dist/types/content/log-entries-messages.d.ts +8 -0
- package/dist/types/content/markdown-info-block-messages.d.ts +12 -0
- package/dist/types/content/markdown-reference-messages.d.ts +15 -0
- package/dist/types/content/pagination-messages.d.ts +17 -0
- package/dist/types/content/pdf-messages.d.ts +20 -0
- package/dist/types/content/range-picker-messages.d.ts +8 -0
- package/dist/types/content/structured-data-messages.d.ts +9 -0
- package/dist/types/content/timeline-messages.d.ts +29 -0
- package/dist/types/content/video-messages.d.ts +10 -0
- package/dist/types/content/viewport-messages.d.ts +12 -0
- package/dist/types/feedback/install-messages.d.ts +50 -0
- package/dist/types/feedback/prompt-messages.d.ts +31 -0
- package/dist/types/feedback/toast-messages.d.ts +9 -0
- package/dist/types/index.d.ts +1 -0
- package/dist/types/inputs/completion-messages.d.ts +10 -0
- package/dist/types/inputs/date-picker.d.ts +7 -0
- package/dist/types/inputs/file-drop-messages.d.ts +30 -0
- package/dist/types/inputs/file-drop.d.ts +3 -3
- package/dist/types/inputs/file-input-messages.d.ts +28 -0
- package/dist/types/inputs/icon-messages.d.ts +9 -0
- package/dist/types/inputs/input-messages.d.ts +17 -0
- package/dist/types/inputs/markdown/editor-messages.d.ts +20 -0
- package/dist/types/inputs/markdown/toolbar-messages.d.ts +18 -0
- package/dist/types/inputs/qr-messages.d.ts +11 -0
- package/dist/types/inputs/select-messages.d.ts +30 -0
- package/dist/types/inputs/tag-messages.d.ts +20 -0
- package/dist/types/inputs/template-messages.d.ts +9 -0
- package/dist/types/internal/render-error-messages.d.ts +8 -0
- package/dist/types/internal/text-selection.d.ts +18 -0
- package/dist/types/intl/messages.d.ts +6 -544
- package/dist/types/layout/AppWorkspace.d.ts +19 -4
- package/dist/types/layout/PageTitle.d.ts +64 -0
- package/dist/types/layout/app-workspace-controller.d.ts +4 -0
- package/dist/types/layout/app-workspace-state.d.ts +3 -2
- package/dist/types/layout/floating-window-messages.d.ts +12 -0
- package/dist/types/layout/index.d.ts +3 -0
- package/dist/types/layout/navigation-model.d.ts +7 -0
- package/dist/types/layout/page-title-controller.d.ts +13 -0
- package/dist/types/layout/panel-dialog-messages.d.ts +8 -0
- package/dist/types/layout/panes-messages.d.ts +22 -0
- package/dist/types/layout/refresh-messages.d.ts +8 -0
- package/dist/types/layout/settings-messages.d.ts +25 -0
- package/dist/types/layout/workspace-messages.d.ts +26 -0
- package/dist/types/surfaces/avatar-messages.d.ts +11 -0
- package/dist/types/surfaces/resource-messages.d.ts +11 -0
- package/dist/types/widgets/Widget.d.ts +5 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["inputs/AutocompleteSelect.tsx"],"sourcesContent":["import { createEffect, createMemo, createSignal, For, type JSX, Show } from \"solid-js\";\nimport { createFieldMeta, Field, fieldControlAria } from \"../internal/field\";\nimport { useUiMessages } from \"../intl/messages\";\nimport { ChoiceGroups } from \"./ChoiceGroups\";\nimport { type ChoiceOption, createChoiceLoader, createChoicePopover, nextEnabledChoiceIndex } from \"./choice\";\nimport type { ValueFieldProps } from \"./field-contract\";\nimport { commitFieldValue, resolveMaybeAccessor } from \"./field-contract\";\nimport type { SelectGroup } from \"./Select\";\n\nexport type AutocompleteSelectOption = ChoiceOption<string>;\n\nexport type AutocompleteSelectSearchResult = {\n /** Ranked suggestions shown in the popup. */\n options: readonly AutocompleteSelectOption[];\n /** The authoritative option that Tab or blur may accept automatically. */\n match?: AutocompleteSelectOption;\n};\n\nexport type AutocompleteSelectProps = ValueFieldProps<string | null> & {\n search: (query: string, signal: AbortSignal, group: string | null) => Promise<AutocompleteSelectSearchResult>;\n selectedOption?: AutocompleteSelectOption;\n formatValue?: (option: AutocompleteSelectOption) => string;\n groups?: readonly SelectGroup[];\n defaultGroup?: string;\n groupsAriaLabel?: string;\n allGroupLabel?: string;\n placeholder?: string;\n debounceMs?: number;\n clearable?: boolean;\n name?: string;\n autofocus?: boolean;\n noMatchText?: string;\n checkingText?: string;\n noOptionsText?: string;\n};\n\ntype SelectionSnapshot = {\n value: string | null;\n option?: AutocompleteSelectOption;\n display: string;\n};\n\nconst errorMessage = (error: unknown, fallback: string): string => (error instanceof Error ? error.message : fallback);\n\nexport function AutocompleteSelect(props: AutocompleteSelectProps): JSX.Element {\n const messages = useUiMessages();\n const meta = createFieldMeta(props.id);\n const listboxId = `${meta.controlId}-listbox`;\n const [cache, setCache] = createSignal<Record<string, AutocompleteSelectOption>>({});\n const value = () => resolveMaybeAccessor(props.value) ?? null;\n const selected = createMemo<AutocompleteSelectOption | undefined>(() => {\n const current = value();\n if (current === null) return undefined;\n return (\n cache()[current] ??\n (props.selectedOption?.value === current ? props.selectedOption : undefined) ?? {\n value: current,\n label: current,\n }\n );\n });\n const formatValue = (option: AutocompleteSelectOption | undefined): string =>\n option ? (props.formatValue?.(option) ?? option.label) : \"\";\n\n const [display, setDisplay] = createSignal(formatValue(selected()));\n const [query, setQuery] = createSignal(\"\");\n const [focused, setFocused] = createSignal(false);\n const [editing, setEditing] = createSignal(false);\n const [resolvedQuery, setResolvedQuery] = createSignal<string>();\n const [match, setMatch] = createSignal<AutocompleteSelectOption>();\n const [focusedIndex, setFocusedIndex] = createSignal(-1);\n const [selectedGroup, setSelectedGroup] = createSignal<string | null>(props.defaultGroup ?? null);\n const [explicitOption, setExplicitOption] = createSignal(false);\n const [internalError, setInternalError] = createSignal<string>();\n const externalError = () => resolveMaybeAccessor(props.error);\n const error = () => externalError() ?? internalError();\n const hasClearAction = () => Boolean(props.clearable && value() !== null && !props.disabled);\n let inputRef: HTMLInputElement | undefined;\n let popoverRef: HTMLDivElement | undefined;\n let optionRefs: HTMLButtonElement[] = [];\n let pointerFocus = false;\n let pendingCommitQuery: string | undefined;\n let snapshot: SelectionSnapshot = { value: value(), option: selected(), display: formatValue(selected()) };\n\n const popover = createChoicePopover(() => Boolean(props.disabled));\n const activeGroup = createMemo(() => {\n const current = selectedGroup();\n return current && props.groups?.some((group) => group.value === current) ? current : null;\n });\n const groupChoices = createMemo(() => [{ value: null, label: props.allGroupLabel ?? messages().all }, ...(props.groups ?? [])]);\n\n const remember = (options: readonly AutocompleteSelectOption[], authoritative?: AutocompleteSelectOption) => {\n const next = { ...cache() };\n for (const option of options) next[option.value] = option;\n if (authoritative) next[authoritative.value] = authoritative;\n setCache(next);\n };\n\n const completeInput = (typed: string, authoritative: AutocompleteSelectOption | undefined) => {\n if (!inputRef || !focused() || !editing() || !authoritative || typed.length === 0) return;\n const lower = typed.toLocaleLowerCase();\n const completion = [authoritative.value, authoritative.label].find((candidate) => candidate.toLocaleLowerCase().startsWith(lower));\n if (!completion || completion.length <= typed.length) return;\n setDisplay(completion);\n queueMicrotask(() => {\n if (!inputRef || document.activeElement !== inputRef || query() !== typed) return;\n inputRef.setSelectionRange(typed.length, completion.length);\n });\n };\n\n const mergedOptions = (result: AutocompleteSelectSearchResult): readonly AutocompleteSelectOption[] =>\n result.match && !result.options.some((option) => option.value === result.match!.value)\n ? [result.match, ...result.options]\n : result.options;\n\n const commit = (option: AutocompleteSelectOption) => {\n if (option.disabled) return;\n pendingCommitQuery = undefined;\n loader.cancel();\n popover.hide();\n remember([], option);\n setDisplay(formatValue(option));\n setQuery(\"\");\n setResolvedQuery(undefined);\n setMatch(undefined);\n setFocusedIndex(-1);\n setExplicitOption(false);\n setInternalError(undefined);\n snapshot = { value: option.value, option, display: formatValue(option) };\n commitFieldValue(props, option.value);\n setEditing(false);\n };\n\n const invalidate = (message = props.noMatchText ?? messages().noMatchingOption) => {\n pendingCommitQuery = undefined;\n setInternalError(message);\n popover.hide();\n };\n\n const loader = createChoiceLoader(\n () => async (typed, signal) => {\n let result: AutocompleteSelectSearchResult;\n try {\n result = await props.search(typed, signal, activeGroup());\n } catch (reason) {\n if (!signal.aborted) {\n setResolvedQuery(typed);\n if (pendingCommitQuery === typed) invalidate(errorMessage(reason, messages().optionsCouldNotLoad));\n }\n throw reason;\n }\n if (signal.aborted) return [];\n\n const options = mergedOptions(result);\n const authoritative = result.match?.disabled ? undefined : result.match;\n remember(options, authoritative);\n setResolvedQuery(typed);\n setMatch(authoritative);\n setExplicitOption(false);\n setFocusedIndex(authoritative ? options.findIndex((option) => option.value === authoritative.value) : -1);\n completeInput(typed, authoritative);\n\n if (pendingCommitQuery === typed) {\n if (authoritative) commit(authoritative);\n else invalidate();\n }\n return options;\n },\n () => props.debounceMs ?? 150,\n );\n\n const options = () => (resolvedQuery() === query() ? loader.options() : []);\n const loadError = () => (resolvedQuery() === query() ? loader.error() : undefined);\n const focusedOption = () => options()[focusedIndex()];\n const focusOption = (index: number, explicit = true) => {\n setFocusedIndex(index);\n setExplicitOption(explicit);\n optionRefs[index]?.scrollIntoView({ block: \"nearest\" });\n };\n const move = (direction: 1 | -1) => focusOption(nextEnabledChoiceIndex(options(), focusedIndex(), direction));\n\n const startSearch = (typed: string, immediate = false) => {\n setInternalError(undefined);\n setResolvedQuery(undefined);\n setMatch(undefined);\n setFocusedIndex(-1);\n setExplicitOption(false);\n popover.show();\n loader.load(typed, immediate);\n };\n\n const chooseGroup = (group: string | null) => {\n if (group === activeGroup()) return;\n setSelectedGroup(group);\n startSearch(editing() ? query() : \"\", true);\n };\n\n const selectedForCommit = (): AutocompleteSelectOption | undefined => {\n if (resolvedQuery() !== query()) return undefined;\n if (explicitOption()) return focusedOption();\n return match();\n };\n\n const requestCommit = () => {\n if (!editing()) return;\n const option = selectedForCommit();\n if (option) {\n commit(option);\n return;\n }\n if (query() === \"\" && props.clearable && !props.required) {\n pendingCommitQuery = undefined;\n loader.cancel();\n popover.hide();\n snapshot = { value: null, option: undefined, display: \"\" };\n setDisplay(\"\");\n setQuery(\"\");\n setEditing(false);\n setResolvedQuery(undefined);\n setMatch(undefined);\n setFocusedIndex(-1);\n setExplicitOption(false);\n setInternalError(undefined);\n commitFieldValue(props, null);\n return;\n }\n if (pendingCommitQuery === query()) return;\n pendingCommitQuery = query();\n if (resolvedQuery() === query() && !loader.loading()) invalidate();\n else loader.load(query(), true);\n };\n\n const restore = () => {\n const target = snapshot;\n pendingCommitQuery = undefined;\n loader.cancel();\n popover.hide();\n remember(target.option ? [target.option] : []);\n setDisplay(target.display);\n setQuery(\"\");\n setResolvedQuery(undefined);\n setMatch(undefined);\n setFocusedIndex(-1);\n setExplicitOption(false);\n setInternalError(undefined);\n if (value() !== target.value) props.onValueChange?.(target.value);\n setEditing(false);\n queueMicrotask(() => inputRef?.select());\n };\n\n createEffect(() => {\n if (editing()) return;\n const option = selected();\n setDisplay(formatValue(option));\n snapshot = { value: value(), option, display: formatValue(option) };\n });\n\n createEffect(() => {\n if (!inputRef) return;\n const message = internalError();\n inputRef.setCustomValidity(message ?? (editing() ? messages().selectMatchingOption : \"\"));\n });\n\n const onKeyDown = (event: KeyboardEvent) => {\n if (event.isComposing) return;\n if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n event.preventDefault();\n if (!popover.open()) {\n const typed = editing() ? query() : \"\";\n startSearch(typed, true);\n } else {\n move(event.key === \"ArrowDown\" ? 1 : -1);\n }\n } else if (event.key === \"Enter\" && popover.open()) {\n const option = selectedForCommit();\n if (!option) return;\n event.preventDefault();\n commit(option);\n inputRef?.select();\n } else if (event.key === \"Escape\" && (editing() || popover.open())) {\n event.preventDefault();\n if (editing()) restore();\n else popover.hide();\n } else if (event.key === \"Tab\") {\n requestCommit();\n popover.hide();\n }\n };\n\n return (\n <Field\n class={props.class}\n label={props.label}\n description={props.description}\n error={error()}\n meta={meta}\n required={props.required}\n disabled={props.disabled}\n >\n <div class=\"k2b-combobox\" data-invalid={error() ? \"true\" : undefined}>\n <div ref={popover.setTrigger} class=\"k2b-combobox__input\" data-clearable={hasClearAction() ? \"true\" : undefined}>\n <i class=\"ti ti-search\" aria-hidden=\"true\" />\n <input\n ref={(element) => {\n inputRef = element;\n }}\n id={meta.controlId}\n type=\"text\"\n value={display()}\n placeholder={props.placeholder ?? messages().typeToSearch}\n disabled={props.disabled}\n required={props.required}\n autofocus={props.autofocus}\n autocomplete=\"off\"\n spellcheck={false}\n role=\"combobox\"\n aria-autocomplete=\"both\"\n aria-expanded={popover.open()}\n aria-controls={listboxId}\n aria-activedescendant={focusedOption() ? `${listboxId}-${focusedIndex()}` : undefined}\n {...fieldControlAria(meta, { ...props, error: error() })}\n onPointerDown={() => {\n pointerFocus = true;\n queueMicrotask(() => (pointerFocus = false));\n }}\n onFocus={() => {\n setFocused(true);\n if (!editing()) {\n const option = selected();\n snapshot = { value: value(), option, display: formatValue(option) };\n setDisplay(snapshot.display);\n }\n if (!pointerFocus) queueMicrotask(() => inputRef?.select());\n }}\n onClick={() => {\n if (!editing()) startSearch(\"\", true);\n }}\n onInput={(event) => {\n const typed = event.currentTarget.value;\n const beginsEdit = !editing();\n setEditing(true);\n if (beginsEdit && value() !== null) props.onValueChange?.(null);\n setDisplay(typed);\n setQuery(typed);\n pendingCommitQuery = undefined;\n startSearch(typed);\n }}\n onKeyDown={onKeyDown}\n onBlur={(event) => {\n setFocused(false);\n if (event.relatedTarget instanceof Node && popoverRef?.contains(event.relatedTarget)) return;\n requestCommit();\n popover.hide();\n }}\n />\n <Show when={hasClearAction()}>\n <button\n type=\"button\"\n class=\"k2b-choice-control__clear k2b-input-clear-action\"\n tabindex={-1}\n aria-label={messages().clearSelection}\n onPointerDown={(event) => event.preventDefault()}\n onClick={() => {\n snapshot = { value: null, option: undefined, display: \"\" };\n setDisplay(\"\");\n setQuery(\"\");\n setEditing(false);\n setResolvedQuery(undefined);\n setMatch(undefined);\n setFocusedIndex(-1);\n setExplicitOption(false);\n setInternalError(undefined);\n commitFieldValue(props, null);\n inputRef?.focus();\n }}\n >\n <i class=\"ti ti-x\" aria-hidden=\"true\" />\n </button>\n </Show>\n <Show\n when={loader.loading()}\n fallback={\n <Show when={editing() && match()} fallback={<i class=\"ti ti-chevron-down\" aria-hidden=\"true\" />}>\n <i class=\"ti ti-check\" aria-hidden=\"true\" />\n </Show>\n }\n >\n <i class=\"ti ti-loader-2 k2b-spin\" aria-hidden=\"true\" />\n </Show>\n </div>\n <Show when={props.name}>{(name) => <input type=\"hidden\" name={name()} value={value() ?? \"\"} />}</Show>\n <span class=\"k2b-sr-only\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n {loader.loading()\n ? (props.checkingText ?? messages().checkingOptions)\n : match()\n ? `Match: ${formatValue(match())}`\n : (internalError() ?? \"\")}\n </span>\n <div\n ref={(element) => {\n popoverRef = element;\n popover.setPopover(element);\n }}\n popover=\"manual\"\n class=\"k2b-choice-popover\"\n role=\"group\"\n aria-label={typeof props.label === \"string\" ? props.label : (props[\"aria-label\"] ?? messages().options)}\n onFocusOut={(event) => {\n if (event.relatedTarget instanceof Node && (popoverRef?.contains(event.relatedTarget) || inputRef === event.relatedTarget))\n return;\n requestCommit();\n popover.hide();\n }}\n onKeyDown={(event) => {\n if (event.key !== \"Escape\") return;\n event.preventDefault();\n if (editing()) restore();\n else {\n popover.hide();\n inputRef?.focus();\n }\n }}\n >\n <Show when={(props.groups?.length ?? 0) > 0}>\n <div class=\"k2b-choice-toolbar\">\n <ChoiceGroups\n choices={groupChoices()}\n value={activeGroup()}\n onValueChange={chooseGroup}\n ariaLabel={props.groupsAriaLabel ?? messages().filterOptions}\n controls={listboxId}\n />\n </div>\n </Show>\n <div id={listboxId} class=\"k2b-choice-options\" role=\"listbox\">\n <Show when={loadError()}>\n {(message) => (\n <div class=\"k2b-choice-status\" data-tone=\"danger\">\n <span>{message()}</span>\n <button\n type=\"button\"\n onPointerDown={(event) => event.preventDefault()}\n onClick={() => {\n setInternalError(undefined);\n loader.retry();\n }}\n >\n Retry\n </button>\n </div>\n )}\n </Show>\n <Show when={loader.loading() && options().length === 0}>\n <div class=\"k2b-choice-status\">\n <i class=\"ti ti-loader-2 k2b-spin\" aria-hidden=\"true\" />\n <span>{props.checkingText ?? messages().checkingOptionsLoading}</span>\n </div>\n </Show>\n <For\n each={loadError() ? [] : options()}\n fallback={\n <Show when={!loader.loading() && !loadError()}>\n <div class=\"k2b-choice-status\">{props.noOptionsText ?? messages().noOptionsFound}</div>\n </Show>\n }\n >\n {(option, index) => (\n <button\n ref={(element) => (optionRefs[index()] = element)}\n type=\"button\"\n id={`${listboxId}-${index()}`}\n class=\"k2b-choice-option\"\n role=\"option\"\n aria-label={option.label}\n aria-selected={index() === focusedIndex()}\n data-focused={index() === focusedIndex() ? \"true\" : undefined}\n disabled={option.disabled}\n onPointerMove={() => focusOption(index())}\n onPointerDown={(event) => event.preventDefault()}\n onClick={() => {\n commit(option);\n inputRef?.focus();\n inputRef?.select();\n }}\n >\n <Show when={option.color} fallback={<Show when={option.icon}>{(icon) => <i class={icon()} aria-hidden=\"true\" />}</Show>}>\n {(color) => <span class=\"k2b-choice-dot\" style={{ \"background-color\": color() }} aria-hidden=\"true\" />}\n </Show>\n <span>\n <strong>{option.label}</strong>\n <Show when={option.description}>{(description) => <small>{description()}</small>}</Show>\n </span>\n </button>\n )}\n </For>\n </div>\n </div>\n </div>\n </Field>\n );\n}\n\nexport default AutocompleteSelect;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":[],"sources":["inputs/AutocompleteSelect.tsx"],"sourcesContent":["import { createEffect, createMemo, createSignal, For, type JSX, Show } from \"solid-js\";\nimport { createFieldMeta, Field, fieldControlAria } from \"../internal/field\";\nimport { useUiMessages } from \"../intl/messages\";\nimport { ChoiceGroups } from \"./ChoiceGroups\";\nimport { type ChoiceOption, createChoiceLoader, createChoicePopover, nextEnabledChoiceIndex } from \"./choice\";\nimport type { ValueFieldProps } from \"./field-contract\";\nimport { commitFieldValue, resolveMaybeAccessor } from \"./field-contract\";\nimport type { SelectGroup } from \"./Select\";\nimport { useSelectMessages } from \"./select-messages\";\n\nexport type AutocompleteSelectOption = ChoiceOption<string>;\n\nexport type AutocompleteSelectSearchResult = {\n /** Ranked suggestions shown in the popup. */\n options: readonly AutocompleteSelectOption[];\n /** The authoritative option that Tab or blur may accept automatically. */\n match?: AutocompleteSelectOption;\n};\n\nexport type AutocompleteSelectProps = ValueFieldProps<string | null> & {\n search: (query: string, signal: AbortSignal, group: string | null) => Promise<AutocompleteSelectSearchResult>;\n selectedOption?: AutocompleteSelectOption;\n formatValue?: (option: AutocompleteSelectOption) => string;\n groups?: readonly SelectGroup[];\n defaultGroup?: string;\n groupsAriaLabel?: string;\n allGroupLabel?: string;\n placeholder?: string;\n debounceMs?: number;\n clearable?: boolean;\n name?: string;\n autofocus?: boolean;\n noMatchText?: string;\n checkingText?: string;\n noOptionsText?: string;\n};\n\ntype SelectionSnapshot = {\n value: string | null;\n option?: AutocompleteSelectOption;\n display: string;\n};\n\nconst errorMessage = (error: unknown, fallback: string): string => (error instanceof Error ? error.message : fallback);\n\nexport function AutocompleteSelect(props: AutocompleteSelectProps): JSX.Element {\n const messages = useUiMessages();\n const selectMessages = useSelectMessages();\n const meta = createFieldMeta(props.id);\n const listboxId = `${meta.controlId}-listbox`;\n const [cache, setCache] = createSignal<Record<string, AutocompleteSelectOption>>({});\n const value = () => resolveMaybeAccessor(props.value) ?? null;\n const selected = createMemo<AutocompleteSelectOption | undefined>(() => {\n const current = value();\n if (current === null) return undefined;\n return (\n cache()[current] ??\n (props.selectedOption?.value === current ? props.selectedOption : undefined) ?? {\n value: current,\n label: current,\n }\n );\n });\n const formatValue = (option: AutocompleteSelectOption | undefined): string =>\n option ? (props.formatValue?.(option) ?? option.label) : \"\";\n\n const [display, setDisplay] = createSignal(formatValue(selected()));\n const [query, setQuery] = createSignal(\"\");\n const [focused, setFocused] = createSignal(false);\n const [editing, setEditing] = createSignal(false);\n const [resolvedQuery, setResolvedQuery] = createSignal<string>();\n const [match, setMatch] = createSignal<AutocompleteSelectOption>();\n const [focusedIndex, setFocusedIndex] = createSignal(-1);\n const [selectedGroup, setSelectedGroup] = createSignal<string | null>(props.defaultGroup ?? null);\n const [explicitOption, setExplicitOption] = createSignal(false);\n const [internalError, setInternalError] = createSignal<string>();\n const externalError = () => resolveMaybeAccessor(props.error);\n const error = () => externalError() ?? internalError();\n const hasClearAction = () => Boolean(props.clearable && value() !== null && !props.disabled);\n let inputRef: HTMLInputElement | undefined;\n let popoverRef: HTMLDivElement | undefined;\n let optionRefs: HTMLButtonElement[] = [];\n let pointerFocus = false;\n let pendingCommitQuery: string | undefined;\n let snapshot: SelectionSnapshot = { value: value(), option: selected(), display: formatValue(selected()) };\n\n const popover = createChoicePopover(() => Boolean(props.disabled));\n const activeGroup = createMemo(() => {\n const current = selectedGroup();\n return current && props.groups?.some((group) => group.value === current) ? current : null;\n });\n const groupChoices = createMemo(() => [{ value: null, label: props.allGroupLabel ?? messages().all }, ...(props.groups ?? [])]);\n\n const remember = (options: readonly AutocompleteSelectOption[], authoritative?: AutocompleteSelectOption) => {\n const next = { ...cache() };\n for (const option of options) next[option.value] = option;\n if (authoritative) next[authoritative.value] = authoritative;\n setCache(next);\n };\n\n const completeInput = (typed: string, authoritative: AutocompleteSelectOption | undefined) => {\n if (!inputRef || !focused() || !editing() || !authoritative || typed.length === 0) return;\n const lower = typed.toLocaleLowerCase();\n const completion = [authoritative.value, authoritative.label].find((candidate) => candidate.toLocaleLowerCase().startsWith(lower));\n if (!completion || completion.length <= typed.length) return;\n setDisplay(completion);\n queueMicrotask(() => {\n if (!inputRef || document.activeElement !== inputRef || query() !== typed) return;\n inputRef.setSelectionRange(typed.length, completion.length);\n });\n };\n\n const mergedOptions = (result: AutocompleteSelectSearchResult): readonly AutocompleteSelectOption[] =>\n result.match && !result.options.some((option) => option.value === result.match!.value)\n ? [result.match, ...result.options]\n : result.options;\n\n const commit = (option: AutocompleteSelectOption) => {\n if (option.disabled) return;\n pendingCommitQuery = undefined;\n loader.cancel();\n popover.hide();\n remember([], option);\n setDisplay(formatValue(option));\n setQuery(\"\");\n setResolvedQuery(undefined);\n setMatch(undefined);\n setFocusedIndex(-1);\n setExplicitOption(false);\n setInternalError(undefined);\n snapshot = { value: option.value, option, display: formatValue(option) };\n commitFieldValue(props, option.value);\n setEditing(false);\n };\n\n const invalidate = (message = props.noMatchText ?? selectMessages().noMatchingOption) => {\n pendingCommitQuery = undefined;\n setInternalError(message);\n popover.hide();\n };\n\n const loader = createChoiceLoader(\n () => async (typed, signal) => {\n let result: AutocompleteSelectSearchResult;\n try {\n result = await props.search(typed, signal, activeGroup());\n } catch (reason) {\n if (!signal.aborted) {\n setResolvedQuery(typed);\n if (pendingCommitQuery === typed) invalidate(errorMessage(reason, selectMessages().optionsCouldNotLoad));\n }\n throw reason;\n }\n if (signal.aborted) return [];\n\n const options = mergedOptions(result);\n const authoritative = result.match?.disabled ? undefined : result.match;\n remember(options, authoritative);\n setResolvedQuery(typed);\n setMatch(authoritative);\n setExplicitOption(false);\n setFocusedIndex(authoritative ? options.findIndex((option) => option.value === authoritative.value) : -1);\n completeInput(typed, authoritative);\n\n if (pendingCommitQuery === typed) {\n if (authoritative) commit(authoritative);\n else invalidate();\n }\n return options;\n },\n () => props.debounceMs ?? 150,\n );\n\n const options = () => (resolvedQuery() === query() ? loader.options() : []);\n const loadError = () => (resolvedQuery() === query() ? loader.error() : undefined);\n const focusedOption = () => options()[focusedIndex()];\n const focusOption = (index: number, explicit = true) => {\n setFocusedIndex(index);\n setExplicitOption(explicit);\n optionRefs[index]?.scrollIntoView({ block: \"nearest\" });\n };\n const move = (direction: 1 | -1) => focusOption(nextEnabledChoiceIndex(options(), focusedIndex(), direction));\n\n const startSearch = (typed: string, immediate = false) => {\n setInternalError(undefined);\n setResolvedQuery(undefined);\n setMatch(undefined);\n setFocusedIndex(-1);\n setExplicitOption(false);\n popover.show();\n loader.load(typed, immediate);\n };\n\n const chooseGroup = (group: string | null) => {\n if (group === activeGroup()) return;\n setSelectedGroup(group);\n startSearch(editing() ? query() : \"\", true);\n };\n\n const selectedForCommit = (): AutocompleteSelectOption | undefined => {\n if (resolvedQuery() !== query()) return undefined;\n if (explicitOption()) return focusedOption();\n return match();\n };\n\n const requestCommit = () => {\n if (!editing()) return;\n const option = selectedForCommit();\n if (option) {\n commit(option);\n return;\n }\n if (query() === \"\" && props.clearable && !props.required) {\n pendingCommitQuery = undefined;\n loader.cancel();\n popover.hide();\n snapshot = { value: null, option: undefined, display: \"\" };\n setDisplay(\"\");\n setQuery(\"\");\n setEditing(false);\n setResolvedQuery(undefined);\n setMatch(undefined);\n setFocusedIndex(-1);\n setExplicitOption(false);\n setInternalError(undefined);\n commitFieldValue(props, null);\n return;\n }\n if (pendingCommitQuery === query()) return;\n pendingCommitQuery = query();\n if (resolvedQuery() === query() && !loader.loading()) invalidate();\n else loader.load(query(), true);\n };\n\n const restore = () => {\n const target = snapshot;\n pendingCommitQuery = undefined;\n loader.cancel();\n popover.hide();\n remember(target.option ? [target.option] : []);\n setDisplay(target.display);\n setQuery(\"\");\n setResolvedQuery(undefined);\n setMatch(undefined);\n setFocusedIndex(-1);\n setExplicitOption(false);\n setInternalError(undefined);\n if (value() !== target.value) props.onValueChange?.(target.value);\n setEditing(false);\n queueMicrotask(() => inputRef?.select());\n };\n\n createEffect(() => {\n if (editing()) return;\n const option = selected();\n setDisplay(formatValue(option));\n snapshot = { value: value(), option, display: formatValue(option) };\n });\n\n createEffect(() => {\n if (!inputRef) return;\n const message = internalError();\n inputRef.setCustomValidity(message ?? (editing() ? selectMessages().selectMatchingOption : \"\"));\n });\n\n const onKeyDown = (event: KeyboardEvent) => {\n if (event.isComposing) return;\n if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n event.preventDefault();\n if (!popover.open()) {\n const typed = editing() ? query() : \"\";\n startSearch(typed, true);\n } else {\n move(event.key === \"ArrowDown\" ? 1 : -1);\n }\n } else if (event.key === \"Enter\" && popover.open()) {\n const option = selectedForCommit();\n if (!option) return;\n event.preventDefault();\n commit(option);\n inputRef?.select();\n } else if (event.key === \"Escape\" && (editing() || popover.open())) {\n event.preventDefault();\n if (editing()) restore();\n else popover.hide();\n } else if (event.key === \"Tab\") {\n requestCommit();\n popover.hide();\n }\n };\n\n return (\n <Field\n class={props.class}\n label={props.label}\n description={props.description}\n error={error()}\n meta={meta}\n required={props.required}\n disabled={props.disabled}\n >\n <div class=\"k2b-combobox\" data-invalid={error() ? \"true\" : undefined}>\n <div ref={popover.setTrigger} class=\"k2b-combobox__input\" data-clearable={hasClearAction() ? \"true\" : undefined}>\n <i class=\"ti ti-search\" aria-hidden=\"true\" />\n <input\n ref={(element) => {\n inputRef = element;\n }}\n id={meta.controlId}\n type=\"text\"\n value={display()}\n placeholder={props.placeholder ?? selectMessages().typeToSearch}\n disabled={props.disabled}\n required={props.required}\n autofocus={props.autofocus}\n autocomplete=\"off\"\n spellcheck={false}\n role=\"combobox\"\n aria-autocomplete=\"both\"\n aria-expanded={popover.open()}\n aria-controls={listboxId}\n aria-activedescendant={focusedOption() ? `${listboxId}-${focusedIndex()}` : undefined}\n {...fieldControlAria(meta, { ...props, error: error() })}\n onPointerDown={() => {\n pointerFocus = true;\n queueMicrotask(() => (pointerFocus = false));\n }}\n onFocus={() => {\n setFocused(true);\n if (!editing()) {\n const option = selected();\n snapshot = { value: value(), option, display: formatValue(option) };\n setDisplay(snapshot.display);\n }\n if (!pointerFocus) queueMicrotask(() => inputRef?.select());\n }}\n onClick={() => {\n if (!editing()) startSearch(\"\", true);\n }}\n onInput={(event) => {\n const typed = event.currentTarget.value;\n const beginsEdit = !editing();\n setEditing(true);\n if (beginsEdit && value() !== null) props.onValueChange?.(null);\n setDisplay(typed);\n setQuery(typed);\n pendingCommitQuery = undefined;\n startSearch(typed);\n }}\n onKeyDown={onKeyDown}\n onBlur={(event) => {\n setFocused(false);\n if (event.relatedTarget instanceof Node && popoverRef?.contains(event.relatedTarget)) return;\n requestCommit();\n popover.hide();\n }}\n />\n <Show when={hasClearAction()}>\n <button\n type=\"button\"\n class=\"k2b-choice-control__clear k2b-input-clear-action\"\n tabindex={-1}\n aria-label={messages().clearSelection}\n onPointerDown={(event) => event.preventDefault()}\n onClick={() => {\n snapshot = { value: null, option: undefined, display: \"\" };\n setDisplay(\"\");\n setQuery(\"\");\n setEditing(false);\n setResolvedQuery(undefined);\n setMatch(undefined);\n setFocusedIndex(-1);\n setExplicitOption(false);\n setInternalError(undefined);\n commitFieldValue(props, null);\n inputRef?.focus();\n }}\n >\n <i class=\"ti ti-x\" aria-hidden=\"true\" />\n </button>\n </Show>\n <Show\n when={loader.loading()}\n fallback={\n <Show when={editing() && match()} fallback={<i class=\"ti ti-chevron-down\" aria-hidden=\"true\" />}>\n <i class=\"ti ti-check\" aria-hidden=\"true\" />\n </Show>\n }\n >\n <i class=\"ti ti-loader-2 k2b-spin\" aria-hidden=\"true\" />\n </Show>\n </div>\n <Show when={props.name}>{(name) => <input type=\"hidden\" name={name()} value={value() ?? \"\"} />}</Show>\n <span class=\"k2b-sr-only\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n {loader.loading()\n ? (props.checkingText ?? selectMessages().checkingOptions)\n : match()\n ? `Match: ${formatValue(match())}`\n : (internalError() ?? \"\")}\n </span>\n <div\n ref={(element) => {\n popoverRef = element;\n popover.setPopover(element);\n }}\n popover=\"manual\"\n class=\"k2b-choice-popover\"\n role=\"group\"\n aria-label={typeof props.label === \"string\" ? props.label : (props[\"aria-label\"] ?? messages().options)}\n onFocusOut={(event) => {\n if (event.relatedTarget instanceof Node && (popoverRef?.contains(event.relatedTarget) || inputRef === event.relatedTarget))\n return;\n requestCommit();\n popover.hide();\n }}\n onKeyDown={(event) => {\n if (event.key !== \"Escape\") return;\n event.preventDefault();\n if (editing()) restore();\n else {\n popover.hide();\n inputRef?.focus();\n }\n }}\n >\n <Show when={(props.groups?.length ?? 0) > 0}>\n <div class=\"k2b-choice-toolbar\">\n <ChoiceGroups\n choices={groupChoices()}\n value={activeGroup()}\n onValueChange={chooseGroup}\n ariaLabel={props.groupsAriaLabel ?? selectMessages().filterOptions}\n controls={listboxId}\n />\n </div>\n </Show>\n <div id={listboxId} class=\"k2b-choice-options\" role=\"listbox\">\n <Show when={loadError()}>\n {(message) => (\n <div class=\"k2b-choice-status\" data-tone=\"danger\">\n <span>{message()}</span>\n <button\n type=\"button\"\n onPointerDown={(event) => event.preventDefault()}\n onClick={() => {\n setInternalError(undefined);\n loader.retry();\n }}\n >\n Retry\n </button>\n </div>\n )}\n </Show>\n <Show when={loader.loading() && options().length === 0}>\n <div class=\"k2b-choice-status\">\n <i class=\"ti ti-loader-2 k2b-spin\" aria-hidden=\"true\" />\n <span>{props.checkingText ?? selectMessages().checkingOptionsLoading}</span>\n </div>\n </Show>\n <For\n each={loadError() ? [] : options()}\n fallback={\n <Show when={!loader.loading() && !loadError()}>\n <div class=\"k2b-choice-status\">{props.noOptionsText ?? selectMessages().noOptionsFound}</div>\n </Show>\n }\n >\n {(option, index) => (\n <button\n ref={(element) => (optionRefs[index()] = element)}\n type=\"button\"\n id={`${listboxId}-${index()}`}\n class=\"k2b-choice-option\"\n role=\"option\"\n aria-label={option.label}\n aria-selected={index() === focusedIndex()}\n data-focused={index() === focusedIndex() ? \"true\" : undefined}\n disabled={option.disabled}\n onPointerMove={() => focusOption(index())}\n onPointerDown={(event) => event.preventDefault()}\n onClick={() => {\n commit(option);\n inputRef?.focus();\n inputRef?.select();\n }}\n >\n <Show when={option.color} fallback={<Show when={option.icon}>{(icon) => <i class={icon()} aria-hidden=\"true\" />}</Show>}>\n {(color) => <span class=\"k2b-choice-dot\" style={{ \"background-color\": color() }} aria-hidden=\"true\" />}\n </Show>\n <span>\n <strong>{option.label}</strong>\n <Show when={option.description}>{(description) => <small>{description()}</small>}</Show>\n </span>\n </button>\n )}\n </For>\n </div>\n </div>\n </div>\n </Field>\n );\n}\n\nexport default AutocompleteSelect;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -8,6 +8,7 @@ var _tmpl$ = ["<div class=\"k2b-choice-groups-scrollbar\" aria-hidden=\"true\"><
|
|
|
8
8
|
_tmpl$3 = ["<button type=\"button\" role=\"radio\"", "", ">", "", "</button>"],
|
|
9
9
|
_tmpl$4 = ["<i", " aria-hidden=\"true\"></i>"];
|
|
10
10
|
import { createEffect, createSignal, For, onCleanup, onMount, Show } from "solid-js";
|
|
11
|
+
import { suppressTextSelection } from "../internal/text-selection";
|
|
11
12
|
/**
|
|
12
13
|
* A single-choice row of chips that scrolls sideways instead of wrapping, so its height never changes. Select and
|
|
13
14
|
* MultiSelect use it for their filters; `ChoiceChips` is the public field around it.
|
|
@@ -75,11 +76,14 @@ export function ChoiceGroups(props) {
|
|
|
75
76
|
syncScrollbar();
|
|
76
77
|
};
|
|
77
78
|
const startScrollbarDrag = event => {
|
|
79
|
+
if (event.button !== 0) return;
|
|
78
80
|
event.preventDefault();
|
|
79
81
|
const track = event.currentTarget;
|
|
80
82
|
const current = scrollbar();
|
|
81
83
|
dragOffset = event.target === track ? current.width / 2 : Math.min(current.width, Math.max(0, event.clientX - track.getBoundingClientRect().left - current.left));
|
|
82
84
|
track.setPointerCapture(event.pointerId);
|
|
85
|
+
// The track's own pointerup or pointercancel ends the hold.
|
|
86
|
+
suppressTextSelection(event.pointerId);
|
|
83
87
|
scrollFromPointer(event);
|
|
84
88
|
};
|
|
85
89
|
onMount(() => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["inputs/ChoiceGroups.tsx"],"sourcesContent":["import { createEffect, createSignal, For, type JSX, onCleanup, onMount, Show } from \"solid-js\";\n\ntype ChoiceGroup = { value: string | null; label: string; icon?: string };\n\n/**\n * A single-choice row of chips that scrolls sideways instead of wrapping, so its height never changes. Select and\n * MultiSelect use it for their filters; `ChoiceChips` is the public field around it.\n */\nexport function ChoiceGroups(props: {\n choices: readonly ChoiceGroup[];\n value: string | null;\n onValueChange: (value: string | null) => void;\n ariaLabel?: string;\n /** The field label that names the group; replaces `ariaLabel`. */\n labelledBy?: string;\n describedBy?: string;\n controls?: string;\n disabled?: boolean;\n}): JSX.Element {\n let viewport: HTMLDivElement | undefined;\n let buttons: HTMLButtonElement[] = [];\n let dragOffset = 0;\n const [scrollbar, setScrollbar] = createSignal({ overflow: false, left: 0, width: 0 });\n\n const syncScrollbar = () => {\n if (!viewport) return;\n const { clientWidth, scrollLeft, scrollWidth } = viewport;\n if (clientWidth <= 0 || scrollWidth <= clientWidth) {\n setScrollbar({ overflow: false, left: 0, width: 0 });\n return;\n }\n const width = Math.min(clientWidth, Math.max(24, (clientWidth * clientWidth) / scrollWidth));\n const left = (scrollLeft / (scrollWidth - clientWidth)) * (clientWidth - width);\n setScrollbar({ overflow: true, left, width });\n };\n\n // With no matching choice the first chip takes the tab stop, so the group stays reachable by keyboard.\n const tabStop = (value: string | null, index: number) =>\n props.value === value || (index === 0 && !props.choices.some((choice) => choice.value === props.value));\n const choose = (index: number, focus = false) => {\n const choice = props.choices[index];\n if (!choice || props.disabled) return;\n props.onValueChange(choice.value);\n if (!focus) return;\n queueMicrotask(() => {\n buttons[index]?.focus();\n buttons[index]?.scrollIntoView({ block: \"nearest\", inline: \"nearest\" });\n });\n };\n const move = (index: number, direction: 1 | -1) => choose((index + direction + props.choices.length) % props.choices.length, true);\n const focusEdge = (last: boolean) => choose(last ? props.choices.length - 1 : 0, true);\n\n const scrollFromPointer = (event: PointerEvent & { currentTarget: HTMLDivElement }) => {\n if (!viewport) return;\n const track = event.currentTarget;\n const { width } = scrollbar();\n const rect = track.getBoundingClientRect();\n const available = Math.max(1, rect.width - width);\n const thumbLeft = Math.min(available, Math.max(0, event.clientX - rect.left - dragOffset));\n viewport.scrollLeft = (thumbLeft / available) * (viewport.scrollWidth - viewport.clientWidth);\n syncScrollbar();\n };\n const startScrollbarDrag = (event: PointerEvent & { currentTarget: HTMLDivElement }) => {\n event.preventDefault();\n const track = event.currentTarget;\n const current = scrollbar();\n dragOffset =\n event.target === track\n ? current.width / 2\n : Math.min(current.width, Math.max(0, event.clientX - track.getBoundingClientRect().left - current.left));\n track.setPointerCapture(event.pointerId);\n scrollFromPointer(event);\n };\n\n onMount(() => {\n syncScrollbar();\n const observer = typeof ResizeObserver === \"undefined\" ? null : new ResizeObserver(syncScrollbar);\n if (viewport) observer?.observe(viewport);\n onCleanup(() => observer?.disconnect());\n });\n createEffect(() => {\n props.choices.map((choice) => `${choice.value ?? \"\"}:${choice.label}`).join(\"|\");\n queueMicrotask(syncScrollbar);\n });\n\n return (\n <div class=\"k2b-choice-groups-shell\" onPointerEnter={syncScrollbar} onFocusIn={syncScrollbar}>\n <div\n ref={viewport}\n class=\"k2b-choice-groups\"\n role=\"radiogroup\"\n aria-label={props.labelledBy ? undefined : props.ariaLabel}\n aria-labelledby={props.labelledBy}\n aria-describedby={props.describedBy}\n aria-disabled={props.disabled ? \"true\" : undefined}\n onScroll={syncScrollbar}\n >\n <For each={props.choices}>\n {(group, index) => (\n <button\n ref={(element) => (buttons[index()] = element)}\n type=\"button\"\n role=\"radio\"\n aria-checked={props.value === group.value}\n aria-controls={props.controls}\n disabled={props.disabled}\n tabIndex={tabStop(group.value, index()) ? 0 : -1}\n onClick={() => choose(index())}\n onKeyDown={(event) => {\n if (event.key === \"ArrowRight\" || event.key === \"ArrowDown\") {\n event.preventDefault();\n move(index(), 1);\n } else if (event.key === \"ArrowLeft\" || event.key === \"ArrowUp\") {\n event.preventDefault();\n move(index(), -1);\n } else if (event.key === \"Home\" || event.key === \"End\") {\n event.preventDefault();\n focusEdge(event.key === \"End\");\n }\n }}\n >\n {group.icon && <i class={group.icon} aria-hidden=\"true\" />}\n {group.label}\n </button>\n )}\n </For>\n </div>\n <Show when={scrollbar().overflow}>\n <div\n class=\"k2b-choice-groups-scrollbar\"\n aria-hidden=\"true\"\n onPointerDown={startScrollbarDrag}\n onPointerMove={(event) => {\n if (event.currentTarget.hasPointerCapture(event.pointerId)) scrollFromPointer(event);\n }}\n onPointerUp={(event) => event.currentTarget.releasePointerCapture(event.pointerId)}\n onPointerCancel={(event) => event.currentTarget.releasePointerCapture(event.pointerId)}\n >\n <span\n style={{\n \"--k2b-choice-scroll-left\": `${scrollbar().left}px`,\n \"--k2b-choice-scroll-width\": `${scrollbar().width}px`,\n }}\n />\n </div>\n </Show>\n </div>\n );\n}\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":[],"sources":["inputs/ChoiceGroups.tsx"],"sourcesContent":["import { createEffect, createSignal, For, type JSX, onCleanup, onMount, Show } from \"solid-js\";\nimport { suppressTextSelection } from \"../internal/text-selection\";\n\ntype ChoiceGroup = { value: string | null; label: string; icon?: string };\n\n/**\n * A single-choice row of chips that scrolls sideways instead of wrapping, so its height never changes. Select and\n * MultiSelect use it for their filters; `ChoiceChips` is the public field around it.\n */\nexport function ChoiceGroups(props: {\n choices: readonly ChoiceGroup[];\n value: string | null;\n onValueChange: (value: string | null) => void;\n ariaLabel?: string;\n /** The field label that names the group; replaces `ariaLabel`. */\n labelledBy?: string;\n describedBy?: string;\n controls?: string;\n disabled?: boolean;\n}): JSX.Element {\n let viewport: HTMLDivElement | undefined;\n let buttons: HTMLButtonElement[] = [];\n let dragOffset = 0;\n const [scrollbar, setScrollbar] = createSignal({ overflow: false, left: 0, width: 0 });\n\n const syncScrollbar = () => {\n if (!viewport) return;\n const { clientWidth, scrollLeft, scrollWidth } = viewport;\n if (clientWidth <= 0 || scrollWidth <= clientWidth) {\n setScrollbar({ overflow: false, left: 0, width: 0 });\n return;\n }\n const width = Math.min(clientWidth, Math.max(24, (clientWidth * clientWidth) / scrollWidth));\n const left = (scrollLeft / (scrollWidth - clientWidth)) * (clientWidth - width);\n setScrollbar({ overflow: true, left, width });\n };\n\n // With no matching choice the first chip takes the tab stop, so the group stays reachable by keyboard.\n const tabStop = (value: string | null, index: number) =>\n props.value === value || (index === 0 && !props.choices.some((choice) => choice.value === props.value));\n const choose = (index: number, focus = false) => {\n const choice = props.choices[index];\n if (!choice || props.disabled) return;\n props.onValueChange(choice.value);\n if (!focus) return;\n queueMicrotask(() => {\n buttons[index]?.focus();\n buttons[index]?.scrollIntoView({ block: \"nearest\", inline: \"nearest\" });\n });\n };\n const move = (index: number, direction: 1 | -1) => choose((index + direction + props.choices.length) % props.choices.length, true);\n const focusEdge = (last: boolean) => choose(last ? props.choices.length - 1 : 0, true);\n\n const scrollFromPointer = (event: PointerEvent & { currentTarget: HTMLDivElement }) => {\n if (!viewport) return;\n const track = event.currentTarget;\n const { width } = scrollbar();\n const rect = track.getBoundingClientRect();\n const available = Math.max(1, rect.width - width);\n const thumbLeft = Math.min(available, Math.max(0, event.clientX - rect.left - dragOffset));\n viewport.scrollLeft = (thumbLeft / available) * (viewport.scrollWidth - viewport.clientWidth);\n syncScrollbar();\n };\n const startScrollbarDrag = (event: PointerEvent & { currentTarget: HTMLDivElement }) => {\n if (event.button !== 0) return;\n event.preventDefault();\n const track = event.currentTarget;\n const current = scrollbar();\n dragOffset =\n event.target === track\n ? current.width / 2\n : Math.min(current.width, Math.max(0, event.clientX - track.getBoundingClientRect().left - current.left));\n track.setPointerCapture(event.pointerId);\n // The track's own pointerup or pointercancel ends the hold.\n suppressTextSelection(event.pointerId);\n scrollFromPointer(event);\n };\n\n onMount(() => {\n syncScrollbar();\n const observer = typeof ResizeObserver === \"undefined\" ? null : new ResizeObserver(syncScrollbar);\n if (viewport) observer?.observe(viewport);\n onCleanup(() => observer?.disconnect());\n });\n createEffect(() => {\n props.choices.map((choice) => `${choice.value ?? \"\"}:${choice.label}`).join(\"|\");\n queueMicrotask(syncScrollbar);\n });\n\n return (\n <div class=\"k2b-choice-groups-shell\" onPointerEnter={syncScrollbar} onFocusIn={syncScrollbar}>\n <div\n ref={viewport}\n class=\"k2b-choice-groups\"\n role=\"radiogroup\"\n aria-label={props.labelledBy ? undefined : props.ariaLabel}\n aria-labelledby={props.labelledBy}\n aria-describedby={props.describedBy}\n aria-disabled={props.disabled ? \"true\" : undefined}\n onScroll={syncScrollbar}\n >\n <For each={props.choices}>\n {(group, index) => (\n <button\n ref={(element) => (buttons[index()] = element)}\n type=\"button\"\n role=\"radio\"\n aria-checked={props.value === group.value}\n aria-controls={props.controls}\n disabled={props.disabled}\n tabIndex={tabStop(group.value, index()) ? 0 : -1}\n onClick={() => choose(index())}\n onKeyDown={(event) => {\n if (event.key === \"ArrowRight\" || event.key === \"ArrowDown\") {\n event.preventDefault();\n move(index(), 1);\n } else if (event.key === \"ArrowLeft\" || event.key === \"ArrowUp\") {\n event.preventDefault();\n move(index(), -1);\n } else if (event.key === \"Home\" || event.key === \"End\") {\n event.preventDefault();\n focusEdge(event.key === \"End\");\n }\n }}\n >\n {group.icon && <i class={group.icon} aria-hidden=\"true\" />}\n {group.label}\n </button>\n )}\n </For>\n </div>\n <Show when={scrollbar().overflow}>\n <div\n class=\"k2b-choice-groups-scrollbar\"\n aria-hidden=\"true\"\n onPointerDown={startScrollbarDrag}\n onPointerMove={(event) => {\n if (event.currentTarget.hasPointerCapture(event.pointerId)) scrollFromPointer(event);\n }}\n onPointerUp={(event) => event.currentTarget.releasePointerCapture(event.pointerId)}\n onPointerCancel={(event) => event.currentTarget.releasePointerCapture(event.pointerId)}\n >\n <span\n style={{\n \"--k2b-choice-scroll-left\": `${scrollbar().left}px`,\n \"--k2b-choice-scroll-width\": `${scrollbar().width}px`,\n }}\n />\n </div>\n </Show>\n </div>\n );\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -17,10 +17,10 @@ var _tmpl$ = ["<input class=\"k2b-control k2b-pin-input__digit\"", " inputmode=\
|
|
|
17
17
|
_tmpl$9 = ["<div class=\"k2b-color-input\"", ">", "", "<input", " class=\"k2b-color-input__native\" type=\"color\"", "", "></div>"];
|
|
18
18
|
import { For, Show, splitProps } from "solid-js";
|
|
19
19
|
import { createFieldMeta, Field, fieldControlAria } from "../internal/field";
|
|
20
|
-
import { useUiMessages } from "../intl/messages";
|
|
21
20
|
import { commitFieldValue, resolveMaybeAccessor } from "./field-contract";
|
|
21
|
+
import { useInputMessages } from "./input-messages";
|
|
22
22
|
export function PinInput(props) {
|
|
23
|
-
const
|
|
23
|
+
const inputMessages = useInputMessages();
|
|
24
24
|
const meta = createFieldMeta(props.id);
|
|
25
25
|
const length = () => Math.max(1, props.length ?? 6);
|
|
26
26
|
let inputs = [];
|
|
@@ -112,7 +112,7 @@ export function PinInput(props) {
|
|
|
112
112
|
length: length()
|
|
113
113
|
});
|
|
114
114
|
},
|
|
115
|
-
children: (_, index) => _$ssr(_tmpl$, _$ssrAttribute("data-filled", digits()[index()] ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("type", props.password ? "password" : "text", false), _$ssrAttribute("value", _$escape(digits()[index()] ?? "", true), false), _$ssrAttribute("required", props.required, true), _$ssrAttribute("disabled", props.disabled, true) + _$ssrAttribute("readonly", _$escape(props.readOnly, true), false) + _$ssrAttribute("aria-label", _$escape(
|
|
115
|
+
children: (_, index) => _$ssr(_tmpl$, _$ssrAttribute("data-filled", digits()[index()] ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("type", props.password ? "password" : "text", false), _$ssrAttribute("value", _$escape(digits()[index()] ?? "", true), false), _$ssrAttribute("required", props.required, true), _$ssrAttribute("disabled", props.disabled, true) + _$ssrAttribute("readonly", _$escape(props.readOnly, true), false) + _$ssrAttribute("aria-label", _$escape(inputMessages().pinDigit({
|
|
116
116
|
index: index() + 1,
|
|
117
117
|
total: length()
|
|
118
118
|
}), true), false))
|
|
@@ -192,7 +192,7 @@ export function Slider(props) {
|
|
|
192
192
|
});
|
|
193
193
|
}
|
|
194
194
|
export function ColorInput(props) {
|
|
195
|
-
const
|
|
195
|
+
const inputMessages = useInputMessages();
|
|
196
196
|
const meta = createFieldMeta(props.id);
|
|
197
197
|
const currentColor = () => resolveMaybeAccessor(props.value) || "#3b82f6";
|
|
198
198
|
const isTransparent = () => resolveMaybeAccessor(props.transparentValue) ?? false;
|
|
@@ -223,7 +223,7 @@ export function ColorInput(props) {
|
|
|
223
223
|
return props.transparent;
|
|
224
224
|
},
|
|
225
225
|
get children() {
|
|
226
|
-
return _$ssr(_tmpl$8, _$ssrAttribute("aria-label", isTransparent() ? _$escape(
|
|
226
|
+
return _$ssr(_tmpl$8, _$ssrAttribute("aria-label", isTransparent() ? _$escape(inputMessages().useColor, true) : _$escape(inputMessages().useTransparent, true), false) + _$ssrAttribute("aria-pressed", _$escape(isTransparent(), true), false), _$ssrAttribute("disabled", props.disabled, true));
|
|
227
227
|
}
|
|
228
228
|
})), _$ssrAttribute("id", _$escape(meta.controlId, true), false), _$ssrAttribute("name", _$escape(props.name, true), false) + _$ssrAttribute("value", _$escape(currentColor(), true), false), _$ssrAttribute("disabled", props.disabled || isTransparent(), true));
|
|
229
229
|
return _$createComponent(Field, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["inputs/ChoiceInputs.tsx"],"sourcesContent":["import { For, type JSX, Show, splitProps } from \"solid-js\";\nimport { createFieldMeta, Field, fieldControlAria } from \"../internal/field\";\nimport { useUiMessages } from \"../intl/messages\";\nimport type { FieldProps, MaybeAccessor, ValueFieldProps } from \"./field-contract\";\nimport { commitFieldValue, resolveMaybeAccessor } from \"./field-contract\";\n\nexport type PinInputProps = ValueFieldProps<string> & {\n length?: number;\n name?: string;\n stretch?: boolean;\n password?: boolean;\n readOnly?: boolean;\n onSubmit?: () => void;\n};\n\nexport function PinInput(props: PinInputProps): JSX.Element {\n const messages = useUiMessages();\n const meta = createFieldMeta(props.id);\n const length = () => Math.max(1, props.length ?? 6);\n let inputs: HTMLInputElement[] = [];\n const digits = () => (resolveMaybeAccessor(props.value) ?? \"\").replace(/\\D/g, \"\").slice(0, length());\n const error = () => resolveMaybeAccessor(props.error);\n const emit = (value: string) => {\n props.onValueChange?.(value);\n if (value.length === length()) props.onValueCommit?.(value);\n };\n\n const updateDigit = (index: number, input: string) => {\n if (props.disabled || props.readOnly) return;\n const digit = input.replace(/\\D/g, \"\").slice(-1);\n const current = digits();\n emit(`${current.slice(0, index)}${digit}${current.slice(index + 1)}`);\n if (digit && index < length() - 1) {\n inputs[index + 1]?.focus();\n inputs[index + 1]?.select();\n }\n };\n\n const handleKeyDown = (index: number, event: KeyboardEvent) => {\n if (props.disabled || props.readOnly) return;\n if (event.key === \"Enter\" && props.onSubmit && !event.shiftKey && !event.metaKey) {\n event.preventDefault();\n props.onSubmit();\n } else if (event.key === \"ArrowLeft\" && index > 0) {\n event.preventDefault();\n inputs[index - 1]?.focus();\n inputs[index - 1]?.select();\n } else if (event.key === \"ArrowRight\" && index < length() - 1) {\n event.preventDefault();\n inputs[index + 1]?.focus();\n inputs[index + 1]?.select();\n } else if (event.key === \"Backspace\" && !digits()[index] && index > 0) {\n event.preventDefault();\n const current = digits();\n emit(`${current.slice(0, index - 1)}${current.slice(index)}`);\n inputs[index - 1]?.focus();\n inputs[index - 1]?.select();\n }\n };\n\n const handlePaste = (event: ClipboardEvent) => {\n if (props.disabled || props.readOnly) return;\n const pasted = event.clipboardData?.getData(\"text\").replace(/\\D/g, \"\");\n if (!pasted) return;\n event.preventDefault();\n const focused = inputs.indexOf(document.activeElement as HTMLInputElement);\n const start = focused >= 0 ? focused : 0;\n const insert = pasted.slice(0, length() - start);\n const current = digits();\n emit(`${current.slice(0, start)}${insert}${current.slice(start + insert.length)}`.slice(0, length()));\n const next = Math.min(start + insert.length, length() - 1);\n inputs[next]?.focus();\n inputs[next]?.select();\n };\n\n return (\n <Field\n class={props.class}\n label={props.label}\n description={props.description}\n error={error()}\n meta={meta}\n labelFor={false}\n required={props.required}\n disabled={props.disabled}\n >\n <div\n class=\"k2b-pin-input\"\n id={meta.controlId}\n data-stretch={props.stretch ? \"true\" : undefined}\n role=\"group\"\n {...fieldControlAria(meta, props)}\n onPaste={handlePaste}\n >\n <For each={Array.from({ length: length() })}>\n {(_, index) => (\n <input\n ref={(element) => {\n inputs[index()] = element;\n }}\n class=\"k2b-control k2b-pin-input__digit\"\n data-filled={digits()[index()] ? \"true\" : undefined}\n type={props.password ? \"password\" : \"text\"}\n inputmode=\"numeric\"\n autocomplete=\"off\"\n pattern=\"[0-9]\"\n maxlength={1}\n value={digits()[index()] ?? \"\"}\n required={props.required}\n disabled={props.disabled}\n readOnly={props.readOnly}\n aria-label={messages().pinDigit({ index: index() + 1, total: length() })}\n onInput={(event) => updateDigit(index(), event.currentTarget.value)}\n onKeyDown={(event) => handleKeyDown(index(), event)}\n onFocus={(event) => event.currentTarget.select()}\n />\n )}\n </For>\n </div>\n <Show when={props.name}>{(name) => <input type=\"hidden\" name={name()} value={digits()} />}</Show>\n </Field>\n );\n}\n\nexport type SliderProps = FieldProps &\n Omit<JSX.InputHTMLAttributes<HTMLInputElement>, \"type\" | \"value\" | \"onInput\" | \"onChange\" | keyof FieldProps> &\n ValueFieldProps<number> & {\n value: MaybeAccessor<number>;\n formatValue?: (value: number) => string;\n showValue?: boolean;\n center?: boolean;\n defaultValue?: number;\n };\n\nexport function Slider(props: SliderProps): JSX.Element {\n const [local, rest] = splitProps(props, [\n \"aria-describedby\",\n \"aria-label\",\n \"center\",\n \"class\",\n \"defaultValue\",\n \"description\",\n \"error\",\n \"id\",\n \"label\",\n \"onValueChange\",\n \"onValueCommit\",\n \"required\",\n \"showValue\",\n \"value\",\n \"formatValue\",\n ]);\n const meta = createFieldMeta(local.id);\n const min = () => Number(rest.min ?? 0);\n const max = () => Number(rest.max ?? 100);\n const value = () => resolveMaybeAccessor(local.value) ?? min();\n const error = () => resolveMaybeAccessor(local.error);\n const percentage = () => {\n const span = max() - min();\n return span <= 0 ? 0 : Math.min(100, Math.max(0, ((value() - min()) / span) * 100));\n };\n const track = () => {\n const position = percentage();\n if (local.center) {\n const low = Math.min(50, position);\n const high = Math.max(50, position);\n return `linear-gradient(to right, var(--k2b-surface-muted) 0 ${low}%, var(--k2b-action) ${low}% ${high}%, var(--k2b-surface-muted) ${high}% 100%)`;\n }\n return `linear-gradient(to right, var(--k2b-action) 0 ${position}%, var(--k2b-surface-muted) ${position}% 100%)`;\n };\n const resetValue = () => local.defaultValue ?? (local.center ? (min() + max()) / 2 : min());\n\n return (\n <Field\n class={local.class}\n label={local.label}\n description={local.description}\n error={error()}\n meta={meta}\n required={local.required}\n disabled={rest.disabled}\n >\n <div class=\"k2b-slider\">\n <input\n {...rest}\n id={meta.controlId}\n type=\"range\"\n value={value()}\n style={{ background: track() }}\n {...fieldControlAria(meta, local)}\n onInput={(event) => local.onValueChange?.(event.currentTarget.valueAsNumber)}\n onChange={(event) => local.onValueCommit?.(event.currentTarget.valueAsNumber)}\n onDblClick={() => {\n const next = resetValue();\n commitFieldValue(local, next);\n }}\n />\n <Show when={local.showValue ?? true}>\n <output for={meta.controlId}>{local.formatValue?.(value()) ?? value()}</output>\n </Show>\n </div>\n </Field>\n );\n}\n\nexport type ColorInputProps = ValueFieldProps<string> & {\n name?: string;\n compact?: boolean;\n transparent?: boolean;\n transparentValue?: MaybeAccessor<boolean>;\n onTransparentValueChange?: (value: boolean) => void;\n};\n\nexport function ColorInput(props: ColorInputProps): JSX.Element {\n const messages = useUiMessages();\n const meta = createFieldMeta(props.id);\n const currentColor = () => resolveMaybeAccessor(props.value) || \"#3b82f6\";\n const isTransparent = () => resolveMaybeAccessor(props.transparentValue) ?? false;\n const error = () => resolveMaybeAccessor(props.error);\n const compact = () => props.compact ?? !props.label;\n let picker: HTMLInputElement | undefined;\n\n const control = () =>\n compact() ? (\n <span class=\"k2b-color-input k2b-color-input--compact\">\n <button\n type=\"button\"\n class=\"k2b-color-input__swatch\"\n style={{ \"background-color\": currentColor() }}\n disabled={props.disabled}\n {...fieldControlAria(meta, props)}\n onClick={() => picker?.click()}\n />\n <input\n ref={picker}\n id={meta.controlId}\n class=\"k2b-color-input__native\"\n type=\"color\"\n name={props.name}\n value={currentColor()}\n disabled={props.disabled}\n onInput={(event) => props.onValueChange?.(event.currentTarget.value)}\n onChange={(event) => props.onValueCommit?.(event.currentTarget.value)}\n />\n </span>\n ) : (\n <div\n class=\"k2b-color-input\"\n data-disabled={props.disabled || isTransparent() ? \"true\" : undefined}\n data-invalid={error() ? \"true\" : undefined}\n >\n <button\n type=\"button\"\n class=\"k2b-color-input__value\"\n disabled={props.disabled || isTransparent()}\n {...fieldControlAria(meta, props)}\n onClick={() => picker?.click()}\n >\n <span\n class=\"k2b-color-input__swatch\"\n data-transparent={isTransparent() ? \"true\" : undefined}\n style={isTransparent() ? undefined : { \"background-color\": currentColor() }}\n />\n <code>{isTransparent() ? \"transparent\" : currentColor().toUpperCase()}</code>\n </button>\n <Show when={props.transparent}>\n <button\n type=\"button\"\n class=\"k2b-color-input__transparent\"\n aria-label={isTransparent() ? messages().useColor : messages().useTransparent}\n aria-pressed={isTransparent()}\n disabled={props.disabled}\n onClick={() => props.onTransparentValueChange?.(!isTransparent())}\n >\n <i class=\"ti ti-grid-dots\" aria-hidden=\"true\" />\n </button>\n </Show>\n <input\n ref={picker}\n id={meta.controlId}\n class=\"k2b-color-input__native\"\n type=\"color\"\n name={props.name}\n value={currentColor()}\n disabled={props.disabled || isTransparent()}\n onInput={(event) => props.onValueChange?.(event.currentTarget.value)}\n onChange={(event) => props.onValueCommit?.(event.currentTarget.value)}\n />\n </div>\n );\n\n return (\n <Field\n class={props.class}\n label={props.label}\n description={props.description}\n error={error()}\n meta={meta}\n required={props.required}\n disabled={props.disabled}\n >\n {control()}\n </Field>\n );\n}\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":[],"sources":["inputs/ChoiceInputs.tsx"],"sourcesContent":["import { For, type JSX, Show, splitProps } from \"solid-js\";\nimport { createFieldMeta, Field, fieldControlAria } from \"../internal/field\";\nimport type { FieldProps, MaybeAccessor, ValueFieldProps } from \"./field-contract\";\nimport { commitFieldValue, resolveMaybeAccessor } from \"./field-contract\";\nimport { useInputMessages } from \"./input-messages\";\n\nexport type PinInputProps = ValueFieldProps<string> & {\n length?: number;\n name?: string;\n stretch?: boolean;\n password?: boolean;\n readOnly?: boolean;\n onSubmit?: () => void;\n};\n\nexport function PinInput(props: PinInputProps): JSX.Element {\n const inputMessages = useInputMessages();\n const meta = createFieldMeta(props.id);\n const length = () => Math.max(1, props.length ?? 6);\n let inputs: HTMLInputElement[] = [];\n const digits = () => (resolveMaybeAccessor(props.value) ?? \"\").replace(/\\D/g, \"\").slice(0, length());\n const error = () => resolveMaybeAccessor(props.error);\n const emit = (value: string) => {\n props.onValueChange?.(value);\n if (value.length === length()) props.onValueCommit?.(value);\n };\n\n const updateDigit = (index: number, input: string) => {\n if (props.disabled || props.readOnly) return;\n const digit = input.replace(/\\D/g, \"\").slice(-1);\n const current = digits();\n emit(`${current.slice(0, index)}${digit}${current.slice(index + 1)}`);\n if (digit && index < length() - 1) {\n inputs[index + 1]?.focus();\n inputs[index + 1]?.select();\n }\n };\n\n const handleKeyDown = (index: number, event: KeyboardEvent) => {\n if (props.disabled || props.readOnly) return;\n if (event.key === \"Enter\" && props.onSubmit && !event.shiftKey && !event.metaKey) {\n event.preventDefault();\n props.onSubmit();\n } else if (event.key === \"ArrowLeft\" && index > 0) {\n event.preventDefault();\n inputs[index - 1]?.focus();\n inputs[index - 1]?.select();\n } else if (event.key === \"ArrowRight\" && index < length() - 1) {\n event.preventDefault();\n inputs[index + 1]?.focus();\n inputs[index + 1]?.select();\n } else if (event.key === \"Backspace\" && !digits()[index] && index > 0) {\n event.preventDefault();\n const current = digits();\n emit(`${current.slice(0, index - 1)}${current.slice(index)}`);\n inputs[index - 1]?.focus();\n inputs[index - 1]?.select();\n }\n };\n\n const handlePaste = (event: ClipboardEvent) => {\n if (props.disabled || props.readOnly) return;\n const pasted = event.clipboardData?.getData(\"text\").replace(/\\D/g, \"\");\n if (!pasted) return;\n event.preventDefault();\n const focused = inputs.indexOf(document.activeElement as HTMLInputElement);\n const start = focused >= 0 ? focused : 0;\n const insert = pasted.slice(0, length() - start);\n const current = digits();\n emit(`${current.slice(0, start)}${insert}${current.slice(start + insert.length)}`.slice(0, length()));\n const next = Math.min(start + insert.length, length() - 1);\n inputs[next]?.focus();\n inputs[next]?.select();\n };\n\n return (\n <Field\n class={props.class}\n label={props.label}\n description={props.description}\n error={error()}\n meta={meta}\n labelFor={false}\n required={props.required}\n disabled={props.disabled}\n >\n <div\n class=\"k2b-pin-input\"\n id={meta.controlId}\n data-stretch={props.stretch ? \"true\" : undefined}\n role=\"group\"\n {...fieldControlAria(meta, props)}\n onPaste={handlePaste}\n >\n <For each={Array.from({ length: length() })}>\n {(_, index) => (\n <input\n ref={(element) => {\n inputs[index()] = element;\n }}\n class=\"k2b-control k2b-pin-input__digit\"\n data-filled={digits()[index()] ? \"true\" : undefined}\n type={props.password ? \"password\" : \"text\"}\n inputmode=\"numeric\"\n autocomplete=\"off\"\n pattern=\"[0-9]\"\n maxlength={1}\n value={digits()[index()] ?? \"\"}\n required={props.required}\n disabled={props.disabled}\n readOnly={props.readOnly}\n aria-label={inputMessages().pinDigit({ index: index() + 1, total: length() })}\n onInput={(event) => updateDigit(index(), event.currentTarget.value)}\n onKeyDown={(event) => handleKeyDown(index(), event)}\n onFocus={(event) => event.currentTarget.select()}\n />\n )}\n </For>\n </div>\n <Show when={props.name}>{(name) => <input type=\"hidden\" name={name()} value={digits()} />}</Show>\n </Field>\n );\n}\n\nexport type SliderProps = FieldProps &\n Omit<JSX.InputHTMLAttributes<HTMLInputElement>, \"type\" | \"value\" | \"onInput\" | \"onChange\" | keyof FieldProps> &\n ValueFieldProps<number> & {\n value: MaybeAccessor<number>;\n formatValue?: (value: number) => string;\n showValue?: boolean;\n center?: boolean;\n defaultValue?: number;\n };\n\nexport function Slider(props: SliderProps): JSX.Element {\n const [local, rest] = splitProps(props, [\n \"aria-describedby\",\n \"aria-label\",\n \"center\",\n \"class\",\n \"defaultValue\",\n \"description\",\n \"error\",\n \"id\",\n \"label\",\n \"onValueChange\",\n \"onValueCommit\",\n \"required\",\n \"showValue\",\n \"value\",\n \"formatValue\",\n ]);\n const meta = createFieldMeta(local.id);\n const min = () => Number(rest.min ?? 0);\n const max = () => Number(rest.max ?? 100);\n const value = () => resolveMaybeAccessor(local.value) ?? min();\n const error = () => resolveMaybeAccessor(local.error);\n const percentage = () => {\n const span = max() - min();\n return span <= 0 ? 0 : Math.min(100, Math.max(0, ((value() - min()) / span) * 100));\n };\n const track = () => {\n const position = percentage();\n if (local.center) {\n const low = Math.min(50, position);\n const high = Math.max(50, position);\n return `linear-gradient(to right, var(--k2b-surface-muted) 0 ${low}%, var(--k2b-action) ${low}% ${high}%, var(--k2b-surface-muted) ${high}% 100%)`;\n }\n return `linear-gradient(to right, var(--k2b-action) 0 ${position}%, var(--k2b-surface-muted) ${position}% 100%)`;\n };\n const resetValue = () => local.defaultValue ?? (local.center ? (min() + max()) / 2 : min());\n\n return (\n <Field\n class={local.class}\n label={local.label}\n description={local.description}\n error={error()}\n meta={meta}\n required={local.required}\n disabled={rest.disabled}\n >\n <div class=\"k2b-slider\">\n <input\n {...rest}\n id={meta.controlId}\n type=\"range\"\n value={value()}\n style={{ background: track() }}\n {...fieldControlAria(meta, local)}\n onInput={(event) => local.onValueChange?.(event.currentTarget.valueAsNumber)}\n onChange={(event) => local.onValueCommit?.(event.currentTarget.valueAsNumber)}\n onDblClick={() => {\n const next = resetValue();\n commitFieldValue(local, next);\n }}\n />\n <Show when={local.showValue ?? true}>\n <output for={meta.controlId}>{local.formatValue?.(value()) ?? value()}</output>\n </Show>\n </div>\n </Field>\n );\n}\n\nexport type ColorInputProps = ValueFieldProps<string> & {\n name?: string;\n compact?: boolean;\n transparent?: boolean;\n transparentValue?: MaybeAccessor<boolean>;\n onTransparentValueChange?: (value: boolean) => void;\n};\n\nexport function ColorInput(props: ColorInputProps): JSX.Element {\n const inputMessages = useInputMessages();\n const meta = createFieldMeta(props.id);\n const currentColor = () => resolveMaybeAccessor(props.value) || \"#3b82f6\";\n const isTransparent = () => resolveMaybeAccessor(props.transparentValue) ?? false;\n const error = () => resolveMaybeAccessor(props.error);\n const compact = () => props.compact ?? !props.label;\n let picker: HTMLInputElement | undefined;\n\n const control = () =>\n compact() ? (\n <span class=\"k2b-color-input k2b-color-input--compact\">\n <button\n type=\"button\"\n class=\"k2b-color-input__swatch\"\n style={{ \"background-color\": currentColor() }}\n disabled={props.disabled}\n {...fieldControlAria(meta, props)}\n onClick={() => picker?.click()}\n />\n <input\n ref={picker}\n id={meta.controlId}\n class=\"k2b-color-input__native\"\n type=\"color\"\n name={props.name}\n value={currentColor()}\n disabled={props.disabled}\n onInput={(event) => props.onValueChange?.(event.currentTarget.value)}\n onChange={(event) => props.onValueCommit?.(event.currentTarget.value)}\n />\n </span>\n ) : (\n <div\n class=\"k2b-color-input\"\n data-disabled={props.disabled || isTransparent() ? \"true\" : undefined}\n data-invalid={error() ? \"true\" : undefined}\n >\n <button\n type=\"button\"\n class=\"k2b-color-input__value\"\n disabled={props.disabled || isTransparent()}\n {...fieldControlAria(meta, props)}\n onClick={() => picker?.click()}\n >\n <span\n class=\"k2b-color-input__swatch\"\n data-transparent={isTransparent() ? \"true\" : undefined}\n style={isTransparent() ? undefined : { \"background-color\": currentColor() }}\n />\n <code>{isTransparent() ? \"transparent\" : currentColor().toUpperCase()}</code>\n </button>\n <Show when={props.transparent}>\n <button\n type=\"button\"\n class=\"k2b-color-input__transparent\"\n aria-label={isTransparent() ? inputMessages().useColor : inputMessages().useTransparent}\n aria-pressed={isTransparent()}\n disabled={props.disabled}\n onClick={() => props.onTransparentValueChange?.(!isTransparent())}\n >\n <i class=\"ti ti-grid-dots\" aria-hidden=\"true\" />\n </button>\n </Show>\n <input\n ref={picker}\n id={meta.controlId}\n class=\"k2b-color-input__native\"\n type=\"color\"\n name={props.name}\n value={currentColor()}\n disabled={props.disabled || isTransparent()}\n onInput={(event) => props.onValueChange?.(event.currentTarget.value)}\n onChange={(event) => props.onValueCommit?.(event.currentTarget.value)}\n />\n </div>\n );\n\n return (\n <Field\n class={props.class}\n label={props.label}\n description={props.description}\n error={error()}\n meta={meta}\n required={props.required}\n disabled={props.disabled}\n >\n {control()}\n </Field>\n );\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -18,9 +18,11 @@ import { createFieldMeta, Field, fieldControlAria } from "../internal/field";
|
|
|
18
18
|
import { useUiMessages } from "../intl/messages";
|
|
19
19
|
import { createChoiceLoader, createChoicePopover, nextEnabledChoiceIndex } from "./choice";
|
|
20
20
|
import { resolveMaybeAccessor } from "./field-contract";
|
|
21
|
+
import { useSelectMessages } from "./select-messages";
|
|
21
22
|
const iconClass = icon => icon.split(/\s+/).includes("ti") ? icon : `ti ${icon}`;
|
|
22
23
|
export function Combobox(props) {
|
|
23
24
|
const messages = useUiMessages();
|
|
25
|
+
const selectMessages = useSelectMessages();
|
|
24
26
|
const meta = createFieldMeta(props.id);
|
|
25
27
|
const listboxId = `${meta.controlId}-listbox`;
|
|
26
28
|
const [localQuery, setLocalQuery] = createSignal("");
|
|
@@ -157,7 +159,7 @@ export function Combobox(props) {
|
|
|
157
159
|
return _$memo(() => !!loader.error())() ? [] : options();
|
|
158
160
|
},
|
|
159
161
|
get fallback() {
|
|
160
|
-
return _$ssr(_tmpl$5, query().length >= 2 ? _$escape(
|
|
162
|
+
return _$ssr(_tmpl$5, query().length >= 2 ? _$escape(selectMessages().noResultsFound) : _$escape(selectMessages().typeToSearch));
|
|
161
163
|
},
|
|
162
164
|
children: (option, index) => _$ssr(_tmpl$6, `${_$escape(listboxId, true)}-${_$escape(index(), true)}`, _$ssrAttribute("aria-selected", _$escape(index(), true) === _$escape(focusedIndex(), true), false) + _$ssrAttribute("data-focused", index() === focusedIndex() ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
|
|
163
165
|
get when() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["inputs/Combobox.tsx"],"sourcesContent":["import { createSignal, For, type JSX, Show } from \"solid-js\";\nimport { createFieldMeta, Field, fieldControlAria } from \"../internal/field\";\nimport { useUiMessages } from \"../intl/messages\";\nimport { type ChoiceOption, createChoiceLoader, createChoicePopover, nextEnabledChoiceIndex } from \"./choice\";\nimport type { FieldProps, MaybeAccessor } from \"./field-contract\";\nimport { resolveMaybeAccessor } from \"./field-contract\";\n\nexport type ComboboxOption = { id: string; label: string; description?: string; icon?: string };\nexport type ComboboxProps = FieldProps & {\n query?: MaybeAccessor<string>;\n onQueryChange?: (query: string) => void;\n placeholder?: string;\n fetchData: (query: string, signal: AbortSignal) => Promise<ComboboxOption[]>;\n onSelect: (option: ComboboxOption) => void;\n debounceMs?: number;\n};\n\nconst iconClass = (icon: string) => (icon.split(/\\s+/).includes(\"ti\") ? icon : `ti ${icon}`);\n\nexport function Combobox(props: ComboboxProps): JSX.Element {\n const messages = useUiMessages();\n const meta = createFieldMeta(props.id);\n const listboxId = `${meta.controlId}-listbox`;\n const [localQuery, setLocalQuery] = createSignal(\"\");\n const query = () => resolveMaybeAccessor(props.query) ?? localQuery();\n const setQuery = (value: string) => {\n setLocalQuery(value);\n props.onQueryChange?.(value);\n };\n const error = () => resolveMaybeAccessor(props.error);\n const [focusedIndex, setFocusedIndex] = createSignal(-1);\n let inputRef: HTMLInputElement | undefined;\n let optionRefs: HTMLButtonElement[] = [];\n const loader = createChoiceLoader(\n () => async (value, signal) => (await props.fetchData(value, signal)).map((option) => ({ ...option, value: option.id })),\n // Cloud debounces at 200ms and then pads the response with a 200ms minimum\n // load time to stop the spinner flickering. The spinner here sits in the\n // chevron slot and stale results stay visible, so there is nothing to pad —\n // 150ms keeps typing responsive without hammering the loader.\n () => props.debounceMs ?? 150,\n );\n const popover = createChoicePopover(() => Boolean(props.disabled));\n const options = loader.options;\n const focusedOption = () => options()[focusedIndex()];\n const focus = (index: number) => {\n setFocusedIndex(index);\n optionRefs[index]?.scrollIntoView({ block: \"nearest\" });\n };\n /** `eager` loads the currently controlled query on open; typing supplies its\n * own query, so opening from `onInput` skips the duplicate request. */\n const open = (eager = true) => {\n if (props.disabled || popover.open()) return;\n popover.show();\n if (eager) loader.load(query(), true);\n focus(-1);\n };\n const reset = () => {\n loader.cancel();\n setQuery(\"\");\n focus(-1);\n };\n const close = () => {\n popover.hide();\n reset();\n };\n const select = (option: ChoiceOption<string>) => {\n popover.hide();\n props.onSelect({ id: option.value, label: option.label, description: option.description, icon: option.icon });\n reset();\n inputRef?.focus();\n };\n const onKeyDown = (event: KeyboardEvent) => {\n if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n event.preventDefault();\n if (!popover.open()) open();\n else focus(nextEnabledChoiceIndex(options(), focusedIndex(), event.key === \"ArrowDown\" ? 1 : -1));\n } else if (event.key === \"Enter\" && popover.open() && options()[focusedIndex()]) {\n event.preventDefault();\n select(options()[focusedIndex()]!);\n } else if ((event.key === \"Escape\" || event.key === \"Tab\") && popover.open()) {\n // Escape is only ours while the list is open; otherwise it has to reach an\n // enclosing dialog or drawer.\n if (event.key === \"Escape\") event.preventDefault();\n close();\n }\n };\n\n return (\n <Field\n class={props.class}\n label={props.label}\n description={props.description}\n error={error()}\n meta={meta}\n required={props.required}\n disabled={props.disabled}\n >\n <div class=\"k2b-combobox\" data-invalid={error() ? \"true\" : undefined}>\n <div ref={popover.setTrigger} class=\"k2b-combobox__input\">\n <i class=\"ti ti-search\" aria-hidden=\"true\" />\n <input\n ref={(element) => {\n inputRef = element;\n }}\n id={meta.controlId}\n type=\"text\"\n value={query()}\n placeholder={props.placeholder ?? messages().search}\n disabled={props.disabled}\n role=\"combobox\"\n aria-autocomplete=\"list\"\n aria-expanded={popover.open()}\n aria-controls={listboxId}\n aria-activedescendant={focusedOption() ? `${listboxId}-${focusedIndex()}` : undefined}\n {...fieldControlAria(meta, props)}\n onFocus={() => open()}\n onClick={() => open()}\n onInput={(event) => {\n setQuery(event.currentTarget.value);\n open(false);\n loader.load(event.currentTarget.value);\n focus(-1);\n }}\n onKeyDown={onKeyDown}\n />\n <Show when={loader.loading()} fallback={<i class=\"ti ti-chevron-down\" aria-hidden=\"true\" />}>\n <i class=\"ti ti-loader-2 k2b-spin\" aria-hidden=\"true\" />\n </Show>\n </div>\n <div ref={popover.setPopover} popover=\"manual\" class=\"k2b-choice-popover\">\n <div class=\"k2b-choice-options\" role=\"listbox\" id={listboxId}>\n <Show when={loader.error()}>\n {(message) => (\n <div class=\"k2b-choice-status\" data-tone=\"danger\">\n <span>{message()}</span>\n <button type=\"button\" onClick={loader.retry}>\n {messages().retry}\n </button>\n </div>\n )}\n </Show>\n <For\n each={loader.error() ? [] : options()}\n fallback={<div class=\"k2b-choice-status\">{query().length >= 2 ? messages().noResultsFound : messages().typeToSearch}</div>}\n >\n {(option, index) => (\n <button\n ref={(element) => (optionRefs[index()] = element)}\n type=\"button\"\n id={`${listboxId}-${index()}`}\n class=\"k2b-choice-option\"\n role=\"option\"\n aria-selected={index() === focusedIndex()}\n data-focused={index() === focusedIndex() ? \"true\" : undefined}\n onPointerMove={() => focus(index())}\n onPointerDown={(event) => event.preventDefault()}\n onClick={() => select(option)}\n >\n <Show when={option.icon}>{(icon) => <i class={iconClass(icon())} aria-hidden=\"true\" />}</Show>\n <span>\n <strong>{option.label}</strong>\n <Show when={option.description}>{(description) => <small>{description()}</small>}</Show>\n </span>\n </button>\n )}\n </For>\n </div>\n </div>\n </div>\n </Field>\n );\n}\n\nexport default Combobox;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":[],"sources":["inputs/Combobox.tsx"],"sourcesContent":["import { createSignal, For, type JSX, Show } from \"solid-js\";\nimport { createFieldMeta, Field, fieldControlAria } from \"../internal/field\";\nimport { useUiMessages } from \"../intl/messages\";\nimport { type ChoiceOption, createChoiceLoader, createChoicePopover, nextEnabledChoiceIndex } from \"./choice\";\nimport type { FieldProps, MaybeAccessor } from \"./field-contract\";\nimport { resolveMaybeAccessor } from \"./field-contract\";\nimport { useSelectMessages } from \"./select-messages\";\n\nexport type ComboboxOption = { id: string; label: string; description?: string; icon?: string };\nexport type ComboboxProps = FieldProps & {\n query?: MaybeAccessor<string>;\n onQueryChange?: (query: string) => void;\n placeholder?: string;\n fetchData: (query: string, signal: AbortSignal) => Promise<ComboboxOption[]>;\n onSelect: (option: ComboboxOption) => void;\n debounceMs?: number;\n};\n\nconst iconClass = (icon: string) => (icon.split(/\\s+/).includes(\"ti\") ? icon : `ti ${icon}`);\n\nexport function Combobox(props: ComboboxProps): JSX.Element {\n const messages = useUiMessages();\n const selectMessages = useSelectMessages();\n const meta = createFieldMeta(props.id);\n const listboxId = `${meta.controlId}-listbox`;\n const [localQuery, setLocalQuery] = createSignal(\"\");\n const query = () => resolveMaybeAccessor(props.query) ?? localQuery();\n const setQuery = (value: string) => {\n setLocalQuery(value);\n props.onQueryChange?.(value);\n };\n const error = () => resolveMaybeAccessor(props.error);\n const [focusedIndex, setFocusedIndex] = createSignal(-1);\n let inputRef: HTMLInputElement | undefined;\n let optionRefs: HTMLButtonElement[] = [];\n const loader = createChoiceLoader(\n () => async (value, signal) => (await props.fetchData(value, signal)).map((option) => ({ ...option, value: option.id })),\n // Cloud debounces at 200ms and then pads the response with a 200ms minimum\n // load time to stop the spinner flickering. The spinner here sits in the\n // chevron slot and stale results stay visible, so there is nothing to pad —\n // 150ms keeps typing responsive without hammering the loader.\n () => props.debounceMs ?? 150,\n );\n const popover = createChoicePopover(() => Boolean(props.disabled));\n const options = loader.options;\n const focusedOption = () => options()[focusedIndex()];\n const focus = (index: number) => {\n setFocusedIndex(index);\n optionRefs[index]?.scrollIntoView({ block: \"nearest\" });\n };\n /** `eager` loads the currently controlled query on open; typing supplies its\n * own query, so opening from `onInput` skips the duplicate request. */\n const open = (eager = true) => {\n if (props.disabled || popover.open()) return;\n popover.show();\n if (eager) loader.load(query(), true);\n focus(-1);\n };\n const reset = () => {\n loader.cancel();\n setQuery(\"\");\n focus(-1);\n };\n const close = () => {\n popover.hide();\n reset();\n };\n const select = (option: ChoiceOption<string>) => {\n popover.hide();\n props.onSelect({ id: option.value, label: option.label, description: option.description, icon: option.icon });\n reset();\n inputRef?.focus();\n };\n const onKeyDown = (event: KeyboardEvent) => {\n if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n event.preventDefault();\n if (!popover.open()) open();\n else focus(nextEnabledChoiceIndex(options(), focusedIndex(), event.key === \"ArrowDown\" ? 1 : -1));\n } else if (event.key === \"Enter\" && popover.open() && options()[focusedIndex()]) {\n event.preventDefault();\n select(options()[focusedIndex()]!);\n } else if ((event.key === \"Escape\" || event.key === \"Tab\") && popover.open()) {\n // Escape is only ours while the list is open; otherwise it has to reach an\n // enclosing dialog or drawer.\n if (event.key === \"Escape\") event.preventDefault();\n close();\n }\n };\n\n return (\n <Field\n class={props.class}\n label={props.label}\n description={props.description}\n error={error()}\n meta={meta}\n required={props.required}\n disabled={props.disabled}\n >\n <div class=\"k2b-combobox\" data-invalid={error() ? \"true\" : undefined}>\n <div ref={popover.setTrigger} class=\"k2b-combobox__input\">\n <i class=\"ti ti-search\" aria-hidden=\"true\" />\n <input\n ref={(element) => {\n inputRef = element;\n }}\n id={meta.controlId}\n type=\"text\"\n value={query()}\n placeholder={props.placeholder ?? messages().search}\n disabled={props.disabled}\n role=\"combobox\"\n aria-autocomplete=\"list\"\n aria-expanded={popover.open()}\n aria-controls={listboxId}\n aria-activedescendant={focusedOption() ? `${listboxId}-${focusedIndex()}` : undefined}\n {...fieldControlAria(meta, props)}\n onFocus={() => open()}\n onClick={() => open()}\n onInput={(event) => {\n setQuery(event.currentTarget.value);\n open(false);\n loader.load(event.currentTarget.value);\n focus(-1);\n }}\n onKeyDown={onKeyDown}\n />\n <Show when={loader.loading()} fallback={<i class=\"ti ti-chevron-down\" aria-hidden=\"true\" />}>\n <i class=\"ti ti-loader-2 k2b-spin\" aria-hidden=\"true\" />\n </Show>\n </div>\n <div ref={popover.setPopover} popover=\"manual\" class=\"k2b-choice-popover\">\n <div class=\"k2b-choice-options\" role=\"listbox\" id={listboxId}>\n <Show when={loader.error()}>\n {(message) => (\n <div class=\"k2b-choice-status\" data-tone=\"danger\">\n <span>{message()}</span>\n <button type=\"button\" onClick={loader.retry}>\n {messages().retry}\n </button>\n </div>\n )}\n </Show>\n <For\n each={loader.error() ? [] : options()}\n fallback={\n <div class=\"k2b-choice-status\">{query().length >= 2 ? selectMessages().noResultsFound : selectMessages().typeToSearch}</div>\n }\n >\n {(option, index) => (\n <button\n ref={(element) => (optionRefs[index()] = element)}\n type=\"button\"\n id={`${listboxId}-${index()}`}\n class=\"k2b-choice-option\"\n role=\"option\"\n aria-selected={index() === focusedIndex()}\n data-focused={index() === focusedIndex() ? \"true\" : undefined}\n onPointerMove={() => focus(index())}\n onPointerDown={(event) => event.preventDefault()}\n onClick={() => select(option)}\n >\n <Show when={option.icon}>{(icon) => <i class={iconClass(icon())} aria-hidden=\"true\" />}</Show>\n <span>\n <strong>{option.label}</strong>\n <Show when={option.description}>{(description) => <small>{description()}</small>}</Show>\n </span>\n </button>\n )}\n </For>\n </div>\n </div>\n </div>\n </Field>\n );\n}\n\nexport default Combobox;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -35,8 +35,8 @@ import { createEffect, createMemo, createSignal, For, onCleanup, onMount, Show }
|
|
|
35
35
|
import { createFieldMeta, Field, fieldControlAria, fieldDescribedBy } from "../internal/field";
|
|
36
36
|
import { returnFocus, ringOnReturn } from "../internal/focus-return";
|
|
37
37
|
import { useDateConfigLocale } from "../intl/locale";
|
|
38
|
-
import { useUiMessages } from "../intl/messages";
|
|
39
|
-
import { dateKey, displayDate, filterTimeInput, formatDateOnlyRangeDuration, formatDateTimeValue, inRange, isCompleteTime, isRangeEdge, monthDate, monthNames, normalizeTimeInput, orderedRange, parseDateValue, pickerContext, previewRange, resolveFocusDay, splitDateTime, toDateTimeValue, yearMonth } from "./date-picker";
|
|
38
|
+
import { resolveUiMessages, useUiMessages } from "../intl/messages";
|
|
39
|
+
import { dateKey, displayDate, filterTimeInput, formatDateOnlyRangeDuration, formatDateTimeValue, inRange, isCompleteTime, isRangeEdge, monthDate, monthNames, msUntilNextDay, normalizeTimeInput, orderedRange, parseDateValue, pickerContext, previewRange, resolveFocusDay, splitDateTime, toDateTimeValue, yearMonth } from "./date-picker";
|
|
40
40
|
import { commitFieldValue, resolveMaybeAccessor } from "./field-contract";
|
|
41
41
|
const popoverIsOpen = popover => {
|
|
42
42
|
if (!popover) return false;
|
|
@@ -248,13 +248,42 @@ function DatePickerPanel(props) {
|
|
|
248
248
|
number: dates.formatDayNumber(day, dateContext)
|
|
249
249
|
})));
|
|
250
250
|
});
|
|
251
|
+
// Today in the picker's time zone, the zone its values use. The browser reads
|
|
252
|
+
// the clock again at the next midnight there, when a hidden tab becomes visible
|
|
253
|
+
// again (timers may not fire on time while the device sleeps), and when the
|
|
254
|
+
// date config changes. The mark and its timer share each reading, so neither
|
|
255
|
+
// starts from an old one.
|
|
256
|
+
const [clockCheck, checkClock] = createSignal(undefined, {
|
|
257
|
+
equals: false
|
|
258
|
+
});
|
|
259
|
+
const now = createMemo(() => {
|
|
260
|
+
clockCheck();
|
|
261
|
+
context();
|
|
262
|
+
return new Date();
|
|
263
|
+
});
|
|
264
|
+
const todayKey = createMemo(() => dateKey(now(), context()));
|
|
265
|
+
// The day's name is formatted in the date locale, so "today" joins it in the same language.
|
|
266
|
+
const todayLabel = date => resolveUiMessages(context().locale).todayDate({
|
|
267
|
+
date
|
|
268
|
+
});
|
|
269
|
+
createEffect(() => {
|
|
270
|
+
const timer = window.setTimeout(() => checkClock(), msUntilNextDay(now(), context()));
|
|
271
|
+
onCleanup(() => window.clearTimeout(timer));
|
|
272
|
+
});
|
|
273
|
+
onMount(() => {
|
|
274
|
+
const refresh = () => {
|
|
275
|
+
if (document.visibilityState === "visible") checkClock();
|
|
276
|
+
};
|
|
277
|
+
document.addEventListener("visibilitychange", refresh);
|
|
278
|
+
onCleanup(() => document.removeEventListener("visibilitychange", refresh));
|
|
279
|
+
});
|
|
251
280
|
let calendar;
|
|
252
281
|
// Days that belong to the visible month; the roving tabindex must land on one
|
|
253
282
|
// of them or the grid becomes unreachable by keyboard after month navigation.
|
|
254
283
|
const monthDayKeys = createMemo(() => dayRows().flat().filter(day => !day.outside).map(day => day.key));
|
|
255
284
|
// Remembers where arrow-key navigation left off so Tab returns to that day.
|
|
256
285
|
const [focusedKey, setFocusedKey] = createSignal();
|
|
257
|
-
const defaultFocus = createMemo(() => resolveFocusDay(monthDayKeys(), focusedKey() || props.focusDate?.() || props.selected?.() ||
|
|
286
|
+
const defaultFocus = createMemo(() => resolveFocusDay(monthDayKeys(), focusedKey() || props.focusDate?.() || props.selected?.() || todayKey()));
|
|
258
287
|
const moveMonth = delta => props.setVisibleMonth(dates.addMonths(props.visibleMonth(), delta, context()));
|
|
259
288
|
const moveYear = delta => props.setVisibleMonth(monthDate(month().year + delta, month().month, context()));
|
|
260
289
|
const previousLabel = () => view() === "days" ? messages().previousMonth : messages().previousYear;
|
|
@@ -332,7 +361,8 @@ function DatePickerPanel(props) {
|
|
|
332
361
|
};
|
|
333
362
|
const active = () => selected() || isRangeEdge(cell.key, range());
|
|
334
363
|
const focusable = () => cell.key === defaultFocus();
|
|
335
|
-
|
|
364
|
+
const today = () => cell.key === todayKey();
|
|
365
|
+
return _$ssr(_tmpl$16, _$ssrAttribute("data-date-day", _$escape(cell.key, true), false) + _$ssrAttribute("data-date-focus", focusable() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-outside", cell.outside ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-in-range", inRange(cell.key, range()) && !active() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-today", today() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("aria-current", today() ? "date" : _$escape(undefined, true), false) + _$ssrAttribute("aria-label", today() ? _$escape(todayLabel(cell.label), true) : _$escape(cell.label, true), false) + _$ssrAttribute("aria-selected", _$escape(active(), true), false) + _$ssrAttribute("tabindex", focusable() ? 0 : -1, false), _$escape(cell.number));
|
|
336
366
|
}
|
|
337
367
|
})))
|
|
338
368
|
})))];
|