@hazelcast/ui 1.3.3-next.9 → 2.0.1-canary.0

package/lib/components/Slider.module.scss

@@ -0,0 +1,277 @@
+@use '../../styles/constants' as c;
+@use '../../styles/helpers' as h;
+
+// thumb width without a white border, let's make it the height of the slider
+$thumbWidth: c.$slideTrackHeight;
+$currentValueIndicatorHeight: c.$grid * 6;
+
+// We've double checked that everything works in IE11
+/* doiuse-disable calc */
+/* doiuse-disable multicolumn */
+/* doiuse-disable css-appearance */
+
+@mixin track() {
+  background: none; // get rid of track background
+  appearance: none;
+
+  // it's important for these values to be 0 in order to be consistent across (Firefox/IE11) & Chrome
+  margin: 0;
+  padding: 0;
+  border: 0;
+  box-sizing: border-box;
+}
+
+@mixin thumb() {
+  box-shadow: 0 c.$sliderThumbShadowSize c.$sliderThumbShadowBlur c.$colorShadow;
+  background: c.$colorSuccess; // background will represent the dot inside
+  border: c.$sliderThumbBorderSize solid c.$colorNeutralWhite; // the white part will be done by the border
+  box-sizing: content-box; /* and because of all of this, we need content-box */
+  border-radius: 50%;
+  pointer-events: auto; /* catch clicks */
+  width: $thumbWidth;
+  height: $thumbWidth;
+}
+
+/**
+  We can't combine these selectors with a comma, because they're invalid in different browsers.
+  This helper will save us some code blocks.
+ */
+@mixin styleThumb {
+  &::-webkit-slider-thumb {
+    @content;
+  }
+
+  &::-moz-range-thumb {
+    @content;
+  }
+
+  &::-ms-thumb {
+    @content;
+  }
+}
+
+ul.markDescriptions {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  height: c.$grid * 8;
+  position: relative;
+  font-size: c.$fontSizeBodySmall;
+  color: c.$colorTextSecondary;
+
+  > li {
+    position: absolute;
+    bottom: c.$grid;
+    transform: translateX(-50%);
+    white-space: nowrap;
+
+    &.activeMarkDescription {
+      font-weight: c.$fontWeightTextBold;
+      color: black;
+    }
+  }
+}
+
+.valueIndicators {
+  padding: 0;
+  height: $currentValueIndicatorHeight;
+  position: relative;
+  width: calc(100% - #{c.$sliderThumbBorderSize} - #{c.$sliderThumbShadowSize});
+  margin: 0 auto;
+
+  > span {
+    position: absolute;
+    top: c.$grid;
+    transform: translateX(-50%);
+    font-size: c.$fontSizeBodyNormal;
+    font-weight: c.$fontWeightTextBold;
+    white-space: nowrap;
+  }
+}
+
+@include h.withError;
+
+.wrapper {
+  display: flex;
+
+  & * {
+    box-sizing: border-box;
+  }
+
+  .innerWrapper {
+    flex: 1;
+  }
+
+  .inputWrapper {
+    @include c.typographyBodySmall;
+
+    position: relative;
+    height: c.$slideTrackHeight;
+    flex: 1;
+    margin: $thumbWidth 0;
+
+    input[type='range'] {
+      z-index: c.$zIndex100;
+      outline: none;
+      background: none;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: c.$sliderThumbBorderSize * -1;
+      width: calc(100% + #{c.$sliderThumbBorderSize * 2});
+      height: 100%;
+      pointer-events: none; // ignore clicks on the actual inputs and let them pass to the handles
+      min-height: c.$slideTrackHeight;
+      padding: 0;
+      margin: 0;
+      justify-self: center;
+
+      &::-webkit-slider-runnable-track,
+      &::-webkit-slider-thumb,
+      & {
+        appearance: none;
+      }
+
+      // Style the track
+      &::-webkit-slider-runnable-track {
+        @include track;
+      }
+
+      &::-moz-range-track {
+        @include track;
+      }
+
+      &::-ms-track {
+        @include track;
+
+        visibility: hidden; // IE11 specific rule to hide the default tick marks
+      }
+
+      @include styleThumb {
+        @include thumb;
+      }
+
+      /**
+        Hover
+       */
+      &:hover,
+      &.hover {
+        @include styleThumb {
+          box-shadow: 0 0 0 c.$sliderThumbHoverBorderSize c.$colorPrimary;
+        }
+      }
+
+      &.focus,
+      &:focus-visible {
+        @include styleThumb {
+          box-shadow: 0 0 0 c.$outlineWidth c.$colorAccessibilityOutline;
+        }
+      }
+
+      // don't show IE11's lower fill
+      &::-ms-fill-lower {
+        display: none;
+      }
+    }
+
+    // see the javascript code for an explanation of this class
+    input[type='range'].atTheBorder {
+      @include styleThumb {
+        pointer-events: none;
+      }
+    }
+
+    .fillPlaceholder {
+      pointer-events: none;
+      height: c.$slideTrackHeight;
+
+      // highlighted part covers the border
+      box-sizing: border-box;
+      background: c.$colorNeutral;
+      border: c.$sliderFillBorderSize solid c.$colorNeutralLight;
+      width: 100%;
+      position: relative;
+
+      // if the actual fill is very small the border is rounded, it can reach out of the wrapper
+      overflow: hidden;
+
+      // we ned to reserve space like this manually mostly because of IE11
+      border-radius: c.$sliderTrackBorderRadius;
+
+      .fill {
+        pointer-events: none;
+        height: 100%;
+        background: c.$colorPrimaryLight;
+
+        // width & marginLeft will be set by a Javascript
+      }
+
+      ul.marks {
+        $markWidth: 2px;
+
+        width: calc(100% - #{$markWidth}); // so that 0% & 100% marks are visible
+        height: 100%;
+        margin: 0;
+        padding: 0;
+        list-style-type: none;
+        position: absolute;
+        top: 0;
+        pointer-events: none;
+
+        > li {
+          position: absolute;
+          width: $markWidth;
+          height: 100%;
+          background-color: c.$colorTextSecondary;
+
+          &.active {
+            background-color: c.$colorNeutralWhite;
+          }
+        }
+      }
+    }
+  }
+
+  .helperText {
+    margin-left: c.$sliderThumbBorderSize;
+    align-self: flex-end;
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+
+    .valueIndicators {
+      color: c.$colorNeutralLight;
+    }
+
+    ul.markDescriptions {
+      color: c.$colorNeutralLight;
+    }
+
+    .fillPlaceholder {
+      background-color: c.$colorNeutral;
+
+      .fill {
+        background-color: c.$colorNeutralLight;
+      }
+
+      ul.marks {
+        > li {
+          background-color: c.$colorNeutralLight;
+        }
+      }
+    }
+
+    input[type='range']:disabled {
+      @include styleThumb {
+        box-shadow: 0 0 0 c.$sliderThumbHoverBorderSize c.$colorNeutral;
+        background: c.$colorNeutralLight;
+        cursor: not-allowed;
+      }
+    }
+  }
+}
+
+/* doiuse-enable calc */
+/* doiuse-enable multicolumn */
+/* doiuse-enable css-appearance */

package/lib/components/SliderFormik.d.ts

@@ -0,0 +1,9 @@
+import { ReactElement } from 'react';
+import { FieldValidator } from 'formik';
+import { SliderExtraProps, SliderValue } from './Slider';
+import { ExtractKeysOfValueType } from '../utils/types';
+export type SliderFormikProps<V extends object> = SliderExtraProps & Partial<Pick<HTMLInputElement, 'disabled'>> & {
+    name: ExtractKeysOfValueType<V, SliderValue>;
+    validate?: FieldValidator;
+};
+export declare const SliderFormik: <V extends object>({ name, validate, ...props }: SliderFormikProps<V>) => ReactElement;

package/lib/components/SliderFormik.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { useField } from 'formik';
+import { useMemo } from 'react';
+import { Slider } from './Slider';
+import { formikTouchAndUpdate, getFieldError } from '../utils/formik';
+export const SliderFormik = ({ name, validate, ...props }) => {
+    const [field, meta, { setValue, setTouched }] = useField({
+        name,
+        validate,
+    });
+    const onChange = useMemo(() => formikTouchAndUpdate(setValue, setTouched), [setValue, setTouched]);
+    return React.createElement(Slider, { ...props, name: name, value: field.value, onChange: onChange, error: getFieldError(meta) });
+};
+//# sourceMappingURL=SliderFormik.js.map

package/lib/components/SliderFormik.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderFormik.js","sourceRoot":"","sources":["../../src/components/SliderFormik.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuB,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAkB,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAE/B,OAAO,EAAE,MAAM,EAAiC,MAAM,UAAU,CAAA;AAChE,OAAO,EAAE,oBAAoB,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AASrE,MAAM,CAAC,MAAM,YAAY,GAAG,CAAmB,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAwB,EAAgB,EAAE;IACjH,MAAM,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC,GAAG,QAAQ,CAA4B;QAClF,IAAI;QACJ,QAAQ;KACT,CAAC,CAAA;IAEF,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,oBAAoB,CAAC,QAAQ,EAAE,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAA;IAElG,OAAO,oBAAC,MAAM,OAAK,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,GAAI,CAAA;AAC9G,CAAC,CAAA"}

package/lib/components/Table/Cell.d.ts

@@ -0,0 +1,27 @@
+import React, { CSSProperties, FC, PropsWithChildren, RefObject } from 'react';
+export type CellWarningProps = {
+    align: 'left' | 'right';
+    warning: string;
+};
+export declare const CellWarning: FC<CellWarningProps>;
+export type CellProps = {
+    /**
+     * Number fields should be right aligned as that allows
+     * you to compare them or add them up quickly in your head.
+     */
+    align?: 'left' | 'right' | 'center';
+    selected?: boolean;
+    warning?: string;
+    colSpan?: number;
+    cellId?: string;
+    style?: CSSProperties;
+    role?: string;
+    className?: string;
+    selectionStartedRef?: RefObject<boolean>;
+    onMouseEnterSelection?: (id: string) => void;
+    onClickSelection?: (id: string, modifiers: {
+        ctrl: boolean;
+        shift: boolean;
+    }) => void;
+};
+export declare const Cell: ({ align, warning, colSpan, children, style, className, role, cellId, onClickSelection, selected, onMouseEnterSelection, selectionStartedRef, }: PropsWithChildren<CellProps>) => React.JSX.Element;

package/lib/components/Table/Cell.js

@@ -0,0 +1,60 @@
+import React, { useEffect, useRef } from 'react';
+import { AlertTriangle } from 'react-feather';
+import { useUID } from 'react-uid';
+import cn from 'classnames';
+import { Icon } from '../Icon';
+import { Tooltip } from '../Tooltip';
+import { useOpenCloseState } from '../../hooks';
+import { CellCopyablePopover } from './features/columnsSelection';
+import styles from './Cell.module.scss';
+export const CellWarning = ({ align, warning }) => {
+    const id = useUID();
+    const dataTest = 'cell-warning-content';
+    return (React.createElement(Tooltip, { id: id, content: warning }, (tooltipRef) => (React.createElement("div", { "data-test": dataTest, ref: tooltipRef, className: cn(styles.warningIcon, {
+            [styles.left]: align === 'left',
+            [styles.right]: align === 'right',
+        }) },
+        React.createElement(Icon, { "data-test": `${dataTest}-icon`, icon: AlertTriangle, ariaLabelledBy: id, size: "small" })))));
+};
+export const Cell = ({ align = 'left', warning, colSpan, children, style, className, role = 'cell', cellId, onClickSelection, selected, onMouseEnterSelection, selectionStartedRef, }) => {
+    const rootRef = useRef(null);
+    const { isOpen, open, close } = useOpenCloseState();
+    const handleClick = (e) => {
+        if (onClickSelection && cellId) {
+            if (e.button === 2 && selected) {
+                return;
+            }
+            onClickSelection(cellId, {
+                shift: e.shiftKey,
+                ctrl: e.ctrlKey || e.metaKey,
+            });
+        }
+    };
+    const handleMouseEnter = () => {
+        if (cellId && onMouseEnterSelection && (selectionStartedRef === null || selectionStartedRef === void 0 ? void 0 : selectionStartedRef.current)) {
+            onMouseEnterSelection(cellId);
+        }
+    };
+    useEffect(() => {
+        if (!selected) {
+            close();
+        }
+    }, [close, selected]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { ref: rootRef, "data-test": "table-cell", className: cn(styles.td, {
+                [styles.alignLeft]: align === 'left',
+                [styles.alignRight]: align === 'right',
+                [styles.alignCenter]: align === 'center',
+                [styles.selectable]: onClickSelection,
+                [styles.selected]: selected,
+            }, className), "aria-colspan": colSpan, style: style, role: role, onDoubleClick: selected ? open : undefined, onMouseEnter: onClickSelection ? handleMouseEnter : undefined, onMouseDown: onClickSelection ? handleClick : undefined },
+            warning && align === 'right' && React.createElement(CellWarning, { warning: warning, align: "right" }),
+            children,
+            warning && (align === 'left' || align === 'center') && React.createElement(CellWarning, { warning: warning, align: "left" })),
+        selected && (React.createElement(CellCopyablePopover, { anchorElement: rootRef.current, isOpen: isOpen, onClose: close, contentClassName: cn(styles.td, {
+                [styles.alignLeft]: align === 'left',
+                [styles.alignRight]: align === 'right',
+                [styles.alignCenter]: align === 'center',
+            }) }, children))));
+};
+//# sourceMappingURL=Cell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Cell.js","sourceRoot":"","sources":["../../../src/components/Table/Cell.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,61 @@
+@use 'sass:color';
+@use '../../../styles/constants' as c;
+@use '../../../styles/helpers' as h;
+
+.td {
+  position: relative;
+  display: flex;
+  box-sizing: border-box;
+  align-items: center;
+  height: c.$grid * 6;
+  padding-right: c.$grid * 5;
+  padding-left: c.$grid * 5;
+  color: c.$colorText;
+  background-color: inherit;
+  flex-grow: 1;
+  flex-basis: auto;
+  flex-shrink: 0;
+  font-family: 'Ubuntu Mono', monospace;
+
+  @include h.overflowEllipsis;
+
+  &.alignLeft {
+    justify-content: flex-start;
+  }
+
+  &.alignRight {
+    justify-content: flex-end;
+  }
+
+  &.alignCenter {
+    justify-content: center;
+  }
+
+  &.selected {
+    background: color.adjust(c.$colorPrimary, $lightness: 30%) !important;
+  }
+
+  &:not(:last-of-type) {
+    border-right: c.$borderWidth solid c.$colorNeutralWhite;
+  }
+}
+
+.warningIcon {
+  color: c.$colorWarningDark;
+
+  &.left {
+    margin-left: c.$grid * 2;
+  }
+
+  &.right {
+    margin-right: c.$grid * 2;
+  }
+}
+
+.selectable {
+  user-select: none;
+}
+
+.truncated {
+  font-family: 'Ubuntu Mono', monospace;
+}

package/lib/components/Table/CellWrapper.d.ts

@@ -0,0 +1,11 @@
+import React, { CSSProperties, RefObject } from 'react';
+import { Cell } from '@tanstack/react-table';
+import { CellProps } from './Cell';
+import { RowData } from './tableTypes';
+export type CellWrapperProps<D extends RowData> = CellProps & {
+    cell: Cell<D, unknown>;
+    selectable?: boolean;
+    style: CSSProperties;
+    selectedColumnValuesRef?: RefObject<(string | undefined)[][]>;
+};
+export declare const CellWrapper: <D extends object>(props: CellWrapperProps<D>) => React.JSX.Element;

package/lib/components/Table/CellWrapper.js

@@ -0,0 +1,29 @@
+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 (React.createElement(TableCell, { onClickSelection: isSelectable ? onClickSelection : undefined, selectionStartedRef: isSelectable ? selectionStartedRef : undefined, onMouseEnterSelection: isSelectable ? onMouseEnterSelection : undefined, ...rest }, flexRender(cell.column.columnDef.cell, cell.getContext())));
+};
+//# sourceMappingURL=CellWrapper.js.map

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

