@rio-cloud/rio-uikit 1.12.0 → 1.13.1

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

@@ -1,98 +0,0 @@
-import { type PropsWithChildren } from 'react';
-type TimedBottomSheetProps = {
-    /**
-     * The `dismissed` flag can be used to tell this component that the user has clicked on the content
-     * of the component like a button or a link. In this case, the bottom sheet will store a flag in the
-     * localStorage to hide the bottom sheet for the next time and it will close the sheet right away.
-     */
-    dismissed?: boolean;
-    /**
-     * The `featureName` prop is used to name the localStorage flag that is used to control the visibility.
-     * It should be unique to avoid conflicts with other timed bottom sheets.
-     */
-    featureName: string;
-    /**
-     * Defines the time in milliseconds when the bottom sheet shall be shown. Default value is 0 to show it right away.
-     *
-     * @default 0
-     */
-    showAfter?: number;
-    /**
-     * Defines the time in milliseconds when the bottom sheet hides itself automatically. Default value is 3_600_000
-     * to hide it after 1 hour. In this case, the localStorage flag is not set and the bottom sheet will be shown
-     * on the next page load.
-     *
-     * @default 3_600_000
-     */
-    hideAfter?: number;
-    /**
-     * With this enabled, the BottomSheet will not hide automatically.
-     * @default false
-     */
-    alwaysOn?: boolean;
-    /**
-     * Enables or disabled the close button.
-     * @default true
-     */
-    showCloseButton?: boolean;
-    /**
-     * Optional width of the bottom sheet. Alternatively, you can set a `max-width-xxx` via className instead.
-     */
-    width?: number;
-    /**
-     * Flag to allow to remove the localStorage flag again once the component is not needed anymore.
-     */
-    cleanupLocalStorage?: boolean;
-    /**
-     * A prefix that will be used for the local storage flag to store whether the bottom sheet should be hidden.
-     *
-     * Use this prefix for your service name for instance.
-     */
-    localStoragePrefix?: string;
-    /**
-     * Callback function that gets triggered when the user closed the bottom sheet with the close button.
-     * @returns void
-     */
-    onClose?: () => void;
-    /**
-     * Optional className to be set on the body.
-     */
-    bodyClassName?: string;
-    /**
-     * Optional className to be set on the component. Use this to define a max-width value.
-     */
-    className?: string;
-};
-/**
- * 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 declare const TimedBottomSheet: (props: PropsWithChildren<TimedBottomSheetProps>) => import("react/jsx-runtime").JSX.Element;
-export default TimedBottomSheet;

package/src/components/bottomSheet/TimedBottomSheet.js

@@ -1,76 +0,0 @@
-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 = 3_600_000; // 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, ...remainingProps } = props;
-    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", { ...remainingProps, children: _jsx(BottomSheet, { show: showBottomSheet, width: width, detach: true, showCloseButton: showCloseButton, onClose: handleCloseBottomSheet, className: className, bodyClassName: bodyClassName, children: children }) }));
-};
-export default TimedBottomSheet;

package/src/components/button/Button.d.ts

@@ -1,146 +0,0 @@
-import React, { type ForwardRefExoticComponent, type HTMLProps, type PropsWithChildren, type RefAttributes } from 'react';
-import type { ObjectValues } from '../../utils/ObjectValues';
-export declare const STYLES_MAP: {
-    readonly DEFAULT: "default";
-    readonly PRIMARY: "primary";
-    readonly SECONDARY: "secondary";
-    readonly INFO: "info";
-    readonly WARNING: "warning";
-    readonly DANGER: "danger";
-    readonly SUCCESS: "success";
-    readonly MUTED: "muted";
-    readonly MUTED_FILLED: "muted-filled";
-};
-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";
-};
-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";
-};
-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
-     */
-    asToggle?: false;
-    /**
-     * Callback function triggered when clicking the button.
-     * @param event The MouseEvent that triggered the click.
-     */
-    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-};
-type ToggleButton = {
-    /**
-     * Use the button as a toggle button. The toggle state can be controlled via the `active` prop.
-     * @default false
-     */
-    asToggle: true;
-    /**
-     * Callback function triggered when clicking the button.
-     * @param value The new value of the toggle button.
-     */
-    onClick?: (value: boolean) => void;
-};
-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;
-    /**
-     * Defines the type of the button. This may be used for form submit buttons.
-     * @default 'button'
-     */
-    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.
-     *
-     * Multiline buttons should be used as exception only.
-     * @default false
-     */
-    multiline?: boolean;
-    /**
-     * Defines whether the button takes up the full width of the parent element.
-     * @default false
-     */
-    block?: boolean;
-    /**
-     * Sets the button style.
-     * @default "default"
-     */
-    bsStyle?: BUTTON_STYLE;
-    /**
-     * Sets the button size.
-     */
-    bsSize?: BUTTON_SIZE;
-    /**
-     * Sets the button 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;
-} & (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';
-    MUTED_FILLED: 'muted-filled';
-    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/src/components/button/Button.js

@@ -1,65 +0,0 @@
-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';
-import useMergeRefs from '../../hooks/useMergeRefs';
-export const STYLES_MAP = {
-    DEFAULT: 'default',
-    PRIMARY: 'primary',
-    SECONDARY: 'secondary',
-    INFO: 'info',
-    WARNING: 'warning',
-    DANGER: 'danger',
-    SUCCESS: 'success',
-    MUTED: 'muted',
-    MUTED_FILLED: 'muted-filled',
-};
-export const VARIANTS_MAP = {
-    VARIANT_LINK: 'link',
-    VARIANT_LINK_INLINE: 'link-inline',
-    VARIANT_OUTLINE: 'outline',
-    VARIANT_ACTION: 'action',
-};
-export const SIZES_MAP = {
-    XS: 'xs',
-    SM: 'sm',
-    MD: 'md',
-    LG: 'lg',
-};
-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, ...remainingProps } = props;
-    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);
-        setPreviousActive(active);
-    }
-    const handleClick = (event) => {
-        if (!noRippleEffect) {
-            createButtonRipple(event.nativeEvent, event.currentTarget);
-        }
-        if (asToggle) {
-            // Intercept click handler only for toggle button to update internal state and blur after click
-            const newIsToggled = !isToggled;
-            setIsToggled(newIsToggled);
-            if (newIsToggled) {
-                btnRef.current?.blur();
-            }
-            onClick(newIsToggled);
-        }
-        else {
-            onClick(event);
-        }
-    };
-    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", { 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/src/components/button/ButtonToolbar.d.ts

@@ -1,13 +0,0 @@
-import { type ComponentProps, type PropsWithChildren } from 'react';
-export type ButtonToolbarProps = ComponentProps<'div'> & {
-    /**
-     * Align buttons to a defined side or set them apart.
-     */
-    alignment?: 'left' | 'right' | 'center' | 'space-between';
-    /**
-     * Additional classes set to the outer element.
-     */
-    className?: string;
-};
-declare const ButtonToolbar: (props: PropsWithChildren<ButtonToolbarProps>) => import("react/jsx-runtime").JSX.Element;
-export default ButtonToolbar;

