@astral/ui 4.73.0 → 4.74.0

package/components/DashboardLayout/Header/styles.js

@@ -70,7 +70,9 @@ export const HeaderSection = styled.div `
   align-items: center;
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
-    flex-grow: 1;
+    flex-shrink: 0;
+
+    min-width: 0;
   }
 `;
 export const HeaderContentSection = styled(HeaderSection) `
@@ -78,6 +80,8 @@ export const HeaderContentSection = styled(HeaderSection) `
   justify-content: flex-end;
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
+    flex-grow: 1;
+    flex-shrink: unset;
     gap: ${({ theme }) => theme.spacing(2)};
 
     &.${dashboardLayoutHeaderClassnames.priorityFeatureMenuOrg} {
@@ -119,6 +123,7 @@ export const HeaderContent = styled.div `
   justify-content: space-between;
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
+    width: 100%;
     padding: 0;
   }
 `;
@@ -127,6 +132,17 @@ export const HeaderContent = styled.div `
  */
 export const PriorityFeatureWrapper = styled.div `
   ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: flex;
+    justify-content: flex-end;
+
+    min-width: 0;
+
+    &.${dashboardLayoutHeaderClassnames.priorityFeatureMenuOrg} {
+      & .${menuOrganizationClassnames.button} {
+        padding: ${({ theme }) => theme.spacing(2, 0)};
+      }
+    }
+
     &.${dashboardLayoutHeaderClassnames.featureInSidebar} {
       position: absolute;
       z-index: ${({ theme }) => theme.zIndex.appBar - 1};
@@ -188,6 +204,10 @@ export const PriorityFeatureWrapper = styled.div `
       }
 
       &.${dashboardLayoutHeaderClassnames.priorityFeatureMenuOrg} {
+        & .${menuOrganizationClassnames.button} {
+          padding: ${({ theme }) => theme.spacing(2, 0)};
+        }
+
         & .${dashboardLayoutHeaderClassnames.profile} {
           display: block;
           flex-grow: 1;

package/components/MenuOrganization/OrganizationButton/styles.js

@@ -27,6 +27,7 @@ export const StyledButton = styled(Button) `
     justify-content: space-between;
 
     width: 100%;
+    min-width: unset;
     max-width: unset;
 
     border-radius: 0;
@@ -48,6 +49,8 @@ export const Container = styled.div `
   display: flex;
   flex-direction: column;
 
+  /* Позволяет элементу сжиматься до ширины контейнера */
+  min-width: 0;
   max-width: 260px;
 `;
 export const StyledTypography = styled(Typography, {

package/components/SearchField/types.d.ts

@@ -12,4 +12,13 @@ export type SearchFieldProps = Omit<TextFieldProps, 'startAdornment' | 'endAdorn
      * Если true, будет отображаться лоадер в конце инпута
      */
     isLoading?: boolean;
+    /**
+     * Если true, вводимое пользователем значение будет применяться с debounce задержкой
+     */
+    isDebounced?: boolean;
+    /**
+     * Время, на которое будет откладываться вызов onChange при вводе символов в инпут
+     * @default 250
+     */
+    debounceDelay?: number;
 };

package/components/SearchField/useLogic/useLogic.d.ts

@@ -15,5 +15,5 @@ type UseLogicResult = {
     onBlur: (event: FocusEvent<HTMLInputElement>) => void;
     hideHelperText?: boolean;
 };
-export declare const useLogic: ({ onChange: propsOnChange, defaultValue, value, inputRef: externalInputRef, disabled, onBlur: propsOnBlur, fullWidth, isLoading, placeholder, inputComponent, hideHelperText, ...restProps }: SearchFieldProps) => UseLogicResult;
+export declare const useLogic: ({ onChange: propsOnChange, defaultValue, value, inputRef: externalInputRef, disabled, onBlur: propsOnBlur, fullWidth, isLoading, placeholder, inputComponent, hideHelperText, isDebounced, debounceDelay, ...restProps }: SearchFieldProps) => UseLogicResult;
 export {};

package/components/SearchField/useLogic/useLogic.js

@@ -1,7 +1,9 @@
-import { useEffect, useState, } from 'react';
+import { useCallback, useEffect, useMemo, useState, } from 'react';
 import { useFirstMountState } from '../../useFirstMountState';
 import { useForwardedRef } from '../../useForwardedRef';
-export const useLogic = ({ onChange: propsOnChange, defaultValue, value, inputRef: externalInputRef, disabled, onBlur: propsOnBlur, fullWidth, isLoading, placeholder = 'Поиск', inputComponent, hideHelperText = true, ...restProps }) => {
+import { debounce } from '../../utils/debounce';
+const DEFAULT_DEBOUNCE_TIME = 250;
+export const useLogic = ({ onChange: propsOnChange, defaultValue, value, inputRef: externalInputRef, disabled, onBlur: propsOnBlur, fullWidth, isLoading, placeholder = 'Поиск', inputComponent, hideHelperText = true, isDebounced, debounceDelay = DEFAULT_DEBOUNCE_TIME, ...restProps }) => {
     const inputRef = useForwardedRef(externalInputRef);
     const [internalValue, setInternalValue] = useState(defaultValue || value || '');
     const isFirstRender = useFirstMountState();
@@ -13,13 +15,29 @@ export const useLogic = ({ onChange: propsOnChange, defaultValue, value, inputRe
             setInternalValue('');
         }
     }, [value]);
+    const createChangeEvent = useCallback((eventValue) => ({
+        target: {
+            value: eventValue,
+        },
+    }), []);
+    const debouncedOnChange = useMemo(() => isDebounced
+        ? debounce((targetValue) => propsOnChange?.(createChangeEvent(targetValue)), {
+            waitMs: debounceDelay,
+        }).call
+        : () => undefined, [createChangeEvent, propsOnChange, isDebounced]);
     const onChange = (event) => {
-        const trimmedEvent = {
-            ...event,
-            target: { ...event.target, value: event.target.value.trim() },
-        };
-        propsOnChange?.(trimmedEvent);
-        setInternalValue(event.target.value);
+        const originalValue = event.target.value;
+        setInternalValue(originalValue);
+        if (!propsOnChange) {
+            return;
+        }
+        const trimmedValue = originalValue.trim();
+        return isDebounced
+            ? debouncedOnChange(trimmedValue)
+            : propsOnChange({
+                ...event,
+                target: { ...event.target, value: trimmedValue },
+            });
     };
     const onBlur = (event) => {
         propsOnBlur?.(event);
@@ -27,15 +45,9 @@ export const useLogic = ({ onChange: propsOnChange, defaultValue, value, inputRe
             setInternalValue(value);
         }
     };
-    const createChangeEvent = (eventValue) => {
-        return {
-            target: {
-                value: eventValue,
-            },
-        };
-    };
     const onClearValue = () => {
-        onChange?.(createChangeEvent(''));
+        setInternalValue('');
+        propsOnChange?.(createChangeEvent(''));
         inputRef.current.value = '';
         inputRef.current?.focus();
     };

package/node/components/DashboardLayout/Header/styles.js

@@ -73,7 +73,9 @@ exports.HeaderSection = styled_1.styled.div `
   align-items: center;
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
-    flex-grow: 1;
+    flex-shrink: 0;
+
+    min-width: 0;
   }
 `;
 exports.HeaderContentSection = (0, styled_1.styled)(exports.HeaderSection) `
@@ -81,6 +83,8 @@ exports.HeaderContentSection = (0, styled_1.styled)(exports.HeaderSection) `
   justify-content: flex-end;
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
+    flex-grow: 1;
+    flex-shrink: unset;
     gap: ${({ theme }) => theme.spacing(2)};
 
     &.${constants_6.dashboardLayoutHeaderClassnames.priorityFeatureMenuOrg} {
@@ -122,6 +126,7 @@ exports.HeaderContent = styled_1.styled.div `
   justify-content: space-between;
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
+    width: 100%;
     padding: 0;
   }
 `;
@@ -130,6 +135,17 @@ exports.HeaderContent = styled_1.styled.div `
  */
 exports.PriorityFeatureWrapper = styled_1.styled.div `
   ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: flex;
+    justify-content: flex-end;
+
+    min-width: 0;
+
+    &.${constants_6.dashboardLayoutHeaderClassnames.priorityFeatureMenuOrg} {
+      & .${constants_1.menuOrganizationClassnames.button} {
+        padding: ${({ theme }) => theme.spacing(2, 0)};
+      }
+    }
+
     &.${constants_6.dashboardLayoutHeaderClassnames.featureInSidebar} {
       position: absolute;
       z-index: ${({ theme }) => theme.zIndex.appBar - 1};
@@ -191,6 +207,10 @@ exports.PriorityFeatureWrapper = styled_1.styled.div `
       }
 
       &.${constants_6.dashboardLayoutHeaderClassnames.priorityFeatureMenuOrg} {
+        & .${constants_1.menuOrganizationClassnames.button} {
+          padding: ${({ theme }) => theme.spacing(2, 0)};
+        }
+
         & .${constants_6.dashboardLayoutHeaderClassnames.profile} {
           display: block;
           flex-grow: 1;

package/node/components/MenuOrganization/OrganizationButton/styles.js

@@ -30,6 +30,7 @@ exports.StyledButton = (0, styled_1.styled)(Button_1.Button) `
     justify-content: space-between;
 
     width: 100%;
+    min-width: unset;
     max-width: unset;
 
     border-radius: 0;
@@ -51,6 +52,8 @@ exports.Container = styled_1.styled.div `
   display: flex;
   flex-direction: column;
 
+  /* Позволяет элементу сжиматься до ширины контейнера */
+  min-width: 0;
   max-width: 260px;
 `;
 exports.StyledTypography = (0, styled_1.styled)(Typography_1.Typography, {

package/node/components/SearchField/types.d.ts

@@ -12,4 +12,13 @@ export type SearchFieldProps = Omit<TextFieldProps, 'startAdornment' | 'endAdorn
      * Если true, будет отображаться лоадер в конце инпута
      */
     isLoading?: boolean;
+    /**
+     * Если true, вводимое пользователем значение будет применяться с debounce задержкой
+     */
+    isDebounced?: boolean;
+    /**
+     * Время, на которое будет откладываться вызов onChange при вводе символов в инпут
+     * @default 250
+     */
+    debounceDelay?: number;
 };

package/node/components/SearchField/useLogic/useLogic.d.ts

@@ -15,5 +15,5 @@ type UseLogicResult = {
     onBlur: (event: FocusEvent<HTMLInputElement>) => void;
     hideHelperText?: boolean;
 };
-export declare const useLogic: ({ onChange: propsOnChange, defaultValue, value, inputRef: externalInputRef, disabled, onBlur: propsOnBlur, fullWidth, isLoading, placeholder, inputComponent, hideHelperText, ...restProps }: SearchFieldProps) => UseLogicResult;
+export declare const useLogic: ({ onChange: propsOnChange, defaultValue, value, inputRef: externalInputRef, disabled, onBlur: propsOnBlur, fullWidth, isLoading, placeholder, inputComponent, hideHelperText, isDebounced, debounceDelay, ...restProps }: SearchFieldProps) => UseLogicResult;
 export {};

package/node/components/SearchField/useLogic/useLogic.js

@@ -4,7 +4,9 @@ exports.useLogic = void 0;
 const react_1 = require("react");
 const useFirstMountState_1 = require("../../useFirstMountState");
 const useForwardedRef_1 = require("../../useForwardedRef");
-const useLogic = ({ onChange: propsOnChange, defaultValue, value, inputRef: externalInputRef, disabled, onBlur: propsOnBlur, fullWidth, isLoading, placeholder = 'Поиск', inputComponent, hideHelperText = true, ...restProps }) => {
+const debounce_1 = require("../../utils/debounce");
+const DEFAULT_DEBOUNCE_TIME = 250;
+const useLogic = ({ onChange: propsOnChange, defaultValue, value, inputRef: externalInputRef, disabled, onBlur: propsOnBlur, fullWidth, isLoading, placeholder = 'Поиск', inputComponent, hideHelperText = true, isDebounced, debounceDelay = DEFAULT_DEBOUNCE_TIME, ...restProps }) => {
     const inputRef = (0, useForwardedRef_1.useForwardedRef)(externalInputRef);
     const [internalValue, setInternalValue] = (0, react_1.useState)(defaultValue || value || '');
     const isFirstRender = (0, useFirstMountState_1.useFirstMountState)();
@@ -16,13 +18,29 @@ const useLogic = ({ onChange: propsOnChange, defaultValue, value, inputRef: exte
             setInternalValue('');
         }
     }, [value]);
+    const createChangeEvent = (0, react_1.useCallback)((eventValue) => ({
+        target: {
+            value: eventValue,
+        },
+    }), []);
+    const debouncedOnChange = (0, react_1.useMemo)(() => isDebounced
+        ? (0, debounce_1.debounce)((targetValue) => propsOnChange?.(createChangeEvent(targetValue)), {
+            waitMs: debounceDelay,
+        }).call
+        : () => undefined, [createChangeEvent, propsOnChange, isDebounced]);
     const onChange = (event) => {
-        const trimmedEvent = {
-            ...event,
-            target: { ...event.target, value: event.target.value.trim() },
-        };
-        propsOnChange?.(trimmedEvent);
-        setInternalValue(event.target.value);
+        const originalValue = event.target.value;
+        setInternalValue(originalValue);
+        if (!propsOnChange) {
+            return;
+        }
+        const trimmedValue = originalValue.trim();
+        return isDebounced
+            ? debouncedOnChange(trimmedValue)
+            : propsOnChange({
+                ...event,
+                target: { ...event.target, value: trimmedValue },
+            });
     };
     const onBlur = (event) => {
         propsOnBlur?.(event);
@@ -30,15 +48,9 @@ const useLogic = ({ onChange: propsOnChange, defaultValue, value, inputRef: exte
             setInternalValue(value);
         }
     };
-    const createChangeEvent = (eventValue) => {
-        return {
-            target: {
-                value: eventValue,
-            },
-        };
-    };
     const onClearValue = () => {
-        onChange?.(createChangeEvent(''));
+        setInternalValue('');
+        propsOnChange?.(createChangeEvent(''));
         inputRef.current.value = '';
         inputRef.current?.focus();
     };

package/package.json

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