npm - @coveord/plasma-mantine - Versions diffs - 51.1.30 → 52.0.0 - Mend

@coveord/plasma-mantine 51.1.30 → 52.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 (83) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/theme/Theme.tsx"],"sourcesContent":["import {InfoSize24Px} from '@coveord/plasma-react-icons';\nimport {color} from '@coveord/plasma-tokens';\nimport {getSize, MantineThemeOverride, NotificationProps, rem} from '@mantine/core';\n\nimport {PlasmaColors} from './PlasmaColors';\n\nexport const plasmaTheme: MantineThemeOverride = {\n // These are overrides over https://github.com/mantinedev/mantine/blob/master/src/mantine-styles/src/theme/default-theme.ts\n colorScheme: 'light',\n fontFamily: 'canada-type-gibson, sans-serif',\n black: color.primary.gray[9],\n defaultRadius: 8,\n lineHeight: 1.5,\n spacing: {\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: undefined, fontWeight: 300},\n h2: {fontSize: '32px', lineHeight: undefined, fontWeight: 500},\n h3: {fontSize: '24px', lineHeight: undefined, fontWeight: 500},\n h4: {fontSize: '18px', lineHeight: undefined, fontWeight: 300},\n h5: {fontSize: '14px', lineHeight: undefined, fontWeight: 500},\n h6: {fontSize: '12px', lineHeight: undefined, 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 Alert: {\n defaultProps: {\n icon: <InfoSize24Px height={24} />,\n color: 'navy',\n },\n styles: {\n title: {\n fontWeight: 500,\n },\n },\n },\n Title: {\n styles: (theme) => ({\n root: {\n '&:is(h1,h2,h3,h4,h5,h6)': {letterSpacing: '0.011em'},\n },\n }),\n },\n Text: {\n defaultProps: {\n weight: 300,\n },\n styles: (theme, {}, {size}) => ({\n root: {\n fontSize: getSize({size: size ?? 'sm', sizes: theme.fontSizes}),\n },\n }),\n },\n Button: {\n styles: () => ({\n root: {\n fontWeight: 400,\n },\n }),\n variants: {\n outline: () => ({\n root: {\n backgroundColor: 'white',\n },\n }),\n },\n },\n Modal: {\n styles: (theme, {fullScreen}, {size}) => ({\n content: {\n flex: fullScreen\n ? '0 0 100%'\n : `0 0 ${getSize({\n size,\n sizes: {\n xs: rem(440),\n sm: rem(550),\n md: rem(800),\n lg: rem(1334),\n xl: rem('85%'),\n },\n })}`,\n overflow: 'auto',\n },\n title: {\n width: '100%',\n fontSize: theme.headings.sizes.h3.fontSize,\n lineHeight: theme.headings.sizes.h3.lineHeight,\n fontWeight: 500,\n },\n }),\n defaultProps: {\n overlayProps: {\n color: color.primary.navy[9],\n opacity: 0.9,\n },\n },\n },\n InputWrapper: {\n defaultProps: {\n withAsterisk: false,\n },\n styles: (theme) => ({\n label: {\n marginBottom: theme.spacing.xs,\n },\n description: {\n fontSize: theme.fontSizes.sm,\n color: theme.colors.gray[7],\n marginBottom: theme.spacing.xs,\n },\n invalid: {\n color: theme.colors.red[9],\n borderColor: theme.colors.red[6],\n },\n error: {\n color: theme.colors.red[9],\n },\n }),\n },\n TextInput: {\n defaultProps: {\n radius: 8,\n },\n },\n Tooltip: {\n defaultProps: {\n color: 'navy',\n withArrow: true,\n withinPortal: true,\n multiline: true,\n },\n },\n Loader: {\n defaultProps: {\n variant: 'dots',\n color: 'action',\n },\n },\n DateRangePicker: {\n styles: {\n cell: {\n textAlign: 'center',\n },\n },\n },\n Anchor: {\n defaultProps: {\n color: 'action.6',\n },\n styles: (theme) => ({\n root: {\n ...theme.fn.hover({\n textDecoration: 'underline',\n color: theme.colors.action[8],\n }),\n },\n }),\n },\n Checkbox: {\n defaultProps: {\n radius: 'sm',\n },\n },\n List: {\n styles: () => ({\n root: {\n listStyleType: 'disc',\n },\n }),\n },\n Radio: {\n styles: {\n labelWrapper: {\n display: 'flex',\n alignItems: 'flex-start',\n },\n },\n },\n Popover: {\n defaultProps: {\n shadow: 'md',\n withArrow: true,\n },\n },\n Badge: {\n styles: {\n root: {\n textTransform: 'none',\n padding: '4px 8px',\n fontWeight: 500,\n },\n },\n },\n ColorSwatch: {\n defaultProps: {\n size: 8,\n withShadow: false,\n },\n },\n MenuItem: {\n defaultProps: {\n fw: 300,\n },\n },\n Notification: {\n styles: (theme, {color: notificationType}: NotificationProps) => ({\n root: {\n borderColor: theme.colors.gray[3],\n backgroundColor: theme.colors.gray[0],\n boxShadow: theme.shadows.lg,\n padding: theme.spacing.sm,\n '&[data-with-icon]': {\n paddingLeft: theme.spacing.sm,\n },\n },\n icon: {\n backgroundColor: 'transparent',\n marginRight: theme.spacing.sm,\n color: theme.colors?.[notificationType][6],\n },\n closeButton: {\n margin: theme.spacing.xs,\n color: theme.colors.gray[5],\n },\n }),\n defaultProps: {\n icon: <InfoSize24Px height={24} />,\n color: 'info',\n },\n },\n Skeleton: {\n styles: {\n visible: {\n '&::before': {zIndex: 'unset'},\n '&::after': {zIndex: 'unset'},\n },\n },\n },\n Segmented: {\n styles: {\n control: {\n zIndex: 'unset',\n },\n },\n },\n },\n};\n"],"names":["InfoSize24Px","color","getSize","rem","PlasmaColors","plasmaTheme","colorScheme","fontFamily","black","primary","gray","defaultRadius","lineHeight","spacing","xs","sm","md","lg","xl","primaryColor","headings","fontWeight","sizes","h1","fontSize","undefined","h2","h3","h4","h5","h6","shadows","colors","components","Alert","defaultProps","icon","height","styles","title","Title","theme","root","letterSpacing","Text","weight","size","fontSizes","Button","variants","outline","backgroundColor","Modal","fullScreen","content","flex","overflow","width","overlayProps","navy","opacity","InputWrapper","withAsterisk","label","marginBottom","description","invalid","red","borderColor","error","TextInput","radius","Tooltip","withArrow","withinPortal","multiline","Loader","variant","DateRangePicker","cell","textAlign","Anchor","fn","hover","textDecoration","action","Checkbox","List","listStyleType","Radio","labelWrapper","display","alignItems","Popover","shadow","Badge","textTransform","padding","ColorSwatch","withShadow","MenuItem","fw","Notification","notificationType","boxShadow","paddingLeft","marginRight","closeButton","margin","Skeleton","visible","zIndex","Segmented","control"],"mappings":"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"}
1	+ {"version":3,"sources":["../../../src/theme/Theme.tsx"],"sourcesContent":["import {InfoSize24Px} from '@coveord/plasma-react-icons';\nimport {color} from '@coveord/plasma-tokens';\nimport {getSize, MantineThemeOverride, NotificationProps, rem} from '@mantine/core';\n\nimport {PlasmaColors} from './PlasmaColors';\n\nexport const plasmaTheme: MantineThemeOverride = {\n // These are overrides over https://github.com/mantinedev/mantine/blob/master/src/mantine-styles/src/theme/default-theme.ts\n colorScheme: 'light',\n fontFamily: 'canada-type-gibson, sans-serif',\n black: color.primary.gray[9],\n defaultRadius: 8,\n lineHeight: 1.5,\n spacing: {\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: undefined, fontWeight: 300},\n h2: {fontSize: '32px', lineHeight: undefined, fontWeight: 500},\n h3: {fontSize: '24px', lineHeight: undefined, fontWeight: 500},\n h4: {fontSize: '18px', lineHeight: undefined, fontWeight: 300},\n h5: {fontSize: '14px', lineHeight: undefined, fontWeight: 500},\n h6: {fontSize: '12px', lineHeight: undefined, 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 Alert: {\n defaultProps: {\n icon: <InfoSize24Px height={24} />,\n color: 'navy',\n },\n styles: {\n title: {\n fontWeight: 500,\n },\n },\n },\n Title: {\n styles: {\n root: {\n '&:is(h1,h2,h3,h4,h5,h6)': {letterSpacing: '0.011em'},\n },\n },\n },\n Text: {\n defaultProps: {\n weight: 300,\n },\n styles: (theme, {}, {size}) => ({\n root: {\n fontSize: getSize({size: size ?? 'sm', sizes: theme.fontSizes}),\n },\n }),\n },\n Button: {\n styles: () => ({\n root: {\n fontWeight: 400,\n },\n }),\n variants: {\n outline: () => ({\n root: {\n backgroundColor: 'white',\n },\n }),\n },\n },\n Modal: {\n styles: (theme, {fullScreen}, {size}) => ({\n content: {\n flex: fullScreen\n ? '0 0 100%'\n : `0 0 ${getSize({\n size,\n sizes: {\n xs: rem(440),\n sm: rem(550),\n md: rem(800),\n lg: rem(1334),\n xl: rem('85%'),\n },\n })}`,\n overflow: 'auto',\n },\n title: {\n width: '100%',\n fontSize: theme.headings.sizes.h3.fontSize,\n lineHeight: theme.headings.sizes.h3.lineHeight,\n fontWeight: 500,\n },\n }),\n defaultProps: {\n overlayProps: {\n color: color.primary.navy[9],\n opacity: 0.9,\n },\n },\n },\n InputWrapper: {\n defaultProps: {\n withAsterisk: false,\n },\n styles: (theme) => ({\n label: {\n marginBottom: theme.spacing.xs,\n },\n description: {\n fontSize: theme.fontSizes.sm,\n color: theme.colors.gray[7],\n marginBottom: theme.spacing.xs,\n },\n invalid: {\n color: theme.colors.red[9],\n borderColor: theme.colors.red[6],\n },\n error: {\n color: theme.colors.red[9],\n },\n }),\n },\n TextInput: {\n defaultProps: {\n radius: 8,\n },\n },\n Tooltip: {\n defaultProps: {\n color: 'navy',\n withArrow: true,\n withinPortal: true,\n multiline: true,\n },\n },\n Loader: {\n defaultProps: {\n variant: 'dots',\n color: 'action',\n },\n },\n DateRangePicker: {\n styles: {\n cell: {\n textAlign: 'center',\n },\n },\n },\n Anchor: {\n defaultProps: {\n color: 'action.6',\n },\n styles: (theme) => ({\n root: {\n ...theme.fn.hover({\n textDecoration: 'underline',\n color: theme.colors.action[8],\n }),\n },\n }),\n },\n Checkbox: {\n defaultProps: {\n radius: 'sm',\n },\n styles: (theme) => ({\n label: {\n fontSize: theme.fontSizes.sm,\n fontWeight: 300,\n },\n }),\n },\n List: {\n styles: () => ({\n root: {\n listStyleType: 'disc',\n },\n }),\n },\n Radio: {\n styles: {\n labelWrapper: {\n display: 'flex',\n alignItems: 'flex-start',\n },\n },\n },\n Popover: {\n defaultProps: {\n shadow: 'md',\n withArrow: true,\n },\n },\n Badge: {\n styles: {\n root: {\n textTransform: 'none',\n padding: '4px 8px',\n fontWeight: 500,\n },\n },\n },\n ColorSwatch: {\n defaultProps: {\n size: 8,\n withShadow: false,\n },\n },\n MenuItem: {\n defaultProps: {\n fw: 300,\n },\n },\n Notification: {\n styles: (theme, {color: notificationType}: NotificationProps) => ({\n root: {\n borderColor: theme.colors.gray[3],\n backgroundColor: theme.colors.gray[0],\n boxShadow: theme.shadows.lg,\n padding: theme.spacing.sm,\n '&[data-with-icon]': {\n paddingLeft: theme.spacing.sm,\n },\n },\n icon: {\n backgroundColor: 'transparent',\n marginRight: theme.spacing.sm,\n color: theme.colors?.[notificationType][6],\n },\n closeButton: {\n margin: theme.spacing.xs,\n color: theme.colors.gray[5],\n },\n }),\n defaultProps: {\n icon: <InfoSize24Px height={24} />,\n color: 'info',\n },\n },\n Skeleton: {\n styles: {\n visible: {\n '&::before': {zIndex: 'unset'},\n '&::after': {zIndex: 'unset'},\n },\n },\n },\n Segmented: {\n styles: {\n control: {\n zIndex: 'unset',\n },\n },\n },\n },\n};\n"],"names":["InfoSize24Px","color","getSize","rem","PlasmaColors","plasmaTheme","colorScheme","fontFamily","black","primary","gray","defaultRadius","lineHeight","spacing","xs","sm","md","lg","xl","primaryColor","headings","fontWeight","sizes","h1","fontSize","undefined","h2","h3","h4","h5","h6","shadows","colors","components","Alert","defaultProps","icon","height","styles","title","Title","root","letterSpacing","Text","weight","theme","size","fontSizes","Button","variants","outline","backgroundColor","Modal","fullScreen","content","flex","overflow","width","overlayProps","navy","opacity","InputWrapper","withAsterisk","label","marginBottom","description","invalid","red","borderColor","error","TextInput","radius","Tooltip","withArrow","withinPortal","multiline","Loader","variant","DateRangePicker","cell","textAlign","Anchor","fn","hover","textDecoration","action","Checkbox","List","listStyleType","Radio","labelWrapper","display","alignItems","Popover","shadow","Badge","textTransform","padding","ColorSwatch","withShadow","MenuItem","fw","Notification","notificationType","boxShadow","paddingLeft","marginRight","closeButton","margin","Skeleton","visible","zIndex","Segmented","control"],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@coveord/plasma-mantine",
-  "version": "51.1.30",
+  "version": "52.0.0",
   "description": "A Plasma flavoured Mantine theme",
   "keywords": [
     "plasma",
@@ -14,7 +14,7 @@
   "module": "./dist/esm/index.js",
   "types": "./dist/definitions/index.d.ts",
   "dependencies": {
-    "@mantine/utils": "6.0.1",
+    "@mantine/utils": "6.0.6",
     "@monaco-editor/react": "4.4.5",
     "@swc/helpers": "0.4.14",
     "@tanstack/react-table": "8.7.9",
@@ -25,20 +25,20 @@
     "lodash.defaultsdeep": "4.6.1",
     "monaco-editor": "0.34.0",
     "react-beautiful-dnd": "13.1.1",
-    "@coveord/plasma-react-icons": "51.1.30",
-    "@coveord/plasma-tokens": "50.0.2"
+    "@coveord/plasma-react-icons": "52.0.0",
+    "@coveord/plasma-tokens": "52.0.0"
   },
   "devDependencies": {
     "@emotion/react": "11.10.6",
-    "@mantine/carousel": "6.0.1",
-    "@mantine/core": "6.0.1",
-    "@mantine/dates": "6.0.1",
-    "@mantine/form": "6.0.1",
-    "@mantine/hooks": "6.0.1",
-    "@mantine/modals": "6.0.1",
-    "@mantine/notifications": "6.0.1",
+    "@mantine/carousel": "6.0.6",
+    "@mantine/core": "6.0.6",
+    "@mantine/dates": "6.0.6",
+    "@mantine/form": "6.0.6",
+    "@mantine/hooks": "6.0.6",
+    "@mantine/modals": "6.0.6",
+    "@mantine/notifications": "6.0.6",
     "@swc/cli": "0.1.62",
-    "@swc/core": "1.3.42",
+    "@swc/core": "1.3.44",
     "@swc/jest": "0.2.24",
     "@testing-library/dom": "8.18.1",
     "@testing-library/jest-dom": "5.16.5",
@@ -51,10 +51,10 @@
     "@types/react-beautiful-dnd": "13.1.4",
     "@types/react-dom": "18.0.6",
     "@types/testing-library__jest-dom": "5.14.5",
-    "csstype": "3.1.1",
+    "csstype": "3.1.2",
     "embla-carousel-react": "7.1.0",
     "eslint-plugin-testing-library": "5.7.2",
-    "eslint-plugin-vitest": "0.0.54",
+    "eslint-plugin-vitest": "0.0.57",
     "eslint-plugin-vitest-globals": "1.2.0",
     "identity-obj-proxy": "3.0.0",
     "jest": "29.2.1",
@@ -64,8 +64,8 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "rimraf": "3.0.2",
-    "tslib": "2.4.0",
-    "typescript": "4.9.3",
+    "tslib": "2.5.0",
+    "typescript": "5.0.3",
     "vitest": "0.28.3"
   },
   "peerDependencies": {

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

@@ -1,9 +1,6 @@
-import {CheckSize16Px, CopySize16Px} from '@coveord/plasma-react-icons';
 import {
-    ActionIcon,
     Box,
     Center,
-    CopyButton,
     createStyles,
     DefaultProps,
     Group,
@@ -14,7 +11,6 @@ import {
     Selectors,
     Space,
     Stack,
-    Tooltip,
     useComponentDefaultProps,
 } from '@mantine/core';
 import {useUncontrolled} from '@mantine/hooks';
@@ -23,6 +19,7 @@ import {FunctionComponent, useEffect, useState} from 'react';
 import {useParentHeight} from '../../hooks';
 import {XML} from './languages/xml';
+import {CopyToClipboard} from '../copyToClipboard';
 const useStyles = createStyles((theme) => ({
     root: {},
@@ -162,15 +159,7 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
     const _copyButton = (
         <Group position="right">
-            <CopyButton value={_value} timeout={2000}>
-                {({copied, copy}) => (
-                    <Tooltip label={copied ? 'Copied' : 'Copy'} withArrow position="right">
-                        <ActionIcon color={copied ? 'lime' : 'gray'} onClick={copy}>
-                            {copied ? <CheckSize16Px height={16} /> : <CopySize16Px height={16} />}
-                        </ActionIcon>
-                    </Tooltip>
-                )}
-            </CopyButton>
+            <CopyToClipboard value={_value} />
         </Group>
     );

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

@@ -12,8 +12,8 @@ import {
     useComponentDefaultProps,
 } from '@mantine/core';
 import {ReorderPayload} from '@mantine/form/lib/types';
-import {useDidUpdate, useId} from '@mantine/hooks';
-import {ReactNode} from 'react';
+import {useDidUpdate} from '@mantine/hooks';
+import {ReactNode, useId} from 'react';
 import {DragDropContext, Droppable} from 'react-beautiful-dnd';
 import {Button} from '../button';
@@ -40,6 +40,16 @@ interface CollectionProps<T>
      * @default []
      */
     value?: T[];
+    /**
+     * Defines how each item is uniquely identified. It is highly recommended that you specify this prop to an ID that makes sense.
+     *
+     * This method is required when using this component with ReactHookForm.
+     *
+     * @see {@link https://react-hook-form.com/api/usefieldarray/} for using a collection with ReactHookForm.
+     *
+     * @param originalItem The original item
+     */
+    getItemId?: (originalItem: T) => string;
     /**
      * Unused, has no effect
      */
@@ -146,6 +156,7 @@ export const Collection = <T,>(props: CollectionProps<T>) => {
         descriptionProps,
         error,
         errorProps,
+        getItemId,
         // Style props
         classNames,
@@ -156,7 +167,7 @@ export const Collection = <T,>(props: CollectionProps<T>) => {
         ...others
     } = useComponentDefaultProps('Collection', defaultProps as CollectionProps<T>, props);
     const {classes, cx} = useStyles(null, {classNames, name: 'Collection', styles, unstyled});
-    const collectionID = useId('dnd-droppable');
+    const collectionID = useId();
     const hasOnlyOneItem = value.length === 1;
@@ -188,7 +199,7 @@ export const Collection = <T,>(props: CollectionProps<T>) => {
     const items = value.map((item, index) => (
         <CollectionItem
-            key={index}
+            key={(getItemId?.(item) ?? index) as string}
             disabled={disabled}
             draggable={draggable}
             index={index}

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

@@ -62,7 +62,7 @@ const DraggableCollectionItem: FunctionComponent<PropsWithChildren<CollectionIte
     const removeButton = removable && onRemove ? <RemoveButton onClick={onRemove} /> : null;
     return (
-        <Draggable index={index} draggableId={index.toString()}>
+        <Draggable key={index} index={index} draggableId={index.toString()}>
             {(provided, {isDragging}) => (
                 <Group
                     ref={provided.innerRef}

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import {CheckSize24Px, CopySize24Px} from '@coveord/plasma-react-icons';
+import {TextInput, CopyButton, Tooltip, ActionIcon, createStyles} from '@mantine/core';
+export interface CopyToClipboardProps {
+    /**
+     * The value to be copied to the clipboard.
+     */
+    value: string;
+    /**
+     * Whether to display the string to be copied alongside the button.
+     *
+     * @default false
+     */
+    withLabel?: boolean;
+}
+const useStyles = createStyles((theme) => ({
+    input: {
+        color: theme.colors.gray[7],
+    },
+}));
+const CopyToClipboardButton: React.FunctionComponent<{value: string}> = ({value}) => (
+    <CopyButton value={value} timeout={2000}>
+        {({copied, copy}) => (
+            <Tooltip label={copied ? 'Copied' : 'Copy'} withArrow position="top">
+                <ActionIcon color={copied ? 'teal' : 'gray'} onClick={copy}>
+                    {copied ? <CheckSize24Px /> : <CopySize24Px />}
+                </ActionIcon>
+            </Tooltip>
+        )}
+    </CopyButton>
+);
+export const CopyToClipboard: React.FunctionComponent<CopyToClipboardProps> = ({value, withLabel}) => {
+    const {classes} = useStyles();
+    return withLabel ? (
+        <TextInput
+            classNames={{
+                input: classes.input,
+            }}
+            value={value}
+            readOnly
+            rightSection={<CopyToClipboardButton value={value} />}
+        />
+    ) : (
+        <CopyToClipboardButton value={value} />
+    );
+};

package/src/components/copyToClipboard/__tests__/CopyToClipboard.spec.tsx ADDED Viewed

@@ -0,0 +1,25 @@
+import {render, screen} from '@test-utils';
+import {CopyToClipboard} from '../CopyToClipboard';
+describe('CopyToClipboard', () => {
+    it('should display only a button by default', () => {
+        const testValue = 'text value';
+        render(<CopyToClipboard value={testValue} />);
+        expect(screen.getByRole('button', {name: /copy/i})).toBeVisible();
+        expect(screen.queryByDisplayValue(testValue)).not.toBeInTheDocument();
+        expect(document.querySelector('input')).not.toBeInTheDocument();
+    });
+    describe('when "isLabel" is true', () => {
+        it('should display an input element', () => {
+            const testValue = 'text value';
+            render(<CopyToClipboard value={testValue} withLabel />);
+            expect(screen.getByDisplayValue(testValue)).toBeVisible();
+            expect(screen.getByRole('button', {name: /copy/i})).toBeVisible();
+            expect(document.querySelector('input')).toBeInTheDocument();
+        });
+    });
+});

package/src/components/copyToClipboard/index.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export * from './CopyToClipboard';

package/src/components/index.ts CHANGED Viewed

@@ -10,3 +10,4 @@ export * from './prompt';
 export * from './modal-wizard';
 export * from './button';
 export * from './menu';
+export * from './copyToClipboard';

package/src/components/modal-wizard/ModalWizard.tsx CHANGED Viewed

@@ -54,12 +54,12 @@ export interface ModalWizardProps
     /**
      * A callback function that is executed when the user clicks on the next button
      */
-    onNext?: () => unknown;
+    onNext?: (newStep: number) => unknown;
     /**
      * A callback function that is executed when the user clicks on the previous button
      */
-    onPrevious?: () => unknown;
+    onPrevious?: (newStep: number) => unknown;
     /**
      * A function that is executed when user completes all the steps.
@@ -210,7 +210,7 @@ export const ModalWizard: ModalWizardType = ({
                             if (isFirstStep) {
                                 handleClose(true);
                             } else {
-                                onPrevious?.();
+                                onPrevious?.(currentStepIndex - 1);
                                 setCurrentStepIndex(currentStepIndex - 1);
                             }
                         }}
@@ -224,7 +224,7 @@ export const ModalWizard: ModalWizardType = ({
                             if (isLastStep) {
                                 onFinish?.() ?? handleClose(false);
                             } else {
-                                onNext?.();
+                                onNext?.(currentStepIndex + 1);
                                 setCurrentStepIndex(currentStepIndex + 1);
                             }
                         }}

package/src/components/modal-wizard/__tests__/ModalWizard.spec.tsx CHANGED Viewed

@@ -34,6 +34,8 @@ describe('ModalWizard', () => {
         ];
         const isDirty = () => false;
+        const onNextSpy = vi.fn();
+        const onPreviousSpy = vi.fn();
         render(
             <ModalWizard
@@ -41,6 +43,8 @@ describe('ModalWizard', () => {
                 handleDirtyState={() => confirm('Are you sure you want to close?')}
                 opened={true}
                 onClose={undefined}
+                onNext={onNextSpy}
+                onPrevious={onPreviousSpy}
             >
                 {modelSteps.map((model_item) => (
                     <ModalWizard.Step
@@ -75,6 +79,8 @@ describe('ModalWizard', () => {
         await user.click(nextButton);
+        expect(onNextSpy).toHaveBeenCalledWith(1);
         expect(
             screen.getByRole('heading', {
                 name: /current step is: 2/i,
@@ -102,6 +108,8 @@ describe('ModalWizard', () => {
         await user.click(nextButton);
+        expect(onNextSpy).toHaveBeenCalledWith(2);
         expect(
             screen.getByRole('heading', {
                 name: /current step is: 3/i,
@@ -135,6 +143,8 @@ describe('ModalWizard', () => {
             })
         );
+        expect(onNextSpy).toHaveBeenCalledWith(1);
         expect(
             screen.getByRole('heading', {
                 name: /current step is: 2/i,

package/src/components/table/Table.tsx CHANGED Viewed

@@ -26,6 +26,7 @@ import {TableHeader} from './TableHeader';
 import {TablePagination} from './TablePagination';
 import {TablePerPage} from './TablePerPage';
 import {TablePredicate} from './TablePredicate';
+import {TableConsumer} from './TableConsumer';
 import {TableSelectableColumn} from './TableSelectableColumn';
 import {Th} from './Th';
 import {useRowSelection} from './useRowSelection';
@@ -55,6 +56,7 @@ export const Table: TableType = <T,>({
     const convertedChildren = Children.toArray(children) as ReactElement[];
     const header = convertedChildren.find((child) => child.type === TableHeader);
     const footer = convertedChildren.find((child) => child.type === TableFooter);
+    const consumer = convertedChildren.find((child) => child.type === TableConsumer);
     const {predicates, dateRange, ...initialStateWithoutForm} = initialState;
     const form = useForm<TableFormType>({
@@ -189,6 +191,7 @@ export const Table: TableType = <T,>({
                     getPageCount: table.getPageCount,
                 }}
             >
+                {consumer}
                 {!rows.length && !isFiltered && !loading ? (
                     noDataChildren
                 ) : (
@@ -235,3 +238,4 @@ Table.Predicate = TablePredicate;
 Table.CollapsibleColumn = TableCollapsibleColumn;
 Table.AccordionColumn = TableAccordionColumn;
 Table.DateRangePicker = TableDateRangePicker;
+Table.Consumer = TableConsumer;

package/src/components/table/Table.types.ts CHANGED Viewed

@@ -7,8 +7,8 @@ import {
     TableState as TanstackTableState,
 } from '@tanstack/table-core';
 import {Dispatch, ReactElement, ReactNode, RefObject} from 'react';
-import {DateRangePickerValue} from '../date-range-picker/DateRangePickerInlineCalendar';
+import {DateRangePickerValue} from '../date-range-picker/DateRangePickerInlineCalendar';
 import {TableActions} from './TableActions';
 import {TableAccordionColumn, TableCollapsibleColumn} from './TableCollapsibleColumn';
 import {TableDateRangePicker} from './TableDateRangePicker';
@@ -18,6 +18,7 @@ import {TableHeader} from './TableHeader';
 import {TablePagination} from './TablePagination';
 import {TablePerPage} from './TablePerPage';
 import {TablePredicate} from './TablePredicate';
+import {TableConsumer} from './TableConsumer';
 export type RowSelectionWithData<TData> = Record<string, TData>;
 export interface RowSelectionState<TData> {
@@ -206,4 +207,5 @@ export interface TableType {
     DateRangePicker: typeof TableDateRangePicker;
     CollapsibleColumn: typeof TableCollapsibleColumn;
     AccordionColumn: typeof TableAccordionColumn;
+    Consumer: typeof TableConsumer;
 }

package/src/components/table/TableConsumer.tsx ADDED Viewed

@@ -0,0 +1,3 @@
+import type {FunctionComponent, ReactNode} from 'react';
+export const TableConsumer: FunctionComponent<{children: ReactNode}> = ({children}) => <>{children}</>;

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

@@ -137,6 +137,31 @@ describe('Table', () => {
         expect(screen.queryByTestId('empty-state')).not.toBeInTheDocument();
     });
+    it('updates the table when a component in Table.Consumer triggers a change', async () => {
+        const user = userEvent.setup();
+        const spy = vi.fn();
+        const Fixture = () => {
+            const {onChange} = useTable();
+            return <button onClick={() => onChange()}>Click me</button>;
+        };
+        render(
+            <Table onChange={spy} data={[{id: '🆔', firstName: 'first', lastName: 'last'}]} columns={columns}>
+                <Table.Consumer>
+                    <Fixture />
+                </Table.Consumer>
+            </Table>
+        );
+        expect(screen.getByRole('button', {name: 'Click me'})).toBeVisible();
+        expect(spy).not.toHaveBeenCalled();
+        await user.click(screen.getByRole('button', {name: 'Click me'}));
+        await waitFor(() => {
+            expect(spy).toHaveBeenCalledTimes(1);
+        });
+    });
     describe('shows a loading animation', () => {
         const doRender = (props: Omit<TableProps<RowData>, 'columns'>) => {
             const NoData = () => {

package/src/index.ts CHANGED Viewed

@@ -24,6 +24,8 @@ export {
     type ButtonProps,
     Menu,
     type MenuItemProps,
+    CopyToClipboard,
+    type CopyToClipboardProps,
 } from './components';
 export {useForm, createFormContext} from './form';

package/src/theme/Theme.tsx CHANGED Viewed

@@ -52,11 +52,11 @@ export const plasmaTheme: MantineThemeOverride = {
             },
         },
         Title: {
-            styles: (theme) => ({
+            styles: {
                 root: {
                     '&:is(h1,h2,h3,h4,h5,h6)': {letterSpacing: '0.011em'},
                 },
-            }),
+            },
         },
         Text: {
             defaultProps: {
@@ -178,6 +178,12 @@ export const plasmaTheme: MantineThemeOverride = {
             defaultProps: {
                 radius: 'sm',
             },
+            styles: (theme) => ({
+                label: {
+                    fontSize: theme.fontSizes.sm,
+                    fontWeight: 300,
+                },
+            }),
         },
         List: {
             styles: () => ({