@kubit-ui-web/react-components 2.0.0-beta.21 → 2.0.0-beta.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubit-ui-web/react-components",
-  "version": "2.0.0-beta.21",
+  "version": "2.0.0-beta.23",
   "description": "Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience",
   "author": {
     "name": "Kubit",
@@ -22,7 +22,7 @@
   },
   "license": "Apache-2.0",
   "engines": {
-    "node": "20"
+    "node": "24"
   },
   "keywords": [
     "react",
@@ -133,7 +133,7 @@
     "@testing-library/react": "^16.3.1",
     "@testing-library/user-event": "^14.6.1",
     "@trivago/prettier-plugin-sort-imports": "^6.0.2",
-    "@types/node": "^25.0.3",
+    "@types/node": "^25.0.5",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@types/testing-library__jest-dom": "^6.0.0",
@@ -160,7 +160,7 @@
     "typescript-eslint": "^8.52.0",
     "vite": "7.3.1",
     "vite-plugin-dts": "^4.5.4",
-    "vite-tsconfig-paths": "^6.0.3",
+    "vite-tsconfig-paths": "^6.0.4",
     "vitest": "^4.0.16",
     "vitest-axe": "^0.1.0"
   },

package/dist/cjs/components/cardImage/cardImage.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../_virtual/jsx-runtime.js"),s=require("react"),a=require("../../lib/hooks/useClassName/useClassName.js"),r=require("../../lib/hooks/useMediaDevice/useMediaDevice.js"),i=require("./cardImageStandAlone.js"),t=s.forwardRef(({additionalClasses:s,variant:t,...o},u)=>{const n=r.useMediaDevice(),d=a.useClassName({additionalClassNames:s,component:"CARD_IMAGE",variant:t});return e.jsxRuntimeExports.jsx(i.CardImageStandAlone,{...o,ref:u,cssClasses:d,device:n})});exports.CardImage=t;

package/dist/cjs/components/cardImage/cardImageStandAlone.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../_virtual/jsx-runtime.js"),t=require("react"),s=require("../link/link.js"),i=require("../text/text.js"),o=require("../../lib/utils/pickCustomAttributes/pickCustomAttributes.js"),r=require("../../lib/utils/process/processCommonProp.js"),n=require("../../lib/components/customComponent/customComponent.js"),c=t.forwardRef(({component:t="div",cssClasses:c,description:l,device:a,image:x,imageAltText:m,link:u,onClick:p,title:d,...j},C)=>{const b=o.pickCustomAttributes(j);return e.jsxRuntimeExports.jsxs(n.CustomComponent,{ref:C,className:c?.card_image,component:t,tabIndex:0,onClick:p,...b,children:[e.jsxRuntimeExports.jsx("div",{"aria-label":m||void 0,className:c?.imagecontainer,role:m?"img":void 0,style:x?.[a]?{backgroundImage:`url(${x[a]})`}:void 0}),e.jsxRuntimeExports.jsxs("div",{className:c?.content,children:[e.jsxRuntimeExports.jsxs("div",{className:c?.textcontainer,children:[e.jsxRuntimeExports.jsx(i.Text,{additionalClasses:{text:c?.title},component:"h3",...r.processTextProp(d)}),e.jsxRuntimeExports.jsx(i.Text,{additionalClasses:{text:c?.description},...r.processTextProp(l)})]}),u?.url&&e.jsxRuntimeExports.jsx("div",{className:c?.linkcontainer,children:e.jsxRuntimeExports.jsx(s.Link,{iconPosition:"right",...u,children:u.content||""})})]})]})});exports.CardImageStandAlone=c;

