@ssa-ui-kit/core 0.0.17-alpha → 0.0.18-alpha

package/src/components/Popover/PopoverHeading.tsx

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

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

package/src/components/Popover/hooks/usePopover.tsx

@@ -1,109 +1,109 @@
-import * as React from 'react';
-import {
-  useFloating,
-  autoUpdate,
-  offset,
-  flip,
-  shift,
-  useClick,
-  useDismiss,
-  useRole,
-  useInteractions,
-  useHover,
-  safePolygon,
-} from '@floating-ui/react';
-import { PopoverOptions, UsePopover } from '../types';
-
-export const usePopover: UsePopover = ({
-  initialOpen = false,
-  placement = 'bottom',
-  modal,
-  open: controlledOpen,
-  onOpenChange: setControlledOpen,
-  floatingOptions = {},
-  interactionsEnabled = 'click',
-}: PopoverOptions = {}) => {
-  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(initialOpen);
-  const [labelId, setLabelId] = React.useState<string | undefined>();
-  const [descriptionId, setDescriptionId] = React.useState<
-    string | undefined
-  >();
-
-  const open = controlledOpen ?? uncontrolledOpen;
-  const setOpen = setControlledOpen ?? setUncontrolledOpen;
-
-  const data = useFloating({
-    placement,
-    open,
-    onOpenChange: setOpen,
-    whileElementsMounted: autoUpdate,
-    middleware: [
-      offset(5),
-      flip({
-        crossAxis: placement.includes('-'),
-        padding: 5,
-      }),
-      shift({ padding: 5 }),
-    ],
-    ...floatingOptions,
-  });
-
-  const context = data.context;
-
-  const click = useClick(context, {
-    enabled:
-      controlledOpen == null && ['click', 'both'].includes(interactionsEnabled),
-  });
-  const dismiss = useDismiss(context);
-  const role = useRole(context);
-  const hover = useHover(context, {
-    enabled:
-      controlledOpen == null && ['hover', 'both'].includes(interactionsEnabled),
-    handleClose: safePolygon(),
-  });
-
-  const interactionsHooks = [dismiss, role];
-
-  switch (interactionsEnabled) {
-    case 'click': {
-      interactionsHooks.push(click);
-      break;
-    }
-    case 'hover': {
-      interactionsHooks.push(hover);
-      break;
-    }
-    default: {
-      interactionsHooks.push(click, hover);
-    }
-  }
-
-  const interactions = useInteractions(interactionsHooks);
-
-  const result = React.useMemo(
-    () => ({
-      open,
-      setOpen,
-      ...interactions,
-      ...data,
-      modal,
-      labelId,
-      descriptionId,
-      floatingOptions,
-      setLabelId,
-      setDescriptionId,
-    }),
-    [
-      open,
-      setOpen,
-      interactions,
-      data,
-      modal,
-      labelId,
-      descriptionId,
-      floatingOptions,
-    ],
-  );
-
-  return result;
-};
+import * as React from 'react';
+import {
+  useFloating,
+  autoUpdate,
+  offset,
+  flip,
+  shift,
+  useClick,
+  useDismiss,
+  useRole,
+  useInteractions,
+  useHover,
+  safePolygon,
+} from '@floating-ui/react';
+import { PopoverOptions, UsePopover } from '../types';
+
+export const usePopover: UsePopover = ({
+  initialOpen = false,
+  placement = 'bottom',
+  modal,
+  open: controlledOpen,
+  onOpenChange: setControlledOpen,
+  floatingOptions = {},
+  interactionsEnabled = 'click',
+}: PopoverOptions = {}) => {
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(initialOpen);
+  const [labelId, setLabelId] = React.useState<string | undefined>();
+  const [descriptionId, setDescriptionId] = React.useState<
+    string | undefined
+  >();
+
+  const open = controlledOpen ?? uncontrolledOpen;
+  const setOpen = setControlledOpen ?? setUncontrolledOpen;
+
+  const data = useFloating({
+    placement,
+    open,
+    onOpenChange: setOpen,
+    whileElementsMounted: autoUpdate,
+    middleware: [
+      offset(5),
+      flip({
+        crossAxis: placement.includes('-'),
+        padding: 5,
+      }),
+      shift({ padding: 5 }),
+    ],
+    ...floatingOptions,
+  });
+
+  const context = data.context;
+
+  const click = useClick(context, {
+    enabled:
+      controlledOpen == null && ['click', 'both'].includes(interactionsEnabled),
+  });
+  const dismiss = useDismiss(context);
+  const role = useRole(context);
+  const hover = useHover(context, {
+    enabled:
+      controlledOpen == null && ['hover', 'both'].includes(interactionsEnabled),
+    handleClose: safePolygon(),
+  });
+
+  const interactionsHooks = [dismiss, role];
+
+  switch (interactionsEnabled) {
+    case 'click': {
+      interactionsHooks.push(click);
+      break;
+    }
+    case 'hover': {
+      interactionsHooks.push(hover);
+      break;
+    }
+    default: {
+      interactionsHooks.push(click, hover);
+    }
+  }
+
+  const interactions = useInteractions(interactionsHooks);
+
+  const result = React.useMemo(
+    () => ({
+      open,
+      setOpen,
+      ...interactions,
+      ...data,
+      modal,
+      labelId,
+      descriptionId,
+      floatingOptions,
+      setLabelId,
+      setDescriptionId,
+    }),
+    [
+      open,
+      setOpen,
+      interactions,
+      data,
+      modal,
+      labelId,
+      descriptionId,
+      floatingOptions,
+    ],
+  );
+
+  return result;
+};

