@rio-cloud/rio-uikit 1.12.0 → 1.13.1

package/src/components/avatar/AvatarGroup.d.ts

@@ -1,15 +0,0 @@
-import { type PropsWithChildren } from 'react';
-export type AvatarGroupProps = {
-    /**
-     * Maximum number of items to be shown. Items that overflow are grouped into a single
-     * Avatar that displays the overflow count. Collapsed names are shown inside a tooltip.
-     * By default all items are shown.
-     */
-    maxItemsVisible?: number;
-    /**
-     * Additional classes set to the outer element.
-     */
-    className?: string;
-};
-declare const AvatarGroup: (props: PropsWithChildren<AvatarGroupProps>) => import("react/jsx-runtime").JSX.Element;
-export default AvatarGroup;

package/src/components/avatar/AvatarGroup.js

@@ -1,23 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import Avatar from './Avatar';
-const AvatarGroup = (props) => {
-    const { maxItemsVisible = 99, className = '', children, ...remainingProps } = props;
-    const avatars = React.Children.toArray(children);
-    if (avatars.length <= maxItemsVisible) {
-        return _jsx("div", { className: 'AvatarGroup', children: avatars });
-    }
-    const visibleAvatars = avatars.slice(0, maxItemsVisible - 1);
-    const hiddenAvatars = avatars.slice(maxItemsVisible - 1);
-    const remainingCount = avatars.length - maxItemsVisible + 1;
-    const hiddenNames = hiddenAvatars
-        .map(avatar => {
-        if (React.isValidElement(avatar) && 'props' in avatar && 'name' in avatar.props) {
-            return avatar.props.name;
-        }
-        return ''; // Handle cases where the avatar doesn't have a name
-    })
-        .filter(Boolean); // Remove empty strings
-    return (_jsxs("div", { className: 'AvatarGroup', ...remainingProps, children: [visibleAvatars, _jsx(Avatar, { abbr: `+${remainingCount}`, tooltip: _jsx("div", { children: hiddenNames.map(hiddenName => (_jsx("div", { children: hiddenName }, hiddenName))) }) })] }));
-};
-export default AvatarGroup;

package/src/components/banner/Banner.d.ts

@@ -1,72 +0,0 @@
-import { type ReactNode, type PropsWithChildren } from 'react';
-type BannerProps = {
-    /**
-     * Defines if the content is shown or not.
-     *
-     * @default true
-     */
-    show: boolean;
-    /**
-     * Defines if a close button is shown or not. You can still add a custom
-     * CTA button to the content that handles visibility.
-     *
-     * @default true
-     */
-    dismissible?: boolean;
-    /**
-     * Callback when the close button is clicked.
-     *
-     * @returns
-     */
-    onClose?: () => void;
-    /**
-     * Defines the time when the next page is shown in milliseconds.
-     *
-     * @default 20_000
-     */
-    pageTimeout?: number;
-    /**
-     * Defines if the page navigation buttons shall be shown or not.
-     *
-     * @default true
-     */
-    showPageNavigation?: boolean;
-    /**
-     * Defines if a border is shown or not. When placed on a white background, please disable the border
-     * so it looks better.
-     *
-     * @default true
-     */
-    border?: boolean;
-    /**
-     * Enables or disables initial animation.
-     *
-     * @default true
-     */
-    initialAnimation?: boolean;
-    /**
-     * Additional classname added to the wrapper element.
-     */
-    className?: string;
-    /**
-     * The actual banner content. Wrap your content in a <Banner.Page> component.
-     *
-     * When having multiple pages, usa an array of <Banner.Page> components.
-     */
-    children: ReactNode | ReactNode[];
-};
-declare const Banner: {
-    (props: BannerProps): import("react/jsx-runtime").JSX.Element;
-    Page: ({ className, children, ...remainingProps }: PropsWithChildren<{
-        className?: string;
-    }>) => import("react/jsx-runtime").JSX.Element;
-    Icon: ({ className, children, ...remainingProps }: PropsWithChildren<import("./BannerIcon").BannerIconProps>) => import("react/jsx-runtime").JSX.Element;
-    Content: (props: PropsWithChildren<Partial<Pick<HTMLDivElement, "id">> & {
-        title?: string | React.ReactElement;
-        actions?: React.ReactElement;
-        minWidthBreakpoint?: number;
-        className?: string;
-    }>) => import("react/jsx-runtime").JSX.Element;
-    Actions: ({ className, children, ...remainingProps }: PropsWithChildren<import("./BannerActions").BannerActionsProps>) => import("react/jsx-runtime").JSX.Element;
-};
-export default Banner;

