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

package/components/fade/Fade.d.ts

@@ -1,46 +1,76 @@
+import { type PropsWithChildren } from 'react';
+export type FadeAnimationStyle = 'fade' | 'tabs' | 'page' | 'pageBack' | 'fromLeft' | 'fromRight' | 'fromTop' | 'fromBottom';
+export type FadeProps = {
+    /**
+     * Defines whether to show the content.
+     *
+     * @default true
+     */
+    show?: boolean;
+    /**
+     * Duration of the fade animation in seconds.
+     *
+     * @default 0.2
+     */
+    duration?: number;
+    /**
+     * Defines whether the animation is triggered initially when showing the content.
+     *
+     * @default false
+     */
+    initial?: boolean;
+    /**
+     * Defines the desired animation style.
+     *
+     * Possible values are:
+     * - `fade`
+     * - `tabs`
+     * - `page`
+     * - `pageBack`
+     * - `fromLeft`
+     * - `fromRight`
+     * - `fromTop`
+     * - `fromBottom`
+     *
+     * @default 'fade'
+     */
+    animationStyle?: FadeAnimationStyle;
+    /**
+     * If set to true, only one component will be rendered at a time.
+     *
+     * The exiting component will finish its exit animation before the entering component is rendered.
+     *
+     * @default false
+     */
+    exitBeforeEnter?: boolean;
+    /**
+     * Fires when all exiting nodes have completed animating out.
+     *
+     * @default noop
+     */
+    onExitComplete?: VoidFunction;
+    /**
+     * Additional custom props for the underlying Framer motion AnimatePresence component.
+     *
+     * Use this for additional customizations.
+     */
+    animatePresenceProps?: object;
+    /**
+     * Additional custom props for the underlying Framer motion <motion.div> component.
+     *
+     * Use this for additional customizations.
+     */
+    motionProps?: object;
+};
+declare const Fade: {
+    (props: PropsWithChildren<FadeProps>): import("react/jsx-runtime").JSX.Element;
+    FADE: "fade";
+    FROM_LEFT: "fromLeft";
+    FROM_RIGHT: "fromRight";
+    FROM_TOP: "fromTop";
+    FROM_BOTTOM: "fromBottom";
+    TABS: "tabs";
+    PAGE: "page";
+    PAGE_BACK: "pageBack";
+};
 export default Fade;
