@destyler/toggle 0.0.6 → 0.0.7-beta.1

package/dist/index.d.ts

@@ -1,4 +1,136 @@
-export { Toggle, ToggleGroupItem, ToggleGroupItemProps, ToggleGroupRoot, ToggleGroupRootProps, ToggleProps, toggleGroupItemProps, toggleGroupRootProps, toggleProps } from './component.js';
-import 'vue';
-import '@destyler/primitive';
-import '@destyler/shared';
+import * as _zag_js_anatomy from '@zag-js/anatomy';
+import { RequiredBy, PropTypes, DirectionProperty, CommonProperties, Orientation, NormalizeProps } from '@zag-js/types';
+export { Orientation } from '@zag-js/types';
+import * as _zag_js_core from '@zag-js/core';
+import { Machine, StateMachine } from '@zag-js/core';
+
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "item">;
+
+interface ValueChangeDetails {
+    value: string[];
+}
+type ElementIds = Partial<{
+    root: string;
+    item: (value: string) => string;
+}>;
+interface PublicContext extends DirectionProperty, CommonProperties {
+    /**
+     * The ids of the elements in the toggle. Useful for composition.
+     */
+    ids?: ElementIds | undefined;
+    /**
+     * Whether the toggle is disabled.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * The values of the toggles in the group.
+     */
+    value: string[];
+    /**
+     * Function to call when the toggle is clicked.
+     */
+    onValueChange?: ((details: ValueChangeDetails) => void) | undefined;
+    /**
+     * Whether to loop focus inside the toggle group.
+     * @default true
+     */
+    loopFocus: boolean;
+    /**
+     *  Whether to use roving tab index to manage focus.
+     * @default true
+     */
+    rovingFocus?: boolean | undefined;
+    /**
+     * The orientation of the toggle group.
+     * @default "horizontal"
+     */
+    orientation: Orientation;
+    /**
+     * Whether to allow multiple toggles to be selected.
+     */
+    multiple?: boolean | undefined;
+}
+type UserDefinedContext = RequiredBy<PublicContext, 'id'>;
+type ComputedContext = Readonly<{
+    currentLoopFocus: boolean;
+}>;
+interface PrivateContext {
+    /**
+     * @internal
+     * Whether the user is tabbing backward.
+     */
+    isTabbingBackward: boolean;
+    /**
+     * @internal
+     * Whether the toggle was focused by a click.
+     */
+    isClickFocus: boolean;
+    /**
+     * @internal
+     * The value of the toggle that was focused.
+     */
+    focusedId: string | null;
+    /**
+     * @internal
+     * Whether the toggle group is within a toolbar.
+     * This is used to determine whether to use roving tab index.
+     */
+    isWithinToolbar: boolean;
+}
+interface MachineContext extends PublicContext, PrivateContext, ComputedContext {
+}
+interface MachineState {
+    value: 'idle' | 'focused';
+}
+type State = StateMachine.State<MachineContext, MachineState>;
+type Send = StateMachine.Send<StateMachine.AnyEventObject>;
+type Service = Machine<MachineContext, MachineState, StateMachine.AnyEventObject>;
+interface ItemProps {
+    value: string;
+    disabled?: boolean | undefined;
+}
+interface ItemState {
+    /**
+     * The underlying id of the item.
+     */
+    id: string;
+    /**
+     * Whether the toggle item is disabled.
+     */
+    disabled: boolean;
+    /**
+     * Whether the toggle item is pressed.
+     */
+    pressed: boolean;
+    /**
+     * Whether the toggle item is focused.
+     */
+    focused: boolean;
+}
+interface MachineApi<T extends PropTypes = PropTypes> {
+    /**
+     * The value of the toggle group.
+     */
+    value: string[];
+    /**
+     * Function to set the value of the toggle group.
+     */
+    setValue: (values: string[]) => void;
+    /**
+     * Returns the state of the toggle item.
+     */
+    getItemState: (props: ItemProps) => ItemState;
+    getRootProps: () => T['element'];
+    getItemProps: (props: ItemProps) => T['button'];
+}
+
+declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
+
+declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
+
+declare const props: ("ids" | "disabled" | "value" | "onValueChange" | "loopFocus" | "rovingFocus" | "orientation" | "multiple" | "id" | "dir" | "getRootNode")[];
+declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "ids" | "disabled" | "value" | "onValueChange" | "loopFocus" | "rovingFocus" | "orientation" | "multiple" | "id" | "dir" | "getRootNode">];
+declare const itemProps: (keyof ItemProps)[];
+declare const splitItemProps: <Props extends ItemProps>(props: Props) => [ItemProps, Omit<Props, keyof ItemProps>];
+
+export { type MachineApi as Api, type UserDefinedContext as Context, type ElementIds, type ItemProps, type ItemState, type Service, type ValueChangeDetails, anatomy, connect, itemProps, machine, props, splitItemProps, splitProps };