package/dist/cjs/components/dropdownSelected/dropdownSelectedControlled.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../_virtual/jsx-runtime.js"),s=require("react"),r=require("../../lib/constants/keyboardKeys/keyboardKeys.js"),o=require("../../lib/hooks/useClassName/useClassName.js"),n=require("../../lib/provider/genericComponentsProvider/genericComponentsProvider.js"),t=require("../../lib/utils/keyboard/keyboard.js"),i=require("../../lib/utils/focusHandlers/focusHandlers.js"),l=require("./dropdownSelectedStandAlone.js"),u=s.forwardRef(({additionalClasses:u,closePopoverOnScroll:a,listOptions:d,onClosePopover:c,open:p,url:f,variant:m,...v},y)=>{const{LINK:C}=n.useGenericComponents(),b=o.useClassName({additionalClassNames:u,component:"DROPDOWN_SELECTED",variant:m}),j=s.useRef(null);return s.useEffect(()=>{if(a)return window.addEventListener("scroll",c),()=>{window.removeEventListener("scroll",c)}},[a,c]),e.jsxRuntimeExports.jsx(l.DropdownSelectedStandAlone,{ref:y,component:f?C:"button",cssClasses:b,listOptions:d,listOptionsRef:j,open:p,onButtonKeyDown:e=>{p&&t.isKeyPressed(e.key,r.TAB.key)&&!e.shiftKey&&j.current&&("selection"===d.type?j.current.firstElementChild?.focus():i.focusFirstDescendant({element:j.current}),e.preventDefault())},onClosePopover:c,...v})});exports.DropdownSelectedControlled=u;

package/dist/cjs/components/dropdownSelected/dropdownSelectedStandAlone.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../_virtual/jsx-runtime.js"),o=require("react"),t=require("../text/text.js"),s=require("../../lib/components/elementOrIcon/elementOrIcon.js"),n=require("../../lib/utils/pickCustomAttributes/pickCustomAttributes.js"),i=require("../../lib/utils/process/processCommonProp.js"),r=require("../../lib/components/customComponent/customComponent.js"),l=require("../listOptions/listOptions.js"),a=require("../listOptions/utils/listOptions.utils.js"),p=require("../popover/popover.js"),c=o.forwardRef(({buttonOrLinkRef:c,component:u,cssClasses:d,icon:m,label:x,listOptions:v,listOptionsRef:b,onBlur:j,onButtonClick:C,onButtonKeyDown:k,onClosePopover:y,onFocus:O,onKeyDown:h,onOptionClick:f,open:M,optionSelected:g,popover:w,url:D,urlTarget:E,...R},q)=>{const F=`dropdownselected-${o.useId().replace(/:/g,"")}`,A=M?`${F}-list`:void 0,S=R["data-testid"]||"dropdown-selected",T=n.pickCustomAttributes(R),I=o.useMemo(()=>{return{currentFocusSelected:-1,keyDownMove:a.keyDownMove(v.options),keyLeftMove:0,keyRightMove:0,keyTabMove:(e=v.options,(o,t)=>{if(t?.shiftKey){const e=Math.max(o,0)-1;return e>=0&&t?.preventDefault(),Math.max(e,0)}const s=Math.max(o,0)+1;return s<=e.length-1&&t?.preventDefault(),Math.min(s,e.length-1)}),keyUpMove:a.keyUpMove,size:v.options.length};var e},[v.options]);return e.jsxRuntimeExports.jsxs("div",{ref:q,className:d?.dropdown_selected,"data-testid":S,role:"combobox",onBlur:j,onFocus:O,onKeyDown:h,...T,"aria-controls":"dropdown-selected-list","aria-expanded":M,tabIndex:0,children:[e.jsxRuntimeExports.jsxs(r.CustomComponent,{ref:c,"aria-controls":A,"aria-expanded":M,"aria-haspopup":"listbox",className:d?.buttonorlinkcontainer,component:u,target:D?E:void 0,type:D?void 0:"button",url:D,onClick:C,onKeyDown:k,children:[e.jsxRuntimeExports.jsx(t.Text,{additionalClasses:{text:M?d?.labelopened:d?.labelclosed},component:"span",...i.processTextProp(x)}),e.jsxRuntimeExports.jsx(s.ElementOrIcon,{className:M?d?.iconopened:d?.iconclosed,rotate:M?"180deg":"0deg",transitionDuration:"0.2s",...m})]}),!!w&&e.jsxRuntimeExports.jsx(p.Popover,{anchorElement:c?.current,component:"div",disableAutoFocusFirstDescendant:!0,disableAutoFocusFirstDescendantAfterClose:!0,disableClickOverlayClose:!1,disableEscapeClose:!1,disableTrapFocus:!0,id:A,open:M,placement:"bottom",preventCloseOnClickElements:[c?.current],strategy:"absolute",...w,onClose:()=>{y(),w?.onClose?.()},children:e.jsxRuntimeExports.jsx("div",{className:d?.listoptionscontainer,"data-testid":`${S}-list`,children:!!v.variant&&!!v.optionVariant&&e.jsxRuntimeExports.jsx(l.ListOptions,{ref:b,roveFocus:"selection"===v.type?I:void 0,selectedValue:g,...v,onOptionClick:e=>{f(e),y()}})})})]})});exports.DropdownSelectedStandAlone=c;

