@j2-health/design-system 0.4.0 → 0.5.0

package/README.md

@@ -47,11 +47,9 @@ The package ships a prebuilt bundle plus type declarations, and expects the
 consuming app to provide the peer dependencies listed in `package.json` (react,
 antd, formik, highcharts, tailwindcss, ...).
 
-> **Tailwind v3 only.** The preset is a Tailwind 3 config. Installing Tailwind
-> without a version pin gets you v4, which does not satisfy the
-> `tailwindcss@^3.4.14` peer range — npm reports it as a warning and installs it
-> anyway, so the mismatch is easy to miss. Pin it:
-> `npm i -D tailwindcss@^3.4.14`.
+Tailwind 3.4 and Tailwind 4 are both supported. The package keeps its JavaScript
+preset so existing Tailwind 3 consumers do not need to migrate with the design
+system. Tailwind 4 consumers load the same preset explicitly with `@config`.
 
 Wire it up in three places:
 
@@ -69,21 +67,43 @@ Wire it up in three places:
    import '@j2-health/design-system/style.css'
    ```
 
+   With Tailwind 3, import the legacy stylesheet as the first statement in your
+   root stylesheet:
+
    ```css
-   /* your root stylesheet — processed by YOUR Tailwind/PostCSS build.
-      This @import must be the FIRST statement in the file: it carries an
-      @import of its own (the Rubik webfont), and CSS drops an @import that
-      follows other rules. */
    @import '@j2-health/design-system/stylesheets/index.css';
    ```
 
-   **This file is your Tailwind entry point.** It supplies `@tailwind base`,
+   **This file is your Tailwind 3 entry point.** It supplies `@tailwind base`,
    `@tailwind components`, and `@tailwind utilities` along with the design
    tokens and base element styles, so remove those directives from your own
    stylesheet — keeping both emits every Tailwind layer twice.
 
+   With Tailwind 4, install the separate PostCSS plugin:
+
+   ```bash
+   npm install --save-dev @tailwindcss/postcss
+   ```
+
+   Replace `tailwindcss: {}` with `'@tailwindcss/postcss': {}` in your PostCSS
+   config, then use the Tailwind 4 stylesheet entry and load your JavaScript
+   config explicitly:
+
+   ```css
+   @import '@j2-health/design-system/stylesheets/tailwind.css';
+   @config '../../tailwind.config.ts';
+   ```
+
+   Adjust the `@config` path relative to the stylesheet containing it. Tailwind
+   4 no longer discovers JavaScript config files automatically. The Tailwind 4
+   entry scans the package's compiled components and emits each Tailwind layer
+   once.
+
 3. **Tailwind** — use the preset and scan the package's compiled output so
-   utility classes used inside components are generated by your build:
+   utility classes used inside components are generated by your build. This
+   config works with Tailwind 3 and can be loaded by Tailwind 4 through the
+   `@config` directive above. Tailwind 4 scans the package from its stylesheet;
+   the package glob remains necessary for Tailwind 3:
 
    ```ts
    // tailwind.config.ts

package/dist/index.cjs

@@ -22,6 +22,7 @@ const Input = require("./src/components/input/Input.cjs");
 const InputNumber = require("./src/components/inputnumber/InputNumber.cjs");
 const LegacyNavMenu = require("./src/components/legacyNavMenu/LegacyNavMenu.cjs");
 const ListPopover = require("./src/components/listpopover/ListPopover.cjs");
+const ManageColumnsPanel = require("./src/components/manageColumns/ManageColumnsPanel.cjs");
 const Menu = require("./src/components/menu/Menu.cjs");
 const Modal = require("./src/components/modal/Modal.cjs");
 const useFilterField = require("./src/components/filterform/useFilterField.cjs");
@@ -33,6 +34,7 @@ const Progress = require("./src/components/progress/Progress.cjs");
 const Radio = require("./src/components/radio/Radio.cjs");
 const Rate = require("./src/components/rate/Rate.cjs");
 const Select = require("./src/components/select/Select.cjs");
+const SelectAll = require("./src/components/manageColumns/SelectAll.cjs");
 const Skeleton = require("./src/components/skeleton/Skeleton.cjs");
 const Spinner = require("./src/components/spinner/Spinner.cjs");
 const Steps = require("./src/components/steps/Steps.cjs");
@@ -76,6 +78,7 @@ exports.Input = Input.Input;
 exports.InputNumber = InputNumber.InputNumber;
 exports.LegacyNavMenu = LegacyNavMenu.LegacyNavMenu;
 exports.ListPopover = ListPopover.ListPopover;
+exports.ManageColumnsPanel = ManageColumnsPanel.ManageColumnsPanel;
 exports.Menu = Menu.Menu;
 exports.Modal = Modal.Modal;
 exports.MultiValueTextOperatorOptions = useFilterField.MultiValueTextOperatorOptions;
@@ -90,6 +93,7 @@ exports.Radio = Radio.Radio;
 exports.RadioGroup = Radio.RadioGroup;
 exports.Rate = Rate.Rate;
 exports.Select = Select.Select;
+exports.SelectAll = SelectAll.SelectAll;
 exports.Skeleton = Skeleton.Skeleton;
 exports.Spinner = Spinner.Spinner;
 exports.Steps = Steps.Steps;

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.d.ts

@@ -17,6 +17,7 @@ export * from './src/components/form/index.js';
 export * from './src/components/input/index.js';
 export * from './src/components/inputnumber/index.js';
 export * from './src/components/listpopover/index.js';
+export * from './src/components/manageColumns/index.js';
 export * from './src/components/menu/index.js';
 export * from './src/components/message/index.js';
 export * from './src/components/modal/index.js';

package/dist/index.js

@@ -20,6 +20,7 @@ import { Input } from "./src/components/input/Input.js";
 import { InputNumber } from "./src/components/inputnumber/InputNumber.js";
 import { LegacyNavMenu } from "./src/components/legacyNavMenu/LegacyNavMenu.js";
 import { ListPopover } from "./src/components/listpopover/ListPopover.js";
+import { ManageColumnsPanel } from "./src/components/manageColumns/ManageColumnsPanel.js";
 import { Menu } from "./src/components/menu/Menu.js";
 import { Modal } from "./src/components/modal/Modal.js";
 import { MultiValueTextOperatorOptions, operatorOptionsFor } from "./src/components/filterform/useFilterField.js";
@@ -31,6 +32,7 @@ import { Progress } from "./src/components/progress/Progress.js";
 import { Radio, RadioGroup } from "./src/components/radio/Radio.js";
 import { Rate } from "./src/components/rate/Rate.js";
 import { Select } from "./src/components/select/Select.js";
+import { SelectAll } from "./src/components/manageColumns/SelectAll.js";
 import { Skeleton } from "./src/components/skeleton/Skeleton.js";
 import { Spinner } from "./src/components/spinner/Spinner.js";
 import { Steps } from "./src/components/steps/Steps.js";
