@snack-uikit/fields 0.53.1 → 0.53.2-preview-7a4708af.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -559,66 +559,384 @@ FieldStepper в основном предназначен для работы с
559
559
  ### Props
560
560
  | name | type | default value | description |
561
561
  |------|------|---------------|-------------|
562
+ | open | `boolean` | - | Открыт color-picker |
563
+ | onOpenChange | `(value: boolean) => void` | - | Колбек открытия пикера |
564
+ | showCopyButton | `boolean` | - | Отображение кнопки копирования |
565
+ | onCopyButtonClick | `() => void` | - | Колбек клика по кнопке Копировать для поля |
566
+ | showClearButton | `boolean` | true | Отображение кнопки Очистки поля |
567
+ | value | `string` | - | Значение input |
568
+ | onChange | `(value: string) => void` | - | |
569
+ | withAlpha | `boolean` | - | Значение с альфаканалом |
570
+ | autoApply | `boolean` | - | Применять изменения автоматически, если значение false - то изменения происходят по кнопке |
571
+ | className | `string` | - | Класснейм |
572
+ | colorMode | `{ hex?: boolean; rgb?: boolean; hsv?: boolean; }` | - | |
573
+ | id | `string` | - | Значение html-атрибута id |
574
+ | name | `string` | - | Значение html-атрибута name |
575
+ | disabled | `boolean` | - | Является ли поле деактивированным |
576
+ | readonly | `boolean` | - | Является ли поле доступным только для чтения |
577
+ | onFocus | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки получения фокуса |
578
+ | onBlur | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки потери фокуса |
579
+ | placeholder | `string` | - | Значение плейсхолдера |
580
+ | autoFocus | `boolean` | false | Включен ли авто-фокус для поля |
581
+ | label | `string` | - | Лейбл |
582
+ | labelTooltip | `ReactNode` | - | Всплывающая подсказка лейбла |
583
+ | required | `boolean` | - | Является ли поле обязательным |
584
+ | caption | `string` | - | Подпись справа от лейбла |
585
+ | hint | `string` | - | Подсказка внизу |
586
+ | showHintIcon | `boolean` | - | Отображать иконку подсказки |
587
+ | size | enum Size: `"s"`, `"m"`, `"l"` | SIZE.S | Размер |
588
+ | validationState | enum ValidationState: `"error"`, `"default"`, `"warning"`, `"success"` | default | Состояние валидации |
589
+ | labelTooltipPlacement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | top | Расположение подсказки лейбла |
590
+ | error | `string` | - | |
562
591
  | 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} |
563
592
  | key | `Key` | - | |
564
593
  ## FieldDate
565
594
  ### Props
566
595
  | name | type | default value | description |
567
596
  |------|------|---------------|-------------|
597
+ | mode* | "date" \| "date-time" | - | |
598
+ | open | `boolean` | - | Открыт date-picker |
599
+ | onOpenChange | `(value: boolean) => void` | - | Колбек открытия пикера |
600
+ | value | `Date` | - | Значение поля |
601
+ | onChange | `(value: Date) => void` | - | Колбек смены значения |
602
+ | showCopyButton | `boolean` | - | Отображение кнопки копирования |
603
+ | onCopyButtonClick | `() => void` | - | Колбек клика по кнопке Копировать для поля |
604
+ | showClearButton | `boolean` | true | Отображение кнопки Очистки поля |
605
+ | buildCellProps | `(date: Date, viewMode: ViewMode) => { isDisabled?: boolean; isHoliday?: boolean } ;` | - | Колбек установки свойств ячеек календаря. Вызывается на построение каждой ячейки. Принимает два параметра: <br> `Date` - дата ячейки <br> `ViewMode`: <br> - `month` отображение месяца, каждая ячейка - 1 день <br> - `year` отображение года, каждая ячейка - 1 месяц <br> - `decade` отображение декады, каждая ячейка - 1 год <br><br> Колбек должен возвращать объект с полями, отвечающими за отключение и подкраску ячейки. |
606
+ | id | `string` | - | Значение html-атрибута id |
607
+ | name | `string` | - | Значение html-атрибута name |
608
+ | disabled | `boolean` | - | Является ли поле деактивированным |
609
+ | readonly | `boolean` | - | Является ли поле доступным только для чтения |
610
+ | onFocus | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки получения фокуса |
611
+ | onBlur | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки потери фокуса |
612
+ | autoFocus | `boolean` | false | Включен ли авто-фокус для поля |
613
+ | className | `string` | - | CSS-класс |
614
+ | label | `string` | - | Лейбл |
615
+ | labelTooltip | `ReactNode` | - | Всплывающая подсказка лейбла |
616
+ | required | `boolean` | - | Является ли поле обязательным |
617
+ | caption | `string` | - | Подпись справа от лейбла |
618
+ | hint | `string` | - | Подсказка внизу |
619
+ | showHintIcon | `boolean` | - | Отображать иконку подсказки |
620
+ | size | enum Size: `"s"`, `"m"`, `"l"` | SIZE.S | Размер |
621
+ | validationState | enum ValidationState: `"error"`, `"default"`, `"warning"`, `"success"` | default | Состояние валидации |
622
+ | labelTooltipPlacement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | top | Расположение подсказки лейбла |
623
+ | error | `string` | - | |
568
624
  | 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} |
