@economic/taco 2.25.1-alpha.13 → 2.25.1

package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/Highlight.js

@@ -0,0 +1,41 @@
+import React__default from 'react';
+import cn from 'clsx';
+import { useRowContext } from '../../rows/RowContext.js';
+import { scrollColumnIntoView } from '../../../util/columns.js';
+
+const Highlight = props => {
+  const {
+    current,
+    frozenColumnIndex,
+    index,
+    tableRef,
+    ...attributes
+  } = props;
+  const {
+    hasError: rowHasError
+  } = useRowContext();
+  const ref = React__default.useRef(null);
+  const className = cn('h-full flex [justify-content:inherit] [text-align:inherit]', props.className, {
+    // normal row
+    'bg-blue-200/25': !current && !rowHasError,
+    // current row
+    'bg-blue-200/75': current && !rowHasError,
+    // normal row with error
+    'bg-[#eaeaf5]': !current && rowHasError,
+    // current with error
+    'bg-[#dadaf5]': current && rowHasError
+  });
+  React__default.useEffect(() => {
+    if (ref.current && current) {
+      scrollColumnIntoView(index, frozenColumnIndex, ref.current, tableRef.current);
+    }
+  }, [current]);
+  return /*#__PURE__*/React__default.createElement("div", Object.assign({}, attributes, {
+    "data-taco": "highlight",
+    className: className,
+    ref: ref
+  }));
+};
+
+export { Highlight };
+//# sourceMappingURL=Highlight.js.map

package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/Highlight.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Highlight.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/cell/Highlight.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { scrollColumnIntoView } from '../../../util/columns';\nimport { useRowContext } from '../../rows/RowContext';\n\nexport const Highlight = props => {\n    const { current, frozenColumnIndex, index, tableRef, ...attributes } = props;\n    const { hasError: rowHasError } = useRowContext();\n\n    const ref = React.useRef<HTMLDivElement | null>(null);\n    const className = cn('h-full flex [justify-content:inherit] [text-align:inherit]', props.className, {\n        // normal row\n        'bg-blue-200/25': !current && !rowHasError,\n        // current row\n        'bg-blue-200/75': current && !rowHasError,\n        // normal row with error\n        'bg-[#eaeaf5]': !current && rowHasError,\n        // current with error\n        'bg-[#dadaf5]': current && rowHasError,\n    });\n\n    React.useEffect(() => {\n        if (ref.current && current) {\n            scrollColumnIntoView(index, frozenColumnIndex, ref.current, tableRef.current);\n        }\n    }, [current]);\n\n    return <div {...attributes} data-taco=\"highlight\" className={className} ref={ref} />;\n};\n"],"names":["Highlight","props","current","frozenColumnIndex","index","tableRef","attributes","hasError","rowHasError","useRowContext","ref","React","useRef","className","cn","useEffect","scrollColumnIntoView"],"mappings":";;;;;MAKaA,SAAS,GAAGC,KAAK;EAC1B,MAAM;IAAEC,OAAO;IAAEC,iBAAiB;IAAEC,KAAK;IAAEC,QAAQ;IAAE,GAAGC;GAAY,GAAGL,KAAK;EAC5E,MAAM;IAAEM,QAAQ,EAAEC;GAAa,GAAGC,aAAa,EAAE;EAEjD,MAAMC,GAAG,GAAGC,cAAK,CAACC,MAAM,CAAwB,IAAI,CAAC;EACrD,MAAMC,SAAS,GAAGC,EAAE,CAAC,4DAA4D,EAAEb,KAAK,CAACY,SAAS,EAAE;;IAEhG,gBAAgB,EAAE,CAACX,OAAO,IAAI,CAACM,WAAW;;IAE1C,gBAAgB,EAAEN,OAAO,IAAI,CAACM,WAAW;;IAEzC,cAAc,EAAE,CAACN,OAAO,IAAIM,WAAW;;IAEvC,cAAc,EAAEN,OAAO,IAAIM;GAC9B,CAAC;EAEFG,cAAK,CAACI,SAAS,CAAC;IACZ,IAAIL,GAAG,CAACR,OAAO,IAAIA,OAAO,EAAE;MACxBc,oBAAoB,CAACZ,KAAK,EAAED,iBAAiB,EAAEO,GAAG,CAACR,OAAO,EAAEG,QAAQ,CAACH,OAAO,CAAC;;GAEpF,EAAE,CAACA,OAAO,CAAC,CAAC;EAEb,oBAAOS,sDAASL,UAAU;iBAAY,WAAW;IAACO,SAAS,EAAEA,SAAS;IAAEH,GAAG,EAAEA;KAAO;AACxF;;;;"}

package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/Indicator.js

@@ -0,0 +1,88 @@
+import React__default from 'react';
+import cn from 'clsx';
+import { Icon } from '../../../../Icon/Icon.js';
+import { Tooltip } from '../../../../Tooltip/Tooltip.js';
+import { useLocalization } from '../../../../Provider/Localization.js';
+import ReactDOM from 'react-dom';
+
+var IndicatorReason;
+(function (IndicatorReason) {
+  IndicatorReason["SEARCH"] = "SEARCH";
+  IndicatorReason["SORTING"] = "SORTING";
+  IndicatorReason["FILTER"] = "FILTER";
+})(IndicatorReason || (IndicatorReason = {}));
+const useIndicatorText = reason => {
+  let title = '';
+  let description = '';
+  const {
+    texts
+  } = useLocalization();
+  switch (reason) {
+    case IndicatorReason.FILTER:
+      title = texts.table3.editing.rowIndicator.rowWillBeHidden;
+      description = texts.table3.editing.rowIndicator.rowWillMoveReasonFilter;
+      break;
+    case IndicatorReason.SEARCH:
+      title = texts.table3.editing.rowIndicator.rowWillBeHidden;
+      description = texts.table3.editing.rowIndicator.rowWillMoveReasonSearch;
+      break;
+    case IndicatorReason.SORTING:
+      title = texts.table3.editing.rowIndicator.rowWillMove;
+      description = texts.table3.editing.rowIndicator.rowWillMoveReasonSorting;
+      break;
+  }
+  return {
+    title,
+    description
+  };
+};
+const Indicator = ({
+  reason,
+  columnName,
+  mountNode,
+  validationErrors
+}) => {
+  const container = React__default.useMemo(() => {
+    const element = document.createElement('div');
+    element.className += 'rounded-b-md items-center wcag-blue-500 absolute left-0 top-full ml-1 whitespace-nowrap px-1 py-0.5 text-xs font-bold shadow-sm';
+    return element;
+  }, []);
+  const indicatorText = useIndicatorText(reason);
+  const hasValidationErrorsInRow = !!validationErrors;
+  React__default.useEffect(() => {
+    // mountNode could be null when rows are filtered
+    // Pinned columns has z-20 class assigned, which overlaps indicator element, need to add z-21 to overlap pinned columns.
+    mountNode === null || mountNode === void 0 ? void 0 : mountNode.classList.add('!z-[21]', 'relative');
+    mountNode === null || mountNode === void 0 ? void 0 : mountNode.appendChild(container);
+    return () => {
+      mountNode === null || mountNode === void 0 ? void 0 : mountNode.classList.remove('!z-[21]', 'relative');
+      mountNode === null || mountNode === void 0 ? void 0 : mountNode.removeChild(container);
+    };
+  }, [hasValidationErrorsInRow, mountNode]);
+  // Using react portal inside a react tree component is an unorthodox way, but in order to avoid much code refactoring
+  // and being able to use Taco Tooltip component in side the visual indicator, portal is used.
+  return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: indicatorText.description.replace('[COLUMN]', columnName)
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: "flex gap-1 hover:cursor-pointer"
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    name: "info",
+    className: "!h-4 !w-4 rounded-full bg-white !p-0 text-blue-500"
+  }), indicatorText.title)), container);
+};
+/**
+ * Generates class names needed to highlight row cells, used when row has a move indicator
+ */
+function getIndicatorCellClassName(columnIndex, lastColumnIndex) {
+  return cn('!border-blue !border-y-2 border-x-0', {
+    'border-l-2 rounded-l': columnIndex === 0,
+    'border-r-2 rounded-r': columnIndex === lastColumnIndex
+  });
+}
+function isIndicatorVisible(rowIndex, rowActiveIndex, rowMoveReason) {
+  const isActiveRow = rowActiveIndex === rowIndex;
+  return isActiveRow && rowMoveReason;
+}
+
+export { Indicator, IndicatorReason, getIndicatorCellClassName, isIndicatorVisible, useIndicatorText };
+//# sourceMappingURL=Indicator.js.map

