@economic/taco 2.18.0 → 2.19.0

package/dist/esm/packages/taco/src/components/Table3/hooks/useCssVars.js

@@ -1,4 +1,4 @@
-import { FONT_SIZE } from '../components/toolbar/FontSize.js';
+import { FontSizes } from '../../../types.js';
 
 // we cannot just use a fixed height because our rows need to grow in height (images, edit mode validation etc)
 const getCellHeightPadding = (height, fontSize) => {
@@ -7,7 +7,7 @@ const getCellHeightPadding = (height, fontSize) => {
     case 'short':
       {
         switch (fontSize) {
-          case FONT_SIZE.small:
+          case FontSizes.small:
             return '8px';
           default:
             return '6px';
@@ -17,9 +17,9 @@ const getCellHeightPadding = (height, fontSize) => {
     case 'tall':
       {
         switch (fontSize) {
-          case FONT_SIZE.small:
+          case FontSizes.small:
             return '16px';
-          case FONT_SIZE.large:
+          case FontSizes.large:
             return '12px';
           default:
             return '14px';
@@ -28,9 +28,9 @@ const getCellHeightPadding = (height, fontSize) => {
     case 'extra-tall':
       {
         switch (fontSize) {
-          case FONT_SIZE.small:
+          case FontSizes.small:
             return '22px';
-          case FONT_SIZE.large:
+          case FontSizes.large:
             return '18px';
           default:
             return '20px';
@@ -39,9 +39,9 @@ const getCellHeightPadding = (height, fontSize) => {
     default:
       {
         switch (fontSize) {
-          case FONT_SIZE.small:
+          case FontSizes.small:
             return '12px';
-          case FONT_SIZE.large:
+          case FontSizes.large:
             return '8px';
           default:
             return '10px';
@@ -51,9 +51,9 @@ const getCellHeightPadding = (height, fontSize) => {
 };
 const getCellWidthPadding = fontSize => {
   switch (fontSize) {
-    case FONT_SIZE.small:
+    case FontSizes.small:
       return '8px';
-    case FONT_SIZE.medium:
+    case FontSizes.medium:
       return '12px';
     default:
       return '16px';

package/dist/esm/packages/taco/src/components/Table3/hooks/useCssVars.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCssVars.js","sources":["../../../../../../../../src/components/Table3/hooks/useCssVars.ts"],"sourcesContent":["import { FONT_SIZE } from '../components/toolbar/FontSize';\nimport { Table3FontSize, Table3RowHeight } from '../types';\n\n// we cannot just use a fixed height because our rows need to grow in height (images, edit mode validation etc)\nconst getCellHeightPadding = (height: Table3RowHeight, fontSize: Table3FontSize) => {\n    // TODO: can we get the rem values from tailwind\n    switch (height) {\n        case 'short': {\n            switch (fontSize) {\n                case FONT_SIZE.small:\n                    return '8px';\n\n                default:\n                    return '6px'; // py-1.5\n            }\n        }\n\n        case 'tall': {\n            switch (fontSize) {\n                case FONT_SIZE.small:\n                    return '16px';\n\n                case FONT_SIZE.large:\n                    return '12px';\n\n                default:\n                    return '14px';\n            }\n        }\n\n        case 'extra-tall': {\n            switch (fontSize) {\n                case FONT_SIZE.small:\n                    return '22px';\n\n                case FONT_SIZE.large:\n                    return '18px';\n\n                default:\n                    return '20px';\n            }\n        }\n\n        default: {\n            switch (fontSize) {\n                case FONT_SIZE.small:\n                    return '12px';\n\n                case FONT_SIZE.large:\n                    return '8px';\n\n                default:\n                    return '10px';\n            }\n        }\n    }\n};\n\nconst getCellWidthPadding = (fontSize: Table3FontSize) => {\n    switch (fontSize) {\n        case FONT_SIZE.small:\n            return '8px';\n\n        case FONT_SIZE.medium:\n            return '12px';\n\n        default:\n            return '16px'; // py-1.5\n    }\n};\n\nexport const useCssVars = (height: Table3RowHeight, fontSize: Table3FontSize) => {\n    const style = {\n        '--table3-cell-padding-x': getCellWidthPadding(fontSize),\n        '--table3-cell-padding-y': getCellHeightPadding(height, fontSize),\n    };\n\n    return { style };\n};\n"],"names":["getCellHeightPadding","height","fontSize","FONT_SIZE","small","large","getCellWidthPadding","medium","useCssVars","style"],"mappings":";;AAGA;AACA,MAAMA,oBAAoB,GAAGA,CAACC,MAAuB,EAAEC,QAAwB;;EAE3E,QAAQD,MAAM;IACV,KAAK,OAAO;MAAE;QACV,QAAQC,QAAQ;UACZ,KAAKC,SAAS,CAACC,KAAK;YAChB,OAAO,KAAK;UAEhB;YACI,OAAO,KAAK;;;;IAIxB,KAAK,MAAM;MAAE;QACT,QAAQF,QAAQ;UACZ,KAAKC,SAAS,CAACC,KAAK;YAChB,OAAO,MAAM;UAEjB,KAAKD,SAAS,CAACE,KAAK;YAChB,OAAO,MAAM;UAEjB;YACI,OAAO,MAAM;;;IAIzB,KAAK,YAAY;MAAE;QACf,QAAQH,QAAQ;UACZ,KAAKC,SAAS,CAACC,KAAK;YAChB,OAAO,MAAM;UAEjB,KAAKD,SAAS,CAACE,KAAK;YAChB,OAAO,MAAM;UAEjB;YACI,OAAO,MAAM;;;IAIzB;MAAS;QACL,QAAQH,QAAQ;UACZ,KAAKC,SAAS,CAACC,KAAK;YAChB,OAAO,MAAM;UAEjB,KAAKD,SAAS,CAACE,KAAK;YAChB,OAAO,KAAK;UAEhB;YACI,OAAO,MAAM;;;;AAIjC,CAAC;AAED,MAAMC,mBAAmB,GAAIJ,QAAwB;EACjD,QAAQA,QAAQ;IACZ,KAAKC,SAAS,CAACC,KAAK;MAChB,OAAO,KAAK;IAEhB,KAAKD,SAAS,CAACI,MAAM;MACjB,OAAO,MAAM;IAEjB;MACI,OAAO,MAAM;;;AAEzB,CAAC;MAEYC,UAAU,GAAGA,CAACP,MAAuB,EAAEC,QAAwB;EACxE,MAAMO,KAAK,GAAG;IACV,yBAAyB,EAAEH,mBAAmB,CAACJ,QAAQ,CAAC;IACxD,yBAAyB,EAAEF,oBAAoB,CAACC,MAAM,EAAEC,QAAQ;GACnE;EAED,OAAO;IAAEO;GAAO;AACpB;;;;"}
+{"version":3,"file":"useCssVars.js","sources":["../../../../../../../../src/components/Table3/hooks/useCssVars.ts"],"sourcesContent":["import { Table3RowHeight } from '../types';\nimport { FontSize, FontSizes } from '../../../types';\n\n// we cannot just use a fixed height because our rows need to grow in height (images, edit mode validation etc)\nconst getCellHeightPadding = (height: Table3RowHeight, fontSize: FontSize) => {\n    // TODO: can we get the rem values from tailwind\n    switch (height) {\n        case 'short': {\n            switch (fontSize) {\n                case FontSizes.small:\n                    return '8px';\n\n                default:\n                    return '6px'; // py-1.5\n            }\n        }\n\n        case 'tall': {\n            switch (fontSize) {\n                case FontSizes.small:\n                    return '16px';\n\n                case FontSizes.large:\n                    return '12px';\n\n                default:\n                    return '14px';\n            }\n        }\n\n        case 'extra-tall': {\n            switch (fontSize) {\n                case FontSizes.small:\n                    return '22px';\n\n                case FontSizes.large:\n                    return '18px';\n\n                default:\n                    return '20px';\n            }\n        }\n\n        default: {\n            switch (fontSize) {\n                case FontSizes.small:\n                    return '12px';\n\n                case FontSizes.large:\n                    return '8px';\n\n                default:\n                    return '10px';\n            }\n        }\n    }\n};\n\nconst getCellWidthPadding = (fontSize: FontSize) => {\n    switch (fontSize) {\n        case FontSizes.small:\n            return '8px';\n\n        case FontSizes.medium:\n            return '12px';\n\n        default:\n            return '16px'; // py-1.5\n    }\n};\n\nexport const useCssVars = (height: Table3RowHeight, fontSize: FontSize) => {\n    const style = {\n        '--table3-cell-padding-x': getCellWidthPadding(fontSize),\n        '--table3-cell-padding-y': getCellHeightPadding(height, fontSize),\n    };\n\n    return { style };\n};\n"],"names":["getCellHeightPadding","height","fontSize","FontSizes","small","large","getCellWidthPadding","medium","useCssVars","style"],"mappings":";;AAGA;AACA,MAAMA,oBAAoB,GAAGA,CAACC,MAAuB,EAAEC,QAAkB;;EAErE,QAAQD,MAAM;IACV,KAAK,OAAO;MAAE;QACV,QAAQC,QAAQ;UACZ,KAAKC,SAAS,CAACC,KAAK;YAChB,OAAO,KAAK;UAEhB;YACI,OAAO,KAAK;;;;IAIxB,KAAK,MAAM;MAAE;QACT,QAAQF,QAAQ;UACZ,KAAKC,SAAS,CAACC,KAAK;YAChB,OAAO,MAAM;UAEjB,KAAKD,SAAS,CAACE,KAAK;YAChB,OAAO,MAAM;UAEjB;YACI,OAAO,MAAM;;;IAIzB,KAAK,YAAY;MAAE;QACf,QAAQH,QAAQ;UACZ,KAAKC,SAAS,CAACC,KAAK;YAChB,OAAO,MAAM;UAEjB,KAAKD,SAAS,CAACE,KAAK;YAChB,OAAO,MAAM;UAEjB;YACI,OAAO,MAAM;;;IAIzB;MAAS;QACL,QAAQH,QAAQ;UACZ,KAAKC,SAAS,CAACC,KAAK;YAChB,OAAO,MAAM;UAEjB,KAAKD,SAAS,CAACE,KAAK;YAChB,OAAO,KAAK;UAEhB;YACI,OAAO,MAAM;;;;AAIjC,CAAC;AAED,MAAMC,mBAAmB,GAAIJ,QAAkB;EAC3C,QAAQA,QAAQ;IACZ,KAAKC,SAAS,CAACC,KAAK;MAChB,OAAO,KAAK;IAEhB,KAAKD,SAAS,CAACI,MAAM;MACjB,OAAO,MAAM;IAEjB;MACI,OAAO,MAAM;;;AAEzB,CAAC;MAEYC,UAAU,GAAGA,CAACP,MAAuB,EAAEC,QAAkB;EAClE,MAAMO,KAAK,GAAG;IACV,yBAAyB,EAAEH,mBAAmB,CAACJ,QAAQ,CAAC;IACxD,yBAAyB,EAAEF,oBAAoB,CAACC,MAAM,EAAEC,QAAQ;GACnE;EAED,OAAO;IAAEO;GAAO;AACpB;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../../../../../../../src/components/Table3/types.ts"],"sourcesContent":["import { ColumnOrderState, ColumnSizingState, SortingState, VisibilityState, BuiltInSortingFn } from '@tanstack/react-table';\nimport { MenuProps } from '../Menu/Menu';\nimport { MenuItemProps } from '../Menu/components/Item';\nimport {\n    TableColumnFilter,\n    TableColumnSort,\n    TableFilterHandler,\n    TableFontSize,\n    TableRef,\n    TableRowClickHandler,\n    TableRowGotoHandler,\n    TableRowHeight,\n    TableRowSelectHandler,\n    TableServerLoadAllHandler,\n    TableServerLoadPageHandler,\n    TableSortHandler,\n} from '../../primitives/Table/types';\nimport { ValueOf } from '../../types';\n\nexport type Table3SortDirection = 'asc' | 'desc';\nexport type Table3SortFn<TType = unknown> =\n    | ((rowA: TType, rowB: TType, columnId: string) => -1 | 0 | 1)\n    | BuiltInSortingFn\n    | 'auto';\n\n// columns\nexport type Table3ColumnRenderer<TValue = unknown, TType = unknown> = (\n    value: TValue,\n    row: TType\n) => JSX.Element | string | number | null;\nexport type Table3ColumnFooterRenderer<TValue = unknown> = (values: TValue[]) => JSX.Element | string | number | null;\nexport type Table3ColumnClassNameHandler<TType = unknown> = string | ((row: TType) => string | undefined);\nexport type Table3ColumnAlignment = 'left' | 'center' | 'right';\nexport type Table3ColumnDataType = 'auto' | 'number' | 'alphanumeric' | 'alphanumericCaseSensitive' | 'datetime' | 'boolean';\nexport type Table3ColumnHeaderMenu = (props: Partial<MenuProps>) => JSX.Element;\n\nexport type Table3ColumnControlProps = {\n    className?: string;\n    disabled?: boolean;\n    invalid?: boolean;\n    onBlur?: (value: any) => void;\n    onFocus?: React.FocusEventHandler;\n    readOnly?: boolean;\n    ref: React.RefObject<HTMLElement> | ((instance: HTMLElement | null | undefined) => void);\n    setValue: (value: any) => void;\n    value: any;\n};\nexport type Table3ColumnControlRenderer<TType = unknown> =\n    | ((props: Table3ColumnControlProps, row?: TType) => JSX.Element)\n    | 'datepicker'\n    | 'input'\n    | 'switch'\n    | 'textarea';\n\nexport type Table3ColumnProps<TType = unknown> = ValueOf<{\n    [K in keyof TType]: {\n        accessor: K;\n    } & {\n        align?: Table3ColumnAlignment;\n        className?: Table3ColumnClassNameHandler<TType>;\n        control?: Table3ColumnControlRenderer<TType>;\n        dataType?: Table3ColumnDataType;\n        defaultHidden?: boolean;\n        defaultWidth?: number | 'grow';\n        enableFiltering?: boolean;\n        enableHiding?: boolean;\n        enableOrdering?: boolean;\n        enablePrinting?: boolean;\n        enableResizing?: boolean;\n        enableSearch?: boolean;\n        enableSorting?: boolean;\n        enableTruncate?: boolean;\n        filters?: Table3FilterComparator[];\n        footer?: Table3ColumnFooterRenderer;\n        header: string;\n        headerClassName?: string;\n        menu?: Table3ColumnHeaderMenu;\n        minWidth?: number;\n        renderer?: Table3ColumnRenderer<TType[K], TType>;\n        sort?: Table3SortDirection;\n        sortFn?: Table3SortFn<TType>;\n        tooltip?: string;\n    };\n}>;\n\nexport type Table3GroupProps = {\n    id: string;\n    header: string;\n    colSpan?: number;\n    children: (JSX.Element | boolean | null | undefined)[];\n};\n\n// rows\nexport type DeprecatedRowDensity = 'compact' | 'normal' | 'comfortable' | 'spacious';\nexport type Table3RowHeight = TableRowHeight;\nexport type Table3FontSize = TableFontSize;\nexport type Table3RowClickHandler<TType = unknown> = TableRowClickHandler<TType>;\nexport type Table3RowDragHandler<TType = unknown> = (\n    rows: TType[],\n    showPlaceholder: (string) => void,\n    setDataTransfer: (data: string) => void\n) => void;\nexport type Table3RowDropHandler<TType = any> = (event: React.DragEvent, row: TType) => void;\nexport type Table3RowExpansionRenderer<TType = unknown> = (row: TType) => (() => JSX.Element) | null;\nexport type Table3RowSelectionHandler<TType = unknown> = TableRowSelectHandler<TType>;\nexport type Table3RowActionRenderer<TType = unknown> = (row: TType) => JSX.Element | null;\n\n// table\nexport type Table3Preset = 'display' | 'editable';\nexport type Table3Settings = {\n    columnFreezingIndex?: number;\n    columnOrder?: ColumnOrderState;\n    columnSizing?: ColumnSizingState;\n    columnVisibility?: VisibilityState;\n    excludeUnmatchedRecordsInSearch?: boolean;\n    fontSize?: Table3FontSize;\n    rowHeight?: Table3RowHeight;\n    showWarningWhenPrintingLargeDataset?: boolean;\n    sorting?: SortingState;\n};\nexport type Table3SettingsHandler = (settings: Table3Settings) => void | Promise<void>;\n\nexport enum Table3FilterComparator {\n    Contains,\n    DoesNotContain,\n    IsEqualTo,\n    IsNotEqualTo,\n    IsGreaterThan,\n    IsLessThan,\n    IsBetween,\n    IsEmpty,\n    IsNotEmpty,\n    IsLessThanOrEqualTo,\n    IsGreaterThanOrEqualTo,\n    HasAnyOf,\n    HasAllOf,\n    HasNoneOf,\n}\n\nexport type Table3FilterValue = {\n    comparator: Table3FilterComparator | null;\n    value: any;\n};\n\nexport type Table3Filter = { id: string | null; value: Table3FilterValue };\n\nexport type ColumnFilter = TableColumnFilter;\nexport type Table3FilterHandler = TableFilterHandler;\nexport type Table3LoadPageHandler = TableServerLoadPageHandler;\nexport type Table3LoadAllHandler = TableServerLoadAllHandler;\nexport type Table3RowGotoHandler = TableRowGotoHandler;\nexport type Table3ColumnSort = TableColumnSort;\nexport type Table3SortHandler = TableSortHandler;\nexport type RowErrors = Record<string, string>;\nexport type Table3CellValidationHandler<TType = unknown> = (\n    cellValue: any,\n    cellId: string,\n    row: TType\n) => Promise<RowErrors | undefined | void>;\nexport type Table3RowValidationHandler<TType = unknown> = (row: TType) => Promise<RowErrors | undefined | void>;\nexport type TableStrategy = {\n    renderBody: () => JSX.Element | JSX.Element[] | null;\n    scrollToIndex: (index: number, options?: { align: 'start' | 'center' | 'end' | 'auto' }) => void;\n};\nexport type Table3ShortcutHandlerFn<TType = unknown> = (row: TType) => void;\nexport type Table3ShortcutHandlerObject<TType = unknown> = {\n    handler: Table3ShortcutHandlerFn<TType>;\n    meta?: boolean;\n    shift?: boolean;\n};\nexport type Table3Shortcuts<TType = unknown> = Record<\n    string,\n    Table3ShortcutHandlerFn<TType> | Table3ShortcutHandlerObject<TType>\n>;\nexport type Table3SaveHandler<TType = unknown> = (data: TType) => Promise<void>;\n\nexport type Table3Options = {\n    enableColumnFreezing: boolean;\n    enableColumnHiding: boolean;\n    enableColumnOrdering: boolean;\n    enableColumnResizing: boolean;\n    enableFontSize: boolean;\n    enableFooter: boolean;\n    enablePrinting: boolean;\n    enableRowDrag: boolean;\n    enableRowDrop: boolean;\n    enableRowExpansion: boolean;\n    enableRowGoto: boolean;\n    enableRowHeight: boolean;\n    enableRowSelection: boolean;\n    enableRowSelectionSingle: boolean;\n    enableEditing: boolean;\n    enableFiltering: boolean;\n    enableSearch: boolean;\n    enableSorting: boolean;\n};\n\nexport type Table3CustomSettingRenderer = (props: Table3Settings) => React.ReactElement<MenuItemProps> | null;\n\nexport type Table3CommonProps<TType = unknown> = Partial<Table3Options> & {\n    actionsForRow?: Table3RowActionRenderer<TType>[];\n    actionsForRowLength?: number;\n    autoFocus?: boolean;\n    children: (JSX.Element | boolean | null | undefined)[];\n    customSettings?: Table3CustomSettingRenderer[];\n    data: TType[];\n    defaultColumnFreezingIndex?: number;\n    defaultCurrentRowIndex?: number;\n    defaultSettings?: Table3Settings;\n    emptyState?: () => JSX.Element | null;\n    expandedRowRenderer?: Table3RowExpansionRenderer<TType>;\n    id: string;\n    onChangeSettings?: Table3SettingsHandler;\n    onRowClick?: Table3RowClickHandler<TType>;\n    onRowDrag?: Table3RowDragHandler<TType>;\n    onRowDrop?: Table3RowDropHandler<TType>;\n    onRowGoto?: Table3RowGotoHandler;\n    onRowSelect?: Table3RowSelectionHandler<TType>;\n    onFilter?: Table3FilterHandler;\n    onSave?: Table3SaveHandler<TType>;\n    onSort?: Table3SortHandler;\n    onCellValidate?: Table3CellValidationHandler<TType>;\n    onRowValidate?: Table3RowValidationHandler<TType>;\n    preset?: Table3Preset;\n    shortcuts?: Table3Shortcuts<TType>;\n    toolbarLeft?: JSX.Element;\n    toolbarRight?: JSX.Element;\n    rowIdentifier?: string;\n};\n\ninterface Table3ClientProps<TType = unknown> extends Table3CommonProps<TType> {\n    length?: never;\n    loadPage?: never;\n    loadAll?: never;\n    pageSize?: never;\n}\n\ninterface Table3ServerProps<TType = unknown> extends Table3CommonProps<TType> {\n    length: number | undefined;\n    loadPage: Table3LoadPageHandler;\n    loadAll: Table3LoadAllHandler;\n    pageSize?: number;\n}\n\nexport type Table3Props<TType = unknown> = Table3ClientProps<TType> | Table3ServerProps<TType>;\n\nexport type Table3Ref = TableRef & {\n    instance: {\n        toggleEditing: (enabled: boolean | undefined) => void;\n    };\n};\n\nexport type Table3Texts = {\n    columns: {\n        actions: {\n            tooltip: string;\n        };\n        drag: {\n            tooltip: string;\n        };\n        expansion: {\n            collapse: string;\n            collapseAll: string;\n            expand: string;\n            expandAll: string;\n        };\n        menu: {\n            freezeFirstColumn: string;\n            freezeUptoColumn: string;\n            gotoRow: string;\n            hideColumn: string;\n            unfreezeColumns: string;\n            sorting: string;\n            sortingOrder: {\n                ascending: string;\n                descending: string;\n                unsorted: string;\n            };\n        };\n        resize: {\n            tooltip: string;\n        };\n        select: {\n            deselect: string;\n            deselectAll: string;\n            select: string;\n            selectAll: string;\n        };\n    };\n    columnSettings: {\n        button: string;\n        noResults: string;\n        search: string;\n        tooltip: string;\n    };\n    editing: {\n        actions: {\n            tooltip: string;\n            save: string;\n            clear: string;\n            exit: string;\n        };\n        buttons: {\n            edit: {\n                tooltip: string;\n            };\n        };\n        rowIndicator: {\n            rowWillMove: string;\n            rowWillBeHidden: string;\n            rowWillMoveReasonSearch: string;\n            rowWillMoveReasonFilter: string;\n            rowWillMoveReasonSorting: string;\n        };\n        saving: {\n            progress: string;\n            complete: string;\n        };\n        clearChangesConfirmationDialog: {\n            title: string;\n            description: string;\n            cancel: string;\n            confirm: string;\n        };\n    };\n    filters: {\n        button: string;\n        buttons: {\n            addFilter: string;\n            clearFilters: string;\n        };\n        comparators: {\n            contains: string;\n            doesNotContain: string;\n            isEqualTo: string;\n            isNotEqualTo: string;\n            isGreaterThan: string;\n            isLessThan: string;\n            isBetween: string;\n            isEmpty: string;\n            isNotEmpty: string;\n            isBefore: string;\n            isAfter: string;\n            isLessThanOrEqualTo: string;\n            isGreaterThanOrEqualTo: string;\n            isOnOrBefore: string;\n            isOnOrAfter: string;\n            hasAnyOf: string;\n            hasAllOf: string;\n            hasNoneOf: string;\n        };\n        conditions: {\n            and: string;\n            where: string;\n        };\n        emptyFilter: {\n            condition: string;\n            value: string;\n        };\n        hiddenColumn: string;\n        tooltip: string;\n        total: string;\n    };\n    fontSize: {\n        tooltip: string;\n        sizes: {\n            small: string;\n            medium: string;\n            large: string;\n        };\n    };\n    footer: {\n        summary: {\n            count: string;\n            records: string;\n            selected: string;\n        };\n    };\n    print: {\n        error: string;\n        loading: string;\n        tooltip: string;\n        warningDialog: {\n            title: string;\n            description: string;\n            checkboxVisibilityLabel: string;\n            cancelButtonText: string;\n            printButtonText: string;\n        };\n    };\n    rowHeight: {\n        tooltip: string;\n        sizes: {\n            short: string;\n            medium: string;\n            tall: string;\n            extraTall: string;\n        };\n    };\n    search: {\n        excludeUnmatchedResults: string;\n        placeholder: string;\n    };\n    otherOptions: {\n        tooltip: string;\n    };\n    validation: {\n        index: string;\n        alert: {\n            unsavedEntries: (count?: number) => string;\n            incompleteAndHavntBeenSaved: (count?: number) => string;\n        };\n        resetFiltersDialog: {\n            title: string;\n            description: string;\n            cancel: string;\n            confirm: string;\n        };\n    };\n};\n"],"names":["Table3FilterComparator"],"mappings":"IA0HYA;AAAZ,WAAYA,sBAAsB;EAC9BA,2EAAQ;EACRA,uFAAc;EACdA,6EAAS;EACTA,mFAAY;EACZA,qFAAa;EACbA,+EAAU;EACVA,6EAAS;EACTA,yEAAO;EACPA,+EAAU;EACVA,iGAAmB;EACnBA,wGAAsB;EACtBA,4EAAQ;EACRA,4EAAQ;EACRA,8EAAS;AACb,CAAC,EAfWA,sBAAsB,KAAtBA,sBAAsB;;;;"}
+{"version":3,"file":"types.js","sources":["../../../../../../../src/components/Table3/types.ts"],"sourcesContent":["import { ColumnOrderState, ColumnSizingState, SortingState, VisibilityState, BuiltInSortingFn } from '@tanstack/react-table';\nimport { MenuProps } from '../Menu/Menu';\nimport { MenuItemProps } from '../Menu/components/Item';\nimport {\n    TableColumnFilter,\n    TableColumnSort,\n    TableFilterHandler,\n    TableRef,\n    TableRowClickHandler,\n    TableRowGotoHandler,\n    TableRowHeight,\n    TableRowSelectHandler,\n    TableServerLoadAllHandler,\n    TableServerLoadPageHandler,\n    TableSortHandler,\n} from '../../primitives/Table/types';\nimport { FontSize, ValueOf } from '../../types';\n\nexport type Table3SortDirection = 'asc' | 'desc';\nexport type Table3SortFn<TType = unknown> =\n    | ((rowA: TType, rowB: TType, columnId: string) => -1 | 0 | 1)\n    | BuiltInSortingFn\n    | 'auto';\n\n// columns\nexport type Table3ColumnRenderer<TValue = unknown, TType = unknown> = (\n    value: TValue,\n    row: TType\n) => JSX.Element | string | number | null;\nexport type Table3ColumnFooterRenderer<TValue = unknown> = (values: TValue[]) => JSX.Element | string | number | null;\nexport type Table3ColumnClassNameHandler<TType = unknown> = string | ((row: TType) => string | undefined);\nexport type Table3ColumnAlignment = 'left' | 'center' | 'right';\nexport type Table3ColumnDataType = 'auto' | 'number' | 'alphanumeric' | 'alphanumericCaseSensitive' | 'datetime' | 'boolean';\nexport type Table3ColumnHeaderMenu = (props: Partial<MenuProps>) => JSX.Element;\n\nexport type Table3ColumnControlProps = {\n    className?: string;\n    disabled?: boolean;\n    invalid?: boolean;\n    onBlur?: (value: any) => void;\n    onFocus?: React.FocusEventHandler;\n    readOnly?: boolean;\n    ref: React.RefObject<HTMLElement> | ((instance: HTMLElement | null | undefined) => void);\n    setValue: (value: any) => void;\n    value: any;\n    fontSize?: FontSize;\n};\nexport type Table3ColumnControlRenderer<TType = unknown> =\n    | ((props: Table3ColumnControlProps, row?: TType) => JSX.Element)\n    | 'datepicker'\n    | 'input'\n    | 'switch'\n    | 'textarea';\n\nexport type Table3ColumnProps<TType = unknown> = ValueOf<{\n    [K in keyof TType]: {\n        accessor: K;\n    } & {\n        align?: Table3ColumnAlignment;\n        className?: Table3ColumnClassNameHandler<TType>;\n        control?: Table3ColumnControlRenderer<TType>;\n        dataType?: Table3ColumnDataType;\n        defaultHidden?: boolean;\n        defaultWidth?: number | 'grow';\n        enableFiltering?: boolean;\n        enableHiding?: boolean;\n        enableOrdering?: boolean;\n        enablePrinting?: boolean;\n        enableResizing?: boolean;\n        enableSearch?: boolean;\n        enableSorting?: boolean;\n        enableTruncate?: boolean;\n        filters?: Table3FilterComparator[];\n        footer?: Table3ColumnFooterRenderer;\n        header: string;\n        headerClassName?: string;\n        menu?: Table3ColumnHeaderMenu;\n        minWidth?: number;\n        renderer?: Table3ColumnRenderer<TType[K], TType>;\n        sort?: Table3SortDirection;\n        sortFn?: Table3SortFn<TType>;\n        tooltip?: string;\n    };\n}>;\n\nexport type Table3GroupProps = {\n    id: string;\n    header: string;\n    colSpan?: number;\n    children: (JSX.Element | boolean | null | undefined)[];\n};\n\n// rows\nexport type DeprecatedRowDensity = 'compact' | 'normal' | 'comfortable' | 'spacious';\nexport type Table3RowHeight = TableRowHeight;\nexport type Table3RowClickHandler<TType = unknown> = TableRowClickHandler<TType>;\nexport type Table3RowDragHandler<TType = unknown> = (\n    rows: TType[],\n    showPlaceholder: (string) => void,\n    setDataTransfer: (data: string) => void\n) => void;\nexport type Table3RowDropHandler<TType = any> = (event: React.DragEvent, row: TType) => void;\nexport type Table3RowExpansionRenderer<TType = unknown> = (row: TType) => (() => JSX.Element) | null;\nexport type Table3RowSelectionHandler<TType = unknown> = TableRowSelectHandler<TType>;\nexport type Table3RowActionRenderer<TType = unknown> = (row: TType) => JSX.Element | null;\n\n// table\nexport type Table3Preset = 'display' | 'editable';\nexport type Table3Settings = {\n    columnFreezingIndex?: number;\n    columnOrder?: ColumnOrderState;\n    columnSizing?: ColumnSizingState;\n    columnVisibility?: VisibilityState;\n    excludeUnmatchedRecordsInSearch?: boolean;\n    fontSize?: FontSize;\n    rowHeight?: Table3RowHeight;\n    showWarningWhenPrintingLargeDataset?: boolean;\n    sorting?: SortingState;\n};\nexport type Table3SettingsHandler = (settings: Table3Settings) => void | Promise<void>;\n\nexport enum Table3FilterComparator {\n    Contains,\n    DoesNotContain,\n    IsEqualTo,\n    IsNotEqualTo,\n    IsGreaterThan,\n    IsLessThan,\n    IsBetween,\n    IsEmpty,\n    IsNotEmpty,\n    IsLessThanOrEqualTo,\n    IsGreaterThanOrEqualTo,\n    HasAnyOf,\n    HasAllOf,\n    HasNoneOf,\n}\n\nexport type Table3FilterValue = {\n    comparator: Table3FilterComparator | null;\n    value: any;\n};\n\nexport type Table3Filter = { id: string | null; value: Table3FilterValue };\n\nexport type ColumnFilter = TableColumnFilter;\nexport type Table3FilterHandler = TableFilterHandler;\nexport type Table3LoadPageHandler = TableServerLoadPageHandler;\nexport type Table3LoadAllHandler = TableServerLoadAllHandler;\nexport type Table3RowGotoHandler = TableRowGotoHandler;\nexport type Table3ColumnSort = TableColumnSort;\nexport type Table3SortHandler = TableSortHandler;\nexport type RowErrors = Record<string, string>;\nexport type Table3CellValidationHandler<TType = unknown> = (\n    cellValue: any,\n    cellId: string,\n    row: TType\n) => Promise<RowErrors | undefined | void>;\nexport type Table3RowValidationHandler<TType = unknown> = (row: TType) => Promise<RowErrors | undefined | void>;\nexport type TableStrategy = {\n    renderBody: () => JSX.Element | JSX.Element[] | null;\n    scrollToIndex: (index: number, options?: { align: 'start' | 'center' | 'end' | 'auto' }) => void;\n};\nexport type Table3ShortcutHandlerFn<TType = unknown> = (row: TType) => void;\nexport type Table3ShortcutHandlerObject<TType = unknown> = {\n    handler: Table3ShortcutHandlerFn<TType>;\n    meta?: boolean;\n    shift?: boolean;\n};\nexport type Table3Shortcuts<TType = unknown> = Record<\n    string,\n    Table3ShortcutHandlerFn<TType> | Table3ShortcutHandlerObject<TType>\n>;\nexport type Table3SaveHandler<TType = unknown> = (data: TType) => Promise<void>;\n\nexport type Table3Options = {\n    enableColumnFreezing: boolean;\n    enableColumnHiding: boolean;\n    enableColumnOrdering: boolean;\n    enableColumnResizing: boolean;\n    enableFontSize: boolean;\n    enableFooter: boolean;\n    enablePrinting: boolean;\n    enableRowDrag: boolean;\n    enableRowDrop: boolean;\n    enableRowExpansion: boolean;\n    enableRowGoto: boolean;\n    enableRowHeight: boolean;\n    enableRowSelection: boolean;\n    enableRowSelectionSingle: boolean;\n    enableEditing: boolean;\n    enableFiltering: boolean;\n    enableSearch: boolean;\n    enableSorting: boolean;\n};\n\nexport type Table3CustomSettingRenderer = (props: Table3Settings) => React.ReactElement<MenuItemProps> | null;\n\nexport type Table3CommonProps<TType = unknown> = Partial<Table3Options> & {\n    actionsForRow?: Table3RowActionRenderer<TType>[];\n    actionsForRowLength?: number;\n    autoFocus?: boolean;\n    children: (JSX.Element | boolean | null | undefined)[];\n    customSettings?: Table3CustomSettingRenderer[];\n    data: TType[];\n    defaultColumnFreezingIndex?: number;\n    defaultCurrentRowIndex?: number;\n    defaultSettings?: Table3Settings;\n    emptyState?: () => JSX.Element | null;\n    expandedRowRenderer?: Table3RowExpansionRenderer<TType>;\n    id: string;\n    onChangeSettings?: Table3SettingsHandler;\n    onRowClick?: Table3RowClickHandler<TType>;\n    onRowDrag?: Table3RowDragHandler<TType>;\n    onRowDrop?: Table3RowDropHandler<TType>;\n    onRowGoto?: Table3RowGotoHandler;\n    onRowSelect?: Table3RowSelectionHandler<TType>;\n    onFilter?: Table3FilterHandler;\n    onSave?: Table3SaveHandler<TType>;\n    onSort?: Table3SortHandler;\n    onCellValidate?: Table3CellValidationHandler<TType>;\n    onRowValidate?: Table3RowValidationHandler<TType>;\n    preset?: Table3Preset;\n    shortcuts?: Table3Shortcuts<TType>;\n    toolbarLeft?: JSX.Element;\n    toolbarRight?: JSX.Element;\n    rowIdentifier?: string;\n};\n\ninterface Table3ClientProps<TType = unknown> extends Table3CommonProps<TType> {\n    length?: never;\n    loadPage?: never;\n    loadAll?: never;\n    pageSize?: never;\n}\n\ninterface Table3ServerProps<TType = unknown> extends Table3CommonProps<TType> {\n    length: number | undefined;\n    loadPage: Table3LoadPageHandler;\n    loadAll: Table3LoadAllHandler;\n    pageSize?: number;\n}\n\nexport type Table3Props<TType = unknown> = Table3ClientProps<TType> | Table3ServerProps<TType>;\n\nexport type Table3Ref = TableRef & {\n    instance: {\n        toggleEditing: (enabled: boolean | undefined) => void;\n    };\n};\n\nexport type Table3Texts = {\n    columns: {\n        actions: {\n            tooltip: string;\n        };\n        drag: {\n            tooltip: string;\n        };\n        expansion: {\n            collapse: string;\n            collapseAll: string;\n            expand: string;\n            expandAll: string;\n        };\n        menu: {\n            freezeFirstColumn: string;\n            freezeUptoColumn: string;\n            gotoRow: string;\n            hideColumn: string;\n            unfreezeColumns: string;\n            sorting: string;\n            sortingOrder: {\n                ascending: string;\n                descending: string;\n                unsorted: string;\n            };\n        };\n        resize: {\n            tooltip: string;\n        };\n        select: {\n            deselect: string;\n            deselectAll: string;\n            select: string;\n            selectAll: string;\n        };\n    };\n    columnSettings: {\n        button: string;\n        noResults: string;\n        search: string;\n        tooltip: string;\n    };\n    editing: {\n        actions: {\n            tooltip: string;\n            save: string;\n            clear: string;\n            exit: string;\n        };\n        buttons: {\n            edit: {\n                tooltip: string;\n            };\n        };\n        rowIndicator: {\n            rowWillMove: string;\n            rowWillBeHidden: string;\n            rowWillMoveReasonSearch: string;\n            rowWillMoveReasonFilter: string;\n            rowWillMoveReasonSorting: string;\n        };\n        saving: {\n            progress: string;\n            complete: string;\n        };\n        clearChangesConfirmationDialog: {\n            title: string;\n            description: string;\n            cancel: string;\n            confirm: string;\n        };\n    };\n    filters: {\n        button: string;\n        buttons: {\n            addFilter: string;\n            clearFilters: string;\n        };\n        comparators: {\n            contains: string;\n            doesNotContain: string;\n            isEqualTo: string;\n            isNotEqualTo: string;\n            isGreaterThan: string;\n            isLessThan: string;\n            isBetween: string;\n            isEmpty: string;\n            isNotEmpty: string;\n            isBefore: string;\n            isAfter: string;\n            isLessThanOrEqualTo: string;\n            isGreaterThanOrEqualTo: string;\n            isOnOrBefore: string;\n            isOnOrAfter: string;\n            hasAnyOf: string;\n            hasAllOf: string;\n            hasNoneOf: string;\n        };\n        conditions: {\n            and: string;\n            where: string;\n        };\n        emptyFilter: {\n            condition: string;\n            value: string;\n        };\n        hiddenColumn: string;\n        tooltip: string;\n        total: string;\n    };\n    fontSize: {\n        tooltip: string;\n        sizes: {\n            small: string;\n            medium: string;\n            large: string;\n        };\n    };\n    footer: {\n        summary: {\n            count: string;\n            records: string;\n            selected: string;\n        };\n    };\n    print: {\n        error: string;\n        loading: string;\n        tooltip: string;\n        warningDialog: {\n            title: string;\n            description: string;\n            checkboxVisibilityLabel: string;\n            cancelButtonText: string;\n            printButtonText: string;\n        };\n    };\n    rowHeight: {\n        tooltip: string;\n        sizes: {\n            short: string;\n            medium: string;\n            tall: string;\n            extraTall: string;\n        };\n    };\n    search: {\n        excludeUnmatchedResults: string;\n        placeholder: string;\n    };\n    otherOptions: {\n        tooltip: string;\n    };\n    validation: {\n        index: string;\n        alert: {\n            unsavedEntries: (count?: number) => string;\n            incompleteAndHavntBeenSaved: (count?: number) => string;\n        };\n        resetFiltersDialog: {\n            title: string;\n            description: string;\n            cancel: string;\n            confirm: string;\n        };\n    };\n};\n"],"names":["Table3FilterComparator"],"mappings":"IAyHYA;AAAZ,WAAYA,sBAAsB;EAC9BA,2EAAQ;EACRA,uFAAc;EACdA,6EAAS;EACTA,mFAAY;EACZA,qFAAa;EACbA,+EAAU;EACVA,6EAAS;EACTA,yEAAO;EACPA,+EAAU;EACVA,iGAAmB;EACnBA,wGAAsB;EACtBA,4EAAQ;EACRA,4EAAQ;EACRA,8EAAS;AACb,CAAC,EAfWA,sBAAsB,KAAtBA,sBAAsB;;;;"}

package/dist/esm/packages/taco/src/index.js

@@ -55,6 +55,7 @@ export { SearchInput2 } from './components/SearchInput2/SearchInput2.js';
 import * as Collection from './primitives/Collection/Collection.js';
 export { Collection as CollectionPrimitive };
 export { Tag } from './components/Tag/Tag.js';
+export { FontSizes, fixedForwardRef } from './types.js';
 export { Select2 } from './components/Select2/Select2.js';
 export { Switch } from './components/Switch/Switch.js';
 export { Table } from './components/Table/components/Table.js';
@@ -66,7 +67,6 @@ export { useLazyEffect } from './hooks/useLazyEffect.js';
 export { Textarea } from './components/Textarea/Textarea.js';
 export { useMatchMedia } from './hooks/useMatchMedia.js';
 export { useIsLargeScreen } from './hooks/useIsLargeScreen.js';
-export { fixedForwardRef } from './types.js';
 export { useTable3DataLoader } from './components/Table3/hooks/useTableDataLoader.js';
 export { Table3 } from './components/Table3/Table3.js';
 export { Tabs } from './components/Tabs/Tabs.js';

package/dist/esm/packages/taco/src/primitives/Table/useTable/features/useTableFontSize.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTableFontSize.js","sources":["../../../../../../../../../src/primitives/Table/useTable/features/useTableFontSize.ts"],"sourcesContent":["import React from 'react';\nimport { TableFontSize } from '../../types';\n\nexport function useTableFontSize(isEnabled = false, defaultFontSize: TableFontSize = 'medium') {\n    const [size, setSize] = React.useState<TableFontSize>(defaultFontSize);\n\n    return {\n        isEnabled,\n        size,\n        setSize: isEnabled ? setSize : () => undefined,\n    };\n}\n"],"names":["useTableFontSize","isEnabled","defaultFontSize","size","setSize","React","useState","undefined"],"mappings":";;SAGgBA,gBAAgBA,CAACC,SAAS,GAAG,KAAK,EAAEC,kBAAiC,QAAQ;EACzF,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAGC,cAAK,CAACC,QAAQ,CAAgBJ,eAAe,CAAC;EAEtE,OAAO;IACHD,SAAS;IACTE,IAAI;IACJC,OAAO,EAAEH,SAAS,GAAGG,OAAO,GAAG,MAAMG;GACxC;AACL;;;;"}
+{"version":3,"file":"useTableFontSize.js","sources":["../../../../../../../../../src/primitives/Table/useTable/features/useTableFontSize.ts"],"sourcesContent":["import React from 'react';\nimport { FontSize } from '../../../../types';\n\nexport function useTableFontSize(isEnabled = false, defaultFontSize: FontSize = 'medium') {\n    const [size, setSize] = React.useState<FontSize>(defaultFontSize);\n\n    return {\n        isEnabled,\n        size,\n        setSize: isEnabled ? setSize : () => undefined,\n    };\n}\n"],"names":["useTableFontSize","isEnabled","defaultFontSize","size","setSize","React","useState","undefined"],"mappings":";;SAGgBA,gBAAgBA,CAACC,SAAS,GAAG,KAAK,EAAEC,kBAA4B,QAAQ;EACpF,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAGC,cAAK,CAACC,QAAQ,CAAWJ,eAAe,CAAC;EAEjE,OAAO;IACHD,SAAS;IACTE,IAAI;IACJC,OAAO,EAAEH,SAAS,GAAGG,OAAO,GAAG,MAAMG;GACxC;AACL;;;;"}

package/dist/esm/packages/taco/src/primitives/Table/useTable/listeners/useTableFontSizeListener.js

@@ -1,5 +1,5 @@
 import React__default from 'react';
-import { TableFontSizes } from '../../types.js';
+import { FontSizes } from '../../../../types.js';
 import { getCellMinWidth } from '../util/columns.js';
 import { useLazyEffect } from '../../../../hooks/useLazyEffect.js';
 
@@ -21,15 +21,15 @@ function useTableFontSizeListener(table) {
 }
 function getCellWidthDifference(fontSizeKey) {
   switch (fontSizeKey) {
-    case `${TableFontSizes.small}-${TableFontSizes.medium}`:
-    case `${TableFontSizes.medium}-${TableFontSizes.large}`:
+    case `${FontSizes.small}-${FontSizes.medium}`:
+    case `${FontSizes.medium}-${FontSizes.large}`:
       return 8;
-    case `${TableFontSizes.medium}-${TableFontSizes.small}`:
-    case `${TableFontSizes.large}-${TableFontSizes.medium}`:
+    case `${FontSizes.medium}-${FontSizes.small}`:
+    case `${FontSizes.large}-${FontSizes.medium}`:
       return -8;
-    case `${TableFontSizes.small}-${TableFontSizes.large}`:
+    case `${FontSizes.small}-${FontSizes.large}`:
       return 16;
-    case `${TableFontSizes.large}-${TableFontSizes.small}`:
+    case `${FontSizes.large}-${FontSizes.small}`:
       return -16;
     default:
       return 0;

package/dist/esm/packages/taco/src/primitives/Table/useTable/listeners/useTableFontSizeListener.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTableFontSizeListener.js","sources":["../../../../../../../../../src/primitives/Table/useTable/listeners/useTableFontSizeListener.ts"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport { useLazyEffect } from '../../../../hooks/useLazyEffect';\nimport { TableFontSizes } from '../../types';\nimport { getCellMinWidth } from '../util/columns';\n\nexport function useTableFontSizeListener<TType = unknown>(table: ReactTable<TType>) {\n    const meta = table.options.meta as ReactTableMeta<TType>;\n    const previousFontSizeRef = React.useRef(meta.fontSize.size);\n\n    useLazyEffect(() => {\n        const cellWidthDifference = getCellWidthDifference(`${previousFontSizeRef.current}-${meta.fontSize.size}`);\n\n        table.setColumnSizing(sizes => {\n            const minColumnSize = getCellMinWidth(meta.fontSize.size);\n\n            return Object.fromEntries(\n                Object.entries(sizes).map(([columnName, prevColumnSize]) => {\n                    // Prevents width value in the setting to go below the minColumnSize\n                    const newSize = Math.max(minColumnSize, prevColumnSize + cellWidthDifference);\n                    return [columnName, newSize];\n                })\n            );\n        });\n        previousFontSizeRef.current = meta.fontSize.size;\n    }, [meta.fontSize.size]);\n}\n\nfunction getCellWidthDifference(fontSizeKey: string) {\n    switch (fontSizeKey) {\n        case `${TableFontSizes.small}-${TableFontSizes.medium}`:\n        case `${TableFontSizes.medium}-${TableFontSizes.large}`:\n            return 8;\n\n        case `${TableFontSizes.medium}-${TableFontSizes.small}`:\n        case `${TableFontSizes.large}-${TableFontSizes.medium}`:\n            return -8;\n\n        case `${TableFontSizes.small}-${TableFontSizes.large}`:\n            return 16;\n\n        case `${TableFontSizes.large}-${TableFontSizes.small}`:\n            return -16;\n\n        default:\n            return 0;\n    }\n}\n"],"names":["useTableFontSizeListener","table","meta","options","previousFontSizeRef","React","useRef","fontSize","size","useLazyEffect","cellWidthDifference","getCellWidthDifference","current","setColumnSizing","sizes","minColumnSize","getCellMinWidth","Object","fromEntries","entries","map","columnName","prevColumnSize","newSize","Math","max","fontSizeKey","TableFontSizes","small","medium","large"],"mappings":";;;;;SAMgBA,wBAAwBA,CAAkBC,KAAwB;EAC9E,MAAMC,IAAI,GAAGD,KAAK,CAACE,OAAO,CAACD,IAA6B;EACxD,MAAME,mBAAmB,GAAGC,cAAK,CAACC,MAAM,CAACJ,IAAI,CAACK,QAAQ,CAACC,IAAI,CAAC;EAE5DC,aAAa,CAAC;IACV,MAAMC,mBAAmB,GAAGC,sBAAsB,IAAIP,mBAAmB,CAACQ,WAAWV,IAAI,CAACK,QAAQ,CAACC,MAAM,CAAC;IAE1GP,KAAK,CAACY,eAAe,CAACC,KAAK;MACvB,MAAMC,aAAa,GAAGC,eAAe,CAACd,IAAI,CAACK,QAAQ,CAACC,IAAI,CAAC;MAEzD,OAAOS,MAAM,CAACC,WAAW,CACrBD,MAAM,CAACE,OAAO,CAACL,KAAK,CAAC,CAACM,GAAG,CAAC,CAAC,CAACC,UAAU,EAAEC,cAAc,CAAC;;QAEnD,MAAMC,OAAO,GAAGC,IAAI,CAACC,GAAG,CAACV,aAAa,EAAEO,cAAc,GAAGZ,mBAAmB,CAAC;QAC7E,OAAO,CAACW,UAAU,EAAEE,OAAO,CAAC;OAC/B,CAAC,CACL;KACJ,CAAC;IACFnB,mBAAmB,CAACQ,OAAO,GAAGV,IAAI,CAACK,QAAQ,CAACC,IAAI;GACnD,EAAE,CAACN,IAAI,CAACK,QAAQ,CAACC,IAAI,CAAC,CAAC;AAC5B;AAEA,SAASG,sBAAsBA,CAACe,WAAmB;EAC/C,QAAQA,WAAW;IACf,QAAQC,cAAc,CAACC,SAASD,cAAc,CAACE,QAAQ;IACvD,QAAQF,cAAc,CAACE,UAAUF,cAAc,CAACG,OAAO;MACnD,OAAO,CAAC;IAEZ,QAAQH,cAAc,CAACE,UAAUF,cAAc,CAACC,OAAO;IACvD,QAAQD,cAAc,CAACG,SAASH,cAAc,CAACE,QAAQ;MACnD,OAAO,CAAC,CAAC;IAEb,QAAQF,cAAc,CAACC,SAASD,cAAc,CAACG,OAAO;MAClD,OAAO,EAAE;IAEb,QAAQH,cAAc,CAACG,SAASH,cAAc,CAACC,OAAO;MAClD,OAAO,CAAC,EAAE;IAEd;MACI,OAAO,CAAC;;AAEpB;;;;"}
+{"version":3,"file":"useTableFontSizeListener.js","sources":["../../../../../../../../../src/primitives/Table/useTable/listeners/useTableFontSizeListener.ts"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport { useLazyEffect } from '../../../../hooks/useLazyEffect';\nimport { FontSizes } from '../../../../types';\nimport { getCellMinWidth } from '../util/columns';\n\nexport function useTableFontSizeListener<TType = unknown>(table: ReactTable<TType>) {\n    const meta = table.options.meta as ReactTableMeta<TType>;\n    const previousFontSizeRef = React.useRef(meta.fontSize.size);\n\n    useLazyEffect(() => {\n        const cellWidthDifference = getCellWidthDifference(`${previousFontSizeRef.current}-${meta.fontSize.size}`);\n\n        table.setColumnSizing(sizes => {\n            const minColumnSize = getCellMinWidth(meta.fontSize.size);\n\n            return Object.fromEntries(\n                Object.entries(sizes).map(([columnName, prevColumnSize]) => {\n                    // Prevents width value in the setting to go below the minColumnSize\n                    const newSize = Math.max(minColumnSize, prevColumnSize + cellWidthDifference);\n                    return [columnName, newSize];\n                })\n            );\n        });\n        previousFontSizeRef.current = meta.fontSize.size;\n    }, [meta.fontSize.size]);\n}\n\nfunction getCellWidthDifference(fontSizeKey: string) {\n    switch (fontSizeKey) {\n        case `${FontSizes.small}-${FontSizes.medium}`:\n        case `${FontSizes.medium}-${FontSizes.large}`:\n            return 8;\n\n        case `${FontSizes.medium}-${FontSizes.small}`:\n        case `${FontSizes.large}-${FontSizes.medium}`:\n            return -8;\n\n        case `${FontSizes.small}-${FontSizes.large}`:\n            return 16;\n\n        case `${FontSizes.large}-${FontSizes.small}`:\n            return -16;\n\n        default:\n            return 0;\n    }\n}\n"],"names":["useTableFontSizeListener","table","meta","options","previousFontSizeRef","React","useRef","fontSize","size","useLazyEffect","cellWidthDifference","getCellWidthDifference","current","setColumnSizing","sizes","minColumnSize","getCellMinWidth","Object","fromEntries","entries","map","columnName","prevColumnSize","newSize","Math","max","fontSizeKey","FontSizes","small","medium","large"],"mappings":";;;;;SAMgBA,wBAAwBA,CAAkBC,KAAwB;EAC9E,MAAMC,IAAI,GAAGD,KAAK,CAACE,OAAO,CAACD,IAA6B;EACxD,MAAME,mBAAmB,GAAGC,cAAK,CAACC,MAAM,CAACJ,IAAI,CAACK,QAAQ,CAACC,IAAI,CAAC;EAE5DC,aAAa,CAAC;IACV,MAAMC,mBAAmB,GAAGC,sBAAsB,IAAIP,mBAAmB,CAACQ,WAAWV,IAAI,CAACK,QAAQ,CAACC,MAAM,CAAC;IAE1GP,KAAK,CAACY,eAAe,CAACC,KAAK;MACvB,MAAMC,aAAa,GAAGC,eAAe,CAACd,IAAI,CAACK,QAAQ,CAACC,IAAI,CAAC;MAEzD,OAAOS,MAAM,CAACC,WAAW,CACrBD,MAAM,CAACE,OAAO,CAACL,KAAK,CAAC,CAACM,GAAG,CAAC,CAAC,CAACC,UAAU,EAAEC,cAAc,CAAC;;QAEnD,MAAMC,OAAO,GAAGC,IAAI,CAACC,GAAG,CAACV,aAAa,EAAEO,cAAc,GAAGZ,mBAAmB,CAAC;QAC7E,OAAO,CAACW,UAAU,EAAEE,OAAO,CAAC;OAC/B,CAAC,CACL;KACJ,CAAC;IACFnB,mBAAmB,CAACQ,OAAO,GAAGV,IAAI,CAACK,QAAQ,CAACC,IAAI;GACnD,EAAE,CAACN,IAAI,CAACK,QAAQ,CAACC,IAAI,CAAC,CAAC;AAC5B;AAEA,SAASG,sBAAsBA,CAACe,WAAmB;EAC/C,QAAQA,WAAW;IACf,QAAQC,SAAS,CAACC,SAASD,SAAS,CAACE,QAAQ;IAC7C,QAAQF,SAAS,CAACE,UAAUF,SAAS,CAACG,OAAO;MACzC,OAAO,CAAC;IAEZ,QAAQH,SAAS,CAACE,UAAUF,SAAS,CAACC,OAAO;IAC7C,QAAQD,SAAS,CAACG,SAASH,SAAS,CAACE,QAAQ;MACzC,OAAO,CAAC,CAAC;IAEb,QAAQF,SAAS,CAACC,SAASD,SAAS,CAACG,OAAO;MACxC,OAAO,EAAE;IAEb,QAAQH,SAAS,CAACG,SAASH,SAAS,CAACC,OAAO;MACxC,OAAO,CAAC,EAAE;IAEd;MACI,OAAO,CAAC;;AAEpB;;;;"}

package/dist/esm/packages/taco/src/primitives/Table/useTable/util/columns.js

@@ -1,14 +1,14 @@
-import { TableFontSizes } from '../../types.js';
+import { FontSizes } from '../../../../types.js';
 
 // column widths
 const getCellMinWidth = (fontSize = 'medium') => {
   switch (fontSize) {
-    case TableFontSizes.small:
+    case FontSizes.small:
       return 57;
-    case TableFontSizes.large:
+    case FontSizes.large:
       return 83;
     default:
-    case TableFontSizes.medium:
+    case FontSizes.medium:
       return 72;
   }
 };

package/dist/esm/packages/taco/src/primitives/Table/useTable/util/columns.js.map

@@ -1 +1 @@
-{"version":3,"file":"columns.js","sources":["../../../../../../../../../src/primitives/Table/useTable/util/columns.ts"],"sourcesContent":["import { ColumnDef as ReactTableColumnDef } from '@tanstack/react-table';\nimport { TableFontSize, TableFontSizes } from '../../types';\n\n// column widths\nexport const getCellMinWidth = (fontSize: TableFontSize = 'medium') => {\n    switch (fontSize) {\n        case TableFontSizes.small:\n            return 57;\n\n        case TableFontSizes.large:\n            return 83;\n\n        default:\n        case TableFontSizes.medium:\n            return 72;\n    }\n};\n\n// ordering\nexport function ensureOrdering<TType = unknown>(\n    columns: ReactTableColumnDef<TType>[],\n    internalColumnsPinnedToTheRight: string[],\n    settingsOrder: string[] | undefined\n): string[] {\n    // internal columns come with a defined order\n    const internalColumns = columns\n        .filter(column => column.id?.startsWith('__') && !internalColumnsPinnedToTheRight.includes(column.id))\n        .map(column => column.id) as string[];\n\n    // columns with ordering disabled should be moved to the front\n    const orderingDisabled: string[] = [];\n    const orderingEnabled: string[] = [];\n\n    let orderedColumns = columns;\n\n    // if settings is defined, make sure the columns that are actual children are sorted by it\n    if (Array.isArray(settingsOrder)) {\n        orderedColumns = columns.slice().sort(\n            // the magic >>> 0 here ensures that columns that aren't found in settings, but are children, are pushed to the end\n            (a, b) => (settingsOrder.indexOf(a.id as string) >>> 0) - (settingsOrder.indexOf(b.id as string) >>> 0)\n        );\n    }\n\n    orderedColumns.forEach(column => {\n        if (column.id?.startsWith('__')) {\n            return;\n        }\n\n        if (column.meta?.enableOrdering) {\n            orderingEnabled.push(column.id as string);\n        } else {\n            orderingDisabled.push(column.id as string);\n        }\n    });\n\n    const order = [...internalColumns, ...orderingDisabled, ...orderingEnabled];\n\n    // actions should always be last, enforce that\n    internalColumnsPinnedToTheRight.forEach(id => {\n        if (columns.findIndex(column => column.id === id) > -1) {\n            order.push(id);\n        }\n    });\n\n    return order;\n}\n"],"names":["getCellMinWidth","fontSize","TableFontSizes","small","large","medium","ensureOrdering","columns","internalColumnsPinnedToTheRight","settingsOrder","internalColumns","filter","column","_column$id","id","startsWith","includes","map","orderingDisabled","orderingEnabled","orderedColumns","Array","isArray","slice","sort","a","b","indexOf","forEach","_column$id2","_column$meta","meta","enableOrdering","push","order","findIndex"],"mappings":";;AAGA;MACaA,eAAe,GAAGA,CAACC,WAA0B,QAAQ;EAC9D,QAAQA,QAAQ;IACZ,KAAKC,cAAc,CAACC,KAAK;MACrB,OAAO,EAAE;IAEb,KAAKD,cAAc,CAACE,KAAK;MACrB,OAAO,EAAE;IAEb;IACA,KAAKF,cAAc,CAACG,MAAM;MACtB,OAAO,EAAE;;AAErB;AAEA;SACgBC,cAAcA,CAC1BC,OAAqC,EACrCC,+BAAyC,EACzCC,aAAmC;;EAGnC,MAAMC,eAAe,GAAGH,OAAO,CAC1BI,MAAM,CAACC,MAAM;IAAA,IAAAC,UAAA;IAAA,OAAI,EAAAA,UAAA,GAAAD,MAAM,CAACE,EAAE,cAAAD,UAAA,uBAATA,UAAA,CAAWE,UAAU,CAAC,IAAI,CAAC,KAAI,CAACP,+BAA+B,CAACQ,QAAQ,CAACJ,MAAM,CAACE,EAAE,CAAC;IAAC,CACrGG,GAAG,CAACL,MAAM,IAAIA,MAAM,CAACE,EAAE,CAAa;;EAGzC,MAAMI,gBAAgB,GAAa,EAAE;EACrC,MAAMC,eAAe,GAAa,EAAE;EAEpC,IAAIC,cAAc,GAAGb,OAAO;;EAG5B,IAAIc,KAAK,CAACC,OAAO,CAACb,aAAa,CAAC,EAAE;IAC9BW,cAAc,GAAGb,OAAO,CAACgB,KAAK,EAAE,CAACC,IAAI;;IAEjC,CAACC,CAAC,EAAEC,CAAC,KAAK,CAACjB,aAAa,CAACkB,OAAO,CAACF,CAAC,CAACX,EAAY,CAAC,KAAK,CAAC,KAAKL,aAAa,CAACkB,OAAO,CAACD,CAAC,CAACZ,EAAY,CAAC,KAAK,CAAC,CAAC,CAC1G;;EAGLM,cAAc,CAACQ,OAAO,CAAChB,MAAM;;IACzB,KAAAiB,WAAA,GAAIjB,MAAM,CAACE,EAAE,cAAAe,WAAA,eAATA,WAAA,CAAWd,UAAU,CAAC,IAAI,CAAC,EAAE;MAC7B;;IAGJ,KAAAe,YAAA,GAAIlB,MAAM,CAACmB,IAAI,cAAAD,YAAA,eAAXA,YAAA,CAAaE,cAAc,EAAE;MAC7Bb,eAAe,CAACc,IAAI,CAACrB,MAAM,CAACE,EAAY,CAAC;KAC5C,MAAM;MACHI,gBAAgB,CAACe,IAAI,CAACrB,MAAM,CAACE,EAAY,CAAC;;GAEjD,CAAC;EAEF,MAAMoB,KAAK,GAAG,CAAC,GAAGxB,eAAe,EAAE,GAAGQ,gBAAgB,EAAE,GAAGC,eAAe,CAAC;;EAG3EX,+BAA+B,CAACoB,OAAO,CAACd,EAAE;IACtC,IAAIP,OAAO,CAAC4B,SAAS,CAACvB,MAAM,IAAIA,MAAM,CAACE,EAAE,KAAKA,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE;MACpDoB,KAAK,CAACD,IAAI,CAACnB,EAAE,CAAC;;GAErB,CAAC;EAEF,OAAOoB,KAAK;AAChB;;;;"}
+{"version":3,"file":"columns.js","sources":["../../../../../../../../../src/primitives/Table/useTable/util/columns.ts"],"sourcesContent":["import { ColumnDef as ReactTableColumnDef } from '@tanstack/react-table';\nimport { FontSize, FontSizes } from '../../../../types';\n\n// column widths\nexport const getCellMinWidth = (fontSize: FontSize = 'medium') => {\n    switch (fontSize) {\n        case FontSizes.small:\n            return 57;\n\n        case FontSizes.large:\n            return 83;\n\n        default:\n        case FontSizes.medium:\n            return 72;\n    }\n};\n\n// ordering\nexport function ensureOrdering<TType = unknown>(\n    columns: ReactTableColumnDef<TType>[],\n    internalColumnsPinnedToTheRight: string[],\n    settingsOrder: string[] | undefined\n): string[] {\n    // internal columns come with a defined order\n    const internalColumns = columns\n        .filter(column => column.id?.startsWith('__') && !internalColumnsPinnedToTheRight.includes(column.id))\n        .map(column => column.id) as string[];\n\n    // columns with ordering disabled should be moved to the front\n    const orderingDisabled: string[] = [];\n    const orderingEnabled: string[] = [];\n\n    let orderedColumns = columns;\n\n    // if settings is defined, make sure the columns that are actual children are sorted by it\n    if (Array.isArray(settingsOrder)) {\n        orderedColumns = columns.slice().sort(\n            // the magic >>> 0 here ensures that columns that aren't found in settings, but are children, are pushed to the end\n            (a, b) => (settingsOrder.indexOf(a.id as string) >>> 0) - (settingsOrder.indexOf(b.id as string) >>> 0)\n        );\n    }\n\n    orderedColumns.forEach(column => {\n        if (column.id?.startsWith('__')) {\n            return;\n        }\n\n        if (column.meta?.enableOrdering) {\n            orderingEnabled.push(column.id as string);\n        } else {\n            orderingDisabled.push(column.id as string);\n        }\n    });\n\n    const order = [...internalColumns, ...orderingDisabled, ...orderingEnabled];\n\n    // actions should always be last, enforce that\n    internalColumnsPinnedToTheRight.forEach(id => {\n        if (columns.findIndex(column => column.id === id) > -1) {\n            order.push(id);\n        }\n    });\n\n    return order;\n}\n"],"names":["getCellMinWidth","fontSize","FontSizes","small","large","medium","ensureOrdering","columns","internalColumnsPinnedToTheRight","settingsOrder","internalColumns","filter","column","_column$id","id","startsWith","includes","map","orderingDisabled","orderingEnabled","orderedColumns","Array","isArray","slice","sort","a","b","indexOf","forEach","_column$id2","_column$meta","meta","enableOrdering","push","order","findIndex"],"mappings":";;AAGA;MACaA,eAAe,GAAGA,CAACC,WAAqB,QAAQ;EACzD,QAAQA,QAAQ;IACZ,KAAKC,SAAS,CAACC,KAAK;MAChB,OAAO,EAAE;IAEb,KAAKD,SAAS,CAACE,KAAK;MAChB,OAAO,EAAE;IAEb;IACA,KAAKF,SAAS,CAACG,MAAM;MACjB,OAAO,EAAE;;AAErB;AAEA;SACgBC,cAAcA,CAC1BC,OAAqC,EACrCC,+BAAyC,EACzCC,aAAmC;;EAGnC,MAAMC,eAAe,GAAGH,OAAO,CAC1BI,MAAM,CAACC,MAAM;IAAA,IAAAC,UAAA;IAAA,OAAI,EAAAA,UAAA,GAAAD,MAAM,CAACE,EAAE,cAAAD,UAAA,uBAATA,UAAA,CAAWE,UAAU,CAAC,IAAI,CAAC,KAAI,CAACP,+BAA+B,CAACQ,QAAQ,CAACJ,MAAM,CAACE,EAAE,CAAC;IAAC,CACrGG,GAAG,CAACL,MAAM,IAAIA,MAAM,CAACE,EAAE,CAAa;;EAGzC,MAAMI,gBAAgB,GAAa,EAAE;EACrC,MAAMC,eAAe,GAAa,EAAE;EAEpC,IAAIC,cAAc,GAAGb,OAAO;;EAG5B,IAAIc,KAAK,CAACC,OAAO,CAACb,aAAa,CAAC,EAAE;IAC9BW,cAAc,GAAGb,OAAO,CAACgB,KAAK,EAAE,CAACC,IAAI;;IAEjC,CAACC,CAAC,EAAEC,CAAC,KAAK,CAACjB,aAAa,CAACkB,OAAO,CAACF,CAAC,CAACX,EAAY,CAAC,KAAK,CAAC,KAAKL,aAAa,CAACkB,OAAO,CAACD,CAAC,CAACZ,EAAY,CAAC,KAAK,CAAC,CAAC,CAC1G;;EAGLM,cAAc,CAACQ,OAAO,CAAChB,MAAM;;IACzB,KAAAiB,WAAA,GAAIjB,MAAM,CAACE,EAAE,cAAAe,WAAA,eAATA,WAAA,CAAWd,UAAU,CAAC,IAAI,CAAC,EAAE;MAC7B;;IAGJ,KAAAe,YAAA,GAAIlB,MAAM,CAACmB,IAAI,cAAAD,YAAA,eAAXA,YAAA,CAAaE,cAAc,EAAE;MAC7Bb,eAAe,CAACc,IAAI,CAACrB,MAAM,CAACE,EAAY,CAAC;KAC5C,MAAM;MACHI,gBAAgB,CAACe,IAAI,CAACrB,MAAM,CAACE,EAAY,CAAC;;GAEjD,CAAC;EAEF,MAAMoB,KAAK,GAAG,CAAC,GAAGxB,eAAe,EAAE,GAAGQ,gBAAgB,EAAE,GAAGC,eAAe,CAAC;;EAG3EX,+BAA+B,CAACoB,OAAO,CAACd,EAAE;IACtC,IAAIP,OAAO,CAAC4B,SAAS,CAACvB,MAAM,IAAIA,MAAM,CAACE,EAAE,KAAKA,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE;MACpDoB,KAAK,CAACD,IAAI,CAACnB,EAAE,CAAC;;GAErB,CAAC;EAEF,OAAOoB,KAAK;AAChB;;;;"}

package/dist/esm/packages/taco/src/types.js

@@ -1,6 +1,12 @@
 import React__default from 'react';
 
+var FontSizes;
+(function (FontSizes) {
+  FontSizes["small"] = "small";
+  FontSizes["medium"] = "medium";
+  FontSizes["large"] = "large";
+})(FontSizes || (FontSizes = {}));
 const fixedForwardRef = React__default.forwardRef;
 
-export { fixedForwardRef };
+export { FontSizes, fixedForwardRef };
 //# sourceMappingURL=types.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../../../../../src/types.ts"],"sourcesContent":["import React from 'react';\nimport { AVAILABLE_COLORS } from './utils/tailwind';\n\nexport type Appearance = 'default' | 'primary' | 'danger' | 'ghost' | 'discrete' | 'transparent';\nexport type State = 'default' | 'success' | 'error' | 'warning' | 'information';\nexport type Locale = 'en-GB' | 'da-DK' | 'sv-SE' | 'no-NO';\nexport type Orientation = 'horizontal' | 'vertical';\nexport type Align = 'start' | 'center' | 'end';\nexport type Placement = 'right' | 'left' | 'top' | 'bottom';\nexport type Color = (typeof AVAILABLE_COLORS)[number];\n\n// helpers\ntype FixedForwardRef = <T, P = {}>(\n    render: (props: P, ref: React.Ref<T>) => JSX.Element\n) => (props: P & React.RefAttributes<T>) => JSX.Element;\n\nexport const fixedForwardRef = React.forwardRef as FixedForwardRef;\n\nexport type ValueOf<T> = T[keyof T];\n"],"names":["fixedForwardRef","React","forwardRef"],"mappings":";;MAgBaA,eAAe,GAAGC,cAAK,CAACC;;;;"}
+{"version":3,"file":"types.js","sources":["../../../../../src/types.ts"],"sourcesContent":["import React from 'react';\nimport { AVAILABLE_COLORS } from './utils/tailwind';\n\nexport type Appearance = 'default' | 'primary' | 'danger' | 'ghost' | 'discrete' | 'transparent';\nexport type State = 'default' | 'success' | 'error' | 'warning' | 'information';\nexport type Locale = 'en-GB' | 'da-DK' | 'sv-SE' | 'no-NO';\nexport type Orientation = 'horizontal' | 'vertical';\nexport type Align = 'start' | 'center' | 'end';\nexport type Placement = 'right' | 'left' | 'top' | 'bottom';\nexport type Color = (typeof AVAILABLE_COLORS)[number];\n\nexport enum FontSizes {\n    small = 'small',\n    medium = 'medium',\n    large = 'large',\n}\nexport type FontSize = keyof typeof FontSizes;\n\n// helpers\ntype FixedForwardRef = <T, P = {}>(\n    render: (props: P, ref: React.Ref<T>) => JSX.Element\n) => (props: P & React.RefAttributes<T>) => JSX.Element;\n\nexport const fixedForwardRef = React.forwardRef as FixedForwardRef;\n\nexport type ValueOf<T> = T[keyof T];\n"],"names":["FontSizes","fixedForwardRef","React","forwardRef"],"mappings":";;IAWYA;AAAZ,WAAYA,SAAS;EACjBA,4BAAe;EACfA,8BAAiB;EACjBA,4BAAe;AACnB,CAAC,EAJWA,SAAS,KAATA,SAAS;MAYRC,eAAe,GAAGC,cAAK,CAACC;;;;"}

package/dist/index.css

@@ -895,17 +895,17 @@
     @apply !my-0;
 }
 
-/* When cell is editable, but not highlighted, then we apply cell padding to a cell itself */
+/* When cell is editable, but not highlighted, then we apply cell padding to a cell itself and remove 1px border-width */
 
 [data-font-size='small'] [role='cell'][data-editable]:not([data-highlighted='true']) {
-        @apply px-[calc(var(--table3-cell-padding-x)_-_6px)];
+        @apply px-[calc(var(--table3-cell-padding-x)_-_6px_-_1px)];
     }
 
-/* When cell is editable and highlighted, the padding should apply to highlight wrapper, 
+/* When cell is editable and highlighted, the padding should apply to highlight wrapper and remove 1px border-width,
        because it should take all the available space in the cell */
 
 [data-font-size='small'] [role='cell'][data-editable][data-highlighted='true'] [data-taco='highlight'] {
-        @apply px-[calc(var(--table3-cell-padding-x)_-_6px)];
+        @apply px-[calc(var(--table3-cell-padding-x)_-_6px_-_1px)];
     }
 
 [data-font-size='small'] [role='cell'][data-editable] [data-taco='checkbox'],
@@ -934,17 +934,17 @@
     @apply !-my-[5px];
 }
 
-/* When cell is editable, but not highlighted, then we apply cell padding to a cell itself */
+/* When cell is editable, but not highlighted, then we apply cell padding to a cell itself and remove 1px border-width */
 
 [data-font-size='medium'] [role='cell'][data-editable]:not([data-highlighted='true']) {
-        @apply px-[calc(var(--table3-cell-padding-x)_-_8px)];
+        @apply px-[calc(var(--table3-cell-padding-x)_-_8px_-_1px)];
     }
 
-/* When cell is editable and highlighted, the padding should apply to highlight wrapper, 
+/* When cell is editable and highlighted, the padding should apply to highlight wrapper and remove 1px border-width, 
        because it should take all the available space in the cell */
 
 [data-font-size='medium'] [role='cell'][data-editable][data-highlighted='true'] [data-taco='highlight'] {
-        @apply px-[calc(var(--table3-cell-padding-x)_-_8px)];
+        @apply px-[calc(var(--table3-cell-padding-x)_-_8px_-_1px)];
     }
 
 [data-font-size='medium'] [role='cell'][data-editable] [data-taco='checkbox'],
@@ -1003,17 +1003,17 @@
     @apply !h-6 !w-6;
 }
 
-/* When cell is editable, but not highlighted, then we apply cell padding to a cell itself */
+/* When cell is editable, but not highlighted, then we apply cell padding to a cell itself and remove 1px border-width */
 
 [data-font-size='large'] [role='cell'][data-editable]:not([data-highlighted='true']) {
-        @apply px-[calc(var(--table3-cell-padding-x)_-_10px)];
+        @apply px-[calc(var(--table3-cell-padding-x)_-_10px_-_1px)];
     }
 
-/* When cell is editable and highlighted, the padding should apply to highlight wrapper, 
+/* When cell is editable and highlighted, the padding should apply to highlight wrapper and remove 1px border-width, 
        because it should take all the available space in the cell */
 
 [data-font-size='large'] [role='cell'][data-editable][data-highlighted='true'] [data-taco='highlight'] {
-        @apply px-[calc(var(--table3-cell-padding-x)_-_10px)];
+        @apply px-[calc(var(--table3-cell-padding-x)_-_10px_-_1px)];
     }
 
 [data-font-size='large'] [role='cell'][data-editable] [data-taco='checkbox'],

package/dist/primitives/Table/types.d.ts

@@ -7,12 +7,6 @@ export declare type TableRef = HTMLDivElement & {
         resetSorting: () => void;
     };
 };
-export declare enum TableFontSizes {
-    small = "small",
-    medium = "medium",
-    large = "large"
-}
-export declare type TableFontSize = keyof typeof TableFontSizes;
 export declare type TableColumnFilter = ReactTableColumnFilter;
 export declare type TableColumnSort = ReactTableColumnSort;
 export declare type TableRowClickHandler<TType = unknown> = (row: TType) => void;

package/dist/primitives/Table/useTable/features/useTableFontSize.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { TableFontSize } from '../../types';
-export declare function useTableFontSize(isEnabled?: boolean, defaultFontSize?: TableFontSize): {
+import { FontSize } from '../../../../types';
+export declare function useTableFontSize(isEnabled?: boolean, defaultFontSize?: FontSize): {
     isEnabled: boolean;
     size: "small" | "medium" | "large";
     setSize: React.Dispatch<React.SetStateAction<"small" | "medium" | "large">>;

package/dist/primitives/Table/useTable/util/columns.d.ts

@@ -1,4 +1,4 @@
 import { ColumnDef as ReactTableColumnDef } from '@tanstack/react-table';
-import { TableFontSize } from '../../types';
-export declare const getCellMinWidth: (fontSize?: TableFontSize) => 57 | 83 | 72;
+import { FontSize } from '../../../../types';
+export declare const getCellMinWidth: (fontSize?: FontSize) => 57 | 83 | 72;
 export declare function ensureOrdering<TType = unknown>(columns: ReactTableColumnDef<TType>[], internalColumnsPinnedToTheRight: string[], settingsOrder: string[] | undefined): string[];