@gunkin/uiify 0.0.25-alpha → 0.0.26-alpha

package/dist/components/toggle/Toggle.d.ts

@@ -1,6 +1,6 @@
 import type { ReactElement } from "react";
 import type { ToggleProps } from "./types.js";
-export declare function Toggle({ id, label, pressed, defaultPressed, disabled, slotProps, ...rootProps }: ToggleProps): ReactElement;
+export declare function Toggle({ id, label, pressed, defaultPressed, onPressedChange, disabled, slotProps, ...rootProps }: ToggleProps): ReactElement;
 export declare namespace Toggle {
     var displayName: string;
 }

package/dist/components/toggle/Toggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../../src/components/toggle/Toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE9C,wBAAgB,MAAM,CAAC,EACrB,EAAE,EACF,KAAK,EACL,OAAO,EACP,cAAsB,EACtB,QAAgB,EAChB,SAAS,EACT,GAAG,SAAS,EACb,EAAE,WAAW,GAAG,YAAY,CA2D5B;yBAnEe,MAAM"}
+{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../../src/components/toggle/Toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE9C,wBAAgB,MAAM,CAAC,EACrB,EAAE,EACF,KAAK,EACL,OAAO,EACP,cAAsB,EACtB,eAAe,EACf,QAAgB,EAChB,SAAS,EACT,GAAG,SAAS,EACb,EAAE,WAAW,GAAG,YAAY,CAwC5B;yBAjDe,MAAM"}

package/dist/components/toggle/Toggle.js

@@ -1,10 +1,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { omitProps } from "../../core/slot-props.js";
+import { composeEventHandlers } from "../../core/compose-event-handlers.js";
 function Toggle({
   id,
   label,
   pressed,
   defaultPressed = false,
+  onPressedChange,
   disabled = false,
   slotProps,
   ...rootProps
@@ -12,66 +13,40 @@ function Toggle({
   const isControlled = pressed !== void 0;
   const checked = isControlled ? pressed : void 0;
   const labelId = `${id}-label`;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ...omitProps(rootProps, [
-        "children",
-        "dangerouslySetInnerHTML",
-        "data-disabled",
-        "data-uiify-toggle",
-        "id"
-      ]),
-      "data-disabled": disabled ? "" : void 0,
-      "data-uiify-toggle": "",
-      children: [
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            ...omitProps(slotProps?.control, [
-              "aria-labelledby",
-              "checked",
-              "data-disabled",
-              "data-part",
-              "data-state",
-              "data-uiify-toggle",
-              "defaultChecked",
-              "disabled",
-              "id",
-              "type"
-            ]),
-            "aria-labelledby": labelId,
-            checked,
-            "data-disabled": disabled ? "" : void 0,
-            "data-part": "control",
-            "data-state": isControlled ? pressed ? "on" : "off" : void 0,
-            defaultChecked: !isControlled ? defaultPressed : void 0,
-            disabled: disabled || void 0,
-            id,
-            type: "checkbox"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "label",
-          {
-            ...omitProps(slotProps?.label, [
-              "data-part",
-              "data-uiify-button",
-              "data-variant",
-              "htmlFor",
-              "id"
-            ]),
-            "data-part": "label",
-            "data-uiify-button": "",
-            "data-variant": "outline",
-            htmlFor: id,
-            id: labelId,
-            children: label
-          }
-        )
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs("div", { "data-disabled": disabled ? "" : void 0, "data-uiify-toggle": "", ...rootProps, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        "aria-labelledby": labelId,
+        checked,
+        "data-disabled": disabled ? "" : void 0,
+        "data-part": "control",
+        "data-state": isControlled ? pressed ? "on" : "off" : void 0,
+        defaultChecked: !isControlled ? defaultPressed : void 0,
+        disabled: disabled || void 0,
+        id,
+        type: "checkbox",
+        readOnly: isControlled && !onPressedChange && !slotProps?.control?.onChange,
+        ...slotProps?.control,
+        onChange: onPressedChange ? composeEventHandlers(
+          slotProps?.control?.onChange,
+          (event) => onPressedChange(event.currentTarget.checked)
+        ) : slotProps?.control?.onChange
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "label",
+      {
+        "data-part": "label",
+        "data-uiify-button": "",
+        "data-variant": "outline",
+        htmlFor: id,
+        id: labelId,
+        ...slotProps?.label,
+        children: label
+      }
+    )
+  ] });
 }
 Toggle.displayName = "Toggle";
 export {

package/dist/components/toggle/Toggle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/toggle/Toggle.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\nimport { omitProps } from \"../../core/slot-props.js\";\nimport type { ToggleProps } from \"./types.js\";\n\nexport function Toggle({\n  id,\n  label,\n  pressed,\n  defaultPressed = false,\n  disabled = false,\n  slotProps,\n  ...rootProps\n}: ToggleProps): ReactElement {\n  const isControlled = pressed !== undefined;\n  const checked = isControlled ? pressed : undefined;\n\n  const labelId = `${id}-label`;\n\n  return (\n    <div\n      {...omitProps(rootProps, [\n        \"children\",\n        \"dangerouslySetInnerHTML\",\n        \"data-disabled\",\n        \"data-uiify-toggle\",\n        \"id\",\n      ])}\n      data-disabled={disabled ? \"\" : undefined}\n      data-uiify-toggle=\"\"\n    >\n      <input\n        {...omitProps(slotProps?.control, [\n          \"aria-labelledby\",\n          \"checked\",\n          \"data-disabled\",\n          \"data-part\",\n          \"data-state\",\n          \"data-uiify-toggle\",\n          \"defaultChecked\",\n          \"disabled\",\n          \"id\",\n          \"type\",\n        ])}\n        aria-labelledby={labelId}\n        checked={checked}\n        data-disabled={disabled ? \"\" : undefined}\n        data-part=\"control\"\n        data-state={isControlled ? (pressed ? \"on\" : \"off\") : undefined}\n        defaultChecked={!isControlled ? defaultPressed : undefined}\n        disabled={disabled || undefined}\n        id={id}\n        type=\"checkbox\"\n      />\n      <label\n        {...omitProps(slotProps?.label, [\n          \"data-part\",\n          \"data-uiify-button\",\n          \"data-variant\",\n          \"htmlFor\",\n          \"id\",\n        ])}\n        data-part=\"label\"\n        data-uiify-button=\"\"\n        data-variant=\"outline\"\n        htmlFor={id}\n        id={labelId}\n      >\n        {label}\n      </label>\n    </div>\n  );\n}\nToggle.displayName = \"Toggle\";\n"],"mappings":"AAmBI,SAWE,KAXF;AAlBJ,SAAS,iBAAiB;AAGnB,SAAS,OAAO;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB,WAAW;AAAA,EACX;AAAA,EACA,GAAG;AACL,GAA8B;AAC5B,QAAM,eAAe,YAAY;AACjC,QAAM,UAAU,eAAe,UAAU;AAEzC,QAAM,UAAU,GAAG,EAAE;AAErB,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG,UAAU,WAAW;AAAA,QACvB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC;AAAA,MACD,iBAAe,WAAW,KAAK;AAAA,MAC/B,qBAAkB;AAAA,MAElB;AAAA;AAAA,UAAC;AAAA;AAAA,YACE,GAAG,UAAU,WAAW,SAAS;AAAA,cAChC;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,YACF,CAAC;AAAA,YACD,mBAAiB;AAAA,YACjB;AAAA,YACA,iBAAe,WAAW,KAAK;AAAA,YAC/B,aAAU;AAAA,YACV,cAAY,eAAgB,UAAU,OAAO,QAAS;AAAA,YACtD,gBAAgB,CAAC,eAAe,iBAAiB;AAAA,YACjD,UAAU,YAAY;AAAA,YACtB;AAAA,YACA,MAAK;AAAA;AAAA,QACP;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACE,GAAG,UAAU,WAAW,OAAO;AAAA,cAC9B;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,YACF,CAAC;AAAA,YACD,aAAU;AAAA,YACV,qBAAkB;AAAA,YAClB,gBAAa;AAAA,YACb,SAAS;AAAA,YACT,IAAI;AAAA,YAEH;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EACF;AAEJ;AACA,OAAO,cAAc;","names":[]}
+{"version":3,"sources":["../../../src/components/toggle/Toggle.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\nimport { composeEventHandlers } from \"../../core/compose-event-handlers.js\";\nimport type { ToggleProps } from \"./types.js\";\n\nexport function Toggle({\n  id,\n  label,\n  pressed,\n  defaultPressed = false,\n  onPressedChange,\n  disabled = false,\n  slotProps,\n  ...rootProps\n}: ToggleProps): ReactElement {\n  const isControlled = pressed !== undefined;\n  const checked = isControlled ? pressed : undefined;\n\n  const labelId = `${id}-label`;\n\n  return (\n    <div data-disabled={disabled ? \"\" : undefined} data-uiify-toggle=\"\" {...rootProps}>\n      <input\n        aria-labelledby={labelId}\n        checked={checked}\n        data-disabled={disabled ? \"\" : undefined}\n        data-part=\"control\"\n        data-state={isControlled ? (pressed ? \"on\" : \"off\") : undefined}\n        defaultChecked={!isControlled ? defaultPressed : undefined}\n        disabled={disabled || undefined}\n        id={id}\n        type=\"checkbox\"\n        readOnly={isControlled && !onPressedChange && !slotProps?.control?.onChange}\n        {...slotProps?.control}\n        onChange={\n          onPressedChange\n            ? composeEventHandlers(slotProps?.control?.onChange, (event) =>\n                onPressedChange(event.currentTarget.checked),\n              )\n            : slotProps?.control?.onChange\n        }\n      />\n      <label\n        data-part=\"label\"\n        data-uiify-button=\"\"\n        data-variant=\"outline\"\n        htmlFor={id}\n        id={labelId}\n        {...slotProps?.label}\n      >\n        {label}\n      </label>\n    </div>\n  );\n}\nToggle.displayName = \"Toggle\";\n"],"mappings":"AAoBI,SACE,KADF;AAnBJ,SAAS,4BAA4B;AAG9B,SAAS,OAAO;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,GAAG;AACL,GAA8B;AAC5B,QAAM,eAAe,YAAY;AACjC,QAAM,UAAU,eAAe,UAAU;AAEzC,QAAM,UAAU,GAAG,EAAE;AAErB,SACE,qBAAC,SAAI,iBAAe,WAAW,KAAK,QAAW,qBAAkB,IAAI,GAAG,WACtE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,mBAAiB;AAAA,QACjB;AAAA,QACA,iBAAe,WAAW,KAAK;AAAA,QAC/B,aAAU;AAAA,QACV,cAAY,eAAgB,UAAU,OAAO,QAAS;AAAA,QACtD,gBAAgB,CAAC,eAAe,iBAAiB;AAAA,QACjD,UAAU,YAAY;AAAA,QACtB;AAAA,QACA,MAAK;AAAA,QACL,UAAU,gBAAgB,CAAC,mBAAmB,CAAC,WAAW,SAAS;AAAA,QAClE,GAAG,WAAW;AAAA,QACf,UACE,kBACI;AAAA,UAAqB,WAAW,SAAS;AAAA,UAAU,CAAC,UAClD,gBAAgB,MAAM,cAAc,OAAO;AAAA,QAC7C,IACA,WAAW,SAAS;AAAA;AAAA,IAE5B;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,aAAU;AAAA,QACV,qBAAkB;AAAA,QAClB,gBAAa;AAAA,QACb,SAAS;AAAA,QACT,IAAI;AAAA,QACH,GAAG,WAAW;AAAA,QAEd;AAAA;AAAA,IACH;AAAA,KACF;AAEJ;AACA,OAAO,cAAc;","names":[]}

package/dist/components/toggle/types.d.ts

@@ -1,26 +1,7 @@
 import type { ComponentPropsWithRef, ReactNode } from "react";
-import type { ConsumerDataAttributes } from "../../core/slot-props.js";
-type ToggleControlOwnedAttributes = {
-    readonly "aria-labelledby"?: never;
-    readonly "data-disabled"?: never;
-    readonly "data-part"?: never;
-    readonly "data-state"?: never;
-    readonly "data-uiify-toggle"?: never;
-    readonly checked?: never;
-    readonly defaultChecked?: never;
-    readonly disabled?: never;
-    readonly id?: never;
-    readonly type?: never;
-};
-type ToggleLabelOwnedAttributes = {
-    readonly "data-part"?: never;
-    readonly "data-uiify-button"?: never;
-    readonly "data-variant"?: never;
-    readonly htmlFor?: never;
-    readonly id?: never;
-};
-export type ToggleControlSlotProps = Omit<ComponentPropsWithRef<"input">, "aria-labelledby" | "checked" | "data-disabled" | "data-part" | "data-state" | "data-uiify-toggle" | "defaultChecked" | "disabled" | "id" | "type"> & ToggleControlOwnedAttributes & ConsumerDataAttributes;
-export type ToggleLabelSlotProps = Omit<ComponentPropsWithRef<"label">, "children" | "data-part" | "data-uiify-button" | "data-variant" | "htmlFor" | "id"> & ToggleLabelOwnedAttributes & ConsumerDataAttributes;
+import type { SlotProps } from "../../core/slot-props.js";
+export type ToggleControlSlotProps = SlotProps<"input">;
+export type ToggleLabelSlotProps = SlotProps<"label">;
 export interface ToggleSlotProps {
     readonly control?: ToggleControlSlotProps;
     readonly label?: ToggleLabelSlotProps;
@@ -30,9 +11,9 @@ export interface ToggleOwnProps {
     readonly label: ReactNode;
     readonly pressed?: boolean;
     readonly defaultPressed?: boolean;
+    readonly onPressedChange?: (pressed: boolean) => void;
     readonly disabled?: boolean;
     readonly slotProps?: ToggleSlotProps;
 }
-export type ToggleProps = ToggleOwnProps & Omit<ComponentPropsWithRef<"div">, keyof ToggleOwnProps | "children" | "dangerouslySetInnerHTML" | "data-disabled" | "data-uiify-toggle" | "id">;
-export {};
+export type ToggleProps = ToggleOwnProps & Omit<ComponentPropsWithRef<"div">, keyof ToggleOwnProps | "children" | "dangerouslySetInnerHTML" | "id">;
 //# sourceMappingURL=types.d.ts.map

package/dist/components/toggle/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/toggle/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAEvE,KAAK,4BAA4B,GAAG;IAClC,QAAQ,CAAC,iBAAiB,CAAC,EAAE,KAAK,CAAC;IACnC,QAAQ,CAAC,eAAe,CAAC,EAAE,KAAK,CAAC;IACjC,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC;IAC7B,QAAQ,CAAC,YAAY,CAAC,EAAE,KAAK,CAAC;IAC9B,QAAQ,CAAC,mBAAmB,CAAC,EAAE,KAAK,CAAC;IACrC,QAAQ,CAAC,OAAO,CAAC,EAAE,KAAK,CAAC;IACzB,QAAQ,CAAC,cAAc,CAAC,EAAE,KAAK,CAAC;IAChC,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,EAAE,KAAK,CAAC;IACpB,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC;CACvB,CAAC;AAEF,KAAK,0BAA0B,GAAG;IAChC,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC;IAC7B,QAAQ,CAAC,mBAAmB,CAAC,EAAE,KAAK,CAAC;IACrC,QAAQ,CAAC,cAAc,CAAC,EAAE,KAAK,CAAC;IAChC,QAAQ,CAAC,OAAO,CAAC,EAAE,KAAK,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,EAAE,KAAK,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACvC,qBAAqB,CAAC,OAAO,CAAC,EAC5B,iBAAiB,GACjB,SAAS,GACT,eAAe,GACf,WAAW,GACX,YAAY,GACZ,mBAAmB,GACnB,gBAAgB,GAChB,UAAU,GACV,IAAI,GACJ,MAAM,CACT,GACC,4BAA4B,GAC5B,sBAAsB,CAAC;AAEzB,MAAM,MAAM,oBAAoB,GAAG,IAAI,CACrC,qBAAqB,CAAC,OAAO,CAAC,EAC9B,UAAU,GAAG,WAAW,GAAG,mBAAmB,GAAG,cAAc,GAAG,SAAS,GAAG,IAAI,CACnF,GACC,0BAA0B,GAC1B,sBAAsB,CAAC;AAEzB,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,OAAO,CAAC,EAAE,sBAAsB,CAAC;IAC1C,QAAQ,CAAC,KAAK,CAAC,EAAE,oBAAoB,CAAC;CACvC;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC;IAC1B,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAClC,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,SAAS,CAAC,EAAE,eAAe,CAAC;CACtC;AAED,MAAM,MAAM,WAAW,GAAG,cAAc,GACtC,IAAI,CACF,qBAAqB,CAAC,KAAK,CAAC,EAC1B,MAAM,cAAc,GACpB,UAAU,GACV,yBAAyB,GACzB,eAAe,GACf,mBAAmB,GACnB,IAAI,CACP,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/toggle/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAE1D,MAAM,MAAM,sBAAsB,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC;AAExD,MAAM,MAAM,oBAAoB,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC;AAEtD,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,OAAO,CAAC,EAAE,sBAAsB,CAAC;IAC1C,QAAQ,CAAC,KAAK,CAAC,EAAE,oBAAoB,CAAC;CACvC;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC;IAC1B,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAClC,QAAQ,CAAC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtD,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,SAAS,CAAC,EAAE,eAAe,CAAC;CACtC;AAED,MAAM,MAAM,WAAW,GAAG,cAAc,GACtC,IAAI,CACF,qBAAqB,CAAC,KAAK,CAAC,EAC5B,MAAM,cAAc,GAAG,UAAU,GAAG,yBAAyB,GAAG,IAAI,CACrE,CAAC"}

package/dist/components/tooltip/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/tooltip/Tooltip.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAEV,WAAW,EAIX,YAAY,EACb,MAAM,OAAO,CAAC;AAgBf,OAAO,KAAK,EACV,mBAAmB,EACnB,uBAAuB,EAEvB,gBAAgB,EAChB,mBAAmB,EACpB,MAAM,YAAY,CAAC;AAwBpB,wBAAgB,eAAe,CAAC,KAAK,EAAE,uBAAuB,GAAG,YAAY,GAAG,IAAI,CAYnF;yBAZe,eAAe;;;AAe/B,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,YAAY,GAAG,IAAI,CA4BxE;yBA5Be,WAAW;;;AA+B3B,wBAAgB,cAAc,CAAC,GAAG,SAAS,WAAW,GAAG,QAAQ,EAC/D,KAAK,EAAE,mBAAmB,CAAC,GAAG,CAAC,GAC9B,YAAY,GAAG,IAAI,CAkErB;AAED,wBAAgB,cAAc,CAAC,GAAG,SAAS,WAAW,GAAG,KAAK,EAC5D,KAAK,EAAE,mBAAmB,CAAC,GAAG,CAAC,GAC9B,YAAY,GAAG,IAAI,CAgFrB;AAED,eAAO,MAAM,OAAO;;;;;CAKnB,CAAC"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/tooltip/Tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAEV,WAAW,EAIX,YAAY,EACb,MAAM,OAAO,CAAC;AAgBf,OAAO,KAAK,EACV,mBAAmB,EACnB,uBAAuB,EAEvB,gBAAgB,EAChB,mBAAmB,EACpB,MAAM,YAAY,CAAC;AAoBpB,wBAAgB,eAAe,CAAC,KAAK,EAAE,uBAAuB,GAAG,YAAY,GAAG,IAAI,CAUnF;yBAVe,eAAe;;;AAY/B,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,YAAY,GAAG,IAAI,CA0BxE;yBA1Be,WAAW;;;AA4B3B,wBAAgB,cAAc,CAAC,GAAG,SAAS,WAAW,GAAG,QAAQ,EAC/D,KAAK,EAAE,mBAAmB,CAAC,GAAG,CAAC,GAC9B,YAAY,GAAG,IAAI,CAqErB;AACD,wBAAgB,cAAc,CAAC,GAAG,SAAS,WAAW,GAAG,KAAK,EAC5D,KAAK,EAAE,mBAAmB,CAAC,GAAG,CAAC,GAC9B,YAAY,GAAG,IAAI,CA+ErB;AACD,eAAO,MAAM,OAAO;;;;;CAKnB,CAAC"}

package/dist/components/tooltip/Tooltip.js

@@ -76,11 +76,11 @@ function TooltipTrigger(props) {
     as,
     defaultTag: "button",
     props: {
-      ...consumerProps,
-      ...anchorProps,
       "aria-describedby": open ? contentId : void 0,
       ...nativeButton ? { type: "button", "data-uiify-button": "" } : {},
       ...className ? { className } : {},
+      ...anchorProps,
+      ...consumerProps,
       onBlur: composeEventHandlers(consumerOnBlur, () => {
         closeTooltip();
       }),
@@ -146,14 +146,12 @@ function TooltipContent(props) {
     as,
     defaultTag: "div",
     props: {
-      ...domProps,
       ...createAnchorPositionerProps({
         align,
         anchorName: anchorNameForId(anchorId),
         side
       }),
       ...consumerStyle ? { style: consumerStyle } : {},
-      ref: mergedRef,
       popover: "manual",
       // The consumer's own non-empty `id` wins (computed above as `resolvedId`); otherwise the
       // The consumer's own non-empty `id` wins; otherwise the context-generated id is used.
@@ -163,6 +161,8 @@ function TooltipContent(props) {
       "data-uiify-tooltip": "",
       "data-state": open ? "open" : "closed",
       ...className ? { className } : {},
+      ...domProps,
+      ref: mergedRef,
       onPointerEnter: composeEventHandlers(consumerOnPointerEnter, () => {
         intent.clearCloseTimer();
       }),

package/dist/components/tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["\"use client\";\n\nimport { useRef } from \"react\";\nimport type {\n  CSSProperties,\n  ElementType,\n  FocusEvent,\n  KeyboardEvent,\n  PointerEvent,\n  ReactElement,\n} from \"react\";\nimport { useIsomorphicLayoutEffect, useMergedRefs } from \"@gunkin/uiify/hooks\";\nimport {\n  createAnchorPositionerProps,\n  createAnchorTriggerProps,\n  anchorNameForId,\n} from \"@gunkin/uiify/core/anchor-position\";\nimport { composeEventHandlers } from \"@gunkin/uiify/core/compose-event-handlers\";\nimport {\n  createPartContext,\n  splitRef,\n  useHoverOverlay,\n  type HoverIntentStore,\n} from \"@gunkin/uiify/core\";\nimport { useRenderElement } from \"@gunkin/uiify/core/render\";\nimport { CONTENT_HOVER_GRACE_MS, createTooltipProviderStore } from \"./tooltip-store.js\";\nimport type {\n  TooltipContentProps,\n  TooltipProviderOwnProps,\n  TooltipProviderStore,\n  TooltipRootProps,\n  TooltipTriggerProps,\n} from \"./types.js\";\n\ninterface TooltipClientContextValue {\n  readonly anchorId: string;\n  readonly closeTooltip: () => void;\n  readonly contentId: string;\n  readonly intent: HoverIntentStore;\n  readonly open: boolean;\n  readonly openTooltip: (immediate?: boolean) => void;\n  readonly pointerFocusRef: React.RefObject<boolean>;\n  readonly setContentId: (id: string) => void;\n}\n\nconst [TooltipProviderStoreProvider, useTooltipProviderStore] =\n  createPartContext<TooltipProviderStore>(\"Tooltip\", \"Provider\");\n\n// Root name \"Root\" (the default): Trigger/Content require <Tooltip.Root>, a\n// distinct nesting requirement from TooltipRoot itself requiring\n// <Tooltip.Provider> above. Keeping the two contexts' root names accurate\n// (rather than pointing both at \"Provider\") preserves the original's\n// correct, non-misleading error for the \"Trigger without Root\" case.\nconst [TooltipContextProvider, useTooltipContext] =\n  createPartContext<TooltipClientContextValue>(\"Tooltip\");\n\nexport function TooltipProvider(props: TooltipProviderOwnProps): ReactElement | null {\n  const { children, delayDuration = 300, skipDelayDuration = 300 } = props;\n  const storeRef = useRef<TooltipProviderStore | null>(null);\n  storeRef.current ??= createTooltipProviderStore({ delayDuration, skipDelayDuration });\n\n  useIsomorphicLayoutEffect(() => {\n    storeRef.current?.updateOptions({ delayDuration, skipDelayDuration });\n  }, [delayDuration, skipDelayDuration]);\n\n  return (\n    <TooltipProviderStoreProvider value={storeRef.current}>{children}</TooltipProviderStoreProvider>\n  );\n}\nTooltipProvider.displayName = \"TooltipProvider\";\n\nexport function TooltipRoot(props: TooltipRootProps): ReactElement | null {\n  const { children, defaultOpen = false, id, onOpenChange, open } = props;\n  const provider = useTooltipProviderStore(\"Root\");\n  const pointerFocusRef = useRef(false);\n  const overlay = useHoverOverlay({\n    closeDelay: CONTENT_HOVER_GRACE_MS,\n    ...(defaultOpen !== undefined ? { defaultOpen } : {}),\n    ...(id !== undefined ? { id } : {}),\n    idPrefix: \"uiify-tooltip\",\n    ...(onOpenChange ? { onOpenChange } : {}),\n    onOpened: provider.markOpened,\n    ...(open !== undefined ? { open } : {}),\n    openDelay: provider.getDelayDuration(),\n    shouldSkipDelay: provider.shouldSkipDelay,\n  });\n\n  const contextValue: TooltipClientContextValue = {\n    anchorId: overlay.anchorId,\n    closeTooltip: overlay.closeOverlay,\n    contentId: overlay.contentId,\n    intent: overlay.intent,\n    open: overlay.open,\n    openTooltip: overlay.openOverlay,\n    pointerFocusRef,\n    setContentId: overlay.setContentId,\n  };\n\n  return <TooltipContextProvider value={contextValue}>{children}</TooltipContextProvider>;\n}\nTooltipRoot.displayName = \"TooltipRoot\";\n\nexport function TooltipTrigger<TAs extends ElementType = \"button\">(\n  props: TooltipTriggerProps<TAs>,\n): ReactElement | null {\n  const { as, render, className, ...consumerProps } = props as TooltipTriggerProps<\"button\">;\n  const { anchorId, closeTooltip, contentId, intent, open, openTooltip, pointerFocusRef } =\n    useTooltipContext(\"Trigger\");\n  const nativeButton = !as || as === \"button\";\n  const consumerStyle = (consumerProps as { style?: CSSProperties }).style;\n  const anchorProps = {\n    ...createAnchorTriggerProps(anchorNameForId(anchorId)),\n    ...(consumerStyle ? { style: consumerStyle } : {}),\n  };\n  const {\n    onBlur: consumerOnBlur,\n    onFocus: consumerOnFocus,\n    onKeyDown: consumerOnKeyDown,\n    onPointerDown: consumerOnPointerDown,\n    onPointerEnter: consumerOnPointerEnter,\n    onPointerLeave: consumerOnPointerLeave,\n  } = consumerProps as {\n    onBlur?: (event: FocusEvent<HTMLElement>) => void;\n    onFocus?: (event: FocusEvent<HTMLElement>) => void;\n    onKeyDown?: (event: KeyboardEvent<HTMLElement>) => void;\n    onPointerDown?: (event: PointerEvent<HTMLElement>) => void;\n    onPointerEnter?: (event: PointerEvent<HTMLElement>) => void;\n    onPointerLeave?: (event: PointerEvent<HTMLElement>) => void;\n  };\n\n  return useRenderElement({\n    as,\n    defaultTag: \"button\",\n    props: {\n      ...consumerProps,\n      ...anchorProps,\n      \"aria-describedby\": open ? contentId : undefined,\n      ...(nativeButton ? { type: \"button\", \"data-uiify-button\": \"\" } : {}),\n      ...(className ? { className } : {}),\n      onBlur: composeEventHandlers(consumerOnBlur, () => {\n        closeTooltip();\n      }),\n      onFocus: composeEventHandlers(consumerOnFocus, () => {\n        if (!pointerFocusRef.current) openTooltip(true);\n        pointerFocusRef.current = false;\n      }),\n      onKeyDown: composeEventHandlers(consumerOnKeyDown, (event: KeyboardEvent<HTMLElement>) => {\n        if (event.key === \"Escape\") closeTooltip();\n      }),\n      onPointerDown: composeEventHandlers(consumerOnPointerDown, () => {\n        pointerFocusRef.current = true;\n      }),\n      onPointerEnter: composeEventHandlers(\n        consumerOnPointerEnter,\n        (event: PointerEvent<HTMLElement>) => {\n          if (event.pointerType === \"mouse\") openTooltip(false);\n        },\n      ),\n      onPointerLeave: composeEventHandlers(\n        consumerOnPointerLeave,\n        (event: PointerEvent<HTMLElement>) => {\n          if (event.pointerType === \"mouse\") {\n            intent.scheduleClose(() => closeTooltip());\n          }\n        },\n      ),\n    },\n    render,\n    state: { open },\n  });\n}\n\nexport function TooltipContent<TAs extends ElementType = \"div\">(\n  props: TooltipContentProps<TAs>,\n): ReactElement | null {\n  const {\n    align = \"center\",\n    as,\n    render,\n    className,\n    side = \"bottom\",\n    ...consumerProps\n  } = props as TooltipContentProps<\"div\">;\n  const { anchorId, closeTooltip, contentId, intent, open, setContentId } =\n    useTooltipContext(\"Content\");\n  const [consumerRef, domProps] = splitRef<HTMLElement, typeof consumerProps>(consumerProps);\n  const popupRef = useRef<HTMLElement | null>(null);\n  const mergedRef = useMergedRefs(popupRef, consumerRef);\n  const consumerDomProps = domProps as { id?: string; style?: CSSProperties };\n  const resolvedId =\n    typeof consumerDomProps.id === \"string\" && consumerDomProps.id.length > 0\n      ? consumerDomProps.id\n      : contentId;\n  const consumerStyle = consumerDomProps.style;\n\n  useIsomorphicLayoutEffect(() => {\n    setContentId(resolvedId);\n  }, [resolvedId, setContentId]);\n\n  // Same technique as core/use-popover.ts: guard with .matches(\":popover-open\")\n  // so a StrictMode double-invoke or an unrelated re-run doesn't call\n  // showPopover/hidePopover on a popover already in that state (both throw).\n  // try/catch covers the node having disconnected between render and effect.\n  useIsomorphicLayoutEffect(() => {\n    const popup = popupRef.current;\n    if (!popup) return;\n    try {\n      if (open && !popup.matches(\":popover-open\")) popup.showPopover();\n      if (!open && popup.matches(\":popover-open\")) popup.hidePopover();\n    } catch {\n      // The node may have disconnected between render and layout effect.\n    }\n  }, [open]);\n\n  const { onPointerEnter: consumerOnPointerEnter, onPointerLeave: consumerOnPointerLeave } =\n    domProps as {\n      onPointerEnter?: (event: PointerEvent<HTMLElement>) => void;\n      onPointerLeave?: (event: PointerEvent<HTMLElement>) => void;\n    };\n\n  return useRenderElement({\n    as,\n    defaultTag: \"div\",\n    props: {\n      ...domProps,\n      ...createAnchorPositionerProps({\n        align,\n        anchorName: anchorNameForId(anchorId),\n        side,\n      }),\n      ...(consumerStyle ? { style: consumerStyle } : {}),\n      ref: mergedRef,\n      popover: \"manual\",\n      // The consumer's own non-empty `id` wins (computed above as `resolvedId`); otherwise the\n      // The consumer's own non-empty `id` wins; otherwise the context-generated id is used.\n      id: resolvedId,\n      role: \"tooltip\",\n      \"data-part\": \"content\",\n      \"data-uiify-tooltip\": \"\",\n      \"data-state\": open ? \"open\" : \"closed\",\n      ...(className ? { className } : {}),\n      onPointerEnter: composeEventHandlers(consumerOnPointerEnter, () => {\n        intent.clearCloseTimer();\n      }),\n      onPointerLeave: composeEventHandlers(\n        consumerOnPointerLeave,\n        (event: PointerEvent<HTMLElement>) => {\n          if (event.pointerType === \"mouse\") closeTooltip();\n        },\n      ),\n    },\n    render,\n    state: { open, positioning: \"native\" as const },\n  });\n}\n\nexport const Tooltip = {\n  Content: TooltipContent,\n  Provider: TooltipProvider,\n  Root: TooltipRoot,\n  Trigger: TooltipTrigger,\n};\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["\"use client\";\nimport { useRef } from \"react\";\nimport type {\n  CSSProperties,\n  ElementType,\n  FocusEvent,\n  KeyboardEvent,\n  PointerEvent,\n  ReactElement,\n} from \"react\";\nimport { useIsomorphicLayoutEffect, useMergedRefs } from \"@gunkin/uiify/hooks\";\nimport {\n  createAnchorPositionerProps,\n  createAnchorTriggerProps,\n  anchorNameForId,\n} from \"@gunkin/uiify/core/anchor-position\";\nimport { composeEventHandlers } from \"@gunkin/uiify/core/compose-event-handlers\";\nimport {\n  createPartContext,\n  splitRef,\n  useHoverOverlay,\n  type HoverIntentStore,\n} from \"@gunkin/uiify/core\";\nimport { useRenderElement } from \"@gunkin/uiify/core/render\";\nimport { CONTENT_HOVER_GRACE_MS, createTooltipProviderStore } from \"./tooltip-store.js\";\nimport type {\n  TooltipContentProps,\n  TooltipProviderOwnProps,\n  TooltipProviderStore,\n  TooltipRootProps,\n  TooltipTriggerProps,\n} from \"./types.js\";\ninterface TooltipClientContextValue {\n  readonly anchorId: string;\n  readonly closeTooltip: () => void;\n  readonly contentId: string;\n  readonly intent: HoverIntentStore;\n  readonly open: boolean;\n  readonly openTooltip: (immediate?: boolean) => void;\n  readonly pointerFocusRef: React.RefObject<boolean>;\n  readonly setContentId: (id: string) => void;\n}\nconst [TooltipProviderStoreProvider, useTooltipProviderStore] =\n  createPartContext<TooltipProviderStore>(\"Tooltip\", \"Provider\");\n// Root name \"Root\" (the default): Trigger/Content require <Tooltip.Root>, a\n// distinct nesting requirement from TooltipRoot itself requiring\n// <Tooltip.Provider> above. Keeping the two contexts' root names accurate\n// (rather than pointing both at \"Provider\") preserves the original's\n// correct, non-misleading error for the \"Trigger without Root\" case.\nconst [TooltipContextProvider, useTooltipContext] =\n  createPartContext<TooltipClientContextValue>(\"Tooltip\");\nexport function TooltipProvider(props: TooltipProviderOwnProps): ReactElement | null {\n  const { children, delayDuration = 300, skipDelayDuration = 300 } = props;\n  const storeRef = useRef<TooltipProviderStore | null>(null);\n  storeRef.current ??= createTooltipProviderStore({ delayDuration, skipDelayDuration });\n  useIsomorphicLayoutEffect(() => {\n    storeRef.current?.updateOptions({ delayDuration, skipDelayDuration });\n  }, [delayDuration, skipDelayDuration]);\n  return (\n    <TooltipProviderStoreProvider value={storeRef.current}>{children}</TooltipProviderStoreProvider>\n  );\n}\nTooltipProvider.displayName = \"TooltipProvider\";\nexport function TooltipRoot(props: TooltipRootProps): ReactElement | null {\n  const { children, defaultOpen = false, id, onOpenChange, open } = props;\n  const provider = useTooltipProviderStore(\"Root\");\n  const pointerFocusRef = useRef(false);\n  const overlay = useHoverOverlay({\n    closeDelay: CONTENT_HOVER_GRACE_MS,\n    ...(defaultOpen !== undefined ? { defaultOpen } : {}),\n    ...(id !== undefined ? { id } : {}),\n    idPrefix: \"uiify-tooltip\",\n    ...(onOpenChange ? { onOpenChange } : {}),\n    onOpened: provider.markOpened,\n    ...(open !== undefined ? { open } : {}),\n    openDelay: provider.getDelayDuration(),\n    shouldSkipDelay: provider.shouldSkipDelay,\n  });\n  const contextValue: TooltipClientContextValue = {\n    anchorId: overlay.anchorId,\n    closeTooltip: overlay.closeOverlay,\n    contentId: overlay.contentId,\n    intent: overlay.intent,\n    open: overlay.open,\n    openTooltip: overlay.openOverlay,\n    pointerFocusRef,\n    setContentId: overlay.setContentId,\n  };\n  return <TooltipContextProvider value={contextValue}>{children}</TooltipContextProvider>;\n}\nTooltipRoot.displayName = \"TooltipRoot\";\nexport function TooltipTrigger<TAs extends ElementType = \"button\">(\n  props: TooltipTriggerProps<TAs>,\n): ReactElement | null {\n  const { as, render, className, ...consumerProps } = props as TooltipTriggerProps<\"button\">;\n  const { anchorId, closeTooltip, contentId, intent, open, openTooltip, pointerFocusRef } =\n    useTooltipContext(\"Trigger\");\n  const nativeButton = !as || as === \"button\";\n  const consumerStyle = (\n    consumerProps as {\n      style?: CSSProperties;\n    }\n  ).style;\n  const anchorProps = {\n    ...createAnchorTriggerProps(anchorNameForId(anchorId)),\n    ...(consumerStyle ? { style: consumerStyle } : {}),\n  };\n  const {\n    onBlur: consumerOnBlur,\n    onFocus: consumerOnFocus,\n    onKeyDown: consumerOnKeyDown,\n    onPointerDown: consumerOnPointerDown,\n    onPointerEnter: consumerOnPointerEnter,\n    onPointerLeave: consumerOnPointerLeave,\n  } = consumerProps as {\n    onBlur?: (event: FocusEvent<HTMLElement>) => void;\n    onFocus?: (event: FocusEvent<HTMLElement>) => void;\n    onKeyDown?: (event: KeyboardEvent<HTMLElement>) => void;\n    onPointerDown?: (event: PointerEvent<HTMLElement>) => void;\n    onPointerEnter?: (event: PointerEvent<HTMLElement>) => void;\n    onPointerLeave?: (event: PointerEvent<HTMLElement>) => void;\n  };\n  return useRenderElement({\n    as,\n    defaultTag: \"button\",\n    props: {\n      \"aria-describedby\": open ? contentId : undefined,\n      ...(nativeButton ? { type: \"button\", \"data-uiify-button\": \"\" } : {}),\n      ...(className ? { className } : {}),\n      ...anchorProps,\n      ...consumerProps,\n      onBlur: composeEventHandlers(consumerOnBlur, () => {\n        closeTooltip();\n      }),\n      onFocus: composeEventHandlers(consumerOnFocus, () => {\n        if (!pointerFocusRef.current) openTooltip(true);\n        pointerFocusRef.current = false;\n      }),\n      onKeyDown: composeEventHandlers(consumerOnKeyDown, (event: KeyboardEvent<HTMLElement>) => {\n        if (event.key === \"Escape\") closeTooltip();\n      }),\n      onPointerDown: composeEventHandlers(consumerOnPointerDown, () => {\n        pointerFocusRef.current = true;\n      }),\n      onPointerEnter: composeEventHandlers(\n        consumerOnPointerEnter,\n        (event: PointerEvent<HTMLElement>) => {\n          if (event.pointerType === \"mouse\") openTooltip(false);\n        },\n      ),\n      onPointerLeave: composeEventHandlers(\n        consumerOnPointerLeave,\n        (event: PointerEvent<HTMLElement>) => {\n          if (event.pointerType === \"mouse\") {\n            intent.scheduleClose(() => closeTooltip());\n          }\n        },\n      ),\n    },\n    render,\n    state: { open },\n  });\n}\nexport function TooltipContent<TAs extends ElementType = \"div\">(\n  props: TooltipContentProps<TAs>,\n): ReactElement | null {\n  const {\n    align = \"center\",\n    as,\n    render,\n    className,\n    side = \"bottom\",\n    ...consumerProps\n  } = props as TooltipContentProps<\"div\">;\n  const { anchorId, closeTooltip, contentId, intent, open, setContentId } =\n    useTooltipContext(\"Content\");\n  const [consumerRef, domProps] = splitRef<HTMLElement, typeof consumerProps>(consumerProps);\n  const popupRef = useRef<HTMLElement | null>(null);\n  const mergedRef = useMergedRefs(popupRef, consumerRef);\n  const consumerDomProps = domProps as {\n    id?: string;\n    style?: CSSProperties;\n  };\n  const resolvedId =\n    typeof consumerDomProps.id === \"string\" && consumerDomProps.id.length > 0\n      ? consumerDomProps.id\n      : contentId;\n  const consumerStyle = consumerDomProps.style;\n  useIsomorphicLayoutEffect(() => {\n    setContentId(resolvedId);\n  }, [resolvedId, setContentId]);\n  // Same technique as core/use-popover.ts: guard with .matches(\":popover-open\")\n  // so a StrictMode double-invoke or an unrelated re-run doesn't call\n  // showPopover/hidePopover on a popover already in that state (both throw).\n  // try/catch covers the node having disconnected between render and effect.\n  useIsomorphicLayoutEffect(() => {\n    const popup = popupRef.current;\n    if (!popup) return;\n    try {\n      if (open && !popup.matches(\":popover-open\")) popup.showPopover();\n      if (!open && popup.matches(\":popover-open\")) popup.hidePopover();\n    } catch {\n      // The node may have disconnected between render and layout effect.\n    }\n  }, [open]);\n  const { onPointerEnter: consumerOnPointerEnter, onPointerLeave: consumerOnPointerLeave } =\n    domProps as {\n      onPointerEnter?: (event: PointerEvent<HTMLElement>) => void;\n      onPointerLeave?: (event: PointerEvent<HTMLElement>) => void;\n    };\n  return useRenderElement({\n    as,\n    defaultTag: \"div\",\n    props: {\n      ...createAnchorPositionerProps({\n        align,\n        anchorName: anchorNameForId(anchorId),\n        side,\n      }),\n      ...(consumerStyle ? { style: consumerStyle } : {}),\n      popover: \"manual\",\n      // The consumer's own non-empty `id` wins (computed above as `resolvedId`); otherwise the\n      // The consumer's own non-empty `id` wins; otherwise the context-generated id is used.\n      id: resolvedId,\n      role: \"tooltip\",\n      \"data-part\": \"content\",\n      \"data-uiify-tooltip\": \"\",\n      \"data-state\": open ? \"open\" : \"closed\",\n      ...(className ? { className } : {}),\n      ...domProps,\n      ref: mergedRef,\n      onPointerEnter: composeEventHandlers(consumerOnPointerEnter, () => {\n        intent.clearCloseTimer();\n      }),\n      onPointerLeave: composeEventHandlers(\n        consumerOnPointerLeave,\n        (event: PointerEvent<HTMLElement>) => {\n          if (event.pointerType === \"mouse\") closeTooltip();\n        },\n      ),\n    },\n    render,\n    state: { open, positioning: \"native\" as const },\n  });\n}\nexport const Tooltip = {\n  Content: TooltipContent,\n  Provider: TooltipProvider,\n  Root: TooltipRoot,\n  Trigger: TooltipTrigger,\n};\n"],"mappings":"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","names":[]}

package/dist/components/virtual-scroll/VirtualScroll.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VirtualScroll.d.ts","sourceRoot":"","sources":["../../../src/components/virtual-scroll/VirtualScroll.tsx"],"names":[],"mappings":"AAEA,OAAO,EAQL,KAAK,YAAY,EAClB,MAAM,OAAO,CAAC;AA0Cf,OAAO,KAAK,EAEV,iBAAiB,EACjB,qBAAqB,EAItB,MAAM,YAAY,CAAC;AAwBpB,wBAAgB,aAAa,CAAC,CAAC,SAAS,iBAAiB,EACvD,KAAK,EAAE,qBAAqB,CAAC,CAAC,CAAC,GAC9B,YAAY,CA0fd;yBA5fe,aAAa"}
+{"version":3,"file":"VirtualScroll.d.ts","sourceRoot":"","sources":["../../../src/components/virtual-scroll/VirtualScroll.tsx"],"names":[],"mappings":"AAEA,OAAO,EAQL,KAAK,YAAY,EAClB,MAAM,OAAO,CAAC;AAuCf,OAAO,KAAK,EAEV,iBAAiB,EACjB,qBAAqB,EAItB,MAAM,YAAY,CAAC;AAwBpB,wBAAgB,aAAa,CAAC,CAAC,SAAS,iBAAiB,EACvD,KAAK,EAAE,qBAAqB,CAAC,CAAC,CAAC,GAC9B,YAAY,CAugBd;yBAzgBe,aAAa"}

package/dist/components/virtual-scroll/VirtualScroll.js

@@ -8,14 +8,11 @@ import {
   useRef,
   useState
 } from "react";
+import { composeEventHandlers } from "@gunkin/uiify/core/compose-event-handlers";
 import { flushSync } from "react-dom";
 import { useResizeObserver } from "@gunkin/uiify/hooks";
 import { useMergedRefs } from "../../hooks/use-merged-refs.js";
-import {
-  mergeRepeatedSlotProps,
-  omitProps,
-  resolveRepeatedSlotProps
-} from "../../core/slot-props.js";
+import { mergeRepeatedSlotProps, resolveRepeatedSlotProps } from "../../core/slot-props.js";
 import { resolveVirtualScrollAnchorAdjustment } from "./virtual-scroll-anchor.js";
 import { readScrollOffset, writeScrollOffset } from "./virtual-scroll-axis.js";
 import {
@@ -81,7 +78,6 @@ function VirtualScroll(props) {
     scrollRef,
     estimateRowHeight,
     onRangeChange,
-    role = "list",
     anchor = "start",
     followAppend = false,
     onScrollStateChange,
@@ -89,6 +85,7 @@ function VirtualScroll(props) {
     slotProps,
     ...consumerProps
   } = props;
+  const listRole = consumerProps.role === "grid" ? "grid" : "list";
   const height = suppliedHeight ?? 600;
   const dynamicLayout = estimateRowHeight !== void 0;
   const horizontal = orientation === "horizontal";
@@ -96,6 +93,16 @@ function VirtualScroll(props) {
   const rootRef = useMergedRefs(ref, consumerRef);
   const scrollOffsetRef = useRef(0);
   const programmaticScrollRef = useRef(false);
+  const eventHandlersRef = useRef({
+    onScroll: () => {
+    },
+    onScrollEnd: () => {
+    },
+    onTouchStart: () => {
+    },
+    onTouchEnd: () => {
+    }
+  });
   const itemsRef = useRef(items);
   itemsRef.current = items;
   const lastRangeChangeRef = useRef("");
@@ -196,7 +203,15 @@ function VirtualScroll(props) {
     applyVirtualScrollRangeToDom(element, nextRange, {
       dynamicLayout: dynamicLayout2,
       slotCount: slotCount2,
-      getRowOffset: store.getRowOffset.bind(store)
+      getRowOffset: store.getRowOffset.bind(store),
+      spacerStyle: slotProps?.spacer?.style,
+      getRowStyle: (index) => {
+        const item = itemsRef.current[index];
+        if (!item) return void 0;
+        const { byItemIndex, ...byItemValueProps } = slotProps?.row ?? {};
+        const commonProps = resolveRepeatedSlotProps(byItemValueProps, item.id);
+        return mergeRepeatedSlotProps(commonProps, byItemIndex?.[index]).style;
+      }
     });
     flushSync(() => {
       setRangeVersion((version) => version + 1);
@@ -355,8 +370,6 @@ function VirtualScroll(props) {
         }
       }
     });
-    let onScroll = null;
-    let onScrollEnd = null;
     const ios = iosControllerRef.current;
     const onTouchStart = () => ios.onTouchStart();
     const onTouchEnd = () => ios.onTouchEnd();
@@ -377,27 +390,29 @@ function VirtualScroll(props) {
         }, 0);
       });
     };
-    onScroll = () => {
+    const onScroll = () => {
       syncNativeScroll();
       scrollState.notifyScroll();
     };
-    element.addEventListener("scroll", onScroll, { passive: true });
-    if (supportsScrollEndEvent()) {
-      onScrollEnd = () => {
-        syncNativeScroll();
-        scrollState.notifyScrollEnd();
-      };
-      element.addEventListener("scrollend", onScrollEnd, { passive: true });
-    }
-    element.addEventListener("touchstart", onTouchStart, { passive: true });
-    element.addEventListener("touchend", onTouchEnd, { passive: true });
+    const onScrollEnd = () => {
+      if (!supportsScrollEndEvent()) return;
+      syncNativeScroll();
+      scrollState.notifyScrollEnd();
+    };
+    eventHandlersRef.current = { onScroll, onScrollEnd, onTouchStart, onTouchEnd };
     return () => {
       if (verifyFrame !== 0) cancelAnimationFrame(verifyFrame);
       if (verifyTimer !== 0) window.clearTimeout(verifyTimer);
-      if (onScroll) element.removeEventListener("scroll", onScroll);
-      if (onScrollEnd) element.removeEventListener("scrollend", onScrollEnd);
-      element.removeEventListener("touchstart", onTouchStart);
-      element.removeEventListener("touchend", onTouchEnd);
+      eventHandlersRef.current = {
+        onScroll: () => {
+        },
+        onScrollEnd: () => {
+        },
+        onTouchStart: () => {
+        },
+        onTouchEnd: () => {
+        }
+      };
       scrollState.dispose();
     };
   }, [isScrollingResetDelay]);
@@ -434,12 +449,12 @@ function VirtualScroll(props) {
   }, [range]);
   const scrollportStyle = {
     ...suppliedHeight !== void 0 || !consumerStyle?.blockSize && !consumerStyle?.height ? { blockSize: height } : {},
-    ...consumerStyle,
     overflowX: horizontal ? "auto" : void 0,
     overflowY: horizontal ? "hidden" : "auto",
     "--uiify-virtual-scroll-count": items.length,
     "--uiify-virtual-scroll-row-height": `${rowHeight}px`,
-    ...dynamicLayout ? { "--uiify-virtual-scroll-total-size": `${totalSize}px` } : {}
+    ...dynamicLayout ? { "--uiify-virtual-scroll-total-size": `${totalSize}px` } : {},
+    ...consumerStyle
   };
   const spacerStyle = dynamicLayout ? void 0 : {
     "--uiify-range-start": range.start
@@ -447,21 +462,37 @@ function VirtualScroll(props) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      ...consumerProps,
-      ref: rootRef,
-      "data-testid": testId ?? consumerProps["data-testid"],
+      "data-testid": testId,
       "data-uiify-virtual-scroll": "",
       "data-dynamic-layout": dynamicLayout ? "" : void 0,
       "data-orientation": orientation,
-      role,
+      role: listRole,
+      ...consumerProps,
+      ref: rootRef,
+      onScroll: composeEventHandlers(
+        consumerProps.onScroll,
+        () => eventHandlersRef.current.onScroll()
+      ),
+      onScrollEnd: composeEventHandlers(
+        consumerProps.onScrollEnd,
+        () => eventHandlersRef.current.onScrollEnd()
+      ),
+      onTouchStart: composeEventHandlers(
+        consumerProps.onTouchStart,
+        () => eventHandlersRef.current.onTouchStart()
+      ),
+      onTouchEnd: composeEventHandlers(
+        consumerProps.onTouchEnd,
+        () => eventHandlersRef.current.onTouchEnd()
+      ),
       className,
       style: scrollportStyle,
       children: /* @__PURE__ */ jsx(
         "div",
         {
-          ...omitProps(slotProps?.spacer, ["children", "dangerouslySetInnerHTML", "data-part"]),
           "data-part": "spacer",
-          style: { ...slotProps?.spacer?.style, ...spacerStyle },
+          ...slotProps?.spacer,
+          style: { ...spacerStyle, ...slotProps?.spacer?.style },
           children: rowSlots.map((slot) => {
             const store = measurementStoreRef.current;
             const rowOffset = dynamicLayout ? store.getRowOffset(slot.index) : void 0;
@@ -473,22 +504,13 @@ function VirtualScroll(props) {
                   if (!slot.item) return {};
                   const { byItemIndex, ...byItemValueProps } = slotProps?.row ?? {};
                   const commonProps = resolveRepeatedSlotProps(byItemValueProps, slot.item.id);
-                  return omitProps(mergeRepeatedSlotProps(commonProps, byItemIndex?.[slot.index]), [
-                    "children",
-                    "dangerouslySetInnerHTML",
-                    "aria-posinset",
-                    "aria-setsize",
-                    "data-dynamic-row",
-                    "data-part",
-                    "data-row-index",
-                    "role"
-                  ]);
+                  return mergeRepeatedSlotProps(commonProps, byItemIndex?.[slot.index]);
                 })(),
                 key: `slot-${slot.slotIndex}`,
                 slotIndex: slot.slotIndex,
                 index: slot.index,
                 itemCount: items.length,
-                listRole: role,
+                listRole,
                 dynamicLayout,
                 ...rowOffset !== void 0 ? { rowOffset } : {},
                 ...measuredRowHeight !== void 0 ? { rowHeight: measuredRowHeight } : {}