@box/user-selector 1.74.33 → 1.74.35
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/dist/chunks/buildOptionsWithOverlay.js +21 -22
- package/dist/chunks/user-selector-headless.module.js +13 -14
- package/dist/chunks/user-selector-list-item.js +84 -0
- package/dist/chunks/user-selector.js +89 -0
- package/dist/esm/index.js +4 -9
- package/dist/esm/lib/messages.js +42 -44
- package/dist/esm/lib/shared.js +6 -8
- package/dist/esm/lib/user-selector-container.js +29 -42
- package/dist/esm/lib/user-selector-headless/components/user-avatar.js +25 -31
- package/dist/esm/lib/user-selector-headless/components/user-selector-content.js +27 -50
- package/dist/esm/lib/user-selector-headless/components/user-selector-default-empty.js +34 -42
- package/dist/esm/lib/user-selector-headless/components/user-selector-default-error.js +13 -19
- package/dist/esm/lib/user-selector-headless/components/user-selector-skeleton.js +19 -25
- package/dist/esm/lib/user-selector-headless/hooks/use-avatars.js +13 -21
- package/dist/esm/lib/user-selector-headless/hooks/use-keyboard-navigation.js +25 -27
- package/dist/esm/lib/user-selector-headless/hooks/use-select-options.js +24 -27
- package/dist/esm/lib/user-selector-headless/user-selector-context.js +6 -10
- package/dist/esm/lib/user-selector-headless/user-selector-headless.js +171 -167
- package/dist/esm/lib/user-selector-list-item.js +2 -113
- package/dist/esm/lib/user-selector.js +2 -108
- package/dist/esm/lib/utils/VariantsAggregator.js +26 -45
- package/dist/esm/lib/utils/buildOptionsWithOverlay.js +2 -4
- package/dist/esm/lib/utils/defaultRenderCustomOption.js +10 -11
- package/dist/esm/lib/utils/getInitials.js +4 -6
- package/dist/esm/lib/utils/isUserContactType.js +3 -5
- package/dist/styles/user-selector-headless.css +1 -1
- package/dist/styles/user-selector-list-item.css +1 -1
- package/dist/styles/user-selector.css +1 -1
- package/package.json +8 -8
|
@@ -1,43 +1,35 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
className: e.userName,
|
|
35
|
-
variant: "bodyDefault",
|
|
36
|
-
children: s(a.inviteCollaborators)
|
|
37
|
-
})]
|
|
38
|
-
})]
|
|
39
|
-
});
|
|
40
|
-
};
|
|
41
|
-
export {
|
|
42
|
-
C as UserSelectorDefaultEmpty
|
|
1
|
+
import e from "../../messages.js";
|
|
2
|
+
import { useUserSelector as t } from "../user-selector-context.js";
|
|
3
|
+
import { t as n } from "../../../../chunks/user-selector-headless.module.js";
|
|
4
|
+
import { useCallback as r } from "react";
|
|
5
|
+
import { useIntl as i } from "react-intl";
|
|
6
|
+
import { Text as a } from "@box/blueprint-web";
|
|
7
|
+
import { AvatarPlusBadge as o } from "@box/blueprint-web-assets/icons/Line";
|
|
8
|
+
import { jsx as s, jsxs as c } from "react/jsx-runtime";
|
|
9
|
+
var l = ({ handleInvite: l }) => {
|
|
10
|
+
let { formatMessage: u } = i(), { value: d } = t(), f = r(() => {
|
|
11
|
+
l?.(d);
|
|
12
|
+
}, [l, d]);
|
|
13
|
+
return /* @__PURE__ */ c("div", {
|
|
14
|
+
className: n.userSelectorEmptyContainer,
|
|
15
|
+
children: [/* @__PURE__ */ s("div", {
|
|
16
|
+
className: n.userSelectorEmptyText,
|
|
17
|
+
children: u(e.emptyMessage)
|
|
18
|
+
}), l && /* @__PURE__ */ c("button", {
|
|
19
|
+
className: n.userSelectorInviteRow,
|
|
20
|
+
onClick: f,
|
|
21
|
+
tabIndex: 0,
|
|
22
|
+
type: "button",
|
|
23
|
+
children: [/* @__PURE__ */ s("span", {
|
|
24
|
+
className: n.userSelectorInviteButtonIcon,
|
|
25
|
+
children: /* @__PURE__ */ s(o, {})
|
|
26
|
+
}), /* @__PURE__ */ s(a, {
|
|
27
|
+
as: "span",
|
|
28
|
+
className: n.userName,
|
|
29
|
+
variant: "bodyDefault",
|
|
30
|
+
children: u(e.inviteCollaborators)
|
|
31
|
+
})]
|
|
32
|
+
})]
|
|
33
|
+
});
|
|
43
34
|
};
|
|
35
|
+
export { l as UserSelectorDefaultEmpty };
|
|
@@ -1,20 +1,14 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
3
|
-
import r from "
|
|
4
|
-
import { jsx as
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
children: /* @__PURE__ */ e(a, {
|
|
14
|
-
...r.errorMessageDescription
|
|
15
|
-
})
|
|
16
|
-
});
|
|
17
|
-
};
|
|
18
|
-
export {
|
|
19
|
-
l as UserSelectorDefaultError
|
|
1
|
+
import e from "../../messages.js";
|
|
2
|
+
import { FormattedMessage as t, useIntl as n } from "react-intl";
|
|
3
|
+
import { InlineNotice as r } from "@box/blueprint-web";
|
|
4
|
+
import { jsx as i } from "react/jsx-runtime";
|
|
5
|
+
var a = () => {
|
|
6
|
+
let { formatMessage: a } = n();
|
|
7
|
+
return /* @__PURE__ */ i(r, {
|
|
8
|
+
title: a(e.errorMessage),
|
|
9
|
+
variant: "error",
|
|
10
|
+
variantIconAriaLabel: "error",
|
|
11
|
+
children: /* @__PURE__ */ i(t, { ...e.errorMessageDescription })
|
|
12
|
+
});
|
|
20
13
|
};
|
|
14
|
+
export { a as UserSelectorDefaultError };
|
|
@@ -1,27 +1,21 @@
|
|
|
1
|
+
import { t as e } from "../../../../chunks/user-selector-headless.module.js";
|
|
1
2
|
import { Ghost as t } from "@box/blueprint-web";
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
height: a,
|
|
20
|
-
variant: "rectangle",
|
|
21
|
-
width: "100%"
|
|
22
|
-
})]
|
|
23
|
-
}, s))
|
|
3
|
+
import { jsx as n, jsxs as r } from "react/jsx-runtime";
|
|
4
|
+
import { Size5 as i, Size8 as a } from "@box/blueprint-web-assets/tokens/tokens";
|
|
5
|
+
var o = ({ loadingAriaLabel: o }) => /* @__PURE__ */ n("div", {
|
|
6
|
+
"aria-label": o,
|
|
7
|
+
children: Array.from({ length: 4 }, (o, s) => /* @__PURE__ */ r("div", {
|
|
8
|
+
className: e.userSelectorGhostStateItem,
|
|
9
|
+
children: [/* @__PURE__ */ n(t, {
|
|
10
|
+
className: e.titleGhost,
|
|
11
|
+
height: a,
|
|
12
|
+
variant: "rectangle",
|
|
13
|
+
width: a
|
|
14
|
+
}), /* @__PURE__ */ n(t, {
|
|
15
|
+
height: i,
|
|
16
|
+
variant: "rectangle",
|
|
17
|
+
width: "100%"
|
|
18
|
+
})]
|
|
19
|
+
}, s))
|
|
24
20
|
});
|
|
25
|
-
export {
|
|
26
|
-
S as UserSelectorSkeleton
|
|
27
|
-
};
|
|
21
|
+
export { o as UserSelectorSkeleton };
|
|
@@ -1,22 +1,14 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
}, [s, t]);
|
|
14
|
-
return v(() => {
|
|
15
|
-
a.length > 0 && r(a);
|
|
16
|
-
}, [a, r]), {
|
|
17
|
-
avatars: e
|
|
18
|
-
};
|
|
19
|
-
};
|
|
20
|
-
export {
|
|
21
|
-
o as useAvatars
|
|
1
|
+
import { useCallback as e, useEffect as t, useState as n } from "react";
|
|
2
|
+
var r = ({ fetchAvatarUrls: r, options: i }) => {
|
|
3
|
+
let [a, o] = n({}), s = e(async (e) => {
|
|
4
|
+
try {
|
|
5
|
+
o(await r(e));
|
|
6
|
+
} catch {
|
|
7
|
+
o({});
|
|
8
|
+
}
|
|
9
|
+
}, [r, o]);
|
|
10
|
+
return t(() => {
|
|
11
|
+
i.length > 0 && s(i);
|
|
12
|
+
}, [i, s]), { avatars: a };
|
|
22
13
|
};
|
|
14
|
+
export { r as useAvatars };
|
|
@@ -1,27 +1,25 @@
|
|
|
1
|
-
import { useCallback as
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
export {
|
|
26
|
-
n as useKeyboardNavigation
|
|
27
|
-
};
|
|
1
|
+
import { useCallback as e } from "react";
|
|
2
|
+
var t = ({ isLoading: t, error: n, isEmpty: r, open: i, selectNext: a, selectPrevious: o, selectItem: s }) => e((e) => {
|
|
3
|
+
if (!(!i || t || n || r)) switch (e.key) {
|
|
4
|
+
case "ArrowDown":
|
|
5
|
+
e.preventDefault(), a();
|
|
6
|
+
break;
|
|
7
|
+
case "ArrowUp":
|
|
8
|
+
e.preventDefault(), o();
|
|
9
|
+
break;
|
|
10
|
+
case "Enter":
|
|
11
|
+
case " ":
|
|
12
|
+
e.preventDefault(), s();
|
|
13
|
+
break;
|
|
14
|
+
default: break;
|
|
15
|
+
}
|
|
16
|
+
}, [
|
|
17
|
+
n,
|
|
18
|
+
r,
|
|
19
|
+
t,
|
|
20
|
+
i,
|
|
21
|
+
a,
|
|
22
|
+
o,
|
|
23
|
+
s
|
|
24
|
+
]);
|
|
25
|
+
export { t as useKeyboardNavigation };
|
|
@@ -1,28 +1,25 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
})
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
};
|
|
25
|
-
};
|
|
26
|
-
export {
|
|
27
|
-
S as useSelectOptions
|
|
1
|
+
import { useCallback as e, useEffect as t, useMemo as n, useState as r } from "react";
|
|
2
|
+
import i from "lodash/debounce";
|
|
3
|
+
var a = ({ fetcher: a, value: o, debounceTime: s = 250, allowEmptyQuery: c = !1 }) => {
|
|
4
|
+
let [l, u] = r(!1), [d, f] = r(!1), [p, m] = r(null), [h, g] = r([]), _ = e(async (e) => {
|
|
5
|
+
try {
|
|
6
|
+
let t = await a(e);
|
|
7
|
+
f(t?.length === 0), g(t);
|
|
8
|
+
} catch (e) {
|
|
9
|
+
m(e);
|
|
10
|
+
} finally {
|
|
11
|
+
u(!1);
|
|
12
|
+
}
|
|
13
|
+
}, [a]), v = n(() => i(_, s), [_, s]);
|
|
14
|
+
return t(() => (o.length || c ? (u(!0), m(null), f(!1), v(o)) : (v.cancel(), u(!1), g([]), m(null), f(!1)), () => v.cancel()), [
|
|
15
|
+
o,
|
|
16
|
+
v,
|
|
17
|
+
c
|
|
18
|
+
]), {
|
|
19
|
+
isLoading: l,
|
|
20
|
+
isEmpty: d,
|
|
21
|
+
error: p,
|
|
22
|
+
options: h
|
|
23
|
+
};
|
|
28
24
|
};
|
|
25
|
+
export { a as useSelectOptions };
|
|
@@ -1,11 +1,7 @@
|
|
|
1
|
-
import { createContext as
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
return e;
|
|
7
|
-
};
|
|
8
|
-
export {
|
|
9
|
-
o as UserSelectorContext,
|
|
10
|
-
n as useUserSelector
|
|
1
|
+
import { createContext as e, useContext as t } from "react";
|
|
2
|
+
var n = /* @__PURE__ */ e(null), r = () => {
|
|
3
|
+
let e = t(n);
|
|
4
|
+
if (!e) throw Error("useUserSelector must be used within a UserSelectorProvider");
|
|
5
|
+
return e;
|
|
11
6
|
};
|
|
7
|
+
export { n as UserSelectorContext, r as useUserSelector };
|