@snack-uikit/chips 0.16.3 → 0.16.4-preview-71543426.0

package/dist/cjs/components/ChipToggle/ChipToggle.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var __rest = void 0 && (void 0).__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;
+};
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChipToggle = ChipToggle;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const loaders_1 = require("@snack-uikit/loaders");
+const utils_1 = require("@snack-uikit/utils");
+const constants_1 = require("../../constants");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+/** Чип с состоянием выбран/не выбран */
+function ChipToggle(_a) {
+  var {
+      icon,
+      size = constants_1.SIZE.S,
+      label,
+      checked,
+      disabled,
+      loading,
+      onChange,
+      className,
+      tabIndex = 0
+    } = _a,
+    rest = __rest(_a, ["icon", "size", "label", "checked", "disabled", "loading", "onChange", "className", "tabIndex"]);
+  const variant = icon && size !== constants_1.SIZE.Xs ? constants_1.VARIANT.IconBefore : constants_1.VARIANT.LabelOnly;
+  const spinnerSize = size === constants_1.SIZE.Xs ? 'xs' : 's';
+  const handleChange = e => {
+    if (disabled || loading) {
+      return;
+    }
+    onChange === null || onChange === void 0 ? void 0 : onChange(!checked, e);
+  };
+  return (0, jsx_runtime_1.jsxs)("label", Object.assign({}, (0, utils_1.extractSupportProps)(rest), {
+    "data-size": size,
+    "data-loading": loading || undefined,
+    "data-disabled": !loading && disabled || undefined,
+    "data-variant": variant,
+    "data-checked": checked || undefined,
+    className: (0, classnames_1.default)(styles_module_scss_1.default.toggleChip, className),
+    children: [(0, jsx_runtime_1.jsx)("input", {
+      "data-test-id": constants_1.CHIP_TOGGLE_TEST_IDS.input,
+      type: 'checkbox',
+      checked: checked,
+      onChange: handleChange,
+      disabled: !loading && disabled,
+      tabIndex: disabled ? -1 : tabIndex,
+      className: styles_module_scss_1.default.toggleChipInput
+    }), (0, jsx_runtime_1.jsxs)("span", {
+      className: styles_module_scss_1.default.toggleChipContent,
+      children: [variant === constants_1.VARIANT.IconBefore && !loading && (0, jsx_runtime_1.jsx)("span", {
+        className: styles_module_scss_1.default.icon,
+        "data-test-id": constants_1.CHIP_TOGGLE_TEST_IDS.icon,
+        children: icon
+      }), loading && (0, jsx_runtime_1.jsx)("span", {
+        className: styles_module_scss_1.default.spinner,
+        "data-test-id": constants_1.CHIP_TOGGLE_TEST_IDS.spinner,
+        children: (0, jsx_runtime_1.jsx)(loaders_1.Sun, {
+          size: spinnerSize
+        })
+      }), (0, jsx_runtime_1.jsx)("span", {
+        className: (0, classnames_1.default)(styles_module_scss_1.default.labelLayout, styles_module_scss_1.default.label),
+        "data-test-id": constants_1.CHIP_TOGGLE_TEST_IDS.label,
+        children: label
+      })]
+    })]
+  }));
+}

package/dist/cjs/components/ChipToggle/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__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 = void 0 && (void 0).__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("./ChipToggle"), exports);

package/dist/cjs/components/index.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__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 = void 0 && (void 0).__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("./ChipAssist"), exports);
+__exportStar(require("./ChipToggle"), exports);
+__exportStar(require("./ChipChoice"), exports);
+__exportStar(require("./ChipChoiceRow"), exports);

package/dist/cjs/constants.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DEFAULT_EMPTY_VALUE = exports.CHIP_TOGGLE_TEST_IDS = exports.CHIP_CHOICE_ROW_IDS = exports.CHIP_CHOICE_TEST_IDS = exports.CHIP_ASSIST_TEST_IDS = exports.VARIANT = exports.BUTTON_SIZE = exports.SIZE = void 0;
+exports.SIZE = {
+  Xs: 'xs',
+  S: 's',
+  M: 'm',
+  L: 'l'
+};
+exports.BUTTON_SIZE = {
+  Xxs: 'xxs',
+  Xs: 'xs'
+};
+exports.VARIANT = {
+  LabelOnly: 'label-only',
+  IconBefore: 'icon-before'
+};
+exports.CHIP_ASSIST_TEST_IDS = {
+  icon: 'chip-assist__icon',
+  spinner: 'chip-assist__spinner',
+  label: 'chip-assist__label'
+};
+exports.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'
+};
+exports.CHIP_CHOICE_ROW_IDS = {
+  clearAllButton: 'chip-choice-row__clear-all-button'
+};
+exports.CHIP_TOGGLE_TEST_IDS = {
+  input: 'chip-toggle__input',
+  icon: 'chip-toggle__icon',
+  spinner: 'chip-toggle__spinner',
+  label: 'chip-toggle__label'
+};
+exports.DEFAULT_EMPTY_VALUE = '—';

