@foldkit/ui 0.126.0 → 0.128.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.
Files changed (82) hide show
  1. package/README.md +2 -2
  2. package/dist/calendar/index.d.ts +17 -23
  3. package/dist/calendar/index.d.ts.map +1 -1
  4. package/dist/calendar/index.js +16 -25
  5. package/dist/calendar/public.d.ts +1 -1
  6. package/dist/calendar/public.d.ts.map +1 -1
  7. package/dist/calendar/public.js +1 -1
  8. package/dist/checkbox/index.d.ts +47 -104
  9. package/dist/checkbox/index.d.ts.map +1 -1
  10. package/dist/checkbox/index.js +48 -87
  11. package/dist/checkbox/public.d.ts +2 -2
  12. package/dist/checkbox/public.d.ts.map +1 -1
  13. package/dist/checkbox/public.js +1 -1
  14. package/dist/combobox/multi.d.ts +19 -30
  15. package/dist/combobox/multi.d.ts.map +1 -1
  16. package/dist/combobox/multi.js +32 -53
  17. package/dist/combobox/public.d.ts +2 -2
  18. package/dist/combobox/public.d.ts.map +1 -1
  19. package/dist/combobox/public.js +1 -1
  20. package/dist/combobox/shared.d.ts +59 -35
  21. package/dist/combobox/shared.d.ts.map +1 -1
  22. package/dist/combobox/shared.js +58 -45
  23. package/dist/combobox/single.d.ts +36 -48
  24. package/dist/combobox/single.d.ts.map +1 -1
  25. package/dist/combobox/single.js +49 -76
  26. package/dist/datePicker/index.d.ts +33 -41
  27. package/dist/datePicker/index.d.ts.map +1 -1
  28. package/dist/datePicker/index.js +31 -40
  29. package/dist/datePicker/public.d.ts +1 -1
  30. package/dist/datePicker/public.d.ts.map +1 -1
  31. package/dist/datePicker/public.js +1 -1
  32. package/dist/dialog/index.d.ts +17 -1
  33. package/dist/dialog/index.d.ts.map +1 -1
  34. package/dist/dialog/index.js +12 -5
  35. package/dist/disclosure/index.d.ts +49 -113
  36. package/dist/disclosure/index.d.ts.map +1 -1
  37. package/dist/disclosure/index.js +35 -92
  38. package/dist/disclosure/public.d.ts +2 -2
  39. package/dist/disclosure/public.d.ts.map +1 -1
  40. package/dist/disclosure/public.js +1 -1
  41. package/dist/listbox/multi.d.ts +7 -21
  42. package/dist/listbox/multi.d.ts.map +1 -1
  43. package/dist/listbox/multi.js +12 -36
  44. package/dist/listbox/public.d.ts +1 -1
  45. package/dist/listbox/public.d.ts.map +1 -1
  46. package/dist/listbox/shared.d.ts +28 -20
  47. package/dist/listbox/shared.d.ts.map +1 -1
  48. package/dist/listbox/shared.js +6 -7
  49. package/dist/listbox/single.d.ts +17 -27
  50. package/dist/listbox/single.d.ts.map +1 -1
  51. package/dist/listbox/single.js +18 -30
  52. package/dist/radioGroup/index.d.ts +57 -142
  53. package/dist/radioGroup/index.d.ts.map +1 -1
  54. package/dist/radioGroup/index.js +44 -119
  55. package/dist/radioGroup/public.d.ts +2 -2
  56. package/dist/radioGroup/public.d.ts.map +1 -1
  57. package/dist/radioGroup/public.js +1 -1
  58. package/dist/slider/index.d.ts +51 -27
  59. package/dist/slider/index.d.ts.map +1 -1
  60. package/dist/slider/index.js +66 -66
  61. package/dist/slider/public.d.ts +1 -1
  62. package/dist/slider/public.d.ts.map +1 -1
  63. package/dist/slider/public.js +1 -1
  64. package/dist/switch/index.d.ts +45 -92
  65. package/dist/switch/index.d.ts.map +1 -1
  66. package/dist/switch/index.js +36 -81
  67. package/dist/switch/public.d.ts +2 -2
  68. package/dist/switch/public.d.ts.map +1 -1
  69. package/dist/switch/public.js +1 -1
  70. package/dist/tabs/index.d.ts +33 -33
  71. package/dist/tabs/index.d.ts.map +1 -1
  72. package/dist/tabs/index.js +36 -49
  73. package/dist/toast/index.d.ts +1 -0
  74. package/dist/toast/index.d.ts.map +1 -1
  75. package/dist/toast/index.js +1 -0
  76. package/dist/toast/public.d.ts +2 -0
  77. package/dist/toast/public.d.ts.map +1 -1
  78. package/dist/toast/public.js +1 -0
  79. package/dist/toast/test.d.ts +41 -0
  80. package/dist/toast/test.d.ts.map +1 -0
  81. package/dist/toast/test.js +36 -0
  82. package/package.json +2 -2
