@rio-cloud/rio-uikit 2.5.0 → 3.0.0-beta.1

package/components/saveableInput/SaveableInput.js

@@ -1,100 +1,98 @@
-import { jsxs as T, jsx as e } from "react/jsx-runtime";
-import { useState as l, useRef as x, useEffect as ne } from "react";
-import { isEmpty as ae } from "es-toolkit/compat";
-import { noop as b } from "es-toolkit/function";
-import f from "../../utils/classNames.js";
-import se from "../button/Button.js";
-import re from "../../hooks/useKey.js";
-import oe from "../../hooks/useEsc.js";
-const le = "primary", ie = (c) => {
-  const n = x(null);
-  return ne(() => {
-    n.current && c && n.current.focus();
-  }, [n.current, c]), n;
-}, ve = (c) => {
-  const {
-    placeholder: n,
-    fixedPreviousValue: m = "",
-    previousValue: P = "",
-    value: i = "",
-    isValid: a = !0,
-    errorMessage: E,
-    hideErrorIcon: I = !1,
-    onValueChanged: R = b,
-    onInputChange: N,
-    onEsc: S = b,
-    onEnterEdit: z = b,
-    buttonStyle: U = le,
-    inputClassName: j,
-    inputProps: w,
-    icon: h,
-    unit: y,
-    disabled: D = !1,
-    className: L,
-    ..._
-  } = c, u = P || m, [s, g] = l(i), [r, v] = l(u), [t, V] = l(!1), [C, O] = l(!1), p = x(s), k = x(r), [A, K] = l(i);
-  A !== i && (g(i), K(i));
-  const [M, Y] = l(u);
-  M !== u && (v(u), Y(u));
-  const $ = ie(t);
-  re((o) => {
-    C && t && a && o.key === "Enter" && B();
-  }), oe(() => {
-    C && (g(p.current), v(k.current), V(!1), S());
-  });
-  const B = () => {
-    t === !1 ? (V(!0), m || (k.current = r), p.current = s, z()) : (V(!1), p.current !== s && (v(m || p.current), R(s, r)));
-  }, q = (o) => {
-    if (N) {
-      const ee = o.nativeEvent?.data, te = o.target.value;
-      N(ee ?? te, o.currentTarget.value);
-      return;
-    }
-    g(o.target.value);
-  }, G = () => O(!0), H = () => O(!1), F = !ae(r) && r !== s && !t, d = !!y, J = f("form-group", !a && "has-feedback has-error", L), Q = f(
-    "form-control",
-    F && "padding-bottom-0 padding-top-10 text-size-12",
-    d && "padding-right-50",
-    // This value is not perfect as with longer units it might conflict with the value
-    !d && !a && I && "padding-right-10",
-    // remove the padding for the error icon if not needed
-    j
-  ), W = f(
-    "position-absolute",
-    "top-2",
-    "left-10",
-    "margin-left-3",
-    "text-size-10",
-    "text-decoration-line-through",
-    h && "padding-left-20"
-  ), X = f("rioglyph", t ? "rioglyph-ok" : "rioglyph-pencil"), Z = t && !a || D;
-  return /* @__PURE__ */ T("div", { ..._, className: J, 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: $,
-          placeholder: n,
-          className: Q,
-          value: s,
-          onChange: q,
-          onFocus: G,
-          onBlur: H,
-          disabled: !t,
-          ...w
-        }
-      ),
-      d && /* @__PURE__ */ e("div", { className: "position-absolute right-0 margin-right-50", "aria-label": "unit", children: y }),
-      F && /* @__PURE__ */ e("div", { className: W, "aria-label": "previous value", children: r }),
-      /* @__PURE__ */ e("div", { className: "input-group-btn", children: /* @__PURE__ */ e(se, { bsStyle: U, iconOnly: !0, onClick: B, disabled: Z, children: /* @__PURE__ */ e("span", { className: X }) }) })
-    ] }),
-    !a && !I && !d && /* @__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 }) })
-  ] });
+import e from "../../hooks/useKey.js";
+import t from "../../hooks/useEsc.js";
+import n from "../../utils/classNames.js";
+import { normalizeIconName as r } from "../../utils/iconNames.js";
+import i from "../button/Button.js";
+import "../../Button.js";
+import { useEffect as a, useRef as o, useState as s } from "react";
+import { noop as c } from "es-toolkit/function";
+import { isEmpty as l } from "es-toolkit/compat";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/components/saveableInput/SaveableInput.tsx
+var f = "primary", p = (e) => {
+	let t = o(null);
+	return a(() => {
+		t.current && e && t.current.focus();
+	}, [t.current, e]), t;
+}, m = (a) => {
+	let { placeholder: m, fixedPreviousValue: h = "", previousValue: g = "", value: _ = "", isValid: v = !0, errorMessage: y, hideErrorIcon: b = !1, onValueChanged: x = c, onInputChange: S, onEsc: C = c, onEnterEdit: w = c, buttonStyle: T = f, inputClassName: E, inputProps: D, iconName: O, icon: k, unit: A, disabled: ee = !1, className: te, ...j } = a, M = O ?? k, N = g || h, [P, F] = s(_), [I, L] = s(N), [R, z] = s(!1), [B, V] = s(!1), H = o(P), U = o(I), [W, G] = s(_);
+	W !== _ && (F(_), G(_));
+	let [K, q] = s(N);
+	K !== N && (L(N), q(N));
+	let J = p(R);
+	e((e) => {
+		B && R && v && e.key === "Enter" && Y();
+	}), t(() => {
+		B && (F(H.current), L(U.current), z(!1), C());
+	});
+	let Y = () => {
+		R === !1 ? (z(!0), h || (U.current = I), H.current = P, w()) : (z(!1), H.current !== P && (L(h || H.current), x(P, I)));
+	}, X = (e) => {
+		if (S) {
+			let t = e.nativeEvent?.data, n = e.target.value;
+			S(t ?? n, e.currentTarget.value);
+			return;
+		}
+		F(e.target.value);
+	}, Z = () => V(!0), ne = () => V(!1), Q = !l(I) && I !== P && !R, $ = !!A, re = n("form-group", !v && "has-feedback has-error", te), ie = n("form-control", Q && "padding-bottom-0 padding-top-10 text-size-12", $ && "padding-right-50", !$ && !v && b && "padding-right-10", E), ae = n("position-absolute", "top-2", "left-10", "margin-left-3", "text-size-10", "text-decoration-line-through", M && "padding-left-20"), oe = n("uikit-icon", R ? "icon-ok" : "icon-pencil"), se = R && !v || ee;
+	return /* @__PURE__ */ d("div", {
+		...j,
+		className: re,
+		children: [
+			/* @__PURE__ */ d("div", {
+				className: "input-group",
+				children: [
+					M && /* @__PURE__ */ u("span", {
+						className: "input-group-addon",
+						children: /* @__PURE__ */ u("span", {
+							className: `uikit-icon ${r(M)}`,
+							"aria-hidden": "true",
+							"aria-label": "input icon"
+						})
+					}),
+					/* @__PURE__ */ u("input", {
+						type: "text",
+						ref: J,
+						placeholder: m,
+						className: ie,
+						value: P,
+						onChange: X,
+						onFocus: Z,
+						onBlur: ne,
+						disabled: !R,
+						...D
+					}),
+					$ && /* @__PURE__ */ u("div", {
+						className: "position-absolute right-0 margin-right-50",
+						"aria-label": "unit",
+						children: A
+					}),
+					Q && /* @__PURE__ */ u("div", {
+						className: ae,
+						"aria-label": "previous value",
+						children: I
+					}),
+					/* @__PURE__ */ u("div", {
+						className: "input-group-btn",
+						children: /* @__PURE__ */ u(i, {
+							bsStyle: T,
+							iconOnly: !0,
+							onClick: Y,
+							disabled: se,
+							children: /* @__PURE__ */ u("span", { className: oe })
+						})
+					})
+				]
+			}),
+			!v && !b && !$ && /* @__PURE__ */ u("span", { className: "right-25 margin-right-10 form-control-feedback uikit-icon icon-error-sign" }),
+			!v && y && /* @__PURE__ */ u("span", {
+				className: "help-block z-index-max",
+				children: /* @__PURE__ */ u("span", { children: y })
+			})
+		]
+	});
 };