package/src/components/banner/Banner.js

@@ -1,74 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect, createContext, useRef } from 'react';
-import { motion, AnimatePresence, useReducedMotion } from 'framer-motion';
-import classNames from 'classnames';
-import Card from '../card/Card';
-import Button from '../button/Button';
-import BannerPageActions from './BannerActions';
-import BannerPageContent from './BannerContent';
-import BannerPageIcon from './BannerIcon';
-import BannerPage from './BannerPage';
-const BannerContext = createContext(undefined);
-const Banner = (props) => {
-    const { show = true, dismissible = true, onClose = () => { }, pageTimeout = 20_000, showPageNavigation = true, border = true, initialAnimation = true, className = '', children, ...remainingProps } = props;
-    const pages = Array.isArray(children) ? children : [children];
-    const pageAmount = pages.length;
-    const hasMultiplePages = pageAmount > 1;
-    const [currentPage, setCurrentPage] = useState(0);
-    const shouldReduceMotion = useReducedMotion();
-    const hasAnimation = !shouldReduceMotion && initialAnimation;
-    const contentRef = useRef(null);
-    const [contentHeight, setContentHeight] = useState(0);
-    // biome-ignore lint/correctness/useExhaustiveDependencies: "currentPage" resets interval on manual page change
-    useEffect(() => {
-        if (!show || pageAmount === 1) {
-            return;
-        }
-        const interval = setInterval(() => {
-            nextPage();
-        }, pageTimeout);
-        return () => clearInterval(interval);
-    }, [pageAmount, pageTimeout, show, currentPage]);
-    // Update height measurement after layout is complete
-    // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
-    useEffect(() => {
-        if (!contentRef.current) {
-            return;
-        }
-        // Use ResizeObserver to get accurate measurements after layout
-        const resizeObserver = new ResizeObserver(entries => {
-            const entry = entries[0];
-            if (entry) {
-                // Use getBoundingClientRect for most accurate height
-                const height = entry.target.getBoundingClientRect().height;
-                setContentHeight(height);
-            }
-        });
-        resizeObserver.observe(contentRef.current);
-        return () => resizeObserver.disconnect();
-    }, [show, currentPage]);
-    const nextPage = () => {
-        if (hasMultiplePages) {
-            setCurrentPage(prev => (prev + 1) % pageAmount);
-        }
-    };
-    const prevPage = () => {
-        if (hasMultiplePages) {
-            setCurrentPage(prev => (prev - 1 + pageAmount) % pageAmount);
-        }
-    };
-    const cardClasses = classNames('Banner display-flex text-color-darker overflow-hidden', 'position-relative', !border && 'border-color-white', className);
-    return (_jsx(BannerContext.Provider, { value: { nextPage, prevPage }, children: _jsx(AnimatePresence, { children: show && (_jsx(motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: contentHeight, opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: {
-                    height: { duration: 0.2 },
-                    opacity: { duration: 0.2 },
-                    ease: 'easeInOut',
-                }, children: _jsx("div", { ref: contentRef, style: { position: 'relative' }, children: _jsxs(Card, { className: cardClasses, padding: 20, ...remainingProps, children: [_jsxs("div", { className: 'flex-1-1 overflow-hidden', children: [_jsx(AnimatePresence, { exitBeforeEnter: true, children: _jsx(motion.div, { initial: hasAnimation ? { opacity: 0, x: 100 } : false, animate: { opacity: 1, x: 0 }, exit: hasAnimation ? { opacity: 0, x: -100 } : undefined, transition: {
-                                                duration: 1.5,
-                                                ease: [0.25, 1, 0.5, 1],
-                                            }, children: pages[currentPage] }, currentPage) }), hasMultiplePages && showPageNavigation && (_jsx("div", { className: 'margin-5', children: _jsx("div", { className: 'position-absolute bottom-5', style: { right: '45px' }, children: _jsxs("div", { className: 'display-flex', children: [_jsx(Button, { bsStyle: 'muted', bsSize: 'xs', onClick: prevPage, iconName: 'rioglyph-arrow-left', iconOnly: true }), _jsx(Button, { bsStyle: 'muted', bsSize: 'xs', onClick: nextPage, iconName: 'rioglyph-arrow-right', iconOnly: true })] }) }) }))] }), dismissible && (_jsx("div", { className: 'flex-0 margin-left-10 margin-right--5 margin-top--5 margin-top-0-ls align-self-start align-self-center-ls', children: _jsx(Button, { bsStyle: 'muted', bsSize: 'sm', onClick: onClose, iconName: 'rioglyph-remove', iconOnly: true }) }))] }) }) })) }) }));
-};
-Banner.Page = BannerPage;
-Banner.Icon = BannerPageIcon;
-Banner.Content = BannerPageContent;
-Banner.Actions = BannerPageActions;
-export default Banner;

