@redsift/design-system-legacy 8.0.1 → 8.0.2

package/src/components/Radio/readme.md

@@ -1,90 +0,0 @@
-### Accessibility
-
-- Ensure label is provided
-
-### Props
-
-|      Prop      |       Default       |                                          Options |
-| :------------: | :-----------------: | -----------------------------------------------: |
-|      name      |                     | required for grouping the radio buttons together |
-|     color      |       '#000'        |                                            Color |
-|  borderColor   | rgba(0, 0, 0 , .54) |                                            Color |
-|     label      |                     |                                           string |
-|    checked     |        false        |                                      true, false |
-| defaultChecked |        false        |                                      true, false |
-|    disabled    |        false        |                                      true, false |
-|    onChange    |                     |                                         Function |
-|   checkProps   |                     |              Passes props to the Check Indicator |
-|   inputProps   |                     |                        Passes props to the Input |
-|    ...rest     |                     |                      Passes props to the Wrapper |
-
-### Examples
-
-```js
-<div
-  style={{
-    display: "flex",
-    flexWrap: "wrap",
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-evenly"
-  }}
->
-  <Radio
-    name="ondmarc"
-    color="#02ac61"
-    borderColor="#02ac61"
-    label="OnDMARC 1"
-  />
-  <Radio
-    name="ondmarc"
-    color="#02ac61"
-    borderColor="#02ac61"
-    label="OnDMARC 2"
-    defaultChecked
-  />
-  <Radio
-    name="oninbox"
-    color="#33b222"
-    borderColor="#33b222"
-    label="OnINBOX 1"
-  />
-  <Radio
-    name="oninbox"
-    color="#33b222"
-    borderColor="#33b222"
-    label="OnINBOX 2"
-    defaultChecked
-  />
-  <Radio
-    name="ingrain"
-    color="#53C3EB"
-    borderColor="#53C3EB"
-    label="InGRAIN 1"
-  />
-  <Radio
-    name="ingrain"
-    color="#53C3EB"
-    borderColor="#53C3EB"
-    label="InGRAIN 2"
-    defaultChecked
-  />
-</div>
-```
-
-```js
-<div
-  style={{
-    display: "flex",
-    flexWrap: "wrap",
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-evenly"
-  }}
->
-  <Radio name="default" label="Default 1" />
-  <Radio name="default" label="Default 2" defaultChecked />
-  <Radio name="disabled" label="Disabled 1" disabled />
-  <Radio name="disabled" label="Disabled 2" disabled defaultChecked />
-</div>
-```

package/src/components/Select/Select.jsx

