@j2-health/design-system 0.3.2 → 0.5.0

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;;"}

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

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+export type ManageColumnsColumn = {
+    id: string;
+    label: string;
+    visible: boolean;
+    /** Always visible, not draggable. Put pinned columns first in `columns`. */
+    pinned?: boolean;
+};
+export type ManageColumnsPanelProps = {
+    /** Columns in display order. Put any `pinned` columns first. */
+    columns: ManageColumnsColumn[];
+    onToggle?: (id: string) => void;
+    /** Batched select-all/clear-all handler — prefer this over the `onToggle` loop fallback, which can drop updates under a closure-captured state snapshot. */
+    onToggleAll?: (ids: string[], visible: boolean) => void;
+    onReorder?: (orderedIds: string[]) => void;
+    description?: ReactNode;
+};
+export declare function ManageColumnsPanel({ columns, onToggle, onToggleAll, onReorder, description, }: ManageColumnsPanelProps): import("react").JSX.Element;

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

@@ -0,0 +1,79 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCenter } from "@dnd-kit/core";
+import { sortableKeyboardCoordinates, SortableContext, verticalListSortingStrategy, arrayMove } from "@dnd-kit/sortable";
+import { ManageColumnsItem } from "./ManageColumnsItem.js";
+import { SelectAll } from "./SelectAll.js";
+const noop = () => {
+};
+function ManageColumnsPanel({
+  columns,
+  onToggle,
+  onToggleAll,
+  onReorder,
+  description
+}) {
+  const toggleable = useMemo(() => columns.filter((c) => !c.pinned), [columns]);
+  const visibleCount = toggleable.filter((c) => c.visible).length;
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates
+    })
+  );
+  const pinnedIds = useMemo(
+    () => columns.filter((c) => c.pinned).map((c) => c.id),
+    [columns]
+  );
+  const itemIds = 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, ...arrayMove(itemIds, from, to)]);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    toggleable.length > 0 && /* @__PURE__ */ 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__ */ jsxs("span", { className: "font-semibold text-sm text-j2-text", children: [
+        visibleCount,
+        "/",
+        toggleable.length,
+        " Columns Shown"
+      ] }),
+      /* @__PURE__ */ jsx(
+        SelectAll,
+        {
+          columns,
+          onToggle,
+          onToggleAll
+        }
+      )
+    ] }),
+    description && /* @__PURE__ */ jsx("p", { className: "text-sm text-j2-text mb-4", children: description }),
+    /* @__PURE__ */ jsx(
+      DndContext,
+      {
+        sensors,
+        collisionDetection: closestCenter,
+        onDragEnd: handleDragEnd,
+        children: /* @__PURE__ */ jsx(SortableContext, { items: itemIds, strategy: verticalListSortingStrategy, children: /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: columns.map((column) => /* @__PURE__ */ jsx(
+          ManageColumnsItem,
+          {
+            id: column.id,
+            label: column.label,
+            visible: column.pinned ? true : column.visible,
+            pinned: Boolean(column.pinned),
+            onToggle: onToggle ?? noop
+          },
+          column.id
+        )) }) })
+      }
+    )
+  ] });
+}
+export {
+  ManageColumnsPanel
+};
+//# sourceMappingURL=ManageColumnsPanel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ManageColumnsPanel.js","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":[],"mappings":";;;;;;AAoBA,MAAM,OAAO,MAAM;AAAC;AAoBb,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA4B;AAC1B,QAAM,aAAa,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,UAAU;AAAA,IACd,UAAU,eAAe,EAAE,sBAAsB,EAAE,UAAU,EAAA,GAAK;AAAA,IAClE,UAAU,gBAAgB;AAAA,MACxB,kBAAkB;AAAA,IAAA,CACnB;AAAA,EAAA;AAGH,QAAM,YAAY;AAAA,IAChB,MAAM,QAAQ,OAAO,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE;AAAA,IACrD,CAAC,OAAO;AAAA,EAAA;AAEV,QAAM,UAAU,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,GAAG,UAAU,SAAS,MAAM,EAAE,CAAC;AAAA,EAC5D;AAEA,SACE,qBAAA,UAAA,EACG,UAAA;AAAA,IAAA,WAAW,SAAS,KACnB,qBAAC,OAAA,EAAI,WAAU,uIACb,UAAA;AAAA,MAAA,qBAAC,QAAA,EAAK,WAAU,sCACb,UAAA;AAAA,QAAA;AAAA,QAAa;AAAA,QAAE,WAAW;AAAA,QAAO;AAAA,MAAA,GACpC;AAAA,MACA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MAAA;AAAA,IACF,GACF;AAAA,IAED,eACC,oBAAC,KAAA,EAAE,WAAU,6BAA6B,UAAA,aAAY;AAAA,IAExD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,oBAAoB;AAAA,QACpB,WAAW;AAAA,QAEX,UAAA,oBAAC,iBAAA,EAAgB,OAAO,SAAS,UAAU,6BACzC,UAAA,oBAAC,OAAA,EAAI,WAAU,iBACZ,UAAA,QAAQ,IAAI,CAAC,WACZ;AAAA,UAAC;AAAA,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;"}

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

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const Button = require("../button/Button.cjs");
+function SelectAll({ columns, onToggle, onToggleAll }) {
+  const toggleable = React.useMemo(() => columns.filter((c) => !c.pinned), [columns]);
+  const allVisible = toggleable.length > 0 && toggleable.every((c) => c.visible);
+  const label = allVisible ? "Clear all" : "Select all";
+  if (toggleable.length === 0) return null;
+  const handleSelectAllToggle = () => {
+    const affected = toggleable.filter((c) => c.visible === allVisible);
+    if (onToggleAll) {
+      onToggleAll(
+        affected.map((c) => c.id),
+        !allVisible
+      );
+      return;
+    }
+    for (const column of affected) {
+      onToggle == null ? void 0 : onToggle(column.id);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { type: "text", size: "small", onClick: handleSelectAllToggle, children: label });
+}
+exports.SelectAll = SelectAll;
+//# sourceMappingURL=SelectAll.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectAll.cjs","sources":["../../../../src/components/manageColumns/SelectAll.tsx"],"sourcesContent":["import { useMemo } from 'react'\n\nimport { Button } from '../button'\nimport type { ManageColumnsColumn } from './ManageColumnsPanel'\n\nexport type SelectAllProps = {\n  /** Same `columns` passed to the paired `ManageColumnsPanel`. */\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}\n\n/**\n * Select-all/clear-all control, composed by `ManageColumnsPanel` itself\n * above its description. Kept as its own component (not inlined) so its\n * label/toggle logic is testable independent of the panel's drag-reorder\n * machinery.\n */\nexport function SelectAll({ columns, onToggle, onToggleAll }: SelectAllProps) {\n  const toggleable = useMemo(() => columns.filter((c) => !c.pinned), [columns])\n  const allVisible = toggleable.length > 0 && toggleable.every((c) => c.visible)\n  const label = allVisible ? 'Clear all' : 'Select all'\n\n  if (toggleable.length === 0) return null\n\n  const handleSelectAllToggle = () => {\n    const affected = toggleable.filter((c) => c.visible === allVisible)\n    if (onToggleAll) {\n      onToggleAll(\n        affected.map((c) => c.id),\n        !allVisible\n      )\n      return\n    }\n    for (const column of affected) {\n      onToggle?.(column.id)\n    }\n  }\n\n  return (\n    <Button type=\"text\" size=\"small\" onClick={handleSelectAllToggle}>\n      {label}\n    </Button>\n  )\n}\n"],"names":["useMemo","jsx","Button"],"mappings":";;;;;AAmBO,SAAS,UAAU,EAAE,SAAS,UAAU,eAA+B;AAC5E,QAAM,aAAaA,MAAAA,QAAQ,MAAM,QAAQ,OAAO,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;AAC5E,QAAM,aAAa,WAAW,SAAS,KAAK,WAAW,MAAM,CAAC,MAAM,EAAE,OAAO;AAC7E,QAAM,QAAQ,aAAa,cAAc;AAEzC,MAAI,WAAW,WAAW,EAAG,QAAO;AAEpC,QAAM,wBAAwB,MAAM;AAClC,UAAM,WAAW,WAAW,OAAO,CAAC,MAAM,EAAE,YAAY,UAAU;AAClE,QAAI,aAAa;AACf;AAAA,QACE,SAAS,IAAI,CAAC,MAAM,EAAE,EAAE;AAAA,QACxB,CAAC;AAAA,MAAA;AAEH;AAAA,IACF;AACA,eAAW,UAAU,UAAU;AAC7B,2CAAW,OAAO;AAAA,IACpB;AAAA,EACF;AAEA,SACEC,+BAACC,OAAAA,UAAO,MAAK,QAAO,MAAK,SAAQ,SAAS,uBACvC,UAAA,MAAA,CACH;AAEJ;;"}

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

@@ -0,0 +1,15 @@
+import { ManageColumnsColumn } from './ManageColumnsPanel.js';
+export type SelectAllProps = {
+    /** Same `columns` passed to the paired `ManageColumnsPanel`. */
+    columns: ManageColumnsColumn[];
+    onToggle?: (id: string) => void;
+    /** Batched select-all/clear-all handler — prefer this over the `onToggle` loop fallback, which can drop updates under a closure-captured state snapshot. */
+    onToggleAll?: (ids: string[], visible: boolean) => void;
+};
+/**
+ * Select-all/clear-all control, composed by `ManageColumnsPanel` itself
+ * above its description. Kept as its own component (not inlined) so its
+ * label/toggle logic is testable independent of the panel's drag-reorder
+ * machinery.
+ */
+export declare function SelectAll({ columns, onToggle, onToggleAll }: SelectAllProps): import("react").JSX.Element | null;

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

@@ -0,0 +1,27 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Button } from "../button/Button.js";
+function SelectAll({ columns, onToggle, onToggleAll }) {
+  const toggleable = useMemo(() => columns.filter((c) => !c.pinned), [columns]);
+  const allVisible = toggleable.length > 0 && toggleable.every((c) => c.visible);
+  const label = allVisible ? "Clear all" : "Select all";
+  if (toggleable.length === 0) return null;
+  const handleSelectAllToggle = () => {
+    const affected = toggleable.filter((c) => c.visible === allVisible);
+    if (onToggleAll) {
+      onToggleAll(
+        affected.map((c) => c.id),
+        !allVisible
+      );
+      return;
+    }
+    for (const column of affected) {
+      onToggle == null ? void 0 : onToggle(column.id);
+    }
+  };
+  return /* @__PURE__ */ jsx(Button, { type: "text", size: "small", onClick: handleSelectAllToggle, children: label });
+}
+export {
+  SelectAll
+};
+//# sourceMappingURL=SelectAll.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectAll.js","sources":["../../../../src/components/manageColumns/SelectAll.tsx"],"sourcesContent":["import { useMemo } from 'react'\n\nimport { Button } from '../button'\nimport type { ManageColumnsColumn } from './ManageColumnsPanel'\n\nexport type SelectAllProps = {\n  /** Same `columns` passed to the paired `ManageColumnsPanel`. */\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}\n\n/**\n * Select-all/clear-all control, composed by `ManageColumnsPanel` itself\n * above its description. Kept as its own component (not inlined) so its\n * label/toggle logic is testable independent of the panel's drag-reorder\n * machinery.\n */\nexport function SelectAll({ columns, onToggle, onToggleAll }: SelectAllProps) {\n  const toggleable = useMemo(() => columns.filter((c) => !c.pinned), [columns])\n  const allVisible = toggleable.length > 0 && toggleable.every((c) => c.visible)\n  const label = allVisible ? 'Clear all' : 'Select all'\n\n  if (toggleable.length === 0) return null\n\n  const handleSelectAllToggle = () => {\n    const affected = toggleable.filter((c) => c.visible === allVisible)\n    if (onToggleAll) {\n      onToggleAll(\n        affected.map((c) => c.id),\n        !allVisible\n      )\n      return\n    }\n    for (const column of affected) {\n      onToggle?.(column.id)\n    }\n  }\n\n  return (\n    <Button type=\"text\" size=\"small\" onClick={handleSelectAllToggle}>\n      {label}\n    </Button>\n  )\n}\n"],"names":[],"mappings":";;;AAmBO,SAAS,UAAU,EAAE,SAAS,UAAU,eAA+B;AAC5E,QAAM,aAAa,QAAQ,MAAM,QAAQ,OAAO,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;AAC5E,QAAM,aAAa,WAAW,SAAS,KAAK,WAAW,MAAM,CAAC,MAAM,EAAE,OAAO;AAC7E,QAAM,QAAQ,aAAa,cAAc;AAEzC,MAAI,WAAW,WAAW,EAAG,QAAO;AAEpC,QAAM,wBAAwB,MAAM;AAClC,UAAM,WAAW,WAAW,OAAO,CAAC,MAAM,EAAE,YAAY,UAAU;AAClE,QAAI,aAAa;AACf;AAAA,QACE,SAAS,IAAI,CAAC,MAAM,EAAE,EAAE;AAAA,QACxB,CAAC;AAAA,MAAA;AAEH;AAAA,IACF;AACA,eAAW,UAAU,UAAU;AAC7B,2CAAW,OAAO;AAAA,IACpB;AAAA,EACF;AAEA,SACE,oBAAC,UAAO,MAAK,QAAO,MAAK,SAAQ,SAAS,uBACvC,UAAA,MAAA,CACH;AAEJ;"}

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

