Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Socket
Sign inDemoInstall

@zag-js/toggle-group

Package Overview
Dependencies
Maintainers
1
Versions
549
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@zag-js/toggle-group - npm Package Compare versions

Comparing version 0.0.0-dev-20240605193509 to 0.0.0-dev-20240605203045

390

dist/index.js

@@ -1,2 +0,390 @@

"use strict";var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:true})};var __copyProps=(to,from,except,desc)=>{if(from&&typeof from==="object"||typeof from==="function"){for(let key of __getOwnPropNames(from))if(!__hasOwnProp.call(to,key)&&key!==except)__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable})}return to};var __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:true}),mod);var src_exports={};__export(src_exports,{anatomy:()=>anatomy,connect:()=>connect,itemProps:()=>itemProps,machine:()=>machine,props:()=>props,splitItemProps:()=>splitItemProps,splitProps:()=>splitProps});module.exports=__toCommonJS(src_exports);var import_anatomy=require("@zag-js/anatomy");var anatomy=(0,import_anatomy.createAnatomy)("toggle-group").parts("root","item");var parts=anatomy.build();var import_dom_event=require("@zag-js/dom-event");var import_dom_query2=require("@zag-js/dom-query");var import_dom_query=require("@zag-js/dom-query");var import_utils=require("@zag-js/utils");var dom=(0,import_dom_query.createScope)({getRootId:ctx=>ctx.ids?.root??`toggle-group:${ctx.id}`,getItemId:(ctx,value)=>ctx.ids?.item?.(value)??`toggle-group:${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(0,import_dom_query.queryAll)(dom.getRootEl(ctx),selector)},getFirstEl:ctx=>(0,import_utils.first)(dom.getElements(ctx)),getLastEl:ctx=>(0,import_utils.last)(dom.getElements(ctx)),getNextEl:(ctx,id)=>(0,import_dom_query.nextById)(dom.getElements(ctx),id,ctx.currentLoopFocus),getPrevEl:(ctx,id)=>(0,import_dom_query.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(props2){const id=dom.getItemId(state.context,props2.value);return{id,disabled:Boolean(props2.disabled||disabled),pressed:!!value.includes(props2.value),focused:state.context.focusedId===id}}return{value,setValue(value2){send({type:"VALUE.SET",value:value2})},getItemState,getRootProps:()=>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":(0,import_dom_query2.dataAttr)(disabled),"data-orientation":state.context.orientation,"data-focus":(0,import_dom_query2.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(!(0,import_dom_query2.isSelfTarget)(evt)||!!state.context.isClickFocus||state.context.isTabbingBackward)return;send("ROOT.FOCUS")},onBlur(){if(disabled)return;send("ROOT.BLUR")}}),getItemProps(props2){const itemState=getItemState(props2);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":(0,import_dom_query2.dataAttr)(itemState.focused),disabled:itemState.disabled,tabIndex:rovingFocus?rovingTabIndex:void 0,role:isSingle?"radio":void 0,"aria-checked":isSingle?itemState.pressed:void 0,"aria-pressed":isSingle?void 0:itemState.pressed,"data-disabled":(0,import_dom_query2.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:props2.value});if((0,import_dom_query2.isSafari)()){event.currentTarget.focus({preventScroll:true})}},onKeyDown(event){if(event.defaultPrevented)return;if(!(0,import_dom_query2.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[(0,import_dom_event.getEventKey)(event)];if(exec){exec(event);if(event.key!=="Tab")event.preventDefault()}}})}}}var import_core=require("@zag-js/core");var import_dom_query3=require("@zag-js/dom-query");var import_utils2=require("@zag-js/utils");var{not,and}=import_core.guards;function machine(userContext){const ctx=(0,import_utils2.compact)(userContext);return(0,import_core.createMachine)({id:"toggle-group",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)?(0,import_utils2.remove)(next,evt.value):(0,import_utils2.add)(next,evt.value)}else{next=(0,import_utils2.isEqual)(ctx2.value,[evt.value])?[]:[evt.value]}set.value(ctx2,next)},focusNextToggle(ctx2){(0,import_dom_query3.raf)(()=>{if(!ctx2.focusedId)return;dom.getNextEl(ctx2,ctx2.focusedId)?.focus({preventScroll:true})})},focusPrevToggle(ctx2){(0,import_dom_query3.raf)(()=>{if(!ctx2.focusedId)return;dom.getPrevEl(ctx2,ctx2.focusedId)?.focus({preventScroll:true})})},focusFirstToggle(ctx2){(0,import_dom_query3.raf)(()=>{dom.getFirstEl(ctx2)?.focus({preventScroll:true})})},focusLastToggle(ctx2){(0,import_dom_query3.raf)(()=>{dom.getLastEl(ctx2)?.focus({preventScroll:true})})}}})}var invoke={change(ctx){ctx.onValueChange?.({value:Array.from(ctx.value)})}};var set={value(ctx,value){if((0,import_utils2.isEqual)(ctx.value,value))return;ctx.value=value;invoke.change(ctx)}};var import_types=require("@zag-js/types");var import_utils3=require("@zag-js/utils");var props=(0,import_types.createProps)()(["dir","disabled","getRootNode","id","ids","loopFocus","multiple","onValueChange","orientation","rovingFocus","value"]);var splitProps=(0,import_utils3.createSplitProps)(props);var itemProps=(0,import_types.createProps)()(["value","disabled"]);var splitItemProps=(0,import_utils3.createSplitProps)(itemProps);0&&(module.exports={anatomy,connect,itemProps,machine,props,splitItemProps,splitProps});
"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/index.ts
var src_exports = {};
__export(src_exports, {
anatomy: () => anatomy,
connect: () => connect,
itemProps: () => itemProps,
machine: () => machine,
props: () => props,
splitItemProps: () => splitItemProps,
splitProps: () => splitProps
});
module.exports = __toCommonJS(src_exports);
// src/toggle-group.anatomy.ts
var import_anatomy = require("@zag-js/anatomy");
var anatomy = (0, import_anatomy.createAnatomy)("toggle-group").parts("root", "item");
var parts = anatomy.build();
// src/toggle-group.connect.ts
var import_dom_event = require("@zag-js/dom-event");
var import_dom_query2 = require("@zag-js/dom-query");
// src/toggle-group.dom.ts
var import_dom_query = require("@zag-js/dom-query");
var import_utils = require("@zag-js/utils");
var dom = (0, import_dom_query.createScope)({
getRootId: (ctx) => ctx.ids?.root ?? `toggle-group:${ctx.id}`,
getItemId: (ctx, value) => ctx.ids?.item?.(value) ?? `toggle-group:${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 (0, import_dom_query.queryAll)(dom.getRootEl(ctx), selector);
},
getFirstEl: (ctx) => (0, import_utils.first)(dom.getElements(ctx)),
getLastEl: (ctx) => (0, import_utils.last)(dom.getElements(ctx)),
getNextEl: (ctx, id) => (0, import_dom_query.nextById)(dom.getElements(ctx), id, ctx.currentLoopFocus),
getPrevEl: (ctx, id) => (0, import_dom_query.prevById)(dom.getElements(ctx), id, ctx.currentLoopFocus)
});
// src/toggle-group.connect.ts
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(props2) {
const id = dom.getItemId(state.context, props2.value);
return {
id,
disabled: Boolean(props2.disabled || disabled),
pressed: !!value.includes(props2.value),
focused: state.context.focusedId === id
};
}
return {
value,
setValue(value2) {
send({ type: "VALUE.SET", value: value2 });
},
getItemState,
getRootProps: () => 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": (0, import_dom_query2.dataAttr)(disabled),
"data-orientation": state.context.orientation,
"data-focus": (0, import_dom_query2.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 (!(0, import_dom_query2.isSelfTarget)(evt) || !!state.context.isClickFocus || state.context.isTabbingBackward)
return;
send("ROOT.FOCUS");
},
onBlur() {
if (disabled)
return;
send("ROOT.BLUR");
}
}),
getItemProps(props2) {
const itemState = getItemState(props2);
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": (0, import_dom_query2.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": (0, import_dom_query2.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: props2.value });
if ((0, import_dom_query2.isSafari)()) {
event.currentTarget.focus({ preventScroll: true });
}
},
onKeyDown(event) {
if (event.defaultPrevented)
return;
if (!(0, import_dom_query2.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[(0, import_dom_event.getEventKey)(event)];
if (exec) {
exec(event);
if (event.key !== "Tab")
event.preventDefault();
}
}
});
}
};
}
// src/toggle-group.machine.ts
var import_core = require("@zag-js/core");
var import_dom_query3 = require("@zag-js/dom-query");
var import_utils2 = require("@zag-js/utils");
var { not, and } = import_core.guards;
function machine(userContext) {
const ctx = (0, import_utils2.compact)(userContext);
return (0, import_core.createMachine)(
{
id: "toggle-group",
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) ? (0, import_utils2.remove)(next, evt.value) : (0, import_utils2.add)(next, evt.value);
} else {
next = (0, import_utils2.isEqual)(ctx2.value, [evt.value]) ? [] : [evt.value];
}
set.value(ctx2, next);
},
focusNextToggle(ctx2) {
(0, import_dom_query3.raf)(() => {
if (!ctx2.focusedId)
return;
dom.getNextEl(ctx2, ctx2.focusedId)?.focus({ preventScroll: true });
});
},
focusPrevToggle(ctx2) {
(0, import_dom_query3.raf)(() => {
if (!ctx2.focusedId)
return;
dom.getPrevEl(ctx2, ctx2.focusedId)?.focus({ preventScroll: true });
});
},
focusFirstToggle(ctx2) {
(0, import_dom_query3.raf)(() => {
dom.getFirstEl(ctx2)?.focus({ preventScroll: true });
});
},
focusLastToggle(ctx2) {
(0, import_dom_query3.raf)(() => {
dom.getLastEl(ctx2)?.focus({ preventScroll: true });
});
}
}
}
);
}
var invoke = {
change(ctx) {
ctx.onValueChange?.({ value: Array.from(ctx.value) });
}
};
var set = {
value(ctx, value) {
if ((0, import_utils2.isEqual)(ctx.value, value))
return;
ctx.value = value;
invoke.change(ctx);
}
};
// src/toggle-group.props.ts
var import_types = require("@zag-js/types");
var import_utils3 = require("@zag-js/utils");
var props = (0, import_types.createProps)()([
"dir",
"disabled",
"getRootNode",
"id",
"ids",
"loopFocus",
"multiple",
"onValueChange",
"orientation",
"rovingFocus",
"value"
]);
var splitProps = (0, import_utils3.createSplitProps)(props);
var itemProps = (0, import_types.createProps)()(["value", "disabled"]);
var splitItemProps = (0, import_utils3.createSplitProps)(itemProps);
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
anatomy,
connect,
itemProps,
machine,
props,
splitItemProps,
splitProps
});
//# sourceMappingURL=index.js.map

14

package.json
{
"name": "@zag-js/toggle-group",
"version": "0.0.0-dev-20240605193509",
"version": "0.0.0-dev-20240605203045",
"description": "Core logic for the toggle widget implemented as a state machine",

@@ -30,8 +30,8 @@ "keywords": [

"dependencies": {
"@zag-js/anatomy": "0.0.0-dev-20240605193509",
"@zag-js/dom-query": "0.0.0-dev-20240605193509",
"@zag-js/dom-event": "0.0.0-dev-20240605193509",
"@zag-js/utils": "0.0.0-dev-20240605193509",
"@zag-js/core": "0.0.0-dev-20240605193509",
"@zag-js/types": "0.0.0-dev-20240605193509"
"@zag-js/anatomy": "0.0.0-dev-20240605203045",
"@zag-js/dom-query": "0.0.0-dev-20240605203045",
"@zag-js/dom-event": "0.0.0-dev-20240605203045",
"@zag-js/utils": "0.0.0-dev-20240605203045",
"@zag-js/core": "0.0.0-dev-20240605203045",
"@zag-js/types": "0.0.0-dev-20240605203045"
},

@@ -38,0 +38,0 @@ "devDependencies": {

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc