@sats-group/ui-lib 80.4.0 → 81.0.1

package/react/modal/tab-trapper.tsx

@@ -1,68 +0,0 @@
-import * as React from 'react';
-
-const focusRef = (ref: React.RefObject<HTMLElement | null>): void => {
-  ref?.current?.focus();
-};
-
-/** Returns the value of `value` from the previous render.
-```js
-const [value, setValue] = useState();
-const previousValue = usePrevious(value);
-```
- */
-// eslint-disable-next-line
-const usePrevious = <T extends unknown>(
-  value: T,
-  initialValue?: T,
-): React.RefObject<T | null>['current'] => {
-  const state = React.useRef<T | null>(
-    typeof initialValue === 'undefined' ? null : initialValue,
-  );
-
-  React.useEffect(() => {
-    state.current = value;
-  }, [value]);
-
-  return state.current;
-};
-
-const TabTrapper: React.FunctionComponent<
-  React.PropsWithChildren<{
-    isActive: boolean;
-    className?: string;
-  }>
-> = ({ children, isActive, className }) => {
-  const wasActive = usePrevious(isActive);
-  const contentRef = React.useRef<HTMLDivElement>(null);
-  const previouslyFocusedElement = React.useRef<HTMLElement | null>(null);
-
-  const focusContent = () => focusRef(contentRef);
-
-  React.useEffect(() => {
-    if (!wasActive && isActive) {
-      // NOTE: Because document.activeElement is an Element by default, we need
-      // to cast this as a HTMLElement to be able to use HTMLElement functions
-      previouslyFocusedElement.current = document.activeElement as HTMLElement;
-      focusContent();
-    }
-
-    if (wasActive && !isActive) {
-      focusRef(previouslyFocusedElement);
-    }
-  }, [isActive]);
-
-  // NOTE: This happens on unmount only
-  React.useEffect(() => () => focusRef(previouslyFocusedElement), []);
-
-  return (
-    <React.Fragment>
-      {isActive ? <div onFocus={focusContent} tabIndex={0} /> : null}
-      <div ref={contentRef} tabIndex={-1} className={className}>
-        {children}
-      </div>
-      {isActive ? <div onFocus={focusContent} tabIndex={0} /> : null}
-    </React.Fragment>
-  );
-};
-
-export default TabTrapper;

package/react/progress-bar/progress-bar.tsx

@@ -1,81 +0,0 @@
-import classNames from 'classnames';
-import React from 'react';
-
-import Text from '../text';
-
-import {
-  Progressbar as Props,
-  variants,
-  themes,
-  labelAlignments,
-  labelPositions,
-} from './progress-bar.types';
-
-const ProgressBar: React.FunctionComponent<Props> & {
-  variants: typeof variants;
-  themes: typeof themes;
-  labelAlignments: typeof labelAlignments;
-  labelPositions: typeof labelPositions;
-} = ({
-  value,
-  max,
-  label,
-  labelAlignment = 'right',
-  labelPosition,
-  variant,
-  theme,
-}) => (
-  <div
-    className={classNames('progress-bar', {
-      [`progress-bar--${labelPosition}`]: labelPosition,
-    })}
-  >
-    <progress className="progress-bar__hidden" value={value} max={max} />
-    <div
-      className={classNames('progress-bar__progress', {
-        [`progress-bar__progress--${theme}`]: theme,
-      })}
-    >
-      <div
-        className={classNames('progress-bar__bar', {
-          [`progress-bar__bar--${variant}`]: variant,
-          [`progress-bar__bar--${theme}`]: theme,
-        })}
-        style={{ width: `${Math.floor((value / max) * 100)}%` }}
-      />
-    </div>
-    {label ? (
-      <div
-        className={classNames('progress-bar__text', {
-          [`progress-bar__text--${theme}`]: theme,
-        })}
-      >
-        {labelAlignment === 'left' ? (
-          <Text elementName="span" size={Text.sizes.basic}>
-            {label.text}
-          </Text>
-        ) : null}
-        {label.boldText ? (
-          <Text
-            elementName="span"
-            size={Text.sizes.basic}
-            theme={Text.themes.emphasis}
-          >
-            {label.boldText}
-          </Text>
-        ) : undefined}
-        {labelAlignment === 'right' ? (
-          <Text elementName="span" size={Text.sizes.basic}>
-            {label.text}
-          </Text>
-        ) : null}
-      </div>
-    ) : undefined}
-  </div>
-);
-
-ProgressBar.variants = variants;
-ProgressBar.themes = themes;
-ProgressBar.labelAlignments = labelAlignments;
-ProgressBar.labelPositions = labelPositions;
-export default ProgressBar;

