@raystack/apsara 0.20.4 → 0.21.1

package/dist/index.css

@@ -742,6 +742,10 @@ html[data-theme="dark"] {
   border: 1px solid var(--border-subtle);
 }
 
+.dialog-module_overlayBlur__-RCHk {
+  backdrop-filter: blur(2px);
+}
+
 .dialog-module_dialogContent__bljTL:focus {
   outline: none;
 }

package/dist/index.js

@@ -6656,14 +6656,20 @@ const $5d3850c4d0b4e6c7$export$f99233281efd08a0 = $5d3850c4d0b4e6c7$export$16f76
 const $5d3850c4d0b4e6c7$export$393edc798c47379d = $5d3850c4d0b4e6c7$export$94e94c2ec2c954d5;
 const $5d3850c4d0b4e6c7$export$f39c2d165cd861fe = $5d3850c4d0b4e6c7$export$fba2fb7cd781b7ac;
 
-var styles$t = {"dialogContent":"dialog-module_dialogContent__bljTL","overlay":"dialog-module_overlay__t-jUE","close":"dialog-module_close__n9JNt"};
+var styles$t = {"dialogContent":"dialog-module_dialogContent__bljTL","overlayBlur":"dialog-module_overlayBlur__-RCHk","overlay":"dialog-module_overlay__t-jUE","close":"dialog-module_close__n9JNt"};
 
 const dialogContent = cva(styles$t.dialogContent);
-const DialogContent = forwardRef(({ className, children, close, overlayStyle, overlayClassname, ...props }, forwardedRef) => {
-    return (jsxRuntimeExports.jsx($5d3850c4d0b4e6c7$export$602eac185826482c, { children: jsxRuntimeExports.jsx(Overlay$1, { className: overlayClassname, style: overlayStyle, children: jsxRuntimeExports.jsxs($5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2, { ...props, ref: forwardedRef, className: dialogContent({ className }), children: [children, close && (jsxRuntimeExports.jsx(CloseButton$1, { children: jsxRuntimeExports.jsx(Cross1Icon, {}) }))] }) }) }));
+const DialogContent = forwardRef(({ className, children, close, overlayStyle, overlayClassname, overlayBlur, ...props }, forwardedRef) => {
+    return (jsxRuntimeExports.jsx($5d3850c4d0b4e6c7$export$602eac185826482c, { children: jsxRuntimeExports.jsx(Overlay$1, { className: overlayClassname, style: overlayStyle, blur: overlayBlur, children: jsxRuntimeExports.jsxs($5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2, { ...props, ref: forwardedRef, className: dialogContent({ className }), children: [children, close && (jsxRuntimeExports.jsx(CloseButton$1, { children: jsxRuntimeExports.jsx(Cross1Icon, {}) }))] }) }) }));
 });
-const overlay$1 = cva(styles$t.overlay);
-const Overlay$1 = forwardRef(({ className, ...props }, ref) => (jsxRuntimeExports.jsx($5d3850c4d0b4e6c7$export$c6fdb837b070b4ff, { ref: ref, className: overlay$1({ className }), ...props })));
+const overlay$1 = cva(styles$t.overlay, {
+    variants: {
+        blur: {
+            true: styles$t.overlayBlur,
+        },
+    },
+});
+const Overlay$1 = forwardRef(({ className, blur, ...props }, ref) => (jsxRuntimeExports.jsx($5d3850c4d0b4e6c7$export$c6fdb837b070b4ff, { ref: ref, className: overlay$1({ className, blur }), ...props })));
 Overlay$1.displayName = $5d3850c4d0b4e6c7$export$c6fdb837b070b4ff.displayName;
 const close$1 = cva(styles$t.close);
 function CloseButton$1({ children, className, ...props }) {
@@ -10402,6 +10408,20 @@ const $cb5cc270b50c6fcd$var$PopoverContentNonModal = /*#__PURE__*/ forwardRef((p
         }
     }))));
 });
