@box/combobox-with-api 1.42.33 → 1.42.34

package/dist/esm/lib/components/combobox-with-api-pagination/utils/use-intersection-observer.js

@@ -1,85 +1,75 @@
-import { useState as y, useRef as R, useCallback as f } from "react";
-const k = "0px", g = [0];
-function C() {
-  const b = /* @__PURE__ */ new Map();
-  function a({
-    root: s,
-    rootMargin: t,
-    threshold: c
-  }) {
-    let r = b.get(s);
-    r || (r = /* @__PURE__ */ new Map(), b.set(s, r));
-    const i = JSON.stringify({
-      rootMargin: t,
-      threshold: c
-    });
-    let n = r.get(i);
-    if (!n) {
-      const e = /* @__PURE__ */ new Map();
-      n = {
-        observer: new IntersectionObserver((O) => {
-          O.forEach((v) => {
-            e.get(v.target)?.(v);
-          });
-        }, {
-          root: s,
-          rootMargin: t,
-          threshold: c
-        }),
-        entryCallbacks: e
-      }, r.set(i, n);
-    }
-    return {
-      observe: (e, l) => {
-        n?.entryCallbacks.set(e, l), n?.observer.observe(e);
-      },
-      unobserve: (e) => {
-        n?.entryCallbacks.delete(e), n?.observer.unobserve(e);
-      }
-    };
-  }
-  return {
-    getObserver: a
-  };
+import { useCallback as e, useRef as t, useState as n } from "react";
+var r = "0px", i = [0];
+function a() {
+	let e = /* @__PURE__ */ new Map();
+	function t({ root: t, rootMargin: n, threshold: r }) {
+		let i = e.get(t);
+		i || (i = /* @__PURE__ */ new Map(), e.set(t, i));
+		let a = JSON.stringify({
+			rootMargin: n,
+			threshold: r
+		}), o = i.get(a);
+		if (!o) {
+			let e = /* @__PURE__ */ new Map();
+			o = {
+				observer: new IntersectionObserver((t) => {
+					t.forEach((t) => {
+						e.get(t.target)?.(t);
+					});
+				}, {
+					root: t,
+					rootMargin: n,
+					threshold: r
+				}),
+				entryCallbacks: e
+			}, i.set(a, o);
+		}
+		return {
+			observe: (e, t) => {
+				o?.entryCallbacks.set(e, t), o?.observer.observe(e);
+			},
+			unobserve: (e) => {
+				o?.entryCallbacks.delete(e), o?.observer.unobserve(e);
+			}
+		};
+	}
+	return { getObserver: t };
 }
-const E = C();
-function p(b) {
-  const a = b?.rootMargin ?? k, s = b?.threshold ?? g, t = R(null), c = R(null), r = R(null), [i, n] = y(), e = f(() => {
-    const o = t.current;
-    if (!o) {
-      n(void 0);
-      return;
-    }
-    const u = E.getObserver({
-      root: c.current,
-      rootMargin: a,
-      threshold: s
-    });
-    u.observe(o, (h) => {
-      n(h);
-    }), r.current = u;
-  }, [a, s]), l = f(() => {
-    const o = r.current, u = t.current;
-    u && o?.unobserve(u), r.current = null;
-  }, []), O = f((o) => {
-    l(), t.current = o, e();
-  }, [e, l]), v = f((o) => {
-    l(), c.current = o, e();
-  }, [e, l]);
-  return [O, {
-    entry: i,
-    rootRef: v
-  }];
+var o = a();
+function s(a) {
+	let s = a?.rootMargin ?? r, c = a?.threshold ?? i, l = t(null), u = t(null), d = t(null), [f, p] = n(), m = e(() => {
+		let e = l.current;
+		if (!e) {
+			p(void 0);
+			return;
+		}
+		let t = o.getObserver({
+			root: u.current,
+			rootMargin: s,
+			threshold: c
+		});
+		t.observe(e, (e) => {
+			p(e);
+		}), d.current = t;
+	}, [s, c]), h = e(() => {
+		let e = d.current, t = l.current;
+		t && e?.unobserve(t), d.current = null;
+	}, []);
+	return [e((e) => {
+		h(), l.current = e, m();
+	}, [m, h]), {
+		entry: f,
+		rootRef: e((e) => {
+			h(), u.current = e, m();
+		}, [m, h])
+	}];
 }
-function w(b) {
-  const [a, s] = p(b), t = !!s.entry?.isIntersecting, [c, r] = y(t);
-  return t && !c && r(!0), [a, {
-    ...s,
-    isVisible: t,
-    wasEverVisible: c
-  }];
+function c(e) {
+	let [t, r] = s(e), i = !!r.entry?.isIntersecting, [a, o] = n(i);
+	return i && !a && o(!0), [t, {
+		...r,
+		isVisible: i,
+		wasEverVisible: a
+	}];
 }
-export {
-  C as createObserverCache,
-  w as useTrackVisibility
-};
+export { a as createObserverCache, c as useTrackVisibility };

package/dist/esm/lib/components/combobox-with-api-tree-view/combobox-with-api-tree-view.js

@@ -1,175 +1,134 @@
-import { useComboboxStore as $, ComboboxProvider as ee, PopoverAnchor as oe, Combobox as te, ComboboxCancel as le, ComboboxPopover as ae, ComboboxItem as se } from "@ariakit/react";
-import { useLabelable as ne, ChipsGroup as re, InputChip as ie, IconButton as ce } from "@box/blueprint-web";
-import { XMark as ue, Search as me } from "@box/blueprint-web-assets/icons/Fill";
-import { Size6 as R, Size1 as pe, IconIconOnLightSecondary as de } from "@box/blueprint-web-assets/tokens/tokens";
-import d from "clsx";
-import { forwardRef as be, useId as he, useState as b, useRef as h, useCallback as A } from "react";
-import { useIntl as fe } from "react-intl";
-import O from "../combobox-with-api-pagination/messages.js";
-import { useControllableState as Ce } from "../combobox-with-api-pagination/utils/use-controllable-state.js";
-import { s as t, D as ge } from "../../../../chunks/dynamic-loading-tree.js";
-import { jsxs as r, jsx as o } from "react/jsx-runtime";
-const ve = () => /* @__PURE__ */ o(me, {
-  color: de,
-  height: R,
-  role: "presentation",
-  style: {
-    padding: pe,
-    boxSizing: "border-box"
-  },
-  width: R
-}), ze = /* @__PURE__ */ be(function(T, Ie) {
-  const {
-    className: B,
-    closeOnSelection: E = !1,
-    dataTargetId: k,
-    defaultFetcher: z,
-    defaultValue: D = [],
-    disabled: n,
-    hideLabel: f,
-    initialOpen: M = !1,
-    label: P,
-    levels: W,
-    loadingAriaLabel: F,
-    multiselect: C = !1,
-    noResultMessage: j,
-    onValueChange: G,
-    onOpenChange: K,
-    placeholder: U,
-    portalElement: X,
-    selectableLevels: q,
-    treeAriaLabel: H,
-    value: J
-  } = T, {
-    formatMessage: g
-  } = fe(), i = he(), [v, x] = b(M), [a, c] = Ce({
-    prop: J,
-    defaultProp: D,
-    onChange: G
-  }), [I, S] = b(""), V = h(null), [Q, w] = b(!1), Y = A(() => w(!0), []), Z = A(() => w(!1), []), L = h("");
-  Q || (L.current = I.trimStart());
-  const u = $({
-    includesBaseElement: !0,
-    virtualFocus: !1,
-    value: I,
-    setValue: (e) => {
-      S(e);
-    },
-    open: v,
-    setOpen: (e) => {
-      x(e), K?.(e);
-    }
-  }), y = a.length > 0, N = a.length > 0, _ = ne(P, i), m = h(null);
-  return /* @__PURE__ */ r(ee, {
-    store: u,
-    children: [/* @__PURE__ */ o(oe, {
-      children: /* @__PURE__ */ r("div", {
-        className: d(t.container, B, {
-          [t.disabled]: n
-        }),
-        children: [/* @__PURE__ */ o(_, {
-          className: d(t.label, {
-            [t.hiddenLabel]: f
-          }),
-          hideLabel: f
-        }), /* @__PURE__ */ o("div", {
-          children: /* @__PURE__ */ r("div", {
-            className: d(t.comboboxContainer, {
-              [t.withChips]: N,
-              [t.withComboboxButtons]: y
-            }),
-            children: [N && /* @__PURE__ */ o(re, {
-              children: a.map((e) => /* @__PURE__ */ o(ie, {
-                label: e.displayValue,
-                onDelete: () => {
-                  if (n)
-                    return;
-                  const l = a.filter((s) => s.value !== e.value);
-                  c(l);
-                },
-                tooltip: e.displayValue
-              }, e.value))
-            }), /* @__PURE__ */ r("div", {
-              className: t.textInputWrapper,
-              children: [/* @__PURE__ */ o(te, {
-                ref: V,
-                "aria-haspopup": "tree",
-                className: t.textInput,
-                "data-target-id": k,
-                disabled: n,
-                id: i,
-                onCompositionEnd: Z,
-                onCompositionStart: Y,
-                placeholder: U,
-                store: u
-              }), /* @__PURE__ */ o("div", {
-                className: t.comboboxButtons,
-                children: y ? /* @__PURE__ */ o(le, {
-                  disabled: n,
-                  onClick: () => {
-                    c([]);
-                  },
-                  render: (e) => /* @__PURE__ */ o(ce, {
-                    ...e,
-                    "aria-label": "Clear selection",
-                    icon: ue,
-                    size: "x-small"
-                  }),
-                  store: u
-                }) : /* @__PURE__ */ o(ve, {})
-              })]
-            })]
-          })
-        })]
-      })
-    }), /* @__PURE__ */ o(ae, {
-      "aria-labelledby": i,
-      className: t.popover,
-      fitViewport: !0,
-      gutter: 8,
-      portal: !0,
-      portalElement: X,
-      sameWidth: !0,
-      children: /* @__PURE__ */ o(se, {
-        onFocusVisible: (e) => {
-          m.current?.firstChild?.focus();
-        },
-        onKeyDown: (e) => {
-          if (e.key === "ArrowUp") {
-            const l = m.current?.firstChild;
-            document.activeElement === l && (l.blur(), V.current?.focus());
-          }
-        },
-        children: /* @__PURE__ */ o(ge, {
-          ref: m,
-          ariaLabel: H,
-          defaultFetcher: z,
-          levels: W,
-          loadingAriaLabel: F || g(O.loadingAriaLabel),
-          multiselect: C,
-          noResultMessage: j || g(O.noResults),
-          onSelect: (e) => {
-            const {
-              metadata: l
-            } = e.element;
-            let s = [];
-            e.isSelected ? (C && (s = a.filter((p) => p.value !== e.element.id)), s.push({
-              value: e.element.id,
-              displayValue: l.displayValue,
-              level: l.level,
-              selectable: l.selectable,
-              ancestors: l.ancestors
-            }), E && s.length > a.length && x(!1)) : s = a.filter((p) => p.value !== e.element.id), c(s), S("");
-          },
-          open: v,
-          searchInput: L.current,
-          selectableLevels: q,
-          selectedNodes: a.map((e) => e.value)
-        })
-      })
-    })]
-  });
+import e from "../combobox-with-api-pagination/messages.js";
+import { useControllableState as t } from "../combobox-with-api-pagination/utils/use-controllable-state.js";
+import { n, t as r } from "../../../../chunks/dynamic-loading-tree.js";
+import { Combobox as i, ComboboxCancel as a, ComboboxItem as ee, ComboboxPopover as o, ComboboxProvider as s, PopoverAnchor as c, useComboboxStore as l } from "@ariakit/react";
+import { ChipsGroup as te, IconButton as ne, InputChip as re, useLabelable as ie } from "@box/blueprint-web";
+import { Search as u, XMark as d } from "@box/blueprint-web-assets/icons/Fill";
+import { IconIconOnLightSecondary as f, Size1 as p, Size6 as m } from "@box/blueprint-web-assets/tokens/tokens";
+import h from "clsx";
+import { forwardRef as g, useCallback as _, useId as v, useRef as y, useState as b } from "react";
+import { useIntl as ae } from "react-intl";
+import { jsx as x, jsxs as S } from "react/jsx-runtime";
+var oe = () => /* @__PURE__ */ x(u, {
+	color: f,
+	height: m,
+	role: "presentation",
+	style: {
+		padding: p,
+		boxSizing: "border-box"
+	},
+	width: m
+}), C = /* @__PURE__ */ g(function(u, f) {
+	let { className: p, closeOnSelection: m = !1, dataTargetId: g, defaultFetcher: C, defaultValue: se = [], disabled: w, hideLabel: T, initialOpen: E = !1, label: D, levels: O, loadingAriaLabel: k, multiselect: A = !1, noResultMessage: j, onValueChange: M, onOpenChange: N, placeholder: P, portalElement: F, selectableLevels: I, treeAriaLabel: L, value: R } = u, { formatMessage: z } = ae(), B = v(), [V, H] = b(E), [U, W] = t({
+		prop: R,
+		defaultProp: se,
+		onChange: M
+	}), [G, K] = b(""), q = y(null), [ce, J] = b(!1), le = _(() => J(!0), []), ue = _(() => J(!1), []), Y = y("");
+	ce || (Y.current = G.trimStart());
+	let X = l({
+		includesBaseElement: !0,
+		virtualFocus: !1,
+		value: G,
+		setValue: (e) => {
+			K(e);
+		},
+		open: V,
+		setOpen: (e) => {
+			H(e), N?.(e);
+		}
+	}), Z = U.length > 0, Q = U.length > 0, de = ie(D, B), $ = y(null);
+	return /* @__PURE__ */ S(s, {
+		store: X,
+		children: [/* @__PURE__ */ x(c, { children: /* @__PURE__ */ S("div", {
+			className: h(n.container, p, { [n.disabled]: w }),
+			children: [/* @__PURE__ */ x(de, {
+				className: h(n.label, { [n.hiddenLabel]: T }),
+				hideLabel: T
+			}), /* @__PURE__ */ x("div", { children: /* @__PURE__ */ S("div", {
+				className: h(n.comboboxContainer, {
+					[n.withChips]: Q,
+					[n.withComboboxButtons]: Z
+				}),
+				children: [Q && /* @__PURE__ */ x(te, { children: U.map((e) => /* @__PURE__ */ x(re, {
+					label: e.displayValue,
+					onDelete: () => {
+						w || W(U.filter((t) => t.value !== e.value));
+					},
+					tooltip: e.displayValue
+				}, e.value)) }), /* @__PURE__ */ S("div", {
+					className: n.textInputWrapper,
+					children: [/* @__PURE__ */ x(i, {
+						ref: q,
+						"aria-haspopup": "tree",
+						className: n.textInput,
+						"data-target-id": g,
+						disabled: w,
+						id: B,
+						onCompositionEnd: ue,
+						onCompositionStart: le,
+						placeholder: P,
+						store: X
+					}), /* @__PURE__ */ x("div", {
+						className: n.comboboxButtons,
+						children: Z ? /* @__PURE__ */ x(a, {
+							disabled: w,
+							onClick: () => {
+								W([]);
+							},
+							render: (e) => /* @__PURE__ */ x(ne, {
+								...e,
+								"aria-label": "Clear selection",
+								icon: d,
+								size: "x-small"
+							}),
+							store: X
+						}) : /* @__PURE__ */ x(oe, {})
+					})]
+				})]
+			}) })]
+		}) }), /* @__PURE__ */ x(o, {
+			"aria-labelledby": B,
+			className: n.popover,
+			fitViewport: !0,
+			gutter: 8,
+			portal: !0,
+			portalElement: F,
+			sameWidth: !0,
+			children: /* @__PURE__ */ x(ee, {
+				onFocusVisible: (e) => {
+					($.current?.firstChild)?.focus();
+				},
+				onKeyDown: (e) => {
+					if (e.key === "ArrowUp") {
+						let e = $.current?.firstChild;
+						document.activeElement === e && (e.blur(), q.current?.focus());
+					}
+				},
+				children: /* @__PURE__ */ x(r, {
+					ref: $,
+					ariaLabel: L,
+					defaultFetcher: C,
+					levels: O,
+					loadingAriaLabel: k || z(e.loadingAriaLabel),
+					multiselect: A,
+					noResultMessage: j || z(e.noResults),
+					onSelect: (e) => {
+						let { metadata: t } = e.element, n = [];
+						e.isSelected ? (A && (n = U.filter((t) => t.value !== e.element.id)), n.push({
+							value: e.element.id,
+							displayValue: t.displayValue,
+							level: t.level,
+							selectable: t.selectable,
+							ancestors: t.ancestors
+						}), m && n.length > U.length && H(!1)) : n = U.filter((t) => t.value !== e.element.id), W(n), K("");
+					},
+					open: V,
+					searchInput: Y.current,
+					selectableLevels: I,
+					selectedNodes: U.map((e) => e.value)
+				})
+			})
+		})]
+	});
 });
-export {
-  ze as ComboboxWithApiTreeView
-};
+export { C as ComboboxWithApiTreeView };

package/dist/esm/lib/components/combobox-with-api-tree-view/dynamic-loading-tree.js

@@ -1,10 +1,2 @@
-import "@box/blueprint-web";
-import "@box/tree";
-import "react";
-import "./tree-utils.js";
-import "../../../../chunks/treeReducer.js";
-import { D as n } from "../../../../chunks/dynamic-loading-tree.js";
-import "react/jsx-runtime";
-export {
-  n as DynamicLoadingTree
-};
+import { t as e } from "../../../../chunks/dynamic-loading-tree.js";
+export { e as DynamicLoadingTree };