@nanoporetech-digital/components 3.5.0 → 3.6.0

package/dist/collection/components/table/table.cell.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.cell.js","sourceRoot":"","sources":["../../../src/components/table/table.cell.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Fragment, FunctionalComponent, h, VNode } from '@stencil/core';\nimport { CSSNAMESPACE } from './table.constants';\nimport {\n  classListToStr,\n  colDataModel,\n  fetchStores,\n  mergeCellProperties,\n} from './table.utils';\nimport type { TableTypes } from '../../interface';\n\n// TABLE CELL\n// (tbody > tr > td, tbody > tr > th)\n\n/**\n * Renders a cell using a custom renderer if set.\n * @param rowIndex - the current row index being rendered\n * @param colIndex - the current column index being rendered\n * @returns - a JSX node\n */\nexport function cellRender(rowIndex: number, colIndex: number): VNode {\n  const store = fetchStores();\n  const columns = store.config.state.columns;\n  const tpl = columns[colIndex]?.cellTemplate;\n  const model = colDataModel(rowIndex, colIndex);\n\n  if (!!model.cellModel && columns[colIndex].type === 'date') {\n    const d = new Date(model.cellModel);\n    if (d instanceof Date && !isNaN(d as any)) {\n      model.cellModel = !tpl\n        ? `${new Date(model.cellModel).toLocaleDateString()} ${new Date(\n            model.cellModel\n          ).toLocaleTimeString()}`\n        : d;\n    }\n  }\n\n  return tpl ? (\n    tpl(h as unknown as TableTypes.HFunc<VNode>, model)\n  ) : (\n    <Fragment>{model.cellModel?.toString()}</Fragment>\n  );\n}\n\nexport const baseCellClasses = (\n  colIndex: number,\n  toString: boolean = false\n) => {\n  const store = fetchStores();\n  const column = store.config.state.columns[colIndex];\n\n  const classes = {\n    [`${CSSNAMESPACE}__td`]: true,\n    [`${CSSNAMESPACE}__ordered`]: !!column.order,\n    [`${CSSNAMESPACE}__pin`]: !!column.pinned,\n    [`${CSSNAMESPACE}__pin--start`]: column.pinned === 'start',\n    [`${CSSNAMESPACE}__pin--end`]: column.pinned === 'end',\n  };\n\n  if (toString) return classListToStr(classes);\n  return classes;\n};\n\ntype TableCellProps = {\n  rowIndex: number;\n  colIndex: number;\n  nestedContent?: VNode;\n};\n\nexport const TableCell: FunctionalComponent<TableCellProps> = ({\n  rowIndex,\n  colIndex,\n  nestedContent,\n}) => {\n  const content = nestedContent || cellRender(rowIndex, colIndex);\n  if (!content) return <Fragment></Fragment>;\n\n  let CellType = 'td';\n  const store = fetchStores();\n  const column = store.config.state.columns[colIndex];\n  let props = mergeCellProperties(rowIndex, colIndex, {\n    class: baseCellClasses(colIndex),\n  });\n\n  if (column.rowHeader) {\n    props =\n      Number((props as TableTypes.CellProps).rowSpan) > 1\n        ? { ...props, scope: 'rowgroup' }\n        : { ...props, scope: 'row' };\n    CellType = 'th';\n  }\n\n  return (\n    <CellType\n      // role=\"gridcell\"\n      {...props}\n    >\n      <div class={`${CSSNAMESPACE}__cell-content`}>{content}</div>\n    </CellType>\n  );\n};\n"]}
+{"version":3,"file":"table.cell.js","sourceRoot":"","sources":["../../../src/components/table/table.cell.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Fragment, FunctionalComponent, h, VNode } from '@stencil/core';\nimport { CSSNAMESPACE } from './table.constants';\nimport {\n  classListToStr,\n  colDataModel,\n  fetchStores,\n  mergeCellProperties,\n} from './table.utils';\nimport type { NanoResizeObserveCustomEvent, TableTypes } from '../../interface';\n\n// TABLE CELL\n// (tbody > tr > td, tbody > tr > th)\n\n/**\n * Renders a cell using a custom renderer if set.\n * @param rowIndex - the current row index being rendered\n * @param colIndex - the current column index being rendered\n * @returns - a JSX node\n */\nexport function cellRender(rowIndex: number, colIndex: number): VNode {\n  const store = fetchStores();\n  const columns = store.config.state.columns;\n  const tpl = columns[colIndex]?.cellTemplate;\n  const model = colDataModel(rowIndex, colIndex);\n\n  if (!!model.cellModel && columns[colIndex].type === 'date') {\n    const d = new Date(model.cellModel);\n    if (d instanceof Date && !isNaN(d as any)) {\n      model.cellModel = !tpl\n        ? `${new Date(model.cellModel).toLocaleDateString()} ${new Date(\n            model.cellModel\n          ).toLocaleTimeString()}`\n        : d;\n    }\n  }\n\n  return tpl ? (\n    tpl(h as unknown as TableTypes.HFunc<VNode>, model)\n  ) : model.cellModel ? (\n    <Fragment>{model.cellModel?.toString()}</Fragment>\n  ) : (\n    ''\n  );\n}\n\nexport const baseCellClasses = (\n  colIndex: number,\n  toString: boolean = false\n) => {\n  const store = fetchStores();\n  const column = store.config.state.columns[colIndex];\n\n  const classes = {\n    [`${CSSNAMESPACE}__td`]: true,\n    [`${CSSNAMESPACE}__ordered`]: !!column.order,\n    [`${CSSNAMESPACE}__pin`]: !!column.pinned,\n    [`${CSSNAMESPACE}__pin--start`]: column.pinned === 'start',\n    [`${CSSNAMESPACE}__pin--end`]: column.pinned === 'end',\n  };\n\n  if (toString) return classListToStr(classes);\n  return classes;\n};\n\ntype TableCellProps = {\n  rowIndex: number;\n  colIndex: number;\n  nestedContent?: () => VNode;\n};\n\nexport const TableCell: FunctionalComponent<TableCellProps> = ({\n  rowIndex,\n  colIndex,\n  nestedContent,\n}) => {\n  const Content = () =>\n    nestedContent\n      ? nestedContent()\n      : cellRender(rowIndex, colIndex) || (\n          <span class=\"placeholder\">&nbsp;</span>\n        );\n\n  let CellType = 'td';\n  const store = fetchStores();\n  const column = store.config.state.columns[colIndex];\n  let props = mergeCellProperties(rowIndex, colIndex, {\n    class: baseCellClasses(colIndex),\n  });\n\n  if (column.rowHeader) {\n    props =\n      Number((props as TableTypes.CellProps).rowSpan) > 1\n        ? { ...props, scope: 'rowgroup' }\n        : { ...props, scope: 'row' };\n    CellType = 'th';\n  }\n\n  const ContentWrap = (props) => (\n    <div\n      {...props}\n      class={{\n        [`${CSSNAMESPACE}__cell-content`]: true,\n        [`${CSSNAMESPACE}__cell-content--wrap`]: !!column.wrap,\n      }}\n    >\n      <Content />\n    </div>\n  );\n\n  return (\n    <CellType\n      // role=\"gridcell\"\n      {...props}\n    >\n      {column.autoTooltip && !column.wrap ? (\n        <nano-resize-observe\n          notifyContentFit=\"x\"\n          onNanoResizeContentFitChange={(\n            e: NanoResizeObserveCustomEvent<{ x: boolean }>\n          ) =>\n            ((e.target.firstElementChild as HTMLNanoTooltipElement).disabled =\n              e.detail.x)\n          }\n        >\n          <nano-tooltip disabled hoist>\n            <ContentWrap />\n            <span slot=\"content\">\n              <Content />\n            </span>\n          </nano-tooltip>\n        </nano-resize-observe>\n      ) : (\n        <ContentWrap />\n      )}\n    </CellType>\n  );\n};\n"]}

