@rio-cloud/rio-uikit 0.16.4-beta.2 → 0.16.4-beta.20

package/components/dropdown/DropdownToggleButton.js

@@ -1,19 +1,19 @@
-import { __rest } from "tslib";
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-const getSizeClassName = bsSize => {
-    return (bsSize === 'xs' && 'btn-xs') || (bsSize === 'sm' && 'btn-sm') || (bsSize === 'lg' && 'btn-lg');
-};
-const DropdownToggleButton = React.forwardRef((props, ref) => {
-    const { id, bsSize, bsStyle, disabled, iconOnly, splitButton, className, children } = props, remainingProps = __rest(props, ["id", "bsSize", "bsStyle", "disabled", "iconOnly", "splitButton", "className", "children"]);
-    const labelButtonClasses = classNames(!splitButton && 'dropdown-toggle', 'btn', `btn-${bsStyle}`, getSizeClassName(bsSize), iconOnly && 'btn-icon-only', disabled && 'disabled', className && !splitButton && className);
-    return (_jsx("button", Object.assign({}, remainingProps, { id: splitButton ? `button-${id}` : id, role: 'button', type: 'button', className: labelButtonClasses, ref: ref }, { children: children })));
-});
-export default DropdownToggleButton;
-DropdownToggleButton.propTypes = {
-    disabled: PropTypes.bool,
-    bsStyle: PropTypes.oneOf(['default', 'primary', 'info', 'warning', 'danger', 'success', 'link', 'muted']),
-    className: PropTypes.string,
-};
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+const getSizeClassName = bsSize => {
+    return (bsSize === 'xs' && 'btn-xs') || (bsSize === 'sm' && 'btn-sm') || (bsSize === 'lg' && 'btn-lg');
+};
+const DropdownToggleButton = React.forwardRef((props, ref) => {
+    const { id, bsSize, bsStyle, disabled, iconOnly, splitButton, className, children } = props, remainingProps = __rest(props, ["id", "bsSize", "bsStyle", "disabled", "iconOnly", "splitButton", "className", "children"]);
+    const labelButtonClasses = classNames(!splitButton && 'dropdown-toggle', 'btn', `btn-${bsStyle}`, getSizeClassName(bsSize), iconOnly && 'btn-icon-only', disabled && 'disabled', className && !splitButton && className);
+    return (_jsx("button", Object.assign({}, remainingProps, { id: splitButton ? `button-${id}` : id, role: 'button', type: 'button', className: labelButtonClasses, ref: ref }, { children: children })));
+});
+export default DropdownToggleButton;
+DropdownToggleButton.propTypes = {
+    disabled: PropTypes.bool,
+    bsStyle: PropTypes.oneOf(['default', 'primary', 'info', 'warning', 'danger', 'success', 'link', 'muted']),
+    className: PropTypes.string,
+};

package/components/dropdown/SimpleButtonDropdown.d.ts

@@ -1,2 +1,2 @@
-export default SimpleButtonDropdown;
-declare function SimpleButtonDropdown(props: any): JSX.Element;
+export default SimpleButtonDropdown;
+declare function SimpleButtonDropdown(props: any): import("react/jsx-runtime").JSX.Element;

package/components/dropdown/SimpleButtonDropdown.js

@@ -1,5 +1,5 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import ButtonDropdown from './ButtonDropdown';
-const SimpleButtonDropdown = props => _jsx(ButtonDropdown, Object.assign({}, props, { noCaret: true }));
-export default SimpleButtonDropdown;
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import ButtonDropdown from './ButtonDropdown';
+const SimpleButtonDropdown = props => _jsx(ButtonDropdown, Object.assign({}, props, { noCaret: true }));
+export default SimpleButtonDropdown;

package/components/dropdown/SingleButtonDropdown.d.ts

@@ -1,2 +1,2 @@
-export default SingleButtonDropdown;
-declare function SingleButtonDropdown(props: any): JSX.Element;
+export default SingleButtonDropdown;
+declare function SingleButtonDropdown(props: any): import("react/jsx-runtime").JSX.Element;

package/components/dropdown/SingleButtonDropdown.js

@@ -1,5 +1,5 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import ButtonDropdown from './ButtonDropdown';
-const SingleButtonDropdown = props => _jsx(ButtonDropdown, Object.assign({}, props));
-export default SingleButtonDropdown;
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import ButtonDropdown from './ButtonDropdown';
+const SingleButtonDropdown = props => _jsx(ButtonDropdown, Object.assign({}, props));
+export default SingleButtonDropdown;