package/src/components/button/ButtonToolbar.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import classNames from 'classnames';
-const ButtonToolbar = (props) => {
-    const { className = '', alignment, children, ...remainingProps } = props;
-    const classes = classNames(className, 'btn-toolbar', alignment === 'left' && 'justify-content-start', alignment === 'right' && 'justify-content-end', alignment === 'center' && 'justify-content-center', alignment === 'space-between' && 'justify-content-between');
-    return (_jsx("div", { ...remainingProps, className: classes, children: children }));
-};
-export default ButtonToolbar;

package/src/components/button/StepButton.d.ts

@@ -1,12 +0,0 @@
-import { type PropsWithChildren } from 'react';
-import { type ButtonProps } from './Button';
-export type StepButtonProps = ButtonProps & {
-    /**
-     * Defines the chevron icon for the respective direction.
-     *
-     * @default 'next'
-     */
-    direction?: 'next' | 'previous';
-};
-declare const StepButton: (props: PropsWithChildren<StepButtonProps>) => import("react/jsx-runtime").JSX.Element;
-export default StepButton;

package/src/components/button/StepButton.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import Button from './Button';
-const StepButton = (props) => {
-    const { direction = 'next', ...remainingProps } = props;
-    const iconName = direction === 'next' ? 'rioglyph-chevron-right' : 'rioglyph-chevron-left';
-    return _jsx(Button, { ...remainingProps, iconName: iconName, iconRight: direction === 'next' });
-};
-export default StepButton;