package/dist/collection/components/table/table.css

@@ -55,7 +55,7 @@ nano-table {
   */
   display: block;
   width: 100%;
-  --max-col-width: clamp(200px, 30%, 20vw);
+  --max-col-width: clamp(200px, 500px, 50vw);
   --color: var(--nano-color-mediumgrey, #68767e);
   --font-size: 0.87rem;
   --cell-line-height: 1.5;
@@ -267,12 +267,18 @@ tfoot .nano-tbl__td .nano-tbl__cell-content, tfoot .nano-tbl__th .nano-tbl__cell
 .nano-tbl__cell-content--no-result {
   padding-block: 2rem;
 }
+.nano-tbl__cell-content--wrap {
+  white-space: normal;
+  overflow: visible;
+}
 .nano-tbl tbody {
   will-change: scroll-position;
-  visibility: visible;
+  opacity: 1;
+  transition: 0.1s ease opacity;
+  transform: translateZ(0);
 }
 .nano-tbl tbody.nano-tbl__inactive {
-  visibility: hidden;
+  opacity: 0;
 }
 .nano-tbl th[scope=row] {
   font-weight: 800;
@@ -280,12 +286,10 @@ tfoot .nano-tbl__td .nano-tbl__cell-content, tfoot .nano-tbl__th .nano-tbl__cell
 }
 .nano-tbl__pin {
   position: sticky;
-  z-index: 1;
 }
 .nano-tbl__pin--start {
   inset-inline: -1px auto;
   transition: max-width 0.25s ease;
-  z-index: 2;
 }
 .nano-tbl__pin--start::after {
   content: "";
@@ -306,7 +310,6 @@ tfoot .nano-tbl__td .nano-tbl__cell-content, tfoot .nano-tbl__th .nano-tbl__cell
   opacity: 1;
 }
 .nano-tbl__pin--end {
-  z-index: 2;
   /*
     I cannot think of a nice way to make stuck-end columns play nice on small screens :(
     Changing the width when stuck (as we do for stuck-start columns) causes the whole positioning to change.
@@ -332,56 +335,39 @@ tfoot .nano-tbl__td .nano-tbl__cell-content, tfoot .nano-tbl__th .nano-tbl__cell
   opacity: 0;
   z-index: -1;
 }
-.sm .nano-tbl__pinned--end .nano-tbl__pin--end {
-  z-index: 3;
-}
 .sm .nano-tbl__pinned--end .nano-tbl__pin--end::after {
   opacity: 1;
 }
 .nano-tbl__pin--top {
   inset-block: -1px auto;
-  z-index: 3;
 }
 .nano-tbl__pinned--top .nano-tbl__pin--top {
   z-index: 4 !important;
 }
 .nano-tbl__pin--bottom {
   inset-block: auto -1px;
-  z-index: 3;
 }
 .nano-tbl__pinned--bottom .nano-tbl__pin--bottom {
   z-index: 5 !important;
 }
-.nano-tbl__pin--top.nano-tbl__pin--start {
-  z-index: 4;
-}
 .nano-tbl__pinned--start .nano-tbl__pin--top.nano-tbl__pin--start {
   z-index: 5 !important;
 }
 .nano-tbl__pinned--top.nano-tbl__pinned--start .nano-tbl__pin--top.nano-tbl__pin--start {
   z-index: 6 !important;
 }
-.nano-tbl__pin--top.nano-tbl__pin--end {
-  z-index: 4;
-}
 .nano-tbl__pinned--end .nano-tbl__pin--top.nano-tbl__pin--end {
   z-index: 5 !important;
 }
 .nano-tbl__pinned--top.nano-tbl__pinned--end .nano-tbl__pin--top.nano-tbl__pin--end {
   z-index: 6 !important;
 }
-.nano-tbl__pin--bottom.nano-tbl__pin--start {
-  z-index: 4;
-}
 .nano-tbl__pinned--start .nano-tbl__pin--bottom.nano-tbl__pin--start {
   z-index: 5 !important;
 }
 .nano-tbl__pinned--bottom.nano-tbl__pinned--start .nano-tbl__pin--bottom.nano-tbl__pin--start {
   z-index: 6 !important;
 }
-.nano-tbl__pin--bottom.nano-tbl__pin--end {
-  z-index: 4;
-}
 .nano-tbl__pinned--end .nano-tbl__pin--bottom.nano-tbl__pin--end {
   z-index: 5 !important;
 }