@economic/taco 1.37.0 → 1.38.1

package/dist/esm/packages/taco/src/components/Table2/hooks/useColumnDefinitions.js.map

@@ -1 +1 @@
-{"version":3,"file":"useColumnDefinitions.js","sources":["../../../../../../../../src/components/Table2/hooks/useColumnDefinitions.tsx"],"sourcesContent":["import React from 'react';\nimport {\n    createColumnHelper,\n    ColumnSort,\n    ColumnSizingState,\n    Row,\n    RowData,\n    VisibilityState,\n    SortingFnOption,\n    Table,\n} from '@tanstack/react-table';\nimport {\n    CellAlignment,\n    ColumnDataType,\n    RowDragHandler,\n    RowExpansionRenderer,\n    SortFn,\n    Table2Children,\n    Table2ColumnControlRenderer,\n    Table2ColumnFooterRenderer,\n    Table2ColumnHeaderMenu,\n    Table2ColumnProps,\n    Table2RowActionRenderer,\n} from '../types';\nimport {\n    createRowActionsColumn,\n    createRowDraggableColumn,\n    createRowExpansionColumn,\n    createRowSelectionColumn,\n    MIN_COLUMN_SIZE,\n} from '../utilities/columns';\nimport { useLocalization } from '../../Provider/Localization';\n\ndeclare module '@tanstack/table-core' {\n    interface ColumnMeta<TData extends RowData, TValue> {\n        align?: CellAlignment;\n        className?: string | ((row: Row<TData>, table: Table<TData>) => string);\n        control?: Table2ColumnControlRenderer;\n        dataType?: ColumnDataType;\n        disableReordering?: boolean;\n        defaultWidth?: number;\n        headerClassName?: string;\n        menu?: Table2ColumnHeaderMenu;\n        tooltip?: string;\n    }\n}\n\ntype useColumnDefinitionsOptions<TType> = {\n    actionsForRow: Table2RowActionRenderer<TType>[];\n    actionsForRowLength: number;\n    enableColumnFiltering: boolean;\n    enableColumnHiding: boolean;\n    enableColumnFreezing: boolean;\n    enableRowExpansion: boolean;\n    enableRowSelection: boolean;\n    enableMultipleRowSelection: boolean;\n    expandedRowRenderer?: RowExpansionRenderer<TType>;\n    onRowDrag?: RowDragHandler<TType>;\n};\n\nexport function useColumnDefinitions<TType = any>(\n    children: Table2Children,\n    options: useColumnDefinitionsOptions<TType>,\n    tableRef: React.RefObject<HTMLDivElement>\n) {\n    const { texts } = useLocalization();\n    const lastSelectedRowIndex = React.useRef<number>();\n    const columnHelper = createColumnHelper<TType>();\n\n    return React.useMemo(() => {\n        let internalFrozenColumnCount = 0;\n        // cannot be typed correctly until https://github.com/TanStack/table/discussions/4530 is resolved\n        const columns: any[] = [];\n        const defaultColumnSizing: ColumnSizingState = {};\n        const defaultColumnVisibility: VisibilityState = {};\n        const defaultSorting: ColumnSort[] = [];\n        const footers: Record<string, Table2ColumnFooterRenderer> = {};\n\n        (React.Children.toArray(children) as React.ReactElement<Table2ColumnProps<TType>>[])\n            .filter((child: any) => !!child)\n            .forEach(child => {\n                if (React.isValidElement(child)) {\n                    if (child.props.defaultWidth) {\n                        defaultColumnSizing[child.props.accessor] = child.props.defaultWidth;\n                    }\n\n                    if (child.props.defaultHidden && options.enableColumnHiding) {\n                        defaultColumnVisibility[child.props.accessor] = false;\n                    }\n\n                    if (child.props.sort !== undefined) {\n                        defaultSorting.push({\n                            id: child.props.accessor,\n                            desc: child.props.sort === 'desc',\n                        });\n                    }\n\n                    if (child.props.footer) {\n                        footers[child.props.accessor] = child.props.footer;\n                    }\n\n                    columns.push({\n                        accessorKey: child.props.accessor,\n                        id: child.props.accessor,\n                        cell: props => {\n                            let value = props.getValue();\n\n                            if (typeof child.props.renderer === 'function') {\n                                value = child.props.renderer(value, props.row.original);\n                            }\n\n                            if (typeof value === 'string' || typeof value === 'number') {\n                                return <span className=\"truncate\">{value}</span>;\n                            }\n\n                            return value ?? null;\n                        },\n                        header: child.props.header,\n                        meta: {\n                            align: child.props.align,\n                            className: child.props.className,\n                            control: child.props.control,\n                            dataType: child.props.dataType,\n                            defaultWidth: child.props.defaultWidth,\n                            disableReordering: child.props.disableReordering,\n                            menu: child.props.menu,\n                            tooltip: child.props.tooltip,\n                        },\n                        enableHiding: !child.props.disableHiding,\n                        // filtering\n                        enableColumnFilter: !child.props.disableFiltering,\n                        filterFn:\n                            options.enableColumnFiltering && !child.props.disableFiltering ? ('tacoFilter' as any) : undefined,\n                        // sizing\n                        enableResizing: !child.props.disableResizing,\n                        minSize: child.props.minWidth ?? MIN_COLUMN_SIZE,\n                        size: child.props.defaultWidth,\n                        // sorting\n                        enableSorting: !child.props.disableSorting,\n                        sortingFn: getSortingFn<TType>(child.props.dataType, child.props.sortFn),\n                    });\n                }\n            });\n\n        if (options.enableRowExpansion && options.expandedRowRenderer) {\n            columns.unshift(columnHelper.display(createRowExpansionColumn(options.expandedRowRenderer, texts)));\n            internalFrozenColumnCount++;\n        }\n\n        if (options.enableRowSelection) {\n            columns.unshift(\n                columnHelper.display(\n                    createRowSelectionColumn(\n                        options.enableMultipleRowSelection,\n                        lastSelectedRowIndex,\n                        options.onRowDrag,\n                        tableRef,\n                        texts\n                    )\n                )\n            );\n            internalFrozenColumnCount++;\n        }\n\n        if (options.onRowDrag) {\n            columns.unshift(columnHelper.display(createRowDraggableColumn(options.onRowDrag, texts)));\n            internalFrozenColumnCount++;\n        }\n\n        if (options.actionsForRow?.length) {\n            columns.push(columnHelper.display(createRowActionsColumn(options.actionsForRow, options.actionsForRowLength, texts)));\n        }\n\n        return { columns, internalFrozenColumnCount, defaultColumnSizing, defaultColumnVisibility, defaultSorting, footers };\n    }, [children]);\n}\n\nfunction getSortingFn<TType>(dataType?: ColumnDataType, customFn?: SortFn<TType>): SortingFnOption<TType> {\n    if (customFn) {\n        return (rowA, rowB, columnId) => customFn(rowA.original, rowB.original, columnId);\n    }\n\n    if (dataType && dataType !== 'boolean') {\n        return dataType;\n    }\n\n    return 'auto';\n}\n"],"names":["useColumnDefinitions","children","options","tableRef","texts","useLocalization","lastSelectedRowIndex","React","useRef","columnHelper","createColumnHelper","useMemo","internalFrozenColumnCount","columns","defaultColumnSizing","defaultColumnVisibility","defaultSorting","footers","Children","toArray","filter","child","forEach","isValidElement","props","defaultWidth","accessor","defaultHidden","enableColumnHiding","sort","undefined","push","id","desc","footer","accessorKey","cell","value","getValue","renderer","row","original","className","header","meta","align","control","dataType","disableReordering","menu","tooltip","enableHiding","disableHiding","enableColumnFilter","disableFiltering","filterFn","enableColumnFiltering","enableResizing","disableResizing","minSize","minWidth","MIN_COLUMN_SIZE","size","enableSorting","disableSorting","sortingFn","getSortingFn","sortFn","enableRowExpansion","expandedRowRenderer","unshift","display","createRowExpansionColumn","enableRowSelection","createRowSelectionColumn","enableMultipleRowSelection","onRowDrag","createRowDraggableColumn","actionsForRow","length","createRowActionsColumn","actionsForRowLength","customFn","rowA","rowB","columnId"],"mappings":"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"}
+{"version":3,"file":"useColumnDefinitions.js","sources":["../../../../../../../../src/components/Table2/hooks/useColumnDefinitions.tsx"],"sourcesContent":["import React from 'react';\nimport {\n    createColumnHelper,\n    ColumnSort,\n    ColumnSizingState,\n    Row,\n    RowData,\n    VisibilityState,\n    SortingFnOption,\n    Table,\n} from '@tanstack/react-table';\nimport {\n    CellAlignment,\n    ColumnDataType,\n    RowDragHandler,\n    RowExpansionRenderer,\n    SortFn,\n    Table2Children,\n    Table2ColumnControlRenderer,\n    Table2ColumnFooterRenderer,\n    Table2ColumnHeaderMenu,\n    Table2ColumnProps,\n    Table2RowActionRenderer,\n} from '../types';\nimport {\n    createRowActionsColumn,\n    createRowDraggableColumn,\n    createRowExpansionColumn,\n    createRowSelectionColumn,\n    MIN_COLUMN_SIZE,\n} from '../utilities/columns';\nimport { useLocalization } from '../../Provider/Localization';\n\ndeclare module '@tanstack/table-core' {\n    interface ColumnMeta<TData extends RowData, TValue> {\n        align?: CellAlignment;\n        className?: string | ((row: Row<TData>, table: Table<TData>) => string);\n        control?: Table2ColumnControlRenderer;\n        dataType?: ColumnDataType;\n        disableReordering?: boolean;\n        defaultWidth?: number | 'grow';\n        headerClassName?: string;\n        menu?: Table2ColumnHeaderMenu;\n        tooltip?: string;\n    }\n}\n\ntype useColumnDefinitionsOptions<TType> = {\n    actionsForRow: Table2RowActionRenderer<TType>[];\n    actionsForRowLength: number;\n    enableColumnFiltering: boolean;\n    enableColumnHiding: boolean;\n    enableColumnFreezing: boolean;\n    enableRowExpansion: boolean;\n    enableRowSelection: boolean;\n    enableMultipleRowSelection: boolean;\n    expandedRowRenderer?: RowExpansionRenderer<TType>;\n    onRowDrag?: RowDragHandler<TType>;\n};\n\nexport function useColumnDefinitions<TType = any>(\n    children: Table2Children,\n    options: useColumnDefinitionsOptions<TType>,\n    tableRef: React.RefObject<HTMLDivElement>\n) {\n    const { texts } = useLocalization();\n    const lastSelectedRowIndex = React.useRef<number>();\n    const columnHelper = createColumnHelper<TType>();\n\n    return React.useMemo(() => {\n        let internalFrozenColumnCount = 0;\n        // cannot be typed correctly until https://github.com/TanStack/table/discussions/4530 is resolved\n        const columns: any[] = [];\n        const defaultColumnSizing: ColumnSizingState = {};\n        const defaultColumnVisibility: VisibilityState = {};\n        const defaultSorting: ColumnSort[] = [];\n        const footers: Record<string, Table2ColumnFooterRenderer> = {};\n\n        (React.Children.toArray(children) as React.ReactElement<Table2ColumnProps<TType>>[])\n            .filter((child: any) => !!child)\n            .forEach(child => {\n                if (React.isValidElement(child)) {\n                    const defaultWidth = child.props.defaultWidth === 'grow' ? '1fr' : child.props.defaultWidth;\n\n                    if (defaultWidth) {\n                        defaultColumnSizing[child.props.accessor] = defaultWidth as any;\n                    }\n\n                    if (child.props.defaultHidden && options.enableColumnHiding) {\n                        defaultColumnVisibility[child.props.accessor] = false;\n                    }\n\n                    if (child.props.sort !== undefined) {\n                        defaultSorting.push({\n                            id: child.props.accessor,\n                            desc: child.props.sort === 'desc',\n                        });\n                    }\n\n                    if (child.props.footer) {\n                        footers[child.props.accessor] = child.props.footer;\n                    }\n\n                    columns.push({\n                        accessorKey: child.props.accessor,\n                        id: child.props.accessor,\n                        cell: props => {\n                            let value = props.getValue();\n\n                            if (typeof child.props.renderer === 'function') {\n                                value = child.props.renderer(value, props.row.original);\n                            }\n\n                            if (typeof value === 'string' || typeof value === 'number') {\n                                return <span className=\"truncate\">{value}</span>;\n                            }\n\n                            return value ?? null;\n                        },\n                        header: child.props.header,\n                        meta: {\n                            align: child.props.align,\n                            className: child.props.className,\n                            control: child.props.control,\n                            dataType: child.props.dataType,\n                            defaultWidth,\n                            disableReordering: child.props.disableReordering,\n                            menu: child.props.menu,\n                            tooltip: child.props.tooltip,\n                        },\n                        enableHiding: !child.props.disableHiding,\n                        // filtering\n                        enableColumnFilter: !child.props.disableFiltering,\n                        filterFn:\n                            options.enableColumnFiltering && !child.props.disableFiltering ? ('tacoFilter' as any) : undefined,\n                        // sizing\n                        enableResizing: !child.props.disableResizing,\n                        minSize: child.props.minWidth ?? MIN_COLUMN_SIZE,\n                        size: child.props.defaultWidth,\n                        // sorting\n                        enableSorting: !child.props.disableSorting,\n                        sortingFn: getSortingFn<TType>(child.props.dataType, child.props.sortFn),\n                    });\n                }\n            });\n\n        if (options.enableRowExpansion && options.expandedRowRenderer) {\n            columns.unshift(columnHelper.display(createRowExpansionColumn(options.expandedRowRenderer, texts)));\n            internalFrozenColumnCount++;\n        }\n\n        if (options.enableRowSelection) {\n            columns.unshift(\n                columnHelper.display(\n                    createRowSelectionColumn(\n                        options.enableMultipleRowSelection,\n                        lastSelectedRowIndex,\n                        options.onRowDrag,\n                        tableRef,\n                        texts\n                    )\n                )\n            );\n            internalFrozenColumnCount++;\n        }\n\n        if (options.onRowDrag) {\n            columns.unshift(columnHelper.display(createRowDraggableColumn(options.onRowDrag, texts)));\n            internalFrozenColumnCount++;\n        }\n\n        if (options.actionsForRow?.length) {\n            columns.push(columnHelper.display(createRowActionsColumn(options.actionsForRow, options.actionsForRowLength, texts)));\n        }\n\n        return { columns, internalFrozenColumnCount, defaultColumnSizing, defaultColumnVisibility, defaultSorting, footers };\n    }, [children]);\n}\n\nfunction getSortingFn<TType>(dataType?: ColumnDataType, customFn?: SortFn<TType>): SortingFnOption<TType> {\n    if (customFn) {\n        return (rowA, rowB, columnId) => customFn(rowA.original, rowB.original, columnId);\n    }\n\n    if (dataType && dataType !== 'boolean') {\n        return dataType;\n    }\n\n    return 'auto';\n}\n"],"names":["useColumnDefinitions","children","options","tableRef","texts","useLocalization","lastSelectedRowIndex","React","useRef","columnHelper","createColumnHelper","useMemo","internalFrozenColumnCount","columns","defaultColumnSizing","defaultColumnVisibility","defaultSorting","footers","Children","toArray","filter","child","forEach","isValidElement","defaultWidth","props","accessor","defaultHidden","enableColumnHiding","sort","undefined","push","id","desc","footer","accessorKey","cell","value","getValue","renderer","row","original","className","header","meta","align","control","dataType","disableReordering","menu","tooltip","enableHiding","disableHiding","enableColumnFilter","disableFiltering","filterFn","enableColumnFiltering","enableResizing","disableResizing","minSize","minWidth","MIN_COLUMN_SIZE","size","enableSorting","disableSorting","sortingFn","getSortingFn","sortFn","enableRowExpansion","expandedRowRenderer","unshift","display","createRowExpansionColumn","enableRowSelection","createRowSelectionColumn","enableMultipleRowSelection","onRowDrag","createRowDraggableColumn","actionsForRow","length","createRowActionsColumn","actionsForRowLength","customFn","rowA","rowB","columnId"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Table2/hooks/useGridTemplate.js

@@ -11,7 +11,9 @@ const useGridTemplate = table => {
     } else if (isInternalColumn(column.id)) {
       size = `${column.getSize()}px`;
     } else if (width) {
-      if (isLastColumn) {
+      if (width === '1fr') {
+        size = 'minmax(max-content, 1fr)';
+      } else if (isLastColumn) {
         size = `minmax(${width}px, auto)`;
       } else if (column.columnDef.minSize && width < column.columnDef.minSize) {
         // react-table is supposed to handle minSize itself but it is really buggy

package/dist/esm/packages/taco/src/components/Table2/hooks/useGridTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"useGridTemplate.js","sources":["../../../../../../../../src/components/Table2/hooks/useGridTemplate.ts"],"sourcesContent":["import { Table } from '@tanstack/react-table';\nimport { COLUMN_ID_FOR_ACTIONS, isInternalColumn } from '../utilities/columns';\n\nexport const useGridTemplate = (table: Table<any>) => {\n    const allVisibleColumns = table.getVisibleLeafColumns();\n\n    return allVisibleColumns.reduce((accum, column, index) => {\n        let size;\n        const isLastColumn = index === allVisibleColumns.length - 1;\n        const width = table.getState().columnSizing[column.id];\n\n        if (column.id === COLUMN_ID_FOR_ACTIONS) {\n            size = `minmax(max-content, auto)`;\n        } else if (isInternalColumn(column.id)) {\n            size = `${column.getSize()}px`;\n        } else if (width) {\n            if (isLastColumn) {\n                size = `minmax(${width}px, auto)`;\n            } else if (column.columnDef.minSize && width < column.columnDef.minSize) {\n                // react-table is supposed to handle minSize itself but it is really buggy\n                size = `${column.columnDef.minSize}px`;\n            } else {\n                size = `${width}px`;\n            }\n        } else if (column.getCanResize()) {\n            size = 'minmax(max-content, auto)';\n        } else {\n            size = 'max-content';\n        }\n\n        return `${accum} ${size}`;\n    }, '');\n};\n"],"names":["useGridTemplate","table","allVisibleColumns","getVisibleLeafColumns","reduce","accum","column","index","size","isLastColumn","length","width","getState","columnSizing","id","COLUMN_ID_FOR_ACTIONS","isInternalColumn","getSize","columnDef","minSize","getCanResize"],"mappings":";;MAGaA,eAAe,GAAIC,KAAiB;EAC7C,MAAMC,iBAAiB,GAAGD,KAAK,CAACE,qBAAqB,EAAE;EAEvD,OAAOD,iBAAiB,CAACE,MAAM,CAAC,CAACC,KAAK,EAAEC,MAAM,EAAEC,KAAK;IACjD,IAAIC,IAAI;IACR,MAAMC,YAAY,GAAGF,KAAK,KAAKL,iBAAiB,CAACQ,MAAM,GAAG,CAAC;IAC3D,MAAMC,KAAK,GAAGV,KAAK,CAACW,QAAQ,EAAE,CAACC,YAAY,CAACP,MAAM,CAACQ,EAAE,CAAC;IAEtD,IAAIR,MAAM,CAACQ,EAAE,KAAKC,qBAAqB,EAAE;MACrCP,IAAI,8BAA8B;KACrC,MAAM,IAAIQ,gBAAgB,CAACV,MAAM,CAACQ,EAAE,CAAC,EAAE;MACpCN,IAAI,MAAMF,MAAM,CAACW,OAAO,MAAM;KACjC,MAAM,IAAIN,KAAK,EAAE;MACd,IAAIF,YAAY,EAAE;QACdD,IAAI,aAAaG,gBAAgB;OACpC,MAAM,IAAIL,MAAM,CAACY,SAAS,CAACC,OAAO,IAAIR,KAAK,GAAGL,MAAM,CAACY,SAAS,CAACC,OAAO,EAAE;;QAErEX,IAAI,MAAMF,MAAM,CAACY,SAAS,CAACC,WAAW;OACzC,MAAM;QACHX,IAAI,MAAMG,SAAS;;KAE1B,MAAM,IAAIL,MAAM,CAACc,YAAY,EAAE,EAAE;MAC9BZ,IAAI,GAAG,2BAA2B;KACrC,MAAM;MACHA,IAAI,GAAG,aAAa;;IAGxB,UAAUH,SAASG,MAAM;GAC5B,EAAE,EAAE,CAAC;AACV;;;;"}
+{"version":3,"file":"useGridTemplate.js","sources":["../../../../../../../../src/components/Table2/hooks/useGridTemplate.ts"],"sourcesContent":["import { Table } from '@tanstack/react-table';\nimport { COLUMN_ID_FOR_ACTIONS, isInternalColumn } from '../utilities/columns';\n\nexport const useGridTemplate = (table: Table<any>) => {\n    const allVisibleColumns = table.getVisibleLeafColumns();\n\n    return allVisibleColumns.reduce((accum, column, index) => {\n        let size;\n        const isLastColumn = index === allVisibleColumns.length - 1;\n        const width = table.getState().columnSizing[column.id] as number | '1fr';\n\n        if (column.id === COLUMN_ID_FOR_ACTIONS) {\n            size = `minmax(max-content, auto)`;\n        } else if (isInternalColumn(column.id)) {\n            size = `${column.getSize()}px`;\n        } else if (width) {\n            if (width === '1fr') {\n                size = 'minmax(max-content, 1fr)';\n            } else if (isLastColumn) {\n                size = `minmax(${width}px, auto)`;\n            } else if (column.columnDef.minSize && width < column.columnDef.minSize) {\n                // react-table is supposed to handle minSize itself but it is really buggy\n                size = `${column.columnDef.minSize}px`;\n            } else {\n                size = `${width}px`;\n            }\n        } else if (column.getCanResize()) {\n            size = 'minmax(max-content, auto)';\n        } else {\n            size = 'max-content';\n        }\n\n        return `${accum} ${size}`;\n    }, '');\n};\n"],"names":["useGridTemplate","table","allVisibleColumns","getVisibleLeafColumns","reduce","accum","column","index","size","isLastColumn","length","width","getState","columnSizing","id","COLUMN_ID_FOR_ACTIONS","isInternalColumn","getSize","columnDef","minSize","getCanResize"],"mappings":";;MAGaA,eAAe,GAAIC,KAAiB;EAC7C,MAAMC,iBAAiB,GAAGD,KAAK,CAACE,qBAAqB,EAAE;EAEvD,OAAOD,iBAAiB,CAACE,MAAM,CAAC,CAACC,KAAK,EAAEC,MAAM,EAAEC,KAAK;IACjD,IAAIC,IAAI;IACR,MAAMC,YAAY,GAAGF,KAAK,KAAKL,iBAAiB,CAACQ,MAAM,GAAG,CAAC;IAC3D,MAAMC,KAAK,GAAGV,KAAK,CAACW,QAAQ,EAAE,CAACC,YAAY,CAACP,MAAM,CAACQ,EAAE,CAAmB;IAExE,IAAIR,MAAM,CAACQ,EAAE,KAAKC,qBAAqB,EAAE;MACrCP,IAAI,8BAA8B;KACrC,MAAM,IAAIQ,gBAAgB,CAACV,MAAM,CAACQ,EAAE,CAAC,EAAE;MACpCN,IAAI,MAAMF,MAAM,CAACW,OAAO,MAAM;KACjC,MAAM,IAAIN,KAAK,EAAE;MACd,IAAIA,KAAK,KAAK,KAAK,EAAE;QACjBH,IAAI,GAAG,0BAA0B;OACpC,MAAM,IAAIC,YAAY,EAAE;QACrBD,IAAI,aAAaG,gBAAgB;OACpC,MAAM,IAAIL,MAAM,CAACY,SAAS,CAACC,OAAO,IAAIR,KAAK,GAAGL,MAAM,CAACY,SAAS,CAACC,OAAO,EAAE;;QAErEX,IAAI,MAAMF,MAAM,CAACY,SAAS,CAACC,WAAW;OACzC,MAAM;QACHX,IAAI,MAAMG,SAAS;;KAE1B,MAAM,IAAIL,MAAM,CAACc,YAAY,EAAE,EAAE;MAC9BZ,IAAI,GAAG,2BAA2B;KACrC,MAAM;MACHA,IAAI,GAAG,aAAa;;IAGxB,UAAUH,SAASG,MAAM;GAC5B,EAAE,EAAE,CAAC;AACV;;;;"}

package/dist/esm/packages/taco/src/components/Table2/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../../../../../../../src/components/Table2/types.ts"],"sourcesContent":["import React from 'react';\nimport {\n    ColumnFiltersState,\n    ColumnOrderState,\n    ColumnSizingState,\n    OnChangeFn,\n    Row,\n    SortingState,\n    VisibilityState,\n} from '@tanstack/react-table';\nimport { DialogProps } from '../Dialog/Dialog';\nimport { IconName } from '../Icon/Icon';\nimport { MenuProps } from '../Menu/Menu';\n\nexport enum Table2FilterComparator {\n    Contains,\n    DoesNotContain,\n    IsEqualTo,\n    IsNotEqualTo,\n    IsGreaterThan,\n    IsLessThan,\n    IsBetween,\n    IsOneOf,\n    IsNoneOf,\n    IsAllOf,\n    IsEmpty,\n    IsNotEmpty,\n}\n\nexport type Table2Filter<TType = any> = {\n    comparator?: Table2FilterComparator;\n    value: TType | TType[];\n};\n\nexport type ColumnOffsetState = Record<string, number | undefined>;\nexport type RowDensity = 'compact' | 'normal' | 'comfortable' | 'spacious';\nexport type CellAlignment = 'left' | 'center' | 'right';\n\nexport type SortDirection = 'asc' | 'desc';\nexport type ColumnDataType = 'auto' | 'alphanumeric' | 'alphanumericCaseSensitive' | 'datetime' | 'boolean';\n\nexport type Table2ColumnHeaderRenderer<TType = any> = (value: any, row: TType) => JSX.Element | string | null;\nexport type Table2ColumnHeaderMenu = (props: Partial<MenuProps>) => JSX.Element;\nexport type Table2ColumnFooterRenderer = (values: any[]) => JSX.Element | string | null;\n\nexport type Table2ColumnControlProps = {\n    className?: string;\n    disabled?: boolean;\n    invalid?: boolean;\n    onBlur: (newValue?: any) => Promise<void>;\n    onFocus: React.FocusEventHandler;\n    readOnly?: boolean;\n    ref: React.RefObject<HTMLElement>;\n    setValue: (value: any) => void;\n    value: any;\n    // This is a temporary fix to enable up/down arrow key shortcuts on input in quick mode. For some reason,\n    // the preventDefault is true on Taco Input, so the keyboard shortcuts doesn't work. By adding this\n    // data attribute we make sure the event is coming from a control component, and then we can make sure\n    // keyboard shortcut works as expected.\n    'data-inline-editing-component'?: 'true';\n};\nexport type Table2ColumnControlRenderer<TType = any> =\n    | ((props: Table2ColumnControlProps, row?: TType) => JSX.Element)\n    | 'datepicker'\n    | 'input'\n    | 'switch';\n\nexport type SortFn<TType = unknown> = (rowA: TType, rowB: TType, columnId: string) => -1 | 0 | 1;\n\nexport type Table2ColumnProps<TType = any> = {\n    accessor: string;\n    align?: CellAlignment;\n    className?: string | ((row: Row<TType>) => string);\n    control?: Table2ColumnControlRenderer<TType>;\n    dataType?: ColumnDataType;\n    defaultActiveColumnIndex?: number;\n    defaultActiveRowIndex?: number;\n    defaultHidden?: boolean;\n    disableFiltering?: boolean;\n    disableHiding?: boolean;\n    disableReordering?: boolean;\n    disableResizing?: boolean;\n    disableSorting?: boolean;\n    defaultWidth?: number;\n    header: string;\n    headerClassName?: string;\n    footer?: Table2ColumnFooterRenderer;\n    renderer?: Table2ColumnHeaderRenderer<TType>;\n    menu?: Table2ColumnHeaderMenu;\n    minWidth?: number;\n    sort?: SortDirection;\n    sortFn?: SortFn<TType>;\n    tooltip?: string;\n};\n\nexport type Table2ActionProps<TType> = {\n    dialog?: (rows: TType[], resetSelectedRows: () => void) => (props: Partial<DialogProps>) => JSX.Element;\n    disabled?: boolean | ((rows: TType[]) => boolean);\n    icon: IconName | ((rows: TType[]) => IconName);\n    onClick?: (rows: TType[], resetSelectedRows: () => void) => void;\n    text: string | ((rows: TType[]) => string);\n    visible?: boolean | ((rows: TType[]) => boolean);\n};\n\nexport type Table2RowActionRenderer<TType = unknown> = (row: TType) => JSX.Element | null;\n\nexport type Table2Settings = {\n    columnFilters?: ColumnFiltersState;\n    columnOrder?: ColumnOrderState;\n    columnSizing?: ColumnSizingState;\n    columnVisibility?: VisibilityState;\n    frozenColumnCount?: number;\n    globalFilter?: string;\n    rowDensity?: RowDensity;\n    sorting?: SortingState;\n};\n\nexport type RowClickHandler<TType = any> = (row: TType) => void;\nexport type RowDragHandler<TType = any> = (\n    rows: TType[],\n    showPlaceholder: (string) => void,\n    setDataTransfer: (data: string) => void\n) => void;\nexport type RowDropHandler<TType = any> = (event: React.DragEvent, row: TType) => void;\nexport type RowSelectionHandler<TType = any> = (rows: TType[]) => void;\nexport type RowExpansionRenderer<TType = any> = (row: TType) => (() => JSX.Element) | null;\nexport type SortHandler = OnChangeFn<SortingState>;\nexport type SettingsHandler = OnChangeFn<Table2Settings>;\nexport type SaveHandlerErrorResponse = Record<string, string | undefined | null> | null;\nexport type SaveHandler<TType = any> = (row: TType, accessor: string) => Promise<SaveHandlerErrorResponse | void>;\n\nexport type DataColumnIndexes = {\n    dataColumnStartOffset: number;\n    dataColumnEndOffset: number;\n};\n\nexport type Table2Children<TType = any> = (React.ReactElement<Table2ColumnProps<TType>> | boolean | null | undefined)[];\n\nexport type Table2Props<TType = any> = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n    actionsForRow?: Table2RowActionRenderer<TType>[];\n    actionsForRowLength?: number;\n    children: Table2Children;\n    className?: string;\n    data: TType[];\n    defaultActiveRowIndex?: number;\n    disableColumnFiltering?: boolean;\n    disableColumnHiding?: boolean;\n    disableColumnFreezing?: boolean;\n    disableColumnReordering?: boolean;\n    disableColumnResizing?: boolean;\n    disableRowDensity?: boolean;\n    disableRowExpansion?: boolean;\n    disableRowSelection?: boolean;\n    disableMultipleRowSelection?: boolean;\n    disableSearch?: boolean;\n    disableSorting?: boolean;\n    emptyState?: () => JSX.Element;\n    expandedRowRenderer?: RowExpansionRenderer<TType>;\n    length?: number;\n    loadMore?: () => Promise<void>;\n    manualColumnFiltering?: boolean;\n    manualSearch?: boolean;\n    manualSorting?: boolean;\n    onChangeSettings?: SettingsHandler;\n    onRowClick?: RowClickHandler<TType>;\n    onRowDrag?: RowDragHandler<TType>;\n    onRowDrop?: RowDropHandler<TType>;\n    onRowSelect?: RowSelectionHandler<TType>;\n    onSave?: SaveHandler<TType>;\n    toolbarLeft?: JSX.Element;\n    toolbarRight?: JSX.Element;\n    settings?: Table2Settings;\n    _experimentalActionsForTable?: Table2ActionProps<TType>[];\n    _experimentalActionsForTableSummary?: (rows: TType[]) => JSX.Element | string;\n};\n"],"names":["Table2FilterComparator"],"mappings":"IAcYA;AAAZ,WAAYA,sBAAsB;EAC9BA,2EAAQ;EACRA,uFAAc;EACdA,6EAAS;EACTA,mFAAY;EACZA,qFAAa;EACbA,+EAAU;EACVA,6EAAS;EACTA,yEAAO;EACPA,2EAAQ;EACRA,yEAAO;EACPA,0EAAO;EACPA,gFAAU;AACd,CAAC,EAbWA,sBAAsB,KAAtBA,sBAAsB;;;;"}
+{"version":3,"file":"types.js","sources":["../../../../../../../src/components/Table2/types.ts"],"sourcesContent":["import React from 'react';\nimport {\n    ColumnFiltersState,\n    ColumnOrderState,\n    ColumnSizingState,\n    OnChangeFn,\n    Row,\n    SortingState,\n    VisibilityState,\n} from '@tanstack/react-table';\nimport { DialogProps } from '../Dialog/Dialog';\nimport { IconName } from '../Icon/Icon';\nimport { MenuProps } from '../Menu/Menu';\n\nexport enum Table2FilterComparator {\n    Contains,\n    DoesNotContain,\n    IsEqualTo,\n    IsNotEqualTo,\n    IsGreaterThan,\n    IsLessThan,\n    IsBetween,\n    IsOneOf,\n    IsNoneOf,\n    IsAllOf,\n    IsEmpty,\n    IsNotEmpty,\n}\n\nexport type Table2Filter<TType = any> = {\n    comparator?: Table2FilterComparator;\n    value: TType | TType[];\n};\n\nexport type ColumnOffsetState = Record<string, number | undefined>;\nexport type RowDensity = 'compact' | 'normal' | 'comfortable' | 'spacious';\nexport type CellAlignment = 'left' | 'center' | 'right';\n\nexport type SortDirection = 'asc' | 'desc';\nexport type ColumnDataType = 'auto' | 'alphanumeric' | 'alphanumericCaseSensitive' | 'datetime' | 'boolean';\n\nexport type Table2ColumnHeaderRenderer<TType = any> = (value: any, row: TType) => JSX.Element | string | null;\nexport type Table2ColumnHeaderMenu = (props: Partial<MenuProps>) => JSX.Element;\nexport type Table2ColumnFooterRenderer = (values: any[]) => JSX.Element | string | null;\n\nexport type Table2ColumnControlProps = {\n    className?: string;\n    disabled?: boolean;\n    invalid?: boolean;\n    onBlur: (newValue?: any) => Promise<void>;\n    onFocus: React.FocusEventHandler;\n    readOnly?: boolean;\n    ref: React.RefObject<HTMLElement>;\n    setValue: (value: any) => void;\n    value: any;\n    // This is a temporary fix to enable up/down arrow key shortcuts on input in quick mode. For some reason,\n    // the preventDefault is true on Taco Input, so the keyboard shortcuts doesn't work. By adding this\n    // data attribute we make sure the event is coming from a control component, and then we can make sure\n    // keyboard shortcut works as expected.\n    'data-inline-editing-component'?: 'true';\n};\nexport type Table2ColumnControlRenderer<TType = any> =\n    | ((props: Table2ColumnControlProps, row?: TType) => JSX.Element)\n    | 'datepicker'\n    | 'input'\n    | 'switch';\n\nexport type SortFn<TType = unknown> = (rowA: TType, rowB: TType, columnId: string) => -1 | 0 | 1;\n\nexport type Table2ColumnProps<TType = any> = {\n    accessor: string;\n    align?: CellAlignment;\n    className?: string | ((row: Row<TType>) => string);\n    control?: Table2ColumnControlRenderer<TType>;\n    dataType?: ColumnDataType;\n    defaultActiveColumnIndex?: number;\n    defaultActiveRowIndex?: number;\n    defaultHidden?: boolean;\n    disableFiltering?: boolean;\n    disableHiding?: boolean;\n    disableReordering?: boolean;\n    disableResizing?: boolean;\n    disableSorting?: boolean;\n    defaultWidth?: number | 'grow';\n    header: string;\n    headerClassName?: string;\n    footer?: Table2ColumnFooterRenderer;\n    renderer?: Table2ColumnHeaderRenderer<TType>;\n    menu?: Table2ColumnHeaderMenu;\n    minWidth?: number;\n    sort?: SortDirection;\n    sortFn?: SortFn<TType>;\n    tooltip?: string;\n};\n\nexport type Table2ActionProps<TType> = {\n    dialog?: (rows: TType[], resetSelectedRows: () => void) => (props: Partial<DialogProps>) => JSX.Element;\n    disabled?: boolean | ((rows: TType[]) => boolean);\n    icon: IconName | ((rows: TType[]) => IconName);\n    onClick?: (rows: TType[], resetSelectedRows: () => void) => void;\n    text: string | ((rows: TType[]) => string);\n    visible?: boolean | ((rows: TType[]) => boolean);\n};\n\nexport type Table2RowActionRenderer<TType = unknown> = (row: TType) => JSX.Element | null;\n\nexport type Table2Settings = {\n    columnFilters?: ColumnFiltersState;\n    columnOrder?: ColumnOrderState;\n    columnSizing?: ColumnSizingState;\n    columnVisibility?: VisibilityState;\n    frozenColumnCount?: number;\n    globalFilter?: string;\n    rowDensity?: RowDensity;\n    sorting?: SortingState;\n};\n\nexport type RowClickHandler<TType = any> = (row: TType) => void;\nexport type RowDragHandler<TType = any> = (\n    rows: TType[],\n    showPlaceholder: (string) => void,\n    setDataTransfer: (data: string) => void\n) => void;\nexport type RowDropHandler<TType = any> = (event: React.DragEvent, row: TType) => void;\nexport type RowSelectionHandler<TType = any> = (rows: TType[]) => void;\nexport type RowExpansionRenderer<TType = any> = (row: TType) => (() => JSX.Element) | null;\nexport type SortHandler = OnChangeFn<SortingState>;\nexport type SettingsHandler = OnChangeFn<Table2Settings>;\nexport type SaveHandlerErrorResponse = Record<string, string | undefined | null> | null;\nexport type SaveHandler<TType = any> = (row: TType, accessor: string) => Promise<SaveHandlerErrorResponse | void>;\n\nexport type DataColumnIndexes = {\n    dataColumnStartOffset: number;\n    dataColumnEndOffset: number;\n};\n\nexport type Table2Children<TType = any> = (React.ReactElement<Table2ColumnProps<TType>> | boolean | null | undefined)[];\n\nexport type Table2Props<TType = any> = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n    actionsForRow?: Table2RowActionRenderer<TType>[];\n    actionsForRowLength?: number;\n    children: Table2Children;\n    className?: string;\n    data: TType[];\n    defaultActiveRowIndex?: number;\n    disableColumnFiltering?: boolean;\n    disableColumnHiding?: boolean;\n    disableColumnFreezing?: boolean;\n    disableColumnReordering?: boolean;\n    disableColumnResizing?: boolean;\n    disableRowDensity?: boolean;\n    disableRowExpansion?: boolean;\n    disableRowSelection?: boolean;\n    disableMultipleRowSelection?: boolean;\n    disableSearch?: boolean;\n    disableSorting?: boolean;\n    emptyState?: () => JSX.Element;\n    expandedRowRenderer?: RowExpansionRenderer<TType>;\n    length?: number;\n    loadMore?: () => Promise<void>;\n    manualColumnFiltering?: boolean;\n    manualSearch?: boolean;\n    manualSorting?: boolean;\n    onChangeSettings?: SettingsHandler;\n    onRowClick?: RowClickHandler<TType>;\n    onRowDrag?: RowDragHandler<TType>;\n    onRowDrop?: RowDropHandler<TType>;\n    onRowSelect?: RowSelectionHandler<TType>;\n    onSave?: SaveHandler<TType>;\n    toolbarLeft?: JSX.Element;\n    toolbarRight?: JSX.Element;\n    settings?: Table2Settings;\n    _experimentalActionsForTable?: Table2ActionProps<TType>[];\n    _experimentalActionsForTableSummary?: (rows: TType[]) => JSX.Element | string;\n};\n"],"names":["Table2FilterComparator"],"mappings":"IAcYA;AAAZ,WAAYA,sBAAsB;EAC9BA,2EAAQ;EACRA,uFAAc;EACdA,6EAAS;EACTA,mFAAY;EACZA,qFAAa;EACbA,+EAAU;EACVA,6EAAS;EACTA,yEAAO;EACPA,2EAAQ;EACRA,yEAAO;EACPA,0EAAO;EACPA,gFAAU;AACd,CAAC,EAbWA,sBAAsB,KAAtBA,sBAAsB;;;;"}

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

@@ -1,5 +1,6 @@
 import { forwardRef, createElement } from 'react';
 import cn from 'classnames';
+import { getButtonClasses } from '../Button/util.js';
 import { Root, List, Trigger, Content } from '@radix-ui/react-tabs';
 
 const Tabs = /*#__PURE__*/forwardRef(function Tabs(props, ref) {
@@ -11,7 +12,7 @@ const Tabs = /*#__PURE__*/forwardRef(function Tabs(props, ref) {
     orientation = 'horizontal',
     ...otherProps
   } = props;
-  const className = cn('yt-tabs', `yt-tabs--${orientation}`, {
+  const className = cn({
     'flex w-full': orientation === 'vertical'
   }, props.className);
   return /*#__PURE__*/createElement(Root, Object.assign({}, otherProps, {
@@ -26,7 +27,7 @@ const Tabs = /*#__PURE__*/forwardRef(function Tabs(props, ref) {
   }), children);
 });
 const TabList = /*#__PURE__*/forwardRef(function Tab(props, ref) {
-  const className = cn('yt-tab__list border-b border-grey-300 flex flex-row m-0 mb-4', props.className);
+  const className = cn('border-grey-300 flex flex-row m-0 mb-4', 'aria-orientation-horizontal:border-b', 'aria-orientation-vertical:border-r aria-orientation-vertical:m-0 aria-orientation-vertical:mr-4 aria-orientation-vertical:flex-col ', props.className);
   return /*#__PURE__*/createElement(List, Object.assign({}, props, {
     className: className,
     ref: ref
@@ -34,19 +35,31 @@ const TabList = /*#__PURE__*/forwardRef(function Tab(props, ref) {
 });
 const TabTrigger = /*#__PURE__*/forwardRef(function Tab(props, ref) {
   const {
+    children,
     id,
     disabled,
     ...otherProps
   } = props;
-  const className = cn('yt-tab bg-transparent border-b-2 border-transparent text-grey-700 m-0 py-2 px-4', disabled ? 'cursor-not-allowed !text-grey-500' : 'cursor-pointer rounded-t hover:border-grey-300 aria-selected:border-blue-500 aria-selected:text-black aria-selected:hover:border-blue-300 hover:text-black active:yt-focus active:border-blue-500 focus:yt-focus focus:border-blue-500', props.className);
+  const triggerClassName = cn('group relative p-0.5 outline-none disabled:cursor-not-allowed disabled:text-black/50',
+  // horizontal
+  '[[aria-orientation="horizontal"]_&]:pb-1',
+  // horizontal
+  '[[aria-orientation="vertical"]_&]:pr-1');
+  const buttonClassName = cn(getButtonClasses(), 'group-focus-visible:yt-focus-inset group-enabled:group-hover:wcag-grey-200 pointer-events-none rounded px-3');
+  const activeClassName = cn('pointer-events-none absolute hidden bg-blue-500 group-aria-selected:flex',
+  // horizontal
+  '[[aria-orientation="horizontal"]_&]:rounded-t-sm [[aria-orientation="horizontal"]_&]:bottom-0 [[aria-orientation="horizontal"]_&]:left-0 [[aria-orientation="horizontal"]_&]:right-0 [[aria-orientation="horizontal"]_&]:-mb-px [[aria-orientation="horizontal"]_&]:h-0.5',
+  // vertical
+  '[[aria-orientation="vertical"]_&]:rounded-l-sm [[aria-orientation="vertical"]_&]:right-0 [[aria-orientation="vertical"]_&]:top-0 [[aria-orientation="vertical"]_&]:bottom-0 [[aria-orientation="vertical"]_&]:-mr-px [[aria-orientation="vertical"]_&]:w-0.5');
   return /*#__PURE__*/createElement(Trigger, Object.assign({}, otherProps, {
-    className: className,
+    className: triggerClassName,
     disabled: disabled,
     ref: ref,
-    style: {
-      transition: 'border 0.2s ease-in'
-    },
     value: id
+  }), /*#__PURE__*/createElement("span", {
+    className: buttonClassName
+  }, children), /*#__PURE__*/createElement("span", {
+    className: activeClassName
   }));
 });
 const TabContent = /*#__PURE__*/forwardRef(function Tab(props, ref) {
@@ -54,7 +67,7 @@ const TabContent = /*#__PURE__*/forwardRef(function Tab(props, ref) {
     id,
     ...otherProps
   } = props;
-  const className = cn('yt-tab__panel outline-none', props.className);
+  const className = cn('[&[data-orientation="vertical"]]:grow outline-none', props.className);
   return /*#__PURE__*/createElement(Content, Object.assign({}, otherProps, {
     className: className,
     ref: ref,

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

@@ -1 +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-300 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-700 m-0 py-2 px-4',\n        disabled\n            ? 'cursor-not-allowed !text-grey-500'\n            : 'cursor-pointer rounded-t hover:border-grey-300 aria-selected:border-blue-500 aria-selected:text-black aria-selected:hover:border-blue-300 hover:text-black active:yt-focus active:border-blue-500 focus:yt-focus focus:border-blue-500',\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,8DAA8D,EAAET,KAAK,CAACQ,SAAS,CAAC;EAErG,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,iFAAiF,EACjFS,QAAQ,GACF,mCAAmC,GACnC,wOAAwO,EAC9OlB,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;;;;"}
+{"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';\nimport { Orientation } from '../../types';\nimport { getButtonClasses } from '../Button/util';\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        {\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(\n        'border-grey-300 flex flex-row m-0 mb-4',\n        'aria-orientation-horizontal:border-b',\n        'aria-orientation-vertical:border-r aria-orientation-vertical:m-0 aria-orientation-vertical:mr-4 aria-orientation-vertical:flex-col ',\n        props.className\n    );\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 { children, id, disabled, ...otherProps } = props;\n\n    const triggerClassName = cn(\n        'group relative p-0.5 outline-none disabled:cursor-not-allowed disabled:text-black/50',\n        // horizontal\n        '[[aria-orientation=\"horizontal\"]_&]:pb-1',\n        // horizontal\n        '[[aria-orientation=\"vertical\"]_&]:pr-1'\n    );\n    const buttonClassName = cn(\n        getButtonClasses(),\n        'group-focus-visible:yt-focus-inset group-enabled:group-hover:wcag-grey-200 pointer-events-none rounded px-3'\n    );\n    const activeClassName = cn(\n        'pointer-events-none absolute hidden bg-blue-500 group-aria-selected:flex',\n        // horizontal\n        '[[aria-orientation=\"horizontal\"]_&]:rounded-t-sm [[aria-orientation=\"horizontal\"]_&]:bottom-0 [[aria-orientation=\"horizontal\"]_&]:left-0 [[aria-orientation=\"horizontal\"]_&]:right-0 [[aria-orientation=\"horizontal\"]_&]:-mb-px [[aria-orientation=\"horizontal\"]_&]:h-0.5',\n        // vertical\n        '[[aria-orientation=\"vertical\"]_&]:rounded-l-sm [[aria-orientation=\"vertical\"]_&]:right-0 [[aria-orientation=\"vertical\"]_&]:top-0 [[aria-orientation=\"vertical\"]_&]:bottom-0 [[aria-orientation=\"vertical\"]_&]:-mr-px [[aria-orientation=\"vertical\"]_&]:w-0.5'\n    );\n\n    return (\n        <TabsPrimitive.Trigger {...otherProps} className={triggerClassName} disabled={disabled} ref={ref} value={id}>\n            <span className={buttonClassName}>{children}</span>\n            <span className={activeClassName} />\n        </TabsPrimitive.Trigger>\n    );\n});\n\nconst TabContent = React.forwardRef(function Tab(props: TabContentProps, ref: React.Ref<HTMLDivElement>) {\n    const { id, ...otherProps } = props;\n    const className = cn('[&[data-orientation=\"vertical\"]]:grow 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","triggerClassName","buttonClassName","getButtonClasses","activeClassName","TabContent","List","Trigger","Content"],"mappings":";;;;;MA8DaA,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;IACI,aAAa,EAAEH,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,CAChB,wCAAwC,EACxC,sCAAsC,EACtC,qIAAqI,EACrIT,KAAK,CAACQ,SAAS,CAClB;EAED,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;IAAEG,QAAQ;IAAEF,EAAE;IAAEgB,QAAQ;IAAE,GAAGX;GAAY,GAAGP,KAAK;EAEvD,MAAMmB,gBAAgB,GAAGV,EAAE,CACvB,sFAAsF;;EAEtF,0CAA0C;;EAE1C,wCAAwC,CAC3C;EACD,MAAMW,eAAe,GAAGX,EAAE,CACtBY,gBAAgB,EAAE,EAClB,6GAA6G,CAChH;EACD,MAAMC,eAAe,GAAGb,EAAE,CACtB,0EAA0E;;EAE1E,2QAA2Q;;EAE3Q,8PAA8P,CACjQ;EAED,oBACIV,cAACW,OAAqB,oBAAKH,UAAU;IAAEC,SAAS,EAAEW,gBAAgB;IAAED,QAAQ,EAAEA,QAAQ;IAAEjB,GAAG,EAAEA,GAAG;IAAEa,KAAK,EAAEZ;mBACrGH;IAAMS,SAAS,EAAEY;KAAkBhB,QAAQ,CAAQ,eACnDL;IAAMS,SAAS,EAAEc;IAAmB,CAChB;AAEhC,CAAC,CAAC;AAEF,MAAMC,UAAU,gBAAGxB,UAAgB,CAAC,SAASiB,GAAG,CAAChB,KAAsB,EAAEC,GAA8B;EACnG,MAAM;IAAEC,EAAE;IAAE,GAAGK;GAAY,GAAGP,KAAK;EACnC,MAAMQ,SAAS,GAAGC,EAAE,CAAC,oDAAoD,EAAET,KAAK,CAACQ,SAAS,CAAC;EAE3F,oBAAOT,cAACW,OAAqB,oBAAKH,UAAU;IAAEC,SAAS,EAAEA,SAAS;IAAEP,GAAG,EAAEA,GAAG;IAAEa,KAAK,EAAEZ;KAAM;AAC/F,CAAC,CAAC;AAEFJ,IAAI,CAAC0B,IAAI,GAAGT,OAAO;AACnBjB,IAAI,CAAC2B,OAAO,GAAGR,UAAU;AACzBnB,IAAI,CAAC4B,OAAO,GAAGH,UAAU;;;;"}

package/dist/index.css

@@ -638,23 +638,3 @@
 #yt-table__drag__placeholder {
     @apply flex w-3/12 rounded bg-blue-500 p-4 font-bold text-white;
 }
-
-.yt-tabs .yt-tab__list[aria-orientation='vertical'] {
-    @apply m-0 mr-4 flex-col border-0 border-r;
-}
-
-.yt-tabs .yt-tab__list[aria-orientation='vertical'] .yt-tab {
-    @apply h-8 py-0;
-}
-
-.yt-tabs.yt-tabs--vertical .yt-tab__list {
-    @apply flex-initial;
-}
-
-.yt-tabs.yt-tabs--vertical .yt-tab__panel {
-    @apply flex-grow;
-}
-
-.yt-tabs .yt-tab__list[aria-orientation='vertical'] .yt-tab {
-    @apply rounded-none rounded-l border-0 border-r-2;
-}