569
625
  | key | `Key` | - | |
626
+ | showSeconds | `boolean` | - | |
570
627
  ## FieldDecorator
571
628
  ### Props
572
629
  | name | type | default value | description |
573
630
  |------|------|---------------|-------------|
631
+ | children* | `ReactNode` | - | Контент |
632
+ | className | `string` | - | CSS-класс |
633
+ | disabled | `boolean` | - | Деактивирован ли элемент Является ли поле деактивированным |
634
+ | readonly | `boolean` | - | Является ли поле доступным только на чтение Доступно ли поле только на чтение |
635
+ | error | `string` | - | |
636
+ | label | `string` | - | Лейбл |
637
+ | caption | `string` | - | Подпись справа от лейбла |
638
+ | labelTooltip | `ReactNode` | - | Всплывающая подсказка лейбла |
639
+ | labelFor | `string` | - | Аттрибут for |
640
+ | required | `boolean` | - | Является ли поле обязательным |
641
+ | size | enum Size: `"s"`, `"m"`, `"l"` | SIZE.S | Размер |
642
+ | labelTooltipPlacement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | top | Расположение подсказки лейбла |
643
+ | length | `{ current: number; max?: number; }` | - | Допустимая длинна текста |
644
+ | hint | `string` | - | Подсказка внизу |
645
+ | validationState | enum ValidationState: `"error"`, `"default"`, `"warning"`, `"success"` | default | Состояние валидации |
646
+ | showHintIcon | `boolean` | - | Отображать иконку подсказки |
574
647
  | ref | `LegacyRef<HTMLDivElement>` | - | 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} |
575
648
  | key | `Key` | - | |
576
649
  ## FieldSecure
577
650
  ### Props
578
651
  | name | type | default value | description |
579
652
  |------|------|---------------|-------------|
653
+ | hidden | `boolean` | - | Замаскированно ли значение поля |
654
+ | onHiddenChange | `(value: boolean) => void` | - | Колбек смены маскирования |
655
+ | showCopyButton | `boolean` | - | Отображение кнопки копирования |
656
+ | onCopyButtonClick | `() => void` | - | Колбек клика по кнопке Копировать для поля |
657
+ | allowMoreThanMaxLength | `boolean` | - | Можно ли вводить больше разрешённого кол-ва символов |
658
+ | prefixIcon | `ReactElement<any, string \| JSXElementConstructor<any>>` | - | Иконка-префикс для поля |
659
+ | asyncValueGetter | `() => Promise<string>` | - | Свойство позволяет грузить данные в поле по требованию |
660
+ | onChange | `(value: string, e?: ChangeEvent<HTMLInputElement>) => void` | - | Колбек смены значения |
661
+ | value | `string` | - | Значение input |
662
+ | id | `string` | - | Значение html-атрибута id |
663
+ | name | `string` | - | Значение html-атрибута name |
664
+ | disabled | `boolean` | - | Является ли поле деактивированным |
665
+ | readonly | `boolean` | - | Является ли поле доступным только для чтения |
666
+ | onFocus | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки получения фокуса |
667
+ | onBlur | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки потери фокуса |
668
+ | placeholder | `string` | - | Значение плейсхолдера |
669
+ | autoFocus | `boolean` | false | Включен ли авто-фокус для поля |
670
+ | maxLength | `number` | - | Максимальная длина вводимого значения |
671
+ | autoComplete | `string \| boolean` | false | Включен ли автокомплит для поля |
672
+ | className | `string` | - | CSS-класс |
673
+ | label | `string` | - | Лейбл |
674
+ | labelTooltip | `ReactNode` | - | Всплывающая подсказка лейбла |
675
+ | required | `boolean` | - | Является ли поле обязательным |
676
+ | caption | `string` | - | Подпись справа от лейбла |
677
+ | hint | `string` | - | Подсказка внизу |
678
+ | showHintIcon | `boolean` | - | Отображать иконку подсказки |
679
+ | size | enum Size: `"s"`, `"m"`, `"l"` | SIZE.S | Размер |
680
+ | validationState | enum ValidationState: `"error"`, `"default"`, `"warning"`, `"success"` | default | Состояние валидации |
681
+ | labelTooltipPlacement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | top | Расположение подсказки лейбла |
682
+ | error | `string` | - | |
580
683
  | 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} |
581
684
  | key | `Key` | - | |
582
685
  ## FieldSelect
583
686
  ### Props
584
687
  | name | type | default value | description |
585
688
  |------|------|---------------|-------------|
