@databricks/design-system 1.12.20 → 1.12.21

package/src/design-system/Input/Password.tsx

@@ -8,27 +8,29 @@ import { useDesignSystemTheme } from '../Hooks/useDesignSystemTheme';
 import { useDesignSystemSafexFlags } from '../utils';
 import { addDebugOutlineIfEnabled } from '../utils/debug';
 
-export const Password: React.FC<PasswordProps> = forwardRef<AntDInput, PasswordProps>(function Password(
-  { validationState, autoComplete = 'off', dangerouslySetAntdProps, dangerouslyAppendEmotionCSS, ...props },
-  ref,
-) {
-  const { classNamePrefix, theme } = useDesignSystemTheme();
-  const { useNewShadows, useNewBorderRadii } = useDesignSystemSafexFlags();
+export const Password: React.FC<React.PropsWithChildren<PasswordProps>> = forwardRef<AntDInput, PasswordProps>(
+  function Password(
+    { validationState, autoComplete = 'off', dangerouslySetAntdProps, dangerouslyAppendEmotionCSS, ...props },
+    ref,
+  ) {
+    const { classNamePrefix, theme } = useDesignSystemTheme();
+    const { useNewShadows, useNewBorderRadii } = useDesignSystemSafexFlags();
 
-  return (
-    <DesignSystemAntDConfigProvider>
-      <AntDInput.Password
-        {...addDebugOutlineIfEnabled()}
-        visibilityToggle={false}
-        ref={ref}
-        autoComplete={autoComplete}
-        css={[
-          getInputEmotionStyles(classNamePrefix, theme, { validationState, useNewShadows, useNewBorderRadii }),
-          dangerouslyAppendEmotionCSS,
-        ]}
-        {...props}
-        {...dangerouslySetAntdProps}
-      />
-    </DesignSystemAntDConfigProvider>
-  );
-});
+    return (
+      <DesignSystemAntDConfigProvider>
+        <AntDInput.Password
+          {...addDebugOutlineIfEnabled()}
+          visibilityToggle={false}
+          ref={ref}
+          autoComplete={autoComplete}
+          css={[
+            getInputEmotionStyles(classNamePrefix, theme, { validationState, useNewShadows, useNewBorderRadii }),
+            dangerouslyAppendEmotionCSS,
+          ]}
+          {...props}
+          {...dangerouslySetAntdProps}
+        />
+      </DesignSystemAntDConfigProvider>
+    );
+  },
+);

package/src/design-system/LegacyForm/LegacyForm.tsx

@@ -145,7 +145,11 @@ export const LegacyFormDubois = forwardRef<LegacyFormInstance, LegacyFormProps>(
   );
 });
 
