npm - @astral/ui - Versions diffs - 4.105.0 → 4.107.0 - Mend

@astral/ui 4.105.0 → 4.107.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (333) hide show

package/node/components/TreeLikeAsyncAutocomplete/Input/useLogic/useLogic.d.ts CHANGED Viewed

@@ -1,13 +1,14 @@
 import { type MouseEvent, type SyntheticEvent } from 'react';
 import { type TreeLikeAsyncAutocompleteValue } from '../../types';
 import type { InputProps } from '../types';
-type UseLogicParams = Pick<InputProps, 'value' | 'disabled' | 'inputRef' | 'onChange' | 'isLoading' | 'onClick'>;
-export declare const useLogic: ({ value, disabled, isLoading, inputRef: externalInputRef, onChange: propsOnChange, onClick: propsOnClick, }: UseLogicParams) => {
+type UseLogicParams = Pick<InputProps, 'value' | 'disabled' | 'inputRef' | 'InputProps' | 'onChange' | 'isLoading' | 'onClick'>;
+export declare const useLogic: ({ value, disabled, isLoading, inputRef: externalInputRef, InputProps: externalInputProps, onChange: propsOnChange, onClick: propsOnClick, }: UseLogicParams) => {
     isVisibleClearButton: boolean;
     onClearAll: (event: SyntheticEvent<HTMLButtonElement>) => void;
     onChange: (newValue: TreeLikeAsyncAutocompleteValue | undefined) => void;
     onClick: (event: MouseEvent<HTMLDivElement>) => void;
     isVisibleTagsList: boolean;
+    fieldRef: import("react").RefObject<HTMLElement | null>;
     textFieldProps: {
         value: string;
         $isHidden: boolean;

package/node/components/TreeLikeAsyncAutocomplete/Input/useLogic/useLogic.js CHANGED Viewed

@@ -3,8 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = void 0;
 const react_1 = require("react");
 const useForwardedRef_1 = require("../../../useForwardedRef");
-const useLogic = ({ value, disabled, isLoading, inputRef: externalInputRef, onChange: propsOnChange, onClick: propsOnClick, }) => {
+const useLogic = ({ value, disabled, isLoading, inputRef: externalInputRef, InputProps: externalInputProps, onChange: propsOnChange, onClick: propsOnClick, }) => {
     const inputRef = (0, useForwardedRef_1.useForwardedRef)(externalInputRef);
+    const fieldRef = (0, useForwardedRef_1.useForwardedRef)(externalInputProps?.ref);
     const prevValue = (0, react_1.useRef)(undefined);
     (0, react_1.useEffect)(() => {
         if (value && !prevValue.current) {
@@ -43,6 +44,7 @@ const useLogic = ({ value, disabled, isLoading, inputRef: externalInputRef, onCh
         onChange,
         onClick,
         isVisibleTagsList: hasValue,
+        fieldRef,
         textFieldProps: {
             value: preparedValue,
             $isHidden: hasValue,

package/node/components/TreeLikeAutocomplete/Input/Input.js CHANGED Viewed

@@ -11,7 +11,7 @@ const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
 const ClearButton = ({ disabled, onClick }) => ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: "text", color: "grey", disabled: disabled, title: constants_1.CLEAR_TEXT, "aria-label": constants_1.CLEAR_TEXT, onClick: onClick, children: (0, jsx_runtime_1.jsx)(CrossOutlineMd_1.CrossOutlineMd, {}) }));
 exports.Input = (0, react_1.forwardRef)((props, forwardedRef) => {
-    const { textFieldProps, isVisibleTagsList, isVisibleClearButton, handleChange, handleClearAll, } = (0, useLogic_1.useLogic)(props);
+    const { textFieldProps, isVisibleTagsList, isVisibleClearButton, handleChange, handleClearAll, fieldRef, } = (0, useLogic_1.useLogic)(props);
     const { value, valueToRender, disabled, isLoading, onChange, onClick, ...restProps } = props;
-    return ((0, jsx_runtime_1.jsx)(styles_1.StyledTextField, { ...restProps, ref: forwardedRef, disabled: disabled, inputProps: { readOnly: true }, startAdornment: isVisibleTagsList && ((0, jsx_runtime_1.jsx)(styles_1.StyledTagsList, { data: valueToRender, keyId: "id", isDisabled: disabled, getOptionLabel: (option) => option.label, onClick: onClick, onChange: handleChange })), endAdornment: (0, jsx_runtime_1.jsxs)(styles_1.EndAdornmentWrapper, { children: [isLoading && (0, jsx_runtime_1.jsx)(styles_1.StyledLoader, {}), isVisibleClearButton && ((0, jsx_runtime_1.jsx)(ClearButton, { disabled: disabled, onClick: handleClearAll })), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: "text", color: "grey", disabled: disabled, children: (0, jsx_runtime_1.jsx)(DownOutlineMd_1.DownOutlineMd, {}) })] }), onClick: onClick, ...textFieldProps }));
+    return ((0, jsx_runtime_1.jsx)(styles_1.StyledTextField, { ...restProps, ref: forwardedRef, disabled: disabled, inputProps: { readOnly: true }, InputProps: { ...restProps.InputProps, ref: fieldRef }, startAdornment: isVisibleTagsList && ((0, jsx_runtime_1.jsx)(styles_1.StyledTagsList, { data: valueToRender, keyId: "id", isDisabled: disabled, fieldRef: fieldRef, getOptionLabel: (option) => option.label, onClick: onClick, onChange: handleChange })), endAdornment: (0, jsx_runtime_1.jsxs)(styles_1.EndAdornmentWrapper, { children: [isLoading && (0, jsx_runtime_1.jsx)(styles_1.StyledLoader, {}), isVisibleClearButton && ((0, jsx_runtime_1.jsx)(ClearButton, { disabled: disabled, onClick: handleClearAll })), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: "text", color: "grey", disabled: disabled, children: (0, jsx_runtime_1.jsx)(DownOutlineMd_1.DownOutlineMd, {}) })] }), onClick: onClick, ...textFieldProps }));
 });

package/node/components/TreeLikeAutocomplete/Input/useLogic/useLogic.d.ts CHANGED Viewed

@@ -2,12 +2,13 @@ import { type SyntheticEvent } from 'react';
 import { type TreeListData } from '../../../Tree';
 import type { TreeLikeAutocompleteValue } from '../../types';
 import { type InputProps } from '../types';
-export declare const useLogic: ({ value, disabled, isLoading, inputRef: externalInputRef, onChange, }: InputProps) => {
+export declare const useLogic: ({ value, disabled, isLoading, inputRef: externalInputRef, InputProps: externalInputProps, onChange, }: InputProps) => {
     textFieldProps: {
         $isHidden: boolean;
         inputRef: import("react").RefObject<HTMLInputElement | null>;
         value: string | TreeLikeAutocompleteValue;
     };
+    fieldRef: import("react").RefObject<HTMLElement | null>;
     isVisibleTagsList: boolean;
     isVisibleClearButton: boolean;
     handleChange: (newValue: TreeListData[] | undefined) => void;

package/node/components/TreeLikeAutocomplete/Input/useLogic/useLogic.js CHANGED Viewed

@@ -3,8 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = void 0;
 const react_1 = require("react");
 const useForwardedRef_1 = require("../../../useForwardedRef");
-const useLogic = ({ value, disabled, isLoading, inputRef: externalInputRef, onChange, }) => {
+const useLogic = ({ value, disabled, isLoading, inputRef: externalInputRef, InputProps: externalInputProps, onChange, }) => {
     const inputRef = (0, useForwardedRef_1.useForwardedRef)(externalInputRef);
+    const fieldRef = (0, useForwardedRef_1.useForwardedRef)(externalInputProps?.ref);
     const prevValue = (0, react_1.useRef)(undefined);
     (0, react_1.useEffect)(() => {
         if (value && !prevValue.current) {
@@ -41,6 +42,7 @@ const useLogic = ({ value, disabled, isLoading, inputRef: externalInputRef, onCh
             inputRef,
             value: preparedValue,
         },
+        fieldRef,
         isVisibleTagsList: hasValue,
         isVisibleClearButton,
         handleChange,

package/node/components/useScrollManagement/useScrollManagement.js CHANGED Viewed

@@ -26,13 +26,14 @@ const useScrollManagement = ({ scrollRef, isEndReached, onLoadMore, virtuosoId,
         if (scrollRef?.current?.parentElement) {
             scrollRef.current.parentElement.style.position = 'relative';
         }
-    }, [scrollRef]);
-    const recalculateVerticalScroll = () => {
+    }, [scrollRef, isMobile]);
+    const recalculateVerticalScroll = (0, react_1.useCallback)(() => {
         const list = document.getElementById(virtuosoId);
-        if (scrollRef?.current && list) {
-            setHasVerticalScroll(list?.clientHeight > scrollRef.current?.clientHeight);
+        if (!scrollParent || !list) {
+            return;
         }
-    };
+        setHasVerticalScroll(list.clientHeight > scrollParent.clientHeight);
+    }, [scrollParent, virtuosoId]);
     const handleEndReach = () => {
         if (!isEndReached && onLoadMore) {
             onLoadMore();

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@astral/ui",
-  "version": "4.105.0",
+  "version": "4.107.0",
   "browser": "./index.js",
   "main": "./node/index.js",
   "dependencies": {