dishui 0.0.105 → 0.0.106

package/dist/components/pro/RichTextEditor/Toolbar/ColorPicker.js

@@ -1,36 +1,88 @@
 import { useAnchoredDropdown as e } from "./useAnchoredDropdown.js";
 import { useEffect as t, useId as n, useRef as r, useState as i } from "react";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { createPortal as s } from "react-dom";
 //#region src/components/pro/RichTextEditor/Toolbar/ColorPicker.tsx
-var s = /* @__PURE__ */ "#000000.#434343.#666666.#999999.#cccccc.#eeeeee.#ffffff.#ff0000.#ff4500.#ff8c00.#ffd700.#32cd32.#00bfff.#8a2be2.#ff69b4.#dc143c.#ff6347.#ffa500.#9acd32.#20b2aa.#4169e1.#9370db.#db7093.#b22222.#d2691e.#daa520.#228b22.#008b8b.#191970.#4b0082".split("."), c = ({ value: c, onChange: l, title: u, icon: d, kind: f = "text", buttonClassName: p = "rte-toolbar__btn" }) => {
-	let [m, h] = i(!1), g = r(null), _ = r(null), v = r(null), y = n(), b = e(m, _, v), x = u || (f === "text" ? "Text color" : "Highlight color"), S = `${x}: ${c || (f === "text" ? "Default" : "None")}`;
-	return t(() => {
+var c = /* @__PURE__ */ "#000000.#434343.#666666.#999999.#cccccc.#eeeeee.#ffffff.#ff0000.#ff4500.#ff8c00.#ffd700.#32cd32.#00bfff.#8a2be2.#ff69b4.#dc143c.#ff6347.#ffa500.#9acd32.#20b2aa.#4169e1.#9370db.#db7093.#b22222.#d2691e.#daa520.#228b22.#008b8b.#191970.#4b0082".split("."), l = ({ value: l, onChange: u, title: d, icon: f, kind: p = "text", buttonClassName: m = "rte-toolbar__btn", portalOwner: h }) => {
+	let [g, _] = i(!1), [v, y] = i({}), b = r(null), x = r(null), S = r(null), C = n(), w = e(g, x, S), T = d || (p === "text" ? "Text color" : "Highlight color"), E = `${T}: ${l || (p === "text" ? "Default" : "None")}`;
+	t(() => {
 		let e = (e) => {
-			g.current && !g.current.contains(e.target) && h(!1);
+			b.current && !b.current.contains(e.target) && !S.current?.contains(e.target) && _(!1);
 		};
 		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-	}, []), /* @__PURE__ */ o("div", {
-		ref: g,
+	}, [b, S]);
+	let D = g && /* @__PURE__ */ o("div", {
+		ref: S,
+		id: C,
+		"data-rte-palette-owner": h,
+		className: "rte-toolbar__color-dropdown",
+		role: "group",
+		"aria-label": T,
+		style: {
+			...w,
+			...v
+		},
+		children: [c.map((e) => /* @__PURE__ */ a("button", {
+			type: "button",
+			className: `rte-toolbar__color-swatch ${e === l ? "rte-toolbar__color-swatch--active" : ""}`,
+			style: { backgroundColor: e },
+			onMouseDown: h ? (e) => e.preventDefault() : void 0,
+			onClick: () => {
+				u(e), _(!1);
+			},
+			title: `${T}: ${e}`,
+			"aria-label": `${T}: ${e}`,
+			"aria-pressed": e.toLowerCase() === l.toLowerCase()
+		}, e)), /* @__PURE__ */ a("button", {
+			type: "button",
+			className: "rte-toolbar__color-clear",
+			onMouseDown: h ? (e) => e.preventDefault() : void 0,
+			onClick: () => {
+				u(""), _(!1);
+			},
+			title: `Clear ${T}`,
+			"aria-label": `Clear ${T}`,
+			"aria-pressed": !l,
+			children: "Clear"
+		})]
+	});
+	return /* @__PURE__ */ o("div", {
+		ref: b,
 		className: "rte-toolbar__color-picker",
 		onBlur: (e) => {
-			e.currentTarget.contains(e.relatedTarget) || h(!1);
+			!e.currentTarget.contains(e.relatedTarget) && !S.current?.contains(e.relatedTarget) && _(!1);
 		},
 		onKeyDown: (e) => {
-			e.key === "Escape" && m && (e.preventDefault(), e.stopPropagation(), h(!1), _.current?.focus());
+			e.key === "Escape" && g && (e.preventDefault(), e.stopPropagation(), _(!1), x.current?.focus());
 		},
 		children: [/* @__PURE__ */ a("button", {
 			type: "button",
-			ref: _,
-			className: `${p} rte-toolbar__color-trigger`,
-			onClick: () => h(!m),
-			title: S,
-			"aria-label": S,
-			"aria-expanded": m,
-			"aria-controls": m ? y : void 0,
+			ref: x,
+			className: `${m} rte-toolbar__color-trigger`,
+			onMouseDown: h ? (e) => e.preventDefault() : void 0,
+			onClick: (e) => {
+				if (h && !g) {
+					let t = getComputedStyle(e.currentTarget), n = {};
+					for (let e of [
+						"--rte-bg",
+						"--rte-text",
+						"--rte-border",
+						"--rte-placeholder",
+						"--rte-active-color",
+						"--rte-toolbar-btn-hover"
+					]) n[e] = t.getPropertyValue(e);
+					y(n);
+				}
+				_(!g);
+			},
+			title: E,
+			"aria-label": E,
+			"aria-expanded": g,
+			"aria-controls": g ? C : void 0,
 			children: /* @__PURE__ */ o("span", {
-				className: `rte-toolbar__color-icon rte-toolbar__color-icon--${f}`,
+				className: `rte-toolbar__color-icon rte-toolbar__color-icon--${p}`,
 				"aria-hidden": "true",
-				children: [d || (f === "text" ? /* @__PURE__ */ a("span", {
+				children: [f || (p === "text" ? /* @__PURE__ */ a("span", {
 					className: "rte-toolbar__color-letter",
 					children: "A"
 				}) : /* @__PURE__ */ a("svg", {
@@ -44,42 +96,14 @@ var s = /* @__PURE__ */ "#000000.#434343.#666666.#999999.#cccccc.#eeeeee.#ffffff
 					strokeLinejoin: "round",
 					children: /* @__PURE__ */ a("path", { d: "m14 3 7 7-9 9-7-7zM5 12l-2 7 2 2 7-2M14 7l3 3M3 21h6" })
 				})), /* @__PURE__ */ a("span", {
-					className: `rte-toolbar__color-indicator${c ? "" : " rte-toolbar__color-indicator--empty"}`,
-					style: { backgroundColor: c || void 0 }
+					className: `rte-toolbar__color-indicator${l ? "" : " rte-toolbar__color-indicator--empty"}`,
+					style: { backgroundColor: l || void 0 }
 				})]
 			})
-		}), m && /* @__PURE__ */ o("div", {
-			ref: v,
-			id: y,
-			className: "rte-toolbar__color-dropdown",
-			role: "group",
-			"aria-label": x,
-			style: b,
-			children: [s.map((e) => /* @__PURE__ */ a("button", {
-				type: "button",
-				className: `rte-toolbar__color-swatch ${e === c ? "rte-toolbar__color-swatch--active" : ""}`,
-				style: { backgroundColor: e },
-				onClick: () => {
-					l(e), h(!1);
-				},
-				title: `${x}: ${e}`,
-				"aria-label": `${x}: ${e}`,
-				"aria-pressed": e.toLowerCase() === c.toLowerCase()
-			}, e)), /* @__PURE__ */ a("button", {
-				type: "button",
-				className: "rte-toolbar__color-clear",
-				onClick: () => {
-					l(""), h(!1);
-				},
-				title: `Clear ${x}`,
-				"aria-label": `Clear ${x}`,
-				"aria-pressed": !c,
-				children: "Clear"
-			})]
-		})]
+		}), h && typeof document < "u" ? s(D, document.body) : D]
 	});
 };
 //#endregion
-export { c as ColorPicker };
+export { l as ColorPicker };
 
 //# sourceMappingURL=ColorPicker.js.map

package/dist/components/pro/RichTextEditor/Toolbar/ColorPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.js","names":[],"sources":["../../../../../src/components/pro/RichTextEditor/Toolbar/ColorPicker.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useId } from 'react';\nimport { useAnchoredDropdown } from './useAnchoredDropdown';\n\ninterface ColorPickerProps {\n  value: string;\n  onChange: (color: string) => void;\n  title?: string;\n  icon?: React.ReactNode;\n  kind?: 'text' | 'highlight';\n  /** Button class; defaults to the classic toolbar button. Bubble toolbar passes its own. */\n  buttonClassName?: string;\n}\n\nconst COLORS = [\n  '#000000', '#434343', '#666666', '#999999', '#cccccc', '#eeeeee', '#ffffff',\n  '#ff0000', '#ff4500', '#ff8c00', '#ffd700', '#32cd32', '#00bfff', '#8a2be2',\n  '#ff69b4', '#dc143c', '#ff6347', '#ffa500', '#9acd32', '#20b2aa', '#4169e1',\n  '#9370db', '#db7093', '#b22222', '#d2691e', '#daa520', '#228b22', '#008b8b',\n  '#191970', '#4b0082',\n];\n\nexport const ColorPicker: React.FC<ColorPickerProps> = ({ value, onChange, title, icon, kind = 'text', buttonClassName = 'rte-toolbar__btn' }) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const ref = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const paletteRef = useRef<HTMLDivElement>(null);\n  const paletteId = useId();\n  const dropdownStyle = useAnchoredDropdown(isOpen, triggerRef, paletteRef);\n  const label = title || (kind === 'text' ? 'Text color' : 'Highlight color');\n  const description = `${label}: ${value || (kind === 'text' ? 'Default' : 'None')}`;\n\n  useEffect(() => {\n    const handler = (e: MouseEvent) => {\n      if (ref.current && !ref.current.contains(e.target as Node)) {\n        setIsOpen(false);\n      }\n    };\n    document.addEventListener('mousedown', handler);\n    return () => document.removeEventListener('mousedown', handler);\n  }, []);\n\n  return (\n    <div ref={ref} className=\"rte-toolbar__color-picker\"\n      onBlur={(event) => {\n        if (!event.currentTarget.contains(event.relatedTarget)) setIsOpen(false);\n      }}\n      onKeyDown={(event) => {\n        if (event.key === 'Escape' && isOpen) {\n          event.preventDefault();\n          event.stopPropagation();\n          setIsOpen(false);\n          triggerRef.current?.focus();\n        }\n      }}>\n      <button\n        type=\"button\"\n        ref={triggerRef}\n        className={`${buttonClassName} rte-toolbar__color-trigger`}\n        onClick={() => setIsOpen(!isOpen)}\n        title={description}\n        aria-label={description}\n        aria-expanded={isOpen}\n        aria-controls={isOpen ? paletteId : undefined}\n      >\n        <span className={`rte-toolbar__color-icon rte-toolbar__color-icon--${kind}`} aria-hidden=\"true\">\n          {icon || (kind === 'text' ? <span className=\"rte-toolbar__color-letter\">A</span> : (\n            <svg width=\"18\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n              <path d=\"m14 3 7 7-9 9-7-7zM5 12l-2 7 2 2 7-2M14 7l3 3M3 21h6\" />\n            </svg>\n          ))}\n          <span\n            className={`rte-toolbar__color-indicator${value ? '' : ' rte-toolbar__color-indicator--empty'}`}\n            style={{ backgroundColor: value || undefined }}\n          />\n        </span>\n      </button>\n      {isOpen && (\n        <div ref={paletteRef} id={paletteId} className=\"rte-toolbar__color-dropdown\" role=\"group\" aria-label={label} style={dropdownStyle}>\n          {COLORS.map((c) => (\n            <button\n              key={c}\n              type=\"button\"\n              className={`rte-toolbar__color-swatch ${c === value ? 'rte-toolbar__color-swatch--active' : ''}`}\n              style={{ backgroundColor: c }}\n              onClick={() => { onChange(c); setIsOpen(false); }}\n              title={`${label}: ${c}`}\n              aria-label={`${label}: ${c}`}\n              aria-pressed={c.toLowerCase() === value.toLowerCase()}\n            />\n          ))}\n          <button\n            type=\"button\"\n            className=\"rte-toolbar__color-clear\"\n            onClick={() => { onChange(''); setIsOpen(false); }}\n            title={`Clear ${label}`}\n            aria-label={`Clear ${label}`}\n            aria-pressed={!value}\n          >\n            Clear\n          </button>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;AAaA,IAAM,IAAS,2QAMf,GAEa,KAA2C,EAAE,UAAO,aAAU,UAAO,SAAM,UAAO,QAAQ,qBAAkB,yBAAyB;CAChJ,IAAM,CAAC,GAAQ,KAAa,EAAS,EAAK,GACpC,IAAM,EAAuB,IAAI,GACjC,IAAa,EAA0B,IAAI,GAC3C,IAAa,EAAuB,IAAI,GACxC,IAAY,EAAM,GAClB,IAAgB,EAAoB,GAAQ,GAAY,CAAU,GAClE,IAAQ,MAAU,MAAS,SAAS,eAAe,oBACnD,IAAc,GAAG,EAAM,IAAI,MAAU,MAAS,SAAS,YAAY;CAYzE,OAVA,QAAgB;EACd,IAAM,KAAW,MAAkB;GACjC,AAAI,EAAI,WAAW,CAAC,EAAI,QAAQ,SAAS,EAAE,MAAc,KACvD,EAAU,EAAK;EAEnB;EAEA,OADA,SAAS,iBAAiB,aAAa,CAAO,SACjC,SAAS,oBAAoB,aAAa,CAAO;CAChE,GAAG,CAAC,CAAC,GAGH,kBAAC,OAAD;EAAU;EAAK,WAAU;EACvB,SAAS,MAAU;GACjB,AAAK,EAAM,cAAc,SAAS,EAAM,aAAa,KAAG,EAAU,EAAK;EACzE;EACA,YAAY,MAAU;GACpB,AAAI,EAAM,QAAQ,YAAY,MAC5B,EAAM,eAAe,GACrB,EAAM,gBAAgB,GACtB,EAAU,EAAK,GACf,EAAW,SAAS,MAAM;EAE9B;EAXF,UAAA,CAYE,kBAAC,UAAD;GACE,MAAK;GACL,KAAK;GACL,WAAW,GAAG,EAAgB;GAC9B,eAAe,EAAU,CAAC,CAAM;GAChC,OAAO;GACP,cAAY;GACZ,iBAAe;GACf,iBAAe,IAAS,IAAY,KAAA;GAEpC,UAAA,kBAAC,QAAD;IAAM,WAAW,oDAAoD;IAAQ,eAAY;IAAzF,UAAA,CACG,MAAS,MAAS,SAAS,kBAAC,QAAD;KAAM,WAAU;KAA4B,UAAA;IAAO,CAAA,IAC7E,kBAAC,OAAD;KAAK,OAAM;KAAK,QAAO;KAAK,SAAQ;KAAY,MAAK;KAAO,QAAO;KAAe,aAAY;KAAI,eAAc;KAAQ,gBAAe;KACrI,UAAA,kBAAC,QAAD,EAAM,GAAE,uDAAwD,CAAA;IAC7D,CAAA,IAEP,kBAAC,QAAD;KACE,WAAW,+BAA+B,IAAQ,KAAK;KACvD,OAAO,EAAE,iBAAiB,KAAS,KAAA,EAAU;IAC9C,CAAA,CACG;;EACA,CAAA,GACP,KACC,kBAAC,OAAD;GAAK,KAAK;GAAY,IAAI;GAAW,WAAU;GAA8B,MAAK;GAAQ,cAAY;GAAO,OAAO;GAApH,UAAA,CACG,EAAO,KAAK,MACX,kBAAC,UAAD;IAEE,MAAK;IACL,WAAW,6BAA6B,MAAM,IAAQ,sCAAsC;IAC5F,OAAO,EAAE,iBAAiB,EAAE;IAC5B,eAAe;KAAe,AAAb,EAAS,CAAC,GAAG,EAAU,EAAK;IAAG;IAChD,OAAO,GAAG,EAAM,IAAI;IACpB,cAAY,GAAG,EAAM,IAAI;IACzB,gBAAc,EAAE,YAAY,MAAM,EAAM,YAAY;GACrD,GARM,CAQN,CACF,GACD,kBAAC,UAAD;IACE,MAAK;IACL,WAAU;IACV,eAAe;KAAgB,AAAd,EAAS,EAAE,GAAG,EAAU,EAAK;IAAG;IACjD,OAAO,SAAS;IAChB,cAAY,SAAS;IACrB,gBAAc,CAAC;IAChB,UAAA;GAEO,CAAA,CACL;EAEJ,CAAA,CAAA;;AAET"}
+{"version":3,"file":"ColorPicker.js","names":[],"sources":["../../../../../src/components/pro/RichTextEditor/Toolbar/ColorPicker.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useId } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useAnchoredDropdown } from './useAnchoredDropdown';\n\ninterface ColorPickerProps {\n  value: string;\n  onChange: (color: string) => void;\n  title?: string;\n  icon?: React.ReactNode;\n  kind?: 'text' | 'highlight';\n  /** Button class; defaults to the classic toolbar button. Bubble toolbar passes its own. */\n  buttonClassName?: string;\n  /** Portals the palette outside scroll-clipped bubble toolbars. */\n  portalOwner?: string;\n}\n\nconst COLORS = [\n  '#000000', '#434343', '#666666', '#999999', '#cccccc', '#eeeeee', '#ffffff',\n  '#ff0000', '#ff4500', '#ff8c00', '#ffd700', '#32cd32', '#00bfff', '#8a2be2',\n  '#ff69b4', '#dc143c', '#ff6347', '#ffa500', '#9acd32', '#20b2aa', '#4169e1',\n  '#9370db', '#db7093', '#b22222', '#d2691e', '#daa520', '#228b22', '#008b8b',\n  '#191970', '#4b0082',\n];\n\nexport const ColorPicker: React.FC<ColorPickerProps> = ({ value, onChange, title, icon, kind = 'text', buttonClassName = 'rte-toolbar__btn', portalOwner }) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [paletteTheme, setPaletteTheme] = useState<React.CSSProperties>({});\n  const ref = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const paletteRef = useRef<HTMLDivElement>(null);\n  const paletteId = useId();\n  const dropdownStyle = useAnchoredDropdown(isOpen, triggerRef, paletteRef);\n  const label = title || (kind === 'text' ? 'Text color' : 'Highlight color');\n  const description = `${label}: ${value || (kind === 'text' ? 'Default' : 'None')}`;\n\n  useEffect(() => {\n    const handler = (e: MouseEvent) => {\n      if (ref.current && !ref.current.contains(e.target as Node) && !paletteRef.current?.contains(e.target as Node)) {\n        setIsOpen(false);\n      }\n    };\n    document.addEventListener('mousedown', handler);\n    return () => document.removeEventListener('mousedown', handler);\n  }, [ref, paletteRef]);\n\n  const palette = isOpen && (\n    <div ref={paletteRef} id={paletteId} data-rte-palette-owner={portalOwner}\n      className=\"rte-toolbar__color-dropdown\" role=\"group\" aria-label={label}\n      style={{ ...dropdownStyle, ...paletteTheme }}>\n      {COLORS.map((color) => (\n        <button key={color} type=\"button\"\n          className={`rte-toolbar__color-swatch ${color === value ? 'rte-toolbar__color-swatch--active' : ''}`}\n          style={{ backgroundColor: color }}\n          onMouseDown={portalOwner ? event => event.preventDefault() : undefined}\n          onClick={() => { onChange(color); setIsOpen(false); }}\n          title={`${label}: ${color}`} aria-label={`${label}: ${color}`}\n          aria-pressed={color.toLowerCase() === value.toLowerCase()} />\n      ))}\n      <button type=\"button\" className=\"rte-toolbar__color-clear\"\n        onMouseDown={portalOwner ? event => event.preventDefault() : undefined}\n        onClick={() => { onChange(''); setIsOpen(false); }}\n        title={`Clear ${label}`} aria-label={`Clear ${label}`} aria-pressed={!value}>Clear</button>\n    </div>\n  );\n\n  return (\n    <div ref={ref} className=\"rte-toolbar__color-picker\"\n      onBlur={(event) => {\n        if (!event.currentTarget.contains(event.relatedTarget) && !paletteRef.current?.contains(event.relatedTarget)) setIsOpen(false);\n      }}\n      onKeyDown={(event) => {\n        if (event.key === 'Escape' && isOpen) {\n          event.preventDefault();\n          event.stopPropagation();\n          setIsOpen(false);\n          triggerRef.current?.focus();\n        }\n      }}>\n      <button\n        type=\"button\"\n        ref={triggerRef}\n        className={`${buttonClassName} rte-toolbar__color-trigger`}\n        onMouseDown={portalOwner ? event => event.preventDefault() : undefined}\n        onClick={event => {\n          if (portalOwner && !isOpen) {\n            const computed = getComputedStyle(event.currentTarget);\n            const variables: Record<string, string> = {};\n            for (const name of ['--rte-bg', '--rte-text', '--rte-border', '--rte-placeholder', '--rte-active-color', '--rte-toolbar-btn-hover']) {\n              variables[name] = computed.getPropertyValue(name);\n            }\n            setPaletteTheme(variables);\n          }\n          setIsOpen(!isOpen);\n        }}\n        title={description}\n        aria-label={description}\n        aria-expanded={isOpen}\n        aria-controls={isOpen ? paletteId : undefined}\n      >\n        <span className={`rte-toolbar__color-icon rte-toolbar__color-icon--${kind}`} aria-hidden=\"true\">\n          {icon || (kind === 'text' ? <span className=\"rte-toolbar__color-letter\">A</span> : (\n            <svg width=\"18\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n              <path d=\"m14 3 7 7-9 9-7-7zM5 12l-2 7 2 2 7-2M14 7l3 3M3 21h6\" />\n            </svg>\n          ))}\n          <span\n            className={`rte-toolbar__color-indicator${value ? '' : ' rte-toolbar__color-indicator--empty'}`}\n            style={{ backgroundColor: value || undefined }}\n          />\n        </span>\n      </button>\n      {portalOwner && typeof document !== 'undefined' ? createPortal(palette, document.body) : palette}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/components/pro/RichTextEditor/Toolbar/SelectDropdown.d.ts

@@ -16,6 +16,7 @@ interface SelectDropdownProps {
     onChange: (value: string) => void;
     title?: string;
     width?: number;
+    className?: string;
 }
 export declare const SelectDropdown: React.FC<SelectDropdownProps>;
 export {};

package/dist/components/pro/RichTextEditor/Toolbar/SelectDropdown.js

@@ -1,7 +1,8 @@
+import e from "../../../Select/index.js";
 import "react";
-import { jsx as e } from "react/jsx-runtime";
+import { jsx as t } from "react/jsx-runtime";
 //#region src/components/pro/RichTextEditor/Toolbar/SelectDropdown.tsx
-var t = [
+var n = [
 	{
 		label: "Default",
 		value: ""
@@ -42,7 +43,7 @@ var t = [
 		label: "Comic Sans MS",
 		value: "Comic Sans MS, cursive"
 	}
-], n = [
+], r = [
 	{
 		label: "Default",
 		value: ""
@@ -99,18 +100,15 @@ var t = [
 		label: "72px",
 		value: "72px"
 	}
-], r = ({ value: t, options: n, onChange: r, title: i, width: a = 110 }) => /* @__PURE__ */ e("select", {
-	className: "rte-toolbar__select",
-	value: t,
-	onChange: (e) => r(e.target.value),
-	title: i,
-	style: { width: a },
-	children: n.map((t) => /* @__PURE__ */ e("option", {
-		value: t.value,
-		children: t.label
-	}, t.value))
+], i = ({ value: n, options: r, onChange: i, title: a, width: o = 110, className: s = "rte-toolbar__select" }) => /* @__PURE__ */ t(e, {
+	className: s,
+	style: { width: o },
+	options: r,
+	value: n,
+	onChange: (e) => i(String(e)),
+	"aria-label": a ?? "Formatting option"
 });
 //#endregion
-export { t as FONT_FAMILIES, n as FONT_SIZES, r as SelectDropdown };
+export { n as FONT_FAMILIES, r as FONT_SIZES, i as SelectDropdown };
 
 //# sourceMappingURL=SelectDropdown.js.map

package/dist/components/pro/RichTextEditor/Toolbar/SelectDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectDropdown.js","names":[],"sources":["../../../../../src/components/pro/RichTextEditor/Toolbar/SelectDropdown.tsx"],"sourcesContent":["import React from 'react';\n\nexport const FONT_FAMILIES = [\n  { label: 'Default', value: '' },\n  { label: 'Arial', value: 'Arial, sans-serif' },\n  { label: 'Helvetica', value: 'Helvetica, sans-serif' },\n  { label: 'Georgia', value: 'Georgia, serif' },\n  { label: 'Times New Roman', value: 'Times New Roman, serif' },\n  { label: 'Courier New', value: 'Courier New, monospace' },\n  { label: 'Verdana', value: 'Verdana, sans-serif' },\n  { label: 'Trebuchet MS', value: 'Trebuchet MS, sans-serif' },\n  { label: 'Impact', value: 'Impact, sans-serif' },\n  { label: 'Comic Sans MS', value: 'Comic Sans MS, cursive' },\n];\n\nexport const FONT_SIZES = [\n  { label: 'Default', value: '' },\n  { label: '10px', value: '10px' },\n  { label: '12px', value: '12px' },\n  { label: '14px', value: '14px' },\n  { label: '16px', value: '16px' },\n  { label: '18px', value: '18px' },\n  { label: '20px', value: '20px' },\n  { label: '24px', value: '24px' },\n  { label: '28px', value: '28px' },\n  { label: '32px', value: '32px' },\n  { label: '36px', value: '36px' },\n  { label: '48px', value: '48px' },\n  { label: '64px', value: '64px' },\n  { label: '72px', value: '72px' },\n];\n\ninterface SelectDropdownProps {\n  value: string;\n  options: { label: string; value: string }[];\n  onChange: (value: string) => void;\n  title?: string;\n  width?: number;\n}\n\nexport const SelectDropdown: React.FC<SelectDropdownProps> = ({ value, options, onChange, title, width = 110 }) => (\n  <select\n    className=\"rte-toolbar__select\"\n    value={value}\n    onChange={(e) => onChange(e.target.value)}\n    title={title}\n    style={{ width }}\n  >\n    {options.map((opt) => (\n      <option key={opt.value} value={opt.value}>{opt.label}</option>\n    ))}\n  </select>\n);\n"],"mappings":";;;AAEA,IAAa,IAAgB;CAC3B;EAAE,OAAO;EAAW,OAAO;CAAG;CAC9B;EAAE,OAAO;EAAS,OAAO;CAAoB;CAC7C;EAAE,OAAO;EAAa,OAAO;CAAwB;CACrD;EAAE,OAAO;EAAW,OAAO;CAAiB;CAC5C;EAAE,OAAO;EAAmB,OAAO;CAAyB;CAC5D;EAAE,OAAO;EAAe,OAAO;CAAyB;CACxD;EAAE,OAAO;EAAW,OAAO;CAAsB;CACjD;EAAE,OAAO;EAAgB,OAAO;CAA2B;CAC3D;EAAE,OAAO;EAAU,OAAO;CAAqB;CAC/C;EAAE,OAAO;EAAiB,OAAO;CAAyB;AAC5D,GAEa,IAAa;CACxB;EAAE,OAAO;EAAW,OAAO;CAAG;CAC9B;EAAE,OAAO;EAAQ,OAAO;CAAO;CAC/B;EAAE,OAAO;EAAQ,OAAO;CAAO;CAC/B;EAAE,OAAO;EAAQ,OAAO;CAAO;CAC/B;EAAE,OAAO;EAAQ,OAAO;CAAO;CAC/B;EAAE,OAAO;EAAQ,OAAO;CAAO;CAC/B;EAAE,OAAO;EAAQ,OAAO;CAAO;CAC/B;EAAE,OAAO;EAAQ,OAAO;CAAO;CAC/B;EAAE,OAAO;EAAQ,OAAO;CAAO;CAC/B;EAAE,OAAO;EAAQ,OAAO;CAAO;CAC/B;EAAE,OAAO;EAAQ,OAAO;CAAO;CAC/B;EAAE,OAAO;EAAQ,OAAO;CAAO;CAC/B;EAAE,OAAO;EAAQ,OAAO;CAAO;CAC/B;EAAE,OAAO;EAAQ,OAAO;CAAO;AACjC,GAUa,KAAiD,EAAE,UAAO,YAAS,aAAU,UAAO,WAAQ,UACvG,kBAAC,UAAD;CACE,WAAU;CACH;CACP,WAAW,MAAM,EAAS,EAAE,OAAO,KAAK;CACjC;CACP,OAAO,EAAE,SAAM;CAEd,UAAA,EAAQ,KAAK,MACZ,kBAAC,UAAD;EAAwB,OAAO,EAAI;EAAQ,UAAA,EAAI;CAAc,GAAhD,EAAI,KAA4C,CAC9D;AACK,CAAA"}
+{"version":3,"file":"SelectDropdown.js","names":[],"sources":["../../../../../src/components/pro/RichTextEditor/Toolbar/SelectDropdown.tsx"],"sourcesContent":["import React from 'react';\nimport Select from '../../../Select';\n\nexport const FONT_FAMILIES = [\n  { label: 'Default', value: '' },\n  { label: 'Arial', value: 'Arial, sans-serif' },\n  { label: 'Helvetica', value: 'Helvetica, sans-serif' },\n  { label: 'Georgia', value: 'Georgia, serif' },\n  { label: 'Times New Roman', value: 'Times New Roman, serif' },\n  { label: 'Courier New', value: 'Courier New, monospace' },\n  { label: 'Verdana', value: 'Verdana, sans-serif' },\n  { label: 'Trebuchet MS', value: 'Trebuchet MS, sans-serif' },\n  { label: 'Impact', value: 'Impact, sans-serif' },\n  { label: 'Comic Sans MS', value: 'Comic Sans MS, cursive' },\n];\n\nexport const FONT_SIZES = [\n  { label: 'Default', value: '' },\n  { label: '10px', value: '10px' },\n  { label: '12px', value: '12px' },\n  { label: '14px', value: '14px' },\n  { label: '16px', value: '16px' },\n  { label: '18px', value: '18px' },\n  { label: '20px', value: '20px' },\n  { label: '24px', value: '24px' },\n  { label: '28px', value: '28px' },\n  { label: '32px', value: '32px' },\n  { label: '36px', value: '36px' },\n  { label: '48px', value: '48px' },\n  { label: '64px', value: '64px' },\n  { label: '72px', value: '72px' },\n];\n\ninterface SelectDropdownProps {\n  value: string;\n  options: { label: string; value: string }[];\n  onChange: (value: string) => void;\n  title?: string;\n  width?: number;\n  className?: string;\n}\n\nexport const SelectDropdown: React.FC<SelectDropdownProps> = ({ value, options, onChange, title, width = 110, className = 'rte-toolbar__select' }) => (\n  <Select\n    className={className}\n    style={{ width }}\n    options={options}\n    value={value}\n    onChange={(next) => onChange(String(next))}\n    aria-label={title ?? 'Formatting option'}\n  />\n);\n"],"mappings":";;;;AAGA,IAAa,IAAgB;CAC3B;EAAE,OAAO;EAAW,OAAO;CAAG;CAC9B;EAAE,OAAO;EAAS,OAAO;CAAoB;CAC7C;EAAE,OAAO;EAAa,OAAO;CAAwB;CACrD;EAAE,OAAO;EAAW,OAAO;CAAiB;CAC5C;EAAE,OAAO;EAAmB,OAAO;CAAyB;CAC5D;EAAE,OAAO;EAAe,OAAO;CAAyB;CACxD;EAAE,OAAO;EAAW,OAAO;CAAsB;CACjD;EAAE,OAAO;EAAgB,OAAO;CAA2B;CAC3D;EAAE,OAAO;EAAU,OAAO;CAAqB;CAC/C;EAAE,OAAO;EAAiB,OAAO;CAAyB;AAC5D,GAEa,IAAa;CACxB;EAAE,OAAO;EAAW,OAAO;CAAG;CAC9B;EAAE,OAAO;EAAQ,OAAO;CAAO;CAC/B;EAAE,OAAO;EAAQ,OAAO;CAAO;CAC/B;EAAE,OAAO;EAAQ,OAAO;CAAO;CAC/B;EAAE,OAAO;EAAQ,OAAO;CAAO;CAC/B;EAAE,OAAO;EAAQ,OAAO;CAAO;CAC/B;EAAE,OAAO;EAAQ,OAAO;CAAO;CAC/B;EAAE,OAAO;EAAQ,OAAO;CAAO;CAC/B;EAAE,OAAO;EAAQ,OAAO;CAAO;CAC/B;EAAE,OAAO;EAAQ,OAAO;CAAO;CAC/B;EAAE,OAAO;EAAQ,OAAO;CAAO;CAC/B;EAAE,OAAO;EAAQ,OAAO;CAAO;CAC/B;EAAE,OAAO;EAAQ,OAAO;CAAO;CAC/B;EAAE,OAAO;EAAQ,OAAO;CAAO;AACjC,GAWa,KAAiD,EAAE,UAAO,YAAS,aAAU,UAAO,WAAQ,KAAK,eAAY,4BACxH,kBAAC,GAAD;CACa;CACX,OAAO,EAAE,SAAM;CACN;CACF;CACP,WAAW,MAAS,EAAS,OAAO,CAAI,CAAC;CACzC,cAAY,KAAS;AACtB,CAAA"}