@spaced-out/ui-design-system 0.3.44 → 0.3.46

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

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

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

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

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

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

package/lib/components/index.d.ts

@@ -1,74 +0,0 @@
-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 './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 './SemanticAIIcon';
-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

@@ -1,15 +0,0 @@
-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 './useResizeObserver';
-export * from './useToastPortal';
-export * from './useToggle';
-export * from './useWindowSize';

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

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

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

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

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