@kubit-ui-web/react-components 2.0.0-beta.48 → 2.0.0-beta.49

package/dist/esm/components/label/labelStandAlone.js

@@ -1,2 +1,28 @@
-import{jsxs as t,jsx as e}from"react/jsx-runtime";import{forwardRef as r,useId as s}from"react";import{Text as i}from"../text/text.js";const o=r(({asteriskColor:r,asteriskCssClasses:o,asteriskWeight:a,children:l,color:d,cursor:c,customAttributes:n,id:m,inputId:u,required:h,requiredSymbol:p,textCssClasses:b,weight:x,...C},g)=>{const f=`label-${s().replace(/:/g,"")}`,k=m??f,q=C["data-testid"]||"label";/* @__PURE__ */
-return t(i,{ref:g,additionalClasses:{text:b},color:d,component:"label",cursor:c,customAttributes:n,"data-testid":q,htmlFor:u,id:k,weight:x,children:[l,h&&/* @__PURE__ */e(i,{additionalClasses:{text:o},"aria-hidden":!0,color:r,component:"span","data-testid":`${q}Required`,weight:a,children:p})]})});export{o as Label,o as LabelStandAlone};
+import { Text } from "../text/text2.js";
+import { forwardRef, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+const LabelStandAlone = forwardRef(({ asteriskColor: e, asteriskCssClasses: t, asteriskWeight: n, children: r, color: i, cursor: a, customAttributes: o, id: s, inputId: c, required: l, requiredSymbol: u, textCssClasses: d, weight: f, ...p }, m) => {
+	let h = `label-${useId().replace(/:/g, "")}`, g = s ?? h, _ = p["data-testid"] || "label";
+	return /* @__PURE__ */ jsxs(Text, {
+		ref: m,
+		additionalClasses: { text: d },
+		color: i,
+		component: "label",
+		cursor: a,
+		customAttributes: o,
+		"data-testid": _,
+		htmlFor: c,
+		id: g,
+		weight: f,
+		children: [r, l && /* @__PURE__ */ jsx(Text, {
+			additionalClasses: { text: t },
+			"aria-hidden": !0,
+			color: e,
+			component: "span",
+			"data-testid": `${_}Required`,
+			weight: n,
+			children: u
+		})]
+	});
+});
+export { LabelStandAlone };

package/dist/esm/components/link/helpers/disabled.js

@@ -1 +1,2 @@
-const o=(o,e)=>({role:o&&!e?"link":e});export{o as disabledLink};
+const disabledLink = (e, t) => ({ role: e && !t ? "link" : t });
+export { disabledLink };

package/dist/esm/components/link/link.js

@@ -1,2 +1,34 @@
-import{jsx as o}from"react/jsx-runtime";import{forwardRef as e}from"react";import{useClassName as i}from"../../lib/hooks/useClassName/useClassName.js";import{useGenericComponents as a}from"../../lib/provider/genericComponentsProvider/genericComponentsProvider.js";import{disabledLink as n}from"./helpers/disabled.js";import{LinkStandAlone as r}from"./linkStandAlone.js";const s=e(({action:e="navigation",additionalClasses:s,additionalTextClasses:t,alignCenter:l=!1,color:d,decoration:m="auto",disabled:c=!1,icon:p,role:C,textVariant:v,variant:f,weight:g,...b},u)=>{const{LINK:N}=a(),{role:j}=n(c,C),x=c||void 0,h=i({additionalClassNames:s,component:"LINK",variant:`${e}_${f}`}),T=i({additionalClassNames:t,component:"TEXT",variant:v});/* @__PURE__ */
-return o(r,{...b,ref:u,action:e,alignCenter:l,"aria-disabled":x,color:d,component:N,cssClasses:h,cssTextClasses:T,decoration:"inline"===e?"underline":m,disabled:c,icon:p,role:j,weight:g})});export{s as Link};
+import { useGenericComponents } from "../../lib/provider/genericComponentsProvider/genericComponentsProvider.js";
+import { useClassName } from "../../lib/hooks/useClassName/useClassName.js";
+import { disabledLink } from "./helpers/disabled.js";
+import { LinkStandAlone } from "./linkStandAlone.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+const Link = forwardRef(({ action: e = "navigation", additionalClasses: t, additionalTextClasses: n, alignCenter: r = !1, color: i, decoration: a = "auto", disabled: o = !1, icon: s, role: c, textVariant: l, variant: u, weight: d, ...f }, p) => {
+	let { LINK: m } = useGenericComponents(), { role: h } = disabledLink(o, c), g = o || void 0, _ = useClassName({
+		additionalClassNames: t,
+		component: "LINK",
+		variant: `${e}_${u}`
+	}), v = useClassName({
+		additionalClassNames: n,
+		component: "TEXT",
+		variant: l
+	});
+	return /* @__PURE__ */ jsx(LinkStandAlone, {
+		...f,
+		ref: p,
+		action: e,
+		alignCenter: r,
+		"aria-disabled": g,
+		color: i,
+		component: m,
+		cssClasses: _,
+		cssTextClasses: v,
+		decoration: e === "inline" ? "underline" : a,
+		disabled: o,
+		icon: s,
+		role: h,
+		weight: d
+	});
+});
+export { Link };

package/dist/esm/components/link/linkAsButton/linkAsButton.js

