@viasat/beam-react 2.15.0 → 2.17.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.
@@ -0,0 +1,4 @@
1
+ const o = "var(--bm-combobox-dropdown-max-items, 8)", e = "var(--bm-comp-actionlist-size-height, 2.5rem)", c = "var(--bm-sem-space-50, 0.5rem)", t = "var(--bm-sem-space-100, 1rem)", a = (m) => `min(calc(${m}px - ${t}), calc(${o} * ${e} + 2 * ${c}))`;
2
+ export {
3
+ a as g
4
+ };
@@ -0,0 +1 @@
1
+ "use strict";const o="var(--bm-combobox-dropdown-max-items, 8)",e="var(--bm-comp-actionlist-size-height, 2.5rem)",t="var(--bm-sem-space-50, 0.5rem)",c="var(--bm-sem-space-100, 1rem)",s=m=>`min(calc(${m}px - ${c}), calc(${o} * ${e} + 2 * ${t}))`;exports.getDropdownMaxHeight=s;
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const te=require("../../chunks/constants.hwjHOsvT.js"),ne=require("../../chunks/dom.zgzOBFUw.js"),r=require("@floating-ui/react"),t=require("react"),se=`${te.prefix}combobox__field__chevron`,oe=j=>{const{disabled:x,readOnly:F,lastSelectedOptionIndex:l,fieldRef:p}=j,[n,$]=t.useState(!1),o=t.useRef(null),E=t.useRef(n);E.current=n;const R=r.useFloatingNodeId(),[I,z]=t.useState(null),[g,v]=t.useState(!0),[P,S]=t.useState(!1),b=t.useRef(!1),V=t.useCallback(e=>{I!==e&&(P?(S(!1),l===void 0&&v(!0)):v(!0),z(e))},[I,P,l]),f=t.useCallback((e,s,a)=>{var i;const u=l===void 0&&((i=o.current)==null?void 0:i.value)==="";!e&&a==="click"&&s instanceof MouseEvent&&!u&&!(s.target instanceof HTMLElement&&s.target.classList.contains(se))||($(e),e&&a==="click"&&(s instanceof MouseEvent||s instanceof PointerEvent)&&(S(!0),v(!1)))},[l,o]),{context:d,refs:c,floatingStyles:D}=r.useFloating({placement:"bottom-start",middleware:[{name:"overrideReference",fn:({rects:e})=>({reset:{rects:{...e,reference:ne.getElementScrollBoundingClientRect(p.current)??e.reference}}})},r.flip(),r.size({apply({elements:e,rects:s}){Object.assign(e.floating.style,{width:`${s.reference.width}px`})}})],whileElementsMounted:r.autoUpdate,open:n,onOpenChange:f,nodeId:R});o.current=c.domReference.current;const k=t.useCallback(e=>{b.current=!0,e.target!==o.current&&e.preventDefault()},[o]),y=t.useCallback(e=>{b.current=!1,e.target!==o.current&&e.preventDefault()},[o]),m=t.useRef([]),G=t.useRef([]),J=r.useClick(d,{enabled:!x&&!F,keyboardHandlers:!1}),Q=r.useRole(d,{role:"listbox"}),W=r.useDismiss(d,{outsidePress:!1}),O=m.current.length===0?null:I??null,M=t.useRef(l??null),X=t.useMemo(()=>n?M.current:(M.current=l??null,m.current.length===0?null:l??null),[l,n]),Y=r.useListNavigation(d,{enabled:!x&&!F,listRef:m,activeIndex:O,selectedIndex:X,onNavigate:V,focusItemOnHover:!1,focusItemOnOpen:"auto",openOnArrowKeyDown:!0,nested:!1,loop:!0,virtual:!0,scrollItemIntoView:!0}),{getReferenceProps:h,getFloatingProps:A,getItemProps:K}=r.useInteractions([Q,W,Y]),{getReferenceProps:_}=r.useInteractions([J]),[T,Z]=t.useState(n);t.useEffect(()=>Z(n),[n]);const C=n?"open":"closed",w=t.useCallback(e=>{var i;if(!n)return;const s=e.type==="focus"?e.target:e.relatedTarget,a=c.floating.current,u=p.current;if(a!=null&&a.contains(s)||u!=null&&u.contains(s)||b.current){e.preventDefault(),e.stopPropagation(),(i=o.current)==null||i.focus();return}f(!1,e.nativeEvent,"focus-out")},[p,n,o,c.floating,f]),q=t.useRef(n);t.useEffect(()=>{var e;q.current&&!n&&((e=o.current)==null||e.focus()),q.current=n},[n,o]);const N=t.useCallback((e={})=>({ref:c.setReference,...h({...e})}),[c.setReference,h]),B=t.useCallback((e={})=>({ref:p,onKeyDownCapture:s=>{var U;const a=E.current,u=o.current,i=u==null?void 0:u.getAttribute("aria-activedescendant"),L=i?document.getElementById(i):null;if(s.key==="Enter"&&a){if(s.preventDefault(),s.stopPropagation(),g&&L){const ee=new KeyboardEvent("keydown",s.nativeEvent);L.dispatchEvent(ee)}return}(U=e.onKeyDownCapture)==null||U.call(e,s)},onFocusCapture:w,onBlurCapture:w,..._({...e,onMouseDownCapture:k,onMouseUpCapture:y,onPointerDownCapture:k,onPointerUpCapture:y})}),[p,w,_,k,y,o,g]),H=t.useMemo(()=>({isMounted:T,status:C,getFloatingProps:A,getItemProps:K,floatingStyles:D,setOpen:f,nodeId:R,context:d,labelsRef:G,elementsRef:m,setFloating:c.setFloating,activeIndex:g?O:null}),[T,C,A,K,D,f,R,d,c.setFloating,O,g]);return t.useMemo(()=>({getFieldProps:B,getInputProps:N,dropdownProps:H,refs:c,open:n,setOpen:f,status:C,setDisplayActiveIndex:v}),[H,B,N,n,c,f,C])};exports.useAutocompleteDropdown=oe;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const te=require("../../chunks/constants.hwjHOsvT.js"),ne=require("../../chunks/dom.zgzOBFUw.js"),u=require("@floating-ui/react"),t=require("react"),se=require("../../chunks/combobox.9scnST_n.js"),oe=`${te.prefix}combobox__field__chevron`,re=u.flip({crossAxis:!1,mainAxis:!0,flipAlignment:!1}),ce=U=>{const{disabled:O,readOnly:F,lastSelectedOptionIndex:i,fieldRef:p}=U,[s,$]=t.useState(!1),r=t.useRef(null),P=t.useRef(s);P.current=s;const C=u.useFloatingNodeId(),[b,z]=t.useState(null),[g,m]=t.useState(!0),[D,E]=t.useState(!1),I=t.useRef(!1),V=t.useCallback(e=>{b!==e&&(D?(E(!1),i===void 0&&m(!0)):m(!0),z(e))},[b,D,i]),f=t.useCallback((e,n,o)=>{var l;const c=i===void 0&&((l=r.current)==null?void 0:l.value)==="";!e&&o==="click"&&n instanceof MouseEvent&&!c&&!(n.target instanceof HTMLElement&&n.target.classList.contains(oe))||($(e),e&&o==="click"&&(n instanceof MouseEvent||n instanceof PointerEvent)&&(E(!0),m(!1)))},[i,r]),{context:d,refs:a,floatingStyles:S}=u.useFloating({placement:"bottom-start",middleware:[{name:"overrideReference",fn:async e=>{const n=ne.getElementScrollBoundingClientRect(p.current),o=n?{...e.rects,reference:n}:e.rects,c=await re.fn({...e,rects:o}),l=typeof c.reset=="object"?c.reset.placement:void 0;return l?{reset:{placement:l,rects:o}}:n?{reset:{rects:o}}:{}}},u.size({apply({elements:e,rects:n,availableHeight:o}){Object.assign(e.floating.style,{width:`${n.reference.width}px`,maxHeight:se.getDropdownMaxHeight(o)})}})],whileElementsMounted:u.autoUpdate,open:s,onOpenChange:f,nodeId:C});r.current=a.domReference.current;const y=t.useCallback(e=>{I.current=!0,e.target!==r.current&&e.preventDefault()},[r]),k=t.useCallback(e=>{I.current=!1,e.target!==r.current&&e.preventDefault()},[r]),v=t.useRef([]),G=t.useRef([]),J=u.useClick(d,{enabled:!O&&!F,keyboardHandlers:!1}),Q=u.useRole(d,{role:"listbox"}),W=u.useDismiss(d,{outsidePress:!1}),x=v.current.length===0?null:b??null,M=t.useRef(i??null),X=t.useMemo(()=>s?M.current:(M.current=i??null,v.current.length===0?null:i??null),[i,s]),Y=u.useListNavigation(d,{enabled:!O&&!F,listRef:v,activeIndex:x,selectedIndex:X,onNavigate:V,focusItemOnHover:!1,focusItemOnOpen:"auto",openOnArrowKeyDown:!0,nested:!1,loop:!0,virtual:!0,scrollItemIntoView:!0}),{getReferenceProps:h,getFloatingProps:A,getItemProps:K}=u.useInteractions([Q,W,Y]),{getReferenceProps:_}=u.useInteractions([J]),[q,Z]=t.useState(s);t.useEffect(()=>Z(s),[s]);const R=s?"open":"closed",w=t.useCallback(e=>{var l;if(!s)return;const n=e.type==="focus"?e.target:e.relatedTarget,o=a.floating.current,c=p.current;if(o!=null&&o.contains(n)||c!=null&&c.contains(n)||I.current){e.preventDefault(),e.stopPropagation(),(l=r.current)==null||l.focus();return}f(!1,e.nativeEvent,"focus-out")},[p,s,r,a.floating,f]),H=t.useRef(s);t.useEffect(()=>{var e;H.current&&!s&&((e=r.current)==null||e.focus()),H.current=s},[s,r]);const T=t.useCallback((e={})=>({ref:a.setReference,...h({...e})}),[a.setReference,h]),N=t.useCallback((e={})=>({ref:p,onKeyDownCapture:n=>{var L;const o=P.current,c=r.current,l=c==null?void 0:c.getAttribute("aria-activedescendant"),B=l?document.getElementById(l):null;if(n.key==="Enter"&&o){if(n.preventDefault(),n.stopPropagation(),g&&B){const ee=new KeyboardEvent("keydown",n.nativeEvent);B.dispatchEvent(ee)}return}(L=e.onKeyDownCapture)==null||L.call(e,n)},onFocusCapture:w,onBlurCapture:w,..._({...e,onMouseDownCapture:y,onMouseUpCapture:k,onPointerDownCapture:y,onPointerUpCapture:k})}),[p,w,_,y,k,r,g]),j=t.useMemo(()=>({isMounted:q,status:R,getFloatingProps:A,getItemProps:K,floatingStyles:S,setOpen:f,nodeId:C,context:d,labelsRef:G,elementsRef:v,setFloating:a.setFloating,activeIndex:g?x:null}),[q,R,A,K,S,f,C,d,a.setFloating,x,g]);return t.useMemo(()=>({getFieldProps:N,getInputProps:T,dropdownProps:j,refs:a,open:s,setOpen:f,status:R,setDisplayActiveIndex:m}),[j,N,T,s,a,f,R])};exports.useAutocompleteDropdown=ce;
@@ -1,51 +1,59 @@
1
1
  import { p as re } from "../../chunks/constants.CKKGf1-i.js";