689
+ | options* | `OptionProps[]` | - | |
690
+ | id | `string` | - | Значение html-атрибута id |
691
+ | name | `string` | - | Значение html-атрибута name |
692
+ | disabled | `boolean` | false | Является ли поле деактивированным |
693
+ | readonly | `boolean` | false false | Является ли поле доступным только для чтения |
694
+ | onFocus | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки получения фокуса |
695
+ | onBlur | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки потери фокуса |
696
+ | placeholder | `string` | - | Значение плейсхолдера |
697
+ | autoFocus | `boolean` | false | Включен ли авто-фокус для поля |
698
+ | onKeyDown | `KeyboardEventHandler<HTMLInputElement>` | - | Колбек обработки начала нажатия клавиши клавиатуры |
699
+ | className | `string` | - | CSS-класс |
700
+ | label | `string` | - | Лейбл |
701
+ | labelTooltip | `ReactNode` | - | Всплывающая подсказка лейбла |
702
+ | required | `boolean` | - | Является ли поле обязательным |
703
+ | caption | `string` | - | Подпись справа от лейбла |
704
+ | hint | `string` | - | Подсказка внизу |
705
+ | showHintIcon | `boolean` | - | Отображать иконку подсказки |
706
+ | size | enum Size: `"s"`, `"m"`, `"l"` | - | Размер |
707
+ | validationState | enum ValidationState: `"error"`, `"default"`, `"warning"`, `"success"` | - | Состояние валидации |
708
+ | labelTooltipPlacement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | top | Расположение подсказки лейбла |
709
+ | error | `string` | - | |
710
+ | loading | `boolean` | - | |
711
+ | prefix | `ReactNode` | - | Произвольный префикс для поля |
712
+ | postfix | `ReactNode` | - | Произвольный постфикс для поля |
713
+ | onChange | `OnChangeHandler<any>` | - | Controlled обработчик измения состояния |
714
+ | value | `ItemId \| ItemId[]` | - | Controlled состояние |
715
+ | defaultValue | `ItemId \| ItemId[]` | - | Начальное состояние |
716
+ | pinTop | `OptionProps[]` | - | |
717
+ | pinBottom | `OptionProps[]` | - | |
718
+ | searchable | `boolean` | - | |
719
+ | showCopyButton | `boolean` | - | Отображение кнопки Копировать для поля (актуально только для `readonly = true`) |
720
+ | onCopyButtonClick | `() => void` | - | Колбек клика по кнопке Копировать для поля |
721
+ | showClearButton | `boolean` | true | Отображение кнопки очистки поля |
722
+ | prefixIcon | `ReactElement<any, string \| JSXElementConstructor<any>>` | - | Иконка-префикс для поля |
723
+ | footer | `ReactNode` | - | |
724
+ | widthStrategy | enum PopoverWidthStrategy: `"auto"`, `"gte"`, `"eq"` | - | |
725
+ | search | `SearchState` | - | |
726
+ | autocomplete | `boolean` | - | |
727
+ | addOptionByEnter | `boolean` | - | |
728
+ | open | `boolean` | - | |
729
+ | enableFuzzySearch | `boolean` | - | Включить нечеткий поиск |
730
+ | resetSearchOnOptionSelection | `boolean` | true | Поведение строки поиска при выборе опции из списка, false необходимо при асинхронной подгрузке значений с бэка, в случае если надо поиск оставить как значение при отсутствии данных |
731
+ | onOpenChange | `(open: boolean) => void` | - | |
732
+ | selectedOptionFormatter | `SelectedOptionFormatter` | - | |
733
+ | scrollToSelectedItem | `boolean` | - | Флаг, отвещающий за прокручивание до выбранного элемента |
734
+ | virtualized | `boolean` | - | Включить виртуализацию на компоненты списка. Рекомендуется если у вас от 1к элементов списка |
735
+ | scrollRef | `Ref<HTMLElement>` | - | Ссылка на элемент, обозначающий самый конец прокручиваемого списка |
736
+ | scrollContainerRef | `Ref<HTMLElement>` | - | Ссылка на контейнер, который скроллится |
737
+ | untouchableScrollbars | `boolean` | - | Отключает возможность взаимодействовать со скролбарами мышью. |
738
+ | onScroll | `(event?: Event) => void` | - | Колбек на скролл прокручиваемого списка |
739
+ | dataFiltered | `boolean` | - | |
740
+ | dataError | `boolean` | - | |
741
+ | noDataState | `EmptyStateProps` | - | Экран при отстутствии данных |
742
+ | noResultsState | `EmptyStateProps` | - | Экран при отстутствии результатов поиска или фильтров |
743
+ | errorDataState | `EmptyStateProps` | - | Экран при ошибке запроса |
744
+ | selection | "single" \| "multiple" | - | |
745
+ | 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} |
746
+ | key | `Key` | - | |
747
+ | removeByBackspace | `boolean` | - | |
586
748
  ## FieldSlider
587
749
  ### Props
588
750
  | name | type | default value | description |
589
751
  |------|------|---------------|-------------|