package/components/dropdown/SplitButtonDropdown.d.ts

@@ -1,2 +1,2 @@
-export default SplitButtonDropdown;
-declare function SplitButtonDropdown(props: any): JSX.Element;
+export default SplitButtonDropdown;
+declare function SplitButtonDropdown(props: any): import("react/jsx-runtime").JSX.Element;

package/components/dropdown/SplitButtonDropdown.js

@@ -1,5 +1,5 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import ButtonDropdown from './ButtonDropdown';
-const SplitButtonDropdown = props => _jsx(ButtonDropdown, Object.assign({}, props, { splitButton: true }));
-export default SplitButtonDropdown;
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import ButtonDropdown from './ButtonDropdown';
+const SplitButtonDropdown = props => _jsx(ButtonDropdown, Object.assign({}, props, { splitButton: true }));
+export default SplitButtonDropdown;

package/components/dropdown/SplitCaretButton.d.ts

@@ -1,3 +1,3 @@
-export default SplitCaretButton;
-declare const SplitCaretButton: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from "react";
+export default SplitCaretButton;
+declare const SplitCaretButton: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from "react";

package/components/dropdown/SplitCaretButton.js

@@ -1,17 +1,17 @@
-import { __rest } from "tslib";
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import Caret from './Caret';
-const SplitCaretButton = React.forwardRef((_a, ref) => {
-    var { disabled, bsStyle, className } = _a, remainingProps = __rest(_a, ["disabled", "bsStyle", "className"]);
-    const splitCaretButtonClasses = classNames('dropdown-toggle', 'btn', `btn-${bsStyle}`, disabled && 'disabled', className);
-    return (_jsx("button", Object.assign({}, remainingProps, { role: 'button', type: 'button', className: splitCaretButtonClasses, ref: ref }, { children: _jsx(Caret, {}) })));
-});
-export default SplitCaretButton;
-SplitCaretButton.propTypes = {
-    disabled: PropTypes.bool,
-    bsStyle: PropTypes.oneOf(['default', 'primary', 'info', 'warning', 'danger', 'success', 'link', 'muted']),
-    className: PropTypes.string,
-};
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Caret from './Caret';
+const SplitCaretButton = React.forwardRef((_a, ref) => {
+    var { disabled, bsStyle, className } = _a, remainingProps = __rest(_a, ["disabled", "bsStyle", "className"]);
+    const splitCaretButtonClasses = classNames('dropdown-toggle', 'btn', `btn-${bsStyle}`, disabled && 'disabled', className);
+    return (_jsx("button", Object.assign({}, remainingProps, { role: 'button', type: 'button', className: splitCaretButtonClasses, ref: ref }, { children: _jsx(Caret, {}) })));
+});
+export default SplitCaretButton;
+SplitCaretButton.propTypes = {
+    disabled: PropTypes.bool,
+    bsStyle: PropTypes.oneOf(['default', 'primary', 'info', 'warning', 'danger', 'success', 'link', 'muted']),
+    className: PropTypes.string,
+};

package/components/dropdown/menuItemsPropTypes.d.ts

@@ -1,9 +1,9 @@
-declare const _default: PropTypes.Requireable<(PropTypes.InferProps<{
-    value: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-    disabled: PropTypes.Requireable<boolean>;
-    divider: PropTypes.Requireable<boolean>;
-    header: PropTypes.Requireable<boolean>;
-    onSelect: PropTypes.Requireable<(...args: any[]) => any>;
-}> | null | undefined)[]>;
-export default _default;
-import PropTypes from "prop-types";
+declare const _default: PropTypes.Requireable<(PropTypes.InferProps<{
+    value: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
+    disabled: PropTypes.Requireable<boolean>;
+    divider: PropTypes.Requireable<boolean>;
+    header: PropTypes.Requireable<boolean>;
+    onSelect: PropTypes.Requireable<(...args: any[]) => any>;
+}> | null | undefined)[]>;
+export default _default;
+import PropTypes from "prop-types";

package/components/dropdown/menuItemsPropTypes.js

@@ -1,8 +1,8 @@
-import PropTypes from 'prop-types';
-export default PropTypes.arrayOf(PropTypes.shape({
-    value: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    disabled: PropTypes.bool,
-    divider: PropTypes.bool,
-    header: PropTypes.bool,
-    onSelect: PropTypes.func,
-}));
+import PropTypes from 'prop-types';
+export default PropTypes.arrayOf(PropTypes.shape({
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    disabled: PropTypes.bool,
+    divider: PropTypes.bool,
+    header: PropTypes.bool,
+    onSelect: PropTypes.func,
+}));

