@sats-group/ui-lib 80.4.0 → 81.0.1

package/react/chip/chip.tsx

@@ -1,37 +0,0 @@
-import * as React from 'react';
-import cn from 'classnames';
-
-import Close from '../icons/16/close';
-import Text from '../text';
-
-import { Chip as Props } from './chip.types';
-
-const Chip: React.FC<Props> = ({
-  elementName = 'button',
-  className,
-  icon = true,
-  isSelected = false,
-  text,
-  ...rest
-}) =>
-  React.createElement(
-    elementName,
-    {
-      className: cn('chip', className, { 'chip--selected': isSelected }),
-      ...rest,
-    },
-    <React.Fragment>
-      <div className="chip__wrapper">
-        {icon ? <Close /> : null}
-        <Text
-          className="chip__text"
-          size={Text.sizes.small}
-          theme={Text.themes.emphasis}
-        >
-          {text}
-        </Text>
-      </div>
-    </React.Fragment>,
-  );
-
-export default Chip;

package/react/chip/chip.types.ts

@@ -1,18 +0,0 @@
-import { ButtonHtmlProps, LinkHtmlProps } from '../types';
-
-type BasicChipProps = {
-  elementName: string;
-  className?: string;
-  icon?: boolean;
-  isSelected?: boolean;
-  text: string;
-};
-
-export type ChipButton = BasicChipProps & ButtonHtmlProps;
-
-export type ChipLink = BasicChipProps & LinkHtmlProps;
-
-export type Chip =
-  | ({ elementName: 'button' } & ChipButton)
-  | ({ elementName: 'a' } & ChipLink)
-  | ({ elementName: string } & (ChipLink | ChipButton));

package/react/chip/remove.tsx

@@ -1,14 +0,0 @@
-import * as React from 'react';
-
-const SvgRemove = () => (
-  <svg width={18} height={19} fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M9 18.998a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm3.429-12.429a.808.808 0 0 1 0 1.143l-2.286 2.286 2.286 2.286a.808.808 0 0 1-1.143 1.143L9 11.14l-2.286 2.287a.808.808 0 0 1-1.143-1.143l2.286-2.286-2.286-2.286a.808.808 0 0 1 1.143-1.143L9 8.855l2.286-2.286a.808.808 0 0 1 1.143 0Z"
-      fill="currentColor"
-    />
-  </svg>
-);
-
-export default SvgRemove;

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;