752
+ | postfixIcon | `ReactElement<any, string \| JSXElementConstructor<any>>` | - | Иконка-постфикс для поля |
753
+ | showScaleBar | `boolean` | true | Отображение линейки |
754
+ | textInputFormatter | `TextInputFormatter` | - | Функция для форматирования значений в текстовом поле |
755
+ | unbindInputFromMarks | `boolean` | - | Отвязать текстовое поле от значений на линейке |
756
+ | prefix | `ReactNode` | - | Произвольный префикс для поля |
757
+ | postfix | `ReactNode` | - | Произвольный постфикс для поля |
758
+ | id | `string` | - | Значение html-атрибута id |
759
+ | name | `string` | - | Значение html-атрибута name |
760
+ | disabled | `boolean` | - | Является ли поле деактивированным |
761
+ | readonly | `boolean` | - | Является ли поле доступным только для чтения |
762
+ | onFocus | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки получения фокуса |
763
+ | onBlur | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки потери фокуса |
764
+ | autoFocus | `boolean` | false | Включен ли авто-фокус для поля |
765
+ | onChange | `(value: number \| number[]) => void` | - | |
766
+ | value | `number \| number[]` | - | |
767
+ | range | `boolean` | - | |
768
+ | tipFormatter | `(value: string \| number) => ReactNode` | - | |
769
+ | step | `number` | - | |
770
+ | min | `number` | - | |
771
+ | max | `number` | - | |
772
+ | marks | `Record<string \| number, ReactNode \| MarkObj>` | - | |
773
+ | className | `string` | - | CSS-класс |
774
+ | label | `string` | - | Лейбл |
775
+ | labelTooltip | `ReactNode` | - | Всплывающая подсказка лейбла |
776
+ | required | `boolean` | - | Является ли поле обязательным |
777
+ | caption | `string` | - | Подпись справа от лейбла |
778
+ | hint | `string` | - | Подсказка внизу |
779
+ | showHintIcon | `boolean` | - | Отображать иконку подсказки |
780
+ | size | enum Size: `"s"`, `"m"`, `"l"` | SIZE.S | Размер |
781
+ | labelTooltipPlacement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | top | Расположение подсказки лейбла |
590
782
  | 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} |
591
783
  | key | `Key` | - | |
592
784
  ## FieldStepper
593
785
  ### Props
594
786
  | name | type | default value | description |
595
787
  |------|------|---------------|-------------|
788
+ | value | `number` | - | Значение поля |
789
+ | onChange | `(value: number, e?: ChangeEvent<HTMLInputElement>) => void` | - | Колбек смены значения |
790
+ | step | `number` | 1 | Шаг поля |
791
+ | allowMoreThanLimits | `boolean` | true | Можно ли вводить c клавиатуры числа, выходящие за пределы min/max |
792
+ | prefix | `ReactNode` | - | Произвольный префикс для поля |
793
+ | postfix | `ReactNode` | - | Произвольный постфикс для поля |
794
+ | plusButtonTooltip | `TooltipProps` | - | Тултип над кнопкой увеличения значения |
795
+ | minusButtonTooltip | `TooltipProps` | - | Тултип над кнопкой уменьшения значения |
796
+ | id | `string` | - | Значение html-атрибута id |
797
+ | name | `string` | - | Значение html-атрибута name |
798
+ | disabled | `boolean` | - | Является ли поле деактивированным |
799
+ | readonly | `boolean` | - | Является ли поле доступным только для чтения |
800
+ | onFocus | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки получения фокуса |
801
+ | onBlur | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки потери фокуса |
802
+ | autoFocus | `boolean` | false | Включен ли авто-фокус для поля |
803
+ | min | `number` | Number.NEGATIVE_INFINITY | Минимальное значение поля |
804
+ | max | `number` | Number.POSITIVE_INFINITY | Максимальное значение поля |
805
+ | className | `string` | - | CSS-класс |
806
+ | label | `string` | - | Лейбл |
807
+ | labelTooltip | `ReactNode` | - | Всплывающая подсказка лейбла |
808
+ | required | `boolean` | - | Является ли поле обязательным |
809
+ | caption | `string` | - | Подпись справа от лейбла |
810
+ | hint | `string` | - | Подсказка внизу |
811
+ | showHintIcon | `boolean` | - | Отображать иконку подсказки |
812
+ | size | enum Size: `"s"`, `"m"`, `"l"` | SIZE.S | Размер |
813
+ | validationState | enum ValidationState: `"error"`, `"default"`, `"warning"`, `"success"` | default | Состояние валидации |
814
+ | labelTooltipPlacement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | top | Расположение подсказки лейбла |
815
+ | error | `string` | - | |
596
816
  | 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} |
597
817
  | key | `Key` | - | |
598
818
  ## FieldText
599
819
  ### Props
600
820
  | name | type | default value | description |
601
821
  |------|------|---------------|-------------|
