@snack-uikit/chips 0.11.10-preview-778a0ef6.0 → 0.12.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.12.0 (2024-02-26)
+
+
+### BREAKING CHANGES
+
+
+* **FF-4324:** change default label formattes ([ecccf01](https://github.com/cloud-ru-tech/snack-uikit/commit/ecccf01237bc58ed68e84bb2522fb4fcfd6a33e9))
+
+
+
+
 ## 0.11.9 (2024-02-23)
 
 ### Only dependencies have been changed

package/dist/components/ChipChoice/components/ChipChoiceCustom/ChipChoiceCustom.js

@@ -71,5 +71,5 @@ export function ChipChoiceCustom(_a) {
         }
     };
     const showClearButton = showClearButtonProp && (value instanceof Date || Boolean(value === null || value === void 0 ? void 0 : value.length));
-    return (_jsx(Droplist, { trigger: 'click', open: isDroplistOpened, firstElementRefCallback: firstElementRefCallback, onOpenChange: onOpenChangeHandler, onFocusLeave: handleDroplistFocusLeave, triggerClassName: styles.triggerClassName, widthStrategy: widthStrategy, placement: placement, size: DROPLIST_SIZE_MAP[size], "data-test-id": CHIP_CHOICE_TEST_IDS.droplist, triggerElement: _jsxs("div", Object.assign({}, extractSupportProps(rest), { role: 'button', ref: triggerElementRef, className: cn(styles.choiceChip, className), "data-size": size, "data-variant": variant, "data-loading": loading || undefined, "data-test-id": testId || undefined, "data-disabled": (!loading && disabled) || undefined, onClick: handleChipClick, onKeyDown: handleChipKeyDown, tabIndex: tabIndex, children: [variant === VARIANT.IconBefore && (_jsx("span", { className: styles.icon, "data-test-id": CHIP_CHOICE_TEST_IDS.icon, children: icon })), _jsxs("span", { className: styles.labelLayout, children: [label && (_jsx("span", { className: styles.label, "data-test-id": CHIP_CHOICE_TEST_IDS.label, children: label })), loading ? (_jsx("span", { className: styles.spinner, "data-test-id": CHIP_CHOICE_TEST_IDS.spinner, children: _jsx(Sun, { size: spinnerSize }) })) : (_jsx("span", { className: styles.value, "data-test-id": CHIP_CHOICE_TEST_IDS.value, children: valueToRender }))] }), !disabled && !loading && showClearButton && (_jsx(ButtonClearValue, { size: BUTTON_CLEAR_VALUE_SIZE_MAP[size], onClick: handleClearButtonClick, "data-test-id": CHIP_CHOICE_TEST_IDS.clearButton, onKeyDown: handleClearButtonKeyDown, ref: clearButtonRef }))] })), children: typeof children === 'function' ? children({ handleDroplistItemKeyDown, closeDroplist }) : children }));
+    return (_jsx(Droplist, { trigger: 'click', open: isDroplistOpened, firstElementRefCallback: firstElementRefCallback, onOpenChange: onOpenChangeHandler, onFocusLeave: handleDroplistFocusLeave, triggerClassName: styles.triggerClassName, widthStrategy: widthStrategy, placement: placement, size: DROPLIST_SIZE_MAP[size], "data-test-id": CHIP_CHOICE_TEST_IDS.droplist, triggerElement: _jsxs("div", Object.assign({}, extractSupportProps(rest), { role: 'button', ref: triggerElementRef, className: cn(styles.choiceChip, className), "data-size": size, "data-variant": variant, "data-loading": loading || undefined, "data-test-id": testId || undefined, "data-disabled": (!loading && disabled) || undefined, onClick: handleChipClick, onKeyDown: handleChipKeyDown, tabIndex: tabIndex, children: [variant === VARIANT.IconBefore && (_jsx("span", { className: styles.icon, "data-test-id": CHIP_CHOICE_TEST_IDS.icon, children: icon })), _jsxs("span", { className: styles.labelLayout, children: [label && (_jsx("span", { className: styles.label, "data-test-id": CHIP_CHOICE_TEST_IDS.label, children: label + ': ' })), loading ? (_jsx("span", { className: styles.spinner, "data-test-id": CHIP_CHOICE_TEST_IDS.spinner, children: _jsx(Sun, { size: spinnerSize }) })) : (_jsx("span", { className: styles.value, "data-test-id": CHIP_CHOICE_TEST_IDS.value, children: valueToRender }))] }), !disabled && !loading && showClearButton && (_jsx(ButtonClearValue, { size: BUTTON_CLEAR_VALUE_SIZE_MAP[size], onClick: handleClearButtonClick, "data-test-id": CHIP_CHOICE_TEST_IDS.clearButton, onKeyDown: handleClearButtonKeyDown, ref: clearButtonRef }))] })), children: typeof children === 'function' ? children({ handleDroplistItemKeyDown, closeDroplist }) : children }));
 }

