@kakadu/components 4.0.8 → 4.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/components/combobox.js +1 -1
- package/build/components/combobox.mjs +165 -156
- package/build/components/flex.d.ts +4 -1
- package/build/components/flex.js +1 -1
- package/build/components/flex.mjs +54 -26
- package/build/components/popover-menu.js +1 -1
- package/build/components/popover-menu.mjs +1 -1
- package/build/components.css +1 -1
- package/build/hooks/use-media-query.d.ts +1 -0
- package/build/hooks/use-synchronized-value.d.ts +1 -0
- package/build/hooks/use-synchronized-value.js +1 -0
- package/build/{use-synchronized-value-XnIpeq1s.mjs → hooks/use-synchronized-value.mjs} +8 -8
- package/build/hooks/use-throttled.d.ts +2 -0
- package/build/hooks/use-throttled.js +1 -0
- package/build/hooks/use-throttled.mjs +16 -0
- package/build/index.d.ts +6 -2
- package/build/index.js +1 -1
- package/build/index.mjs +36 -32
- package/package.json +1 -1
- package/build/use-synchronized-value-D0_rS5Wp.js +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const C=require("../jsx-runtime-BB_1_6y_.js"),o=require("react"),Q=require("../_commonjsHelpers-DGT2Y9Xa.js"),B=require("@kuma-ui/core"),ce=require("../hooks/use-synchronized-value.js"),ae=require("../icons/icon.js"),le=require("../icons/chevron-up.js"),ie=require("./input.js"),H=require("./text.js"),G=require("./flex.js"),ue=require("./skeleton.js");var K={exports:{}};const N=new Uint32Array(65536),fe=(t,a)=>{const r=t.length,m=a.length,l=1<<r-1;let i=-1,f=0,x=r,n=r;for(;n--;)N[t.charCodeAt(n)]|=1<<n;for(n=0;n<m;n++){let d=N[a.charCodeAt(n)];const v=d|f;d|=(d&i)+i^i,f|=~(d|i),i&=d,f&l&&x++,i&l&&x--,f=f<<1|1,i=i<<1|~(v|f),f&=v}for(n=r;n--;)N[t.charCodeAt(n)]=0;return x},de=(t,a)=>{const r=a.length,m=t.length,l=[],i=[],f=Math.ceil(r/32),x=Math.ceil(m/32);for(let e=0;e<f;e++)i[e]=-1,l[e]=0;let n=0;for(;n<x-1;n++){let e=0,u=-1;const b=n*32,k=Math.min(32,m)+b;for(let s=b;s<k;s++)N[t.charCodeAt(s)]|=1<<s;for(let s=0;s<r;s++){const p=N[a.charCodeAt(s)],q=i[s/32|0]>>>s&1,g=l[s/32|0]>>>s&1,A=p|e,j=((p|g)&u)+u^u|p|g;let S=e|~(j|u),_=u&j;S>>>31^q&&(i[s/32|0]^=1<<s),_>>>31^g&&(l[s/32|0]^=1<<s),S=S<<1|q,_=_<<1|g,u=_|~(A|S),e=S&A}for(let s=b;s<k;s++)N[t.charCodeAt(s)]=0}let d=0,v=-1;const y=n*32,R=Math.min(32,m-y)+y;for(let e=y;e<R;e++)N[t.charCodeAt(e)]|=1<<e;let V=m;for(let e=0;e<r;e++){const u=N[a.charCodeAt(e)],b=i[e/32|0]>>>e&1,k=l[e/32|0]>>>e&1,s=u|d,p=((u|k)&v)+v^v|u|k;let q=d|~(p|v),g=v&p;V+=q>>>m-1&1,V-=g>>>m-1&1,q>>>31^b&&(i[e/32|0]^=1<<e),g>>>31^k&&(l[e/32|0]^=1<<e),q=q<<1|b,g=g<<1|k,v=g|~(s|q),d=q&s}for(let e=y;e<R;e++)N[t.charCodeAt(e)]=0;return V},W=(t,a)=>{if(t.length<a.length){const r=a;a=t,t=r}return a.length===0?t.length:t.length<=32?fe(t,a):de(t,a)},me=(t,a)=>{let r=1/0,m=0;for(let l=0;l<a.length;l++){const i=W(t,a[l]);i<r&&(r=i,m=l)}return a[m]},he=Object.freeze(Object.defineProperty({__proto__:null,closest:me,distance:W},Symbol.toStringTag,{value:"Module"})),ve=Q.getAugmentedNamespace(he);var J;function pe(){return J||(J=1,(function(t,a){(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=ve,l=[],i=[],f={get:function(x,n,d){var v=d&&r&&d.useCollator;if(v){var y=x.length,R=n.length;if(y===0)return R;if(R===0)return y;var V,e,u,b,k;for(u=0;u<R;++u)l[u]=u,i[u]=n.charCodeAt(u);l[R]=R;var s;for(u=0;u<y;++u){for(e=u+1,b=0;b<R;++b)V=e,s=r.compare(x.charAt(u),String.fromCharCode(i[b]))===0,e=l[b]+(s?0:1),k=V+1,e>k&&(e=k),k=l[b+1]+1,e>k&&(e=k),l[b]=V;l[b]=e}return e}return m.distance(x,n)}};t!==null&&t.exports===a?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)})()})(K,K.exports)),K.exports}var xe=pe();const be=Q.getDefaultExportFromCjs(xe);function Z(){const{value:t,setValue:a}=ce.default("isKeyboardNavigating");return o.useMemo(()=>({isKeyboardNavigating:t,setIsKeyboardNavigating:a}),[t,a])}function T(t){return"text"in t?t.text:t.label}const P="kakadu-components-1144794361",U="kakadu-components-2911184744";function ke({isSelected:t,id:a,value:r,label:m,onSelect:l,onHover:i}){const{isKeyboardNavigating:f}=Z(),x=o.useCallback(()=>{l(r)},[l,r]),n=o.useCallback(v=>{f||v.movementX===0&&v.movementY===0||i(r)},[f,i,r]),d=o.useRef(null);return o.useEffect(()=>{const v=d.current;t&&v&&f&&setTimeout(()=>{v.scrollIntoView({behavior:"smooth",block:"nearest"})},0)},[t,f]),C.jsxRuntimeExports.jsx("li",{ref:d,id:a,role:"option","aria-selected":t,tabIndex:-1,className:B.cx(P,"kakadu-components-4130497639",f?"kakadu-components-962373561":"kakadu-components-1109598791"),onClick:x,onMouseMove:n,children:C.jsxRuntimeExports.jsx(H.Span,{className:B.cx(U,typeof m=="string"&&"kakadu-components-154286052"),children:m})})}function ge({isLoading:t,id:a,activeOptionId:r,selectedValue:m,options:l,onSelect:i,onHover:f}){const x=o.useRef(null);return o.useEffect(()=>{const n=x.current;n&&n.scrollIntoView({behavior:"smooth",block:"nearest"})},[]),C.jsxRuntimeExports.jsxs("ul",{ref:x,id:a,role:"listbox","aria-label":"Options",tabIndex:-1,className:"kakadu-components-1951042708",children:[l.length===0?t?null:C.jsxRuntimeExports.jsxs(G.default,{"aria-atomic":!0,as:"li",role:"status","aria-live":"polite",direction:"row",preset:"start",gap:.5,className:P,children:[C.jsxRuntimeExports.jsx(ae.default,{size:15,type:"exclamationTriangle"}),C.jsxRuntimeExports.jsx(H.Span,{className:U,children:"No results."})]}):l.map((n,d)=>C.jsxRuntimeExports.jsx(ke,{...n,id:n.value===m?r:void 0,isSelected:n.value===m,onSelect:i,onHover:f},T(n)+d)),t?C.jsxRuntimeExports.jsx(G.default,{as:"li",alignment:"center",className:P,children:C.jsxRuntimeExports.jsx(H.Span,{className:U,children:C.jsxRuntimeExports.jsx(ue.SkeletonInstance,{width:"100%",height:"1.3em"})})}):null]})}function we({isLoading:t,label:a,options:r,error:m,warning:l,information:i,footnote:f,className:x,onChange:n,onSelect:d,...v}){const y=o.useRef(null),R=o.useId(),V=o.useId(),[e,u]=o.useState(!1),b=o.useCallback(()=>{u(!0)},[]),k=o.useCallback(c=>{var h;(h=y.current)!=null&&h.contains(c.relatedTarget)||u(!1)},[]),[s,p]=o.useState(!1);o.useEffect(()=>{p(e)},[e]);const[q,g]=o.useState(""),{value:A}=v,[j,S]=o.useState(A),[_,ee]=o.useState(A),X=o.useRef(_),I=o.useCallback(c=>{ee(c),X.current=c},[]);o.useEffect(()=>{S(A),I(A)},[A,I]);const te=o.useCallback(()=>{j&&(g(""),I(void 0))},[j,I]),ne=o.useCallback((c,h)=>{g(c),n==null||n(c,h),p(!0),S(void 0)},[n]),se=o.useCallback(c=>{var h;(h=y.current)!=null&&h.contains(c.target)&&p(!0)},[]),L=o.useCallback(c=>{const h=c==null?void 0:c.value;I(h),c?g(T(c)):(g(""),n==null||n("")),d==null||d(h)},[I,n,d]),oe=o.useCallback(c=>{const h=r.find(w=>w.value===c);L(h),S(c),p(!1)},[r,L]),re=o.useCallback(c=>{I(c)},[I]),D=o.useDeferredValue(q),O=o.useMemo(()=>j||D.length===0?r:r.filter(c=>{const w=T(c).toLowerCase(),M=D.toLowerCase();return!!(w.includes(M)||M.includes(w)||be.get(w,M,{useCollator:!0})<=2)}),[j,r,D]);o.useEffect(()=>{!j&&D.length>0&&O.length>0&&!O.some(c=>_===c.value)&&I(O[0].value)},[j,D,O,_,I]);const{setIsKeyboardNavigating:F}=Z();return o.useEffect(()=>{if(!e)return;const c=h=>{h.movementX===0&&h.movementY===0||F(!1)};return window.addEventListener("mousemove",c,{capture:!0}),()=>{window.removeEventListener("mousemove",c,{capture:!0})}},[e,F]),o.useEffect(()=>{if(!e)return;const c=h=>{var Y;let w;const M=O.length,$=O.findIndex(E=>E.value===X.current),z=()=>{h.preventDefault(),h.stopPropagation(),h.stopImmediatePropagation()};switch(h.key){case"Enter":{const E=O[$];E&&(z(),F(!0),p(!1),L(E),S(E.value));break}case"Escape":{if(s)z(),j?I(void 0):L(void 0),p(!1);else if(j)z(),p(!0),L(void 0);else{z(),u(!1);const E=document.activeElement;E instanceof HTMLElement&&((Y=y.current)!=null&&Y.contains(E))&&E.blur()}return}case"ArrowDown":{w=$+1,p(!0);break}case"ArrowUp":{w=$-1,p(!0),w<0&&(w=M-1);break}case"Home":{p(!0),w=0;break}case"End":{p(!0),w=M-1;break}case"Backspace":{O.some(E=>E.value===j)&&(z(),L(void 0),p(!0));break}}if(w!==void 0&&(z(),F(!0),M>0)){const E=O[w%M];E&&I(E.value)}};return window.addEventListener("keydown",c,{capture:!0}),()=>{window.removeEventListener("keydown",c,{capture:!0})}},[e,O,F,p,L,S,s,j,I]),C.jsxRuntimeExports.jsx(ie.default,{...v,ref:y,role:"combobox",autoComplete:"off","aria-controls":R,"aria-expanded":s,"aria-activedescendant":s?V:void 0,label:a,value:q,error:m,warning:l,information:i,footnote:f,attachments:s?C.jsxRuntimeExports.jsx(ge,{isLoading:t,id:R,activeOptionId:V,selectedValue:_,options:O,onSelect:oe,onHover:re}):null,className:B.cx(x,"kakadu-components-879486679"),onMouseDown:se,onChange:ne,onBeforeInput:te,onFocus:b,onBlur:k,children:C.jsxRuntimeExports.jsx(le.default,{width:14,height:14,className:"kakadu-components-158931186"})})}exports.default=we;exports.getComboboxOptionString=T;
|
|
@@ -1,80 +1,80 @@
|
|
|
1
1
|
import { j as N } from "../jsx-runtime-B4hRZ52C.mjs";
|
|
2
|
-
import { useRef as
|
|
3
|
-
import { g as
|
|
4
|
-
import { cx as
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import { Span as
|
|
10
|
-
import
|
|
11
|
-
import { SkeletonInstance as
|
|
12
|
-
var
|
|
13
|
-
const _ = new Uint32Array(65536),
|
|
14
|
-
const r = t.length,
|
|
15
|
-
let
|
|
2
|
+
import { useRef as H, useId as W, useState as R, useCallback as M, useEffect as z, useDeferredValue as ue, useMemo as te } from "react";
|
|
3
|
+
import { g as fe, a as de } from "../_commonjsHelpers-MdHo5S7N.mjs";
|
|
4
|
+
import { cx as U } from "@kuma-ui/core";
|
|
5
|
+
import me from "../hooks/use-synchronized-value.mjs";
|
|
6
|
+
import he from "../icons/icon.mjs";
|
|
7
|
+
import ve from "../icons/chevron-up.mjs";
|
|
8
|
+
import pe from "./input.mjs";
|
|
9
|
+
import { Span as $ } from "./text.mjs";
|
|
10
|
+
import Z from "./flex.mjs";
|
|
11
|
+
import { SkeletonInstance as ge } from "./skeleton.mjs";
|
|
12
|
+
var T = { exports: {} };
|
|
13
|
+
const _ = new Uint32Array(65536), xe = (t, a) => {
|
|
14
|
+
const r = t.length, d = a.length, c = 1 << r - 1;
|
|
15
|
+
let i = -1, u = 0, p = r, n = r;
|
|
16
16
|
for (; n--; )
|
|
17
17
|
_[t.charCodeAt(n)] |= 1 << n;
|
|
18
|
-
for (n = 0; n <
|
|
19
|
-
let
|
|
20
|
-
const h =
|
|
21
|
-
|
|
18
|
+
for (n = 0; n < d; n++) {
|
|
19
|
+
let f = _[a.charCodeAt(n)];
|
|
20
|
+
const h = f | u;
|
|
21
|
+
f |= (f & i) + i ^ i, u |= ~(f | i), i &= f, u & c && p++, i & c && p--, u = u << 1 | 1, i = i << 1 | ~(h | u), u &= h;
|
|
22
22
|
}
|
|
23
23
|
for (n = r; n--; )
|
|
24
24
|
_[t.charCodeAt(n)] = 0;
|
|
25
25
|
return p;
|
|
26
|
-
},
|
|
27
|
-
const r = a.length,
|
|
26
|
+
}, be = (t, a) => {
|
|
27
|
+
const r = a.length, d = t.length, c = [], i = [], u = Math.ceil(r / 32), p = Math.ceil(d / 32);
|
|
28
28
|
for (let e = 0; e < u; e++)
|
|
29
|
-
|
|
29
|
+
i[e] = -1, c[e] = 0;
|
|
30
30
|
let n = 0;
|
|
31
31
|
for (; n < p - 1; n++) {
|
|
32
32
|
let e = 0, l = -1;
|
|
33
|
-
const g = n * 32, x = Math.min(32,
|
|
33
|
+
const g = n * 32, x = Math.min(32, d) + g;
|
|
34
34
|
for (let o = g; o < x; o++)
|
|
35
35
|
_[t.charCodeAt(o)] |= 1 << o;
|
|
36
36
|
for (let o = 0; o < r; o++) {
|
|
37
|
-
const v = _[a.charCodeAt(o)],
|
|
38
|
-
let
|
|
39
|
-
|
|
37
|
+
const v = _[a.charCodeAt(o)], O = i[o / 32 | 0] >>> o & 1, b = c[o / 32 | 0] >>> o & 1, q = v | e, I = ((v | b) & l) + l ^ l | v | b;
|
|
38
|
+
let E = e | ~(I | l), S = l & I;
|
|
39
|
+
E >>> 31 ^ O && (i[o / 32 | 0] ^= 1 << o), S >>> 31 ^ b && (c[o / 32 | 0] ^= 1 << o), E = E << 1 | O, S = S << 1 | b, l = S | ~(q | E), e = E & q;
|
|
40
40
|
}
|
|
41
41
|
for (let o = g; o < x; o++)
|
|
42
42
|
_[t.charCodeAt(o)] = 0;
|
|
43
43
|
}
|
|
44
|
-
let
|
|
45
|
-
const
|
|
46
|
-
for (let e =
|
|
44
|
+
let f = 0, h = -1;
|
|
45
|
+
const y = n * 32, A = Math.min(32, d - y) + y;
|
|
46
|
+
for (let e = y; e < A; e++)
|
|
47
47
|
_[t.charCodeAt(e)] |= 1 << e;
|
|
48
|
-
let
|
|
48
|
+
let C = d;
|
|
49
49
|
for (let e = 0; e < r; e++) {
|
|
50
|
-
const l = _[a.charCodeAt(e)], g =
|
|
51
|
-
let
|
|
52
|
-
|
|
50
|
+
const l = _[a.charCodeAt(e)], g = i[e / 32 | 0] >>> e & 1, x = c[e / 32 | 0] >>> e & 1, o = l | f, v = ((l | x) & h) + h ^ h | l | x;
|
|
51
|
+
let O = f | ~(v | h), b = h & v;
|
|
52
|
+
C += O >>> d - 1 & 1, C -= b >>> d - 1 & 1, O >>> 31 ^ g && (i[e / 32 | 0] ^= 1 << e), b >>> 31 ^ x && (c[e / 32 | 0] ^= 1 << e), O = O << 1 | g, b = b << 1 | x, h = b | ~(o | O), f = O & o;
|
|
53
53
|
}
|
|
54
|
-
for (let e =
|
|
54
|
+
for (let e = y; e < A; e++)
|
|
55
55
|
_[t.charCodeAt(e)] = 0;
|
|
56
|
-
return
|
|
57
|
-
},
|
|
56
|
+
return C;
|
|
57
|
+
}, ne = (t, a) => {
|
|
58
58
|
if (t.length < a.length) {
|
|
59
59
|
const r = a;
|
|
60
60
|
a = t, t = r;
|
|
61
61
|
}
|
|
62
|
-
return a.length === 0 ? t.length : t.length <= 32 ?
|
|
63
|
-
},
|
|
64
|
-
let r = 1 / 0,
|
|
65
|
-
for (let
|
|
66
|
-
const
|
|
67
|
-
|
|
62
|
+
return a.length === 0 ? t.length : t.length <= 32 ? xe(t, a) : be(t, a);
|
|
63
|
+
}, ke = (t, a) => {
|
|
64
|
+
let r = 1 / 0, d = 0;
|
|
65
|
+
for (let c = 0; c < a.length; c++) {
|
|
66
|
+
const i = ne(t, a[c]);
|
|
67
|
+
i < r && (r = i, d = c);
|
|
68
68
|
}
|
|
69
|
-
return a[
|
|
70
|
-
},
|
|
69
|
+
return a[d];
|
|
70
|
+
}, we = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
71
71
|
__proto__: null,
|
|
72
|
-
closest:
|
|
73
|
-
distance:
|
|
74
|
-
}, Symbol.toStringTag, { value: "Module" })),
|
|
75
|
-
var
|
|
76
|
-
function
|
|
77
|
-
return
|
|
72
|
+
closest: ke,
|
|
73
|
+
distance: ne
|
|
74
|
+
}, Symbol.toStringTag, { value: "Module" })), ye = /* @__PURE__ */ fe(we);
|
|
75
|
+
var ee;
|
|
76
|
+
function Ie() {
|
|
77
|
+
return ee || (ee = 1, (function(t, a) {
|
|
78
78
|
(function() {
|
|
79
79
|
var r;
|
|
80
80
|
try {
|
|
@@ -82,7 +82,7 @@ function ke() {
|
|
|
82
82
|
} catch {
|
|
83
83
|
console.log("Collator could not be initialized and wouldn't be used");
|
|
84
84
|
}
|
|
85
|
-
var
|
|
85
|
+
var d = ye, c = [], i = [], u = {
|
|
86
86
|
/**
|
|
87
87
|
* Calculate levenshtein distance of the two strings.
|
|
88
88
|
*
|
|
@@ -92,82 +92,82 @@ function ke() {
|
|
|
92
92
|
* @param [options.useCollator] Use `Intl.Collator` for locale-sensitive string comparison.
|
|
93
93
|
* @return Integer the levenshtein distance (0 and above).
|
|
94
94
|
*/
|
|
95
|
-
get: function(p, n,
|
|
96
|
-
var h =
|
|
95
|
+
get: function(p, n, f) {
|
|
96
|
+
var h = f && r && f.useCollator;
|
|
97
97
|
if (h) {
|
|
98
|
-
var
|
|
99
|
-
if (
|
|
100
|
-
if (
|
|
101
|
-
var
|
|
102
|
-
for (l = 0; l <
|
|
103
|
-
|
|
104
|
-
|
|
98
|
+
var y = p.length, A = n.length;
|
|
99
|
+
if (y === 0) return A;
|
|
100
|
+
if (A === 0) return y;
|
|
101
|
+
var C, e, l, g, x;
|
|
102
|
+
for (l = 0; l < A; ++l)
|
|
103
|
+
c[l] = l, i[l] = n.charCodeAt(l);
|
|
104
|
+
c[A] = A;
|
|
105
105
|
var o;
|
|
106
|
-
for (l = 0; l <
|
|
107
|
-
for (e = l + 1, g = 0; g <
|
|
108
|
-
|
|
109
|
-
|
|
106
|
+
for (l = 0; l < y; ++l) {
|
|
107
|
+
for (e = l + 1, g = 0; g < A; ++g)
|
|
108
|
+
C = e, o = r.compare(p.charAt(l), String.fromCharCode(i[g])) === 0, e = c[g] + (o ? 0 : 1), x = C + 1, e > x && (e = x), x = c[g + 1] + 1, e > x && (e = x), c[g] = C;
|
|
109
|
+
c[g] = e;
|
|
110
110
|
}
|
|
111
111
|
return e;
|
|
112
112
|
}
|
|
113
|
-
return
|
|
113
|
+
return d.distance(p, n);
|
|
114
114
|
}
|
|
115
115
|
};
|
|
116
116
|
t !== null && t.exports === a ? t.exports = u : typeof self < "u" && typeof self.postMessage == "function" && typeof self.importScripts == "function" ? self.Levenshtein = u : typeof window < "u" && window !== null && (window.Levenshtein = u);
|
|
117
117
|
})();
|
|
118
|
-
})(
|
|
118
|
+
})(T, T.exports)), T.exports;
|
|
119
119
|
}
|
|
120
|
-
var
|
|
121
|
-
const
|
|
122
|
-
function
|
|
120
|
+
var Ve = Ie();
|
|
121
|
+
const Ne = /* @__PURE__ */ de(Ve);
|
|
122
|
+
function oe() {
|
|
123
123
|
const {
|
|
124
124
|
value: t,
|
|
125
125
|
setValue: a
|
|
126
|
-
} =
|
|
127
|
-
return
|
|
126
|
+
} = me("isKeyboardNavigating");
|
|
127
|
+
return te(() => ({
|
|
128
128
|
isKeyboardNavigating: t,
|
|
129
129
|
setIsKeyboardNavigating: a
|
|
130
130
|
}), [t, a]);
|
|
131
131
|
}
|
|
132
|
-
function
|
|
132
|
+
function X(t) {
|
|
133
133
|
return "text" in t ? t.text : t.label;
|
|
134
134
|
}
|
|
135
|
-
const
|
|
136
|
-
function
|
|
135
|
+
const Y = "kakadu-components-1144794361", G = "kakadu-components-2911184744";
|
|
136
|
+
function Ae({
|
|
137
137
|
isSelected: t,
|
|
138
138
|
id: a,
|
|
139
139
|
value: r,
|
|
140
|
-
label:
|
|
141
|
-
onSelect:
|
|
142
|
-
onHover:
|
|
140
|
+
label: d,
|
|
141
|
+
onSelect: c,
|
|
142
|
+
onHover: i
|
|
143
143
|
}) {
|
|
144
144
|
const {
|
|
145
145
|
isKeyboardNavigating: u
|
|
146
|
-
} =
|
|
147
|
-
|
|
148
|
-
}, [
|
|
149
|
-
u || h.movementX === 0 && h.movementY === 0 ||
|
|
150
|
-
}, [u,
|
|
146
|
+
} = oe(), p = M(() => {
|
|
147
|
+
c(r);
|
|
148
|
+
}, [c, r]), n = M((h) => {
|
|
149
|
+
u || h.movementX === 0 && h.movementY === 0 || i(r);
|
|
150
|
+
}, [u, i, r]), f = H(null);
|
|
151
151
|
return z(() => {
|
|
152
|
-
const h =
|
|
152
|
+
const h = f.current;
|
|
153
153
|
t && h && u && setTimeout(() => {
|
|
154
154
|
h.scrollIntoView({
|
|
155
155
|
behavior: "smooth",
|
|
156
156
|
block: "nearest"
|
|
157
157
|
});
|
|
158
158
|
}, 0);
|
|
159
|
-
}, [t, u]), /* @__PURE__ */ N.jsx("li", { ref:
|
|
159
|
+
}, [t, u]), /* @__PURE__ */ N.jsx("li", { ref: f, id: a, role: "option", "aria-selected": t, tabIndex: -1, className: U(Y, "kakadu-components-4130497639", u ? "kakadu-components-962373561" : "kakadu-components-1109598791"), onClick: p, onMouseMove: n, children: /* @__PURE__ */ N.jsx($, { className: U(G, typeof d == "string" && "kakadu-components-154286052"), children: d }) });
|
|
160
160
|
}
|
|
161
|
-
function
|
|
161
|
+
function Oe({
|
|
162
162
|
isLoading: t,
|
|
163
163
|
id: a,
|
|
164
164
|
activeOptionId: r,
|
|
165
|
-
selectedValue:
|
|
166
|
-
options:
|
|
167
|
-
onSelect:
|
|
165
|
+
selectedValue: d,
|
|
166
|
+
options: c,
|
|
167
|
+
onSelect: i,
|
|
168
168
|
onHover: u
|
|
169
169
|
}) {
|
|
170
|
-
const p =
|
|
170
|
+
const p = H(null);
|
|
171
171
|
return z(() => {
|
|
172
172
|
const n = p.current;
|
|
173
173
|
n && n.scrollIntoView({
|
|
@@ -175,85 +175,85 @@ function Ne({
|
|
|
175
175
|
block: "nearest"
|
|
176
176
|
});
|
|
177
177
|
}, []), /* @__PURE__ */ N.jsxs("ul", { ref: p, id: a, role: "listbox", "aria-label": "Options", tabIndex: -1, className: "kakadu-components-1951042708", children: [
|
|
178
|
-
|
|
179
|
-
/* @__PURE__ */ N.jsx(
|
|
180
|
-
/* @__PURE__ */ N.jsx(
|
|
181
|
-
] }) :
|
|
182
|
-
|
|
178
|
+
c.length === 0 ? t ? null : /* @__PURE__ */ N.jsxs(Z, { "aria-atomic": !0, as: "li", role: "status", "aria-live": "polite", direction: "row", preset: "start", gap: 0.5, className: Y, children: [
|
|
179
|
+
/* @__PURE__ */ N.jsx(he, { size: 15, type: "exclamationTriangle" }),
|
|
180
|
+
/* @__PURE__ */ N.jsx($, { className: G, children: "No results." })
|
|
181
|
+
] }) : c.map((n, f) => /* @__PURE__ */ N.jsx(
|
|
182
|
+
Ae,
|
|
183
183
|
{
|
|
184
184
|
...n,
|
|
185
|
-
id: n.value ===
|
|
186
|
-
isSelected: n.value ===
|
|
187
|
-
onSelect:
|
|
185
|
+
id: n.value === d ? r : void 0,
|
|
186
|
+
isSelected: n.value === d,
|
|
187
|
+
onSelect: i,
|
|
188
188
|
onHover: u
|
|
189
189
|
},
|
|
190
|
-
|
|
190
|
+
X(n) + f
|
|
191
191
|
)),
|
|
192
|
-
t ? /* @__PURE__ */ N.jsx(
|
|
192
|
+
t ? /* @__PURE__ */ N.jsx(Z, { as: "li", alignment: "center", className: Y, children: /* @__PURE__ */ N.jsx($, { className: G, children: /* @__PURE__ */ N.jsx(ge, { width: "100%", height: "1.3em" }) }) }) : null
|
|
193
193
|
] });
|
|
194
194
|
}
|
|
195
|
-
function
|
|
195
|
+
function Ke({
|
|
196
196
|
isLoading: t,
|
|
197
197
|
label: a,
|
|
198
198
|
options: r,
|
|
199
|
-
error:
|
|
200
|
-
warning:
|
|
201
|
-
information:
|
|
199
|
+
error: d,
|
|
200
|
+
warning: c,
|
|
201
|
+
information: i,
|
|
202
202
|
footnote: u,
|
|
203
203
|
className: p,
|
|
204
204
|
onChange: n,
|
|
205
|
-
onSelect:
|
|
205
|
+
onSelect: f,
|
|
206
206
|
...h
|
|
207
207
|
}) {
|
|
208
|
-
const
|
|
208
|
+
const y = H(null), A = W(), C = W(), [e, l] = R(!1), g = M(() => {
|
|
209
209
|
l(!0);
|
|
210
|
-
}, []), x =
|
|
211
|
-
var
|
|
212
|
-
(
|
|
213
|
-
}, []), [o, v] =
|
|
210
|
+
}, []), x = M((s) => {
|
|
211
|
+
var m;
|
|
212
|
+
(m = y.current) != null && m.contains(s.relatedTarget) || l(!1);
|
|
213
|
+
}, []), [o, v] = R(!1);
|
|
214
214
|
z(() => {
|
|
215
215
|
v(e);
|
|
216
216
|
}, [e]);
|
|
217
|
-
const [
|
|
217
|
+
const [O, b] = R(""), {
|
|
218
218
|
value: q
|
|
219
|
-
} = h, [
|
|
220
|
-
|
|
219
|
+
} = h, [I, E] = R(q), [S, re] = R(q), J = H(S), V = M((s) => {
|
|
220
|
+
re(s), J.current = s;
|
|
221
221
|
}, []);
|
|
222
222
|
z(() => {
|
|
223
|
-
|
|
224
|
-
}, [q,
|
|
225
|
-
const
|
|
226
|
-
|
|
227
|
-
}, [
|
|
228
|
-
|
|
229
|
-
}, [n]),
|
|
230
|
-
var
|
|
231
|
-
(
|
|
232
|
-
}, []), L =
|
|
233
|
-
const
|
|
234
|
-
|
|
235
|
-
}, [
|
|
236
|
-
const
|
|
237
|
-
L(
|
|
238
|
-
}, [r, L]),
|
|
239
|
-
|
|
240
|
-
}, [
|
|
241
|
-
const
|
|
242
|
-
return !!(
|
|
223
|
+
E(q), V(q);
|
|
224
|
+
}, [q, V]);
|
|
225
|
+
const se = M(() => {
|
|
226
|
+
I && (b(""), V(void 0));
|
|
227
|
+
}, [I, V]), ae = M((s, m) => {
|
|
228
|
+
b(s), n == null || n(s, m), v(!0), E(void 0);
|
|
229
|
+
}, [n]), ce = M((s) => {
|
|
230
|
+
var m;
|
|
231
|
+
(m = y.current) != null && m.contains(s.target) && v(!0);
|
|
232
|
+
}, []), L = M((s) => {
|
|
233
|
+
const m = s == null ? void 0 : s.value;
|
|
234
|
+
V(m), s ? b(X(s)) : (b(""), n == null || n("")), f == null || f(m);
|
|
235
|
+
}, [V, n, f]), ie = M((s) => {
|
|
236
|
+
const m = r.find((k) => k.value === s);
|
|
237
|
+
L(m), E(s), v(!1);
|
|
238
|
+
}, [r, L]), le = M((s) => {
|
|
239
|
+
V(s);
|
|
240
|
+
}, [V]), K = ue(O), j = te(() => I || K.length === 0 ? r : r.filter((s) => {
|
|
241
|
+
const k = X(s).toLowerCase(), F = K.toLowerCase();
|
|
242
|
+
return !!(k.includes(F) || F.includes(k) || Ne.get(k, F, {
|
|
243
243
|
useCollator: !0
|
|
244
244
|
}) <= 2);
|
|
245
|
-
}), [
|
|
245
|
+
}), [I, r, K]);
|
|
246
246
|
z(() => {
|
|
247
|
-
!
|
|
248
|
-
}, [
|
|
247
|
+
!I && K.length > 0 && j.length > 0 && !j.some((s) => S === s.value) && V(j[0].value);
|
|
248
|
+
}, [I, K, j, S, V]);
|
|
249
249
|
const {
|
|
250
250
|
setIsKeyboardNavigating: B
|
|
251
|
-
} =
|
|
251
|
+
} = oe();
|
|
252
252
|
return z(() => {
|
|
253
253
|
if (!e)
|
|
254
254
|
return;
|
|
255
|
-
const s = (
|
|
256
|
-
|
|
255
|
+
const s = (m) => {
|
|
256
|
+
m.movementX === 0 && m.movementY === 0 || B(!1);
|
|
257
257
|
};
|
|
258
258
|
return window.addEventListener("mousemove", s, {
|
|
259
259
|
capture: !0
|
|
@@ -265,45 +265,54 @@ function Le({
|
|
|
265
265
|
}, [e, B]), z(() => {
|
|
266
266
|
if (!e)
|
|
267
267
|
return;
|
|
268
|
-
const s = (
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
268
|
+
const s = (m) => {
|
|
269
|
+
var Q;
|
|
270
|
+
let k;
|
|
271
|
+
const F = j.length, P = j.findIndex((w) => w.value === J.current), D = () => {
|
|
272
|
+
m.preventDefault(), m.stopPropagation(), m.stopImmediatePropagation();
|
|
272
273
|
};
|
|
273
|
-
switch (
|
|
274
|
+
switch (m.key) {
|
|
274
275
|
case "Enter": {
|
|
275
|
-
const
|
|
276
|
-
|
|
276
|
+
const w = j[P];
|
|
277
|
+
w && (D(), B(!0), v(!1), L(w), E(w.value));
|
|
277
278
|
break;
|
|
278
279
|
}
|
|
279
280
|
case "Escape": {
|
|
280
|
-
|
|
281
|
+
if (o)
|
|
282
|
+
D(), I ? V(void 0) : L(void 0), v(!1);
|
|
283
|
+
else if (I)
|
|
284
|
+
D(), v(!0), L(void 0);
|
|
285
|
+
else {
|
|
286
|
+
D(), l(!1);
|
|
287
|
+
const w = document.activeElement;
|
|
288
|
+
w instanceof HTMLElement && ((Q = y.current) != null && Q.contains(w)) && w.blur();
|
|
289
|
+
}
|
|
281
290
|
return;
|
|
282
291
|
}
|
|
283
292
|
case "ArrowDown": {
|
|
284
|
-
|
|
293
|
+
k = P + 1, v(!0);
|
|
285
294
|
break;
|
|
286
295
|
}
|
|
287
296
|
case "ArrowUp": {
|
|
288
|
-
|
|
297
|
+
k = P - 1, v(!0), k < 0 && (k = F - 1);
|
|
289
298
|
break;
|
|
290
299
|
}
|
|
291
300
|
case "Home": {
|
|
292
|
-
v(!0),
|
|
301
|
+
v(!0), k = 0;
|
|
293
302
|
break;
|
|
294
303
|
}
|
|
295
304
|
case "End": {
|
|
296
|
-
v(!0),
|
|
305
|
+
v(!0), k = F - 1;
|
|
297
306
|
break;
|
|
298
307
|
}
|
|
299
308
|
case "Backspace": {
|
|
300
|
-
j.some((
|
|
309
|
+
j.some((w) => w.value === I) && (D(), L(void 0), v(!0));
|
|
301
310
|
break;
|
|
302
311
|
}
|
|
303
312
|
}
|
|
304
|
-
if (
|
|
305
|
-
const
|
|
306
|
-
|
|
313
|
+
if (k !== void 0 && (D(), B(!0), F > 0)) {
|
|
314
|
+
const w = j[k % F];
|
|
315
|
+
w && V(w.value);
|
|
307
316
|
}
|
|
308
317
|
};
|
|
309
318
|
return window.addEventListener("keydown", s, {
|
|
@@ -313,9 +322,9 @@ function Le({
|
|
|
313
322
|
capture: !0
|
|
314
323
|
});
|
|
315
324
|
};
|
|
316
|
-
}, [e, j, B, v, L,
|
|
325
|
+
}, [e, j, B, v, L, E, o, I, V]), /* @__PURE__ */ N.jsx(pe, { ...h, ref: y, role: "combobox", autoComplete: "off", "aria-controls": A, "aria-expanded": o, "aria-activedescendant": o ? C : void 0, label: a, value: O, error: d, warning: c, information: i, footnote: u, attachments: o ? /* @__PURE__ */ N.jsx(Oe, { isLoading: t, id: A, activeOptionId: C, selectedValue: S, options: j, onSelect: ie, onHover: le }) : null, className: U(p, "kakadu-components-879486679"), onMouseDown: ce, onChange: ae, onBeforeInput: se, onFocus: g, onBlur: x, children: /* @__PURE__ */ N.jsx(ve, { width: 14, height: 14, className: "kakadu-components-158931186" }) });
|
|
317
326
|
}
|
|
318
327
|
export {
|
|
319
|
-
|
|
320
|
-
|
|
328
|
+
Ke as default,
|
|
329
|
+
X as getComboboxOptionString
|
|
321
330
|
};
|
|
@@ -3,6 +3,7 @@ export declare const flexDirections: readonly ["row", "column"];
|
|
|
3
3
|
export type FlexDirection = (typeof flexDirections)[number];
|
|
4
4
|
export declare const flexPresets: readonly ["start", "center", "space-between", "end"];
|
|
5
5
|
export type FlexPreset = (typeof flexPresets)[number];
|
|
6
|
+
type FlexGap = 0 | 0.25 | 0.375 | 0.5 | 0.75 | 1 | 1.5 | 2 | 2.25 | 3 | 4;
|
|
6
7
|
export type FlexProperties<Type extends AtomElementType = DefaultAtomElementType> = AtomProperties<Type> & {
|
|
7
8
|
readonly direction?: FlexDirection;
|
|
8
9
|
readonly preset?: FlexPreset;
|
|
@@ -12,8 +13,10 @@ export type FlexProperties<Type extends AtomElementType = DefaultAtomElementType
|
|
|
12
13
|
/** How items are laid out across the cross axis.
|
|
13
14
|
* @see direction */
|
|
14
15
|
readonly alignment?: string;
|
|
15
|
-
|
|
16
|
+
/** The gap between items. Single value or [row-gap, column-gap]. */
|
|
17
|
+
readonly gap?: FlexGap | [FlexGap, FlexGap];
|
|
16
18
|
readonly wrap?: boolean;
|
|
17
19
|
readonly fill?: boolean;
|
|
18
20
|
};
|
|
19
21
|
export default function Flex<Type extends AtomElementType = DefaultAtomElementType>({ as, direction, preset, distribution, alignment, gap, wrap, fill, style: inputStyle, className, ...properties }: FlexProperties<Type>): import("react/jsx-runtime").JSX.Element;
|
|
22
|
+
export {};
|
package/build/components/flex.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const g=require("../jsx-runtime-BB_1_6y_.js"),l=require("react"),x=require("@kuma-ui/core"),m=require("./atom.js"),q=["row","column"],w=["start","center","space-between","end"];function r(t){switch(t){case 0:return"0";case .25:return"var(--quarter-gap)";case .375:return"var(--third-gap)";case .5:return"var(--half-gap)";case .75:return"calc(var(--gap) * 0.75)";case 1:return"var(--gap)";case 1.5:return"var(--sesquialteral-gap)";case 2:return"var(--double-gap)";case 2.25:return"calc(var(--gap) * 2.25)";case 3:return"var(--triple-gap)";case 4:return"var(--quadruple-gap)"}}function b({as:t,direction:p="column",preset:a,distribution:n,alignment:s,gap:e=1,wrap:i=!1,fill:d=!1,style:c,className:k,...f}){const[o,u]=l.useMemo(()=>Array.isArray(e)?[r(e[0]),r(e[1])]:[r(e),r(e)],[e]),v=l.useMemo(()=>({...c,"--distribution":n,"--alignment":s,"--row-gap":o,"--column-gap":u}),[c,n,s,o,u]);return g.jsxRuntimeExports.jsx(m.default,{as:t??m.defaultAtomElementType,...f,style:v,className:x.cx("kakadu-components-3023337962",p==="column"&&"kakadu-components-1920578034",a==="start"&&"kakadu-components-2628985316",a==="center"&&"kakadu-components-9661990",a==="space-between"&&"kakadu-components-1323551558",a==="end"&&"kakadu-components-1950514053",i&&"kakadu-components-3545808562",d&&"kakadu-components-3911899222",k)})}exports.default=b;exports.flexDirections=q;exports.flexPresets=w;
|