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

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

@@ -1,250 +0,0 @@
-// @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

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

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

@@ -1,229 +0,0 @@
-// @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

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

package/lib/components/index.js.flow

@@ -1,77 +0,0 @@
-// @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

@@ -1,18 +0,0 @@
-// @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

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