package/dist/cjs/components/dropdownSelected/dropdownSelectedUncontrolled.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../_virtual/jsx-runtime.js"),o=require("react"),t=require("../../lib/constants/keyboardKeys/keyboardKeys.js"),n=require("./dropdownSelectedControlled.js"),r=o.forwardRef(({defaultOpen:r=!1,defaultOptionSelected:s,onBlur:l,onButtonClick:i,onClosePopover:u,onFocus:d,onOptionClick:c,openAndCloseOnHover:a=!1,...p},f)=>{const[y,C]=o.useState(r),[S,v]=o.useState(s),k=o.useRef(null);o.useEffect(()=>{const e=()=>{document.hidden&&C(!1)};return document.addEventListener("visibilitychange",e),()=>document.removeEventListener("visibilitychange",e)},[]);return e.jsxRuntimeExports.jsx(n.DropdownSelectedControlled,{...p,ref:f,buttonOrLinkRef:k,open:y,optionSelected:S,onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||(C(!1),l?.(!1)),a&&(C(!1),l?.(!1))},onButtonClick:()=>{i?.(!y),C(!y)},onClosePopover:()=>{C(!1),u?.(!1)},onFocus:()=>{a&&(C(!0),d?.(!0))},onKeyDown:e=>{t.ESCAPE.key.includes(e.key)&&y&&(k.current?.focus(),C(!1))},onOptionClick:e=>{v(e),c?.(e)}})});exports.DropdownSelected=r,exports.DropdownSelectedUnControlled=r;

package/dist/cjs/components/dropdownSelected/index.js

@@ -1,4 +0,0 @@
-const { DropdownSelectedControlled } = require('./dropdownSelectedControlled.js');
-module.exports = { ...module.exports, DropdownSelectedControlled };
-const { DropdownSelected } = require('./dropdownSelectedUncontrolled.js');
-module.exports = { ...module.exports, DropdownSelected };

package/dist/esm/components/cardImage/cardImage.js

@@ -1,2 +0,0 @@
-import{j as s}from"../../_virtual/jsx-runtime.js";import{forwardRef as e}from"react";import{useClassName as a}from"../../lib/hooks/useClassName/useClassName.js";import{useMediaDevice as o}from"../../lib/hooks/useMediaDevice/useMediaDevice.js";import{CardImageStandAlone as i}from"./cardImageStandAlone.js";const r=e(({additionalClasses:e,variant:r,...t},m)=>{const n=o(),l=a({additionalClassNames:e,component:"CARD_IMAGE",variant:r});/* @__PURE__ */
-return s.jsx(i,{...t,ref:m,cssClasses:l,device:n})});export{r as CardImage};

package/dist/esm/components/cardImage/cardImageStandAlone.js

