@dbcdk/react-components 0.0.169 → 0.0.170

package/dist/components/table/Table.module.css

@@ -0,0 +1,704 @@
+.fillViewportRoot {
+  display: flex;
+  position: relative;
+  block-size: 100%;
+  min-block-size: 0;
+  min-inline-size: 0;
+  overflow: hidden;
+}
+
+.inlineRoot {
+  display: flex;
+  flex-direction: column;
+  min-block-size: 0;
+  min-inline-size: 0;
+  inline-size: 100%;
+  max-inline-size: 100%;
+  position: relative;
+}
+
+.toolbarSlot {
+  margin-bottom: 12px;
+  flex: 0 0 auto;
+}
+
+.tableViewport {
+  flex: 1 1 auto;
+  min-block-size: 0;
+  min-inline-size: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.paginationSlot {
+  flex: 0 0 auto;
+  overflow: visible;
+  margin-top: auto;
+}
+
+.paginationSlot:not(.paginationSlotTop) {
+  padding-top: var(--spacing-sm);
+}
+
+.paginationSlot.paginationSlotTop {
+  padding-bottom: var(--spacing-sm);
+}
+
+.tableRoot {
+  --table-component-header-bg: var(--table-header-bg);
+  --table-component-header-fg: var(--table-header-fg);
+  --table-component-header-font-size: var(--font-size-table-header);
+  --table-component-header-line-height: var(--line-height-table-header);
+  --table-component-header-font-weight: var(--font-weight-table-header);
+  --table-component-row-bg: var(--table-row-bg);
+  --table-component-row-bg-hover: var(--color-bg-hover-subtle);
+  --table-component-row-bg-selected: var(--table-row-bg-selected);
+  --table-component-row-bg-selected-hover: var(--table-row-bg-selected-hover);
+  --table-component-cell-fg: var(--table-cell-fg);
+  --table-component-cell-border: var(--table-border-subtle);
+  --table-component-divider: var(--table-divider);
+
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-block-size: 0;
+  min-inline-size: 0;
+  inline-size: 100%;
+  max-inline-size: 100%;
+}
+
+.primary {
+}
+
+.embedded .cell {
+  border-block-end: none;
+}
+
+.embedded {
+  --table-component-header-bg: transparent;
+  --table-component-header-fg: var(--color-fg-subtle);
+  --table-component-header-font-weight: var(--font-weight-default);
+  --table-component-row-bg: transparent;
+  --table-component-row-bg-hover: var(--color-bg-contextual-subtle);
+  --table-component-row-bg-selected: color-mix(in srgb, var(--color-bg-selected) 55%, transparent);
+  --table-component-row-bg-selected-hover: color-mix(
+    in srgb,
+    var(--color-bg-selected-hover) 60%,
+    transparent
+  );
+  --table-component-cell-border: color-mix(in srgb, var(--table-border-subtle) 65%, transparent);
+  --table-component-divider: color-mix(in srgb, var(--table-divider) 75%, transparent);
+}
+
+.measuringLayout {
+  visibility: hidden;
+}
+
+.tableScroll {
+  flex: 1 1 auto;
+  min-block-size: 0;
+  min-inline-size: 0;
+  overflow: auto;
+  background: var(--table-component-row-bg);
+  -webkit-overflow-scrolling: touch;
+}
+
+.tableElement {
+  inline-size: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  table-layout: fixed;
+  font-family: var(--font-family);
+  font-size: var(--font-size-sm);
+  color: var(--table-component-cell-fg);
+  background: var(--table-component-row-bg);
+}
+
+.header {
+  position: relative;
+  z-index: 10;
+}
+
+.headerRow,
+.row {
+  position: relative;
+}
+
+.emptyStateSlot {
+  display: grid;
+  place-items: center;
+  min-block-size: 100%;
+  padding: var(--spacing-lg);
+}
+
+.body {
+  min-block-size: 0;
+}
+
+[data-show-header='true'] .body .row:first-child .cell {
+  border-block-start: var(--spacing-xs) solid var(--table-component-row-bg);
+}
+
+.embedded [data-show-header='true'] .body .row:first-child .cell {
+  border-block-start: none;
+}
+
+.headerCell,
+.cell {
+  position: relative;
+  box-sizing: border-box;
+  min-width: 0;
+  vertical-align: top;
+  text-align: start;
+}
+
+.headerCell {
+  vertical-align: middle;
+  background-color: var(--table-component-header-bg);
+  padding-block: var(--spacing-xxs);
+  padding-inline: var(--spacing-sm);
+  font-size: var(--table-component-header-font-size);
+  line-height: var(--table-component-header-line-height);
+  font-weight: var(--table-component-header-font-weight);
+  color: var(--table-component-header-fg);
+  white-space: nowrap;
+}
+
+[data-sticky-header='true'] .headerCell {
+  position: sticky;
+  top: var(--table-sticky-top);
+  z-index: 6;
+}
+
+.cell {
+  padding-block: 6px;
+  padding-inline: var(--spacing-sm);
+  border-block-end: 1px solid var(--table-component-cell-border);
+  background: var(--table-component-row-bg);
+  overflow: hidden;
+  line-height: 20px;
+  height: 40px;
+}
+
+.md .headerCell {
+  padding-block: var(--spacing-xs);
+  padding-inline: var(--spacing-sm);
+}
+
+.md .cell {
+  padding-block: var(--spacing-xs);
+  padding-inline: var(--spacing-sm);
+}
+
+.sm .headerCell {
+  padding-block: var(--spacing-xxs);
+  padding-inline: var(--spacing-sm);
+}
+
+.sm .cell {
+  padding-block: var(--spacing-xxs);
+  padding-inline: var(--spacing-sm);
+  font-size: var(--font-size-xs);
+  line-height: 20px;
+  height: 32px;
+}
+
+.sm .contextMenuTrigger {
+  min-block-size: 0;
+  block-size: 100%;
+}
+
+.cell[data-vertical-align='top'] {
+  vertical-align: top;
+}
+
+.cell[data-vertical-align='middle'] {
+  vertical-align: middle;
+}
+
+.cell[data-vertical-align='bottom'] {
+  vertical-align: bottom;
+}
+
+.headerCell[data-align='right'],
+.cell[data-align='right'] {
+  text-align: end;
+  font-variant-numeric: tabular-nums;
+}
+
+.headerCell[data-align='center'],
+.cell[data-align='center'] {
+  text-align: center;
+}
+
+.headerCell.selectionCell,
+.cell.selectionCell {
+  padding-inline: calc(var(--spacing-xxs) + 2px);
+  cursor: pointer;
+  overflow: visible;
+  line-height: 0;
+}
+
+.headerCell.selectionCell {
+  padding-block: var(--spacing-xxs);
+  vertical-align: middle;
+}
+
+.cell.selectionCell {
+  vertical-align: top;
+  padding-block: var(--spacing-xxs);
+}
+
+.headerCell:hover [data-resizer='true']::after {
+  opacity: 1;
+}
+
+.selectionHitArea {
+  display: inline-flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  min-block-size: 0;
+  padding: 0;
+  line-height: 0;
+}
+
+.selectionControlWrap {
+  display: inline-flex;
+  align-items: flex-start;
+  line-height: 0;
+}
+
+.selectionControlWrap span {
+  gap: 0;
+}
+
+.selectionControlWrap input[type='radio'] + span {
+  width: 18px;
+  height: 18px;
+  border-width: 1px;
+  border-color: color-mix(in srgb, var(--color-fg-default) 28%, transparent);
+}
+
+.selectionControlWrap input[type='radio'] + span > span {
+  width: 8px;
+  height: 8px;
+}
+
+.clickableRow {
+  cursor: pointer;
+}
+
+.row:hover > .cell {
+  background-color: var(--table-component-row-bg-hover);
+}
+
+.selectedRow > .cell {
+  background-color: var(--table-component-row-bg-selected);
+}
+
+.selectedRow:hover > .cell {
+  background-color: var(--table-component-row-bg-selected-hover);
+}
+
+.row:focus-within > .cell {
+  box-shadow:
+    inset 0 2px 0 var(--color-brand),
+    inset 0 -2px 0 var(--color-brand);
+}
+
+.row:focus-within > .cell:first-child {
+  box-shadow:
+    inset 2px 0 0 var(--color-brand),
+    inset 0 2px 0 var(--color-brand),
+    inset 0 -2px 0 var(--color-brand);
+}
+
+.row:focus-within > .cell:last-child {
+  box-shadow:
+    inset -2px 0 0 var(--color-brand),
+    inset 0 2px 0 var(--color-brand),
+    inset 0 -2px 0 var(--color-brand);
+}
+
+.nowrap {
+  white-space: nowrap;
+}
+
+.allowWrap {
+  white-space: normal;
+  overflow-wrap: break-word;
+  word-break: normal;
+}
+
+.allowOverflow {
+  overflow: visible;
+}
+
+.allowOverflow .cellContent,
+.allowOverflow .cellValueEllipsis,
+.allowOverflow .cellValueNoEllipsis {
+  overflow: visible;
+  text-overflow: clip;
+}
+
+.thInner {
+  display: flex;
+  align-items: center;
+  inline-size: 100%;
+  min-width: 0;
+}
+
+.thInnerRight {
+  justify-content: flex-end;
+}
+
+.thInnerCenter {
+  justify-content: center;
+}
+
+.thMain {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.thMainRight {
+  justify-content: flex-end;
+}
+
+.thMainCenter {
+  justify-content: center;
+}
+
+.thButton {
+  all: unset;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2xs);
+  min-width: 0;
+  max-inline-size: 100%;
+  cursor: pointer;
+  user-select: none;
+  border-radius: var(--border-radius-default);
+  padding-block: 2px;
+  padding-inline: 2px;
+  justify-content: flex-start;
+  transition: color var(--transition-fast) var(--ease-standard);
+}
+
+.thButton:hover {
+  color: var(--color-fg-default);
+}
+
+.thButton:focus-visible {
+  outline: none;
+  color: var(--color-fg-default);
+  box-shadow: inset 0 0 0 1px var(--color-border-selected);
+}
+
+.thButtonRight {
+  justify-content: flex-end;
+}
+
+.thButtonCenter {
+  justify-content: center;
+}
+
+.thLabel {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 0 1 auto;
+  min-width: 0;
+}
+
+.thLabelRight {
+  text-align: right;
+  width: 100%;
+}
+
+.thLabelCenter {
+  text-align: center;
+  width: 100%;
+}
+
+.thOverlayExtras {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-end: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  pointer-events: none;
+  z-index: 7;
+}
+
+.thOverlayExtras > * {
+  pointer-events: auto;
+}
+
+.sortIndicator {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  color: var(--color-disabled-fg);
+  opacity: 1;
+}
+
+.sortIndicator svg {
+  inline-size: var(--icon-size-sm);
+  block-size: var(--icon-size-sm);
+}
+
+.descending {
+  transform: rotate(180deg);
+}
+
+.inActiveSort {
+  opacity: 0.8;
+}
+
+.activeSort {
+  color: var(--color-disabled-fg);
+}
+
+.cellContent {
+  display: flex;
+  inline-size: 100%;
+  min-width: 0;
+  max-inline-size: 100%;
+}
+
+/* horizontal alignment inside content wrapper */
+.cellContent[data-align='left'] {
+  justify-content: flex-start;
+  text-align: left;
+}
+
+.cellContent[data-align='center'] {
+  justify-content: center;
+  text-align: center;
+}
+
+.cellContent[data-align='right'] {
+  justify-content: flex-end;
+  text-align: right;
+}
+
+/* vertical alignment inside content wrapper */
+.cellContent[data-vertical-align='top'] {
+  align-items: flex-start;
+}
+
+.cellContent[data-vertical-align='middle'] {
+  align-items: center;
+}
+
+.cellContent[data-vertical-align='bottom'] {
+  align-items: flex-end;
+}
+
+.cellContent > * {
+  min-width: 0;
+  max-inline-size: 100%;
+}
+
+/* keep truncation + text alignment working */
+.cellValueEllipsis {
+  display: block;
+  inline-size: 100%;
+  min-width: 0;
+  max-inline-size: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.cellValueNoEllipsis {
+  display: block;
+  inline-size: 100%;
+  min-width: 0;
+  max-inline-size: 100%;
+}
+
+.cellContent[data-align='left'] .cellValueEllipsis,
+.cellContent[data-align='left'] .cellValueNoEllipsis {
+  text-align: left;
+}
+
+.cellContent[data-align='center'] .cellValueEllipsis,
+.cellContent[data-align='center'] .cellValueNoEllipsis {
+  text-align: center;
+}
+
+.cellContent[data-align='right'] .cellValueEllipsis,
+.cellContent[data-align='right'] .cellValueNoEllipsis {
+  text-align: right;
+}
+
+.allowWrap .cellContent,
+.allowWrap .cellValueEllipsis {
+  white-space: normal;
+  overflow-wrap: break-word;
+  word-break: normal;
+  overflow: visible;
+  text-overflow: clip;
+}
+
+.row:focus-within > .cell:not(.selectionCell) .cellContent,
+.row:focus-within > .cell:not(.selectionCell) .cellValueEllipsis {
+  white-space: normal;
+  overflow-wrap: break-word;
+  word-break: normal;
+  overflow: visible;
+  text-overflow: clip;
+}
+
+.contextMenuTrigger {
+  color: var(--color-fg-subtle);
+  min-inline-size: calc(var(--component-size-md) + 4px);
+  min-block-size: calc(var(--component-size-md) + 4px);
+  border-radius: 999px;
+  background-color: transparent;
+  position: relative;
+  z-index: 1;
+  overflow: hidden;
+}
+
+.contextMenuOverlay {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-end: var(--spacing-2xs);
+  transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  inline-size: max-content;
+  block-size: auto;
+  min-inline-size: 0;
+  padding: 0;
+  border-radius: var(--border-radius-rounded);
+  background-color: transparent;
+  z-index: 2;
+}
+
+.contextMenuHoverOnly .contextMenuOverlay {
+  opacity: 0;
+  pointer-events: none;
+}
+
+/*
+ * Popover's own wrapper divs (.container/.triggerSlot) default to
+ * align-items: stretch so a trigger can fill a fixed-height form row.
+ * That stretches our small "sm" trigger button to the full row height
+ * instead of letting it size itself, so it's overridden here rather
+ * than in Popover.module.css to avoid affecting other Popover consumers.
+ * (.contextMenuOverlay itself has no align-items to override: its only
+ * child, Popover's .container, always sets an explicit height: 100%.)
+ */
+.contextMenuOverlay > div,
+.contextMenuOverlay > div > div {
+  align-items: center;
+  background-color: transparent;
+  overflow: visible;
+  border-radius: 999px;
+}
+
+.actionCell {
+  overflow: visible;
+  position: relative;
+}
+
+.cellContentWithActions {
+  padding-inline-end: calc(var(--component-size-md) + 4px + var(--spacing-sm));
+}
+
+.contextMenuTrigger:hover,
+.contextMenuTrigger:focus-visible {
+  background-color: var(--table-component-row-bg-hover);
+  z-index: 2;
+}
+
+.contextMenuItemLabel {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: var(--spacing-xs);
+  min-width: 0;
+}
+
+.contextMenuItemText {
+  min-width: 0;
+}
+
+.contextMenuHoverOnly:hover .contextMenuOverlay {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.severityTable {
+  --row-rail-width: 2px;
+  --row-rail-inset-block: 1px;
+  --row-rail-radius: 0;
+}
+
+.severityTable .row.severity > .cell:first-child {
+  position: relative;
+}
+
+.severityTable .row.severity > .cell:first-child::before {
+  content: '';
+  position: absolute;
+  inset-inline-start: 0;
+  inset-block-start: var(--row-rail-inset-block);
+  inset-block-end: var(--row-rail-inset-block);
+  inline-size: var(--row-rail-width);
+  background-color: var(--row-severity-color);
+  border-radius: var(--row-rail-radius);
+  z-index: 2;
+  pointer-events: none;
+  opacity: 0.95;
+}
+
+.severityTable .row.severity:hover > .cell:first-child::before,
+.severityTable .row.severity:focus-within > .cell:first-child::before {
+  opacity: 1;
+  z-index: 8;
+}
+
+.severityTable .row.severityFailed > .cell:first-child::before {
+  box-shadow: 1px 0 0 color-mix(in srgb, var(--row-severity-color) 20%, transparent);
+}
+
+.sm .severityTable {
+  --row-rail-width: 4px;
+  --row-rail-inset-block: 1px;
+}
+
+.dividerLeft,
+.dividerRight {
+  position: relative;
+}
+
+.dividerLeft::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 8px;
+  bottom: 8px;
+  width: 1px;
+  background: var(--table-component-divider);
+}
+
+.dividerRight::after {
+  content: '';
+  position: absolute;
+  right: 0;
+  top: 8px;
+  bottom: 8px;
+  width: 1px;
+  background: var(--table-component-divider);
+}

package/dist/components/table/Table.types.cjs

@@ -0,0 +1,2 @@
+'use strict';
+