@rio-cloud/rio-uikit 1.13.1 → 2.0.0-beta.1

package/lib/es/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/lib/es/components/dataTabs/DataTabs.js

@@ -1,53 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importStar(require("react"));
-const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const framer_motion_1 = require("framer-motion");
-const DataTabHeader_1 = tslib_1.__importDefault(require("./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] = (0, react_1.useState)(activeKey || getFirstTabKey(react_1.default.Children.toArray(children)));
-    // Update internal activeKey when props change
-    const [previousActiveKey, setPreviousActiveKey] = (0, react_1.useState)(activeKey);
-    if (activeKey !== previousActiveKey) {
-        activeKey && setInternalActiveKey(activeKey);
-        setPreviousActiveKey(activeKey);
-    }
-    const handleSelectTab = (event) => {
-        onSelectTab(event.currentTarget?.getAttribute('data-tabkey'));
-    };
-    const wrapperClassNames = (0, classnames_1.default)('DataTabsContainer', bordered && 'DataTab-bordered', wrapperClassName, vertical ? 'DataTabs-vertical' : 'DataTabs-horizontal');
-    const enrichChildren = () => {
-        if (disableTransition) {
-            return react_1.default.Children.map(children, child => {
-                if (!child) {
-                    return null;
-                }
-                return react_1.default.cloneElement(child, {
-                    active: child.props.tabKey === internalActiveKey,
-                    disableTransition,
-                });
-            });
-        }
-        const enhancedChildren = react_1.default.Children.toArray(children)
-            .filter(child => child.props.tabKey === internalActiveKey)
-            .map(child => react_1.default.cloneElement(child, { active: true, disableTransition }));
-        return (
-        // @ts-ignore
-        (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { initial: false, exitBeforeEnter: true, children: enhancedChildren }));
-    };
-    return ((0, jsx_runtime_1.jsxs)("div", { ...remainingProps, className: wrapperClassNames, children: [(0, jsx_runtime_1.jsx)("div", { className: `DataTabsWrapper ${tabsWrapperClassName}`, children: (0, jsx_runtime_1.jsx)("ul", { className: 'DataTabs', role: 'tabList', children: react_1.default.Children.map(children, (child, index) => {
-                        if (!child) {
-                            return null;
-                        }
-                        const { tabKey, title, className } = child.props;
-                        return ((0, jsx_runtime_1.jsx)(DataTabHeader_1.default, { 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 }));
-                    }) }) }), (0, jsx_runtime_1.jsx)("div", { className: `tab-content ${tabContentClassName}`, role: 'tabpanel', children: commonTabContent ? commonTabContent : enrichChildren() })] }));
-};
-exports.default = DataTabs;

package/lib/es/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/lib/es/components/datepicker/DatePicker.js

@@ -1,39 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const react_datetime_1 = tslib_1.__importDefault(require("react-datetime"));
-const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
-const DEFAULT_LOCALE = 'en-GB';
-const DEFAULT_MIN_WIDTH = 0;
-const DatePicker = (0, react_1.forwardRef)((props, ref) => {
-    const { id, dropup = false, alignRight = false, locale = DEFAULT_LOCALE, minWidth = DEFAULT_MIN_WIDTH, onChange = noop_1.default, mandatory = true, dateValidation, clearableInput = false, closeOnSelect = true, inputProps, className, ...remainingProp } = props;
-    const [hasError, setHasError] = (0, react_1.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 = (0, classnames_1.default)('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 ((0, jsx_runtime_1.jsx)(react_datetime_1.default
-    // 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 }));
-});
-exports.default = DatePicker;

package/lib/es/components/datepicker/DateRangePicker.d.ts

@@ -1,213 +0,0 @@
-declare const _default: any;
-export default _default;
-export { DateRangePicker as DateRangePickerPure };
-/**
- * Wrapper component for React-Datetime.
- *
- * @deprecated This will be removed from the UIKIT at some time.
- */
-declare class DateRangePicker extends React.Component<any, any, any> {
-    constructor(props: any);
-    state: {
-        internalStartValue: any;
-        internalEndValue: any;
-        isMounted: boolean;
-        isCustomVisible: any;
-        isDropdownOpen: boolean;
-        customRangeStartValue: moment.Moment;
-        customRangeEndValue: moment.Moment;
-        isStartValid: boolean;
-        isEndValid: boolean;
-        dropdownToggleText: import("react/jsx-runtime").JSX.Element;
-        dropup: any;
-        pullRight: any;
-    };
-    /**
-     * Toggles dropdown open status and visibility of custom range area.
-     * @param {object} event - mouse event on toggle dropdown
-     * @returns {undefined}
-     */
-    toggleDropdownOpen(event: object): undefined;
-    /**
-     * Gets called when "custom ..." has been selected.
-     * @returns {undefined}
-     */
-    handleCustomToggle(): undefined;
-    /**
-     * Gets called user clicks the apply button.
-     * @returns {undefined}
-     */
-    handleCustomApply(): undefined;
-    /**
-     * Only gets called on manual change of datePicker (user interaction).
-     * Has influence the validity of the end date.
-     *
-     * Important to note that the start date is not limited,
-     * whereas the end date is limited by the start date (see 'getValidEndDates').
-     *
-     * @param {object} startValue - the start date (date or moment).
-     * @param {object} isValidDate - if the date is valid or not.
-     * @returns {undefined}
-     */
-    onStartChange(startValue: object, isValidDate: object): undefined;
-    /**
-     * Callback method for DatePicker to limit selection in DatePicker.
-     * @param {object} current - Current date in the loop.
-     * @returns {undefined}
-     */
-    getValidStartDates(current: object): undefined;
-    /**
-     * Only gets called on manual change of datePicker (user interaction)
-     * @param {object} endValue - the start date (date or moment).
-     * @param {object} isValidDate - if the date is valid or not.
-     * @returns {undefined}
-     */
-    onEndChange(endValue: object, isValidDate: object): undefined;
-    /**
-     * Callback method for DatePicker to limit selection in DatePicker.
-     * End date has to be after start date.
-     * @param {object} current - Current date in the loop.
-     * @returns {undefined}
-     */
-    getValidEndDates(current: object): undefined;
-    handleResetInternalState(event: any): void;
-    componentDidMount(): void;
-    /**
-     * Responsible for handling start/end values given from outside (controlled component context).
-     * @param {object} nextProps - The next props.
-     * @returns {undefined}
-     */
-    UNSAFE_componentWillReceiveProps(nextProps: object): undefined;
-    /**
-     * Converts start/end values to moments, makes them readable,
-     * crafts a dropdownToggleText and updates state.
-     * @param {object} startValue - the start date (date or moment).
-     * @param {object} endValue - the start date (date or moment).
-     * @param {object} locale - the locale to use.
-     * @param {object} extras - additional state, which needs to update.
-     * @param {object} callback - callback to be called, after state has changed.
-     * @returns {undefined}
-     */
-    update(startValue: object, endValue: object, locale: object, extras: object, callback: object): undefined;
-    /**
-     * Gets called by wrapper component "onClickOutside".
-     * Responsible for closing the dropdown when a click occured outside.
-     * @returns {undefined}
-     */
-    handleClickOutside(): undefined;
-    isAutoDropActive(): boolean;
-    handleCustomPresetSelect(preset: any): void;
-    /**
-     * Gets called when a preset has been selected.
-     * @param {object} startValue - the start date (date or moment).
-     * @param {object} endValue - the start date (date or moment).
-     * @returns {undefined}
-     */
-    handleSelect(startValue: object, endValue: object): undefined;
-    getDropdownToggle(dropdownToggleText: any): import("react/jsx-runtime").JSX.Element;
-    refDropdownToggle: HTMLDivElement | null | undefined;
-    getClearButton(): import("react/jsx-runtime").JSX.Element;
-    getCustomPanelToggle(isCustomVisible: any, textCustom: any): import("react/jsx-runtime").JSX.Element;
-    getCustomPanelButtons(isCustomVisible: any, isStartValid: any, isEndValid: any, textApply: any, textCancel: any): import("react/jsx-runtime").JSX.Element;
-    render(): import("react/jsx-runtime").JSX.Element;
-    refDropdownMenu: HTMLUListElement | null | undefined;
-}
-declare namespace DateRangePicker {
-    export { propTypes };
-    export { defaultProps };
-}
-import React from 'react';
-import moment from 'moment';
-declare namespace propTypes {
-    let startValue: PropTypes.Requireable<object>;
-    let endValue: PropTypes.Requireable<object>;
-    let defaultStartValue: PropTypes.Requireable<object>;
-    let defaultEndValue: PropTypes.Requireable<object>;
-    let minValue: PropTypes.Requireable<object>;
-    let maxValue: PropTypes.Requireable<object>;
-    let onRangeChange: PropTypes.Requireable<(...args: any[]) => any>;
-    let locale: PropTypes.Requireable<string>;
-    let textDefault: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-    let textToday: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-    let textLastWeek: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-    let textLastMonth: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-    let textLastYear: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-    let textCustom: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-    let textApply: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-    let textCancel: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-    let textFrom: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-    let textTo: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-    let className: PropTypes.Requireable<string>;
-    let dropdownClass: PropTypes.Requireable<string>;
-    let dropdownMenuClass: PropTypes.Requireable<string>;
-    let hasTimePicker: PropTypes.Requireable<boolean>;
-    let customRangeOnly: PropTypes.Requireable<boolean>;
-    let customPresets: PropTypes.Requireable<(PropTypes.InferProps<{
-        startValue: PropTypes.Validator<object>;
-        endValue: PropTypes.Validator<object>;
-        text: PropTypes.Validator<string>;
-        onSelect: PropTypes.Requireable<(...args: any[]) => any>;
-    }> | null | undefined)[]>;
-    let dropup: PropTypes.Requireable<boolean>;
-    let pullRight: PropTypes.Requireable<boolean>;
-    let autoDropDirection: PropTypes.Requireable<boolean>;
-    let clearable: PropTypes.Requireable<boolean>;
-    let onClear: PropTypes.Requireable<(...args: any[]) => any>;
-}
-declare namespace defaultProps {
-    let defaultStartValue_1: moment.Moment;
-    export { defaultStartValue_1 as defaultStartValue };
-    let defaultEndValue_1: moment.Moment;
-    export { defaultEndValue_1 as defaultEndValue };
-    let minValue_1: null;
-    export { minValue_1 as minValue };
-    let maxValue_1: null;
-    export { maxValue_1 as maxValue };
-    let locale_1: string;
-    export { locale_1 as locale };
-    let textDefault_1: string;
-    export { textDefault_1 as textDefault };
-    let textToday_1: string;
-    export { textToday_1 as textToday };
-    let textLastWeek_1: string;
-    export { textLastWeek_1 as textLastWeek };
-    let textLastMonth_1: string;
-    export { textLastMonth_1 as textLastMonth };
-    let textCustom_1: string;
-    export { textCustom_1 as textCustom };
-    let textFrom_1: string;
-    export { textFrom_1 as textFrom };
-    let textTo_1: string;
-    export { textTo_1 as textTo };
-    let textApply_1: string;
-    export { textApply_1 as textApply };
-    let textCancel_1: string;
-    export { textCancel_1 as textCancel };
-    let dropdownClass_1: string;
-    export { dropdownClass_1 as dropdownClass };
-    let dropdownMenuClass_1: string;
-    export { dropdownMenuClass_1 as dropdownMenuClass };
-    let hasTimePicker_1: boolean;
-    export { hasTimePicker_1 as hasTimePicker };
-    let customRangeOnly_1: boolean;
-    export { customRangeOnly_1 as customRangeOnly };
-    let customPresets_1: {
-        text: string;
-        startValue: moment.Moment;
-        endValue: moment.Moment;
-    }[];
-    export { customPresets_1 as customPresets };
-    export function onRangeChange_1(): void;
-    export { onRangeChange_1 as onRangeChange };
-    let autoDropDirection_1: boolean;
-    export { autoDropDirection_1 as autoDropDirection };
-    let dropup_1: boolean;
-    export { dropup_1 as dropup };
-    let pullRight_1: boolean;
-    export { pullRight_1 as pullRight };
-    let clearable_1: boolean;
-    export { clearable_1 as clearable };
-    export function onClear_1(): undefined;
-    export { onClear_1 as onClear };
-}
-import PropTypes from 'prop-types';