@morscherlab/mint-sdk 1.4.0-beta.20 → 1.4.0-beta.21

package/src/composables/useFloatingPanel.ts

@@ -0,0 +1,107 @@
+import {
+  autoUpdate,
+  computePosition,
+  flip,
+  hide,
+  offset,
+  shift,
+  size,
+  type Placement,
+  type ReferenceElement,
+} from '@floating-ui/dom'
+import { onScopeDispose, ref, toValue, watch, type MaybeRefOrGetter, type Ref } from 'vue'
+
+// Internal: not exported from the package entry points.
+
+export interface UseFloatingPanelOptions {
+  /** Default `'bottom-start'`. */
+  placement?: MaybeRefOrGetter<Placement>
+  /** Gap to the reference in px. Default 4. */
+  offset?: number
+  /** At least the reference width, at most 28rem (selects). */
+  matchWidth?: boolean
+  /** Re-place on scroll, resize and layout shift while open. Default `true`. */
+  follow?: boolean
+}
+
+export interface UseFloatingPanelReturn {
+  /** Bind to the panel: `position: fixed`, `left`, `top`, and `visibility: hidden` while the reference is scrolled out of view. */
+  style: Ref<Record<string, string>>
+  /** The placement after flip, for arrows and transitions. */
+  placement: Ref<Placement>
+  update: () => Promise<void>
+}
+
+/**
+ * Places `floating` next to `reference` with fixed positioning (offset, flip,
+ * shift, size, hide). A fixed panel escapes the `overflow` of its ancestors (a
+ * modal body) unless one of them has a transform, so it can stay in the DOM right
+ * after its trigger: Tab order, focus traps and outside-click checks are those of
+ * an in-place panel. The size middleware publishes the free height as
+ * `--mint-floating-available-height`; a panel whose list scrolls caps its
+ * `max-height` with it.
+ */
+export function useFloatingPanel(
+  reference: MaybeRefOrGetter<ReferenceElement | null>,
+  floating: Ref<HTMLElement | null>,
+  open: Ref<boolean>,
+  options: UseFloatingPanelOptions = {},
+): UseFloatingPanelReturn {
+  const style = ref<Record<string, string>>({ position: 'fixed', left: '0px', top: '0px' })
+  const placement = ref<Placement>(toValue(options.placement) ?? 'bottom-start')
+
+  async function update(): Promise<void> {
+    const referenceEl = toValue(reference)
+    const floatingEl = floating.value
+    if (!referenceEl || !floatingEl) return
+    const result = await computePosition(referenceEl, floatingEl, {
+      placement: toValue(options.placement) ?? 'bottom-start',
+      strategy: 'fixed',
+      middleware: [
+        offset(options.offset ?? 4),
+        flip(),
+        shift({ padding: 8 }),
+        size({
+          padding: 8,
+          // Written to the element, not the reactive style: floating-ui measures again right after.
+          apply({ availableHeight, rects, elements }) {
+            const target = elements.floating.style
+            target.setProperty('--mint-floating-available-height', `${Math.max(0, availableHeight)}px`)
+            if (options.matchWidth) {
+              target.minWidth = `${rects.reference.width}px`
+              target.maxWidth = '28rem'
+            }
+          },
+        }),
+        hide(),
+      ],
+    })
+    const next: Record<string, string> = { position: 'fixed', left: `${result.x}px`, top: `${result.y}px` }
+    // The trigger scrolled out of its scroll container: keep the panel open, but not floating detached.
+    if (result.middlewareData.hide?.referenceHidden) next.visibility = 'hidden'
+    // autoUpdate fires on every scroll; re-render only when the panel changes.
+    const current = style.value
+    if (current.left !== next.left || current.top !== next.top || current.visibility !== next.visibility) style.value = next
+    placement.value = result.placement
+  }
+
+  let stop: (() => void) | undefined
+  function release(): void {
+    stop?.()
+    stop = undefined
+  }
+
+  watch(
+    [open, () => toValue(reference), floating],
+    ([isOpen, referenceEl, floatingEl]) => {
+      release()
+      if (!isOpen || !referenceEl || !floatingEl) return
+      if (options.follow ?? true) stop = autoUpdate(referenceEl, floatingEl, () => void update())
+      else void update()
+    },
+    { flush: 'post', immediate: true },
+  )
+  onScopeDispose(release)
+
+  return { style, placement, update }
+}

