@astral/ui 4.31.2 → 4.32.1

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/node/components/theme/breakpoints.d.ts

@@ -1,2 +1,11 @@
 import type { BreakpointsOptions } from '@mui/material/styles';
-export declare const defaultBreakpoints: BreakpointsOptions;
+export declare const defaultBreakpoints: BreakpointsOptions & {
+    values: {
+        xs: number;
+        sm: number;
+        md: number;
+        lg: number;
+        laptop: number;
+        xl: number;
+    };
+};

package/node/components/theme/breakpoints.js

@@ -7,6 +7,7 @@ exports.defaultBreakpoints = {
         sm: 600,
         md: 900,
         lg: 1200,
+        laptop: 1370,
         xl: 1536,
     },
 };

package/node/hook-form/FormFilters/AllFiltersButton/AllFiltersButton.js

@@ -9,6 +9,6 @@ const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
 const AllFiltersButton = (props) => {
     const { allFiltersButtonClassName, counter, onOpenModal } = (0, useLogic_1.useLogic)(props);
-    return ((0, jsx_runtime_1.jsx)(styles_1.AllFiltersButtonWrapper, { className: allFiltersButtonClassName, children: (0, jsx_runtime_1.jsx)(styles_1.StyledBadge, { color: "error", badgeContent: counter, variant: "dot", children: (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onOpenModal, variant: "outlined", color: "grey", startIcon: (0, jsx_runtime_1.jsx)(Filter2OutlineMd_1.Filter2OutlineMd, {}), endIcon: counter ? (0, jsx_runtime_1.jsx)(styles_1.StyledCounter, { color: "error", content: counter }) : null, className: constants_1.formFiltersClassnames.allFiltersButton, children: "\u0412\u0441\u0435 \u0444\u0438\u043B\u044C\u0442\u0440\u044B" }) }) }));
+    return ((0, jsx_runtime_1.jsx)(styles_1.AllFiltersButtonWrapper, { className: allFiltersButtonClassName, children: (0, jsx_runtime_1.jsx)(styles_1.StyledBadge, { color: "error", badgeContent: counter, variant: "dot", children: (0, jsx_runtime_1.jsx)(styles_1.StyledTooltip, { title: "\u0424\u0438\u043B\u044C\u0442\u0440\u044B", enterDelay: 400, enterNextDelay: 400, placement: "bottom-end", children: (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onOpenModal, variant: "outlined", color: "grey", startIcon: (0, jsx_runtime_1.jsx)(Filter2OutlineMd_1.Filter2OutlineMd, {}), endIcon: counter ? (0, jsx_runtime_1.jsx)(styles_1.StyledCounter, { color: "error", content: counter }) : null, className: constants_1.formFiltersClassnames.allFiltersButton, children: "\u0412\u0441\u0435 \u0444\u0438\u043B\u044C\u0442\u0440\u044B" }) }) }) }));
 };
 exports.AllFiltersButton = AllFiltersButton;

package/node/hook-form/FormFilters/AllFiltersButton/styles.d.ts

