@spaced-out/ui-design-system 0.4.13-beta.1 → 0.4.14

package/lib/components/Typeahead/Typeahead.js.flow

@@ -0,0 +1,250 @@
+// @flow strict
+
+import * as React from 'react';
+import {
+  // $FlowFixMe[untyped-import]
+  autoUpdate,
+  // $FlowFixMe[untyped-import]
+  flip,
+  // $FlowFixMe[untyped-import]
+  FloatingFocusManager,
+  // $FlowFixMe[untyped-import]
+  FloatingPortal,
+  // $FlowFixMe[untyped-import]
+  offset,
+  // $FlowFixMe[untyped-import]
+  useFloating,
+} from '@floating-ui/react';
+
+import {useReferenceElementWidth} from '../../hooks';
+import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
+import {classify} from '../../utils/classify';
+import {type ClickAwayRefType, ClickAway} from '../../utils/click-away';
+import {mergeRefs} from '../../utils/merge-refs';
+import type {InputProps} from '../Input';
+import type {MenuOption, MenuProps} from '../Menu';
+import {Menu} from '../Menu';
+import {SearchInput} from '../SearchInput';
+import type {ElevationType} from '../Tooltip';
+import {getElevationValue} from '../Tooltip';
+
+import css from './Typeahead.module.css';
+
+
+type ClassNames = $ReadOnly<{wrapper?: string, box?: string}>;
+
+type BaseTypeaheadProps = {
+  ...InputProps,
+  classNames?: ClassNames,
+  onSelect?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
+  onSearch?: (evt: SyntheticInputEvent<HTMLInputElement>) => mixed,
+  onMenuOpen?: () => mixed,
+  onMenuClose?: () => mixed,
+  typeaheadInputText?: string,
+  menu?: MenuProps,
+  onClear?: () => void,
+  isLoading?: boolean,
+  menuOpenOffset?: number,
+  clickAwayRef?: ClickAwayRefType,
+  elevation?: ElevationType,
+  ...
+};
+
+export type TypeaheadProps = {
+  ...BaseTypeaheadProps,
+  allowInternalFilter?: boolean,
+  ...
+};
+
+const BaseTypeahead: React$AbstractComponent<
+  BaseTypeaheadProps,
+  HTMLInputElement,
+> = React.forwardRef<BaseTypeaheadProps, HTMLInputElement>(
+  (
+    {
+      size = 'medium',
+      classNames,
+      placeholder = 'Select...',
+      onSelect,
+      onSearch,
+      onClear,
+      menu,
+      onMenuOpen,
+      onMenuClose,
+      typeaheadInputText = '',
+      isLoading,
+      menuOpenOffset = 1,
+      onFocus,
+      clickAwayRef,
+      elevation = 'modal',
+      ...inputProps
+    }: BaseTypeaheadProps,
+    ref,
+  ): React.Node => {
+    const menuOptions = menu?.options;
+
+    const {x, y, refs, strategy, context} = useFloating({
+      open: true,
+      strategy: 'absolute',
+      placement: 'bottom-start',
+      whileElementsMounted: autoUpdate,
+      middleware: [flip(), offset(parseInt(spaceXXSmall))],
+    });
+
+    const dropdownWidth = useReferenceElementWidth(refs.reference?.current);
+
+    const onMenuToggle = (isOpen: boolean) => {
+      isOpen ? onMenuOpen && onMenuOpen() : onMenuClose && onMenuClose();
+    };
+
+    return (
+      <ClickAway onChange={onMenuToggle} clickAwayRef={clickAwayRef}>
+        {({isOpen, onOpen, clickAway, boundaryRef, triggerRef}) => (
+          <div
+            data-testid="Typeahead"
+            className={classify(css.typeaheadContainer, classNames?.wrapper)}
+          >
+            <SearchInput
+              {...inputProps}
+              ref={ref}
+              boxRef={mergeRefs([refs.setReference, triggerRef])}
+              size={size}
+              placeholder={placeholder}
+              value={typeaheadInputText}
+              classNames={{box: classNames?.box}}
+              isLoading={isLoading}
+              onChange={(e) => {
+                e.stopPropagation();
+                onSearch && onSearch(e);
+                if (e.target.value.length >= menuOpenOffset) {
+                  !isOpen && onOpen();
+                } else {
+                  clickAway();
+                }
+              }}
+              onFocus={(_e) => {
+                if (typeaheadInputText.length >= menuOpenOffset) {
+                  !isOpen && onOpen();
+                } else {
+                  clickAway();
+                }
+                onFocus?.(_e);
+              }}
+              onClear={(_e) => {
+                onClear?.();
+              }}
+            />
+            {isOpen &&
+              !isLoading &&
+              menu &&
+              menuOptions &&
+              !!menuOptions.length && (
+              <FloatingPortal>
+                <FloatingFocusManager
+                  modal={false}
+                  context={context}
+                  returnFocus={false}
+                  initialFocus={refs.reference}
+                >
+                  <div
+                    ref={mergeRefs([refs.setFloating, boundaryRef])}
+                    className={css.menuWrapper}
+                    style={{
+                      position: strategy,
+                      top: y ?? spaceNone,
+                      left: x ?? spaceNone,
+                      /* NOTE(Sharad): The FloatingPortal renders the menu outside the normal DOM structure,
+                       so its parent is effectively the <body> element. This means the menu
+                       would otherwise default to the body's width. To support fluid width,
+                       we must manually set the dropdown width here; otherwise, it uses a fixed width.
+                       Also, Only treat menu as non-fluid if isFluid is strictly false, since default is true in menu and undefined means fluid. */
+                      ...(menu.isFluid !== false && {
+                        '--dropdown-width': dropdownWidth,
+                      }),
+                      '--menu-elevation': getElevationValue(elevation),
+                    }}
+                  >
+                    <Menu
+                      {...menu}
+                      options={menuOptions}
+                      onSelect={(option, e) => {
+                        onSelect && onSelect(option, e);
+                        if (
+                        // option.keepMenuOpenOnOptionSelect - to allow the menu persist its open stat upon option selection in normal variant
+                          !option.keepMenuOpenOnOptionSelect &&
+                            (!menu.optionsVariant ||
+                              menu.optionsVariant === 'normal')
+                        ) {
+                          clickAway();
+                        }
+                      }}
+                      size={menu.size || size}
+                      onTabOut={clickAway}
+                    />
+                  </div>
+                </FloatingFocusManager>
+              </FloatingPortal>
+            )}
+          </div>
+        )}
+      </ClickAway>
+    );
+  },
+);
+
+const StatefulTypeahead: React$AbstractComponent<
+  BaseTypeaheadProps,
+  HTMLInputElement,
+> = React.forwardRef<BaseTypeaheadProps, HTMLInputElement>(
+  ({menu, ...props}: BaseTypeaheadProps, ref): React.Node => {
+    const {typeaheadInputText = ''} = props;
+    const [filteredOptions, setFilteredOptions] = React.useState(menu?.options);
+
+    React.useEffect(() => {
+      const optionsFiltered =
+        menu?.options &&
+        menu.options.filter((option) => {
+          if (!option.label || !typeaheadInputText) {
+            return true;
+          } else {
+            return (
+              option.label
+                .toLowerCase()
+                .indexOf(typeaheadInputText.toLowerCase()) !== -1
+            );
+          }
+        });
+      setFilteredOptions(optionsFiltered || []);
+    }, [typeaheadInputText, menu?.options]);
+
+    return (
+      <BaseTypeahead
+        {...props}
+        menu={{...menu, options: filteredOptions}}
+        ref={ref}
+      />
+    );
+  },
+);
+
+const StatelessTypeahead: React$AbstractComponent<
+  BaseTypeaheadProps,
+  HTMLInputElement,
+> = React.forwardRef<BaseTypeaheadProps, HTMLInputElement>(
+  (props: BaseTypeaheadProps, ref): React.Node => (
+    <BaseTypeahead {...props} ref={ref} />
+  ),
+);
+
+export const Typeahead: React$AbstractComponent<
+  TypeaheadProps,
+  HTMLInputElement,
+> = React.forwardRef<TypeaheadProps, HTMLInputElement>(
+  ({allowInternalFilter = true, ...props}: TypeaheadProps, ref): React.Node => {
+    if (allowInternalFilter) {
+      return <StatefulTypeahead {...props} ref={ref} />;
+    } else {
+      return <StatelessTypeahead {...props} ref={ref} />;
+    }
+  },
+);

