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

package/dist/cjs/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/cjs/helperComponents/index.d.ts

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

package/dist/cjs/helperComponents/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ButtonClearValue"), exports);
+__exportStar(require("./ItemContent"), exports);

package/dist/cjs/index.d.ts

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

package/dist/cjs/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./components"), exports);

package/dist/cjs/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/cjs/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,6 @@
+import { WithLayoutType } from '@sbercloud/uikit-product-utils';
+import { ChipChoice, ChipChoiceRowProps, FiltersState } from '@snack-uikit/chips';
+export type AdaptiveChipChoiceRow<T extends FiltersState> = WithLayoutType<ChipChoiceRowProps<T>>;
+export declare function AdaptiveChipChoiceRow<T extends FiltersState>({ layoutType, ...props }: AdaptiveChipChoiceRow<T>): import("react/jsx-runtime").JSX.Element;
+export declare function useAdaptiveChipChoice({ layoutType }: WithLayoutType): typeof ChipChoice;
+export type { ChipChoiceRowProps };

package/dist/esm/components/AdaptiveChips/AdaptiveChips.js

@@ -0,0 +1,24 @@
+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 } from "react/jsx-runtime";
+import { ChipChoice, ChipChoiceRow } from '@snack-uikit/chips';
+import { MobileChipChoice } from '../MobileChipChoice';
+import { MobileChipChoiceRow } from '../MobileChipChoiceRow';
+export function AdaptiveChipChoiceRow(_a) {
+    var { layoutType } = _a, props = __rest(_a, ["layoutType"]);
+    const isMobile = layoutType === 'mobile';
+    return isMobile ? _jsx(MobileChipChoiceRow, Object.assign({}, props)) : _jsx(ChipChoiceRow, Object.assign({}, props));
+}
+export function useAdaptiveChipChoice({ layoutType }) {
+    const isMobile = layoutType === 'mobile';
+    return isMobile ? MobileChipChoice : ChipChoice;
+}

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

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

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

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

package/dist/esm/components/MobileChipChoice/components/ChipChoiceBase/ChipChoiceBase.d.ts

@@ -0,0 +1,20 @@
+import { KeyboardEvent, MouseEventHandler, ReactNode } from 'react';
+import { ChipChoiceCommonProps } from '../../types';
+export type ChipChoiceBaseProps = Pick<ChipChoiceCommonProps, 'loading' | 'tabIndex' | 'disabled' | 'icon' | 'label' | 'size' | 'onClick' | 'className' | 'truncateVariant'> & {
+    /** Отображаемое значение */
+    valueToRender?: ReactNode;
+    /** Фактическое значение. Используется для отображения кнопки очистки, если свойство <strong>showClearButton=true</strong> */
+    value?: any;
+    /** Колбек для клика по кнопке очистки */
+    onClearButtonClick?: MouseEventHandler<HTMLButtonElement>;
+    onKeyDown?(e: KeyboardEvent<HTMLDivElement>): void;
+};
+export declare const ChipChoiceBase: import("react").ForwardRefExoticComponent<Pick<ChipChoiceCommonProps, "disabled" | "className" | "onClick" | "label" | "loading" | "tabIndex" | "size" | "icon" | "truncateVariant"> & {
+    /** Отображаемое значение */
+    valueToRender?: ReactNode;
+    /** Фактическое значение. Используется для отображения кнопки очистки, если свойство <strong>showClearButton=true</strong> */
+    value?: any;
+    /** Колбек для клика по кнопке очистки */
+    onClearButtonClick?: MouseEventHandler<HTMLButtonElement>;
+    onKeyDown?(e: KeyboardEvent<HTMLDivElement>): void;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/esm/components/MobileChipChoice/components/ChipChoiceBase/ChipChoiceBase.js

@@ -0,0 +1,66 @@
+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 mergeRefs from 'merge-refs';
+import { forwardRef, useRef, useState } from 'react';
+import { Sun } from '@snack-uikit/loaders';
+import { TruncateString } from '@snack-uikit/truncate-string';
+import { extractSupportProps } from '@snack-uikit/utils';
+import { CHIP_CHOICE_TEST_IDS, SIZE, VARIANT } from '../../../../constants';
+import { ButtonClearValue } from '../../../../helperComponents';
+import { BUTTON_CLEAR_VALUE_SIZE_MAP } from '../../constants';
+import styles from './styles.module.css';
+export const ChipChoiceBase = forwardRef((_a, ref) => {
+    var { size = SIZE.S, disabled, loading, icon, label, valueToRender, value, onClick, className, tabIndex = 0, onClearButtonClick, onKeyDown, truncateVariant = 'middle' } = _a, rest = __rest(_a, ["size", "disabled", "loading", "icon", "label", "valueToRender", "value", "onClick", "className", "tabIndex", "onClearButtonClick", "onKeyDown", "truncateVariant"]);
+    const variant = icon && size !== SIZE.Xs ? VARIANT.IconBefore : VARIANT.LabelOnly;
+    const spinnerSize = size === SIZE.Xs ? 'xs' : 's';
+    const localRef = useRef(null);
+    const clearButtonRef = useRef(null);
+    const showClearButton = Boolean(onClearButtonClick);
+    const [isDroplistOpened, setIsDroplistOpened] = useState(false);
+    const handleChipClick = e => {
+        if (loading || disabled)
+            return;
+        onClick === null || onClick === void 0 ? void 0 : onClick(e);
+        !isDroplistOpened && setIsDroplistOpened(true);
+    };
+    const handleChipKeyDown = e => {
+        var _a;
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
+        if (e.key === 'ArrowRight') {
+            (_a = clearButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            e.stopPropagation();
+            e.preventDefault();
+        }
+    };
+    const handleClearButtonClick = e => {
+        onClearButtonClick === null || onClearButtonClick === void 0 ? void 0 : onClearButtonClick(e);
+    };
+    const handleClearButtonKeyDown = e => {
+        var _a;
+        switch (e.key) {
+            case 'ArrowLeft': {
+                (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                return;
+            }
+            case 'Enter':
+            case ' ': {
+                e.stopPropagation();
+                return;
+            }
+            default:
+                break;
+        }
+    };
+    return (_jsxs("div", Object.assign({}, extractSupportProps(rest), { role: 'button', ref: mergeRefs(localRef, ref), className: cn(styles.choiceChip, className), "data-size": size, "data-variant": variant, "data-loading": loading || 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: _jsx(TruncateString, { text: valueToRender !== null && valueToRender !== void 0 ? valueToRender : value, variant: truncateVariant }) }))] }), !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 }))] })));
+});

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

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

package/dist/esm/components/MobileChipChoice/components/ChipChoiceBase/index.js

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