@rio-cloud/rio-uikit 0.16.4-beta.8 → 1.0.0

package/components/bottomSheet/TimedBottomSheet.js

@@ -0,0 +1,77 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import noop from 'lodash/fp/noop';
+import BottomSheet from './BottomSheet';
+import useTimeout from '../../hooks/useTimeout';
+import useLocalStorage from '../../useLocalStorage';
+const DEFAULT_SHOW_AFTER = 0; // immediately after mount
+const DEFAULT_HIDE_AFTER = 3600000; // after 1 hour
+const sanitizeFeatureName = (value) => `${value.charAt(0).toUpperCase()}${value.slice(1)}`.replaceAll(' ', '');
+/**
+ * A wrapper component for the BottomSheet that allows to control it's visibility via timers and to use
+ * the localStorage to save user interaction.
+ *
+ * Don't forget to cleanup the localStorage for the user when removing a feature
+ * by setting "cleanupLocalStorage" to "true" and deploy it like this.
+ * The cleanup will remove the localStorage flag on mount and will not show the bottom sheet.
+ *
+ * @example
+    const [isDismissed, setIsDismissed] = useState(false);
+
+    const handleClose = () => { // If needed trigger Google Analytics here };
+
+    return (
+        <TimedBottomSheet
+            dismissed={isDismissed}
+            featureName='dummyBottomSheet'
+            showAfter={1_000}
+            hideAfter={15_000}
+            className='max-width-500'
+            onClose={handleClose}
+        >
+            <div className='display-flex align-items-center gap-20'>
+                Lorem ipsum dolor sit amet
+                <Button bsStyle={Button.PRIMARY} onClick={() => setIsDismissed(true)}>
+                    Got it
+                </Button>
+            </div>
+        </TimedBottomSheet>
+    );
+ */
+export const TimedBottomSheet = (props) => {
+    const { dismissed = false, featureName, showAfter = DEFAULT_SHOW_AFTER, hideAfter = DEFAULT_HIDE_AFTER, alwaysOn = false, showCloseButton = true, width, cleanupLocalStorage = false, onClose = noop, bodyClassName = 'padding-25 margin-right-25', localStoragePrefix = '', className, children } = props, remainingProps = __rest(props, ["dismissed", "featureName", "showAfter", "hideAfter", "alwaysOn", "showCloseButton", "width", "cleanupLocalStorage", "onClose", "bodyClassName", "localStoragePrefix", "className", "children"]);
+    const [showBottomSheet, setShowBottomSheet] = useState(false);
+    const [isHiddenByUser, setIsHiddenByUser, removeIsHiddenFlag] = useLocalStorage(`${localStoragePrefix}hide${sanitizeFeatureName(featureName)}`, false);
+    // In case the visibility is controlled by the outside, means the user clicked on the
+    // content of the bottom sheet, close the sheet and set the localStorage flag for not
+    // showing it again
+    const [prevDismissed, setPrevDismissed] = useState(dismissed);
+    if (dismissed && dismissed !== prevDismissed) {
+        setPrevDismissed(dismissed);
+        setIsHiddenByUser(true);
+        setShowBottomSheet(false);
+    }
+    // Show the bottom sheet automatically after a given amount of time
+    useTimeout(() => {
+        if (!dismissed && !isHiddenByUser && !cleanupLocalStorage) {
+            setShowBottomSheet(true);
+        }
+    }, showAfter);
+    // Hide the bottom sheet automatically after a given amount of time
+    useTimeout(() => setShowBottomSheet(alwaysOn ? true : false), showAfter + hideAfter);
+    // Cleanup functionality. The cleanup will remove the localStorage flag on mount
+    // and will not show the bottom sheet.
+    useEffect(() => {
+        if (cleanupLocalStorage) {
+            removeIsHiddenFlag();
+        }
+    }, []);
+    const handleCloseBottomSheet = () => {
+        setShowBottomSheet(false);
+        setIsHiddenByUser(true);
+        onClose();
+    };
+    return (_jsx("div", Object.assign({}, remainingProps, { children: _jsx(BottomSheet, Object.assign({ show: showBottomSheet, width: width, detach: true, showCloseButton: showCloseButton, onClose: handleCloseBottomSheet, className: className, bodyClassName: bodyClassName }, { children: children })) })));
+};
+export default TimedBottomSheet;

