@spaced-out/ui-design-system 0.4.15 → 0.5.1

package/lib/components/Dialog/Dialog.js.flow

@@ -1,228 +0,0 @@
-// @flow strict
-
-import * as React from 'react';
-
-import {TEXT_COLORS} from '../../types/typography';
-import classify from '../../utils/classify';
-import {Button} from '../Button';
-import {Icon} from '../Icon';
-import type {ModalProps} from '../Modal';
-import {Modal} from '../Modal';
-
-import css from './Dialog.module.css';
-
-
-type FooterClassNames = $ReadOnly<{
-  wrapper?: string,
-  actions?: string,
-}>;
-
-export const DIALOG_SEMANTIC = Object.freeze({
-  neutral: 'neutral',
-  success: 'success',
-  information: 'information',
-  warning: 'warning',
-  danger: 'danger',
-});
-
-export type DialogSemanticType = $Values<typeof DIALOG_SEMANTIC>;
-
-export type DialogHeaderProps = {
-  children?: React.Node,
-  className?: string,
-};
-
-export type DialogFooterProps = {
-  children?: React.Node,
-  classNames?: FooterClassNames,
-};
-
-export type DialogBodyProps = {
-  children?: React.Node,
-  className?: string,
-};
-
-export type DialogPropsBase = {
-  ...ModalProps,
-};
-
-export type DialogProps = {
-  ...DialogPropsBase,
-  semantic?: DialogSemanticType,
-  iconName?: string,
-};
-
-export type BasicDialogProps = {
-  ...DialogProps,
-  heading?: React.Node,
-  body?: React.Node,
-  confirmText?: string,
-  abortText?: string,
-  handleConfirm?: (event: SyntheticEvent<>) => mixed,
-  handleAbort?: (event: SyntheticEvent<>) => mixed,
-};
-
-const DialogIcon = ({
-  semantic,
-  iconName,
-}: {
-  semantic: DialogSemanticType,
-  iconName: string,
-}) => {
-  switch (semantic) {
-  case DIALOG_SEMANTIC.neutral:
-    return (
-      <Icon
-        color={TEXT_COLORS.neutral}
-        name={iconName ? iconName : 'face-smile'}
-        type="solid"
-      />
-    );
-  case DIALOG_SEMANTIC.success:
-    return (
-      <Icon
-        name={iconName ? iconName : 'circle-check'}
-        color={TEXT_COLORS.success}
-        type="solid"
-      />
-    );
-
-  case DIALOG_SEMANTIC.information:
-    return (
-      <Icon
-        name={iconName ? iconName : 'circle-info'}
-        color={TEXT_COLORS.information}
-        type="solid"
-      />
-    );
-
-  case DIALOG_SEMANTIC.warning:
-    return (
-      <Icon
-        name={iconName ? iconName : 'circle-exclamation'}
-        color={TEXT_COLORS.warning}
-        type="solid"
-      />
-    );
-
-  case DIALOG_SEMANTIC.danger:
-    return (
-      <Icon
-        name={iconName ? iconName : 'shield-exclamation'}
-        color={TEXT_COLORS.danger}
-        type="solid"
-      />
-    );
-
-  default:
-    return (
-      <Icon
-        color={TEXT_COLORS.neutral}
-        name={iconName ? iconName : 'face-smile'}
-        type="solid"
-      />
-    );
-  }
-};
-
-export const DialogHeader = ({
-  children,
-  className,
-}: DialogHeaderProps): React.Node => (
-  <>
-    {React.Children.count(children) > 0 && (
-      <div className={classify(css.dialogHeader, className)}>
-        <div className={css.headerContent}>{children}</div>
-      </div>
-    )}
-  </>
-);
-
-export const DialogBody = ({
-  children,
-  className,
-}: DialogBodyProps): React.Node => (
-  <div className={classify(css.dialogBody, className)}>{children}</div>
-);
-
-export const DialogFooter = ({
-  children,
-  classNames,
-}: DialogFooterProps): React.Node => (
-  <>
-    {React.Children.count(children) > 0 && (
-      <div className={classify(css.dialogFooter, classNames?.wrapper)}>
-        <div className={classify(css.dialogFooterActions, classNames?.actions)}>
-          {children}
-        </div>
-      </div>
-    )}
-  </>
-);
-
-export const Dialog = ({
-  children,
-  isOpen = false,
-  hideBackdrop = false,
-  onClose,
-  tapOutsideToClose = false,
-  iconName = '',
-  semantic = 'neutral',
-  classNames,
-  ...restDialogProps
-}: DialogProps): React.Node => (
-  <Modal
-    isOpen={isOpen}
-    onClose={onClose}
-    hideBackdrop={hideBackdrop}
-    tapOutsideToClose={tapOutsideToClose}
-    {...restDialogProps}
-    classNames={{
-      content: classify(css.dialog, classNames?.content),
-      container: classify(classNames?.container),
-      backdrop: classify(classNames?.backdrop),
-    }}
-  >
-    <div className={css.topBlock}>
-      <div
-        className={classify(css.iconContainer, {
-          [css.neutral]: semantic === DIALOG_SEMANTIC.neutral,
-          [css.success]: semantic === DIALOG_SEMANTIC.success,
-          [css.information]: semantic === DIALOG_SEMANTIC.information,
-          [css.warning]: semantic === DIALOG_SEMANTIC.warning,
-          [css.danger]: semantic === DIALOG_SEMANTIC.danger,
-        })}
-      >
-        <DialogIcon semantic={semantic} iconName={iconName} />
-      </div>
-    </div>
-    {children}
-  </Modal>
-);
-
-export const BasicDialog = ({
-  heading,
-  body,
-  confirmText,
-  abortText,
-  handleConfirm,
-  handleAbort,
-  ...restDialogProps
-}: BasicDialogProps): React.Node => (
-  <Dialog {...restDialogProps}>
-    {!!heading && <DialogHeader>{heading}</DialogHeader>}
-    {!!body && <DialogBody>{body}</DialogBody>}
-    <DialogFooter>
-      {!!abortText && (
-        <Button isFluid type="tertiary" onClick={handleAbort}>
-          {abortText}
-        </Button>
-      )}
-      {!!confirmText && (
-        <Button isFluid onClick={handleConfirm}>
-          {confirmText}
-        </Button>
-      )}
-    </DialogFooter>
-  </Dialog>
-);

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

