@box/metadata-taxonomy-picker 3.1.35 → 3.1.37
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/empty-state.js +1 -22
- package/dist/chunks/error-state.js +1 -41
- package/dist/chunks/load-more-error-row.js +1 -52
- package/dist/chunks/load-more-loading-row.js +1 -17
- package/dist/chunks/loading-state.js +1 -17
- package/dist/chunks/metadata-taxonomy-picker-shell.js +1 -282
- package/dist/chunks/taxonomy-ancestor-breadcrumb.js +1 -115
- package/dist/chunks/taxonomy-items-list.js +1 -114
- package/dist/chunks/taxonomy-level-filter.js +1 -48
- package/dist/chunks/taxonomy-menu-item.js +1 -99
- package/dist/esm/index.js +1 -3
- package/dist/esm/lib/components/metadata-taxonomy-picker-shell/index.js +1 -2
- package/dist/esm/lib/components/metadata-taxonomy-picker-shell/messages.js +1 -24
- package/dist/esm/lib/components/metadata-taxonomy-picker-shell/metadata-taxonomy-picker-shell.js +1 -2
- package/dist/esm/lib/components/taxonomy-ancestor-breadcrumb/index.js +1 -2
- package/dist/esm/lib/components/taxonomy-ancestor-breadcrumb/taxonomy-ancestor-breadcrumb.js +1 -2
- package/dist/esm/lib/components/taxonomy-items-list/empty-state/empty-state.js +1 -2
- package/dist/esm/lib/components/taxonomy-items-list/empty-state/index.js +1 -2
- package/dist/esm/lib/components/taxonomy-items-list/error-state/error-state.js +1 -2
- package/dist/esm/lib/components/taxonomy-items-list/error-state/index.js +1 -2
- package/dist/esm/lib/components/taxonomy-items-list/index.js +1 -6
- package/dist/esm/lib/components/taxonomy-items-list/load-more-feedback/index.js +1 -3
- package/dist/esm/lib/components/taxonomy-items-list/load-more-feedback/load-more-error-row.js +1 -2
- package/dist/esm/lib/components/taxonomy-items-list/load-more-feedback/load-more-loading-row.js +1 -2
- package/dist/esm/lib/components/taxonomy-items-list/load-more-feedback/messages.js +1 -20
- package/dist/esm/lib/components/taxonomy-items-list/loading-state/index.js +1 -2
- package/dist/esm/lib/components/taxonomy-items-list/loading-state/loading-state.js +1 -2
- package/dist/esm/lib/components/taxonomy-items-list/messages.js +1 -36
- package/dist/esm/lib/components/taxonomy-items-list/taxonomy-items-list.js +1 -2
- package/dist/esm/lib/components/taxonomy-level-filter/index.js +1 -2
- package/dist/esm/lib/components/taxonomy-level-filter/messages.js +1 -6
- package/dist/esm/lib/components/taxonomy-level-filter/taxonomy-level-filter.js +1 -2
- package/dist/esm/lib/components/taxonomy-menu-item/index.js +1 -2
- package/dist/esm/lib/components/taxonomy-menu-item/messages.js +1 -6
- package/dist/esm/lib/components/taxonomy-menu-item/taxonomy-menu-item.js +1 -2
- package/dist/esm/lib/components/taxonomy-menu-item/use-taxonomy-menu-item-keyboard.js +1 -100
- package/dist/esm/lib/constants.js +1 -2
- package/dist/esm/lib/hooks/messages.js +1 -16
- package/dist/esm/lib/hooks/use-taxonomy-picker-controller.js +1 -261
- package/dist/esm/lib/metadata-taxonomy-picker.js +1 -10
- package/dist/esm/lib/state/reducer.js +1 -152
- package/dist/esm/lib/state/transitions.js +1 -22
- package/package.json +7 -7
|
@@ -1,22 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { useIntl as t } from "react-intl";
|
|
3
|
-
import { Text as n } from "@box/blueprint-web";
|
|
4
|
-
import { jsx as r, jsxs as i } from "react/jsx-runtime";
|
|
5
|
-
import '../styles/empty-state.css';var a = { root: "_root_1fze8_1" };
|
|
6
|
-
function o({ isSearchMode: o = !1 }) {
|
|
7
|
-
let { formatMessage: s } = t(), c = s(o ? e.searchEmptyStateHeading : e.emptyStateHeading), l = s(o ? e.searchEmptyStateBody : e.emptyStateBody);
|
|
8
|
-
return /* @__PURE__ */ i("div", {
|
|
9
|
-
className: a.root,
|
|
10
|
-
role: "status",
|
|
11
|
-
children: [/* @__PURE__ */ r(n, {
|
|
12
|
-
as: "h3",
|
|
13
|
-
variant: "titleSmall",
|
|
14
|
-
children: c
|
|
15
|
-
}), /* @__PURE__ */ r(n, {
|
|
16
|
-
as: "p",
|
|
17
|
-
color: "textOnLightSecondary",
|
|
18
|
-
children: l
|
|
19
|
-
})]
|
|
20
|
-
});
|
|
21
|
-
}
|
|
22
|
-
export { o as t };
|
|
1
|
+
import{messages}from"../esm/lib/components/taxonomy-items-list/messages.js";import{useIntl}from"react-intl";import{Text}from"@box/blueprint-web";import{jsx,jsxs}from"react/jsx-runtime";import '../styles/empty-state.css';var empty_state_module_default={root:`_root_1fze8_1`};function EmptyListState({isSearchMode=!1}){let{formatMessage}=useIntl(),heading=formatMessage(isSearchMode?messages.searchEmptyStateHeading:messages.emptyStateHeading),body=formatMessage(isSearchMode?messages.searchEmptyStateBody:messages.emptyStateBody);return jsxs(`div`,{className:empty_state_module_default.root,role:`status`,children:[jsx(Text,{as:`h3`,variant:`titleSmall`,children:heading}),jsx(Text,{as:`p`,color:`textOnLightSecondary`,children:body})]})}export{EmptyListState as t};
|
|
@@ -1,41 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { useIntl as t } from "react-intl";
|
|
3
|
-
import { Button as n, EmptyState as r, Text as i } from "@box/blueprint-web";
|
|
4
|
-
import { Loader as a } from "@box/blueprint-web-assets/icons/Fill";
|
|
5
|
-
import { jsx as o, jsxs as s } from "react/jsx-runtime";
|
|
6
|
-
import { Unplugged as c } from "@box/blueprint-web-assets/illustrations/Medium";
|
|
7
|
-
import '../styles/error-state.css';var l = {
|
|
8
|
-
root: "_root_1ml46_1",
|
|
9
|
-
body: "_body_1ml46_8"
|
|
10
|
-
};
|
|
11
|
-
function u({ onRetry: u }) {
|
|
12
|
-
let { formatMessage: d } = t();
|
|
13
|
-
return /* @__PURE__ */ o("div", {
|
|
14
|
-
className: l.root,
|
|
15
|
-
children: /* @__PURE__ */ o(r, {
|
|
16
|
-
body: /* @__PURE__ */ s("div", {
|
|
17
|
-
className: l.body,
|
|
18
|
-
children: [/* @__PURE__ */ o(i, {
|
|
19
|
-
as: "p",
|
|
20
|
-
variant: "bodyDefault",
|
|
21
|
-
children: d(e.errorStateHeading)
|
|
22
|
-
}), /* @__PURE__ */ o(i, {
|
|
23
|
-
as: "p",
|
|
24
|
-
variant: "bodyDefault",
|
|
25
|
-
children: d(e.errorStateBody)
|
|
26
|
-
})]
|
|
27
|
-
}),
|
|
28
|
-
illustration: c,
|
|
29
|
-
role: "alert",
|
|
30
|
-
size: "large",
|
|
31
|
-
children: /* @__PURE__ */ o(n, {
|
|
32
|
-
endIcon: a,
|
|
33
|
-
onClick: u,
|
|
34
|
-
size: "large",
|
|
35
|
-
variant: "secondary",
|
|
36
|
-
children: d(e.reloadButton)
|
|
37
|
-
})
|
|
38
|
-
})
|
|
39
|
-
});
|
|
40
|
-
}
|
|
41
|
-
export { u as t };
|
|
1
|
+
import{messages}from"../esm/lib/components/taxonomy-items-list/messages.js";import{useIntl}from"react-intl";import{Button,EmptyState,Text}from"@box/blueprint-web";import{Loader}from"@box/blueprint-web-assets/icons/Fill";import{jsx,jsxs}from"react/jsx-runtime";import{Unplugged}from"@box/blueprint-web-assets/illustrations/Medium";import '../styles/error-state.css';var error_state_module_default={root:`_root_1ml46_1`,body:`_body_1ml46_8`};function ErrorState({onRetry}){let{formatMessage}=useIntl();return jsx(`div`,{className:error_state_module_default.root,children:jsx(EmptyState,{body:jsxs(`div`,{className:error_state_module_default.body,children:[jsx(Text,{as:`p`,variant:`bodyDefault`,children:formatMessage(messages.errorStateHeading)}),jsx(Text,{as:`p`,variant:`bodyDefault`,children:formatMessage(messages.errorStateBody)})]}),illustration:Unplugged,role:`alert`,size:`large`,children:jsx(Button,{endIcon:Loader,onClick:onRetry,size:`large`,variant:`secondary`,children:formatMessage(messages.reloadButton)})})})}export{ErrorState as t};
|
|
@@ -1,52 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { useEffect as t } from "react";
|
|
3
|
-
import { useIntl as n } from "react-intl";
|
|
4
|
-
import { InlineNotice as r, Text as i, TextButton as a } from "@box/blueprint-web";
|
|
5
|
-
import { Loader as o } from "@box/blueprint-web-assets/icons/Fill";
|
|
6
|
-
import { jsx as s, jsxs as c } from "react/jsx-runtime";
|
|
7
|
-
import { AlertCircle as l } from "@box/blueprint-web-assets/icons/Medium";
|
|
8
|
-
import { bpIconIconErrorOnColor as u } from "@box/blueprint-web-assets/tokens/tokens";
|
|
9
|
-
import '../styles/load-more-error-row.css';var d = {
|
|
10
|
-
container: "_container_1sz1a_1",
|
|
11
|
-
errorText: "_errorText_1sz1a_11",
|
|
12
|
-
reloadButton: "_reloadButton_1sz1a_16"
|
|
13
|
-
};
|
|
14
|
-
function f({ onRetry: f }) {
|
|
15
|
-
let { formatMessage: p } = n();
|
|
16
|
-
return t(() => {
|
|
17
|
-
let e = document.activeElement, t = e?.closest("[role=\"listbox\"]") != null;
|
|
18
|
-
return () => {
|
|
19
|
-
t && e && document.body.contains(e) && e.focus({ preventScroll: !0 });
|
|
20
|
-
};
|
|
21
|
-
}, []), /* @__PURE__ */ c("div", {
|
|
22
|
-
"aria-live": "polite",
|
|
23
|
-
className: d.container,
|
|
24
|
-
role: "status",
|
|
25
|
-
children: [/* @__PURE__ */ s(r, {
|
|
26
|
-
icon: () => /* @__PURE__ */ s(l, {
|
|
27
|
-
width: 20,
|
|
28
|
-
height: 20,
|
|
29
|
-
color: u
|
|
30
|
-
}),
|
|
31
|
-
variant: "error",
|
|
32
|
-
variantIconAriaLabel: p(e.errorNoticeIconAriaLabel),
|
|
33
|
-
children: /* @__PURE__ */ s(i, {
|
|
34
|
-
as: "span",
|
|
35
|
-
className: d.errorText,
|
|
36
|
-
color: "textOnLightError",
|
|
37
|
-
variant: "bodyDefault",
|
|
38
|
-
children: p(e.errorNoticeText)
|
|
39
|
-
})
|
|
40
|
-
}), /* @__PURE__ */ s("div", {
|
|
41
|
-
className: d.reloadButton,
|
|
42
|
-
children: /* @__PURE__ */ s(a, {
|
|
43
|
-
"data-testid": "reload-button",
|
|
44
|
-
icon: o,
|
|
45
|
-
onClick: f,
|
|
46
|
-
type: "button",
|
|
47
|
-
children: p(e.reloadButtonLabel)
|
|
48
|
-
})
|
|
49
|
-
})]
|
|
50
|
-
});
|
|
51
|
-
}
|
|
52
|
-
export { f as t };
|
|
1
|
+
import{messages}from"../esm/lib/components/taxonomy-items-list/load-more-feedback/messages.js";import{useEffect}from"react";import{useIntl}from"react-intl";import{InlineNotice,Text,TextButton}from"@box/blueprint-web";import{Loader}from"@box/blueprint-web-assets/icons/Fill";import{jsx,jsxs}from"react/jsx-runtime";import{AlertCircle}from"@box/blueprint-web-assets/icons/Medium";import{bpIconIconErrorOnColor}from"@box/blueprint-web-assets/tokens/tokens";import '../styles/load-more-error-row.css';var load_more_error_row_module_default={container:`_container_1sz1a_1`,errorText:`_errorText_1sz1a_11`,reloadButton:`_reloadButton_1sz1a_16`};function LoadMoreErrorRow({onRetry}){let{formatMessage}=useIntl();return useEffect(()=>{let previouslyFocused=document.activeElement,wasInsideListbox=previouslyFocused?.closest(`[role="listbox"]`)!=null;return()=>{wasInsideListbox&&previouslyFocused&&document.body.contains(previouslyFocused)&&previouslyFocused.focus({preventScroll:!0})}},[]),jsxs(`div`,{"aria-live":`polite`,className:load_more_error_row_module_default.container,role:`status`,children:[jsx(InlineNotice,{icon:()=>jsx(AlertCircle,{width:20,height:20,color:bpIconIconErrorOnColor}),variant:`error`,variantIconAriaLabel:formatMessage(messages.errorNoticeIconAriaLabel),children:jsx(Text,{as:`span`,className:load_more_error_row_module_default.errorText,color:`textOnLightError`,variant:`bodyDefault`,children:formatMessage(messages.errorNoticeText)})}),jsx(`div`,{className:load_more_error_row_module_default.reloadButton,children:jsx(TextButton,{"data-testid":`reload-button`,icon:Loader,onClick:onRetry,type:`button`,children:formatMessage(messages.reloadButtonLabel)})})]})}export{LoadMoreErrorRow as t};
|
|
@@ -1,17 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { messages as e } from "../esm/lib/components/taxonomy-items-list/load-more-feedback/messages.js";
|
|
3
|
-
import { useIntl as t } from "react-intl";
|
|
4
|
-
import { Ghost as n } from "@box/blueprint-web";
|
|
5
|
-
import { jsx as r } from "react/jsx-runtime";
|
|
6
|
-
import '../styles/load-more-loading-row.css';var i = { container: "_container_1ubpr_1" };
|
|
7
|
-
function a() {
|
|
8
|
-
let { formatMessage: a } = t();
|
|
9
|
-
return /* @__PURE__ */ r("div", {
|
|
10
|
-
"aria-busy": "true",
|
|
11
|
-
"aria-label": a(e.loadingRowAriaLabel),
|
|
12
|
-
className: i.container,
|
|
13
|
-
role: "status",
|
|
14
|
-
children: Array.from({ length: 3 }, (e, t) => /* @__PURE__ */ r(n, { height: 16 }, t))
|
|
15
|
-
});
|
|
16
|
-
}
|
|
17
|
-
export { a as t };
|
|
1
|
+
import"../esm/lib/constants.js";import{messages}from"../esm/lib/components/taxonomy-items-list/load-more-feedback/messages.js";import{useIntl}from"react-intl";import{Ghost}from"@box/blueprint-web";import{jsx}from"react/jsx-runtime";import '../styles/load-more-loading-row.css';var load_more_loading_row_module_default={container:`_container_1ubpr_1`};function LoadMoreLoadingRow(){let{formatMessage}=useIntl();return jsx(`div`,{"aria-busy":`true`,"aria-label":formatMessage(messages.loadingRowAriaLabel),className:load_more_loading_row_module_default.container,role:`status`,children:Array.from({length:3},(_,index)=>jsx(Ghost,{height:16},index))})}export{LoadMoreLoadingRow as t};
|
|
@@ -1,17 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { messages as e } from "../esm/lib/components/taxonomy-items-list/messages.js";
|
|
3
|
-
import { useIntl as t } from "react-intl";
|
|
4
|
-
import { Ghost as n } from "@box/blueprint-web";
|
|
5
|
-
import { jsx as r } from "react/jsx-runtime";
|
|
6
|
-
import '../styles/loading-state.css';var i = { root: "_root_t50cx_1" };
|
|
7
|
-
function a() {
|
|
8
|
-
let { formatMessage: a } = t();
|
|
9
|
-
return /* @__PURE__ */ r("div", {
|
|
10
|
-
"aria-busy": "true",
|
|
11
|
-
"aria-label": a(e.loadingAriaLabel),
|
|
12
|
-
className: i.root,
|
|
13
|
-
role: "status",
|
|
14
|
-
children: Array.from({ length: 9 }, (e, t) => /* @__PURE__ */ r(n, { height: 16 }, t))
|
|
15
|
-
});
|
|
16
|
-
}
|
|
17
|
-
export { a as t };
|
|
1
|
+
import"../esm/lib/constants.js";import{messages}from"../esm/lib/components/taxonomy-items-list/messages.js";import{useIntl}from"react-intl";import{Ghost}from"@box/blueprint-web";import{jsx}from"react/jsx-runtime";import '../styles/loading-state.css';var loading_state_module_default={root:`_root_t50cx_1`};function LoadingState(){let{formatMessage}=useIntl();return jsx(`div`,{"aria-busy":`true`,"aria-label":formatMessage(messages.loadingAriaLabel),className:loading_state_module_default.root,role:`status`,children:Array.from({length:9},(_,i)=>jsx(Ghost,{height:16},i))})}export{LoadingState as t};
|
|
@@ -1,282 +1 @@
|
|
|
1
|
-
import { BREADCRUMB_ROOT_ID as e } from "../esm/lib/constants.js";
|
|
2
|
-
import { useTaxonomyPickerController as t } from "../esm/lib/hooks/use-taxonomy-picker-controller.js";
|
|
3
|
-
import { t as n } from "./taxonomy-items-list.js";
|
|
4
|
-
import { t as r } from "./taxonomy-level-filter.js";
|
|
5
|
-
import { messages as i } from "../esm/lib/components/metadata-taxonomy-picker-shell/messages.js";
|
|
6
|
-
import { forwardRef as a, useCallback as o, useEffect as ee, useId as te, useLayoutEffect as s, useMemo as c, useRef as l, useState as ne } from "react";
|
|
7
|
-
import re from "clsx";
|
|
8
|
-
import { useIntl as ie } from "react-intl";
|
|
9
|
-
import { Breadcrumb as ae, ChipsGroup as oe, IconButton as se, InputChip as u, Popover as d, Text as ce, useForkRef as le } from "@box/blueprint-web";
|
|
10
|
-
import { Search as ue, XMark as de } from "@box/blueprint-web-assets/icons/Fill";
|
|
11
|
-
import { jsx as f, jsxs as p } from "react/jsx-runtime";
|
|
12
|
-
import '../styles/metadata-taxonomy-picker-shell.css';var m = /* @__PURE__ */ function(e) {
|
|
13
|
-
return e.SingleLevel = "single-level", e.MultiLevel = "multi-level", e;
|
|
14
|
-
}({}), h = {
|
|
15
|
-
container: "_container_nitxb_1",
|
|
16
|
-
label: "_label_nitxb_8",
|
|
17
|
-
trigger: "_trigger_nitxb_12",
|
|
18
|
-
searchInput: "_searchInput_nitxb_30",
|
|
19
|
-
chips: "_chips_nitxb_42",
|
|
20
|
-
searchIcon: "_searchIcon_nitxb_79",
|
|
21
|
-
popover: "_popover_nitxb_88",
|
|
22
|
-
clearButton: "_clearButton_nitxb_96",
|
|
23
|
-
breadcrumbContainer: "_breadcrumbContainer_nitxb_100"
|
|
24
|
-
};
|
|
25
|
-
function fe(e) {
|
|
26
|
-
let t = null;
|
|
27
|
-
for (let n of e) n.selectable !== !1 && (t === null || n.level > t) && (t = n.level);
|
|
28
|
-
return t;
|
|
29
|
-
}
|
|
30
|
-
var pe = [];
|
|
31
|
-
function me(e) {
|
|
32
|
-
if (e != null) return (typeof e == "function" ? e() : e) ?? void 0;
|
|
33
|
-
}
|
|
34
|
-
var g = /*#__PURE__*/ a(function({ itemsService: a, eventService: g, levels: _ = pe, mode: he, multiSelect: v, value: y, onValueChange: b, placeholder: ge, disabled: x = !1, label: S, containerClassName: _e, portalElement: ve }, ye) {
|
|
35
|
-
let { formatMessage: C } = ie(), w = te(), T = `${w}-listbox`, E = l(null), be = le(E, ye), D = l(null), O = l(null), [xe, Se] = ne(null), k = l(0), A = l(!1), Ce = me(ve), j = he === m.SingleLevel, { state: M, isOpen: N, handleOpenChange: P, handleInputValueChange: F, actions: I } = t(a, _, g), { items: L, levelStack: R } = M, { drillDown: z, navigateBack: B, loadMore: we, setSearchScopeOverride: V } = I, H = M.searchInputValue !== "", U = c(() => fe(M.availableLevels), [M.availableLevels]);
|
|
36
|
-
ee(() => {
|
|
37
|
-
V(j && U !== null ? {
|
|
38
|
-
parentId: null,
|
|
39
|
-
levelFilter: U
|
|
40
|
-
} : void 0);
|
|
41
|
-
}, [
|
|
42
|
-
j,
|
|
43
|
-
U,
|
|
44
|
-
V
|
|
45
|
-
]);
|
|
46
|
-
let [Te, W] = ne(""), G = l(!1), Ee = o(() => {
|
|
47
|
-
G.current = !0;
|
|
48
|
-
}, []), De = o((e) => {
|
|
49
|
-
G.current = !1, F(e.target.value);
|
|
50
|
-
}, [F]);
|
|
51
|
-
s(() => {
|
|
52
|
-
G.current ? M.searchInputValue === "" && (G.current = !1, W("")) : W(M.searchInputValue);
|
|
53
|
-
}, [M.searchInputValue]), s(() => {
|
|
54
|
-
let e;
|
|
55
|
-
return !H && A.current && (e = requestAnimationFrame(() => {
|
|
56
|
-
O.current?.scrollTo(k.current);
|
|
57
|
-
})), A.current = H, () => {
|
|
58
|
-
e !== void 0 && cancelAnimationFrame(e);
|
|
59
|
-
};
|
|
60
|
-
}, [H]);
|
|
61
|
-
let K = c(() => new Set(y.map((e) => e.id)), [y]), Oe = c(() => !v && y.length === 1 ? y[0].id : "", [v, y]), q = o((e, t = !0) => {
|
|
62
|
-
let n = L.find((t) => t.id === e);
|
|
63
|
-
if (!n || !n.selectable) return;
|
|
64
|
-
let r = {
|
|
65
|
-
id: n.id,
|
|
66
|
-
displayName: n.displayName,
|
|
67
|
-
level: n.level,
|
|
68
|
-
ancestors: n.ancestors
|
|
69
|
-
};
|
|
70
|
-
v ? b(K.has(e) ? y.filter((t) => t.id !== e) : [...y, r]) : (b([r]), t && P(!1));
|
|
71
|
-
}, [
|
|
72
|
-
L,
|
|
73
|
-
v,
|
|
74
|
-
K,
|
|
75
|
-
y,
|
|
76
|
-
b,
|
|
77
|
-
P
|
|
78
|
-
]), J = o((e, t = !0) => {
|
|
79
|
-
let n = M.searchResults.find((t) => t.id === e);
|
|
80
|
-
if (!n || !n.selectable) return;
|
|
81
|
-
let r = {
|
|
82
|
-
id: n.id,
|
|
83
|
-
displayName: n.displayName,
|
|
84
|
-
level: n.level,
|
|
85
|
-
ancestors: n.ancestors
|
|
86
|
-
};
|
|
87
|
-
v ? b(K.has(e) ? y.filter((t) => t.id !== e) : [...y, r]) : (b([r]), t !== !1 && P(!1));
|
|
88
|
-
}, [
|
|
89
|
-
M.searchResults,
|
|
90
|
-
v,
|
|
91
|
-
K,
|
|
92
|
-
y,
|
|
93
|
-
b,
|
|
94
|
-
P
|
|
95
|
-
]), Y = o((e) => {
|
|
96
|
-
let t = M.searchResults.find((t) => t.id === e);
|
|
97
|
-
t && I.drillDown({
|
|
98
|
-
id: t.id,
|
|
99
|
-
displayName: t.displayName,
|
|
100
|
-
ancestors: t.ancestors
|
|
101
|
-
});
|
|
102
|
-
}, [M.searchResults, I]), X = o((e) => {
|
|
103
|
-
let t = M.items.find((t) => t.id === e);
|
|
104
|
-
t && z({
|
|
105
|
-
id: t.id,
|
|
106
|
-
displayName: t.displayName
|
|
107
|
-
});
|
|
108
|
-
}, [M.items, z]), Z = o((e) => !(!e.hasChildren || j && U !== null && e.level >= U), [j, U]), ke = c(() => L.map((e) => ({
|
|
109
|
-
id: e.id,
|
|
110
|
-
displayName: e.displayName,
|
|
111
|
-
selectable: e.selectable,
|
|
112
|
-
multiSelect: v,
|
|
113
|
-
isSelected: K.has(e.id),
|
|
114
|
-
showDrillDown: Z(e),
|
|
115
|
-
ancestors: e.ancestors,
|
|
116
|
-
onSelect: q,
|
|
117
|
-
onDrillDown: X
|
|
118
|
-
})), [
|
|
119
|
-
L,
|
|
120
|
-
v,
|
|
121
|
-
K,
|
|
122
|
-
Z,
|
|
123
|
-
q,
|
|
124
|
-
X
|
|
125
|
-
]), Q = c(() => R.length === 0 ? [] : [{
|
|
126
|
-
id: e,
|
|
127
|
-
name: C(i.breadcrumbRootLabel)
|
|
128
|
-
}, ...R.map((e) => ({
|
|
129
|
-
id: e.id,
|
|
130
|
-
name: e.displayName
|
|
131
|
-
}))], [R, C]), Ae = o((e) => {
|
|
132
|
-
B(e === "__breadcrumb_root__" ? null : e);
|
|
133
|
-
}, [B]), je = !j && H && M.availableLevels.length > 1, Me = c(() => M.searchResults.map((e) => ({
|
|
134
|
-
id: e.id,
|
|
135
|
-
displayName: e.displayName,
|
|
136
|
-
selectable: e.selectable,
|
|
137
|
-
multiSelect: v,
|
|
138
|
-
isSelected: K.has(e.id),
|
|
139
|
-
showDrillDown: Z(e),
|
|
140
|
-
ancestors: e.ancestors,
|
|
141
|
-
onSelect: J,
|
|
142
|
-
onDrillDown: Y
|
|
143
|
-
})), [
|
|
144
|
-
M.searchResults,
|
|
145
|
-
v,
|
|
146
|
-
K,
|
|
147
|
-
Z,
|
|
148
|
-
J,
|
|
149
|
-
Y
|
|
150
|
-
]), Ne = o((e) => {
|
|
151
|
-
e.target === e.currentTarget && E.current?.focus();
|
|
152
|
-
}, [E]), $ = y.length > 0, Pe = ge ?? C(i.placeholder), Fe = (e) => {
|
|
153
|
-
!x && e.target === e.currentTarget && (e.preventDefault(), E.current?.focus());
|
|
154
|
-
}, Ie = () => {
|
|
155
|
-
!x && !N && P(!0);
|
|
156
|
-
}, Le = o(() => {
|
|
157
|
-
x || (b([]), F(""));
|
|
158
|
-
}, [
|
|
159
|
-
x,
|
|
160
|
-
b,
|
|
161
|
-
F
|
|
162
|
-
]), Re = (e) => {
|
|
163
|
-
!H && e.target.value && (k.current = O.current?.getScrollTop() ?? 0), W(e.target.value), G.current || F(e.target.value);
|
|
164
|
-
}, ze = (e) => {
|
|
165
|
-
x || b(y.filter((t) => t.id !== e.id));
|
|
166
|
-
};
|
|
167
|
-
return /* @__PURE__ */ p(d.Root, {
|
|
168
|
-
modal: !1,
|
|
169
|
-
onOpenChange: P,
|
|
170
|
-
open: N,
|
|
171
|
-
children: [/* @__PURE__ */ f(d.Anchor, { children: /* @__PURE__ */ p("div", {
|
|
172
|
-
className: re(h.container, _e),
|
|
173
|
-
children: [S && /* @__PURE__ */ f(ce, {
|
|
174
|
-
as: "label",
|
|
175
|
-
className: h.label,
|
|
176
|
-
htmlFor: w,
|
|
177
|
-
variant: "bodyDefaultBold",
|
|
178
|
-
children: S
|
|
179
|
-
}), /* @__PURE__ */ p("div", {
|
|
180
|
-
className: h.trigger,
|
|
181
|
-
"data-disabled": x,
|
|
182
|
-
onMouseDown: Fe,
|
|
183
|
-
ref: D,
|
|
184
|
-
children: [
|
|
185
|
-
v && $ && /* @__PURE__ */ f(oe, {
|
|
186
|
-
className: h.chips,
|
|
187
|
-
onClick: Ne,
|
|
188
|
-
children: y.map((e) => /* @__PURE__ */ f(u, {
|
|
189
|
-
label: e.displayName,
|
|
190
|
-
onDelete: () => ze(e),
|
|
191
|
-
tabIndex: x ? -1 : void 0
|
|
192
|
-
}, e.id))
|
|
193
|
-
}),
|
|
194
|
-
!v && $ && /* @__PURE__ */ f(u, {
|
|
195
|
-
label: y[0].displayName,
|
|
196
|
-
tabIndex: x ? -1 : void 0
|
|
197
|
-
}),
|
|
198
|
-
/* @__PURE__ */ f("input", {
|
|
199
|
-
"aria-controls": T,
|
|
200
|
-
"aria-expanded": N,
|
|
201
|
-
"aria-haspopup": "listbox",
|
|
202
|
-
className: h.searchInput,
|
|
203
|
-
disabled: x,
|
|
204
|
-
id: w,
|
|
205
|
-
onChange: Re,
|
|
206
|
-
onCompositionStart: Ee,
|
|
207
|
-
onCompositionEnd: De,
|
|
208
|
-
onFocus: Ie,
|
|
209
|
-
placeholder: $ ? void 0 : Pe,
|
|
210
|
-
ref: be,
|
|
211
|
-
role: "combobox",
|
|
212
|
-
type: "text",
|
|
213
|
-
value: Te
|
|
214
|
-
}),
|
|
215
|
-
!v && $ && /* @__PURE__ */ f(se, {
|
|
216
|
-
"aria-label": C(i.clearAriaLabel),
|
|
217
|
-
className: h.clearButton,
|
|
218
|
-
icon: de,
|
|
219
|
-
size: "x-small",
|
|
220
|
-
tabIndex: x ? -1 : void 0,
|
|
221
|
-
onClick: Le
|
|
222
|
-
}),
|
|
223
|
-
/* @__PURE__ */ f(ue, {
|
|
224
|
-
"aria-hidden": "true",
|
|
225
|
-
className: h.searchIcon,
|
|
226
|
-
role: "presentation"
|
|
227
|
-
})
|
|
228
|
-
]
|
|
229
|
-
})]
|
|
230
|
-
}) }), /* @__PURE__ */ p(d.ContentContainer, {
|
|
231
|
-
align: "start",
|
|
232
|
-
className: h.popover,
|
|
233
|
-
container: Ce,
|
|
234
|
-
onInteractOutside: (e) => {
|
|
235
|
-
D.current?.contains(e.target) && e.preventDefault();
|
|
236
|
-
},
|
|
237
|
-
onOpenAutoFocus: (e) => e.preventDefault(),
|
|
238
|
-
ref: Se,
|
|
239
|
-
children: [
|
|
240
|
-
Q.length > 0 && !H && /* @__PURE__ */ f("div", {
|
|
241
|
-
className: h.breadcrumbContainer,
|
|
242
|
-
children: /* @__PURE__ */ f(ae, {
|
|
243
|
-
breadcrumbAriaLabel: C(i.breadcrumbAriaLabel),
|
|
244
|
-
crumbs: Q,
|
|
245
|
-
onPageLinkClick: Ae,
|
|
246
|
-
rootIconVariant: "taxonomy",
|
|
247
|
-
isInteractive: !x,
|
|
248
|
-
isResponsiveEnabled: !1,
|
|
249
|
-
size: "small",
|
|
250
|
-
truncatedLinksIconAriaLabel: C(i.breadcrumbTruncatedLinksLabel),
|
|
251
|
-
truncationMethod: "folder-tree"
|
|
252
|
-
})
|
|
253
|
-
}),
|
|
254
|
-
je && /* @__PURE__ */ f(r, {
|
|
255
|
-
availableLevels: _,
|
|
256
|
-
container: xe,
|
|
257
|
-
levelFilter: M.levelFilter,
|
|
258
|
-
onLevelFilterChange: I.setLevelFilter
|
|
259
|
-
}),
|
|
260
|
-
/* @__PURE__ */ f(n, {
|
|
261
|
-
error: H ? M.searchError : M.initialLoadError,
|
|
262
|
-
estimatedRowHeight: H ? 44 : void 0,
|
|
263
|
-
hasMore: H ? M.searchNextMarker !== void 0 : M.itemsNextMarker !== void 0,
|
|
264
|
-
hasVariableRowHeight: H,
|
|
265
|
-
isFetching: H ? M.isFetchingSearch : M.isFetching,
|
|
266
|
-
isFetchingMore: H ? M.isFetchingSearchMore : M.isFetchingMore,
|
|
267
|
-
isSearchMode: H,
|
|
268
|
-
items: H ? Me : ke,
|
|
269
|
-
listboxId: T,
|
|
270
|
-
loadMoreError: H ? M.searchLoadMoreError : M.loadMoreError,
|
|
271
|
-
multiSelect: v,
|
|
272
|
-
onFocusExit: () => E.current?.focus(),
|
|
273
|
-
onLoadMore: H ? I.searchLoadMore : we,
|
|
274
|
-
onRetry: I.retry,
|
|
275
|
-
ref: O,
|
|
276
|
-
selectedValue: Oe
|
|
277
|
-
})
|
|
278
|
-
]
|
|
279
|
-
})]
|
|
280
|
-
});
|
|
281
|
-
});
|
|
282
|
-
export { m as n, g as t };
|
|
1
|
+
import{BREADCRUMB_ROOT_ID}from"../esm/lib/constants.js";import{useTaxonomyPickerController}from"../esm/lib/hooks/use-taxonomy-picker-controller.js";import{t as TaxonomyItemsList}from"./taxonomy-items-list.js";import{t as TaxonomyLevelFilter}from"./taxonomy-level-filter.js";import{messages}from"../esm/lib/components/metadata-taxonomy-picker-shell/messages.js";import{forwardRef,useCallback,useEffect,useId,useLayoutEffect,useMemo,useRef,useState}from"react";import clsx from"clsx";import{useIntl}from"react-intl";import{Breadcrumb,ChipsGroup,IconButton,InputChip,Popover,Text,useForkRef}from"@box/blueprint-web";import{Search,XMark}from"@box/blueprint-web-assets/icons/Fill";import{jsx,jsxs}from"react/jsx-runtime";import '../styles/metadata-taxonomy-picker-shell.css';var TaxonomyPickerMode=function(TaxonomyPickerMode){return TaxonomyPickerMode.SingleLevel=`single-level`,TaxonomyPickerMode.MultiLevel=`multi-level`,TaxonomyPickerMode}({}),metadata_taxonomy_picker_shell_module_default={container:`_container_nitxb_1`,label:`_label_nitxb_8`,trigger:`_trigger_nitxb_12`,searchInput:`_searchInput_nitxb_30`,chips:`_chips_nitxb_42`,searchIcon:`_searchIcon_nitxb_79`,popover:`_popover_nitxb_88`,clearButton:`_clearButton_nitxb_96`,breadcrumbContainer:`_breadcrumbContainer_nitxb_100`};function getLatestSelectableLevel(levels){let latest=null;for(let level of levels)level.selectable!==!1&&(latest===null||level.level>latest)&&(latest=level.level);return latest}var EMPTY_LEVELS=[];function resolvePortalContainer(portalElement){if(portalElement!=null)return(typeof portalElement==`function`?portalElement():portalElement)??void 0}var MetadataTaxonomyPickerShell=forwardRef(function({itemsService,eventService,levels=EMPTY_LEVELS,mode,multiSelect,value,onValueChange,placeholder,disabled=!1,label,containerClassName,portalElement},forwardedRef){let{formatMessage}=useIntl(),inputId=useId(),listboxId=`${inputId}-listbox`,inputRef=useRef(null),mergedInputRef=useForkRef(inputRef,forwardedRef),triggerRef=useRef(null),listRef=useRef(null),[popoverContentElement,setPopoverContentElement]=useState(null),savedScrollTopRef=useRef(0),wasSearchModeRef=useRef(!1),portalContainer=resolvePortalContainer(portalElement),isSingleLevelMode=mode===TaxonomyPickerMode.SingleLevel,{state,isOpen,handleOpenChange,handleInputValueChange,actions}=useTaxonomyPickerController(itemsService,levels,eventService),{items,levelStack}=state,{drillDown,navigateBack,loadMore,setSearchScopeOverride}=actions,isSearchMode=state.searchInputValue!==``,latestSelectableLevel=useMemo(()=>getLatestSelectableLevel(state.availableLevels),[state.availableLevels]);useEffect(()=>{setSearchScopeOverride(isSingleLevelMode&&latestSelectableLevel!==null?{parentId:null,levelFilter:latestSelectableLevel}:void 0)},[isSingleLevelMode,latestSelectableLevel,setSearchScopeOverride]);let[inputDisplayValue,setInputDisplayValue]=useState(``),isComposingRef=useRef(!1),handleCompositionStart=useCallback(()=>{isComposingRef.current=!0},[]),handleCompositionEnd=useCallback(e=>{isComposingRef.current=!1,handleInputValueChange(e.target.value)},[handleInputValueChange]);useLayoutEffect(()=>{isComposingRef.current?state.searchInputValue===``&&(isComposingRef.current=!1,setInputDisplayValue(``)):setInputDisplayValue(state.searchInputValue)},[state.searchInputValue]),useLayoutEffect(()=>{let rafId;return!isSearchMode&&wasSearchModeRef.current&&(rafId=requestAnimationFrame(()=>{listRef.current?.scrollTo(savedScrollTopRef.current)})),wasSearchModeRef.current=isSearchMode,()=>{rafId!==void 0&&cancelAnimationFrame(rafId)}},[isSearchMode]);let selectedIds=useMemo(()=>new Set(value.map(v=>v.id)),[value]),singleSelectValue=useMemo(()=>!multiSelect&&value.length===1?value[0].id:``,[multiSelect,value]),handleSelect=useCallback((id,closeAfterSelect=!0)=>{let node=items.find(n=>n.id===id);if(!node||!node.selectable)return;let newValue={id:node.id,displayName:node.displayName,level:node.level,ancestors:node.ancestors};multiSelect?onValueChange(selectedIds.has(id)?value.filter(v=>v.id!==id):[...value,newValue]):(onValueChange([newValue]),closeAfterSelect&&handleOpenChange(!1))},[items,multiSelect,selectedIds,value,onValueChange,handleOpenChange]),handleSearchSelect=useCallback((id,closeOnSelection=!0)=>{let result=state.searchResults.find(r=>r.id===id);if(!result||!result.selectable)return;let newValue={id:result.id,displayName:result.displayName,level:result.level,ancestors:result.ancestors};multiSelect?onValueChange(selectedIds.has(id)?value.filter(v=>v.id!==id):[...value,newValue]):(onValueChange([newValue]),closeOnSelection!==!1&&handleOpenChange(!1))},[state.searchResults,multiSelect,selectedIds,value,onValueChange,handleOpenChange]),handleSearchDrillDown=useCallback(id=>{let result=state.searchResults.find(r=>r.id===id);result&&actions.drillDown({id:result.id,displayName:result.displayName,ancestors:result.ancestors})},[state.searchResults,actions]),handleDrillDown=useCallback(id=>{let node=state.items.find(n=>n.id===id);node&&drillDown({id:node.id,displayName:node.displayName})},[state.items,drillDown]),computeShowDrillDown=useCallback(node=>!(!node.hasChildren||isSingleLevelMode&&latestSelectableLevel!==null&&node.level>=latestSelectableLevel),[isSingleLevelMode,latestSelectableLevel]),menuItems=useMemo(()=>items.map(node=>({id:node.id,displayName:node.displayName,selectable:node.selectable,multiSelect,isSelected:selectedIds.has(node.id),showDrillDown:computeShowDrillDown(node),ancestors:node.ancestors,onSelect:handleSelect,onDrillDown:handleDrillDown})),[items,multiSelect,selectedIds,computeShowDrillDown,handleSelect,handleDrillDown]),breadcrumbCrumbs=useMemo(()=>levelStack.length===0?[]:[{id:BREADCRUMB_ROOT_ID,name:formatMessage(messages.breadcrumbRootLabel)},...levelStack.map(entry=>({id:entry.id,name:entry.displayName}))],[levelStack,formatMessage]),handleBreadcrumbClick=useCallback(crumbId=>{navigateBack(crumbId===`__breadcrumb_root__`?null:crumbId)},[navigateBack]),showLevelFilter=!isSingleLevelMode&&isSearchMode&&state.availableLevels.length>1,searchMenuItems=useMemo(()=>state.searchResults.map(result=>({id:result.id,displayName:result.displayName,selectable:result.selectable,multiSelect,isSelected:selectedIds.has(result.id),showDrillDown:computeShowDrillDown(result),ancestors:result.ancestors,onSelect:handleSearchSelect,onDrillDown:handleSearchDrillDown})),[state.searchResults,multiSelect,selectedIds,computeShowDrillDown,handleSearchSelect,handleSearchDrillDown]),handleContainerClick=useCallback(event=>{event.target===event.currentTarget&&inputRef.current?.focus()},[inputRef]),hasValues=value.length>0,placeholderText=placeholder??formatMessage(messages.placeholder),handleTriggerMouseDown=e=>{!disabled&&e.target===e.currentTarget&&(e.preventDefault(),inputRef.current?.focus())},handleInputFocus=()=>{!disabled&&!isOpen&&handleOpenChange(!0)},handleClearSingleSelect=useCallback(()=>{disabled||(onValueChange([]),handleInputValueChange(``))},[disabled,onValueChange,handleInputValueChange]),handleInputChange=e=>{!isSearchMode&&e.target.value&&(savedScrollTopRef.current=listRef.current?.getScrollTop()??0),setInputDisplayValue(e.target.value),isComposingRef.current||handleInputValueChange(e.target.value)},handleRemoveValue=removed=>{disabled||onValueChange(value.filter(v=>v.id!==removed.id))};return jsxs(Popover.Root,{modal:!1,onOpenChange:handleOpenChange,open:isOpen,children:[jsx(Popover.Anchor,{children:jsxs(`div`,{className:clsx(metadata_taxonomy_picker_shell_module_default.container,containerClassName),children:[label&&jsx(Text,{as:`label`,className:metadata_taxonomy_picker_shell_module_default.label,htmlFor:inputId,variant:`bodyDefaultBold`,children:label}),jsxs(`div`,{className:metadata_taxonomy_picker_shell_module_default.trigger,"data-disabled":disabled,onMouseDown:handleTriggerMouseDown,ref:triggerRef,children:[multiSelect&&hasValues&&jsx(ChipsGroup,{className:metadata_taxonomy_picker_shell_module_default.chips,onClick:handleContainerClick,children:value.map(v=>jsx(InputChip,{label:v.displayName,onDelete:()=>handleRemoveValue(v),tabIndex:disabled?-1:void 0},v.id))}),!multiSelect&&hasValues&&jsx(InputChip,{label:value[0].displayName,tabIndex:disabled?-1:void 0}),jsx(`input`,{"aria-controls":listboxId,"aria-expanded":isOpen,"aria-haspopup":`listbox`,className:metadata_taxonomy_picker_shell_module_default.searchInput,disabled,id:inputId,onChange:handleInputChange,onCompositionStart:handleCompositionStart,onCompositionEnd:handleCompositionEnd,onFocus:handleInputFocus,placeholder:hasValues?void 0:placeholderText,ref:mergedInputRef,role:`combobox`,type:`text`,value:inputDisplayValue}),!multiSelect&&hasValues&&jsx(IconButton,{"aria-label":formatMessage(messages.clearAriaLabel),className:metadata_taxonomy_picker_shell_module_default.clearButton,icon:XMark,size:`x-small`,tabIndex:disabled?-1:void 0,onClick:handleClearSingleSelect}),jsx(Search,{"aria-hidden":`true`,className:metadata_taxonomy_picker_shell_module_default.searchIcon,role:`presentation`})]})]})}),jsxs(Popover.ContentContainer,{align:`start`,className:metadata_taxonomy_picker_shell_module_default.popover,container:portalContainer,onInteractOutside:e=>{triggerRef.current?.contains(e.target)&&e.preventDefault()},onOpenAutoFocus:e=>e.preventDefault(),ref:setPopoverContentElement,children:[breadcrumbCrumbs.length>0&&!isSearchMode&&jsx(`div`,{className:metadata_taxonomy_picker_shell_module_default.breadcrumbContainer,children:jsx(Breadcrumb,{breadcrumbAriaLabel:formatMessage(messages.breadcrumbAriaLabel),crumbs:breadcrumbCrumbs,onPageLinkClick:handleBreadcrumbClick,rootIconVariant:`taxonomy`,isInteractive:!disabled,isResponsiveEnabled:!1,size:`small`,truncatedLinksIconAriaLabel:formatMessage(messages.breadcrumbTruncatedLinksLabel),truncationMethod:`folder-tree`})}),showLevelFilter&&jsx(TaxonomyLevelFilter,{availableLevels:levels,container:popoverContentElement,levelFilter:state.levelFilter,onLevelFilterChange:actions.setLevelFilter}),jsx(TaxonomyItemsList,{error:isSearchMode?state.searchError:state.initialLoadError,estimatedRowHeight:isSearchMode?44:void 0,hasMore:isSearchMode?state.searchNextMarker!==void 0:state.itemsNextMarker!==void 0,hasVariableRowHeight:isSearchMode,isFetching:isSearchMode?state.isFetchingSearch:state.isFetching,isFetchingMore:isSearchMode?state.isFetchingSearchMore:state.isFetchingMore,isSearchMode,items:isSearchMode?searchMenuItems:menuItems,listboxId,loadMoreError:isSearchMode?state.searchLoadMoreError:state.loadMoreError,multiSelect,onFocusExit:()=>inputRef.current?.focus(),onLoadMore:isSearchMode?actions.searchLoadMore:loadMore,onRetry:actions.retry,ref:listRef,selectedValue:singleSelectValue})]})]})});export{TaxonomyPickerMode as n,MetadataTaxonomyPickerShell as t};
|
|
@@ -1,115 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { Fragment as e, memo as t, useCallback as n, useLayoutEffect as r, useRef as i, useState as a } from "react";
|
|
3
|
-
import { Text as o, Tooltip as s } from "@box/blueprint-web";
|
|
4
|
-
import { Ellipsis as c } from "@box/blueprint-web-assets/icons/Fill";
|
|
5
|
-
import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
|
|
6
|
-
import '../styles/taxonomy-ancestor-breadcrumb.css';var f = {
|
|
7
|
-
root: "_root_12bt1_2",
|
|
8
|
-
segment: "_segment_12bt1_15",
|
|
9
|
-
trail: "_trail_12bt1_30",
|
|
10
|
-
ellipsisIcon: "_ellipsisIcon_12bt1_39",
|
|
11
|
-
probe: "_probe_12bt1_48"
|
|
12
|
-
}, p = (e) => {
|
|
13
|
-
let t = window.getComputedStyle(e), n = parseFloat(t.lineHeight);
|
|
14
|
-
return Number.isFinite(n) && n > 0 ? n : (parseFloat(t.fontSize) || 16) * 1.2;
|
|
15
|
-
}, m = (e, t, n) => {
|
|
16
|
-
if (e.textContent = t, e.scrollWidth - e.clientWidth <= n) return !1;
|
|
17
|
-
let r = e.clientWidth, i = 0, a = t.length, o = "";
|
|
18
|
-
for (; i <= a;) {
|
|
19
|
-
let s = Math.floor((i + a) / 2), c = t.slice(0, s).trimEnd() + "…";
|
|
20
|
-
e.textContent = c, e.scrollWidth <= r + n ? (o = c, i = s + 1) : a = s - 1;
|
|
21
|
-
}
|
|
22
|
-
return e.textContent = o || "…", !0;
|
|
23
|
-
}, h = ({ ancestor: e, bold: t, onMount: n }) => /* @__PURE__ */ u(o, {
|
|
24
|
-
as: "span",
|
|
25
|
-
className: f.segment,
|
|
26
|
-
color: "textOnLightSecondary",
|
|
27
|
-
ref: n ? ((t) => n(e, t)) : void 0,
|
|
28
|
-
variant: t ? "captionBold" : "caption",
|
|
29
|
-
children: e.displayName
|
|
30
|
-
}), g = () => /* @__PURE__ */ u(o, {
|
|
31
|
-
"aria-hidden": "true",
|
|
32
|
-
as: "span",
|
|
33
|
-
color: "textOnLightSecondary",
|
|
34
|
-
variant: "caption",
|
|
35
|
-
children: " / "
|
|
36
|
-
}), _ = ({ items: t, lastIndex: n, onSegmentMount: r }) => /* @__PURE__ */ u(l, { children: t.map((t, i) => /* @__PURE__ */ d(e, { children: [i > 0 && /* @__PURE__ */ u(g, {}), /* @__PURE__ */ u(h, {
|
|
37
|
-
ancestor: t,
|
|
38
|
-
bold: i === n,
|
|
39
|
-
onMount: r
|
|
40
|
-
})] }, t.id)) }), v = /*#__PURE__*/ t(function({ ancestors: e }) {
|
|
41
|
-
let t = i(null), v = i(null), y = i(/* @__PURE__ */ new Map()), [b, x] = a(!1), [S, C] = a(!1), w = e.length - 1, T = e.length >= 3 && b, E = b || S, D = n((e, t) => {
|
|
42
|
-
t ? y.current.set(e.id, {
|
|
43
|
-
node: t,
|
|
44
|
-
fullText: e.displayName
|
|
45
|
-
}) : y.current.delete(e.id);
|
|
46
|
-
}, []);
|
|
47
|
-
r(() => {
|
|
48
|
-
let e = t.current, n = v.current;
|
|
49
|
-
if (!e || !n) return;
|
|
50
|
-
let r = p(n) * 2 + 2, i = () => {
|
|
51
|
-
let e = n.scrollHeight > r;
|
|
52
|
-
x((t) => t === e ? t : e);
|
|
53
|
-
let t = !1;
|
|
54
|
-
y.current.forEach(({ node: e, fullText: n }) => {
|
|
55
|
-
m(e, n, 2) && (t = !0);
|
|
56
|
-
}), C((e) => e === t ? e : t);
|
|
57
|
-
};
|
|
58
|
-
i();
|
|
59
|
-
let a = new ResizeObserver(i);
|
|
60
|
-
return a.observe(e), a.observe(n), () => {
|
|
61
|
-
a.disconnect();
|
|
62
|
-
};
|
|
63
|
-
}, [e, E]);
|
|
64
|
-
let O = e.map((e) => e.displayName).join(" / "), k = /* @__PURE__ */ d(o, {
|
|
65
|
-
as: "span",
|
|
66
|
-
className: f.root,
|
|
67
|
-
"data-testid": "taxonomy-ancestor-breadcrumb",
|
|
68
|
-
ref: t,
|
|
69
|
-
role: E ? "group" : void 0,
|
|
70
|
-
tabIndex: E ? 0 : void 0,
|
|
71
|
-
children: [/* @__PURE__ */ u(o, {
|
|
72
|
-
as: "span",
|
|
73
|
-
className: f.trail,
|
|
74
|
-
color: "textOnLightSecondary",
|
|
75
|
-
variant: "caption",
|
|
76
|
-
children: T ? /* @__PURE__ */ d(l, { children: [
|
|
77
|
-
/* @__PURE__ */ u(h, {
|
|
78
|
-
ancestor: e[0],
|
|
79
|
-
onMount: D
|
|
80
|
-
}),
|
|
81
|
-
/* @__PURE__ */ u(g, {}),
|
|
82
|
-
/* @__PURE__ */ u(c, {
|
|
83
|
-
"aria-hidden": !0,
|
|
84
|
-
className: f.ellipsisIcon,
|
|
85
|
-
color: "currentColor"
|
|
86
|
-
}),
|
|
87
|
-
/* @__PURE__ */ u(g, {}),
|
|
88
|
-
/* @__PURE__ */ u(h, {
|
|
89
|
-
ancestor: e[w],
|
|
90
|
-
bold: !0,
|
|
91
|
-
onMount: D
|
|
92
|
-
})
|
|
93
|
-
] }) : /* @__PURE__ */ u(_, {
|
|
94
|
-
items: e,
|
|
95
|
-
lastIndex: w,
|
|
96
|
-
onSegmentMount: D
|
|
97
|
-
})
|
|
98
|
-
}), /* @__PURE__ */ u(o, {
|
|
99
|
-
"aria-hidden": "true",
|
|
100
|
-
as: "span",
|
|
101
|
-
className: f.probe,
|
|
102
|
-
ref: v,
|
|
103
|
-
variant: "caption",
|
|
104
|
-
children: /* @__PURE__ */ u(_, {
|
|
105
|
-
items: e,
|
|
106
|
-
lastIndex: w
|
|
107
|
-
})
|
|
108
|
-
})]
|
|
109
|
-
});
|
|
110
|
-
return E ? /* @__PURE__ */ u(s, {
|
|
111
|
-
content: O,
|
|
112
|
-
children: k
|
|
113
|
-
}) : k;
|
|
114
|
-
});
|
|
115
|
-
export { v as t };
|
|
1
|
+
import"../esm/lib/constants.js";import{Fragment,memo,useCallback,useLayoutEffect,useRef,useState}from"react";import{Text,Tooltip}from"@box/blueprint-web";import{Ellipsis}from"@box/blueprint-web-assets/icons/Fill";import{Fragment as Fragment$1,jsx,jsxs}from"react/jsx-runtime";import '../styles/taxonomy-ancestor-breadcrumb.css';var taxonomy_ancestor_breadcrumb_module_default={root:`_root_12bt1_2`,segment:`_segment_12bt1_15`,trail:`_trail_12bt1_30`,ellipsisIcon:`_ellipsisIcon_12bt1_39`,probe:`_probe_12bt1_48`},readLineHeight=el=>{let computed=window.getComputedStyle(el),parsed=parseFloat(computed.lineHeight);return Number.isFinite(parsed)&&parsed>0?parsed:(parseFloat(computed.fontSize)||16)*1.2},applyTrimmedEllipsis=(node,fullText,tolerancePx)=>{if(node.textContent=fullText,node.scrollWidth-node.clientWidth<=tolerancePx)return!1;let maxWidth=node.clientWidth,lo=0,hi=fullText.length,best=``;for(;lo<=hi;){let mid=Math.floor((lo+hi)/2),candidate=fullText.slice(0,mid).trimEnd()+`…`;node.textContent=candidate,node.scrollWidth<=maxWidth+tolerancePx?(best=candidate,lo=mid+1):hi=mid-1}return node.textContent=best||`…`,!0},Segment=({ancestor,bold,onMount})=>jsx(Text,{as:`span`,className:taxonomy_ancestor_breadcrumb_module_default.segment,color:`textOnLightSecondary`,ref:onMount?(node=>onMount(ancestor,node)):void 0,variant:bold?`captionBold`:`caption`,children:ancestor.displayName}),Separator=()=>jsx(Text,{"aria-hidden":`true`,as:`span`,color:`textOnLightSecondary`,variant:`caption`,children:` / `}),Segments=({items,lastIndex,onSegmentMount})=>jsx(Fragment$1,{children:items.map((ancestor,index)=>jsxs(Fragment,{children:[index>0&&jsx(Separator,{}),jsx(Segment,{ancestor,bold:index===lastIndex,onMount:onSegmentMount})]},ancestor.id))}),TaxonomyAncestorBreadcrumb=memo(function({ancestors}){let rootRef=useRef(null),probeRef=useRef(null),segmentNodesRef=useRef(new Map),[isProbeOverflowing,setIsProbeOverflowing]=useState(!1),[hasClippedSegment,setHasClippedSegment]=useState(!1),lastIndex=ancestors.length-1,showTruncated=ancestors.length>=3&&isProbeOverflowing,shouldShowTooltip=isProbeOverflowing||hasClippedSegment,handleSegmentMount=useCallback((ancestor,node)=>{node?segmentNodesRef.current.set(ancestor.id,{node,fullText:ancestor.displayName}):segmentNodesRef.current.delete(ancestor.id)},[]);useLayoutEffect(()=>{let root=rootRef.current,probe=probeRef.current;if(!root||!probe)return;let maxHeight=readLineHeight(probe)*2+2,measure=()=>{let probeOverflows=probe.scrollHeight>maxHeight;setIsProbeOverflowing(prev=>prev===probeOverflows?prev:probeOverflows);let segmentClipped=!1;segmentNodesRef.current.forEach(({node,fullText})=>{applyTrimmedEllipsis(node,fullText,2)&&(segmentClipped=!0)}),setHasClippedSegment(prev=>prev===segmentClipped?prev:segmentClipped)};measure();let observer=new ResizeObserver(measure);return observer.observe(root),observer.observe(probe),()=>{observer.disconnect()}},[ancestors,shouldShowTooltip]);let fullPath=ancestors.map(a=>a.displayName).join(` / `),wrapper=jsxs(Text,{as:`span`,className:taxonomy_ancestor_breadcrumb_module_default.root,"data-testid":`taxonomy-ancestor-breadcrumb`,ref:rootRef,role:shouldShowTooltip?`group`:void 0,tabIndex:shouldShowTooltip?0:void 0,children:[jsx(Text,{as:`span`,className:taxonomy_ancestor_breadcrumb_module_default.trail,color:`textOnLightSecondary`,variant:`caption`,children:showTruncated?jsxs(Fragment$1,{children:[jsx(Segment,{ancestor:ancestors[0],onMount:handleSegmentMount}),jsx(Separator,{}),jsx(Ellipsis,{"aria-hidden":!0,className:taxonomy_ancestor_breadcrumb_module_default.ellipsisIcon,color:`currentColor`}),jsx(Separator,{}),jsx(Segment,{ancestor:ancestors[lastIndex],bold:!0,onMount:handleSegmentMount})]}):jsx(Segments,{items:ancestors,lastIndex,onSegmentMount:handleSegmentMount})}),jsx(Text,{"aria-hidden":`true`,as:`span`,className:taxonomy_ancestor_breadcrumb_module_default.probe,ref:probeRef,variant:`caption`,children:jsx(Segments,{items:ancestors,lastIndex})})]});return shouldShowTooltip?jsx(Tooltip,{content:fullPath,children:wrapper}):wrapper});export{TaxonomyAncestorBreadcrumb as t};
|