Merge pull request #891 from strapi/release/1.6.3

Author: joshuaellis

.gitattributes

@@ -0,0 +1 @@
+* text=auto eol=lf

docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strapi/design-system-docs",
-  "version": "1.6.2",
+  "version": "1.6.3",
   "license": "MIT",
   "private": true,
   "dependencies": {
@@ -10,8 +10,8 @@
     "@storybook/builder-webpack5": "^6.5.15",
     "@storybook/manager-webpack5": "^6.5.15",
     "@storybook/react": "^6.5.15",
-    "@strapi/design-system": "^1.6.2",
-    "@strapi/icons": "^1.6.2",
+    "@strapi/design-system": "^1.6.3",
+    "@strapi/icons": "^1.6.3",
     "qs": "^6.11.0",
     "react": "17",
     "react-copy-to-clipboard": "^5.1.0",

lerna.json

@@ -1,6 +1,6 @@
 {
   "packages": ["packages/*", "docs"],
-  "version": "1.6.2",
+  "version": "1.6.3",
   "npmClient": "yarn",
   "useWorkspaces": true
 }

packages/strapi-design-system/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strapi/design-system",
-  "version": "1.6.2",
+  "version": "1.6.3",
   "license": "MIT",
   "type": "module",
   "sideEffects": false,
@@ -29,7 +29,7 @@
   "devDependencies": {
     "@juggle/resize-observer": "^3.4.0",
     "@playwright/test": "1.27.1",
-    "@strapi/icons": "^1.6.2",
+    "@strapi/icons": "^1.6.3",
     "@swc/core": "^1.3.11",
     "@swc/jest": "^0.2.23",
     "@testing-library/jest-dom": "5.16.5",

packages/strapi-design-system/src/Avatar/__tests__/Avatar.spec.tsx

@@ -63,13 +63,9 @@ describe('Avatar', () => {
         />
         <div
           class="c1"
-          height="32px"
-          width="32px"
         >
           <div
             class="c2 c3"
-            height="32px"
-            width="32px"
           />
           <img
             alt="marvin frachet"
@@ -145,13 +141,9 @@ describe('Avatar', () => {
         />
         <div
           class="c1"
-          height="32px"
-          width="32px"
         >
           <div
             class="c2 c3"
-            height="32px"
-            width="32px"
           />
           <img
             alt="marvin frachet"

packages/strapi-design-system/src/Box/Box.tsx

@@ -125,6 +125,9 @@ export type BoxProps<TElement extends HTMLElement = HTMLDivElement> = Pick<
  */
 const transientProps: Partial<Record<keyof BoxProps, boolean>> = {
   color: true,
+  cursor: true,
+  height: true,
+  width: true,
 };
 
 export const Box = styled.div.withConfig<BoxProps>({

packages/strapi-design-system/src/Box/__tests__/Box.spec.tsx

@@ -1,36 +1,34 @@
-import * as React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import { ThemeProvider } from 'styled-components';
 import { Box } from '../Box';
 import { lightTheme } from '../../themes';
 
+const setup = (props = {}) =>
+  render(
+    <ThemeProvider theme={lightTheme}>
+      <Box {...props} />
+    </ThemeProvider>,
+  );
+
 describe('Box', () => {
   it.each(['color', 'background'])('retrieves the theme value corresponding to the %s props', (colorProp) => {
-    const props = { [colorProp]: 'primary500' };
-
-    render(
-      <ThemeProvider theme={lightTheme}>
-        <Box {...props}>Hello world</Box>
-      </ThemeProvider>,
-    );
-
-    const el = screen.getByText('Hello world');
-    expect(el).toHaveStyle(`${colorProp}: #7b79ff`);
+    const { container } = setup({ [colorProp]: 'primary500' });
+    expect(container.children[0]).toHaveStyle(`${colorProp}: #7b79ff`);
   });
 
   it.each(['padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft'])(
     'retrieves the theme value corresponding to the %s props',
     (spacingProp) => {
-      const props = { [spacingProp]: 4 };
-
-      render(
-        <ThemeProvider theme={lightTheme}>
-          <Box {...props}>Hello world</Box>
-        </ThemeProvider>,
-      );
+      const { container } = setup({ [spacingProp]: 4 });
+      expect(container.children[0]).toHaveStyle(`${spacingProp}: 16px`);
+    },
+  );
 
-      const el = screen.getByText('Hello world');
-      expect(el).toHaveStyle(`${spacingProp}: 16px`);
+  it.each(['color', 'cursor', 'height', 'width'])(
+    'does not render color or cursor props as HTML attributes',
+    (prop) => {
+      const { container } = setup({ [prop]: 'something' });
+      expect(container.children[0]).not.toHaveAttribute(prop);
     },
   );
 });

packages/strapi-design-system/src/Popover/Popover.js renamed to packages/strapi-design-system/src/Popover/Popover.tsx

@@ -1,9 +1,8 @@
 import * as React from 'react';
-import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { useFloating, flip, shift, offset, autoUpdate } from '@floating-ui/react-dom';
+import { useFloating, flip, shift, offset, autoUpdate, Placement } from '@floating-ui/react-dom';
 
-import { Box } from '../Box';
+import { Box, BoxProps } from '../Box';
 import { Portal } from '../Portal';
 
 import { useIntersection } from '../helpers/useIntersection';
@@ -21,7 +20,7 @@ export const POPOVER_PLACEMENTS = [
   'left',
   'left-start',
   'left-end',
-];
+] as const;
 
 const PopoverWrapper = styled(Box)`
   box-shadow: ${({ theme }) => theme.shadows.filterShadow};
@@ -30,41 +29,24 @@ const PopoverWrapper = styled(Box)`
   background: ${({ theme }) => theme.colors.neutral0};
 `;
 
-const PopoverScrollable = styled(Box)`
-  // 16 is base base size, 3 is the factor to get closer to 40px and 5 is the number of elements visible in the list
-  max-height: ${3 * 5}rem;
-  overflow-y: auto;
-  overflow-x: hidden;
-
-  &::-webkit-scrollbar {
-    -webkit-appearance: none;
-    width: 4px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: ${({ theme }) => theme.colors.neutral0};
-  }
+interface ContentProps extends BoxProps<HTMLDivElement> {
+  source: React.MutableRefObject<HTMLElement>;
+  placement?: Placement;
+  fullWidth?: boolean;
+  centered?: boolean;
+  spacing?: number;
+}
 
-  &::-webkit-scrollbar-thumb {
-    background: ${({ theme }) => theme.colors.neutral150};
-    border-radius: ${({ theme }) => theme.borderRadius};
-    margin-right: 10px;
-  }
-`;
-
-const PopoverContent = ({
+export const Content = ({
   source,
   children,
-  spacing,
-  fullWidth,
-  placement,
-  onReachEnd,
-  intersectionId,
-  centered,
+  spacing = 0,
+  fullWidth = false,
+  placement = 'bottom-start',
+  centered = false,
   ...props
-}) => {
-  const popoverRef = React.useRef(null);
-  const [width, setWidth] = React.useState(undefined);
+}: ContentProps) => {
+  const [width, setWidth] = React.useState<number | undefined>(undefined);
   const { x, y, reference, floating, strategy } = useFloating({
     strategy: 'fixed',
     placement: centered ? 'bottom' : placement,
@@ -88,11 +70,6 @@ const PopoverContent = ({
     }
   }, [fullWidth, source]);
 
-  useIntersection(popoverRef, onReachEnd, {
-    selectorToWatch: `#${intersectionId}`,
-    skipWhen: !intersectionId || !onReachEnd,
-  });
-
   return (
     <PopoverWrapper
       ref={floating}
@@ -105,64 +82,64 @@ const PopoverContent = ({
       hasRadius
       background="neutral0"
       padding={1}
+      {...props}
     >
-      <PopoverScrollable ref={popoverRef} {...props}>
-        {children}
-        {intersectionId && onReachEnd && <Box id={intersectionId} width="100%" height="1px" />}
-      </PopoverScrollable>
+      {children}
     </PopoverWrapper>
   );
 };
 
-export const Popover = (props) => {
+export interface ScrollingProps extends BoxProps<HTMLDivElement> {
+  intersectionId?: string;
+  onReachEnd?: (entry: IntersectionObserverEntry) => void;
+}
+
+export const Scrolling = ({ children, intersectionId, onReachEnd, ...props }: ScrollingProps) => {
+  const popoverRef = React.useRef<HTMLDivElement>(null!);
+
+  useIntersection(popoverRef, onReachEnd ?? (() => {}), {
+    selectorToWatch: `#${intersectionId}`,
+    skipWhen: !intersectionId || !onReachEnd,
+  });
+
   return (
-    <Portal>
-      <PopoverContent {...props} />
-    </Portal>
+    <PopoverScrollable ref={popoverRef} {...props}>
+      {children}
+      {intersectionId && onReachEnd && <Box id={intersectionId} width="100%" height="1px" />}
+    </PopoverScrollable>
   );
 };
 
-const popoverDefaultProps = {
-  fullWidth: false,
-  intersectionId: undefined,
-  onReachEnd: undefined,
-  centered: false,
-  placement: 'bottom-start',
-  spacing: 0,
-};
+const PopoverScrollable = styled(Box)`
+  // 16 is base base size, 3 is the factor to get closer to 40px and 5 is the number of elements visible in the list
+  max-height: ${3 * 5}rem;
+  overflow-y: auto;
+  overflow-x: hidden;
 
-const popoverProps = {
-  /**
-   * Horizontally center the popover
-   */
-  centered: PropTypes.bool,
-  children: PropTypes.node.isRequired,
-  /**
-   * Display full width popover
-   */
-  fullWidth: PropTypes.bool,
-  /**
-   * Element id to watch for the onReachEnd event
-   */
-  intersectionId: PropTypes.string,
-  /**
-   * The callback invoked after a scroll to the bottom of the popover content.
-   */
-  onReachEnd: PropTypes.func,
-  /**
-   * The popover position
-   */
-  placement: PropTypes.oneOf(POPOVER_PLACEMENTS),
-  /**
-   * A React ref. Used to defined the position of the popover.
-   */
-  source: PropTypes.shape({
-    current: (typeof Element === 'undefined' ? PropTypes.any : PropTypes.instanceOf(Element)).isRequired,
-  }).isRequired,
-  spacing: PropTypes.number,
-};
+  &::-webkit-scrollbar {
+    -webkit-appearance: none;
+    width: 4px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: ${({ theme }) => theme.colors.neutral0};
+  }
 
-PopoverContent.propTypes = popoverProps;
-PopoverContent.defaultProps = popoverDefaultProps;
-Popover.propTypes = popoverProps;
-Popover.defaultProps = popoverDefaultProps;
+  &::-webkit-scrollbar-thumb {
+    background: ${({ theme }) => theme.colors.neutral150};
+    border-radius: ${({ theme }) => theme.borderRadius};
+    margin-right: 10px;
+  }
+`;
+
+type PopoverProps = ScrollingProps & Pick<ContentProps, 'source' | 'spacing' | 'fullWidth' | 'placement' | 'centered'>;
+
+export const Popover = ({ children, source, spacing, fullWidth, placement, centered, ...restProps }: PopoverProps) => {
+  return (
+    <Portal>
+      <Content source={source} spacing={spacing} fullWidth={fullWidth} placement={placement} centered={centered}>
+        <Scrolling {...restProps}>{children}</Scrolling>
+      </Content>
+    </Portal>
+  );
+};

packages/strapi-design-system/src/Popover/__tests__/Popover.e2e.js renamed to packages/strapi-design-system/src/Popover/__tests__/Popover.e2e.ts

@@ -7,7 +7,7 @@ import { lightTheme } from '../../themes';
 describe('Popover', () => {
   it('snapshots the component', () => {
     const Component = () => {
-      const divRef = React.useRef(null);
+      const divRef = React.useRef<HTMLDivElement>(null!);
       const [visible] = React.useState(true);
 
       return (
@@ -123,7 +123,7 @@ describe('Popover', () => {
 
   it('should render the popover when visible is true', () => {
     const Component = () => {
-      const divRef = React.useRef(null);
+      const divRef = React.useRef<HTMLButtonElement>(null!);
       const [isVisible, setIsVisible] = React.useState(false);
 
       return (

packages/strapi-design-system/src/Popover/__tests__/Popover.spec.js renamed to packages/strapi-design-system/src/Popover/__tests__/Popover.spec.tsx

@@ -0,0 +1,7 @@
+export { Popover, POPOVER_PLACEMENTS } from './Popover';
+
+import { Content, Scrolling } from './Popover';
+export const PopoverPrimitives = {
+  Content,
+  Scrolling,
+};

packages/strapi-design-system/src/Popover/index.js

@@ -5,7 +5,7 @@ import { MutableRefObject, useEffect } from 'react';
 import { useCallbackRef } from '@radix-ui/react-use-callback-ref';
 
 interface UseIntersectionOptions {
-  selectorToWatch: keyof HTMLElementTagNameMap;
+  selectorToWatch: string;
   skipWhen?: boolean;
 }
 

packages/strapi-design-system/src/Popover/index.tsx

@@ -1,6 +1,6 @@
 {
   "name": "@strapi/icons",
-  "version": "1.6.2",
+  "version": "1.6.3",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.cjs",