package/lib/components/Typeahead/index.js.flow

@@ -0,0 +1,4 @@
+// @flow strict
+
+export * from './SimpleTypeahead';
+export * from './Typeahead';

package/lib/components/WeekdayPicker/WeekdayPicker.js.flow

@@ -0,0 +1,229 @@
+// @flow strict
+
+import * as React from 'react';
+
+import classify from '../../utils/classify';
+import {UnstyledButton} from '../Button';
+
+import css from './WeekdayPicker.module.css';
+
+
+const DEFAULT_WEEKDAYS = [
+  {key: 'sun', label: 'S'},
+  {key: 'mon', label: 'M'},
+  {key: 'tue', label: 'T'},
+  {key: 'wed', label: 'W'},
+  {key: 'thu', label: 'T'},
+  {key: 'fri', label: 'F'},
+  {key: 'sat', label: 'S'},
+];
+
+const WEEKEND_KEYS = ['sat', 'sun'];
+
+export const WEEKDAY_PICKER_SIZE = Object.freeze({
+  small: 'small',
+  medium: 'medium',
+});
+
+type ClassNames = $ReadOnly<{
+  wrapper?: string,
+  button?: string,
+  label?: string,
+  helperText?: string,
+}>;
+type WeekdayPickerSize = $Values<typeof WEEKDAY_PICKER_SIZE>;
+
+type Weekday = {
+  key: string,
+  label: string,
+  secondaryLabel?: string,
+};
+
+export type WeekdayPickerProps = {
+  size?: WeekdayPickerSize,
+  selectedWeekDays?: Array<Weekday>,
+  hiddenWeekDays?: Array<string>,
+  disabledWeekDays?: Array<string>,
+  customDayLabels?: Array<Weekday>,
+  onChange?: (
+    selectedDays: Array<Weekday>,
+    ?SyntheticEvent<HTMLElement>,
+  ) => mixed,
+  readOnly?: boolean,
+  classNames?: ClassNames,
+  showWeekends?: boolean,
+  ariaLabel?: string,
+  label?: React.Node,
+  helperText?: React.Node,
+  disableMultiSelect?: boolean,
+};
+
+type DayButtonProps = {
+  day: Weekday,
+  isSelected: boolean,
+  isDisabled: boolean,
+  onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
+  className?: string,
+  size: WeekdayPickerSize,
+  readOnly?: boolean,
+};
+
+const DayButton = ({
+  day,
+  isSelected,
+  isDisabled,
+  onClick,
+  className,
+  size,
+  readOnly,
+}: DayButtonProps) => (
+  <UnstyledButton
+    key={day.key}
+    className={classify(
+      css.weekdayButton,
+      {
+        [css.weekdayButtonMedium]: size === WEEKDAY_PICKER_SIZE.medium,
+        [css.weekdayButtonSmall]: size === WEEKDAY_PICKER_SIZE.small,
+        [css.weekdayButtonSelected]: isSelected,
+        [css.weekdayButtonDisabled]: isDisabled,
+      },
+      className,
+    )}
+    onClick={onClick}
+    disabled={isDisabled}
+    aria-label={`Select ${day.label}`}
+    tabIndex={isDisabled || readOnly ? -1 : 0}
+    role="checkbox"
+  >
+    {day.secondaryLabel && (
+      <div
+        className={classify(css.secondaryLabel, {
+          [css.secondaryLabelSelected]: isSelected,
+          [css.secondaryLabelDisabled]: isDisabled,
+        })}
+      >
+        {day.secondaryLabel}
+      </div>
+    )}
+    {day.label}
+  </UnstyledButton>
+);
+
+export const WeekdayPicker: React$AbstractComponent<
+  WeekdayPickerProps,
+  HTMLDivElement,
+> = React.forwardRef<WeekdayPickerProps, HTMLDivElement>(
+  (
+    {
+      size = 'medium',
+      selectedWeekDays = [],
+      disabledWeekDays = [],
+      hiddenWeekDays = [],
+      customDayLabels = DEFAULT_WEEKDAYS,
+      onChange,
+      readOnly = false,
+      classNames = {},
+      showWeekends = true,
+      ariaLabel = 'Select weekdays',
+      label,
+      helperText,
+      disableMultiSelect = false,
+    }: WeekdayPickerProps,
+    ref,
+  ) => {
+    const [selectedDays, setSelectedDays] =
+      React.useState<Array<Weekday>>(selectedWeekDays);
+
+    const handleDayToggle = (
+      day: Weekday,
+      event: SyntheticEvent<HTMLElement>,
+    ) => {
+      if (readOnly || disabledWeekDays.includes(day.key)) {
+        return;
+      }
+
+      let updatedSelectedDays = selectedDays;
+
+      if (disableMultiSelect) {
+        if (selectedDays.some((selected) => selected.key === day.key)) {
+          updatedSelectedDays = [];
+        } else {
+          updatedSelectedDays = [day];
+        }
+      } else {
+        const isSelected = selectedDays.some(
+          (selected) => selected.key === day.key,
+        );
+
+        if (isSelected) {
+          updatedSelectedDays = selectedDays.filter(
+            (selected) => selected.key !== day.key,
+          );
+        } else {
+          updatedSelectedDays = [...selectedDays, day];
+        }
+      }
+
+      setSelectedDays(updatedSelectedDays);
+      onChange?.(updatedSelectedDays, event);
+    };
+
+    return (
+      <div
+        data-testid="Weekday-Picker"
+        ref={ref}
+        className={classify(css.weekdayPickerContainer, classNames.wrapper, {
+          [css.weekdayReadOnly]: readOnly,
+        })}
+        aria-label={ariaLabel}
+        role="group"
+      >
+        {!!label && (
+          <div className={classify(css.weekdayLabel, classNames.label)}>
+            {label}
+          </div>
+        )}
+        <div className={css.weekdayPickerDays}>
+          {customDayLabels.map((day) => {
+            const isWeekend = WEEKEND_KEYS.includes(day.key);
+            const isHidden = hiddenWeekDays.includes(day.key);
+            if ((!showWeekends && isWeekend) || isHidden) {
+              return null;
+            }
+
+            const isSelected = selectedDays.some(
+              (selected) => selected.key === day.key,
+            );
+            const isDisabled = disabledWeekDays.includes(day.key);
+
+            return (
+              <DayButton
+                key={day.key}
+                day={day}
+                isSelected={isSelected}
+                isDisabled={isDisabled}
+                onClick={(event) => {
+                  if (isDisabled) {
+                    event.preventDefault();
+                  } else {
+                    handleDayToggle(day, event);
+                  }
+                }}
+                className={classNames.button}
+                size={size}
+                readOnly={readOnly}
+              />
+            );
+          })}
+        </div>
+        {!!helperText && (
+          <div
+            className={classify(css.weekdayHelperText, classNames.helperText)}
+          >
+            {helperText}
+          </div>
+        )}
+      </div>
+    );
+  },
+);

