@cloud-ru/uikit-product-mobile-chips 0.8.36 → 0.8.37

package/dist/esm/components/MobileChipChoiceRow/index.js

@@ -0,0 +1,2 @@
+export * from './MobileChipChoiceRow';
+export { hasFilterBeenApplied } from '@snack-uikit/chips';

package/dist/esm/components/MobileChipChoiceRow/styles.module.css

@@ -0,0 +1,28 @@
+.chipChoiceRow{
+  display:flex;
+  flex-wrap:wrap;
+  counter-axis-spacing:var(--space-chips-filter-row-gap, 4px);
+  gap:var(--space-chips-filter-row-gap, 4px);
+}
+
+.pinnedItems{
+  gap:var(--space-chips-filter-row-gap, 4px);
+  display:flex;
+  flex-wrap:wrap;
+  min-width:0;
+}
+
+.controlWrapper{
+  gap:var(--space-chips-choice-row-control-wrapper-gap, 8px);
+  display:flex;
+  flex-wrap:nowrap;
+}
+
+.divider{
+  align-self:stretch;
+  height:auto;
+}
+
+.addButtonWrapper{
+  display:inline-flex;
+}

package/dist/esm/components/MobileChipChoiceRow/types.d.ts

@@ -0,0 +1,36 @@
+import { ValueOf } from '@snack-uikit/utils';
+import { MobileChipChoiceCustomProps, MobileChipChoiceDateProps, MobileChipChoiceDateRangeProps, MobileChipChoiceTimeProps } from '../MobileChipChoice/components';
+import { CHIP_CHOICE_TYPE } from '../MobileChipChoice/constants';
+import { MobileChipChoiceMultipleProps, MobileChipChoiceSingleProps } from '../MobileChipChoice/types';
+import { CHIP_CHOICE_ROW_SIZE } from './constants';
+export type ChipChoiceRowSize = ValueOf<typeof CHIP_CHOICE_ROW_SIZE>;
+type ChipChoiceMultipleType = {
+    type: typeof CHIP_CHOICE_TYPE.Multiple;
+} & MobileChipChoiceMultipleProps;
+type ChipChoiceSingleType = {
+    type: typeof CHIP_CHOICE_TYPE.Single;
+} & MobileChipChoiceSingleProps;
+type ChipChoiceDateType = {
+    type: typeof CHIP_CHOICE_TYPE.Date;
+} & MobileChipChoiceDateProps;
+type ChipChoiceDateTimeType = {
+    type: typeof CHIP_CHOICE_TYPE.DateTime;
+} & Omit<MobileChipChoiceDateProps, 'mode'> & {
+    mode: 'date-time';
+    showSeconds?: boolean;
+};
+type ChipChoiceDateRangeType = {
+    type: typeof CHIP_CHOICE_TYPE.DateRange;
+} & MobileChipChoiceDateRangeProps;
+type ChipChoiceTimeType = {
+    type: typeof CHIP_CHOICE_TYPE.Time;
+} & MobileChipChoiceTimeProps;
+type ChipChoiceCustomType = {
+    type: typeof CHIP_CHOICE_TYPE.Custom;
+} & MobileChipChoiceCustomProps;
+export type ChipChoiceProps = {
+    id: string;
+} & (ChipChoiceMultipleType | ChipChoiceSingleType | ChipChoiceDateType | ChipChoiceDateTimeType | ChipChoiceDateRangeType | ChipChoiceTimeType | ChipChoiceCustomType);
+export type OmitBetter<T, K extends keyof any> = T extends any ? Pick<T, Exclude<keyof T, K>> : never;
+export type FilterValue = Parameters<ChipChoiceProps['onChange']>[number];
+export {};

package/dist/esm/components/MobileChipChoiceRow/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,3 @@
+export * from './AdaptiveChips';
+export * from './MobileChipChoice';
+export * from './MobileChipChoiceRow';

package/dist/esm/components/index.js

@@ -0,0 +1,3 @@
+export * from './AdaptiveChips';
+export * from './MobileChipChoice';
+export * from './MobileChipChoiceRow';

package/dist/esm/constants.d.ts

@@ -0,0 +1,43 @@
+export declare const SIZE: {
+    readonly Xs: "xs";
+    readonly S: "s";
+    readonly M: "m";
+    readonly L: "l";
+};
+export declare const BUTTON_SIZE: {
+    readonly Xxs: "xxs";
+    readonly Xs: "xs";
+};
+export declare const VARIANT: {
+    readonly LabelOnly: "label-only";
+    readonly IconBefore: "icon-before";
+};
+export declare const CHIP_ASSIST_TEST_IDS: {
+    icon: string;
+    spinner: string;
+    label: string;
+};
+export declare const CHIP_CHOICE_TEST_IDS: {
+    icon: string;
+    label: string;
+    spinner: string;
+    value: string;
+    clearButton: string;
+    droplist: string;
+    footer: string;
+    cancelButton: string;
+    approveButton: string;
+};
+export declare const CHIP_CHOICE_ROW_IDS: {
+    clearButton: string;
+    addButton: string;
+    addButtonTooltip: string;
+    addButtonOption: string;
+};
+export declare const CHIP_TOGGLE_TEST_IDS: {
+    input: string;
+    icon: string;
+    spinner: string;
+    label: string;
+};
+export declare const DEFAULT_EMPTY_VALUE = "\u2014";