package/dist/cjs/helperComponents/ButtonClearValue/ButtonClearValue.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ButtonClearValue = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const icons_1 = require("@snack-uikit/icons");
+const constants_1 = require("../../constants");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+exports.ButtonClearValue = (0, react_1.forwardRef)((_ref, ref) => {
+  let {
+    size,
+    onClick,
+    tabIndex = -1,
+    onKeyDown,
+    'data-test-id': dataTestId
+  } = _ref;
+  const handleClick = event => {
+    event.stopPropagation();
+    onClick(event);
+  };
+  return (0, jsx_runtime_1.jsxs)("button", {
+    className: styles_module_scss_1.default.buttonClearValue,
+    "data-size": size,
+    onClick: handleClick,
+    "data-test-id": dataTestId,
+    type: 'button',
+    ref: ref,
+    onKeyDown: onKeyDown,
+    tabIndex: tabIndex,
+    children: [size === constants_1.BUTTON_SIZE.Xxs && (0, jsx_runtime_1.jsx)(icons_1.CrossSVG, {
+      size: 16
+    }), size === constants_1.BUTTON_SIZE.Xs && (0, jsx_runtime_1.jsx)(icons_1.CrossSVG, {})]
+  });
+});

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

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__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 = void 0 && (void 0).__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);

package/dist/cjs/helperComponents/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__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 = void 0 && (void 0).__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);

package/dist/cjs/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__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 = void 0 && (void 0).__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.js

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

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