@@ -1,7 +0,0 @@
-import{j as t}from"../../_virtual/jsx-runtime.js";import{forwardRef as i}from"react";import{Link as s}from"../link/link.js";import{Text as o}from"../text/text.js";import{pickCustomAttributes as e}from"../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";import{processTextProp as n}from"../../lib/utils/process/processCommonProp.js";import{CustomComponent as r}from"../../lib/components/customComponent/customComponent.js";const m=i(({component:i="div",cssClasses:m,description:c,device:l,image:a,imageAltText:d,link:p,onClick:x,title:j,...u},v)=>{const C=e(u);/* @__PURE__ */
-return t.jsxs(r,{ref:v,className:m?.card_image,component:i,tabIndex:0,onClick:x,...C,children:[
-/* @__PURE__ */t.jsx("div",{"aria-label":d||void 0,className:m?.imagecontainer,role:d?"img":void 0,style:a?.[l]?{backgroundImage:`url(${a[l]})`}:void 0}),
-/* @__PURE__ */t.jsxs("div",{className:m?.content,children:[
-/* @__PURE__ */t.jsxs("div",{className:m?.textcontainer,children:[
-/* @__PURE__ */t.jsx(o,{additionalClasses:{text:m?.title},component:"h3",...n(j)}),
-/* @__PURE__ */t.jsx(o,{additionalClasses:{text:m?.description},...n(c)})]}),p?.url&&/* @__PURE__ */t.jsx("div",{className:m?.linkcontainer,children:/* @__PURE__ */t.jsx(s,{iconPosition:"right",...p,children:p.content||""})})]})]})});export{m as CardImageStandAlone};

package/dist/esm/components/dropdownSelected/dropdownSelectedControlled.js

@@ -1 +0,0 @@
-import{j as o}from"../../_virtual/jsx-runtime.js";import{forwardRef as e,useRef as r,useEffect as s}from"react";import{TAB as t}from"../../lib/constants/keyboardKeys/keyboardKeys.js";import{useClassName as n}from"../../lib/hooks/useClassName/useClassName.js";import{useGenericComponents as i}from"../../lib/provider/genericComponentsProvider/genericComponentsProvider.js";import{isKeyPressed as l}from"../../lib/utils/keyboard/keyboard.js";import{focusFirstDescendant as a}from"../../lib/utils/focusHandlers/focusHandlers.js";import{DropdownSelectedStandAlone as m}from"./dropdownSelectedStandAlone.js";const p=e(({additionalClasses:e,closePopoverOnScroll:p,listOptions:d,onClosePopover:c,open:u,url:f,variant:v,...y},C)=>{const{LINK:b}=i(),j=n({additionalClassNames:e,component:"DROPDOWN_SELECTED",variant:v}),k=r(null);return s(()=>{if(p)return window.addEventListener("scroll",c),()=>{window.removeEventListener("scroll",c)}},[p,c]),/* @__PURE__ */o.jsx(m,{ref:C,component:f?b:"button",cssClasses:j,listOptions:d,listOptionsRef:k,open:u,onButtonKeyDown:o=>{u&&l(o.key,t.key)&&!o.shiftKey&&k.current&&("selection"===d.type?k.current.firstElementChild?.focus():a({element:k.current}),o.preventDefault())},onClosePopover:c,...y})});export{p as DropdownSelectedControlled};

package/dist/esm/components/dropdownSelected/dropdownSelectedStandAlone.js

