@sats-group/ui-lib 74.2.0

package/react/search/search.tsx

@@ -0,0 +1,255 @@
+import React, { useRef, useState } from 'react';
+
+import Text from '../text';
+import SearchIcon from '../icons/24/search';
+import CloseIcon from '../icons/18/close';
+import useInputValidation from '../use-input-validation';
+import useClickOutside from '../hooks/use-click-outside';
+import { useIsMounted } from '../hooks/use-is-mounted';
+
+import {
+  Search as Props,
+  themes,
+  inputSizes,
+  variants,
+  expandDirections,
+} from './search.types';
+import classNames from 'classnames';
+import Button from '../button';
+
+const RefSearch = React.forwardRef<HTMLInputElement, Props>(
+  (
+    {
+      button,
+      customErrorMessages,
+      clear,
+      disabled,
+      label,
+      isLabelVisible = true,
+      name,
+      onChangeFunc = () => {},
+      expandable,
+      placeholder,
+      required,
+      inputSize = inputSizes.small,
+      theme = themes.inline,
+      variant = variants.default,
+      value = '',
+      helpText,
+      helpIcon,
+      ...restProps
+    },
+    ref,
+  ) => {
+    const [validationOnChange, onInvalid, 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 onMessageChange = (message: string) => setInputValue(message);
+
+    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={e => {
+                    onChangeFunc(e.target.value);
+                    validationOnChange(e);
+                    onMessageChange(e.target.value);
+                  }}
+                  onClick={() => setExpand(true)}
+                  value={inputValue}
+                  onInvalid={e => onInvalid(e)}
+                  placeholder={placeholder}
+                  ref={ref}
+                  required={required}
+                  type="search"
+                  aria-label={
+                    theme === themes.floating || !isLabelVisible
+                      ? label
+                      : undefined
+                  }
+                />
+              </label>
+              {inputValue ? (
+                <Button
+                  {...clear}
+                  className="search__clear-button"
+                  onClick={() => {
+                    onChangeFunc('');
+                    setInputValue('');
+                  }}
+                  type="button"
+                  variant={
+                    variant === variants.fixed
+                      ? Button.variants.fixedTertiary
+                      : Button.variants.tertiary
+                  }
+                  size={
+                    inputSize === inputSizes.small
+                      ? Button.sizes.small
+                      : Button.sizes.basic
+                  }
+                />
+              ) : null}
+              {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"
+                  variant={
+                    variant === variants.fixed
+                      ? Button.variants.fixedTertiary
+                      : Button.variants.tertiary
+                  }
+                  leadingIcon={<CloseIcon />}
+                  onClick={() => {
+                    setExpand(false);
+                    onChangeFunc('');
+                    setInputValue('');
+                  }}
+                  size={
+                    inputSize === inputSizes.small
+                      ? Button.sizes.small
+                      : Button.sizes.basic
+                  }
+                />
+              ) : 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

@@ -0,0 +1,43 @@
+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;
+  inputSize?: ObjectValues<typeof inputSizes>; //NOTE: This is not named `size` due to InputHTMLProps having a `size` attribute that will clash
+  label: string;
+  isLabelVisible?: boolean;
+  name: string;
+  onChangeFunc?: (arg: string) => void;
+  expandable?: {
+    close: Button;
+    direction?: ObjectValues<typeof expandDirections>;
+  };
+  theme?: ObjectValues<typeof themes>;
+  variant?: ObjectValues<typeof variants>;
+  helpText?: string;
+  helpIcon?: ReactElement;
+} & InputHtmlProps;

package/react/select/chevron-down.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+const ChevronDown: React.FunctionComponent<{ className?: string }> = ({
+  className,
+}) => (
+  <svg
+    width="14"
+    height="8"
+    viewBox="0 0 14 8"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      d="M12 1.5L7 6.5L2 1.5"
+      stroke="currentColor"
+      strokeWidth="1.8"
+      strokeMiterlimit="10"
+      strokeLinecap="square"
+    />
+  </svg>
+);
+
+export default ChevronDown;

package/react/select/index.ts

@@ -0,0 +1,2 @@
+import Select from './select';
+export default Select;

package/react/select/select.scss

@@ -0,0 +1,135 @@
+@use '../../tokens/corner-radius';
+@use '../../tokens/light';
+@use '../../tokens/spacing';
+
+.select {
+  display: flex;
+
+  &--label-position-inline {
+    flex-direction: row;
+    gap: spacing.$xs;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+
+  &--label-position-stacked {
+    flex-direction: column;
+  }
+
+  // NOTE: Specificity hack
+  :root &--error {
+    select {
+      background-color: rgba(light.$signal-surface-error, 0.07);
+      border-color: light.$ge-signal-border-error;
+      color: light.$on-signal-surface-error-default;
+    }
+  }
+
+  &__native-wrapper {
+    color: light.$on-surface-primary-default;
+    background-color: light.$surface-primary-default;
+    border-radius: corner-radius.$s;
+    position: relative;
+  }
+
+  &__chevron {
+    color: light.$on-surface-primary-default;
+    position: absolute;
+    right: 13px;
+    top: 50%;
+    transform: translateY(-50%);
+    pointer-events: none;
+  }
+
+  &__icon {
+    color: light.$on-surface-primary-default;
+    position: absolute;
+    left: 13px;
+    top: 50%;
+    width: 20px;
+    transform: translateY(-50%);
+
+    svg {
+      display: block;
+      max-width: 100%;
+      height: auto;
+    }
+  }
+
+  :root &--icon {
+    select {
+      padding-left: 40px; // NOTE: Space for icon
+    }
+  }
+
+  select {
+    color: light.$on-surface-primary-default;
+    appearance: none;
+    background-color: transparent;
+    border: 1px solid light.$ge-border-default;
+    display: block;
+    font-size: 16px;
+    font-family: 'Inter', sans-serif;
+    line-height: 1.25;
+    padding: 13px 15px;
+    padding-right: 35px; // NOTE: Space for chevron icon
+    position: relative;
+    width: 100%;
+    border-radius: corner-radius.$s;
+
+    @media (hover: hover) {
+      &:hover {
+        &:not(:disabled) {
+          background-color: light.$surface-primary-hover;
+          border-color: light.$surface-primary-hover;
+
+          ~ .select__chevron,
+          ~ .select__icon {
+            color: light.$on-surface-primary-default;
+          }
+        }
+      }
+    }
+
+    &:active {
+      &:not(:disabled) {
+        background-color: light.$surface-primary-default;
+        border-color: light.$ge-border-focused;
+
+        ~ .select__chevron,
+        ~ .select__icon {
+          color: light.$on-surface-primary-default;
+        }
+      }
+    }
+
+    &:focus {
+      outline: 4px solid currentColor;
+      outline-offset: 2px;
+    }
+
+    &:disabled {
+      color: light.$on-surface-primary-disabled;
+
+      ~ .select__chevron,
+      ~ .select__icon {
+        color: light.$on-surface-primary-disabled;
+      }
+    }
+  }
+
+  &__error {
+    color: light.$ge-signal-error;
+    margin-top: 4px;
+  }
+
+  &__asterisk {
+    color: light.$on-surface-featured;
+    margin-left: spacing.$xs;
+  }
+
+  &__label {
+    display: flex;
+    flex-direction: row;
+  }
+}

package/react/select/select.tsx

@@ -0,0 +1,105 @@
+import cn from 'classnames';
+import * as React from 'react';
+
+import useInputValidation from '../use-input-validation';
+
+import ChevronDown from './chevron-down';
+import Option from '../select-option/select-option';
+import Text from '../text';
+
+import { labelPositions, Select as Props } from './select.types';
+
+// NOTE: `onChangeOption` works like `onChange` but returns the props for that option instead of an event object.
+const RefSelect = React.forwardRef<
+  HTMLSelectElement,
+  React.PropsWithChildren<Props>
+>(
+  (
+    {
+      children,
+      className,
+      icon,
+      isLabelVisible = true,
+      label,
+      labelPosition = labelPositions.stacked,
+      name,
+      onChange = () => {},
+      onChangeOption = () => {},
+      options = [],
+      required,
+      ...restProps
+    },
+    ref,
+  ) => {
+    const [validationOnChange, onInvalid, error] = useInputValidation();
+
+    const onInputChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+      onChange(e);
+      onChangeOption(options.find(({ value }) => value === e.target.value));
+      validationOnChange(e);
+    };
+
+    return (
+      <label
+        className={cn('select', className, {
+          'select--error': error,
+          'select--icon': icon,
+          [`select--label-position-${labelPosition}`]: labelPosition
+            ? labelPositions[labelPosition]
+            : undefined,
+        })}
+      >
+        {isLabelVisible && (label || children) ? (
+          <div className="select__label">
+            <Text size={Text.sizes.small} theme={Text.themes.emphasis}>
+              {label}
+            </Text>
+            {required ? <span className="select__asterisk">*</span> : null}
+            {children}
+          </div>
+        ) : required ? (
+          <span className="select__asterisk">*</span>
+        ) : null}
+
+        <div className="select__native-wrapper">
+          <select
+            name={name}
+            ref={ref}
+            onChange={onInputChange}
+            required={required}
+            onInvalid={e => {
+              // NOTE: To not break compatibility
+              if (restProps.onInvalid) restProps.onInvalid(e);
+              onInvalid(e);
+            }}
+            aria-label={isLabelVisible ? undefined : label}
+            {...restProps}
+          >
+            {options.map(option => (
+              <Option key={option.value} {...option} />
+            ))}
+          </select>
+          {icon && <div className="select__icon">{icon}</div>}
+          <ChevronDown className="select__chevron" />
+        </div>
+
+        {/* NOTE: This is aria-hidden because reporting of validation errors is handled by the browser */}
+        {error && (
+          <div aria-hidden="true" className="select__error">
+            {error}
+          </div>
+        )}
+      </label>
+    );
+  },
+);
+
+// NOTE: If this isn't set, stack traces say "forwardRef" instead of "Select"
+RefSelect.displayName = 'Select';
+
+// NOTE: Since `React.forwardRef` props aren't generic, the component is cast so that generics work as intended. See https://stackoverflow.com/a/58473012
+const Select = RefSelect as <OptionExtra>(
+  props: Props<OptionExtra> & { ref?: React.Ref<HTMLSelectElement> },
+) => React.ReactElement;
+
+export default Select;

package/react/select/select.types.ts

@@ -0,0 +1,19 @@
+import { ObjectValues, SelectHtmlProps } from '../types';
+
+import { SelectOption } from '../select-option/select-option.types';
+
+export const labelPositions = {
+  inline: 'inline',
+  stacked: 'stacked',
+} as const;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type Select<OptionExtra = any> = {
+  icon?: React.ReactNode;
+  isLabelVisible?: boolean;
+  label?: string;
+  labelPosition?: ObjectValues<typeof labelPositions>;
+  name: string;
+  onChangeOption?: (option?: SelectOption<OptionExtra>) => void;
+  options?: SelectOption<OptionExtra>[];
+} & SelectHtmlProps;

package/react/select-option/README.md

@@ -0,0 +1,3 @@
+# SelectOption
+
+This component is not intended to be used directly. It is used by `Select` internally but needs to live in a separate folder in order for a TypeScript file to be created for it.

package/react/select-option/index.ts

@@ -0,0 +1,2 @@
+import SelectOption from './select-option';
+export default SelectOption;

package/react/select-option/select-option.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+import { SelectOption as Props } from './select-option.types';
+
+/** This component is not intended to be used directly. It is used by `Select` internally */
+const SelectOption: React.FunctionComponent<Props> = ({
+  value,
+  text,
+  ...rest
+}) => (
+  <option value={value} {...rest}>
+    {text}
+  </option>
+);
+
+export default SelectOption;

package/react/select-option/select-option.types.ts

@@ -0,0 +1,8 @@
+import { OptionHtmlProps } from '../types';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type SelectOption<Extra = any> = {
+  extra?: Extra;
+  value: string;
+  text: string;
+} & OptionHtmlProps;

package/react/tag/index.ts

@@ -0,0 +1,2 @@
+import Tag from './tag';
+export default Tag;