@kakadu/components 6.3.13 → 6.3.14

package/build/components/combobox.d.ts

@@ -1,4 +1,4 @@
-import React, { type ChangeEvent, type HTMLProps, type ReactNode } from 'react';
+import React, { type ChangeEvent, type HTMLProps, type ReactNode, type RefObject } from 'react';
 import { type InputType, type InputLabelControllerProperties } from './input';
 export type ComboboxOption<Type = string> = {
     readonly value: Type;
@@ -10,6 +10,7 @@ export type ComboboxOption<Type = string> = {
 });
 export declare function getComboboxOptionString<Type = string>(option: ComboboxOption<Type>): string;
 export type ComboboxOptionsItemProperties<Type = string> = ComboboxOption<Type> & {
+    readonly ref?: RefObject<HTMLLIElement | null>;
     readonly id?: string;
     readonly isSelected?: boolean;
     readonly onSelect: (value: Type) => void;

package/build/components/combobox.js

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

package/build/components/combobox.mjs

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

package/package.json

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