@@ -0,0 +1,11 @@
+import { MouseEventHandler } from 'react';
+import { WithSupportProps } from '@snack-uikit/utils';
+import { BaseChipProps, Size } from '../../types';
+export type ChipAssistProps = WithSupportProps<BaseChipProps & {
+    /** Размер */
+    size?: Size;
+    /** Колбек обработки клика */
+    onClick: MouseEventHandler<HTMLButtonElement>;
+}>;
+/** Чип с лейблом  */
+export declare function ChipAssist({ icon, size, label, disabled, loading, onClick, className, tabIndex, ...rest }: ChipAssistProps): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -0,0 +1,159 @@
+.assistChip{
+  cursor:pointer;
+  position:relative;
+  display:inline-flex;
+  align-items:center;
+  box-sizing:border-box;
+  width:-moz-max-content;
+  width:max-content;
+  min-width:-moz-max-content;
+  min-width:max-content;
+  margin:0;
+  padding:0;
+  text-decoration:none;
+  text-transform:none;
+  border-style:solid;
+  outline:0;
+  outline-offset:0;
+  color:var(--sys-neutral-text-support, #6d707f);
+  background-color:var(--sys-neutral-background1-level, #fdfdfd);
+  border-color:var(--sys-neutral-decor-default, #dde0ea);
+}
+.assistChip .spinner{
+  display:inline-flex;
+}
+.assistChip .icon{
+  display:inline-flex;
+}
+.assistChip .icon svg{
+  width:var(--size-icon-container-s, 24px) !important;
+  height:var(--size-icon-container-s, 24px) !important;
+}
+.assistChip .labelLayout{
+  display:inline-flex;
+  align-items:center;
+}
+.assistChip[data-size=xs]{
+  height:var(--size-chips-xs, 24px);
+  padding-left:var(--space-chips-container-padding-xs, 3px);
+  padding-right:var(--space-chips-container-padding-xs, 3px);
+  border-radius:var(--radius-chips-xs, 12px);
+  border-width:var(--border-width-chips-single, 1px);
+}
+.assistChip[data-size=xs] .label{
+  font-family:var(--sans-label-s-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-s-font-weight, Semibold);
+  line-height:var(--sans-label-s-line-height, 14px);
+  font-size:var(--sans-label-s-font-size, 11px);
+  letter-spacing:var(--sans-label-s-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-label-s-paragraph-spacing, 6.05px);
+}
+.assistChip[data-size=xs] .labelLayout{
+  padding-left:var(--space-chips-label-layout-padding-xs, 4px);
+  padding-right:var(--space-chips-label-layout-padding-xs, 4px);
+}
+.assistChip[data-size=s]{
+  height:var(--size-chips-s, 32px);
+  padding-left:var(--space-chips-container-padding-s, 3px);
+  padding-right:var(--space-chips-container-padding-s, 3px);
+  border-radius:var(--radius-chips-s, 16px);
+  border-width:var(--border-width-chips-single, 1px);
+}
+.assistChip[data-size=s] .label{
+  font-family:var(--sans-label-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-m-font-weight, Semibold);
+  line-height:var(--sans-label-m-line-height, 16px);
+  font-size:var(--sans-label-m-font-size, 12px);
+  letter-spacing:var(--sans-label-m-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-label-m-paragraph-spacing, 6.6px);
+}
+.assistChip[data-size=s] .labelLayout{
+  padding-left:var(--space-chips-label-layout-padding-s, 4px);
+  padding-right:var(--space-chips-label-layout-padding-s, 4px);
+}
+.assistChip[data-size=m]{
+  height:var(--size-chips-m, 40px);
+  padding-left:var(--space-chips-container-padding-m, 7px);
+  padding-right:var(--space-chips-container-padding-m, 7px);
+  border-radius:var(--radius-chips-m, 20px);
+  border-width:var(--border-width-chips-single, 1px);
+}
+.assistChip[data-size=m] .label{
+  font-family:var(--sans-label-l-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-l-font-weight, Semibold);
+  line-height:var(--sans-label-l-line-height, 20px);
+  font-size:var(--sans-label-l-font-size, 14px);
+  letter-spacing:var(--sans-label-l-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
+}
+.assistChip[data-size=m] .labelLayout{
+  padding-left:var(--space-chips-label-layout-padding-m, 8px);
+  padding-right:var(--space-chips-label-layout-padding-m, 8px);
+}
+.assistChip[data-size=l]{
+  height:var(--size-chips-l, 48px);
+  padding-left:var(--space-chips-container-padding-l, 11px);
+  padding-right:var(--space-chips-container-padding-l, 11px);
+  border-radius:var(--radius-chips-l, 24px);
+  border-width:var(--border-width-chips-single, 1px);
+}
+.assistChip[data-size=l] .label{
+  font-family:var(--sans-label-l-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-l-font-weight, Semibold);
+  line-height:var(--sans-label-l-line-height, 20px);
+  font-size:var(--sans-label-l-font-size, 14px);
+  letter-spacing:var(--sans-label-l-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
+}
+.assistChip[data-size=l] .labelLayout{
+  padding-left:var(--space-chips-label-layout-padding-l, 12px);
+  padding-right:var(--space-chips-label-layout-padding-l, 12px);
+}
+.assistChip .icon{
+  color:var(--sys-neutral-text-light, #8b8e9b);
+}
+.assistChip:hover{
+  color:var(--sys-neutral-text-main, #41424e);
+  background-color:var(--sys-neutral-background2-level, #ffffff);
+  border-color:var(--sys-neutral-decor-hovered, #cfd2dc);
+}
+.assistChip: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, );
+  outline-color:var(--sys-available-complementary, #1c1c24);
+  outline-offset:var(--spacing-state-focus-offset, 2px);
+  color:var(--sys-neutral-text-main, #41424e);
+  background-color:var(--sys-neutral-background2-level, #ffffff);
+  border-color:var(--sys-neutral-decor-hovered, #cfd2dc);
+}
+.assistChip:active{
+  color:var(--sys-neutral-text-main, #41424e);
+  background-color:var(--sys-neutral-background, #eeeff3);
+  border-color:var(--sys-neutral-decor-activated, #bec2cf);
+}
+.assistChip:disabled{
+  cursor:not-allowed;
+  color:var(--sys-neutral-text-light, #8b8e9b);
+  background-color:var(--sys-neutral-background, #eeeff3);
+  border-color:var(--sys-neutral-decor-hovered, #cfd2dc);
+}
+.assistChip[data-loading]{
+  cursor:progress;
+  color:var(--sys-neutral-text-main, #41424e);
+  background-color:var(--sys-neutral-background, #eeeff3);
+  border-color:var(--sys-neutral-decor-activated, #bec2cf);
+}
+.assistChip[data-loading][data-variant=label-only] .label{
+  opacity:var(--opacity-a0, 0);
+}
+.assistChip[data-loading][data-variant=label-only] .spinner{
+  position:absolute;
+  top:0;
+  left:0;
+  width:100%;
+  height:100%;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+}

package/dist/esm/components/ChipChoice/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' | 'showClearButton' | 'disabled' | 'icon' | 'label' | 'size' | 'onClick' | 'className'> & {
+    /** Отображаемое значение */
+    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, "icon" | "size" | "label" | "disabled" | "loading" | "onClick" | "className" | "tabIndex" | "showClearButton"> & {
+    /** Отображаемое значение */
+    valueToRender?: ReactNode;
+    /** Фактическое значение. Используется для отображения кнопки очистки, если свойство <strong>showClearButton=true</strong> */
+    value?: any;
+    /** Колбек для клика по кнопке очистки */
+    onClearButtonClick?: MouseEventHandler<HTMLButtonElement>;
+    onKeyDown?(e: KeyboardEvent<HTMLDivElement>): void;
+} & import("react").RefAttributes<HTMLDivElement>>;

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

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