@raystack/apsara 0.11.2 → 0.11.4

package/dist/index.cjs

@@ -11243,6 +11243,59 @@ const $cc7e05a45900e73f$var$SelectPopperPosition = /*#__PURE__*/ React.forwardRe
 /* -------------------------------------------------------------------------------------------------
  * SelectViewport
  * -----------------------------------------------------------------------------------------------*/ const [$cc7e05a45900e73f$var$SelectViewportProvider, $cc7e05a45900e73f$var$useSelectViewportContext] = $cc7e05a45900e73f$var$createSelectContext($cc7e05a45900e73f$var$CONTENT_NAME, {});
+const $cc7e05a45900e73f$var$VIEWPORT_NAME = 'SelectViewport';
+const $cc7e05a45900e73f$export$9ed6e7b40248d36d = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
+    const { __scopeSelect: __scopeSelect , ...viewportProps } = props;
+    const contentContext = $cc7e05a45900e73f$var$useSelectContentContext($cc7e05a45900e73f$var$VIEWPORT_NAME, __scopeSelect);
+    const viewportContext = $cc7e05a45900e73f$var$useSelectViewportContext($cc7e05a45900e73f$var$VIEWPORT_NAME, __scopeSelect);
+    const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05$1(forwardedRef, contentContext.onViewportChange);
+    const prevScrollTopRef = React.useRef(0);
+    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("style", {
+        dangerouslySetInnerHTML: {
+            __html: `[data-radix-select-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-select-viewport]::-webkit-scrollbar{display:none}`
+        }
+    }), /*#__PURE__*/ React.createElement($cc7e05a45900e73f$var$Collection.Slot, {
+        scope: __scopeSelect
+    }, /*#__PURE__*/ React.createElement($8927f6f2acc4f386$export$250ffa63cdc0d034$1.div, _extends({
+        "data-radix-select-viewport": "",
+        role: "presentation"
+    }, viewportProps, {
+        ref: composedRefs,
+        style: {
+            // we use position: 'relative' here on the `viewport` so that when we call
+            // `selectedItem.offsetTop` in calculations, the offset is relative to the viewport
+            // (independent of the scrollUpButton).
+            position: 'relative',
+            flex: 1,
+            overflow: 'auto',
+            ...viewportProps.style
+        },
+        onScroll: $e42e1063c40fb3ef$export$b9ecd428b558ff10$1(viewportProps.onScroll, (event)=>{
+            const viewport = event.currentTarget;
+            const { contentWrapper: contentWrapper , shouldExpandOnScrollRef: shouldExpandOnScrollRef  } = viewportContext;
+            if (shouldExpandOnScrollRef !== null && shouldExpandOnScrollRef !== void 0 && shouldExpandOnScrollRef.current && contentWrapper) {
+                const scrolledBy = Math.abs(prevScrollTopRef.current - viewport.scrollTop);
+                if (scrolledBy > 0) {
+                    const availableHeight = window.innerHeight - $cc7e05a45900e73f$var$CONTENT_MARGIN * 2;
+                    const cssMinHeight = parseFloat(contentWrapper.style.minHeight);
+                    const cssHeight = parseFloat(contentWrapper.style.height);
+                    const prevHeight = Math.max(cssMinHeight, cssHeight);
+                    if (prevHeight < availableHeight) {
+                        const nextHeight = prevHeight + scrolledBy;
+                        const clampedNextHeight = Math.min(availableHeight, nextHeight);
+                        const heightDiff = nextHeight - clampedNextHeight;
+                        contentWrapper.style.height = clampedNextHeight + 'px';
+                        if (contentWrapper.style.bottom === '0px') {
+                            viewport.scrollTop = heightDiff > 0 ? heightDiff : 0; // ensure the content stays pinned to the bottom
+                            contentWrapper.style.justifyContent = 'flex-end';
+                        }
+                    }
+                }
+            }
+            prevScrollTopRef.current = viewport.scrollTop;
+        })
+    }))));
+});
 /* -------------------------------------------------------------------------------------------------
  * SelectGroup
  * -----------------------------------------------------------------------------------------------*/ const $cc7e05a45900e73f$var$GROUP_NAME = 'SelectGroup';
@@ -11408,6 +11461,91 @@ const $cc7e05a45900e73f$export$6b9198de19accfe6 = /*#__PURE__*/ React.forwardRef
         ref: forwardedRef
     })) : null;
 });