package/react/progress-bar/progress-bar.types.ts

@@ -1,35 +0,0 @@
-import { ObjectValues } from '../types';
-
-export const variants = {
-  cta: 'cta',
-} as const;
-
-export const themes = {
-  dark: 'dark',
-} as const;
-
-export const labelAlignments = {
-  left: 'left',
-  right: 'right',
-} as const;
-
-export const labelPositions = {
-  topLeft: 'top-left',
-  topCenter: 'top-center',
-  topRight: 'top-right',
-  bottomCenter: 'bottom-center',
-  bottomRight: 'bottom-right',
-} as const;
-
-export type Progressbar = {
-  value: number;
-  max: number;
-  label?: {
-    boldText?: string;
-    text: string;
-  };
-  labelAlignment?: ObjectValues<typeof labelAlignments>;
-  labelPosition?: ObjectValues<typeof labelPositions>;
-  variant?: ObjectValues<typeof variants>;
-  theme?: ObjectValues<typeof themes>;
-};

package/react/radio/radio.tsx

@@ -1,87 +0,0 @@
-import cn from 'classnames';
-import * as React from 'react';
-
-import useInputValidation from '../use-input-validation';
-import Text from '../text';
-
-import { colors, Radio as Props } from './radio.types';
-
-const RefRadio = React.forwardRef<
-  HTMLInputElement,
-  React.PropsWithChildren<Props>
->(
-  (
-    {
-      children,
-      color,
-      description,
-      isUnderline,
-      label,
-      name,
-      showCustomError = true,
-      value,
-      ...restProps
-    },
-    ref,
-  ) => {
-    const [onChange, onInvalid, error] = useInputValidation();
-
-    return (
-      <label
-        className={cn(
-          'radio',
-          { 'radio--error': error, 'radio--underline': isUnderline },
-          color,
-        )}
-      >
-        <input
-          name={name}
-          value={value}
-          ref={ref}
-          type="radio"
-          onChange={e => {
-            // NOTE: To not break compatibility
-            if (restProps.onChange) restProps.onChange(e);
-            onChange(e);
-          }}
-          onInvalid={e => {
-            // NOTE: To not break compatibility
-            if (restProps.onInvalid) restProps.onInvalid(e);
-            onInvalid(e);
-          }}
-          {...restProps}
-        />
-        <div className="radio__label">
-          <span className="radio__fake-element"></span>
-          <span>
-            {label}
-            {children}
-          </span>
-        </div>
-
-        {/* NOTE: This is aria-hidden because reporting of validation errors is handled by the browser */}
-        {error && showCustomError && (
-          <div aria-hidden="true" className="radio__error">
-            {error}
-          </div>
-        )}
-
-        {description && (
-          <Text className="radio__description" size={Text.sizes.small}>
-            {description}
-          </Text>
-        )}
-      </label>
-    );
-  },
-);
-
-// NOTE: If this isn't set, stack traces say "forwardRef" instead of "Radio"
-RefRadio.displayName = 'Radio';
-
-// NOTE: The component is redeclared here because TypeScript doesn't accept assigning extra properties to `RefComponent` when it's declared
-const Radio: typeof RefRadio & {
-  colors: typeof colors;
-} = Object.assign(RefRadio, { colors });
-
-export default Radio;

package/react/radio/radio.types.ts

@@ -1,15 +0,0 @@
-import { InputHtmlProps, ObjectValues } from '../types';
-
-export const colors = {
-  light: 'radio--light',
-} as const;
-
-export type Radio = {
-  color?: ObjectValues<typeof colors>;
-  description?: string;
-  isUnderline?: boolean;
-  label?: string;
-  name: string;
-  showCustomError?: boolean;
-  value: string;
-} & InputHtmlProps;

package/react/scale-bar/scale-bar.tsx

@@ -1,29 +0,0 @@
-import * as React from 'react';
-
-import VisuallyHidden from '../visually-hidden/visually-hidden';
-
-import { ScaleBar as Props } from './scale-bar.types';
-
-const ScaleBar: React.FunctionComponent<Props> = ({ max = 4, value }) => (
-  <>
-    <div className="scale-bar">
-      {Array(max)
-        .fill(0)
-        .map((_, i) => (
-          <div
-            className={`scale-bar__item scale-bar__item--${
-              i < value ? 'filled' : 'empty'
-            }`}
-            key={i}
-          />
-        ))}
-    </div>
-    <VisuallyHidden>
-      <meter max={max} min={0} value={value}>
-        {value}/{max}
-      </meter>
-    </VisuallyHidden>
-  </>
-);
-
-export default ScaleBar;

