@rio-cloud/rio-uikit 1.12.0 → 1.13.0

package/components/contentLoader/ContentLoader.js

@@ -1,49 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { default as _ContentLoader } from 'react-content-loader';
-import cond from 'lodash/fp/cond';
-import isNil from 'lodash/fp/isNil';
-import useDarkMode from '../../hooks/useDarkMode';
-const RECT = 'rect';
-const CIRCLE = 'circle';
-const DEFAULT_SPEED = 2;
-const DEFAULT_HEIGHT = 14;
-const DEFAULT_WIDTH = '100%';
-const DEFAULT_RADIUS = 16;
-const DEFAULT_TYPE = RECT;
-const hasChildren = ({ children }) => !isNil(children);
-const renderChildren = ({ children }) => children;
-const isRect = ({ type }) => type === RECT;
-const isCircle = ({ type }) => type === CIRCLE;
-const renderRect = ({ rx = 3, ry = 3 }) => (_jsx("rect", { width: '100%', height: '100%', rx: rx, ry: ry }));
-const renderCircle = ({ radius }) => _jsx("circle", { cx: radius, cy: radius, r: radius });
-/**
- * This UIKIT component is simple wrapper to make it easier to use with a predefined look and feel. It still
- * allows for more complex configurations as all additional props are passed down to the third-party
- * ContentLoader component. For individual customization, it allows passing svg components as rect or circle
- * directly as children.
- * @param props
- * @returns
- */
-const ContentLoader = (props) => {
-    const { speed = DEFAULT_SPEED, width = DEFAULT_WIDTH, height = DEFAULT_HEIGHT, radius = DEFAULT_RADIUS, type = DEFAULT_TYPE, className = '', children, ...remainingProps } = props;
-    const isDarkMode = useDarkMode();
-    // Since we define the default values while destructuring the props, we have to build up a new object
-    // with that defaults to be used in the conditional rendering, otherwise it would use only the props as
-    // passed into the component without the defined defaults.
-    const propsWithDefaults = {
-        type,
-        radius,
-        children,
-    };
-    const content = cond([
-        [hasChildren, renderChildren],
-        [isRect, renderRect],
-        [isCircle, renderCircle],
-    ])(propsWithDefaults);
-    const wrapperHeight = isCircle(propsWithDefaults) ? radius * 2 : height;
-    const wrapperWidth = isCircle(propsWithDefaults) ? wrapperHeight : width;
-    return (_jsx(_ContentLoader, { backgroundColor: '#f5f6f7', foregroundColor: isDarkMode ? '#aaaaaa' : '#eeeeee', speed: speed, height: wrapperHeight, width: wrapperWidth, className: `ContentLoader ${className} ${isDarkMode ? 'use-mix-blend-mode' : ''}`, ...remainingProps, children: content }));
-};
-ContentLoader.RECT = RECT;
-ContentLoader.CIRCLE = CIRCLE;
-export default ContentLoader;

package/components/dataTabs/DataTab.d.ts

@@ -1,29 +0,0 @@
-import React, { type PropsWithChildren } from 'react';
-export type DataTabProps = {
-    /**
-     * Whether this tab is the one currently active.
-     *
-     * @default false
-     */
-    active?: boolean;
-    /**
-     * Used to identify the tab.
-     */
-    tabKey: string;
-    /**
-     * Whether the transition effect should be disabled.
-     *
-     * @default false
-     */
-    disableTransition?: boolean;
-    /**
-     * The content for the tab.
-     */
-    title: React.ReactNode;
-    /**
-     * Additional classes to be set on the element.
-     */
-    className?: string;
-};
-declare const DataTab: (props: PropsWithChildren<DataTabProps>) => import("react/jsx-runtime").JSX.Element | null;
-export default DataTab;

package/components/dataTabs/DataTab.js

