@slotted/react 0.1.0-beta.3 → 0.1.0-beta.4

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.
Files changed (102) hide show
  1. package/dist/{accordion-D-YuMJzk.js → accordion-lCqrmQ3w.js} +43 -43
  2. package/dist/accordion.js +1 -1
  3. package/dist/calendar-BZ6PP7Ke.js +436 -0
  4. package/dist/calendar.js +1 -1
  5. package/dist/{collapsible-CGo49NNW.js → collapsible-F-K36XbF.js} +17 -17
  6. package/dist/collapsible.js +1 -1
  7. package/dist/{data-grid-BKaGMqIm.js → data-grid-Eb-a4jg3.js} +6 -6
  8. package/dist/data-grid.js +1 -1
  9. package/dist/date-field-Hr-OCU-H.js +290 -0
  10. package/dist/date-field.js +1 -1
  11. package/dist/date-picker-D3-y2Jxw.js +295 -0
  12. package/dist/date-picker.js +1 -1
  13. package/dist/{date-range-picker-CNOAtHwU.js → date-range-picker-y3b82Wmf.js} +2 -2
  14. package/dist/date-range-picker.js +1 -1
  15. package/dist/{datetime-picker-HDVlUhzy.js → datetime-picker-CIRHVLQp.js} +1 -1
  16. package/dist/datetime-picker.js +1 -1
  17. package/dist/{datetime-range-picker-IqOFJtdW.js → datetime-range-picker-DM-1m98z.js} +1 -1
  18. package/dist/datetime-range-picker.js +1 -1
  19. package/dist/{detail-panel-qOJiNuzr.js → detail-panel-CW53lUjp.js} +3 -3
  20. package/dist/detail-panel.js +1 -1
  21. package/dist/docs/calendar.json +7 -0
  22. package/dist/docs/calendar.md +1 -0
  23. package/dist/docs/collapsible.json +1 -1
  24. package/dist/docs/collapsible.md +1 -1
  25. package/dist/docs/date-field.json +8 -1
  26. package/dist/docs/date-field.md +2 -1
  27. package/dist/docs/date-picker.examples.md +29 -0
  28. package/dist/docs/date-picker.json +16 -1
  29. package/dist/docs/date-picker.md +2 -1
  30. package/dist/docs/guidelines/composition.md +10 -0
  31. package/dist/docs/guidelines/index.md +2 -0
  32. package/dist/docs/guidelines/list-pages.md +12 -1
  33. package/dist/docs/page.json +1 -0
  34. package/dist/docs/page.md +1 -0
  35. package/dist/docs/select.json +1 -1
  36. package/dist/docs/select.md +1 -1
  37. package/dist/docs/skills/compose-screen/SKILL.md +7 -0
  38. package/dist/docs/table.json +13 -0
  39. package/dist/docs/table.md +3 -1
  40. package/dist/docs/tabs.json +9 -1
  41. package/dist/docs/tabs.md +3 -1
  42. package/dist/docs/text-field.json +1 -1
  43. package/dist/docs/text-field.md +1 -1
  44. package/dist/{entity-picker-CPDd73JR.js → entity-picker-Dn1T7JCq.js} +1 -1
  45. package/dist/entity-picker.js +1 -1
  46. package/dist/{filter-bar-D_xDcAp2.js → filter-bar-CHyy1o--.js} +3 -3
  47. package/dist/filter-bar.js +1 -1
  48. package/dist/{import-export-center-DpY2DGBZ.js → import-export-center-jF37b909.js} +2 -2
  49. package/dist/import-export-center.js +1 -1
  50. package/dist/index.js +19 -19
  51. package/dist/{notification-center-Sz54IziY.js → notification-center-C1iWWl5Y.js} +1 -1
  52. package/dist/notification-center.js +1 -1
  53. package/dist/{page-kQgLctsA.js → page-IiYXk1sz.js} +32 -32
  54. package/dist/{page-header-CWEBfMGq.js → page-header-Bn4nIGfF.js} +1 -1
  55. package/dist/page-header.js +1 -1
  56. package/dist/page.js +1 -1
  57. package/dist/{select-DOFqPy26.js → select-M7Io4UL9.js} +273 -260
  58. package/dist/select.js +1 -1
  59. package/dist/styles.css +1 -1
  60. package/dist/{table-Cipi2c5X.js → table-U9eJYCuB.js} +167 -165
  61. package/dist/table.js +1 -1
  62. package/dist/tabs-BtHmjlnM.js +348 -0
  63. package/dist/tabs.js +1 -1
  64. package/dist/types/accordion/accordion.d.ts.map +1 -1
  65. package/dist/types/calendar/calendar.d.ts +1 -1
  66. package/dist/types/calendar/calendar.d.ts.map +1 -1
  67. package/dist/types/calendar/calendar.types.d.ts +9 -0
  68. package/dist/types/calendar/calendar.types.d.ts.map +1 -1
  69. package/dist/types/calendar/index.d.ts +1 -1
  70. package/dist/types/calendar/index.d.ts.map +1 -1
  71. package/dist/types/collapsible/collapsible-parts.d.ts.map +1 -1
  72. package/dist/types/date-field/date-field.d.ts +1 -1
  73. package/dist/types/date-field/date-field.d.ts.map +1 -1
  74. package/dist/types/date-field/date-field.types.d.ts +7 -0
  75. package/dist/types/date-field/date-field.types.d.ts.map +1 -1
  76. package/dist/types/date-picker/date-picker.d.ts +5 -1
  77. package/dist/types/date-picker/date-picker.d.ts.map +1 -1
  78. package/dist/types/date-picker/date-picker.types.d.ts +20 -2
  79. package/dist/types/date-picker/date-picker.types.d.ts.map +1 -1
  80. package/dist/types/date-picker/index.d.ts +1 -1
  81. package/dist/types/date-picker/index.d.ts.map +1 -1
  82. package/dist/types/page/page.d.ts.map +1 -1
  83. package/dist/types/select/select-items.d.ts.map +1 -1
  84. package/dist/types/select/select-parts.d.ts.map +1 -1
  85. package/dist/types/select/select.d.ts.map +1 -1
  86. package/dist/types/table/index.d.ts +1 -1
  87. package/dist/types/table/index.d.ts.map +1 -1
  88. package/dist/types/table/table-defaults.d.ts.map +1 -1
  89. package/dist/types/table/table.d.ts +1 -1
  90. package/dist/types/table/table.d.ts.map +1 -1
  91. package/dist/types/table/table.types.d.ts +15 -0
  92. package/dist/types/table/table.types.d.ts.map +1 -1
  93. package/dist/types/tabs/tabs-parts.d.ts.map +1 -1
  94. package/dist/types/tabs/tabs.d.ts +1 -1
  95. package/dist/types/tabs/tabs.d.ts.map +1 -1
  96. package/dist/types/tabs/tabs.types.d.ts +18 -0
  97. package/dist/types/tabs/tabs.types.d.ts.map +1 -1
  98. package/package.json +6 -6
  99. package/dist/calendar-B3mio8iQ.js +0 -387
  100. package/dist/date-field-CYcN6diW.js +0 -279
  101. package/dist/date-picker-4X-_2ltN.js +0 -264
  102. package/dist/tabs-DQ36APY-.js +0 -343