package/src/components/banner/BannerActions.d.ts

@@ -1,9 +0,0 @@
-import type { PropsWithChildren } from 'react';
-export type BannerActionsProps = {
-    /**
-     * Additional classname added to the wrapper element.
-     */
-    className?: string;
-};
-declare const BannerActions: ({ className, children, ...remainingProps }: PropsWithChildren<BannerActionsProps>) => import("react/jsx-runtime").JSX.Element;
-export default BannerActions;

package/src/components/banner/BannerActions.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-const BannerActions = ({ className = '', children, ...remainingProps }) => {
-    return (_jsx("div", { className: `BannerActions flex-0 btn-toolbar ${className}`, ...remainingProps, children: children }));
-};
-export default BannerActions;

package/src/components/banner/BannerContent.d.ts

@@ -1,25 +0,0 @@
-import type { PropsWithChildren } from 'react';
-type BannerContentProps = Partial<Pick<HTMLDivElement, 'id'>> & {
-    /**
-     * The title for the banner.
-     */
-    title?: string | React.ReactElement;
-    /**
-     * Use this to add the banner call-to-action buttons. Wrap them in a <Banner.Actions> component.
-     */
-    actions?: React.ReactElement;
-    /**
-     * Breakpoint in pixels where the action buttons are placed under the banner text.
-     *
-     * On larger screens, the buttons are next to the text.
-     *
-     * @default 400
-     */
-    minWidthBreakpoint?: number;
-    /**
-     * Additional classname added to the wrapper element.
-     */
-    className?: string;
-};
-declare const BannerContent: (props: PropsWithChildren<BannerContentProps>) => import("react/jsx-runtime").JSX.Element;
-export default BannerContent;

package/src/components/banner/BannerContent.js

@@ -1,16 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import classNames from 'classnames';
-import useResizeObserver from '../../useResizeObserver';
-const DEFAULT_MIN_WIDTH_BREAKPOINT = 400;
-const BannerContent = (props) => {
-    const { title, actions, children, minWidthBreakpoint = DEFAULT_MIN_WIDTH_BREAKPOINT, className = '', ...remainingProps } = props;
-    // Check size of the container for responsive breakpoints
-    const [contentRef, _, { inlineSize }] = useResizeObserver();
-    const containerWidth = inlineSize ?? 0;
-    const contentWithActionClass = classNames('flex-1-1', 'BannerContent', 'display-flex gap-15', containerWidth < minWidthBreakpoint ? 'flex-column' : 'flex-row align-items-center', className);
-    if (actions) {
-        return (_jsxs("div", { ref: contentRef, className: contentWithActionClass, ...remainingProps, children: [_jsxs("div", { className: 'flex-1-1 min-width-100', children: [title && _jsx("div", { className: 'text-size-16 text-medium', children: title }), children] }), actions] }));
-    }
-    return (_jsxs("div", { className: 'flex-1-1', children: [title && _jsx("div", { className: 'text-size-16 text-medium', children: title }), children] }));
-};
-export default BannerContent;