package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/Indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Indicator.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/cell/Indicator.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport ReactDOM from 'react-dom';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { Tooltip } from '../../../../Tooltip/Tooltip';\nimport { Icon } from '../../../../Icon/Icon';\n\nexport enum IndicatorReason {\n    SEARCH = 'SEARCH',\n    SORTING = 'SORTING',\n    FILTER = 'FILTER',\n}\n\nexport const useIndicatorText = reason => {\n    let title = '';\n    let description = '';\n\n    const { texts } = useLocalization();\n\n    switch (reason) {\n        case IndicatorReason.FILTER:\n            title = texts.table3.editing.rowIndicator.rowWillBeHidden;\n            description = texts.table3.editing.rowIndicator.rowWillMoveReasonFilter;\n            break;\n        case IndicatorReason.SEARCH:\n            title = texts.table3.editing.rowIndicator.rowWillBeHidden;\n            description = texts.table3.editing.rowIndicator.rowWillMoveReasonSearch;\n            break;\n        case IndicatorReason.SORTING:\n            title = texts.table3.editing.rowIndicator.rowWillMove;\n            description = texts.table3.editing.rowIndicator.rowWillMoveReasonSorting;\n            break;\n    }\n\n    return { title, description };\n};\n\nexport type IndicatorProps = {\n    reason: IndicatorReason;\n    columnName: string;\n    mountNode: Element | null;\n    validationErrors: any;\n};\nexport const Indicator = ({ reason, columnName, mountNode, validationErrors }: IndicatorProps) => {\n    const container = React.useMemo(() => {\n        const element = document.createElement('div');\n        element.className +=\n            'rounded-b-md items-center wcag-blue-500 absolute left-0 top-full ml-1 whitespace-nowrap px-1 py-0.5 text-xs font-bold shadow-sm';\n\n        return element;\n    }, []);\n\n    const indicatorText = useIndicatorText(reason);\n\n    const hasValidationErrorsInRow = !!validationErrors;\n\n    React.useEffect(() => {\n        // mountNode could be null when rows are filtered\n        // Pinned columns has z-20 class assigned, which overlaps indicator element, need to add z-21 to overlap pinned columns.\n        mountNode?.classList.add('!z-[21]', 'relative');\n        mountNode?.appendChild(container);\n\n        return () => {\n            mountNode?.classList.remove('!z-[21]', 'relative');\n            mountNode?.removeChild(container);\n        };\n    }, [hasValidationErrorsInRow, mountNode]);\n\n    // Using react portal inside a react tree component is an unorthodox way, but in order to avoid much code refactoring\n    // and being able to use Taco Tooltip component in side the visual indicator, portal is used.\n    return ReactDOM.createPortal(\n        <Tooltip title={indicatorText.description.replace('[COLUMN]', columnName)}>\n            <span className=\"flex gap-1 hover:cursor-pointer\">\n                <Icon name=\"info\" className=\"!h-4 !w-4 rounded-full bg-white !p-0 text-blue-500\" />\n                {indicatorText.title}\n            </span>\n        </Tooltip>,\n        container\n    );\n};\n\n/**\n * Generates class names needed to highlight row cells, used when row has a move indicator\n */\nexport function getIndicatorCellClassName(columnIndex: number, lastColumnIndex: number) {\n    return cn('!border-blue !border-y-2 border-x-0', {\n        'border-l-2 rounded-l': columnIndex === 0,\n        'border-r-2 rounded-r': columnIndex === lastColumnIndex,\n    });\n}\n\nexport function isIndicatorVisible(rowIndex, rowActiveIndex, rowMoveReason) {\n    const isActiveRow = rowActiveIndex === rowIndex;\n    return isActiveRow && rowMoveReason;\n}\n"],"names":["IndicatorReason","useIndicatorText","reason","title","description","texts","useLocalization","FILTER","table3","editing","rowIndicator","rowWillBeHidden","rowWillMoveReasonFilter","SEARCH","rowWillMoveReasonSearch","SORTING","rowWillMove","rowWillMoveReasonSorting","Indicator","columnName","mountNode","validationErrors","container","React","useMemo","element","document","createElement","className","indicatorText","hasValidationErrorsInRow","useEffect","classList","add","appendChild","remove","removeChild","ReactDOM","createPortal","Tooltip","replace","Icon","name","getIndicatorCellClassName","columnIndex","lastColumnIndex","cn","isIndicatorVisible","rowIndex","rowActiveIndex","rowMoveReason","isActiveRow"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/controls/TextareaControl.js

@@ -0,0 +1,144 @@
+import React__default from 'react';
+import cn from 'clsx';
+import { useMergedRef } from '../../../../../../hooks/useMergedRef.js';
+import { getCellAlignmentClasses } from '../../styles.js';
+import { Textarea } from '../../../../../Textarea/Textarea.js';
+
+// By UX design, textarea should fold to min size when blured and extend to max 5 lines height when edited in enableTruncate mode,
+// for this reason we need to set min/max height limits for each font size value.
+const heights = {
+  small: {
+    min: 24,
+    max: 86
+  },
+  medium: {
+    min: 32,
+    max: 100
+  },
+  large: {
+    min: 40,
+    max: 140
+  }
+};
+const TextareaControl = /*#__PURE__*/React__default.forwardRef(function TextareaControl(props, externalRef) {
+  const {
+    onKeyDown: handleKeyDown,
+    onChange: handleChange,
+    onBlur,
+    onFocus,
+    column,
+    isCellInDetailMode,
+    align,
+    isActiveRow,
+    value,
+    fontSize,
+    tableRef: _1,
+    initialValue: _2,
+    ...attributes
+  } = props;
+  const minMaxHeight = heights[fontSize];
+  const columnMeta = column.columnDef.meta;
+  const ref = useMergedRef(externalRef);
+  React__default.useEffect(() => {
+    if (ref !== null && ref !== void 0 && ref.current) {
+      // Need to reset textarea to min height when font size got changed and if column in enable truncate mode.
+      if (columnMeta !== null && columnMeta !== void 0 && columnMeta.enableTruncate) {
+        const textareaElement = ref === null || ref === void 0 ? void 0 : ref.current;
+        textareaElement.style.height = `${minMaxHeight.min}px`;
+        // If truncation is not enabled, then textarea should re-calculate it's height to fit with it's own content, when initialized or fonsSize got changed.
+      } else {
+        const textareaElement = ref === null || ref === void 0 ? void 0 : ref.current;
+        resizeTextArea(textareaElement);
+      }
+    }
+  }, [fontSize]);
+  React__default.useEffect(() => {
+    // If truncation is enabled, then textarea should only adjust to it's own content, when in detail mode.
+    // Otherwise it should collapse to minimal height.
+    if (ref !== null && ref !== void 0 && ref.current && columnMeta !== null && columnMeta !== void 0 && columnMeta.enableTruncate) {
+      const textareaElement = ref === null || ref === void 0 ? void 0 : ref.current;
+      if (isCellInDetailMode) {
+        resizeTextArea(textareaElement);
+      } else {
+        textareaElement.style.height = `${minMaxHeight.min}px`;
+      }
+    }
+  }, [isCellInDetailMode]);
+  const resizeTextArea = textareaElement => {
+    // Need to set inherit before calculating height, so that browser sets the scrollHeight properly,
+    // depending on text inside.
+    const textareaRect = textareaElement.getBoundingClientRect();
+    const prevHeight = textareaRect.height;
+    if (columnMeta !== null && columnMeta !== void 0 && columnMeta.enableTruncate) {
+      if (prevHeight < minMaxHeight.max) {
+        textareaElement.style.height = 'inherit';
+        textareaElement.style.height = `${Math.min(textareaElement.scrollHeight, minMaxHeight.max)}px`;
+      }
+    } else {
+      textareaElement.style.height = 'inherit';
+      textareaElement.style.height = `${textareaElement.scrollHeight}px`;
+    }
+  };
+  const handleTextareaChange = e => {
+    resizeTextArea(e.target);
+  };
+  const textareaContainerClassName = cn('w-full', {
+    'focus-within:absolute focus-within:left-0 focus-within:top-0 focus-within:z-[9]': columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.enableTruncate
+  });
+  const handleTextareaKeyDown = event => {
+    // By default Shift + Enter in textarea makes a new line, we want to keep this behaviour
+    if (event.shiftKey && event.key === 'Enter') {
+      return;
+    } else {
+      handleKeyDown(event);
+    }
+  };
+  const handleBlur = event => {
+    // If truncation is enabled, then textarea should shring back to min height, when loosing focus.
+    if (columnMeta !== null && columnMeta !== void 0 && columnMeta.enableTruncate) {
+      const textareaElement = event.currentTarget;
+      textareaElement.style.height = `${minMaxHeight.min}px`;
+    }
+    onBlur(event);
+  };
+  const handleFocus = event => {
+    const textareaElement = ref === null || ref === void 0 ? void 0 : ref.current;
+    if (textareaElement) {
+      resizeTextArea(textareaElement);
+    }
+    onFocus(event);
+  };
+  return /*#__PURE__*/React__default.createElement("div", {
+    "data-taco": "input-container"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      minHeight: `${minMaxHeight.min}px`
+    },
+    className: "relative"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: textareaContainerClassName
+  }, /*#__PURE__*/React__default.createElement(Textarea, Object.assign({}, attributes, {
+    onChange: event => {
+      handleChange(event.target.value);
+      handleTextareaChange(event);
+    },
+    rows: 1,
+    onKeyDown: e => {
+      handleTextareaKeyDown(e);
+    },
+    onBlur: handleBlur,
+    onFocus: handleFocus,
+    className: cn(getCellAlignmentClasses(align), `h-fit resize-none overflow-hidden focus:overflow-auto [&:not(:focus)]:whitespace-nowrap`, {
+      [`!min-h-[${minMaxHeight.min}px]`]: columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.enableTruncate,
+      '!yt-focus-dark': isCellInDetailMode,
+      [`h-[${minMaxHeight.min}px]`]: !isCellInDetailMode && (columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.enableTruncate),
+      // Only allow resizing when focused and truncation enabled
+      'focus:resize-y': isActiveRow && (columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.enableTruncate)
+    }),
+    ref: ref,
+    value: String(value !== null && value !== void 0 ? value : '')
+  })))));
+});
+
+export { TextareaControl };
+//# sourceMappingURL=TextareaControl.js.map

