@coveord/plasma-mantine 56.9.0 → 56.11.0

package/dist/esm/components/Table/table-columns-selector/TableColumnsSelector.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Table/table-columns-selector/TableColumnsSelector.tsx"],"sourcesContent":["import {IconSettings} from '@coveord/plasma-react-icons';\nimport {Checkbox, Combobox, Text, Tooltip, useCombobox} from '@mantine/core';\nimport {flexRender, Header, Table} from '@tanstack/react-table';\nimport {ActionIcon} from '../../ActionIcon/ActionIcon';\n\nexport interface TableColumnsSelectorOptions {\n    /**\n     * The maximum number of columns that can be selected at the same time.\n     * If defined a footer will render with the remaining number of columns that can be selected.\n     * Must be a positive integer (greater than 0).\n     */\n    maxSelectableColumns?: number;\n    /**\n     * The content to display in the footer when maxSelectableColumns is defined.\n     * Can be a string or a function that receives the maxSelectableColumns value.\n     * @default (max) => `You can display up to ${max} columns.`\n     */\n    footer?: string | ((maxSelectableColumns: number) => string);\n    /**\n     * The tooltip to display when the user hovers over a disabled checkbox because of the limit.\n     * @default 'You have reached the maximum display limit.'\n     */\n    limitReachedTooltip?: string;\n    /**\n     * The tooltip to display when the user hovers over a disabled checkbox because a column cannot be hidden.\n     * @default 'This column is always visible.'\n     */\n    alwaysVisibleTooltip?: string;\n}\n\nexport interface TableColumnsSelectorHeaderProps {\n    table: Table<unknown>;\n    options?: TableColumnsSelectorOptions;\n}\n\nconst DEFAULT_OPTIONS: Omit<TableColumnsSelectorOptions, 'footer'> & {\n    footer: (maxSelectableColumns: number) => string;\n} = {\n    footer: (max) => `You can display up to ${max} columns.`,\n    limitReachedTooltip: 'You have reached the maximum display limit.',\n    alwaysVisibleTooltip: 'This column is always visible.',\n};\n\nexport const TableColumnsSelectorHeader = ({table, options}: TableColumnsSelectorHeaderProps) => {\n    const {maxSelectableColumns, footer, limitReachedTooltip, alwaysVisibleTooltip} = {\n        ...DEFAULT_OPTIONS,\n        ...options,\n    };\n\n    const combobox = useCombobox({\n        onDropdownClose: () => {\n            combobox.resetSelectedOption();\n        },\n        onDropdownOpen: () => combobox.updateSelectedOptionIndex('active'),\n    });\n\n    const allColumns = table.getAllLeafColumns();\n    const filteredColumns = allColumns.filter((column) => !column.columnDef.meta?.controlColumn);\n    const selectedColumnsCount = filteredColumns.filter((column) => column.getIsVisible()).length;\n\n    // Validate maxSelectableColumns - must be a positive integer to be effective\n    const effectiveMaxColumns =\n        maxSelectableColumns !== undefined && maxSelectableColumns > 0 ? maxSelectableColumns : undefined;\n\n    if (filteredColumns.length <= 0) {\n        return null;\n    }\n\n    const getColumnState = (column: (typeof filteredColumns)[number]) => {\n        const alwaysVisible = !column.getCanHide();\n        const isDisabled =\n            (effectiveMaxColumns !== undefined &&\n                selectedColumnsCount >= effectiveMaxColumns &&\n                !column.getIsVisible()) ||\n            alwaysVisible;\n        const isVisible = column.getIsVisible() || alwaysVisible;\n        return {alwaysVisible, isDisabled, isVisible};\n    };\n\n    const handleOptionClick = (columnId: string) => {\n        const column = filteredColumns.find((col) => col.id === columnId);\n        if (column) {\n            const {isDisabled} = getColumnState(column);\n            if (!isDisabled) {\n                column.toggleVisibility();\n            }\n        }\n    };\n\n    const columnOptions = filteredColumns.map((column) => {\n        const {alwaysVisible, isDisabled, isVisible} = getColumnState(column);\n\n        return (\n            <Combobox.Option value={column.id} key={column.id} disabled={isDisabled} active={isVisible}>\n                <Tooltip\n                    label={alwaysVisible ? alwaysVisibleTooltip : limitReachedTooltip}\n                    disabled={!isDisabled}\n                    position=\"left\"\n                >\n                    <div>\n                        <Checkbox\n                            checked={isVisible}\n                            label={flexRender(column.columnDef.header, {\n                                table,\n                                column,\n                                header: {column} as Header<unknown, unknown>,\n                            })}\n                            disabled={isDisabled}\n                        />\n                    </div>\n                </Tooltip>\n            </Combobox.Option>\n        );\n    });\n\n    return (\n        <Combobox store={combobox} position=\"bottom-end\" shadow=\"md\" onOptionSubmit={handleOptionClick}>\n            <Combobox.Target>\n                <ActionIcon.Tertiary onClick={() => combobox.toggleDropdown()} aria-label=\"settings\">\n                    <IconSettings height={16} />\n                </ActionIcon.Tertiary>\n            </Combobox.Target>\n            <Combobox.Dropdown miw={270}>\n                <Combobox.Options>{columnOptions}</Combobox.Options>\n                {effectiveMaxColumns && (\n                    <Combobox.Footer>\n                        <Text size=\"sm\" c=\"dimmed\">\n                            {typeof footer === 'function' ? footer(effectiveMaxColumns) : footer}\n                        </Text>\n                    </Combobox.Footer>\n                )}\n            </Combobox.Dropdown>\n        </Combobox>\n    );\n};\n"],"names":["IconSettings","Checkbox","Combobox","Text","Tooltip","useCombobox","flexRender","ActionIcon","DEFAULT_OPTIONS","footer","max","limitReachedTooltip","alwaysVisibleTooltip","TableColumnsSelectorHeader","table","options","maxSelectableColumns","combobox","onDropdownClose","resetSelectedOption","onDropdownOpen","updateSelectedOptionIndex","allColumns","getAllLeafColumns","filteredColumns","filter","column","columnDef","meta","controlColumn","selectedColumnsCount","getIsVisible","length","effectiveMaxColumns","undefined","getColumnState","alwaysVisible","getCanHide","isDisabled","isVisible","handleOptionClick","columnId","find","col","id","toggleVisibility","columnOptions","map","Option","value","disabled","active","label","position","div","checked","header","store","shadow","onOptionSubmit","Target","Tertiary","onClick","toggleDropdown","aria-label","height","Dropdown","miw","Options","Footer","size","c"],"mappings":"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"}
+{"version":3,"sources":["../../../../../src/components/Table/table-columns-selector/TableColumnsSelector.tsx"],"sourcesContent":["import {IconSettings} from '@coveord/plasma-react-icons';\nimport {Checkbox, Divider, Popover, ScrollArea, Stack, Text, Tooltip} from '@mantine/core';\nimport {useDisclosure} from '@mantine/hooks';\nimport {flexRender, Header, Table} from '@tanstack/react-table';\nimport {ActionIcon} from '../../ActionIcon/ActionIcon';\n\nexport interface TableColumnsSelectorOptions {\n    /**\n     * The maximum number of columns that can be selected at the same time.\n     * If defined a footer will render with the remaining number of columns that can be selected.\n     * Must be a positive integer (greater than 0).\n     */\n    maxSelectableColumns?: number;\n    /**\n     * The content to display in the footer when maxSelectableColumns is defined.\n     * Can be a string or a function that receives the maxSelectableColumns value.\n     * @default (max) => `You can display up to ${max} columns.`\n     */\n    footer?: string | ((maxSelectableColumns: number) => string);\n    /**\n     * The tooltip to display when the user hovers over a disabled checkbox because of the limit.\n     * @default 'You have reached the maximum display limit.'\n     */\n    limitReachedTooltip?: string;\n    /**\n     * The tooltip to display when the user hovers over a disabled checkbox because a column cannot be hidden.\n     * @default 'This column is always visible.'\n     */\n    alwaysVisibleTooltip?: string;\n}\n\nexport interface TableColumnsSelectorHeaderProps {\n    table: Table<unknown>;\n    options?: TableColumnsSelectorOptions;\n}\n\nconst DEFAULT_OPTIONS: Omit<TableColumnsSelectorOptions, 'footer'> & {\n    footer: (maxSelectableColumns: number) => string;\n} = {\n    footer: (max) => `You can display up to ${max} columns.`,\n    limitReachedTooltip: 'You have reached the maximum display limit.',\n    alwaysVisibleTooltip: 'This column is always visible.',\n};\n\nexport const TableColumnsSelectorHeader = ({table, options}: TableColumnsSelectorHeaderProps) => {\n    const {maxSelectableColumns, footer, limitReachedTooltip, alwaysVisibleTooltip} = {\n        ...DEFAULT_OPTIONS,\n        ...options,\n    };\n\n    const [opened, {toggle, close}] = useDisclosure(false);\n\n    const allColumns = table.getAllLeafColumns();\n    const filteredColumns = allColumns.filter((column) => !column.columnDef.meta?.controlColumn);\n    const selectedColumnsCount = filteredColumns.filter((column) => column.getIsVisible()).length;\n\n    // Validate maxSelectableColumns - must be a positive integer to be effective\n    const effectiveMaxColumns =\n        maxSelectableColumns !== undefined && maxSelectableColumns > 0 ? maxSelectableColumns : undefined;\n\n    if (filteredColumns.length <= 0) {\n        return null;\n    }\n\n    const getColumnState = (column: (typeof filteredColumns)[number]) => {\n        const alwaysVisible = !column.getCanHide();\n        const isDisabled =\n            (effectiveMaxColumns !== undefined &&\n                selectedColumnsCount >= effectiveMaxColumns &&\n                !column.getIsVisible()) ||\n            alwaysVisible;\n        const isVisible = column.getIsVisible() || alwaysVisible;\n        return {alwaysVisible, isDisabled, isVisible};\n    };\n\n    const columnOptions = filteredColumns.map((column) => {\n        const {alwaysVisible, isDisabled, isVisible} = getColumnState(column);\n\n        return (\n            <Tooltip\n                label={alwaysVisible ? alwaysVisibleTooltip : limitReachedTooltip}\n                disabled={!isDisabled}\n                position=\"left\"\n                key={column.id}\n            >\n                <div>\n                    <Checkbox\n                        label={flexRender(column.columnDef.header, {\n                            table,\n                            column,\n                            header: {column} as Header<unknown, unknown>,\n                        })}\n                        name={column.id}\n                        checked={isVisible}\n                        disabled={isDisabled}\n                        onChange={column.getToggleVisibilityHandler()}\n                    />\n                </div>\n            </Tooltip>\n        );\n    });\n\n    return (\n        <Popover opened={opened} onClose={close} position=\"bottom-end\" shadow=\"md\">\n            <Popover.Target>\n                <ActionIcon.Tertiary onClick={toggle} aria-label=\"settings\">\n                    <IconSettings height={16} />\n                </ActionIcon.Tertiary>\n            </Popover.Target>\n            <Popover.Dropdown miw={270} pb=\"xs\">\n                <ScrollArea.Autosize mah={200} type=\"auto\">\n                    <Stack gap=\"xs\">{columnOptions}</Stack>\n                </ScrollArea.Autosize>\n                {effectiveMaxColumns && (\n                    <>\n                        <Divider my=\"xs\" mx=\"-sm\" />\n                        <Text size=\"sm\" c=\"dimmed\">\n                            {typeof footer === 'function' ? footer(effectiveMaxColumns) : footer}\n                        </Text>\n                    </>\n                )}\n            </Popover.Dropdown>\n        </Popover>\n    );\n};\n"],"names":["IconSettings","Checkbox","Divider","Popover","ScrollArea","Stack","Text","Tooltip","useDisclosure","flexRender","ActionIcon","DEFAULT_OPTIONS","footer","max","limitReachedTooltip","alwaysVisibleTooltip","TableColumnsSelectorHeader","table","options","maxSelectableColumns","opened","toggle","close","allColumns","getAllLeafColumns","filteredColumns","filter","column","columnDef","meta","controlColumn","selectedColumnsCount","getIsVisible","length","effectiveMaxColumns","undefined","getColumnState","alwaysVisible","getCanHide","isDisabled","isVisible","columnOptions","map","label","disabled","position","div","header","name","id","checked","onChange","getToggleVisibilityHandler","onClose","shadow","Target","Tertiary","onClick","aria-label","height","Dropdown","miw","pb","Autosize","mah","type","gap","my","mx","size","c"],"mappings":";AAAA,SAAQA,YAAY,QAAO,8BAA8B;AACzD,SAAQC,QAAQ,EAAEC,OAAO,EAAEC,OAAO,EAAEC,UAAU,EAAEC,KAAK,EAAEC,IAAI,EAAEC,OAAO,QAAO,gBAAgB;AAC3F,SAAQC,aAAa,QAAO,iBAAiB;AAC7C,SAAQC,UAAU,QAAsB,wBAAwB;AAChE,SAAQC,UAAU,QAAO,8BAA8B;AAgCvD,MAAMC,kBAEF;IACAC,QAAQ,CAACC,MAAQ,CAAC,sBAAsB,EAAEA,IAAI,SAAS,CAAC;IACxDC,qBAAqB;IACrBC,sBAAsB;AAC1B;AAEA,OAAO,MAAMC,6BAA6B,CAAC,EAACC,KAAK,EAAEC,OAAO,EAAkC;IACxF,MAAM,EAACC,oBAAoB,EAAEP,MAAM,EAAEE,mBAAmB,EAAEC,oBAAoB,EAAC,GAAG;QAC9E,GAAGJ,eAAe;QAClB,GAAGO,OAAO;IACd;IAEA,MAAM,CAACE,QAAQ,EAACC,MAAM,EAAEC,KAAK,EAAC,CAAC,GAAGd,cAAc;IAEhD,MAAMe,aAAaN,MAAMO,iBAAiB;IAC1C,MAAMC,kBAAkBF,WAAWG,MAAM,CAAC,CAACC,SAAW,CAACA,OAAOC,SAAS,CAACC,IAAI,EAAEC;IAC9E,MAAMC,uBAAuBN,gBAAgBC,MAAM,CAAC,CAACC,SAAWA,OAAOK,YAAY,IAAIC,MAAM;IAE7F,6EAA6E;IAC7E,MAAMC,sBACFf,yBAAyBgB,aAAahB,uBAAuB,IAAIA,uBAAuBgB;IAE5F,IAAIV,gBAAgBQ,MAAM,IAAI,GAAG;QAC7B,OAAO;IACX;IAEA,MAAMG,iBAAiB,CAACT;QACpB,MAAMU,gBAAgB,CAACV,OAAOW,UAAU;QACxC,MAAMC,aACF,AAACL,wBAAwBC,aACrBJ,wBAAwBG,uBACxB,CAACP,OAAOK,YAAY,MACxBK;QACJ,MAAMG,YAAYb,OAAOK,YAAY,MAAMK;QAC3C,OAAO;YAACA;YAAeE;YAAYC;QAAS;IAChD;IAEA,MAAMC,gBAAgBhB,gBAAgBiB,GAAG,CAAC,CAACf;QACvC,MAAM,EAACU,aAAa,EAAEE,UAAU,EAAEC,SAAS,EAAC,GAAGJ,eAAeT;QAE9D,qBACI,KAACpB;YACGoC,OAAON,gBAAgBtB,uBAAuBD;YAC9C8B,UAAU,CAACL;YACXM,UAAS;sBAGT,cAAA,KAACC;0BACG,cAAA,KAAC7C;oBACG0C,OAAOlC,WAAWkB,OAAOC,SAAS,CAACmB,MAAM,EAAE;wBACvC9B;wBACAU;wBACAoB,QAAQ;4BAACpB;wBAAM;oBACnB;oBACAqB,MAAMrB,OAAOsB,EAAE;oBACfC,SAASV;oBACTI,UAAUL;oBACVY,UAAUxB,OAAOyB,0BAA0B;;;WAZ9CzB,OAAOsB,EAAE;IAiB1B;IAEA,qBACI,MAAC9C;QAAQiB,QAAQA;QAAQiC,SAAS/B;QAAOuB,UAAS;QAAaS,QAAO;;0BAClE,KAACnD,QAAQoD,MAAM;0BACX,cAAA,KAAC7C,WAAW8C,QAAQ;oBAACC,SAASpC;oBAAQqC,cAAW;8BAC7C,cAAA,KAAC1D;wBAAa2D,QAAQ;;;;0BAG9B,MAACxD,QAAQyD,QAAQ;gBAACC,KAAK;gBAAKC,IAAG;;kCAC3B,KAAC1D,WAAW2D,QAAQ;wBAACC,KAAK;wBAAKC,MAAK;kCAChC,cAAA,KAAC5D;4BAAM6D,KAAI;sCAAMzB;;;oBAEpBP,qCACG;;0CACI,KAAChC;gCAAQiE,IAAG;gCAAKC,IAAG;;0CACpB,KAAC9D;gCAAK+D,MAAK;gCAAKC,GAAE;0CACb,OAAO1D,WAAW,aAAaA,OAAOsB,uBAAuBtB;;;;;;;;AAO1F,EAAE"}

package/dist/esm/index.d.ts

@@ -33,6 +33,7 @@ export * from './components/DateTimeRangePicker/DateTimeRangePicker.js';
 export * from './components/EllipsisText/EllipsisText.js';
 export { Header, type HeaderBreadcrumbsProps, type HeaderDocAnchorProps, type HeaderFactory, type HeaderProps, type HeaderRightProps, type HeaderStyleNames, type HeaderVariant, } from './components/Header/Header.js';
 export * from './components/InfoToken/InfoToken.js';
+export * from './components/StatusToken/StatusToken.js';
 export * from './components/InlineConfirm/InlineConfirm.js';
 export * from './components/InlineConfirm/InlineConfirmContext.js';
 export * from './components/LastUpdated/LastUpdated.js';

package/dist/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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"}

package/dist/esm/index.js

@@ -47,6 +47,8 @@ export * from './components/EllipsisText/EllipsisText.js';
 export { Header } from './components/Header/Header.js';
 // Info Token
 export * from './components/InfoToken/InfoToken.js';
+// Status Token
+export * from './components/StatusToken/StatusToken.js';
 // Inline Confirm
 export * from './components/InlineConfirm/InlineConfirm.js';
 export * from './components/InlineConfirm/InlineConfirmContext.js';

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["import {MantineColorsTuple, noop} from '@mantine/core';\nimport {type RowData} from '@tanstack/table-core';\nimport {type PlasmaColors} from './theme/PlasmaColors.js';\n\nexport * from '@mantine/carousel';\nexport * from '@mantine/core';\nexport {Pagination} from '@mantine/core';\nexport {type DatesRangeValue} from '@mantine/dates';\nexport * from '@mantine/form';\nexport * from '@mantine/hooks';\nexport * from '@mantine/notifications';\nexport {type NotificationsProps} from '@mantine/notifications';\nexport * from '@tanstack/table-core';\n\n// Export all components\n// Accordion\nexport {Accordion} from './components/Accordion/Accordion.js';\n\n// Action Icon - override Mantine ActionIcon\nexport {ActionIcon, type ActionIconProps} from './components/ActionIcon/ActionIcon.js';\n\n// Alert - override Mantine Alert\nexport {Alert} from './components/Alert/Alert.js';\n\n// Badge - override Mantine Badge\nexport {\n    Badge,\n    type BadgeOverloadFactory,\n    type SemanticBadge,\n    type SemanticBadgeProps,\n} from './components/Badge/Badge.js';\n\n// Blank Slate\nexport * from './components/BlankSlate/BlankSlate.js';\n\n// Browser Preview\nexport * from './components/BrowserPreview/BrowserPreview.js';\n\n// Button - override Mantine Button\nexport {Button, type ButtonProps} from './components/Button/Button.js';\nexport {type ButtonWithDisabledTooltipProps} from './components/Button/ButtonWithDisabledTooltip.js';\n\n// Checkbox\nexport * from './components/CheckboxIcon/CheckboxIcon.js';\n\n// Child Form\nexport * from './components/ChildForm/ChildForm.js';\n\n// Chip - override Mantine Chip\nexport {Chip} from './components/Chip/Chip.js';\n\n// Code Editor\nexport * from './components/CodeEditor/CodeEditor.js';\n\n// Collection\nexport * from './components/Collection/Collection.js';\nexport {enhanceWithCollectionProps} from './components/Collection/enhanceWithCollectionProps.js';\n\n// Copy to Clipboard\nexport * from './components/CopyToClipboard/CopyToClipboard.js';\n\n// Date Range Picker\nexport * from './components/DateRangePicker/DateRangePicker.js';\nexport * from './components/DateRangePicker/DateRangePickerInlineCalendar.js';\nexport * from './components/DateRangePicker/DateRangePickerPopoverCalendar.js';\nexport * from './components/DateRangePicker/DateRangePickerPresetSelect.js';\n\n// Date Time Range Picker\nexport * from './components/DateTimeRangePicker/DateTimeRangePicker.js';\n\n// Ellipsis Text\nexport * from './components/EllipsisText/EllipsisText.js';\n\n// Header - override @tanstack/table-core Header\nexport {\n    Header,\n    type HeaderBreadcrumbsProps,\n    type HeaderDocAnchorProps,\n    type HeaderFactory,\n    type HeaderProps,\n    type HeaderRightProps,\n    type HeaderStyleNames,\n    type HeaderVariant,\n} from './components/Header/Header.js';\n\n// Info Token\nexport * from './components/InfoToken/InfoToken.js';\n\n// Inline Confirm\nexport * from './components/InlineConfirm/InlineConfirm.js';\nexport * from './components/InlineConfirm/InlineConfirmContext.js';\n\n// Last Updated\nexport * from './components/LastUpdated/LastUpdated.js';\n\n// Loader\nexport * from './components/CircleLoader/CircleLoader.js';\n\n// Menu - override Mantine Menu\nexport {Menu, type MenuItemProps} from './components/Menu/Menu.js';\n\n// Modal - override Mantine Modal\nexport {Modal, type ModalFactory, type ModalProps} from './components/Modal/Modal.js';\nexport * from './components/Modal/ModalFooter.js';\n\n// Prompt\nexport * from './components/Prompt/Prompt.js';\n\n// RadioCard - override Mantine RadioCard\nexport {RadioCard, type RadioCardProps} from './components/RadioCard/RadioCard.js';\n\n// Read Only - override Mantine PasswordInput and Select\nexport {PasswordInput} from './components/PasswordInput/PasswordInput.js';\nexport {Select} from './components/Select/Select.js';\n\n// Sticky Footer\nexport * from './components/StickyFooter/StickyFooter.js';\n\n// Table - override Mantine Table\nexport {flexRender as renderTableCell} from '@tanstack/react-table';\nexport {TableActionsColumn} from './components/Table/table-column/TableActionsColumn.js';\nexport {type TablePredicateProps} from './components/Table/table-predicate/TablePredicate.js';\nexport {Table, TableComponentsOrder, type PlasmaTableFactory} from './components/Table/Table.js';\nexport {\n    type TableAction,\n    type TableLayout,\n    type TableLayoutProps,\n    type TableProps,\n} from './components/Table/Table.types.js';\nexport {useTableContext} from './components/Table/TableContext.js';\nexport {useTable, type TableState, type TableStore, type UseTableOptions} from './components/Table/use-table.js';\nexport {useUrlSyncedState, type SearchParamEntry, type UseUrlSyncedStateOptions} from './hooks/use-url-synced-state.js';\n\nexport {noop};\n\n// Theme\nexport * from './theme/plasmaCSSVariablesResolver.js';\nexport * from './theme/Plasmantine.js';\n\ndeclare module '@mantine/core' {\n    export interface MantineThemeColorsOverride {\n        colors: Record<keyof typeof PlasmaColors | (string & {}), MantineColorsTuple>;\n    }\n}\n\ndeclare module '@tanstack/react-table' {\n    interface ColumnMeta<TData extends RowData, TValue> {\n        /**\n         * Whether the column is a control column.\n         * Control columns are columns that are not part of the data but are used to control the table.\n         * For example, a column that contains checkboxes to select rows.\n         */\n        controlColumn: boolean;\n    }\n}\n"],"names":["noop","Pagination","Accordion","ActionIcon","Alert","Badge","Button","Chip","enhanceWithCollectionProps","Header","Menu","Modal","RadioCard","PasswordInput","Select","flexRender","renderTableCell","TableActionsColumn","Table","TableComponentsOrder","useTableContext","useTable","useUrlSyncedState"],"mappings":"AAAA,SAA4BA,IAAI,QAAO,gBAAgB;AAIvD,cAAc,oBAAoB;AAClC,cAAc,gBAAgB;AAC9B,SAAQC,UAAU,QAAO,gBAAgB;AAEzC,cAAc,gBAAgB;AAC9B,cAAc,iBAAiB;AAC/B,cAAc,yBAAyB;AAEvC,cAAc,uBAAuB;AAErC,wBAAwB;AACxB,YAAY;AACZ,SAAQC,SAAS,QAAO,sCAAsC;AAE9D,4CAA4C;AAC5C,SAAQC,UAAU,QAA6B,wCAAwC;AAEvF,iCAAiC;AACjC,SAAQC,KAAK,QAAO,8BAA8B;AAElD,iCAAiC;AACjC,SACIC,KAAK,QAIF,8BAA8B;AAErC,cAAc;AACd,cAAc,wCAAwC;AAEtD,kBAAkB;AAClB,cAAc,gDAAgD;AAE9D,mCAAmC;AACnC,SAAQC,MAAM,QAAyB,gCAAgC;AAGvE,WAAW;AACX,cAAc,4CAA4C;AAE1D,aAAa;AACb,cAAc,sCAAsC;AAEpD,+BAA+B;AAC/B,SAAQC,IAAI,QAAO,4BAA4B;AAE/C,cAAc;AACd,cAAc,wCAAwC;AAEtD,aAAa;AACb,cAAc,wCAAwC;AACtD,SAAQC,0BAA0B,QAAO,wDAAwD;AAEjG,oBAAoB;AACpB,cAAc,kDAAkD;AAEhE,oBAAoB;AACpB,cAAc,kDAAkD;AAChE,cAAc,gEAAgE;AAC9E,cAAc,iEAAiE;AAC/E,cAAc,8DAA8D;AAE5E,yBAAyB;AACzB,cAAc,0DAA0D;AAExE,gBAAgB;AAChB,cAAc,4CAA4C;AAE1D,gDAAgD;AAChD,SACIC,MAAM,QAQH,gCAAgC;AAEvC,aAAa;AACb,cAAc,sCAAsC;AAEpD,iBAAiB;AACjB,cAAc,8CAA8C;AAC5D,cAAc,qDAAqD;AAEnE,eAAe;AACf,cAAc,0CAA0C;AAExD,SAAS;AACT,cAAc,4CAA4C;AAE1D,+BAA+B;AAC/B,SAAQC,IAAI,QAA2B,4BAA4B;AAEnE,iCAAiC;AACjC,SAAQC,KAAK,QAA2C,8BAA8B;AACtF,cAAc,oCAAoC;AAElD,SAAS;AACT,cAAc,gCAAgC;AAE9C,yCAAyC;AACzC,SAAQC,SAAS,QAA4B,sCAAsC;AAEnF,wDAAwD;AACxD,SAAQC,aAAa,QAAO,8CAA8C;AAC1E,SAAQC,MAAM,QAAO,gCAAgC;AAErD,gBAAgB;AAChB,cAAc,4CAA4C;AAE1D,iCAAiC;AACjC,SAAQC,cAAcC,eAAe,QAAO,wBAAwB;AACpE,SAAQC,kBAAkB,QAAO,wDAAwD;AAEzF,SAAQC,KAAK,EAAEC,oBAAoB,QAAgC,8BAA8B;AAOjG,SAAQC,eAAe,QAAO,qCAAqC;AACnE,SAAQC,QAAQ,QAA+D,kCAAkC;AACjH,SAAQC,iBAAiB,QAA6D,kCAAkC;AAExH,SAAQtB,IAAI,GAAE;AAEd,QAAQ;AACR,cAAc,wCAAwC;AACtD,cAAc,yBAAyB"}
+{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["import {MantineColorsTuple, noop} from '@mantine/core';\nimport {type RowData} from '@tanstack/table-core';\nimport {type PlasmaColors} from './theme/PlasmaColors.js';\n\nexport * from '@mantine/carousel';\nexport * from '@mantine/core';\nexport {Pagination} from '@mantine/core';\nexport {type DatesRangeValue} from '@mantine/dates';\nexport * from '@mantine/form';\nexport * from '@mantine/hooks';\nexport * from '@mantine/notifications';\nexport {type NotificationsProps} from '@mantine/notifications';\nexport * from '@tanstack/table-core';\n\n// Export all components\n// Accordion\nexport {Accordion} from './components/Accordion/Accordion.js';\n\n// Action Icon - override Mantine ActionIcon\nexport {ActionIcon, type ActionIconProps} from './components/ActionIcon/ActionIcon.js';\n\n// Alert - override Mantine Alert\nexport {Alert} from './components/Alert/Alert.js';\n\n// Badge - override Mantine Badge\nexport {\n    Badge,\n    type BadgeOverloadFactory,\n    type SemanticBadge,\n    type SemanticBadgeProps,\n} from './components/Badge/Badge.js';\n\n// Blank Slate\nexport * from './components/BlankSlate/BlankSlate.js';\n\n// Browser Preview\nexport * from './components/BrowserPreview/BrowserPreview.js';\n\n// Button - override Mantine Button\nexport {Button, type ButtonProps} from './components/Button/Button.js';\nexport {type ButtonWithDisabledTooltipProps} from './components/Button/ButtonWithDisabledTooltip.js';\n\n// Checkbox\nexport * from './components/CheckboxIcon/CheckboxIcon.js';\n\n// Child Form\nexport * from './components/ChildForm/ChildForm.js';\n\n// Chip - override Mantine Chip\nexport {Chip} from './components/Chip/Chip.js';\n\n// Code Editor\nexport * from './components/CodeEditor/CodeEditor.js';\n\n// Collection\nexport * from './components/Collection/Collection.js';\nexport {enhanceWithCollectionProps} from './components/Collection/enhanceWithCollectionProps.js';\n\n// Copy to Clipboard\nexport * from './components/CopyToClipboard/CopyToClipboard.js';\n\n// Date Range Picker\nexport * from './components/DateRangePicker/DateRangePicker.js';\nexport * from './components/DateRangePicker/DateRangePickerInlineCalendar.js';\nexport * from './components/DateRangePicker/DateRangePickerPopoverCalendar.js';\nexport * from './components/DateRangePicker/DateRangePickerPresetSelect.js';\n\n// Date Time Range Picker\nexport * from './components/DateTimeRangePicker/DateTimeRangePicker.js';\n\n// Ellipsis Text\nexport * from './components/EllipsisText/EllipsisText.js';\n\n// Header - override @tanstack/table-core Header\nexport {\n    Header,\n    type HeaderBreadcrumbsProps,\n    type HeaderDocAnchorProps,\n    type HeaderFactory,\n    type HeaderProps,\n    type HeaderRightProps,\n    type HeaderStyleNames,\n    type HeaderVariant,\n} from './components/Header/Header.js';\n\n// Info Token\nexport * from './components/InfoToken/InfoToken.js';\n\n// Status Token\nexport * from './components/StatusToken/StatusToken.js';\n\n// Inline Confirm\nexport * from './components/InlineConfirm/InlineConfirm.js';\nexport * from './components/InlineConfirm/InlineConfirmContext.js';\n\n// Last Updated\nexport * from './components/LastUpdated/LastUpdated.js';\n\n// Loader\nexport * from './components/CircleLoader/CircleLoader.js';\n\n// Menu - override Mantine Menu\nexport {Menu, type MenuItemProps} from './components/Menu/Menu.js';\n\n// Modal - override Mantine Modal\nexport {Modal, type ModalFactory, type ModalProps} from './components/Modal/Modal.js';\nexport * from './components/Modal/ModalFooter.js';\n\n// Prompt\nexport * from './components/Prompt/Prompt.js';\n\n// RadioCard - override Mantine RadioCard\nexport {RadioCard, type RadioCardProps} from './components/RadioCard/RadioCard.js';\n\n// Read Only - override Mantine PasswordInput and Select\nexport {PasswordInput} from './components/PasswordInput/PasswordInput.js';\nexport {Select} from './components/Select/Select.js';\n\n// Sticky Footer\nexport * from './components/StickyFooter/StickyFooter.js';\n\n// Table - override Mantine Table\nexport {flexRender as renderTableCell} from '@tanstack/react-table';\nexport {TableActionsColumn} from './components/Table/table-column/TableActionsColumn.js';\nexport {type TablePredicateProps} from './components/Table/table-predicate/TablePredicate.js';\nexport {Table, TableComponentsOrder, type PlasmaTableFactory} from './components/Table/Table.js';\nexport {\n    type TableAction,\n    type TableLayout,\n    type TableLayoutProps,\n    type TableProps,\n} from './components/Table/Table.types.js';\nexport {useTableContext} from './components/Table/TableContext.js';\nexport {useTable, type TableState, type TableStore, type UseTableOptions} from './components/Table/use-table.js';\nexport {useUrlSyncedState, type SearchParamEntry, type UseUrlSyncedStateOptions} from './hooks/use-url-synced-state.js';\n\nexport {noop};\n\n// Theme\nexport * from './theme/plasmaCSSVariablesResolver.js';\nexport * from './theme/Plasmantine.js';\n\ndeclare module '@mantine/core' {\n    export interface MantineThemeColorsOverride {\n        colors: Record<keyof typeof PlasmaColors | (string & {}), MantineColorsTuple>;\n    }\n}\n\ndeclare module '@tanstack/react-table' {\n    interface ColumnMeta<TData extends RowData, TValue> {\n        /**\n         * Whether the column is a control column.\n         * Control columns are columns that are not part of the data but are used to control the table.\n         * For example, a column that contains checkboxes to select rows.\n         */\n        controlColumn: boolean;\n    }\n}\n"],"names":["noop","Pagination","Accordion","ActionIcon","Alert","Badge","Button","Chip","enhanceWithCollectionProps","Header","Menu","Modal","RadioCard","PasswordInput","Select","flexRender","renderTableCell","TableActionsColumn","Table","TableComponentsOrder","useTableContext","useTable","useUrlSyncedState"],"mappings":"AAAA,SAA4BA,IAAI,QAAO,gBAAgB;AAIvD,cAAc,oBAAoB;AAClC,cAAc,gBAAgB;AAC9B,SAAQC,UAAU,QAAO,gBAAgB;AAEzC,cAAc,gBAAgB;AAC9B,cAAc,iBAAiB;AAC/B,cAAc,yBAAyB;AAEvC,cAAc,uBAAuB;AAErC,wBAAwB;AACxB,YAAY;AACZ,SAAQC,SAAS,QAAO,sCAAsC;AAE9D,4CAA4C;AAC5C,SAAQC,UAAU,QAA6B,wCAAwC;AAEvF,iCAAiC;AACjC,SAAQC,KAAK,QAAO,8BAA8B;AAElD,iCAAiC;AACjC,SACIC,KAAK,QAIF,8BAA8B;AAErC,cAAc;AACd,cAAc,wCAAwC;AAEtD,kBAAkB;AAClB,cAAc,gDAAgD;AAE9D,mCAAmC;AACnC,SAAQC,MAAM,QAAyB,gCAAgC;AAGvE,WAAW;AACX,cAAc,4CAA4C;AAE1D,aAAa;AACb,cAAc,sCAAsC;AAEpD,+BAA+B;AAC/B,SAAQC,IAAI,QAAO,4BAA4B;AAE/C,cAAc;AACd,cAAc,wCAAwC;AAEtD,aAAa;AACb,cAAc,wCAAwC;AACtD,SAAQC,0BAA0B,QAAO,wDAAwD;AAEjG,oBAAoB;AACpB,cAAc,kDAAkD;AAEhE,oBAAoB;AACpB,cAAc,kDAAkD;AAChE,cAAc,gEAAgE;AAC9E,cAAc,iEAAiE;AAC/E,cAAc,8DAA8D;AAE5E,yBAAyB;AACzB,cAAc,0DAA0D;AAExE,gBAAgB;AAChB,cAAc,4CAA4C;AAE1D,gDAAgD;AAChD,SACIC,MAAM,QAQH,gCAAgC;AAEvC,aAAa;AACb,cAAc,sCAAsC;AAEpD,eAAe;AACf,cAAc,0CAA0C;AAExD,iBAAiB;AACjB,cAAc,8CAA8C;AAC5D,cAAc,qDAAqD;AAEnE,eAAe;AACf,cAAc,0CAA0C;AAExD,SAAS;AACT,cAAc,4CAA4C;AAE1D,+BAA+B;AAC/B,SAAQC,IAAI,QAA2B,4BAA4B;AAEnE,iCAAiC;AACjC,SAAQC,KAAK,QAA2C,8BAA8B;AACtF,cAAc,oCAAoC;AAElD,SAAS;AACT,cAAc,gCAAgC;AAE9C,yCAAyC;AACzC,SAAQC,SAAS,QAA4B,sCAAsC;AAEnF,wDAAwD;AACxD,SAAQC,aAAa,QAAO,8CAA8C;AAC1E,SAAQC,MAAM,QAAO,gCAAgC;AAErD,gBAAgB;AAChB,cAAc,4CAA4C;AAE1D,iCAAiC;AACjC,SAAQC,cAAcC,eAAe,QAAO,wBAAwB;AACpE,SAAQC,kBAAkB,QAAO,wDAAwD;AAEzF,SAAQC,KAAK,EAAEC,oBAAoB,QAAgC,8BAA8B;AAOjG,SAAQC,eAAe,QAAO,qCAAqC;AACnE,SAAQC,QAAQ,QAA+D,kCAAkC;AACjH,SAAQC,iBAAiB,QAA6D,kCAAkC;AAExH,SAAQtB,IAAI,GAAE;AAEd,QAAQ;AACR,cAAc,wCAAwC;AACtD,cAAc,yBAAyB"}