package/components/button/Button.d.ts

@@ -1,6 +1,6 @@
-import { type PropsWithChildren, type SyntheticEvent } from 'react';
+import React, { type ForwardRefExoticComponent, type HTMLProps, type PropsWithChildren, type RefAttributes } from 'react';
 import type { ObjectValues } from '../../utils/ObjectValues';
-declare const STYLES_MAP: {
+export declare const STYLES_MAP: {
     readonly DEFAULT: "default";
     readonly PRIMARY: "primary";
     readonly SECONDARY: "secondary";
@@ -10,22 +10,22 @@ declare const STYLES_MAP: {
     readonly SUCCESS: "success";
     readonly MUTED: "muted";
 };
-type STYLE = ObjectValues<typeof STYLES_MAP>;
-declare const VARIANTS_MAP: {
+export type BUTTON_STYLE = ObjectValues<typeof STYLES_MAP>;
+export declare const VARIANTS_MAP: {
     readonly VARIANT_LINK: "link";
     readonly VARIANT_LINK_INLINE: "link-inline";
     readonly VARIANT_OUTLINE: "outline";
     readonly VARIANT_ACTION: "action";
 };
-type VARIANT = ObjectValues<typeof VARIANTS_MAP>;
-declare const SIZES_MAP: {
+export type BUTTON_VARIANT = ObjectValues<typeof VARIANTS_MAP>;
+export declare const SIZES_MAP: {
     readonly XS: "xs";
     readonly SM: "sm";
     readonly MD: "md";
     readonly LG: "lg";
 };
-type SIZE = ObjectValues<typeof SIZES_MAP>;
-type RegularButtonProps = {
+export type BUTTON_SIZE = ObjectValues<typeof SIZES_MAP>;
+type RegularButton = {
     /**
      * Use the button as a toggle button. The toggle state can be controlled via the `active` prop.
      * @default false
@@ -35,9 +35,9 @@ type RegularButtonProps = {
      * Callback function triggered when clicking the button.
      * @param event The MouseEvent that triggered the click.
      */
-    onClick?: (event: SyntheticEvent<HTMLButtonElement, MouseEvent>) => void;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 };
-type ToggleButtonProps = {
+type ToggleButton = {
     /**
      * Use the button as a toggle button. The toggle state can be controlled via the `active` prop.
      * @default false
@@ -49,23 +49,39 @@ type ToggleButtonProps = {
      */
     onClick?: (value: boolean) => void;
 };
-export type ButtonProps = {
+export type ButtonProps = Omit<HTMLProps<HTMLButtonElement>, 'type' | 'onClick'> & {
+    /**
+     * Whether the button should be disabled.
+     *
+     * @default false
+     */
+    disabled?: boolean;
     /**
      * Set the button toggled. Should be used in combination with "asToggle" prop.
      * @default false
      */
     active?: boolean;
     /**
-     * Whether the button should be disabled.
-     *
-     * @default false
+     * Defines the type of the button. This may be used for form submit buttons.
+     * @default 'button'
      */
-    disabled?: boolean;
+    type?: 'button' | 'submit';
     /**
      * Use when the content of the button is an icon only to adapt the button spacing accordingly.
      * @default false
      */
     iconOnly?: boolean;
+    /**
+     * Adds right side spacing for an icon. This should be used when having navigation buttons
+     * that use an icon on the right side.
+     * @default false
+     */
+    iconRight?: boolean;
+    /**
+     * Optional rio-glyph icon name that comes in handy for icon only buttons for not adding
+     * a span tag for the icon which reduces boilerplate code.
+     */
+    iconName?: string;
     /**
      * Defines whether the button text break into multiple lines when the button space exceeds.
      *
@@ -82,41 +98,47 @@ export type ButtonProps = {
      * Sets the button style.
      * @default "default"
      */
-    bsStyle?: STYLE;
+    bsStyle?: BUTTON_STYLE;
     /**
      * Sets the button size.
      */
-    bsSize?: SIZE;
+    bsSize?: BUTTON_SIZE;
     /**
      * Sets the button variant.
      */
-    variant?: VARIANT;
+    variant?: BUTTON_VARIANT;
     /**
      * Whether the "ripple" effect should be suppressed on this button.
      */
     noRippleEffect?: boolean;
+    /**
+     * Number of the index used for keyboard support.
+     * @default 0
+     */
+    tabIndex?: number;
     /**
      * Additional classes to be set on the button element.
      */
     className?: string;
-} & (RegularButtonProps | ToggleButtonProps);
-declare const Button: {
-    (props: PropsWithChildren<ButtonProps>): import("react/jsx-runtime").JSX.Element;
-    DEFAULT: "default";
-    PRIMARY: "primary";
-    SECONDARY: "secondary";
-    INFO: "info";
-    WARNING: "warning";
-    DANGER: "danger";
-    SUCCESS: "success";
-    MUTED: "muted";
-    VARIANT_LINK: "link";
-    VARIANT_LINK_INLINE: "link-inline";
-    VARIANT_OUTLINE: "outline";
-    VARIANT_ACTION: "action";
-    XS: "xs";
-    SM: "sm";
-    MD: "md";
-    LG: "lg";
+} & (RegularButton | ToggleButton);
+type Props = PropsWithChildren<ButtonProps>;
+type ButtonType = ForwardRefExoticComponent<Props & RefAttributes<HTMLButtonElement>> & {
+    DEFAULT: 'default';
+    PRIMARY: 'primary';
+    SECONDARY: 'secondary';
+    INFO: 'info';
+    WARNING: 'warning';
+    DANGER: 'danger';
+    SUCCESS: 'success';
+    MUTED: 'muted';
+    VARIANT_LINK: 'link';
+    VARIANT_LINK_INLINE: 'link-inline';
+    VARIANT_OUTLINE: 'outline';
+    VARIANT_ACTION: 'action';
+    XS: 'xs';
+    SM: 'sm';
+    MD: 'md';
+    LG: 'lg';
 };
+declare const Button: ButtonType;
 export default Button;

package/components/button/Button.js

@@ -1,10 +1,11 @@
 import { __rest } from "tslib";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useRef, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useRef, useState, } from 'react';
 import classNames from 'classnames';
 import noop from 'lodash/fp/noop';
 import { createButtonRipple } from '../../utils/buttonEffect';
-const STYLES_MAP = {
+import useMergeRefs from '../../hooks/useMergeRefs';
+export const STYLES_MAP = {
     DEFAULT: 'default',
     PRIMARY: 'primary',
     SECONDARY: 'secondary',
@@ -14,23 +15,25 @@ const STYLES_MAP = {
     SUCCESS: 'success',
     MUTED: 'muted',
 };
-const VARIANTS_MAP = {
+export const VARIANTS_MAP = {
     VARIANT_LINK: 'link',
     VARIANT_LINK_INLINE: 'link-inline',
     VARIANT_OUTLINE: 'outline',
     VARIANT_ACTION: 'action',
 };
-const SIZES_MAP = {
+export const SIZES_MAP = {
     XS: 'xs',
     SM: 'sm',
     MD: 'md',
     LG: 'lg',
 };
-const Button = (props) => {
-    const { active = false, disabled = false, asToggle = false, onClick = noop, bsStyle = 'default', bsSize, variant, iconOnly = false, multiline = false, block = false, className = '', noRippleEffect = false, children } = props, remainingProps = __rest(props, ["active", "disabled", "asToggle", "onClick", "bsStyle", "bsSize", "variant", "iconOnly", "multiline", "block", "className", "noRippleEffect", "children"]);
+const Button = forwardRef((props, ref) => {
+    const { active = false, disabled = false, asToggle = false, onClick = noop, bsStyle = 'default', bsSize, variant, iconOnly = false, iconName, iconRight = false, multiline = false, block = false, className = '', noRippleEffect = false, type = 'button', tabIndex = 0, children } = props, remainingProps = __rest(props, ["active", "disabled", "asToggle", "onClick", "bsStyle", "bsSize", "variant", "iconOnly", "iconName", "iconRight", "multiline", "block", "className", "noRippleEffect", "type", "tabIndex", "children"]);
     const [isToggled, setIsToggled] = useState(active);
     const btnRef = useRef(null);
+    const buttonRef = useMergeRefs(btnRef, ref);
     // Update internal toggle state when used as controlled component and outside toggle state changes
+    // Note, using the usePrevious hook resulted in an endless loop, hence the useState here
     const [previousActive, setPreviousActive] = useState(active);
     if (active !== previousActive) {
         setIsToggled(active);
@@ -54,26 +57,10 @@ const Button = (props) => {
             onClick(event);
         }
     };
-    const buttonClassNames = classNames('btn', `btn-${bsStyle}`, variant === Button.VARIANT_LINK && 'btn-link', variant === Button.VARIANT_LINK_INLINE && 'btn-link btn-link-inline', variant === Button.VARIANT_OUTLINE && 'btn-outline', variant === Button.VARIANT_ACTION && 'btn-action', bsSize && `btn-${bsSize}`, asToggle && 'btn-toggle', isToggled && 'active', iconOnly && 'btn-icon-only', disabled && 'disabled', multiline && 'btn-multiline', block && 'btn-block', 'btn-component', className);
-    return (_jsx("button", Object.assign({ ref: btnRef, type: 'button' }, remainingProps, { className: buttonClassNames, onClick: handleClick }, { children: children })));
-};
-// Button styles
-Button.DEFAULT = STYLES_MAP.DEFAULT;
-Button.PRIMARY = STYLES_MAP.PRIMARY;
-Button.SECONDARY = STYLES_MAP.SECONDARY;
-Button.INFO = STYLES_MAP.INFO;
-Button.WARNING = STYLES_MAP.WARNING;
-Button.DANGER = STYLES_MAP.DANGER;
-Button.SUCCESS = STYLES_MAP.SUCCESS;
-Button.MUTED = STYLES_MAP.MUTED;
-// Button Type
-Button.VARIANT_LINK = VARIANTS_MAP.VARIANT_LINK;
-Button.VARIANT_LINK_INLINE = VARIANTS_MAP.VARIANT_LINK_INLINE;
-Button.VARIANT_OUTLINE = VARIANTS_MAP.VARIANT_OUTLINE;
-Button.VARIANT_ACTION = VARIANTS_MAP.VARIANT_ACTION;
-// Button Size
-Button.XS = SIZES_MAP.XS;
-Button.SM = SIZES_MAP.SM;
-Button.MD = SIZES_MAP.MD;
-Button.LG = SIZES_MAP.LG;
+    const buttonClassNames = classNames('btn', `btn-${bsStyle}`, variant === VARIANTS_MAP.VARIANT_LINK && 'btn-link', variant === VARIANTS_MAP.VARIANT_LINK_INLINE && 'btn-link btn-link-inline', variant === VARIANTS_MAP.VARIANT_OUTLINE && 'btn-outline', variant === VARIANTS_MAP.VARIANT_ACTION && 'btn-action', bsSize && `btn-${bsSize}`, asToggle && 'btn-toggle', isToggled && 'active', iconOnly && 'btn-icon-only', iconRight && 'btn-icon-right', multiline && 'btn-multiline', block && 'btn-block', 'btn-component', className);
+    return (_jsxs("button", Object.assign({ ref: buttonRef, type: type }, remainingProps, { className: buttonClassNames, onClick: handleClick, disabled: disabled, tabIndex: tabIndex }, { children: [iconName && _jsx("span", { className: `rioglyph ${iconName}` }), children] })));
+});
+Object.assign(Button, STYLES_MAP);
+Object.assign(Button, VARIANTS_MAP);
+Object.assign(Button, SIZES_MAP);
 export default Button;

package/components/button/ToggleButton.d.ts

@@ -1,6 +1,10 @@
 import { type PropsWithChildren } from 'react';
 import { type ButtonProps } from './Button';
-export type ToggleButtonProps = Omit<ButtonProps, 'asToggle' | 'onClick'> & {
+export type ToggleButtonProps = Omit<ButtonProps, 'onClick'> & {
+    /**
+     * Callback function triggered when clicking the button.
+     * @param value The new value of the toggle button.
+     */
     onClick?: (value: boolean) => void;
 };
 declare const ToggleButton: (props: PropsWithChildren<ToggleButtonProps>) => import("react/jsx-runtime").JSX.Element;

package/components/button/ToggleButton.js

@@ -2,5 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // @ts-ignore-next-line importsNotUsedAsValues
 import 'react';
 import Button from './Button';
+// @ts-ignore - the Button throws TS error due to refs that may be checked at a later point in time
 const ToggleButton = (props) => _jsx(Button, Object.assign({}, props, { asToggle: true }));
 export default ToggleButton;

package/components/calendarStripe/CalendarStripe.d.ts

@@ -1,3 +1,67 @@
+import React from 'react';
+export type CalendarStripeProps = {
+    /**
+     * The minimum width in pixel of a single day column
+     *
+     * This value determines how many days are shown per page depending on the parent width.
+     *
+     * @default 200
+     */
+    minDayWith?: number;
+    /**
+     * The minimum amount of days that should be shown per page.
+     *
+     * @default 1
+     */
+    minDays?: number;
+    /**
+     * The maximum amount of days that should be shown per page.
+     *
+     * @default 7
+     */
+    maxDays?: number;
+    /**
+     * @deprecated Please use `renderDay` instead.
+     */
+    render?: React.ReactNode;
+    /**
+     * A function that renders each individual day to be displayed.
+     *
+     * @param date The day to render
+     */
+    renderDay?: (date: Date) => React.JSX.Element;
+    /**
+     * Defines whether the days for the weekends are included.
+     *
+     * @default false
+     */
+    skipWeekends?: boolean;
+    /**
+     * The date of the first day that are rendered.
+     *
+     * @default the current date
+     */
+    startDate?: Date;
+    /**
+     * Callback function for when the next button is clicked.
+     *
+     * @param newStartDate Date value that is now the start of the stripe.
+     */
+    onNextClick?: (newStartDate: Date) => void;
+    /**
+     * Callback function for when the previous button is clicked.
+     *
+     * @param newStartDate Date value that is now the start of the stripe.
+     */
+    onPreviousClick?: (newStartDate: Date) => void;
+    /**
+     * Additional classes set to the navigation buttons.
+     */
+    buttonClassName?: string;
+    /**
+     * Additional classes set to the calendar element.
+     */
+    className?: string;
+};
+declare const CalendarStripe: React.ForwardRefExoticComponent<CalendarStripeProps & React.RefAttributes<HTMLDivElement>>;
 export default CalendarStripe;
-declare const CalendarStripe: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from "react";

package/components/calendarStripe/CalendarStripe.js

@@ -1,8 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useLayoutEffect, useState, useRef, forwardRef } from 'react';
-import PropTypes from 'prop-types';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { forwardRef, useLayoutEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { AnimatePresence, motion } from 'framer-motion';
+import noop from 'lodash/noop';
 import useAfterMount from '../../hooks/useAfterMount';
 import useElementSize from '../../hooks/useElementSize';
 import usePrevious from '../../hooks/usePrevious';
@@ -14,34 +14,34 @@ const ANIMATION_NEXT = 'page';
 const ANIMATION_BACK = 'pageBack';
 const ITEM_NAME = 'ColumnItem';
 const variants = {
-    pageEnter: pageDirection => {
-        return {
-            x: pageDirection === ANIMATION_NEXT ? '60%' : '-60%',
-            opacity: 0,
-        };
-    },
-    pageCenter: () => {
-        return {
-            x: 0,
-            opacity: 1,
-        };
-    },
+    pageEnter: (pageDirection) => ({
+        x: pageDirection === ANIMATION_NEXT ? '60%' : '-60%',
+        opacity: 0,
+    }),
+    pageCenter: () => ({ x: 0, opacity: 1 }),
 };
-const getDateString = date => date.toISOString().split('T').at(0);
-const getFirstColumnItem = node => {
+const getDateString = (date) => date.toISOString().split('T').at(0);
+const getFirstColumnItem = (node) => {
     if ([...node.classList].includes(ITEM_NAME)) {
         return node;
     }
     return getFirstColumnItem(node.children[0]);
 };
 const CalendarStripe = forwardRef((props, ref) => {
-    const { minDayWith = DEFAULT_MIN_WITH, minDays = DEFAULT_MIN_DAYS, maxDays = DEFAULT_MAX_DAYS, render, skipWeekends, startDate = new Date(), onNextClick, onPreviousClick, buttonClassName, className, } = props;
+    const { minDayWith = DEFAULT_MIN_WITH, minDays = DEFAULT_MIN_DAYS, maxDays = DEFAULT_MAX_DAYS, render, renderDay, skipWeekends = false, startDate = new Date(), onNextClick = noop, onPreviousClick = noop, buttonClassName = '', className = '', } = props;
+    if (render) {
+        console.warn('CalendarStripe has set the "render" prop deprecated. This will be removed in the upcoming releases,' +
+            ' Please use the "renderDay" prop instead.');
+    }
+    if (!render && !renderDay) {
+        console.error('CalendarStripe component is missing the required "renderDay" prop');
+    }
     const [firstDate, setFirstDate] = useState(startDate);
     const [amountOfDaysToShow, setAmountOfDaysToShow] = useState(1);
     const [enableInitialAnimation, setEnableInitialAnimation] = useState(false);
     // The base for reacting on changing width of the wrapping element.
     // It uses a ResizeObserver under the hood.
-    const columnWrapperRef = useRef();
+    const columnWrapperRef = useRef(null);
     const [columnWrapperWidth] = useElementSize(columnWrapperRef);
     const previous = usePrevious(getDateString(firstDate));
     const animationDirection = getDateString(firstDate) > previous ? ANIMATION_NEXT : ANIMATION_BACK;
@@ -53,7 +53,7 @@ const CalendarStripe = forwardRef((props, ref) => {
     }
     useAfterMount(() => {
         setEnableInitialAnimation(true);
-    });
+    }, []);
     useLayoutEffect(() => {
         if (!columnWrapperRef.current) {
             return;
@@ -116,30 +116,6 @@ const CalendarStripe = forwardRef((props, ref) => {
     }
     const wrapperClassName = classNames('CalenderStripe', 'display-flex', 'align-items-center', 'overflow-hidden', 'bg-white', 'border', 'rounded', className);
     const baseButtonClassName = classNames('align-items-center', 'align-self-stretch', 'display-flex', 'hover-scale-105', 'hover-text-color-darkest', 'padding-10', 'cursor-pointer', 'text-color-darker', 'text-size-12', buttonClassName);
-    return (_jsxs("div", Object.assign({ ref: ref, className: wrapperClassName }, { children: [_jsx("div", Object.assign({ className: baseButtonClassName, onClick: handlePrev }, { children: _jsx("span", { className: 'rioglyph rioglyph-chevron-left' }) })), _jsx("div", Object.assign({ className: 'flex-1-1 overflow-hidden', ref: columnWrapperRef }, { children: _jsx(AnimatePresence, Object.assign({ exitBeforeEnter: true, custom: animationDirection }, { children: _jsx(motion.div, Object.assign({ variants: variants, initial: enableInitialAnimation ? 'pageEnter' : false, animate: 'pageCenter', custom: animationDirection, transition: { duration: ANIMATION_DURATION } }, { children: _jsx("div", Object.assign({ className: 'ColumnWrapper display-flex space-x--1 user-select-none' }, { children: dates.map(date => (_jsx("div", Object.assign({ className: `${ITEM_NAME} flex-1-1` }, { children: React.cloneElement(render, {
-                                    date,
-                                }) }), `${getDateString(date)}`))) })) }), getDateString(firstDate)) })) })), _jsx("div", Object.assign({ className: baseButtonClassName, onClick: handleNext }, { children: _jsx("span", { className: 'rioglyph rioglyph-chevron-right' }) }))] })));
+    return (_jsxs("div", Object.assign({ ref: ref, className: wrapperClassName }, { children: [_jsx("div", Object.assign({ className: baseButtonClassName, onClick: handlePrev }, { children: _jsx("span", { className: 'rioglyph rioglyph-chevron-left' }) })), _jsx("div", Object.assign({ className: 'flex-1-1 overflow-hidden', ref: columnWrapperRef }, { children: _jsx(AnimatePresence, Object.assign({ exitBeforeEnter: true, custom: animationDirection }, { children: _jsx(motion.div, Object.assign({ variants: variants, initial: enableInitialAnimation ? 'pageEnter' : false, animate: 'pageCenter', custom: animationDirection, transition: { duration: ANIMATION_DURATION } }, { children: _jsx("div", Object.assign({ className: 'ColumnWrapper display-flex space-x--1 user-select-none' }, { children: dates.map(date => (_jsxs("div", Object.assign({ className: `${ITEM_NAME} flex-1-1` }, { children: [renderDay ? renderDay(date) : null, render && React.cloneElement(_jsx(_Fragment, { children: render }), { date })] }), `${getDateString(date)}`))) })) }), getDateString(firstDate)) })) })), _jsx("div", Object.assign({ className: baseButtonClassName, onClick: handleNext }, { children: _jsx("span", { className: 'rioglyph rioglyph-chevron-right' }) }))] })));
 });
-CalendarStripe.defaultProps = {
-    minDayWith: DEFAULT_MIN_WITH,
-    minDays: DEFAULT_MIN_DAYS,
-    maxDays: DEFAULT_MAX_DAYS,
-    skipWeekends: false,
-    onNextClick: () => { },
-    onPreviousClick: () => { },
-    buttonClassName: '',
-    className: '',
-};
-CalendarStripe.propTypes = {
-    minDayWith: PropTypes.number,
-    minDays: PropTypes.number,
-    maxDays: PropTypes.number,
-    render: PropTypes.node.isRequired,
-    skipWeekends: PropTypes.bool,
-    startDate: PropTypes.instanceOf(Date),
-    onNextClick: PropTypes.func,
-    onPreviousClick: PropTypes.func,
-    buttonClassName: PropTypes.string,
-    className: PropTypes.string,
-};
 export default CalendarStripe;

package/components/carousel/Carousel.d.ts

@@ -1,2 +1,8 @@
-export { _Carousel as default };
-import { default as _Carousel } from "react-bootstrap/Carousel";
+declare const Carousel: import("react-bootstrap/esm/helpers").BsPrefixRefForwardingComponent<"div", import("react-bootstrap/Carousel").CarouselProps> & {
+    Caption: import("react-bootstrap/esm/helpers").BsPrefixRefForwardingComponent<"div", unknown>;
+    Item: import("react-bootstrap/esm/CarouselItem").default;
+} & {
+    PREV: 'prev';
+    NEXT: 'next';
+};
+export default Carousel;

package/components/carousel/Carousel.js

@@ -1,9 +1,5 @@
-import React from 'react';
-// import { default as BSCarousel } from 'react-bootstrap/Carousel';
-// import { default as _Carousel } from 'react-bootstrap/Carousel';
-// const Carousel = props => {
-//     return <_Carousel {...props} />;
-// };
-// export default Carousel;
-import { default as _Carousel } from 'react-bootstrap/Carousel';
-export { _Carousel as default };
+import OriginalCarousel from 'react-bootstrap/Carousel';
+const Carousel = OriginalCarousel;
+Carousel.PREV = 'prev';
+Carousel.NEXT = 'next';
+export default Carousel;

package/components/charts/Area.d.ts

@@ -1,13 +1,7 @@
+/// <reference types="react" />
+import type { AreaProps as RechartsAreaProps } from 'recharts';
+export type AreaProps = Omit<RechartsAreaProps, 'ref'> & {
+    strokeColor?: string;
+};
+declare const Area: React.FC<AreaProps>;
 export default Area;
-declare function Area(): null;
-declare namespace Area {
-    namespace defaultProps {
-        const dataKey: string;
-        const dataUnit: string;
-        const strokeColor: string;
-        const gradientId: string;
-        const legendType: string;
-        const type: string;
-        const isAnimationActive: boolean;
-    }
-}

package/components/charts/Area.js

@@ -1,9 +1,8 @@
 const Area = () => null;
 Area.defaultProps = {
     dataKey: 'value',
-    dataUnit: '',
+    unit: '',
     strokeColor: 'color-coldplay-fountain',
-    gradientId: 'areaGradient',
     legendType: 'square',
     type: 'monotone',
     isAnimationActive: true,

package/components/charts/AreaChart.d.ts

@@ -1,17 +1,30 @@
+import React from 'react';
+import { AreaChart as RechartsAreaChart, type XAxisProps, type YAxisProps } from 'recharts';
+import { type AreaGradientProps } from './AreaGradient';
+import { type ChartTooltipProps } from './ChartTooltip';
+import { type LegendProps } from './Legend';
+import type { AreaProps } from './Area';
+import type { GridProps } from './ChartGrid';
+import type { ResponsiveContainerProps } from './ResponsiveContainer';
+type RechartsAreaChartProps = React.ComponentProps<typeof RechartsAreaChart>;
+export type AreaChartProps<T extends object> = Omit<RechartsAreaChartProps, 'data'> & {
+    width?: number;
+    height?: number;
+    data: T[];
+    dataUnit?: string;
+    dataKey?: string | number | ((obj: T) => any);
+    gradients?: React.ReactElement<AreaGradientProps>[];
+    areas: React.ReactElement<AreaProps>[];
+    xAxisOptions?: XAxisProps;
+    yAxisOptions?: YAxisProps;
+    gridOptions?: GridProps;
+    containerOptions?: ResponsiveContainerProps;
+    showXAxis?: boolean;
+    showYAxis?: boolean;
+    showGrid?: boolean;
+    legend?: React.ReactElement<LegendProps> | boolean;
+    tooltip?: React.ReactElement<ChartTooltipProps> | boolean;
+    brush?: boolean;
+};
+declare const AreaChart: <T extends object>(props: AreaChartProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default AreaChart;
-declare function AreaChart(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace AreaChart {
-    namespace defaultProps {
-        const width: number;
-        const height: number;
-        const data: never[];
-        const dataUnit: string;
-        const gradients: never[];
-        const areas: never[];
-        const showXAxis: boolean;
-        const showYAxis: boolean;
-        const showGrid: boolean;
-        const brush: boolean;
-        const tooltip: import("react/jsx-runtime").JSX.Element;
-    }
-}