@persona/design-system 0.6.0 → 0.7.0

package/dist/{Table-ELLvSvH4.mjs.map → Table-DaxiIS96.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Table-ELLvSvH4.mjs","names":["slideKeyframes"],"sources":["../components/Table/Table.tsx","../components/Table/TableHeaderCell.tsx","../components/Table/TableRow.tsx","../components/Table/TableTH.tsx","../components/Table/TableCell.tsx","../components/Table/TableHead.tsx","../components/Table/TableBody.tsx","../components/Table/TableLayout.tsx"],"sourcesContent":["import styled, { css, keyframes } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { semanticColor } from 'design-system/lib/semanticColor';\nimport { paragraphMixins } from 'design-system/mixins/text';\n\ninterface TableProps {\n  size?: 'sm' | 'md';\n  isLoading?: boolean;\n}\n\nconst slideKeyframes = keyframes`\n  0% {\n    transform: translateX(-50%) scaleX(0);\n  }\n  50% {\n    transform: translateX(0) scaleX(1);\n  }\n  100% {\n    transform: translateX(50%) scaleX(0);\n  }\n`;\n\nexport const Table = styled.table.attrs({ role: 'table' })<TableProps>`\n  display: table;\n  width: 100%;\n  border-spacing: 0;\n  ${paragraphMixins.md};\n\n  ${({ size }) =>\n    size === 'sm' &&\n    css`\n      td,\n      th {\n        padding: ${Spacing[2]};\n      }\n    `}\n\n  ${({ isLoading }) =>\n    isLoading &&\n    css`\n      thead {\n        &:after {\n          content: '';\n          display: block;\n          position: absolute;\n          bottom: 0;\n          left: 0;\n          width: 100%;\n          border-bottom: 3px solid ${({ theme }) => semanticColor(theme, 'FeedbackAccent3', theme.color.primary.brand)};\n          animation: ${slideKeyframes} 3s infinite cubic-bezier(0.5, 0, 0.5, 1);\n        }\n      }\n    `}\n`;\n\nexport default Table;\n","import { type ComponentPropsWithoutRef, forwardRef, type ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { CaretDownIcon, CaretUpIcon } from '@persona/icons';\nimport { semanticColor, semanticOnly } from 'design-system/lib/semanticColor';\nimport { focusOutline } from 'design-system/mixins/focus';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport { BASE } from 'design-system/variables/spacing';\n\ninterface TableHeaderCellProps {\n  size?: 'sm' | 'md';\n  sortable?: boolean;\n  width?: 'auto' | 'min' | 'max' | string;\n  isSticky?: boolean;\n  align?: 'left' | 'right';\n  trailing?: ReactNode;\n}\n\nconst StyledTableHeaderCell = styled.th<TableHeaderCellProps>`\n  display: table-cell;\n  /* Self-contained box model: don't depend on a consumer's global\n     border-box reset, so header padding + border are included in the\n     declared width/height. */\n  box-sizing: border-box;\n\n  background-color: ${({ theme }) => semanticColor(theme, 'SurfaceSecondary', theme.color.background.secondary)};\n  ${semanticOnly((tokens) => `color: ${tokens.FgPrimary};`)}\n  padding: ${({ size }) => (size === 'sm' ? BASE : BASE * 1.5)}px;\n  text-align: left;\n  white-space: nowrap;\n  ${({ size }) => (size === 'sm' ? paragraphMixins.sm : paragraphMixins.md)};\n  line-height: 1;\n  width: ${({ width }) => {\n    switch (width) {\n      case 'min':\n        return '1px';\n      case 'max':\n        return '100%';\n      default:\n        if (width) {\n          return width;\n        } else {\n          return 'auto';\n        }\n    }\n  }};\n\n  &:first-child {\n    border-radius: ${({ theme }) =>\n      `${theme.element.borderRadius} 0 0 ${theme.element.borderRadius}`};\n  }\n\n  &:last-child {\n    border-radius: ${({ theme }) =>\n      `0 ${theme.element.borderRadius} ${theme.element.borderRadius} 0`};\n  }\n\n  ${({ sortable }) =>\n    sortable &&\n    css`\n      cursor: pointer;\n\n      &:hover ${TableIconContainer} {\n        display: inline;\n        visibility: visible;\n      }\n\n      ${SortButton}:focus-visible ${TableIconContainer} {\n        display: inline;\n        visibility: visible;\n      }\n    `};\n\n  ${({ isSticky }) =>\n    isSticky\n      ? css`\n          position: sticky;\n          top: 0;\n          z-index: 1;\n        `\n      : css`\n          position: relative;\n        `}\n`;\n\nconst VerticalAlign = styled.div<{ $align?: TableHeaderCellProps['align'] }>`\n  display: flex;\n  align-items: center;\n  gap: ${Spacing[1]};\n  flex-direction: ${({ $align }) => ($align === 'right' ? 'row-reverse' : 'row')};\n`;\n\nconst SortButton = styled.button`\n  background: none;\n  border: 0;\n  padding: 0;\n  margin: 0;\n  font: inherit;\n  color: inherit;\n  text-align: inherit;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  gap: ${Spacing[1]};\n  min-width: 0;\n  ${focusOutline}\n`;\n\ninterface TableIconContainerProps {\n  sortDirection?: 'asc' | 'desc' | false;\n}\n\nconst TableIconContainer = styled('div')<TableIconContainerProps>`\n  display: inline-block;\n\n  ${({ sortDirection }) => {\n    if (sortDirection) {\n      return css`\n        display: inline;\n      `;\n    } else {\n      return css`\n        display: inline;\n        visibility: hidden;\n        color: ${({ theme }) => semanticColor(theme, 'FgTertiary', theme.color.text.disabled)};\n      `;\n    }\n  }};\n`;\n\nconst TableHeaderCell = forwardRef<\n  HTMLTableCellElement,\n  ComponentPropsWithoutRef<'th'> & TableHeaderCellProps & TableIconContainerProps\n>(function TableHeaderCell(\n  { sortable, sortDirection, children, align, trailing, onClick, ...elemProps },\n  ref,\n) {\n  let ariaSort: 'none' | 'ascending' | 'descending' | undefined;\n\n  if (sortable && sortDirection) {\n    ariaSort = sortDirection === 'asc' ? 'ascending' : 'descending';\n  } else if (sortable) {\n    ariaSort = 'none';\n  }\n\n  return (\n    <StyledTableHeaderCell\n      sortable={sortable}\n      aria-sort={ariaSort}\n      onClick={sortable ? undefined : onClick}\n      {...elemProps}\n      ref={ref}\n    >\n      <VerticalAlign $align={align}>\n        {sortable ? (\n          <SortButton type='button' onClick={onClick}>\n            {children}\n            <TableIconContainer aria-hidden='true' sortDirection={sortDirection}>\n              {sortDirection === 'asc' ? <CaretUpIcon /> : <CaretDownIcon />}\n            </TableIconContainer>\n          </SortButton>\n        ) : (\n          children\n        )}\n        {trailing}\n      </VerticalAlign>\n    </StyledTableHeaderCell>\n  );\n});\n\nexport default TableHeaderCell;\n","import styled, { css } from 'styled-components';\n\nimport { withAlpha } from 'design-system/lib/color';\nimport { isFocusedVisible, isHovered } from 'design-system/lib/pseudoClass';\nimport { semanticTokens } from 'design-system/lib/semanticColor';\nimport type PseudoClassProps from 'design-system/types/PseudoClassProps';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nexport interface TableRowProps extends PseudoClassProps {\n  disableHoverBackground?: boolean;\n}\n\nconst TableRow = styled.tr.attrs({\n  role: 'row',\n})<TableRowProps>`\n  display: table-row;\n\n  ${({ onClick }) =>\n    onClick != null &&\n    css`\n      cursor: pointer;\n    `}\n\n  ${({ disableHoverBackground, theme }) => {\n    if (disableHoverBackground) {\n      return null;\n    }\n    const tokens = semanticTokens(theme);\n    return css`\n      &${isHovered} {\n        background-color: ${\n          tokens\n            ? withAlpha(tokens.ActionAccent, tokens.Opacity25)\n            : theme.color.background.highlight\n        };\n        ${tokens ? `color: ${tokens.FgPrimary};` : ''}\n        transition-duration: ${TransitionDuration.Fast};\n      }\n    `;\n  }}\n\n  ${isFocusedVisible}\n`;\n\nexport default TableRow;\n","import { type ComponentPropsWithoutRef, forwardRef, type ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport { TableHeaderCell } from '@persona/design-system/components/Table';\nimport { HelperTooltip } from '@persona/design-system/components/Tooltip';\nimport { Spacing } from '@persona/design-tokens';\n\nconst StyledHelperTooltip = styled(HelperTooltip)`\n  height: 14px;\n  margin-left: ${Spacing[1]};\n`;\n\nexport interface TableTHProps extends ComponentPropsWithoutRef<typeof TableHeaderCell> {\n  canSort?: boolean;\n  isSorted?: boolean;\n  isDescending?: boolean;\n  isSticky?: boolean;\n  /**\n   * Display help icon and tooltip for column header\n   */\n  helpText?: ReactNode;\n  align?: 'left' | 'right';\n  size?: 'sm' | 'md';\n}\n\nconst TableTH = forwardRef<HTMLTableCellElement, TableTHProps>(function TableTH(\n  { children, canSort, isSorted, isSticky, isDescending, helpText, align, size, ...props },\n  ref,\n) {\n  return (\n    <TableHeaderCell\n      sortable={canSort}\n      sortDirection={canSort && isSorted ? (isDescending ? 'desc' : 'asc') : false}\n      ref={ref}\n      isSticky={isSticky}\n      align={align}\n      size={size}\n      trailing={helpText && <StyledHelperTooltip size='sm'>{helpText}</StyledHelperTooltip>}\n      {...props}\n    >\n      {/* We have to wrap the children to make it easier to use tooltips */}\n      <span className='th__text'>{children}</span>\n    </TableHeaderCell>\n  );\n});\n\nexport default TableTH;\n","import type { ComponentPropsWithoutRef, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { Paragraph } from 'design-system/components/Text';\nimport { withAlpha } from 'design-system/lib/color';\nimport {\n  type MaybeSemanticTheme,\n  semanticColor,\n  semanticOnly,\n  semanticTokens,\n} from 'design-system/lib/semanticColor';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport type { PersonaTheme } from 'design-system/theme';\nimport { BASE } from 'design-system/variables/spacing';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nimport TableRow from './TableRow';\nimport TableTH from './TableTH';\n\nexport interface TableCellProps {\n  breakWord?: boolean;\n  size?: 'sm' | 'md';\n}\n\nconst TableCell = styled.td.attrs({ role: 'cell' })<TableCellProps>`\n  display: table-cell;\n  vertical-align: middle;\n  /* Self-contained box model: don't depend on a consumer's global\n     border-box reset, so a fixed cell height includes its padding + border\n     and rows stay compact. */\n  box-sizing: border-box;\n\n  border-bottom: 1px solid ${({ theme }) => semanticColor(theme, 'BorderDivider', theme.color.border.primary)};\n  text-align: left;\n  padding: ${({ size }) => (size === 'sm' ? BASE : BASE * 1.5)}px;\n  color: ${({ theme }) => semanticColor(theme, 'FgPrimary', theme.color.text.primary)};\n  white-space: nowrap;\n  ${paragraphMixins.md};\n  line-height: 1;\n  ${({ breakWord }) =>\n    breakWord\n      ? `white-space: normal;\n         overflow-wrap: break-word;`\n      : ''}\n`;\n\nexport default TableCell;\n\nconst CellTitleContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n`;\n\nconst CellTitle = styled(Paragraph).attrs({ color: 'primary' })`\n  ${semanticOnly(() => 'color: inherit;')}\n  display: flex;\n  align-items: center;\n  gap: ${Spacing[2]};\n`;\n\nconst CellSubtitle = styled(Paragraph)`\n  ${semanticOnly((tokens) => `color: ${tokens.FgSecondary};`)}\n`;\n\nconst activeHighlight = (theme: PersonaTheme & MaybeSemanticTheme) =>\n  semanticColor(theme, 'ActionAccent', theme.color.background.highlight);\n\nconst hoverHighlight = (theme: PersonaTheme & MaybeSemanticTheme) => {\n  const tokens = semanticTokens(theme);\n  return tokens\n    ? withAlpha(tokens.ActionAccent, tokens.Opacity25)\n    : theme.color.background.highlight;\n};\n\ninterface TableCellTitleProps extends ComponentPropsWithoutRef<'div'> {\n  subtitle?: ReactNode;\n}\n\nexport const TableCellTitle = ({ children, subtitle, ...elemProps }: TableCellTitleProps) => {\n  return (\n    <CellTitleContainer {...elemProps}>\n      <CellTitle>{children}</CellTitle>\n      {subtitle && <CellSubtitle>{subtitle}</CellSubtitle>}\n    </CellTitleContainer>\n  );\n};\n\nexport const TableTD = styled(TableCell)<{ unclickable?: boolean }>`\n  white-space: normal;\n  overflow-wrap: break-word;\n  ${(props) =>\n    props.unclickable &&\n    css`\n      cursor: default;\n    `}\n`;\n\nexport const TableIconTD = styled(TableTD)`\n  text-align: right;\n  line-height: 0; /* To center icon; cannot use flex here */\n  padding: 0;\n  padding-left: ${Spacing[4]};\n  width: 36px;\n`;\n\nexport const TableActionTD = styled(TableTD)`\n  text-align: right;\n  padding: 0;\n  padding-right: ${Spacing[4]};\n  width: 48px;\n`;\n\nexport const StickyTD = styled(TableTD)<{\n  left?: number;\n  hasRightBorder?: boolean;\n}>`\n  position: sticky;\n  left: ${({ left = 0 }) => `${left}px`}; // Default to 0 if not specified\n  background-color: ${({ theme }) => semanticColor(theme, 'SurfacePrimary', theme.color.background.primary)};\n\n  ${({ hasRightBorder, theme }) =>\n    hasRightBorder &&\n    `border-right: 2px solid ${semanticColor(theme, 'BorderDivider', theme.color.border.primary)};`}\n  z-index: 2;\n`;\n\nexport const StickyTH = styled(TableTH)<{\n  left?: number;\n  hasRightBorder?: boolean;\n  size?: 'sm' | 'md';\n}>`\n  position: sticky;\n  left: ${({ left = 0 }) => `${left}px`}; // Default to 0 if not specified\n  z-index: 2;\n  max-width: 10%;\n  background-color: ${({ theme }) => semanticColor(theme, 'SurfaceSecondary', theme.color.background.secondary)};\n  ${({ hasRightBorder, theme }) =>\n    hasRightBorder &&\n    `border-right: 2px solid ${semanticColor(theme, 'BorderDivider', theme.color.border.primary)};`}\n`;\n\nexport const TableTR = styled(TableRow)<{ disableHoverBackground?: boolean; $isActive?: boolean }>`\n  ${({ disableHoverBackground }) =>\n    disableHoverBackground &&\n    css`\n      &:hover {\n        background-color: transparent !important;\n      }\n    `}\n\n  ${({ $isActive }) =>\n    $isActive &&\n    css`\n      background-color: ${({ theme }) => activeHighlight(theme)};\n      ${semanticOnly((tokens) => `color: ${tokens.FgPrimary};`)}\n      &:hover {\n        background-color: ${({ theme }) => activeHighlight(theme)};\n      }\n    `}\n\n  ${({ onClick, disableHoverBackground, $isActive }) =>\n    onClick != null &&\n    !disableHoverBackground &&\n    !$isActive &&\n    css`\n      cursor: pointer;\n      :hover {\n        background-color: ${({ theme }) => hoverHighlight(theme)};\n        ${semanticOnly((tokens) => `color: ${tokens.FgPrimary};`)}\n      }\n      transition-duration: ${TransitionDuration.Fast};\n    `}\n`;\n","import styled, { css } from 'styled-components';\n\ninterface TableHeadProps {\n  sticky?: boolean;\n}\n\nconst TableHead = styled.thead.attrs({ role: 'rowgroup' })<TableHeadProps>`\n  display: table-header-group;\n  ${({ sticky }) =>\n    sticky &&\n    css`\n      position: sticky;\n      top: 0;\n      z-index: 1;\n    `}\n`;\n\nexport default TableHead;\n","import styled from 'styled-components';\n\nconst TableBody = styled.tbody.attrs({ role: 'rowgroup' })`\n  display: table-row-group;\n`;\n\nexport default TableBody;\n","import type { FC, PropsWithChildren, ReactNode } from 'react';\nimport styled, { keyframes } from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { Spinner } from 'design-system/components/Spinner';\nimport Table, { TableBody, TableHead, TableRow } from 'design-system/components/Table';\nimport { semanticColor } from 'design-system/lib/semanticColor';\nimport { Z_INDICES } from 'design-system/lib/zindex';\nimport { fadeIn } from 'design-system/variables/keyframes';\n\n// `visible` rather than a narrower opt-out because CSS blockifies the other axis: any\n// `overflow-x` other than `visible`/`clip` forces `overflow-y` to compute to `auto` too, which\n// makes this element the scrollport that descendant sticky offsets resolve against.\nconst Container = styled.div<{ maxHeight?: number; $scrollsHorizontally: boolean }>`\n    position: relative;\n    z-index: 0;\n    overflow-x: ${({ $scrollsHorizontally }) => ($scrollsHorizontally ? 'auto' : 'visible')};\n    ${({ maxHeight }) => {\n      if (maxHeight != null) {\n        return `max-height: ${maxHeight}px;`;\n      }\n    }}\n  `;\n\nconst slideKeyframes = keyframes`\n    0% {\n      transform: translateX(-50%) scaleX(0);\n    }\n    50% {\n      transform: translateX(0) scaleX(1);\n    }\n    100% {\n      transform: translateX(50%) scaleX(0);\n    }\n  `;\n\nconst Loader = styled.div`\n    position: absolute;\n    z-index: ${Z_INDICES.loadingOverlays};\n    border-bottom: 3px solid ${({ theme }) => semanticColor(theme, 'BorderAccent', theme.color.primary.brand)};\n    width: 100%;\n  \n    animation: ${slideKeyframes} 3s infinite cubic-bezier(0.5, 0, 0.5, 1);\n  `;\n\nconst Overlay = styled.div`\n    position: absolute;\n    z-index: ${Z_INDICES.loadingOverlays};\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: ${({ theme }) => semanticColor(theme, 'SurfacePrimary', theme.color.primary.white)};\n    opacity: 50%;\n  `;\n\nconst SpinnerWrapper = styled.div`\n    width: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: ${Spacing[5]} 0;\n    animation: ${fadeIn} 1s;\n    animation-delay: 0.5s;\n    animation-fill-mode: backwards;\n  `;\n\nconst TableSpinner = styled(Spinner)`\n    svg {\n      width: 120px;\n      height: 120px;\n    }\n  \n    path {\n      stroke: ${({ theme }) => semanticColor(theme, 'FeedbackAccent3', Color.CorePurple500)};\n      stroke-width: 0.46;\n    }\n  `;\n\ninterface TableLayoutProps {\n  className?: string;\n  containerMaxHeight?: number;\n  /**\n   * When false, the container does not scroll horizontally and an ancestor is expected to.\n   * Sticky offsets inside the table then resolve against that ancestor's scrollport rather\n   * than against the container.\n   */\n  containerScrollsHorizontally?: boolean;\n  dataTest?: string;\n  headerTR: JSX.Element;\n  isEmpty?: boolean;\n  isLoading?: boolean;\n  nullState: ReactNode;\n  showHeader?: boolean;\n  size?: 'sm' | 'md';\n  stickyHeader?: boolean;\n}\n\nconst TableLayout: FC<PropsWithChildren<TableLayoutProps>> = ({\n  children,\n  className,\n  containerMaxHeight,\n  containerScrollsHorizontally = true,\n  dataTest,\n  headerTR,\n  isEmpty,\n  isLoading,\n  nullState,\n  showHeader,\n  size = 'md',\n  stickyHeader = false,\n}) => {\n  if (isEmpty && !showHeader) {\n    if (isLoading) {\n      return (\n        <SpinnerWrapper\n          role='status'\n          aria-live='polite'\n          aria-busy='true'\n          aria-label='Loading...'\n          data-loading-indicator='true'\n        >\n          <TableSpinner size='md' />\n        </SpinnerWrapper>\n      );\n    } else {\n      return (\n        <Container data-test={dataTest} $scrollsHorizontally={containerScrollsHorizontally}>\n          {nullState}\n        </Container>\n      );\n    }\n  }\n\n  return (\n    <Container\n      data-test={dataTest}\n      maxHeight={containerMaxHeight}\n      className={className}\n      $scrollsHorizontally={containerScrollsHorizontally}\n    >\n      {isLoading && <Loader data-test='table-layout__loader' />}\n      {isLoading && <Overlay />}\n\n      <Table size={size} aria-busy={isLoading || undefined}>\n        <TableHead sticky={stickyHeader}>\n          <TableRow>{headerTR}</TableRow>\n        </TableHead>\n        {!isEmpty && <TableBody>{children}</TableBody>}\n      </Table>\n\n      {isEmpty && nullState}\n    </Container>\n  );\n};\n\nexport default TableLayout;\n"],"mappings":"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"}
+{"version":3,"file":"Table-DaxiIS96.mjs","names":["slideKeyframes"],"sources":["../components/Table/Table.tsx","../components/Table/TableHeaderCell.tsx","../components/Table/TableRow.tsx","../components/Table/TableTH.tsx","../components/Table/TableCell.tsx","../components/Table/TableHead.tsx","../components/Table/TableBody.tsx","../components/Table/TableLayout.tsx"],"sourcesContent":["import styled, { css, keyframes } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { semanticColor } from 'design-system/lib/semanticColor';\nimport { paragraphMixins } from 'design-system/mixins/text';\n\ninterface TableProps {\n  size?: 'sm' | 'md';\n  isLoading?: boolean;\n}\n\nconst slideKeyframes = keyframes`\n  0% {\n    transform: translateX(-50%) scaleX(0);\n  }\n  50% {\n    transform: translateX(0) scaleX(1);\n  }\n  100% {\n    transform: translateX(50%) scaleX(0);\n  }\n`;\n\nexport const Table = styled.table.attrs({ role: 'table' })<TableProps>`\n  display: table;\n  width: 100%;\n  border-spacing: 0;\n  ${paragraphMixins.md};\n\n  ${({ size }) =>\n    size === 'sm' &&\n    css`\n      td,\n      th {\n        padding: ${Spacing[2]};\n      }\n    `}\n\n  ${({ isLoading }) =>\n    isLoading &&\n    css`\n      thead {\n        &:after {\n          content: '';\n          display: block;\n          position: absolute;\n          bottom: 0;\n          left: 0;\n          width: 100%;\n          border-bottom: 3px solid ${({ theme }) => semanticColor(theme, 'FeedbackAccent3', theme.color.primary.brand)};\n          animation: ${slideKeyframes} 3s infinite cubic-bezier(0.5, 0, 0.5, 1);\n        }\n      }\n    `}\n`;\n\nexport default Table;\n","import { type ComponentPropsWithoutRef, forwardRef, type ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { CaretDownIcon, CaretUpIcon } from '@persona/icons';\nimport { semanticColor, semanticOnly } from 'design-system/lib/semanticColor';\nimport { focusOutline } from 'design-system/mixins/focus';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport { BASE } from 'design-system/variables/spacing';\n\ninterface TableHeaderCellProps {\n  size?: 'sm' | 'md';\n  sortable?: boolean;\n  width?: 'auto' | 'min' | 'max' | string;\n  isSticky?: boolean;\n  align?: 'left' | 'right';\n  trailing?: ReactNode;\n}\n\nconst StyledTableHeaderCell = styled.th<TableHeaderCellProps>`\n  display: table-cell;\n  /* Self-contained box model: don't depend on a consumer's global\n     border-box reset, so header padding + border are included in the\n     declared width/height. */\n  box-sizing: border-box;\n\n  background-color: ${({ theme }) => semanticColor(theme, 'SurfaceSecondary', theme.color.background.secondary)};\n  ${semanticOnly((tokens) => `color: ${tokens.FgPrimary};`)}\n  padding: ${({ size }) => (size === 'sm' ? BASE : BASE * 1.5)}px;\n  text-align: left;\n  white-space: nowrap;\n  ${({ size }) => (size === 'sm' ? paragraphMixins.sm : paragraphMixins.md)};\n  line-height: 1;\n  width: ${({ width }) => {\n    switch (width) {\n      case 'min':\n        return '1px';\n      case 'max':\n        return '100%';\n      default:\n        if (width) {\n          return width;\n        } else {\n          return 'auto';\n        }\n    }\n  }};\n\n  &:first-child {\n    border-radius: ${({ theme }) =>\n      `${theme.element.borderRadius} 0 0 ${theme.element.borderRadius}`};\n  }\n\n  &:last-child {\n    border-radius: ${({ theme }) =>\n      `0 ${theme.element.borderRadius} ${theme.element.borderRadius} 0`};\n  }\n\n  ${({ sortable }) =>\n    sortable &&\n    css`\n      cursor: pointer;\n\n      &:hover ${TableIconContainer} {\n        display: inline;\n        visibility: visible;\n      }\n\n      ${SortButton}:focus-visible ${TableIconContainer} {\n        display: inline;\n        visibility: visible;\n      }\n    `};\n\n  ${({ isSticky }) =>\n    isSticky\n      ? css`\n          position: sticky;\n          top: 0;\n          z-index: 1;\n        `\n      : css`\n          position: relative;\n        `}\n`;\n\nconst VerticalAlign = styled.div<{ $align?: TableHeaderCellProps['align'] }>`\n  display: flex;\n  align-items: center;\n  gap: ${Spacing[1]};\n  flex-direction: ${({ $align }) => ($align === 'right' ? 'row-reverse' : 'row')};\n`;\n\nconst SortButton = styled.button`\n  background: none;\n  border: 0;\n  padding: 0;\n  margin: 0;\n  font: inherit;\n  color: inherit;\n  text-align: inherit;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  gap: ${Spacing[1]};\n  min-width: 0;\n  ${focusOutline}\n`;\n\ninterface TableIconContainerProps {\n  sortDirection?: 'asc' | 'desc' | false;\n}\n\nconst TableIconContainer = styled('div')<TableIconContainerProps>`\n  display: inline-block;\n\n  ${({ sortDirection }) => {\n    if (sortDirection) {\n      return css`\n        display: inline;\n      `;\n    } else {\n      return css`\n        display: inline;\n        visibility: hidden;\n        color: ${({ theme }) => semanticColor(theme, 'FgTertiary', theme.color.text.disabled)};\n      `;\n    }\n  }};\n`;\n\nconst TableHeaderCell = forwardRef<\n  HTMLTableCellElement,\n  ComponentPropsWithoutRef<'th'> & TableHeaderCellProps & TableIconContainerProps\n>(function TableHeaderCell(\n  { sortable, sortDirection, children, align, trailing, onClick, ...elemProps },\n  ref,\n) {\n  let ariaSort: 'none' | 'ascending' | 'descending' | undefined;\n\n  if (sortable && sortDirection) {\n    ariaSort = sortDirection === 'asc' ? 'ascending' : 'descending';\n  } else if (sortable) {\n    ariaSort = 'none';\n  }\n\n  return (\n    <StyledTableHeaderCell\n      sortable={sortable}\n      aria-sort={ariaSort}\n      onClick={sortable ? undefined : onClick}\n      {...elemProps}\n      ref={ref}\n    >\n      <VerticalAlign $align={align}>\n        {sortable ? (\n          <SortButton type='button' onClick={onClick}>\n            {children}\n            <TableIconContainer aria-hidden='true' sortDirection={sortDirection}>\n              {sortDirection === 'asc' ? <CaretUpIcon /> : <CaretDownIcon />}\n            </TableIconContainer>\n          </SortButton>\n        ) : (\n          children\n        )}\n        {trailing}\n      </VerticalAlign>\n    </StyledTableHeaderCell>\n  );\n});\n\nexport default TableHeaderCell;\n","import styled, { css } from 'styled-components';\n\nimport { withAlpha } from 'design-system/lib/color';\nimport { isFocusedVisible, isHovered } from 'design-system/lib/pseudoClass';\nimport { semanticTokens } from 'design-system/lib/semanticColor';\nimport type PseudoClassProps from 'design-system/types/PseudoClassProps';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nexport interface TableRowProps extends PseudoClassProps {\n  disableHoverBackground?: boolean;\n}\n\nconst TableRow = styled.tr.attrs({\n  role: 'row',\n})<TableRowProps>`\n  display: table-row;\n\n  ${({ onClick }) =>\n    onClick != null &&\n    css`\n      cursor: pointer;\n    `}\n\n  ${({ disableHoverBackground, theme }) => {\n    if (disableHoverBackground) {\n      return null;\n    }\n    const tokens = semanticTokens(theme);\n    return css`\n      &${isHovered} {\n        background-color: ${\n          tokens\n            ? withAlpha(tokens.ActionAccent, tokens.Opacity25)\n            : theme.color.background.highlight\n        };\n        ${tokens ? `color: ${tokens.FgPrimary};` : ''}\n        transition-duration: ${TransitionDuration.Fast};\n      }\n    `;\n  }}\n\n  ${isFocusedVisible}\n`;\n\nexport default TableRow;\n","import { type ComponentPropsWithoutRef, forwardRef, type ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport { TableHeaderCell } from '@persona/design-system/components/Table';\nimport { HelperTooltip } from '@persona/design-system/components/Tooltip';\nimport { Spacing } from '@persona/design-tokens';\n\nconst StyledHelperTooltip = styled(HelperTooltip)`\n  height: 14px;\n  margin-left: ${Spacing[1]};\n`;\n\nexport interface TableTHProps extends ComponentPropsWithoutRef<typeof TableHeaderCell> {\n  canSort?: boolean;\n  isSorted?: boolean;\n  isDescending?: boolean;\n  isSticky?: boolean;\n  /**\n   * Display help icon and tooltip for column header\n   */\n  helpText?: ReactNode;\n  align?: 'left' | 'right';\n  size?: 'sm' | 'md';\n}\n\nconst TableTH = forwardRef<HTMLTableCellElement, TableTHProps>(function TableTH(\n  { children, canSort, isSorted, isSticky, isDescending, helpText, align, size, ...props },\n  ref,\n) {\n  return (\n    <TableHeaderCell\n      sortable={canSort}\n      sortDirection={canSort && isSorted ? (isDescending ? 'desc' : 'asc') : false}\n      ref={ref}\n      isSticky={isSticky}\n      align={align}\n      size={size}\n      trailing={helpText && <StyledHelperTooltip size='sm'>{helpText}</StyledHelperTooltip>}\n      {...props}\n    >\n      {/* We have to wrap the children to make it easier to use tooltips */}\n      <span className='th__text'>{children}</span>\n    </TableHeaderCell>\n  );\n});\n\nexport default TableTH;\n","import type { ComponentPropsWithoutRef, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { Paragraph } from 'design-system/components/Text';\nimport { withAlpha } from 'design-system/lib/color';\nimport {\n  type MaybeSemanticTheme,\n  semanticColor,\n  semanticOnly,\n  semanticTokens,\n} from 'design-system/lib/semanticColor';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport type { PersonaTheme } from 'design-system/theme';\nimport { BASE } from 'design-system/variables/spacing';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nimport TableRow from './TableRow';\nimport TableTH from './TableTH';\n\nexport interface TableCellProps {\n  breakWord?: boolean;\n  size?: 'sm' | 'md';\n}\n\nconst TableCell = styled.td.attrs({ role: 'cell' })<TableCellProps>`\n  display: table-cell;\n  vertical-align: middle;\n  /* Self-contained box model: don't depend on a consumer's global\n     border-box reset, so a fixed cell height includes its padding + border\n     and rows stay compact. */\n  box-sizing: border-box;\n\n  border-bottom: 1px solid ${({ theme }) => semanticColor(theme, 'BorderDivider', theme.color.border.primary)};\n  text-align: left;\n  padding: ${({ size }) => (size === 'sm' ? BASE : BASE * 1.5)}px;\n  color: ${({ theme }) => semanticColor(theme, 'FgPrimary', theme.color.text.primary)};\n  white-space: nowrap;\n  ${paragraphMixins.md};\n  line-height: 1;\n  ${({ breakWord }) =>\n    breakWord\n      ? `white-space: normal;\n         overflow-wrap: break-word;`\n      : ''}\n`;\n\nexport default TableCell;\n\nconst CellTitleContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n`;\n\nconst CellTitle = styled(Paragraph).attrs({ color: 'primary' })`\n  ${semanticOnly(() => 'color: inherit;')}\n  display: flex;\n  align-items: center;\n  gap: ${Spacing[2]};\n`;\n\nconst CellSubtitle = styled(Paragraph)`\n  ${semanticOnly((tokens) => `color: ${tokens.FgSecondary};`)}\n`;\n\nconst activeHighlight = (theme: PersonaTheme & MaybeSemanticTheme) =>\n  semanticColor(theme, 'ActionAccent', theme.color.background.highlight);\n\nconst hoverHighlight = (theme: PersonaTheme & MaybeSemanticTheme) => {\n  const tokens = semanticTokens(theme);\n  return tokens\n    ? withAlpha(tokens.ActionAccent, tokens.Opacity25)\n    : theme.color.background.highlight;\n};\n\ninterface TableCellTitleProps extends ComponentPropsWithoutRef<'div'> {\n  subtitle?: ReactNode;\n}\n\nexport const TableCellTitle = ({ children, subtitle, ...elemProps }: TableCellTitleProps) => {\n  return (\n    <CellTitleContainer {...elemProps}>\n      <CellTitle>{children}</CellTitle>\n      {subtitle && <CellSubtitle>{subtitle}</CellSubtitle>}\n    </CellTitleContainer>\n  );\n};\n\nexport const TableTD = styled(TableCell)<{ unclickable?: boolean }>`\n  white-space: normal;\n  overflow-wrap: break-word;\n  ${(props) =>\n    props.unclickable &&\n    css`\n      cursor: default;\n    `}\n`;\n\nexport const TableIconTD = styled(TableTD)`\n  text-align: right;\n  line-height: 0; /* To center icon; cannot use flex here */\n  padding: 0;\n  padding-left: ${Spacing[4]};\n  width: 36px;\n`;\n\nexport const TableActionTD = styled(TableTD)`\n  text-align: right;\n  padding: 0;\n  padding-right: ${Spacing[4]};\n  width: 48px;\n`;\n\nexport const StickyTD = styled(TableTD)<{\n  left?: number;\n  hasRightBorder?: boolean;\n}>`\n  position: sticky;\n  left: ${({ left = 0 }) => `${left}px`}; // Default to 0 if not specified\n  background-color: ${({ theme }) => semanticColor(theme, 'SurfacePrimary', theme.color.background.primary)};\n\n  ${({ hasRightBorder, theme }) =>\n    hasRightBorder &&\n    `border-right: 2px solid ${semanticColor(theme, 'BorderDivider', theme.color.border.primary)};`}\n  z-index: 2;\n`;\n\nexport const StickyTH = styled(TableTH)<{\n  left?: number;\n  hasRightBorder?: boolean;\n  size?: 'sm' | 'md';\n}>`\n  position: sticky;\n  left: ${({ left = 0 }) => `${left}px`}; // Default to 0 if not specified\n  z-index: 2;\n  max-width: 10%;\n  background-color: ${({ theme }) => semanticColor(theme, 'SurfaceSecondary', theme.color.background.secondary)};\n  ${({ hasRightBorder, theme }) =>\n    hasRightBorder &&\n    `border-right: 2px solid ${semanticColor(theme, 'BorderDivider', theme.color.border.primary)};`}\n`;\n\nexport const TableTR = styled(TableRow)<{ disableHoverBackground?: boolean; $isActive?: boolean }>`\n  ${({ disableHoverBackground }) =>\n    disableHoverBackground &&\n    css`\n      &:hover {\n        background-color: transparent !important;\n      }\n    `}\n\n  ${({ $isActive }) =>\n    $isActive &&\n    css`\n      background-color: ${({ theme }) => activeHighlight(theme)};\n      ${semanticOnly((tokens) => `color: ${tokens.FgPrimary};`)}\n      &:hover {\n        background-color: ${({ theme }) => activeHighlight(theme)};\n      }\n    `}\n\n  ${({ onClick, disableHoverBackground, $isActive }) =>\n    onClick != null &&\n    !disableHoverBackground &&\n    !$isActive &&\n    css`\n      cursor: pointer;\n      :hover {\n        background-color: ${({ theme }) => hoverHighlight(theme)};\n        ${semanticOnly((tokens) => `color: ${tokens.FgPrimary};`)}\n      }\n      transition-duration: ${TransitionDuration.Fast};\n    `}\n`;\n","import styled, { css } from 'styled-components';\n\ninterface TableHeadProps {\n  sticky?: boolean;\n}\n\nconst TableHead = styled.thead.attrs({ role: 'rowgroup' })<TableHeadProps>`\n  display: table-header-group;\n  ${({ sticky }) =>\n    sticky &&\n    css`\n      position: sticky;\n      top: 0;\n      z-index: 1;\n    `}\n`;\n\nexport default TableHead;\n","import styled from 'styled-components';\n\nconst TableBody = styled.tbody.attrs({ role: 'rowgroup' })`\n  display: table-row-group;\n`;\n\nexport default TableBody;\n","import type { FC, PropsWithChildren, ReactNode } from 'react';\nimport styled, { keyframes } from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { Spinner } from 'design-system/components/Spinner';\nimport Table, { TableBody, TableHead, TableRow } from 'design-system/components/Table';\nimport { semanticColor } from 'design-system/lib/semanticColor';\nimport { Z_INDICES } from 'design-system/lib/zindex';\nimport { fadeIn } from 'design-system/variables/keyframes';\n\n// `visible` rather than a narrower opt-out because CSS blockifies the other axis: any\n// `overflow-x` other than `visible`/`clip` forces `overflow-y` to compute to `auto` too, which\n// makes this element the scrollport that descendant sticky offsets resolve against.\nconst Container = styled.div<{ maxHeight?: number; $scrollsHorizontally: boolean }>`\n    position: relative;\n    z-index: 0;\n    overflow-x: ${({ $scrollsHorizontally }) => ($scrollsHorizontally ? 'auto' : 'visible')};\n    ${({ maxHeight }) => {\n      if (maxHeight != null) {\n        return `max-height: ${maxHeight}px;`;\n      }\n    }}\n  `;\n\nconst slideKeyframes = keyframes`\n    0% {\n      transform: translateX(-50%) scaleX(0);\n    }\n    50% {\n      transform: translateX(0) scaleX(1);\n    }\n    100% {\n      transform: translateX(50%) scaleX(0);\n    }\n  `;\n\nconst Loader = styled.div`\n    position: absolute;\n    z-index: ${Z_INDICES.loadingOverlays};\n    border-bottom: 3px solid ${({ theme }) => semanticColor(theme, 'BorderAccent', theme.color.primary.brand)};\n    width: 100%;\n  \n    animation: ${slideKeyframes} 3s infinite cubic-bezier(0.5, 0, 0.5, 1);\n  `;\n\nconst Overlay = styled.div`\n    position: absolute;\n    z-index: ${Z_INDICES.loadingOverlays};\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: ${({ theme }) => semanticColor(theme, 'SurfacePrimary', theme.color.primary.white)};\n    opacity: 50%;\n  `;\n\nconst SpinnerWrapper = styled.div`\n    width: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: ${Spacing[5]} 0;\n    animation: ${fadeIn} 1s;\n    animation-delay: 0.5s;\n    animation-fill-mode: backwards;\n  `;\n\nconst TableSpinner = styled(Spinner)`\n    svg {\n      width: 120px;\n      height: 120px;\n    }\n  \n    path {\n      stroke: ${({ theme }) => semanticColor(theme, 'FeedbackAccent3', Color.CorePurple500)};\n      stroke-width: 0.46;\n    }\n  `;\n\ninterface TableLayoutProps {\n  className?: string;\n  containerMaxHeight?: number;\n  /**\n   * When false, the container does not scroll horizontally and an ancestor is expected to.\n   * Sticky offsets inside the table then resolve against that ancestor's scrollport rather\n   * than against the container.\n   */\n  containerScrollsHorizontally?: boolean;\n  dataTest?: string;\n  headerTR: JSX.Element;\n  isEmpty?: boolean;\n  isLoading?: boolean;\n  nullState: ReactNode;\n  showHeader?: boolean;\n  size?: 'sm' | 'md';\n  stickyHeader?: boolean;\n}\n\nconst TableLayout: FC<PropsWithChildren<TableLayoutProps>> = ({\n  children,\n  className,\n  containerMaxHeight,\n  containerScrollsHorizontally = true,\n  dataTest,\n  headerTR,\n  isEmpty,\n  isLoading,\n  nullState,\n  showHeader,\n  size = 'md',\n  stickyHeader = false,\n}) => {\n  if (isEmpty && !showHeader) {\n    if (isLoading) {\n      return (\n        <SpinnerWrapper\n          role='status'\n          aria-live='polite'\n          aria-busy='true'\n          aria-label='Loading...'\n          data-loading-indicator='true'\n        >\n          <TableSpinner size='md' />\n        </SpinnerWrapper>\n      );\n    } else {\n      return (\n        <Container data-test={dataTest} $scrollsHorizontally={containerScrollsHorizontally}>\n          {nullState}\n        </Container>\n      );\n    }\n  }\n\n  return (\n    <Container\n      data-test={dataTest}\n      maxHeight={containerMaxHeight}\n      className={className}\n      $scrollsHorizontally={containerScrollsHorizontally}\n    >\n      {isLoading && <Loader data-test='table-layout__loader' />}\n      {isLoading && <Overlay />}\n\n      <Table size={size} aria-busy={isLoading || undefined}>\n        <TableHead sticky={stickyHeader}>\n          <TableRow>{headerTR}</TableRow>\n        </TableHead>\n        {!isEmpty && <TableBody>{children}</TableBody>}\n      </Table>\n\n      {isEmpty && nullState}\n    </Container>\n  );\n};\n\nexport default TableLayout;\n"],"mappings":"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"}

package/dist/Table.d.mts

@@ -1,2 +1,2 @@
-import { t as Table } from "./Table-CPvIH27_.mjs";
+import { t as Table } from "./Table-BefytM6w.mjs";
 export { Table, Table as default };

package/dist/{TableBody-CQYijW_3.d.mts → TableBody-BZ34-_wV.d.mts}

@@ -6,4 +6,4 @@ declare const TableBody: _$styled_components0.StyledComponent<"tbody", any, {
 }, "role">;
 //#endregion
 export { TableBody as t };
-//# sourceMappingURL=TableBody-CQYijW_3.d.mts.map
+//# sourceMappingURL=TableBody-BZ34-_wV.d.mts.map

package/dist/TableBody.d.mts

@@ -1,2 +1,2 @@
-import { t as TableBody } from "./TableBody-CQYijW_3.mjs";
+import { t as TableBody } from "./TableBody-BZ34-_wV.mjs";
 export { TableBody as default };

package/dist/{TableBox-CCfha6G2.mjs → TableBox-C7ZXamI7.mjs}

@@ -2,21 +2,21 @@ import { a as styled, o as useTheme, r as css } from "./styledComponentsInterop-
 import { semanticColor, semanticTokens } from "./lib/semanticColor.mjs";
 import { paragraphMixins } from "./mixins/text.mjs";
 import "./variables/transitions.mjs";
-import { a as Tooltip, t as TextUnderlineTooltip } from "./Tooltip-BsuYG0fw.mjs";
+import { a as Tooltip, t as TextUnderlineTooltip } from "./Tooltip-C0FuZS1C.mjs";
 import { withAlpha } from "./lib/color.mjs";
 import { findIndexByKey, moveItemByIndex } from "./lib/reorderItems.mjs";
 import { useScrollOverflow } from "./lib/useScrollOverflow.mjs";
 import { Z_INDICES } from "./lib/zindex.mjs";
 import { focusOutline } from "./mixins/focus.mjs";
 import "./variables/effect.mjs";
-import { n as Stack, t as HStack } from "./Stack-BqQndGI9.mjs";
-import { t as IconButton } from "./IconButton-CnJNIJVQ.mjs";
-import { t as FormGroupContext } from "./useFormGroup-DWVW7A9f.mjs";
-import { n as DropdownMenu_default } from "./DropdownMenu-C0WK4bM0.mjs";
-import { n as CaretButton, t as Combobox } from "./Combobox-BCYLeZDP.mjs";
-import { h as Table, m as TableHeaderCell, n as TableBody, p as TableRow, r as TableHead, s as TableCell } from "./Table-ELLvSvH4.mjs";
-import { s as Popover_default } from "./Popover-UiOUt5up.mjs";
-import { t as Container } from "./FormControl-BzMbbgr0.mjs";
+import { n as Stack, t as HStack } from "./Stack-ChsImaEY.mjs";
+import { t as IconButton } from "./IconButton-CqTPMhjV.mjs";
+import { t as FormGroupContext } from "./useFormGroup-C89-oI4w.mjs";
+import { n as DropdownMenu_default } from "./DropdownMenu-I5WDO-q5.mjs";
+import { n as CaretButton, t as Combobox } from "./Combobox-CNdpK8VG.mjs";
+import { h as Table, m as TableHeaderCell, n as TableBody, p as TableRow, r as TableHead, s as TableCell } from "./Table-DaxiIS96.mjs";
+import { s as Popover_default } from "./Popover-Dn3xmzSK.mjs";
+import { t as Container } from "./FormControl-CButLg9b.mjs";
 import { BorderRadius, Color, Spacing, Typography } from "@persona/design-tokens";
 import { Children, cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -1430,4 +1430,4 @@ TableBox.Cell = TableBoxCell;
 //#endregion
 export { TableBoxContext as n, TableBox as t };
 
-//# sourceMappingURL=TableBox-CCfha6G2.mjs.map
+//# sourceMappingURL=TableBox-C7ZXamI7.mjs.map