@rio-cloud/rio-uikit 1.12.0 → 1.13.1

package/src/components/clearableInput/ClearableInput.js

@@ -1,148 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/** biome-ignore-all lint/complexity/noBannedTypes: <explanation> */
-import { useState, forwardRef, useRef } from 'react';
-import omit from 'lodash/fp/omit';
-import isNil from 'lodash/fp/isNil';
-import isEmpty from 'lodash/fp/isEmpty';
-import classNames from 'classnames';
-import isFunction from 'lodash/fp/isFunction';
-import noop from 'lodash/fp/noop';
-import { IMaskInput } from 'react-imask';
-import usePrevious from '../../hooks/usePrevious';
-import useMergeRefs from '../../hooks/useMergeRefs';
-export const DEFAULT_TYPE = 'text';
-export const SUPPORTED_TYPES = ['text', 'password', 'email'];
-const hasValue = (value) => !isEmpty(`${value}`);
-const ClearableInput = forwardRef((props, ref) => {
-    const { type = DEFAULT_TYPE, defaultValue, value, maxLength, tabIndex = 0, hasError = false, inputRef, autoComplete, onChange = noop, onBlur = noop, onFocus = noop, onClear = noop, onKeyPress = noop, onClick = noop, mask, maskPlaceholder = '_', maskVisibility = 'always', maskOverwrite = true, maskDefinitions, maskDispatch, alwaysShowMask = false, inputClassName = '', disabled = false, className = '', children, ...remainingProps } = props;
-    const initialValue = value || defaultValue || '';
-    const [inputValue, setInputValue] = useState(initialValue);
-    const [showClear, setShowClear] = useState(hasValue(initialValue));
-    const [isFocused, setIsFocused] = useState(false);
-    const isControlled = !isNil(value);
-    const internalMaskRef = useRef(null);
-    const mergedInternalMaskRef = useMergeRefs(internalMaskRef, inputRef, ref);
-    const hasMask = !!mask;
-    // Calculate if mask should be visible (lazy=false means visible, lazy=true means hidden)
-    const shouldShowMask = () => {
-        // For backward compatibility
-        if (alwaysShowMask) {
-            return true;
-        }
-        switch (maskVisibility) {
-            case 'always':
-                return true;
-            case 'onFocus':
-                return isFocused;
-            case 'never':
-                return false;
-            default:
-                return isFocused;
-        }
-    };
-    // Handles new input value and saves it in the local state.
-    // The value stored in the state is used for rendering.
-    const changeInternalValue = (newValue = '') => {
-        // this is there to prevent that onChange and UNSAFE_componentWillReceiveProps set state at the same time
-        if (inputValue === newValue) {
-            return;
-        }
-        setInputValue(newValue);
-        setShowClear(hasValue(newValue));
-    };
-    // important for when used as a controlled component and value changes from the outside.
-    const previousValue = usePrevious(value);
-    if (previousValue !== value) {
-        changeInternalValue(value);
-    }
-    // only gets triggered on user interaction.
-    const handleChange = (event) => {
-        const newValue = event.target.value;
-        if (isControlled) {
-            onChange(newValue, event);
-        }
-        else {
-            changeInternalValue(newValue);
-            onChange(newValue, event);
-        }
-    };
-    const handleAccept = (newValue, maskRef, event) => {
-        if (!internalMaskRef.current) {
-            return;
-        }
-        // Simulate a ChangeEvent for backwards compatibility since react-imask does not return a change event itself
-        const syntheticEvent = {
-            target: internalMaskRef.current,
-            currentTarget: internalMaskRef.current,
-            // Standard synthetic event props
-            bubbles: true,
-            cancelable: true,
-            defaultPrevented: false,
-            isTrusted: true,
-            preventDefault: () => { },
-            stopPropagation: () => { },
-            persist: () => { },
-            nativeEvent: {},
-            type: 'change',
-            timeStamp: Date.now(),
-        };
-        // Set unmasked value manually if needed
-        // (you can use data-attributes or attach it directly)
-        syntheticEvent.target.unmaskedValue = maskRef.unmaskedValue;
-        if (isControlled) {
-            onChange(newValue, syntheticEvent);
-        }
-        else {
-            changeInternalValue(newValue);
-            onChange(newValue, syntheticEvent);
-        }
-    };
-    const handleInputFocus = (event) => {
-        setIsFocused(true);
-        onFocus(event);
-    };
-    const handleInputBlur = (event) => {
-        setIsFocused(false);
-        onBlur(event);
-    };
-    // Will be triggered on every key press but also when pressing 'Enter' for example
-    const handleKeyPress = (event) => {
-        onKeyPress(event);
-    };
-    const clearInputValue = (event) => {
-        changeInternalValue('');
-        onChange('', event);
-        if (onClear) {
-            onClear(event);
-        }
-    };
-    const classes = classNames('ClearableInput', 'input-group', hasError && 'has-error', disabled && 'pointer-events-none', className && className);
-    const inputClassNames = classNames('form-control', inputClassName, showClear && 'withClearButton', hasMask && 'withInputMask', disabled && 'disabled');
-    const clearButtonClassNames = classNames('clearButton', !showClear && 'hide');
-    const convertedType = type?.toLowerCase();
-    const inputType = SUPPORTED_TYPES.indexOf(convertedType) !== -1 ? convertedType : DEFAULT_TYPE;
-    const inputProps = {
-        ...omit(['value', 'defaultValue', 'onClear'])(remainingProps),
-        className: inputClassNames,
-        autoComplete,
-        type: inputType,
-        value: inputValue,
-        onKeyPress: handleKeyPress,
-        onBlur: handleInputBlur,
-        onFocus: handleInputFocus,
-        onChange: hasMask ? undefined : handleChange, // In case of masked input, the onAccept callback is used
-        onClick,
-        disabled,
-        maxLength: hasMask ? undefined : maxLength,
-        tabIndex,
-    };
-    // The dispatch function may not be an empty function. Specify it when
-    // using dynamic masking and need more control over which mask gets selected
-    const maskDispatchObj = {};
-    if (maskDispatch) {
-        maskDispatchObj.dispatch = maskDispatch;
-    }
-    const input = hasMask ? (_jsx(IMaskInput, { ...inputProps, inputRef: mergedInternalMaskRef, mask: mask, definitions: maskDefinitions, ...maskDispatchObj, placeholderChar: maskPlaceholder, onAccept: handleAccept, lazy: !shouldShowMask(), overwrite: maskOverwrite })) : (_jsx("input", { ...inputProps, ref: inputRef || ref }));
-    return (_jsxs("div", { className: classes, children: [children && isFunction(children) ? children(inputProps) : input, _jsx("span", { className: clearButtonClassNames, onClick: clearInputValue, children: _jsx("span", { className: 'clearButtonIcon rioglyph rioglyph-remove-sign' }) })] }));
-});
-export default ClearableInput;

