@destyler/tabs 0.2.6 → 0.2.9

package/dist/index.d.mts

@@ -42,9 +42,14 @@ interface PublicContext extends DirectionProperty, CommonProperties {
    */
   loopFocus: boolean;
   /**
-   * The selected tab id
+   * The controlled selected tab id
    */
-  value: string | null;
+  value?: string | null | undefined;
+  /**
+   * The initial selected tab id when it is not controlled.
+   * Prefer this over seeding with `value` for uncontrolled usage.
+   */
+  defaultValue?: string | null | undefined;
   /**
    * The orientation of the tabs. Can be `horizontal` or `vertical`
    * - `horizontal`: only left and right arrow key navigation will work.
@@ -210,8 +215,8 @@ declare function connect<T extends PropTypes>(state: State, send: Send, normaliz
 declare function machine(userContext: UserDefinedContext): _destyler_xstate0.Machine<MachineContext, MachineState, _destyler_xstate0.AnyEventObject>;
 //#endregion
 //#region src/props.d.ts
-declare const props: ("id" | "ids" | "translations" | "loopFocus" | "value" | "orientation" | "activationMode" | "onValueChange" | "onFocusChange" | "composite" | "deselectable" | "navigate" | "dir" | "getRootNode")[];
-declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "id" | "ids" | "translations" | "loopFocus" | "value" | "orientation" | "activationMode" | "onValueChange" | "onFocusChange" | "composite" | "deselectable" | "navigate" | "dir" | "getRootNode">];
+declare const props: ("value" | "ids" | "translations" | "loopFocus" | "defaultValue" | "orientation" | "activationMode" | "onValueChange" | "onFocusChange" | "composite" | "deselectable" | "navigate" | "dir" | "id" | "getRootNode")[];
+declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "value" | "ids" | "translations" | "loopFocus" | "defaultValue" | "orientation" | "activationMode" | "onValueChange" | "onFocusChange" | "composite" | "deselectable" | "navigate" | "dir" | "id" | "getRootNode">];
 declare const triggerProps: (keyof TriggerProps)[];
 declare const splitTriggerProps: <Props extends TriggerProps>(props: Props) => [TriggerProps, Omit<Props, keyof TriggerProps>];
 declare const contentProps: "value"[];

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import { createAnatomy } from "@destyler/anatomy";
 import { clickIfLink, createScope, dataAttr, getEventKey, getFocusables, isAnchorElement, isComposingEvent, isSafari, isSelfTarget, itemById, nextById, nextTick, prevById, queryAll, raf } from "@destyler/dom";
-import { compact, createSplitProps, first, isEqual, last } from "@destyler/utils";
+import { compact, createSplitProps, first, isControlled, isEqual, isPropUserProvided, last, resolveControllableProp, withControllableProvided } from "@destyler/utils";
 import { trackElementRect } from "@destyler/element-rect";
 import { createMachine, guards } from "@destyler/xstate";
 import { createProps } from "@destyler/types";
@@ -274,9 +274,9 @@ function connect(state, send, normalize) {
 //#region src/machine.ts
 const { not } = guards;
 const invoke = {
-	change: (ctx) => {
-		if (ctx.value == null) return;
-		ctx.onValueChange?.({ value: ctx.value });
+	change: (ctx, value) => {
+		if (value == null) return;
+		ctx.onValueChange?.({ value });
 	},
 	focusChange: (ctx) => {
 		if (ctx.focusedValue == null) return;
@@ -286,8 +286,12 @@ const invoke = {
 const set = {
 	value: (ctx, value) => {
 		if (isEqual(value, ctx.value)) return;
+		if (isControlled(ctx, "value")) {
+			invoke.change(ctx, value);
+			return;
+		}
 		ctx.value = value;
-		invoke.change(ctx);
+		invoke.change(ctx, value);
 	},
 	focusedValue: (ctx, value) => {
 		if (isEqual(value, ctx.focusedValue)) return;
@@ -296,21 +300,27 @@ const set = {
 	}
 };
 function machine(userContext) {
-	const ctx = compact(userContext);
+	const ctx = compact(withControllableProvided(userContext, ["value"]));
+	const { initial: initialValue } = resolveControllableProp({
+		value: ctx.value,
+		defaultValue: ctx.defaultValue,
+		valueProvided: isPropUserProvided(ctx, "value"),
+		fallback: null
+	});
 	return createMachine({
 		initial: "idle",
 		context: {
 			dir: "ltr",
 			orientation: "horizontal",
 			activationMode: "automatic",
-			value: null,
 			loopFocus: true,
 			composite: true,
 			navigate(details) {
 				clickIfLink(details.node);
 			},
 			...ctx,
-			focusedValue: ctx.value ?? null,
+			value: initialValue,
+			focusedValue: initialValue ?? null,
 			ssr: true,
 			indicatorState: {
 				rendered: false,
@@ -506,6 +516,7 @@ function machine(userContext) {
 const props = createProps()([
 	"activationMode",
 	"composite",
+	"defaultValue",
 	"deselectable",
 	"dir",
 	"getRootNode",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@destyler/tabs",
   "type": "module",
-  "version": "0.2.6",
+  "version": "0.2.9",
   "description": "A set of layered sections of content—known as tab panels—that are displayed one at a time.",
   "author": "Elone Hoo <elonehoo@gmail.com>",
   "license": "MIT",
@@ -22,12 +22,12 @@
     "dist"
   ],
   "dependencies": {
-    "@destyler/anatomy": "0.2.6",
-    "@destyler/dom": "0.2.6",
-    "@destyler/element-rect": "0.2.6",
-    "@destyler/types": "0.2.6",
-    "@destyler/utils": "0.2.6",
-    "@destyler/xstate": "0.2.6"
+    "@destyler/anatomy": "0.2.9",
+    "@destyler/dom": "0.2.9",
+    "@destyler/types": "0.2.9",
+    "@destyler/element-rect": "0.2.9",
+    "@destyler/utils": "0.2.9",
+    "@destyler/xstate": "0.2.9"
   },
   "publishConfig": {
     "access": "public"