-export {
-  ve as default
-};
-//# sourceMappingURL=SaveableInput.js.map
+//#endregion
+export { m as default };
+
+//# sourceMappingURL=SaveableInput.js.map

package/components/saveableInput/SaveableInput.js.map

@@ -1 +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 { isEmpty } from 'es-toolkit/compat';\nimport { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\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,\n     * 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\n     * is set to false.\n     *\n     * @default 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     * @default '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     * @default false\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    const hasUnit = Boolean(unit);\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        hasUnit && 'padding-right-50', // This value is not perfect as with longer units it might conflict with the value\n        !hasUnit && !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                {hasUnit && (\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 && !hasUnit && (\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","hasUnit","wrapperClasses","classNames","inputClasses","oldValueClasses","buttonIconClasses","disableButton","jsxs","jsx","Button"],"mappings":"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"}
+{"version":3,"file":"SaveableInput.js","names":[],"sources":["../../../src/components/saveableInput/SaveableInput.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState, type ChangeEvent, type HTMLAttributes } from 'react';\nimport { isEmpty } from 'es-toolkit/compat';\nimport { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\nimport { normalizeIconName } from '../../utils/iconNames';\nimport Button from '../../Button';\nimport useKey from '../../hooks/useKey';\nimport useEsc from '../../hooks/useEsc';\nimport type { IconType } from '../icon/Icon';\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,\n     * 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\n     * is set to false.\n     *\n     * @default 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     * @default '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: `icon-search`.\n     */\n    iconName?: IconType;\n\n    /**\n     * Legacy alias for `iconName`.\n     *\n     * @deprecated Use `iconName` instead.\n     */\n    icon?: IconType;\n\n    /**\n     * Disables the component so the user cannot enter the edit mode.\n     *\n     * @default false\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        iconName,\n        icon: legacyIcon,\n        unit,\n        disabled = false,\n        className,\n        ...remainingProps\n    } = props;\n\n    const resolvedIconName = iconName ?? legacyIcon;\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    const hasUnit = Boolean(unit);\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        hasUnit && 'padding-right-50', // This value is not perfect as with longer units it might conflict with the value\n        !hasUnit && !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        resolvedIconName && 'padding-left-20'\n    );\n\n    const buttonIconClasses = classNames('uikit-icon', editInput ? 'icon-ok' : 'icon-pencil');\n\n    const disableButton = (editInput && !isValid) || disabled;\n\n    return (\n        <div {...remainingProps} className={wrapperClasses}>\n            <div className='input-group'>\n                {resolvedIconName && (\n                    <span className='input-group-addon'>\n                        <span\n                            className={`uikit-icon ${normalizeIconName(resolvedIconName)}`}\n                            aria-hidden='true'\n                            aria-label='input icon'\n                        />\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                {hasUnit && (\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 && !hasUnit && (\n                <span className='right-25 margin-right-10 form-control-feedback uikit-icon icon-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"],"mappings":"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"}

package/components/searchHighlight/SearchHighlightText.js

@@ -1,15 +1,28 @@
-import { jsx as t } from "react/jsx-runtime";
-import d, { useRef as S, useMemo as m } from "react";
-import h, { SEARCH_HIGHLIGHT_CLASS as x } from "../../hooks/useSearchHighlight.js";
-const H = (r) => r.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), w = (r) => {
-  const { text: c, query: o, caseSensitive: a = !1, highlightClassName: p = x, classNames: i = "" } = r, n = S(null), e = m(() => o.trim(), [o]), g = m(() => h.supported(), []);
-  if (h({ ref: n, query: e, highlightClassName: p, caseSensitive: a }), !g && e) {
-    const u = new RegExp(`(${H(e)})`, a ? "g" : "gi"), f = c.split(u);
-    return /* @__PURE__ */ t("span", { className: i, children: f.map((s, l) => (a ? s === e : s.toLowerCase() === e.toLowerCase()) ? /* @__PURE__ */ t("mark", { children: s }, l) : /* @__PURE__ */ t(d.Fragment, { children: s }, l)) });
-  }
-  return /* @__PURE__ */ t("span", { ref: n, className: i, children: c });
+import e, { SEARCH_HIGHLIGHT_CLASS as t } from "../../hooks/useSearchHighlight.js";
+import n, { useMemo as r, useRef as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/components/searchHighlight/SearchHighlightText.tsx
+var o = (e) => e.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), s = (s) => {
+	let { text: c, query: l, caseSensitive: u = !1, highlightClassName: d = t, classNames: f = "" } = s, p = i(null), m = r(() => l.trim(), [l]), h = r(() => e.supported(), []);
+	if (e({
+		ref: p,
+		query: m,
+		highlightClassName: d,
+		caseSensitive: u
+	}), !h && m) {
+		let e = RegExp(`(${o(m)})`, u ? "g" : "gi");
+		return /* @__PURE__ */ a("span", {
+			className: f,
+			children: c.split(e).map((e, t) => (u ? e === m : e.toLowerCase() === m.toLowerCase()) ? /* @__PURE__ */ a("mark", { children: e }, t) : /* @__PURE__ */ a(n.Fragment, { children: e }, t))
+		});
+	}
+	return /* @__PURE__ */ a("span", {
+		ref: p,
+		className: f,
+		children: c
+	});
 };
-export {
-  w as default
-};
-//# sourceMappingURL=SearchHighlightText.js.map
+//#endregion
+export { s as default };
+
+//# sourceMappingURL=SearchHighlightText.js.map

package/components/searchHighlight/SearchHighlightText.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchHighlightText.js","sources":["../../../src/components/searchHighlight/SearchHighlightText.tsx"],"sourcesContent":["import React, { useMemo, useRef } from 'react';\nimport useSearchHighlight, { SEARCH_HIGHLIGHT_CLASS } from '../../hooks/useSearchHighlight';\n\ntype SearchHighlightTextProps = {\n    /**\n     * Full text content to render and highlight.\n     */\n    text: string;\n\n    /**\n     * Search query used to highlight matches within the text.\n     */\n    query: string;\n\n    /**\n     * Whether to perform a case-sensitive match.\n     *\n     * @default false\n     */\n    caseSensitive?: boolean;\n\n    /**\n     * Optional CSS highlight class name (used by the Highlight API).\n     *\n     * @default 'search-result-highlight'\n     */\n    highlightClassName?: string;\n\n    /**\n     * Optional additional classes applied to the wrapper element.\n     */\n    classNames?: string;\n};\n\nconst escapeRegExp = (value: string) => value.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&');\n\nconst SearchHighlightText = (props: SearchHighlightTextProps) => {\n    const { text, query, caseSensitive = false, highlightClassName = SEARCH_HIGHLIGHT_CLASS, classNames = '' } = props;\n\n    const ref = useRef<HTMLSpanElement | null>(null);\n\n    // Normalize once to keep comparisons stable across re-renders.\n    const normalizedQuery = useMemo(() => query.trim(), [query]);\n\n    // Native CSS highlighting is preferred when available.\n    const isSupported = useMemo(() => useSearchHighlight.supported(), []);\n\n    // always call the hook\n    useSearchHighlight({ ref, query: normalizedQuery, highlightClassName, caseSensitive });\n\n    if (!isSupported && normalizedQuery) {\n        // Fallback: split and wrap matching segments in <mark>.\n        const regex = new RegExp(`(${escapeRegExp(normalizedQuery)})`, caseSensitive ? 'g' : 'gi');\n        const parts = text.split(regex);\n\n        return (\n            <span className={classNames}>\n                {parts.map((part, index) => {\n                    const isMatch = caseSensitive\n                        ? part === normalizedQuery\n                        : part.toLowerCase() === normalizedQuery.toLowerCase();\n                    return isMatch ? (\n                        <mark key={index}>{part}</mark>\n                    ) : (\n                        <React.Fragment key={index}>{part}</React.Fragment>\n                    );\n                })}\n            </span>\n        );\n    }\n\n    return (\n        <span ref={ref} className={classNames}>\n            {text}\n        </span>\n    );\n};\n\nexport default SearchHighlightText;\n"],"names":["escapeRegExp","value","SearchHighlightText","props","text","query","caseSensitive","highlightClassName","SEARCH_HIGHLIGHT_CLASS","classNames","ref","useRef","normalizedQuery","useMemo","isSupported","useSearchHighlight","regex","parts","jsx","part","index","React"],"mappings":";;;AAkCA,MAAMA,IAAe,CAACC,MAAkBA,EAAM,QAAQ,uBAAuB,MAAM,GAE7EC,IAAsB,CAACC,MAAoC;AAC7D,QAAM,EAAE,MAAAC,GAAM,OAAAC,GAAO,eAAAC,IAAgB,IAAO,oBAAAC,IAAqBC,GAAwB,YAAAC,IAAa,GAAA,IAAON,GAEvGO,IAAMC,EAA+B,IAAI,GAGzCC,IAAkBC,EAAQ,MAAMR,EAAM,QAAQ,CAACA,CAAK,CAAC,GAGrDS,IAAcD,EAAQ,MAAME,EAAmB,UAAA,GAAa,CAAA,CAAE;AAKpE,MAFAA,EAAmB,EAAE,KAAAL,GAAK,OAAOE,GAAiB,oBAAAL,GAAoB,eAAAD,GAAe,GAEjF,CAACQ,KAAeF,GAAiB;AAEjC,UAAMI,IAAQ,IAAI,OAAO,IAAIhB,EAAaY,CAAe,CAAC,KAAKN,IAAgB,MAAM,IAAI,GACnFW,IAAQb,EAAK,MAAMY,CAAK;AAE9B,WACI,gBAAAE,EAAC,UAAK,WAAWT,GACZ,YAAM,IAAI,CAACU,GAAMC,OACEd,IACVa,MAASP,IACTO,EAAK,YAAA,MAAkBP,EAAgB,YAAA,KAEzC,gBAAAM,EAAC,QAAA,EAAkB,UAAAC,EAAA,GAARC,CAAa,IAExB,gBAAAF,EAACG,EAAM,UAAN,EAA4B,UAAAF,EAAA,GAARC,CAAa,CAEzC,EAAA,CACL;AAAA,EAER;AAEA,SACI,gBAAAF,EAAC,QAAA,EAAK,KAAAR,GAAU,WAAWD,GACtB,UAAAL,GACL;AAER;"}
+{"version":3,"file":"SearchHighlightText.js","names":[],"sources":["../../../src/components/searchHighlight/SearchHighlightText.tsx"],"sourcesContent":["import React, { useMemo, useRef } from 'react';\nimport useSearchHighlight, { SEARCH_HIGHLIGHT_CLASS } from '../../hooks/useSearchHighlight';\n\ntype SearchHighlightTextProps = {\n    /**\n     * Full text content to render and highlight.\n     */\n    text: string;\n\n    /**\n     * Search query used to highlight matches within the text.\n     */\n    query: string;\n\n    /**\n     * Whether to perform a case-sensitive match.\n     *\n     * @default false\n     */\n    caseSensitive?: boolean;\n\n    /**\n     * Optional CSS highlight class name (used by the Highlight API).\n     *\n     * @default 'search-result-highlight'\n     */\n    highlightClassName?: string;\n\n    /**\n     * Optional additional classes applied to the wrapper element.\n     */\n    classNames?: string;\n};\n\nconst escapeRegExp = (value: string) => value.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&');\n\nconst SearchHighlightText = (props: SearchHighlightTextProps) => {\n    const { text, query, caseSensitive = false, highlightClassName = SEARCH_HIGHLIGHT_CLASS, classNames = '' } = props;\n\n    const ref = useRef<HTMLSpanElement | null>(null);\n\n    // Normalize once to keep comparisons stable across re-renders.\n    const normalizedQuery = useMemo(() => query.trim(), [query]);\n\n    // Native CSS highlighting is preferred when available.\n    const isSupported = useMemo(() => useSearchHighlight.supported(), []);\n\n    // always call the hook\n    useSearchHighlight({ ref, query: normalizedQuery, highlightClassName, caseSensitive });\n\n    if (!isSupported && normalizedQuery) {\n        // Fallback: split and wrap matching segments in <mark>.\n        const regex = new RegExp(`(${escapeRegExp(normalizedQuery)})`, caseSensitive ? 'g' : 'gi');\n        const parts = text.split(regex);\n\n        return (\n            <span className={classNames}>\n                {parts.map((part, index) => {\n                    const isMatch = caseSensitive\n                        ? part === normalizedQuery\n                        : part.toLowerCase() === normalizedQuery.toLowerCase();\n                    return isMatch ? (\n                        <mark key={index}>{part}</mark>\n                    ) : (\n                        <React.Fragment key={index}>{part}</React.Fragment>\n                    );\n                })}\n            </span>\n        );\n    }\n\n    return (\n        <span ref={ref} className={classNames}>\n            {text}\n        </span>\n    );\n};\n\nexport default SearchHighlightText;\n"],"mappings":";;;;AAkCA,IAAM,KAAgB,MAAkB,EAAM,QAAQ,uBAAuB,MAAM,GAE7E,KAAuB,MAAoC;CAC7D,IAAM,EAAE,SAAM,UAAO,mBAAgB,IAAO,wBAAqB,GAAwB,gBAAa,OAAO,GAEvG,IAAM,EAA+B,IAAI,GAGzC,IAAkB,QAAc,EAAM,KAAK,GAAG,CAAC,CAAK,CAAC,GAGrD,IAAc,QAAc,EAAmB,UAAU,GAAG,CAAC,CAAC;CAKpE,IAFA,EAAmB;EAAE;EAAK,OAAO;EAAiB;EAAoB;CAAc,CAAC,GAEjF,CAAC,KAAe,GAAiB;EAEjC,IAAM,IAAY,OAAO,IAAI,EAAa,CAAe,EAAE,IAAI,IAAgB,MAAM,IAAI;EAGzF,OACI,kBAAC,QAAD;GAAM,WAAW;aAHP,EAAK,MAAM,CAIhB,CAAA,CAAM,KAAK,GAAM,OACE,IACV,MAAS,IACT,EAAK,YAAY,MAAM,EAAgB,YAAY,KAErD,kBAAC,QAAD,EAAA,UAAmB,EAAW,GAAnB,CAAmB,IAE9B,kBAAC,EAAM,UAAP,EAAA,UAA6B,EAAqB,GAA7B,CAA6B,CAEzD;EACC,CAAA;CAEd;CAEA,OACI,kBAAC,QAAD;EAAW;EAAK,WAAW;YACtB;CACC,CAAA;AAEd"}

package/components/selects/BaseSelectDropdown.d.ts

@@ -52,12 +52,12 @@ export type BaseSelectDropdownProps<T extends SelectOption> = {
     placeholder?: string | React.ReactNode;
     dropup?: boolean;
     pullRight?: boolean;
-    autoDropDirection?: boolean;
     noItemMessage?: string | React.ReactNode;
     focusedItemIndex?: number;
     dropdownClassName?: string;
     keyboardUsed?: boolean;
     useActiveClass?: boolean;
+    anchorName?: string;
 };
 declare const BaseSelectDropdown: <T extends SelectOption>(props: BaseSelectDropdownProps<T>) => import("react/jsx-runtime").JSX.Element;
 export declare const filterOptions: <T extends SelectOption>(itemDOMValues: OptionDOMValue[], filterValue: string, options: T[]) => T[];