@uxf/ui 11.52.1 → 11.52.2

package/multi-combobox/multi-combobox.js

@@ -106,14 +106,14 @@ exports.MultiCombobox = (0, react_3.forwardRef)((props, ref) => {
     const inputRef = (0, react_3.useRef)(null);
     const input = (0, use_input_focus_1.useInputFocus)(inputRef, props.onBlur, props.onFocus);
     const stableRef = (0, react_3.useMemo)(() => (0, compose_refs_1.composeRefs)(inputRef, dropdown.refs.setReference), [dropdown.refs.setReference]);
-    const optionRemoveHandler = (valueId) => props.onChange(selectedOptions.filter((v) => v.id !== valueId));
+    const optionRemoveHandler = (valueId) => props.onChange(selectedOptions.filter((v) => v.id.toString() !== valueId.toString()));
     const chipCloseHandler = (valueId) => (e) => {
         e.preventDefault();
         e.stopPropagation();
         optionRemoveHandler(valueId);
     };
     const checkboxChangeHandler = (valueId) => (checked) => {
-        const isAlreadySelected = selectedOptions.find((v) => v.id === valueId);
+        const isAlreadySelected = selectedOptions.find((v) => v.id.toString() === valueId.toString());
         if (isAlreadySelected && !checked) {
             optionRemoveHandler(valueId);
             return;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/ui",
-    "version": "11.52.1",
+    "version": "11.52.2",
     "description": "",
     "publishConfig": {
         "access": "public"
@@ -23,10 +23,10 @@
     "dependencies": {
         "@floating-ui/react": "0.26.28",
         "@headlessui/react": "1.7.19",
-        "@uxf/core": "11.52.0",
-        "@uxf/core-react": "11.52.0",
+        "@uxf/core": "11.52.2",
+        "@uxf/core-react": "11.52.2",
         "@uxf/datepicker": "11.50.0",
-        "@uxf/styles": "11.52.0",
+        "@uxf/styles": "11.52.2",
         "color2k": "2.0.3",
         "dayjs": "1.11.13",
         "jump.js": "1.0.2",

package/textarea/textarea.d.ts

@@ -9,8 +9,8 @@ export interface TextareaProps extends FormControlProps<string, HTMLTextAreaElem
     hiddenLabel?: boolean;
     id?: string;
     label?: ReactNode;
-    maxLength?: number | undefined;
-    minLength?: number | undefined;
+    maxLength?: number;
+    minLength?: number;
     placeholder?: string;
     rows?: number;
     style?: CSSProperties;

package/textarea/textarea.js

@@ -26,23 +26,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Textarea = void 0;
 const use_input_focus_1 = require("@uxf/core-react/hooks/use-input-focus");
-const use_latest_1 = require("@uxf/core-react/hooks/use-latest");
+const use_isomorphic_layout_effect_1 = require("@uxf/core-react/hooks/use-isomorphic-layout-effect");
 const compose_refs_1 = require("@uxf/core-react/utils/compose-refs");
 const classes_1 = require("@uxf/core/constants/classes");
+const adjust_textarea_height_1 = require("@uxf/core/utils/adjust-textarea-height");
 const cx_1 = require("@uxf/core/utils/cx");
 const react_1 = __importStar(require("react"));
 const form_component_1 = require("../form-component");
-function autoHeightHandler(element, rows = 4) {
-    element.style.height = "auto";
-    if (rows >= 1) {
-        const contentHeight = element.scrollHeight;
-        const lineHeight = parseFloat(window.getComputedStyle(element).getPropertyValue("line-height"));
-        const fontSize = parseFloat(window.getComputedStyle(element).getPropertyValue("font-size"));
-        const targetHeight = parseInt((rows * fontSize * (lineHeight / fontSize)).toFixed(3), 10);
-        element.style.height = Math.max(targetHeight, contentHeight) + "px";
-    }
-}
-const EVENTS = ["input", "cut", "paste", "drop"];
 exports.Textarea = (0, react_1.forwardRef)((props, ref) => {
     var _a, _b;
     const innerRef = (0, react_1.useRef)(null);
@@ -51,24 +41,17 @@ exports.Textarea = (0, react_1.forwardRef)((props, ref) => {
     const id = (_a = props.id) !== null && _a !== void 0 ? _a : generatedId;
     const errorId = props.isInvalid ? `${id}--error-message` : undefined;
     const rootClassName = (0, cx_1.cx)("uxf-textarea", ((_b = props.isFocused) !== null && _b !== void 0 ? _b : input.focused) && classes_1.CLASSES.IS_FOCUSED, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.className);
-    const latestRows = (0, use_latest_1.useLatest)(props.rows);
-    (0, react_1.useEffect)(() => {
+    const handleChange = (event) => props.onChange(event.target.value, event);
+    const focusTextareaOnWrapperClick = () => { var _a; return (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.focus(); };
+    (0, use_isomorphic_layout_effect_1.useIsomorphicLayoutEffect)(() => {
         const node = innerRef.current;
         if (!node || props.disableAutoHeight) {
             return;
         }
-        const handler = () => autoHeightHandler(node, latestRows.current);
-        handler();
-        EVENTS.map((e) => node.addEventListener(e, handler));
-        window.addEventListener("resize", handler);
-        return () => {
-            EVENTS.map((e) => node.removeEventListener(e, handler));
-            window.removeEventListener("resize", handler);
-        };
-    }, [props.disableAutoHeight, latestRows]);
-    const onWrapperClick = () => { var _a; return (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.focus(); };
+        (0, adjust_textarea_height_1.adjustTextareaHeight)(node, props.rows);
+    }, [props.disableAutoHeight, props.rows, props.value]);
     return (react_1.default.createElement(form_component_1.FormComponent, { className: rootClassName, errorId: errorId, form: props.form, helperText: props.helperText, hiddenLabel: props.hiddenLabel, inputId: id, isRequired: props.isRequired, label: props.label, name: props.name },
-        react_1.default.createElement("div", { className: "uxf-textarea__wrapper", onClick: onWrapperClick, style: props.style },
-            react_1.default.createElement("textarea", { "aria-describedby": errorId, "aria-invalid": props.isInvalid, autoComplete: props.autoComplete, className: "uxf-textarea__element", disabled: props.isDisabled, form: props.form, id: id, maxLength: props.maxLength, minLength: props.minLength, name: props.name, onBlur: input.onBlur, onChange: (event) => props.onChange(event.target.value, event), onFocus: input.onFocus, placeholder: props.placeholder, readOnly: props.isReadOnly, ref: (0, compose_refs_1.composeRefs)(innerRef, ref), required: props.isRequired, rows: props.rows, value: props.value }))));
+        react_1.default.createElement("div", { className: "uxf-textarea__wrapper", onClick: focusTextareaOnWrapperClick, style: props.style },
+            react_1.default.createElement("textarea", { "aria-describedby": errorId, "aria-invalid": props.isInvalid, autoComplete: props.autoComplete, className: "uxf-textarea__element", disabled: props.isDisabled, form: props.form, id: id, maxLength: props.maxLength, minLength: props.minLength, name: props.name, onBlur: input.onBlur, onChange: handleChange, onFocus: input.onFocus, placeholder: props.placeholder, readOnly: props.isReadOnly, ref: (0, compose_refs_1.composeRefs)(innerRef, ref), required: props.isRequired, rows: props.rows, value: props.value }))));
 });
 exports.Textarea.displayName = "UxfUiTextarea";