@snack-uikit/list 0.1.1-preview-57c837e3.0

package/src/helperComponents/CollapseBlockPrivate/CollapseBlockPrivate.tsx

@@ -0,0 +1,34 @@
+import cn from 'classnames';
+import { ReactNode } from 'react';
+
+import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+
+import styles from './styles.module.scss';
+
+export type CollapseBlockPrivateProps = WithSupportProps<{
+  children: ReactNode;
+  header: ReactNode;
+  expanded: boolean;
+  className?: string;
+}>;
+
+// TODO: Add animation. Solution like in Accordion/Tree does not work with Scroll =(
+export function CollapseBlockPrivate({ children, expanded, className, header, ...rest }: CollapseBlockPrivateProps) {
+  return (
+    <div
+      className={cn(styles.accordion, className)}
+      role='menuitem'
+      aria-haspopup
+      aria-expanded={expanded}
+      {...extractSupportProps(rest)}
+    >
+      {header}
+
+      <div className={styles.contentWrapper} aria-hidden={!expanded}>
+        <div className={styles.content} data-content>
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/helperComponents/CollapseBlockPrivate/index.ts

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

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

@@ -0,0 +1,51 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+
+$duration: 300ms;
+
+.accordion {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  transition: gap $duration;
+
+  &::-webkit-scrollbar {
+    width: 0;
+  }
+
+  &[aria-expanded='false'] {
+    gap: 0;
+  }
+}
+
+.contentWrapper {
+  box-sizing: border-box;
+  width: 100%;
+
+  &[aria-hidden='false'] {
+    > div[data-content] {
+      display: block;
+    }
+  }
+}
+
+.content {
+  position: relative;
+  display: none;
+  box-sizing: border-box;
+  width: 100%;
+
+  &::before {
+    pointer-events: none;
+    content: '';
+
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    width: 100%;
+    height: 100%;
+
+    opacity: $opacity-a004;
+    background-color: $sys-neutral-accent-default;
+  }
+}

package/src/helperComponents/HiddenTabButton/HiddenTabButton.tsx

@@ -0,0 +1,27 @@
+import { FocusEvent, forwardRef, KeyboardEvent, RefObject, useCallback } from 'react';
+
+import styles from './styles.module.scss';
+
+type HiddenTabButtonProps = {
+  listRef: RefObject<HTMLElement>;
+};
+
+export const HiddenTabButton = forwardRef<HTMLButtonElement, HiddenTabButtonProps>(({ listRef }, ref) => {
+  const handleFocus = useCallback(
+    (e: FocusEvent<HTMLButtonElement>) => {
+      if (e.relatedTarget !== listRef.current) {
+        listRef.current?.focus();
+      }
+
+      e.preventDefault();
+      e.stopPropagation();
+    },
+    [listRef],
+  );
+
+  const handleKeyDown = useCallback((e: KeyboardEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+  }, []);
+
+  return <button aria-hidden ref={ref} onKeyDown={handleKeyDown} onFocus={handleFocus} className={styles.hiddenBtn} />;
+});

package/src/helperComponents/HiddenTabButton/index.ts

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

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

@@ -0,0 +1,11 @@
+.hiddenBtn {
+  position: absolute;
+
+  width: 0;
+  height: 0;
+  margin: 0;
+  padding: 0;
+
+  border: none;
+  outline: none;
+}

package/src/helperComponents/Separator/Separator.tsx

@@ -0,0 +1,33 @@
+import { Divider } from '@snack-uikit/divider';
+
+import styles from './styles.module.scss';
+
+export type SeparatorProps = {
+  label?: string;
+  mode?: 'primary' | 'secondary';
+  divider?: boolean;
+  size?: 's' | 'm' | 'l';
+};
+
+export function Separator({ label, divider, mode = 'secondary', size = 's' }: SeparatorProps) {
+  if (label) {
+    return (
+      <div className={styles.separatorWithLabel} data-size={size}>
+        <span className={styles.label} data-mode={mode}>
+          {label}
+        </span>
+        {divider && <Divider weight={mode === 'primary' ? 'regular' : 'light'} />}
+      </div>
+    );
+  }
+
+  if (divider) {
+    return (
+      <div className={styles.separatorWithoutLabel} data-size={size}>
+        <Divider weight='regular' />
+      </div>
+    );
+  }
+
+  return null;
+}

package/src/helperComponents/Separator/index.ts

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

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

@@ -0,0 +1,63 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-dropList';
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+
+$sizes: 's', 'm', 'l';
+
+$typography-primary: (
+  's': $sans-label-m,
+  'm': $sans-label-l,
+  'l': $sans-title-m,
+);
+
+$typography-secondary: (
+  's': $light-label-m,
+  'm': $light-label-l,
+  'l': $light-title-m,
+);
+
+.separatorWithLabel {
+  display: flex;
+  gap: $dimension-1m;
+  align-items: flex-end;
+  box-sizing: border-box;
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      @include composite-var($drop-list, 'item', $size, 'container-separator-subheader');
+
+      .label {
+        &[data-mode='primary'] {
+          @include composite-var(simple-var($typography-primary, $size));
+        }
+        &[data-mode='secondary'] {
+          @include composite-var(simple-var($typography-secondary, $size));
+        }
+      }
+    }
+  }
+}
+
+.separatorWithoutLabel {
+  display: flex;
+  align-items: flex-end;
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      @include composite-var($drop-list, 'item', $size, 'container-separator');
+    }
+  }
+
+  box-sizing: border-box;
+}
+
+.label {
+  flex-shrink: 0;
+
+  &[data-mode='primary'] {
+    color: $sys-neutral-text-main;
+  }
+
+  &[data-mode='secondary'] {
+    color: $sys-neutral-text-light;
+  }
+}

