neba 1.9.0 → 1.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +35 -5
- package/dist/components/accordion/Accordion.js +1 -1
- package/dist/components/alert/Alert.js +1 -1
- package/dist/components/anchor/Anchor.js +1 -1
- package/dist/components/animate-lighting/AnimateLighting.js +1 -1
- package/dist/components/app-logo/AppLogo.js +1 -1
- package/dist/components/aspect-ratio/AspectRatio.js +1 -1
- package/dist/components/avatar/Avatar.js +1 -1
- package/dist/components/avatar-group/AvatarGroup.js +1 -1
- package/dist/components/badge/Badge.js +1 -1
- package/dist/components/bar-chart/BarChart.d.ts +1 -1
- package/dist/components/bar-chart/BarChart.js +1 -1
- package/dist/components/blockquote/Blockquote.js +1 -1
- package/dist/components/bottom-navigation/BottomNavigation.js +1 -1
- package/dist/components/box/Box.js +1 -1
- package/dist/components/breadcrumb/Breadcrumb.js +1 -1
- package/dist/components/button/Button.js +1 -1
- package/dist/components/button-group/ButtonGroup.js +1 -1
- package/dist/components/calendar/Calendar.d.ts +72 -0
- package/dist/components/calendar/Calendar.js +1 -0
- package/dist/components/calendar/index.d.ts +2 -0
- package/dist/components/calendar/index.js +1 -0
- package/dist/components/card/Card.js +1 -1
- package/dist/components/carousel/Carousel.js +1 -1
- package/dist/components/chat-bubble/ChatBubble.js +1 -1
- package/dist/components/checkbox/Checkbox.d.ts +13 -1
- package/dist/components/checkbox/Checkbox.js +1 -1
- package/dist/components/chip/Chip.js +1 -1
- package/dist/components/code-block/CodeBlock.js +1 -1
- package/dist/components/collapsible/Collapsible.js +1 -1
- package/dist/components/color-picker/ColorPicker.js +1 -1
- package/dist/components/combobox/Combobox.d.ts +29 -2
- package/dist/components/combobox/Combobox.js +1 -1
- package/dist/components/command-palette/CommandPalette.d.ts +19 -2
- package/dist/components/command-palette/CommandPalette.js +1 -1
- package/dist/components/confirm/Confirm.d.ts +83 -0
- package/dist/components/confirm/Confirm.js +1 -0
- package/dist/components/confirm/index.d.ts +2 -0
- package/dist/components/confirm/index.js +1 -0
- package/dist/components/container/Container.js +1 -1
- package/dist/components/data-list/DataList.js +1 -1
- package/dist/components/data-table/DataTable.d.ts +104 -1
- package/dist/components/data-table/DataTable.js +1 -1
- package/dist/components/date-picker/DatePicker.d.ts +40 -8
- package/dist/components/date-picker/DatePicker.js +1 -1
- package/dist/components/date-range-picker/DateRangePicker.js +1 -1
- package/dist/components/date-time-picker/DateTimePicker.js +1 -1
- package/dist/components/dialog/Dialog.d.ts +19 -2
- package/dist/components/dialog/Dialog.js +1 -1
- package/dist/components/divider/Divider.js +1 -1
- package/dist/components/drawer/Drawer.d.ts +1 -1
- package/dist/components/drawer/Drawer.js +1 -1
- package/dist/components/empty/Empty.js +1 -1
- package/dist/components/file-picker/FilePicker.js +1 -1
- package/dist/components/floating-action-button/FloatingActionButton.js +1 -1
- package/dist/components/floating-bottom-navigation/FloatingBottomNavigation.js +1 -1
- package/dist/components/footer/Footer.js +1 -1
- package/dist/components/gauge-chart/GaugeChart.d.ts +1 -1
- package/dist/components/gauge-chart/GaugeChart.js +1 -1
- package/dist/components/grid-container/GridContainer.js +1 -1
- package/dist/components/header/Header.js +1 -1
- package/dist/components/heatmap-chart/HeatmapChart.d.ts +1 -1
- package/dist/components/heatmap-chart/HeatmapChart.js +1 -1
- package/dist/components/highlight/Highlight.js +1 -1
- package/dist/components/hover-card/HoverCard.d.ts +1 -1
- package/dist/components/hover-card/HoverCard.js +1 -1
- package/dist/components/how-to-steps/HowToSteps.js +1 -1
- package/dist/components/image/Image.d.ts +70 -0
- package/dist/components/image/Image.js +1 -0
- package/dist/components/image/index.d.ts +2 -0
- package/dist/components/image/index.js +1 -0
- package/dist/components/list/List.js +1 -1
- package/dist/components/menubar/Menubar.js +1 -1
- package/dist/components/meter/Meter.js +1 -1
- package/dist/components/mockup/Mockup.js +1 -1
- package/dist/components/number-field/NumberField.d.ts +27 -2
- package/dist/components/number-field/NumberField.js +1 -1
- package/dist/components/otp-field/OtpField.js +1 -1
- package/dist/components/overlay/Overlay.d.ts +1 -1
- package/dist/components/overlay/Overlay.js +1 -1
- package/dist/components/page-layout/PageLayout.js +1 -1
- package/dist/components/pagination/Pagination.js +1 -1
- package/dist/components/panes/Panes.js +1 -1
- package/dist/components/pie-chart/PieChart.d.ts +1 -1
- package/dist/components/pie-chart/PieChart.js +1 -1
- package/dist/components/pill/Pill.js +1 -1
- package/dist/components/popconfirm/Popconfirm.d.ts +71 -0
- package/dist/components/popconfirm/Popconfirm.js +1 -0
- package/dist/components/popconfirm/index.d.ts +2 -0
- package/dist/components/popconfirm/index.js +1 -0
- package/dist/components/popover/Popover.d.ts +1 -1
- package/dist/components/popover/Popover.js +1 -1
- package/dist/components/portal/Portal.d.ts +48 -0
- package/dist/components/portal/Portal.js +1 -0
- package/dist/components/portal/index.d.ts +2 -0
- package/dist/components/portal/index.js +1 -0
- package/dist/components/progress-box/ProgressBox.js +1 -1
- package/dist/components/progress-circular/ProgressCircular.js +1 -1
- package/dist/components/progress-linear/ProgressLinear.js +1 -1
- package/dist/components/provider/NebaProvider.d.ts +99 -0
- package/dist/components/provider/NebaProvider.js +1 -0
- package/dist/components/provider/index.d.ts +3 -0
- package/dist/components/provider/index.js +1 -0
- package/dist/components/radio-group/RadioGroup.d.ts +22 -1
- package/dist/components/radio-group/RadioGroup.js +1 -1
- package/dist/components/rating/Rating.js +1 -1
- package/dist/components/scatter-chart/ScatterChart.d.ts +1 -1
- package/dist/components/scatter-chart/ScatterChart.js +1 -1
- package/dist/components/scroll-area/ScrollArea.js +1 -1
- package/dist/components/scroll-zone/ScrollZone.js +1 -1
- package/dist/components/select/Select.d.ts +16 -1
- package/dist/components/select/Select.js +1 -1
- package/dist/components/shortcut/Shortcut.d.ts +2 -1
- package/dist/components/shortcut/Shortcut.js +1 -1
- package/dist/components/sidebar/Sidebar.js +1 -1
- package/dist/components/sidebar/SidebarTrigger.js +1 -1
- package/dist/components/skeleton/Skeleton.js +1 -1
- package/dist/components/slider/Slider.js +1 -1
- package/dist/components/sparkline/Sparkline.js +1 -1
- package/dist/components/spoiler/Spoiler.js +1 -1
- package/dist/components/statistic/Statistic.js +1 -1
- package/dist/components/switch/Switch.d.ts +13 -1
- package/dist/components/switch/Switch.js +1 -1
- package/dist/components/table/Table.d.ts +21 -2
- package/dist/components/table/Table.js +1 -1
- package/dist/components/text-field/TextField.d.ts +27 -1
- package/dist/components/text-field/TextField.js +1 -1
- package/dist/components/text-link/TextLink.js +1 -1
- package/dist/components/time-picker/TimePicker.js +1 -1
- package/dist/components/timeline-chart/TimelineChart.d.ts +1 -1
- package/dist/components/timeline-chart/TimelineChart.js +1 -1
- package/dist/components/toast/Toast.d.ts +17 -2
- package/dist/components/toast/Toast.js +1 -1
- package/dist/components/toggle/Toggle.js +1 -1
- package/dist/components/toggle-group/ToggleGroup.js +1 -1
- package/dist/components/toolbar/Toolbar.js +1 -1
- package/dist/components/tooltip/Tooltip.d.ts +1 -1
- package/dist/components/tooltip/Tooltip.js +1 -1
- package/dist/components/tour/Tour.d.ts +17 -2
- package/dist/components/tour/Tour.js +1 -1
- package/dist/components/transfer/Transfer.js +1 -1
- package/dist/components/tree-select/TreeSelect.d.ts +88 -0
- package/dist/components/tree-select/TreeSelect.js +1 -0
- package/dist/components/tree-select/index.d.ts +2 -0
- package/dist/components/tree-select/index.js +1 -0
- package/dist/components/tree-view/TreeView.js +1 -1
- package/dist/components/visually-hidden/VisuallyHidden.d.ts +37 -0
- package/dist/components/visually-hidden/VisuallyHidden.js +1 -0
- package/dist/components/visually-hidden/index.d.ts +2 -0
- package/dist/components/visually-hidden/index.js +1 -0
- package/dist/components/window-pane/WindowPane.js +1 -1
- package/dist/hooks/index.d.ts +10 -0
- package/dist/hooks/index.js +1 -0
- package/dist/hooks/useDisclosure.d.ts +21 -0
- package/dist/hooks/useDisclosure.js +1 -0
- package/dist/hooks/useElementSize.d.ts +23 -0
- package/dist/hooks/useElementSize.js +1 -0
- package/dist/hooks/useMediaQuery.d.ts +27 -0
- package/dist/hooks/useMediaQuery.js +1 -0
- package/dist/hooks/useOnScreen.d.ts +24 -0
- package/dist/hooks/useOnScreen.js +1 -0
- package/dist/hooks/useShortcut.d.ts +34 -0
- package/dist/hooks/useShortcut.js +1 -0
- package/dist/index.d.ts +9 -0
- package/dist/index.js +1 -1
- package/dist/internal/calendar.d.ts +31 -5
- package/dist/internal/calendar.js +1 -1
- package/dist/internal/csv.d.ts +40 -0
- package/dist/internal/csv.js +1 -0
- package/dist/internal/date.d.ts +39 -1
- package/dist/internal/date.js +1 -1
- package/dist/internal/defaults.d.ts +46 -0
- package/dist/internal/defaults.js +1 -0
- package/dist/internal/i18n.d.ts +23 -0
- package/dist/internal/i18n.js +1 -1
- package/dist/internal/keys.d.ts +92 -0
- package/dist/internal/keys.js +1 -0
- package/dist/internal/media.d.ts +27 -0
- package/dist/internal/media.js +1 -1
- package/dist/internal/page-layout.d.ts +7 -0
- package/dist/internal/page-layout.js +1 -1
- package/dist/internal/picker.d.ts +7 -1
- package/dist/internal/picker.js +1 -1
- package/dist/locales/ar.js +1 -1
- package/dist/locales/de.js +1 -1
- package/dist/locales/es.js +1 -1
- package/dist/locales/fr.js +1 -1
- package/dist/locales/hi.js +1 -1
- package/dist/locales/id.js +1 -1
- package/dist/locales/it.js +1 -1
- package/dist/locales/ja.js +1 -1
- package/dist/locales/ko.js +1 -1
- package/dist/locales/nl.js +1 -1
- package/dist/locales/pl.js +1 -1
- package/dist/locales/pt.js +1 -1
- package/dist/locales/ru.js +1 -1
- package/dist/locales/th.js +1 -1
- package/dist/locales/tr.js +1 -1
- package/dist/locales/vi.js +1 -1
- package/dist/locales/zh-hans.js +1 -1
- package/dist/locales/zh-hant.js +1 -1
- package/dist/styles.css +1 -1
- package/dist/types.d.ts +73 -0
- package/package.json +6 -1
|
@@ -90,6 +90,19 @@ export interface DataTableColumn<Row> {
|
|
|
90
90
|
searchable?: boolean;
|
|
91
91
|
/** Leaves the column out without removing it from the list. */
|
|
92
92
|
hidden?: boolean;
|
|
93
|
+
/**
|
|
94
|
+
* Freezes the column against one edge while the rest scroll past it.
|
|
95
|
+
*
|
|
96
|
+
* A pinned column needs a `width`: the offsets the sticky cells sit at are
|
|
97
|
+
* the sum of the widths before them, and a column that has not said how wide
|
|
98
|
+
* it is has no number to add. Without one it is measured at the default.
|
|
99
|
+
*
|
|
100
|
+
* Pinning also **moves** the column: everything pinned to the start is drawn
|
|
101
|
+
* first, in the order given, and everything pinned to the end last. A frozen
|
|
102
|
+
* column in the middle of the scrolling ones would be a column that overlaps
|
|
103
|
+
* its neighbours instead of holding still.
|
|
104
|
+
*/
|
|
105
|
+
pinned?: 'start' | 'end';
|
|
93
106
|
/**
|
|
94
107
|
* The value behind the cell: what is sorted, and what the search is matched
|
|
95
108
|
* against. Defaults to `row[key]`.
|
|
@@ -107,6 +120,39 @@ export interface DataTableColumn<Row> {
|
|
|
107
120
|
* running row number.
|
|
108
121
|
*/
|
|
109
122
|
render?: (row: Row, index: number) => React.ReactNode;
|
|
123
|
+
/**
|
|
124
|
+
* What an export writes for this cell.
|
|
125
|
+
*
|
|
126
|
+
* Defaults to `value`, and then to `row[key]`. It is separate from `render`
|
|
127
|
+
* on purpose: a cell that draws a Chip, an Avatar or a progress bar has no
|
|
128
|
+
* text to put in a file, and `render`'s return is a React element rather than
|
|
129
|
+
* something a spreadsheet can hold.
|
|
130
|
+
*/
|
|
131
|
+
exportValue?: (row: Row) => unknown;
|
|
132
|
+
/** Leaves this column out of an export. @default true */
|
|
133
|
+
exportable?: boolean;
|
|
134
|
+
/**
|
|
135
|
+
* Lets a cell in this column be edited in place.
|
|
136
|
+
*
|
|
137
|
+
* A function decides per row — a locked record, a computed field, a row
|
|
138
|
+
* somebody else is holding. `onCellEdit` is what receives the new value; a
|
|
139
|
+
* column with no handler above it is not editable however this is set.
|
|
140
|
+
*/
|
|
141
|
+
editable?: boolean | ((row: Row) => boolean);
|
|
142
|
+
/**
|
|
143
|
+
* What kind of field the editor is. `number` keeps the keypad on a phone and
|
|
144
|
+
* hands back a number rather than a string.
|
|
145
|
+
* @default 'text'
|
|
146
|
+
*/
|
|
147
|
+
editType?: 'text' | 'number';
|
|
148
|
+
/**
|
|
149
|
+
* The one number that stands for a whole group of rows in this column.
|
|
150
|
+
*
|
|
151
|
+
* Called with the rows of one group. There is no `'sum' | 'avg'` shorthand
|
|
152
|
+
* on purpose: the moment a table has one column that needs a weighted mean
|
|
153
|
+
* or a distinct count, half the columns are functions and half are strings.
|
|
154
|
+
*/
|
|
155
|
+
aggregate?: (rows: Row[]) => React.ReactNode;
|
|
110
156
|
}
|
|
111
157
|
export interface DataTableProps<Row> extends NebaStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'children' | 'onSelect' | 'defaultValue'> {
|
|
112
158
|
/** The columns, in the order they appear. */
|
|
@@ -204,6 +250,26 @@ export interface DataTableProps<Row> extends NebaStyleProps, Omit<React.Componen
|
|
|
204
250
|
resizable?: boolean;
|
|
205
251
|
/** The widths, keyed by column. Use with `onColumnWidthsChange`. */
|
|
206
252
|
columnWidths?: Readonly<Record<string, number>>;
|
|
253
|
+
/**
|
|
254
|
+
* The order the columns are drawn in, as a list of keys.
|
|
255
|
+
*
|
|
256
|
+
* A key the list does not mention keeps its place behind the ones it does —
|
|
257
|
+
* so an order that names two columns moves those two and leaves the rest
|
|
258
|
+
* alone, and a column added to `columns` later appears without the stored
|
|
259
|
+
* order having to be migrated.
|
|
260
|
+
*/
|
|
261
|
+
columnOrder?: readonly string[];
|
|
262
|
+
defaultColumnOrder?: readonly string[];
|
|
263
|
+
onColumnOrderChange?: (order: string[]) => void;
|
|
264
|
+
/**
|
|
265
|
+
* Lets a header be dragged along the row to move its column.
|
|
266
|
+
*
|
|
267
|
+
* Off by default. It is a real gesture on a real control, and a table whose
|
|
268
|
+
* columns move when a reader meant to press a heading is worse than one whose
|
|
269
|
+
* columns do not move at all.
|
|
270
|
+
* @default false
|
|
271
|
+
*/
|
|
272
|
+
reorderable?: boolean;
|
|
207
273
|
/** What they start as, for an uncontrolled table. */
|
|
208
274
|
defaultColumnWidths?: Readonly<Record<string, number>>;
|
|
209
275
|
onColumnWidthsChange?: (widths: Record<string, number>) => void;
|
|
@@ -273,6 +339,43 @@ export interface DataTableProps<Row> extends NebaStyleProps, Omit<React.Componen
|
|
|
273
339
|
filter?: (row: Row, index: number) => boolean;
|
|
274
340
|
/** Content at the end of the bar the search field sits in. */
|
|
275
341
|
toolbar?: React.ReactNode;
|
|
342
|
+
/**
|
|
343
|
+
* Adds a button that writes the rows out as a CSV file.
|
|
344
|
+
*
|
|
345
|
+
* **Every row the reader is currently looking at, not the page they are on.**
|
|
346
|
+
* The search and the sort are applied and the paging is not, because a file
|
|
347
|
+
* of page 3 is not a file anybody asked for. A `manual` table exports the
|
|
348
|
+
* rows it was handed, which is the same rule seen from the server's side.
|
|
349
|
+
* @default false
|
|
350
|
+
*/
|
|
351
|
+
exportable?: boolean;
|
|
352
|
+
/** What the downloaded file is called. @default 'table.csv' */
|
|
353
|
+
exportFileName?: string;
|
|
354
|
+
/**
|
|
355
|
+
* Takes the CSV instead of downloading it — to post it somewhere, to open it
|
|
356
|
+
* in a viewer of your own, or to add a sheet around it.
|
|
357
|
+
*/
|
|
358
|
+
onExport?: (csv: string) => void;
|
|
359
|
+
/**
|
|
360
|
+
* Called when an edited cell is committed. Without it, nothing is editable.
|
|
361
|
+
*
|
|
362
|
+
* The table holds no copy of the rows: it hands the new value over and draws
|
|
363
|
+
* whatever comes back in `items`. A table that wrote into its own copy would
|
|
364
|
+
* be a table showing something the application does not know about.
|
|
365
|
+
*/
|
|
366
|
+
onCellEdit?: (row: Row, column: DataTableColumn<Row>, value: string | number) => void;
|
|
367
|
+
/**
|
|
368
|
+
* Groups the rows under a heading row, by whatever this returns.
|
|
369
|
+
*
|
|
370
|
+
* The grouping runs after the search and the sort, so a sorted table stays
|
|
371
|
+
* sorted inside each group and a filtered one groups only what is left.
|
|
372
|
+
* `undefined` from a row puts it in no group at all, above the rest.
|
|
373
|
+
*/
|
|
374
|
+
groupBy?: (row: Row) => string | undefined;
|
|
375
|
+
/** Whether a group can be folded away. @default true */
|
|
376
|
+
collapsibleGroups?: boolean;
|
|
377
|
+
/** Which groups start folded, by the label `groupBy` returned. */
|
|
378
|
+
defaultCollapsedGroups?: readonly string[];
|
|
276
379
|
/**
|
|
277
380
|
* Which stages the caller has already done — for a table whose rows come from
|
|
278
381
|
* a server a page at a time. `true` is all three.
|
|
@@ -320,4 +423,4 @@ export interface DataTableProps<Row> extends NebaStyleProps, Omit<React.Componen
|
|
|
320
423
|
* is doing it. Both paths render the same, which is what stops a table that
|
|
321
424
|
* starts local and grows remote from becoming a second component.
|
|
322
425
|
*/
|
|
323
|
-
export declare function DataTable<Row>(
|
|
426
|
+
export declare function DataTable<Row>(rawProps: DataTableProps<Row>): React.JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import*as n from"react";import{Box as a}from"../box/Box.js";import{Checkbox as l}from"../checkbox/Checkbox.js";import{Pagination as o}from"../pagination/Pagination.js";import{Select as s}from"../select/Select.js";import{TextField as i}from"../text-field/TextField.js";import{compareValues as c,dataHeaderHeights as u,dataRowHeights as d,dataTickWidths as p,defaultColumnWidth as m,keysBetween as h,minColumnWidth as f,nextSort as g,pageBounds as y,sortRows as v,virtualWindow as b}from"../../internal/data-table.js";import{beginPointerDrag as k}from"../../internal/drag.js";import{emptyMessages as w,fillMessage as x,tableMessages as C,useMessages as S}from"../../internal/i18n.js";import{searchHaystack as M,searchText as N}from"../../internal/search.js";import{ChevronIcon as K}from"../../internal/icons.js";import{observeResize as z}from"../../internal/observe.js";import{controlTextLeadingClasses as j,cx as $,hasContent as _,metaTextClasses as R,paddingXValues as D,srOnlyClasses as E,toLength as A}from"../../internal/styles.js";const P=["[--n-row:transparent]","[transition:background-color_var(--neba-duration)_var(--neba-ease)]"].join(" "),T={"--n-stripe":"color-mix(in oklab, var(--neba-fg) 4%, transparent)"},L=["group/sort flex w-full min-w-0 cursor-pointer items-center gap-1","text-inherit [outline:none]","[transition:color_var(--neba-duration)_var(--neba-ease)]","hover:text-(--n-accent)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1","[&_svg]:pointer-events-none [&_svg]:size-[1.15em] [&_svg]:shrink-0"].join(" "),H=["absolute inset-y-0 z-10 w-2 cursor-col-resize select-none","end-0 translate-x-1/2 rtl:-translate-x-1/2","after:absolute after:inset-y-1 after:start-1/2 after:w-px","after:[background:transparent]","after:[transition:background_var(--neba-duration)_var(--neba-ease)]","hover:after:[background:var(--n-accent)] data-[dragging]:after:[background:var(--n-accent)]"].join(" ");function I(){return t("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[e("circle",{cx:"7.25",cy:"7.25",r:"4.75",stroke:"currentColor",strokeWidth:"1.5"}),e("path",{d:"m10.75 10.75 2.75 2.75",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})]})}export function DataTable({headers:B,items:W,getRowKey:F,variant:O="outline",size:q="sm",color:U="primary",density:X="compact",elevation:Y=0,height:V,maxHeight:G,rowHeight:J,striped:Q=!1,hoverable:Z=!0,stickyHeader:ee=!0,caption:te,label:re,empty:ne,virtual:ae=!0,overscan:le=8,sortable:oe=!1,sortMode:se="single",sort:ie,defaultSort:ce,onSortChange:ue,resizable:de=!1,columnWidths:pe,defaultColumnWidths:me,onColumnWidthsChange:he,selectionMode:fe="none",selected:ge,defaultSelected:ye,onSelectedChange:ve,checkboxes:be=!1,onRowClick:ke,onRowActivate:we,paging:xe="scroll",page:Ce,defaultPage:Se=1,onPageChange:Me,pageSize:Ne,defaultPageSize:Ke=25,onPageSizeChange:ze,pageSizeOptions:je=[10,25,50,100],footer:$e,search:_e,defaultSearch:Re,onSearchChange:De,searchable:Ee=!1,searchPlaceholder:Ae,filter:Pe,toolbar:Te,manual:Le=!1,rowCount:He,locale:Ie,className:Be,style:We,...Fe}){const Oe=S(C,Ie),qe=S(w,Ie),Ue=n.useId(),Xe=J??d[X][q],Ye=u[X][q],Ve=D[X][q],Ge=n.useMemo(()=>new Set(!0===Le?["sort","filter","pages"]:Le||[]),[Le]),Je=n.useMemo(()=>B.filter(e=>!e.hidden),[B]),Qe=Je.some(e=>void 0!==e.group),Ze="none"!==fe,et="multiple"===fe,tt=Ze&&be,rt=n.useMemo(()=>W.map((e,t)=>{const r=F?F(e,t):t;return{row:e,identity:r,key:String(r),origin:t}}),[W,F]),[nt,at]=n.useState(Re??""),lt=(_e??nt).trim(),ot=""!==lt&&!Ge.has("filter"),st=n.useMemo(()=>Je.filter(e=>!1!==e.searchable),[Je]),it=n.useMemo(()=>ot&&0!==st.length?rt.map(e=>M(st.map(t=>t.value?t.value(e.row):e.row[t.key]))):null,[rt,st,ot]),ct=n.useMemo(()=>{if(Ge.has("filter"))return rt;const e=N(lt),t=""!==e&&it?rt.filter(t=>it[t.origin].includes(e)):rt;return Pe?t.filter(e=>Pe(e.row,e.origin)):t},[rt,lt,Pe,Ge,it]),ut=n.useMemo(()=>new Intl.Collator(Ie,{numeric:!0,sensitivity:"base"}),[Ie]),[dt,pt]=n.useState(ce??[]),mt=ie??dt,ht=n.useMemo(()=>Ge.has("sort")?ct:v(ct,mt,e=>{const t=Je.find(t=>t.key===e);if(!t)return null;if(t.compare)return(e,r)=>t.compare(e.row,r.row);const r=t.value?t.value:e=>e[t.key];return(e,t)=>c(r(e.row),r(t.row),ut)}),[ct,mt,Je,ut,Ge]),[ft,gt]=n.useState(Se),[yt,vt]=n.useState(Ke),bt=Ne??yt,kt=Ge.has("pages")?He??ht.length:ht.length,wt=y(kt,Ce??ft,bt),xt=n.useMemo(()=>"pages"!==xe||Ge.has("pages")?ht:ht.slice(wt.start,wt.end),[ht,xe,Ge,wt.start,wt.end]),Ct="pages"===xe?wt.start:0,St=n.useMemo(()=>xt.map(e=>e.key),[xt]),Mt=n.useMemo(()=>new Map(rt.map(e=>[e.key,e])),[rt]),[Nt,Kt]=n.useState(ye??[]),zt=ge??Nt,jt=n.useMemo(()=>new Set(zt.map(String)),[zt]),[$t,_t]=n.useState(null),Rt=n.useRef(null),Dt=n.useRef({paged:xt,pagedKeys:St,byKey:Mt,selectedKeys:jt,multiple:et});Dt.current={paged:xt,pagedKeys:St,byKey:Mt,selectedKeys:jt,multiple:et};const Et=n.useCallback(e=>{const t=[],r=[];for(const n of e){const e=Dt.current.byKey.get(n);e&&(t.push(e.identity),r.push(e.row))}void 0===ge&&Kt(t),ve?.(t,r)},[ge,ve]),At=n.useCallback(e=>{Rt.current=e,Et([e])},[Et]),Pt=n.useCallback(e=>{const t=Dt.current.selectedKeys,r=new Set(t);r.has(e)?r.delete(e):r.add(e),Rt.current=e,Et([...r])},[Et]),Tt=n.useCallback((e,t)=>{const r=Dt.current.pagedKeys,n=Rt.current??r[0];if(void 0===n)return;const a=h(r,n,e);0!==a.length&&Et(t?[...new Set([...Dt.current.selectedKeys,...a])]:a)},[Et]),Lt=n.useRef(null),Ht=n.useRef(null),It=n.useRef(null),[Bt,Wt]=n.useState(0),[Ft,Ot]=n.useState(0),qt=void 0!==V||void 0!==G,Ut=ae&&qt&&xt.length>0;n.useLayoutEffect(()=>{const e=Lt.current;if(e&&Ut)return Wt(e.clientHeight),z(e,e=>Wt(e.contentRect.height))},[Ut]);const Xt=n.useCallback(e=>{if(!Ut)return;const t=Math.floor(e.currentTarget.scrollTop/Xe)*Xe;Ot(e=>e===t?e:t)},[Ut,Xe]),Yt=Ut?b(Ft,Bt,Xe,xt.length,le):{start:0,end:xt.length,before:0,after:0},Vt=xt.slice(Yt.start,Yt.end),Gt=Ze&&null!==$t&&Vt.some(e=>e.key===$t),[Jt,Qt]=n.useState(me??{}),Zt=pe??Jt,er=n.useCallback(e=>{void 0===pe&&Qt(e),he?.(e)},[pe,he]),tr=n.useRef(new Map),rr=n.useRef(null);n.useEffect(()=>()=>rr.current?.(),[]);const nr=n.useCallback(e=>{const t=Lt.current;if(!t||!qt)return;const r=ee?Ye*(Qe?2:1):0,n=e*Xe;n<t.scrollTop+r?t.scrollTop=Math.max(0,n-r):n+Xe>t.scrollTop+t.clientHeight&&(t.scrollTop=n+Xe-t.clientHeight)},[qt,ee,Ye,Qe,Xe]),ar=(e,t)=>{const r=Dt.current.paged,n=Math.min(Math.max(e,0),r.length-1),a=r[n];a&&(t.preventDefault(),_t(a.key),nr(n),t.shiftKey&&Dt.current.multiple?Tt(a.key,!1):t.ctrlKey||t.metaKey||At(a.key))};const lr=n.useCallback(e=>{const t=Ht.current,r=Dt.current.paged;if(!t||0===r.length)return null;const n=t.getBoundingClientRect().top,a=Math.floor((e-n)/Xe);return Math.min(Math.max(a,0),r.length-1)},[Xe]),or=n.useRef(null),sr=n.useCallback(e=>{const t=lr(e),r=null===t?void 0:Dt.current.paged[t];r&&(_t(r.key),Tt(r.key,!1))},[lr,Tt]),ir=n.useRef(sr);ir.current=sr;function cr(e,t){if(Ze&&!t.target.closest('button, a, input, select, textarea, [role="button"]'))if(It.current?.focus({preventScroll:!0}),_t(e.key),2!==t.button){if(0===t.button)return t.shiftKey&&et?(t.preventDefault(),void Tt(e.key,t.ctrlKey||t.metaKey)):void((t.ctrlKey||t.metaKey)&&et?Pt(e.key):(At(e.key),et&&(e=>{if(or.current)return;const t=e=>{const t=or.current,n=Lt.current;if(!t)return;if(t.y=e.clientY,ir.current(t.y),!n||!qt)return;const a=n.getBoundingClientRect(),l=a.top+Xe-t.y,o=t.y-(a.bottom-Xe);t.speed=l>0?-Math.min(l,40):o>0?Math.min(o,40):0,0!==t.speed&&null===t.frame&&(t.frame=requestAnimationFrame(r))},r=()=>{const e=or.current,t=Lt.current;e&&t&&0!==e.speed?(t.scrollTop+=e.speed,ir.current(e.y),e.frame=requestAnimationFrame(r)):e&&(e.frame=null)},n=()=>{const e=or.current;null!=e?.frame&&cancelAnimationFrame(e.frame),or.current=null,window.removeEventListener("pointermove",t),window.removeEventListener("pointerup",n),window.removeEventListener("pointercancel",n)};or.current={y:e,speed:0,frame:null,stop:n},window.addEventListener("pointermove",t),window.addEventListener("pointerup",n),window.addEventListener("pointercancel",n)})(t.clientY)))}else Dt.current.selectedKeys.has(e.key)||At(e.key)}n.useEffect(()=>()=>or.current?.stop(),[]);const ur=n.useMemo(()=>St.reduce((e,t)=>jt.has(t)?e+1:e,0),[St,jt]),dr=St.length>0&&ur===St.length,pr=p[q],mr=e=>Zt[e.key]??e.width,hr=(tt?pr:0)+Je.reduce((e,t)=>e+(mr(t)??f),0),fr=Je.length>0&&Je.every(e=>void 0!==mr(e)),gr=Je.length+(tt?1:0)+(fr?1:0),yr=n.useMemo(()=>{const e=[];return Je.forEach((t,r)=>{const n=e[e.length-1];n&&void 0!==n.label&&n.label===t.group?n.span+=1:e.push({label:t.group,span:1,from:r})}),e},[Je]),vr={padding:`0 ${Ve}`,borderBottom:"1px solid var(--n-line)",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},br={...vr,height:`${Ye}px`,backgroundColor:"var(--n-panel-press)"},kr="odd"===Q?0:1,wr=n.useMemo(()=>new Intl.NumberFormat(Ie),[Ie]),xr=$e??"pages"===xe,Cr=x(Oe.range,{start:wr.format(0===kt?0:("pages"===xe?wt.start:0)+1),end:wr.format("pages"===xe?wt.end:kt),total:wr.format(kt)}),Sr=e=>{void 0===Ce&>(e),Me?.(e)},Mr=(r,n,a)=>{const l=r.sortable??oe,o=r.resizable??de,s=(i=r.key,mt.find(e=>e.key===i));var i;const c=s?mt.findIndex(e=>e.key===r.key)+1:0,u=r.headerAlign??r.align??"start";return t("th",{ref:e=>{e?tr.current.set(r.key,e):tr.current.delete(r.key)},scope:"col",rowSpan:a,"aria-sort":s?"asc"===s.direction?"ascending":"descending":void 0,className:$("relative font-semibold select-none",s?"text-(--n-accent)":"text-(--neba-muted-fg)",ee?"sticky z-20 [backdrop-filter:var(--neba-blur)]":""),style:{...br,top:ee?2!==a&&Qe?Ye:0:void 0,textAlign:u},children:[l?t("button",{type:"button",className:$(L,"end"===u?"justify-end":"center"===u?"justify-center":"justify-start"),onClick:e=>((e,t)=>{const r=g(mt,e,t&&"multiple"===se);void 0===ie&&pt(r),ue?.(r)})(r.key,e.shiftKey),children:[e("span",{className:"min-w-0 truncate",children:r.label??r.key}),e("span",{"aria-hidden":"true",className:$("flex items-center","desc"===s?.direction?"rotate-0":"rotate-180",s?"":"text-transparent group-hover/sort:text-inherit group-focus-visible/sort:text-inherit"),children:e(K,{})}),c>1?e("span",{"aria-hidden":"true",className:"text-[0.85em] tabular-nums",children:c}):null]}):e("span",{className:"block truncate",children:r.label??r.key}),o&&n<Je.length-1?e("span",{"aria-hidden":"true",className:H,onPointerDown:e=>((e,t)=>{t.preventDefault(),t.stopPropagation();const r=t.currentTarget,n={...Zt};for(const e of Je){const t=tr.current.get(e.key);t&&void 0===n[e.key]&&(n[e.key]=Math.round(t.getBoundingClientRect().width))}const a="rtl"===getComputedStyle(r).direction,l=t.clientX,o=n[e]??m,s=Je.find(t=>t.key===e)?.minWidth??f;rr.current=k({target:r,pointerId:t.pointerId,onMove:t=>{const r=(t.clientX-l)*(a?-1:1);er({...n,[e]:Math.max(s,Math.round(o+r))})},onEnd:()=>{rr.current=null}})})(r.key,e),onDoubleClick:()=>(e=>{const t={...Zt};delete t[e],er(t)})(r.key)}):null]},r.key)},Nr=t=>e("span",{className:"flex items-center justify-center",children:t}),Kr=t=>e("td",{role:Ze?"gridcell":void 0,style:{...vr,padding:0,overflow:"visible"},children:Nr(e(l,{size:q,color:U,checked:jt.has(t.key),"aria-label":Oe.selectRow,onCheckedChange:()=>{et?Pt(t.key):At(t.key)}}))}),zr=et?Nr(e(l,{size:q,color:U,checked:dr,indeterminate:ur>0&&!dr,"aria-label":Oe.selectAll,onCheckedChange:()=>{if(dr){const e=new Set(St);Et([...jt].filter(t=>!e.has(t)))}else Et([...new Set([...jt,...St])])}})):null,jr=fr?e("th",{"aria-hidden":"true",className:$(ee?"sticky top-0 z-20 [backdrop-filter:var(--neba-blur)]":""),style:{...br,padding:0}}):null,$r=(t,r)=>r>0?e("tr",{"aria-hidden":"true",style:{height:`${r}px`},children:e("td",{colSpan:gr,style:{padding:0,border:0}})},t):null;return t(a,{variant:O,size:q,color:U,density:X,elevation:Y,padded:!1,className:$("flex flex-col overflow-hidden",Ze?"has-[:focus-visible]:[outline:2px_solid_var(--n-ring)] has-[:focus-visible]:outline-offset-2":"",Be),style:{...T,...We},...Fe,children:[Ee||_(Te)?t("div",{className:"flex items-center gap-2",style:{padding:`${Ve} ${Ve}`,borderBottom:"1px solid var(--n-line)"},children:[Ee?e(i,{size:q,color:U,density:X,variant:"outline",type:"search",className:"w-full max-w-64",startIcon:e(I,{}),placeholder:Ae??Oe.search,"aria-label":Ae??Oe.search,value:_e??nt,onChange:e=>{const t=e.target.value;void 0===_e&&at(t),Sr(1),De?.(t)}}):null,_(Te)?e("div",{className:"ms-auto flex items-center gap-2",children:Te}):null]}):null,e("div",{ref:Lt,className:"min-h-0 flex-auto overflow-auto overscroll-contain",style:{height:A(V),maxHeight:A(G)},onScroll:Xt,children:t("table",{ref:It,role:Ze?"grid":void 0,"aria-label":re,"aria-multiselectable":et||void 0,"aria-rowcount":Ut?xt.length+1:void 0,"aria-activedescendant":Gt?`${Ue}-${$t}`:void 0,tabIndex:Ze?0:void 0,className:$("w-full text-start [outline:none]",j[q],"text-(--neba-fg)",Ze?"select-none":""),style:{tableLayout:"fixed",borderCollapse:"separate",borderSpacing:0,minWidth:`${hr}px`},onKeyDown:function(e){if(!Ze||e.target!==e.currentTarget)return;const t=Dt.current.paged;if(0===t.length)return;const r=null===$t?-1:Dt.current.pagedKeys.indexOf($t),n=Math.max(1,Math.floor((Bt||10*Xe)/Xe)-1);switch(e.key){case"ArrowDown":ar(r+1,e);break;case"ArrowUp":ar(-1===r?0:r-1,e);break;case"Home":ar(0,e);break;case"End":ar(t.length-1,e);break;case"PageDown":ar(-1===r?0:r+n,e);break;case"PageUp":ar(-1===r?0:r-n,e);break;case" ":-1!==r&&(e.preventDefault(),(e.ctrlKey||e.metaKey)&&et?Pt(t[r].key):At(t[r].key));break;case"a":case"A":(e.ctrlKey||e.metaKey)&&et&&(e.preventDefault(),Et(Dt.current.pagedKeys));break;case"Escape":e.preventDefault(),Et([]);break;case"Enter":-1!==r&&we&&(e.preventDefault(),we(t[r].row,Ct+r))}},children:[te?e("caption",{className:$(R[q],"text-(--neba-muted-fg)"),style:{padding:`0.5rem ${Ve}`,textAlign:"start"},children:te}):null,t("colgroup",{children:[tt?e("col",{style:{width:`${pr}px`}}):null,Je.map(t=>{const r=mr(t);return e("col",{style:void 0===r?void 0:{width:`${r}px`}},t.key)}),fr?e("col",{}):null]}),t("thead",{children:[Qe?t("tr",{style:{height:`${Ye}px`},children:[tt?e("th",{scope:"col",rowSpan:2,className:$(ee?"sticky top-0 z-20 [backdrop-filter:var(--neba-blur)]":""),style:{...br,padding:0,overflow:"visible"},children:zr}):null,yr.map(t=>void 0===t.label?Mr(Je[t.from],t.from,2):e("th",{scope:"colgroup",colSpan:t.span,className:$("font-semibold text-(--neba-muted-fg) select-none",ee?"sticky top-0 z-20 [backdrop-filter:var(--neba-blur)]":""),style:{...br,textAlign:"center"},children:t.label},`group-${t.from}`)),fr?n.cloneElement(jr,{rowSpan:2}):null]}):null,t("tr",{style:{height:`${Ye}px`},children:[tt&&!Qe?e("th",{scope:"col",className:$(ee?"sticky top-0 z-20 [backdrop-filter:var(--neba-blur)]":""),style:{...br,padding:0,overflow:"visible"},children:zr}):null,Je.map((e,t)=>Qe&&void 0===e.group?null:Mr(e,t)),fr&&!Qe?jr:null]})]}),e("tbody",{ref:Ht,children:0===xt.length?e("tr",{children:e("td",{colSpan:gr,className:"text-(--neba-muted-fg)",style:{padding:`2rem ${Ve}`,textAlign:"center"},children:ne??qe.title})}):t(r,{children:[$r("before",Yt.before),Vt.map((r,n)=>{const a=Yt.start+n,l=jt.has(r.key),o=$t===r.key;return t("tr",{id:`${Ue}-${r.key}`,"aria-selected":Ze?l:void 0,"aria-rowindex":Ut?a+2:void 0,"data-neba-row":r.key,className:$(P,l?"[--n-row:var(--n-soft-press)]":!1!==Q&&a%2===kr?"[--n-row:var(--n-stripe)]":"",!l&&Z?"hover:[--n-row:var(--n-soft)]":"",o&&Ze?"[box-shadow:inset_0_0_0_1px_var(--n-ring)]":"",Ze||ke?"cursor-default":""),style:{height:`${Xe}px`,backgroundColor:"var(--n-row)"},onPointerDown:e=>cr(r,e),onClick:e=>ke?.(r.row,Ct+a,e),onDoubleClick:()=>we?.(r.row,Ct+a),children:[tt?Kr(r):null,Je.map(t=>e("td",{role:Ze?"gridcell":void 0,style:{...vr,textAlign:t.align??"start"},children:t.render?t.render(r.row,Ct+a):r.row[t.key]},t.key)),fr?e("td",{"aria-hidden":"true",style:{...vr,padding:0}}):null]},r.key)}),$r("after",Yt.after)]})})]})}),xr?t("div",{className:$("flex flex-wrap items-center gap-3",R[q]),style:{padding:`0.375rem ${Ve}`,borderTop:"1px solid var(--n-line)"},children:[e("span",{className:"text-(--neba-muted-fg) tabular-nums",children:Cr}),Ze&&jt.size>0?e("span",{className:"text-(--n-accent) tabular-nums",children:x(Oe.selected,{count:wr.format(jt.size)})}):null,t("div",{className:"ms-auto flex items-center gap-2",children:["pages"===xe&&je.length>0?e(r,{children:e(s,{size:q,color:U,density:X,variant:"outline",label:Oe.rowsPerPage,items:je.map(e=>({value:e})),value:bt,onValueChange:e=>{const t=Number(e);void 0===Ne&&vt(t),Sr(Math.floor(wt.start/t)+1),ze?.(t)}})}):null,"pages"===xe?e(o,{size:q,color:U,count:wt.pages,page:wt.page,siblingCount:0,onPageChange:Sr}):null]})]}):null,!xr&&Ut?e("span",{className:E,"aria-live":"polite",children:Cr}):null]})}
|
|
1
|
+
"use client";import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as r from"react";import{Box as a}from"../box/Box.js";import{Button as l}from"../button/Button.js";import{Checkbox as o}from"../checkbox/Checkbox.js";import{Pagination as s}from"../pagination/Pagination.js";import{Select as i}from"../select/Select.js";import{TextField as c}from"../text-field/TextField.js";import{compareValues as u,dataHeaderHeights as d,dataRowHeights as p,dataTickWidths as m,defaultColumnWidth as g,keysBetween as f,minColumnWidth as h,nextSort as y,pageBounds as b,sortRows as v,virtualWindow as k}from"../../internal/data-table.js";import{beginPointerDrag as w}from"../../internal/drag.js";import{emptyMessages as x,fillMessage as C,tableMessages as S,useMessages as M}from"../../internal/i18n.js";import{searchHaystack as N,searchText as K}from"../../internal/search.js";import{ChevronIcon as z}from"../../internal/icons.js";import{observeResize as _}from"../../internal/observe.js";import{downloadText as j,toCsv as $}from"../../internal/csv.js";import{controlTextLeadingClasses as E,cx as D,hasContent as P,metaTextClasses as R,paddingXValues as T,srOnlyClasses as A,toLength as I}from"../../internal/styles.js";import{useStyleDefaults as B}from"../../internal/defaults.js";const L=["[--n-row:transparent]","[transition:background-color_var(--neba-duration)_var(--neba-ease)]"].join(" "),F={"--n-stripe":"color-mix(in oklab, var(--neba-fg) 4%, transparent)"},O=["group/sort flex w-full min-w-0 cursor-pointer items-center gap-1","text-inherit [outline:none]","[transition:color_var(--neba-duration)_var(--neba-ease)]","hover:text-(--n-accent)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1","[&_svg]:pointer-events-none [&_svg]:size-[1.15em] [&_svg]:shrink-0"].join(" "),H=["absolute inset-y-0 z-10 w-2 cursor-col-resize select-none","end-0 translate-x-1/2 rtl:-translate-x-1/2","after:absolute after:inset-y-1 after:start-1/2 after:w-px","after:[background:transparent]","after:[transition:background_var(--neba-duration)_var(--neba-ease)]","hover:after:[background:var(--n-accent)] data-[dragging]:after:[background:var(--n-accent)]"].join(" ");function W(){return t("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[e("circle",{cx:"7.25",cy:"7.25",r:"4.75",stroke:"currentColor",strokeWidth:"1.5"}),e("path",{d:"m10.75 10.75 2.75 2.75",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})]})}export function DataTable(X){const{headers:V,items:q,getRowKey:G,variant:U="outline",size:Y="sm",color:J="primary",density:Q="compact",elevation:Z=0,height:ee,maxHeight:te,rowHeight:ne,striped:re=!1,hoverable:ae=!0,stickyHeader:le=!0,caption:oe,label:se,empty:ie,virtual:ce=!0,overscan:ue=8,sortable:de=!1,sortMode:pe="single",sort:me,defaultSort:ge,onSortChange:fe,resizable:he=!1,columnWidths:ye,columnOrder:be,defaultColumnOrder:ve,onColumnOrderChange:ke,reorderable:we=!1,defaultColumnWidths:xe,onColumnWidthsChange:Ce,selectionMode:Se="none",selected:Me,defaultSelected:Ne,onSelectedChange:Ke,checkboxes:ze=!1,onRowClick:_e,onRowActivate:je,paging:$e="scroll",page:Ee,defaultPage:De=1,onPageChange:Pe,pageSize:Re,defaultPageSize:Te=25,onPageSizeChange:Ae,pageSizeOptions:Ie=[10,25,50,100],footer:Be,search:Le,defaultSearch:Fe,onSearchChange:Oe,searchable:He=!1,searchPlaceholder:We,filter:Xe,toolbar:Ve,exportable:qe=!1,exportFileName:Ge="table.csv",onExport:Ue,onCellEdit:Ye,groupBy:Je,collapsibleGroups:Qe=!0,defaultCollapsedGroups:Ze,manual:et=!1,rowCount:tt,locale:nt,className:rt,style:at,...lt}=B(X,["size","density","variant","locale"]),ot=M(S,nt),st=M(x,nt),it=r.useId(),ct=ne??p[Q][Y],ut=d[Q][Y],dt=T[Q][Y],pt=r.useMemo(()=>new Set(!0===et?["sort","filter","pages"]:et||[]),[et]),[mt,gt]=r.useState(()=>ve??[]),ft=be??mt,ht=r.useMemo(()=>{const e=V.filter(e=>!e.hidden),t=ft.map(t=>e.find(e=>e.key===t)).filter(e=>void 0!==e),n=e.filter(e=>!ft.includes(e.key)),r=0===ft.length?e:[...t,...n],a=e=>"start"===e.pinned?0:"end"===e.pinned?2:1;return r.map((e,t)=>({column:e,index:t})).sort((e,t)=>a(e.column)-a(t.column)||e.index-t.index).map(e=>e.column)},[V,ft]),yt=ht.some(e=>void 0!==e.group),bt="none"!==Se,vt="multiple"===Se,kt=bt&&ze,wt=r.useMemo(()=>q.map((e,t)=>{const n=G?G(e,t):t;return{row:e,identity:n,key:String(n),origin:t}}),[q,G]),[xt,Ct]=r.useState(Fe??""),St=(Le??xt).trim(),Mt=""!==St&&!pt.has("filter"),Nt=r.useMemo(()=>ht.filter(e=>!1!==e.searchable),[ht]),Kt=r.useMemo(()=>Mt&&0!==Nt.length?wt.map(e=>N(Nt.map(t=>t.value?t.value(e.row):e.row[t.key]))):null,[wt,Nt,Mt]),zt=r.useMemo(()=>{if(pt.has("filter"))return wt;const e=K(St),t=""!==e&&Kt?wt.filter(t=>Kt[t.origin].includes(e)):wt;return Xe?t.filter(e=>Xe(e.row,e.origin)):t},[wt,St,Xe,pt,Kt]),_t=r.useMemo(()=>new Intl.Collator(nt,{numeric:!0,sensitivity:"base"}),[nt]),[jt,$t]=r.useState(ge??[]),Et=me??jt,Dt=r.useMemo(()=>pt.has("sort")?zt:v(zt,Et,e=>{const t=ht.find(t=>t.key===e);if(!t)return null;if(t.compare)return(e,n)=>t.compare(e.row,n.row);const n=t.value?t.value:e=>e[t.key];return(e,t)=>u(n(e.row),n(t.row),_t)}),[zt,Et,ht,_t,pt]),[Pt,Rt]=r.useState(De),[Tt,At]=r.useState(Te),It=Re??Tt,[Bt,Lt]=r.useState(()=>new Set(Ze??[])),Ft=r.useMemo(()=>{if(!Je)return null;const e=[],t=new Map;for(const n of Dt){const r=Je(n.row)??"";t.has(r)||(t.set(r,[]),e.push(r)),t.get(r).push(n)}return{order:[...e].sort((e,t)=>""===e?-1:""===t?1:0),byLabel:t}},[Dt,Je]),Ot=r.useMemo(()=>Ft?Ft.order.flatMap(e=>Bt.has(e)?[]:Ft.byLabel.get(e)??[]):Dt,[Ft,Bt,Dt]),Ht=pt.has("pages")?tt??Ot.length:Ot.length,Wt=b(Ht,Ee??Pt,It),Xt=r.useMemo(()=>"pages"!==$e||pt.has("pages")?Ot:Ot.slice(Wt.start,Wt.end),[Ot,$e,pt,Wt.start,Wt.end]),Vt="pages"===$e?Wt.start:0,qt=r.useMemo(()=>Xt.map(e=>e.key),[Xt]),Gt=r.useMemo(()=>new Map(wt.map(e=>[e.key,e])),[wt]),[Ut,Yt]=r.useState(Ne??[]),Jt=Me??Ut,Qt=r.useMemo(()=>new Set(Jt.map(String)),[Jt]),[Zt,en]=r.useState(null),tn=r.useRef(null),nn=r.useRef({paged:Xt,pagedKeys:qt,byKey:Gt,selectedKeys:Qt,multiple:vt});nn.current={paged:Xt,pagedKeys:qt,byKey:Gt,selectedKeys:Qt,multiple:vt};const rn=r.useCallback(e=>{const t=[],n=[];for(const r of e){const e=nn.current.byKey.get(r);e&&(t.push(e.identity),n.push(e.row))}void 0===Me&&Yt(t),Ke?.(t,n)},[Me,Ke]),an=r.useCallback(e=>{tn.current=e,rn([e])},[rn]),ln=r.useCallback(e=>{const t=nn.current.selectedKeys,n=new Set(t);n.has(e)?n.delete(e):n.add(e),tn.current=e,rn([...n])},[rn]),on=r.useCallback((e,t)=>{const n=nn.current.pagedKeys,r=tn.current??n[0];if(void 0===r)return;const a=f(n,r,e);0!==a.length&&rn(t?[...new Set([...nn.current.selectedKeys,...a])]:a)},[rn]),sn=r.useRef(null),cn=r.useRef(null),un=r.useRef(null),[dn,pn]=r.useState(0),[mn,gn]=r.useState(0),fn=void 0!==ee||void 0!==te,hn=ce&&fn&&Xt.length>0&&!Je;r.useLayoutEffect(()=>{const e=sn.current;if(e&&hn)return pn(e.clientHeight),_(e,e=>pn(e.contentRect.height))},[hn]);const yn=r.useCallback(e=>{if(!hn)return;const t=Math.floor(e.currentTarget.scrollTop/ct)*ct;gn(e=>e===t?e:t)},[hn,ct]),bn=hn?k(mn,dn,ct,Xt.length,ue):{start:0,end:Xt.length,before:0,after:0},vn=Xt.slice(bn.start,bn.end),kn=bt&&null!==Zt&&vn.some(e=>e.key===Zt),[wn,xn]=r.useState(xe??{}),Cn=ye??wn,Sn=r.useCallback(e=>{void 0===ye&&xn(e),Ce?.(e)},[ye,Ce]),Mn=r.useRef(new Map),Nn=r.useRef(null),Kn=r.useRef(null),[zn,_n]=r.useState(null),[jn,$n]=r.useState(null);r.useEffect(()=>()=>{Nn.current?.(),Kn.current?.()},[]);const En=(e,t)=>{if(0!==t.button)return;const n=t.currentTarget,r=t.clientX;let a=!1;Kn.current=w({target:n,pointerId:t.pointerId,onMove:t=>{if(!a){if(Math.abs(t.clientX-r)<6)return;a=!0,_n(e)}const n=ht.find(e=>{if(e.pinned)return!1;const n=Mn.current.get(e.key);if(!n)return!1;const r=n.getBoundingClientRect();return t.clientX>=r.left&&t.clientX<=r.right});$n(n&&n.key!==e?n.key:null)},onEnd:()=>{Kn.current=null,_n(e=>($n(t=>{if(e&&t&&e!==t){const r=ht.map(e=>e.key),a=r.indexOf(e),l=r.indexOf(t);r.splice(l,0,...r.splice(a,1)),n=r,void 0===be&>(n),ke?.(n)}var n;return null}),null))}})},Dn=r.useCallback(e=>{const t=sn.current;if(!t||!fn)return;const n=le?ut*(yt?2:1):0,r=e*ct;r<t.scrollTop+n?t.scrollTop=Math.max(0,r-n):r+ct>t.scrollTop+t.clientHeight&&(t.scrollTop=r+ct-t.clientHeight)},[fn,le,ut,yt,ct]),Pn=(e,t)=>{const n=nn.current.paged,r=Math.min(Math.max(e,0),n.length-1),a=n[r];a&&(t.preventDefault(),en(a.key),Dn(r),t.shiftKey&&nn.current.multiple?on(a.key,!1):t.ctrlKey||t.metaKey||an(a.key))};const Rn=r.useCallback(e=>{const t=cn.current,n=nn.current.paged;if(!t||0===n.length)return null;const r=t.getBoundingClientRect().top,a=Math.floor((e-r)/ct);return Math.min(Math.max(a,0),n.length-1)},[ct]),Tn=r.useRef(null),An=r.useCallback(e=>{const t=Rn(e),n=null===t?void 0:nn.current.paged[t];n&&(en(n.key),on(n.key,!1))},[Rn,on]),In=r.useRef(An);In.current=An;function Bn(e,t){if(bt&&!t.target.closest('button, a, input, select, textarea, [role="button"]'))if(un.current?.focus({preventScroll:!0}),en(e.key),2!==t.button){if(0===t.button)return t.shiftKey&&vt?(t.preventDefault(),void on(e.key,t.ctrlKey||t.metaKey)):void((t.ctrlKey||t.metaKey)&&vt?ln(e.key):(an(e.key),vt&&(e=>{if(Tn.current)return;const t=e=>{const t=Tn.current,r=sn.current;if(!t)return;if(t.y=e.clientY,In.current(t.y),!r||!fn)return;const a=r.getBoundingClientRect(),l=a.top+ct-t.y,o=t.y-(a.bottom-ct);t.speed=l>0?-Math.min(l,40):o>0?Math.min(o,40):0,0!==t.speed&&null===t.frame&&(t.frame=requestAnimationFrame(n))},n=()=>{const e=Tn.current,t=sn.current;e&&t&&0!==e.speed?(t.scrollTop+=e.speed,In.current(e.y),e.frame=requestAnimationFrame(n)):e&&(e.frame=null)},r=()=>{const e=Tn.current;null!=e?.frame&&cancelAnimationFrame(e.frame),Tn.current=null,window.removeEventListener("pointermove",t),window.removeEventListener("pointerup",r),window.removeEventListener("pointercancel",r)};Tn.current={y:e,speed:0,frame:null,stop:r},window.addEventListener("pointermove",t),window.addEventListener("pointerup",r),window.addEventListener("pointercancel",r)})(t.clientY)))}else nn.current.selectedKeys.has(e.key)||an(e.key)}r.useEffect(()=>()=>Tn.current?.stop(),[]);const Ln=r.useMemo(()=>qt.reduce((e,t)=>Qt.has(t)?e+1:e,0),[qt,Qt]),Fn=qt.length>0&&Ln===qt.length,On=m[Y],Hn=e=>Cn[e.key]??e.width,Wn=(kt?On:0)+ht.reduce((e,t)=>e+(Hn(t)??h),0),Xn=ht.length>0&&ht.every(e=>void 0!==Hn(e)),Vn=ht.length+(kt?1:0)+(Xn?1:0),qn=r.useMemo(()=>{const e=[];return ht.forEach((t,n)=>{const r=e[e.length-1];r&&void 0!==r.label&&r.label===t.group?r.span+=1:e.push({label:t.group,span:1,from:n})}),e},[ht]),Gn=r.useMemo(()=>{const e=new Map,t=new Map;let n=kt?On:0;for(const t of ht)"start"===t.pinned&&(e.set(t.key,n),n+=Hn(t)??g);let r=0;for(let e=ht.length-1;e>=0;e-=1){const n=ht[e];"end"===n.pinned&&(t.set(n.key,r),r+=Hn(n)??g)}return{start:e,end:t}},[ht,Cn,kt,On]),Un=(e,t)=>{if(!e.pinned)return{};const n="start"===e.pinned?Gn.start.get(e.key):Gn.end.get(e.key);return{position:"sticky",insetInlineStart:"start"===e.pinned?`${n??0}px`:void 0,insetInlineEnd:"end"===e.pinned?`${n??0}px`:void 0,zIndex:t?3:1,backgroundColor:"var(--n-panel-press)",backgroundImage:t?void 0:"linear-gradient(var(--n-row), var(--n-row))"}},Yn={padding:`0 ${dt}`,borderBottom:"1px solid var(--n-line)",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},Jn={...Yn,height:`${ut}px`,backgroundColor:"var(--n-panel-press)"},Qn="odd"===re?0:1,Zn=r.useMemo(()=>new Intl.NumberFormat(nt),[nt]),er=Be??"pages"===$e,tr=C(ot.range,{start:Zn.format(0===Ht?0:("pages"===$e?Wt.start:0)+1),end:Zn.format("pages"===$e?Wt.end:Ht),total:Zn.format(Ht)}),nr=e=>{void 0===Ee&&Rt(e),Pe?.(e)},rr=(n,r)=>{const a=Qt.has(n.key),l=Zt===n.key;return t("tr",{id:`${it}-${n.key}`,"aria-selected":bt?a:void 0,"aria-rowindex":hn?r+2:void 0,"data-neba-row":n.key,className:D(L,a?"[--n-row:var(--n-soft-press)]":!1!==re&&r%2===Qn?"[--n-row:var(--n-stripe)]":"",!a&&ae?"hover:[--n-row:var(--n-soft)]":"",l&&bt?"[box-shadow:inset_0_0_0_1px_var(--n-ring)]":"",bt||_e?"cursor-default":""),style:{height:`${ct}px`,backgroundColor:"var(--n-row)"},onPointerDown:e=>Bn(n,e),onClick:e=>_e?.(n.row,Vt+r,e),onDoubleClick:()=>je?.(n.row,Vt+r),children:[kt?dr(n):null,ht.map(t=>{const a=ir(t,n.row),l=or?.key===n.key&&or.column===t.key;return e("td",{role:bt?"gridcell":void 0,style:{...Yn,...Un(t,!1),textAlign:t.align??"start",cursor:a&&!l?"cell":void 0},onDoubleClick:a?e=>{e.stopPropagation(),sr({key:n.key,column:t.key})}:void 0,children:l?cr(n,t):t.render?t.render(n.row,Vt+r):n.row[t.key]},t.key)}),Xn?e("td",{"aria-hidden":"true",style:{...Yn,padding:0}}):null]})},ar=(n,r,a)=>{const l=n.sortable??de,o=n.resizable??he,s=we&&!n.pinned,i=(c=n.key,Et.find(e=>e.key===c));var c;const u=i?Et.findIndex(e=>e.key===n.key)+1:0,d=n.headerAlign??n.align??"start";return t("th",{ref:e=>{e?Mn.current.set(n.key,e):Mn.current.delete(n.key)},scope:"col",rowSpan:a,"aria-sort":i?"asc"===i.direction?"ascending":"descending":void 0,"data-column":n.key,"data-dragging":zn===n.key||void 0,className:D("relative font-semibold select-none",i?"text-(--n-accent)":"text-(--neba-muted-fg)",le?"sticky z-20 [backdrop-filter:var(--neba-blur)]":"",s?"cursor-grab":"",zn===n.key?"opacity-60":"",jn===n.key?"shadow-[inset_2px_0_0_var(--n-accent)]":""),style:{...Jn,...Un(n,!0),top:le?2!==a&&yt?ut:0:void 0,textAlign:d},onPointerDown:s?e=>En(n.key,e):void 0,children:[l?t("button",{type:"button",className:D(O,"end"===d?"justify-end":"center"===d?"justify-center":"justify-start"),onClick:e=>((e,t)=>{const n=y(Et,e,t&&"multiple"===pe);void 0===me&&$t(n),fe?.(n)})(n.key,e.shiftKey),children:[e("span",{className:"min-w-0 truncate",children:n.label??n.key}),e("span",{"aria-hidden":"true",className:D("flex items-center","desc"===i?.direction?"rotate-0":"rotate-180",i?"":"text-transparent group-hover/sort:text-inherit group-focus-visible/sort:text-inherit"),children:e(z,{})}),u>1?e("span",{"aria-hidden":"true",className:"text-[0.85em] tabular-nums",children:u}):null]}):e("span",{className:"block truncate",children:n.label??n.key}),o&&r<ht.length-1?e("span",{"aria-hidden":"true",className:H,onPointerDown:e=>((e,t)=>{t.preventDefault(),t.stopPropagation();const n=t.currentTarget,r={...Cn};for(const e of ht){const t=Mn.current.get(e.key);t&&void 0===r[e.key]&&(r[e.key]=Math.round(t.getBoundingClientRect().width))}const a="rtl"===getComputedStyle(n).direction,l=t.clientX,o=r[e]??g,s=ht.find(t=>t.key===e)?.minWidth??h;Nn.current=w({target:n,pointerId:t.pointerId,onMove:t=>{const n=(t.clientX-l)*(a?-1:1);Sn({...r,[e]:Math.max(s,Math.round(o+n))})},onEnd:()=>{Nn.current=null}})})(n.key,e),onDoubleClick:()=>(e=>{const t={...Cn};delete t[e],Sn(t)})(n.key)}):null]},n.key)},lr=(n,r)=>{const a=Bt.has(n),l=Qe,o=r.map(e=>e.row),s=()=>Lt(e=>{const t=new Set(e);return t.has(n)?t.delete(n):t.add(n),t}),i=t("span",{className:"flex min-w-0 items-center gap-1.5",children:[l?e("span",{"aria-hidden":"true",className:D("flex items-center text-(--neba-muted-fg)","[transition:rotate_var(--neba-duration)_var(--neba-ease)]",a?"-rotate-90 rtl:rotate-90":""),children:e(z,{})}):null,e("span",{className:"truncate font-semibold",children:""===n?st.title:n}),e("span",{className:"shrink-0 text-(--neba-muted-fg) tabular-nums",children:Zn.format(r.length)})]});return t("tr",{"data-neba-group":n,style:{height:`${ct}px`,backgroundColor:"var(--n-soft)"},children:[kt?e("td",{style:{...Yn,padding:0}}):null,ht.map((t,n)=>e("td",{colSpan:1,style:{...Yn,...Un(t,!1),textAlign:0===n?"start":t.align??"start"},children:0===n?l?e("button",{type:"button","aria-expanded":!a,className:"flex w-full min-w-0 items-center text-start [outline:none] focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:[outline-offset:-2px]",onClick:s,children:i}):i:t.aggregate?e("span",{className:"tabular-nums",children:t.aggregate(o)}):null},t.key)),Xn?e("td",{"aria-hidden":"true",style:{...Yn,padding:0}}):null]})},[or,sr]=r.useState(null),ir=(e,t)=>void 0!==Ye&&("function"==typeof e.editable?e.editable(t):Boolean(e.editable)),cr=(t,n)=>{const r=n.value?n.value(t.row):t.row[n.key],a=e=>{sr(null);const a="number"===n.editType?Number(e):e;"number"===n.editType&&Number.isNaN(a)||String(a)!==String(r??"")&&Ye?.(t.row,n,a)};return e("input",{autoFocus:!0,type:"number"===n.editType?"number":"text",defaultValue:null==r?"":String(r),"aria-label":"string"==typeof n.label?n.label:n.key,className:"w-full bg-transparent [font:inherit] text-inherit [outline:none]",style:{textAlign:n.align??"start"},onPointerDown:e=>e.stopPropagation(),onBlur:e=>a(e.currentTarget.value),onKeyDown:e=>{"Enter"===e.key&&(e.preventDefault(),e.stopPropagation(),a(e.currentTarget.value)),"Escape"===e.key&&(e.stopPropagation(),sr(null))}})},ur=t=>e("span",{className:"flex items-center justify-center",children:t}),dr=t=>e("td",{role:bt?"gridcell":void 0,style:{...Yn,padding:0,overflow:"visible"},children:ur(e(o,{size:Y,color:J,checked:Qt.has(t.key),"aria-label":ot.selectRow,onCheckedChange:()=>{vt?ln(t.key):an(t.key)}}))}),pr=vt?ur(e(o,{size:Y,color:J,checked:Fn,indeterminate:Ln>0&&!Fn,"aria-label":ot.selectAll,onCheckedChange:()=>{if(Fn){const e=new Set(qt);rn([...Qt].filter(t=>!e.has(t)))}else rn([...new Set([...Qt,...qt])])}})):null,mr=Xn?e("th",{"aria-hidden":"true",className:D(le?"sticky top-0 z-20 [backdrop-filter:var(--neba-blur)]":""),style:{...Jn,padding:0}}):null,gr=(t,n)=>n>0?e("tr",{"aria-hidden":"true",style:{height:`${n}px`},children:e("td",{colSpan:Vn,style:{padding:0,border:0}})},t):null;return t(a,{variant:U,size:Y,color:J,density:Q,elevation:Z,padded:!1,className:D("flex flex-col overflow-hidden",bt?"has-[:focus-visible]:[outline:2px_solid_var(--n-ring)] has-[:focus-visible]:outline-offset-2":"",rt),style:{...F,...at},...lt,children:[He||qe||P(Ve)?t("div",{className:"flex items-center gap-2",style:{padding:`${dt} ${dt}`,borderBottom:"1px solid var(--n-line)"},children:[He?e(c,{size:Y,color:J,density:Q,variant:"outline",type:"search",className:"w-full max-w-64",startIcon:e(W,{}),placeholder:We??ot.search,"aria-label":We??ot.search,value:Le??xt,onChange:e=>{const t=e.target.value;void 0===Le&&Ct(t),nr(1),Oe?.(t)}}):null,qe||P(Ve)?t("div",{className:"ms-auto flex items-center gap-2",children:[Ve,qe?e(l,{size:Y,color:J,density:Q,variant:"outline",onClick:()=>{const e=ht.filter(e=>!1!==e.exportable),t=e.map(e=>"string"==typeof e.label?e.label:e.key),n=Dt.map(t=>e.map(e=>e.exportValue?e.exportValue(t.row):e.value?e.value(t.row):t.row[e.key])),r=$([t,...n]);Ue?Ue(r):j(r,Ge,"text/csv;charset=utf-8")},children:ot.exportCsv}):null]}):null]}):null,e("div",{ref:sn,className:"min-h-0 flex-auto overflow-auto overscroll-contain",style:{height:I(ee),maxHeight:I(te)},onScroll:yn,children:t("table",{ref:un,role:bt?"grid":void 0,"aria-label":se,"aria-multiselectable":vt||void 0,"aria-rowcount":hn?Xt.length+1:void 0,"aria-activedescendant":kn?`${it}-${Zt}`:void 0,tabIndex:bt?0:void 0,className:D("w-full text-start [outline:none]",E[Y],"text-(--neba-fg)",bt?"select-none":""),style:{tableLayout:"fixed",borderCollapse:"separate",borderSpacing:0,minWidth:`${Wn}px`},onKeyDown:function(e){if(!bt||e.target!==e.currentTarget)return;const t=nn.current.paged;if(0===t.length)return;const n=null===Zt?-1:nn.current.pagedKeys.indexOf(Zt),r=Math.max(1,Math.floor((dn||10*ct)/ct)-1);switch(e.key){case"ArrowDown":Pn(n+1,e);break;case"ArrowUp":Pn(-1===n?0:n-1,e);break;case"Home":Pn(0,e);break;case"End":Pn(t.length-1,e);break;case"PageDown":Pn(-1===n?0:n+r,e);break;case"PageUp":Pn(-1===n?0:n-r,e);break;case" ":-1!==n&&(e.preventDefault(),(e.ctrlKey||e.metaKey)&&vt?ln(t[n].key):an(t[n].key));break;case"a":case"A":(e.ctrlKey||e.metaKey)&&vt&&(e.preventDefault(),rn(nn.current.pagedKeys));break;case"Escape":e.preventDefault(),rn([]);break;case"Enter":-1!==n&&je&&(e.preventDefault(),je(t[n].row,Vt+n))}},children:[oe?e("caption",{className:D(R[Y],"text-(--neba-muted-fg)"),style:{padding:`0.5rem ${dt}`,textAlign:"start"},children:oe}):null,t("colgroup",{children:[kt?e("col",{style:{width:`${On}px`}}):null,ht.map(t=>{const n=Hn(t);return e("col",{style:void 0===n?void 0:{width:`${n}px`}},t.key)}),Xn?e("col",{}):null]}),t("thead",{children:[yt?t("tr",{style:{height:`${ut}px`},children:[kt?e("th",{scope:"col",rowSpan:2,className:D(le?"sticky top-0 z-20 [backdrop-filter:var(--neba-blur)]":""),style:{...Jn,padding:0,overflow:"visible"},children:pr}):null,qn.map(t=>void 0===t.label?ar(ht[t.from],t.from,2):e("th",{scope:"colgroup",colSpan:t.span,className:D("font-semibold text-(--neba-muted-fg) select-none",le?"sticky top-0 z-20 [backdrop-filter:var(--neba-blur)]":""),style:{...Jn,textAlign:"center"},children:t.label},`group-${t.from}`)),Xn?r.cloneElement(mr,{rowSpan:2}):null]}):null,t("tr",{style:{height:`${ut}px`},children:[kt&&!yt?e("th",{scope:"col",className:D(le?"sticky top-0 z-20 [backdrop-filter:var(--neba-blur)]":""),style:{...Jn,padding:0,overflow:"visible"},children:pr}):null,ht.map((e,t)=>yt&&void 0===e.group?null:ar(e,t)),Xn&&!yt?mr:null]})]}),e("tbody",{ref:cn,children:0===Xt.length?e("tr",{children:e("td",{colSpan:Vn,className:"text-(--neba-muted-fg)",style:{padding:`2rem ${dt}`,textAlign:"center"},children:ie??st.title})}):t(n,{children:[gr("before",bn.before),Ft?Ft.order.map(e=>{const n=Ft.byLabel.get(e)??[],a=n.filter(e=>qt.includes(e.key));return t(r.Fragment,{children:[lr(e,n),a.map(e=>rr(e,Xt.indexOf(e)))]},e||"\0")}):vn.map((e,t)=>rr(e,bn.start+t)),gr("after",bn.after)]})})]})}),er?t("div",{className:D("flex flex-wrap items-center gap-3",R[Y]),style:{padding:`0.375rem ${dt}`,borderTop:"1px solid var(--n-line)"},children:[e("span",{className:"text-(--neba-muted-fg) tabular-nums",children:tr}),bt&&Qt.size>0?e("span",{className:"text-(--n-accent) tabular-nums",children:C(ot.selected,{count:Zn.format(Qt.size)})}):null,t("div",{className:"ms-auto flex items-center gap-2",children:["pages"===$e&&Ie.length>0?e(n,{children:e(i,{size:Y,color:J,density:Q,variant:"outline",label:ot.rowsPerPage,items:Ie.map(e=>({value:e})),value:It,onValueChange:e=>{const t=Number(e);void 0===Re&&At(t),nr(Math.floor(Wt.start/t)+1),Ae?.(t)}})}):null,"pages"===$e?e(s,{size:Y,color:J,count:Wt.pages,page:Wt.page,siblingCount:0,onPageChange:nr}):null]})]}):null,!er&&hn?e("span",{className:A,"aria-live":"polite",children:tr}):null]})}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { type PickerLabels } from '../../internal/calendar.js';
|
|
3
3
|
import { type PickerShellProps } from '../../internal/picker.js';
|
|
4
|
-
import type { NebaWeekday } from '../../types.js';
|
|
4
|
+
import type { NebaDateGranularity, NebaWeekday } from '../../types.js';
|
|
5
5
|
/**
|
|
6
6
|
* What the four pickers agree on, so a caller who has learned one has learned
|
|
7
7
|
* the others. Spelled out here rather than in `internal/` because these are the
|
|
@@ -17,15 +17,34 @@ export interface DatePickerProps extends PickerShellProps {
|
|
|
17
17
|
open?: boolean;
|
|
18
18
|
defaultOpen?: boolean;
|
|
19
19
|
onOpenChange?: (open: boolean) => void;
|
|
20
|
+
/**
|
|
21
|
+
* Which unit the picker asks for: a day, a whole month, or a whole year.
|
|
22
|
+
*
|
|
23
|
+
* At `month` and `year` the calendar opens on that grid and stops there, and
|
|
24
|
+
* the value is the first day of what was chosen — 1 March, 1 January. The
|
|
25
|
+
* grid above is still reachable, so a year picker is one control and a month
|
|
26
|
+
* picker is still two clicks from any month of any year.
|
|
27
|
+
*
|
|
28
|
+
* Everything else follows it: the trigger's default `format`, what the
|
|
29
|
+
* footer's shortcut says, how `name` submits, and the unit `minDate`,
|
|
30
|
+
* `maxDate` and `shouldDisableDate` are read at.
|
|
31
|
+
* @default 'day'
|
|
32
|
+
*/
|
|
33
|
+
granularity?: NebaDateGranularity;
|
|
20
34
|
/** Which month the calendar opens on when there is no value. @default this one */
|
|
21
35
|
defaultMonth?: Date;
|
|
22
|
-
/**
|
|
36
|
+
/**
|
|
37
|
+
* The earliest date that may be chosen, compared at `granularity`. A minimum
|
|
38
|
+
* of 15 March leaves the 14th out at `day` and leaves March in at `month`:
|
|
39
|
+
* the cell stands for the whole month, and part of that month is allowed.
|
|
40
|
+
*/
|
|
23
41
|
minDate?: Date | null;
|
|
24
|
-
/** The latest
|
|
42
|
+
/** The latest date that may be chosen, read the same way. */
|
|
25
43
|
maxDate?: Date | null;
|
|
26
44
|
/**
|
|
27
|
-
* Blocks individual
|
|
28
|
-
* weekends, holidays, a room that is already booked.
|
|
45
|
+
* Blocks individual cells that are inside the range but still not available —
|
|
46
|
+
* weekends, holidays, a room that is already booked. Called with the value
|
|
47
|
+
* that cell would produce, so at `month` it is handed the 1st.
|
|
29
48
|
*/
|
|
30
49
|
shouldDisableDate?: (date: Date) => boolean;
|
|
31
50
|
/**
|
|
@@ -38,20 +57,28 @@ export interface DatePickerProps extends PickerShellProps {
|
|
|
38
57
|
/**
|
|
39
58
|
* How the trigger writes the chosen date. Passed straight to `Intl`, so
|
|
40
59
|
* `{ dateStyle: 'full' }` and `{ year: '2-digit', month: 'narrow' }` both work.
|
|
41
|
-
*
|
|
60
|
+
* Defaults to what `granularity` asked for — a medium date, a month and a
|
|
61
|
+
* year, or a bare year.
|
|
42
62
|
*/
|
|
43
63
|
format?: Intl.DateTimeFormatOptions;
|
|
44
64
|
/** Shown in the trigger while nothing is chosen. */
|
|
45
65
|
placeholder?: React.ReactNode;
|
|
46
66
|
/** Offers the × that empties the control. @default false */
|
|
47
67
|
clearable?: boolean;
|
|
48
|
-
/**
|
|
68
|
+
/**
|
|
69
|
+
* Offers the shortcut to the current unit in the footer — today, this month
|
|
70
|
+
* or this year, whichever `granularity` is asking for. @default true
|
|
71
|
+
*/
|
|
49
72
|
showTodayButton?: boolean;
|
|
50
73
|
/** Closes the popup as soon as a day is chosen. @default true */
|
|
51
74
|
closeOnSelect?: boolean;
|
|
52
75
|
/** The strings a screen reader hears. Every one has an English default. */
|
|
53
76
|
labels?: Partial<PickerLabels>;
|
|
54
|
-
/**
|
|
77
|
+
/**
|
|
78
|
+
* Identifies the field when a form is submitted. The value is written at
|
|
79
|
+
* `granularity` — `YYYY-MM-DD`, `YYYY-MM` or `YYYY` — so a month is never
|
|
80
|
+
* submitted as a day nobody chose.
|
|
81
|
+
*/
|
|
55
82
|
name?: string;
|
|
56
83
|
}
|
|
57
84
|
/**
|
|
@@ -67,6 +94,11 @@ export interface DatePickerProps extends PickerShellProps {
|
|
|
67
94
|
* its own — twelve months, then twelve years at a time. Any month of the year on
|
|
68
95
|
* screen is two clicks; any year at all is three.
|
|
69
96
|
*
|
|
97
|
+
* `granularity` turns that header into the answer. A month picker opens on the
|
|
98
|
+
* grid of twelve months and stops there; a year picker opens on the years. The
|
|
99
|
+
* value stays a `Date` — the 1st of what was chosen — because a second value
|
|
100
|
+
* type would mean a second set of props to compare it with.
|
|
101
|
+
*
|
|
70
102
|
* There is no typing into the trigger. Parsing a date out of free text is
|
|
71
103
|
* locale-dependent in a way that cannot be done honestly without a date library,
|
|
72
104
|
* and a field that understands `27/7/26` in one browser and not in the next is
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{Button as l}from"../button/Button.js";import{Calendar as
|
|
1
|
+
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{Button as l}from"../button/Button.js";import{Calendar as n,usePickerLabels as o}from"../../internal/calendar.js";import{CalendarIcon as r}from"../../internal/icons.js";import{PickerFooter as s,PickerShell as i}from"../../internal/picker.js";import{displaySamples as c,formatDate as m,isUnitOutside as d,isValidDate as u,localeWeekStart as h,mergeDateAndTime as p,startOfMonth as f,startOfUnit as y,toISODate as b,toISOMonth as g,toISOYear as j,today as x,withPlaceholder as v}from"../../internal/date.js";import{cx as D}from"../../internal/styles.js";import{useStyleDefaults as O}from"../../internal/defaults.js";const S={day:{dateStyle:"medium"},month:{year:"numeric",month:"long"},year:{year:"numeric"}},z={day:b,month:g,year:j};export const DatePicker=/*@__PURE__*/t.forwardRef(function(b,g){const{value:j,defaultValue:C,onValueChange:k,open:w,defaultOpen:M,onOpenChange:V,granularity:B="day",defaultMonth:I,minDate:R,maxDate:E,shouldDisableDate:F,locale:N,weekStartsOn:P,format:T,placeholder:Y,clearable:q=!1,showTodayButton:A=!0,closeOnSelect:G=!0,labels:H,name:J,size:K="md",color:L="primary",readOnly:Q=!1,disabled:U=!1,startIcon:W,...X}=O(b,["size","locale"]),Z=o(H),$=P??h(N),_=T??S[B],[ee,ae]=t.useState(C??null),te=void 0!==j?j:ee,[le,ne]=t.useState(M??!1),oe=w??le,[re,se]=t.useState(()=>f(u(te)?te:I??x()));t.useEffect(()=>{oe&&se(f(u(te)?te:I??x()))},[oe]);const ie=e=>{e&&(Q||U)||(void 0===w&&ne(e),V?.(e))},ce=e=>{void 0===j&&ae(e),k?.(e)},me=e=>{const a=y(e,B),t=u(te)?p(a,te):a;ce(t),se(f(t)),G&&ie(!1)},de=x(),ue=y(de,B),he=d(de,B,R,E)||(F?.(ue)??!1),pe="year"===B?Z.thisYear:"month"===B?Z.thisMonth:Z.today,fe=A||q,ye=t.useMemo(()=>v(c(N,_),Y),[N,_,Y]);return e(i,{...X,size:K,color:L,readOnly:Q,disabled:U,triggerRef:g,startIcon:W??e(r,{}),display:u(te)?m(te,N,_):Y??"",samples:ye,empty:!u(te),clearable:q,onClear:()=>ce(null),open:oe,onOpenChange:ie,labels:Z,hiddenValues:J?[{name:J,value:u(te)?z[B](te):""}]:void 0,children:a("div",{className:D("flex flex-col",fe&&"gap-1.5"),children:[e(n,{size:K,color:L,locale:N,weekStartsOn:$,month:re,onMonthChange:se,selected:[te],onSelect:me,granularity:B,minDate:R,maxDate:E,shouldDisableDate:F,labels:Z,autoFocus:!0}),fe?a(s,{size:K,children:[q?e(l,{variant:"text",size:K,color:L,density:"compact",onClick:()=>{ce(null),ie(!1)},children:Z.clear}):null,A?e(l,{variant:"text",size:K,color:L,density:"compact",disabled:he,onClick:()=>me(de),children:pe}):null]}):null]})})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as n from"react";import{Button as a}from"../button/Button.js";import{Calendar as t,usePickerLabels as s}from"../../internal/calendar.js";import{ArrowRightIcon as r,CalendarIcon as o}from"../../internal/icons.js";import{PickerFooter as i,PickerShell as c}from"../../internal/picker.js";import{WidthSizer as u}from"../../internal/sizer.js";import{addMonths as
|
|
1
|
+
"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as n from"react";import{Button as a}from"../button/Button.js";import{Calendar as t,usePickerLabels as s}from"../../internal/calendar.js";import{ArrowRightIcon as r,CalendarIcon as o}from"../../internal/icons.js";import{PickerFooter as i,PickerShell as c}from"../../internal/picker.js";import{WidthSizer as u}from"../../internal/sizer.js";import{addMonths as m,compareDay as d,displaySamples as h,formatDate as f,isValidDate as p,localeWeekStart as x,startOfDay as v,startOfMonth as g,toISODate as b,today as w,withPlaceholder as y}from"../../internal/date.js";import{cx as N,gapClasses as j,metaTextClasses as S}from"../../internal/styles.js";import{useStyleDefaults as C}from"../../internal/defaults.js";const D={start:null,end:null};export const DateRangePicker=/*@__PURE__*/n.forwardRef(function(O,z){const{value:k,defaultValue:P,onValueChange:B,open:M,defaultOpen:R,onOpenChange:V,defaultMonth:E,minDate:I,maxDate:F,shouldDisableDate:q,locale:A,weekStartsOn:G,format:H={dateStyle:"medium"},monthCount:J=2,startPlaceholder:K,endPlaceholder:L,presets:Q,clearable:T=!1,closeOnSelect:U=!0,labels:W,name:X,size:Y="md",color:Z="primary",readOnly:$=!1,disabled:_=!1,startIcon:ee,...le}=C(O,["size","locale"]),ne=s(W),ae=G??x(A),[te,se]=n.useState(P??D),re=void 0!==k?k??D:te,oe=p(re.start)?re.start:null,ie=p(re.end)?re.end:null,[ce,ue]=n.useState(R??!1),me=M??ce,[de,he]=n.useState(null),[fe,pe]=n.useState(null),[xe,ve]=n.useState(()=>g(oe??E??w()));n.useEffect(()=>{me?ve(g(oe??E??w())):(he(null),pe(null))},[me]);const ge=e=>{e&&($||_)||(void 0===M&&ue(e),V?.(e))},be=e=>{void 0===k&&se(e),B?.(e)},we=de??oe,ye=null!==de?fe:ie,Ne=(l,n)=>p(l)?f(l,A,H):e("span",{className:"text-(--neba-muted-fg)",children:n??""}),je=m(xe,1),Se=2===J,Ce=h(A,H),De=null!==de?ne.end:null===oe?ne.start:null,Oe={size:Y,color:Z,locale:A,weekStartsOn:ae,selected:[oe,ie,de],rangeStart:we,rangeEnd:ye,onSelect:e=>{const l=v(e);if(null===de)return he(l),pe(l),void be({start:l,end:null});const[n,a]=d(l,de)<0?[l,de]:[de,l];he(null),pe(null),be({start:n,end:a}),U&&ge(!1)},onPreviewChange:e=>{null!==de&&pe(e??de)},minDate:I,maxDate:F,shouldDisableDate:q,showOutsideDays:!1,labels:ne};return e(c,{...le,size:Y,color:Z,readOnly:$,disabled:_,triggerRef:z,startIcon:ee??e(o,{}),display:l("span",{className:"flex min-w-0 items-center gap-1.5",children:[l("span",{className:"flex min-w-0 flex-col",children:[e("span",{className:"truncate",children:Ne(oe,K)}),e(u,{samples:y(Ce,K)})]}),e("span",{"aria-hidden":"true",className:"flex shrink-0 items-center text-(--neba-muted-fg) rtl:rotate-180",children:e(r,{})}),l("span",{className:"flex min-w-0 flex-col",children:[e("span",{className:"truncate",children:Ne(ie,L)}),e(u,{samples:y(Ce,L)})]})]}),empty:null===oe&&null===ie,clearable:T,onClear:()=>be(D),open:me,onOpenChange:ge,labels:ne,hiddenValues:X?[{name:X,value:oe?b(oe):""},{name:X,value:ie?b(ie):""}]:void 0,children:l("div",{className:"flex flex-col gap-1.5",children:[l("div",{className:N("flex items-stretch",j[Y]),children:[Q&&Q.length>0?e("div",{className:N("flex max-h-[calc(var(--n-cell,2rem)*8)] flex-col overflow-y-auto border-e pe-1.5","[border-color:var(--n-line)]"),children:Q.map((l,n)=>e(a,{variant:"text",size:Y,color:Z,density:"compact",className:"justify-start whitespace-nowrap",onClick:()=>(e=>{const l="function"==typeof e.value?e.value():e.value;he(null),pe(null),be(l),p(l.start)&&ve(g(l.start)),U&&ge(!1)})(l),children:l.label},n))}):null,e(t,{...Oe,month:xe,onMonthChange:ve,showNextButton:!Se,autoFocus:!0}),Se?e(t,{...Oe,month:je,onMonthChange:e=>ve(m(e,-1)),showPreviousButton:!1}):null]}),T||null!==De?l(i,{size:Y,children:[null!==De?e("span",{className:N("me-auto text-(--neba-muted-fg)",S[Y]),children:De}):null,T?e(a,{variant:"text",size:Y,color:Z,density:"compact",onClick:()=>{he(null),pe(null),be(D),ge(!1)},children:ne.clear}):null]}):null]})})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{Button as n}from"../button/Button.js";import{Calendar as o,TimeGrid as a,usePickerLabels as s}from"../../internal/calendar.js";import{CalendarIcon as i}from"../../internal/icons.js";import{PickerDivider as r,PickerFooter as c,PickerShell as d}from"../../internal/picker.js";import{displaySamples as m,formatDate as u,isDayOutside as
|
|
1
|
+
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{Button as n}from"../button/Button.js";import{Calendar as o,TimeGrid as a,usePickerLabels as s}from"../../internal/calendar.js";import{CalendarIcon as i}from"../../internal/icons.js";import{PickerDivider as r,PickerFooter as c,PickerShell as d}from"../../internal/picker.js";import{displaySamples as m,formatDate as u,isDayOutside as p,isHour12 as h,isValidDate as f,localeWeekStart as S,mergeDateAndTime as b,startOfDay as y,startOfMonth as D,timeUnitSpan as g,toISODateTime as v,today as x,withPlaceholder as j,withTime as C}from"../../internal/date.js";import{cx as w,gapClasses as z}from"../../internal/styles.js";import{useStyleDefaults as k}from"../../internal/defaults.js";export const DateTimePicker=/*@__PURE__*/l.forwardRef(function(O,T){const{value:N,defaultValue:V,onValueChange:B,open:I,defaultOpen:M,onOpenChange:R,defaultMonth:E,minDate:F,maxDate:P,shouldDisableDate:q,shouldDisableTime:A,locale:G,weekStartsOn:H,format:J={dateStyle:"medium",timeStyle:"short"},hour12:K,showSeconds:L=!1,hourStep:Q=1,minuteStep:U=1,secondStep:W=1,placeholder:X,clearable:Y=!1,showNowButton:Z=!0,closeOnSelect:$=!1,labels:_,name:ee,size:te="md",color:le="primary",density:ne="default",readOnly:oe=!1,disabled:ae=!1,startIcon:se,...ie}=k(O,["size","density","locale"]),re=s(_),ce=H??S(G),de=K??h(G),[me,ue]=l.useState(V??null),pe=void 0!==N?N:me,[he,fe]=l.useState(M??!1),Se=I??he,[be,ye]=l.useState(()=>D(f(pe)?pe:E??x()));l.useEffect(()=>{Se&&ye(D(f(pe)?pe:E??x()))},[Se]);const De=e=>{e&&(oe||ae)||(void 0===I&&fe(e),R?.(e))},ge=e=>{void 0===N&&ue(e),B?.(e)},ve=l.useCallback((e,t)=>{const[l,n]=g(t,e),o=y(e).getTime();return!!(f(F)&&o+1e3*n<F.getTime())||(!!(f(P)&&o+1e3*l>P.getTime())||(A?.(e,t)??!1))},[F,P,A]),xe=new Date,je=C(xe,{seconds:L?xe.getSeconds():0}),Ce=p(je,F,P)||(q?.(je)??!1)||ve(je,"second"),we=j(m(G,J),X);return e(d,{...ie,size:te,color:le,density:ne,readOnly:oe,disabled:ae,triggerRef:T,startIcon:se??e(i,{}),display:f(pe)?u(pe,G,J):X??"",samples:we,empty:!f(pe),clearable:Y,onClear:()=>ge(null),open:Se,onOpenChange:De,labels:re,hiddenValues:ee?[{name:ee,value:f(pe)?v(pe,L):""}]:void 0,children:t("div",{className:"flex flex-col gap-1.5",children:[t("div",{className:w("flex items-stretch",z[te]),children:[e(o,{size:te,color:le,locale:G,weekStartsOn:ce,month:be,onMonthChange:ye,selected:[pe],onSelect:e=>{const t=f(pe)?b(e,pe):y(e);ge(t),ye(D(t)),$&&De(!1)},minDate:F,maxDate:P,shouldDisableDate:q,labels:re,autoFocus:!0}),e(r,{}),e(a,{size:te,density:ne,locale:G,value:f(pe)?pe:null,referenceDate:f(pe)?pe:x(),onChange:ge,hour12:de,showSeconds:L,hourStep:Q,minuteStep:U,secondStep:W,shouldDisableTime:ve,labels:re})]}),t(c,{size:te,children:[Y?e(n,{variant:"text",size:te,color:le,density:"compact",onClick:()=>{ge(null),De(!1)},children:re.clear}):null,Z?e(n,{variant:"text",size:te,color:le,density:"compact",disabled:Ce,onClick:()=>{ge(je),ye(D(je))},children:re.now}):null,e(n,{variant:"solid",size:te,color:le,density:"compact",onClick:()=>De(!1),children:re.done})]})]})})});
|
|
@@ -1,6 +1,18 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { Dialog as BaseUIDialog } from '@base-ui/react/dialog';
|
|
3
|
-
import type { NebaStyleProps } from '../../types.js';
|
|
3
|
+
import type { NebaSlots, NebaStyleProps } from '../../types.js';
|
|
4
|
+
/**
|
|
5
|
+
* The parts a Dialog draws around its popup.
|
|
6
|
+
*
|
|
7
|
+
* `className` is the popup — the sheet itself — which is the one element a
|
|
8
|
+
* caller means by "the dialog". Everything named here sits either outside it
|
|
9
|
+
* (`backdrop`, `viewport`) or inside it (the rest).
|
|
10
|
+
*
|
|
11
|
+
* The first two are the ones that could not be reached any other way: both
|
|
12
|
+
* render at the end of `<body>`, outside the popup, so no selector written
|
|
13
|
+
* against the sheet finds them.
|
|
14
|
+
*/
|
|
15
|
+
export type DialogSlot = 'backdrop' | 'viewport' | 'title' | 'description' | 'close' | 'body' | 'actions';
|
|
4
16
|
/**
|
|
5
17
|
* A dialog takes `size`, `color` and `density` and stops there.
|
|
6
18
|
*
|
|
@@ -85,6 +97,11 @@ export interface DialogProps extends Pick<NebaStyleProps, 'size' | 'color' | 'de
|
|
|
85
97
|
* @default true
|
|
86
98
|
*/
|
|
87
99
|
dismissible?: boolean;
|
|
100
|
+
/**
|
|
101
|
+
* Class names for the parts around the popup. `className` is the popup — the
|
|
102
|
+
* sheet — so the scrim behind it is `classNames.backdrop`.
|
|
103
|
+
*/
|
|
104
|
+
classNames?: NebaSlots<DialogSlot>;
|
|
88
105
|
/** The body. */
|
|
89
106
|
children?: React.ReactNode;
|
|
90
107
|
}
|
|
@@ -114,4 +131,4 @@ export declare const DialogClose: React.ForwardRefExoticComponent<Omit<import("@
|
|
|
114
131
|
* the header and the actions stay put while only the body scrolls, which is why
|
|
115
132
|
* `dividers` matters more here than on a Card.
|
|
116
133
|
*/
|
|
117
|
-
export declare function Dialog(
|
|
134
|
+
export declare function Dialog(rawProps: DialogProps): React.JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{Dialog as l}from"@base-ui/react/dialog";import{boxPaddingXClasses as n,boxPaddingYClasses as i}from"../box/Box.js";import{actionMessages as o,useMessages as r}from"../../internal/i18n.js";import{CloseIcon as s}from"../../internal/icons.js";import{cx as t,hasContent as c,metaTextClasses as d,radiusClasses as m,sheetBodyClasses as f,sheetHeaderGapClasses as
|
|
1
|
+
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{Dialog as l}from"@base-ui/react/dialog";import{boxPaddingXClasses as n,boxPaddingYClasses as i}from"../box/Box.js";import{actionMessages as o,useMessages as r}from"../../internal/i18n.js";import{CloseIcon as s}from"../../internal/icons.js";import{cx as t,hasContent as c,metaTextClasses as d,radiusClasses as m,sheetBodyClasses as f,sheetHeaderGapClasses as p,sheetSectionGapClasses as u,sheetTitleClasses as b,surfaceClasses as x,surfaceSlots as h}from"../../internal/styles.js";import{useStyleDefaults as v}from"../../internal/defaults.js";const g={xs:"max-w-80",sm:"max-w-96",md:"max-w-lg",lg:"max-w-2xl",xl:"max-w-4xl"},y=[x,"relative flex w-full flex-col overflow-hidden","border text-(--neba-fg) bg-(--n-panel-press)","[border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]","[outline:none]","[transition:opacity_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),w=["fixed inset-0 z-50 bg-(--neba-scrim)","[backdrop-filter:blur(2px)]","[transition:opacity_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),j="border-t [border-color:var(--n-line)]";export const DialogClose=l.Close;export function Dialog(x){const{size:N="md",color:_="primary",density:k="default",open:$,defaultOpen:z,onOpenChange:C,trigger:D,title:O,description:P,actions:B,dividers:T=!1,showClose:W=!0,locale:L,closeLabel:R,width:S,fullWidth:V=!0,fullScreen:q=!1,modal:A=!0,dismissible:E=!0,className:F,classNames:G,style:H,children:I,...J}=v(x,["size","density","locale"]),K=r(o,L),M=n[k][N],Q=i[k][N],U=T?`${M} ${Q}`:M,X=c(O)||c(P),Y=c(B);return a(l.Root,{open:$,defaultOpen:z,modal:A,disablePointerDismissal:!E,onOpenChange:(e,a)=>{E||e||"escape-key"!==a.reason?C?.(e):a.cancel()},children:[D?e(l.Trigger,{render:D}):null,a(l.Portal,{children:[e(l.Backdrop,{className:t("neba-portal",w,G?.backdrop)}),e(l.Viewport,{className:t("neba-portal fixed inset-0 z-50 flex justify-center",q?"items-stretch":"items-center p-4",G?.viewport),children:a(l.Popup,{className:t(y,f[N],q?"h-full max-w-none rounded-none":`max-h-full ${m[N]} ${void 0===S?g[N]:""}`,q||V?"":"w-auto",T?"":`${Q} ${u[N]}`,F??""),style:{...h(_,3),...void 0===S?null:{maxWidth:"number"==typeof S?`${S}px`:S},...H},...J,children:[X||W?a("div",{className:`flex shrink-0 items-start gap-3 ${U}`,children:[a("div",{className:`flex min-w-0 flex-1 flex-col ${p[N]}`,children:[c(O)?e(l.Title,{className:t("font-semibold",b[N],"m-0",G?.title),children:O}):null,c(P)?e(l.Description,{className:t("m-0 text-(--neba-muted-fg)",d[N],G?.description),children:P}):null]}),W?e(l.Close,{"aria-label":R??K.close,className:t("flex size-[1.6em] shrink-0 cursor-pointer items-center justify-center","rounded-full text-(--neba-muted-fg)","[&_svg]:size-[1.1em] [&_svg]:shrink-0","[transition:background-color_var(--neba-duration)_var(--neba-ease),color_var(--neba-duration)_var(--neba-ease)]","hover:bg-(--n-soft) hover:text-(--neba-fg)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2",G?.close),children:e(s,{})}):null]}):null,c(I)?e("div",{className:t("min-h-0 flex-1 overflow-y-auto overscroll-contain",U,T&&(X||W)?j:"",T?"":"py-1 -my-1",G?.body),children:I}):null,Y?e("div",{className:t("flex shrink-0 flex-wrap items-center justify-end gap-2",U,T?j:"",G?.actions),children:B}):null]})})]})]})}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as t from"react";import{Separator as l}from"@base-ui/react/separator";import{cx as a,metaTextClasses as
|
|
1
|
+
"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as t from"react";import{Separator as l}from"@base-ui/react/separator";import{cx as a,metaTextClasses as i,toLength as n}from"../../internal/styles.js";import{useStyleDefaults as s}from"../../internal/defaults.js";const o="[border-color:var(--n-line)]",d={horizontal:{start:["w-4 shrink-0","flex-1"],center:["flex-1","flex-1"],end:["flex-1","w-4 shrink-0"]},vertical:{start:["h-4 shrink-0","flex-1"],center:["flex-1","flex-1"],end:["flex-1","h-4 shrink-0"]}},c={xs:"gap-1.5",sm:"gap-2",md:"gap-3",lg:"gap-3.5",xl:"gap-4"};export const Divider=/*@__PURE__*/t.forwardRef(function(t,f){const{orientation:h="horizontal",color:m="primary",size:p="md",length:u,thickness:x,textAlign:w="center",className:v,style:b,children:g,...$}=s(t,["size"]),j="vertical"===h,k=null!=g&&!1!==g&&""!==g,y={"--n-line":`var(--neba-${m}-line)`,"--n-rule":n(x)??"1px"},N=n(u),z={...y,...void 0===N?null:j?{height:N}:{width:N},...b};if(!k)return e(l,{ref:f,orientation:h,className:a(j?"w-0 border-l [border-left-width:var(--n-rule)] "+(void 0===N?"self-stretch":""):"h-0 w-full border-t [border-top-width:var(--n-rule)]",o,v??""),style:z,...$});const[A,B]=d[h][w],D=j?"w-0 border-l [border-left-width:var(--n-rule)]":"h-0 border-t [border-top-width:var(--n-rule)]";return r(l,{ref:f,orientation:h,"aria-label":"string"==typeof g?g:void 0,className:a("flex items-center",j?"w-auto flex-col "+(void 0===N?"self-stretch":""):"w-full",c[p],v??""),style:z,...$,children:[e("span",{"aria-hidden":"true",className:`${D} ${A} ${o}`}),e("span",{className:["shrink-0 whitespace-nowrap text-(--neba-muted-fg)",i[p],j?"[writing-mode:vertical-rl]":""].filter(Boolean).join(" "),children:g}),e("span",{"aria-hidden":"true",className:`${D} ${B} ${o}`})]})});
|
|
@@ -148,4 +148,4 @@ export declare const DrawerClose: React.ForwardRefExoticComponent<Omit<import("@
|
|
|
148
148
|
* scroll lock, the `aria-labelledby` / `aria-describedby` wiring, restoring
|
|
149
149
|
* focus to the trigger, and the inert page behind.
|
|
150
150
|
*/
|
|
151
|
-
export declare function Drawer(
|
|
151
|
+
export declare function Drawer(rawProps: DrawerProps): React.JSX.Element | null;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as r,Fragment as a}from"react/jsx-runtime";import{Dialog as l}from"@base-ui/react/dialog";import{boxPaddingXClasses as n,boxPaddingYClasses as s}from"../box/Box.js";import{actionMessages as o,useMessages as i}from"../../internal/i18n.js";import{CloseIcon as d}from"../../internal/icons.js";import{cx as t,hasContent as u,metaTextClasses as
|
|
1
|
+
"use client";import{jsx as e,jsxs as r,Fragment as a}from"react/jsx-runtime";import{Dialog as l}from"@base-ui/react/dialog";import{boxPaddingXClasses as n,boxPaddingYClasses as s}from"../box/Box.js";import{actionMessages as o,useMessages as i}from"../../internal/i18n.js";import{CloseIcon as d}from"../../internal/icons.js";import{cx as t,hasContent as u,metaTextClasses as m,sheetBodyClasses as b,sheetHeaderGapClasses as c,sheetSectionGapClasses as f,sheetTitleClasses as x,surfaceClasses as p,surfaceSlots as g}from"../../internal/styles.js";import{useStyleDefaults as h}from"../../internal/defaults.js";const v={xs:"w-56",sm:"w-64",md:"w-80",lg:"w-96",xl:"w-[28rem]"},y={left:{xs:"rounded-r-(--neba-radius-xs)",sm:"rounded-r-(--neba-radius-sm)",md:"rounded-r-(--neba-radius-md)",lg:"rounded-r-(--neba-radius-lg)",xl:"rounded-r-(--neba-radius-xl)"},right:{xs:"rounded-l-(--neba-radius-xs)",sm:"rounded-l-(--neba-radius-sm)",md:"rounded-l-(--neba-radius-md)",lg:"rounded-l-(--neba-radius-lg)",xl:"rounded-l-(--neba-radius-xl)"},top:{xs:"rounded-b-(--neba-radius-xs)",sm:"rounded-b-(--neba-radius-sm)",md:"rounded-b-(--neba-radius-md)",lg:"rounded-b-(--neba-radius-lg)",xl:"rounded-b-(--neba-radius-xl)"},bottom:{xs:"rounded-t-(--neba-radius-xs)",sm:"rounded-t-(--neba-radius-sm)",md:"rounded-t-(--neba-radius-md)",lg:"rounded-t-(--neba-radius-lg)",xl:"rounded-t-(--neba-radius-xl)"}},w={left:"border-r",right:"border-l",top:"border-b",bottom:"border-t"},j={left:"flex-row justify-start",right:"flex-row justify-end",top:"flex-col justify-start",bottom:"flex-col justify-end"},N=[p,"relative flex flex-col overflow-hidden","text-(--neba-fg) bg-(--n-panel-press)","[border-color:var(--n-line)]","[outline:none]"].join(" "),$=["[transition:opacity_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),_=["fixed inset-0 z-50 bg-(--neba-scrim)","[backdrop-filter:blur(2px)]",$].join(" "),k="border-t [border-color:var(--n-line)]",C=["flex size-[1.6em] shrink-0 cursor-pointer items-center justify-center","rounded-full text-(--neba-muted-fg)","[&_svg]:size-[1.1em] [&_svg]:shrink-0","[transition:background-color_var(--neba-duration)_var(--neba-ease),color_var(--neba-duration)_var(--neba-ease)]","hover:bg-(--n-soft) hover:text-(--neba-fg)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"].join(" ");export const DrawerClose=l.Close;export function Drawer(p){const{side:z="left",mode:D="overlay",size:O="md",color:P="primary",density:B="default",open:T,defaultOpen:F,onOpenChange:L,trigger:R,title:V,description:q,actions:A,dividers:E=!1,showClose:G,locale:H,closeLabel:I,extent:J,rounded:K=!0,modal:M=!0,dismissible:Q=!0,className:S,style:U,children:W,...X}=h(p,["size","density","locale"]),Y=i(o,H),Z="overlay"===D,ee="left"===z||"right"===z,re=G??Z,ae=n[B][O],le=s[B][O],ne=E?`${ae} ${le}`:ae,se=u(V)||u(q),oe=u(A),ie=void 0===J?null:{[ee?"width":"height"]:"number"==typeof J?`${J}px`:J},de=t(N,b[O],w[z],K?y[z][O]:"",Z?"[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]":"[box-shadow:var(--neba-plate-glass)]",Z?$:"",ee?`h-full max-w-full ${void 0===J?v[O]:""}`:"w-full "+(void 0===J?"max-h-[85%]":""),E?"":`${le} ${f[O]}`,S??""),te=Z?l.Title:"h2",ue=Z?l.Description:"p",me=r(a,{children:[se||re?r("div",{className:`flex shrink-0 items-start gap-3 ${ne}`,children:[r("div",{className:`flex min-w-0 flex-1 flex-col ${c[O]}`,children:[u(V)?e(te,{className:`m-0 font-semibold ${x[O]}`,children:V}):null,u(q)?e(ue,{className:`m-0 text-(--neba-muted-fg) ${m[O]}`,children:q}):null]}),re?Z?e(l.Close,{"aria-label":I??Y.close,className:C,children:e(d,{})}):e("button",{type:"button","aria-label":I??Y.close,className:C,onClick:()=>L?.(!1),children:e(d,{})}):null]}):null,u(W)?e("div",{className:t("min-h-0 flex-1 overflow-y-auto overscroll-contain",ne,E&&(se||re)?k:"",E?"":"py-1 -my-1"),children:W}):null,oe?e("div",{className:t("flex shrink-0 flex-wrap items-center justify-end gap-2",ne,E?k:""),children:A}):null]});return Z?r(l.Root,{open:T,defaultOpen:F,modal:M,disablePointerDismissal:!Q,onOpenChange:(e,r)=>{Q||e||"escape-key"!==r.reason?L?.(e):r.cancel()},children:[R?e(l.Trigger,{render:R}):null,r(l.Portal,{children:[e(l.Backdrop,{className:`neba-portal ${_}`}),e(l.Viewport,{className:`neba-portal fixed inset-0 z-50 flex ${j[z]}`,children:e(l.Popup,{className:de,style:{...g(P,3),...ie,...U},...X,children:me})})]})]}):T??F??!0?e("div",{className:de,style:{...g(P,0),...ie,...U},children:me}):null}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import*as n from"react";import{useRender as l}from"@base-ui/react/use-render";import{boxPaddingXClasses as a}from"../box/Box.js";import{transitionProps as s}from"../../internal/animate.js";import{emptyMessages as o,useMessages as i}from"../../internal/i18n.js";import{cx as m,hasContent as c,iconClasses as d,radiusClasses as x,sheetBodyClasses as p,sheetHeaderGapClasses as f,sheetSectionGapClasses as u,sheetTitleClasses as h,surfaceClasses as v,surfaceSlots as y,transitionClasses as b}from"../../internal/styles.js";const
|
|
1
|
+
"use client";import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import*as n from"react";import{useRender as l}from"@base-ui/react/use-render";import{boxPaddingXClasses as a}from"../box/Box.js";import{transitionProps as s}from"../../internal/animate.js";import{emptyMessages as o,useMessages as i}from"../../internal/i18n.js";import{cx as m,hasContent as c,iconClasses as d,radiusClasses as x,sheetBodyClasses as p,sheetHeaderGapClasses as f,sheetSectionGapClasses as u,sheetTitleClasses as h,surfaceClasses as v,surfaceSlots as y,transitionClasses as b}from"../../internal/styles.js";import{useStyleDefaults as g}from"../../internal/defaults.js";const j={default:{xs:"py-5",sm:"py-6",md:"py-8",lg:"py-10",xl:"py-12"},compact:{xs:"py-3",sm:"py-3.5",md:"py-4",lg:"py-5",xl:"py-6"}},N={xs:"text-[1.25rem]",sm:"text-[1.5rem]",md:"text-[1.75rem]",lg:"text-[2.125rem]",xl:"text-[2.5rem]"},k={solid:[v,"text-(--neba-fg) bg-(--n-panel-hover)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[v,"border text-(--neba-fg) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"text-(--neba-fg) bg-transparent"};function w(){return t("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[e("path",{d:"M1.75 9.75h3l.9 1.6h4.7l.9-1.6h3",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),e("path",{d:"m1.75 9.75 2.1-6a1.5 1.5 0 0 1 1.42-1h5.46a1.5 1.5 0 0 1 1.42 1l2.1 6v2a1.5 1.5 0 0 1-1.5 1.5h-9.5a1.5 1.5 0 0 1-1.5-1.5Z",stroke:"currentColor",strokeWidth:"1.5",strokeLinejoin:"round"})]})}export const Empty=/*@__PURE__*/n.forwardRef(function(n,v){const{variant:$="text",size:L="md",color:z="secondary",density:B="default",elevation:C=0,title:W,icon:E,action:F,locale:M,transition:R,render:Z,className:q,style:A,children:D,...G}=g(n,["size","density","variant","locale"]),H=i(o,M),I=void 0===W?H.title:W,J=void 0===E?e(w,{}):E,K=s(R),O=c(I),P=m("flex w-full flex-col items-center justify-center text-center",a[B][L],j[B][L],x[L],u[L],b,k[$],K.className,q??"");return l({render:Z,ref:v,props:{role:"status",className:P,style:{...y(z,C),...K.style,...A},children:t(r,{children:[c(J)?e("span",{className:`flex items-center text-(--neba-muted-fg) ${N[L]} ${d}`,children:J}):null,O||c(D)?t("div",{className:`flex max-w-prose flex-col items-center ${f[L]}`,children:[O?e("div",{className:`neba-title font-semibold ${h[L]}`,children:I}):null,c(D)?e("div",{className:`${p[L]} ${O?"text-(--neba-muted-fg)":""}`,children:D}):null]}):null,c(F)?e("div",{className:"flex flex-wrap items-center justify-center gap-2",children:F}):null]}),...G}})});
|