@snack-uikit/fields 0.47.3-preview-673b81f0.0 → 0.47.4

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.47.4 (2025-06-05)
+
+
+### Bug Fixes
+
+* **PDS-2368:** gap for prefix in l size ([102562d](https://github.com/cloud-ru-tech/snack-uikit/commit/102562de801cdedad2f694854f7f7f57b42223d5))
+
+
+
+
+
+## 0.47.3 (2025-06-05)
+
+
+### Bug Fixes
+
+* **PDS-2417:** hide empty groups on search result ([e6bd5d1](https://github.com/cloud-ru-tech/snack-uikit/commit/e6bd5d139b2e3f5c8ee0bd197a67ba7c5cb09a43))
+
+
+
+
+
 ## 0.47.2 (2025-05-29)
 
 ### Only dependencies have been changed

package/README.md

@@ -247,7 +247,6 @@ FieldStepper в основном предназначен для работы с
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| buildCellProps* | `CalendarProps` | - |  |
 | mode* | "date" \| "date-time" | - |  |
 | open | `boolean` | - | Открыт date-picker |
 | onOpenChange | `(value: boolean) => void` | - | Колбек открытия пикера |
@@ -256,6 +255,7 @@ FieldStepper в основном предназначен для работы с
 | showCopyButton | `boolean` | - | Отображение кнопки копирования |
 | onCopyButtonClick | `() => void` | - | Колбек клика по кнопке Копировать для поля |
 | showClearButton | `boolean` | true | Отображение кнопки Очистки поля |
+| buildCellProps | `(date: Date, viewMode: ViewMode) => { isDisabled?: boolean; isHoliday?: boolean } ;` | - | Колбек установки свойств ячеек календаря. Вызывается на построение каждой ячейки. Принимает два параметра: <br> `Date` - дата ячейки <br> `ViewMode`: <br>  - `month` отображение месяца, каждая ячейка - 1 день <br>  - `year` отображение года, каждая ячейка - 1 месяц <br>  - `decade` отображение декады, каждая ячейка - 1 год <br><br> Колбек должен возвращать объект с полями, отвечающими за отключение и подкраску ячейки. |
 | id | `string` | - | Значение html-атрибута id |
 | name | `string` | - | Значение html-атрибута name |
 | disabled | `boolean` | - | Является ли поле деактивированным |
@@ -337,8 +337,61 @@ FieldStepper в основном предназначен для работы с
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
+| options* | `OptionProps[]` | - |  |
+| id | `string` | - | Значение html-атрибута id |
+| name | `string` | - | Значение html-атрибута name |
+| disabled | `boolean` | false | Является ли поле деактивированным |
+| readonly | `boolean` | false false | Является ли поле доступным только для чтения |
+| onFocus | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки получения фокуса |
+| onBlur | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки потери фокуса |
+| placeholder | `string` | - | Значение плейсхолдера |
+| onKeyDown | `KeyboardEventHandler<HTMLInputElement>` | - | Колбек обработки начала нажатия клавиши клавиатуры |
+| className | `string` | - | CSS-класс |
+| label | `string` | - | Лейбл |
+| labelTooltip | `ReactNode` | - | Всплывающая подсказка лейбла |
+| required | `boolean` | - | Является ли поле обязательным |
+| caption | `string` | - | Подпись справа от лейбла |
+| hint | `string` | - | Подсказка внизу |
+| showHintIcon | `boolean` | - | Отображать иконку подсказки |
+| size | enum Size: `"s"`, `"m"`, `"l"` | - | Размер |
+| validationState | enum ValidationState: `"error"`, `"default"`, `"warning"`, `"success"` | - | Состояние валидации |
+| labelTooltipPlacement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | top | Расположение подсказки лейбла |
+| error | `string` | - |  |
+| loading | `boolean` | - |  |
+| prefix | `ReactNode` | - | Произвольный префикс для поля |
+| postfix | `ReactNode` | - | Произвольный постфикс для поля |
+| onChange | `OnChangeHandler<any>` | - | Controlled обработчик измения состояния |
+| value | `ItemId \| ItemId[]` | - | Controlled состояние |
+| defaultValue | `ItemId \| ItemId[]` | - | Начальное состояние |
+| pinTop | `OptionProps[]` | - |  |
+| pinBottom | `OptionProps[]` | - |  |
+| searchable | `boolean` | - |  |
+| showCopyButton | `boolean` | - | Отображение кнопки Копировать для поля (актуально только для `readonly = true`) |
+| onCopyButtonClick | `() => void` | - | Колбек клика по кнопке Копировать для поля |
+| 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` | - |  |
+| enableFuzzySearch | `boolean` | - | Включить нечеткий поиск |
+| resetSearchOnOptionSelection | `boolean` | true | Поведение строки поиска при выборе опции из списка, false необходимо при асинхронной подгрузке значений с бэка, в случае если надо поиск оставить как значение при отсутствии данных |
+| onOpenChange | `(open: boolean) => void` | - |  |
+| selectedOptionFormatter | `SelectedOptionFormatter` | - |  |
+| scrollToSelectedItem | `boolean` | - | Флаг, отвещающий за прокручивание до выбранного элемента |
+| virtualized | `boolean` | - | Включить виртуализацию на компоненты списка. Рекомендуется если у вас от 1к элементов списка |
+| untouchableScrollbars | `boolean` | - | Отключает возможность взаимодействовать со скролбарами мышью. |
+| dataFiltered | `boolean` | - |  |
+| dataError | `boolean` | - |  |
+| noDataState | `EmptyStateProps` | - | Экран при отстутствии данных |
+| noResultsState | `EmptyStateProps` | - | Экран при отстутствии результатов поиска или фильтров |
+| errorDataState | `EmptyStateProps` | - | Экран при ошибке запроса |
+| selection | "single" \| "multiple" | - |  |
 | ref | `LegacyRef<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 {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} |
 | key | `Key` | - |  |
+| removeByBackspace | `boolean` | - |  |
 ## FieldSlider
 ### Props
 | name | type | default value | description |
@@ -409,7 +462,6 @@ FieldStepper в основном предназначен для работы с
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| spellCheck* | `unknown` | - |  |
 | showCopyButton | `boolean` | - | Отображение кнопки Копировать для поля (актуально только для `readonly = true`) |
 | onCopyButtonClick | `() => void` | - | Колбек клика по кнопке Копировать для поля |
 | showClearButton | `boolean` | true | Отображение кнопки очистки поля |
@@ -430,6 +482,7 @@ FieldStepper в основном предназначен для работы с
 | placeholder | `string` | - | Значение плейсхолдера |
 | maxLength | `number` | - | Максимальная длина вводимого значения |
 | autoComplete | `string \| boolean` | false | Включен ли автокомплит для поля |
+| spellCheck | `boolean` | true | Значение атрибута spellcheck (проверка орфографии) |
 | onKeyDown | `KeyboardEventHandler<HTMLInputElement>` | - | Колбек обработки начала нажатия клавиши клавиатуры |
 | onPaste | `ClipboardEventHandler<HTMLInputElement>` | - | Колбек обработки вставки значения |
 | className | `string` | - | CSS-класс |
@@ -467,8 +520,8 @@ FieldStepper в основном предназначен для работы с
 | onBlur | `FocusEventHandler<HTMLTextAreaElement>` | - | Колбек потери фокуса |
 | placeholder | `string` | - | Плейсхолдер |
 | maxLength | `number` | - | Максимальное кол-во символов |
-| onKeyDown | `KeyboardEventHandler<HTMLTextAreaElement>` | - | Колбек нажатия клавиши клавиатуры |
 | spellCheck | `boolean` | true | Включение проверки орфографии |
+| onKeyDown | `KeyboardEventHandler<HTMLTextAreaElement>` | - | Колбек нажатия клавиши клавиатуры |
 | className | `string` | - | CSS-класс |
 | label | `string` | - | Лейбл |
 | labelTooltip | `ReactNode` | - | Всплывающая подсказка лейбла |
@@ -488,8 +541,8 @@ FieldStepper в основном предназначен для работы с
 |------|------|---------------|-------------|
 | open | `boolean` | - | Открыт time-picker |
 | onOpenChange | `(value: boolean) => void` | - | Колбек открытия пикера |
-| value | `TimePickerProps` | - | Значение поля |
-| onChange | `TimePickerProps` | - | Колбек смены значения |
+| value | `TimeValue` | - | Значение поля |
+| onChange | `(value?: TimeValue) => void` | - | Колбек смены значения |
 | showCopyButton | `boolean` | - | Отображение кнопки копирования |
 | onCopyButtonClick | `() => void` | - | Колбек клика по кнопке Копировать для поля |
 | showSeconds | `boolean` | true | Показывать ли секунды |

package/dist/cjs/helperComponents/FieldContainerPrivate/styles.module.css

@@ -255,16 +255,26 @@
 }
 
 .prefix{
+  color:var(--sys-neutral-text-disabled, #aaaebd);
+}
+
+[data-size=s] .prefix, [data-size=s] .postfix{
   display:inline-flex;
   flex-shrink:0;
-  gap:var(--space-fields-postfix-gap, 4px);
+  gap:var(--space-fields-single-line-container-s-gap, 4px);
+  align-items:center;
+}
+
+[data-size=m] .prefix, [data-size=m] .postfix{
+  display:inline-flex;
+  flex-shrink:0;
+  gap:var(--space-fields-single-line-container-m-gap, 4px);
   align-items:center;
-  color:var(--sys-neutral-text-disabled, #aaaebd);
 }
 
-.postfix{
+[data-size=l] .prefix, [data-size=l] .postfix{
   display:inline-flex;
   flex-shrink:0;
-  gap:var(--space-fields-postfix-gap, 4px);
+  gap:var(--space-fields-single-line-container-l-gap, 8px);
   align-items:center;
 }

package/dist/esm/helperComponents/FieldContainerPrivate/styles.module.css

@@ -255,16 +255,26 @@
 }
 
 .prefix{
+  color:var(--sys-neutral-text-disabled, #aaaebd);
+}
+
+[data-size=s] .prefix, [data-size=s] .postfix{
   display:inline-flex;
   flex-shrink:0;
-  gap:var(--space-fields-postfix-gap, 4px);
+  gap:var(--space-fields-single-line-container-s-gap, 4px);
+  align-items:center;
+}
+
+[data-size=m] .prefix, [data-size=m] .postfix{
+  display:inline-flex;
+  flex-shrink:0;
+  gap:var(--space-fields-single-line-container-m-gap, 4px);
   align-items:center;
-  color:var(--sys-neutral-text-disabled, #aaaebd);
 }
 
-.postfix{
+[data-size=l] .prefix, [data-size=l] .postfix{
   display:inline-flex;
   flex-shrink:0;
-  gap:var(--space-fields-postfix-gap, 4px);
+  gap:var(--space-fields-single-line-container-l-gap, 8px);
   align-items:center;
 }

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Fields",
-  "version": "0.47.3-preview-673b81f0.0",
+  "version": "0.47.4",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -65,5 +65,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "29b3e53a1d9f65b7e6382d990e1c06f8145fafbe"
+  "gitHead": "a98ea7541641f2a35f4eff6652e2c95d605cfa6c"
 }

package/src/helperComponents/FieldContainerPrivate/styles.module.scss

@@ -124,17 +124,16 @@ $variants: 'single-line-container', 'single-line-container-button-before', 'sing
 }
 
 .prefix {
-  display: inline-flex;
-  flex-shrink: 0;
-  gap: styles-tokens-fields.$space-fields-postfix-gap;
-  align-items: center;
-
   color: styles-tokens-fields.$sys-neutral-text-disabled;
 }
 
-.postfix {
-  display: inline-flex;
-  flex-shrink: 0;
-  gap: styles-tokens-fields.$space-fields-postfix-gap;
-  align-items: center;
+@each $size in $sizes {
+  [data-size='#{$size}'] {
+     .prefix, .postfix {
+      display: inline-flex;
+      flex-shrink: 0;
+      gap: styles-tokens-fields.simple-var(styles-tokens-fields.$fields, 'single-line-container', $size, 'gap');
+      align-items: center;
+    }
+  }
 }