@wordpress/dataviews 9.1.1-next.233ccab9b.0 → 10.0.0

package/build/dataform-controls/color.js

@@ -1,133 +1,126 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var color_exports = {};
+__export(color_exports, {
+  default: () => Color
 });
-exports.default = Color;
-var _colord = require("colord");
-var _deepmerge = _interopRequireDefault(require("deepmerge"));
-var _components = require("@wordpress/components");
-var _element = require("@wordpress/element");
-var _lockUnlock = require("../lock-unlock");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-const {
-  ValidatedInputControl,
-  Picker
-} = (0, _lockUnlock.unlock)(_components.privateApis);
+module.exports = __toCommonJS(color_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_colord = require("colord");
+var import_components = require("@wordpress/components");
+var import_element = require("@wordpress/element");
+var import_lock_unlock = require("../lock-unlock");
+var import_get_custom_validity = __toESM(require("./utils/get-custom-validity"));
+const { ValidatedInputControl, Picker } = (0, import_lock_unlock.unlock)(import_components.privateApis);
 const ColorPicker = ({
   color,
   onColorChange
 }) => {
-  const validColor = color && (0, _colord.colord)(color).isValid() ? color : '#ffffff';
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Dropdown, {
-    renderToggle: ({
-      onToggle,
-      isOpen
-    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalInputControlPrefixWrapper, {
-      variant: "icon",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-        type: "button",
-        onClick: onToggle,
-        style: {
-          width: '24px',
-          height: '24px',
-          borderRadius: '50%',
-          backgroundColor: validColor,
-          border: '1px solid #ddd',
-          cursor: 'pointer',
-          outline: isOpen ? '2px solid #007cba' : 'none',
-          outlineOffset: '2px',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          padding: 0,
-          margin: 0
-        },
-        "aria-label": "Open color picker"
-      })
-    }),
-    renderContent: () => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      style: {
-        padding: '16px'
-      },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Picker, {
-        color: (0, _colord.colord)(validColor),
-        onChange: onColorChange,
-        enableAlpha: true
-      })
-    })
-  });
+  const validColor = color && (0, import_colord.colord)(color).isValid() ? color : "#ffffff";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_components.Dropdown,
+    {
+      renderToggle: ({ onToggle, isOpen }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalInputControlPrefixWrapper, { variant: "icon", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: onToggle,
+          style: {
+            width: "24px",
+            height: "24px",
+            borderRadius: "50%",
+            backgroundColor: validColor,
+            border: "1px solid #ddd",
+            cursor: "pointer",
+            outline: isOpen ? "2px solid #007cba" : "none",
+            outlineOffset: "2px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            padding: 0,
+            margin: 0
+          },
+          "aria-label": "Open color picker"
+        }
+      ) }),
+      renderContent: () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { padding: "16px" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        Picker,
+        {
+          color: (0, import_colord.colord)(validColor),
+          onChange: onColorChange,
+          enableAlpha: true
+        }
+      ) })
+    }
+  );
 };
 function Color({
   data,
   field,
   onChange,
-  hideLabelFromVision
+  hideLabelFromVision,
+  validity
 }) {
-  const {
-    label,
-    placeholder,
-    description,
-    setValue
-  } = field;
-  const value = field.getValue({
-    item: data
-  }) || '';
-  const [customValidity, setCustomValidity] = (0, _element.useState)(undefined);
-  const handleColorChange = (0, _element.useCallback)(colorObject => {
-    onChange(setValue({
-      item: data,
-      value: colorObject.toHex()
-    }));
-  }, [data, onChange, setValue]);
-  const handleInputChange = (0, _element.useCallback)(newValue => {
-    onChange(setValue({
-      item: data,
-      value: newValue || ''
-    }));
-  }, [data, onChange, setValue]);
-  const onValidateControl = (0, _element.useCallback)(newValue => {
-    const message = field.isValid?.custom?.((0, _deepmerge.default)(data, setValue({
-      item: data,
-      value: newValue
-    })), field);
-    if (message) {
-      setCustomValidity({
-        type: 'invalid',
-        message
-      });
-      return;
+  const { label, placeholder, description, setValue, isValid } = field;
+  const value = field.getValue({ item: data }) || "";
+  const handleColorChange = (0, import_element.useCallback)(
+    (colorObject) => {
+      onChange(setValue({ item: data, value: colorObject.toHex() }));
+    },
+    [data, onChange, setValue]
+  );
+  const handleInputChange = (0, import_element.useCallback)(
+    (newValue) => {
+      onChange(setValue({ item: data, value: newValue || "" }));
+    },
+    [data, onChange, setValue]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    ValidatedInputControl,
+    {
+      required: !!field.isValid?.required,
+      customValidity: (0, import_get_custom_validity.default)(isValid, validity),
+      label,
+      placeholder,
+      value,
+      help: description,
+      onChange: handleInputChange,
+      hideLabelFromVision,
+      type: "text",
+      prefix: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        ColorPicker,
+        {
+          color: value,
+          onColorChange: handleColorChange
+        }
+      )
     }
-    setCustomValidity(undefined);
-  }, [data, field, setValue]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ValidatedInputControl, {
-    required: !!field.isValid?.required,
-    onValidate: onValidateControl,
-    customValidity: customValidity,
-    label: label,
-    placeholder: placeholder,
-    value: value,
-    help: description,
-    onChange: handleInputChange,
-    hideLabelFromVision: hideLabelFromVision,
-    type: "text",
-    prefix: /*#__PURE__*/(0, _jsxRuntime.jsx)(ColorPicker, {
-      color: value,
-      onColorChange: handleColorChange
-    })
-  });
+  );
 }
