@primitiv-ui/core 0.1.58 → 0.1.59
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/toggle-group/policy.d.ts +50 -0
- package/dist/toggle-group/policy.js +30 -0
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -3,6 +3,7 @@ export { getKeyToActionMap, type RovingKeyAction } from "./keyboard/getKeyToActi
|
|
|
3
3
|
export { resolveRovingTarget, type ResolveRovingTargetOptions, } from "./keyboard/resolveRovingTarget.js";
|
|
4
4
|
export { tabsClick, tabsKeydown, tabsTabStop, type TabsActivationMode, type TabsKeyOutcome, type TabsOrientation, type TabsReadingDirection, type TabsState, } from "./tabs/policy.js";
|
|
5
5
|
export { accordionKeydown, accordionToggle, type AccordionKeyOutcome, type AccordionOrientation, type AccordionReadingDirection, type AccordionState, } from "./accordion/policy.js";
|
|
6
|
+
export { toggleGroupKeydown, toggleGroupTabStop, toggleGroupToggle, type ToggleGroupKeyOutcome, type ToggleGroupOrientation, type ToggleGroupReadingDirection, type ToggleGroupState, } from "./toggle-group/policy.js";
|
|
6
7
|
export { collapsibleKeydown, collapsibleToggle, type CollapsibleKeyOutcome, type CollapsibleState, } from "./collapsible/policy.js";
|
|
7
8
|
export { FOCUSABLE_SELECTOR } from "./focus/focusable.js";
|
|
8
9
|
export { MENU_ITEM_SELECTOR, MENU_TYPEAHEAD_RESET_MS, menuKeydown, menuTypeahead, type MenuKeyOutcome, type MenuKeyState, type MenuTypeaheadOutcome, type MenuTypeaheadState, } from "./menu/policy.js";
|
package/dist/index.js
CHANGED
|
@@ -3,6 +3,7 @@ export { getKeyToActionMap } from "./keyboard/getKeyToActionMap.js";
|
|
|
3
3
|
export { resolveRovingTarget, } from "./keyboard/resolveRovingTarget.js";
|
|
4
4
|
export { tabsClick, tabsKeydown, tabsTabStop, } from "./tabs/policy.js";
|
|
5
5
|
export { accordionKeydown, accordionToggle, } from "./accordion/policy.js";
|
|
6
|
+
export { toggleGroupKeydown, toggleGroupTabStop, toggleGroupToggle, } from "./toggle-group/policy.js";
|
|
6
7
|
export { collapsibleKeydown, collapsibleToggle, } from "./collapsible/policy.js";
|
|
7
8
|
export { FOCUSABLE_SELECTOR } from "./focus/focusable.js";
|
|
8
9
|
export { MENU_ITEM_SELECTOR, MENU_TYPEAHEAD_RESET_MS, menuKeydown, menuTypeahead, } from "./menu/policy.js";
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
/** Layout axis of the group: which arrow pair moves between items. */
|
|
2
|
+
export type ToggleGroupOrientation = "horizontal" | "vertical";
|
|
3
|
+
/** Reading direction. Under `"rtl"` the horizontal arrows are mirrored. */
|
|
4
|
+
export type ToggleGroupReadingDirection = "ltr" | "rtl";
|
|
5
|
+
/**
|
|
6
|
+
* Everything ToggleGroup's toggle and keyboard rules depend on, as plain data.
|
|
7
|
+
* Each surface builds it from wherever it keeps state — React state, or a
|
|
8
|
+
* custom element's attributes — and applies the outcome back the same way.
|
|
9
|
+
*/
|
|
10
|
+
export type ToggleGroupState = {
|
|
11
|
+
/** Every item's value, in DOM order, disabled ones included. */
|
|
12
|
+
values: readonly string[];
|
|
13
|
+
/** The values of the disabled items. */
|
|
14
|
+
disabled: ReadonlySet<string>;
|
|
15
|
+
/** The values of the pressed items. */
|
|
16
|
+
pressed: readonly string[];
|
|
17
|
+
/** Whether more than one item may be pressed at once (`type="multiple"`). */
|
|
18
|
+
multiple: boolean;
|
|
19
|
+
orientation: ToggleGroupOrientation;
|
|
20
|
+
dir: ToggleGroupReadingDirection;
|
|
21
|
+
};
|
|
22
|
+
/** What a key press on an item asks for: an item to move focus to, or an item
|
|
23
|
+
* to toggle — never both. */
|
|
24
|
+
export type ToggleGroupKeyOutcome = {
|
|
25
|
+
focus: string | null;
|
|
26
|
+
toggle: string | null;
|
|
27
|
+
};
|
|
28
|
+
/**
|
|
29
|
+
* The pressed items after toggling `value`: a pressed item lets go — in single
|
|
30
|
+
* mode that leaves nothing pressed; one that is off is pressed and, unless
|
|
31
|
+
* `multiple`, replaces the pressed one. `null` for a disabled item, which never
|
|
32
|
+
* toggles, so no change is reported. The same rule as an accordion's open items.
|
|
33
|
+
*/
|
|
34
|
+
export declare function toggleGroupToggle(state: Pick<ToggleGroupState, "disabled" | "pressed" | "multiple">, value: string): string[] | null;
|
|
35
|
+
/**
|
|
36
|
+
* ToggleGroup's keyboard contract for a key press on the item `focused`: arrows
|
|
37
|
+
* follow `orientation`, mirrored under RTL, wrap at the ends and skip disabled
|
|
38
|
+
* items; Home / End jump to the ends. They move focus only — Enter / Space
|
|
39
|
+
* toggle the focused item. Returns `null` for a key the group does not handle,
|
|
40
|
+
* which tells the caller to leave the event alone (no `preventDefault`).
|
|
41
|
+
*/
|
|
42
|
+
export declare function toggleGroupKeydown(state: ToggleGroupState, focused: string, key: string): ToggleGroupKeyOutcome | null;
|
|
43
|
+
/**
|
|
44
|
+
* The item that takes part in the page's Tab order (the roving tab stop): the
|
|
45
|
+
* item focus last moved to, else the first pressed item, else the first item —
|
|
46
|
+
* always an enabled one that is still there, so Tab reaches the group.
|
|
47
|
+
*/
|
|
48
|
+
export declare function toggleGroupTabStop(state: Pick<ToggleGroupState, "values" | "disabled" | "pressed"> & {
|
|
49
|
+
focused: string | undefined;
|
|
50
|
+
}): string | undefined;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { accordionKeydown, accordionToggle } from "../accordion/policy.js";
|
|
2
|
+
/**
|
|
3
|
+
* The pressed items after toggling `value`: a pressed item lets go — in single
|
|
4
|
+
* mode that leaves nothing pressed; one that is off is pressed and, unless
|
|
5
|
+
* `multiple`, replaces the pressed one. `null` for a disabled item, which never
|
|
6
|
+
* toggles, so no change is reported. The same rule as an accordion's open items.
|
|
7
|
+
*/
|
|
8
|
+
export function toggleGroupToggle(state, value) {
|
|
9
|
+
return accordionToggle({ disabled: state.disabled, expanded: state.pressed, multiple: state.multiple }, value);
|
|
10
|
+
}
|
|
11
|
+
/**
|
|
12
|
+
* ToggleGroup's keyboard contract for a key press on the item `focused`: arrows
|
|
13
|
+
* follow `orientation`, mirrored under RTL, wrap at the ends and skip disabled
|
|
14
|
+
* items; Home / End jump to the ends. They move focus only — Enter / Space
|
|
15
|
+
* toggle the focused item. Returns `null` for a key the group does not handle,
|
|
16
|
+
* which tells the caller to leave the event alone (no `preventDefault`).
|
|
17
|
+
*/
|
|
18
|
+
export function toggleGroupKeydown(state, focused, key) {
|
|
19
|
+
return accordionKeydown({ ...state, expanded: state.pressed }, focused, key);
|
|
20
|
+
}
|
|
21
|
+
/**
|
|
22
|
+
* The item that takes part in the page's Tab order (the roving tab stop): the
|
|
23
|
+
* item focus last moved to, else the first pressed item, else the first item —
|
|
24
|
+
* always an enabled one that is still there, so Tab reaches the group.
|
|
25
|
+
*/
|
|
26
|
+
export function toggleGroupTabStop(state) {
|
|
27
|
+
const enabled = state.values.filter((value) => !state.disabled.has(value));
|
|
28
|
+
// `undefined` is never an enabled value, so a missing focus or first item drops out.
|
|
29
|
+
return [state.focused, ...state.pressed, enabled[0]].find((value) => enabled.includes(value));
|
|
30
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@primitiv-ui/core",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.59",
|
|
4
4
|
"description": "The framework-free behaviour core shared by every Primitiv surface — keyboard maps, roving-focus targets, id derivation and per-component policy, as pure functions with no DOM and no dependencies.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|