@destyler/hover-card 0.2.6 → 0.2.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.mts CHANGED
@@ -5,7 +5,7 @@ import { AnyEventObject, Machine, XSend, XState } from "@destyler/xstate";
5
5
  import { CommonProperties, DirectionProperty, NormalizeProps, PropTypes, RequiredBy } from "@destyler/types";
6
6
 
7
7
  //#region src/anatomy.d.ts
8
- declare const anatomy: _destyler_anatomy0.AnatomyInstance<"trigger" | "content" | "positioner" | "arrow" | "arrowTip">;
8
+ declare const anatomy: _destyler_anatomy0.AnatomyInstance<"arrow" | "arrowTip" | "trigger" | "positioner" | "content">;
9
9
  //#endregion
10
10
  //#region src/types.d.ts
11
11
  interface OpenChangeDetails {
@@ -21,33 +21,34 @@ interface PublicContext extends DirectionProperty, CommonProperties {
21
21
  /**
22
22
  * The ids of the elements in the popover. Useful for composition.
23
23
  */
24
- 'ids'?: ElementIds | undefined;
24
+ ids?: ElementIds | undefined;
25
25
  /**
26
26
  * Function called when the hover card opens or closes.
27
27
  */
28
- 'onOpenChange'?: ((details: OpenChangeDetails) => void) | undefined;
28
+ onOpenChange?: ((details: OpenChangeDetails) => void) | undefined;
29
29
  /**
30
30
  * The duration from when the mouse enters the trigger until the hover card opens.
31
31
  * @default 700
32
32
  */
33
- 'openDelay': number;
33
+ openDelay: number;
34
34
  /**
35
35
  * The duration from when the mouse leaves the trigger or content until the hover card closes.
36
36
  * @default 300
37
37
  */
38
- 'closeDelay': number;
38
+ closeDelay: number;
39
39
  /**
40
40
  * Whether the hover card is open
41
41
  */
42
- 'open'?: boolean | undefined;
42
+ open?: boolean | undefined;
43
43
  /**
44
- * Whether the hover card is controlled by the user
44
+ * The initial open state of the hover card when it is not controlled.
45
+ * Prefer this over seeding with `open` for uncontrolled usage.
45
46
  */
46
- 'open.controlled'?: boolean | undefined;
47
+ defaultOpen?: boolean | undefined;
47
48
  /**
48
49
  * The user provided options used to position the popover content
49
50
  */
50
- 'positioning': PositioningOptions;
51
+ positioning: PositioningOptions;
51
52
  }
52
53
  interface PrivateContext {
53
54
  /**
@@ -98,7 +99,7 @@ declare function connect<T extends PropTypes>(state: State, send: Send, normaliz
98
99
  declare function machine(userContext: UserDefinedContext): _destyler_xstate0.Machine<MachineContext, MachineState, _destyler_xstate0.AnyEventObject>;
99
100
  //#endregion
100
101
  //#region src/props.d.ts
101
- declare const props: ("open" | "id" | "ids" | "onOpenChange" | "openDelay" | "closeDelay" | "open.controlled" | "positioning" | "dir" | "getRootNode")[];
102
- declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "open" | "id" | "ids" | "onOpenChange" | "openDelay" | "closeDelay" | "open.controlled" | "positioning" | "dir" | "getRootNode">];
102
+ declare const props: ("open" | "ids" | "onOpenChange" | "openDelay" | "closeDelay" | "defaultOpen" | "positioning" | "dir" | "id" | "getRootNode")[];
103
+ declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "open" | "ids" | "onOpenChange" | "openDelay" | "closeDelay" | "defaultOpen" | "positioning" | "dir" | "id" | "getRootNode">];
103
104
  //#endregion
104
105
  export { type MachineApi as Api, type UserDefinedContext as Context, type ElementIds, type OpenChangeDetails, type Placement, type PositioningOptions, type Service, anatomy, connect, machine, props, splitProps };
package/dist/index.mjs CHANGED
@@ -2,7 +2,7 @@ import { createAnatomy } from "@destyler/anatomy";
2
2
  import { getPlacement, getPlacementStyles } from "@destyler/popper";
3
3
  import { createScope } from "@destyler/dom";
4
4
  import { trackDismissableElement } from "@destyler/dismissable";
5
- import { compact, createSplitProps } from "@destyler/utils";
5
+ import { compact, createSplitProps, isControlled, resolveControllableOpen, withControllableProvided } from "@destyler/utils";
6
6
  import { createMachine, guards } from "@destyler/xstate";
7
7
  import { createProps } from "@destyler/types";
8
8
 
@@ -33,7 +33,6 @@ function connect(state, send, normalize) {
33
33
  return {
34
34
  open,
35
35
  setOpen(nextOpen) {
36
- if (nextOpen === open) return;
37
36
  send(nextOpen ? "OPEN" : "CLOSE");
38
37
  },
39
38
  reposition(options = {}) {
@@ -125,10 +124,11 @@ function connect(state, send, normalize) {
125
124
  //#region src/machine.ts
126
125
  const { not, and } = guards;
127
126
  function machine(userContext) {
128
- const ctx = compact(userContext);
127
+ const ctx = compact(withControllableProvided(userContext, ["open"]));
128
+ const { initialOpen } = resolveControllableOpen(ctx);
129
129
  return createMachine({
130
130
  id: "hover-card",
131
- initial: ctx.open ? "open" : "closed",
131
+ initial: initialOpen ? "open" : "closed",
132
132
  context: {
133
133
  openDelay: 700,
134
134
  closeDelay: 300,
@@ -228,6 +228,15 @@ function machine(userContext) {
228
228
  on: {
229
229
  "CONTROLLED.CLOSE": "closed",
230
230
  "CONTROLLED.OPEN": "open",
231
+ "OPEN": "open",
232
+ "CLOSE": [{
233
+ guard: "isOpenControlled",
234
+ target: "open",
235
+ actions: ["invokeOnClose"]
236
+ }, {
237
+ target: "closed",
238
+ actions: ["invokeOnClose"]
239
+ }],
231
240
  "POINTER_ENTER": {
232
241
  target: "open",
233
242
  actions: ["setIsPointer"]
@@ -242,7 +251,7 @@ function machine(userContext) {
242
251
  },
243
252
  guards: {
244
253
  isPointer: (ctx$1) => !!ctx$1.isPointer,
245
- isOpenControlled: (ctx$1) => !!ctx$1["open.controlled"]
254
+ isOpenControlled: (ctx$1) => isControlled(ctx$1, "open")
246
255
  },
247
256
  activities: {
248
257
  trackPositioning(ctx$1) {
@@ -319,8 +328,8 @@ const props = createProps()([
319
328
  "id",
320
329
  "ids",
321
330
  "onOpenChange",
322
- "open.controlled",
323
331
  "open",
332
+ "defaultOpen",
324
333
  "openDelay",
325
334
  "positioning"
326
335
  ]);
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@destyler/hover-card",
3
3
  "type": "module",
4
- "version": "0.2.6",
4
+ "version": "0.2.9",
5
5
  "description": "for sighted users to preview content available behind a link.",
6
6
  "author": "Elone Hoo <elonehoo@gmail.com>",
7
7
  "license": "MIT",
@@ -22,13 +22,13 @@
22
22
  "dist"
23
23
  ],
24
24
  "dependencies": {
25
- "@destyler/anatomy": "0.2.6",
26
- "@destyler/dom": "0.2.6",
27
- "@destyler/dismissable": "0.2.6",
28
- "@destyler/popper": "0.2.6",
29
- "@destyler/types": "0.2.6",
30
- "@destyler/utils": "0.2.6",
31
- "@destyler/xstate": "0.2.6"
25
+ "@destyler/anatomy": "0.2.9",
26
+ "@destyler/dom": "0.2.9",
27
+ "@destyler/popper": "0.2.9",
28
+ "@destyler/types": "0.2.9",
29
+ "@destyler/xstate": "0.2.9",
30
+ "@destyler/dismissable": "0.2.9",
31
+ "@destyler/utils": "0.2.9"
32
32
  },
33
33
  "publishConfig": {
34
34
  "access": "public"