package/src/components/banner/BannerIcon.d.ts

@@ -1,9 +0,0 @@
-import type { PropsWithChildren } from 'react';
-export type BannerIconProps = {
-    /**
-     * Additional classname added to the wrapper element.
-     */
-    className?: string;
-};
-declare const BannerIcon: ({ className, children, ...remainingProps }: PropsWithChildren<BannerIconProps>) => import("react/jsx-runtime").JSX.Element;
-export default BannerIcon;

package/src/components/banner/BannerIcon.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-const BannerIcon = ({ className = '', children, ...remainingProps }) => {
-    return (_jsx("div", { className: `BannerIcon flex-0 margin-x-5 min-width-25 ${className}`, ...remainingProps, children: children }));
-};
-export default BannerIcon;

package/src/components/banner/BannerPage.d.ts

@@ -1,9 +0,0 @@
-import type { PropsWithChildren } from 'react';
-type BannerPageProps = {
-    /**
-     * Additional classname added to the wrapper element.
-     */
-    className?: string;
-};
-declare const BannerPage: ({ className, children, ...remainingProps }: PropsWithChildren<BannerPageProps>) => import("react/jsx-runtime").JSX.Element;
-export default BannerPage;

package/src/components/banner/BannerPage.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-const BannerPage = ({ className = '', children, ...remainingProps }) => {
-    return (_jsx("div", { className: `display-flex align-items-start align-items-center-ls width-100pct gap-15 ${className}`, ...remainingProps, children: children }));
-};
-export default BannerPage;

package/src/components/barList/BarList.d.ts

