@coinbase/cds-web 8.60.0 → 8.62.0

package/esm/overlays/tooltip/Tooltip.js

@@ -1,4 +1,5 @@
-import React, { cloneElement, useCallback, useMemo, useRef } from 'react';
+import React, { cloneElement, memo, useCallback, useMemo, useRef } from 'react';
+import { useComponentConfig } from '../../hooks/useComponentConfig';
 import { Popover } from '../popover/Popover';
 import { TooltipContent } from './TooltipContent';
 import { useTooltipState } from './useTooltipState';
@@ -7,8 +8,9 @@ const preventMouseDown = event => {
   event.preventDefault();
   event.stopPropagation();
 };
-export const Tooltip = _ref => {
-  let {
+export const Tooltip = /*#__PURE__*/memo(_props => {
+  const mergedProps = useComponentConfig('Tooltip', _props);
+  const {
     children,
     content,
     elevation,
@@ -29,7 +31,7 @@ export const Tooltip = _ref => {
     autoFocusDelay = 20,
     openDelay,
     closeDelay
-  } = _ref;
+  } = mergedProps;
   const {
     isOpen,
     handleOnMouseEnter,
@@ -39,10 +41,10 @@ export const Tooltip = _ref => {
     tooltipId
   } = useTooltipState(tooltipIdDefault, openDelay, closeDelay);
   const tooltipContentRef = useRef(null);
-  const handleMouseEnter = useCallback(_ref2 => {
+  const handleMouseEnter = useCallback(_ref => {
     let {
       target
-    } = _ref2;
+    } = _ref;
     const node = tooltipContentRef.current;
 
     // to prevent flicker, don't open tooltip if enter event originates from tooltip content
@@ -98,4 +100,4 @@ export const Tooltip = _ref => {
     visible: isVisible,
     children: clonedChild
   });
-};
+});

package/esm/overlays/tooltip/TooltipContent.js

@@ -8,21 +8,28 @@ import { animateInOpacityConfig, animateOutOpacityConfig, getTranslateConfigByPl
 import { tooltipMaxWidth, tooltipPaddingX, tooltipPaddingY } from '@coinbase/cds-common/tokens/tooltip';
 import { zIndex as zIndexTokens } from '@coinbase/cds-common/tokens/zIndex';
 import { m as motion } from 'framer-motion';
+import { useComponentConfig } from '../../hooks/useComponentConfig';
 import { Box } from '../../layout/Box';
 import { useMotionProps } from '../../motion/useMotionProps';
 import { Text } from '../../typography/Text';
 import { jsx as _jsx } from "react/jsx-runtime";
 const textCss = "textCss-t15dzixe";
-export const TooltipContent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
+export const TooltipContent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+  const mergedProps = useComponentConfig('TooltipContent', _props);
+  const {
     content,
     elevation,
     gap,
     testID,
     zIndex,
     tooltipId,
-    placement = 'top'
-  } = _ref;
+    placement = 'top',
+    background = 'bg',
+    borderRadius = 200,
+    maxWidth = tooltipMaxWidth,
+    paddingX = tooltipPaddingX,
+    paddingY = tooltipPaddingY
+  } = mergedProps;
   const outerStyle = useMemo(() => ({
     padding: "var(--space-".concat(gap, ")"),
     zIndex: zIndex !== null && zIndex !== void 0 ? zIndex : zIndexTokens.tooltip
@@ -42,14 +49,14 @@ export const TooltipContent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
     "data-testid": "".concat(testID, "-motion"),
     children: /*#__PURE__*/_jsx(Box, {
       ref: ref,
-      background: "bg",
-      borderRadius: 200,
+      background: background,
+      borderRadius: borderRadius,
       "data-testid": testID,
       elevation: elevation,
       id: tooltipId,
-      maxWidth: tooltipMaxWidth,
-      paddingX: tooltipPaddingX,
-      paddingY: tooltipPaddingY,
+      maxWidth: maxWidth,
+      paddingX: paddingX,
+      paddingY: paddingY,
       role: "tooltip",
       children: typeof content === 'string' ? /*#__PURE__*/_jsx(Text, {
         className: textCss,

package/esm/overlays/tray/Tray.js

@@ -9,6 +9,7 @@ import { OverlayContentContext } from '@coinbase/cds-common/overlays/OverlayCont
 import { domMax, LazyMotion, m as motion, MotionConfig, useAnimate, useDragControls } from 'framer-motion';
 import { IconButton } from '../../buttons';
 import { cx } from '../../cx';
+import { useComponentConfig } from '../../hooks/useComponentConfig';
 import { useDimensions } from '../../hooks/useDimensions';
 import { useScrollBlocker } from '../../hooks/useScrollBlocker';
 import { useTheme } from '../../hooks/useTheme';
@@ -90,8 +91,9 @@ const animationConfig = {
 const overlayContentContextValue = {
   isDrawer: true
 };
-export const Tray = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Tray(_ref2, ref) {
-  let {
+export const Tray = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Tray(_props, ref) {
+  const mergedProps = useComponentConfig('Tray', _props);
+  const {
     children,
     header,
     footer,
@@ -119,7 +121,7 @@ export const Tray = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Tray(_ref
     pin = 'bottom',
     showHandleBar,
     hideCloseButton
-  } = _ref2;
+  } = mergedProps;
   const theme = useTheme();
   const [isOpen, setIsOpen] = useState(true);
   const [hasScrolledDown, setHasScrolledDown] = useState(false);

package/esm/page/PageFooter.js

@@ -8,6 +8,7 @@ function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React, { forwardRef, memo } from 'react';
 import { pageFooterHeight } from '@coinbase/cds-common/tokens/page';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Box } from '../layout/Box';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const pageFooterPaddingX = {
@@ -20,16 +21,17 @@ export const pageFooterJustifyContent = {
   tablet: 'flex-end',
   desktop: 'flex-end'
 };
-export const PageFooter = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function PageFooter(_ref, ref) {
-  let {
+export const PageFooter = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+  const mergedProps = useComponentConfig('PageFooter', _props);
+  const {
       action,
       height = pageFooterHeight,
       justifyContent = pageFooterJustifyContent,
       paddingX = pageFooterPaddingX,
       paddingY = 1.5,
       role = 'contentinfo'
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutProperties(mergedProps, _excluded);
   return /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread({
     ref: ref,
     height: height,

package/esm/page/PageHeader.js

@@ -9,6 +9,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React, { forwardRef, memo, useMemo } from 'react';
 import { pageHeaderHeight } from '@coinbase/cds-common/tokens/page';
 import { cx } from '../cx';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Box } from '../layout/Box';
 import { Grid } from '../layout/Grid';
 import { media } from '../styles/media';
@@ -26,8 +27,9 @@ export const pageHeaderEndPaddingX = {
   tablet: 4,
   desktop: 4
 };
-export const PageHeader = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function PageHeader(_ref, ref) {
-  let {
+export const PageHeader = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+  const mergedProps = useComponentConfig('PageHeader', _props);
+  const {
       start,
       end,
       title,
@@ -38,8 +40,8 @@ export const PageHeader = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Pag
       style,
       classNames,
       className
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutProperties(mergedProps, _excluded);
   const titleResponsivePaddingLeft = useMemo(() => ({
     phone: start && !end ? 0 : 3,
     tablet: start ? 0 : 4,

package/esm/pagination/Pagination.js

@@ -7,6 +7,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React, { useCallback, useRef } from 'react';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { HStack } from '../layout/HStack';
 import { DefaultPaginationEllipsis } from './DefaultPaginationEllipsis';
 import { DefaultPaginationNavigationButton } from './DefaultPaginationNavigationButton';
@@ -14,9 +15,10 @@ import { DefaultPaginationNavigationTextButton } from './DefaultPaginationNaviga
 import { DefaultPaginationPageButton } from './DefaultPaginationPageButton';
 import { usePagination } from './usePagination';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const Pagination = _ref => {
+export const Pagination = _props => {
   var _accessibilityLabels$, _accessibilityLabels$2, _accessibilityLabels$3, _accessibilityLabels$4, _accessibilityLabels$5, _accessibilityLabels$6;
-  let {
+  const mergedProps = useComponentConfig('Pagination', _props);
+  const {
       totalPages,
       activePage,
       onChange,
@@ -33,8 +35,8 @@ export const Pagination = _ref => {
       PaginationEllipsisComponent = DefaultPaginationEllipsis,
       firstPageButtonLabel = 'First',
       lastPageButtonLabel = 'Last'
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutProperties(mergedProps, _excluded);
   const {
     items,
     updateActivePage,

package/esm/perf/component-config/Button.component-config.perf-test.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { measurePerformance } from 'reassure';
+import { Button } from '../../buttons/Button';
+import { ComponentConfigProvider } from '../../system/ComponentConfigProvider';
+import { DefaultThemeProvider } from '../../utils/test';
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+const buttonCount = 1000;
+const ButtonList = () => {
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: Array.from({
+      length: buttonCount
+    }, (_, index) => /*#__PURE__*/_jsx(Button, {
+      children: "Child"
+    }, index))
+  });
+};
+const Wrapper = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/_jsx(DefaultThemeProvider, {
+    children: children
+  });
+};
+describe('Button component-config performance (web)', () => {
+  it('no provider', async () => {
+    await measurePerformance(/*#__PURE__*/_jsx(Wrapper, {
+      children: /*#__PURE__*/_jsx(ButtonList, {})
+    }));
+  });
+  it('provider customization', async () => {
+    await measurePerformance(/*#__PURE__*/_jsx(Wrapper, {
+      children: /*#__PURE__*/_jsx(ComponentConfigProvider, {
+        value: {
+          Button: {
+            compact: true
+          }
+        },
+        children: /*#__PURE__*/_jsx(ButtonList, {})
+      })
+    }));
+  });
+});

package/esm/perf/component-config/ComponentConfigProvider.perf-test.js

@@ -0,0 +1,134 @@
+import React from 'react';
+import { fireEvent, screen } from '@testing-library/react';
+import { measurePerformance } from 'reassure';
+import { useComponentConfig } from '../../hooks/useComponentConfig';
+import { ComponentConfigProvider } from '../../system/ComponentConfigProvider';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const consumerCount = 1000;
+const updateIterations = 50;
+const stableButtonConfig = () => ({
+  compact: true
+});
+const stableAvatarConfig = () => ({});
+const ButtonConfigConsumer = _ref => {
+  let {
+    index
+  } = _ref;
+  const mergedProps = useComponentConfig('Button', {
+    compact: false,
+    variant: 'primary'
+  });
+  return /*#__PURE__*/_jsx("div", {
+    "data-compact": String(mergedProps.compact),
+    "data-index": index
+  });
+};
+const ButtonConfigConsumerList = _ref2 => {
+  let {
+    count
+  } = _ref2;
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: Array.from({
+      length: count
+    }, (_, index) => /*#__PURE__*/_jsx(ButtonConfigConsumer, {
+      index: index
+    }, index))
+  });
+};
+const UnrelatedKeyUpdateHarness = _ref3 => {
+  let {
+    count
+  } = _ref3;
+  const [unrelatedUpdates, setUnrelatedUpdates] = React.useState(0);
+  const value = React.useMemo(() => ({
+    Avatar: () => unrelatedUpdates % 2 === 0 ? {} : {},
+    Button: stableButtonConfig
+  }), [unrelatedUpdates]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("button", {
+      "data-testid": "update-unrelated-key",
+      onClick: () => setUnrelatedUpdates(v => v + 1),
+      children: "Update unrelated key"
+    }), /*#__PURE__*/_jsx(ComponentConfigProvider, {
+      value: value,
+      children: /*#__PURE__*/_jsx(ButtonConfigConsumerList, {
+        count: count
+      })
+    })]
+  });
+};
+const TargetKeyUpdateHarness = _ref4 => {
+  let {
+    count
+  } = _ref4;
+  const [targetUpdates, setTargetUpdates] = React.useState(0);
+  const value = React.useMemo(() => ({
+    Avatar: stableAvatarConfig,
+    Button: () => ({
+      compact: targetUpdates % 2 === 0
+    })
+  }), [targetUpdates]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("button", {
+      "data-testid": "update-target-key",
+      onClick: () => setTargetUpdates(v => v + 1),
+      children: "Update target key"
+    }), /*#__PURE__*/_jsx(ComponentConfigProvider, {
+      value: value,
+      children: /*#__PURE__*/_jsx(ButtonConfigConsumerList, {
+        count: count
+      })
+    })]
+  });
+};
+describe('ComponentConfigProvider performance tests', () => {
+  it('Scenario A: renders 1000 consumers under one provider', async () => {
+    await measurePerformance(/*#__PURE__*/_jsx(ComponentConfigProvider, {
+      value: {
+        Button: stableButtonConfig
+      },
+      children: /*#__PURE__*/_jsx(ButtonConfigConsumerList, {
+        count: consumerCount
+      })
+    }));
+  });
+  it('Scenario B: updates unrelated component key 50 times', async () => {
+    const scenario = async () => {
+      for (let i = 0; i < updateIterations; i += 1) {
+        fireEvent.click(screen.getByTestId('update-unrelated-key'));
+      }
+    };
+    await measurePerformance(/*#__PURE__*/_jsx(UnrelatedKeyUpdateHarness, {
+      count: consumerCount
+    }), {
+      scenario
+    });
+  });
+  it('Scenario C: updates target component key 50 times', async () => {
+    const scenario = async () => {
+      for (let i = 0; i < updateIterations; i += 1) {
+        fireEvent.click(screen.getByTestId('update-target-key'));
+      }
+    };
+    await measurePerformance(/*#__PURE__*/_jsx(TargetKeyUpdateHarness, {
+      count: consumerCount
+    }), {
+      scenario
+    });
+  });
+  it('Scenario D (baseline): no provider with 1000 consumers', async () => {
+    await measurePerformance(/*#__PURE__*/_jsx(ButtonConfigConsumerList, {
+      count: consumerCount
+    }));
+  });
+  it('Scenario D (provider): provider enabled with 1000 consumers', async () => {
+    await measurePerformance(/*#__PURE__*/_jsx(ComponentConfigProvider, {
+      value: {
+        Button: stableButtonConfig
+      },
+      children: /*#__PURE__*/_jsx(ButtonConfigConsumerList, {
+        count: consumerCount
+      })
+    }));
+  });
+});