@@ -1,343 +0,0 @@
1
- import { n as e, t } from "./icon-T9Yt4tnm.js";
2
- import { createRemovalFocus as n, createRovingTabindex as r } from "@slotted/core/focus";
3
- import { createControllable as i } from "@slotted/core/state";
4
- import { createContext as a, useCallback as o, useContext as s, useEffect as c, useId as l, useRef as u, useState as d } from "react";
5
- import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
6
- import { NOT_OVERFLOWING as h, createScrollAffordance as g } from "@slotted/core/overflow";
7
- //#region src/tabs/tabs-defaults.tsx
8
- var _ = a({
9
- activation: "automatic",
10
- fit: "auto",
11
- loop: !0,
12
- mount: "active",
13
- orientation: "horizontal",
14
- size: "md",
15
- track: "line",
16
- variant: "line"
17
- });
18
- function v() {
19
- return s(_);
20
- }
21
- function y({ children: e, ...t }) {
22
- let n = v();
23
- return /* @__PURE__ */ p(_.Provider, {
24
- value: {
25
- activation: t.activation ?? n.activation,
26
- fit: t.fit ?? n.fit,
27
- loop: t.loop ?? n.loop,
28
- mount: t.mount ?? n.mount,
29
- orientation: t.orientation ?? n.orientation,
30
- size: t.size ?? n.size,
31
- track: t.track ?? n.track,
32
- variant: t.variant ?? n.variant
33
- },
34
- children: e
35
- });
36
- }
37
- //#endregion
38
- //#region src/tabs/tabs.tsx
39
- var b = "[data-part=\"tab\"]", x = a(void 0);
40
- function S() {
41
- let e = s(x);
42
- if (e === void 0) throw Error("Tab, TabPanel and TabActions must be rendered inside Tabs.");
43
- return e;
44
- }
45
- function C(e) {
46
- return e.replace(/[^\w-]/g, (e) => `-${e.charCodeAt(0).toString(16)}-`);
47
- }
48
- function w(e, t) {
49
- let n = !1;
50
- return {
51
- reason: e,
52
- source: t,
53
- get cancelled() {
54
- return n;
55
- },
56
- cancel() {
57
- n = !0;
58
- }
59
- };
60
- }
61
- function T({ activation: a, children: o, className: s, defaultValue: _, disabled: y, fit: S, loop: T, mount: E, onTabDismiss: D, onValueChange: O, orientation: k, ref: A, render: j, size: M, style: N, track: ee, value: P, variant: te, ...ne }) {
62
- let F = v(), I = l(), [re, ie] = d(_), L = P ?? re, [R, ae] = d(null), [z, B] = d(h), [oe, se] = d("none"), V = a ?? F.activation, ce = S ?? F.fit, H = T ?? F.loop, le = E ?? F.mount, U = k ?? F.orientation, ue = M ?? F.size, de = ee ?? F.track, fe = te ?? F.variant, W = y === !0, G = u(new Set(L === void 0 ? [] : [L]));
63
- L !== void 0 && G.current.add(L);
64
- let K = u(null), q = u(null);
65
- function J() {
66
- return R === null ? [] : [...R.querySelectorAll(b)];
67
- }
68
- function Y(e) {
69
- return e === void 0 ? -1 : J().findIndex((t) => t.getAttribute("data-value") === e);
70
- }
71
- function X(e, t, n) {
72
- if (e === L) return;
73
- let r = !1, a = i({
74
- controlled: P,
75
- initial: L,
76
- onRequest: (e) => {
77
- r = e.cancelled, e.value !== void 0 && O?.(e.value, e);
78
- }
79
- }).request(e, t, n);
80
- if (r) return;
81
- let o = Y(L), s = Y(e);
82
- o !== -1 && s !== -1 && se(s > o ? "forward" : "backward"), G.current.add(e), a && ie(e);
83
- }
84
- function pe(e) {
85
- let t = J().map((e) => e.getAttribute("data-value")).filter((e) => e !== null), n = t.indexOf(e);
86
- if (n !== -1) return t[n + 1] ?? t[n - 1];
87
- }
88
- function me(e, t, n) {
89
- let r = w(t, n);
90
- if (D?.(e, r), r.cancelled || e !== L) return;
91
- let i = pe(e);
92
- i !== void 0 && X(i, "remove", n);
93
- }
94
- let Z = u({
95
- activation: V,
96
- select: X,
97
- value: L
98
- });
99
- c(() => {
100
- Z.current = {
101
- activation: V,
102
- select: X,
103
- value: L
104
- };
105
- }), c(() => {
106
- if (R === null) return;
107
- let e = r(R, {
108
- crossAxis: !1,
109
- itemSelector: b,
110
- loop: H,
111
- onMove: (e, t) => {
112
- if (q.current?.reveal(t), Z.current.activation !== "automatic") return;
113
- let n = t.getAttribute("data-value");
114
- n !== null && Z.current.select(n, "keyboard", void 0);
115
- },
116
- orientation: () => U
117
- });
118
- K.current = e;
119
- let t = n(R, { itemSelector: b }), i = new MutationObserver(() => {
120
- e.refresh(), q.current?.refresh();
121
- });
122
- return i.observe(R, {
123
- childList: !0,
124
- subtree: !0
125
- }), () => {
126
- i.disconnect(), t.destroy(), e.destroy(), K.current = null;
127
- };
128
- }, [
129
- R,
130
- H,
131
- U
132
- ]), c(() => {
133
- if (R === null || U === "vertical") {
134
- B(h);
135
- return;
136
- }
137
- let e = g(R, { onChange: B });
138
- return q.current = e, B(e.state()), () => {
139
- e.destroy(), q.current = null;
140
- };
141
- }, [R, U]), c(() => {
142
- let e = Y(L);
143
- if (e === -1) return;
144
- K.current?.setActive(e);
145
- let t = J()[e];
146
- t !== void 0 && q.current?.reveal(t);
147
- }, [L, R]);
148
- let Q = z.overflowing && U === "horizontal";
149
- c(() => {
150
- if (!Q) return;
151
- let e = J()[Y(Z.current.value)];
152
- e !== void 0 && q.current?.reveal(e);
153
- }, [Q]);
154
- let he = {
155
- activation: V,
156
- attachList: ae,
157
- disabled: W,
158
- dismiss: me,
159
- identify: (e) => ({
160
- panelId: `${I}panel-${C(e)}`,
161
- tabId: `${I}tab-${C(e)}`
162
- }),
163
- mount: le,
164
- orientation: U,
165
- seen: (e) => G.current.has(e),
166
- select: X,
167
- value: L
168
- }, $ = {
169
- ...ne,
170
- children: /* @__PURE__ */ m(f, { children: [o, Q ? /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p("button", {
171
- "aria-hidden": "true",
172
- "data-direction": "start",
173
- "data-part": "scroll",
174
- disabled: z.atStart,
175
- onClick: () => q.current?.page(-1),
176
- tabIndex: -1,
177
- type: "button",
178
- children: /* @__PURE__ */ p(t, {
179
- directional: !0,
180
- children: /* @__PURE__ */ p(e, { name: "chevron-right" })
181
- })
182
- }), /* @__PURE__ */ p("button", {
183
- "aria-hidden": "true",
184
- "data-direction": "end",
185
- "data-part": "scroll",
186
- disabled: z.atEnd,
187
- onClick: () => q.current?.page(1),
188
- tabIndex: -1,
189
- type: "button",
190
- children: /* @__PURE__ */ p(t, {
191
- directional: !0,
192
- children: /* @__PURE__ */ p(e, { name: "chevron-right" })
193
- })
194
- })] }) : null] }),
195
- className: s,
196
- "data-activation-direction": oe,
197
- ...W ? { "data-disabled": "" } : {},
198
- "data-fit": ce,
199
- "data-orientation": U,
200
- ...z.overflowing ? { "data-overflowing": "" } : {},
201
- "data-part": "root",
202
- "data-size": ue,
203
- "data-track": de,
204
- "data-ui": "tabs",
205
- "data-variant": fe,
206
- style: N
207
- };
208
- return /* @__PURE__ */ p(x.Provider, {
209
- value: he,
210
- children: j === void 0 ? /* @__PURE__ */ p("div", {
211
- ...$,
212
- ref: A
213
- }) : j($)
214
- });
215
- }
216
- //#endregion
217
- //#region src/tabs/tabs-parts.tsx
218
- function E(e) {
219
- return e.detail === 0 ? "keyboard" : "pointer";
220
- }
221
- function D({ children: e, ref: t, render: n, ...r }) {
222
- let i = S(), a = o((e) => {
223
- if (i.attachList(e), typeof t == "function") return t(e);
224
- t && (t.current = e);
225
- }, [t, i.attachList]), s = {
226
- tabIndex: -1,
227
- ...r,
228
- ...i.orientation === "vertical" ? { "aria-orientation": "vertical" } : {},
229
- children: e,
230
- "data-part": "list",
231
- role: "tablist"
232
- };
233
- return n === void 0 ? /* @__PURE__ */ p("div", {
234
- ...s,
235
- ref: a
236
- }) : n({
237
- ...s,
238
- ref: a
239
- });
240
- }
241
- function O({ children: n, className: r, controls: i, disabled: a, dismissLabel: o, dismissible: s = !1, end: c, href: l, onClick: u, onKeyDown: d, ref: h, render: g, start: _, style: v, value: y, ...b }) {
242
- let x = S(), { panelId: C, tabId: w } = x.identify(y), T = i ?? C, D = x.value === y, O = x.disabled === !0 || a === !0;
243
- function k(e) {
244
- u?.(e), !e.defaultPrevented && (O || l !== void 0 && (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) || (l !== void 0 && e.preventDefault(), x.select(y, E(e), e)));
245
- }
246
- function A(e) {
247
- d?.(e), !(e.defaultPrevented || e.repeat) && s && !O && e.key === "Delete" && (e.preventDefault(), x.dismiss(y, "keyboard", e));
248
- }
249
- let j = /* @__PURE__ */ m(f, { children: [
250
- _ === void 0 ? null : /* @__PURE__ */ p("span", {
251
- "data-part": "start",
252
- children: _
253
- }),
254
- /* @__PURE__ */ p("span", {
255
- "data-part": "label",
256
- children: n
257
- }),
258
- c === void 0 ? null : /* @__PURE__ */ p("span", {
259
- "data-part": "end",
260
- children: c
261
- })
262
- ] }), M = l === void 0 ? /* @__PURE__ */ p("button", {
263
- ...b,
264
- "aria-controls": T,
265
- "aria-keyshortcuts": s ? "Delete" : void 0,
266
- "aria-selected": D,
267
- "data-part": "tab",
268
- "data-value": y,
269
- disabled: O,
270
- id: w,
271
- onClick: k,
272
- onKeyDown: A,
273
- ref: h,
274
- role: "tab",
275
- tabIndex: D ? 0 : -1,
276
- type: "button",
277
- children: j
278
- }) : /* @__PURE__ */ p("a", {
279
- ...b,
280
- "aria-controls": T,
281
- "aria-disabled": O === !0 || void 0,
282
- "aria-keyshortcuts": s ? "Delete" : void 0,
283
- "aria-selected": D,
284
- "data-part": "tab",
285
- "data-value": y,
286
- href: l,
287
- id: w,
288
- onClick: k,
289
- onKeyDown: A,
290
- ref: h,
291
- role: "tab",
292
- tabIndex: D ? 0 : -1,
293
- children: j
294
- }), N = {
295
- children: /* @__PURE__ */ m(f, { children: [M, s ? /* @__PURE__ */ p("button", {
296
- "aria-label": o,
297
- "data-part": "dismiss",
298
- disabled: O,
299
- onClick: (e) => {
300
- e.stopPropagation(), x.dismiss(y, "pointer", e);
301
- },
302
- tabIndex: -1,
303
- type: "button",
304
- children: /* @__PURE__ */ p(t, { children: /* @__PURE__ */ p(e, { name: "x" }) })
305
- }) : null] }),
306
- className: r,
307
- "data-part": "item",
308
- ...D ? { "data-selected": "" } : {},
309
- role: "presentation",
310
- style: v
311
- };
312
- return g === void 0 ? /* @__PURE__ */ p("div", { ...N }) : g(N);
313
- }
314
- function k({ children: e, ref: t, render: n, value: r, ...i }) {
315
- let a = S(), { panelId: o, tabId: s } = a.identify(r), c = a.value === r, l = c || a.mount === "eager" || a.mount === "lazy" && a.seen(r), u = {
316
- ...i,
317
- "aria-labelledby": s,
318
- children: l ? e : null,
319
- "data-part": "panel",
320
- hidden: !c,
321
- id: o,
322
- role: "tabpanel",
323
- tabIndex: 0
324
- };
325
- return n === void 0 ? /* @__PURE__ */ p("div", {
326
- ...u,
327
- ref: t
328
- }) : n(u);
329
- }
330
- function A({ children: e, ref: t, render: n, ...r }) {
331
- S();
332
- let i = {
333
- ...r,
334
- children: e,
335
- "data-part": "actions"
336
- };
337
- return n === void 0 ? /* @__PURE__ */ p("div", {
338
- ...i,
339
- ref: t
340
- }) : n(i);
341
- }
342
- //#endregion
343
- export { T as a, v as c, k as i, A as n, S as o, D as r, y as s, O as t };