react-material-design 0.0.0-stage → 0.5.0

package/dist/components/NumberField/NumberField.render.js

@@ -0,0 +1,268 @@
+import e, { convertIconDefinition as t } from "../Icon/Icon.js";
+import { clamp as n, isBrowser as r } from "../../utils/index.js";
+import i from "../misc/StateLayer/index.js";
+import a from "../Button/icon/index.js";
+import o from "../containers/FilledField/index.js";
+import s from "../containers/OutlinedField/index.js";
+import './style.css';/* empty css           */
+import { c } from "react/compiler-runtime";
+import l from "classnames";
+import { useRef as u, useState as d } from "react";
+import { Fragment as ee, jsx as f, jsxs as p } from "react/jsx-runtime";
+import { useWindowEventListener as te } from "react-dom-event-hooks";
+//#region lib/components/NumberField/NumberField.render.tsx
+function ne(e, t = "decimal") {
+	return Intl.NumberFormat(e).formatToParts(1000.1).find((e) => e.type === t)?.value;
+}
+function re(e, t, r, i, a = 4) {
+	let o = 10 ** a;
+	return n((e.toFixed(a) * o + t.toFixed(a) * o) / o, r, i);
+}
+function ie(e, t, r, i, a = 4) {
+	let o = 10 ** a;
+	return n((e.toFixed(a) * o - t.toFixed(a) * o) / o, r, i);
+}
+function m(m) {
+	let h = c(149), g, _, v, y, b, x, S, C, w, T, E, D, O, ae, k;
+	if (h[0] !== m) {
+		let { shape: e, label: t, onValueChange: n, onChange: r, onInvalid: i, value: a, supportingText: o, clearable: s, decimal: c, hugeStep: l, hideArrow: u, leadingIcon: d, trailingIcon: ee, prefix: f, suffix: p, ...te } = m;
+		D = e, x = t, T = n, C = r, w = i, _ = a, ae = o, g = s, y = l, v = u, S = d, k = ee, E = f, O = p, b = te, h[0] = m, h[1] = g, h[2] = _, h[3] = v, h[4] = y, h[5] = b, h[6] = x, h[7] = S, h[8] = C, h[9] = w, h[10] = T, h[11] = E, h[12] = D, h[13] = O, h[14] = ae, h[15] = k;
+	} else g = h[1], _ = h[2], v = h[3], y = h[4], b = h[5], x = h[6], S = h[7], C = h[8], w = h[9], T = h[10], E = h[11], D = h[12], O = h[13], ae = h[14], k = h[15];
+	let A = u(null), oe;
+	h[16] !== _ || h[17] !== m.defaultValue ? (oe = _?.toString() ?? m.defaultValue?.toString() ?? "", h[16] = _, h[17] = m.defaultValue, h[18] = oe) : oe = h[18];
+	let [se, ce] = d(oe), le;
+	h[19] !== _ || h[20] !== se ? (le = _?.toString() ?? se, h[19] = _, h[20] = se, h[21] = le) : le = h[21];
+	let j = le, [ue, de] = d(!1), [M, fe] = d(), [pe, me] = d(!1), N = u(!1), he = u(null), ge = u(null), P;
+	h[22] === Symbol.for("react.memo_cache_sentinel") ? (P = (e) => N.current = e.shiftKey, h[22] = P) : P = h[22];
+	let _e = P, ve = typeof m.value == "number" || !!j.length || pe, F = M ?? ae, I = m.lang ?? (r() ? window.navigator.language : void 0), L;
+	h[23] === m.min ? L = h[24] : (L = m.min === void 0 ? void 0 : parseFloat(m.min.toString()), h[23] = m.min, h[24] = L);
+	let R = L, ye;
+	h[25] === m.max ? ye = h[26] : (ye = m.max === void 0 ? void 0 : parseFloat(m.max.toString()), h[25] = m.max, h[26] = ye);
+	let z = ye, be;
+	h[27] === m.step ? be = h[28] : (be = m.step === void 0 ? void 0 : parseFloat(m.step.toString()), h[27] = m.step, h[28] = be);
+	let B = be, xe;
+	h[29] === y ? xe = h[30] : (xe = y === void 0 ? void 0 : parseFloat(y.toString()), h[29] = y, h[30] = xe);
+	let V = xe, H = x ? x + (m.required ? "*" : "") : void 0, Se;
+	h[31] !== _ || h[32] !== T ? (Se = (e) => {
+		_ === void 0 && ce(e), fe(void 0), me(!1), T?.(parseFloat(e));
+	}, h[31] = _, h[32] = T, h[33] = Se) : Se = h[33];
+	let U = Se, Ce;
+	h[34] !== C || h[35] !== U ? (Ce = (e) => {
+		U(e.target.value), C?.(e);
+	}, h[34] = C, h[35] = U, h[36] = Ce) : Ce = h[36];
+	let we = Ce, Te;
+	h[37] === Symbol.for("react.memo_cache_sentinel") ? (Te = () => {
+		ge.current !== null && clearTimeout(ge.current), he.current !== null && clearInterval(he.current);
+	}, h[37] = Te) : Te = h[37];
+	let Ee = Te, De;
+	h[38] !== V || h[39] !== z || h[40] !== R || h[41] !== U || h[42] !== B || h[43] !== j ? (De = (e) => {
+		let t = e === void 0 || e, r = R ?? -Infinity, i = z ?? Infinity, a = () => n((N.current ? V ?? B : B) ?? 1, r, i);
+		U(re(parseFloat(j || `${R ?? 0}`), a(), r, i).toString()), t && (Ee(), ge.current = setTimeout(() => he.current = setInterval(() => U(re(parseFloat(A.current?.value ? A.current.value : `${R ?? 0}`), a(), r, i).toString()), 20), 400));
+	}, h[38] = V, h[39] = z, h[40] = R, h[41] = U, h[42] = B, h[43] = j, h[44] = De) : De = h[44];
+	let W = De, Oe;
+	h[45] !== V || h[46] !== z || h[47] !== R || h[48] !== U || h[49] !== B || h[50] !== j ? (Oe = (e) => {
+		let t = e === void 0 || e, r = R ?? -Infinity, i = z ?? Infinity, a = () => n((N.current ? V ?? B : B) ?? 1, R ?? -Infinity, z ?? Infinity);
+		U(ie(parseFloat(j || `${R ?? 0}`), a(), r, i).toString()), t && (Ee(), ge.current = setTimeout(() => he.current = setInterval(() => U(ie(parseFloat(A.current?.value ? A.current.value : `${R ?? 0}`), a(), r, i).toString()), 20), 400));
+	}, h[45] = V, h[46] = z, h[47] = R, h[48] = U, h[49] = B, h[50] = j, h[51] = Oe) : Oe = h[51];
+	let G = Oe, ke;
+	h[52] === W ? ke = h[53] : (ke = () => W(), h[52] = W, h[53] = ke);
+	let K = ke, Ae;
+	h[54] === G ? Ae = h[55] : (Ae = () => G(), h[54] = G, h[55] = Ae);
+	let q = Ae, je;
+	h[56] === Symbol.for("react.memo_cache_sentinel") ? (je = () => de(!0), h[56] = je) : je = h[56];
+	let Me = je, Ne;
+	h[57] === Symbol.for("react.memo_cache_sentinel") ? (Ne = (e) => {
+		de(!1), A.current?.validity.badInput ? me(!0) : A.current?.validity.valid && (e.currentTarget.value = e.currentTarget.valueAsNumber.toString());
+	}, h[57] = Ne) : Ne = h[57];
+	let Pe = Ne, Fe;
+	h[58] === w ? Fe = h[59] : (Fe = (e) => {
+		e.preventDefault(), fe(e.currentTarget.validationMessage), w?.(e), e.currentTarget.focus();
+	}, h[58] = w, h[59] = Fe);
+	let Ie = Fe, Le;
+	h[60] === S ? Le = h[61] : (Le = t(S), h[60] = S, h[61] = Le);
+	let J = Le, Re;
+	bb0: {
+		if (g) {
+			let e = k ?? "close", t;
+			h[62] === U ? t = h[63] : (t = () => U(""), h[62] = U, h[63] = t);
+			let n;
+			h[64] !== e || h[65] !== t ? (n = /* @__PURE__ */ f(a, {
+				icon: e,
+				color: "standard",
+				onClick: t,
+				className: "trailing"
+			}), h[64] = e, h[65] = t, h[66] = n) : n = h[66], Re = n;
+			break bb0;
+		}
+		if (M) {
+			let t;
+			h[67] === Symbol.for("react.memo_cache_sentinel") ? (t = /* @__PURE__ */ f(e, {
+				name: "error",
+				fill: !0,
+				className: "error"
+			}), h[67] = t) : t = h[67], Re = t;
+			break bb0;
+		}
+		Re = k;
+	}
+	let ze = Re, Be;
+	h[68] === ze ? Be = h[69] : (Be = t(ze), h[68] = ze, h[69] = Be);
+	let Y = Be, Ve;
+	h[70] !== G || h[71] !== W || h[72] !== I ? (Ve = (e) => {
+		let t = ne(I);
+		e.ctrlKey || (RegExp(`^[^\\d.${t}]$`).test(e.key) && e.preventDefault(), N.current && (e.code === "ArrowDown" || e.code === "ArrowUp") && (e.preventDefault(), e.code === "ArrowUp" ? W(!1) : e.code === "ArrowDown" && G(!1)));
+	}, h[70] = G, h[71] = W, h[72] = I, h[73] = Ve) : Ve = h[73];
+	let He = Ve, Ue;
+	h[74] !== b || h[75] !== I || h[76] !== we || h[77] !== Ie || h[78] !== He || h[79] !== m.required || h[80] !== j ? (Ue = /* @__PURE__ */ f("input", {
+		...b,
+		ref: A,
+		type: "number",
+		lang: I,
+		required: m.required,
+		onFocus: Me,
+		onBlur: Pe,
+		value: j,
+		onChange: we,
+		onKeyDown: He,
+		onInvalid: Ie,
+		title: ""
+	}), h[74] = b, h[75] = I, h[76] = we, h[77] = Ie, h[78] = He, h[79] = m.required, h[80] = j, h[81] = Ue) : Ue = h[81];
+	let X = Ue, We;
+	bb1: {
+		if (D === "filled") {
+			let t;
+			h[82] === Symbol.for("react.memo_cache_sentinel") ? (t = () => requestAnimationFrame(() => A.current?.focus()), h[82] = t) : t = h[82];
+			let n;
+			h[83] !== H || h[84] !== x ? (n = x && /* @__PURE__ */ f("span", {
+				className: "label",
+				children: H
+			}), h[83] = H, h[84] = x, h[85] = n) : n = h[85];
+			let r;
+			h[86] !== E || h[87] !== O ? (r = l("content", {
+				prefix: E,
+				suffix: O
+			}), h[86] = E, h[87] = O, h[88] = r) : r = h[88];
+			let a;
+			h[89] === E ? a = h[90] : (a = E && /* @__PURE__ */ f("span", {
+				className: "prefix",
+				children: E
+			}), h[89] = E, h[90] = a);
+			let o;
+			h[91] === O ? o = h[92] : (o = O && /* @__PURE__ */ f("span", {
+				className: "suffix",
+				children: O
+			}), h[91] = O, h[92] = o);
+			let s;
+			h[93] !== X || h[94] !== r || h[95] !== a || h[96] !== o ? (s = /* @__PURE__ */ p("div", {
+				className: r,
+				children: [
+					a,
+					X,
+					o
+				]
+			}), h[93] = X, h[94] = r, h[95] = a, h[96] = o, h[97] = s) : s = h[97];
+			let c;
+			h[98] !== n || h[99] !== s ? (c = /* @__PURE__ */ p("div", {
+				className: "container",
+				onMouseDown: t,
+				children: [n, s]
+			}), h[98] = n, h[99] = s, h[100] = c) : c = h[100];
+			let u;
+			h[101] !== v || h[102] !== q || h[103] !== K ? (u = !v && /* @__PURE__ */ p("div", {
+				className: "arrow",
+				children: [/* @__PURE__ */ p("div", {
+					className: "button",
+					onMouseDown: K,
+					children: [/* @__PURE__ */ f(i, {}), /* @__PURE__ */ f(e, { name: "keyboard_arrow_up" })]
+				}), /* @__PURE__ */ p("div", {
+					className: "button",
+					onMouseDown: q,
+					children: [/* @__PURE__ */ f(i, {}), /* @__PURE__ */ f(e, { name: "keyboard_arrow_down" })]
+				})]
+			}), h[101] = v, h[102] = q, h[103] = K, h[104] = u) : u = h[104];
+			let d;
+			h[105] !== J || h[106] !== c || h[107] !== u || h[108] !== Y ? (d = /* @__PURE__ */ p(ee, { children: [
+				J,
+				c,
+				Y,
+				u
+			] }), h[105] = J, h[106] = c, h[107] = u, h[108] = Y, h[109] = d) : d = h[109], We = d;
+			break bb1;
+		}
+		let t;
+		h[110] !== E || h[111] !== O ? (t = l("content", {
+			prefix: E,
+			suffix: O
+		}), h[110] = E, h[111] = O, h[112] = t) : t = h[112];
+		let n;
+		h[113] === E ? n = h[114] : (n = E && /* @__PURE__ */ f("span", {
+			className: "prefix",
+			children: E
+		}), h[113] = E, h[114] = n);
+		let r;
+		h[115] === O ? r = h[116] : (r = O && /* @__PURE__ */ f("span", {
+			className: "suffix",
+			children: O
+		}), h[115] = O, h[116] = r);
+		let a;
+		h[117] !== X || h[118] !== t || h[119] !== n || h[120] !== r ? (a = /* @__PURE__ */ p("div", {
+			className: t,
+			children: [
+				n,
+				X,
+				r
+			]
+		}), h[117] = X, h[118] = t, h[119] = n, h[120] = r, h[121] = a) : a = h[121];
+		let o;
+		h[122] !== v || h[123] !== q || h[124] !== K ? (o = !v && /* @__PURE__ */ p("div", {
+			className: "arrow",
+			children: [/* @__PURE__ */ p("div", {
+				className: "button",
+				onMouseDown: K,
+				children: [/* @__PURE__ */ f(i, {}), /* @__PURE__ */ f(e, { name: "keyboard_arrow_up" })]
+			}), /* @__PURE__ */ p("div", {
+				className: "button",
+				onMouseDown: q,
+				children: [/* @__PURE__ */ f(i, {}), /* @__PURE__ */ f(e, { name: "keyboard_arrow_down" })]
+			})]
+		}), h[122] = v, h[123] = q, h[124] = K, h[125] = o) : o = h[125];
+		let s;
+		h[126] !== J || h[127] !== a || h[128] !== o || h[129] !== Y ? (s = /* @__PURE__ */ p(ee, { children: [
+			J,
+			a,
+			Y,
+			o
+		] }), h[126] = J, h[127] = a, h[128] = o, h[129] = Y, h[130] = s) : s = h[130], We = s;
+	}
+	let Ge = We;
+	te("keydown", _e), te("keyup", _e), te("mouseup", Ee);
+	let Z;
+	h[131] === M ? Z = h[132] : (Z = l("TextField", "NumberField", { error: M }), h[131] = M, h[132] = Z);
+	let Q;
+	h[133] !== Ge || h[134] !== M || h[135] !== ve || h[136] !== ue || h[137] !== H || h[138] !== J || h[139] !== m.prefix || h[140] !== D || h[141] !== Y ? (Q = f(D === "filled" ? o : s, {
+		label: H,
+		filled: ve || !!m.prefix,
+		focus: ue,
+		error: !!M,
+		className: l({
+			leadingIcon: J,
+			trailingIcon: Y
+		}),
+		children: Ge
+	}), h[133] = Ge, h[134] = M, h[135] = ve, h[136] = ue, h[137] = H, h[138] = J, h[139] = m.prefix, h[140] = D, h[141] = Y, h[142] = Q) : Q = h[142];
+	let $;
+	h[143] === F ? $ = h[144] : ($ = F && /* @__PURE__ */ f("div", {
+		className: "support",
+		children: /* @__PURE__ */ f("div", {
+			className: "message",
+			children: F
+		})
+	}), h[143] = F, h[144] = $);
+	let Ke;
+	return h[145] !== Z || h[146] !== Q || h[147] !== $ ? (Ke = /* @__PURE__ */ p("div", {
+		className: Z,
+		children: [Q, $]
+	}), h[145] = Z, h[146] = Q, h[147] = $, h[148] = Ke) : Ke = h[148], Ke;
+}
+//#endregion
+export { m as default };