2
2
  import { g as ce } from "../../chunks/dom.DGM-dxLe.js";
3
- import { useFloatingNodeId as le, useFloating as ie, autoUpdate as ae, flip as ue, size as fe, useClick as de, useRole as pe, useDismiss as ge, useListNavigation as me, useInteractions as V } from "@floating-ui/react";
4
- import { useState as g, useRef as u, useCallback as f, useMemo as E, useEffect as q } from "react";
5
- const ve = `${re}combobox__field__chevron`, Oe = (G) => {
6
- const { disabled: P, readOnly: b, lastSelectedOptionIndex: c, fieldRef: p } = G, [t, J] = g(!1), o = u(null), D = u(t);
7
- D.current = t;
8
- const y = le(), [R, Q] = g(null), [m, v] = g(!0), [h, A] = g(!1), x = u(!1), W = f((e) => {
9
- R !== e && (h ? (A(!1), c === void 0 && v(!0)) : v(!0), Q(e));
10
- }, [R, h, c]), a = f((e, n, l) => {
11
- var i;
12
- const r = c === void 0 && ((i = o.current) == null ? void 0 : i.value) === "";
13
- !e && l === "click" && n instanceof MouseEvent && !r && !(n.target instanceof HTMLElement && n.target.classList.contains(ve)) || (J(e), e && l === "click" && (n instanceof MouseEvent || n instanceof PointerEvent) && (A(!0), v(!1)));
14
- }, [c, o]), { context: d, refs: s, floatingStyles: M } = ie({
3
+ import { flip as ie, useFloatingNodeId as le, useFloating as ae, autoUpdate as ue, size as fe, useClick as de, useRole as pe, useDismiss as ge, useListNavigation as me, useInteractions as V } from "@floating-ui/react";
4
+ import { useState as g, useRef as u, useCallback as f, useMemo as P, useEffect as q } from "react";
5
+ import { g as ve } from "../../chunks/combobox.--djB8BC.js";
6
+ const Ie = `${re}combobox__field__chevron`, xe = ie({ crossAxis: !1, mainAxis: !0, flipAlignment: !1 }), ke = (G) => {
7
+ const { disabled: b, readOnly: D, lastSelectedOptionIndex: l, fieldRef: p } = G, [n, J] = g(!1), s = u(null), E = u(n);
8
+ E.current = n;
9
+ const y = le(), [w, Q] = g(null), [m, v] = g(!0), [h, A] = g(!1), C = u(!1), W = f((e) => {
10
+ w !== e && (h ? (A(!1), l === void 0 && v(!0)) : v(!0), Q(e));
11
+ }, [w, h, l]), a = f((e, t, o) => {
12
+ var c;
13
+ const r = l === void 0 && ((c = s.current) == null ? void 0 : c.value) === "";
14
+ !e && o === "click" && t instanceof MouseEvent && !r && !(t.target instanceof HTMLElement && t.target.classList.contains(Ie)) || (J(e), e && o === "click" && (t instanceof MouseEvent || t instanceof PointerEvent) && (A(!0), v(!1)));
15
+ }, [l, s]), { context: d, refs: i, floatingStyles: M } = ae({
15
16
  placement: "bottom-start",
16
17
  middleware: [
18
+ // Floating UI does not re-run flip() after a middleware returns `reset` with
19
+ // overridden rects, so we manually invoke flip inside this custom middleware
20
+ // to ensure the dropdown flips correctly when the reference rect is replaced.
17
21
  {
18
22
  name: "overrideReference",
19
- fn: ({ rects: e }) => ({
20
- reset: {
21
- rects: {
22
- ...e,
23
- reference: ce(p.current) ?? e.reference
23
+ fn: async (e) => {
24
+ const t = ce(p.current), o = t ? {
25
+ ...e.rects,
26
+ reference: t
27
+ } : e.rects, r = await xe.fn({ ...e, rects: o }), c = typeof r.reset == "object" ? r.reset.placement : void 0;
28
+ return c ? {
29
+ reset: {
30
+ placement: c,
31
+ rects: o
24
32
  }
25
- }
26
- })
33
+ } : t ? { reset: { rects: o } } : {};
34
+ }
27
35
  },
28
- ue(),
29
36
  fe({
30
- apply({ elements: e, rects: n }) {
37
+ apply({ elements: e, rects: t, availableHeight: o }) {
31
38
  Object.assign(e.floating.style, {
32
- width: `${n.reference.width}px`
39
+ width: `${t.reference.width}px`,
40
+ maxHeight: ve(o)
33
41
  });
34
42
  }
35
43
  })
36
44
  ],
37
- whileElementsMounted: ae,
38
- open: t,
45
+ whileElementsMounted: ue,
46
+ open: n,
39
47
  onOpenChange: a,
40
48
  nodeId: y
41
49
  });
42
- o.current = s.domReference.current;
43
- const O = f((e) => {
44
- x.current = !0, e.target !== o.current && e.preventDefault();
45
- }, [o]), w = f((e) => {
46
- x.current = !1, e.target !== o.current && e.preventDefault();
47
- }, [o]), I = u([]), X = u([]), Y = de(d, { enabled: !P && !b, keyboardHandlers: !1 }), Z = pe(d, { role: "listbox" }), ee = ge(d, { outsidePress: !1 }), F = I.current.length === 0 ? null : R ?? null, S = u(c ?? null), te = E(() => t ? S.current : (S.current = c ?? null, I.current.length === 0 ? null : c ?? null), [c, t]), ne = me(d, {
48
- enabled: !P && !b,
50
+ s.current = i.domReference.current;
51
+ const R = f((e) => {
52
+ C.current = !0, e.target !== s.current && e.preventDefault();
53
+ }, [s]), O = f((e) => {
54
+ C.current = !1, e.target !== s.current && e.preventDefault();
55
+ }, [s]), I = u([]), X = u([]), Y = de(d, { enabled: !b && !D, keyboardHandlers: !1 }), Z = pe(d, { role: "listbox" }), ee = ge(d, { outsidePress: !1 }), F = I.current.length === 0 ? null : w ?? null, S = u(l ?? null), te = P(() => n ? S.current : (S.current = l ?? null, I.current.length === 0 ? null : l ?? null), [l, n]), ne = me(d, {
56
+ enabled: !b && !D,
49
57
  listRef: I,
50
58
  activeIndex: F,
51
59
  selectedIndex: te,
@@ -57,95 +65,95 @@ const ve = `${re}combobox__field__chevron`, Oe = (G) => {
57
65
  loop: !0,
58
66
  virtual: !0,
59
67
  scrollItemIntoView: !0
60
- }), { getReferenceProps: K, getFloatingProps: _, getItemProps: N } = V([
68
+ }), { getReferenceProps: K, getFloatingProps: _, getItemProps: H } = V([
61
69
  Z,
62
70
  ee,
63
71
  ne
64
- ]), { getReferenceProps: T } = V([Y]), [B, oe] = g(t);
65
- q(() => oe(t), [t]);
66
- const C = t ? "open" : "closed", k = f(
72
+ ]), { getReferenceProps: N } = V([Y]), [T, oe] = g(n);
73
+ q(() => oe(n), [n]);
74
+ const x = n ? "open" : "closed", k = f(
67
75
  (e) => {
68
- var i;
69
- if (!t)
76
+ var c;
77
+ if (!n)
70
78
  return;
71
- const n = e.type === "focus" ? e.target : e.relatedTarget, l = s.floating.current, r = p.current;
72
- if (l != null && l.contains(n) || r != null && r.contains(n) || x.current) {
73
- e.preventDefault(), e.stopPropagation(), (i = o.current) == null || i.focus();
79
+ const t = e.type === "focus" ? e.target : e.relatedTarget, o = i.floating.current, r = p.current;
80
+ if (o != null && o.contains(t) || r != null && r.contains(t) || C.current) {
81
+ e.preventDefault(), e.stopPropagation(), (c = s.current) == null || c.focus();
74
82
  return;
75
83
  }
76
84
  a(!1, e.nativeEvent, "focus-out");
77
85
  },
78
- [p, t, o, s.floating, a]
79
- ), H = u(t);
86
+ [p, n, s, i.floating, a]
87
+ ), B = u(n);
80
88
  q(() => {
81
89
  var e;
82
- H.current && !t && ((e = o.current) == null || e.focus()), H.current = t;
83
- }, [t, o]);
90
+ B.current && !n && ((e = s.current) == null || e.focus()), B.current = n;
91
+ }, [n, s]);
84
92
  const L = f(
85
93
  (e = {}) => ({
86
- ref: s.setReference,
94
+ ref: i.setReference,
87
95
  ...K({
88
96
  ...e
89
97
  })
90
98
  }),
91
- [s.setReference, K]
99
+ [i.setReference, K]
92
100
  ), U = f(
93
101
  (e = {}) => ({
94
102
  ref: p,
95
- onKeyDownCapture: (n) => {
103
+ onKeyDownCapture: (t) => {
96
104
  var z;
97
- const l = D.current, r = o.current, i = r == null ? void 0 : r.getAttribute("aria-activedescendant"), j = i ? document.getElementById(i) : null;
98
- if (n.key === "Enter" && l) {
99
- if (n.preventDefault(), n.stopPropagation(), m && j) {
100
- const se = new KeyboardEvent("keydown", n.nativeEvent);
101
- j.dispatchEvent(se);
105
+ const o = E.current, r = s.current, c = r == null ? void 0 : r.getAttribute("aria-activedescendant"), $ = c ? document.getElementById(c) : null;
106
+ if (t.key === "Enter" && o) {
107
+ if (t.preventDefault(), t.stopPropagation(), m && $) {
108
+ const se = new KeyboardEvent("keydown", t.nativeEvent);
109
+ $.dispatchEvent(se);
102
110
  }
103
111
  return;
104
112
  }
105
- (z = e.onKeyDownCapture) == null || z.call(e, n);
113
+ (z = e.onKeyDownCapture) == null || z.call(e, t);
106
114
  },
107
115
  onFocusCapture: k,
108
116
  onBlurCapture: k,
109
- ...T({
117
+ ...N({
110
118
  ...e,
111
- onMouseDownCapture: O,
112
- onMouseUpCapture: w,
113
- onPointerDownCapture: O,
114
- onPointerUpCapture: w
119
+ onMouseDownCapture: R,
120
+ onMouseUpCapture: O,
121
+ onPointerDownCapture: R,
122
+ onPointerUpCapture: O
115
123
  })
116
124
  }),
117
- [p, k, T, O, w, o, m]
118
- ), $ = E(
125
+ [p, k, N, R, O, s, m]
126
+ ), j = P(
119
127
  () => ({
120
- isMounted: B,
121
- status: C,
128
+ isMounted: T,
129
+ status: x,
122
130
  getFloatingProps: _,
123
- getItemProps: N,
131
+ getItemProps: H,
124
132
  floatingStyles: M,
125
133
  setOpen: a,
126
134
  nodeId: y,
127
135
  context: d,
128
136
  labelsRef: X,
129
137
  elementsRef: I,
130
- setFloating: s.setFloating,
138
+ setFloating: i.setFloating,
131
139
  activeIndex: m ? F : null
132
140
  }),
133
- [B, C, _, N, M, a, y, d, s.setFloating, F, m]
141
+ [T, x, _, H, M, a, y, d, i.setFloating, F, m]
134
142
  );
135
- return E(
143
+ return P(
136
144
  () => ({
137
145
  getFieldProps: U,
138
146
  getInputProps: L,
139
- dropdownProps: $,
140
- refs: s,
141
- open: t,
147
+ dropdownProps: j,
148
+ refs: i,
149
+ open: n,
142
150
  setOpen: a,
143
- status: C,
151
+ status: x,
144
152
  setDisplayActiveIndex: v
145
153
  }),
146
- [$, U, L, t, s, a, C]
154
+ [j, U, L, n, i, a, x]
147
155
  );
148
156
  };
149
157
  export {
150
- Oe as useAutocompleteDropdown
158
+ ke as useAutocompleteDropdown
151
159
  };
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("@floating-ui/react"),t=require("react"),Q=B=>{const{disabled:v,readOnly:m,lastSelectedOptionIndex:i}=B,[n,H]=t.useState(!1),x=t.useRef(n);x.current=n;const I=c.useFloatingNodeId(),[R,z]=t.useState(null),[d,y]=t.useState(!0),[S,k]=t.useState(!1),w=t.useCallback(e=>{R!==e&&(S?(k(!1),i===void 0&&y(!0)):y(!0),z(e))},[R,S,i]),r=t.useCallback((e,o,u)=>{H(e),e&&u==="click"&&o instanceof PointerEvent&&(k(!0),y(!1))},[]),{context:l,refs:s,floatingStyles:O}=c.useFloating({placement:"bottom-start",middleware:[c.flip(),c.size({apply({rects:e,elements:o}){Object.assign(o.floating.style,{width:`${e.reference.width}px`})}})],whileElementsMounted:c.autoUpdate,open:n,onOpenChange:r,nodeId:I}),f=t.useRef([]),C=t.useRef([]),L=c.useClick(l,{enabled:!v&&!m,keyboardHandlers:!0}),U=c.useRole(l,{role:"listbox"}),V=c.useDismiss(l),p=f.current.length===0?null:R??null,h=t.useRef(i??null),F=t.useMemo(()=>n?h.current:(h.current=i??null,f.current.length===0?null:i??null),[i,n]),_=c.useListNavigation(l,{enabled:!v&&!m,listRef:f,activeIndex:p,selectedIndex:F,onNavigate:w,focusItemOnHover:!1,focusItemOnOpen:"auto",openOnArrowKeyDown:!0,nested:!1,loop:!0,virtual:!0,scrollItemIntoView:!0}),$=c.useTypeahead(l,{enabled:!v&&!m,listRef:C,activeIndex:p,selectedIndex:F,onMatch:w}),{getReferenceProps:D,getFloatingProps:E,getItemProps:P}=c.useInteractions([L,U,V,_,$]),[A,G]=t.useState(n);t.useEffect(()=>G(n),[n]);const g=n?"open":"closed",b=t.useCallback(e=>{if(!n)return;const o=e.type==="focus"?e.target:e.relatedTarget,u=s.floating.current,a=s.domReference.current;if(u!=null&&u.contains(o)||a!=null&&a.contains(o)){e.preventDefault(),e.stopPropagation(),a==null||a.focus();return}r(!1,e.nativeEvent,"focus-out")},[n,s.domReference,s.floating,r]),M=t.useRef(n);t.useEffect(()=>{var e;M.current&&!n&&((e=s.domReference.current)==null||e.focus()),M.current=n},[n,s.domReference]);const K=t.useCallback((e={})=>({ref:s.setReference,...D({...e,onKeyDownCapture:o=>{var q;const u=x.current,a=s.domReference.current,N=a==null?void 0:a.getAttribute("aria-activedescendant"),j=N?document.getElementById(N):null;if((o.key==="Enter"||o.key===" ")&&u){if(o.preventDefault(),o.stopPropagation(),d&&j){const J=new KeyboardEvent("keydown",o.nativeEvent);j.dispatchEvent(J)}return}(q=e.onKeyDownCapture)==null||q.call(e,o)},onFocusCapture:b,onBlurCapture:b})}),[s.setReference,s.domReference,D,b,d]),T=t.useMemo(()=>({isMounted:A,status:g,getFloatingProps:E,getItemProps:P,floatingStyles:O,setOpen:r,nodeId:I,context:l,labelsRef:C,elementsRef:f,setFloating:s.setFloating,activeIndex:d?p:null}),[A,g,E,P,O,r,I,l,s.setFloating,p,d]);return t.useMemo(()=>({getFieldProps:K,dropdownProps:T,refs:s,open:n,setOpen:r,status:g}),[T,K,n,s,r,g])};exports.useSelectDropdown=Q;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("@floating-ui/react"),t=require("react"),Q=require("../../chunks/combobox.9scnST_n.js"),W=j=>{const{disabled:v,readOnly:m,lastSelectedOptionIndex:i}=j,[n,B]=t.useState(!1),x=t.useRef(n);x.current=n;const I=c.useFloatingNodeId(),[R,z]=t.useState(null),[d,y]=t.useState(!0),[w,S]=t.useState(!1),k=t.useCallback(e=>{R!==e&&(w?(S(!1),i===void 0&&y(!0)):y(!0),z(e))},[R,w,i]),l=t.useCallback((e,o,a)=>{B(e),e&&a==="click"&&o instanceof PointerEvent&&(S(!0),y(!1))},[]),{context:u,refs:s,floatingStyles:O}=c.useFloating({placement:"bottom-start",middleware:[c.flip(),c.size({apply({rects:e,elements:o,availableHeight:a}){Object.assign(o.floating.style,{width:`${e.reference.width}px`,maxHeight:Q.getDropdownMaxHeight(a)})}})],whileElementsMounted:c.autoUpdate,open:n,onOpenChange:l,nodeId:I}),f=t.useRef([]),h=t.useRef([]),L=c.useClick(u,{enabled:!v&&!m,keyboardHandlers:!0}),U=c.useRole(u,{role:"listbox"}),V=c.useDismiss(u),g=f.current.length===0?null:R??null,C=t.useRef(i??null),D=t.useMemo(()=>n?C.current:(C.current=i??null,f.current.length===0?null:i??null),[i,n]),_=c.useListNavigation(u,{enabled:!v&&!m,listRef:f,activeIndex:g,selectedIndex:D,onNavigate:k,focusItemOnHover:!1,focusItemOnOpen:"auto",openOnArrowKeyDown:!0,nested:!1,loop:!0,virtual:!0,scrollItemIntoView:!0}),$=c.useTypeahead(u,{enabled:!v&&!m,listRef:h,activeIndex:g,selectedIndex:D,onMatch:k}),{getReferenceProps:F,getFloatingProps:E,getItemProps:M}=c.useInteractions([L,U,V,_,$]),[P,G]=t.useState(n);t.useEffect(()=>G(n),[n]);const p=n?"open":"closed",b=t.useCallback(e=>{if(!n)return;const o=e.type==="focus"?e.target:e.relatedTarget,a=s.floating.current,r=s.domReference.current;if(a!=null&&a.contains(o)||r!=null&&r.contains(o)){e.preventDefault(),e.stopPropagation(),r==null||r.focus();return}l(!1,e.nativeEvent,"focus-out")},[n,s.domReference,s.floating,l]),A=t.useRef(n);t.useEffect(()=>{var e;A.current&&!n&&((e=s.domReference.current)==null||e.focus()),A.current=n},[n,s.domReference]);const K=t.useCallback((e={})=>({ref:s.setReference,...F({...e,onKeyDownCapture:o=>{var q;const a=x.current,r=s.domReference.current,H=r==null?void 0:r.getAttribute("aria-activedescendant"),N=H?document.getElementById(H):null;if((o.key==="Enter"||o.key===" ")&&a){if(o.preventDefault(),o.stopPropagation(),d&&N){const J=new KeyboardEvent("keydown",o.nativeEvent);N.dispatchEvent(J)}return}(q=e.onKeyDownCapture)==null||q.call(e,o)},onFocusCapture:b,onBlurCapture:b})}),[s.setReference,s.domReference,F,b,d]),T=t.useMemo(()=>({isMounted:P,status:p,getFloatingProps:E,getItemProps:M,floatingStyles:O,setOpen:l,nodeId:I,context:u,labelsRef:h,elementsRef:f,setFloating:s.setFloating,activeIndex:d?g:null}),[P,p,E,M,O,l,I,u,s.setFloating,g,d]);return t.useMemo(()=>({getFieldProps:K,dropdownProps:T,refs:s,open:n,setOpen:l,status:p}),[T,K,n,s,l,p])};exports.useSelectDropdown=W;
@@ -1,30 +1,32 @@
1
- import { useFloatingNodeId as Y, useFloating as Z, autoUpdate as ee, flip as te, size as ne, useClick as oe, useRole as se, useDismiss as ce, useListNavigation as re, useTypeahead as le, useInteractions as ae } from "@floating-ui/react";
2
- import { useState as i, useRef as u, useCallback as v, useMemo as O, useEffect as L } from "react";
3
- const fe = (U) => {
4
- const { disabled: m, readOnly: I, lastSelectedOptionIndex: a } = U, [t, V] = i(!1), b = u(t);
5
- b.current = t;
6
- const y = Y(), [R, _] = i(null), [d, x] = i(!0), [h, k] = i(!1), F = v((e) => {
7
- R !== e && (h ? (k(!1), a === void 0 && x(!0)) : x(!0), _(e));
8
- }, [R, h, a]), c = v((e, o, l) => {
9
- V(e), e && l === "click" && o instanceof PointerEvent && (k(!0), x(!1));
10
- }, []), { context: r, refs: n, floatingStyles: C } = Z({
1
+ import { useFloatingNodeId as Y, useFloating as Z, autoUpdate as ee, flip as te, size as ne, useClick as oe, useRole as se, useDismiss as ce, useListNavigation as re, useTypeahead as ae, useInteractions as le } from "@floating-ui/react";
2
+ import { useState as i, useRef as u, useCallback as m, useMemo as h, useEffect as L } from "react";
3
+ import { g as ie } from "../../chunks/combobox.--djB8BC.js";
4
+ const ge = (U) => {
5
+ const { disabled: v, readOnly: I, lastSelectedOptionIndex: l } = U, [t, V] = i(!1), O = u(t);
6
+ O.current = t;
7
+ const y = Y(), [x, _] = i(null), [d, R] = i(!0), [b, k] = i(!1), F = m((e) => {
8
+ x !== e && (b ? (k(!1), l === void 0 && R(!0)) : R(!0), _(e));
9
+ }, [x, b, l]), r = m((e, o, c) => {
10
+ V(e), e && c === "click" && o instanceof PointerEvent && (k(!0), R(!1));
11
+ }, []), { context: a, refs: n, floatingStyles: C } = Z({
11
12
  placement: "bottom-start",
12
13
  middleware: [
13
14
  te(),
14
15
  ne({
15
- apply({ rects: e, elements: o }) {
16
+ apply({ rects: e, elements: o, availableHeight: c }) {
16
17
  Object.assign(o.floating.style, {
17
- width: `${e.reference.width}px`
18
+ width: `${e.reference.width}px`,
19
+ maxHeight: ie(c)
18
20
  });
19
21
  }
20
22
  })
21
23
  ],
22
24
  whileElementsMounted: ee,
23
25
  open: t,
24
- onOpenChange: c,
26
+ onOpenChange: r,
25
27
  nodeId: y
26
- }), f = u([]), D = u([]), $ = oe(r, { enabled: !m && !I, keyboardHandlers: !0 }), q = se(r, { role: "listbox" }), G = ce(r), p = f.current.length === 0 ? null : R ?? null, E = u(a ?? null), S = O(() => t ? E.current : (E.current = a ?? null, f.current.length === 0 ? null : a ?? null), [a, t]), J = re(r, {
27
- enabled: !m && !I,
28
+ }), f = u([]), D = u([]), $ = oe(a, { enabled: !v && !I, keyboardHandlers: !0 }), q = se(a, { role: "listbox" }), G = ce(a), p = f.current.length === 0 ? null : x ?? null, E = u(l ?? null), S = h(() => t ? E.current : (E.current = l ?? null, f.current.length === 0 ? null : l ?? null), [l, t]), J = re(a, {
29
+ enabled: !v && !I,
28
30
  listRef: f,
29
31
  activeIndex: p,
30
32
  selectedIndex: S,
@@ -36,13 +38,13 @@ const fe = (U) => {
36
38
  loop: !0,
37
39
  virtual: !0,
38
40
  scrollItemIntoView: !0
39
- }), Q = le(r, {
40
- enabled: !m && !I,
41
+ }), Q = ae(a, {
42
+ enabled: !v && !I,
41
43
  listRef: D,
42
44
  activeIndex: p,
43
45
  selectedIndex: S,
44
46
  onMatch: F
45
- }), { getReferenceProps: A, getFloatingProps: P, getItemProps: K } = ae([
47
+ }), { getReferenceProps: A, getFloatingProps: P, getItemProps: K } = le([
46
48
  $,
47
49
  q,
48
50
  G,
@@ -50,32 +52,32 @@ const fe = (U) => {
50
52
  Q
51
53
  ]), [M, W] = i(t);
52
54
  L(() => W(t), [t]);
53
- const g = t ? "open" : "closed", w = v(
55
+ const g = t ? "open" : "closed", w = m(
54
56
  (e) => {
55
57
  if (!t)
56
58
  return;
57
- const o = e.type === "focus" ? e.target : e.relatedTarget, l = n.floating.current, s = n.domReference.current;
58
- if (l != null && l.contains(o) || s != null && s.contains(o)) {
59
+ const o = e.type === "focus" ? e.target : e.relatedTarget, c = n.floating.current, s = n.domReference.current;
60
+ if (c != null && c.contains(o) || s != null && s.contains(o)) {
59
61
  e.preventDefault(), e.stopPropagation(), s == null || s.focus();
60
62
  return;
61
63
  }
62
- c(!1, e.nativeEvent, "focus-out");
64
+ r(!1, e.nativeEvent, "focus-out");
63
65
  },
64
- [t, n.domReference, n.floating, c]
65
- ), N = u(t);
66
+ [t, n.domReference, n.floating, r]
67
+ ), H = u(t);
66
68
  L(() => {
67
69
  var e;
68
- N.current && !t && ((e = n.domReference.current) == null || e.focus()), N.current = t;
70
+ H.current && !t && ((e = n.domReference.current) == null || e.focus()), H.current = t;
69
71
  }, [t, n.domReference]);
70
- const T = v(
72
+ const N = m(
71
73
  (e = {}) => ({
72
74
  ref: n.setReference,
73
75
  ...A({
74
76
  ...e,
75
77
  onKeyDownCapture: (o) => {
76
78
  var z;
77
- const l = b.current, s = n.domReference.current, H = s == null ? void 0 : s.getAttribute("aria-activedescendant"), j = H ? document.getElementById(H) : null;
78
- if ((o.key === "Enter" || o.key === " ") && l) {
79
+ const c = O.current, s = n.domReference.current, B = s == null ? void 0 : s.getAttribute("aria-activedescendant"), j = B ? document.getElementById(B) : null;
80
+ if ((o.key === "Enter" || o.key === " ") && c) {
79
81
  if (o.preventDefault(), o.stopPropagation(), d && j) {
80
82
  const X = new KeyboardEvent("keydown", o.nativeEvent);
81
83
  j.dispatchEvent(X);
@@ -89,35 +91,35 @@ const fe = (U) => {
89
91
  })
90
92
  }),
91
93
  [n.setReference, n.domReference, A, w, d]
92
- ), B = O(
94
+ ), T = h(
93
95
  () => ({
94
96
  isMounted: M,
95
97
  status: g,
96
98
  getFloatingProps: P,
97
99
  getItemProps: K,
98
100
  floatingStyles: C,
99
- setOpen: c,
101
+ setOpen: r,
100
102
  nodeId: y,
101
- context: r,
103
+ context: a,
102
104
  labelsRef: D,
103
105
  elementsRef: f,
104
106
  setFloating: n.setFloating,
105
107
  activeIndex: d ? p : null
106
108
  }),
107
- [M, g, P, K, C, c, y, r, n.setFloating, p, d]
109
+ [M, g, P, K, C, r, y, a, n.setFloating, p, d]
108
110
  );
109
- return O(
111
+ return h(
110
112
  () => ({
111
- getFieldProps: T,
112
- dropdownProps: B,
113
+ getFieldProps: N,
114
+ dropdownProps: T,
113
115
  refs: n,
114
116
  open: t,
115
- setOpen: c,
117
+ setOpen: r,
116
118
  status: g
117
119
  }),
118
- [B, T, t, n, c, g]
120
+ [T, N, t, n, r, g]
119
121
  );
120
122
  };
121
123
  export {
122
- fe as useSelectDropdown
124
+ ge as useSelectDropdown
123
125
  };
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),y=require("clsx"),m=require("../../../chunks/classNames.DAeKwerT.js");require("../../../chunks/constants.hwjHOsvT.js");const p=require("./Panel.context.cjs.js"),q=require("../../FloatingUI/FloatingUI.root.cjs.js"),x=require("../../FloatingUI/FloatingUI.content.cjs.js"),P=require("./Panel.Inline.cjs.js"),i=require("../../../chunks/panel.module.BX1x4FlX.js"),{baseClassNamePrefix:t}=m.getBEMClassNames("panel"),b=({contextValue:r,panelClassName:a,resolvedPosition:l,showDivider:n,modalType:s,open:o,onOpenChange:c,transitionConfig:u,children:_,...d})=>{const g=s==="alert"?{escapeKey:!1,outsidePress:!1}:void 0,v=y(i.styles[`${t}__overlay-divider`],i.styles[`${t}__overlay-divider--${l}`]);return e.jsx(p.PanelContext.Provider,{value:r,children:e.jsx(q.FloatingUIRoot,{open:o,onOpenChange:c,portalled:!0,transitionConfig:u,dismiss:g,children:e.jsxs(x.Content,{className:a,skipFloatingStyles:!0,overlay:!0,...d,role:s==="alert"?"alertdialog":"dialog","data-position":l,children:[_,n&&e.jsx(P.InlineDivider,{position:l,className:v})]})})})};exports.OverlayPanel=b;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),m=require("clsx"),x=require("../../../chunks/classNames.DAeKwerT.js");require("../../../chunks/constants.hwjHOsvT.js");const b=require("./Panel.context.cjs.js"),p=require("./Panel.helpers.cjs.js"),y=require("../../FloatingUI/FloatingUI.root.cjs.js"),C=require("../../FloatingUI/FloatingUI.content.cjs.js"),I=require("./Panel.Inline.cjs.js"),n=require("../../../chunks/panel.module.BX1x4FlX.js"),{baseClassNamePrefix:t}=x.getBEMClassNames("panel"),f=({contextValue:r,panelClassName:a,resolvedPosition:l,showDivider:o,modalType:e,closeOnOutsidePress:c,open:_,onOpenChange:u,transitionConfig:d,children:g,...v})=>{const s=e==="isModal"||e==="alert",P=p.getPanelDismissConfig(e,c),q=m(n.styles[`${t}__overlay-divider`],n.styles[`${t}__overlay-divider--${l}`]);return i.jsx(b.PanelContext.Provider,{value:r,children:i.jsx(y.FloatingUIRoot,{open:_,onOpenChange:u,portalled:!0,transitionConfig:d,dismiss:P,focusConfiguration:s||void 0,children:i.jsxs(C.Content,{className:a,skipFloatingStyles:!0,overlay:s,...v,role:e==="alert"?"alertdialog":"dialog","data-position":l,children:[g,o&&i.jsx(I.InlineDivider,{position:l,className:q})]})})})};exports.OverlayPanel=f;
@@ -8,10 +8,11 @@ type OverlayPanelProps = {
8
8
  resolvedPosition: PanelPosition;
9
9
  showDivider: boolean;
10
10
  modalType?: PanelModalType;
11
+ closeOnOutsidePress?: boolean;
11
12
  open?: boolean;
12
13
  onOpenChange?: FloatingUIProps['onOpenChange'];
13
14
  transitionConfig: UseTransitionStylesProps;
14
15
  children: React.ReactNode;
15
16
  } & React.ComponentPropsWithoutRef<'aside'>;
16
- export declare const OverlayPanel: ({ contextValue, panelClassName, resolvedPosition, showDivider, modalType, open, onOpenChange, transitionConfig, children, ...props }: OverlayPanelProps) => import("react/jsx-runtime").JSX.Element;
17
+ export declare const OverlayPanel: ({ contextValue, panelClassName, resolvedPosition, showDivider, modalType, closeOnOutsidePress, open, onOpenChange, transitionConfig, children, ...props }: OverlayPanelProps) => import("react/jsx-runtime").JSX.Element;
17
18
  export {};
@@ -1,48 +1,51 @@
1
- import { jsx as r, jsxs as g } from "react/jsx-runtime";
2
- import y from "clsx";
3
- import { g as u } from "../../../chunks/classNames.BTJmrO_L.js";
1
+ import { jsx as r, jsxs as u } from "react/jsx-runtime";
2
+ import x from "clsx";
3
+ import { g as N } from "../../../chunks/classNames.BTJmrO_L.js";
4
4
  import "../../../chunks/constants.CKKGf1-i.js";
5
- import { PanelContext as x } from "./Panel.context.es.js";
6
- import { FloatingUIRoot as C } from "../../FloatingUI/FloatingUI.root.es.js";
7
- import { Content as N } from "../../FloatingUI/FloatingUI.content.es.js";
8
- import { InlineDivider as _ } from "./Panel.Inline.es.js";
9
- import { s } from "../../../chunks/panel.module.BVm3KvDs.js";
10
- const { baseClassNamePrefix: i } = u("panel"), B = ({
5
+ import { PanelContext as y } from "./Panel.context.es.js";
6
+ import { getPanelDismissConfig as _ } from "./Panel.helpers.es.js";
7
+ import { FloatingUIRoot as h } from "../../FloatingUI/FloatingUI.root.es.js";
8
+ import { Content as D } from "../../FloatingUI/FloatingUI.content.es.js";
9
+ import { InlineDivider as P } from "./Panel.Inline.es.js";
10
+ import { s as t } from "../../../chunks/panel.module.BVm3KvDs.js";
11
+ const { baseClassNamePrefix: e } = N("panel"), R = ({
11
12
  contextValue: a,
12
- panelClassName: t,
13
- resolvedPosition: e,
14
- showDivider: l,
15
- modalType: o,
16
- open: m,
17
- onOpenChange: n,
13
+ panelClassName: l,
14
+ resolvedPosition: o,
15
+ showDivider: n,
16
+ modalType: i,
17
+ closeOnOutsidePress: m,
18
+ open: f,
19
+ onOpenChange: c,
18
20
  transitionConfig: d,
19
21
  children: p,
20
- ...f
22
+ ...g
21
23
  }) => {
22
- const c = o === "alert" ? { escapeKey: !1, outsidePress: !1 } : void 0, v = y(
23
- s[`${i}__overlay-divider`],
24
- s[`${i}__overlay-divider--${e}`]
24
+ const s = i === "isModal" || i === "alert", v = _(i, m), C = x(
25
+ t[`${e}__overlay-divider`],
26
+ t[`${e}__overlay-divider--${o}`]
25
27
  );
26
- return /* @__PURE__ */ r(x.Provider, { value: a, children: /* @__PURE__ */ r(
27
- C,
28
+ return /* @__PURE__ */ r(y.Provider, { value: a, children: /* @__PURE__ */ r(
29
+ h,
28
30
  {
29
- open: m,
30
- onOpenChange: n,
31
+ open: f,
32
+ onOpenChange: c,
31
33
  portalled: !0,
32
34
  transitionConfig: d,
33
- dismiss: c,
34
- children: /* @__PURE__ */ g(
35
- N,
35
+ dismiss: v,
36
+ focusConfiguration: s || void 0,
37
+ children: /* @__PURE__ */ u(
38
+ D,
36
39
  {
37
- className: t,
40
+ className: l,
38
41
  skipFloatingStyles: !0,
39
- overlay: !0,
40
- ...f,
41
- role: o === "alert" ? "alertdialog" : "dialog",
42
- "data-position": e,
42
+ overlay: s,
43
+ ...g,
44
+ role: i === "alert" ? "alertdialog" : "dialog",
45
+ "data-position": o,
43
46
  children: [
44
47
  p,
45
- l && /* @__PURE__ */ r(_, { position: e, className: v })
48
+ n && /* @__PURE__ */ r(P, { position: o, className: C })
46
49
  ]
47
50
  }
48
51
  )
@@ -50,5 +53,5 @@ const { baseClassNamePrefix: i } = u("panel"), B = ({
50
53
  ) });
51
54
  };
52
55
  export {
53
- B as OverlayPanel
56
+ R as OverlayPanel
54
57
  };
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const w=require("react/jsx-runtime"),b=require("clsx"),C=require("react"),j=require("../../../chunks/classNames.DAeKwerT.js");require("../../../chunks/constants.hwjHOsvT.js");const B=require("./Panel.Header.cjs.js"),E=require("./Panel.Body.cjs.js"),T=require("./Panel.Footer.cjs.js"),r=require("./Panel.helpers.cjs.js"),F=require("./Panel.Inline.cjs.js"),H=require("./Panel.Overlay.cjs.js"),e=require("../../../chunks/panel.module.BX1x4FlX.js"),{baseClassNamePrefix:s}=j.getBEMClassNames("panel"),n=({children:o,className:f,padding:g="md",onOpenChange:$,open:_,size:a,dismissible:c=!0,closeButtonAriaLabel:u="Close panel",kind:d="inline",position:i,divider:O=!0,isAnimated:P=!0,onBeforeClose:h,modalType:t,...p})=>{process.env.NODE_ENV!=="production"&&t==="alert"&&c&&console.warn('Panel: `dismissible` is ignored when `modalType="alert"`. The close button is always hidden.');const y=t==="alert"?!1:c,l=r.getResolvedPanelPosition(i),m=b(e.styles[s],e.styles[`${s}--${d}`],a&&e.styles[`${s}--size-${a}`],e.styles[`${s}--padding-${g}`],e.styles[`${s}--position-${l}`],f),x=b(e.styles[`${s}__inline-wrapper`],a==="full"&&e.styles[`${s}__inline-wrapper--full`]),{requestClose:N,handleOverlayOpenChange:I}=r.usePanelClose(h,$),q=C.useMemo(()=>({dismissible:y,closeButtonAriaLabel:u,position:i,requestClose:N}),[y,u,i,N]),{showDivider:D,dividerBefore:M,dividerInner:R,dividerAfter:S}=r.getPanelDividerState(O,l),v=C.useMemo(()=>({duration:P?r.PANEL_TRANSITION_DURATION_MS:0}),[P]);return d==="inline"?w.jsx(F.InlinePanel,{contextValue:q,panelClassName:m,inlineWrapperClassName:x,resolvedPosition:l,dividerBefore:M,dividerInner:R,dividerAfter:S,open:_,transitionConfig:v,...p,children:o}):w.jsx(H.OverlayPanel,{contextValue:q,panelClassName:m,resolvedPosition:l,showDivider:D,modalType:t,open:_,onOpenChange:I,transitionConfig:v,...p,children:o})};n.displayName="Panel";n.Header=B.Header;n.Body=E.Body;n.Footer=T.Footer;exports.Panel=n;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const O=require("react/jsx-runtime"),f=require("clsx"),q=require("react"),S=require("../../../chunks/classNames.DAeKwerT.js");require("../../../chunks/constants.hwjHOsvT.js");const j=require("./Panel.Header.cjs.js"),B=require("./Panel.Body.cjs.js"),F=require("./Panel.Footer.cjs.js"),i=require("./Panel.helpers.cjs.js"),H=require("./Panel.Inline.cjs.js"),T=require("./Panel.Overlay.cjs.js"),e=require("../../../chunks/panel.module.BX1x4FlX.js"),{baseClassNamePrefix:s}=S.getBEMClassNames("panel"),l=({children:c,className:b,padding:C="md",onOpenChange:g,open:u,size:a,dismissible:_=!0,closeButtonAriaLabel:d="Close panel",kind:P="inline",position:o,divider:$=!0,isAnimated:p=!0,onBeforeClose:h,modalType:n,...t})=>{process.env.NODE_ENV!=="production"&&n==="alert"&&_&&console.warn('Panel: `dismissible` is ignored when `modalType="alert"`. The close button is always hidden.'),process.env.NODE_ENV!=="production"&&t.closeOnOutsidePress&&n!=="nonModal"&&n!==void 0&&console.warn('Panel: `closeOnOutsidePress` has no effect when `modalType` is not `"nonModal"`.');const N=n==="alert"?!1:_,r=i.getResolvedPanelPosition(o),v=f(e.styles[s],e.styles[`${s}--${P}`],a&&e.styles[`${s}--size-${a}`],e.styles[`${s}--padding-${C}`],e.styles[`${s}--position-${r}`],b),M=f(e.styles[`${s}__inline-wrapper`],a==="full"&&e.styles[`${s}__inline-wrapper--full`]),{requestClose:y,handleOverlayOpenChange:x}=i.usePanelClose(h,g),m=q.useMemo(()=>({dismissible:N,closeButtonAriaLabel:d,position:o,requestClose:y}),[N,d,o,y]),{showDivider:D,dividerBefore:E,dividerInner:I,dividerAfter:R}=i.getPanelDividerState($,r),w=q.useMemo(()=>({duration:p?i.PANEL_TRANSITION_DURATION_MS:0}),[p]);return P==="inline"?O.jsx(H.InlinePanel,{contextValue:m,panelClassName:v,inlineWrapperClassName:M,resolvedPosition:r,dividerBefore:E,dividerInner:I,dividerAfter:R,open:u,transitionConfig:w,...t,children:c}):O.jsx(T.OverlayPanel,{contextValue:m,panelClassName:v,resolvedPosition:r,showDivider:D,modalType:n,open:u,onOpenChange:x,transitionConfig:w,...t,children:c})};l.displayName="Panel";l.Header=j.Header;l.Body=B.Body;l.Footer=F.Footer;exports.Panel=l;
@@ -1,90 +1,92 @@
1
- import { jsx as $ } from "react/jsx-runtime";
2
- import g from "clsx";
3
- import { useMemo as _ } from "react";
1
+ import { jsx as C } from "react/jsx-runtime";
2
+ import $ from "clsx";
3
+ import { useMemo as g } from "react";
4
4
  import { g as R } from "../../../chunks/classNames.BTJmrO_L.js";
5
5
  import "../../../chunks/constants.CKKGf1-i.js";
6
6
  import { Header as S } from "./Panel.Header.es.js";
7
- import { Body as T } from "./Panel.Body.es.js";
7
+ import { Body as V } from "./Panel.Body.es.js";
8
8
  import { Footer as A } from "./Panel.Footer.es.js";
9
- import { usePanelClose as F, getPanelDividerState as H, PANEL_TRANSITION_DURATION_MS as V, getResolvedPanelPosition as j } from "./Panel.helpers.es.js";
9
+ import { usePanelClose as F, getPanelDividerState as H, PANEL_TRANSITION_DURATION_MS as T, getResolvedPanelPosition as j } from "./Panel.helpers.es.js";
10
10
  import { InlinePanel as q } from "./Panel.Inline.es.js";
11
11
  import { OverlayPanel as U } from "./Panel.Overlay.es.js";
12
12
  import { s as e } from "../../../chunks/panel.module.BVm3KvDs.js";
13
- const { baseClassNamePrefix: r } = R("panel"), s = ({
14
- children: t,
15
- className: O,
13
+ const { baseClassNamePrefix: o } = R("panel"), r = ({
14
+ children: l,
15
+ className: _,
16
16
  padding: h = "md",
17
17
  onOpenChange: w,
18
- open: l,
19
- size: n,
20
- dismissible: m = !0,
21
- closeButtonAriaLabel: p = "Close panel",
22
- kind: d = "inline",
23
- position: i,
24
- divider: y = !0,
25
- isAnimated: f = !0,
26
- onBeforeClose: x,
27
- modalType: a,
28
- ...c
18
+ open: m,
19
+ size: i,
20
+ dismissible: d = !0,
21
+ closeButtonAriaLabel: f = "Close panel",
22
+ kind: p = "inline",
23
+ position: t,
24
+ divider: D = !0,
25
+ isAnimated: c = !0,
26
+ onBeforeClose: E,
27
+ modalType: s,
28
+ ...a
29
29
  }) => {
30
- process.env.NODE_ENV !== "production" && a === "alert" && m && console.warn(
30
+ process.env.NODE_ENV !== "production" && s === "alert" && d && console.warn(
31
31
  'Panel: `dismissible` is ignored when `modalType="alert"`. The close button is always hidden.'
32
+ ), process.env.NODE_ENV !== "production" && a.closeOnOutsidePress && s !== "nonModal" && s !== void 0 && console.warn(
33
+ 'Panel: `closeOnOutsidePress` has no effect when `modalType` is not `"nonModal"`.'
32
34
  );
33
- const N = a === "alert" ? !1 : m, o = j(i), u = g(
34
- e[r],
35
- e[`${r}--${d}`],
36
- n && e[`${r}--size-${n}`],
37
- e[`${r}--padding-${h}`],
38
- e[`${r}--position-${o}`],
39
- O
40
- ), D = g(
41
- e[`${r}__inline-wrapper`],
42
- n === "full" && e[`${r}__inline-wrapper--full`]
43
- ), { requestClose: v, handleOverlayOpenChange: I } = F(
44
- x,
35
+ const u = s === "alert" ? !1 : d, n = j(t), N = $(
36
+ e[o],
37
+ e[`${o}--${p}`],
38
+ i && e[`${o}--size-${i}`],
39
+ e[`${o}--padding-${h}`],
40
+ e[`${o}--position-${n}`],
41
+ _
42
+ ), x = $(
43
+ e[`${o}__inline-wrapper`],
44
+ i === "full" && e[`${o}__inline-wrapper--full`]
45
+ ), { requestClose: v, handleOverlayOpenChange: y } = F(
46
+ E,
45
47
  w
46
- ), C = _(
47
- () => ({ dismissible: N, closeButtonAriaLabel: p, position: i, requestClose: v }),
48
- [N, p, i, v]
49
- ), { showDivider: E, dividerBefore: b, dividerInner: B, dividerAfter: M } = H(y, o), P = _(
50
- () => ({ duration: f ? V : 0 }),
51
- [f]
48
+ ), P = g(
49
+ () => ({ dismissible: u, closeButtonAriaLabel: f, position: t, requestClose: v }),
50
+ [u, f, t, v]
51
+ ), { showDivider: I, dividerBefore: M, dividerInner: b, dividerAfter: B } = H(D, n), O = g(
52
+ () => ({ duration: c ? T : 0 }),
53
+ [c]
52
54
  );
53
- return d === "inline" ? /* @__PURE__ */ $(
55
+ return p === "inline" ? /* @__PURE__ */ C(
54
56
  q,
55
57
  {
56
- contextValue: C,
57
- panelClassName: u,
58
- inlineWrapperClassName: D,
59
- resolvedPosition: o,
60
- dividerBefore: b,
61
- dividerInner: B,
62
- dividerAfter: M,
63
- open: l,
64
- transitionConfig: P,
65
- ...c,
66
- children: t
58
+ contextValue: P,
59
+ panelClassName: N,
60
+ inlineWrapperClassName: x,
61
+ resolvedPosition: n,
62
+ dividerBefore: M,
63
+ dividerInner: b,
64
+ dividerAfter: B,
65
+ open: m,
66
+ transitionConfig: O,
67
+ ...a,
68
+ children: l
67
69
  }
68
- ) : /* @__PURE__ */ $(
70
+ ) : /* @__PURE__ */ C(
69
71
  U,
70
72
  {
71
- contextValue: C,
72
- panelClassName: u,
73
- resolvedPosition: o,
74
- showDivider: E,
75
- modalType: a,
76
- open: l,
77
- onOpenChange: I,
78
- transitionConfig: P,
79
- ...c,
80
- children: t
73
+ contextValue: P,
74
+ panelClassName: N,
75
+ resolvedPosition: n,
76
+ showDivider: I,
77
+ modalType: s,
78
+ open: m,
79
+ onOpenChange: y,
80
+ transitionConfig: O,
81
+ ...a,
82
+ children: l
81
83
  }
82
84
  );
83
85
  };
84
- s.displayName = "Panel";
85
- s.Header = S;
86
- s.Body = T;
87
- s.Footer = A;
86
+ r.displayName = "Panel";
87
+ r.Header = S;
88
+ r.Body = V;
89
+ r.Footer = A;
88
90
  export {
89
- s as Panel
91
+ r as Panel
90
92
  };
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react"),d=400,P=s=>s||"end",f=(s,t)=>{const r=s&&t!=="full";return{showDivider:r,dividerBefore:r&&t!=="start"&&t!=="bottom",dividerInner:r&&t==="bottom",dividerAfter:r&&t==="start"}},v=s=>s==="escape-key"?"escapeKey":s==="outside-press"?"outsidePress":"programmatic",N=(s,t)=>{const r=c.useCallback(l=>{if(!s){t==null||t(!1);return}const e=s(l);e instanceof Promise?e.then(i=>{i&&(t==null||t(!1))}).catch(()=>{}):e&&(t==null||t(!1))},[s,t]),u=c.useCallback((l,e,i)=>{l?t==null||t(!0):r(v(i))},[t,r]);return{requestClose:r,handleOverlayOpenChange:u}};exports.PANEL_TRANSITION_DURATION_MS=d;exports.getPanelDividerState=f;exports.getResolvedPanelPosition=P;exports.usePanelClose=N;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react"),d=400,f=t=>t||"end",P=(t,s)=>{const e=t&&s!=="full";return{showDivider:e,dividerBefore:e&&s!=="start"&&s!=="bottom",dividerInner:e&&s==="bottom",dividerAfter:e&&s==="start"}},a=(t,s)=>{if(t!=="isModal")return t==="alert"?{escapeKey:!1,outsidePress:!1}:{escapeKey:!1,outsidePress:s??!1}},v=t=>t==="escape-key"?"escapeKey":t==="outside-press"?"outsidePress":"programmatic",N=(t,s)=>{const e=u.useCallback(i=>{if(!t){s==null||s(!1);return}const r=t(i);r instanceof Promise?r.then(l=>{l&&(s==null||s(!1))}).catch(()=>{}):r&&(s==null||s(!1))},[t,s]),c=u.useCallback((i,r,l)=>{i?s==null||s(!0):e(v(l))},[s,e]);return{requestClose:e,handleOverlayOpenChange:c}};exports.PANEL_TRANSITION_DURATION_MS=d;exports.getPanelDismissConfig=a;exports.getPanelDividerState=P;exports.getResolvedPanelPosition=f;exports.usePanelClose=N;
@@ -1,5 +1,5 @@
1
1
  import { OpenChangeReason } from '@floating-ui/react';
2
- import { PanelCloseReason, PanelPosition, PanelProps } from './Panel.types';
2
+ import { PanelCloseReason, PanelModalType, PanelPosition, PanelProps } from './Panel.types';
3
3
  export declare const PANEL_TRANSITION_DURATION_MS = 400;
4
4
  export declare const getResolvedPanelPosition: (position?: PanelPosition) => PanelPosition;
5
5
  export declare const getPanelDividerState: (divider: boolean, position?: PanelPosition) => {
@@ -8,6 +8,17 @@ export declare const getPanelDividerState: (divider: boolean, position?: PanelPo
8
8
  dividerInner: boolean;
9
9
  dividerAfter: boolean;
10
10
  };
11
+ /**
12
+ * Returns the floating-ui `dismiss` config for an overlay panel.
13
+ *
14
+ * - `isModal` — `undefined` (floating-ui defaults: ESC + backdrop click both close)
15
+ * - `nonModal` / omitted — ESC suppressed; outside-press controlled by `closeOnOutsidePress`
16
+ * - `alert` — ESC and outside-press both suppressed
17
+ */
18
+ export declare const getPanelDismissConfig: (modalType: PanelModalType | undefined, closeOnOutsidePress?: boolean) => {
19
+ escapeKey: boolean;
20
+ outsidePress: boolean;
21
+ } | undefined;
11
22
  export declare const usePanelClose: (onBeforeClose: PanelProps["onBeforeClose"], onOpenChange: PanelProps["onOpenChange"]) => {
12
23
  requestClose: (reason: PanelCloseReason) => void;
13
24
  handleOverlayOpenChange: (nextOpen: boolean, _event?: Event, floatingReason?: OpenChangeReason) => void;
@@ -1,39 +1,43 @@
1
- import { useCallback as u } from "react";
2
- const v = 400, m = (r) => r || "end", P = (r, t) => {
3
- const s = r && t !== "full";
1
+ import { useCallback as c } from "react";
2
+ const P = 400, v = (t) => t || "end", m = (t, s) => {
3
+ const r = t && s !== "full";
4
4
  return {
5
- showDivider: s,
6
- dividerBefore: s && t !== "start" && t !== "bottom",
5
+ showDivider: r,
6
+ dividerBefore: r && s !== "start" && s !== "bottom",
7
7
  // For 'bottom' panels the divider must sit inside the scrollable wrapper (above the content),
8
8
  // not outside it — so it is rendered via dividerInner rather than dividerBefore.
9
- dividerInner: s && t === "bottom",
10
- dividerAfter: s && t === "start"
9
+ dividerInner: r && s === "bottom",
10
+ dividerAfter: r && s === "start"
11
11
  };
12
- }, e = (r) => r === "escape-key" ? "escapeKey" : r === "outside-press" ? "outsidePress" : "programmatic", A = (r, t) => {
13
- const s = u(
12
+ }, a = (t, s) => {
13
+ if (t !== "isModal")
14
+ return t === "alert" ? { escapeKey: !1, outsidePress: !1 } : { escapeKey: !1, outsidePress: s ?? !1 };
15
+ }, u = (t) => t === "escape-key" ? "escapeKey" : t === "outside-press" ? "outsidePress" : "programmatic", y = (t, s) => {
16
+ const r = c(
14
17
  (i) => {
15
- if (!r) {
16
- t == null || t(!1);
18
+ if (!t) {
19
+ s == null || s(!1);
17
20
  return;
18
21
  }
19
- const c = r(i);
20
- c instanceof Promise ? c.then((l) => {
21
- l && (t == null || t(!1));
22
+ const e = t(i);
23
+ e instanceof Promise ? e.then((l) => {
24
+ l && (s == null || s(!1));
22
25
  }).catch(() => {
23
- }) : c && (t == null || t(!1));
24
- },
25
- [r, t]
26
- ), d = u(
27
- (i, c, l) => {
28
- i ? t == null || t(!0) : s(e(l));
26
+ }) : e && (s == null || s(!1));
29
27
  },
30
28
  [t, s]
29
+ ), f = c(
30
+ (i, e, l) => {
31
+ i ? s == null || s(!0) : r(u(l));
32
+ },
33
+ [s, r]
31
34
  );
32
- return { requestClose: s, handleOverlayOpenChange: d };
35
+ return { requestClose: r, handleOverlayOpenChange: f };
33
36
  };
34
37
  export {
35
- v as PANEL_TRANSITION_DURATION_MS,
36
- P as getPanelDividerState,
37
- m as getResolvedPanelPosition,
38
- A as usePanelClose
38
+ P as PANEL_TRANSITION_DURATION_MS,
39
+ a as getPanelDismissConfig,
40
+ m as getPanelDividerState,
41
+ v as getResolvedPanelPosition,
42
+ y as usePanelClose
39
43
  };
@@ -112,6 +112,12 @@ export interface OverlayPanelProps extends BasePanelProps {
112
112
  * @default 'nonModal'
113
113
  */
114
114
  modalType?: PanelModalType;
115
+ /**
116
+ * When `modalType="nonModal"`, allows the panel to close when the user
117
+ * clicks outside it. Has no effect for `'isModal'` or `'alert'` panels.
118
+ * @default false
119
+ */
120
+ closeOnOutsidePress?: boolean;
115
121
  }
116
122
  export type PanelProps = InlinePanelProps | OverlayPanelProps;
117
123
  export type { PanelHeaderProps } from './Panel.Header';
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("@floating-ui/react"),n=require("react"),_=require("../../FloatingUI/useTyping.cjs.js"),N=require("../../FloatingUI/useBlur.cjs.js"),T=S=>{const{disabled:r,readOnly:l,enabled:e=!0}=S,[s,i]=n.useState(!1),d=n.useRef(s);d.current=s;const[f,g]=n.useState(null);n.useEffect(()=>s?void 0:g(null),[s]);const{context:c,refs:a,floatingStyles:p}=t.useFloating({placement:"bottom-start",middleware:[t.flip(),t.size({apply({elements:o,rects:u}){Object.assign(o.floating.style,{width:`${u.reference.width}px`})}})],whileElementsMounted:t.autoUpdate,open:s,onOpenChange:i}),b=n.useRef([]),k=n.useRef([]),h=t.useClick(c,{enabled:!s&&e&&!r&&!l,toggle:!1,stickIfOpen:!1,keyboardHandlers:!1}),x=t.useRole(c,{enabled:e,role:"listbox"}),E=_.default(c,{enabled:!s&&e&&!r&&!l,event:"keyboard"}),M=t.useFocus(c,{enabled:!s&&e&&!r&&!l,visibleOnly:!0}),q=t.useDismiss(c,{enabled:s&&e&&!r&&!l,escapeKey:!0,outsidePress:!0,referencePress:!1}),C=N.useBlur(c,{enabled:e&&!r&&!l}),D=t.useListNavigation(c,{enabled:e&&!r&&!l,listRef:b,activeIndex:f,onNavigate:g,focusItemOnHover:!1,focusItemOnOpen:"auto",openOnArrowKeyDown:!0,nested:!1,loop:!0,virtual:!0,scrollItemIntoView:!0}),{getReferenceProps:m,getFloatingProps:R,getItemProps:y}=t.useInteractions([x,E,D]),{getReferenceProps:I}=t.useInteractions([h,M,q,C]),{isMounted:v,styles:P}=t.useTransitionStyles(c,{duration:50});n.useEffect(()=>{if(!e||r||l||d.current)return;const o=a.domReference.current,u=document.activeElement;o&&u&&o.contains(u)&&i(!0)},[e,r,l,i,a.domReference]);const O=n.useCallback((o={})=>e?m(o):o,[m,e]),w=n.useCallback((o={})=>e?{ref:a.setReference,...I(o)}:o,[e,a.setReference,I]),F=n.useMemo(()=>({isMounted:v,getFloatingProps:R,getItemProps:y,floatingStyles:{...p,...P},setOpen:i,labelsRef:k,elementsRef:b,setFloating:a.setFloating,activeIndex:f,open:s}),[v,R,y,p,P,a.setFloating,f,s]);return n.useMemo(()=>({getFieldProps:w,getInputProps:O,dropdownProps:F,refs:a}),[F,w,O,a])};exports.useSearchDropdown=T;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("@floating-ui/react"),o=require("react"),H=require("../../FloatingUI/useTyping.cjs.js"),_=require("../../FloatingUI/useBlur.cjs.js"),N=h=>{const{disabled:r,readOnly:l,enabled:e=!0}=h,[n,i]=o.useState(!1),d=o.useRef(n);d.current=n;const[f,g]=o.useState(null);o.useEffect(()=>n?void 0:g(null),[n]);const{context:c,refs:a,floatingStyles:p}=s.useFloating({placement:"bottom-start",middleware:[s.flip(),s.size({apply({elements:t,rects:u,availableHeight:S}){Object.assign(t.floating.style,{width:`${u.reference.width}px`}),S<t.floating.scrollHeight?Object.assign(t.floating.style,{maxHeight:`${S}px`,overflowY:"auto"}):Object.assign(t.floating.style,{maxHeight:""})}})],whileElementsMounted:s.autoUpdate,open:n,onOpenChange:i}),b=o.useRef([]),x=o.useRef([]),k=s.useClick(c,{enabled:!n&&e&&!r&&!l,toggle:!1,stickIfOpen:!1,keyboardHandlers:!1}),E=s.useRole(c,{enabled:e,role:"listbox"}),M=H.default(c,{enabled:!n&&e&&!r&&!l,event:"keyboard"}),j=s.useFocus(c,{enabled:!n&&e&&!r&&!l,visibleOnly:!0}),q=s.useDismiss(c,{enabled:n&&e&&!r&&!l,escapeKey:!0,outsidePress:!0,referencePress:!1}),C=_.useBlur(c,{enabled:e&&!r&&!l}),D=s.useListNavigation(c,{enabled:e&&!r&&!l,listRef:b,activeIndex:f,onNavigate:g,focusItemOnHover:!1,focusItemOnOpen:"auto",openOnArrowKeyDown:!0,nested:!1,loop:!0,virtual:!0,scrollItemIntoView:!0}),{getReferenceProps:m,getFloatingProps:y,getItemProps:R}=s.useInteractions([E,M,D]),{getReferenceProps:I}=s.useInteractions([k,j,q,C]),{isMounted:v,styles:O}=s.useTransitionStyles(c,{duration:50});o.useEffect(()=>{if(!e||r||l||d.current)return;const t=a.domReference.current,u=document.activeElement;t&&u&&t.contains(u)&&i(!0)},[e,r,l,i,a.domReference]);const P=o.useCallback((t={})=>e?m(t):t,[m,e]),w=o.useCallback((t={})=>e?{ref:a.setReference,...I(t)}:t,[e,a.setReference,I]),F=o.useMemo(()=>({isMounted:v,getFloatingProps:y,getItemProps:R,floatingStyles:{...p,...O},setOpen:i,labelsRef:x,elementsRef:b,setFloating:a.setFloating,activeIndex:f,open:n}),[v,y,R,p,O,a.setFloating,f,n]);return o.useMemo(()=>({getFieldProps:w,getInputProps:P,dropdownProps:F,refs:a}),[F,w,P,a])};exports.useSearchDropdown=N;
@@ -1,35 +1,42 @@
1
- import { useFloating as j, autoUpdate as z, flip as B, size as L, useClick as U, useRole as V, useFocus as $, useDismiss as q, useListNavigation as G, useInteractions as F, useTransitionStyles as J } from "@floating-ui/react";
2
- import { useState as k, useRef as u, useEffect as x, useCallback as h, useMemo as S } from "react";
1
+ import { useFloating as $, autoUpdate as z, flip as B, size as L, useClick as U, useRole as V, useFocus as Y, useDismiss as q, useListNavigation as G, useInteractions as F, useTransitionStyles as J } from "@floating-ui/react";
2
+ import { useState as h, useRef as u, useEffect as k, useCallback as S, useMemo as E } from "react";
3
3
  import Q from "../../FloatingUI/useTyping.es.js";
4
4
  import { useBlur as W } from "../../FloatingUI/useBlur.es.js";
5
- const ee = (E) => {
6
- const { disabled: n, readOnly: o, enabled: e = !0 } = E, [t, c] = k(!1), f = u(t);
7
- f.current = t;
8
- const [a, d] = k(null);
9
- x(() => t ? void 0 : d(null), [t]);
10
- const { context: r, refs: l, floatingStyles: p } = j({
5
+ const te = (H) => {
6
+ const { disabled: n, readOnly: o, enabled: e = !0 } = H, [s, i] = h(!1), f = u(s);
7
+ f.current = s;
8
+ const [a, d] = h(null);
9
+ k(() => s ? void 0 : d(null), [s]);
10
+ const { context: r, refs: l, floatingStyles: g } = $({
11
11
  placement: "bottom-start",
12
12
  middleware: [
13
13
  B(),
14
+ // Search does not cap the dropdown to a fixed number of items like Select
15
+ // and Autocomplete — it shows all results and only constrains to viewport.
14
16
  L({
15
- apply({ elements: s, rects: i }) {
16
- Object.assign(s.floating.style, {
17
- width: `${i.reference.width}px`
17
+ apply({ elements: t, rects: c, availableHeight: x }) {
18
+ Object.assign(t.floating.style, {
19
+ width: `${c.reference.width}px`
20
+ }), x < t.floating.scrollHeight ? Object.assign(t.floating.style, {
21
+ maxHeight: `${x}px`,
22
+ overflowY: "auto"
23
+ }) : Object.assign(t.floating.style, {
24
+ maxHeight: ""
18
25
  });
19
26
  }
20
27
  })
21
28
  ],
22
29
  whileElementsMounted: z,
23
- open: t,
24
- onOpenChange: c
25
- }), g = u([]), C = u([]), D = U(r, {
26
- enabled: !t && e && !n && !o,
30
+ open: s,
31
+ onOpenChange: i
32
+ }), p = u([]), j = u([]), C = U(r, {
33
+ enabled: !s && e && !n && !o,
27
34
  toggle: !1,
28
35
  stickIfOpen: !1,
29
36
  keyboardHandlers: !1
30
- }), M = V(r, { enabled: e, role: "listbox" }), N = Q(r, { enabled: !t && e && !n && !o, event: "keyboard" }), A = $(r, { enabled: !t && e && !n && !o, visibleOnly: !0 }), H = q(r, { enabled: t && e && !n && !o, escapeKey: !0, outsidePress: !0, referencePress: !1 }), K = W(r, { enabled: e && !n && !o }), T = G(r, {
37
+ }), D = V(r, { enabled: e, role: "listbox" }), M = Q(r, { enabled: !s && e && !n && !o, event: "keyboard" }), N = Y(r, { enabled: !s && e && !n && !o, visibleOnly: !0 }), A = q(r, { enabled: s && e && !n && !o, escapeKey: !0, outsidePress: !0, referencePress: !1 }), K = W(r, { enabled: e && !n && !o }), T = G(r, {
31
38
  enabled: e && !n && !o,
32
- listRef: g,
39
+ listRef: p,
33
40
  activeIndex: a,
34
41
  onNavigate: d,
35
42
  focusItemOnHover: !1,
@@ -40,53 +47,53 @@ const ee = (E) => {
40
47
  virtual: !0,
41
48
  scrollItemIntoView: !0
42
49
  }), { getReferenceProps: m, getFloatingProps: b, getItemProps: y } = F([
50
+ D,
43
51
  M,
44
- N,
45
52
  T
46
- ]), { getReferenceProps: R } = F([D, A, H, K]), { isMounted: v, styles: I } = J(r, { duration: 50 });
47
- x(() => {
53
+ ]), { getReferenceProps: R } = F([C, N, A, K]), { isMounted: v, styles: O } = J(r, { duration: 50 });
54
+ k(() => {
48
55
  if (!e || n || o || f.current)
49
56
  return;
50
- const s = l.domReference.current, i = document.activeElement;
51
- s && i && s.contains(i) && c(!0);
52
- }, [e, n, o, c, l.domReference]);
53
- const P = h(
54
- (s = {}) => e ? m(s) : s,
57
+ const t = l.domReference.current, c = document.activeElement;
58
+ t && c && t.contains(c) && i(!0);
59
+ }, [e, n, o, i, l.domReference]);
60
+ const I = S(
61
+ (t = {}) => e ? m(t) : t,
55
62
  [m, e]
56
- ), O = h(
57
- (s = {}) => e ? {
63
+ ), P = S(
64
+ (t = {}) => e ? {
58
65
  ref: l.setReference,
59
- ...R(s)
60
- } : s,
66
+ ...R(t)
67
+ } : t,
61
68
  [e, l.setReference, R]
62
- ), w = S(
69
+ ), w = E(
63
70
  () => ({
64
71
  isMounted: v,
65
72
  getFloatingProps: b,
66
73
  getItemProps: y,
67
74
  floatingStyles: {
68
- ...p,
69
- ...I
75
+ ...g,
76
+ ...O
70
77
  },
71
- setOpen: c,
72
- labelsRef: C,
73
- elementsRef: g,
78
+ setOpen: i,
79
+ labelsRef: j,
80
+ elementsRef: p,
74
81
  setFloating: l.setFloating,
75
82
  activeIndex: a,
76
- open: t
83
+ open: s
77
84
  }),
78
- [v, b, y, p, I, l.setFloating, a, t]
85
+ [v, b, y, g, O, l.setFloating, a, s]
79
86
  );
80
- return S(
87
+ return E(
81
88
  () => ({
82
- getFieldProps: O,
83
- getInputProps: P,
89
+ getFieldProps: P,
90
+ getInputProps: I,
84
91
  dropdownProps: w,
85
92
  refs: l
86
93
  }),
87
- [w, O, P, l]
94
+ [w, P, I, l]
88
95
  );
89
96
  };
90
97
  export {
91
- ee as useSearchDropdown
98
+ te as useSearchDropdown
92
99
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@viasat/beam-react",
3
- "version": "2.15.0",
3
+ "version": "2.17.0",
4
4
  "description": "React component library for the Beam design system",
5
5
  "license": "MIT",
6
6
  "author": "Viasat",
@@ -59,11 +59,11 @@
59
59
  "access": "public"
60
60
  },
61
61
  "dependencies": {
62
- "@viasat/beam-fonts": "2.15.0",
63
- "@viasat/beam-shared": "2.15.0",
64
- "@viasat/beam-styles": "2.15.0",
65
- "@viasat/beam-tokens": "2.15.0",
66
- "@viasat/beam-icons": "2.15.0",
62
+ "@viasat/beam-fonts": "2.17.0",
63
+ "@viasat/beam-shared": "2.17.0",
64
+ "@viasat/beam-styles": "2.17.0",
65
+ "@viasat/beam-tokens": "2.17.0",
66
+ "@viasat/beam-icons": "2.17.0",
67
67
  "clsx": "^1.2.1",
68
68
  "@floating-ui/react": "^0.26.18",
69
69
  "@stepperize/react": "^5.1.5",