+/* -------------------------------------------------------------------------------------------------
+ * PopoverClose
+ * -----------------------------------------------------------------------------------------------*/ const $cb5cc270b50c6fcd$var$CLOSE_NAME = 'PopoverClose';
+const $cb5cc270b50c6fcd$export$d6ac43ebaa40d53e = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+    const { __scopePopover: __scopePopover , ...closeProps } = props;
+    const context = $cb5cc270b50c6fcd$var$usePopoverContext($cb5cc270b50c6fcd$var$CLOSE_NAME, __scopePopover);
+    return /*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034$1.button, _extends({
+        type: "button"
+    }, closeProps, {
+        ref: forwardedRef,
+        onClick: $e42e1063c40fb3ef$export$b9ecd428b558ff10$1(props.onClick, ()=>context.onOpenChange(false)
+        )
+    }));
+});
 /* -----------------------------------------------------------------------------------------------*/ function $cb5cc270b50c6fcd$var$getState(open) {
     return open ? 'open' : 'closed';
 }
@@ -10409,6 +10429,7 @@ const $cb5cc270b50c6fcd$export$be92b6f5f03c0fe9 = $cb5cc270b50c6fcd$export$5b6b1
 const $cb5cc270b50c6fcd$export$41fb9f06171c75f4 = $cb5cc270b50c6fcd$export$7dacb05d26466c3;
 const $cb5cc270b50c6fcd$export$602eac185826482c = $cb5cc270b50c6fcd$export$dd679ffb4362d2d4;
 const $cb5cc270b50c6fcd$export$7c6e2c02157bb7d2 = $cb5cc270b50c6fcd$export$d7e1f420b25549ff;
+const $cb5cc270b50c6fcd$export$f39c2d165cd861fe = $cb5cc270b50c6fcd$export$d6ac43ebaa40d53e;
 
 var styles$i = {"popover":"popover-module_popover__Jh8Hg"};
 