@@ -1,2 +1,32 @@
-import{jsx as s}from"react/jsx-runtime";import{forwardRef as e}from"react";import{useClassName as a}from"../../../lib/hooks/useClassName/useClassName.js";import{useManageState as t}from"../../../lib/hooks/useManageState/useManageState.js";import{useGenericComponents as o}from"../../../lib/provider/genericComponentsProvider/genericComponentsProvider.js";import{STATES as i}from"../../../lib/types/states/states.js";import{LinkAsButtonStandAlone as n}from"./linkAsButtonStandAlone.js";const r=e(({additionalSizeClasses:e,additionalVariantClasses:r,disabled:m,size:l,variant:d,...p},c)=>{const C=a({component:"LINK_AS_BUTTON"}),f=a({additionalClassNames:r,component:"BUTTON",variant:d}),u=a({additionalClassNames:e,component:"BUTTON",variant:l}),{LINK:N}=o(),{setRef:b}=t({disabled:m,ref:c,states:Object.values(i)});/* @__PURE__ */
-return s(n,{...p,ref:b,component:N,cssLinkAsButtonClasses:C,cssSizeClasses:u,cssVariantClasses:f,disabled:m})});export{r as LinkAsButton};
+import { useGenericComponents } from "../../../lib/provider/genericComponentsProvider/genericComponentsProvider.js";
+import { useClassName } from "../../../lib/hooks/useClassName/useClassName.js";
+import { STATES } from "../../../lib/types/states/states.js";
+import { useManageState } from "../../../lib/hooks/useManageState/useManageState.js";
+import { LinkAsButtonStandAlone } from "./linkAsButtonStandAlone.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+const LinkAsButton = forwardRef(({ additionalSizeClasses: e, additionalVariantClasses: t, disabled: n, size: r, variant: i, ...a }, o) => {
+	let s = useClassName({ component: "LINK_AS_BUTTON" }), c = useClassName({
+		additionalClassNames: t,
+		component: "BUTTON",
+		variant: i
+	}), l = useClassName({
+		additionalClassNames: e,
+		component: "BUTTON",
+		variant: r
+	}), { LINK: u } = useGenericComponents(), { setRef: d } = useManageState({
+		disabled: n,
+		ref: o,
+		states: Object.values(STATES)
+	});
+	return /* @__PURE__ */ jsx(LinkAsButtonStandAlone, {
+		...a,
+		ref: d,
+		component: u,
+		cssLinkAsButtonClasses: s,
+		cssSizeClasses: l,
+		cssVariantClasses: c,
+		disabled: n
+	});
+});
+export { LinkAsButton };

package/dist/esm/components/link/linkAsButton/linkAsButtonStandAlone.js

@@ -1,2 +1,46 @@
-import{jsx as t}from"react/jsx-runtime";import{forwardRef as s}from"react";import{ButtonStandAlone as i}from"../../button/buttonStandAlone.js";import{CustomComponent as e}from"../../../lib/components/customComponent/customComponent.js";import{POSITIONS as o}from"../../../lib/types/positions/positions.js";import{STATES as a}from"../../../lib/types/states/states.js";import{classNames as l}from"../../../lib/utils/classNames/classNames.js";import{pickCustomAttributes as r}from"../../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";const n=s(({"aria-label":s,"aria-labelledby":n,ariaLabelText:m,children:c,component:b,cssLinkAsButtonClasses:d,cssSizeClasses:u,cssVariantClasses:p,fullWidth:f,iconPosition:h,minWidth:k,onClick:C,rel:j,role:y,state:A,target:w,url:x,...D},L)=>{const N=D["data-testid"]||"link-as-button",S=r(D);/* @__PURE__ */
-return t("div",{className:d?.link_as_button,"data-kbt-full-width":f,"data-testid":N,...S,children:/* @__PURE__ */t(e,{ref:L,"aria-label":s,"aria-labelledby":n,component:b,"data-testid":"link",decoration:"none",isDisabled:A===a.DISABLED,rel:j,role:y,target:w,url:x,onClick:C,children:/* @__PURE__ */t("span",{"aria-label":m,...D,className:l(u?.button,p?.button),style:{flexDirection:h===o.LEFT?"row":"row-reverse",minWidth:k,width:f?"100%":"auto"},children:/* @__PURE__ */t(i,{...D,children:c})})})})});export{n as LinkAsButtonStandAlone};
+import { pickCustomAttributes } from "../../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";
+import { CustomComponent } from "../../../lib/components/customComponent/customComponent.js";
+import { classNames } from "../../../lib/utils/classNames/classNames.js";
+import { STATES } from "../../../lib/types/states/states.js";
+import { POSITIONS } from "../../../lib/types/positions/positions.js";
+import { ButtonStandAlone } from "../../button/buttonStandAlone.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+const LinkAsButtonStandAlone = forwardRef(({ "aria-label": e, "aria-labelledby": t, ariaLabelText: n, children: r, component: i, cssLinkAsButtonClasses: a, cssSizeClasses: o, cssVariantClasses: s, fullWidth: c, iconPosition: l, minWidth: u, onClick: d, rel: f, role: p, state: m, target: h, url: g, ..._ }, v) => {
+	let y = _["data-testid"] || "link-as-button", b = pickCustomAttributes(_);
+	return /* @__PURE__ */ jsx("div", {
+		className: a?.link_as_button,
+		"data-kbt-full-width": c,
+		"data-testid": y,
+		...b,
+		children: /* @__PURE__ */ jsx(CustomComponent, {
+			ref: v,
+			"aria-label": e,
+			"aria-labelledby": t,
+			component: i,
+			"data-testid": "link",
+			decoration: "none",
+			isDisabled: m === STATES.DISABLED,
+			rel: f,
+			role: p,
+			target: h,
+			url: g,
+			onClick: d,
+			children: /* @__PURE__ */ jsx("span", {
+				"aria-label": n,
+				..._,
+				className: classNames(o?.button, s?.button),
+				style: {
+					flexDirection: l === POSITIONS.LEFT ? "row" : "row-reverse",
+					minWidth: u,
+					width: c ? "100%" : "auto"
+				},
+				children: /* @__PURE__ */ jsx(ButtonStandAlone, {
+					..._,
+					children: r
+				})
+			})
+		})
+	});
+});
+export { LinkAsButtonStandAlone };