-const FormItem: FC<LegacyFormItemProps> = ({ dangerouslySetAntdProps, children, ...props }) => {
+const FormItem: FC<React.PropsWithChildren<LegacyFormItemProps>> = ({
+  dangerouslySetAntdProps,
+  children,
+  ...props
+}) => {
   const { theme, classNamePrefix } = useDesignSystemTheme();
   return (
     <DesignSystemAntDConfigProvider>

package/src/design-system/LegacyPopover/LegacyPopover.tsx

@@ -20,7 +20,11 @@ export interface LegacyPopoverProps
  * `LegacyPopover` is deprecated in favor of the new `Popover` component.
  * @deprecated
  */
-export const LegacyPopover: React.FC<LegacyPopoverProps> = ({ content, dangerouslySetAntdProps, ...props }) => {
+export const LegacyPopover: React.FC<React.PropsWithChildren<LegacyPopoverProps>> = ({
+  content,
+  dangerouslySetAntdProps,
+  ...props
+}) => {
   const { theme } = useDesignSystemTheme();
 
   return (

package/src/design-system/LegacySelect/LegacySelect.tsx

@@ -3,7 +3,7 @@ import { ClassNames, css } from '@emotion/react';
 import type { SelectProps as AntDSelectProps } from 'antd';
 import { Select as AntDSelect } from 'antd';
 import type { RefSelectProps as AntdRefSelectProps, SelectValue as AntdSelectValue } from 'antd/lib/select';
-import _ from 'lodash';
+import { uniqueId as lodashUniqueId } from 'lodash';
 import React, { forwardRef, useEffect, useState } from 'react';
 
 import type { Theme } from '../../theme';
@@ -476,7 +476,7 @@ function DuboisSelect<T extends LegacySelectValue>(
   const MAX_HEIGHT = maxHeight ?? theme.general.heightSm * 8.5;
 
   useEffect(() => {
-    setUniqueId(id || _.uniqueId('dubois-select-'));
+    setUniqueId(id || lodashUniqueId('dubois-select-'));
   }, [id]);
 
   useEffect(() => {

package/src/design-system/LegacyTable/LegacyTable.tsx

@@ -107,7 +107,7 @@ const DEFAULT_LOADING_SPIN_PROPS = { indicator: <Spinner /> };
  * For more information please join #dubois-table-early-adopters in Slack.
  * @deprecated
  */
-// eslint-disable-next-line @typescript-eslint/ban-types
+// eslint-disable-next-line @typescript-eslint/no-restricted-types
 export const LegacyTable = <T extends object>(props: LegacyTableProps<T>): JSX.Element => {
   const { classNamePrefix, theme } = useDesignSystemTheme();
   const { useNewShadows, useNewBorderColors } = useDesignSystemSafexFlags();

package/src/design-system/LegacyTabs/index.tsx

@@ -259,7 +259,10 @@ export interface LegacyTabsInterface extends React.FC<LegacyTabsProps> {
  * `LegacyTabs` is deprecated in favor of the new `Tabs` component
  * @deprecated
  */
-export const LegacyTabPane: React.FC<LegacyTabPaneProps> = ({ children, ...props }: LegacyTabPaneProps) => {
+export const LegacyTabPane: React.FC<React.PropsWithChildren<LegacyTabPaneProps>> = ({
+  children,
+  ...props
+}: LegacyTabPaneProps) => {
   const { theme } = useDesignSystemTheme();
 
   return (

package/src/design-system/LegacyTooltip/LegacyTooltip.tsx

@@ -54,7 +54,7 @@ export interface LegacyTooltipProps extends HTMLDataAttributes {
  * `LegacyTooltip` is deprecated in favor of the new `Tooltip` component
  * @deprecated
  */
-export const LegacyTooltip: React.FC<LegacyTooltipProps> = ({
+export const LegacyTooltip: React.FC<React.PropsWithChildren<LegacyTooltipProps>> = ({
   children,
   title,
   placement = 'top',

package/src/design-system/LoadingState/LoadingState.tsx

@@ -48,7 +48,7 @@ type LoadingStateProps = {
  * it will call the provided `startLoading()`/`endLoading()` hooks when the component
  * is mounted/unmounted, which can be used to integrate existing latency instrumentation.
  */
-export const LoadingState: React.FC<LoadingStateProps> = ({
+export const LoadingState: React.FC<React.PropsWithChildren<LoadingStateProps>> = ({
   description = 'Generic UI loading state',
 }: LoadingStateProps) => {
   const uid = useStableUid();

package/src/design-system/Modal/Modal.tsx

@@ -20,7 +20,7 @@ import {
 import { DesignSystemAntDConfigProvider, getAnimationCss, RestoreAntDDefaultClsPrefix } from '../DesignSystemProvider';
 import { useDesignSystemTheme } from '../Hooks';
 import { CloseIcon, DangerIcon } from '../Icon';
-import type { AnalyticsEventPropsWithStartInteraction, DangerouslySetAntdProps, HTMLDataAttributes } from '../types';
+import type { AnalyticsEventPropsWithStartInteraction, HTMLDataAttributes } from '../types';
 import { getDarkModePortalStyles, getShadowScrollStyles, useDesignSystemSafexFlags } from '../utils';
 import { addDebugOutlineIfEnabled, addDebugOutlineStylesIfEnabled } from '../utils/debug';
 import { safex } from '../utils/safex';
@@ -28,8 +28,25 @@ import { useNotifyOnFirstView } from '../utils/useNotifyOnFirstView';
 
 export interface ModalProps
   extends HTMLDataAttributes,
-    DangerouslySetAntdProps<AntDModalProps>,
     AnalyticsEventPropsWithStartInteraction<DesignSystemEventProviderAnalyticsEventTypes.OnView> {
+  // Reduce to current usages only, don't allow new props to be set
+  dangerouslySetAntdProps?: Partial<
+    Pick<
+      AntDModalProps,
+      | 'bodyStyle'
+      | 'width'
+      | 'wrapProps'
+      | 'closable'
+      | 'maskClosable'
+      | 'keyboard'
+      | 'centered'
+      | 'closeIcon'
+      | 'style'
+      | 'mask'
+      | 'modalRender'
+      | 'okType'
+    >
+  >;
   /** Whether or not the modal is currently open. Use together with onOk and onCancel to control the modal state. */
   visible?: AntDModalProps['visible'];
 

package/src/design-system/PageWrapper/PageWrapper.tsx

@@ -6,7 +6,7 @@ import { addDebugOutlineIfEnabled } from '../utils/debug';
 
 export interface PageWrapperProps extends HTMLDataAttributes, React.HTMLAttributes<HTMLDivElement> {}
 
-export const PageWrapper: React.FC<PageWrapperProps> = ({ children, ...props }) => {
+export const PageWrapper: React.FC<React.PropsWithChildren<PageWrapperProps>> = ({ children, ...props }) => {
   const { theme } = useDesignSystemTheme();
 
   return (

package/src/design-system/Pagination/index.tsx

@@ -199,7 +199,7 @@ export function getPaginationEmotionStyles(
   return css(importantStyles);
 }
 
-export const Pagination: React.FC<PaginationProps> = function Pagination({
+export const Pagination: React.FC<React.PropsWithChildren<PaginationProps>> = function Pagination({
   currentPageIndex,
   pageSize = 10,
   numTotal,
@@ -315,7 +315,7 @@ export interface CursorPaginationProps
   };
 }
 
-export const CursorPagination: React.FC<CursorPaginationProps> = function CursorPagination({
+export const CursorPagination: React.FC<React.PropsWithChildren<CursorPaginationProps>> = function CursorPagination({
   onNextPage,
   onPreviousPage,
   hasNextPage,

package/src/design-system/PreviewCard/PreviewCard.test.tsx

@@ -93,6 +93,76 @@ describe('<PreviewCard/>', () => {
     expect(eventCallback).not.toHaveBeenCalled();
   });
 
+  describe('With href prop', () => {
+    it('renders as a link when href is provided', () => {
+      renderComponent({
+        href: 'https://example.com',
+      });
+
+      const link = screen.getByRole('link');
+      expect(link).toBeInTheDocument();
+      expect(link).toHaveAttribute('href', 'https://example.com');
+    });
+
+    it('does not render as button when href is provided even with onClick', () => {
+      renderComponent({
+        href: 'https://example.com',
+        onClick: jest.fn(),
+      });
+
+      expect(screen.queryByRole('button')).not.toBeInTheDocument();
+      expect(screen.getByRole('link')).toBeInTheDocument();
+    });
+
+    it('emits an onClick event when clicked with href provided', async () => {
+      const testComponentId = 'test_component_id';
+      renderComponent({
+        href: 'https://example.com',
+        componentId: testComponentId,
+        analyticsEvents: [DesignSystemEventProviderAnalyticsEventTypes.OnClick],
+      });
+
+      expect(eventCallback).not.toHaveBeenCalled();
+
+      await userEvent.click(screen.getByRole('link'));
+
+      expect(eventCallback).toHaveBeenCalledTimes(1);
+      expect(eventCallback).toHaveBeenCalledWith({
+        eventType: 'onClick',
+        componentType: 'preview_card',
+        componentId: testComponentId,
+        value: undefined,
+        shouldStartInteraction: true,
+        event: expect.any(Object),
+        isInteractionSubject: undefined,
+      });
+    });
+
+    it('emits an onClick event when interacted with via keyboard with href provided', async () => {
+      const onClickSpy = jest.fn();
+      renderComponent({
+        href: 'https://example.com',
+        onClick: onClickSpy,
+      });
+
+      await userEvent.tab();
+      await userEvent.keyboard('{Enter}');
+      await userEvent.keyboard(' ');
+
+      expect(onClickSpy).toHaveBeenCalledTimes(1);
+    });
+
+    it('sets target attribute when provided with href', () => {
+      renderComponent({
+        href: 'https://example.com',
+        target: '_blank',
+      });
+
+      const link = screen.getByRole('link');
+      expect(link).toHaveAttribute('target', '_blank');
+    });
+  });
+
   it('emits an onView event on render', async () => {
     // Disable IntersectionObserver for useNotifyOnFirstView hook to trigger
     (window as any).IntersectionObserver = undefined;

package/src/design-system/PreviewCard/PreviewCard.tsx

@@ -26,7 +26,7 @@ export interface PreviewCardProps
   image?: React.ReactNode;
   fullBleedImage?: boolean;
   size?: 'default' | 'large';
-  onClick?: React.MouseEventHandler<HTMLDivElement>;
+  onClick?: React.MouseEventHandler<HTMLDivElement | HTMLAnchorElement>;
   disabled?: boolean;
   selected?: boolean;
   href?: string;
@@ -54,7 +54,7 @@ export const PreviewCard = ({
   target,
   ...props
 }: PreviewCardProps) => {
-  const styles = usePreviewCardStyles({ onClick, size, disabled, fullBleedImage });
+  const styles = usePreviewCardStyles({ onClick, size, disabled, fullBleedImage, href });
   const tabIndex = onClick && !href ? 0 : undefined;
   const role = onClick && !href ? 'button' : undefined;
   const showFooter = startActions || endActions;
@@ -76,6 +76,15 @@ export const PreviewCard = ({
     },
     [eventContext, onClick],
   );
+  const onHrefClickWrapper = useCallback(
+    (e: React.MouseEvent<HTMLAnchorElement>) => {
+      eventContext.onClick(e);
+      if (onClick) {
+        onClick(e);
+      }
+    },
+    [eventContext, onClick],
+  );
   const content = (
     <div
       {...addDebugOutlineIfEnabled()}
@@ -119,7 +128,7 @@ export const PreviewCard = ({
 
   if (href) {
     return (
-      <a href={href} target={target} style={{ textDecoration: 'none' }}>
+      <a href={href} target={target} style={{ textDecoration: 'none' }} onClick={onHrefClickWrapper}>
         {content}
       </a>
     );
@@ -132,10 +141,11 @@ const usePreviewCardStyles = ({
   size,
   disabled,
   fullBleedImage,
-}: Pick<PreviewCardProps, 'onClick' | 'size' | 'disabled' | 'fullBleedImage'>): Record<string, CSSObject> => {
+  href,
+}: Pick<PreviewCardProps, 'onClick' | 'size' | 'disabled' | 'fullBleedImage' | 'href'>): Record<string, CSSObject> => {
   const { theme } = useDesignSystemTheme();
   const { useNewShadows } = useDesignSystemSafexFlags();
-  const isInteractive = onClick !== undefined;
+  const isInteractive = href !== undefined || onClick !== undefined;
   const paddingSize = size === 'large' ? theme.spacing.lg : theme.spacing.md;
   return {
     container: {

package/src/design-system/Radio/Radio.tsx

@@ -499,14 +499,39 @@ const StyledRadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(function St
   );
 });
 
-const HorizontalGroup: React.FC<OrientedRadioGroupProps> = forwardRef<HTMLDivElement, OrientedRadioGroupProps>(
-  function HorizontalGroup({ dangerouslySetAntdProps, useEqualColumnWidths, ...props }, ref) {
+const HorizontalGroup: React.FC<React.PropsWithChildren<OrientedRadioGroupProps>> = forwardRef<
+  HTMLDivElement,
+  OrientedRadioGroupProps
+>(function HorizontalGroup({ dangerouslySetAntdProps, useEqualColumnWidths, ...props }, ref) {
+  const { theme, classNamePrefix } = useDesignSystemTheme();
+  const { useNewFormUISpacing } = useDesignSystemSafexFlags();
+
+  return (
+    <StyledRadioGroup
+      css={getHorizontalRadioGroupStyles({ theme, classNamePrefix, useEqualColumnWidths, useNewFormUISpacing })}
+      {...props}
+      ref={ref}
+      {...dangerouslySetAntdProps}
+    />
+  );
+});
+
+const Group: React.FC<React.PropsWithChildren<RadioGroupProps>> = forwardRef<HTMLDivElement, RadioGroupProps>(
+  function HorizontalGroup({ dangerouslySetAntdProps, layout = 'vertical', useEqualColumnWidths, ...props }, ref) {
     const { theme, classNamePrefix } = useDesignSystemTheme();
     const { useNewFormUISpacing } = useDesignSystemSafexFlags();
 
     return (
       <StyledRadioGroup
-        css={getHorizontalRadioGroupStyles({ theme, classNamePrefix, useEqualColumnWidths, useNewFormUISpacing })}
+        css={
+          layout === 'horizontal'
+            ? getHorizontalRadioGroupStyles({ theme, classNamePrefix, useEqualColumnWidths, useNewFormUISpacing })
+            : getVerticalRadioGroupStyles({
+                theme,
+                classNamePrefix,
+                useNewFormUISpacing,
+              })
+        }
         {...props}
         ref={ref}
         {...dangerouslySetAntdProps}
@@ -515,31 +540,6 @@ const HorizontalGroup: React.FC<OrientedRadioGroupProps> = forwardRef<HTMLDivEle
   },
 );
 
-const Group: React.FC<RadioGroupProps> = forwardRef<HTMLDivElement, RadioGroupProps>(function HorizontalGroup(
-  { dangerouslySetAntdProps, layout = 'vertical', useEqualColumnWidths, ...props },
-  ref,
-) {
-  const { theme, classNamePrefix } = useDesignSystemTheme();
-  const { useNewFormUISpacing } = useDesignSystemSafexFlags();
-
-  return (
-    <StyledRadioGroup
-      css={
-        layout === 'horizontal'
-          ? getHorizontalRadioGroupStyles({ theme, classNamePrefix, useEqualColumnWidths, useNewFormUISpacing })
-          : getVerticalRadioGroupStyles({
-              theme,
-              classNamePrefix,
-              useNewFormUISpacing,
-            })
-      }
-      {...props}
-      ref={ref}
-      {...dangerouslySetAntdProps}
-    />
-  );
-});
-
 // Note: We are overriding ant's default "Group" with our own.
 const RadioNamespace = /* #__PURE__ */ Object.assign(DuboisRadio, { Group, HorizontalGroup });
 export const Radio: RadioInterface = RadioNamespace;

package/src/design-system/SegmentedControl/SegmentedControl.tsx

@@ -71,7 +71,7 @@ function getSegmentedControlGroupEmotionStyles(
     }),
   };
 
-  const importantStyles = importantify(useSegmentedSliderStyle ? sliderStyles : styles);
+  const importantStyles = importantify(useSegmentedSliderStyle && !spaced ? sliderStyles : styles);
 
   return css(importantStyles);
 }
@@ -308,7 +308,7 @@ function getSegmentedControlButtonEmotionStyles(
     ...getAnimationCss(theme.options.enableAnimation),
   };
 
-  const importantStyles = importantify(useSegmentedSliderStyle ? sliderStyles : styles);
+  const importantStyles = importantify(useSegmentedSliderStyle && !spaced ? sliderStyles : styles);
 
   return css(importantStyles);
 }

package/src/design-system/Select/SimpleSelect.tsx

@@ -240,7 +240,10 @@ interface SimpleSelectContentWrapperProps {
 // This component is used to propagate the open state of the DialogCombobox to the SimpleSelect.
 // We don't directly pass through `onOpenChange` since it's tied into the actual state; `SimpleSelect` merely
 // needs to communicate via the optional prop if the dropdown is open or not and doesn't need to control it.
-const SimpleSelectContentWrapper: React.FC<SimpleSelectContentWrapperProps> = ({ children, onOpenChange }) => {
+const SimpleSelectContentWrapper: React.FC<React.PropsWithChildren<SimpleSelectContentWrapperProps>> = ({
+  children,
+  onOpenChange,
+}) => {
   const { isOpen } = useDialogComboboxContext();
 
   useEffect(() => {

package/src/design-system/Skeleton/TableSkeleton.tsx

@@ -46,7 +46,7 @@ const TableSkeletonStyles = {
   }),
 };
 
-export const TableSkeleton: React.FC<TableSkeletonProps> = ({
+export const TableSkeleton: React.FC<React.PropsWithChildren<TableSkeletonProps>> = ({
   lines = 1,
   seed = '',
   frameRate = 60,
@@ -91,6 +91,7 @@ interface TableSkeletonRowsProps<TData> extends WithLoadingState {
   table: Table<TData>;
   actionColumnIds?: string[];
   numRows?: number;
+  label?: React.ReactNode;
 }
 
 interface MinMetaType {
@@ -105,13 +106,14 @@ export const TableSkeletonRows = <TData, MetaType extends MinMetaType>({
   numRows = 3,
   loading = true,
   loadingDescription = 'Table skeleton rows',
+  label,
 }: TableSkeletonRowsProps<TData>): React.ReactElement => {
   const { theme } = useDesignSystemTheme();
 
   return (
     <>
       {loading && <LoadingState description={loadingDescription} />}
-
+      <span css={visuallyHidden}>{label}</span>
       {[...Array(numRows).keys()].map((i) => (
         <TableRow key={i}>
           {table.getFlatHeaders().map((header) => {

package/src/design-system/Skeleton/TitleSkeleton.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import type { CSSProperties } from 'react';
 
-import { genSkeletonAnimatedColor } from './utils';
+import { getOffsets, genSkeletonAnimatedColor } from './utils';
 import { useDesignSystemTheme } from '../Hooks';
 import { LoadingState } from '../LoadingState/LoadingState';
 import type { WithLoadingState } from '../LoadingState/LoadingState';
@@ -11,6 +11,9 @@ import { addDebugOutlineIfEnabled } from '../utils/debug';
 interface TitleSkeletonProps extends WithLoadingState {
   /** Label for screen readers */
   label?: React.ReactNode;
+  /** Seed that deterministically arranges the uneven lines, so that they look like ragged text.
+   * If you don't provide this (or give each skeleton the same seed) they will all look the same. */
+  seed?: string;
   /** fps for animation. Default is 60 fps. A lower number will use less resources. */
   frameRate?: number;
   /** Style property */
@@ -36,6 +39,7 @@ const titleFillStyles = css({
 
 export const TitleSkeleton = ({
   label,
+  seed = '',
   frameRate = 60,
   style,
   loading = true,
@@ -43,6 +47,7 @@ export const TitleSkeleton = ({
   ...restProps
 }: TitleSkeletonProps) => {
   const { theme } = useDesignSystemTheme();
+  const offsetWidth = getOffsets(seed)[0];
 
   return (
     <div
@@ -56,7 +61,10 @@ export const TitleSkeleton = ({
     >
       {loading && <LoadingState description={loadingDescription} />}
       <span css={visuallyHidden}>{label}</span>
-      <div aria-hidden css={[titleFillStyles, genSkeletonAnimatedColor(theme, frameRate)]} />
+      <div
+        aria-hidden
+        css={[titleFillStyles, genSkeletonAnimatedColor(theme, frameRate), { width: `calc(100% - ${offsetWidth}px)` }]}
+      />
     </div>
   );
 };

package/src/design-system/Space/Space.tsx

@@ -6,7 +6,7 @@ import type { DangerouslySetAntdProps, HTMLDataAttributes } from '../types';
 
 export interface SpaceProps extends AntDSpaceProps, DangerouslySetAntdProps<AntDSpaceProps>, HTMLDataAttributes {}
 
-export const Space: React.FC<SpaceProps> = ({ dangerouslySetAntdProps, ...props }) => {
+export const Space: React.FC<React.PropsWithChildren<SpaceProps>> = ({ dangerouslySetAntdProps, ...props }) => {
   return (
     <DesignSystemAntDConfigProvider>
       <AntDSpace {...props} {...dangerouslySetAntdProps} />

package/src/design-system/Spacer/Spacer.tsx

@@ -11,7 +11,7 @@ export interface SpacerProps extends HTMLDataAttributes {
   shrinks?: boolean;
 }
 
-export const Spacer: React.FC<SpacerProps> = ({ size = 'md', shrinks, ...props }) => {
+export const Spacer: React.FC<React.PropsWithChildren<SpacerProps>> = ({ size = 'md', shrinks, ...props }) => {
   const { theme } = useDesignSystemTheme();
 
   const spacingValues: Record<validSpacerOptions, number> = {

package/src/design-system/Spinner/Spinner.tsx

@@ -48,7 +48,7 @@ export interface SpinnerProps extends HTMLDataAttributes, WithLoadingState {
   inheritColor?: boolean;
 }
 
-export const Spinner: React.FC<SpinnerProps> = ({
+export const Spinner: React.FC<React.PropsWithChildren<SpinnerProps>> = ({
   frameRate,
   size = 'default',
   delay,

package/src/design-system/SplitButton/Dropdown/DropdownButton.tsx

@@ -90,7 +90,7 @@ export interface DropdownButtonProps
 
 const ButtonGroup = AntDButton.Group;
 
-export const DropdownButton: React.FC<DropdownButtonProps> = (props) => {
+export const DropdownButton: React.FC<React.PropsWithChildren<DropdownButtonProps>> = (props) => {
   const { getPopupContainer: getContextPopupContainer, getPrefixCls } = useDesignSystemContext();
   const { useNewBorderRadii } = useDesignSystemSafexFlags();
 

package/src/design-system/SplitButton/SplitButton.tsx

@@ -168,7 +168,9 @@ function getSplitButtonEmotionStyles(
   const importantStyles = importantify(styles);
   return css(importantStyles);
 }
-export const SplitButton: React.FC<SplitButtonProps> = (props: SplitButtonProps): ReactElement => {
+export const SplitButton: React.FC<React.PropsWithChildren<SplitButtonProps>> = (
+  props: SplitButtonProps,
+): ReactElement => {
   const { theme, classNamePrefix } = useDesignSystemTheme();
   const { useNewShadows, useNewBorderRadii } = useDesignSystemSafexFlags();
   const {

package/src/design-system/Stepper/Stepper.tsx

@@ -29,7 +29,7 @@ export interface Step {
   /**
    * Custom icon to display in the step. If provided, the `icon` prop will be used instead of the default icon.
    */
-  icon?: React.ComponentType<{ statusColor: string; status: Step['status'] }>;
+  icon?: React.ComponentType<React.PropsWithChildren<{ statusColor: string; status: Step['status'] }>>;
 
   /**
    * Additional content displayed beneath the step description a vertical stepper

package/src/design-system/Switch/Switch.tsx

@@ -270,7 +270,7 @@ const getSwitchWithLabelStyles = ({
   return css(importantStyles);
 };
 
-export const Switch: React.FC<SwitchProps> = ({
+export const Switch: React.FC<React.PropsWithChildren<SwitchProps>> = ({
   dangerouslySetAntdProps,
   label,
   labelProps,

package/src/design-system/TableUI/TableCell.tsx

@@ -1,9 +1,11 @@
+import { css } from '@emotion/react';
 import classnames from 'classnames';
 import type { CSSProperties } from 'react';
 import React, { forwardRef, useContext } from 'react';
 
 import { TableContext } from './Table';
 import { repeatingElementsStyles, tableClassNames } from './tableStyles';
+import { useDesignSystemTheme } from '../Hooks';
 import { Typography } from '../Typography';
 import type { TypographyTextProps } from '../Typography';
 import type { HTMLDataAttributes } from '../types';
@@ -31,6 +33,13 @@ export const TableCell = forwardRef<HTMLDivElement, TableCellProps>(function (
   ref,
 ) {
   const { size, grid } = useContext(TableContext);
+  const { classNamePrefix } = useDesignSystemTheme();
+
+  const linkWithEllipsisCss = css({
+    [`& > .${classNamePrefix}-typography > a.${classNamePrefix}-typography-ellipsis`]: {
+      display: 'block',
+    },
+  });
 
   let typographySize: TypographyTextProps['size'] = 'md';
 
@@ -60,7 +69,7 @@ export const TableCell = forwardRef<HTMLDivElement, TableCellProps>(function (
       style={{ textAlign: align, ...style }}
       ref={ref}
       // PE-259 Use more performance className for grid but keep css= for compatibility.
-      css={!grid ? repeatingElementsStyles.cell : undefined}
+      css={[!grid ? repeatingElementsStyles.cell : undefined, linkWithEllipsisCss]}
       className={classnames(grid && tableClassNames.cell, className)}
     >
       {content}

package/src/design-system/Tooltip/Tooltip.tsx

@@ -159,7 +159,7 @@ const useTooltipStyles = ({ maxWidth }: { maxWidth: CSSObject['maxWidth'] }): Re
  *
  * See go/dubois.
  */
-export const Tooltip: React.FC<TooltipProps> & HTMLAttributes<HTMLDivElement> = ({
+export const Tooltip: React.FC<React.PropsWithChildren<TooltipProps>> & HTMLAttributes<HTMLDivElement> = ({
   children,
   content,
   defaultOpen = false,