@@ -0,0 +1 @@
+{"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.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Cell as CellType, HeaderContext } from '@tanstack/react-table';
+/**
+ * Few notes about text truncation:
+ * We try to enhance Header, Footer and Cell with text truncation and a tooltip using TruncatedText.
+ * This is only possible for string and number values.
+ * If we use a component as a custom renderer, we can't pass its value to TruncatedText
+ * because its prop `text` only accepts string or number.
+ * The above also applies to simple functions returning string - react-table transforms them into react components.
+ * Here's how react-table renderers are made: https://github.com/tannerlinsley/react-table/blob/6e2fe31ac028e543ce0f9d56168d5f922389fbbc/src/publicUtils.js#L199
+ */
+export type EnhancedHeaderFooterRendererProps<D extends object> = {
+    context: HeaderContext<D, unknown>;
+    type: 'header' | 'footer';
+};
+export declare const EnhancedHeaderFooterRenderer: <D extends object>({ context, type }: EnhancedHeaderFooterRendererProps<D>) => React.JSX.Element;
+export type EnhancedCellRendererProps<D extends object> = {
+    cell: CellType<D, unknown>;
+    columnResizing: boolean;
+};
+export declare const EnhancedCellRenderer: <D extends object>({ cell, columnResizing }: EnhancedCellRendererProps<D>) => React.JSX.Element;

package/lib/components/Table/EnhancedRenderers.js

@@ -0,0 +1,13 @@
+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));
+};
+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