package/components/editableContent/EditableContent.d.ts

@@ -0,0 +1,86 @@
+import React, { type PropsWithChildren } from 'react';
+export type EditableContentProps = {
+    /**
+     * Visibility flag used to control edit mode from outside.
+     * @default false
+     */
+    show?: boolean;
+    /**
+     * Callback function triggered when the save button is clicked.
+     * @param value
+     * @returns
+     */
+    onSave?: (value: string) => void;
+    /**
+     * Callback function triggered when the cancel button is clicked.
+     */
+    onCancel?: VoidFunction;
+    /**
+     * Callback function triggered when the input gets focused.
+     */
+    onFocus?: VoidFunction;
+    /**
+     * Callback function triggered when input looses it's focus.
+     */
+    onBlur?: VoidFunction;
+    /**
+     * Callback function triggered when entering the edit mode.
+     */
+    onEditMode?: VoidFunction;
+    /**
+     * Validation function to intercept saving and prevent save on error.
+     */
+    onSaveValidation?: (value: string) => boolean;
+    /**
+     * The error message that shall be shown to the user in case the validation fails.
+     */
+    errorMessage?: React.ReactNode;
+    /**
+     * Use this prop to define a custom editor input component like Select, NumberInput, TimePicker or DatePicker.
+     * Handling input state changes of a custom editor need to be handled outside of this component.
+     * By default the EditableContent uses a built-in textarea to allow resizing for larger text.
+     */
+    customEditor?: React.ReactNode;
+    /**
+     * Offset value to control the vertical position for the editor in case the text element has
+     * borders, spacings different text sizes.
+     * @default 0
+     */
+    editorOffsetTop?: number;
+    /**
+     * Offset value to control the horizontal position for the editor in case the text element has
+     * borders, spacings different text sizes.
+     * @default 0
+     */
+    editorOffsetLeft?: number;
+    /**
+     * Defines the input and button size. Use 'lg' for headlines.
+     * @default 'md'
+     */
+    size?: 'md' | 'lg';
+    /**
+     * Defines if the internal textarea is allowed to resize vertically.
+     * This comes in handy for larger text and when using multiple input rows.
+     * @default false
+     */
+    allowResize?: boolean;
+    /**
+     * Defines the number of rows to use by the internal textarea component.
+     * @default 1
+     */
+    inputRows?: number;
+    /**
+     * Additional classes to be set on the editor input itself.
+     */
+    inputClassName?: string;
+    /**
+     * Additional classes to be set on the editor wrapper element.
+     */
+    editorClassName?: string;
+    /**
+     * Additional classes to be set on the text wrapper element.
+     */
+    className?: string;
+};
+declare const EditableContent: (props: PropsWithChildren<EditableContentProps>) => import("react/jsx-runtime").JSX.Element;
+export default EditableContent;

package/components/editableContent/EditableContent.js