@@ -1,20 +0,0 @@
-import { createElement as _createElement } from "react";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { motion } from 'framer-motion';
-const DataTab = (props) => {
-    const { active = false, title, // exclude from remainingProps to avoid being set to the div element
-    tabKey, disableTransition = false, className = '', children, ...remainingProps } = props;
-    if (disableTransition) {
-        return _jsx("div", { children: active && children });
-    }
-    if (!active) {
-        return null;
-    }
-    return (
-    // @ts-ignore
-    _createElement(motion.div, { ...remainingProps, key: tabKey, initial: { x: 0, y: 0, opacity: 0 }, animate: { x: 0, y: 0, opacity: 1 }, exit: { x: 0, y: 0, opacity: 0 }, transition: { duration: 0.1 }, 
-        // TODO: added "fade in" for backwards compatibility for service tests
-        // To be removed for next major version
-        className: 'fade in' }, children));
-};
-export default DataTab;

package/components/dataTabs/DataTabHeader.d.ts

@@ -1,18 +0,0 @@
-import React from 'react';
-export type DataTabHeaderProps = {
-    isActive?: boolean;
-    tabKey: string;
-    title: React.ReactNode;
-    onSelectTab?: (event: React.MouseEvent<HTMLLIElement>) => void;
-    isFirstTab?: boolean;
-    isLastTab?: boolean;
-    tabFirstChildClassName?: string;
-    tabLastChildClassName?: string;
-    tabClassName?: string;
-    tabHoverClassName?: string;
-    tabActiveClassName?: string;
-    arrowClassName?: string;
-    className?: string;
-};
-declare const DataTabHeader: (props: DataTabHeaderProps) => import("react/jsx-runtime").JSX.Element;
-export default DataTabHeader;

package/components/dataTabs/DataTabHeader.js

@@ -1,10 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import classNames from 'classnames';
-const DataTabHeader = (props) => {
-    const { tabKey, title, isActive, isFirstTab, isLastTab, onSelectTab, tabFirstChildClassName, tabLastChildClassName, tabClassName, tabHoverClassName, tabActiveClassName, arrowClassName, className, } = props;
-    const [isHovering, setIsHovering] = useState(false);
-    const tabClassNames = classNames('DataTab', 'tab', isFirstTab && tabFirstChildClassName, isLastTab && tabLastChildClassName, !isHovering && !isActive && tabClassName, isHovering && !isActive && tabHoverClassName, isActive && `active ${tabActiveClassName}`, !isActive && 'cursor-pointer', className && className);
-    return (_jsxs("li", { className: tabClassNames, onClick: onSelectTab, "data-tabkey": tabKey, onMouseEnter: () => setIsHovering(true), onMouseLeave: () => setIsHovering(false), children: [title, _jsx("div", { className: `arrow ${arrowClassName} ${isActive ? 'in' : ''}` })] }, tabKey));
-};
-export default DataTabHeader;

package/components/dataTabs/DataTabs.d.ts

@@ -1,80 +0,0 @@
-import React, { type PropsWithChildren } from 'react';
-export type DataTabsProps = {
-    /**
-     * Sets key and id.
-     *
-     * @default ''
-     */
-    activeKey?: string;
-    /**
-     * Whether the component should add a border.
-     *
-     * @default true
-     */
-    bordered?: boolean;
-    /**
-     * Additional classes to be set on the wrapper element.
-     */
-    className?: string;
-    /**
-     * Tab content that is used for all tabs.
-     *
-     * Using a common tab content will ignore any DataTab child. Additionally, there will be no transition when
-     * switching tabs as it is a single tab content component.
-     */
-    commonTabContent?: React.ReactNode;
-    /**
-     * Transitions between tab contents are enabled by default. Set if you want to disable them.
-     *
-     * The Navigation tabs will still remain animated.
-     *
-     * @default false
-     */
-    disableTransition?: boolean;
-    /**
-     * Additional classes to be set on the arrow.
-     */
-    arrowClassName?: string;
-    /**
-     * Called when a tab is being activated.
-     *
-     * @param tabKey Of the activated tab.
-     */
-    onSelectTab?: (tabKey: string) => void;
-    /**
-     * Additional classes to be set on the tab element.
-     */
-    tabClassName?: string;
-    /**
-     * Utility hover classes to be set on the tab element.
-     */
-    tabHoverClassName?: string;
-    /**
-     * Utility active classes to be set on the tab element.
-     */
-    tabActiveClassName?: string;
-    /**
-     * Utility first-child classes to be set on the tab element.
-     */
-    tabFirstChildClassName?: string;
-    /**
-     * Utility last-child classes to be set on the tab element.
-     */
-    tabLastChildClassName?: string;
-    /**
-     * Utility content classes to be set on the tab element.
-     */
-    tabContentClassName?: string;
-    /**
-     * Additional classes to be set on the tabs wrapper element.
-     */
-    tabsWrapperClassName?: string;
-    /**
-     * Whether the layout should be vertical.
-     *
-     * @default false
-     */
-    vertical?: boolean;
-};
-declare const DataTabs: (props: PropsWithChildren<DataTabsProps>) => import("react/jsx-runtime").JSX.Element;
-export default DataTabs;