-declare function Fade(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace Fade {
-    const FADE: string;
-    const FROM_LEFT: string;
-    const FROM_RIGHT: string;
-    const FROM_TOP: string;
-    const FROM_BOTTOM: string;
-    const TABS: string;
-    const PAGE: string;
-    const PAGE_BACK: string;
-    namespace defaultProps {
-        const show: boolean;
-        const duration: number;
-        const initial: boolean;
-        const exitBeforeEnter: boolean;
-        const animationStyle: string;
-    }
-    namespace propTypes {
-        const _in: PropTypes.Requireable<boolean>;
-        export { _in as in };
-        const show_1: PropTypes.Requireable<boolean>;
-        export { show_1 as show };
-        export const appear: PropTypes.Requireable<boolean>;
-        const initial_1: PropTypes.Requireable<boolean>;
-        export { initial_1 as initial };
-        const exitBeforeEnter_1: PropTypes.Requireable<boolean>;
-        export { exitBeforeEnter_1 as exitBeforeEnter };
-        export const timeout: PropTypes.Requireable<number>;
-        const duration_1: PropTypes.Requireable<number>;
-        export { duration_1 as duration };
-        export const onEnter: PropTypes.Requireable<(...args: any[]) => any>;
-        export const onEntering: PropTypes.Requireable<(...args: any[]) => any>;
-        export const onEntered: PropTypes.Requireable<(...args: any[]) => any>;
-        export const onExit: PropTypes.Requireable<(...args: any[]) => any>;
-        export const onExiting: PropTypes.Requireable<(...args: any[]) => any>;
-        export const onExited: PropTypes.Requireable<(...args: any[]) => any>;
-        export const onExitComplete: PropTypes.Requireable<(...args: any[]) => any>;
-        const animationStyle_1: PropTypes.Requireable<string>;
-        export { animationStyle_1 as animationStyle };
-        export const animatePresenceProps: PropTypes.Requireable<object>;
-        export const motionProps: PropTypes.Requireable<object>;
-        export const children: PropTypes.Requireable<any>;
-    }
-}
-import PropTypes from "prop-types";

package/components/fade/Fade.js

@@ -1,27 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
+import { useState } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
 import isArray from 'lodash/fp/isArray';
 import head from 'lodash/fp/head';
-import isNil from 'lodash/fp/isNil';
-import logDeprecatedWarnings from '../../utils/logDeprecatedWarnings';
+import noop from 'lodash/noop';
 import useAfterMount from '../../useAfterMount';
-const warningProps = [
-    {
-        prop: 'in',
-        replacement: 'show',
-    },
-    {
-        prop: 'timeout',
-        replacement: 'duration',
-    },
-    {
-        prop: 'appear',
-        replacement: 'initial',
-    },
-];
-const animations = {
+const animationPropsForStyle = {
     fromLeft: {
         initial: { x: -10, y: 0, opacity: 0 },
         animate: { x: 0, y: 0, opacity: 1 },
@@ -63,42 +47,14 @@ const animations = {
         exit: 'pageExit',
     },
 };
+const getPageDirection = (animationStyle) => animationStyle === 'pageBack' ? -1 : 1;
 const pageTransitionVariants = {
-    pageEnter: pageDirection => {
-        return {
-            x: pageDirection > 0 ? '60%' : '-60%',
-            opacity: 0,
-        };
-    },
-    pageCenter: {
-        x: 0,
-        opacity: 1,
-    },
-    pageExit: pageDirection => {
-        return {
-            zIndex: 0,
-            x: pageDirection < 0 ? '60%' : '-60%',
-            opacity: 0,
-        };
-    },
+    pageEnter: (pageDirection) => ({ x: `${pageDirection * 60}%`, opacity: 0 }),
+    pageCenter: { x: 0, opacity: 1 },
+    pageExit: (pageDirection) => ({ zIndex: 0, x: `${-pageDirection * 60}%`, opacity: 0 }),
 };
-const getPageDirection = animationStyle => {
-    switch (animationStyle) {
-        case Fade.PAGE_BACK:
-            return -1;
-        default:
-            return 1;
-    }
-};
-const Fade = props => {
-    const { in: oldIn, timeout, appear, exitBeforeEnter, onExitComplete, animationStyle, animatePresenceProps, motionProps, children, } = props;
-    logDeprecatedWarnings(warningProps, props, 'Fade');
-    let duration = props.duration || timeout;
-    if (duration > 10) {
-        duration = duration / 100;
-    }
-    const show = props.show || oldIn;
-    const initial = isNil(appear) ? props.initial : appear;
+const Fade = (props) => {
+    const { show = true, initial = false, duration = 0.2, exitBeforeEnter = false, animationStyle = 'fade', animatePresenceProps, motionProps, onExitComplete = noop, children, } = props;
     const [allowInitialAnimation, setAllowInitialAnimation] = useState(initial);
     useAfterMount(() => {
         if (!allowInitialAnimation) {
@@ -115,17 +71,18 @@ const Fade = props => {
     }
     // In case the animation is a page transition, use custom variants and add a custom pageDirection variable
     // to animate in the right direction
-    const isPageTransition = animationStyle === Fade.PAGE || animationStyle === Fade.PAGE_BACK;
+    const isPageTransition = animationStyle === 'page' || animationStyle === 'pageBack';
     const pageDirection = getPageDirection(animationStyle);
     const custom = isPageTransition ? pageDirection : null;
     const pageTransitionProps = isPageTransition ? { variants: pageTransitionVariants } : null;
-    const animationProps = Object.assign({}, animations[animationStyle]);
+    const selectedAnimationProps = animationPropsForStyle[animationStyle];
     // Disable initial animation on mount. After mount the initial animation step is needed to enable
     // the "fade-in" animation, otherwise it just appears
-    if (!allowInitialAnimation) {
-        animationProps.initial = false;
-    }
-    return (_jsx(AnimatePresence, Object.assign({ initial: allowInitialAnimation, exitBeforeEnter: exitBeforeEnter, onExitComplete: onExitComplete, custom: custom }, animatePresenceProps, { children: show && (_jsx(motion.div, Object.assign({ transition: { duration }, custom: custom }, animationProps, pageTransitionProps, motionProps, { children: children }), motionDivKey)) })));
+    const selectedInitial = allowInitialAnimation ? selectedAnimationProps.initial : false;
+    const animationProps = Object.assign(Object.assign({}, selectedAnimationProps), { initial: selectedInitial });
+    return (
+    // @ts-ignore-next-line
+    _jsx(AnimatePresence, Object.assign({ initial: allowInitialAnimation, exitBeforeEnter: exitBeforeEnter, onExitComplete: onExitComplete, custom: custom }, animatePresenceProps, { children: show && (_jsx(motion.div, Object.assign({ transition: { duration }, custom: custom }, animationProps, pageTransitionProps, motionProps, { children: children }), motionDivKey)) })));
 };
 Fade.FADE = 'fade';
 Fade.FROM_LEFT = 'fromLeft';
@@ -135,43 +92,4 @@ Fade.FROM_BOTTOM = 'fromBottom';
 Fade.TABS = 'tabs';
 Fade.PAGE = 'page';
 Fade.PAGE_BACK = 'pageBack';
-Fade.defaultProps = {
-    // in: false,
-    show: true,
-    // timeout: 200,
-    duration: 0.2,
-    // appear: false,
-    initial: false,
-    exitBeforeEnter: false,
-    animationStyle: 'fade',
-};
-Fade.propTypes = {
-    in: PropTypes.bool,
-    show: PropTypes.bool,
-    appear: PropTypes.bool,
-    initial: PropTypes.bool,
-    exitBeforeEnter: PropTypes.bool,
-    timeout: PropTypes.number,
-    duration: PropTypes.number,
-    onEnter: PropTypes.func,
-    onEntering: PropTypes.func,
-    onEntered: PropTypes.func,
-    onExit: PropTypes.func,
-    onExiting: PropTypes.func,
-    onExited: PropTypes.func,
-    onExitComplete: PropTypes.func,
-    animationStyle: PropTypes.oneOf([
-        'fromLeft',
-        'fromRight',
-        'fromTop',
-        'fromBottom',
-        'fade',
-        'tabs',
-        'page',
-        'pageBack',
-    ]),
-    animatePresenceProps: PropTypes.object,
-    motionProps: PropTypes.object,
-    children: PropTypes.any,
-};
 export default Fade;

package/components/feedback/Feedback.d.ts

@@ -0,0 +1,2 @@
+declare const Feedback: () => null;
+export default Feedback;

package/components/feedback/Feedback.js

@@ -0,0 +1,5 @@
+import 'react';
+const Feedback = () => {
+    return null;
+};
+export default Feedback;

package/components/filepicker/FilePicker.d.ts

@@ -1,30 +1,58 @@
+import { type ReactNode } from 'react';
+type FilePickerRenderProps = {
+    isDragActive: boolean;
+};
+export type FilePickerProps = {
+    /**
+     * Defines the file picker display mode.
+     *
+     * Possible values are `'button'` for a single button, `'dropzone'` for a custom dropzone passed as child function,
+     * or `'full'` for showing both.
+     *
+     * @default 'button'
+     */
+    displayMode?: 'button' | 'dropzone' | 'full';
+    /**
+     * Indicating if multiple files may be selected.
+     *
+     * @default true
+     */
+    multiple?: boolean;
+    /**
+     * Text to display on Button if displayMode is set to "button".
+     *
+     * @default 'Select files'
+     */
+    label?: string | ReactNode;
+    /**
+     * Maximum file size.
+     */
+    maxSize?: number;
+    /**
+     * Function called after one or multiple files have been picked.
+     */
+    onPick?: (files: FileList | null) => void;
+    /**
+     * Additional classes for the select button.
+     *
+     * @default ''
+     */
+    className?: string;
+    /**
+     * Object list of accepted Mime Types as keys and file extensions array as value.
+     */
+    accept?: {
+        [mimeType: string]: string[];
+    };
+    /**
+     * Pass a custom dropzone element as function receiving some render props.
+     */
+    children?: ({ isDragActive }: FilePickerRenderProps) => any;
+};
+declare const FilePicker: {
+    (props: FilePickerProps): import("react/jsx-runtime").JSX.Element;
+    DISPLAY_MODE_BUTTON: "button";
+    DISPLAY_MODE_DROPZONE: "dropzone";
+    DISPLAY_MODE_FULL: "full";
+};
 export default FilePicker;
-declare function FilePicker(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace FilePicker {
-    const DISPLAY_MODE_BUTTON: string;
-    const DISPLAY_MODE_DROPZONE: string;
-    const DISPLAY_MODE_FULL: string;
-    namespace defaultProps {
-        const displayMode: string;
-        const multiple: boolean;
-        const label: string;
-        function onPick(): void;
-        const className: string;
-    }
-    namespace propTypes {
-        const displayMode_1: PropTypes.Requireable<string>;
-        export { displayMode_1 as displayMode };
-        const multiple_1: PropTypes.Requireable<boolean>;
-        export { multiple_1 as multiple };
-        const label_1: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-        export { label_1 as label };
-        export const accept: PropTypes.Requireable<object>;
-        export const maxSize: PropTypes.Requireable<number>;
-        const onPick_1: PropTypes.Requireable<(...args: any[]) => any>;
-        export { onPick_1 as onPick };
-        const className_1: PropTypes.Requireable<string>;
-        export { className_1 as className };
-        export const children: PropTypes.Requireable<any>;
-    }
-}
-import PropTypes from "prop-types";

package/components/filepicker/FilePicker.js

@@ -1,49 +1,28 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useCallback, useRef } from 'react';
-import PropTypes from 'prop-types';
-import Dropzone, { useDropzone } from 'react-dropzone';
+import { useCallback, useRef } from 'react';
+import Dropzone from 'react-dropzone';
+import noop from 'lodash/noop';
 import Button from '../button/Button';
-const FilePicker = props => {
-    const { label, accept, multiple, maxSize, displayMode, onPick, className, children } = props, remainigProps = __rest(props, ["label", "accept", "multiple", "maxSize", "displayMode", "onPick", "className", "children"]);
-    const dropzoneRef = useRef();
-    const isButton = displayMode === 'button';
-    const isDropzone = displayMode === 'dropzone';
+const FilePicker = (props) => {
+    const { displayMode = 'button', multiple = true, label = 'Select files', maxSize, onPick = noop, className = '', accept, children } = props, remainingProps = __rest(props, ["displayMode", "multiple", "label", "maxSize", "onPick", "className", "accept", "children"]);
+    const dropzoneRef = useRef(null);
     const isFull = displayMode === 'full';
-    const showButton = isButton || isFull;
-    const showDropzone = isDropzone || isFull;
+    const showButton = isFull || displayMode === 'button';
+    const showDropzone = isFull || displayMode === 'dropzone';
     const handleDrop = useCallback((acceptedFiles, rejectedFiles) => {
         const hasImagesType = accept && Object.keys(accept).some(mimeType => mimeType.startsWith('image'));
         const files = hasImagesType
-            ? acceptedFiles.map(file => Object.assign(file, {
-                preview: URL.createObjectURL(file),
-            }))
+            ? acceptedFiles.map(file => Object.assign(file, { preview: URL.createObjectURL(file) }))
             : acceptedFiles;
         onPick(files, rejectedFiles);
     }, [onPick, accept]);
-    const onOpenClick = () => dropzoneRef.current.open();
-    return (_jsxs("div", Object.assign({ className: 'FilePicker' }, { children: [showButton && (_jsx(Button, Object.assign({ onClick: onOpenClick, className: className }, { children: label }))), _jsx(Dropzone, Object.assign({}, remainigProps, { onDrop: handleDrop, accept: accept, multiple: multiple, maxSize: maxSize, ref: dropzoneRef }, { children: ({ getRootProps, getInputProps, isDragActive }) => {
+    const handleClick = () => { var _a; return (_a = dropzoneRef.current) === null || _a === void 0 ? void 0 : _a.open(); };
+    return (_jsxs("div", Object.assign({ className: 'FilePicker' }, { children: [showButton && (_jsx(Button, Object.assign({ onClick: handleClick, className: className }, { children: label }))), _jsx(Dropzone, Object.assign({}, remainingProps, { onDrop: handleDrop, accept: accept, multiple: multiple, maxSize: maxSize, ref: dropzoneRef }, { children: ({ getRootProps, getInputProps, isDragActive }) => {
                     return (_jsxs("div", Object.assign({}, getRootProps(), { children: [_jsx("input", Object.assign({}, getInputProps())), showDropzone && children && children({ isDragActive })] })));
                 } }))] })));
 };
 FilePicker.DISPLAY_MODE_BUTTON = 'button';
 FilePicker.DISPLAY_MODE_DROPZONE = 'dropzone';
 FilePicker.DISPLAY_MODE_FULL = 'full';
-FilePicker.defaultProps = {
-    displayMode: 'button',
-    multiple: true,
-    label: 'Select Files',
-    onPick: () => { },
-    className: '',
-};
-FilePicker.propTypes = {
-    displayMode: PropTypes.string /* Display mode: 'dropzone' / 'button' / 'full' */,
-    multiple: PropTypes.bool /* Allow multiple file selections or not */,
-    label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]) /* Text to display on Button */,
-    accept: PropTypes.object /* Object list of accepted Mime Types as keys and file extensions array as value */,
-    maxSize: PropTypes.number /* Maximum File Size */,
-    onPick: PropTypes.func /* Pick callback */,
-    className: PropTypes.string /* Custom className for the displayed component (dropzone/button) */,
-    children: PropTypes.any,
-};
 export default FilePicker;

package/components/listMenu/ListMenu.d.ts

@@ -1,44 +1,61 @@
+import { type ReactNode } from 'react';
+import { type ListMenuNavItem, type ListMenuItem } from './ListMenuGroup';
+export type ListMenuProps<T extends ListMenuNavItem> = {
+    /**
+     * List of menu item groups to be shown.
+     */
+    menuItems: ListMenuItem<T>[];
+    /**
+     * Enables the filter.
+     *
+     * @default false
+     */
+    enableFilter?: boolean;
+    /**
+     * Focus the filter input.
+     *
+     * @default false
+     */
+    focusFilter?: boolean;
+    /**
+     * Define the attribute key for filtering.
+     *
+     * @default 'key'
+     */
+    filterKey?: keyof T;
+    /**
+     * The placeholder text for the filter input.
+     */
+    filterPlaceholder?: string;
+    /**
+     * A localized message to be shown when the filter result is empty.
+     */
+    notFoundMessage?: string | ReactNode;
+    /**
+     * The menu uses collapses on smaller screens using an expander panel.
+     *
+     * @default true
+     */
+    responsive?: boolean;
+    /**
+     * Enables automatic closing of the expander panel.
+     *
+     * Only relevant when using the `responsive` flag. Note: Make sure to not stop the events from bubbling up when
+     * clicking on a list item!
+     *
+     * Using `event.stopPropagation()` will prevent the panel from closing.
+     *
+     * @default true
+     */
+    autoClose?: boolean;
+    /**
+     * Additional classes to be set on the menu group element.
+     */
+    groupClassName?: string;
+    /**
+     * Additional classes to be set on the wrapper element.
+     */
+    className?: string;
+};
+declare const ListMenu: <T extends ListMenuNavItem>(props: ListMenuProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default ListMenu;
-declare function ListMenu(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace ListMenu {
-    namespace defaultProps {
-        const menuItems: never[];
-        const enableFilter: boolean;
-        const focusFilter: boolean;
-        const className: string;
-        const groupClassName: string;
-        const responsive: boolean;
-        const autoClose: boolean;
-        const filterKey: string;
-    }
-    namespace propTypes {
-        const menuItems_1: PropTypes.Validator<(PropTypes.InferProps<{
-            group: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-            groupNavItem: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-            navItems: PropTypes.Validator<(PropTypes.InferProps<{
-                key: PropTypes.Validator<string>;
-                item: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
-                disabled: PropTypes.Requireable<boolean>;
-            }> | null | undefined)[]>;
-            isSubItem: PropTypes.Requireable<boolean>;
-        }> | null | undefined)[]>;
-        export { menuItems_1 as menuItems };
-        const enableFilter_1: PropTypes.Requireable<boolean>;
-        export { enableFilter_1 as enableFilter };
-        const focusFilter_1: PropTypes.Requireable<boolean>;
-        export { focusFilter_1 as focusFilter };
-        const filterKey_1: PropTypes.Requireable<string>;
-        export { filterKey_1 as filterKey };
-        export const filterPlaceholder: PropTypes.Requireable<string>;
-        export const notFoundMessage: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-        const groupClassName_1: PropTypes.Requireable<string>;
-        export { groupClassName_1 as groupClassName };
-        const className_1: PropTypes.Requireable<string>;
-        export { className_1 as className };
-        const responsive_1: PropTypes.Requireable<boolean>;
-        export { responsive_1 as responsive };
-        const autoClose_1: PropTypes.Requireable<boolean>;
-        export { autoClose_1 as autoClose };
-    }
-}
-import PropTypes from "prop-types";