@@ -0,0 +1,4 @@
+export { ManageColumnsPanel } from './ManageColumnsPanel.js';
+export type { ManageColumnsColumn, ManageColumnsPanelProps, } from './ManageColumnsPanel.js';
+export { SelectAll } from './SelectAll.js';
+export type { SelectAllProps } from './SelectAll.js';

package/dist/src/components/modal/Modal.cjs

@@ -18,7 +18,6 @@ const Modal = ({
     {
       title,
       className: cx("j2-modal"),
-      maskClosable: true,
       centered: true,
       closeIcon: /* @__PURE__ */ jsxRuntime.jsx(react.XIcon, { size: 22, weight: "regular" }),
       onCancel,

package/dist/src/components/modal/Modal.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.cjs","sources":["../../../../src/components/modal/Modal.tsx"],"sourcesContent":["import { Modal as AntdModal, ModalProps } from 'antd'\nimport { XIcon } from '@phosphor-icons/react'\nimport './Modal.css'\nimport cx from 'classnames'\n\nexport type Props = {\n  withContentPadding?: boolean\n} & Expand<ModalProps>\n\nconst Modal = ({\n  open,\n  title,\n  children,\n  onCancel,\n  withContentPadding: withPadding = true,\n  ...props\n}: Props) => {\n  return (\n    <AntdModal\n      title={title}\n      className={cx('j2-modal')}\n      maskClosable={true}\n      centered\n      closeIcon={<XIcon size={22} weight=\"regular\" />}\n      onCancel={onCancel}\n      open={open}\n      {...props}\n    >\n      <div className={cx(withPadding ? 'px-6 py-3' : 'px-0 py-0')}>\n        {children}\n      </div>\n    </AntdModal>\n  )\n}\n\nexport { Modal }\n"],"names":["jsx","AntdModal","XIcon"],"mappings":";;;;;;;AASA,MAAM,QAAQ,CAAC;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB,cAAc;AAAA,EAClC,GAAG;AACL,MAAa;AACX,SACEA,2BAAAA;AAAAA,IAACC,KAAAA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,UAAU;AAAA,MACxB,cAAc;AAAA,MACd,UAAQ;AAAA,MACR,WAAWD,2BAAAA,IAACE,aAAA,EAAM,MAAM,IAAI,QAAO,WAAU;AAAA,MAC7C;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ,UAAAF,2BAAAA,IAAC,SAAI,WAAW,GAAG,cAAc,cAAc,WAAW,GACvD,SAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN;;"}
+{"version":3,"file":"Modal.cjs","sources":["../../../../src/components/modal/Modal.tsx"],"sourcesContent":["import { Modal as AntdModal, ModalProps } from 'antd'\nimport { XIcon } from '@phosphor-icons/react'\nimport './Modal.css'\nimport cx from 'classnames'\n\nexport type Props = {\n  withContentPadding?: boolean\n} & Expand<ModalProps>\n\nconst Modal = ({\n  open,\n  title,\n  children,\n  onCancel,\n  withContentPadding: withPadding = true,\n  ...props\n}: Props) => {\n  return (\n    <AntdModal\n      title={title}\n      className={cx('j2-modal')}\n      centered\n      closeIcon={<XIcon size={22} weight=\"regular\" />}\n      onCancel={onCancel}\n      open={open}\n      {...props}\n    >\n      <div className={cx(withPadding ? 'px-6 py-3' : 'px-0 py-0')}>\n        {children}\n      </div>\n    </AntdModal>\n  )\n}\n\nexport { Modal }\n"],"names":["jsx","AntdModal","XIcon"],"mappings":";;;;;;;AASA,MAAM,QAAQ,CAAC;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB,cAAc;AAAA,EAClC,GAAG;AACL,MAAa;AACX,SACEA,2BAAAA;AAAAA,IAACC,KAAAA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,UAAU;AAAA,MACxB,UAAQ;AAAA,MACR,WAAWD,2BAAAA,IAACE,aAAA,EAAM,MAAM,IAAI,QAAO,WAAU;AAAA,MAC7C;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ,UAAAF,2BAAAA,IAAC,SAAI,WAAW,GAAG,cAAc,cAAc,WAAW,GACvD,SAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN;;"}

package/dist/src/components/modal/Modal.js

@@ -16,7 +16,6 @@ const Modal = ({
     {
       title,
       className: cx("j2-modal"),
-      maskClosable: true,
       centered: true,
       closeIcon: /* @__PURE__ */ jsx(XIcon, { size: 22, weight: "regular" }),
       onCancel,

package/dist/src/components/modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../../../../src/components/modal/Modal.tsx"],"sourcesContent":["import { Modal as AntdModal, ModalProps } from 'antd'\nimport { XIcon } from '@phosphor-icons/react'\nimport './Modal.css'\nimport cx from 'classnames'\n\nexport type Props = {\n  withContentPadding?: boolean\n} & Expand<ModalProps>\n\nconst Modal = ({\n  open,\n  title,\n  children,\n  onCancel,\n  withContentPadding: withPadding = true,\n  ...props\n}: Props) => {\n  return (\n    <AntdModal\n      title={title}\n      className={cx('j2-modal')}\n      maskClosable={true}\n      centered\n      closeIcon={<XIcon size={22} weight=\"regular\" />}\n      onCancel={onCancel}\n      open={open}\n      {...props}\n    >\n      <div className={cx(withPadding ? 'px-6 py-3' : 'px-0 py-0')}>\n        {children}\n      </div>\n    </AntdModal>\n  )\n}\n\nexport { Modal }\n"],"names":["AntdModal"],"mappings":";;;;;AASA,MAAM,QAAQ,CAAC;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB,cAAc;AAAA,EAClC,GAAG;AACL,MAAa;AACX,SACE;AAAA,IAACA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,UAAU;AAAA,MACxB,cAAc;AAAA,MACd,UAAQ;AAAA,MACR,WAAW,oBAAC,OAAA,EAAM,MAAM,IAAI,QAAO,WAAU;AAAA,MAC7C;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA,oBAAC,SAAI,WAAW,GAAG,cAAc,cAAc,WAAW,GACvD,SAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"Modal.js","sources":["../../../../src/components/modal/Modal.tsx"],"sourcesContent":["import { Modal as AntdModal, ModalProps } from 'antd'\nimport { XIcon } from '@phosphor-icons/react'\nimport './Modal.css'\nimport cx from 'classnames'\n\nexport type Props = {\n  withContentPadding?: boolean\n} & Expand<ModalProps>\n\nconst Modal = ({\n  open,\n  title,\n  children,\n  onCancel,\n  withContentPadding: withPadding = true,\n  ...props\n}: Props) => {\n  return (\n    <AntdModal\n      title={title}\n      className={cx('j2-modal')}\n      centered\n      closeIcon={<XIcon size={22} weight=\"regular\" />}\n      onCancel={onCancel}\n      open={open}\n      {...props}\n    >\n      <div className={cx(withPadding ? 'px-6 py-3' : 'px-0 py-0')}>\n        {children}\n      </div>\n    </AntdModal>\n  )\n}\n\nexport { Modal }\n"],"names":["AntdModal"],"mappings":";;;;;AASA,MAAM,QAAQ,CAAC;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB,cAAc;AAAA,EAClC,GAAG;AACL,MAAa;AACX,SACE;AAAA,IAACA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,UAAU;AAAA,MACxB,UAAQ;AAAA,MACR,WAAW,oBAAC,OAAA,EAAM,MAAM,IAAI,QAAO,WAAU;AAAA,MAC7C;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA,oBAAC,SAAI,WAAW,GAAG,cAAc,cAAc,WAAW,GACvD,SAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/src/components/notification/Notification.module.css.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const messageOnly = "_messageOnly_1pxqk_14";
+const messageOnly = "_messageOnly_a124a_14";
 const s = {
   messageOnly
 };

package/dist/src/components/notification/Notification.module.css.js

@@ -1,4 +1,4 @@
-const messageOnly = "_messageOnly_1pxqk_14";
+const messageOnly = "_messageOnly_a124a_14";
 const s = {
   messageOnly
 };

package/dist/src/components/notification/useNotification.cjs

@@ -34,12 +34,15 @@ const getIcon = (type) => {
 const useNotification = () => {
   const [api, contextHolder] = antd.notification.useNotification();
   const openNotification = (type, config) => {
+    const { message, title, btn, actions, ...restConfig } = config;
     api[type]({
       icon: getIcon(type),
-      ...config,
+      ...restConfig,
+      title: title ?? message,
+      actions: actions ?? btn,
       closeIcon: /* @__PURE__ */ jsxRuntime.jsx(react.XIcon, { color: "var(--j2-color-icon)", size: 22, weight: "regular" }),
       className: cx({
-        [Notification_module.default.messageOnly]: config.message && !config.description
+        [Notification_module.default.messageOnly]: (title ?? message) && !config.description
       })
     });
   };

package/dist/src/components/notification/useNotification.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useNotification.cjs","sources":["../../../../src/components/notification/useNotification.tsx"],"sourcesContent":["import { notification } from 'antd'\nimport type { NotificationArgsProps } from 'antd'\nimport s from './Notification.module.css'\nimport {\n  CheckCircleIcon,\n  InfoIcon,\n  WarningCircleIcon,\n  XIcon,\n  XCircleIcon,\n} from '@phosphor-icons/react'\nimport cx from 'classnames'\nimport React from 'react'\n\ntype NotificationType = 'success' | 'info' | 'warning' | 'error'\n\nexport type OpenNotificationFunc = (\n  type: Expand<NotificationType>,\n  config: Expand<NotificationArgsProps>\n) => void\n\nconst getIcon = (type: NotificationType) => {\n  switch (type) {\n    case 'error':\n      return (\n        <XCircleIcon color=\"var(--j2-color-error)\" weight=\"duotone\" size={24} />\n      )\n    case 'success':\n      return (\n        <CheckCircleIcon\n          color=\"var(--j2-color-success)\"\n          weight=\"duotone\"\n          size={24}\n        />\n      )\n    case 'info':\n      return (\n        <InfoIcon color=\"var(--j2-color-info)\" weight=\"duotone\" size={24} />\n      )\n    case 'warning':\n      return (\n        <WarningCircleIcon\n          color=\"var(--j2-color-warning)\"\n          weight=\"duotone\"\n          size={24}\n        />\n      )\n  }\n}\n\nexport const useNotification = () => {\n  const [api, contextHolder] = notification.useNotification()\n\n  const openNotification: OpenNotificationFunc = (\n    type: Expand<NotificationType>,\n    config: Expand<NotificationArgsProps>\n  ) => {\n    api[type]({\n      icon: getIcon(type),\n      ...config,\n      closeIcon: (\n        <XIcon color=\"var(--j2-color-icon)\" size={22} weight=\"regular\" />\n      ),\n      className: cx({\n        [s.messageOnly]: config.message && !config.description,\n      }),\n    })\n  }\n\n  const closeNotification = (key?: React.Key) => {\n    api.destroy(key)\n  }\n\n  return { openNotification, closeNotification, contextHolder }\n}\n"],"names":["XCircleIcon","jsx","CheckCircleIcon","InfoIcon","WarningCircleIcon","notification","XIcon","s"],"mappings":";;;;;;;AAoBA,MAAM,UAAU,CAAC,SAA2B;AAC1C,UAAQ,MAAA;AAAA,IACN,KAAK;AACH,4CACGA,mBAAA,EAAY,OAAM,yBAAwB,QAAO,WAAU,MAAM,IAAI;AAAA,IAE1E,KAAK;AACH,aACEC,2BAAAA;AAAAA,QAACC,MAAAA;AAAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,QAAO;AAAA,UACP,MAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IAGZ,KAAK;AACH,4CACGC,gBAAA,EAAS,OAAM,wBAAuB,QAAO,WAAU,MAAM,IAAI;AAAA,IAEtE,KAAK;AACH,aACEF,2BAAAA;AAAAA,QAACG,MAAAA;AAAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,QAAO;AAAA,UACP,MAAM;AAAA,QAAA;AAAA,MAAA;AAAA,EACR;AAGR;AAEO,MAAM,kBAAkB,MAAM;AACnC,QAAM,CAAC,KAAK,aAAa,IAAIC,KAAAA,aAAa,gBAAA;AAE1C,QAAM,mBAAyC,CAC7C,MACA,WACG;AACH,QAAI,IAAI,EAAE;AAAA,MACR,MAAM,QAAQ,IAAI;AAAA,MAClB,GAAG;AAAA,MACH,0CACGC,MAAAA,OAAA,EAAM,OAAM,wBAAuB,MAAM,IAAI,QAAO,WAAU;AAAA,MAEjE,WAAW,GAAG;AAAA,QACZ,CAACC,oBAAAA,QAAE,WAAW,GAAG,OAAO,WAAW,CAAC,OAAO;AAAA,MAAA,CAC5C;AAAA,IAAA,CACF;AAAA,EACH;AAEA,QAAM,oBAAoB,CAAC,QAAoB;AAC7C,QAAI,QAAQ,GAAG;AAAA,EACjB;AAEA,SAAO,EAAE,kBAAkB,mBAAmB,cAAA;AAChD;;"}
+{"version":3,"file":"useNotification.cjs","sources":["../../../../src/components/notification/useNotification.tsx"],"sourcesContent":["import { notification } from 'antd'\nimport type { NotificationArgsProps } from 'antd'\nimport s from './Notification.module.css'\nimport {\n  CheckCircleIcon,\n  InfoIcon,\n  WarningCircleIcon,\n  XIcon,\n  XCircleIcon,\n} from '@phosphor-icons/react'\nimport cx from 'classnames'\nimport React from 'react'\n\ntype NotificationType = 'success' | 'info' | 'warning' | 'error'\n\nexport type OpenNotificationFunc = (\n  type: Expand<NotificationType>,\n  config: Expand<NotificationArgsProps>\n) => void\n\nconst getIcon = (type: NotificationType) => {\n  switch (type) {\n    case 'error':\n      return (\n        <XCircleIcon color=\"var(--j2-color-error)\" weight=\"duotone\" size={24} />\n      )\n    case 'success':\n      return (\n        <CheckCircleIcon\n          color=\"var(--j2-color-success)\"\n          weight=\"duotone\"\n          size={24}\n        />\n      )\n    case 'info':\n      return (\n        <InfoIcon color=\"var(--j2-color-info)\" weight=\"duotone\" size={24} />\n      )\n    case 'warning':\n      return (\n        <WarningCircleIcon\n          color=\"var(--j2-color-warning)\"\n          weight=\"duotone\"\n          size={24}\n        />\n      )\n  }\n}\n\nexport const useNotification = () => {\n  const [api, contextHolder] = notification.useNotification()\n\n  const openNotification: OpenNotificationFunc = (\n    type: Expand<NotificationType>,\n    config: Expand<NotificationArgsProps>\n  ) => {\n    const { message, title, btn, actions, ...restConfig } = config\n    api[type]({\n      icon: getIcon(type),\n      ...restConfig,\n      title: title ?? message,\n      actions: actions ?? btn,\n      closeIcon: (\n        <XIcon color=\"var(--j2-color-icon)\" size={22} weight=\"regular\" />\n      ),\n      className: cx({\n        [s.messageOnly]: (title ?? message) && !config.description,\n      }),\n    })\n  }\n\n  const closeNotification = (key?: React.Key) => {\n    api.destroy(key)\n  }\n\n  return { openNotification, closeNotification, contextHolder }\n}\n"],"names":["XCircleIcon","jsx","CheckCircleIcon","InfoIcon","WarningCircleIcon","notification","XIcon","s"],"mappings":";;;;;;;AAoBA,MAAM,UAAU,CAAC,SAA2B;AAC1C,UAAQ,MAAA;AAAA,IACN,KAAK;AACH,4CACGA,mBAAA,EAAY,OAAM,yBAAwB,QAAO,WAAU,MAAM,IAAI;AAAA,IAE1E,KAAK;AACH,aACEC,2BAAAA;AAAAA,QAACC,MAAAA;AAAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,QAAO;AAAA,UACP,MAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IAGZ,KAAK;AACH,4CACGC,gBAAA,EAAS,OAAM,wBAAuB,QAAO,WAAU,MAAM,IAAI;AAAA,IAEtE,KAAK;AACH,aACEF,2BAAAA;AAAAA,QAACG,MAAAA;AAAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,QAAO;AAAA,UACP,MAAM;AAAA,QAAA;AAAA,MAAA;AAAA,EACR;AAGR;AAEO,MAAM,kBAAkB,MAAM;AACnC,QAAM,CAAC,KAAK,aAAa,IAAIC,KAAAA,aAAa,gBAAA;AAE1C,QAAM,mBAAyC,CAC7C,MACA,WACG;AACH,UAAM,EAAE,SAAS,OAAO,KAAK,SAAS,GAAG,eAAe;AACxD,QAAI,IAAI,EAAE;AAAA,MACR,MAAM,QAAQ,IAAI;AAAA,MAClB,GAAG;AAAA,MACH,OAAO,SAAS;AAAA,MAChB,SAAS,WAAW;AAAA,MACpB,0CACGC,MAAAA,OAAA,EAAM,OAAM,wBAAuB,MAAM,IAAI,QAAO,WAAU;AAAA,MAEjE,WAAW,GAAG;AAAA,QACZ,CAACC,oBAAAA,QAAE,WAAW,IAAI,SAAS,YAAY,CAAC,OAAO;AAAA,MAAA,CAChD;AAAA,IAAA,CACF;AAAA,EACH;AAEA,QAAM,oBAAoB,CAAC,QAAoB;AAC7C,QAAI,QAAQ,GAAG;AAAA,EACjB;AAEA,SAAO,EAAE,kBAAkB,mBAAmB,cAAA;AAChD;;"}

package/dist/src/components/notification/useNotification.js

@@ -32,12 +32,15 @@ const getIcon = (type) => {
 const useNotification = () => {
   const [api, contextHolder] = notification.useNotification();
   const openNotification = (type, config) => {
+    const { message, title, btn, actions, ...restConfig } = config;
     api[type]({
       icon: getIcon(type),
-      ...config,
+      ...restConfig,
+      title: title ?? message,
+      actions: actions ?? btn,
       closeIcon: /* @__PURE__ */ jsx(XIcon, { color: "var(--j2-color-icon)", size: 22, weight: "regular" }),
       className: cx({
-        [s.messageOnly]: config.message && !config.description
+        [s.messageOnly]: (title ?? message) && !config.description
       })
     });
   };

package/dist/src/components/notification/useNotification.js.map

@@ -1 +1 @@
-{"version":3,"file":"useNotification.js","sources":["../../../../src/components/notification/useNotification.tsx"],"sourcesContent":["import { notification } from 'antd'\nimport type { NotificationArgsProps } from 'antd'\nimport s from './Notification.module.css'\nimport {\n  CheckCircleIcon,\n  InfoIcon,\n  WarningCircleIcon,\n  XIcon,\n  XCircleIcon,\n} from '@phosphor-icons/react'\nimport cx from 'classnames'\nimport React from 'react'\n\ntype NotificationType = 'success' | 'info' | 'warning' | 'error'\n\nexport type OpenNotificationFunc = (\n  type: Expand<NotificationType>,\n  config: Expand<NotificationArgsProps>\n) => void\n\nconst getIcon = (type: NotificationType) => {\n  switch (type) {\n    case 'error':\n      return (\n        <XCircleIcon color=\"var(--j2-color-error)\" weight=\"duotone\" size={24} />\n      )\n    case 'success':\n      return (\n        <CheckCircleIcon\n          color=\"var(--j2-color-success)\"\n          weight=\"duotone\"\n          size={24}\n        />\n      )\n    case 'info':\n      return (\n        <InfoIcon color=\"var(--j2-color-info)\" weight=\"duotone\" size={24} />\n      )\n    case 'warning':\n      return (\n        <WarningCircleIcon\n          color=\"var(--j2-color-warning)\"\n          weight=\"duotone\"\n          size={24}\n        />\n      )\n  }\n}\n\nexport const useNotification = () => {\n  const [api, contextHolder] = notification.useNotification()\n\n  const openNotification: OpenNotificationFunc = (\n    type: Expand<NotificationType>,\n    config: Expand<NotificationArgsProps>\n  ) => {\n    api[type]({\n      icon: getIcon(type),\n      ...config,\n      closeIcon: (\n        <XIcon color=\"var(--j2-color-icon)\" size={22} weight=\"regular\" />\n      ),\n      className: cx({\n        [s.messageOnly]: config.message && !config.description,\n      }),\n    })\n  }\n\n  const closeNotification = (key?: React.Key) => {\n    api.destroy(key)\n  }\n\n  return { openNotification, closeNotification, contextHolder }\n}\n"],"names":[],"mappings":";;;;;AAoBA,MAAM,UAAU,CAAC,SAA2B;AAC1C,UAAQ,MAAA;AAAA,IACN,KAAK;AACH,iCACG,aAAA,EAAY,OAAM,yBAAwB,QAAO,WAAU,MAAM,IAAI;AAAA,IAE1E,KAAK;AACH,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,QAAO;AAAA,UACP,MAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IAGZ,KAAK;AACH,iCACG,UAAA,EAAS,OAAM,wBAAuB,QAAO,WAAU,MAAM,IAAI;AAAA,IAEtE,KAAK;AACH,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,QAAO;AAAA,UACP,MAAM;AAAA,QAAA;AAAA,MAAA;AAAA,EACR;AAGR;AAEO,MAAM,kBAAkB,MAAM;AACnC,QAAM,CAAC,KAAK,aAAa,IAAI,aAAa,gBAAA;AAE1C,QAAM,mBAAyC,CAC7C,MACA,WACG;AACH,QAAI,IAAI,EAAE;AAAA,MACR,MAAM,QAAQ,IAAI;AAAA,MAClB,GAAG;AAAA,MACH,+BACG,OAAA,EAAM,OAAM,wBAAuB,MAAM,IAAI,QAAO,WAAU;AAAA,MAEjE,WAAW,GAAG;AAAA,QACZ,CAAC,EAAE,WAAW,GAAG,OAAO,WAAW,CAAC,OAAO;AAAA,MAAA,CAC5C;AAAA,IAAA,CACF;AAAA,EACH;AAEA,QAAM,oBAAoB,CAAC,QAAoB;AAC7C,QAAI,QAAQ,GAAG;AAAA,EACjB;AAEA,SAAO,EAAE,kBAAkB,mBAAmB,cAAA;AAChD;"}
+{"version":3,"file":"useNotification.js","sources":["../../../../src/components/notification/useNotification.tsx"],"sourcesContent":["import { notification } from 'antd'\nimport type { NotificationArgsProps } from 'antd'\nimport s from './Notification.module.css'\nimport {\n  CheckCircleIcon,\n  InfoIcon,\n  WarningCircleIcon,\n  XIcon,\n  XCircleIcon,\n} from '@phosphor-icons/react'\nimport cx from 'classnames'\nimport React from 'react'\n\ntype NotificationType = 'success' | 'info' | 'warning' | 'error'\n\nexport type OpenNotificationFunc = (\n  type: Expand<NotificationType>,\n  config: Expand<NotificationArgsProps>\n) => void\n\nconst getIcon = (type: NotificationType) => {\n  switch (type) {\n    case 'error':\n      return (\n        <XCircleIcon color=\"var(--j2-color-error)\" weight=\"duotone\" size={24} />\n      )\n    case 'success':\n      return (\n        <CheckCircleIcon\n          color=\"var(--j2-color-success)\"\n          weight=\"duotone\"\n          size={24}\n        />\n      )\n    case 'info':\n      return (\n        <InfoIcon color=\"var(--j2-color-info)\" weight=\"duotone\" size={24} />\n      )\n    case 'warning':\n      return (\n        <WarningCircleIcon\n          color=\"var(--j2-color-warning)\"\n          weight=\"duotone\"\n          size={24}\n        />\n      )\n  }\n}\n\nexport const useNotification = () => {\n  const [api, contextHolder] = notification.useNotification()\n\n  const openNotification: OpenNotificationFunc = (\n    type: Expand<NotificationType>,\n    config: Expand<NotificationArgsProps>\n  ) => {\n    const { message, title, btn, actions, ...restConfig } = config\n    api[type]({\n      icon: getIcon(type),\n      ...restConfig,\n      title: title ?? message,\n      actions: actions ?? btn,\n      closeIcon: (\n        <XIcon color=\"var(--j2-color-icon)\" size={22} weight=\"regular\" />\n      ),\n      className: cx({\n        [s.messageOnly]: (title ?? message) && !config.description,\n      }),\n    })\n  }\n\n  const closeNotification = (key?: React.Key) => {\n    api.destroy(key)\n  }\n\n  return { openNotification, closeNotification, contextHolder }\n}\n"],"names":[],"mappings":";;;;;AAoBA,MAAM,UAAU,CAAC,SAA2B;AAC1C,UAAQ,MAAA;AAAA,IACN,KAAK;AACH,iCACG,aAAA,EAAY,OAAM,yBAAwB,QAAO,WAAU,MAAM,IAAI;AAAA,IAE1E,KAAK;AACH,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,QAAO;AAAA,UACP,MAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IAGZ,KAAK;AACH,iCACG,UAAA,EAAS,OAAM,wBAAuB,QAAO,WAAU,MAAM,IAAI;AAAA,IAEtE,KAAK;AACH,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,QAAO;AAAA,UACP,MAAM;AAAA,QAAA;AAAA,MAAA;AAAA,EACR;AAGR;AAEO,MAAM,kBAAkB,MAAM;AACnC,QAAM,CAAC,KAAK,aAAa,IAAI,aAAa,gBAAA;AAE1C,QAAM,mBAAyC,CAC7C,MACA,WACG;AACH,UAAM,EAAE,SAAS,OAAO,KAAK,SAAS,GAAG,eAAe;AACxD,QAAI,IAAI,EAAE;AAAA,MACR,MAAM,QAAQ,IAAI;AAAA,MAClB,GAAG;AAAA,MACH,OAAO,SAAS;AAAA,MAChB,SAAS,WAAW;AAAA,MACpB,+BACG,OAAA,EAAM,OAAM,wBAAuB,MAAM,IAAI,QAAO,WAAU;AAAA,MAEjE,WAAW,GAAG;AAAA,QACZ,CAAC,EAAE,WAAW,IAAI,SAAS,YAAY,CAAC,OAAO;AAAA,MAAA,CAChD;AAAA,IAAA,CACF;AAAA,EACH;AAEA,QAAM,oBAAoB,CAAC,QAAoB;AAC7C,QAAI,QAAQ,GAAG;AAAA,EACjB;AAEA,SAAO,EAAE,kBAAkB,mBAAmB,cAAA;AAChD;"}

package/dist/src/components/pagination/Pagination.cjs

@@ -47,6 +47,8 @@ const withDesignSystemPaginationOverrides = (pagination, { paginationTextLabels
   return {
     ...pagination,
     locale: { ...getPaginationLocale(small), ...pagination.locale },
+    // Keep antd in charge of visibility (including Table's filtered total).
+    // showSizeChanger's SelectProps alternative would force it visible.
     selectComponentClass: paginationSelectComponentClass,
     itemRender: buildItemRender({
       paginationTextLabels,

package/dist/src/components/pagination/Pagination.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.cjs","sources":["../../../../src/components/pagination/Pagination.tsx"],"sourcesContent":["import {\n  Pagination as AntdPagination,\n  PaginationProps,\n  Select,\n  SelectProps,\n  Button,\n} from 'antd'\nimport cx from 'classnames'\nimport {\n  CaretLeftIcon,\n  CaretRightIcon,\n  CaretDownIcon,\n  DotsThreeIcon,\n  CaretDoubleLeftIcon,\n  CaretDoubleRightIcon,\n} from '@phosphor-icons/react'\n\nimport s from './Pagination.module.css'\n\ntype Overrides = {\n  paginationTextLabels?: boolean\n  /** Forces small-size rendering independent of the config's own `size`. */\n  isSmall?: boolean\n}\n\ntype Props = Expand<PaginationProps & { paginationTextLabels?: boolean }>\n\nconst renderIconButton = (\n  icon: React.ReactNode,\n  isSmall: boolean,\n  customClassName?: string\n) => (\n  <Button\n    type=\"link\"\n    size={isSmall ? 'small' : 'middle'}\n    className={cx(customClassName, isSmall ? '!w-6' : '!w-8')}\n  >\n    {icon}\n  </Button>\n)\n\nconst renderJumpItem = (\n  icon: React.ReactNode,\n  doubleIcon: React.ReactNode,\n  isSmall: boolean\n) => (\n  <a className=\"ant-pagination-item-link\">\n    <div className=\"ant-pagination-item-container\">\n      <span className=\"ant-pagination-item-ellipsis\">\n        {renderIconButton(icon, isSmall, s['jump-button'])}\n      </span>\n      <span className=\"ant-pagination-item-link-icon\">\n        {renderIconButton(doubleIcon, isSmall, s['jump-button'])}\n      </span>\n    </div>\n  </a>\n)\n\nconst buildItemRender =\n  ({ paginationTextLabels, isSmall }: Required<Overrides>) =>\n  (\n    _page: number,\n    type: 'page' | 'prev' | 'next' | 'jump-prev' | 'jump-next',\n    element: React.ReactNode\n  ) => {\n    if (type === 'prev') {\n      return (\n        <a>\n          {paginationTextLabels\n            ? 'Previous'\n            : renderIconButton(<CaretLeftIcon />, isSmall)}\n        </a>\n      )\n    }\n    if (type === 'next') {\n      return (\n        <a>\n          {paginationTextLabels\n            ? 'Next'\n            : renderIconButton(<CaretRightIcon />, isSmall)}\n        </a>\n      )\n    }\n    if (type === 'jump-prev') {\n      return renderJumpItem(<DotsThreeIcon />, <CaretDoubleLeftIcon />, isSmall)\n    }\n    if (type === 'jump-next') {\n      return renderJumpItem(\n        <DotsThreeIcon />,\n        <CaretDoubleRightIcon />,\n        isSmall\n      )\n    }\n    return element\n  }\n\nconst paginationSelectComponentClass = (selectProps: SelectProps) => (\n  <Select {...selectProps} suffixIcon={<CaretDownIcon />} />\n)\n\nconst getPaginationLocale = (isSmall: boolean) => ({\n  jump_to: `Go to\\u00A0${isSmall ? ':\\u00A0\\u00A0\\u00A0' : ''}`,\n  page: isSmall ? '' : 'page',\n})\n\n/**\n * Applies design-system overrides (Phosphor icons, locale, custom select\n * chrome) to an antd Pagination config. Used by the standalone\n * {@link Pagination} component, and by `<Table>`'s `pagination` prop so\n * both share identical visuals.\n */\nexport const withDesignSystemPaginationOverrides = (\n  pagination: PaginationProps,\n  { paginationTextLabels = false, isSmall }: Overrides = {}\n): PaginationProps => {\n  const small = isSmall ?? pagination.size === 'small'\n  return {\n    ...pagination,\n    locale: { ...getPaginationLocale(small), ...pagination.locale },\n    selectComponentClass: paginationSelectComponentClass,\n    itemRender: buildItemRender({\n      paginationTextLabels,\n      isSmall: small,\n    }),\n  }\n}\n\nconst Pagination = ({ paginationTextLabels = false, ...props }: Props) => {\n  const enriched = withDesignSystemPaginationOverrides(props, {\n    paginationTextLabels,\n  })\n  return <AntdPagination {...enriched} />\n}\n\nexport { Pagination }\n"],"names":["jsx","Button","jsxs","s","CaretLeftIcon","CaretRightIcon","DotsThreeIcon","CaretDoubleLeftIcon","CaretDoubleRightIcon","Select","CaretDownIcon","AntdPagination"],"mappings":";;;;;;;AA2BA,MAAM,mBAAmB,CACvB,MACA,SACA,oBAEAA,2BAAAA;AAAAA,EAACC,KAAAA;AAAAA,EAAA;AAAA,IACC,MAAK;AAAA,IACL,MAAM,UAAU,UAAU;AAAA,IAC1B,WAAW,GAAG,iBAAiB,UAAU,SAAS,MAAM;AAAA,IAEvD,UAAA;AAAA,EAAA;AACH;AAGF,MAAM,iBAAiB,CACrB,MACA,YACA,YAEAD,2BAAAA,IAAC,KAAA,EAAE,WAAU,4BACX,UAAAE,2BAAAA,KAAC,OAAA,EAAI,WAAU,iCACb,UAAA;AAAA,EAAAF,2BAAAA,IAAC,QAAA,EAAK,WAAU,gCACb,UAAA,iBAAiB,MAAM,SAASG,kBAAE,aAAa,CAAC,EAAA,CACnD;AAAA,EACAH,2BAAAA,IAAC,QAAA,EAAK,WAAU,iCACb,UAAA,iBAAiB,YAAY,SAASG,kBAAE,aAAa,CAAC,EAAA,CACzD;AAAA,EAAA,CACF,EAAA,CACF;AAGF,MAAM,kBACJ,CAAC,EAAE,sBAAsB,cACzB,CACE,OACA,MACA,YACG;AACH,MAAI,SAAS,QAAQ;AACnB,WACEH,2BAAAA,IAAC,OACE,UAAA,uBACG,aACA,iBAAiBA,2BAAAA,IAACI,MAAAA,eAAA,CAAA,CAAc,GAAI,OAAO,EAAA,CACjD;AAAA,EAEJ;AACA,MAAI,SAAS,QAAQ;AACnB,WACEJ,2BAAAA,IAAC,OACE,UAAA,uBACG,SACA,iBAAiBA,2BAAAA,IAACK,MAAAA,gBAAA,CAAA,CAAe,GAAI,OAAO,EAAA,CAClD;AAAA,EAEJ;AACA,MAAI,SAAS,aAAa;AACxB,WAAO,eAAeL,+BAACM,MAAAA,eAAA,CAAA,CAAc,GAAIN,2BAAAA,IAACO,MAAAA,qBAAA,EAAoB,GAAI,OAAO;AAAA,EAC3E;AACA,MAAI,SAAS,aAAa;AACxB,WAAO;AAAA,qCACJD,MAAAA,eAAA,EAAc;AAAA,qCACdE,MAAAA,sBAAA,EAAqB;AAAA,MACtB;AAAA,IAAA;AAAA,EAEJ;AACA,SAAO;AACT;AAEF,MAAM,iCAAiC,CAAC,gBACtCR,2BAAAA,IAACS,KAAAA,QAAA,EAAQ,GAAG,aAAa,YAAYT,2BAAAA,IAACU,qBAAA,CAAA,CAAc,EAAA,CAAI;AAG1D,MAAM,sBAAsB,CAAC,aAAsB;AAAA,EACjD,SAAS,SAAc,UAAU,SAAwB,EAAE;AAAA,EAC3D,MAAM,UAAU,KAAK;AACvB;AAQO,MAAM,sCAAsC,CACjD,YACA,EAAE,uBAAuB,OAAO,QAAA,IAAuB,OACnC;AACpB,QAAM,QAAQ,WAAW,WAAW,SAAS;AAC7C,SAAO;AAAA,IACL,GAAG;AAAA,IACH,QAAQ,EAAE,GAAG,oBAAoB,KAAK,GAAG,GAAG,WAAW,OAAA;AAAA,IACvD,sBAAsB;AAAA,IACtB,YAAY,gBAAgB;AAAA,MAC1B;AAAA,MACA,SAAS;AAAA,IAAA,CACV;AAAA,EAAA;AAEL;AAEA,MAAM,aAAa,CAAC,EAAE,uBAAuB,OAAO,GAAG,YAAmB;AACxE,QAAM,WAAW,oCAAoC,OAAO;AAAA,IAC1D;AAAA,EAAA,CACD;AACD,SAAOV,+BAACW,KAAAA,YAAA,EAAgB,GAAG,SAAA,CAAU;AACvC;;;"}
+{"version":3,"file":"Pagination.cjs","sources":["../../../../src/components/pagination/Pagination.tsx"],"sourcesContent":["import {\n  Pagination as AntdPagination,\n  PaginationProps,\n  Button,\n  Select,\n  SelectProps,\n} from 'antd'\nimport cx from 'classnames'\nimport {\n  CaretLeftIcon,\n  CaretRightIcon,\n  CaretDownIcon,\n  DotsThreeIcon,\n  CaretDoubleLeftIcon,\n  CaretDoubleRightIcon,\n} from '@phosphor-icons/react'\n\nimport s from './Pagination.module.css'\n\ntype Overrides = {\n  paginationTextLabels?: boolean\n  /** Forces small-size rendering independent of the config's own `size`. */\n  isSmall?: boolean\n}\n\ntype Props = Expand<PaginationProps & { paginationTextLabels?: boolean }>\n\nconst renderIconButton = (\n  icon: React.ReactNode,\n  isSmall: boolean,\n  customClassName?: string\n) => (\n  <Button\n    type=\"link\"\n    size={isSmall ? 'small' : 'middle'}\n    className={cx(customClassName, isSmall ? '!w-6' : '!w-8')}\n  >\n    {icon}\n  </Button>\n)\n\nconst renderJumpItem = (\n  icon: React.ReactNode,\n  doubleIcon: React.ReactNode,\n  isSmall: boolean\n) => (\n  <a className=\"ant-pagination-item-link\">\n    <div className=\"ant-pagination-item-container\">\n      <span className=\"ant-pagination-item-ellipsis\">\n        {renderIconButton(icon, isSmall, s['jump-button'])}\n      </span>\n      <span className=\"ant-pagination-item-link-icon\">\n        {renderIconButton(doubleIcon, isSmall, s['jump-button'])}\n      </span>\n    </div>\n  </a>\n)\n\nconst buildItemRender =\n  ({ paginationTextLabels, isSmall }: Required<Overrides>) =>\n  (\n    _page: number,\n    type: 'page' | 'prev' | 'next' | 'jump-prev' | 'jump-next',\n    element: React.ReactNode\n  ) => {\n    if (type === 'prev') {\n      return (\n        <a>\n          {paginationTextLabels\n            ? 'Previous'\n            : renderIconButton(<CaretLeftIcon />, isSmall)}\n        </a>\n      )\n    }\n    if (type === 'next') {\n      return (\n        <a>\n          {paginationTextLabels\n            ? 'Next'\n            : renderIconButton(<CaretRightIcon />, isSmall)}\n        </a>\n      )\n    }\n    if (type === 'jump-prev') {\n      return renderJumpItem(<DotsThreeIcon />, <CaretDoubleLeftIcon />, isSmall)\n    }\n    if (type === 'jump-next') {\n      return renderJumpItem(\n        <DotsThreeIcon />,\n        <CaretDoubleRightIcon />,\n        isSmall\n      )\n    }\n    return element\n  }\n\nconst paginationSelectComponentClass = (selectProps: SelectProps) => (\n  <Select {...selectProps} suffixIcon={<CaretDownIcon />} />\n)\n\nconst getPaginationLocale = (isSmall: boolean) => ({\n  jump_to: `Go to\\u00A0${isSmall ? ':\\u00A0\\u00A0\\u00A0' : ''}`,\n  page: isSmall ? '' : 'page',\n})\n\n/**\n * Applies design-system overrides (Phosphor icons, locale, custom select\n * chrome) to an antd Pagination config. Used by the standalone\n * {@link Pagination} component, and by `<Table>`'s `pagination` prop so\n * both share identical visuals.\n */\nexport const withDesignSystemPaginationOverrides = (\n  pagination: PaginationProps,\n  { paginationTextLabels = false, isSmall }: Overrides = {}\n): PaginationProps => {\n  const small = isSmall ?? pagination.size === 'small'\n  return {\n    ...pagination,\n    locale: { ...getPaginationLocale(small), ...pagination.locale },\n    // Keep antd in charge of visibility (including Table's filtered total).\n    // showSizeChanger's SelectProps alternative would force it visible.\n    selectComponentClass: paginationSelectComponentClass,\n    itemRender: buildItemRender({\n      paginationTextLabels,\n      isSmall: small,\n    }),\n  }\n}\n\nconst Pagination = ({ paginationTextLabels = false, ...props }: Props) => {\n  const enriched = withDesignSystemPaginationOverrides(props, {\n    paginationTextLabels,\n  })\n  return <AntdPagination {...enriched} />\n}\n\nexport { Pagination }\n"],"names":["jsx","Button","jsxs","s","CaretLeftIcon","CaretRightIcon","DotsThreeIcon","CaretDoubleLeftIcon","CaretDoubleRightIcon","Select","CaretDownIcon","AntdPagination"],"mappings":";;;;;;;AA2BA,MAAM,mBAAmB,CACvB,MACA,SACA,oBAEAA,2BAAAA;AAAAA,EAACC,KAAAA;AAAAA,EAAA;AAAA,IACC,MAAK;AAAA,IACL,MAAM,UAAU,UAAU;AAAA,IAC1B,WAAW,GAAG,iBAAiB,UAAU,SAAS,MAAM;AAAA,IAEvD,UAAA;AAAA,EAAA;AACH;AAGF,MAAM,iBAAiB,CACrB,MACA,YACA,YAEAD,2BAAAA,IAAC,KAAA,EAAE,WAAU,4BACX,UAAAE,2BAAAA,KAAC,OAAA,EAAI,WAAU,iCACb,UAAA;AAAA,EAAAF,2BAAAA,IAAC,QAAA,EAAK,WAAU,gCACb,UAAA,iBAAiB,MAAM,SAASG,kBAAE,aAAa,CAAC,EAAA,CACnD;AAAA,EACAH,2BAAAA,IAAC,QAAA,EAAK,WAAU,iCACb,UAAA,iBAAiB,YAAY,SAASG,kBAAE,aAAa,CAAC,EAAA,CACzD;AAAA,EAAA,CACF,EAAA,CACF;AAGF,MAAM,kBACJ,CAAC,EAAE,sBAAsB,cACzB,CACE,OACA,MACA,YACG;AACH,MAAI,SAAS,QAAQ;AACnB,WACEH,2BAAAA,IAAC,OACE,UAAA,uBACG,aACA,iBAAiBA,2BAAAA,IAACI,MAAAA,eAAA,CAAA,CAAc,GAAI,OAAO,EAAA,CACjD;AAAA,EAEJ;AACA,MAAI,SAAS,QAAQ;AACnB,WACEJ,2BAAAA,IAAC,OACE,UAAA,uBACG,SACA,iBAAiBA,2BAAAA,IAACK,MAAAA,gBAAA,CAAA,CAAe,GAAI,OAAO,EAAA,CAClD;AAAA,EAEJ;AACA,MAAI,SAAS,aAAa;AACxB,WAAO,eAAeL,+BAACM,MAAAA,eAAA,CAAA,CAAc,GAAIN,2BAAAA,IAACO,MAAAA,qBAAA,EAAoB,GAAI,OAAO;AAAA,EAC3E;AACA,MAAI,SAAS,aAAa;AACxB,WAAO;AAAA,qCACJD,MAAAA,eAAA,EAAc;AAAA,qCACdE,MAAAA,sBAAA,EAAqB;AAAA,MACtB;AAAA,IAAA;AAAA,EAEJ;AACA,SAAO;AACT;AAEF,MAAM,iCAAiC,CAAC,gBACtCR,2BAAAA,IAACS,KAAAA,QAAA,EAAQ,GAAG,aAAa,YAAYT,2BAAAA,IAACU,qBAAA,CAAA,CAAc,EAAA,CAAI;AAG1D,MAAM,sBAAsB,CAAC,aAAsB;AAAA,EACjD,SAAS,SAAc,UAAU,SAAwB,EAAE;AAAA,EAC3D,MAAM,UAAU,KAAK;AACvB;AAQO,MAAM,sCAAsC,CACjD,YACA,EAAE,uBAAuB,OAAO,QAAA,IAAuB,OACnC;AACpB,QAAM,QAAQ,WAAW,WAAW,SAAS;AAC7C,SAAO;AAAA,IACL,GAAG;AAAA,IACH,QAAQ,EAAE,GAAG,oBAAoB,KAAK,GAAG,GAAG,WAAW,OAAA;AAAA;AAAA;AAAA,IAGvD,sBAAsB;AAAA,IACtB,YAAY,gBAAgB;AAAA,MAC1B;AAAA,MACA,SAAS;AAAA,IAAA,CACV;AAAA,EAAA;AAEL;AAEA,MAAM,aAAa,CAAC,EAAE,uBAAuB,OAAO,GAAG,YAAmB;AACxE,QAAM,WAAW,oCAAoC,OAAO;AAAA,IAC1D;AAAA,EAAA,CACD;AACD,SAAOV,+BAACW,KAAAA,YAAA,EAAgB,GAAG,SAAA,CAAU;AACvC;;;"}

package/dist/src/components/pagination/Pagination.js

@@ -45,6 +45,8 @@ const withDesignSystemPaginationOverrides = (pagination, { paginationTextLabels
   return {
     ...pagination,
     locale: { ...getPaginationLocale(small), ...pagination.locale },
+    // Keep antd in charge of visibility (including Table's filtered total).
+    // showSizeChanger's SelectProps alternative would force it visible.
     selectComponentClass: paginationSelectComponentClass,
     itemRender: buildItemRender({
       paginationTextLabels,

package/dist/src/components/pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","sources":["../../../../src/components/pagination/Pagination.tsx"],"sourcesContent":["import {\n  Pagination as AntdPagination,\n  PaginationProps,\n  Select,\n  SelectProps,\n  Button,\n} from 'antd'\nimport cx from 'classnames'\nimport {\n  CaretLeftIcon,\n  CaretRightIcon,\n  CaretDownIcon,\n  DotsThreeIcon,\n  CaretDoubleLeftIcon,\n  CaretDoubleRightIcon,\n} from '@phosphor-icons/react'\n\nimport s from './Pagination.module.css'\n\ntype Overrides = {\n  paginationTextLabels?: boolean\n  /** Forces small-size rendering independent of the config's own `size`. */\n  isSmall?: boolean\n}\n\ntype Props = Expand<PaginationProps & { paginationTextLabels?: boolean }>\n\nconst renderIconButton = (\n  icon: React.ReactNode,\n  isSmall: boolean,\n  customClassName?: string\n) => (\n  <Button\n    type=\"link\"\n    size={isSmall ? 'small' : 'middle'}\n    className={cx(customClassName, isSmall ? '!w-6' : '!w-8')}\n  >\n    {icon}\n  </Button>\n)\n\nconst renderJumpItem = (\n  icon: React.ReactNode,\n  doubleIcon: React.ReactNode,\n  isSmall: boolean\n) => (\n  <a className=\"ant-pagination-item-link\">\n    <div className=\"ant-pagination-item-container\">\n      <span className=\"ant-pagination-item-ellipsis\">\n        {renderIconButton(icon, isSmall, s['jump-button'])}\n      </span>\n      <span className=\"ant-pagination-item-link-icon\">\n        {renderIconButton(doubleIcon, isSmall, s['jump-button'])}\n      </span>\n    </div>\n  </a>\n)\n\nconst buildItemRender =\n  ({ paginationTextLabels, isSmall }: Required<Overrides>) =>\n  (\n    _page: number,\n    type: 'page' | 'prev' | 'next' | 'jump-prev' | 'jump-next',\n    element: React.ReactNode\n  ) => {\n    if (type === 'prev') {\n      return (\n        <a>\n          {paginationTextLabels\n            ? 'Previous'\n            : renderIconButton(<CaretLeftIcon />, isSmall)}\n        </a>\n      )\n    }\n    if (type === 'next') {\n      return (\n        <a>\n          {paginationTextLabels\n            ? 'Next'\n            : renderIconButton(<CaretRightIcon />, isSmall)}\n        </a>\n      )\n    }\n    if (type === 'jump-prev') {\n      return renderJumpItem(<DotsThreeIcon />, <CaretDoubleLeftIcon />, isSmall)\n    }\n    if (type === 'jump-next') {\n      return renderJumpItem(\n        <DotsThreeIcon />,\n        <CaretDoubleRightIcon />,\n        isSmall\n      )\n    }\n    return element\n  }\n\nconst paginationSelectComponentClass = (selectProps: SelectProps) => (\n  <Select {...selectProps} suffixIcon={<CaretDownIcon />} />\n)\n\nconst getPaginationLocale = (isSmall: boolean) => ({\n  jump_to: `Go to\\u00A0${isSmall ? ':\\u00A0\\u00A0\\u00A0' : ''}`,\n  page: isSmall ? '' : 'page',\n})\n\n/**\n * Applies design-system overrides (Phosphor icons, locale, custom select\n * chrome) to an antd Pagination config. Used by the standalone\n * {@link Pagination} component, and by `<Table>`'s `pagination` prop so\n * both share identical visuals.\n */\nexport const withDesignSystemPaginationOverrides = (\n  pagination: PaginationProps,\n  { paginationTextLabels = false, isSmall }: Overrides = {}\n): PaginationProps => {\n  const small = isSmall ?? pagination.size === 'small'\n  return {\n    ...pagination,\n    locale: { ...getPaginationLocale(small), ...pagination.locale },\n    selectComponentClass: paginationSelectComponentClass,\n    itemRender: buildItemRender({\n      paginationTextLabels,\n      isSmall: small,\n    }),\n  }\n}\n\nconst Pagination = ({ paginationTextLabels = false, ...props }: Props) => {\n  const enriched = withDesignSystemPaginationOverrides(props, {\n    paginationTextLabels,\n  })\n  return <AntdPagination {...enriched} />\n}\n\nexport { Pagination }\n"],"names":["AntdPagination"],"mappings":";;;;;AA2BA,MAAM,mBAAmB,CACvB,MACA,SACA,oBAEA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,MAAK;AAAA,IACL,MAAM,UAAU,UAAU;AAAA,IAC1B,WAAW,GAAG,iBAAiB,UAAU,SAAS,MAAM;AAAA,IAEvD,UAAA;AAAA,EAAA;AACH;AAGF,MAAM,iBAAiB,CACrB,MACA,YACA,YAEA,oBAAC,KAAA,EAAE,WAAU,4BACX,UAAA,qBAAC,OAAA,EAAI,WAAU,iCACb,UAAA;AAAA,EAAA,oBAAC,QAAA,EAAK,WAAU,gCACb,UAAA,iBAAiB,MAAM,SAAS,EAAE,aAAa,CAAC,EAAA,CACnD;AAAA,EACA,oBAAC,QAAA,EAAK,WAAU,iCACb,UAAA,iBAAiB,YAAY,SAAS,EAAE,aAAa,CAAC,EAAA,CACzD;AAAA,EAAA,CACF,EAAA,CACF;AAGF,MAAM,kBACJ,CAAC,EAAE,sBAAsB,cACzB,CACE,OACA,MACA,YACG;AACH,MAAI,SAAS,QAAQ;AACnB,WACE,oBAAC,OACE,UAAA,uBACG,aACA,iBAAiB,oBAAC,eAAA,CAAA,CAAc,GAAI,OAAO,EAAA,CACjD;AAAA,EAEJ;AACA,MAAI,SAAS,QAAQ;AACnB,WACE,oBAAC,OACE,UAAA,uBACG,SACA,iBAAiB,oBAAC,gBAAA,CAAA,CAAe,GAAI,OAAO,EAAA,CAClD;AAAA,EAEJ;AACA,MAAI,SAAS,aAAa;AACxB,WAAO,eAAe,oBAAC,eAAA,CAAA,CAAc,GAAI,oBAAC,qBAAA,EAAoB,GAAI,OAAO;AAAA,EAC3E;AACA,MAAI,SAAS,aAAa;AACxB,WAAO;AAAA,0BACJ,eAAA,EAAc;AAAA,0BACd,sBAAA,EAAqB;AAAA,MACtB;AAAA,IAAA;AAAA,EAEJ;AACA,SAAO;AACT;AAEF,MAAM,iCAAiC,CAAC,gBACtC,oBAAC,QAAA,EAAQ,GAAG,aAAa,YAAY,oBAAC,eAAA,CAAA,CAAc,EAAA,CAAI;AAG1D,MAAM,sBAAsB,CAAC,aAAsB;AAAA,EACjD,SAAS,SAAc,UAAU,SAAwB,EAAE;AAAA,EAC3D,MAAM,UAAU,KAAK;AACvB;AAQO,MAAM,sCAAsC,CACjD,YACA,EAAE,uBAAuB,OAAO,QAAA,IAAuB,OACnC;AACpB,QAAM,QAAQ,WAAW,WAAW,SAAS;AAC7C,SAAO;AAAA,IACL,GAAG;AAAA,IACH,QAAQ,EAAE,GAAG,oBAAoB,KAAK,GAAG,GAAG,WAAW,OAAA;AAAA,IACvD,sBAAsB;AAAA,IACtB,YAAY,gBAAgB;AAAA,MAC1B;AAAA,MACA,SAAS;AAAA,IAAA,CACV;AAAA,EAAA;AAEL;AAEA,MAAM,aAAa,CAAC,EAAE,uBAAuB,OAAO,GAAG,YAAmB;AACxE,QAAM,WAAW,oCAAoC,OAAO;AAAA,IAC1D;AAAA,EAAA,CACD;AACD,SAAO,oBAACA,cAAA,EAAgB,GAAG,SAAA,CAAU;AACvC;"}
+{"version":3,"file":"Pagination.js","sources":["../../../../src/components/pagination/Pagination.tsx"],"sourcesContent":["import {\n  Pagination as AntdPagination,\n  PaginationProps,\n  Button,\n  Select,\n  SelectProps,\n} from 'antd'\nimport cx from 'classnames'\nimport {\n  CaretLeftIcon,\n  CaretRightIcon,\n  CaretDownIcon,\n  DotsThreeIcon,\n  CaretDoubleLeftIcon,\n  CaretDoubleRightIcon,\n} from '@phosphor-icons/react'\n\nimport s from './Pagination.module.css'\n\ntype Overrides = {\n  paginationTextLabels?: boolean\n  /** Forces small-size rendering independent of the config's own `size`. */\n  isSmall?: boolean\n}\n\ntype Props = Expand<PaginationProps & { paginationTextLabels?: boolean }>\n\nconst renderIconButton = (\n  icon: React.ReactNode,\n  isSmall: boolean,\n  customClassName?: string\n) => (\n  <Button\n    type=\"link\"\n    size={isSmall ? 'small' : 'middle'}\n    className={cx(customClassName, isSmall ? '!w-6' : '!w-8')}\n  >\n    {icon}\n  </Button>\n)\n\nconst renderJumpItem = (\n  icon: React.ReactNode,\n  doubleIcon: React.ReactNode,\n  isSmall: boolean\n) => (\n  <a className=\"ant-pagination-item-link\">\n    <div className=\"ant-pagination-item-container\">\n      <span className=\"ant-pagination-item-ellipsis\">\n        {renderIconButton(icon, isSmall, s['jump-button'])}\n      </span>\n      <span className=\"ant-pagination-item-link-icon\">\n        {renderIconButton(doubleIcon, isSmall, s['jump-button'])}\n      </span>\n    </div>\n  </a>\n)\n\nconst buildItemRender =\n  ({ paginationTextLabels, isSmall }: Required<Overrides>) =>\n  (\n    _page: number,\n    type: 'page' | 'prev' | 'next' | 'jump-prev' | 'jump-next',\n    element: React.ReactNode\n  ) => {\n    if (type === 'prev') {\n      return (\n        <a>\n          {paginationTextLabels\n            ? 'Previous'\n            : renderIconButton(<CaretLeftIcon />, isSmall)}\n        </a>\n      )\n    }\n    if (type === 'next') {\n      return (\n        <a>\n          {paginationTextLabels\n            ? 'Next'\n            : renderIconButton(<CaretRightIcon />, isSmall)}\n        </a>\n      )\n    }\n    if (type === 'jump-prev') {\n      return renderJumpItem(<DotsThreeIcon />, <CaretDoubleLeftIcon />, isSmall)\n    }\n    if (type === 'jump-next') {\n      return renderJumpItem(\n        <DotsThreeIcon />,\n        <CaretDoubleRightIcon />,\n        isSmall\n      )\n    }\n    return element\n  }\n\nconst paginationSelectComponentClass = (selectProps: SelectProps) => (\n  <Select {...selectProps} suffixIcon={<CaretDownIcon />} />\n)\n\nconst getPaginationLocale = (isSmall: boolean) => ({\n  jump_to: `Go to\\u00A0${isSmall ? ':\\u00A0\\u00A0\\u00A0' : ''}`,\n  page: isSmall ? '' : 'page',\n})\n\n/**\n * Applies design-system overrides (Phosphor icons, locale, custom select\n * chrome) to an antd Pagination config. Used by the standalone\n * {@link Pagination} component, and by `<Table>`'s `pagination` prop so\n * both share identical visuals.\n */\nexport const withDesignSystemPaginationOverrides = (\n  pagination: PaginationProps,\n  { paginationTextLabels = false, isSmall }: Overrides = {}\n): PaginationProps => {\n  const small = isSmall ?? pagination.size === 'small'\n  return {\n    ...pagination,\n    locale: { ...getPaginationLocale(small), ...pagination.locale },\n    // Keep antd in charge of visibility (including Table's filtered total).\n    // showSizeChanger's SelectProps alternative would force it visible.\n    selectComponentClass: paginationSelectComponentClass,\n    itemRender: buildItemRender({\n      paginationTextLabels,\n      isSmall: small,\n    }),\n  }\n}\n\nconst Pagination = ({ paginationTextLabels = false, ...props }: Props) => {\n  const enriched = withDesignSystemPaginationOverrides(props, {\n    paginationTextLabels,\n  })\n  return <AntdPagination {...enriched} />\n}\n\nexport { Pagination }\n"],"names":["AntdPagination"],"mappings":";;;;;AA2BA,MAAM,mBAAmB,CACvB,MACA,SACA,oBAEA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,MAAK;AAAA,IACL,MAAM,UAAU,UAAU;AAAA,IAC1B,WAAW,GAAG,iBAAiB,UAAU,SAAS,MAAM;AAAA,IAEvD,UAAA;AAAA,EAAA;AACH;AAGF,MAAM,iBAAiB,CACrB,MACA,YACA,YAEA,oBAAC,KAAA,EAAE,WAAU,4BACX,UAAA,qBAAC,OAAA,EAAI,WAAU,iCACb,UAAA;AAAA,EAAA,oBAAC,QAAA,EAAK,WAAU,gCACb,UAAA,iBAAiB,MAAM,SAAS,EAAE,aAAa,CAAC,EAAA,CACnD;AAAA,EACA,oBAAC,QAAA,EAAK,WAAU,iCACb,UAAA,iBAAiB,YAAY,SAAS,EAAE,aAAa,CAAC,EAAA,CACzD;AAAA,EAAA,CACF,EAAA,CACF;AAGF,MAAM,kBACJ,CAAC,EAAE,sBAAsB,cACzB,CACE,OACA,MACA,YACG;AACH,MAAI,SAAS,QAAQ;AACnB,WACE,oBAAC,OACE,UAAA,uBACG,aACA,iBAAiB,oBAAC,eAAA,CAAA,CAAc,GAAI,OAAO,EAAA,CACjD;AAAA,EAEJ;AACA,MAAI,SAAS,QAAQ;AACnB,WACE,oBAAC,OACE,UAAA,uBACG,SACA,iBAAiB,oBAAC,gBAAA,CAAA,CAAe,GAAI,OAAO,EAAA,CAClD;AAAA,EAEJ;AACA,MAAI,SAAS,aAAa;AACxB,WAAO,eAAe,oBAAC,eAAA,CAAA,CAAc,GAAI,oBAAC,qBAAA,EAAoB,GAAI,OAAO;AAAA,EAC3E;AACA,MAAI,SAAS,aAAa;AACxB,WAAO;AAAA,0BACJ,eAAA,EAAc;AAAA,0BACd,sBAAA,EAAqB;AAAA,MACtB;AAAA,IAAA;AAAA,EAEJ;AACA,SAAO;AACT;AAEF,MAAM,iCAAiC,CAAC,gBACtC,oBAAC,QAAA,EAAQ,GAAG,aAAa,YAAY,oBAAC,eAAA,CAAA,CAAc,EAAA,CAAI;AAG1D,MAAM,sBAAsB,CAAC,aAAsB;AAAA,EACjD,SAAS,SAAc,UAAU,SAAwB,EAAE;AAAA,EAC3D,MAAM,UAAU,KAAK;AACvB;AAQO,MAAM,sCAAsC,CACjD,YACA,EAAE,uBAAuB,OAAO,QAAA,IAAuB,OACnC;AACpB,QAAM,QAAQ,WAAW,WAAW,SAAS;AAC7C,SAAO;AAAA,IACL,GAAG;AAAA,IACH,QAAQ,EAAE,GAAG,oBAAoB,KAAK,GAAG,GAAG,WAAW,OAAA;AAAA;AAAA;AAAA,IAGvD,sBAAsB;AAAA,IACtB,YAAY,gBAAgB;AAAA,MAC1B;AAAA,MACA,SAAS;AAAA,IAAA,CACV;AAAA,EAAA;AAEL;AAEA,MAAM,aAAa,CAAC,EAAE,uBAAuB,OAAO,GAAG,YAAmB;AACxE,QAAM,WAAW,oCAAoC,OAAO;AAAA,IAC1D;AAAA,EAAA,CACD;AACD,SAAO,oBAACA,cAAA,EAAgB,GAAG,SAAA,CAAU;AACvC;"}

package/dist/src/components/popover/Popover.cjs

@@ -13,12 +13,14 @@ const Popover = ({
   smallPadding = false,
   paddingSize,
   arrow = false,
+  rootClassName,
   ...props
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     antd.Popover,
     {
-      overlayClassName: cx(
+      rootClassName: cx(
+        rootClassName,
         Popover_module.default.j2Popover,
         scrollable && Popover_module.default.scrollable,
         smallPadding && Popover_module.default.smallPadding,