package/dist/index.mjs

@@ -1,6 +1,341 @@
-export { Toggle, ToggleGroupItem, ToggleGroupRoot, toggleGroupItemProps, toggleGroupRootProps, toggleProps } from './component.mjs';
-import 'vue';
-import '@destyler/primitive';
-import '@destyler/composition';
-import '@destyler/shared';
-import '@destyler/roving-focus';
+import { createAnatomy } from '@zag-js/anatomy';
+import { getEventKey } from '@zag-js/dom-event';
+import { createScope, queryAll, nextById, prevById, dataAttr, isSelfTarget, isSafari, raf } from '@zag-js/dom-query';
+import { first, last, compact, remove, add, isEqual, createSplitProps } from '@zag-js/utils';
+import { createMachine, guards } from '@zag-js/core';
+import { createProps } from '@zag-js/types';
+
+const anatomy = createAnatomy("toggle").parts("root", "item");
+const parts = anatomy.build();
+
+const dom = createScope({
+  getRootId: (ctx) => ctx.ids?.root ?? `toggle:${ctx.id}`,
+  getItemId: (ctx, value) => ctx.ids?.item?.(value) ?? `toggle:${ctx.id}:${value}`,
+  getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
+  getElements: (ctx) => {
+    const ownerId = CSS.escape(dom.getRootId(ctx));
+    const selector = `[data-ownedby='${ownerId}']:not([data-disabled])`;
+    return queryAll(dom.getRootEl(ctx), selector);
+  },
+  getFirstEl: (ctx) => first(dom.getElements(ctx)),
+  getLastEl: (ctx) => last(dom.getElements(ctx)),
+  getNextEl: (ctx, id) => nextById(dom.getElements(ctx), id, ctx.currentLoopFocus),
+  getPrevEl: (ctx, id) => prevById(dom.getElements(ctx), id, ctx.currentLoopFocus)
+});
+
+function connect(state, send, normalize) {
+  const value = state.context.value;
+  const disabled = state.context.disabled;
+  const isSingle = !state.context.multiple;
+  const rovingFocus = state.context.rovingFocus;
+  const isHorizontal = state.context.orientation === "horizontal";
+  function getItemState(props) {
+    const id = dom.getItemId(state.context, props.value);
+    return {
+      id,
+      disabled: Boolean(props.disabled || disabled),
+      pressed: !!value.includes(props.value),
+      focused: state.context.focusedId === id
+    };
+  }
+  return {
+    value,
+    setValue(value2) {
+      send({ type: "VALUE.SET", value: value2 });
+    },
+    getRootProps() {
+      return normalize.element({
+        ...parts.root.attrs,
+        "id": dom.getRootId(state.context),
+        "dir": state.context.dir,
+        "role": isSingle ? "radiogroup" : "group",
+        "tabIndex": state.context.isTabbingBackward ? -1 : 0,
+        "data-disabled": dataAttr(disabled),
+        "data-orientation": state.context.orientation,
+        "data-focus": dataAttr(state.context.focusedId != null),
+        "style": { outline: "none" },
+        onMouseDown() {
+          if (disabled)
+            return;
+          send("ROOT.MOUSE_DOWN");
+        },
+        onFocus(event) {
+          if (disabled)
+            return;
+          const evt = event.nativeEvent || event;
+          if (!isSelfTarget(evt) || !!state.context.isClickFocus || state.context.isTabbingBackward)
+            return;
+          send("ROOT.FOCUS");
+        },
+        onBlur() {
+          if (disabled)
+            return;
+          send("ROOT.BLUR");
+        }
+      });
+    },
+    getItemState,
+    getItemProps(props) {
+      const itemState = getItemState(props);
+      const rovingTabIndex = itemState.focused ? 0 : -1;
+      return normalize.button({
+        ...parts.item.attrs,
+        "id": itemState.id,
+        "type": "button",
+        "data-ownedby": dom.getRootId(state.context),
+        "data-focus": dataAttr(itemState.focused),
+        "disabled": itemState.disabled,
+        "tabIndex": rovingFocus ? rovingTabIndex : void 0,
+        // radio
+        "role": isSingle ? "radio" : void 0,
+        "aria-checked": isSingle ? itemState.pressed : void 0,
+        "aria-pressed": isSingle ? void 0 : itemState.pressed,
+        //
+        "data-disabled": dataAttr(itemState.disabled),
+        "data-orientation": state.context.orientation,
+        "dir": state.context.dir,
+        "data-state": itemState.pressed ? "on" : "off",
+        onFocus() {
+          if (itemState.disabled)
+            return;
+          send({ type: "TOGGLE.FOCUS", id: itemState.id });
+        },
+        onClick(event) {
+          if (itemState.disabled)
+            return;
+          send({ type: "TOGGLE.CLICK", id: itemState.id, value: props.value });
+          if (isSafari()) {
+            event.currentTarget.focus({ preventScroll: true });
+          }
+        },
+        onKeyDown(event) {
+          if (event.defaultPrevented)
+            return;
+          if (!isSelfTarget(event))
+            return;
+          if (itemState.disabled)
+            return;
+          const keyMap = {
+            Tab(event2) {
+              const isShiftTab = event2.shiftKey;
+              send({ type: "TOGGLE.SHIFT_TAB", isShiftTab });
+            },
+            ArrowLeft() {
+              if (!rovingFocus || !isHorizontal)
+                return;
+              send("TOGGLE.FOCUS_PREV");
+            },
+            ArrowRight() {
+              if (!rovingFocus || !isHorizontal)
+                return;
+              send("TOGGLE.FOCUS_NEXT");
+            },
+            ArrowUp() {
+              if (!rovingFocus || isHorizontal)
+                return;
+              send("TOGGLE.FOCUS_PREV");
+            },
+            ArrowDown() {
+              if (!rovingFocus || isHorizontal)
+                return;
+              send("TOGGLE.FOCUS_NEXT");
+            },
+            Home() {
+              if (!rovingFocus)
+                return;
+              send("TOGGLE.FOCUS_FIRST");
+            },
+            End() {
+              if (!rovingFocus)
+                return;
+              send("TOGGLE.FOCUS_LAST");
+            }
+          };
+          const exec = keyMap[getEventKey(event)];
+          if (exec) {
+            exec(event);
+            if (event.key !== "Tab")
+              event.preventDefault();
+          }
+        }
+      });
+    }
+  };
+}
+
+const { not, and } = guards;
+const invoke = {
+  change(ctx) {
+    ctx.onValueChange?.({ value: Array.from(ctx.value) });
+  }
+};
+const set = {
+  value(ctx, value) {
+    if (isEqual(ctx.value, value))
+      return;
+    ctx.value = value;
+    invoke.change(ctx);
+  }
+};
+function machine(userContext) {
+  const ctx = compact(userContext);
+  return createMachine(
+    {
+      id: "toggle",
+      initial: "idle",
+      context: {
+        value: [],
+        disabled: false,
+        orientation: "horizontal",
+        rovingFocus: true,
+        loopFocus: true,
+        ...ctx,
+        focusedId: null,
+        isTabbingBackward: false,
+        isClickFocus: false,
+        isWithinToolbar: false
+      },
+      computed: {
+        currentLoopFocus: (ctx2) => ctx2.loopFocus && !ctx2.isWithinToolbar
+      },
+      entry: ["checkIfWithinToolbar"],
+      on: {
+        "VALUE.SET": {
+          actions: ["setValue"]
+        },
+        "TOGGLE.CLICK": {
+          actions: ["setValue"]
+        },
+        "ROOT.MOUSE_DOWN": {
+          actions: ["setClickFocus"]
+        }
+      },
+      states: {
+        idle: {
+          on: {
+            "ROOT.FOCUS": {
+              target: "focused",
+              guard: not(and("isClickFocus", "isTabbingBackward")),
+              actions: ["focusFirstToggle", "clearClickFocus"]
+            },
+            "TOGGLE.FOCUS": {
+              target: "focused",
+              actions: ["setFocusedId"]
+            }
+          }
+        },
+        focused: {
+          on: {
+            "ROOT.BLUR": {
+              target: "idle",
+              actions: ["clearIsTabbingBackward"]
+            },
+            "TOGGLE.FOCUS": {
+              actions: ["setFocusedId"]
+            },
+            "TOGGLE.FOCUS_NEXT": {
+              actions: ["focusNextToggle"]
+            },
+            "TOGGLE.FOCUS_PREV": {
+              actions: ["focusPrevToggle"]
+            },
+            "TOGGLE.FOCUS_FIRST": {
+              actions: ["focusFirstToggle"]
+            },
+            "TOGGLE.FOCUS_LAST": {
+              actions: ["focusLastToggle"]
+            },
+            "TOGGLE.SHIFT_TAB": {
+              target: "idle",
+              actions: ["setIsTabbingBackward"]
+            }
+          }
+        }
+      }
+    },
+    {
+      guards: {
+        isClickFocus: (ctx2) => ctx2.isClickFocus,
+        isTabbingBackward: (ctx2) => ctx2.isTabbingBackward
+      },
+      actions: {
+        setIsTabbingBackward(ctx2) {
+          ctx2.isTabbingBackward = true;
+        },
+        clearIsTabbingBackward(ctx2) {
+          ctx2.isTabbingBackward = false;
+        },
+        setClickFocus(ctx2) {
+          ctx2.isClickFocus = true;
+        },
+        clearClickFocus(ctx2) {
+          ctx2.isClickFocus = false;
+        },
+        checkIfWithinToolbar(ctx2) {
+          const closestToolbar = dom.getRootEl(ctx2)?.closest("[role=toolbar]");
+          ctx2.isWithinToolbar = !!closestToolbar;
+        },
+        setFocusedId(ctx2, evt) {
+          ctx2.focusedId = evt.id;
+        },
+        clearFocusedId(ctx2) {
+          ctx2.focusedId = null;
+        },
+        setValue(ctx2, evt) {
+          if (!evt.value)
+            return;
+          let next = Array.from(ctx2.value);
+          if (ctx2.multiple) {
+            next = next.includes(evt.value) ? remove(next, evt.value) : add(next, evt.value);
+          } else {
+            next = isEqual(ctx2.value, [evt.value]) ? [] : [evt.value];
+          }
+          set.value(ctx2, next);
+        },
+        focusNextToggle(ctx2) {
+          raf(() => {
+            if (!ctx2.focusedId)
+              return;
+            dom.getNextEl(ctx2, ctx2.focusedId)?.focus({ preventScroll: true });
+          });
+        },
+        focusPrevToggle(ctx2) {
+          raf(() => {
+            if (!ctx2.focusedId)
+              return;
+            dom.getPrevEl(ctx2, ctx2.focusedId)?.focus({ preventScroll: true });
+          });
+        },
+        focusFirstToggle(ctx2) {
+          raf(() => {
+            dom.getFirstEl(ctx2)?.focus({ preventScroll: true });
+          });
+        },
+        focusLastToggle(ctx2) {
+          raf(() => {
+            dom.getLastEl(ctx2)?.focus({ preventScroll: true });
+          });
+        }
+      }
+    }
+  );
+}
+
+const props = createProps()([
+  "dir",
+  "disabled",
+  "getRootNode",
+  "id",
+  "ids",
+  "loopFocus",
+  "multiple",
+  "onValueChange",
+  "orientation",
+  "rovingFocus",
+  "value"
+]);
+const splitProps = createSplitProps(props);
+const itemProps = createProps()(["value", "disabled"]);
+const splitItemProps = createSplitProps(itemProps);
+
+export { anatomy, connect, itemProps, machine, props, splitItemProps, splitProps };

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@destyler/toggle",
   "type": "module",