@@ -10417,6 +10438,7 @@ const PopoverContent = React__default.forwardRef(({ className, align = "center",
 PopoverContent.displayName = $cb5cc270b50c6fcd$export$7c6e2c02157bb7d2.displayName;
 const Popover = Object.assign($cb5cc270b50c6fcd$export$be92b6f5f03c0fe9, {
     Trigger: $cb5cc270b50c6fcd$export$41fb9f06171c75f4,
+    Close: $cb5cc270b50c6fcd$export$f39c2d165cd861fe,
     Content: PopoverContent,
 });
 
@@ -28034,6 +28056,97 @@ function DayPicker(props) {
 
 var styles$6 = {"calendarRoot":"calendar-module_calendarRoot__KnBz-","caption_label":"calendar-module_caption_label__C5Ys7","dropdowns":"calendar-module_dropdowns__Wn53e","dropdown_trigger":"calendar-module_dropdown_trigger__dsyaq","dropdown_item_text":"calendar-module_dropdown_item_text__Tudqv","nav_button":"calendar-module_nav_button__8W5py","nav_button_previous":"calendar-module_nav_button_previous__lWJYm","nav_button_next":"calendar-module_nav_button_next__1MzRT","months":"calendar-module_months__IN75k","nav":"calendar-module_nav__aGeze","month_caption":"calendar-module_month_caption__Ws6Hx","day":"calendar-module_day__rQFGK","disabled":"calendar-module_disabled__jqgRB","outside":"calendar-module_outside__nq5XC","selected":"calendar-module_selected__kiiAZ","range_middle":"calendar-module_range_middle__PmzFi","range_start":"calendar-module_range_start__ZUooG","range_end":"calendar-module_range_end__PKrm7","week":"calendar-module_week__kCvKJ","day_button":"calendar-module_day_button__vCKP1","today":"calendar-module_today__iXQIQ","weekday":"calendar-module_weekday__xzf6F","hidden":"calendar-module_hidden__wqJVo","calendarPopover":"calendar-module_calendarPopover__PY4sa","dropdown_icon":"calendar-module_dropdown_icon__rDTbz","dropdown_content":"calendar-module_dropdown_content__ajJ5V"};
 
+/**
+ * @internal
+ */
+const SkeletonThemeContext = React__default.createContext({});
+
+/* eslint-disable react/no-array-index-key */
+const defaultEnableAnimation = true;
+// For performance & cleanliness, don't add any inline styles unless we have to
+function styleOptionsToCssProperties({ baseColor, highlightColor, width, height, borderRadius, circle, direction, duration, enableAnimation = defaultEnableAnimation, }) {
+    const style = {};
+    if (direction === 'rtl')
+        style['--animation-direction'] = 'reverse';
+    if (typeof duration === 'number')
+        style['--animation-duration'] = `${duration}s`;
+    if (!enableAnimation)
+        style['--pseudo-element-display'] = 'none';
+    if (typeof width === 'string' || typeof width === 'number')
+        style.width = width;
+    if (typeof height === 'string' || typeof height === 'number')
+        style.height = height;
+    if (typeof borderRadius === 'string' || typeof borderRadius === 'number')
+        style.borderRadius = borderRadius;
+    if (circle)
+        style.borderRadius = '50%';
+    if (typeof baseColor !== 'undefined')
+        style['--base-color'] = baseColor;
+    if (typeof highlightColor !== 'undefined')
+        style['--highlight-color'] = highlightColor;
+    return style;
+}
+function Skeleton({ count = 1, wrapper: Wrapper, className: customClassName, containerClassName, containerTestId, circle = false, style: styleProp, ...originalPropsStyleOptions }) {
+    var _a, _b, _c;
+    const contextStyleOptions = React__default.useContext(SkeletonThemeContext);
+    const propsStyleOptions = { ...originalPropsStyleOptions };
+    // DO NOT overwrite style options from the context if `propsStyleOptions`
+    // has properties explicity set to undefined
+    for (const [key, value] of Object.entries(originalPropsStyleOptions)) {
+        if (typeof value === 'undefined') {
+            delete propsStyleOptions[key];
+        }
+    }
+    // Props take priority over context
+    const styleOptions = {
+        ...contextStyleOptions,
+        ...propsStyleOptions,
+        circle,
+    };
+    // `styleProp` has the least priority out of everything
+    const style = {
+        ...styleProp,
+        ...styleOptionsToCssProperties(styleOptions),
+    };
+    let className = 'react-loading-skeleton';
+    if (customClassName)
+        className += ` ${customClassName}`;
+    const inline = (_a = styleOptions.inline) !== null && _a !== void 0 ? _a : false;
+    const elements = [];
+    const countCeil = Math.ceil(count);
+    for (let i = 0; i < countCeil; i++) {
+        let thisStyle = style;
+        if (countCeil > count && i === countCeil - 1) {
+            // count is not an integer and we've reached the last iteration of
+            // the loop, so add a "fractional" skeleton.
+            //
+            // For example, if count is 3.5, we've already added 3 full
+            // skeletons, so now we add one more skeleton that is 0.5 times the
+            // original width.
+            const width = (_b = thisStyle.width) !== null && _b !== void 0 ? _b : '100%'; // 100% is the default since that's what's in the CSS
+            const fractionalPart = count % 1;
+            const fractionalWidth = typeof width === 'number'
+                ? width * fractionalPart
+                : `calc(${width} * ${fractionalPart})`;
+            thisStyle = { ...thisStyle, width: fractionalWidth };
+        }
+        const skeletonSpan = (React__default.createElement("span", { className: className, style: thisStyle, key: i }, "\u200C"));
+        if (inline) {
+            elements.push(skeletonSpan);
+        }
+        else {
+            // Without the <br />, the skeleton lines will all run together if
+            // `width` is specified
+            elements.push(React__default.createElement(React__default.Fragment, { key: i },
+                skeletonSpan,
+                React__default.createElement("br", null)));
+        }
+    }
+    return (React__default.createElement("span", { className: containerClassName, "data-testid": containerTestId, "aria-live": "polite", "aria-busy": (_c = styleOptions.enableAnimation) !== null && _c !== void 0 ? _c : defaultEnableAnimation }, Wrapper
+        ? elements.map((el, i) => React__default.createElement(Wrapper, { key: i }, el))
+        : elements));
+}
+
 const root$1 = cva(styles$6.calendarRoot);
 function DropDown({ options = [], value, onChange, onDropdownOpen, }) {
     const [open, setOpen] = useState(false);
@@ -28048,19 +28161,25 @@ function DropDown({ options = [], value, onChange, onDropdownOpen, }) {
     }
     return (jsxRuntimeExports.jsxs(Select$1, { value: value?.toString(), onValueChange: handleChange, open: open, onOpenChange: setOpen, children: [jsxRuntimeExports.jsx(Select$1.Trigger, { className: styles$6.dropdown_trigger, iconProps: {
                     className: styles$6.dropdown_icon,
-                }, children: jsxRuntimeExports.jsx(Select$1.Value, {}) }), jsxRuntimeExports.jsxs(Select$1.Content, { className: styles$6.dropdown_content, children: [jsxRuntimeExports.jsx(Select$1.ScrollUpButton, { asChild: true, children: jsxRuntimeExports.jsx(Flex, { justify: "center", children: jsxRuntimeExports.jsx(ChevronUpIcon, {}) }) }), jsxRuntimeExports.jsx(Select$1.Viewport, { children: options.map((opt) => (jsxRuntimeExports.jsx(Select$1.Item, { value: opt.value.toString(), disabled: opt.disabled, textProps: {
+                }, children: jsxRuntimeExports.jsx(Select$1.Value, {}) }), jsxRuntimeExports.jsxs(Select$1.Content, { className: styles$6.dropdown_content, children: [jsxRuntimeExports.jsx(Select$1.ScrollUpButton, { asChild: true, children: jsxRuntimeExports.jsx(Flex, { justify: 'center', children: jsxRuntimeExports.jsx(ChevronUpIcon, {}) }) }), jsxRuntimeExports.jsx(Select$1.Viewport, { children: options.map((opt) => (jsxRuntimeExports.jsx(Select$1.Item, { value: opt.value.toString(), disabled: opt.disabled, textProps: {
                                 className: styles$6.dropdown_item_text,
-                            }, children: opt.label }, opt.value))) }), jsxRuntimeExports.jsx(Select$1.ScrollDownButton, { asChild: true, children: jsxRuntimeExports.jsx(Flex, { justify: "center", children: jsxRuntimeExports.jsx(ChevronDownIcon, {}) }) })] })] }));
+                            }, children: opt.label }, opt.value))) }), jsxRuntimeExports.jsx(Select$1.ScrollDownButton, { asChild: true, children: jsxRuntimeExports.jsx(Flex, { justify: 'center', children: jsxRuntimeExports.jsx(ChevronDownIcon, {}) }) })] })] }));
 }
