@gunkin/uiify 0.0.25-alpha → 0.0.27-alpha

package/dist/elements/popover/Popover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/popover/Popover.tsx"],"sourcesContent":["import { createElement } from \"react\";\nimport type { ElementType, ReactElement } from \"react\";\nimport type {\n  PopoverCloseProps,\n  PopoverSurfaceProps,\n  PopoverTriggerAction,\n  PopoverTriggerProps,\n} from \"./types.js\";\n\n/**\n * Render a `popovertarget` invoker. React 19 knows `popoverTarget` and\n * `popoverTargetAction` as camelCase DOM properties: on the client it sets them via\n * `setAttribute`, which the browser lowercases automatically for an HTML element, and any\n * HTML parser (including hydration) lowercases attribute names from source regardless of\n * case — so the resulting DOM attribute is always `popovertarget`/`popovertargetaction`.\n * React's SSR string renderer has no case-mapping for these two (unlike `className` or\n * `htmlFor`) and serializes the literal camelCase spelling into the markup string; that is\n * a cosmetic detail of the raw SSR string, not a behavioral gap, since a real parser\n * normalizes it.\n *\n * `createElement` rather than JSX for the same reason as `elements/invoker`/`elements/dialog`:\n * `as` is typed as the generic `ElementType`, so a plain object survives type-checking where\n * a literal JSX attribute list on a polymorphic tag would not.\n */\nfunction renderInvoker(\n  as: ElementType | undefined,\n  marker: string,\n  part: string,\n  action: PopoverTriggerAction,\n  target: string,\n  consumerProps: Record<string, unknown>,\n): ReactElement {\n  return createElement(as ?? \"button\", {\n    ...consumerProps,\n    [marker]: \"\",\n    \"data-part\": part,\n    popoverTarget: target,\n    popoverTargetAction: action,\n    type: \"button\",\n  });\n}\n\n/**\n * Acts on `target` (`action`, default `\"toggle\"`); light dismiss, Escape and nesting are\n * handled by the browser. The popover opened this way uses the invoker as its implicit\n * anchor, so no anchor name is emitted. Emits `data-uiify-popover` with\n * `data-part=\"trigger\"`.\n */\nfunction popoverTrigger<TAs extends ElementType = \"button\">(\n  props: PopoverTriggerProps<TAs>,\n): ReactElement {\n  const {\n    action = \"toggle\",\n    as,\n    target,\n    ...consumerProps\n  } = props as PopoverTriggerProps<\"button\">;\n  return renderInvoker(\n    as,\n    \"data-uiify-popover\",\n    \"trigger\",\n    action,\n    target,\n    consumerProps as Record<string, unknown>,\n  );\n}\nexport const PopoverTrigger = /* @__PURE__ */ Object.assign(popoverTrigger, {\n  displayName: \"PopoverTrigger\",\n});\n\n/**\n * The popover surface. `data-side`/`data-align` drive required geometry in\n * `@gunkin/uiify/components/behavior.css`; optional skins provide the gap. Emits `popover`, `data-side`, `data-align`, `data-positioning=\"native\"` and\n * `data-uiify-popover` with `data-part=\"surface\"`.\n */\nfunction popoverSurface(props: PopoverSurfaceProps): ReactElement {\n  const { align = \"center\", children, mode = \"auto\", side = \"bottom\", ...consumerProps } = props;\n  return (\n    <div\n      {...consumerProps}\n      data-align={align}\n      data-part=\"surface\"\n      data-positioning=\"native\"\n      data-side={side}\n      data-uiify-popover=\"\"\n      popover={mode}\n    >\n      {children}\n    </div>\n  );\n}\nexport const PopoverSurface = /* @__PURE__ */ Object.assign(popoverSurface, {\n  displayName: \"PopoverSurface\",\n});\n\n/**\n * Hides `target`. Emits `data-uiify-popover` with `data-part=\"close\"`.\n */\nfunction popoverClose<TAs extends ElementType = \"button\">(\n  props: PopoverCloseProps<TAs>,\n): ReactElement {\n  const { as, target, ...consumerProps } = props as PopoverCloseProps<\"button\">;\n  return renderInvoker(\n    as,\n    \"data-uiify-popover\",\n    \"close\",\n    \"hide\",\n    target,\n    consumerProps as Record<string, unknown>,\n  );\n}\nexport const PopoverClose = /* @__PURE__ */ Object.assign(popoverClose, {\n  displayName: \"PopoverClose\",\n});\n\nexport const Popover = {\n  Trigger: PopoverTrigger,\n  Surface: PopoverSurface,\n  Close: PopoverClose,\n};\n"],"mappings":"AA8EI;AA9EJ,SAAS,qBAAqB;AAwB9B,SAAS,cACP,IACA,QACA,MACA,QACA,QACA,eACc;AACd,SAAO,cAAc,MAAM,UAAU;AAAA,IACnC,GAAG;AAAA,IACH,CAAC,MAAM,GAAG;AAAA,IACV,aAAa;AAAA,IACb,eAAe;AAAA,IACf,qBAAqB;AAAA,IACrB,MAAM;AAAA,EACR,CAAC;AACH;AAQA,SAAS,eACP,OACc;AACd,QAAM;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AACO,MAAM,iBAAiC,uBAAO,OAAO,gBAAgB;AAAA,EAC1E,aAAa;AACf,CAAC;AAOD,SAAS,eAAe,OAA0C;AAChE,QAAM,EAAE,QAAQ,UAAU,UAAU,OAAO,QAAQ,OAAO,UAAU,GAAG,cAAc,IAAI;AACzF,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,cAAY;AAAA,MACZ,aAAU;AAAA,MACV,oBAAiB;AAAA,MACjB,aAAW;AAAA,MACX,sBAAmB;AAAA,MACnB,SAAS;AAAA,MAER;AAAA;AAAA,EACH;AAEJ;AACO,MAAM,iBAAiC,uBAAO,OAAO,gBAAgB;AAAA,EAC1E,aAAa;AACf,CAAC;AAKD,SAAS,aACP,OACc;AACd,QAAM,EAAE,IAAI,QAAQ,GAAG,cAAc,IAAI;AACzC,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AACO,MAAM,eAA+B,uBAAO,OAAO,cAAc;AAAA,EACtE,aAAa;AACf,CAAC;AAEM,MAAM,UAAU;AAAA,EACrB,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AACT;","names":[]}
+{"version":3,"sources":["../../../src/elements/popover/Popover.tsx"],"sourcesContent":["import { createElement } from \"react\";\nimport type { ElementType, ReactElement } from \"react\";\nimport type {\n  PopoverCloseProps,\n  PopoverSurfaceProps,\n  PopoverTriggerAction,\n  PopoverTriggerProps,\n} from \"./types.js\";\n/**\n * Render a `popovertarget` invoker. React 19 knows `popoverTarget` and\n * `popoverTargetAction` as camelCase DOM properties: on the client it sets them via\n * `setAttribute`, which the browser lowercases automatically for an HTML element, and any\n * HTML parser (including hydration) lowercases attribute names from source regardless of\n * case — so the resulting DOM attribute is always `popovertarget`/`popovertargetaction`.\n * React's SSR string renderer has no case-mapping for these two (unlike `className` or\n * `htmlFor`) and serializes the literal camelCase spelling into the markup string; that is\n * a cosmetic detail of the raw SSR string, not a behavioral gap, since a real parser\n * normalizes it.\n *\n * `createElement` rather than JSX for the same reason as `elements/invoker`/`elements/dialog`:\n * `as` is typed as the generic `ElementType`, so a plain object survives type-checking where\n * a literal JSX attribute list on a polymorphic tag would not.\n */\nfunction renderInvoker(\n  as: ElementType | undefined,\n  marker: string,\n  part: string,\n  action: PopoverTriggerAction,\n  target: string,\n  consumerProps: Record<string, unknown>,\n): ReactElement {\n  return createElement(as ?? \"button\", {\n    [marker]: \"\",\n    \"data-part\": part,\n    popoverTarget: target,\n    popoverTargetAction: action,\n    type: \"button\",\n    ...consumerProps,\n  });\n}\n/**\n * Acts on `target` (`action`, default `\"toggle\"`); light dismiss, Escape and nesting are\n * handled by the browser. The popover opened this way uses the invoker as its implicit\n * anchor, so no anchor name is emitted. Emits `data-uiify-popover` with\n * `data-part=\"trigger\"`.\n */\nfunction popoverTrigger<TAs extends ElementType = \"button\">(\n  props: PopoverTriggerProps<TAs>,\n): ReactElement {\n  const {\n    action = \"toggle\",\n    as,\n    target,\n    ...consumerProps\n  } = props as PopoverTriggerProps<\"button\">;\n  return renderInvoker(\n    as,\n    \"data-uiify-popover\",\n    \"trigger\",\n    action,\n    target,\n    consumerProps as Record<string, unknown>,\n  );\n}\nexport const PopoverTrigger = /* @__PURE__ */ Object.assign(popoverTrigger, {\n  displayName: \"PopoverTrigger\",\n});\n/**\n * The popover surface. `data-side`/`data-align` drive required geometry in\n * `@gunkin/uiify/components/behavior.css`; optional skins provide the gap. Emits `popover`, `data-side`, `data-align`, `data-positioning=\"native\"` and\n * `data-uiify-popover` with `data-part=\"surface\"`.\n */\nfunction popoverSurface(props: PopoverSurfaceProps): ReactElement {\n  const { align = \"center\", children, mode = \"auto\", side = \"bottom\", ...consumerProps } = props;\n  return (\n    <div\n      data-align={align}\n      data-part=\"surface\"\n      data-positioning=\"native\"\n      data-side={side}\n      data-uiify-popover=\"\"\n      popover={mode}\n      {...consumerProps}\n    >\n      {children}\n    </div>\n  );\n}\nexport const PopoverSurface = /* @__PURE__ */ Object.assign(popoverSurface, {\n  displayName: \"PopoverSurface\",\n});\n/**\n * Hides `target`. Emits `data-uiify-popover` with `data-part=\"close\"`.\n */\nfunction popoverClose<TAs extends ElementType = \"button\">(\n  props: PopoverCloseProps<TAs>,\n): ReactElement {\n  const { as, target, ...consumerProps } = props as PopoverCloseProps<\"button\">;\n  return renderInvoker(\n    as,\n    \"data-uiify-popover\",\n    \"close\",\n    \"hide\",\n    target,\n    consumerProps as Record<string, unknown>,\n  );\n}\nexport const PopoverClose = /* @__PURE__ */ Object.assign(popoverClose, {\n  displayName: \"PopoverClose\",\n});\nexport const Popover = {\n  Trigger: PopoverTrigger,\n  Surface: PopoverSurface,\n  Close: PopoverClose,\n};\n"],"mappings":"AA2EI;AA3EJ,SAAS,qBAAqB;AAuB9B,SAAS,cACP,IACA,QACA,MACA,QACA,QACA,eACc;AACd,SAAO,cAAc,MAAM,UAAU;AAAA,IACnC,CAAC,MAAM,GAAG;AAAA,IACV,aAAa;AAAA,IACb,eAAe;AAAA,IACf,qBAAqB;AAAA,IACrB,MAAM;AAAA,IACN,GAAG;AAAA,EACL,CAAC;AACH;AAOA,SAAS,eACP,OACc;AACd,QAAM;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AACO,MAAM,iBAAiC,uBAAO,OAAO,gBAAgB;AAAA,EAC1E,aAAa;AACf,CAAC;AAMD,SAAS,eAAe,OAA0C;AAChE,QAAM,EAAE,QAAQ,UAAU,UAAU,OAAO,QAAQ,OAAO,UAAU,GAAG,cAAc,IAAI;AACzF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAY;AAAA,MACZ,aAAU;AAAA,MACV,oBAAiB;AAAA,MACjB,aAAW;AAAA,MACX,sBAAmB;AAAA,MACnB,SAAS;AAAA,MACR,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AACO,MAAM,iBAAiC,uBAAO,OAAO,gBAAgB;AAAA,EAC1E,aAAa;AACf,CAAC;AAID,SAAS,aACP,OACc;AACd,QAAM,EAAE,IAAI,QAAQ,GAAG,cAAc,IAAI;AACzC,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AACO,MAAM,eAA+B,uBAAO,OAAO,cAAc;AAAA,EACtE,aAAa;AACf,CAAC;AACM,MAAM,UAAU;AAAA,EACrB,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AACT;","names":[]}

