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

package/components/responsiveColumnStripe/ResponsiveColumnStripe.js

@@ -1,54 +1,41 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState, useRef, useEffect, forwardRef } from 'react';
-import PropTypes from 'prop-types';
+import { Children, cloneElement, forwardRef, useEffect, useRef, useState, } from 'react';
 import classNames from 'classnames';
 import findIndex from 'lodash/fp/findIndex';
 import chunk from 'lodash/fp/chunk';
 import { AnimatePresence, motion } from 'framer-motion';
+import noop from 'lodash/noop';
 import useAfterMount from '../../hooks/useAfterMount';
 import useElementSize from '../../hooks/useElementSize';
 import usePrevious from '../../hooks/usePrevious';
-const DEFAULT_MIN_COLUMN_WITH = 300;
-const DEFAULT_MIN_COLUMNS = 1;
-const DEFAULT_MAX_COLUMNS = 5;
-const DEFAULT_COLUMN_WRAPPER_TYPE = 'div';
-const DEFAULT_ACTIVE_PAGE = 0;
 const MIN_WITH_THRESHOLD = 10;
-const ANIMATION_DURATION = 0.2;
+const DEFAULT_TRANSITION = { duration: 0.2 };
 const ANIMATION_NEXT = 'page';
 const ANIMATION_BACK = 'pageBack';
 const COLUMN_ITEM_CLASSNAME = 'ColumnItem';
 const variants = {
-    pageEnter: pageDirection => {
-        return {
-            x: pageDirection === ANIMATION_NEXT ? '60%' : '-60%',
-            opacity: 0,
-        };
-    },
-    pageCenter: () => {
-        return {
-            x: 0,
-            opacity: 1,
-        };
-    },
+    pageEnter: pageDirection => ({
+        x: pageDirection === ANIMATION_NEXT ? '60%' : '-60%',
+        opacity: 0,
+    }),
+    pageCenter: () => ({ x: 0, opacity: 1 }),
 };
