@j2-health/design-system 0.4.0 → 0.5.1

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/menu/Menu.d.ts

@@ -2,6 +2,6 @@ import { MenuProps as AntdMenuProps } from 'antd';
 type Props = Expand<AntdMenuProps> & {
     compact?: boolean;
 };
-declare const Menu: ({ compact, ...props }: Props) => import("react").JSX.Element;
+declare const Menu: ({ compact, ...props }: Props) => import('react').JSX.Element;
 export { Menu };
 export type { Props as MenuProps };

package/dist/src/components/modal/Modal.d.ts

@@ -2,5 +2,5 @@ import { ModalProps } from 'antd';
 export type Props = {
     withContentPadding?: boolean;
 } & Expand<ModalProps>;
-declare const Modal: ({ open, title, children, onCancel, withContentPadding: withPadding, ...props }: Props) => import("react").JSX.Element;
+declare const Modal: ({ open, title, children, onCancel, withContentPadding: withPadding, ...props }: Props) => import('react').JSX.Element;
 export { Modal };

package/dist/src/components/notificationModal/NotificationModal.d.ts

@@ -7,5 +7,5 @@ export type NotificationModalProps = {
 } & Omit<ModalProps, 'title'> & {
     title?: ReactNode;
 };
-declare const NotificationModal: ({ type, title, children, withContentPadding, ...props }: NotificationModalProps) => import("react").JSX.Element;
+declare const NotificationModal: ({ type, title, children, withContentPadding, ...props }: NotificationModalProps) => import('react').JSX.Element;
 export { NotificationModal };

package/dist/src/components/pagination/Pagination.d.ts

@@ -14,5 +14,5 @@ type Props = Expand<PaginationProps & {
  * both share identical visuals.
  */
 export declare const withDesignSystemPaginationOverrides: (pagination: PaginationProps, { paginationTextLabels, isSmall }?: Overrides) => PaginationProps;
-declare const Pagination: ({ paginationTextLabels, ...props }: Props) => import("react").JSX.Element;
+declare const Pagination: ({ paginationTextLabels, ...props }: Props) => import('react').JSX.Element;
 export { Pagination };

package/dist/src/components/popover/Popover.d.ts

@@ -6,5 +6,5 @@ type _Props = AntdPopoverProps & {
     paddingSize?: 'xxs' | 'xs' | 'sm' | 'md' | 'xl';
 };
 export type PopoverProps = Expand<_Props>;
-declare const Popover: ({ children, placement, scrollable, contentPadding, content, smallPadding, paddingSize, arrow, rootClassName, ...props }: PopoverProps) => import("react").JSX.Element;
+declare const Popover: ({ children, placement, scrollable, contentPadding, content, smallPadding, paddingSize, arrow, rootClassName, ...props }: PopoverProps) => import('react').JSX.Element;
 export { Popover };

package/dist/src/components/progress/Progress.d.ts

@@ -1,3 +1,3 @@
 import { ProgressProps } from 'antd';
-declare const Progress: ({ ...props }: ProgressProps) => import("react").JSX.Element;
+declare const Progress: ({ ...props }: ProgressProps) => import('react').JSX.Element;
 export { Progress };

package/dist/src/components/radio/Radio.d.ts

@@ -5,6 +5,6 @@ type FullRadioGroupProps = AntdRadioGroupProps & {
     optionType?: 'default' | 'button';
 };
 type RadioGroupProps = Expand<FullRadioGroupProps>;
-declare const Radio: (props: RadioProps) => import("react").JSX.Element;
-declare const RadioGroup: ({ buttonStyle, optionType, ...props }: RadioGroupProps) => import("react").JSX.Element;
+declare const Radio: (props: RadioProps) => import('react').JSX.Element;
+declare const RadioGroup: ({ buttonStyle, optionType, ...props }: RadioGroupProps) => import('react').JSX.Element;
 export { Radio, RadioGroup };

package/dist/src/components/rate/Rate.d.ts

@@ -1,3 +1,3 @@
 import { RateProps } from 'antd';
 export type Props = Expand<RateProps>;
-export declare const Rate: ({ count, ...props }: Props) => import("react").JSX.Element;
+export declare const Rate: ({ count, ...props }: Props) => import('react').JSX.Element;

package/dist/src/components/select/SummarizedSelect.cjs

@@ -121,7 +121,7 @@ function SummarizedSelect({
       }
     } else {
       onChange(optionValue);
-      setIsOpen(false);
+      handleOpenChange(false);
     }
   };
   const handleOptionClick = (optionValue) => {
@@ -133,7 +133,7 @@ function SummarizedSelect({
       }
     } else {
       onChange(optionValue);
-      setIsOpen(false);
+      handleOpenChange(false);
     }
   };
   const handleKeyDown = (e) => {
@@ -147,7 +147,7 @@ function SummarizedSelect({
     if (e.key === "Escape") {
       e.preventDefault();
       e.stopPropagation();
-      setIsOpen(false);
+      handleOpenChange(false);
       return;
     }
     if (navigationKeys.includes(e.key)) {
@@ -221,7 +221,7 @@ function SummarizedSelect({
             [SummarizedSelect_module.default.headlinedMenuContainer]: isHeadline,
             [SummarizedSelect_module.default.menuContainerMultiple]: multiple
           }),
-          children: menu
+          children: /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: menu }, searchValue)
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-between items-center", children: multiple && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full mt-1 pt-1 border-t border-j2-border-secondary", children: /* @__PURE__ */ jsxRuntime.jsx(