package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/controls/TextareaControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextareaControl.js","sources":["../../../../../../../../../../../src/components/Table3/components/columns/cell/controls/TextareaControl.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { Textarea } from '../../../../../Textarea/Textarea';\nimport { EditingControlProps } from '../EditingControl';\nimport { getCellAlignmentClasses } from '../../styles';\nimport { useMergedRef } from '../../../../../../hooks/useMergedRef';\nimport { FontSize } from '../../../../../../types';\n\ntype TextareaHeight = {\n    min: number;\n    max: number;\n};\n// By UX design, textarea should fold to min size when blured and extend to max 5 lines height when edited in enableTruncate mode,\n// for this reason we need to set min/max height limits for each font size value.\nconst heights: Record<FontSize, TextareaHeight> = {\n    small: {\n        min: 24,\n        max: 86,\n    },\n    medium: {\n        min: 32,\n        max: 100,\n    },\n    large: {\n        min: 40,\n        max: 140,\n    },\n};\n\ntype TextareaControlProps<TType = unknown> = EditingControlProps<TType> & {\n    onKeyDown: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;\n    fontSize: FontSize;\n    invalid: boolean;\n    isCellInDetailMode?: boolean;\n};\n\nexport const TextareaControl = React.forwardRef<HTMLElement, any>(function TextareaControl<TType = unknown>(\n    props: TextareaControlProps<TType>,\n    externalRef: React.Ref<HTMLElement>\n) {\n    const {\n        onKeyDown: handleKeyDown,\n        onChange: handleChange,\n        onBlur,\n        onFocus,\n        column,\n        isCellInDetailMode,\n        align,\n        isActiveRow,\n        value,\n        fontSize,\n        tableRef: _1,\n        initialValue: _2,\n        ...attributes\n    } = props;\n\n    const minMaxHeight = heights[fontSize];\n\n    const columnMeta = column.columnDef.meta;\n\n    const ref = useMergedRef<HTMLTextAreaElement>(externalRef);\n\n    React.useEffect(() => {\n        if (ref?.current) {\n            // Need to reset textarea to min height when font size got changed and if column in enable truncate mode.\n            if (columnMeta?.enableTruncate) {\n                const textareaElement = ref?.current as HTMLTextAreaElement;\n                textareaElement.style.height = `${minMaxHeight.min}px`;\n\n                // If truncation is not enabled, then textarea should re-calculate it's height to fit with it's own content, when initialized or fonsSize got changed.\n            } else {\n                const textareaElement = ref?.current as HTMLTextAreaElement;\n                resizeTextArea(textareaElement);\n            }\n        }\n    }, [fontSize]);\n\n    React.useEffect(() => {\n        // If truncation is enabled, then textarea should only adjust to it's own content, when in detail mode.\n        // Otherwise it should collapse to minimal height.\n        if (ref?.current && columnMeta?.enableTruncate) {\n            const textareaElement = ref?.current as HTMLTextAreaElement;\n\n            if (isCellInDetailMode) {\n                resizeTextArea(textareaElement);\n            } else {\n                textareaElement.style.height = `${minMaxHeight.min}px`;\n            }\n        }\n    }, [isCellInDetailMode]);\n\n    const resizeTextArea = (textareaElement: HTMLTextAreaElement) => {\n        // Need to set inherit before calculating height, so that browser sets the scrollHeight properly,\n        // depending on text inside.\n        const textareaRect = textareaElement.getBoundingClientRect();\n        const prevHeight = textareaRect.height;\n        if (columnMeta?.enableTruncate) {\n            if (prevHeight < minMaxHeight.max) {\n                textareaElement.style.height = 'inherit';\n                textareaElement.style.height = `${Math.min(textareaElement.scrollHeight, minMaxHeight.max)}px`;\n            }\n        } else {\n            textareaElement.style.height = 'inherit';\n            textareaElement.style.height = `${textareaElement.scrollHeight}px`;\n        }\n    };\n\n    const handleTextareaChange = e => {\n        resizeTextArea(e.target);\n    };\n\n    const textareaContainerClassName = cn('w-full', {\n        'focus-within:absolute focus-within:left-0 focus-within:top-0 focus-within:z-[9]': columnMeta?.enableTruncate,\n    });\n    const handleTextareaKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n        // By default Shift + Enter in textarea makes a new line, we want to keep this behaviour\n        if (event.shiftKey && event.key === 'Enter') {\n            return;\n        } else {\n            handleKeyDown(event);\n        }\n    };\n\n    const handleBlur = event => {\n        // If truncation is enabled, then textarea should shring back to min height, when loosing focus.\n        if (columnMeta?.enableTruncate) {\n            const textareaElement = event.currentTarget;\n            textareaElement.style.height = `${minMaxHeight.min}px`;\n        }\n        onBlur(event);\n    };\n\n    const handleFocus = (event: React.FocusEvent) => {\n        const textareaElement = ref?.current;\n\n        if (textareaElement) {\n            resizeTextArea(textareaElement);\n        }\n\n        onFocus(event);\n    };\n\n    return (\n        <div data-taco=\"input-container\">\n            {/**\n             * Textarea should have min height placeholder, because it becomes absolute positioned when focused,\n             * which leads to overlapping of validation message rendered bellow.\n             * Somehow tailwind cannot dynamically assign min height when arbitary value has been used(in this particular case),\n             * so assigning it through style prop here\n             **/}\n            <div style={{ minHeight: `${minMaxHeight.min}px` }} className=\"relative\">\n                <div className={textareaContainerClassName}>\n                    <Textarea\n                        {...attributes}\n                        onChange={event => {\n                            handleChange(event.target.value);\n                            handleTextareaChange(event);\n                        }}\n                        rows={1}\n                        onKeyDown={e => {\n                            handleTextareaKeyDown(e);\n                        }}\n                        onBlur={handleBlur}\n                        onFocus={handleFocus}\n                        className={cn(\n                            getCellAlignmentClasses(align),\n                            `h-fit resize-none overflow-hidden focus:overflow-auto [&:not(:focus)]:whitespace-nowrap`,\n                            {\n                                [`!min-h-[${minMaxHeight.min}px]`]: columnMeta?.enableTruncate,\n                                '!yt-focus-dark': isCellInDetailMode,\n                                [`h-[${minMaxHeight.min}px]`]: !isCellInDetailMode && columnMeta?.enableTruncate,\n                                // Only allow resizing when focused and truncation enabled\n                                'focus:resize-y': isActiveRow && columnMeta?.enableTruncate,\n                            }\n                        )}\n                        ref={ref}\n                        value={String(value ?? '')}\n                    />\n                </div>\n            </div>\n        </div>\n    );\n});\n"],"names":["heights","small","min","max","medium","large","TextareaControl","React","forwardRef","props","externalRef","onKeyDown","handleKeyDown","onChange","handleChange","onBlur","onFocus","column","isCellInDetailMode","align","isActiveRow","value","fontSize","tableRef","_1","initialValue","_2","attributes","minMaxHeight","columnMeta","columnDef","meta","ref","useMergedRef","useEffect","current","enableTruncate","textareaElement","style","height","resizeTextArea","textareaRect","getBoundingClientRect","prevHeight","Math","scrollHeight","handleTextareaChange","e","target","textareaContainerClassName","cn","handleTextareaKeyDown","event","shiftKey","key","handleBlur","currentTarget","handleFocus","minHeight","className","Textarea","rows","getCellAlignmentClasses","String"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Table3/components/columns/footer/Footer.js