package/components/dataTabs/DataTabs.js

@@ -1,50 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState } from 'react';
-import classNames from 'classnames';
-import { AnimatePresence } from 'framer-motion';
-import DataTabHeader from './DataTabHeader';
-const getFirstTabKey = (children) => {
-    const [firstItem] = children;
-    return firstItem?.props.tabKey;
-};
-const DataTabs = (props) => {
-    const { activeKey = '', bordered = true, className: wrapperClassName, commonTabContent, disableTransition = false, arrowClassName = 'bg-highlight-dark border-color-transparent', onSelectTab = () => { }, tabActiveClassName = 'bg-highlight-dark text-color-white', tabClassName = '', tabContentClassName = '', tabFirstChildClassName = '', tabHoverClassName = 'bg-highlight-decent text-color-darkest', tabLastChildClassName = '', tabsWrapperClassName = '', vertical = false, children, ...remainingProps } = props;
-    const [internalActiveKey, setInternalActiveKey] = useState(activeKey || getFirstTabKey(React.Children.toArray(children)));
-    // Update internal activeKey when props change
-    const [previousActiveKey, setPreviousActiveKey] = useState(activeKey);
-    if (activeKey !== previousActiveKey) {
-        activeKey && setInternalActiveKey(activeKey);
-        setPreviousActiveKey(activeKey);
-    }
-    const handleSelectTab = (event) => {
-        onSelectTab(event.currentTarget?.getAttribute('data-tabkey'));
-    };
-    const wrapperClassNames = classNames('DataTabsContainer', bordered && 'DataTab-bordered', wrapperClassName, vertical ? 'DataTabs-vertical' : 'DataTabs-horizontal');
-    const enrichChildren = () => {
-        if (disableTransition) {
-            return React.Children.map(children, child => {
-                if (!child) {
-                    return null;
-                }
-                return React.cloneElement(child, {
-                    active: child.props.tabKey === internalActiveKey,
-                    disableTransition,
-                });
-            });
-        }
-        const enhancedChildren = React.Children.toArray(children)
-            .filter(child => child.props.tabKey === internalActiveKey)
-            .map(child => React.cloneElement(child, { active: true, disableTransition }));
-        return (
-        // @ts-ignore
-        _jsx(AnimatePresence, { initial: false, exitBeforeEnter: true, children: enhancedChildren }));
-    };
-    return (_jsxs("div", { ...remainingProps, className: wrapperClassNames, children: [_jsx("div", { className: `DataTabsWrapper ${tabsWrapperClassName}`, children: _jsx("ul", { className: 'DataTabs', role: 'tabList', children: React.Children.map(children, (child, index) => {
-                        if (!child) {
-                            return null;
-                        }
-                        const { tabKey, title, className } = child.props;
-                        return (_jsx(DataTabHeader, { isActive: tabKey === internalActiveKey, tabKey: tabKey, title: title, onSelectTab: handleSelectTab, isFirstTab: index === 0, isLastTab: !!(children?.length - 1), tabFirstChildClassName: tabFirstChildClassName, tabLastChildClassName: tabLastChildClassName, tabActiveClassName: tabActiveClassName, tabClassName: tabClassName, tabHoverClassName: tabHoverClassName, arrowClassName: arrowClassName, className: className }));
-                    }) }) }), _jsx("div", { className: `tab-content ${tabContentClassName}`, role: 'tabpanel', children: commonTabContent ? commonTabContent : enrichChildren() })] }));
-};
-export default DataTabs;

