@sats-group/ui-lib 80.4.0 → 81.0.0

package/react/form-content/checkbox-category.tsx

@@ -1,183 +0,0 @@
-import * as React from 'react';
-import Text from '../text';
-import Checkbox from '../checkbox';
-
-import ChevronRight from '../icons/24/arrow-right';
-import ChevronUp from '../icons/24/arrow-up';
-
-import { CheckboxCategory as Props } from './form-content.checkbox-list.types';
-import VisuallyHidden from '../visually-hidden';
-import { mod } from '../add-bem-modifiers';
-import Collapse from '../collapse';
-
-const CheckboxCategory: React.FC<React.PropsWithChildren<Props>> = ({
-  currentlySelectedValues = [],
-  id,
-  isSearching,
-  options,
-  searchResults = [],
-  selectAll,
-  selectAllLabel,
-  setMultipleSelectedValues = () => {},
-  setSelectedValue = () => {},
-  shouldShowItems = true,
-  removeAllValues = () => {},
-}) => {
-  const isExpandable = React.useMemo(
-    () => (selectAll ? true : false),
-    [selectAll],
-  );
-  const [availableOptions] = React.useState(
-    options.filter(button => !button.disabled),
-  );
-
-  const [isOpen, setIsOpen] = React.useState(isExpandable ? true : false);
-
-  const handleChange = (value: string) => {
-    setSelectedValue(id, value);
-  };
-
-  const handleSelectAll = () => {
-    if (currentlySelectedValues.length !== availableOptions.length) {
-      setMultipleSelectedValues(
-        id,
-        availableOptions.map(button => button.value),
-      );
-    } else {
-      removeAllValues(id);
-    }
-  };
-
-  React.useEffect(
-    () =>
-      isSearching
-        ? setIsOpen(true)
-        : isExpandable
-          ? setIsOpen(false)
-          : setIsOpen(true),
-    [isExpandable, isSearching, searchResults],
-  );
-
-  const disableCategory = options.every(checkbox => checkbox.disabled);
-
-  const hasSelectedValues = currentlySelectedValues.length > 0;
-
-  return (
-    <fieldset className="form-content__fieldset">
-      {isExpandable && (
-        <div
-          className={mod('form-content__chevron-button-wrapper', {
-            hidden: isSearching,
-          })}
-        >
-          {selectAll ? (
-            <div className="form-content__select-all">
-              <Checkbox
-                {...selectAll}
-                isLabelVisible={false}
-                checked={
-                  availableOptions.length > 0 &&
-                  currentlySelectedValues.length === availableOptions.length
-                }
-                onChange={handleSelectAll}
-                data-test-select-all
-                disabled={disableCategory}
-              />
-            </div>
-          ) : null}
-          <button
-            className="form-content__chevron-button"
-            onClick={() => setIsOpen(currentState => !currentState)}
-            type="button"
-          >
-            <Text
-              elementName="span"
-              className={mod('form-content__select-all-label', {
-                disabled: disableCategory,
-              })}
-              size={Text.sizes.basic}
-            >
-              {selectAllLabel}
-            </Text>
-            <div className="form-content__checkbox-category-info-wrapper">
-              {hasSelectedValues ? (
-                <Text
-                  className="form-content__checkbox-category-number"
-                  size={Text.sizes.interface}
-                >
-                  {currentlySelectedValues.length}
-                </Text>
-              ) : undefined}
-              {isOpen ? (
-                <div className="form-content__checkbox-category-icon">
-                  <ChevronUp />
-                </div>
-              ) : (
-                <div className="form-content__checkbox-category-icon">
-                  <ChevronRight />
-                </div>
-              )}
-            </div>
-          </button>
-        </div>
-      )}
-
-      <Collapse
-        duration={300}
-        animateChildren={isExpandable ? true : false}
-        isOpen={isOpen}
-      >
-        {
-          <fieldset className="form-content__fieldset">
-            {options.map(checkbox => {
-              const isInSearchResults = isSearching
-                ? searchResults.find(
-                    item =>
-                      item.key.toLowerCase() === checkbox.value.toLowerCase(),
-                  )
-                : undefined;
-
-              const isSelected = currentlySelectedValues.includes(
-                checkbox.value,
-              );
-
-              const node = (
-                <div
-                  key={checkbox.value}
-                  className={mod('form-content__checkbox-button', {
-                    nested: !isSearching && isExpandable,
-                  })}
-                >
-                  <Checkbox
-                    onChange={e => handleChange(e.target.value)}
-                    checked={isSelected}
-                    isUnderlined={true}
-                    {...checkbox}
-                  />
-                </div>
-              );
-
-              if (!isSelected && !isInSearchResults && !shouldShowItems) {
-                return;
-              }
-
-              if (isSelected && isSearching && !isInSearchResults) {
-                return (
-                  <VisuallyHidden key={checkbox.value}>{node}</VisuallyHidden>
-                );
-              }
-
-              if (!isSelected && isSearching && !isInSearchResults) {
-                return;
-              }
-
-              return node;
-            })}
-          </fieldset>
-        }
-      </Collapse>
-    </fieldset>
-  );
-};
-
-export default CheckboxCategory;

