@kakadu/components 4.3.0 → 4.3.1

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

package/build/components/combobox.mjs

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

package/package.json

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