@@ -1,2 +0,0 @@
-//@flow strict
-export * from './Dialog';

package/lib/components/Disclaimer/Disclaimer.js.flow

@@ -1,41 +0,0 @@
-// @flow strict
-
-import * as React from 'react';
-
-import type {BannerProps} from '../Banner';
-import {Banner} from '../Banner';
-import {ICON_TYPE} from '../Icon';
-
-import css from './Disclaimer.module.css';
-
-
-export type DisclaimerProps = {
-  ...BannerProps,
-};
-
-export const Disclaimer: React$AbstractComponent<
-  DisclaimerProps,
-  HTMLDivElement,
-> = React.forwardRef<DisclaimerProps, HTMLDivElement>(
-  (
-    {
-      classNames,
-      leftIconName = 'info-circle',
-      leftIconType = ICON_TYPE.regular,
-      ...restProps
-    }: DisclaimerProps,
-    ref,
-  ) => (
-    <Banner
-      ref={ref}
-      {...restProps}
-      leftIconName={leftIconName}
-      leftIconType={leftIconType}
-      classNames={{
-        ...classNames,
-        wrapper: css.disclaimerWrapper,
-        icon: css.iconWrapper,
-      }}
-    ></Banner>
-  ),
-);

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

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

package/lib/components/Dropdown/Dropdown.js.flow