package/react/scale-bar/scale-bar.types.ts

@@ -1,4 +0,0 @@
-export type ScaleBar = {
-  max?: number;
-  value: number;
-};

package/react/search/search.tsx

@@ -1,267 +0,0 @@
-import classNames from 'classnames';
-import React, { useRef, useState } from 'react';
-
-import Button from '../button';
-import useClickOutside from '../hooks/use-click-outside';
-import { useIsMounted } from '../hooks/use-is-mounted';
-import CloseIcon from '../icons/18/close';
-import SearchIcon from '../icons/24/search';
-import Text from '../text';
-import useInputValidation from '../use-input-validation';
-
-import {
-  Search as Props,
-  themes,
-  inputSizes,
-  variants,
-  expandDirections,
-} from './search.types';
-
-const RefSearch = React.forwardRef<HTMLInputElement, Props>(
-  (
-    {
-      button,
-      customErrorMessages,
-      clear,
-      disabled,
-      label,
-      isLabelVisible = true,
-      name,
-      onChangeFunc = () => {},
-      onClear = () => {},
-      expandable,
-      placeholder,
-      required,
-      inputSize = inputSizes.small,
-      theme = themes.inline,
-      variant = variants.default,
-      value = '',
-      helpText,
-      helpIcon,
-      ...restProps
-    },
-    ref,
-  ) => {
-    const [validationOnChange, handleInvalid, error] =
-      useInputValidation(customErrorMessages);
-    const searchArea = useRef<HTMLDivElement>(null);
-    const [expand, setExpand] = useState(false);
-    const isMounted = useIsMounted();
-
-    useClickOutside(searchArea, () => setExpand(false));
-
-    const [inputValue, setInputValue] = useState(value);
-
-    const setValue = (value: string) => {
-      onChangeFunc(value);
-      setInputValue(value);
-    };
-
-    const handleChange: React.ChangeEventHandler<HTMLInputElement> = e => {
-      setValue(e.target.value);
-      validationOnChange(e);
-    };
-
-    const handleClear = () => {
-      setValue('');
-      onClear();
-    };
-
-    const handleClose = () => {
-      handleClear();
-      setExpand(false);
-    };
-
-    return (
-      <div
-        className={classNames('search', {
-          [`search--expand-direction-${expandable?.direction}`]:
-            expandable?.direction,
-        })}
-      >
-        {isMounted ? (
-          <div
-            className={classNames('search__inner', {
-              'search__inner--expandable': expandable,
-              'search__inner--expand': expand,
-            })}
-            ref={searchArea}
-          >
-            {theme === themes.inline && isLabelVisible ? (
-              <Text
-                theme={Text.themes.emphasis}
-                size={
-                  inputSize === inputSizes.large
-                    ? Text.sizes.large
-                    : Text.sizes.small
-                }
-                className={classNames('search__header', {
-                  [`search__header--variant-${variant}`]: variant,
-                })}
-              >
-                {label}
-              </Text>
-            ) : null}
-            <div
-              className={classNames('search__input-wrapper', {
-                [`search__input-wrapper--size-${inputSize}`]: inputSize,
-                [`search__input-wrapper--theme-${theme}`]: theme,
-                [`search__input-wrapper--variant-${variant}`]: variant,
-              })}
-            >
-              <label className="search__label">
-                <div
-                  className={classNames('search__icon', {
-                    [`search__icon--variant-${variant}`]: variant,
-                  })}
-                >
-                  <SearchIcon />
-                </div>
-                <input
-                  {...restProps}
-                  className={classNames('search__input', {
-                    [`search__input--variant-${variant}`]: variant,
-                    [`search__input--size-${inputSize}`]: inputSize,
-                  })}
-                  disabled={disabled}
-                  name={name}
-                  onChange={handleChange}
-                  onClick={() => setExpand(true)}
-                  value={inputValue}
-                  onInvalid={handleInvalid}
-                  placeholder={placeholder}
-                  ref={ref}
-                  required={required}
-                  type="search"
-                  aria-label={
-                    theme === themes.floating || !isLabelVisible
-                      ? label
-                      : undefined
-                  }
-                />
-              </label>
-              <div
-                className={classNames('search__clear-button', {
-                  'search__clear-button--visible': inputValue,
-                })}
-              >
-                <Button
-                  {...clear}
-                  onClick={handleClear}
-                  size={
-                    inputSize === inputSizes.small
-                      ? Button.sizes.small
-                      : Button.sizes.basic
-                  }
-                  type="button"
-                  variant={
-                    variant === variants.fixed
-                      ? Button.variants.fixedTertiary
-                      : Button.variants.tertiary
-                  }
-                />
-              </div>
-              {button ? (
-                <Button
-                  {...button}
-                  className="search__search-button"
-                  variant={
-                    variant === variants.fixed
-                      ? Button.variants.secondaryWhite
-                      : Button.variants.secondary
-                  }
-                  type="submit"
-                  size={
-                    inputSize === inputSizes.small
-                      ? Button.sizes.small
-                      : Button.sizes.basic
-                  }
-                />
-              ) : null}
-              {expandable && expand ? (
-                <Button
-                  {...expandable.close}
-                  className="search__close-button"
-                  onClick={handleClose}
-                  leadingIcon={<CloseIcon />}
-                  size={
-                    inputSize === inputSizes.small
-                      ? Button.sizes.small
-                      : Button.sizes.basic
-                  }
-                  type="button"
-                  variant={
-                    variant === variants.fixed
-                      ? Button.variants.fixedTertiary
-                      : Button.variants.tertiary
-                  }
-                />
-              ) : null}
-            </div>
-            {error ? (
-              <div aria-hidden="true" className="search__error">
-                <Text>{error}</Text>
-              </div>
-            ) : null}
-            {theme === themes.inline && helpText ? (
-              <Text
-                size={Text.sizes.interface}
-                className={classNames('search__help-text', {
-                  [`search__help-text--variant-${variant}`]: variant,
-                })}
-              >
-                {helpIcon}
-                {helpText}
-              </Text>
-            ) : null}
-          </div>
-        ) : (
-          <div className="search__loading-inner">
-            {theme === themes.inline && isLabelVisible ? (
-              <div
-                className={classNames('search__loading-extra', {
-                  [`search__loading-extra--${variant}`]: variant,
-                })}
-              >
-                {label}
-              </div>
-            ) : null}
-            <div
-              className={classNames('search__loading-input', {
-                [`search__loading-input--${variant}`]: variant,
-                [`search__loading-input--${inputSize}`]: inputSize,
-              })}
-            ></div>
-            {theme === themes.inline && helpText ? (
-              <div
-                className={classNames('search__loading-extra', {
-                  [`search__loading-extra--${variant}`]: variant,
-                })}
-              >
-                {helpIcon}
-                {helpText}
-              </div>
-            ) : null}
-          </div>
-        )}
-      </div>
-    );
-  },
-);
-
-// NOTE: Stack traces will show "forwardRef" instead of "Search" if this is not set.
-RefSearch.displayName = 'Search';
-
-const Search: typeof RefSearch & {
-  themes: typeof themes;
-  variants: typeof variants;
-  inputSizes: typeof inputSizes;
-  expandDirections: typeof expandDirections;
-} = Object.assign(RefSearch, {
-  themes,
-  variants,
-  inputSizes,
-  expandDirections,
-});
-
-export default Search;