@@ -3,6 +3,9 @@ export declare const AllFiltersButtonWrapper: import("@emotion/styled/dist/decla
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledTooltip: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../../../components/Tooltip").TooltipProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
 export declare const StyledBadge: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../../..").WithoutEmotionSpecific<import("@mui/material/Badge").BadgeProps>, "color"> & {
     color: import("../../../components/Badge").BadgeColor;
     withBorder?: boolean | undefined;

package/node/hook-form/FormFilters/AllFiltersButton/styles.js

@@ -1,36 +1,55 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledCounter = exports.StyledBadge = exports.AllFiltersButtonWrapper = void 0;
+exports.StyledCounter = exports.StyledBadge = exports.StyledTooltip = exports.AllFiltersButtonWrapper = void 0;
 const Badge_1 = require("@mui/material/Badge");
+const Tooltip_1 = require("@mui/material/Tooltip");
 const Badge_2 = require("../../../components/Badge");
+const constants_1 = require("../../../components/Button/constants");
 const Counter_1 = require("../../../components/Counter");
 const styled_1 = require("../../../components/styled");
-const constants_1 = require("../constants");
+const Tooltip_2 = require("../../../components/Tooltip");
+const constants_2 = require("../constants");
 exports.AllFiltersButtonWrapper = styled_1.styled.div `
   display: none;
 
   white-space: nowrap;
 
-  &.${constants_1.formFiltersClassnames.showAllFiltersButtonOnDesktop} {
+  &.${constants_2.formFiltersClassnames.showAllFiltersButtonOnDesktop} {
     display: flex;
   }
 
+    ${({ theme }) => theme.breakpoints.between('sm', 'laptop')} {
+    &.${constants_2.formFiltersClassnames.showAllFiltersButtonOnLaptop} {
+      display: flex;
+    }
+
+    .${constants_2.formFiltersClassnames.allFiltersButton} {
+      padding: ${({ theme }) => theme.microSpacing(0, 3)};
+
+      font-size: 0;
+
+      &.${constants_1.buttonClassnames.root} {
+        gap: 0;
+      }
+    }
+  }
+
   ${({ theme }) => theme.breakpoints.down('sm')} {
     margin-right: 0;
-    &.${constants_1.formFiltersClassnames.showAllFiltersButtonOnMobile} {
+    &.${constants_2.formFiltersClassnames.showAllFiltersButtonOnMobile} {
       display: flex;
     }
 
-    &.${constants_1.formFiltersClassnames.withoutSearch} {
+    &.${constants_2.formFiltersClassnames.withoutSearch} {
       width: 100%;
 
-      .${constants_1.formFiltersClassnames.allFiltersButton} {
+      .${constants_2.formFiltersClassnames.allFiltersButton} {
         width: 100%;
       }
     }
 
-    &.${constants_1.formFiltersClassnames.withSearch} {
-      .${constants_1.formFiltersClassnames.allFiltersButton} {
+    &.${constants_2.formFiltersClassnames.withSearch} {
+      .${constants_2.formFiltersClassnames.allFiltersButton} {
          display: unset;
          gap: 0;
 
@@ -41,16 +60,27 @@ exports.AllFiltersButtonWrapper = styled_1.styled.div `
     }
   }
 `;
+exports.StyledTooltip = (0, styled_1.styled)(Tooltip_2.Tooltip) `
+  & .${Tooltip_1.tooltipClasses.tooltip} {
+    ${({ theme }) => theme.breakpoints.up('laptop')} {
+      display: none;
+    }
+  }
+`;
 exports.StyledBadge = (0, styled_1.styled)(Badge_2.Badge) `
-   width: 100%; 
+   width: 100%;
+
   .${Badge_1.badgeClasses.dot} {
-      ${({ theme }) => theme.breakpoints.up('sm')} {
+     top: ${({ theme }) => theme.spacing(1)};
+     right: ${({ theme }) => theme.spacing(1)};
+
+      ${({ theme }) => theme.breakpoints.up('laptop')} {
         display: none;
       }
     }
 `;
 exports.StyledCounter = (0, styled_1.styled)(Counter_1.Counter) `
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('laptop')} {
     display: none;
   }
 `;

package/node/hook-form/FormFilters/AllFiltersButton/useLogic/useLogic.js

@@ -23,6 +23,7 @@ const useLogic = ({ form, onOpenModal, hasMainFilters, hasSecondaryFilters, hasS
     const allFiltersButtonClassName = (0, react_1.useMemo)(() => {
         return (0, classNames_1.classNames)({
             [constants_2.formFiltersClassnames.showAllFiltersButtonOnDesktop]: hasSecondaryFilters,
+            [constants_2.formFiltersClassnames.showAllFiltersButtonOnLaptop]: hasMainFilters || hasSecondaryFilters,
             [constants_2.formFiltersClassnames.showAllFiltersButtonOnMobile]: hasMainFilters || hasSecondaryFilters,
             [constants_2.formFiltersClassnames.withSearch]: hasSearch,
             [constants_2.formFiltersClassnames.withoutSearch]: !hasSearch,

package/node/hook-form/FormFilters/FormFiltersSkeleton/styles.js

@@ -10,6 +10,13 @@ exports.SkeletonWrapper = styled_1.styled.div `
 
   margin-top: ${({ theme }) => theme.spacing(4)};
 