package/lib/components/WeekdayPicker/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './WeekdayPicker';

package/lib/components/index.js.flow

@@ -0,0 +1,77 @@
+// @flow strict
+
+export * from './Accordion';
+export * from './Avatar';
+export * from './AvatarGroup';
+export * from './Badge';
+export * from './BadgedIcon';
+export * from './Banner';
+export * from './Breadcrumbs';
+export * from './Button';
+export * from './ButtonDropdown';
+export * from './ButtonTabs';
+export * from './Card';
+export * from './Charts';
+export * from './ChatBubble';
+export * from './Checkbox';
+export * from './Chip';
+export * from './CircularLoader';
+export * from './CollapsibleCard';
+export * from './Combobox';
+export * from './ConditionalWrapper';
+export * from './DateRangePicker';
+export * from './Dialog';
+export * from './Disclaimer';
+export * from './Dropdown';
+export * from './EmptyState';
+export * from './ErrorMessage';
+export * from './FileUpload';
+export * from './FilterButtonOverlay';
+export * from './FocusManager';
+export * from './FocusManagerWithArrowKeyNavigation';
+export * from './FormTitleWrapper';
+export * from './Grid';
+export * from './Icon';
+export * from './InContextAlert';
+export * from './InfinitePagination';
+export * from './InlineDropdown';
+export * from './Input';
+export * from './KPIBox';
+export * from './LinearLoader';
+export * from './Link';
+export * from './Menu';
+export * from './Modal';
+export * from './Notification';
+export * from './OptionButton';
+export * from './PageTitle';
+export * from './Pagination';
+export * from './Panel';
+export * from './ProgressDonut';
+export * from './PromptChip';
+export * from './PromptInput';
+export * from './RadioButton';
+export * from './RadioTile';
+export * from './RangeSlider';
+export * from './Rating';
+export * from './ScoreBar';
+export * from './SearchInput';
+export * from './Separator';
+export * from './Shimmer';
+export * from './SideMenuLink';
+export * from './StatusIndicator';
+export * from './Stepper';
+export * from './StickyBar';
+export * from './SubMenu';
+export * from './Table';
+export * from './Tabs';
+export * from './Text';
+export * from './Textarea';
+export * from './TextTile';
+export * from './Toast';
+export * from './Toggle';
+export * from './TokenListInput';
+export * from './Tooltip';
+export * from './Truncate';
+export * from './TruncatedTextWithTooltip';
+export * from './Typeahead';
+export * from './WeekdayPicker';