package/src/components/button/ToggleButton.d.ts

@@ -1,11 +0,0 @@
-import { type PropsWithChildren } from 'react';
-import { type ButtonProps } from './Button';
-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;
-export default ToggleButton;

package/src/components/button/ToggleButton.js

@@ -1,4 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import Button from './Button';
-const ToggleButton = (props) => _jsx(Button, { ...props, asToggle: true });
-export default ToggleButton;

package/src/components/calendarStripe/CalendarStripe.d.ts

@@ -1,75 +0,0 @@
-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;
-    /**
-     * Additional classes set to the days wrapper element.
-     */
-    daysWrapperClassName?: string;
-    /**
-     * Additional classes set to the days wrapper element.
-     */
-    dayWrapperClassName?: string;
-};
-declare const CalendarStripe: React.ForwardRefExoticComponent<CalendarStripeProps & React.RefAttributes<HTMLDivElement>>;
-export default CalendarStripe;

package/src/components/calendarStripe/CalendarStripe.js

@@ -1,124 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { forwardRef, useEffect, 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';
-import { hasAlignItemsClass, hasAlignSelfClass, hasBgClass, hasBorderClass, hasCursorClass, hasDisplayClass, hasFlexClass, hasHoverScaleClass, hasHoverTextColorClass, hasOverflowClass, hasPaddingClass, hasRoundedClass, hasSpaceClass, hasTextColorClass, hasTextSizeClass, hasUserSelectClass, } from '../../utils/hasUtilityClass';
-const DEFAULT_MIN_WITH = 200;
-const DEFAULT_MIN_DAYS = 1;
-const DEFAULT_MAX_DAYS = 7;
-const ANIMATION_DURATION = 0.2;
-const ANIMATION_NEXT = 'page';
-const ANIMATION_BACK = 'pageBack';
-const ITEM_NAME = 'ColumnItem';
-const variants = {
-    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) => {
-    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, renderDay, skipWeekends = false, startDate = new Date(), onNextClick = noop, onPreviousClick = noop, buttonClassName = '', className = '', daysWrapperClassName = '', dayWrapperClassName = '', } = 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(null);
-    const [columnWrapperWidth] = useElementSize(columnWrapperRef);
-    const previous = usePrevious(getDateString(firstDate));
-    const animationDirection = getDateString(firstDate) > previous ? ANIMATION_NEXT : ANIMATION_BACK;
-    // Update startDate from outside
-    const [previousStartDate, setPreviousStartDate] = useState(startDate);
-    if (getDateString(startDate) !== getDateString(previousStartDate)) {
-        setFirstDate(startDate);
-        setPreviousStartDate(startDate);
-    }
-    useAfterMount(() => {
-        setEnableInitialAnimation(true);
-    }, []);
-    useEffect(() => {
-        if (!columnWrapperRef.current) {
-            return;
-        }
-        const firstItem = getFirstColumnItem(columnWrapperRef.current.children[0]);
-        if (!firstItem) {
-            return;
-        }
-        // Get the width of the first column to calculate how many columns fit on one page
-        // according to the given minWidth per column
-        const columnWidth = firstItem.getBoundingClientRect().width;
-        // Limit columns per page for given min and max values
-        const allowForLessColumns = amountOfDaysToShow - 1 >= minDays;
-        const allowForMoreColumns = amountOfDaysToShow + 1 <= maxDays;
-        const goSmaller = allowForLessColumns && columnWidth <= minDayWith;
-        const goBigger = allowForMoreColumns && (amountOfDaysToShow + 1) * minDayWith <= columnWrapperWidth;
-        if (goBigger) {
-            const newValue = amountOfDaysToShow + 1;
-            setAmountOfDaysToShow(newValue);
-            return;
-        }
-        if (goSmaller) {
-            const newValue = amountOfDaysToShow - 1;
-            setAmountOfDaysToShow(newValue);
-            return;
-        }
-    }, [columnWrapperWidth, columnWrapperRef.current, amountOfDaysToShow, firstDate]);
-    const handleNext = () => {
-        const newFirstDate = new Date(firstDate);
-        newFirstDate.setDate(newFirstDate.getDate() + amountOfDaysToShow);
-        setFirstDate(newFirstDate);
-        onNextClick(newFirstDate);
-    };
-    const handlePrev = () => {
-        const newFirstDate = new Date(firstDate);
-        newFirstDate.setDate(newFirstDate.getDate() - amountOfDaysToShow);
-        setFirstDate(newFirstDate);
-        onPreviousClick(newFirstDate);
-    };
-    // Re-calculate the dates to show depending on the amount of days to show
-    const dates = [];
-    let addDays = true;
-    let index = 1;
-    while (addDays) {
-        const currentDate = new Date(firstDate);
-        currentDate.setDate(firstDate.getDate() + index);
-        const isSaturday = currentDate.getDay() === 6;
-        const isSunday = currentDate.getDay() === 0;
-        const isWeekend = isSaturday || isSunday;
-        if (isWeekend && !skipWeekends) {
-            dates.push(currentDate);
-        }
-        else if (!isWeekend) {
-            dates.push(currentDate);
-        }
-        index++;
-        if (dates.length === amountOfDaysToShow) {
-            addDays = false;
-        }
-    }
-    const wrapperClassNames = classNames('CalenderStripe', !hasDisplayClass(className) && 'display-flex', !hasAlignItemsClass(className) && 'align-items-center', !hasOverflowClass(className) && 'overflow-hidden', !hasBgClass(className) && 'bg-white', !hasBorderClass(className) && 'border', !hasRoundedClass(className) && 'rounded', className);
-    const baseButtonClassNames = classNames(!hasAlignItemsClass(buttonClassName) && 'align-items-center', !hasDisplayClass(buttonClassName) && 'display-flex', !hasHoverScaleClass(buttonClassName) && 'hover-scale-105', !hasHoverTextColorClass(buttonClassName) && 'hover-text-color-darkest', !hasPaddingClass(buttonClassName) && 'padding-10', !hasCursorClass(buttonClassName) && 'cursor-pointer', !hasTextColorClass(buttonClassName) && 'text-color-darker', !hasTextSizeClass(buttonClassName) && 'text-size-12', !hasAlignSelfClass(buttonClassName) && 'align-self-stretch', buttonClassName);
-    const daysWrapperClassNames = classNames(!hasDisplayClass(daysWrapperClassName) && 'display-flex', !hasSpaceClass(daysWrapperClassName) && 'space-x--1', !hasUserSelectClass(daysWrapperClassName) && 'user-select-none', daysWrapperClassName);
-    const dayWrapperClassNames = classNames(ITEM_NAME, !hasFlexClass(dayWrapperClassName) && 'flex-1-1-0', !hasSpaceClass(dayWrapperClassName) && 'space-x--1', !hasUserSelectClass(dayWrapperClassName) && 'user-select-none', dayWrapperClassName);
-    return (_jsxs("div", { ref: ref, className: wrapperClassNames, children: [_jsx("div", { className: baseButtonClassNames, onClick: handlePrev, children: _jsx("span", { className: 'rioglyph rioglyph-chevron-left' }) }), _jsx("div", { className: 'flex-1-1 overflow-hidden', ref: columnWrapperRef, children: _jsx(AnimatePresence, { exitBeforeEnter: true, custom: animationDirection, children: _jsx(motion.div, { variants: variants, initial: enableInitialAnimation ? 'pageEnter' : false, animate: 'pageCenter', custom: animationDirection, transition: { duration: ANIMATION_DURATION }, children: _jsx("div", { className: daysWrapperClassNames, children: dates.map(date => (_jsxs("div", { className: dayWrapperClassNames, children: [renderDay ? renderDay(date) : null, render && React.cloneElement(_jsx(_Fragment, { children: render }), { date })] }, `${getDateString(date)}`))) }) }, getDateString(firstDate)) }) }), _jsx("div", { className: baseButtonClassNames, onClick: handleNext, children: _jsx("span", { className: 'rioglyph rioglyph-chevron-right' }) })] }));
-});
-export default CalendarStripe;