@1771technologies/lytenyte-pro
Version:
738 lines (737 loc) • 27.9 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import { c as useGrid, G as GridProvider } from "./useScrollLock-D4UY33Sb.js";
import { useMemo, createContext, useState, useContext, forwardRef, useEffect, useCallback } from "react";
import { clsx } from "@1771technologies/js-utils";
import { useDroppable as useDroppable$1 } from "@1771technologies/react-dragon";
import { c as canAgg, a as canMeasure, u as useAggregationSource, b as useMeasuresSource, d as useRowGroupsSource, e as useColumnPivotSource, f as useDroppable, g as useEdgeScroll, P as Pill, M as MenuTrigger, h as useDraggable, i as PillManagerAggMenu, j as PillManagerMeasureMenu } from "./pill-B_ah-_Qz.js";
import { u as useDragStore, a as useDrag, D as DragProvider } from "./drag-store-BF4ad65L.js";
import "@1771technologies/react-sizer";
import { useCombinedRefs } from "@1771technologies/react-utils";
import "@1771technologies/grid-provider";
import "@1771technologies/grid-core";
import { D as DragIcon, M as MeasuresIcon, C as ColumnPivotIcon, R as RowGroupIcon } from "./row-group-icon-DFUMye0v.js";
import { M as MoreDotsIcon } from "./more-dots-icon-CzAH3xHG.js";
import { M as MenuRoot, a as MenuPortal } from "./column-menu-driver-cG-EZgLa.js";
import { M as MenuPositioner } from "./menu-C49unLOk.js";
import { M as ManageColumnsIcon, C as CollapseIcon, E as ExpandIcon } from "./manage-columns-icon-D4CElo5H.js";
import { createPortal } from "react-dom";
function useColumnSource(source) {
const { api, state: sx } = useGrid();
const columns = sx.columns.use();
const pivotModel = sx.columnPivotModel.use();
const aggModel = sx.aggModel.use();
const groupModel = sx.rowGroupModel.use();
const measureModel = sx.measureModel.use();
const base = sx.columnBase.use();
return useMemo(() => {
if (source !== "columns") return [];
const active = [];
const inactive = [];
for (const c of columns) {
if (api.columnIsGridGenerated(c)) continue;
if (api.columnIsVisible(c, true)) {
const onToggle = () => api.columnUpdate(c, { hide: true });
const dragTags = ["columns"];
if (api.columnIsPivotable(c) && !pivotModel.includes(c.id)) dragTags.push("column-pivot");
if (api.columnIsRowGroupable(c) && !groupModel.includes(c.id)) dragTags.push("row-group");
if (!aggModel[c.id] && canAgg(c, base)) dragTags.push("aggregations");
if (!measureModel[c.id] && canMeasure(c, base)) dragTags.push("measures");
const dragEnd = (d) => {
const over = d.over.at(-1);
if (!over || !over.canDrop) return;
if (over.data.target === "columns") {
const id = over.data.id;
if (id === c.id) return;
const isBefore = (sx.rtl.peek() ? "right" : "left") === over.xHalf;
if (isBefore) api.columnMoveBefore([c.id], id);
else api.columnMoveAfter([c.id], id);
return;
}
if (over.id === "row-groups-pills") {
sx.rowGroupModel.set((prev) => [...prev, c.id]);
api.columnUpdate(c, { hide: true });
return;
}
if (over.data.target === "row-group") {
const id = over.data.id;
api.columnUpdate(c, { hide: true });
const model = sx.rowGroupModel.peek();
const isBefore = (sx.rtl.peek() ? "right" : "left") === over.xHalf;
const index = model.indexOf(id);
const nextModel = [...model];
nextModel.splice(isBefore ? index : index + 1, 0, c.id);
sx.rowGroupModel.set(nextModel);
return;
}
if (over.id === "column-pivots-pills") {
sx.columnPivotModel.set((prev) => [...prev, c.id]);
api.columnUpdate(c, { hide: true });
return;
}
if (over.data.target === "column-pivot") {
const id = over.data.id;
api.columnUpdate(c, { hide: true });
const model = sx.columnPivotModel.peek();
const isBefore = (sx.rtl.peek() ? "right" : "left") === over.xHalf;
const index = model.indexOf(id);
const nextModel = [...model];
nextModel.splice(isBefore ? index : index + 1, 0, c.id);
sx.columnPivotModel.set(nextModel);
return;
}
if (over.id === "aggregations-pills") {
const aggFn = c.aggFnDefault ?? c.aggFnsAllowed?.at(0) ?? base.aggFnsAllowed?.at(0);
if (!aggFn) return;
sx.aggModel.set((prev) => ({ ...prev, [c.id]: { fn: aggFn } }));
return;
}
if (over.id === "measures-pills") {
const measureFn = c.measureFnDefault ?? c.measureFnsAllowed?.at(0) ?? base.measureFnsAllowed?.at(0);
if (!measureFn) return;
sx.measureModel.set((prev) => ({ ...prev, [c.id]: { fn: measureFn } }));
return;
}
};
active.push({
kind: "column",
active: true,
label: c.headerName ?? c.id,
onClick: onToggle,
isColumn: true,
draggable: api.columnIsMovable(c),
dragTags,
dragEnd,
dropId: `column-${c.id}`,
dropTags: ["columns"],
dropData: {
target: "columns",
id: c.id
}
});
} else {
const onToggle = () => api.columnUpdate(c, { hide: false });
inactive.push({
kind: "column",
active: false,
label: c.headerName ?? c.id,
onClick: onToggle,
dropId: `column-${c.id}`,
draggable: false,
dragTags: [],
dropTags: [],
dropData: {}
});
}
}
return [...active, ...inactive];
}, [
aggModel,
api,
base,
columns,
groupModel,
measureModel,
pivotModel,
source,
sx.aggModel,
sx.columnPivotModel,
sx.measureModel,
sx.rowGroupModel,
sx.rtl
]);
}
const context$1 = createContext({});
function PillManagerControlsProvider(props) {
const [activeRow, setActiveRow] = useState(null);
const [activePill, setActivePill] = useState(null);
const m = useMemo(() => {
return {
activeRow,
setActiveRow,
activePill,
setActivePill
};
}, [activePill, activeRow]);
return /* @__PURE__ */ jsx(context$1.Provider, { value: m, children: props.children });
}
const usePillControls = () => useContext(context$1);
const PillRowContext = createContext(null);
const usePillRow = () => useContext(PillRowContext);
const PillManagerRow = forwardRef(
function PillManagerRow2({ pillSource, ...props }, ref) {
const [expanded, setExpanded] = useState(false);
const { activeRow } = usePillControls();
const value = useMemo(() => {
return {
expanded,
setExpanded,
expandable: true,
pillSource
};
}, [expanded, pillSource]);
return /* @__PURE__ */ jsx(PillRowContext.Provider, { value, children: /* @__PURE__ */ jsx(
"div",
{
...props,
className: clsx("lng1771-pill-manager__row"),
ref,
"data-expanded": expanded,
"data-pill-row-key": pillSource,
"data-pill-active": activeRow === pillSource
}
) });
}
);
const PillManagerPills = forwardRef(function PillManagerRow3({ children, ...props }, ref) {
const { pillSource } = usePillRow();
const aggs = useAggregationSource(pillSource);
const measures = useMeasuresSource(pillSource);
const columns = useColumnSource(pillSource);
const rowGroups = useRowGroupsSource(pillSource);
const pivots = useColumnPivotSource(pillSource);
const sourceItems = useMemo(() => {
if (pillSource === "columns") return columns;
if (pillSource === "column-pivots") return pivots;
if (pillSource === "row-groups") return rowGroups;
if (pillSource === "aggregations") return aggs;
if (pillSource === "measures") return measures;
return [];
}, [aggs, columns, measures, pillSource, pivots, rowGroups]);
const dropTags = useMemo(() => {
if (pillSource === "columns") return ["columns"];
if (pillSource === "aggregations") return ["aggregations"];
if (pillSource === "column-pivots") return ["column-pivot"];
if (pillSource === "measures") return ["measures"];
if (pillSource === "row-groups") return ["row-group"];
return [];
}, [pillSource]);
const dropData = useMemo(() => {
return { target: pillSource, sourceItems };
}, [pillSource, sourceItems]);
const {
canDrop,
isTarget,
isNearestOver,
ref: dropRef
} = useDroppable({
id: `${pillSource}-pills`,
accepted: dropTags,
data: dropData
});
const grid = useGrid();
const gridId = grid.state.gridId.use();
const {
canDrop: canDropNative,
onDragOver,
onDrop
} = useDroppable$1({
tags: pillSource === "row-groups" ? [`${gridId}:grid:groupable`] : [],
onDrop: (p) => {
const data = p.getData();
const column = data?.columns?.[0];
document.body.classList.remove("lng1771-drag-on");
if (!column) return;
const id = column.id;
grid.state.rowGroupModel.set((prev) => [...prev, id]);
grid.api.columnUpdate(column, { hide: true });
}
});
const canDropEither = canDrop || canDropNative;
const combined = useCombinedRefs(dropRef, ref);
const store = useDragStore();
const isActive = useDrag(store, (s) => !!s.active);
const re = useEdgeScroll({ isActive, direction: "horizontal" });
const allRefs = useCombinedRefs(re, combined);
return /* @__PURE__ */ jsx(
"div",
{
...props,
onDragOver,
onDrop,
className: clsx("lng1771-pill-manager__pills", props.className),
"data-is-drop-target": isTarget,
ref: allRefs,
"data-pill-source": pillSource,
"data-drop-visible": canDropEither && sourceItems.filter((c) => c.active).length === 0,
tabIndex: -1,
children: /* @__PURE__ */ jsxs("div", { className: "lng1771-pill-manager__pills-inner", children: [
children({ pills: sourceItems }),
canDropEither && isNearestOver && sourceItems.filter((c) => c.active).length > 0 && /* @__PURE__ */ jsx("div", { className: "lng1771-pill-manager__drop-indicator-end" })
] })
}
);
});
const PillManagerPill = forwardRef(function PillManagerPill2({ item, menu, ...props }, ref) {
const {
ref: dropRef,
isTarget,
canDrop,
xHalf
} = useDroppable({
id: item.dropId,
accepted: item.dropTags,
data: item.dropData,
active: item.active
});
const grid = useGrid();
const rtl = grid.state.rtl.use();
const combinedRefs = useCombinedRefs(ref, dropRef);
const { activePill, setActivePill, setActiveRow } = usePillControls();
const { pillSource } = usePillRow();
const {
aggMenuRenderer: AggMenu,
measureMenuRenderer: MeasureMenu,
menuTriggerIcon: TriggerIcon
} = useComponents();
const [isDragging, setIsDragging] = useState(false);
const gridId = grid.state.gridId.use();
const {
canDrop: canDropNative,
onDrop,
onDragOver
} = useDroppable$1({
tags: pillSource === "row-groups" ? [`${gridId}:grid:groupable`] : [],
onDrop: (p) => {
const data = p.getData();
const column = data?.columns?.[0];
document.body.classList.remove("lng1771-drag-on");
if (!column) return;
const id = column.id;
console.log(item);
grid.state.rowGroupModel.set((prev) => {
const index = prev.indexOf(item.dropData?.id ?? "");
if (index === -1) return prev;
const next = [...prev];
next.splice(index, 0, id);
return next;
});
grid.api.columnUpdate(column, { hide: true });
}
});
return /* @__PURE__ */ jsxs(
"div",
{
...props,
role: "button",
ref: combinedRefs,
onDrop,
onDragOver,
"data-pill-key": item.dropId,
"data-pill-active": item.active,
"data-is-droppable": isTarget && canDrop,
className: "lng1771-pill-manager__pill-outer",
onClick: item.onClick,
children: [
/* @__PURE__ */ jsxs(
Pill,
{
kind: item.kind,
"data-pill-focused": item.dropId === activePill,
className: "lng1771-pill-manager__pill-inner",
interactive: true,
"data-draggable": item.draggable,
"data-drag-active": isDragging,
children: [
item.draggable && /* @__PURE__ */ jsx(DragHandle, { item, setIsDragging }),
/* @__PURE__ */ jsx("span", { children: item.label }),
item.secondaryLabel && /* @__PURE__ */ jsx("span", { className: "lng1771-pill-manager__pill-inner--secondary-label", children: item.secondaryLabel }),
(item.isAggregation || item.isMeasure) && /* @__PURE__ */ jsxs(MenuRoot, { children: [
/* @__PURE__ */ jsx(
MenuTrigger,
{
className: "lng1771-pill-manager__menu-trigger",
"data-pill-menu-trigger": "true",
tabIndex: -1,
onClick: (e) => e.stopPropagation(),
onFocus: (ev) => {
let current = ev.currentTarget;
while (current && current.getAttribute("data-rows-root") == null) {
current = current.parentElement;
}
if (current) current.focus();
setTimeout(() => {
setActivePill(item.dropId);
setActiveRow(pillSource);
});
},
children: /* @__PURE__ */ jsx(TriggerIcon, { width: 16, height: 16 })
}
),
/* @__PURE__ */ jsx(MenuPortal, { children: /* @__PURE__ */ jsxs(
MenuPositioner,
{
onClick: (ev) => ev.stopPropagation(),
className: "lng1771-pill-manager__agg-menu",
children: [
item.isAggregation && /* @__PURE__ */ jsx(AggMenu, { grid, column: item.column }),
item.isMeasure && /* @__PURE__ */ jsx(MeasureMenu, { grid, column: item.column })
]
}
) })
] }),
menu && /* @__PURE__ */ jsx(
"button",
{
className: "lng1771-pill-manager__menu-trigger",
style: { marginRight: -4 },
onClick: (e) => {
e.preventDefault();
e.stopPropagation();
grid.api.menuFrameOpen(menu, e.currentTarget);
},
children: /* @__PURE__ */ jsx(MoreDotsIcon, { width: 14, height: 14 })
}
)
]
}
),
canDrop && (rtl ? "left" : "right") === xHalf && /* @__PURE__ */ jsx("div", { className: "lng1771-pill-manager__drop-indicator-end" }),
canDrop && (rtl ? "right" : "left") === xHalf && /* @__PURE__ */ jsx("div", { className: "lng1771-pill-manager__drop-indicator-start" }),
canDropNative && /* @__PURE__ */ jsx("div", { className: "lng1771-pill-manager__drop-indicator-start" })
]
}
);
});
function DragHandle({
item,
setIsDragging
}) {
const { setDrag, isActive } = useDraggable({
id: item.label,
getTags: () => item.dragTags,
getData: () => item?.dragData,
onDragStart: () => {
document.body.classList.add("lng1771-drag-on");
},
onDragCancel: () => {
document.body.classList.remove("lng1771-drag-on");
},
onDragEnd: (p) => {
item.dragEnd?.(p);
document.body.classList.remove("lng1771-drag-on");
}
});
useEffect(() => {
setIsDragging(isActive);
}, [isActive, setIsDragging]);
return /* @__PURE__ */ jsx("button", { tabIndex: -1, className: "lng1771-pill-manager__pill-dragger", ref: setDrag, children: /* @__PURE__ */ jsx(DragIcon, { width: 16, height: 16 }) });
}
const PillManagerRowLabel = forwardRef(
function PillManagerRowLabel2(props, ref) {
return /* @__PURE__ */ jsx(
"div",
{
...props,
className: clsx("lng1771-pill-manager__row-label", props.className),
ref
}
);
}
);
const PillManagerColumnsLabel = forwardRef(function PillManagerColumnsLabel2({ labelText = "Columns", icon = /* @__PURE__ */ jsx(ManageColumnsIcon, {}), ...props }, ref) {
return /* @__PURE__ */ jsxs(
PillManagerRowLabel,
{
...props,
className: "lng1771-pill-manager__row-label-built-in",
ref,
children: [
icon,
/* @__PURE__ */ jsx("span", { children: labelText })
]
}
);
});
const PillManagerAggLabel = forwardRef(function PillManagerColumnsLabel3({ labelText = "Aggregations", icon = /* @__PURE__ */ jsx(MeasuresIcon, {}), ...props }, ref) {
return /* @__PURE__ */ jsxs(
PillManagerRowLabel,
{
...props,
className: "lng1771-pill-manager__row-label-built-in",
ref,
children: [
icon,
/* @__PURE__ */ jsx("span", { children: labelText })
]
}
);
});
const PillManagerMeasureLabel = forwardRef(function PillManagerColumnsLabel4({ labelText = "Measure", icon = /* @__PURE__ */ jsx(MeasuresIcon, {}), ...props }, ref) {
return /* @__PURE__ */ jsxs(
PillManagerRowLabel,
{
...props,
className: "lng1771-pill-manager__row-label-built-in",
ref,
children: [
icon,
/* @__PURE__ */ jsx("span", { children: labelText })
]
}
);
});
const PillManagerColumnPivotsLabel = forwardRef(function PillManagerColumnsLabel5({ labelText = "Column Pivots", icon = /* @__PURE__ */ jsx(ColumnPivotIcon, {}), ...props }, ref) {
return /* @__PURE__ */ jsxs(
PillManagerRowLabel,
{
...props,
className: "lng1771-pill-manager__row-label-built-in",
ref,
children: [
icon,
/* @__PURE__ */ jsx("span", { children: labelText })
]
}
);
});
const PillManagerRowGroupsLabel = forwardRef(function PillManagerColumnsLabel6({ labelText = "Row Groups", icon = /* @__PURE__ */ jsx(RowGroupIcon, {}), ...props }, ref) {
return /* @__PURE__ */ jsxs(
PillManagerRowLabel,
{
...props,
className: "lng1771-pill-manager__row-label-built-in",
ref,
children: [
icon,
/* @__PURE__ */ jsx("span", { children: labelText })
]
}
);
});
const PillManagerRows = forwardRef(
function PillManagerRows2({ onKeyDown: kd, ...props }, ref) {
const { activePill, activeRow, setActivePill, setActiveRow } = usePillControls();
const sx = useGrid();
const onKeydown = useCallback(
(ev) => {
kd?.(ev);
const targets = Array.from(ev.currentTarget.children).filter((c) => c.getAttribute("data-pill-row-key")).map((c) => [c.getAttribute("data-pill-row-key"), c]);
if (targets.length === 0) return;
const startKey = sx.state.rtl.peek() ? "ArrowRight" : "ArrowLeft";
const endKey = sx.state.rtl.peek() ? "ArrowLeft" : "ArrowRight";
const focusPrevActive = (el) => {
const pills = Array.from(el.querySelectorAll(`[data-pill-key]`)).map(
(c) => [c.getAttribute("data-pill-key"), c]
);
if (!pills.length) {
setActivePill(null);
return;
}
if (!activePill) {
setActivePill(pills.at(-1)[0]);
pills.at(-1)[1].scrollIntoView();
return;
}
const activeIndex = pills.findIndex((c) => c[0] === activePill);
if (activeIndex === -1 || activeIndex === 0) {
setActivePill(pills.at(-1)[0]);
pills.at(-1)[1].scrollIntoView();
return;
}
setActivePill(pills[activeIndex - 1][0]);
pills[activeIndex - 1][1].scrollIntoView();
};
const focusNextActive = (el) => {
const pills = Array.from(el.querySelectorAll(`[data-pill-key]`)).map(
(c) => [c.getAttribute("data-pill-key"), c]
);
if (!pills.length) {
setActivePill(null);
return;
}
if (!activePill) {
setActivePill(pills[0][0]);
pills[0][1].scrollIntoView();
return;
}
const activeIndex = pills.findIndex((c) => c[0] === activePill);
if (activeIndex === -1 || activeIndex === pills.length - 1) {
setActivePill(pills[0][0]);
pills[0][1].scrollIntoView();
return;
}
setActivePill(pills[activeIndex + 1][0]);
pills[activeIndex + 1][1].scrollIntoView();
};
if (ev.key === "ArrowUp") {
const currentActive = targets.findIndex((c) => c[0] === activeRow);
if (currentActive === -1 || currentActive === 0) {
setActiveRow(targets.at(-1)[0]);
focusNextActive(targets.at(-1)[1]);
} else {
setActiveRow(targets[currentActive - 1][0]);
focusNextActive(targets[currentActive - 1][1]);
}
} else if (ev.key === "ArrowDown") {
const currentActive = targets.findIndex((c) => c[0] === activeRow);
if (currentActive === -1 || currentActive === targets.length - 1) {
setActiveRow(targets[0][0]);
focusNextActive(targets[0][1]);
} else {
setActiveRow(targets[currentActive + 1][0]);
focusNextActive(targets[currentActive + 1][1]);
}
} else if (ev.key === endKey) {
const currentActive = targets.find((c) => c[0] === activeRow)?.[1];
if (!currentActive) return;
focusNextActive(currentActive);
ev.preventDefault();
return;
} else if (ev.key === startKey) {
const currentActive = targets.find((c) => c[0] === activeRow)?.[1];
if (!currentActive) return;
focusPrevActive(currentActive);
ev.preventDefault();
return;
} else if (ev.key === " ") {
if (!activePill) return;
const currentActive = targets.find((c) => c[0] === activeRow)?.[1];
if (!currentActive) return;
const pill = currentActive.querySelector(
`[data-pill-key="${activePill}"]`
);
if (!pill) return;
pill.click();
ev.preventDefault();
} else if (ev.key === "x") {
const currentActive = targets.find((c) => c[0] === activeRow)?.[1];
if (!currentActive) return;
const expander = currentActive.querySelector(
`[data-pill-expander-source]`
);
if (expander) expander.click();
} else if (ev.key === "m") {
if (!activePill) return;
const currentActive = targets.find((c) => c[0] === activeRow)?.[1];
if (!currentActive) return;
const pill = currentActive.querySelector(
`[data-pill-key="${activePill}"]`
);
if (!pill) return;
const menu = pill.querySelector('[data-pill-menu-trigger="true"]');
if (!menu) return;
menu.click();
}
},
[activePill, activeRow, kd, setActivePill, setActiveRow, sx.state.rtl]
);
return /* @__PURE__ */ jsx(
"div",
{
...props,
onKeyDown: onKeydown,
tabIndex: 0,
onBlur: () => {
setActiveRow(null);
setActivePill(null);
},
className: clsx("lng1771-pill-manager__rows", props.className),
"data-rows-root": "true",
"data-active-row": activePill,
"data-active-pill": activeRow,
ref
}
);
}
);
const PillManagerExpander = forwardRef(
function PillManagerExpander2({ children, ...props }, ref) {
const { expanded, setExpanded, pillSource } = usePillRow();
return /* @__PURE__ */ jsxs(
"button",
{
...props,
className: clsx("lng1771-pill-manager__expander"),
ref,
tabIndex: -1,
"data-pill-expander-source": pillSource,
onClick: () => {
setExpanded((prev) => !prev);
},
children: [
!children && (expanded ? /* @__PURE__ */ jsx(CollapseIcon, {}) : /* @__PURE__ */ jsx(ExpandIcon, {})),
children
]
}
);
}
);
const PillManagerSeparator = forwardRef(
function PillManagerSeparator2(props, ref) {
return /* @__PURE__ */ jsx(
"div",
{
...props,
className: clsx("lng1771-pill-manager__separator", props.className),
ref
}
);
}
);
function PillManagerDragPlaceholder(props) {
const store = useDragStore();
const s = useDrag(store, (s2) => s2.active);
if (!s) return null;
const c = props.children ?? DefaultPlaceholder;
return createPortal(
/* @__PURE__ */ jsx(
"div",
{
className: "lng1771-pill-manager__drag-placeholder",
style: { transform: `translate3d(${s.x}px, ${s.y}px, 0px)` },
children: c(s)
}
),
document.body
);
}
function DefaultPlaceholder(p) {
return /* @__PURE__ */ jsxs("div", { className: "lng1771-pill-manager__drag-placeholder--default", children: [
/* @__PURE__ */ jsx(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
width: "20px",
height: "20px",
fill: "currentcolor",
viewBox: "0 0 256 256",
children: /* @__PURE__ */ jsx("path", { d: "M90.34,61.66a8,8,0,0,1,0-11.32l32-32a8,8,0,0,1,11.32,0l32,32a8,8,0,0,1-11.32,11.32L136,43.31V96a8,8,0,0,1-16,0V43.31L101.66,61.66A8,8,0,0,1,90.34,61.66Zm64,132.68L136,212.69V160a8,8,0,0,0-16,0v52.69l-18.34-18.35a8,8,0,0,0-11.32,11.32l32,32a8,8,0,0,0,11.32,0l32-32a8,8,0,0,0-11.32-11.32Zm83.32-72-32-32a8,8,0,0,0-11.32,11.32L212.69,120H160a8,8,0,0,0,0,16h52.69l-18.35,18.34a8,8,0,0,0,11.32,11.32l32-32A8,8,0,0,0,237.66,122.34ZM43.31,136H96a8,8,0,0,0,0-16H43.31l18.35-18.34A8,8,0,0,0,50.34,90.34l-32,32a8,8,0,0,0,0,11.32l32,32a8,8,0,0,0,11.32-11.32Z" })
}
),
/* @__PURE__ */ jsx("span", { children: p.id })
] });
}
const context = createContext({});
const useComponents = () => useContext(context);
const Root = forwardRef(function Root2({ grid, children, aggMenuRenderer, measureMenuRenderer, menuTriggerIcon, ...props }, ref) {
const components = useMemo(() => {
return {
aggMenuRenderer: aggMenuRenderer ?? PillManagerAggMenu,
measureMenuRenderer: measureMenuRenderer ?? PillManagerMeasureMenu,
menuTriggerIcon: menuTriggerIcon ?? MoreDotsIcon
};
}, [aggMenuRenderer, measureMenuRenderer, menuTriggerIcon]);
return /* @__PURE__ */ jsx(context.Provider, { value: components, children: /* @__PURE__ */ jsx(DragProvider, { children: /* @__PURE__ */ jsx(GridProvider, { value: grid, children: /* @__PURE__ */ jsx(PillManagerControlsProvider, { children: /* @__PURE__ */ jsx(RootImpl, { ...props, ref, children }) }) }) }) });
});
const RootImpl = forwardRef(function RootImpl2({ children, ...props }, ref) {
return /* @__PURE__ */ jsx("div", { ...props, className: clsx("lng1771-pill-manager", props.className), ref, children });
});
const PillManager = {
Root,
Rows: PillManagerRows,
Row: PillManagerRow,
RowLabel: PillManagerRowLabel,
RowLabelColumns: PillManagerColumnsLabel,
RowLabelMeasures: PillManagerMeasureLabel,
RowLabelAggregations: PillManagerAggLabel,
RowLabelColumnPivots: PillManagerColumnPivotsLabel,
RowLabelRowGroups: PillManagerRowGroupsLabel,
Separator: PillManagerSeparator,
Expander: PillManagerExpander,
Pills: PillManagerPills,
Pill: PillManagerPill,
DragPlaceholder: PillManagerDragPlaceholder
};
export {
PillManager
};