package/dist/components/ChipChoice/components/ChipChoiceDate.js

@@ -12,15 +12,17 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useUncontrolledProp } from 'uncontrollable';
 import { Calendar } from '@snack-uikit/calendar';
-import { DEFAULT_EMPTY_VALUE, SIZE } from '../../../constants';
+import { useLocale } from '@snack-uikit/locale';
+import { SIZE } from '../../../constants';
 import { CALENDAR_SIZE_MAP } from '../constants';
 import { ChipChoiceCustom } from './ChipChoiceCustom';
 export function ChipChoiceDate(_a) {
     var { size = SIZE.S, value, defaultValue, onChange, valueFormatter } = _a, rest = __rest(_a, ["size", "value", "defaultValue", "onChange", "valueFormatter"]);
     const [selectedValue, setSelectedValue] = useUncontrolledProp(value, defaultValue, onChange);
+    const { t } = useLocale('Chips');
     const valueToRender = valueFormatter
         ? valueFormatter(selectedValue)
-        : (selectedValue && new Date(selectedValue).toLocaleDateString()) || DEFAULT_EMPTY_VALUE;
+        : (selectedValue && new Date(selectedValue).toLocaleDateString()) || t('allLabel');
     const clearValue = () => setSelectedValue(undefined);
     return (_jsx(ChipChoiceCustom, Object.assign({ onClearButtonClick: clearValue, value: selectedValue, valueToRender: valueToRender, size: size }, rest, { children: ({ closeDroplist }) => (_jsx(Calendar, { mode: 'date', size: CALENDAR_SIZE_MAP[size], value: selectedValue, onChangeValue: value => {
                 setSelectedValue(value);

package/dist/components/ChipChoice/components/ChipChoiceDateRange.js

@@ -12,19 +12,23 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useUncontrolledProp } from 'uncontrollable';
 import { Calendar } from '@snack-uikit/calendar';
+import { useLocale } from '@snack-uikit/locale';
 import { DEFAULT_EMPTY_VALUE, SIZE } from '../../../constants';
 import { CALENDAR_SIZE_MAP } from '../constants';
 import { ChipChoiceCustom } from './ChipChoiceCustom';
-function defaultRangeFormatter(value) {
+function defaultRangeFormatter({ value, allLabel }) {
     if (!value || !value.length)
-        return DEFAULT_EMPTY_VALUE;
+        return allLabel;
     const [from, to] = value;
     return `${from.toLocaleDateString()} ${DEFAULT_EMPTY_VALUE} ${to.toLocaleDateString()}`;
 }
 export function ChipChoiceDateRange(_a) {
     var { size = SIZE.S, value, defaultValue, onChange, valueFormatter } = _a, rest = __rest(_a, ["size", "value", "defaultValue", "onChange", "valueFormatter"]);
     const [selectedValue, setSelectedValue] = useUncontrolledProp(value, defaultValue, onChange);
-    const valueToRender = valueFormatter ? valueFormatter(selectedValue) : defaultRangeFormatter(selectedValue);
+    const { t } = useLocale('Chips');
+    const valueToRender = valueFormatter
+        ? valueFormatter(selectedValue)
+        : defaultRangeFormatter({ value: selectedValue, allLabel: t('allLabel') });
     const clearValue = () => setSelectedValue(undefined);
     return (_jsx(ChipChoiceCustom, Object.assign({ value: selectedValue, valueToRender: valueToRender, onClearButtonClick: clearValue, size: size }, rest, { children: ({ closeDroplist }) => (_jsx(Calendar, { mode: 'range', size: CALENDAR_SIZE_MAP[size], value: selectedValue, onChangeValue: range => {
                 setSelectedValue(range);

package/dist/components/ChipChoice/components/ChipChoiceSingle.js

@@ -14,14 +14,18 @@ import { createElement as _createElement } from "react";
 import { useMemo } from 'react';
 import { useUncontrolledProp } from 'uncontrollable';
 import { Droplist } from '@snack-uikit/droplist';
-import { DEFAULT_EMPTY_VALUE, SIZE } from '../../../constants';
-import { normalizeValueForSingleChoice } from '../utils';
+import { useLocale } from '@snack-uikit/locale';
+import { SIZE } from '../../../constants';
+import { defaultSingleValueFormatter, normalizeValueForSingleChoice } from '../utils';
 import { ChipChoiceCustom } from './ChipChoiceCustom';
 export function ChipChoiceSingle(_a) {
     var { value, defaultValue, options, onChange, valueFormatter, size = SIZE.S, 'data-test-id': dataTestId } = _a, rest = __rest(_a, ["value", "defaultValue", "options", "onChange", "valueFormatter", "size", 'data-test-id']);
     const [selectedValue, setSelectedValue] = useUncontrolledProp(normalizeValueForSingleChoice(options, value), normalizeValueForSingleChoice(options, defaultValue), onChange);
+    const { t } = useLocale('Chips');
     const selectedOption = useMemo(() => options.find(({ value }) => value === selectedValue), [options, selectedValue]);
-    const valueToRender = valueFormatter ? valueFormatter(selectedOption) : (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || DEFAULT_EMPTY_VALUE;
+    const valueToRender = valueFormatter
+        ? valueFormatter(selectedOption)
+        : defaultSingleValueFormatter({ value: selectedOption, allLabel: t('allLabel') });
     const clearValue = () => setSelectedValue(undefined);
     return (_jsx(ChipChoiceCustom, Object.assign({ onClearButtonClick: clearValue, value: selectedValue, valueToRender: valueToRender, "data-test-id": dataTestId, size: size }, rest, { children: ({ handleDroplistItemKeyDown, closeDroplist }) => options.map((_a) => {
             var { label, value } = _a, rest = __rest(_a, ["label", "value"]);

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

@@ -2,3 +2,8 @@ import { FilterOption } from './types';
 export declare const normalizeValueForMultiChoice: (options: FilterOption[], value?: string[]) => string[] | undefined;
 export declare const normalizeValueForSingleChoice: (options: FilterOption[], value?: string) => string | undefined;
 export declare const defaultMultiValueLabelFormatter: (value: FilterOption[], total: number) => string;
+export type ChipChoiceSingleValueFormatterProps = {
+    value?: FilterOption;
+    allLabel?: string;
+};
+export declare function defaultSingleValueFormatter({ value, allLabel }: ChipChoiceSingleValueFormatterProps): string | undefined;

package/dist/components/ChipChoice/utils.js

@@ -12,3 +12,7 @@ export const normalizeValueForSingleChoice = (options, value) => {
     return (_a = options.find(option => value === option.value)) === null || _a === void 0 ? void 0 : _a.value;
 };
 export const defaultMultiValueLabelFormatter = (value, total) => `${value.length.toString()}/${total}`;
+export function defaultSingleValueFormatter({ value, allLabel }) {
+    var _a;
+    return (_a = value === null || value === void 0 ? void 0 : value.label) !== null && _a !== void 0 ? _a : allLabel;
+}

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Chips",
-  "version": "0.11.10-preview-778a0ef6.0",
+  "version": "0.12.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -34,7 +34,7 @@
   "dependencies": {
     "@snack-uikit/button": "0.16.1",
     "@snack-uikit/calendar": "0.7.6",
-    "@snack-uikit/droplist": "0.13.8-preview-778a0ef6.0",
+    "@snack-uikit/droplist": "0.13.8",
     "@snack-uikit/icons": "0.20.1",
     "@snack-uikit/loaders": "0.5.1",
     "@snack-uikit/utils": "3.2.0",
@@ -44,5 +44,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "5fd0c610f0335d783d7ca2a1c4b1eae28edca5de"
+  "gitHead": "eca9622fe5915bb18e60c4eb7a195ebc04f19f9c"
 }

package/src/components/ChipChoice/components/ChipChoiceCustom/ChipChoiceCustom.tsx

@@ -155,7 +155,7 @@ export function ChipChoiceCustom({
           <span className={styles.labelLayout}>
             {label && (
               <span className={styles.label} data-test-id={CHIP_CHOICE_TEST_IDS.label}>
-                {label}
+                {label + ': '}
               </span>
             )}
 

package/src/components/ChipChoice/components/ChipChoiceDate.tsx

@@ -1,8 +1,9 @@
 import { useUncontrolledProp } from 'uncontrollable';
 
 import { Calendar } from '@snack-uikit/calendar';
+import { useLocale } from '@snack-uikit/locale';
 
-import { DEFAULT_EMPTY_VALUE, SIZE } from '../../../constants';
+import { SIZE } from '../../../constants';
 import { CALENDAR_SIZE_MAP } from '../constants';
 import { ChipChoiceCommonProps } from '../types';
 import { ChipChoiceCustom } from './ChipChoiceCustom';
@@ -28,9 +29,11 @@ export function ChipChoiceDate({
 }: ChipChoiceDateProps) {
   const [selectedValue, setSelectedValue] = useUncontrolledProp<Date>(value, defaultValue, onChange);
 
+  const { t } = useLocale('Chips');
+
   const valueToRender = valueFormatter
     ? valueFormatter(selectedValue)
-    : (selectedValue && new Date(selectedValue).toLocaleDateString()) || DEFAULT_EMPTY_VALUE;
+    : (selectedValue && new Date(selectedValue).toLocaleDateString()) || t('allLabel');
 
   const clearValue = () => setSelectedValue(undefined);
 

package/src/components/ChipChoice/components/ChipChoiceDateRange.tsx

@@ -1,6 +1,7 @@
 import { useUncontrolledProp } from 'uncontrollable';
 
 import { Calendar } from '@snack-uikit/calendar';
+import { useLocale } from '@snack-uikit/locale';
 
 import { DEFAULT_EMPTY_VALUE, SIZE } from '../../../constants';
 import { CALENDAR_SIZE_MAP } from '../constants';
@@ -20,8 +21,13 @@ export type ChipChoiceDateRangeProps = ChipChoiceCommonProps & {
   valueFormatter?(value?: Range): string;
 };
 
-function defaultRangeFormatter(value?: Range) {
-  if (!value || !value.length) return DEFAULT_EMPTY_VALUE;
+type DefaultRangeFormatterProps = {
+  value?: Range;
+  allLabel?: string;
+};
+
+function defaultRangeFormatter({ value, allLabel }: DefaultRangeFormatterProps) {
+  if (!value || !value.length) return allLabel;
 
   const [from, to] = value;
 
@@ -38,7 +44,11 @@ export function ChipChoiceDateRange({
 }: ChipChoiceDateRangeProps) {
   const [selectedValue, setSelectedValue] = useUncontrolledProp<Range>(value, defaultValue, onChange);
 
-  const valueToRender = valueFormatter ? valueFormatter(selectedValue) : defaultRangeFormatter(selectedValue);
+  const { t } = useLocale('Chips');
+
+  const valueToRender = valueFormatter
+    ? valueFormatter(selectedValue)
+    : defaultRangeFormatter({ value: selectedValue, allLabel: t('allLabel') });
 
   const clearValue = () => setSelectedValue(undefined);
 

package/src/components/ChipChoice/components/ChipChoiceSingle.tsx

@@ -2,10 +2,11 @@ import { useMemo } from 'react';
 import { useUncontrolledProp } from 'uncontrollable';
 
 import { Droplist } from '@snack-uikit/droplist';
+import { useLocale } from '@snack-uikit/locale';
 
-import { DEFAULT_EMPTY_VALUE, SIZE } from '../../../constants';
+import { SIZE } from '../../../constants';
 import { ChipChoiceCommonProps, FilterOption } from '../types';
-import { normalizeValueForSingleChoice } from '../utils';
+import { defaultSingleValueFormatter, normalizeValueForSingleChoice } from '../utils';
 import { ChipChoiceCustom } from './ChipChoiceCustom';
 
 export type ChipChoiceSingleProps = ChipChoiceCommonProps & {
@@ -37,9 +38,13 @@ export function ChipChoiceSingle({
     onChange,
   );
 
+  const { t } = useLocale('Chips');
+
   const selectedOption = useMemo(() => options.find(({ value }) => value === selectedValue), [options, selectedValue]);
 
-  const valueToRender = valueFormatter ? valueFormatter(selectedOption) : selectedOption?.label || DEFAULT_EMPTY_VALUE;
+  const valueToRender = valueFormatter
+    ? valueFormatter(selectedOption)
+    : defaultSingleValueFormatter({ value: selectedOption, allLabel: t('allLabel') });
 
   const clearValue = () => setSelectedValue(undefined);
 

package/src/components/ChipChoice/utils.ts

@@ -18,3 +18,12 @@ export const normalizeValueForSingleChoice = (options: FilterOption[], value?: s
 
 export const defaultMultiValueLabelFormatter = (value: FilterOption[], total: number): string =>
   `${value.length.toString()}/${total}`;
+
+export type ChipChoiceSingleValueFormatterProps = {
+  value?: FilterOption;
+  allLabel?: string;
+};
+
+export function defaultSingleValueFormatter({ value, allLabel }: ChipChoiceSingleValueFormatterProps) {
+  return value?.label ?? allLabel;
+}