package/dist/esm/constants.js

@@ -0,0 +1,43 @@
+export const SIZE = {
+    Xs: 'xs',
+    S: 's',
+    M: 'm',
+    L: 'l',
+};
+export const BUTTON_SIZE = {
+    Xxs: 'xxs',
+    Xs: 'xs',
+};
+export const VARIANT = {
+    LabelOnly: 'label-only',
+    IconBefore: 'icon-before',
+};
+export const CHIP_ASSIST_TEST_IDS = {
+    icon: 'chip-assist__icon',
+    spinner: 'chip-assist__spinner',
+    label: 'chip-assist__label',
+};
+export const CHIP_CHOICE_TEST_IDS = {
+    icon: 'chip-choice__icon',
+    label: 'chip-choice__label',
+    spinner: 'chip-choice__spinner',
+    value: 'chip-choice__value',
+    clearButton: 'chip-choice__clear-button',
+    droplist: 'chip-choice__droplist',
+    footer: 'chip-choice__footer',
+    cancelButton: 'chip-choice__cancel-button',
+    approveButton: 'chip-choice__approve-button',
+};
+export const CHIP_CHOICE_ROW_IDS = {
+    clearButton: 'chip-choice-row__clear-button',
+    addButton: 'chip-choice-row__add-button',
+    addButtonTooltip: 'chip-choice-row__add-button-tooltip',
+    addButtonOption: 'chip-choice-row__add-button-option',
+};
+export const CHIP_TOGGLE_TEST_IDS = {
+    input: 'chip-toggle__input',
+    icon: 'chip-toggle__icon',
+    spinner: 'chip-toggle__spinner',
+    label: 'chip-toggle__label',
+};
+export const DEFAULT_EMPTY_VALUE = '—';

package/dist/esm/helperComponents/ButtonClearValue/ButtonClearValue.d.ts

@@ -0,0 +1,11 @@
+import { KeyboardEventHandler, MouseEventHandler } from 'react';
+import { ButtonSize } from '../../types';
+type ButtonClearValueProps = {
+    size: ButtonSize;
+    onClick: MouseEventHandler<HTMLButtonElement>;
+    onKeyDown?: KeyboardEventHandler<HTMLButtonElement>;
+    tabIndex?: number;
+    'data-test-id'?: string;
+};
+export declare const ButtonClearValue: import("react").ForwardRefExoticComponent<ButtonClearValueProps & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/esm/helperComponents/ButtonClearValue/ButtonClearValue.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { CrossSVG } from '@sbercloud/uikit-product-icons';
+import { BUTTON_SIZE } from '../../constants';
+import styles from './styles.module.css';
+export const ButtonClearValue = forwardRef(({ size, onClick, tabIndex = -1, onKeyDown, 'data-test-id': dataTestId }, ref) => {
+    const handleClick = event => {
+        event.stopPropagation();
+        onClick(event);
+    };
+    return (_jsxs("button", { className: styles.buttonClearValue, "data-size": size, onClick: handleClick, "data-test-id": dataTestId, type: 'button', ref: ref, onKeyDown: onKeyDown, tabIndex: tabIndex, children: [size === BUTTON_SIZE.Xxs && _jsx(CrossSVG, { size: 16 }), size === BUTTON_SIZE.Xs && _jsx(CrossSVG, {})] }));
+});

package/dist/esm/helperComponents/ButtonClearValue/index.d.ts

@@ -0,0 +1 @@
+export * from './ButtonClearValue';

package/dist/esm/helperComponents/ButtonClearValue/index.js

@@ -0,0 +1 @@
+export * from './ButtonClearValue';

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