package/dist/esm/components/link/linkStandAlone.js

@@ -1,3 +1,47 @@
-import{jsx as t,jsxs as o}from"react/jsx-runtime";import{forwardRef as e}from"react";import{Text as r}from"../text/text.js";import{ElementOrIcon as s}from"../../lib/components/elementOrIcon/elementOrIcon.js";import{classNames as i}from"../../lib/utils/classNames/classNames.js";import{pickCustomAttributes as n}from"../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";import{CustomComponent as l}from"../../lib/components/customComponent/customComponent.js";const c=e(({children:e,color:c,component:a=r,cssClasses:m,cssTextClasses:d,decoration:p,disabled:f,draggable:u,icon:b,iconPosition:g,id:x,onClick:C,rel:h,role:j,target:k,url:N,weight:v,...w},y)=>{const D=f?void 0:C,A=f?void 0:N,I=i(m?.link,d?.text),O={color:c,flexDirection:"left"===g?"row":"row-reverse",fontWeight:v,textDecoration:p},W={color:c,fontWeight:v,textDecoration:p},P=n(w);/* @__PURE__ */
-return t(l,{ref:y,className:I,component:a,"data-testid":"link",disabled:f,draggable:u,id:x,rel:h,role:j,style:W,target:k,url:A,onClick:D,...P,children:b?/* @__PURE__ */o("span",{className:m?.labelandiconcontainer,style:O,children:[
-/* @__PURE__ */t(s,{className:m?.icon,...b},"icon"),e]}):/* @__PURE__ */t("span",{style:O,children:e})})});export{c as LinkStandAlone};
+import { pickCustomAttributes } from "../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";
+import { CustomComponent } from "../../lib/components/customComponent/customComponent.js";
+import { classNames } from "../../lib/utils/classNames/classNames.js";
+import { Text } from "../text/text2.js";
+import { ElementOrIcon } from "../../lib/components/elementOrIcon/elementOrIcon.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+const LinkStandAlone = forwardRef(({ children: e, color: t, component: n = Text, cssClasses: r, cssTextClasses: i, decoration: a, disabled: o, draggable: s, icon: c, iconPosition: l, id: u, onClick: d, rel: f, role: p, target: m, url: h, weight: g, ..._ }, v) => {
+	let y = o ? void 0 : d, b = o ? void 0 : h, x = classNames(r?.link, i?.text), S = {
+		color: t,
+		flexDirection: l === "left" ? "row" : "row-reverse",
+		fontWeight: g,
+		textDecoration: a
+	}, C = {
+		color: t,
+		fontWeight: g,
+		textDecoration: a
+	}, w = pickCustomAttributes(_);
+	return /* @__PURE__ */ jsx(CustomComponent, {
+		ref: v,
+		className: x,
+		component: n,
+		"data-testid": "link",
+		disabled: o,
+		draggable: s,
+		id: u,
+		rel: f,
+		role: p,
+		style: C,
+		target: m,
+		url: b,
+		onClick: y,
+		...w,
+		children: c ? /* @__PURE__ */ jsxs("span", {
+			className: r?.labelandiconcontainer,
+			style: S,
+			children: [/* @__PURE__ */ jsx(ElementOrIcon, {
+				className: r?.icon,
+				...c
+			}, "icon"), e]
+		}) : /* @__PURE__ */ jsx("span", {
+			style: S,
+			children: e
+		})
+	});
+});
+export { LinkStandAlone };

package/dist/esm/components/listOptions/listOptions.js

@@ -1,2 +1,17 @@
-import{jsx as s}from"react/jsx-runtime";import{forwardRef as a}from"react";import{useClassName as o}from"../../lib/hooks/useClassName/useClassName.js";import{ListOptionsStandAlone as t}from"./listOptionsStandAlone.js";const r=a(({additionalClasses:a,variant:r,...e},i)=>{const m=o({additionalClassNames:a,component:"LIST_OPTIONS",variant:r});/* @__PURE__ */
-return s(t,{...e,ref:i,cssClasses:m})});export{r as ListOptions};
+import { useClassName } from "../../lib/hooks/useClassName/useClassName.js";
+import { ListOptionsStandAlone } from "./listOptionsStandAlone.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+const ListOptions = forwardRef(({ additionalClasses: e, variant: t, ...n }, r) => {
+	let i = useClassName({
+		additionalClassNames: e,
+		component: "LIST_OPTIONS",
+		variant: t
+	});
+	return /* @__PURE__ */ jsx(ListOptionsStandAlone, {
+		...n,
+		ref: r,
+		cssClasses: i
+	});
+});
+export { ListOptions };

package/dist/esm/components/listOptions/listOptionsStandAlone.js

