@sats-group/ui-lib 80.4.0 → 81.0.0

package/react/chip-selected/chip-selected.tsx

@@ -1,102 +0,0 @@
-import * as React from 'react';
-
-import ChevronDown from '../icons/24/arrow-down';
-import ChevronUp from '../icons/24/arrow-up';
-import Chip from '../chip/chip';
-import Text from '../text';
-import Link from '../link';
-import Collapse from '../collapse';
-
-import useEvent from '../hooks/use-event';
-
-import { ChipSelected as Props } from './chip-selected.types';
-
-const ChipSelected: React.FC<Props> = ({
-  resetSelected,
-  description,
-  hideSelected,
-  maxChipsToShow = 41,
-  showSelected,
-  chips,
-}) => {
-  const [expandedSelectedValues, setExpandedSelectedValues] =
-    React.useState(false);
-
-  const [heightOfCollapse, setHeightOfCollapse] = React.useState<
-    number | undefined
-  >(0);
-  const divRef = React.useRef<HTMLDivElement>(null);
-
-  const updateSize = () => {
-    if (divRef && divRef.current) {
-      setHeightOfCollapse(divRef.current.clientHeight);
-    }
-  };
-
-  useEvent('resize', updateSize);
-
-  React.useEffect(() => {
-    if (divRef && divRef.current) {
-      setHeightOfCollapse(divRef.current.clientHeight);
-    }
-  }, [divRef]);
-
-  const toggleShowMore = () => {
-    setExpandedSelectedValues(prevState => !prevState);
-  };
-
-  return chips ? (
-    <div className="chip-selected__selected-options-wrapper">
-      <div className="chip-selected__clear-all-button">
-        <Text>{description}</Text>
-        <Link {...resetSelected} />
-      </div>
-      <div>
-        <Collapse
-          className="chip-selected__collapse"
-          isOpen={expandedSelectedValues}
-        >
-          <div className="chip-selected__selected-options" ref={divRef}>
-            {chips.map(chip => (
-              <Chip {...chip} key={chip.text} />
-            ))}
-          </div>
-        </Collapse>
-
-        {heightOfCollapse && heightOfCollapse > maxChipsToShow ? (
-          <button
-            type="button"
-            className="chip-selected__expand"
-            onClick={toggleShowMore}
-          >
-            {expandedSelectedValues ? (
-              <>
-                <Text
-                  elementName="span"
-                  size={Text.sizes.small}
-                  className="chip-selected__expand-text"
-                >
-                  {hideSelected}
-                </Text>
-                <ChevronUp />
-              </>
-            ) : (
-              <>
-                <Text
-                  elementName="span"
-                  size={Text.sizes.small}
-                  className="chip-selected__expand-text"
-                >
-                  {showSelected}
-                </Text>
-                <ChevronDown />
-              </>
-            )}
-          </button>
-        ) : null}
-      </div>
-    </div>
-  ) : null;
-};
-
-export default ChipSelected;

package/react/chip-selected/chip-selected.types.ts

@@ -1,11 +0,0 @@
-import type { Chip } from '../chip/chip.types';
-import { Link } from '../link/link.types';
-
-export type ChipSelected = {
-  hideSelected: string;
-  maxChipsToShow?: number;
-  resetSelected: Link;
-  description: string;
-  showSelected: string;
-  chips?: Chip[];
-};

package/react/collapse/collapse.tsx