@@ -1,128 +1,64 @@
1
- import { Effect, Option, Schema as S } from 'effect';
2
- import * as Command from 'foldkit/command';
3
- import { type ChildAttribute, type Html } from 'foldkit/html';
4
- import { type Reflect } from 'foldkit/submodel';
5
- /** Schema for the disclosure component's state, tracking its unique ID and open/closed status. */
6
- export declare const Model: S.Struct<{
7
- readonly id: S.String;
8
- readonly isOpen: S.Boolean;
9
- }>;
10
- export type Model = typeof Model.Type;
11
- /** Sent when the disclosure button is clicked. Toggles the open/closed state. */
12
- export declare const Toggled: import("foldkit/schema").CallableTaggedStruct<"Toggled", {}>;
13
- /** Sent to explicitly close the disclosure, regardless of its current state. */
14
- export declare const Closed: import("foldkit/schema").CallableTaggedStruct<"Closed", {}>;
15
- /** Sent when the focus-button command completes after closing. */
16
- export declare const CompletedFocusButton: import("foldkit/schema").CallableTaggedStruct<"CompletedFocusButton", {}>;
17
- /** Union of all messages the disclosure component can produce. */
18
- export declare const Message: S.Union<[
19
- typeof Toggled,
20
- typeof Closed,
21
- typeof CompletedFocusButton
22
- ]>;
23
- export type Toggled = typeof Toggled.Type;
24
- export type Closed = typeof Closed.Type;
25
- export type CompletedFocusButton = typeof CompletedFocusButton.Type;
26
- export type Message = typeof Message.Type;
27
- /** Sent to the parent each time the disclosure toggles. The new open state is available on the next model snapshot; this OutMessage signals only that the transition happened. Consumers typically use this for analytics, lazy content loading, or saving open/closed state to a store. */
28
- export declare const ToggledOpenState: import("foldkit/schema").CallableTaggedStruct<"ToggledOpenState", {
29
- isOpen: S.Boolean;
30
- }>;
31
- export declare const OutMessage: S.Union<readonly [import("foldkit/schema").CallableTaggedStruct<"ToggledOpenState", {
32
- isOpen: S.Boolean;
33
- }>]>;
34
- export type OutMessage = typeof OutMessage.Type;
35
- export type ToggledOpenState = typeof ToggledOpenState.Type;
36
- /** Configuration for creating a disclosure model with `init`. */
37
- export type InitConfig = Readonly<{
38
- id: string;
39
- isOpen?: boolean;
40
- }>;
41
- /** Creates an initial disclosure model from a config. Defaults to closed. */
42
- export declare const init: (config: InitConfig) => Model;
1
+ import { type Attribute, type Html } from 'foldkit/html';
43
2
  /** Returns the bare DOM id of the disclosure toggle button, derived from the
44
3
  * disclosure's base id. Use this to associate an external label with the
45
4
  * button via a native `<label for={Disclosure.buttonId(id)}>` or an
46
5
  * `aria-labelledby` reference. */
47
6
  export declare const buttonId: (id: string) => string;
