@kakadu/components 4.3.0 → 4.3.2

package/build/components/combobox.d.ts

@@ -19,7 +19,10 @@ export type ComboboxProperties<Type = string> = Omit<InputLabelControllerPropert
     readonly isLoading?: boolean;
     readonly value?: Type;
     readonly options: Array<ComboboxOption<Type>>;
+    /** If `false`, `options` is assumed to be sorted and filtered based on the current search value (eg. by the server).
+     * @default true */
+    readonly shouldFilterOptions?: boolean;
     readonly onChange?: (value: string, event?: ChangeEvent<InputType>) => void;
     readonly onSelect?: (value?: Type) => void;
 };
-export default function Combobox<Type = string>({ isLoading, label, options, error, warning, information, footnote, className, onChange, onSelect, ...properties }: ComboboxProperties<Type>): import("react/jsx-runtime").JSX.Element;
+export default function Combobox<Type = string>({ isLoading, shouldFilterOptions, label, options, error, warning, information, footnote, className, onChange, onSelect, ...properties }: ComboboxProperties<Type>): import("react/jsx-runtime").JSX.Element;

package/build/components/combobox.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("../jsx-runtime-BB_1_6y_.js"),e=require("react"),K=require("@kuma-ui/core"),te=require("../hooks/use-synchronized-value.js"),se=require("../icons/icon.js"),ne=require("../icons/chevron-up.js"),oe=require("../utilities/search.js"),re=require("./input.js"),B=require("./text.js"),U=require("./flex.js"),ae=require("./skeleton.js");function X(){const{value:o,setValue:p}=te.default("isKeyboardNavigating");return e.useMemo(()=>({isKeyboardNavigating:o,setIsKeyboardNavigating:p}),[o,p])}function _(o){return"text"in o?o.text:o.label}const D="kakadu-components-1144794361",F="kakadu-components-2911184744";function ue({isSelected:o,id:p,value:i,label:k,onSelect:v,onHover:E}){const{isKeyboardNavigating:f}=X(),j=e.useCallback(()=>{v(i)},[v,i]),n=e.useCallback(b=>{f||b.movementX===0&&b.movementY===0||E(i)},[f,E,i]),x=e.useRef(null);return e.useEffect(()=>{const b=x.current;o&&b&&f&&setTimeout(()=>{b.scrollIntoView({behavior:"smooth",block:"nearest"})},0)},[o,f]),c.jsxRuntimeExports.jsx("li",{ref:x,id:p,role:"option","aria-selected":o,tabIndex:-1,className:K.cx(D,"kakadu-components-4130497639",f?"kakadu-components-962373561":"kakadu-components-1109598791"),onClick:j,onMouseMove:n,children:c.jsxRuntimeExports.jsx(B.Span,{className:K.cx(F,typeof k=="string"&&"kakadu-components-154286052"),children:k})})}function ce({isLoading:o,id:p,activeOptionId:i,selectedValue:k,options:v,onSelect:E,onHover:f}){const j=e.useRef(null);return e.useEffect(()=>{const n=j.current;n&&n.scrollIntoView({behavior:"smooth",block:"nearest"})},[]),c.jsxRuntimeExports.jsxs("ul",{ref:j,id:p,role:"listbox","aria-label":"Options",tabIndex:-1,className:"kakadu-components-1951042708",children:[v.length===0?o?null:c.jsxRuntimeExports.jsxs(U.default,{"aria-atomic":!0,as:"li",role:"status","aria-live":"polite",direction:"row",preset:"start",gap:.5,className:D,children:[c.jsxRuntimeExports.jsx(se.default,{size:15,type:"exclamationTriangle"}),c.jsxRuntimeExports.jsx(B.Span,{className:F,children:"No results."})]}):v.map((n,x)=>c.jsxRuntimeExports.jsx(ue,{...n,id:n.value===k?i:void 0,isSelected:n.value===k,onSelect:E,onHover:f},_(n)+x)),o?c.jsxRuntimeExports.jsx(U.default,{as:"li",alignment:"center",className:D,children:c.jsxRuntimeExports.jsx(B.Span,{className:F,children:c.jsxRuntimeExports.jsx(ae.SkeletonInstance,{width:"100%",height:"1.3em"})})}):null]})}function ie({isLoading:o,label:p,options:i,error:k,warning:v,information:E,footnote:f,className:j,onChange:n,onSelect:x,...b}){const O=e.useRef(null),T=e.useId(),H=e.useId(),[g,M]=e.useState(!1),Y=e.useCallback(()=>{M(!0)},[]),$=e.useCallback(t=>{var s;(s=O.current)!=null&&s.contains(t.relatedTarget)||M(!1)},[]),[I,a]=e.useState(!1);e.useEffect(()=>{a(g)},[g]);const[P,V]=e.useState(""),{value:R}=b,[d,y]=e.useState(R),[S,G]=e.useState(R),A=e.useRef(S),u=e.useCallback(t=>{G(t),A.current=t},[]);e.useEffect(()=>{y(R),u(R)},[R,u]);const J=e.useCallback(()=>{d&&(V(""),u(void 0))},[d,u]),Q=e.useCallback((t,s)=>{V(t),n==null||n(t,s),a(!0),y(void 0)},[n]),W=e.useCallback(t=>{var s;(s=O.current)!=null&&s.contains(t.target)&&a(!0)},[]),h=e.useCallback(t=>{const s=t==null?void 0:t.value;u(s),t?V(_(t)):(V(""),n==null||n("")),x==null||x(s)},[u,n,x]),Z=e.useCallback(t=>{const s=i.find(m=>m.value===t);h(s),y(t),a(!1)},[i,h]),ee=e.useCallback(t=>{u(t)},[u]),q=e.useDeferredValue(P),l=e.useMemo(()=>d?i:oe.default(q,i,_),[d,i,q]);e.useEffect(()=>{!d&&q.length>0&&l.length>0&&!l.some(t=>S===t.value)&&u(l[0].value)},[d,q,l,S,u]);const{setIsKeyboardNavigating:N}=X();return e.useEffect(()=>{if(!g)return;const t=s=>{s.movementX===0&&s.movementY===0||N(!1)};return window.addEventListener("mousemove",t,{capture:!0}),()=>{window.removeEventListener("mousemove",t,{capture:!0})}},[g,N]),e.useEffect(()=>{if(!g)return;const t=s=>{var z;let m;const C=l.length,L=l.findIndex(r=>r.value===A.current),w=()=>{s.preventDefault(),s.stopPropagation(),s.stopImmediatePropagation()};switch(s.key){case"Enter":{const r=l[L];r&&(w(),N(!0),a(!1),h(r),y(r.value));break}case"Escape":{if(I)w(),d?u(void 0):h(void 0),a(!1);else if(d)w(),a(!0),h(void 0);else{w(),M(!1);const r=document.activeElement;r instanceof HTMLElement&&((z=O.current)!=null&&z.contains(r))&&r.blur()}return}case"ArrowDown":{m=L+1,a(!0);break}case"ArrowUp":{m=L-1,a(!0),m<0&&(m=C-1);break}case"Home":{a(!0),m=0;break}case"End":{a(!0),m=C-1;break}case"Backspace":{l.some(r=>r.value===d)&&(w(),h(void 0),a(!0));break}}if(m!==void 0&&(w(),N(!0),C>0)){const r=l[m%C];r&&u(r.value)}};return window.addEventListener("keydown",t,{capture:!0}),()=>{window.removeEventListener("keydown",t,{capture:!0})}},[g,l,N,a,h,y,I,d,u]),c.jsxRuntimeExports.jsx(re.default,{...b,ref:O,role:"combobox",autoComplete:"off","aria-controls":T,"aria-expanded":I,"aria-activedescendant":I?H:void 0,label:p,value:P,error:k,warning:v,information:E,footnote:f,attachments:I?c.jsxRuntimeExports.jsx(ce,{isLoading:o,id:T,activeOptionId:H,selectedValue:S,options:l,onSelect:Z,onHover:ee}):null,className:K.cx(j,"kakadu-components-879486679"),onMouseDown:W,onChange:Q,onBeforeInput:J,onFocus:Y,onBlur:$,children:c.jsxRuntimeExports.jsx(ne.default,{width:14,height:14,className:"kakadu-components-158931186"})})}exports.default=ie;exports.getComboboxOptionString=_;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("../jsx-runtime-BB_1_6y_.js"),e=require("react"),K=require("@kuma-ui/core"),se=require("../hooks/use-synchronized-value.js"),ne=require("../icons/icon.js"),oe=require("../icons/chevron-up.js"),ae=require("../utilities/search.js"),re=require("./input.js"),B=require("./text.js"),X=require("./flex.js"),ue=require("./skeleton.js");function Y(){const{value:n,setValue:p}=se.default("isKeyboardNavigating");return e.useMemo(()=>({isKeyboardNavigating:n,setIsKeyboardNavigating:p}),[n,p])}function O(n){return"text"in n?n.text:n.label}const D="kakadu-components-1144794361",T="kakadu-components-2911184744";function ce({isSelected:n,id:p,value:v,label:a,onSelect:h,onHover:j}){const{isKeyboardNavigating:b}=Y(),g=e.useCallback(()=>{h(v)},[h,v]),l=e.useCallback(f=>{b||f.movementX===0&&f.movementY===0||j(v)},[b,j,v]),r=e.useRef(null);return e.useEffect(()=>{const f=r.current;n&&f&&b&&setTimeout(()=>{f.scrollIntoView({behavior:"smooth",block:"nearest"})},0)},[n,b]),i.jsxRuntimeExports.jsx("li",{ref:r,id:p,role:"option","aria-selected":n,tabIndex:-1,className:K.cx(D,"kakadu-components-4130497639",b?"kakadu-components-962373561":"kakadu-components-1109598791"),onClick:g,onMouseMove:l,children:i.jsxRuntimeExports.jsx(B.Span,{className:K.cx(T,typeof a=="string"&&"kakadu-components-154286052"),children:a})})}function ie({isLoading:n,id:p,activeOptionId:v,selectedValue:a,options:h,onSelect:j,onHover:b}){const g=e.useRef(null);return e.useEffect(()=>{const l=g.current;l&&l.scrollIntoView({behavior:"smooth",block:"nearest"})},[]),i.jsxRuntimeExports.jsxs("ul",{ref:g,id:p,role:"listbox","aria-label":"Options",tabIndex:-1,className:"kakadu-components-1951042708",children:[h.length===0?n?null:i.jsxRuntimeExports.jsxs(X.default,{"aria-atomic":!0,as:"li",role:"status","aria-live":"polite",direction:"row",preset:"start",gap:.5,className:D,children:[i.jsxRuntimeExports.jsx(ne.default,{size:15,type:"exclamationTriangle"}),i.jsxRuntimeExports.jsx(B.Span,{className:T,children:"No results."})]}):h.map((l,r)=>i.jsxRuntimeExports.jsx(ce,{...l,id:l.value===a?v:void 0,isSelected:l.value===a,onSelect:j,onHover:b},O(l)+r)),n?i.jsxRuntimeExports.jsx(X.default,{as:"li",alignment:"center",className:D,children:i.jsxRuntimeExports.jsx(B.Span,{className:T,children:i.jsxRuntimeExports.jsx(ue.SkeletonInstance,{width:"100%",height:"1.3em"})})}):null]})}function le({isLoading:n,shouldFilterOptions:p=!0,label:v,options:a,error:h,warning:j,information:b,footnote:g,className:l,onChange:r,onSelect:f,...F}){const S=e.useRef(null),H=e.useId(),P=e.useId(),[w,M]=e.useState(!1),$=e.useCallback(()=>{M(!0)},[]),G=e.useCallback(t=>{var s;(s=S.current)!=null&&s.contains(t.relatedTarget)||M(!1)},[]),[y,u]=e.useState(!1);e.useEffect(()=>{u(w)},[w]);const[A,I]=e.useState(""),{value:k}=F,[m,N]=e.useState(k),[q,J]=e.useState(k),z=e.useRef(q),c=e.useCallback(t=>{J(t),z.current=t},[]);e.useEffect(()=>{N(k),c(k)},[k,c]),e.useEffect(()=>{const t=a.find(s=>s.value===k);t?I(O(t)):k===void 0&&I("")},[k,a]);const Q=e.useCallback(()=>{m&&(I(""),c(void 0))},[m,c]),W=e.useCallback((t,s)=>{I(t),r==null||r(t,s),u(!0),N(void 0)},[r]),Z=e.useCallback(t=>{var s;(s=S.current)!=null&&s.contains(t.target)&&u(!0)},[]),E=e.useCallback(t=>{const s=t==null?void 0:t.value;c(s),t?I(O(t)):(I(""),r==null||r("")),f==null||f(s)},[c,r,f]),ee=e.useCallback(t=>{const s=a.find(x=>x.value===t);E(s),N(t),u(!1)},[a,E]),te=e.useCallback(t=>{c(t)},[c]),C=e.useDeferredValue(A),d=e.useMemo(()=>!p||m?a:ae.default(C,a,O),[p,m,a,C]);e.useEffect(()=>{!m&&C.length>0&&d.length>0&&!d.some(t=>q===t.value)&&c(d[0].value)},[m,C,d,q,c]);const{setIsKeyboardNavigating:V}=Y();return e.useEffect(()=>{if(!w)return;const t=s=>{s.movementX===0&&s.movementY===0||V(!1)};return window.addEventListener("mousemove",t,{capture:!0}),()=>{window.removeEventListener("mousemove",t,{capture:!0})}},[w,V]),e.useEffect(()=>{if(!w)return;const t=s=>{var U;let x;const _=d.length,L=d.findIndex(o=>o.value===z.current),R=()=>{s.preventDefault(),s.stopPropagation(),s.stopImmediatePropagation()};switch(s.key){case"Enter":{const o=d[L];o&&(R(),V(!0),u(!1),E(o),N(o.value));break}case"Escape":{if(y)R(),m?c(void 0):E(void 0),u(!1);else if(m)R(),u(!0),E(void 0);else{R(),M(!1);const o=document.activeElement;o instanceof HTMLElement&&((U=S.current)!=null&&U.contains(o))&&o.blur()}return}case"ArrowDown":{x=L+1,u(!0);break}case"ArrowUp":{x=L-1,u(!0),x<0&&(x=_-1);break}case"Home":{u(!0),x=0;break}case"End":{u(!0),x=_-1;break}case"Backspace":{d.some(o=>o.value===m)&&(R(),E(void 0),u(!0));break}}if(x!==void 0&&(R(),V(!0),_>0)){const o=d[x%_];o&&c(o.value)}};return window.addEventListener("keydown",t,{capture:!0}),()=>{window.removeEventListener("keydown",t,{capture:!0})}},[w,d,V,u,E,N,y,m,c]),i.jsxRuntimeExports.jsx(re.default,{...F,ref:S,role:"combobox",autoComplete:"off","aria-controls":H,"aria-expanded":y,"aria-activedescendant":y?P:void 0,label:v,value:A,error:h,warning:j,information:b,footnote:g,attachments:y?i.jsxRuntimeExports.jsx(ie,{isLoading:n,id:H,activeOptionId:P,selectedValue:q,options:d,onSelect:ee,onHover:te}):null,className:K.cx(l,"kakadu-components-879486679"),onMouseDown:Z,onChange:W,onBeforeInput:Q,onFocus:$,onBlur:G,children:i.jsxRuntimeExports.jsx(oe.default,{width:14,height:14,className:"kakadu-components-158931186"})})}exports.default=le;exports.getComboboxOptionString=O;

