@snack-uikit/tag 0.4.10-preview-104ad22c.0

package/dist/helperComponents/TagRowTruncated/TagRowTruncated.js

@@ -0,0 +1,87 @@
+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 { useEffect, useRef, useState } from 'react';
+import { extractSupportProps } from '@snack-uikit/utils';
+import { TAG_ROW_TEST_IDS } from '../../components/TagRow/constants';
+import { TagList } from '../TagList';
+import { TagMore } from '../TagMore';
+import { useResizeObserver } from './hooks';
+import styles from './styles.module.css';
+import { getGapWidth } from './utils';
+export function TagRowTruncated(_a) {
+    var { items, rowLimit, size, moreButtonLabel = '', className, onItemRemove } = _a, rest = __rest(_a, ["items", "rowLimit", "size", "moreButtonLabel", "className", "onItemRemove"]);
+    const [visibleTags, setVisibleTags] = useState([]);
+    const [hiddenTags, setHiddenTags] = useState([]);
+    const hiddenRowElementRef = useRef(null);
+    const hiddenMoreButtonRef = useRef(null);
+    const hiddenMoreButtonWrapperRef = useRef(null);
+    const [firstTagElement, setFirstTagElement] = useState(null);
+    const tagsMapRef = useRef(new Map());
+    const { width: maxWidth } = useResizeObserver(hiddenRowElementRef.current);
+    const { width: firstVisibleTagWidth } = useResizeObserver(firstTagElement);
+    function setTagElement(tag, index) {
+        return (tagElement) => {
+            if (index === 0 && tagElement) {
+                setFirstTagElement(tagElement);
+            }
+            if (tagElement === null) {
+                tagsMapRef.current.delete(tag);
+            }
+            else {
+                tagsMapRef.current.set(tag, tagElement);
+            }
+        };
+    }
+    const gapWidth = getGapWidth(hiddenRowElementRef);
+    useEffect(() => {
+        var _a;
+        if (maxWidth < 1) {
+            return;
+        }
+        const newVisibleTags = [];
+        const newHiddenTags = [];
+        const moreButtonWidth = ((_a = hiddenMoreButtonRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0;
+        let currentRowWidth = 0;
+        let currentRowCount = 1;
+        tagsMapRef.current.forEach((tagElement, tagRowItem) => {
+            const tagWidth = (tagElement === null || tagElement === void 0 ? void 0 : tagElement.offsetWidth) || 0;
+            const sumRowWidth = currentRowWidth + tagWidth + gapWidth;
+            if (currentRowCount > rowLimit) {
+                newHiddenTags.push(tagRowItem);
+                return;
+            }
+            if (currentRowCount === rowLimit) {
+                if (sumRowWidth + moreButtonWidth > maxWidth) {
+                    currentRowCount++;
+                    newHiddenTags.push(tagRowItem);
+                    return;
+                }
+                currentRowWidth = sumRowWidth;
+                newVisibleTags.push(tagRowItem);
+                return;
+            }
+            if (sumRowWidth > maxWidth) {
+                currentRowWidth = tagWidth + gapWidth;
+                currentRowCount++;
+                newVisibleTags.push(tagRowItem);
+                return;
+            }
+            currentRowWidth = sumRowWidth;
+            newVisibleTags.push(tagRowItem);
+        });
+        setVisibleTags(newVisibleTags);
+        setHiddenTags(newHiddenTags);
+    }, [items, rowLimit, maxWidth, onItemRemove, gapWidth, firstVisibleTagWidth]);
+    return (_jsxs("div", Object.assign({ className: cn(styles.wrapper, className) }, extractSupportProps(rest), { "data-size": size }, { children: [_jsx("div", Object.assign({ className: styles.hiddenRow, ref: hiddenRowElementRef, "data-size": size }, { children: _jsx(TagList, { items: items, size: size, onItemRemove: onItemRemove, setTagRef: setTagElement }) })), _jsx("div", Object.assign({ className: styles.hiddenMoreButton, ref: hiddenMoreButtonWrapperRef }, { children: _jsx(TagMore, { items: items, text: moreButtonLabel, size: size, buttonRef: hiddenMoreButtonRef }) })), _jsxs("div", Object.assign({ className: styles.visibleRow, "data-size": size, "data-test-id": TAG_ROW_TEST_IDS.visibleTagsWrapper }, { children: [_jsx(TagList, { items: visibleTags, size: size, onItemRemove: onItemRemove }), hiddenTags.length > 0 && (_jsx(TagMore, { items: hiddenTags, text: moreButtonLabel, size: size, onItemRemove: onItemRemove }))] }))] })));
+}

package/dist/helperComponents/TagRowTruncated/hooks.d.ts

@@ -0,0 +1,3 @@
+export declare const useResizeObserver: (element: HTMLElement | null) => {
+    width: number;
+};

package/dist/helperComponents/TagRowTruncated/hooks.js

@@ -0,0 +1,17 @@
+import { useEffect, useState } from 'react';
+export const useResizeObserver = (element) => {
+    const [width, setWidth] = useState(0);
+    useEffect(() => {
+        if (!element) {
+            return;
+        }
+        const resizeObserver = new ResizeObserver(() => {
+            if (element.offsetWidth !== width) {
+                setWidth(element.offsetWidth);
+            }
+        });
+        resizeObserver.observe(element);
+        return () => resizeObserver.disconnect();
+    }, [element, width]);
+    return { width };
+};

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

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

package/dist/helperComponents/TagRowTruncated/index.js

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

package/dist/helperComponents/TagRowTruncated/styles.module.css

@@ -0,0 +1,47 @@
+.wrapper{
+  position:relative;
+  display:flex;
+  flex-wrap:wrap;
+  width:100%;
+  max-width:100%;
+}
+.wrapper[data-size=xs]{
+  gap:var(--space-tag-row-xs-gap, 2px);
+}
+.wrapper[data-size=s]{
+  gap:var(--space-tag-row-s-gap, 2px);
+}
+
+.visibleRow{
+  display:flex;
+  flex-wrap:wrap;
+  max-width:100%;
+}
+.visibleRow[data-size=xs]{
+  gap:var(--space-tag-row-xs-gap, 2px);
+}
+.visibleRow[data-size=s]{
+  gap:var(--space-tag-row-s-gap, 2px);
+}
+
+.hiddenRow{
+  position:absolute;
+  top:0;
+  left:0;
+  display:flex;
+  flex-wrap:wrap;
+  width:100%;
+  visibility:hidden;
+}
+.hiddenRow[data-size=xs]{
+  gap:var(--space-tag-row-xs-gap, 2px);
+}
+.hiddenRow[data-size=s]{
+  gap:var(--space-tag-row-s-gap, 2px);
+}
+
+.hiddenMoreButton{
+  position:absolute;
+  left:0;
+  visibility:hidden;
+}

package/dist/helperComponents/TagRowTruncated/utils.d.ts

@@ -0,0 +1,2 @@
+import { RefObject } from 'react';
+export declare const getGapWidth: (elementRef: RefObject<HTMLDivElement>) => number;

package/dist/helperComponents/TagRowTruncated/utils.js

@@ -0,0 +1,4 @@
+export const getGapWidth = (elementRef) => {
+    const cssValue = elementRef.current ? getComputedStyle(elementRef.current, null).getPropertyValue('gap') : '0px';
+    return parseInt(cssValue);
+};

package/dist/helperComponents/index.d.ts

@@ -0,0 +1,2 @@
+export * from './TagRowTruncated';
+export * from './TagRowSimple';

package/dist/helperComponents/index.js

@@ -0,0 +1,2 @@
+export * from './TagRowTruncated';
+export * from './TagRowSimple';

package/dist/index.d.ts

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

package/dist/index.js

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

package/dist/types.d.ts

@@ -0,0 +1,9 @@
+import { Appearance } from './constants';
+export type TagRowItem = {
+    label: string;
+    color?: Appearance;
+};
+export type TagRowItemInner = {
+    label: string;
+    color: Appearance;
+};

package/dist/types.js

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

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@snack-uikit/tag",
+  "publishConfig": {
+    "access": "public"
+  },
+  "title": "Tag",
+  "version": "0.4.10-preview-104ad22c.0",
+  "sideEffects": [
+    "*.css",
+    "*.woff",
+    "*.woff2"
+  ],
+  "description": "",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "homepage": "https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/tree/master/packages/tag",
+  "repository": {
+    "type": "git",
+    "url": "https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit.git",
+    "directory": "packages/tag"
+  },
+  "author": "Дмитрий Безматерных <dobezmaternih@cloud.ru>",
+  "contributors": [
+    "Дмитрий Безматерных <dobezmaternih@cloud.ru>"
+  ],
+  "files": [
+    "dist",
+    "src",
+    "./CHANGELOG.md",
+    "./LICENSE"
+  ],
+  "license": "Apache-2.0",
+  "scripts": {},
+  "dependencies": {
+    "@snack-uikit/icons": "0.18.2-preview-104ad22c.0",
+    "@snack-uikit/popover-private": "0.10.1-preview-104ad22c.0",
+    "@snack-uikit/scroll": "0.3.5-preview-104ad22c.0",
+    "@snack-uikit/utils": "2.0.2-preview-104ad22c.0",
+    "classnames": "2.3.2"
+  },
+  "gitHead": "580e0d5c22d04d609bcdf7cb0873114f9fce5f66"
+}

package/src/components/Tag/Tag.tsx

@@ -0,0 +1,55 @@
+import cn from 'classnames';
+import { MouseEventHandler } from 'react';
+
+import { CrossSVG } from '@snack-uikit/icons';
+import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+
+import { Appearance, Size } from '../../constants';
+import { IconSize } from './constants';
+import styles from './styles.module.scss';
+
+export type TagProps = WithSupportProps<{
+  /** Текст */
+  label: string;
+  /** Размер */
+  size?: Size;
+  /** Внешний вид */
+  appearance?: Appearance;
+  /** Коллбэк на удаление */
+  onDelete?: MouseEventHandler<HTMLButtonElement>;
+  /** CSS-класс */
+  className?: string;
+}>;
+
+export function Tag({
+  label,
+  size = Size.Xs,
+  appearance = Appearance.Neutral,
+  onDelete,
+  className,
+  ...rest
+}: TagProps) {
+  return (
+    <span
+      {...extractSupportProps(rest)}
+      className={cn(styles.tag, className)}
+      data-size={size}
+      data-appearance={appearance}
+      data-removable={Boolean(onDelete)}
+    >
+      <span className={styles.label}>{label}</span>
+      {onDelete && (
+        <button type='button' className={styles.tagButton} onClick={onDelete} data-test-id='tag-remove-button'>
+          {size === Size.Xs ? (
+            <CrossSVG size={IconSize[size]} className={styles.icon} />
+          ) : (
+            <CrossSVG size={IconSize[size]} className={styles.icon} />
+          )}
+        </button>
+      )}
+    </span>
+  );
+}
+
+Tag.sizes = Size;
+Tag.appearances = Appearance;

package/src/components/Tag/constants.ts

@@ -0,0 +1,6 @@
+import { Size } from '../../constants';
+
+export const IconSize = {
+  [Size.Xs]: 16,
+  [Size.S]: 24,
+};

package/src/components/Tag/index.ts

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

package/src/components/Tag/styles.module.scss

@@ -0,0 +1,175 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-tag';
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+
+$sizes: 'xs', 's';
+
+$label-typography: (
+  'xs': $sans-label-s,
+  's': $sans-label-m
+);
+
+$appearances: (
+  'neutral': (
+    'container': $sys-neutral-decor-default,
+    'container-disabled': $sys-neutral-decor-disabled,
+    'label': $sys-neutral-text-support,
+    'icon': $sys-neutral-text-light,
+    'icon-active': $sys-neutral-text-main,
+    'button-hovered': $sys-neutral-decor-hovered,
+    'button-active': $sys-neutral-decor-activated,
+  ),
+  'primary': (
+    'container': $sys-primary-decor-default,
+    'container-disabled': $sys-primary-decor-disabled,
+    'label': $sys-primary-text-support,
+    'icon': $sys-primary-text-light,
+    'icon-active': $sys-primary-text-main,
+    'button-hovered': $sys-primary-decor-hovered,
+    'button-active': $sys-primary-decor-activated,
+  ),
+  'red': (
+    'container': $sys-red-decor-default,
+    'container-disabled': $sys-red-decor-disabled,
+    'label': $sys-red-text-support,
+    'icon': $sys-red-text-light,
+    'icon-active': $sys-red-text-main,
+    'button-hovered': $sys-red-decor-hovered,
+    'button-active': $sys-red-decor-activated,
+  ),
+  'orange': (
+    'container': $sys-orange-decor-default,
+    'container-disabled': $sys-orange-decor-disabled,
+    'label': $sys-orange-text-support,
+    'icon': $sys-orange-text-light,
+    'icon-active': $sys-orange-text-main,
+    'button-hovered': $sys-orange-decor-hovered,
+    'button-active': $sys-orange-decor-activated,
+  ),
+  'yellow': (
+    'container': $sys-yellow-decor-default,
+    'container-disabled': $sys-yellow-decor-disabled,
+    'label': $sys-yellow-text-support,
+    'icon': $sys-yellow-text-light,
+    'icon-active': $sys-yellow-text-main,
+    'button-hovered': $sys-yellow-decor-hovered,
+    'button-active': $sys-yellow-decor-activated,
+  ),
+  'green': (
+    'container': $sys-green-decor-default,
+    'container-disabled': $sys-green-decor-disabled,
+    'label': $sys-green-text-support,
+    'icon': $sys-green-text-light,
+    'icon-active': $sys-green-text-main,
+    'button-hovered': $sys-green-decor-hovered,
+    'button-active': $sys-green-decor-activated,
+  ),
+  'blue': (
+    'container': $sys-blue-decor-default,
+    'container-disabled': $sys-blue-decor-disabled,
+    'label': $sys-blue-text-support,
+    'icon': $sys-blue-text-light,
+    'icon-active': $sys-blue-text-main,
+    'button-hovered': $sys-blue-decor-hovered,
+    'button-active': $sys-blue-decor-activated,
+  ),
+  'violet': (
+    'container': $sys-violet-decor-default,
+    'container-disabled': $sys-violet-decor-disabled,
+    'label': $sys-violet-text-support,
+    'icon': $sys-violet-text-light,
+    'icon-active': $sys-violet-text-main,
+    'button-hovered': $sys-violet-decor-hovered,
+    'button-active': $sys-violet-decor-activated,
+  ),
+  'pink': (
+    'container': $sys-pink-decor-default,
+    'container-disabled': $sys-pink-decor-disabled,
+    'label': $sys-pink-text-support,
+    'icon': $sys-pink-text-light,
+    'icon-active': $sys-pink-text-main,
+    'button-hovered': $sys-pink-decor-hovered,
+    'button-active': $sys-pink-decor-activated,
+  ),
+);
+
+.tag {
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+
+  .tagButton {
+    cursor: pointer;
+
+    position: relative;
+
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+
+    background: none;
+    border: none;
+
+    &:focus {
+      @include outline-inside-var($container-focused-s);
+    }
+
+    &:active {
+      outline: none;
+    }
+  }
+
+  .icon {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  @each $size in $sizes {
+    &[data-size=#{$size}] {
+      @include composite-var($tag, 'container', $size, 'label-only');
+
+      &[data-removable="true"] {
+        @include composite-var($tag, 'container', $size, 'button-after');
+      }
+
+      .label {
+        @include composite-var($label-typography, $size);
+      }
+
+      .tagButton {
+        @include composite-var($tag-button, 'container', $size, 'icon-only');
+      }
+    }
+  }
+
+  @each $appearanceKey, $appearance in $appearances {
+    &[data-appearance=#{$appearanceKey}] {
+      background-color: simple-var($appearance, 'container');
+
+      &[data-removable="false"] {
+        background-color: simple-var($appearance, 'container-disabled');
+      }
+
+      .label {
+        color: simple-var($appearance, 'label');
+      }
+
+      .tagButton {
+        color: simple-var($appearance, 'icon');
+
+        &:focus, &:hover, &:active {
+          color: simple-var($appearance, 'icon-active');
+        }
+
+        &:focus, &:hover {
+          background-color: simple-var($appearance, 'button-hovered');
+        }
+
+        &:active {
+          background-color: simple-var($appearance, 'button-active');
+        }
+      }
+    }
+  }
+}

package/src/components/TagRow/TagRow.tsx

@@ -0,0 +1,34 @@
+import { WithSupportProps } from '@snack-uikit/utils';
+
+import { Appearance, Size } from '../../constants';
+import { TagRowSimple, TagRowTruncated } from '../../helperComponents';
+import { TagRowItem } from '../../types';
+import { mapTagRowItem } from './utils';
+
+export type TagRowProps = WithSupportProps<{
+  /** Массив тэгов */
+  items: TagRowItem[];
+  /** Лимит количества рядов тэгов. При достижении лимита тэги скрываются под кнопкой. Отсутствие лимита или значение равное нулю отобразит весь список */
+  rowLimit?: number;
+  /** Размер */
+  size?: Size;
+  /** Текст кнопки, при наведении на которую отображается список скрытых тэгов */
+  moreButtonLabel?: string;
+  /** CSS-класс */
+  className?: string;
+  /** Коллбэк на клик по удалению тэга */
+  onItemRemove?(item: string): void;
+}>;
+
+export function TagRow({ items, rowLimit, size = Size.Xs, ...props }: TagRowProps) {
+  const coloredItems = items.map(mapTagRowItem);
+
+  if (rowLimit) {
+    return <TagRowTruncated items={coloredItems} rowLimit={rowLimit} size={size} {...props} />;
+  }
+
+  return <TagRowSimple items={coloredItems} size={size} {...props} />;
+}
+
+TagRow.sizes = Size;
+TagRow.appearances = Appearance;

package/src/components/TagRow/constants.ts

@@ -0,0 +1,5 @@
+export const TAG_ROW_TEST_IDS = {
+  moreButton: 'tag-row__more-button',
+  visibleTagsWrapper: 'tag-row__visible-row',
+  droplistTagsWrapper: 'tag-row__droplist-contents',
+};

package/src/components/TagRow/index.ts

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

package/src/components/TagRow/utils.ts

@@ -0,0 +1,16 @@
+import { Appearance } from '../../constants';
+import { TagRowItem, TagRowItemInner } from '../../types';
+
+export const mapTagRowItem = ({ label, color }: TagRowItem): TagRowItemInner => {
+  if (color) {
+    return {
+      label,
+      color,
+    };
+  }
+
+  return {
+    label,
+    color: Appearance.Neutral,
+  };
+};

package/src/components/index.ts

@@ -0,0 +1,2 @@
+export * from './Tag';
+export * from './TagRow';

package/src/constants.ts

@@ -0,0 +1,16 @@
+export enum Appearance {
+  Neutral = 'neutral',
+  Primary = 'primary',
+  Red = 'red',
+  Orange = 'orange',
+  Yellow = 'yellow',
+  Green = 'green',
+  Blue = 'blue',
+  Violet = 'violet',
+  Pink = 'pink',
+}
+
+export enum Size {
+  Xs = 'xs',
+  S = 's',
+}

package/src/helperComponents/TagList/TagList.tsx

@@ -0,0 +1,32 @@
+import { Ref } from 'react';
+
+import { Tag } from '../../components';
+import { Size } from '../../constants';
+import { TagRowItemInner } from '../../types';
+
+type SetTagRef = (item: TagRowItemInner, index: number) => Ref<HTMLDivElement>;
+
+type TagListProps = {
+  items: TagRowItemInner[];
+  size?: Size;
+  onItemRemove?(item: string): void;
+  setTagRef?: SetTagRef;
+};
+
+type OnDeleteHandler = () => void;
+
+function renderTag(size: Size, handleRemoveItem?: (item: TagRowItemInner) => OnDeleteHandler, setRef?: SetTagRef) {
+  return function TagRowItem(item: TagRowItemInner, index: number) {
+    return (
+      <div key={item.label} ref={setRef?.(item, index)}>
+        <Tag label={item.label} appearance={item.color} size={size} onDelete={handleRemoveItem?.(item)} />
+      </div>
+    );
+  };
+}
+
+export function TagList({ items, size = Size.Xs, onItemRemove, setTagRef }: TagListProps) {
+  const handleRemoveItem = onItemRemove ? (item: TagRowItemInner) => () => onItemRemove(item.label) : undefined;
+
+  return <>{items.map(renderTag(size, handleRemoveItem, setTagRef))}</>;
+}

package/src/helperComponents/TagList/index.ts

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

package/src/helperComponents/TagMore/TagMore.tsx

@@ -0,0 +1,54 @@
+import { Ref } from 'react';
+
+import { PopoverPrivate } from '@snack-uikit/popover-private';
+import { Scroll } from '@snack-uikit/scroll';
+
+import { TAG_ROW_TEST_IDS } from '../../components/TagRow/constants';
+import { Size } from '../../constants';
+import { TagRowItemInner } from '../../types';
+import { TagRowSimple } from '../TagRowSimple';
+import styles from './styles.module.scss';
+
+type TagMoreProps = {
+  items: TagRowItemInner[];
+  size: Size;
+  text?: string;
+  buttonRef?: Ref<HTMLButtonElement>;
+  onItemRemove?(item: string): void;
+};
+
+export function TagMore({ items, text = '', size = Size.Xs, buttonRef, onItemRemove }: TagMoreProps) {
+  return (
+    <PopoverPrivate
+      placement={PopoverPrivate.placements.BottomEnd}
+      trigger={PopoverPrivate.triggers.HoverAndFocusVisible}
+      triggerClassName={styles.triggerClassName}
+      popoverContent={
+        <div className={styles.tagRowDroplistContainer} data-size={size}>
+          <Scroll
+            className={styles.tagRowDroplistScroll}
+            size={Scroll.sizes.S}
+            barHideStrategy={Scroll.barHideStrategies.Move}
+            resize={Scroll.resizes.None}
+          >
+            <TagRowSimple
+              items={items}
+              size={size}
+              onItemRemove={onItemRemove}
+              data-test-id={TAG_ROW_TEST_IDS.droplistTagsWrapper}
+            />
+          </Scroll>
+        </div>
+      }
+      hasArrow={false}
+    >
+      <button
+        type='button'
+        className={styles.button}
+        ref={buttonRef}
+        data-size={size}
+        data-test-id={TAG_ROW_TEST_IDS.moreButton}
+      >{`${text}${items.length}`}</button>
+    </PopoverPrivate>
+  );
+}

package/src/helperComponents/TagMore/index.ts

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