@snack-uikit/tag 0.5.1 → 0.6.1

package/CHANGELOG.md

@@ -3,6 +3,27 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.6.1 (2023-12-14)
+
+### Only dependencies have been changed
+* [@snack-uikit/icons@0.19.1](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/icons/CHANGELOG.md)
+* [@snack-uikit/popover-private@0.12.1](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/popover-private/CHANGELOG.md)
+
+
+
+
+
+# 0.6.0 (2023-12-14)
+
+
+### BREAKING CHANGES
+
+
+* **FF-3729:** replace enum with unions ([910db4a](https://github.com/cloud-ru-tech/snack-uikit/commit/910db4aa8231ccbc58e538e5c5c1f461b1dec275))
+
+
+
+
 ## 0.5.1 (2023-12-06)
 
 ### Only dependencies have been changed

package/README.md

@@ -12,8 +12,8 @@
 | name | type | default value | description |
 |------|------|---------------|-------------|
 | label* | `string` | - | Текст |
-| size | enum Size: `"xs"`, `"s"` | Size.Xs | Размер |
-| appearance | enum Appearance: `"neutral"`, `"primary"`, `"red"`, `"orange"`, `"yellow"`, `"green"`, `"blue"`, `"violet"`, `"pink"` | Appearance.Neutral | Внешний вид |
+| size | enum Size: `"xs"`, `"s"` | xs | Размер |
+| appearance | enum Appearance: `"neutral"`, `"primary"`, `"red"`, `"orange"`, `"yellow"`, `"green"`, `"blue"`, `"violet"`, `"pink"` | neutral | Внешний вид |
 | onDelete | `MouseEventHandler<HTMLButtonElement>` | - | Коллбэк на удаление |
 | className | `string` | - | CSS-класс |
 ## TagRow
@@ -22,7 +22,7 @@
 |------|------|---------------|-------------|
 | items* | `TagRowItem[]` | - | Массив тэгов |
 | rowLimit | `number` | - | Лимит количества рядов тэгов. При достижении лимита тэги скрываются под кнопкой. Отсутствие лимита или значение равное нулю отобразит весь список |
-| size | enum Size: `"xs"`, `"s"` | Size.Xs | Размер |
+| size | enum Size: `"xs"`, `"s"` | xs | Размер |
 | moreButtonLabel | `string` | - | Текст кнопки, при наведении на которую отображается список скрытых тэгов |
 | className | `string` | - | CSS-класс |
 | onItemRemove | `(item: string) => void` | - | Коллбэк на клик по удалению тэга |

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

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

package/dist/components/Tag/Tag.js

@@ -13,12 +13,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import cn from 'classnames';
 import { CrossSVG } from '@snack-uikit/icons';
 import { extractSupportProps } from '@snack-uikit/utils';
-import { Appearance, Size } from '../../constants';
-import { IconSize } from './constants';
+import { APPEARANCE, SIZE } from '../../constants';
+import { ICON_SIZE } from './constants';
 import styles from './styles.module.css';
 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", Object.assign({ className: styles.label }, { children: label })), onDelete && (_jsx("button", Object.assign({ type: 'button', className: styles.tagButton, onClick: onDelete, "data-test-id": 'tag-remove-button' }, { children: size === Size.Xs ? (_jsx(CrossSVG, { size: IconSize[size], className: styles.icon })) : (_jsx(CrossSVG, { size: IconSize[size], className: styles.icon })) })))] })));
+    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 })) }))] })));
 }
-Tag.sizes = Size;
-Tag.appearances = Appearance;

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

