@epilot/zenith-react 0.2.0-next.5 → 0.2.0-next.6
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/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 +1 -1
- 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 +1 -1
- 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 +133 -122
- package/dist/components/segmented-control/segmented-control.js.map +1 -1
- package/dist/components/select/select.js +1 -1
- 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 +1 -1
- 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/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 +4 -3
|
@@ -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\"\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
|
+
{"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/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 { 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/core.js";
|
|
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\"\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;"}
|
|
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/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\"\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/core.js";
|
|
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\"\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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"}
|
|
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/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 { 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":";;;;;;;;;AAaA,MAAMA,IAAmB,CAACC,MACxB,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;AAAA,MAAA,gBAAAE,EAAC,YAAO,IAAG,KAAI,IAAG,KAAI,GAAE,OAAM;AAAA,wBAC7B,UAAA,EAAO,IAAG,MAAK,IAAG,KAAI,GAAE,OAAM;AAAA,wBAC9B,UAAA,EAAO,IAAG,KAAI,IAAG,MAAK,GAAE,OAAM;AAAA,wBAC9B,UAAA,EAAO,IAAG,MAAK,IAAG,MAAK,GAAE,OAAM;AAAA,wBAC/B,UAAA,EAAO,IAAG,KAAI,IAAG,MAAK,GAAE,OAAM;AAAA,wBAC9B,UAAA,EAAO,IAAG,MAAK,IAAG,MAAK,GAAE,MAAA,CAAM;AAAA,IAAA;AAAA,EAAA;AAClC,GAGIC,IAAYC,EAAiB;AAAA,EACjC,MAAM;AAAA;AAAA,IAEJ,CAAC,YAAYC,CAAS,mCAAmC,GAAG;AAAA,MAC1D,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAEF,OAAO;AAAA,IACL,SAAS;AAAA,IACT,YAAY;AAAA,EAAA;AAAA,EAEd,YAAY;AAAA,IACV,GAAGC;AAAA,IACH,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,OAAOC;AAAAA,IACP,SAAS;AAAA,IACT,oBAAoB;AAAA,IACpB,oBAAoB;AAAA,IACpB,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,iBAAiB;AAAA,IACjB,GAAGC,EAAW,YAAY,CAAC;AAAA,IAC3B,GAAGA,EAAW,QAAQ,CAAC;AAAA,IACvB,WAAW;AAAA,MACT,OAAOC;AAAAA,IAAO;AAAA,IAEhB,mBAAmB;AAAA,MACjB,SAAS;AAAA,MACT,cAAc;AAAA,MACd,cAAc;AAAA,MACd,eAAe;AAAA,MACf,cAAcC;AAAAA,IAAO;AAAA,IAEvB,YAAY;AAAA,MACV,QAAQ;AAAA,IAAA;AAAA,EACV;AAAA,EAEF,SAAS;AAAA,IACP,GAAGC;AAAA,IACH,UAAU;AAAA,IACV,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,WAAW;AAAA,EAAA;AAAA,EAEb,MAAM;AAAA,IACJ,GAAGA;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,EAAA;AAEZ,CAAC,GAgBYC,IAA2BC,EAAM,WAG5C,SACA;AAAA,EACE,UAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,UAAAC;AAAA,EACA,OAAOC;AAAA,EACP,WAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAASlB,EAAA,GACT;AAAA,IACJ,YAAAmB;AAAA,IACA,WAAAC;AAAA,IACA,YAAAC;AAAA,IACA,WAAAC;AAAA,IACA,YAAAC;AAAA,IACA,YAAAC;AAAA,EAAA,IACEC,EAAY,EAAE,IAAId,GAAU,UAAAC,GAAU,GAEpCc,IAAYhB,EAAM;AAAA,IACtB,CAACiB,MAAsC;AACrC,MAAAN,EAAWM,CAAI,GACX,OAAOV,KAAQ,aACjBA,EAAIU,CAAI,IACCV,MACPA,EAA4D,UAC5DU;AAAA,IAEN;AAAA,IACA,CAACN,GAAYJ,CAAG;AAAA,EAAA,GAGZW,IAAuB;AAAA,IAC3B,GAAGd;AAAA,IACH,WAAWe,EAAI,UAAU,SAASP,CAAS;AAAA,IAC3C,YAAAC;AAAA,IACA,GAAIC,KAAc,EAAE,QAAQ,IAAI,SAAS,IAAA;AAAA,EAAI;AAG/C,SACE,gBAAAzB;AAAA,IAAC+B;AAAA,IAAA;AAAA,MACC,KAAKJ;AAAA,MACL,OAAAE;AAAA,MACA,WAAWG,EAAa,CAACnB,KAAYM,EAAO,MAAMH,CAAS;AAAA,MAC3D,aAAU;AAAA,MACJ,CAACb,CAAS,GAAG;AAAA,MACnB,mBAAgB;AAAA,MACf,GAAGc;AAAA,MAEJ,UAAA,gBAAAlB;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWoB,EAAO;AAAA,UAClB,aAAU;AAAA,UACJ,CAAChB,CAAS,GAAG;AAAA,UAElB,UAAA;AAAA,YAAA,CAACU,KACA,gBAAAb;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,WAAWmB,EAAO;AAAA,gBAClB,aAAU;AAAA,gBACJ,CAAChB,CAAS,GAAG;AAAA,gBACnB,cAAW;AAAA,gBACV,GAAGiB;AAAA,gBACH,GAAGC;AAAA,gBAEJ,UAAA,gBAAArB,EAACH,GAAA,EAAiB,WAAWsB,EAAO,KAAA,CAAM;AAAA,cAAA;AAAA,YAAA;AAAA,YAG9C,gBAAAnB;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAWmB,EAAO;AAAA,gBAClB,aAAU;AAAA,gBACJ,CAAChB,CAAS,GAAG;AAAA,gBAElB,UAAAW;AAAA,cAAA;AAAA,YAAA;AAAA,UACH;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN,CAAC;"}
|
|
@@ -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/core.js";
|
|
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\"\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/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,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/core.js";
|
|
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\"\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
|
+
{"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/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 { 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/core.js";
|
|
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";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data-table-resize-handle.js","sources":["../../../src/components/data-table/data-table-resize-handle.tsx"],"sourcesContent":["import * as React from \"react\"\nimport type { Header } 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\"\nimport { useDataTable, useDataTableContent } from \"./hooks\"\n\nconst useStyles = makeZenithStyles({\n handle: {\n ...boxModel,\n position: \"absolute\",\n right: 0,\n top: 0,\n height: \"100%\",\n width: \"2px\",\n cursor: \"col-resize\",\n userSelect: \"none\",\n touchAction: \"none\",\n backgroundColor: tokens.grayA4,\n transitionProperty: \"background-color, opacity\",\n transitionDuration: \"75ms\",\n \"&::before\": {\n position: \"absolute\",\n top: 0,\n bottom: 0,\n left: \"-3px\",\n right: \"-3px\",\n content: '\"\"',\n },\n \"&:hover\": {\n backgroundColor: tokens.accent8,\n },\n \"&:focus-visible\": {\n outlineWidth: \"2px\",\n outlineStyle: \"solid\",\n outlineOffset: \"1px\",\n outlineColor: tokens.accentA8,\n backgroundColor: tokens.accent8,\n },\n },\n resizing: {\n backgroundColor: tokens.accent9,\n \"&::before\": {\n position: \"fixed\",\n ...shorthands.inset(0),\n zIndex: 50,\n cursor: \"col-resize\",\n content: '\"\"',\n },\n },\n hidden: {\n opacity: 0,\n \"&:hover\": {\n opacity: 1,\n },\n \"&:focus-visible\": {\n opacity: 1,\n },\n },\n})\n\nexport type DataTableResizeHandleProps<TData = unknown, TValue = unknown> = {\n /** The TanStack Table header instance */\n header: Header<TData, TValue>\n /** Accessible label for the resize handle. Recommended for i18n and accessibility. Receives column.id as parameter. */\n ariaLabel?: string | ((columnId: string) => string)\n /** Whether the handle is visible. When false, handle is hidden but becomes visible on direct hover or focus. */\n isVisible?: boolean\n /** Step increment in pixels for keyboard resizing. Default: 10 */\n step?: number\n className?: string\n} & Omit<React.ComponentPropsWithoutRef<\"div\">, \"children\">\n\nfunction DataTableResizeHandleInner<TData = unknown, TValue = unknown>(\n {\n header,\n ariaLabel,\n isVisible = true,\n step = 10,\n className,\n onMouseDown,\n onTouchStart,\n onKeyDown,\n ...props\n }: DataTableResizeHandleProps<TData, TValue>,\n ref: React.ForwardedRef<HTMLDivElement>\n) {\n const styles = useStyles()\n const { table } = useDataTable()\n const column = header.column\n const contentContext = useDataTableContent()\n\n const resolvedAriaLabel = ariaLabel\n ? typeof ariaLabel === \"function\"\n ? ariaLabel(column.id)\n : ariaLabel\n : `Resize ${column.id} column`\n\n if (!column.getCanResize()) {\n return null\n }\n\n const isResizing = column.getIsResizing()\n\n // Wrap resize handlers to sync widths before resize starts\n // This prevents snap/jump by syncing visual widths to stored widths\n const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {\n onMouseDown?.(e)\n if (!e.defaultPrevented) {\n contentContext?.syncColumnWidthsBeforeResize()\n header.getResizeHandler()(e)\n }\n }\n\n const handleTouchStart = (e: React.TouchEvent<HTMLDivElement>) => {\n onTouchStart?.(e)\n if (!e.defaultPrevented) {\n contentContext?.syncColumnWidthsBeforeResize()\n header.getResizeHandler()(e)\n }\n }\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n onKeyDown?.(e)\n if (e.defaultPrevented) return\n\n if (e.key === \"ArrowLeft\" || e.key === \"ArrowRight\") {\n e.preventDefault()\n\n const currentSize = column.getSize()\n const minSize = column.columnDef.minSize ?? 20\n const maxSize = column.columnDef.maxSize ?? Number.MAX_SAFE_INTEGER\n const delta = e.key === \"ArrowRight\" ? step : -step\n const newSize = Math.min(maxSize, Math.max(minSize, currentSize + delta))\n\n table.setColumnSizing((prev) => ({\n ...prev,\n [column.id]: newSize,\n }))\n } else if (e.key === \"Home\") {\n e.preventDefault()\n\n const minSize = column.columnDef.minSize ?? 20\n table.setColumnSizing((prev) => ({\n ...prev,\n [column.id]: minSize,\n }))\n } else if (e.key === \"End\" && column.columnDef.maxSize !== undefined) {\n e.preventDefault()\n\n const maxSize = column.columnDef.maxSize\n table.setColumnSizing((prev) => ({\n ...prev,\n [column.id]: maxSize,\n }))\n }\n }\n\n const currentSize = Math.round(column.getSize())\n\n return (\n <div\n ref={ref}\n data-slot=\"data-table-resize-handle\"\n {...{ [SLOT_ATTR]: \"data-table-resize-handle\" }}\n data-fs-element=\"DataTable-ResizeHandle\"\n role=\"separator\"\n aria-orientation=\"vertical\"\n aria-label={resolvedAriaLabel}\n aria-valuenow={currentSize}\n aria-valuemin={column.columnDef.minSize ?? 20}\n aria-valuemax={column.columnDef.maxSize}\n tabIndex={0}\n onMouseDown={handleMouseDown}\n onTouchStart={handleTouchStart}\n onKeyDown={handleKeyDown}\n className={mergeClasses(\n styles.handle,\n isResizing && styles.resizing,\n !isVisible && styles.hidden,\n className\n )}\n {...props}\n />\n )\n}\n\n/**\n * Resize handle for column headers.\n * Subtly visible by default, more prominent on hover and during drag.\n * Supports keyboard navigation via Left/Right arrow keys.\n */\nexport const DataTableResizeHandle = React.forwardRef(\n DataTableResizeHandleInner\n) as <TData = unknown, TValue = unknown>(\n props: DataTableResizeHandleProps<TData, TValue> & {\n ref?: React.Ref<HTMLDivElement>\n }\n) => React.ReactElement | null\n"],"names":["useStyles","makeZenithStyles","boxModel","tokens.grayA4","tokens.accent8","tokens.accentA8","tokens.accent9","shorthands","DataTableResizeHandleInner","header","ariaLabel","isVisible","step","className","onMouseDown","onTouchStart","onKeyDown","props","ref","styles","table","useDataTable","column","contentContext","useDataTableContent","resolvedAriaLabel","isResizing","handleMouseDown","handleTouchStart","handleKeyDown","currentSize","minSize","maxSize","delta","newSize","prev","jsx","SLOT_ATTR","mergeClasses","DataTableResizeHandle","React"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"data-table-resize-handle.js","sources":["../../../src/components/data-table/data-table-resize-handle.tsx"],"sourcesContent":["import * as React from \"react\"\nimport type { Header } from \"@tanstack/react-table\"\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, useDataTableContent } from \"./hooks\"\n\nconst useStyles = makeZenithStyles({\n handle: {\n ...boxModel,\n position: \"absolute\",\n right: 0,\n top: 0,\n height: \"100%\",\n width: \"2px\",\n cursor: \"col-resize\",\n userSelect: \"none\",\n touchAction: \"none\",\n backgroundColor: tokens.grayA4,\n transitionProperty: \"background-color, opacity\",\n transitionDuration: \"75ms\",\n \"&::before\": {\n position: \"absolute\",\n top: 0,\n bottom: 0,\n left: \"-3px\",\n right: \"-3px\",\n content: '\"\"',\n },\n \"&:hover\": {\n backgroundColor: tokens.accent8,\n },\n \"&:focus-visible\": {\n outlineWidth: \"2px\",\n outlineStyle: \"solid\",\n outlineOffset: \"1px\",\n outlineColor: tokens.accentA8,\n backgroundColor: tokens.accent8,\n },\n },\n resizing: {\n backgroundColor: tokens.accent9,\n \"&::before\": {\n position: \"fixed\",\n ...shorthands.inset(0),\n zIndex: 50,\n cursor: \"col-resize\",\n content: '\"\"',\n },\n },\n hidden: {\n opacity: 0,\n \"&:hover\": {\n opacity: 1,\n },\n \"&:focus-visible\": {\n opacity: 1,\n },\n },\n})\n\nexport type DataTableResizeHandleProps<TData = unknown, TValue = unknown> = {\n /** The TanStack Table header instance */\n header: Header<TData, TValue>\n /** Accessible label for the resize handle. Recommended for i18n and accessibility. Receives column.id as parameter. */\n ariaLabel?: string | ((columnId: string) => string)\n /** Whether the handle is visible. When false, handle is hidden but becomes visible on direct hover or focus. */\n isVisible?: boolean\n /** Step increment in pixels for keyboard resizing. Default: 10 */\n step?: number\n className?: string\n} & Omit<React.ComponentPropsWithoutRef<\"div\">, \"children\">\n\nfunction DataTableResizeHandleInner<TData = unknown, TValue = unknown>(\n {\n header,\n ariaLabel,\n isVisible = true,\n step = 10,\n className,\n onMouseDown,\n onTouchStart,\n onKeyDown,\n ...props\n }: DataTableResizeHandleProps<TData, TValue>,\n ref: React.ForwardedRef<HTMLDivElement>\n) {\n const styles = useStyles()\n const { table } = useDataTable()\n const column = header.column\n const contentContext = useDataTableContent()\n\n const resolvedAriaLabel = ariaLabel\n ? typeof ariaLabel === \"function\"\n ? ariaLabel(column.id)\n : ariaLabel\n : `Resize ${column.id} column`\n\n if (!column.getCanResize()) {\n return null\n }\n\n const isResizing = column.getIsResizing()\n\n // Wrap resize handlers to sync widths before resize starts\n // This prevents snap/jump by syncing visual widths to stored widths\n const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {\n onMouseDown?.(e)\n if (!e.defaultPrevented) {\n contentContext?.syncColumnWidthsBeforeResize()\n header.getResizeHandler()(e)\n }\n }\n\n const handleTouchStart = (e: React.TouchEvent<HTMLDivElement>) => {\n onTouchStart?.(e)\n if (!e.defaultPrevented) {\n contentContext?.syncColumnWidthsBeforeResize()\n header.getResizeHandler()(e)\n }\n }\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n onKeyDown?.(e)\n if (e.defaultPrevented) return\n\n if (e.key === \"ArrowLeft\" || e.key === \"ArrowRight\") {\n e.preventDefault()\n\n const currentSize = column.getSize()\n const minSize = column.columnDef.minSize ?? 20\n const maxSize = column.columnDef.maxSize ?? Number.MAX_SAFE_INTEGER\n const delta = e.key === \"ArrowRight\" ? step : -step\n const newSize = Math.min(maxSize, Math.max(minSize, currentSize + delta))\n\n table.setColumnSizing((prev) => ({\n ...prev,\n [column.id]: newSize,\n }))\n } else if (e.key === \"Home\") {\n e.preventDefault()\n\n const minSize = column.columnDef.minSize ?? 20\n table.setColumnSizing((prev) => ({\n ...prev,\n [column.id]: minSize,\n }))\n } else if (e.key === \"End\" && column.columnDef.maxSize !== undefined) {\n e.preventDefault()\n\n const maxSize = column.columnDef.maxSize\n table.setColumnSizing((prev) => ({\n ...prev,\n [column.id]: maxSize,\n }))\n }\n }\n\n const currentSize = Math.round(column.getSize())\n\n return (\n <div\n ref={ref}\n data-slot=\"data-table-resize-handle\"\n {...{ [SLOT_ATTR]: \"data-table-resize-handle\" }}\n data-fs-element=\"DataTable-ResizeHandle\"\n role=\"separator\"\n aria-orientation=\"vertical\"\n aria-label={resolvedAriaLabel}\n aria-valuenow={currentSize}\n aria-valuemin={column.columnDef.minSize ?? 20}\n aria-valuemax={column.columnDef.maxSize}\n tabIndex={0}\n onMouseDown={handleMouseDown}\n onTouchStart={handleTouchStart}\n onKeyDown={handleKeyDown}\n className={mergeClasses(\n styles.handle,\n isResizing && styles.resizing,\n !isVisible && styles.hidden,\n className\n )}\n {...props}\n />\n )\n}\n\n/**\n * Resize handle for column headers.\n * Subtly visible by default, more prominent on hover and during drag.\n * Supports keyboard navigation via Left/Right arrow keys.\n */\nexport const DataTableResizeHandle = React.forwardRef(\n DataTableResizeHandleInner\n) as <TData = unknown, TValue = unknown>(\n props: DataTableResizeHandleProps<TData, TValue> & {\n ref?: React.Ref<HTMLDivElement>\n }\n) => React.ReactElement | null\n"],"names":["useStyles","makeZenithStyles","boxModel","tokens.grayA4","tokens.accent8","tokens.accentA8","tokens.accent9","shorthands","DataTableResizeHandleInner","header","ariaLabel","isVisible","step","className","onMouseDown","onTouchStart","onKeyDown","props","ref","styles","table","useDataTable","column","contentContext","useDataTableContent","resolvedAriaLabel","isResizing","handleMouseDown","handleTouchStart","handleKeyDown","currentSize","minSize","maxSize","delta","newSize","prev","jsx","SLOT_ATTR","mergeClasses","DataTableResizeHandle","React"],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsxs as A, jsx as p } from "react/jsx-runtime";
|
|
2
2
|
import * as B from "react";
|
|
3
3
|
import { flexRender as N } from "../../vendor/.bun/@tanstack_react-table@8.21.3_6f4b9a1cfb20c0ae/vendor/@tanstack/react-table/build/lib/index.js";
|
|
4
|
-
import { mergeClasses as w, SLOT_ATTR as u, shorthands as g } from "@epilot/zenith-runtime/v1";
|
|
4
|
+
import { mergeClasses as w, SLOT_ATTR as u, shorthands as g } from "@epilot/zenith-runtime/v1/core.js";
|
|
5
5
|
import { makeZenithStyles as $ } from "../../styles/make-styles.js";
|
|
6
6
|
import { boxModel as h } from "../../styles/host-reset.js";
|
|
7
7
|
import { grayA6 as k, accentA3 as x } from "../../tokens/index.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data-table-row.js","sources":["../../../src/components/data-table/data-table-row.tsx"],"sourcesContent":["import * as React from \"react\"\nimport type { CSSProperties, MouseEvent, KeyboardEvent } from \"react\"\nimport type { Row, Cell } from \"@tanstack/react-table\"\nimport { flexRender } 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\"\nimport { TableRow, TableCell } from \"../table/table\"\nimport { useDataTable, useDataTableContent } from \"./hooks\"\nimport type { DataTableCellOverflow } from \"./data-table-context\"\nimport {\n getPinnedColumnOffset,\n isLastLeftPinnedColumn,\n isFirstRightPinnedColumn,\n} from \"./data-table-pinning-utils\"\n\ntype CellAlign = \"left\" | \"center\" | \"right\"\n\n/**\n * Gets the cell overflow mode, checking column meta first, then falling back to table default.\n */\nfunction getCellOverflow<TData>(\n cell: Cell<TData, unknown>,\n tableDefault: DataTableCellOverflow\n): DataTableCellOverflow {\n const columnMeta = cell.column.columnDef.meta as\n { cellOverflow?: DataTableCellOverflow } | undefined\n return columnMeta?.cellOverflow ?? tableDefault\n}\n\n/**\n * Gets the cell alignment from column meta.\n */\nfunction getCellAlign<TData>(\n cell: Cell<TData, unknown>\n): CellAlign | undefined {\n const columnMeta = cell.column.columnDef.meta as\n { align?: CellAlign } | undefined\n return columnMeta?.align\n}\n\n// Interactive element selectors that should NOT trigger row click\nconst INTERACTIVE_SELECTORS = [\n \"button\",\n \"a\",\n \"input\",\n \"select\",\n \"textarea\",\n '[role=\"button\"]',\n '[role=\"checkbox\"]',\n '[role=\"link\"]',\n '[role=\"menuitem\"]',\n '[role=\"menuitemcheckbox\"]',\n '[role=\"menuitemradio\"]',\n '[role=\"option\"]',\n '[role=\"radio\"]',\n '[role=\"slider\"]',\n '[role=\"spinbutton\"]',\n '[role=\"switch\"]',\n '[role=\"tab\"]',\n \"[data-radix-collection-item]\",\n `[${SLOT_ATTR}=\"checkbox\"]`,\n]\n\nconst useStyles = makeZenithStyles({\n rowClickable: {\n cursor: \"pointer\",\n \":hover\": {\n backgroundColor: tokens.accentA3,\n },\n },\n rowSelected: {\n backgroundColor: tokens.accentA3,\n },\n // The rule is painted on the cells: WebKit draws no box-shadow on a <tr>,\n // and row borders don't paint under DataTableContent's\n // `border-collapse: separate`. A background image also stays clear of the\n // pinned cells' own box-shadow and adds no height.\n rowBorder: {\n \"& > td\": {\n backgroundImage: `linear-gradient(${tokens.grayA6}, ${tokens.grayA6})`,\n backgroundSize: \"100% 1px\",\n backgroundPosition: \"bottom\",\n backgroundRepeat: \"no-repeat\",\n },\n \"&:last-child > td\": {\n backgroundImage: \"none\",\n },\n },\n cellTruncate: {\n ...boxModel,\n maxWidth: 0,\n ...shorthands.overflow(\"hidden\"),\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n },\n cellWrap: {\n ...boxModel,\n maxWidth: 0,\n ...shorthands.overflow(\"hidden\"),\n overflowWrap: \"break-word\",\n wordBreak: \"break-word\",\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 DataTableRowProps<TData> = {\n /** The row instance from TanStack Table */\n row: Row<TData>\n /** Optional style (used for virtualized row heights) */\n style?: CSSProperties\n /** Additional class name */\n className?: string\n}\n\n/**\n * Renders a single table row with its cells.\n * Supports clickable rows when onRowClick is provided via DataTable context.\n */\nfunction DataTableRowInner<TData>(\n { row, style, className }: DataTableRowProps<TData>,\n ref: React.ForwardedRef<HTMLTableRowElement>\n) {\n const styles = useStyles()\n const {\n table,\n onRowClick,\n clickableRowClassName,\n selectedRowClassName,\n cellOverflow: tableCellOverflow = \"truncate\",\n showRowBorders,\n disableColumnResizing,\n } = useDataTable<TData>()\n const contentContext = useDataTableContent()\n const spacerWidth = contentContext?.spacerWidth ?? 0\n\n const enableColumnResizing = !disableColumnResizing\n const isClickable = Boolean(onRowClick)\n\n const handleClick = (event: MouseEvent<HTMLTableRowElement>) => {\n if (!onRowClick) return\n\n // Check if click originated from an interactive element\n const target = event.target as HTMLElement\n const isInteractiveElement = INTERACTIVE_SELECTORS.some((selector) =>\n target.closest(selector)\n )\n\n if (isInteractiveElement) {\n return // Don't trigger row click for interactive elements\n }\n\n onRowClick(row, event)\n }\n\n const handleKeyDown = (event: KeyboardEvent<HTMLTableRowElement>) => {\n if (!onRowClick) return\n\n if (event.key === \"Enter\" || event.key === \" \") {\n // Check if key event originated from an interactive element\n const target = event.target as HTMLElement\n const isInteractiveElement = INTERACTIVE_SELECTORS.some((selector) =>\n target.closest(selector)\n )\n\n if (isInteractiveElement) {\n return // Let the interactive element handle the event\n }\n\n event.preventDefault()\n onRowClick(row, event as unknown as MouseEvent<HTMLTableRowElement>)\n }\n }\n\n return (\n <TableRow\n ref={ref}\n data-slot=\"data-table-row\"\n {...{ [SLOT_ATTR]: \"data-table-row\" }}\n data-fs-element=\"DataTable-Row\"\n data-state={row.getIsSelected() ? \"selected\" : undefined}\n data-clickable={isClickable ? \"true\" : undefined}\n style={style}\n className={mergeClasses(\n showRowBorders !== false && styles.rowBorder,\n isClickable && (clickableRowClassName ?? styles.rowClickable),\n row.getIsSelected() && (selectedRowClassName ?? styles.rowSelected),\n className\n )}\n onClick={isClickable ? handleClick : undefined}\n tabIndex={isClickable ? 0 : undefined}\n onKeyDown={isClickable ? handleKeyDown : undefined}\n >\n {row.getVisibleCells().map((cell) => {\n const overflow = getCellOverflow(cell, tableCellOverflow)\n const align = getCellAlign(cell)\n const isPinned = cell.column.getIsPinned()\n const pinnedOffset = isPinned\n ? getPinnedColumnOffset(cell.column, table)\n : undefined\n const isLastLeft = isLastLeftPinnedColumn(cell.column, table)\n const isFirstRight = isFirstRightPinnedColumn(cell.column, table)\n\n return (\n <TableCell\n key={cell.id}\n data-slot=\"data-table-cell\"\n {...{ [SLOT_ATTR]: \"data-table-cell\" }}\n data-fs-element=\"DataTable-Cell\"\n data-pinned={isPinned || undefined}\n align={align}\n style={{\n width:\n enableColumnResizing || isPinned\n ? cell.column.getSize()\n : undefined,\n left: isPinned === \"left\" ? `${pinnedOffset}px` : undefined,\n right: isPinned === \"right\" ? `${pinnedOffset}px` : undefined,\n }}\n className={mergeClasses(\n overflow === \"truncate\" && styles.cellTruncate,\n overflow === \"wrap\" && styles.cellWrap,\n isLastLeft && styles.shadowLeft,\n isFirstRight && styles.shadowRight\n )}\n >\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </TableCell>\n )\n })}\n {/* Spacer cell - matches header spacer column */}\n {spacerWidth > 0 && (\n <TableCell\n data-spacer\n aria-hidden=\"true\"\n style={{ width: spacerWidth, padding: 0 }}\n />\n )}\n </TableRow>\n )\n}\n\nexport const DataTableRow = React.forwardRef(DataTableRowInner) as <TData>(\n props: DataTableRowProps<TData> & {\n ref?: React.Ref<HTMLTableRowElement>\n }\n) => React.ReactElement | null\n"],"names":["getCellOverflow","cell","tableDefault","columnMeta","getCellAlign","INTERACTIVE_SELECTORS","SLOT_ATTR","useStyles","makeZenithStyles","tokens.accentA3","tokens.grayA6","boxModel","shorthands","DataTableRowInner","row","style","className","ref","styles","table","onRowClick","clickableRowClassName","selectedRowClassName","tableCellOverflow","showRowBorders","disableColumnResizing","useDataTable","contentContext","useDataTableContent","spacerWidth","enableColumnResizing","isClickable","handleClick","event","target","selector","handleKeyDown","jsxs","TableRow","mergeClasses","overflow","align","isPinned","pinnedOffset","getPinnedColumnOffset","isLastLeft","isLastLeftPinnedColumn","isFirstRight","isFirstRightPinnedColumn","jsx","TableCell","DataTableRow","React"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"data-table-row.js","sources":["../../../src/components/data-table/data-table-row.tsx"],"sourcesContent":["import * as React from \"react\"\nimport type { CSSProperties, MouseEvent, KeyboardEvent } from \"react\"\nimport type { Row, Cell } from \"@tanstack/react-table\"\nimport { flexRender } from \"@tanstack/react-table\"\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 { TableRow, TableCell } from \"../table/table\"\nimport { useDataTable, useDataTableContent } from \"./hooks\"\nimport type { DataTableCellOverflow } from \"./data-table-context\"\nimport {\n getPinnedColumnOffset,\n isLastLeftPinnedColumn,\n isFirstRightPinnedColumn,\n} from \"./data-table-pinning-utils\"\n\ntype CellAlign = \"left\" | \"center\" | \"right\"\n\n/**\n * Gets the cell overflow mode, checking column meta first, then falling back to table default.\n */\nfunction getCellOverflow<TData>(\n cell: Cell<TData, unknown>,\n tableDefault: DataTableCellOverflow\n): DataTableCellOverflow {\n const columnMeta = cell.column.columnDef.meta as\n { cellOverflow?: DataTableCellOverflow } | undefined\n return columnMeta?.cellOverflow ?? tableDefault\n}\n\n/**\n * Gets the cell alignment from column meta.\n */\nfunction getCellAlign<TData>(\n cell: Cell<TData, unknown>\n): CellAlign | undefined {\n const columnMeta = cell.column.columnDef.meta as\n { align?: CellAlign } | undefined\n return columnMeta?.align\n}\n\n// Interactive element selectors that should NOT trigger row click\nconst INTERACTIVE_SELECTORS = [\n \"button\",\n \"a\",\n \"input\",\n \"select\",\n \"textarea\",\n '[role=\"button\"]',\n '[role=\"checkbox\"]',\n '[role=\"link\"]',\n '[role=\"menuitem\"]',\n '[role=\"menuitemcheckbox\"]',\n '[role=\"menuitemradio\"]',\n '[role=\"option\"]',\n '[role=\"radio\"]',\n '[role=\"slider\"]',\n '[role=\"spinbutton\"]',\n '[role=\"switch\"]',\n '[role=\"tab\"]',\n \"[data-radix-collection-item]\",\n `[${SLOT_ATTR}=\"checkbox\"]`,\n]\n\nconst useStyles = makeZenithStyles({\n rowClickable: {\n cursor: \"pointer\",\n \":hover\": {\n backgroundColor: tokens.accentA3,\n },\n },\n rowSelected: {\n backgroundColor: tokens.accentA3,\n },\n // The rule is painted on the cells: WebKit draws no box-shadow on a <tr>,\n // and row borders don't paint under DataTableContent's\n // `border-collapse: separate`. A background image also stays clear of the\n // pinned cells' own box-shadow and adds no height.\n rowBorder: {\n \"& > td\": {\n backgroundImage: `linear-gradient(${tokens.grayA6}, ${tokens.grayA6})`,\n backgroundSize: \"100% 1px\",\n backgroundPosition: \"bottom\",\n backgroundRepeat: \"no-repeat\",\n },\n \"&:last-child > td\": {\n backgroundImage: \"none\",\n },\n },\n cellTruncate: {\n ...boxModel,\n maxWidth: 0,\n ...shorthands.overflow(\"hidden\"),\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n },\n cellWrap: {\n ...boxModel,\n maxWidth: 0,\n ...shorthands.overflow(\"hidden\"),\n overflowWrap: \"break-word\",\n wordBreak: \"break-word\",\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 DataTableRowProps<TData> = {\n /** The row instance from TanStack Table */\n row: Row<TData>\n /** Optional style (used for virtualized row heights) */\n style?: CSSProperties\n /** Additional class name */\n className?: string\n}\n\n/**\n * Renders a single table row with its cells.\n * Supports clickable rows when onRowClick is provided via DataTable context.\n */\nfunction DataTableRowInner<TData>(\n { row, style, className }: DataTableRowProps<TData>,\n ref: React.ForwardedRef<HTMLTableRowElement>\n) {\n const styles = useStyles()\n const {\n table,\n onRowClick,\n clickableRowClassName,\n selectedRowClassName,\n cellOverflow: tableCellOverflow = \"truncate\",\n showRowBorders,\n disableColumnResizing,\n } = useDataTable<TData>()\n const contentContext = useDataTableContent()\n const spacerWidth = contentContext?.spacerWidth ?? 0\n\n const enableColumnResizing = !disableColumnResizing\n const isClickable = Boolean(onRowClick)\n\n const handleClick = (event: MouseEvent<HTMLTableRowElement>) => {\n if (!onRowClick) return\n\n // Check if click originated from an interactive element\n const target = event.target as HTMLElement\n const isInteractiveElement = INTERACTIVE_SELECTORS.some((selector) =>\n target.closest(selector)\n )\n\n if (isInteractiveElement) {\n return // Don't trigger row click for interactive elements\n }\n\n onRowClick(row, event)\n }\n\n const handleKeyDown = (event: KeyboardEvent<HTMLTableRowElement>) => {\n if (!onRowClick) return\n\n if (event.key === \"Enter\" || event.key === \" \") {\n // Check if key event originated from an interactive element\n const target = event.target as HTMLElement\n const isInteractiveElement = INTERACTIVE_SELECTORS.some((selector) =>\n target.closest(selector)\n )\n\n if (isInteractiveElement) {\n return // Let the interactive element handle the event\n }\n\n event.preventDefault()\n onRowClick(row, event as unknown as MouseEvent<HTMLTableRowElement>)\n }\n }\n\n return (\n <TableRow\n ref={ref}\n data-slot=\"data-table-row\"\n {...{ [SLOT_ATTR]: \"data-table-row\" }}\n data-fs-element=\"DataTable-Row\"\n data-state={row.getIsSelected() ? \"selected\" : undefined}\n data-clickable={isClickable ? \"true\" : undefined}\n style={style}\n className={mergeClasses(\n showRowBorders !== false && styles.rowBorder,\n isClickable && (clickableRowClassName ?? styles.rowClickable),\n row.getIsSelected() && (selectedRowClassName ?? styles.rowSelected),\n className\n )}\n onClick={isClickable ? handleClick : undefined}\n tabIndex={isClickable ? 0 : undefined}\n onKeyDown={isClickable ? handleKeyDown : undefined}\n >\n {row.getVisibleCells().map((cell) => {\n const overflow = getCellOverflow(cell, tableCellOverflow)\n const align = getCellAlign(cell)\n const isPinned = cell.column.getIsPinned()\n const pinnedOffset = isPinned\n ? getPinnedColumnOffset(cell.column, table)\n : undefined\n const isLastLeft = isLastLeftPinnedColumn(cell.column, table)\n const isFirstRight = isFirstRightPinnedColumn(cell.column, table)\n\n return (\n <TableCell\n key={cell.id}\n data-slot=\"data-table-cell\"\n {...{ [SLOT_ATTR]: \"data-table-cell\" }}\n data-fs-element=\"DataTable-Cell\"\n data-pinned={isPinned || undefined}\n align={align}\n style={{\n width:\n enableColumnResizing || isPinned\n ? cell.column.getSize()\n : undefined,\n left: isPinned === \"left\" ? `${pinnedOffset}px` : undefined,\n right: isPinned === \"right\" ? `${pinnedOffset}px` : undefined,\n }}\n className={mergeClasses(\n overflow === \"truncate\" && styles.cellTruncate,\n overflow === \"wrap\" && styles.cellWrap,\n isLastLeft && styles.shadowLeft,\n isFirstRight && styles.shadowRight\n )}\n >\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </TableCell>\n )\n })}\n {/* Spacer cell - matches header spacer column */}\n {spacerWidth > 0 && (\n <TableCell\n data-spacer\n aria-hidden=\"true\"\n style={{ width: spacerWidth, padding: 0 }}\n />\n )}\n </TableRow>\n )\n}\n\nexport const DataTableRow = React.forwardRef(DataTableRowInner) as <TData>(\n props: DataTableRowProps<TData> & {\n ref?: React.Ref<HTMLTableRowElement>\n }\n) => React.ReactElement | null\n"],"names":["getCellOverflow","cell","tableDefault","columnMeta","getCellAlign","INTERACTIVE_SELECTORS","SLOT_ATTR","useStyles","makeZenithStyles","tokens.accentA3","tokens.grayA6","boxModel","shorthands","DataTableRowInner","row","style","className","ref","styles","table","onRowClick","clickableRowClassName","selectedRowClassName","tableCellOverflow","showRowBorders","disableColumnResizing","useDataTable","contentContext","useDataTableContent","spacerWidth","enableColumnResizing","isClickable","handleClick","event","target","selector","handleKeyDown","jsxs","TableRow","mergeClasses","overflow","align","isPinned","pinnedOffset","getPinnedColumnOffset","isLastLeft","isLastLeftPinnedColumn","isFirstRight","isFirstRightPinnedColumn","jsx","TableCell","DataTableRow","React"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as n } from "react/jsx-runtime";
|
|
2
2
|
import * as m from "react";
|
|
3
|
-
import { mergeClasses as i, SLOT_ATTR as p, shorthands as a } from "@epilot/zenith-runtime/v1";
|
|
3
|
+
import { mergeClasses as i, SLOT_ATTR as p, shorthands as a } from "@epilot/zenith-runtime/v1/core.js";
|
|
4
4
|
import { makeZenithStyles as d } from "../../styles/make-styles.js";
|
|
5
5
|
import { boxModel as b } from "../../styles/host-reset.js";
|
|
6
6
|
import { spacingGroup1 as t, spacingElement1 as f } from "../../tokens/index.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data-table-toolbar.js","sources":["../../../src/components/data-table/data-table-toolbar.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 justifyContent: \"space-between\",\n gap: tokens.spacingGroup1,\n ...shorthands.paddingInline(tokens.spacingElement1),\n ...shorthands.paddingBlock(tokens.spacingGroup1),\n },\n})\n\nexport type DataTableToolbarProps = React.ComponentProps<\"div\">\n\n/**\n * A toolbar wrapper for DataTable that contains filters, search, and actions.\n * Place above the table for consistent layout.\n */\nexport const DataTableToolbar = React.forwardRef<\n HTMLDivElement,\n DataTableToolbarProps\n>(function DataTableToolbar({ className, children, ...props }, ref) {\n const styles = useStyles()\n\n return (\n <div\n ref={ref}\n data-slot=\"data-table-toolbar\"\n {...{ [SLOT_ATTR]: \"data-table-toolbar\" }}\n data-fs-element=\"DataTable-Toolbar\"\n className={mergeClasses(styles.root, className)}\n {...props}\n >\n {children}\n </div>\n )\n})\n"],"names":["useStyles","makeZenithStyles","boxModel","tokens.spacingGroup1","shorthands","tokens.spacingElement1","DataTableToolbar","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,gBAAgB;AAAA,IAChB,KAAKC;AAAAA,IACL,GAAGC,EAAW,cAAcC,CAAsB;AAAA,IAClD,GAAGD,EAAW,aAAaD,CAAoB;AAAA,EAAA;AAEnD,CAAC,GAQYG,IAAmBC,EAAM,WAGpC,SAA0B,EAAE,WAAAC,GAAW,UAAAC,GAAU,GAAGC,EAAA,GAASC,GAAK;AAClE,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;"}
|
|
1
|
+
{"version":3,"file":"data-table-toolbar.js","sources":["../../../src/components/data-table/data-table-toolbar.tsx"],"sourcesContent":["import * as React from \"react\"\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\"\n\nconst useStyles = makeZenithStyles({\n root: {\n ...boxModel,\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n gap: tokens.spacingGroup1,\n ...shorthands.paddingInline(tokens.spacingElement1),\n ...shorthands.paddingBlock(tokens.spacingGroup1),\n },\n})\n\nexport type DataTableToolbarProps = React.ComponentProps<\"div\">\n\n/**\n * A toolbar wrapper for DataTable that contains filters, search, and actions.\n * Place above the table for consistent layout.\n */\nexport const DataTableToolbar = React.forwardRef<\n HTMLDivElement,\n DataTableToolbarProps\n>(function DataTableToolbar({ className, children, ...props }, ref) {\n const styles = useStyles()\n\n return (\n <div\n ref={ref}\n data-slot=\"data-table-toolbar\"\n {...{ [SLOT_ATTR]: \"data-table-toolbar\" }}\n data-fs-element=\"DataTable-Toolbar\"\n className={mergeClasses(styles.root, className)}\n {...props}\n >\n {children}\n </div>\n )\n})\n"],"names":["useStyles","makeZenithStyles","boxModel","tokens.spacingGroup1","shorthands","tokens.spacingElement1","DataTableToolbar","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,gBAAgB;AAAA,IAChB,KAAKC;AAAAA,IACL,GAAGC,EAAW,cAAcC,CAAsB;AAAA,IAClD,GAAGD,EAAW,aAAaD,CAAoB;AAAA,EAAA;AAEnD,CAAC,GAQYG,IAAmBC,EAAM,WAGpC,SAA0B,EAAE,WAAAC,GAAW,UAAAC,GAAU,GAAGC,EAAA,GAASC,GAAK;AAClE,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 n } from "react/jsx-runtime";
|
|
|
2
2
|
import * as Je from "react";
|
|
3
3
|
import { useState as o, useRef as Ke, useEffect as h, useMemo as u, useCallback as Qe } from "react";
|
|
4
4
|
import { useReactTable as Xe } from "../../vendor/.bun/@tanstack_react-table@8.21.3_6f4b9a1cfb20c0ae/vendor/@tanstack/react-table/build/lib/index.js";
|
|
5
|
-
import { mergeClasses as Ye, SLOT_ATTR as $e } from "@epilot/zenith-runtime/v1";
|
|
5
|
+
import { mergeClasses as Ye, SLOT_ATTR as $e } from "@epilot/zenith-runtime/v1/core.js";
|
|
6
6
|
import { makeZenithStyles as Ce } from "../../styles/make-styles.js";
|
|
7
7
|
import { boxModel as ze } from "../../styles/host-reset.js";
|
|
8
8
|
import { Checkbox as ee } from "../checkbox/checkbox.js";
|