@progress/kendo-react-inputs 9.5.0 → 10.0.0-develop.1

package/colors/FlatColorPicker.mjs

@@ -7,17 +7,16 @@
  */
 import * as a from "react";
 import l from "prop-types";
-import { validatePackage as p, Navigation as ee, getActiveElement as _, disableNavigatableContainer as K, keepFocusInContainer as ae, focusFirstFocusableChild as te, enableNavigatableContainer as le, getTabIndex as ne, classNames as V, kendoThemeMaps as oe } from "@progress/kendo-react-common";
-import { ButtonGroup as M, Button as s } from "@progress/kendo-react-buttons";
-import { dropletSliderIcon as L, paletteIcon as G, dropletSlashIcon as ie } from "@progress/kendo-svg-icons";
-import { ColorPalette as re } from "./ColorPalette.mjs";
-import { ColorGradient as ce } from "./ColorGradient.mjs";
-import { packageMetadata as de } from "../package-metadata.mjs";
-import { useLocalization as se } from "@progress/kendo-react-intl";
-import { flatColorPickerColorGradientBtn as C, messages as u, flatColorPickerColorPaletteBtn as k, flatColorPickerClearBtn as T, flatColorPickerCancelBtn as ue, flatColorPickerApplyBtn as ve } from "../messages/index.mjs";
-const D = a.forwardRef((e, O) => {
-  p(de);
-  const f = a.useRef(null), y = a.useRef(null), H = a.useRef(null), {
+import { validatePackage as ee, Navigation as ae, getActiveElement as _, disableNavigatableContainer as K, keepFocusInContainer as te, focusFirstFocusableChild as le, enableNavigatableContainer as ne, getTabIndex as oe, classNames as V, kendoThemeMaps as ie, WatermarkOverlay as re } from "@progress/kendo-react-common";
+import { ButtonGroup as L, Button as s } from "@progress/kendo-react-buttons";
+import { dropletSliderIcon as M, paletteIcon as G, dropletSlashIcon as ce } from "@progress/kendo-svg-icons";
+import { ColorPalette as de } from "./ColorPalette.mjs";
+import { ColorGradient as se } from "./ColorGradient.mjs";
+import { packageMetadata as ue } from "../package-metadata.mjs";
+import { useLocalization as ve } from "@progress/kendo-react-intl";
+import { flatColorPickerColorGradientBtn as k, messages as u, flatColorPickerColorPaletteBtn as C, flatColorPickerClearBtn as O, flatColorPickerCancelBtn as ge, flatColorPickerApplyBtn as me } from "../messages/index.mjs";
+const T = a.forwardRef((e, D) => {
+  const H = !ee(ue, { component: "FlatColorPicker" }), f = a.useRef(null), y = a.useRef(null), W = a.useRef(null), {
     defaultValue: b,
     showButtons: w = !0,
     showPreview: q = !0,
@@ -34,7 +33,7 @@ const D = a.forwardRef((e, O) => {
   a.useEffect(() => {
     E(e.value);
   }, [e.value]);
-  const m = se(), R = a.useCallback(() => {
+  const m = ve(), R = a.useCallback(() => {
     f.current && f.current.focus();
   }, [f]);
   a.useImperativeHandle(
@@ -46,7 +45,7 @@ const D = a.forwardRef((e, O) => {
       value: B
     }),
     [B, R, e]
-  ), a.useImperativeHandle(O, () => f.current);
+  ), a.useImperativeHandle(D, () => f.current);
   const A = a.useCallback(
     (t) => {
       (t === "ColorGradient" && !v || t === "ColorPalette" && v) && j(!v);
@@ -71,7 +70,7 @@ const D = a.forwardRef((e, O) => {
       }
     },
     [b, e.onPreviewChange]
-  ), z = a.useCallback(
+  ), F = a.useCallback(
     (t) => {
       var n;
       if (E(t.value), e.onPreviewChange) {
@@ -99,7 +98,7 @@ const D = a.forwardRef((e, O) => {
     [i, e.onChange]
   ), U = a.useCallback(() => {
     E(g), e.setOpen && e.setOpen(!1);
-  }, [g]), W = a.useCallback(
+  }, [g]), X = a.useCallback(
     (t) => {
       if (E(g), e.onPreviewChange) {
         const n = {
@@ -111,31 +110,31 @@ const D = a.forwardRef((e, O) => {
       }
     },
     [g, e.onPreviewChange]
-  ), X = a.useCallback(
+  ), Y = a.useCallback(
     (t) => {
       var c, S;
       if ((!t.relatedTarget || !((c = y.current) != null && c.contains(t.relatedTarget))) && !((S = e._gradientSettings) != null && S._adaptive) && (!w && i !== void 0 && I(i), !w && e.onChange)) {
-        const Z = {
+        const p = {
           value: i,
           nativeEvent: t.nativeEvent,
           syntheticEvent: t
         };
-        e.onChange.call(void 0, Z);
+        e.onChange.call(void 0, p);
       }
     },
     [i, w, e.onChange]
-  ), F = a.useMemo(
-    () => new ee({
+  ), z = a.useMemo(
+    () => new ae({
       root: y,
       selectors: [".k-coloreditor"],
       tabIndex: 0,
       keyboardEvents: {
         keydown: {
           Tab: (t, n, c) => {
-            _(document) === t ? K(t) : ae(c, t);
+            _(document) === t ? K(t) : te(c, t);
           },
           Enter: (t, n, c) => {
-            _(document) === t && (te(t), le(t));
+            _(document) === t && (le(t), ne(t));
           },
           Escape: (t, n, c) => {
             _(document) !== t && (t.focus(), K(t));
@@ -144,7 +143,7 @@ const D = a.forwardRef((e, O) => {
       }
     }),
     []
-  ), Y = a.useCallback(F.triggerKeyboardEvent.bind(F), []);
+  ), Z = a.useCallback(z.triggerKeyboardEvent.bind(z), []);
   return /* @__PURE__ */ a.createElement(
     "div",
     {
@@ -153,32 +152,32 @@ const D = a.forwardRef((e, O) => {
       "aria-label": e.ariaLabel,
       "aria-labelledby": e.ariaLabelledBy,
       "aria-disabled": e.disabled ? "true" : void 0,
-      style: e.style,
+      style: { position: "relative", ...e.style },
       ref: y,
-      tabIndex: ne(e.tabIndex, e.disabled),
+      tabIndex: oe(e.tabIndex, e.disabled),
       className: V(
         "k-flatcolorpicker k-coloreditor",
         {
-          [`k-coloreditor-${oe.sizeMap[o] || o}`]: o,
+          [`k-coloreditor-${ie.sizeMap[o] || o}`]: o,
           "k-disabled": e.disabled
         },
         e.className
       ),
-      onBlur: X,
-      onKeyDown: Y
+      onBlur: Y,
+      onKeyDown: Z
     },
-    e.header || /* @__PURE__ */ a.createElement("div", { className: "k-coloreditor-header k-hstack" }, /* @__PURE__ */ a.createElement("div", { className: "k-coloreditor-header-actions k-hstack" }, r && r[0] === "gradient" && r[1] === "palette" && /* @__PURE__ */ a.createElement(M, { className: "k-button-group-flat" }, /* @__PURE__ */ a.createElement(
+    e.header || /* @__PURE__ */ a.createElement("div", { className: "k-coloreditor-header k-hstack" }, /* @__PURE__ */ a.createElement("div", { className: "k-coloreditor-header-actions k-hstack" }, r && r[0] === "gradient" && r[1] === "palette" && /* @__PURE__ */ a.createElement(L, { className: "k-button-group-flat" }, /* @__PURE__ */ a.createElement(
       s,
       {
         type: "button",
         "aria-label": m.toLanguageString(
-          C,
-          u[C]
+          k,
+          u[k]
         ),
         togglable: !0,
         fillMode: "flat",
         size: o,
-        svgIcon: L,
+        svgIcon: M,
         selected: d,
         onClick: () => N("gradient")
       }
@@ -187,8 +186,8 @@ const D = a.forwardRef((e, O) => {
       {
         type: "button",
         "aria-label": m.toLanguageString(
-          k,
-          u[k]
+          C,
+          u[C]
         ),
         togglable: !0,
         fillMode: "flat",
@@ -197,13 +196,13 @@ const D = a.forwardRef((e, O) => {
         selected: !d,
         onClick: () => N("palette")
       }
-    )), r && r[0] === "palette" && r[1] === "gradient" && /* @__PURE__ */ a.createElement(M, { className: "k-button-group-flat" }, /* @__PURE__ */ a.createElement(
+    )), r && r[0] === "palette" && r[1] === "gradient" && /* @__PURE__ */ a.createElement(L, { className: "k-button-group-flat" }, /* @__PURE__ */ a.createElement(
       s,
       {
         type: "button",
         "aria-label": m.toLanguageString(
-          k,
-          u[k]
+          C,
+          u[C]
         ),
         togglable: !0,
         fillMode: "flat",
@@ -217,23 +216,23 @@ const D = a.forwardRef((e, O) => {
       {
         type: "button",
         "aria-label": m.toLanguageString(
-          C,
-          u[C]
+          k,
+          u[k]
         ),
         togglable: !0,
         fillMode: "flat",
         size: o,
-        svgIcon: L,
+        svgIcon: M,
         selected: d,
         onClick: () => N("gradient")
       }
-    )), h && /* @__PURE__ */ a.createElement(M, { className: "k-button-group-flat" }, /* @__PURE__ */ a.createElement(
+    )), h && /* @__PURE__ */ a.createElement(L, { className: "k-button-group-flat" }, /* @__PURE__ */ a.createElement(
       s,
       {
         type: "button",
         "aria-label": m.toLanguageString(
-          C,
-          u[C]
+          k,
+          u[k]
         ),
         togglable: !0,
         fillMode: "flat",
@@ -241,15 +240,15 @@ const D = a.forwardRef((e, O) => {
         selected: v,
         onClick: () => A("ColorGradient"),
         icon: "droplet-slider",
-        svgIcon: L
+        svgIcon: M
       }
     ), /* @__PURE__ */ a.createElement(
       s,
       {
         type: "button",
         "aria-label": m.toLanguageString(
-          k,
-          u[k]
+          C,
+          u[C]
         ),
         togglable: !0,
         fillMode: "flat",
@@ -267,11 +266,11 @@ const D = a.forwardRef((e, O) => {
         size: o,
         onClick: J,
         "aria-label": m.toLanguageString(
-          T,
-          u[T]
+          O,
+          u[O]
         ),
         icon: "droplet-slash",
-        svgIcon: ie
+        svgIcon: ce
       }
     ), q && /* @__PURE__ */ a.createElement("div", { className: "k-coloreditor-preview k-vstack" }, /* @__PURE__ */ a.createElement(
       "span",
@@ -293,7 +292,7 @@ const D = a.forwardRef((e, O) => {
         className: V("k-coloreditor-current-color", "k-color-preview", {
           "k-no-color": g === void 0
         }),
-        onClick: W
+        onClick: X
       },
       /* @__PURE__ */ a.createElement(
         "span",
@@ -302,15 +301,15 @@ const D = a.forwardRef((e, O) => {
           style: { background: g || void 0 }
         }
       )
-    )))),
+    ))), H && /* @__PURE__ */ a.createElement(re, null)),
     /* @__PURE__ */ a.createElement("div", { className: "k-coloreditor-views k-vstack" }, (h && v || r && d) && /* @__PURE__ */ a.createElement(
-      ce,
+      se,
       {
-        ref: H,
+        ref: W,
         role: "none",
         ariaLabel: void 0,
         value: i,
-        onChange: z,
+        onChange: F,
         opacity: e.opacity,
         format: e.format,
         size: o,
@@ -318,16 +317,16 @@ const D = a.forwardRef((e, O) => {
         ...e._gradientSettings
       }
     ), (h && !v || r && !d) && /* @__PURE__ */ a.createElement(
-      re,
+      de,
       {
         ariaDisabled: !0,
         ariaLabelledBy: "required_label",
         value: i,
-        onChange: z,
+        onChange: F,
         size: o
       }
     )),
-    w && /* @__PURE__ */ a.createElement("div", { className: "k-coloreditor-footer k-actions k-actions-end k-actions-horizontal" }, /* @__PURE__ */ a.createElement(s, { type: "button", className: "k-coloreditor-cancel", size: o, onClick: U }, u[ue]), /* @__PURE__ */ a.createElement(
+    w && /* @__PURE__ */ a.createElement("div", { className: "k-coloreditor-footer k-actions k-actions-end k-actions-horizontal" }, /* @__PURE__ */ a.createElement(s, { type: "button", className: "k-coloreditor-cancel", size: o, onClick: U }, u[ge]), /* @__PURE__ */ a.createElement(
       s,
       {
         type: "button",
@@ -336,10 +335,10 @@ const D = a.forwardRef((e, O) => {
         size: o,
         onClick: Q
       },
-      u[ve]
+      u[me]
     ))
   );
-}), ge = {
+}), ke = {
   id: l.string,
   style: l.any,
   className: l.string,
@@ -361,8 +360,8 @@ const D = a.forwardRef((e, O) => {
   views: l.array,
   size: l.oneOf([null, "small", "medium", "large"])
 };
-D.displayName = "KendoFlatColorPicker";
-D.propTypes = ge;
+T.displayName = "KendoFlatColorPicker";
+T.propTypes = ke;
 export {
-  D as FlatColorPicker
+  T as FlatColorPicker
 };