+/* -------------------------------------------------------------------------------------------------
+ * SelectScrollDownButton
+ * -----------------------------------------------------------------------------------------------*/ const $cc7e05a45900e73f$var$SCROLL_DOWN_BUTTON_NAME = 'SelectScrollDownButton';
+const $cc7e05a45900e73f$export$ff951e476c12189 = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
+    const contentContext = $cc7e05a45900e73f$var$useSelectContentContext($cc7e05a45900e73f$var$SCROLL_DOWN_BUTTON_NAME, props.__scopeSelect);
+    const viewportContext = $cc7e05a45900e73f$var$useSelectViewportContext($cc7e05a45900e73f$var$SCROLL_DOWN_BUTTON_NAME, props.__scopeSelect);
+    const [canScrollDown1, setCanScrollDown] = React.useState(false);
+    const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05$1(forwardedRef, viewportContext.onScrollButtonChange);
+    $9f79659886946c16$export$e5c5a5f917a5871c$1(()=>{
+        if (contentContext.viewport && contentContext.isPositioned) {
+            const viewport = contentContext.viewport;
+            function handleScroll() {
+                const maxScroll = viewport.scrollHeight - viewport.clientHeight; // we use Math.ceil here because if the UI is zoomed-in
+                // `scrollTop` is not always reported as an integer
+                const canScrollDown = Math.ceil(viewport.scrollTop) < maxScroll;
+                setCanScrollDown(canScrollDown);
+            }
+            handleScroll();
+            viewport.addEventListener('scroll', handleScroll);
+            return ()=>viewport.removeEventListener('scroll', handleScroll)
+            ;
+        }
+    }, [
+        contentContext.viewport,
+        contentContext.isPositioned
+    ]);
+    return canScrollDown1 ? /*#__PURE__*/ React.createElement($cc7e05a45900e73f$var$SelectScrollButtonImpl, _extends({}, props, {
+        ref: composedRefs,
+        onAutoScroll: ()=>{
+            const { viewport: viewport , selectedItem: selectedItem  } = contentContext;
+            if (viewport && selectedItem) viewport.scrollTop = viewport.scrollTop + selectedItem.offsetHeight;
+        }
+    })) : null;
+});
+const $cc7e05a45900e73f$var$SelectScrollButtonImpl = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
+    const { __scopeSelect: __scopeSelect , onAutoScroll: onAutoScroll , ...scrollIndicatorProps } = props;
+    const contentContext = $cc7e05a45900e73f$var$useSelectContentContext('SelectScrollButton', __scopeSelect);
+    const autoScrollTimerRef = React.useRef(null);
+    const getItems = $cc7e05a45900e73f$var$useCollection(__scopeSelect);
+    const clearAutoScrollTimer = React.useCallback(()=>{
+        if (autoScrollTimerRef.current !== null) {
+            window.clearInterval(autoScrollTimerRef.current);
+            autoScrollTimerRef.current = null;
+        }
+    }, []);
+    React.useEffect(()=>{
+        return ()=>clearAutoScrollTimer()
+        ;
+    }, [
+        clearAutoScrollTimer
+    ]); // When the viewport becomes scrollable on either side, the relevant scroll button will mount.
+    // Because it is part of the normal flow, it will push down (top button) or shrink (bottom button)
+    // the viewport, potentially causing the active item to now be partially out of view.
+    // We re-run the `scrollIntoView` logic to make sure it stays within the viewport.
+    $9f79659886946c16$export$e5c5a5f917a5871c$1(()=>{
+        var _activeItem$ref$curre;
+        const activeItem = getItems().find((item)=>item.ref.current === document.activeElement
+        );
+        activeItem === null || activeItem === void 0 || (_activeItem$ref$curre = activeItem.ref.current) === null || _activeItem$ref$curre === void 0 || _activeItem$ref$curre.scrollIntoView({
+            block: 'nearest'
+        });
+    }, [
+        getItems
+    ]);
+    return /*#__PURE__*/ React.createElement($8927f6f2acc4f386$export$250ffa63cdc0d034$1.div, _extends({
+        "aria-hidden": true
+    }, scrollIndicatorProps, {
+        ref: forwardedRef,
+        style: {
+            flexShrink: 0,
+            ...scrollIndicatorProps.style
+        },
+        onPointerDown: $e42e1063c40fb3ef$export$b9ecd428b558ff10$1(scrollIndicatorProps.onPointerDown, ()=>{
+            if (autoScrollTimerRef.current === null) autoScrollTimerRef.current = window.setInterval(onAutoScroll, 50);
+        }),
+        onPointerMove: $e42e1063c40fb3ef$export$b9ecd428b558ff10$1(scrollIndicatorProps.onPointerMove, ()=>{
+            var _contentContext$onIte3;
+            (_contentContext$onIte3 = contentContext.onItemLeave) === null || _contentContext$onIte3 === void 0 || _contentContext$onIte3.call(contentContext);
+            if (autoScrollTimerRef.current === null) autoScrollTimerRef.current = window.setInterval(onAutoScroll, 50);
+        }),
+        onPointerLeave: $e42e1063c40fb3ef$export$b9ecd428b558ff10$1(scrollIndicatorProps.onPointerLeave, ()=>{
+            clearAutoScrollTimer();
+        })
+    }));
+});
 const $cc7e05a45900e73f$export$eba4b1df07cb1d3 = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
     const { __scopeSelect: __scopeSelect , ...separatorProps } = props;
     return /*#__PURE__*/ React.createElement($8927f6f2acc4f386$export$250ffa63cdc0d034$1.div, _extends({
@@ -11528,11 +11666,13 @@ const $cc7e05a45900e73f$export$4c8d1a57a761ef94 = $cc7e05a45900e73f$export$e2887
 const $cc7e05a45900e73f$export$f04a61298a47a40f = $cc7e05a45900e73f$export$99b400cabb58c515;
 const $cc7e05a45900e73f$export$602eac185826482c = $cc7e05a45900e73f$export$b2af6c9944296213;
 const $cc7e05a45900e73f$export$7c6e2c02157bb7d2 = $cc7e05a45900e73f$export$c973a4b3cb86a03d;
+const $cc7e05a45900e73f$export$d5c6c08dc2d3ca7 = $cc7e05a45900e73f$export$9ed6e7b40248d36d;
 const $cc7e05a45900e73f$export$eb2fcfdbd7ba97d4 = $cc7e05a45900e73f$export$ee25a334c55de1f4;
 const $cc7e05a45900e73f$export$b04be29aa201d4f5 = $cc7e05a45900e73f$export$f67338d29bd972f8;
 const $cc7e05a45900e73f$export$6d08773d2e66f8f2 = $cc7e05a45900e73f$export$13ef48a934230896;
 const $cc7e05a45900e73f$export$d6e5bf9c43ea9319 = $cc7e05a45900e73f$export$3572fb0fb821ff49;
 const $cc7e05a45900e73f$export$c3468e2714d175fa = $cc7e05a45900e73f$export$6b9198de19accfe6;
+const $cc7e05a45900e73f$export$bf1aedc3039c8d63 = $cc7e05a45900e73f$export$ff951e476c12189;
 const $cc7e05a45900e73f$export$1ff3c3f08ae963c0 = $cc7e05a45900e73f$export$eba4b1df07cb1d3;
 
 var styles$a = {"content":"select-module_content__X0QJ-","menuitem":"select-module_menuitem__DfVEU","menuitemIndicatorWapper":"select-module_menuitemIndicatorWapper__TZDvz","label":"select-module_label__4I1Se","separator":"select-module_separator__2UBNd","menugroup":"select-module_menugroup__zJbzr","trigger":"select-module_trigger__1tSaG","triggerIcon":"select-module_triggerIcon__iaoZ3"};
@@ -11555,6 +11695,9 @@ SelectSeparator.displayName = $cc7e05a45900e73f$export$1ff3c3f08ae963c0.displayN
 const Select = Object.assign($cc7e05a45900e73f$export$be92b6f5f03c0fe9, {
     Group: $cc7e05a45900e73f$export$eb2fcfdbd7ba97d4,
     Value: $cc7e05a45900e73f$export$4c8d1a57a761ef94,
+    ScrollUpButton: $cc7e05a45900e73f$export$bf1aedc3039c8d63,
+    ScrollDownButton: $cc7e05a45900e73f$export$bf1aedc3039c8d63,
+    Viewport: $cc7e05a45900e73f$export$d5c6c08dc2d3ca7,
     Trigger: SelectTrigger,
     Content: SelectContent,
     Label: SelectLabel,
@@ -15341,9 +15484,9 @@ const textfield = cva(styles$4.textfield, {
         size: "small",
     },
 });
-const TextField = ({ leading, className, src, size, state, style, ...props }) => {
-    return (jsxRuntimeExports.jsxs(Flex, { align: "center", style: { position: "relative", width: "100%" }, children: [leading ? (jsxRuntimeExports.jsx(Flex, { style: { position: "absolute", left: "8px" }, children: leading })) : null, jsxRuntimeExports.jsx("input", { className: cx(textfield({ size, state, className, leading })), style: leading ? { paddingLeft: "32px" } : {}, ...props })] }));
-};
+const TextField = React.forwardRef(({ leading, className, src, size, state, style, ...props }, ref) => {
+    return (jsxRuntimeExports.jsxs(Flex, { align: "center", style: { position: "relative", width: "100%" }, children: [leading ? (jsxRuntimeExports.jsx(Flex, { style: { position: "absolute", left: "8px" }, children: leading })) : null, jsxRuntimeExports.jsx("input", { className: cx(textfield({ size, state, className, leading })), style: leading ? { paddingLeft: "32px" } : {}, ...props, ref: ref })] }));
+});
 TextField.displayName = "TextField";
 
 var styles$3 = {"wrapper":"datatable-module_wrapper__Sxg2d","datatable":"datatable-module_datatable__z-Th2","table":"datatable-module_table__x2IkY","head":"datatable-module_head__zCfCW","toolbar":"datatable-module_toolbar__lO-aI","chip":"datatable-module_chip__IiwTD"};