822
+ | showCopyButton | `boolean` | - | Отображение кнопки Копировать для поля (актуально только для `readonly = true`) |
823
+ | onCopyButtonClick | `() => void` | - | Колбек клика по кнопке Копировать для поля |
824
+ | showClearButton | `boolean` | true | Отображение кнопки очистки поля |
825
+ | onClearButtonClick | `() => void` | - | Колбек клика по кнопке очистки поля |
826
+ | allowMoreThanMaxLength | `boolean` | - | Можно ли вводить больше разрешённого кол-ва символов |
827
+ | prefixIcon | `ReactElement<any, string \| JSXElementConstructor<any>>` | - | Иконка-префикс для поля |
828
+ | prefix | `ReactNode` | - | Произвольный префикс для поля |
829
+ | postfix | `ReactNode` | - | Произвольный постфикс для поля |
830
+ | button | `Button` | - | Кнопка действия внутри поля |
831
+ | type | "text" \| "tel" \| "email" | text | |
832
+ | onChange | `(value: string, e?: ChangeEvent<HTMLInputElement>) => void` | - | Колбек смены значения |
833
+ | value | `string` | - | Значение input |
834
+ | inputMode | enum InputMode: `"none"`, `"text"`, `"search"`, `"tel"`, `"email"`, `"decimal"`, `"numeric"`, `"url"` | - | Режим работы экранной клавиатуры |
835
+ | id | `string` | - | Значение html-атрибута id |
836
+ | name | `string` | - | Значение html-атрибута name |
837
+ | disabled | `boolean` | - | Является ли поле деактивированным |
838
+ | readonly | `boolean` | - | Является ли поле доступным только для чтения |
839
+ | onFocus | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки получения фокуса |
840
+ | onBlur | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки потери фокуса |
841
+ | placeholder | `string` | - | Значение плейсхолдера |
842
+ | autoFocus | `boolean` | false | Включен ли авто-фокус для поля |
843
+ | maxLength | `number` | - | Максимальная длина вводимого значения |
844
+ | autoComplete | `string \| boolean` | false | Включен ли автокомплит для поля |
845
+ | spellCheck | `boolean` | true | Значение атрибута spellcheck (проверка орфографии) |
846
+ | pattern | `string` | - | Регулярное выражение валидного инпута |
847
+ | onKeyDown | `KeyboardEventHandler<HTMLInputElement>` | - | Колбек обработки начала нажатия клавиши клавиатуры |
848
+ | onPaste | `ClipboardEventHandler<HTMLInputElement>` | - | Колбек обработки вставки значения |
849
+ | className | `string` | - | CSS-класс |
850
+ | label | `string` | - | Лейбл |
851
+ | labelTooltip | `ReactNode` | - | Всплывающая подсказка лейбла |
852
+ | required | `boolean` | - | Является ли поле обязательным |
853
+ | caption | `string` | - | Подпись справа от лейбла |
854
+ | hint | `string` | - | Подсказка внизу |
855
+ | showHintIcon | `boolean` | - | Отображать иконку подсказки |
856
+ | size | enum Size: `"s"`, `"m"`, `"l"` | SIZE.S | Размер |
857
+ | validationState | enum ValidationState: `"error"`, `"default"`, `"warning"`, `"success"` | default | Состояние валидации |
858
+ | labelTooltipPlacement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | top | Расположение подсказки лейбла |
859
+ | error | `string` | - | |
602
860
  | 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} |
603
861
  | key | `Key` | - | |
604
862
  ## FieldTextArea
605
863
  ### Props
606
864
  | name | type | default value | description |
607
865
  |------|------|---------------|-------------|
866
+ | minRows | `number` | 3 | Минимальное кол-во строк, до которого размер поля может быть увеличен |
867
+ | maxRows | `number` | 1000 | Максимальное кол-во строк, до которого размер поля может быть увеличен |
868
+ | resizable | `boolean` | - | Может ли ли пользователь изменять размеры поля (если св-во не включено, поле автоматически меняет свой размер) |
869
+ | onChange | `(value: string, e?: ChangeEvent<HTMLTextAreaElement>) => void` | - | Колбек смены значения |
870
+ | showCopyButton | `boolean` | - | Отображение кнопки Копировать для поля (актуально только для `readonly = true`) |
871
+ | onCopyButtonClick | `() => void` | - | Колбек клика по кнопке Копировать для поля |
872
+ | showClearButton | `boolean` | true | Отображение кнопки очистки поля |
873
+ | allowMoreThanMaxLength | `boolean` | true | Можно ли вводить больше разрешённого кол-ва символов |
874
+ | footer | `ReactNode` | - | Нода под футер |
875
+ | value | `string` | - | HTML-аттрибут value |
876
+ | id | `string` | - | HTML-аттрибут id |
877
+ | name | `string` | - | HTML-аттрибут name |
878
+ | disabled | `boolean` | - | Является ли поле деактивированным |
879
+ | readonly | `boolean` | - | Является ли поле доступным только на чтение |
880
+ | onFocus | `FocusEventHandler<HTMLTextAreaElement>` | - | Колбек получения фокуса |
881
+ | onBlur | `FocusEventHandler<HTMLTextAreaElement>` | - | Колбек потери фокуса |
882
+ | placeholder | `string` | - | Плейсхолдер |
883
+ | autoFocus | `boolean` | - | Включен ли авто-фокус |
884
+ | maxLength | `number` | - | Максимальное кол-во символов |
885
+ | inputMode | enum InputMode: `"none"`, `"text"`, `"search"`, `"tel"`, `"email"`, `"decimal"`, `"numeric"`, `"url"` | - | Режим работы экранной клавиатуры |
886
+ | spellCheck | `boolean` | true | Включение проверки орфографии |
887
+ | onKeyDown | `KeyboardEventHandler<HTMLTextAreaElement>` | - | Колбек нажатия клавиши клавиатуры |
888
+ | className | `string` | - | CSS-класс |
889
+ | label | `string` | - | Лейбл |
890
+ | labelTooltip | `ReactNode` | - | Всплывающая подсказка лейбла |
891
+ | required | `boolean` | - | Является ли поле обязательным |
892
+ | caption | `string` | - | Подпись справа от лейбла |
893
+ | hint | `string` | - | Подсказка внизу |
894
+ | showHintIcon | `boolean` | - | Отображать иконку подсказки |
895
+ | size | enum Size: `"s"`, `"m"`, `"l"` | SIZE.S | Размер |
896
+ | validationState | enum ValidationState: `"error"`, `"default"`, `"warning"`, `"success"` | default | Состояние валидации |
897
+ | labelTooltipPlacement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | top | Расположение подсказки лейбла |
898
+ | error | `string` | - | |
608
899
  | ref | `LegacyRef<HTMLTextAreaElement>` | - | 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} |