@@ -1,179 +0,0 @@
-import React, { Component, createRef } from 'react';
-
-import { Collapse as Props } from './collapse.types';
-
-interface CollapseState {
-  height: number | null;
-  isAnimating: boolean;
-  isMounted: boolean;
-  isOpen: boolean;
-  shouldAnimate?: boolean;
-}
-
-class Collapse extends Component<Props, CollapseState> {
-  static defaultProps: Props = {
-    animateChildren: false,
-    component: 'div',
-    componentProps: {},
-    duration: 500,
-    easing: 'cubic-bezier(0.3,0,0,1)',
-    forceInitialAnimation: false,
-    isOpen: false,
-    onMeasure: () => {},
-    unmountChildren: false,
-  };
-
-  state: CollapseState = {
-    height: this.props.forceInitialAnimation || !this.props.isOpen ? 0 : null,
-    isAnimating: false,
-    isMounted: false,
-    isOpen: this.props.isOpen || false,
-  };
-
-  private wrapperRef = createRef<HTMLElement>();
-  private previousHeight: number = 0;
-  private raf: number | null = null;
-  private timer: number | null = null;
-  private isAnimating: boolean = false;
-
-  getHeight = (): number => {
-    const child = this.wrapperRef.current
-      ?.firstElementChild as HTMLElement | null;
-    return child ? Math.max(child.offsetHeight - 1, 0) : 0; // -1px to avoid jump after transition
-  };
-
-  transition = () => {
-    const newHeight = this.props.isOpen ? this.getHeight() : 0;
-
-    clearTimeout(this.timer!);
-    cancelAnimationFrame(this.raf!);
-    this.isAnimating = true;
-
-    this.setState(
-      { height: this.previousHeight, isAnimating: true, shouldAnimate: false },
-      () => {
-        this.previousHeight = newHeight;
-        this.raf = requestAnimationFrame(() => {
-          this.raf = requestAnimationFrame(() => {
-            this.setState({ height: newHeight }, () => {
-              this.timer = window.setTimeout(() => {
-                this.setState(
-                  {
-                    height: this.props.isOpen ? null : 0,
-                    isAnimating: false,
-                  },
-                  () => {
-                    this.isAnimating = false;
-                  },
-                );
-              }, this.props.duration);
-            });
-          });
-        });
-      },
-    );
-  };
-
-  componentDidMount() {
-    this.setState({ isMounted: true }, () => {
-      if (this.props.forceInitialAnimation) {
-        this.transition();
-      } else {
-        this.previousHeight = this.props.isOpen ? this.getHeight() : 0;
-        this.setState({ isAnimating: false });
-      }
-    });
-  }
-
-  onTransitionEnd = () => {
-    this.previousHeight = this.getHeight();
-  };
-
-  static getDerivedStateFromProps(
-    nextProps: Props,
-    prevState: CollapseState,
-  ): Partial<CollapseState> | null {
-    const openDidChange = nextProps.isOpen !== prevState.isOpen;
-    const forceAnimation =
-      !prevState.isMounted &&
-      nextProps.forceInitialAnimation &&
-      nextProps.isOpen;
-
-    return {
-      isOpen: nextProps.isOpen || false,
-      shouldAnimate: openDidChange || forceAnimation,
-    };
-  }
-
-  getSnapshotBeforeUpdate(): number {
-    return this.props.isOpen ? this.getHeight() : 0;
-  }
-
-  componentDidUpdate(
-    _prevProps: Props,
-    _prevState: CollapseState,
-    snapshot: number,
-  ) {
-    if (this.isAnimating && !this.state.shouldAnimate) {
-      return;
-    }
-
-    const newHeight = this.getHeight();
-    const childrenDidChange = newHeight !== snapshot;
-    this.props.onMeasure!(newHeight);
-
-    if (
-      this.state.shouldAnimate ||
-      (childrenDidChange && this.props.animateChildren)
-    ) {
-      this.transition();
-    } else if (childrenDidChange) {
-      this.previousHeight = this.getHeight();
-    }
-  }
-
-  componentWillUnmount() {
-    clearTimeout(this.timer!);
-    cancelAnimationFrame(this.raf!);
-  }
-
-  render() {
-    const { isAnimating, isMounted } = this.state;
-    const {
-      component = 'div',
-      componentProps = {},
-      forceInitialAnimation,
-      isOpen,
-      unmountChildren,
-      className,
-      children,
-    } = this.props;
-    const shouldMount = unmountChildren ? isOpen || isAnimating : true;
-    const initiallyHidden = !isMounted && forceInitialAnimation && isOpen;
-
-    return React.createElement(
-      component,
-      {
-        ...componentProps,
-        className: className,
-        onTransitionEnd: this.onTransitionEnd,
-        ref: this.wrapperRef,
-        style: {
-          ...componentProps.style,
-          height: this.state.height,
-          overflow:
-            isAnimating || !isOpen || initiallyHidden ? 'hidden' : undefined,
-          visibility:
-            (!isAnimating && !isOpen) || initiallyHidden ? 'hidden' : undefined,
-          transition:
-            isAnimating || initiallyHidden
-              ? `height ${this.props.duration}ms ${this.props.easing}`
-              : undefined,
-        },
-      },
-      shouldMount && children,
-    );
-  }
-}
-
-export default Collapse;

