@economic/taco 1.12.3 → 1.13.1

package/dist/esm/packages/taco/src/components/Table/hooks/useTableKeyboardNavigation.js

@@ -0,0 +1,118 @@
+import React__default from 'react';
+import { getNextIndexFromKey } from '../../../utils/hooks/useListKeyboardNavigation.js';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { sanitizeRowProps } from '../util.js';
+
+const useTableKeyboardNavigation = (props, rows, rowProps, ref) => {
+  const useGlobalKeyboardNavigation = props.dangerouslyHijackGlobalKeyboardNavigation;
+  const [activeIndex, setActiveIndex] = useControllableState({
+    prop: props.activeIndex,
+    defaultProp: props.defaultActiveIndex !== undefined ? props.defaultActiveIndex : useGlobalKeyboardNavigation ? 0 : undefined,
+    onChange: index => {
+      if (index !== undefined) {
+        var _props$onChangeActive;
+        (_props$onChangeActive = props.onChangeActiveIndex) === null || _props$onChangeActive === void 0 ? void 0 : _props$onChangeActive.call(props, index);
+      }
+    }
+  });
+  const onKeyDown = event => {
+    var _document$activeEleme;
+    const isModifierKeyPressed = event.metaKey || event.ctrlKey || event.altKey || event.shiftKey;
+    if (useGlobalKeyboardNavigation && document.activeElement !== ref.current && ((_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.getAttribute('type')) !== 'search' && document.activeElement !== document.body) {
+      return;
+    }
+    // abort key handling if other elements inside table are focused and we don't use global keyboard navigation
+    if (!useGlobalKeyboardNavigation && document.activeElement !== ref.current) {
+      return;
+    }
+    if (activeIndex !== undefined) {
+      const currentRow = rows[activeIndex];
+      if (currentRow) {
+        const sanitizedRow = sanitizeRowProps(currentRow, rowProps.rowExpansionRenderer);
+        if (rowProps.onRowClick && event.key === 'Enter') {
+          event.preventDefault();
+          rowProps.onRowClick(sanitizedRow);
+          return;
+        }
+        if (currentRow.toggleRowSelected && event.key === ' ') {
+          event.preventDefault();
+          currentRow.toggleRowSelected();
+          return;
+        }
+        if (currentRow.toggleRowExpanded) {
+          if (currentRow.isExpanded && event.key === 'ArrowLeft') {
+            event.preventDefault();
+            currentRow.toggleRowExpanded();
+            return;
+          } else if (!currentRow.isExpanded && event.key === 'ArrowRight') {
+            event.preventDefault();
+            currentRow.toggleRowExpanded();
+            return;
+          }
+        }
+        // inline editing
+        if (currentRow.toggleRowEditing) {
+          if (currentRow.canEdit && !currentRow.isEditing) {
+            if (rowProps.onRowCreate && event.shiftKey && event.key === 'n') {
+              event.preventDefault();
+              if (!currentRow.isExpanded) {
+                currentRow.toggleRowExpanded();
+              }
+              rowProps.onRowCreate(sanitizedRow, event);
+              return;
+            }
+            if (event.key === 'e') {
+              event.preventDefault();
+              currentRow.toggleRowEditing();
+              return;
+            }
+          }
+        }
+        if (rowProps.onRowEdit && event.key === 'e' && !isModifierKeyPressed) {
+          event.preventDefault();
+          rowProps.onRowEdit(sanitizedRow, event);
+          return;
+        }
+        if (rowProps.onRowCopy && event.key === 'c' && !isModifierKeyPressed) {
+          event.preventDefault();
+          rowProps.onRowCopy(sanitizedRow, event);
+          return;
+        }
+        if (rowProps.onRowDelete && event.key === 'Delete' && !isModifierKeyPressed) {
+          event.preventDefault();
+          rowProps.onRowDelete(sanitizedRow, event);
+          return;
+        }
+      }
+    }
+    const nextIndex = getNextIndexFromKey(event.key, rows.length, activeIndex);
+    if (nextIndex !== undefined) {
+      event.preventDefault();
+      setActiveIndex(nextIndex);
+    }
+  };
+  const handleKeyDown = event => {
+    if (!useGlobalKeyboardNavigation) {
+      onKeyDown(event.nativeEvent);
+    }
+  };
+  React__default.useEffect(() => {
+    if (useGlobalKeyboardNavigation) {
+      window.addEventListener('keydown', onKeyDown);
+    }
+    return () => {
+      if (useGlobalKeyboardNavigation) {
+        window.removeEventListener('keydown', onKeyDown);
+      }
+    };
+  }, [onKeyDown]);
+  const handleFocus = () => {
+    if (activeIndex === undefined && rows.length) {
+      setActiveIndex(0);
+    }
+  };
+  return [activeIndex, setActiveIndex, handleKeyDown, handleFocus];
+};
+
+export { useTableKeyboardNavigation };
+//# sourceMappingURL=useTableKeyboardNavigation.js.map

package/dist/esm/packages/taco/src/components/Table/hooks/useTableKeyboardNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTableKeyboardNavigation.js","sources":["../../../../../../../../src/components/Table/hooks/useTableKeyboardNavigation.ts"],"sourcesContent":["import React from 'react';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { getNextIndexFromKey } from '../../../utils/hooks/useListKeyboardNavigation';\nimport { sanitizeRowProps } from '../util';\nimport { TableProps } from '../types';\n\nexport const useTableKeyboardNavigation = <T extends {}>(\n    props: TableProps<T>,\n    rows: any[],\n    rowProps: any,\n    ref: React.RefObject<HTMLDivElement>\n): [\n    number | undefined,\n    (index: number) => void,\n    (event: React.KeyboardEvent<HTMLElement>) => void,\n    (event: React.FocusEvent<HTMLElement>) => void\n] => {\n    const useGlobalKeyboardNavigation = props.dangerouslyHijackGlobalKeyboardNavigation;\n\n    const [activeIndex, setActiveIndex] = useControllableState<number | undefined>({\n        prop: props.activeIndex,\n        defaultProp:\n            props.defaultActiveIndex !== undefined ? props.defaultActiveIndex : useGlobalKeyboardNavigation ? 0 : undefined,\n        onChange: index => {\n            if (index !== undefined) {\n                props.onChangeActiveIndex?.(index);\n            }\n        },\n    });\n\n    const onKeyDown = (event: KeyboardEvent): void => {\n        const isModifierKeyPressed = event.metaKey || event.ctrlKey || event.altKey || event.shiftKey;\n\n        if (\n            useGlobalKeyboardNavigation &&\n            document.activeElement !== ref.current &&\n            document.activeElement?.getAttribute('type') !== 'search' &&\n            document.activeElement !== document.body\n        ) {\n            return;\n        }\n        // abort key handling if other elements inside table are focused and we don't use global keyboard navigation\n        if (!useGlobalKeyboardNavigation && document.activeElement !== ref.current) {\n            return;\n        }\n\n        if (activeIndex !== undefined) {\n            const currentRow = rows[activeIndex];\n\n            if (currentRow) {\n                const sanitizedRow = sanitizeRowProps(currentRow, rowProps.rowExpansionRenderer);\n\n                if (rowProps.onRowClick && event.key === 'Enter') {\n                    event.preventDefault();\n                    rowProps.onRowClick(sanitizedRow);\n                    return;\n                }\n\n                if (currentRow.toggleRowSelected && event.key === ' ') {\n                    event.preventDefault();\n                    currentRow.toggleRowSelected();\n                    return;\n                }\n\n                if (currentRow.toggleRowExpanded) {\n                    if (currentRow.isExpanded && event.key === 'ArrowLeft') {\n                        event.preventDefault();\n                        currentRow.toggleRowExpanded();\n                        return;\n                    } else if (!currentRow.isExpanded && event.key === 'ArrowRight') {\n                        event.preventDefault();\n                        currentRow.toggleRowExpanded();\n                        return;\n                    }\n                }\n\n                // inline editing\n                if (currentRow.toggleRowEditing) {\n                    if (currentRow.canEdit && !currentRow.isEditing) {\n                        if (rowProps.onRowCreate && event.shiftKey && event.key === 'n') {\n                            event.preventDefault();\n\n                            if (!currentRow.isExpanded) {\n                                currentRow.toggleRowExpanded();\n                            }\n\n                            rowProps.onRowCreate(sanitizedRow, event);\n                            return;\n                        }\n\n                        if (event.key === 'e') {\n                            event.preventDefault();\n                            currentRow.toggleRowEditing();\n                            return;\n                        }\n                    }\n                }\n\n                if (rowProps.onRowEdit && event.key === 'e' && !isModifierKeyPressed) {\n                    event.preventDefault();\n                    rowProps.onRowEdit(sanitizedRow, event);\n                    return;\n                }\n\n                if (rowProps.onRowCopy && event.key === 'c' && !isModifierKeyPressed) {\n                    event.preventDefault();\n                    rowProps.onRowCopy(sanitizedRow, event);\n                    return;\n                }\n\n                if (rowProps.onRowDelete && event.key === 'Delete' && !isModifierKeyPressed) {\n                    event.preventDefault();\n                    rowProps.onRowDelete(sanitizedRow, event);\n                    return;\n                }\n            }\n        }\n\n        const nextIndex = getNextIndexFromKey(event.key, rows.length, activeIndex);\n\n        if (nextIndex !== undefined) {\n            event.preventDefault();\n            setActiveIndex(nextIndex);\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>): void => {\n        if (!useGlobalKeyboardNavigation) {\n            onKeyDown(event.nativeEvent);\n        }\n    };\n\n    React.useEffect(() => {\n        if (useGlobalKeyboardNavigation) {\n            window.addEventListener('keydown', onKeyDown);\n        }\n\n        return () => {\n            if (useGlobalKeyboardNavigation) {\n                window.removeEventListener('keydown', onKeyDown);\n            }\n        };\n    }, [onKeyDown]);\n\n    const handleFocus = (): void => {\n        if (activeIndex === undefined && rows.length) {\n            setActiveIndex(0);\n        }\n    };\n\n    return [activeIndex, setActiveIndex, handleKeyDown, handleFocus];\n};\n"],"names":["useTableKeyboardNavigation","props","rows","rowProps","ref","useGlobalKeyboardNavigation","dangerouslyHijackGlobalKeyboardNavigation","activeIndex","setActiveIndex","useControllableState","prop","defaultProp","defaultActiveIndex","undefined","onChange","index","onChangeActiveIndex","onKeyDown","event","isModifierKeyPressed","metaKey","ctrlKey","altKey","shiftKey","document","activeElement","current","getAttribute","body","currentRow","sanitizedRow","sanitizeRowProps","rowExpansionRenderer","onRowClick","key","preventDefault","toggleRowSelected","toggleRowExpanded","isExpanded","toggleRowEditing","canEdit","isEditing","onRowCreate","onRowEdit","onRowCopy","onRowDelete","nextIndex","getNextIndexFromKey","length","handleKeyDown","nativeEvent","React","useEffect","window","addEventListener","removeEventListener","handleFocus"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Table/util/renderColumn.js

@@ -0,0 +1,40 @@
+import React__default from 'react';
+import cn from 'classnames';
+import { Icon } from '../../Icon/Icon.js';
+
+const Column = ({
+  cell
+}) => {
+  const props = {
+    ...cell.getHeaderProps(),
+    ...(cell.getSortByToggleProps && cell.getSortByToggleProps({
+      title: undefined
+    })),
+    className: cn('yt-table__cell flex flex-1 truncate p-2 align-middle text-grey-darkest hover:text-black', cell.className, {
+      'yt-table__cell__group': !!cell.columns,
+      'cursor-pointer': !cell.disableSorting,
+      'justify-start text-left': cell.align === 'left',
+      'justify-end text-right': cell.align === 'right',
+      'justify-center text-center': cell.align === 'center' || !cell.align
+    }),
+    style: {
+      ...cell.style,
+      flex: cell.flex
+    }
+  };
+  if (cell.isSorted) {
+    props['aria-sort'] = cell.isSortedDesc ? 'descending' : 'ascending';
+  }
+  return /*#__PURE__*/React__default.createElement("div", Object.assign({}, props, {
+    key: cell.id,
+    "data-taco": "table-column"
+  }), /*#__PURE__*/React__default.createElement("span", {
+    className: "truncate"
+  }, cell.render('Header')), cell.isSorted ? /*#__PURE__*/React__default.createElement(Icon, {
+    name: cell.isSortedDesc ? 'chevron-down-solid' : 'chevron-up-solid',
+    className: "-mt-0.5"
+  }) : null);
+};
+
+export { Column };
+//# sourceMappingURL=renderColumn.js.map

package/dist/esm/packages/taco/src/components/Table/util/renderColumn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderColumn.js","sources":["../../../../../../../../src/components/Table/util/renderColumn.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Icon } from '../../Icon/Icon';\n\nexport const Column = ({ cell }: any): any => {\n    const props = {\n        ...cell.getHeaderProps(),\n        ...(cell.getSortByToggleProps && cell.getSortByToggleProps({ title: undefined })),\n        className: cn('yt-table__cell flex flex-1 truncate p-2 align-middle text-grey-darkest hover:text-black', cell.className, {\n            'yt-table__cell__group': !!cell.columns,\n            'cursor-pointer': !cell.disableSorting,\n            'justify-start text-left': cell.align === 'left',\n            'justify-end text-right': cell.align === 'right',\n            'justify-center text-center': cell.align === 'center' || !cell.align,\n        }),\n        style: { ...cell.style, flex: cell.flex },\n    };\n\n    if (cell.isSorted) {\n        props['aria-sort'] = cell.isSortedDesc ? 'descending' : 'ascending';\n    }\n\n    return (\n        <div {...props} key={cell.id} data-taco=\"table-column\">\n            <span className=\"truncate\">{cell.render('Header')}</span>\n            {cell.isSorted ? (\n                <Icon name={cell.isSortedDesc ? 'chevron-down-solid' : 'chevron-up-solid'} className=\"-mt-0.5\" />\n            ) : null}\n        </div>\n    );\n};\n"],"names":["Column","cell","props","getHeaderProps","getSortByToggleProps","title","undefined","className","cn","columns","disableSorting","align","style","flex","isSorted","isSortedDesc","React","key","id","render","Icon","name"],"mappings":";;;;MAIaA,MAAM,GAAG,CAAC;EAAEC;CAAW;EAChC,MAAMC,KAAK,GAAG;IACV,GAAGD,IAAI,CAACE,cAAc,EAAE;IACxB,IAAIF,IAAI,CAACG,oBAAoB,IAAIH,IAAI,CAACG,oBAAoB,CAAC;MAAEC,KAAK,EAAEC;KAAW,CAAC,CAAC;IACjFC,SAAS,EAAEC,EAAE,CAAC,yFAAyF,EAAEP,IAAI,CAACM,SAAS,EAAE;MACrH,uBAAuB,EAAE,CAAC,CAACN,IAAI,CAACQ,OAAO;MACvC,gBAAgB,EAAE,CAACR,IAAI,CAACS,cAAc;MACtC,yBAAyB,EAAET,IAAI,CAACU,KAAK,KAAK,MAAM;MAChD,wBAAwB,EAAEV,IAAI,CAACU,KAAK,KAAK,OAAO;MAChD,4BAA4B,EAAEV,IAAI,CAACU,KAAK,KAAK,QAAQ,IAAI,CAACV,IAAI,CAACU;KAClE,CAAC;IACFC,KAAK,EAAE;MAAE,GAAGX,IAAI,CAACW,KAAK;MAAEC,IAAI,EAAEZ,IAAI,CAACY;;GACtC;EAED,IAAIZ,IAAI,CAACa,QAAQ,EAAE;IACfZ,KAAK,CAAC,WAAW,CAAC,GAAGD,IAAI,CAACc,YAAY,GAAG,YAAY,GAAG,WAAW;;EAGvE,oBACIC,sDAASd,KAAK;IAAEe,GAAG,EAAEhB,IAAI,CAACiB,EAAE;iBAAY;mBACpCF;IAAMT,SAAS,EAAC;KAAYN,IAAI,CAACkB,MAAM,CAAC,QAAQ,CAAC,CAAQ,EACxDlB,IAAI,CAACa,QAAQ,gBACVE,6BAACI,IAAI;IAACC,IAAI,EAAEpB,IAAI,CAACc,YAAY,GAAG,oBAAoB,GAAG,kBAAkB;IAAER,SAAS,EAAC;IAAY,GACjG,IAAI,CACN;AAEd;;;;"}

package/dist/esm/packages/taco/src/components/Table/util/renderRow.js

@@ -0,0 +1,100 @@
+import React__default from 'react';
+import cn from 'classnames';
+import { sanitizeRowProps } from '../util.js';
+import { FocusScope } from '@react-aria/focus';
+
+const renderCell = (cell, row) => {
+  const props = {
+    ...cell.getCellProps(),
+    className: cn('yt-table__cell flex-1 truncate p-2 align-middle', cell.column.className, {
+      'justify-start text-left': cell.column.align === 'left',
+      'justify-end text-right': cell.column.align === 'right',
+      'text-center': !cell.column.align
+    }),
+    style: {
+      ...cell.column.style,
+      flex: typeof cell.column.flex === 'function' ? cell.column.flex(row) : cell.column.flex
+    }
+  };
+  return /*#__PURE__*/React__default.createElement("div", Object.assign({}, props, {
+    role: "gridcell",
+    "data-taco": "table-cell"
+  }), cell.render('Cell') || null);
+};
+const Row = /*#__PURE__*/React__default.forwardRef(function TableRow({
+  row,
+  index,
+  instance,
+  headerGroups,
+  ...rowProps
+}, ref) {
+  const {
+    activeIndex,
+    onRowClick,
+    rowClassName,
+    rowExpansionRenderer,
+    rowHeight,
+    setActiveIndex,
+    style,
+    inlineEditingUniqueId
+  } = rowProps;
+  const sanitizedRow = sanitizeRowProps(row, rowExpansionRenderer);
+  const props = {
+    ...row.getRowProps(),
+    style: {
+      ...style,
+      minHeight: rowHeight ? `${rowHeight}px` : undefined,
+      paddingLeft: row.depth ? `${row.depth * 2}rem` : undefined
+    },
+    className: cn('yt-table__row border-grey-light flex border-b min-h-[2.5rem] hover:bg-grey-light', {
+      'yt-table__row--active bg-grey-light hover:bg-grey-light': activeIndex === index,
+      'yt-table__row--clickable': !!onRowClick,
+      'yt-table__row--dragging': !!row.isDragging,
+      'yt-table__row--editing': !!row.isEditing
+    }, typeof rowClassName === 'function' ? rowClassName(sanitizedRow) : rowClassName),
+    onClick: onRowClick ? event => {
+      if (event.target === event.currentTarget || event.target.classList.contains('yt-table__cell')) {
+        event.preventDefault();
+        event.persist();
+        setActiveIndex(index);
+        onRowClick(sanitizedRow);
+      }
+    } : () => {
+      setActiveIndex(index);
+    }
+  };
+  let cells = row.cells;
+  if (row.depth > 0) {
+    cells = row.cells.filter(cell => !cell.column.hiddenOnSubRows);
+  }
+  const expandedRow = rowExpansionRenderer && row.isExpanded && /*#__PURE__*/React__default.createElement("div", null, rowExpansionRenderer(sanitizedRow, instance));
+  const rowContent = React__default.useMemo(() => {
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(FocusScope, {
+      key: row.original._createKey,
+      contain: true,
+      restoreFocus: true,
+      autoFocus: true
+    }, /*#__PURE__*/React__default.createElement("div", Object.assign({}, props, {
+      role: "row",
+      ref: ref
+    }), /*#__PURE__*/React__default.createElement("input", {
+      type: "hidden",
+      name: "_rowIndexPath",
+      value: row.id
+    }), /*#__PURE__*/React__default.createElement("input", {
+      type: "hidden",
+      name: "_inlineEditingUniqueId",
+      value: row.original[inlineEditingUniqueId]
+    }), cells.map(cell => renderCell(cell, sanitizedRow)))), expandedRow);
+  }, [row.original._createKey]);
+  if (row.isEditing) {
+    return rowContent;
+  }
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", Object.assign({}, props, {
+    role: "row",
+    ref: ref
+  }), cells.map(cell => renderCell(cell, sanitizedRow))), expandedRow);
+});
+
+export { Row };
+//# sourceMappingURL=renderRow.js.map