@@ -1,176 +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 {ClickAway, type ClickAwayRefType} from '../../utils/click-away';
-import {mergeRefs} from '../../utils/merge-refs';
-import type {InputProps} from '../Input';
-import {Input} from '../Input';
-import type {MenuOption, MenuProps} from '../Menu';
-import {Menu} from '../Menu';
-import {type ElevationType, getElevationValue} from '../Tooltip';
-
-import css from './Dropdown.module.css';
-
-
-type ClassNames = $ReadOnly<{
-  wrapper?: string,
-  box?: string,
-  iconRight?: string,
-}>;
-
-export type DropdownProps = {
-  ...InputProps,
-  classNames?: ClassNames,
-  onChange?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
-  onMenuOpen?: () => mixed,
-  onMenuClose?: () => mixed,
-  scrollMenuToBottom?: boolean,
-  dropdownInputText?: string,
-  menu?: MenuProps,
-  elevation?: ElevationType,
-  clickAwayRef?: ClickAwayRefType,
-  ...
-};
-
-export const Dropdown: React$AbstractComponent<
-  DropdownProps,
-  HTMLInputElement,
-> = React.forwardRef<DropdownProps, HTMLInputElement>(
-  (
-    {
-      size = 'medium',
-      classNames,
-      placeholder = 'Select...',
-      onChange,
-      menu,
-      onMenuOpen,
-      onMenuClose,
-      scrollMenuToBottom = false,
-      dropdownInputText = '',
-      clickAwayRef,
-      elevation = 'modal',
-      ...inputProps
-    }: DropdownProps,
-    ref,
-  ): React.Node => {
-    const menuRef = React.useRef();
-
-    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();
-      if (scrollMenuToBottom && menuRef.current && isOpen) {
-        menuRef.current.scrollTop = isOpen ? menuRef.current.scrollHeight : 0;
-      }
-    };
-
-    return (
-      <ClickAway onChange={onMenuToggle} clickAwayRef={clickAwayRef}>
-        {({isOpen, onOpen, clickAway, boundaryRef, triggerRef}) => (
-          <div
-            className={classify(css.dropdownContainer, classNames?.wrapper)}
-            data-testid="Dropdown"
-          >
-            <Input
-              {...inputProps}
-              onKeyDown={(e) => {
-                if (e.keyCode === 32) {
-                  e.preventDefault();
-                  isOpen ? clickAway() : onOpen();
-                }
-              }}
-              boxRef={mergeRefs([refs.setReference, triggerRef])}
-              size={size}
-              placeholder={placeholder}
-              value={dropdownInputText}
-              classNames={{
-                box: classify(css.inputBox, classNames?.box),
-                iconRight: classNames?.iconRight,
-              }}
-              iconRightName={isOpen ? 'angle-up' : 'angle-down'}
-              readOnly
-              onContainerClick={(e) => {
-                e.stopPropagation();
-                onOpen();
-              }}
-              ref={ref}
-            />
-
-            {isOpen && menu && (
-              <FloatingPortal>
-                <FloatingFocusManager
-                  modal={false}
-                  context={context}
-                  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}
-                      onSelect={(option, e) => {
-                        onChange && onChange(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();
-                          refs.reference.current.querySelector('input').focus();
-                        }
-                      }}
-                      size={menu.size || size}
-                      onTabOut={clickAway}
-                      ref={menuRef}
-                    />
-                  </div>
-                </FloatingFocusManager>
-              </FloatingPortal>
-            )}
-          </div>
-        )}
-      </ClickAway>
-    );
-  },
-);

package/lib/components/Dropdown/SimpleDropdown.js.flow