package/react/collapse/collapse.types.ts

@@ -1,13 +0,0 @@
-export type Collapse = {
-  animateChildren?: boolean;
-  component?: string;
-  componentProps?: React.HTMLAttributes<HTMLElement>;
-  duration?: number;
-  easing?: string;
-  forceInitialAnimation?: boolean;
-  isOpen?: boolean;
-  onMeasure?: (height: number) => void;
-  unmountChildren?: boolean;
-  className?: string;
-  children?: React.ReactNode;
-};

package/react/components.ts

@@ -1,83 +0,0 @@
-export const names = [
-  'badge',
-  'banner',
-  'bomb',
-  'button',
-  'checkbox',
-  'chip',
-  'chip-selected',
-  'collapse',
-  'confirmation',
-  'context-menu',
-  'cropped-image',
-  'div-button',
-  'dropdown-list',
-  'expander',
-  'filter',
-  'filter-wrapper',
-  'flag',
-  'form-content',
-  'hidden-input',
-  'link',
-  'link-button',
-  'link-card',
-  'message',
-  'message-field',
-  'modal',
-  'progress-bar',
-  'radio',
-  'scale-bar',
-  'search',
-  'select',
-  'select-option',
-  'tag',
-  'text',
-  'text-area',
-  'text-input',
-  'toggle',
-  'toolbox',
-  'visually-button',
-  'visually-hidden',
-];
-
-export const selectors = [
-  '.badge',
-  '.banner',
-  '.bomb',
-  '.button',
-  '.checkbox',
-  '.chip',
-  '.chip-selected',
-  '.collapse',
-  '.confirmation',
-  '.context-menu',
-  '.cropped-image',
-  '.div-button',
-  '.dropdown-list',
-  '.expander',
-  '.filter',
-  '.filter-wrapper',
-  '.flag',
-  '.form-content',
-  '.hidden-input',
-  '.link',
-  '.link-button',
-  '.link-card',
-  '.message',
-  '.message-field',
-  '.modal',
-  '.progress-bar',
-  '.radio',
-  '.scale-bar',
-  '.search',
-  '.select',
-  '.select-option',
-  '.tag',
-  '.text',
-  '.text-area',
-  '.text-input',
-  '.toggle',
-  '.toolbox',
-  '.visually-button',
-  '.visually-hidden',
-];

package/react/confirmation/confirmation.tsx

