@jungherz-de/notionkit-elements 1.9.0 → 1.10.1

package/src/components/shell/nk-workspace-switcher.js

@@ -8,7 +8,7 @@ import { NkElement } from '../../base.js';
 // row; clicking outside or pressing Escape closes it.
 const menuSheet = new CSSStyleSheet();
 menuSheet.replaceSync(`
-  .nk-ws-anchor { position: relative; }
+  .nk-ws-anchor { position: relative; flex: 1 1 auto; min-width: 0; }
   .nk-ws-menu { display: none; position: absolute; left: 8px; top: calc(100% - 2px); z-index: 50; }
   :host([open]) .nk-ws-menu { display: block; }
 `);

package/src/index.js

@@ -90,6 +90,8 @@ export { NkCopyField } from './components/forms/nk-copy-field.js';
 export { NkImagePicker } from './components/forms/nk-image-picker.js';
 export { NkCalendar } from './components/forms/nk-calendar.js';
 export { NkPeek } from './components/overlays/nk-peek.js';
+export { NkDialog } from './components/overlays/nk-dialog.js';
+export { NkTooltip } from './components/overlays/nk-tooltip.js';
 
 // Wave 4 – overlays
 export { NkModal } from './components/overlays/nk-modal.js';

package/src/util/floating.js

@@ -11,6 +11,21 @@ export function boxOf(el) {
   return el.getBoundingClientRect();
 }
 
+/**
+ * Puts `host` 6px below `target` – an element or a rect ({ left, top, right,
+ * bottom }, a DOMRect) – centred on it: above with side="top", or where the
+ * window ends below; kept 8px inside the window. For <nk-tooltip>.
+ */
+export function placeNear(host, target, side = 'bottom', gap = 6) {
+  const r = target instanceof Element ? boxOf(target) : target;
+  const { width: w, height: h } = host.getBoundingClientRect();
+  const below = r.bottom + gap, above = r.top - gap - h;
+  const top = side === 'top' ? (above < 8 ? below : above) : (below + h > innerHeight - 8 ? above : below);
+  host.style.top = `${Math.round(top)}px`;
+  host.style.left = `${Math.round(Math.min(Math.max(8, (r.left + r.right) / 2 - w / 2), innerWidth - 8 - w))}px`;
+  host.style.right = '';
+}
+
 /** Puts `host` 6px under `anchor`, right edges aligned – left edges with align="start". */
 export function placeUnder(host, anchor, align) {
   const r = boxOf(anchor);