@epilot/zenith-react 0.2.0-next.6 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/_virtual/_zenith-runtime-family_accordion.js +1 -1
- package/dist/_virtual/_zenith-runtime-family_alert-dialog.js +1 -1
- package/dist/_virtual/_zenith-runtime-family_avatar.js +1 -1
- package/dist/_virtual/_zenith-runtime-family_button.js +1 -1
- package/dist/_virtual/_zenith-runtime-family_checkbox.js +1 -1
- package/dist/_virtual/_zenith-runtime-family_csp-provider.js +1 -1
- package/dist/_virtual/_zenith-runtime-family_dialog.js +1 -1
- package/dist/_virtual/_zenith-runtime-family_direction-provider.js +1 -1
- package/dist/_virtual/_zenith-runtime-family_menu.js +1 -1
- package/dist/_virtual/_zenith-runtime-family_merge-props.js +1 -1
- package/dist/_virtual/_zenith-runtime-family_popover.js +1 -1
- package/dist/_virtual/_zenith-runtime-family_radio-group.js +1 -1
- package/dist/_virtual/_zenith-runtime-family_radio.js +1 -1
- package/dist/_virtual/_zenith-runtime-family_scroll-area.js +1 -1
- package/dist/_virtual/_zenith-runtime-family_select.js +1 -1
- package/dist/_virtual/_zenith-runtime-family_separator.js +1 -1
- package/dist/_virtual/_zenith-runtime-family_switch.js +1 -1
- package/dist/_virtual/_zenith-runtime-family_tabs.js +1 -1
- package/dist/_virtual/_zenith-runtime-family_toast.js +1 -1
- package/dist/_virtual/_zenith-runtime-family_toggle-group.js +1 -1
- package/dist/_virtual/_zenith-runtime-family_toggle.js +1 -1
- package/dist/_virtual/_zenith-runtime-family_tooltip.js +1 -1
- package/dist/_virtual/_zenith-runtime-family_use-render.js +1 -1
- package/dist/components/accordion/accordion.js +1 -1
- package/dist/components/accordion/accordion.js.map +1 -1
- package/dist/components/alert-dialog/alert-dialog.js +1 -1
- package/dist/components/alert-dialog/alert-dialog.js.map +1 -1
- package/dist/components/appearance-boundary/appearance-boundary.js +1 -1
- package/dist/components/appearance-boundary/appearance-boundary.js.map +1 -1
- package/dist/components/avatar/avatar-group.js +1 -1
- package/dist/components/avatar/avatar-group.js.map +1 -1
- package/dist/components/avatar/avatar.js +1 -1
- package/dist/components/avatar/avatar.js.map +1 -1
- package/dist/components/badge/badge.js +1 -1
- package/dist/components/badge/badge.js.map +1 -1
- package/dist/components/breadcrumb/breadcrumb.js +1 -1
- package/dist/components/breadcrumb/breadcrumb.js.map +1 -1
- package/dist/components/button/button.js +1 -1
- package/dist/components/button/button.js.map +1 -1
- package/dist/components/button-group/button-group.js +1 -1
- package/dist/components/button-group/button-group.js.map +1 -1
- package/dist/components/callout/callout.js +1 -1
- package/dist/components/callout/callout.js.map +1 -1
- package/dist/components/card/card.js +1 -1
- package/dist/components/card/card.js.map +1 -1
- package/dist/components/checkbox/checkbox.js +41 -39
- package/dist/components/checkbox/checkbox.js.map +1 -1
- package/dist/components/code-block/code-block.js +1 -1
- package/dist/components/code-block/code-block.js.map +1 -1
- package/dist/components/code-editor/code-editor.js +1 -1
- package/dist/components/code-editor/code-editor.js.map +1 -1
- package/dist/components/collapsible-sidebar/collapsible-sidebar.js +1 -1
- package/dist/components/collapsible-sidebar/collapsible-sidebar.js.map +1 -1
- package/dist/components/command/command.js +1 -1
- package/dist/components/command/command.js.map +1 -1
- package/dist/components/data-table/data-table-body.js +1 -1
- package/dist/components/data-table/data-table-body.js.map +1 -1
- package/dist/components/data-table/data-table-column-header.js +1 -1
- package/dist/components/data-table/data-table-column-header.js.map +1 -1
- package/dist/components/data-table/data-table-column-order.js +1 -1
- package/dist/components/data-table/data-table-column-order.js.map +1 -1
- package/dist/components/data-table/data-table-column-visibility.js +1 -1
- package/dist/components/data-table/data-table-column-visibility.js.map +1 -1
- package/dist/components/data-table/data-table-content.js +1 -1
- package/dist/components/data-table/data-table-content.js.map +1 -1
- package/dist/components/data-table/data-table-error.js +1 -1
- package/dist/components/data-table/data-table-error.js.map +1 -1
- package/dist/components/data-table/data-table-footer.js +1 -1
- package/dist/components/data-table/data-table-footer.js.map +1 -1
- package/dist/components/data-table/data-table-header-draggable.js +1 -1
- package/dist/components/data-table/data-table-header-draggable.js.map +1 -1
- package/dist/components/data-table/data-table-header.js +1 -1
- package/dist/components/data-table/data-table-header.js.map +1 -1
- package/dist/components/data-table/data-table-loading.js +1 -1
- package/dist/components/data-table/data-table-loading.js.map +1 -1
- package/dist/components/data-table/data-table-resize-handle.js +1 -1
- package/dist/components/data-table/data-table-resize-handle.js.map +1 -1
- package/dist/components/data-table/data-table-row.js +1 -1
- package/dist/components/data-table/data-table-row.js.map +1 -1
- package/dist/components/data-table/data-table-toolbar.js +1 -1
- package/dist/components/data-table/data-table-toolbar.js.map +1 -1
- package/dist/components/data-table/data-table.js +1 -1
- package/dist/components/data-table/data-table.js.map +1 -1
- package/dist/components/date-range-picker/date-range-picker.js +1 -1
- package/dist/components/date-range-picker/date-range-picker.js.map +1 -1
- package/dist/components/date-range-picker/range-calendar.js +1 -1
- package/dist/components/date-range-picker/range-calendar.js.map +1 -1
- package/dist/components/date-time-picker/calendar.js +1 -1
- package/dist/components/date-time-picker/calendar.js.map +1 -1
- package/dist/components/date-time-picker/date-time-picker-input.js +1 -1
- package/dist/components/date-time-picker/date-time-picker-input.js.map +1 -1
- package/dist/components/date-time-picker/date-time-picker-panel.js +1 -1
- package/dist/components/date-time-picker/date-time-picker-panel.js.map +1 -1
- package/dist/components/date-time-picker/date-time-picker.js +1 -1
- package/dist/components/date-time-picker/date-time-picker.js.map +1 -1
- package/dist/components/date-time-picker/time-picker.js +1 -1
- package/dist/components/date-time-picker/time-picker.js.map +1 -1
- package/dist/components/density-provider/density-provider.js +1 -1
- package/dist/components/dialog/dialog.js +1 -1
- package/dist/components/dialog/dialog.js.map +1 -1
- package/dist/components/drawer/drawer.js +1 -1
- package/dist/components/drawer/drawer.js.map +1 -1
- package/dist/components/dropdown-menu/dropdown-menu.js +1 -1
- package/dist/components/dropdown-menu/dropdown-menu.js.map +1 -1
- package/dist/components/field/field-combobox.js +1 -1
- package/dist/components/field/field-combobox.js.map +1 -1
- package/dist/components/field/field-select.js +1 -1
- package/dist/components/field/field-select.js.map +1 -1
- package/dist/components/field/field.js +1 -1
- package/dist/components/field/field.js.map +1 -1
- package/dist/components/label/label.js +1 -1
- package/dist/components/label/label.js.map +1 -1
- package/dist/components/list/list.js +1 -1
- package/dist/components/list/list.js.map +1 -1
- package/dist/components/option-card/option-card.js +1 -1
- package/dist/components/option-card/option-card.js.map +1 -1
- package/dist/components/pill/pill.js +1 -1
- package/dist/components/pill/pill.js.map +1 -1
- package/dist/components/popover/popover.js +1 -1
- package/dist/components/popover/popover.js.map +1 -1
- package/dist/components/radio/radio.js +15 -12
- package/dist/components/radio/radio.js.map +1 -1
- package/dist/components/scroll-area/scroll-area.js +1 -1
- package/dist/components/scroll-area/scroll-area.js.map +1 -1
- package/dist/components/scroll-area/scrollbar-styles.js +1 -1
- package/dist/components/scroll-area/scrollbar-styles.js.map +1 -1
- package/dist/components/scroll-overflow/scroll-overflow.js +1 -1
- package/dist/components/scroll-overflow/scroll-overflow.js.map +1 -1
- package/dist/components/segmented-control/segmented-control.js +1 -1
- package/dist/components/segmented-control/segmented-control.js.map +1 -1
- package/dist/components/select/select.js +178 -176
- package/dist/components/select/select.js.map +1 -1
- package/dist/components/separator/separator.js +1 -1
- package/dist/components/separator/separator.js.map +1 -1
- package/dist/components/skeleton/skeleton.js +1 -1
- package/dist/components/skeleton/skeleton.js.map +1 -1
- package/dist/components/slot/compose-as-child.js +1 -1
- package/dist/components/slot/compose-as-child.js.map +1 -1
- package/dist/components/spinner/spinner.js +1 -1
- package/dist/components/spinner/spinner.js.map +1 -1
- package/dist/components/surface/surface.js +1 -1
- package/dist/components/surface/surface.js.map +1 -1
- package/dist/components/switch/switch.js +59 -57
- package/dist/components/switch/switch.js.map +1 -1
- package/dist/components/table/table-pagination.js +1 -1
- package/dist/components/table/table-pagination.js.map +1 -1
- package/dist/components/table/table.js +1 -1
- package/dist/components/table/table.js.map +1 -1
- package/dist/components/tabs/tabs.js +1 -1
- package/dist/components/tabs/tabs.js.map +1 -1
- package/dist/components/text/text.js +1 -1
- package/dist/components/text/text.js.map +1 -1
- package/dist/components/toast/toast.js +1 -1
- package/dist/components/toast/toast.js.map +1 -1
- package/dist/components/toggle/toggle-group.js +1 -1
- package/dist/components/toggle/toggle-group.js.map +1 -1
- package/dist/components/toggle/toggle.js +1 -1
- package/dist/components/toggle/toggle.js.map +1 -1
- package/dist/components/tooltip/tooltip.js +1 -1
- package/dist/components/tooltip/tooltip.js.map +1 -1
- package/dist/index.js +1 -1
- package/dist/lib/clear-button.js +1 -1
- package/dist/lib/clear-button.js.map +1 -1
- package/dist/lib/hidden-input-box.js +26 -0
- package/dist/lib/hidden-input-box.js.map +1 -0
- package/dist/packages/tokens/dist/delivery/index.js +1 -1
- package/dist/packages/tokens/dist/delivery/index.js.map +1 -1
- package/dist/packages/tokens/dist/install.js +1 -1
- package/dist/packages/tokens/dist/install.js.map +1 -1
- package/dist/renderer/served.js +1 -1
- package/dist/renderer/served.js.map +1 -1
- package/dist/styles/host-reset.js.map +1 -1
- package/dist/styles/make-styles.js +1 -1
- package/dist/styles/make-styles.js.map +1 -1
- package/dist/styles/text-box.js.map +1 -1
- package/dist/tokens.json +1 -1
- package/package.json +3 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data-table-column-header.js","sources":["../../../src/components/data-table/data-table-column-header.tsx"],"sourcesContent":["import * as React from \"react\"\nimport type { SVGProps } from \"react\"\nimport type { Column } from \"@tanstack/react-table\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1
|
|
1
|
+
{"version":3,"file":"data-table-column-header.js","sources":["../../../src/components/data-table/data-table-column-header.tsx"],"sourcesContent":["import * as React from \"react\"\nimport type { SVGProps } from \"react\"\nimport type { Column } from \"@tanstack/react-table\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel } from \"../../styles/host-reset\"\nimport * as tokens from \"../../tokens\"\n\n// Sort icons\nconst IconArrowUp = (props: SVGProps<SVGSVGElement>) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n {...props}\n >\n <path d=\"m5 12 7-7 7 7\" />\n <path d=\"M12 19V5\" />\n </svg>\n)\n\nconst IconArrowDown = (props: SVGProps<SVGSVGElement>) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n {...props}\n >\n <path d=\"M12 5v14\" />\n <path d=\"m19 12-7 7-7-7\" />\n </svg>\n)\n\nconst IconArrowsSort = (props: SVGProps<SVGSVGElement>) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n {...props}\n >\n <path d=\"m7 15 5 5 5-5\" />\n <path d=\"m7 9 5-5 5 5\" />\n </svg>\n)\n\nconst useStyles = makeZenithStyles({\n button: {\n ...boxModel,\n display: \"inline-flex\",\n alignItems: \"center\",\n gap: tokens.spacingElement1,\n ...shorthands.paddingBlock(\"0.125rem\"),\n ...shorthands.paddingInline(tokens.spacingElement1),\n ...shorthands.borderRadius(tokens.radiusLg),\n cursor: \"pointer\",\n transitionProperty: \"color, background-color, border-color\",\n transitionDuration: \"150ms\",\n \":hover\": {\n backgroundColor: tokens.accentSoft,\n },\n \":focus-visible\": {\n outlineWidth: \"2px\",\n outlineStyle: \"solid\",\n outlineOffset: \"2px\",\n outlineColor: tokens.accentA8,\n },\n },\n iconActive: {\n ...boxModel,\n width: \"1rem\",\n height: \"1rem\",\n color: tokens.accent11,\n flexShrink: 0,\n },\n iconUnsorted: {\n ...boxModel,\n width: \"1rem\",\n height: \"1rem\",\n opacity: 0.4,\n flexShrink: 0,\n },\n})\n\nexport type DataTableColumnHeaderProps<TData = unknown, TValue = unknown> = {\n /** The column instance from Tanstack Table */\n column: Column<TData, TValue>\n /** The header title to display */\n title: string\n /** Additional class name */\n className?: string\n}\n\nfunction DataTableColumnHeaderInner<TData, TValue>(\n { column, title, className }: DataTableColumnHeaderProps<TData, TValue>,\n ref: React.ForwardedRef<HTMLSpanElement>\n) {\n const styles = useStyles()\n\n if (!column.getCanSort()) {\n return (\n <span ref={ref} className={className}>\n {title}\n </span>\n )\n }\n\n return (\n <span\n ref={ref}\n role=\"button\"\n tabIndex={0}\n data-slot=\"data-table-column-header\"\n {...{ [SLOT_ATTR]: \"data-table-column-header\" }}\n data-fs-element=\"DataTable-SortButton\"\n onClick={() => column.toggleSorting()}\n onKeyDown={(e) => {\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault()\n column.toggleSorting()\n }\n }}\n aria-label={\n column.getIsSorted() === \"asc\"\n ? `${title}, sorted ascending. Click to sort descending.`\n : column.getIsSorted() === \"desc\"\n ? `${title}, sorted descending. Click to remove sorting.`\n : `${title}. Click to sort ascending.`\n }\n className={mergeClasses(styles.button, className)}\n >\n {title}\n {column.getIsSorted() === \"asc\" && (\n <IconArrowUp className={styles.iconActive} />\n )}\n {column.getIsSorted() === \"desc\" && (\n <IconArrowDown className={styles.iconActive} />\n )}\n {!column.getIsSorted() && (\n <IconArrowsSort className={styles.iconUnsorted} />\n )}\n </span>\n )\n}\n\nexport const DataTableColumnHeader = React.forwardRef(\n DataTableColumnHeaderInner\n) as <TData = unknown, TValue = unknown>(\n props: DataTableColumnHeaderProps<TData, TValue> & {\n ref?: React.Ref<HTMLSpanElement>\n }\n) => React.ReactElement | null\n"],"names":["IconArrowUp","props","jsxs","jsx","IconArrowDown","IconArrowsSort","useStyles","makeZenithStyles","boxModel","tokens.spacingElement1","shorthands","tokens.radiusLg","tokens.accentSoft","tokens.accentA8","tokens.accent11","DataTableColumnHeaderInner","column","title","className","ref","styles","SLOT_ATTR","e","mergeClasses","DataTableColumnHeader","React"],"mappings":"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"}
|
|
@@ -4,7 +4,7 @@ import { useCallback as M } from "react";
|
|
|
4
4
|
import { useSensors as E, useSensor as T, DndContext as L, closestCenter as R, KeyboardSensor as k, PointerSensor as B } from "../../vendor/.bun/@dnd-kit_core@6.3.1_6f4b9a1cfb20c0ae/vendor/@dnd-kit/core/dist/core.esm.js";
|
|
5
5
|
import { arrayMove as _, SortableContext as G, verticalListSortingStrategy as z, sortableKeyboardCoordinates as Z, useSortable as j } from "../../vendor/.bun/@dnd-kit_sortable@10.0.0_1d291640e1250bbe/vendor/@dnd-kit/sortable/dist/sortable.esm.js";
|
|
6
6
|
import { CSS as F } from "../../vendor/.bun/@dnd-kit_utilities@3.2.2_62547eec5a2188e3/vendor/@dnd-kit/utilities/dist/utilities.esm.js";
|
|
7
|
-
import { SLOT_ATTR as x, shorthands as d, mergeClasses as K } from "@epilot/zenith-runtime/v1
|
|
7
|
+
import { SLOT_ATTR as x, shorthands as d, mergeClasses as K } from "@epilot/zenith-runtime/v1";
|
|
8
8
|
import { makeZenithStyles as V } from "../../styles/make-styles.js";
|
|
9
9
|
import { nativeControl as W, boxModel as C } from "../../styles/host-reset.js";
|
|
10
10
|
import { accentA8 as X, grayA12 as H, grayA8 as P, grayA3 as $, leadingSm as q, textSm as J, spacingElement2 as w, radiusSm as Q } from "../../tokens/index.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data-table-column-order.js","sources":["../../../src/components/data-table/data-table-column-order.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { useCallback } from \"react\"\nimport type { ComponentProps, ReactNode, SVGProps } from \"react\"\nimport { type Column } from \"@tanstack/react-table\"\nimport {\n DndContext,\n closestCenter,\n KeyboardSensor,\n PointerSensor,\n useSensor,\n useSensors,\n type Announcements,\n type DragEndEvent,\n type ScreenReaderInstructions,\n} from \"@dnd-kit/core\"\nimport {\n SortableContext,\n verticalListSortingStrategy,\n arrayMove,\n useSortable,\n sortableKeyboardCoordinates,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1/core\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel, nativeControl } from \"../../styles/host-reset\"\nimport * as tokens from \"../../tokens\"\nimport { Button } from \"../button/button\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"../dropdown-menu/dropdown-menu\"\nimport { useDataTable } from \"./hooks/use-data-table\"\n\n// Swap vertical icon (default trigger icon)\nconst IconSwapVertical = (props: SVGProps<SVGSVGElement>) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 -960 960 960\"\n fill=\"currentColor\"\n {...props}\n >\n <path d=\"M320-440v-287l-76 76-44-44 150-150 150 150-44 44-76-76v287h-60ZM560-155 410-305l44-44 76 76v-287h60v287l76-76 44 44L560-155Z\" />\n </svg>\n)\n\n// Grip vertical icon (drag handle)\nconst IconGripVertical = (props: SVGProps<SVGSVGElement>) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n {...props}\n >\n <circle cx=\"9\" cy=\"5\" r=\"1.5\" />\n <circle cx=\"15\" cy=\"5\" r=\"1.5\" />\n <circle cx=\"9\" cy=\"12\" r=\"1.5\" />\n <circle cx=\"15\" cy=\"12\" r=\"1.5\" />\n <circle cx=\"9\" cy=\"19\" r=\"1.5\" />\n <circle cx=\"15\" cy=\"19\" r=\"1.5\" />\n </svg>\n)\n\nconst useStyles = makeZenithStyles({\n icon: {\n ...boxModel,\n width: \"1rem\",\n height: \"1rem\",\n },\n gripIcon: {\n ...boxModel,\n width: \"14px\",\n height: \"14px\",\n },\n srOnly: {\n ...boxModel,\n position: \"absolute\",\n width: \"1px\",\n height: \"1px\",\n ...shorthands.padding(0),\n ...shorthands.margin(\"-1px\"),\n ...shorthands.overflow(\"hidden\"),\n clip: \"rect(0, 0, 0, 0)\",\n whiteSpace: \"nowrap\",\n },\n item: {\n ...boxModel,\n display: \"flex\",\n alignItems: \"center\",\n ...shorthands.gap(tokens.spacingElement2),\n ...shorthands.borderRadius(tokens.radiusSm),\n paddingLeft: tokens.spacingElement2,\n paddingRight: tokens.spacingElement2,\n paddingTop: \"6px\",\n paddingBottom: \"6px\",\n fontSize: tokens.textSm,\n lineHeight: tokens.leadingSm,\n },\n itemDragging: {\n zIndex: 50,\n backgroundColor: tokens.grayA3,\n opacity: 0.8,\n },\n dragHandle: {\n ...nativeControl,\n display: \"inline-flex\",\n flexShrink: 0,\n cursor: \"grab\",\n touchAction: \"none\",\n alignItems: \"center\",\n color: tokens.grayA8,\n backgroundColor: \"transparent\",\n ...shorthands.borderWidth(0),\n ...shorthands.padding(0),\n \"&:hover\": {\n color: tokens.grayA12,\n },\n \"&:focus-visible\": {\n outlineWidth: \"2px\",\n outlineStyle: \"solid\",\n outlineOffset: \"2px\",\n outlineColor: tokens.accentA8,\n },\n \"&:active\": {\n cursor: \"grabbing\",\n },\n },\n itemLabel: {\n userSelect: \"none\",\n },\n})\n\nexport type DataTableColumnOrderProps = {\n /** Custom icon for the default trigger button. Falls back to swap-vertical icon. */\n icon?: ReactNode\n /** Custom trigger element. Defaults to an icon button. */\n trigger?: ReactNode\n /** Label shown at top of dropdown and as screen reader text for default trigger. Required for i18n. */\n label: string\n /** Accessible label for the drag handle buttons. Recommended for i18n and accessibility. Receives column label as parameter. */\n dragHandleLabel?: string | ((columnLabel: string) => string)\n /** Custom screen reader announcements for drag-and-drop operations. */\n announcements?: Announcements\n /** Custom screen reader instructions for draggable items. */\n screenReaderInstructions?: ScreenReaderInstructions\n /** Additional class name for the dropdown content */\n contentClassName?: string\n /** Alignment of dropdown relative to trigger. Default: \"end\" */\n align?: \"start\" | \"center\" | \"end\"\n} & Omit<ComponentProps<typeof DropdownMenu>, \"children\">\n\n/** Sortable item inside the column order dropdown */\nfunction DataTableColumnOrderItem({\n column,\n dragHandleLabel,\n}: {\n column: Column<unknown, unknown>\n dragHandleLabel?: string | ((columnLabel: string) => string)\n}) {\n const styles = useStyles()\n const {\n attributes,\n listeners,\n setNodeRef,\n transform,\n transition,\n isDragging,\n } = useSortable({ id: column.id })\n\n const meta = column.columnDef.meta as { visibilityLabel?: string } | undefined\n const label =\n meta?.visibilityLabel ??\n (typeof column.columnDef.header === \"string\"\n ? column.columnDef.header\n : column.id)\n\n const resolvedDragHandleLabel = dragHandleLabel\n ? typeof dragHandleLabel === \"function\"\n ? dragHandleLabel(label)\n : dragHandleLabel\n : `Drag to reorder ${label}`\n\n return (\n <div\n ref={setNodeRef}\n style={{\n transform: CSS.Transform.toString(transform),\n transition,\n }}\n className={mergeClasses(styles.item, isDragging && styles.itemDragging)}\n data-slot=\"data-table-column-order-item\"\n {...{ [SLOT_ATTR]: \"data-table-column-order-item\" }}\n data-fs-element=\"DataTable-ColumnOrder-Item\"\n >\n <button\n type=\"button\"\n className={styles.dragHandle}\n data-slot=\"data-table-column-order-drag-handle\"\n {...{ [SLOT_ATTR]: \"data-table-column-order-drag-handle\" }}\n aria-label={resolvedDragHandleLabel}\n {...attributes}\n {...listeners}\n >\n <IconGripVertical className={styles.gripIcon} />\n </button>\n <span\n className={styles.itemLabel}\n data-slot=\"data-table-column-order-item-label\"\n {...{ [SLOT_ATTR]: \"data-table-column-order-item-label\" }}\n >\n {label}\n </span>\n </div>\n )\n}\n\n/**\n * Inner list component that provides the DnD context.\n * Separated to avoid hook rules issues with early returns.\n */\nfunction DataTableColumnOrderList({\n columns,\n currentOrder,\n table,\n dragHandleLabel,\n announcements,\n screenReaderInstructions,\n}: {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n columns: Column<any, unknown>[]\n currentOrder: string[]\n table: { setColumnOrder: (order: string[]) => void }\n dragHandleLabel?: string | ((columnLabel: string) => string)\n announcements?: Announcements\n screenReaderInstructions?: ScreenReaderInstructions\n}) {\n const sensors = useSensors(\n useSensor(PointerSensor, {\n activationConstraint: { distance: 3 },\n }),\n useSensor(KeyboardSensor, {\n coordinateGetter: sortableKeyboardCoordinates,\n })\n )\n\n const handleDragEnd = useCallback(\n (event: DragEndEvent) => {\n const { active, over } = event\n if (!over || active.id === over.id) return\n\n const oldIndex = currentOrder.indexOf(active.id as string)\n const newIndex = currentOrder.indexOf(over.id as string)\n\n if (oldIndex === -1 || newIndex === -1) return\n\n const newOrder = arrayMove(currentOrder, oldIndex, newIndex)\n table.setColumnOrder(newOrder)\n },\n [currentOrder, table]\n )\n\n return (\n <DndContext\n sensors={sensors}\n collisionDetection={closestCenter}\n onDragEnd={handleDragEnd}\n accessibility={{\n announcements,\n screenReaderInstructions,\n }}\n >\n <SortableContext\n items={columns.map((c) => c.id)}\n strategy={verticalListSortingStrategy}\n >\n {columns.map((col) => (\n <DataTableColumnOrderItem\n key={col.id}\n column={col}\n dragHandleLabel={dragHandleLabel}\n />\n ))}\n </SortableContext>\n </DndContext>\n )\n}\n\n/**\n * A dropdown menu for reordering columns in DataTable via drag-and-drop.\n * Shows a draggable list of columns that can be rearranged.\n * Place in DataTableToolbar for consistent layout.\n */\nexport const DataTableColumnOrder = React.forwardRef<\n HTMLElement,\n DataTableColumnOrderProps\n>(function DataTableColumnOrder(\n {\n icon,\n trigger,\n label,\n dragHandleLabel,\n announcements,\n screenReaderInstructions,\n contentClassName,\n align = \"end\",\n ...props\n },\n ref\n) {\n const styles = useStyles()\n const { table } = useDataTable()\n\n // Get reorderable columns (exclude selection column, respect meta.enableOrdering)\n const allColumns = table.getAllLeafColumns()\n const reorderableColumns = allColumns.filter((col) => {\n if (col.id === \"select\") return false\n const meta = col.columnDef.meta as { enableOrdering?: boolean } | undefined\n return meta?.enableOrdering !== false\n })\n\n // If no reorderable columns, don't render\n if (reorderableColumns.length === 0) {\n return null\n }\n\n // Current order (derive from columns if columnOrder state is empty)\n const currentOrder =\n table.getState().columnOrder && table.getState().columnOrder.length > 0\n ? table.getState().columnOrder\n : allColumns.map((c) => c.id)\n\n // Sort reorderable columns by their position in currentOrder\n const orderedColumns = [...reorderableColumns].sort((a, b) => {\n const indexA = currentOrder.indexOf(a.id)\n const indexB = currentOrder.indexOf(b.id)\n return (\n (indexA === -1 ? Number.MAX_SAFE_INTEGER : indexA) -\n (indexB === -1 ? Number.MAX_SAFE_INTEGER : indexB)\n )\n })\n\n return (\n <DropdownMenu ref={ref} {...props}>\n <DropdownMenuTrigger asChild>\n {trigger ?? (\n <Button\n variant=\"tertiary\"\n size=\"sm\"\n data-slot=\"data-table-column-order-trigger\"\n {...{ [SLOT_ATTR]: \"data-table-column-order-trigger\" }}\n data-fs-element=\"DataTable-ColumnOrder-Trigger\"\n >\n {icon ?? <IconSwapVertical className={styles.icon} />}\n <span className={styles.srOnly}>{label}</span>\n </Button>\n )}\n </DropdownMenuTrigger>\n <DropdownMenuContent\n align={align}\n className={contentClassName}\n data-slot=\"data-table-column-order-content\"\n {...{ [SLOT_ATTR]: \"data-table-column-order-content\" }}\n data-fs-element=\"DataTable-ColumnOrder-Content\"\n >\n <DropdownMenuLabel>{label}</DropdownMenuLabel>\n <DropdownMenuSeparator />\n <DataTableColumnOrderList\n columns={orderedColumns}\n currentOrder={currentOrder}\n table={table}\n dragHandleLabel={dragHandleLabel}\n announcements={announcements}\n screenReaderInstructions={screenReaderInstructions}\n />\n </DropdownMenuContent>\n </DropdownMenu>\n )\n})\n"],"names":["IconSwapVertical","props","jsx","IconGripVertical","jsxs","useStyles","makeZenithStyles","boxModel","shorthands","tokens.spacingElement2","tokens.radiusSm","tokens.textSm","tokens.leadingSm","tokens.grayA3","nativeControl","tokens.grayA8","tokens.grayA12","tokens.accentA8","DataTableColumnOrderItem","column","dragHandleLabel","styles","attributes","listeners","setNodeRef","transform","transition","isDragging","useSortable","meta","label","resolvedDragHandleLabel","CSS","mergeClasses","SLOT_ATTR","DataTableColumnOrderList","columns","currentOrder","table","announcements","screenReaderInstructions","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","sortableKeyboardCoordinates","handleDragEnd","useCallback","event","active","over","oldIndex","newIndex","newOrder","arrayMove","DndContext","closestCenter","SortableContext","c","verticalListSortingStrategy","col","DataTableColumnOrder","React","icon","trigger","contentClassName","align","ref","useDataTable","allColumns","reorderableColumns","orderedColumns","a","b","indexA","indexB","DropdownMenu","DropdownMenuTrigger","Button","DropdownMenuContent","DropdownMenuLabel","DropdownMenuSeparator"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"data-table-column-order.js","sources":["../../../src/components/data-table/data-table-column-order.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { useCallback } from \"react\"\nimport type { ComponentProps, ReactNode, SVGProps } from \"react\"\nimport { type Column } from \"@tanstack/react-table\"\nimport {\n DndContext,\n closestCenter,\n KeyboardSensor,\n PointerSensor,\n useSensor,\n useSensors,\n type Announcements,\n type DragEndEvent,\n type ScreenReaderInstructions,\n} from \"@dnd-kit/core\"\nimport {\n SortableContext,\n verticalListSortingStrategy,\n arrayMove,\n useSortable,\n sortableKeyboardCoordinates,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel, nativeControl } from \"../../styles/host-reset\"\nimport * as tokens from \"../../tokens\"\nimport { Button } from \"../button/button\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"../dropdown-menu/dropdown-menu\"\nimport { useDataTable } from \"./hooks/use-data-table\"\n\n// Swap vertical icon (default trigger icon)\nconst IconSwapVertical = (props: SVGProps<SVGSVGElement>) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 -960 960 960\"\n fill=\"currentColor\"\n {...props}\n >\n <path d=\"M320-440v-287l-76 76-44-44 150-150 150 150-44 44-76-76v287h-60ZM560-155 410-305l44-44 76 76v-287h60v287l76-76 44 44L560-155Z\" />\n </svg>\n)\n\n// Grip vertical icon (drag handle)\nconst IconGripVertical = (props: SVGProps<SVGSVGElement>) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n {...props}\n >\n <circle cx=\"9\" cy=\"5\" r=\"1.5\" />\n <circle cx=\"15\" cy=\"5\" r=\"1.5\" />\n <circle cx=\"9\" cy=\"12\" r=\"1.5\" />\n <circle cx=\"15\" cy=\"12\" r=\"1.5\" />\n <circle cx=\"9\" cy=\"19\" r=\"1.5\" />\n <circle cx=\"15\" cy=\"19\" r=\"1.5\" />\n </svg>\n)\n\nconst useStyles = makeZenithStyles({\n icon: {\n ...boxModel,\n width: \"1rem\",\n height: \"1rem\",\n },\n gripIcon: {\n ...boxModel,\n width: \"14px\",\n height: \"14px\",\n },\n srOnly: {\n ...boxModel,\n position: \"absolute\",\n width: \"1px\",\n height: \"1px\",\n ...shorthands.padding(0),\n ...shorthands.margin(\"-1px\"),\n ...shorthands.overflow(\"hidden\"),\n clip: \"rect(0, 0, 0, 0)\",\n whiteSpace: \"nowrap\",\n },\n item: {\n ...boxModel,\n display: \"flex\",\n alignItems: \"center\",\n ...shorthands.gap(tokens.spacingElement2),\n ...shorthands.borderRadius(tokens.radiusSm),\n paddingLeft: tokens.spacingElement2,\n paddingRight: tokens.spacingElement2,\n paddingTop: \"6px\",\n paddingBottom: \"6px\",\n fontSize: tokens.textSm,\n lineHeight: tokens.leadingSm,\n },\n itemDragging: {\n zIndex: 50,\n backgroundColor: tokens.grayA3,\n opacity: 0.8,\n },\n dragHandle: {\n ...nativeControl,\n display: \"inline-flex\",\n flexShrink: 0,\n cursor: \"grab\",\n touchAction: \"none\",\n alignItems: \"center\",\n color: tokens.grayA8,\n backgroundColor: \"transparent\",\n ...shorthands.borderWidth(0),\n ...shorthands.padding(0),\n \"&:hover\": {\n color: tokens.grayA12,\n },\n \"&:focus-visible\": {\n outlineWidth: \"2px\",\n outlineStyle: \"solid\",\n outlineOffset: \"2px\",\n outlineColor: tokens.accentA8,\n },\n \"&:active\": {\n cursor: \"grabbing\",\n },\n },\n itemLabel: {\n userSelect: \"none\",\n },\n})\n\nexport type DataTableColumnOrderProps = {\n /** Custom icon for the default trigger button. Falls back to swap-vertical icon. */\n icon?: ReactNode\n /** Custom trigger element. Defaults to an icon button. */\n trigger?: ReactNode\n /** Label shown at top of dropdown and as screen reader text for default trigger. Required for i18n. */\n label: string\n /** Accessible label for the drag handle buttons. Recommended for i18n and accessibility. Receives column label as parameter. */\n dragHandleLabel?: string | ((columnLabel: string) => string)\n /** Custom screen reader announcements for drag-and-drop operations. */\n announcements?: Announcements\n /** Custom screen reader instructions for draggable items. */\n screenReaderInstructions?: ScreenReaderInstructions\n /** Additional class name for the dropdown content */\n contentClassName?: string\n /** Alignment of dropdown relative to trigger. Default: \"end\" */\n align?: \"start\" | \"center\" | \"end\"\n} & Omit<ComponentProps<typeof DropdownMenu>, \"children\">\n\n/** Sortable item inside the column order dropdown */\nfunction DataTableColumnOrderItem({\n column,\n dragHandleLabel,\n}: {\n column: Column<unknown, unknown>\n dragHandleLabel?: string | ((columnLabel: string) => string)\n}) {\n const styles = useStyles()\n const {\n attributes,\n listeners,\n setNodeRef,\n transform,\n transition,\n isDragging,\n } = useSortable({ id: column.id })\n\n const meta = column.columnDef.meta as { visibilityLabel?: string } | undefined\n const label =\n meta?.visibilityLabel ??\n (typeof column.columnDef.header === \"string\"\n ? column.columnDef.header\n : column.id)\n\n const resolvedDragHandleLabel = dragHandleLabel\n ? typeof dragHandleLabel === \"function\"\n ? dragHandleLabel(label)\n : dragHandleLabel\n : `Drag to reorder ${label}`\n\n return (\n <div\n ref={setNodeRef}\n style={{\n transform: CSS.Transform.toString(transform),\n transition,\n }}\n className={mergeClasses(styles.item, isDragging && styles.itemDragging)}\n data-slot=\"data-table-column-order-item\"\n {...{ [SLOT_ATTR]: \"data-table-column-order-item\" }}\n data-fs-element=\"DataTable-ColumnOrder-Item\"\n >\n <button\n type=\"button\"\n className={styles.dragHandle}\n data-slot=\"data-table-column-order-drag-handle\"\n {...{ [SLOT_ATTR]: \"data-table-column-order-drag-handle\" }}\n aria-label={resolvedDragHandleLabel}\n {...attributes}\n {...listeners}\n >\n <IconGripVertical className={styles.gripIcon} />\n </button>\n <span\n className={styles.itemLabel}\n data-slot=\"data-table-column-order-item-label\"\n {...{ [SLOT_ATTR]: \"data-table-column-order-item-label\" }}\n >\n {label}\n </span>\n </div>\n )\n}\n\n/**\n * Inner list component that provides the DnD context.\n * Separated to avoid hook rules issues with early returns.\n */\nfunction DataTableColumnOrderList({\n columns,\n currentOrder,\n table,\n dragHandleLabel,\n announcements,\n screenReaderInstructions,\n}: {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n columns: Column<any, unknown>[]\n currentOrder: string[]\n table: { setColumnOrder: (order: string[]) => void }\n dragHandleLabel?: string | ((columnLabel: string) => string)\n announcements?: Announcements\n screenReaderInstructions?: ScreenReaderInstructions\n}) {\n const sensors = useSensors(\n useSensor(PointerSensor, {\n activationConstraint: { distance: 3 },\n }),\n useSensor(KeyboardSensor, {\n coordinateGetter: sortableKeyboardCoordinates,\n })\n )\n\n const handleDragEnd = useCallback(\n (event: DragEndEvent) => {\n const { active, over } = event\n if (!over || active.id === over.id) return\n\n const oldIndex = currentOrder.indexOf(active.id as string)\n const newIndex = currentOrder.indexOf(over.id as string)\n\n if (oldIndex === -1 || newIndex === -1) return\n\n const newOrder = arrayMove(currentOrder, oldIndex, newIndex)\n table.setColumnOrder(newOrder)\n },\n [currentOrder, table]\n )\n\n return (\n <DndContext\n sensors={sensors}\n collisionDetection={closestCenter}\n onDragEnd={handleDragEnd}\n accessibility={{\n announcements,\n screenReaderInstructions,\n }}\n >\n <SortableContext\n items={columns.map((c) => c.id)}\n strategy={verticalListSortingStrategy}\n >\n {columns.map((col) => (\n <DataTableColumnOrderItem\n key={col.id}\n column={col}\n dragHandleLabel={dragHandleLabel}\n />\n ))}\n </SortableContext>\n </DndContext>\n )\n}\n\n/**\n * A dropdown menu for reordering columns in DataTable via drag-and-drop.\n * Shows a draggable list of columns that can be rearranged.\n * Place in DataTableToolbar for consistent layout.\n */\nexport const DataTableColumnOrder = React.forwardRef<\n HTMLElement,\n DataTableColumnOrderProps\n>(function DataTableColumnOrder(\n {\n icon,\n trigger,\n label,\n dragHandleLabel,\n announcements,\n screenReaderInstructions,\n contentClassName,\n align = \"end\",\n ...props\n },\n ref\n) {\n const styles = useStyles()\n const { table } = useDataTable()\n\n // Get reorderable columns (exclude selection column, respect meta.enableOrdering)\n const allColumns = table.getAllLeafColumns()\n const reorderableColumns = allColumns.filter((col) => {\n if (col.id === \"select\") return false\n const meta = col.columnDef.meta as { enableOrdering?: boolean } | undefined\n return meta?.enableOrdering !== false\n })\n\n // If no reorderable columns, don't render\n if (reorderableColumns.length === 0) {\n return null\n }\n\n // Current order (derive from columns if columnOrder state is empty)\n const currentOrder =\n table.getState().columnOrder && table.getState().columnOrder.length > 0\n ? table.getState().columnOrder\n : allColumns.map((c) => c.id)\n\n // Sort reorderable columns by their position in currentOrder\n const orderedColumns = [...reorderableColumns].sort((a, b) => {\n const indexA = currentOrder.indexOf(a.id)\n const indexB = currentOrder.indexOf(b.id)\n return (\n (indexA === -1 ? Number.MAX_SAFE_INTEGER : indexA) -\n (indexB === -1 ? Number.MAX_SAFE_INTEGER : indexB)\n )\n })\n\n return (\n <DropdownMenu ref={ref} {...props}>\n <DropdownMenuTrigger asChild>\n {trigger ?? (\n <Button\n variant=\"tertiary\"\n size=\"sm\"\n data-slot=\"data-table-column-order-trigger\"\n {...{ [SLOT_ATTR]: \"data-table-column-order-trigger\" }}\n data-fs-element=\"DataTable-ColumnOrder-Trigger\"\n >\n {icon ?? <IconSwapVertical className={styles.icon} />}\n <span className={styles.srOnly}>{label}</span>\n </Button>\n )}\n </DropdownMenuTrigger>\n <DropdownMenuContent\n align={align}\n className={contentClassName}\n data-slot=\"data-table-column-order-content\"\n {...{ [SLOT_ATTR]: \"data-table-column-order-content\" }}\n data-fs-element=\"DataTable-ColumnOrder-Content\"\n >\n <DropdownMenuLabel>{label}</DropdownMenuLabel>\n <DropdownMenuSeparator />\n <DataTableColumnOrderList\n columns={orderedColumns}\n currentOrder={currentOrder}\n table={table}\n dragHandleLabel={dragHandleLabel}\n announcements={announcements}\n screenReaderInstructions={screenReaderInstructions}\n />\n </DropdownMenuContent>\n </DropdownMenu>\n )\n})\n"],"names":["IconSwapVertical","props","jsx","IconGripVertical","jsxs","useStyles","makeZenithStyles","boxModel","shorthands","tokens.spacingElement2","tokens.radiusSm","tokens.textSm","tokens.leadingSm","tokens.grayA3","nativeControl","tokens.grayA8","tokens.grayA12","tokens.accentA8","DataTableColumnOrderItem","column","dragHandleLabel","styles","attributes","listeners","setNodeRef","transform","transition","isDragging","useSortable","meta","label","resolvedDragHandleLabel","CSS","mergeClasses","SLOT_ATTR","DataTableColumnOrderList","columns","currentOrder","table","announcements","screenReaderInstructions","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","sortableKeyboardCoordinates","handleDragEnd","useCallback","event","active","over","oldIndex","newIndex","newOrder","arrayMove","DndContext","closestCenter","SortableContext","c","verticalListSortingStrategy","col","DataTableColumnOrder","React","icon","trigger","contentClassName","align","ref","useDataTable","allColumns","reorderableColumns","orderedColumns","a","b","indexA","indexB","DropdownMenu","DropdownMenuTrigger","Button","DropdownMenuContent","DropdownMenuLabel","DropdownMenuSeparator"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsxs as l, jsx as t } from "react/jsx-runtime";
|
|
2
2
|
import * as w from "react";
|
|
3
|
-
import { shorthands as n } from "@epilot/zenith-runtime/v1
|
|
3
|
+
import { shorthands as n } from "@epilot/zenith-runtime/v1";
|
|
4
4
|
import { makeZenithStyles as D } from "../../styles/make-styles.js";
|
|
5
5
|
import { boxModel as d } from "../../styles/host-reset.js";
|
|
6
6
|
import { Button as y } from "../button/button.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data-table-column-visibility.js","sources":["../../../src/components/data-table/data-table-column-visibility.tsx"],"sourcesContent":["import * as React from \"react\"\nimport type { ComponentProps, ReactNode, SVGProps } from \"react\"\nimport { shorthands } from \"@epilot/zenith-runtime/v1
|
|
1
|
+
{"version":3,"file":"data-table-column-visibility.js","sources":["../../../src/components/data-table/data-table-column-visibility.tsx"],"sourcesContent":["import * as React from \"react\"\nimport type { ComponentProps, ReactNode, SVGProps } from \"react\"\nimport { shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel } from \"../../styles/host-reset\"\nimport { Button } from \"../button/button\"\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"../dropdown-menu/dropdown-menu\"\nimport { useDataTable } from \"./hooks/use-data-table\"\n\n// Settings/gear icon (default)\nconst IconSettings = (props: SVGProps<SVGSVGElement>) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 -960 960 960\"\n fill=\"currentColor\"\n {...props}\n >\n <path d=\"M413.09-65.87q-16.26 0-28.68-9.85Q372-85.56 370-101.83l-15-94.56q-15.61-5.31-34.07-15.89-18.45-10.59-31.63-21.33l-85.43 40q-15.7 6.57-31.96 1.78-16.26-4.78-24.82-20.04l-65.92-118.7q-9.13-14.13-5.34-30.1 3.78-15.98 17.47-26.11l79.44-59q-1.44-7.31-1.94-17.11-.5-9.81-.5-17.11 0-7.3.5-17.11.5-9.8 1.94-17.11L93.3-572.65q-14.26-10.13-17.76-26.11-3.5-15.98 5.63-30.67l65.92-118.7q8.56-14.13 24.54-19.48 15.98-5.35 31.67 1.22l87.13 40q12.61-10.18 30.79-20.48 18.17-10.3 33.78-15.17l15-95.57q2-16.83 14.41-26.96 12.42-10.13 28.68-10.13h133.82q16.26 0 28.68 10.13Q588-874.44 590-857.61l15 94.57q15.61 5.87 34.28 15.67 18.68 9.8 31.42 20.98l85.43-40q15.7-6.57 31.46-1.22 15.76 5.35 24.32 19.48l67.48 118.7q8.57 14.69 5.07 31.17-3.5 16.48-17.76 25.61l-80 56.43q1.43 8.31 2.21 18.11.79 9.81.79 18.11 0 8.3-.79 17.61-.78 9.3-2.21 17.61l80 57.43q14.26 9.13 17.76 25.61 3.5 16.48-5.07 31.17l-66.48 118.7q-8.56 14.7-24.54 19.76-15.98 5.07-31.67-1.5l-86.57-40q-13.17 10.74-30.85 21.55-17.67 10.8-34.28 15.67l-15 94.56q-2 16.27-14.41 26.11-12.42 9.85-28.68 9.85H413.09Zm27.43-79.22h78.39l14.57-111.43q33.56-8 63.91-25 30.35-17 54.35-42.7l106 46 34.91-64.65-92.87-67.87q4-17.56 6.78-34.63 2.79-17.06 2.79-34.63 0-17.57-2.29-34.63-2.28-17.07-7.28-34.63l93.44-67.87-35.48-64.65-105.44 46q-23-27.13-53.13-45.48-30.13-18.35-65.69-22.78l-14-110.87h-78.96l-13.43 110.87q-35.13 6.43-65.76 24.28-30.63 17.85-54.2 43.98l-104.87-46-35.48 64.65 92.31 67.3q-4 17.57-6.79 34.92-2.78 17.34-2.78 34.91 0 17.57 2.78 35.2 2.79 17.63 6.79 34.63l-92.31 67.3 35.48 64.65 104.87-46q24.57 25.13 55.2 42.7 30.63 17.56 64.76 25.56l13.43 110.87ZM478.87-350q54 0 92-38t38-92q0-54-38-92t-92-38q-54 0-92 38t-38 92q0 54 38 92t92 38ZM480-480Z\" />\n </svg>\n)\n\nconst useStyles = makeZenithStyles({\n icon: {\n ...boxModel,\n width: \"1rem\",\n height: \"1rem\",\n },\n srOnly: {\n ...boxModel,\n position: \"absolute\",\n width: \"1px\",\n height: \"1px\",\n ...shorthands.padding(0),\n ...shorthands.margin(\"-1px\"),\n ...shorthands.overflow(\"hidden\"),\n clip: \"rect(0, 0, 0, 0)\",\n whiteSpace: \"nowrap\",\n },\n})\n\nexport type DataTableColumnVisibilityProps = {\n /** Custom icon for the default trigger button. Falls back to settings gear icon. */\n icon?: ReactNode\n /** Custom trigger element. Defaults to a settings icon button. */\n trigger?: ReactNode\n /** Label shown at top of dropdown and as screen reader text for default trigger. Required for i18n. */\n label: string\n /** Additional class name for the dropdown content */\n contentClassName?: string\n /** Alignment of dropdown relative to trigger. Default: \"end\" */\n align?: \"start\" | \"center\" | \"end\"\n} & Omit<ComponentProps<typeof DropdownMenu>, \"children\">\n\n/**\n * A dropdown menu for toggling column visibility in DataTable.\n * Shows checkboxes for each column that can be hidden.\n * Place in DataTableToolbar for consistent layout.\n */\nexport const DataTableColumnVisibility = React.forwardRef<\n HTMLElement,\n DataTableColumnVisibilityProps\n>(function DataTableColumnVisibility(\n { icon, trigger, label, contentClassName, align = \"end\", ...props },\n ref\n) {\n const { table } = useDataTable()\n const styles = useStyles()\n\n // Get columns that can be hidden (excludes selection column, etc.)\n const columns = table.getAllColumns().filter((column) => column.getCanHide())\n\n // If no hideable columns, don't render anything\n if (columns.length === 0) {\n return null\n }\n\n return (\n <DropdownMenu ref={ref} {...props}>\n <DropdownMenuTrigger asChild>\n {trigger ?? (\n <Button\n variant=\"tertiary\"\n size=\"sm\"\n data-fs-element=\"DataTable-ColumnVisibility-Trigger\"\n >\n {icon ?? <IconSettings className={styles.icon} />}\n <span className={styles.srOnly}>{label}</span>\n </Button>\n )}\n </DropdownMenuTrigger>\n <DropdownMenuContent\n align={align}\n className={contentClassName}\n data-fs-element=\"DataTable-ColumnVisibility-Content\"\n >\n <DropdownMenuLabel>{label}</DropdownMenuLabel>\n <DropdownMenuSeparator />\n {columns.map((column) => {\n // Get column header text for display\n // Priority: meta.visibilityLabel > string header > column.id\n const columnMeta = column.columnDef.meta as\n { visibilityLabel?: string } | undefined\n const headerText =\n columnMeta?.visibilityLabel ??\n (typeof column.columnDef.header === \"string\"\n ? column.columnDef.header\n : column.id)\n\n return (\n <DropdownMenuCheckboxItem\n key={column.id}\n checked={column.getIsVisible()}\n onCheckedChange={(value) => column.toggleVisibility(!!value)}\n data-fs-element=\"DataTable-ColumnVisibility-Item\"\n >\n {headerText}\n </DropdownMenuCheckboxItem>\n )\n })}\n </DropdownMenuContent>\n </DropdownMenu>\n )\n})\n"],"names":["IconSettings","props","jsx","useStyles","makeZenithStyles","boxModel","shorthands","DataTableColumnVisibility","React","icon","trigger","label","contentClassName","align","ref","table","useDataTable","styles","columns","column","jsxs","DropdownMenu","DropdownMenuTrigger","Button","DropdownMenuContent","DropdownMenuLabel","DropdownMenuSeparator","columnMeta","headerText","DropdownMenuCheckboxItem","value"],"mappings":";;;;;;;;AAkBA,MAAMA,IAAe,CAACC,MACpB,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACJ,GAAGD;AAAA,IAEJ,UAAA,gBAAAC,EAAC,QAAA,EAAK,GAAE,iqDAAA,CAAiqD;AAAA,EAAA;AAC3qD,GAGIC,IAAYC,EAAiB;AAAA,EACjC,MAAM;AAAA,IACJ,GAAGC;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,EAAA;AAAA,EAEV,QAAQ;AAAA,IACN,GAAGA;AAAA,IACH,UAAU;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,GAAGC,EAAW,QAAQ,CAAC;AAAA,IACvB,GAAGA,EAAW,OAAO,MAAM;AAAA,IAC3B,GAAGA,EAAW,SAAS,QAAQ;AAAA,IAC/B,MAAM;AAAA,IACN,YAAY;AAAA,EAAA;AAEhB,CAAC,GAoBYC,IAA4BC,EAAM,WAG7C,SACA,EAAE,MAAAC,GAAM,SAAAC,GAAS,OAAAC,GAAO,kBAAAC,GAAkB,OAAAC,IAAQ,OAAO,GAAGZ,EAAA,GAC5Da,GACA;AACA,QAAM,EAAE,OAAAC,EAAA,IAAUC,EAAA,GACZC,IAASd,EAAA,GAGTe,IAAUH,EAAM,cAAA,EAAgB,OAAO,CAACI,MAAWA,EAAO,YAAY;AAG5E,SAAID,EAAQ,WAAW,IACd,OAIP,gBAAAE,EAACC,GAAA,EAAa,KAAAP,GAAW,GAAGb,GAC1B,UAAA;AAAA,IAAA,gBAAAC,EAACoB,GAAA,EAAoB,SAAO,IACzB,UAAAZ,KACC,gBAAAU;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,mBAAgB;AAAA,QAEf,UAAA;AAAA,UAAAd,KAAQ,gBAAAP,EAACF,GAAA,EAAa,WAAWiB,EAAO,MAAM;AAAA,UAC/C,gBAAAf,EAAC,QAAA,EAAK,WAAWe,EAAO,QAAS,UAAAN,EAAA,CAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAG7C;AAAA,IACA,gBAAAS;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,OAAAX;AAAA,QACA,WAAWD;AAAA,QACX,mBAAgB;AAAA,QAEhB,UAAA;AAAA,UAAA,gBAAAV,EAACuB,KAAmB,UAAAd,EAAA,CAAM;AAAA,4BACzBe,GAAA,EAAsB;AAAA,UACtBR,EAAQ,IAAI,CAACC,MAAW;AAGvB,kBAAMQ,IAAaR,EAAO,UAAU,MAE9BS,KACJD,KAAA,gBAAAA,EAAY,qBACX,OAAOR,EAAO,UAAU,UAAW,WAChCA,EAAO,UAAU,SACjBA,EAAO;AAEb,mBACE,gBAAAjB;AAAA,cAAC2B;AAAA,cAAA;AAAA,gBAEC,SAASV,EAAO,aAAA;AAAA,gBAChB,iBAAiB,CAACW,MAAUX,EAAO,iBAAiB,CAAC,CAACW,CAAK;AAAA,gBAC3D,mBAAgB;AAAA,gBAEf,UAAAF;AAAA,cAAA;AAAA,cALIT,EAAO;AAAA,YAAA;AAAA,UAQlB,CAAC;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ,CAAC;"}
|
|
@@ -3,7 +3,7 @@ import * as P from "react";
|
|
|
3
3
|
import { useRef as T, useState as v, useCallback as y, useEffect as q, useMemo as u } from "react";
|
|
4
4
|
import { flushSync as G } from "react-dom";
|
|
5
5
|
import { useVirtualizer as Z } from "../../vendor/.bun/@tanstack_react-virtual@3.11.2_6f4b9a1cfb20c0ae/vendor/@tanstack/react-virtual/dist/esm/index.js";
|
|
6
|
-
import { SLOT_ATTR as x, mergeClasses as J, shorthands as K } from "@epilot/zenith-runtime/v1
|
|
6
|
+
import { SLOT_ATTR as x, mergeClasses as J, shorthands as K } from "@epilot/zenith-runtime/v1";
|
|
7
7
|
import { makeZenithStyles as Q } from "../../styles/make-styles.js";
|
|
8
8
|
import { boxModel as D } from "../../styles/host-reset.js";
|
|
9
9
|
import { leadingSm as X, textSm as Y } from "../../tokens/index.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data-table-content.js","sources":["../../../src/components/data-table/data-table-content.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { useRef, useMemo, useCallback, useState, useEffect } from \"react\"\nimport { flushSync } from \"react-dom\"\nimport type { ReactNode } from \"react\"\nimport { useVirtualizer } from \"@tanstack/react-virtual\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1/core\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel } from \"../../styles/host-reset\"\nimport * as tokens from \"../../tokens\"\nimport { useDataTable } from \"./hooks\"\nimport {\n DataTableContentContext,\n DataTableVirtualizerContext,\n DEFAULT_ROW_HEIGHT,\n DEFAULT_OVERSCAN,\n} from \"./data-table-context\"\nimport { DataTableHeader } from \"./data-table-header\"\nimport { DataTableBody } from \"./data-table-body\"\n\n// TanStack Table's default column width\nconst DEFAULT_COLUMN_WIDTH = 150\n\nconst useStyles = makeZenithStyles({\n container: {\n ...boxModel,\n position: \"relative\",\n width: \"100%\",\n ...shorthands.overflow(\"auto\"),\n },\n resizing: {\n cursor: \"col-resize\",\n userSelect: \"none\",\n },\n table: {\n ...boxModel,\n tableLayout: \"fixed\",\n borderCollapse: \"separate\",\n borderSpacing: 0,\n fontSize: tokens.textSm,\n lineHeight: tokens.leadingSm,\n },\n})\n\nexport type DataTableContentProps = {\n /** Children to render inside the table (DataTableHeader, DataTableBody) */\n children?: ReactNode\n /** Additional class name */\n className?: string\n /** Additional style */\n style?: React.CSSProperties\n}\n\n/**\n * Container component for DataTable that handles the table structure and virtualization.\n * When virtualization is enabled, this component manages the scroll container.\n *\n * If no children are provided, renders DataTableHeader and DataTableBody by default.\n */\nexport const DataTableContent = React.forwardRef<\n HTMLDivElement,\n DataTableContentProps\n>(function DataTableContent({ children, className, style }, ref) {\n const styles = useStyles()\n const { table, config, disableColumnResizing } = useDataTable()\n const enableColumnResizing = !disableColumnResizing\n\n const isResizing =\n enableColumnResizing && table.getState().columnSizingInfo?.isResizingColumn\n const internalContainerRef = useRef<HTMLDivElement>(null!)\n const tableRef = useRef<HTMLTableElement>(null)\n const [hasSyncedWidths, setHasSyncedWidths] = useState(false)\n const [containerWidth, setContainerWidth] = useState(0)\n const rows = table.getRowModel().rows\n\n // Attach ref to internal ref or forwarded ref\n const handleRef = useCallback(\n (node: HTMLDivElement | null) => {\n internalContainerRef.current = node!\n if (typeof ref === \"function\") {\n ref(node)\n } else if (ref) {\n ;(ref as React.MutableRefObject<HTMLDivElement | null>).current = node\n }\n },\n [ref]\n )\n\n // Track container width for spacer calculation\n useEffect(() => {\n const container = internalContainerRef.current\n if (!container || typeof ResizeObserver === \"undefined\") return\n\n const observer = new ResizeObserver((entries) => {\n setContainerWidth(entries[0].contentRect.width)\n })\n observer.observe(container)\n return () => observer.disconnect()\n }, [])\n\n // Sync visual column widths to stored widths BEFORE resize starts\n const syncColumnWidthsBeforeResize = useCallback(() => {\n if (tableRef.current && !hasSyncedWidths) {\n const headerCells = tableRef.current.querySelectorAll(\n \"th:not([data-spacer])\"\n )\n const columns = table.getVisibleLeafColumns()\n\n if (headerCells.length === columns.length) {\n const newSizing: Record<string, number> = {}\n\n headerCells.forEach((cell, index) => {\n const column = columns[index]\n if (column) {\n newSizing[column.id] = Math.round(\n cell.getBoundingClientRect().width\n )\n }\n })\n\n flushSync(() => {\n setHasSyncedWidths(true)\n table.setColumnSizing((prev) => ({ ...prev, ...newSizing }))\n })\n }\n }\n }, [table, hasSyncedWidths])\n\n const isVirtual = Boolean(config?.enableVirtualization)\n\n // Always call useVirtualizer to follow React hooks rules\n // When virtualization is disabled, count=0 makes it effectively a no-op\n const virtualizer = useVirtualizer({\n count: isVirtual ? rows.length : 0,\n getScrollElement: () => internalContainerRef.current,\n estimateSize: () => config?.estimateRowHeight ?? DEFAULT_ROW_HEIGHT,\n overscan: config?.overscan ?? DEFAULT_OVERSCAN,\n enabled: isVirtual,\n })\n\n // Get column sizing and visibility state to trigger recalculation\n const columnSizing = table.getState().columnSizing\n const columnVisibility = table.getState().columnVisibility\n\n // Calculate total column width from visible columns\n const calculatedColumnSum = useMemo(() => {\n const totalWidth = table.getVisibleLeafColumns().reduce((sum, col) => {\n return sum + (col.getSize() ?? DEFAULT_COLUMN_WIDTH)\n }, 0)\n return totalWidth\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [table, columnSizing, columnVisibility])\n\n const WIDTH_BUFFER = 4\n const tableWidth = useMemo(() => {\n if (!hasSyncedWidths) {\n return `calc(100% - ${WIDTH_BUFFER}px)`\n }\n return calculatedColumnSum\n ? `${calculatedColumnSum}px`\n : `calc(100% - ${WIDTH_BUFFER}px)`\n }, [hasSyncedWidths, calculatedColumnSum])\n\n // Calculate spacer width to fill remaining container space after resize\n const spacerWidth = useMemo(() => {\n if (!hasSyncedWidths || !containerWidth) return 0\n return Math.max(0, containerWidth - calculatedColumnSum)\n }, [hasSyncedWidths, containerWidth, calculatedColumnSum])\n\n // If no children, render default header + body\n const content = children ?? (\n <>\n <DataTableHeader />\n <DataTableBody />\n </>\n )\n\n const contentContextValue = useMemo(\n () => ({ syncColumnWidthsBeforeResize, spacerWidth }),\n [syncColumnWidthsBeforeResize, spacerWidth]\n )\n\n const virtualizerContextValue = useMemo(\n () =>\n isVirtual\n ? { virtualizer, scrollContainerRef: internalContainerRef }\n : null,\n [isVirtual, virtualizer]\n )\n\n return (\n <DataTableContentContext.Provider value={contentContextValue}>\n <DataTableVirtualizerContext.Provider value={virtualizerContextValue}>\n <div\n ref={handleRef}\n data-slot=\"data-table-content\"\n {...{ [SLOT_ATTR]: \"data-table-content\" }}\n data-fs-element=\"DataTable-Content\"\n className={mergeClasses(\n styles.container,\n isResizing && styles.resizing,\n className\n )}\n style={{\n height: isVirtual ? config?.containerHeight : undefined,\n ...style,\n }}\n >\n <table\n ref={tableRef}\n data-slot=\"table\"\n {...{ [SLOT_ATTR]: \"table\" }}\n className={styles.table}\n style={{ width: tableWidth }}\n >\n {content}\n </table>\n </div>\n </DataTableVirtualizerContext.Provider>\n </DataTableContentContext.Provider>\n )\n})\n"],"names":["DEFAULT_COLUMN_WIDTH","useStyles","makeZenithStyles","boxModel","shorthands","tokens.textSm","tokens.leadingSm","DataTableContent","React","children","className","style","ref","styles","table","config","disableColumnResizing","useDataTable","isResizing","_a","internalContainerRef","useRef","tableRef","hasSyncedWidths","setHasSyncedWidths","useState","containerWidth","setContainerWidth","rows","handleRef","useCallback","node","useEffect","container","observer","entries","syncColumnWidthsBeforeResize","headerCells","columns","newSizing","cell","index","column","flushSync","prev","isVirtual","virtualizer","useVirtualizer","DEFAULT_ROW_HEIGHT","DEFAULT_OVERSCAN","columnSizing","columnVisibility","calculatedColumnSum","useMemo","sum","col","WIDTH_BUFFER","tableWidth","spacerWidth","content","jsxs","Fragment","jsx","DataTableHeader","DataTableBody","contentContextValue","virtualizerContextValue","DataTableContentContext","DataTableVirtualizerContext","SLOT_ATTR","mergeClasses"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"data-table-content.js","sources":["../../../src/components/data-table/data-table-content.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { useRef, useMemo, useCallback, useState, useEffect } from \"react\"\nimport { flushSync } from \"react-dom\"\nimport type { ReactNode } from \"react\"\nimport { useVirtualizer } from \"@tanstack/react-virtual\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel } from \"../../styles/host-reset\"\nimport * as tokens from \"../../tokens\"\nimport { useDataTable } from \"./hooks\"\nimport {\n DataTableContentContext,\n DataTableVirtualizerContext,\n DEFAULT_ROW_HEIGHT,\n DEFAULT_OVERSCAN,\n} from \"./data-table-context\"\nimport { DataTableHeader } from \"./data-table-header\"\nimport { DataTableBody } from \"./data-table-body\"\n\n// TanStack Table's default column width\nconst DEFAULT_COLUMN_WIDTH = 150\n\nconst useStyles = makeZenithStyles({\n container: {\n ...boxModel,\n position: \"relative\",\n width: \"100%\",\n ...shorthands.overflow(\"auto\"),\n },\n resizing: {\n cursor: \"col-resize\",\n userSelect: \"none\",\n },\n table: {\n ...boxModel,\n tableLayout: \"fixed\",\n borderCollapse: \"separate\",\n borderSpacing: 0,\n fontSize: tokens.textSm,\n lineHeight: tokens.leadingSm,\n },\n})\n\nexport type DataTableContentProps = {\n /** Children to render inside the table (DataTableHeader, DataTableBody) */\n children?: ReactNode\n /** Additional class name */\n className?: string\n /** Additional style */\n style?: React.CSSProperties\n}\n\n/**\n * Container component for DataTable that handles the table structure and virtualization.\n * When virtualization is enabled, this component manages the scroll container.\n *\n * If no children are provided, renders DataTableHeader and DataTableBody by default.\n */\nexport const DataTableContent = React.forwardRef<\n HTMLDivElement,\n DataTableContentProps\n>(function DataTableContent({ children, className, style }, ref) {\n const styles = useStyles()\n const { table, config, disableColumnResizing } = useDataTable()\n const enableColumnResizing = !disableColumnResizing\n\n const isResizing =\n enableColumnResizing && table.getState().columnSizingInfo?.isResizingColumn\n const internalContainerRef = useRef<HTMLDivElement>(null!)\n const tableRef = useRef<HTMLTableElement>(null)\n const [hasSyncedWidths, setHasSyncedWidths] = useState(false)\n const [containerWidth, setContainerWidth] = useState(0)\n const rows = table.getRowModel().rows\n\n // Attach ref to internal ref or forwarded ref\n const handleRef = useCallback(\n (node: HTMLDivElement | null) => {\n internalContainerRef.current = node!\n if (typeof ref === \"function\") {\n ref(node)\n } else if (ref) {\n ;(ref as React.MutableRefObject<HTMLDivElement | null>).current = node\n }\n },\n [ref]\n )\n\n // Track container width for spacer calculation\n useEffect(() => {\n const container = internalContainerRef.current\n if (!container || typeof ResizeObserver === \"undefined\") return\n\n const observer = new ResizeObserver((entries) => {\n setContainerWidth(entries[0].contentRect.width)\n })\n observer.observe(container)\n return () => observer.disconnect()\n }, [])\n\n // Sync visual column widths to stored widths BEFORE resize starts\n const syncColumnWidthsBeforeResize = useCallback(() => {\n if (tableRef.current && !hasSyncedWidths) {\n const headerCells = tableRef.current.querySelectorAll(\n \"th:not([data-spacer])\"\n )\n const columns = table.getVisibleLeafColumns()\n\n if (headerCells.length === columns.length) {\n const newSizing: Record<string, number> = {}\n\n headerCells.forEach((cell, index) => {\n const column = columns[index]\n if (column) {\n newSizing[column.id] = Math.round(\n cell.getBoundingClientRect().width\n )\n }\n })\n\n flushSync(() => {\n setHasSyncedWidths(true)\n table.setColumnSizing((prev) => ({ ...prev, ...newSizing }))\n })\n }\n }\n }, [table, hasSyncedWidths])\n\n const isVirtual = Boolean(config?.enableVirtualization)\n\n // Always call useVirtualizer to follow React hooks rules\n // When virtualization is disabled, count=0 makes it effectively a no-op\n const virtualizer = useVirtualizer({\n count: isVirtual ? rows.length : 0,\n getScrollElement: () => internalContainerRef.current,\n estimateSize: () => config?.estimateRowHeight ?? DEFAULT_ROW_HEIGHT,\n overscan: config?.overscan ?? DEFAULT_OVERSCAN,\n enabled: isVirtual,\n })\n\n // Get column sizing and visibility state to trigger recalculation\n const columnSizing = table.getState().columnSizing\n const columnVisibility = table.getState().columnVisibility\n\n // Calculate total column width from visible columns\n const calculatedColumnSum = useMemo(() => {\n const totalWidth = table.getVisibleLeafColumns().reduce((sum, col) => {\n return sum + (col.getSize() ?? DEFAULT_COLUMN_WIDTH)\n }, 0)\n return totalWidth\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [table, columnSizing, columnVisibility])\n\n const WIDTH_BUFFER = 4\n const tableWidth = useMemo(() => {\n if (!hasSyncedWidths) {\n return `calc(100% - ${WIDTH_BUFFER}px)`\n }\n return calculatedColumnSum\n ? `${calculatedColumnSum}px`\n : `calc(100% - ${WIDTH_BUFFER}px)`\n }, [hasSyncedWidths, calculatedColumnSum])\n\n // Calculate spacer width to fill remaining container space after resize\n const spacerWidth = useMemo(() => {\n if (!hasSyncedWidths || !containerWidth) return 0\n return Math.max(0, containerWidth - calculatedColumnSum)\n }, [hasSyncedWidths, containerWidth, calculatedColumnSum])\n\n // If no children, render default header + body\n const content = children ?? (\n <>\n <DataTableHeader />\n <DataTableBody />\n </>\n )\n\n const contentContextValue = useMemo(\n () => ({ syncColumnWidthsBeforeResize, spacerWidth }),\n [syncColumnWidthsBeforeResize, spacerWidth]\n )\n\n const virtualizerContextValue = useMemo(\n () =>\n isVirtual\n ? { virtualizer, scrollContainerRef: internalContainerRef }\n : null,\n [isVirtual, virtualizer]\n )\n\n return (\n <DataTableContentContext.Provider value={contentContextValue}>\n <DataTableVirtualizerContext.Provider value={virtualizerContextValue}>\n <div\n ref={handleRef}\n data-slot=\"data-table-content\"\n {...{ [SLOT_ATTR]: \"data-table-content\" }}\n data-fs-element=\"DataTable-Content\"\n className={mergeClasses(\n styles.container,\n isResizing && styles.resizing,\n className\n )}\n style={{\n height: isVirtual ? config?.containerHeight : undefined,\n ...style,\n }}\n >\n <table\n ref={tableRef}\n data-slot=\"table\"\n {...{ [SLOT_ATTR]: \"table\" }}\n className={styles.table}\n style={{ width: tableWidth }}\n >\n {content}\n </table>\n </div>\n </DataTableVirtualizerContext.Provider>\n </DataTableContentContext.Provider>\n )\n})\n"],"names":["DEFAULT_COLUMN_WIDTH","useStyles","makeZenithStyles","boxModel","shorthands","tokens.textSm","tokens.leadingSm","DataTableContent","React","children","className","style","ref","styles","table","config","disableColumnResizing","useDataTable","isResizing","_a","internalContainerRef","useRef","tableRef","hasSyncedWidths","setHasSyncedWidths","useState","containerWidth","setContainerWidth","rows","handleRef","useCallback","node","useEffect","container","observer","entries","syncColumnWidthsBeforeResize","headerCells","columns","newSizing","cell","index","column","flushSync","prev","isVirtual","virtualizer","useVirtualizer","DEFAULT_ROW_HEIGHT","DEFAULT_OVERSCAN","columnSizing","columnVisibility","calculatedColumnSum","useMemo","sum","col","WIDTH_BUFFER","tableWidth","spacerWidth","content","jsxs","Fragment","jsx","DataTableHeader","DataTableBody","contentContextValue","virtualizerContextValue","DataTableContentContext","DataTableVirtualizerContext","SLOT_ATTR","mergeClasses"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as t, jsxs as d, Fragment as p } from "react/jsx-runtime";
|
|
2
2
|
import * as h from "react";
|
|
3
|
-
import { mergeClasses as T, SLOT_ATTR as q, shorthands as r } from "@epilot/zenith-runtime/v1
|
|
3
|
+
import { mergeClasses as T, SLOT_ATTR as q, shorthands as r } from "@epilot/zenith-runtime/v1";
|
|
4
4
|
import { makeZenithStyles as f } from "../../styles/make-styles.js";
|
|
5
5
|
import { boxModel as o } from "../../styles/host-reset.js";
|
|
6
6
|
import { spacingGroup1 as x, grayA11 as u, leadingSm as y, textSm as w, grayA12 as v, fontWeightMedium as S, leadingBase as B, textBase as Z, spacingElement2 as b, errorA11 as A, spacingElement1 as E, spacingLayout2 as N } from "../../tokens/index.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data-table-error.js","sources":["../../../src/components/data-table/data-table-error.tsx"],"sourcesContent":["import * as React from \"react\"\nimport type { ReactNode } from \"react\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1
|
|
1
|
+
{"version":3,"file":"data-table-error.js","sources":["../../../src/components/data-table/data-table-error.tsx"],"sourcesContent":["import * as React from \"react\"\nimport type { ReactNode } from \"react\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel } from \"../../styles/host-reset\"\nimport * as tokens from \"../../tokens\"\nimport { Button } from \"../button/button\"\n\nconst ErrorIcon = (props: React.SVGProps<SVGSVGElement>) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 -960 960 960\"\n width=\"24px\"\n fill=\"currentColor\"\n {...props}\n >\n <path d=\"M480-280q17 0 28.5-11.5T520-320q0-17-11.5-28.5T480-360q-17 0-28.5 11.5T440-320q0 17 11.5 28.5T480-280Zm0-160q17 0 28.5-11.5T520-480v-160q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640v160q0 17 11.5 28.5T480-440Zm0 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z\" />\n </svg>\n)\n\nconst useStyles = makeZenithStyles({\n root: {\n ...boxModel,\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n justifyContent: \"center\",\n gap: tokens.spacingElement1,\n ...shorthands.paddingBlock(tokens.spacingLayout2),\n textAlign: \"center\",\n },\n icon: {\n ...boxModel,\n width: \"2.5rem\",\n height: \"2.5rem\",\n color: tokens.errorA11,\n marginBottom: tokens.spacingElement2,\n },\n title: {\n fontSize: tokens.textBase,\n lineHeight: tokens.leadingBase,\n fontWeight: tokens.fontWeightMedium,\n color: tokens.grayA12,\n ...shorthands.margin(0),\n },\n description: {\n ...boxModel,\n fontSize: tokens.textSm,\n lineHeight: tokens.leadingSm,\n color: tokens.grayA11,\n maxWidth: \"28rem\",\n ...shorthands.margin(0),\n },\n retry: {\n marginTop: tokens.spacingGroup1,\n },\n})\n\nexport type DataTableErrorProps = {\n /** Error title text */\n title?: string\n /** Error description/message */\n description?: ReactNode\n /** Retry button text */\n retryLabel?: string\n /** Callback when retry is clicked */\n onRetry?: () => void\n /** Additional class name */\n className?: string\n /** Custom error content (overrides default error display) */\n children?: ReactNode\n}\n\n/**\n * Error state display for DataTable.\n * Shows an error icon, message, and optional retry button.\n */\nexport const DataTableError = React.forwardRef<\n HTMLDivElement,\n DataTableErrorProps\n>(function DataTableError(\n { title, description, retryLabel, onRetry, className, children },\n ref\n) {\n const styles = useStyles()\n\n return (\n <div\n ref={ref}\n data-slot=\"data-table-error\"\n {...{ [SLOT_ATTR]: \"data-table-error\" }}\n role=\"alert\"\n className={mergeClasses(styles.root, className)}\n >\n {children ?? (\n <>\n <ErrorIcon className={styles.icon} />\n <p className={styles.title}>{title}</p>\n {description && <p className={styles.description}>{description}</p>}\n {onRetry && (\n <Button\n variant=\"secondary\"\n size=\"sm\"\n onClick={onRetry}\n className={styles.retry}\n >\n {retryLabel}\n </Button>\n )}\n </>\n )}\n </div>\n )\n})\n"],"names":["ErrorIcon","props","jsx","useStyles","makeZenithStyles","boxModel","tokens.spacingElement1","shorthands","tokens.spacingLayout2","tokens.errorA11","tokens.spacingElement2","tokens.textBase","tokens.leadingBase","tokens.fontWeightMedium","tokens.grayA12","tokens.textSm","tokens.leadingSm","tokens.grayA11","tokens.spacingGroup1","DataTableError","React","title","description","retryLabel","onRetry","className","children","ref","styles","SLOT_ATTR","mergeClasses","jsxs","Fragment","Button"],"mappings":";;;;;;;AAUA,MAAMA,IAAY,CAACC,MACjB,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,OAAM;AAAA,IACN,MAAK;AAAA,IACJ,GAAGD;AAAA,IAEJ,UAAA,gBAAAC,EAAC,QAAA,EAAK,GAAE,kfAAA,CAAkf;AAAA,EAAA;AAC5f,GAGIC,IAAYC,EAAiB;AAAA,EACjC,MAAM;AAAA,IACJ,GAAGC;AAAA,IACH,SAAS;AAAA,IACT,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,KAAKC;AAAAA,IACL,GAAGC,EAAW,aAAaC,CAAqB;AAAA,IAChD,WAAW;AAAA,EAAA;AAAA,EAEb,MAAM;AAAA,IACJ,GAAGH;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAOI;AAAAA,IACP,cAAcC;AAAAA,EAAO;AAAA,EAEvB,OAAO;AAAA,IACL,UAAUC;AAAAA,IACV,YAAYC;AAAAA,IACZ,YAAYC;AAAAA,IACZ,OAAOC;AAAAA,IACP,GAAGP,EAAW,OAAO,CAAC;AAAA,EAAA;AAAA,EAExB,aAAa;AAAA,IACX,GAAGF;AAAA,IACH,UAAUU;AAAAA,IACV,YAAYC;AAAAA,IACZ,OAAOC;AAAAA,IACP,UAAU;AAAA,IACV,GAAGV,EAAW,OAAO,CAAC;AAAA,EAAA;AAAA,EAExB,OAAO;AAAA,IACL,WAAWW;AAAAA,EAAO;AAEtB,CAAC,GAqBYC,IAAiBC,EAAM,WAGlC,SACA,EAAE,OAAAC,GAAO,aAAAC,GAAa,YAAAC,GAAY,SAAAC,GAAS,WAAAC,GAAW,UAAAC,EAAA,GACtDC,GACA;AACA,QAAMC,IAASzB,EAAA;AAEf,SACE,gBAAAD;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAyB;AAAA,MACA,aAAU;AAAA,MACJ,CAACE,CAAS,GAAG;AAAA,MACnB,MAAK;AAAA,MACL,WAAWC,EAAaF,EAAO,MAAMH,CAAS;AAAA,MAE7C,eACC,gBAAAM,EAAAC,GAAA,EACE,UAAA;AAAA,QAAA,gBAAA9B,EAACF,GAAA,EAAU,WAAW4B,EAAO,KAAA,CAAM;AAAA,QACnC,gBAAA1B,EAAC,KAAA,EAAE,WAAW0B,EAAO,OAAQ,UAAAP,GAAM;AAAA,QAClCC,KAAe,gBAAApB,EAAC,KAAA,EAAE,WAAW0B,EAAO,aAAc,UAAAN,GAAY;AAAA,QAC9DE,KACC,gBAAAtB;AAAA,UAAC+B;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,SAAST;AAAA,YACT,WAAWI,EAAO;AAAA,YAEjB,UAAAL;AAAA,UAAA;AAAA,QAAA;AAAA,MACH,EAAA,CAEJ;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as s } from "react/jsx-runtime";
|
|
2
2
|
import * as l from "react";
|
|
3
|
-
import { mergeClasses as m, SLOT_ATTR as n, shorthands as i } from "@epilot/zenith-runtime/v1
|
|
3
|
+
import { mergeClasses as m, SLOT_ATTR as n, shorthands as i } from "@epilot/zenith-runtime/v1";
|
|
4
4
|
import { makeZenithStyles as f } from "../../styles/make-styles.js";
|
|
5
5
|
import { boxModel as p } from "../../styles/host-reset.js";
|
|
6
6
|
import { spacingGroup2 as d, spacingElement3 as c } from "../../tokens/index.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data-table-footer.js","sources":["../../../src/components/data-table/data-table-footer.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1
|
|
1
|
+
{"version":3,"file":"data-table-footer.js","sources":["../../../src/components/data-table/data-table-footer.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel } from \"../../styles/host-reset\"\nimport * as tokens from \"../../tokens\"\n\nconst useStyles = makeZenithStyles({\n root: {\n ...boxModel,\n display: \"flex\",\n alignItems: \"center\",\n gap: tokens.spacingGroup2,\n ...shorthands.paddingBlock(tokens.spacingElement3),\n },\n})\n\nexport type DataTableFooterProps = React.ComponentProps<\"div\">\n\n/**\n * A footer wrapper for DataTable that sits between the table content and pagination.\n * Use for custom actions like \"Show more\" links or summary information.\n */\nexport const DataTableFooter = React.forwardRef<\n HTMLDivElement,\n DataTableFooterProps\n>(function DataTableFooter({ className, children, ...props }, ref) {\n const styles = useStyles()\n\n return (\n <div\n ref={ref}\n data-slot=\"data-table-footer\"\n {...{ [SLOT_ATTR]: \"data-table-footer\" }}\n data-fs-element=\"DataTable-Footer\"\n className={mergeClasses(styles.root, className)}\n {...props}\n >\n {children}\n </div>\n )\n})\n"],"names":["useStyles","makeZenithStyles","boxModel","tokens.spacingGroup2","shorthands","tokens.spacingElement3","DataTableFooter","React","className","children","props","ref","styles","jsx","SLOT_ATTR","mergeClasses"],"mappings":";;;;;;AAQA,MAAMA,IAAYC,EAAiB;AAAA,EACjC,MAAM;AAAA,IACJ,GAAGC;AAAA,IACH,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,KAAKC;AAAAA,IACL,GAAGC,EAAW,aAAaC,CAAsB;AAAA,EAAA;AAErD,CAAC,GAQYC,IAAkBC,EAAM,WAGnC,SAAyB,EAAE,WAAAC,GAAW,UAAAC,GAAU,GAAGC,EAAA,GAASC,GAAK;AACjE,QAAMC,IAASZ,EAAA;AAEf,SACE,gBAAAa;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,aAAU;AAAA,MACJ,CAACG,CAAS,GAAG;AAAA,MACnB,mBAAgB;AAAA,MAChB,WAAWC,EAAaH,EAAO,MAAMJ,CAAS;AAAA,MAC7C,GAAGE;AAAA,MAEH,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
|
|
@@ -2,7 +2,7 @@ import { jsx as a, jsxs as g } from "react/jsx-runtime";
|
|
|
2
2
|
import * as c from "react";
|
|
3
3
|
import { useSortable as T } from "../../vendor/.bun/@dnd-kit_sortable@10.0.0_1d291640e1250bbe/vendor/@dnd-kit/sortable/dist/sortable.esm.js";
|
|
4
4
|
import { CSS as C } from "../../vendor/.bun/@dnd-kit_utilities@3.2.2_62547eec5a2188e3/vendor/@dnd-kit/utilities/dist/utilities.esm.js";
|
|
5
|
-
import { SLOT_ATTR as r, mergeClasses as H, shorthands as s } from "@epilot/zenith-runtime/v1
|
|
5
|
+
import { SLOT_ATTR as r, mergeClasses as H, shorthands as s } from "@epilot/zenith-runtime/v1";
|
|
6
6
|
import { makeZenithStyles as N } from "../../styles/make-styles.js";
|
|
7
7
|
import { boxModel as d, nativeControl as R } from "../../styles/host-reset.js";
|
|
8
8
|
import { accentA8 as k, grayA12 as A, grayA8 as I } from "../../tokens/index.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data-table-header-draggable.js","sources":["../../../src/components/data-table/data-table-header-draggable.tsx"],"sourcesContent":["import * as React from \"react\"\nimport type { CSSProperties, ComponentProps, ReactNode, SVGProps } from \"react\"\nimport { useSortable } from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1
|
|
1
|
+
{"version":3,"file":"data-table-header-draggable.js","sources":["../../../src/components/data-table/data-table-header-draggable.tsx"],"sourcesContent":["import * as React from \"react\"\nimport type { CSSProperties, ComponentProps, ReactNode, SVGProps } from \"react\"\nimport { useSortable } from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel, nativeControl } from \"../../styles/host-reset\"\nimport * as tokens from \"../../tokens\"\nimport { TableHead } from \"../table/table\"\n\n// Grip vertical icon (6-dot drag handle)\nconst IconGripVertical = (props: SVGProps<SVGSVGElement>) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n {...props}\n >\n <circle cx=\"9\" cy=\"5\" r=\"1.5\" />\n <circle cx=\"15\" cy=\"5\" r=\"1.5\" />\n <circle cx=\"9\" cy=\"12\" r=\"1.5\" />\n <circle cx=\"15\" cy=\"12\" r=\"1.5\" />\n <circle cx=\"9\" cy=\"19\" r=\"1.5\" />\n <circle cx=\"15\" cy=\"19\" r=\"1.5\" />\n </svg>\n)\n\nconst useStyles = makeZenithStyles({\n root: {\n // When not disabled, hovering over the cell reveals the drag handle\n [`&:hover [${SLOT_ATTR}=\"data-table-header-drag-handle\"]`]: {\n opacity: 1,\n },\n },\n inner: {\n display: \"flex\",\n alignItems: \"center\",\n },\n dragHandle: {\n ...nativeControl,\n display: \"inline-flex\",\n flexShrink: 0,\n cursor: \"grab\",\n touchAction: \"none\",\n alignItems: \"center\",\n color: tokens.grayA8,\n opacity: 0,\n transitionProperty: \"opacity\",\n transitionDuration: \"150ms\",\n marginLeft: \"-4px\",\n marginRight: \"2px\",\n backgroundColor: \"transparent\",\n ...shorthands.borderWidth(0),\n ...shorthands.padding(0),\n \"&:hover\": {\n color: tokens.grayA12,\n },\n \"&:focus-visible\": {\n opacity: 1,\n outlineWidth: \"2px\",\n outlineStyle: \"solid\",\n outlineOffset: \"2px\",\n outlineColor: tokens.accentA8,\n },\n \"&:active\": {\n cursor: \"grabbing\",\n },\n },\n content: {\n ...boxModel,\n minWidth: 0,\n flexGrow: 1,\n flexShrink: 1,\n flexBasis: \"0%\",\n },\n icon: {\n ...boxModel,\n width: \"14px\",\n height: \"14px\",\n },\n})\n\nexport type DataTableHeaderDraggableProps = {\n /** Column ID used as the sortable identifier */\n headerId: string\n /** Whether this column cannot be reordered */\n disabled?: boolean\n /** Header cell content (the flex-rendered header + resize handle) */\n children: ReactNode\n} & ComponentProps<typeof TableHead>\n\n/**\n * A TableHead cell wrapped with dnd-kit sortable for column reordering.\n * Renders a drag handle icon that appears on hover.\n * Used by DataTableHeader when enableColumnOrdering is true.\n */\nexport const DataTableHeaderDraggable = React.forwardRef<\n HTMLTableCellElement,\n DataTableHeaderDraggableProps\n>(function DataTableHeaderDraggable(\n {\n headerId,\n disabled = false,\n children,\n style: existingStyle,\n className,\n ...tableHeadProps\n },\n ref\n) {\n const styles = useStyles()\n const {\n attributes,\n listeners,\n setNodeRef,\n transform,\n transition,\n isDragging,\n } = useSortable({ id: headerId, disabled })\n\n const handleRef = React.useCallback(\n (node: HTMLTableCellElement | null) => {\n setNodeRef(node)\n if (typeof ref === \"function\") {\n ref(node)\n } else if (ref) {\n ;(ref as React.MutableRefObject<HTMLTableCellElement | null>).current =\n node\n }\n },\n [setNodeRef, ref]\n )\n\n const style: CSSProperties = {\n ...existingStyle,\n transform: CSS.Transform.toString(transform),\n transition,\n ...(isDragging && { zIndex: 50, opacity: 0.8 }),\n }\n\n return (\n <TableHead\n ref={handleRef}\n style={style}\n className={mergeClasses(!disabled && styles.root, className)}\n data-slot=\"data-table-header-draggable\"\n {...{ [SLOT_ATTR]: \"data-table-header-draggable\" }}\n data-fs-element=\"DataTable-Header-Draggable\"\n {...tableHeadProps}\n >\n <div\n className={styles.inner}\n data-slot=\"data-table-header-draggable-inner\"\n {...{ [SLOT_ATTR]: \"data-table-header-draggable-inner\" }}\n >\n {!disabled && (\n <button\n type=\"button\"\n className={styles.dragHandle}\n data-slot=\"data-table-header-drag-handle\"\n {...{ [SLOT_ATTR]: \"data-table-header-drag-handle\" }}\n aria-label=\"Drag to reorder column\"\n {...attributes}\n {...listeners}\n >\n <IconGripVertical className={styles.icon} />\n </button>\n )}\n <div\n className={styles.content}\n data-slot=\"data-table-header-draggable-content\"\n {...{ [SLOT_ATTR]: \"data-table-header-draggable-content\" }}\n >\n {children}\n </div>\n </div>\n </TableHead>\n )\n})\n"],"names":["IconGripVertical","props","jsxs","jsx","useStyles","makeZenithStyles","SLOT_ATTR","nativeControl","tokens.grayA8","shorthands","tokens.grayA12","tokens.accentA8","boxModel","DataTableHeaderDraggable","React","headerId","disabled","children","existingStyle","className","tableHeadProps","ref","styles","attributes","listeners","setNodeRef","transform","transition","isDragging","useSortable","handleRef","node","style","CSS","TableHead","mergeClasses"],"mappings":"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"}
|
|
@@ -4,7 +4,7 @@ import { useCallback as K, useMemo as M } from "react";
|
|
|
4
4
|
import { flexRender as U } from "../../vendor/.bun/@tanstack_react-table@8.21.3_6f4b9a1cfb20c0ae/vendor/@tanstack/react-table/build/lib/index.js";
|
|
5
5
|
import { useSensors as V, useSensor as H, DndContext as Z, closestCenter as q, KeyboardSensor as G, PointerSensor as J } from "../../vendor/.bun/@dnd-kit_core@6.3.1_6f4b9a1cfb20c0ae/vendor/@dnd-kit/core/dist/core.esm.js";
|
|
6
6
|
import { arrayMove as Q, SortableContext as X, horizontalListSortingStrategy as Y, sortableKeyboardCoordinates as ee } from "../../vendor/.bun/@dnd-kit_sortable@10.0.0_1d291640e1250bbe/vendor/@dnd-kit/sortable/dist/sortable.esm.js";
|
|
7
|
-
import { SLOT_ATTR as oe, shorthands as h, mergeClasses as te } from "@epilot/zenith-runtime/v1
|
|
7
|
+
import { SLOT_ATTR as oe, shorthands as h, mergeClasses as te } from "@epilot/zenith-runtime/v1";
|
|
8
8
|
import { makeZenithStyles as ne } from "../../styles/make-styles.js";
|
|
9
9
|
import { gray2 as re, fontWeightSemibold as ie, grayA6 as O, spacingElement1 as z } from "../../tokens/index.js";
|
|
10
10
|
import { TableHeader as ae, TableRow as se, TableHead as L } from "../table/table.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data-table-header.js","sources":["../../../src/components/data-table/data-table-header.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { useCallback, useMemo } from \"react\"\nimport { flexRender, type Header } from \"@tanstack/react-table\"\nimport {\n DndContext,\n closestCenter,\n KeyboardSensor,\n PointerSensor,\n useSensor,\n useSensors,\n type DragEndEvent,\n type Modifier,\n} from \"@dnd-kit/core\"\nimport {\n SortableContext,\n horizontalListSortingStrategy,\n arrayMove,\n sortableKeyboardCoordinates,\n} from \"@dnd-kit/sortable\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1/core\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\nimport { TableHeader, TableRow, TableHead } from \"../table/table\"\nimport {\n useDataTable,\n useDataTableContent,\n useDataTableVirtualizer,\n} from \"./hooks\"\nimport { DataTableHeaderDraggable } from \"./data-table-header-draggable\"\nimport {\n getPinnedColumnOffset,\n isLastLeftPinnedColumn,\n isFirstRightPinnedColumn,\n} from \"./data-table-pinning-utils\"\n\n// Restrict drag movement to horizontal axis only\nconst restrictToHorizontalAxis: Modifier = ({ transform }) => ({\n ...transform,\n y: 0,\n})\n\n// TanStack Table's default column width\nconst DEFAULT_COLUMN_WIDTH = 150\n\n/** Check if a column can be reordered */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction isColumnReorderable(column: Header<any, unknown>[\"column\"]): boolean {\n if (column.id === \"select\") return false\n const meta = column.columnDef.meta as { enableOrdering?: boolean } | undefined\n if (meta?.enableOrdering === false) return false\n return true\n}\n\nconst useStyles = makeZenithStyles({\n // Painted on the cells, as DataTableRow's rule is: WebKit draws no\n // box-shadow on a <tr>.\n headerRowBorder: {\n \"& > th\": {\n backgroundImage: `linear-gradient(${tokens.grayA6}, ${tokens.grayA6})`,\n backgroundSize: \"100% 1px\",\n backgroundPosition: \"bottom\",\n backgroundRepeat: \"no-repeat\",\n },\n },\n headerTitle: {\n display: \"block\",\n ...shorthands.overflow(\"hidden\"),\n whiteSpace: \"nowrap\",\n fontWeight: tokens.fontWeightSemibold,\n // The clip truncates long titles, but a control in the header (the\n // select-all checkbox) needs its focus ring drawn outside its box: give\n // the clip room for it, and take that room back so layout is unchanged.\n boxSizing: \"border-box\",\n ...shorthands.padding(tokens.spacingElement1),\n ...shorthands.margin(`calc(${tokens.spacingElement1} * -1)`),\n },\n shadowLeft: {\n boxShadow: \"2px 0 5px -2px rgba(0,0,0,0.1)\",\n },\n shadowRight: {\n boxShadow: \"-2px 0 5px -2px rgba(0,0,0,0.1)\",\n },\n})\n\nexport type DataTableHeaderProps = {\n /** Additional class name */\n className?: string\n /** Whether to make header sticky */\n sticky?: boolean\n /** Background color for sticky header. Default: tokens.gray2 */\n stickyBackground?: string\n}\n\n/**\n * Renders the table header with column headers.\n * Must be used within a DataTable component.\n */\nexport const DataTableHeader = React.forwardRef<\n HTMLTableSectionElement,\n DataTableHeaderProps\n>(function DataTableHeader(\n { className, sticky, stickyBackground = tokens.gray2 },\n ref\n) {\n const styles = useStyles()\n const {\n table,\n disableColumnResizing,\n showHeaderBorder,\n fitHeaderWidth,\n enableColumnOrdering,\n } = useDataTable()\n const enableColumnResizing = !disableColumnResizing\n const virtualizerContext = useDataTableVirtualizer()\n const contentContext = useDataTableContent()\n const spacerWidth = contentContext?.spacerWidth ?? 0\n\n // Auto-enable sticky when virtualization is active\n const isSticky = sticky ?? Boolean(virtualizerContext)\n\n // DnD sensors for column reordering\n const sensors = useSensors(\n useSensor(PointerSensor, {\n activationConstraint: { distance: 5 },\n }),\n useSensor(KeyboardSensor, {\n coordinateGetter: sortableKeyboardCoordinates,\n })\n )\n\n const handleDragEnd = useCallback(\n (event: DragEndEvent) => {\n const { active, over } = event\n if (!over || active.id === over.id) return\n\n const currentOrder =\n table.getState().columnOrder && table.getState().columnOrder.length > 0\n ? table.getState().columnOrder\n : table.getAllLeafColumns().map((c) => c.id)\n\n const oldIndex = currentOrder.indexOf(active.id as string)\n const newIndex = currentOrder.indexOf(over.id as string)\n\n if (oldIndex === -1 || newIndex === -1) return\n\n const newOrder = arrayMove(currentOrder, oldIndex, newIndex)\n table.setColumnOrder(newOrder)\n },\n [table]\n )\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const renderHeaders = (headers: Header<any, unknown>[]) =>\n headers.map((header) => {\n const isPinned = header.column.getIsPinned()\n const pinnedOffset = isPinned\n ? getPinnedColumnOffset(header.column, table)\n : undefined\n const isLastLeft = isLastLeftPinnedColumn(header.column, table)\n const isFirstRight = isFirstRightPinnedColumn(header.column, table)\n const columnMeta = header.column.columnDef.meta as\n { align?: \"left\" | \"center\" | \"right\" } | undefined\n const align = columnMeta?.align\n\n const cellStyle: React.CSSProperties = {\n width: enableColumnResizing\n ? header.getSize()\n : header.getSize() !== DEFAULT_COLUMN_WIDTH\n ? header.getSize()\n : undefined,\n minWidth: fitHeaderWidth ? \"max-content\" : undefined,\n backgroundColor: isSticky || isPinned ? stickyBackground : undefined,\n position:\n isSticky || isPinned\n ? \"sticky\"\n : enableColumnResizing\n ? \"relative\"\n : undefined,\n top: isSticky ? 0 : undefined,\n left: isPinned === \"left\" ? `${pinnedOffset}px` : undefined,\n right: isPinned === \"right\" ? `${pinnedOffset}px` : undefined,\n zIndex: isPinned ? 30 : isSticky ? 10 : undefined,\n // Reduce padding for sortable headers\n ...(() => {\n const meta = header.column.columnDef.meta as\n | {\n _sortableHeaderWrapped?: boolean\n align?: \"left\" | \"right\" | \"center\"\n }\n | undefined\n const shouldReducePadding =\n meta?._sortableHeaderWrapped ||\n (header.column.getCanSort() &&\n typeof header.column.columnDef.header === \"function\")\n if (!shouldReducePadding) return {}\n return meta?.align === \"right\"\n ? { paddingRight: 8 }\n : { paddingLeft: 8 }\n })(),\n }\n\n const cellClassName = mergeClasses(\n isLastLeft && styles.shadowLeft,\n isFirstRight && styles.shadowRight\n )\n\n const ariaSort =\n header.column.getIsSorted() === \"asc\"\n ? (\"ascending\" as const)\n : header.column.getIsSorted() === \"desc\"\n ? (\"descending\" as const)\n : header.column.getCanSort()\n ? (\"none\" as const)\n : undefined\n\n const headerContent = (\n <span className={styles.headerTitle}>\n {header.isPlaceholder\n ? null\n : flexRender(header.column.columnDef.header, header.getContext())}\n </span>\n )\n\n if (enableColumnOrdering) {\n const canReorder = isColumnReorderable(header.column) && !isPinned\n\n return (\n <DataTableHeaderDraggable\n key={header.id}\n headerId={header.column.id}\n disabled={!canReorder}\n align={align}\n aria-sort={ariaSort}\n style={cellStyle}\n className={cellClassName}\n >\n {headerContent}\n </DataTableHeaderDraggable>\n )\n }\n\n return (\n <TableHead\n key={header.id}\n align={align}\n aria-sort={ariaSort}\n style={cellStyle}\n className={cellClassName}\n >\n {headerContent}\n </TableHead>\n )\n })\n\n // Get column IDs for SortableContext\n const orderedColumnIds = table.getAllLeafColumns().map((col) => col.id)\n\n const headerContent = (\n <TableHeader\n ref={ref}\n data-slot=\"data-table-header\"\n {...{ [SLOT_ATTR]: \"data-table-header\" }}\n data-fs-element=\"DataTable-Header\"\n className={className}\n >\n {table.getHeaderGroups().map((headerGroup) => (\n <TableRow\n key={headerGroup.id}\n noHover\n className={\n showHeaderBorder !== false ? styles.headerRowBorder : undefined\n }\n >\n {enableColumnOrdering ? (\n <SortableContext\n items={orderedColumnIds}\n strategy={horizontalListSortingStrategy}\n >\n {renderHeaders(headerGroup.headers)}\n </SortableContext>\n ) : (\n renderHeaders(headerGroup.headers)\n )}\n {/* Spacer cell - absorbs remaining width when columns < container */}\n {spacerWidth > 0 && (\n <TableHead\n data-spacer\n aria-hidden=\"true\"\n style={{\n width: spacerWidth,\n padding: 0,\n backgroundColor: isSticky ? stickyBackground : undefined,\n position: isSticky ? \"sticky\" : undefined,\n top: isSticky ? 0 : undefined,\n zIndex: isSticky ? 5 : undefined,\n }}\n />\n )}\n </TableRow>\n ))}\n </TableHeader>\n )\n\n const a11yContainer = useMemo(\n () =>\n enableColumnOrdering && typeof document !== \"undefined\"\n ? document.body\n : undefined,\n [enableColumnOrdering]\n )\n\n // Wrap with DndContext; portal a11y elements to body to avoid invalid DOM nesting in <table>\n if (enableColumnOrdering) {\n return (\n <DndContext\n sensors={sensors}\n collisionDetection={closestCenter}\n onDragEnd={handleDragEnd}\n modifiers={[restrictToHorizontalAxis]}\n accessibility={{ container: a11yContainer }}\n >\n {headerContent}\n </DndContext>\n )\n }\n\n return headerContent\n})\n"],"names":["restrictToHorizontalAxis","transform","DEFAULT_COLUMN_WIDTH","isColumnReorderable","column","meta","useStyles","makeZenithStyles","tokens.grayA6","shorthands","tokens.fontWeightSemibold","tokens.spacingElement1","DataTableHeader","React","className","sticky","stickyBackground","tokens.gray2","ref","styles","table","disableColumnResizing","showHeaderBorder","fitHeaderWidth","enableColumnOrdering","useDataTable","enableColumnResizing","virtualizerContext","useDataTableVirtualizer","contentContext","useDataTableContent","spacerWidth","isSticky","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","sortableKeyboardCoordinates","handleDragEnd","useCallback","event","active","over","currentOrder","c","oldIndex","newIndex","newOrder","arrayMove","renderHeaders","headers","header","isPinned","pinnedOffset","getPinnedColumnOffset","isLastLeft","isLastLeftPinnedColumn","isFirstRight","isFirstRightPinnedColumn","columnMeta","align","cellStyle","cellClassName","mergeClasses","ariaSort","headerContent","jsx","flexRender","canReorder","DataTableHeaderDraggable","TableHead","orderedColumnIds","col","TableHeader","SLOT_ATTR","headerGroup","jsxs","TableRow","SortableContext","horizontalListSortingStrategy","a11yContainer","useMemo","DndContext","closestCenter"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"data-table-header.js","sources":["../../../src/components/data-table/data-table-header.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { useCallback, useMemo } from \"react\"\nimport { flexRender, type Header } from \"@tanstack/react-table\"\nimport {\n DndContext,\n closestCenter,\n KeyboardSensor,\n PointerSensor,\n useSensor,\n useSensors,\n type DragEndEvent,\n type Modifier,\n} from \"@dnd-kit/core\"\nimport {\n SortableContext,\n horizontalListSortingStrategy,\n arrayMove,\n sortableKeyboardCoordinates,\n} from \"@dnd-kit/sortable\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\nimport { TableHeader, TableRow, TableHead } from \"../table/table\"\nimport {\n useDataTable,\n useDataTableContent,\n useDataTableVirtualizer,\n} from \"./hooks\"\nimport { DataTableHeaderDraggable } from \"./data-table-header-draggable\"\nimport {\n getPinnedColumnOffset,\n isLastLeftPinnedColumn,\n isFirstRightPinnedColumn,\n} from \"./data-table-pinning-utils\"\n\n// Restrict drag movement to horizontal axis only\nconst restrictToHorizontalAxis: Modifier = ({ transform }) => ({\n ...transform,\n y: 0,\n})\n\n// TanStack Table's default column width\nconst DEFAULT_COLUMN_WIDTH = 150\n\n/** Check if a column can be reordered */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction isColumnReorderable(column: Header<any, unknown>[\"column\"]): boolean {\n if (column.id === \"select\") return false\n const meta = column.columnDef.meta as { enableOrdering?: boolean } | undefined\n if (meta?.enableOrdering === false) return false\n return true\n}\n\nconst useStyles = makeZenithStyles({\n // Painted on the cells, as DataTableRow's rule is: WebKit draws no\n // box-shadow on a <tr>.\n headerRowBorder: {\n \"& > th\": {\n backgroundImage: `linear-gradient(${tokens.grayA6}, ${tokens.grayA6})`,\n backgroundSize: \"100% 1px\",\n backgroundPosition: \"bottom\",\n backgroundRepeat: \"no-repeat\",\n },\n },\n headerTitle: {\n display: \"block\",\n ...shorthands.overflow(\"hidden\"),\n whiteSpace: \"nowrap\",\n fontWeight: tokens.fontWeightSemibold,\n // The clip truncates long titles, but a control in the header (the\n // select-all checkbox) needs its focus ring drawn outside its box: give\n // the clip room for it, and take that room back so layout is unchanged.\n boxSizing: \"border-box\",\n ...shorthands.padding(tokens.spacingElement1),\n ...shorthands.margin(`calc(${tokens.spacingElement1} * -1)`),\n },\n shadowLeft: {\n boxShadow: \"2px 0 5px -2px rgba(0,0,0,0.1)\",\n },\n shadowRight: {\n boxShadow: \"-2px 0 5px -2px rgba(0,0,0,0.1)\",\n },\n})\n\nexport type DataTableHeaderProps = {\n /** Additional class name */\n className?: string\n /** Whether to make header sticky */\n sticky?: boolean\n /** Background color for sticky header. Default: tokens.gray2 */\n stickyBackground?: string\n}\n\n/**\n * Renders the table header with column headers.\n * Must be used within a DataTable component.\n */\nexport const DataTableHeader = React.forwardRef<\n HTMLTableSectionElement,\n DataTableHeaderProps\n>(function DataTableHeader(\n { className, sticky, stickyBackground = tokens.gray2 },\n ref\n) {\n const styles = useStyles()\n const {\n table,\n disableColumnResizing,\n showHeaderBorder,\n fitHeaderWidth,\n enableColumnOrdering,\n } = useDataTable()\n const enableColumnResizing = !disableColumnResizing\n const virtualizerContext = useDataTableVirtualizer()\n const contentContext = useDataTableContent()\n const spacerWidth = contentContext?.spacerWidth ?? 0\n\n // Auto-enable sticky when virtualization is active\n const isSticky = sticky ?? Boolean(virtualizerContext)\n\n // DnD sensors for column reordering\n const sensors = useSensors(\n useSensor(PointerSensor, {\n activationConstraint: { distance: 5 },\n }),\n useSensor(KeyboardSensor, {\n coordinateGetter: sortableKeyboardCoordinates,\n })\n )\n\n const handleDragEnd = useCallback(\n (event: DragEndEvent) => {\n const { active, over } = event\n if (!over || active.id === over.id) return\n\n const currentOrder =\n table.getState().columnOrder && table.getState().columnOrder.length > 0\n ? table.getState().columnOrder\n : table.getAllLeafColumns().map((c) => c.id)\n\n const oldIndex = currentOrder.indexOf(active.id as string)\n const newIndex = currentOrder.indexOf(over.id as string)\n\n if (oldIndex === -1 || newIndex === -1) return\n\n const newOrder = arrayMove(currentOrder, oldIndex, newIndex)\n table.setColumnOrder(newOrder)\n },\n [table]\n )\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const renderHeaders = (headers: Header<any, unknown>[]) =>\n headers.map((header) => {\n const isPinned = header.column.getIsPinned()\n const pinnedOffset = isPinned\n ? getPinnedColumnOffset(header.column, table)\n : undefined\n const isLastLeft = isLastLeftPinnedColumn(header.column, table)\n const isFirstRight = isFirstRightPinnedColumn(header.column, table)\n const columnMeta = header.column.columnDef.meta as\n { align?: \"left\" | \"center\" | \"right\" } | undefined\n const align = columnMeta?.align\n\n const cellStyle: React.CSSProperties = {\n width: enableColumnResizing\n ? header.getSize()\n : header.getSize() !== DEFAULT_COLUMN_WIDTH\n ? header.getSize()\n : undefined,\n minWidth: fitHeaderWidth ? \"max-content\" : undefined,\n backgroundColor: isSticky || isPinned ? stickyBackground : undefined,\n position:\n isSticky || isPinned\n ? \"sticky\"\n : enableColumnResizing\n ? \"relative\"\n : undefined,\n top: isSticky ? 0 : undefined,\n left: isPinned === \"left\" ? `${pinnedOffset}px` : undefined,\n right: isPinned === \"right\" ? `${pinnedOffset}px` : undefined,\n zIndex: isPinned ? 30 : isSticky ? 10 : undefined,\n // Reduce padding for sortable headers\n ...(() => {\n const meta = header.column.columnDef.meta as\n | {\n _sortableHeaderWrapped?: boolean\n align?: \"left\" | \"right\" | \"center\"\n }\n | undefined\n const shouldReducePadding =\n meta?._sortableHeaderWrapped ||\n (header.column.getCanSort() &&\n typeof header.column.columnDef.header === \"function\")\n if (!shouldReducePadding) return {}\n return meta?.align === \"right\"\n ? { paddingRight: 8 }\n : { paddingLeft: 8 }\n })(),\n }\n\n const cellClassName = mergeClasses(\n isLastLeft && styles.shadowLeft,\n isFirstRight && styles.shadowRight\n )\n\n const ariaSort =\n header.column.getIsSorted() === \"asc\"\n ? (\"ascending\" as const)\n : header.column.getIsSorted() === \"desc\"\n ? (\"descending\" as const)\n : header.column.getCanSort()\n ? (\"none\" as const)\n : undefined\n\n const headerContent = (\n <span className={styles.headerTitle}>\n {header.isPlaceholder\n ? null\n : flexRender(header.column.columnDef.header, header.getContext())}\n </span>\n )\n\n if (enableColumnOrdering) {\n const canReorder = isColumnReorderable(header.column) && !isPinned\n\n return (\n <DataTableHeaderDraggable\n key={header.id}\n headerId={header.column.id}\n disabled={!canReorder}\n align={align}\n aria-sort={ariaSort}\n style={cellStyle}\n className={cellClassName}\n >\n {headerContent}\n </DataTableHeaderDraggable>\n )\n }\n\n return (\n <TableHead\n key={header.id}\n align={align}\n aria-sort={ariaSort}\n style={cellStyle}\n className={cellClassName}\n >\n {headerContent}\n </TableHead>\n )\n })\n\n // Get column IDs for SortableContext\n const orderedColumnIds = table.getAllLeafColumns().map((col) => col.id)\n\n const headerContent = (\n <TableHeader\n ref={ref}\n data-slot=\"data-table-header\"\n {...{ [SLOT_ATTR]: \"data-table-header\" }}\n data-fs-element=\"DataTable-Header\"\n className={className}\n >\n {table.getHeaderGroups().map((headerGroup) => (\n <TableRow\n key={headerGroup.id}\n noHover\n className={\n showHeaderBorder !== false ? styles.headerRowBorder : undefined\n }\n >\n {enableColumnOrdering ? (\n <SortableContext\n items={orderedColumnIds}\n strategy={horizontalListSortingStrategy}\n >\n {renderHeaders(headerGroup.headers)}\n </SortableContext>\n ) : (\n renderHeaders(headerGroup.headers)\n )}\n {/* Spacer cell - absorbs remaining width when columns < container */}\n {spacerWidth > 0 && (\n <TableHead\n data-spacer\n aria-hidden=\"true\"\n style={{\n width: spacerWidth,\n padding: 0,\n backgroundColor: isSticky ? stickyBackground : undefined,\n position: isSticky ? \"sticky\" : undefined,\n top: isSticky ? 0 : undefined,\n zIndex: isSticky ? 5 : undefined,\n }}\n />\n )}\n </TableRow>\n ))}\n </TableHeader>\n )\n\n const a11yContainer = useMemo(\n () =>\n enableColumnOrdering && typeof document !== \"undefined\"\n ? document.body\n : undefined,\n [enableColumnOrdering]\n )\n\n // Wrap with DndContext; portal a11y elements to body to avoid invalid DOM nesting in <table>\n if (enableColumnOrdering) {\n return (\n <DndContext\n sensors={sensors}\n collisionDetection={closestCenter}\n onDragEnd={handleDragEnd}\n modifiers={[restrictToHorizontalAxis]}\n accessibility={{ container: a11yContainer }}\n >\n {headerContent}\n </DndContext>\n )\n }\n\n return headerContent\n})\n"],"names":["restrictToHorizontalAxis","transform","DEFAULT_COLUMN_WIDTH","isColumnReorderable","column","meta","useStyles","makeZenithStyles","tokens.grayA6","shorthands","tokens.fontWeightSemibold","tokens.spacingElement1","DataTableHeader","React","className","sticky","stickyBackground","tokens.gray2","ref","styles","table","disableColumnResizing","showHeaderBorder","fitHeaderWidth","enableColumnOrdering","useDataTable","enableColumnResizing","virtualizerContext","useDataTableVirtualizer","contentContext","useDataTableContent","spacerWidth","isSticky","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","sortableKeyboardCoordinates","handleDragEnd","useCallback","event","active","over","currentOrder","c","oldIndex","newIndex","newOrder","arrayMove","renderHeaders","headers","header","isPinned","pinnedOffset","getPinnedColumnOffset","isLastLeft","isLastLeftPinnedColumn","isFirstRight","isFirstRightPinnedColumn","columnMeta","align","cellStyle","cellClassName","mergeClasses","ariaSort","headerContent","jsx","flexRender","canReorder","DataTableHeaderDraggable","TableHead","orderedColumnIds","col","TableHeader","SLOT_ATTR","headerGroup","jsxs","TableRow","SortableContext","horizontalListSortingStrategy","a11yContainer","useMemo","DndContext","closestCenter"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as o } from "react/jsx-runtime";
|
|
2
2
|
import * as i from "react";
|
|
3
|
-
import { mergeClasses as s, SLOT_ATTR as l, shorthands as m } from "@epilot/zenith-runtime/v1
|
|
3
|
+
import { mergeClasses as s, SLOT_ATTR as l, shorthands as m } from "@epilot/zenith-runtime/v1";
|
|
4
4
|
import { makeZenithStyles as c } from "../../styles/make-styles.js";
|
|
5
5
|
import { boxModel as e } from "../../styles/host-reset.js";
|
|
6
6
|
import { grayA11 as d, spacingElement2 as p, spacingLayout2 as f } from "../../tokens/index.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data-table-loading.js","sources":["../../../src/components/data-table/data-table-loading.tsx"],"sourcesContent":["import * as React from \"react\"\nimport type { ReactNode } from \"react\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1
|
|
1
|
+
{"version":3,"file":"data-table-loading.js","sources":["../../../src/components/data-table/data-table-loading.tsx"],"sourcesContent":["import * as React from \"react\"\nimport type { ReactNode } from \"react\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel } from \"../../styles/host-reset\"\nimport * as tokens from \"../../tokens\"\nimport { Spinner } from \"../spinner/spinner\"\n\nconst useStyles = makeZenithStyles({\n root: {\n ...boxModel,\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n justifyContent: \"center\",\n gap: tokens.spacingElement2,\n ...shorthands.paddingBlock(tokens.spacingLayout2),\n },\n spinner: {\n ...boxModel,\n width: \"2.5rem\",\n height: \"2.5rem\",\n color: tokens.grayA11,\n },\n})\n\nexport type DataTableLoadingProps = {\n /** Additional class name */\n className?: string\n /** Custom loading content (overrides default spinner) */\n children?: ReactNode\n}\n\n/**\n * Loading state display for DataTable.\n * Renders a centered spinner by default, or custom content when children are provided.\n */\nexport const DataTableLoading = React.forwardRef<\n HTMLDivElement,\n DataTableLoadingProps\n>(function DataTableLoading({ className, children }, ref) {\n const styles = useStyles()\n\n return (\n <div\n ref={ref}\n data-slot=\"data-table-loading\"\n {...{ [SLOT_ATTR]: \"data-table-loading\" }}\n className={mergeClasses(styles.root, className)}\n >\n {children ?? <Spinner className={styles.spinner} />}\n </div>\n )\n})\n"],"names":["useStyles","makeZenithStyles","boxModel","tokens.spacingElement2","shorthands","tokens.spacingLayout2","tokens.grayA11","DataTableLoading","React","className","children","ref","styles","jsx","SLOT_ATTR","mergeClasses","Spinner"],"mappings":";;;;;;;AAUA,MAAMA,IAAYC,EAAiB;AAAA,EACjC,MAAM;AAAA,IACJ,GAAGC;AAAA,IACH,SAAS;AAAA,IACT,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,KAAKC;AAAAA,IACL,GAAGC,EAAW,aAAaC,CAAqB;AAAA,EAAA;AAAA,EAElD,SAAS;AAAA,IACP,GAAGH;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAOI;AAAAA,EAAO;AAElB,CAAC,GAaYC,IAAmBC,EAAM,WAGpC,SAA0B,EAAE,WAAAC,GAAW,UAAAC,EAAA,GAAYC,GAAK;AACxD,QAAMC,IAASZ,EAAA;AAEf,SACE,gBAAAa;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,aAAU;AAAA,MACJ,CAACG,CAAS,GAAG;AAAA,MACnB,WAAWC,EAAaH,EAAO,MAAMH,CAAS;AAAA,MAE7C,UAAAC,KAAY,gBAAAG,EAACG,GAAA,EAAQ,WAAWJ,EAAO,QAAA,CAAS;AAAA,IAAA;AAAA,EAAA;AAGvD,CAAC;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as T } from "react/jsx-runtime";
|
|
2
2
|
import * as H from "react";
|
|
3
|
-
import { mergeClasses as I, SLOT_ATTR as E, shorthands as P } from "@epilot/zenith-runtime/v1
|
|
3
|
+
import { mergeClasses as I, SLOT_ATTR as E, shorthands as P } from "@epilot/zenith-runtime/v1";
|
|
4
4
|
import { makeZenithStyles as w } from "../../styles/make-styles.js";
|
|
5
5
|
import { boxModel as M } from "../../styles/host-reset.js";
|
|
6
6
|
import { accent9 as N, accent8 as f, accentA8 as W, grayA4 as _ } from "../../tokens/index.js";
|