package/lib/hooks/index.js.flow

@@ -0,0 +1,18 @@
+// @flow strict
+
+export * from './useArbitraryOptionAddition';
+export * from './useCopyToClipboard';
+export * from './useDebounce';
+export * from './useFileUpload';
+export * from './useFilteredOptions';
+export * from './useInfiniteScroll';
+export * from './useInputState';
+export * from './useLockedBody';
+export * from './useModal';
+export * from './useMountTransition';
+export * from './usePagination';
+export * from './useReferenceElementWidth';
+export * from './useResizeObserver';
+export * from './useToastPortal';
+export * from './useToggle';
+export * from './useWindowSize';

package/lib/hooks/useArbitraryOptionAddition/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './useArbitraryOptionAddition';

package/lib/hooks/useArbitraryOptionAddition/useArbitraryOptionAddition.js

@@ -13,18 +13,17 @@ function useArbitraryOptionAddition(_ref) {
     allowArbitraryValues = true,
     allowMultiArbitraryValues = false,
     validateArbitraryValue = value => value.trim() !== '',
-    // @ts-ignore - TS2322 - Type '{ key: string; label: string; arbitrary: boolean; }' is not assignable to type 'V'.
+    // $FlowFixMe[incompatible-return] - Object literal is compatible with V due to type constraint
     makeArbitraryValue = searchTerm => ({
       key: searchTerm,
       label: searchTerm,
       arbitrary: true
     }),
-    // @ts-ignore - TS2366 - Function lacks ending return statement and return type does not include 'undefined'.
+    // $FlowFixMe[incompatible-return] - Object literal is compatible with V due to type constraint
     makeMultiArbitraryValue = searchTerm => {
       const regex = /^(?=.*[,\n]).+$/s;
       if (regex.test(searchTerm)) {
         // $FlowFixMe - Object literal is compatible with V due to type constraint
-        // @ts-ignore - TS2322 - Type '{ key: string; label: string; multiArbitrary: boolean; }' is not assignable to type 'V'.
         return {
           key: searchTerm,
           label: searchTerm,
@@ -40,7 +39,6 @@ function useArbitraryOptionAddition(_ref) {
     },
     searchOptionsBy = (option, searchTerm) => {
       // $FlowFixMe
-      // @ts-ignore - TS2322 - Type 'V' is not assignable to type '{ label: string; key: string; }'.
       const {
         label,
         key
@@ -55,17 +53,18 @@ function useArbitraryOptionAddition(_ref) {
   } = (0, _useFilteredOptions.useFilteredOptions)({
     searchTerm: trimmedSearchTerm,
     options,
+    // $FlowFixMe[incompatible-call]
     groupTitleOptions,
     searchOptionsBy
   });
 
   // Find if an arbitrary option should be added
   const arbitraryOption = allowArbitraryValues && trimmedSearchTerm &&
-  // @ts-ignore - TS2532 - Object is possibly 'undefined'. | TS2339 - Property 'key' does not exist on type 'V'.
+  // $FlowFixMe - Array methods are valid here
   !filteredOptions.some(option => option.key === trimmedSearchTerm) &&
-  // @ts-ignore - TS2532 - Object is possibly 'undefined'.
+  // $FlowFixMe - Array methods are valid here
   !filteredGroupTitleOptions.some(group => Array.isArray(group.options) &&
-  // @ts-ignore - TS2339 - Property 'key' does not exist on type 'V'.
+  // $FlowFixMe- option has key property
   group.options.some(option => option.key === trimmedSearchTerm)) && !excludedKeys.includes(trimmedSearchTerm) && validateArbitraryValue(trimmedSearchTerm) && makeArbitraryValue(trimmedSearchTerm);
 
   // Find if a multi-arbitrary option should be added
@@ -75,7 +74,7 @@ function useArbitraryOptionAddition(_ref) {
   let optionsWithArbitrary = filteredOptions;
   let groupTitleOptionsWithArbitrary = groupTitleOptions;
   if (arbitraryOption) {
-    // @ts-ignore - TS2488 - Type 'V[] | undefined' must have a '[Symbol.iterator]()' method that returns an iterator.
+    // $FlowFixMe[incompatible-type] - Array spread is valid here
     optionsWithArbitrary = [arbitraryOption, ...optionsWithArbitrary];
     groupTitleOptionsWithArbitrary = [{
       ...arbitraryGroup,
@@ -83,13 +82,14 @@ function useArbitraryOptionAddition(_ref) {
     }, ...groupTitleOptionsWithArbitrary];
   }
   if (multiArbitraryOption) {
+    // $FlowFixMe[incompatible-type] - Array spread is valid here
     optionsWithArbitrary = [multiArbitraryOption, ...optionsWithArbitrary];
     groupTitleOptionsWithArbitrary = [{
       ...arbitraryGroup,
       options: [multiArbitraryOption]
     }, ...groupTitleOptionsWithArbitrary];
   }
-  // @ts-ignore - TS2322 - Type 'V[] | undefined' is not assignable to type 'V[]'.
+  // $FlowFixMe[incompatible-return]
   return {
     optionsWithArbitrary,
     groupTitleOptionsWithArbitrary