@monolith-forensics/monolith-ui 1.7.1 → 1.8.1-dev.0

package/dist/Popover/Popover.js

@@ -23,8 +23,9 @@ const PopoverRoot = ({ children, opened, defaultOpened = false, onChange, trigge
             }
         },
         placement: position,
+        transform: false,
         middleware: [
-            offset(offsetValue + (withArrow ? resolvedArrowSize / 2 : 0)),
+            offset(offsetValue + (withArrow ? resolvedArrowSize : 0)),
             flip({ padding: flipPadding }),
             shift({ padding: shiftPadding }),
             size({
@@ -42,7 +43,7 @@ const PopoverRoot = ({ children, opened, defaultOpened = false, onChange, trigge
                 ? [
                     arrow({
                         element: arrowRef,
-                        padding: 8,
+                        padding: Math.max(8, resolvedArrowSize),
                     }),
                 ]
                 : []),
@@ -92,6 +93,7 @@ const PopoverRoot = ({ children, opened, defaultOpened = false, onChange, trigge
         returnFocus,
         keepMounted,
         zIndex,
+        role,
         dropdownId,
         transitionProps,
     }), [
@@ -109,6 +111,7 @@ const PopoverRoot = ({ children, opened, defaultOpened = false, onChange, trigge
         returnFocus,
         keepMounted,
         zIndex,
+        role,
         dropdownId,
         transitionProps,
     ]);

package/dist/Popover/Popover.styles.d.ts

@@ -1,7 +1,2 @@
 export declare const StyledDropdown: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const ARROW_STYLES: Record<"top" | "right" | "bottom" | "left", {
-    clipPath: string;
-    borderTransparent: string[];
-    radiusCorner: string;
-    staticProp: string;
-}>;
+export declare const StyledArrow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("@floating-ui/react").FloatingArrowProps, "ref"> & import("react").RefAttributes<SVGSVGElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<import("@floating-ui/react").FloatingArrowProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>, keyof import("react").Component<any, {}, any>>;

package/dist/Popover/Popover.styles.js

@@ -1,10 +1,14 @@
+import { FloatingArrow } from "@floating-ui/react";
 import styled from "styled-components";
 export const StyledDropdown = styled.div `
+  --mf-popover-arrow-fill: ${({ theme }) => theme.palette.background.default};
+  --mf-popover-arrow-border: ${({ theme }) => theme.palette.divider};
+
   position: relative;
   min-width: 180px;
   border-radius: 8px;
-  border: 1px solid ${({ theme }) => theme.palette.divider};
-  background-color: ${({ theme }) => theme.palette.background.default};
+  border: 1px solid var(--mf-popover-arrow-border);
+  background-color: var(--mf-popover-arrow-fill);
   color: ${({ theme }) => theme.palette.text.primary};
   box-shadow:
     rgba(15, 23, 42, 0.1) 0px 10px 15px -3px,
@@ -12,29 +16,8 @@ export const StyledDropdown = styled.div `
   padding: 10px 12px;
   outline: none;
 `;
-export const ARROW_STYLES = {
-    bottom: {
-        clipPath: "polygon(0 100%, 0 0, 100% 0)",
-        borderTransparent: ["borderBottomColor", "borderRightColor"],
-        radiusCorner: "borderTopLeftRadius",
-        staticProp: "top",
-    },
-    top: {
-        clipPath: "polygon(0 100%, 100% 100%, 100% 0)",
-        borderTransparent: ["borderTopColor", "borderLeftColor"],
-        radiusCorner: "borderBottomRightRadius",
-        staticProp: "bottom",
-    },
-    left: {
-        clipPath: "polygon(100% 0, 0 0, 100% 100%)",
-        borderTransparent: ["borderLeftColor", "borderBottomColor"],
-        radiusCorner: "borderTopRightRadius",
-        staticProp: "right",
-    },
-    right: {
-        clipPath: "polygon(0 100%, 0 0, 100% 100%)",
-        borderTransparent: ["borderRightColor", "borderTopColor"],
-        radiusCorner: "borderBottomLeftRadius",
-        staticProp: "left",
-    },
-};
+export const StyledArrow = styled(FloatingArrow) `
+  display: block;
+  overflow: visible;
+  z-index: 1;
+`;

package/dist/Popover/Popover.transitions.d.ts

@@ -1,5 +1,7 @@
+import { FloatingContext } from "@floating-ui/react";
+import { CSSProperties } from "react";
 import { PopoverTransitionProps } from "./Popover.types";
-export declare function usePopoverTransition(opened: boolean, { transition, duration, timingFunction }: PopoverTransitionProps): {
+export declare function usePopoverTransition(context: FloatingContext, { transition, duration, timingFunction, }: PopoverTransitionProps): {
     mounted: boolean;
-    styles: React.CSSProperties;
+    styles: CSSProperties;
 };

package/dist/Popover/Popover.transitions.js

@@ -1,63 +1,37 @@
-import { useEffect, useRef, useState } from "react";
+import { useTransitionStyles } from "@floating-ui/react";
 const TRANSITION_PRESETS = {
     fade: {
-        from: { opacity: 0 },
-        to: { opacity: 1 },
+        initial: { opacity: 0 },
+        open: { opacity: 1 },
     },
     scale: {
-        from: { opacity: 0, scale: "0.85" },
-        to: { opacity: 1, scale: "1" },
+        initial: { opacity: 0, transform: "scale(0.85)" },
+        open: { opacity: 1, transform: "scale(1)" },
     },
     "scale-y": {
-        from: { opacity: 0, scale: "1 0.7" },
-        to: { opacity: 1, scale: "1 1" },
+        initial: { opacity: 0, transform: "scaleY(0.7)" },
+        open: { opacity: 1, transform: "scaleY(1)" },
     },
     pop: {
-        from: { opacity: 0, scale: "0.6" },
-        to: { opacity: 1, scale: "1" },
+        initial: { opacity: 0, transform: "scale(0.6)" },
+        open: { opacity: 1, transform: "scale(1)" },
     },
 };
-export function usePopoverTransition(opened, { transition = "fade", duration = 150, timingFunction = "ease" }) {
-    const [mounted, setMounted] = useState(opened);
-    const [transitionEnabled, setTransitionEnabled] = useState(false);
-    const [phase, setPhase] = useState(opened ? "enter" : "exit");
-    const frameRef = useRef(0);
-    useEffect(() => {
-        cancelAnimationFrame(frameRef.current);
-        if (opened) {
-            setMounted(true);
-            setTransitionEnabled(false);
-            setPhase("exit");
-            frameRef.current = requestAnimationFrame(() => {
-                frameRef.current = requestAnimationFrame(() => {
-                    setTransitionEnabled(true);
-                    setPhase("enter");
-                });
-            });
-        }
-        else {
-            setTransitionEnabled(true);
-            setPhase("exit");
-            const timer = setTimeout(() => {
-                setMounted(false);
-                setTransitionEnabled(false);
-            }, duration);
-            return () => clearTimeout(timer);
-        }
-    }, [opened, duration]);
-    useEffect(() => {
-        return () => cancelAnimationFrame(frameRef.current);
-    }, []);
+export function usePopoverTransition(context, { transition = "fade", duration = 150, timingFunction = "ease", }) {
+    var _a;
     const preset = TRANSITION_PRESETS[transition];
-    const transitionStyles = phase === "enter" ? preset.to : preset.from;
-    const properties = [
-        ...new Set([...Object.keys(preset.from), ...Object.keys(preset.to)]),
-    ];
-    const transitionValue = properties
-        .map((prop) => `${prop} ${duration}ms ${timingFunction}`)
-        .join(", ");
+    const { isMounted, styles } = useTransitionStyles(context, {
+        duration,
+        initial: preset.initial,
+        open: preset.open,
+        close: (_a = preset.close) !== null && _a !== void 0 ? _a : preset.initial,
+        common: {
+            transitionTimingFunction: timingFunction,
+            willChange: transition === "fade" ? "opacity" : "opacity, transform",
+        },
+    });
     return {
-        mounted: mounted || opened,
-        styles: Object.assign(Object.assign({}, transitionStyles), (transitionEnabled ? { transition: transitionValue } : {})),
+        mounted: isMounted,
+        styles,
     };
 }

package/dist/Popover/PopoverDropdown.js

@@ -12,17 +12,15 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FloatingFocusManager, FloatingPortal } from "@floating-ui/react";
 import { usePopoverContext } from "./Popover.context";
-import { ARROW_STYLES, StyledDropdown } from "./Popover.styles";
+import { StyledArrow, StyledDropdown } from "./Popover.styles";
 import { usePopoverTransition } from "./Popover.transitions";
 export const PopoverDropdown = (_a) => {
-    var _b, _c;
     var { children, className, style } = _a, props = __rest(_a, ["children", "className", "style"]);
-    const { opened, refs, context, floatingStyles, getFloatingProps, withArrow, arrowSize, arrowRadius, arrowRef, withinPortal, trapFocus, returnFocus, keepMounted, zIndex, dropdownId, transitionProps: ctxTransitionProps, } = usePopoverContext();
-    const { mounted, styles: transitionStyles } = usePopoverTransition(opened, ctxTransitionProps);
-    const arrowX = (_b = context.middlewareData.arrow) === null || _b === void 0 ? void 0 : _b.x;
-    const arrowY = (_c = context.middlewareData.arrow) === null || _c === void 0 ? void 0 : _c.y;
+    const { refs, context, floatingStyles, getFloatingProps, withArrow, arrowSize, arrowRadius, arrowRef, withinPortal, trapFocus, returnFocus, keepMounted, zIndex, dropdownId, transitionProps: ctxTransitionProps, } = usePopoverContext();
+    const { mounted, styles: transitionStyles } = usePopoverTransition(context, ctxTransitionProps);
+    const resolvedArrowSize = Math.max(arrowSize, 6);
+    const resolvedArrowRadius = Math.min(Math.max(arrowRadius, 0), resolvedArrowSize / 2);
     const [placementSide, placementAlignment] = context.placement.split("-");
-    const arrowConfig = ARROW_STYLES[placementSide];
     const originSide = {
         top: "bottom",
         bottom: "top",
@@ -44,7 +42,7 @@ export const PopoverDropdown = (_a) => {
     }
     const dropdown = (_jsx(FloatingFocusManager, { context: context, modal: trapFocus, returnFocus: returnFocus, children: _jsxs(StyledDropdown, Object.assign({}, getFloatingProps(props), { id: dropdownId, ref: refs.setFloating, className: className, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, floatingStyles), transitionStyles), { transformOrigin }), style), { zIndex }), (keepMounted && !mounted
                 ? { visibility: "hidden", pointerEvents: "none" }
-                : {})), children: [children, withArrow && (_jsx("div", { ref: arrowRef, style: Object.assign(Object.assign(Object.assign({ position: "absolute", width: Math.max(arrowSize, 6), height: Math.max(arrowSize, 6), transform: "rotate(45deg)", background: "inherit", border: "1px solid", borderColor: "inherit", pointerEvents: "none", zIndex: 1 }, (arrowX != null ? { left: arrowX } : {})), (arrowY != null ? { top: arrowY } : {})), { [arrowConfig.staticProp]: -Math.max(arrowSize, 6) / 2, [arrowConfig.radiusCorner]: arrowRadius, [arrowConfig.borderTransparent[0]]: "transparent", [arrowConfig.borderTransparent[1]]: "transparent", clipPath: arrowConfig.clipPath }) }))] })) }));
+                : {})), children: [children, withArrow && (_jsx(StyledArrow, { ref: arrowRef, context: context, width: resolvedArrowSize * 2, height: resolvedArrowSize, tipRadius: resolvedArrowRadius, strokeWidth: 1, fill: "var(--mf-popover-arrow-fill)", stroke: "var(--mf-popover-arrow-border)" }))] })) }));
     if (!withinPortal) {
         return dropdown;
     }

package/dist/Popover/PopoverTarget.js

@@ -2,10 +2,13 @@ import { useMergeRefs } from "@floating-ui/react";
 import { cloneElement, isValidElement } from "react";
 import { usePopoverContext } from "./Popover.context";
 export const PopoverTarget = ({ children }) => {
-    const { refs, getReferenceProps, opened, dropdownId } = usePopoverContext();
+    const { refs, getReferenceProps, opened, dropdownId, role } = usePopoverContext();
     if (!isValidElement(children)) {
         return null;
     }
-    const mergedRef = useMergeRefs([refs.setReference, children.ref]);
-    return cloneElement(children, getReferenceProps(Object.assign({ ref: mergedRef, "aria-expanded": opened, "aria-controls": dropdownId, "aria-haspopup": "dialog" }, children.props)));
+    const mergedRef = useMergeRefs([
+        refs.setReference,
+        children.ref,
+    ]);
+    return cloneElement(children, getReferenceProps(Object.assign({ ref: mergedRef, "aria-expanded": opened, "aria-controls": dropdownId, "aria-haspopup": role === "tooltip" ? undefined : role }, children.props)));
 };

package/dist/SegmentedControl/SegmentedControl.utils.d.ts

@@ -4,8 +4,8 @@ export declare const resolveActiveColor: (theme: any, activeColor?: string) => {
     main: any;
     contrastText: any;
 };
-export declare const getSegmentHeight: (size?: Size) => 32 | 38 | 22 | 26 | 46 | 56;
-export declare const getSegmentFontSize: (size?: Size) => "11px" | "12px" | "14px" | "16px" | "18px" | "20px";
+export declare const getSegmentHeight: (size?: Size) => number;
+export declare const getSegmentFontSize: (size?: Size) => string;
 export declare const normalizeSegmentedData: (data: SegmentedControlDataItem[]) => NormalizedSegmentedItem[];
 export declare const getFirstEnabledIndex: (data: NormalizedSegmentedItem[]) => number;
 export declare const getNextEnabledIndex: (data: NormalizedSegmentedItem[], startIndex: number, direction: 1 | -1) => number;

package/dist/SegmentedControl/SegmentedControl.utils.js

@@ -1,3 +1,4 @@
+import { getControlSizeTokens } from "../core";
 export const resolveActiveColor = (theme, activeColor) => {
     var _a;
     const fallback = {
@@ -21,38 +22,10 @@ export const resolveActiveColor = (theme, activeColor) => {
     };
 };
 export const getSegmentHeight = (size) => {
-    switch (size) {
-        case "xxs":
-            return 22;
-        case "xs":
-            return 26;
-        case "md":
-            return 38;
-        case "lg":
-            return 46;
-        case "xl":
-            return 56;
-        case "sm":
-        default:
-            return 32;
-    }
+    return getControlSizeTokens(size).segmentedHeight;
 };
 export const getSegmentFontSize = (size) => {
-    switch (size) {
-        case "xxs":
-            return "11px";
-        case "xs":
-            return "12px";
-        case "md":
-            return "16px";
-        case "lg":
-            return "18px";
-        case "xl":
-            return "20px";
-        case "sm":
-        default:
-            return "14px";
-    }
+    return `${getControlSizeTokens(size).segmentedFontSize}px`;
 };
 export const normalizeSegmentedData = (data) => data.map((item) => {
     var _a;

package/dist/SelectBox/SelectBox.js

@@ -279,13 +279,13 @@ triggerFocus = false, triggerOpen = false, onFocused, onOpened, }) => {
     const renderOptionItem = (item, index) => (_jsx(Tooltip, { content: OptionTooltip ? _jsx(OptionTooltip, { data: item.data }) : null, side: "left", children: _jsx(StyledItem, { className: "mfFloatingItem", onClick: (e) => handleItemClick(e, item), "data-selected": (_value === null || _value === void 0 ? void 0 : _value.value) === item.value, "data-disabled": item.disabled, size: size, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || _jsx(_Fragment, { children: item === null || item === void 0 ? void 0 : item.label }) }, index) }, index));
     const renderActionButton = () => {
         if (clearable && (_value || !!inputValue)) {
-            return (_jsx(ClearButton, { className: "input-btn", onClick: handleClear, onMouseDown: (e) => {
+            return (_jsx(ClearButton, { size: size, className: "input-btn", onClick: handleClear, onMouseDown: (e) => {
                     e.preventDefault();
                     e.stopPropagation();
                 } }));
         }
         if (arrow) {
-            return (_jsx(ArrowButton, { onClick: (e) => {
+            return (_jsx(ArrowButton, { size: size, onClick: (e) => {
                     e.preventDefault();
                 }, onMouseDown: (e) => {
                     e.preventDefault();
@@ -393,7 +393,7 @@ triggerFocus = false, triggerOpen = false, onFocused, onOpened, }) => {
                                 : "",
                         }, variant: variant, "data-empty": filteredItems.length === 0 }, DropDownProps, { children: [loading && _jsx(Loader, {}), !loading && actionComponent && (_jsx(ActionMenu, { onClick: () => {
                                     setIsOpen(false);
-                                }, children: actionComponent })), !loading && filteredItems.length === 0 && (_jsx(EmptyComponent, { children: getEmptyMessage(allowCustomValue, searchValue) })), !loading && (_jsx(StyledInnerItemContainer, { ref: scrollContainerRef, "data-scroll-active": scrollActive, onScroll: onScroll, children: grouped
+                                }, children: actionComponent })), !loading && filteredItems.length === 0 && (_jsx(EmptyComponent, { size: size, children: getEmptyMessage(allowCustomValue, searchValue) })), !loading && (_jsx(StyledInnerItemContainer, { ref: scrollContainerRef, "data-scroll-active": scrollActive, onScroll: onScroll, children: grouped
                                     ? groups.map((group, index) => (_jsxs("div", { children: [_jsx(GroupTitle, { size: size, children: group.label }), group.items.map((item, index) => renderOptionItem(item, index))] }, group.label)))
                                     : filteredItems.map((item, index) => renderOptionItem(item, index)) }))] })) }) }))] }));
 };

package/dist/SelectBox/select-box.styled-components.d.ts

@@ -4,7 +4,9 @@ export declare const StyledInputContainer: import("styled-components/dist/types"
     width?: string | number | null;
 }>> & string;
 export declare const StyledInnerItemContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const EmptyComponent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const EmptyComponent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    size?: Size;
+}>> & string;
 interface GroupTitleProps {
     className?: string;
     children?: ReactNode;

package/dist/SelectBox/select-box.styled-components.js

@@ -11,6 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from "styled-components";
+import { getControlSizeTokens } from "../core";
 export const StyledInputContainer = styled.div `
   font-family: ${({ theme }) => theme.typography.fontFamily};
 
@@ -58,7 +59,7 @@ export const EmptyComponent = styled.div `
   align-items: center;
   justify-content: center;
   padding: 5px;
-  font-size: 12px;
+  font-size: ${({ size = "sm" }) => `${getControlSizeTokens(size).supportingFontSize}px`};
   font-weight: 500;
   color: ${(props) => props.theme.palette.text.secondary};
 `;
@@ -74,17 +75,8 @@ export const GroupTitle = styled((_a) => {
 
   color: ${(props) => props.theme.palette.text.secondary};
 
-  padding: ${({ size }) => size === "xs"
-    ? "2px 8px"
-    : size === "sm"
-        ? "4px 10px"
-        : size === "md"
-            ? "4px 12px"
-            : size === "lg"
-                ? "5px 14px"
-                : size === "xl"
-                    ? "6px 16px"
-                    : "2px 8px"};
+  min-height: ${({ size = "sm" }) => `${getControlSizeTokens(size).menuRowHeight}px`};
+  padding: ${({ size = "sm" }) => `0px ${getControlSizeTokens(size).menuItemPaddingX}px`};
 
   .group-label {
     white-space: nowrap;
@@ -95,17 +87,7 @@ export const GroupTitle = styled((_a) => {
 
     font-weight: 500;
 
-    font-size: ${({ size }) => size === "xs"
-    ? "11px"
-    : size === "sm"
-        ? "13px"
-        : size === "md"
-            ? "15px"
-            : size === "lg"
-                ? "17px"
-                : size === "xl"
-                    ? "19px"
-                    : "11px"};
+    font-size: ${({ size = "sm" }) => `${getControlSizeTokens(size).menuGroupFontSize}px`};
   }
 
   .group-line {
@@ -119,8 +101,8 @@ export const StyledItem = styled.div `
   border-radius: 3px;
   display: flex;
   align-items: center;
-  min-height: 25px;
-  padding: 7px 10px;
+  min-height: ${({ size }) => `${getControlSizeTokens(size).menuRowHeight}px`};
+  height: ${({ size }) => `${getControlSizeTokens(size).menuRowHeight}px`};
   position: relative;
   user-select: none;
   outline: none;
@@ -129,29 +111,9 @@ export const StyledItem = styled.div `
 
   font-family: ${({ theme }) => theme.typography.fontFamily};
 
-  font-size: ${({ size }) => size === "xs"
-    ? "11px"
-    : size === "sm"
-        ? "13px"
-        : size === "md"
-            ? "15px"
-            : size === "lg"
-                ? "17px"
-                : size === "xl"
-                    ? "19px"
-                    : "11px"};
-
-  padding: ${({ size }) => size === "xs"
-    ? "2px 8px"
-    : size === "sm"
-        ? "4px 10px"
-        : size === "md"
-            ? "4px 12px"
-            : size === "lg"
-                ? "5px 14px"
-                : size === "xl"
-                    ? "6px 16px"
-                    : "2px 8px"};
+  font-size: ${({ size }) => `${getControlSizeTokens(size).fontSize}px`};
+
+  padding: ${({ size }) => `0px ${getControlSizeTokens(size).menuItemPaddingX}px`};
 
   &:hover {
     background-color: ${(props) => props.theme.palette.action.hover};

package/dist/SuperDatePicker/SuperDatePicker.d.ts

@@ -0,0 +1,74 @@
+import moment from "moment";
+import { CSSProperties, ReactElement, ReactNode } from "react";
+import { ButtonProps } from "../Button";
+import { Size, Variant } from "../core";
+export type SuperDatePickerUnit = "s" | "m" | "h" | "d" | "w" | "M" | "y";
+export type SuperDatePickerRefreshUnit = "s" | "m" | "h";
+export type DurationRange = {
+    start: string;
+    end: string;
+    label: string;
+};
+export type SuperDatePickerQuickSelectPanel = {
+    title: string;
+    content: ReactElement;
+};
+export type SuperDatePickerTimeChangeProps = {
+    start: string;
+    end: string;
+    isInvalid: boolean;
+    isQuickSelection: boolean;
+};
+export type SuperDatePickerRefreshChangeProps = {
+    isPaused: boolean;
+    refreshInterval: number;
+    intervalUnits: SuperDatePickerRefreshUnit;
+};
+export type SuperDatePickerRefreshProps = {
+    start: string;
+    end: string;
+    refreshInterval: number;
+};
+export type SuperDatePickerTimeWindowButtonsConfig = {
+    zoomFactor?: number;
+    showZoomIn?: boolean;
+};
+export type SuperDatePickerProps = {
+    className?: string;
+    style?: CSSProperties;
+    start?: string;
+    end?: string;
+    defaultStart?: string;
+    defaultEnd?: string;
+    onTimeChange?: (props: SuperDatePickerTimeChangeProps) => void;
+    commonlyUsedRanges?: DurationRange[];
+    recentlyUsedRanges?: DurationRange[];
+    customQuickSelectPanels?: SuperDatePickerQuickSelectPanel[];
+    isDisabled?: boolean | {
+        display: ReactNode;
+    };
+    isLoading?: boolean;
+    width?: "auto" | "restricted" | "full";
+    size?: Size;
+    variant?: Variant;
+    compressed?: boolean;
+    showUpdateButton?: boolean | "iconOnly";
+    updateButtonProps?: ButtonProps;
+    quickSelectButtonProps?: ButtonProps;
+    isQuickSelectOnly?: boolean;
+    isAutoRefreshOnly?: boolean;
+    isPaused?: boolean;
+    refreshInterval?: number;
+    refreshMinInterval?: number;
+    refreshIntervalUnits?: SuperDatePickerRefreshUnit;
+    onRefresh?: (props: SuperDatePickerRefreshProps) => void | Promise<void>;
+    onRefreshChange?: (props: SuperDatePickerRefreshChangeProps) => void;
+    showTimeWindowButtons?: boolean | SuperDatePickerTimeWindowButtonsConfig;
+    minDate?: Date | moment.Moment;
+    maxDate?: Date | moment.Moment;
+    timeZoneDisplay?: ReactNode;
+    dateFormat?: string;
+    "aria-label"?: string;
+};
+export declare const SuperDatePicker: React.FC<SuperDatePickerProps>;
+export default SuperDatePicker;