Merge branch 'master' of github.com:mantinedev/mantine into dev

mantinedev · Sep 17, 2022 · 55a93c8 · 55a93c8
2 parents 73aa01f + 1638912
commit 55a93c8
Show file tree

Hide file tree

Showing 38 changed files with 146 additions and 153 deletions.
diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
   "workspaces": [
     "src/*"
   ],
-  "version": "5.3.1",
+  "version": "5.3.3",
   "description": "Mantine Components Monorepo",
   "main": "index.js",
   "repository": "https://github.com/mantinedev/mantine.git",
@@ -140,9 +140,9 @@
     "prism-react-renderer": "^1.2.1",
     "quill-mention": "^3.0.8",
     "react": "18.1.0",
-    "react-dropzone": "14.2.1",
+    "react-dropzone": "14.2.2",
     "react-input-mask": "^2.0.4",
-    "react-quill": "2.0.0-beta.4",
+    "react-quill": "2.0.0",
     "react-textarea-autosize": "8.3.4",
     "react-transition-group": "4.4.2",
     "stylis-plugin-rtl": "^2.1.1",

diff --git a/src/mantine-carousel/package.json b/src/mantine-carousel/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@mantine/carousel",
   "description": "Embla based carousel",
-  "version": "5.3.1",
+  "version": "5.3.3",
   "main": "cjs/index.js",
   "module": "esm/index.js",
   "types": "lib/index.d.ts",
@@ -22,13 +22,13 @@
     "slick"
   ],
   "peerDependencies": {
-    "@mantine/core": "5.3.1",
-    "@mantine/hooks": "5.3.1",
+    "@mantine/core": "5.3.3",
+    "@mantine/hooks": "5.3.3",
     "embla-carousel-react": "^7.0.0",
     "react": ">=16.8.0"
   },
   "dependencies": {
-    "@mantine/utils": "5.3.1"
+    "@mantine/utils": "5.3.3"
   },
   "devDependencies": {}
 }
diff --git a/src/mantine-core/package.json b/src/mantine-core/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@mantine/core",
   "description": "React components library focused on usability, accessibility and developer experience",
-  "version": "5.3.1",
+  "version": "5.3.3",
   "main": "cjs/index.js",
   "module": "esm/index.js",
   "types": "lib/index.d.ts",
