@snack-uikit/fields 0.18.2 → 0.18.3

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.18.3 (2024-04-22)
+
+
+### Bug Fixes
+
+* **FF-4649:** container width of multiselect ([ca5702d](https://github.com/cloud-ru-tech/snack-uikit/commit/ca5702dbb4ae2574b5b312c926663cc67bbe694c))
+* **FF-4649:** pass props footer and widthStrategy for Droplist ([c4a78cb](https://github.com/cloud-ru-tech/snack-uikit/commit/c4a78cbaddd6b8e6718b7a10614e56b5d618332e))
+
+
+
+
+
 ## 0.18.2 (2024-04-22)
 
 ### Only dependencies have been changed

package/README.md

@@ -340,19 +340,20 @@ const [isOpen, setIsOpen] = useState(false);
 | showClearButton | `boolean` | true | Отображение кнопки очистки поля |
 | prefixIcon | `ReactElement<any, string \| JSXElementConstructor<any>>` | - | Иконка-префикс для поля |
 | footer | `ReactNode` | - |  |
+| widthStrategy | enum PopoverWidthStrategy: `"auto"`, `"gte"`, `"eq"` | - |  |
 | search | `SearchState` | - |  |
 | autocomplete | `boolean` | - |  |
 | addOptionByEnter | `boolean` | - |  |
 | open | `boolean` | - |  |
 | onOpenChange | `(open: boolean) => void` | - |  |
 | selectedOptionFormatter | `SelectedOptionFormatter` | - |  |
+| pinTop | `ItemProps[]` | - | Элементы списка, закрепленные сверху |
+| pinBottom | `ItemProps[]` | - | Элементы списка, закрепленные снизу |
+| dataFiltered | `boolean` | - |  |
 | dataError | `boolean` | - |  |
 | noDataState | `EmptyStateProps` | - | Экран при отстутствии данных |
 | noResultsState | `EmptyStateProps` | - | Экран при отстутствии результатов поиска или фильтров |
 | errorDataState | `EmptyStateProps` | - | Экран при ошибке запроса |
-| pinTop | `ItemProps[]` | - | Элементы списка, закрепленные сверху |
-| pinBottom | `ItemProps[]` | - | Элементы списка, закрепленные снизу |
-| dataFiltered | `boolean` | - |  |
 | selection | "single" \| "multiple" | - |  |
 | ref | `Ref<HTMLInputElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom |
 | key | `Key` | - |  |

package/dist/components/FieldSelect/FieldSelectMultiple.d.ts

@@ -15,10 +15,11 @@ export declare const FieldSelectMultiple: import("react").ForwardRefExoticCompon
     readonly?: boolean | undefined;
     prefixIcon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
     footer?: import("react").ReactNode;
+    widthStrategy?: import("@snack-uikit/popover-private/dist/types").PopoverWidthStrategy | undefined;
     search?: import("./types").SearchState | undefined;
     autocomplete?: boolean | undefined;
     addOptionByEnter?: boolean | undefined;
     open?: boolean | undefined;
     onOpenChange?(open: boolean): void;
     selectedOptionFormatter?: SelectedOptionFormatter | undefined;
-} & Pick<import("@snack-uikit/list").ListProps, "dataError" | "noDataState" | "noResultsState" | "errorDataState" | "pinTop" | "pinBottom" | "dataFiltered">, "showCopyButton"> & import("react").RefAttributes<HTMLInputElement>>;
+} & Pick<import("@snack-uikit/list").DroplistProps, "pinTop" | "pinBottom" | "dataFiltered" | "dataError" | "noDataState" | "noResultsState" | "errorDataState">, "showCopyButton"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/FieldSelect/FieldSelectSingle.d.ts

@@ -13,10 +13,11 @@ export declare const FieldSelectSingle: import("react").ForwardRefExoticComponen
     readonly?: boolean | undefined;
     prefixIcon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
     footer?: import("react").ReactNode;
+    widthStrategy?: import("@snack-uikit/popover-private/dist/types").PopoverWidthStrategy | undefined;
     search?: import("./types").SearchState | undefined;
     autocomplete?: boolean | undefined;
     addOptionByEnter?: boolean | undefined;
     open?: boolean | undefined;
     onOpenChange?(open: boolean): void;
     selectedOptionFormatter?: SelectedOptionFormatter | undefined;
-} & Pick<import("@snack-uikit/list").ListProps, "dataError" | "noDataState" | "noResultsState" | "errorDataState" | "pinTop" | "pinBottom" | "dataFiltered"> & import("react").RefAttributes<HTMLInputElement>>;
+} & Pick<import("@snack-uikit/list").DroplistProps, "pinTop" | "pinBottom" | "dataFiltered" | "dataError" | "noDataState" | "noResultsState" | "errorDataState"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/FieldSelect/styles.module.css

@@ -4,6 +4,8 @@
 }
 
 .contentWrapper{
+  position:relative;
+  overflow:hidden;
   display:flex;
   flex-wrap:wrap;
   width:100%;
@@ -71,14 +73,10 @@
 }
 .container[data-size=s][data-variant=single-line-container] .displayValue{
   width:calc(100% - (
-            var(--space-fields-single-line-container-s-right, 6px) +
-              var(--space-fields-single-line-container-s-gap, 4px) +
-              calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-xs, 16px) * 2)
+            var(--space-fields-single-line-container-s-right, 6px) + var(--space-fields-single-line-container-s-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-xs, 16px) * 2)
           ));
   margin-right:calc(
-            var(--space-fields-single-line-container-s-right, 6px) +
-              var(--space-fields-single-line-container-s-gap, 4px) +
-              calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-xs, 16px) * 2)
+            var(--space-fields-single-line-container-s-right, 6px) + var(--space-fields-single-line-container-s-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-xs, 16px) * 2)
           );
   padding-left:var(--space-fields-single-line-container-s-left, 6px);
   border-radius:var(--radius-fields-s, 12px);
@@ -98,14 +96,10 @@
 }
 .container[data-size=m][data-variant=single-line-container] .displayValue{
   width:calc(100% - (
-            var(--space-fields-single-line-container-m-right, 8px) +
-              var(--space-fields-single-line-container-m-gap, 4px) +
-              calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2)
+            var(--space-fields-single-line-container-m-right, 8px) + var(--space-fields-single-line-container-m-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2)
           ));
   margin-right:calc(
-            var(--space-fields-single-line-container-m-right, 8px) +
-              var(--space-fields-single-line-container-m-gap, 4px) +
-              calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2)
+            var(--space-fields-single-line-container-m-right, 8px) + var(--space-fields-single-line-container-m-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2)
           );
   padding-left:var(--space-fields-single-line-container-m-left, 8px);
   border-radius:var(--radius-fields-m, 14px);
@@ -125,14 +119,10 @@
 }
 .container[data-size=l][data-variant=single-line-container] .displayValue{
   width:calc(100% - (
-            var(--space-fields-single-line-container-l-right, 10px) +
-              var(--space-fields-single-line-container-l-gap, 8px) +
-              calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2)
+            var(--space-fields-single-line-container-l-right, 10px) + var(--space-fields-single-line-container-l-gap, 8px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2)
           ));
   margin-right:calc(
-            var(--space-fields-single-line-container-l-right, 10px) +
-              var(--space-fields-single-line-container-l-gap, 8px) +
-              calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2)
+            var(--space-fields-single-line-container-l-right, 10px) + var(--space-fields-single-line-container-l-gap, 8px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2)
           );
   padding-left:var(--space-fields-single-line-container-l-left, 10px);
   border-radius:var(--radius-fields-l, 16px);

package/dist/components/FieldSelect/types.d.ts

@@ -1,6 +1,6 @@
 import { ReactElement } from 'react';
 import { InputPrivateProps } from '@snack-uikit/input-private';
-import { AccordionItemProps, BaseItemProps, GroupItemProps, ListProps, NextListItemProps, SelectionMultipleState, SelectionSingleState } from '@snack-uikit/list';
+import { AccordionItemProps, BaseItemProps, DroplistProps, GroupItemProps, NextListItemProps, SelectionMultipleState, SelectionSingleState } from '@snack-uikit/list';
 import { TagProps } from '@snack-uikit/tag';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { FieldDecoratorProps } from '../FieldDecorator';
@@ -51,14 +51,15 @@ type FiledSelectCommonProps = WithSupportProps<{
     readonly?: boolean;
     /** Иконка-префикс для поля */
     prefixIcon?: ReactElement;
-    footer?: ListProps['footer'];
+    footer?: DroplistProps['footer'];
+    widthStrategy?: DroplistProps['widthStrategy'];
     search?: SearchState;
     autocomplete?: boolean;
     addOptionByEnter?: boolean;
     open?: boolean;
     onOpenChange?(open: boolean): void;
     selectedOptionFormatter?: SelectedOptionFormatter;
-}> & Pick<ListProps, 'dataError' | 'noDataState' | 'noResultsState' | 'errorDataState' | 'pinTop' | 'pinBottom' | 'dataFiltered'>;
+}> & Pick<DroplistProps, 'dataError' | 'noDataState' | 'noResultsState' | 'errorDataState' | 'pinTop' | 'pinBottom' | 'dataFiltered'>;
 export type FieldSelectSingleProps = FieldSelectPrivateProps & Omit<SelectionSingleState, 'mode'> & WrapperProps & FiledSelectCommonProps;
 export type FieldSelectMultipleProps = FieldSelectPrivateProps & {
     removeByBackspace?: boolean;

package/dist/components/FieldSelect/utils/extractListProps.d.ts

@@ -1,3 +1,3 @@
 import { DroplistProps } from '@snack-uikit/list';
 import { FieldSelectProps } from '../types';
-export declare function extractListProps({ dataError, noDataState, noResultsState, errorDataState, pinTop, pinBottom, dataFiltered, loading, }: Partial<FieldSelectProps>): Partial<DroplistProps>;
+export declare function extractListProps({ dataError, noDataState, noResultsState, errorDataState, pinTop, pinBottom, dataFiltered, loading, footer, widthStrategy, }: Partial<FieldSelectProps>): Partial<DroplistProps>;

package/dist/components/FieldSelect/utils/extractListProps.js

@@ -1,4 +1,4 @@
-export function extractListProps({ dataError, noDataState, noResultsState, errorDataState, pinTop, pinBottom, dataFiltered, loading, }) {
+export function extractListProps({ dataError, noDataState, noResultsState, errorDataState, pinTop, pinBottom, dataFiltered, loading, footer, widthStrategy, }) {
     return {
         dataError,
         noDataState,
@@ -8,6 +8,8 @@ export function extractListProps({ dataError, noDataState, noResultsState, error
         pinBottom,
         dataFiltered,
         loading,
+        footer,
+        widthStrategy,
         trigger: 'clickAndFocusVisible',
         placement: 'bottom',
         'data-test-id': 'field-select__list',

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Fields",
-  "version": "0.18.2",
+  "version": "0.18.3",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -34,13 +34,13 @@
   "dependencies": {
     "@snack-uikit/button": "0.17.0",
     "@snack-uikit/calendar": "0.7.6",
-    "@snack-uikit/droplist": "0.13.14",
+    "@snack-uikit/droplist": "0.13.15",
     "@snack-uikit/icons": "0.20.1",
     "@snack-uikit/input-private": "3.1.1",
     "@snack-uikit/list": "0.11.0",
     "@snack-uikit/scroll": "0.5.2",
     "@snack-uikit/slider": "0.1.7",
-    "@snack-uikit/tag": "0.8.2",
+    "@snack-uikit/tag": "0.9.0",
     "@snack-uikit/tooltip": "0.13.1",
     "@snack-uikit/truncate-string": "0.4.12",
     "@snack-uikit/utils": "3.2.0",
@@ -56,5 +56,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "082743508cd64cdc90ed11d2ea51280b5cab19de"
+  "gitHead": "f6b48b7373bda024626822d7c17b05d6ddbf20b2"
 }

package/src/components/FieldSelect/styles.module.scss

@@ -18,8 +18,12 @@ $base-min-width: 4px;
 }
 
 .contentWrapper {
+  position: relative;
+
+  overflow: hidden;
   display: flex;
   flex-wrap: wrap;
+
   width: 100%;
 }
 
@@ -59,9 +63,7 @@ $base-min-width: 4px;
           $button-width: simple-var($icons-sizes, $size);
           $postfix-width: calc(var(#{$space-fields-postfix-gap}) + $button-width * 2);
           $margin-right: calc(
-            #{simple-var($fields, $containerVariant, $size, 'padding-right')} +
-              #{simple-var($fields, $containerVariant, $size, 'gap')} +
-              #{$postfix-width}
+            #{simple-var($fields, $containerVariant, $size, 'padding-right')} + #{simple-var($fields, $containerVariant, $size, 'gap')} + #{$postfix-width}
           );
 
           width: calc(100% - $margin-right);

package/src/components/FieldSelect/types.ts

@@ -4,8 +4,8 @@ import { InputPrivateProps } from '@snack-uikit/input-private';
 import {
   AccordionItemProps,
   BaseItemProps,
+  DroplistProps,
   GroupItemProps,
-  ListProps,
   NextListItemProps,
   SelectionMultipleState,
   SelectionSingleState,
@@ -82,7 +82,9 @@ type FiledSelectCommonProps = WithSupportProps<{
   /** Иконка-префикс для поля */
   prefixIcon?: ReactElement;
 
-  footer?: ListProps['footer'];
+  footer?: DroplistProps['footer'];
+
+  widthStrategy?: DroplistProps['widthStrategy'];
 
   search?: SearchState;
 
@@ -97,7 +99,7 @@ type FiledSelectCommonProps = WithSupportProps<{
   selectedOptionFormatter?: SelectedOptionFormatter;
 }> &
   Pick<
-    ListProps,
+    DroplistProps,
     'dataError' | 'noDataState' | 'noResultsState' | 'errorDataState' | 'pinTop' | 'pinBottom' | 'dataFiltered'
   >;
 

package/src/components/FieldSelect/utils/extractListProps.ts

@@ -11,6 +11,8 @@ export function extractListProps({
   pinBottom,
   dataFiltered,
   loading,
+  footer,
+  widthStrategy,
 }: Partial<FieldSelectProps>): Partial<DroplistProps> {
   return {
     dataError,
@@ -21,6 +23,8 @@ export function extractListProps({
     pinBottom,
     dataFiltered,
     loading,
+    footer,
+    widthStrategy,
     trigger: 'clickAndFocusVisible',
     placement: 'bottom',
     'data-test-id': 'field-select__list',