[@mantine/core] ColorInput: Prevent dropdown from opening if withPick…

…er={false} and there are no swatches

package.json

@@ -4,7 +4,7 @@
   "workspaces": [
     "src/*"
   ],
-  "version": "5.5.2",
+  "version": "5.5.3",
   "description": "Mantine Components Monorepo",
   "main": "index.js",
   "repository": "https://github.com/mantinedev/mantine.git",

src/mantine-carousel/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mantine/carousel",
   "description": "Embla based carousel",
-  "version": "5.5.2",
+  "version": "5.5.3",
   "main": "cjs/index.js",
   "module": "esm/index.js",
   "types": "lib/index.d.ts",
@@ -22,13 +22,13 @@
     "slick"
   ],
   "peerDependencies": {
-    "@mantine/core": "5.5.2",
-    "@mantine/hooks": "5.5.2",
+    "@mantine/core": "5.5.3",
+    "@mantine/hooks": "5.5.3",
     "embla-carousel-react": "^7.0.0",
     "react": ">=16.8.0"
   },
   "dependencies": {
-    "@mantine/utils": "5.5.2"
+    "@mantine/utils": "5.5.3"
   },
   "devDependencies": {}
 }

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.5.2",
+  "version": "5.5.3",
   "main": "cjs/index.js",
   "module": "esm/index.js",
   "types": "lib/index.d.ts",