package/react/form-content/form-content.checkbox-list.tsx

@@ -1,126 +0,0 @@
-import * as React from 'react';
-import Text from '../text';
-
-import CheckboxCategory from './checkbox-category';
-
-import { CheckboxList as Props } from './form-content.checkbox-list.types';
-import { SearchItem } from './form-content.types';
-import { mod } from '../add-bem-modifiers';
-import FormContentSearch from './form-content.search';
-
-const CheckboxList: React.FC<React.PropsWithChildren<Props>> = props => {
-  const [currentlySelectedValues, setCurrentlySelectedValues] = React.useState<
-    Record<string, string[]>
-  >({});
-  const { content, emptySearchResultDescription, emptySearchResultText } =
-    props;
-
-  const [searchTerm, setSearchTerm] = React.useState('');
-  const [searchResult, setSearchResult] = React.useState<SearchItem[]>();
-
-  const updateCurrentlySelectedValues = (id: string, value: string) => {
-    if (currentlySelectedValues[id]?.includes(value)) {
-      setCurrentlySelectedValues(prevState => {
-        const updatedValues = Object.entries(prevState).map(([id, values]) => [
-          id,
-          values.filter(option => option !== value),
-        ]);
-        return Object.fromEntries(updatedValues);
-      });
-    } else {
-      setCurrentlySelectedValues(prevState => {
-        const updatedValues = Object.entries(prevState).map(
-          ([filterGroupId, values = []]) => {
-            if (id === filterGroupId) {
-              return [filterGroupId, [...values, value]];
-            }
-
-            return [filterGroupId, values];
-          },
-        );
-        return Object.fromEntries(updatedValues);
-      });
-    }
-  };
-
-  const updateMultipleSelectedValues = (id: string, values: string[]) => {
-    setCurrentlySelectedValues(prevState => ({
-      ...prevState,
-      [id]: values,
-    }));
-  };
-
-  const removeAllValuesById = (id: string) => {
-    setCurrentlySelectedValues(prevState => {
-      const selectedValues = prevState[id] || [];
-      const updatedValues = Object.entries(prevState).map(([id, values]) => [
-        id,
-        values.filter(option => !selectedValues.includes(option)),
-      ]);
-      return Object.fromEntries(updatedValues);
-    });
-  };
-
-  React.useEffect(() => {
-    const selectedValues = content
-      .flatMap(({ categories }) => categories)
-      .filter(category => category?.id)
-      .map(category => [category?.id, category?.selectedValues]);
-    setCurrentlySelectedValues(Object.fromEntries(selectedValues));
-  }, [content]);
-
-  return (
-    <div>
-      {'searchProps' in props ? (
-        <FormContentSearch
-          {...props.searchProps}
-          searchResult={setSearchResult}
-          searchTerm={setSearchTerm}
-        />
-      ) : undefined}
-
-      {searchTerm.length > 0 && searchResult?.length === 0 && (
-        <div className="form-content__search-no-results">
-          <Text
-            className="form-content__search-no-results-text"
-            elementName="span"
-            theme={Text.themes.emphasis}
-          >
-            {emptySearchResultText}
-          </Text>
-          <span>{emptySearchResultDescription}</span>
-        </div>
-      )}
-
-      {content.map(({ categories = [], key, header }) => (
-        <React.Fragment key={key}>
-          {header && searchTerm.length === 0 ? (
-            <Text
-              className={mod('form-content__content-title', {
-                hidden: searchTerm.length > 0,
-              })}
-              theme={Text.themes.emphasis}
-            >
-              {header}
-            </Text>
-          ) : undefined}
-
-          {categories.map(category => (
-            <CheckboxCategory
-              key={category.id}
-              searchResults={searchResult}
-              isSearching={searchTerm.length > 0}
-              currentlySelectedValues={currentlySelectedValues[category.id]}
-              setSelectedValue={updateCurrentlySelectedValues}
-              setMultipleSelectedValues={updateMultipleSelectedValues}
-              removeAllValues={removeAllValuesById}
-              {...category}
-            />
-          ))}
-        </React.Fragment>
-      ))}
-    </div>
-  );
-};
-
-export default CheckboxList;

