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

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

@@ -0,0 +1,61 @@
+@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';
+
+$label-typography: (
+  'xs': $sans-label-s,
+  's': $sans-label-m
+);
+
+.button {
+  cursor: pointer;
+
+  display: inline-flex;
+  align-items: center;
+
+  box-sizing: border-box;
+
+  color: $sys-neutral-text-support;
+  white-space: nowrap;
+
+  background: none;
+  border-color: $sys-neutral-decor-disabled;
+  border-style: solid;
+
+  &:focus-visible {
+    @include outline-var($container-focused-s);
+
+    outline-color: $sys-available-complementary;
+  }
+
+  @each $size in $sizes {
+    @include composite-var($label-typography, $size);
+
+    &[data-size=#{$size}] {
+      @include composite-var($tag-more, 'container', $size, 'label-only');
+    }
+  }
+}
+
+.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);
+    }
+  }
+}
+
+.tagRowDroplistScroll {
+  max-height: 200px;
+}
+
+.triggerClassName {
+  --offset: #{$space-drop-list-drop-offset}; 
+}

package/src/helperComponents/TagRowSimple/TagRowSimple.tsx

@@ -0,0 +1,25 @@
+import cn from 'classnames';
+import { Ref } from 'react';
+
+import { extractSupportProps } from '@snack-uikit/utils';
+
+import { Size } from '../../constants';
+import { TagRowItemInner } from '../../types';
+import { TagList } from '../TagList';
+import styles from './styles.module.scss';
+
+type TagRowSimpleProps = {
+  items: TagRowItemInner[];
+  size: Size;
+  onItemRemove?(item: string): void;
+  setTagRef?(item: TagRowItemInner): Ref<HTMLDivElement>;
+  className?: string;
+};
+
+export function TagRowSimple({ items, size, onItemRemove, setTagRef, className, ...rest }: TagRowSimpleProps) {
+  return (
+    <div className={cn(styles.tagRowSimpleWrapper, className)} {...extractSupportProps(rest)} data-size={size}>
+      <TagList items={items} size={size} onItemRemove={onItemRemove} setTagRef={setTagRef} />
+    </div>
+  );
+}

package/src/helperComponents/TagRowSimple/index.ts

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

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

@@ -0,0 +1,14 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-tag';
+
+$sizes: 'xs', 's';
+
+.tagRowSimpleWrapper {
+  display: flex;
+  flex-wrap: wrap;
+
+  @each $size in $sizes {
+    &[data-size=#{$size}] {
+      @include composite-var($tag-row, $size);
+    }
+  }
+}

package/src/helperComponents/TagRowTruncated/TagRowTruncated.tsx

