@jetbrains/ring-ui-built 8.0.0-beta.3 → 8.0.0-beta.5

package/components/internal/table-header.js

@@ -0,0 +1,685 @@
+import { c } from 'react/compiler-runtime';
+import { use, useState, useRef } from 'react';
+import classNames from 'classnames';
+import arrowDownIcon from '@jetbrains/icons/arrow-12px-down';
+import arrowUpIcon from '@jetbrains/icons/arrow-12px-up';
+import settingsIcon from '@jetbrains/icons/settings-12px';
+import trashIcon from '@jetbrains/icons/trash-12px';
+import sortableIcon from '@jetbrains/icons/unsorted-12px';
+import { TablePropsContext } from '../table/table-const.js';
+import Icon from '../icon/icon.js';
+import { isWithinInteractiveElement } from '../global/is-within-interactive-element.js';
+import { ReorderHandle } from './reorder-handle.js';
+import { ReorderAnimationContext } from './reorder-animation-context.js';
+import { useReorderLayoutContextValue, ReorderLayoutContext } from './reorder-layout-context.js';
+import { useReorderItemLayout } from '../table/reorder-item-layout.js';
+import { s as styles } from '../_helpers/table.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import 'util-deprecate';
+import '../icon/icon.constants.js';
+import '../_helpers/icon-svg.js';
+import '../global/memoize.js';
+import '@jetbrains/icons/drag-12px';
+import '../global/compose-refs.js';
+import 'memoize-one';
+import '../global/parse-css-duration.js';
+import '../global/schedule-with-cleanup.js';
+
+function TableHeader() {
+  const $ = c(30);
+  if ($[0] !== "b3c0ce09616b10368937eafd2419f39baff21b41a15b2e7de8de6c88d493b96d") {
+    for (let $i = 0; $i < 30; $i += 1) {
+      $[$i] = Symbol.for("react.memo_cache_sentinel");
+    }
+    $[0] = "b3c0ce09616b10368937eafd2419f39baff21b41a15b2e7de8de6c88d493b96d";
+  }
+  const {
+    columns,
+    noHeader,
+    stickyHeader,
+    columnEditing,
+    onColumnEditingRequest,
+    theadClassName,
+    theadTrClassName
+  } = use(TablePropsContext);
+  const [localColumnEditing, setLocalColumnEditing] = useState(false);
+  const effectiveColumnEditing = columnEditing !== null && columnEditing !== void 0 ? columnEditing : localColumnEditing;
+  let t0;
+  if ($[1] !== columnEditing || $[2] !== localColumnEditing || $[3] !== onColumnEditingRequest) {
+    t0 = source => {
+      let newColumnEditing;
+      if (columnEditing == null) {
+        newColumnEditing = !localColumnEditing;
+        setLocalColumnEditing(newColumnEditing);
+      } else {
+        newColumnEditing = !columnEditing;
+      }
+      onColumnEditingRequest?.(newColumnEditing, source);
+    };
+    $[1] = columnEditing;
+    $[2] = localColumnEditing;
+    $[3] = onColumnEditingRequest;
+    $[4] = t0;
+  } else {
+    t0 = $[4];
+  }
+  const toggleColumnEditing = t0;
+  let t1;
+  if ($[5] !== toggleColumnEditing) {
+    t1 = e => {
+      if (window.matchMedia("(hover: none)").matches && !isWithinInteractiveElement(e.target)) {
+        toggleColumnEditing("header");
+      }
+    };
+    $[5] = toggleColumnEditing;
+    $[6] = t1;
+  } else {
+    t1 = $[6];
+  }
+  const handleTheadClick = t1;
+  let t2;
+  if ($[7] !== toggleColumnEditing) {
+    t2 = () => {
+      toggleColumnEditing("edit-button");
+    };
+    $[7] = toggleColumnEditing;
+    $[8] = t2;
+  } else {
+    t2 = $[8];
+  }
+  const handleEditColumnsButtonClick = t2;
+  const reorderContextValue = useReorderLayoutContextValue();
+  if (noHeader) {
+    return null;
+  }
+  const t3 = effectiveColumnEditing && styles.theadColumnEditing;
+  const t4 = stickyHeader && styles.stickyHeader;
+  let t5;
+  if ($[9] !== t3 || $[10] !== t4 || $[11] !== theadClassName) {
+    t5 = classNames(theadClassName, t3, t4);
+    $[9] = t3;
+    $[10] = t4;
+    $[11] = theadClassName;
+    $[12] = t5;
+  } else {
+    t5 = $[12];
+  }
+  let t6;
+  if ($[13] !== columns || $[14] !== effectiveColumnEditing || $[15] !== handleEditColumnsButtonClick) {
+    let t7;
+    if ($[17] !== effectiveColumnEditing || $[18] !== handleEditColumnsButtonClick) {
+      t7 = (column, columnIndex) => /*#__PURE__*/jsx(TableHeaderCell, {
+        columnIndex: columnIndex,
+        columnEditing: effectiveColumnEditing,
+        handleEditColumnsButtonClick: handleEditColumnsButtonClick
+      }, column.key);
+      $[17] = effectiveColumnEditing;
+      $[18] = handleEditColumnsButtonClick;
+      $[19] = t7;
+    } else {
+      t7 = $[19];
+    }
+    t6 = columns.map(t7);
+    $[13] = columns;
+    $[14] = effectiveColumnEditing;
+    $[15] = handleEditColumnsButtonClick;
+    $[16] = t6;
+  } else {
+    t6 = $[16];
+  }
+  let t7;
+  if ($[20] !== reorderContextValue || $[21] !== t6) {
+    t7 = /*#__PURE__*/jsx(ReorderLayoutContext, {
+      value: reorderContextValue,
+      children: t6
+    });
+    $[20] = reorderContextValue;
+    $[21] = t6;
+    $[22] = t7;
+  } else {
+    t7 = $[22];
+  }
+  let t8;
+  if ($[23] !== t7 || $[24] !== theadTrClassName) {
+    t8 = /*#__PURE__*/jsx("tr", {
+      className: theadTrClassName,
+      children: t7
+    });
+    $[23] = t7;
+    $[24] = theadTrClassName;
+    $[25] = t8;
+  } else {
+    t8 = $[25];
+  }
+  let t9;
+  if ($[26] !== handleTheadClick || $[27] !== t5 || $[28] !== t8) {
+    t9 = /*#__PURE__*/jsx("thead", {
+      className: t5,
+      onClick: handleTheadClick,
+      children: t8
+    });
+    $[26] = handleTheadClick;
+    $[27] = t5;
+    $[28] = t8;
+    $[29] = t9;
+  } else {
+    t9 = $[29];
+  }
+  return t9;
+}
+function TableHeaderCell(t0) {
+  const $ = c(43);
+  if ($[0] !== "b3c0ce09616b10368937eafd2419f39baff21b41a15b2e7de8de6c88d493b96d") {
+    for (let $i = 0; $i < 43; $i += 1) {
+      $[$i] = Symbol.for("react.memo_cache_sentinel");
+    }
+    $[0] = "b3c0ce09616b10368937eafd2419f39baff21b41a15b2e7de8de6c88d493b96d";
+  }
+  const {
+    columnIndex,
+    columnEditing,
+    handleEditColumnsButtonClick
+  } = t0;
+  const ref = useRef(null);
+  const {
+    columns,
+    columnEditButton
+  } = use(TablePropsContext);
+  const {
+    key,
+    name,
+    renderHeader,
+    sortOrder,
+    deletable,
+    canReorder,
+    thClassName
+  } = columns[columnIndex];
+  const {
+    reorderAnimation
+  } = use(ReorderAnimationContext);
+  let t1;
+  if ($[1] !== key || $[2] !== name || $[3] !== renderHeader) {
+    t1 = renderHeader ? renderHeader() : name !== null && name !== void 0 ? name : String(key);
+    $[1] = key;
+    $[2] = name;
+    $[3] = renderHeader;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  const children = t1;
+  let t2;
+  if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = () => {
+      var _r$left, _r$right;
+      const r = ref.current?.getBoundingClientRect();
+      return {
+        start: (_r$left = r?.left) !== null && _r$left !== void 0 ? _r$left : 0,
+        end: (_r$right = r?.right) !== null && _r$right !== void 0 ? _r$right : 0
+      };
+    };
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  let t3;
+  if ($[6] !== columnIndex) {
+    t3 = {
+      index: columnIndex,
+      getBounds: t2
+    };
+    $[6] = columnIndex;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  useReorderItemLayout(t3);
+  const t4 = reorderAnimation?.direction === "columns" && reorderAnimation.index === columnIndex && reorderAnimation.className;
+  let t5;
+  if ($[8] !== t4 || $[9] !== thClassName) {
+    t5 = classNames(styles.headerCell, t4, thClassName);
+    $[8] = t4;
+    $[9] = thClassName;
+    $[10] = t5;
+  } else {
+    t5 = $[10];
+  }
+  let t6;
+  if ($[11] !== canReorder || $[12] !== columnIndex) {
+    t6 = canReorder && /*#__PURE__*/jsx(ColumnReorderHandle, {
+      columnIndex: columnIndex
+    });
+    $[11] = canReorder;
+    $[12] = columnIndex;
+    $[13] = t6;
+  } else {
+    t6 = $[13];
+  }
+  let t7;
+  if ($[14] !== children || $[15] !== columnIndex || $[16] !== sortOrder) {
+    t7 = sortOrder ? /*#__PURE__*/jsx(SortButton, {
+      columnIndex: columnIndex,
+      "aria-description": `Sort order: ${sortOrder}`,
+      children: children
+    }) : children;
+    $[14] = children;
+    $[15] = columnIndex;
+    $[16] = sortOrder;
+    $[17] = t7;
+  } else {
+    t7 = $[17];
+  }
+  let t8;
+  if ($[18] !== canReorder) {
+    t8 = canReorder && /*#__PURE__*/jsx(ColumnReorderHandleMirror, {});
+    $[18] = canReorder;
+    $[19] = t8;
+  } else {
+    t8 = $[19];
+  }
+  let t9;
+  if ($[20] !== t6 || $[21] !== t7 || $[22] !== t8) {
+    t9 = /*#__PURE__*/jsxs("div", {
+      className: styles.sortAndHeader,
+      children: [t6, t7, t8]
+    });
+    $[20] = t6;
+    $[21] = t7;
+    $[22] = t8;
+    $[23] = t9;
+  } else {
+    t9 = $[23];
+  }
+  let t10;
+  if ($[24] !== columnIndex || $[25] !== deletable) {
+    t10 = deletable && /*#__PURE__*/jsx(DeleteColumnButton, {
+      columnIndex: columnIndex
+    });
+    $[24] = columnIndex;
+    $[25] = deletable;
+    $[26] = t10;
+  } else {
+    t10 = $[26];
+  }
+  let t11;
+  if ($[27] !== columnEditButton || $[28] !== columnEditing || $[29] !== columnIndex || $[30] !== columns.length || $[31] !== handleEditColumnsButtonClick) {
+    t11 = columnIndex === columns.length - 1 && columnEditButton && /*#__PURE__*/jsx(EditColumnsButton, {
+      columnEditing: columnEditing,
+      onClick: handleEditColumnsButtonClick
+    });
+    $[27] = columnEditButton;
+    $[28] = columnEditing;
+    $[29] = columnIndex;
+    $[30] = columns.length;
+    $[31] = handleEditColumnsButtonClick;
+    $[32] = t11;
+  } else {
+    t11 = $[32];
+  }
+  let t12;
+  if ($[33] !== t10 || $[34] !== t11) {
+    t12 = /*#__PURE__*/jsxs("div", {
+      className: styles.rightButtons,
+      children: [t10, t11]
+    });
+    $[33] = t10;
+    $[34] = t11;
+    $[35] = t12;
+  } else {
+    t12 = $[35];
+  }
+  let t13;
+  if ($[36] !== t12 || $[37] !== t9) {
+    t13 = /*#__PURE__*/jsxs("div", {
+      className: styles.headerCellInnerWrapper,
+      children: [t9, t12]
+    });
+    $[36] = t12;
+    $[37] = t9;
+    $[38] = t13;
+  } else {
+    t13 = $[38];
+  }
+  let t14;
+  if ($[39] !== sortOrder || $[40] !== t13 || $[41] !== t5) {
+    t14 = /*#__PURE__*/jsx("th", {
+      ref: ref,
+      className: t5,
+      scope: "col",
+      "aria-sort": sortOrder,
+      children: t13
+    });
+    $[39] = sortOrder;
+    $[40] = t13;
+    $[41] = t5;
+    $[42] = t14;
+  } else {
+    t14 = $[42];
+  }
+  return t14;
+}
+function SortButton(t0) {
+  const $ = c(22);
+  if ($[0] !== "b3c0ce09616b10368937eafd2419f39baff21b41a15b2e7de8de6c88d493b96d") {
+    for (let $i = 0; $i < 22; $i += 1) {
+      $[$i] = Symbol.for("react.memo_cache_sentinel");
+    }
+    $[0] = "b3c0ce09616b10368937eafd2419f39baff21b41a15b2e7de8de6c88d493b96d";
+  }
+  let children;
+  let className;
+  let columnIndex;
+  let onClick;
+  let restProps;
+  if ($[1] !== t0) {
+    ({
+      columnIndex,
+      className,
+      children,
+      onClick,
+      ...restProps
+    } = t0);
+    $[1] = t0;
+    $[2] = children;
+    $[3] = className;
+    $[4] = columnIndex;
+    $[5] = onClick;
+    $[6] = restProps;
+  } else {
+    children = $[2];
+    className = $[3];
+    columnIndex = $[4];
+    onClick = $[5];
+    restProps = $[6];
+  }
+  const tableProps = use(TablePropsContext);
+  const column = tableProps?.columns[columnIndex];
+  const sortOrder = column?.sortOrder;
+  const glyph = sortOrder === "none" ? sortableIcon : sortOrder === "ascending" ? arrowUpIcon : sortOrder === "descending" ? arrowDownIcon : undefined;
+  let t1;
+  if ($[7] !== columnIndex || $[8] !== onClick || $[9] !== sortOrder || $[10] !== tableProps) {
+    t1 = e => {
+      onClick?.(e);
+      if (!e.defaultPrevented) {
+        const nextOrder = sortOrder === "ascending" ? "descending" : sortOrder === "descending" ? "none" : "ascending";
+        tableProps.onSort?.(columnIndex, nextOrder, tableProps.columns);
+      }
+    };
+    $[7] = columnIndex;
+    $[8] = onClick;
+    $[9] = sortOrder;
+    $[10] = tableProps;
+    $[11] = t1;
+  } else {
+    t1 = $[11];
+  }
+  const handleClick = t1;
+  if (!tableProps || !column) {
+    return null;
+  }
+  let t2;
+  if ($[12] !== className) {
+    t2 = classNames(styles.tableButton, className);
+    $[12] = className;
+    $[13] = t2;
+  } else {
+    t2 = $[13];
+  }
+  let t3;
+  if ($[14] !== glyph) {
+    t3 = /*#__PURE__*/jsx(Icon, {
+      glyph: glyph,
+      "aria-hidden": true
+    });
+    $[14] = glyph;
+    $[15] = t3;
+  } else {
+    t3 = $[15];
+  }
+  let t4;
+  if ($[16] !== children || $[17] !== handleClick || $[18] !== restProps || $[19] !== t2 || $[20] !== t3) {
+    t4 = /*#__PURE__*/jsxs("button", {
+      type: "button",
+      className: t2,
+      onClick: handleClick,
+      ...restProps,
+      children: [children, " ", t3]
+    });
+    $[16] = children;
+    $[17] = handleClick;
+    $[18] = restProps;
+    $[19] = t2;
+    $[20] = t3;
+    $[21] = t4;
+  } else {
+    t4 = $[21];
+  }
+  return t4;
+}
+function DeleteColumnButton(t0) {
+  var _column$name;
+  const $ = c(18);
+  if ($[0] !== "b3c0ce09616b10368937eafd2419f39baff21b41a15b2e7de8de6c88d493b96d") {
+    for (let $i = 0; $i < 18; $i += 1) {
+      $[$i] = Symbol.for("react.memo_cache_sentinel");
+    }
+    $[0] = "b3c0ce09616b10368937eafd2419f39baff21b41a15b2e7de8de6c88d493b96d";
+  }
+  let className;
+  let columnIndex;
+  let onClick;
+  let restProps;
+  if ($[1] !== t0) {
+    ({
+      columnIndex,
+      className,
+      onClick,
+      ...restProps
+    } = t0);
+    $[1] = t0;
+    $[2] = className;
+    $[3] = columnIndex;
+    $[4] = onClick;
+    $[5] = restProps;
+  } else {
+    className = $[2];
+    columnIndex = $[3];
+    onClick = $[4];
+    restProps = $[5];
+  }
+  const tableProps = use(TablePropsContext);
+  const column = tableProps?.columns[columnIndex];
+  let t1;
+  if ($[6] !== columnIndex || $[7] !== onClick || $[8] !== tableProps) {
+    t1 = e => {
+      onClick?.(e);
+      if (!e.defaultPrevented) {
+        const columns = tableProps.columns;
+        tableProps.onColumnDelete?.(columns[columnIndex], columnIndex, columns);
+      }
+    };
+    $[6] = columnIndex;
+    $[7] = onClick;
+    $[8] = tableProps;
+    $[9] = t1;
+  } else {
+    t1 = $[9];
+  }
+  const handleClick = t1;
+  if (!tableProps || !column) {
+    return null;
+  }
+  const hint = `Delete column ${(_column$name = column.name) !== null && _column$name !== void 0 ? _column$name : String(column.key)}.`;
+  let t2;
+  if ($[10] !== className) {
+    t2 = classNames(styles.tableButton, styles.deleteColumnButton, className);
+    $[10] = className;
+    $[11] = t2;
+  } else {
+    t2 = $[11];
+  }
+  let t3;
+  if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = /*#__PURE__*/jsx(Icon, {
+      glyph: trashIcon,
+      "aria-hidden": "true"
+    });
+    $[12] = t3;
+  } else {
+    t3 = $[12];
+  }
+  let t4;
+  if ($[13] !== handleClick || $[14] !== hint || $[15] !== restProps || $[16] !== t2) {
+    t4 = /*#__PURE__*/jsx("button", {
+      type: "button",
+      className: t2,
+      onClick: handleClick,
+      "aria-label": hint,
+      title: hint,
+      ...restProps,
+      children: t3
+    });
+    $[13] = handleClick;
+    $[14] = hint;
+    $[15] = restProps;
+    $[16] = t2;
+    $[17] = t4;
+  } else {
+    t4 = $[17];
+  }
+  return t4;
+}
+function EditColumnsButton(t0) {
+  const $ = c(14);
+  if ($[0] !== "b3c0ce09616b10368937eafd2419f39baff21b41a15b2e7de8de6c88d493b96d") {
+    for (let $i = 0; $i < 14; $i += 1) {
+      $[$i] = Symbol.for("react.memo_cache_sentinel");
+    }
+    $[0] = "b3c0ce09616b10368937eafd2419f39baff21b41a15b2e7de8de6c88d493b96d";
+  }
+  let columnEditing;
+  let hint;
+  let restProps;
+  let t1;
+  let t2;
+  if ($[1] !== t0) {
+    const {
+      columnEditing: t3,
+      ...props
+    } = t0;
+    columnEditing = t3;
+    const {
+      className,
+      ...t4
+    } = props;
+    restProps = t4;
+    hint = columnEditing ? "Hide column controls." : "Show column controls.";
+    t1 = "button";
+    t2 = classNames(styles.tableButton, styles.editColumnsButton, className);
+    $[1] = t0;
+    $[2] = columnEditing;
+    $[3] = hint;
+    $[4] = restProps;
+    $[5] = t1;
+    $[6] = t2;
+  } else {
+    columnEditing = $[2];
+    hint = $[3];
+    restProps = $[4];
+    t1 = $[5];
+    t2 = $[6];
+  }
+  let t3;
+  if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = /*#__PURE__*/jsx(Icon, {
+      glyph: settingsIcon,
+      "aria-hidden": "true"
+    });
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  let t4;
+  if ($[8] !== columnEditing || $[9] !== hint || $[10] !== restProps || $[11] !== t1 || $[12] !== t2) {
+    t4 = /*#__PURE__*/jsx("button", {
+      type: t1,
+      className: t2,
+      "aria-pressed": columnEditing,
+      "aria-label": hint,
+      title: hint,
+      ...restProps,
+      children: t3
+    });
+    $[8] = columnEditing;
+    $[9] = hint;
+    $[10] = restProps;
+    $[11] = t1;
+    $[12] = t2;
+    $[13] = t4;
+  } else {
+    t4 = $[13];
+  }
+  return t4;
+}
+function ColumnReorderHandle(t0) {
+  const $ = c(7);
+  if ($[0] !== "b3c0ce09616b10368937eafd2419f39baff21b41a15b2e7de8de6c88d493b96d") {
+    for (let $i = 0; $i < 7; $i += 1) {
+      $[$i] = Symbol.for("react.memo_cache_sentinel");
+    }
+    $[0] = "b3c0ce09616b10368937eafd2419f39baff21b41a15b2e7de8de6c88d493b96d";
+  }
+  let columnIndex;
+  let restProps;
+  if ($[1] !== t0) {
+    ({
+      columnIndex,
+      ...restProps
+    } = t0);
+    $[1] = t0;
+    $[2] = columnIndex;
+    $[3] = restProps;
+  } else {
+    columnIndex = $[2];
+    restProps = $[3];
+  }
+  let t1;
+  if ($[4] !== columnIndex || $[5] !== restProps) {
+    t1 = /*#__PURE__*/jsx(ReorderHandle, {
+      direction: "columns",
+      index: columnIndex,
+      ...restProps
+    });
+    $[4] = columnIndex;
+    $[5] = restProps;
+    $[6] = t1;
+  } else {
+    t1 = $[6];
+  }
+  return t1;
+}
+/**
+ * Reserves the space for the reorder handle and prevents layout shift when the handle appears on hover.
+ */
+function ColumnReorderHandleMirror() {
+  const $ = c(2);
+  if ($[0] !== "b3c0ce09616b10368937eafd2419f39baff21b41a15b2e7de8de6c88d493b96d") {
+    for (let $i = 0; $i < 2; $i += 1) {
+      $[$i] = Symbol.for("react.memo_cache_sentinel");
+    }
+    $[0] = "b3c0ce09616b10368937eafd2419f39baff21b41a15b2e7de8de6c88d493b96d";
+  }
+  let t0;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = /*#__PURE__*/jsx("span", {
+      className: styles.columnReorderHandleMirror,
+      "aria-hidden": "true"
+    });
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export { TableHeader };