@@ -0,0 +1,50 @@
+import React__default from 'react';
+import cn from 'clsx';
+import { isFrozenColumn } from '../../../util/columns.js';
+
+function Footer(props) {
+  const {
+    column,
+    header,
+    table
+  } = props;
+  const meta = React__default.useMemo(() => column.columnDef.meta, []);
+  // Footers are heavily memoized because performance in our table is critical
+  // be careful and selective about props that you pass to the Footer
+  const memoedProps = {
+    align: meta.align,
+    id: header.id,
+    index: header.index,
+    isFrozen: isFrozenColumn(header, table),
+    meta,
+    table
+  };
+  return /*#__PURE__*/React__default.createElement(MemoedFooter, Object.assign({}, memoedProps));
+}
+const MemoedFooter = /*#__PURE__*/React__default.memo(function MemoedFooter(props) {
+  const {
+    align,
+    id,
+    index,
+    isFrozen,
+    meta,
+    table
+  } = props;
+  const className = cn('sticky bottom-0 border-t-2 font-bold h-10 box-content items-center group/column relative z-10', {
+    'z-30': isFrozen
+  });
+  if (table.options.debugAll) {
+    console.log('footer render', id);
+  }
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: className,
+    "data-align": align,
+    "data-column-index": index,
+    role: "columnheader"
+  }, typeof meta.footer === 'function' ? ( /*#__PURE__*/React__default.createElement("span", {
+    className: "flex-grow truncate"
+  }, meta.footer(table.getRowModel().rows.map(row => row.original[id])))) : null);
+});
+
+export { Footer };
+//# sourceMappingURL=Footer.js.map