@@ -1,90 +0,0 @@
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-
-import Button from '../button';
-import LinkButton from '../link-button';
-import TabTrapper from '../modal/tab-trapper';
-import Text from '../text';
-import useEscape from '../hooks/use-escape';
-import { useIsMounted } from '../hooks/use-is-mounted';
-
-import { Confirmation as Props } from './confirmation.types';
-
-const Confirmation: React.FC<React.PropsWithChildren<Props>> = ({
-  children,
-  close,
-  confirmationButton,
-  confirmationLink,
-  onClose = () => {},
-  onConfirm,
-  text,
-  title,
-  ariaLabel,
-  actionButtonType = 'primary',
-}) => {
-  useEscape(onClose);
-
-  const isMounted = useIsMounted();
-
-  if (!isMounted) {
-    return null;
-  }
-
-  return ReactDOM.createPortal(
-    <div className="confirmation" role="dialog" aria-label={ariaLabel}>
-      <div className="confirmation__content">
-        <TabTrapper isActive={true}>
-          <div className="confirmation__wrapper">
-            {title ? (
-              <Text
-                className="confirmation__title"
-                elementName="h2"
-                theme={Text.themes.emphasis}
-                size={Text.sizes.headline3}
-              >
-                {title}
-              </Text>
-            ) : undefined}
-            {text ? (
-              <Text className="confirmation__text">{text}</Text>
-            ) : (
-              <div className="confirmation__children">{children}</div>
-            )}
-            <div className="confirmation__buttons">
-              {confirmationButton ? (
-                <Button
-                  className="confirmation__button"
-                  variant={
-                    actionButtonType === 'primary'
-                      ? Button.variants.primary
-                      : Button.variants.primaryDestructive
-                  }
-                  {...confirmationButton}
-                  onClick={onConfirm}
-                />
-              ) : undefined}
-              {confirmationLink ? (
-                <LinkButton
-                  className="confirmation__button"
-                  variant={LinkButton.variants.primary}
-                  {...confirmationLink}
-                />
-              ) : undefined}
-              {close ? (
-                <Button
-                  className="confirmation__button"
-                  variant={Button.variants.secondary}
-                  {...close}
-                  onClick={onClose}
-                />
-              ) : undefined}
-            </div>
-          </div>
-        </TabTrapper>
-      </div>
-    </div>,
-    document.body,
-  );
-};
-
-export default Confirmation;

package/react/confirmation/confirmation.types.ts

@@ -1,25 +0,0 @@
-import { Button } from '../button/button.types';
-import { LinkButton } from '../link-button/link-button.types';
-
-type ConfirmationBase = {
-  close?: Button;
-  onClose?: () => void;
-  title?: string;
-  text?: string;
-  ariaLabel: string;
-  actionButtonType?: 'primary' | 'destructive';
-};
-
-type ConfirmationRedirect = ConfirmationBase & {
-  confirmationLink: LinkButton;
-  confirmationButton?: never;
-  onConfirm?: never;
-};
-
-type ConfirmationAction = ConfirmationBase & {
-  confirmationLink?: never;
-  confirmationButton: Button;
-  onConfirm?: () => void;
-};
-
-export type Confirmation = ConfirmationRedirect | ConfirmationAction;

package/react/context-menu/context-menu.tsx