@@ -1,5 +0,0 @@
-import{j as o}from"../../_virtual/jsx-runtime.js";import{forwardRef as e,useId as t,useMemo as s}from"react";import{Text as n}from"../text/text.js";import{ElementOrIcon as i}from"../../lib/components/elementOrIcon/elementOrIcon.js";import{pickCustomAttributes as r}from"../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";import{processTextProp as l}from"../../lib/utils/process/processCommonProp.js";import{CustomComponent as a}from"../../lib/components/customComponent/customComponent.js";import{ListOptions as p}from"../listOptions/listOptions.js";import{keyUpMove as c,keyDownMove as d}from"../listOptions/utils/listOptions.utils.js";import{Popover as m}from"../popover/popover.js";const u=e(({buttonOrLinkRef:e,component:u,cssClasses:b,icon:v,label:f,listOptions:x,listOptionsRef:C,onBlur:j,onButtonClick:h,onButtonKeyDown:k,onClosePopover:y,onFocus:O,onKeyDown:g,onOptionClick:D,open:w,optionSelected:F,popover:M,url:A,urlTarget:K,...B},N)=>{const E=`dropdownselected-${t().replace(/:/g,"")}`,I=w?`${E}-list`:void 0,R=B["data-testid"]||"dropdown-selected",T=r(B),$=s(()=>{return{currentFocusSelected:-1,keyDownMove:d(x.options),keyLeftMove:0,keyRightMove:0,keyTabMove:(o=x.options,(e,t)=>{if(t?.shiftKey){const o=Math.max(e,0)-1;return o>=0&&t?.preventDefault(),Math.max(o,0)}const s=Math.max(e,0)+1;return s<=o.length-1&&t?.preventDefault(),Math.min(s,o.length-1)}),keyUpMove:c,size:x.options.length};var o},[x.options]);/* @__PURE__ */
-return o.jsxs("div",{ref:N,className:b?.dropdown_selected,"data-testid":R,role:"combobox",onBlur:j,onFocus:O,onKeyDown:g,...T,"aria-controls":"dropdown-selected-list","aria-expanded":w,tabIndex:0,children:[
-/* @__PURE__ */o.jsxs(a,{ref:e,"aria-controls":I,"aria-expanded":w,"aria-haspopup":"listbox",className:b?.buttonorlinkcontainer,component:u,target:A?K:void 0,type:A?void 0:"button",url:A,onClick:h,onKeyDown:k,children:[
-/* @__PURE__ */o.jsx(n,{additionalClasses:{text:w?b?.labelopened:b?.labelclosed},component:"span",...l(f)}),
-/* @__PURE__ */o.jsx(i,{className:w?b?.iconopened:b?.iconclosed,rotate:w?"180deg":"0deg",transitionDuration:"0.2s",...v})]}),!!M&&/* @__PURE__ */o.jsx(m,{anchorElement:e?.current,component:"div",disableAutoFocusFirstDescendant:!0,disableAutoFocusFirstDescendantAfterClose:!0,disableClickOverlayClose:!1,disableEscapeClose:!1,disableTrapFocus:!0,id:I,open:w,placement:"bottom",preventCloseOnClickElements:[e?.current],strategy:"absolute",...M,onClose:()=>{y(),M?.onClose?.()},children:/* @__PURE__ */o.jsx("div",{className:b?.listoptionscontainer,"data-testid":`${R}-list`,children:!!x.variant&&!!x.optionVariant&&/* @__PURE__ */o.jsx(p,{ref:C,roveFocus:"selection"===x.type?$:void 0,selectedValue:F,...x,onOptionClick:o=>{D(o),y()}})})})]})});export{u as DropdownSelectedStandAlone};

package/dist/esm/components/dropdownSelected/dropdownSelectedUncontrolled.js

@@ -1,2 +0,0 @@
-import{j as e}from"../../_virtual/jsx-runtime.js";import{forwardRef as o,useState as n,useRef as t,useEffect as r}from"react";import{ESCAPE as i}from"../../lib/constants/keyboardKeys/keyboardKeys.js";import{DropdownSelectedControlled as s}from"./dropdownSelectedControlled.js";const c=o(({defaultOpen:o=!1,defaultOptionSelected:c,onBlur:l,onButtonClick:d,onClosePopover:u,onFocus:a,onOptionClick:p,openAndCloseOnHover:m=!1,...f},k)=>{const[v,y]=n(o),[C,b]=n(c),j=t(null);r(()=>{const e=()=>{document.hidden&&y(!1)};return document.addEventListener("visibilitychange",e),()=>document.removeEventListener("visibilitychange",e)},[]);/* @__PURE__ */
-return e.jsx(s,{...f,ref:k,buttonOrLinkRef:j,open:v,optionSelected:C,onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||(y(!1),l?.(!1)),m&&(y(!1),l?.(!1))},onButtonClick:()=>{d?.(!v),y(!v)},onClosePopover:()=>{y(!1),u?.(!1)},onFocus:()=>{m&&(y(!0),a?.(!0))},onKeyDown:e=>{i.key.includes(e.key)&&v&&(j.current?.focus(),y(!1))},onOptionClick:e=>{b(e),p?.(e)}})});export{c as DropdownSelected,c as DropdownSelectedUnControlled};

package/dist/esm/components/dropdownSelected/index.js

@@ -1,2 +0,0 @@
-export {  DropdownSelectedControlled  } from './dropdownSelectedControlled.js';
-export {  DropdownSelected  } from './dropdownSelectedUncontrolled.js';