package/src/data.ts

@@ -122,6 +122,7 @@ export {
 export {
   detectDelimiter,
   readFileAsText,
+  readTableFileAsCsv,
   useFileImport,
   validateImportFile,
   type FileImportOptions,

package/src/styles/components/action-menu.css

@@ -9,7 +9,7 @@
 
 .mint-action-menu__panel {
   position: fixed;
-  z-index: 1000;
+  z-index: var(--mint-z-popover);
   min-width: 10rem;
   max-width: min(18rem, calc(100vw - 1rem));
 }

package/src/styles/components/app-layout.css

@@ -124,8 +124,10 @@
     transform: translateX(calc(100% + 1rem));
   }
 
+  /* `none`, not translateX(0): any transform makes the sidebar the containing
+     block of its fixed dropdown panels, and its overflow would clip them. */
   .mint-layout--responsive-sidebar.mint-layout--sidebar-open .mint-layout__sidebar {
-    transform: translateX(0);
+    transform: none;
   }
 
   .mint-layout--responsive-sidebar .mint-layout__sidebar-toggle {

package/src/styles/components/date-picker.css

@@ -130,11 +130,13 @@
   height: 0.875rem;
 }
 
-/* Calendar dropdown (teleported to body, positioned via JS). */
+/* Calendar dropdown (teleported to body, positioned by useFloatingPanel). */
 .mint-date-picker__dropdown {
   position: fixed;
-  z-index: 9999;
+  z-index: var(--mint-z-popover);
   width: 252px;
+  max-height: var(--mint-floating-available-height, none);
+  overflow-y: auto;
   padding: 0.5rem;
 }
 

package/src/styles/components/datetime-picker.css

@@ -97,12 +97,12 @@
   color: var(--text-muted);
 }
 
-/* Dropdown — placement only; the look is .mint-popover. */
+/* Dropdown — the look is .mint-popover; useFloatingPanel sets the fixed position. */
 .mint-datetime-picker__dropdown {
-  position: absolute;
-  z-index: 50;
-  margin-top: 0.25rem;
+  z-index: var(--mint-z-popover);
   width: 18rem;
+  max-height: var(--mint-floating-available-height, none);
+  overflow-y: auto;
   padding: 0.625rem;
 }
 

package/src/styles/components/jobs-status-tray.css