package/components/datepicker/DatePicker.d.ts

@@ -1,172 +0,0 @@
-import React from 'react';
-import type { Moment } from 'moment';
-import Datetime, { type DatetimepickerProps } from 'react-datetime';
-export type DatePickerProps = Omit<DatetimepickerProps, 'onChange' | 'initialValue'> & {
-    /**
-     * An id used for the internal input element.
-     */
-    id?: string;
-    /**
-     * The moment locale to be used for the date picker.
-     * Make sure to import the respective moment locale files.
-     *
-     * @default 'en-GB'
-     * @example import 'moment/dist/locale/de';
-     */
-    locale?: string;
-    /**
-     * Once the day has been selected, the date picker will be closed automatically.
-     *
-     * @default true
-     */
-    closeOnSelect?: boolean;
-    /**
-     * Default value of the DatePicker (date or moment).
-     */
-    initialValue?: Date | Moment;
-    /**
-     * Value of the DatePicker (date or moment). Use this only if you want to use
-     * this component as a controlled component
-     */
-    value?: Date | string | Moment;
-    dateFormat?: boolean | string;
-    timeFormat?: boolean | string;
-    inputProps?: React.HTMLProps<HTMLInputElement>;
-    /**
-     * Defines whether the dropdown opens upwards or not.
-     *
-     * @default false
-     */
-    dropup?: boolean;
-    /**
-     * Opens the picker right aligned.
-     *
-     * @default false
-     */
-    alignRight?: boolean;
-    /**
-     * Defines whether the clearableInput button is shown.
-     *
-     * @default false
-     */
-    clearableInput?: boolean;
-    /**
-     * Optional min-width value (without px). Since the DatePicker has a max-width of 100%
-     * you can also set a high minWidth number to use 100% with of the parent element.
-     * A value of "0" means no extra width is set and it becomes 100% width of the parent.
-     *
-     * @default 0
-     */
-    minWidth?: number;
-    /**
-     * Callback function when the value changes. Receives the new date (moment)
-     * and a boolean (whether date is valid or not) as arguments.
-     *
-     * @param value
-     * @param isValid
-     * @returns
-     */
-    onChange?: (value: Moment | string, isValid: boolean) => void;
-    /**
-     * Defines whether the input shows an error when the date is invalid or cleared.
-     *
-     * @default true
-     */
-    mandatory?: boolean;
-    /**
-     * Overwrites the internal date validation function in case you need to customize it.
-     *
-     * @param date
-     * @returns
-     */
-    dateValidation?: (date: Moment | string) => boolean;
-    /**
-     * Additional classes to be set on the DatePicker element.
-     */
-    className?: string;
-};
-declare const DatePicker: React.ForwardRefExoticComponent<Omit<Datetime.DatetimepickerProps, "onChange" | "initialValue"> & {
-    /**
-     * An id used for the internal input element.
-     */
-    id?: string;
-    /**
-     * The moment locale to be used for the date picker.
-     * Make sure to import the respective moment locale files.
-     *
-     * @default 'en-GB'
-     * @example import 'moment/dist/locale/de';
-     */
-    locale?: string;
-    /**
-     * Once the day has been selected, the date picker will be closed automatically.
-     *
-     * @default true
-     */
-    closeOnSelect?: boolean;
-    /**
-     * Default value of the DatePicker (date or moment).
-     */
-    initialValue?: Date | Moment;
-    /**
-     * Value of the DatePicker (date or moment). Use this only if you want to use
-     * this component as a controlled component
-     */
-    value?: Date | string | Moment;
-    dateFormat?: boolean | string;
-    timeFormat?: boolean | string;
-    inputProps?: React.HTMLProps<HTMLInputElement>;
-    /**
-     * Defines whether the dropdown opens upwards or not.
-     *
-     * @default false
-     */
-    dropup?: boolean;
-    /**
-     * Opens the picker right aligned.
-     *
-     * @default false
-     */
-    alignRight?: boolean;
-    /**
-     * Defines whether the clearableInput button is shown.
-     *
-     * @default false
-     */
-    clearableInput?: boolean;
-    /**
-     * Optional min-width value (without px). Since the DatePicker has a max-width of 100%
-     * you can also set a high minWidth number to use 100% with of the parent element.
-     * A value of "0" means no extra width is set and it becomes 100% width of the parent.
-     *
-     * @default 0
-     */
-    minWidth?: number;
-    /**
-     * Callback function when the value changes. Receives the new date (moment)
-     * and a boolean (whether date is valid or not) as arguments.
-     *
-     * @param value
-     * @param isValid
-     * @returns
-     */
-    onChange?: (value: Moment | string, isValid: boolean) => void;
-    /**
-     * Defines whether the input shows an error when the date is invalid or cleared.
-     *
-     * @default true
-     */
-    mandatory?: boolean;
-    /**
-     * Overwrites the internal date validation function in case you need to customize it.
-     *
-     * @param date
-     * @returns
-     */
-    dateValidation?: (date: Moment | string) => boolean;
-    /**
-     * Additional classes to be set on the DatePicker element.
-     */
-    className?: string;
-} & React.RefAttributes<unknown>>;
-export default DatePicker;