-  "version": "0.0.6",
-  "description": "a two-state button that can be either on or off.",
+  "version": "0.0.7-beta.1",
+  "description": "A two-state button that can be either on or off.",
   "author": "Elone Hoo <elonehoo@gmail.com>",
   "license": "MIT",
   "exports": {
@@ -10,14 +10,6 @@
       "types": "./dist/index.d.mts",
       "default": "./dist/index.mjs"
     },
-    "./resolver": {
-      "types": "./dist/resolver.d.mts",
-      "default": "./dist/resolver.mjs"
-    },
-    "./component": {
-      "types": "./dist/component.d.mts",
-      "default": "./dist/component.mjs"
-    },
     "./*": "./*"
   },
   "main": "dist/index.cjs",
@@ -27,17 +19,17 @@
     "*.d.ts",
     "dist"
   ],
-  "peerDependencies": {
-    "vue": ">=3.4.21"
-  },
   "dependencies": {
-    "@destyler/composition": "0.0.6",
-    "@destyler/primitive": "0.0.6",
-    "@destyler/roving-focus": "0.0.6",
-    "@destyler/shared": "0.0.6"
+    "@zag-js/anatomy": "^0.80.0",
+    "@zag-js/core": "^0.80.0",
+    "@zag-js/dom-event": "^0.80.0",
+    "@zag-js/dom-query": "^0.80.0",
+    "@zag-js/types": "^0.80.0",
+    "@zag-js/utils": "^0.80.0"
   },
   "scripts": {
     "clear": "rimraf ./dist",
+    "clear:node_modules": "rimraf ./node_modules",
     "build": "pnpm run clear && unbuild",
     "stub": "unbuild --stub"
   }

package/README.md

@@ -1,7 +0,0 @@
-# @destyler/toggle
-
-[![NPM version](https://img.shields.io/npm/v/@destyler/toggle?color=a1b858&toggle=)](https://www.npmjs.com/package/@destyler/toggle)
-
-> a two-state button that can be either on or off.
-
-[GitHub](https://github.com/destyler/destyler) | [Documentation](https://destyler-dev.zeabur.app/)