@@ -0,0 +1,109 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useMemo } from 'react';
+import noop from 'lodash/fp/noop';
+import classNames from 'classnames';
+import { usePopper } from 'react-popper';
+import { createPortal } from 'react-dom';
+import { getOrCreatePortalRoot } from '../../utils/portalRoot';
+import useEsc from '../../hooks/useEsc';
+import useFocusTrap from '../../hooks/useFocusTrap';
+// Features
+// [x] Hide children with opacity 0
+// [x] Allow custom editor elements
+// [x] Use textarea for longer text
+// [x] Use focus trap
+// [x] Keyboard support mit esc and tab+enter to accept
+// [-] If space, get the width of the text to make the input larger - no nice solution
+// [x] Control edit mode from outside
+// This offset takes into account the padding of the overlay and the padding/border of the edit component (input).
+// This works best if the text is wrapped within a single <span> tag and has a dotted bottom border only.
+// External offset defined by the using component will be starting from 0 for easier understanding.
+const POPOVER_OFFSET_TOP = -13;
+const POPOVER_OFFSET_LEFT = -18;
+const DEFAULT_TEXTAREA_ROWS = 1;
+const EditableContent = (props) => {
+    const { show = false, onSave = noop, onCancel = noop, onFocus = noop, onBlur = noop, onEditMode = noop, onSaveValidation = () => true, errorMessage, allowResize = false, inputRows = DEFAULT_TEXTAREA_ROWS, editorOffsetTop = 0, editorOffsetLeft = 0, customEditor, size = 'md', className = '', inputClassName = '', editorClassName = '', children } = props, remainingProps = __rest(props, ["show", "onSave", "onCancel", "onFocus", "onBlur", "onEditMode", "onSaveValidation", "errorMessage", "allowResize", "inputRows", "editorOffsetTop", "editorOffsetLeft", "customEditor", "size", "className", "inputClassName", "editorClassName", "children"]);
+    const [isEditMode, setIsEditMode] = useState(show);
+    const [inputValue, setInputValue] = useState('');
+    const [hasError, setHasError] = useState(false);
+    const [referenceElement, setReferenceElement] = useState(null);
+    const [popperElement, setPopperElement] = useState(null);
+    const hasCustomControl = !!customEditor;
+    // Close edit mode on "esc"
+    useEsc(() => handleCloseEditMode());
+    // Trap focus on the popper element
+    useFocusTrap(popperElement);
+    // Input ref used to focus inside when entering edit mode
+    const inputRef = useRef(null);
+    useEffect(() => {
+        var _a, _b;
+        if (inputRef.current && isEditMode) {
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.select();
+        }
+    }, [isEditMode, inputRef.current]);
+    const customModifier = useMemo(() => ({
+        name: 'offset',
+        options: {
+            offset: ({ reference }) => {
+                const leftOffset = POPOVER_OFFSET_LEFT + editorOffsetLeft;
+                const topOffset = -(reference.height - (POPOVER_OFFSET_TOP + editorOffsetTop));
+                return [leftOffset, topOffset];
+            },
+        },
+    }), []);
+    const popperConfig = {
+        placement: 'bottom-start',
+        modifiers: [customModifier],
+        strategy: 'absolute',
+    };
+    const { styles, attributes } = usePopper(referenceElement, popperElement, popperConfig);
+    const handleEditMode = () => {
+        var _a;
+        setIsEditMode(true);
+        setInputValue((_a = referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.textContent) !== null && _a !== void 0 ? _a : '');
+        onEditMode();
+    };
+    const handleInputChange = (event) => {
+        setInputValue(event.target.value);
+    };
+    const handleKeyDown = (event) => {
+        // Prevent line breaks when textarea is a single line
+        if (event.key === 'Enter' && inputRows === DEFAULT_TEXTAREA_ROWS) {
+            event.preventDefault();
+        }
+    };
+    const handleCloseEditMode = () => {
+        setIsEditMode(false);
+        onCancel();
+    };
+    const handleSaveChanges = () => {
+        const isInputValid = onSaveValidation(inputValue);
+        setHasError(!isInputValid);
+        if (isInputValid) {
+            setIsEditMode(false);
+            onSave(inputValue);
+        }
+    };
+    // Control edit mode from outside for instance if text element got focus
+    // and user used "Enter" key to enter edit mode
+    const [previousShow, setPreviousShow] = useState(show);
+    if (show !== previousShow) {
+        if (show) {
+            handleEditMode();
+        }
+        setPreviousShow(show);
+    }
+    const textWrapperClasses = classNames(className, isEditMode && 'opacity-0');
+    const overlayWrapperClasses = classNames('EditableContentEditor', 'display-flex gap-5', 'padding-5', 'rounded', 'shadow-accent', 'z-index-max', 'bg-white', editorClassName);
+    const inputWrapperClasses = classNames('display-flex flex-column gap-5', 'margin-0', !hasCustomControl && 'form-group has-feedback', hasError && 'has-error');
+    const inputClasses = classNames('form-control', size === 'lg' && 'input-lg', inputClassName);
+    const inputStyle = {
+        minWidth: '100px',
+        resize: allowResize ? 'vertical' : 'none',
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("span", Object.assign({ ref: setReferenceElement, onClick: handleEditMode, className: textWrapperClasses }, { children: children })), isEditMode &&
+                createPortal(_jsxs("div", Object.assign({ className: overlayWrapperClasses, onClick: event => event.stopPropagation(), ref: setPopperElement, style: styles.popper }, attributes.popper, remainingProps, { children: [_jsxs("div", Object.assign({ className: inputWrapperClasses }, { children: [hasCustomControl && customEditor, !hasCustomControl && (_jsx("textarea", { ref: inputRef, className: inputClasses, value: inputValue, onChange: handleInputChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: handleKeyDown, style: inputStyle, rows: inputRows })), hasError && _jsx("div", Object.assign({ className: 'help-block position-relative' }, { children: errorMessage }))] })), _jsxs("div", Object.assign({ className: 'display-flex gap-5' }, { children: [_jsx("button", Object.assign({ type: 'button', onClick: handleCloseEditMode, className: `EditableContentCancel btn btn-default btn-icon-only btn-${size}` }, { children: _jsx("span", { className: 'rioglyph rioglyph-remove' }) })), _jsx("button", Object.assign({ type: 'button', onClick: handleSaveChanges, className: `EditableContentSave btn btn-primary btn-icon-only btn-${size}` }, { children: _jsx("span", { className: 'rioglyph rioglyph-ok' }) }))] }))] })), getOrCreatePortalRoot())] }));
+};
+export default EditableContent;