609
900
  | key | `Key` | - | |
610
901
  ## FieldTime
611
902
  ### Props
612
903
  | name | type | default value | description |
613
904
  |------|------|---------------|-------------|
905
+ | open | `boolean` | - | Открыт time-picker |
906
+ | onOpenChange | `(value: boolean) => void` | - | Колбек открытия пикера |
907
+ | value | `TimeValue` | - | Значение поля |
908
+ | onChange | `(value?: TimeValue) => void` | - | Колбек смены значения |
909
+ | showCopyButton | `boolean` | - | Отображение кнопки копирования |
910
+ | onCopyButtonClick | `() => void` | - | Колбек клика по кнопке Копировать для поля |
911
+ | showSeconds | `boolean` | true | Показывать ли секунды |
912
+ | showClearButton | `boolean` | true | Отображение кнопки Очистки поля |
913
+ | showCurrentButton | `boolean` | - | Показывать ли кнопку выбора текущего времени |
914
+ | id | `string` | - | Значение html-атрибута id |
915
+ | name | `string` | - | Значение html-атрибута name |
916
+ | disabled | `boolean` | - | Является ли поле деактивированным |
917
+ | readonly | `boolean` | - | Является ли поле доступным только для чтения |
918
+ | onFocus | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки получения фокуса |
919
+ | onBlur | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки потери фокуса |
920
+ | autoFocus | `boolean` | false | Включен ли авто-фокус для поля |
921
+ | className | `string` | - | CSS-класс |
922
+ | label | `string` | - | Лейбл |
923
+ | labelTooltip | `ReactNode` | - | Всплывающая подсказка лейбла |
924
+ | required | `boolean` | - | Является ли поле обязательным |
925
+ | caption | `string` | - | Подпись справа от лейбла |
926
+ | hint | `string` | - | Подсказка внизу |
927
+ | showHintIcon | `boolean` | - | Отображать иконку подсказки |
928
+ | size | enum Size: `"s"`, `"m"`, `"l"` | SIZE.S | Размер |
929
+ | validationState | enum ValidationState: `"error"`, `"default"`, `"warning"`, `"success"` | default | Состояние валидации |
930
+ | labelTooltipPlacement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | top | Расположение подсказки лейбла |
931
+ | error | `string` | - | |
614
932
  | 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} |
615
933
  | key | `Key` | - | |
616
934
  ## withCharacterCount
617
935
  ### Props
618
936
  | name | type | default value | description |
619
937
  |------|------|---------------|-------------|
620
- | __@metadata@800* | `DecoratorMetadataObject` | - | |
621
- | __@hasInstance@798* | `(value: any) => boolean` | - | Determines whether the given value inherits from this function if this function was used as a constructor function. A constructor function can control which objects are recognized as its instances by 'instanceof' by overriding this method. |
938
+ | __@metadata@2029* | `DecoratorMetadataObject` | - | |
939
+ | __@hasInstance@2027* | `(value: any) => boolean` | - | Determines whether the given value inherits from this function if this function was used as a constructor function. A constructor function can control which objects are recognized as its instances by 'instanceof' by overriding this method. |
622
940
  | name* | `string` | - | Returns the name of the function. Function names are read-only and can not be changed. |
623
941
  | caller* | `Function` | - | |
624
942
  | arguments* | `any` | - | |
@@ -24,9 +24,29 @@ type FieldTimeOwnProps = {
24
24
  * @default true
25
25
  */
26
26
  showClearButton?: boolean;
27
- };
27
+ } & Pick<TimePickerProps, 'showCurrentButton'>;
28
28
  export type FieldTimeProps = WithSupportProps<FieldTimeOwnProps & InputProps & WrapperProps>;
29
29
  export declare const FieldTime: import("react").ForwardRefExoticComponent<{
30
30
  'data-test-id'?: string;
31
- } & import("react").AriaAttributes & FieldTimeOwnProps & InputProps & WrapperProps & import("react").RefAttributes<HTMLInputElement>>;
31
+ } & import("react").AriaAttributes & {
32
+ /** Открыт time-picker */
33
+ open?: boolean;
34
+ /** Колбек открытия пикера */
35
+ onOpenChange?(value: boolean): void;
36
+ /** Значение поля */
37
+ value?: TimePickerProps["value"];
38
+ /** Колбек смены значения */
39
+ onChange?: TimePickerProps["onChangeValue"];
40
+ /** Отображение кнопки копирования */
41
+ showCopyButton?: boolean;
42
+ /** Колбек клика по кнопке Копировать для поля */
43
+ onCopyButtonClick?(): void;
44
+ /** Показывать ли секунды */
45
+ showSeconds?: boolean;
46
+ /**
47
+ * Отображение кнопки Очистки поля
48
+ * @default true
49
+ */
50
+ showClearButton?: boolean;
51
+ } & Pick<TimePickerProps, "showCurrentButton"> & InputProps & WrapperProps & import("react").RefAttributes<HTMLInputElement>>;
32
52
  export {};