package/react/form-content/form-content.checkbox-list.types.ts

@@ -1,36 +0,0 @@
-import type { Checkbox } from '../checkbox/checkbox.types';
-import { ContentKeys } from '../form-content/form-content.types';
-import type { Search } from './form-content.types';
-
-export type CheckboxCategory = {
-  currentlySelectedValues?: string[];
-  id: string;
-  isSearching?: boolean;
-  options: Checkbox[];
-  searchResults?: { key: string; label: string }[];
-  selectAll?: Checkbox;
-  selectAllLabel?: string;
-  selectedValues?: string[];
-  setMultipleSelectedValues?: (id: string, values: string[]) => void;
-  setSelectedValue?: (id: string, value: string) => void;
-  shouldShowItems?: boolean;
-  removeAllValues?: (id: string) => void;
-  queryName: string; // NOTE: This is used by some systems to avoid looping through all options to get the name. This should be refactored away in those systems.
-};
-
-export type CheckboxListBase = {
-  key: ContentKeys.Checkbox;
-  content: {
-    key: string;
-    header?: string;
-    categories?: CheckboxCategory[];
-  }[];
-  emptySearchResultText?: string;
-  emptySearchResultDescription?: string;
-};
-
-export type CheckboxListSearch = CheckboxListBase & {
-  searchProps: Search;
-};
-
-export type CheckboxList = CheckboxListBase | CheckboxListSearch;

package/react/form-content/form-content.radio-list.tsx

@@ -1,58 +0,0 @@
-import * as React from 'react';
-import Radio from '../radio';
-import Text from '../text';
-import FormContentSearch from './form-content.search';
-
-import { RadioList as Props, SearchItem } from './form-content.types';
-import classNames from 'classnames';
-
-const RadioList: React.FC<Props> = props => {
-  const [searchTerm, setSearchTerm] = React.useState('');
-  const [searchResult, setSearchResult] = React.useState<SearchItem[]>();
-  return (
-    <div>
-      {'searchProps' in props ? (
-        <FormContentSearch
-          {...props.searchProps}
-          searchResult={setSearchResult}
-          searchTerm={setSearchTerm}
-        />
-      ) : undefined}
-      {props.categories.map((category, categoryIndex) => (
-        <div key={categoryIndex}>
-          {category.header &&
-          category.options.length > 0 &&
-          searchTerm.length === 0 ? (
-            <Text
-              className={classNames('form-content__group-title', {
-                hidden: searchTerm.length > 0,
-              })}
-              theme={Text.themes.emphasis}
-            >
-              {category.header}
-            </Text>
-          ) : undefined}
-          {category.options.map((radio, i) => {
-            const isInSearchResults =
-              searchTerm.length > 0
-                ? searchResult?.find(
-                    item =>
-                      item.key.toLowerCase() === radio.value.toLowerCase(),
-                  )
-                : undefined;
-
-            if (searchTerm.length > 0 && !isInSearchResults) return;
-
-            return (
-              <div key={i} className="form-content__radio-button">
-                <Radio {...radio} isUnderline={true} />
-              </div>
-            );
-          })}
-        </div>
-      ))}
-    </div>
-  );
-};
-
-export default RadioList;