package/dist/esm/packages/taco/src/components/Table/util/renderRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderRow.js","sources":["../../../../../../../../src/components/Table/util/renderRow.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { FocusScope } from '@react-aria/focus';\nimport { InternalTableCell, TableRow } from '../types';\nimport { sanitizeRowProps } from '../util';\n\nconst renderCell = (cell: InternalTableCell, row: TableRow<any>): JSX.Element => {\n    const props = {\n        ...cell.getCellProps(),\n        className: cn('yt-table__cell flex-1 truncate p-2 align-middle', cell.column.className, {\n            'justify-start text-left': cell.column.align === 'left',\n            'justify-end text-right': cell.column.align === 'right',\n            'text-center': !cell.column.align,\n        }),\n        style: {\n            ...cell.column.style,\n            flex: typeof cell.column.flex === 'function' ? cell.column.flex(row) : cell.column.flex,\n        },\n    };\n    return (\n        <div {...props} role=\"gridcell\" data-taco=\"table-cell\">\n            {cell.render('Cell') || null}\n        </div>\n    );\n};\n\nexport const Row = React.forwardRef(function TableRow({ row, index, instance, headerGroups, ...rowProps }: any, ref: any) {\n    const {\n        activeIndex,\n        onRowClick,\n        rowClassName,\n        rowExpansionRenderer,\n        rowHeight,\n        setActiveIndex,\n        style,\n        inlineEditingUniqueId,\n    } = rowProps;\n    const sanitizedRow = sanitizeRowProps(row, rowExpansionRenderer);\n\n    const props = {\n        ...row.getRowProps(),\n        style: {\n            ...style,\n            minHeight: rowHeight ? `${rowHeight}px` : undefined,\n            paddingLeft: row.depth ? `${row.depth * 2}rem` : undefined,\n        },\n        className: cn(\n            'yt-table__row border-grey-light flex border-b min-h-[2.5rem] hover:bg-grey-light',\n            {\n                'yt-table__row--active bg-grey-light hover:bg-grey-light': activeIndex === index,\n                'yt-table__row--clickable': !!onRowClick,\n                'yt-table__row--dragging': !!row.isDragging,\n                'yt-table__row--editing': !!row.isEditing,\n            },\n            typeof rowClassName === 'function' ? rowClassName(sanitizedRow) : rowClassName\n        ),\n        onClick: onRowClick\n            ? (event: React.MouseEvent<HTMLElement>) => {\n                  if (\n                      event.target === event.currentTarget ||\n                      (event.target as HTMLElement).classList.contains('yt-table__cell')\n                  ) {\n                      event.preventDefault();\n                      event.persist();\n                      setActiveIndex(index);\n                      onRowClick(sanitizedRow);\n                  }\n              }\n            : () => {\n                  setActiveIndex(index);\n              },\n    };\n\n    let cells = row.cells;\n\n    if (row.depth > 0) {\n        cells = row.cells.filter((cell: any) => !cell.column.hiddenOnSubRows);\n    }\n\n    const expandedRow = rowExpansionRenderer && row.isExpanded && <div>{rowExpansionRenderer(sanitizedRow, instance)}</div>;\n    const rowContent = React.useMemo(() => {\n        return (\n            <>\n                <FocusScope key={row.original._createKey} contain restoreFocus autoFocus>\n                    <div {...props} role=\"row\" ref={ref}>\n                        <input type=\"hidden\" name=\"_rowIndexPath\" value={row.id} />\n                        <input type=\"hidden\" name=\"_inlineEditingUniqueId\" value={row.original[inlineEditingUniqueId]} />\n                        {cells.map((cell: InternalTableCell) => renderCell(cell, sanitizedRow))}\n                    </div>\n                </FocusScope>\n                {expandedRow}\n            </>\n        );\n    }, [row.original._createKey]);\n\n    if (row.isEditing) {\n        return rowContent;\n    }\n\n    return (\n        <>\n            <div {...props} role=\"row\" ref={ref}>\n                {cells.map((cell: InternalTableCell) => renderCell(cell, sanitizedRow))}\n            </div>\n            {expandedRow}\n        </>\n    );\n});\n"],"names":["renderCell","cell","row","props","getCellProps","className","cn","column","align","style","flex","React","role","render","Row","forwardRef","TableRow","index","instance","headerGroups","rowProps","ref","activeIndex","onRowClick","rowClassName","rowExpansionRenderer","rowHeight","setActiveIndex","inlineEditingUniqueId","sanitizedRow","sanitizeRowProps","getRowProps","minHeight","undefined","paddingLeft","depth","isDragging","isEditing","onClick","event","target","currentTarget","classList","contains","preventDefault","persist","cells","filter","hiddenOnSubRows","expandedRow","isExpanded","rowContent","useMemo","FocusScope","key","original","_createKey","contain","restoreFocus","autoFocus","type","name","value","id","map"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Table/util/rowIndexPath.js

@@ -0,0 +1,47 @@
+import set from 'lodash-es/set';
+
+const convertRowIndexPathToNumberArray = rowIndexPath => {
+  var _rowIndexPath$split$m;
+  return (_rowIndexPath$split$m = rowIndexPath === null || rowIndexPath === void 0 ? void 0 : rowIndexPath.split('.').map(Number)) !== null && _rowIndexPath$split$m !== void 0 ? _rowIndexPath$split$m : [];
+};
+const getByRowIndexPath = (data, rowIndexPath) => {
+  if (!rowIndexPath) {
+    return undefined;
+  }
+  const currenTRow = [...data];
+  const indexes = convertRowIndexPathToNumberArray(String(rowIndexPath));
+  if (indexes.length) {
+    const startIndex = indexes.shift();
+    return indexes.reduce((value, index) => {
+      var _value$subRows;
+      return value === null || value === void 0 ? void 0 : (_value$subRows = value.subRows) === null || _value$subRows === void 0 ? void 0 : _value$subRows[index];
+    }, currenTRow[startIndex]);
+  }
+  return undefined;
+};
+const setByRowIndexPath = (data, rowIndexPath, values) => {
+  const nexTRow = [...data];
+  const rowIndexes = convertRowIndexPathToNumberArray(rowIndexPath);
+  const rootIndex = rowIndexes.shift();
+  if (rowIndexes.length) {
+    const path = rowIndexes.map(index => `subRows[${index}]`).join('.');
+    set(nexTRow[rootIndex], path, values);
+  } else {
+    nexTRow[rootIndex] = values;
+  }
+  return nexTRow;
+};
+const getParentRowIndexPath = rowIndexPath => {
+  let parentIndexPath;
+  if (rowIndexPath) {
+    const rowIndexes = convertRowIndexPathToNumberArray(rowIndexPath);
+    rowIndexes.pop();
+    if (rowIndexes.length) {
+      parentIndexPath = rowIndexes.join('.');
+    }
+  }
+  return parentIndexPath;
+};
+
+export { convertRowIndexPathToNumberArray, getByRowIndexPath, getParentRowIndexPath, setByRowIndexPath };
+//# sourceMappingURL=rowIndexPath.js.map

package/dist/esm/packages/taco/src/components/Table/util/rowIndexPath.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rowIndexPath.js","sources":["../../../../../../../../src/components/Table/util/rowIndexPath.ts"],"sourcesContent":["import set from 'lodash/set';\nimport { Row, RowIndexPath } from '../types';\n\nexport const convertRowIndexPathToNumberArray = (rowIndexPath: RowIndexPath): number[] =>\n    rowIndexPath?.split('.').map(Number) ?? [];\n\nexport const getByRowIndexPath = <TRow extends {}>(data: Row<TRow>[], rowIndexPath: RowIndexPath): Row<TRow> | undefined => {\n    if (!rowIndexPath) {\n        return undefined;\n    }\n\n    const currenTRow = [...data];\n    const indexes = convertRowIndexPathToNumberArray(String(rowIndexPath));\n\n    if (indexes.length) {\n        const startIndex = indexes.shift() as number;\n        return indexes.reduce((value, index) => value?.subRows?.[index] as Row<TRow>, currenTRow[startIndex]);\n    }\n\n    return undefined;\n};\n\nexport const setByRowIndexPath = <TRow extends {}>(data: Row<TRow>[], rowIndexPath: RowIndexPath, values: any): Row<TRow>[] => {\n    const nexTRow = [...data];\n\n    const rowIndexes = convertRowIndexPathToNumberArray(rowIndexPath);\n    const rootIndex = rowIndexes.shift() as number;\n\n    if (rowIndexes.length) {\n        const path = rowIndexes.map(index => `subRows[${index}]`).join('.');\n        set(nexTRow[rootIndex], path, values);\n    } else {\n        nexTRow[rootIndex] = values;\n    }\n\n    return nexTRow;\n};\n\nexport const getParentRowIndexPath = (rowIndexPath: RowIndexPath): RowIndexPath => {\n    let parentIndexPath;\n\n    if (rowIndexPath) {\n        const rowIndexes = convertRowIndexPathToNumberArray(rowIndexPath);\n        rowIndexes.pop();\n\n        if (rowIndexes.length) {\n            parentIndexPath = rowIndexes.join('.');\n        }\n    }\n\n    return parentIndexPath;\n};\n"],"names":["convertRowIndexPathToNumberArray","rowIndexPath","split","map","Number","getByRowIndexPath","data","undefined","currenTRow","indexes","String","length","startIndex","shift","reduce","value","index","subRows","setByRowIndexPath","values","nexTRow","rowIndexes","rootIndex","path","join","set","getParentRowIndexPath","parentIndexPath","pop"],"mappings":";;MAGaA,gCAAgC,GAAIC,YAA0B;EAAA;EAAA,gCACvEA,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAEC,KAAK,CAAC,GAAG,CAAC,CAACC,GAAG,CAACC,MAAM,CAAC,yEAAI,EAAE;AAAA;MAEjCC,iBAAiB,GAAG,CAAkBC,IAAiB,EAAEL,YAA0B;EAC5F,IAAI,CAACA,YAAY,EAAE;IACf,OAAOM,SAAS;;EAGpB,MAAMC,UAAU,GAAG,CAAC,GAAGF,IAAI,CAAC;EAC5B,MAAMG,OAAO,GAAGT,gCAAgC,CAACU,MAAM,CAACT,YAAY,CAAC,CAAC;EAEtE,IAAIQ,OAAO,CAACE,MAAM,EAAE;IAChB,MAAMC,UAAU,GAAGH,OAAO,CAACI,KAAK,EAAY;IAC5C,OAAOJ,OAAO,CAACK,MAAM,CAAC,CAACC,KAAK,EAAEC,KAAK;MAAA;MAAA,OAAKD,KAAK,aAALA,KAAK,yCAALA,KAAK,CAAEE,OAAO,mDAAd,eAAiBD,KAAK,CAAc;OAAER,UAAU,CAACI,UAAU,CAAC,CAAC;;EAGzG,OAAOL,SAAS;AACpB;MAEaW,iBAAiB,GAAG,CAAkBZ,IAAiB,EAAEL,YAA0B,EAAEkB,MAAW;EACzG,MAAMC,OAAO,GAAG,CAAC,GAAGd,IAAI,CAAC;EAEzB,MAAMe,UAAU,GAAGrB,gCAAgC,CAACC,YAAY,CAAC;EACjE,MAAMqB,SAAS,GAAGD,UAAU,CAACR,KAAK,EAAY;EAE9C,IAAIQ,UAAU,CAACV,MAAM,EAAE;IACnB,MAAMY,IAAI,GAAGF,UAAU,CAAClB,GAAG,CAACa,KAAK,eAAeA,QAAQ,CAAC,CAACQ,IAAI,CAAC,GAAG,CAAC;IACnEC,GAAG,CAACL,OAAO,CAACE,SAAS,CAAC,EAAEC,IAAI,EAAEJ,MAAM,CAAC;GACxC,MAAM;IACHC,OAAO,CAACE,SAAS,CAAC,GAAGH,MAAM;;EAG/B,OAAOC,OAAO;AAClB;MAEaM,qBAAqB,GAAIzB,YAA0B;EAC5D,IAAI0B,eAAe;EAEnB,IAAI1B,YAAY,EAAE;IACd,MAAMoB,UAAU,GAAGrB,gCAAgC,CAACC,YAAY,CAAC;IACjEoB,UAAU,CAACO,GAAG,EAAE;IAEhB,IAAIP,UAAU,CAACV,MAAM,EAAE;MACnBgB,eAAe,GAAGN,UAAU,CAACG,IAAI,CAAC,GAAG,CAAC;;;EAI9C,OAAOG,eAAe;AAC1B;;;;"}

package/dist/esm/packages/taco/src/components/Table/util/sortTypes.js

@@ -0,0 +1,87 @@
+const getTime = value => {
+  const parsedValue = typeof value === 'string' ? new Date(value) : value;
+  return parsedValue !== null && parsedValue !== void 0 && parsedValue.getTime ? parsedValue.getTime() : undefined;
+};
+const getNumber = (amount = '', decimalSeparator = ',') => {
+  if (typeof amount === 'number') {
+    return amount;
+  }
+  if (amount === null || !amount.length) {
+    return undefined;
+  }
+  let value;
+  if (decimalSeparator === ',') {
+    // replace digit seperator then replace decimal separator
+    value = Number(amount.replace(/\./g, '').replace(',', '.'));
+  } else {
+    // replace digit seperator
+    value = Number(amount.replace(/,/g, ''));
+  }
+  return Number.isNaN(value) ? undefined : value;
+};
+const getString = value => {
+  if (value) {
+    return String(value).toLowerCase();
+  }
+  return undefined;
+};
+const guess = value => {
+  if (typeof value === 'boolean') {
+    return !!value;
+  }
+  return isNaN(value) ? getString(value) : Number(value);
+};
+const compareBasic = (a, b) => {
+  // places undefined values first in ascending order instead of descending
+  if (a !== undefined && b === undefined) {
+    return 1;
+  }
+  return a === b ? 0 : a > b ? 1 : -1;
+};
+const stringsLocaleCompare = (a, b, locale) => {
+  // In some browsers 'localCompare' may return -2 or 2 instead of -1 or 1
+  const compareResult = a.localeCompare(b, locale);
+  return compareResult === 0 ? 0 : compareResult > 0 ? 1 : -1;
+};
+const compareBasicStrings = (a, b, locale) => {
+  if (a && b) {
+    return stringsLocaleCompare(a, b, locale);
+  }
+  return compareBasic(a, b);
+};
+const sortTypes = locale => {
+  return {
+    datetime: (rowA, rowB, columnId) => {
+      const a = getTime(rowA.values[columnId]);
+      const b = getTime(rowB.values[columnId]);
+      return compareBasic(a, b);
+    },
+    string: (rowA, rowB, columnId) => {
+      const a = getString(rowA.values[columnId]);
+      const b = getString(rowB.values[columnId]);
+      return compareBasicStrings(a, b, locale);
+    },
+    number: (rowA, rowB, columnId) => {
+      const a = getNumber(rowA.values[columnId]);
+      const b = getNumber(rowB.values[columnId]);
+      return compareBasic(a, b);
+    },
+    boolean: (rowA, rowB, columnId) => {
+      const a = !!rowA.values[columnId];
+      const b = !!rowB.values[columnId];
+      return compareBasic(a, b);
+    },
+    auto: (rowA, rowB, columnId) => {
+      const a = guess(rowA.values[columnId]);
+      const b = guess(rowB.values[columnId]);
+      if (typeof a === 'string' && typeof b === 'string') {
+        return compareBasicStrings(a, b, locale);
+      } else {
+        return compareBasic(a, b);
+      }
+    }
+  };
+};
+
+export { sortTypes };
+//# sourceMappingURL=sortTypes.js.map

package/dist/esm/packages/taco/src/components/Table/util/sortTypes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sortTypes.js","sources":["../../../../../../../../src/components/Table/util/sortTypes.ts"],"sourcesContent":["import { SortTypes, TableRow } from '../types';\n\nconst getTime = (value: any): number | undefined => {\n    const parsedValue: Date = typeof value === 'string' ? new Date(value) : value;\n    return parsedValue?.getTime ? parsedValue.getTime() : undefined;\n};\n\nconst getNumber = (amount = '', decimalSeparator = ','): number | undefined => {\n    if (typeof amount === 'number') {\n        return amount;\n    }\n\n    if (amount === null || !amount.length) {\n        return undefined;\n    }\n\n    let value;\n\n    if (decimalSeparator === ',') {\n        // replace digit seperator then replace decimal separator\n        value = Number(amount.replace(/\\./g, '').replace(',', '.'));\n    } else {\n        // replace digit seperator\n        value = Number(amount.replace(/,/g, ''));\n    }\n\n    return Number.isNaN(value) ? undefined : value;\n};\n\nconst getString = (value: any): string | undefined => {\n    if (value) {\n        return String(value).toLowerCase();\n    }\n\n    return undefined;\n};\n\nconst guess = (value: any): any => {\n    if (typeof value === 'boolean') {\n        return !!value;\n    }\n\n    return isNaN(value) ? getString(value) : Number(value);\n};\n\nconst compareBasic = (a: any, b: any) => {\n    // places undefined values first in ascending order instead of descending\n    if (a !== undefined && b === undefined) {\n        return 1;\n    }\n\n    return a === b ? 0 : a > b ? 1 : -1;\n};\n\nconst stringsLocaleCompare = (a: string, b: string, locale: string): 0 | 1 | -1 => {\n    // In some browsers 'localCompare' may return -2 or 2 instead of -1 or 1\n    const compareResult = a.localeCompare(b, locale);\n    return compareResult === 0 ? 0 : compareResult > 0 ? 1 : -1;\n};\n\nconst compareBasicStrings = (a: string | undefined, b: string | undefined, locale: string): 0 | 1 | -1 => {\n    if (a && b) {\n        return stringsLocaleCompare(a, b, locale);\n    }\n\n    return compareBasic(a, b);\n};\n\ntype SortHandler<T> = (rowA: TableRow<T>, rowB: TableRow<T>, columnId: string) => 0 | 1 | -1;\n\nexport const sortTypes = (locale: string): Record<SortTypes, SortHandler<any>> => {\n    return {\n        datetime: (rowA, rowB, columnId) => {\n            const a = getTime(rowA.values[columnId]);\n            const b = getTime(rowB.values[columnId]);\n            return compareBasic(a, b);\n        },\n        string: (rowA, rowB, columnId) => {\n            const a = getString(rowA.values[columnId]);\n            const b = getString(rowB.values[columnId]);\n            return compareBasicStrings(a, b, locale);\n        },\n        number: (rowA, rowB, columnId) => {\n            const a = getNumber(rowA.values[columnId]);\n            const b = getNumber(rowB.values[columnId]);\n            return compareBasic(a, b);\n        },\n        boolean: (rowA, rowB, columnId) => {\n            const a = !!rowA.values[columnId];\n            const b = !!rowB.values[columnId];\n            return compareBasic(a, b);\n        },\n        auto: (rowA, rowB, columnId) => {\n            const a = guess(rowA.values[columnId]);\n            const b = guess(rowB.values[columnId]);\n            if (typeof a === 'string' && typeof b === 'string') {\n                return compareBasicStrings(a, b, locale);\n            } else {\n                return compareBasic(a, b);\n            }\n        },\n    };\n};\n"],"names":["getTime","value","parsedValue","Date","undefined","getNumber","amount","decimalSeparator","length","Number","replace","isNaN","getString","String","toLowerCase","guess","compareBasic","a","b","stringsLocaleCompare","locale","compareResult","localeCompare","compareBasicStrings","sortTypes","datetime","rowA","rowB","columnId","values","string","number","boolean","auto"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Table/util.js

@@ -0,0 +1,87 @@
+import React__default from 'react';
+
+const sanitizeRowProps = (row, rowExpansionRenderer) => {
+  var _row$subRows;
+  const props = {
+    index: row.index,
+    indexPath: row.id,
+    values: row.original
+  };
+  if (((_row$subRows = row.subRows) === null || _row$subRows === void 0 ? void 0 : _row$subRows.length) > 0) {
+    props.isExpanded = !!row.isExpanded;
+    props.depth = row.depth;
+    props.toggleRowExpanded = () => row.toggleRowExpanded(!props.isExpanded);
+  } else if (rowExpansionRenderer) {
+    props.isExpanded = !!row.isExpanded;
+    props.toggleRowExpanded = () => row.toggleRowExpanded(!props.isExpanded);
+  }
+  if (row.toggleRowEditing) {
+    props.isEditing = !!row.isEditing;
+    props.toggleRowEditing = row.toggleRowEditing;
+  }
+  return props;
+};
+const getColumnsFromChildren = (children, rowExpansionRenderer) => {
+  const sortRules = [];
+  const columns = React__default.Children.toArray(children).filter(child => !!child && !child.props.hidden) // skip falsey or hidden columns
+  .map(({
+    props: {
+      children: groupChildren,
+      ...props
+    }
+  }) => {
+    const column = {
+      ...props
+    };
+    column.sortType = column.sortType || 'auto';
+    column.disableSortBy = column.disableSorting;
+    // this is a Table.Group - TODO: Find a better way to determine the child type
+    if (props.title && groupChildren) {
+      column.Header = props.title;
+      const {
+        columns: groupColumns,
+        sortRules: groupSortRules
+      } = getColumnsFromChildren(groupChildren, rowExpansionRenderer);
+      column.columns = groupColumns;
+      groupSortRules.forEach(sort => sortRules.push(sort));
+    } else {
+      column.accessor = props.accessor;
+      column.Header = props.headRenderer || '';
+      column.Cell = columnProps => {
+        var _props$cellRenderer, _cell$value;
+        const cell = {
+          accessor: columnProps.cell.column.id,
+          row: sanitizeRowProps(columnProps.cell.row, rowExpansionRenderer),
+          value: columnProps.cell.value
+        };
+        if (cell.row.isEditing && typeof props.editRenderer === 'function') {
+          return props.editRenderer(cell);
+        }
+        return typeof props.cellRenderer === 'function' ? (_props$cellRenderer = props.cellRenderer(cell)) !== null && _props$cellRenderer !== void 0 ? _props$cellRenderer : null : (_cell$value = cell.value) !== null && _cell$value !== void 0 ? _cell$value : null;
+      };
+      // custom props
+      column.align = props.align;
+      column.flex = props.flex;
+      if (props.sort && !props.disableSorting) {
+        sortRules.push({
+          id: props.accessor,
+          desc: props.sort === 'desc'
+        });
+      }
+    }
+    return column;
+  });
+  return {
+    columns,
+    sortRules
+  };
+};
+const getInternalSortRules = sortRules => {
+  return sortRules === null || sortRules === void 0 ? void 0 : sortRules.map(rule => ({
+    id: rule.accessor,
+    desc: rule.desc
+  }));
+};
+
+export { getColumnsFromChildren, getInternalSortRules, sanitizeRowProps };
+//# sourceMappingURL=util.js.map

package/dist/esm/packages/taco/src/components/Table/util.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.js","sources":["../../../../../../../src/components/Table/util.ts"],"sourcesContent":["import React from 'react';\nimport { TableRow, TableCell, TableChildren, InternalTableRow, InternalTableColumn, SortRule } from './types';\nimport { SortingRule } from 'react-table';\n\nexport const sanitizeRowProps = (row: InternalTableRow, rowExpansionRenderer: any): TableRow<any> => {\n    const props: TableRow<any> = {\n        index: row.index,\n        indexPath: row.id,\n        values: row.original,\n    };\n\n    if (row.subRows?.length > 0) {\n        props.isExpanded = !!row.isExpanded;\n        props.depth = row.depth;\n        props.toggleRowExpanded = () => row.toggleRowExpanded(!props.isExpanded);\n    } else if (rowExpansionRenderer) {\n        props.isExpanded = !!row.isExpanded;\n        props.toggleRowExpanded = () => row.toggleRowExpanded(!props.isExpanded);\n    }\n\n    if (row.toggleRowEditing) {\n        props.isEditing = !!row.isEditing;\n        props.toggleRowEditing = row.toggleRowEditing;\n    }\n\n    return props;\n};\n\nexport const getColumnsFromChildren = (children: TableChildren<any>, rowExpansionRenderer: any) => {\n    const sortRules: SortingRule<any>[] = [];\n\n    const columns = React.Children.toArray(children)\n        .filter((child: any) => !!child && !child.props.hidden) // skip falsey or hidden columns\n        .map(({ props: { children: groupChildren, ...props } }: any) => {\n            const column: InternalTableColumn & { disableSortBy: boolean | undefined } = { ...props };\n\n            column.sortType = column.sortType || 'auto';\n            column.disableSortBy = column.disableSorting;\n\n            // this is a Table.Group - TODO: Find a better way to determine the child type\n            if (props.title && groupChildren) {\n                column.Header = props.title;\n\n                const { columns: groupColumns, sortRules: groupSortRules } = getColumnsFromChildren(\n                    groupChildren,\n                    rowExpansionRenderer\n                );\n                column.columns = groupColumns;\n                groupSortRules.forEach(sort => sortRules.push(sort));\n            } else {\n                column.accessor = props.accessor;\n                column.Header = props.headRenderer || '';\n                column.Cell = (columnProps: any) => {\n                    const cell: TableCell<any> = {\n                        accessor: columnProps.cell.column.id,\n                        row: sanitizeRowProps(columnProps.cell.row, rowExpansionRenderer),\n                        value: columnProps.cell.value,\n                    };\n\n                    if (cell.row.isEditing && typeof props.editRenderer === 'function') {\n                        return props.editRenderer(cell);\n                    }\n\n                    return typeof props.cellRenderer === 'function' ? props.cellRenderer(cell) ?? null : cell.value ?? null;\n                };\n\n                // custom props\n                column.align = props.align;\n                column.flex = props.flex;\n\n                if (props.sort && !props.disableSorting) {\n                    sortRules.push({\n                        id: props.accessor,\n                        desc: props.sort === 'desc',\n                    });\n                }\n            }\n\n            return column;\n        });\n\n    return { columns, sortRules };\n};\n\nexport const getInternalSortRules = <T>(sortRules: SortRule<T>[] | undefined): SortingRule<T>[] | undefined => {\n    return sortRules?.map<SortingRule<T>>(rule => ({ id: rule.accessor, desc: rule.desc }));\n};\n"],"names":["sanitizeRowProps","row","rowExpansionRenderer","props","index","indexPath","id","values","original","subRows","length","isExpanded","depth","toggleRowExpanded","toggleRowEditing","isEditing","getColumnsFromChildren","children","sortRules","columns","React","Children","toArray","filter","child","hidden","map","groupChildren","column","sortType","disableSortBy","disableSorting","title","Header","groupColumns","groupSortRules","forEach","sort","push","accessor","headRenderer","Cell","columnProps","cell","value","editRenderer","cellRenderer","align","flex","desc","getInternalSortRules","rule"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Tabs/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","sources":["../../../../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as TabsPrimitive from '@radix-ui/react-tabs';\n\nimport { Orientation } from '../../types';\nimport './Tabs.css';\n\nexport type TabsProps = React.HTMLAttributes<HTMLDivElement> & {\n    /**\n     * The controlled value of the tab to activate. Should be used in conjunction with `onChange`.\n     */\n    id?: string;\n    /**\n     * Set which tab is selected on mount.\n     * This has to be one of the existing ids provided for tabs\n     */\n    defaultId?: string;\n    /**\n     * Content should be one or an array of `Tabs.Trigger` components inside `Tabs.List` and then\n     * followed by one or an array of `Tabs.Content`.\n     * *Note* that there can also be tabs that are rendered conditionally.\n     */\n    children: React.ReactNode;\n    /**\n     * Define orientation of tabs.\n     * @defaultValue horizontal\n     */\n    orientation?: Orientation;\n    /**\n     * Callback that is called when tab is changed.\n     */\n    onChange?: (id: string) => void;\n};\n\nexport type TabListProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport type TabTriggerProps = React.HTMLAttributes<HTMLButtonElement> & {\n    /**\n     * A unique value that associates the trigger with a content.\n     */\n    id: string;\n    /**\n     * When true, prevents the user from interacting with the tab.\n     */\n    disabled?: boolean;\n};\n\nexport type TabContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    /**\n     * A unique value that associates the content with a trigger.\n     */\n    id: string;\n};\n\nexport type ForwardedTabsWithStatics = React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>> & {\n    /** Tab list component containing all tab triggers, rendered in a `Tabs` group component */\n    List: React.ForwardRefExoticComponent<TabListProps & React.RefAttributes<HTMLDivElement>>;\n    /** Tab trigger component rendered in a `Tabs.List` component */\n    Trigger: React.ForwardRefExoticComponent<TabTriggerProps & React.RefAttributes<HTMLButtonElement>>;\n    /** Tab content component rendered in a `Tabs` group component */\n    Content: React.ForwardRefExoticComponent<TabContentProps & React.RefAttributes<HTMLDivElement>>;\n};\n\nexport const Tabs = React.forwardRef(function Tabs(props: TabsProps, ref: React.Ref<HTMLDivElement>) {\n    const { id, defaultId, children, onChange, orientation = 'horizontal', ...otherProps } = props;\n    const className = cn(\n        'yt-tabs',\n        `yt-tabs--${orientation}`,\n        {\n            'flex w-full': orientation === 'vertical',\n        },\n        props.className\n    );\n\n    return (\n        <TabsPrimitive.Root\n            {...otherProps}\n            className={className}\n            data-taco=\"tabs\"\n            defaultValue={defaultId}\n            dir=\"ltr\"\n            onValueChange={onChange}\n            orientation={orientation}\n            ref={ref}\n            value={id}>\n            {children}\n        </TabsPrimitive.Root>\n    );\n}) as ForwardedTabsWithStatics;\n\nconst TabList = React.forwardRef(function Tab(props: TabListProps, ref: React.Ref<HTMLDivElement>) {\n    const className = cn('yt-tab__list border-b border-grey-light flex flex-row m-0 mb-4', props.className);\n\n    return <TabsPrimitive.List {...props} className={className} ref={ref} />;\n});\n\nconst TabTrigger = React.forwardRef(function Tab(props: TabTriggerProps, ref: React.Ref<HTMLButtonElement>) {\n    const { id, disabled, ...otherProps } = props;\n    const className = cn(\n        'yt-tab bg-transparent border-b-2 border-transparent text-grey-darkest m-0 py-2 px-4',\n        disabled\n            ? 'cursor-not-allowed !text-grey-darker'\n            : 'cursor-pointer rounded-t hover:border-grey-dark aria-selected:border-blue aria-selected:text-black aria-selected:hover:border-blue-light hover:text-black active:yt-focus active:border-blue focus:yt-focus focus:border-blue',\n        props.className\n    );\n\n    return (\n        <TabsPrimitive.Trigger\n            {...otherProps}\n            className={className}\n            disabled={disabled}\n            ref={ref}\n            style={{\n                transition: 'border 0.2s ease-in',\n            }}\n            value={id}\n        />\n    );\n});\n\nconst TabContent = React.forwardRef(function Tab(props: TabContentProps, ref: React.Ref<HTMLDivElement>) {\n    const { id, ...otherProps } = props;\n    const className = cn('yt-tab__panel outline-none', props.className);\n\n    return <TabsPrimitive.Content {...otherProps} className={className} ref={ref} value={id} />;\n});\n\nTabs.List = TabList;\nTabs.Trigger = TabTrigger;\nTabs.Content = TabContent;\n"],"names":["Tabs","React","props","ref","id","defaultId","children","onChange","orientation","otherProps","className","cn","TabsPrimitive","defaultValue","dir","onValueChange","value","TabList","Tab","TabTrigger","disabled","style","transition","TabContent","List","Trigger","Content"],"mappings":";;;;MA+DaA,IAAI,gBAAGC,UAAgB,CAAC,SAASD,IAAI,CAACE,KAAgB,EAAEC,GAA8B;EAC/F,MAAM;IAAEC,EAAE;IAAEC,SAAS;IAAEC,QAAQ;IAAEC,QAAQ;IAAEC,WAAW,GAAG,YAAY;IAAE,GAAGC;GAAY,GAAGP,KAAK;EAC9F,MAAMQ,SAAS,GAAGC,EAAE,CAChB,SAAS,cACGH,aAAa,EACzB;IACI,aAAa,EAAEA,WAAW,KAAK;GAClC,EACDN,KAAK,CAACQ,SAAS,CAClB;EAED,oBACIT,cAACW,IAAkB,oBACXH,UAAU;IACdC,SAAS,EAAEA,SAAS;iBACV,MAAM;IAChBG,YAAY,EAAER,SAAS;IACvBS,GAAG,EAAC,KAAK;IACTC,aAAa,EAAER,QAAQ;IACvBC,WAAW,EAAEA,WAAW;IACxBL,GAAG,EAAEA,GAAG;IACRa,KAAK,EAAEZ;MACNE,QAAQ,CACQ;AAE7B,CAAC;AAED,MAAMW,OAAO,gBAAGhB,UAAgB,CAAC,SAASiB,GAAG,CAAChB,KAAmB,EAAEC,GAA8B;EAC7F,MAAMO,SAAS,GAAGC,EAAE,CAAC,gEAAgE,EAAET,KAAK,CAACQ,SAAS,CAAC;EAEvG,oBAAOT,cAACW,IAAkB,oBAAKV,KAAK;IAAEQ,SAAS,EAAEA,SAAS;IAAEP,GAAG,EAAEA;KAAO;AAC5E,CAAC,CAAC;AAEF,MAAMgB,UAAU,gBAAGlB,UAAgB,CAAC,SAASiB,GAAG,CAAChB,KAAsB,EAAEC,GAAiC;EACtG,MAAM;IAAEC,EAAE;IAAEgB,QAAQ;IAAE,GAAGX;GAAY,GAAGP,KAAK;EAC7C,MAAMQ,SAAS,GAAGC,EAAE,CAChB,qFAAqF,EACrFS,QAAQ,GACF,sCAAsC,GACtC,+NAA+N,EACrOlB,KAAK,CAACQ,SAAS,CAClB;EAED,oBACIT,cAACW,OAAqB,oBACdH,UAAU;IACdC,SAAS,EAAEA,SAAS;IACpBU,QAAQ,EAAEA,QAAQ;IAClBjB,GAAG,EAAEA,GAAG;IACRkB,KAAK,EAAE;MACHC,UAAU,EAAE;KACf;IACDN,KAAK,EAAEZ;KACT;AAEV,CAAC,CAAC;AAEF,MAAMmB,UAAU,gBAAGtB,UAAgB,CAAC,SAASiB,GAAG,CAAChB,KAAsB,EAAEC,GAA8B;EACnG,MAAM;IAAEC,EAAE;IAAE,GAAGK;GAAY,GAAGP,KAAK;EACnC,MAAMQ,SAAS,GAAGC,EAAE,CAAC,4BAA4B,EAAET,KAAK,CAACQ,SAAS,CAAC;EAEnE,oBAAOT,cAACW,OAAqB,oBAAKH,UAAU;IAAEC,SAAS,EAAEA,SAAS;IAAEP,GAAG,EAAEA,GAAG;IAAEa,KAAK,EAAEZ;KAAM;AAC/F,CAAC,CAAC;AAEFJ,IAAI,CAACwB,IAAI,GAAGP,OAAO;AACnBjB,IAAI,CAACyB,OAAO,GAAGN,UAAU;AACzBnB,IAAI,CAAC0B,OAAO,GAAGH,UAAU;;;;"}

package/dist/esm/packages/taco/src/components/Tag/Tag.js

@@ -0,0 +1,42 @@
+import React__default from 'react';
+import cn from 'classnames';
+import { Icon } from '../Icon/Icon.js';
+import { colors } from '../../utils/colors.js';
+
+const Tag = /*#__PURE__*/React__default.forwardRef((props, ref) => {
+  const {
+    children,
+    color,
+    disabled,
+    icon,
+    readOnly,
+    onDelete,
+    ...otherProps
+  } = props;
+  const textRef = React__default.useRef(null);
+  const className = cn('inline-flex items-center rounded h-6 cursor-default', {
+    'opacity-50': disabled,
+    'hover:bg-opacity-75': !disabled,
+    'cursor-pointer': !!otherProps.onClick,
+    'pointer-events-none': disabled || readOnly
+  }, color ? colors[color] : colors.grey, props.className);
+  return /*#__PURE__*/React__default.createElement("span", Object.assign({}, otherProps, {
+    className: className,
+    ref: ref
+  }), /*#__PURE__*/React__default.createElement("span", {
+    className: "truncate px-2",
+    ref: textRef
+  }, icon ? typeof icon === 'string' ? /*#__PURE__*/React__default.createElement(Icon, {
+    name: icon,
+    className: "mr-1 -ml-1 -mt-0.5 !h-5 !w-5"
+  }) : /*#__PURE__*/React__default.cloneElement(icon, {
+    className: 'mr-1 -ml-1 -mt-0.5 !h-5 !w-5'
+  }) : null, children), onDelete ? /*#__PURE__*/React__default.createElement(Icon, {
+    name: "close",
+    onClick: onDelete,
+    className: "-ml-1.5 !h-6 !w-5 flex-shrink-0 cursor-pointer rounded-r p-0.5 hover:bg-black/5"
+  }) : null);
+});
+
+export { Tag };
+//# sourceMappingURL=Tag.js.map