@@ -0,0 +1,43 @@
+.buttonClearValue{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  margin:0;
+  padding:0;
+  color:var(--sys-neutral-text-light, #8b8e9b);
+  background-color:transparent;
+  border:none;
+}
+.buttonClearValue[data-size=xxs]{
+  width:var(--size-chip-choice-button-clear-value-xxs, 16px);
+  height:var(--size-chip-choice-button-clear-value-xxs, 16px);
+  border-radius:var(--radius-chip-choice-button-clear-value-xxs, 16px);
+}
+.buttonClearValue[data-size=xxs] svg{
+  width:var(--size-icon-container-xs, 16px) !important;
+  height:var(--size-icon-container-xs, 16px) !important;
+}
+.buttonClearValue[data-size=xs]{
+  width:var(--size-chip-choice-button-clear-value-xs, 24px);
+  height:var(--size-chip-choice-button-clear-value-xs, 24px);
+  border-radius:var(--radius-chip-choice-button-clear-value-xs, 24px);
+}
+.buttonClearValue[data-size=xs] svg{
+  width:var(--size-icon-container-s, 24px) !important;
+  height:var(--size-icon-container-s, 24px) !important;
+}
+.buttonClearValue:hover{
+  cursor:pointer;
+  color:var(--sys-neutral-text-support, #6d707f);
+}
+.buttonClearValue:focus-visible{
+  outline-width:var(--border-state-focus-s-border-width, 2px);
+  outline-style:var(--border-state-focus-s-border-style, solid);
+  outline-color:var(--border-state-focus-s-border-color, );
+  color:var(--sys-neutral-text-support, #6d707f);
+  outline-color:var(--sys-available-complementary, #1c1c24);
+  outline-offset:var(--spacing-state-focus-offset, 2px);
+}
+.buttonClearValue:active{
+  color:var(--sys-neutral-text-main, #41424e);
+}

package/dist/esm/helperComponents/ItemContent/ItemContent.d.ts

@@ -0,0 +1,9 @@
+import { WithSupportProps } from '@snack-uikit/utils';
+export type ItemContentProps = WithSupportProps<{
+    option: string | number;
+    caption?: string;
+    description?: string;
+    disabled?: boolean;
+    className?: string;
+}>;
+export declare function ItemContent({ caption, description, option, className, disabled, ...rest }: ItemContentProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/helperComponents/ItemContent/ItemContent.js

@@ -0,0 +1,19 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { extractSupportProps } from '@snack-uikit/utils';
+import styles from './styles.module.css';
+export function ItemContent(_a) {
+    var { caption, description, option, className, disabled } = _a, rest = __rest(_a, ["caption", "description", "option", "className", "disabled"]);
+    return (_jsxs("div", Object.assign({ className: cn(styles.content, className) }, extractSupportProps(rest), { "data-size": 'l', "data-disabled": disabled || undefined, children: [_jsxs("div", { className: styles.headline, children: [_jsx("div", { className: styles.label, "data-test-id": 'list__base-item-option', children: option }), caption && _jsx("span", { className: styles.caption, children: caption })] }), description && (_jsx("div", { className: styles.description, "data-test-id": 'list__base-item-description', children: description }))] })));
+}

package/dist/esm/helperComponents/ItemContent/index.d.ts

@@ -0,0 +1 @@
+export * from './ItemContent';

package/dist/esm/helperComponents/ItemContent/index.js

@@ -0,0 +1 @@
+export * from './ItemContent';

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

@@ -0,0 +1,122 @@
+.headline{
+  display:flex;
+}
+
+.label{
+  overflow:hidden;
+  flex:1;
+  color:var(--sys-neutral-text-main, #41424e);
+}
+
+.caption{
+  overflow:hidden;
+  color:var(--sys-neutral-text-light, #8b8e9b);
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
+
+.description{
+  color:var(--sys-neutral-text-support, #6d707f);
+}
+
+.content{
+  overflow:hidden;
+  flex-grow:1;
+  flex-shrink:1;
+  box-sizing:border-box;
+}
+.content[data-size=s] .headline{
+  gap:var(--space-drop-list-item-s-container-headline-gap, 8px);
+  min-height:var(--size-drop-list-item-headline, 24px);
+}
+.content[data-size=s] .label{
+  font-family:var(--sans-body-s-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-s-font-weight, Regular);
+  line-height:var(--sans-body-s-line-height, 16px);
+  font-size:var(--sans-body-s-font-size, 12px);
+  letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
+  display:flex;
+  align-items:center;
+}
+.content[data-size=s] .caption{
+  font-family:var(--sans-body-s-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-s-font-weight, Regular);
+  line-height:var(--sans-body-s-line-height, 16px);
+  font-size:var(--sans-body-s-font-size, 12px);
+  letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
+}
+.content[data-size=s] .description{
+  font-family:var(--sans-body-s-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-s-font-weight, Regular);
+  line-height:var(--sans-body-s-line-height, 16px);
+  font-size:var(--sans-body-s-font-size, 12px);
+  letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
+}
+.content[data-size=m] .headline{
+  gap:var(--space-drop-list-item-m-container-headline-gap, 8px);
+  min-height:var(--size-drop-list-item-headline, 24px);
+}
+.content[data-size=m] .label{
+  font-family:var(--sans-body-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-m-font-weight, Regular);
+  line-height:var(--sans-body-m-line-height, 20px);
+  font-size:var(--sans-body-m-font-size, 14px);
+  letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
+  display:flex;
+  align-items:center;
+}
+.content[data-size=m] .caption{
+  font-family:var(--sans-body-s-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-s-font-weight, Regular);
+  line-height:var(--sans-body-s-line-height, 16px);
+  font-size:var(--sans-body-s-font-size, 12px);
+  letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
+}
+.content[data-size=m] .description{
+  font-family:var(--sans-body-s-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-s-font-weight, Regular);
+  line-height:var(--sans-body-s-line-height, 16px);
+  font-size:var(--sans-body-s-font-size, 12px);
+  letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
+}
+.content[data-size=l] .headline{
+  gap:var(--space-drop-list-item-l-container-headline-gap, 8px);
+  min-height:var(--size-drop-list-item-headline, 24px);
+}
+.content[data-size=l] .label{
+  font-family:var(--sans-body-l-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-l-font-weight, Regular);
+  line-height:var(--sans-body-l-line-height, 24px);
+  font-size:var(--sans-body-l-font-size, 16px);
+  letter-spacing:var(--sans-body-l-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-l-paragraph-spacing, 8.8px);
+  display:flex;
+  align-items:center;
+}
+.content[data-size=l] .caption{
+  font-family:var(--sans-body-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-m-font-weight, Regular);
+  line-height:var(--sans-body-m-line-height, 20px);
+  font-size:var(--sans-body-m-font-size, 14px);
+  letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
+}
+.content[data-size=l] .description{
+  font-family:var(--sans-body-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-m-font-weight, Regular);
+  line-height:var(--sans-body-m-line-height, 20px);
+  font-size:var(--sans-body-m-font-size, 14px);
+  letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
+}
+.content[data-disabled] .label,
+.content[data-disabled] .description,
+.content[data-disabled] .caption{
+  color:var(--sys-neutral-text-disabled, #aaaebd);
+}

package/dist/esm/helperComponents/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ButtonClearValue';
+export * from './ItemContent';

package/dist/esm/helperComponents/index.js

@@ -0,0 +1,2 @@
+export * from './ButtonClearValue';
+export * from './ItemContent';

package/dist/esm/index.d.ts

@@ -0,0 +1 @@
+export * from './components';

package/dist/esm/index.js

@@ -0,0 +1 @@
+export * from './components';

package/dist/esm/types.d.ts

@@ -0,0 +1,20 @@
+import { ReactElement } from 'react';
+import { ValueOf } from '@snack-uikit/utils';
+import { BUTTON_SIZE, SIZE, VARIANT } from './constants';
+export type Size = ValueOf<typeof SIZE>;
+export type ButtonSize = ValueOf<typeof BUTTON_SIZE>;
+export type Variant = ValueOf<typeof VARIANT>;
+export type BaseChipProps = {
+    /** Лейбл */
+    label: string;
+    /** Деактивирован ли компонент */
+    disabled?: boolean;
+    /** Состояние загрузки */
+    loading?: boolean;
+    /** Иконка */
+    icon?: ReactElement;
+    /** CSS-класс */
+    className?: string;
+    /** HTML tab index */
+    tabIndex?: number;
+};

package/dist/esm/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloud-ru/uikit-product-mobile-chips",
   "title": "Mobile Chips",
-  "version": "0.8.36",
+  "version": "0.8.37",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -30,16 +30,17 @@
     "name": "Akhremenko Grigorii",
     "url": "https://github.com/AGrigorii"
   },
+  "contributors": [],
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public"
   },
   "scripts": {},
   "dependencies": {
-    "@cloud-ru/uikit-product-icons": "15.1.1",
-    "@cloud-ru/uikit-product-mobile-dropdown": "0.9.21",
-    "@cloud-ru/uikit-product-mobile-tooltip": "0.4.65",
-    "@cloud-ru/uikit-product-utils": "7.0.0",
+    "@cloud-ru/uikit-product-icons": "15.1.2",
+    "@cloud-ru/uikit-product-mobile-dropdown": "0.9.22",
+    "@cloud-ru/uikit-product-mobile-tooltip": "0.4.66",
+    "@cloud-ru/uikit-product-utils": "7.0.1",
     "@snack-uikit/button": "0.19.15",
     "@snack-uikit/calendar": "0.13.0",
     "@snack-uikit/chips": "0.28.0",
@@ -56,5 +57,5 @@
   "peerDependencies": {
     "@cloud-ru/uikit-product-locale": "*"
   },
-  "gitHead": "e8bd79bc92b26a8f52611972eec98a867536ccd3"
+  "gitHead": "9c11b1e33e716c874534a1c162266c8591f2ed03"
 }