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

package/lib/components/Notification/Notification.js.flow

@@ -0,0 +1,149 @@
+// @flow strict
+
+import * as React from 'react';
+
+import {TEXT_COLORS} from '../../types/typography';
+import {classify} from '../../utils/classify';
+import type {IconType} from '../Icon';
+import {Icon} from '../Icon';
+import {SubTitleSmall} from '../Text';
+
+import css from './Notification.module.css';
+
+
+export const NOTIFICATION_SEMANTIC = Object.freeze({
+  success: 'success',
+  information: 'information',
+  danger: 'danger',
+});
+
+type ClassNames = $ReadOnly<{wrapper?: string, text?: string}>;
+
+export type NotificationSemanticType = $Values<typeof NOTIFICATION_SEMANTIC>;
+
+type BaseNotificationProps = {
+  classNames?: ClassNames,
+  semantic: NotificationSemanticType,
+  iconLeftName?: string,
+  iconLeftType?: IconType,
+  dismissable?: boolean,
+  children?: string,
+  onCloseClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
+};
+
+type NotificationBaseProps = {
+  ...BaseNotificationProps,
+  classNames?: ClassNames,
+  ...
+    | {
+        dismissable: true,
+        onCloseClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
+        selfDismiss?: boolean,
+      }
+    | {dismissable?: false},
+};
+
+export type NotificationProps = {
+  ...NotificationBaseProps,
+  semantic: NotificationSemanticType,
+};
+
+// Base Notification will not have any state.
+
+const BaseNotification: React$AbstractComponent<
+  BaseNotificationProps,
+  HTMLDivElement,
+> = React.forwardRef<BaseNotificationProps, HTMLDivElement>(
+  (props: BaseNotificationProps, ref): React.Node => {
+    const {
+      classNames,
+      semantic = NOTIFICATION_SEMANTIC.success,
+      iconLeftName,
+      iconLeftType = 'regular',
+      dismissable,
+      children,
+      onCloseClick,
+    } = props;
+    return (
+      <div
+        className={classify(
+          css.baseContainer,
+          {
+            [css.success]: semantic === NOTIFICATION_SEMANTIC.success,
+            [css.information]: semantic === NOTIFICATION_SEMANTIC.information,
+            [css.danger]: semantic === NOTIFICATION_SEMANTIC.danger,
+            [css.dismissable]: dismissable,
+          },
+          classNames?.wrapper,
+        )}
+        ref={ref}
+      >
+        {iconLeftName ? (
+          <Icon
+            name={iconLeftName}
+            color={TEXT_COLORS.inversePrimary}
+            size="small"
+            type={iconLeftType}
+          />
+        ) : null}
+        <SubTitleSmall
+          className={classify(classNames?.text)}
+          color={TEXT_COLORS.inversePrimary}
+        >
+          {children}
+        </SubTitleSmall>
+        {dismissable && (
+          <Icon
+            color={TEXT_COLORS.inversePrimary}
+            name="close"
+            size="small"
+            type="regular"
+            onClick={onCloseClick}
+            className={css.closeIcon}
+          />
+        )}
+      </div>
+    );
+  },
+);
+
+export const Notification: React$AbstractComponent<
+  NotificationProps,
+  HTMLDivElement,
+> = React.forwardRef<NotificationProps, HTMLDivElement>(
+  (props: NotificationProps, ref): React.Node => {
+    const {
+      classNames,
+      semantic = NOTIFICATION_SEMANTIC.success,
+      iconLeftName,
+      iconLeftType,
+      dismissable,
+      children,
+      selfDismiss = false,
+      onCloseClick,
+    } = props;
+    const [dismissed, setDismissed] = React.useState(false);
+    const closeClickHandler = (e) => {
+      onCloseClick && onCloseClick(e);
+      selfDismiss && setDismissed(true);
+    };
+
+    return (
+      <>
+        {!dismissed && (
+          <BaseNotification
+            classNames={classNames}
+            iconLeftName={iconLeftName}
+            iconLeftType={iconLeftType}
+            semantic={semantic}
+            dismissable={dismissable}
+            onCloseClick={closeClickHandler}
+            ref={ref}
+          >
+            {children}
+          </BaseNotification>
+        )}
+      </>
+    );
+  },
+);

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

@@ -0,0 +1,3 @@
+// @flow strict
+
+export {Notification, NOTIFICATION_SEMANTIC} from './Notification';

package/lib/components/OptionButton/OptionButton.js.flow

@@ -0,0 +1,153 @@
+// @flow strict
+
+import * as React from 'react';
+
+import classify from '../../utils/classify';
+import type {ClickAwayRefType} from '../../utils/click-away';
+import type {ButtonProps} from '../Button';
+import {Button} from '../Button';
+import type {AnchorType} from '../ButtonDropdown';
+import {ButtonDropdown} from '../ButtonDropdown';
+import {ConditionalWrapper} from '../ConditionalWrapper';
+import type {MenuOption, MenuProps} from '../Menu';
+import type {BaseTooltipProps} from '../Tooltip';
+import {Tooltip} from '../Tooltip';
+
+import css from './OptionButton.module.css';
+
+
+type ClassNames = $ReadOnly<{
+  wrapper?: string,
+  baseButtonWrapper?: string,
+  baseButtonIcon?: string,
+  optionsButtonWrapper?: string,
+  optionsButtonIcon?: string,
+  dropdownContainer?: string,
+}>;
+
+export type OptionButtonTooltipProps = {
+  baseButton?: BaseTooltipProps,
+  optionsButton?: BaseTooltipProps,
+};
+
+export type OptionButtonProps = {
+  ...ButtonProps,
+  menu?: MenuProps,
+  anchorPosition?: AnchorType,
+  onOptionSelect?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
+  onButtonClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
+  onMenuOpen?: () => mixed,
+  onMenuClose?: () => mixed,
+  tooltip?: OptionButtonTooltipProps,
+  classNames?: ClassNames,
+  clickAwayRef?: ClickAwayRefType,
+  ...
+};
+
+export const OptionButton: React$AbstractComponent<
+  OptionButtonProps,
+  HTMLDivElement,
+> = React.forwardRef<OptionButtonProps, HTMLDivElement>(
+  (
+    {
+      children,
+      iconLeftName,
+      iconLeftType,
+      type,
+      isFluid,
+      disabled,
+      size,
+      isLoading,
+      menu,
+      anchorPosition,
+      onOptionSelect,
+      onButtonClick,
+      onMenuOpen,
+      onMenuClose,
+      ariaLabel,
+      actionType,
+      tooltip,
+      classNames,
+      clickAwayRef,
+    }: OptionButtonProps,
+    ref,
+  ): React.Node => {
+    const [iconName, setIconName] = React.useState('chevron-down');
+    const [isMenuOpen, setIsMenuOpen] = React.useState(false);
+
+    return (
+      <div
+        className={classify(
+          css.container,
+          {[css.isFluid]: isFluid},
+          classNames?.wrapper,
+        )}
+        ref={ref}
+      >
+        <ConditionalWrapper
+          condition={Boolean(tooltip?.baseButton)}
+          wrapper={(children) => (
+            <Tooltip
+              {...tooltip?.baseButton}
+              hidden={isMenuOpen ? true : tooltip?.optionsButton?.hidden}
+            >
+              {children}
+            </Tooltip>
+          )}
+        >
+          <Button
+            iconLeftName={iconLeftName}
+            iconLeftType={iconLeftType}
+            onClick={onButtonClick}
+            size={size}
+            type={type}
+            disabled={disabled}
+            isFluid={isFluid}
+            ariaLabel={ariaLabel}
+            actionType={actionType}
+            isLoading={isLoading}
+            classNames={{
+              wrapper: classify(css.leftButton, classNames?.baseButtonWrapper),
+              icon: classNames?.baseButtonIcon,
+            }}
+          >
+            {children}
+          </Button>
+        </ConditionalWrapper>
+        <ButtonDropdown
+          anchorPosition={anchorPosition}
+          ariaLabel={ariaLabel}
+          iconLeftName={iconName}
+          tooltip={tooltip?.optionsButton}
+          classNames={{
+            buttonWrapper: classify(
+              css.rightButton,
+              classNames?.optionsButtonWrapper,
+            ),
+            dropdownContainer: classify(
+              css.dropDownContainer,
+              classNames?.dropdownContainer,
+            ),
+            buttonIcon: classNames?.optionsButtonIcon,
+          }}
+          type={type}
+          disabled={disabled}
+          menu={menu}
+          onMenuClose={() => {
+            setIconName('chevron-down');
+            setIsMenuOpen(false);
+            onMenuOpen && onMenuOpen();
+          }}
+          onMenuOpen={() => {
+            setIconName('chevron-up');
+            setIsMenuOpen(true);
+            onMenuClose && onMenuClose();
+          }}
+          onOptionSelect={onOptionSelect}
+          size={size}
+          clickAwayRef={clickAwayRef}
+        />
+      </div>
+    );
+  },
+);

package/lib/components/OptionButton/SimpleOptionButton.js

@@ -53,8 +53,6 @@ const SimpleOptionButtonBase = (props, ref) => {
       onOptionSelect?.(selectedOption, e);
     });
   };
-
-  // @ts-ignore - TS2345 - Argument of type '{ current: SimpleOptionButtonRef | null; } | ((arg1: SimpleOptionButtonRef | null) => unknown)' is not assignable to parameter of type 'Ref<SimpleOptionButtonRef> | undefined'.
   React.useImperativeHandle(ref, () => ({
     selectedKeys: optionButtonSelectedKeys
   }));
@@ -86,6 +84,4 @@ const SimpleOptionButtonBase = (props, ref) => {
     }
   }), children);
 };
-
-// @ts-ignore - TS2345 - Argument of type '(props: SimpleOptionButtonProps, ref: { current: null | SimpleOptionButtonRef; } | ((arg1: null | SimpleOptionButtonRef) => unknown)) => React.JSX.Element' is not assignable to parameter of type 'ForwardRefRenderFunction<SimpleOptionButtonProps, SimpleOptionButtonRef>'.
 const SimpleOptionButton = exports.SimpleOptionButton = /*#__PURE__*/React.forwardRef(SimpleOptionButtonBase);

package/lib/components/OptionButton/SimpleOptionButton.js.flow

@@ -0,0 +1,161 @@
+// @flow strict
+
+import * as React from 'react';
+
+import type {MenuClassNames, MenuLabelTooltip} from '../../types/menu';
+import type {ClickAwayRefType} from '../../utils/click-away';
+import {getSelectedKeysFromSelectedOption} from '../../utils/menu';
+import type {ButtonProps} from '../Button';
+import type {AnchorType} from '../ButtonDropdown';
+import type {MenuOption, MenuOptionsVariant, Virtualization} from '../Menu';
+
+import type {OptionButtonTooltipProps} from './OptionButton';
+import {OptionButton} from './OptionButton';
+
+
+type ClassNames = $ReadOnly<{
+  wrapper?: string,
+  baseButtonWrapper?: string,
+  baseButtonIcon?: string,
+  optionsButtonWrapper?: string,
+  optionsButtonIcon?: string,
+  dropdownContainer?: string,
+}>;
+
+export type SimpleOptionButtonRef = {
+  selectedKeys?: Array<string>,
+};
+
+export type SimpleOptionButtonProps = {
+  // Input props
+  ...ButtonProps,
+
+  classNames?: ClassNames,
+  tooltip?: OptionButtonTooltipProps,
+  anchorPosition?: AnchorType,
+  tooltip?: OptionButtonTooltipProps,
+  menuSize?: 'small' | 'medium',
+
+  // Menu props
+  options?: Array<MenuOption>,
+  optionsVariant?: MenuOptionsVariant,
+  allowSearch?: boolean,
+  selectedKeys?: Array<string>,
+  menuVirtualization?: Virtualization,
+  header?: React.Node,
+  footer?: React.Node,
+  menuClassNames?: MenuClassNames,
+  showLabelTooltip?: MenuLabelTooltip,
+  allowWrap?: boolean,
+  // events
+  onOptionSelect?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
+  onButtonClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
+  onMenuOpen?: () => mixed,
+  onMenuClose?: () => mixed,
+
+  // Resolvers
+  resolveLabel?: (option: MenuOption) => string | React.Node,
+  resolveSecondaryLabel?: (option: MenuOption) => string | React.Node,
+  clickAwayRef?: ClickAwayRefType,
+  ...
+};
+
+const SimpleOptionButtonBase = (props: SimpleOptionButtonProps, ref) => {
+  const {
+    size = 'small',
+    classNames,
+    tooltip,
+    anchorPosition,
+    options,
+    optionsVariant,
+    allowSearch,
+    selectedKeys,
+    onOptionSelect,
+    onButtonClick,
+    onMenuOpen,
+    onMenuClose,
+    resolveLabel,
+    resolveSecondaryLabel,
+    children,
+    menuSize = 'small',
+    menuVirtualization,
+    header,
+    footer,
+    menuClassNames,
+    showLabelTooltip,
+    clickAwayRef,
+    allowWrap = false,
+    ...buttonProps
+  } = props;
+
+  const [optionButtonSelectedKeys, setOptionButtonSelectedKeys] =
+    React.useState(selectedKeys);
+
+  React.useEffect(() => {
+    setOptionButtonSelectedKeys(selectedKeys);
+  }, [selectedKeys]);
+
+  const handleOptionChange = (selectedOption: MenuOption, e) => {
+    e?.stopPropagation();
+    let newSelectedKeys = [selectedOption.key];
+
+    if (optionsVariant === 'checkbox') {
+      newSelectedKeys = getSelectedKeysFromSelectedOption(
+        selectedOption,
+        optionButtonSelectedKeys,
+      );
+    } else {
+      newSelectedKeys = [selectedOption.key];
+    }
+
+    setOptionButtonSelectedKeys(newSelectedKeys);
+
+    setTimeout(() => {
+      onOptionSelect?.(selectedOption, e);
+    });
+  };
+
+  React.useImperativeHandle(ref, () => ({
+    selectedKeys: optionButtonSelectedKeys,
+  }));
+
+  return (
+    <OptionButton
+      {...buttonProps}
+      tooltip={tooltip}
+      onButtonClick={onButtonClick}
+      anchorPosition={anchorPosition}
+      classNames={classNames}
+      size={size}
+      onOptionSelect={handleOptionChange}
+      onMenuOpen={onMenuOpen}
+      onMenuClose={onMenuClose}
+      clickAwayRef={clickAwayRef}
+      menu={{
+        isFluid: false,
+        options,
+        selectedKeys: optionButtonSelectedKeys,
+        optionsVariant,
+        allowSearch,
+        resolveLabel,
+        resolveSecondaryLabel,
+        size: menuSize,
+        virtualization: menuVirtualization,
+        header,
+        footer,
+        classNames: menuClassNames,
+        showLabelTooltip,
+        allowWrap,
+      }}
+    >
+      {children}
+    </OptionButton>
+  );
+};
+
+export const SimpleOptionButton: React.AbstractComponent<
+  SimpleOptionButtonProps,
+  SimpleOptionButtonRef,
+> = React.forwardRef<SimpleOptionButtonProps, SimpleOptionButtonRef>(
+  SimpleOptionButtonBase,
+);

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

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

package/lib/components/PageTitle/PageTitle.js

@@ -177,7 +177,6 @@ const PageTitle = exports.PageTitle = /*#__PURE__*/React.forwardRef((_ref4, ref)
     if (childrenArray.length) {
       const nodes = [];
       for (const child of childrenArray) {
-        // @ts-ignore - TS2339 - Property 'type' does not exist on type 'string | number | bigint | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...>'.
         if (child?.type?.displayName === comp) {
           nodes.push(child);
         }
@@ -206,12 +205,8 @@ const PageTitle = exports.PageTitle = /*#__PURE__*/React.forwardRef((_ref4, ref)
     type: "tertiary",
     iconLeftName: "chevron-left",
     ariaLabel: "Navigate Back Button"
-  })), pageNameKey && PAGE_NAME_LIST[pageNameKey] ? /*#__PURE__*/React.createElement(PageName, null, /*#__PURE__*/React.createElement(_Text.TitleMedium, null, PAGE_NAME_LIST[pageNameKey].title, " "), /*#__PURE__*/React.createElement(_Icon.Icon
-  // @ts-ignore - TS7053 - Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'Readonly<{ dashboard: { title: string; iconName: string; iconType: string; }; engage: { title: string; iconName: string; iconType: string; }; journeys: { title: string; iconName: string; iconType: string; }; workflows: { ...; }; ... 18 more ...; broadcast: { ...; }; }>'.
-  , {
-    type: PAGE_NAME_LIST[pageNameKey].iconType
-    // @ts-ignore - TS7053 - Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'Readonly<{ dashboard: { title: string; iconName: string; iconType: string; }; engage: { title: string; iconName: string; iconType: string; }; journeys: { title: string; iconName: string; iconType: string; }; workflows: { ...; }; ... 18 more ...; broadcast: { ...; }; }>'.
-    ,
+  })), pageNameKey && PAGE_NAME_LIST[pageNameKey] ? /*#__PURE__*/React.createElement(PageName, null, /*#__PURE__*/React.createElement(_Text.TitleMedium, null, PAGE_NAME_LIST[pageNameKey].title, " "), /*#__PURE__*/React.createElement(_Icon.Icon, {
+    type: PAGE_NAME_LIST[pageNameKey].iconType,
     name: PAGE_NAME_LIST[pageNameKey].iconName,
     size: "medium",
     color: _Text.TEXT_COLORS.primary,