@astral/ui 4.31.2 → 4.32.0

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.0",
   "browser": "./index.js",
   "main": "./node/index.js",
   "dependencies": {