package/dist/esm/types/svg-raw/index.d.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=index.d.js.map

package/dist/esm/types/svg-raw/index.d.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/types/svg-raw/index.d.ts"],"names":[],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coveord/plasma-mantine",
-  "version": "56.9.0",
+  "version": "56.11.0",
   "description": "A Plasma flavoured Mantine theme",
   "keywords": [
     "plasma",

package/src/components/InfoToken/InfoToken.tsx

@@ -120,53 +120,56 @@ const varsResolver = createVarsResolver<InfoTokenFactory>((_theme, {variant}) =>
     };
 });
 
-export const InfoToken: ReturnType<typeof polymorphicFactory<InfoTokenFactory>> = polymorphicFactory<InfoTokenFactory>(
-    (_props, ref) => {
-        const props = useProps('InfoToken', defaultProps, _props);
-        const {variant, vars, className, style, unstyled, styles, classNames, size, ...others} = props;
-        const getStyles = useStyles<InfoTokenFactory>({
-            name: 'InfoToken',
-            classes,
-            className,
-            props,
-            style,
-            styles,
-            unstyled,
-            vars,
-            varsResolver,
-        });
-        const IconComponent = iconResolver(variant);
-        return (
-            <Box
-                ref={ref}
-                variant={variant}
-                role="img"
-                aria-label={variant}
-                size={size}
-                {...getStyles('root', {
-                    className,
-                    style,
-                    styles,
-                    classNames,
-                })}
-                {...others}
-            >
-                <IconComponent size={sizeResolver(size)} />
-            </Box>
-        );
-    },
-);
+export const InfoToken = polymorphicFactory<InfoTokenFactory>((_props, ref) => {
+    const props = useProps('InfoToken', defaultProps, _props);
+    const {variant, vars, className, style, unstyled, styles, classNames, size, ...others} = props;
+    const getStyles = useStyles<InfoTokenFactory>({
+        name: 'InfoToken',
+        classes,
+        className,
+        props,
+        style,
+        styles,
+        unstyled,
+        vars,
+        varsResolver,
+    });
+    const IconComponent = iconResolver(variant);
+    return (
+        <Box
+            ref={ref}
+            variant={variant}
+            role="img"
+            aria-label={variant}
+            size={size}
+            {...getStyles('root', {
+                className,
+                style,
+                styles,
+                classNames,
+            })}
+            {...others}
+        >
+            <IconComponent size={sizeResolver(size)} />
+        </Box>
+    );
+});
 
 const TokenInformation = InfoToken.withProps({
     variant: 'information',
 });