-//# sourceMappingURL=color.js.map
+//# sourceMappingURL=color.js.map

package/build/dataform-controls/color.js.map

@@ -1 +1,7 @@
-{"version":3,"names":["_colord","require","_deepmerge","_interopRequireDefault","_components","_element","_lockUnlock","_jsxRuntime","ValidatedInputControl","Picker","unlock","privateApis","ColorPicker","color","onColorChange","validColor","colord","isValid","jsx","Dropdown","renderToggle","onToggle","isOpen","__experimentalInputControlPrefixWrapper","variant","children","type","onClick","style","width","height","borderRadius","backgroundColor","border","cursor","outline","outlineOffset","display","alignItems","justifyContent","padding","margin","renderContent","onChange","enableAlpha","Color","data","field","hideLabelFromVision","label","placeholder","description","setValue","value","getValue","item","customValidity","setCustomValidity","useState","undefined","handleColorChange","useCallback","colorObject","toHex","handleInputChange","newValue","onValidateControl","message","custom","deepMerge","required","onValidate","help","prefix"],"sources":["@wordpress/dataviews/src/dataform-controls/color.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport { colord } from 'colord';\nimport deepMerge from 'deepmerge';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tDropdown,\n\tprivateApis,\n\t__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,\n} from '@wordpress/components';\nimport { useCallback, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../types';\nimport { unlock } from '../lock-unlock';\n\nconst { ValidatedInputControl, Picker } = unlock( privateApis );\n\nconst ColorPicker = ( {\n\tcolor,\n\tonColorChange,\n}: {\n\tcolor: string;\n\tonColorChange: ( colorObject: any ) => void;\n} ) => {\n\tconst validColor = color && colord( color ).isValid() ? color : '#ffffff';\n\n\treturn (\n\t\t<Dropdown\n\t\t\trenderToggle={ ( { onToggle, isOpen } ) => (\n\t\t\t\t<InputControlPrefixWrapper variant=\"icon\">\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\twidth: '24px',\n\t\t\t\t\t\t\theight: '24px',\n\t\t\t\t\t\t\tborderRadius: '50%',\n\t\t\t\t\t\t\tbackgroundColor: validColor,\n\t\t\t\t\t\t\tborder: '1px solid #ddd',\n\t\t\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t\t\toutline: isOpen ? '2px solid #007cba' : 'none',\n\t\t\t\t\t\t\toutlineOffset: '2px',\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\t\tpadding: 0,\n\t\t\t\t\t\t\tmargin: 0,\n\t\t\t\t\t\t} }\n\t\t\t\t\t\taria-label=\"Open color picker\"\n\t\t\t\t\t/>\n\t\t\t\t</InputControlPrefixWrapper>\n\t\t\t) }\n\t\t\trenderContent={ () => (\n\t\t\t\t<div style={ { padding: '16px' } }>\n\t\t\t\t\t<Picker\n\t\t\t\t\t\tcolor={ colord( validColor ) }\n\t\t\t\t\t\tonChange={ onColorChange }\n\t\t\t\t\t\tenableAlpha\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t/>\n\t);\n};\n\nexport default function Color< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n}: DataFormControlProps< Item > ) {\n\tconst { label, placeholder, description, setValue } = field;\n\tconst value = field.getValue( { item: data } ) || '';\n\tconst [ customValidity, setCustomValidity ] =\n\t\tuseState<\n\t\t\tReact.ComponentProps<\n\t\t\t\ttypeof ValidatedInputControl\n\t\t\t>[ 'customValidity' ]\n\t\t>( undefined );\n\n\tconst handleColorChange = useCallback(\n\t\t( colorObject: any ) => {\n\t\t\tonChange( setValue( { item: data, value: colorObject.toHex() } ) );\n\t\t},\n\t\t[ data, onChange, setValue ]\n\t);\n\n\tconst handleInputChange = useCallback(\n\t\t( newValue: string | undefined ) => {\n\t\t\tonChange( setValue( { item: data, value: newValue || '' } ) );\n\t\t},\n\t\t[ data, onChange, setValue ]\n\t);\n\n\tconst onValidateControl = useCallback(\n\t\t( newValue: any ) => {\n\t\t\tconst message = field.isValid?.custom?.(\n\t\t\t\tdeepMerge(\n\t\t\t\t\tdata,\n\t\t\t\t\tsetValue( {\n\t\t\t\t\t\titem: data,\n\t\t\t\t\t\tvalue: newValue,\n\t\t\t\t\t} ) as Partial< Item >\n\t\t\t\t),\n\t\t\t\tfield\n\t\t\t);\n\n\t\t\tif ( message ) {\n\t\t\t\tsetCustomValidity( {\n\t\t\t\t\ttype: 'invalid',\n\t\t\t\t\tmessage,\n\t\t\t\t} );\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tsetCustomValidity( undefined );\n\t\t},\n\t\t[ data, field, setValue ]\n\t);\n\n\treturn (\n\t\t<ValidatedInputControl\n\t\t\trequired={ !! field.isValid?.required }\n\t\t\tonValidate={ onValidateControl }\n\t\t\tcustomValidity={ customValidity }\n\t\t\tlabel={ label }\n\t\t\tplaceholder={ placeholder }\n\t\t\tvalue={ value }\n\t\t\thelp={ description }\n\t\t\tonChange={ handleInputChange }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\ttype=\"text\"\n\t\t\tprefix={\n\t\t\t\t<ColorPicker\n\t\t\t\t\tcolor={ value }\n\t\t\t\t\tonColorChange={ handleColorChange }\n\t\t\t\t/>\n\t\t\t}\n\t\t/>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../src/dataform-controls/color.tsx"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport { colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tDropdown,\n\tprivateApis,\n\t__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,\n} from '@wordpress/components';\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../types';\nimport { unlock } from '../lock-unlock';\nimport getCustomValidity from './utils/get-custom-validity';\n\nconst { ValidatedInputControl, Picker } = unlock( privateApis );\n\nconst ColorPicker = ( {\n\tcolor,\n\tonColorChange,\n}: {\n\tcolor: string;\n\tonColorChange: ( colorObject: any ) => void;\n} ) => {\n\tconst validColor = color && colord( color ).isValid() ? color : '#ffffff';\n\n\treturn (\n\t\t<Dropdown\n\t\t\trenderToggle={ ( { onToggle, isOpen } ) => (\n\t\t\t\t<InputControlPrefixWrapper variant=\"icon\">\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\twidth: '24px',\n\t\t\t\t\t\t\theight: '24px',\n\t\t\t\t\t\t\tborderRadius: '50%',\n\t\t\t\t\t\t\tbackgroundColor: validColor,\n\t\t\t\t\t\t\tborder: '1px solid #ddd',\n\t\t\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t\t\toutline: isOpen ? '2px solid #007cba' : 'none',\n\t\t\t\t\t\t\toutlineOffset: '2px',\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\t\tpadding: 0,\n\t\t\t\t\t\t\tmargin: 0,\n\t\t\t\t\t\t} }\n\t\t\t\t\t\taria-label=\"Open color picker\"\n\t\t\t\t\t/>\n\t\t\t\t</InputControlPrefixWrapper>\n\t\t\t) }\n\t\t\trenderContent={ () => (\n\t\t\t\t<div style={ { padding: '16px' } }>\n\t\t\t\t\t<Picker\n\t\t\t\t\t\tcolor={ colord( validColor ) }\n\t\t\t\t\t\tonChange={ onColorChange }\n\t\t\t\t\t\tenableAlpha\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t/>\n\t);\n};\n\nexport default function Color< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\tconst { label, placeholder, description, setValue, isValid } = field;\n\tconst value = field.getValue( { item: data } ) || '';\n\n\tconst handleColorChange = useCallback(\n\t\t( colorObject: any ) => {\n\t\t\tonChange( setValue( { item: data, value: colorObject.toHex() } ) );\n\t\t},\n\t\t[ data, onChange, setValue ]\n\t);\n\n\tconst handleInputChange = useCallback(\n\t\t( newValue: string | undefined ) => {\n\t\t\tonChange( setValue( { item: data, value: newValue || '' } ) );\n\t\t},\n\t\t[ data, onChange, setValue ]\n\t);\n\n\treturn (\n\t\t<ValidatedInputControl\n\t\t\trequired={ !! field.isValid?.required }\n\t\t\tcustomValidity={ getCustomValidity( isValid, validity ) }\n\t\t\tlabel={ label }\n\t\t\tplaceholder={ placeholder }\n\t\t\tvalue={ value }\n\t\t\thelp={ description }\n\t\t\tonChange={ handleInputChange }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\ttype=\"text\"\n\t\t\tprefix={\n\t\t\t\t<ColorPicker\n\t\t\t\t\tcolor={ value }\n\t\t\t\t\tonColorChange={ handleColorChange }\n\t\t\t\t/>\n\t\t\t}\n\t\t/>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAqCK;AAlCL,oBAAuB;AAKvB,wBAIO;AACP,qBAA4B;AAM5B,yBAAuB;AACvB,iCAA8B;AAE9B,MAAM,EAAE,uBAAuB,OAAO,QAAI,2BAAQ,6BAAY;AAE9D,MAAM,cAAc,CAAE;AAAA,EACrB;AAAA,EACA;AACD,MAGO;AACN,QAAM,aAAa,aAAS,sBAAQ,KAAM,EAAE,QAAQ,IAAI,QAAQ;AAEhE,SACC;AAAA,IAAC;AAAA;AAAA,MACA,cAAe,CAAE,EAAE,UAAU,OAAO,MACnC,4CAAC,kBAAAA,yCAAA,EAA0B,SAAQ,QAClC;AAAA,QAAC;AAAA;AAAA,UACA,MAAK;AAAA,UACL,SAAU;AAAA,UACV,OAAQ;AAAA,YACP,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,cAAc;AAAA,YACd,iBAAiB;AAAA,YACjB,QAAQ;AAAA,YACR,QAAQ;AAAA,YACR,SAAS,SAAS,sBAAsB;AAAA,YACxC,eAAe;AAAA,YACf,SAAS;AAAA,YACT,YAAY;AAAA,YACZ,gBAAgB;AAAA,YAChB,SAAS;AAAA,YACT,QAAQ;AAAA,UACT;AAAA,UACA,cAAW;AAAA;AAAA,MACZ,GACD;AAAA,MAED,eAAgB,MACf,4CAAC,SAAI,OAAQ,EAAE,SAAS,OAAO,GAC9B;AAAA,QAAC;AAAA;AAAA,UACA,WAAQ,sBAAQ,UAAW;AAAA,UAC3B,UAAW;AAAA,UACX,aAAW;AAAA;AAAA,MACZ,GACD;AAAA;AAAA,EAEF;AAEF;AAEe,SAAR,MAAgC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAkC;AACjC,QAAM,EAAE,OAAO,aAAa,aAAa,UAAU,QAAQ,IAAI;AAC/D,QAAM,QAAQ,MAAM,SAAU,EAAE,MAAM,KAAK,CAAE,KAAK;AAElD,QAAM,wBAAoB;AAAA,IACzB,CAAE,gBAAsB;AACvB,eAAU,SAAU,EAAE,MAAM,MAAM,OAAO,YAAY,MAAM,EAAE,CAAE,CAAE;AAAA,IAClE;AAAA,IACA,CAAE,MAAM,UAAU,QAAS;AAAA,EAC5B;AAEA,QAAM,wBAAoB;AAAA,IACzB,CAAE,aAAkC;AACnC,eAAU,SAAU,EAAE,MAAM,MAAM,OAAO,YAAY,GAAG,CAAE,CAAE;AAAA,IAC7D;AAAA,IACA,CAAE,MAAM,UAAU,QAAS;AAAA,EAC5B;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAW,CAAC,CAAE,MAAM,SAAS;AAAA,MAC7B,oBAAiB,2BAAAC,SAAmB,SAAS,QAAS;AAAA,MACtD;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAO;AAAA,MACP,UAAW;AAAA,MACX;AAAA,MACA,MAAK;AAAA,MACL,QACC;AAAA,QAAC;AAAA;AAAA,UACA,OAAQ;AAAA,UACR,eAAgB;AAAA;AAAA,MACjB;AAAA;AAAA,EAEF;AAEF;",
+  "names": ["InputControlPrefixWrapper", "getCustomValidity"]
+}