package/components/datepicker/DatePicker.js

@@ -1,36 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState, forwardRef } from 'react';
-import classNames from 'classnames';
-import Datetime from 'react-datetime';
-import noop from 'lodash/fp/noop';
-const DEFAULT_LOCALE = 'en-GB';
-const DEFAULT_MIN_WIDTH = 0;
-const DatePicker = forwardRef((props, ref) => {
-    const { id, dropup = false, alignRight = false, locale = DEFAULT_LOCALE, minWidth = DEFAULT_MIN_WIDTH, onChange = noop, mandatory = true, dateValidation, clearableInput = false, closeOnSelect = true, inputProps, className, ...remainingProp } = props;
-    const [hasError, setHasError] = useState(false);
-    const validateDate = (dateToValidate) => {
-        // If the entered date complies with the defined dateFormat, the Datetime component
-        // returns a moment object, otherwise the return value is a string.
-        // Note, using a isValid() function from moment or the Date object itself will result in
-        // different outcome in various browsers.
-        // For instance `new Date('1')` or `moment('1')` are valid dates in Chrome where it defaults
-        // to "01/01/2001" whereas in Firefox it is an invalid date.
-        // The solution is to compare the entered value to the date format which is done by React Datetime.
-        const isDateObject = typeof dateToValidate === 'object';
-        return dateValidation ? dateValidation(dateToValidate) : isDateObject;
-    };
-    const handleChange = (date) => {
-        const isValid = mandatory ? validateDate(date) : true;
-        setHasError(!isValid);
-        onChange(date, isValid);
-    };
-    const classes = classNames('DatePicker', 'form-group', hasError && 'has-error', dropup && 'dropup', alignRight && 'align-right', className && className);
-    // This way we can expose the "id" as top level prop and not as part of the inputProps which
-    // makes the use of the id much more convenient
-    const enhancedInputProps = { id, ...inputProps };
-    return (_jsx(Datetime
-    // TODO: add support for setting ref to the input. Maybe add a "inputRef" prop to react-datetime
-    // ref={ref}
-    , { ...remainingProp, locale: locale, clearableInput: clearableInput, closeOnSelect: closeOnSelect, onChange: handleChange, minWidth: minWidth, inputProps: enhancedInputProps, className: classes }));
-});
-export default DatePicker;