package/src/components/Popover/hooks/usePopoverContext.tsx

@@ -1,16 +1,16 @@
-import * as React from 'react';
-import { ContextType } from '../types';
-
-export const PopoverContext = React.createContext<ContextType>(
-  {} as ContextType,
-);
-
-export const usePopoverContext = () => {
-  const context = React.useContext(PopoverContext);
-
-  if (context == null) {
-    throw new Error('Popover components must be wrapped in <Popover />');
-  }
-
-  return context as ContextType;
-};
+import * as React from 'react';
+import { ContextType } from '../types';
+
+export const PopoverContext = React.createContext<ContextType>(
+  {} as ContextType,
+);
+
+export const usePopoverContext = () => {
+  const context = React.useContext(PopoverContext);
+
+  if (context == null) {
+    throw new Error('Popover components must be wrapped in <Popover />');
+  }
+
+  return context as ContextType;
+};

package/src/components/Popover/index.ts

@@ -1,6 +1,6 @@
-export { Popover } from './Popover';
-export { PopoverClose } from './PopoverClose';
-export { PopoverContent } from './PopoverContent';
-export { PopoverDescription } from './PopoverDescription';
-export { PopoverHeading } from './PopoverHeading';
-export { PopoverTrigger } from './PopoverTrigger';
+export { Popover } from './Popover';
+export { PopoverClose } from './PopoverClose';
+export { PopoverContent } from './PopoverContent';
+export { PopoverDescription } from './PopoverDescription';
+export { PopoverHeading } from './PopoverHeading';
+export { PopoverTrigger } from './PopoverTrigger';

package/src/components/Popover/stories/Popover.stories.tsx