@@ -1,97 +0,0 @@
-import React from 'react';
-import { type SortDirectionType } from '../../utils/SortUtils';
-export type BarListRow<T> = T & {
-    key?: string;
-    href?: string;
-    value: number;
-    name: string;
-    color?: string;
-    barColor?: string;
-    background?: string;
-};
-/**
- * Props for the BarList component.
- *
- * @template T - The type of the custom data associated with each bar row.
- */
-type BarListProps<T = unknown> = React.HTMLAttributes<HTMLDivElement> & {
-    /**
-     * Array of bar row data to be rendered.
-     */
-    data: BarListRow<T>[];
-    /**
-     * Optional function to format the numeric value displayed on the right side of each bar.
-     * Can return a string or a React element.
-     *
-     * @example
-     * valueFormatter={(value) => `${value}%`}
-     */
-    valueFormatter?: (value: number) => string | React.ReactElement;
-    /**
-     * A reference value used to calculate relative widths.
-     * If not provided, the maximum value in `data` will be used.
-     *
-     * @default max(data.value)
-     */
-    referenceValue?: number;
-    /**
-     * Whether to animate the bar width transitions using Framer Motion.
-     *
-     * @default false
-     */
-    showAnimation?: boolean;
-    /**
-     * Callback fired when a bar is clicked.
-     *
-     * @param payload - The full data object of the clicked bar.
-     */
-    onSelectRow?: (payload: BarListRow<T>) => void;
-    /**
-     * The sort order for the bars. Options are 'asc', 'desc', or 'none'.
-     *
-     * @default 'none'
-     */
-    sortOrder?: SortDirectionType | 'none';
-    /**
-     * Height of each bar row in pixels.
-     *
-     * @default 32
-     */
-    rowHeight?: number;
-    /**
-     * Opacity applied to non-hovered bars (between 0 and 1).
-     *
-     * @default 0.5
-     */
-    opacity?: number;
-    /**
-     * CSS color string used for the active/progress portion of each bar.
-     *
-     * @default 'bg-highlight-light'
-     */
-    barColor?: string;
-    /**
-     * CSS color string used for the text labels.
-     *
-     * @default 'text-color-darker'
-     */
-    labelColor?: string;
-    /**
-     * CSS color string used for the bar background.
-     *
-     * @default 'bg-transparent'
-     */
-    background?: string;
-    /**
-     * Additional className added to the wrapper element.
-     */
-    className?: string;
-};
-declare const BarListInner: {
-    <T>(props: BarListProps<T>, forwardedRef: React.ForwardedRef<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-declare const BarList: <T>(props: BarListProps<T> & {
-    ref?: React.ForwardedRef<HTMLDivElement>;
-}) => ReturnType<typeof BarListInner>;
-export default BarList;

package/src/components/barList/BarList.js

@@ -1,42 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useMemo } from 'react';
-import classNames from 'classnames';
-import { motion } from 'framer-motion';
-import { SortDirection } from '../../utils/SortUtils';
-import { useSortedBars } from './useSortedBars';
-// Animation variants
-const containerVariants = {
-    animate: {
-        transition: {
-            staggerChildren: 0.1,
-        },
-    },
-};
-const barVariants = {
-    initial: { width: 0 },
-    animate: (width) => ({
-        width: `${width}%`,
-        transition: { duration: 0.8, ease: 'easeOut' },
-    }),
-};
-const DEFAULT_ROW_HEIGHT = 25;
-const DEFAULT_OPACITY = 0.5;
-const BarListInner = (props, forwardedRef) => {
-    const { data = [], valueFormatter = value => value.toString(), showAnimation = false, onSelectRow, referenceValue, sortOrder = SortDirection.DESCENDING, barColor = 'bg-highlight-light', labelColor = 'text-color-darker', background = 'bg-transparent', rowHeight = DEFAULT_ROW_HEIGHT, opacity = DEFAULT_OPACITY, className = '', ...remainingProps } = props;
-    const sortedData = useSortedBars(data, sortOrder, item => item.value);
-    const [hoveredIndex, setHoveredIndex] = React.useState(null);
-    const widths = useMemo(() => {
-        const base = referenceValue ?? Math.max(...sortedData.map(item => item.value), 0);
-        return sortedData.map(item => (base === 0 || item.value === 0 ? 0 : Math.max((item.value / base) * 100, 2)));
-    }, [sortedData, referenceValue]);
-    return (_jsxs("div", { ...remainingProps, ref: forwardedRef, className: classNames('display-flex justify-content-between gap-15', className), children: [_jsx(motion.div, { variants: showAnimation ? containerVariants : undefined, initial: 'initial', animate: 'animate', className: 'width-100pct space-y-5', children: sortedData.map((item, index) => {
-                    const width = widths[index];
-                    const itemLabelColor = item.color ?? labelColor;
-                    const itemBarColor = item.barColor ?? barColor;
-                    const itemBackground = item.background ?? background;
-                    return (_jsxs("div", { onMouseEnter: () => setHoveredIndex(index), onMouseLeave: () => setHoveredIndex(null), onClick: () => onSelectRow?.(item), className: classNames('position-relative width-100pct rounded-small', 'transition-all transition-ease-in-out transition-duration-01', itemBackground, onSelectRow && 'cursor-pointer', hoveredIndex === index && 'bg-lightest'), children: [_jsx(motion.div, { custom: width, variants: showAnimation ? barVariants : undefined, className: classNames('display-flex align-items-center rounded-small', 'transition-all transition-ease-in-out transition-duration-01', itemBarColor), style: { height: `${rowHeight}px`, opacity: hoveredIndex === index ? 1 : opacity }, role: 'presentation' }), _jsx("div", { className: 'position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10', children: item.href ? (_jsx("a", { href: item.href, className: itemLabelColor, target: '_blank', rel: 'noreferrer', onClick: event => event.stopPropagation(), children: item.name })) : (_jsx("div", { className: itemLabelColor, children: item.name })) })] }, item.key ?? item.name));
-                }) }), _jsx("div", { className: 'space-y-5', children: sortedData.map(item => (_jsx("div", { className: classNames('display-flex align-items-center justify-content-end'), style: { height: `${rowHeight}px` }, children: _jsx("div", { className: 'text-color-darkest', children: valueFormatter(item.value) }) }, item.key ?? item.name))) })] }));
-};
-BarListInner.displayName = 'BarList';
-const BarList = React.forwardRef(BarListInner);
-export default BarList;

package/src/components/barList/useSortedBars.d.ts

@@ -1,2 +0,0 @@
-import { type SortDirectionType } from '../../utils/SortUtils';
-export declare function useSortedBars<T>(data: T[], sortOrder: SortDirectionType | 'none', getValue: (item: T) => number): T[];

package/src/components/barList/useSortedBars.js

@@ -1,14 +0,0 @@
-import { useMemo } from 'react';
-import { SortDirection } from '../../utils/SortUtils';
-export function useSortedBars(data, sortOrder, getValue) {
-    return useMemo(() => {
-        if (sortOrder === 'none') {
-            return data;
-        }
-        return [...data].sort((a, b) => {
-            const aVal = getValue(a);
-            const bVal = getValue(b);
-            return sortOrder === SortDirection.ASCENDING ? aVal - bVal : bVal - aVal;
-        });
-    }, [data, sortOrder, getValue]);
-}

package/src/components/bottomSheet/BottomSheet.d.ts

@@ -1,68 +0,0 @@
-import { type MutableRefObject, type PropsWithChildren, type ReactElement, type ReactNode } from 'react';
-export type BottomSheetProps = {
-    /**
-     * Set the visibility of the bottom sheet. The component is already mounted and just moved offscreen.
-     * @default false
-     */
-    show: boolean;
-    /**
-     * Callback for when the sheet closes.
-     */
-    onClose?: (isShown: boolean) => void;
-    /**
-     * The width of the bottom sheet. This is useful for desktop when not using the entire screen width.
-     * When no width is given it will take the width of the content and maximum `100%` of the screen.
-     * So it this case you might want to apply a `max-width-xxx` via `className` to control it better.
-     */
-    width?: number | string;
-    /**
-     * The height of the bottom sheet. If no height is given, the height is automatically
-     * calculated from the content.
-     */
-    height?: number | string;
-    /**
-     * The title content shown in the header. If no title is given, the bottom sheet header is not shown.
-     */
-    title?: string | ReactNode;
-    /**
-     * Defines whether or not the close button is shown.
-     * @default true
-     */
-    showCloseButton?: boolean;
-    /**
-     * Defines whether or not the maximize button in the header is shown.
-     * @default false
-     */
-    showMaximizeButton?: boolean;
-    /**
-     * The callback function triggered when the maximize button is clicked and the height changes.
-     */
-    onHeightChange?: VoidFunction;
-    /**
-     * Set to `true` to detach the bottom sheet from the left side and the bottom and create a little offset.
-     * @default false
-     */
-    detach?: boolean;
-    /**
-     * Defines the amount of pixels for the sheet.
-     * @default 15
-     */
-    detachOffset?: number;
-    /**
-     * Set to `true` to render a modal like backdrop to emphasize the bottom sheet.
-     * @default false
-     */
-    hasBackdrop?: boolean;
-    /**
-     * Callback function triggered when the backdrop is clicked. Usually used to close the bottom sheet.
-     */
-    onBackdropClick?: VoidFunction;
-    /** A react ref added to the bottom sheet body. */
-    bodyRef?: MutableRefObject<HTMLDivElement | null>;
-    /** Additional classes to be set on the body element. */
-    bodyClassName?: string;
-    /** Additional classes to be set on the wrapping element. */
-    className?: string;
-};
-declare const BottomSheet: (props: BottomSheetProps & PropsWithChildren) => ReactElement;
-export default BottomSheet;

package/src/components/bottomSheet/BottomSheet.js

@@ -1,54 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState, } from 'react';
-import { createPortal } from 'react-dom';
-import classNames from 'classnames';
-import isFunction from 'lodash/fp/isFunction';
-import { motion } from 'framer-motion';
-import { getOrCreatePortalRoot } from '../../utils/portalRoot';
-const OFFSET_POSITION = -1000;
-const DEFAULT_OFFSET_PX = 15;
-const BottomSheet = (props) => {
-    const { show = false, onClose, width, height, title, detach = false, detachOffset = DEFAULT_OFFSET_PX, hasBackdrop = false, showCloseButton = true, showMaximizeButton = false, onHeightChange = () => { }, bodyRef, bodyClassName, className, children, onBackdropClick = () => { }, ...remainingProps } = props;
-    const [isShown, setIsShown] = useState(show);
-    const [isMaxHeight, setIsMaxHeight] = useState(false);
-    useEffect(() => setIsShown(show), [show]);
-    const modalRoot = getOrCreatePortalRoot();
-    const handleToggle = () => {
-        const newValue = !isShown;
-        if (isFunction(onClose)) {
-            onClose(newValue);
-        }
-        else {
-            setIsShown(newValue);
-        }
-    };
-    const handleBackdropClick = () => {
-        onBackdropClick();
-        handleToggle();
-    };
-    const handleMaximize = () => {
-        const newValue = !isMaxHeight;
-        setIsMaxHeight(newValue);
-        onHeightChange();
-    };
-    const sheetClasses = classNames('bottom-sheet', 'position-fixed left-0', !height && !isMaxHeight && 'height-auto', 'bg-white', 'shadow-hard', detach ? 'rounded' : 'rounded-top-left rounded-top-right', className && className);
-    const sheetBodyClasses = classNames('bottom-sheet-body', 'height-100pct', bodyClassName && bodyClassName);
-    const sheetHeight = isMaxHeight ? window.innerHeight : height;
-    // Note: we always have to kep the body element in the DOM as there might be a ref assigned to it.
-    // Unmounting it will lead to losing the reference and breaking the functionality that is implemented on that ref.
-    // That is the reason why there is no "AnimatePresence" with an "exit" animation here.
-    // Instead, we change the "animate" values.
-    return createPortal(_jsxs(_Fragment, { children: [_jsxs(motion.div, { ...remainingProps, className: sheetClasses, style: {
-                    width,
-                    maxWidth: detach ? `calc(100% - ${DEFAULT_OFFSET_PX * 2}px)` : '100%',
-                    margin: detach ? `${DEFAULT_OFFSET_PX}px` : 0,
-                }, initial: { opacity: 0 }, animate: {
-                    opacity: isShown ? 1 : 0,
-                    y: 0,
-                    bottom: isShown ? 0 : OFFSET_POSITION,
-                    height: isShown ? sheetHeight : 0,
-                }, children: [_jsxs("div", { className: 'bottom-sheet-header', children: [title && (_jsx("div", { className: 'bottom-sheet-title display-flex justify-content-between padding-15 ' +
-                                    'border border-top-none border-left-none border-right-none border-color-lighter', children: _jsx("div", { className: 'text-size-18', children: title }) })), showCloseButton && (_jsx("div", { className: 'bottom-sheet-close position-absolute top-10 right-10', children: _jsx("button", { type: 'button', className: 'btn btn-muted btn-sm btn-icon-only', onClick: handleToggle, children: _jsx("span", { className: 'rioglyph rioglyph-remove' }) }) })), showMaximizeButton && (_jsx("div", { className: 'bottom-sheet-maximize height-30 ' +
-                                    'position-absolute top-5 left-50pct translate-x-50 cursor-pointer', onClick: handleMaximize, children: _jsx("div", { className: 'height-5 width-40 rounded bg-lighter' }) }))] }), _jsx("div", { className: sheetBodyClasses, ref: bodyRef, children: isShown && children })] }), hasBackdrop && isShown && _jsx("div", { className: 'bottom-sheet-backdrop', onClick: handleBackdropClick })] }), modalRoot);
-};
-export default BottomSheet;