@@ -1,2 +1,71 @@
-import{jsxs as t,jsx as o}from"react/jsx-runtime";import{forwardRef as e,useMemo as i,useId as n,useImperativeHandle as s}from"react";import{Text as l}from"../text/text.js";import{useRoveFocus as r}from"../../lib/hooks/useRoveFocus/useRoveFocus.js";import{pickCustomAttributes as c}from"../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";import{processTextProp as a}from"../../lib/utils/process/processCommonProp.js";import{CustomComponent as p}from"../../lib/components/customComponent/customComponent.js";import{Option as m}from"../option/option.js";import{keyUpMove as d,keyDownMove as u,isSelected as h,getOptionVariant as v}from"./utils/listOptions.utils.js";const g=e(({caseSensitive:e,charsHighlighted:g,checkedIcon:b,content:k,cssClasses:C,highlightedOptionVariant:f,id:$,index:j=0,listComponent:x,multiSelect:y,onOptionClick:S,options:F,optionsContainerArias:M,roveFocus:O,selectedValue:A,title:I,type:N="selection",...R},V)=>{const H=R["data-testid"]??"list-options",L=c(R),w=i(()=>({currentFocusSelected:-1,keyDownMove:u(F),keyLeftMove:0,keyRightMove:0,keyTabMove:null,keyUpMove:d,size:F.length}),[F]),[z,D,P]=r(O??w),T=n();s(V,()=>P.current,[P]);const U=$??T,_="selection"===N,q="navigation"===N,B=F&&F.length>0;/* @__PURE__ */
-return t("div",{className:C?.list_options,"data-testid":H,...L,children:[!!I&&F.length>0&&/* @__PURE__ */o("div",{className:C?.titlecontainer,children:/* @__PURE__ */o(l,{additionalClasses:{text:C?.title},...a(I)})}),k,B&&/* @__PURE__ */o(p,{ref:P,"aria-label":M?.["aria-label"],"aria-labelledby":M?.["aria-labelledby"],className:C?.optionscontainer,component:x??"ul",id:U,role:_?"listbox":void 0,children:F.map((t,i)=>{const n=h(t,A,y,e),s=/* @__PURE__ */o(m,{"aria-current":q?n:void 0,"aria-selected":_?n:void 0,checkedIcon:b,component:_||q?"div":"li","data-testid":`${H}-section-${j}-option-${i}`,focus:z===i,labelCharsHighlighted:g,multiSelect:y,role:_?"option":void 0,selected:n,tabIndex:q?0:-1,variant:v(t.highlighted,f,R?.optionVariant),...t,onClick:o=>{D(i),S?.(t.value,o),t.onClick?.(o)},onFocus:o=>{i!==z&&D(i),t.onFocus?.(o)}},`${U}Option-${j.toString()}-${i.toString()}`);return"selection"===N?/* @__PURE__ */o("li",{children:s},`${U}LiOption-${j.toString()}-${i.toString()}`):s})})]})});export{g as ListOptionsStandAlone};
+import { pickCustomAttributes } from "../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";
+import { CustomComponent } from "../../lib/components/customComponent/customComponent.js";
+import { Text } from "../text/text2.js";
+import { processTextProp } from "../../lib/utils/process/processCommonProp.js";
+import { useRoveFocus } from "../../lib/hooks/useRoveFocus/useRoveFocus.js";
+import { Option } from "../option/option.js";
+import { getOptionVariant, isSelected, keyDownMove, keyUpMove } from "./utils/listOptions.utils.js";
+import { forwardRef, useId, useImperativeHandle, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+const ListOptionsStandAlone = forwardRef(({ caseSensitive: o, charsHighlighted: s, checkedIcon: c, content: l, cssClasses: u, highlightedOptionVariant: d, id: f, index: p = 0, listComponent: m, multiSelect: h, onOptionClick: g, options: _, optionsContainerArias: v, roveFocus: y, selectedValue: b, title: x, type: S = "selection", ...C }, w) => {
+	let T = C["data-testid"] ?? "list-options", E = pickCustomAttributes(C), D = useMemo(() => ({
+		currentFocusSelected: -1,
+		keyDownMove: keyDownMove(_),
+		keyLeftMove: 0,
+		keyRightMove: 0,
+		keyTabMove: null,
+		keyUpMove,
+		size: _.length
+	}), [_]), [O, k, A] = useRoveFocus(y ?? D), j = useId();
+	useImperativeHandle(w, () => A.current, [A]);
+	let M = f ?? j, N = S === "selection", P = S === "navigation", F = _ && _.length > 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: u?.list_options,
+		"data-testid": T,
+		...E,
+		children: [
+			!!x && _.length > 0 && /* @__PURE__ */ jsx("div", {
+				className: u?.titlecontainer,
+				children: /* @__PURE__ */ jsx(Text, {
+					additionalClasses: { text: u?.title },
+					...processTextProp(x)
+				})
+			}),
+			l,
+			F && /* @__PURE__ */ jsx(CustomComponent, {
+				ref: A,
+				"aria-label": v?.["aria-label"],
+				"aria-labelledby": v?.["aria-labelledby"],
+				className: u?.optionscontainer,
+				component: m ?? "ul",
+				id: M,
+				role: N ? "listbox" : void 0,
+				children: _.map((e, t) => {
+					let n = isSelected(e, b, h, o), r = `${T}-section-${p}-option-${t}`, i = N || P ? "div" : "li", a = /* @__PURE__ */ jsx(Option, {
+						"aria-current": P ? n : void 0,
+						"aria-selected": N ? n : void 0,
+						checkedIcon: c,
+						component: i,
+						"data-testid": r,
+						focus: O === t,
+						labelCharsHighlighted: s,
+						multiSelect: h,
+						role: N ? "option" : void 0,
+						selected: n,
+						tabIndex: P ? 0 : -1,
+						variant: getOptionVariant(e.highlighted, d, C?.optionVariant),
+						...e,
+						onClick: (n) => {
+							k(t), g?.(e.value, n), e.onClick?.(n);
+						},
+						onFocus: (n) => {
+							t !== O && k(t), e.onFocus?.(n);
+						}
+					}, `${M}Option-${p.toString()}-${t.toString()}`);
+					return S === "selection" ? /* @__PURE__ */ jsx("li", { children: a }, `${M}LiOption-${p.toString()}-${t.toString()}`) : a;
+				})
+			})
+		]
+	});
+});
+export { ListOptionsStandAlone };

package/dist/esm/components/listOptions/utils/listOptions.utils.js