@@ -1,39 +1,39 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Popover } from '..';
-import { StoryComponent } from './StoryComponent';
-import { PopoverOptions } from '../types';
-
-type PopoverType = typeof Popover;
-export type Args = Parameters<PopoverType>[0];
-
-export default {
-  title: 'Components/Popover',
-  component: Popover,
-  argTypes: {},
-} as Meta<typeof Popover>;
-
-export const Default: StoryObj<PopoverType> = () => {
-  return <StoryComponent />;
-};
-
-Default.args = {};
-
-export const InteractionsEnabledOnHover: StoryObj<PopoverType> = (
-  args: PopoverOptions,
-) => {
-  return <StoryComponent {...args} />;
-};
-
-InteractionsEnabledOnHover.args = {
-  interactionsEnabled: 'hover',
-};
-
-export const InteractionsEnabledOnHoverAndClick: StoryObj<PopoverType> = (
-  args: PopoverOptions,
-) => {
-  return <StoryComponent {...args} />;
-};
-
-InteractionsEnabledOnHoverAndClick.args = {
-  interactionsEnabled: 'both',
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { Popover } from '..';
+import { StoryComponent } from './StoryComponent';
+import { PopoverOptions } from '../types';
+
+type PopoverType = typeof Popover;
+export type Args = Parameters<PopoverType>[0];
+
+export default {
+  title: 'Components/Popover',
+  component: Popover,
+  argTypes: {},
+} as Meta<typeof Popover>;
+
+export const Default: StoryObj<PopoverType> = () => {
+  return <StoryComponent />;
+};
+
+Default.args = {};
+
+export const InteractionsEnabledOnHover: StoryObj<PopoverType> = (
+  args: PopoverOptions,
+) => {
+  return <StoryComponent {...args} />;
+};
+
+InteractionsEnabledOnHover.args = {
+  interactionsEnabled: 'hover',
+};
+
+export const InteractionsEnabledOnHoverAndClick: StoryObj<PopoverType> = (
+  args: PopoverOptions,
+) => {
+  return <StoryComponent {...args} />;
+};
+
+InteractionsEnabledOnHoverAndClick.args = {
+  interactionsEnabled: 'both',
+};

package/src/components/Popover/stories/StoryComponent.tsx

@@ -1,42 +1,42 @@
-import { useTheme } from '@emotion/react';
-import {
-  Popover,
-  PopoverTrigger,
-  PopoverContent,
-  PopoverHeading,
-  PopoverDescription,
-  PopoverClose,
-} from '..';
-import { PopoverOptions } from '../types';
-
-export const StoryComponent = ({
-  interactionsEnabled = 'click',
-}: Pick<PopoverOptions, 'interactionsEnabled'>) => {
-  const theme = useTheme();
-  return (
-    <div
-      css={{
-        height: '400px',
-        display: 'flex',
-        justifyContent: 'center',
-      }}>
-      <Popover interactionsEnabled={interactionsEnabled}>
-        <PopoverTrigger>Trigger</PopoverTrigger>
-        <PopoverContent
-          className="popover"
-          css={{
-            gap: 15,
-            border: `2px solid ${theme.colors.turquoise}`,
-            borderRadius: 15,
-            padding: 15,
-          }}>
-          <PopoverHeading variant="h4">Popover heading</PopoverHeading>
-          <PopoverDescription variant="body1">
-            Popover description
-          </PopoverDescription>
-          <PopoverClose>Close</PopoverClose>
-        </PopoverContent>
-      </Popover>
-    </div>
-  );
-};
+import { useTheme } from '@emotion/react';
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverHeading,
+  PopoverDescription,
+  PopoverClose,
+} from '..';
+import { PopoverOptions } from '../types';
+
+export const StoryComponent = ({
+  interactionsEnabled = 'click',
+}: Pick<PopoverOptions, 'interactionsEnabled'>) => {
+  const theme = useTheme();
+  return (
+    <div
+      css={{
+        height: '400px',
+        display: 'flex',
+        justifyContent: 'center',
+      }}>
+      <Popover interactionsEnabled={interactionsEnabled}>
+        <PopoverTrigger>Trigger</PopoverTrigger>
+        <PopoverContent
+          className="popover"
+          css={{
+            gap: 15,
+            border: `2px solid ${theme.colors.turquoise}`,
+            borderRadius: 15,
+            padding: 15,
+          }}>
+          <PopoverHeading variant="h4">Popover heading</PopoverHeading>
+          <PopoverDescription variant="body1">
+            Popover description
+          </PopoverDescription>
+          <PopoverClose>Close</PopoverClose>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+};

package/src/components/Popover/types.ts

@@ -1,45 +1,45 @@
-import {
-  Placement,
-  useInteractions,
-  UseFloatingReturn,
-  UseFloatingOptions,
-} from '@floating-ui/react';
-
-export type InteractionsEnabled = 'click' | 'hover' | 'both';
-
-export interface PopoverOptions {
-  initialOpen?: boolean;
-  placement?: Placement;
-  modal?: boolean;
-  open?: boolean;
-  floatingOptions?: Partial<UseFloatingOptions>;
-  interactionsEnabled?: InteractionsEnabled;
-  onOpenChange?: (open: boolean) => void;
-}
-
-export type SetIDs = {
-  setLabelId: React.Dispatch<React.SetStateAction<string | undefined>>;
-  setDescriptionId: React.Dispatch<React.SetStateAction<string | undefined>>;
-};
-
-export interface PopoverTriggerProps {
-  children?: React.ReactNode;
-  asChild?: boolean;
-  dataTestId?: string;
-}
-
-type UseInteractions = ReturnType<typeof useInteractions>;
-
-export type UsePopover = (props: PopoverOptions) => {
-  open: boolean;
-  modal?: boolean;
-  labelId?: string;
-  descriptionId?: string;
-  floatingOptions?: PopoverOptions['floatingOptions'];
-  setLabelId: React.Dispatch<React.SetStateAction<string | undefined>>;
-  setDescriptionId: React.Dispatch<React.SetStateAction<string | undefined>>;
-  setOpen: (open: boolean) => void;
-} & UseInteractions &
-  UseFloatingReturn;
-
-export type ContextType = ReturnType<UsePopover> & SetIDs;
+import {
+  Placement,
+  useInteractions,
+  UseFloatingReturn,
+  UseFloatingOptions,
+} from '@floating-ui/react';
+
+export type InteractionsEnabled = 'click' | 'hover' | 'both';
+
+export interface PopoverOptions {
+  initialOpen?: boolean;
+  placement?: Placement;
+  modal?: boolean;
+  open?: boolean;
+  floatingOptions?: Partial<UseFloatingOptions>;
+  interactionsEnabled?: InteractionsEnabled;
+  onOpenChange?: (open: boolean) => void;
+}
+
+export type SetIDs = {
+  setLabelId: React.Dispatch<React.SetStateAction<string | undefined>>;
+  setDescriptionId: React.Dispatch<React.SetStateAction<string | undefined>>;
+};
+
+export interface PopoverTriggerProps {
+  children?: React.ReactNode;
+  asChild?: boolean;
+  dataTestId?: string;
+}
+
+type UseInteractions = ReturnType<typeof useInteractions>;
+
+export type UsePopover = (props: PopoverOptions) => {
+  open: boolean;
+  modal?: boolean;
+  labelId?: string;
+  descriptionId?: string;
+  floatingOptions?: PopoverOptions['floatingOptions'];
+  setLabelId: React.Dispatch<React.SetStateAction<string | undefined>>;
+  setDescriptionId: React.Dispatch<React.SetStateAction<string | undefined>>;
+  setOpen: (open: boolean) => void;
+} & UseInteractions &
+  UseFloatingReturn;
+
+export type ContextType = ReturnType<UsePopover> & SetIDs;