package/dist/esm/packages/taco/src/components/Table3/components/columns/footer/Footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Footer.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/footer/Footer.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { ColumnMeta, HeaderContext } from '@tanstack/react-table';\nimport { isFrozenColumn } from '../../../util/columns';\nimport { Table3ColumnAlignment, Table3ColumnFooterRenderer } from '../../../types';\n\nexport type FooterProps<TType = unknown> = HeaderContext<TType, unknown> & {\n    renderer?: Table3ColumnFooterRenderer<TType>;\n};\n\nexport function Footer<TType = unknown>(props: FooterProps<TType>) {\n    const { column, header, table } = props;\n    const meta = React.useMemo(() => column.columnDef.meta, []) as ColumnMeta<TType, unknown>;\n\n    // Footers are heavily memoized because performance in our table is critical\n    // be careful and selective about props that you pass to the Footer\n    const memoedProps = {\n        align: meta.align,\n        id: header.id,\n        index: header.index,\n        isFrozen: isFrozenColumn(header, table),\n        meta,\n        table,\n    };\n\n    return <MemoedFooter<TType> {...memoedProps} />;\n}\n\n// Memoization\nexport type MemoedFooterProps<TType = unknown> = Omit<FooterProps<TType>, 'header' | 'column' | 'scrollToIndex'> & {\n    align?: Table3ColumnAlignment;\n    id: string;\n    index: number;\n    isFrozen: boolean;\n    meta: ColumnMeta<TType, unknown>;\n};\n\nconst MemoedFooter = React.memo(function MemoedFooter<TType = unknown>(props: MemoedFooterProps<TType>) {\n    const { align, id, index, isFrozen, meta, table } = props;\n\n    const className = cn('sticky bottom-0 border-t-2 font-bold h-10 box-content items-center group/column relative z-10', {\n        'z-30': isFrozen,\n    });\n\n    if (table.options.debugAll) {\n        console.log('footer render', id);\n    }\n\n    return (\n        <div className={className} data-align={align} data-column-index={index} role=\"columnheader\">\n            {typeof meta.footer === 'function' ? (\n                <span className=\"flex-grow truncate\">{meta.footer(table.getRowModel().rows.map(row => row.original[id]))}</span>\n            ) : null}\n        </div>\n    );\n}) as <TType = unknown>(props: MemoedFooterProps<TType>) => JSX.Element;\n"],"names":["Footer","props","column","header","table","meta","React","useMemo","columnDef","memoedProps","align","id","index","isFrozen","isFrozenColumn","MemoedFooter","memo","className","cn","options","debugAll","console","log","role","footer","getRowModel","rows","map","row","original"],"mappings":";;;;SAUgBA,MAAMA,CAAkBC,KAAyB;EAC7D,MAAM;IAAEC,MAAM;IAAEC,MAAM;IAAEC;GAAO,GAAGH,KAAK;EACvC,MAAMI,IAAI,GAAGC,cAAK,CAACC,OAAO,CAAC,MAAML,MAAM,CAACM,SAAS,CAACH,IAAI,EAAE,EAAE,CAA+B;;;EAIzF,MAAMI,WAAW,GAAG;IAChBC,KAAK,EAAEL,IAAI,CAACK,KAAK;IACjBC,EAAE,EAAER,MAAM,CAACQ,EAAE;IACbC,KAAK,EAAET,MAAM,CAACS,KAAK;IACnBC,QAAQ,EAAEC,cAAc,CAACX,MAAM,EAAEC,KAAK,CAAC;IACvCC,IAAI;IACJD;GACH;EAED,oBAAOE,6BAACS,YAAY,oBAAYN,WAAW,EAAI;AACnD;AAWA,MAAMM,YAAY,gBAAGT,cAAK,CAACU,IAAI,CAAC,SAASD,YAAYA,CAAkBd,KAA+B;EAClG,MAAM;IAAES,KAAK;IAAEC,EAAE;IAAEC,KAAK;IAAEC,QAAQ;IAAER,IAAI;IAAED;GAAO,GAAGH,KAAK;EAEzD,MAAMgB,SAAS,GAAGC,EAAE,CAAC,+FAA+F,EAAE;IAClH,MAAM,EAAEL;GACX,CAAC;EAEF,IAAIT,KAAK,CAACe,OAAO,CAACC,QAAQ,EAAE;IACxBC,OAAO,CAACC,GAAG,CAAC,eAAe,EAAEX,EAAE,CAAC;;EAGpC,oBACIL;IAAKW,SAAS,EAAEA,SAAS;kBAAcP,KAAK;yBAAqBE,KAAK;IAAEW,IAAI,EAAC;KACxE,OAAOlB,IAAI,CAACmB,MAAM,KAAK,UAAU,kBAC9BlB;IAAMW,SAAS,EAAC;KAAsBZ,IAAI,CAACmB,MAAM,CAACpB,KAAK,CAACqB,WAAW,EAAE,CAACC,IAAI,CAACC,GAAG,CAACC,GAAG,IAAIA,GAAG,CAACC,QAAQ,CAAClB,EAAE,CAAC,CAAC,CAAC,CAAQ,IAChH,IAAI,CACN;AAEd,CAAC,CAAsE;;;;"}

package/dist/esm/packages/taco/src/components/Table3/components/columns/footer/Summary.js

@@ -0,0 +1,41 @@
+import React__default from 'react';
+import { useLocalization } from '../../../../Provider/Localization.js';
+
+function Summary(props) {
+  var _table$getState$colum;
+  const {
+    currentLength,
+    length,
+    table
+  } = props;
+  const tableMeta = table.options.meta;
+  const {
+    locale,
+    texts
+  } = useLocalization();
+  let label;
+  let count;
+  // row selection
+  const rowsSelectedLength = table.getSelectedRowModel().rows.length;
+  if (rowsSelectedLength > 0) {
+    label = texts.table3.footer.summary.selected;
+    count = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("strong", null, new Intl.NumberFormat(locale).format(rowsSelectedLength)), "\u00A0", texts.table3.footer.summary.count, "\u00A0", /*#__PURE__*/React__default.createElement("strong", null, new Intl.NumberFormat(locale).format(length)));
+  } else if ((_table$getState$colum = table.getState().columnFilters) !== null && _table$getState$colum !== void 0 && _table$getState$colum.length ||
+  // filtered data
+  // @ts-expect-error: fixing type issue while report and table3 TableMeta definitions live in parallel
+  !!table.getState().globalFilter && tableMeta.search.excludeUnmatchedResults // search with hide enabled
+  ) {
+    label = texts.table3.footer.summary.records;
+    count = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("strong", null, currentLength), "\u00A0", texts.table3.footer.summary.count, "\u00A0", /*#__PURE__*/React__default.createElement("strong", null, new Intl.NumberFormat(locale).format(length)));
+  } else {
+    label = texts.table3.footer.summary.records;
+    count = /*#__PURE__*/React__default.createElement("strong", null, new Intl.NumberFormat(locale).format(length));
+  }
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "sticky bottom-0 left-0 z-40 -mt-10 flex h-10 w-fit items-center whitespace-nowrap bg-white px-4 !pr-3 shadow-[6px_0px_6px_theme(colors.white)]",
+    "data-taco": "table2-footer-summary"
+  }, label, "\u00A0", count);
+}
+
+export { Summary };
+//# sourceMappingURL=Summary.js.map

