@c2n/overlay 0.0.11 → 0.0.13

package/custom-elements.json

@@ -0,0 +1 @@
+{"schemaVersion":"1.0.0","readme":"","modules":[{"kind":"javascript-module","path":"src/overlay.ts","declarations":[{"kind":"class","description":"Anchored popup built on the browser Popover API: the element sits in the top layer, opens and light-dismisses\nnatively (Escape, click outside) and is positioned next to its anchor with floating-ui. The anchor is found in\nthis order: the `anchor` property (an element), the `anchor` attribute (an element id in the same tree), or the\nelement whose `popovertarget` points at this overlay's `id`. The overlay only positions itself; the content brings\nits own surface (background, border, shadow), so it fits menus, pickers and cards alike.\n\nThe preferred `placement` may flip or shift to stay in the viewport; the placement actually used is exposed as the\n`current-placement` attribute, and the space available on that side as `--c2-overlay--available-height` /\n`--c2-overlay--available-width` custom properties (use them to cap a scrolling list).","name":"Overlay","cssProperties":[{"type":{"text":"pixel"},"description":"Distance between the anchor and the overlay along the main axis.","name":"--c2-overlay--offset-y","default":"8px"},{"type":{"text":"pixel"},"description":"Shift along the cross axis (towards the end for `*-start`, the start for `*-end`).","name":"--c2-overlay--offset-x","default":"0px"},{"type":{"text":"pixel"},"description":"Minimum gap kept between the overlay and the viewport edges.","name":"--c2-overlay--viewport-padding","default":"8px"},{"type":{"text":"time"},"description":"Open/close fade and scale; `0ms` disables it.","name":"--c2-overlay--transition-duration","default":"150ms"},{"type":{"text":"color"},"description":"The `::backdrop` behind the popover.","name":"--c2-overlay__backdrop--background","default":"transparent"}],"slots":[{"description":"Content of the overlay.","name":""}],"members":[{"kind":"field","name":"open","type":{"text":"boolean"},"default":"false","description":"Open state, kept in sync with the native popover (setting it shows or hides the popover).","attribute":"open","reflects":true},{"kind":"field","name":"placement","type":{"text":"'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'"},"default":"'bottom-start'","description":"Preferred placement (floating-ui names). The one in use is reflected as `current-placement`.","attribute":"placement","reflects":true},{"kind":"field","name":"offset","type":{"text":"number | undefined"},"default":"undefined","description":"Distance in pixels from the anchor along the placement direction. Falls back to `--c2-overlay--offset-y`.","attribute":"offset"},{"kind":"field","name":"crossOffset","type":{"text":"number | undefined"},"default":"undefined","description":"Shift in pixels perpendicular to the placement direction. Falls back to `--c2-overlay--offset-x`.","attribute":"cross-offset"},{"kind":"field","name":"disabledCrossAxis","type":{"text":"boolean"},"default":"false","description":"Do not flip across the cross axis when there is no room (only along the main axis).","attribute":"disabled-cross-axis","reflects":true},{"kind":"field","name":"fitTarget","type":{"text":"boolean"},"default":"false","description":"Make the overlay exactly as wide as the anchor.","attribute":"fit-anchor"},{"kind":"field","name":"freeWidth","type":{"text":"boolean"},"default":"false","description":"By default the overlay is at least as wide as its anchor; set this to size it by its content only.","attribute":"free-width"},{"kind":"field","name":"anchor","type":{"text":"string | HTMLElement | undefined"},"default":"undefined","description":"Anchor element, or (attribute) the id of the anchor. Falls back to the element whose `popovertarget` is this overlay's id.","attribute":"anchor"},{"kind":"field","name":"cleanupPosition","type":{"text":"(() => void) | null"},"privacy":"private","default":"null"},{"kind":"field","name":"anchorElement","type":{"text":"HTMLElement | null"},"description":"The resolved anchor element, if any.","readonly":true},{"kind":"field","name":"handleBeforeToggle","privacy":"private"},{"kind":"field","name":"handleToggle","privacy":"private"},{"kind":"method","name":"readPixels","privacy":"private","return":{"type":{"text":"number"}},"parameters":[{"name":"name","type":{"text":"string"}},{"name":"fallback","type":{"text":"number"}}]},{"kind":"method","name":"startPositioning","privacy":"private"},{"kind":"method","name":"stopPositioning","privacy":"private"},{"kind":"method","name":"updatePosition","privacy":"private","parameters":[{"name":"anchor","type":{"text":"HTMLElement"}}]}],"events":[{"type":{"text":"ToggleEvent"},"description":"Native popover toggle: `newState` is `open` or `closed`.","name":"toggle"},{"type":{"text":"ToggleEvent"},"description":"Native, cancelable, fired before the state changes.","name":"beforetoggle"}],"attributes":[{"name":"open","type":{"text":"boolean"},"default":"false","description":"Open state, kept in sync with the native popover (setting it shows or hides the popover).","fieldName":"open"},{"name":"placement","type":{"text":"'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'"},"default":"'bottom-start'","description":"Preferred placement (floating-ui names). The one in use is reflected as `current-placement`.","fieldName":"placement"},{"name":"offset","type":{"text":"number | undefined"},"default":"undefined","description":"Distance in pixels from the anchor along the placement direction. Falls back to `--c2-overlay--offset-y`.","fieldName":"offset"},{"name":"cross-offset","type":{"text":"number | undefined"},"default":"undefined","description":"Shift in pixels perpendicular to the placement direction. Falls back to `--c2-overlay--offset-x`.","fieldName":"crossOffset"},{"name":"disabled-cross-axis","type":{"text":"boolean"},"default":"false","description":"Do not flip across the cross axis when there is no room (only along the main axis).","fieldName":"disabledCrossAxis"},{"name":"fit-anchor","type":{"text":"boolean"},"default":"false","description":"Make the overlay exactly as wide as the anchor.","fieldName":"fitTarget"},{"name":"free-width","type":{"text":"boolean"},"default":"false","description":"By default the overlay is at least as wide as its anchor; set this to size it by its content only.","fieldName":"freeWidth"},{"name":"anchor","type":{"text":"string | HTMLElement | undefined"},"default":"undefined","description":"Anchor element, or (attribute) the id of the anchor. Falls back to the element whose `popovertarget` is this overlay's id.","fieldName":"anchor"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"c2-overlay","customElement":true}],"exports":[{"kind":"js","name":"Placement","declaration":{"name":"Placement","module":"src/overlay.ts"}},{"kind":"js","name":"Overlay","declaration":{"name":"Overlay","module":"src/overlay.ts"}},{"kind":"custom-element-definition","name":"c2-overlay","declaration":{"name":"Overlay","module":"src/overlay.ts"}}]}]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c2n/overlay",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "type": "module",
   "main": "dist/overlay.js",
   "exports": {
@@ -21,6 +21,7 @@
   "files": [
     "dist",
     "types",
+    "custom-elements.json",
     "react.d.ts",
     "react.js",
     "vue.d.ts",
@@ -60,7 +61,7 @@
     }
   },
   "dependencies": {
-    "@c2n/core": "0.0.11",
+    "@c2n/core": "0.0.13",
     "@floating-ui/dom": "1.8.0",
     "lit": "3.3.3"
   },
@@ -68,5 +69,5 @@
     "@c2n/config": "*"
   },
   "customElements": "custom-elements.json",
-  "gitHead": "bf962fba5e49a0ac7555a082584e262949d323a5"
+  "gitHead": "aa19b641f64fbc54c36b7649a8171d7a686abbdd"
 }

package/react.d.ts

@@ -6,17 +6,28 @@
 //
 // Register the elements at module scope before React renders, or React writes an object prop as an
 // attribute and it stringifies.
+//
+// On a server-rendered page (Next.js, React Router SSR) write a camelCase property by its kebab-case attribute
+// name ('row-key', not rowKey): the server emits props verbatim, HTML lowercases them, and hydration does not
+// set properties. Those names are listed next to the properties below.
 
 import type { DetailedHTMLProps, HTMLAttributes } from 'react'
 import type { Overlay } from '@c2n/overlay'
 
 /** Standard React host-element attributes plus the element's own public properties. */
 type C2Props<T> = DetailedHTMLProps<HTMLAttributes<T>, T> & Partial<Omit<T, keyof HTMLElement>>
+/** What React writes to a custom element's attribute: true becomes the empty string, false removes it. */
+type Attribute = string | number | boolean
 
 declare module 'react' {
   namespace JSX {
     interface IntrinsicElements {
-      'c2-overlay': C2Props<Overlay>
+      'c2-overlay': C2Props<Overlay> & {
+        'cross-offset'?: Attribute
+        'disabled-cross-axis'?: Attribute
+        'fit-anchor'?: Attribute
+        'free-width'?: Attribute
+      }
     }
   }
 }