package/dist/components/NumberField/index.cjs

@@ -0,0 +1 @@
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("./NumberField.cjs");exports.default=e.default;

package/dist/components/NumberField/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './NumberField';
+export type { NumberFieldProps } from './NumberField.render';

package/dist/components/NumberField/index.js

@@ -0,0 +1 @@
+export { default } from "./NumberField.js";

package/dist/components/NumberField/style.css

@@ -0,0 +1 @@
+.TextField.NumberField>.FilledField>.arrow,.TextField.NumberField>.OutlinedField>.arrow{flex-direction:column;justify-content:center;align-self:stretch;gap:2px;display:flex}.TextField.NumberField>.FilledField>.arrow>.button,.TextField.NumberField>.OutlinedField>.arrow>.button{border-radius:var(--md-sys-shape-corner-extra-small);color:var(--md-sys-color-on-surface-variant);cursor:pointer;justify-content:center;align-items:center;width:36px;height:22px;display:flex}.TextField.NumberField>.FilledField>.arrow{margin-top:-1px}.TextField.NumberField>.FilledField>.arrow>.button{background-color:var(--md-sys-color-surface-container)}.TextField.NumberField>.FilledField>.arrow:nth-last-child(2):not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:-8px}.TextField.NumberField>.FilledField>.arrow:nth-last-child(2):is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-left:-8px}.TextField.NumberField>.OutlinedField>.arrow>.button{background-color:var(--md-sys-color-surface-container-highest)}.TextField.NumberField>.OutlinedField>.arrow:last-child:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:-6px}.TextField.NumberField>.OutlinedField>.arrow:last-child:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-left:-8px}