+(TokenInformation as typeof InfoToken).displayName = 'InfoToken.Information';
 const TokenInformationOutline = InfoToken.withProps({
     variant: 'information-outline',
 });
 const TokenAdvice = InfoToken.withProps({variant: 'advice'});
+(TokenAdvice as typeof InfoToken).displayName = 'InfoToken.Advice';
 const TokenWarning = InfoToken.withProps({variant: 'warning'});
+(TokenWarning as typeof InfoToken).displayName = 'InfoToken.Warning';
 const TokenError = InfoToken.withProps({variant: 'error'});
+(TokenError as typeof InfoToken).displayName = 'InfoToken.Error';
 const TokenQuestion = InfoToken.withProps({variant: 'question'});
+(TokenQuestion as typeof InfoToken).displayName = 'InfoToken.Question';
 
 InfoToken.Information = TokenInformation;
 InfoToken.InformationOutline = TokenInformationOutline;

package/src/components/StatusToken/StatusToken.module.css

@@ -0,0 +1,42 @@
+.root {
+    --status-token-color: var(--mantine-primary-color-filled);
+    --status-token-size: 12px;
+
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    width: var(--status-token-size);
+    height: var(--status-token-size);
+    color: var(--status-token-color);
+
+    &:where([data-variant='waiting']) {
+        position: relative;
+
+        &::before {
+            position: absolute;
+            z-index: -1;
+            background-color: var(--status-token-color);
+            border-radius: 100%;
+            animation: pulse 1000ms linear infinite;
+            content: '';
+            inset: 0;
+        }
+    }
+
+    svg {
+        width: var(--status-token-size);
+        height: var(--status-token-size);
+    }
+}
+
+@keyframes pulse {
+    0% {
+        transform: scale(0);
+        opacity: 0.6;
+    }
+
+    100% {
+        transform: scale(2.8);
+        opacity: 0;
+    }
+}

