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

@zag-js/tabs

Package Overview
Dependencies
Maintainers
1
Versions
1027
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@zag-js/tabs - npm Package Compare versions

Comparing version 0.0.0-dev-20220416152643 to 0.0.0-dev-20220417135151

2

dist/index.d.ts
export { connect } from "./tabs.connect";
export { machine } from "./tabs.machine";
export type { MachineContext, MachineState } from "./tabs.types";
export type { UserDefinedContext as Context } from "./tabs.types";
//# sourceMappingURL=index.d.ts.map

366

dist/index.js

@@ -402,202 +402,204 @@ var __defProp = Object.defineProperty;

var { not } = import_core.guards;
var machine = (0, import_core.createMachine)({
initial: "unknown",
context: {
dir: "ltr",
orientation: "horizontal",
activationMode: "automatic",
value: null,
focusedValue: null,
uid: "",
previousValues: [],
indicatorRect: { left: "0px", top: "0px", width: "0px", height: "0px" },
hasMeasuredRect: false,
isIndicatorRendered: false,
loop: true,
messages: {}
},
computed: {
isHorizontal: (ctx) => ctx.orientation === "horizontal",
isVertical: (ctx) => ctx.orientation === "vertical"
},
created: ["setPrevSelectedTabs"],
watch: {
focusedValue: "invokeOnFocus",
value: ["invokeOnChange", "setPrevSelectedTabs", "setIndicatorRect", "setContentTabIndex"],
dir: ["clearMeasured", "setIndicatorRect"]
},
on: {
SET_VALUE: {
actions: "setValue"
function machine(ctx = {}) {
return (0, import_core.createMachine)({
initial: "unknown",
context: __spreadValues({
dir: "ltr",
orientation: "horizontal",
activationMode: "automatic",
value: null,
focusedValue: null,
uid: "",
previousValues: [],
indicatorRect: { left: "0px", top: "0px", width: "0px", height: "0px" },
hasMeasuredRect: false,
isIndicatorRendered: false,
loop: true,
messages: {}
}, ctx),
computed: {
isHorizontal: (ctx2) => ctx2.orientation === "horizontal",
isVertical: (ctx2) => ctx2.orientation === "vertical"
},
DELETE: {
actions: "deleteValue"
}
},
states: {
unknown: {
on: {
SETUP: {
target: "idle",
actions: ["setupDocument", "checkRenderedElements", "setIndicatorRect", "setContentTabIndex"]
}
created: ["setPrevSelectedTabs"],
watch: {
focusedValue: "invokeOnFocus",
value: ["invokeOnChange", "setPrevSelectedTabs", "setIndicatorRect", "setContentTabIndex"],
dir: ["clearMeasured", "setIndicatorRect"]
},
on: {
SET_VALUE: {
actions: "setValue"
},
DELETE: {
actions: "deleteValue"
}
},
idle: {
on: {
TAB_FOCUS: {
guard: "selectOnFocus",
target: "focused",
actions: ["setFocusedValue", "setValue"]
},
TAB_CLICK: {
target: "focused",
actions: ["setFocusedValue", "setValue"]
states: {
unknown: {
on: {
SETUP: {
target: "idle",
actions: ["setupDocument", "checkRenderedElements", "setIndicatorRect", "setContentTabIndex"]
}
}
}
},
focused: {
on: {
TAB_CLICK: {
target: "focused",
actions: ["setFocusedValue", "setValue"]
},
ARROW_LEFT: {
guard: "isHorizontal",
actions: "focusPrevTab"
},
ARROW_RIGHT: {
guard: "isHorizontal",
actions: "focusNextTab"
},
ARROW_UP: {
guard: "isVertical",
actions: "focusPrevTab"
},
ARROW_DOWN: {
guard: "isVertical",
actions: "focusNextTab"
},
HOME: {
actions: "focusFirstTab"
},
END: {
actions: "focusLastTab"
},
ENTER: {
guard: not("selectOnFocus"),
actions: "setValue"
},
TAB_FOCUS: [
{
},
idle: {
on: {
TAB_FOCUS: {
guard: "selectOnFocus",
target: "focused",
actions: ["setFocusedValue", "setValue"]
},
{ actions: "setFocusedValue" }
],
TAB_BLUR: {
target: "idle",
actions: "clearFocusedValue"
TAB_CLICK: {
target: "focused",
actions: ["setFocusedValue", "setValue"]
}
}
},
focused: {
on: {
TAB_CLICK: {
target: "focused",
actions: ["setFocusedValue", "setValue"]
},
ARROW_LEFT: {
guard: "isHorizontal",
actions: "focusPrevTab"
},
ARROW_RIGHT: {
guard: "isHorizontal",
actions: "focusNextTab"
},
ARROW_UP: {
guard: "isVertical",
actions: "focusPrevTab"
},
ARROW_DOWN: {
guard: "isVertical",
actions: "focusNextTab"
},
HOME: {
actions: "focusFirstTab"
},
END: {
actions: "focusLastTab"
},
ENTER: {
guard: not("selectOnFocus"),
actions: "setValue"
},
TAB_FOCUS: [
{
guard: "selectOnFocus",
actions: ["setFocusedValue", "setValue"]
},
{ actions: "setFocusedValue" }
],
TAB_BLUR: {
target: "idle",
actions: "clearFocusedValue"
}
}
}
}
}
}, {
guards: {
isVertical: (ctx) => ctx.isVertical,
isHorizontal: (ctx) => ctx.isHorizontal,
selectOnFocus: (ctx) => ctx.activationMode === "automatic"
},
actions: {
setupDocument(ctx, evt) {
ctx.uid = evt.id;
if (evt.doc)
ctx.doc = (0, import_core.ref)(evt.doc);
}, {
guards: {
isVertical: (ctx2) => ctx2.isVertical,
isHorizontal: (ctx2) => ctx2.isHorizontal,
selectOnFocus: (ctx2) => ctx2.activationMode === "automatic"
},
setFocusedValue(ctx, evt) {
ctx.focusedValue = evt.value;
},
clearFocusedValue(ctx) {
ctx.focusedValue = null;
},
setValue(ctx, evt) {
ctx.value = evt.value;
},
invokeOnDelete(ctx, evt) {
var _a;
(_a = ctx.onDelete) == null ? void 0 : _a.call(ctx, { value: evt.value });
},
focusFirstTab(ctx) {
nextTick(() => {
actions: {
setupDocument(ctx2, evt) {
ctx2.uid = evt.id;
if (evt.doc)
ctx2.doc = (0, import_core.ref)(evt.doc);
},
setFocusedValue(ctx2, evt) {
ctx2.focusedValue = evt.value;
},
clearFocusedValue(ctx2) {
ctx2.focusedValue = null;
},
setValue(ctx2, evt) {
ctx2.value = evt.value;
},
invokeOnDelete(ctx2, evt) {
var _a;
return (_a = dom.getFirstEl(ctx)) == null ? void 0 : _a.focus();
});
},
focusLastTab(ctx) {
nextTick(() => {
var _a;
return (_a = dom.getLastEl(ctx)) == null ? void 0 : _a.focus();
});
},
focusNextTab(ctx) {
if (!ctx.focusedValue)
return;
const next = dom.getNextEl(ctx, ctx.focusedValue);
nextTick(() => next == null ? void 0 : next.focus());
},
focusPrevTab(ctx) {
if (!ctx.focusedValue)
return;
const prev = dom.getPrevEl(ctx, ctx.focusedValue);
nextTick(() => prev == null ? void 0 : prev.focus());
},
setIndicatorRect(ctx) {
nextTick(() => {
if (!ctx.isIndicatorRendered || !ctx.value)
(_a = ctx2.onDelete) == null ? void 0 : _a.call(ctx2, { value: evt.value });
},
focusFirstTab(ctx2) {
nextTick(() => {
var _a;
return (_a = dom.getFirstEl(ctx2)) == null ? void 0 : _a.focus();
});
},
focusLastTab(ctx2) {
nextTick(() => {
var _a;
return (_a = dom.getLastEl(ctx2)) == null ? void 0 : _a.focus();
});
},
focusNextTab(ctx2) {
if (!ctx2.focusedValue)
return;
ctx.indicatorRect = dom.getRectById(ctx, ctx.value);
if (ctx.hasMeasuredRect)
const next = dom.getNextEl(ctx2, ctx2.focusedValue);
nextTick(() => next == null ? void 0 : next.focus());
},
focusPrevTab(ctx2) {
if (!ctx2.focusedValue)
return;
const prev = dom.getPrevEl(ctx2, ctx2.focusedValue);
nextTick(() => prev == null ? void 0 : prev.focus());
},
setIndicatorRect(ctx2) {
nextTick(() => {
ctx.hasMeasuredRect = true;
if (!ctx2.isIndicatorRendered || !ctx2.value)
return;
ctx2.indicatorRect = dom.getRectById(ctx2, ctx2.value);
if (ctx2.hasMeasuredRect)
return;
nextTick(() => {
ctx2.hasMeasuredRect = true;
});
});
});
},
checkRenderedElements(ctx) {
nextTick(() => {
ctx.isIndicatorRendered = !!dom.getIndicatorEl(ctx);
});
},
clearMeasured(ctx) {
ctx.hasMeasuredRect = false;
},
invokeOnChange(ctx) {
var _a;
(_a = ctx.onChange) == null ? void 0 : _a.call(ctx, { value: ctx.value });
},
invokeOnFocus(ctx) {
var _a;
(_a = ctx.onFocus) == null ? void 0 : _a.call(ctx, { value: ctx.focusedValue });
},
setPrevSelectedTabs(ctx) {
if (ctx.value != null) {
const newSelected = Array.from(ctx.previousValues).concat(ctx.value);
ctx.previousValues = Array.from(new Set(newSelected));
},
checkRenderedElements(ctx2) {
nextTick(() => {
ctx2.isIndicatorRendered = !!dom.getIndicatorEl(ctx2);
});
},
clearMeasured(ctx2) {
ctx2.hasMeasuredRect = false;
},
invokeOnChange(ctx2) {
var _a;
(_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
},
invokeOnFocus(ctx2) {
var _a;
(_a = ctx2.onFocus) == null ? void 0 : _a.call(ctx2, { value: ctx2.focusedValue });
},
setPrevSelectedTabs(ctx2) {
if (ctx2.value != null) {
const newSelected = Array.from(ctx2.previousValues).concat(ctx2.value);
ctx2.previousValues = Array.from(new Set(newSelected));
}
},
setContentTabIndex(ctx2) {
nextTick(() => {
const panel = dom.getActiveContentEl(ctx2);
if (!panel)
return;
const focusables = getFocusables(panel);
if (focusables.length > 0) {
panel.removeAttribute("tabindex");
} else {
panel.setAttribute("tabindex", "0");
}
});
}
},
setContentTabIndex(ctx) {
nextTick(() => {
const panel = dom.getActiveContentEl(ctx);
if (!panel)
return;
const focusables = getFocusables(panel);
if (focusables.length > 0) {
panel.removeAttribute("tabindex");
} else {
panel.setAttribute("tabindex", "0");
}
});
}
}
});
});
}
//# sourceMappingURL=index.js.map

5

dist/tabs.connect.d.ts

@@ -1,5 +0,4 @@

import { StateMachine as S } from "@zag-js/core";
import { PropTypes, ReactPropTypes } from "@zag-js/types";
import { MachineContext, MachineState, TabProps } from "./tabs.types";
export declare function connect<T extends PropTypes = ReactPropTypes>(state: S.State<MachineContext, MachineState>, send: (event: S.Event<S.AnyEventObject>) => void, normalize?: import("@zag-js/types").NormalizeProps): {
import type { Send, State, TabProps } from "./tabs.types";
export declare function connect<T extends PropTypes = ReactPropTypes>(state: State, send: Send, normalize?: import("@zag-js/types").NormalizeProps): {
value: string;

@@ -6,0 +5,0 @@ focusedValue: string;

4

dist/tabs.machine.d.ts

@@ -1,3 +0,3 @@

import { MachineContext, MachineState } from "./tabs.types";
export declare const machine: import("@zag-js/core").Machine<MachineContext, MachineState, import("@zag-js/core").StateMachine.AnyEventObject>;
import { MachineContext, MachineState, UserDefinedContext } from "./tabs.types";
export declare function machine(ctx?: UserDefinedContext): import("@zag-js/core").Machine<MachineContext, MachineState, import("@zag-js/core").StateMachine.AnyEventObject>;
//# sourceMappingURL=tabs.machine.d.ts.map

75

dist/tabs.types.d.ts

@@ -1,2 +0,3 @@

import { Context } from "@zag-js/types";
import { StateMachine as S } from "@zag-js/core";
import { Context, DirectionProperty } from "@zag-js/types";
declare type IntlMessages = {

@@ -6,3 +7,3 @@ tablistLabel?: string;

};
declare type IdMap = Partial<{
declare type ElementIds = Partial<{
root: string;

@@ -14,7 +15,7 @@ trigger: string;

}>;
export declare type MachineContext = Context<{
declare type PublicContext = DirectionProperty & {
/**
* The ids of the elements in the tabs. Useful for composition.
*/
ids?: IdMap;
ids?: ElementIds;
/**

@@ -34,6 +35,2 @@ * Specifies the localized strings that identifies the accessibility elements and their states

/**
* @internal The focused tab id
*/
focusedValue: string | null;
/**
* The selected tab id

@@ -51,10 +48,2 @@ */

/**
* @computed Whether the tab is in the horizontal orientation
*/
readonly isHorizontal: boolean;
/**
* @computed Whether the tab is in the vertical orientation
*/
readonly isVertical: boolean;
/**
* The activation mode of the tabs. Can be `manual` or `automatic`

@@ -67,15 +56,2 @@ * - `manual`: Tabs are activated when clicked or press `enter` key.

/**
* @internal The active tab indicator's dom rect
*/
indicatorRect?: Partial<{
left: string;
top: string;
width: string;
height: string;
}>;
/**
* @internal Whether the active tab indicator's rect has been measured
*/
hasMeasuredRect?: boolean;
/**
* Callback to be called when the selected/active tab changes

@@ -98,10 +74,49 @@ */

}) => void;
};
export declare type UserDefinedContext = Partial<PublicContext>;
declare type ComputedContext = Readonly<{
/**
* @internal The previously selected tab ids. This is useful for performance optimization
* @computed
* Whether the tab is in the horizontal orientation
*/
isHorizontal: boolean;
/**
* @computed
* Whether the tab is in the vertical orientation
*/
isVertical: boolean;
}>;
declare type PrivateContext = Context<{
/**
* @internal
* The focused tab id
*/
focusedValue: string | null;
/**
* @internal
* The active tab indicator's dom rect
*/
indicatorRect?: Partial<{
left: string;
top: string;
width: string;
height: string;
}>;
/**
* @internal
* Whether the active tab indicator's rect has been measured
*/
hasMeasuredRect?: boolean;
/**
* @internal
* The previously selected tab ids. This is useful for performance optimization
*/
previousValues: string[];
}>;
export declare type MachineContext = PublicContext & ComputedContext & PrivateContext;
export declare type MachineState = {
value: "unknown" | "idle" | "focused";
};
export declare type State = S.State<MachineContext, MachineState>;
export declare type Send = S.Send<S.AnyEventObject>;
export declare type TabProps = {

@@ -108,0 +123,0 @@ value: string;

10

package.json
{
"name": "@zag-js/tabs",
"version": "0.0.0-dev-20220416152643",
"version": "0.0.0-dev-20220417135151",
"description": "Core logic for the tabs widget implemented as a state machine",

@@ -32,6 +32,6 @@ "keywords": [

"dependencies": {
"@zag-js/core": "^0.0.0-dev-20220416152643",
"@zag-js/dom-utils": "^0.0.0-dev-20220416152643",
"@zag-js/types": "^0.0.0-dev-20220416152643",
"@zag-js/utils": "^0.0.0-dev-20220416152643"
"@zag-js/core": "^0.0.0-dev-20220417135151",
"@zag-js/dom-utils": "^0.0.0-dev-20220417135151",
"@zag-js/types": "^0.0.0-dev-20220417135151",
"@zag-js/utils": "^0.0.0-dev-20220417135151"
},

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

dist/index.d.ts.map

Sorry, the diff of this file is not supported yet

dist/index.js.map

Sorry, the diff of this file is not supported yet

dist/index.mjs

Sorry, the diff of this file is not supported yet

dist/index.mjs.map

Sorry, the diff of this file is not supported yet

dist/tabs.connect.d.ts.map

Sorry, the diff of this file is not supported yet

dist/tabs.machine.d.ts.map

Sorry, the diff of this file is not supported yet

dist/tabs.types.d.ts.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

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

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc