@ssa-ui-kit/core 0.0.1-alpha

package/src/components/MultipleDropdown/MultipleDropdown.tsx

@@ -0,0 +1,217 @@
+import React, { useState, useEffect, useId, useRef } from 'react';
+import { useTheme } from '@emotion/react';
+import { useClickOutside } from '@ssa-ui-kit/hooks';
+import { mapObjIndexed } from '@ssa-ui-kit/utils';
+import { useMergeRefs } from '@floating-ui/react';
+
+import DropdownBase from '@components/DropdownBase';
+import DropdownToggle from '@components/DropdownToggle';
+import DropdownArrow from '@components/DropdownArrow';
+import MultipleDropdownOptions from '@components/MultipleDropdownOptions';
+import MultipleDropdownContext from '@components/MultipleDropdown/MultipleDropdown.context';
+import { IDropdownOption } from '@components/DropdownOptions/types';
+
+import { DropdownContextType, IDropdownProps } from './types';
+import { getActiveItems } from '@components/MultipleDropdown/utils';
+import MultipleDropdownNotification from '@components/MultipleDropdownNotification';
+import styled from '@emotion/styled';
+
+const DropdownPlaceholderLabel = styled.div`
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+/**
+ * The structure of the component:
+ *
+ * MultipleDropdown
+ *   DropdownToggle
+ *   MultipleDropdownOptions
+ *     DropdownOption
+ *
+ * Aria attributes are set according to
+ * https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-select-only.html
+ **/
+function MultipleDropdownInner<T extends IDropdownOption>(
+  {
+    selectedItems = [],
+    isDisabled,
+    isOpen: isInitOpen,
+    isMultiple = true,
+    placeholder = 'Select something',
+    showPlaceholder = true,
+    label,
+    children,
+    onChange: handleChange,
+    className,
+  }: IDropdownProps<T>,
+  ref?: React.ForwardedRef<HTMLDivElement | null>,
+) {
+  const theme = useTheme();
+  const dropdownBaseRef: React.MutableRefObject<HTMLDivElement | null> =
+    useRef<HTMLDivElement>(null);
+  const dropdownId = useId();
+  const [isFocused, setIsFocused] = useState(false);
+  const [isOpen, setIsOpen] = useState(isInitOpen || false);
+  const [colors, setColors] = useState<Array<string | undefined>>([]);
+  const [optionsWithKey, setOptionsWithKey] = useState<
+    Record<number | string, T>
+  >({});
+  const [items, setItems] = useState<Array<React.ReactElement>>([]);
+  const [values, setValues] = useState<Array<unknown>>([]);
+  const [valuesWithoutPlaceholder, setValuesWithoutPlaceholder] = useState<
+    Array<unknown>
+  >([]);
+
+  const memoSelectedItems = React.useMemo(
+    () => selectedItems,
+    [JSON.stringify(selectedItems)],
+  );
+
+  const onChange = (item: IDropdownOption) => {
+    if (isDisabled || !item) {
+      return;
+    }
+    if (!isMultiple && optionsWithKey[item.value].isSelected) {
+      return;
+    }
+    let newOptionsWithKey = {};
+    let isSelected = true;
+    if (isMultiple) {
+      isSelected = !optionsWithKey[item.value].isSelected;
+      newOptionsWithKey = {
+        ...optionsWithKey,
+        [item.value]: {
+          ...optionsWithKey[item.value],
+          isSelected,
+        },
+      };
+      setOptionsWithKey(newOptionsWithKey);
+    } else {
+      newOptionsWithKey = mapObjIndexed(
+        (option) => ({
+          ...option,
+          isSelected: option.value === item.value,
+        }),
+        optionsWithKey,
+      );
+      setOptionsWithKey(newOptionsWithKey);
+      setIsOpen(false);
+    }
+
+    handleChange && handleChange(item.value, isSelected);
+  };
+
+  useClickOutside(dropdownBaseRef, () => isOpen && setIsOpen(false));
+
+  useEffect(() => {
+    if (isDisabled) {
+      setColors([theme.colors.greyDarker60, theme.colors.grey20]);
+    } else if (isOpen) {
+      setColors([theme.colors.white, theme.colors.white60]);
+    } else if (isFocused) {
+      setColors([theme.colors.greyDarker, theme.colors.greyDarker60]);
+    }
+  }, [isOpen, isDisabled, isFocused]);
+
+  useEffect(() => {
+    if (isDisabled && isOpen) {
+      setIsOpen(false);
+    }
+  }, [isDisabled]);
+
+  useEffect(() => {
+    const childrenArray = React.Children.toArray(children).filter(Boolean);
+    const newOptions: T[] = [];
+    const keyedOptions: Record<number | string, T> = {};
+    const childItems: Array<React.ReactElement> = (
+      childrenArray as React.ReactElement[]
+    ).map((child, index) => {
+      const newOption = {
+        ...child.props,
+        isSelected: !!memoSelectedItems.find(
+          (selectedItem) => selectedItem.value === child.props.value,
+        ),
+      };
+      newOptions.push(newOption);
+      keyedOptions[newOption.value] = newOption;
+
+      return React.cloneElement(child, {
+        index,
+        onClick: onChange.bind(null),
+        ...child.props,
+      });
+    });
+
+    setOptionsWithKey(keyedOptions);
+    setItems(childItems);
+  }, [memoSelectedItems]);
+
+  const contextValue: DropdownContextType<IDropdownOption> = React.useMemo(
+    () => ({ onChange, allItems: optionsWithKey, isMultiple }),
+    [onChange, optionsWithKey, isMultiple],
+  );
+
+  useEffect(() => {
+    const newValues = getActiveItems({ allItems: optionsWithKey, placeholder });
+    const newValuesWithoutPlaceholder = newValues.filter(
+      (item) => item !== placeholder,
+    );
+    setValues(newValues);
+    setValuesWithoutPlaceholder(newValuesWithoutPlaceholder);
+  }, [optionsWithKey]);
+
+  return (
+    <MultipleDropdownContext.Provider value={contextValue}>
+      <DropdownBase
+        ref={useMergeRefs([dropdownBaseRef, ref])}
+        data-testid="dropdown">
+        <DropdownToggle
+          className={className}
+          isOpen={isOpen}
+          disabled={isDisabled}
+          onClick={setIsOpen.bind(null, !isOpen)}
+          onFocus={setIsFocused.bind(null, true)}
+          colors={colors}
+          ariaLabelledby={`dropdown-label-${dropdownId}`}
+          ariaControls={`dropdown-popup-${dropdownId}`}
+          isMultiple={isMultiple}
+          selectedCount={valuesWithoutPlaceholder.length}>
+          {isMultiple ? (
+            <>
+              <DropdownPlaceholderLabel>
+                {label}
+                {showPlaceholder
+                  ? values.length > 0 && `: ${values[0]}`
+                  : valuesWithoutPlaceholder.length > 0 &&
+                    `: ${valuesWithoutPlaceholder[0]}`}
+              </DropdownPlaceholderLabel>
+              {values.length > 1 ? (
+                <MultipleDropdownNotification as={'div'}>
+                  +{values.length - 1}
+                </MultipleDropdownNotification>
+              ) : (
+                ''
+              )}
+            </>
+          ) : (
+            values.join('')
+          )}
+          <DropdownArrow isUp={isOpen} />
+        </DropdownToggle>
+
+        {isOpen ? (
+          <MultipleDropdownOptions>{items}</MultipleDropdownOptions>
+        ) : null}
+      </DropdownBase>
+    </MultipleDropdownContext.Provider>
+  );
+}
+
+const MultipleDropdown = React.forwardRef<
+  HTMLDivElement,
+  IDropdownProps<IDropdownOption>
+>(MultipleDropdownInner);
+
+export default MultipleDropdown;

package/src/components/MultipleDropdown/index.ts

@@ -0,0 +1 @@
+export { default } from './MultipleDropdown';

package/src/components/MultipleDropdown/types.ts

@@ -0,0 +1,20 @@
+import { IDropdownOption } from '@components/DropdownOptions/types';
+
+export type IDropdownProps<P extends IDropdownOption> = {
+  selectedItems?: P[];
+  isMultiple?: boolean;
+  isDisabled?: boolean;
+  placeholder?: string;
+  showPlaceholder?: boolean;
+  children?: React.ReactNode;
+  className?: string;
+  isOpen?: boolean;
+  label?: string;
+  onChange?: (selectedItem: string | number, isSelected: boolean) => void;
+};
+
+export interface DropdownContextType<T extends IDropdownOption> {
+  onChange: (item: T) => void;
+  isMultiple?: boolean;
+  allItems: Record<string | number, T>;
+}

package/src/components/MultipleDropdown/utils.ts

@@ -0,0 +1,32 @@
+import { IDropdownOption } from '../..';
+
+const getActiveItem = <T>({
+  activeItem,
+  placeholder,
+}: {
+  activeItem: Record<number | string, T>;
+  placeholder: string;
+}) =>
+  activeItem
+    ? activeItem.label ||
+      activeItem.children ||
+      activeItem.value ||
+      activeItem ||
+      placeholder
+    : placeholder;
+
+interface GetActiveItems<T> {
+  allItems: T;
+  placeholder: string;
+}
+export const getActiveItems = <
+  T extends Record<string | number, IDropdownOption>,
+>({
+  allItems = {} as T,
+  placeholder,
+}: GetActiveItems<T>) => {
+  const activeItems = Object.values(allItems)
+    .filter((item) => item.isSelected)
+    .map((activeItem) => getActiveItem({ activeItem, placeholder }));
+  return activeItems.length ? activeItems : [placeholder];
+};

package/src/components/MultipleDropdownNotification/MultipleDropdownNotification.tsx

@@ -0,0 +1,13 @@
+import BadgeBase from '@components/Badge/BadgeBase';
+import styled from '@emotion/styled';
+
+const MultipleDropdownNotification = styled(BadgeBase)`
+  min-width: 18px;
+  width: 18px;
+  color: ${({ theme }) => theme.colors.white};
+  background-color: ${({ theme }) => theme.colors.blueNotification};
+  font-size: 10px;
+  border-radius: 50%;
+`;
+
+export default MultipleDropdownNotification;

package/src/components/MultipleDropdownNotification/index.ts

@@ -0,0 +1 @@
+export { default } from './MultipleDropdownNotification';

package/src/components/MultipleDropdownOptions/MultipleDropdownOptions.tsx

@@ -0,0 +1,156 @@
+import React, { BaseSyntheticEvent } from 'react';
+import styled from '@emotion/styled';
+
+import Checkbox from '@components/Checkbox';
+import { useMultipleDropdownContext } from '@components/MultipleDropdown/MultipleDropdown.context';
+import DropdownOption from '@components/DropdownOption';
+
+import { IDropdownItemsListProps } from './types';
+import { checkboxStyles } from '@components/Checkbox/styles';
+
+const DropdownOptionsBase = styled.ul<{ tabindex?: string }>`
+  position: absolute;
+  width: 100%;
+
+  list-style: none;
+
+  margin: 4px 0 0;
+  padding: 0;
+
+  background: #fff;
+  border-radius: 8px;
+
+  overflow-x: hidden;
+  overflow-y: auto;
+
+  z-index: 2;
+
+  filter: ${({ theme }) =>
+    `drop-shadow(-4px 4px 14px ${theme.colors.greyDarker14})`};
+  backdrop-filter: ${({ theme }) =>
+    `drop-shadow(-4px 4px 14px ${theme.colors.greyDarker14})`};
+
+  ${({ theme }) => checkboxStyles.blueInput(theme)}
+`;
+
+const DropdownOptionButton = styled.div<{
+  checked?: boolean;
+  isDisabled?: boolean;
+}>(({ theme, isDisabled }) => ({
+  display: 'block',
+  cursor: isDisabled ? 'default' : 'pointer',
+  font: 'inherit',
+  fontSize: '0.813rem',
+  outline: 'inherit',
+  textAlign: 'left',
+
+  width: '100%',
+  padding: 0,
+  margin: 0,
+
+  background: 'none',
+  color: 'inherit',
+  border: 'none',
+
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+  overflow: 'hidden',
+
+  userSelect: 'none',
+
+  '& label': {
+    margin: '0 16px 0 0',
+    '& input + div': {
+      borderRadius: '2px',
+      '&::before': {
+        borderRadius: '2px',
+      },
+    },
+  },
+
+  '&:has(> label > input:checked)': {
+    fontWeight: '800',
+  },
+
+  [`&:hover input:not(:checked, :indeterminate) + div::before`]: {
+    borderColor: theme.colors.greyDropdownFocused,
+  },
+}));
+
+const noItemsMsg = { id: Number.NaN, value: 'No items' };
+
+const MultipleDropdownOptions = ({
+  ariaLabelledby,
+  id,
+  children,
+}: IDropdownItemsListProps) => {
+  const { onChange, allItems, isMultiple } = useMultipleDropdownContext();
+
+  const toggleItem = (value: string | number, isDisabled: boolean) => {
+    if (!isDisabled) {
+      const item = allItems[value];
+      onChange(item);
+    }
+  };
+
+  const childrenArray = React.Children.toArray(children).filter(Boolean);
+
+  const options = (childrenArray as React.ReactElement[]).map((child) => {
+    const element = allItems[child.props.value];
+    const isActive = Boolean(element?.isSelected);
+    const isDisabled = Boolean(element?.isDisabled);
+
+    return React.cloneElement(
+      child,
+      {
+        ...child.props,
+        isActive,
+        isMultiple,
+        'aria-selected': isActive,
+        onClick: (event: BaseSyntheticEvent) => {
+          event.preventDefault();
+          toggleItem(child.props.value, isDisabled);
+        },
+      },
+      <DropdownOptionButton
+        checked={isActive}
+        isDisabled={isDisabled}
+        role="button">
+        {isMultiple && (
+          <Checkbox
+            initialState={isActive}
+            externalState={isActive}
+            isDisabled={isDisabled}
+            css={{
+              margin: 0,
+            }}
+            color="blue"
+          />
+        )}
+        {child.props.children || child.props.label || child.props.value}
+      </DropdownOptionButton>,
+    );
+  });
+
+  if (options.length === 0) {
+    options.push(
+      <DropdownOption key={noItemsMsg.id} value={''} aria-selected={false}>
+        <DropdownOptionButton as="button">
+          {noItemsMsg.value}
+        </DropdownOptionButton>
+      </DropdownOption>,
+    );
+  }
+
+  return (
+    <DropdownOptionsBase
+      role="listbox"
+      tabindex="-1"
+      id={id}
+      aria-labelledby={ariaLabelledby}>
+      {options}
+    </DropdownOptionsBase>
+  );
+};
+
+export default MultipleDropdownOptions;

package/src/components/MultipleDropdownOptions/index.ts

@@ -0,0 +1,2 @@
+export { default } from './MultipleDropdownOptions';
+export type { IDropdownOption } from './types';

package/src/components/MultipleDropdownOptions/types.ts

@@ -0,0 +1,7 @@
+export type IDropdownOption = Record<string, string | number>;
+
+export interface IDropdownItemsListProps {
+  ariaLabelledby?: string;
+  id?: string;
+  children?: React.ReactNode;
+}

package/src/components/Popover/Popover.e2e.ts

@@ -0,0 +1,26 @@
+import { test, expect, Page } from '@playwright/test';
+import { SCREEN_SIZES } from '../../consts';
+
+const CUSTOM_SHOTS_PATH = './custom-shots/';
+
+const gotoPage = (page: Page) => {
+  return page.goto(
+    'http://localhost:6006/iframe.html?args=&globals=&id=components-popover--default&viewMode=story',
+  );
+};
+
+test('Core: Popover should be opened correctly', async ({ page }) => {
+  await gotoPage(page);
+  await expect(page.getByText('Trigger')).toBeVisible();
+});
+
+test('Core: Popover - Hint is shown', async ({ page }) => {
+  await gotoPage(page);
+  await page.setViewportSize(SCREEN_SIZES[1920]);
+  await page.getByText('Trigger').click();
+
+  const SCREENSHOT_PREFIX = `${CUSTOM_SHOTS_PATH}components-popover--hint-opened__`;
+  await page.screenshot({
+    path: `${SCREENSHOT_PREFIX}[w1920px].png`,
+  });
+});

package/src/components/Popover/Popover.spec.tsx

@@ -0,0 +1,17 @@
+import { fireEvent } from '@testing-library/dom';
+import { StoryComponent } from './stories/StoryComponent';
+
+describe('Popover', () => {
+  it('Shows up when the trigger is clicked', () => {
+    const { getByText, getByRole, queryByText } = render(<StoryComponent />);
+
+    const buttonEl = getByRole('button');
+    let closeButtonEl = queryByText('Close');
+    expect(closeButtonEl).not.toBeInTheDocument();
+    fireEvent.click(buttonEl);
+    closeButtonEl = getByText('Close');
+    expect(closeButtonEl).toBeInTheDocument();
+    fireEvent.click(closeButtonEl);
+    expect(queryByText('Close')).not.toBeInTheDocument();
+  });
+});

package/src/components/Popover/Popover.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { PopoverOptions } from './types';
+import { usePopover } from './hooks/usePopover';
+import { PopoverContext } from './hooks/usePopoverContext';
+
+export const Popover = ({
+  children,
+  modal = false,
+  ...restOptions
+}: {
+  children: React.ReactNode;
+} & PopoverOptions) => {
+  // This can accept any props as options, e.g. `placement`,
+  // or other positioning options.
+  const popover = usePopover({ modal, ...restOptions });
+  return (
+    <PopoverContext.Provider value={popover}>
+      {children}
+    </PopoverContext.Provider>
+  );
+};

package/src/components/Popover/PopoverClose.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import Button from '@components/Button';
+import { usePopoverContext } from './hooks/usePopoverContext';
+
+export const PopoverClose = React.forwardRef<
+  HTMLButtonElement,
+  React.ButtonHTMLAttributes<HTMLButtonElement>
+>(function PopoverClose(props, ref) {
+  const { setOpen } = usePopoverContext();
+  return (
+    <Button
+      ref={ref}
+      variant="secondary"
+      {...props}
+      onClick={(event) => {
+        props.onClick?.(event);
+        setOpen(false);
+      }}
+    />
+  );
+});

package/src/components/Popover/PopoverContent.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import {
+  useMergeRefs,
+  FloatingPortal,
+  FloatingFocusManager,
+} from '@floating-ui/react';
+import { usePopoverContext } from './hooks/usePopoverContext';
+import Wrapper from '@components/Wrapper';
+
+export const PopoverContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLProps<HTMLDivElement>
+>(function PopoverContent({ style, ...props }, propRef) {
+  const { context: floatingContext, ...context } = usePopoverContext();
+  const ref = useMergeRefs([context.refs.setFloating, propRef]);
+
+  if (!floatingContext.open) return null;
+
+  return (
+    <FloatingPortal>
+      <FloatingFocusManager context={floatingContext} modal={context.modal}>
+        <Wrapper
+          ref={ref}
+          css={{
+            width: 'auto',
+          }}
+          style={{ ...context.floatingStyles, ...style }}
+          aria-labelledby={context.labelId}
+          aria-describedby={context.descriptionId}
+          direction="column"
+          {...context.getFloatingProps(props)}>
+          {props.children}
+        </Wrapper>
+      </FloatingFocusManager>
+    </FloatingPortal>
+  );
+});

package/src/components/Popover/PopoverDescription.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { useId } from '@floating-ui/react';
+import { usePopoverContext } from './hooks/usePopoverContext';
+import Typography from '@components/Typography';
+
+export const PopoverDescription = React.forwardRef<
+  HTMLParagraphElement,
+  Parameters<typeof Typography>[0]
+>(function PopoverDescription(props, ref) {
+  const { setDescriptionId } = usePopoverContext();
+  const id = useId();
+
+  // Only sets `aria-describedby` on the Popover root element
+  // if this component is mounted inside it.
+  React.useLayoutEffect(() => {
+    setDescriptionId(id);
+    return () => setDescriptionId(undefined);
+  }, [id, setDescriptionId]);
+
+  return <Typography as="div" {...props} ref={ref} id={id} />;
+});

package/src/components/Popover/PopoverHeading.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { useId } from '@floating-ui/react';
+import { usePopoverContext } from './hooks/usePopoverContext';
+import Typography from '@components/Typography';
+
+export const PopoverHeading = React.forwardRef<
+  HTMLHeadingElement,
+  Parameters<typeof Typography>[0]
+>(function PopoverHeading(props, ref) {
+  const { setLabelId } = usePopoverContext();
+  const id = useId();
+
+  // Only sets `aria-labelledby` on the Popover root element
+  // if this component is mounted inside it.
+  React.useLayoutEffect(() => {
+    setLabelId(id);
+    return () => setLabelId(undefined);
+  }, [id, setLabelId]);
+
+  return (
+    <Typography {...props} ref={ref} id={id}>
+      {props.children}
+    </Typography>
+  );
+});

package/src/components/Popover/PopoverTrigger.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { useMergeRefs } from '@floating-ui/react';
+import Button from '@components/Button';
+import { PopoverTriggerProps } from './types';
+import { usePopoverContext } from './hooks/usePopoverContext';
+import { IButtonProps } from '@components/Button/types';
+
+export const PopoverTrigger = React.forwardRef<
+  HTMLElement,
+  React.HTMLProps<HTMLElement> & IButtonProps & PopoverTriggerProps
+>(function PopoverTrigger(
+  { children, asChild = false, dataTestId = 'trigger-button', ...props },
+  propRef,
+) {
+  const context = usePopoverContext();
+  const childrenRef = (
+    children as React.ReactNode & { ref: React.Ref<unknown> }
+  )?.ref;
+  const ref = useMergeRefs([context?.refs.setReference, propRef, childrenRef]);
+
+  // `asChild` allows the user to pass any element as the anchor
+  if (asChild && React.isValidElement(children)) {
+    return React.cloneElement(
+      children,
+      context?.getReferenceProps({
+        ref,
+        ...props,
+        ...children.props,
+        'data-state': context.open ? 'open' : 'closed',
+      }),
+    );
+  }
+
+  return (
+    <Button
+      css={{
+        color: '#fff',
+      }}
+      data-testid={dataTestId}
+      ref={ref}
+      // The user can style the trigger based on the state
+      data-state={context?.open ? 'open' : 'closed'}
+      {...context?.getReferenceProps(props)}>
+      {children}
+    </Button>
+  );
+});