@@ -1 +1,8 @@
-const e=(e,a,o,l)=>null!=a&&void 0!==e.value&&(o?Boolean(Array.isArray(a)&&a.includes(e.value)):l?Boolean(a===e.value):Boolean(a.toLocaleString().toLocaleLowerCase()===e.value.toLocaleString().toLocaleLowerCase())),a=(e,a,o)=>e&&a?a:o||"",o=e=>{let a=Math.max(e,0);return e>0&&(a-=1),a},l=e=>a=>{let o=Math.max(a,0);return a+1<=e.length-1&&(o+=1),o};export{a as getOptionVariant,e as isSelected,l as keyDownMove,o as keyUpMove};
+const isSelected = (e, t, n, r) => t != null && e.value !== void 0 ? n ? !!(Array.isArray(t) && t.includes(e.value)) : r ? t === e.value : t.toLocaleString().toLocaleLowerCase() === e.value.toLocaleString().toLocaleLowerCase() : !1, getOptionVariant = (e, t, n) => e && t ? t : n || "", keyUpMove = (e) => {
+	let t = Math.max(e, 0);
+	return e > 0 && --t, t;
+}, keyDownMove = (e) => (t) => {
+	let n = Math.max(t, 0);
+	return t + 1 <= e.length - 1 && (n += 1), n;
+};
+export { getOptionVariant, isSelected, keyDownMove, keyUpMove };

package/dist/esm/components/modal/fragments/modalHeader.js