package/react/form-content/form-content.range.tsx

@@ -1,20 +0,0 @@
-import * as React from 'react';
-import TextInput from '../text-input';
-
-import { Range as Props } from './form-content.range.types';
-
-const Range: React.FC<React.PropsWithChildren<Props>> = ({ max, min }) => {
-  return (
-    <div className="form-content__range">
-      <div className="form-content__range-input">
-        <TextInput {...min} type="number" />
-      </div>
-      <div className="form-content__range-line"></div>
-      <div className="form-content__range-input">
-        <TextInput {...max} type="number" />
-      </div>
-    </div>
-  );
-};
-
-export default Range;

package/react/form-content/form-content.search.tsx

@@ -1,47 +0,0 @@
-import FuzzySearch from 'fuzzy-search';
-import * as React from 'react';
-import Search from '../search';
-import { Search as Props, SearchItem } from './form-content.types';
-
-const FormContentSearch: React.FC<Props> = ({
-  searchInput,
-  searchKeys,
-  searchDataset,
-  searchTerm = () => {},
-  searchResult = () => {},
-}) => {
-  const [term, setTerm] = React.useState('');
-  const searchOptions = { sort: true };
-
-  const search = React.useMemo(() => {
-    const searcher = new FuzzySearch<SearchItem>(
-      searchDataset,
-      searchKeys,
-      searchOptions,
-    );
-    return (term: string) => searcher.search(term);
-  }, [searchDataset]);
-
-  const searchResults = React.useMemo(
-    () => (term.length > 0 ? search(term) : []),
-    [search, term],
-  );
-
-  React.useEffect(() => {
-    searchResult(searchResults);
-    searchTerm(term);
-  });
-
-  return (
-    <div className="form-content__search">
-      <Search
-        {...searchInput}
-        inputSize={Search.inputSizes.small}
-        isLabelVisible={false}
-        onChangeFunc={string => setTerm(string)}
-      />
-    </div>
-  );
-};
-
-export default FormContentSearch;

package/react/form-content/form-content.tsx

@@ -1,96 +0,0 @@
-import * as React from 'react';
-import classNames from 'classnames';
-
-import Button from '../button';
-import Close from '../icons/24/close';
-import Text from '../text';
-
-import CheckboxList from './form-content.checkbox-list';
-import RadioList from './form-content.radio-list';
-import Range from './form-content.range';
-
-import { FormContent as Props } from './form-content.types';
-
-import { ContentKeys } from '../form-content/form-content.types';
-import TabTrapper from '../modal/tab-trapper';
-
-const Content = (content: Props['content']) => {
-  switch (content.key) {
-    case ContentKeys.Checkbox: {
-      return <CheckboxList {...content} />;
-    }
-    case ContentKeys.Range: {
-      return <Range {...content} />;
-    }
-    case ContentKeys.Radio: {
-      return <RadioList {...content} />;
-    }
-  }
-};
-
-const FormContent: React.FC<Props> = ({
-  content,
-  closeLabel,
-  isOpen = false,
-  close,
-  onSubmit,
-  submitLabel,
-  title,
-}) => (
-  <div className="form-content">
-    {isOpen ? <div className="form-content__background-overlay"></div> : null}
-    <TabTrapper isActive={isOpen}>
-      <div
-        className={classNames('form-content__modal', {
-          'form-content__modal--open': isOpen,
-        })}
-        data-test-modal
-      >
-        <div className="form-content__modal-header">
-          <Text
-            elementName="span"
-            theme={Text.themes.emphasis}
-            size={Text.sizes.headline3}
-            className="form-content__modal-title"
-          >
-            {title}
-          </Text>
-          <div className="form-content__modal-close-small">
-            <Button
-              iconOnly
-              leadingIcon={<Close />}
-              onClick={close}
-              size={Button.sizes.small}
-              text={closeLabel}
-              variant={Button.variants.secondary}
-            />
-          </div>
-        </div>
-        <div className="form-content__modal-content">{Content(content)}</div>
-        <div className="form-content__modal-action-wrapper">
-          <div className="form-content__modal-actions">
-            <div className="form-content__modal-close-large">
-              <Button
-                data-testid="close-form-content-modal"
-                variant={Button.variants.secondary}
-                size={Button.sizes.basic}
-                text={closeLabel}
-                onClick={close}
-              />
-            </div>
-            <Button
-              className="form-content__submit"
-              variant={Button.variants.primary}
-              size={Button.sizes.basic}
-              type="submit"
-              text={submitLabel}
-              onClick={onSubmit}
-            />
-          </div>
-        </div>
-      </div>
-    </TabTrapper>
-  </div>
-);
-
-export default FormContent;

