npm - @coveord/plasma-mantine - Versions diffs - 54.4.0 → 55.0.0 - Mend

@coveord/plasma-mantine 54.4.0 → 55.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (122) hide show

package/dist/esm/theme/Theme.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ArrowHeadLeftSize16Px, ArrowHeadRightSize16Px, CheckSize16Px, CrossSize16Px, FilterSize16Px, InfoSize16Px, InfoSize24Px } from '@coveord/plasma-react-icons';
 import { color } from '@coveord/plasma-tokens';
-import { ActionIcon, Alert, Anchor, AppShellNavbar, Badge, Button, Checkbox, CloseButton, ColorSwatch, Combobox, ComboboxSearch, createTheme, Divider, Input, InputWrapper, List, Loader, MenuItem, Modal, MultiSelect, NavLink, Notification, Pagination, Popover, Radio, ScrollArea, SegmentedControl, Select, Skeleton, Stepper, Tabs, Text, TextInput, Tooltip } from '@mantine/core';
+import { ActionIcon, Alert, Anchor, AppShellNavbar, Badge, Button, Checkbox, CloseButton, ColorSwatch, Combobox, ComboboxSearch, createTheme, deepMerge, Divider, Input, InputWrapper, List, Loader, MenuItem, Modal, MultiSelect, NavLink, Notification, Pagination, Popover, Radio, ScrollArea, SegmentedControl, Select, Skeleton, Stepper, Switch, Tabs, Text, TextInput, Tooltip } from '@mantine/core';
 import { DatePicker } from '@mantine/dates';
 import ActionIconClasses from '../styles/ActionIcon.module.css';
 import AlertClasses from '../styles/Alert.module.css';
@@ -20,6 +20,8 @@ import NavLinkClasses from '../styles/NavLink.module.css';
 import NotificationClasses from '../styles/Notification.module.css';
 import PaginationClasses from '../styles/Pagination.module.css';
 import RadioClasses from '../styles/Radio.module.css';
+import ReadOnlyInputClasses from '../styles/ReadOnlyInput.module.css';
+import ReadOnlyStateClasses from '../styles/ReadOnlyState.module.css';
 import ScrollAreaClasses from '../styles/ScrollArea.module.css';
 import SegmentedControlClasses from '../styles/SegmentedControl.module.css';
 import SelectClasses from '../styles/Select.module.css';
