@progress/kendo-react-inputs 13.3.0 → 13.4.0-develop.2

package/colors/ColorPicker.mjs

@@ -7,15 +7,15 @@
  */
 import * as t from "react";
 import r from "prop-types";
-import { createPropsContext as Ke, validatePackage as $e, getLicenseMessage as Ge, usePropsContext as Me, useAdaptiveModeContext as Ze, canUseDOM as je, Navigation as qe, getActiveElement as Je, keepFocusInContainer as z, focusFirstFocusableChild as pe, WatermarkOverlay as Qe, useDir as Xe, classNames as Z, kendoThemeMaps as fe, getTabIndex as Ye, IconWrap as et, svgIconPropType as tt } from "@progress/kendo-react-common";
+import { createPropsContext as Ke, validatePackage as $e, getLicenseMessage as Ge, usePropsContext as Me, useAdaptiveModeContext as Ze, canUseDOM as je, Navigation as qe, getActiveElement as Je, keepFocusInContainer as z, focusFirstFocusableChild as pe, WatermarkOverlay as Qe, useDir as Xe, getTabIndex as Ye, classNames as Z, kendoThemeMaps as fe, IconWrap as et, svgIconPropType as tt } from "@progress/kendo-react-common";
 import { packageMetadata as me } from "../package-metadata.mjs";
 import { Picker as nt } from "./Picker.mjs";
 import { ColorGradient as at } from "./ColorGradient.mjs";
-import { ColorPalette as rt, DEFAULT_PRESET as ot, DEFAULT_TILE_SIZE as lt } from "./ColorPalette.mjs";
+import { DEFAULT_TILE_SIZE as rt, DEFAULT_PRESET as ot, ColorPalette as it } from "./ColorPalette.mjs";
 import { FlatColorPicker as B } from "./FlatColorPicker.mjs";
-import { Button as it } from "@progress/kendo-react-buttons";
+import { Button as lt } from "@progress/kendo-react-buttons";
 import { caretAltDownIcon as ct } from "@progress/kendo-svg-icons";
-import { colorPickerAdaptiveTitle as ge, messages as L, flatColorPickerCancelBtn as ve, flatColorPickerApplyBtn as ke, colorPickerDropdownButtonAriaLabel as Ce } from "../messages/index.mjs";
+import { colorPickerAdaptiveTitle as ve, messages as L, flatColorPickerApplyBtn as ge, flatColorPickerCancelBtn as ke, colorPickerDropdownButtonAriaLabel as Ce } from "../messages/index.mjs";
 import { useLocalization as st } from "@progress/kendo-react-intl";
 import { AdaptiveMode as ut } from "../common/AdaptiveMode.mjs";
 import { ActionSheetContent as dt } from "@progress/kendo-react-layout";
