@zag-js/accordion
Version:
Core logic for the accordion widget implemented as a state machine
186 lines (184 loc) • 6.91 kB
JavaScript
;
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/accordion.connect.ts
var accordion_connect_exports = {};
__export(accordion_connect_exports, {
connect: () => connect
});
module.exports = __toCommonJS(accordion_connect_exports);
var import_dom_query = require("@zag-js/dom-query");
var import_accordion = require("./accordion.anatomy.js");
var dom = __toESM(require("./accordion.dom.js"));
function connect(service, normalize) {
const { send, context, prop, scope, computed } = service;
const focusedValue = context.get("focusedValue");
const value = context.get("value");
const multiple = prop("multiple");
function setValue(value2) {
let nextValue = value2;
if (!multiple && nextValue.length > 1) {
nextValue = [nextValue[0]];
}
send({ type: "VALUE.SET", value: nextValue });
}
function getItemState(props) {
return {
expanded: value.includes(props.value),
focused: focusedValue === props.value,
disabled: Boolean(props.disabled ?? prop("disabled"))
};
}
return {
focusedValue,
value,
setValue,
getItemState,
getRootProps() {
return normalize.element({
...import_accordion.parts.root.attrs,
dir: prop("dir"),
id: dom.getRootId(scope),
"data-orientation": prop("orientation")
});
},
getItemProps(props) {
const itemState = getItemState(props);
return normalize.element({
...import_accordion.parts.item.attrs,
dir: prop("dir"),
id: dom.getItemId(scope, props.value),
"data-state": itemState.expanded ? "open" : "closed",
"data-focus": (0, import_dom_query.dataAttr)(itemState.focused),
"data-disabled": (0, import_dom_query.dataAttr)(itemState.disabled),
"data-orientation": prop("orientation")
});
},
getItemContentProps(props) {
const itemState = getItemState(props);
return normalize.element({
...import_accordion.parts.itemContent.attrs,
dir: prop("dir"),
role: "region",
id: dom.getItemContentId(scope, props.value),
"aria-labelledby": dom.getItemTriggerId(scope, props.value),
hidden: !itemState.expanded,
"data-state": itemState.expanded ? "open" : "closed",
"data-disabled": (0, import_dom_query.dataAttr)(itemState.disabled),
"data-focus": (0, import_dom_query.dataAttr)(itemState.focused),
"data-orientation": prop("orientation")
});
},
getItemIndicatorProps(props) {
const itemState = getItemState(props);
return normalize.element({
...import_accordion.parts.itemIndicator.attrs,
dir: prop("dir"),
"aria-hidden": true,
"data-state": itemState.expanded ? "open" : "closed",
"data-disabled": (0, import_dom_query.dataAttr)(itemState.disabled),
"data-focus": (0, import_dom_query.dataAttr)(itemState.focused),
"data-orientation": prop("orientation")
});
},
getItemTriggerProps(props) {
const { value: value2 } = props;
const itemState = getItemState(props);
return normalize.button({
...import_accordion.parts.itemTrigger.attrs,
type: "button",
dir: prop("dir"),
id: dom.getItemTriggerId(scope, value2),
"aria-controls": dom.getItemContentId(scope, value2),
"data-controls": dom.getItemContentId(scope, value2),
"aria-expanded": itemState.expanded,
disabled: itemState.disabled,
"data-orientation": prop("orientation"),
"data-state": itemState.expanded ? "open" : "closed",
"data-focus": (0, import_dom_query.dataAttr)(itemState.focused),
"data-ownedby": dom.getRootId(scope),
onFocus() {
if (itemState.disabled) return;
send({ type: "TRIGGER.FOCUS", value: value2 });
},
onBlur() {
if (itemState.disabled) return;
send({ type: "TRIGGER.BLUR" });
},
onClick(event) {
if (itemState.disabled) return;
if ((0, import_dom_query.isSafari)()) {
event.currentTarget.focus();
}
send({ type: "TRIGGER.CLICK", value: value2 });
},
onKeyDown(event) {
if (event.defaultPrevented) return;
if (itemState.disabled) return;
const keyMap = {
ArrowDown() {
if (computed("isHorizontal")) return;
send({ type: "GOTO.NEXT", value: value2 });
},
ArrowUp() {
if (computed("isHorizontal")) return;
send({ type: "GOTO.PREV", value: value2 });
},
ArrowRight() {
if (!computed("isHorizontal")) return;
send({ type: "GOTO.NEXT", value: value2 });
},
ArrowLeft() {
if (!computed("isHorizontal")) return;
send({ type: "GOTO.PREV", value: value2 });
},
Home() {
send({ type: "GOTO.FIRST", value: value2 });
},
End() {
send({ type: "GOTO.LAST", value: value2 });
}
};
const key = (0, import_dom_query.getEventKey)(event, {
dir: prop("dir"),
orientation: prop("orientation")
});
const exec = keyMap[key];
if (exec) {
exec(event);
event.preventDefault();
}
}
});
}
};
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
connect
});