package/src/components/collapse/Collapse.d.ts

@@ -1,40 +0,0 @@
-import { type PropsWithChildren } from 'react';
-type CollapseProps = {
-    /**
-     * Show the component and triggers the expand or collapse animation.
-     * @default false
-     */
-    open: boolean | undefined;
-    /** Deprecated, please use `open` instead. @deprecated */
-    in?: boolean;
-    /**
-     * Unmount the component (remove it from the DOM) when it is collapsed.
-     */
-    unmountOnExit?: boolean;
-    /**
-     * Run the expand animation when the component mounts, if it is initially shown.
-     * @default false
-     */
-    appear?: boolean;
-    /**
-     * Duration of the collapse animation in milliseconds.
-     * @default 270
-     */
-    timeout?: number;
-    /**
-     * Callback fired after the component has expanded.
-     * @returns
-     */
-    onEntered?: () => void;
-    /**
-     * Callback fired after the component has collapsed.
-     * @returns
-     */
-    onExited?: () => void;
-    /**
-     * Callback fired when the animation starts for either expand or collapse.
-     */
-    onAnimationStart?: () => void;
-};
-declare const Collapse: (props: PropsWithChildren<CollapseProps>) => import("react/jsx-runtime").JSX.Element;
-export default Collapse;

package/src/components/collapse/Collapse.js

@@ -1,24 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { motion, AnimatePresence } from 'framer-motion';
-import noop from 'lodash/fp/noop';
-const DEFAULT_ANIMATION_TIME_IN_MS = 200;
-const Collapse = (props) => {
-    const { open = false, unmountOnExit = false, appear = false, timeout = DEFAULT_ANIMATION_TIME_IN_MS, onEntered = noop, onExited = noop, onAnimationStart = noop, children, } = props;
-    const shouldKeepContentInDom = !unmountOnExit;
-    const handleAnimationStart = () => onAnimationStart();
-    const handleAnimationComplete = (definition) => {
-        if (definition === 'open') {
-            onEntered();
-        }
-        if (definition === 'collapsed') {
-            onExited();
-        }
-    };
-    const variants = {
-        open: { opacity: 1, height: 'auto' },
-        collapsed: { opacity: 0, height: 0 },
-    };
-    return (_jsx(_Fragment, { children: _jsx(AnimatePresence, { initial: appear, exitBeforeEnter: true, children: (open || shouldKeepContentInDom) && (_jsx(motion.div, { initial: 'collapsed', animate: open ? 'open' : 'collapsed', exit: 'collapsed', className: 'collapse display-block width-100pct', variants: variants, transition: { duration: timeout / 1000, ease: 'easeIn' }, onAnimationComplete: handleAnimationComplete, onAnimationStart: handleAnimationStart, children: children }, 'content')) }) }));
-};
-//
-export default Collapse;

package/src/components/contentLoader/ContentLoader.d.ts

@@ -1,55 +0,0 @@
-import { type PropsWithChildren } from 'react';
-declare const RECT = "rect";
-declare const CIRCLE = "circle";
-export type ContentLoaderProps = {
-    /**
-     * Sets the animation speed.
-     * @default 2
-     */
-    speed?: number;
-    /**
-     * Sets the height of the svg element.
-     * @default 14
-     */
-    height?: string | number;
-    /**
-     * Sets the width of the svg element.
-     * @default 100%
-     */
-    width?: string | number;
-    /**
-     * Sets the radius of the svg element. Only relevant for circle elements.
-     * @default 16
-     */
-    radius?: number;
-    /**
-     * Renders either a rectangle or circle.
-     *
-     * Possible values are:
-     * `ContentLoader.RECT`, `ContentLoader.CIRCLE` or `rect`, `circle`
-     */
-    type?: typeof RECT | typeof CIRCLE;
-    /**
-     * Additional class names to ab added to the wrapping svg element.
-     */
-    className?: string;
-    /** Rect object prop. Used internally. */
-    rx?: number;
-    /** Rect object prop. Used internally. */
-    ry?: number;
-};
-type ContentLoaderPropsWithChildren = PropsWithChildren<ContentLoaderProps>;
-/**
- * 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
- */
-declare const ContentLoader: {
-    (props: ContentLoaderPropsWithChildren): import("react/jsx-runtime").JSX.Element;
-    RECT: "rect";
-    CIRCLE: "circle";
-};
-export default ContentLoader;

package/src/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/src/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/src/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/src/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/src/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/src/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/src/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;