@@ -23,18 +23,18 @@ const pt = {
   opacity: !0
 }, ft = {
   palette: ot,
-  tileSize: lt
+  tileSize: rt
 }, j = (D) => D !== void 0, mt = Ke(), Ee = t.forwardRef((D, be) => {
-  var le, ie;
-  const we = !$e(me, { component: "ColorPicker" }), Se = Ge(me), o = Me(mt, D), b = st(), q = Ze(), {
-    size: u = k.size,
-    rounded: x = k.rounded,
-    fillMode: _ = k.fillMode,
-    gradientSettings: C = k.gradientSettings,
-    paletteSettings: w = k.paletteSettings,
-    flatColorPickerSettings: S,
-    view: d = o.views ? void 0 : k.view,
-    views: c = d ? void 0 : k.views,
+  var ie, le;
+  const we = !$e(me, { component: "ColorPicker" }), Se = Ge(me), o = Me(mt, D), w = st(), q = Ze(), {
+    size: u = C.size,
+    rounded: v = C.rounded,
+    fillMode: x = C.fillMode,
+    gradientSettings: E = C.gradientSettings,
+    paletteSettings: S = C.paletteSettings,
+    flatColorPickerSettings: y,
+    view: d = o.views ? void 0 : C.view,
+    views: c = d ? void 0 : C.views,
     activeView: J,
     popupSettings: g,
     valid: ye,
@@ -49,9 +49,9 @@ const pt = {
     onActiveColorClick: U,
     className: _e,
     adaptive: Te,
-    adaptiveTitle: Q = b.toLanguageString(ge, L[ge]),
+    adaptiveTitle: Q = w.toLanguageString(ve, L[ve]),
     adaptiveSubtitle: X
-  } = o, s = t.useRef(null), y = t.useRef(null), P = t.useRef(null), m = t.useRef(null), E = t.useRef(void 0), Pe = t.useRef(null), [Re, Y] = t.useState(!1), [Ae, Ie] = t.useState(o.defaultValue || void 0), [ze, Be] = t.useState(!1), [R, Le] = t.useState(), K = j(o.value), v = j(o.open), l = K ? o.value : Ae, p = v ? o.open : ze, ee = t.useRef(l), te = t.useCallback(() => {
+  } = o, s = t.useRef(null), h = t.useRef(null), P = t.useRef(null), m = t.useRef(null), b = t.useRef(void 0), Pe = t.useRef(null), [Re, Y] = t.useState(!1), [Ae, Ie] = t.useState(o.defaultValue || void 0), [ze, Be] = t.useState(!1), [R, Le] = t.useState(), K = j(o.value), k = j(o.open), i = K ? o.value : Ae, p = k ? o.open : ze, ee = t.useRef(i), te = t.useCallback(() => {
     s.current && s.current.focus();
   }, []);
   t.useImperativeHandle(
@@ -60,10 +60,10 @@ const pt = {
       // we agreed that each element will have focus method exposed
       element: s.current,
       actionElement: Pe.current,
-      value: l,
+      value: i,
       focus: te
     }),
-    [l, te]
+    [i, te]
   );
   const $ = !!(R && q && R <= q.medium && Te);
   t.useEffect(() => {
@@ -73,47 +73,47 @@ const pt = {
     };
   }, []);
   const a = t.useCallback(
-    (e, i) => {
-      v || (!e && !i && s && s.current && s.current.focus(), Be(e));
+    (e, l) => {
+      k || (!e && !l && s && s.current && s.current.focus(), Be(e));
     },
-    [v]
+    [k]
   ), ne = t.useMemo(() => new qe({
     root: s,
     selectors: [".k-colorpicker", ".k-color-picker-popup"],
     tabIndex: 0,
     keyboardEvents: {
       keydown: {
-        Escape: (e, i, n) => {
+        Escape: (e, l, n) => {
           a(!1);
         },
-        Enter: (e, i, n) => {
-          !v && e === s.current && (n.preventDefault(), n.stopPropagation(), a(!0));
+        Enter: (e, l, n) => {
+          !k && e === s.current && (n.preventDefault(), n.stopPropagation(), a(!0));
         },
-        ArrowDown: (e, i, n) => {
+        ArrowDown: (e, l, n) => {
           n.altKey && (n.preventDefault(), n.stopPropagation(), a(!0));
         },
-        ArrowUp: (e, i, n) => {
+        ArrowUp: (e, l, n) => {
           n.altKey && (n.preventDefault(), n.stopPropagation(), a(!1));
         },
-        Tab: (e, i, n) => {
-          var h, ce, se;
+        Tab: (e, l, n) => {
+          var _, ce, se;
           if (Je(document) !== s.current) {
-            const ue = (h = P.current) == null ? void 0 : h.wrapperRef.current, I = (ce = y.current) == null ? void 0 : ce.wrapperRef.current, de = (se = m.current) == null ? void 0 : se.element;
+            const ue = (_ = P.current) == null ? void 0 : _.wrapperRef.current, I = (ce = h.current) == null ? void 0 : ce.wrapperRef.current, de = (se = m.current) == null ? void 0 : se.element;
             d === "palette" && ue ? z(n, ue) : d === "gradient" && I ? z(n, I) : d === "combo" && I ? z(n, I.parentElement) : c && de && z(n, de);
           }
         }
       }
     }
-  }), [a, v]), De = t.useCallback(ne.triggerKeyboardEvent.bind(ne), []), xe = t.useCallback(() => {
-    v || (y.current && y.current.wrapperRef.current ? pe(y.current.wrapperRef.current) : P.current ? P.current.focus() : m.current && m.current.element && pe(m.current.element));
-  }, [v]), A = (e) => ee.current = e, ae = t.useCallback(
+  }), [a, k]), De = t.useCallback(ne.triggerKeyboardEvent.bind(ne), []), xe = t.useCallback(() => {
+    k || (h.current && h.current.wrapperRef.current ? pe(h.current.wrapperRef.current) : P.current ? P.current.focus() : m.current && m.current.element && pe(m.current.element));
+  }, [k]), A = (e) => ee.current = e, ae = t.useCallback(
     (e) => {
-      const i = {
+      const l = {
         value: ee.current,
         nativeEvent: e.nativeEvent,
         syntheticEvent: e
       };
-      f(i), a(!p, !0);
+      f(l), a(!p, !0);
     },
     [p]
   ), G = t.useCallback(() => {
@@ -123,36 +123,36 @@ const pt = {
       U && U.call(void 0, {
         syntheticEvent: e,
         nativeEvent: e.nativeEvent,
-        value: l,
+        value: i,
         target: {
           element: s.current,
-          value: l
+          value: i
         }
       });
     },
-    [U, l]
+    [U, i]
   ), Oe = t.useCallback(
     (e) => {
-      E.current ? (clearTimeout(E.current), E.current = void 0) : (Y(!0), $ && !p && a(!0)), H && H.call(void 0, {
+      b.current ? (clearTimeout(b.current), b.current = void 0) : (Y(!0), $ && !p && a(!0)), H && H.call(void 0, {
         nativeEvent: e.nativeEvent,
         syntheticEvent: e
       });
     },
     [$, H, p, a]
   ), Fe = t.useCallback(() => {
-    a(!1, !0), Y(!1), E.current = void 0;
+    a(!1, !0), Y(!1), b.current = void 0;
   }, []), Ve = t.useCallback(
     (e) => {
-      clearTimeout(E.current), E.current = window.setTimeout(Fe), W && W.call(void 0, {
+      clearTimeout(b.current), b.current = window.setTimeout(Fe), W && W.call(void 0, {
         nativeEvent: e.nativeEvent,
         syntheticEvent: e
       });
     },
     [W]
   ), f = t.useCallback(
-    (e, i) => {
-      var h;
-      const n = i ? e.rgbaValue || "" : (h = e.value) != null ? h : "";
+    (e, l) => {
+      var _;
+      const n = l ? e.rgbaValue || "" : (_ = e.value) != null ? _ : "";
       K || Ie(n), V && V.call(void 0, {
         value: n,
         nativeEvent: e.nativeEvent,
@@ -171,112 +171,115 @@ const pt = {
     (e) => /* @__PURE__ */ t.createElement(t.Fragment, null, (d === "combo" || d === "gradient") && /* @__PURE__ */ t.createElement(
       at,
       {
-        ...C,
+        ...E,
         _adaptive: e,
-        ref: y,
+        ref: h,
         isInsidePopup: !0,
         size: e ? "large" : u,
-        fillMode: _,
-        value: l,
+        value: i,
         onChange: f
       }
     ), (d === "combo" || d === "palette") && /* @__PURE__ */ t.createElement(
-      rt,
+      it,
       {
-        ...w,
+        ...S,
         ref: P,
         size: e ? "large" : u,
-        value: l,
+        value: i,
         onChange: re
       }
     ), c && c[0] === "gradient" && c[1] === "palette" && /* @__PURE__ */ t.createElement(
       B,
       {
-        ...S,
-        _paletteSettings: w,
-        _gradientSettings: { _adaptive: e, ...C },
+        ...y,
+        _paletteSettings: S,
+        _gradientSettings: { _adaptive: e, ...E },
         ref: m,
         size: e ? "large" : u,
+        rounded: v,
         views: ["gradient", "palette"],
         activeView: J,
         setOpen: a,
         showButtons: !e,
-        value: l,
+        value: i,
         onChange: f,
         setAdaptiveModeValue: A
       }
     ), c && c[0] === "palette" && c[1] === "gradient" && /* @__PURE__ */ t.createElement(
       B,
       {
-        ...S,
-        _paletteSettings: w,
-        _gradientSettings: { _adaptive: e, ...C },
+        ...y,
+        _paletteSettings: S,
+        _gradientSettings: { _adaptive: e, ...E },
         ref: m,
         size: e ? "large" : u,
+        rounded: v,
         views: ["palette", "gradient"],
         setOpen: a,
         showButtons: !e,
-        value: l,
+        value: i,
         onChange: f,
         setAdaptiveModeValue: A
       }
     ), c && c.includes("gradient") && !c.includes("palette") && /* @__PURE__ */ t.createElement(
       B,
       {
-        ...S,
-        _gradientSettings: { _adaptive: e, ...C },
+        ...y,
+        _gradientSettings: { _adaptive: e, ...E },
         ref: m,
         size: e ? "large" : u,
+        rounded: v,
         views: ["gradient"],
         showButtons: !e,
         setOpen: a,
-        value: l,
+        value: i,
         onChange: f,
         setAdaptiveModeValue: A
       }
     ), c && c.includes("palette") && !c.includes("gradient") && /* @__PURE__ */ t.createElement(
       B,
       {
-        ...S,
-        _paletteSettings: w,
-        _gradientSettings: { _adaptive: e, ...C },
+        ...y,
+        _paletteSettings: S,
+        _gradientSettings: { _adaptive: e, ...E },
         ref: m,
         size: e ? "large" : u,
+        rounded: v,
         views: ["palette"],
         showButtons: !e,
         setOpen: a,
-        value: l,
+        value: i,
         onChange: f,
         setAdaptiveModeValue: A
       }
     ), we && /* @__PURE__ */ t.createElement(Qe, { message: Se })),
     [
       J,
-      _,
-      S,
-      C,
+      x,
+      y,
+      E,
       f,
       re,
-      w,
+      S,
       a,
       u,
-      l,
+      i,
       d,
       c
     ]
   ), He = t.useCallback(() => {
-    var i;
+    var l;
     const e = {
-      animation: !!((i = g == null ? void 0 : g.animate) == null || i),
+      animation: !!((l = g == null ? void 0 : g.animate) == null || l),
       title: Q,
       subTitle: X,
       expand: p,
       onClose: G,
       windowWidth: R,
       footer: {
-        cancelText: b.toLanguageString(ve, L[ve]),
+        cancelText: w.toLanguageString(ke, L[ke]),
         onCancel: G,
-        applyText: b.toLanguageString(ke, L[ke]),
+        applyText: w.toLanguageString(ge, L[ge]),
         onApply: ae
       }
     };
@@ -288,12 +291,12 @@ const pt = {
     p,
     G,
     R,
-    b,
+    w,
     ae,
     M
   ]), We = t.useCallback((e) => {
-    for (const i of e)
-      Le(i.target.clientWidth);
+    for (const l of e)
+      Le(l.target.clientWidth);
   }, []), oe = Xe(s, o.dir), Ue = ye !== !1;
   return /* @__PURE__ */ t.createElement(
     "span",
@@ -305,12 +308,12 @@ const pt = {
       "aria-describedby": o.ariaDescribedBy,
       "aria-haspopup": "dialog",
       "aria-expanded": p,
-      "aria-controls": `k-colorpicker-popup-${(le = o.id) != null ? le : 0}`,
+      "aria-controls": `k-colorpicker-popup-${(ie = o.id) != null ? ie : 0}`,
       "aria-disabled": N ? "true" : void 0,
       className: Z("k-colorpicker", "k-picker", "k-icon-picker", {
         [`k-picker-${fe.sizeMap[u] || u}`]: u,
-        [`k-picker-${_}`]: _,
-        [`k-rounded-${fe.roundedMap[x] || x}`]: x,
+        [`k-picker-${x}`]: x,
+        [`k-rounded-${fe.roundedMap[v] || v}`]: v,
         "k-invalid": !Ue,
         "k-disabled": N,
         "k-focus": Re,
@@ -331,30 +334,29 @@ const pt = {
         open: p,
         onOpen: xe,
         popupAnchor: s.current || void 0,
-        popupSettings: { id: `k-colorpicker-popup-${(ie = o.id) != null ? ie : 0}`, ...g },
+        popupSettings: { id: `k-colorpicker-popup-${(le = o.id) != null ? le : 0}`, ...g },
         input: /* @__PURE__ */ t.createElement("span", { onClick: Ne, className: "k-input-inner" }, /* @__PURE__ */ t.createElement(
           "span",
           {
             className: Z("k-value-icon", "k-color-preview", {
-              "k-no-color": !l,
+              "k-no-color": !i,
               "k-icon-color-preview": O || F || T
             })
           },
           T && /* @__PURE__ */ t.createElement("span", { className: Z("k-color-preview-icon", T) }),
           !T && (O || F) && /* @__PURE__ */ t.createElement(et, { name: O, icon: F }),
-          /* @__PURE__ */ t.createElement("span", { className: "k-color-preview-mask", style: { backgroundColor: l } })
+          /* @__PURE__ */ t.createElement("span", { className: "k-color-preview-mask", style: { backgroundColor: i } })
         )),
         button: /* @__PURE__ */ t.createElement(
-          it,
+          lt,
           {
             tabIndex: -1,
             type: "button",
             onClick: () => a(!p),
             className: "k-input-button",
-            rounded: null,
             icon: "caret-alt-down",
             svgIcon: ct,
-            "aria-label": b.toLanguageString(
+            "aria-label": w.toLanguageString(
               Ce,
               L[Ce]
             )
@@ -379,18 +381,18 @@ Ee.propTypes = {
   svgIcon: tt,
   ariaLabelledBy: r.string,
   ariaDescribedBy: r.string,
-  size: r.oneOf([null, "small", "medium", "large"]),
-  rounded: r.oneOf([null, "small", "medium", "large", "full"]),
-  fillMode: r.oneOf([null, "solid", "flat", "outline"]),
+  size: r.oneOf(["small", "medium", "large"]),
+  rounded: r.oneOf(["small", "medium", "large", "full"]),
+  fillMode: r.oneOf(["solid", "flat", "outline"]),
   className: r.string,
   adaptive: r.bool,
   adaptiveTitle: r.string,
   adaptiveSubtitle: r.string
 };
-const k = {
-  size: "medium",
-  rounded: "medium",
-  fillMode: "solid",
+const C = {
+  size: void 0,
+  rounded: void 0,
+  fillMode: void 0,
   view: "palette",
   views: ["gradient", "palette"],
   gradientSettings: pt,

package/colors/FlatColorPicker.d.ts

@@ -0,0 +1,189 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { ColorPickerView } from './interfaces/ColorPickerView.js';
+import { ColorPickerGradientSettings } from './interfaces/ColorPickerGradientSettings.js';
+import { ColorPickerPaletteSettings } from './interfaces/ColorPickerPaletteSettings.js';
+import * as React from 'react';
+/**
+ * The arguments for the `onChange` FlatColorPicker event.
+ */
+export interface FlatColorPickerChangeEvent {
+    /**
+     * The current value of the FlatColorPicker.
+     */
+    value: string | undefined;
+    /**
+     * A React Synthetic Event.
+     */
+    syntheticEvent: React.SyntheticEvent<any>;
+    /**
+     * A native DOM event.
+     */
+    nativeEvent: any;
+}
+/**
+ * Represents the properties of [FlatColorPicker](https://www.telerik.com/kendo-react-ui/components/inputs/api/flatcolorpicker) component.
+ */
+export interface FlatColorPickerProps {
+    /**
+     * Sets the `id` property of the top `div` element of the FlatColorPicker.
+     */
+    id?: string;
+    /**
+     * Sets additional CSS styles to the FlatColorPicker.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Sets additional classes to the FlatColorPicker.
+     */
+    className?: string;
+    /**
+     * Sets the color value.
+     */
+    value?: string;
+    /**
+     * Sets the default color value.
+     */
+    defaultValue?: string;
+    /**
+     * The event handler that will be fired when the user changes the preview color.
+     */
+    onPreviewChange?: (event: FlatColorPickerChangeEvent) => void;
+    /**
+     * The event handler that will be fired when the user click the "Apply" button or on blur when the "Apply" button is not present.
+     */
+    onChange?: (event: FlatColorPickerChangeEvent) => void;
+    /**
+     * Specifies whether we should display the opacity slider to allow selection of transparency.
+     *
+     * @default true
+     */
+    opacity?: boolean;
+    /**
+     * Sets the default input format in the gradient input editor.
+     *
+     * @default 'rgb'
+     */
+    format?: 'hex' | 'rgba' | 'rgb';
+    /**
+     * Sets the `tabIndex` property of the FlatColorPicker.
+     */
+    tabIndex?: number;
+    /**
+     * Represents the label of the FlatColorPicker component.
+     */
+    ariaLabel?: string;
+    /**
+     * Identifies the element(s) which will label the component.
+     */
+    ariaLabelledBy?: string;
+    /**
+     * Determines whether the FlatColorPicker is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * **Deprecated**. Use `views` prop instead.
+     *
+     * @deprecated
+     */
+    view?: 'ColorGradient' | 'ColorPalette' | undefined;
+    /**
+     * Specifies the views that will be rendered. By default both the gradient and palette views will be rendered.
+     *
+     * @default ['gradient', 'palette']`
+     */
+    views?: ColorPickerView[];
+    /**
+     * Sets the initially active view when both 'gradient' and 'palette' views are rendered.
+     * Use with the `views` property.
+     *
+     * @default 'gradient''
+     */
+    activeView?: ColorPickerView;
+    /**
+     * Sets custom header component.
+     */
+    header?: React.ComponentType | React.ReactNode;
+    /**
+     * Specifies whether clear button will be rendered in the header.
+     */
+    showClearButton?: boolean;
+    /**
+     * Specifies whether preview and revert color boxes will be rendered in the header.
+     */
+    showPreview?: boolean;
+    /**
+     * Specifies whether action buttons will be rendered in the footer.
+     */
+    showButtons?: boolean;
+    /**
+     * Configures the `size` of the FlatColorPicker.
+     *
+     * The available options are:
+     * - `small`
+     * - `medium`
+     * - `large`
+     * - `null`&mdash;This option removes the the built-in size styles of the FlatColorPicker. Allows for custom `padding`.
+     *
+     * @default `medium`
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * @hidden
+     */
+    rounded?: 'small' | 'medium' | 'large' | 'full';
+    /**
+     * @hidden
+     */
+    _gradientSettings?: ColorPickerGradientSettings;
+    /**
+     * @hidden
+     */
+    _paletteSettings?: ColorPickerPaletteSettings;
+    /**
+     * @hidden
+     */
+    setAdaptiveModeValue?: (value: any) => void;
+    /**
+     * @hidden
+     */
+    setOpen?: (value: boolean) => void;
+}
+/**
+ * Represents the target (element and props) of the FlatColorPicker.
+ */
+export interface FlatColorPickerHandle {
+    /**
+     * The current element or `null` if there is none.
+     */
+    element: HTMLDivElement | null;
+    /**
+     * The props values of the FlatColorPicker.
+     */
+    props: FlatColorPickerProps;
+    /**
+     * The focus event callback.
+     */
+    focus: () => void;
+    /**
+     * The current value of the FlatColorPicker.
+     */
+    value: string | undefined;
+}
+/**
+ * Represents the [KendoReact FlatColorPicker component](https://www.telerik.com/kendo-react-ui/components/inputs/flatcolorpicker).
+ * Accepts properties of type [FlatColorPickerProps](https://www.telerik.com/kendo-react-ui/components/inputs/api/flatcolorpickerprops). Obtaining the [FlatColorPickerHandle](https://www.telerik.com/kendo-react-ui/components/inputs/api/flatcolorpickerhandle).
+ *
+ * @example
+ * ```jsx
+ * const App = () => {
+ *     return <FlatColorPicker />;
+ * }
+ * ```
+ */
+export declare const FlatColorPicker: React.ForwardRefExoticComponent<FlatColorPickerProps & React.RefAttributes<FlatColorPickerHandle | null>>;

package/colors/FlatColorPicker.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const U=require("react"),o=require("prop-types"),n=require("@progress/kendo-react-common"),s=require("@progress/kendo-react-buttons"),m=require("@progress/kendo-svg-icons"),X=require("./ColorPalette.js"),Y=require("./ColorGradient.js"),x=require("../package-metadata.js"),Z=require("@progress/kendo-react-intl"),l=require("../messages/index.js");function p(e){const b=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const f in e)if(f!=="default"){const B=Object.getOwnPropertyDescriptor(e,f);Object.defineProperty(b,f,B.get?B:{enumerable:!0,get:()=>e[f]})}}return b.default=e,Object.freeze(b)}const t=p(U),L=t.forwardRef((e,b)=>{const f=!n.validatePackage(x.packageMetadata,{component:"FlatColorPicker"}),B=n.getLicenseMessage(x.packageMetadata),h=t.useRef(null),w=t.useRef(null),F=t.useRef(null),{defaultValue:E,showButtons:N=!0,showPreview:z=!0,showClearButton:T=!0,view:P=e.views?void 0:"ColorGradient",views:d=P?void 0:["gradient","palette"],activeView:S="gradient",size:i="medium"}=e,[v,j]=t.useState((P||"ColorGradient")==="ColorGradient"),[g,V]=t.useState((d!=null?d:[])[0]==="gradient"&&S==="gradient"),[c,y]=t.useState(e.value||E||void 0),[C,M]=t.useState(e.value||E||void 0),_=e.value!==void 0?e.value:void 0;t.useEffect(()=>{y(e.value)},[e.value]);const k=Z.useLocalization(),R=t.useCallback(()=>{h.current&&h.current.focus()},[h]);t.useImperativeHandle(h,()=>({element:w.current,focus:R,props:e,value:_}),[_,R,e]),t.useImperativeHandle(b,()=>h.current);const q=t.useCallback(a=>{(a==="ColorGradient"&&!v||a==="ColorPalette"&&v)&&j(!v)},[v]),I=t.useCallback(a=>{a==="gradient"&&!g||a==="palette"&&g||a==="palette"&&S==="gradient"?V(!g):a==="gradient"&&S==="palette"&&V(!0)},[S,g]),D=t.useCallback(a=>{var u;const r=E||void 0;if(y(r),M(r),(u=e._gradientSettings)!=null&&u._adaptive&&e.setAdaptiveModeValue&&e.setAdaptiveModeValue(r),e.onPreviewChange){const G={value:r,nativeEvent:a.nativeEvent,syntheticEvent:a};e.onPreviewChange.call(void 0,G)}},[E,e.onPreviewChange]),O=t.useCallback(a=>{var r;if(y(a.value),e.onPreviewChange){const u={value:a.value,nativeEvent:a.nativeEvent,syntheticEvent:a.syntheticEvent};e.onPreviewChange.call(void 0,u)}(r=e._gradientSettings)!=null&&r._adaptive&&e.setAdaptiveModeValue&&e.setAdaptiveModeValue(a.value)},[e.onPreviewChange]),K=t.useCallback(a=>{if(c!==void 0&&M(c),e.onChange){const r={value:c,nativeEvent:a.nativeEvent,syntheticEvent:a};e.onChange.call(void 0,r)}},[c,e.onChange]),H=t.useCallback(()=>{y(C),e.setOpen&&e.setOpen(!1)},[C]),W=t.useCallback(a=>{if(y(C),e.onPreviewChange){const r={value:C,nativeEvent:a.nativeEvent,syntheticEvent:a};e.onPreviewChange.call(void 0,r)}},[C,e.onPreviewChange]),$=t.useCallback(a=>{var u,G;if((!a.relatedTarget||!((u=w.current)!=null&&u.contains(a.relatedTarget)))&&!((G=e._gradientSettings)!=null&&G._adaptive)&&(!N&&c!==void 0&&M(c),!N&&e.onChange)){const Q={value:c,nativeEvent:a.nativeEvent,syntheticEvent:a};e.onChange.call(void 0,Q)}},[c,N,e.onChange]),A=t.useMemo(()=>new n.Navigation({root:w,selectors:[".k-coloreditor"],tabIndex:0,keyboardEvents:{keydown:{Tab:(a,r,u)=>{n.getActiveElement(document)===a?n.disableNavigatableContainer(a):n.keepFocusInContainer(u,a)},Enter:(a,r,u)=>{n.getActiveElement(document)===a&&(n.focusFirstFocusableChild(a),n.enableNavigatableContainer(a))},Escape:(a,r,u)=>{n.getActiveElement(document)!==a&&(a.focus(),n.disableNavigatableContainer(a))}}}}),[]),J=t.useCallback(A.triggerKeyboardEvent.bind(A),[]);return t.createElement("div",{id:e.id,role:"textbox","aria-label":e.ariaLabel,"aria-labelledby":e.ariaLabelledBy,"aria-disabled":e.disabled?"true":void 0,style:{position:"relative",...e.style},ref:w,tabIndex:n.getTabIndex(e.tabIndex,e.disabled),className:n.classNames("k-flatcolorpicker k-coloreditor",{[`k-coloreditor-${n.kendoThemeMaps.sizeMap[i]||i}`]:i,"k-disabled":e.disabled},e.className),onBlur:$,onKeyDown:J},e.header||t.createElement("div",{className:"k-coloreditor-header k-hstack"},t.createElement("div",{className:"k-coloreditor-header-actions k-hstack"},d&&d[0]==="gradient"&&d[1]==="palette"&&t.createElement(s.ButtonGroup,{className:"k-button-group-flat"},t.createElement(s.Button,{type:"button","aria-label":k.toLanguageString(l.flatColorPickerColorGradientBtn,l.messages[l.flatColorPickerColorGradientBtn]),togglable:!0,fillMode:"flat",size:i,svgIcon:m.dropletSliderIcon,selected:g,onClick:()=>I("gradient")}),t.createElement(s.Button,{type:"button","aria-label":k.toLanguageString(l.flatColorPickerColorPaletteBtn,l.messages[l.flatColorPickerColorPaletteBtn]),togglable:!0,fillMode:"flat",size:i,svgIcon:m.paletteIcon,selected:!g,onClick:()=>I("palette")})),d&&d[0]==="palette"&&d[1]==="gradient"&&t.createElement(s.ButtonGroup,{className:"k-button-group-flat"},t.createElement(s.Button,{type:"button","aria-label":k.toLanguageString(l.flatColorPickerColorPaletteBtn,l.messages[l.flatColorPickerColorPaletteBtn]),togglable:!0,fillMode:"flat",size:i,svgIcon:m.paletteIcon,selected:!g,onClick:()=>I("palette")}),t.createElement(s.Button,{type:"button","aria-label":k.toLanguageString(l.flatColorPickerColorGradientBtn,l.messages[l.flatColorPickerColorGradientBtn]),togglable:!0,fillMode:"flat",size:i,svgIcon:m.dropletSliderIcon,selected:g,onClick:()=>I("gradient")})),P&&t.createElement(s.ButtonGroup,{className:"k-button-group-flat"},t.createElement(s.Button,{type:"button","aria-label":k.toLanguageString(l.flatColorPickerColorGradientBtn,l.messages[l.flatColorPickerColorGradientBtn]),togglable:!0,fillMode:"flat",size:i,selected:v,onClick:()=>q("ColorGradient"),icon:"droplet-slider",svgIcon:m.dropletSliderIcon}),t.createElement(s.Button,{type:"button","aria-label":k.toLanguageString(l.flatColorPickerColorPaletteBtn,l.messages[l.flatColorPickerColorPaletteBtn]),togglable:!0,fillMode:"flat",size:i,selected:!v,onClick:()=>q("ColorPalette"),icon:"palette",svgIcon:m.paletteIcon}))),t.createElement("div",{className:"k-spacer"}),t.createElement("div",{className:"k-coloreditor-header-actions k-hstack"},T&&t.createElement(s.Button,{type:"button",fillMode:"flat",size:i,onClick:D,"aria-label":k.toLanguageString(l.flatColorPickerClearBtn,l.messages[l.flatColorPickerClearBtn]),icon:"droplet-slash",svgIcon:m.dropletSlashIcon}),z&&t.createElement("div",{className:"k-coloreditor-preview k-vstack"},t.createElement("span",{className:n.classNames("k-coloreditor-preview-color","k-color-preview",{"k-no-color":_===void 0})},t.createElement("span",{className:"k-color-preview-mask",style:{background:c||void 0}})),t.createElement("span",{className:n.classNames("k-coloreditor-current-color","k-color-preview",{"k-no-color":C===void 0}),onClick:W},t.createElement("span",{className:"k-color-preview-mask",style:{background:C||void 0}})))),f&&t.createElement(n.WatermarkOverlay,{message:B})),t.createElement("div",{className:"k-coloreditor-views k-vstack"},(P&&v||d&&g)&&t.createElement(Y.ColorGradient,{ref:F,role:"none",ariaLabel:void 0,value:c,onChange:O,opacity:e.opacity,format:e.format,size:i,_adaptive:e._gradientSettings?e._gradientSettings._adaptive:void 0,...e._gradientSettings}),(P&&!v||d&&!g)&&t.createElement(X.ColorPalette,{ariaDisabled:!0,ariaLabelledBy:"required_label",value:c,onChange:O,size:i,...e._paletteSettings})),N&&t.createElement("div",{className:"k-coloreditor-footer k-actions k-actions-start k-actions-horizontal"},t.createElement(s.Button,{type:"button",themeColor:"primary",className:"k-coloreditor-apply",size:i,onClick:K},l.messages[l.flatColorPickerApplyBtn]),t.createElement(s.Button,{type:"button",className:"k-coloreditor-cancel",size:i,onClick:H},l.messages[l.flatColorPickerCancelBtn])))}),ee={id:o.string,style:o.any,className:o.string,value:o.string,defaultValue:o.string,onPreviewChange:o.func,onChange:o.func,opacity:o.bool,format:o.any,tabIndex:o.number,ariaLabel:o.string,ariaLabelledBy:o.string,disabled:o.bool,view:o.any,header:o.any,showClearButton:o.bool,showPreview:o.bool,showButtons:o.bool,views:o.array,size:o.oneOf([null,"small","medium","large"])};L.displayName="KendoFlatColorPicker";L.propTypes=ee;exports.FlatColorPicker=L;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const X=require("react"),o=require("prop-types"),n=require("@progress/kendo-react-common"),s=require("@progress/kendo-react-buttons"),m=require("@progress/kendo-svg-icons"),Y=require("./ColorPalette.js"),Z=require("./ColorGradient.js"),x=require("../package-metadata.js"),p=require("@progress/kendo-react-intl"),l=require("../messages/index.js");function ee(e){const b=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const f in e)if(f!=="default"){const B=Object.getOwnPropertyDescriptor(e,f);Object.defineProperty(b,f,B.get?B:{enumerable:!0,get:()=>e[f]})}}return b.default=e,Object.freeze(b)}const t=ee(X),L=t.forwardRef((e,b)=>{const f=!n.validatePackage(x.packageMetadata,{component:"FlatColorPicker"}),B=n.getLicenseMessage(x.packageMetadata),h=t.useRef(null),w=t.useRef(null),F=t.useRef(null),{defaultValue:E,showButtons:N=!0,showPreview:z=!0,showClearButton:T=!0,view:P=e.views?void 0:"ColorGradient",views:d=P?void 0:["gradient","palette"],activeView:S="gradient",size:i=void 0,rounded:j=void 0}=e,[v,D]=t.useState((P||"ColorGradient")==="ColorGradient"),[g,V]=t.useState((d!=null?d:[])[0]==="gradient"&&S==="gradient"),[c,y]=t.useState(e.value||E||void 0),[C,M]=t.useState(e.value||E||void 0),_=e.value!==void 0?e.value:void 0;t.useEffect(()=>{y(e.value)},[e.value]);const k=p.useLocalization(),R=t.useCallback(()=>{h.current&&h.current.focus()},[h]);t.useImperativeHandle(h,()=>({element:w.current,focus:R,props:e,value:_}),[_,R,e]),t.useImperativeHandle(b,()=>h.current);const q=t.useCallback(a=>{(a==="ColorGradient"&&!v||a==="ColorPalette"&&v)&&D(!v)},[v]),I=t.useCallback(a=>{a==="gradient"&&!g||a==="palette"&&g||a==="palette"&&S==="gradient"?V(!g):a==="gradient"&&S==="palette"&&V(!0)},[S,g]),K=t.useCallback(a=>{var u;const r=E||void 0;if(y(r),M(r),(u=e._gradientSettings)!=null&&u._adaptive&&e.setAdaptiveModeValue&&e.setAdaptiveModeValue(r),e.onPreviewChange){const G={value:r,nativeEvent:a.nativeEvent,syntheticEvent:a};e.onPreviewChange.call(void 0,G)}},[E,e.onPreviewChange]),O=t.useCallback(a=>{var r;if(y(a.value),e.onPreviewChange){const u={value:a.value,nativeEvent:a.nativeEvent,syntheticEvent:a.syntheticEvent};e.onPreviewChange.call(void 0,u)}(r=e._gradientSettings)!=null&&r._adaptive&&e.setAdaptiveModeValue&&e.setAdaptiveModeValue(a.value)},[e.onPreviewChange]),H=t.useCallback(a=>{if(c!==void 0&&M(c),e.onChange){const r={value:c,nativeEvent:a.nativeEvent,syntheticEvent:a};e.onChange.call(void 0,r)}},[c,e.onChange]),W=t.useCallback(()=>{y(C),e.setOpen&&e.setOpen(!1)},[C]),$=t.useCallback(a=>{if(y(C),e.onPreviewChange){const r={value:C,nativeEvent:a.nativeEvent,syntheticEvent:a};e.onPreviewChange.call(void 0,r)}},[C,e.onPreviewChange]),J=t.useCallback(a=>{var u,G;if((!a.relatedTarget||!((u=w.current)!=null&&u.contains(a.relatedTarget)))&&!((G=e._gradientSettings)!=null&&G._adaptive)&&(!N&&c!==void 0&&M(c),!N&&e.onChange)){const U={value:c,nativeEvent:a.nativeEvent,syntheticEvent:a};e.onChange.call(void 0,U)}},[c,N,e.onChange]),A=t.useMemo(()=>new n.Navigation({root:w,selectors:[".k-coloreditor"],tabIndex:0,keyboardEvents:{keydown:{Tab:(a,r,u)=>{n.getActiveElement(document)===a?n.disableNavigatableContainer(a):n.keepFocusInContainer(u,a)},Enter:(a,r,u)=>{n.getActiveElement(document)===a&&(n.focusFirstFocusableChild(a),n.enableNavigatableContainer(a))},Escape:(a,r,u)=>{n.getActiveElement(document)!==a&&(a.focus(),n.disableNavigatableContainer(a))}}}}),[]),Q=t.useCallback(A.triggerKeyboardEvent.bind(A),[]);return t.createElement("div",{id:e.id,role:"textbox","aria-label":e.ariaLabel,"aria-labelledby":e.ariaLabelledBy,"aria-disabled":e.disabled?"true":void 0,style:{position:"relative",...e.style},ref:w,tabIndex:n.getTabIndex(e.tabIndex,e.disabled),className:n.classNames("k-flatcolorpicker k-coloreditor",{[`k-coloreditor-${n.kendoThemeMaps.sizeMap[i]||i}`]:i,"k-disabled":e.disabled},e.className),onBlur:J,onKeyDown:Q},e.header||t.createElement("div",{className:"k-coloreditor-header k-hstack"},t.createElement("div",{className:"k-coloreditor-header-actions k-hstack"},d&&d[0]==="gradient"&&d[1]==="palette"&&t.createElement(s.ButtonGroup,{className:"k-button-group-flat"},t.createElement(s.Button,{type:"button","aria-label":k.toLanguageString(l.flatColorPickerColorGradientBtn,l.messages[l.flatColorPickerColorGradientBtn]),togglable:!0,size:i,fillMode:"flat",svgIcon:m.dropletSliderIcon,selected:g,onClick:()=>I("gradient")}),t.createElement(s.Button,{type:"button","aria-label":k.toLanguageString(l.flatColorPickerColorPaletteBtn,l.messages[l.flatColorPickerColorPaletteBtn]),togglable:!0,size:i,fillMode:"flat",svgIcon:m.paletteIcon,selected:!g,onClick:()=>I("palette")})),d&&d[0]==="palette"&&d[1]==="gradient"&&t.createElement(s.ButtonGroup,{className:"k-button-group-flat"},t.createElement(s.Button,{type:"button","aria-label":k.toLanguageString(l.flatColorPickerColorPaletteBtn,l.messages[l.flatColorPickerColorPaletteBtn]),togglable:!0,fillMode:"flat",size:i,svgIcon:m.paletteIcon,selected:!g,onClick:()=>I("palette")}),t.createElement(s.Button,{type:"button","aria-label":k.toLanguageString(l.flatColorPickerColorGradientBtn,l.messages[l.flatColorPickerColorGradientBtn]),togglable:!0,fillMode:"flat",size:i,svgIcon:m.dropletSliderIcon,selected:g,onClick:()=>I("gradient")})),P&&t.createElement(s.ButtonGroup,{className:"k-button-group-flat"},t.createElement(s.Button,{type:"button","aria-label":k.toLanguageString(l.flatColorPickerColorGradientBtn,l.messages[l.flatColorPickerColorGradientBtn]),togglable:!0,fillMode:"flat",size:i,selected:v,onClick:()=>q("ColorGradient"),icon:"droplet-slider",svgIcon:m.dropletSliderIcon}),t.createElement(s.Button,{type:"button","aria-label":k.toLanguageString(l.flatColorPickerColorPaletteBtn,l.messages[l.flatColorPickerColorPaletteBtn]),togglable:!0,fillMode:"flat",size:i,selected:!v,onClick:()=>q("ColorPalette"),icon:"palette",svgIcon:m.paletteIcon}))),t.createElement("div",{className:"k-spacer"}),t.createElement("div",{className:"k-coloreditor-header-actions k-hstack"},T&&t.createElement(s.Button,{type:"button",fillMode:"flat",size:i,onClick:K,"aria-label":k.toLanguageString(l.flatColorPickerClearBtn,l.messages[l.flatColorPickerClearBtn]),icon:"droplet-slash",svgIcon:m.dropletSlashIcon}),z&&t.createElement("div",{className:"k-coloreditor-preview k-vstack"},t.createElement("span",{className:n.classNames("k-coloreditor-preview-color","k-color-preview",{"k-no-color":_===void 0})},t.createElement("span",{className:"k-color-preview-mask",style:{background:c||void 0}})),t.createElement("span",{className:n.classNames("k-coloreditor-current-color","k-color-preview",{"k-no-color":C===void 0}),onClick:$},t.createElement("span",{className:"k-color-preview-mask",style:{background:C||void 0}})))),f&&t.createElement(n.WatermarkOverlay,{message:B})),t.createElement("div",{className:"k-coloreditor-views k-vstack"},(P&&v||d&&g)&&t.createElement(Z.ColorGradient,{ref:F,role:"none",ariaLabel:void 0,value:c,onChange:O,opacity:e.opacity,format:e.format,size:i,rounded:j,_adaptive:e._gradientSettings?e._gradientSettings._adaptive:void 0,...e._gradientSettings}),(P&&!v||d&&!g)&&t.createElement(Y.ColorPalette,{ariaDisabled:!0,ariaLabelledBy:"required_label",value:c,onChange:O,size:i,...e._paletteSettings})),N&&t.createElement("div",{className:"k-coloreditor-footer k-actions k-actions-start k-actions-horizontal"},t.createElement(s.Button,{type:"button",themeColor:"primary",className:"k-coloreditor-apply",onClick:H},l.messages[l.flatColorPickerApplyBtn]),t.createElement(s.Button,{type:"button",className:"k-coloreditor-cancel",onClick:W},l.messages[l.flatColorPickerCancelBtn])))}),te={id:o.string,style:o.any,className:o.string,value:o.string,defaultValue:o.string,onPreviewChange:o.func,onChange:o.func,opacity:o.bool,format:o.any,tabIndex:o.number,ariaLabel:o.string,ariaLabelledBy:o.string,disabled:o.bool,view:o.any,header:o.any,showClearButton:o.bool,showPreview:o.bool,showButtons:o.bool,views:o.array,size:o.oneOf(["small","medium","large"])};L.displayName="KendoFlatColorPicker";L.propTypes=te;exports.FlatColorPicker=L;