+  ${({ theme }) => theme.breakpoints.between('sm', 'laptop')} {
+    grid-template-columns: 72px 0 0 0;
+    gap: 0;
+
+    margin: ${({ theme }) => theme.spacing(0, 2, 0)};
+  }
+
   .${Skeleton_1.skeletonClasses.root} {
     height: 32px;
   }

package/node/hook-form/FormFilters/constants.d.ts

@@ -3,6 +3,7 @@ export declare const formFiltersClassnames: {
     submitButton: string;
     allFiltersButton: string;
     showAllFiltersButtonOnDesktop: string;
+    showAllFiltersButtonOnLaptop: string;
     showAllFiltersButtonOnMobile: string;
     withSearch: string;
     withoutSearch: string;

package/node/hook-form/FormFilters/constants.js

@@ -7,6 +7,7 @@ exports.formFiltersClassnames = {
     submitButton: (0, createUIKitClassname_1.createUIKitClassname)('form-filters__submit-button'),
     allFiltersButton: (0, createUIKitClassname_1.createUIKitClassname)('form-filters__all-filters-button'),
     showAllFiltersButtonOnDesktop: (0, createUIKitClassname_1.createUIKitClassname)('form-filters_show-all-filters-button_desktop'),
+    showAllFiltersButtonOnLaptop: (0, createUIKitClassname_1.createUIKitClassname)('form-filters_show-all-filters-button_laptop'),
     showAllFiltersButtonOnMobile: (0, createUIKitClassname_1.createUIKitClassname)('form-filters_show-all-filters-button_mobile'),
     withSearch: (0, createUIKitClassname_1.createUIKitClassname)('form-filters_with-search'),
     withoutSearch: (0, createUIKitClassname_1.createUIKitClassname)('form-filters_without-search'),

package/node/hook-form/FormFilters/styles.js

@@ -16,9 +16,13 @@ exports.Wrapper = styled_1.styled.div `
   .${FormLabel_1.formLabelClasses.root} {
     display: none;
   }
+  
+  ${({ theme }) => theme.breakpoints.down('laptop')} {
+    margin-top: 0;
+    padding-right: ${({ theme }) => theme.spacing(2)};
+  }
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
-    margin-top: 0;
     padding: ${({ theme }) => theme.spacing(1, 4, 5, 4)};
 
     font-size: 0;
@@ -40,14 +44,14 @@ exports.MainFiltersWrapper = styled_1.styled.div `
 
   width: 100%;
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('laptop')} {
     display: none;
   }
 `;
 exports.SubmitButtonWrapper = styled_1.styled.div `
   white-space: nowrap;
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
-    display: contents;
+  ${({ theme }) => theme.breakpoints.down('laptop')} {
+    display: none;
   }
 `;

package/node/hook-form/FormFiltersSearchField/FormFiltersSearchField.js

@@ -8,13 +8,14 @@ const useFormFieldProps_1 = require("../useFormFieldProps");
 const constants_1 = require("./constants");
 const styles_1 = require("./styles");
 /**
- * Адаптер для SearchField
+ * Адаптер для SearchField для использования в FormFilters
  */
 function FormFiltersSearchFieldInner({ width, ...props }, ref) {
     const fieldProps = (0, useFormFieldProps_1.useFormFieldProps)({
         ...props,
         defaultValue: props.defaultValue || '',
     });
-    return ((0, jsx_runtime_1.jsx)(styles_1.Wrapper, { "$width": width, children: (0, jsx_runtime_1.jsx)(SearchField_1.SearchField, { ...fieldProps, ref: ref, inputProps: { id: constants_1.FORM_FILTERS_SEARCH_FIELD_ID }, fullWidth: true }) }));
+    const hasValue = Boolean(fieldProps.value);
+    return ((0, jsx_runtime_1.jsx)(styles_1.Wrapper, { "$width": width, className: hasValue ? constants_1.formFiltersSearchFieldClassnames.hasValue : '', children: (0, jsx_runtime_1.jsx)(SearchField_1.SearchField, { ...fieldProps, ref: ref, inputProps: { id: constants_1.FORM_FILTERS_SEARCH_FIELD_ID }, fullWidth: true }) }));
 }
 exports.FormFiltersSearchField = (0, forwardRefWithGeneric_1.forwardRefWithGeneric)(FormFiltersSearchFieldInner);

package/node/hook-form/FormFiltersSearchField/constants.d.ts

@@ -1 +1,5 @@
 export declare const FORM_FILTERS_SEARCH_FIELD_ID = "form-filters-search-field";
+export declare const formFiltersSearchFieldClassnames: {
+    hasValue: string;
+};
+export declare const DEFAULT_SEARCH_FIELD_WIDTH = "240px";

package/node/hook-form/FormFiltersSearchField/constants.js

@@ -1,4 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FORM_FILTERS_SEARCH_FIELD_ID = void 0;
+exports.DEFAULT_SEARCH_FIELD_WIDTH = exports.formFiltersSearchFieldClassnames = exports.FORM_FILTERS_SEARCH_FIELD_ID = void 0;
+const createUIKitClassname_1 = require("../../components/utils/createUIKitClassname");
 exports.FORM_FILTERS_SEARCH_FIELD_ID = 'form-filters-search-field';
+exports.formFiltersSearchFieldClassnames = {
+    hasValue: (0, createUIKitClassname_1.createUIKitClassname)('form-filters-search-field__has-value'),
+};
+exports.DEFAULT_SEARCH_FIELD_WIDTH = '240px';

package/node/hook-form/FormFiltersSearchField/styles.js

@@ -1,9 +1,68 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Wrapper = void 0;
+const FormControl_1 = require("@mui/material/FormControl");
+const InputBase_1 = require("@mui/material/InputBase");
+const OutlinedInput_1 = require("@mui/material/OutlinedInput");
+const SvgIcon_1 = require("../../components/SvgIcon");
 const styled_1 = require("../../components/styled");
+const constants_1 = require("./constants");
 exports.Wrapper = styled_1.styled.div `
-  min-width: ${({ $width }) => $width || '240px'};
+  min-width: ${({ $width }) => $width || constants_1.DEFAULT_SEARCH_FIELD_WIDTH};
+
+  ${({ theme }) => theme.breakpoints.between('sm', 'laptop')} {
+    overflow: hidden;
+
+    width: ${({ $width }) => $width || constants_1.DEFAULT_SEARCH_FIELD_WIDTH};
+    min-width: unset;
+
+    transition: ${({ theme }) => theme.transitions.create(['width', 'padding'], {
+    duration: theme.transitions.duration.shorter,
+    easing: theme.transitions.easing.easeInOut,
+    delay: theme.transitions.duration.shorter,
+})};
+
+    .${FormControl_1.formControlClasses.root} {
+      display: flex;
+      flex-direction: row-reverse;
+
+      width: 100%;
+      min-width: 32px;
+    }
+
+    .${OutlinedInput_1.outlinedInputClasses.root} {
+      transition: ${({ theme }) => theme.transitions.create(['width', 'padding'], {
+    duration: theme.transitions.duration.shorter,
+    easing: theme.transitions.easing.easeInOut,
+    delay: theme.transitions.duration.shorter,
+})};
+    }
+
+    .${SvgIcon_1.svgIconClassnames.root} {
+      transition: ${({ theme }) => theme.transitions.create(['fill'], {
+    duration: theme.transitions.duration.shorter,
+    easing: theme.transitions.easing.easeInOut,
+    delay: theme.transitions.duration.shorter,
+})};
+    }
+
+    &:not(:hover, :focus-within):not(.${constants_1.formFiltersSearchFieldClassnames.hasValue}) {
+      width: 32px;
+
+      .${SvgIcon_1.svgIconClassnames.root} {
+        fill: ${({ theme }) => theme.palette.grey[800]};
+      }
+
+      .${OutlinedInput_1.outlinedInputClasses.root} {
+        padding: ${({ theme }) => theme.microSpacing(1, 3)};
+      }
+
+      .${InputBase_1.inputBaseClasses.input} {
+        width: 0;
+        min-width: 0;
+      }
+    }
+  }
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
     width: 100%;

package/package.json

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