@@ -1,201 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import classNames from 'classnames';
-
-import Close from '../icons/18/close';
-import HiddenInput from '../hidden-input';
-import focusPreviousElement from '../hooks/focus-previous-element';
-import TabTrapper from '../modal/tab-trapper';
-import useClickOutside from '../hooks/use-click-outside';
-import useEscape from '../hooks/use-escape';
-import Button from '../button';
-import Text from '../text';
-import debounce from '../ts/debounce';
-
-import {
-  ContextMenu as Props,
-  Types,
-  itemThemes,
-  positions,
-} from './context-menu.types';
-
-const ContextMenu: React.FunctionComponent<Props> & {
-  position: typeof positions;
-  itemTheme: typeof itemThemes;
-} = ({
-  list,
-  isOpen,
-  onClose = () => {},
-  position = positions.right,
-  title,
-  close,
-  descriptions,
-  smallDescription,
-}) => {
-  const modal = useRef<HTMLDivElement>(null);
-  const [windowSize, setWindowSize] = useState<number>();
-  useClickOutside(modal, onClose);
-  useEscape(onClose);
-
-  focusPreviousElement(modal, isOpen);
-
-  useEffect(() => {
-    if (!windowSize) setWindowSize(window.innerWidth);
-    const handleWindowResize = () => {
-      setWindowSize(window.innerWidth);
-    };
-    window.addEventListener('resize', debounce(handleWindowResize, 2000));
-
-    return () => window.addEventListener('resize', handleWindowResize);
-  });
-
-  const component = (
-    <div
-      className={classNames('context-menu', {
-        [`context-menu--${position}`]: position,
-      })}
-      ref={modal}
-      tabIndex={-1}
-    >
-      <div
-        className={classNames('context-menu__texts-wrapper', {
-          'context-menu__texts-wrapper--center': !descriptions?.length,
-        })}
-      >
-        <div className="context-menu__texts">
-          <Text theme={Text.themes.emphasis} size={Text.sizes.small}>
-            {title}
-          </Text>
-
-          {descriptions
-            ? descriptions.map(description => (
-                <Text
-                  size={Text.sizes.small}
-                  className="context-menu__texts-description"
-                  key={description}
-                >
-                  {description}
-                </Text>
-              ))
-            : null}
-          {smallDescription ? (
-            <Text
-              size={Text.sizes.interface}
-              className="context-menu__texts-description"
-              key={smallDescription}
-            >
-              {smallDescription}
-            </Text>
-          ) : null}
-        </div>
-        <div>
-          <Button
-            {...close}
-            iconOnly
-            leadingIcon={<Close />}
-            onClick={onClose}
-            size={Button.sizes.small}
-            variant={Button.variants.tertiary}
-          />
-        </div>
-      </div>
-      <div className="context-menu__list-items">
-        {list.map(({ icon, item }, index) => (
-          <div key={item.props.text + index}>
-            {item.type === Types.Link ? (
-              <a
-                href={item.props.href}
-                className={classNames('context-menu__list-item-link', {
-                  [`context-menu__list-item-link--theme-${item.props.theme}`]:
-                    item.props.theme,
-                })}
-                data-testid={item.props.testId}
-              >
-                {icon ? (
-                  <div
-                    className={classNames('context-menu__list-icon', {
-                      [`context-menu__list-icon--theme-${item.props.theme}`]:
-                        item.props.theme,
-                    })}
-                  >
-                    {icon}
-                  </div>
-                ) : null}
-                <Text>{item.props.text}</Text>
-              </a>
-            ) : item.type === Types.Form ? (
-              <form
-                onSubmit={item.props.handleSubmit}
-                action={item.props.action}
-                method="POST"
-                className={classNames('context-menu__list-item-form', {
-                  [`context-menu__list-item-form--theme-${item.props.theme}`]:
-                    item.props.theme,
-                })}
-              >
-                <button
-                  type="submit"
-                  className={classNames('context-menu__list-item-form-button', {
-                    [`context-menu__list-item-form-button--theme-${item.props.theme}`]:
-                      item.props.theme,
-                  })}
-                  data-testid={item.props.testId}
-                >
-                  {icon ? (
-                    <div
-                      className={classNames('context-menu__list-icon', {
-                        [`context-menu__list-icon--theme-${item.props.theme}`]:
-                          item.props.theme,
-                      })}
-                    >
-                      {icon}
-                    </div>
-                  ) : null}
-                  <Text>{item.props.text}</Text>
-                </button>
-                {item.props.hiddenInputs
-                  ? item.props.hiddenInputs.map((input, index) => (
-                      <HiddenInput key={input.name + index} {...input} />
-                    ))
-                  : null}
-              </form>
-            ) : item.type === Types.Button ? (
-              <button
-                className={classNames('context-menu__list-item-button', {
-                  [`context-menu__list-item-button--theme-${item.props.theme}`]:
-                    item.props.theme,
-                })}
-                {...item.props}
-              >
-                {icon ? (
-                  <div
-                    className={classNames('context-menu__list-icon', {
-                      [`context-menu__list-icon--theme-${item.props.theme}`]:
-                        item.props.theme,
-                    })}
-                  >
-                    {icon}
-                  </div>
-                ) : null}
-                <Text>{item.props.text}</Text>
-              </button>
-            ) : null}
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-  return isOpen ? (
-    <>
-      <div className="context-menu__background-overlay"></div>
-      {windowSize && windowSize < 600 ? ( // 600 is the breakpoint for the component.
-        <TabTrapper isActive={isOpen}>{component}</TabTrapper>
-      ) : (
-        <div>{component}</div>
-      )}
-    </>
-  ) : null;
-};
-
-ContextMenu.position = positions;
-ContextMenu.itemTheme = itemThemes;
-export default ContextMenu;