@@ -1,4 +1,4 @@
-export declare const IconSize: {
+export declare const ICON_SIZE: {
     xs: number;
     s: number;
 };

package/dist/components/Tag/constants.js

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

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

@@ -1,6 +1,5 @@
 import { WithSupportProps } from '@snack-uikit/utils';
-import { Appearance, Size } from '../../constants';
-import { TagRowItem } from '../../types';
+import { Size, TagRowItem } from '../../types';
 export type TagRowProps = WithSupportProps<{
     /** Массив тэгов */
     items: TagRowItem[];
@@ -16,7 +15,3 @@ export type TagRowProps = WithSupportProps<{
     onItemRemove?(item: string): void;
 }>;
 export declare function TagRow({ items, rowLimit, size, ...props }: TagRowProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace TagRow {
-    var sizes: typeof Size;
-    var appearances: typeof Appearance;
-}

package/dist/components/TagRow/TagRow.js

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

package/dist/components/TagRow/utils.js

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

package/dist/constants.d.ts

@@ -1,15 +1,15 @@
-export declare enum Appearance {
-    Neutral = "neutral",
-    Primary = "primary",
-    Red = "red",
-    Orange = "orange",
-    Yellow = "yellow",
-    Green = "green",
-    Blue = "blue",
-    Violet = "violet",
-    Pink = "pink"
-}
-export declare enum Size {
-    Xs = "xs",
-    S = "s"
-}
+export declare const APPEARANCE: {
+    readonly Neutral: "neutral";
+    readonly Primary: "primary";
+    readonly Red: "red";
+    readonly Orange: "orange";
+    readonly Yellow: "yellow";
+    readonly Green: "green";
+    readonly Blue: "blue";
+    readonly Violet: "violet";
+    readonly Pink: "pink";
+};
+export declare const SIZE: {
+    readonly Xs: "xs";
+    readonly S: "s";
+};

package/dist/constants.js

@@ -1,17 +1,15 @@
-export var Appearance;
-(function (Appearance) {
-    Appearance["Neutral"] = "neutral";
-    Appearance["Primary"] = "primary";
-    Appearance["Red"] = "red";
-    Appearance["Orange"] = "orange";
-    Appearance["Yellow"] = "yellow";
-    Appearance["Green"] = "green";
-    Appearance["Blue"] = "blue";
-    Appearance["Violet"] = "violet";
-    Appearance["Pink"] = "pink";
-})(Appearance || (Appearance = {}));
-export var Size;
-(function (Size) {
-    Size["Xs"] = "xs";
-    Size["S"] = "s";
-})(Size || (Size = {}));
+export const APPEARANCE = {
+    Neutral: 'neutral',
+    Primary: 'primary',
+    Red: 'red',
+    Orange: 'orange',
+    Yellow: 'yellow',
+    Green: 'green',
+    Blue: 'blue',
+    Violet: 'violet',
+    Pink: 'pink',
+};
+export const SIZE = {
+    Xs: 'xs',
+    S: 's',
+};

package/dist/helperComponents/TagList/TagList.d.ts

@@ -1,6 +1,5 @@
 import { Ref } from 'react';
-import { Size } from '../../constants';
-import { TagRowItemInner } from '../../types';
+import { Size, TagRowItemInner } from '../../types';
 type SetTagRef = (item: TagRowItemInner, index: number) => Ref<HTMLDivElement>;
 type TagListProps = {
     items: TagRowItemInner[];

package/dist/helperComponents/TagList/TagList.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { Tag } from '../../components';
-import { Size } from '../../constants';
+import { SIZE } from '../../constants';
 function renderTag(size, handleRemoveItem, setRef) {
     return function TagRowItem(item, index) {
-        return (_jsx("div", Object.assign({ 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.color, size: size, onDelete: handleRemoveItem === null || handleRemoveItem === void 0 ? void 0 : handleRemoveItem(item) }) }, item.label));
     };
 }
-export function TagList({ items, size = Size.Xs, onItemRemove, setTagRef }) {
+export function TagList({ items, size = SIZE.Xs, onItemRemove, setTagRef }) {
     const handleRemoveItem = onItemRemove ? (item) => () => onItemRemove(item.label) : undefined;
     return _jsx(_Fragment, { children: items.map(renderTag(size, handleRemoveItem, setTagRef)) });
 }

package/dist/helperComponents/TagMore/TagMore.d.ts

@@ -1,6 +1,5 @@
 import { Ref } from 'react';
-import { Size } from '../../constants';
-import { TagRowItemInner } from '../../types';
+import { Size, TagRowItemInner } from '../../types';
 type TagMoreProps = {
     items: TagRowItemInner[];
     size: Size;

package/dist/helperComponents/TagMore/TagMore.js

@@ -2,9 +2,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 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 { 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, Object.assign({ placement: PopoverPrivate.placements.BottomEnd, trigger: PopoverPrivate.triggers.HoverAndFocusVisible, triggerClassName: styles.triggerClassName, popoverContent: _jsx("div", Object.assign({ className: styles.tagRowDroplistContainer, "data-size": size }, { children: _jsx(Scroll, Object.assign({ className: styles.tagRowDroplistScroll, size: Scroll.sizes.S, barHideStrategy: Scroll.barHideStrategies.Move, resize: Scroll.resizes.None }, { children: _jsx(TagRowSimple, { items: items, size: size, onItemRemove: onItemRemove, "data-test-id": TAG_ROW_TEST_IDS.droplistTagsWrapper }) })) })), hasArrow: false }, { children: _jsx("button", Object.assign({ type: 'button', className: styles.button, ref: buttonRef, "data-size": size, "data-test-id": TAG_ROW_TEST_IDS.moreButton }, { children: `${text}${items.length}` })) })));
+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}` }) }));
 }

package/dist/helperComponents/TagRowSimple/TagRowSimple.d.ts

@@ -1,6 +1,5 @@
 import { Ref } from 'react';
-import { Size } from '../../constants';
-import { TagRowItemInner } from '../../types';
+import { Size, TagRowItemInner } from '../../types';
 type TagRowSimpleProps = {
     items: TagRowItemInner[];
     size: Size;

package/dist/helperComponents/TagRowSimple/TagRowSimple.js

@@ -16,5 +16,5 @@ import { TagList } from '../TagList';
 import styles from './styles.module.css';
 export function TagRowSimple(_a) {
     var { items, size, onItemRemove, setTagRef, className } = _a, rest = __rest(_a, ["items", "size", "onItemRemove", "setTagRef", "className"]);
-    return (_jsx("div", Object.assign({ className: cn(styles.tagRowSimpleWrapper, className) }, extractSupportProps(rest), { "data-size": size }, { children: _jsx(TagList, { items: items, size: size, onItemRemove: onItemRemove, setTagRef: setTagRef }) })));
+    return (_jsx("div", Object.assign({ className: cn(styles.tagRowSimpleWrapper, className) }, extractSupportProps(rest), { "data-size": size, children: _jsx(TagList, { items: items, size: size, onItemRemove: onItemRemove, setTagRef: setTagRef }) })));
 }

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

@@ -1,6 +1,5 @@
 import { WithSupportProps } from '@snack-uikit/utils';
-import { Size } from '../../constants';
-import { TagRowItemInner } from '../../types';
+import { Size, TagRowItemInner } from '../../types';
 type TagRowTruncatedProps = WithSupportProps<{
     items: TagRowItemInner[];
     rowLimit: number;

package/dist/helperComponents/TagRowTruncated/TagRowTruncated.js

@@ -83,5 +83,5 @@ export function TagRowTruncated(_a) {
         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 }))] }))] })));
+    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 }))] })] })));
 }

package/dist/types.d.ts

@@ -1,4 +1,7 @@
-import { Appearance } from './constants';
+import { ValueOf } from '@snack-uikit/utils';
+import { APPEARANCE, SIZE } from './constants';
+export type Appearance = ValueOf<typeof APPEARANCE>;
+export type Size = ValueOf<typeof SIZE>;
 export type TagRowItem = {
     label: string;
     color?: Appearance;

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Tag",
-  "version": "0.5.1",
+  "version": "0.6.1",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -32,11 +32,11 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/icons": "0.19.0",
-    "@snack-uikit/popover-private": "0.11.1",
-    "@snack-uikit/scroll": "0.4.1",
-    "@snack-uikit/utils": "3.1.0",
+    "@snack-uikit/icons": "0.19.1",
+    "@snack-uikit/popover-private": "0.12.1",
+    "@snack-uikit/scroll": "0.5.0",
+    "@snack-uikit/utils": "3.2.0",
     "classnames": "2.3.2"
   },
-  "gitHead": "76a159dde7baccf49dc7b11e1fd7abc31424b42f"
+  "gitHead": "62f43bf0cbfd611d0b746117400f67096b1790f6"
 }

package/src/components/Tag/Tag.tsx

@@ -4,8 +4,9 @@ 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 { APPEARANCE, SIZE } from '../../constants';
+import { Appearance, Size } from '../../types';
+import { ICON_SIZE } from './constants';
 import styles from './styles.module.scss';
 
 export type TagProps = WithSupportProps<{
@@ -23,8 +24,8 @@ export type TagProps = WithSupportProps<{
 
 export function Tag({
   label,
-  size = Size.Xs,
-  appearance = Appearance.Neutral,
+  size = SIZE.Xs,
+  appearance = APPEARANCE.Neutral,
   onDelete,
   className,
   ...rest
@@ -40,16 +41,13 @@ export function Tag({
       <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} />
+          {size === SIZE.Xs ? (
+            <CrossSVG size={ICON_SIZE[size]} className={styles.icon} />
           ) : (
-            <CrossSVG size={IconSize[size]} className={styles.icon} />
+            <CrossSVG size={ICON_SIZE[size]} className={styles.icon} />
           )}
         </button>
       )}
     </span>
   );
 }
-
-Tag.sizes = Size;
-Tag.appearances = Appearance;

package/src/components/Tag/constants.ts

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

package/src/components/TagRow/TagRow.tsx

@@ -1,8 +1,8 @@
 import { WithSupportProps } from '@snack-uikit/utils';
 
-import { Appearance, Size } from '../../constants';
+import { SIZE } from '../../constants';
 import { TagRowSimple, TagRowTruncated } from '../../helperComponents';
-import { TagRowItem } from '../../types';
+import { Size, TagRowItem } from '../../types';
 import { mapTagRowItem } from './utils';
 
 export type TagRowProps = WithSupportProps<{
@@ -20,7 +20,7 @@ export type TagRowProps = WithSupportProps<{
   onItemRemove?(item: string): void;
 }>;
 
-export function TagRow({ items, rowLimit, size = Size.Xs, ...props }: TagRowProps) {
+export function TagRow({ items, rowLimit, size = SIZE.Xs, ...props }: TagRowProps) {
   const coloredItems = items.map(mapTagRowItem);
 
   if (rowLimit) {
@@ -29,6 +29,3 @@ export function TagRow({ items, rowLimit, size = Size.Xs, ...props }: TagRowProp
 
   return <TagRowSimple items={coloredItems} size={size} {...props} />;
 }
-
-TagRow.sizes = Size;
-TagRow.appearances = Appearance;

package/src/components/TagRow/utils.ts

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

package/src/constants.ts

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

package/src/helperComponents/TagList/TagList.tsx

@@ -1,8 +1,8 @@
 import { Ref } from 'react';
 
 import { Tag } from '../../components';
-import { Size } from '../../constants';
-import { TagRowItemInner } from '../../types';
+import { SIZE } from '../../constants';
+import { Size, TagRowItemInner } from '../../types';
 
 type SetTagRef = (item: TagRowItemInner, index: number) => Ref<HTMLDivElement>;
 
@@ -25,7 +25,7 @@ function renderTag(size: Size, handleRemoveItem?: (item: TagRowItemInner) => OnD
   };
 }
 
-export function TagList({ items, size = Size.Xs, onItemRemove, setTagRef }: TagListProps) {
+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/TagMore/TagMore.tsx

@@ -4,8 +4,8 @@ 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 { SIZE } from '../../constants';
+import { Size, TagRowItemInner } from '../../types';
 import { TagRowSimple } from '../TagRowSimple';
 import styles from './styles.module.scss';
 
@@ -17,20 +17,15 @@ type TagMoreProps = {
   onItemRemove?(item: string): void;
 };
 
-export function TagMore({ items, text = '', size = Size.Xs, buttonRef, onItemRemove }: TagMoreProps) {
+export function TagMore({ items, text = '', size = SIZE.Xs, buttonRef, onItemRemove }: TagMoreProps) {
   return (
     <PopoverPrivate
-      placement={PopoverPrivate.placements.BottomEnd}
-      trigger={PopoverPrivate.triggers.HoverAndFocusVisible}
+      placement='bottom-end'
+      trigger='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}
-          >
+          <Scroll className={styles.tagRowDroplistScroll} size='s' barHideStrategy='move' resize='none'>
             <TagRowSimple
               items={items}
               size={size}

package/src/helperComponents/TagRowSimple/TagRowSimple.tsx

@@ -3,8 +3,7 @@ import { Ref } from 'react';
 
 import { extractSupportProps } from '@snack-uikit/utils';
 
-import { Size } from '../../constants';
-import { TagRowItemInner } from '../../types';
+import { Size, TagRowItemInner } from '../../types';
 import { TagList } from '../TagList';
 import styles from './styles.module.scss';
 

package/src/helperComponents/TagRowTruncated/TagRowTruncated.tsx

@@ -4,8 +4,7 @@ import { useEffect, useRef, useState } from 'react';
 import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 
 import { TAG_ROW_TEST_IDS } from '../../components/TagRow/constants';
-import { Size } from '../../constants';
-import { TagRowItemInner } from '../../types';
+import { Size, TagRowItemInner } from '../../types';
 import { TagList } from '../TagList';
 import { TagMore } from '../TagMore';
 import { useResizeObserver } from './hooks';

package/src/types.ts

@@ -1,4 +1,10 @@
-import { Appearance } from './constants';
+import { ValueOf } from '@snack-uikit/utils';
+
+import { APPEARANCE, SIZE } from './constants';
+
+export type Appearance = ValueOf<typeof APPEARANCE>;
+
+export type Size = ValueOf<typeof SIZE>;
 
 export type TagRowItem = {
   label: string;