@@ -27,13 +27,13 @@
     "emotion"
   ],
   "peerDependencies": {
-    "@mantine/hooks": "5.3.1",
+    "@mantine/hooks": "5.3.3",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
   "dependencies": {
-    "@mantine/utils": "5.3.1",
-    "@mantine/styles": "5.3.1",
+    "@mantine/utils": "5.3.3",
+    "@mantine/styles": "5.3.3",
     "@radix-ui/react-scroll-area": "1.0.0",
     "react-textarea-autosize": "8.3.4",
     "@floating-ui/react-dom-interactions": "0.6.6"

diff --git a/src/mantine-core/src/ActionIcon/ActionIcon.story.tsx b/src/mantine-core/src/ActionIcon/ActionIcon.story.tsx
@@ -111,6 +111,14 @@ export function States() {
   );
 }
 
+export function StatesInsideFieldsetDisabled() {
+  return (
+    <fieldset disabled>
+      <States />
+    </fieldset>
+  );
+}
+
 export function ColorsIndex() {
   return (
     <div style={{ padding: 40 }}>

diff --git a/src/mantine-core/src/ActionIcon/ActionIcon.styles.ts b/src/mantine-core/src/ActionIcon/ActionIcon.styles.ts
@@ -84,7 +84,7 @@ export default createStyles(
 
       '&:active': theme.activeStyles,
 
-      '&[data-disabled]': {
+      '&:disabled, &[data-disabled]': {
         color: theme.colors.gray[theme.colorScheme === 'dark' ? 6 : 4],
         cursor: 'not-allowed',
         backgroundColor:
@@ -96,6 +96,7 @@ export default createStyles(
             ? undefined
             : theme.fn.themeColor('gray', theme.colorScheme === 'dark' ? 8 : 1),
         backgroundImage: 'none',
+        pointerEvents: 'none',
 
         '&:active': {
           transform: 'none',

diff --git a/src/mantine-core/src/ActionIcon/ActionIcon.test.tsx b/src/mantine-core/src/ActionIcon/ActionIcon.test.tsx
@@ -64,4 +64,13 @@ describe('@mantine/core/ActionIcon', () => {
     expect(loading.querySelectorAll('.test-icon')).toHaveLength(0);
     expect(loading.querySelectorAll('svg')).toHaveLength(1);
   });
+
+  it('is disabled when inside fieldset disabled', () => {
+    render(
+      <fieldset disabled>
+        <ActionIcon>$</ActionIcon>
+      </fieldset>
+    );
+    expect(screen.getByRole('button')).toBeDisabled();
+  });
 });
diff --git a/src/mantine-core/src/Button/Button.story.tsx b/src/mantine-core/src/Button/Button.story.tsx
@@ -128,6 +128,16 @@ export function States() {
   );
 }
 
+/**
+ * All buttons should be disabled
+ */
+export function StatesInFieldsetDisabled() {
+  return (
+    <fieldset disabled>
+      <States />
+    </fieldset>
+  );
+}
 export function CustomComponent() {
   return (
     <div style={{ padding: 40 }}>

diff --git a/src/mantine-core/src/Button/Button.styles.ts b/src/mantine-core/src/Button/Button.styles.ts
@@ -135,12 +135,13 @@ export default createStyles(
 
       '&:active': theme.activeStyles,
 
-      '&[data-disabled]': {
+      '&:disabled, &[data-disabled]': {
         borderColor: 'transparent',
         backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2],
         color: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[5],
         cursor: 'not-allowed',
         backgroundImage: 'none',
+        pointerEvents: 'none',
 
         '&:active': {
           transform: 'none',

diff --git a/src/mantine-core/src/Button/Button.test.tsx b/src/mantine-core/src/Button/Button.test.tsx
@@ -52,4 +52,13 @@ describe('@mantine/core/Button', () => {
   it('exposes ButtonGroup as static component', () => {
     expect(Button.Group).toBe(ButtonGroup);
   });
+
+  it('is disabled when inside fieldset disabled', () => {
+    render(
+      <fieldset disabled>
+        <Button type="submit" />
+      </fieldset>
+    );
+    expect(screen.getByRole('button')).toBeDisabled();
+  });
 });
diff --git a/src/mantine-core/src/Modal/Modal.tsx b/src/mantine-core/src/Modal/Modal.tsx
@@ -262,7 +262,7 @@ export function Modal(props: ModalProps) {
                 <Overlay
                   className={classes.overlay}
                   sx={{ position: 'fixed' }}
-                  zIndex={-1}
+                  zIndex={0}
                   onMouseDown={() => closeOnClickOutside && onClose()}
                   blur={overlayBlur}
                   color={

diff --git a/src/mantine-core/src/PasswordInput/PasswordInput.styles.ts b/src/mantine-core/src/PasswordInput/PasswordInput.styles.ts
@@ -17,15 +17,17 @@ export default createStyles((theme, { size, rightSectionWidth }: PasswordInputSt
   innerInput: {
     ...theme.fn.fontStyles(),
     backgroundColor: 'transparent',
-    border: 0,
+    border: '1px solid transparent',
+    borderLeftWidth: 0,
+    borderRightWidth: 0,
     boxSizing: 'border-box',
     position: 'absolute',
     display: 'block',
     width: `calc(100% - ${rightSectionWidth}px)`,
     paddingLeft: theme.fn.size({ size, sizes: INPUT_SIZES }) / 3,
     fontSize: theme.fn.size({ size, sizes: theme.fontSizes }),
     height: theme.fn.size({ size, sizes: INPUT_SIZES }) - 2,
-    lineHeight: `${theme.fn.size({ size, sizes: INPUT_SIZES }) - 2}px`,
+    lineHeight: `${theme.fn.size({ size, sizes: INPUT_SIZES }) - 4}px`,
     color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
     top: 0,
     bottom: 0,

diff --git a/src/mantine-core/src/SegmentedControl/SegmentedControl.story.tsx b/src/mantine-core/src/SegmentedControl/SegmentedControl.story.tsx
@@ -28,3 +28,7 @@ export function EmptyStringValue() {
     />
   );
 }
+
+export function InvisibleIndicator() {
+  return <SegmentedControl color="cyan" data={data} />;
+}
diff --git a/src/mantine-core/src/SegmentedControl/SegmentedControl.tsx b/src/mantine-core/src/SegmentedControl/SegmentedControl.tsx
@@ -212,7 +212,7 @@ export const SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps
 
   return (
     <Box className={cx(classes.root, className)} ref={useMergedRef(observerRef, ref)} {...others}>
-      {typeof value === 'string' && shouldAnimate && (
+      {typeof _value === 'string' && shouldAnimate && (
         <Box
           component="span"
           className={classes.active}

diff --git a/src/mantine-dates/package.json b/src/mantine-dates/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@mantine/dates",
   "description": "Calendars, date and time pickers based on Mantine components",
-  "version": "5.3.1",
+  "version": "5.3.3",
   "main": "cjs/index.js",
   "module": "esm/index.js",
   "types": "lib/index.d.ts",
@@ -23,13 +23,13 @@
     "picker"
   ],
   "peerDependencies": {
-    "@mantine/core": "5.3.1",
-    "@mantine/hooks": "5.3.1",
+    "@mantine/core": "5.3.3",
+    "@mantine/hooks": "5.3.3",
     "dayjs": ">=1.0.0",
     "react": ">=16.8.0"
   },
   "dependencies": {
-    "@mantine/utils": "5.3.1"
+    "@mantine/utils": "5.3.3"
   },
   "devDependencies": {}
 }
diff --git a/src/mantine-demos/package.json b/src/mantine-demos/package.json
@@ -2,7 +2,7 @@
   "name": "@mantine/demos",
   "description": "Demos used in documentation",
   "private": true,
-  "version": "5.3.1",
+  "version": "5.3.3",
   "main": "cjs/index.js",
   "module": "esm/index.js",
   "types": "lib/index.d.ts",
@@ -18,20 +18,20 @@
   "peerDependencies": {
     "react": "*",
     "@emotion/styled": "*",
-    "@mantine/core": "5.3.1",
-    "@mantine/hooks": "5.3.1",
-    "@mantine/dates": "5.3.1",
-    "@mantine/form": "5.3.1",
-    "@mantine/rte": "5.3.1",
-    "@mantine/modals": "5.3.1",
-    "@mantine/nprogress": "5.3.1",
-    "@mantine/notifications": "5.3.1",
-    "@mantine/dropzone": "5.3.1",
-    "@mantine/prism": "5.3.1",
-    "@mantine/labs": "5.3.1",
-    "@mantine/spotlight": "5.3.1",
-    "@mantine/carousel": "5.3.1",
-    "@mantine/ds": "5.3.1",
+    "@mantine/core": "5.3.3",
+    "@mantine/hooks": "5.3.3",
+    "@mantine/dates": "5.3.3",
+    "@mantine/form": "5.3.3",
+    "@mantine/rte": "5.3.3",
+    "@mantine/modals": "5.3.3",
+    "@mantine/nprogress": "5.3.3",
+    "@mantine/notifications": "5.3.3",
+    "@mantine/dropzone": "5.3.3",
+    "@mantine/prism": "5.3.3",
+    "@mantine/labs": "5.3.3",
+    "@mantine/spotlight": "5.3.3",
+    "@mantine/carousel": "5.3.3",
+    "@mantine/ds": "5.3.3",
     "@tabler/icons": "*",
     "react-beautiful-dnd": "*",
     "embla-carousel-autoplay": "*",

diff --git a/src/mantine-demos/src/demos/core/Indicator/Indicator.demo.overflowCount.tsx b/src/mantine-demos/src/demos/core/Indicator/Indicator.demo.overflowCount.tsx
@@ -19,7 +19,7 @@ function Demo() {
           <Avatar size="lg" src="avatar.png" />
         </Indicator>
 
-        <Indicator label={count} showZero={false} overflowCount={999} inline size={22}>
+        <Indicator label={count} showZero={false} dot={false} overflowCount={999} inline size={22}>
           <Avatar size="lg" src="avatar.png" />
         </Indicator>
       </Group>
@@ -51,7 +51,7 @@ function Demo() {
         <Indicator label={count} overflowCount={10} inline size={22}>
           <Avatar size="lg" src={avatar} />
         </Indicator>
-        <Indicator label={count} showZero={false} overflowCount={999} inline size={22}>
+        <Indicator label={count} showZero={false} dot={false} overflowCount={999} inline size={22}>
           <Avatar size="lg" src={avatar} />
         </Indicator>
       </Group>

diff --git a/src/mantine-dropzone/package.json b/src/mantine-dropzone/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@mantine/dropzone",
   "description": "Dropzone component built with Mantine theme and components",
-  "version": "5.3.1",
+  "version": "5.3.3",
   "main": "cjs/index.js",
   "module": "esm/index.js",
   "types": "lib/index.d.ts",
@@ -28,14 +28,14 @@
     "upload"
   ],
   "peerDependencies": {
-    "@mantine/core": "5.3.1",
-    "@mantine/hooks": "5.3.1",
+    "@mantine/core": "5.3.3",
+    "@mantine/hooks": "5.3.3",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
   "dependencies": {
-    "react-dropzone": "14.2.1",
-    "@mantine/utils": "5.3.1"
+    "react-dropzone": "14.2.2",
+    "@mantine/utils": "5.3.3"
   },
   "devDependencies": {}
 }
diff --git a/src/mantine-ds/package.json b/src/mantine-ds/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@mantine/ds",
   "description": "Internal Mantine components used on *.mantine.dev websites",
-  "version": "5.3.1",
+  "version": "5.3.3",
   "main": "cjs/index.js",
   "module": "esm/index.js",
   "types": "lib/index.d.ts",
@@ -18,13 +18,13 @@
     "react"
   ],
   "peerDependencies": {
-    "@mantine/core": "5.3.1",
-    "@mantine/hooks": "5.3.1",
+    "@mantine/core": "5.3.3",
+    "@mantine/hooks": "5.3.3",
     "@tabler/icons": "*",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
   "dependencies": {
-    "@mantine/utils": "5.3.1"
+    "@mantine/utils": "5.3.3"
   }
 }
diff --git a/src/mantine-form/package.json b/src/mantine-form/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@mantine/form",
   "description": "Mantine form management library",
-  "version": "5.3.1",
+  "version": "5.3.3",
   "main": "cjs/index.js",
   "module": "esm/index.js",
   "types": "lib/index.d.ts",