package/src/helperComponents/index.ts

@@ -0,0 +1,3 @@
+export * from './CollapseBlockPrivate';
+export * from './Separator';
+export * from './HiddenTabButton';

package/src/index.ts

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

package/src/types.ts

@@ -0,0 +1,14 @@
+import { RefObject } from 'react';
+
+export type SearchState = {
+  placeholder?: string;
+  value?: string;
+  onChange(value: string): void;
+  loading?: boolean;
+};
+
+export type ScrollProps = {
+  scroll?: boolean;
+  scrollRef?: RefObject<HTMLElement>;
+  scrollContainerRef?: RefObject<HTMLElement>;
+};

package/src/utils.ts

@@ -0,0 +1,106 @@
+import { RefObject } from 'react';
+
+import {
+  isAccordionItemProps,
+  isBaseItemProps,
+  isGroupItemProps,
+  isNextListItemProps,
+  ItemProps,
+} from './components/Items';
+
+type WithCollapsedItemsProps = {
+  items: ItemProps[];
+  openCollapsedItems: Array<number | string>;
+};
+
+export function withCollapsedItems({ items, openCollapsedItems }: WithCollapsedItemsProps) {
+  let itemRefs: RefObject<HTMLButtonElement>[] = [];
+  let newItems: ItemProps[] = [];
+  let ids: Array<string | number> = [];
+  let expandedIds: Array<string | number> = [];
+
+  items.forEach(item => {
+    if ((isBaseItemProps(item) || isNextListItemProps(item) || isAccordionItemProps(item)) && !item.disabled) {
+      newItems = newItems.concat([item]);
+      ids = ids.concat([item.id ?? '']);
+
+      if (item.itemRef) {
+        itemRefs = itemRefs.concat([item.itemRef]);
+      }
+    }
+
+    if (isNextListItemProps(item) && item.id && !item.disabled) {
+      expandedIds = expandedIds.concat(item.id);
+    }
+
+    if (isGroupItemProps(item)) {
+      const { itemRefs: nestedItemsRefs, ids: nestedIds } = withCollapsedItems({
+        items: item.items,
+        openCollapsedItems,
+      });
+
+      ids = ids.concat(nestedIds);
+
+      itemRefs = itemRefs.concat(nestedItemsRefs);
+    }
+
+    if (isAccordionItemProps(item) && item.id && openCollapsedItems.includes(item.id)) {
+      const {
+        itemRefs: nestedItemsRefs,
+        ids: nestedIds,
+        items: nestedItems,
+        expandedIds: nestedExpandedIds,
+      } = withCollapsedItems({
+        items: item.items,
+        openCollapsedItems,
+      });
+
+      ids = ids.concat(nestedIds);
+      newItems = newItems.concat(nestedItems);
+      itemRefs = itemRefs.concat(nestedItemsRefs);
+      expandedIds = expandedIds.concat(nestedExpandedIds);
+    }
+  });
+
+  return { items, itemRefs, ids, expandedIds };
+}
+
+export function extractItemRefs(items: ItemProps[]): RefObject<HTMLButtonElement>[] {
+  return items.reduce((prev: RefObject<HTMLButtonElement>[], item: ItemProps) => {
+    if (isGroupItemProps(item)) {
+      return prev.concat(extractItemRefs(item.items));
+    }
+    return item.itemRef ? prev.concat([item.itemRef]) : prev;
+  }, [] as RefObject<HTMLButtonElement>[]);
+}
+
+export function extractItemIds(items: ItemProps[]): Array<string | number> {
+  return items.reduce(
+    (prev: Array<string | number>, item: ItemProps) => {
+      if (isGroupItemProps(item)) {
+        return prev.concat(extractItemIds(item.items));
+      }
+      return item.id ? prev.concat([item.id]) : prev;
+    },
+    [] as Array<string | number>,
+  );
+}
+
+export function extractChildIds({ items }: { items: ItemProps[] }): Array<string | number> {
+  return items
+    .filter(item => isAccordionItemProps(item) || isNextListItemProps(item) || isGroupItemProps(item) || !item.disabled)
+    .reduce(
+      (prev: Array<string | number>, item: ItemProps) => {
+        if (isAccordionItemProps(item) || isNextListItemProps(item)) {
+          return prev.concat([item.id ?? '']).concat(extractChildIds({ items: item.items }));
+        }
+
+        if (isGroupItemProps(item)) {
+          return prev.concat(extractChildIds({ items: item.items }));
+        }
+
+        return item.id && !isGroupItemProps(item) ? prev.concat([item.id]) : prev;
+      },
+      [] as Array<string | number>,
+    );
+}