@spaced-out/ui-design-system 0.3.38 → 0.3.39-beta.0

package/lib/components/Typeahead/Typeahead.d.ts

@@ -0,0 +1,217 @@
+import {$ReadOnly} from 'utility-types';
+import * as React from 'react';
+import {
+  // $FlowFixMe[untyped-import]
+  autoUpdate, // $FlowFixMe[untyped-import]
+  flip, // $FlowFixMe[untyped-import]
+  offset, // $FlowFixMe[untyped-import]
+  useFloating,
+} from '@floating-ui/react';
+import {sizeFluid} from '../../styles/variables/_size';
+import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
+import {classify} from '../../utils/classify';
+import type {ClickAwayRefType} from '../../utils/click-away';
+import {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 css from './Typeahead.module.css';
+type ClassNames = $ReadOnly<{
+  wrapper?: string;
+  box?: string;
+}>;
+type BaseTypeaheadProps = InputProps & {
+  classNames?: ClassNames;
+  onSelect?: (
+    option: MenuOption,
+    arg1: React.SyntheticEvent<HTMLElement> | null | undefined,
+  ) => unknown;
+  onSearch?: (evt: React.SyntheticEvent<HTMLInputElement>) => unknown;
+  onMenuOpen?: () => unknown;
+  onMenuClose?: () => unknown;
+  typeaheadInputText?: string;
+  menu?: MenuProps;
+  onClear?: () => void;
+  isLoading?: boolean;
+  menuOpenOffset?: number;
+  clickAwayRef?: ClickAwayRefType;
+};
+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,
+      ...inputProps
+    }: BaseTypeaheadProps,
+    ref,
+  ): React.ReactNode => {
+    const menuOptions = menu?.options;
+    const {x, y, refs, strategy} = useFloating({
+      open: true,
+      strategy: 'absolute',
+      placement: 'bottom-start',
+      whileElementsMounted: autoUpdate,
+      middleware: [flip(), offset(parseInt(spaceXXSmall))],
+    });
+
+    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)}
+            ref={boundaryRef}
+          >
+            <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 && (
+                <div
+                  ref={refs.setFloating}
+                  style={{
+                    position: strategy,
+                    top: y ?? spaceNone,
+                    left: x ?? spaceNone,
+                    width: sizeFluid,
+                  }}
+                >
+                  <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>
+              )}
+          </div>
+        )}
+      </ClickAway>
+    );
+  },
+);
+const StatefulTypeahead: React$AbstractComponent<
+  BaseTypeaheadProps,
+  HTMLInputElement
+> = React.forwardRef<BaseTypeaheadProps, HTMLInputElement>(
+  ({menu, ...props}: BaseTypeaheadProps, ref): React.ReactNode => {
+    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.ReactNode => (
+    <BaseTypeahead {...props} ref={ref} />
+  ),
+);
+export const Typeahead: React$AbstractComponent<
+  TypeaheadProps,
+  HTMLInputElement
+> = React.forwardRef<TypeaheadProps, HTMLInputElement>(
+  (
+    {allowInternalFilter = true, ...props}: TypeaheadProps,
+    ref,
+  ): React.ReactNode => {
+    if (allowInternalFilter) {
+      return <StatefulTypeahead {...props} ref={ref} />;
+    } else {
+      return <StatelessTypeahead {...props} ref={ref} />;
+    }
+  },
+);

package/lib/components/Typeahead/index.d.ts

@@ -0,0 +1,2 @@
+export * from './SimpleTypeahead';
+export * from './Typeahead';

package/lib/components/WeekdayPicker/WeekdayPicker.d.ts

@@ -0,0 +1,242 @@
+import {$ReadOnly, $Values} from 'utility-types';
+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>,
+    arg1: React.SyntheticEvent<HTMLElement> | null | undefined,
+  ) => unknown;
+  readOnly?: boolean;
+  classNames?: ClassNames;
+  showWeekends?: boolean;
+  ariaLabel?: string;
+  label?: React.ReactNode;
+  helperText?: React.ReactNode;
+  disableMultiSelect?: boolean;
+};
+type DayButtonProps = {
+  day: Weekday;
+  isSelected: boolean;
+  isDisabled: boolean;
+  onClick?:
+    | ((arg0: React.SyntheticEvent<HTMLElement>) => unknown)
+    | null
+    | undefined;
+  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: React.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.d.ts

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

package/lib/components/index.d.ts

@@ -0,0 +1,71 @@
+export * from './Avatar';
+export * from './AvatarGroup';
+export * from './Badge';
+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 './FocusManager';
+export * from './FocusManagerWithArrowKeyNavigation';
+export * from './FormTitleWrapper';
+export * from './Grid';
+export * from './Icon';
+export * from './InContextAlert';
+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.d.ts

@@ -0,0 +1,12 @@
+export * from './useArbitraryOptionAddition';
+export * from './useCopyToClipboard';
+export * from './useFileUpload';
+export * from './useFilteredOptions';
+export * from './useInputState';
+export * from './useLockedBody';
+export * from './useModal';
+export * from './useMountTransition';
+export * from './usePagination';
+export * from './useToastPortal';
+export * from './useToggle';
+export * from './useWindowSize';

package/lib/hooks/useArbitraryOptionAddition/index.d.ts

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

package/lib/hooks/useArbitraryOptionAddition/useArbitraryOptionAddition.d.ts

@@ -0,0 +1,124 @@
+import type {GroupTitleOption} from '../useFilteredOptions';
+import {useFilteredOptions} from '../useFilteredOptions';
+export type ArbitraryOption = {
+  key: string;
+  label: string;
+  arbitrary?: boolean;
+  multiArbitrary?: boolean;
+};
+export function useArbitraryOptionAddition<V>({
+  searchTerm,
+  options = [],
+  excludedKeys = [],
+  allowArbitraryValues = true,
+  allowMultiArbitraryValues = false,
+  validateArbitraryValue = (value: string): boolean => value.trim() !== '',
+  // $FlowFixMe[incompatible-return] - Object literal is compatible with V due to type constraint
+  makeArbitraryValue = (searchTerm): V => ({
+    key: searchTerm,
+    label: searchTerm,
+    arbitrary: true,
+  }),
+  // $FlowFixMe[incompatible-return] - Object literal is compatible with V due to type constraint
+  makeMultiArbitraryValue = (searchTerm): V => {
+    const regex = /^(?=.*[,\n]).+$/s;
+
+    if (regex.test(searchTerm)) {
+      // $FlowFixMe - Object literal is compatible with V due to type constraint
+      return {
+        key: searchTerm,
+        label: searchTerm,
+        multiArbitrary: true,
+      };
+    }
+  },
+  groupTitleOptions = [],
+  arbitraryGroup = {
+    groupTitle: '',
+    showLineDivider: false,
+    options: [],
+  },
+  searchOptionsBy = (option: V, searchTerm: string): boolean => {
+    // $FlowFixMe
+    const {
+      label,
+      key,
+    }: {
+      label: string;
+      key: string;
+    } = option;
+    return (
+      key.toLowerCase().includes(searchTerm) ||
+      label.toLowerCase().includes(searchTerm)
+    );
+  },
+}: {
+  searchTerm: string;
+  options?: V[];
+  excludedKeys?: string[];
+  allowArbitraryValues?: boolean;
+  allowMultiArbitraryValues?: boolean;
+  validateArbitraryValue?: (arg0: string) => boolean;
+  makeArbitraryValue?: (arg0: string) => V;
+  makeMultiArbitraryValue?: (arg0: string) => V;
+  groupTitleOptions?: GroupTitleOption<V>[];
+  arbitraryGroup?: GroupTitleOption<V>;
+  searchOptionsBy?: (option: V, searchTerm: string) => boolean;
+}): {
+  optionsWithArbitrary: Array<V>;
+  groupTitleOptionsWithArbitrary: Array<GroupTitleOption<V>>;
+} {
+  const trimmedSearchTerm = (searchTerm || '').trim().toLowerCase();
+  const {filteredOptions, filteredGroupTitleOptions} = useFilteredOptions({
+    searchTerm: trimmedSearchTerm,
+    options,
+    // $FlowFixMe[incompatible-call]
+    groupTitleOptions,
+    searchOptionsBy,
+  });
+  // Find if an arbitrary option should be added
+  const arbitraryOption =
+    allowArbitraryValues &&
+    trimmedSearchTerm && // $FlowFixMe - Array methods are valid here
+    !filteredOptions.some((option) => option.key === trimmedSearchTerm) && // $FlowFixMe - Array methods are valid here
+    !filteredGroupTitleOptions.some(
+      (group) =>
+        Array.isArray(group.options) && // $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
+  const multiArbitraryOption =
+    allowMultiArbitraryValues &&
+    trimmedSearchTerm &&
+    makeMultiArbitraryValue(trimmedSearchTerm);
+  // Compose the results
+  let optionsWithArbitrary = filteredOptions;
+  let groupTitleOptionsWithArbitrary = groupTitleOptions;
+
+  if (arbitraryOption) {
+    // $FlowFixMe[incompatible-type] - Array spread is valid here
+    optionsWithArbitrary = [arbitraryOption, ...optionsWithArbitrary];
+    groupTitleOptionsWithArbitrary = [
+      {...arbitraryGroup, options: [arbitraryOption]},
+      ...groupTitleOptionsWithArbitrary,
+    ];
+  }
+
+  if (multiArbitraryOption) {
+    // $FlowFixMe[incompatible-type] - Array spread is valid here
+    optionsWithArbitrary = [multiArbitraryOption, ...optionsWithArbitrary];
+    groupTitleOptionsWithArbitrary = [
+      {...arbitraryGroup, options: [multiArbitraryOption]},
+      ...groupTitleOptionsWithArbitrary,
+    ];
+  }
+
+  // $FlowFixMe[incompatible-return]
+  return {
+    optionsWithArbitrary,
+    groupTitleOptionsWithArbitrary,
+  };
+}

package/lib/hooks/useCopyToClipboard/index.d.ts

@@ -0,0 +1 @@
+export * from './useCopyToClipboard';