@kakadu/components 4.0.0 → 4.0.2

package/build/components/combobox.d.ts

@@ -0,0 +1,25 @@
+import { type ChangeEvent, type HTMLProps, type ReactNode } from 'react';
+import { type InputType, type InputLabelControllerProperties } from './input';
+export type ComboboxOption<Type = string> = {
+    readonly value: Type;
+} & ({
+    readonly label: string;
+} | {
+    readonly text: string;
+    readonly label: ReactNode;
+});
+export declare function getComboboxOptionString<Type = string>(option: ComboboxOption<Type>): string;
+export type ComboboxOptionsItemProperties<Type = string> = ComboboxOption<Type> & {
+    readonly id?: string;
+    readonly isSelected?: boolean;
+    readonly onSelect: (value: Type) => void;
+    readonly onHover: (value: Type) => void;
+};
+export type ComboboxProperties<Type = string> = Omit<InputLabelControllerProperties & HTMLProps<HTMLInputElement>, 'onChange' | 'onSelect' | 'value'> & {
+    readonly isLoading?: boolean;
+    readonly value?: Type;
+    readonly options: Array<ComboboxOption<Type>>;
+    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;

package/build/components/combobox.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const j=require("../jsx-runtime-BB_1_6y_.js"),o=require("react"),B=require("../focus-trap-react-CkKg4ubd.js"),U=require("@kuma-ui/core"),oe=require("../use-synchronized-value-D0_rS5Wp.js"),re=require("../icons/icon.js"),ae=require("./input.js"),L=require("./text.js"),X=require("./flex.js"),ce=require("./skeleton.js");var F={exports:{}};const M=new Uint32Array(65536),ie=(t,i)=>{const r=t.length,p=i.length,l=1<<r-1;let u=-1,d=0,x=r,n=r;for(;n--;)M[t.charCodeAt(n)]|=1<<n;for(n=0;n<p;n++){let m=M[i.charCodeAt(n)];const h=m|d;m|=(m&u)+u^u,d|=~(m|u),u&=m,d&l&&x++,u&l&&x--,d=d<<1|1,u=u<<1|~(h|d),d&=h}for(n=r;n--;)M[t.charCodeAt(n)]=0;return x},le=(t,i)=>{const r=i.length,p=t.length,l=[],u=[],d=Math.ceil(r/32),x=Math.ceil(p/32);for(let e=0;e<d;e++)u[e]=-1,l[e]=0;let n=0;for(;n<x-1;n++){let e=0,f=-1;const b=n*32,g=Math.min(32,p)+b;for(let s=b;s<g;s++)M[t.charCodeAt(s)]|=1<<s;for(let s=0;s<r;s++){const v=M[i.charCodeAt(s)],k=u[s/32|0]>>>s&1,w=l[s/32|0]>>>s&1,N=v|e,E=((v|w)&f)+f^f|v|w;let O=e|~(E|f),A=f&E;O>>>31^k&&(u[s/32|0]^=1<<s),A>>>31^w&&(l[s/32|0]^=1<<s),O=O<<1|k,A=A<<1|w,f=A|~(N|O),e=O&N}for(let s=b;s<g;s++)M[t.charCodeAt(s)]=0}let m=0,h=-1;const R=n*32,C=Math.min(32,p-R)+R;for(let e=R;e<C;e++)M[t.charCodeAt(e)]|=1<<e;let q=p;for(let e=0;e<r;e++){const f=M[i.charCodeAt(e)],b=u[e/32|0]>>>e&1,g=l[e/32|0]>>>e&1,s=f|m,v=((f|g)&h)+h^h|f|g;let k=m|~(v|h),w=h&v;q+=k>>>p-1&1,q-=w>>>p-1&1,k>>>31^b&&(u[e/32|0]^=1<<e),w>>>31^g&&(l[e/32|0]^=1<<e),k=k<<1|b,w=w<<1|g,h=w|~(s|k),m=k&s}for(let e=R;e<C;e++)M[t.charCodeAt(e)]=0;return q},G=(t,i)=>{if(t.length<i.length){const r=i;i=t,t=r}return i.length===0?t.length:t.length<=32?ie(t,i):le(t,i)},ue=(t,i)=>{let r=1/0,p=0;for(let l=0;l<i.length;l++){const u=G(t,i[l]);u<r&&(r=u,p=l)}return i[p]},fe=Object.freeze(Object.defineProperty({__proto__:null,closest:ue,distance:G},Symbol.toStringTag,{value:"Module"})),de=B.getAugmentedNamespace(fe);var Y;function me(){return Y||(Y=1,(function(t,i){(function(){var r;try{r=typeof Intl<"u"&&typeof Intl.Collator<"u"?Intl.Collator("generic",{sensitivity:"base"}):null}catch{console.log("Collator could not be initialized and wouldn't be used")}var p=de,l=[],u=[],d={get:function(x,n,m){var h=m&&r&&m.useCollator;if(h){var R=x.length,C=n.length;if(R===0)return C;if(C===0)return R;var q,e,f,b,g;for(f=0;f<C;++f)l[f]=f,u[f]=n.charCodeAt(f);l[C]=C;var s;for(f=0;f<R;++f){for(e=f+1,b=0;b<C;++b)q=e,s=r.compare(x.charAt(f),String.fromCharCode(u[b]))===0,e=l[b]+(s?0:1),g=q+1,e>g&&(e=g),g=l[b+1]+1,e>g&&(e=g),l[b]=q;l[b]=e}return e}return p.distance(x,n)}};t!==null&&t.exports===i?t.exports=d:typeof self<"u"&&typeof self.postMessage=="function"&&typeof self.importScripts=="function"?self.Levenshtein=d:typeof window<"u"&&window!==null&&(window.Levenshtein=d)})()})(F,F.exports)),F.exports}var pe=me();const he=B.getDefaultExportFromCjs(pe);function J(){const{value:t,setValue:i}=oe.useSynchronizedValue("isKeyboardNavigating");return o.useMemo(()=>({isKeyboardNavigating:t,setIsKeyboardNavigating:i}),[t,i])}function P(t){return"text"in t?t.text:t.label}const K="kakadu-components-1144794361",$="kakadu-components-2911184744";function ve({isSelected:t,id:i,value:r,label:p,onSelect:l,onHover:u}){const{isKeyboardNavigating:d}=J(),x=o.useCallback(()=>{l(r)},[l,r]),n=o.useCallback(h=>{d||h.movementX===0&&h.movementY===0||u(r)},[d,u,r]),m=o.useRef(null);return o.useEffect(()=>{const h=m.current;t&&h&&d&&setTimeout(()=>{h.scrollIntoView({behavior:"smooth",block:"nearest"})},0)},[t,d]),j.jsxRuntimeExports.jsx("li",{ref:m,id:i,role:"option","aria-selected":t,tabIndex:-1,className:U.cx(K,"kakadu-components-4130497639",d?"kakadu-components-962373561":"kakadu-components-1109598791"),onClick:x,onMouseMove:n,children:j.jsxRuntimeExports.jsx(L.Span,{className:U.cx($,typeof p=="string"&&"kakadu-components-154286052"),children:p})})}function xe({isLoading:t,id:i,activeOptionId:r,selectedValue:p,options:l,onSelect:u,onHover:d}){const x=o.useRef(null);return o.useEffect(()=>{const n=x.current;n&&n.scrollIntoView({behavior:"smooth",block:"nearest"})},[]),j.jsxRuntimeExports.jsxs("ul",{ref:x,id:i,role:"listbox","aria-label":"Options",className:"kakadu-components-1951042708",children:[l.length===0?t?null:j.jsxRuntimeExports.jsxs(X.default,{"aria-atomic":!0,as:"li",role:"status","aria-live":"polite",direction:"row",preset:"start",gap:.5,className:K,children:[j.jsxRuntimeExports.jsx(re.default,{size:15,type:"exclamationTriangle"}),j.jsxRuntimeExports.jsx(L.Span,{className:$,children:"No results."})]}):l.map((n,m)=>j.jsxRuntimeExports.jsx(ve,{...n,id:n.value===p?r:void 0,isSelected:n.value===p,onSelect:u,onHover:d},P(n)+m)),t?j.jsxRuntimeExports.jsx(X.default,{as:"li",alignment:"center",className:K,children:j.jsxRuntimeExports.jsx(L.Span,{className:$,children:j.jsxRuntimeExports.jsx(ce.SkeletonInstance,{width:"100%",height:"1.3em"})})}):null]})}function be({isLoading:t,label:i,options:r,error:p,warning:l,information:u,footnote:d,className:x,onChange:n,onSelect:m,...h}){const R=o.useRef(null),C=o.useId(),q=o.useId(),[e,f]=o.useState(!1),b=o.useCallback(()=>{f(!0)},[]),g=o.useCallback(a=>{var c;(c=R.current)!=null&&c.contains(a.relatedTarget)||f(!1)},[]),[s,v]=o.useState(!1);o.useEffect(()=>{v(e)},[e]);const[k,w]=o.useState(""),{value:N}=h,[E,O]=o.useState(N),[A,Q]=o.useState(N),H=o.useRef(A),I=o.useCallback(a=>{Q(a),H.current=a},[]);o.useEffect(()=>{O(N),I(N)},[N,I]);const W=o.useCallback(()=>{E&&(w(""),I(void 0))},[E,I]),Z=o.useCallback((a,c)=>{w(a),n==null||n(a,c),v(!0),O(void 0)},[n]),ee=o.useCallback(a=>{var c;(c=R.current)!=null&&c.contains(a.target)&&v(!0)},[]),D=o.useCallback(a=>{const c=a==null?void 0:a.value;I(c),a?w(P(a)):(w(""),n==null||n("")),m==null||m(c)},[I,n,m]),te=o.useCallback(a=>{const c=r.find(y=>y.value===a);D(c),O(a),v(!1)},[r,D]),ne=o.useCallback(a=>{I(a)},[I]),S=o.useMemo(()=>E||k.length===0?r:r.filter(a=>{const y=P(a).toLowerCase(),_=k.toLowerCase();return!!(y.includes(_)||_.includes(y)||he.get(y,_,{useCollator:!0})<=2)}),[E,r,k]);o.useEffect(()=>{!E&&k.length>0&&S.length>0&&!S.some(a=>A===a.value)&&I(S[0].value)},[E,k,S,A,I]);const{setIsKeyboardNavigating:T}=J();o.useEffect(()=>{if(!e)return;const a=c=>{c.movementX===0&&c.movementY===0||T(!1)};return window.addEventListener("mousemove",a,{capture:!0}),()=>{window.removeEventListener("mousemove",a,{capture:!0})}},[e,T]),o.useEffect(()=>{if(!e)return;const a=c=>{let y;const _=S.length,z=S.findIndex(V=>V.value===H.current);switch(c.key){case"Enter":{const V=S[z];V&&(c.preventDefault(),c.stopPropagation(),c.stopImmediatePropagation(),T(!0),v(!1),D(V),O(V.value));break}case"Escape":{s?(E?I(void 0):D(void 0),v(!1)):E?(v(!0),D(void 0)):(f(!1),c.target instanceof HTMLInputElement&&c.target.blur());return}case"ArrowDown":{y=z+1,v(!0);break}case"ArrowUp":{y=z-1,v(!0),y<0&&(y=_-1);break}case"Home":{v(!0),y=0;break}case"End":{v(!0),y=_-1;break}case"Backspace":{S.some(V=>V.value===E)&&(c.preventDefault(),c.stopPropagation(),c.stopImmediatePropagation(),D(void 0),v(!0));break}}if(y!==void 0&&(c.preventDefault(),c.stopPropagation(),c.stopImmediatePropagation(),T(!0),_>0)){const V=S[y%_];V&&I(V.value)}};return window.addEventListener("keydown",a,{capture:!0}),()=>{window.removeEventListener("keydown",a,{capture:!0})}},[e,S,T,v,D,O,s,E,I]);const se=o.useMemo(()=>({clickOutsideDeactivates:!0,returnFocusOnDeactivate:!1,escapeDeactivates:!1}),[]);return j.jsxRuntimeExports.jsx(B.focusTrapReactExports.FocusTrap,{active:s,focusTrapOptions:se,children:j.jsxRuntimeExports.jsx(ae.default,{...h,ref:R,role:"combobox",autoComplete:"off","aria-controls":C,"aria-expanded":s,"aria-activedescendant":s?q:void 0,label:i,value:k,error:p,warning:l,information:u,footnote:d,attachments:s?j.jsxRuntimeExports.jsx(xe,{isLoading:t,id:C,activeOptionId:q,selectedValue:A,options:S,onSelect:te,onHover:ne}):null,className:x,onMouseDown:ee,onChange:Z,onBeforeInput:W,onFocus:b,onBlur:g})})}exports.default=be;exports.getComboboxOptionString=P;

package/build/components/combobox.mjs

@@ -0,0 +1,324 @@
+import { j as O } from "../jsx-runtime-B4hRZ52C.mjs";
+import { useRef as K, useId as G, useState as P, useCallback as E, useEffect as q, useMemo as B } from "react";
+import { g as ce, a as le, f as ue } from "../focus-trap-react-DATIi_Ob.mjs";
+import { cx as J } from "@kuma-ui/core";
+import { u as fe } from "../use-synchronized-value-XnIpeq1s.mjs";
+import de from "../icons/icon.mjs";
+import me from "./input.mjs";
+import { Span as H } from "./text.mjs";
+import Q from "./flex.mjs";
+import { SkeletonInstance as pe } from "./skeleton.mjs";
+var z = { exports: {} };
+const F = new Uint32Array(65536), he = (t, i) => {
+  const r = t.length, m = i.length, c = 1 << r - 1;
+  let l = -1, f = 0, v = r, n = r;
+  for (; n--; )
+    F[t.charCodeAt(n)] |= 1 << n;
+  for (n = 0; n < m; n++) {
+    let d = F[i.charCodeAt(n)];
+    const p = d | f;
+    d |= (d & l) + l ^ l, f |= ~(d | l), l &= d, f & c && v++, l & c && v--, f = f << 1 | 1, l = l << 1 | ~(p | f), f &= p;
+  }
+  for (n = r; n--; )
+    F[t.charCodeAt(n)] = 0;
+  return v;
+}, ve = (t, i) => {
+  const r = i.length, m = t.length, c = [], l = [], f = Math.ceil(r / 32), v = Math.ceil(m / 32);
+  for (let e = 0; e < f; e++)
+    l[e] = -1, c[e] = 0;
+  let n = 0;
+  for (; n < v - 1; n++) {
+    let e = 0, u = -1;
+    const g = n * 32, x = Math.min(32, m) + g;
+    for (let o = g; o < x; o++)
+      F[t.charCodeAt(o)] |= 1 << o;
+    for (let o = 0; o < r; o++) {
+      const h = F[i.charCodeAt(o)], b = l[o / 32 | 0] >>> o & 1, w = c[o / 32 | 0] >>> o & 1, S = h | e, I = ((h | w) & u) + u ^ u | h | w;
+      let N = e | ~(I | u), D = u & I;
+      N >>> 31 ^ b && (l[o / 32 | 0] ^= 1 << o), D >>> 31 ^ w && (c[o / 32 | 0] ^= 1 << o), N = N << 1 | b, D = D << 1 | w, u = D | ~(S | N), e = N & S;
+    }
+    for (let o = g; o < x; o++)
+      F[t.charCodeAt(o)] = 0;
+  }
+  let d = 0, p = -1;
+  const A = n * 32, V = Math.min(32, m - A) + A;
+  for (let e = A; e < V; e++)
+    F[t.charCodeAt(e)] |= 1 << e;
+  let M = m;
+  for (let e = 0; e < r; e++) {
+    const u = F[i.charCodeAt(e)], g = l[e / 32 | 0] >>> e & 1, x = c[e / 32 | 0] >>> e & 1, o = u | d, h = ((u | x) & p) + p ^ p | u | x;
+    let b = d | ~(h | p), w = p & h;
+    M += b >>> m - 1 & 1, M -= w >>> m - 1 & 1, b >>> 31 ^ g && (l[e / 32 | 0] ^= 1 << e), w >>> 31 ^ x && (c[e / 32 | 0] ^= 1 << e), b = b << 1 | g, w = w << 1 | x, p = w | ~(o | b), d = b & o;
+  }
+  for (let e = A; e < V; e++)
+    F[t.charCodeAt(e)] = 0;
+  return M;
+}, Z = (t, i) => {
+  if (t.length < i.length) {
+    const r = i;
+    i = t, t = r;
+  }
+  return i.length === 0 ? t.length : t.length <= 32 ? he(t, i) : ve(t, i);
+}, ge = (t, i) => {
+  let r = 1 / 0, m = 0;
+  for (let c = 0; c < i.length; c++) {
+    const l = Z(t, i[c]);
+    l < r && (r = l, m = c);
+  }
+  return i[m];
+}, xe = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  closest: ge,
+  distance: Z
+}, Symbol.toStringTag, { value: "Module" })), be = /* @__PURE__ */ ce(xe);
+var W;
+function we() {
+  return W || (W = 1, (function(t, i) {
+    (function() {
+      var r;
+      try {
+        r = typeof Intl < "u" && typeof Intl.Collator < "u" ? Intl.Collator("generic", { sensitivity: "base" }) : null;
+      } catch {
+        console.log("Collator could not be initialized and wouldn't be used");
+      }
+      var m = be, c = [], l = [], f = {
+        /**
+         * Calculate levenshtein distance of the two strings.
+         *
+         * @param str1 String the first string.
+         * @param str2 String the second string.
+         * @param [options] Additional options.
+         * @param [options.useCollator] Use `Intl.Collator` for locale-sensitive string comparison.
+         * @return Integer the levenshtein distance (0 and above).
+         */
+        get: function(v, n, d) {
+          var p = d && r && d.useCollator;
+          if (p) {
+            var A = v.length, V = n.length;
+            if (A === 0) return V;
+            if (V === 0) return A;
+            var M, e, u, g, x;
+            for (u = 0; u < V; ++u)
+              c[u] = u, l[u] = n.charCodeAt(u);
+            c[V] = V;
+            var o;
+            for (u = 0; u < A; ++u) {
+              for (e = u + 1, g = 0; g < V; ++g)
+                M = e, o = r.compare(v.charAt(u), String.fromCharCode(l[g])) === 0, e = c[g] + (o ? 0 : 1), x = M + 1, e > x && (e = x), x = c[g + 1] + 1, e > x && (e = x), c[g] = M;
+              c[g] = e;
+            }
+            return e;
+          }
+          return m.distance(v, n);
+        }
+      };
+      t !== null && t.exports === i ? t.exports = f : typeof self < "u" && typeof self.postMessage == "function" && typeof self.importScripts == "function" ? self.Levenshtein = f : typeof window < "u" && window !== null && (window.Levenshtein = f);
+    })();
+  })(z, z.exports)), z.exports;
+}
+var ke = we();
+const Ie = /* @__PURE__ */ le(ke);
+function ee() {
+  const {
+    value: t,
+    setValue: i
+  } = fe("isKeyboardNavigating");
+  return B(() => ({
+    isKeyboardNavigating: t,
+    setIsKeyboardNavigating: i
+  }), [t, i]);
+}
+function $(t) {
+  return "text" in t ? t.text : t.label;
+}
+const U = "kakadu-components-1144794361", X = "kakadu-components-2911184744";
+function ye({
+  isSelected: t,
+  id: i,
+  value: r,
+  label: m,
+  onSelect: c,
+  onHover: l
+}) {
+  const {
+    isKeyboardNavigating: f
+  } = ee(), v = E(() => {
+    c(r);
+  }, [c, r]), n = E((p) => {
+    f || p.movementX === 0 && p.movementY === 0 || l(r);
+  }, [f, l, r]), d = K(null);
+  return q(() => {
+    const p = d.current;
+    t && p && f && setTimeout(() => {
+      p.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest"
+      });
+    }, 0);
+  }, [t, f]), /* @__PURE__ */ O.jsx("li", { ref: d, id: i, role: "option", "aria-selected": t, tabIndex: -1, className: J(U, "kakadu-components-4130497639", f ? "kakadu-components-962373561" : "kakadu-components-1109598791"), onClick: v, onMouseMove: n, children: /* @__PURE__ */ O.jsx(H, { className: J(X, typeof m == "string" && "kakadu-components-154286052"), children: m }) });
+}
+function Oe({
+  isLoading: t,
+  id: i,
+  activeOptionId: r,
+  selectedValue: m,
+  options: c,
+  onSelect: l,
+  onHover: f
+}) {
+  const v = K(null);
+  return q(() => {
+    const n = v.current;
+    n && n.scrollIntoView({
+      behavior: "smooth",
+      block: "nearest"
+    });
+  }, []), /* @__PURE__ */ O.jsxs("ul", { ref: v, id: i, role: "listbox", "aria-label": "Options", className: "kakadu-components-1951042708", children: [
+    c.length === 0 ? t ? null : /* @__PURE__ */ O.jsxs(Q, { "aria-atomic": !0, as: "li", role: "status", "aria-live": "polite", direction: "row", preset: "start", gap: 0.5, className: U, children: [
+      /* @__PURE__ */ O.jsx(de, { size: 15, type: "exclamationTriangle" }),
+      /* @__PURE__ */ O.jsx(H, { className: X, children: "No results." })
+    ] }) : c.map((n, d) => /* @__PURE__ */ O.jsx(
+      ye,
+      {
+        ...n,
+        id: n.value === m ? r : void 0,
+        isSelected: n.value === m,
+        onSelect: l,
+        onHover: f
+      },
+      $(n) + d
+    )),
+    t ? /* @__PURE__ */ O.jsx(Q, { as: "li", alignment: "center", className: U, children: /* @__PURE__ */ O.jsx(H, { className: X, children: /* @__PURE__ */ O.jsx(pe, { width: "100%", height: "1.3em" }) }) }) : null
+  ] });
+}
+function Te({
+  isLoading: t,
+  label: i,
+  options: r,
+  error: m,
+  warning: c,
+  information: l,
+  footnote: f,
+  className: v,
+  onChange: n,
+  onSelect: d,
+  ...p
+}) {
+  const A = K(null), V = G(), M = G(), [e, u] = P(!1), g = E(() => {
+    u(!0);
+  }, []), x = E((s) => {
+    var a;
+    (a = A.current) != null && a.contains(s.relatedTarget) || u(!1);
+  }, []), [o, h] = P(!1);
+  q(() => {
+    h(e);
+  }, [e]);
+  const [b, w] = P(""), {
+    value: S
+  } = p, [I, N] = P(S), [D, te] = P(S), Y = K(D), y = E((s) => {
+    te(s), Y.current = s;
+  }, []);
+  q(() => {
+    N(S), y(S);
+  }, [S, y]);
+  const ne = E(() => {
+    I && (w(""), y(void 0));
+  }, [I, y]), oe = E((s, a) => {
+    w(s), n == null || n(s, a), h(!0), N(void 0);
+  }, [n]), re = E((s) => {
+    var a;
+    (a = A.current) != null && a.contains(s.target) && h(!0);
+  }, []), _ = E((s) => {
+    const a = s == null ? void 0 : s.value;
+    y(a), s ? w($(s)) : (w(""), n == null || n("")), d == null || d(a);
+  }, [y, n, d]), se = E((s) => {
+    const a = r.find((k) => k.value === s);
+    _(a), N(s), h(!1);
+  }, [r, _]), ae = E((s) => {
+    y(s);
+  }, [y]), j = B(() => I || b.length === 0 ? r : r.filter((s) => {
+    const k = $(s).toLowerCase(), T = b.toLowerCase();
+    return !!(k.includes(T) || T.includes(k) || Ie.get(k, T, {
+      useCollator: !0
+    }) <= 2);
+  }), [I, r, b]);
+  q(() => {
+    !I && b.length > 0 && j.length > 0 && !j.some((s) => D === s.value) && y(j[0].value);
+  }, [I, b, j, D, y]);
+  const {
+    setIsKeyboardNavigating: L
+  } = ee();
+  q(() => {
+    if (!e)
+      return;
+    const s = (a) => {
+      a.movementX === 0 && a.movementY === 0 || L(!1);
+    };
+    return window.addEventListener("mousemove", s, {
+      capture: !0
+    }), () => {
+      window.removeEventListener("mousemove", s, {
+        capture: !0
+      });
+    };
+  }, [e, L]), q(() => {
+    if (!e)
+      return;
+    const s = (a) => {
+      let k;
+      const T = j.length, R = j.findIndex((C) => C.value === Y.current);
+      switch (a.key) {
+        case "Enter": {
+          const C = j[R];
+          C && (a.preventDefault(), a.stopPropagation(), a.stopImmediatePropagation(), L(!0), h(!1), _(C), N(C.value));
+          break;
+        }
+        case "Escape": {
+          o ? (I ? y(void 0) : _(void 0), h(!1)) : I ? (h(!0), _(void 0)) : (u(!1), a.target instanceof HTMLInputElement && a.target.blur());
+          return;
+        }
+        case "ArrowDown": {
+          k = R + 1, h(!0);
+          break;
+        }
+        case "ArrowUp": {
+          k = R - 1, h(!0), k < 0 && (k = T - 1);
+          break;
+        }
+        case "Home": {
+          h(!0), k = 0;
+          break;
+        }
+        case "End": {
+          h(!0), k = T - 1;
+          break;
+        }
+        case "Backspace": {
+          j.some((C) => C.value === I) && (a.preventDefault(), a.stopPropagation(), a.stopImmediatePropagation(), _(void 0), h(!0));
+          break;
+        }
+      }
+      if (k !== void 0 && (a.preventDefault(), a.stopPropagation(), a.stopImmediatePropagation(), L(!0), T > 0)) {
+        const C = j[k % T];
+        C && y(C.value);
+      }
+    };
+    return window.addEventListener("keydown", s, {
+      capture: !0
+    }), () => {
+      window.removeEventListener("keydown", s, {
+        capture: !0
+      });
+    };
+  }, [e, j, L, h, _, N, o, I, y]);
+  const ie = B(() => ({
+    clickOutsideDeactivates: !0,
+    returnFocusOnDeactivate: !1,
+    escapeDeactivates: !1
+  }), []);
+  return /* @__PURE__ */ O.jsx(ue.FocusTrap, { active: o, focusTrapOptions: ie, children: /* @__PURE__ */ O.jsx(me, { ...p, ref: A, role: "combobox", autoComplete: "off", "aria-controls": V, "aria-expanded": o, "aria-activedescendant": o ? M : void 0, label: i, value: b, error: m, warning: c, information: l, footnote: f, attachments: o ? /* @__PURE__ */ O.jsx(Oe, { isLoading: t, id: V, activeOptionId: M, selectedValue: D, options: j, onSelect: se, onHover: ae }) : null, className: v, onMouseDown: re, onChange: oe, onBeforeInput: ne, onFocus: g, onBlur: x }) });
+}
+export {
+  Te as default,
+  $ as getComboboxOptionString
+};

