@remix-run/ui 0.0.0 → 0.1.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/LICENSE +21 -0
- package/README.md +195 -2
- package/dist/animation/animate-layout-mixin.d.ts +12 -0
- package/dist/animation/animate-layout-mixin.js +214 -0
- package/dist/animation/animate-layout-mixin.js.map +1 -0
- package/dist/animation/animate-mixins.d.ts +29 -0
- package/dist/animation/animate-mixins.js +235 -0
- package/dist/animation/animate-mixins.js.map +1 -0
- package/dist/animation/index.d.ts +6 -0
- package/dist/animation/index.js +5 -0
- package/dist/animation/index.js.map +1 -0
- package/dist/animation/spring.d.ts +75 -0
- package/dist/animation/spring.js +183 -0
- package/dist/animation/spring.js.map +1 -0
- package/dist/animation/tween.d.ts +70 -0
- package/dist/animation/tween.js +93 -0
- package/dist/animation/tween.js.map +1 -0
- package/dist/components/accordion/accordion.d.ts +92 -0
- package/dist/components/accordion/accordion.js +337 -0
- package/dist/components/accordion/accordion.js.map +1 -0
- package/dist/components/anchor/anchor.d.ts +13 -0
- package/dist/components/anchor/anchor.js +558 -0
- package/dist/components/anchor/anchor.js.map +1 -0
- package/dist/components/breadcrumbs/breadcrumbs.d.ts +11 -0
- package/dist/components/breadcrumbs/breadcrumbs.js +78 -0
- package/dist/components/breadcrumbs/breadcrumbs.js.map +1 -0
- package/dist/components/button/button.d.ts +23 -0
- package/dist/components/button/button.js +147 -0
- package/dist/components/button/button.js.map +1 -0
- package/dist/components/combobox/combobox.d.ts +101 -0
- package/dist/components/combobox/combobox.js +708 -0
- package/dist/components/combobox/combobox.js.map +1 -0
- package/dist/components/glyph/glyph.d.ts +14 -0
- package/dist/components/glyph/glyph.js +65 -0
- package/dist/components/glyph/glyph.js.map +1 -0
- package/dist/components/listbox/listbox.d.ts +67 -0
- package/dist/components/listbox/listbox.js +340 -0
- package/dist/components/listbox/listbox.js.map +1 -0
- package/dist/components/menu/hover-aim.d.ts +5 -0
- package/dist/components/menu/hover-aim.js +308 -0
- package/dist/components/menu/hover-aim.js.map +1 -0
- package/dist/components/menu/menu.d.ts +164 -0
- package/dist/components/menu/menu.js +1106 -0
- package/dist/components/menu/menu.js.map +1 -0
- package/dist/components/popover/popover.d.ts +35 -0
- package/dist/components/popover/popover.js +138 -0
- package/dist/components/popover/popover.js.map +1 -0
- package/dist/components/select/select.d.ts +67 -0
- package/dist/components/select/select.js +397 -0
- package/dist/components/select/select.js.map +1 -0
- package/dist/components/separator/separator.d.ts +2 -0
- package/dist/components/separator/separator.js +15 -0
- package/dist/components/separator/separator.js.map +1 -0
- package/dist/components/tabs/tabs.d.ts +78 -0
- package/dist/components/tabs/tabs.js +341 -0
- package/dist/components/tabs/tabs.js.map +1 -0
- package/dist/index.d.ts +28 -0
- package/dist/index.js +21 -0
- package/dist/index.js.map +1 -0
- package/dist/interactions/keydown/keydown.d.ts +1 -0
- package/dist/interactions/keydown/keydown.js +8 -0
- package/dist/interactions/keydown/keydown.js.map +1 -0
- package/dist/interactions/outside-click/outside-click-mixin.d.ts +2 -0
- package/dist/interactions/outside-click/outside-click-mixin.js +29 -0
- package/dist/interactions/outside-click/outside-click-mixin.js.map +1 -0
- package/dist/interactions/typeahead/typeahead-mixin.d.ts +8 -0
- package/dist/interactions/typeahead/typeahead-mixin.js +59 -0
- package/dist/interactions/typeahead/typeahead-mixin.js.map +1 -0
- package/dist/jsx-runtime.d.ts +2 -0
- package/dist/jsx-runtime.js +3 -0
- package/dist/jsx-runtime.js.map +1 -0
- package/dist/runtime/client-entries.d.ts +91 -0
- package/dist/runtime/client-entries.js +40 -0
- package/dist/runtime/client-entries.js.map +1 -0
- package/dist/runtime/component.d.ts +223 -0
- package/dist/runtime/component.js +152 -0
- package/dist/runtime/component.js.map +1 -0
- package/dist/runtime/create-element.d.ts +10 -0
- package/dist/runtime/create-element.js +29 -0
- package/dist/runtime/create-element.js.map +1 -0
- package/dist/runtime/diff-dom.d.ts +2 -0
- package/dist/runtime/diff-dom.js +364 -0
- package/dist/runtime/diff-dom.js.map +1 -0
- package/dist/runtime/diff-props.d.ts +9 -0
- package/dist/runtime/diff-props.js +195 -0
- package/dist/runtime/diff-props.js.map +1 -0
- package/dist/runtime/document-state.d.ts +11 -0
- package/dist/runtime/document-state.js +106 -0
- package/dist/runtime/document-state.js.map +1 -0
- package/dist/runtime/dom.d.ts +3189 -0
- package/dist/runtime/dom.js +2 -0
- package/dist/runtime/dom.js.map +1 -0
- package/dist/runtime/error-event.d.ts +20 -0
- package/dist/runtime/error-event.js +19 -0
- package/dist/runtime/error-event.js.map +1 -0
- package/dist/runtime/event-listeners.d.ts +50 -0
- package/dist/runtime/event-listeners.js +31 -0
- package/dist/runtime/event-listeners.js.map +1 -0
- package/dist/runtime/frame.d.ts +119 -0
- package/dist/runtime/frame.js +915 -0
- package/dist/runtime/frame.js.map +1 -0
- package/dist/runtime/invariant.d.ts +23 -0
- package/dist/runtime/invariant.js +33 -0
- package/dist/runtime/invariant.js.map +1 -0
- package/dist/runtime/jsx.d.ts +320 -0
- package/dist/runtime/jsx.js +31 -0
- package/dist/runtime/jsx.js.map +1 -0
- package/dist/runtime/mixins/attrs-mixin.d.ts +9 -0
- package/dist/runtime/mixins/attrs-mixin.js +23 -0
- package/dist/runtime/mixins/attrs-mixin.js.map +1 -0
- package/dist/runtime/mixins/link-mixin.d.ts +17 -0
- package/dist/runtime/mixins/link-mixin.js +101 -0
- package/dist/runtime/mixins/link-mixin.js.map +1 -0
- package/dist/runtime/mixins/mixin.d.ts +145 -0
- package/dist/runtime/mixins/mixin.js +570 -0
- package/dist/runtime/mixins/mixin.js.map +1 -0
- package/dist/runtime/mixins/on-mixin.d.ts +16 -0
- package/dist/runtime/mixins/on-mixin.js +49 -0
- package/dist/runtime/mixins/on-mixin.js.map +1 -0
- package/dist/runtime/mixins/ref-mixin.d.ts +9 -0
- package/dist/runtime/mixins/ref-mixin.js +21 -0
- package/dist/runtime/mixins/ref-mixin.js.map +1 -0
- package/dist/runtime/navigation.d.ts +22 -0
- package/dist/runtime/navigation.js +102 -0
- package/dist/runtime/navigation.js.map +1 -0
- package/dist/runtime/reconcile.d.ts +11 -0
- package/dist/runtime/reconcile.js +1240 -0
- package/dist/runtime/reconcile.js.map +1 -0
- package/dist/runtime/render.d.ts +54 -0
- package/dist/runtime/render.js +50 -0
- package/dist/runtime/render.js.map +1 -0
- package/dist/runtime/run.d.ts +45 -0
- package/dist/runtime/run.js +68 -0
- package/dist/runtime/run.js.map +1 -0
- package/dist/runtime/scheduler.d.ts +30 -0
- package/dist/runtime/scheduler.js +185 -0
- package/dist/runtime/scheduler.js.map +1 -0
- package/dist/runtime/svg-attributes.d.ts +5 -0
- package/dist/runtime/svg-attributes.js +124 -0
- package/dist/runtime/svg-attributes.js.map +1 -0
- package/dist/runtime/to-vnode.d.ts +3 -0
- package/dist/runtime/to-vnode.js +43 -0
- package/dist/runtime/to-vnode.js.map +1 -0
- package/dist/runtime/typed-event-target.d.ts +50 -0
- package/dist/runtime/typed-event-target.js +6 -0
- package/dist/runtime/typed-event-target.js.map +1 -0
- package/dist/runtime/vdom.d.ts +55 -0
- package/dist/runtime/vdom.js +198 -0
- package/dist/runtime/vdom.js.map +1 -0
- package/dist/runtime/vnode.d.ts +79 -0
- package/dist/runtime/vnode.js +38 -0
- package/dist/runtime/vnode.js.map +1 -0
- package/dist/server/stream.d.ts +57 -0
- package/dist/server/stream.js +1007 -0
- package/dist/server/stream.js.map +1 -0
- package/dist/style/css-mixin.d.ts +8 -0
- package/dist/style/css-mixin.js +54 -0
- package/dist/style/css-mixin.js.map +1 -0
- package/dist/style/index.d.ts +5 -0
- package/dist/style/index.js +4 -0
- package/dist/style/index.js.map +1 -0
- package/dist/style/style.d.ts +24 -0
- package/dist/style/style.js +269 -0
- package/dist/style/style.js.map +1 -0
- package/dist/style/stylesheet.d.ts +11 -0
- package/dist/style/stylesheet.js +174 -0
- package/dist/style/stylesheet.js.map +1 -0
- package/dist/test.d.ts +2 -0
- package/dist/test.js +2 -0
- package/dist/test.js.map +1 -0
- package/dist/theme/contract.d.ts +259 -0
- package/dist/theme/contract.js +131 -0
- package/dist/theme/contract.js.map +1 -0
- package/dist/theme/glyph-contract.d.ts +13 -0
- package/dist/theme/glyph-contract.js +34 -0
- package/dist/theme/glyph-contract.js.map +1 -0
- package/dist/theme/presets/rmx-01/glyphs.d.ts +2 -0
- package/dist/theme/presets/rmx-01/glyphs.js +252 -0
- package/dist/theme/presets/rmx-01/glyphs.js.map +1 -0
- package/dist/theme/presets/rmx-01/index.d.ts +2 -0
- package/dist/theme/presets/rmx-01/index.js +119 -0
- package/dist/theme/presets/rmx-01/index.js.map +1 -0
- package/dist/theme/runtime.d.ts +2 -0
- package/dist/theme/runtime.js +81 -0
- package/dist/theme/runtime.js.map +1 -0
- package/dist/theme/theme.d.ts +6 -0
- package/dist/theme/theme.js +5 -0
- package/dist/theme/theme.js.map +1 -0
- package/dist/utils/flash-attribute.d.ts +1 -0
- package/dist/utils/flash-attribute.js +11 -0
- package/dist/utils/flash-attribute.js.map +1 -0
- package/dist/utils/scroll-lock.d.ts +3 -0
- package/dist/utils/scroll-lock.js +69 -0
- package/dist/utils/scroll-lock.js.map +1 -0
- package/dist/utils/wait-for-css-transition.d.ts +1 -0
- package/dist/utils/wait-for-css-transition.js +58 -0
- package/dist/utils/wait-for-css-transition.js.map +1 -0
- package/dist/utils/wait.d.ts +1 -0
- package/dist/utils/wait.js +6 -0
- package/dist/utils/wait.js.map +1 -0
- package/package.json +125 -5
- package/src/animation/animate-layout-mixin.ts +266 -0
- package/src/animation/animate-mixins.ts +292 -0
- package/src/animation/index.ts +6 -0
- package/src/animation/spring.ts +299 -0
- package/src/animation/tween.ts +134 -0
- package/src/components/accordion/accordion.tsx +565 -0
- package/src/components/anchor/anchor.ts +904 -0
- package/src/components/breadcrumbs/breadcrumbs.tsx +124 -0
- package/src/components/button/README.md +44 -0
- package/src/components/button/button.tsx +188 -0
- package/src/components/combobox/README.md +145 -0
- package/src/components/combobox/combobox.tsx +1014 -0
- package/src/components/glyph/glyph.tsx +110 -0
- package/src/components/listbox/listbox.ts +447 -0
- package/src/components/menu/hover-aim.ts +428 -0
- package/src/components/menu/menu.tsx +1547 -0
- package/src/components/popover/README.md +122 -0
- package/src/components/popover/popover.ts +201 -0
- package/src/components/select/select.tsx +585 -0
- package/src/components/separator/separator.ts +19 -0
- package/src/components/tabs/README.md +105 -0
- package/src/components/tabs/tabs.tsx +499 -0
- package/src/index.ts +72 -0
- package/src/interactions/keydown/keydown.ts +14 -0
- package/src/interactions/outside-click/outside-click-mixin.ts +55 -0
- package/src/interactions/typeahead/typeahead-mixin.ts +89 -0
- package/src/jsx-runtime.ts +2 -0
- package/src/runtime/client-entries.ts +137 -0
- package/src/runtime/component.ts +402 -0
- package/src/runtime/create-element.ts +38 -0
- package/src/runtime/diff-dom.ts +404 -0
- package/src/runtime/diff-props.ts +209 -0
- package/src/runtime/document-state.ts +130 -0
- package/src/runtime/dom.ts +3971 -0
- package/src/runtime/error-event.ts +26 -0
- package/src/runtime/event-listeners.ts +171 -0
- package/src/runtime/frame.ts +1211 -0
- package/src/runtime/invariant.ts +31 -0
- package/src/runtime/jsx.ts +398 -0
- package/src/runtime/mixins/attrs-mixin.ts +35 -0
- package/src/runtime/mixins/link-mixin.ts +131 -0
- package/src/runtime/mixins/mixin.ts +908 -0
- package/src/runtime/mixins/on-mixin.ts +89 -0
- package/src/runtime/mixins/ref-mixin.ts +32 -0
- package/src/runtime/navigation.ts +136 -0
- package/src/runtime/reconcile.ts +1722 -0
- package/src/runtime/render.ts +101 -0
- package/src/runtime/run.ts +100 -0
- package/src/runtime/scheduler.ts +262 -0
- package/src/runtime/svg-attributes.ts +133 -0
- package/src/runtime/to-vnode.ts +50 -0
- package/src/runtime/typed-event-target.ts +67 -0
- package/src/runtime/vdom.ts +295 -0
- package/src/runtime/vnode.ts +137 -0
- package/src/server/stream.ts +1342 -0
- package/src/style/css-mixin.ts +82 -0
- package/src/style/index.ts +10 -0
- package/src/style/style.ts +312 -0
- package/src/style/stylesheet.ts +209 -0
- package/src/test/setup.ts +7 -0
- package/src/test/utils.ts +45 -0
- package/src/test.ts +2 -0
- package/src/theme/contract.ts +183 -0
- package/src/theme/glyph-contract.ts +57 -0
- package/src/theme/presets/rmx-01/glyphs.tsx +308 -0
- package/src/theme/presets/rmx-01/index.ts +121 -0
- package/src/theme/runtime.ts +116 -0
- package/src/theme/theme.ts +15 -0
- package/src/utils/flash-attribute.ts +11 -0
- package/src/utils/scroll-lock.ts +97 -0
- package/src/utils/wait-for-css-transition.ts +66 -0
- package/src/utils/wait.ts +5 -0
|
@@ -0,0 +1,341 @@
|
|
|
1
|
+
import { jsx as _jsx } from "@remix-run/ui/jsx-runtime";
|
|
2
|
+
// @jsxRuntime classic
|
|
3
|
+
// @jsx createElement
|
|
4
|
+
import { attrs, css, createElement, createMixin, on, } from '@remix-run/ui';
|
|
5
|
+
import * as button from "../button/button.js";
|
|
6
|
+
import { theme } from "../../theme/theme.js";
|
|
7
|
+
const TABS_CHANGE_EVENT = 'rmx:tabs-change';
|
|
8
|
+
const tabsListCss = css({
|
|
9
|
+
display: 'inline-flex',
|
|
10
|
+
alignItems: 'center',
|
|
11
|
+
gap: theme.space.xs,
|
|
12
|
+
minWidth: 0,
|
|
13
|
+
padding: theme.space.xs,
|
|
14
|
+
border: `1px solid ${theme.colors.border.subtle}`,
|
|
15
|
+
borderRadius: theme.radius.xl,
|
|
16
|
+
backgroundColor: theme.surface.lvl2,
|
|
17
|
+
});
|
|
18
|
+
const tabsTriggerCss = css({
|
|
19
|
+
justifyContent: 'flex-start',
|
|
20
|
+
minHeight: theme.control.height.md,
|
|
21
|
+
paddingInline: theme.space.md,
|
|
22
|
+
border: '1px solid transparent',
|
|
23
|
+
borderRadius: theme.radius.md,
|
|
24
|
+
backgroundColor: 'transparent',
|
|
25
|
+
color: theme.colors.text.secondary,
|
|
26
|
+
fontSize: theme.fontSize.md,
|
|
27
|
+
'&:hover:not(:disabled):not([aria-disabled="true"])': {
|
|
28
|
+
color: theme.colors.text.primary,
|
|
29
|
+
},
|
|
30
|
+
'&:focus-visible': {
|
|
31
|
+
outline: `2px solid ${theme.colors.focus.ring}`,
|
|
32
|
+
outlineOffset: '2px',
|
|
33
|
+
color: theme.colors.text.primary,
|
|
34
|
+
},
|
|
35
|
+
'&[aria-selected="true"], &[aria-selected="true"]:hover, &[aria-selected="true"]:focus-visible': {
|
|
36
|
+
backgroundColor: theme.surface.lvl0,
|
|
37
|
+
borderColor: theme.colors.border.subtle,
|
|
38
|
+
boxShadow: theme.shadow.xs,
|
|
39
|
+
color: theme.colors.text.primary,
|
|
40
|
+
},
|
|
41
|
+
'&:disabled, &[aria-disabled="true"]': {
|
|
42
|
+
opacity: 0.55,
|
|
43
|
+
},
|
|
44
|
+
});
|
|
45
|
+
export const listStyle = tabsListCss;
|
|
46
|
+
export const triggerStyle = tabsTriggerCss;
|
|
47
|
+
const panelVisibilityUtility = css({
|
|
48
|
+
'&[hidden]': {
|
|
49
|
+
display: 'none',
|
|
50
|
+
},
|
|
51
|
+
});
|
|
52
|
+
export class TabsChangeEvent extends Event {
|
|
53
|
+
previousValue;
|
|
54
|
+
value;
|
|
55
|
+
constructor(value, previousValue) {
|
|
56
|
+
super(TABS_CHANGE_EVENT, { bubbles: true });
|
|
57
|
+
this.value = value;
|
|
58
|
+
this.previousValue = previousValue;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
function getTabsContext(handle) {
|
|
62
|
+
return handle.context.get(TabsProvider);
|
|
63
|
+
}
|
|
64
|
+
function toIdFragment(value) {
|
|
65
|
+
let fragment = value.replace(/[^a-zA-Z0-9_-]+/g, '-').replace(/^-+|-+$/g, '');
|
|
66
|
+
return fragment || 'tab';
|
|
67
|
+
}
|
|
68
|
+
function TabsProvider(handle) {
|
|
69
|
+
let registeredTabs = [];
|
|
70
|
+
let hasInitialized = false;
|
|
71
|
+
let uncontrolledValue = null;
|
|
72
|
+
function getValue() {
|
|
73
|
+
return handle.props.value !== undefined ? handle.props.value : uncontrolledValue;
|
|
74
|
+
}
|
|
75
|
+
function getOrientation() {
|
|
76
|
+
return handle.props.orientation ?? 'horizontal';
|
|
77
|
+
}
|
|
78
|
+
function isActiveTab(tab) {
|
|
79
|
+
return !!tab && !tab.disabled && !!tab.getNode()?.isConnected;
|
|
80
|
+
}
|
|
81
|
+
function getTab(value) {
|
|
82
|
+
if (value == null) {
|
|
83
|
+
return undefined;
|
|
84
|
+
}
|
|
85
|
+
return registeredTabs.find((tab) => tab.value === value);
|
|
86
|
+
}
|
|
87
|
+
function getEnabledTabs() {
|
|
88
|
+
return registeredTabs.filter(isActiveTab);
|
|
89
|
+
}
|
|
90
|
+
function getFocusableValue() {
|
|
91
|
+
let currentValue = getValue();
|
|
92
|
+
let currentTab = getTab(currentValue);
|
|
93
|
+
if (isActiveTab(currentTab)) {
|
|
94
|
+
return currentValue;
|
|
95
|
+
}
|
|
96
|
+
return getEnabledTabs()[0]?.value ?? null;
|
|
97
|
+
}
|
|
98
|
+
function getTargetTab(fromValue, direction) {
|
|
99
|
+
let enabledTabs = getEnabledTabs();
|
|
100
|
+
if (enabledTabs.length === 0) {
|
|
101
|
+
return undefined;
|
|
102
|
+
}
|
|
103
|
+
let currentIndex = enabledTabs.findIndex((tab) => tab.value === fromValue);
|
|
104
|
+
let targetIndex = 0;
|
|
105
|
+
switch (direction) {
|
|
106
|
+
case 'first':
|
|
107
|
+
targetIndex = 0;
|
|
108
|
+
break;
|
|
109
|
+
case 'last':
|
|
110
|
+
targetIndex = enabledTabs.length - 1;
|
|
111
|
+
break;
|
|
112
|
+
case 'next':
|
|
113
|
+
targetIndex =
|
|
114
|
+
currentIndex === -1 || currentIndex === enabledTabs.length - 1 ? 0 : currentIndex + 1;
|
|
115
|
+
break;
|
|
116
|
+
case 'previous':
|
|
117
|
+
targetIndex = currentIndex <= 0 ? enabledTabs.length - 1 : currentIndex - 1;
|
|
118
|
+
break;
|
|
119
|
+
}
|
|
120
|
+
return enabledTabs[targetIndex];
|
|
121
|
+
}
|
|
122
|
+
function dispatchChange(value, previousValue) {
|
|
123
|
+
getTab(value)?.getNode()?.dispatchEvent(new TabsChangeEvent(value, previousValue));
|
|
124
|
+
}
|
|
125
|
+
function select(value) {
|
|
126
|
+
let nextTab = getTab(value);
|
|
127
|
+
if (!isActiveTab(nextTab)) {
|
|
128
|
+
return;
|
|
129
|
+
}
|
|
130
|
+
let previousValue = getValue();
|
|
131
|
+
if (previousValue === value) {
|
|
132
|
+
return;
|
|
133
|
+
}
|
|
134
|
+
if (handle.props.value === undefined) {
|
|
135
|
+
uncontrolledValue = value;
|
|
136
|
+
void handle.update();
|
|
137
|
+
}
|
|
138
|
+
handle.props.onValueChange?.(value);
|
|
139
|
+
dispatchChange(value, previousValue ?? null);
|
|
140
|
+
}
|
|
141
|
+
let tabsRef = {
|
|
142
|
+
get selectedValue() {
|
|
143
|
+
return getValue();
|
|
144
|
+
},
|
|
145
|
+
focus(value = getFocusableValue() ?? undefined) {
|
|
146
|
+
getTab(value)?.getNode()?.focus();
|
|
147
|
+
},
|
|
148
|
+
focusFirst() {
|
|
149
|
+
getTargetTab(getFocusableValue() ?? '', 'first')
|
|
150
|
+
?.getNode()
|
|
151
|
+
?.focus();
|
|
152
|
+
},
|
|
153
|
+
focusLast() {
|
|
154
|
+
getTargetTab(getFocusableValue() ?? '', 'last')
|
|
155
|
+
?.getNode()
|
|
156
|
+
?.focus();
|
|
157
|
+
},
|
|
158
|
+
select,
|
|
159
|
+
};
|
|
160
|
+
handle.context.set({
|
|
161
|
+
get focusableValue() {
|
|
162
|
+
return getFocusableValue();
|
|
163
|
+
},
|
|
164
|
+
get orientation() {
|
|
165
|
+
return getOrientation();
|
|
166
|
+
},
|
|
167
|
+
get value() {
|
|
168
|
+
return getValue();
|
|
169
|
+
},
|
|
170
|
+
getPanelId(value) {
|
|
171
|
+
return `${handle.id}-panel-${toIdFragment(value)}`;
|
|
172
|
+
},
|
|
173
|
+
getTriggerId(value) {
|
|
174
|
+
return `${handle.id}-trigger-${toIdFragment(value)}`;
|
|
175
|
+
},
|
|
176
|
+
move(fromValue, direction) {
|
|
177
|
+
let target = getTargetTab(fromValue, direction);
|
|
178
|
+
if (!target) {
|
|
179
|
+
return;
|
|
180
|
+
}
|
|
181
|
+
target.getNode()?.focus();
|
|
182
|
+
select(target.value);
|
|
183
|
+
},
|
|
184
|
+
registerTab(tab) {
|
|
185
|
+
registeredTabs.push(tab);
|
|
186
|
+
},
|
|
187
|
+
select,
|
|
188
|
+
});
|
|
189
|
+
return () => {
|
|
190
|
+
registeredTabs = [];
|
|
191
|
+
if (!hasInitialized) {
|
|
192
|
+
uncontrolledValue = handle.props.defaultValue ?? null;
|
|
193
|
+
hasInitialized = true;
|
|
194
|
+
}
|
|
195
|
+
handle.queueTask(() => {
|
|
196
|
+
handle.props.ref?.(tabsRef);
|
|
197
|
+
if (handle.props.value !== undefined) {
|
|
198
|
+
return;
|
|
199
|
+
}
|
|
200
|
+
let nextValue = getFocusableValue();
|
|
201
|
+
if (nextValue === uncontrolledValue) {
|
|
202
|
+
return;
|
|
203
|
+
}
|
|
204
|
+
uncontrolledValue = nextValue;
|
|
205
|
+
void handle.update();
|
|
206
|
+
});
|
|
207
|
+
return handle.props.children;
|
|
208
|
+
};
|
|
209
|
+
}
|
|
210
|
+
const listMixin = createMixin((handle) => {
|
|
211
|
+
let context = getTabsContext(handle);
|
|
212
|
+
return () => attrs({
|
|
213
|
+
role: 'tablist',
|
|
214
|
+
'aria-orientation': context.orientation === 'vertical' ? 'vertical' : undefined,
|
|
215
|
+
'data-orientation': context.orientation,
|
|
216
|
+
});
|
|
217
|
+
});
|
|
218
|
+
const triggerMixin = createMixin((handle) => {
|
|
219
|
+
let triggerRef = null;
|
|
220
|
+
let context = getTabsContext(handle);
|
|
221
|
+
handle.queueTask((node) => {
|
|
222
|
+
triggerRef = node;
|
|
223
|
+
});
|
|
224
|
+
return (options, props) => {
|
|
225
|
+
let disabled = options.disabled === true || props.disabled === true;
|
|
226
|
+
context.registerTab({
|
|
227
|
+
disabled,
|
|
228
|
+
getNode() {
|
|
229
|
+
return triggerRef;
|
|
230
|
+
},
|
|
231
|
+
value: options.value,
|
|
232
|
+
});
|
|
233
|
+
return [
|
|
234
|
+
attrs({
|
|
235
|
+
id: context.getTriggerId(options.value),
|
|
236
|
+
role: 'tab',
|
|
237
|
+
tabIndex: !disabled && context.focusableValue === options.value ? 0 : -1,
|
|
238
|
+
'aria-controls': context.getPanelId(options.value),
|
|
239
|
+
'aria-disabled': disabled ? 'true' : undefined,
|
|
240
|
+
'aria-selected': context.value === options.value ? 'true' : 'false',
|
|
241
|
+
'data-orientation': context.orientation,
|
|
242
|
+
'data-selected': context.value === options.value ? 'true' : 'false',
|
|
243
|
+
}),
|
|
244
|
+
!disabled && [
|
|
245
|
+
on('click', () => {
|
|
246
|
+
context.select(options.value);
|
|
247
|
+
}),
|
|
248
|
+
on('keydown', (event) => {
|
|
249
|
+
switch (event.key) {
|
|
250
|
+
case 'ArrowRight':
|
|
251
|
+
if (context.orientation !== 'horizontal') {
|
|
252
|
+
return;
|
|
253
|
+
}
|
|
254
|
+
event.preventDefault();
|
|
255
|
+
context.move(options.value, 'next');
|
|
256
|
+
break;
|
|
257
|
+
case 'ArrowLeft':
|
|
258
|
+
if (context.orientation !== 'horizontal') {
|
|
259
|
+
return;
|
|
260
|
+
}
|
|
261
|
+
event.preventDefault();
|
|
262
|
+
context.move(options.value, 'previous');
|
|
263
|
+
break;
|
|
264
|
+
case 'ArrowDown':
|
|
265
|
+
if (context.orientation !== 'vertical') {
|
|
266
|
+
return;
|
|
267
|
+
}
|
|
268
|
+
event.preventDefault();
|
|
269
|
+
context.move(options.value, 'next');
|
|
270
|
+
break;
|
|
271
|
+
case 'ArrowUp':
|
|
272
|
+
if (context.orientation !== 'vertical') {
|
|
273
|
+
return;
|
|
274
|
+
}
|
|
275
|
+
event.preventDefault();
|
|
276
|
+
context.move(options.value, 'previous');
|
|
277
|
+
break;
|
|
278
|
+
case 'Home':
|
|
279
|
+
event.preventDefault();
|
|
280
|
+
context.move(options.value, 'first');
|
|
281
|
+
break;
|
|
282
|
+
case 'End':
|
|
283
|
+
event.preventDefault();
|
|
284
|
+
context.move(options.value, 'last');
|
|
285
|
+
break;
|
|
286
|
+
}
|
|
287
|
+
}),
|
|
288
|
+
],
|
|
289
|
+
];
|
|
290
|
+
};
|
|
291
|
+
});
|
|
292
|
+
const panelMixin = createMixin((handle) => {
|
|
293
|
+
let context = getTabsContext(handle);
|
|
294
|
+
return (options) => {
|
|
295
|
+
let isSelected = context.value === options.value;
|
|
296
|
+
return [
|
|
297
|
+
attrs({
|
|
298
|
+
id: context.getPanelId(options.value),
|
|
299
|
+
role: 'tabpanel',
|
|
300
|
+
hidden: isSelected ? undefined : true,
|
|
301
|
+
'aria-labelledby': context.getTriggerId(options.value),
|
|
302
|
+
'data-orientation': context.orientation,
|
|
303
|
+
'data-selected': isSelected ? 'true' : 'false',
|
|
304
|
+
}),
|
|
305
|
+
panelVisibilityUtility,
|
|
306
|
+
];
|
|
307
|
+
};
|
|
308
|
+
});
|
|
309
|
+
export const Context = TabsProvider;
|
|
310
|
+
export const list = listMixin;
|
|
311
|
+
export const panel = panelMixin;
|
|
312
|
+
export const trigger = triggerMixin;
|
|
313
|
+
const tabs = { Context, list, panel, trigger };
|
|
314
|
+
export function onTabsChange(handler, captureBoolean) {
|
|
315
|
+
return on(TABS_CHANGE_EVENT, handler, captureBoolean);
|
|
316
|
+
}
|
|
317
|
+
export function Tabs(handle) {
|
|
318
|
+
return () => {
|
|
319
|
+
let { children, ...contextProps } = handle.props;
|
|
320
|
+
return _jsx(tabs.Context, { ...contextProps, children: children });
|
|
321
|
+
};
|
|
322
|
+
}
|
|
323
|
+
export function TabsList(handle) {
|
|
324
|
+
return () => {
|
|
325
|
+
let { children, mix, ...divProps } = handle.props;
|
|
326
|
+
return (_jsx("div", { ...divProps, mix: [listStyle, tabs.list(), mix], children: children }));
|
|
327
|
+
};
|
|
328
|
+
}
|
|
329
|
+
export function Tab(handle) {
|
|
330
|
+
return () => {
|
|
331
|
+
let { children, disabled, mix, type, value, ...buttonProps } = handle.props;
|
|
332
|
+
return (_jsx("button", { ...buttonProps, disabled: disabled ? true : undefined, mix: [button.baseStyle, triggerStyle, tabs.trigger({ disabled, value }), mix], type: type ?? 'button', children: children }));
|
|
333
|
+
};
|
|
334
|
+
}
|
|
335
|
+
export function TabsPanel(handle) {
|
|
336
|
+
return () => {
|
|
337
|
+
let { children, mix, value, ...divProps } = handle.props;
|
|
338
|
+
return (_jsx("div", { ...divProps, mix: [tabs.panel({ value }), mix], children: children }));
|
|
339
|
+
};
|
|
340
|
+
}
|
|
341
|
+
//# sourceMappingURL=tabs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":"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"}
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
/// <reference types="dom-navigation" preserve="true" />
|
|
2
|
+
export { run } from './runtime/run.ts';
|
|
3
|
+
export type { AppRuntime, AppRuntimeEventMap, RunInit } from './runtime/run.ts';
|
|
4
|
+
export type { ComponentErrorEvent } from './runtime/error-event.ts';
|
|
5
|
+
export { createRoot, createRangeRoot, createScheduler } from './runtime/vdom.ts';
|
|
6
|
+
export type { VirtualRoot, VirtualRootEventMap, VirtualRootOptions, Scheduler, } from './runtime/vdom.ts';
|
|
7
|
+
export { clientEntry } from './runtime/client-entries.ts';
|
|
8
|
+
export type { SerializablePrimitive, SerializableObject, SerializableArray, SerializableValue, SerializableProps, EntryComponent, } from './runtime/client-entries.ts';
|
|
9
|
+
export { Fragment, Frame } from './runtime/component.ts';
|
|
10
|
+
export type { Task, Handle, Context, FrameHandleEventMap, FrameContent, FrameHandle, FrameProps, } from './runtime/component.ts';
|
|
11
|
+
export type { LoadModule, ResolveFrame } from './runtime/frame.ts';
|
|
12
|
+
export { createElement } from './runtime/create-element.ts';
|
|
13
|
+
export type { ElementType, ElementProps, RemixElement, Renderable, RemixNode, Props, } from './runtime/jsx.ts';
|
|
14
|
+
export type { HostProps, LayoutAnimationConfig } from './runtime/dom.ts';
|
|
15
|
+
export { createMixin } from './runtime/mixins/mixin.ts';
|
|
16
|
+
export type { MixinDescriptor, MixinHandle, MixinType, MixInput, MixValue, } from './runtime/mixins/mixin.ts';
|
|
17
|
+
export { TypedEventTarget } from './runtime/typed-event-target.ts';
|
|
18
|
+
export { addEventListeners } from './runtime/event-listeners.ts';
|
|
19
|
+
export { on } from './runtime/mixins/on-mixin.ts';
|
|
20
|
+
export type { Dispatched } from './runtime/mixins/on-mixin.ts';
|
|
21
|
+
export { link } from './runtime/mixins/link-mixin.ts';
|
|
22
|
+
export { ref } from './runtime/mixins/ref-mixin.ts';
|
|
23
|
+
export type { RefCallback } from './runtime/mixins/ref-mixin.ts';
|
|
24
|
+
export { attrs } from './runtime/mixins/attrs-mixin.ts';
|
|
25
|
+
export { css } from './style/css-mixin.ts';
|
|
26
|
+
export type { CSSMixinDescriptor } from './style/css-mixin.ts';
|
|
27
|
+
export { navigate } from './runtime/navigation.ts';
|
|
28
|
+
export type { NavigationOptions } from './runtime/navigation.ts';
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
/// <reference types="dom-navigation" preserve="true" />
|
|
2
|
+
// -- Roots --
|
|
3
|
+
export { run } from "./runtime/run.js";
|
|
4
|
+
export { createRoot, createRangeRoot, createScheduler } from "./runtime/vdom.js";
|
|
5
|
+
// -- Client Entries --
|
|
6
|
+
export { clientEntry } from "./runtime/client-entries.js";
|
|
7
|
+
// -- Components --
|
|
8
|
+
export { Fragment, Frame } from "./runtime/component.js";
|
|
9
|
+
// -- Elements/JSX/Props --
|
|
10
|
+
export { createElement } from "./runtime/create-element.js";
|
|
11
|
+
export { createMixin } from "./runtime/mixins/mixin.js";
|
|
12
|
+
export { TypedEventTarget } from "./runtime/typed-event-target.js";
|
|
13
|
+
export { addEventListeners } from "./runtime/event-listeners.js";
|
|
14
|
+
export { on } from "./runtime/mixins/on-mixin.js";
|
|
15
|
+
export { link } from "./runtime/mixins/link-mixin.js";
|
|
16
|
+
export { ref } from "./runtime/mixins/ref-mixin.js";
|
|
17
|
+
export { attrs } from "./runtime/mixins/attrs-mixin.js";
|
|
18
|
+
export { css } from "./style/css-mixin.js";
|
|
19
|
+
// -- Navigation --
|
|
20
|
+
export { navigate } from "./runtime/navigation.js";
|
|
21
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,wDAAwD;AAExD,cAAc;AACd,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAA;AAItC,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAQhF,uBAAuB;AACvB,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAA;AAUzD,mBAAmB;AACnB,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAA;AAYxD,2BAA2B;AAC3B,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAA;AAU3D,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAA;AAQvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAA;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAA;AAChE,OAAO,EAAE,EAAE,EAAE,MAAM,8BAA8B,CAAA;AAEjD,OAAO,EAAE,IAAI,EAAE,MAAM,gCAAgC,CAAA;AACrD,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAA;AAEnD,OAAO,EAAE,KAAK,EAAE,MAAM,iCAAiC,CAAA;AACvD,OAAO,EAAE,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAG1C,mBAAmB;AACnB,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const onKeyDown: <boundNode extends HTMLElement = HTMLElement>(key: string, handler: (event: KeyboardEvent) => void) => import("@remix-run/ui").MixinDescriptor<boundNode, [key: string, handler: (event: KeyboardEvent) => void], import("@remix-run/ui").ElementProps>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"keydown.js","sourceRoot":"","sources":["../../../src/interactions/keydown/keydown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,EAAE,EAAE,MAAM,eAAe,CAAA;AAE/C,MAAM,CAAC,MAAM,SAAS,GAAG,WAAW,CAIlC,GAAG,EAAE,CAAC,CAAC,GAAG,EAAE,OAAO,EAAE,EAAE,CACrB,EAAE,CAAC,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE;IACtB,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;QACtB,KAAK,CAAC,cAAc,EAAE,CAAA;QACtB,OAAO,CAAC,KAAK,CAAC,CAAA;IAChB,CAAC;AACH,CAAC,CAAC,CACL,CAAA"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
declare const onOutsideClick: <boundNode extends HTMLElement = HTMLElement>(active: boolean, handler: (target: Node | null) => void, isInsideTarget?: ((target: Node) => boolean) | undefined, stopPropagation?: boolean | undefined) => import("@remix-run/ui").MixinDescriptor<boundNode, [active: boolean, handler: (target: Node | null) => void, isInsideTarget?: ((target: Node) => boolean) | undefined, stopPropagation?: boolean | undefined], import("@remix-run/ui").ElementProps>;
|
|
2
|
+
export { onOutsideClick };
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { createMixin } from '@remix-run/ui';
|
|
2
|
+
const onOutsideClick = createMixin((handle) => {
|
|
3
|
+
let active = false;
|
|
4
|
+
let handler = () => { };
|
|
5
|
+
let isInsideTarget = () => false;
|
|
6
|
+
let stopPropagation = true;
|
|
7
|
+
handle.addEventListener('insert', (event) => {
|
|
8
|
+
let node = event.node;
|
|
9
|
+
let doc = node.ownerDocument;
|
|
10
|
+
doc.addEventListener('click', (event) => {
|
|
11
|
+
let target = event.target instanceof Node ? event.target : null;
|
|
12
|
+
if (!active || (target && (node.contains(target) || isInsideTarget(target)))) {
|
|
13
|
+
return;
|
|
14
|
+
}
|
|
15
|
+
if (stopPropagation) {
|
|
16
|
+
event.stopPropagation();
|
|
17
|
+
}
|
|
18
|
+
handler(target);
|
|
19
|
+
}, { capture: true, signal: handle.signal });
|
|
20
|
+
});
|
|
21
|
+
return (nextActive, nextHandler, nextIsInsideTarget = () => false, nextStopPropagation = true) => {
|
|
22
|
+
active = nextActive;
|
|
23
|
+
handler = nextHandler;
|
|
24
|
+
isInsideTarget = nextIsInsideTarget;
|
|
25
|
+
stopPropagation = nextStopPropagation;
|
|
26
|
+
};
|
|
27
|
+
});
|
|
28
|
+
export { onOutsideClick };
|
|
29
|
+
//# sourceMappingURL=outside-click-mixin.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"outside-click-mixin.js","sourceRoot":"","sources":["../../../src/interactions/outside-click/outside-click-mixin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAI3C,MAAM,cAAc,GAAG,WAAW,CAQhC,CAAC,MAAM,EAAE,EAAE;IACX,IAAI,MAAM,GAAG,KAAK,CAAA;IAClB,IAAI,OAAO,GAAkC,GAAG,EAAE,GAAE,CAAC,CAAA;IACrD,IAAI,cAAc,GAAwB,GAAG,EAAE,CAAC,KAAK,CAAA;IACrD,IAAI,eAAe,GAAG,IAAI,CAAA;IAE1B,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;QAC1C,IAAI,IAAI,GAAG,KAAK,CAAC,IAAI,CAAA;QACrB,IAAI,GAAG,GAAG,IAAI,CAAC,aAAa,CAAA;QAE5B,GAAG,CAAC,gBAAgB,CAClB,OAAO,EACP,CAAC,KAAK,EAAE,EAAE;YACR,IAAI,MAAM,GAAG,KAAK,CAAC,MAAM,YAAY,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA;YAE/D,IAAI,CAAC,MAAM,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;gBAC7E,OAAM;YACR,CAAC;YAED,IAAI,eAAe,EAAE,CAAC;gBACpB,KAAK,CAAC,eAAe,EAAE,CAAA;YACzB,CAAC;YAED,OAAO,CAAC,MAAM,CAAC,CAAA;QACjB,CAAC,EACD,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,CACzC,CAAA;IACH,CAAC,CAAC,CAAA;IAEF,OAAO,CACL,UAAU,EACV,WAAW,EACX,kBAAkB,GAAG,GAAG,EAAE,CAAC,KAAK,EAChC,mBAAmB,GAAG,IAAI,EAC1B,EAAE;QACF,MAAM,GAAG,UAAU,CAAA;QACnB,OAAO,GAAG,WAAW,CAAA;QACrB,cAAc,GAAG,kBAAkB,CAAA;QACnC,eAAe,GAAG,mBAAmB,CAAA;IACvC,CAAC,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,OAAO,EAAE,cAAc,EAAE,CAAA"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { type ElementProps } from '@remix-run/ui';
|
|
2
|
+
export type SearchValue = string | string[];
|
|
3
|
+
export declare const hiddenTypeahead: <boundNode extends HTMLElement = HTMLElement>(onTypeahead: (text: string) => void) => import("@remix-run/ui").MixinDescriptor<boundNode, [onTypeahead: (text: string) => void], ElementProps>;
|
|
4
|
+
export declare function itemMatchesSearchText<item>(item: item, text: string, getSearchValues: (item: item) => SearchValue): boolean;
|
|
5
|
+
export declare function matchNextItemBySearchText<item>(text: string, items: item[], options: {
|
|
6
|
+
fromIndex: number;
|
|
7
|
+
getSearchValues: (item: item) => SearchValue;
|
|
8
|
+
}): item | null;
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { createMixin, on } from '@remix-run/ui';
|
|
2
|
+
const HIDDEN_TYPEAHEAD_TIMEOUT = 750;
|
|
3
|
+
export const hiddenTypeahead = createMixin((handle) => {
|
|
4
|
+
let text = '';
|
|
5
|
+
let timeoutId = 0;
|
|
6
|
+
function clearTypeahead() {
|
|
7
|
+
clearTimeout(timeoutId);
|
|
8
|
+
timeoutId = 0;
|
|
9
|
+
text = '';
|
|
10
|
+
}
|
|
11
|
+
function updateTypeahead(nextText, onTypeahead) {
|
|
12
|
+
text = nextText;
|
|
13
|
+
onTypeahead(text);
|
|
14
|
+
}
|
|
15
|
+
handle.addEventListener('remove', clearTypeahead);
|
|
16
|
+
return (onTypeahead) => [
|
|
17
|
+
on('focusout', (event) => {
|
|
18
|
+
if (event.relatedTarget instanceof Node &&
|
|
19
|
+
event.currentTarget.contains(event.relatedTarget)) {
|
|
20
|
+
return;
|
|
21
|
+
}
|
|
22
|
+
clearTypeahead();
|
|
23
|
+
}),
|
|
24
|
+
on('keydown', (event) => {
|
|
25
|
+
if (event.key.length === 1 && !event.ctrlKey && !event.altKey && !event.metaKey) {
|
|
26
|
+
clearTimeout(timeoutId);
|
|
27
|
+
updateTypeahead(text + event.key.toLowerCase(), onTypeahead);
|
|
28
|
+
timeoutId = window.setTimeout(clearTypeahead, HIDDEN_TYPEAHEAD_TIMEOUT);
|
|
29
|
+
}
|
|
30
|
+
else if (event.key === 'Escape') {
|
|
31
|
+
clearTypeahead();
|
|
32
|
+
}
|
|
33
|
+
else if (event.key === 'Backspace' && text.length > 0) {
|
|
34
|
+
clearTimeout(timeoutId);
|
|
35
|
+
updateTypeahead(text.slice(0, -1), onTypeahead);
|
|
36
|
+
timeoutId = window.setTimeout(clearTypeahead, HIDDEN_TYPEAHEAD_TIMEOUT);
|
|
37
|
+
}
|
|
38
|
+
}),
|
|
39
|
+
];
|
|
40
|
+
});
|
|
41
|
+
export function itemMatchesSearchText(item, text, getSearchValues) {
|
|
42
|
+
let values = getSearchValues(item);
|
|
43
|
+
let searchValues = Array.isArray(values) ? values : [values];
|
|
44
|
+
let normalizedText = text.toLowerCase();
|
|
45
|
+
return searchValues.some((value) => value.toLowerCase().startsWith(normalizedText));
|
|
46
|
+
}
|
|
47
|
+
export function matchNextItemBySearchText(text, items, options) {
|
|
48
|
+
if (text === '') {
|
|
49
|
+
return null;
|
|
50
|
+
}
|
|
51
|
+
for (let offset = 1; offset <= items.length; offset++) {
|
|
52
|
+
let item = items[(options.fromIndex + offset + items.length) % items.length];
|
|
53
|
+
if (itemMatchesSearchText(item, text, options.getSearchValues)) {
|
|
54
|
+
return item;
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
return null;
|
|
58
|
+
}
|
|
59
|
+
//# sourceMappingURL=typeahead-mixin.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"typeahead-mixin.js","sourceRoot":"","sources":["../../../src/interactions/typeahead/typeahead-mixin.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"jsx-runtime.js","sourceRoot":"","sources":["../src/jsx-runtime.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAA;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA"}
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
import type { Handle, NoContext, RemixNode, RenderFn } from './component.ts';
|
|
2
|
+
/**
|
|
3
|
+
* Serializable primitive types that can be passed as props to entry components
|
|
4
|
+
*/
|
|
5
|
+
export type SerializablePrimitive = string | number | boolean | null | undefined;
|
|
6
|
+
/**
|
|
7
|
+
* Serializable object types that can be passed as props to entry components
|
|
8
|
+
*/
|
|
9
|
+
export type SerializableObject = {
|
|
10
|
+
[key: string]: SerializableValue;
|
|
11
|
+
};
|
|
12
|
+
/**
|
|
13
|
+
* Serializable array types that can be passed as props to entry components
|
|
14
|
+
*/
|
|
15
|
+
export type SerializableArray = SerializableValue[];
|
|
16
|
+
/**
|
|
17
|
+
* All serializable values that can be passed as props to entry components.
|
|
18
|
+
* This includes primitives, objects, arrays, and Remix Elements.
|
|
19
|
+
*/
|
|
20
|
+
export type SerializableValue = SerializablePrimitive | SerializableObject | SerializableArray | RemixNode;
|
|
21
|
+
/**
|
|
22
|
+
* Constraint that ensures all properties in an object are serializable.
|
|
23
|
+
*/
|
|
24
|
+
export type SerializableProps = {
|
|
25
|
+
[K in string]: SerializableValue;
|
|
26
|
+
};
|
|
27
|
+
/**
|
|
28
|
+
* Metadata added to entry components
|
|
29
|
+
*/
|
|
30
|
+
export type EntryMetadata = {
|
|
31
|
+
$entry: true;
|
|
32
|
+
$entryId: string;
|
|
33
|
+
};
|
|
34
|
+
/**
|
|
35
|
+
* An entry component preserves the exact function type with added metadata
|
|
36
|
+
*/
|
|
37
|
+
export type EntryComponent<props extends SerializableProps = {}, context = NoContext> = ((handle: Handle<props, context>) => RenderFn<props>) & EntryMetadata;
|
|
38
|
+
/**
|
|
39
|
+
* Marks a component as a client entry for client-side hydration.
|
|
40
|
+
*
|
|
41
|
+
* @param entryId Module URL with optional export name (format: "/js/module.js#ExportName") by
|
|
42
|
+
* default, or a custom entry identifier when paired with `resolveClientEntry`
|
|
43
|
+
* @param component Component function that will be hydrated on the client
|
|
44
|
+
* @returns The component augmented with entry metadata
|
|
45
|
+
*
|
|
46
|
+
* @example
|
|
47
|
+
* ```tsx
|
|
48
|
+
* export const Counter = clientEntry(
|
|
49
|
+
* '/js/counter.js#Counter',
|
|
50
|
+
* function Counter(handle: Handle<{ initialCount?: number; label: string }>) {
|
|
51
|
+
* let count = handle.props.initialCount ?? 0
|
|
52
|
+
*
|
|
53
|
+
* return () => (
|
|
54
|
+
* <button
|
|
55
|
+
* type="button"
|
|
56
|
+
* mix={[
|
|
57
|
+
* on('click', () => {
|
|
58
|
+
* count++
|
|
59
|
+
* handle.update()
|
|
60
|
+
* }),
|
|
61
|
+
* ]}
|
|
62
|
+
* >
|
|
63
|
+
* {handle.props.label} {count}
|
|
64
|
+
* </button>
|
|
65
|
+
* )
|
|
66
|
+
* }
|
|
67
|
+
* )
|
|
68
|
+
* ```
|
|
69
|
+
*/
|
|
70
|
+
export declare function clientEntry<props extends SerializableProps = {}, context = NoContext>(entryId: string, component: (handle: Handle<props, context>) => RenderFn): EntryComponent<props, context>;
|
|
71
|
+
export declare function clientEntry<props extends SerializableProps = {}, context = NoContext>(entryId: string, component: (handle: Handle<Record<string, never>, context>) => RenderFn<props>): EntryComponent<props, context>;
|
|
72
|
+
/**
|
|
73
|
+
* Type guard to check if a component is an entry component
|
|
74
|
+
*
|
|
75
|
+
* @param component The component to check
|
|
76
|
+
* @returns True if the component has entry metadata
|
|
77
|
+
*/
|
|
78
|
+
export declare function isEntry(component: unknown): component is EntryComponent;
|
|
79
|
+
/**
|
|
80
|
+
* Logs a client-hydration mismatch to the console.
|
|
81
|
+
*
|
|
82
|
+
* @param msg Message parts to forward to the logger.
|
|
83
|
+
*/
|
|
84
|
+
export declare function logHydrationMismatch(...msg: any[]): void;
|
|
85
|
+
/**
|
|
86
|
+
* Advances a DOM cursor past consecutive comment nodes.
|
|
87
|
+
*
|
|
88
|
+
* @param cursor Starting DOM node.
|
|
89
|
+
* @returns The first non-comment node, or `null` when none remains.
|
|
90
|
+
*/
|
|
91
|
+
export declare function skipComments(cursor: Node | null): Node | null;
|