@@ -78,9 +78,10 @@ exports.FieldTime = (0, react_1.forwardRef)((_a, ref) => {
78
78
  validationState = constants_1.VALIDATION_STATE.Default,
79
79
  error,
80
80
  onCopyButtonClick,
81
- autoFocus
81
+ autoFocus,
82
+ showCurrentButton
82
83
  } = _a,
83
- rest = __rest(_a, ["id", "name", "value", "disabled", "readonly", "showCopyButton", "showClearButton", "open", "onOpenChange", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "showHintIcon", "showSeconds", "size", "validationState", "error", "onCopyButtonClick", "autoFocus"]);
84
+ rest = __rest(_a, ["id", "name", "value", "disabled", "readonly", "showCopyButton", "showClearButton", "open", "onOpenChange", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "showHintIcon", "showSeconds", "size", "validationState", "error", "onCopyButtonClick", "autoFocus", "showCurrentButton"]);
84
85
  const [isOpen, setIsOpen] = (0, uncontrollable_1.useUncontrolledProp)(open, false, onOpenChange);
85
86
  const localRef = (0, react_1.useRef)(null);
86
87
  const clearButtonRef = (0, react_1.useRef)(null);
@@ -264,7 +265,8 @@ exports.FieldTime = (0, react_1.forwardRef)((_a, ref) => {
264
265
  onFocusLeave: handleCalendarFocusLeave,
265
266
  "data-test-id": 'field-time__timepicker',
266
267
  fitToContainer: false,
267
- showSeconds: showSeconds
268
+ showSeconds: showSeconds,
269
+ showCurrentButton: showCurrentButton
268
270
  }),
269
271
  children: (0, jsx_runtime_1.jsx)(helperComponents_1.FieldContainerPrivate, {
270
272
  className: styles_module_scss_1.default.container,
@@ -24,9 +24,29 @@ type FieldTimeOwnProps = {
24
24
  * @default true
25
25
  */
26
26
  showClearButton?: boolean;
27
- };
27
+ } & Pick<TimePickerProps, 'showCurrentButton'>;
28
28
  export type FieldTimeProps = WithSupportProps<FieldTimeOwnProps & InputProps & WrapperProps>;
29
29
  export declare const FieldTime: import("react").ForwardRefExoticComponent<{
30
30
  'data-test-id'?: string;
31
- } & import("react").AriaAttributes & FieldTimeOwnProps & InputProps & WrapperProps & import("react").RefAttributes<HTMLInputElement>>;
31
+ } & import("react").AriaAttributes & {
32
+ /** Открыт time-picker */
33
+ open?: boolean;
34
+ /** Колбек открытия пикера */
35
+ onOpenChange?(value: boolean): void;
36
+ /** Значение поля */
37
+ value?: TimePickerProps["value"];
38
+ /** Колбек смены значения */
39
+ onChange?: TimePickerProps["onChangeValue"];
40
+ /** Отображение кнопки копирования */
41
+ showCopyButton?: boolean;
42
+ /** Колбек клика по кнопке Копировать для поля */
43
+ onCopyButtonClick?(): void;
44
+ /** Показывать ли секунды */
45
+ showSeconds?: boolean;
46
+ /**
47
+ * Отображение кнопки Очистки поля
48
+ * @default true
49
+ */
50
+ showClearButton?: boolean;
51
+ } & Pick<TimePickerProps, "showCurrentButton"> & InputProps & WrapperProps & import("react").RefAttributes<HTMLInputElement>>;
32
52
  export {};
@@ -40,7 +40,7 @@ const getStringTimeValue = (time, { showSeconds, locale }) => {
40
40
  });
41
41
  };