package/dist/components/ProgressIndicator/index.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+export interface ProgressIndicatorProps {
+    id?: string;
+    type?: "circular" | "linear";
+    progress?: number;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export default function ProgressIndicator(props: ProgressIndicatorProps): React.JSX.Element;

package/dist/components/Select/Option.cjs

@@ -0,0 +1 @@
+const e=require("../misc/OrderedCollection/index.cjs");let t=require("react/compiler-runtime");require("react");let n=require("react/jsx-runtime");function r(r){let i=(0,t.c)(9),a;i[0]!==r.className||i[1]!==r.default||i[2]!==r.disabled||i[3]!==r.icon||i[4]!==r.label||i[5]!==r.value?(a={icon:r.icon,label:r.label,value:r.value,default:r.default,disabled:r.disabled,className:r.className},i[0]=r.className,i[1]=r.default,i[2]=r.disabled,i[3]=r.icon,i[4]=r.label,i[5]=r.value,i[6]=a):a=i[6];let o=a,s;return i[7]===o?s=i[8]:(s=(0,n.jsx)(e.OrderedCollectionChild,{name:`Option`,parentName:`Select`,content:o}),i[7]=o,i[8]=s),s}exports.default=r;

package/dist/components/Select/Option.d.ts

@@ -0,0 +1,10 @@
+import { IconDefinition } from '../Icon/Icon';
+export interface OptionProps<T extends string | number = string> {
+    icon?: IconDefinition;
+    label?: string;
+    value: T;
+    default?: boolean;
+    disabled?: boolean;
+    className?: string;
+}
+export default function Option(props: OptionProps<string | number>): import('react').JSX.Element;

package/dist/components/Select/Option.js

@@ -0,0 +1,24 @@
+import { OrderedCollectionChild as e } from "../misc/OrderedCollection/index.js";
+import { c as t } from "react/compiler-runtime";
+import "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region lib/components/Select/Option.tsx
+function r(r) {
+	let i = t(9), a;
+	i[0] !== r.className || i[1] !== r.default || i[2] !== r.disabled || i[3] !== r.icon || i[4] !== r.label || i[5] !== r.value ? (a = {
+		icon: r.icon,
+		label: r.label,
+		value: r.value,
+		default: r.default,
+		disabled: r.disabled,
+		className: r.className
+	}, i[0] = r.className, i[1] = r.default, i[2] = r.disabled, i[3] = r.icon, i[4] = r.label, i[5] = r.value, i[6] = a) : a = i[6];
+	let o = a, s;
+	return i[7] === o ? s = i[8] : (s = /* @__PURE__ */ n(e, {
+		name: "Option",
+		parentName: "Select",
+		content: o
+	}), i[7] = o, i[8] = s), s;
+}
+//#endregion
+export { r as default };

package/dist/components/Select/Select.cjs

@@ -0,0 +1 @@
+require('./style.css');const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../Theme/Theme.cjs"),n=require("../../utils/index.cjs"),r=require("../misc/OrderedCollection/index.cjs"),i=require("../Menu/Menu.cjs"),a=require("../Menu/MenuItem.cjs");require("../Menu/index.cjs");const o=require("../misc/FloatingElement/index.cjs"),s=require("../Button/icon/index.cjs"),ee=require("../Chip/index.cjs"),c=require("../containers/FilledField/index.cjs"),te=require("../containers/OutlinedField/index.cjs");;/* empty css             */let l=require("classnames");l=e.__toESM(l,1);let u=require("react");u=e.__toESM(u,1);let d=require("react/jsx-runtime"),f=require("react-dom-event-hooks");function p(){return n.isBrowser()?/Mobi|Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent):!1}function m(e){let{shape:n,value:m,multiple:h,searchable:g,supportingText:_,onValueChange:v,onChange:y,onInvalid:ne}=e,{popoversContainer:re}=t.useTheme(`Select`),b=(0,u.useRef)(null),x=(0,u.useRef)(null),S=(0,u.useRef)(null),[C,ie]=(0,u.useState)([]),[ae,oe]=(0,u.useState)(p()),[w,T]=(0,u.useState)(``),[E,D]=(0,u.useState)(e.value??e.defaultValue),O=(0,u.useMemo)(()=>{let e=m??E;return h&&(e??=[]),Array.isArray(e)?e.map(e=>C?.find(t=>t.value===e)).filter(e=>!!e):C?.find(t=>t.value===e)},[m,E,h,C]),k=(0,u.useMemo)(()=>C.filter(e=>e&&(e.label??e.value.toString()).includes(w)),[w,C]),A=e.label?e.label+(e.required?`*`:``):void 0,j=(0,u.useRef)(null),M=(0,u.useRef)(!1),N=Array.isArray(O)&&!!O.length||!Array.isArray(O)&&O!==void 0,P=N||!!w.length,[F,I]=(0,u.useState)(e.defaultMenuIsOpen??!1),[L,se]=(0,u.useState)(e.defaultMenuIsOpen??!1),R=(0,u.useRef)(e.defaultMenuIsOpen??!1),[z,B]=(0,u.useState)(),[V,H]=(0,u.useState)(!1),U=z??_,[ce,le]=(0,u.useState)(null),ue=(0,u.useCallback)(e=>le(e.split(`-`)[0]),[]),W=C?.filter(t=>!e.multiple||!e.value?.includes(t.value)).filter(e=>!w||e.label?.toLowerCase().includes(w.trim().toLowerCase())),[G,K]=(0,u.useState)(C?.findIndex(e=>Array.isArray(O)&&O.at(0)?.value===e.value||!Array.isArray(O)&&O?.value===e.value)??null),de=(0,u.useMemo)(()=>(0,d.jsx)(`input`,{required:e.required,value:N?`true`:``,onChange:()=>{},onInvalid:e=>{H(!0),B(e.currentTarget.validationMessage),e.preventDefault()},style:{display:`none`}}),[e.required,N]),fe=(0,u.useCallback)((e,t)=>e.label===t.label&&e.value===t.value&&e.icon===t.icon&&e.className===t.className&&e.disabled===t.disabled&&e.default===t.default,[]),q=(0,u.useCallback)(e=>{se(e),R.current=e},[]),J=(0,u.useCallback)(()=>{q(!0),S.current?.focus()},[q]),Y=(0,u.useCallback)(e=>{let t;if(h&&Array.isArray(O)){if(e===void 0)return v?.([]);t=O.map(({value:e})=>e),t.includes(e)?t=t.filter(t=>t!==e):t.push(e),m===void 0&&D(t),v?.(t),y?.(C?.filter(e=>t.includes(e.value))??[])}else h||(m===void 0&&D(e),v?.(e),y?.(C?.find(e=>t.includes(e.value))))},[m,h,y,v,C,O]),X=(0,u.useCallback)(t=>{let n,r,i;if(!e.disabled)switch(t.code){case`ArrowDown`:case`ArrowRight`:if(t.code===`ArrowRight`&&L)break;W&&(L?(i=G===null?0:(G+1)%W.length,K(i)):h||(i=Math.max(0,Math.min(W.length-1,G===null?0:G+1)),K(i),r=W?.at(i),r&&Y(r.value))),t.preventDefault();break;case`ArrowUp`:case`ArrowLeft`:if(W){if(t.code===`ArrowLeft`&&L)break;L?(i=G!==null&&G>0?(G-1)%W.length:W.length-1,K(i)):h||(i=Math.max(0,Math.min(W.length-1,G===null?W.length-1:G-1)),K(i),r=W?.at(i),r&&Y(r.value))}t.preventDefault();break;case`Space`:F&&!L&&q(!0);break;case`Enter`:case`NumpadEnter`:r=G===null?void 0:W?.at(G),r&&(Y(r.value),z&&B(void 0),H(!1),x.current?.classList.remove(`invalid`)),q(!1),T(``);break;case`Escape`:q(!1),T(``),n=W?.findIndex(e=>e.label===E||e.value===E),K(n===void 0||n<0?null:n)}},[W,z,F,G,E,L,h,e.disabled,q,Y]),Z=(0,u.useCallback)(e=>Y(e),[Y]),Q=(0,u.useMemo)(()=>h&&Array.isArray(O)?O.map(t=>(0,d.jsx)(ee.default,{variant:`input`,label:t.label??t.value.toString(),data:t.value,type:`button`,tabIndex:-1,selectable:!1,deletable:!0,onDelete:Z,disabled:e.disabled},t.value)):null,[Z,h,e.disabled,O]),$=(0,u.useMemo)(()=>(0,d.jsxs)(d.Fragment,{children:[(0,d.jsxs)(`div`,{className:`control`,onMouseDown:J,children:[Q,(0,d.jsx)(`input`,{ref:S,className:(0,l.default)({searchable:g}),value:F?w:``,placeholder:Array.isArray(O)?``:O?.label??O?.value.toString(),readOnly:!g,disabled:e.disabled,onChange:e=>{T(e.target.value),!L&&e.target.value&&q(!0)},onKeyDown:X,onMouseDown:()=>{e.disabled||(q(!L),T(``))},onFocus:()=>{e.disabled||(I(!0),q(!0),T(``))},onBlur:()=>{e.disabled||M.current||I(!1)}})]}),e.clearable&&(0,d.jsx)(s.default,{className:`clear-indicator`,color:`standard`,icon:`close`,onClick:e=>{e.preventDefault(),Y()},onTouchEnd:e=>{e.preventDefault(),Y()},tabIndex:-1,disabled:e.disabled}),(0,d.jsx)(s.default,{className:(0,l.default)(`dropdown-indicator`,{open:L}),color:`standard`,icon:L?`arrow_drop_up`:`arrow_drop_down`,tabIndex:-1,onMouseUp:()=>{e.disabled||(q(!L),T(``))},disabled:e.disabled,type:`button`})]}),[Q,w,F,L,X,J,e.clearable,e.disabled,g,q,Y,O]);return(0,f.useWindowEventListener)(`resize`,()=>oe(p())),(0,f.useWindowEventListener)(`mousedown`,e=>{b.current?.contains(e.target)||(q(!1),I(!1))}),(0,d.jsxs)(`div`,{ref:b,className:(0,l.default)(`Select`,{error:z||V},e.className),children:[de,n===`filled`?(0,d.jsx)(c.default,{disabled:e.disabled,label:A,filled:P,focus:F||L,error:!!z||V,className:(0,l.default)({searchable:g}),children:$}):(0,d.jsx)(te.default,{disabled:e.disabled,label:A,filled:P,focus:F||L,error:!!z||V,className:(0,l.default)({searchable:g}),children:$}),U&&(0,d.jsx)(`span`,{className:`support`,children:U}),(0,d.jsx)(`select`,{multiple:h,value:Array.isArray(O)?O.map(e=>e.value.toString()):O?.value,tabIndex:e.tabIndex,onFocus:e.onFocus,onInvalid:e=>{e.preventDefault(),B(e.currentTarget.validationMessage),ne?.(e),e.currentTarget.focus()},style:{display:ae?`block`:`none`},onChange:e=>{let t=[],n;for(let n=0;n<e.target.selectedOptions.length;n++)t.push(e.target.selectedOptions[n].value);n=C.filter(e=>t.includes(e.value))??[],h?(v?.(t),y?.(n)):(v?.(t.at(0)??``),y?.(n.at(0))),z&&B(void 0),H(!1),x.current?.classList.remove(`invalid`)},required:e.required,children:k?.map(e=>(0,d.jsx)(`option`,{value:e.value,label:e.label},e.value))}),(0,d.jsx)(o.default,{root:re,flip:(0,u.useMemo)(()=>({allowedPlacements:[`top-start`,`top-end`,`bottom-start`,`bottom-end`]}),[]),autoUpdate:!0,placement:`bottom-start`,open:L,onPlacementChange:ue,children:(0,d.jsxs)(i.default,{ref:j,className:(0,l.default)(`sub-component`,ce,{visible:L}),onMouseEnter:()=>{M.current=!0},onMouseLeave:()=>{M.current=!1},children:[k?.map((e,t)=>(0,d.jsx)(a.default,{icon:e.icon,text:e.label??e.value.toString(),type:`button`,disabled:e.disabled,tabIndex:-1,selectable:!0,selected:h&&Array.isArray(O)&&O.some(t=>t.value===e.value)||!Array.isArray(O)&&O?.value===e.value,className:(0,l.default)(e.className,{hovered:G===t}),onClick:()=>{Y(e.value),S.current?.focus(),z&&B(void 0),H(!1),x.current?.classList.remove(`invalid`)},onMouseEnter:()=>{R.current&&K(t)}},e.value)),!C.length&&e.noOptionMessage?(0,d.jsx)(a.default,{text:e.noOptionMessage,style:{justifyContent:`center`,cursor:`default`}}):null]})}),(0,d.jsx)(r.default,{childName:`Option`,onChildrenChange:ie,compareChild:fe,children:e.children})]})}exports.default=m;

package/dist/components/Select/Select.d.ts

@@ -0,0 +1,32 @@
+import { OptionProps } from './Option';
+import { PropsWithChildren, SelectHTMLAttributes, default as React } from 'react';
+export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "onChange" | "value" | "defaultValue"> {
+    shape?: "filled" | "outlined";
+    label?: string;
+    defaultMenuIsOpen?: boolean;
+    clearable?: boolean;
+    searchable?: boolean;
+    noOptionMessage?: string | null;
+    hideErrorText?: boolean;
+    supportingText?: string;
+    tabIndex?: number;
+    hideDropdownIndicator?: boolean;
+    onMenuOpen?: () => void;
+    onMenuClose?: () => void;
+}
+export interface SingleSelectProps<T extends string | number = string> extends SelectProps {
+    multiple?: false;
+    defaultValue?: T;
+    value?: T;
+    onValueChange?: (value: T | undefined) => void;
+    onChange?: (newValue: OptionProps<T> | undefined) => void;
+    small?: boolean;
+}
+export interface MultiSelectProps<T extends string | number = string> extends SelectProps {
+    multiple: true;
+    defaultValue?: T[];
+    value?: T[];
+    onValueChange?: (values: T[]) => void;
+    onChange?: (newValue: OptionProps<T>[]) => void;
+}
+export default function Select<T extends string | number = string>(props: PropsWithChildren<SingleSelectProps<T> | MultiSelectProps<T>>): React.JSX.Element;

package/dist/components/Select/Select.js

@@ -0,0 +1,265 @@
+import { useTheme as e } from "../Theme/Theme.js";
+import { isBrowser as t } from "../../utils/index.js";
+import n from "../misc/OrderedCollection/index.js";
+import r from "../Menu/Menu.js";
+import i from "../Menu/MenuItem.js";
+import "../Menu/index.js";
+import ee from "../misc/FloatingElement/index.js";
+import a from "../Button/icon/index.js";
+import te from "../Chip/index.js";
+import o from "../containers/FilledField/index.js";
+import ne from "../containers/OutlinedField/index.js";
+import './style.css';/* empty css           */
+import s from "classnames";
+import { useCallback as c, useMemo as l, useRef as u, useState as d } from "react";
+import { Fragment as re, jsx as f, jsxs as p } from "react/jsx-runtime";
+import { useWindowEventListener as m } from "react-dom-event-hooks";
+//#region lib/components/Select/Select.tsx
+function h() {
+	return t() ? /Mobi|Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) : !1;
+}
+function g(t) {
+	let { shape: g, value: _, multiple: v, searchable: y, supportingText: ie, onValueChange: b, onChange: x, onInvalid: S } = t, { popoversContainer: ae } = e("Select"), C = u(null), w = u(null), T = u(null), [E, D] = d([]), [oe, se] = d(h()), [O, k] = d(""), [A, j] = d(t.value ?? t.defaultValue), M = l(() => {
+		let e = _ ?? A;
+		return v && (e ??= []), Array.isArray(e) ? e.map((e) => E?.find((t) => t.value === e)).filter((e) => !!e) : E?.find((t) => t.value === e);
+	}, [
+		_,
+		A,
+		v,
+		E
+	]), N = l(() => E.filter((e) => e && (e.label ?? e.value.toString()).includes(O)), [O, E]), ce = t.label ? t.label + (t.required ? "*" : "") : void 0, le = u(null), P = u(!1), F = Array.isArray(M) && !!M.length || !Array.isArray(M) && M !== void 0, ue = F || !!O.length, [I, L] = d(t.defaultMenuIsOpen ?? !1), [R, de] = d(t.defaultMenuIsOpen ?? !1), z = u(t.defaultMenuIsOpen ?? !1), [B, V] = d(), [H, U] = d(!1), W = B ?? ie, [fe, pe] = d(null), me = c((e) => pe(e.split("-")[0]), []), G = E?.filter((e) => !t.multiple || !t.value?.includes(e.value)).filter((e) => !O || e.label?.toLowerCase().includes(O.trim().toLowerCase())), [K, q] = d(E?.findIndex((e) => Array.isArray(M) && M.at(0)?.value === e.value || !Array.isArray(M) && M?.value === e.value) ?? null), he = l(() => /* @__PURE__ */ f("input", {
+		required: t.required,
+		value: F ? "true" : "",
+		onChange: () => {},
+		onInvalid: (e) => {
+			U(!0), V(e.currentTarget.validationMessage), e.preventDefault();
+		},
+		style: { display: "none" }
+	}), [t.required, F]), ge = c((e, t) => e.label === t.label && e.value === t.value && e.icon === t.icon && e.className === t.className && e.disabled === t.disabled && e.default === t.default, []), J = c((e) => {
+		de(e), z.current = e;
+	}, []), Y = c(() => {
+		J(!0), T.current?.focus();
+	}, [J]), X = c((e) => {
+		let t;
+		if (v && Array.isArray(M)) {
+			if (e === void 0) return b?.([]);
+			t = M.map(({ value: e }) => e), t.includes(e) ? t = t.filter((t) => t !== e) : t.push(e), _ === void 0 && j(t), b?.(t), x?.(E?.filter((e) => t.includes(e.value)) ?? []);
+		} else v || (_ === void 0 && j(e), b?.(e), x?.(E?.find((e) => t.includes(e.value))));
+	}, [
+		_,
+		v,
+		x,
+		b,
+		E,
+		M
+	]), Z = c((e) => {
+		let n, r, i;
+		if (!t.disabled) switch (e.code) {
+			case "ArrowDown":
+			case "ArrowRight":
+				if (e.code === "ArrowRight" && R) break;
+				G && (R ? (i = K === null ? 0 : (K + 1) % G.length, q(i)) : v || (i = Math.max(0, Math.min(G.length - 1, K === null ? 0 : K + 1)), q(i), r = G?.at(i), r && X(r.value))), e.preventDefault();
+				break;
+			case "ArrowUp":
+			case "ArrowLeft":
+				if (G) {
+					if (e.code === "ArrowLeft" && R) break;
+					R ? (i = K !== null && K > 0 ? (K - 1) % G.length : G.length - 1, q(i)) : v || (i = Math.max(0, Math.min(G.length - 1, K === null ? G.length - 1 : K - 1)), q(i), r = G?.at(i), r && X(r.value));
+				}
+				e.preventDefault();
+				break;
+			case "Space":
+				I && !R && J(!0);
+				break;
+			case "Enter":
+			case "NumpadEnter":
+				r = K === null ? void 0 : G?.at(K), r && (X(r.value), B && V(void 0), U(!1), w.current?.classList.remove("invalid")), J(!1), k("");
+				break;
+			case "Escape": J(!1), k(""), n = G?.findIndex((e) => e.label === A || e.value === A), q(n === void 0 || n < 0 ? null : n);
+		}
+	}, [
+		G,
+		B,
+		I,
+		K,
+		A,
+		R,
+		v,
+		t.disabled,
+		J,
+		X
+	]), Q = c((e) => X(e), [X]), $ = l(() => v && Array.isArray(M) ? M.map((e) => /* @__PURE__ */ f(te, {
+		variant: "input",
+		label: e.label ?? e.value.toString(),
+		data: e.value,
+		type: "button",
+		tabIndex: -1,
+		selectable: !1,
+		deletable: !0,
+		onDelete: Q,
+		disabled: t.disabled
+	}, e.value)) : null, [
+		Q,
+		v,
+		t.disabled,
+		M
+	]), _e = l(() => /* @__PURE__ */ p(re, { children: [
+		/* @__PURE__ */ p("div", {
+			className: "control",
+			onMouseDown: Y,
+			children: [$, /* @__PURE__ */ f("input", {
+				ref: T,
+				className: s({ searchable: y }),
+				value: I ? O : "",
+				placeholder: Array.isArray(M) ? "" : M?.label ?? M?.value.toString(),
+				readOnly: !y,
+				disabled: t.disabled,
+				onChange: (e) => {
+					k(e.target.value), !R && e.target.value && J(!0);
+				},
+				onKeyDown: Z,
+				onMouseDown: () => {
+					t.disabled || (J(!R), k(""));
+				},
+				onFocus: () => {
+					t.disabled || (L(!0), J(!0), k(""));
+				},
+				onBlur: () => {
+					t.disabled || P.current || L(!1);
+				}
+			})]
+		}),
+		t.clearable && /* @__PURE__ */ f(a, {
+			className: "clear-indicator",
+			color: "standard",
+			icon: "close",
+			onClick: (e) => {
+				e.preventDefault(), X();
+			},
+			onTouchEnd: (e) => {
+				e.preventDefault(), X();
+			},
+			tabIndex: -1,
+			disabled: t.disabled
+		}),
+		/* @__PURE__ */ f(a, {
+			className: s("dropdown-indicator", { open: R }),
+			color: "standard",
+			icon: R ? "arrow_drop_up" : "arrow_drop_down",
+			tabIndex: -1,
+			onMouseUp: () => {
+				t.disabled || (J(!R), k(""));
+			},
+			disabled: t.disabled,
+			type: "button"
+		})
+	] }), [
+		$,
+		O,
+		I,
+		R,
+		Z,
+		Y,
+		t.clearable,
+		t.disabled,
+		y,
+		J,
+		X,
+		M
+	]);
+	return m("resize", () => se(h())), m("mousedown", (e) => {
+		C.current?.contains(e.target) || (J(!1), L(!1));
+	}), /* @__PURE__ */ p("div", {
+		ref: C,
+		className: s("Select", { error: B || H }, t.className),
+		children: [
+			he,
+			f(g === "filled" ? o : ne, {
+				disabled: t.disabled,
+				label: ce,
+				filled: ue,
+				focus: I || R,
+				error: !!B || H,
+				className: s({ searchable: y }),
+				children: _e
+			}),
+			W && /* @__PURE__ */ f("span", {
+				className: "support",
+				children: W
+			}),
+			/* @__PURE__ */ f("select", {
+				multiple: v,
+				value: Array.isArray(M) ? M.map((e) => e.value.toString()) : M?.value,
+				tabIndex: t.tabIndex,
+				onFocus: t.onFocus,
+				onInvalid: (e) => {
+					e.preventDefault(), V(e.currentTarget.validationMessage), S?.(e), e.currentTarget.focus();
+				},
+				style: { display: oe ? "block" : "none" },
+				onChange: (e) => {
+					let t = [], n;
+					for (let n = 0; n < e.target.selectedOptions.length; n++) t.push(e.target.selectedOptions[n].value);
+					n = E.filter((e) => t.includes(e.value)) ?? [], v ? (b?.(t), x?.(n)) : (b?.(t.at(0) ?? ""), x?.(n.at(0))), B && V(void 0), U(!1), w.current?.classList.remove("invalid");
+				},
+				required: t.required,
+				children: N?.map((e) => /* @__PURE__ */ f("option", {
+					value: e.value,
+					label: e.label
+				}, e.value))
+			}),
+			/* @__PURE__ */ f(ee, {
+				root: ae,
+				flip: l(() => ({ allowedPlacements: [
+					"top-start",
+					"top-end",
+					"bottom-start",
+					"bottom-end"
+				] }), []),
+				autoUpdate: !0,
+				placement: "bottom-start",
+				open: R,
+				onPlacementChange: me,
+				children: /* @__PURE__ */ p(r, {
+					ref: le,
+					className: s("sub-component", fe, { visible: R }),
+					onMouseEnter: () => {
+						P.current = !0;
+					},
+					onMouseLeave: () => {
+						P.current = !1;
+					},
+					children: [N?.map((e, t) => /* @__PURE__ */ f(i, {
+						icon: e.icon,
+						text: e.label ?? e.value.toString(),
+						type: "button",
+						disabled: e.disabled,
+						tabIndex: -1,
+						selectable: !0,
+						selected: v && Array.isArray(M) && M.some((t) => t.value === e.value) || !Array.isArray(M) && M?.value === e.value,
+						className: s(e.className, { hovered: K === t }),
+						onClick: () => {
+							X(e.value), T.current?.focus(), B && V(void 0), U(!1), w.current?.classList.remove("invalid");
+						},
+						onMouseEnter: () => {
+							z.current && q(t);
+						}
+					}, e.value)), !E.length && t.noOptionMessage ? /* @__PURE__ */ f(i, {
+						text: t.noOptionMessage,
+						style: {
+							justifyContent: "center",
+							cursor: "default"
+						}
+					}) : null]
+				})
+			}),
+			/* @__PURE__ */ f(n, {
+				childName: "Option",
+				onChildrenChange: D,
+				compareChild: ge,
+				children: t.children
+			})
+		]
+	});
+}
+//#endregion
+export { g as default };

package/dist/components/Select/index.cjs

@@ -0,0 +1 @@
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("./Option.cjs"),t=require("./Select.cjs");exports.Option=e.default,exports.default=t.default;

package/dist/components/Select/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Option } from './Option';
+export type { OptionProps } from './Option';
+export { default } from './Select';
+export type { MultiSelectProps, SelectProps, SingleSelectProps } from './Select';

package/dist/components/Select/index.js

@@ -0,0 +1,3 @@
+import e from "./Option.js";
+import t from "./Select.js";
+export { e as Option, t as default };