package/build/components/combobox.mjs

@@ -1,144 +1,148 @@
-import { j as c } from "../jsx-runtime-B4hRZ52C.mjs";
-import { useRef as D, useId as J, useState as L, useCallback as u, useEffect as w, useDeferredValue as ae, useMemo as W } from "react";
-import { cx as A } from "@kuma-ui/core";
-import ce from "../hooks/use-synchronized-value.mjs";
-import ie from "../icons/icon.mjs";
-import le from "../icons/chevron-up.mjs";
-import ue from "../utilities/search.mjs";
-import me from "./input.mjs";
-import { Span as P } from "./text.mjs";
-import Q from "./flex.mjs";
-import { SkeletonInstance as de } from "./skeleton.mjs";
-function Z() {
+import { j as i } from "../jsx-runtime-B4hRZ52C.mjs";
+import { useRef as H, useId as Q, useState as K, useCallback as m, useEffect as h, useDeferredValue as ce, useMemo as Z } from "react";
+import { cx as P } from "@kuma-ui/core";
+import ie from "../hooks/use-synchronized-value.mjs";
+import le from "../icons/icon.mjs";
+import ue from "../icons/chevron-up.mjs";
+import me from "../utilities/search.mjs";
+import de from "./input.mjs";
+import { Span as R } from "./text.mjs";
+import W from "./flex.mjs";
+import { SkeletonInstance as fe } from "./skeleton.mjs";
+function _() {
   const {
-    value: s,
+    value: n,
     setValue: v
-  } = ce("isKeyboardNavigating");
-  return W(() => ({
-    isKeyboardNavigating: s,
+  } = ie("isKeyboardNavigating");
+  return Z(() => ({
+    isKeyboardNavigating: n,
     setIsKeyboardNavigating: v
-  }), [s, v]);
+  }), [n, v]);
 }