@@ -0,0 +1 @@
+{"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.d.ts

@@ -0,0 +1,25 @@
+import React, { MouseEvent, KeyboardEvent, DragEvent, CSSProperties } from 'react';
+export type HeaderProps = {
+    /**
+     * Number fields should be right aligned as that allows
+     * you to compare them or add them up quickly in your head.
+     */
+    align?: 'left' | 'right' | 'center';
+    colSpan?: number;
+    canSort: boolean;
+    isSorted: boolean;
+    isSortedDesc?: boolean;
+    onClick?: (event: MouseEvent | KeyboardEvent) => void;
+    canResize: boolean;
+    isResizing: boolean;
+    size?: number;
+    index: number;
+    style?: CSSProperties;
+    role: string;
+    className?: string;
+    children?: React.ReactNode;
+    resizeHandler: (e: unknown) => void;
+    onDragStart?: (e: DragEvent) => void;
+    onDrop?: (e: DragEvent, index: number) => void;
+};
+export declare const Header: ({ align, colSpan, children, canSort, isSorted, isSortedDesc, canResize, isResizing, onClick, style, className, role, index, size, onDragStart, onDrop, resizeHandler, }: HeaderProps) => React.JSX.Element;

package/lib/components/Table/Header.js

@@ -0,0 +1,94 @@
+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;
+    }
+    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,
+                }) })))));
+};
+//# sourceMappingURL=Header.js.map