package/src/components/StatusToken/StatusToken.tsx

@@ -0,0 +1,152 @@
+import {
+    Box,
+    BoxProps,
+    createVarsResolver,
+    Factory,
+    getSize,
+    MantineSize,
+    MantineTheme,
+    polymorphicFactory,
+    StylesApiProps,
+    useProps,
+    useStyles,
+} from '@mantine/core';
+
+import Circle from './icons/circle.svg?raw';
+import Ring from './icons/ring.svg?raw';
+import Square from './icons/square.svg?raw';
+import Triangle from './icons/triangle.svg?raw';
+import Info from './icons/info.svg?raw';
+import classes from './StatusToken.module.css';
+
+export type StatusTokenFactory = Factory<{
+    props: StatusTokenProps;
+    defaultRef: HTMLDivElement;
+    defaultComponent: 'div';
+    stylesNames: StatusTokenComponentStylesNames;
+    vars: StatusTokenCssVariables;
+    variant: StatusTokenVariant;
+}>;
+export type StatusTokenComponentStylesNames = 'root';
+export type StatusTokenVariant = 'info' | 'success' | 'caution' | 'error' | 'disabled' | 'waiting' | 'edited' | 'new';
+export type StatusTokenSize = Extract<MantineSize, 'sm' | 'lg'>;
+export type StatusTokenCssVariables = {
+    root: '--status-token-color' | '--status-token-size';
+};
+
+export interface StatusTokenProps extends BoxProps, StylesApiProps<StatusTokenFactory> {
+    /**
+     * The size of the token.
+     *
+     * @default 'lg'
+     */
+    size?: StatusTokenSize;
+    /**
+     * The variant of the token.
+     *
+     * @default 'info'
+     */
+    variant?: StatusTokenVariant;
+}
+
+const defaultProps: Partial<StatusTokenProps> = {size: 'lg', variant: 'info'};
+
+const resolveThemeColorFromVariant = (variant: StatusTokenVariant, theme: MantineTheme): string => {
+    switch (variant) {
+        case 'success':
+            return theme.colors.green[4];
+        case 'caution':
+            return theme.colors.yellow[4];
+        case 'error':
+            return theme.colors.red[5];
+        case 'disabled':
+        case 'waiting':
+            return theme.colors.gray[5];
+        case 'edited':
+        case 'new':
+            return 'var(--mantine-primary-color-filled)';
+        case 'info':
+            return theme.colors.gray[3];
+        default:
+            return theme.colors.navy[5];
+    }
+};
+const resolveSize = (size: StatusTokenSize): number => (size === 'sm' ? 8 : 12);
+
+const resolveIconSrcFromVariant = (variant: StatusTokenVariant): string => {
+    switch (variant) {
+        case 'caution':
+            return Triangle;
+        case 'error':
+            return Square;
+        case 'disabled':
+            return Ring;
+        case 'info':
+            return Info;
+        case 'success':
+        case 'waiting':
+        case 'edited':
+        case 'new':
+        default:
+            return Circle;
+    }
+};
+
+const varsResolver = createVarsResolver<StatusTokenFactory>((theme, {variant, size}) => {
+    const color = resolveThemeColorFromVariant(variant, theme);
+    return {
+        root: {
+            '--status-token-color': color,
+            '--status-token-size': getSize(resolveSize(size), 'status-token-size'),
+        },
+    };
+});
+
+const statusTokenLabels: Record<StatusTokenVariant, string> = {
+    info: 'Info',
+    success: 'Success',
+    caution: 'Caution',
+    error: 'Error',
+    disabled: 'Disabled',
+    waiting: 'Waiting',
+    edited: 'Edited',
+    new: 'New',
+};
+
+export const StatusToken: ReturnType<typeof polymorphicFactory<StatusTokenFactory>> =
+    polymorphicFactory<StatusTokenFactory>((props, ref) => {
+        const {variant, vars, size, className, style, unstyled, styles, classNames, ...others} = useProps(
+            'StatusToken',
+            defaultProps,
+            props,
+        );
+        const getStyles = useStyles<StatusTokenFactory>({
+            name: 'StatusToken',
+            classes,
+            className,
+            props,
+            style,
+            styles,
+            unstyled,
+            vars,
+            varsResolver,
+        });
+        return (
+            <Box
+                ref={ref}
+                variant={variant}
+                role="img"
+                aria-label={statusTokenLabels[variant]}
+                {...getStyles('root', {
+                    className,
+                    style,
+                    styles,
+                    classNames,
+                })}
+                dangerouslySetInnerHTML={{__html: resolveIconSrcFromVariant(variant)}}
+                {...others}
+            />
+        );
+    });
+
+StatusToken.displayName = 'StatusToken';

