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

package/components/saveableInput/SaveableDateInput.js

@@ -1,130 +1,95 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useState } from 'react';
-import classNames from 'classnames';
-import { noop } from 'es-toolkit/function';
-import Button from "../../Button.js";
-import DatePicker from "../datepicker/DatePicker.js";
-import useIsFocusWithin from "../../hooks/useIsFocusWithin.js";
-import useEsc from "../../hooks/useEsc.js";
-const DEFAULT_BUTTON_STYLE = 'primary';
-// Validate date outside the component (via form library) if controlled usage
-// Use as controlled component: value, is Valid, and change callback
-// - if is valid, on save, call callback "onValueChanged"
-// - if not valid, keep edit mode open, outside is showing error message
-// - close edit mode only if date is valid - or close edit mode and reset to initial value -> customizable via prop
-// Keep picker open until user has clicked save, otherwise he might forget to click save if the dropdown closes automatically
-const SaveableDateInput = (props) => {
-    const { placeholder, value: externalValue = '', isValid = true, errorMessage, hideErrorIcon = false, onValueChanged = noop, onInputChange, // for controlled usage
-    onEnterEdit = noop, onExitEdit = noop, onCancel = noop, buttonStyle = DEFAULT_BUTTON_STYLE, inputClassName, inputProps, invalidExitBehavior = 'stay-open', datePickerProps = {}, disabled = false, className, ...remainingProps } = props;
-    // if callback is provided, assume it is controlled case
-    const isControlledCase = onInputChange !== undefined;
-    const [inputValue, setInputValue] = useState(externalValue);
-    const [editInput, setEditInput] = useState(false);
-    const [isFocused, setIsFocused] = useState(false);
-    const [isPickerOpen, setIsPickerOpen] = useState(false);
-    const wrapperRef = useRef(null);
-    const buttonRef = useRef(null);
-    const initialInputValueRef = useRef(inputValue);
-    useIsFocusWithin({
-        ref: wrapperRef,
-        onFocusWithin: () => {
-            setIsFocused(true);
-        },
-        onBlurWithin: () => {
-            setIsFocused(false);
-        },
-    });
-    // Handle escape key to cancel edit mode
-    useEsc(() => {
-        if (isFocused && editInput) {
-            handleCancelEdit();
-        }
-    });
-    // Update internal state in a controlled environment
-    const [previousExternalValue, setPreviousExternalValue] = useState(externalValue);
-    if (previousExternalValue !== externalValue) {
-        setInputValue(externalValue);
-        setPreviousExternalValue(externalValue);
-        // Update initial value ref when external value changes while not in edit mode
-        if (!editInput) {
-            initialInputValueRef.current = externalValue;
-        }
+import { jsxs as N, jsx as e } from "react/jsx-runtime";
+import { useState as r, useRef as f } from "react";
+import h from "classnames";
+import { noop as l } from "es-toolkit/function";
+import X from "../button/Button.js";
+import Z from "../datepicker/DatePicker.js";
+import $ from "../../hooks/useIsFocusWithin.js";
+import ee from "../../hooks/useEsc.js";
+const se = "primary", pe = (k) => {
+  const {
+    placeholder: P,
+    value: s = "",
+    isValid: t = !0,
+    errorMessage: m,
+    hideErrorIcon: g = !1,
+    onValueChanged: R = l,
+    onInputChange: c,
+    // for controlled usage
+    onEnterEdit: V = l,
+    onExitEdit: b = l,
+    onCancel: S = l,
+    buttonStyle: B = se,
+    inputClassName: T,
+    inputProps: D,
+    invalidExitBehavior: C = "stay-open",
+    datePickerProps: F = {},
+    disabled: w = !1,
+    className: O,
+    ...W
+  } = k, y = c !== void 0, [a, p] = r(s), [n, u] = r(!1), [j, E] = r(!1), [A, i] = r(!1), I = f(null), L = f(null), o = f(a);
+  $({
+    ref: I,
+    onFocusWithin: () => {
+      E(!0);
+    },
+    onBlurWithin: () => {
+      E(!1);
     }
-    const handleToggleInput = () => {
-        if (!editInput) {
-            // Enter edit mode
-            setEditInput(true);
-            initialInputValueRef.current = inputValue;
-            // open the dropdown
-            setIsPickerOpen(true);
-            onEnterEdit();
-        }
-        else {
-            // Try to exit edit mode
-            handleSaveAttempt();
-        }
-    };
-    const handleSaveAttempt = () => {
-        if (isValid) {
-            // Save the value (only if valid)
-            setEditInput(false);
-            onValueChanged(inputValue, initialInputValueRef.current);
-            onExitEdit(true);
-            // close the dropdown
-            setIsPickerOpen(false);
-        }
-        else {
-            // Handle invalid input based on behavior setting
-            if (invalidExitBehavior === 'reset-and-close') {
-                handleCancelEdit();
-            }
-            // If 'stay-open', do nothing - keep edit mode open
+  }), ee(() => {
+    j && n && v();
+  });
+  const [U, _] = r(s);
+  U !== s && (p(s), _(s), n || (o.current = s));
+  const z = () => {
+    n ? M() : (u(!0), o.current = a, i(!0), V());
+  }, M = () => {
+    t ? (u(!1), R(a, o.current), b(!0), i(!1)) : C === "reset-and-close" && v();
+  }, v = () => {
+    u(!1), y ? c(o.current, !0) : p(o.current), i(!1), S(), b(!1);
+  }, Y = (x, Q) => {
+    y ? c(x, Q) : p(x);
+  }, q = () => i(!1), G = h("form-group", !t && "has-feedback has-error", O), H = h("rioglyph", n ? "rioglyph-ok" : "rioglyph-pencil"), J = h("margin-0 width-100pct", T), K = w || n && !t && C === "stay-open";
+  let d = {
+    borderTopRightRadius: 0,
+    borderBottomRightRadius: 0
+  };
+  return !t && g && (d = { ...d, paddingRight: "10px" }), /* @__PURE__ */ N("div", { ref: I, ...W, className: G, children: [
+    /* @__PURE__ */ N("div", { className: "input-group", children: [
+      /* @__PURE__ */ e(
+        Z,
+        {
+          ...F,
+          open: A,
+          className: J,
+          inputProps: {
+            ...D,
+            placeholder: P,
+            disabled: !n,
+            style: d
+          },
+          value: a,
+          onChange: Y,
+          onClose: q
         }
-    };
-    const handleCancelEdit = () => {
-        setEditInput(false);
-        // Reset to initial value
-        if (isControlledCase) {
-            // In controlled mode, trigger change to reset to initial value
-            onInputChange(initialInputValueRef.current, true);
+      ),
+      !t && !g && /* @__PURE__ */ e("span", { className: "right-25 margin-right-10 form-control-feedback rioglyph rioglyph-error-sign" }),
+      /* @__PURE__ */ e("div", { className: "input-group-btn", children: /* @__PURE__ */ e(
+        X,
+        {
+          ref: L,
+          bsStyle: B,
+          iconOnly: !0,
+          onClick: z,
+          disabled: K,
+          children: /* @__PURE__ */ e("span", { className: H })
         }
-        else {
-            setInputValue(initialInputValueRef.current);
-        }
-        // Close the dropdown
-        setIsPickerOpen(false);
-        onCancel();
-        onExitEdit(false);
-    };
-    const handleDateChange = (value, isValid) => {
-        if (isControlledCase) {
-            onInputChange(value, isValid);
-        }
-        else {
-            setInputValue(value);
-        }
-    };
-    const handleCloseDropdown = () => setIsPickerOpen(false);
-    const wrapperClasses = classNames('form-group', !isValid && 'has-feedback has-error', className);
-    const buttonIconClasses = classNames('rioglyph', editInput ? 'rioglyph-ok' : 'rioglyph-pencil');
-    const dateInputClasses = classNames('margin-0 width-100pct', inputClassName);
-    // Button should be disabled if:
-    // - Component is disabled, OR
-    // - In edit mode and invalid input (and behavior is stay-open)
-    const disableButton = disabled || (editInput && !isValid && invalidExitBehavior === 'stay-open');
-    let inputStyle = {
-        borderTopRightRadius: 0,
-        borderBottomRightRadius: 0,
-    };
-    if (!isValid && hideErrorIcon) {
-        // If the error icon shall not be shown, remove the input padding to avoid cutting of the date value
-        inputStyle = { ...inputStyle, paddingRight: '10px' };
-    }
-    return (_jsxs("div", { ref: wrapperRef, ...remainingProps, className: wrapperClasses, children: [_jsxs("div", { className: 'input-group', children: [_jsx(DatePicker, { ...datePickerProps, open: isPickerOpen, className: dateInputClasses, inputProps: {
-                            ...inputProps,
-                            placeholder,
-                            disabled: !editInput,
-                            style: inputStyle,
-                        }, value: inputValue, onChange: handleDateChange, onClose: handleCloseDropdown }), !isValid && !hideErrorIcon && (_jsx("span", { className: 'right-25 margin-right-10 form-control-feedback rioglyph rioglyph-error-sign' })), _jsx("div", { className: 'input-group-btn', children: _jsx(Button, { ref: buttonRef, bsStyle: buttonStyle, iconOnly: true, onClick: handleToggleInput, disabled: disableButton, children: _jsx("span", { className: buttonIconClasses }) }) })] }), !isValid && errorMessage && (_jsx("span", { className: 'help-block z-index-max', children: _jsx("span", { children: errorMessage }) }))] }));
+      ) })
+    ] }),
+    !t && m && /* @__PURE__ */ e("span", { className: "help-block z-index-max", children: /* @__PURE__ */ e("span", { children: m }) })
+  ] });
+};
+export {
+  pe as default
 };
-export default SaveableDateInput;
+//# sourceMappingURL=SaveableDateInput.js.map

package/components/saveableInput/SaveableDateInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SaveableDateInput.js","sources":["../../../src/components/saveableInput/SaveableDateInput.tsx"],"sourcesContent":["import { useRef, useState, type HTMLAttributes, type CSSProperties } from 'react';\nimport classNames from 'classnames';\nimport { noop } from 'es-toolkit/function';\nimport type { Moment } from 'moment';\n\nimport Button from '../../Button';\nimport DatePicker, { type DatePickerProps } from '../datepicker/DatePicker';\nimport useIsFocusWithin from '../../hooks/useIsFocusWithin';\nimport useEsc from '../../hooks/useEsc';\n\nconst DEFAULT_BUTTON_STYLE = 'primary';\n\nexport type SaveableDateInputProps = {\n    /**\n     * The input placeholder.\n     */\n    placeholder?: string;\n\n    /**\n     * The actual input value.\n     */\n    value?: Date | Moment | string;\n\n    /**\n     * Used to control the save button from the outside to disable it in case\n     * the entered value is not valid.\n     *\n     * @default true\n     */\n    isValid?: boolean;\n\n    /**\n     * This is the error message that is shown below the input. It uses the built-in error handling, and will be shown when the \"isValid\" prop is set to false.\n     */\n    errorMessage?: string | React.ReactNode;\n\n    /**\n     * Defines wether the error icon is shown or not. If enabled, it will be shown when the \"isValid\" prop is set to false.\n     */\n    hideErrorIcon?: boolean;\n\n    /**\n     * Callback function triggered when the value changes and is saved.\n     * @param value\n     * @param previousValue\n     * @returns\n     */\n    onValueChanged?: (value: Moment | string, previousValue: Moment | string | Date) => void;\n\n    /**\n     * Callback function that gets triggered on every input change. Use this to control the component\n     * or when implementing key validation.\n     * @param keyValue the key value that has been entered\n     * @returns\n     */\n    onInputChange?: (value: Moment | string, isValid: boolean) => void;\n\n    /**\n     * Callback function that gets triggered when the input is in edit mode. Use this\n     * to control the component and to handle the previous value on the outside.\n     * @returns\n     */\n    onEnterEdit?: () => void;\n\n    /**\n     * Callback function that gets triggered when edit mode is exited (either saved or cancelled).\n     * @param wasSaved - true if value was saved, false if cancelled/reset\n     * @returns\n     */\n    onExitEdit?: (wasSaved: boolean) => void;\n\n    /**\n     * Callback function that gets triggered when the user aborts the edit mode. Use this\n     * to control the component and handle the resetting of previous value on the outside.\n     * @returns\n     */\n    onCancel?: () => void;\n\n    /**\n     * Behavior when trying to exit edit mode with invalid input:\n     * - 'stay-open': Keep edit mode open until valid input is provided\n     * - 'reset-and-close': Close edit mode and reset to initial value\n     *\n     * @default 'stay-open'\n     */\n    invalidExitBehavior?: 'stay-open' | 'reset-and-close';\n\n    /**\n     * Defines the button style: `default` or `primary`.\n     */\n    buttonStyle?: 'primary' | 'default';\n\n    /**\n     * Additional HTML attributes to be set on the input element.\n     */\n    inputProps?: HTMLAttributes<HTMLInputElement>;\n\n    datePickerProps?: DatePickerProps;\n\n    /**\n     * Disables the component so the user cannot enter the edit mode.\n     */\n    disabled?: boolean;\n\n    /**\n     * Additional classes to be set on the input itself.\n     */\n    inputClassName?: string;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n};\n\n// Validate date outside the component (via form library) if controlled usage\n// Use as controlled component: value, is Valid, and change callback\n// - if is valid, on save, call callback \"onValueChanged\"\n// - if not valid, keep edit mode open, outside is showing error message\n// - close edit mode only if date is valid - or close edit mode and reset to initial value -> customizable via prop\n// Keep picker open until user has clicked save, otherwise he might forget to click save if the dropdown closes automatically\n\nconst SaveableDateInput = (props: SaveableDateInputProps) => {\n    const {\n        placeholder,\n        value: externalValue = '',\n        isValid = true,\n        errorMessage,\n        hideErrorIcon = false,\n        onValueChanged = noop,\n        onInputChange, // for controlled usage\n        onEnterEdit = noop,\n        onExitEdit = noop,\n        onCancel = noop,\n        buttonStyle = DEFAULT_BUTTON_STYLE,\n        inputClassName,\n        inputProps,\n        invalidExitBehavior = 'stay-open',\n        datePickerProps = {},\n        disabled = false,\n        className,\n        ...remainingProps\n    } = props;\n\n    // if callback is provided, assume it is controlled case\n    const isControlledCase = onInputChange !== undefined;\n\n    const [inputValue, setInputValue] = useState<Date | Moment | string>(externalValue);\n\n    const [editInput, setEditInput] = useState(false);\n    const [isFocused, setIsFocused] = useState(false);\n\n    const [isPickerOpen, setIsPickerOpen] = useState(false);\n\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const buttonRef = useRef<HTMLButtonElement>(null);\n\n    const initialInputValueRef = useRef(inputValue);\n\n    useIsFocusWithin({\n        ref: wrapperRef,\n        onFocusWithin: () => {\n            setIsFocused(true);\n        },\n        onBlurWithin: () => {\n            setIsFocused(false);\n        },\n    });\n\n    // Handle escape key to cancel edit mode\n    useEsc(() => {\n        if (isFocused && editInput) {\n            handleCancelEdit();\n        }\n    });\n\n    // Update internal state in a controlled environment\n    const [previousExternalValue, setPreviousExternalValue] = useState(externalValue);\n    if (previousExternalValue !== externalValue) {\n        setInputValue(externalValue);\n        setPreviousExternalValue(externalValue);\n        // Update initial value ref when external value changes while not in edit mode\n        if (!editInput) {\n            initialInputValueRef.current = externalValue;\n        }\n    }\n\n    const handleToggleInput = () => {\n        if (!editInput) {\n            // Enter edit mode\n            setEditInput(true);\n            initialInputValueRef.current = inputValue;\n\n            // open the dropdown\n            setIsPickerOpen(true);\n\n            onEnterEdit();\n        } else {\n            // Try to exit edit mode\n            handleSaveAttempt();\n        }\n    };\n\n    const handleSaveAttempt = () => {\n        if (isValid) {\n            // Save the value (only if valid)\n            setEditInput(false);\n            onValueChanged(inputValue as Moment | string, initialInputValueRef.current);\n            onExitEdit(true);\n\n            // close the dropdown\n            setIsPickerOpen(false);\n        } else {\n            // Handle invalid input based on behavior setting\n            if (invalidExitBehavior === 'reset-and-close') {\n                handleCancelEdit();\n            }\n            // If 'stay-open', do nothing - keep edit mode open\n        }\n    };\n\n    const handleCancelEdit = () => {\n        setEditInput(false);\n\n        // Reset to initial value\n        if (isControlledCase) {\n            // In controlled mode, trigger change to reset to initial value\n            onInputChange(initialInputValueRef.current as Moment | string, true);\n        } else {\n            setInputValue(initialInputValueRef.current);\n        }\n\n        // Close the dropdown\n        setIsPickerOpen(false);\n\n        onCancel();\n        onExitEdit(false);\n    };\n\n    const handleDateChange = (value: Moment | string, isValid: boolean) => {\n        if (isControlledCase) {\n            onInputChange(value, isValid);\n        } else {\n            setInputValue(value);\n        }\n    };\n\n    const handleCloseDropdown = () => setIsPickerOpen(false);\n\n    const wrapperClasses = classNames('form-group', !isValid && 'has-feedback has-error', className);\n\n    const buttonIconClasses = classNames('rioglyph', editInput ? 'rioglyph-ok' : 'rioglyph-pencil');\n\n    const dateInputClasses = classNames('margin-0 width-100pct', inputClassName);\n\n    // Button should be disabled if:\n    // - Component is disabled, OR\n    // - In edit mode and invalid input (and behavior is stay-open)\n    const disableButton = disabled || (editInput && !isValid && invalidExitBehavior === 'stay-open');\n\n    let inputStyle: CSSProperties = {\n        borderTopRightRadius: 0,\n        borderBottomRightRadius: 0,\n    };\n\n    if (!isValid && hideErrorIcon) {\n        // If the error icon shall not be shown, remove the input padding to avoid cutting of the date value\n        inputStyle = { ...inputStyle, paddingRight: '10px' };\n    }\n\n    return (\n        <div ref={wrapperRef} {...remainingProps} className={wrapperClasses}>\n            <div className='input-group'>\n                <DatePicker\n                    {...{ ...datePickerProps, open: isPickerOpen }}\n                    className={dateInputClasses}\n                    inputProps={{\n                        ...inputProps,\n                        placeholder,\n                        disabled: !editInput,\n                        style: inputStyle,\n                    }}\n                    value={inputValue}\n                    onChange={handleDateChange}\n                    onClose={handleCloseDropdown}\n                />\n                {!isValid && !hideErrorIcon && (\n                    <span className='right-25 margin-right-10 form-control-feedback rioglyph rioglyph-error-sign' />\n                )}\n                <div className='input-group-btn'>\n                    <Button\n                        ref={buttonRef}\n                        bsStyle={buttonStyle}\n                        iconOnly\n                        onClick={handleToggleInput}\n                        disabled={disableButton}\n                    >\n                        <span className={buttonIconClasses} />\n                    </Button>\n                </div>\n            </div>\n            {!isValid && errorMessage && (\n                <span className='help-block z-index-max'>\n                    <span>{errorMessage}</span>\n                </span>\n            )}\n        </div>\n    );\n};\n\nexport default SaveableDateInput;\n"],"names":["DEFAULT_BUTTON_STYLE","SaveableDateInput","props","placeholder","externalValue","isValid","errorMessage","hideErrorIcon","onValueChanged","noop","onInputChange","onEnterEdit","onExitEdit","onCancel","buttonStyle","inputClassName","inputProps","invalidExitBehavior","datePickerProps","disabled","className","remainingProps","isControlledCase","inputValue","setInputValue","useState","editInput","setEditInput","isFocused","setIsFocused","isPickerOpen","setIsPickerOpen","wrapperRef","useRef","buttonRef","initialInputValueRef","useIsFocusWithin","useEsc","handleCancelEdit","previousExternalValue","setPreviousExternalValue","handleToggleInput","handleSaveAttempt","handleDateChange","value","handleCloseDropdown","wrapperClasses","classNames","buttonIconClasses","dateInputClasses","disableButton","inputStyle","jsxs","jsx","DatePicker","Button"],"mappings":";;;;;;;;AAUA,MAAMA,KAAuB,WAgHvBC,KAAoB,CAACC,MAAkC;AACzD,QAAM;AAAA,IACF,aAAAC;AAAA,IACA,OAAOC,IAAgB;AAAA,IACvB,SAAAC,IAAU;AAAA,IACV,cAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA,IAChB,gBAAAC,IAAiBC;AAAA,IACjB,eAAAC;AAAA;AAAA,IACA,aAAAC,IAAcF;AAAA,IACd,YAAAG,IAAaH;AAAA,IACb,UAAAI,IAAWJ;AAAA,IACX,aAAAK,IAAcd;AAAA,IACd,gBAAAe;AAAA,IACA,YAAAC;AAAA,IACA,qBAAAC,IAAsB;AAAA,IACtB,iBAAAC,IAAkB,CAAA;AAAA,IAClB,UAAAC,IAAW;AAAA,IACX,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHnB,GAGEoB,IAAmBZ,MAAkB,QAErC,CAACa,GAAYC,CAAa,IAAIC,EAAiCrB,CAAa,GAE5E,CAACsB,GAAWC,CAAY,IAAIF,EAAS,EAAK,GAC1C,CAACG,GAAWC,CAAY,IAAIJ,EAAS,EAAK,GAE1C,CAACK,GAAcC,CAAe,IAAIN,EAAS,EAAK,GAEhDO,IAAaC,EAAuB,IAAI,GACxCC,IAAYD,EAA0B,IAAI,GAE1CE,IAAuBF,EAAOV,CAAU;AAE9C,EAAAa,EAAiB;AAAA,IACb,KAAKJ;AAAA,IACL,eAAe,MAAM;AACjB,MAAAH,EAAa,EAAI;AAAA,IACrB;AAAA,IACA,cAAc,MAAM;AAChB,MAAAA,EAAa,EAAK;AAAA,IACtB;AAAA,EAAA,CACH,GAGDQ,GAAO,MAAM;AACT,IAAIT,KAAaF,KACbY,EAAA;AAAA,EAER,CAAC;AAGD,QAAM,CAACC,GAAuBC,CAAwB,IAAIf,EAASrB,CAAa;AAChF,EAAImC,MAA0BnC,MAC1BoB,EAAcpB,CAAa,GAC3BoC,EAAyBpC,CAAa,GAEjCsB,MACDS,EAAqB,UAAU/B;AAIvC,QAAMqC,IAAoB,MAAM;AAC5B,IAAKf,IAWDgB,EAAA,KATAf,EAAa,EAAI,GACjBQ,EAAqB,UAAUZ,GAG/BQ,EAAgB,EAAI,GAEpBpB,EAAA;AAAA,EAKR,GAEM+B,IAAoB,MAAM;AAC5B,IAAIrC,KAEAsB,EAAa,EAAK,GAClBnB,EAAee,GAA+BY,EAAqB,OAAO,GAC1EvB,EAAW,EAAI,GAGfmB,EAAgB,EAAK,KAGjBd,MAAwB,qBACxBqB,EAAA;AAAA,EAIZ,GAEMA,IAAmB,MAAM;AAC3B,IAAAX,EAAa,EAAK,GAGdL,IAEAZ,EAAcyB,EAAqB,SAA4B,EAAI,IAEnEX,EAAcW,EAAqB,OAAO,GAI9CJ,EAAgB,EAAK,GAErBlB,EAAA,GACAD,EAAW,EAAK;AAAA,EACpB,GAEM+B,IAAmB,CAACC,GAAwBvC,MAAqB;AACnE,IAAIiB,IACAZ,EAAckC,GAAOvC,CAAO,IAE5BmB,EAAcoB,CAAK;AAAA,EAE3B,GAEMC,IAAsB,MAAMd,EAAgB,EAAK,GAEjDe,IAAiBC,EAAW,cAAc,CAAC1C,KAAW,0BAA0Be,CAAS,GAEzF4B,IAAoBD,EAAW,YAAYrB,IAAY,gBAAgB,iBAAiB,GAExFuB,IAAmBF,EAAW,yBAAyBhC,CAAc,GAKrEmC,IAAgB/B,KAAaO,KAAa,CAACrB,KAAWY,MAAwB;AAEpF,MAAIkC,IAA4B;AAAA,IAC5B,sBAAsB;AAAA,IACtB,yBAAyB;AAAA,EAAA;AAG7B,SAAI,CAAC9C,KAAWE,MAEZ4C,IAAa,EAAE,GAAGA,GAAY,cAAc,OAAA,sBAI3C,OAAA,EAAI,KAAKnB,GAAa,GAAGX,GAAgB,WAAWyB,GACjD,UAAA;AAAA,IAAA,gBAAAM,EAAC,OAAA,EAAI,WAAU,eACX,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACS,GAAGpC;AAAA,UAAiB,MAAMY;AAAA,UAChC,WAAWmB;AAAA,UACX,YAAY;AAAA,YACR,GAAGjC;AAAA,YACH,aAAAb;AAAA,YACA,UAAU,CAACuB;AAAA,YACX,OAAOyB;AAAA,UAAA;AAAA,UAEX,OAAO5B;AAAA,UACP,UAAUoB;AAAA,UACV,SAASE;AAAA,QAAA;AAAA,MAAA;AAAA,MAEZ,CAACxC,KAAW,CAACE,KACV,gBAAA8C,EAAC,QAAA,EAAK,WAAU,+EAA8E;AAAA,MAElG,gBAAAA,EAAC,OAAA,EAAI,WAAU,mBACX,UAAA,gBAAAA;AAAA,QAACE;AAAA,QAAA;AAAA,UACG,KAAKrB;AAAA,UACL,SAASpB;AAAA,UACT,UAAQ;AAAA,UACR,SAAS2B;AAAA,UACT,UAAUS;AAAA,UAEV,UAAA,gBAAAG,EAAC,QAAA,EAAK,WAAWL,EAAA,CAAmB;AAAA,QAAA;AAAA,MAAA,EACxC,CACJ;AAAA,IAAA,GACJ;AAAA,IACC,CAAC3C,KAAWC,KACT,gBAAA+C,EAAC,QAAA,EAAK,WAAU,0BACZ,UAAA,gBAAAA,EAAC,QAAA,EAAM,UAAA/C,EAAA,CAAa,EAAA,CACxB;AAAA,EAAA,GAER;AAER;"}

package/components/saveableInput/SaveableInput.d.ts

@@ -1,4 +1,4 @@
-import React, { type HTMLAttributes } from 'react';
+import { default as React, HTMLAttributes } from 'react';
 export type SaveableInputProps = {
     /**
      * The input placeholder.

package/components/saveableInput/SaveableInput.js

@@ -1,118 +1,100 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
-import classNames from 'classnames';
-import { isEmpty } from 'es-toolkit/compat';
-import { noop } from 'es-toolkit/function';
-// @ts-ignore
-import Button from "../../Button.js";
-import useKey from "../../hooks/useKey.js";
-import useEsc from "../../hooks/useEsc.js";
-const DEFAULT_BUTTON_STYLE = 'primary';
-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 = '', isValid = true, errorMessage, hideErrorIcon = false, onValueChanged = noop, onInputChange, onEsc = noop, onEnterEdit = noop, buttonStyle = DEFAULT_BUTTON_STYLE, inputClassName, inputProps, icon, unit, disabled = false, className, ...remainingProps } = props;
-    const externalOldValue = previousValue || fixedPreviousValue;
-    const [inputValue, setInputValue] = useState(externalValue);
-    const [oldInputValue, setOldInputValue] = useState(externalOldValue);
-    const [editInput, setEditInput] = useState(false);
-    const [isFocused, setIsFocused] = useState(false);
-    const initialInputValueRef = useRef(inputValue);
-    const initialOldInputValueRef = useRef(oldInputValue);
-    // Update internal state in a controlled environment
-    const [previousExternalValue, setPreviousExternalValue] = useState(externalValue);
-    if (previousExternalValue !== externalValue) {
-        setInputValue(externalValue);
-        setPreviousExternalValue(externalValue);
+import { jsxs as T, jsx as e } from "react/jsx-runtime";
+import { useState as o, useRef as x, useEffect as te } from "react";
+import f from "classnames";
+import { isEmpty as ne } from "es-toolkit/compat";
+import { noop as b } from "es-toolkit/function";
+import ae from "../button/Button.js";
+import se from "../../hooks/useKey.js";
+import re from "../../hooks/useEsc.js";
+const le = "primary", oe = (p) => {
+  const n = x(null);
+  return te(() => {
+    n.current && p && n.current.focus();
+  }, [n.current, p]), n;
+}, ge = (p) => {
+  const {
+    placeholder: n,
+    fixedPreviousValue: m = "",
+    previousValue: B = "",
+    value: i = "",
+    isValid: a = !0,
+    errorMessage: E,
+    hideErrorIcon: I = !1,
+    onValueChanged: P = b,
+    onInputChange: N,
+    onEsc: R = b,
+    onEnterEdit: S = b,
+    buttonStyle: z = le,
+    inputClassName: j,
+    inputProps: w,
+    icon: h,
+    unit: u,
+    disabled: D = !1,
+    className: L,
+    ...U
+  } = p, c = B || m, [s, g] = o(i), [r, v] = o(c), [t, V] = o(!1), [y, C] = o(!1), d = x(s), O = x(r), [_, A] = o(i);
+  _ !== i && (g(i), A(i));
+  const [K, M] = o(c);
+  K !== c && (v(c), M(c));
+  const Y = oe(t);
+  se((l) => {
+    y && t && a && l.key === "Enter" && k();
+  }), re(() => {
+    y && (g(d.current), v(O.current), V(!1), R());
+  });
+  const k = () => {
+    t === !1 ? (V(!0), m || (O.current = r), d.current = s, S()) : (V(!1), d.current !== s && (v(m || d.current), P(s, r)));
+  }, $ = (l) => {
+    if (N) {
+      const Z = l.nativeEvent?.data, ee = l.target.value;
+      N(Z ?? ee, l.currentTarget.value);
+      return;
     }
-    // Update internal state in a controlled environment
-    const [previousExternalOldValue, setPreviousExternalOldValue] = useState(externalOldValue);
-    if (previousExternalOldValue !== externalOldValue) {
-        setOldInputValue(externalOldValue);
-        setPreviousExternalOldValue(externalOldValue);
-    }
-    // Set focus on input when being in edit mode
-    const inputRef = useFocus(editInput);
-    // Allow to exit "edit" mode with "Enter" to accept changes
-    useKey((event) => {
-        if (isFocused && editInput && isValid && event.key === 'Enter') {
-            handleToggleInput();
-        }
-    });
-    // Allow to exit "edit" mode with "Esc" to ignore changes
-    useEsc(() => {
-        if (isFocused) {
-            // Restore local state to initial vales as it was when entering edit mode
-            setInputValue(initialInputValueRef.current);
-            setOldInputValue(initialOldInputValueRef.current);
-            setEditInput(false);
-            onEsc();
+    g(l.target.value);
+  }, q = () => C(!0), G = () => C(!1), F = !ne(r) && r !== s && !t, H = f("form-group", !a && "has-feedback has-error", L), J = f(
+    "form-control",
+    F && "padding-bottom-0 padding-top-10 text-size-12",
+    u && "padding-right-50",
+    // This value is not perfect as with longer units it might conflict with the value
+    !u && !a && I && "padding-right-10",
+    // remove the padding for the error icon if not needed
+    j
+  ), Q = f(
+    "position-absolute",
+    "top-2",
+    "left-10",
+    "margin-left-3",
+    "text-size-10",
+    "text-decoration-line-through",
+    h && "padding-left-20"
+  ), W = f("rioglyph", t ? "rioglyph-ok" : "rioglyph-pencil"), X = t && !a || D;
+  return /* @__PURE__ */ T("div", { ...U, className: H, children: [
+    /* @__PURE__ */ T("div", { className: "input-group", children: [
+      h && /* @__PURE__ */ e("span", { className: "input-group-addon", children: /* @__PURE__ */ e("span", { className: `rioglyph ${h}`, "aria-hidden": "true", "aria-label": "input icon" }) }),
+      /* @__PURE__ */ e(
+        "input",
+        {
+          type: "text",
+          ref: Y,
+          placeholder: n,
+          className: J,
+          value: s,
+          onChange: $,
+          onFocus: q,
+          onBlur: G,
+          disabled: !t,
+          ...w
         }
-    });
-    const handleToggleInput = () => {
-        if (editInput === false) {
-            setEditInput(true);
-            // Temporarily store values of input and oldInput to be used when
-            // discarding changes on "esc" or to avoid saving without changes
-            if (!fixedPreviousValue) {
-                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(fixedPreviousValue || initialInputValueRef.current);
-                onValueChanged(inputValue, oldInputValue);
-            }
-        }
-    };
-    const handleInputChange = (event) => {
-        // 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 = event.nativeEvent?.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 ?? 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', !isValid && 'has-feedback has-error', className);
-    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
-    !unit && !isValid && hideErrorIcon && 'padding-right-10', // remove the padding for the error icon if not needed
-    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');
-    const disableButton = (editInput && !isValid) || disabled;
-    return (_jsxs("div", { ...remainingProps, className: wrapperClasses, children: [_jsxs("div", { className: 'input-group', children: [icon && (_jsx("span", { className: 'input-group-addon', children: _jsx("span", { className: `rioglyph ${icon}`, "aria-hidden": 'true', "aria-label": 'input icon' }) })), _jsx("input", { type: 'text', ref: inputRef, placeholder: placeholder, className: inputClasses, value: inputValue, onChange: handleInputChange, onFocus: handleFocus, onBlur: handleBlur, disabled: !editInput, ...inputProps }), unit && (_jsx("div", { className: 'position-absolute right-0 margin-right-50', "aria-label": 'unit', children: unit })), showOldValue && (_jsx("div", { className: oldValueClasses, "aria-label": 'previous value', children: oldInputValue })), _jsx("div", { className: 'input-group-btn', children: _jsx(Button, { bsStyle: buttonStyle, iconOnly: true, onClick: handleToggleInput, disabled: disableButton, children: _jsx("span", { className: buttonIconClasses }) }) })] }), !isValid && !hideErrorIcon && !unit && (_jsx("span", { className: 'right-25 margin-right-10 form-control-feedback rioglyph rioglyph-error-sign' })), !isValid && errorMessage && (_jsx("span", { className: 'help-block z-index-max', children: _jsx("span", { children: errorMessage }) }))] }));
+      ),
+      u && /* @__PURE__ */ e("div", { className: "position-absolute right-0 margin-right-50", "aria-label": "unit", children: u }),
+      F && /* @__PURE__ */ e("div", { className: Q, "aria-label": "previous value", children: r }),
+      /* @__PURE__ */ e("div", { className: "input-group-btn", children: /* @__PURE__ */ e(ae, { bsStyle: z, iconOnly: !0, onClick: k, disabled: X, children: /* @__PURE__ */ e("span", { className: W }) }) })
+    ] }),
+    !a && !I && !u && /* @__PURE__ */ e("span", { className: "right-25 margin-right-10 form-control-feedback rioglyph rioglyph-error-sign" }),
+    !a && E && /* @__PURE__ */ e("span", { className: "help-block z-index-max", children: /* @__PURE__ */ e("span", { children: E }) })
+  ] });
+};
+export {
+  ge as default
 };
-export default SaveableInput;
+//# sourceMappingURL=SaveableInput.js.map

package/components/saveableInput/SaveableInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SaveableInput.js","sources":["../../../src/components/saveableInput/SaveableInput.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState, type ChangeEvent, type HTMLAttributes } from 'react';\nimport classNames from 'classnames';\nimport { isEmpty } from 'es-toolkit/compat';\nimport { noop } from 'es-toolkit/function';\n\n// @ts-ignore\nimport Button from '../../Button';\nimport useKey from '../../hooks/useKey';\nimport useEsc from '../../hooks/useEsc';\n\nconst DEFAULT_BUTTON_STYLE = 'primary';\n\nconst useFocus = (isEditable: boolean) => {\n    const inputRef = useRef<HTMLInputElement>(null);\n    useEffect(() => {\n        if (inputRef.current && isEditable) {\n            inputRef.current.focus();\n        }\n    }, [inputRef.current, isEditable]);\n\n    return inputRef;\n};\n\nexport type SaveableInputProps = {\n    /**\n     * The input placeholder.\n     */\n    placeholder?: string;\n\n    /**\n     * The previous or old value shown above the input value.\n     * This value will *not* be changed for new input values.\n     */\n    fixedPreviousValue?: string;\n\n    /**\n     * The previous or old value shown above the input value.\n     * This value *changes* when a new input value is accepted.\n     */\n    previousValue?: string;\n\n    /**\n     * The actual input value.\n     */\n    value?: string;\n\n    /**\n     * Used to control the save button from the outside to disable it in case\n     * the entered value is not valid.\n     *\n     * @default true\n     */\n    isValid?: boolean;\n\n    /**\n     * This is the error message that is shown below the input. It uses the built-in error handling, and will be shown when the \"isValid\" prop is set to false.\n     */\n    errorMessage?: string | React.ReactNode;\n\n    /**\n     * Defines wether the error icon is shown or not. If enabled, it will be shown when the \"isValid\" prop is set to false.\n     */\n    hideErrorIcon?: boolean;\n\n    /**\n     * Callback function triggered when the value changes.\n     * @param value\n     * @param previousValue\n     * @returns\n     */\n    onValueChanged?: (value: string, previousValue: string) => void;\n\n    /**\n     * Callback function that gets triggered on every input change. Use this to control the component\n     * or when implementing key validation.\n     * @param keyValue the key value that has been entered\n     * @param inputValue the current complete value of the input\n     * @returns\n     */\n    onInputChange?: (keyValue: string, inputValue: string) => void;\n\n    /**\n     * Callback function that gets triggered when the user aborts the edit mode. Use this\n     * to control the component and handle the resetting of previous value on the outside.\n     * @returns\n     */\n    onEsc?: () => void;\n\n    /**\n     * Callback function that gets triggered when the input is in edit mode. Use this\n     * to control the component dna to handle the previous value on the outside.\n     * @returns\n     */\n    onEnterEdit?: () => void;\n\n    /**\n     * Defines the button style: `default` or `primary`.\n     */\n    buttonStyle?: 'primary' | 'default';\n\n    /**\n     * Additional HTML attributes to be set on the input element.\n     */\n    inputProps?: HTMLAttributes<HTMLInputElement>;\n\n    /**\n     * Adds a given unit to the input.\n     */\n    unit?: string | React.ReactNode;\n\n    /**\n     * Icon class name that shall be used. If defined, the input element is wrapped in an input-group\n     * and the icon will be set in an input-addon. Example: `rioglyph-search`.\n     */\n    icon?: string;\n\n    /**\n     * Disables the component so the user cannot enter the edit mode.\n     */\n    disabled?: boolean;\n\n    /**\n     * Additional classes to be set on the input itself.\n     */\n    inputClassName?: string;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n};\n\n// Features:\n// [ ] what shall happen when user leaves component while in edit mode (click outside or tab) - close on blur?\n// [x] avoid save without change\n// [x] use fixed previous value\n// [x] enter = save\n// [x] esc key to abort and leave edit mode\n// [x] tab focus + enter = go into edit mode\n// [x] validate after each key, i.e for number inputs - use onInputChange callback\n// [x] support form feedback error - wrap it with form-group and feedback classes\n// [x] allow for unit and icon\n// [x] disabled input\n\nconst SaveableInput = (props: SaveableInputProps) => {\n    const {\n        placeholder,\n        fixedPreviousValue = '',\n        previousValue = '',\n        value: externalValue = '',\n        isValid = true,\n        errorMessage,\n        hideErrorIcon = false,\n        onValueChanged = noop,\n        onInputChange,\n        onEsc = noop,\n        onEnterEdit = noop,\n        buttonStyle = DEFAULT_BUTTON_STYLE,\n        inputClassName,\n        inputProps,\n        icon,\n        unit,\n        disabled = false,\n        className,\n        ...remainingProps\n    } = props;\n\n    const externalOldValue = previousValue || fixedPreviousValue;\n\n    const [inputValue, setInputValue] = useState(externalValue);\n    const [oldInputValue, setOldInputValue] = useState(externalOldValue);\n\n    const [editInput, setEditInput] = useState(false);\n    const [isFocused, setIsFocused] = useState(false);\n\n    const initialInputValueRef = useRef(inputValue);\n    const initialOldInputValueRef = useRef(oldInputValue);\n\n    // Update internal state in a controlled environment\n    const [previousExternalValue, setPreviousExternalValue] = useState(externalValue);\n    if (previousExternalValue !== externalValue) {\n        setInputValue(externalValue);\n        setPreviousExternalValue(externalValue);\n    }\n\n    // Update internal state in a controlled environment\n    const [previousExternalOldValue, setPreviousExternalOldValue] = useState(externalOldValue);\n    if (previousExternalOldValue !== externalOldValue) {\n        setOldInputValue(externalOldValue);\n        setPreviousExternalOldValue(externalOldValue);\n    }\n\n    // Set focus on input when being in edit mode\n    const inputRef = useFocus(editInput);\n\n    // Allow to exit \"edit\" mode with \"Enter\" to accept changes\n    useKey((event: KeyboardEvent) => {\n        if (isFocused && editInput && isValid && event.key === 'Enter') {\n            handleToggleInput();\n        }\n    });\n\n    // Allow to exit \"edit\" mode with \"Esc\" to ignore changes\n    useEsc(() => {\n        if (isFocused) {\n            // Restore local state to initial vales as it was when entering edit mode\n            setInputValue(initialInputValueRef.current);\n            setOldInputValue(initialOldInputValueRef.current);\n            setEditInput(false);\n            onEsc();\n        }\n    });\n\n    const handleToggleInput = () => {\n        if (editInput === false) {\n            setEditInput(true);\n\n            // Temporarily store values of input and oldInput to be used when\n            // discarding changes on \"esc\" or to avoid saving without changes\n            if (!fixedPreviousValue) {\n                initialOldInputValueRef.current = oldInputValue;\n            }\n            initialInputValueRef.current = inputValue;\n\n            onEnterEdit();\n        } else {\n            setEditInput(false);\n\n            // In case the new input value has not changed to the initial value\n            // reset the internal old value to the initial\n            if (initialInputValueRef.current !== inputValue) {\n                setOldInputValue(fixedPreviousValue || initialInputValueRef.current);\n                onValueChanged(inputValue, oldInputValue);\n            }\n        }\n    };\n\n    const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {\n        // Only update internal value if the external \"onInputChange\" callback function is not defined\n        // as it will be used in a controlled way\n        if (onInputChange) {\n            // Use type assertion to access nativeEvent.data\n            const nativeEventData = (event.nativeEvent as InputEvent)?.data;\n\n            // Whe \"backspace\" is used to remove a value, the nativeEventData is undefined. In this case\n            // we need to use the target value for the callback otherwise the user will not be able to\n            // remove a character from the input\n            const currentInputValue = event.target.value;\n\n            onInputChange(nativeEventData ?? currentInputValue, event.currentTarget.value);\n            return;\n        }\n\n        setInputValue(event.target.value);\n    };\n\n    const handleFocus = () => setIsFocused(true);\n    const handleBlur = () => setIsFocused(false);\n\n    const showOldValue = !isEmpty(oldInputValue) && oldInputValue !== inputValue && !editInput;\n\n    const wrapperClasses = classNames('form-group', !isValid && 'has-feedback has-error', className);\n\n    const inputClasses = classNames(\n        'form-control',\n        showOldValue && 'padding-bottom-0 padding-top-10 text-size-12',\n        unit && 'padding-right-50', // This value is not perfect as with longer units it might conflict with the value\n        !unit && !isValid && hideErrorIcon && 'padding-right-10', // remove the padding for the error icon if not needed\n        inputClassName\n    );\n\n    const oldValueClasses = classNames(\n        'position-absolute',\n        'top-2',\n        'left-10',\n        'margin-left-3',\n        'text-size-10',\n        'text-decoration-line-through',\n        icon && 'padding-left-20'\n    );\n\n    const buttonIconClasses = classNames('rioglyph', editInput ? 'rioglyph-ok' : 'rioglyph-pencil');\n\n    const disableButton = (editInput && !isValid) || disabled;\n\n    return (\n        <div {...remainingProps} className={wrapperClasses}>\n            <div className='input-group'>\n                {icon && (\n                    <span className='input-group-addon'>\n                        <span className={`rioglyph ${icon}`} aria-hidden='true' aria-label='input icon' />\n                    </span>\n                )}\n                <input\n                    type='text'\n                    ref={inputRef}\n                    placeholder={placeholder}\n                    className={inputClasses}\n                    value={inputValue}\n                    onChange={handleInputChange}\n                    onFocus={handleFocus}\n                    onBlur={handleBlur}\n                    disabled={!editInput}\n                    {...inputProps}\n                />\n                {unit && (\n                    <div className='position-absolute right-0 margin-right-50' aria-label='unit'>\n                        {unit}\n                    </div>\n                )}\n                {showOldValue && (\n                    <div className={oldValueClasses} aria-label='previous value'>\n                        {oldInputValue}\n                    </div>\n                )}\n                <div className='input-group-btn'>\n                    <Button bsStyle={buttonStyle} iconOnly onClick={handleToggleInput} disabled={disableButton}>\n                        <span className={buttonIconClasses} />\n                    </Button>\n                </div>\n            </div>\n            {!isValid && !hideErrorIcon && !unit && (\n                <span className='right-25 margin-right-10 form-control-feedback rioglyph rioglyph-error-sign' />\n            )}\n            {!isValid && errorMessage && (\n                <span className='help-block z-index-max'>\n                    <span>{errorMessage}</span>\n                </span>\n            )}\n        </div>\n    );\n};\n\nexport default SaveableInput;\n"],"names":["DEFAULT_BUTTON_STYLE","useFocus","isEditable","inputRef","useRef","useEffect","SaveableInput","props","placeholder","fixedPreviousValue","previousValue","externalValue","isValid","errorMessage","hideErrorIcon","onValueChanged","noop","onInputChange","onEsc","onEnterEdit","buttonStyle","inputClassName","inputProps","icon","unit","disabled","className","remainingProps","externalOldValue","inputValue","setInputValue","useState","oldInputValue","setOldInputValue","editInput","setEditInput","isFocused","setIsFocused","initialInputValueRef","initialOldInputValueRef","previousExternalValue","setPreviousExternalValue","previousExternalOldValue","setPreviousExternalOldValue","useKey","event","handleToggleInput","useEsc","handleInputChange","nativeEventData","currentInputValue","handleFocus","handleBlur","showOldValue","isEmpty","wrapperClasses","classNames","inputClasses","oldValueClasses","buttonIconClasses","disableButton","jsxs","jsx","Button"],"mappings":"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"}

package/components/selects/BaseSelectDropdown.d.ts

@@ -1,4 +1,4 @@
-import type React from 'react';
+import { default as React } from 'react';
 export type OptionDOMValue = {
     id: string;
     text: string;