package/dist/esm/packages/taco/src/components/Table3/components/columns/footer/Summary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Summary.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/footer/Summary.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as RTable, TableMeta } from '@tanstack/react-table';\nimport { useLocalization } from '../../../../Provider/Localization';\n\nexport type FooterSummaryProps<TType = unknown> = {\n    currentLength: number;\n    length: number;\n    table: RTable<TType>;\n};\n\nexport function Summary<TType = unknown>(props: FooterSummaryProps<TType>) {\n    const { currentLength, length, table } = props;\n    const tableMeta = table.options.meta as TableMeta<TType>;\n    const { locale, texts } = useLocalization();\n\n    let label;\n    let count;\n\n    // row selection\n    const rowsSelectedLength = table.getSelectedRowModel().rows.length;\n\n    if (rowsSelectedLength > 0) {\n        label = texts.table3.footer.summary.selected;\n        count = (\n            <>\n                <strong>{new Intl.NumberFormat(locale).format(rowsSelectedLength)}</strong>&nbsp;\n                {texts.table3.footer.summary.count}&nbsp;\n                <strong>{new Intl.NumberFormat(locale).format(length)}</strong>\n            </>\n        );\n    } else if (\n        table.getState().columnFilters?.length || // filtered data\n        // @ts-expect-error: fixing type issue while report and table3 TableMeta definitions live in parallel\n        (!!table.getState().globalFilter && tableMeta.search.excludeUnmatchedResults) // search with hide enabled\n    ) {\n        label = texts.table3.footer.summary.records;\n        count = (\n            <>\n                <strong>{currentLength}</strong>&nbsp;\n                {texts.table3.footer.summary.count}&nbsp;\n                <strong>{new Intl.NumberFormat(locale).format(length)}</strong>\n            </>\n        );\n    } else {\n        label = texts.table3.footer.summary.records;\n        count = <strong>{new Intl.NumberFormat(locale).format(length)}</strong>;\n    }\n\n    return (\n        <div\n            className=\"sticky bottom-0 left-0 z-40 -mt-10 flex h-10 w-fit items-center whitespace-nowrap bg-white px-4 !pr-3 shadow-[6px_0px_6px_theme(colors.white)]\"\n            data-taco=\"table2-footer-summary\">\n            {label}&nbsp;{count}\n        </div>\n    );\n}\n"],"names":["Summary","props","currentLength","length","table","tableMeta","options","meta","locale","texts","useLocalization","label","count","rowsSelectedLength","getSelectedRowModel","rows","table3","footer","summary","selected","React","Intl","NumberFormat","format","_table$getState$colum","getState","columnFilters","globalFilter","search","excludeUnmatchedResults","records","className"],"mappings":";;;SAUgBA,OAAOA,CAAkBC,KAAgC;;EACrE,MAAM;IAAEC,aAAa;IAAEC,MAAM;IAAEC;GAAO,GAAGH,KAAK;EAC9C,MAAMI,SAAS,GAAGD,KAAK,CAACE,OAAO,CAACC,IAAwB;EACxD,MAAM;IAAEC,MAAM;IAAEC;GAAO,GAAGC,eAAe,EAAE;EAE3C,IAAIC,KAAK;EACT,IAAIC,KAAK;;EAGT,MAAMC,kBAAkB,GAAGT,KAAK,CAACU,mBAAmB,EAAE,CAACC,IAAI,CAACZ,MAAM;EAElE,IAAIU,kBAAkB,GAAG,CAAC,EAAE;IACxBF,KAAK,GAAGF,KAAK,CAACO,MAAM,CAACC,MAAM,CAACC,OAAO,CAACC,QAAQ;IAC5CP,KAAK,gBACDQ,yEACIA,6CAAS,IAAIC,IAAI,CAACC,YAAY,CAACd,MAAM,CAAC,CAACe,MAAM,CAACV,kBAAkB,CAAC,CAAU,YAC1EJ,KAAK,CAACO,MAAM,CAACC,MAAM,CAACC,OAAO,CAACN,KAAK,yBAClCQ,6CAAS,IAAIC,IAAI,CAACC,YAAY,CAACd,MAAM,CAAC,CAACe,MAAM,CAACpB,MAAM,CAAC,CAAU,CAEtE;GACJ,MAAM,IACH,CAAAqB,qBAAA,GAAApB,KAAK,CAACqB,QAAQ,EAAE,CAACC,aAAa,cAAAF,qBAAA,eAA9BA,qBAAA,CAAgCrB,MAAM;;;EAErC,CAAC,CAACC,KAAK,CAACqB,QAAQ,EAAE,CAACE,YAAY,IAAItB,SAAS,CAACuB,MAAM,CAACC,uBAAwB;IAC/E;IACElB,KAAK,GAAGF,KAAK,CAACO,MAAM,CAACC,MAAM,CAACC,OAAO,CAACY,OAAO;IAC3ClB,KAAK,gBACDQ,yEACIA,6CAASlB,aAAa,CAAU,YAC/BO,KAAK,CAACO,MAAM,CAACC,MAAM,CAACC,OAAO,CAACN,KAAK,yBAClCQ,6CAAS,IAAIC,IAAI,CAACC,YAAY,CAACd,MAAM,CAAC,CAACe,MAAM,CAACpB,MAAM,CAAC,CAAU,CAEtE;GACJ,MAAM;IACHQ,KAAK,GAAGF,KAAK,CAACO,MAAM,CAACC,MAAM,CAACC,OAAO,CAACY,OAAO;IAC3ClB,KAAK,gBAAGQ,6CAAS,IAAIC,IAAI,CAACC,YAAY,CAACd,MAAM,CAAC,CAACe,MAAM,CAACpB,MAAM,CAAC,CAAU;;EAG3E,oBACIiB;IACIW,SAAS,EAAC,gJAAgJ;iBAChJ;KACTpB,KAAK,YAAQC,KAAK,CACjB;AAEd;;;;"}

package/dist/esm/packages/taco/src/components/Table3/components/columns/header/Goto.js

@@ -0,0 +1,28 @@
+import React__default from 'react';
+import { useLocalization } from '../../../../Provider/Localization.js';
+import { Popover } from '../../../../Popover/Popover.js';
+import { SearchInput } from '../../../../SearchInput/SearchInput.js';
+
+function GotoPopover(props) {
+  const {
+    onGoto: handleGoto,
+    trigger,
+    ...popoverProps
+  } = props;
+  const {
+    texts
+  } = useLocalization();
+  const handleSearch = value => handleGoto(value);
+  return /*#__PURE__*/React__default.createElement(Popover, Object.assign({}, popoverProps, {
+    anchor: trigger
+  }), /*#__PURE__*/React__default.createElement(Popover.Content, null, /*#__PURE__*/React__default.createElement(SearchInput, {
+    "aria-label": texts.table3.columns.menu.gotoRow,
+    name: "query",
+    onSearch: handleSearch,
+    onKeyDown: event => event.stopPropagation(),
+    placeholder: `${texts.table3.columns.menu.gotoRow}...`
+  })));
+}
+
+export { GotoPopover };
+//# sourceMappingURL=Goto.js.map

package/dist/esm/packages/taco/src/components/Table3/components/columns/header/Goto.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Goto.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/header/Goto.tsx"],"sourcesContent":["import React from 'react';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { Popover, PopoverProps } from '../../../../Popover/Popover';\nimport { SearchInput } from '../../../../SearchInput/SearchInput';\n\nexport type GotoProps = PopoverProps & {\n    onGoto: (query: string) => Promise<void>;\n};\nexport function GotoPopover(props: GotoProps) {\n    const { onGoto: handleGoto, trigger, ...popoverProps } = props;\n    const { texts } = useLocalization();\n\n    const handleSearch = value => handleGoto(value);\n\n    return (\n        <Popover {...popoverProps} anchor={trigger}>\n            <Popover.Content>\n                <SearchInput\n                    aria-label={texts.table3.columns.menu.gotoRow}\n                    name=\"query\"\n                    onSearch={handleSearch}\n                    onKeyDown={event => event.stopPropagation()}\n                    placeholder={`${texts.table3.columns.menu.gotoRow}...`}\n                />\n            </Popover.Content>\n        </Popover>\n    );\n}\n"],"names":["GotoPopover","props","onGoto","handleGoto","trigger","popoverProps","texts","useLocalization","handleSearch","value","React","Popover","anchor","Content","SearchInput","table3","columns","menu","gotoRow","name","onSearch","onKeyDown","event","stopPropagation","placeholder"],"mappings":";;;;;SAQgBA,WAAWA,CAACC,KAAgB;EACxC,MAAM;IAAEC,MAAM,EAAEC,UAAU;IAAEC,OAAO;IAAE,GAAGC;GAAc,GAAGJ,KAAK;EAC9D,MAAM;IAAEK;GAAO,GAAGC,eAAe,EAAE;EAEnC,MAAMC,YAAY,GAAGC,KAAK,IAAIN,UAAU,CAACM,KAAK,CAAC;EAE/C,oBACIC,6BAACC,OAAO,oBAAKN,YAAY;IAAEO,MAAM,EAAER;mBAC/BM,6BAACC,OAAO,CAACE,OAAO,qBACZH,6BAACI,WAAW;kBACIR,KAAK,CAACS,MAAM,CAACC,OAAO,CAACC,IAAI,CAACC,OAAO;IAC7CC,IAAI,EAAC,OAAO;IACZC,QAAQ,EAAEZ,YAAY;IACtBa,SAAS,EAAEC,KAAK,IAAIA,KAAK,CAACC,eAAe,EAAE;IAC3CC,WAAW,KAAKlB,KAAK,CAACS,MAAM,CAACC,OAAO,CAACC,IAAI,CAACC;IAC5C,CACY,CACZ;AAElB;;;;"}

package/dist/esm/packages/taco/src/components/Table3/components/columns/header/Group.js

@@ -0,0 +1,74 @@
+import React__default from 'react';
+import cn from 'clsx';
+import { Tooltip } from '../../../../Tooltip/Tooltip.js';
+import { HeaderSeparator } from './Header.js';
+
+function Group(props) {
+  const {
+    children,
+    column,
+    header,
+    table,
+    hasSeparator
+  } = props;
+  const columnMeta = React__default.useMemo(() => column.columnDef.meta, []);
+  const tableMeta = table.options.meta;
+  const memoedProps = {
+    align: 'center',
+    children: children !== null && children !== void 0 ? children : columnMeta.header,
+    colSpan: header.colSpan,
+    hasSeparator,
+    id: header.id,
+    index: header.index,
+    isPrinting: tableMeta.printing.isPrinting,
+    length: table.getRowModel().rows.length,
+    meta: columnMeta,
+    table
+  };
+  return /*#__PURE__*/React__default.createElement(MemoedGroup, Object.assign({}, memoedProps));
+}
+const MemoedGroup = /*#__PURE__*/React__default.memo(function MemoedGroup(props) {
+  var _meta$tooltip;
+  const {
+    align,
+    children,
+    colSpan,
+    hasSeparator,
+    id,
+    isPrinting,
+    meta,
+    table
+  } = props;
+  const containerClassName = cn('px-2 z-10 hover:z-20', {
+    sticky: !isPrinting
+  });
+  const innerClassName = cn('font-bold box-content group/column relative', 'px-[var(--table3-cell-padding-x)]', {
+    'h-10 items-center': !isPrinting,
+    'pb-2': isPrinting,
+    'border-b-2': !!children
+  }, meta.headerClassName);
+  if (table.options.debugAll) {
+    console.log('header group render', id);
+  }
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: containerClassName,
+    style: colSpan > 1 ? {
+      gridColumn: `span ${colSpan} / span ${colSpan}`
+    } : undefined,
+    "data-taco": "table3-column-group",
+    "data-align": align,
+    role: "columnheader"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: innerClassName
+  }, /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: String((_meta$tooltip = meta === null || meta === void 0 ? void 0 : meta.tooltip) !== null && _meta$tooltip !== void 0 ? _meta$tooltip : children),
+    placement: "top"
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: cn({
+      truncate: !isPrinting
+    })
+  }, children)), hasSeparator ? /*#__PURE__*/React__default.createElement(HeaderSeparator, null) : null));
+});
+
+export { Group };
+//# sourceMappingURL=Group.js.map