42
42
  export const FieldTime = forwardRef((_a, ref) => {
43
- var { id, name, value: valueProp, disabled = false, readonly = false, showCopyButton: showCopyButtonProp = true, showClearButton: showClearButtonProp = true, open, onOpenChange, onChange, onFocus, onBlur: onBlurProp, className, label, labelTooltip, labelTooltipPlacement, required = false, caption, hint, showHintIcon, showSeconds = true, size = SIZE.S, validationState = VALIDATION_STATE.Default, error, onCopyButtonClick, autoFocus } = _a, rest = __rest(_a, ["id", "name", "value", "disabled", "readonly", "showCopyButton", "showClearButton", "open", "onOpenChange", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "showHintIcon", "showSeconds", "size", "validationState", "error", "onCopyButtonClick", "autoFocus"]);
43
+ var { id, name, value: valueProp, disabled = false, readonly = false, showCopyButton: showCopyButtonProp = true, showClearButton: showClearButtonProp = true, open, onOpenChange, onChange, onFocus, onBlur: onBlurProp, className, label, labelTooltip, labelTooltipPlacement, required = false, caption, hint, showHintIcon, showSeconds = true, size = SIZE.S, validationState = VALIDATION_STATE.Default, error, onCopyButtonClick, autoFocus, showCurrentButton } = _a, rest = __rest(_a, ["id", "name", "value", "disabled", "readonly", "showCopyButton", "showClearButton", "open", "onOpenChange", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "showHintIcon", "showSeconds", "size", "validationState", "error", "onCopyButtonClick", "autoFocus", "showCurrentButton"]);
44
44
  const [isOpen, setIsOpen] = useUncontrolledProp(open, false, onOpenChange);
45
45
  const localRef = useRef(null);
46
46
  const clearButtonRef = useRef(null);
@@ -157,5 +157,5 @@ export const FieldTime = forwardRef((_a, ref) => {
157
157
  : {
158
158
  open: showDropList,
159
159
  onOpenChange: setIsOpen,
160
- }), { content: _jsx(TimePicker, { size: size, value: valueProp, onChangeValue: handleSelectTime, navigationStartRef: navigationStartRef, onFocusLeave: handleCalendarFocusLeave, "data-test-id": 'field-time__timepicker', fitToContainer: false, showSeconds: showSeconds }), children: _jsx(FieldContainerPrivate, { className: styles.container, size: size, validationState: fieldValidationState, disabled: disabled, readonly: readonly, variant: CONTAINER_VARIANT.SingleLine, focused: showDropList, inputRef: localRef, postfix: postfixButtons, children: _jsx(InputPrivate, { ref: mergeRefs(ref, localRef), "data-size": size, value: value || '', placeholder: mask, onChange: handleChange, onFocus: inputHandlers.onFocus, onMouseDown: inputHandlers.onMouseDown, onBlur: onBlur, onKeyDown: handleInputKeyDown, onClick: onClick, disabled: disabled, readonly: readonly, tabIndex: inputTabIndex, type: 'text', inputMode: 'numeric', id: id, name: name, autoFocus: autoFocus, "data-test-id": 'field-time__input' }) }) })) })));
160
+ }), { content: _jsx(TimePicker, { size: size, value: valueProp, onChangeValue: handleSelectTime, navigationStartRef: navigationStartRef, onFocusLeave: handleCalendarFocusLeave, "data-test-id": 'field-time__timepicker', fitToContainer: false, showSeconds: showSeconds, showCurrentButton: showCurrentButton }), children: _jsx(FieldContainerPrivate, { className: styles.container, size: size, validationState: fieldValidationState, disabled: disabled, readonly: readonly, variant: CONTAINER_VARIANT.SingleLine, focused: showDropList, inputRef: localRef, postfix: postfixButtons, children: _jsx(InputPrivate, { ref: mergeRefs(ref, localRef), "data-size": size, value: value || '', placeholder: mask, onChange: handleChange, onFocus: inputHandlers.onFocus, onMouseDown: inputHandlers.onMouseDown, onBlur: onBlur, onKeyDown: handleInputKeyDown, onClick: onClick, disabled: disabled, readonly: readonly, tabIndex: inputTabIndex, type: 'text', inputMode: 'numeric', id: id, name: name, autoFocus: autoFocus, "data-test-id": 'field-time__input' }) }) })) })));
161
161
  });
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "Fields",
7
- "version": "0.53.1",
7
+ "version": "0.53.2-preview-7a4708af.0",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -37,7 +37,7 @@
37
37
  "scripts": {},
38
38
  "dependencies": {
39
39
  "@snack-uikit/button": "0.19.17",
40
- "@snack-uikit/calendar": "0.13.18",
40
+ "@snack-uikit/calendar": "0.13.19-preview-7a4708af.0",
41
41
  "@snack-uikit/color-picker": "0.3.55",
42
42
  "@snack-uikit/divider": "3.2.11",
43
43
  "@snack-uikit/dropdown": "0.5.5",
@@ -66,5 +66,5 @@
66
66
  "peerDependencies": {
67
67
  "@snack-uikit/locale": "*"
68
68
  },
69
- "gitHead": "eafd443c52a24f8ef917b78df60ff5ce2137a728"
69
+ "gitHead": "73aa8d10d8ffdf670e493f7715ebeb7e9ec4b134"
70
70
  }
@@ -61,7 +61,7 @@ type FieldTimeOwnProps = {
61
61
  * @default true
62
62
  */
63
63
  showClearButton?: boolean;
64
- };
64
+ } & Pick<TimePickerProps, 'showCurrentButton'>;
65
65
 
66
66
  export type FieldTimeProps = WithSupportProps<FieldTimeOwnProps & InputProps & WrapperProps>;
67
67
 
@@ -114,6 +114,7 @@ export const FieldTime = forwardRef<HTMLInputElement, FieldTimeProps>(
114
114
  error,
115
115
  onCopyButtonClick,
116
116
  autoFocus,
117
+ showCurrentButton,
117
118
  ...rest
118
119
  },
119
120
  ref,
@@ -313,6 +314,7 @@ export const FieldTime = forwardRef<HTMLInputElement, FieldTimeProps>(
313
314
  data-test-id='field-time__timepicker'
314
315
  fitToContainer={false}
315
316
  showSeconds={showSeconds}
317
+ showCurrentButton={showCurrentButton}
316
318
  />
317
319
  }
318
320
  >