@destyler/popover 0.2.6 → 0.2.9

package/dist/index.d.mts

@@ -6,7 +6,7 @@ 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<"anchor" | "trigger" | "content" | "title" | "description" | "closeTrigger" | "positioner" | "arrow" | "arrowTip" | "indicator">;
+declare const anatomy: _destyler_anatomy0.AnatomyInstance<"arrow" | "arrowTip" | "anchor" | "trigger" | "indicator" | "positioner" | "content" | "title" | "description" | "closeTrigger">;
 //#endregion
 //#region src/types.d.ts
 interface OpenChangeDetails {
@@ -26,7 +26,7 @@ interface PublicContext extends CommonProperties, DirectionProperty, Dismissable
   /**
    * The ids of the elements in the popover. Useful for composition.
    */
-  'ids'?: ElementIds | undefined;
+  ids?: ElementIds | undefined;
   /**
    * Whether the popover should be modal. When set to `true`:
    * - interaction with outside elements will be disabled
@@ -36,51 +36,52 @@ interface PublicContext extends CommonProperties, DirectionProperty, Dismissable
    *
    * @default false
    */
-  'modal'?: boolean | undefined;
+  modal?: boolean | undefined;
   /**
    * Whether the popover is portalled. This will proxy the tabbing behavior regardless of the DOM position
    * of the popover content.
    *
    * @default true
    */
-  'portalled'?: boolean | undefined;
+  portalled?: boolean | undefined;
   /**
    * Whether to automatically set focus on the first focusable
    * content within the popover when opened.
    *
    * @default true
    */
-  'autoFocus'?: boolean | undefined;
+  autoFocus?: boolean | undefined;
   /**
    * The element to focus on when the popover is opened.
    */
-  'initialFocusEl'?: (() => HTMLElement | null) | undefined;
+  initialFocusEl?: (() => HTMLElement | null) | undefined;
   /**
    * Whether to close the popover when the user clicks outside of the popover.
    * @default true
    */
-  'closeOnInteractOutside'?: boolean | undefined;
+  closeOnInteractOutside?: boolean | undefined;
   /**
    * Whether to close the popover when the escape key is pressed.
    * @default true
    */
-  'closeOnEscape'?: boolean | undefined;
+  closeOnEscape?: boolean | undefined;
   /**
    * Function invoked when the popover opens or closes
    */
-  'onOpenChange'?: ((details: OpenChangeDetails) => void) | undefined;
+  onOpenChange?: ((details: OpenChangeDetails) => void) | undefined;
   /**
    * The user provided options used to position the popover content
    */
-  'positioning': PositioningOptions;
+  positioning: PositioningOptions;
   /**
    * Whether the popover is open
    */
-  'open'?: boolean | undefined;
+  open?: boolean | undefined;
   /**
-   * Whether the popover is controlled by the user
+   * The initial open state of the popover when it is not controlled.
+   * Prefer this over seeding with `open` for uncontrolled usage.
    */
-  'open.controlled'?: boolean | undefined;
+  defaultOpen?: boolean | undefined;
 }
 type UserDefinedContext = RequiredBy<PublicContext, 'id'>;
 type ComputedContext = Readonly<{
@@ -148,7 +149,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: ("open" | "id" | "ids" | "modal" | "portalled" | "autoFocus" | "initialFocusEl" | "closeOnInteractOutside" | "closeOnEscape" | "onOpenChange" | "positioning" | "open.controlled" | "getRootNode" | "dir" | "onEscapeKeyDown" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside" | "persistentElements")[];
-declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "open" | "id" | "ids" | "modal" | "portalled" | "autoFocus" | "initialFocusEl" | "closeOnInteractOutside" | "closeOnEscape" | "onOpenChange" | "positioning" | "open.controlled" | "getRootNode" | "dir" | "onEscapeKeyDown" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside" | "persistentElements">];
+declare const props: ("open" | "ids" | "modal" | "portalled" | "autoFocus" | "initialFocusEl" | "closeOnInteractOutside" | "closeOnEscape" | "onOpenChange" | "positioning" | "defaultOpen" | "id" | "getRootNode" | "dir" | "onEscapeKeyDown" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside" | "persistentElements")[];
+declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "open" | "ids" | "modal" | "portalled" | "autoFocus" | "initialFocusEl" | "closeOnInteractOutside" | "closeOnEscape" | "onOpenChange" | "positioning" | "defaultOpen" | "id" | "getRootNode" | "dir" | "onEscapeKeyDown" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside" | "persistentElements">];
 //#endregion
 export { type MachineApi as Api, type UserDefinedContext as Context, type ElementIds, type FocusOutsideEvent, type InteractOutsideEvent, type OpenChangeDetails, type Placement, type PointerDownOutsideEvent, type PositioningOptions, type Service, anatomy, connect, machine, props, splitProps };

package/dist/index.mjs

@@ -5,7 +5,7 @@ import { ariaHidden } from "@destyler/aria-hidden";
 import { trackDismissableElement } from "@destyler/dismissable";
 import { trapFocus } from "@destyler/focus-trap";
 import { preventBodyScroll } from "@destyler/remove-scroll";
-import { compact, createSplitProps } from "@destyler/utils";
+import { compact, createSplitProps, isControlled, resolveControllableOpen, withControllableProvided } from "@destyler/utils";
 import { createMachine } from "@destyler/xstate";
 import { createProps } from "@destyler/types";
 
@@ -169,10 +169,11 @@ function connect(state, send, normalize) {
 //#endregion
 //#region src/machine.ts
 function machine(userContext) {
-	const ctx = compact(userContext);
+	const ctx = compact(withControllableProvided(userContext, ["open"]));
+	const { initialOpen } = resolveControllableOpen(ctx);
 	return createMachine({
 		id: "popover",
-		initial: ctx.open ? "open" : "closed",
+		initial: initialOpen ? "open" : "closed",
 		context: {
 			closeOnInteractOutside: true,
 			closeOnEscape: true,
@@ -247,7 +248,7 @@ function machine(userContext) {
 			}
 		}
 	}, {
-		guards: { isOpenControlled: (ctx$1) => !!ctx$1["open.controlled"] },
+		guards: { isOpenControlled: (ctx$1) => isControlled(ctx$1, "open") },
 		activities: {
 			trackPositioning(ctx$1) {
 				ctx$1.currentPlacement = ctx$1.positioning.placement;
@@ -393,8 +394,8 @@ const props = createProps()([
 	"onInteractOutside",
 	"onOpenChange",
 	"onPointerDownOutside",
-	"open.controlled",
 	"open",
+	"defaultOpen",
 	"persistentElements",
 	"portalled",
 	"positioning"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@destyler/popover",
   "type": "module",
-  "version": "0.2.6",
+  "version": "0.2.9",
   "description": "displays rich content in a portal, triggered by a button.",
   "author": "Elone Hoo <elonehoo@gmail.com>",
   "license": "MIT",
@@ -22,16 +22,16 @@
     "dist"
   ],
   "dependencies": {
-    "@destyler/dismissable": "0.2.6",
-    "@destyler/aria-hidden": "0.2.6",
-    "@destyler/dom": "0.2.6",
-    "@destyler/anatomy": "0.2.6",
-    "@destyler/remove-scroll": "0.2.6",
-    "@destyler/types": "0.2.6",
-    "@destyler/popper": "0.2.6",
-    "@destyler/focus-trap": "0.2.6",
-    "@destyler/xstate": "0.2.6",
-    "@destyler/utils": "0.2.6"
+    "@destyler/aria-hidden": "0.2.9",
+    "@destyler/dom": "0.2.9",
+    "@destyler/anatomy": "0.2.9",
+    "@destyler/dismissable": "0.2.9",
+    "@destyler/types": "0.2.9",
+    "@destyler/remove-scroll": "0.2.9",
+    "@destyler/focus-trap": "0.2.9",
+    "@destyler/utils": "0.2.9",
+    "@destyler/xstate": "0.2.9",
+    "@destyler/popper": "0.2.9"
   },
   "publishConfig": {
     "access": "public"