package/dist/esm/packages/taco/src/components/Table3/components/columns/header/Group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Group.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/header/Group.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\n\nimport { HeaderProps, HeaderSeparator } from './Header';\nimport { ColumnMeta, TableMeta } from '@tanstack/react-table';\nimport { Table3ColumnAlignment } from '../../../types';\nimport { Tooltip } from '../../../../Tooltip/Tooltip';\n\nexport function Group<TType = unknown>(props: HeaderProps<TType>) {\n    const { children, column, header, table, hasSeparator } = props;\n    const columnMeta = React.useMemo(() => column.columnDef.meta, []) as ColumnMeta<TType, unknown>;\n    const tableMeta = table.options.meta as TableMeta<TType>;\n\n    const memoedProps = {\n        align: 'center' as Table3ColumnAlignment,\n        children: children ?? columnMeta.header,\n        colSpan: header.colSpan,\n        hasSeparator,\n        id: header.id,\n        index: header.index,\n        isPrinting: tableMeta.printing.isPrinting,\n        length: table.getRowModel().rows.length,\n        meta: columnMeta,\n        table,\n    };\n\n    return <MemoedGroup<TType> {...memoedProps} />;\n}\n\n// Memoization\nexport type MemoedGroupProps<TType = unknown> = Omit<HeaderProps<TType>, 'column' | 'header' | 'scrollToIndex'> & {\n    align?: Table3ColumnAlignment;\n    colSpan: number;\n    hasSeparator?: boolean;\n    id: string;\n    index: number;\n    isPrinting: boolean;\n    length: number;\n    meta: ColumnMeta<TType, unknown>;\n};\n\nconst MemoedGroup = React.memo(function MemoedGroup<TType = unknown>(props: MemoedGroupProps<TType>) {\n    const { align, children, colSpan, hasSeparator, id, isPrinting, meta, table } = props;\n\n    const containerClassName = cn('px-2 z-10 hover:z-20', { sticky: !isPrinting });\n\n    const innerClassName = cn(\n        'font-bold box-content group/column relative',\n        'px-[var(--table3-cell-padding-x)]',\n        {\n            'h-10 items-center': !isPrinting,\n            'pb-2': isPrinting,\n            'border-b-2': !!children,\n        },\n        meta.headerClassName\n    );\n\n    if (table.options.debugAll) {\n        console.log('header group render', id);\n    }\n\n    return (\n        <div\n            className={containerClassName}\n            style={colSpan > 1 ? { gridColumn: `span ${colSpan} / span ${colSpan}` } : undefined}\n            data-taco=\"table3-column-group\"\n            data-align={align}\n            role=\"columnheader\">\n            <div className={innerClassName}>\n                <Tooltip title={String(meta?.tooltip ?? children)} placement=\"top\">\n                    <span className={cn({ truncate: !isPrinting })}>{children}</span>\n                </Tooltip>\n                {hasSeparator ? <HeaderSeparator /> : null}\n            </div>\n        </div>\n    );\n}) as <TType = unknown>(props: MemoedGroupProps<TType>) => JSX.Element;\n"],"names":["Group","props","children","column","header","table","hasSeparator","columnMeta","React","useMemo","columnDef","meta","tableMeta","options","memoedProps","align","colSpan","id","index","isPrinting","printing","length","getRowModel","rows","MemoedGroup","memo","containerClassName","cn","sticky","innerClassName","headerClassName","debugAll","console","log","className","style","gridColumn","undefined","role","Tooltip","title","String","_meta$tooltip","tooltip","placement","truncate","HeaderSeparator"],"mappings":";;;;;SAQgBA,KAAKA,CAAkBC,KAAyB;EAC5D,MAAM;IAAEC,QAAQ;IAAEC,MAAM;IAAEC,MAAM;IAAEC,KAAK;IAAEC;GAAc,GAAGL,KAAK;EAC/D,MAAMM,UAAU,GAAGC,cAAK,CAACC,OAAO,CAAC,MAAMN,MAAM,CAACO,SAAS,CAACC,IAAI,EAAE,EAAE,CAA+B;EAC/F,MAAMC,SAAS,GAAGP,KAAK,CAACQ,OAAO,CAACF,IAAwB;EAExD,MAAMG,WAAW,GAAG;IAChBC,KAAK,EAAE,QAAiC;IACxCb,QAAQ,EAAEA,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAIK,UAAU,CAACH,MAAM;IACvCY,OAAO,EAAEZ,MAAM,CAACY,OAAO;IACvBV,YAAY;IACZW,EAAE,EAAEb,MAAM,CAACa,EAAE;IACbC,KAAK,EAAEd,MAAM,CAACc,KAAK;IACnBC,UAAU,EAAEP,SAAS,CAACQ,QAAQ,CAACD,UAAU;IACzCE,MAAM,EAAEhB,KAAK,CAACiB,WAAW,EAAE,CAACC,IAAI,CAACF,MAAM;IACvCV,IAAI,EAAEJ,UAAU;IAChBF;GACH;EAED,oBAAOG,6BAACgB,WAAW,oBAAYV,WAAW,EAAI;AAClD;AAcA,MAAMU,WAAW,gBAAGhB,cAAK,CAACiB,IAAI,CAAC,SAASD,WAAWA,CAAkBvB,KAA8B;;EAC/F,MAAM;IAAEc,KAAK;IAAEb,QAAQ;IAAEc,OAAO;IAAEV,YAAY;IAAEW,EAAE;IAAEE,UAAU;IAAER,IAAI;IAAEN;GAAO,GAAGJ,KAAK;EAErF,MAAMyB,kBAAkB,GAAGC,EAAE,CAAC,sBAAsB,EAAE;IAAEC,MAAM,EAAE,CAACT;GAAY,CAAC;EAE9E,MAAMU,cAAc,GAAGF,EAAE,CACrB,6CAA6C,EAC7C,mCAAmC,EACnC;IACI,mBAAmB,EAAE,CAACR,UAAU;IAChC,MAAM,EAAEA,UAAU;IAClB,YAAY,EAAE,CAAC,CAACjB;GACnB,EACDS,IAAI,CAACmB,eAAe,CACvB;EAED,IAAIzB,KAAK,CAACQ,OAAO,CAACkB,QAAQ,EAAE;IACxBC,OAAO,CAACC,GAAG,CAAC,qBAAqB,EAAEhB,EAAE,CAAC;;EAG1C,oBACIT;IACI0B,SAAS,EAAER,kBAAkB;IAC7BS,KAAK,EAAEnB,OAAO,GAAG,CAAC,GAAG;MAAEoB,UAAU,UAAUpB,kBAAkBA;KAAW,GAAGqB,SAAS;iBAC1E,qBAAqB;kBACnBtB,KAAK;IACjBuB,IAAI,EAAC;kBACL9B;IAAK0B,SAAS,EAAEL;kBACZrB,6BAAC+B,OAAO;IAACC,KAAK,EAAEC,MAAM,EAAAC,aAAA,GAAC/B,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEgC,OAAO,cAAAD,aAAA,cAAAA,aAAA,GAAIxC,QAAQ,CAAC;IAAE0C,SAAS,EAAC;kBACzDpC;IAAM0B,SAAS,EAAEP,EAAE,CAAC;MAAEkB,QAAQ,EAAE,CAAC1B;KAAY;KAAIjB,QAAQ,CAAQ,CAC3D,EACTI,YAAY,gBAAGE,6BAACsC,eAAe,OAAG,GAAG,IAAI,CACxC,CACJ;AAEd,CAAC,CAAqE;;;;"}