-const Calendar = function ({ className, classNames, showOutsideDays = true, onDropdownOpen, ...props }) {
+const Calendar = function ({ className, classNames, showOutsideDays = true, onDropdownOpen, showTooltip = false, tooltipMessages = {}, loadingData = false, ...props }) {
     return (jsxRuntimeExports.jsx(DayPicker, { showOutsideDays: showOutsideDays, components: {
             Chevron: (props) => {
-                if (props.orientation === "left") {
+                if (props.orientation === 'left') {
                     return jsxRuntimeExports.jsx(ChevronLeftIcon, { ...props });
                 }
                 return jsxRuntimeExports.jsx(ChevronRightIcon, { ...props });
             },
             Dropdown: (props) => (jsxRuntimeExports.jsx(DropDown, { ...props, onDropdownOpen: onDropdownOpen })),
+            DayButton: (props) => {
+                const { day, ...buttonProps } = props;
+                const message = tooltipMessages[dateLib.format(day.date, 'dd-MM-yyyy')];
+                return (jsxRuntimeExports.jsx(Tooltip, { side: "top", disabled: loadingData || !showTooltip || !message, message: message, children: jsxRuntimeExports.jsx("button", { ...buttonProps }) }));
+            },
+            MonthGrid: (props) => loadingData ? (jsxRuntimeExports.jsx(Skeleton, { count: 6, height: '12px', width: '252px', style: { marginBottom: 'var(--space-5)' }, highlightColor: "var(--background-base)", baseColor: "var(--background-base-hover)" })) : (jsxRuntimeExports.jsx("table", { ...props })),
         }, classNames: {
             caption_label: styles$6.caption_label,
             button_previous: `${styles$6.nav_button} ${styles$6.nav_button_previous}`,
@@ -32118,97 +32237,6 @@ const Table = Object.assign(TableRoot, {
     Caption: TableCaption,
 });
 
-/**
- * @internal
- */
-const SkeletonThemeContext = React__default.createContext({});
-
-/* eslint-disable react/no-array-index-key */
-const defaultEnableAnimation = true;
-// For performance & cleanliness, don't add any inline styles unless we have to
-function styleOptionsToCssProperties({ baseColor, highlightColor, width, height, borderRadius, circle, direction, duration, enableAnimation = defaultEnableAnimation, }) {
-    const style = {};
-    if (direction === 'rtl')
-        style['--animation-direction'] = 'reverse';
-    if (typeof duration === 'number')
-        style['--animation-duration'] = `${duration}s`;
-    if (!enableAnimation)
-        style['--pseudo-element-display'] = 'none';
-    if (typeof width === 'string' || typeof width === 'number')
-        style.width = width;
-    if (typeof height === 'string' || typeof height === 'number')
-        style.height = height;
-    if (typeof borderRadius === 'string' || typeof borderRadius === 'number')
-        style.borderRadius = borderRadius;
-    if (circle)
-        style.borderRadius = '50%';
-    if (typeof baseColor !== 'undefined')
-        style['--base-color'] = baseColor;
-    if (typeof highlightColor !== 'undefined')
-        style['--highlight-color'] = highlightColor;
-    return style;
-}
-function Skeleton({ count = 1, wrapper: Wrapper, className: customClassName, containerClassName, containerTestId, circle = false, style: styleProp, ...originalPropsStyleOptions }) {
-    var _a, _b, _c;
-    const contextStyleOptions = React__default.useContext(SkeletonThemeContext);
-    const propsStyleOptions = { ...originalPropsStyleOptions };
-    // DO NOT overwrite style options from the context if `propsStyleOptions`
-    // has properties explicity set to undefined
-    for (const [key, value] of Object.entries(originalPropsStyleOptions)) {
-        if (typeof value === 'undefined') {
-            delete propsStyleOptions[key];
-        }
-    }
-    // Props take priority over context
-    const styleOptions = {
-        ...contextStyleOptions,
-        ...propsStyleOptions,
-        circle,
-    };
-    // `styleProp` has the least priority out of everything
-    const style = {
-        ...styleProp,
-        ...styleOptionsToCssProperties(styleOptions),
-    };
-    let className = 'react-loading-skeleton';
-    if (customClassName)
-        className += ` ${customClassName}`;
-    const inline = (_a = styleOptions.inline) !== null && _a !== void 0 ? _a : false;
-    const elements = [];
-    const countCeil = Math.ceil(count);
-    for (let i = 0; i < countCeil; i++) {
-        let thisStyle = style;
-        if (countCeil > count && i === countCeil - 1) {
-            // count is not an integer and we've reached the last iteration of
-            // the loop, so add a "fractional" skeleton.
-            //
-            // For example, if count is 3.5, we've already added 3 full
-            // skeletons, so now we add one more skeleton that is 0.5 times the
-            // original width.
-            const width = (_b = thisStyle.width) !== null && _b !== void 0 ? _b : '100%'; // 100% is the default since that's what's in the CSS
-            const fractionalPart = count % 1;
-            const fractionalWidth = typeof width === 'number'
-                ? width * fractionalPart
-                : `calc(${width} * ${fractionalPart})`;
-            thisStyle = { ...thisStyle, width: fractionalWidth };
-        }
-        const skeletonSpan = (React__default.createElement("span", { className: className, style: thisStyle, key: i }, "\u200C"));
-        if (inline) {
-            elements.push(skeletonSpan);
-        }
-        else {
-            // Without the <br />, the skeleton lines will all run together if
-            // `width` is specified
-            elements.push(React__default.createElement(React__default.Fragment, { key: i },
-                skeletonSpan,
-                React__default.createElement("br", null)));
-        }
-    }
-    return (React__default.createElement("span", { className: containerClassName, "data-testid": containerTestId, "aria-live": "polite", "aria-busy": (_c = styleOptions.enableAnimation) !== null && _c !== void 0 ? _c : defaultEnableAnimation }, Wrapper
-        ? elements.map((el, i) => React__default.createElement(Wrapper, { key: i }, el))
-        : elements));
-}
-
 function DataTableRoot({ columns, data, emptyState, children, parentStyle, isLoading = false, ShouldShowHeader = true, initialState, loaderRow = 2, onRowClick, onStateChange = () => { }, onLoadMore, ...props }) {
     const [tableCustomFilter, setTableCustomFilter] = useState({});
     const convertedChildren = Children.toArray(children);