@canvas-components/react-pivot-table 0.2.1 → 0.2.3

package/dist/index.js

@@ -368,7 +368,7 @@ function PivotFieldPanel(props) {
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs("div", { className: "react-pivot-field-panel__field-list", children: [
+              /* @__PURE__ */ jsxs("div", { className: "react-pivot-field-panel__field-list canvas-react-scrollbar", children: [
                 visibleFields.map((field) => {
                   const fieldKey = resolvePivotDimensionKey(field);
                   const area = findPivotFieldArea(props.layout, fieldKey);
@@ -495,7 +495,7 @@ function FieldArea(props) {
     /* @__PURE__ */ jsxs(
       "div",
       {
-        className: "react-pivot-field-panel__area",
+        className: "react-pivot-field-panel__area canvas-react-scrollbar",
         "data-dragging": props.dragging || void 0,
         onDragOver: (event) => event.preventDefault(),
         onDragEnter: props.onDragEnter,
@@ -1175,19 +1175,26 @@ function SettingsIcon() {
 // src/features/chart/pivot-chart-panel.css
 styleInject('.react-pivot-chart-panel {\n  display: flex;\n  width: 100%;\n  min-width: 0;\n  height: 100%;\n  min-height: 0;\n  flex-direction: column;\n  gap: 8px;\n  padding: 0;\n  overflow: auto;\n  background: #fff;\n  box-sizing: border-box;\n}\n.react-pivot-chart-card {\n  display: flex;\n  min-width: 0;\n  min-height: 240px;\n  flex: 0 0 260px;\n  flex-direction: column;\n  overflow: hidden;\n  border-radius: 0;\n  background: #fff;\n  box-sizing: border-box;\n}\n.react-pivot-chart-card:only-child {\n  min-height: 240px;\n  flex: 1 1 auto;\n}\n.react-pivot-chart-card__header {\n  display: flex;\n  height: 42px;\n  flex: 0 0 42px;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 10px 0 14px;\n  border-bottom: 1px solid #edf0f2;\n  color: #1f2329;\n  font-size: 13px;\n  box-sizing: border-box;\n}\n.react-pivot-chart-card__remove {\n  display: inline-flex;\n  width: 24px;\n  height: 24px;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  color: #646a73;\n  cursor: pointer;\n  font: 18px/24px "Segoe UI", sans-serif;\n}\n.react-pivot-chart-card__remove:hover {\n  background: #f2f3f5;\n  color: #d14343;\n}\n.react-pivot-chart-card__canvas {\n  min-width: 0;\n  min-height: 0;\n  flex: 1 1 auto;\n}\n.react-pivot-chart-card__empty {\n  display: grid;\n  min-height: 0;\n  flex: 1 1 auto;\n  place-items: center;\n  color: #8f959e;\n  font-size: 12px;\n}\n');
 function PivotChartPanel(props) {
-  return /* @__PURE__ */ jsx("section", { className: "react-pivot-chart-panel", "aria-label": "\u900F\u89C6\u56FE\u8868", children: props.charts.map((chart, index) => /* @__PURE__ */ jsx(
-    PivotChartCard,
+  return /* @__PURE__ */ jsx(
+    "section",
     {
-      chart,
-      index,
-      model: props.model,
-      rows: props.rows,
-      columns: props.columns,
-      indicators: props.indicators,
-      onRemove: props.onRemove
-    },
-    chart.id
-  )) });
+      className: "react-pivot-chart-panel canvas-react-scrollbar",
+      "aria-label": "\u900F\u89C6\u56FE\u8868",
+      children: props.charts.map((chart, index) => /* @__PURE__ */ jsx(
+        PivotChartCard,
+        {
+          chart,
+          index,
+          model: props.model,
+          rows: props.rows,
+          columns: props.columns,
+          indicators: props.indicators,
+          onRemove: props.onRemove
+        },
+        chart.id
+      ))
+    }
+  );
 }
 function PivotChartCard(props) {
   const option = useMemo(