@@ -14,14 +14,14 @@
 .mint-jobs-tray__scrim {
   position: fixed;
   inset: 0;
-  z-index: 999;
+  z-index: calc(var(--mint-z-tray) - 1);
 }
 
 .mint-jobs-tray__panel {
   position: fixed;
   top: calc(4.5rem + env(safe-area-inset-top));
   right: max(1rem, env(safe-area-inset-right));
-  z-index: 1000;
+  z-index: var(--mint-z-tray);
   display: flex;
   width: min(360px, calc(100vw - 2rem));
   max-height: 75vh;
@@ -281,5 +281,5 @@
 
 /* The tray's confirm dialog sits above the tray and its scrim (BaseModal drops class fallthrough). */
 .mint-modal:has(.mint-jobs-tray__confirm) {
-  z-index: 1001;
+  z-index: calc(var(--mint-z-tray) + 1);
 }

package/src/styles/components/modal.css

@@ -11,7 +11,7 @@
 .mint-modal {
   position: fixed;
   inset: 0;
-  z-index: 50;
+  z-index: var(--mint-z-modal);
   display: flex;
   padding: 1rem;
 }

package/src/styles/components/onboarding.css

@@ -94,7 +94,7 @@ html.dark {
 
 .mint-onboarding-help__panel {
   position: fixed;
-  z-index: 1000;
+  z-index: var(--mint-z-tray);
   width: 18rem;
   padding: 0 0 4px;
   overflow: hidden;
@@ -229,7 +229,7 @@ html.dark {
 .mint-onboarding {
   position: fixed;
   inset: 0;
-  z-index: 1100;
+  z-index: var(--mint-z-tour);
   pointer-events: none;
 }
 

package/src/styles/components/searchable-select.css

@@ -30,14 +30,10 @@
 .mint-searchable-select__value { flex: 1; min-width: 0; overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
 .mint-searchable-select__value--placeholder { color: var(--text-muted); }
 
-/* Surface = .mint-popover (2d); this alias keeps only placement. */
+/* Surface = .mint-popover (2d). useFloatingPanel sets the fixed position and width. */
 .mint-searchable-select__panel {
-  position: absolute;
-  top: calc(100% + 0.25rem);
-  right: 0;
-  left: 0;
-  z-index: 30;
-  max-height: min(38rem, 80vh);
+  z-index: var(--mint-z-popover);
+  max-height: min(38rem, 80vh, var(--mint-floating-available-height, 100vh));
   overflow: hidden;
 }
 

package/src/styles/components/time-picker.css

@@ -124,13 +124,10 @@
   height: 0.875rem;
 }
 
-/* Dropdown — placement only; the look is .mint-popover. Spans the field width. */
+/* Dropdown — the look is .mint-popover; useFloatingPanel sets the fixed position and the field width. */
 .mint-time-picker__dropdown {
-  position: absolute;
-  z-index: 50;
-  margin-top: 0.25rem;
-  width: 100%;
-  min-width: 100%;
+  z-index: var(--mint-z-popover);
+  max-height: var(--mint-floating-available-height, none);
   overflow: hidden;
 }
 

package/src/styles/components/toast.css

@@ -5,7 +5,7 @@
   /* AppTopBar publishes its bottom edge + 1rem so toasts clear its controls. */
   top: var(--mint-toast-offset-top, 1rem);
   right: 1rem;
-  z-index: 9999;
+  z-index: var(--mint-z-toast);
   display: flex;
   flex-direction: column;
   gap: 0.5rem;

package/src/styles/components/tooltip.css

@@ -5,8 +5,8 @@
 }
 
 .mint-tooltip__content {
-  position: absolute;
-  z-index: 9999;
+  position: fixed;
+  z-index: var(--mint-z-toast);
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;

package/src/styles/components/unit-input.css

@@ -140,7 +140,7 @@ button.mint-unit-input__unit:focus-visible {
 
 .mint-unit-input__menu {
   position: fixed;
-  z-index: 1000;
+  z-index: var(--mint-z-popover);
   width: 148px;
 }
 

package/src/styles/components/well-edit-popup.css

@@ -5,12 +5,12 @@
 .mint-well-edit-popup__backdrop {
   position: fixed;
   inset: 0;
-  z-index: 40;
+  z-index: calc(var(--mint-z-popover) - 1);
 }
 
 .mint-well-edit-popup {
   position: fixed;
-  z-index: 50;
+  z-index: var(--mint-z-popover);
   width: 300px;
   padding: 0;
   overflow: hidden;

package/src/styles/variables.css

@@ -192,6 +192,12 @@
   --mint-border-focus: var(--color-primary);
   /* Colour-only transitions; no lift, bounce or glow. */
   --mint-transition: 120ms ease;
+  /* Stacking layers: modal < jobs tray < onboarding tour < floating panels < tooltips and toasts. */
+  --mint-z-modal: 50;
+  --mint-z-tray: 1000;
+  --mint-z-tour: 1100;
+  --mint-z-popover: 1200;
+  --mint-z-toast: 9999;
 }
 
 /* ==========================================================================