package/dist/elements/popover/types.d.ts

@@ -4,6 +4,7 @@ import type { NativeButtonProps } from "@gunkin/uiify/core/render";
 export type PopoverSurfaceMode = "auto" | "manual";
 export type AnchorSide = "top" | "right" | "bottom" | "left";
 export type AnchorAlign = "start" | "center" | "end";
+type PopoverInvokerNativeProps = Pick<ComponentPropsWithRef<"button">, "popoverTarget" | "popoverTargetAction">;
 /** What a trigger does to its target popover when activated. */
 export type PopoverTriggerAction = "toggle" | "show" | "hide";
 export interface PopoverTriggerOwnProps {
@@ -13,13 +14,13 @@ export interface PopoverTriggerOwnProps {
     /** `id` of the `Popover.Surface` this button acts on. */
     readonly target: string;
 }
-export type PopoverTriggerProps<TAs extends ElementType = "button"> = NativeButtonProps<TAs, PopoverTriggerOwnProps>;
+export type PopoverTriggerProps<TAs extends ElementType = "button"> = NativeButtonProps<TAs, PopoverTriggerOwnProps & PopoverInvokerNativeProps>;
 export interface PopoverCloseOwnProps {
     readonly children?: ReactNode;
     /** `id` of the `Popover.Surface` this button hides. */
     readonly target: string;
 }
-export type PopoverCloseProps<TAs extends ElementType = "button"> = NativeButtonProps<TAs, PopoverCloseOwnProps>;
+export type PopoverCloseProps<TAs extends ElementType = "button"> = NativeButtonProps<TAs, PopoverCloseOwnProps & PopoverInvokerNativeProps>;
 export interface PopoverSurfaceOwnProps {
     readonly align?: AnchorAlign;
     readonly children?: ReactNode;
@@ -28,6 +29,7 @@ export interface PopoverSurfaceOwnProps {
     readonly mode?: PopoverSurfaceMode;
     readonly side?: AnchorSide;
 }
-/** `popover`, `data-side`, `data-align` and `data-positioning` are owned by the element. */
-export type PopoverSurfaceProps = PopoverSurfaceOwnProps & Omit<ComponentPropsWithRef<"div">, keyof PopoverSurfaceOwnProps | "popover">;
+/** Native props can override the surface defaults. */
+export type PopoverSurfaceProps = PopoverSurfaceOwnProps & Omit<ComponentPropsWithRef<"div">, keyof PopoverSurfaceOwnProps>;
+export {};
 //# sourceMappingURL=types.d.ts.map

package/dist/elements/popover/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/popover/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC3E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAEnE,4EAA4E;AAC5E,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEnD,MAAM,MAAM,UAAU,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE7D,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAErD,gEAAgE;AAChE,MAAM,MAAM,oBAAoB,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;AAE9D,MAAM,WAAW,sBAAsB;IACrC,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAC9B,8BAA8B;IAC9B,QAAQ,CAAC,MAAM,CAAC,EAAE,oBAAoB,CAAC;IACvC,yDAAyD;IACzD,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,MAAM,mBAAmB,CAAC,GAAG,SAAS,WAAW,GAAG,QAAQ,IAAI,iBAAiB,CACrF,GAAG,EACH,sBAAsB,CACvB,CAAC;AAEF,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAC9B,uDAAuD;IACvD,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,MAAM,iBAAiB,CAAC,GAAG,SAAS,WAAW,GAAG,QAAQ,IAAI,iBAAiB,CACnF,GAAG,EACH,oBAAoB,CACrB,CAAC;AAEF,MAAM,WAAW,sBAAsB;IACrC,QAAQ,CAAC,KAAK,CAAC,EAAE,WAAW,CAAC;IAC7B,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAC9B,oFAAoF;IACpF,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,IAAI,CAAC,EAAE,kBAAkB,CAAC;IACnC,QAAQ,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC;CAC5B;AAED,4FAA4F;AAC5F,MAAM,MAAM,mBAAmB,GAAG,sBAAsB,GACtD,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,MAAM,sBAAsB,GAAG,SAAS,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/popover/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC3E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAEnE,4EAA4E;AAC5E,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEnD,MAAM,MAAM,UAAU,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE7D,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAErD,KAAK,yBAAyB,GAAG,IAAI,CACnC,qBAAqB,CAAC,QAAQ,CAAC,EAC/B,eAAe,GAAG,qBAAqB,CACxC,CAAC;AAEF,gEAAgE;AAChE,MAAM,MAAM,oBAAoB,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;AAE9D,MAAM,WAAW,sBAAsB;IACrC,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAC9B,8BAA8B;IAC9B,QAAQ,CAAC,MAAM,CAAC,EAAE,oBAAoB,CAAC;IACvC,yDAAyD;IACzD,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,MAAM,mBAAmB,CAAC,GAAG,SAAS,WAAW,GAAG,QAAQ,IAAI,iBAAiB,CACrF,GAAG,EACH,sBAAsB,GAAG,yBAAyB,CACnD,CAAC;AAEF,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAC9B,uDAAuD;IACvD,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,MAAM,iBAAiB,CAAC,GAAG,SAAS,WAAW,GAAG,QAAQ,IAAI,iBAAiB,CACnF,GAAG,EACH,oBAAoB,GAAG,yBAAyB,CACjD,CAAC;AAEF,MAAM,WAAW,sBAAsB;IACrC,QAAQ,CAAC,KAAK,CAAC,EAAE,WAAW,CAAC;IAC7B,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAC9B,oFAAoF;IACpF,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,IAAI,CAAC,EAAE,kBAAkB,CAAC;IACnC,QAAQ,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC;CAC5B;AAED,sDAAsD;AACtD,MAAM,MAAM,mBAAmB,GAAG,sBAAsB,GACtD,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,MAAM,sBAAsB,CAAC,CAAC"}