package/src/components/StatusToken/__tests__/StatusToken.component.spec.tsx

@@ -0,0 +1,28 @@
+import {render, screen} from '@test-utils';
+import {StatusToken, type StatusTokenVariant} from '../StatusToken.js';
+
+describe('StatusToken', () => {
+    it('renders with default props', () => {
+        render(<StatusToken data-testid="status-token" />);
+        expect(screen.getByTestId('status-token')).toHaveAttribute('data-variant', 'info');
+    });
+
+    it('renders with custom size and variant', () => {
+        render(<StatusToken size="sm" data-testid="status-token" variant="success" />);
+        expect(screen.getByTestId('status-token')).toHaveAttribute('data-variant', 'success');
+    });
+
+    it.each<{variant: StatusTokenVariant; expected: string}>([
+        {variant: 'info', expected: 'Info'},
+        {variant: 'success', expected: 'Success'},
+        {variant: 'caution', expected: 'Caution'},
+        {variant: 'error', expected: 'Error'},
+        {variant: 'disabled', expected: 'Disabled'},
+        {variant: 'waiting', expected: 'Waiting'},
+        {variant: 'edited', expected: 'Edited'},
+        {variant: 'new', expected: 'New'},
+    ])('is accessible for the $variant variant', ({variant, expected}) => {
+        render(<StatusToken variant={variant} />);
+        expect(screen.getByRole('img', {name: expected})).toBeVisible();
+    });
+});