@@ -0,0 +1,127 @@
+import cn from 'classnames';
+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 { TagList } from '../TagList';
+import { TagMore } from '../TagMore';
+import { useResizeObserver } from './hooks';
+import styles from './styles.module.scss';
+import { getGapWidth } from './utils';
+
+type TagRowTruncatedProps = WithSupportProps<{
+  items: TagRowItemInner[];
+  rowLimit: number;
+  moreButtonLabel?: string;
+  size: Size;
+  className?: string;
+  onItemRemove?(item: string): void;
+}>;
+
+export function TagRowTruncated({
+  items,
+  rowLimit,
+  size,
+  moreButtonLabel = '',
+  className,
+  onItemRemove,
+  ...rest
+}: TagRowTruncatedProps) {
+  const [visibleTags, setVisibleTags] = useState<TagRowItemInner[]>([]);
+  const [hiddenTags, setHiddenTags] = useState<TagRowItemInner[]>([]);
+
+  const hiddenRowElementRef = useRef<HTMLDivElement>(null);
+  const hiddenMoreButtonRef = useRef<HTMLButtonElement>(null);
+  const hiddenMoreButtonWrapperRef = useRef<HTMLDivElement>(null);
+
+  const [firstTagElement, setFirstTagElement] = useState<HTMLElement | null>(null);
+  const tagsMapRef = useRef(new Map<TagRowItemInner, HTMLElement | null>());
+
+  const { width: maxWidth } = useResizeObserver(hiddenRowElementRef.current);
+  const { width: firstVisibleTagWidth } = useResizeObserver(firstTagElement);
+
+  function setTagElement(tag: TagRowItemInner, index: number) {
+    return (tagElement: HTMLElement | null) => {
+      if (index === 0 && tagElement) {
+        setFirstTagElement(tagElement);
+      }
+
+      if (tagElement === null) {
+        tagsMapRef.current.delete(tag);
+      } else {
+        tagsMapRef.current.set(tag, tagElement);
+      }
+    };
+  }
+
+  const gapWidth = getGapWidth(hiddenRowElementRef);
+
+  useEffect(() => {
+    if (maxWidth < 1) {
+      return;
+    }
+
+    const newVisibleTags: TagRowItemInner[] = [];
+    const newHiddenTags: TagRowItemInner[] = [];
+
+    const moreButtonWidth = hiddenMoreButtonRef.current?.offsetWidth || 0;
+
+    let currentRowWidth = 0;
+    let currentRowCount = 1;
+
+    tagsMapRef.current.forEach((tagElement, tagRowItem) => {
+      const tagWidth = 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 (
+    <div className={cn(styles.wrapper, className)} {...extractSupportProps(rest)} data-size={size}>
+      <div className={styles.hiddenRow} ref={hiddenRowElementRef} data-size={size}>
+        <TagList items={items} size={size} onItemRemove={onItemRemove} setTagRef={setTagElement} />
+      </div>
+      <div className={styles.hiddenMoreButton} ref={hiddenMoreButtonWrapperRef}>
+        <TagMore items={items} text={moreButtonLabel} size={size} buttonRef={hiddenMoreButtonRef} />
+      </div>
+      <div className={styles.visibleRow} data-size={size} data-test-id={TAG_ROW_TEST_IDS.visibleTagsWrapper}>
+        <TagList items={visibleTags} size={size} onItemRemove={onItemRemove} />
+        {hiddenTags.length > 0 && (
+          <TagMore items={hiddenTags} text={moreButtonLabel} size={size} onItemRemove={onItemRemove} />
+        )}
+      </div>
+    </div>
+  );
+}

package/src/helperComponents/TagRowTruncated/hooks.ts

@@ -0,0 +1,23 @@
+import { useEffect, useState } from 'react';
+
+export const useResizeObserver = (element: HTMLElement | null) => {
+  const [width, setWidth] = useState<number>(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/src/helperComponents/TagRowTruncated/index.ts

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

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

@@ -0,0 +1,57 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-tag';
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-dropList';
+
+$sizes: 'xs', 's';
+
+.wrapper {
+  position: relative;
+
+  display: flex;
+  flex-wrap: wrap;
+
+  width: 100%;
+  max-width: 100%;
+
+  @each $size in $sizes {
+    &[data-size=#{$size}] {
+      @include composite-var($tag-row, $size);
+    }
+  }
+}
+
+.visibleRow {
+  display: flex;
+  flex-wrap: wrap;
+  max-width: 100%;
+
+  @each $size in $sizes {
+    &[data-size=#{$size}] {
+      @include composite-var($tag-row, $size);
+    }
+  }
+}
+
+.hiddenRow {
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  display: flex;
+  flex-wrap: wrap;
+
+  width: 100%;
+
+  visibility: hidden;
+
+  @each $size in $sizes {
+    &[data-size=#{$size}] {
+      @include composite-var($tag-row, $size);
+    }
+  }
+}
+
+.hiddenMoreButton {
+  position: absolute;
+  left: 0;
+  visibility: hidden;
+}

package/src/helperComponents/TagRowTruncated/utils.ts

@@ -0,0 +1,7 @@
+import { RefObject } from 'react';
+
+export const getGapWidth = (elementRef: RefObject<HTMLDivElement>): number => {
+  const cssValue = elementRef.current ? getComputedStyle(elementRef.current, null).getPropertyValue('gap') : '0px';
+
+  return parseInt(cssValue);
+};

package/src/helperComponents/index.ts

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

package/src/index.ts

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

package/src/types.ts

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