@hazelcast/ui 3.0.1-canary.0 → 3.0.1-canary.2

package/lib/components/Table/CellWrapper.js

@@ -1,46 +1,29 @@
-'use strict';
-
-var React = require('react');
-var reactTable = require('@tanstack/react-table');
-var components_Table_constants = require('./constants.js');
-var components_Table_Cell = require('./Cell.js');
-
-const CellWrapper = props => {
-  var _a;
-  const {
-    selectable,
-    cell,
-    selectedColumnValuesRef,
-    onClickSelection,
-    onMouseEnterSelection,
-    selectionStartedRef,
-    ...rest
-  } = props;
-  const isSelectable = selectable && ((_a = cell.column) === null || _a === void 0 ? void 0 : _a.id) !== components_Table_constants.ROW_EXPANDER_COLUMN_ID;
-  React.useEffect(() => {
-    if (rest.cellId) {
-      const [rowIndex, cellIndex] = rest.cellId.split(':');
-      if (selectedColumnValuesRef === null || selectedColumnValuesRef === void 0 ? void 0 : selectedColumnValuesRef.current) {
-        if (rest.selected) {
-          const row = selectedColumnValuesRef.current[Number(rowIndex)];
-          if (row) {
-            row[Number(cellIndex)] = typeof cell.getValue() !== 'object' ? String(cell.getValue()) : '';
-          }
-        } else {
-          if (selectedColumnValuesRef.current[Number(rowIndex)] && selectedColumnValuesRef.current[Number(rowIndex)][Number(cellIndex)]) {
-            selectedColumnValuesRef.current[Number(rowIndex)][Number(cellIndex)] = undefined;
-          }
+import React, { useEffect } from 'react';
+import { flexRender } from '@tanstack/react-table';
+import { ROW_EXPANDER_COLUMN_ID } from './constants';
+import { Cell as TableCell } from './Cell';
+export const CellWrapper = (props) => {
+    var _a;
+    const { selectable, cell, selectedColumnValuesRef, onClickSelection, onMouseEnterSelection, selectionStartedRef, ...rest } = props;
+    const isSelectable = selectable && ((_a = cell.column) === null || _a === void 0 ? void 0 : _a.id) !== ROW_EXPANDER_COLUMN_ID;
+    useEffect(() => {
+        if (rest.cellId) {
+            const [rowIndex, cellIndex] = rest.cellId.split(':');
+            if (selectedColumnValuesRef === null || selectedColumnValuesRef === void 0 ? void 0 : selectedColumnValuesRef.current) {
+                if (rest.selected) {
+                    const row = selectedColumnValuesRef.current[Number(rowIndex)];
+                    if (row) {
+                        row[Number(cellIndex)] = typeof cell.getValue() !== 'object' ? String(cell.getValue()) : '';
+                    }
+                }
+                else {
+                    if (selectedColumnValuesRef.current[Number(rowIndex)] && selectedColumnValuesRef.current[Number(rowIndex)][Number(cellIndex)]) {
+                        selectedColumnValuesRef.current[Number(rowIndex)][Number(cellIndex)] = undefined;
+                    }
+                }
+            }
         }
-      }
-    }
-  }, [rest, cell, selectedColumnValuesRef]);
-  return /*#__PURE__*/React.createElement(components_Table_Cell.Cell, {
-    onClickSelection: isSelectable ? onClickSelection : undefined,
-    selectionStartedRef: isSelectable ? selectionStartedRef : undefined,
-    onMouseEnterSelection: isSelectable ? onMouseEnterSelection : undefined,
-    ...rest
-  }, reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()));
+    }, [rest, cell, selectedColumnValuesRef]);
+    return (React.createElement(TableCell, { onClickSelection: isSelectable ? onClickSelection : undefined, selectionStartedRef: isSelectable ? selectionStartedRef : undefined, onMouseEnterSelection: isSelectable ? onMouseEnterSelection : undefined, ...rest }, flexRender(cell.column.columnDef.cell, cell.getContext())));
 };
-
-exports.CellWrapper = CellWrapper;
-//# sourceMappingURL=CellWrapper.js.map
+//# sourceMappingURL=CellWrapper.js.map

package/lib/components/Table/CellWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"CellWrapper.js","sources":["../../../src/components/Table/CellWrapper.tsx"],"sourcesContent":[null],"names":["CellWrapper","props","selectable","cell","selectedColumnValuesRef","onClickSelection","onMouseEnterSelection","selectionStartedRef","rest","isSelectable","_a","column","id","ROW_EXPANDER_COLUMN_ID","useEffect","cellId","rowIndex","cellIndex","split","current","selected","row","Number","getValue","String","undefined","React","createElement","TableCell","flexRender","columnDef","getContext"],"mappings":";;;;;;;AAcO,MAAMA,WAAW,GAAsBC,KAA0B,IAAI;;EAC1E,MAAM;IAAEC,UAAU;IAAEC,IAAI;IAAEC,uBAAuB;IAAEC,gBAAgB;IAAEC,qBAAqB;IAAEC,mBAAmB;IAAE,GAAGC;AAAI,GAAE,GAAGP,KAAK;EAElI,MAAMQ,YAAY,GAAGP,UAAU,IAAI,CAAA,CAAAQ,EAAA,GAAAP,IAAI,CAACQ,MAAM,MAAA,IAAA,IAAAD,EAAA,KAAA,MAAA,GAAA,MAAA,GAAAA,EAAA,CAAEE,EAAE,MAAKC,iDAAsB;AAE7EC,EAAAA,eAAS,CAAC,MAAK;IACb,IAAIN,IAAI,CAACO,MAAM,EAAE;AACf,MAAA,MAAM,CAACC,QAAQ,EAAEC,SAAS,CAAC,GAAGT,IAAI,CAACO,MAAM,CAACG,KAAK,CAAC,GAAG,CAAqB;AAExE,MAAA,IAAId,uBAAuB,aAAvBA,uBAAuB,KAAA,MAAA,GAAA,MAAA,GAAvBA,uBAAuB,CAAEe,OAAO,EAAE;QACpC,IAAIX,IAAI,CAACY,QAAQ,EAAE;UACjB,MAAMC,GAAG,GAAGjB,uBAAuB,CAACe,OAAO,CAACG,MAAM,CAACN,QAAQ,CAAC,CAAC;AAC7D,UAAA,IAAIK,GAAG,EAAE;YACPA,GAAG,CAACC,MAAM,CAACL,SAAS,CAAC,CAAC,GAAG,OAAOd,IAAI,CAACoB,QAAQ,EAAE,KAAK,QAAQ,GAAGC,MAAM,CAACrB,IAAI,CAACoB,QAAQ,EAAE,CAAC,GAAG,EAAE;AAC7F,UAAA;AACF,QAAA,CAAC,MAAM;UACL,IAAInB,uBAAuB,CAACe,OAAO,CAACG,MAAM,CAACN,QAAQ,CAAC,CAAC,IAAIZ,uBAAuB,CAACe,OAAO,CAACG,MAAM,CAACN,QAAQ,CAAC,CAAC,CAACM,MAAM,CAACL,SAAS,CAAC,CAAC,EAAE;AAC7Hb,YAAAA,uBAAuB,CAACe,OAAO,CAACG,MAAM,CAACN,QAAQ,CAAC,CAAC,CAACM,MAAM,CAACL,SAAS,CAAC,CAAC,GAAGQ,SAAS;AAClF,UAAA;AACF,QAAA;AACF,MAAA;AACF,IAAA;EACF,CAAC,EAAE,CAACjB,IAAI,EAAEL,IAAI,EAAEC,uBAAuB,CAAC,CAAC;AAEzC,EAAA,oBACEsB,KAAA,CAAAC,aAAA,CAACC,0BAAS,EAAA;AACRvB,IAAAA,gBAAgB,EAAEI,YAAY,GAAGJ,gBAAgB,GAAGoB,SAAS;AAC7DlB,IAAAA,mBAAmB,EAAEE,YAAY,GAAGF,mBAAmB,GAAGkB,SAAS;AACnEnB,IAAAA,qBAAqB,EAAEG,YAAY,GAAGH,qBAAqB,GAAGmB,SAAS;IAAA,GACnEjB;AAAI,GAAA,EAEPqB,qBAAU,CAAC1B,IAAI,CAACQ,MAAM,CAACmB,SAAS,CAAC3B,IAAI,EAAEA,IAAI,CAAC4B,UAAU,EAAE,CAAC,CAChD;AAEhB;;;;"}
+{"version":3,"file":"CellWrapper.js","sourceRoot":"","sources":["../../../src/components/Table/CellWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA4B,SAAS,EAAE,MAAM,OAAO,CAAA;AAClE,OAAO,EAAQ,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAExD,OAAO,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAA;AACpD,OAAO,EAAa,IAAI,IAAI,SAAS,EAAE,MAAM,QAAQ,CAAA;AAUrD,MAAM,CAAC,MAAM,WAAW,GAAG,CAAmB,KAA0B,EAAE,EAAE;;IAC1E,MAAM,EAAE,UAAU,EAAE,IAAI,EAAE,uBAAuB,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,mBAAmB,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAA;IAElI,MAAM,YAAY,GAAG,UAAU,IAAI,CAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,EAAE,MAAK,sBAAsB,CAAA;IAE7E,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,MAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAqB,CAAA;YAExE,IAAI,uBAAuB,aAAvB,uBAAuB,uBAAvB,uBAAuB,CAAE,OAAO,EAAE,CAAC;gBACrC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;oBAClB,MAAM,GAAG,GAAG,uBAAuB,CAAC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAA;oBAC7D,IAAI,GAAG,EAAE,CAAC;wBACR,GAAG,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,GAAG,OAAO,IAAI,CAAC,QAAQ,EAAE,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;oBAC7F,CAAC;gBACH,CAAC;qBAAM,CAAC;oBACN,IAAI,uBAAuB,CAAC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,IAAI,uBAAuB,CAAC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC;wBAC9H,uBAAuB,CAAC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,GAAG,SAAS,CAAA;oBAClF,CAAC;gBACH,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,uBAAuB,CAAC,CAAC,CAAA;IAEzC,OAAO,CACL,oBAAC,SAAS,IACR,gBAAgB,EAAE,YAAY,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,EAC7D,mBAAmB,EAAE,YAAY,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,SAAS,EACnE,qBAAqB,EAAE,YAAY,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,SAAS,KACnE,IAAI,IAEP,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,CAChD,CACb,CAAA;AACH,CAAC,CAAA"}

package/lib/components/Table/EnhancedRenderers.js

@@ -1,32 +1,13 @@
-'use strict';
-
-var React = require('react');
-var reactTable = require('@tanstack/react-table');
-var components_TruncatedText = require('../TruncatedText.js');
-var Cell_module = require('./Cell.module.scss.js');
-
-const EnhancedHeaderFooterRenderer = ({
-  context,
-  type
-}) => {
-  const value = context.column.columnDef[type];
-  if (typeof value === 'string') {
-    return /*#__PURE__*/React.createElement(components_TruncatedText.TruncatedText, {
-      text: value,
-      forceUpdateToken: context.column.getIsResizing()
-    });
-  }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, reactTable.flexRender(value, context));
+import React from 'react';
+import { flexRender } from '@tanstack/react-table';
+import { TruncatedText } from '../TruncatedText';
+import styles from './Cell.module.scss';
+export const EnhancedHeaderFooterRenderer = ({ context, type }) => {
+    const value = context.column.columnDef[type];
+    if (typeof value === 'string') {
+        return React.createElement(TruncatedText, { text: value, forceUpdateToken: context.column.getIsResizing() });
+    }
+    return React.createElement(React.Fragment, null, flexRender(value, context));
 };
-const EnhancedCellRenderer = ({
-  cell,
-  columnResizing
-}) => (/*#__PURE__*/React.createElement(components_TruncatedText.TruncatedText, {
-  text: cell.renderValue(),
-  forceUpdateToken: columnResizing,
-  tooltipClassName: Cell_module.default.truncated
-}));
-
-exports.EnhancedCellRenderer = EnhancedCellRenderer;
-exports.EnhancedHeaderFooterRenderer = EnhancedHeaderFooterRenderer;
-//# sourceMappingURL=EnhancedRenderers.js.map
+export const EnhancedCellRenderer = ({ cell, columnResizing }) => (React.createElement(TruncatedText, { text: cell.renderValue(), forceUpdateToken: columnResizing, tooltipClassName: styles.truncated }));
+//# sourceMappingURL=EnhancedRenderers.js.map

package/lib/components/Table/EnhancedRenderers.js.map

@@ -1 +1 @@
-{"version":3,"file":"EnhancedRenderers.js","sources":["../../../src/components/Table/EnhancedRenderers.tsx"],"sourcesContent":[null],"names":["EnhancedHeaderFooterRenderer","context","type","value","column","columnDef","React","TruncatedText","text","forceUpdateToken","getIsResizing","createElement","Fragment","flexRender","EnhancedCellRenderer","cell","columnResizing","renderValue","tooltipClassName","styles","truncated"],"mappings":";;;;;;;AAsBO,MAAMA,4BAA4B,GAAGA,CAAmB;EAAEC,OAAO;AAAEC,EAAAA;AAAI,CAAwC,KAAI;EACxH,MAAMC,KAAK,GAAGF,OAAO,CAACG,MAAM,CAACC,SAAS,CAACH,IAAI,CAAC;AAE5C,EAAA,IAAI,OAAOC,KAAK,KAAK,QAAQ,EAAE;AAC7B,IAAA,oBAAOG,oBAACC,sCAAa,EAAA;AAACC,MAAAA,IAAI,EAAEL,KAAK;AAAEM,MAAAA,gBAAgB,EAAER,OAAO,CAACG,MAAM,CAACM,aAAa;MAAM;AACzF,EAAA;AAEA,EAAA,oBAAOJ,KAAA,CAAAK,aAAA,CAAAL,KAAA,CAAAM,QAAA,EAAA,IAAA,EAAGC,qBAAU,CAACV,KAAK,EAAEF,OAAO,CAAC,CAAI;AAC1C;AAOO,MAAMa,oBAAoB,GAAGA,CAAmB;EAAEC,IAAI;AAAEC,EAAAA;CAA8C,mBAC3GV,oBAACC,sCAAa,EAAA;AAACC,EAAAA,IAAI,EAAEO,IAAI,CAACE,WAAW,EAAY;AAAER,EAAAA,gBAAgB,EAAEO,cAAc;EAAEE,gBAAgB,EAAEC,mBAAM,CAACC;AAAS,CAAA,CAAI;;;;;"}
+{"version":3,"file":"EnhancedRenderers.js","sourceRoot":"","sources":["../../../src/components/Table/EnhancedRenderers.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAoB,UAAU,EAAiB,MAAM,uBAAuB,CAAA;AAEnF,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAEhD,OAAO,MAAM,MAAM,oBAAoB,CAAA;AAiBvC,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAmB,EAAE,OAAO,EAAE,IAAI,EAAwC,EAAE,EAAE;IACxH,MAAM,KAAK,GAAG,OAAO,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,CAAA;IAE5C,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC9B,OAAO,oBAAC,aAAa,IAAC,IAAI,EAAE,KAAK,EAAE,gBAAgB,EAAE,OAAO,CAAC,MAAM,CAAC,aAAa,EAAE,GAAI,CAAA;IACzF,CAAC;IAED,OAAO,0CAAG,UAAU,CAAC,KAAK,EAAE,OAAO,CAAC,CAAI,CAAA;AAC1C,CAAC,CAAA;AAOD,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAmB,EAAE,IAAI,EAAE,cAAc,EAAgC,EAAE,EAAE,CAAC,CAChH,oBAAC,aAAa,IAAC,IAAI,EAAE,IAAI,CAAC,WAAW,EAAY,EAAE,gBAAgB,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,CAAC,SAAS,GAAI,CAC5H,CAAA"}

package/lib/components/Table/Header.js

@@ -1,143 +1,94 @@
-'use strict';
-
-var React = require('react');
-var reactFeather = require('react-feather');
-var cn = require('classnames');
-var components_Icon = require('../Icon.js');
-var utils_keyboard = require('../../utils/keyboard.js');
-var Header_module = require('./Header.module.scss.js');
-
-const Header = ({
-  align = 'left',
-  colSpan,
-  children,
-  canSort,
-  isSorted,
-  isSortedDesc,
-  canResize,
-  isResizing,
-  onClick,
-  style,
-  className,
-  role,
-  index,
-  size,
-  onDragStart,
-  onDrop,
-  resizeHandler
-}) => {
-  const rootRef = React.useRef(null);
-  const isDragStarterRef = React.useRef(false);
-  const counterRef = React.useRef(0);
-  const draggable = !!onDrop && !!onDragStart;
-  let ariaSort;
-  let ariaLabel = 'Not Sorted';
-  let icon = reactFeather.ChevronUp;
-  if (isSorted) {
-    ariaSort = isSortedDesc ? 'descending' : 'ascending';
-    ariaLabel = isSortedDesc ? 'Descending' : 'Ascending';
-    icon = isSortedDesc ? reactFeather.ChevronDown : reactFeather.ChevronUp;
-  }
-  const Chevron = React.useMemo(() => (/*#__PURE__*/React.createElement(components_Icon.Icon, {
-    "data-test": "chevron",
-    className: cn(Header_module.default.sortingIcon, {
-      [Header_module.default.left]: align === 'left',
-      [Header_module.default.right]: align === 'right',
-      [Header_module.default.isSorted]: isSorted
-    }),
-    icon: icon,
-    ariaLabel: ariaLabel,
-    size: "smallMedium"
-  })), [align, ariaLabel, icon, isSorted]);
-  const DraggableIcon = /*#__PURE__*/React.createElement(components_Icon.Icon, {
-    icon: reactFeather.Menu,
-    size: "small",
-    ariaLabel: "draggable-indicator",
-    className: cn(Header_module.default.dragIcon, {
-      [Header_module.default.dragIconRight]: align === 'right'
-    })
-  });
-  const onKeyDown = React.useCallback(event => {
-    event.preventDefault();
-    if (utils_keyboard.keyIsOneOf(event, 'Enter') && onClick) {
-      onClick(event);
+import React, { useMemo, useCallback, useRef } from 'react';
+import { ChevronDown, ChevronUp, Menu } from 'react-feather';
+import cn from 'classnames';
+import { Icon } from '../Icon';
+import { keyIsOneOf } from '../../utils/keyboard';
+import styles from './Header.module.scss';
+export const Header = ({ align = 'left', colSpan, children, canSort, isSorted, isSortedDesc, canResize, isResizing, onClick, style, className, role, index, size, onDragStart, onDrop, resizeHandler, }) => {
+    const rootRef = useRef(null);
+    const isDragStarterRef = useRef(false);
+    const counterRef = useRef(0);
+    const draggable = !!onDrop && !!onDragStart;
+    let ariaSort;
+    let ariaLabel = 'Not Sorted';
+    let icon = ChevronUp;
+    if (isSorted) {
+        ariaSort = isSortedDesc ? 'descending' : 'ascending';
+        ariaLabel = isSortedDesc ? 'Descending' : 'Ascending';
+        icon = isSortedDesc ? ChevronDown : ChevronUp;
     }
-  }, [onClick]);
-  const buttonRoleProps = {
-    tabIndex: onClick ? 0 : undefined,
-    role: onClick ? 'button' : undefined,
-    onKeyDown: onClick ? onKeyDown : undefined,
-    onClick
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    ref: rootRef,
-    "data-test": "table-header-container",
-    className: cn(Header_module.default.container, className),
-    style: {
-      ...style,
-      ...(size != null ? {
-        width: size
-      } : {})
-    },
-    role: role,
-    "aria-colspan": colSpan,
-    "aria-sort": ariaSort
-  }, /*#__PURE__*/React.createElement("div", {
-    draggable: draggable,
-    "data-test": "table-header-content",
-    className: cn(Header_module.default.th, {
-      [Header_module.default.sortable]: canSort,
-      [Header_module.default.alignLeft]: align === 'left',
-      [Header_module.default.alignRight]: align === 'right',
-      [Header_module.default.alignCenter]: align === 'center'
-    }),
-    onDragStart: draggable ? e => {
-      e.dataTransfer.setData('text/plain', String(index));
-      isDragStarterRef.current = true;
-      if (onDragStart) {
-        onDragStart(e);
-      }
-    } : undefined,
-    onDragEnd: () => {
-      isDragStarterRef.current = false;
-    },
-    onDragOver: e => e.preventDefault(),
-    onDragEnter: draggable ? e => {
-      e.preventDefault();
-      if (!isDragStarterRef.current && rootRef.current && counterRef.current === 0) {
-        rootRef.current.classList.add(Header_module.default.dragOver);
-      }
-      counterRef.current++;
-    } : undefined,
-    onDragLeave: draggable ? () => {
-      counterRef.current--;
-      if (rootRef.current && counterRef.current === 0) {
-        rootRef.current.classList.remove(Header_module.default.dragOver);
-      }
-    } : undefined,
-    onDrop: draggable ? e => {
-      if (onDrop) {
-        onDrop(e, index);
-      }
-      if (rootRef.current) {
-        rootRef.current.classList.remove(Header_module.default.dragOver);
-      }
-      isDragStarterRef.current = false;
-      counterRef.current = 0;
-    } : undefined,
-    ...buttonRoleProps
-  }, draggable && align === 'right' && DraggableIcon, canSort && align === 'right' && Chevron, children, canSort && (align === 'left' || align === 'center') && Chevron, draggable && (align === 'left' || align === 'center') && DraggableIcon), canResize && (/*#__PURE__*/React.createElement("div", {
-    "data-test": "table-header-column-resizer-container",
-    className: Header_module.default.resizer,
-    onMouseDown: resizeHandler,
-    onTouchStart: resizeHandler
-  }, /*#__PURE__*/React.createElement("div", {
-    "data-test": "table-header-column-resizer",
-    className: cn('resizer', Header_module.default.separator, {
-      [Header_module.default.resizing]: isResizing
-    })
-  }))));
+    const Chevron = useMemo(() => (React.createElement(Icon, { "data-test": "chevron", className: cn(styles.sortingIcon, {
+            [styles.left]: align === 'left',
+            [styles.right]: align === 'right',
+            [styles.isSorted]: isSorted,
+        }), icon: icon, ariaLabel: ariaLabel, size: "smallMedium" })), [align, ariaLabel, icon, isSorted]);
+    const DraggableIcon = (React.createElement(Icon, { icon: Menu, size: "small", ariaLabel: "draggable-indicator", className: cn(styles.dragIcon, { [styles.dragIconRight]: align === 'right' }) }));
+    const onKeyDown = useCallback((event) => {
+        event.preventDefault();
+        if (keyIsOneOf(event, 'Enter') && onClick) {
+            onClick(event);
+        }
+    }, [onClick]);
+    const buttonRoleProps = {
+        tabIndex: onClick ? 0 : undefined,
+        role: onClick ? 'button' : undefined,
+        onKeyDown: onClick ? onKeyDown : undefined,
+        onClick,
+    };
+    return (React.createElement("div", { ref: rootRef, "data-test": "table-header-container", className: cn(styles.container, className), style: {
+            ...style,
+            ...(size != null ? { width: size } : {}),
+        }, role: role, "aria-colspan": colSpan, "aria-sort": ariaSort },
+        React.createElement("div", { draggable: draggable, "data-test": "table-header-content", className: cn(styles.th, {
+                [styles.sortable]: canSort,
+                [styles.alignLeft]: align === 'left',
+                [styles.alignRight]: align === 'right',
+                [styles.alignCenter]: align === 'center',
+            }), onDragStart: draggable
+                ? (e) => {
+                    e.dataTransfer.setData('text/plain', String(index));
+                    isDragStarterRef.current = true;
+                    if (onDragStart) {
+                        onDragStart(e);
+                    }
+                }
+                : undefined, onDragEnd: () => {
+                isDragStarterRef.current = false;
+            }, onDragOver: (e) => e.preventDefault(), onDragEnter: draggable
+                ? (e) => {
+                    e.preventDefault();
+                    if (!isDragStarterRef.current && rootRef.current && counterRef.current === 0) {
+                        rootRef.current.classList.add(styles.dragOver);
+                    }
+                    counterRef.current++;
+                }
+                : undefined, onDragLeave: draggable
+                ? () => {
+                    counterRef.current--;
+                    if (rootRef.current && counterRef.current === 0) {
+                        rootRef.current.classList.remove(styles.dragOver);
+                    }
+                }
+                : undefined, onDrop: draggable
+                ? (e) => {
+                    if (onDrop) {
+                        onDrop(e, index);
+                    }
+                    if (rootRef.current) {
+                        rootRef.current.classList.remove(styles.dragOver);
+                    }
+                    isDragStarterRef.current = false;
+                    counterRef.current = 0;
+                }
+                : undefined, ...buttonRoleProps },
+            draggable && align === 'right' && DraggableIcon,
+            canSort && align === 'right' && Chevron,
+            children,
+            canSort && (align === 'left' || align === 'center') && Chevron,
+            draggable && (align === 'left' || align === 'center') && DraggableIcon),
+        canResize && (React.createElement("div", { "data-test": "table-header-column-resizer-container", className: styles.resizer, onMouseDown: resizeHandler, onTouchStart: resizeHandler },
+            React.createElement("div", { "data-test": "table-header-column-resizer", className: cn('resizer', styles.separator, {
+                    [styles.resizing]: isResizing,
+                }) })))));
 };
-
-exports.Header = Header;
-//# sourceMappingURL=Header.js.map
+//# sourceMappingURL=Header.js.map

package/lib/components/Table/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sources":["../../../src/components/Table/Header.tsx"],"sourcesContent":[null],"names":["Header","align","colSpan","children","canSort","isSorted","isSortedDesc","canResize","isResizing","onClick","style","className","role","index","size","onDragStart","onDrop","resizeHandler","rootRef","useRef","isDragStarterRef","counterRef","draggable","ariaSort","ariaLabel","icon","ChevronUp","ChevronDown","Chevron","useMemo","React","createElement","Icon","cn","styles","sortingIcon","left","right","DraggableIcon","Menu","dragIcon","dragIconRight","onKeyDown","useCallback","event","preventDefault","keyIsOneOf","buttonRoleProps","tabIndex","undefined","ref","container","width","th","sortable","alignLeft","alignRight","alignCenter","e","dataTransfer","setData","String","current","onDragEnd","onDragOver","onDragEnter","classList","add","dragOver","onDragLeave","remove","resizer","onMouseDown","onTouchStart","separator","resizing"],"mappings":"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"}
+{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../src/components/Table/Header.tsx"],"names":[],"mappings":"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"}

package/lib/components/Table/Header.module.scss

@@ -0,0 +1,128 @@
+@use '../../../styles/constants' as c;
+@use '../../../styles/helpers' as h;
+
+.resizer {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 20px;
+  height: 100%;
+  top: 0;
+  right: -10px;
+  z-index: c.$zIndex100;
+  cursor: col-resize;
+  user-select: none;
+
+  // Prevents from scrolling while dragging on touch devices
+  /* doiuse-disable css-touch-action */
+  touch-action: none;
+  /* doiuse-enable css-touch-action */
+
+  .separator {
+    width: 1px;
+    height: 100%;
+  }
+
+  .resizing,
+  &:hover .separator {
+    background-color: c.$colorPrimary;
+  }
+}
+
+.container {
+  position: relative;
+  flex-grow: 1;
+  flex-basis: auto;
+  flex-shrink: 0;
+  background: c.$colorNeutralGray;
+  border-right: 1px solid c.$colorNeutralWhite;
+
+  .th {
+    display: flex;
+    align-items: center;
+    height: c.$grid * 12;
+    padding-left: c.$grid * 5;
+    padding-right: c.$grid * 5;
+    color: c.$colorText;
+    box-sizing: border-box;
+
+    @include c.typographyBodySmall('bold');
+    @include h.overflowEllipsis;
+
+    .sortingIcon {
+      flex-shrink: 0;
+      color: c.$colorPrimary;
+
+      &.left {
+        margin-left: c.$grid * 1.25;
+      }
+
+      &.right {
+        margin-right: c.$grid * 1.25;
+      }
+
+      &:not(.isSorted) {
+        color: c.$colorNeutral;
+      }
+    }
+
+    &.sortable {
+      cursor: pointer;
+
+      &:focus-visible {
+        // Do not remove outline for high-contrast modes
+        // https://stackoverflow.com/a/52616313
+        outline: c.$outlineWidth solid transparent;
+
+        @include h.outlineSimple;
+
+        // Put outline over resizer
+        z-index: c.$zIndex1000;
+        background-color: c.$colorNeutralLighter;
+      }
+
+      &:hover {
+        background-color: c.$colorNeutralGrayDarker;
+      }
+    }
+
+    &.alignLeft {
+      justify-content: flex-start;
+    }
+
+    &.alignRight {
+      justify-content: flex-end;
+    }
+
+    &.alignCenter {
+      justify-content: center;
+    }
+
+    &[draggable='true'] {
+      /* doiuse-disable css3-cursors-newer */
+      cursor: grabbing;
+      /* doiuse-enable css3-cursors-newer */
+    }
+  }
+
+  &:last-child {
+    .resizer {
+      width: c.$grid;
+      right: 0;
+    }
+  }
+}
+
+.dragOver {
+  @include h.outlineSimple;
+}
+
+.dragIcon {
+  margin-left: c.$grid * 2;
+}
+
+.dragIconRight {
+  margin-left: 0;
+  margin-right: c.$grid * 2;
+}