@@ -1,3 +1,56 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{Text as i}from"../../text/text.js";import{ElementOrIcon as n}from"../../../lib/components/elementOrIcon/elementOrIcon.js";import{useActiveBreakpoints as o}from"../../../lib/hooks/useMediaDevice/useActiveBreakpoints.js";import{processIconProp as a,processTextProp as s}from"../../../lib/utils/process/processCommonProp.js";import{Button as c}from"../../button/button.js";const r=({blocked:r,closeButton:l,closeIcon:d,cssClasses:m,dragIcon:b,title:h,titleIdFinal:p})=>{const{isMobileOrTablet:v}=o();/* @__PURE__ */
-return e("div",{className:m?.headercontainer,"data-modal-header":!0,children:[v&&!r&&!!b&&/* @__PURE__ */t("div",{className:m?.dragiconcontainer,"data-modal-draggable-icon":!0,children:/* @__PURE__ */t(n,{className:m?.dragicon,...a(b)})}),
-/* @__PURE__ */e("div",{className:m?.headercontentcontainer,children:[!r&&!!d&&/* @__PURE__ */t("div",{className:m?.closebuttoncontainer,children:/* @__PURE__ */t(n,{className:m?.closebuttonicon,...a(d)})}),!r&&!!l?.content&&!!l?.variant&&/* @__PURE__ */t(c,{...l,variant:l?.variant,children:l?.content}),(void 0===h?.visible||h.visible)&&/* @__PURE__ */t("div",{className:m?.titlecontainer,children:/* @__PURE__ */t(i,{additionalClasses:{text:m?.title},component:"h1",id:p,...s(h)})}),!1===h?.visible&&/* @__PURE__ */t("span",{className:m?.titlehiddencontainer,id:p,children:s(h).children}),!r&&!!d&&/* @__PURE__ */t("div",{className:m?.closebuttoncontainer,children:/* @__PURE__ */t("span",{className:m?.closebuttonicon})})]})]})};export{r as ModalHeader};
+import { Text } from "../../text/text2.js";
+import { processIconProp, processTextProp } from "../../../lib/utils/process/processCommonProp.js";
+import { ElementOrIcon } from "../../../lib/components/elementOrIcon/elementOrIcon.js";
+import { Button } from "../../button/button.js";
+import { useActiveBreakpoints } from "../../../lib/hooks/useMediaDevice/useActiveBreakpoints.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+const ModalHeader = ({ blocked: e, closeButton: t, closeIcon: n, cssClasses: r, dragIcon: i, title: a, titleIdFinal: o }) => {
+	let { isMobileOrTablet: s } = useActiveBreakpoints();
+	return /* @__PURE__ */ jsxs("div", {
+		className: r?.headercontainer,
+		"data-modal-header": !0,
+		children: [s && !e && !!i && /* @__PURE__ */ jsx("div", {
+			className: r?.dragiconcontainer,
+			"data-modal-draggable-icon": !0,
+			children: /* @__PURE__ */ jsx(ElementOrIcon, {
+				className: r?.dragicon,
+				...processIconProp(i)
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: r?.headercontentcontainer,
+			children: [
+				!e && !!n && /* @__PURE__ */ jsx("div", {
+					className: r?.closebuttoncontainer,
+					children: /* @__PURE__ */ jsx(ElementOrIcon, {
+						className: r?.closebuttonicon,
+						...processIconProp(n)
+					})
+				}),
+				!e && !!t?.content && !!t?.variant && /* @__PURE__ */ jsx(Button, {
+					...t,
+					variant: t?.variant,
+					children: t?.content
+				}),
+				(a?.visible === void 0 || a.visible) && /* @__PURE__ */ jsx("div", {
+					className: r?.titlecontainer,
+					children: /* @__PURE__ */ jsx(Text, {
+						additionalClasses: { text: r?.title },
+						component: "h1",
+						id: o,
+						...processTextProp(a)
+					})
+				}),
+				a?.visible === !1 && /* @__PURE__ */ jsx("span", {
+					className: r?.titlehiddencontainer,
+					id: o,
+					children: processTextProp(a).children
+				}),
+				!e && !!n && /* @__PURE__ */ jsx("div", {
+					className: r?.closebuttoncontainer,
+					children: /* @__PURE__ */ jsx("span", { className: r?.closebuttonicon })
+				})
+			]
+		})]
+	});
+};
+export { ModalHeader };

package/dist/esm/components/modal/modalControlled.js

@@ -1 +1,46 @@
-import{jsx as e}from"react/jsx-runtime";import{forwardRef as o,useRef as r,useCallback as t}from"react";import{useClassName as s}from"../../lib/hooks/useClassName/useClassName.js";import{useContentVisibility as l}from"../../lib/hooks/useContentVisibility/useContentVisibility.js";import{useMediaDevice as n}from"../../lib/hooks/useMediaDevice/useMediaDevice.js";import{useScrollDetection as a}from"../../lib/hooks/useScrollDetection/useScrollDetection.js";import{useScrollEffect as i}from"../../lib/hooks/useScrollEffect/useScrollEffect.js";import{useSwipeDown as c}from"../../lib/hooks/useSwipeDown/useSwipeDown.js";import{syncInnerAndForwardedRef as m}from"../../lib/utils/refs/syncRefs.js";import{Portal as d}from"../portal/portal.js";import{ModalStandAlone as p}from"./modalStandAlone.js";const u=o(({additionalClasses:o,disableFocusableContent:u=!1,onClose:f,popover:b,portalId:h,variant:S,...C},j)=>{const v=s({additionalClassNames:o,component:"MODAL",variant:S}),y=n(),D=r(null),{scrollableRef:w,shadowRef:R}=i({shadowStyles:"none"}),{handleContentVisibility:k}=l({}),{setDragIconRef:I,setPopoverRef:g}=c({handleClose:f}),{handleScrollDetection:q,hasScroll:M}=a({autoFocus:!u}),N=t(e=>{D.current=e,m({forwardedRef:j,innerRef:D});const o=D.current?.querySelector("[data-modal-header]"),r=D.current?.querySelector("[data-modal-content]"),t=D.current?.querySelector("[data-modal-draggable-icon]");R(o),k({container:D.current,content:r}),w(r),q(r),t&&I(t)},[]),V=/* @__PURE__ */e(p,{...C,ref:N,contentHasScroll:M,cssClasses:v,device:y,popover:{...b,popoverContainerRef:g},onPopoverCloseInternally:()=>{f?.()}});return h?/* @__PURE__ */e(d,{wrapperId:h,children:V}):V});export{u as ModalControlled};
+import { useClassName } from "../../lib/hooks/useClassName/useClassName.js";
+import { useContentVisibility } from "../../lib/hooks/useContentVisibility/useContentVisibility.js";
+import { useMediaDevice } from "../../lib/hooks/useMediaDevice/useMediaDevice.js";
+import { useScrollDetection } from "../../lib/hooks/useScrollDetection/useScrollDetection.js";
+import { useScrollEffect } from "../../lib/hooks/useScrollEffect/useScrollEffect.js";
+import { useSwipeDown } from "../../lib/hooks/useSwipeDown/useSwipeDown.js";
+import { syncInnerAndForwardedRef } from "../../lib/utils/refs/syncRefs.js";
+import { Portal } from "../portal/portal.js";
+import { ModalStandAlone } from "./modalStandAlone.js";
+import { forwardRef, useCallback, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+const ModalControlled = forwardRef(({ additionalClasses: i, disableFocusableContent: a = !1, onClose: o, popover: s, portalId: c, variant: l, ...u }, d) => {
+	let f = useClassName({
+		additionalClassNames: i,
+		component: "MODAL",
+		variant: l
+	}), p = useMediaDevice(), m = useRef(null), { scrollableRef: h, shadowRef: g } = useScrollEffect({ shadowStyles: "none" }), { handleContentVisibility: _ } = useContentVisibility({}), { setDragIconRef: v, setPopoverRef: y } = useSwipeDown({ handleClose: o }), { handleScrollDetection: b, hasScroll: x } = useScrollDetection({ autoFocus: !a }), S = useCallback((e) => {
+		m.current = e, syncInnerAndForwardedRef({
+			forwardedRef: d,
+			innerRef: m
+		});
+		let t = m.current?.querySelector("[data-modal-header]"), n = m.current?.querySelector("[data-modal-content]"), r = m.current?.querySelector("[data-modal-draggable-icon]");
+		g(t), _({
+			container: m.current,
+			content: n
+		}), h(n), b(n), r && v(r);
+	}, []), C = () => {
+		o?.();
+	}, w = /* @__PURE__ */ jsx(ModalStandAlone, {
+		...u,
+		ref: S,
+		contentHasScroll: x,
+		cssClasses: f,
+		device: p,
+		popover: {
+			...s,
+			popoverContainerRef: y
+		},
+		onPopoverCloseInternally: C
+	});
+	return c ? /* @__PURE__ */ jsx(Portal, {
+		wrapperId: c,
+		children: w
+	}) : w;
+});
+export { ModalControlled };

package/dist/esm/components/modal/modalStandAlone.js

@@ -1,4 +1,65 @@
-import{jsx as e,jsxs as o}from"react/jsx-runtime";import{forwardRef as t,useId as l}from"react";import{Overlay as i}from"../../lib/components/overlay/overlay.js";import{processTextProp as a}from"../../lib/utils/process/processCommonProp.js";import{Popover as r}from"../popover/popover.js";import{ModalHeader as s}from"./fragments/modalHeader.js";import{onlyDesktopSize as n}from"./utils/onlyDesktopSize.js";const d=t(({blocked:t,closeButton:d,closeIcon:c,content:m,contentContainer:p,contentHasScroll:v,contentScrollArias:b,cssClasses:h,customHeightAllDevices:g=!1,customWidthAllDevices:y=!1,device:f,dragIcon:C,footer:u,id:H,maxHeight:x,maxWidth:I,minContentHeight:j,minHeight:W,minWidth:k,onKeyDown:D,onPopoverCloseInternally:A,open:N,popover:S,title:$,...B},F)=>{const P=`modal-${l().replace(/:/g,"")}`,w=H??P,z=`modal-title-${l().replace(/:/g,"")}`,E=a($).id??z,K=B["data-testid"]||"modal";/* @__PURE__ */
-return e(r,{"aria-labelledby":E,"aria-modal":N,component:"div",disableClickOverlayClose:t,disableEscapeClose:t,disableTrapFocus:!1,id:w,open:N,overlay:/* @__PURE__ */e(i,{}),role:"dialog",strategy:"fixed",onClose:A,...S,children:/* @__PURE__ */o("div",{ref:F,className:h?.modal,"data-testid":K,style:{maxHeight:x,maxWidth:I,minHeight:g?W:n(f,W),minWidth:y?k:n(f,k)},children:[
-/* @__PURE__ */e(s,{blocked:t,closeButton:d,closeIcon:c,cssClasses:h,device:f,dragIcon:C,title:$,titleIdFinal:E}),
-/* @__PURE__ */e("div",{"aria-label":v?b?.["aria-label"]:void 0,"aria-labelledby":v?b?.["aria-labelledby"]:void 0,className:h?.content,"data-modal-content":!0,"data-testid":`${K}-content`,role:v?"region":void 0,style:{minHeight:j},...v?{tabIndex:0}:{},...p,children:m}),!!u&&/* @__PURE__ */e("div",{className:h?.footer,children:u})]})})});export{d as ModalStandAlone};
+import { processTextProp } from "../../lib/utils/process/processCommonProp.js";
+import { Overlay } from "../../lib/components/overlay/overlay.js";
+import { Popover } from "../popover/popover.js";
+import { ModalHeader } from "./fragments/modalHeader.js";
+import { onlyDesktopSize } from "./utils/onlyDesktopSize.js";
+import { forwardRef, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+const ModalStandAlone = forwardRef(({ blocked: e, closeButton: t, closeIcon: n, content: r, contentContainer: i, contentHasScroll: a, contentScrollArias: o, cssClasses: s, customHeightAllDevices: c = !1, customWidthAllDevices: l = !1, device: u, dragIcon: d, footer: f, id: p, maxHeight: m, maxWidth: h, minContentHeight: g, minHeight: _, minWidth: v, onKeyDown: y, onPopoverCloseInternally: b, open: x, popover: S, title: C, ...w }, T) => {
+	let E = `modal-${useId().replace(/:/g, "")}`, D = p ?? E, O = `modal-title-${useId().replace(/:/g, "")}`, k = processTextProp(C).id ?? O, A = w["data-testid"] || "modal";
+	return /* @__PURE__ */ jsx(Popover, {
+		"aria-labelledby": k,
+		"aria-modal": x,
+		component: "div",
+		disableClickOverlayClose: e,
+		disableEscapeClose: e,
+		disableTrapFocus: !1,
+		id: D,
+		open: x,
+		overlay: /* @__PURE__ */ jsx(Overlay, {}),
+		role: "dialog",
+		strategy: "fixed",
+		onClose: b,
+		...S,
+		children: /* @__PURE__ */ jsxs("div", {
+			ref: T,
+			className: s?.modal,
+			"data-testid": A,
+			style: {
+				maxHeight: m,
+				maxWidth: h,
+				minHeight: c ? _ : onlyDesktopSize(u, _),
+				minWidth: l ? v : onlyDesktopSize(u, v)
+			},
+			children: [
+				/* @__PURE__ */ jsx(ModalHeader, {
+					blocked: e,
+					closeButton: t,
+					closeIcon: n,
+					cssClasses: s,
+					device: u,
+					dragIcon: d,
+					title: C,
+					titleIdFinal: k
+				}),
+				/* @__PURE__ */ jsx("div", {
+					"aria-label": a ? o?.["aria-label"] : void 0,
+					"aria-labelledby": a ? o?.["aria-labelledby"] : void 0,
+					className: s?.content,
+					"data-modal-content": !0,
+					"data-testid": `${A}-content`,
+					role: a ? "region" : void 0,
+					style: { minHeight: g },
+					...a ? { tabIndex: 0 } : {},
+					...i,
+					children: r
+				}),
+				!!f && /* @__PURE__ */ jsx("div", {
+					className: s?.footer,
+					children: f
+				})
+			]
+		})
+	});
+});
+export { ModalStandAlone };

package/dist/esm/components/modal/modalUnControlled.js

@@ -1,2 +1,37 @@
-import{jsx as o}from"react/jsx-runtime";import{forwardRef as r,useState as e,useEffect as n}from"react";import{processIconProp as t}from"../../lib/utils/process/processCommonProp.js";import{ESCAPE as s}from"../../lib/constants/keyboardKeys/keyboardKeys.js";import{isKeyPressed as l}from"../../lib/utils/keyboard/keyboard.js";import{ModalControlled as c}from"./modalControlled.js";const i=r(({closeButton:r,closeIcon:i,onClose:p,open:a,popover:m,variant:k,...y},b)=>{const[d,C]=e(a);n(()=>{C(a)},[a]);const f=()=>{C(!1),p?.()};/* @__PURE__ */
-return o(c,{...y,ref:b,closeButton:r&&{...r,onClick:o=>{f(),r?.onClick?.(o)}},closeIcon:{...t(i),onClick:o=>{f(),t(i)?.onClick?.(o)}},open:d,popover:{...m},variant:k,onClose:p,onKeyDown:o=>y?.blocked&&l(o.key,...s.key)?o.stopPropagation():null})});export{i as Modal,i as ModalUnControlled};
+import { processIconProp } from "../../lib/utils/process/processCommonProp.js";
+import { ESCAPE } from "../../lib/constants/keyboardKeys/keyboardKeys.js";
+import { isKeyPressed } from "../../lib/utils/keyboard/keyboard.js";
+import { ModalControlled } from "./modalControlled.js";
+import { forwardRef, useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+const ModalUnControlled = forwardRef(({ closeButton: n, closeIcon: r, onClose: i, open: a, popover: o, variant: s, ...c }, l) => {
+	let [u, d] = useState(a), f = (e) => c?.blocked && isKeyPressed(e.key, ...ESCAPE.key) ? e.stopPropagation() : null;
+	useEffect(() => {
+		d(a);
+	}, [a]);
+	let p = () => {
+		d(!1), i?.();
+	}, m = (t) => {
+		p(), processIconProp(r)?.onClick?.(t);
+	}, h = (e) => {
+		p(), n?.onClick?.(e);
+	};
+	return /* @__PURE__ */ jsx(ModalControlled, {
+		...c,
+		ref: l,
+		closeButton: n && {
+			...n,
+			onClick: h
+		},
+		closeIcon: {
+			...processIconProp(r),
+			onClick: m
+		},
+		open: u,
+		popover: { ...o },
+		variant: s,
+		onClose: i,
+		onKeyDown: f
+	});
+});
+export { ModalUnControlled };

package/dist/esm/components/modal/utils/onlyDesktopSize.js

@@ -1 +1,3 @@
-import{DeviceBreakpointsTypeUtils as o}from"../../../lib/types/breakpoints/breakpoints.js";const s=(s,t)=>o.isDesktopOrLargeDesktop(s)?t:void 0;export{s as onlyDesktopSize};
+import { DeviceBreakpointsTypeUtils } from "../../../lib/types/breakpoints/breakpoints.js";
+const onlyDesktopSize = (e, t) => DeviceBreakpointsTypeUtils.isDesktopOrLargeDesktop(e) ? t : void 0;
+export { onlyDesktopSize };

package/dist/esm/components/option/components.ts/optionLabelSlice.js

@@ -1,2 +1,15 @@
-import{jsx as t}from"react/jsx-runtime";import{Text as s}from"../../text/text.js";import{pickCustomAttributes as r}from"../../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";const e=({children:e,component:o,cssClasses:i,customAttributes:m,...n})=>{if(!e)return null;const u=r(n);/* @__PURE__ */
-return t(s,{additionalClasses:{text:i},component:o,customAttributes:m,...u,children:e})};export{e as OptionLabelSlice};
+import { pickCustomAttributes } from "../../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";
+import { Text } from "../../text/text2.js";
+import { jsx } from "react/jsx-runtime";
+const OptionLabelSlice = ({ children: e, component: t, cssClasses: n, customAttributes: r, ...i }) => {
+	if (!e) return null;
+	let a = pickCustomAttributes(i);
+	return /* @__PURE__ */ jsx(Text, {
+		additionalClasses: { text: n },
+		component: t,
+		customAttributes: r,
+		...a,
+		children: e
+	});
+};
+export { OptionLabelSlice };

package/dist/esm/components/option/option.js

@@ -1 +1,33 @@
-import{jsx as o}from"react/jsx-runtime";import{forwardRef as r,useRef as e,useState as s,useImperativeHandle as n,useEffect as t}from"react";import{useClassName as i}from"../../lib/hooks/useClassName/useClassName.js";import{useGenericComponents as a}from"../../lib/provider/genericComponentsProvider/genericComponentsProvider.js";import{OptionStandAlone as m}from"./optionStandAlone.js";const c=r(({additionalClasses:r,focus:c,onBlur:u,onFocus:l,variant:p,...f},d)=>{const v=i({additionalClassNames:r,component:"OPTION",variant:p}),{LINK:C}=a(),N=e(),[j,L]=s(!1),[P,b]=s(!1);return n(d,()=>N.current,[]),t(()=>{c&&N.current?.focus()},[c]),/* @__PURE__ */o(m,{...f,ref:N,componentLink:C,cssClasses:v,focus:P,hover:j,onBlur:o=>{u?.(o),b(!1)},onFocus:o=>{l?.(o),b(!0)},onMouseEnter:()=>L(!0),onMouseLeave:()=>L(!1)})});export{c as Option};
+import { useGenericComponents } from "../../lib/provider/genericComponentsProvider/genericComponentsProvider.js";
+import { useClassName } from "../../lib/hooks/useClassName/useClassName.js";
+import { OptionStandAlone } from "./optionStandAlone.js";
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+const Option = forwardRef(({ additionalClasses: t, focus: n, onBlur: r, onFocus: i, variant: a, ...o }, s) => {
+	let c = useClassName({
+		additionalClassNames: t,
+		component: "OPTION",
+		variant: a
+	}), { LINK: l } = useGenericComponents(), u = useRef(), [d, f] = useState(!1), [p, m] = useState(!1);
+	useImperativeHandle(s, () => u.current, []), useEffect(() => {
+		n && u.current?.focus();
+	}, [n]);
+	let h = (e) => {
+		i?.(e), m(!0);
+	}, g = (e) => {
+		r?.(e), m(!1);
+	};
+	return /* @__PURE__ */ jsx(OptionStandAlone, {
+		...o,
+		ref: u,
+		componentLink: l,
+		cssClasses: c,
+		focus: p,
+		hover: d,
+		onBlur: g,
+		onFocus: h,
+		onMouseEnter: () => f(!0),
+		onMouseLeave: () => f(!1)
+	});
+});
+export { Option };