-function R(s) {
-  return "text" in s ? s.text : s.label;
+function F(n) {
+  return "text" in n ? n.text : n.label;
 }
 const z = "kakadu-components-1144794361", U = "kakadu-components-2911184744";
-function fe({
-  isSelected: s,
+function pe({
+  isSelected: n,
   id: v,
-  value: i,
-  label: x,
-  onSelect: k,
-  onHover: I
+  value: x,
+  label: o,
+  onSelect: w,
+  onHover: g
 }) {
   const {
-    isKeyboardNavigating: f
-  } = Z(), g = u(() => {
-    k(i);
-  }, [k, i]), n = u((b) => {
-    f || b.movementX === 0 && b.movementY === 0 || I(i);
-  }, [f, I, i]), p = D(null);
-  return w(() => {
-    const b = p.current;
-    s && b && f && setTimeout(() => {
-      b.scrollIntoView({
+    isKeyboardNavigating: b
+  } = _(), N = m(() => {
+    w(x);
+  }, [w, x]), l = m((d) => {
+    b || d.movementX === 0 && d.movementY === 0 || g(x);
+  }, [b, g, x]), r = H(null);
+  return h(() => {
+    const d = r.current;
+    n && d && b && setTimeout(() => {
+      d.scrollIntoView({
         behavior: "smooth",
         block: "nearest"
       });
     }, 0);
-  }, [s, f]), /* @__PURE__ */ c.jsx("li", { ref: p, id: v, role: "option", "aria-selected": s, tabIndex: -1, className: A(z, "kakadu-components-4130497639", f ? "kakadu-components-962373561" : "kakadu-components-1109598791"), onClick: g, onMouseMove: n, children: /* @__PURE__ */ c.jsx(P, { className: A(U, typeof x == "string" && "kakadu-components-154286052"), children: x }) });
+  }, [n, b]), /* @__PURE__ */ i.jsx("li", { ref: r, id: v, role: "option", "aria-selected": n, tabIndex: -1, className: P(z, "kakadu-components-4130497639", b ? "kakadu-components-962373561" : "kakadu-components-1109598791"), onClick: N, onMouseMove: l, children: /* @__PURE__ */ i.jsx(R, { className: P(U, typeof o == "string" && "kakadu-components-154286052"), children: o }) });
 }
-function pe({
-  isLoading: s,
+function ve({
+  isLoading: n,
   id: v,
-  activeOptionId: i,
-  selectedValue: x,
-  options: k,
-  onSelect: I,
-  onHover: f
+  activeOptionId: x,
+  selectedValue: o,
+  options: w,
+  onSelect: g,
+  onHover: b
 }) {
-  const g = D(null);
-  return w(() => {
-    const n = g.current;
-    n && n.scrollIntoView({
+  const N = H(null);
+  return h(() => {
+    const l = N.current;
+    l && l.scrollIntoView({
       behavior: "smooth",
       block: "nearest"
     });
-  }, []), /* @__PURE__ */ c.jsxs("ul", { ref: g, id: v, role: "listbox", "aria-label": "Options", tabIndex: -1, className: "kakadu-components-1951042708", children: [
-    k.length === 0 ? s ? null : /* @__PURE__ */ c.jsxs(Q, { "aria-atomic": !0, as: "li", role: "status", "aria-live": "polite", direction: "row", preset: "start", gap: 0.5, className: z, children: [
-      /* @__PURE__ */ c.jsx(ie, { size: 15, type: "exclamationTriangle" }),
-      /* @__PURE__ */ c.jsx(P, { className: U, children: "No results." })
-    ] }) : k.map((n, p) => /* @__PURE__ */ c.jsx(
-      fe,
+  }, []), /* @__PURE__ */ i.jsxs("ul", { ref: N, id: v, role: "listbox", "aria-label": "Options", tabIndex: -1, className: "kakadu-components-1951042708", children: [
+    w.length === 0 ? n ? null : /* @__PURE__ */ i.jsxs(W, { "aria-atomic": !0, as: "li", role: "status", "aria-live": "polite", direction: "row", preset: "start", gap: 0.5, className: z, children: [
+      /* @__PURE__ */ i.jsx(le, { size: 15, type: "exclamationTriangle" }),
+      /* @__PURE__ */ i.jsx(R, { className: U, children: "No results." })
+    ] }) : w.map((l, r) => /* @__PURE__ */ i.jsx(
+      pe,
       {
-        ...n,
-        id: n.value === x ? i : void 0,
-        isSelected: n.value === x,
-        onSelect: I,
-        onHover: f
+        ...l,
+        id: l.value === o ? x : void 0,
+        isSelected: l.value === o,
+        onSelect: g,
+        onHover: b
       },
-      R(n) + p
+      F(l) + r
     )),
-    s ? /* @__PURE__ */ c.jsx(Q, { as: "li", alignment: "center", className: z, children: /* @__PURE__ */ c.jsx(P, { className: U, children: /* @__PURE__ */ c.jsx(de, { width: "100%", height: "1.3em" }) }) }) : null
+    n ? /* @__PURE__ */ i.jsx(W, { as: "li", alignment: "center", className: z, children: /* @__PURE__ */ i.jsx(R, { className: U, children: /* @__PURE__ */ i.jsx(fe, { width: "100%", height: "1.3em" }) }) }) : null
   ] });
 }
-function ye({
-  isLoading: s,
-  label: v,
-  options: i,
-  error: x,
-  warning: k,
-  information: I,
-  footnote: f,
-  className: g,
-  onChange: n,
-  onSelect: p,
-  ...b
+function Oe({
+  isLoading: n,
+  shouldFilterOptions: v = !0,
+  label: x,
+  options: o,
+  error: w,
+  warning: g,
+  information: b,
+  footnote: N,
+  className: l,
+  onChange: r,
+  onSelect: d,
+  ...X
 }) {
-  const F = D(null), X = J(), Y = J(), [N, H] = L(!1), _ = u(() => {
-    H(!0);
-  }, []), $ = u((e) => {
+  const M = H(null), Y = Q(), q = Q(), [V, T] = K(!1), $ = m(() => {
+    T(!0);
+  }, []), ee = m((e) => {
     var t;
-    (t = F.current) != null && t.contains(e.relatedTarget) || H(!1);
-  }, []), [j, r] = L(!1);
-  w(() => {
-    r(N);
-  }, [N]);
-  const [q, K] = L(""), {
-    value: y
-  } = b, [m, O] = L(y), [M, ee] = L(y), C = D(M), a = u((e) => {
-    ee(e), C.current = e;
+    (t = M.current) != null && t.contains(e.relatedTarget) || T(!1);
+  }, []), [O, a] = K(!1);
+  h(() => {
+    a(V);
+  }, [V]);
+  const [C, j] = K(""), {
+    value: k
+  } = X, [f, E] = K(k), [S, te] = K(k), G = H(S), c = m((e) => {
+    te(e), G.current = e;
   }, []);
-  w(() => {
-    O(y), a(y);
-  }, [y, a]);
-  const te = u(() => {
-    m && (K(""), a(void 0));
-  }, [m, a]), ne = u((e, t) => {
-    K(e), n == null || n(e, t), r(!0), O(void 0);
-  }, [n]), se = u((e) => {
+  h(() => {
+    E(k), c(k);
+  }, [k, c]), h(() => {
+    const e = o.find((t) => t.value === k);
+    e ? j(F(e)) : k === void 0 && j("");
+  }, [k, o]);
+  const ne = m(() => {
+    f && (j(""), c(void 0));
+  }, [f, c]), se = m((e, t) => {
+    j(e), r == null || r(e, t), a(!0), E(void 0);
+  }, [r]), oe = m((e) => {
     var t;
-    (t = F.current) != null && t.contains(e.target) && r(!0);
-  }, []), h = u((e) => {
+    (t = M.current) != null && t.contains(e.target) && a(!0);
+  }, []), I = m((e) => {
     const t = e == null ? void 0 : e.value;
-    a(t), e ? K(R(e)) : (K(""), n == null || n("")), p == null || p(t);
-  }, [a, n, p]), oe = u((e) => {
-    const t = i.find((d) => d.value === e);
-    h(t), O(e), r(!1);
-  }, [i, h]), re = u((e) => {
-    a(e);
-  }, [a]), S = ae(q), l = W(() => m ? i : ue(S, i, R), [m, i, S]);
-  w(() => {
-    !m && S.length > 0 && l.length > 0 && !l.some((e) => M === e.value) && a(l[0].value);
-  }, [m, S, l, M, a]);
+    c(t), e ? j(F(e)) : (j(""), r == null || r("")), d == null || d(t);
+  }, [c, r, d]), re = m((e) => {
+    const t = o.find((p) => p.value === e);
+    I(t), E(e), a(!1);
+  }, [o, I]), ae = m((e) => {
+    c(e);
+  }, [c]), B = ce(C), u = Z(() => !v || f ? o : me(B, o, F), [v, f, o, B]);
+  h(() => {
+    !f && B.length > 0 && u.length > 0 && !u.some((e) => S === e.value) && c(u[0].value);
+  }, [f, B, u, S, c]);
   const {
-    setIsKeyboardNavigating: E
-  } = Z();
-  return w(() => {
-    if (!N)
+    setIsKeyboardNavigating: L
+  } = _();
+  return h(() => {
+    if (!V)
       return;
     const e = (t) => {
-      t.movementX === 0 && t.movementY === 0 || E(!1);
+      t.movementX === 0 && t.movementY === 0 || L(!1);
     };
     return window.addEventListener("mousemove", e, {
       capture: !0
@@ -147,57 +151,57 @@ function ye({
         capture: !0
       });
     };
-  }, [N, E]), w(() => {
-    if (!N)
+  }, [V, L]), h(() => {
+    if (!V)
       return;
     const e = (t) => {
-      var G;
-      let d;
-      const B = l.length, T = l.findIndex((o) => o.value === C.current), V = () => {
+      var J;
+      let p;
+      const D = u.length, A = u.findIndex((s) => s.value === G.current), y = () => {
         t.preventDefault(), t.stopPropagation(), t.stopImmediatePropagation();
       };
       switch (t.key) {
         case "Enter": {
-          const o = l[T];
-          o && (V(), E(!0), r(!1), h(o), O(o.value));
+          const s = u[A];
+          s && (y(), L(!0), a(!1), I(s), E(s.value));
           break;
         }
         case "Escape": {
-          if (j)
-            V(), m ? a(void 0) : h(void 0), r(!1);
-          else if (m)
-            V(), r(!0), h(void 0);
+          if (O)
+            y(), f ? c(void 0) : I(void 0), a(!1);
+          else if (f)
+            y(), a(!0), I(void 0);
           else {
-            V(), H(!1);
-            const o = document.activeElement;
-            o instanceof HTMLElement && ((G = F.current) != null && G.contains(o)) && o.blur();
+            y(), T(!1);
+            const s = document.activeElement;
+            s instanceof HTMLElement && ((J = M.current) != null && J.contains(s)) && s.blur();
           }
           return;
         }
         case "ArrowDown": {
-          d = T + 1, r(!0);
+          p = A + 1, a(!0);
           break;
         }
         case "ArrowUp": {
-          d = T - 1, r(!0), d < 0 && (d = B - 1);
+          p = A - 1, a(!0), p < 0 && (p = D - 1);
           break;
         }
         case "Home": {
-          r(!0), d = 0;
+          a(!0), p = 0;
           break;
         }
         case "End": {
-          r(!0), d = B - 1;
+          a(!0), p = D - 1;
           break;
         }
         case "Backspace": {
-          l.some((o) => o.value === m) && (V(), h(void 0), r(!0));
+          u.some((s) => s.value === f) && (y(), I(void 0), a(!0));
           break;
         }
       }
-      if (d !== void 0 && (V(), E(!0), B > 0)) {
-        const o = l[d % B];
-        o && a(o.value);
+      if (p !== void 0 && (y(), L(!0), D > 0)) {
+        const s = u[p % D];
+        s && c(s.value);
       }
     };
     return window.addEventListener("keydown", e, {
@@ -207,9 +211,9 @@ function ye({
         capture: !0
       });
     };
-  }, [N, l, E, r, h, O, j, m, a]), /* @__PURE__ */ c.jsx(me, { ...b, ref: F, role: "combobox", autoComplete: "off", "aria-controls": X, "aria-expanded": j, "aria-activedescendant": j ? Y : void 0, label: v, value: q, error: x, warning: k, information: I, footnote: f, attachments: j ? /* @__PURE__ */ c.jsx(pe, { isLoading: s, id: X, activeOptionId: Y, selectedValue: M, options: l, onSelect: oe, onHover: re }) : null, className: A(g, "kakadu-components-879486679"), onMouseDown: se, onChange: ne, onBeforeInput: te, onFocus: _, onBlur: $, children: /* @__PURE__ */ c.jsx(le, { width: 14, height: 14, className: "kakadu-components-158931186" }) });
+  }, [V, u, L, a, I, E, O, f, c]), /* @__PURE__ */ i.jsx(de, { ...X, ref: M, role: "combobox", autoComplete: "off", "aria-controls": Y, "aria-expanded": O, "aria-activedescendant": O ? q : void 0, label: x, value: C, error: w, warning: g, information: b, footnote: N, attachments: O ? /* @__PURE__ */ i.jsx(ve, { isLoading: n, id: Y, activeOptionId: q, selectedValue: S, options: u, onSelect: re, onHover: ae }) : null, className: P(l, "kakadu-components-879486679"), onMouseDown: oe, onChange: se, onBeforeInput: ne, onFocus: $, onBlur: ee, children: /* @__PURE__ */ i.jsx(ue, { width: 14, height: 14, className: "kakadu-components-158931186" }) });
 }
 export {
-  ye as default,
-  R as getComboboxOptionString
+  Oe as default,
+  F as getComboboxOptionString
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kakadu/components",
-  "version": "4.3.0",
+  "version": "4.3.2",
   "description": "Kakadu components library",
   "license": "MIT",
   "main": "./build/index.js",