@ssa-ui-kit/core 0.0.10-alpha → 0.0.11-alpha

package/src/components/MultipleDropdownOptions/MultipleDropdownOptions.tsx

@@ -1,156 +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;
+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

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

package/src/components/MultipleDropdownOptions/types.ts

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

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

@@ -1,26 +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`,
-  });
-});
+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

@@ -1,17 +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();
-  });
-});
+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

@@ -1,21 +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>
-  );
-};
+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

@@ -1,21 +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);
-      }}
-    />
-  );
-});
+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

@@ -1,37 +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>
-  );
-});
+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

@@ -1,21 +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} />;
-});
+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} />;
+});