@@ -27,13 +27,13 @@
     "emotion"
   ],
   "peerDependencies": {
-    "@mantine/hooks": "5.5.2",
+    "@mantine/hooks": "5.5.3",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
   "dependencies": {
-    "@mantine/utils": "5.5.2",
-    "@mantine/styles": "5.5.2",
+    "@mantine/utils": "5.5.3",
+    "@mantine/styles": "5.5.3",
     "@radix-ui/react-scroll-area": "1.0.0",
     "react-textarea-autosize": "8.3.4",
     "@floating-ui/react-dom-interactions": "^0.10.1"

src/mantine-core/src/ColorInput/ColorInput.story.tsx

@@ -1,20 +1,11 @@
 import React, { useState } from 'react';
-import { storiesOf } from '@storybook/react';
 import { DEFAULT_THEME, MANTINE_SIZES } from '@mantine/styles';
 import { WithinOverlays } from '@mantine/storybook';
 import { ColorInput } from './ColorInput';
 
-const sizes = MANTINE_SIZES.map((size) => (
-  <ColorInput
-    size={size}
-    label="Color input"
-    placeholder="Pick color"
-    format="rgba"
-    style={{ marginTop: 20 }}
-  />
-));
+export default { title: 'ColorInput' };
 
-function ControlledInput() {
+export function Controlled() {
   const [value, setValue] = useState('rgba(84, 37, 186, 0.81)');
   return (
     <div style={{ margin: 'auto', maxWidth: 400, marginTop: 15 }}>
@@ -41,10 +32,21 @@ function ControlledInput() {
   );
 }
 
-storiesOf('ColorInput', module)
-  .add('Controlled', () => <ControlledInput />)
-  .add('Sizes', () => <div style={{ padding: 40 }}>{sizes}</div>)
-  .add('Within overlays', () => (
+export function Sizes() {
+  const sizes = MANTINE_SIZES.map((size) => (
+    <ColorInput
+      size={size}
+      label="Color input"
+      placeholder="Pick color"
+      format="rgba"
+      style={{ marginTop: 20 }}
+    />
+  ));
+  return <div style={{ padding: 40 }}>{sizes}</div>;
+}
+
+export function Overlays() {
+  return (
     <WithinOverlays>
       <ColorInput
         format="rgba"
@@ -57,4 +59,13 @@ storiesOf('ColorInput', module)
         withinPortal={false}
       />
     </WithinOverlays>
-  ));
+  );
+}
+
+export function WithoutPickerAndSwatches() {
+  return (
+    <div style={{ padding: 40, maxWidth: 400 }}>
+      <ColorInput withPicker={false} swatches={[]} />
+    </div>
+  );
+}

src/mantine-core/src/ColorInput/ColorInput.tsx

@@ -160,10 +160,12 @@ export const ColorInput = forwardRef<HTMLInputElement, ColorInputProps>(
           classNames={classNames}
           styles={styles}
           unstyled={unstyled}
+          disabled={withPicker === false && (!Array.isArray(swatches) || swatches.length === 0)}
         >
           <Popover.Target>
             <div>
               <Input<'input'>
+                autoComplete="nope"
                 {...others}
                 {...inputProps}
                 ref={ref}
@@ -179,7 +181,6 @@ export const ColorInput = forwardRef<HTMLInputElement, ColorInputProps>(
                     onChangeEnd?.(convertHsvaTo(format, parseColor(inputValue)));
                   }
                 }}
-                autoComplete="nope"
                 icon={
                   icon ||
                   (withPreview ? (

src/mantine-dates/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mantine/dates",
   "description": "Calendars, date and time pickers based on Mantine components",
-  "version": "5.5.2",
+  "version": "5.5.3",
   "main": "cjs/index.js",
   "module": "esm/index.js",
   "types": "lib/index.d.ts",
@@ -28,13 +28,13 @@
     "picker"
   ],
   "peerDependencies": {
-    "@mantine/core": "5.5.2",
-    "@mantine/hooks": "5.5.2",
+    "@mantine/core": "5.5.3",
+    "@mantine/hooks": "5.5.3",
     "dayjs": ">=1.0.0",
     "react": ">=16.8.0"
   },
   "dependencies": {
-    "@mantine/utils": "5.5.2"
+    "@mantine/utils": "5.5.3"
   },
   "devDependencies": {}
 }

src/mantine-demos/package.json

@@ -2,7 +2,7 @@
   "name": "@mantine/demos",
   "description": "Demos used in documentation",
   "private": true,
-  "version": "5.5.2",
+  "version": "5.5.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.5.2",
-    "@mantine/hooks": "5.5.2",
-    "@mantine/dates": "5.5.2",
-    "@mantine/form": "5.5.2",
-    "@mantine/rte": "5.5.2",
-    "@mantine/modals": "5.5.2",
-    "@mantine/nprogress": "5.5.2",
-    "@mantine/notifications": "5.5.2",
-    "@mantine/dropzone": "5.5.2",
-    "@mantine/prism": "5.5.2",
-    "@mantine/labs": "5.5.2",
-    "@mantine/spotlight": "5.5.2",
-    "@mantine/carousel": "5.5.2",
-    "@mantine/ds": "5.5.2",
+    "@mantine/core": "5.5.3",
+    "@mantine/hooks": "5.5.3",
+    "@mantine/dates": "5.5.3",
+    "@mantine/form": "5.5.3",
+    "@mantine/rte": "5.5.3",
+    "@mantine/modals": "5.5.3",
+    "@mantine/nprogress": "5.5.3",
+    "@mantine/notifications": "5.5.3",
+    "@mantine/dropzone": "5.5.3",
+    "@mantine/prism": "5.5.3",
+    "@mantine/labs": "5.5.3",
+    "@mantine/spotlight": "5.5.3",
+    "@mantine/carousel": "5.5.3",
+    "@mantine/ds": "5.5.3",
     "@tabler/icons": "*",
     "react-beautiful-dnd": "*",
     "embla-carousel-autoplay": "*",

src/mantine-dropzone/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mantine/dropzone",
   "description": "Dropzone component built with Mantine theme and components",
-  "version": "5.5.2",
+  "version": "5.5.3",
   "main": "cjs/index.js",
   "module": "esm/index.js",
   "types": "lib/index.d.ts",
@@ -28,14 +28,14 @@
     "upload"
   ],
   "peerDependencies": {
-    "@mantine/core": "5.5.2",
-    "@mantine/hooks": "5.5.2",
+    "@mantine/core": "5.5.3",
+    "@mantine/hooks": "5.5.3",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
   "dependencies": {
     "react-dropzone": "14.2.2",
-    "@mantine/utils": "5.5.2"
+    "@mantine/utils": "5.5.3"
   },
   "devDependencies": {}
 }

src/mantine-ds/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mantine/ds",
   "description": "Internal Mantine components used on *.mantine.dev websites",
-  "version": "5.5.2",
+  "version": "5.5.3",
   "main": "cjs/index.js",
   "module": "esm/index.js",
   "types": "lib/index.d.ts",
@@ -18,14 +18,14 @@
     "react"
   ],
   "peerDependencies": {
-    "@mantine/core": "5.5.2",
-    "@mantine/hooks": "5.5.2",
-    "@mantine/prism": "5.5.2",
+    "@mantine/core": "5.5.3",
+    "@mantine/hooks": "5.5.3",
+    "@mantine/prism": "5.5.3",
     "@tabler/icons": "*",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
   "dependencies": {
-    "@mantine/utils": "5.5.2"
+    "@mantine/utils": "5.5.3"
   }
 }

src/mantine-form/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mantine/form",
   "description": "Mantine form management library",
-  "version": "5.5.2",
+  "version": "5.5.3",
   "main": "cjs/index.js",
   "module": "esm/index.js",
   "types": "lib/index.d.ts",

src/mantine-hooks/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/hooks",
-  "version": "5.5.2",
+  "version": "5.5.3",
   "main": "cjs/index.js",
   "module": "esm/index.js",
   "types": "lib/index.d.ts",

src/mantine-labs/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mantine/labs",
   "description": "Experimental unstable Mantine components",
-  "version": "5.5.2",
+  "version": "5.5.3",
   "main": "cjs/index.js",
   "module": "esm/index.js",
   "types": "lib/index.d.ts",
@@ -15,8 +15,8 @@
     "directory": "src/mantine-labs"
   },
   "peerDependencies": {
-    "@mantine/core": "5.5.2",
-    "@mantine/hooks": "5.5.2",
+    "@mantine/core": "5.5.3",
+    "@mantine/hooks": "5.5.3",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },

src/mantine-modals/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mantine/modals",
   "description": "Modals manager based on Mantine components",
-  "version": "5.5.2",
+  "version": "5.5.3",
   "main": "cjs/index.js",
   "module": "esm/index.js",
   "types": "lib/index.d.ts",
@@ -27,13 +27,13 @@
     "confirm"
   ],
   "peerDependencies": {
-    "@mantine/core": "5.5.2",
-    "@mantine/hooks": "5.5.2",
+    "@mantine/core": "5.5.3",
+    "@mantine/hooks": "5.5.3",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
   "dependencies": {
-    "@mantine/utils": "5.5.2"
+    "@mantine/utils": "5.5.3"
   },
   "devDependencies": {}
 }