@@ -134,9 +136,24 @@ export const plasmaTheme = createTheme({
             defaultProps: {
                 radius: 'sm'
             },
-            classNames: {
-                label: CheckboxClasses.label,
-                input: CheckboxClasses.input
+            classNames: (theme, props)=>{
+                if (props.readOnly && !props.disabled) {
+                    return deepMerge(CheckboxClasses, ReadOnlyStateClasses);
+                }
+                return CheckboxClasses;
+            },
+            vars: (theme, props)=>{
+                if (props.readOnly && !props.disabled) {
+                    return {
+                        root: {
+                            '--checkbox-icon-color': theme.colors.gray[7],
+                            '--checkbox-color': theme.colors.gray[2]
+                        }
+                    };
+                }
+                return {
+                    root: {}
+                };
             }
         }),
         CloseButton: CloseButton.extend({
@@ -179,10 +196,36 @@ export const plasmaTheme = createTheme({
             }
         }),
         Input: Input.extend({
-            classNames: InputClasses
+            classNames: (theme, props)=>{
+                const anyProps = props;
+                // eslint-disable-next-line no-underscore-dangle
+                if (anyProps.readOnly && !props.disabled && ![
+                    'Select'
+                ].includes(anyProps.__staticSelector)) {
+                    return deepMerge(InputClasses, ReadOnlyInputClasses);
+                }
+                return InputClasses;
+            }
         }),
         InputWrapper: InputWrapper.extend({
-            classNames: InputWrapperClasses
+            classNames: InputWrapperClasses,
+            vars: (theme, props)=>{
+                const anyProps = props;
+                if (anyProps.readOnly || anyProps.disabled) {
+                    return {
+                        label: {
+                            '--input-asterisk-color': theme.colors.red[2]
+                        },
+                        error: {},
+                        description: {}
+                    };
+                }
+                return {
+                    label: {},
+                    error: {},
+                    description: {}
+                };
+            }
         }),
         Loader: Loader.extend({
             defaultProps: {
@@ -256,7 +299,25 @@ export const plasmaTheme = createTheme({
             }
         }),
         Radio: Radio.extend({
-            classNames: RadioClasses
+            classNames: (theme, props)=>{
+                if (props.readOnly && !props.disabled) {
+                    return deepMerge(RadioClasses, ReadOnlyStateClasses);
+                }
+                return RadioClasses;
+            },
+            vars: (theme, props)=>{
+                if (props.readOnly && !props.disabled) {
+                    return {
+                        root: {
+                            '--radio-icon-color': theme.colors.gray[7],
+                            '--radio-color': theme.colors.gray[2]
+                        }
+                    };
+                }
+                return {
+                    root: {}
+                };
+            }
         }),
         ScrollArea: ScrollArea.extend({
             classNames: {
@@ -295,6 +356,33 @@ export const plasmaTheme = createTheme({
                 verticalSeparator: StepperClasses.verticalSeparator
             }
         }),
+        Switch: Switch.extend({
+            classNames: (theme, props)=>{
+                if (props.readOnly && !props.disabled) {
+                    return ReadOnlyStateClasses;
+                }
+                return {};
+            },
+            vars: (theme, props)=>{
+                if (props.readOnly && !props.disabled) {
+                    return {
+                        root: {},
+                        track: {
+                            '--switch-bg': theme.colors.gray[2],
+                            '--switch-bd': 'transparent'
+                        },
+                        thumb: {
+                            '--switch-thumb-bd': 'transparent'
+                        }
+                    };
+                }
+                return {
+                    root: {},
+                    track: {},
+                    thumb: {}
+                };
+            }
+        }),
         Tabs: Tabs.extend({
             classNames: TabsClasses
         }),

package/dist/esm/theme/Theme.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/theme/Theme.tsx"],"sourcesContent":["import {\n ArrowHeadLeftSize16Px,\n ArrowHeadRightSize16Px,\n CheckSize16Px,\n CrossSize16Px,\n FilterSize16Px,\n InfoSize16Px,\n InfoSize24Px,\n} from '@coveord/plasma-react-icons';\nimport {color} from '@coveord/plasma-tokens';\nimport {\n ActionIcon,\n Alert,\n Anchor,\n AppShellNavbar,\n Badge,\n Button,\n Checkbox,\n CloseButton,\n ColorSwatch,\n Combobox,\n ComboboxSearch,\n createTheme,\n Divider,\n Input,\n InputWrapper,\n List,\n Loader,\n MantineThemeOverride,\n MenuItem,\n Modal,\n MultiSelect,\n NavLink,\n Notification,\n Pagination,\n Popover,\n Radio,\n ScrollArea,\n SegmentedControl,\n Select,\n Skeleton,\n Stepper,\n Tabs,\n Text,\n TextInput,\n Tooltip,\n} from '@mantine/core';\nimport {DatePicker} from '@mantine/dates';\nimport ActionIconClasses from '../styles/ActionIcon.module.css';\nimport AlertClasses from '../styles/Alert.module.css';\nimport AnchorClasses from '../styles/Anchor.module.css';\nimport AppShellNavBarClasses from '../styles/AppShellNavBar.module.css';\nimport BadgeClasses from '../styles/Badge.module.css';\nimport ButtonClasses from '../styles/Button.module.css';\nimport CheckboxClasses from '../styles/Checkbox.module.css';\nimport ComboboxClasses from '../styles/Combobox.module.css';\nimport DatePickerClasses from '../styles/DatePicker.module.css';\nimport InputClasses from '../styles/Input.module.css';\nimport InputWrapperClasses from '../styles/InputWrapper.module.css';\nimport ListClasses from '../styles/List.module.css';\nimport ModalClasses from '../styles/Modal.module.css';\nimport NavLinkClasses from '../styles/NavLink.module.css';\nimport NotificationClasses from '../styles/Notification.module.css';\nimport PaginationClasses from '../styles/Pagination.module.css';\nimport RadioClasses from '../styles/Radio.module.css';\nimport ScrollAreaClasses from '../styles/ScrollArea.module.css';\nimport SegmentedControlClasses from '../styles/SegmentedControl.module.css';\nimport SelectClasses from '../styles/Select.module.css';\nimport SkeletonClasses from '../styles/Skeleton.module.css';\nimport StepperClasses from '../styles/Stepper.module.css';\nimport TabsClasses from '../styles/Tabs.module.css';\nimport TextClasses from '../styles/Text.module.css';\nimport {NotificationVars} from '../vars/Notification.vars';\nimport {TextVars} from '../vars/Text.vars';\nimport {PlasmaColors} from './PlasmaColors';\n\nexport const plasmaTheme: MantineThemeOverride = createTheme({\n // These are overrides over https://github.com/mantinedev/mantine/blob/master/packages/%40mantine/core/src/core/MantineProvider/default-theme.ts\n fontFamily: 'canada-type-gibson, sans-serif',\n black: color.primary.gray[9],\n defaultRadius: 8,\n lineHeights: {md: '1.5'},\n spacing: {\n xxs: '4px',\n xs: '8px',\n sm: '16px',\n md: '24px',\n lg: '32px',\n xl: '40px',\n },\n primaryColor: 'action',\n headings: {\n fontFamily: 'canada-type-gibson, sans-serif',\n fontWeight: '500',\n sizes: {\n h1: {fontSize: '48px', lineHeight: '1.5', fontWeight: '300'},\n h2: {fontSize: '32px', lineHeight: '1.5', fontWeight: '500'},\n h3: {fontSize: '24px', lineHeight: '1.5', fontWeight: '500'},\n h4: {fontSize: '18px', lineHeight: '1.5', fontWeight: '300'},\n h5: {fontSize: '14px', lineHeight: '1.5', fontWeight: '500'},\n h6: {fontSize: '12px', lineHeight: '1.5', fontWeight: '500'},\n },\n },\n shadows: {\n xs: '0px 1px 0px rgba(4, 8, 31, 0.08)',\n sm: '0px 2px 4px rgba(4, 8, 31, 0.12)',\n md: '0px 4px 8px rgba(4, 8, 31, 0.08)',\n lg: '0px 8px 16px rgba(7, 12, 41, 0.06)',\n xl: '0px 16px 24px rgba(4, 8, 31, 0.06)',\n },\n colors: PlasmaColors,\n components: {\n ActionIcon: ActionIcon.extend({\n classNames: {root: ActionIconClasses.root},\n }),\n Alert: Alert.extend({\n defaultProps: {\n icon: <InfoSize16Px height={16} />,\n color: 'navy',\n },\n classNames: AlertClasses,\n }),\n Anchor: Anchor.extend({\n defaultProps: {\n color: 'action.6',\n },\n classNames: {root: AnchorClasses.root},\n }),\n AppShellNavbar: AppShellNavbar.extend({\n classNames: {navbar: AppShellNavBarClasses.navbar},\n }),\n Badge: Badge.extend({\n classNames: {root: BadgeClasses.root},\n defaultProps: {\n variant: 'light',\n },\n }),\n Button: Button.extend({\n classNames: ButtonClasses,\n }),\n Checkbox: Checkbox.extend({\n defaultProps: {\n radius: 'sm',\n },\n classNames: {label: CheckboxClasses.label, input: CheckboxClasses.input},\n }),\n CloseButton: CloseButton.extend({\n defaultProps: {\n icon: <CrossSize16Px height={16} aria-label=\"close\" />,\n },\n }),\n ColorSwatch: ColorSwatch.extend({\n defaultProps: {\n size: 8,\n withShadow: false,\n },\n }),\n Combobox: Combobox.extend({\n classNames: {option: SelectClasses.option, search: ComboboxClasses.search},\n }),\n ComboboxSearch: ComboboxSearch.extend({\n defaultProps: {\n placeholder: 'Search',\n rightSection: <FilterSize16Px height={16} color=\"gray.5\" />,\n },\n }),\n DatePicker: DatePicker.extend({\n classNames: {monthCell: DatePickerClasses.monthCell},\n }),\n Divider: Divider.extend({\n defaultProps: {\n color: 'gray.3',\n },\n }),\n Input: Input.extend({\n classNames: InputClasses,\n }),\n InputWrapper: InputWrapper.extend({\n classNames: InputWrapperClasses,\n }),\n Loader: Loader.extend({\n defaultProps: {\n type: 'dots',\n color: 'action',\n role: 'presentation',\n },\n }),\n List: List.extend({\n classNames: {root: ListClasses.root},\n }),\n MenuItem: MenuItem.extend({\n defaultProps: {\n fw: 300,\n },\n }),\n Modal: Modal.extend({\n classNames: ModalClasses,\n }),\n ModalOverlay: Modal.Overlay.extend({\n defaultProps: {\n color: color.primary.navy[9],\n backgroundOpacity: 0.9,\n },\n }),\n ModalRoot: Modal.Root.extend({\n defaultProps: {\n padding: 'lg',\n },\n }),\n MultiSelect: MultiSelect.extend({defaultProps: {hidePickedOptions: true}}),\n NavLink: NavLink.extend({classNames: NavLinkClasses}),\n Notification: Notification.extend({\n defaultProps: {\n icon: <InfoSize24Px height={24} />,\n color: 'info',\n },\n classNames: {\n root: NotificationClasses.root,\n icon: NotificationClasses.icon,\n closeButton: NotificationClasses.closeButton,\n },\n vars: NotificationVars,\n }),\n Pagination: Pagination.extend({\n classNames: PaginationClasses,\n vars: () => ({root: {'--pagination-control-fz': 'var(--mantine-font-size-sm)'}}),\n defaultProps: {\n nextIcon: ArrowHeadRightSize16Px,\n previousIcon: ArrowHeadLeftSize16Px,\n },\n }),\n Popover: Popover.extend({\n defaultProps: {\n shadow: 'md',\n withArrow: true,\n },\n }),\n Radio: Radio.extend({classNames: RadioClasses}),\n ScrollArea: ScrollArea.extend({\n classNames: {viewport: ScrollAreaClasses.viewport},\n }),\n SegmentedControl: SegmentedControl.extend({\n classNames: SegmentedControlClasses,\n }),\n Select: Select.extend({\n defaultProps: {withCheckIcon: false, allowDeselect: false},\n classNames: {input: SelectClasses.input, option: SelectClasses.option},\n }),\n Skeleton: Skeleton.extend({\n classNames: {root: SkeletonClasses.root},\n }),\n Stepper: Stepper.extend({\n defaultProps: {\n size: 'xs',\n completedIcon: <CheckSize16Px />,\n },\n classNames: {\n step: StepperClasses.step,\n stepIcon: StepperClasses.stepIcon,\n stepCompletedIcon: StepperClasses.stepCompletedIcon,\n stepDescription: StepperClasses.stepDescription,\n separator: StepperClasses.separator,\n verticalSeparator: StepperClasses.verticalSeparator,\n },\n }),\n Tabs: Tabs.extend({\n classNames: TabsClasses,\n }),\n TabsTab: Tabs.Tab.extend({\n defaultProps: {\n px: 'sm',\n },\n }),\n Text: Text.extend({\n classNames: TextClasses,\n vars: TextVars,\n }),\n TextInput: TextInput.extend({\n defaultProps: {\n radius: 8,\n },\n }),\n Tooltip: Tooltip.extend({\n defaultProps: {\n color: 'navy',\n maw: 300,\n multiline: true,\n withArrow: true,\n zIndex: 10000,\n },\n }),\n },\n});\n"],"names":["ArrowHeadLeftSize16Px","ArrowHeadRightSize16Px","CheckSize16Px","CrossSize16Px","FilterSize16Px","InfoSize16Px","InfoSize24Px","color","ActionIcon","Alert","Anchor","AppShellNavbar","Badge","Button","Checkbox","CloseButton","ColorSwatch","Combobox","ComboboxSearch","createTheme","Divider","Input","InputWrapper","List","Loader","MenuItem","Modal","MultiSelect","NavLink","Notification","Pagination","Popover","Radio","ScrollArea","SegmentedControl","Select","Skeleton","Stepper","Tabs","Text","TextInput","Tooltip","DatePicker","ActionIconClasses","AlertClasses","AnchorClasses","AppShellNavBarClasses","BadgeClasses","ButtonClasses","CheckboxClasses","ComboboxClasses","DatePickerClasses","InputClasses","InputWrapperClasses","ListClasses","ModalClasses","NavLinkClasses","NotificationClasses","PaginationClasses","RadioClasses","ScrollAreaClasses","SegmentedControlClasses","SelectClasses","SkeletonClasses","StepperClasses","TabsClasses","TextClasses","NotificationVars","TextVars","PlasmaColors","plasmaTheme","fontFamily","black","primary","gray","defaultRadius","lineHeights","md","spacing","xxs","xs","sm","lg","xl","primaryColor","headings","fontWeight","sizes","h1","fontSize","lineHeight","h2","h3","h4","h5","h6","shadows","colors","components","extend","classNames","root","defaultProps","icon","height","navbar","variant","radius","label","input","aria-label","size","withShadow","option","search","placeholder","rightSection","monthCell","type","role","fw","ModalOverlay","Overlay","navy","backgroundOpacity","ModalRoot","Root","padding","hidePickedOptions","closeButton","vars","nextIcon","previousIcon","shadow","withArrow","viewport","withCheckIcon","allowDeselect","completedIcon","step","stepIcon","stepCompletedIcon","stepDescription","separator","verticalSeparator","TabsTab","Tab","px","maw","multiline","zIndex"],"mappings":"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"}
1	+ {"version":3,"sources":["../../../src/theme/Theme.tsx"],"sourcesContent":["import {\n ArrowHeadLeftSize16Px,\n ArrowHeadRightSize16Px,\n CheckSize16Px,\n CrossSize16Px,\n FilterSize16Px,\n InfoSize16Px,\n InfoSize24Px,\n} from '@coveord/plasma-react-icons';\nimport {color} from '@coveord/plasma-tokens';\nimport {\n ActionIcon,\n Alert,\n Anchor,\n AppShellNavbar,\n Badge,\n Button,\n Checkbox,\n CloseButton,\n ColorSwatch,\n Combobox,\n ComboboxSearch,\n createTheme,\n deepMerge,\n Divider,\n Input,\n InputWrapper,\n List,\n Loader,\n MantineThemeOverride,\n MenuItem,\n Modal,\n MultiSelect,\n NavLink,\n Notification,\n Pagination,\n Popover,\n Radio,\n ScrollArea,\n SegmentedControl,\n Select,\n Skeleton,\n Stepper,\n Switch,\n Tabs,\n Text,\n TextInput,\n Tooltip,\n} from '@mantine/core';\nimport {DatePicker} from '@mantine/dates';\nimport ActionIconClasses from '../styles/ActionIcon.module.css';\nimport AlertClasses from '../styles/Alert.module.css';\nimport AnchorClasses from '../styles/Anchor.module.css';\nimport AppShellNavBarClasses from '../styles/AppShellNavBar.module.css';\nimport BadgeClasses from '../styles/Badge.module.css';\nimport ButtonClasses from '../styles/Button.module.css';\nimport CheckboxClasses from '../styles/Checkbox.module.css';\nimport ComboboxClasses from '../styles/Combobox.module.css';\nimport DatePickerClasses from '../styles/DatePicker.module.css';\nimport InputClasses from '../styles/Input.module.css';\nimport InputWrapperClasses from '../styles/InputWrapper.module.css';\nimport ListClasses from '../styles/List.module.css';\nimport ModalClasses from '../styles/Modal.module.css';\nimport NavLinkClasses from '../styles/NavLink.module.css';\nimport NotificationClasses from '../styles/Notification.module.css';\nimport PaginationClasses from '../styles/Pagination.module.css';\nimport RadioClasses from '../styles/Radio.module.css';\nimport ReadOnlyInputClasses from '../styles/ReadOnlyInput.module.css';\nimport ReadOnlyStateClasses from '../styles/ReadOnlyState.module.css';\nimport ScrollAreaClasses from '../styles/ScrollArea.module.css';\nimport SegmentedControlClasses from '../styles/SegmentedControl.module.css';\nimport SelectClasses from '../styles/Select.module.css';\nimport SkeletonClasses from '../styles/Skeleton.module.css';\nimport StepperClasses from '../styles/Stepper.module.css';\nimport TabsClasses from '../styles/Tabs.module.css';\nimport TextClasses from '../styles/Text.module.css';\nimport {NotificationVars} from '../vars/Notification.vars';\nimport {TextVars} from '../vars/Text.vars';\nimport {PlasmaColors} from './PlasmaColors';\n\nexport const plasmaTheme: MantineThemeOverride = createTheme({\n // These are overrides over https://github.com/mantinedev/mantine/blob/master/packages/%40mantine/core/src/core/MantineProvider/default-theme.ts\n fontFamily: 'canada-type-gibson, sans-serif',\n black: color.primary.gray[9],\n defaultRadius: 8,\n lineHeights: {md: '1.5'},\n spacing: {\n xxs: '4px',\n xs: '8px',\n sm: '16px',\n md: '24px',\n lg: '32px',\n xl: '40px',\n },\n primaryColor: 'action',\n headings: {\n fontFamily: 'canada-type-gibson, sans-serif',\n fontWeight: '500',\n sizes: {\n h1: {fontSize: '48px', lineHeight: '1.5', fontWeight: '300'},\n h2: {fontSize: '32px', lineHeight: '1.5', fontWeight: '500'},\n h3: {fontSize: '24px', lineHeight: '1.5', fontWeight: '500'},\n h4: {fontSize: '18px', lineHeight: '1.5', fontWeight: '300'},\n h5: {fontSize: '14px', lineHeight: '1.5', fontWeight: '500'},\n h6: {fontSize: '12px', lineHeight: '1.5', fontWeight: '500'},\n },\n },\n shadows: {\n xs: '0px 1px 0px rgba(4, 8, 31, 0.08)',\n sm: '0px 2px 4px rgba(4, 8, 31, 0.12)',\n md: '0px 4px 8px rgba(4, 8, 31, 0.08)',\n lg: '0px 8px 16px rgba(7, 12, 41, 0.06)',\n xl: '0px 16px 24px rgba(4, 8, 31, 0.06)',\n },\n colors: PlasmaColors,\n components: {\n ActionIcon: ActionIcon.extend({\n classNames: {root: ActionIconClasses.root},\n }),\n Alert: Alert.extend({\n defaultProps: {\n icon: <InfoSize16Px height={16} />,\n color: 'navy',\n },\n classNames: AlertClasses,\n }),\n Anchor: Anchor.extend({\n defaultProps: {\n color: 'action.6',\n },\n classNames: {root: AnchorClasses.root},\n }),\n AppShellNavbar: AppShellNavbar.extend({\n classNames: {navbar: AppShellNavBarClasses.navbar},\n }),\n Badge: Badge.extend({\n classNames: {root: BadgeClasses.root},\n defaultProps: {\n variant: 'light',\n },\n }),\n Button: Button.extend({\n classNames: ButtonClasses,\n }),\n Checkbox: Checkbox.extend({\n defaultProps: {\n radius: 'sm',\n },\n classNames: (theme, props) => {\n if (props.readOnly && !props.disabled) {\n return deepMerge(CheckboxClasses, ReadOnlyStateClasses);\n }\n return CheckboxClasses;\n },\n vars: (theme, props) => {\n if (props.readOnly && !props.disabled) {\n return {\n root: {\n '--checkbox-icon-color': theme.colors.gray[7],\n '--checkbox-color': theme.colors.gray[2],\n },\n };\n }\n return {root: {}};\n },\n }),\n CloseButton: CloseButton.extend({\n defaultProps: {\n icon: <CrossSize16Px height={16} aria-label=\"close\" />,\n },\n }),\n ColorSwatch: ColorSwatch.extend({\n defaultProps: {\n size: 8,\n withShadow: false,\n },\n }),\n Combobox: Combobox.extend({\n classNames: {option: SelectClasses.option, search: ComboboxClasses.search},\n }),\n ComboboxSearch: ComboboxSearch.extend({\n defaultProps: {\n placeholder: 'Search',\n rightSection: <FilterSize16Px height={16} color=\"gray.5\" />,\n },\n }),\n DatePicker: DatePicker.extend({\n classNames: {monthCell: DatePickerClasses.monthCell},\n }),\n Divider: Divider.extend({\n defaultProps: {\n color: 'gray.3',\n },\n }),\n Input: Input.extend({\n classNames: (theme, props) => {\n const anyProps = props as any;\n // eslint-disable-next-line no-underscore-dangle\n if (anyProps.readOnly && !props.disabled && !['Select'].includes(anyProps.__staticSelector)) {\n return deepMerge(InputClasses, ReadOnlyInputClasses);\n }\n return InputClasses;\n },\n }),\n InputWrapper: InputWrapper.extend({\n classNames: InputWrapperClasses,\n vars: (theme, props) => {\n const anyProps = props as any;\n if (anyProps.readOnly \|\| anyProps.disabled) {\n return {\n label: {'--input-asterisk-color': theme.colors.red[2]},\n error: {},\n description: {},\n };\n }\n return {\n label: {},\n error: {},\n description: {},\n };\n },\n }),\n Loader: Loader.extend({\n defaultProps: {\n type: 'dots',\n color: 'action',\n role: 'presentation',\n },\n }),\n List: List.extend({\n classNames: {root: ListClasses.root},\n }),\n MenuItem: MenuItem.extend({\n defaultProps: {\n fw: 300,\n },\n }),\n Modal: Modal.extend({\n classNames: ModalClasses,\n }),\n ModalOverlay: Modal.Overlay.extend({\n defaultProps: {\n color: color.primary.navy[9],\n backgroundOpacity: 0.9,\n },\n }),\n ModalRoot: Modal.Root.extend({\n defaultProps: {\n padding: 'lg',\n },\n }),\n MultiSelect: MultiSelect.extend({defaultProps: {hidePickedOptions: true}}),\n NavLink: NavLink.extend({classNames: NavLinkClasses}),\n Notification: Notification.extend({\n defaultProps: {\n icon: <InfoSize24Px height={24} />,\n color: 'info',\n },\n classNames: {\n root: NotificationClasses.root,\n icon: NotificationClasses.icon,\n closeButton: NotificationClasses.closeButton,\n },\n vars: NotificationVars,\n }),\n Pagination: Pagination.extend({\n classNames: PaginationClasses,\n vars: () => ({root: {'--pagination-control-fz': 'var(--mantine-font-size-sm)'}}),\n defaultProps: {\n nextIcon: ArrowHeadRightSize16Px,\n previousIcon: ArrowHeadLeftSize16Px,\n },\n }),\n Popover: Popover.extend({\n defaultProps: {\n shadow: 'md',\n withArrow: true,\n },\n }),\n Radio: Radio.extend({\n classNames: (theme, props) => {\n if (props.readOnly && !props.disabled) {\n return deepMerge(RadioClasses, ReadOnlyStateClasses);\n }\n return RadioClasses;\n },\n vars: (theme, props) => {\n if (props.readOnly && !props.disabled) {\n return {\n root: {\n '--radio-icon-color': theme.colors.gray[7],\n '--radio-color': theme.colors.gray[2],\n },\n };\n }\n return {root: {}};\n },\n }),\n ScrollArea: ScrollArea.extend({\n classNames: {viewport: ScrollAreaClasses.viewport},\n }),\n SegmentedControl: SegmentedControl.extend({\n classNames: SegmentedControlClasses,\n }),\n Select: Select.extend({\n defaultProps: {withCheckIcon: false, allowDeselect: false},\n classNames: {input: SelectClasses.input, option: SelectClasses.option},\n }),\n Skeleton: Skeleton.extend({\n classNames: {root: SkeletonClasses.root},\n }),\n Stepper: Stepper.extend({\n defaultProps: {\n size: 'xs',\n completedIcon: <CheckSize16Px />,\n },\n classNames: {\n step: StepperClasses.step,\n stepIcon: StepperClasses.stepIcon,\n stepCompletedIcon: StepperClasses.stepCompletedIcon,\n stepDescription: StepperClasses.stepDescription,\n separator: StepperClasses.separator,\n verticalSeparator: StepperClasses.verticalSeparator,\n },\n }),\n Switch: Switch.extend({\n classNames: (theme, props) => {\n if (props.readOnly && !props.disabled) {\n return ReadOnlyStateClasses;\n }\n return {};\n },\n vars: (theme, props) => {\n if (props.readOnly && !props.disabled) {\n return {\n root: {},\n track: {\n '--switch-bg': theme.colors.gray[2],\n '--switch-bd': 'transparent',\n },\n thumb: {\n '--switch-thumb-bd': 'transparent',\n },\n };\n }\n return {root: {}, track: {}, thumb: {}};\n },\n }),\n Tabs: Tabs.extend({\n classNames: TabsClasses,\n }),\n TabsTab: Tabs.Tab.extend({\n defaultProps: {\n px: 'sm',\n },\n }),\n Text: Text.extend({\n classNames: TextClasses,\n vars: TextVars,\n }),\n TextInput: TextInput.extend({\n defaultProps: {\n radius: 8,\n },\n }),\n Tooltip: Tooltip.extend({\n defaultProps: {\n color: 'navy',\n maw: 300,\n multiline: true,\n withArrow: true,\n zIndex: 10000,\n },\n }),\n },\n});\n"],"names":["ArrowHeadLeftSize16Px","ArrowHeadRightSize16Px","CheckSize16Px","CrossSize16Px","FilterSize16Px","InfoSize16Px","InfoSize24Px","color","ActionIcon","Alert","Anchor","AppShellNavbar","Badge","Button","Checkbox","CloseButton","ColorSwatch","Combobox","ComboboxSearch","createTheme","deepMerge","Divider","Input","InputWrapper","List","Loader","MenuItem","Modal","MultiSelect","NavLink","Notification","Pagination","Popover","Radio","ScrollArea","SegmentedControl","Select","Skeleton","Stepper","Switch","Tabs","Text","TextInput","Tooltip","DatePicker","ActionIconClasses","AlertClasses","AnchorClasses","AppShellNavBarClasses","BadgeClasses","ButtonClasses","CheckboxClasses","ComboboxClasses","DatePickerClasses","InputClasses","InputWrapperClasses","ListClasses","ModalClasses","NavLinkClasses","NotificationClasses","PaginationClasses","RadioClasses","ReadOnlyInputClasses","ReadOnlyStateClasses","ScrollAreaClasses","SegmentedControlClasses","SelectClasses","SkeletonClasses","StepperClasses","TabsClasses","TextClasses","NotificationVars","TextVars","PlasmaColors","plasmaTheme","fontFamily","black","primary","gray","defaultRadius","lineHeights","md","spacing","xxs","xs","sm","lg","xl","primaryColor","headings","fontWeight","sizes","h1","fontSize","lineHeight","h2","h3","h4","h5","h6","shadows","colors","components","extend","classNames","root","defaultProps","icon","height","navbar","variant","radius","theme","props","readOnly","disabled","vars","aria-label","size","withShadow","option","search","placeholder","rightSection","monthCell","anyProps","includes","__staticSelector","label","red","error","description","type","role","fw","ModalOverlay","Overlay","navy","backgroundOpacity","ModalRoot","Root","padding","hidePickedOptions","closeButton","nextIcon","previousIcon","shadow","withArrow","viewport","withCheckIcon","allowDeselect","input","completedIcon","step","stepIcon","stepCompletedIcon","stepDescription","separator","verticalSeparator","track","thumb","TabsTab","Tab","px","maw","multiline","zIndex"],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@coveord/plasma-mantine",
-  "version": "54.4.0",
+  "version": "55.0.0",
   "description": "A Plasma flavoured Mantine theme",
   "keywords": [
     "plasma",
@@ -42,8 +42,8 @@
     "lodash.debounce": "4.0.8",
     "lodash.defaultsdeep": "4.6.1",
     "monaco-editor": "0.52.0",
-    "@coveord/plasma-react-icons": "54.4.0",
-    "@coveord/plasma-tokens": "54.4.0"
+    "@coveord/plasma-react-icons": "55.0.0",
+    "@coveord/plasma-tokens": "55.0.0"
   },
   "devDependencies": {
     "@mantine/carousel": "7.13.2",
@@ -55,7 +55,7 @@
     "@mantine/modals": "7.13.2",
     "@mantine/notifications": "7.13.2",
     "@swc/cli": "0.4.0",
-    "@swc/core": "1.7.28",
+    "@swc/core": "1.7.36",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.5.0",
     "@testing-library/react": "16.0.1",
@@ -63,7 +63,7 @@
     "@types/lodash.debounce": "4.0.9",
     "@types/lodash.defaultsdeep": "4.6.9",
     "@types/react": "18.3.11",
-    "@types/react-dom": "18.3.0",
+    "@types/react-dom": "18.3.1",
     "embla-carousel-react": "7.1.0",
     "identity-obj-proxy": "3.0.0",
     "jsdom": "25.0.1",
@@ -74,10 +74,10 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "rimraf": "6.0.1",
-    "sass": "1.79.4",
-    "tslib": "2.7.0",
-    "typescript": "5.6.2",
-    "vitest": "2.1.2"
+    "sass": "1.79.5",
+    "tslib": "2.8.0",
+    "typescript": "5.6.3",
+    "vitest": "2.1.3"
   },
   "peerDependencies": {
     "@mantine/carousel": "^7.6.1",

package/src/components/code-editor/CodeEditor.module.css CHANGED Viewed

@@ -23,3 +23,13 @@
     outline-color: var(--mantine-color-red-6);
     outline-style: solid;
 }
+.disabled {
+    @mixin light {
+        background-color: var(--mantine-color-gray-2);
+    }
+    @mixin dark {
+        background-color: var(--mantine-color-navy-7);
+    }
+}

package/src/components/code-editor/CodeEditor.tsx CHANGED Viewed

@@ -124,6 +124,25 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
         }
     };
+    const registerThemes = (monaco: Monaco) => {
+        monaco.editor.defineTheme('light-disabled', {
+            base: 'vs',
+            inherit: true,
+            rules: [],
+            colors: {
+                'editor.background': theme.colors.gray[2],
+            },
+        });
+        monaco.editor.defineTheme('vs-dark-disabled', {
+            base: 'vs-dark',
+            inherit: true,
+            rules: [],
+            colors: {
+                'editor.background': theme.colors.navy[7],
+            },
+        });
+    };
     const handleSearch = () => {
         if (editorRef.current) {
             editorRef.current.focus();
@@ -183,6 +202,10 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
             <CopyToClipboard value={_value} onCopy={() => onCopy?.()} />
         </Group>
     );
+    let editorTheme = colorScheme === 'light' ? 'light' : 'vs-dark';
+    if (disabled) {
+        editorTheme += '-disabled';
+    }
     const _editor = loaded ? (
         <Box
@@ -192,13 +215,14 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
                 CodeEditorClasses.editor,
                 {[CodeEditorClasses.valid]: !renderErrorOutline},
                 {[CodeEditorClasses.error]: renderErrorOutline},
+                {[CodeEditorClasses.disabled]: disabled},
             )}
             data-testid="editor-wrapper"
         >
             <Editor
                 onValidate={handleValidate}
                 defaultLanguage={language}
-                theme={colorScheme === 'light' ? 'light' : 'vs-dark'}
+                theme={editorTheme}
                 options={{
                     minimap: {enabled: false},
                     wordWrap: 'on',
@@ -213,6 +237,7 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
                 onMount={(editor, monaco) => {
                     editorRef.current = editor;
                     registerLanguages(monaco);
+                    registerThemes(monaco);
                     editor.onDidFocusEditorText(() => onFocus?.());
                     editor.onDidBlurEditorText(async () => {
                         await editor.getAction('editor.action.formatDocument').run();

package/src/components/collection/Collection.tsx CHANGED Viewed

@@ -95,6 +95,12 @@ export interface CollectionProps<T> extends __InputWrapperProps, BoxProps, Style
      * @default false
      */
     disabled?: boolean;
+    /**
+     * Whether the collection is readOnly. If true, the collection will not allow adding or removing items
+     *
+     * @default false
+     */
+    readOnly?: boolean;
     /**
      * Function that determines if the add item button should be enabled given the current items of the collection.
      * The button is always enabled if this props remains undefined
@@ -141,6 +147,7 @@ const defaultProps: Partial<CollectionProps<unknown>> = {
     addLabel: 'Add item',
     addDisabledTooltip: 'There is already an empty item',
     disabled: false,
+    readOnly: false,
     gap: 'xs',
     required: false,
     getItemId: ({id}: any) => id,
@@ -154,6 +161,7 @@ export const Collection = <T,>(props: CollectionProps<T> & {ref?: ForwardedRef<H
         onReorderItem,
         onInsertItem,
         disabled,
+        readOnly,
         draggable,
         children,
         gap,
@@ -198,6 +206,7 @@ export const Collection = <T,>(props: CollectionProps<T> & {ref?: ForwardedRef<H
         }),
     );
+    const canEdit = !disabled && !readOnly;
     const hasOnlyOneItem = value.length === 1;
     /**
@@ -232,7 +241,7 @@ export const Collection = <T,>(props: CollectionProps<T> & {ref?: ForwardedRef<H
         <CollectionItem
             key={item.id}
             id={item.id}
-            disabled={disabled}
+            disabled={!canEdit}
             draggable={draggable}
             onRemove={() => onRemoveItem?.(index)}
             removable={!(required && hasOnlyOneItem)}
@@ -243,7 +252,7 @@ export const Collection = <T,>(props: CollectionProps<T> & {ref?: ForwardedRef<H
     const addAllowed = allowAdd?.(value) ?? true;
-    const _addButton = disabled ? null : (
+    const _addButton = canEdit ? (
         <Group>
             <Tooltip label={addDisabledTooltip} disabled={addAllowed}>
                 <Box>
@@ -258,7 +267,7 @@ export const Collection = <T,>(props: CollectionProps<T> & {ref?: ForwardedRef<H
                 </Box>
             </Tooltip>
         </Group>
-    );
+    ) : null;
     const getIndex = (id: string) => standardizedItems.findIndex((item) => item.id === id);

package/src/components/copyToClipboard/CopyToClipboard.tsx CHANGED Viewed

@@ -1,5 +1,6 @@
 import {CheckSize16Px, CopySize16Px} from '@coveord/plasma-react-icons';
-import {ActionIcon, CopyButton, TextInput, Tooltip} from '@mantine/core';
+import {ActionIcon, CopyButton, MantineColor, TextInput, Tooltip} from '@mantine/core';
+import {FunctionComponent} from 'react';
 export interface CopyToClipboardProps {
     /**
@@ -16,15 +17,21 @@ export interface CopyToClipboardProps {
      * Called each time the value is copied to the clipboard
      */
     onCopy?: () => void;
+    /**
+     * The color of the icon when idle
+     *
+     * @default 'gray'
+     */
+    color?: MantineColor | (string & {});
 }
-const CopyToClipboardButton: React.FunctionComponent<Omit<CopyToClipboardProps, 'withLabel'>> = ({value, onCopy}) => (
+const CopyToClipboardButton: FunctionComponent<Omit<CopyToClipboardProps, 'withLabel'>> = ({value, onCopy, color}) => (
     <CopyButton value={value} timeout={2000}>
         {({copied, copy}) => (
             <Tooltip label={copied ? 'Copied' : 'Copy'}>
                 <ActionIcon
                     variant="subtle"
-                    color={copied ? 'success' : 'gray'}
+                    color={copied ? 'success' : color}
                     onClick={() => {
                         copy();
                         onCopy?.();
@@ -37,14 +44,13 @@ const CopyToClipboardButton: React.FunctionComponent<Omit<CopyToClipboardProps,
     </CopyButton>
 );
-export const CopyToClipboard: React.FunctionComponent<CopyToClipboardProps> = ({withLabel, ...others}) =>
+export const CopyToClipboard: FunctionComponent<CopyToClipboardProps> = ({withLabel, ...others}) =>
     withLabel ? (
         <TextInput
-            classNames={{input: 'var(--mantine-color-gray-7)'}}
             value={others.value}
             readOnly
             autoComplete="off"
-            rightSection={<CopyToClipboardButton {...others} />}
+            rightSection={<CopyToClipboardButton color="action" {...others} />}
         />
     ) : (
         <CopyToClipboardButton {...others} />

package/src/components/index.ts CHANGED Viewed

@@ -1,14 +1,15 @@
+export * from './action-icon';
 export * from './blank-slate';
 export * from './browser-preview';
+export * from './button';
 export * from './code-editor';
 export * from './collection';
+export * from './copyToClipboard';
 export * from './date-range-picker';
-export * from './sticky-footer';
 export * from './header';
 export * from './inline-confirm';
-export * from './table';
-export * from './prompt';
-export * from './button';
-export * from './action-icon';
 export * from './menu';
-export * from './copyToClipboard';
+export * from './prompt';
+export * from './read-only';
+export * from './sticky-footer';
+export * from './table';

package/src/components/read-only/PasswordInput.tsx ADDED Viewed

@@ -0,0 +1,11 @@
+import {factory, PasswordInput as MantinePasswordInput, type PasswordInputFactory} from '@mantine/core';
+import {readOnlyInputStyles} from './ReadOnlyInputStyles';
+const ReadOnlyPasswordInput = MantinePasswordInput.withProps({styles: readOnlyInputStyles});
+export const PasswordInput = factory<PasswordInputFactory>((props, ref) => {
+    if (props.readOnly && !props.disabled) {
+        return <ReadOnlyPasswordInput ref={ref} {...props} />;
+    }
+    return <MantinePasswordInput ref={ref} {...props} />;
+});

package/src/components/read-only/ReadOnlyInputStyles.ts ADDED Viewed

@@ -0,0 +1,13 @@
+import {type MantineTheme} from '@mantine/core';
+export const readOnlyInputStyles = (theme: MantineTheme) => ({
+    wrapper: {
+        '--input-bd': 'transparent',
+        '--input-bg': theme.colors.gray[2],
+        '--input-color': theme.colors.gray[7],
+        '--input-placeholder-color': theme.colors.gray[7],
+    },
+    input: {
+        cursor: 'text',
+    },
+});

package/src/components/read-only/Select.tsx ADDED Viewed

@@ -0,0 +1,11 @@
+import {factory, Select as MantineSelect, SelectFactory} from '@mantine/core';
+import {readOnlyInputStyles} from './ReadOnlyInputStyles';
+const ReadOnlySelect = MantineSelect.withProps({styles: readOnlyInputStyles});
+export const Select = factory<SelectFactory>((props, ref) => {
+    if (props.readOnly && !props.disabled) {
+        return <ReadOnlySelect ref={ref} {...props} />;
+    }
+    return <MantineSelect ref={ref} {...props} />;
+});

package/src/components/read-only/index.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from './PasswordInput';
2	+ export * from './Select';

package/src/components/table/__tests__/TablePredicate.spec.tsx CHANGED Viewed

@@ -20,6 +20,7 @@ describe('Table.Predicate', () => {
                     <Table.Header>
                         <Table.Predicate
                             id="rank"
+                            label="Rank"
                             data={[
                                 {value: 'first', label: 'First'},
                                 {value: 'second', label: 'Second'},
@@ -35,7 +36,7 @@ describe('Table.Predicate', () => {
         };
         render(<Fixture />);
         expect(screen.getByRole('button', {name: '2', current: 'page'})).toBeVisible();
-        await user.click(screen.getByRole('textbox', {name: 'rank'}));
+        await user.click(screen.getByRole('textbox', {name: 'Rank'}));
         await user.click(screen.getByRole('option', {name: 'First'}));
         expect(screen.getByRole('button', {name: '1', current: 'page'})).toBeVisible();
     });

package/src/components/table/index.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 export {flexRender as renderTableCell} from '@tanstack/react-table';
 export * from './Table';
-export {TablePredicateProps} from './table-predicate/TablePredicate';
+export {type TablePredicateProps} from './table-predicate/TablePredicate';
 export {type TableAction, type TableLayout, type TableLayoutProps, type TableProps} from './Table.types';
 export {useTableContext} from './TableContext';
 export {useTable, type TableState, type TableStore, type UseTableOptions} from './use-table';

package/src/components/table/table-predicate/TablePredicate.tsx CHANGED Viewed

@@ -31,11 +31,10 @@ export interface TablePredicateProps
      */
     data: ComboboxData;
     /**
-     * Input label (not displayed for now)
+     * The label to display next to the Select
      *
-     * @default default to the predicate id
      */
-    label?: string;
+    label: string;
 }
 export type TablePredicateFactory = Factory<{

package/src/index.ts CHANGED Viewed

@@ -21,6 +21,8 @@ export {
     CopyToClipboard,
     Header,
     Menu,
+    PasswordInput,
+    Select,
     Table,
     type ActionIconProps,
     type ButtonProps,

package/src/styles/Input.module.css CHANGED Viewed

@@ -1,3 +1,3 @@
 .input {
-    color: var(--mantine-color-gray-7);
+    --input-color: var(--mantine-color-gray-7);
 }

package/src/styles/ReadOnlyInput.module.css ADDED Viewed

@@ -0,0 +1,8 @@
+.input {
+    cursor: text;
+    --input-bd: transparent;
+    --input-bg: var(--mantine-color-gray-2);
+    --input-color: var(--mantine-color-gray-7);
+    --input-placeholder-color: var(--mantine-color-gray-7);
+}

package/src/styles/ReadOnlyState.module.css ADDED Viewed

@@ -0,0 +1,3 @@
+.root {
+    pointer-events: none;
+}