@karmo-co/drift-kit-public 24.0.0 → 24.1.0

package/components.js

@@ -4969,16 +4969,87 @@
                 return 200;
             return /ms\s*$/.test(raw) ? n : n * 1000;
         }
+        function settleMs(overlay) {
+            var raw = '';
+            try {
+                raw = getComputedStyle(overlay).getPropertyValue('--dk-component-modal-settle-duration').trim();
+            }
+            catch (e) { }
+            var n = parseFloat(raw);
+            if (isNaN(n))
+                return 200;
+            return /ms\s*$/.test(raw) ? n : n * 1000;
+        }
         function wantsSheet(overlay) {
             return dk.sheet.wants(overlay, '--dk-component-modal-sheet', overlay.getAttribute('data-sheet') || 'auto');
         }
         function stampSheet(overlay) {
             if (overlay.hasAttribute('data-closing'))
                 return;
+            var want = wantsSheet(overlay);
+            if (want === overlay.hasAttribute('data-sheet-open'))
+                return;
+            var box = !overlay.hidden && overlay.querySelector('.dk-component-modal__box');
+            var before = box && box.animate ? box.getBoundingClientRect() : null;
+            var radius = before ? getComputedStyle(box).borderRadius : '';
             if (wantsSheet(overlay))
                 overlay.setAttribute('data-sheet-open', '');
             else
                 overlay.removeAttribute('data-sheet-open');
+            if (before)
+                morph(overlay, box, before, radius, want);
+        }
+        function releaseHeld(box) {
+            if (!box || !box.__dcHeld)
+                return;
+            box.__dcHeld = false;
+            box.style.animation = '';
+        }
+        function morph(overlay, box, before, radius, toSheet) {
+            var ms = settleMs(overlay);
+            if (!ms)
+                return;
+            if (box.__dcMorph) {
+                try {
+                    box.__dcMorph.cancel();
+                }
+                catch (e) { }
+            }
+            box.style.animation = 'none';
+            box.__dcHeld = true;
+            var after = box.getBoundingClientRect();
+            var dx = (before.left + before.width / 2) - (after.left + after.width / 2);
+            var dy = toSheet ? before.bottom - after.bottom
+                : (before.top + before.height / 2) - (after.top + after.height / 2);
+            var cs = getComputedStyle(box);
+            var easing = '';
+            try {
+                easing = getComputedStyle(overlay).getPropertyValue('--dk-component-modal-settle-easing').trim();
+            }
+            catch (e) { }
+            try {
+                box.__dcMorph = box.animate([
+                    { width: before.width + 'px', height: before.height + 'px', maxWidth: 'none', maxHeight: 'none',
+                        transform: 'translate(' + dx + 'px, ' + dy + 'px)', borderRadius: radius },
+                    { width: after.width + 'px', height: after.height + 'px', maxWidth: 'none', maxHeight: 'none',
+                        transform: 'translate(0px, 0px)', borderRadius: cs.borderRadius },
+                ], { duration: ms, easing: easing || 'ease' });
+            }
+            catch (e) {
+                return;
+            }
+            var m = box.__dcMorph;
+            if (m && m.finished && m.finished.then)
+                m.finished.then(function () { if (box.__dcMorph === m)
+                    box.__dcMorph = null; }, function () { });
+        }
+        function dragOff(overlay) {
+            try {
+                return getComputedStyle(overlay).getPropertyValue('--dk-component-modal-drag').trim() === '0';
+            }
+            catch (e) {
+                return false;
+            }
         }
         function focusables(box) {
             return Array.prototype.filter.call(box.querySelectorAll(FOCUSABLE), visible);
@@ -5054,6 +5125,11 @@
                 };
             }
             var locks = opts.scrollLock !== false;
+            var dragOn = opts.dismissible !== false && opts.dragDismiss !== false && !dragOff(overlay);
+            if (dragOn)
+                overlay.setAttribute('data-sheet-drag', '');
+            else
+                overlay.removeAttribute('data-sheet-drag');
             stampSheet(overlay);
             overlay.hidden = false;
             var inerted = markInert(overlay, container);
@@ -5138,7 +5214,118 @@
                 if (onBackdrop && opts.backdropDismiss !== false)
                     dismiss('backdrop');
             }