-const getFirstColumnItem = node => {
+const getFirstColumnItem = (node) => {
     if ([...node.classList].includes(COLUMN_ITEM_CLASSNAME)) {
         return node;
     }
     return getFirstColumnItem(node.children[0]);
 };
 const ResponsiveColumnStripe = forwardRef((props, ref) => {
-    const { minColumnWith = DEFAULT_MIN_COLUMN_WITH, minColumns = DEFAULT_MIN_COLUMNS, maxColumns = DEFAULT_MAX_COLUMNS, className = '', buttonClassName = '', columnsWrapperClassName = '', onNextClick = () => { }, onPreviousClick = () => { }, stretchLastItems = true, asType = DEFAULT_COLUMN_WRAPPER_TYPE, activePage = DEFAULT_ACTIVE_PAGE, disableAnimation = false, children } = props, remainingProps = __rest(props, ["minColumnWith", "minColumns", "maxColumns", "className", "buttonClassName", "columnsWrapperClassName", "onNextClick", "onPreviousClick", "stretchLastItems", "asType", "activePage", "disableAnimation", "children"]);
-    const ComponentType = asType;
+    const { minColumnWith = 300, minColumns = 1, maxColumns = 5, stretchLastItems = true, activePage = 0, asType: ComponentType = 'div', onPreviousClick = noop, onNextClick = noop, buttonClassName = '', columnsWrapperClassName = '', className = '', disableAnimation = false, children } = props, remainingProps = __rest(props, ["minColumnWith", "minColumns", "maxColumns", "stretchLastItems", "activePage", "asType", "onPreviousClick", "onNextClick", "buttonClassName", "columnsWrapperClassName", "className", "disableAnimation", "children"]);
     const [currentPage, setCurrentPage] = useState(activePage);
     const [columnsPerPage, setColumnsPerPage] = useState(maxColumns);
     const [enableInitialAnimation, setEnableInitialAnimation] = useState(false);
     const [isResizePage, setIsResizePage] = useState(false);
     // The base for reacting on changing width of the wrapping element.
     // It uses a ResizeObserver under the hood.
-    const columnWrapperRef = useRef();
+    const columnWrapperRef = useRef(null);
     const [columnWrapperWidth] = useElementSize(columnWrapperRef);
     const previousPage = usePrevious(currentPage);
     const animationDirection = currentPage > previousPage ? ANIMATION_NEXT : ANIMATION_BACK;
@@ -61,13 +48,13 @@ const ResponsiveColumnStripe = forwardRef((props, ref) => {
         setCurrentPage(activePage);
         setPreviousActivePage(activePage);
     }
-    const updatePageOnColumnsSizeChange = (firstItem, columnsPerPage, children) => {
+    const updatePageOnColumnsSizeChange = (firstItem, perPage) => {
         // Split children in page chunks
-        const itemChunks = chunk(columnsPerPage)(children);
+        const pages = chunk(perPage)(children);
         // find the currently rendered first item inside the chunks.
         // The found chunk index is the new page to render.
         // example of chunks => [['a', 'b', 'c'], ['d']]
-        const targetPage = findIndex(chunk => chunk.some(chunkItem => { var _a; return chunkItem.key === ((_a = firstItem.attributes['data-key']) === null || _a === void 0 ? void 0 : _a.value); }))(itemChunks);
+        const targetPage = findIndex((page) => page.some(pageItem => pageItem.key === firstItem.dataset['key']))(pages);
         if (targetPage !== currentPage) {
             setCurrentPage(targetPage);
         }
@@ -90,7 +77,7 @@ const ResponsiveColumnStripe = forwardRef((props, ref) => {
         const allowForLessColumns = columnsPerPage - 1 >= minColumns;
         const allowForMoreColumns = columnsPerPage + 1 <= maxColumns;
         // The threshold is required to avoid jumping between bigger and smaller after the columns per page
-        // has changed and it continues to resize
+        // has changed, and it continues to resize
         const goSmaller = allowForLessColumns && columnWidth + MIN_WITH_THRESHOLD <= minColumnWith;
         const goBigger = allowForMoreColumns && (columnsPerPage + 1) * minColumnWith <= columnWrapperWidth;
         // During resizing, we don't want any animation
@@ -98,13 +85,13 @@ const ResponsiveColumnStripe = forwardRef((props, ref) => {
         if (goBigger) {
             const newValue = columnsPerPage + 1;
             setColumnsPerPage(newValue);
-            updatePageOnColumnsSizeChange(firstItem, newValue, children);
+            updatePageOnColumnsSizeChange(firstItem, newValue);
             return;
         }
         if (goSmaller) {
             const newValue = columnsPerPage - 1;
             setColumnsPerPage(newValue);
-            updatePageOnColumnsSizeChange(firstItem, newValue, children);
+            updatePageOnColumnsSizeChange(firstItem, newValue);
             return;
         }
     }, [columnWrapperWidth, columnWrapperRef.current, children, columnsPerPage]);
@@ -138,28 +125,16 @@ const ResponsiveColumnStripe = forwardRef((props, ref) => {
     const columnClassName = disableNextPage && !stretchLastItems ? 'flex-0-1' : 'flex-1-1';
     // Use the given custom component type "div" or any other. Clone the children to inject certain
     // properties that are required to stretch the items and deal with their size.
-    const columns = (_jsx(ComponentType, Object.assign({ className: mergedColumnsWrapperClassName }, { children: React.Children.map(columnsToDisplay, column => {
+    const columns = (_jsx(ComponentType, Object.assign({ className: mergedColumnsWrapperClassName }, { children: Children.map(columnsToDisplay, column => {
             var _a;
-            return React.cloneElement(column, {
+            return cloneElement(column, {
                 className: `${COLUMN_ITEM_CLASSNAME} ${columnClassName} ${((_a = column.props) === null || _a === void 0 ? void 0 : _a.className) || ''}`,
                 // style: { ...column.props?.style, minWidth: `${minColumnWith}px` },
                 'data-key': column.key,
             });
         }) })));
-    return (_jsxs("div", Object.assign({}, remainingProps, { ref: ref, className: wrapperClassName }, { children: [showPageButtons && (_jsx("div", Object.assign({ className: previousButtonClassName, onClick: handlePrevClick }, { children: _jsx("span", { className: 'rioglyph rioglyph-chevron-left' }) }))), _jsxs("div", Object.assign({ className: 'ColumnsArea flex-1-1 overflow-hidden', ref: columnWrapperRef }, { children: [disableAnimation || isResizePage ? columns : null, !disableAnimation && !isResizePage && (_jsx(AnimatePresence, Object.assign({ exitBeforeEnter: true, custom: animationDirection }, { children: _jsx(motion.div, Object.assign({ variants: variants, initial: enableInitialAnimation ? 'pageEnter' : false, animate: 'pageCenter', custom: animationDirection, transition: { duration: ANIMATION_DURATION } }, { children: columns }), currentPage) })))] })), showPageButtons && (_jsx("div", Object.assign({ className: nextButtonClassName, onClick: handleNextClick }, { children: _jsx("span", { className: 'rioglyph rioglyph-chevron-right' }) })))] })));
+    return (_jsxs("div", Object.assign({}, remainingProps, { ref: ref, className: wrapperClassName }, { children: [showPageButtons && (_jsx("div", Object.assign({ className: previousButtonClassName, onClick: handlePrevClick }, { children: _jsx("span", { className: 'rioglyph rioglyph-chevron-left' }) }))), _jsxs("div", Object.assign({ className: 'ColumnsArea flex-1-1 overflow-hidden', ref: columnWrapperRef }, { children: [disableAnimation || isResizePage ? columns : null, !disableAnimation && !isResizePage && (
+                    // @ts-ignore-next-line
+                    _jsx(AnimatePresence, Object.assign({ exitBeforeEnter: true, custom: animationDirection }, { children: _jsx(motion.div, Object.assign({ variants: variants, initial: enableInitialAnimation ? 'pageEnter' : false, animate: 'pageCenter', custom: animationDirection, transition: DEFAULT_TRANSITION }, { children: columns }), currentPage) })))] })), showPageButtons && (_jsx("div", Object.assign({ className: nextButtonClassName, onClick: handleNextClick }, { children: _jsx("span", { className: 'rioglyph rioglyph-chevron-right' }) })))] })));
 });
 export default ResponsiveColumnStripe;
-ResponsiveColumnStripe.propTypes = {
-    minColumnWith: PropTypes.number,
-    minColumns: PropTypes.number,
-    maxColumns: PropTypes.number,
-    className: PropTypes.string,
-    buttonClassName: PropTypes.string,
-    columnsWrapperClassName: PropTypes.string,
-    onNextClick: PropTypes.func,
-    onPreviousClick: PropTypes.func,
-    stretchLastItems: PropTypes.bool,
-    asType: PropTypes.string,
-    activePage: PropTypes.number,
-    disableAnimation: PropTypes.bool,
-};

package/components/rules/RuleConnector.d.ts

@@ -1,39 +1,62 @@
+import { type HTMLAttributes, type PropsWithChildren } from 'react';
+export type RuleConnectorProps = {
+    /**
+     * The placement for the connector.
+     *
+     * Possible values are `start`, `center` and `end`.
+     *
+     * @default 'center'
+     */
+    placement?: 'start' | 'center' | 'end';
+    /**
+     * The rioglyph icon name.
+     *
+     * @default 'rioglyph-plus'
+     */
+    icon?: string;
+    /**
+     * Defines whether the connector is shown.
+     *
+     * @default false
+     */
+    hidden?: boolean;
+    /**
+     * Background color of the connector itself.
+     *
+     * @default 'bg-lightest'
+     */
+    background?: string;
+    /**
+     * Background color of the surrounding area where the rule containers are placed.
+     *
+     * @default 'bg-white'
+     */
+    pageBackground?: string;
+    /**
+     * Classes to be set on the connector content.
+     *
+     * @default 'text-color-light'
+     */
+    contentClassName?: string;
+    /**
+     * Defines whether the connector has a border.
+     *
+     * @default false
+     */
+    hasBorder?: boolean;
+    /**
+     * The border color class name.
+     */
+    borderColor?: string;
+    /**
+     * Additional classes for the wrapper element.
+     */
+    className?: string;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'className'>;
+declare const RuleConnector: {
+    (props: PropsWithChildren<RuleConnectorProps>): import("react/jsx-runtime").JSX.Element;
+    START: string;
+    CENTER: string;
+    END: string;
+};
 export default RuleConnector;
-declare function RuleConnector(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace RuleConnector {
-    const START: string;
-    const CENTER: string;
-    const END: string;
-    namespace defaultProps {
-        const placement: string;
-        const icon: string;
-        const hidden: boolean;
-        const background: string;
-        const pageBackground: string;
-        const contentClassName: string;
-        const hasBorder: boolean;
-        const borderColor: string;
-        const className: string;
-    }
-    namespace propTypes {
-        const placement_1: PropTypes.Requireable<string>;
-        export { placement_1 as placement };
-        const icon_1: PropTypes.Requireable<string>;
-        export { icon_1 as icon };
-        const hidden_1: PropTypes.Requireable<boolean>;
-        export { hidden_1 as hidden };
-        const background_1: PropTypes.Requireable<string>;
-        export { background_1 as background };
-        const pageBackground_1: PropTypes.Requireable<string>;
-        export { pageBackground_1 as pageBackground };
-        const contentClassName_1: PropTypes.Requireable<string>;
-        export { contentClassName_1 as contentClassName };
-        const hasBorder_1: PropTypes.Requireable<boolean>;
-        export { hasBorder_1 as hasBorder };
-        const borderColor_1: PropTypes.Requireable<string>;
-        export { borderColor_1 as borderColor };
-        const className_1: PropTypes.Requireable<string>;
-        export { className_1 as className };
-    }
-}
-import PropTypes from "prop-types";

package/components/rules/RuleConnector.js

@@ -1,14 +1,14 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import PropTypes from 'prop-types';
+// @ts-ignore-next-line importsNotUsedAsValues
+import 'react';
 import classNames from 'classnames';
-const getBorderColorFromBg = bg => bg.replace('bg', 'border-color');
-const RuleConnector = props => {
-    const { placement, icon, hidden, background, pageBackground, contentClassName, hasBorder, borderColor, className, children } = props, remainingProps = __rest(props, ["placement", "icon", "hidden", "background", "pageBackground", "contentClassName", "hasBorder", "borderColor", "className", "children"]);
+const getBorderColorFromBg = (bg) => bg.replace('bg', 'border-color');
+const commonRoundedClasses = classNames('width-20', 'height-20', 'rounded-circle', 'position-relative', 'z-index-2', 'box-sizing-content-box');
+const commonRoundedBorderClippingClasses = classNames('position-relative', 'width-20', 'height-20');
+const RuleConnector = (props) => {
+    const { placement = 'center', icon = 'rioglyph-plus', hidden = false, background = 'bg-lightest', pageBackground = 'bg-white', contentClassName = 'text-color-light', hasBorder = false, borderColor = '', className = '', children } = props, remainingProps = __rest(props, ["placement", "icon", "hidden", "background", "pageBackground", "contentClassName", "hasBorder", "borderColor", "className", "children"]);
     const wrapperClassNames = classNames('RuleConnector', 'height-20', 'display-flex', `justify-content-${placement}`, 'align-items-center', 'position-relative', hidden && 'opacity-0', className);
-    const commonRoundedClasses = classNames('width-20', 'height-20', 'rounded-circle', 'position-relative', 'z-index-2', 'box-sizing-content-box');
-    const commonRoundedBorderClippingClasses = classNames('position-relative', 'width-20', 'height-20');
     const leftRoundedBox = classNames('margin-right--10', commonRoundedClasses, pageBackground, hasBorder && `border ${borderColor}`);
     const leftRoundedBoxBorderClipping = classNames('right-50pct', commonRoundedBorderClippingClasses, pageBackground);
     const contentWrapperClassNames = classNames('padding-left-20 padding-right-20', 'z-index-1', background, hasBorder && `border ${getBorderColorFromBg(background)}`);
@@ -19,26 +19,4 @@ const RuleConnector = props => {
 RuleConnector.START = 'start';
 RuleConnector.CENTER = 'center';
 RuleConnector.END = 'end';
-RuleConnector.defaultProps = {
-    placement: 'center',
-    icon: 'rioglyph-plus',
-    hidden: false,
-    background: 'bg-lightest',
-    pageBackground: 'bg-white',
-    contentClassName: 'text-color-light',
-    hasBorder: false,
-    borderColor: '',
-    className: '',
-};
-RuleConnector.propTypes = {
-    placement: PropTypes.oneOf([RuleConnector.START, RuleConnector.CENTER, RuleConnector.END]),
-    icon: PropTypes.string,
-    hidden: PropTypes.bool,
-    background: PropTypes.string,
-    pageBackground: PropTypes.string,
-    contentClassName: PropTypes.string,
-    hasBorder: PropTypes.bool,
-    borderColor: PropTypes.string,
-    className: PropTypes.string,
-};
 export default RuleConnector;

package/components/rules/RuleContainer.d.ts

@@ -1,28 +1,43 @@
+import { type HTMLAttributes, type JSX, type PropsWithChildren } from 'react';
+export type RuleContainerProps = {
+    /**
+     * Defines whether the container is shown.
+     *
+     * @default true
+     */
+    show?: boolean;
+    /**
+     * Determines the container style for when no rule option is selected.
+     *
+     * It also hides the connector in this case.
+     *
+     * @default false
+     */
+    unchecked?: boolean;
+    /**
+     * The box background class name.
+     *
+     * @default 'bg-lightest'
+     */
+    background?: string;
+    /**
+     * The border color class name.
+     */
+    borderColor?: string;
+    /**
+     * Defines whether the connector is shown.
+     *
+     * @default false
+     */
+    hideConnector?: boolean;
+    /**
+     * Overwrites the default connector.
+     */
+    customConnector?: string | JSX.Element;
+    /**
+     * Additional classes for the wrapper element.
+     */
+    className?: string;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'className'>;
+declare const RuleContainer: (props: PropsWithChildren<RuleContainerProps>) => import("react/jsx-runtime").JSX.Element | null;
 export default RuleContainer;
-declare function RuleContainer(props: any): import("react/jsx-runtime").JSX.Element | null;
-declare namespace RuleContainer {
-    namespace defaultProps {
-        const show: boolean;
-        const unchecked: boolean;
-        const background: string;
-        const borderColor: string;
-        const hideConnector: boolean;
-        const className: string;
-    }
-    namespace propTypes {
-        const show_1: PropTypes.Requireable<boolean>;
-        export { show_1 as show };
-        const unchecked_1: PropTypes.Requireable<boolean>;
-        export { unchecked_1 as unchecked };
-        const background_1: PropTypes.Requireable<string>;
-        export { background_1 as background };
-        const borderColor_1: PropTypes.Requireable<string>;
-        export { borderColor_1 as borderColor };
-        const hideConnector_1: PropTypes.Requireable<boolean>;
-        export { hideConnector_1 as hideConnector };
-        export const customConnector: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-        const className_1: PropTypes.Requireable<string>;
-        export { className_1 as className };
-    }
-}
-import PropTypes from "prop-types";

package/components/rules/RuleContainer.js

@@ -1,41 +1,25 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import PropTypes from 'prop-types';
+import { Children } from 'react';
 import classNames from 'classnames';
 import { AnimatePresence, motion } from 'framer-motion';
 import RuleConnector from './RuleConnector';
-const RuleContainer = props => {
-    const { show, unchecked, background, borderColor, hideConnector, customConnector, className, children } = props, remainingProps = __rest(props, ["show", "unchecked", "background", "borderColor", "hideConnector", "customConnector", "className", "children"]);
+const RuleContainer = (props) => {
+    const { show = true, unchecked = false, background = 'bg-lightest', borderColor = '', hideConnector = false, customConnector, className = '', children } = props, remainingProps = __rest(props, ["show", "unchecked", "background", "borderColor", "hideConnector", "customConnector", "className", "children"]);
     if (!show) {
         return null;
     }
     const boxClassNames = classNames('RuleContainerBox', 'position-relative', 'rounded padding-20', background, unchecked && `border border-width border-style-dashed ${borderColor}`, className);
-    return (_jsxs("div", Object.assign({ className: 'RuleContainer' }, remainingProps, { children: [_jsx("div", Object.assign({ className: boxClassNames, "data-testid": 'ruleContainerBox' }, { children: _jsx(AnimatePresence, Object.assign({ exitBeforeEnter: true }, { children: React.Children.map(children, child => {
+    return (_jsxs("div", Object.assign({ className: 'RuleContainer' }, remainingProps, { children: [_jsx("div", Object.assign({ className: boxClassNames, "data-testid": 'ruleContainerBox' }, { children: _jsx(AnimatePresence, Object.assign({ exitBeforeEnter: true }, { children: Children.map(children, child => {
                         var _a;
                         if (!child) {
                             return null;
                         }
+                        // just bending the type system a bit so that it matches the existing implementation :)
+                        const childAsElement = child;
                         // In case there are multiple children of RuleContainer, use the
                         // type name or the type itself as a key to animate between the two children
-                        return (_jsx(motion.div, Object.assign({ initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } }, { children: child }), ((_a = child.type) === null || _a === void 0 ? void 0 : _a.name) || child.type));
+                        return (_jsx(motion.div, Object.assign({ initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } }, { children: child }), ((_a = childAsElement.type) === null || _a === void 0 ? void 0 : _a.name) || childAsElement.type));
                     }) })) })), customConnector ? customConnector : _jsx(RuleConnector, { hidden: unchecked || hideConnector })] })));
 };
-RuleContainer.defaultProps = {
-    show: true,
-    unchecked: false,
-    background: 'bg-lightest',
-    borderColor: '',
-    hideConnector: false,
-    className: '',
-};
-RuleContainer.propTypes = {
-    show: PropTypes.bool,
-    unchecked: PropTypes.bool,
-    background: PropTypes.string,
-    borderColor: PropTypes.string,
-    hideConnector: PropTypes.bool,
-    customConnector: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    className: PropTypes.string,
-};
 export default RuleContainer;

package/components/rules/RulesWrapper.d.ts

@@ -1,8 +1,4 @@
+import { type HTMLAttributes, type PropsWithChildren } from 'react';
+type RulesWrapperProps = HTMLAttributes<HTMLDivElement>;
+declare const RulesWrapper: ({ children, ...remainingProps }: PropsWithChildren<RulesWrapperProps>) => import("react/jsx-runtime").JSX.Element;
 export default RulesWrapper;
-declare function RulesWrapper({ children, ...remainigProps }: {
-    [x: string]: any;
-    children: any;
-}): import("react/jsx-runtime").JSX.Element;
-declare namespace RulesWrapper {
-    const defaultProps: {};
-}

package/components/rules/RulesWrapper.js

@@ -1,10 +1,12 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
+// @ts-ignore-next-line importsNotUsedAsValues
+import 'react';
 import { AnimatePresence, motion } from 'framer-motion';
 const RulesWrapper = (_a) => {
-    var { children } = _a, remainigProps = __rest(_a, ["children"]);
-    return (_jsx(motion.div, Object.assign({ initial: false, layout: true }, remainigProps, { children: _jsx(AnimatePresence, { children: _jsx(motion.div, Object.assign({ layout: 'position' }, { children: children })) }) })));
+    var { children } = _a, remainingProps = __rest(_a, ["children"]);
+    return (
+    // @ts-ignore-next-line
+    _jsx(motion.div, Object.assign({ initial: false, layout: true }, remainingProps, { children: _jsx(AnimatePresence, { children: _jsx(motion.div, Object.assign({ layout: 'position' }, { children: children })) }) })));
 };
-RulesWrapper.defaultProps = {};
 export default RulesWrapper;

package/components/saveableInput/SaveableInput.d.ts

@@ -1,4 +1,4 @@
-import { type Attributes } from 'react';
+import React, { type HTMLAttributes } from 'react';
 export type SaveableInputProps = {
     /**
      * The input placeholder.
@@ -18,6 +18,13 @@ export type SaveableInputProps = {
      * The actual input value.
      */
     value?: string;
+    /**
+     * Used to control the save button from the outside to disable it in case
+     * the entered value is not valid.
+     *
+     * @default true
+     */
+    isValid?: boolean;
     /**
      * Callback function triggered when the value changes.
      * @param value
@@ -25,6 +32,26 @@ export type SaveableInputProps = {
      * @returns
      */
     onValueChanged?: (value: string, previousValue: string) => void;
+    /**
+     * Callback function that gets triggered on every input change. Use this to control the component
+     * or when implementing key validation.
+     * @param keyValue the key value that has been entered
+     * @param inputValue the current complete value of the input
+     * @returns
+     */
+    onInputChange?: (keyValue: string, inputValue: string) => void;
+    /**
+     * Callback function that gets triggered when the user aborts the edit mode. Use this
+     * to control the component and handle the resetting of previous value on the outside.
+     * @returns
+     */
+    onEsc?: () => void;
+    /**
+     * Callback function that gets triggered when the input is in edit mode. Use this
+     * to control the component dna to handle the previous value on the outside.
+     * @returns
+     */
+    onEnterEdit?: () => void;
     /**
      * Defines the button style: `default` or `primary`.
      */
@@ -32,7 +59,20 @@ export type SaveableInputProps = {
     /**
      * Additional HTML attributes to be set on the input element.
      */
-    inputProps?: Attributes;
+    inputProps?: HTMLAttributes<HTMLInputElement>;
+    /**
+     * Adds a given unit to the input.
+     */
+    unit?: string | React.ReactNode;
+    /**
+     * Icon class name that shall be used. If defined, the input element is wrapped in an input-group
+     * and the icon will be set in an input-addon. Example: `rioglyph-search`.
+     */
+    icon?: string;
+    /**
+     * Disables the component so the user cannot enter the edit mode.
+     */
+    disabled?: boolean;
     /**
      * Additional classes to be set on the input itself.
      */

package/components/saveableInput/SaveableInput.js

@@ -9,15 +9,28 @@ import Button from '../../Button';
 import useKey from '../../hooks/useKey';
 import useEsc from '../../hooks/useEsc';
 const DEFAULT_BUTTON_STYLE = 'primary';
-// TODO:
+const useFocus = (isEditable) => {
+    const inputRef = useRef(null);
+    useEffect(() => {
+        if (inputRef.current && isEditable) {
+            inputRef.current.focus();
+        }
+    }, [inputRef.current, isEditable]);
+    return inputRef;
+};
+// Features:
 // [ ] what shall happen when user leaves component while in edit mode (click outside or tab) - close on blur?
 // [x] avoid save without change
 // [x] use fixed previous value
 // [x] enter = save
 // [x] esc key to abort and leave edit mode
 // [x] tab focus + enter = go into edit mode
+// [x] validate after each key, i.e for number inputs - use onInputChange callback
+// [x] support form feedback error - wrap it with form-group and feedback classes
+// [x] allow for unit and icon
+// [x] disabled input
 const SaveableInput = (props) => {
-    const { placeholder, fixedPreviousValue = '', previousValue = '', value: externalValue = '', onValueChanged = noop, buttonStyle = DEFAULT_BUTTON_STYLE, inputClassName, className, inputProps } = props, remainingProps = __rest(props, ["placeholder", "fixedPreviousValue", "previousValue", "value", "onValueChanged", "buttonStyle", "inputClassName", "className", "inputProps"]);
+    const { placeholder, fixedPreviousValue = '', previousValue = '', value: externalValue = '', isValid = true, onValueChanged = noop, onInputChange, onEsc = noop, onEnterEdit = noop, buttonStyle = DEFAULT_BUTTON_STYLE, inputClassName, inputProps, icon, unit, disabled = false, className } = props, remainingProps = __rest(props, ["placeholder", "fixedPreviousValue", "previousValue", "value", "isValid", "onValueChanged", "onInputChange", "onEsc", "onEnterEdit", "buttonStyle", "inputClassName", "inputProps", "icon", "unit", "disabled", "className"]);
     const externalOldValue = previousValue || fixedPreviousValue;
     const [inputValue, setInputValue] = useState(externalValue);
     const [oldInputValue, setOldInputValue] = useState(externalOldValue);
@@ -38,15 +51,10 @@ const SaveableInput = (props) => {
         setPreviousExternalOldValue(externalOldValue);
     }
     // Set focus on input when being in edit mode
-    const inputRef = useRef(null);
-    useEffect(() => {
-        if (inputRef.current && editInput) {
-            inputRef.current.focus();
-        }
-    }, [inputRef.current, editInput]);
+    const inputRef = useFocus(editInput);
     // Allow to exit "edit" mode with "Enter" to accept changes
     useKey((event) => {
-        if (isFocused && editInput && event.key === 'Enter') {
+        if (isFocused && editInput && isValid && event.key === 'Enter') {
             handleToggleInput();
         }
     });
@@ -57,6 +65,7 @@ const SaveableInput = (props) => {
             setInputValue(initialInputValueRef.current);
             setOldInputValue(initialOldInputValueRef.current);
             setEditInput(false);
+            onEsc();
         }
     });
     const handleToggleInput = () => {
@@ -65,26 +74,46 @@ const SaveableInput = (props) => {
             // Temporarily store values of input and oldInput to be used when
             // discarding changes on "esc" or to avoid saving without changes
             if (!fixedPreviousValue) {
-                initialInputValueRef.current = inputValue;
                 initialOldInputValueRef.current = oldInputValue;
             }
+            initialInputValueRef.current = inputValue;
+            onEnterEdit();
         }
         else {
             setEditInput(false);
+            // In case the new input value has not changed to the initial value
+            // reset the internal old value to the initial
             if (initialInputValueRef.current !== inputValue) {
-                setOldInputValue(initialInputValueRef.current);
+                setOldInputValue(fixedPreviousValue || initialInputValueRef.current);
                 onValueChanged(inputValue, oldInputValue);
             }
         }
     };
-    const handleInputChange = (event) => setInputValue(event.target.value);
+    const handleInputChange = (event) => {
+        var _a;
+        // Only update internal value if the external "onInputChange" callback function is not defined
+        // as it will be used in a controlled way
+        if (onInputChange) {
+            // Use type assertion to access nativeEvent.data
+            const nativeEventData = (_a = event.nativeEvent) === null || _a === void 0 ? void 0 : _a.data;
+            // Whe "backspace" is used to remove a value, the nativeEventData is undefined. In this case
+            // we need to use the target value for the callback otherwise the user will not be able to
+            // remove a character from the input
+            const currentInputValue = event.target.value;
+            onInputChange(nativeEventData !== null && nativeEventData !== void 0 ? nativeEventData : currentInputValue, event.currentTarget.value);
+            return;
+        }
+        setInputValue(event.target.value);
+    };
     const handleFocus = () => setIsFocused(true);
     const handleBlur = () => setIsFocused(false);
     const showOldValue = !isEmpty(oldInputValue) && oldInputValue !== inputValue && !editInput;
     const wrapperClasses = classNames('form-group', className);
-    const inputClasses = classNames('form-control', showOldValue && 'padding-bottom-0 padding-top-10 text-size-12', inputClassName);
+    const inputClasses = classNames('form-control', showOldValue && 'padding-bottom-0 padding-top-10 text-size-12', unit && 'padding-right-50', // This value is not perfect as with longer units it might conflict with the value
+    inputClassName);
+    const oldValueClasses = classNames('position-absolute', 'top-2', 'left-10', 'margin-left-3', 'text-size-10', 'text-decoration-line-through', icon && 'padding-left-20');
     const buttonIconClasses = classNames('rioglyph', editInput ? 'rioglyph-ok' : 'rioglyph-pencil');
-    return (_jsx("div", Object.assign({}, remainingProps, { className: wrapperClasses }, { children: _jsxs("div", Object.assign({ className: 'input-group' }, { children: [_jsx("input", Object.assign({ type: 'text', ref: inputRef, placeholder: placeholder, className: inputClasses, value: inputValue, onChange: handleInputChange, onFocus: handleFocus, onBlur: handleBlur, disabled: !editInput }, inputProps)), showOldValue && (_jsx("div", Object.assign({ className: 'position-absolute top-2 left-10 ' +
-                        'margin-left-3 text-size-10 text-decoration-line-through' }, { children: oldInputValue }))), _jsx("div", Object.assign({ className: 'input-group-btn' }, { children: _jsx(Button, Object.assign({ bsStyle: buttonStyle, iconOnly: true, onClick: handleToggleInput }, { children: _jsx("span", { className: buttonIconClasses }) })) }))] })) })));
+    const disableButton = (editInput && !isValid) || disabled;
+    return (_jsx("div", Object.assign({}, remainingProps, { className: wrapperClasses }, { children: _jsxs("div", Object.assign({ className: 'input-group' }, { children: [icon && (_jsx("span", Object.assign({ className: 'input-group-addon' }, { children: _jsx("span", { className: `rioglyph ${icon}`, "aria-hidden": 'true', "aria-label": 'input icon' }) }))), _jsx("input", Object.assign({ type: 'text', ref: inputRef, placeholder: placeholder, className: inputClasses, value: inputValue, onChange: handleInputChange, onFocus: handleFocus, onBlur: handleBlur, disabled: !editInput }, inputProps)), unit && (_jsx("div", Object.assign({ className: 'position-absolute right-0 margin-right-50', "aria-label": 'unit' }, { children: unit }))), showOldValue && (_jsx("div", Object.assign({ className: oldValueClasses, "aria-label": 'previous value' }, { children: oldInputValue }))), _jsx("div", Object.assign({ className: 'input-group-btn' }, { children: _jsx(Button, Object.assign({ bsStyle: buttonStyle, iconOnly: true, onClick: handleToggleInput, disabled: disableButton }, { children: _jsx("span", { className: buttonIconClasses }) })) }))] })) })));
 };
 export default SaveableInput;