@@ -72,6 +74,7 @@ export {
   InputNumber,
   LegacyNavMenu,
   ListPopover,
+  ManageColumnsPanel,
   Menu,
   Modal,
   MultiValueTextOperatorOptions,
@@ -84,6 +87,7 @@ export {
   RadioGroup,
   Rate,
   Select,
+  SelectAll,
   Skeleton,
   Spinner,
   Steps,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/src/components/barchart/BarChart.cjs

@@ -3,8 +3,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const antd = require("antd");
 const react = require("@highcharts/react");
-require("@highcharts/react/options/Accessibility.js");
-require("@highcharts/react/options/Exporting.js");
+require("@highcharts/react/modules/Accessibility.js");
+require("@highcharts/react/modules/Exporting.js");
 const chart_module = require("./chart.module.css.cjs");
 const server = require("react-dom/server");
 const BarChart = ({

package/dist/src/components/barchart/BarChart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BarChart.cjs","sources":["../../../../src/components/barchart/BarChart.tsx"],"sourcesContent":["import { theme } from 'antd'\nimport type * as Highcharts from 'highcharts'\nimport {\n  Chart as HighchartsReact,\n  type HighchartsReactRefObject,\n} from '@highcharts/react'\nimport '@highcharts/react/options/Accessibility.js'\nimport '@highcharts/react/options/Exporting.js'\nimport styles from './chart.module.css'\nimport { renderToString } from 'react-dom/server'\n\ntype Series = {\n  name?: string\n  data: Highcharts.PointOptionsObject[] | number[]\n  color?: string\n  hoverColor?: string\n}\n\ntype BarChartProps = {\n  categories: string[]\n  series: Series[]\n  min: number\n  max: number | undefined | null\n  tickInterval: number | undefined\n  tickFormat?: (value: number) => string\n  xAxisTitle?: string\n  yAxisTitle?: string\n  gridLineColor?: string\n  gridLineDashStyle?: Highcharts.DashStyleValue\n  xAxisLabelMaxLines?: number\n  tooltip: (\n    category: string | number | undefined,\n    value: number | null | undefined,\n    seriesName: string | undefined\n  ) => React.ReactNode\n  chartRef?: React.RefObject<HighchartsReactRefObject>\n  exporting?: Highcharts.ExportingOptions\n  maxBars?: number\n  barsWidth?: number\n  height?: number\n  width?: number\n}\n\nconst BarChart = ({\n  categories,\n  series,\n  min,\n  max,\n  tickInterval,\n  tickFormat,\n  xAxisTitle,\n  yAxisTitle,\n  gridLineColor,\n  gridLineDashStyle,\n  xAxisLabelMaxLines,\n  tooltip,\n  exporting,\n  chartRef,\n  height,\n  width,\n  maxBars = 50,\n  barsWidth = undefined,\n}: BarChartProps) => {\n  const limitedCategories = categories.slice(0, maxBars)\n  const limitedSeries = series.map((s) => ({\n    ...s,\n    data: s.data.slice(0, maxBars),\n  }))\n\n  const { token } = theme.useToken()\n\n  const baseFont: Highcharts.CSSObject = {\n    fontSize: `${token.fontSize}px`,\n    fontFamily: token.fontFamily,\n    color: token.colorText,\n  }\n\n  const options: Highcharts.Options = {\n    credits: {\n      enabled: false,\n    },\n    chart: {\n      type: 'column',\n      ...(height ? { height } : {}),\n      ...(width ? { width } : {}),\n    },\n    plotOptions: {\n      column: {\n        borderRadius: series[0].data.length > 5 ? '20%' : '15%',\n        ...(barsWidth !== undefined ? { pointWidth: barsWidth } : {}),\n      },\n    },\n    exporting: {\n      ...exporting,\n      enabled: false,\n      chartOptions: {\n        ...exporting?.chartOptions,\n        title: {\n          align: 'left',\n          text: exporting?.chartOptions?.title?.text,\n          style: {\n            fontSize: `${token.fontSize}px`,\n            fontFamily: 'sans-serif',\n            color: token.colorText,\n            ...exporting?.chartOptions?.title?.style,\n          },\n        },\n        series: limitedSeries.map((s) => ({\n          type: 'column',\n          color: s.color ? s.color : '#253761', // --j2-blue-9\n        })),\n        legend: exporting?.chartOptions?.legend || { enabled: false },\n      },\n    },\n    title: {\n      text: '',\n    },\n    xAxis: {\n      categories: limitedCategories,\n      title: xAxisTitle\n        ? {\n            text: xAxisTitle,\n            style: { ...baseFont, color: token.colorTextDescription },\n          }\n        : undefined,\n      labels: {\n        y: 30,\n        style: baseFont,\n        ...(xAxisLabelMaxLines\n          ? {\n              useHTML: true,\n              formatter: function (\n                this: Highcharts.AxisLabelsFormatterContextObject\n              ) {\n                return `<div style=\"overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: ${xAxisLabelMaxLines}; -webkit-box-orient: vertical; text-align: center;\">${this.value}</div>`\n              },\n            }\n          : {}),\n      },\n    },\n    yAxis: {\n      min: min,\n      max: max,\n      endOnTick: true,\n      gridLineDashStyle: gridLineDashStyle || 'Dot',\n      gridLineColor: gridLineColor || 'white',\n      title: yAxisTitle\n        ? {\n            text: yAxisTitle,\n            style: { ...baseFont, color: token.colorTextDescription },\n            x: -10,\n          }\n        : undefined,\n      tickInterval: tickInterval,\n      labels: {\n        formatter: tickFormat\n          ? ({ value }) => tickFormat(value as number)\n          : undefined,\n        style: baseFont,\n      },\n    },\n    legend: {\n      enabled: false,\n    },\n    series: limitedSeries.map((s) => ({\n      data: s.data,\n      name: s.name,\n      type: 'column',\n      color: s.color || 'var(--j2-blue-11)',\n      states: {\n        hover: {\n          color: s.hoverColor || token.colorPrimaryTextHover,\n        },\n      },\n    })),\n    tooltip: {\n      useHTML: true,\n      outside: true,\n      backgroundColor: 'transparent',\n      shadow: false,\n      padding: 0,\n      style: { zIndex: 9999 },\n      formatter: function (this) {\n        return renderToString(\n          <div className={styles.tooltip}>\n            {tooltip(this.key, this.y, this.series.name)}\n          </div>\n        )\n      },\n    },\n  }\n\n  return (\n    <HighchartsReact\n      ref={chartRef}\n      options={options}\n      containerProps={{ className: 'highcharts-light' }}\n    />\n  )\n}\n\nexport { BarChart }\n"],"names":["theme","renderToString","jsx","styles","HighchartsReact"],"mappings":"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"}
+{"version":3,"file":"BarChart.cjs","sources":["../../../../src/components/barchart/BarChart.tsx"],"sourcesContent":["import { theme } from 'antd'\nimport type * as Highcharts from 'highcharts'\nimport {\n  Chart as HighchartsReact,\n  type HighchartsReactRefObject,\n} from '@highcharts/react'\n// `modules/`, not `options/`. @highcharts/react 5 moved the module entry\n// points and left the old `options/` files in the package still importing\n// `highcharts/esm/…`, while the Chart component now loads\n// `highcharts/es-modules/masters/…`. Those are two different Highcharts\n// instances, so the old path composes the module onto one the chart never\n// uses: no error, no missing export, the module just stops taking effect.\nimport '@highcharts/react/modules/Accessibility.js'\nimport '@highcharts/react/modules/Exporting.js'\nimport styles from './chart.module.css'\nimport { renderToString } from 'react-dom/server'\n\ntype Series = {\n  name?: string\n  data: Highcharts.PointOptionsObject[] | number[]\n  color?: string\n  hoverColor?: string\n}\n\ntype BarChartProps = {\n  categories: string[]\n  series: Series[]\n  min: number\n  max: number | undefined | null\n  tickInterval: number | undefined\n  tickFormat?: (value: number) => string\n  xAxisTitle?: string\n  yAxisTitle?: string\n  gridLineColor?: string\n  gridLineDashStyle?: Highcharts.DashStyleValue\n  xAxisLabelMaxLines?: number\n  tooltip: (\n    category: string | number | undefined,\n    value: number | null | undefined,\n    seriesName: string | undefined\n  ) => React.ReactNode\n  chartRef?: React.RefObject<HighchartsReactRefObject>\n  exporting?: Highcharts.ExportingOptions\n  maxBars?: number\n  barsWidth?: number\n  height?: number\n  width?: number\n}\n\nconst BarChart = ({\n  categories,\n  series,\n  min,\n  max,\n  tickInterval,\n  tickFormat,\n  xAxisTitle,\n  yAxisTitle,\n  gridLineColor,\n  gridLineDashStyle,\n  xAxisLabelMaxLines,\n  tooltip,\n  exporting,\n  chartRef,\n  height,\n  width,\n  maxBars = 50,\n  barsWidth = undefined,\n}: BarChartProps) => {\n  const limitedCategories = categories.slice(0, maxBars)\n  const limitedSeries = series.map((s) => ({\n    ...s,\n    data: s.data.slice(0, maxBars),\n  }))\n\n  const { token } = theme.useToken()\n\n  const baseFont: Highcharts.CSSObject = {\n    fontSize: `${token.fontSize}px`,\n    fontFamily: token.fontFamily,\n    color: token.colorText,\n  }\n\n  const options: Highcharts.Options = {\n    credits: {\n      enabled: false,\n    },\n    chart: {\n      type: 'column',\n      ...(height ? { height } : {}),\n      ...(width ? { width } : {}),\n    },\n    plotOptions: {\n      column: {\n        borderRadius: series[0].data.length > 5 ? '20%' : '15%',\n        ...(barsWidth !== undefined ? { pointWidth: barsWidth } : {}),\n      },\n    },\n    exporting: {\n      ...exporting,\n      enabled: false,\n      chartOptions: {\n        ...exporting?.chartOptions,\n        title: {\n          align: 'left',\n          text: exporting?.chartOptions?.title?.text,\n          style: {\n            fontSize: `${token.fontSize}px`,\n            fontFamily: 'sans-serif',\n            color: token.colorText,\n            ...exporting?.chartOptions?.title?.style,\n          },\n        },\n        series: limitedSeries.map((s) => ({\n          type: 'column',\n          color: s.color ? s.color : '#253761', // --j2-blue-9\n        })),\n        legend: exporting?.chartOptions?.legend || { enabled: false },\n      },\n    },\n    title: {\n      text: '',\n    },\n    xAxis: {\n      categories: limitedCategories,\n      title: xAxisTitle\n        ? {\n            text: xAxisTitle,\n            style: { ...baseFont, color: token.colorTextDescription },\n          }\n        : undefined,\n      labels: {\n        y: 30,\n        style: baseFont,\n        ...(xAxisLabelMaxLines\n          ? {\n              useHTML: true,\n              formatter: function (\n                this: Highcharts.AxisLabelsFormatterContextObject\n              ) {\n                return `<div style=\"overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: ${xAxisLabelMaxLines}; -webkit-box-orient: vertical; text-align: center;\">${this.value}</div>`\n              },\n            }\n          : {}),\n      },\n    },\n    yAxis: {\n      min: min,\n      max: max,\n      endOnTick: true,\n      gridLineDashStyle: gridLineDashStyle || 'Dot',\n      gridLineColor: gridLineColor || 'white',\n      title: yAxisTitle\n        ? {\n            text: yAxisTitle,\n            style: { ...baseFont, color: token.colorTextDescription },\n            x: -10,\n          }\n        : undefined,\n      tickInterval: tickInterval,\n      labels: {\n        formatter: tickFormat\n          ? ({ value }) => tickFormat(value as number)\n          : undefined,\n        style: baseFont,\n      },\n    },\n    legend: {\n      enabled: false,\n    },\n    series: limitedSeries.map((s) => ({\n      data: s.data,\n      name: s.name,\n      type: 'column',\n      color: s.color || 'var(--j2-blue-11)',\n      states: {\n        hover: {\n          color: s.hoverColor || token.colorPrimaryTextHover,\n        },\n      },\n    })),\n    tooltip: {\n      useHTML: true,\n      outside: true,\n      backgroundColor: 'transparent',\n      shadow: false,\n      padding: 0,\n      style: { zIndex: 9999 },\n      formatter: function (this) {\n        return renderToString(\n          <div className={styles.tooltip}>\n            {tooltip(this.key, this.y, this.series.name)}\n          </div>\n        )\n      },\n    },\n  }\n\n  return (\n    <HighchartsReact\n      ref={chartRef}\n      options={options}\n      containerProps={{ className: 'highcharts-light' }}\n    />\n  )\n}\n\nexport { BarChart }\n"],"names":["theme","renderToString","jsx","styles","HighchartsReact"],"mappings":"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"}

package/dist/src/components/barchart/BarChart.js

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import { theme } from "antd";
 import { Chart } from "@highcharts/react";
-import "@highcharts/react/options/Accessibility.js";
-import "@highcharts/react/options/Exporting.js";
+import "@highcharts/react/modules/Accessibility.js";
+import "@highcharts/react/modules/Exporting.js";
 import styles from "./chart.module.css.js";
 import { renderToString } from "react-dom/server";
 const BarChart = ({

package/dist/src/components/barchart/BarChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"BarChart.js","sources":["../../../../src/components/barchart/BarChart.tsx"],"sourcesContent":["import { theme } from 'antd'\nimport type * as Highcharts from 'highcharts'\nimport {\n  Chart as HighchartsReact,\n  type HighchartsReactRefObject,\n} from '@highcharts/react'\nimport '@highcharts/react/options/Accessibility.js'\nimport '@highcharts/react/options/Exporting.js'\nimport styles from './chart.module.css'\nimport { renderToString } from 'react-dom/server'\n\ntype Series = {\n  name?: string\n  data: Highcharts.PointOptionsObject[] | number[]\n  color?: string\n  hoverColor?: string\n}\n\ntype BarChartProps = {\n  categories: string[]\n  series: Series[]\n  min: number\n  max: number | undefined | null\n  tickInterval: number | undefined\n  tickFormat?: (value: number) => string\n  xAxisTitle?: string\n  yAxisTitle?: string\n  gridLineColor?: string\n  gridLineDashStyle?: Highcharts.DashStyleValue\n  xAxisLabelMaxLines?: number\n  tooltip: (\n    category: string | number | undefined,\n    value: number | null | undefined,\n    seriesName: string | undefined\n  ) => React.ReactNode\n  chartRef?: React.RefObject<HighchartsReactRefObject>\n  exporting?: Highcharts.ExportingOptions\n  maxBars?: number\n  barsWidth?: number\n  height?: number\n  width?: number\n}\n\nconst BarChart = ({\n  categories,\n  series,\n  min,\n  max,\n  tickInterval,\n  tickFormat,\n  xAxisTitle,\n  yAxisTitle,\n  gridLineColor,\n  gridLineDashStyle,\n  xAxisLabelMaxLines,\n  tooltip,\n  exporting,\n  chartRef,\n  height,\n  width,\n  maxBars = 50,\n  barsWidth = undefined,\n}: BarChartProps) => {\n  const limitedCategories = categories.slice(0, maxBars)\n  const limitedSeries = series.map((s) => ({\n    ...s,\n    data: s.data.slice(0, maxBars),\n  }))\n\n  const { token } = theme.useToken()\n\n  const baseFont: Highcharts.CSSObject = {\n    fontSize: `${token.fontSize}px`,\n    fontFamily: token.fontFamily,\n    color: token.colorText,\n  }\n\n  const options: Highcharts.Options = {\n    credits: {\n      enabled: false,\n    },\n    chart: {\n      type: 'column',\n      ...(height ? { height } : {}),\n      ...(width ? { width } : {}),\n    },\n    plotOptions: {\n      column: {\n        borderRadius: series[0].data.length > 5 ? '20%' : '15%',\n        ...(barsWidth !== undefined ? { pointWidth: barsWidth } : {}),\n      },\n    },\n    exporting: {\n      ...exporting,\n      enabled: false,\n      chartOptions: {\n        ...exporting?.chartOptions,\n        title: {\n          align: 'left',\n          text: exporting?.chartOptions?.title?.text,\n          style: {\n            fontSize: `${token.fontSize}px`,\n            fontFamily: 'sans-serif',\n            color: token.colorText,\n            ...exporting?.chartOptions?.title?.style,\n          },\n        },\n        series: limitedSeries.map((s) => ({\n          type: 'column',\n          color: s.color ? s.color : '#253761', // --j2-blue-9\n        })),\n        legend: exporting?.chartOptions?.legend || { enabled: false },\n      },\n    },\n    title: {\n      text: '',\n    },\n    xAxis: {\n      categories: limitedCategories,\n      title: xAxisTitle\n        ? {\n            text: xAxisTitle,\n            style: { ...baseFont, color: token.colorTextDescription },\n          }\n        : undefined,\n      labels: {\n        y: 30,\n        style: baseFont,\n        ...(xAxisLabelMaxLines\n          ? {\n              useHTML: true,\n              formatter: function (\n                this: Highcharts.AxisLabelsFormatterContextObject\n              ) {\n                return `<div style=\"overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: ${xAxisLabelMaxLines}; -webkit-box-orient: vertical; text-align: center;\">${this.value}</div>`\n              },\n            }\n          : {}),\n      },\n    },\n    yAxis: {\n      min: min,\n      max: max,\n      endOnTick: true,\n      gridLineDashStyle: gridLineDashStyle || 'Dot',\n      gridLineColor: gridLineColor || 'white',\n      title: yAxisTitle\n        ? {\n            text: yAxisTitle,\n            style: { ...baseFont, color: token.colorTextDescription },\n            x: -10,\n          }\n        : undefined,\n      tickInterval: tickInterval,\n      labels: {\n        formatter: tickFormat\n          ? ({ value }) => tickFormat(value as number)\n          : undefined,\n        style: baseFont,\n      },\n    },\n    legend: {\n      enabled: false,\n    },\n    series: limitedSeries.map((s) => ({\n      data: s.data,\n      name: s.name,\n      type: 'column',\n      color: s.color || 'var(--j2-blue-11)',\n      states: {\n        hover: {\n          color: s.hoverColor || token.colorPrimaryTextHover,\n        },\n      },\n    })),\n    tooltip: {\n      useHTML: true,\n      outside: true,\n      backgroundColor: 'transparent',\n      shadow: false,\n      padding: 0,\n      style: { zIndex: 9999 },\n      formatter: function (this) {\n        return renderToString(\n          <div className={styles.tooltip}>\n            {tooltip(this.key, this.y, this.series.name)}\n          </div>\n        )\n      },\n    },\n  }\n\n  return (\n    <HighchartsReact\n      ref={chartRef}\n      options={options}\n      containerProps={{ className: 'highcharts-light' }}\n    />\n  )\n}\n\nexport { BarChart }\n"],"names":["HighchartsReact"],"mappings":"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"}
+{"version":3,"file":"BarChart.js","sources":["../../../../src/components/barchart/BarChart.tsx"],"sourcesContent":["import { theme } from 'antd'\nimport type * as Highcharts from 'highcharts'\nimport {\n  Chart as HighchartsReact,\n  type HighchartsReactRefObject,\n} from '@highcharts/react'\n// `modules/`, not `options/`. @highcharts/react 5 moved the module entry\n// points and left the old `options/` files in the package still importing\n// `highcharts/esm/…`, while the Chart component now loads\n// `highcharts/es-modules/masters/…`. Those are two different Highcharts\n// instances, so the old path composes the module onto one the chart never\n// uses: no error, no missing export, the module just stops taking effect.\nimport '@highcharts/react/modules/Accessibility.js'\nimport '@highcharts/react/modules/Exporting.js'\nimport styles from './chart.module.css'\nimport { renderToString } from 'react-dom/server'\n\ntype Series = {\n  name?: string\n  data: Highcharts.PointOptionsObject[] | number[]\n  color?: string\n  hoverColor?: string\n}\n\ntype BarChartProps = {\n  categories: string[]\n  series: Series[]\n  min: number\n  max: number | undefined | null\n  tickInterval: number | undefined\n  tickFormat?: (value: number) => string\n  xAxisTitle?: string\n  yAxisTitle?: string\n  gridLineColor?: string\n  gridLineDashStyle?: Highcharts.DashStyleValue\n  xAxisLabelMaxLines?: number\n  tooltip: (\n    category: string | number | undefined,\n    value: number | null | undefined,\n    seriesName: string | undefined\n  ) => React.ReactNode\n  chartRef?: React.RefObject<HighchartsReactRefObject>\n  exporting?: Highcharts.ExportingOptions\n  maxBars?: number\n  barsWidth?: number\n  height?: number\n  width?: number\n}\n\nconst BarChart = ({\n  categories,\n  series,\n  min,\n  max,\n  tickInterval,\n  tickFormat,\n  xAxisTitle,\n  yAxisTitle,\n  gridLineColor,\n  gridLineDashStyle,\n  xAxisLabelMaxLines,\n  tooltip,\n  exporting,\n  chartRef,\n  height,\n  width,\n  maxBars = 50,\n  barsWidth = undefined,\n}: BarChartProps) => {\n  const limitedCategories = categories.slice(0, maxBars)\n  const limitedSeries = series.map((s) => ({\n    ...s,\n    data: s.data.slice(0, maxBars),\n  }))\n\n  const { token } = theme.useToken()\n\n  const baseFont: Highcharts.CSSObject = {\n    fontSize: `${token.fontSize}px`,\n    fontFamily: token.fontFamily,\n    color: token.colorText,\n  }\n\n  const options: Highcharts.Options = {\n    credits: {\n      enabled: false,\n    },\n    chart: {\n      type: 'column',\n      ...(height ? { height } : {}),\n      ...(width ? { width } : {}),\n    },\n    plotOptions: {\n      column: {\n        borderRadius: series[0].data.length > 5 ? '20%' : '15%',\n        ...(barsWidth !== undefined ? { pointWidth: barsWidth } : {}),\n      },\n    },\n    exporting: {\n      ...exporting,\n      enabled: false,\n      chartOptions: {\n        ...exporting?.chartOptions,\n        title: {\n          align: 'left',\n          text: exporting?.chartOptions?.title?.text,\n          style: {\n            fontSize: `${token.fontSize}px`,\n            fontFamily: 'sans-serif',\n            color: token.colorText,\n            ...exporting?.chartOptions?.title?.style,\n          },\n        },\n        series: limitedSeries.map((s) => ({\n          type: 'column',\n          color: s.color ? s.color : '#253761', // --j2-blue-9\n        })),\n        legend: exporting?.chartOptions?.legend || { enabled: false },\n      },\n    },\n    title: {\n      text: '',\n    },\n    xAxis: {\n      categories: limitedCategories,\n      title: xAxisTitle\n        ? {\n            text: xAxisTitle,\n            style: { ...baseFont, color: token.colorTextDescription },\n          }\n        : undefined,\n      labels: {\n        y: 30,\n        style: baseFont,\n        ...(xAxisLabelMaxLines\n          ? {\n              useHTML: true,\n              formatter: function (\n                this: Highcharts.AxisLabelsFormatterContextObject\n              ) {\n                return `<div style=\"overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: ${xAxisLabelMaxLines}; -webkit-box-orient: vertical; text-align: center;\">${this.value}</div>`\n              },\n            }\n          : {}),\n      },\n    },\n    yAxis: {\n      min: min,\n      max: max,\n      endOnTick: true,\n      gridLineDashStyle: gridLineDashStyle || 'Dot',\n      gridLineColor: gridLineColor || 'white',\n      title: yAxisTitle\n        ? {\n            text: yAxisTitle,\n            style: { ...baseFont, color: token.colorTextDescription },\n            x: -10,\n          }\n        : undefined,\n      tickInterval: tickInterval,\n      labels: {\n        formatter: tickFormat\n          ? ({ value }) => tickFormat(value as number)\n          : undefined,\n        style: baseFont,\n      },\n    },\n    legend: {\n      enabled: false,\n    },\n    series: limitedSeries.map((s) => ({\n      data: s.data,\n      name: s.name,\n      type: 'column',\n      color: s.color || 'var(--j2-blue-11)',\n      states: {\n        hover: {\n          color: s.hoverColor || token.colorPrimaryTextHover,\n        },\n      },\n    })),\n    tooltip: {\n      useHTML: true,\n      outside: true,\n      backgroundColor: 'transparent',\n      shadow: false,\n      padding: 0,\n      style: { zIndex: 9999 },\n      formatter: function (this) {\n        return renderToString(\n          <div className={styles.tooltip}>\n            {tooltip(this.key, this.y, this.series.name)}\n          </div>\n        )\n      },\n    },\n  }\n\n  return (\n    <HighchartsReact\n      ref={chartRef}\n      options={options}\n      containerProps={{ className: 'highcharts-light' }}\n    />\n  )\n}\n\nexport { BarChart }\n"],"names":["HighchartsReact"],"mappings":"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"}

package/dist/src/components/input/AntdInput.d.ts

@@ -44,11 +44,6 @@ export declare const AntdInput: import('react').ForwardRefExoticComponent<{
         input?: React.CSSProperties;
         count?: React.CSSProperties;
     } | undefined>;
-    prefix?: import('react').ReactNode;
-    height?: number | string | undefined | undefined;
-    width?: number | string | undefined | undefined;
-    translate?: "yes" | "no" | undefined | undefined;
-    content?: string | undefined | undefined;
     children?: import('react').ReactNode;
     form?: string | undefined | undefined;
     slot?: string | undefined | undefined;
@@ -58,6 +53,7 @@ export declare const AntdInput: import('react').ForwardRefExoticComponent<{
     suppressHydrationWarning?: boolean | undefined | undefined;
     className?: string | undefined | undefined;
     color?: string | undefined | undefined;
+    height?: number | string | undefined | undefined;
     id?: string | undefined | undefined;
     lang?: string | undefined | undefined;
     max?: number | string | undefined | undefined;
@@ -66,6 +62,7 @@ export declare const AntdInput: import('react').ForwardRefExoticComponent<{
     nonce?: string | undefined | undefined;
     part?: string | undefined | undefined;
     type?: import('@rc-component/input/lib/utils/types').LiteralUnion<"button" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "file" | "hidden" | "image" | "month" | "number" | "password" | "radio" | "range" | "reset" | "search" | "submit" | "tel" | "text" | "time" | "url" | "week", string> | undefined;
+    width?: number | string | undefined | undefined;
     role?: import('react').AriaRole | undefined;
     tabIndex?: number | undefined | undefined;
     "aria-activedescendant"?: string | undefined | undefined;
@@ -298,7 +295,9 @@ export declare const AntdInput: import('react').ForwardRefExoticComponent<{
     step?: number | string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     hidden?: boolean | undefined | undefined;
+    content?: string | undefined | undefined;
     multiple?: boolean | undefined | undefined;
+    translate?: "yes" | "no" | undefined | undefined;
     defaultChecked?: boolean | undefined | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
     suppressContentEditableWarning?: boolean | undefined | undefined;
@@ -314,6 +313,7 @@ export declare const AntdInput: import('react').ForwardRefExoticComponent<{
     about?: string | undefined | undefined;
     datatype?: string | undefined | undefined;
     inlist?: any;
+    prefix?: import('react').ReactNode;
     property?: string | undefined | undefined;
     rel?: string | undefined | undefined;
     resource?: string | undefined | undefined;

package/dist/src/components/input/AntdSearchInput.d.ts

@@ -56,11 +56,6 @@ export declare const AntdSearchInput: import('react').ForwardRefExoticComponent<
     addonAfter?: import('react').ReactNode;
     bordered?: boolean | undefined;
     variant?: import('antd/es/config-provider').Variant | undefined;
-    prefix?: import('react').ReactNode;
-    height?: number | string | undefined | undefined;
-    width?: number | string | undefined | undefined;
-    translate?: "yes" | "no" | undefined | undefined;
-    content?: string | undefined | undefined;
     children?: import('react').ReactNode;
     form?: string | undefined | undefined;
     slot?: string | undefined | undefined;
@@ -70,6 +65,7 @@ export declare const AntdSearchInput: import('react').ForwardRefExoticComponent<
     suppressHydrationWarning?: boolean | undefined | undefined;
     className?: string | undefined | undefined;
     color?: string | undefined | undefined;
+    height?: number | string | undefined | undefined;
     id?: string | undefined | undefined;
     lang?: string | undefined | undefined;
     max?: number | string | undefined | undefined;
@@ -78,6 +74,7 @@ export declare const AntdSearchInput: import('react').ForwardRefExoticComponent<
     nonce?: string | undefined | undefined;
     part?: string | undefined | undefined;
     type?: import('@rc-component/input/lib/utils/types').LiteralUnion<"button" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "file" | "hidden" | "image" | "month" | "number" | "password" | "radio" | "range" | "reset" | "search" | "submit" | "tel" | "text" | "time" | "url" | "week", string> | undefined;
+    width?: number | string | undefined | undefined;
     role?: import('react').AriaRole | undefined;
     tabIndex?: number | undefined | undefined;
     "aria-activedescendant"?: string | undefined | undefined;
@@ -310,7 +307,9 @@ export declare const AntdSearchInput: import('react').ForwardRefExoticComponent<
     step?: number | string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     hidden?: boolean | undefined | undefined;
+    content?: string | undefined | undefined;
     multiple?: boolean | undefined | undefined;
+    translate?: "yes" | "no" | undefined | undefined;
     defaultChecked?: boolean | undefined | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
     suppressContentEditableWarning?: boolean | undefined | undefined;
@@ -326,6 +325,7 @@ export declare const AntdSearchInput: import('react').ForwardRefExoticComponent<
     about?: string | undefined | undefined;
     datatype?: string | undefined | undefined;
     inlist?: any;
+    prefix?: import('react').ReactNode;
     property?: string | undefined | undefined;
     rel?: string | undefined | undefined;
     resource?: string | undefined | undefined;

package/dist/src/components/manageColumns/ManageColumnsItem.cjs

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const cx = require("classnames");
+const react = require("@phosphor-icons/react");
+const sortable = require("@dnd-kit/sortable");
+const utilities = require("@dnd-kit/utilities");
+const Checkbox = require("../checkbox/Checkbox.cjs");
+const ManageColumnsItem = React.memo(function ManageColumnsItem2({
+  id,
+  label,
+  visible,
+  pinned,
+  onToggle
+}) {
+  const handleToggle = React.useCallback(() => onToggle(id), [onToggle, id]);
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = sortable.useSortable({
+    id,
+    // Boolean shorthand only disables dragging, not dropping onto a pinned row.
+    disabled: { draggable: pinned, droppable: pinned }
+  });
+  const style = {
+    transform: utilities.CSS.Transform.toString(transform),
+    transition
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: setNodeRef,
+      style,
+      className: cx(
+        "flex items-center justify-between gap-2 py-1.5 pl-2 -ml-2 bg-white rounded",
+        "has-[button:hover]:bg-j2-gray-2",
+        isDragging && "shadow-md z-10 relative",
+        pinned && "opacity-50"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Checkbox.Checkbox,
+          {
+            checked: visible,
+            disabled: pinned,
+            onChange: pinned ? void 0 : handleToggle,
+            className: cx(
+              // No gap: antd's own .ant-checkbox-label already pads before children.
+              "flex items-center flex-1 min-w-0",
+              pinned ? "cursor-not-allowed" : "cursor-pointer"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-j2-lg text-j2-text", title: label, children: label })
+          }
+        ),
+        !pinned && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            ...attributes,
+            ...listeners,
+            "aria-label": `Drag to reorder ${label}`,
+            className: "p-1 text-j2-text cursor-grab active:cursor-grabbing",
+            children: /* @__PURE__ */ jsxRuntime.jsx(react.DotsSixIcon, { size: 16, weight: "bold", className: "rotate-90" })
+          }
+        )
+      ]
+    }
+  );
+});
+exports.ManageColumnsItem = ManageColumnsItem;
+//# sourceMappingURL=ManageColumnsItem.cjs.map

package/dist/src/components/manageColumns/ManageColumnsItem.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ManageColumnsItem.cjs","sources":["../../../../src/components/manageColumns/ManageColumnsItem.tsx"],"sourcesContent":["import { memo, useCallback } from 'react'\nimport cx from 'classnames'\nimport { DotsSixIcon } from '@phosphor-icons/react'\nimport { useSortable } from '@dnd-kit/sortable'\nimport { CSS } from '@dnd-kit/utilities'\n\nimport { Checkbox } from '../checkbox'\n\nexport const ManageColumnsItem = memo(function ManageColumnsItem({\n  id,\n  label,\n  visible,\n  pinned,\n  onToggle,\n}: {\n  id: string\n  label: string\n  visible: boolean\n  pinned: boolean\n  onToggle: (id: string) => void\n}) {\n  const handleToggle = useCallback(() => onToggle(id), [onToggle, id])\n\n  const {\n    attributes,\n    listeners,\n    setNodeRef,\n    transform,\n    transition,\n    isDragging,\n  } = useSortable({\n    id,\n    // Boolean shorthand only disables dragging, not dropping onto a pinned row.\n    disabled: { draggable: pinned, droppable: pinned },\n  })\n\n  const style = {\n    transform: CSS.Transform.toString(transform),\n    transition,\n  }\n\n  return (\n    <div\n      ref={setNodeRef}\n      style={style}\n      className={cx(\n        'flex items-center justify-between gap-2 py-1.5 pl-2 -ml-2 bg-white rounded',\n        'has-[button:hover]:bg-j2-gray-2',\n        isDragging && 'shadow-md z-10 relative',\n        pinned && 'opacity-50'\n      )}\n    >\n      <Checkbox\n        checked={visible}\n        disabled={pinned}\n        onChange={pinned ? undefined : handleToggle}\n        className={cx(\n          // No gap: antd's own .ant-checkbox-label already pads before children.\n          'flex items-center flex-1 min-w-0',\n          pinned ? 'cursor-not-allowed' : 'cursor-pointer'\n        )}\n      >\n        <span className=\"truncate text-j2-lg text-j2-text\" title={label}>\n          {label}\n        </span>\n      </Checkbox>\n      {!pinned && (\n        <button\n          type=\"button\"\n          {...attributes}\n          {...listeners}\n          aria-label={`Drag to reorder ${label}`}\n          className=\"p-1 text-j2-text cursor-grab active:cursor-grabbing\"\n        >\n          <DotsSixIcon size={16} weight=\"bold\" className=\"rotate-90\" />\n        </button>\n      )}\n    </div>\n  )\n})\n"],"names":["memo","ManageColumnsItem","useCallback","useSortable","CSS","jsxs","jsx","Checkbox","DotsSixIcon"],"mappings":";;;;;;;;;AAQO,MAAM,oBAAoBA,MAAAA,KAAK,SAASC,mBAAkB;AAAA,EAC/D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMG;AACD,QAAM,eAAeC,MAAAA,YAAY,MAAM,SAAS,EAAE,GAAG,CAAC,UAAU,EAAE,CAAC;AAEnE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACEC,qBAAY;AAAA,IACd;AAAA;AAAA,IAEA,UAAU,EAAE,WAAW,QAAQ,WAAW,OAAA;AAAA,EAAO,CAClD;AAED,QAAM,QAAQ;AAAA,IACZ,WAAWC,UAAAA,IAAI,UAAU,SAAS,SAAS;AAAA,IAC3C;AAAA,EAAA;AAGF,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA,cAAc;AAAA,QACd,UAAU;AAAA,MAAA;AAAA,MAGZ,UAAA;AAAA,QAAAC,2BAAAA;AAAAA,UAACC,SAAAA;AAAAA,UAAA;AAAA,YACC,SAAS;AAAA,YACT,UAAU;AAAA,YACV,UAAU,SAAS,SAAY;AAAA,YAC/B,WAAW;AAAA;AAAA,cAET;AAAA,cACA,SAAS,uBAAuB;AAAA,YAAA;AAAA,YAGlC,yCAAC,QAAA,EAAK,WAAU,oCAAmC,OAAO,OACvD,UAAA,MAAA,CACH;AAAA,UAAA;AAAA,QAAA;AAAA,QAED,CAAC,UACAD,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACJ,GAAG;AAAA,YACH,GAAG;AAAA,YACJ,cAAY,mBAAmB,KAAK;AAAA,YACpC,WAAU;AAAA,YAEV,yCAACE,MAAAA,aAAA,EAAY,MAAM,IAAI,QAAO,QAAO,WAAU,YAAA,CAAY;AAAA,UAAA;AAAA,QAAA;AAAA,MAC7D;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;;"}

package/dist/src/components/manageColumns/ManageColumnsItem.d.ts

@@ -0,0 +1,7 @@
+export declare const ManageColumnsItem: import('react').NamedExoticComponent<{
+    id: string;
+    label: string;
+    visible: boolean;
+    pinned: boolean;
+    onToggle: (id: string) => void;
+}>;

package/dist/src/components/manageColumns/ManageColumnsItem.js

@@ -0,0 +1,76 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { memo, useCallback } from "react";
+import cx from "classnames";
+import { DotsSixIcon } from "@phosphor-icons/react";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { Checkbox } from "../checkbox/Checkbox.js";
+const ManageColumnsItem = memo(function ManageColumnsItem2({
+  id,
+  label,
+  visible,
+  pinned,
+  onToggle
+}) {
+  const handleToggle = useCallback(() => onToggle(id), [onToggle, id]);
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable({
+    id,
+    // Boolean shorthand only disables dragging, not dropping onto a pinned row.
+    disabled: { draggable: pinned, droppable: pinned }
+  });
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: setNodeRef,
+      style,
+      className: cx(
+        "flex items-center justify-between gap-2 py-1.5 pl-2 -ml-2 bg-white rounded",
+        "has-[button:hover]:bg-j2-gray-2",
+        isDragging && "shadow-md z-10 relative",
+        pinned && "opacity-50"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            checked: visible,
+            disabled: pinned,
+            onChange: pinned ? void 0 : handleToggle,
+            className: cx(
+              // No gap: antd's own .ant-checkbox-label already pads before children.
+              "flex items-center flex-1 min-w-0",
+              pinned ? "cursor-not-allowed" : "cursor-pointer"
+            ),
+            children: /* @__PURE__ */ jsx("span", { className: "truncate text-j2-lg text-j2-text", title: label, children: label })
+          }
+        ),
+        !pinned && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            ...attributes,
+            ...listeners,
+            "aria-label": `Drag to reorder ${label}`,
+            className: "p-1 text-j2-text cursor-grab active:cursor-grabbing",
+            children: /* @__PURE__ */ jsx(DotsSixIcon, { size: 16, weight: "bold", className: "rotate-90" })
+          }
+        )
+      ]
+    }
+  );
+});
+export {
+  ManageColumnsItem
+};
+//# sourceMappingURL=ManageColumnsItem.js.map

package/dist/src/components/manageColumns/ManageColumnsItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ManageColumnsItem.js","sources":["../../../../src/components/manageColumns/ManageColumnsItem.tsx"],"sourcesContent":["import { memo, useCallback } from 'react'\nimport cx from 'classnames'\nimport { DotsSixIcon } from '@phosphor-icons/react'\nimport { useSortable } from '@dnd-kit/sortable'\nimport { CSS } from '@dnd-kit/utilities'\n\nimport { Checkbox } from '../checkbox'\n\nexport const ManageColumnsItem = memo(function ManageColumnsItem({\n  id,\n  label,\n  visible,\n  pinned,\n  onToggle,\n}: {\n  id: string\n  label: string\n  visible: boolean\n  pinned: boolean\n  onToggle: (id: string) => void\n}) {\n  const handleToggle = useCallback(() => onToggle(id), [onToggle, id])\n\n  const {\n    attributes,\n    listeners,\n    setNodeRef,\n    transform,\n    transition,\n    isDragging,\n  } = useSortable({\n    id,\n    // Boolean shorthand only disables dragging, not dropping onto a pinned row.\n    disabled: { draggable: pinned, droppable: pinned },\n  })\n\n  const style = {\n    transform: CSS.Transform.toString(transform),\n    transition,\n  }\n\n  return (\n    <div\n      ref={setNodeRef}\n      style={style}\n      className={cx(\n        'flex items-center justify-between gap-2 py-1.5 pl-2 -ml-2 bg-white rounded',\n        'has-[button:hover]:bg-j2-gray-2',\n        isDragging && 'shadow-md z-10 relative',\n        pinned && 'opacity-50'\n      )}\n    >\n      <Checkbox\n        checked={visible}\n        disabled={pinned}\n        onChange={pinned ? undefined : handleToggle}\n        className={cx(\n          // No gap: antd's own .ant-checkbox-label already pads before children.\n          'flex items-center flex-1 min-w-0',\n          pinned ? 'cursor-not-allowed' : 'cursor-pointer'\n        )}\n      >\n        <span className=\"truncate text-j2-lg text-j2-text\" title={label}>\n          {label}\n        </span>\n      </Checkbox>\n      {!pinned && (\n        <button\n          type=\"button\"\n          {...attributes}\n          {...listeners}\n          aria-label={`Drag to reorder ${label}`}\n          className=\"p-1 text-j2-text cursor-grab active:cursor-grabbing\"\n        >\n          <DotsSixIcon size={16} weight=\"bold\" className=\"rotate-90\" />\n        </button>\n      )}\n    </div>\n  )\n})\n"],"names":["ManageColumnsItem"],"mappings":";;;;;;;AAQO,MAAM,oBAAoB,KAAK,SAASA,mBAAkB;AAAA,EAC/D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMG;AACD,QAAM,eAAe,YAAY,MAAM,SAAS,EAAE,GAAG,CAAC,UAAU,EAAE,CAAC;AAEnE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE,YAAY;AAAA,IACd;AAAA;AAAA,IAEA,UAAU,EAAE,WAAW,QAAQ,WAAW,OAAA;AAAA,EAAO,CAClD;AAED,QAAM,QAAQ;AAAA,IACZ,WAAW,IAAI,UAAU,SAAS,SAAS;AAAA,IAC3C;AAAA,EAAA;AAGF,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA,cAAc;AAAA,QACd,UAAU;AAAA,MAAA;AAAA,MAGZ,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,SAAS;AAAA,YACT,UAAU;AAAA,YACV,UAAU,SAAS,SAAY;AAAA,YAC/B,WAAW;AAAA;AAAA,cAET;AAAA,cACA,SAAS,uBAAuB;AAAA,YAAA;AAAA,YAGlC,8BAAC,QAAA,EAAK,WAAU,oCAAmC,OAAO,OACvD,UAAA,MAAA,CACH;AAAA,UAAA;AAAA,QAAA;AAAA,QAED,CAAC,UACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACJ,GAAG;AAAA,YACH,GAAG;AAAA,YACJ,cAAY,mBAAmB,KAAK;AAAA,YACpC,WAAU;AAAA,YAEV,8BAAC,aAAA,EAAY,MAAM,IAAI,QAAO,QAAO,WAAU,YAAA,CAAY;AAAA,UAAA;AAAA,QAAA;AAAA,MAC7D;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;"}

package/dist/src/components/manageColumns/ManageColumnsPanel.cjs

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const core = require("@dnd-kit/core");
+const sortable = require("@dnd-kit/sortable");
+const ManageColumnsItem = require("./ManageColumnsItem.cjs");
+const SelectAll = require("./SelectAll.cjs");
+const noop = () => {
+};
+function ManageColumnsPanel({
+  columns,
+  onToggle,
+  onToggleAll,
+  onReorder,
+  description
+}) {
+  const toggleable = React.useMemo(() => columns.filter((c) => !c.pinned), [columns]);
+  const visibleCount = toggleable.filter((c) => c.visible).length;
+  const sensors = core.useSensors(
+    core.useSensor(core.PointerSensor, { activationConstraint: { distance: 4 } }),
+    core.useSensor(core.KeyboardSensor, {
+      coordinateGetter: sortable.sortableKeyboardCoordinates
+    })
+  );
+  const pinnedIds = React.useMemo(
+    () => columns.filter((c) => c.pinned).map((c) => c.id),
+    [columns]
+  );
+  const itemIds = React.useMemo(() => toggleable.map((c) => c.id), [toggleable]);
+  const handleDragEnd = (event) => {
+    const { active, over } = event;
+    if (!over || active.id === over.id) return;
+    const from = itemIds.indexOf(active.id);
+    const to = itemIds.indexOf(over.id);
+    if (from === -1 || to === -1) return;
+    onReorder == null ? void 0 : onReorder([...pinnedIds, ...sortable.arrayMove(itemIds, from, to)]);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    toggleable.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sticky -top-4 z-10 -mt-4 -mx-4 pt-3 px-4 pb-2 mb-3 bg-white border-b border-j2-border-secondary flex items-baseline justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-semibold text-sm text-j2-text", children: [
+        visibleCount,
+        "/",
+        toggleable.length,
+        " Columns Shown"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        SelectAll.SelectAll,
+        {
+          columns,
+          onToggle,
+          onToggleAll
+        }
+      )
+    ] }),
+    description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-j2-text mb-4", children: description }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      core.DndContext,
+      {
+        sensors,
+        collisionDetection: core.closestCenter,
+        onDragEnd: handleDragEnd,
+        children: /* @__PURE__ */ jsxRuntime.jsx(sortable.SortableContext, { items: itemIds, strategy: sortable.verticalListSortingStrategy, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col", children: columns.map((column) => /* @__PURE__ */ jsxRuntime.jsx(
+          ManageColumnsItem.ManageColumnsItem,
+          {
+            id: column.id,
+            label: column.label,
+            visible: column.pinned ? true : column.visible,
+            pinned: Boolean(column.pinned),
+            onToggle: onToggle ?? noop
+          },
+          column.id
+        )) }) })
+      }
+    )
+  ] });
+}
+exports.ManageColumnsPanel = ManageColumnsPanel;
+//# sourceMappingURL=ManageColumnsPanel.cjs.map

package/dist/src/components/manageColumns/ManageColumnsPanel.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ManageColumnsPanel.cjs","sources":["../../../../src/components/manageColumns/ManageColumnsPanel.tsx"],"sourcesContent":["import { useMemo, type ReactNode } from 'react'\nimport {\n  DndContext,\n  KeyboardSensor,\n  PointerSensor,\n  closestCenter,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n} from '@dnd-kit/core'\nimport {\n  SortableContext,\n  arrayMove,\n  sortableKeyboardCoordinates,\n  verticalListSortingStrategy,\n} from '@dnd-kit/sortable'\n\nimport { ManageColumnsItem } from './ManageColumnsItem'\nimport { SelectAll } from './SelectAll'\n\nconst noop = () => {}\n\nexport type ManageColumnsColumn = {\n  id: string\n  label: string\n  visible: boolean\n  /** Always visible, not draggable. Put pinned columns first in `columns`. */\n  pinned?: boolean\n}\n\nexport type ManageColumnsPanelProps = {\n  /** Columns in display order. Put any `pinned` columns first. */\n  columns: ManageColumnsColumn[]\n  onToggle?: (id: string) => void\n  /** Batched select-all/clear-all handler — prefer this over the `onToggle` loop fallback, which can drop updates under a closure-captured state snapshot. */\n  onToggleAll?: (ids: string[], visible: boolean) => void\n  onReorder?: (orderedIds: string[]) => void\n  description?: ReactNode\n}\n\nexport function ManageColumnsPanel({\n  columns,\n  onToggle,\n  onToggleAll,\n  onReorder,\n  description,\n}: ManageColumnsPanelProps) {\n  const toggleable = useMemo(() => columns.filter((c) => !c.pinned), [columns])\n  const visibleCount = toggleable.filter((c) => c.visible).length\n\n  const sensors = useSensors(\n    useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),\n    useSensor(KeyboardSensor, {\n      coordinateGetter: sortableKeyboardCoordinates,\n    })\n  )\n\n  const pinnedIds = useMemo(\n    () => columns.filter((c) => c.pinned).map((c) => c.id),\n    [columns]\n  )\n  const itemIds = useMemo(() => toggleable.map((c) => c.id), [toggleable])\n\n  const handleDragEnd = (event: DragEndEvent) => {\n    const { active, over } = event\n    if (!over || active.id === over.id) return\n    const from = itemIds.indexOf(active.id as string)\n    const to = itemIds.indexOf(over.id as string)\n    if (from === -1 || to === -1) return\n    onReorder?.([...pinnedIds, ...arrayMove(itemIds, from, to)])\n  }\n\n  return (\n    <>\n      {toggleable.length > 0 && (\n        <div className=\"sticky -top-4 z-10 -mt-4 -mx-4 pt-3 px-4 pb-2 mb-3 bg-white border-b border-j2-border-secondary flex items-baseline justify-between\">\n          <span className=\"font-semibold text-sm text-j2-text\">\n            {visibleCount}/{toggleable.length} Columns Shown\n          </span>\n          <SelectAll\n            columns={columns}\n            onToggle={onToggle}\n            onToggleAll={onToggleAll}\n          />\n        </div>\n      )}\n      {description && (\n        <p className=\"text-sm text-j2-text mb-4\">{description}</p>\n      )}\n      <DndContext\n        sensors={sensors}\n        collisionDetection={closestCenter}\n        onDragEnd={handleDragEnd}\n      >\n        <SortableContext items={itemIds} strategy={verticalListSortingStrategy}>\n          <div className=\"flex flex-col\">\n            {columns.map((column) => (\n              <ManageColumnsItem\n                key={column.id}\n                id={column.id}\n                label={column.label}\n                visible={column.pinned ? true : column.visible}\n                pinned={Boolean(column.pinned)}\n                onToggle={onToggle ?? noop}\n              />\n            ))}\n          </div>\n        </SortableContext>\n      </DndContext>\n    </>\n  )\n}\n"],"names":["useMemo","useSensors","useSensor","PointerSensor","KeyboardSensor","sortableKeyboardCoordinates","arrayMove","jsxs","Fragment","jsx","SelectAll","DndContext","closestCenter","SortableContext","verticalListSortingStrategy","ManageColumnsItem"],"mappings":";;;;;;;;AAoBA,MAAM,OAAO,MAAM;AAAC;AAoBb,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA4B;AAC1B,QAAM,aAAaA,MAAAA,QAAQ,MAAM,QAAQ,OAAO,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;AAC5E,QAAM,eAAe,WAAW,OAAO,CAAC,MAAM,EAAE,OAAO,EAAE;AAEzD,QAAM,UAAUC,KAAAA;AAAAA,IACdC,KAAAA,UAAUC,KAAAA,eAAe,EAAE,sBAAsB,EAAE,UAAU,EAAA,GAAK;AAAA,IAClED,KAAAA,UAAUE,KAAAA,gBAAgB;AAAA,MACxB,kBAAkBC,SAAAA;AAAAA,IAAA,CACnB;AAAA,EAAA;AAGH,QAAM,YAAYL,MAAAA;AAAAA,IAChB,MAAM,QAAQ,OAAO,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE;AAAA,IACrD,CAAC,OAAO;AAAA,EAAA;AAEV,QAAM,UAAUA,MAAAA,QAAQ,MAAM,WAAW,IAAI,CAAC,MAAM,EAAE,EAAE,GAAG,CAAC,UAAU,CAAC;AAEvE,QAAM,gBAAgB,CAAC,UAAwB;AAC7C,UAAM,EAAE,QAAQ,KAAA,IAAS;AACzB,QAAI,CAAC,QAAQ,OAAO,OAAO,KAAK,GAAI;AACpC,UAAM,OAAO,QAAQ,QAAQ,OAAO,EAAY;AAChD,UAAM,KAAK,QAAQ,QAAQ,KAAK,EAAY;AAC5C,QAAI,SAAS,MAAM,OAAO,GAAI;AAC9B,2CAAY,CAAC,GAAG,WAAW,GAAGM,SAAAA,UAAU,SAAS,MAAM,EAAE,CAAC;AAAA,EAC5D;AAEA,SACEC,2BAAAA,KAAAC,qBAAA,EACG,UAAA;AAAA,IAAA,WAAW,SAAS,KACnBD,2BAAAA,KAAC,OAAA,EAAI,WAAU,uIACb,UAAA;AAAA,MAAAA,2BAAAA,KAAC,QAAA,EAAK,WAAU,sCACb,UAAA;AAAA,QAAA;AAAA,QAAa;AAAA,QAAE,WAAW;AAAA,QAAO;AAAA,MAAA,GACpC;AAAA,MACAE,2BAAAA;AAAAA,QAACC,UAAAA;AAAAA,QAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MAAA;AAAA,IACF,GACF;AAAA,IAED,eACCD,2BAAAA,IAAC,KAAA,EAAE,WAAU,6BAA6B,UAAA,aAAY;AAAA,IAExDA,2BAAAA;AAAAA,MAACE,KAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA,oBAAoBC,KAAAA;AAAAA,QACpB,WAAW;AAAA,QAEX,UAAAH,2BAAAA,IAACI,0BAAA,EAAgB,OAAO,SAAS,UAAUC,SAAAA,6BACzC,UAAAL,2BAAAA,IAAC,OAAA,EAAI,WAAU,iBACZ,UAAA,QAAQ,IAAI,CAAC,WACZA,2BAAAA;AAAAA,UAACM,kBAAAA;AAAAA,UAAA;AAAA,YAEC,IAAI,OAAO;AAAA,YACX,OAAO,OAAO;AAAA,YACd,SAAS,OAAO,SAAS,OAAO,OAAO;AAAA,YACvC,QAAQ,QAAQ,OAAO,MAAM;AAAA,YAC7B,UAAU,YAAY;AAAA,UAAA;AAAA,UALjB,OAAO;AAAA,QAAA,CAOf,GACH,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;;"}