package/src/components/StatusToken/icons/circle.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 12 12">
+  <circle cx="6" cy="6" r="5.5" fill="currentColor"/>
+</svg>

package/src/components/StatusToken/icons/info.svg

@@ -0,0 +1,5 @@
+<svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M6 0.125C9.3138 0.125 12 2.81014 12 6.12263C12.0012 7.69729 11.3829 9.20927 10.2785 10.3321C9.17415 11.455 7.67229 12.0987 6.09721 12.1242C4.52214 12.1497 3.0002 11.555 1.86 10.4685C0.719794 9.38199 0.0527931 7.89082 0.00300007 6.31695L0 6.12263L0.00239997 5.95469C0.0912 2.72017 2.742 0.125 6 0.125ZM6 5.52286H5.4L5.3298 5.52706C5.18397 5.5444 5.04957 5.6146 4.95205 5.72436C4.85453 5.83413 4.80067 5.97583 4.80067 6.12263C4.80067 6.26943 4.85453 6.41113 4.95205 6.52089C5.04957 6.63065 5.18397 6.70085 5.3298 6.71819L5.4 6.72239V8.52168L5.4042 8.59185C5.41999 8.72573 5.48045 8.85038 5.57581 8.9457C5.67117 9.04103 5.79587 9.10145 5.9298 9.11724L6 9.12144H6.6L6.6702 9.11724C6.80413 9.10145 6.92883 9.04103 7.02419 8.9457C7.11955 8.85038 7.18 8.72573 7.1958 8.59185L7.2 8.52168L7.1958 8.45151C7.18146 8.32914 7.12976 8.21416 7.04774 8.1222C6.96573 8.03023 6.85737 7.96575 6.7374 7.93751L6.6702 7.92551L6.6 7.92192V6.12263L6.5958 6.05246C6.58 5.91858 6.51955 5.79392 6.42419 5.6986C6.32883 5.60328 6.20413 5.54285 6.0702 5.52706L6 5.52286ZM6.006 3.72358L5.9298 3.72777C5.78397 3.74511 5.64957 3.81531 5.55205 3.92508C5.45453 4.03484 5.40067 4.17654 5.40067 4.32334C5.40067 4.47014 5.45453 4.61184 5.55205 4.7216C5.64957 4.83136 5.78397 4.90156 5.9298 4.9189L6 4.9231L6.0762 4.9189C6.22203 4.90156 6.35643 4.83136 6.45395 4.7216C6.55147 4.61184 6.60533 4.47014 6.60533 4.32334C6.60533 4.17654 6.55147 4.03484 6.45395 3.92508C6.35643 3.81531 6.22203 3.74511 6.0762 3.72777L6.006 3.72358Z"
+        fill="currentColor" />
+</svg>

