@destyler/edit 0.2.6-beta.1 → 0.2.7

package/dist/index.d.mts

@@ -1,11 +1,10 @@
-import * as _destyler_anatomy0 from "@destyler/anatomy";
 import { FocusOutsideEvent, InteractOutsideEvent, InteractOutsideHandlers, PointerDownOutsideEvent } from "@destyler/interact-outside";
 import * as _destyler_xstate0 from "@destyler/xstate";
 import { AnyEventObject, Machine, XSend, XState } from "@destyler/xstate";
 import { CommonProperties, DirectionProperty, NormalizeProps, PropTypes, RequiredBy } from "@destyler/types";
 
 //#region src/anatomy.d.ts
-declare const anatomy: _destyler_anatomy0.AnatomyInstance<"preview" | "root" | "area" | "label" | "input" | "control" | "submitTrigger" | "cancelTrigger" | "editTrigger">;
+declare const anatomy: any;
 //#endregion
 //#region src/types.d.ts
 interface ValueChangeDetails {
@@ -37,23 +36,23 @@ interface PublicContext extends DirectionProperty, CommonProperties, InteractOut
   /**
    * The ids of the elements in the editable. Useful for composition.
    */
-  'ids'?: ElementIds | undefined;
+  ids?: ElementIds | undefined;
   /**
    * Whether the input's value is invalid.
    */
-  'invalid'?: boolean | undefined;
+  invalid?: boolean | undefined;
   /**
    * The name attribute of the editable component. Used for form submission.
    */
-  'name'?: string | undefined;
+  name?: string | undefined;
   /**
    * The associate form of the underlying input.
    */
-  'form'?: string | undefined;
+  form?: string | undefined;
   /**
    * Whether the editable should auto-resize to fit the content.
    */
-  'autoResize'?: boolean | undefined;
+  autoResize?: boolean | undefined;
   /**
    * The activation mode for the preview element.
    *
@@ -63,7 +62,7 @@ interface PublicContext extends DirectionProperty, CommonProperties, InteractOut
    *
    * @default "focus"
    */
-  'activationMode': ActivationMode;
+  activationMode: ActivationMode;
   /**
    * The action that triggers submit in the edit mode:
    *
@@ -74,72 +73,75 @@ interface PublicContext extends DirectionProperty, CommonProperties, InteractOut
    *
    * @default "both"
    */
-  'submitMode': SubmitMode;
+  submitMode: SubmitMode;
   /**
-   * Whether the editable is in edit mode.
+   * Whether the editable is in edit mode (controlled sync field / legacy seed).
+   * Phase 3: presence of `edit` is presence-controlled.
+   * There is no `defaultEdit` — omit `edit` and enter via gestures for uncontrolled usage.
    */
-  'edit'?: boolean | undefined;
-  /**
-   * Whether the editable is controlled
-   */
-  'edit.controlled'?: boolean | undefined;
+  edit?: boolean | undefined;
   /**
    * Whether to select the text in the input when it is focused.
    * @default true
    */
-  'selectOnFocus'?: boolean | undefined;
+  selectOnFocus?: boolean | undefined;
+  /**
+   * The controlled value of the editable in both edit and preview mode
+   */
+  value?: string | undefined;
   /**
-   * The value of the editable in both edit and preview mode
+   * The initial value when it is not controlled.
+   * Prefer this over seeding with `value` for uncontrolled usage.
    */
-  'value': string;
+  defaultValue?: string | undefined;
   /**
    * The maximum number of characters allowed in the editable
    */
-  'maxLength'?: number | undefined;
+  maxLength?: number | undefined;
   /**
    * Whether the editable is disabled
    */
-  'disabled'?: boolean | undefined;
+  disabled?: boolean | undefined;
   /**
    * Whether the editable is readonly
    */
-  'readOnly'?: boolean | undefined;
+  readOnly?: boolean | undefined;
   /**
    * Whether the editable is required
    */
-  'required'?: boolean | undefined;
+  required?: boolean | undefined;
   /**
    * The callback that is called when the editable's value is changed
    */
-  'onValueChange'?: ((details: ValueChangeDetails) => void) | undefined;
+  onValueChange?: ((details: ValueChangeDetails) => void) | undefined;
   /**
    * The callback that is called when the esc key is pressed or the cancel button is clicked
    */
-  'onValueRevert'?: ((details: ValueChangeDetails) => void) | undefined;
+  onValueRevert?: ((details: ValueChangeDetails) => void) | undefined;
   /**
    * The callback that is called when the editable's value is submitted.
    */
-  'onValueCommit'?: ((details: ValueChangeDetails) => void) | undefined;
+  onValueCommit?: ((details: ValueChangeDetails) => void) | undefined;
   /**
    * The callback that is called when the edit mode is changed
    */
-  'onEditChange'?: ((details: EditChangeDetails) => void) | undefined;
+  onEditChange?: ((details: EditChangeDetails) => void) | undefined;
   /**
    * The placeholder value to show when the `value` is empty
    */
-  'placeholder'?: string | {
+  placeholder?: string | {
     edit: string;
     preview: string;
   } | undefined;
   /**
    * Specifies the localized strings that identifies the accessibility elements and their states
    */
-  'translations': IntlTranslations;
+  translations: IntlTranslations;
   /**
    * The element that should receive focus when the editable is closed.
    * By default, it will focus on the trigger element.
    */
-  'finalFocusEl'?: (() => HTMLElement | null) | undefined;
+  finalFocusEl?: (() => HTMLElement | null) | undefined;
 }
 type UserDefinedContext = RequiredBy<PublicContext, 'id'>;
 type ComputedContext = Readonly<{
@@ -228,7 +230,7 @@ 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: ("edit" | "id" | "ids" | "invalid" | "name" | "form" | "autoResize" | "activationMode" | "submitMode" | "edit.controlled" | "selectOnFocus" | "value" | "maxLength" | "disabled" | "readOnly" | "required" | "onValueChange" | "onValueRevert" | "onValueCommit" | "onEditChange" | "placeholder" | "translations" | "finalFocusEl" | "dir" | "getRootNode" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside")[];
-declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "edit" | "id" | "ids" | "invalid" | "name" | "form" | "autoResize" | "activationMode" | "submitMode" | "edit.controlled" | "selectOnFocus" | "value" | "maxLength" | "disabled" | "readOnly" | "required" | "onValueChange" | "onValueRevert" | "onValueCommit" | "onEditChange" | "placeholder" | "translations" | "finalFocusEl" | "dir" | "getRootNode" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside">];
+declare const props: ("id" | "ids" | "invalid" | "name" | "form" | "autoResize" | "activationMode" | "submitMode" | "edit" | "selectOnFocus" | "value" | "defaultValue" | "maxLength" | "disabled" | "readOnly" | "required" | "onValueChange" | "onValueRevert" | "onValueCommit" | "onEditChange" | "placeholder" | "translations" | "finalFocusEl" | "dir" | "getRootNode" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside")[];
+declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "id" | "ids" | "invalid" | "name" | "form" | "autoResize" | "activationMode" | "submitMode" | "edit" | "selectOnFocus" | "value" | "defaultValue" | "maxLength" | "disabled" | "readOnly" | "required" | "onValueChange" | "onValueRevert" | "onValueCommit" | "onEditChange" | "placeholder" | "translations" | "finalFocusEl" | "dir" | "getRootNode" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside">];
 //#endregion
 export { type ActivationMode, type MachineApi as Api, type UserDefinedContext as Context, type EditChangeDetails, type ElementIds, type FocusOutsideEvent, type InteractOutsideEvent, type IntlTranslations, type PointerDownOutsideEvent, type Service, type SubmitMode, type ValueChangeDetails, anatomy, connect, machine, props, splitProps };

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import { createAnatomy } from "@destyler/anatomy";
 import { ariaAttr, contains, createScope, dataAttr, isApple, isComposingEvent, raf } from "@destyler/dom";
 import { trackInteractOutside } from "@destyler/interact-outside";
-import { compact, createSplitProps, isEqual } from "@destyler/utils";
+import { compact, createSplitProps, isControlled, isEqual, isPropUserProvided, resolveControllableProp, withControllableProvided } from "@destyler/utils";
 import { createMachine } from "@destyler/xstate";
 import { createProps } from "@destyler/types";
 
@@ -306,15 +306,30 @@ const invoke = { change(ctx) {
 } };
 const set = { value(ctx, value) {
 	if (isEqual(ctx.value, value)) return;
+	if (isControlled(ctx, "value")) {
+		ctx.onValueChange?.({ value });
+		return;
+	}
 	ctx.value = value;
 	invoke.change(ctx);
 } };
 function machine(userContext) {
-	const ctx = compact(userContext);
+	const ctx = compact(withControllableProvided(userContext, ["value", "edit"]));
+	const { initial: initialValue } = resolveControllableProp({
+		value: ctx.value,
+		defaultValue: ctx.defaultValue,
+		valueProvided: isPropUserProvided(ctx, "value"),
+		fallback: ""
+	});
+	const { initial: initialEdit } = resolveControllableProp({
+		value: ctx.edit,
+		valueProvided: isPropUserProvided(ctx, "edit"),
+		fallback: false
+	});
 	return createMachine({
 		id: "editable",
-		initial: ctx.edit ? "edit" : "preview",
-		entry: ctx.edit ? ["focusInput"] : void 0,
+		initial: initialEdit ? "edit" : "preview",
+		entry: initialEdit ? ["focusInput"] : void 0,
 		context: {
 			activationMode: "focus",
 			submitMode: "both",
@@ -324,6 +339,8 @@ function machine(userContext) {
 			disabled: false,
 			readOnly: false,
 			...ctx,
+			value: initialValue,
+			previousValue: initialValue,
 			translations: {
 				input: "editable input",
 				edit: "edit",
@@ -411,7 +428,7 @@ function machine(userContext) {
 		}
 	}, {
 		guards: {
-			isEditControlled: (ctx$1) => !!ctx$1["edit.controlled"],
+			isEditControlled: (ctx$1) => isControlled(ctx$1, "edit"),
 			isSubmitEvent: (_ctx, evt) => evt.previousEvent?.type === "SUBMIT"
 		},
 		activities: { trackInteractOutside(ctx$1, _evt, { send }) {
@@ -492,6 +509,7 @@ const props = createProps()([
 	"activationMode",
 	"autoResize",
 	"dir",
+	"defaultValue",
 	"disabled",
 	"finalFocusEl",
 	"form",
@@ -513,7 +531,6 @@ const props = createProps()([
 	"required",
 	"selectOnFocus",
 	"edit",
-	"edit.controlled",
 	"submitMode",
 	"translations",
 	"value"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@destyler/edit",
   "type": "module",
-  "version": "0.2.6-beta.1",
+  "version": "0.2.7",
   "description": "a component that allows users to edit text in place.",
   "author": "Elone Hoo <elonehoo@gmail.com>",
   "license": "MIT",
@@ -22,12 +22,12 @@
     "dist"
   ],
   "dependencies": {
-    "@destyler/anatomy": "0.2.6-beta.1",
-    "@destyler/dom": "0.2.6-beta.1",
-    "@destyler/interact-outside": "0.2.6-beta.1",
-    "@destyler/types": "0.2.6-beta.1",
-    "@destyler/xstate": "0.2.6-beta.1",
-    "@destyler/utils": "0.2.6-beta.1"
+    "@destyler/anatomy": "0.2.7",
+    "@destyler/dom": "0.2.7",
+    "@destyler/interact-outside": "0.2.7",
+    "@destyler/utils": "0.2.7",
+    "@destyler/xstate": "0.2.7",
+    "@destyler/types": "0.2.7"
   },
   "publishConfig": {
     "access": "public"