@@ -1,360 +0,0 @@
-import React, { createRef, useState, useEffect, useRef } from 'react';
-import { useOnClickOutside } from '../../hooks/useOnClickOutside';
-import { FlatArrow } from '../icons';
-import {
-  colors,
-  IconAndTextContainer,
-  IconAndSelectedValueRenderContainer,
-  SelectOuterContainer,
-  SelectContainer,
-  SelectLegendText,
-  SelectValueContainer,
-  SelectedValueText,
-  SelectSearchTextInput,
-  OptionsContainerWindowedComponent,
-  OptionsContainerComponent,
-} from "./SelectComponents";
-
-const WINDOWED_ITEM_SIZE = 40;
-const WINDOWED_MAX_HEIGHT = 400;
-const USE_WINDOWED_SELECT_THRESHOLD = 500;
-
-const selectedText = (options, selected, defaultValue) => {
-  if (selected) {
-    const { label, value } = selected;
-    return !label ? value : typeof label === "string" ? label : label(value);
-  }
-  if (!selected && defaultValue) {
-    const item = options.find((i) => i.value === defaultValue);
-    return item && item.label ? item.label : defaultValue;
-  }
-  return null;
-};
-
-export const Select = ({
-  disabled,
-  icon,
-  id,
-  isSearchable,
-  label,
-  onChange = () => {},
-  options = [],
-  tintColor = "#000",
-  useWindowed = false,
-  value,
-  variant = "outlined",
-  ...rest
-}) => {
-  const isMinimal = variant === "minimal";
-  const isBasic = variant === "basic";
-  const [selectedIndex, setSelectedIndex] = useState(-1);
-  const selectOptionIndex = (index) => {
-    if (disabled || !options[index] || options[index].disabled) return;
-    setSelectedIndex(index);
-  };
-
-  const [isOptionVisibleForIndex, setIsOptionVisibleForIndex] = useState(
-    options.map(() => true)
-  );
-  const [displayOptions, setDisplayOptions] = useState(false);
-  const outsideClickRef = useOnClickOutside(() => setDisplayOptions(false));
-
-  const optionRefs = useRef([]);
-  const selectedOption = options[selectedIndex];
-
-  const [searchInputRef, setSearchInput] = useState(null);
-  const [search, setSearch] = useState("");
-
-  const [focusInputRef, setFocusInput] = useState(null);
-  const selectWindowedRef = React.createRef();
-
-  useEffect(() => {
-    if (displayOptions) {
-      setIsOptionVisibleForIndex(options.map(() => true));
-    }
-    if (
-      selectedIndex > -1 &&
-      (!options[selectedIndex] || options[selectedIndex].disabled)
-    ) {
-      setSelectedIndex(-1);
-    }
-  }, [displayOptions, options]);
-
-  useEffect(() => {
-    if (!isSearchable || !searchInputRef) {
-      return;
-    }
-    const setSearchResults = () => {
-      const searchResults = options.map((option) => {
-        const { value, label } = option;
-        const text = typeof label === "string" ? label : value;
-        return !search || text.toLowerCase().startsWith(search.toLowerCase());
-      });
-      setIsOptionVisibleForIndex(searchResults);
-    };
-    const handleKeyUp = () => {
-      setSearchResults();
-    };
-    const handleKeyDown = (e) => {
-      if (
-        e.keyCode === 13 || // enter
-        e.keyCode === 40 || // down arrow
-        (e.keyCode === 9 && !e.shiftKey) // tab without shift
-      ) {
-        e.preventDefault();
-        const firstEnabledOptionIndex = isOptionVisibleForIndex.findIndex(
-          (i) => i
-        );
-        if (e.keyCode === 13) {
-          searchInputRef.blur();
-          selectOptionIndex(firstEnabledOptionIndex);
-          return;
-        }
-        optionRefs.current[firstEnabledOptionIndex].current.focus();
-      }
-    };
-    searchInputRef.addEventListener("keyup", handleKeyUp);
-    searchInputRef.addEventListener("keydown", handleKeyDown);
-    return () => {
-      searchInputRef.removeEventListener("keyup", handleKeyUp);
-      searchInputRef.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [searchInputRef, isOptionVisibleForIndex, options, isSearchable, search]);
-
-  // keyboard focus only
-  useEffect(() => {
-    if (focusInputRef === null) {
-      return;
-    }
-    const handleKeyPress = (e) => {
-      //TODO: accessibility: when up/down is pressed, the 'focused' item should be the top/bottom item in the options list, and not always the top item
-      // up
-      if (e.keyCode === 38) {
-        e.preventDefault();
-        setDisplayOptions(true);
-      }
-
-      // down
-      if (e.keyCode === 40) {
-        e.preventDefault();
-        setDisplayOptions(true);
-      }
-    };
-    focusInputRef.addEventListener("keydown", handleKeyPress);
-    return () => {
-      focusInputRef.removeEventListener("keydown", handleKeyPress);
-    };
-  }, [focusInputRef, options, selectedOption]);
-
-  useEffect(() => {
-    // pass the selected value to parent component
-    if (selectedIndex >= 0 && onChange) {
-      onChange(options[selectedIndex].value);
-    }
-  }, [selectedIndex]);
-
-  useEffect(() => {
-    // if value is defined (null is still a valid value)
-    // and we still don't have a selected index or the value is different
-    // let's update internal state's selectedIndex
-    if (
-      value !== undefined &&
-      (selectedIndex === -1 ||
-        value !== (options[selectedIndex] && options[selectedIndex].value))
-    ) {
-      selectOptionIndex(options.findIndex((opt) => opt.value === value));
-    }
-  }, [value]);
-
-  useEffect(() => {
-    if (options.length !== optionRefs.current.length) {
-      optionRefs.current = options.map(
-        (_, idx) => optionRefs.current[idx] || createRef()
-      );
-    }
-  }, [options]);
-
-  // option selection and event listeners
-  useEffect(() => {
-    if (
-      displayOptions &&
-      // if we still have no reference, wait until the next cycle
-      (!isSearchable || searchInputRef !== null)
-    ) {
-      const evtListenersToUnmount = [];
-      if (isSearchable) {
-        searchInputRef.focus();
-      } else {
-        optionRefs.current[
-          // select first visible
-          isOptionVisibleForIndex.findIndex((i) => i)
-        ].current.focus();
-      }
-
-      // attach keyboard events:
-      optionRefs.current.forEach((ref, idx) => {
-        const evtListener = (e) => {
-          e.preventDefault();
-          // down arrow or tab without shift
-          if (e.keyCode === 40 || (e.keyCode === 9 && !e.shiftKey)) {
-            const nextAvailableIndex = isOptionVisibleForIndex.findIndex(
-              (isOptionVisible, itemIdx) =>
-                isOptionVisible && !options[itemIdx].disabled && itemIdx > idx
-            );
-            optionRefs.current[
-              nextAvailableIndex >= 0
-                ? nextAvailableIndex
-                : optionRefs.current.length - 1
-            ].current.focus({ preventScroll: true });
-            // up arrow or tab with shift
-          } else if (e.keyCode === 38 || (e.keyCode === 9 && e.shiftKey)) {
-            const previousAvailableIndex = isOptionVisibleForIndex.reduce(
-              (previousIndex, isOptionEnabled, itemIndex) => {
-                return !isOptionEnabled ||
-                  options[itemIndex].disabled ||
-                  itemIndex >= idx
-                  ? previousIndex
-                  : itemIndex;
-              },
-              -1
-            );
-            optionRefs.current[
-              previousAvailableIndex >= 0 ? previousAvailableIndex : 0
-            ].current.focus({
-              preventScroll: true,
-            });
-            // space space enter
-          } else if ([0, 32, 13].includes(e.keyCode)) {
-            optionRefs.current[idx].current.click();
-          } else if (e.keyCode === 27) {
-            setDisplayOptions(false);
-          }
-        };
-
-        // ref.current is lost if an option unmounts
-        ref.current && ref.current.addEventListener("keydown", evtListener);
-        evtListenersToUnmount.push(
-          () =>
-            ref.current &&
-            ref.current.removeEventListener("keydown", evtListener)
-        );
-      });
-      if (evtListenersToUnmount.length) {
-        return () => evtListenersToUnmount.forEach((unmount) => unmount());
-      }
-    }
-  }, [displayOptions, searchInputRef, isOptionVisibleForIndex, isSearchable]);
-
-  const textColor =
-    displayOptions || isMinimal
-      ? tintColor
-      : disabled
-      ? colors.darkMidGrey
-      : colors.darkGrey;
-
-  const visibleItems = options.filter(
-    (_, index) => isOptionVisibleForIndex[index]
-  );
-
-  const countVisibleItems = visibleItems.length;
-  const useSelectWindowed =
-    useWindowed || options.length > USE_WINDOWED_SELECT_THRESHOLD;
-  const selectWindowedHeight = Math.floor(
-    Math.min(countVisibleItems * WINDOWED_ITEM_SIZE, WINDOWED_MAX_HEIGHT)
-  );
-
-  const optionsContainerProps = {
-    selectWindowedRef,
-    selectWindowedHeight,
-    visibleItems,
-    displayOptions,
-    disabled,
-    selectedIndex,
-    selectOptionIndex,
-    optionRefs,
-    options,
-    isOptionVisibleForIndex,
-    itemSize: WINDOWED_ITEM_SIZE,
-  };
-
-  const OptionsContainer = useSelectWindowed
-    ? OptionsContainerWindowedComponent
-    : OptionsContainerComponent;
-
-  return (
-    <SelectOuterContainer
-      ref={outsideClickRef}
-      onClick={() =>
-        !disabled && setDisplayOptions((displayOptions) => !displayOptions)
-      }
-      {...rest}
-    >
-      <SelectContainer
-        variant={variant}
-        color={
-          isMinimal || isBasic || displayOptions ? tintColor : colors.midGrey
-        }
-        disabled={disabled}
-      >
-        {!isMinimal && (
-          <legend>
-            <SelectLegendText id={id} color={textColor}>
-              {label}
-            </SelectLegendText>
-          </legend>
-        )}
-        <IconAndTextContainer>
-          <SelectValueContainer
-            tabIndex="0"
-            aria-haspopup="listbox"
-            role="listbox"
-            aria-labelledby={`dropdown_${id} dropdown_${id}_button`}
-            onKeyPress={(e) => {
-              if (!disabled && e.charCode === 13) {
-                e.preventDefault();
-                setDisplayOptions((displayOptions) => !displayOptions);
-              }
-            }}
-            ref={setFocusInput}
-          >
-            {!displayOptions || isSearchable || isMinimal ? (
-              <IconAndSelectedValueRenderContainer>
-                {icon}
-                {displayOptions && isSearchable ? (
-                  <SelectSearchTextInput
-                    withIcon={!!icon}
-                    value={search}
-                    placeholder={
-                      selectedOption
-                        ? typeof selectedOption.label === "string"
-                          ? selectedOption.label
-                          : selectedOption.value
-                        : ""
-                    }
-                    onChange={(evt) => !disabled && setSearch(evt.target.value)}
-                    ref={setSearchInput}
-                  />
-                ) : (
-                  <SelectedValueText
-                    withIcon={!!icon}
-                    disabled={disabled}
-                    color={isMinimal ? tintColor : undefined}
-                  >
-                    {selectedText(options, selectedOption, value)}
-                  </SelectedValueText>
-                )}
-              </IconAndSelectedValueRenderContainer>
-            ) : null}
-          </SelectValueContainer>
-          <FlatArrow
-            width={9}
-            direction={displayOptions ? "up" : "down"}
-            fill={textColor}
-            title="Open drop down"
-          />
-        </IconAndTextContainer>
-      </SelectContainer>
-      <OptionsContainer {...optionsContainerProps} />
-    </SelectOuterContainer>
-  );
-};