@snack-uikit/tag 0.6.4 → 0.7.1-preview-3f90b7f1.0

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.7.0 (2024-01-31)
+
+
+### Bug Fixes
+
+* **FF-4016:** fix usages of TagRow inside Table, remove local Dropdown ([b33d8e5](https://github.com/cloud-ru-tech/snack-uikit/commit/b33d8e5f7fb74d1e5a14a00c8ee428383b1dac0b))
+
+
+### BREAKING CHANGES
+
+
+* **FF-4016:** rename color to appearance inside TagRow items ([e1bbffb](https://github.com/cloud-ru-tech/snack-uikit/commit/e1bbffbfe6bd4a60cfc3a78170e1bdc030312866))
+
+
+
+
 ## 0.6.4 (2024-01-23)
 
 ### Only dependencies have been changed

package/README.md

@@ -22,7 +22,7 @@
 |------|------|---------------|-------------|
 | items* | `TagRowItem[]` | - | Массив тэгов |
 | rowLimit | `number` | - | Лимит количества рядов тэгов. При достижении лимита тэги скрываются под кнопкой. Отсутствие лимита или значение равное нулю отобразит весь список |
-| size | enum Size: `"xs"`, `"s"` | xs | Размер |
+| size | enum Size: `"xs"`, `"s"` | - | Размер |
 | moreButtonLabel | `string` | - | Текст кнопки, при наведении на которую отображается список скрытых тэгов |
 | className | `string` | - | CSS-класс |
 | onItemRemove | `(item: string) => void` | - | Коллбэк на клик по удалению тэга |

package/dist/components/Tag/Tag.d.ts

@@ -1,5 +1,6 @@
 import { MouseEventHandler } from 'react';
 import { WithSupportProps } from '@snack-uikit/utils';
+import { APPEARANCE } from '../../constants';
 import { Appearance, Size } from '../../types';
 export type TagProps = WithSupportProps<{
     /** Текст */
@@ -14,3 +15,4 @@ export type TagProps = WithSupportProps<{
     className?: string;
 }>;
 export declare function Tag({ label, size, appearance, onDelete, className, ...rest }: TagProps): import("react/jsx-runtime").JSX.Element;
+export { APPEARANCE };

package/dist/components/Tag/Tag.js

@@ -20,3 +20,4 @@ export function Tag(_a) {
     var { label, size = SIZE.Xs, appearance = APPEARANCE.Neutral, onDelete, className } = _a, rest = __rest(_a, ["label", "size", "appearance", "onDelete", "className"]);
     return (_jsxs("span", Object.assign({}, extractSupportProps(rest), { className: cn(styles.tag, className), "data-size": size, "data-appearance": appearance, "data-removable": Boolean(onDelete), children: [_jsx("span", { className: styles.label, children: label }), onDelete && (_jsx("button", { type: 'button', className: styles.tagButton, onClick: onDelete, "data-test-id": 'tag-remove-button', children: size === SIZE.Xs ? (_jsx(CrossSVG, { size: ICON_SIZE[size], className: styles.icon })) : (_jsx(CrossSVG, { size: ICON_SIZE[size], className: styles.icon })) }))] })));
 }
+export { APPEARANCE };

package/dist/components/TagRow/TagRow.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { WithSupportProps } from '@snack-uikit/utils';
 import { Size, TagRowItem } from '../../types';
 export type TagRowProps = WithSupportProps<{
@@ -14,4 +15,6 @@ export type TagRowProps = WithSupportProps<{
     /** Коллбэк на клик по удалению тэга */
     onItemRemove?(item: string): void;
 }>;
-export declare function TagRow({ items, rowLimit, size, ...props }: TagRowProps): import("react/jsx-runtime").JSX.Element;
+declare function TagRowInner({ items, rowLimit, size, ...props }: TagRowProps): import("react/jsx-runtime").JSX.Element;
+export declare const TagRow: import("react").MemoExoticComponent<typeof TagRowInner>;
+export {};

package/dist/components/TagRow/TagRow.js

@@ -10,14 +10,16 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
+import { memo, useMemo } from 'react';
 import { SIZE } from '../../constants';
 import { TagRowSimple, TagRowTruncated } from '../../helperComponents';
 import { mapTagRowItem } from './utils';
-export function TagRow(_a) {
+function TagRowInner(_a) {
     var { items, rowLimit, size = SIZE.Xs } = _a, props = __rest(_a, ["items", "rowLimit", "size"]);
-    const coloredItems = items.map(mapTagRowItem);
+    const coloredItems = useMemo(() => items.map(mapTagRowItem), [items]);
     if (rowLimit) {
         return _jsx(TagRowTruncated, Object.assign({ items: coloredItems, rowLimit: rowLimit, size: size }, props));
     }
     return _jsx(TagRowSimple, Object.assign({ items: coloredItems, size: size }, props));
 }
+export const TagRow = memo(TagRowInner);

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

@@ -1,2 +1,2 @@
 import { TagRowItem, TagRowItemInner } from '../../types';
-export declare const mapTagRowItem: ({ label, color }: TagRowItem) => TagRowItemInner;
+export declare const mapTagRowItem: ({ label, appearance }: TagRowItem) => TagRowItemInner;

package/dist/components/TagRow/utils.js

@@ -1,13 +1,10 @@
 import { APPEARANCE } from '../../constants';
-export const mapTagRowItem = ({ label, color }) => {
-    if (color) {
-        return {
-            label,
-            color,
-        };
+export const mapTagRowItem = ({ label, appearance }) => {
+    if (appearance) {
+        return { label, appearance };
     }
     return {
         label,
-        color: APPEARANCE.Neutral,
+        appearance: APPEARANCE.Neutral,
     };
 };

package/dist/helperComponents/TagList/TagList.js

@@ -3,7 +3,7 @@ import { Tag } from '../../components';
 import { SIZE } from '../../constants';
 function renderTag(size, handleRemoveItem, setRef) {
     return function TagRowItem(item, index) {
-        return (_jsx("div", { ref: setRef === null || setRef === void 0 ? void 0 : setRef(item, index), children: _jsx(Tag, { label: item.label, appearance: item.color, size: size, onDelete: handleRemoveItem === null || handleRemoveItem === void 0 ? void 0 : handleRemoveItem(item) }) }, item.label));
+        return (_jsx("div", { ref: setRef === null || setRef === void 0 ? void 0 : setRef(item, index), children: _jsx(Tag, { label: item.label, appearance: item.appearance, size: size, onDelete: handleRemoveItem === null || handleRemoveItem === void 0 ? void 0 : handleRemoveItem(item) }) }, item.label));
     };
 }
 export function TagList({ items, size = SIZE.Xs, onItemRemove, setTagRef }) {

package/dist/helperComponents/TagMore/TagMore.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { PopoverPrivate } from '@snack-uikit/popover-private';
+import { Dropdown } from '@snack-uikit/dropdown';
 import { Scroll } from '@snack-uikit/scroll';
 import { TAG_ROW_TEST_IDS } from '../../components/TagRow/constants';
 import { SIZE } from '../../constants';
 import { TagRowSimple } from '../TagRowSimple';
 import styles from './styles.module.css';
 export function TagMore({ items, text = '', size = SIZE.Xs, buttonRef, onItemRemove }) {
-    return (_jsx(PopoverPrivate, { placement: 'bottom-end', trigger: 'hoverAndFocusVisible', triggerClassName: styles.triggerClassName, popoverContent: _jsx("div", { className: styles.tagRowDroplistContainer, "data-size": size, children: _jsx(Scroll, { className: styles.tagRowDroplistScroll, size: 's', barHideStrategy: 'move', resize: 'none', children: _jsx(TagRowSimple, { items: items, size: size, onItemRemove: onItemRemove, "data-test-id": TAG_ROW_TEST_IDS.droplistTagsWrapper }) }) }), hasArrow: false, children: _jsx("button", { type: 'button', className: styles.button, ref: buttonRef, "data-size": size, "data-test-id": TAG_ROW_TEST_IDS.moreButton, children: `${text}${items.length}` }) }));
+    return (_jsx(Dropdown, { placement: 'bottom-end', trigger: 'hoverAndFocusVisible', triggerClassName: styles.triggerClassName, content: _jsx("div", { className: styles.tagRowDroplistContainer, "data-size": size, children: _jsx(Scroll, { className: styles.tagRowDroplistScroll, size: 's', barHideStrategy: 'move', resize: 'none', children: _jsx(TagRowSimple, { items: items, size: size, onItemRemove: onItemRemove, "data-test-id": TAG_ROW_TEST_IDS.droplistTagsWrapper }) }) }), children: _jsx("button", { type: 'button', className: styles.button, ref: buttonRef, "data-size": size, "data-test-id": TAG_ROW_TEST_IDS.moreButton, children: `${text}${items.length}` }) }));
 }

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

@@ -42,13 +42,6 @@
   border-width:var(--border-width-tag-more-single, 2px);
 }
 
-.tagRowDroplistContainer{
-  padding-top:var(--radius-drop-list-container, 8px);
-  padding-bottom:var(--radius-drop-list-container, 8px);
-  border-radius:var(--radius-drop-list-container, 8px);
-  background-color:var(--sys-neutral-background2-level, #fdfdfd);
-  box-shadow:var(--box-shadow-elevation-level4, 0px 0px 8px 0px rgba(0, 0, 0, 0.0784313725), 0px 16px 16px 0px rgba(0, 0, 0, 0.0784313725));
-}
 .tagRowDroplistContainer[data-size=xs]{
   padding-right:var(--radius-drop-list-container, 8px);
   padding-left:var(--radius-drop-list-container, 8px);

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { WithSupportProps } from '@snack-uikit/utils';
 import { Size, TagRowItemInner } from '../../types';
 type TagRowTruncatedProps = WithSupportProps<{
@@ -8,5 +9,6 @@ type TagRowTruncatedProps = WithSupportProps<{
     className?: string;
     onItemRemove?(item: string): void;
 }>;
-export declare function TagRowTruncated({ items, rowLimit, size, moreButtonLabel, className, onItemRemove, ...rest }: TagRowTruncatedProps): import("react/jsx-runtime").JSX.Element;
+declare function TagRowTruncatedInner({ items, rowLimit, size, moreButtonLabel, className, onItemRemove, ...rest }: TagRowTruncatedProps): import("react/jsx-runtime").JSX.Element;
+export declare const TagRowTruncated: import("react").MemoExoticComponent<typeof TagRowTruncatedInner>;
 export {};

package/dist/helperComponents/TagRowTruncated/TagRowTruncated.js

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import cn from 'classnames';
-import { useEffect, useRef, useState } from 'react';
+import { memo, useEffect, useRef, useState } from 'react';
 import { extractSupportProps } from '@snack-uikit/utils';
 import { TAG_ROW_TEST_IDS } from '../../components/TagRow/constants';
 import { TagList } from '../TagList';
@@ -19,7 +19,7 @@ import { TagMore } from '../TagMore';
 import { useResizeObserver } from './hooks';
 import styles from './styles.module.css';
 import { getGapWidth } from './utils';
-export function TagRowTruncated(_a) {
+function TagRowTruncatedInner(_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([]);
@@ -85,3 +85,4 @@ export function TagRowTruncated(_a) {
     }, [items, rowLimit, maxWidth, onItemRemove, gapWidth, firstVisibleTagWidth]);
     return (_jsxs("div", Object.assign({ className: cn(styles.wrapper, className) }, extractSupportProps(rest), { "data-size": size, children: [_jsx("div", { className: styles.hiddenRow, ref: hiddenRowElementRef, "data-size": size, children: _jsx(TagList, { items: items, size: size, onItemRemove: onItemRemove, setTagRef: setTagElement }) }), _jsx("div", { className: styles.hiddenMoreButton, ref: hiddenMoreButtonWrapperRef, children: _jsx(TagMore, { items: items, text: moreButtonLabel, size: size, buttonRef: hiddenMoreButtonRef }) }), _jsxs("div", { 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 }))] })] })));
 }
+export const TagRowTruncated = memo(TagRowTruncatedInner);

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

@@ -1,5 +1,6 @@
 .wrapper{
   position:relative;
+  overflow:hidden;
   display:flex;
   flex-wrap:wrap;
   width:100%;

package/dist/types.d.ts

@@ -4,9 +4,9 @@ export type Appearance = ValueOf<typeof APPEARANCE>;
 export type Size = ValueOf<typeof SIZE>;
 export type TagRowItem = {
     label: string;
-    color?: Appearance;
+    appearance?: Appearance;
 };
 export type TagRowItemInner = {
     label: string;
-    color: Appearance;
+    appearance: Appearance;
 };

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Tag",
-  "version": "0.6.4",
+  "version": "0.7.1-preview-3f90b7f1.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -32,11 +32,11 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/icons": "0.20.0",
-    "@snack-uikit/popover-private": "0.12.2",
+    "@snack-uikit/dropdown": "0.1.0",
+    "@snack-uikit/icons": "0.20.1-preview-3f90b7f1.0",
     "@snack-uikit/scroll": "0.5.0",
     "@snack-uikit/utils": "3.2.0",
     "classnames": "2.3.2"
   },
-  "gitHead": "c292f4c45173928f57cc5c9f3cb02efb26887b64"
+  "gitHead": "80d28a192eeeb49f36eece4bec7e33e0fb788478"
 }

package/src/components/Tag/Tag.tsx

@@ -51,3 +51,5 @@ export function Tag({
     </span>
   );
 }
+
+export { APPEARANCE };

package/src/components/TagRow/TagRow.tsx

@@ -1,3 +1,5 @@
+import { memo, useMemo } from 'react';
+
 import { WithSupportProps } from '@snack-uikit/utils';
 
 import { SIZE } from '../../constants';
@@ -20,8 +22,8 @@ export type TagRowProps = WithSupportProps<{
   onItemRemove?(item: string): void;
 }>;
 
-export function TagRow({ items, rowLimit, size = SIZE.Xs, ...props }: TagRowProps) {
-  const coloredItems = items.map(mapTagRowItem);
+function TagRowInner({ items, rowLimit, size = SIZE.Xs, ...props }: TagRowProps) {
+  const coloredItems = useMemo(() => items.map(mapTagRowItem), [items]);
 
   if (rowLimit) {
     return <TagRowTruncated items={coloredItems} rowLimit={rowLimit} size={size} {...props} />;
@@ -29,3 +31,5 @@ export function TagRow({ items, rowLimit, size = SIZE.Xs, ...props }: TagRowProp
 
   return <TagRowSimple items={coloredItems} size={size} {...props} />;
 }
+
+export const TagRow = memo(TagRowInner);

package/src/components/TagRow/utils.ts

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

package/src/helperComponents/TagList/TagList.tsx

@@ -19,7 +19,7 @@ function renderTag(size: Size, handleRemoveItem?: (item: TagRowItemInner) => OnD
   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)} />
+        <Tag label={item.label} appearance={item.appearance} size={size} onDelete={handleRemoveItem?.(item)} />
       </div>
     );
   };

package/src/helperComponents/TagMore/TagMore.tsx

@@ -1,6 +1,6 @@
 import { Ref } from 'react';
 
-import { PopoverPrivate } from '@snack-uikit/popover-private';
+import { Dropdown } from '@snack-uikit/dropdown';
 import { Scroll } from '@snack-uikit/scroll';
 
 import { TAG_ROW_TEST_IDS } from '../../components/TagRow/constants';
@@ -19,11 +19,11 @@ type TagMoreProps = {
 
 export function TagMore({ items, text = '', size = SIZE.Xs, buttonRef, onItemRemove }: TagMoreProps) {
   return (
-    <PopoverPrivate
+    <Dropdown
       placement='bottom-end'
       trigger='hoverAndFocusVisible'
       triggerClassName={styles.triggerClassName}
-      popoverContent={
+      content={
         <div className={styles.tagRowDroplistContainer} data-size={size}>
           <Scroll className={styles.tagRowDroplistScroll} size='s' barHideStrategy='move' resize='none'>
             <TagRowSimple
@@ -35,7 +35,6 @@ export function TagMore({ items, text = '', size = SIZE.Xs, buttonRef, onItemRem
           </Scroll>
         </div>
       }
-      hasArrow={false}
     >
       <button
         type='button'
@@ -44,6 +43,6 @@ export function TagMore({ items, text = '', size = SIZE.Xs, buttonRef, onItemRem
         data-size={size}
         data-test-id={TAG_ROW_TEST_IDS.moreButton}
       >{`${text}${items.length}`}</button>
-    </PopoverPrivate>
+    </Dropdown>
   );
 }

package/src/helperComponents/TagMore/styles.module.scss

@@ -1,6 +1,5 @@
 @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-tag';
 @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-dropList';
 
 $sizes: 'xs', 's';
 
@@ -40,11 +39,6 @@ $label-typography: (
 }
 
 .tagRowDroplistContainer {
-  @include composite-var($drop-list-container);
-
-  background-color: $sys-neutral-background2-level;
-  box-shadow: $box-shadow-elevation-level4;
-
   @each $size in $sizes {
     &[data-size=#{$size}] {
       @include composite-var($tag-list, $size);

package/src/helperComponents/TagRowTruncated/TagRowTruncated.tsx

@@ -1,5 +1,5 @@
 import cn from 'classnames';
-import { useEffect, useRef, useState } from 'react';
+import { memo, useEffect, useRef, useState } from 'react';
 
 import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 
@@ -20,7 +20,7 @@ type TagRowTruncatedProps = WithSupportProps<{
   onItemRemove?(item: string): void;
 }>;
 
-export function TagRowTruncated({
+function TagRowTruncatedInner({
   items,
   rowLimit,
   size,
@@ -124,3 +124,5 @@ export function TagRowTruncated({
     </div>
   );
 }
+
+export const TagRowTruncated = memo(TagRowTruncatedInner);

package/src/helperComponents/TagRowTruncated/styles.module.scss

@@ -6,6 +6,7 @@ $sizes: 'xs', 's';
 .wrapper {
   position: relative;
 
+  overflow: hidden;
   display: flex;
   flex-wrap: wrap;
 

package/src/types.ts

@@ -8,10 +8,10 @@ export type Size = ValueOf<typeof SIZE>;
 
 export type TagRowItem = {
   label: string;
-  color?: Appearance;
+  appearance?: Appearance;
 };
 
 export type TagRowItemInner = {
   label: string;
-  color: Appearance;
+  appearance: Appearance;
 };