package/build/components/input.d.ts

@@ -1,45 +1,38 @@
 import { type ChangeEvent, type HTMLProps, type ReactNode } from 'react';
 import { type IconType } from '../icons/icon';
+export declare const inputStyles: string;
 export declare const errorParagraph: string;
-type LabelMessageType = Error | ReactNode | string;
-type LabelMessageProperties<Key extends string> = ({
+type InputLabelMessageType = Error | ReactNode | string;
+type InputLabelMessageProperties<Key extends string> = ({
     readonly [Property in Key]?: undefined;
 } & {
     readonly [Property in `${Key}Id`]?: undefined;
 }) | ({
-    readonly [Property in Key]: LabelMessageType;
+    readonly [Property in Key]: InputLabelMessageType;
 } & {
     readonly [Property in `${Key}Id`]: string;
 });
-type LabelProperties = HTMLProps<HTMLLabelElement> & LabelMessageProperties<'error'> & LabelMessageProperties<'warning'> & LabelMessageProperties<'information'> & {
+type InputLabelProperties = HTMLProps<HTMLLabelElement> & InputLabelMessageProperties<'error'> & InputLabelMessageProperties<'warning'> & InputLabelMessageProperties<'information'> & {
     readonly label: string;
     readonly footnote?: ReactNode;
     readonly attachments?: ReactNode;
 };
-type ControllerProperties = Omit<LabelProperties, 'errorId' | 'warningId' | 'attachments'>;
-export type SelectOption<Type extends string = string> = {
-    readonly value: Type;
-    readonly label: ReactNode | string;
-    readonly disabled?: boolean;
-};
-export type SelectProperties<Type extends string = string> = Omit<ControllerProperties & HTMLProps<HTMLSelectElement>, 'onChange'> & {
-    readonly options: Array<SelectOption<Type>>;
-    readonly onChange?: (value: Type, event: ChangeEvent<HTMLSelectElement>) => void;
-};
-export declare function Select<Type extends string = string>({ label, options, error, warning, information, footnote, className, onChange, ...properties }: SelectProperties<Type>): import("react/jsx-runtime").JSX.Element;
-type InputType = HTMLInputElement | HTMLTextAreaElement;
+export declare function InputLabel({ label, error, errorId, warning, warningId, information, informationId, footnote, attachments, className, children, ...properties }: InputLabelProperties): import("react/jsx-runtime").JSX.Element;
+export type InputLabelControllerProperties = Omit<InputLabelProperties, 'errorId' | 'warningId' | 'attachments' | 'onClick' | 'onMouseDown' | 'onMouseUp' | 'onChange' | 'onFocus' | 'onBlur' | 'onInput' | 'onBeforeInput'>;
+export type InputType = HTMLInputElement | HTMLTextAreaElement;
 export type InputAction = {
     icon: IconType;
     label: string;
     onClick: () => void;
 };
-export type InputProperties = Omit<ControllerProperties & HTMLProps<InputType>, 'onChange'> & {
+export type InputProperties = Omit<InputLabelControllerProperties & Omit<HTMLProps<InputType>, 'ref'>, 'onChange'> & {
     readonly suggestion?: string;
+    readonly attachments?: ReactNode;
     readonly actions?: InputAction[];
     readonly hasCopyButton?: boolean;
     readonly hasClearButton?: boolean;
     readonly isMultiline?: boolean;
     readonly onChange?: (value: string, event: ChangeEvent<InputType>) => void;
 };
-export default function Input({ type, label, error, warning, information, footnote, suggestion, actions, hasCopyButton, hasClearButton, isMultiline, onChange, className, ...properties }: InputProperties): import("react/jsx-runtime").JSX.Element;
+export default function Input({ ref, type, label, error, warning, information, footnote, suggestion, attachments, actions, hasCopyButton, hasClearButton, isMultiline, onChange, className, ...properties }: InputProperties): import("react/jsx-runtime").JSX.Element;
 export {};

package/build/components/input.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../jsx-runtime-BB_1_6y_.js"),t=require("react"),r=require("@kuma-ui/core"),ue=require("../icons/chevron-up.js"),J=require("../utilities/copy-to-clipboard.js"),H=require("../theme.js"),xe=require("../icons/sparkle.js"),de=require("./button-tooltip.js"),T=require("./text-button.js"),y=require("./text.js"),pe=require("./collapsible.js"),K=require("./click-ripples.js"),Q=require("./hover-gradient.js"),me=require("./notification.js"),je="kakadu-components-922159086",ke="kakadu-components-25448712",_="kakadu-components-1923392328",A="kakadu-components-4056037255",X=r.cx(A,"kakadu-components-3245407458"),fe=r.cx(A,"kakadu-components-1117160492"),he=r.cx(A,"kakadu-components-2261792866");function Ee({as:f,className:i,...d}){return e.jsxRuntimeExports.jsx(y.Span,{as:f??"span",...d,className:r.cx("kakadu-components-520991867",i)})}function Y({label:f,error:i,errorId:d,warning:u,warningId:R,information:h,informationId:s,footnote:c,attachments:E,className:p,children:g,...m}){const j=!!i,l=!!u,k=!!h,b=!!c;return e.jsxRuntimeExports.jsx("label",{...m,className:r.cx(je,p),children:e.jsxRuntimeExports.jsxs("div",{className:"kakadu-components-3146929190",children:[e.jsxRuntimeExports.jsx(y.Span,{className:r.cx(H.overflowProtectionStyles,ke),children:e.jsxRuntimeExports.jsx("span",{children:f})}),e.jsxRuntimeExports.jsxs("span",{className:"kakadu-components-3298764637",children:[g,b?e.jsxRuntimeExports.jsx(Ee,{className:"kakadu-components-613632806",children:c}):null,E]}),j||l||k?e.jsxRuntimeExports.jsx("div",{className:"kakadu-components-2927674627",children:j?e.jsxRuntimeExports.jsx(y.Paragraph,{id:d,className:X,children:i instanceof Error?i.message:i}):l?e.jsxRuntimeExports.jsx(y.Paragraph,{id:R,className:fe,children:u instanceof Error?u.message:u}):k?e.jsxRuntimeExports.jsx(y.Paragraph,{id:s,className:he,children:h instanceof Error?h.message:h}):null}):null]})})}function Re({label:f,options:i,error:d,warning:u,information:R,footnote:h,className:s,onChange:c,...E}){const p=t.useId(),g=`${p}-error`,m=`${p}-warning`,j=`${p}-information`,l=!!d,k=!l&&!!u,b=!l&&!k&&!!R,N=l?g:k?m:b?j:void 0,{value:v}=E,[S,I]=t.useState(""),q=v??S;t.useEffect(()=>{I(typeof v=="string"?v:"")},[v]);const C=t.useCallback(n=>{const{value:B}=n.target;I(B),c==null||c(B,n)},[c]);return e.jsxRuntimeExports.jsxs(Y,{label:f,error:d,errorId:g,warning:u,warningId:m,information:R,informationId:j,footnote:h,children:[e.jsxRuntimeExports.jsx("select",{...E,value:q,"aria-invalid":l,"data-warning":k,"data-information":b,"aria-describedby":N,className:r.cx(_,"kakadu-components-4228384787",s),onChange:C,children:i.map(n=>e.jsxRuntimeExports.jsx("option",{value:n.value,disabled:n.disabled,children:n.label},n.value))}),e.jsxRuntimeExports.jsx(ue.default,{width:14,height:14,className:"kakadu-components-158931186"})]})}const be=40,V="kakadu-components-4233741488";function ve({type:f,label:i,error:d,warning:u,information:R,footnote:h,suggestion:s,actions:c=[],hasCopyButton:E,hasClearButton:p,isMultiline:g,onChange:m,className:j,...l}){const k=t.useRef(null),b=t.useRef(null),N=t.useRef(null),v=me.useCreateNotification(),S=t.useId(),I=`${S}-error`,q=`${S}-warning`,C=`${S}-information`,{value:n,disabled:B}=l,[Z,F]=t.useState(""),x=n??Z,[ee,te]=t.useState(),se=f==="textarea"||!!g;t.useLayoutEffect(()=>{typeof x=="string"&&N.current&&te(N.current.scrollHeight)},[x]);const $=t.useMemo(()=>typeof x=="string"?`${x} `.split(`
-`):[],[x]),ne=t.useMemo(()=>$.length,[$]),P=!!d,M=!P&&!!u,L=!!R,O=P?I:M?q:L?C:void 0;t.useEffect(()=>{F(typeof n=="string"?n:"")},[n]);const W=t.useCallback(a=>{const{value:o}=a.target;F(o),m==null||m(o,a)},[m]),ae=t.useCallback(()=>{typeof x=="string"&&(J.default(x),v({type:"success",children:"Copied to clipboard."}))},[x,v]),w=t.useCallback(a=>{var D;const o=b.current??k.current??void 0;if(o){const G=(D=Object.getOwnPropertyDescriptor(o instanceof HTMLTextAreaElement?HTMLTextAreaElement.prototype:HTMLInputElement.prototype,"value"))==null?void 0:D.set;if(G){G.call(o,a);const ie=new Event("input",{bubbles:!0});o.dispatchEvent(ie),o.focus();return}}throw new Error("Unable to set value.")},[]),oe=t.useCallback(()=>{w("")},[w]),[ce,le]=t.useState(""),U=!!s&&ce!==s,re=t.useCallback(()=>{if(s){try{w(s)}catch{J.default(s)}le(s)}},[s,w]),z=t.useMemo(()=>c.length,[c]);return e.jsxRuntimeExports.jsxs(Y,{label:i,error:d,errorId:I,warning:u,warningId:q,information:R,informationId:C,footnote:h,attachments:e.jsxRuntimeExports.jsx(pe.default,{isCollapsed:!U,children:U?e.jsxRuntimeExports.jsxs("button",{type:"button",className:r.cx(H.buttonResetStyles,H.overflowProtectionStyles,"kakadu-components-2355856341"),onClick:re,children:[e.jsxRuntimeExports.jsx(de.default,{label:"Apply suggestion"}),e.jsxRuntimeExports.jsx(xe.default,{width:13,height:13,className:"kakadu-components-1021263934"}),e.jsxRuntimeExports.jsx(y.Span,{className:"kakadu-components-1585874956",children:s}),e.jsxRuntimeExports.jsx(K.default,{className:"kakadu-components-3448565402"}),e.jsxRuntimeExports.jsx(Q.default,{})]}):null}),style:{"--button-padding":`calc(${be*((E?1:0)+(p?1:0)+z)}px + 6px)`},children:[e.jsxRuntimeExports.jsxs("div",{className:"kakadu-components-3146929190",children:[se?e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsxs("span",{ref:N,"aria-hidden":!0,className:r.cx(_,j,"kakadu-components-2033521835"),children:[$.map((a,o)=>e.jsxRuntimeExports.jsxs("span",{children:[a,ne>1?e.jsxRuntimeExports.jsx("br",{}):null]},o))," "]}),e.jsxRuntimeExports.jsx("textarea",{...l,ref:b,rows:1,"aria-invalid":P,"data-warning":M,"data-information":L,"aria-describedby":O,value:x,className:r.cx(_,j,"kakadu-components-2119524139"),style:{minHeight:ee},onChange:W})]}):e.jsxRuntimeExports.jsx("input",{...l,ref:k,type:f??"text",value:x,"aria-invalid":P,"data-warning":M,"data-information":L,"aria-describedby":O,className:r.cx(_,j),onChange:W}),B?null:e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx(K.default,{className:"kakadu-components-616311160"}),e.jsxRuntimeExports.jsx(Q.default,{className:"kakadu-components-1962999040"})]})]}),E||p||z>0?e.jsxRuntimeExports.jsxs("div",{className:"kakadu-components-131986363",children:[c.map((a,o)=>e.jsxRuntimeExports.jsx(T.default,{iconLeft:a.icon,label:a.label,tooltip:a.label,className:V,onClick:a.onClick},a.label+o)),E?e.jsxRuntimeExports.jsx(T.default,{iconLeft:"copy",label:"Copy",tooltip:"Copy",className:V,onClick:ae}):null,p?e.jsxRuntimeExports.jsx(T.default,{iconLeft:"times",label:"Clear",tooltip:"Clear",className:V,onClick:oe}):null]}):null]})}exports.Select=Re;exports.default=ve;exports.errorParagraph=X;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../jsx-runtime-BB_1_6y_.js"),t=require("react"),r=require("@kuma-ui/core"),K=require("../utilities/copy-to-clipboard.js"),L=require("../theme.js"),pe=require("../icons/sparkle.js"),me=require("./button-tooltip.js"),B=require("./text-button.js"),p=require("./text.js"),de=require("./collapsible.js"),Q=require("./click-ripples.js"),X=require("./hover-gradient.js"),je=require("./notification.js"),ke="kakadu-components-922159086",fe="kakadu-components-25448712",N="kakadu-components-1923392328",M="kakadu-components-4056037255",Y=r.cx(M,"kakadu-components-3245407458"),he=r.cx(M,"kakadu-components-1117160492"),Ee=r.cx(M,"kakadu-components-2261792866");function Re({as:m,className:c,...d}){return e.jsxRuntimeExports.jsx(p.Span,{as:m??"span",...d,className:r.cx("kakadu-components-520991867",c)})}function Z({label:m,error:c,errorId:d,warning:l,warningId:E,information:i,informationId:v,footnote:a,attachments:S,className:j,children:k,...f}){const R=!!c,u=!!l,x=!!i,h=!!a;return e.jsxRuntimeExports.jsx("label",{...f,className:r.cx(ke,j),children:e.jsxRuntimeExports.jsxs("div",{className:"kakadu-components-3146929190",children:[e.jsxRuntimeExports.jsx(p.Span,{className:r.cx(L.overflowProtectionStyles,fe),children:e.jsxRuntimeExports.jsx("span",{children:m})}),e.jsxRuntimeExports.jsxs("span",{className:"kakadu-components-3298764637",children:[k,h?e.jsxRuntimeExports.jsx(Re,{className:"kakadu-components-613632806",children:a}):null,S]}),R||u||x?e.jsxRuntimeExports.jsx("div",{className:"kakadu-components-2927674627",children:R?e.jsxRuntimeExports.jsx(p.Paragraph,{id:d,className:Y,children:c instanceof Error?c.message:c}):u?e.jsxRuntimeExports.jsx(p.Paragraph,{id:E,className:he,children:l instanceof Error?l.message:l}):x?e.jsxRuntimeExports.jsx(p.Paragraph,{id:v,className:Ee,children:i instanceof Error?i.message:i}):null}):null]})})}const be=40,w="kakadu-components-4233741488";function ge({ref:m,type:c,label:d,error:l,warning:E,information:i,footnote:v,suggestion:a,attachments:S,actions:j=[],hasCopyButton:k,hasClearButton:f,isMultiline:R,onChange:u,className:x,...h}){const T=t.useRef(null),$=t.useRef(null),C=t.useRef(null),H=je.useCreateNotification(),q=t.useId(),A=`${q}-error`,F=`${q}-warning`,V=`${q}-information`,{value:b,disabled:ee}=h,[te,O]=t.useState(""),o=b??te,[se,ne]=t.useState(),ae=c==="textarea"||!!R;t.useLayoutEffect(()=>{typeof o=="string"&&C.current&&ne(C.current.scrollHeight)},[o]);const I=t.useMemo(()=>typeof o=="string"?`${o} `.split(`
+`):[],[o]),oe=t.useMemo(()=>I.length,[I]),g=!!l,P=!g&&!!E,_=!!i,W=g?A:P?F:_?V:void 0;t.useEffect(()=>{O(typeof b=="string"?b:"")},[b]);const z=t.useCallback(s=>{const{value:n}=s.target;O(n),u==null||u(n,s)},[u]),re=t.useCallback(()=>{typeof o=="string"&&(K.default(o),H({type:"success",children:"Copied to clipboard."}))},[o,H]),y=t.useCallback(s=>{var U;const n=$.current??T.current??void 0;if(n){const J=(U=Object.getOwnPropertyDescriptor(n instanceof HTMLTextAreaElement?HTMLTextAreaElement.prototype:HTMLInputElement.prototype,"value"))==null?void 0:U.set;if(J){J.call(n,s);const xe=new Event("input",{bubbles:!0});n.dispatchEvent(xe),n.focus();return}}throw new Error("Unable to set value.")},[]),ce=t.useCallback(()=>{y("")},[y]),[le,ie]=t.useState(""),D=!!a&&le!==a,ue=t.useCallback(()=>{if(a){try{y(a)}catch{K.default(a)}ie(a)}},[a,y]),G=t.useMemo(()=>j.length,[j]);return e.jsxRuntimeExports.jsxs(Z,{ref:m,label:d,error:l,errorId:A,warning:E,warningId:F,information:i,informationId:V,footnote:v,attachments:e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx(de.default,{isCollapsed:!D,children:D?e.jsxRuntimeExports.jsxs("button",{type:"button",className:r.cx(L.buttonResetStyles,L.overflowProtectionStyles,"kakadu-components-4141839293"),onClick:ue,children:[e.jsxRuntimeExports.jsx(me.default,{label:"Apply suggestion"}),e.jsxRuntimeExports.jsx(pe.default,{width:13,height:13,className:"kakadu-components-1417828741"}),e.jsxRuntimeExports.jsx(p.Span,{className:"kakadu-components-1384720019",children:a}),e.jsxRuntimeExports.jsx(Q.default,{className:"kakadu-components-2744733744"}),e.jsxRuntimeExports.jsx(X.default,{})]}):null}),S]}),style:{"--button-padding":`calc(${be*((k?1:0)+(f?1:0)+G)}px + 6px)`},children:[e.jsxRuntimeExports.jsxs("div",{className:"kakadu-components-3146929190",children:[ae?e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsxs("span",{ref:C,"aria-hidden":!0,className:r.cx(N,x,"kakadu-components-2033521835"),children:[I.map((s,n)=>e.jsxRuntimeExports.jsxs("span",{children:[s,oe>1?e.jsxRuntimeExports.jsx("br",{}):null]},n))," "]}),e.jsxRuntimeExports.jsx("textarea",{...h,ref:$,rows:1,"aria-invalid":g,"data-warning":P,"data-information":_,"aria-describedby":W,value:o,className:r.cx(N,x,"kakadu-components-2119524139"),style:{minHeight:se},onChange:z})]}):e.jsxRuntimeExports.jsx("input",{...h,ref:T,type:c??"text",value:o,"aria-invalid":g,"data-warning":P,"data-information":_,"aria-describedby":W,className:r.cx(N,x),onChange:z}),ee?null:e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx(Q.default,{className:"kakadu-components-616311160"}),e.jsxRuntimeExports.jsx(X.default,{className:"kakadu-components-1962999040"})]})]}),k||f||G>0?e.jsxRuntimeExports.jsxs("div",{className:"kakadu-components-131986363",children:[j.map((s,n)=>e.jsxRuntimeExports.jsx(B.default,{iconLeft:s.icon,label:s.label,tooltip:s.label,className:w,onClick:s.onClick},s.label+n)),k?e.jsxRuntimeExports.jsx(B.default,{iconLeft:"copy",label:"Copy",tooltip:"Copy",className:w,onClick:re}):null,f?e.jsxRuntimeExports.jsx(B.default,{iconLeft:"times",label:"Clear",tooltip:"Clear",className:w,onClick:ce}):null]}):null]})}exports.InputLabel=Z;exports.default=ge;exports.errorParagraph=Y;exports.inputStyles=N;