package/react/search/search.types.ts

@@ -1,44 +0,0 @@
-import type { ReactElement } from 'react';
-import type { Button } from '../button/button.types';
-import type { InputHtmlProps, ObjectValues } from '../types';
-import type { Messages } from '../use-input-validation.types';
-
-export const themes = {
-  floating: 'floating',
-  inline: 'inline',
-} as const;
-
-export const inputSizes = {
-  small: 'small',
-  large: 'large',
-} as const;
-
-export const variants = {
-  default: 'default',
-  fixed: 'fixed',
-} as const;
-
-export const expandDirections = {
-  left: 'left',
-  right: 'right',
-} as const;
-
-export type Search = {
-  button?: Button;
-  clear: Button;
-  customErrorMessages?: Messages;
-  expandable?: {
-    close: Button;
-    direction?: ObjectValues<typeof expandDirections>;
-  };
-  helpIcon?: ReactElement;
-  helpText?: string;
-  inputSize?: ObjectValues<typeof inputSizes>; //NOTE: This is not named `size` due to InputHTMLProps having a `size` attribute that will clash
-  isLabelVisible?: boolean;
-  label: string;
-  name: string;
-  onChangeFunc?: (arg: string) => void;
-  onClear?: () => void;
-  theme?: ObjectValues<typeof themes>;
-  variant?: ObjectValues<typeof variants>;
-} & InputHtmlProps;