@snack-uikit/chips 0.13.0 → 0.13.1

package/CHANGELOG.md

@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.13.1 (2024-04-25)
+
+
+### Bug Fixes
+
+* **PDS-0000:** add export type ContentRenderProps ([6ccd417](https://github.com/cloud-ru-tech/snack-uikit/commit/6ccd4179458703ebb03bc58c25300555799c1a8d))
+* **PDS-0000:** fix clear button & label view in ChipMultiple ([064939f](https://github.com/cloud-ru-tech/snack-uikit/commit/064939f2ae0836ea381db8c38fac477d53b9a4ef))
+* **PDS-0000:** set default button type as button ([4ec64de](https://github.com/cloud-ru-tech/snack-uikit/commit/4ec64de508826df4a1e82fd8c75448d9919e563f))
+
+
+
+
+
 # 0.13.0 (2024-04-23)
 
 

package/README.md

@@ -90,31 +90,156 @@ import { PlaceholderSVG } from '@snack-uikit/icons';
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
+| onClick* | `MouseEventHandler<HTMLButtonElement>` | - | Колбек обработки клика |
+| label* | `string` | - | Лейбл |
+| disabled | `boolean` | - | Деактивирован ли компонент |
+| loading | `boolean` | - | Состояние загрузки |
+| icon | `ReactElement<any, string \| JSXElementConstructor<any>>` | - | Иконка |
+| className | `string` | - | CSS-класс |
+| tabIndex | `number` | - | HTML tab index |
+| size | enum Size: `"xs"`, `"s"`, `"m"`, `"l"` | s | Размер |
 ## ChipToggle
 Чип с состоянием выбран/не выбран
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
+| onChange* | `(checked: boolean, e: ChangeEvent<HTMLInputElement>) => void` | - | Колбек смены значения |
+| checked* | `boolean` | - | Отмечен ли компонент |
+| label* | `string` | - | Лейбл |
+| disabled | `boolean` | - | Деактивирован ли компонент |
+| loading | `boolean` | - | Состояние загрузки |
+| icon | `ReactElement<any, string \| JSXElementConstructor<any>>` | - | Иконка |
+| className | `string` | - | CSS-класс |
+| tabIndex | `number` | - | HTML tab index |
+| size | enum Size: `"xs"`, `"s"`, `"m"`, `"l"` | s | Размер |
 ## ChipChoice.Custom
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
+| label | `string` | - | Лейбл |
+| disabled | `boolean` | - | Деактивирован ли компонент |
+| loading | `boolean` | - | Состояние загрузки |
+| icon | `ReactElement<any, string \| JSXElementConstructor<any>>` | - | Иконка |
+| className | `string` | - | CSS-класс |
+| tabIndex | `number` | - | HTML tab index |
+| size | enum Size: `"xs"`, `"s"`, `"m"`, `"l"` | - | Размер |
+| onClick | `MouseEventHandler<HTMLButtonElement \| HTMLDivElement>` | - | Колбек обработки клика |
+| showClearButton | `boolean` | true | Отображение кнопки очистки значения |
+| placement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | - | Расположение выпадающего меню |
+| widthStrategy | enum PopoverWidthStrategy: `"auto"`, `"gte"`, `"eq"` | gte | Стратегия управления шириной контейнера поповера <br> - `auto` - соответствует ширине контента, <br> - `gte` - Great Than or Equal, равен ширине таргета или больше ее, если контент в поповере шире, <br> - `eq` - Equal, строго равен ширине таргета. |
+| dropDownClassName | `string` | - |  |
+| valueRender | `(value: any) => ReactNode` | - | Отображаемое значение |
+| value | `any` | - | Фактическое значение. Используется для отображения кнопки очистки, если свойство <strong>showClearButton=true</strong> |
+| onChange | `(value: any) => void` | - |  |
+| content | `(props: CustomContentRenderProps<any>) => ReactNode` | - | Контент выпадающего меню <br> <br> Принимает <strong>ReactNode</strong> <br> Или функцию с аргументами: <br> <strong>handleDroplistItemKeyDown</strong>: Обработчик нажатия клавиши на элемент выпадающего меню <br> <strong>closeDroplist</strong>: Метод для закрытия выпадающего меню |
 ## ChipChoice.Single
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
+| options* | `FilterOption<T>[]` | - | Массив опций |
+| label | `string` | - | Лейбл |
+| disabled | `boolean` | - | Деактивирован ли компонент |
+| loading | `boolean` | - | Состояние загрузки Флаг, отвещающий за состояние загрузки списка |
+| icon | `ReactElement<any, string \| JSXElementConstructor<any>>` | - | Иконка |
+| className | `string` | - | CSS-класс |
+| tabIndex | `number` | - | HTML tab index |
+| size | enum Size: `"xs"`, `"s"`, `"m"`, `"l"` | - | Размер |
+| onClick | `MouseEventHandler<HTMLButtonElement \| HTMLDivElement>` | - | Колбек обработки клика |
+| showClearButton | `boolean` | true | Отображение кнопки очистки значения |
+| placement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | - | Расположение выпадающего меню |
+| widthStrategy | enum PopoverWidthStrategy: `"auto"`, `"gte"`, `"eq"` | gte | Стратегия управления шириной контейнера поповера <br> - `auto` - соответствует ширине контента, <br> - `gte` - Great Than or Equal, равен ширине таргета или больше ее, если контент в поповере шире, <br> - `eq` - Equal, строго равен ширине таргета. |
+| dropDownClassName | `string` | - |  |
+| contentRender | `(option: { label: ItemId; value?: ItemId; contentRenderProps?: T; }) => ReactNode` | - |  |
+| filterFn | `(option: { label: ItemId; value?: ItemId; contentRenderProps?: T; }) => boolean` | - |  |
+| searchable | `boolean` | - |  |
+| footer | `ReactNode ;` | - | Кастомизируемый элемент в конце списка |
+| footerActiveElementsRefs | `RefObject<HTMLElement>[]` | - | Список ссылок на кастомные элементы, помещенные в специальную секцию внизу списка |
+| selection | `SelectionSingleState \| SelectionMultipleState` | - |  |
+| scrollRef | `RefObject<HTMLElement>` | - | Ссылка на элемент, обозначающий самый конец прокручиваемого списка |
+| scrollContainerRef | `RefObject<HTMLElement>` | - | Ссылка на контейнер, который скроллится |
+| dataFiltered | `boolean` | - |  |
+| dataError | `boolean` | - |  |
+| noDataState | `EmptyStateProps` | - | Экран при отстутствии данных |
+| noResultsState | `EmptyStateProps` | - | Экран при отстутствии результатов поиска или фильтров |
+| errorDataState | `EmptyStateProps` | - | Экран при ошибке запроса |
+| onChange | `OnChangeHandler<any>` | - | Controlled обработчик измения состояния |
+| value | `ItemId` | - | Controlled состояние |
+| defaultValue | `ItemId` | - | Начальное состояние |
+| valueRender | `(option?: BaseOption<T>) => ReactNode` | - | Колбек формирующий отображение выбранного значения. Принимает выбранное значение. По умолчанию для отображения используется FilterOption.label |
 ## ChipChoice.Multiple
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
+| options* | `FilterOption<T>[]` | - | Массив опций |
+| label | `string` | - | Лейбл |
+| disabled | `boolean` | - | Деактивирован ли компонент |
+| loading | `boolean` | - | Состояние загрузки Флаг, отвещающий за состояние загрузки списка |
+| icon | `ReactElement<any, string \| JSXElementConstructor<any>>` | - | Иконка |
+| className | `string` | - | CSS-класс |
+| tabIndex | `number` | - | HTML tab index |
+| size | enum Size: `"xs"`, `"s"`, `"m"`, `"l"` | - | Размер |
+| onClick | `MouseEventHandler<HTMLButtonElement \| HTMLDivElement>` | - | Колбек обработки клика |
+| showClearButton | `boolean` | true | Отображение кнопки очистки значения |
+| placement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | - | Расположение выпадающего меню |
+| widthStrategy | enum PopoverWidthStrategy: `"auto"`, `"gte"`, `"eq"` | gte | Стратегия управления шириной контейнера поповера <br> - `auto` - соответствует ширине контента, <br> - `gte` - Great Than or Equal, равен ширине таргета или больше ее, если контент в поповере шире, <br> - `eq` - Equal, строго равен ширине таргета. |
+| dropDownClassName | `string` | - |  |
+| contentRender | `(option: { label: ItemId; value?: ItemId; contentRenderProps?: T; }) => ReactNode` | - |  |
+| filterFn | `(option: { label: ItemId; value?: ItemId; contentRenderProps?: T; }) => boolean` | - |  |
+| searchable | `boolean` | - |  |
+| footer | `ReactNode ;` | - | Кастомизируемый элемент в конце списка |
+| footerActiveElementsRefs | `RefObject<HTMLElement>[]` | - | Список ссылок на кастомные элементы, помещенные в специальную секцию внизу списка |
+| selection | `SelectionSingleState \| SelectionMultipleState` | - |  |
+| scrollRef | `RefObject<HTMLElement>` | - | Ссылка на элемент, обозначающий самый конец прокручиваемого списка |
+| scrollContainerRef | `RefObject<HTMLElement>` | - | Ссылка на контейнер, который скроллится |
+| dataFiltered | `boolean` | - |  |
+| dataError | `boolean` | - |  |
+| noDataState | `EmptyStateProps` | - | Экран при отстутствии данных |
+| noResultsState | `EmptyStateProps` | - | Экран при отстутствии результатов поиска или фильтров |
+| errorDataState | `EmptyStateProps` | - | Экран при ошибке запроса |
+| onChange | `OnChangeHandler<any>` | - | Controlled обработчик измения состояния |
+| value | `ItemId[]` | - | Controlled состояние |
+| defaultValue | `ItemId[]` | - | Начальное состояние |
+| valueRender | `(option?: BaseOption<T>[]) => ReactNode` | - | Колбек формирующий отображение выбранного значения. Принимает выбранное значение. По умолчанию для отображения используется FilterOption.label |
 ## ChipChoice.Date
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
+| label | `string` | - | Лейбл |
+| disabled | `boolean` | - | Деактивирован ли компонент |
+| loading | `boolean` | - | Состояние загрузки |
+| icon | `ReactElement<any, string \| JSXElementConstructor<any>>` | - | Иконка |
+| className | `string` | - | CSS-класс |
+| tabIndex | `number` | - | HTML tab index |
+| size | enum Size: `"xs"`, `"s"`, `"m"`, `"l"` | - | Размер |
+| onClick | `MouseEventHandler<HTMLButtonElement \| HTMLDivElement>` | - | Колбек обработки клика |
+| showClearButton | `boolean` | true | Отображение кнопки очистки значения |
+| placement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | - | Расположение выпадающего меню |
+| widthStrategy | enum PopoverWidthStrategy: `"auto"`, `"gte"`, `"eq"` | gte | Стратегия управления шириной контейнера поповера <br> - `auto` - соответствует ширине контента, <br> - `gte` - Great Than or Equal, равен ширине таргета или больше ее, если контент в поповере шире, <br> - `eq` - Equal, строго равен ширине таргета. |
+| dropDownClassName | `string` | - |  |
+| value | `Date` | - | Значение компонента |
+| defaultValue | `Date` | - | Значение компонента по-умолчанию |
+| onChange | `(value: Date) => void` | - | Колбек смены значения |
+| valueRender | `(value?: Date) => ReactNode` | - | Колбек формирующий строковое представление выбранного значения. Принимает выбранное значение |
 ## ChipChoice.DateRange
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
+| label | `string` | - | Лейбл |
+| disabled | `boolean` | - | Деактивирован ли компонент |
+| loading | `boolean` | - | Состояние загрузки |
+| icon | `ReactElement<any, string \| JSXElementConstructor<any>>` | - | Иконка |
+| className | `string` | - | CSS-класс |
+| tabIndex | `number` | - | HTML tab index |
+| size | enum Size: `"xs"`, `"s"`, `"m"`, `"l"` | - | Размер |
+| onClick | `MouseEventHandler<HTMLButtonElement \| HTMLDivElement>` | - | Колбек обработки клика |
+| showClearButton | `boolean` | true | Отображение кнопки очистки значения |
+| placement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | - | Расположение выпадающего меню |
+| widthStrategy | enum PopoverWidthStrategy: `"auto"`, `"gte"`, `"eq"` | gte | Стратегия управления шириной контейнера поповера <br> - `auto` - соответствует ширине контента, <br> - `gte` - Great Than or Equal, равен ширине таргета или больше ее, если контент в поповере шире, <br> - `eq` - Equal, строго равен ширине таргета. |
+| dropDownClassName | `string` | - |  |
+| value | `Range` | - | Значение компонента |
+| defaultValue | `Range` | - | Значение компонента по умолчанию |
+| onChange | `(value: Range) => void` | - | Колбек смены значения |
+| valueRender | `(value?: Range) => ReactNode` | - | Колбек формирующий строковое представление выбранного значения. Принимает массив выбранных значений |
 ## isAccordionOption
 ### Props
 | name | type | default value | description |
@@ -139,6 +264,14 @@ import { PlaceholderSVG } from '@snack-uikit/icons';
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
+| filters* | `OmitBetter<ChipChoiceProps, "size" \| "onChange" \| "value" \| "defaultValue">[]` | - | Массив чипов |
+| value | `FiltersState` | - | Состояние фильтров |
+| defaultValue | `Partial<TState>` | - | Начальное состояние фильтров |
+| onChange | `(filters: TState) => void` | - | Колбек изменения состояния фильтров |
+| size | enum ChipChoiceRowSize: `"xs"`, `"s"`, `"m"` | s | Размер |
+| className | `string` | - | CSS-класс |
+| showClearAllButton | `boolean` | true | Скрыть/показать кнопку очиски |
+| clearAllButtonLabel | `string` | 'Clear all' | Текст кнопки очистки |
 
 
 [//]: DOCUMENTATION_SECTION_END

package/dist/components/ChipAssist/ChipAssist.js

@@ -26,5 +26,5 @@ export function ChipAssist(_a) {
         }
         onClick === null || onClick === void 0 ? void 0 : onClick(e);
     };
-    return (_jsxs("button", Object.assign({}, extractSupportProps(rest), { tabIndex: tabIndex, "data-size": size, "data-loading": loading || undefined, "data-variant": variant, disabled: !loading && disabled, onClick: handleClick, className: cn(styles.assistChip, className), children: [variant === VARIANT.IconBefore && !loading && (_jsx("span", { className: styles.icon, "data-test-id": CHIP_ASSIST_TEST_IDS.icon, children: icon })), loading && (_jsx("span", { className: styles.spinner, "data-test-id": CHIP_ASSIST_TEST_IDS.spinner, children: _jsx(Sun, { size: spinnerSize }) })), _jsx("span", { className: cn(styles.labelLayout, styles.label), "data-test-id": CHIP_ASSIST_TEST_IDS.label, children: label })] })));
+    return (_jsxs("button", Object.assign({ type: 'button' }, extractSupportProps(rest), { tabIndex: tabIndex, "data-size": size, "data-loading": loading || undefined, "data-variant": variant, disabled: !loading && disabled, onClick: handleClick, className: cn(styles.assistChip, className), children: [variant === VARIANT.IconBefore && !loading && (_jsx("span", { className: styles.icon, "data-test-id": CHIP_ASSIST_TEST_IDS.icon, children: icon })), loading && (_jsx("span", { className: styles.spinner, "data-test-id": CHIP_ASSIST_TEST_IDS.spinner, children: _jsx(Sun, { size: spinnerSize }) })), _jsx("span", { className: cn(styles.labelLayout, styles.label), "data-test-id": CHIP_ASSIST_TEST_IDS.label, children: label })] })));
 }

package/dist/components/ChipChoice/components/ChipChoiceMultiple.js

@@ -21,16 +21,17 @@ import { kindFlattenOptions } from '../utils';
 import { transformOptionsToItems } from '../utils/options';
 import { ChipChoiceBase } from './ChipChoiceBase';
 const defaultMultiValueLabelFormatter = ({ value, total, allLabel }) => {
-    if (value.length === 0 || value.length === total) {
+    const len = value.length;
+    if ([0, total].includes(len) && total !== len) {
         return allLabel;
     }
-    if (value.length === 1) {
+    if (len === 1) {
         return value[0].label;
     }
-    return `${value.length.toString()}/${total}`;
+    return `${len.toString()}/${total}`;
 };
 export function ChipChoiceMultiple(_a) {
-    var { value: valueProp, defaultValue, options, onChange: onChangeProp, valueRender, size = SIZE.S, label, searchable, contentRender, dropDownClassName, showClearButton } = _a, rest = __rest(_a, ["value", "defaultValue", "options", "onChange", "valueRender", "size", "label", "searchable", "contentRender", "dropDownClassName", "showClearButton"]);
+    var { value: valueProp, defaultValue, options, onChange: onChangeProp, valueRender, size = SIZE.S, label, searchable, contentRender, dropDownClassName, showClearButton = true } = _a, rest = __rest(_a, ["value", "defaultValue", "options", "onChange", "valueRender", "size", "label", "searchable", "contentRender", "dropDownClassName", "showClearButton"]);
     const [value, setValue] = useValueControl({
         value: valueProp,
         defaultValue,
@@ -83,5 +84,5 @@ export function ChipChoiceMultiple(_a) {
                 value: searchValue,
                 onChange: setSearchValue,
             }
-            : undefined, children: _jsx(ChipChoiceBase, Object.assign({}, rest, { ref: chipRef, onClearButtonClick: clearValue, value: value, showClearButton: showClearButton && !(Array.isArray(value) && [0, Object.keys(flattenOptions).length].includes(value.length)), valueToRender: valueToRender, label: label, loading: rest.loading, size: size, onKeyDown: handleOnKeyDown() })) })));
+            : undefined, children: _jsx(ChipChoiceBase, Object.assign({}, rest, { ref: chipRef, onClearButtonClick: clearValue, value: value, showClearButton: showClearButton && !(Array.isArray(value) && [0].includes(value.length)), valueToRender: valueToRender, label: label, loading: rest.loading, size: size, onKeyDown: handleOnKeyDown() })) })));
 }

package/dist/components/ChipChoice/index.d.ts

@@ -1,5 +1,5 @@
 import { ChipChoiceCustom, ChipChoiceCustomProps, ChipChoiceDate, ChipChoiceDateProps, ChipChoiceDateRange, ChipChoiceDateRangeProps, ChipChoiceMultiple, ChipChoiceSingle, CustomContentRenderProps } from './components';
-export type { FilterOption, ChipChoiceMultipleProps, ChipChoiceSingleProps } from './types';
+export type { FilterOption, ChipChoiceMultipleProps, ChipChoiceSingleProps, ContentRenderProps } from './types';
 export type { ChipChoiceCustomProps, ChipChoiceDateProps, ChipChoiceDateRangeProps, CustomContentRenderProps };
 export declare namespace ChipChoice {
     const Custom: typeof ChipChoiceCustom;

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Chips",
-  "version": "0.13.0",
+  "version": "0.13.1",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -33,10 +33,10 @@
   "scripts": {},
   "dependencies": {
     "@snack-uikit/button": "0.17.1",
-    "@snack-uikit/calendar": "0.7.7",
+    "@snack-uikit/calendar": "0.7.8",
     "@snack-uikit/dropdown": "0.2.2",
     "@snack-uikit/icons": "0.20.1",
-    "@snack-uikit/list": "0.11.1",
+    "@snack-uikit/list": "0.11.2",
     "@snack-uikit/loaders": "0.5.2",
     "@snack-uikit/utils": "3.3.0",
     "classnames": "2.3.2",
@@ -50,5 +50,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "bf1e1f3cfabccc1ee288c18722e33009bd001798"
+  "gitHead": "17bfcf1150776cd35c77d9cca8f45dde97472bf1"
 }

package/src/components/ChipAssist/ChipAssist.tsx

@@ -42,6 +42,7 @@ export function ChipAssist({
 
   return (
     <button
+      type='button'
       {...extractSupportProps(rest)}
       tabIndex={tabIndex}
       data-size={size}

package/src/components/ChipChoice/components/ChipChoiceMultiple.tsx

@@ -19,15 +19,17 @@ export type ChipChoiceMultipleValueFormatterProps<T extends ContentRenderProps =
 };
 
 const defaultMultiValueLabelFormatter = ({ value, total, allLabel }: ChipChoiceMultipleValueFormatterProps): ItemId => {
-  if (value.length === 0 || value.length === total) {
+  const len = value.length;
+
+  if ([0, total].includes(len) && total !== len) {
     return allLabel;
   }
 
-  if (value.length === 1) {
+  if (len === 1) {
     return value[0].label;
   }
 
-  return `${value.length.toString()}/${total}`;
+  return `${len.toString()}/${total}`;
 };
 
 export function ChipChoiceMultiple<T extends ContentRenderProps = ContentRenderProps>({
@@ -41,7 +43,7 @@ export function ChipChoiceMultiple<T extends ContentRenderProps = ContentRenderP
   searchable,
   contentRender,
   dropDownClassName,
-  showClearButton,
+  showClearButton = true,
   ...rest
 }: ChipChoiceMultipleProps<T>) {
   const [value, setValue] = useValueControl<SelectionSingleValueType[]>({
@@ -143,9 +145,7 @@ export function ChipChoiceMultiple<T extends ContentRenderProps = ContentRenderP
         ref={chipRef}
         onClearButtonClick={clearValue}
         value={value}
-        showClearButton={
-          showClearButton && !(Array.isArray(value) && [0, Object.keys(flattenOptions).length].includes(value.length))
-        }
+        showClearButton={showClearButton && !(Array.isArray(value) && [0].includes(value.length))}
         valueToRender={valueToRender}
         label={label}
         loading={rest.loading}

package/src/components/ChipChoice/index.ts

@@ -10,7 +10,7 @@ import {
   CustomContentRenderProps,
 } from './components';
 
-export type { FilterOption, ChipChoiceMultipleProps, ChipChoiceSingleProps } from './types';
+export type { FilterOption, ChipChoiceMultipleProps, ChipChoiceSingleProps, ContentRenderProps } from './types';
 export type { ChipChoiceCustomProps, ChipChoiceDateProps, ChipChoiceDateRangeProps, CustomContentRenderProps };
 
 export namespace ChipChoice {