@economic/taco 12.0.0 → 14.0.0-tanstack-virtual-update.0

package/dist/components/Table3/listeners/useTableEditingListener.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useTableEditingListener.cjs","sources":["../../../../src/components/Table3/listeners/useTableEditingListener.ts"],"sourcesContent":["import type { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport React from 'react';\n\nimport { useGlobalKeyDown } from '../../../hooks/useGlobalKeyDown';\nimport { useLazyEffect } from '../../../hooks/useLazyEffect';\nimport type { TableRef } from '../../../primitives/Table/types';\nimport { resetHighlightedColumnIndexes } from '../../../primitives/Table/useTableManager/util/search';\nimport { isElementInsideOrTriggeredFromContainer } from '../../../utils/dom';\nimport { useLocalization } from '../../Provider/Localization';\nimport { shortcut } from '../util/editing';\n\nexport function useTableEditingListener<TType = unknown>(\n    table: ReactTable<TType>,\n    tableRef: React.RefObject<TableRef>,\n    scrollToIndex: (index: number) => void\n) {\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n    const localization = useLocalization();\n\n    // show a warning if the user navigates away without triggering save, such as using the browser back/forward button\n    const hasChanges = tableMeta.editing.hasChanges();\n\n    React.useEffect(() => {\n        function showUnsavedChangesWarning(event: BeforeUnloadEvent) {\n            if (tableMeta.editing.isEditing && hasChanges) {\n                event.returnValue = true;\n                return true;\n            }\n\n            return false;\n        }\n\n        window.addEventListener('beforeunload', showUnsavedChangesWarning);\n\n        return () => {\n            window.removeEventListener('beforeunload', showUnsavedChangesWarning);\n        };\n    }, [tableMeta.editing.isEditing, hasChanges]);\n\n    const hasSavedChanges = tableMeta.editing.hasSaved();\n\n    useLazyEffect(() => {\n        if (hasSavedChanges) {\n            // recompute search highlights against the freshly saved data, but keep the active row where it is -\n            // moving it to the first match would jump focus to the top of the list mid-edit.\n            resetHighlightedColumnIndexes(table.getState().globalFilter, table, localization, false);\n        }\n    }, [hasSavedChanges]);\n\n    React.useEffect(() => {\n        const onClickOutside = (event: MouseEvent) => {\n            if (tableMeta.editing.isEditing) {\n                const element = event.target as Element;\n\n                const isClickOnTableOrInsideTable =\n                    element.tagName === 'TABLE' ||\n                    element.tagName === 'TBODY' ||\n                    element.getAttribute('data-taco') === 'backdrop' ||\n                    element.getAttribute('data-table') === 'editing-toggle' ||\n                    !document.body.contains(element) ||\n                    isElementInsideOrTriggeredFromContainer(element, tableRef.current);\n\n                if (isClickOnTableOrInsideTable) {\n                    return;\n                }\n\n                const dialog = element.closest('[role=\"dialog\"]');\n                const isClickInsideParentDialog = dialog !== null && tableRef.current?.closest('[role=\"dialog\"]') === dialog;\n                // If dialog doesn't exist then the click is outside the table on a non dialog element\n                const isClickOutside = dialog === null;\n\n                // The below condition makes sure that we don't save the changes when click is inside a non parent dialog.\n                // Those dialogs can possibly be opened by row actions and editing cell controls.\n                // Users can click the white space below rows which could be inside the table, but a valid scenario to save\n                if (isClickInsideParentDialog || isClickOutside) {\n                    tableMeta.editing.saveChanges(table);\n                }\n            }\n        };\n\n        document.addEventListener('click', onClickOutside);\n\n        return () => document.removeEventListener('click', onClickOutside);\n    }, [tableMeta.editing.isEditing, tableMeta.editing.saveChanges]);\n\n    // shortcuts\n    useGlobalKeyDown(tableMeta.editing.isEnabled ? shortcut : undefined, (event: KeyboardEvent) => {\n        event.preventDefault();\n        tableMeta.editing.toggleEditing(!tableMeta.editing.isEditing, table, scrollToIndex);\n    });\n\n    useGlobalKeyDown(tableMeta.editing.isEditing ? { key: 's', meta: true, shift: false } : undefined, event => {\n        event.preventDefault();\n        tableMeta.editing.saveChanges(table);\n    });\n}\n"],"names":["useLocalization","useLazyEffect","resetHighlightedColumnIndexes","isElementInsideOrTriggeredFromContainer","useGlobalKeyDown","shortcut"],"mappings":";;;;;;;;;AAWO,SAAS,wBACZ,OACA,UACA,eACF;AACE,QAAM,YAAY,MAAM,QAAQ;AAChC,QAAM,eAAeA,aAAAA,gBAAA;AAGrB,QAAM,aAAa,UAAU,QAAQ,WAAA;AAErC,QAAM,UAAU,MAAM;AAClB,aAAS,0BAA0B,OAA0B;AACzD,UAAI,UAAU,QAAQ,aAAa,YAAY;AAC3C,cAAM,cAAc;AACpB,eAAO;AAAA,MACX;AAEA,aAAO;AAAA,IACX;AAEA,WAAO,iBAAiB,gBAAgB,yBAAyB;AAEjE,WAAO,MAAM;AACT,aAAO,oBAAoB,gBAAgB,yBAAyB;AAAA,IACxE;AAAA,EACJ,GAAG,CAAC,UAAU,QAAQ,WAAW,UAAU,CAAC;AAE5C,QAAM,kBAAkB,UAAU,QAAQ,SAAA;AAE1CC,gBAAAA,cAAc,MAAM;AAChB,QAAI,iBAAiB;AAGjBC,aAAAA,8BAA8B,MAAM,SAAA,EAAW,cAAc,OAAO,cAAc,KAAK;AAAA,IAC3F;AAAA,EACJ,GAAG,CAAC,eAAe,CAAC;AAEpB,QAAM,UAAU,MAAM;AAClB,UAAM,iBAAiB,CAAC,UAAsB;AAC1C,UAAI,UAAU,QAAQ,WAAW;AAC7B,cAAM,UAAU,MAAM;AAEtB,cAAM,8BACF,QAAQ,YAAY,WACpB,QAAQ,YAAY,WACpB,QAAQ,aAAa,WAAW,MAAM,cACtC,QAAQ,aAAa,YAAY,MAAM,oBACvC,CAAC,SAAS,KAAK,SAAS,OAAO,KAC/BC,IAAAA,wCAAwC,SAAS,SAAS,OAAO;AAErE,YAAI,6BAA6B;AAC7B;AAAA,QACJ;AAEA,cAAM,SAAS,QAAQ,QAAQ,iBAAiB;AAChD,cAAM,4BAA4B,WAAW,QAAQ,SAAS,SAAS,QAAQ,iBAAiB,MAAM;AAEtG,cAAM,iBAAiB,WAAW;AAKlC,YAAI,6BAA6B,gBAAgB;AAC7C,oBAAU,QAAQ,YAAY,KAAK;AAAA,QACvC;AAAA,MACJ;AAAA,IACJ;AAEA,aAAS,iBAAiB,SAAS,cAAc;AAEjD,WAAO,MAAM,SAAS,oBAAoB,SAAS,cAAc;AAAA,EACrE,GAAG,CAAC,UAAU,QAAQ,WAAW,UAAU,QAAQ,WAAW,CAAC;AAG/DC,mBAAAA,iBAAiB,UAAU,QAAQ,YAAYC,QAAAA,WAAW,QAAW,CAAC,UAAyB;AAC3F,UAAM,eAAA;AACN,cAAU,QAAQ,cAAc,CAAC,UAAU,QAAQ,WAAW,OAAO,aAAa;AAAA,EACtF,CAAC;AAEDD,mBAAAA,iBAAiB,UAAU,QAAQ,YAAY,EAAE,KAAK,KAAK,MAAM,MAAM,OAAO,MAAA,IAAU,QAAW,CAAA,UAAS;AACxG,UAAM,eAAA;AACN,cAAU,QAAQ,YAAY,KAAK;AAAA,EACvC,CAAC;AACL;;"}
+{"version":3,"file":"useTableEditingListener.cjs","sources":["../../../../src/components/Table3/listeners/useTableEditingListener.ts"],"sourcesContent":["import type { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport React from 'react';\n\nimport { useLocalization } from '@/components';\nimport { useGlobalKeyDown } from '@/hooks/useGlobalKeyDown';\nimport { useLazyEffect } from '@/hooks/useLazyEffect';\nimport type { TableRef } from '@/primitives/Table/types';\nimport { resetHighlightedColumnIndexes } from '@/primitives/Table/useTableManager/util/search';\nimport { isElementInsideOrTriggeredFromContainer } from '@/utils/dom';\n\nimport { shortcut } from '../util/editing';\n\nexport function useTableEditingListener<TType = unknown>(\n    table: ReactTable<TType>,\n    tableRef: React.RefObject<TableRef>,\n    scrollToIndex: (index: number) => void\n) {\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n    const localization = useLocalization();\n\n    // show a warning if the user navigates away without triggering save, such as using the browser back/forward button\n    const hasChanges = tableMeta.editing.hasChanges();\n\n    React.useEffect(() => {\n        function showUnsavedChangesWarning(event: BeforeUnloadEvent) {\n            if (tableMeta.editing.isEditing && hasChanges) {\n                event.returnValue = true;\n                return true;\n            }\n\n            return false;\n        }\n\n        window.addEventListener('beforeunload', showUnsavedChangesWarning);\n\n        return () => {\n            window.removeEventListener('beforeunload', showUnsavedChangesWarning);\n        };\n    }, [tableMeta.editing.isEditing, hasChanges]);\n\n    const hasSavedChanges = tableMeta.editing.hasSaved();\n\n    useLazyEffect(() => {\n        if (hasSavedChanges) {\n            // recompute search highlights against the freshly saved data, but keep the active row where it is -\n            // moving it to the first match would jump focus to the top of the list mid-edit.\n            resetHighlightedColumnIndexes(table.getState().globalFilter, table, localization, false);\n        }\n    }, [hasSavedChanges]);\n\n    React.useEffect(() => {\n        const onClickOutside = (event: MouseEvent) => {\n            if (tableMeta.editing.isEditing) {\n                const element = event.target as Element;\n\n                const isClickOnTableOrInsideTable =\n                    element.tagName === 'TABLE' ||\n                    element.tagName === 'TBODY' ||\n                    element.getAttribute('data-taco') === 'backdrop' ||\n                    element.getAttribute('data-table') === 'editing-toggle' ||\n                    !document.body.contains(element) ||\n                    isElementInsideOrTriggeredFromContainer(element, tableRef.current);\n\n                if (isClickOnTableOrInsideTable) {\n                    return;\n                }\n\n                const dialog = element.closest('[role=\"dialog\"]');\n                const isClickInsideParentDialog = dialog !== null && tableRef.current?.closest('[role=\"dialog\"]') === dialog;\n                // If dialog doesn't exist then the click is outside the table on a non dialog element\n                const isClickOutside = dialog === null;\n\n                // The below condition makes sure that we don't save the changes when click is inside a non parent dialog.\n                // Those dialogs can possibly be opened by row actions and editing cell controls.\n                // Users can click the white space below rows which could be inside the table, but a valid scenario to save\n                if (isClickInsideParentDialog || isClickOutside) {\n                    tableMeta.editing.saveChanges(table);\n                }\n            }\n        };\n\n        document.addEventListener('click', onClickOutside);\n\n        return () => document.removeEventListener('click', onClickOutside);\n    }, [tableMeta.editing.isEditing, tableMeta.editing.saveChanges]);\n\n    // shortcuts\n    useGlobalKeyDown(tableMeta.editing.isEnabled ? shortcut : undefined, (event: KeyboardEvent) => {\n        event.preventDefault();\n        tableMeta.editing.toggleEditing(!tableMeta.editing.isEditing, table, scrollToIndex);\n    });\n\n    useGlobalKeyDown(tableMeta.editing.isEditing ? { key: 's', meta: true, shift: false } : undefined, event => {\n        event.preventDefault();\n        tableMeta.editing.saveChanges(table);\n    });\n}\n"],"names":["useLocalization","useLazyEffect","resetHighlightedColumnIndexes","isElementInsideOrTriggeredFromContainer","useGlobalKeyDown","shortcut"],"mappings":";;;;;;;;;AAYO,SAAS,wBACZ,OACA,UACA,eACF;AACE,QAAM,YAAY,MAAM,QAAQ;AAChC,QAAM,eAAeA,aAAAA,gBAAA;AAGrB,QAAM,aAAa,UAAU,QAAQ,WAAA;AAErC,QAAM,UAAU,MAAM;AAClB,aAAS,0BAA0B,OAA0B;AACzD,UAAI,UAAU,QAAQ,aAAa,YAAY;AAC3C,cAAM,cAAc;AACpB,eAAO;AAAA,MACX;AAEA,aAAO;AAAA,IACX;AAEA,WAAO,iBAAiB,gBAAgB,yBAAyB;AAEjE,WAAO,MAAM;AACT,aAAO,oBAAoB,gBAAgB,yBAAyB;AAAA,IACxE;AAAA,EACJ,GAAG,CAAC,UAAU,QAAQ,WAAW,UAAU,CAAC;AAE5C,QAAM,kBAAkB,UAAU,QAAQ,SAAA;AAE1CC,gBAAAA,cAAc,MAAM;AAChB,QAAI,iBAAiB;AAGjBC,aAAAA,8BAA8B,MAAM,SAAA,EAAW,cAAc,OAAO,cAAc,KAAK;AAAA,IAC3F;AAAA,EACJ,GAAG,CAAC,eAAe,CAAC;AAEpB,QAAM,UAAU,MAAM;AAClB,UAAM,iBAAiB,CAAC,UAAsB;AAC1C,UAAI,UAAU,QAAQ,WAAW;AAC7B,cAAM,UAAU,MAAM;AAEtB,cAAM,8BACF,QAAQ,YAAY,WACpB,QAAQ,YAAY,WACpB,QAAQ,aAAa,WAAW,MAAM,cACtC,QAAQ,aAAa,YAAY,MAAM,oBACvC,CAAC,SAAS,KAAK,SAAS,OAAO,KAC/BC,IAAAA,wCAAwC,SAAS,SAAS,OAAO;AAErE,YAAI,6BAA6B;AAC7B;AAAA,QACJ;AAEA,cAAM,SAAS,QAAQ,QAAQ,iBAAiB;AAChD,cAAM,4BAA4B,WAAW,QAAQ,SAAS,SAAS,QAAQ,iBAAiB,MAAM;AAEtG,cAAM,iBAAiB,WAAW;AAKlC,YAAI,6BAA6B,gBAAgB;AAC7C,oBAAU,QAAQ,YAAY,KAAK;AAAA,QACvC;AAAA,MACJ;AAAA,IACJ;AAEA,aAAS,iBAAiB,SAAS,cAAc;AAEjD,WAAO,MAAM,SAAS,oBAAoB,SAAS,cAAc;AAAA,EACrE,GAAG,CAAC,UAAU,QAAQ,WAAW,UAAU,QAAQ,WAAW,CAAC;AAG/DC,mBAAAA,iBAAiB,UAAU,QAAQ,YAAYC,QAAAA,WAAW,QAAW,CAAC,UAAyB;AAC3F,UAAM,eAAA;AACN,cAAU,QAAQ,cAAc,CAAC,UAAU,QAAQ,WAAW,OAAO,aAAa;AAAA,EACtF,CAAC;AAEDD,mBAAAA,iBAAiB,UAAU,QAAQ,YAAY,EAAE,KAAK,KAAK,MAAM,MAAM,OAAO,MAAA,IAAU,QAAW,CAAA,UAAS;AACxG,UAAM,eAAA;AACN,cAAU,QAAQ,YAAY,KAAK;AAAA,EACvC,CAAC;AACL;;"}

package/dist/components/Table3/listeners/useTableEditingListener.js

@@ -3,8 +3,8 @@ import { useGlobalKeyDown } from "../../../hooks/useGlobalKeyDown.js";
 import { useLazyEffect } from "../../../hooks/useLazyEffect.js";
 import { resetHighlightedColumnIndexes } from "../../../primitives/Table/useTableManager/util/search.js";
 import { isElementInsideOrTriggeredFromContainer } from "../../../utils/dom.js";
-import { useLocalization } from "../../Provider/Localization.js";
 import { shortcut } from "../util/editing.js";
+import { useLocalization } from "../../Provider/Localization.js";
 function useTableEditingListener(table, tableRef, scrollToIndex) {
   const tableMeta = table.options.meta;
   const localization = useLocalization();

package/dist/components/Table3/listeners/useTableEditingListener.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTableEditingListener.js","sources":["../../../../src/components/Table3/listeners/useTableEditingListener.ts"],"sourcesContent":["import type { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport React from 'react';\n\nimport { useGlobalKeyDown } from '../../../hooks/useGlobalKeyDown';\nimport { useLazyEffect } from '../../../hooks/useLazyEffect';\nimport type { TableRef } from '../../../primitives/Table/types';\nimport { resetHighlightedColumnIndexes } from '../../../primitives/Table/useTableManager/util/search';\nimport { isElementInsideOrTriggeredFromContainer } from '../../../utils/dom';\nimport { useLocalization } from '../../Provider/Localization';\nimport { shortcut } from '../util/editing';\n\nexport function useTableEditingListener<TType = unknown>(\n    table: ReactTable<TType>,\n    tableRef: React.RefObject<TableRef>,\n    scrollToIndex: (index: number) => void\n) {\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n    const localization = useLocalization();\n\n    // show a warning if the user navigates away without triggering save, such as using the browser back/forward button\n    const hasChanges = tableMeta.editing.hasChanges();\n\n    React.useEffect(() => {\n        function showUnsavedChangesWarning(event: BeforeUnloadEvent) {\n            if (tableMeta.editing.isEditing && hasChanges) {\n                event.returnValue = true;\n                return true;\n            }\n\n            return false;\n        }\n\n        window.addEventListener('beforeunload', showUnsavedChangesWarning);\n\n        return () => {\n            window.removeEventListener('beforeunload', showUnsavedChangesWarning);\n        };\n    }, [tableMeta.editing.isEditing, hasChanges]);\n\n    const hasSavedChanges = tableMeta.editing.hasSaved();\n\n    useLazyEffect(() => {\n        if (hasSavedChanges) {\n            // recompute search highlights against the freshly saved data, but keep the active row where it is -\n            // moving it to the first match would jump focus to the top of the list mid-edit.\n            resetHighlightedColumnIndexes(table.getState().globalFilter, table, localization, false);\n        }\n    }, [hasSavedChanges]);\n\n    React.useEffect(() => {\n        const onClickOutside = (event: MouseEvent) => {\n            if (tableMeta.editing.isEditing) {\n                const element = event.target as Element;\n\n                const isClickOnTableOrInsideTable =\n                    element.tagName === 'TABLE' ||\n                    element.tagName === 'TBODY' ||\n                    element.getAttribute('data-taco') === 'backdrop' ||\n                    element.getAttribute('data-table') === 'editing-toggle' ||\n                    !document.body.contains(element) ||\n                    isElementInsideOrTriggeredFromContainer(element, tableRef.current);\n\n                if (isClickOnTableOrInsideTable) {\n                    return;\n                }\n\n                const dialog = element.closest('[role=\"dialog\"]');\n                const isClickInsideParentDialog = dialog !== null && tableRef.current?.closest('[role=\"dialog\"]') === dialog;\n                // If dialog doesn't exist then the click is outside the table on a non dialog element\n                const isClickOutside = dialog === null;\n\n                // The below condition makes sure that we don't save the changes when click is inside a non parent dialog.\n                // Those dialogs can possibly be opened by row actions and editing cell controls.\n                // Users can click the white space below rows which could be inside the table, but a valid scenario to save\n                if (isClickInsideParentDialog || isClickOutside) {\n                    tableMeta.editing.saveChanges(table);\n                }\n            }\n        };\n\n        document.addEventListener('click', onClickOutside);\n\n        return () => document.removeEventListener('click', onClickOutside);\n    }, [tableMeta.editing.isEditing, tableMeta.editing.saveChanges]);\n\n    // shortcuts\n    useGlobalKeyDown(tableMeta.editing.isEnabled ? shortcut : undefined, (event: KeyboardEvent) => {\n        event.preventDefault();\n        tableMeta.editing.toggleEditing(!tableMeta.editing.isEditing, table, scrollToIndex);\n    });\n\n    useGlobalKeyDown(tableMeta.editing.isEditing ? { key: 's', meta: true, shift: false } : undefined, event => {\n        event.preventDefault();\n        tableMeta.editing.saveChanges(table);\n    });\n}\n"],"names":["React"],"mappings":";;;;;;;AAWO,SAAS,wBACZ,OACA,UACA,eACF;AACE,QAAM,YAAY,MAAM,QAAQ;AAChC,QAAM,eAAe,gBAAA;AAGrB,QAAM,aAAa,UAAU,QAAQ,WAAA;AAErCA,iBAAM,UAAU,MAAM;AAClB,aAAS,0BAA0B,OAA0B;AACzD,UAAI,UAAU,QAAQ,aAAa,YAAY;AAC3C,cAAM,cAAc;AACpB,eAAO;AAAA,MACX;AAEA,aAAO;AAAA,IACX;AAEA,WAAO,iBAAiB,gBAAgB,yBAAyB;AAEjE,WAAO,MAAM;AACT,aAAO,oBAAoB,gBAAgB,yBAAyB;AAAA,IACxE;AAAA,EACJ,GAAG,CAAC,UAAU,QAAQ,WAAW,UAAU,CAAC;AAE5C,QAAM,kBAAkB,UAAU,QAAQ,SAAA;AAE1C,gBAAc,MAAM;AAChB,QAAI,iBAAiB;AAGjB,oCAA8B,MAAM,SAAA,EAAW,cAAc,OAAO,cAAc,KAAK;AAAA,IAC3F;AAAA,EACJ,GAAG,CAAC,eAAe,CAAC;AAEpBA,iBAAM,UAAU,MAAM;AAClB,UAAM,iBAAiB,CAAC,UAAsB;AAC1C,UAAI,UAAU,QAAQ,WAAW;AAC7B,cAAM,UAAU,MAAM;AAEtB,cAAM,8BACF,QAAQ,YAAY,WACpB,QAAQ,YAAY,WACpB,QAAQ,aAAa,WAAW,MAAM,cACtC,QAAQ,aAAa,YAAY,MAAM,oBACvC,CAAC,SAAS,KAAK,SAAS,OAAO,KAC/B,wCAAwC,SAAS,SAAS,OAAO;AAErE,YAAI,6BAA6B;AAC7B;AAAA,QACJ;AAEA,cAAM,SAAS,QAAQ,QAAQ,iBAAiB;AAChD,cAAM,4BAA4B,WAAW,QAAQ,SAAS,SAAS,QAAQ,iBAAiB,MAAM;AAEtG,cAAM,iBAAiB,WAAW;AAKlC,YAAI,6BAA6B,gBAAgB;AAC7C,oBAAU,QAAQ,YAAY,KAAK;AAAA,QACvC;AAAA,MACJ;AAAA,IACJ;AAEA,aAAS,iBAAiB,SAAS,cAAc;AAEjD,WAAO,MAAM,SAAS,oBAAoB,SAAS,cAAc;AAAA,EACrE,GAAG,CAAC,UAAU,QAAQ,WAAW,UAAU,QAAQ,WAAW,CAAC;AAG/D,mBAAiB,UAAU,QAAQ,YAAY,WAAW,QAAW,CAAC,UAAyB;AAC3F,UAAM,eAAA;AACN,cAAU,QAAQ,cAAc,CAAC,UAAU,QAAQ,WAAW,OAAO,aAAa;AAAA,EACtF,CAAC;AAED,mBAAiB,UAAU,QAAQ,YAAY,EAAE,KAAK,KAAK,MAAM,MAAM,OAAO,MAAA,IAAU,QAAW,CAAA,UAAS;AACxG,UAAM,eAAA;AACN,cAAU,QAAQ,YAAY,KAAK;AAAA,EACvC,CAAC;AACL;"}
+{"version":3,"file":"useTableEditingListener.js","sources":["../../../../src/components/Table3/listeners/useTableEditingListener.ts"],"sourcesContent":["import type { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport React from 'react';\n\nimport { useLocalization } from '@/components';\nimport { useGlobalKeyDown } from '@/hooks/useGlobalKeyDown';\nimport { useLazyEffect } from '@/hooks/useLazyEffect';\nimport type { TableRef } from '@/primitives/Table/types';\nimport { resetHighlightedColumnIndexes } from '@/primitives/Table/useTableManager/util/search';\nimport { isElementInsideOrTriggeredFromContainer } from '@/utils/dom';\n\nimport { shortcut } from '../util/editing';\n\nexport function useTableEditingListener<TType = unknown>(\n    table: ReactTable<TType>,\n    tableRef: React.RefObject<TableRef>,\n    scrollToIndex: (index: number) => void\n) {\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n    const localization = useLocalization();\n\n    // show a warning if the user navigates away without triggering save, such as using the browser back/forward button\n    const hasChanges = tableMeta.editing.hasChanges();\n\n    React.useEffect(() => {\n        function showUnsavedChangesWarning(event: BeforeUnloadEvent) {\n            if (tableMeta.editing.isEditing && hasChanges) {\n                event.returnValue = true;\n                return true;\n            }\n\n            return false;\n        }\n\n        window.addEventListener('beforeunload', showUnsavedChangesWarning);\n\n        return () => {\n            window.removeEventListener('beforeunload', showUnsavedChangesWarning);\n        };\n    }, [tableMeta.editing.isEditing, hasChanges]);\n\n    const hasSavedChanges = tableMeta.editing.hasSaved();\n\n    useLazyEffect(() => {\n        if (hasSavedChanges) {\n            // recompute search highlights against the freshly saved data, but keep the active row where it is -\n            // moving it to the first match would jump focus to the top of the list mid-edit.\n            resetHighlightedColumnIndexes(table.getState().globalFilter, table, localization, false);\n        }\n    }, [hasSavedChanges]);\n\n    React.useEffect(() => {\n        const onClickOutside = (event: MouseEvent) => {\n            if (tableMeta.editing.isEditing) {\n                const element = event.target as Element;\n\n                const isClickOnTableOrInsideTable =\n                    element.tagName === 'TABLE' ||\n                    element.tagName === 'TBODY' ||\n                    element.getAttribute('data-taco') === 'backdrop' ||\n                    element.getAttribute('data-table') === 'editing-toggle' ||\n                    !document.body.contains(element) ||\n                    isElementInsideOrTriggeredFromContainer(element, tableRef.current);\n\n                if (isClickOnTableOrInsideTable) {\n                    return;\n                }\n\n                const dialog = element.closest('[role=\"dialog\"]');\n                const isClickInsideParentDialog = dialog !== null && tableRef.current?.closest('[role=\"dialog\"]') === dialog;\n                // If dialog doesn't exist then the click is outside the table on a non dialog element\n                const isClickOutside = dialog === null;\n\n                // The below condition makes sure that we don't save the changes when click is inside a non parent dialog.\n                // Those dialogs can possibly be opened by row actions and editing cell controls.\n                // Users can click the white space below rows which could be inside the table, but a valid scenario to save\n                if (isClickInsideParentDialog || isClickOutside) {\n                    tableMeta.editing.saveChanges(table);\n                }\n            }\n        };\n\n        document.addEventListener('click', onClickOutside);\n\n        return () => document.removeEventListener('click', onClickOutside);\n    }, [tableMeta.editing.isEditing, tableMeta.editing.saveChanges]);\n\n    // shortcuts\n    useGlobalKeyDown(tableMeta.editing.isEnabled ? shortcut : undefined, (event: KeyboardEvent) => {\n        event.preventDefault();\n        tableMeta.editing.toggleEditing(!tableMeta.editing.isEditing, table, scrollToIndex);\n    });\n\n    useGlobalKeyDown(tableMeta.editing.isEditing ? { key: 's', meta: true, shift: false } : undefined, event => {\n        event.preventDefault();\n        tableMeta.editing.saveChanges(table);\n    });\n}\n"],"names":["React"],"mappings":";;;;;;;AAYO,SAAS,wBACZ,OACA,UACA,eACF;AACE,QAAM,YAAY,MAAM,QAAQ;AAChC,QAAM,eAAe,gBAAA;AAGrB,QAAM,aAAa,UAAU,QAAQ,WAAA;AAErCA,iBAAM,UAAU,MAAM;AAClB,aAAS,0BAA0B,OAA0B;AACzD,UAAI,UAAU,QAAQ,aAAa,YAAY;AAC3C,cAAM,cAAc;AACpB,eAAO;AAAA,MACX;AAEA,aAAO;AAAA,IACX;AAEA,WAAO,iBAAiB,gBAAgB,yBAAyB;AAEjE,WAAO,MAAM;AACT,aAAO,oBAAoB,gBAAgB,yBAAyB;AAAA,IACxE;AAAA,EACJ,GAAG,CAAC,UAAU,QAAQ,WAAW,UAAU,CAAC;AAE5C,QAAM,kBAAkB,UAAU,QAAQ,SAAA;AAE1C,gBAAc,MAAM;AAChB,QAAI,iBAAiB;AAGjB,oCAA8B,MAAM,SAAA,EAAW,cAAc,OAAO,cAAc,KAAK;AAAA,IAC3F;AAAA,EACJ,GAAG,CAAC,eAAe,CAAC;AAEpBA,iBAAM,UAAU,MAAM;AAClB,UAAM,iBAAiB,CAAC,UAAsB;AAC1C,UAAI,UAAU,QAAQ,WAAW;AAC7B,cAAM,UAAU,MAAM;AAEtB,cAAM,8BACF,QAAQ,YAAY,WACpB,QAAQ,YAAY,WACpB,QAAQ,aAAa,WAAW,MAAM,cACtC,QAAQ,aAAa,YAAY,MAAM,oBACvC,CAAC,SAAS,KAAK,SAAS,OAAO,KAC/B,wCAAwC,SAAS,SAAS,OAAO;AAErE,YAAI,6BAA6B;AAC7B;AAAA,QACJ;AAEA,cAAM,SAAS,QAAQ,QAAQ,iBAAiB;AAChD,cAAM,4BAA4B,WAAW,QAAQ,SAAS,SAAS,QAAQ,iBAAiB,MAAM;AAEtG,cAAM,iBAAiB,WAAW;AAKlC,YAAI,6BAA6B,gBAAgB;AAC7C,oBAAU,QAAQ,YAAY,KAAK;AAAA,QACvC;AAAA,MACJ;AAAA,IACJ;AAEA,aAAS,iBAAiB,SAAS,cAAc;AAEjD,WAAO,MAAM,SAAS,oBAAoB,SAAS,cAAc;AAAA,EACrE,GAAG,CAAC,UAAU,QAAQ,WAAW,UAAU,QAAQ,WAAW,CAAC;AAG/D,mBAAiB,UAAU,QAAQ,YAAY,WAAW,QAAW,CAAC,UAAyB;AAC3F,UAAM,eAAA;AACN,cAAU,QAAQ,cAAc,CAAC,UAAU,QAAQ,WAAW,OAAO,aAAa;AAAA,EACtF,CAAC;AAED,mBAAiB,UAAU,QAAQ,YAAY,EAAE,KAAK,KAAK,MAAM,MAAM,OAAO,MAAA,IAAU,QAAW,CAAA,UAAS;AACxG,UAAM,eAAA;AACN,cAAU,QAAQ,YAAY,KAAK;AAAA,EACvC,CAAC;AACL;"}

package/dist/components/Table3/useTable3.cjs

@@ -3,13 +3,13 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const useLazyEffect = require("../../hooks/useLazyEffect.cjs");
 const useTable = require("../../primitives/Table/Core/useTable.cjs");
-const IconButton = require("../LegacyComponents/IconButton/IconButton.cjs");
-const Localization = require("../Provider/Localization.cjs");
 const Cell = require("./components/Columns/Cell/Cell.cjs");
 const DiscardChangesConfirmationDialog = require("./components/Editing/DiscardChangesConfirmationDialog.cjs");
 const Row = require("./components/Row/Row.cjs");
 const useTableEditing = require("./features/useTableEditing.cjs");
 const useTableEditingListener = require("./listeners/useTableEditingListener.cjs");
+const Localization = require("../Provider/Localization.cjs");
+const IconButton = require("../LegacyComponents/IconButton/IconButton.cjs");
 const RENDERERS = {
   row: Row.Row,
   cell: Cell.Cell

package/dist/components/Table3/useTable3.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useTable3.cjs","sources":["../../../src/components/Table3/useTable3.tsx"],"sourcesContent":["import type { RowData } from '@tanstack/react-table';\nimport React from 'react';\n\nimport { useLazyEffect } from '../../hooks/useLazyEffect';\nimport { useTable } from '../../primitives/Table/Core/useTable';\nimport type { TableProps } from '../../primitives/Table/types';\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\nimport { useLocalization } from '../Provider/Localization';\n\nimport { Cell } from './components/Columns/Cell/Cell';\nimport { DiscardChangesConfirmationDialog } from './components/Editing/DiscardChangesConfirmationDialog';\nimport { Row } from './components/Row/Row';\nimport { useTableEditing } from './features/useTableEditing';\nimport { useTableEditingListener } from './listeners/useTableEditingListener';\nimport type { Table3Props, Table3Ref } from './types';\n\nexport const RENDERERS = {\n    row: Row,\n    cell: Cell,\n};\n\ndeclare module '@tanstack/table-core' {\n    // oxlint-disable-next-line no-unused-vars, typescript/consistent-type-definitions -- module augmentation requires interface (declaration merging)\n    interface TableMeta<TData extends RowData> {\n        editing: ReturnType<typeof useTableEditing>;\n    }\n}\n\ntype Table3Meta = {\n    editing: ReturnType<typeof useTableEditing>;\n};\n\nexport function useTable3<TType>(props: Table3Props<TType>, ref: React.Ref<Table3Ref>) {\n    const { texts } = useLocalization();\n    const editing = useTableEditing(\n        props.enableEditing,\n        props.defaultToggleEditing,\n        props.onEditingSave,\n        props.onEditingChange,\n        props.onEditingCreate,\n        props.onEditingDiscard,\n        props.rowIdentityAccessor,\n        props.validator,\n        props.showEditingActions,\n        props.onEvent\n    );\n\n    // this gives me the performance heeby jeebies, but can't think of a better way to internalise the state\n    const data: TType[] = React.useMemo(() => {\n        if (editing.temporaryRows.length) {\n            return (props.data ?? []).concat(editing.temporaryRows as TType[]);\n        }\n\n        return props.data;\n    }, [JSON.stringify(props.data), editing.temporaryRows.length]);\n\n    const extendedProps: Table3Props<TType> = {\n        ...props,\n        data,\n        enableRowActions: editing.isEditing && props.showEditingActions ? true : props.enableRowActions,\n        // While editing, only show editing actions (and their menu) when showEditingActions is true\n        rowActions: editing.isEditing\n            ? (props.rowActions ?? []).concat(\n                  // Only add editing actions if showEditingActions is explicitly set to true\n                  props.showEditingActions === true\n                      ? [\n                            // Note: helpers includes internal rowId and table properties not in the public type, that is why \"any\" is used\n                            (_1, helpers: any) => (\n                                <LegacyIconButton\n                                    aria-label={texts.table3.editing.actions.save}\n                                    icon=\"tick\"\n                                    disabled={!editing.hasChanges(helpers.rowId) || editing.hasRowErrors(helpers.rowId)}\n                                    onClick={async () => {\n                                        await editing.saveChanges(helpers.table, helpers.rowId);\n                                    }}\n                                />\n                            ),\n                            (_1, helpers: any) => (\n                                <LegacyIconButton\n                                    aria-label={texts.table3.editing.actions.clear}\n                                    icon=\"close\"\n                                    disabled={!editing.hasChanges(helpers.rowId)}\n                                    dialog={props => (\n                                        <DiscardChangesConfirmationDialog\n                                            {...props}\n                                            onDiscard={() => {\n                                                editing.discardChanges(helpers.rowId, helpers.table);\n\n                                                if (editing.temporaryRows.length) {\n                                                    requestAnimationFrame(() => editing.createRowButtonRef.current?.focus());\n                                                }\n                                            }}\n                                        />\n                                    )}\n                                />\n                            ),\n                        ]\n                      : []\n              )\n            : props.rowActions,\n    };\n\n    const meta = { editing };\n\n    // Cast to TableProps: Table3Props adds editing-specific props on top of TableProps.\n    // useTable only needs the base TableProps.\n    const table = useTable<TType, Table3Meta>(extendedProps as TableProps<TType>, ref, RENDERERS, meta);\n\n    const toggleEditing = (enabled: boolean | undefined) =>\n        table.meta.editing.toggleEditing(enabled ?? (editing => !editing), table.instance, table.renderer.scrollToIndex);\n\n    // editing state is set earlier, but toggleEditing does other things like sets the active row\n    React.useEffect(() => {\n        if (props.defaultToggleEditing) {\n            toggleEditing(true);\n        }\n    }, []);\n\n    // listeners\n    useTableEditingListener<TType>(table.instance, table.ref, table.renderer.scrollToIndex);\n\n    React.useEffect(() => {\n        if (table.ref.current) {\n            const instance = (table.ref.current as Table3Ref).instance;\n\n            if (table.meta.editing.isEnabled) {\n                instance.editing = {\n                    toggleEditing,\n                    removeRowChanges: (rowId: string) => table.meta.editing.discardChanges(rowId, table.instance),\n                    save: (rowId?: string) => table.meta.editing.saveChanges(table.instance, rowId),\n                };\n\n                if (props.onEditingCreate && instance.editing) {\n                    instance.editing.createRow = (row: unknown) =>\n                        table.meta.editing.createRow(table.instance, row as Partial<TType>);\n                }\n            }\n        }\n    }, [table.ref.current, table.meta.editing.isEnabled]);\n\n    React.useEffect(() => {\n        if (table.ref.current) {\n            const instance = (table.ref.current as Table3Ref).instance;\n\n            if (table.meta.editing.isEnabled && instance.editing) {\n                instance.editing.forceValidate = async () => await table.meta.editing.forceValidate(table.instance);\n            }\n        }\n    }, [table.meta.editing.forceValidate]);\n\n    useLazyEffect(() => {\n        if (editing.isEnabled && props.onHasChanges) {\n            props.onHasChanges(editing.isDirty);\n        }\n    }, [editing.isEnabled, editing.isDirty, props.onHasChanges]);\n\n    return table;\n}\n"],"names":["Row","Cell","useLocalization","useTableEditing","LegacyIconButton","props","DiscardChangesConfirmationDialog","useTable","editing","useTableEditingListener","useLazyEffect"],"mappings":"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"}
+{"version":3,"file":"useTable3.cjs","sources":["../../../src/components/Table3/useTable3.tsx"],"sourcesContent":["import type { RowData } from '@tanstack/react-table';\nimport React from 'react';\n\nimport { LegacyIconButton, useLocalization } from '@/components';\nimport { useLazyEffect } from '@/hooks/useLazyEffect';\nimport { useTable } from '@/primitives/Table/Core/useTable';\nimport type { TableProps } from '@/primitives/Table/types';\n\nimport { Cell } from './components/Columns/Cell/Cell';\nimport { DiscardChangesConfirmationDialog } from './components/Editing/DiscardChangesConfirmationDialog';\nimport { Row } from './components/Row/Row';\nimport { useTableEditing } from './features/useTableEditing';\nimport { useTableEditingListener } from './listeners/useTableEditingListener';\nimport type { Table3Props, Table3Ref } from './types';\n\nexport const RENDERERS = {\n    row: Row,\n    cell: Cell,\n};\n\ndeclare module '@tanstack/table-core' {\n    // oxlint-disable-next-line no-unused-vars, typescript/consistent-type-definitions -- module augmentation requires interface (declaration merging)\n    interface TableMeta<TData extends RowData> {\n        editing: ReturnType<typeof useTableEditing>;\n    }\n}\n\ntype Table3Meta = {\n    editing: ReturnType<typeof useTableEditing>;\n};\n\nexport function useTable3<TType>(props: Table3Props<TType>, ref: React.Ref<Table3Ref>) {\n    const { texts } = useLocalization();\n    const editing = useTableEditing(\n        props.enableEditing,\n        props.defaultToggleEditing,\n        props.onEditingSave,\n        props.onEditingChange,\n        props.onEditingCreate,\n        props.onEditingDiscard,\n        props.rowIdentityAccessor,\n        props.validator,\n        props.showEditingActions,\n        props.onEvent\n    );\n\n    // this gives me the performance heeby jeebies, but can't think of a better way to internalise the state\n    const data: TType[] = React.useMemo(() => {\n        if (editing.temporaryRows.length) {\n            return (props.data ?? []).concat(editing.temporaryRows as TType[]);\n        }\n\n        return props.data;\n    }, [JSON.stringify(props.data), editing.temporaryRows.length]);\n\n    const extendedProps: Table3Props<TType> = {\n        ...props,\n        data,\n        enableRowActions: editing.isEditing && props.showEditingActions ? true : props.enableRowActions,\n        // While editing, only show editing actions (and their menu) when showEditingActions is true\n        rowActions: editing.isEditing\n            ? (props.rowActions ?? []).concat(\n                  // Only add editing actions if showEditingActions is explicitly set to true\n                  props.showEditingActions === true\n                      ? [\n                            // Note: helpers includes internal rowId and table properties not in the public type, that is why \"any\" is used\n                            (_1, helpers: any) => (\n                                <LegacyIconButton\n                                    aria-label={texts.table3.editing.actions.save}\n                                    icon=\"tick\"\n                                    disabled={!editing.hasChanges(helpers.rowId) || editing.hasRowErrors(helpers.rowId)}\n                                    onClick={async () => {\n                                        await editing.saveChanges(helpers.table, helpers.rowId);\n                                    }}\n                                />\n                            ),\n                            (_1, helpers: any) => (\n                                <LegacyIconButton\n                                    aria-label={texts.table3.editing.actions.clear}\n                                    icon=\"close\"\n                                    disabled={!editing.hasChanges(helpers.rowId)}\n                                    dialog={props => (\n                                        <DiscardChangesConfirmationDialog\n                                            {...props}\n                                            onDiscard={() => {\n                                                editing.discardChanges(helpers.rowId, helpers.table);\n\n                                                if (editing.temporaryRows.length) {\n                                                    requestAnimationFrame(() => editing.createRowButtonRef.current?.focus());\n                                                }\n                                            }}\n                                        />\n                                    )}\n                                />\n                            ),\n                        ]\n                      : []\n              )\n            : props.rowActions,\n    };\n\n    const meta = { editing };\n\n    // Cast to TableProps: Table3Props adds editing-specific props on top of TableProps.\n    // useTable only needs the base TableProps.\n    const table = useTable<TType, Table3Meta>(extendedProps as TableProps<TType>, ref, RENDERERS, meta);\n\n    const toggleEditing = (enabled: boolean | undefined) =>\n        table.meta.editing.toggleEditing(enabled ?? (editing => !editing), table.instance, table.renderer.scrollToIndex);\n\n    // editing state is set earlier, but toggleEditing does other things like sets the active row\n    React.useEffect(() => {\n        if (props.defaultToggleEditing) {\n            toggleEditing(true);\n        }\n    }, []);\n\n    // listeners\n    useTableEditingListener<TType>(table.instance, table.ref, table.renderer.scrollToIndex);\n\n    React.useEffect(() => {\n        if (table.ref.current) {\n            const instance = (table.ref.current as Table3Ref).instance;\n\n            if (table.meta.editing.isEnabled) {\n                instance.editing = {\n                    toggleEditing,\n                    removeRowChanges: (rowId: string) => table.meta.editing.discardChanges(rowId, table.instance),\n                    save: (rowId?: string) => table.meta.editing.saveChanges(table.instance, rowId),\n                };\n\n                if (props.onEditingCreate && instance.editing) {\n                    instance.editing.createRow = (row: unknown) =>\n                        table.meta.editing.createRow(table.instance, row as Partial<TType>);\n                }\n            }\n        }\n    }, [table.ref.current, table.meta.editing.isEnabled]);\n\n    React.useEffect(() => {\n        if (table.ref.current) {\n            const instance = (table.ref.current as Table3Ref).instance;\n\n            if (table.meta.editing.isEnabled && instance.editing) {\n                instance.editing.forceValidate = async () => await table.meta.editing.forceValidate(table.instance);\n            }\n        }\n    }, [table.meta.editing.forceValidate]);\n\n    useLazyEffect(() => {\n        if (editing.isEnabled && props.onHasChanges) {\n            props.onHasChanges(editing.isDirty);\n        }\n    }, [editing.isEnabled, editing.isDirty, props.onHasChanges]);\n\n    return table;\n}\n"],"names":["Row","Cell","useLocalization","useTableEditing","LegacyIconButton","props","DiscardChangesConfirmationDialog","useTable","editing","useTableEditingListener","useLazyEffect"],"mappings":"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"}

package/dist/components/Table3/useTable3.js

@@ -1,13 +1,13 @@
 import React__default from "react";
 import { useLazyEffect } from "../../hooks/useLazyEffect.js";
 import { useTable } from "../../primitives/Table/Core/useTable.js";
-import { LegacyIconButton } from "../LegacyComponents/IconButton/IconButton.js";
-import { useLocalization } from "../Provider/Localization.js";
 import { Cell } from "./components/Columns/Cell/Cell.js";
 import { DiscardChangesConfirmationDialog } from "./components/Editing/DiscardChangesConfirmationDialog.js";
 import { Row } from "./components/Row/Row.js";
 import { useTableEditing } from "./features/useTableEditing.js";
 import { useTableEditingListener } from "./listeners/useTableEditingListener.js";
+import { useLocalization } from "../Provider/Localization.js";
+import { LegacyIconButton } from "../LegacyComponents/IconButton/IconButton.js";
 const RENDERERS = {
   row: Row,
   cell: Cell

package/dist/components/Table3/useTable3.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTable3.js","sources":["../../../src/components/Table3/useTable3.tsx"],"sourcesContent":["import type { RowData } from '@tanstack/react-table';\nimport React from 'react';\n\nimport { useLazyEffect } from '../../hooks/useLazyEffect';\nimport { useTable } from '../../primitives/Table/Core/useTable';\nimport type { TableProps } from '../../primitives/Table/types';\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\nimport { useLocalization } from '../Provider/Localization';\n\nimport { Cell } from './components/Columns/Cell/Cell';\nimport { DiscardChangesConfirmationDialog } from './components/Editing/DiscardChangesConfirmationDialog';\nimport { Row } from './components/Row/Row';\nimport { useTableEditing } from './features/useTableEditing';\nimport { useTableEditingListener } from './listeners/useTableEditingListener';\nimport type { Table3Props, Table3Ref } from './types';\n\nexport const RENDERERS = {\n    row: Row,\n    cell: Cell,\n};\n\ndeclare module '@tanstack/table-core' {\n    // oxlint-disable-next-line no-unused-vars, typescript/consistent-type-definitions -- module augmentation requires interface (declaration merging)\n    interface TableMeta<TData extends RowData> {\n        editing: ReturnType<typeof useTableEditing>;\n    }\n}\n\ntype Table3Meta = {\n    editing: ReturnType<typeof useTableEditing>;\n};\n\nexport function useTable3<TType>(props: Table3Props<TType>, ref: React.Ref<Table3Ref>) {\n    const { texts } = useLocalization();\n    const editing = useTableEditing(\n        props.enableEditing,\n        props.defaultToggleEditing,\n        props.onEditingSave,\n        props.onEditingChange,\n        props.onEditingCreate,\n        props.onEditingDiscard,\n        props.rowIdentityAccessor,\n        props.validator,\n        props.showEditingActions,\n        props.onEvent\n    );\n\n    // this gives me the performance heeby jeebies, but can't think of a better way to internalise the state\n    const data: TType[] = React.useMemo(() => {\n        if (editing.temporaryRows.length) {\n            return (props.data ?? []).concat(editing.temporaryRows as TType[]);\n        }\n\n        return props.data;\n    }, [JSON.stringify(props.data), editing.temporaryRows.length]);\n\n    const extendedProps: Table3Props<TType> = {\n        ...props,\n        data,\n        enableRowActions: editing.isEditing && props.showEditingActions ? true : props.enableRowActions,\n        // While editing, only show editing actions (and their menu) when showEditingActions is true\n        rowActions: editing.isEditing\n            ? (props.rowActions ?? []).concat(\n                  // Only add editing actions if showEditingActions is explicitly set to true\n                  props.showEditingActions === true\n                      ? [\n                            // Note: helpers includes internal rowId and table properties not in the public type, that is why \"any\" is used\n                            (_1, helpers: any) => (\n                                <LegacyIconButton\n                                    aria-label={texts.table3.editing.actions.save}\n                                    icon=\"tick\"\n                                    disabled={!editing.hasChanges(helpers.rowId) || editing.hasRowErrors(helpers.rowId)}\n                                    onClick={async () => {\n                                        await editing.saveChanges(helpers.table, helpers.rowId);\n                                    }}\n                                />\n                            ),\n                            (_1, helpers: any) => (\n                                <LegacyIconButton\n                                    aria-label={texts.table3.editing.actions.clear}\n                                    icon=\"close\"\n                                    disabled={!editing.hasChanges(helpers.rowId)}\n                                    dialog={props => (\n                                        <DiscardChangesConfirmationDialog\n                                            {...props}\n                                            onDiscard={() => {\n                                                editing.discardChanges(helpers.rowId, helpers.table);\n\n                                                if (editing.temporaryRows.length) {\n                                                    requestAnimationFrame(() => editing.createRowButtonRef.current?.focus());\n                                                }\n                                            }}\n                                        />\n                                    )}\n                                />\n                            ),\n                        ]\n                      : []\n              )\n            : props.rowActions,\n    };\n\n    const meta = { editing };\n\n    // Cast to TableProps: Table3Props adds editing-specific props on top of TableProps.\n    // useTable only needs the base TableProps.\n    const table = useTable<TType, Table3Meta>(extendedProps as TableProps<TType>, ref, RENDERERS, meta);\n\n    const toggleEditing = (enabled: boolean | undefined) =>\n        table.meta.editing.toggleEditing(enabled ?? (editing => !editing), table.instance, table.renderer.scrollToIndex);\n\n    // editing state is set earlier, but toggleEditing does other things like sets the active row\n    React.useEffect(() => {\n        if (props.defaultToggleEditing) {\n            toggleEditing(true);\n        }\n    }, []);\n\n    // listeners\n    useTableEditingListener<TType>(table.instance, table.ref, table.renderer.scrollToIndex);\n\n    React.useEffect(() => {\n        if (table.ref.current) {\n            const instance = (table.ref.current as Table3Ref).instance;\n\n            if (table.meta.editing.isEnabled) {\n                instance.editing = {\n                    toggleEditing,\n                    removeRowChanges: (rowId: string) => table.meta.editing.discardChanges(rowId, table.instance),\n                    save: (rowId?: string) => table.meta.editing.saveChanges(table.instance, rowId),\n                };\n\n                if (props.onEditingCreate && instance.editing) {\n                    instance.editing.createRow = (row: unknown) =>\n                        table.meta.editing.createRow(table.instance, row as Partial<TType>);\n                }\n            }\n        }\n    }, [table.ref.current, table.meta.editing.isEnabled]);\n\n    React.useEffect(() => {\n        if (table.ref.current) {\n            const instance = (table.ref.current as Table3Ref).instance;\n\n            if (table.meta.editing.isEnabled && instance.editing) {\n                instance.editing.forceValidate = async () => await table.meta.editing.forceValidate(table.instance);\n            }\n        }\n    }, [table.meta.editing.forceValidate]);\n\n    useLazyEffect(() => {\n        if (editing.isEnabled && props.onHasChanges) {\n            props.onHasChanges(editing.isDirty);\n        }\n    }, [editing.isEnabled, editing.isDirty, props.onHasChanges]);\n\n    return table;\n}\n"],"names":["React","props","editing"],"mappings":"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"}
+{"version":3,"file":"useTable3.js","sources":["../../../src/components/Table3/useTable3.tsx"],"sourcesContent":["import type { RowData } from '@tanstack/react-table';\nimport React from 'react';\n\nimport { LegacyIconButton, useLocalization } from '@/components';\nimport { useLazyEffect } from '@/hooks/useLazyEffect';\nimport { useTable } from '@/primitives/Table/Core/useTable';\nimport type { TableProps } from '@/primitives/Table/types';\n\nimport { Cell } from './components/Columns/Cell/Cell';\nimport { DiscardChangesConfirmationDialog } from './components/Editing/DiscardChangesConfirmationDialog';\nimport { Row } from './components/Row/Row';\nimport { useTableEditing } from './features/useTableEditing';\nimport { useTableEditingListener } from './listeners/useTableEditingListener';\nimport type { Table3Props, Table3Ref } from './types';\n\nexport const RENDERERS = {\n    row: Row,\n    cell: Cell,\n};\n\ndeclare module '@tanstack/table-core' {\n    // oxlint-disable-next-line no-unused-vars, typescript/consistent-type-definitions -- module augmentation requires interface (declaration merging)\n    interface TableMeta<TData extends RowData> {\n        editing: ReturnType<typeof useTableEditing>;\n    }\n}\n\ntype Table3Meta = {\n    editing: ReturnType<typeof useTableEditing>;\n};\n\nexport function useTable3<TType>(props: Table3Props<TType>, ref: React.Ref<Table3Ref>) {\n    const { texts } = useLocalization();\n    const editing = useTableEditing(\n        props.enableEditing,\n        props.defaultToggleEditing,\n        props.onEditingSave,\n        props.onEditingChange,\n        props.onEditingCreate,\n        props.onEditingDiscard,\n        props.rowIdentityAccessor,\n        props.validator,\n        props.showEditingActions,\n        props.onEvent\n    );\n\n    // this gives me the performance heeby jeebies, but can't think of a better way to internalise the state\n    const data: TType[] = React.useMemo(() => {\n        if (editing.temporaryRows.length) {\n            return (props.data ?? []).concat(editing.temporaryRows as TType[]);\n        }\n\n        return props.data;\n    }, [JSON.stringify(props.data), editing.temporaryRows.length]);\n\n    const extendedProps: Table3Props<TType> = {\n        ...props,\n        data,\n        enableRowActions: editing.isEditing && props.showEditingActions ? true : props.enableRowActions,\n        // While editing, only show editing actions (and their menu) when showEditingActions is true\n        rowActions: editing.isEditing\n            ? (props.rowActions ?? []).concat(\n                  // Only add editing actions if showEditingActions is explicitly set to true\n                  props.showEditingActions === true\n                      ? [\n                            // Note: helpers includes internal rowId and table properties not in the public type, that is why \"any\" is used\n                            (_1, helpers: any) => (\n                                <LegacyIconButton\n                                    aria-label={texts.table3.editing.actions.save}\n                                    icon=\"tick\"\n                                    disabled={!editing.hasChanges(helpers.rowId) || editing.hasRowErrors(helpers.rowId)}\n                                    onClick={async () => {\n                                        await editing.saveChanges(helpers.table, helpers.rowId);\n                                    }}\n                                />\n                            ),\n                            (_1, helpers: any) => (\n                                <LegacyIconButton\n                                    aria-label={texts.table3.editing.actions.clear}\n                                    icon=\"close\"\n                                    disabled={!editing.hasChanges(helpers.rowId)}\n                                    dialog={props => (\n                                        <DiscardChangesConfirmationDialog\n                                            {...props}\n                                            onDiscard={() => {\n                                                editing.discardChanges(helpers.rowId, helpers.table);\n\n                                                if (editing.temporaryRows.length) {\n                                                    requestAnimationFrame(() => editing.createRowButtonRef.current?.focus());\n                                                }\n                                            }}\n                                        />\n                                    )}\n                                />\n                            ),\n                        ]\n                      : []\n              )\n            : props.rowActions,\n    };\n\n    const meta = { editing };\n\n    // Cast to TableProps: Table3Props adds editing-specific props on top of TableProps.\n    // useTable only needs the base TableProps.\n    const table = useTable<TType, Table3Meta>(extendedProps as TableProps<TType>, ref, RENDERERS, meta);\n\n    const toggleEditing = (enabled: boolean | undefined) =>\n        table.meta.editing.toggleEditing(enabled ?? (editing => !editing), table.instance, table.renderer.scrollToIndex);\n\n    // editing state is set earlier, but toggleEditing does other things like sets the active row\n    React.useEffect(() => {\n        if (props.defaultToggleEditing) {\n            toggleEditing(true);\n        }\n    }, []);\n\n    // listeners\n    useTableEditingListener<TType>(table.instance, table.ref, table.renderer.scrollToIndex);\n\n    React.useEffect(() => {\n        if (table.ref.current) {\n            const instance = (table.ref.current as Table3Ref).instance;\n\n            if (table.meta.editing.isEnabled) {\n                instance.editing = {\n                    toggleEditing,\n                    removeRowChanges: (rowId: string) => table.meta.editing.discardChanges(rowId, table.instance),\n                    save: (rowId?: string) => table.meta.editing.saveChanges(table.instance, rowId),\n                };\n\n                if (props.onEditingCreate && instance.editing) {\n                    instance.editing.createRow = (row: unknown) =>\n                        table.meta.editing.createRow(table.instance, row as Partial<TType>);\n                }\n            }\n        }\n    }, [table.ref.current, table.meta.editing.isEnabled]);\n\n    React.useEffect(() => {\n        if (table.ref.current) {\n            const instance = (table.ref.current as Table3Ref).instance;\n\n            if (table.meta.editing.isEnabled && instance.editing) {\n                instance.editing.forceValidate = async () => await table.meta.editing.forceValidate(table.instance);\n            }\n        }\n    }, [table.meta.editing.forceValidate]);\n\n    useLazyEffect(() => {\n        if (editing.isEnabled && props.onHasChanges) {\n            props.onHasChanges(editing.isDirty);\n        }\n    }, [editing.isEnabled, editing.isDirty, props.onHasChanges]);\n\n    return table;\n}\n"],"names":["React","props","editing"],"mappings":"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"}

package/dist/components/Table3/util/editing.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"editing.cjs","sources":["../../../../src/components/Table3/util/editing.ts"],"sourcesContent":["import type { Cell as ReactTableCell, Row as ReactTableRow, Table as ReactTable } from '@tanstack/react-table';\nimport React from 'react';\n\nimport type { TableFilterValue, TableRef } from '../../../primitives/Table/types';\nimport { columnFilterFn } from '../../../primitives/Table/useTableManager/util/filtering';\nimport { globalFilterFn } from '../../../primitives/Table/useTableManager/util/search';\nimport type { Localization } from '../../Provider/Localization';\n\nexport function willRowMove<TType = unknown>(\n    cell: ReactTableCell<TType, unknown>,\n    change: unknown,\n    rowIndex: number,\n    localization: Localization\n) {\n    const { table } = cell.getContext();\n\n    if (willRowMoveAfterSearch<TType>(cell, change, table, localization)) {\n        return 'search';\n    }\n\n    if (willRowMoveAfterFilter<TType>(cell, change, localization)) {\n        return 'filter';\n    }\n\n    if (willRowMoveAfterSorting<TType>(cell, change, rowIndex)) {\n        return 'sorting';\n    }\n\n    return undefined;\n}\n\nfunction willRowMoveAfterSearch<TType = unknown>(\n    cell: ReactTableCell<TType, unknown>,\n    change: unknown,\n    table: ReactTable<TType>,\n    localization: Localization\n) {\n    const searchQuery = table.getState().globalFilter;\n\n    if (!table.options.enableGlobalFilter || !searchQuery) {\n        return false;\n    }\n\n    const rowWithChange = { ...cell.row, original: { ...cell.row.original, [cell.column.id]: change } };\n    return !globalFilterFn(rowWithChange, cell.column.id, searchQuery, localization);\n}\n\nfunction willRowMoveAfterFilter<TType = unknown>(\n    cell: ReactTableCell<TType, unknown>,\n    change: unknown,\n    localization: Localization\n) {\n    if (!cell.column.getIsFiltered()) {\n        return false;\n    }\n\n    return !columnFilterFn(\n        cell.row.original,\n        change,\n        cell.column.columnDef.meta,\n        cell.column.getFilterValue() as TableFilterValue,\n        localization\n    );\n}\n\nfunction willRowMoveAfterSorting<TType = unknown>(cell: ReactTableCell<TType, unknown>, change: unknown, rowIndex: number) {\n    if (!cell.column.getIsSorted()) {\n        return false;\n    }\n\n    const { table } = cell.getContext();\n    const rows = table.getRowModel().rows;\n\n    const miniSortRows: ReactTableRow<TType>[] = [\n        {\n            ...cell.row,\n            original: {\n                ...cell.row.original,\n                [cell.column.id]: change,\n            },\n            getValue: () => change as any,\n        },\n    ];\n\n    let index = 0;\n\n    if (rowIndex > 0) {\n        const previous = rows[rowIndex - 1];\n\n        if (previous) {\n            miniSortRows.unshift(previous);\n            index = 1;\n        }\n    }\n\n    if (rowIndex < rows.length - 1) {\n        const next = rows[rowIndex + 1];\n\n        if (next) {\n            miniSortRows.push(next);\n        }\n    }\n\n    const resortedRows = [...miniSortRows].sort((rowA, rowB) => {\n        const sortFn = cell.column.getSortingFn();\n        const sortUndefined = cell.column.columnDef.sortUndefined;\n\n        if (!table.options.manualSorting && sortUndefined) {\n            const aValue = rowA.getValue(cell.column.id);\n            const bValue = rowB.getValue(cell.column.id);\n\n            const aUndefined = aValue === undefined;\n            const bUndefined = bValue === undefined;\n\n            if (aUndefined || bUndefined) {\n                if (sortUndefined === 'first') return aUndefined ? -1 : 1;\n                if (sortUndefined === 'last') return aUndefined ? 1 : -1;\n\n                return aUndefined && bUndefined ? 0 : aUndefined ? sortUndefined : -sortUndefined;\n            }\n        }\n\n        return sortFn(rowA, rowB, cell.column.id);\n    });\n\n    if (cell.column.getIsSorted() === 'desc') {\n        resortedRows.reverse();\n    }\n\n    return resortedRows[index]?.id !== cell.row.id;\n}\n\nexport const TEMPORARY_ROW_ID_PREFIX = 'temp-';\n\nexport function isTemporaryRow(rowId: string | undefined) {\n    if (rowId === undefined) {\n        return false;\n    }\n\n    return String(rowId).startsWith(TEMPORARY_ROW_ID_PREFIX);\n}\n\nexport const shortcut = { key: 'e', meta: true, shift: false };\n\nexport function isTableScrolled(ref: React.RefObject<TableRef>): [boolean, boolean] {\n    if (ref.current) {\n        const height =\n            Number.parseFloat(ref.current?.querySelector('tbody')?.style.height || '0') +\n            Number.parseFloat(ref.current?.querySelector('tbody')?.style.paddingBottom || '0');\n\n        const hasVerticalScrollbar = ref.current.scrollHeight > ref.current.clientHeight;\n\n        return [hasVerticalScrollbar, height > ref.current.scrollHeight];\n    }\n\n    return [false, false];\n}\n"],"names":["globalFilterFn","columnFilterFn"],"mappings":"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"}
+{"version":3,"file":"editing.cjs","sources":["../../../../src/components/Table3/util/editing.ts"],"sourcesContent":["import type { Cell as ReactTableCell, Row as ReactTableRow, Table as ReactTable } from '@tanstack/react-table';\nimport React from 'react';\n\nimport type { Localization } from '@/components';\nimport type { TableFilterValue, TableRef } from '@/primitives/Table/types';\nimport { columnFilterFn } from '@/primitives/Table/useTableManager/util/filtering';\nimport { globalFilterFn } from '@/primitives/Table/useTableManager/util/search';\n\nexport function willRowMove<TType = unknown>(\n    cell: ReactTableCell<TType, unknown>,\n    change: unknown,\n    rowIndex: number,\n    localization: Localization\n) {\n    const { table } = cell.getContext();\n\n    if (willRowMoveAfterSearch<TType>(cell, change, table, localization)) {\n        return 'search';\n    }\n\n    if (willRowMoveAfterFilter<TType>(cell, change, localization)) {\n        return 'filter';\n    }\n\n    if (willRowMoveAfterSorting<TType>(cell, change, rowIndex)) {\n        return 'sorting';\n    }\n\n    return undefined;\n}\n\nfunction willRowMoveAfterSearch<TType = unknown>(\n    cell: ReactTableCell<TType, unknown>,\n    change: unknown,\n    table: ReactTable<TType>,\n    localization: Localization\n) {\n    const searchQuery = table.getState().globalFilter;\n\n    if (!table.options.enableGlobalFilter || !searchQuery) {\n        return false;\n    }\n\n    const rowWithChange = { ...cell.row, original: { ...cell.row.original, [cell.column.id]: change } };\n    return !globalFilterFn(rowWithChange, cell.column.id, searchQuery, localization);\n}\n\nfunction willRowMoveAfterFilter<TType = unknown>(\n    cell: ReactTableCell<TType, unknown>,\n    change: unknown,\n    localization: Localization\n) {\n    if (!cell.column.getIsFiltered()) {\n        return false;\n    }\n\n    return !columnFilterFn(\n        cell.row.original,\n        change,\n        cell.column.columnDef.meta,\n        cell.column.getFilterValue() as TableFilterValue,\n        localization\n    );\n}\n\nfunction willRowMoveAfterSorting<TType = unknown>(cell: ReactTableCell<TType, unknown>, change: unknown, rowIndex: number) {\n    if (!cell.column.getIsSorted()) {\n        return false;\n    }\n\n    const { table } = cell.getContext();\n    const rows = table.getRowModel().rows;\n\n    const miniSortRows: ReactTableRow<TType>[] = [\n        {\n            ...cell.row,\n            original: {\n                ...cell.row.original,\n                [cell.column.id]: change,\n            },\n            getValue: () => change as any,\n        },\n    ];\n\n    let index = 0;\n\n    if (rowIndex > 0) {\n        const previous = rows[rowIndex - 1];\n\n        if (previous) {\n            miniSortRows.unshift(previous);\n            index = 1;\n        }\n    }\n\n    if (rowIndex < rows.length - 1) {\n        const next = rows[rowIndex + 1];\n\n        if (next) {\n            miniSortRows.push(next);\n        }\n    }\n\n    const resortedRows = [...miniSortRows].sort((rowA, rowB) => {\n        const sortFn = cell.column.getSortingFn();\n        const sortUndefined = cell.column.columnDef.sortUndefined;\n\n        if (!table.options.manualSorting && sortUndefined) {\n            const aValue = rowA.getValue(cell.column.id);\n            const bValue = rowB.getValue(cell.column.id);\n\n            const aUndefined = aValue === undefined;\n            const bUndefined = bValue === undefined;\n\n            if (aUndefined || bUndefined) {\n                if (sortUndefined === 'first') return aUndefined ? -1 : 1;\n                if (sortUndefined === 'last') return aUndefined ? 1 : -1;\n\n                return aUndefined && bUndefined ? 0 : aUndefined ? sortUndefined : -sortUndefined;\n            }\n        }\n\n        return sortFn(rowA, rowB, cell.column.id);\n    });\n\n    if (cell.column.getIsSorted() === 'desc') {\n        resortedRows.reverse();\n    }\n\n    return resortedRows[index]?.id !== cell.row.id;\n}\n\nexport const TEMPORARY_ROW_ID_PREFIX = 'temp-';\n\nexport function isTemporaryRow(rowId: string | undefined) {\n    if (rowId === undefined) {\n        return false;\n    }\n\n    return String(rowId).startsWith(TEMPORARY_ROW_ID_PREFIX);\n}\n\nexport const shortcut = { key: 'e', meta: true, shift: false };\n\nexport function isTableScrolled(ref: React.RefObject<TableRef>): [boolean, boolean] {\n    if (ref.current) {\n        const height =\n            Number.parseFloat(ref.current?.querySelector('tbody')?.style.height || '0') +\n            Number.parseFloat(ref.current?.querySelector('tbody')?.style.paddingBottom || '0');\n\n        const hasVerticalScrollbar = ref.current.scrollHeight > ref.current.clientHeight;\n\n        return [hasVerticalScrollbar, height > ref.current.scrollHeight];\n    }\n\n    return [false, false];\n}\n"],"names":["globalFilterFn","columnFilterFn"],"mappings":"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"}

package/dist/components/Table3/util/editing.d.ts

@@ -1,8 +1,8 @@
 import { Cell as ReactTableCell } from '@tanstack/react-table';
 import { default as React } from 'react';
+import { Localization } from '../..';
 import { TableRef } from '../../../primitives/Table/types';
-import { Localization } from '../../Provider/Localization';
-export declare function willRowMove<TType = unknown>(cell: ReactTableCell<TType, unknown>, change: unknown, rowIndex: number, localization: Localization): "search" | "filter" | "sorting" | undefined;
+export declare function willRowMove<TType = unknown>(cell: ReactTableCell<TType, unknown>, change: unknown, rowIndex: number, localization: Localization): "filter" | "search" | "sorting" | undefined;
 export declare const TEMPORARY_ROW_ID_PREFIX = "temp-";
 export declare function isTemporaryRow(rowId: string | undefined): boolean;
 export declare const shortcut: {

package/dist/components/Table3/util/editing.js.map

@@ -1 +1 @@
-{"version":3,"file":"editing.js","sources":["../../../../src/components/Table3/util/editing.ts"],"sourcesContent":["import type { Cell as ReactTableCell, Row as ReactTableRow, Table as ReactTable } from '@tanstack/react-table';\nimport React from 'react';\n\nimport type { TableFilterValue, TableRef } from '../../../primitives/Table/types';\nimport { columnFilterFn } from '../../../primitives/Table/useTableManager/util/filtering';\nimport { globalFilterFn } from '../../../primitives/Table/useTableManager/util/search';\nimport type { Localization } from '../../Provider/Localization';\n\nexport function willRowMove<TType = unknown>(\n    cell: ReactTableCell<TType, unknown>,\n    change: unknown,\n    rowIndex: number,\n    localization: Localization\n) {\n    const { table } = cell.getContext();\n\n    if (willRowMoveAfterSearch<TType>(cell, change, table, localization)) {\n        return 'search';\n    }\n\n    if (willRowMoveAfterFilter<TType>(cell, change, localization)) {\n        return 'filter';\n    }\n\n    if (willRowMoveAfterSorting<TType>(cell, change, rowIndex)) {\n        return 'sorting';\n    }\n\n    return undefined;\n}\n\nfunction willRowMoveAfterSearch<TType = unknown>(\n    cell: ReactTableCell<TType, unknown>,\n    change: unknown,\n    table: ReactTable<TType>,\n    localization: Localization\n) {\n    const searchQuery = table.getState().globalFilter;\n\n    if (!table.options.enableGlobalFilter || !searchQuery) {\n        return false;\n    }\n\n    const rowWithChange = { ...cell.row, original: { ...cell.row.original, [cell.column.id]: change } };\n    return !globalFilterFn(rowWithChange, cell.column.id, searchQuery, localization);\n}\n\nfunction willRowMoveAfterFilter<TType = unknown>(\n    cell: ReactTableCell<TType, unknown>,\n    change: unknown,\n    localization: Localization\n) {\n    if (!cell.column.getIsFiltered()) {\n        return false;\n    }\n\n    return !columnFilterFn(\n        cell.row.original,\n        change,\n        cell.column.columnDef.meta,\n        cell.column.getFilterValue() as TableFilterValue,\n        localization\n    );\n}\n\nfunction willRowMoveAfterSorting<TType = unknown>(cell: ReactTableCell<TType, unknown>, change: unknown, rowIndex: number) {\n    if (!cell.column.getIsSorted()) {\n        return false;\n    }\n\n    const { table } = cell.getContext();\n    const rows = table.getRowModel().rows;\n\n    const miniSortRows: ReactTableRow<TType>[] = [\n        {\n            ...cell.row,\n            original: {\n                ...cell.row.original,\n                [cell.column.id]: change,\n            },\n            getValue: () => change as any,\n        },\n    ];\n\n    let index = 0;\n\n    if (rowIndex > 0) {\n        const previous = rows[rowIndex - 1];\n\n        if (previous) {\n            miniSortRows.unshift(previous);\n            index = 1;\n        }\n    }\n\n    if (rowIndex < rows.length - 1) {\n        const next = rows[rowIndex + 1];\n\n        if (next) {\n            miniSortRows.push(next);\n        }\n    }\n\n    const resortedRows = [...miniSortRows].sort((rowA, rowB) => {\n        const sortFn = cell.column.getSortingFn();\n        const sortUndefined = cell.column.columnDef.sortUndefined;\n\n        if (!table.options.manualSorting && sortUndefined) {\n            const aValue = rowA.getValue(cell.column.id);\n            const bValue = rowB.getValue(cell.column.id);\n\n            const aUndefined = aValue === undefined;\n            const bUndefined = bValue === undefined;\n\n            if (aUndefined || bUndefined) {\n                if (sortUndefined === 'first') return aUndefined ? -1 : 1;\n                if (sortUndefined === 'last') return aUndefined ? 1 : -1;\n\n                return aUndefined && bUndefined ? 0 : aUndefined ? sortUndefined : -sortUndefined;\n            }\n        }\n\n        return sortFn(rowA, rowB, cell.column.id);\n    });\n\n    if (cell.column.getIsSorted() === 'desc') {\n        resortedRows.reverse();\n    }\n\n    return resortedRows[index]?.id !== cell.row.id;\n}\n\nexport const TEMPORARY_ROW_ID_PREFIX = 'temp-';\n\nexport function isTemporaryRow(rowId: string | undefined) {\n    if (rowId === undefined) {\n        return false;\n    }\n\n    return String(rowId).startsWith(TEMPORARY_ROW_ID_PREFIX);\n}\n\nexport const shortcut = { key: 'e', meta: true, shift: false };\n\nexport function isTableScrolled(ref: React.RefObject<TableRef>): [boolean, boolean] {\n    if (ref.current) {\n        const height =\n            Number.parseFloat(ref.current?.querySelector('tbody')?.style.height || '0') +\n            Number.parseFloat(ref.current?.querySelector('tbody')?.style.paddingBottom || '0');\n\n        const hasVerticalScrollbar = ref.current.scrollHeight > ref.current.clientHeight;\n\n        return [hasVerticalScrollbar, height > ref.current.scrollHeight];\n    }\n\n    return [false, false];\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"editing.js","sources":["../../../../src/components/Table3/util/editing.ts"],"sourcesContent":["import type { Cell as ReactTableCell, Row as ReactTableRow, Table as ReactTable } from '@tanstack/react-table';\nimport React from 'react';\n\nimport type { Localization } from '@/components';\nimport type { TableFilterValue, TableRef } from '@/primitives/Table/types';\nimport { columnFilterFn } from '@/primitives/Table/useTableManager/util/filtering';\nimport { globalFilterFn } from '@/primitives/Table/useTableManager/util/search';\n\nexport function willRowMove<TType = unknown>(\n    cell: ReactTableCell<TType, unknown>,\n    change: unknown,\n    rowIndex: number,\n    localization: Localization\n) {\n    const { table } = cell.getContext();\n\n    if (willRowMoveAfterSearch<TType>(cell, change, table, localization)) {\n        return 'search';\n    }\n\n    if (willRowMoveAfterFilter<TType>(cell, change, localization)) {\n        return 'filter';\n    }\n\n    if (willRowMoveAfterSorting<TType>(cell, change, rowIndex)) {\n        return 'sorting';\n    }\n\n    return undefined;\n}\n\nfunction willRowMoveAfterSearch<TType = unknown>(\n    cell: ReactTableCell<TType, unknown>,\n    change: unknown,\n    table: ReactTable<TType>,\n    localization: Localization\n) {\n    const searchQuery = table.getState().globalFilter;\n\n    if (!table.options.enableGlobalFilter || !searchQuery) {\n        return false;\n    }\n\n    const rowWithChange = { ...cell.row, original: { ...cell.row.original, [cell.column.id]: change } };\n    return !globalFilterFn(rowWithChange, cell.column.id, searchQuery, localization);\n}\n\nfunction willRowMoveAfterFilter<TType = unknown>(\n    cell: ReactTableCell<TType, unknown>,\n    change: unknown,\n    localization: Localization\n) {\n    if (!cell.column.getIsFiltered()) {\n        return false;\n    }\n\n    return !columnFilterFn(\n        cell.row.original,\n        change,\n        cell.column.columnDef.meta,\n        cell.column.getFilterValue() as TableFilterValue,\n        localization\n    );\n}\n\nfunction willRowMoveAfterSorting<TType = unknown>(cell: ReactTableCell<TType, unknown>, change: unknown, rowIndex: number) {\n    if (!cell.column.getIsSorted()) {\n        return false;\n    }\n\n    const { table } = cell.getContext();\n    const rows = table.getRowModel().rows;\n\n    const miniSortRows: ReactTableRow<TType>[] = [\n        {\n            ...cell.row,\n            original: {\n                ...cell.row.original,\n                [cell.column.id]: change,\n            },\n            getValue: () => change as any,\n        },\n    ];\n\n    let index = 0;\n\n    if (rowIndex > 0) {\n        const previous = rows[rowIndex - 1];\n\n        if (previous) {\n            miniSortRows.unshift(previous);\n            index = 1;\n        }\n    }\n\n    if (rowIndex < rows.length - 1) {\n        const next = rows[rowIndex + 1];\n\n        if (next) {\n            miniSortRows.push(next);\n        }\n    }\n\n    const resortedRows = [...miniSortRows].sort((rowA, rowB) => {\n        const sortFn = cell.column.getSortingFn();\n        const sortUndefined = cell.column.columnDef.sortUndefined;\n\n        if (!table.options.manualSorting && sortUndefined) {\n            const aValue = rowA.getValue(cell.column.id);\n            const bValue = rowB.getValue(cell.column.id);\n\n            const aUndefined = aValue === undefined;\n            const bUndefined = bValue === undefined;\n\n            if (aUndefined || bUndefined) {\n                if (sortUndefined === 'first') return aUndefined ? -1 : 1;\n                if (sortUndefined === 'last') return aUndefined ? 1 : -1;\n\n                return aUndefined && bUndefined ? 0 : aUndefined ? sortUndefined : -sortUndefined;\n            }\n        }\n\n        return sortFn(rowA, rowB, cell.column.id);\n    });\n\n    if (cell.column.getIsSorted() === 'desc') {\n        resortedRows.reverse();\n    }\n\n    return resortedRows[index]?.id !== cell.row.id;\n}\n\nexport const TEMPORARY_ROW_ID_PREFIX = 'temp-';\n\nexport function isTemporaryRow(rowId: string | undefined) {\n    if (rowId === undefined) {\n        return false;\n    }\n\n    return String(rowId).startsWith(TEMPORARY_ROW_ID_PREFIX);\n}\n\nexport const shortcut = { key: 'e', meta: true, shift: false };\n\nexport function isTableScrolled(ref: React.RefObject<TableRef>): [boolean, boolean] {\n    if (ref.current) {\n        const height =\n            Number.parseFloat(ref.current?.querySelector('tbody')?.style.height || '0') +\n            Number.parseFloat(ref.current?.querySelector('tbody')?.style.paddingBottom || '0');\n\n        const hasVerticalScrollbar = ref.current.scrollHeight > ref.current.clientHeight;\n\n        return [hasVerticalScrollbar, height > ref.current.scrollHeight];\n    }\n\n    return [false, false];\n}\n"],"names":[],"mappings":"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"}

package/dist/components/Tabs/Context.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Context.cjs","sources":["../../../src/components/Tabs/Context.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { Orientation } from '../../types';\n\ntype TabContextValue = {\n    activeTabId?: string;\n    baseId: string;\n    onChange: (id: string) => void;\n    orientation: Orientation;\n};\n\nexport const TabContext = React.createContext<TabContextValue>({\n    activeTabId: undefined,\n    baseId: '',\n    onChange: (_id: string) => undefined,\n    orientation: 'horizontal',\n});\n"],"names":[],"mappings":";;;AAWO,MAAM,aAAa,MAAM,cAA+B;AAAA,EAC3D,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,UAAU,CAAC,QAAgB;AAAA,EAC3B,aAAa;AACjB,CAAC;;"}
+{"version":3,"file":"Context.cjs","sources":["../../../src/components/Tabs/Context.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { Orientation } from '@/types';\n\ntype TabContextValue = {\n    activeTabId?: string;\n    baseId: string;\n    onChange: (id: string) => void;\n    orientation: Orientation;\n};\n\nexport const TabContext = React.createContext<TabContextValue>({\n    activeTabId: undefined,\n    baseId: '',\n    onChange: (_id: string) => undefined,\n    orientation: 'horizontal',\n});\n"],"names":[],"mappings":";;;AAWO,MAAM,aAAa,MAAM,cAA+B;AAAA,EAC3D,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,UAAU,CAAC,QAAgB;AAAA,EAC3B,aAAa;AACjB,CAAC;;"}

package/dist/components/Tabs/Context.js.map

@@ -1 +1 @@
-{"version":3,"file":"Context.js","sources":["../../../src/components/Tabs/Context.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { Orientation } from '../../types';\n\ntype TabContextValue = {\n    activeTabId?: string;\n    baseId: string;\n    onChange: (id: string) => void;\n    orientation: Orientation;\n};\n\nexport const TabContext = React.createContext<TabContextValue>({\n    activeTabId: undefined,\n    baseId: '',\n    onChange: (_id: string) => undefined,\n    orientation: 'horizontal',\n});\n"],"names":["React"],"mappings":";AAWO,MAAM,aAAaA,eAAM,cAA+B;AAAA,EAC3D,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,UAAU,CAAC,QAAgB;AAAA,EAC3B,aAAa;AACjB,CAAC;"}
+{"version":3,"file":"Context.js","sources":["../../../src/components/Tabs/Context.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { Orientation } from '@/types';\n\ntype TabContextValue = {\n    activeTabId?: string;\n    baseId: string;\n    onChange: (id: string) => void;\n    orientation: Orientation;\n};\n\nexport const TabContext = React.createContext<TabContextValue>({\n    activeTabId: undefined,\n    baseId: '',\n    onChange: (_id: string) => undefined,\n    orientation: 'horizontal',\n});\n"],"names":["React"],"mappings":";AAWO,MAAM,aAAaA,eAAM,cAA+B;AAAA,EAC3D,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,UAAU,CAAC,QAAgB;AAAA,EAC3B,aAAa;AACjB,CAAC;"}

package/dist/components/Tabs/Tabs.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.cjs","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import { FocusScope } from '@react-aria/focus';\nimport cn from 'clsx';\nimport * as React from 'react';\n\nimport { useControlled } from '../../hooks/useControlled';\nimport type { Orientation } from '../../types';\n\nimport type { TabListProps } from './components/TabList';\nimport { TabList } from './components/TabList';\nimport type { TabContentProps } from './components/TabPanel';\nimport { TabPanel } from './components/TabPanel';\nimport type { TabTriggerProps } from './components/Trigger';\nimport { TabTrigger } from './components/Trigger';\nimport { TabContext } from './Context';\n\nexport type TabsProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> & {\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 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    const baseId = React.useId();\n\n    const [activeTabId, setActiveTabId] = useControlled({\n        defaultValue: defaultId,\n        onChange,\n        value: id,\n    });\n\n    const context = {\n        activeTabId,\n        baseId,\n        onChange: setActiveTabId,\n        orientation,\n    };\n\n    return (\n        <TabContext.Provider value={context}>\n            <FocusScope>\n                <div {...otherProps} className={className} data-taco=\"tabs\" ref={ref}>\n                    {children}\n                </div>\n            </FocusScope>\n        </TabContext.Provider>\n    );\n}) as 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\nTabs.List = TabList;\nTabs.Trigger = TabTrigger;\nTabs.Content = TabPanel;\n"],"names":["React","Tabs","useControlled","TabContext","FocusScope","TabList","TabTrigger","TabPanel"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CO,MAAM,OAAOA,iBAAM,WAAW,SAASC,MAAK,OAAkB,KAAgC;AACjG,QAAM,EAAE,IAAI,WAAW,UAAU,UAAU,cAAc,cAAc,GAAG,WAAA,IAAe;AACzF,QAAM,YAAY;AAAA,IACd;AAAA,MACI,eAAe,gBAAgB;AAAA,IAAA;AAAA,IAEnC,MAAM;AAAA,EAAA;AAGV,QAAM,SAASD,iBAAM,MAAA;AAErB,QAAM,CAAC,aAAa,cAAc,IAAIE,4BAAc;AAAA,IAChD,cAAc;AAAA,IACd;AAAA,IACA,OAAO;AAAA,EAAA,CACV;AAED,QAAM,UAAU;AAAA,IACZ;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,EAAA;AAGJ,wDACKC,QAAAA,WAAW,UAAX,EAAoB,OAAO,0DACvBC,kBAAA,MACGJ,iCAAA,cAAC,OAAA,EAAK,GAAG,YAAY,WAAsB,aAAU,QAAO,OACvD,QACL,CACJ,CACJ;AAER,CAAC;AASD,KAAK,OAAOK,QAAAA;AACZ,KAAK,UAAUC,QAAAA;AACf,KAAK,UAAUC,SAAAA;;"}
+{"version":3,"file":"Tabs.cjs","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import { FocusScope } from '@react-aria/focus';\nimport cn from 'clsx';\nimport * as React from 'react';\n\nimport { useControlled } from '@/hooks/useControlled';\nimport type { Orientation } from '@/types';\n\nimport type { TabListProps } from './components/TabList';\nimport { TabList } from './components/TabList';\nimport type { TabContentProps } from './components/TabPanel';\nimport { TabPanel } from './components/TabPanel';\nimport type { TabTriggerProps } from './components/Trigger';\nimport { TabTrigger } from './components/Trigger';\nimport { TabContext } from './Context';\n\nexport type TabsProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> & {\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 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    const baseId = React.useId();\n\n    const [activeTabId, setActiveTabId] = useControlled({\n        defaultValue: defaultId,\n        onChange,\n        value: id,\n    });\n\n    const context = {\n        activeTabId,\n        baseId,\n        onChange: setActiveTabId,\n        orientation,\n    };\n\n    return (\n        <TabContext.Provider value={context}>\n            <FocusScope>\n                <div {...otherProps} className={className} data-taco=\"tabs\" ref={ref}>\n                    {children}\n                </div>\n            </FocusScope>\n        </TabContext.Provider>\n    );\n}) as 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\nTabs.List = TabList;\nTabs.Trigger = TabTrigger;\nTabs.Content = TabPanel;\n"],"names":["React","Tabs","useControlled","TabContext","FocusScope","TabList","TabTrigger","TabPanel"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CO,MAAM,OAAOA,iBAAM,WAAW,SAASC,MAAK,OAAkB,KAAgC;AACjG,QAAM,EAAE,IAAI,WAAW,UAAU,UAAU,cAAc,cAAc,GAAG,WAAA,IAAe;AACzF,QAAM,YAAY;AAAA,IACd;AAAA,MACI,eAAe,gBAAgB;AAAA,IAAA;AAAA,IAEnC,MAAM;AAAA,EAAA;AAGV,QAAM,SAASD,iBAAM,MAAA;AAErB,QAAM,CAAC,aAAa,cAAc,IAAIE,4BAAc;AAAA,IAChD,cAAc;AAAA,IACd;AAAA,IACA,OAAO;AAAA,EAAA,CACV;AAED,QAAM,UAAU;AAAA,IACZ;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,EAAA;AAGJ,wDACKC,QAAAA,WAAW,UAAX,EAAoB,OAAO,0DACvBC,kBAAA,MACGJ,iCAAA,cAAC,OAAA,EAAK,GAAG,YAAY,WAAsB,aAAU,QAAO,OACvD,QACL,CACJ,CACJ;AAER,CAAC;AASD,KAAK,OAAOK,QAAAA;AACZ,KAAK,UAAUC,QAAAA;AACf,KAAK,UAAUC,SAAAA;;"}

package/dist/components/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import { FocusScope } from '@react-aria/focus';\nimport cn from 'clsx';\nimport * as React from 'react';\n\nimport { useControlled } from '../../hooks/useControlled';\nimport type { Orientation } from '../../types';\n\nimport type { TabListProps } from './components/TabList';\nimport { TabList } from './components/TabList';\nimport type { TabContentProps } from './components/TabPanel';\nimport { TabPanel } from './components/TabPanel';\nimport type { TabTriggerProps } from './components/Trigger';\nimport { TabTrigger } from './components/Trigger';\nimport { TabContext } from './Context';\n\nexport type TabsProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> & {\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 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    const baseId = React.useId();\n\n    const [activeTabId, setActiveTabId] = useControlled({\n        defaultValue: defaultId,\n        onChange,\n        value: id,\n    });\n\n    const context = {\n        activeTabId,\n        baseId,\n        onChange: setActiveTabId,\n        orientation,\n    };\n\n    return (\n        <TabContext.Provider value={context}>\n            <FocusScope>\n                <div {...otherProps} className={className} data-taco=\"tabs\" ref={ref}>\n                    {children}\n                </div>\n            </FocusScope>\n        </TabContext.Provider>\n    );\n}) as 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\nTabs.List = TabList;\nTabs.Trigger = TabTrigger;\nTabs.Content = TabPanel;\n"],"names":["Tabs"],"mappings":";;;;;;;;AA0CO,MAAM,OAAO,MAAM,WAAW,SAASA,MAAK,OAAkB,KAAgC;AACjG,QAAM,EAAE,IAAI,WAAW,UAAU,UAAU,cAAc,cAAc,GAAG,WAAA,IAAe;AACzF,QAAM,YAAY;AAAA,IACd;AAAA,MACI,eAAe,gBAAgB;AAAA,IAAA;AAAA,IAEnC,MAAM;AAAA,EAAA;AAGV,QAAM,SAAS,MAAM,MAAA;AAErB,QAAM,CAAC,aAAa,cAAc,IAAI,cAAc;AAAA,IAChD,cAAc;AAAA,IACd;AAAA,IACA,OAAO;AAAA,EAAA,CACV;AAED,QAAM,UAAU;AAAA,IACZ;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,EAAA;AAGJ,6CACK,WAAW,UAAX,EAAoB,OAAO,+CACvB,YAAA,MACG,sBAAA,cAAC,OAAA,EAAK,GAAG,YAAY,WAAsB,aAAU,QAAO,OACvD,QACL,CACJ,CACJ;AAER,CAAC;AASD,KAAK,OAAO;AACZ,KAAK,UAAU;AACf,KAAK,UAAU;"}
+{"version":3,"file":"Tabs.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import { FocusScope } from '@react-aria/focus';\nimport cn from 'clsx';\nimport * as React from 'react';\n\nimport { useControlled } from '@/hooks/useControlled';\nimport type { Orientation } from '@/types';\n\nimport type { TabListProps } from './components/TabList';\nimport { TabList } from './components/TabList';\nimport type { TabContentProps } from './components/TabPanel';\nimport { TabPanel } from './components/TabPanel';\nimport type { TabTriggerProps } from './components/Trigger';\nimport { TabTrigger } from './components/Trigger';\nimport { TabContext } from './Context';\n\nexport type TabsProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> & {\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 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    const baseId = React.useId();\n\n    const [activeTabId, setActiveTabId] = useControlled({\n        defaultValue: defaultId,\n        onChange,\n        value: id,\n    });\n\n    const context = {\n        activeTabId,\n        baseId,\n        onChange: setActiveTabId,\n        orientation,\n    };\n\n    return (\n        <TabContext.Provider value={context}>\n            <FocusScope>\n                <div {...otherProps} className={className} data-taco=\"tabs\" ref={ref}>\n                    {children}\n                </div>\n            </FocusScope>\n        </TabContext.Provider>\n    );\n}) as 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\nTabs.List = TabList;\nTabs.Trigger = TabTrigger;\nTabs.Content = TabPanel;\n"],"names":["Tabs"],"mappings":";;;;;;;;AA0CO,MAAM,OAAO,MAAM,WAAW,SAASA,MAAK,OAAkB,KAAgC;AACjG,QAAM,EAAE,IAAI,WAAW,UAAU,UAAU,cAAc,cAAc,GAAG,WAAA,IAAe;AACzF,QAAM,YAAY;AAAA,IACd;AAAA,MACI,eAAe,gBAAgB;AAAA,IAAA;AAAA,IAEnC,MAAM;AAAA,EAAA;AAGV,QAAM,SAAS,MAAM,MAAA;AAErB,QAAM,CAAC,aAAa,cAAc,IAAI,cAAc;AAAA,IAChD,cAAc;AAAA,IACd;AAAA,IACA,OAAO;AAAA,EAAA,CACV;AAED,QAAM,UAAU;AAAA,IACZ;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,EAAA;AAGJ,6CACK,WAAW,UAAX,EAAoB,OAAO,+CACvB,YAAA,MACG,sBAAA,cAAC,OAAA,EAAK,GAAG,YAAY,WAAsB,aAAU,QAAO,OACvD,QACL,CACJ,CACJ;AAER,CAAC;AASD,KAAK,OAAO;AACZ,KAAK,UAAU;AACf,KAAK,UAAU;"}

package/dist/components/Tabs/components/TabList.cjs

@@ -3,9 +3,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const focus = require("@react-aria/focus");
 const cn = require("clsx");
 const React = require("react");
-const Button = require("../../LegacyComponents/Button/Button.cjs");
-const OverflowGroup = require("../../OverflowGroup/OverflowGroup.cjs");
 const Context = require("../Context.cjs");
+const OverflowGroup = require("../../OverflowGroup/OverflowGroup.cjs");
+const Button = require("../../LegacyComponents/Button/Button.cjs");
 const focusManagerOptions = {
   wrap: true,
   tabbable: false,

package/dist/components/Tabs/components/TabList.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TabList.cjs","sources":["../../../../src/components/Tabs/components/TabList.tsx"],"sourcesContent":["import { useFocusManager } from '@react-aria/focus';\nimport cn from 'clsx';\nimport React from 'react';\n\nimport { LegacyButton } from '../../LegacyComponents/Button/Button';\nimport { OverflowGroup } from '../../OverflowGroup/OverflowGroup';\nimport { TabContext } from '../Context';\n\nexport type TabListProps = React.HTMLAttributes<HTMLDivElement>;\n\nconst focusManagerOptions = {\n    wrap: true,\n    tabbable: false,\n    accept: (element: Element) => {\n        return element.getAttribute('role') === 'tab';\n    },\n};\n\nexport const TabList = React.forwardRef(function Tab(props: TabListProps, ref: React.Ref<HTMLDivElement>) {\n    const { children, ...otherProps } = props;\n    const className = cn(\n        'm-0 mb-4 flex flex-row border-gray-200 print:hidden',\n        'aria-orientation-horizontal:border-b',\n        'aria-orientation-vertical:m-0 aria-orientation-vertical:mr-4 aria-orientation-vertical:flex-col aria-orientation-vertical:border-r',\n        props.className\n    );\n\n    const context = React.useContext(TabContext);\n    const focusManager = useFocusManager();\n\n    const handleKeyDown = (event: React.KeyboardEvent) => {\n        if (context.orientation === 'horizontal') {\n            if (event.key === 'ArrowRight') {\n                event.preventDefault();\n                focusManager?.focusNext(focusManagerOptions);\n            }\n\n            if (event.key === 'ArrowLeft') {\n                event.preventDefault();\n                focusManager?.focusPrevious(focusManagerOptions);\n            }\n        } else if (context.orientation === 'vertical') {\n            if (event.key === 'ArrowUp') {\n                event.preventDefault();\n                focusManager?.focusPrevious(focusManagerOptions);\n            }\n\n            if (event.key === 'ArrowDown') {\n                event.preventDefault();\n                focusManager?.focusNext(focusManagerOptions);\n            }\n        }\n    };\n\n    return (\n        <div\n            {...otherProps}\n            aria-orientation={context?.orientation}\n            role=\"tablist\"\n            className={className}\n            ref={ref}\n            onKeyDown={handleKeyDown}>\n            <OverflowGroup\n                wrapChild\n                className='w-full [[aria-orientation=\"vertical\"]_&]:flex-col'\n                moreButton={(text: string) => <LegacyButton>{text}</LegacyButton>}>\n                {React.Children.toArray(children).filter(child => {\n                    if (React.isValidElement<{ hidden?: boolean }>(child)) {\n                        return !child.props.hidden;\n                    }\n\n                    return true;\n                })}\n            </OverflowGroup>\n        </div>\n    );\n});\n"],"names":["TabContext","useFocusManager","OverflowGroup","LegacyButton"],"mappings":";;;;;;;;AAUA,MAAM,sBAAsB;AAAA,EACxB,MAAM;AAAA,EACN,UAAU;AAAA,EACV,QAAQ,CAAC,YAAqB;AAC1B,WAAO,QAAQ,aAAa,MAAM,MAAM;AAAA,EAC5C;AACJ;AAEO,MAAM,UAAU,MAAM,WAAW,SAAS,IAAI,OAAqB,KAAgC;AACtG,QAAM,EAAE,UAAU,GAAG,WAAA,IAAe;AACpC,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,EAAA;AAGV,QAAM,UAAU,MAAM,WAAWA,kBAAU;AAC3C,QAAM,eAAeC,MAAAA,gBAAA;AAErB,QAAM,gBAAgB,CAAC,UAA+B;AAClD,QAAI,QAAQ,gBAAgB,cAAc;AACtC,UAAI,MAAM,QAAQ,cAAc;AAC5B,cAAM,eAAA;AACN,sBAAc,UAAU,mBAAmB;AAAA,MAC/C;AAEA,UAAI,MAAM,QAAQ,aAAa;AAC3B,cAAM,eAAA;AACN,sBAAc,cAAc,mBAAmB;AAAA,MACnD;AAAA,IACJ,WAAW,QAAQ,gBAAgB,YAAY;AAC3C,UAAI,MAAM,QAAQ,WAAW;AACzB,cAAM,eAAA;AACN,sBAAc,cAAc,mBAAmB;AAAA,MACnD;AAEA,UAAI,MAAM,QAAQ,aAAa;AAC3B,cAAM,eAAA;AACN,sBAAc,UAAU,mBAAmB;AAAA,MAC/C;AAAA,IACJ;AAAA,EACJ;AAEA,SACI,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,oBAAkB,SAAS;AAAA,MAC3B,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,WAAW;AAAA,IAAA;AAAA,IACX,sBAAA;AAAA,MAACC,cAAAA;AAAAA,MAAA;AAAA,QACG,WAAS;AAAA,QACT,WAAU;AAAA,QACV,YAAY,CAAC,SAAiB,sBAAA,cAACC,OAAAA,oBAAc,IAAK;AAAA,MAAA;AAAA,MACjD,MAAM,SAAS,QAAQ,QAAQ,EAAE,OAAO,CAAA,UAAS;AAC9C,YAAI,MAAM,eAAqC,KAAK,GAAG;AACnD,iBAAO,CAAC,MAAM,MAAM;AAAA,QACxB;AAEA,eAAO;AAAA,MACX,CAAC;AAAA,IAAA;AAAA,EACL;AAGZ,CAAC;;"}
+{"version":3,"file":"TabList.cjs","sources":["../../../../src/components/Tabs/components/TabList.tsx"],"sourcesContent":["import { useFocusManager } from '@react-aria/focus';\nimport cn from 'clsx';\nimport React from 'react';\n\nimport { LegacyButton, OverflowGroup } from '@/components';\n\nimport { TabContext } from '../Context';\n\nexport type TabListProps = React.HTMLAttributes<HTMLDivElement>;\n\nconst focusManagerOptions = {\n    wrap: true,\n    tabbable: false,\n    accept: (element: Element) => {\n        return element.getAttribute('role') === 'tab';\n    },\n};\n\nexport const TabList = React.forwardRef(function Tab(props: TabListProps, ref: React.Ref<HTMLDivElement>) {\n    const { children, ...otherProps } = props;\n    const className = cn(\n        'm-0 mb-4 flex flex-row border-gray-200 print:hidden',\n        'aria-orientation-horizontal:border-b',\n        'aria-orientation-vertical:m-0 aria-orientation-vertical:mr-4 aria-orientation-vertical:flex-col aria-orientation-vertical:border-r',\n        props.className\n    );\n\n    const context = React.useContext(TabContext);\n    const focusManager = useFocusManager();\n\n    const handleKeyDown = (event: React.KeyboardEvent) => {\n        if (context.orientation === 'horizontal') {\n            if (event.key === 'ArrowRight') {\n                event.preventDefault();\n                focusManager?.focusNext(focusManagerOptions);\n            }\n\n            if (event.key === 'ArrowLeft') {\n                event.preventDefault();\n                focusManager?.focusPrevious(focusManagerOptions);\n            }\n        } else if (context.orientation === 'vertical') {\n            if (event.key === 'ArrowUp') {\n                event.preventDefault();\n                focusManager?.focusPrevious(focusManagerOptions);\n            }\n\n            if (event.key === 'ArrowDown') {\n                event.preventDefault();\n                focusManager?.focusNext(focusManagerOptions);\n            }\n        }\n    };\n\n    return (\n        <div\n            {...otherProps}\n            aria-orientation={context?.orientation}\n            role=\"tablist\"\n            className={className}\n            ref={ref}\n            onKeyDown={handleKeyDown}>\n            <OverflowGroup\n                wrapChild\n                className='w-full [[aria-orientation=\"vertical\"]_&]:flex-col'\n                moreButton={(text: string) => <LegacyButton>{text}</LegacyButton>}>\n                {React.Children.toArray(children).filter(child => {\n                    if (React.isValidElement<{ hidden?: boolean }>(child)) {\n                        return !child.props.hidden;\n                    }\n\n                    return true;\n                })}\n            </OverflowGroup>\n        </div>\n    );\n});\n"],"names":["TabContext","useFocusManager","OverflowGroup","LegacyButton"],"mappings":";;;;;;;;AAUA,MAAM,sBAAsB;AAAA,EACxB,MAAM;AAAA,EACN,UAAU;AAAA,EACV,QAAQ,CAAC,YAAqB;AAC1B,WAAO,QAAQ,aAAa,MAAM,MAAM;AAAA,EAC5C;AACJ;AAEO,MAAM,UAAU,MAAM,WAAW,SAAS,IAAI,OAAqB,KAAgC;AACtG,QAAM,EAAE,UAAU,GAAG,WAAA,IAAe;AACpC,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,EAAA;AAGV,QAAM,UAAU,MAAM,WAAWA,kBAAU;AAC3C,QAAM,eAAeC,MAAAA,gBAAA;AAErB,QAAM,gBAAgB,CAAC,UAA+B;AAClD,QAAI,QAAQ,gBAAgB,cAAc;AACtC,UAAI,MAAM,QAAQ,cAAc;AAC5B,cAAM,eAAA;AACN,sBAAc,UAAU,mBAAmB;AAAA,MAC/C;AAEA,UAAI,MAAM,QAAQ,aAAa;AAC3B,cAAM,eAAA;AACN,sBAAc,cAAc,mBAAmB;AAAA,MACnD;AAAA,IACJ,WAAW,QAAQ,gBAAgB,YAAY;AAC3C,UAAI,MAAM,QAAQ,WAAW;AACzB,cAAM,eAAA;AACN,sBAAc,cAAc,mBAAmB;AAAA,MACnD;AAEA,UAAI,MAAM,QAAQ,aAAa;AAC3B,cAAM,eAAA;AACN,sBAAc,UAAU,mBAAmB;AAAA,MAC/C;AAAA,IACJ;AAAA,EACJ;AAEA,SACI,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,oBAAkB,SAAS;AAAA,MAC3B,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,WAAW;AAAA,IAAA;AAAA,IACX,sBAAA;AAAA,MAACC,cAAAA;AAAAA,MAAA;AAAA,QACG,WAAS;AAAA,QACT,WAAU;AAAA,QACV,YAAY,CAAC,SAAiB,sBAAA,cAACC,OAAAA,oBAAc,IAAK;AAAA,MAAA;AAAA,MACjD,MAAM,SAAS,QAAQ,QAAQ,EAAE,OAAO,CAAA,UAAS;AAC9C,YAAI,MAAM,eAAqC,KAAK,GAAG;AACnD,iBAAO,CAAC,MAAM,MAAM;AAAA,QACxB;AAEA,eAAO;AAAA,MACX,CAAC;AAAA,IAAA;AAAA,EACL;AAGZ,CAAC;;"}

package/dist/components/Tabs/components/TabList.js

@@ -1,9 +1,9 @@
 import { useFocusManager } from "@react-aria/focus";
 import cn from "clsx";
 import React__default from "react";
-import { LegacyButton } from "../../LegacyComponents/Button/Button.js";
-import { OverflowGroup } from "../../OverflowGroup/OverflowGroup.js";
 import { TabContext } from "../Context.js";
+import { OverflowGroup } from "../../OverflowGroup/OverflowGroup.js";
+import { LegacyButton } from "../../LegacyComponents/Button/Button.js";
 const focusManagerOptions = {
   wrap: true,
   tabbable: false,

package/dist/components/Tabs/components/TabList.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabList.js","sources":["../../../../src/components/Tabs/components/TabList.tsx"],"sourcesContent":["import { useFocusManager } from '@react-aria/focus';\nimport cn from 'clsx';\nimport React from 'react';\n\nimport { LegacyButton } from '../../LegacyComponents/Button/Button';\nimport { OverflowGroup } from '../../OverflowGroup/OverflowGroup';\nimport { TabContext } from '../Context';\n\nexport type TabListProps = React.HTMLAttributes<HTMLDivElement>;\n\nconst focusManagerOptions = {\n    wrap: true,\n    tabbable: false,\n    accept: (element: Element) => {\n        return element.getAttribute('role') === 'tab';\n    },\n};\n\nexport const TabList = React.forwardRef(function Tab(props: TabListProps, ref: React.Ref<HTMLDivElement>) {\n    const { children, ...otherProps } = props;\n    const className = cn(\n        'm-0 mb-4 flex flex-row border-gray-200 print:hidden',\n        'aria-orientation-horizontal:border-b',\n        'aria-orientation-vertical:m-0 aria-orientation-vertical:mr-4 aria-orientation-vertical:flex-col aria-orientation-vertical:border-r',\n        props.className\n    );\n\n    const context = React.useContext(TabContext);\n    const focusManager = useFocusManager();\n\n    const handleKeyDown = (event: React.KeyboardEvent) => {\n        if (context.orientation === 'horizontal') {\n            if (event.key === 'ArrowRight') {\n                event.preventDefault();\n                focusManager?.focusNext(focusManagerOptions);\n            }\n\n            if (event.key === 'ArrowLeft') {\n                event.preventDefault();\n                focusManager?.focusPrevious(focusManagerOptions);\n            }\n        } else if (context.orientation === 'vertical') {\n            if (event.key === 'ArrowUp') {\n                event.preventDefault();\n                focusManager?.focusPrevious(focusManagerOptions);\n            }\n\n            if (event.key === 'ArrowDown') {\n                event.preventDefault();\n                focusManager?.focusNext(focusManagerOptions);\n            }\n        }\n    };\n\n    return (\n        <div\n            {...otherProps}\n            aria-orientation={context?.orientation}\n            role=\"tablist\"\n            className={className}\n            ref={ref}\n            onKeyDown={handleKeyDown}>\n            <OverflowGroup\n                wrapChild\n                className='w-full [[aria-orientation=\"vertical\"]_&]:flex-col'\n                moreButton={(text: string) => <LegacyButton>{text}</LegacyButton>}>\n                {React.Children.toArray(children).filter(child => {\n                    if (React.isValidElement<{ hidden?: boolean }>(child)) {\n                        return !child.props.hidden;\n                    }\n\n                    return true;\n                })}\n            </OverflowGroup>\n        </div>\n    );\n});\n"],"names":["React"],"mappings":";;;;;;AAUA,MAAM,sBAAsB;AAAA,EACxB,MAAM;AAAA,EACN,UAAU;AAAA,EACV,QAAQ,CAAC,YAAqB;AAC1B,WAAO,QAAQ,aAAa,MAAM,MAAM;AAAA,EAC5C;AACJ;AAEO,MAAM,UAAUA,eAAM,WAAW,SAAS,IAAI,OAAqB,KAAgC;AACtG,QAAM,EAAE,UAAU,GAAG,WAAA,IAAe;AACpC,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,EAAA;AAGV,QAAM,UAAUA,eAAM,WAAW,UAAU;AAC3C,QAAM,eAAe,gBAAA;AAErB,QAAM,gBAAgB,CAAC,UAA+B;AAClD,QAAI,QAAQ,gBAAgB,cAAc;AACtC,UAAI,MAAM,QAAQ,cAAc;AAC5B,cAAM,eAAA;AACN,sBAAc,UAAU,mBAAmB;AAAA,MAC/C;AAEA,UAAI,MAAM,QAAQ,aAAa;AAC3B,cAAM,eAAA;AACN,sBAAc,cAAc,mBAAmB;AAAA,MACnD;AAAA,IACJ,WAAW,QAAQ,gBAAgB,YAAY;AAC3C,UAAI,MAAM,QAAQ,WAAW;AACzB,cAAM,eAAA;AACN,sBAAc,cAAc,mBAAmB;AAAA,MACnD;AAEA,UAAI,MAAM,QAAQ,aAAa;AAC3B,cAAM,eAAA;AACN,sBAAc,UAAU,mBAAmB;AAAA,MAC/C;AAAA,IACJ;AAAA,EACJ;AAEA,SACIA,+BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,oBAAkB,SAAS;AAAA,MAC3B,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,WAAW;AAAA,IAAA;AAAA,IACXA,+BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAS;AAAA,QACT,WAAU;AAAA,QACV,YAAY,CAAC,SAAiBA,+BAAA,cAAC,oBAAc,IAAK;AAAA,MAAA;AAAA,MACjDA,eAAM,SAAS,QAAQ,QAAQ,EAAE,OAAO,CAAA,UAAS;AAC9C,YAAIA,eAAM,eAAqC,KAAK,GAAG;AACnD,iBAAO,CAAC,MAAM,MAAM;AAAA,QACxB;AAEA,eAAO;AAAA,MACX,CAAC;AAAA,IAAA;AAAA,EACL;AAGZ,CAAC;"}
+{"version":3,"file":"TabList.js","sources":["../../../../src/components/Tabs/components/TabList.tsx"],"sourcesContent":["import { useFocusManager } from '@react-aria/focus';\nimport cn from 'clsx';\nimport React from 'react';\n\nimport { LegacyButton, OverflowGroup } from '@/components';\n\nimport { TabContext } from '../Context';\n\nexport type TabListProps = React.HTMLAttributes<HTMLDivElement>;\n\nconst focusManagerOptions = {\n    wrap: true,\n    tabbable: false,\n    accept: (element: Element) => {\n        return element.getAttribute('role') === 'tab';\n    },\n};\n\nexport const TabList = React.forwardRef(function Tab(props: TabListProps, ref: React.Ref<HTMLDivElement>) {\n    const { children, ...otherProps } = props;\n    const className = cn(\n        'm-0 mb-4 flex flex-row border-gray-200 print:hidden',\n        'aria-orientation-horizontal:border-b',\n        'aria-orientation-vertical:m-0 aria-orientation-vertical:mr-4 aria-orientation-vertical:flex-col aria-orientation-vertical:border-r',\n        props.className\n    );\n\n    const context = React.useContext(TabContext);\n    const focusManager = useFocusManager();\n\n    const handleKeyDown = (event: React.KeyboardEvent) => {\n        if (context.orientation === 'horizontal') {\n            if (event.key === 'ArrowRight') {\n                event.preventDefault();\n                focusManager?.focusNext(focusManagerOptions);\n            }\n\n            if (event.key === 'ArrowLeft') {\n                event.preventDefault();\n                focusManager?.focusPrevious(focusManagerOptions);\n            }\n        } else if (context.orientation === 'vertical') {\n            if (event.key === 'ArrowUp') {\n                event.preventDefault();\n                focusManager?.focusPrevious(focusManagerOptions);\n            }\n\n            if (event.key === 'ArrowDown') {\n                event.preventDefault();\n                focusManager?.focusNext(focusManagerOptions);\n            }\n        }\n    };\n\n    return (\n        <div\n            {...otherProps}\n            aria-orientation={context?.orientation}\n            role=\"tablist\"\n            className={className}\n            ref={ref}\n            onKeyDown={handleKeyDown}>\n            <OverflowGroup\n                wrapChild\n                className='w-full [[aria-orientation=\"vertical\"]_&]:flex-col'\n                moreButton={(text: string) => <LegacyButton>{text}</LegacyButton>}>\n                {React.Children.toArray(children).filter(child => {\n                    if (React.isValidElement<{ hidden?: boolean }>(child)) {\n                        return !child.props.hidden;\n                    }\n\n                    return true;\n                })}\n            </OverflowGroup>\n        </div>\n    );\n});\n"],"names":["React"],"mappings":";;;;;;AAUA,MAAM,sBAAsB;AAAA,EACxB,MAAM;AAAA,EACN,UAAU;AAAA,EACV,QAAQ,CAAC,YAAqB;AAC1B,WAAO,QAAQ,aAAa,MAAM,MAAM;AAAA,EAC5C;AACJ;AAEO,MAAM,UAAUA,eAAM,WAAW,SAAS,IAAI,OAAqB,KAAgC;AACtG,QAAM,EAAE,UAAU,GAAG,WAAA,IAAe;AACpC,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,EAAA;AAGV,QAAM,UAAUA,eAAM,WAAW,UAAU;AAC3C,QAAM,eAAe,gBAAA;AAErB,QAAM,gBAAgB,CAAC,UAA+B;AAClD,QAAI,QAAQ,gBAAgB,cAAc;AACtC,UAAI,MAAM,QAAQ,cAAc;AAC5B,cAAM,eAAA;AACN,sBAAc,UAAU,mBAAmB;AAAA,MAC/C;AAEA,UAAI,MAAM,QAAQ,aAAa;AAC3B,cAAM,eAAA;AACN,sBAAc,cAAc,mBAAmB;AAAA,MACnD;AAAA,IACJ,WAAW,QAAQ,gBAAgB,YAAY;AAC3C,UAAI,MAAM,QAAQ,WAAW;AACzB,cAAM,eAAA;AACN,sBAAc,cAAc,mBAAmB;AAAA,MACnD;AAEA,UAAI,MAAM,QAAQ,aAAa;AAC3B,cAAM,eAAA;AACN,sBAAc,UAAU,mBAAmB;AAAA,MAC/C;AAAA,IACJ;AAAA,EACJ;AAEA,SACIA,+BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,oBAAkB,SAAS;AAAA,MAC3B,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,WAAW;AAAA,IAAA;AAAA,IACXA,+BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAS;AAAA,QACT,WAAU;AAAA,QACV,YAAY,CAAC,SAAiBA,+BAAA,cAAC,oBAAc,IAAK;AAAA,MAAA;AAAA,MACjDA,eAAM,SAAS,QAAQ,QAAQ,EAAE,OAAO,CAAA,UAAS;AAC9C,YAAIA,eAAM,eAAqC,KAAK,GAAG;AACnD,iBAAO,CAAC,MAAM,MAAM;AAAA,QACxB;AAEA,eAAO;AAAA,MACX,CAAC;AAAA,IAAA;AAAA,EACL;AAGZ,CAAC;"}

package/dist/components/Tabs/components/Trigger.cjs

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const cn = require("clsx");
 const React = require("react");
-const useMergedRef = require("../../../hooks/useMergedRef.cjs");
 const util = require("../../LegacyComponents/Button/util.cjs");
-const Tooltip = require("../../Tooltip/Tooltip.cjs");
+const useMergedRef = require("../../../hooks/useMergedRef.cjs");
 const Context = require("../Context.cjs");
 const utils = require("./utils.cjs");
+const Tooltip = require("../../Tooltip/Tooltip.cjs");
 const TabTrigger = React.forwardRef(function Tab(props, forwardedRef) {
   const { children, id, disabled, tooltip, ...otherProps } = props;
   const context = React.useContext(Context.TabContext);
@@ -45,7 +45,7 @@ const TabTrigger = React.forwardRef(function Tab(props, forwardedRef) {
       disabled,
       onFocus: () => context.onChange(id),
       ref,
-      tabIndex: context?.activeTabId !== void 0 ? id === context?.activeTabId ? 0 : -1 : 0
+      tabIndex: context?.activeTabId === void 0 ? 0 : id === context?.activeTabId ? 0 : -1
     },
     /* @__PURE__ */ React.createElement("span", { className: buttonClassName }, children),
     /* @__PURE__ */ React.createElement("span", { className: activeClassName })

package/dist/components/Tabs/components/Trigger.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Trigger.cjs","sources":["../../../../src/components/Tabs/components/Trigger.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport { useMergedRef } from '../../../hooks/useMergedRef';\nimport { getButtonClasses } from '../../LegacyComponents/Button/util';\nimport { Tooltip } from '../../Tooltip/Tooltip';\nimport { TabContext } from '../Context';\n\nimport { createPanelId, createTriggerId } from './utils';\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    /** A tooltip to show when hovering over the trigger */\n    tooltip?: string | React.JSX.Element;\n};\n\nexport const TabTrigger = React.forwardRef(function Tab(props: TabTriggerProps, forwardedRef: React.Ref<HTMLButtonElement>) {\n    const { children, id, disabled, tooltip, ...otherProps } = props;\n    const context = React.useContext(TabContext);\n    const ref = useMergedRef<HTMLButtonElement>(forwardedRef);\n\n    const triggerClassName = cn(\n        props.className,\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        // vertical\n        '[[aria-orientation=\"vertical\"]_&]:pr-1'\n    );\n    const buttonClassName = cn(\n        getButtonClasses(),\n        'pointer-events-none rounded px-3 group-focus-visible:yt-focus-inset group-enabled:group-hover:bg-gray-100 group-enabled:group-hover:text-black'\n    );\n    const activeClassName = cn(\n        'pointer-events-none absolute z-[1] hidden bg-blue-500 group-aria-selected:flex',\n        // horizontal\n        '[[aria-orientation=\"horizontal\"]_&]:bottom-0 [[aria-orientation=\"horizontal\"]_&]:left-0 [[aria-orientation=\"horizontal\"]_&]:right-0 [[aria-orientation=\"horizontal\"]_&]:h-0.5 [[aria-orientation=\"horizontal\"]_&]:rounded-t-sm',\n        // vertical\n        '[[aria-orientation=\"vertical\"]_&]:bottom-0 [[aria-orientation=\"vertical\"]_&]:right-0 [[aria-orientation=\"vertical\"]_&]:top-0 [[aria-orientation=\"vertical\"]_&]:w-0.5 [[aria-orientation=\"vertical\"]_&]:rounded-l-sm'\n    );\n\n    const triggerId = createTriggerId(context.baseId, id);\n    const panelId = createPanelId(context.baseId, id);\n\n    const trigger = (\n        <button\n            {...otherProps}\n            aria-selected={id === context?.activeTabId}\n            aria-controls={panelId}\n            id={triggerId}\n            role=\"tab\"\n            type=\"button\"\n            className={triggerClassName}\n            disabled={disabled}\n            onFocus={() => context.onChange(id)}\n            ref={ref}\n            tabIndex={context?.activeTabId !== undefined ? (id === context?.activeTabId ? 0 : -1) : 0}>\n            <span className={buttonClassName}>{children}</span>\n            <span className={activeClassName} />\n        </button>\n    );\n\n    if (tooltip) {\n        return <Tooltip title={tooltip}>{trigger}</Tooltip>;\n    }\n\n    return trigger;\n});\n"],"names":["TabContext","useMergedRef","getButtonClasses","createTriggerId","createPanelId","Tooltip"],"mappings":";;;;;;;;;AAuBO,MAAM,aAAa,MAAM,WAAW,SAAS,IAAI,OAAwB,cAA4C;AACxH,QAAM,EAAE,UAAU,IAAI,UAAU,SAAS,GAAG,eAAe;AAC3D,QAAM,UAAU,MAAM,WAAWA,kBAAU;AAC3C,QAAM,MAAMC,aAAAA,aAAgC,YAAY;AAExD,QAAM,mBAAmB;AAAA,IACrB,MAAM;AAAA,IACN;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,EAAA;AAEJ,QAAM,kBAAkB;AAAA,IACpBC,sBAAA;AAAA,IACA;AAAA,EAAA;AAEJ,QAAM,kBAAkB;AAAA,IACpB;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,EAAA;AAGJ,QAAM,YAAYC,MAAAA,gBAAgB,QAAQ,QAAQ,EAAE;AACpD,QAAM,UAAUC,MAAAA,cAAc,QAAQ,QAAQ,EAAE;AAEhD,QAAM,UACF,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,iBAAe,OAAO,SAAS;AAAA,MAC/B,iBAAe;AAAA,MACf,IAAI;AAAA,MACJ,MAAK;AAAA,MACL,MAAK;AAAA,MACL,WAAW;AAAA,MACX;AAAA,MACA,SAAS,MAAM,QAAQ,SAAS,EAAE;AAAA,MAClC;AAAA,MACA,UAAU,SAAS,gBAAgB,SAAa,OAAO,SAAS,cAAc,IAAI,KAAM;AAAA,IAAA;AAAA,IACxF,sBAAA,cAAC,QAAA,EAAK,WAAW,gBAAA,GAAkB,QAAS;AAAA,IAC5C,sBAAA,cAAC,QAAA,EAAK,WAAW,gBAAA,CAAiB;AAAA,EAAA;AAI1C,MAAI,SAAS;AACT,WAAO,sBAAA,cAACC,QAAAA,SAAA,EAAQ,OAAO,QAAA,GAAU,OAAQ;AAAA,EAC7C;AAEA,SAAO;AACX,CAAC;;"}
+{"version":3,"file":"Trigger.cjs","sources":["../../../../src/components/Tabs/components/Trigger.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport { Tooltip } from '@/components';\nimport { getButtonClasses } from '@/components/LegacyComponents/Button/util';\nimport { useMergedRef } from '@/hooks/useMergedRef';\n\nimport { TabContext } from '../Context';\n\nimport { createPanelId, createTriggerId } from './utils';\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    /** A tooltip to show when hovering over the trigger */\n    tooltip?: string | React.JSX.Element;\n};\n\nexport const TabTrigger = React.forwardRef(function Tab(props: TabTriggerProps, forwardedRef: React.Ref<HTMLButtonElement>) {\n    const { children, id, disabled, tooltip, ...otherProps } = props;\n    const context = React.useContext(TabContext);\n    const ref = useMergedRef<HTMLButtonElement>(forwardedRef);\n\n    const triggerClassName = cn(\n        props.className,\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        // vertical\n        '[[aria-orientation=\"vertical\"]_&]:pr-1'\n    );\n    const buttonClassName = cn(\n        getButtonClasses(),\n        'pointer-events-none rounded px-3 group-focus-visible:yt-focus-inset group-enabled:group-hover:bg-gray-100 group-enabled:group-hover:text-black'\n    );\n    const activeClassName = cn(\n        'pointer-events-none absolute z-[1] hidden bg-blue-500 group-aria-selected:flex',\n        // horizontal\n        '[[aria-orientation=\"horizontal\"]_&]:bottom-0 [[aria-orientation=\"horizontal\"]_&]:left-0 [[aria-orientation=\"horizontal\"]_&]:right-0 [[aria-orientation=\"horizontal\"]_&]:h-0.5 [[aria-orientation=\"horizontal\"]_&]:rounded-t-sm',\n        // vertical\n        '[[aria-orientation=\"vertical\"]_&]:bottom-0 [[aria-orientation=\"vertical\"]_&]:right-0 [[aria-orientation=\"vertical\"]_&]:top-0 [[aria-orientation=\"vertical\"]_&]:w-0.5 [[aria-orientation=\"vertical\"]_&]:rounded-l-sm'\n    );\n\n    const triggerId = createTriggerId(context.baseId, id);\n    const panelId = createPanelId(context.baseId, id);\n\n    const trigger = (\n        <button\n            {...otherProps}\n            aria-selected={id === context?.activeTabId}\n            aria-controls={panelId}\n            id={triggerId}\n            role=\"tab\"\n            type=\"button\"\n            className={triggerClassName}\n            disabled={disabled}\n            onFocus={() => context.onChange(id)}\n            ref={ref}\n            tabIndex={context?.activeTabId === undefined ? 0 : id === context?.activeTabId ? 0 : -1}>\n            <span className={buttonClassName}>{children}</span>\n            <span className={activeClassName} />\n        </button>\n    );\n\n    if (tooltip) {\n        return <Tooltip title={tooltip}>{trigger}</Tooltip>;\n    }\n\n    return trigger;\n});\n"],"names":["TabContext","useMergedRef","getButtonClasses","createTriggerId","createPanelId","Tooltip"],"mappings":";;;;;;;;;AAwBO,MAAM,aAAa,MAAM,WAAW,SAAS,IAAI,OAAwB,cAA4C;AACxH,QAAM,EAAE,UAAU,IAAI,UAAU,SAAS,GAAG,eAAe;AAC3D,QAAM,UAAU,MAAM,WAAWA,kBAAU;AAC3C,QAAM,MAAMC,aAAAA,aAAgC,YAAY;AAExD,QAAM,mBAAmB;AAAA,IACrB,MAAM;AAAA,IACN;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,EAAA;AAEJ,QAAM,kBAAkB;AAAA,IACpBC,sBAAA;AAAA,IACA;AAAA,EAAA;AAEJ,QAAM,kBAAkB;AAAA,IACpB;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,EAAA;AAGJ,QAAM,YAAYC,MAAAA,gBAAgB,QAAQ,QAAQ,EAAE;AACpD,QAAM,UAAUC,MAAAA,cAAc,QAAQ,QAAQ,EAAE;AAEhD,QAAM,UACF,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,iBAAe,OAAO,SAAS;AAAA,MAC/B,iBAAe;AAAA,MACf,IAAI;AAAA,MACJ,MAAK;AAAA,MACL,MAAK;AAAA,MACL,WAAW;AAAA,MACX;AAAA,MACA,SAAS,MAAM,QAAQ,SAAS,EAAE;AAAA,MAClC;AAAA,MACA,UAAU,SAAS,gBAAgB,SAAY,IAAI,OAAO,SAAS,cAAc,IAAI;AAAA,IAAA;AAAA,IACrF,sBAAA,cAAC,QAAA,EAAK,WAAW,gBAAA,GAAkB,QAAS;AAAA,IAC5C,sBAAA,cAAC,QAAA,EAAK,WAAW,gBAAA,CAAiB;AAAA,EAAA;AAI1C,MAAI,SAAS;AACT,WAAO,sBAAA,cAACC,QAAAA,SAAA,EAAQ,OAAO,QAAA,GAAU,OAAQ;AAAA,EAC7C;AAEA,SAAO;AACX,CAAC;;"}

package/dist/components/Tabs/components/Trigger.js

@@ -1,10 +1,10 @@
 import cn from "clsx";
 import React__default from "react";
-import { useMergedRef } from "../../../hooks/useMergedRef.js";
 import { getButtonClasses } from "../../LegacyComponents/Button/util.js";
-import { Tooltip } from "../../Tooltip/Tooltip.js";
+import { useMergedRef } from "../../../hooks/useMergedRef.js";
 import { TabContext } from "../Context.js";
 import { createTriggerId, createPanelId } from "./utils.js";
+import { Tooltip } from "../../Tooltip/Tooltip.js";
 const TabTrigger = React__default.forwardRef(function Tab(props, forwardedRef) {
   const { children, id, disabled, tooltip, ...otherProps } = props;
   const context = React__default.useContext(TabContext);
@@ -43,7 +43,7 @@ const TabTrigger = React__default.forwardRef(function Tab(props, forwardedRef) {
       disabled,
       onFocus: () => context.onChange(id),
       ref,
-      tabIndex: context?.activeTabId !== void 0 ? id === context?.activeTabId ? 0 : -1 : 0
+      tabIndex: context?.activeTabId === void 0 ? 0 : id === context?.activeTabId ? 0 : -1
     },
     /* @__PURE__ */ React__default.createElement("span", { className: buttonClassName }, children),
     /* @__PURE__ */ React__default.createElement("span", { className: activeClassName })

package/dist/components/Tabs/components/Trigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"Trigger.js","sources":["../../../../src/components/Tabs/components/Trigger.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport { useMergedRef } from '../../../hooks/useMergedRef';\nimport { getButtonClasses } from '../../LegacyComponents/Button/util';\nimport { Tooltip } from '../../Tooltip/Tooltip';\nimport { TabContext } from '../Context';\n\nimport { createPanelId, createTriggerId } from './utils';\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    /** A tooltip to show when hovering over the trigger */\n    tooltip?: string | React.JSX.Element;\n};\n\nexport const TabTrigger = React.forwardRef(function Tab(props: TabTriggerProps, forwardedRef: React.Ref<HTMLButtonElement>) {\n    const { children, id, disabled, tooltip, ...otherProps } = props;\n    const context = React.useContext(TabContext);\n    const ref = useMergedRef<HTMLButtonElement>(forwardedRef);\n\n    const triggerClassName = cn(\n        props.className,\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        // vertical\n        '[[aria-orientation=\"vertical\"]_&]:pr-1'\n    );\n    const buttonClassName = cn(\n        getButtonClasses(),\n        'pointer-events-none rounded px-3 group-focus-visible:yt-focus-inset group-enabled:group-hover:bg-gray-100 group-enabled:group-hover:text-black'\n    );\n    const activeClassName = cn(\n        'pointer-events-none absolute z-[1] hidden bg-blue-500 group-aria-selected:flex',\n        // horizontal\n        '[[aria-orientation=\"horizontal\"]_&]:bottom-0 [[aria-orientation=\"horizontal\"]_&]:left-0 [[aria-orientation=\"horizontal\"]_&]:right-0 [[aria-orientation=\"horizontal\"]_&]:h-0.5 [[aria-orientation=\"horizontal\"]_&]:rounded-t-sm',\n        // vertical\n        '[[aria-orientation=\"vertical\"]_&]:bottom-0 [[aria-orientation=\"vertical\"]_&]:right-0 [[aria-orientation=\"vertical\"]_&]:top-0 [[aria-orientation=\"vertical\"]_&]:w-0.5 [[aria-orientation=\"vertical\"]_&]:rounded-l-sm'\n    );\n\n    const triggerId = createTriggerId(context.baseId, id);\n    const panelId = createPanelId(context.baseId, id);\n\n    const trigger = (\n        <button\n            {...otherProps}\n            aria-selected={id === context?.activeTabId}\n            aria-controls={panelId}\n            id={triggerId}\n            role=\"tab\"\n            type=\"button\"\n            className={triggerClassName}\n            disabled={disabled}\n            onFocus={() => context.onChange(id)}\n            ref={ref}\n            tabIndex={context?.activeTabId !== undefined ? (id === context?.activeTabId ? 0 : -1) : 0}>\n            <span className={buttonClassName}>{children}</span>\n            <span className={activeClassName} />\n        </button>\n    );\n\n    if (tooltip) {\n        return <Tooltip title={tooltip}>{trigger}</Tooltip>;\n    }\n\n    return trigger;\n});\n"],"names":["React"],"mappings":";;;;;;;AAuBO,MAAM,aAAaA,eAAM,WAAW,SAAS,IAAI,OAAwB,cAA4C;AACxH,QAAM,EAAE,UAAU,IAAI,UAAU,SAAS,GAAG,eAAe;AAC3D,QAAM,UAAUA,eAAM,WAAW,UAAU;AAC3C,QAAM,MAAM,aAAgC,YAAY;AAExD,QAAM,mBAAmB;AAAA,IACrB,MAAM;AAAA,IACN;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,EAAA;AAEJ,QAAM,kBAAkB;AAAA,IACpB,iBAAA;AAAA,IACA;AAAA,EAAA;AAEJ,QAAM,kBAAkB;AAAA,IACpB;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,EAAA;AAGJ,QAAM,YAAY,gBAAgB,QAAQ,QAAQ,EAAE;AACpD,QAAM,UAAU,cAAc,QAAQ,QAAQ,EAAE;AAEhD,QAAM,UACFA,+BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,iBAAe,OAAO,SAAS;AAAA,MAC/B,iBAAe;AAAA,MACf,IAAI;AAAA,MACJ,MAAK;AAAA,MACL,MAAK;AAAA,MACL,WAAW;AAAA,MACX;AAAA,MACA,SAAS,MAAM,QAAQ,SAAS,EAAE;AAAA,MAClC;AAAA,MACA,UAAU,SAAS,gBAAgB,SAAa,OAAO,SAAS,cAAc,IAAI,KAAM;AAAA,IAAA;AAAA,IACxFA,+BAAA,cAAC,QAAA,EAAK,WAAW,gBAAA,GAAkB,QAAS;AAAA,IAC5CA,+BAAA,cAAC,QAAA,EAAK,WAAW,gBAAA,CAAiB;AAAA,EAAA;AAI1C,MAAI,SAAS;AACT,WAAOA,+BAAA,cAAC,SAAA,EAAQ,OAAO,QAAA,GAAU,OAAQ;AAAA,EAC7C;AAEA,SAAO;AACX,CAAC;"}
+{"version":3,"file":"Trigger.js","sources":["../../../../src/components/Tabs/components/Trigger.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport { Tooltip } from '@/components';\nimport { getButtonClasses } from '@/components/LegacyComponents/Button/util';\nimport { useMergedRef } from '@/hooks/useMergedRef';\n\nimport { TabContext } from '../Context';\n\nimport { createPanelId, createTriggerId } from './utils';\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    /** A tooltip to show when hovering over the trigger */\n    tooltip?: string | React.JSX.Element;\n};\n\nexport const TabTrigger = React.forwardRef(function Tab(props: TabTriggerProps, forwardedRef: React.Ref<HTMLButtonElement>) {\n    const { children, id, disabled, tooltip, ...otherProps } = props;\n    const context = React.useContext(TabContext);\n    const ref = useMergedRef<HTMLButtonElement>(forwardedRef);\n\n    const triggerClassName = cn(\n        props.className,\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        // vertical\n        '[[aria-orientation=\"vertical\"]_&]:pr-1'\n    );\n    const buttonClassName = cn(\n        getButtonClasses(),\n        'pointer-events-none rounded px-3 group-focus-visible:yt-focus-inset group-enabled:group-hover:bg-gray-100 group-enabled:group-hover:text-black'\n    );\n    const activeClassName = cn(\n        'pointer-events-none absolute z-[1] hidden bg-blue-500 group-aria-selected:flex',\n        // horizontal\n        '[[aria-orientation=\"horizontal\"]_&]:bottom-0 [[aria-orientation=\"horizontal\"]_&]:left-0 [[aria-orientation=\"horizontal\"]_&]:right-0 [[aria-orientation=\"horizontal\"]_&]:h-0.5 [[aria-orientation=\"horizontal\"]_&]:rounded-t-sm',\n        // vertical\n        '[[aria-orientation=\"vertical\"]_&]:bottom-0 [[aria-orientation=\"vertical\"]_&]:right-0 [[aria-orientation=\"vertical\"]_&]:top-0 [[aria-orientation=\"vertical\"]_&]:w-0.5 [[aria-orientation=\"vertical\"]_&]:rounded-l-sm'\n    );\n\n    const triggerId = createTriggerId(context.baseId, id);\n    const panelId = createPanelId(context.baseId, id);\n\n    const trigger = (\n        <button\n            {...otherProps}\n            aria-selected={id === context?.activeTabId}\n            aria-controls={panelId}\n            id={triggerId}\n            role=\"tab\"\n            type=\"button\"\n            className={triggerClassName}\n            disabled={disabled}\n            onFocus={() => context.onChange(id)}\n            ref={ref}\n            tabIndex={context?.activeTabId === undefined ? 0 : id === context?.activeTabId ? 0 : -1}>\n            <span className={buttonClassName}>{children}</span>\n            <span className={activeClassName} />\n        </button>\n    );\n\n    if (tooltip) {\n        return <Tooltip title={tooltip}>{trigger}</Tooltip>;\n    }\n\n    return trigger;\n});\n"],"names":["React"],"mappings":";;;;;;;AAwBO,MAAM,aAAaA,eAAM,WAAW,SAAS,IAAI,OAAwB,cAA4C;AACxH,QAAM,EAAE,UAAU,IAAI,UAAU,SAAS,GAAG,eAAe;AAC3D,QAAM,UAAUA,eAAM,WAAW,UAAU;AAC3C,QAAM,MAAM,aAAgC,YAAY;AAExD,QAAM,mBAAmB;AAAA,IACrB,MAAM;AAAA,IACN;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,EAAA;AAEJ,QAAM,kBAAkB;AAAA,IACpB,iBAAA;AAAA,IACA;AAAA,EAAA;AAEJ,QAAM,kBAAkB;AAAA,IACpB;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,EAAA;AAGJ,QAAM,YAAY,gBAAgB,QAAQ,QAAQ,EAAE;AACpD,QAAM,UAAU,cAAc,QAAQ,QAAQ,EAAE;AAEhD,QAAM,UACFA,+BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,iBAAe,OAAO,SAAS;AAAA,MAC/B,iBAAe;AAAA,MACf,IAAI;AAAA,MACJ,MAAK;AAAA,MACL,MAAK;AAAA,MACL,WAAW;AAAA,MACX;AAAA,MACA,SAAS,MAAM,QAAQ,SAAS,EAAE;AAAA,MAClC;AAAA,MACA,UAAU,SAAS,gBAAgB,SAAY,IAAI,OAAO,SAAS,cAAc,IAAI;AAAA,IAAA;AAAA,IACrFA,+BAAA,cAAC,QAAA,EAAK,WAAW,gBAAA,GAAkB,QAAS;AAAA,IAC5CA,+BAAA,cAAC,QAAA,EAAK,WAAW,gBAAA,CAAiB;AAAA,EAAA;AAI1C,MAAI,SAAS;AACT,WAAOA,+BAAA,cAAC,SAAA,EAAQ,OAAO,QAAA,GAAU,OAAQ;AAAA,EAC7C;AAEA,SAAO;AACX,CAAC;"}

package/dist/components/Tag/Tag.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.cjs","sources":["../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport type { Color } from '../../types';\nimport { SUBTLE_COLOR_SHADE_CLASSNAME } from '../../utils/tailwind';\nimport type { IconName, IconProps } from '../Icon/Icon';\nimport { Icon } from '../Icon/Icon';\n\nexport type TagProps = Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> & {\n    children: string;\n    color?: Color;\n    disabled?: boolean;\n    icon?: React.ReactElement<IconProps> | IconName;\n    readOnly?: boolean;\n    onDelete?: (event: React.MouseEvent<SVGSVGElement>) => void;\n};\n\nexport const Tag = React.forwardRef<HTMLSpanElement, TagProps>((props, ref) => {\n    const { children, color, disabled, icon, readOnly, onDelete, ...otherProps } = props;\n    const textRef = React.useRef<HTMLDivElement>(null);\n\n    const className = cn(\n        'inline-flex h-6 cursor-default items-center rounded',\n        {\n            'opacity-50': disabled,\n            'hover:bg-opacity-100': !disabled,\n            'cursor-pointer': !!otherProps.onClick,\n            'pointer-events-none': disabled || readOnly,\n        },\n        // NB: not a `color = 'grey'` prop default — that would render `data-taco-color=\"grey\"` on colorless\n        // tags where the attribute is currently absent. Worth promoting in the next major.\n        SUBTLE_COLOR_SHADE_CLASSNAME[color ?? 'grey'],\n        props.className\n    );\n\n    return (\n        <span {...otherProps} className={className} ref={ref} data-taco=\"tag\" data-taco-color={color}>\n            <span className=\"flex items-center truncate px-2\" ref={textRef}>\n                {icon ? (\n                    typeof icon === 'string' ? (\n                        <Icon name={icon} className=\"-ml-1 mr-1 !h-5 !w-5\" />\n                    ) : (\n                        React.cloneElement(icon, {\n                            className: cn(icon.props.className, '-ml-1 mr-1'),\n                        })\n                    )\n                ) : null}\n                <span className=\"truncate\">{children}</span>\n            </span>\n            {onDelete ? (\n                <Icon\n                    name=\"close\"\n                    onClick={onDelete}\n                    className=\"-ml-1.5 !h-6 !w-5 flex-shrink-0 cursor-pointer rounded-r p-0.5 hover:bg-black/5\"\n                />\n            ) : null}\n        </span>\n    );\n});\n"],"names":["SUBTLE_COLOR_SHADE_CLASSNAME","Icon"],"mappings":";;;;;;AAiBO,MAAM,MAAM,MAAM,WAAsC,CAAC,OAAO,QAAQ;AAC3E,QAAM,EAAE,UAAU,OAAO,UAAU,MAAM,UAAU,UAAU,GAAG,WAAA,IAAe;AAC/E,QAAM,UAAU,MAAM,OAAuB,IAAI;AAEjD,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,cAAc;AAAA,MACd,wBAAwB,CAAC;AAAA,MACzB,kBAAkB,CAAC,CAAC,WAAW;AAAA,MAC/B,uBAAuB,YAAY;AAAA,IAAA;AAAA;AAAA;AAAA,IAIvCA,SAAAA,6BAA6B,SAAS,MAAM;AAAA,IAC5C,MAAM;AAAA,EAAA;AAGV,SACI,sBAAA,cAAC,QAAA,EAAM,GAAG,YAAY,WAAsB,KAAU,aAAU,OAAM,mBAAiB,SACnF,sBAAA,cAAC,QAAA,EAAK,WAAU,mCAAkC,KAAK,QAAA,GAClD,OACG,OAAO,SAAS,WACZ,sBAAA,cAACC,KAAAA,MAAA,EAAK,MAAM,MAAM,WAAU,uBAAA,CAAuB,IAEnD,MAAM,aAAa,MAAM;AAAA,IACrB,WAAW,GAAG,KAAK,MAAM,WAAW,YAAY;AAAA,EAAA,CACnD,IAEL,MACJ,sBAAA,cAAC,QAAA,EAAK,WAAU,WAAA,GAAY,QAAS,CACzC,GACC,WACG,sBAAA;AAAA,IAACA,KAAAA;AAAAA,IAAA;AAAA,MACG,MAAK;AAAA,MACL,SAAS;AAAA,MACT,WAAU;AAAA,IAAA;AAAA,EAAA,IAEd,IACR;AAER,CAAC;;"}
+{"version":3,"file":"Tag.cjs","sources":["../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport type { IconName, IconProps } from '@/components';\nimport { Icon } from '@/components';\nimport type { Color } from '@/types';\nimport { SUBTLE_COLOR_SHADE_CLASSNAME } from '@/utils/tailwind';\n\nexport type TagProps = Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> & {\n    children: string;\n    color?: Color;\n    disabled?: boolean;\n    icon?: React.ReactElement<IconProps> | IconName;\n    readOnly?: boolean;\n    onDelete?: (event: React.MouseEvent<SVGSVGElement>) => void;\n};\n\nexport const Tag = React.forwardRef<HTMLSpanElement, TagProps>((props, ref) => {\n    const { children, color, disabled, icon, readOnly, onDelete, ...otherProps } = props;\n    const textRef = React.useRef<HTMLDivElement>(null);\n\n    const className = cn(\n        'inline-flex h-6 cursor-default items-center rounded',\n        {\n            'opacity-50': disabled,\n            'hover:bg-opacity-100': !disabled,\n            'cursor-pointer': !!otherProps.onClick,\n            'pointer-events-none': disabled || readOnly,\n        },\n        // NB: not a `color = 'grey'` prop default — that would render `data-taco-color=\"grey\"` on colorless\n        // tags where the attribute is currently absent. Worth promoting in the next major.\n        SUBTLE_COLOR_SHADE_CLASSNAME[color ?? 'grey'],\n        props.className\n    );\n\n    return (\n        <span {...otherProps} className={className} ref={ref} data-taco=\"tag\" data-taco-color={color}>\n            <span className=\"flex items-center truncate px-2\" ref={textRef}>\n                {icon ? (\n                    typeof icon === 'string' ? (\n                        <Icon name={icon} className=\"-ml-1 mr-1 !h-5 !w-5\" />\n                    ) : (\n                        React.cloneElement(icon, {\n                            className: cn(icon.props.className, '-ml-1 mr-1'),\n                        })\n                    )\n                ) : null}\n                <span className=\"truncate\">{children}</span>\n            </span>\n            {onDelete ? (\n                <Icon\n                    name=\"close\"\n                    onClick={onDelete}\n                    className=\"-ml-1.5 !h-6 !w-5 flex-shrink-0 cursor-pointer rounded-r p-0.5 hover:bg-black/5\"\n                />\n            ) : null}\n        </span>\n    );\n});\n"],"names":["SUBTLE_COLOR_SHADE_CLASSNAME","Icon"],"mappings":";;;;;;AAiBO,MAAM,MAAM,MAAM,WAAsC,CAAC,OAAO,QAAQ;AAC3E,QAAM,EAAE,UAAU,OAAO,UAAU,MAAM,UAAU,UAAU,GAAG,WAAA,IAAe;AAC/E,QAAM,UAAU,MAAM,OAAuB,IAAI;AAEjD,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,cAAc;AAAA,MACd,wBAAwB,CAAC;AAAA,MACzB,kBAAkB,CAAC,CAAC,WAAW;AAAA,MAC/B,uBAAuB,YAAY;AAAA,IAAA;AAAA;AAAA;AAAA,IAIvCA,SAAAA,6BAA6B,SAAS,MAAM;AAAA,IAC5C,MAAM;AAAA,EAAA;AAGV,SACI,sBAAA,cAAC,QAAA,EAAM,GAAG,YAAY,WAAsB,KAAU,aAAU,OAAM,mBAAiB,SACnF,sBAAA,cAAC,QAAA,EAAK,WAAU,mCAAkC,KAAK,QAAA,GAClD,OACG,OAAO,SAAS,WACZ,sBAAA,cAACC,KAAAA,MAAA,EAAK,MAAM,MAAM,WAAU,uBAAA,CAAuB,IAEnD,MAAM,aAAa,MAAM;AAAA,IACrB,WAAW,GAAG,KAAK,MAAM,WAAW,YAAY;AAAA,EAAA,CACnD,IAEL,MACJ,sBAAA,cAAC,QAAA,EAAK,WAAU,WAAA,GAAY,QAAS,CACzC,GACC,WACG,sBAAA;AAAA,IAACA,KAAAA;AAAAA,IAAA;AAAA,MACG,MAAK;AAAA,MACL,SAAS;AAAA,MACT,WAAU;AAAA,IAAA;AAAA,EAAA,IAEd,IACR;AAER,CAAC;;"}

package/dist/components/Tag/Tag.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
+import { IconName, IconProps } from '..';
 import { Color } from '../../types';
-import { IconName, IconProps } from '../Icon/Icon';
 export type TagProps = Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> & {
     children: string;
     color?: Color;