package/react/form-content/form-content.types.ts

@@ -1,55 +0,0 @@
-import type { Radio } from '../radio/radio.types';
-import type { Range } from './form-content.range.types';
-import type { Search as SearchProps } from '../search/search.types';
-import type { CheckboxList } from './form-content.checkbox-list.types';
-
-export enum ContentKeys {
-  Radio = 'radio',
-  Range = 'range',
-  Checkbox = 'checkbox',
-}
-
-export type SearchItem = { key: string; label: string };
-
-export type Search = {
-  searchKeys: string[];
-  searchDataset: SearchItem[];
-  searchInput: SearchProps;
-  searchTerm?: (arg: string) => void;
-  searchResult?: (arg: SearchItem[]) => void;
-};
-
-type RadioListBase = {
-  key: ContentKeys.Radio;
-  categories: {
-    header?: string;
-    options: Radio[];
-    id: string;
-  }[];
-  setSelectedValue?: (id: string, value: string) => void;
-};
-
-type RadioListSearch = RadioListBase & {
-  searchProps: Search;
-};
-
-export type RadioList = RadioListBase | RadioListSearch;
-
-type FormContentBase = {
-  closeLabel: string;
-  isOpen?: boolean;
-  close?: () => void;
-  onSubmit?: () => void;
-  submitLabel: string;
-  title: string;
-};
-
-export type FormContentDropdownList = FormContentBase & {
-  content: RadioList;
-};
-
-export type FormContentFilter = FormContentBase & {
-  content: Range | CheckboxList | RadioList;
-};
-
-export type FormContent = FormContentDropdownList | FormContentFilter;

package/react/hooks/focus-previous-element.ts

@@ -1,30 +0,0 @@
-import { RefObject, useEffect, useRef } from 'react';
-
-const focusRef = (ref: React.RefObject<HTMLElement | null>): void => {
-  ref?.current?.focus();
-};
-
-const focusPreviousElement = (
-  modal: RefObject<HTMLElement | null>,
-  isActive?: boolean,
-) => {
-  const previouslyFocusedElement = useRef<HTMLElement | null>(null);
-
-  const focusContent = () => focusRef(modal);
-  useEffect(() => {
-    if (modal.current && isActive) {
-      previouslyFocusedElement.current = document.activeElement as HTMLElement;
-      focusContent();
-      return;
-    }
-
-    if (!isActive) {
-      focusRef(previouslyFocusedElement);
-    }
-  }, [isActive]);
-
-  // NOTE: This happens on unmount only
-  useEffect(() => () => focusRef(previouslyFocusedElement), []);
-};
-
-export default focusPreviousElement;

package/react/hooks/is-running-on-client.ts

@@ -1 +0,0 @@
-export default typeof window !== 'undefined';

package/react/hooks/use-click-outside.ts

@@ -1,23 +0,0 @@
-import * as React from 'react';
-
-import useEvent from './use-event';
-
-/** Executes the provided callback when a click event occurs outside of the provided ref */
-const useClickOutside = (
-  ref: React.RefObject<Element | null>,
-  callback: () => void = () => {},
-): void => {
-  useEvent<MouseEvent>('mousedown', e => {
-    if (
-      ref.current &&
-      ref?.current !== e.target &&
-      // NOTE: Because of react typings we need to cast this, more info: https://stackoverflow.com/a/61164277
-      !ref.current.contains(e.target as Node) &&
-      e.clientX < document.body.scrollWidth
-    ) {
-      callback();
-    }
-  });
-};
-
-export default useClickOutside;