package/src/components/StatusToken/icons/ring.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="6" cy="6" r="5" stroke="currentColor"/>
+</svg>

package/src/components/StatusToken/icons/square.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="1" y="1" width="10" height="10" rx="2.2" fill="currentColor"/>
+</svg>

package/src/components/StatusToken/icons/triangle.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 6">
+  <path fill="currentColor" d="M3 .475c.25 0 .482.122.625.326l.027.042 2.12 3.54a.762.762 0 0 1-.602 1.141l-.051.002H.879A.762.762 0 0 1 .202 4.43l.028-.05L2.35.842A.762.762 0 0 1 3 .475Z"/>
+</svg>

package/src/components/Table/__tests__/{TableColumnsSelectorHeader.spec.tsx → TableColumnsSelector.spec.tsx}

@@ -21,7 +21,7 @@ const getBaseColumns = (): Array<ColumnDef<RowData>> => [
     TableActionsColumn as ColumnDef<RowData>,
 ];
 
-describe('TableColumnsSelectorHeader', () => {
+describe('TableColumnsSelector', () => {
     it('renders the column selector button in the actions column header when rowConfigurable is true', () => {
         const Fixture = () => {
             const store = useTable<RowData>();
@@ -269,7 +269,8 @@ describe('TableColumnsSelectorHeader', () => {
 
             await user.click(screen.getByRole('button', {name: 'settings'}));
 
-            expect(await screen.findByText('You can display up to 5 columns.')).toBeVisible();
+            await screen.findByRole('checkbox', {name: 'Name'});
+            expect(screen.getByText('You can display up to 5 columns.')).toBeInTheDocument();
         });
 
         it('does not render a footer when maxSelectableColumns is not set', async () => {

package/src/components/Table/table-columns-selector/TableColumnsSelector.tsx

@@ -1,5 +1,6 @@
 import {IconSettings} from '@coveord/plasma-react-icons';
-import {Checkbox, Combobox, Text, Tooltip, useCombobox} from '@mantine/core';
+import {Checkbox, Divider, Popover, ScrollArea, Stack, Text, Tooltip} from '@mantine/core';
+import {useDisclosure} from '@mantine/hooks';
 import {flexRender, Header, Table} from '@tanstack/react-table';
 import {ActionIcon} from '../../ActionIcon/ActionIcon';
 
@@ -47,12 +48,7 @@ export const TableColumnsSelectorHeader = ({table, options}: TableColumnsSelecto
         ...options,
     };
 
-    const combobox = useCombobox({
-        onDropdownClose: () => {
-            combobox.resetSelectedOption();
-        },
-        onDropdownOpen: () => combobox.updateSelectedOptionIndex('active'),
-    });
+    const [opened, {toggle, close}] = useDisclosure(false);
 
     const allColumns = table.getAllLeafColumns();
     const filteredColumns = allColumns.filter((column) => !column.columnDef.meta?.controlColumn);
@@ -77,59 +73,53 @@ export const TableColumnsSelectorHeader = ({table, options}: TableColumnsSelecto
         return {alwaysVisible, isDisabled, isVisible};
     };
 
-    const handleOptionClick = (columnId: string) => {
-        const column = filteredColumns.find((col) => col.id === columnId);
-        if (column) {
-            const {isDisabled} = getColumnState(column);
-            if (!isDisabled) {
-                column.toggleVisibility();
-            }
-        }
-    };
-
     const columnOptions = filteredColumns.map((column) => {
         const {alwaysVisible, isDisabled, isVisible} = getColumnState(column);
 
         return (
-            <Combobox.Option value={column.id} key={column.id} disabled={isDisabled} active={isVisible}>
-                <Tooltip
-                    label={alwaysVisible ? alwaysVisibleTooltip : limitReachedTooltip}
-                    disabled={!isDisabled}
-                    position="left"
-                >
-                    <div>
-                        <Checkbox
-                            checked={isVisible}
-                            label={flexRender(column.columnDef.header, {
-                                table,
-                                column,
-                                header: {column} as Header<unknown, unknown>,
-                            })}
-                            disabled={isDisabled}
-                        />
-                    </div>
-                </Tooltip>
-            </Combobox.Option>
+            <Tooltip
+                label={alwaysVisible ? alwaysVisibleTooltip : limitReachedTooltip}
+                disabled={!isDisabled}
+                position="left"
+                key={column.id}
+            >
+                <div>
+                    <Checkbox
+                        label={flexRender(column.columnDef.header, {
+                            table,
+                            column,
+                            header: {column} as Header<unknown, unknown>,
+                        })}
+                        name={column.id}
+                        checked={isVisible}
+                        disabled={isDisabled}
+                        onChange={column.getToggleVisibilityHandler()}
+                    />
+                </div>
+            </Tooltip>
         );
     });
 
     return (
-        <Combobox store={combobox} position="bottom-end" shadow="md" onOptionSubmit={handleOptionClick}>
-            <Combobox.Target>
-                <ActionIcon.Tertiary onClick={() => combobox.toggleDropdown()} aria-label="settings">
+        <Popover opened={opened} onClose={close} position="bottom-end" shadow="md">
+            <Popover.Target>
+                <ActionIcon.Tertiary onClick={toggle} aria-label="settings">
                     <IconSettings height={16} />
                 </ActionIcon.Tertiary>
-            </Combobox.Target>
-            <Combobox.Dropdown miw={270}>
-                <Combobox.Options>{columnOptions}</Combobox.Options>
+            </Popover.Target>
+            <Popover.Dropdown miw={270} pb="xs">
+                <ScrollArea.Autosize mah={200} type="auto">
+                    <Stack gap="xs">{columnOptions}</Stack>
+                </ScrollArea.Autosize>
                 {effectiveMaxColumns && (
-                    <Combobox.Footer>
+                    <>
+                        <Divider my="xs" mx="-sm" />
                         <Text size="sm" c="dimmed">
                             {typeof footer === 'function' ? footer(effectiveMaxColumns) : footer}
                         </Text>
-                    </Combobox.Footer>
+                    </>
                 )}
-            </Combobox.Dropdown>
-        </Combobox>
+            </Popover.Dropdown>
+        </Popover>
     );
 };