48
- /** Moves focus to the disclosure's toggle button. */
49
- export declare const FocusButton: Command.CommandDefinitionWithArgs<"FocusButton", {
50
- id: S.String;
51
- }, Effect.Effect<{
52
- readonly _tag: "CompletedFocusButton";
53
- }, never, never>>;
54
- type UpdateReturn = readonly [
55
- Model,
56
- ReadonlyArray<Command.Command<Message>>,
57
- Option.Option<OutMessage>
58
- ];
59
- /** Processes a disclosure message and returns the next model, commands, and optional OutMessage. */
60
- export declare const update: (model: Model, message: Message) => UpdateReturn;
61
- /** Programmatically toggles the disclosure, updating the model and returning
62
- * focus commands plus a `ToggledOpenState` OutMessage. */
63
- export declare const toggle: (model: Model) => UpdateReturn;
64
- /** Programmatically closes the disclosure, updating the model and returning
65
- * focus commands plus a `ToggledOpenState` OutMessage when it was open. */
66
- export declare const close: (model: Model) => UpdateReturn;
67
- /** Reflects an externally-sourced open state onto the model without
68
- * emitting an OutMessage or running the focus command. Use this to mirror
69
- * external truth (restored storage, a deep link) onto the disclosure.
70
- * Contrast with `toggle`/`close`, which represent user or programmatic
71
- * *choices* and emit `ToggledOpenState`. Returns the model directly
72
- * because it produces no commands and no OutMessage. */
73
- export declare const reflectOpenState: Reflect<Model, boolean>;
74
- /** Attribute groups the disclosure component provides to the consumer's
75
- * `toView` callback. The consumer composes the button + panel layout
76
- * themselves using these bundles. */
77
- export type DisclosureAttributes = Readonly<{
78
- button: ReadonlyArray<ChildAttribute>;
79
- panel: ReadonlyArray<ChildAttribute>;
7
+ /** Attribute groups the disclosure provides to the consumer's `toView`
8
+ * callback. The consumer composes the button + panel layout themselves using
9
+ * these bundles. The `button` bundle carries the click and Enter/Space
10
+ * handlers that dispatch the configured `onToggle` Message. */
11
+ export type DisclosureAttributes<Message> = Readonly<{
12
+ button: ReadonlyArray<Attribute<Message>>;
13
+ panel: ReadonlyArray<Attribute<Message>>;
80
14
  /** Wraps panel content in a CSS-grid container that smoothly animates
81
- * height (`grid-template-rows: 0fr → 1fr` with `overflow: hidden`) as
82
- * the disclosure opens and closes. Unlike the bare conditional render,
83
- * the panel stays mounted while collapsed, so the transition has
84
- * something to animate from and to. Spread the `panel` bundle onto the
85
- * element you pass in, and render it unconditionally rather than gating
86
- * on `isOpen`. The collapsed content is marked `aria-hidden`. Mirrors the
87
- * `Ui.Animation` `animateSize` flag. */
15
+ * height (`grid-template-rows: 0fr → 1fr` with `overflow: hidden`) as the
16
+ * disclosure opens and closes. The panel stays mounted while collapsed, so
17
+ * the transition has something to animate from and to. Spread the `panel`
18
+ * bundle onto the element you pass in, and render it unconditionally rather
19
+ * than gating on `isOpen`. The collapsed content is marked `aria-hidden`. */
88
20
  animatePanel: (content: Html) => Html;
89
21
  }>;
90
- /** Per-render view inputs passed to `view` via `h.submodel`'s `viewInputs` field.
22
+ /** Per-render view configuration for the stateless controlled {@link view}.
23
+ * Generic over `Message` (the message `onToggle` dispatches).
91
24
  *
92
- * - `toView`: receives the disclosure's `button` and `panel` attribute
93
- * bundles and returns the composed layout. The consumer reads
94
- * `isOpen` from their parent model when they need to render
95
- * conditionally on it.
96
- * - `isDisabled`: when true, the button is not clickable, gets
97
- * `aria-disabled` and a `data-disabled` attribute. */
98
- export type ViewInputs = Readonly<{
99
- toView: (attributes: DisclosureAttributes) => Html;
25
+ * - `isOpen`: the current open state, read straight from the parent Model.
26
+ * `aria-expanded`, the `data-open` marker, and `animatePanel` derive from
27
+ * it.
28
+ * - `onToggle`: dispatched with the new open state when the user clicks the
29
+ * button or presses Enter/Space. Handle it in the parent's `update` by
30
+ * storing the value.
31
+ * - `toView`: receives the {@link DisclosureAttributes} and lays out the
32
+ * disclosure. */
33
+ export type ViewConfig<Message> = Readonly<{
34
+ id: string;
35
+ isOpen: boolean;
36
+ onToggle: (isOpen: boolean) => Message;
37
+ toView: (attributes: DisclosureAttributes<Message>) => Html;
100
38
  isDisabled?: boolean;
101
39
  ariaLabel?: string;
102
40
  ariaLabelledBy?: string;
103
41
  }>;
104
- /** Renders a headless disclosure component with accessible ARIA
105
- * attributes and keyboard support. The consumer composes the layout
106
- * through the `toView` slot, spreading the published `button` and
107
- * `panel` attribute bundles onto their own elements.
42
+ /** Renders a headless disclosure as a stateless controlled component. The
43
+ * parent owns the open state (`isOpen`) and receives the new state via
44
+ * `onToggle` when the user toggles it. The consumer composes the layout
45
+ * through `toView`, spreading the `button` and `panel` bundles onto their own
46
+ * elements.
108
47
  *
109
- * Designed to be embedded via `h.submodel`. The consumer reacts to
110
- * toggle events by pattern-matching the `ToggledOpenState` OutMessage
111
- * from the third element of `update`'s return tuple. */
112
- export declare const view: import("foldkit/submodel").View<S.Struct.ReadonlySide<{
113
- readonly id: S.String;
114
- readonly isOpen: S.Boolean;
115
- }, "Type">, S.Struct.ReadonlySide<{
116
- readonly _tag: S.tag<"CompletedFocusButton">;
117
- }, "Type"> | S.Struct.ReadonlySide<{
118
- readonly _tag: S.tag<"Closed">;
119
- }, "Type"> | S.Struct.ReadonlySide<{
120
- readonly _tag: S.tag<"Toggled">;
121
- }, "Type">, Readonly<{
122
- toView: (attributes: DisclosureAttributes) => Html;
123
- isDisabled?: boolean;
124
- ariaLabel?: string;
125
- ariaLabelledBy?: string;
126
- }>>;
127
- export {};
48
+ * ```ts
49
+ * // In view:
50
+ * Disclosure.view<Message>({
51
+ * id: 'details',
52
+ * isOpen: model.isDetailsOpen,
53
+ * onToggle: isOpen => ToggledDetails({ isOpen }),
54
+ * toView: ({ button, panel, animatePanel }) => ...,
55
+ * })
56
+ *
57
+ * // In update:
58
+ * ToggledDetails: ({ isOpen }) => [
59
+ * evo(model, { isDetailsOpen: () => isOpen }),
60
+ * [],
61
+ * ],
62
+ * ``` */
63
+ export declare const view: <Message>(config: ViewConfig<Message>) => Html;
128
64
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/disclosure/index.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/disclosure/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,IAAI,EAAQ,MAAM,cAAc,CAAA;AAI9D;;;mCAGmC;AACnC,eAAO,MAAM,QAAQ,GAAI,IAAI,MAAM,KAAG,MAAwB,CAAA;AAM9D;;;gEAGgE;AAChE,MAAM,MAAM,oBAAoB,CAAC,OAAO,IAAI,QAAQ,CAAC;IACnD,MAAM,EAAE,aAAa,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAA;IACzC,KAAK,EAAE,aAAa,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAA;IACxC;;;;;kFAK8E;IAC9E,YAAY,EAAE,CAAC,OAAO,EAAE,IAAI,KAAK,IAAI,CAAA;CACtC,CAAC,CAAA;AAEF;;;;;;;;;;oBAUoB;AACpB,MAAM,MAAM,UAAU,CAAC,OAAO,IAAI,QAAQ,CAAC;IACzC,EAAE,EAAE,MAAM,CAAA;IACV,MAAM,EAAE,OAAO,CAAA;IACf,QAAQ,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAA;IACtC,MAAM,EAAE,CAAC,UAAU,EAAE,oBAAoB,CAAC,OAAO,CAAC,KAAK,IAAI,CAAA;IAC3D,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,CAAC,CAAA;AAEF;;;;;;;;;;;;;;;;;;;;UAoBU;AACV,eAAO,MAAM,IAAI,GAAI,OAAO,EAAE,QAAQ,UAAU,CAAC,OAAO,CAAC,KAAG,IAkF3D,CAAA"}
@@ -1,98 +1,39 @@
1
- import { Effect, Function, Match as M, Option, Predicate, Schema as S, } from 'effect';
2
- import * as Command from 'foldkit/command';
3
- import * as Dom from 'foldkit/dom';
4
- import { childAttributes, html, } from 'foldkit/html';
5
- import { m } from 'foldkit/message';
6
- import { evo } from 'foldkit/struct';
7
- import { defineView } from 'foldkit/submodel';
8
- import { idSelector } from '../internal/selectors.js';
9
- // MODEL
10
- /** Schema for the disclosure component's state, tracking its unique ID and open/closed status. */
11
- export const Model = S.Struct({
12
- id: S.String,
13
- isOpen: S.Boolean,
14
- });
15
- // MESSAGE
16
- /** Sent when the disclosure button is clicked. Toggles the open/closed state. */
17
- export const Toggled = m('Toggled');
18
- /** Sent to explicitly close the disclosure, regardless of its current state. */
19
- export const Closed = m('Closed');
20
- /** Sent when the focus-button command completes after closing. */
21
- export const CompletedFocusButton = m('CompletedFocusButton');
22
- /** Union of all messages the disclosure component can produce. */
23
- export const Message = S.Union([Toggled, Closed, CompletedFocusButton]);
24
- // OUT MESSAGE
25
- /** Sent to the parent each time the disclosure toggles. The new open state is available on the next model snapshot; this OutMessage signals only that the transition happened. Consumers typically use this for analytics, lazy content loading, or saving open/closed state to a store. */
26
- export const ToggledOpenState = m('ToggledOpenState', { isOpen: S.Boolean });
27
- export const OutMessage = S.Union([ToggledOpenState]);
28
- /** Creates an initial disclosure model from a config. Defaults to closed. */
29
- export const init = (config) => ({
30
- id: config.id,
31
- isOpen: config.isOpen ?? false,
32
- });
33
- // UPDATE
1
+ import { Match as M, Option, Predicate } from 'effect';
2
+ import { html } from 'foldkit/html';
3
+ // VIEW
34
4
  /** Returns the bare DOM id of the disclosure toggle button, derived from the
35
5
  * disclosure's base id. Use this to associate an external label with the
36
6
  * button via a native `<label for={Disclosure.buttonId(id)}>` or an
37
7
  * `aria-labelledby` reference. */
38
8
  export const buttonId = (id) => `${id}-button`;
39
- const buttonSelector = (id) => idSelector(buttonId(id));
40
9
  const panelId = (id) => `${id}-panel`;
41
- /** Moves focus to the disclosure's toggle button. */
42
- export const FocusButton = Command.define('FocusButton', { id: S.String }, CompletedFocusButton)(({ id }) => Dom.focus(buttonSelector(id)).pipe(Effect.ignore, Effect.as(CompletedFocusButton())));
43
- const withUpdateReturn = M.withReturnType();
44
- /** Processes a disclosure message and returns the next model, commands, and optional OutMessage. */
45
- export const update = (model, message) => M.value(message).pipe(withUpdateReturn, M.tagsExhaustive({
46
- Toggled: () => {
47
- const nextIsOpen = !model.isOpen;
48
- const maybeFocus = Option.liftPredicate(FocusButton({ id: model.id }), () => model.isOpen);
49
- return [
50
- evo(model, { isOpen: () => nextIsOpen }),
51
- Option.toArray(maybeFocus),
52
- Option.some(ToggledOpenState({ isOpen: nextIsOpen })),
53
- ];
54
- },
55
- Closed: () => {
56
- if (!model.isOpen) {
57
- return [model, [], Option.none()];
58
- }
59
- const maybeFocus = Option.liftPredicate(FocusButton({ id: model.id }), () => model.isOpen);
60
- return [
61
- evo(model, { isOpen: () => false }),
62
- Option.toArray(maybeFocus),
63
- Option.some(ToggledOpenState({ isOpen: false })),
64
- ];
65
- },
66
- CompletedFocusButton: () => [model, [], Option.none()],
67
- }));
68
- /** Programmatically toggles the disclosure, updating the model and returning
69
- * focus commands plus a `ToggledOpenState` OutMessage. */
70
- export const toggle = (model) => update(model, Toggled());
71
- /** Programmatically closes the disclosure, updating the model and returning
72
- * focus commands plus a `ToggledOpenState` OutMessage when it was open. */
73
- export const close = (model) => update(model, Closed());
74
- /** Reflects an externally-sourced open state onto the model without
75
- * emitting an OutMessage or running the focus command. Use this to mirror
76
- * external truth (restored storage, a deep link) onto the disclosure.
77
- * Contrast with `toggle`/`close`, which represent user or programmatic
78
- * *choices* and emit `ToggledOpenState`. Returns the model directly
79
- * because it produces no commands and no OutMessage. */
80
- export const reflectOpenState = Function.dual(2, (model, isOpen) => evo(model, { isOpen: () => isOpen }));
81
- // VIEW
82
10
  const panelSizeTransition = 'grid-template-rows 200ms ease-out';
83
- /** Renders a headless disclosure component with accessible ARIA
84
- * attributes and keyboard support. The consumer composes the layout
85
- * through the `toView` slot, spreading the published `button` and
86
- * `panel` attribute bundles onto their own elements.
11
+ /** Renders a headless disclosure as a stateless controlled component. The
12
+ * parent owns the open state (`isOpen`) and receives the new state via
13
+ * `onToggle` when the user toggles it. The consumer composes the layout
14
+ * through `toView`, spreading the `button` and `panel` bundles onto their own
15
+ * elements.
16
+ *
17
+ * ```ts
18
+ * // In view:
19
+ * Disclosure.view<Message>({
20
+ * id: 'details',
21
+ * isOpen: model.isDetailsOpen,
22
+ * onToggle: isOpen => ToggledDetails({ isOpen }),
23
+ * toView: ({ button, panel, animatePanel }) => ...,
24
+ * })
87
25
  *
88
- * Designed to be embedded via `h.submodel`. The consumer reacts to
89
- * toggle events by pattern-matching the `ToggledOpenState` OutMessage
90
- * from the third element of `update`'s return tuple. */
91
- export const view = defineView((model, viewInputs) => {
26
+ * // In update:
27
+ * ToggledDetails: ({ isOpen }) => [
28
+ * evo(model, { isDetailsOpen: () => isOpen }),
29
+ * [],
30
+ * ],
31
+ * ``` */
32
+ export const view = (config) => {
92
33
  const h = html();
93
- const { id, isOpen } = model;
94
- const { toView, isDisabled = false, ariaLabel, ariaLabelledBy } = viewInputs;
95
- const handleKeyDown = (key) => M.value(key).pipe(M.whenOr('Enter', ' ', () => Option.some(Toggled())), M.orElse(() => Option.none()));
34
+ const { id, isOpen, onToggle, toView, isDisabled = false, ariaLabel, ariaLabelledBy, } = config;
35
+ const nextOpen = !isOpen;
36
+ const handleKeyDown = (key) => M.value(key).pipe(M.whenOr('Enter', ' ', () => Option.some(onToggle(nextOpen))), M.orElse(() => Option.none()));
96
37
  const disabledAttributes = isDisabled
97
38
  ? [h.AriaDisabled(true), h.DataAttribute('disabled', '')]
98
39
  : [];
@@ -107,18 +48,20 @@ export const view = defineView((model, viewInputs) => {
107
48
  return [];
108
49
  }
109
50
  };
110
- const buttonLabelAttributes = resolveButtonLabel();
111
51
  const buttonAttributes = [
112
52
  h.Id(buttonId(id)),
113
53
  h.AriaExpanded(isOpen),
114
54
  h.AriaControls(panelId(id)),
115
- ...buttonLabelAttributes,
55
+ ...resolveButtonLabel(),
116
56
  h.Tabindex(0),
117
57
  ...(isOpen ? [h.DataAttribute('open', '')] : []),
118
58
  ...disabledAttributes,
119
59
  ...(isDisabled
120
60
  ? []
121
- : [h.OnClick(Toggled()), h.OnKeyDownPreventDefault(handleKeyDown)]),
61
+ : [
62
+ h.OnClick(onToggle(nextOpen)),
63
+ h.OnKeyDownPreventDefault(handleKeyDown),
64
+ ]),
122
65
  ];
123
66
  const panelAttributes = [
124
67
  h.Id(panelId(id)),
@@ -138,8 +81,8 @@ export const view = defineView((model, viewInputs) => {
138
81
  ], [content]),
139
82
  ]);
140
83
  return toView({
141
- button: childAttributes(buttonAttributes),
142
- panel: childAttributes(panelAttributes),
84
+ button: buttonAttributes,
85
+ panel: panelAttributes,
143
86
  animatePanel,
144
87
  });
145
- });
88
+ };
@@ -1,3 +1,3 @@
1
- export { init, update, toggle, close, reflectOpenState, view, buttonId, Model, Message, OutMessage, ToggledOpenState, Closed, CompletedFocusButton, FocusButton, } from './index.js';
2
- export type { InitConfig, ViewInputs, DisclosureAttributes, Toggled, } from './index.js';
1
+ export { view, buttonId } from './index.js';
2
+ export type { ViewConfig, DisclosureAttributes } from './index.js';
3
3
  //# sourceMappingURL=public.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../src/disclosure/public.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,MAAM,EACN,MAAM,EACN,KAAK,EACL,gBAAgB,EAChB,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,OAAO,EACP,UAAU,EACV,gBAAgB,EAChB,MAAM,EACN,oBAAoB,EACpB,WAAW,GACZ,MAAM,YAAY,CAAA;AAEnB,YAAY,EACV,UAAU,EACV,UAAU,EACV,oBAAoB,EACpB,OAAO,GACR,MAAM,YAAY,CAAA"}
1
+ {"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../src/disclosure/public.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAE3C,YAAY,EAAE,UAAU,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAA"}
@@ -1 +1 @@
1
- export { init, update, toggle, close, reflectOpenState, view, buttonId, Model, Message, OutMessage, ToggledOpenState, Closed, CompletedFocusButton, FocusButton, } from './index.js';
1
+ export { view, buttonId } from './index.js';
@@ -1,10 +1,9 @@
1
1
  import { Option, Schema as S } from 'effect';
2
2
  import type * as Command from 'foldkit/command';
3
- import type { Reflect, View as SubmodelView } from 'foldkit/submodel';
3
+ import type { View as SubmodelView } from 'foldkit/submodel';
4
4
  import { type BaseInitConfig, type BaseViewInputs, type Message, type OutMessage } from './shared.js';
5
- /** Schema for the multi-select listbox component's state, tracking open/closed status, active item, selected items, activation trigger, and typeahead search. */
5
+ /** Schema for the multi-select listbox's private interaction state (open/closed status, active item, activation trigger, typeahead search). The selection is owned by the parent and passed in via `ViewInputs.selectedValues`. */
6
6
  export declare const Model: S.Struct<{
7
- readonly selectedItems: S.$Array<S.String>;
8
7
  readonly id: S.String;
9
8
  readonly isOpen: S.Boolean;
10
9
  readonly isAnimated: S.Boolean;
@@ -26,15 +25,12 @@ export declare const Model: S.Struct<{
26
25
  readonly maybeLastButtonPointerType: S.Option<S.String>;
27
26
  }>;
28
27
  export type Model = typeof Model.Type;
29
- /** Configuration for creating a multi-select listbox model with `init`. `isAnimated` enables CSS transition coordination (default `false`). `isModal` locks page scroll and inerts other elements when open (default `false`). `selectedItems` sets the initial selection (default `[]`). */
30
- export type InitConfig = BaseInitConfig & Readonly<{
31
- selectedItems?: ReadonlyArray<string>;
32
- }>;
33
- /** Creates an initial multi-select listbox model from a config. Defaults to closed with no active item and no selection. */
28
+ /** Configuration for creating a multi-select listbox model with `init`. `isAnimated` enables CSS transition coordination (default `false`). `isModal` locks page scroll and inerts other elements when open (default `false`). */
29
+ export type InitConfig = BaseInitConfig;
30
+ /** Creates an initial multi-select listbox model from a config. Defaults to closed with no active item. */
34
31
  export declare const init: (config: InitConfig) => Model;
35
- /** Processes a listbox message and returns the next model, commands, and optional OutMessage. Stays open on selection and toggles item membership (multi-select behavior); emits a `Selected({ value, wasAdded })` OutMessage indicating whether the value was added or removed. */
32
+ /** Processes a listbox message and returns the next model, commands, and optional OutMessage. Stays open on selection (multi-select behavior); emits a `Selected({ value })` OutMessage the parent folds by toggling the value's membership in the selection it owns. */
36
33
  export declare const update: (model: S.Struct.ReadonlySide<{
37
- readonly selectedItems: S.$Array<S.String>;
38
34
  readonly id: S.String;
39
35
  readonly isOpen: S.Boolean;
40
36
  readonly isAnimated: S.Boolean;
@@ -55,7 +51,6 @@ export declare const update: (model: S.Struct.ReadonlySide<{
55
51
  }>>;
56
52
  readonly maybeLastButtonPointerType: S.Option<S.String>;
57
53
  }, "Type">, message: Message) => readonly [S.Struct.ReadonlySide<{
58
- readonly selectedItems: S.$Array<S.String>;
59
54
  readonly id: S.String;
60
55
  readonly isOpen: S.Boolean;
61
56
  readonly isAnimated: S.Boolean;
@@ -144,7 +139,6 @@ export declare const update: (model: S.Struct.ReadonlySide<{
144
139
  }>[], Option.Option<Readonly<{
145
140
  readonly _tag: "Selected";
146
141
  readonly value: string;
147
- readonly wasAdded: boolean;
148
142
  }>>];
149
143
  type UpdateReturn = ReturnType<typeof update>;
150
144
  /** Programmatically opens the listbox, updating the model and returning
@@ -153,15 +147,8 @@ export declare const open: (model: Model) => UpdateReturn;
153
147
  /** Programmatically closes the listbox, updating the model and returning
154
148
  * focus and modal commands. Use this in domain-event handlers to close the listbox. */
155
149
  export declare const close: (model: Model) => UpdateReturn;
156
- /** Programmatically toggles an item in the multi-select listbox. Emits `Selected({ value, wasAdded })`. */
150
+ /** Programmatically activates an item in the multi-select listbox. Emits `Selected({ value })`; the parent toggles the value's membership. */
157
151
  export declare const selectItem: (model: Model, item: string) => UpdateReturn;
158
- /** Reflects an externally-sourced selection set onto the model without
159
- * emitting an OutMessage or running selection side effects. Use this to
160
- * mirror external truth (URL parameters, restored storage, a server push)
161
- * onto the listbox's selected items. Contrast with `selectItem`, which
162
- * toggles a single item as a user *choice* and emits `Selected`. Returns
163
- * the model directly because it produces no commands and no OutMessage. */
164
- export declare const reflectSelectedItems: Reflect<Model, ReadonlyArray<string>>;
165
152
  /** Per-render view inputs passed to the view via `h.submodel`'s `viewInputs` field. */
166
153
  export type ViewInputs<Item, Value extends string = string> = BaseViewInputs<Item, Value>;
167
154
  /** Pairs the multi-select listbox's `view` and `update` (and programmatic
@@ -175,7 +162,6 @@ export declare const create: <Item = string, Value extends string = Item extends
175
162
  selectItem: (model: Model, item: Value) => readonly [Model, ReadonlyArray<Command.Command<Message>>, Option.Option<OutMessage<Value>>];
176
163
  open: (model: Model) => readonly [Model, ReadonlyArray<Command.Command<Message>>, Option.Option<OutMessage<Value>>];
177
164
  close: (model: Model) => readonly [Model, ReadonlyArray<Command.Command<Message>>, Option.Option<OutMessage<Value>>];
178
- reflectSelectedItems: Reflect<Model, ReadonlyArray<Value>>;
179
165
  }>;
180
166
  export {};
181
167
  //# sourceMappingURL=multi.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"multi.d.ts","sourceRoot":"","sources":["../../src/listbox/multi.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"multi.d.ts","sourceRoot":"","sources":["../../src/listbox/multi.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAA;AAC5C,OAAO,KAAK,KAAK,OAAO,MAAM,iBAAiB,CAAA;AAC/C,OAAO,KAAK,EAAE,IAAI,IAAI,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAE5D,OAAO,EACL,KAAK,cAAc,EAEnB,KAAK,cAAc,EAEnB,KAAK,OAAO,EAEZ,KAAK,UAAU,EAMhB,MAAM,aAAa,CAAA;AAIpB,mOAAmO;AACnO,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;EAEhB,CAAA;AAEF,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAIrC,kOAAkO;AAClO,MAAM,MAAM,UAAU,GAAG,cAAc,CAAA;AAEvC,2GAA2G;AAC3G,eAAO,MAAM,IAAI,GAAI,QAAQ,UAAU,KAAG,KAAyB,CAAA;AAInE,yQAAyQ;AACzQ,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAIjB,CAAA;AAEF,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAA;AAE7C;uFACuF;AACvF,eAAO,MAAM,IAAI,GAAI,OAAO,KAAK,KAAG,YAC4B,CAAA;AAEhE;wFACwF;AACxF,eAAO,MAAM,KAAK,GAAI,OAAO,KAAK,KAAG,YAAuC,CAAA;AAE5E,8IAA8I;AAC9I,eAAO,MAAM,UAAU,GAAI,OAAO,KAAK,EAAE,MAAM,MAAM,KAAG,YACjB,CAAA;AAIvC,uFAAuF;AACvF,MAAM,MAAM,UAAU,CAAC,IAAI,EAAE,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,cAAc,CAC1E,IAAI,EACJ,KAAK,CACN,CAAA;AAID;;;;qBAIqB;AACrB,eAAO,MAAM,MAAM,GACjB,IAAI,GAAG,MAAM,EACb,KAAK,SAAS,MAAM,GAAG,IAAI,SAAS,MAAM,GAAG,IAAI,GAAG,MAAM,OACvD,QAAQ,CAAC;IACZ,IAAI,EAAE,YAAY,CAAC,KAAK,EAAE,OAAO,EAAE,cAAc,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAA;IAC/D,MAAM,EAAE,CACN,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,KACb,SAAS,CACZ,KAAK,EACL,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,EACvC,MAAM,CAAC,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CACjC,CAAA;IACD,UAAU,EAAE,CACV,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,KAAK,KACR,SAAS,CACZ,KAAK,EACL,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,EACvC,MAAM,CAAC,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CACjC,CAAA;IACD,IAAI,EAAE,CACJ,KAAK,EAAE,KAAK,KACT,SAAS,CACZ,KAAK,EACL,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,EACvC,MAAM,CAAC,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CACjC,CAAA;IACD,KAAK,EAAE,CACL,KAAK,EAAE,KAAK,KACT,SAAS,CACZ,KAAK,EACL,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,EACvC,MAAM,CAAC,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CACjC,CAAA;CACF,CAgBA,CAAA"}
@@ -1,50 +1,28 @@
1
- import { Array, Function, Option, Schema as S, pipe } from 'effect';
2
- import { evo } from 'foldkit/struct';
1
+ import { Option, Schema as S } from 'effect';
3
2
  import { BaseModel, Closed, Opened, SelectedItem, Selected as SharedSelected, baseInit, makeUpdate, makeView, } from './shared.js';
4
3
  // MODEL
5
- /** Schema for the multi-select listbox component's state, tracking open/closed status, active item, selected items, activation trigger, and typeahead search. */
4
+ /** Schema for the multi-select listbox's private interaction state (open/closed status, active item, activation trigger, typeahead search). The selection is owned by the parent and passed in via `ViewInputs.selectedValues`. */
6
5
  export const Model = S.Struct({
7
6
  ...BaseModel.fields,
8
- selectedItems: S.Array(S.String),
9
- });
10
- /** Creates an initial multi-select listbox model from a config. Defaults to closed with no active item and no selection. */
11
- export const init = (config) => ({
12
- ...baseInit(config),
13
- selectedItems: config.selectedItems ?? [],
14
7
  });
8
+ /** Creates an initial multi-select listbox model from a config. Defaults to closed with no active item. */
9
+ export const init = (config) => baseInit(config);
15
10
  // UPDATE
16
- /** Processes a listbox message and returns the next model, commands, and optional OutMessage. Stays open on selection and toggles item membership (multi-select behavior); emits a `Selected({ value, wasAdded })` OutMessage indicating whether the value was added or removed. */
17
- export const update = makeUpdate((model, item) => {
18
- const wasAdded = !Array.contains(model.selectedItems, item);
19
- const nextSelectedItems = wasAdded
20
- ? Array.append(model.selectedItems, item)
21
- : Array.filter(model.selectedItems, selected => selected !== item);
22
- return [
23
- evo(model, { selectedItems: () => nextSelectedItems }),
24
- [],
25
- Option.some(SharedSelected({ value: item, wasAdded })),
26
- ];
27
- });
11
+ /** Processes a listbox message and returns the next model, commands, and optional OutMessage. Stays open on selection (multi-select behavior); emits a `Selected({ value })` OutMessage the parent folds by toggling the value's membership in the selection it owns. */
12
+ export const update = makeUpdate((model, item) => [
13
+ model,
14
+ [],
15
+ Option.some(SharedSelected({ value: item })),
16
+ ]);
28
17
  /** Programmatically opens the listbox, updating the model and returning
29
18
  * focus and modal commands. Use this in domain-event handlers to open the listbox. */
30
19
  export const open = (model) => update(model, Opened({ maybeActiveItemIndex: Option.none() }));
31
20
  /** Programmatically closes the listbox, updating the model and returning
32
21
  * focus and modal commands. Use this in domain-event handlers to close the listbox. */
33
22
  export const close = (model) => update(model, Closed());
34
- /** Programmatically toggles an item in the multi-select listbox. Emits `Selected({ value, wasAdded })`. */
23
+ /** Programmatically activates an item in the multi-select listbox. Emits `Selected({ value })`; the parent toggles the value's membership. */
35
24
  export const selectItem = (model, item) => update(model, SelectedItem({ item }));
36
- /** Reflects an externally-sourced selection set onto the model without
37
- * emitting an OutMessage or running selection side effects. Use this to
38
- * mirror external truth (URL parameters, restored storage, a server push)
39
- * onto the listbox's selected items. Contrast with `selectItem`, which
40
- * toggles a single item as a user *choice* and emits `Selected`. Returns
41
- * the model directly because it produces no commands and no OutMessage. */
42
- export const reflectSelectedItems = Function.dual(2, (model, items) => evo(model, { selectedItems: () => items }));
43
- const internalView = makeView({
44
- isItemSelected: (model, itemValue) => Array.contains(model.selectedItems, itemValue),
45
- selectedItemIndex: (model, items, itemToValue) => pipe(model.selectedItems, Array.head, Option.flatMap(selectedItem => Array.findFirstIndex(items, item => itemToValue(item) === selectedItem))),
46
- ariaMultiSelectable: true,
47
- });
25
+ const internalView = makeView({ ariaMultiSelectable: true });
48
26
  /** Pairs the multi-select listbox's `view` and `update` (and programmatic
49
27
  * helpers) behind a single Item-typed entry point. Same shape as
50
28
  * `Listbox.create`. Two type params support object-typed items via
@@ -59,7 +37,5 @@ export const create = () => {
59
37
  selectItem: (model, item) => typedUpdate(model, SelectedItem({ item })),
60
38
  open: model => typedUpdate(model, Opened({ maybeActiveItemIndex: Option.none() })),
61
39
  close: model => typedUpdate(model, Closed()),
62
- /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
63
- reflectSelectedItems: reflectSelectedItems,
64
40
  };
65
41
  };
@@ -1,7 +1,7 @@
1
1
  export { init, create, Model } from './single.js';
2
2
  export { buttonId } from './shared.js';
3
3
  export { Message, OutMessage, Selected, Orientation, SelectedItem, CompletedLockScroll, CompletedUnlockScroll, CompletedInertOthers, CompletedRestoreInert, CompletedFocusButton, CompletedFocusItems, CompletedScrollIntoView, CompletedClickItem, CompletedAnchorListbox, CompletedPortalListboxBackdrop, AnchorListbox, PortalListboxBackdrop, ClearedSearch, GotAnimationMessage, LockScroll, UnlockScroll, InertOthers, RestoreInert, FocusButton, FocusItems, ScrollIntoView, ClickItem, DelayClearSearch, DetectMovementOrAnimationEnd, } from './shared.js';
4
- export type { ActivationTrigger, Opened, Closed, BlurredItems, ActivatedItem, DeactivatedItem, MovedPointerOverItem, RequestedItemClick, Searched, PressedPointerOnButton, IgnoredMouseClick, SuppressedSpaceScroll, ItemConfig, GroupHeading, } from './shared.js';
4
+ export type { ActivationTrigger, Opened, Closed, BlurredItems, ActivatedItem, DeactivatedItem, MovedPointerOverItem, RequestedItemClick, Searched, PressedPointerOnButton, IgnoredMouseClick, SuppressedSpaceScroll, ItemConfig, GroupHeading, BaseViewInputsCommon, ItemToValueInput, } from './shared.js';
5
5
  export type { InitConfig, ViewInputs } from './single.js';
6
6
  export type { AnchorConfig } from '../anchor.js';
7
7
  export * as Multi from './multiPublic.js';
@@ -1 +1 @@
1
- {"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../src/listbox/public.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AAEjD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAEtC,OAAO,EACL,OAAO,EACP,UAAU,EACV,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,mBAAmB,EACnB,qBAAqB,EACrB,oBAAoB,EACpB,qBAAqB,EACrB,oBAAoB,EACpB,mBAAmB,EACnB,uBAAuB,EACvB,kBAAkB,EAClB,sBAAsB,EACtB,8BAA8B,EAC9B,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,mBAAmB,EACnB,UAAU,EACV,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,WAAW,EACX,UAAU,EACV,cAAc,EACd,SAAS,EACT,gBAAgB,EAChB,4BAA4B,GAC7B,MAAM,aAAa,CAAA;AAEpB,YAAY,EACV,iBAAiB,EACjB,MAAM,EACN,MAAM,EACN,YAAY,EACZ,aAAa,EACb,eAAe,EACf,oBAAoB,EACpB,kBAAkB,EAClB,QAAQ,EACR,sBAAsB,EACtB,iBAAiB,EACjB,qBAAqB,EACrB,UAAU,EACV,YAAY,GACb,MAAM,aAAa,CAAA;AAEpB,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAEzD,YAAY,EAAE,YAAY,EAAE,MAAM,cAAc,CAAA;AAEhD,OAAO,KAAK,KAAK,MAAM,kBAAkB,CAAA"}
1
+ {"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../src/listbox/public.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AAEjD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAEtC,OAAO,EACL,OAAO,EACP,UAAU,EACV,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,mBAAmB,EACnB,qBAAqB,EACrB,oBAAoB,EACpB,qBAAqB,EACrB,oBAAoB,EACpB,mBAAmB,EACnB,uBAAuB,EACvB,kBAAkB,EAClB,sBAAsB,EACtB,8BAA8B,EAC9B,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,mBAAmB,EACnB,UAAU,EACV,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,WAAW,EACX,UAAU,EACV,cAAc,EACd,SAAS,EACT,gBAAgB,EAChB,4BAA4B,GAC7B,MAAM,aAAa,CAAA;AAEpB,YAAY,EACV,iBAAiB,EACjB,MAAM,EACN,MAAM,EACN,YAAY,EACZ,aAAa,EACb,eAAe,EACf,oBAAoB,EACpB,kBAAkB,EAClB,QAAQ,EACR,sBAAsB,EACtB,iBAAiB,EACjB,qBAAqB,EACrB,UAAU,EACV,YAAY,EACZ,oBAAoB,EACpB,gBAAgB,GACjB,MAAM,aAAa,CAAA;AAEpB,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAEzD,YAAY,EAAE,YAAY,EAAE,MAAM,cAAc,CAAA;AAEhD,OAAO,KAAK,KAAK,MAAM,kBAAkB,CAAA"}