@@ -1,170 +0,0 @@
-// @flow strict
-
-import * as React from 'react';
-
-import type {MenuClassNames, MenuLabelTooltip} from '../../types/menu';
-import type {ClickAwayRefType} from '../../utils/click-away';
-import {
-  getSelectedKeysFromSelectedOption,
-  getTextLabelFromSelectedKeys,
-} from '../../utils/menu';
-import type {InputProps} from '../Input';
-import type {MenuOption, MenuOptionsVariant, Virtualization} from '../Menu';
-import type {ElevationType} from '../Tooltip';
-
-import {Dropdown} from './Dropdown';
-
-
-type ClassNames = $ReadOnly<{
-  wrapper?: string,
-  box?: string,
-}>;
-
-export type SimpleDropdownRef = {
-  selectedKeys?: Array<string>,
-};
-
-export type SimpleDropdownProps = {
-  // Input props
-  ...InputProps,
-
-  elevation?: ElevationType,
-  classNames?: ClassNames,
-  clickAwayRef?: ClickAwayRefType,
-
-  // Menu props
-  options?: Array<MenuOption>,
-  optionsVariant?: MenuOptionsVariant,
-  allowSearch?: boolean,
-  selectedKeys?: Array<string>,
-  isMenuFluid?: boolean,
-  menuVirtualization?: Virtualization,
-  header?: React.Node,
-  footer?: React.Node,
-  menuClassNames?: MenuClassNames,
-  showLabelTooltip?: MenuLabelTooltip,
-  allowWrap?: boolean,
-  staticLabels?: {
-    RESULT?: string,
-    RESULTS?: string,
-    SEARCH_PLACEHOLDER?: string,
-  },
-
-  // events
-  onChange?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
-  onMenuOpen?: () => mixed,
-  onMenuClose?: () => mixed,
-
-  // Resolvers
-  resolveLabel?: (option: MenuOption) => string | React.Node,
-  resolveSecondaryLabel?: (option: MenuOption) => string | React.Node,
-  ...
-};
-
-const SimpleDropdownBase = (props: SimpleDropdownProps, ref) => {
-  const {
-    size = 'medium',
-    classNames,
-    placeholder = 'Select...',
-    options,
-    optionsVariant,
-    allowSearch,
-    selectedKeys,
-    onChange,
-    onMenuOpen,
-    onMenuClose,
-    resolveLabel,
-    elevation = 'modal',
-    menuVirtualization,
-    resolveSecondaryLabel,
-    isMenuFluid = true,
-    header,
-    footer,
-    menuClassNames,
-    showLabelTooltip,
-    clickAwayRef,
-    allowWrap = false,
-    staticLabels,
-    ...inputProps
-  } = props;
-
-  const [dropdownInputText, setDropdownInputText] = React.useState('');
-  const [dropdownSelectedKeys, setDropdownSelectedKeys] =
-    React.useState(selectedKeys);
-
-  React.useEffect(() => {
-    const newDropdownText = getTextLabelFromSelectedKeys(selectedKeys, options);
-
-    setDropdownSelectedKeys(selectedKeys);
-    setDropdownInputText(newDropdownText);
-  }, [selectedKeys]);
-
-  const handleOptionChange = (selectedOption: MenuOption, e) => {
-    e?.stopPropagation();
-    let newSelectedKeys = [];
-
-    if (optionsVariant === 'checkbox') {
-      newSelectedKeys = getSelectedKeysFromSelectedOption(
-        selectedOption,
-        dropdownSelectedKeys,
-      );
-    } else {
-      newSelectedKeys = [selectedOption.key];
-    }
-
-    const newDropdownText = getTextLabelFromSelectedKeys(
-      newSelectedKeys,
-      options,
-    );
-
-    setDropdownSelectedKeys(newSelectedKeys);
-    setDropdownInputText(newDropdownText);
-
-    setTimeout(() => {
-      onChange?.(selectedOption, e);
-    });
-  };
-
-  React.useImperativeHandle(ref, () => ({
-    selectedKeys: dropdownSelectedKeys,
-  }));
-
-  return (
-    <Dropdown
-      {...inputProps}
-      classNames={classNames}
-      size={size}
-      elevation={elevation}
-      placeholder={placeholder}
-      onChange={handleOptionChange}
-      onMenuOpen={onMenuOpen}
-      onMenuClose={onMenuClose}
-      dropdownInputText={dropdownInputText}
-      clickAwayRef={clickAwayRef}
-      menu={{
-        options,
-        selectedKeys: dropdownSelectedKeys,
-        optionsVariant,
-        allowSearch,
-        resolveLabel,
-        resolveSecondaryLabel,
-        virtualization: menuVirtualization,
-        size,
-        isFluid: isMenuFluid,
-        header,
-        footer,
-        classNames: menuClassNames,
-        showLabelTooltip,
-        allowWrap,
-        staticLabels,
-      }}
-    />
-  );
-};
-
-export const SimpleDropdown: React.AbstractComponent<
-  SimpleDropdownProps,
-  SimpleDropdownRef,
-> = React.forwardRef<SimpleDropdownProps, SimpleDropdownRef>(
-  SimpleDropdownBase,
-);

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

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