@raystack/apsara 0.21.0 → 0.21.1

package/dist/calendar/calendar.d.ts

@@ -1,8 +1,15 @@
-import { DayPickerProps } from "react-day-picker";
+import { DayPickerProps } from 'react-day-picker';
 interface OnDropdownOpen {
     onDropdownOpen?: VoidFunction;
 }
-export type CalendarProps = DayPickerProps & OnDropdownOpen;
-export declare const Calendar: ({ className, classNames, showOutsideDays, onDropdownOpen, ...props }: CalendarProps) => import("react/jsx-runtime").JSX.Element;
+interface CalendarPropsExtended {
+    showTooltip?: boolean;
+    tooltipMessages?: {
+        [key: string]: any;
+    };
+    loadingData?: boolean;
+}
+export type CalendarProps = DayPickerProps & OnDropdownOpen & CalendarPropsExtended;
+export declare const Calendar: ({ className, classNames, showOutsideDays, onDropdownOpen, showTooltip, tooltipMessages, loadingData, ...props }: CalendarProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=calendar.d.ts.map

package/dist/calendar/calendar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../calendar/calendar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,cAAc,EAAiB,MAAM,kBAAkB,CAAC;AAa5E,UAAU,cAAc;IACtB,cAAc,CAAC,EAAE,YAAY,CAAC;CAC/B;AAED,MAAM,MAAM,aAAa,GAAG,cAAc,GAAG,cAAc,CAAC;AAmE5D,eAAO,MAAM,QAAQ,yEAMlB,aAAa,4CA2Cf,CAAC"}
+{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../calendar/calendar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,cAAc,EAEf,MAAM,kBAAkB,CAAC;AAe1B,UAAU,cAAc;IACtB,cAAc,CAAC,EAAE,YAAY,CAAC;CAC/B;AAED,UAAU,qBAAqB;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAC;IACzC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,MAAM,aAAa,GAAG,cAAc,GACxC,cAAc,GACd,qBAAqB,CAAC;AAmExB,eAAO,MAAM,QAAQ,oHASlB,aAAa,4CAsEf,CAAC"}

package/dist/index.cjs

@@ -10428,6 +10428,20 @@ const $cb5cc270b50c6fcd$var$PopoverContentNonModal = /*#__PURE__*/ React.forward
         }
     }))));
 });
+/* -------------------------------------------------------------------------------------------------
+ * PopoverClose
+ * -----------------------------------------------------------------------------------------------*/ const $cb5cc270b50c6fcd$var$CLOSE_NAME = 'PopoverClose';
+const $cb5cc270b50c6fcd$export$d6ac43ebaa40d53e = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
+    const { __scopePopover: __scopePopover , ...closeProps } = props;
+    const context = $cb5cc270b50c6fcd$var$usePopoverContext($cb5cc270b50c6fcd$var$CLOSE_NAME, __scopePopover);
+    return /*#__PURE__*/ React.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';
 }
@@ -10435,6 +10449,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"};
 
@@ -10443,6 +10458,7 @@ const PopoverContent = React.forwardRef(({ className, align = "center", sideOffs
 PopoverContent.displayName = $cb5cc270b50c6fcd$export$7c6e2c02157bb7d2.displayName;
 const Popover = Object.assign($cb5cc270b50c6fcd$export$be92b6f5f03c0fe9, {
     Trigger: $cb5cc270b50c6fcd$export$41fb9f06171c75f4,
+    Close: $cb5cc270b50c6fcd$export$f39c2d165cd861fe,
     Content: PopoverContent,
 });
 
@@ -28060,6 +28076,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.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.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.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.createElement(React.Fragment, { key: i },
+                skeletonSpan,
+                React.createElement("br", null)));
+        }
+    }
+    return (React.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.createElement(Wrapper, { key: i }, el))
+        : elements));
+}
+
 const root$1 = cva(styles$6.calendarRoot);
 function DropDown({ options = [], value, onChange, onDropdownOpen, }) {
     const [open, setOpen] = React.useState(false);
@@ -28074,19 +28181,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}`,
@@ -32144,97 +32257,6 @@ const Table = Object.assign(TableRoot, {
     Caption: TableCaption,
 });
 
-/**
- * @internal
- */
-const SkeletonThemeContext = React.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.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.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.createElement(React.Fragment, { key: i },
-                skeletonSpan,
-                React.createElement("br", null)));
-        }
-    }
-    return (React.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.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] = React.useState({});
     const convertedChildren = React.Children.toArray(children);