+            var DRAG_DISTANCE = 0.3, DRAG_FLICK = 0.5, DRAG_RESIST = 5, DRAG_WINDOW = 100, DRAG_MIN = 8;
+            var dragging = null, settleTimer = null;
+            function now() { return (window.performance && performance.now) ? performance.now() : Date.now(); }
+            function handle(t) {
+                if (!dragOn || closed || !overlay.hasAttribute('data-sheet-open'))
+                    return false;
+                if (t === box)
+                    return true;
+                var head = t && t.closest && t.closest('.dk-component-modal__header');
+                if (!head || !box.contains(head))
+                    return false;
+                var control = t.closest('a, button, input, select, textarea, label, summary, [role="button"], [data-interactive], [contenteditable]');
+                return !(control && head.contains(control));
+            }
+            function clearDrag() {
+                if (settleTimer) {
+                    clearTimeout(settleTimer);
+                    settleTimer = null;
+                }
+                box.style.transform = '';
+                box.style.paddingBottom = '';
+                box.style.transition = '';
+                if (bd) {
+                    bd.style.opacity = '';
+                    bd.style.transition = '';
+                }
+            }
+            function settle() {
+                var ms = settleMs(overlay);
+                var how = ' var(--dk-component-modal-settle-duration) var(--dk-component-modal-settle-easing)';
+                box.style.transition = 'transform' + how + ', padding-bottom' + how;
+                if (bd)
+                    bd.style.transition = 'opacity' + how;
+                box.style.transform = '';
+                box.style.paddingBottom = '';
+                if (bd)
+                    bd.style.opacity = '';
+                settleTimer = setTimeout(function () { settleTimer = null; if (!closed)
+                    clearDrag(); }, ms);
+            }
+            function onDragMove(e) {
+                if (!dragging)
+                    return;
+                var raw = e.clientY - dragging.y0;
+                var dy = raw >= 0 ? raw : raw / DRAG_RESIST;
+                dragging.dy = dy;
+                var t = now();
+                dragging.samples.push([t, e.clientY]);
+                while (dragging.samples.length > 2 && t - dragging.samples[0][0] > DRAG_WINDOW)
+                    dragging.samples.shift();
+                box.style.transform = dy > 0 ? 'translateY(' + dy + 'px)' : '';
+                box.style.paddingBottom = dy < 0 ? (-dy) + 'px' : '';
+                if (bd)
+                    bd.style.opacity = String(Math.max(0, 1 - Math.max(0, dy) / dragging.h));
+                if (e.cancelable)
+                    e.preventDefault();
+            }
+            function onDragEnd(e) {
+                if (!dragging)
+                    return;
+                document.removeEventListener('pointermove', onDragMove, true);
+                document.removeEventListener('pointerup', onDragEnd, true);
+                document.removeEventListener('pointercancel', onDragEnd, true);
+                overlay.removeAttribute('data-dragging');
+                var up = e && e.type === 'pointerup';
+                if (up && typeof e.clientY === 'number')
+                    onDragMove(e);
+                var g = dragging;
+                dragging = null;
+                var first = g.samples[0], last = g.samples[g.samples.length - 1];
+                var speed = last[0] > first[0] ? (last[1] - first[1]) / (last[0] - first[0]) : 0;
+                var go = up && g.dy > DRAG_MIN && (g.dy > g.h * DRAG_DISTANCE || speed > DRAG_FLICK);
+                if (!go) {
+                    if (e)
+                        settle();
+                    return;
+                }
+                box.style.transition = '';
+                if (bd)
+                    bd.style.transition = '';
+                dismiss('drag');
+                if (!closed)
+                    setTimeout(function () { if (!closed)
+                        settle(); }, DRAG_WINDOW);
+            }
+            function onDragStart(e) {
+                if (dragging || (e.button && e.button !== 0) || !handle(e.target))
+                    return;
+                if (settleTimer) {
+                    clearTimeout(settleTimer);
+                    settleTimer = null;
+                }
+                dragging = { y0: e.clientY, dy: 0, h: box.offsetHeight || 1, samples: [[now(), e.clientY]] };
+                box.style.transition = 'none';
+                if (bd)
+                    bd.style.transition = 'none';
+                overlay.setAttribute('data-dragging', '');
+                try {
+                    if (e.pointerId != null && box.setPointerCapture)
+                        box.setPointerCapture(e.pointerId);
+                }
+                catch (err) { }
+                document.addEventListener('pointermove', onDragMove, true);
+                document.addEventListener('pointerup', onDragEnd, true);
+                document.addEventListener('pointercancel', onDragEnd, true);
+            }
             function teardown() {
+                if (dragging)
+                    onDragEnd(null);
+                overlay.removeEventListener('pointerdown', onDragStart);
+                clearDrag();
+                overlay.removeAttribute('data-sheet-drag');
                 if (orphanWatch) {
                     orphanWatch.disconnect();
                     orphanWatch = null;
@@ -5182,6 +5369,7 @@
                 swapApply = apply;
                 if (swapTimer)
                     return;
+                releaseHeld(box);
                 overlay.setAttribute('data-swapping', '');
                 function done() {
                     swapTimer = null;
@@ -5205,6 +5393,8 @@
             }
             function closeIt(how) {
                 endSwap();
+                if (!closed)
+                    releaseHeld(box);
                 if (closed) {
                     if (how && how.immediate && exitTimer) {
                         clearTimeout(exitTimer);
@@ -5242,6 +5432,7 @@
             document.addEventListener('keydown', onKey, true);
             document.addEventListener('focusin', onFocusIn, true);
             overlay.addEventListener('click', onClick);
+            overlay.addEventListener('pointerdown', onDragStart);
             var orphanWatch = null;
             if (window.MutationObserver) {
                 orphanWatch = new MutationObserver(function () {
@@ -5258,6 +5449,7 @@
             if (!overlay || overlay.__dcClosing || !overlay.isConnected)
                 return;
             overlay.__dcClosing = true;
+            releaseHeld(overlay.querySelector('.dk-component-modal__box'));
             var wait = exitMs(overlay);
             overlay.setAttribute('data-closing', '');
             setTimeout(function () { overlay.remove(); if (onDone)