package/components/expander/ExpanderList.d.ts

@@ -1,39 +1,75 @@
-declare class ExpanderList extends React.Component<any, any, any> {
-    constructor(...args: any[]);
-    state: {
-        items: any;
-    };
-    parseItems(items: any): any;
-    UNSAFE_componentWillReceiveProps(nextProps: any): void;
-    handleExpand(itemToExpand: any): void;
-    getHeaderElement(item: any): JSX.Element;
-    getBodyElement(item: any, isOpen: any, mountOnEnter: any, unmountOnExit: any): JSX.Element | undefined;
-    render(): JSX.Element;
-}
-declare namespace ExpanderList {
-    namespace defaultProps {
-        const items: never[];
-        const mountOnEnter: boolean;
-        const unmountOnExit: boolean;
-    }
-    namespace propTypes {
-        export const className: PropTypes.Requireable<string>;
-        const items_1: PropTypes.Validator<(PropTypes.InferProps<{
-            id: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
-            header: PropTypes.Validator<NonNullable<NonNullable<PropTypes.ReactNodeLike>>>;
-            body: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-            open: PropTypes.Requireable<boolean>;
-            className: PropTypes.Requireable<string>;
-            headerClassName: PropTypes.Requireable<string>;
-            bodyClassName: PropTypes.Requireable<string>;
-        }> | null | undefined)[]>;
-        export { items_1 as items };
-        const mountOnEnter_1: PropTypes.Requireable<boolean>;
-        export { mountOnEnter_1 as mountOnEnter };
-        const unmountOnExit_1: PropTypes.Requireable<boolean>;
-        export { unmountOnExit_1 as unmountOnExit };
-    }
-}
-export default ExpanderList;
-import React from "react";
-import PropTypes from "prop-types";
+import React from 'react';
+export type ExpanderListItem = {
+    /**
+     * The "id" property is used to know which item is expanded. It will also be used to control
+     * the component from the outside. It can be a number or a string. If there is no "id" provided,
+     * a unique id is internally generated  which will be used internally for the uncontrolled case.'
+     */
+    id?: string | number;
+    /**
+     * The header content.
+     */
+    header: string | React.ReactNode;
+    /**
+     * The body content. If there is no "body" provided, the list item is not expandable.
+     */
+    body?: string | React.ReactNode;
+    /**
+     * Defines if the item will be expanded or closed by default.
+     */
+    open?: boolean;
+    /**
+     * Callback fired when item toggles to open after a click.
+     */
+    onOpen?: VoidFunction;
+    /**
+     * Callback fired when item toggles to close after a click.
+     */
+    onClose?: VoidFunction;
+    /**
+     * Additional classes to be set on "expander-list-header" node.
+     */
+    headerClassName?: string;
+    /**
+     * Additional classes to be set on "expander-list-body" node.
+     */
+    bodyClassName?: string;
+    /**
+     * Additional classes to be set on list item node.
+     */
+    className?: string;
+};
+export type ExpanderListProps = {
+    /**
+     * List of items to be rendered. The expanded state can be defined via the items `open` prop.
+     */
+    items: ExpanderListItem[];
+    /**
+     * Defines whether the "expander-list-body" is rounded or not.
+     * @default true
+     */
+    rounded?: boolean;
+    /**
+     * Defines whether the "expander-list-body" has a border or not.
+     * @default true
+     */
+    bordered?: boolean;
+    /**
+     * It waits for the first "enter" transition to mount the body component
+     * (add it to the DOM). Set it to false if you want to have the body already mounted.
+     * @default true
+     */
+    mountOnEnter?: boolean;
+    /**
+     * It unmounts the body component (remove it from the DOM) when it is collapsed.
+     * Set it to false to avoid the unmount.
+     * @default true
+     */
+    unmountOnExit?: boolean;
+    /**
+     * Additional classes to be set on the unordered list itself.
+     */
+    className?: string;
+};
+declare const ExpanderList: (props: ExpanderListProps) => import("react/jsx-runtime").JSX.Element;
+export default ExpanderList;