@destyler/toggle 0.0.7-beta.5 → 0.0.7-beta.9

package/dist/index.cjs

@@ -1,349 +0,0 @@
-'use strict';
-
-const anatomy$1 = require('@zag-js/anatomy');
-const domEvent = require('@zag-js/dom-event');
-const domQuery = require('@zag-js/dom-query');
-const utils = require('@zag-js/utils');
-const core = require('@zag-js/core');
-const types = require('@zag-js/types');
-
-const anatomy = anatomy$1.createAnatomy("toggle").parts("root", "item");
-const parts = anatomy.build();
-
-const dom = domQuery.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 domQuery.queryAll(dom.getRootEl(ctx), selector);
-  },
-  getFirstEl: (ctx) => utils.first(dom.getElements(ctx)),
-  getLastEl: (ctx) => utils.last(dom.getElements(ctx)),
-  getNextEl: (ctx, id) => domQuery.nextById(dom.getElements(ctx), id, ctx.currentLoopFocus),
-  getPrevEl: (ctx, id) => domQuery.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": domQuery.dataAttr(disabled),
-        "data-orientation": state.context.orientation,
-        "data-focus": domQuery.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 (!domQuery.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": domQuery.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": domQuery.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 (domQuery.isSafari()) {
-            event.currentTarget.focus({ preventScroll: true });
-          }
-        },
-        onKeyDown(event) {
-          if (event.defaultPrevented)
-            return;
-          if (!domQuery.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[domEvent.getEventKey(event)];
-          if (exec) {
-            exec(event);
-            if (event.key !== "Tab")
-              event.preventDefault();
-          }
-        }
-      });
-    }
-  };
-}
-
-const { not, and } = core.guards;
-const invoke = {
-  change(ctx) {
-    ctx.onValueChange?.({ value: Array.from(ctx.value) });
-  }
-};
-const set = {
-  value(ctx, value) {
-    if (utils.isEqual(ctx.value, value))
-      return;
-    ctx.value = value;
-    invoke.change(ctx);
-  }
-};
-function machine(userContext) {
-  const ctx = utils.compact(userContext);
-  return core.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) ? utils.remove(next, evt.value) : utils.add(next, evt.value);
-          } else {
-            next = utils.isEqual(ctx2.value, [evt.value]) ? [] : [evt.value];
-          }
-          set.value(ctx2, next);
-        },
-        focusNextToggle(ctx2) {
-          domQuery.raf(() => {
-            if (!ctx2.focusedId)
-              return;
-            dom.getNextEl(ctx2, ctx2.focusedId)?.focus({ preventScroll: true });
-          });
-        },
-        focusPrevToggle(ctx2) {
-          domQuery.raf(() => {
-            if (!ctx2.focusedId)
-              return;
-            dom.getPrevEl(ctx2, ctx2.focusedId)?.focus({ preventScroll: true });
-          });
-        },
-        focusFirstToggle(ctx2) {
-          domQuery.raf(() => {
-            dom.getFirstEl(ctx2)?.focus({ preventScroll: true });
-          });
-        },
-        focusLastToggle(ctx2) {
-          domQuery.raf(() => {
-            dom.getLastEl(ctx2)?.focus({ preventScroll: true });
-          });
-        }
-      }
-    }
-  );
-}
-
-const props = types.createProps()([
-  "dir",
-  "disabled",
-  "getRootNode",
-  "id",
-  "ids",
-  "loopFocus",
-  "multiple",
-  "onValueChange",
-  "orientation",
-  "rovingFocus",
-  "value"
-]);
-const splitProps = utils.createSplitProps(props);
-const itemProps = types.createProps()(["value", "disabled"]);
-const splitItemProps = utils.createSplitProps(itemProps);
-
-exports.anatomy = anatomy;
-exports.connect = connect;
-exports.itemProps = itemProps;
-exports.machine = machine;
-exports.props = props;
-exports.splitItemProps = splitItemProps;
-exports.splitProps = splitProps;

package/dist/index.d.cts

@@ -1,136 +0,0 @@
-import * as _zag_js_anatomy from '@zag-js/anatomy';
-import { DirectionProperty, CommonProperties, Orientation, PropTypes, RequiredBy, NormalizeProps } from '@zag-js/types';
-export { Orientation } from '@zag-js/types';
-import * as _zag_js_core from '@zag-js/core';
-import { StateMachine, Machine } 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.d.mts

@@ -1,136 +0,0 @@
-import * as _zag_js_anatomy from '@zag-js/anatomy';
-import { DirectionProperty, CommonProperties, Orientation, PropTypes, RequiredBy, NormalizeProps } from '@zag-js/types';
-export { Orientation } from '@zag-js/types';
-import * as _zag_js_core from '@zag-js/core';
-import { StateMachine, Machine } 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 };