src/mantine-next/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mantine/next",
   "description": "Mantine integration for Next.js",
-  "version": "5.5.2",
+  "version": "5.5.3",
   "main": "cjs/index.js",
   "module": "esm/index.js",
   "types": "lib/index.d.ts",
@@ -25,8 +25,8 @@
     "next": "*"
   },
   "dependencies": {
-    "@mantine/ssr": "5.5.2",
-    "@mantine/styles": "5.5.2"
+    "@mantine/ssr": "5.5.3",
+    "@mantine/styles": "5.5.3"
   },
   "devDependencies": {}
 }

src/mantine-notifications/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mantine/notifications",
   "description": "Notification system based on Mantine components",
-  "version": "5.5.2",
+  "version": "5.5.3",
   "main": "cjs/index.js",
   "module": "esm/index.js",
   "types": "lib/index.d.ts",
@@ -28,14 +28,14 @@
     "notification-system"
   ],
   "peerDependencies": {
-    "@mantine/core": "5.5.2",
-    "@mantine/hooks": "5.5.2",
+    "@mantine/core": "5.5.3",
+    "@mantine/hooks": "5.5.3",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
   "dependencies": {
     "react-transition-group": "4.4.2",
-    "@mantine/utils": "5.5.2"
+    "@mantine/utils": "5.5.3"
   },
   "devDependencies": {}
 }