@astral/ui 4.32.0 → 4.32.1

package/components/PageAsideBlock/styles.js

@@ -39,6 +39,10 @@ export const StyledDivider = styled(Divider, {
 
   width: ${({ $isFullWidth, theme }) => $isFullWidth ? `calc(100% + ${theme.spacing(12)})` : '100%'};
 
+  ${({ theme }) => theme.breakpoints.down('laptop')} {
+    width: ${({ $isFullWidth, theme }) => ($isFullWidth ? `calc(100% + ${theme.spacing(10)})` : '100%')};
+  }
+
   ${({ theme }) => theme.breakpoints.down('sm')} {
     left: ${({ $isFullWidth, theme }) => $isFullWidth ? `${theme.spacing(-4)}` : '0'};
 

package/components/SearchField/SearchField.js

@@ -2,10 +2,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { CrossOutlineMd } from '../../icons/CrossOutlineMd';
 import { TextField } from '../TextField';
+import { classNames } from '../utils/classNames';
+import { searchFieldClassnames } from './constants';
 import { EndAdornmentWrapper, LoaderWrapper, SearchIcon, StyledIconButton, StyledLoader, TextFieldRoot, } from './styles';
 import { useLogic } from './useLogic';
 export const SearchField = forwardRef((props, ref) => {
     const { onChange, onClearValue, restProps, isLoading, inputRef, value, disabled, isClearButtonDisabled, onBlur, fullWidth, inputComponent, placeholder, hideHelperText, } = useLogic(props);
     const RenderComponent = inputComponent || TextField;
-    return (_jsx(TextFieldRoot, { "$isFullWidth": fullWidth, children: _jsx(RenderComponent, { type: "search", placeholder: placeholder, startAdornment: _jsx(SearchIcon, {}), disabled: disabled, hideHelperText: hideHelperText, endAdornment: _jsx(EndAdornmentWrapper, { children: isLoading ? (_jsx(LoaderWrapper, { children: _jsx(StyledLoader, {}) })) : (_jsx(StyledIconButton, { variant: "text", onClick: onClearValue, disabled: isClearButtonDisabled, "$isActive": !isClearButtonDisabled, children: _jsx(CrossOutlineMd, {}) })) }), onChange: onChange, value: value, ref: ref, inputRef: inputRef, trimmed: false, onBlur: onBlur, fullWidth: fullWidth, ...restProps }) }));
+    return (_jsx(TextFieldRoot, { "$isFullWidth": fullWidth, children: _jsx(RenderComponent, { type: "search", placeholder: placeholder, startAdornment: _jsx(SearchIcon, {}), disabled: disabled, hideHelperText: hideHelperText, endAdornment: _jsx(EndAdornmentWrapper, { className: classNames({
+                    [searchFieldClassnames.endAdornmentVisible]: !isClearButtonDisabled,
+                }), children: isLoading ? (_jsx(LoaderWrapper, { children: _jsx(StyledLoader, {}) })) : (_jsx(StyledIconButton, { variant: "text", onClick: onClearValue, disabled: isClearButtonDisabled, "$isActive": !isClearButtonDisabled, children: _jsx(CrossOutlineMd, {}) })) }), onChange: onChange, value: value, ref: ref, inputRef: inputRef, trimmed: false, onBlur: onBlur, fullWidth: fullWidth, ...restProps }) }));
 });

package/components/SearchField/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const searchFieldClassnames: {
+    endAdornmentVisible: string;
+};

package/components/SearchField/constants.js

@@ -0,0 +1,4 @@
+import { createUIKitClassname } from '../utils/createUIKitClassname';
+export const searchFieldClassnames = {
+    endAdornmentVisible: createUIKitClassname('search-field__end-adornment_visible'),
+};

package/components/SearchField/styles.js

@@ -2,6 +2,7 @@ import { SearchOutlineMd } from '../../icons/SearchOutlineMd';
 import { IconButton } from '../IconButton';
 import { Loader } from '../Loader';
 import { styled } from '../styled';
+import { searchFieldClassnames } from './constants';
 export const SearchIcon = styled(SearchOutlineMd) `
   /* Задается чтобы клик по startAdornment приводил к клику в инпут */
   pointer-events: none;
@@ -32,8 +33,15 @@ export const LoaderWrapper = styled.div `
   height: 100%;
 `;
 export const EndAdornmentWrapper = styled.div `
+  /* Задается чтобы клик по endAdornment приводил к клику в инпут */
+  pointer-events: none;
+
   display: flex;
   align-items: center;
+
+  &.${searchFieldClassnames.endAdornmentVisible} {
+    pointer-events: unset;
+  }
 `;
 export const StyledLoader = styled(Loader) `
   width: 20px;

package/node/components/PageAsideBlock/styles.js

@@ -42,6 +42,10 @@ exports.StyledDivider = (0, styled_1.styled)(Divider_2.Divider, {
 
   width: ${({ $isFullWidth, theme }) => $isFullWidth ? `calc(100% + ${theme.spacing(12)})` : '100%'};
 
+  ${({ theme }) => theme.breakpoints.down('laptop')} {
+    width: ${({ $isFullWidth, theme }) => ($isFullWidth ? `calc(100% + ${theme.spacing(10)})` : '100%')};
+  }
+
   ${({ theme }) => theme.breakpoints.down('sm')} {
     left: ${({ $isFullWidth, theme }) => $isFullWidth ? `${theme.spacing(-4)}` : '0'};
 

package/node/components/SearchField/SearchField.js

@@ -5,10 +5,14 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const CrossOutlineMd_1 = require("../../icons/CrossOutlineMd");
 const TextField_1 = require("../TextField");
+const classNames_1 = require("../utils/classNames");
+const constants_1 = require("./constants");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
 exports.SearchField = (0, react_1.forwardRef)((props, ref) => {
     const { onChange, onClearValue, restProps, isLoading, inputRef, value, disabled, isClearButtonDisabled, onBlur, fullWidth, inputComponent, placeholder, hideHelperText, } = (0, useLogic_1.useLogic)(props);
     const RenderComponent = inputComponent || TextField_1.TextField;
-    return ((0, jsx_runtime_1.jsx)(styles_1.TextFieldRoot, { "$isFullWidth": fullWidth, children: (0, jsx_runtime_1.jsx)(RenderComponent, { type: "search", placeholder: placeholder, startAdornment: (0, jsx_runtime_1.jsx)(styles_1.SearchIcon, {}), disabled: disabled, hideHelperText: hideHelperText, endAdornment: (0, jsx_runtime_1.jsx)(styles_1.EndAdornmentWrapper, { children: isLoading ? ((0, jsx_runtime_1.jsx)(styles_1.LoaderWrapper, { children: (0, jsx_runtime_1.jsx)(styles_1.StyledLoader, {}) })) : ((0, jsx_runtime_1.jsx)(styles_1.StyledIconButton, { variant: "text", onClick: onClearValue, disabled: isClearButtonDisabled, "$isActive": !isClearButtonDisabled, children: (0, jsx_runtime_1.jsx)(CrossOutlineMd_1.CrossOutlineMd, {}) })) }), onChange: onChange, value: value, ref: ref, inputRef: inputRef, trimmed: false, onBlur: onBlur, fullWidth: fullWidth, ...restProps }) }));
+    return ((0, jsx_runtime_1.jsx)(styles_1.TextFieldRoot, { "$isFullWidth": fullWidth, children: (0, jsx_runtime_1.jsx)(RenderComponent, { type: "search", placeholder: placeholder, startAdornment: (0, jsx_runtime_1.jsx)(styles_1.SearchIcon, {}), disabled: disabled, hideHelperText: hideHelperText, endAdornment: (0, jsx_runtime_1.jsx)(styles_1.EndAdornmentWrapper, { className: (0, classNames_1.classNames)({
+                    [constants_1.searchFieldClassnames.endAdornmentVisible]: !isClearButtonDisabled,
+                }), children: isLoading ? ((0, jsx_runtime_1.jsx)(styles_1.LoaderWrapper, { children: (0, jsx_runtime_1.jsx)(styles_1.StyledLoader, {}) })) : ((0, jsx_runtime_1.jsx)(styles_1.StyledIconButton, { variant: "text", onClick: onClearValue, disabled: isClearButtonDisabled, "$isActive": !isClearButtonDisabled, children: (0, jsx_runtime_1.jsx)(CrossOutlineMd_1.CrossOutlineMd, {}) })) }), onChange: onChange, value: value, ref: ref, inputRef: inputRef, trimmed: false, onBlur: onBlur, fullWidth: fullWidth, ...restProps }) }));
 });

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

@@ -0,0 +1,3 @@
+export declare const searchFieldClassnames: {
+    endAdornmentVisible: string;
+};

package/node/components/SearchField/constants.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.searchFieldClassnames = void 0;
+const createUIKitClassname_1 = require("../utils/createUIKitClassname");
+exports.searchFieldClassnames = {
+    endAdornmentVisible: (0, createUIKitClassname_1.createUIKitClassname)('search-field__end-adornment_visible'),
+};

package/node/components/SearchField/styles.js

@@ -5,6 +5,7 @@ const SearchOutlineMd_1 = require("../../icons/SearchOutlineMd");
 const IconButton_1 = require("../IconButton");
 const Loader_1 = require("../Loader");
 const styled_1 = require("../styled");
+const constants_1 = require("./constants");
 exports.SearchIcon = (0, styled_1.styled)(SearchOutlineMd_1.SearchOutlineMd) `
   /* Задается чтобы клик по startAdornment приводил к клику в инпут */
   pointer-events: none;
@@ -35,8 +36,15 @@ exports.LoaderWrapper = styled_1.styled.div `
   height: 100%;
 `;
 exports.EndAdornmentWrapper = styled_1.styled.div `
+  /* Задается чтобы клик по endAdornment приводил к клику в инпут */
+  pointer-events: none;
+
   display: flex;
   align-items: center;
+
+  &.${constants_1.searchFieldClassnames.endAdornmentVisible} {
+    pointer-events: unset;
+  }
 `;
 exports.StyledLoader = (0, styled_1.styled)(Loader_1.Loader) `
   width: 20px;

package/package.json

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