neba 1.8.1 → 1.10.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 +7 -7
- package/dist/components/accordion/Accordion.js +1 -1
- package/dist/components/alert/Alert.js +1 -1
- package/dist/components/anchor/Anchor.d.ts +73 -0
- package/dist/components/anchor/Anchor.js +1 -0
- package/dist/components/anchor/index.d.ts +2 -0
- package/dist/components/anchor/index.js +1 -0
- package/dist/components/animate-marquee/AnimateMarquee.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.d.ts +47 -0
- package/dist/components/avatar-group/AvatarGroup.js +1 -0
- package/dist/components/avatar-group/index.d.ts +2 -0
- package/dist/components/avatar-group/index.js +1 -0
- package/dist/components/badge/Badge.js +1 -1
- package/dist/components/blockquote/Blockquote.js +1 -1
- package/dist/components/box/Box.js +1 -1
- package/dist/components/button/Button.js +1 -1
- package/dist/components/button-group/ButtonGroup.js +1 -1
- 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/combobox/Combobox.d.ts +17 -2
- package/dist/components/combobox/Combobox.js +1 -1
- package/dist/components/command-palette/CommandPalette.d.ts +105 -0
- package/dist/components/command-palette/CommandPalette.js +1 -0
- package/dist/components/command-palette/index.d.ts +2 -0
- package/dist/components/command-palette/index.js +1 -0
- package/dist/components/container/Container.js +1 -1
- package/dist/components/data-list/DataList.d.ts +55 -0
- package/dist/components/data-list/DataList.js +1 -0
- package/dist/components/data-list/index.d.ts +2 -0
- package/dist/components/data-list/index.js +1 -0
- package/dist/components/data-table/DataTable.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.js +1 -1
- package/dist/components/empty/Empty.js +1 -1
- package/dist/components/fieldset/Fieldset.d.ts +33 -0
- package/dist/components/fieldset/Fieldset.js +1 -0
- package/dist/components/fieldset/index.d.ts +2 -0
- package/dist/components/fieldset/index.js +1 -0
- package/dist/components/file-picker/FilePicker.js +1 -1
- package/dist/components/floating-bottom-navigation/FloatingBottomNavigation.js +1 -1
- package/dist/components/form/Form.d.ts +58 -0
- package/dist/components/form/Form.js +1 -0
- package/dist/components/form/index.d.ts +2 -0
- package/dist/components/form/index.js +1 -0
- package/dist/components/gauge-chart/GaugeChart.d.ts +62 -0
- package/dist/components/gauge-chart/GaugeChart.js +1 -0
- package/dist/components/gauge-chart/index.d.ts +2 -0
- package/dist/components/gauge-chart/index.js +1 -0
- package/dist/components/grid/Grid.js +1 -1
- package/dist/components/grid-container/GridContainer.js +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 +78 -0
- package/dist/components/hover-card/HoverCard.js +1 -0
- package/dist/components/hover-card/index.d.ts +2 -0
- package/dist/components/hover-card/index.js +1 -0
- package/dist/components/how-to-steps/HowToSteps.d.ts +11 -25
- package/dist/components/how-to-steps/HowToSteps.js +1 -1
- package/dist/components/icon/Icon.js +1 -1
- package/dist/components/list/List.js +1 -1
- package/dist/components/menu/Menu.d.ts +16 -4
- package/dist/components/menu/Menu.js +1 -1
- package/dist/components/menubar/Menubar.d.ts +56 -0
- package/dist/components/menubar/Menubar.js +1 -0
- package/dist/components/menubar/index.d.ts +2 -0
- package/dist/components/menubar/index.js +1 -0
- package/dist/components/meter/Meter.d.ts +52 -0
- package/dist/components/meter/Meter.js +1 -0
- package/dist/components/meter/index.d.ts +2 -0
- package/dist/components/meter/index.js +1 -0
- package/dist/components/mockup/Mockup.js +1 -1
- package/dist/components/navigation-menu/NavigationMenu.d.ts +100 -0
- package/dist/components/navigation-menu/NavigationMenu.js +1 -0
- package/dist/components/navigation-menu/index.d.ts +2 -0
- package/dist/components/navigation-menu/index.js +1 -0
- package/dist/components/number-field/NumberField.d.ts +17 -2
- package/dist/components/number-field/NumberField.js +1 -1
- package/dist/components/otp-field/OtpField.js +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.js +1 -1
- package/dist/components/pill/Pill.js +1 -1
- package/dist/components/popover/Popover.js +1 -1
- 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/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/scroll-area/ScrollArea.d.ts +50 -0
- package/dist/components/scroll-area/ScrollArea.js +1 -0
- package/dist/components/scroll-area/index.d.ts +2 -0
- package/dist/components/scroll-area/index.js +1 -0
- package/dist/components/scroll-zone/ScrollZone.d.ts +35 -17
- package/dist/components/scroll-zone/ScrollZone.js +1 -1
- package/dist/components/segmented-button/SegmentedButton.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.js +1 -1
- package/dist/components/sidebar/Sidebar.js +1 -1
- package/dist/components/skeleton/Skeleton.js +1 -1
- package/dist/components/slider/Slider.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/tabs/Tabs.js +1 -1
- package/dist/components/text-field/TextField.d.ts +16 -1
- package/dist/components/text-field/TextField.js +1 -1
- package/dist/components/text-link/TextLink.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.d.ts +53 -0
- package/dist/components/toggle/Toggle.js +1 -0
- package/dist/components/toggle/index.d.ts +2 -0
- package/dist/components/toggle/index.js +1 -0
- package/dist/components/toggle-group/ToggleGroup.d.ts +51 -0
- package/dist/components/toggle-group/ToggleGroup.js +1 -0
- package/dist/components/toggle-group/index.d.ts +2 -0
- package/dist/components/toggle-group/index.js +1 -0
- package/dist/components/toolbar/Toolbar.js +1 -1
- package/dist/components/tooltip/Tooltip.js +1 -1
- package/dist/components/tour/Tour.d.ts +97 -0
- package/dist/components/tour/Tour.js +1 -0
- package/dist/components/tour/index.d.ts +2 -0
- package/dist/components/tour/index.js +1 -0
- package/dist/components/transfer/Transfer.d.ts +52 -0
- package/dist/components/transfer/Transfer.js +1 -0
- package/dist/components/transfer/index.d.ts +2 -0
- package/dist/components/transfer/index.js +1 -0
- package/dist/components/tree-view/TreeView.js +1 -1
- package/dist/components/typography/Typography.js +1 -1
- package/dist/components/window-pane/WindowPane.js +1 -1
- package/dist/index.d.ts +16 -0
- package/dist/index.js +1 -1
- package/dist/internal/animate.d.ts +7 -1
- package/dist/internal/animate.js +1 -1
- package/dist/internal/avatar-group.d.ts +22 -0
- package/dist/internal/avatar-group.js +1 -0
- package/dist/internal/button-group.d.ts +6 -2
- package/dist/internal/chart-frame.d.ts +18 -1
- package/dist/internal/chart-frame.js +1 -1
- package/dist/internal/data-table.d.ts +0 -14
- package/dist/internal/data-table.js +1 -1
- package/dist/internal/drag.d.ts +62 -0
- package/dist/internal/drag.js +1 -0
- package/dist/internal/highlight.js +1 -1
- package/dist/internal/i18n.d.ts +82 -0
- package/dist/internal/i18n.js +1 -1
- package/dist/internal/link.d.ts +19 -0
- package/dist/internal/link.js +1 -0
- package/dist/internal/media.d.ts +29 -0
- package/dist/internal/media.js +1 -0
- package/dist/internal/observe.d.ts +42 -0
- package/dist/internal/observe.js +1 -0
- package/dist/internal/page-layout.js +1 -1
- package/dist/internal/picker.js +1 -1
- package/dist/internal/progress.d.ts +5 -0
- package/dist/internal/search.d.ts +33 -0
- package/dist/internal/search.js +1 -0
- package/dist/internal/styles.d.ts +39 -0
- package/dist/internal/styles.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/tailwind.css +104 -0
- package/dist/types.d.ts +55 -0
- package/package.json +2 -2
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import type { NebaElevation, NebaStyleProps } from '../../types.js';
|
|
2
|
+
import type { NebaElevation, NebaFieldSlot, NebaSlots, NebaStyleProps } from '../../types.js';
|
|
3
3
|
/**
|
|
4
4
|
* What a Combobox's value may be — the same two types a [Select](../select)
|
|
5
5
|
* submits, and for the same reason: a form control's value is what a form
|
|
@@ -25,6 +25,15 @@ export interface ComboboxOption {
|
|
|
25
25
|
}
|
|
26
26
|
/** One value, or an array of them, depending on `multiple`. */
|
|
27
27
|
type Selection<Multiple extends boolean | undefined> = Multiple extends true ? ComboboxValue[] : ComboboxValue | null;
|
|
28
|
+
/**
|
|
29
|
+
* The parts a Combobox draws behind its root.
|
|
30
|
+
*
|
|
31
|
+
* `shell` is the framed box, `control` the `<input>` the reader types into, and
|
|
32
|
+
* `chip` one of the tokens a multiple-selection combobox puts in front of it.
|
|
33
|
+
* `popup` and `item` are portalled, so nothing written against the root reaches
|
|
34
|
+
* them.
|
|
35
|
+
*/
|
|
36
|
+
export type ComboboxSlot = NebaFieldSlot | 'shell' | 'chip' | 'popup' | 'item';
|
|
28
37
|
export interface ComboboxProps<Multiple extends boolean | undefined = false> extends NebaStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'children'> {
|
|
29
38
|
/**
|
|
30
39
|
* The options, as data — the same shape Select takes, and for the same
|
|
@@ -120,6 +129,12 @@ export interface ComboboxProps<Multiple extends boolean | undefined = false> ext
|
|
|
120
129
|
/** A ref to the text input the user types into. */
|
|
121
130
|
inputRef?: React.Ref<HTMLInputElement>;
|
|
122
131
|
id?: string;
|
|
132
|
+
/**
|
|
133
|
+
* Class names for the parts behind the root. `className` is the root — the
|
|
134
|
+
* column holding the label, the shell and the two lines under it — so the
|
|
135
|
+
* `<input>` itself is `classNames.control`.
|
|
136
|
+
*/
|
|
137
|
+
classNames?: NebaSlots<ComboboxSlot>;
|
|
123
138
|
}
|
|
124
139
|
/**
|
|
125
140
|
* A field you can type into and also choose from.
|
|
@@ -139,5 +154,5 @@ export interface ComboboxProps<Multiple extends boolean | undefined = false> ext
|
|
|
139
154
|
* navigation across both the list and the chips, and the hidden input that
|
|
140
155
|
* makes the whole thing submit with a form.
|
|
141
156
|
*/
|
|
142
|
-
export declare function Combobox<Multiple extends boolean | undefined = false>({ variant, size, color, density, elevation, items, multiple, value, defaultValue, onValueChange, onInputValueChange, allowCustom, customLabel, clearable, locale, emptyMessage, limit, placeholder, label, description, error, invalid, startIcon, fullWidth, disabled, readOnly, required, name, open, defaultOpen, onOpenChange, clearLabel, removeLabel, inputRef, id, className, style, ...props }: ComboboxProps<Multiple>): React.JSX.Element;
|
|
157
|
+
export declare function Combobox<Multiple extends boolean | undefined = false>({ variant, size, color, density, elevation, items, multiple, value, defaultValue, onValueChange, onInputValueChange, allowCustom, customLabel, clearable, locale, emptyMessage, limit, placeholder, label, description, error, invalid, startIcon, fullWidth, disabled, readOnly, required, name, open, defaultOpen, onOpenChange, clearLabel, removeLabel, inputRef, id, className, classNames, style, ...props }: ComboboxProps<Multiple>): React.JSX.Element;
|
|
143
158
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{Combobox as
|
|
1
|
+
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{Combobox as t}from"@base-ui/react/combobox";import{Field as n}from"@base-ui/react/field";import{Chip as i}from"../chip/Chip.js";import{actionMessages as r,comboboxMessages as s,fillMessage as o,useMessages as c}from"../../internal/i18n.js";import{CheckIcon as d,ChevronIcon as m,CloseIcon as u,PlusIcon as p}from"../../internal/icons.js";import{chipRemoveClasses as h,controlHeightClasses as b,controlTextLeadingClasses as f,cx as g,disabledClasses as x,fieldReadOnlyClasses as v,fieldRestClasses as y,focusWithinRingClasses as N,gapClasses as w,hasContent as C,iconClasses as j,metaTextClasses as L,paddingXClasses as I,radiusClasses as S,stackGapClasses as O,surfaceClasses as V,surfaceSlots as _,transitionClasses as z}from"../../internal/styles.js";const $=["group relative flex w-full cursor-text items-center","[-webkit-tap-highlight-color:transparent]",z,"focus-within:[transition-duration:0ms]",N,j].join(" "),A={xs:"min-h-5.5 py-0",sm:"min-h-6.5 py-[2px]",md:"min-h-8 py-[3px]",lg:"min-h-10 py-[4px]",xl:"min-h-12 py-[4px]"},M=[V,"max-h-[min(20rem,var(--available-height))] overflow-y-auto overscroll-contain","w-[var(--anchor-width)] border bg-(--n-panel-press) p-1","[border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]","[outline:none]"].join(" "),k=["relative flex cursor-pointer items-center gap-2 select-none","rounded-(--neba-radius-xs) py-1.5 pe-2 ps-7",z,"data-[highlighted]:bg-(--n-soft-hover) data-[highlighted]:text-(--n-accent)","data-[selected]:text-(--n-accent) data-[selected]:font-medium","data-[disabled]:cursor-not-allowed data-[disabled]:text-(--neba-disabled-fg)","[outline:none]"].join(" "),R=["inline-flex h-[1lh] shrink-0 cursor-pointer items-center justify-center","rounded-(--neba-radius-xs) text-(--neba-muted-fg)","[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","disabled:cursor-not-allowed disabled:text-(--neba-disabled-fg)"].join(" ");function T(e){return null==e?[]:Array.isArray(e)?e.slice():[e]}export function Combobox({variant:N="outline",size:j="md",color:V="primary",density:z="default",elevation:q=0,items:E,multiple:F,value:P,defaultValue:B,onValueChange:D,onInputValueChange:G,allowCustom:H=!0,customLabel:W,clearable:J=!1,locale:K,emptyMessage:Q,limit:U,placeholder:X,label:Y,description:Z,error:ee,invalid:ae,startIcon:le,fullWidth:te=!1,disabled:ne=!1,readOnly:ie=!1,required:re=!1,name:se,open:oe,defaultOpen:ce,onOpenChange:de,clearLabel:me,removeLabel:ue,inputRef:pe,id:he,className:be,classNames:fe,style:ge,...xe}){const ve=c(s,K),ye=c(r,K),Ne=ue??(e=>o(ve.remove,{label:e})),we=C(ee),Ce=ae??we,je=Ce?"danger":V,Le=!0===F,Ie=l.useMemo(()=>E.map(e=>({value:e.value,label:e.label??String(e.value),disabled:e.disabled})),[E]),[Se,Oe]=l.useState(()=>T(B)),Ve=void 0===P?Se:T(P),[_e,ze]=l.useState(""),$e=l.useMemo(()=>new Map(Ie.map(e=>[e.value,e])),[Ie]),Ae=l.useCallback(e=>$e.get(e)??{value:e,label:String(e),custom:!0},[$e]),Me=_e.trim(),ke=Me.toLocaleLowerCase(),Re=""===Me||Ie.some(e=>e.label.toLocaleLowerCase()===ke||String(e.value).toLocaleLowerCase()===ke)||Ve.some(e=>String(e).toLocaleLowerCase()===ke),Te=!H||ie||ne||Re?null:Me,qe=l.useMemo(()=>null===Te?Ie:[...Ie,{value:Te,label:Te,custom:!0}],[Ie,Te]),Ee=Le?Ve.map(Ae):Ve.length>0?Ae(Ve[0]):null;const Fe=I[z][j],Pe=[$,f[j],S[j],w[j],Le?A[j]:b[j],`${Fe} pe-1.5`,ne?x[N]:ie?v[N]:y[N],fe?.shell].filter(Boolean).join(" "),Be=["min-w-0 flex-1 self-stretch bg-transparent [font:inherit] text-inherit","[outline:none]","placeholder:text-(--neba-muted-fg)","caret-(--n-accent) selection:bg-(--n-soft-press)","disabled:cursor-not-allowed",fe?.control].filter(Boolean).join(" "),De=a=>e(t.Input,{ref:pe,placeholder:X,className:Le?`${Be} min-w-16 ${a?"ms-1.5":""}`:Be});return a(n.Root,{disabled:ne,invalid:Ce,className:g("flex-col align-top",O[j],te?"flex w-full":"inline-flex",be??""),style:{..._(je,q),...ge},...xe,children:[Y?e(n.Label,{className:g(L[j],"font-medium",ne?"text-(--neba-disabled-fg)":"text-(--neba-fg)",fe?.label),children:Y}):null,a(t.Root,{id:he,name:se,items:qe,multiple:Le,value:Ee,onValueChange:e=>{!function(e){void 0===P&&Oe(e),D?.(Le?e:e[0]??null)}((null===e?[]:Array.isArray(e)?e:[e]).map(e=>e.value))},onInputValueChange:e=>{ze(e),G?.(e)},open:oe,defaultOpen:ce,onOpenChange:e=>de?.(e),autoHighlight:!0,itemToStringLabel:e=>e.label,itemToStringValue:e=>String(e.value),isItemEqualToValue:(e,a)=>e.value===a.value,limit:U,disabled:ne,readOnly:ie,required:re,children:[a(t.InputGroup,{className:Pe,children:[le?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:le}):null,Le?e(t.Chips,{className:"flex min-w-0 flex-1 flex-wrap items-center gap-1",children:e(t.Value,{children:n=>a(l.Fragment,{children:[n.map(a=>e(t.Chip,{render:e(i,{variant:"outline",size:j,color:je,density:"compact",disabled:ne,className:fe?.chip,endIcon:ie||ne?null:e(t.ChipRemove,{"aria-label":Ne(a.label),className:h,children:e(u,{})})}),children:a.label},String(a.value))),De(n.length>0)]})})}):De(!1),J&&!ie?e(t.Clear,{"aria-label":me??ye.clear,className:R,children:e(u,{})}):null,e(t.Trigger,{"aria-label":"string"==typeof Y?void 0:"Open",className:R,children:e(t.Icon,{className:["flex items-center","[transition:rotate_var(--neba-duration)_var(--neba-ease)]","data-[popup-open]:rotate-180"].join(" "),children:e(m,{})})})]}),e(t.Portal,{children:e(t.Positioner,{className:"neba-portal z-50 [outline:none]",sideOffset:6,children:a(t.Popup,{className:g(M,S[j],f[j],fe?.popup),style:_(je,3),children:[e(t.Empty,{className:"px-2 py-1.5 text-(--neba-muted-fg) empty:hidden",children:Q??ve.empty}),e(t.List,{children:n=>e(t.Item,{value:n,disabled:n.disabled,className:g(k,fe?.item),children:n.custom?a(l.Fragment,{children:[e("span",{className:"absolute start-1.5 flex size-4 items-center justify-center text-(--n-accent) [&_svg]:size-4",children:e(p,{})}),e("span",{className:"truncate",children:W?W(n.label):`Add “${n.label}”`})]}):a(l.Fragment,{children:[e(t.ItemIndicator,{className:"absolute start-1.5 flex size-4 items-center justify-center",children:e(d,{})}),e("span",{className:"truncate",children:n.label})]})},`${n.custom?"custom:":""}${String(n.value)}`)})]})})})]}),Z?e(n.Description,{className:g(L[j],"text-(--neba-muted-fg)",fe?.description),children:Z}):null,e(n.Error,we?{match:!0,className:g(L[j],"text-(--n-accent)",fe?.error),children:ee}:{className:g(L[j],"text-(--n-accent)",fe?.error)})]})}
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import type { NebaSlots, NebaStyleProps } from '../../types.js';
|
|
3
|
+
/**
|
|
4
|
+
* The parts a CommandPalette draws around its sheet.
|
|
5
|
+
*
|
|
6
|
+
* `className` is the sheet — the panel the search field and the rows sit on.
|
|
7
|
+
* `backdrop` and `viewport` render outside it and have no other way in.
|
|
8
|
+
*
|
|
9
|
+
* `group` is one heading between the rows, not the rows under it: a group is
|
|
10
|
+
* named by its first item's `group`, and the rows themselves are `item`.
|
|
11
|
+
*/
|
|
12
|
+
export type CommandPaletteSlot = 'backdrop' | 'viewport' | 'input' | 'list' | 'group' | 'item' | 'empty';
|
|
13
|
+
/** One thing the palette can do. */
|
|
14
|
+
export interface CommandItem {
|
|
15
|
+
/** What identifies the command. */
|
|
16
|
+
value: string;
|
|
17
|
+
/** What the row says, and what the query is matched against. */
|
|
18
|
+
label: string;
|
|
19
|
+
/** A second line under it — where the command goes, or what it changes. */
|
|
20
|
+
description?: React.ReactNode;
|
|
21
|
+
/** A glyph before the label. */
|
|
22
|
+
icon?: React.ReactNode;
|
|
23
|
+
/**
|
|
24
|
+
* The keystroke that does the same thing, set at the end of the row. Written
|
|
25
|
+
* the way [Shortcut](../display/shortcut) writes them, so `Mod` resolves per
|
|
26
|
+
* platform. The palette does not bind it — the application does.
|
|
27
|
+
*/
|
|
28
|
+
shortcut?: string;
|
|
29
|
+
/**
|
|
30
|
+
* The heading this command sits under. Commands are drawn in the order they
|
|
31
|
+
* are given, and a heading is drawn each time the group changes — so a group's
|
|
32
|
+
* commands have to be listed together.
|
|
33
|
+
*/
|
|
34
|
+
group?: string;
|
|
35
|
+
/**
|
|
36
|
+
* Extra words the query is matched against but that are never drawn — the
|
|
37
|
+
* name somebody else's product gives the same command, an abbreviation, the
|
|
38
|
+
* word they would have searched for.
|
|
39
|
+
*/
|
|
40
|
+
keywords?: readonly string[];
|
|
41
|
+
/** In the list but not runnable. */
|
|
42
|
+
disabled?: boolean;
|
|
43
|
+
/** What running it does. */
|
|
44
|
+
onSelect?: () => void;
|
|
45
|
+
}
|
|
46
|
+
export interface CommandPaletteProps extends Pick<NebaStyleProps, 'size' | 'color' | 'density'> {
|
|
47
|
+
/** Everything the palette can do. */
|
|
48
|
+
items: readonly CommandItem[];
|
|
49
|
+
/** Whether the palette is open. Use with `onOpenChange` for a controlled one. */
|
|
50
|
+
open?: boolean;
|
|
51
|
+
/** Whether it starts open, for an uncontrolled one. @default false */
|
|
52
|
+
defaultOpen?: boolean;
|
|
53
|
+
onOpenChange?: (open: boolean) => void;
|
|
54
|
+
/**
|
|
55
|
+
* Called when a command is run, after its own `onSelect`. The palette closes
|
|
56
|
+
* either way.
|
|
57
|
+
*/
|
|
58
|
+
onSelect?: (item: CommandItem) => void;
|
|
59
|
+
/**
|
|
60
|
+
* The keystroke that opens the palette, bound on the window. Written the way
|
|
61
|
+
* [Shortcut](../display/shortcut) writes them, so `Mod` is Command on a Mac
|
|
62
|
+
* and Control everywhere else. `false` binds nothing.
|
|
63
|
+
* @default 'Mod+K'
|
|
64
|
+
*/
|
|
65
|
+
shortcut?: string | false;
|
|
66
|
+
/** How wide the sheet may get. A number of pixels or any CSS length. */
|
|
67
|
+
width?: number | string;
|
|
68
|
+
/** How tall the list may get before it scrolls. @default 320 */
|
|
69
|
+
maxHeight?: number | string;
|
|
70
|
+
/**
|
|
71
|
+
* Which language the placeholder, the empty line and the dialog's own name
|
|
72
|
+
* are written in — a BCP 47 tag such as `ko`, `pt-BR` or `zh-Hant`.
|
|
73
|
+
* Unsupported tags fall back to English.
|
|
74
|
+
*/
|
|
75
|
+
locale?: string;
|
|
76
|
+
/** The placeholder in the field. Defaults to the `locale`'s wording. */
|
|
77
|
+
placeholder?: string;
|
|
78
|
+
/** The line where the rows would be, when nothing matched. */
|
|
79
|
+
emptyMessage?: React.ReactNode;
|
|
80
|
+
/** The accessible name of the dialog, which has no visible title. */
|
|
81
|
+
label?: string;
|
|
82
|
+
/** Class names for the sheet. */
|
|
83
|
+
className?: string;
|
|
84
|
+
/**
|
|
85
|
+
* Class names for the parts around it. `className` is the sheet, so the scrim
|
|
86
|
+
* behind it is `classNames.backdrop`.
|
|
87
|
+
*/
|
|
88
|
+
classNames?: NebaSlots<CommandPaletteSlot>;
|
|
89
|
+
}
|
|
90
|
+
/**
|
|
91
|
+
* Everything an application can do, behind one field.
|
|
92
|
+
*
|
|
93
|
+
* The shape a keyboard-first product takes once it has more actions than a menu
|
|
94
|
+
* bar can hold: a reader types what they want instead of remembering where it
|
|
95
|
+
* was put. It is not a [Menu](./menu) — a menu is a short list in one place, and
|
|
96
|
+
* every row is visible before you look for it. It is not a
|
|
97
|
+
* [Combobox](./combobox) either: what comes back is not a value, it is
|
|
98
|
+
* something happening.
|
|
99
|
+
*
|
|
100
|
+
* Base UI's Autocomplete owns the list — the highlight the pointer and the arrow
|
|
101
|
+
* keys share, `aria-activedescendant`, Enter running the highlighted row — and
|
|
102
|
+
* its Dialog owns the sheet, the scrim, the focus trap and returning the focus
|
|
103
|
+
* to wherever the reader was.
|
|
104
|
+
*/
|
|
105
|
+
export declare function CommandPalette({ items, open, defaultOpen, onOpenChange, onSelect, shortcut, width, maxHeight, locale, placeholder, emptyMessage, label, size, color, density, className, classNames }: CommandPaletteProps): React.JSX.Element;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{Autocomplete as n}from"@base-ui/react/autocomplete";import{Dialog as l}from"@base-ui/react/dialog";import{Shortcut as r}from"../shortcut/Shortcut.js";import{commandMessages as s,useMessages as o}from"../../internal/i18n.js";import{searchHaystack as i,searchText as c}from"../../internal/search.js";import{controlTextLeadingClasses as d,cx as m,hasContent as p,metaTextClasses as u,radiusClasses as h,surfaceClasses as x,surfaceSlots as f,toLength as b}from"../../internal/styles.js";const g=["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(" "),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(" "),v={xs:"max-w-sm",sm:"max-w-md",md:"max-w-xl",lg:"max-w-2xl",xl:"max-w-3xl"},w={xs:"h-9",sm:"h-10",md:"h-12",lg:"h-14",xl:"h-16"},N={xs:"py-1",sm:"py-1.5",md:"py-2",lg:"py-2.5",xl:"py-3"},k={xs:"px-2.5",sm:"px-3",md:"px-3.5",lg:"px-4",xl:"px-5"},j=["flex cursor-pointer items-center gap-3 select-none","[transition:background-color_var(--neba-duration)_var(--neba-ease)]","data-[highlighted]:bg-(--n-soft) data-[highlighted]:text-(--n-accent)","data-[disabled]:cursor-not-allowed data-[disabled]:text-(--neba-disabled-fg)"].join(" ");function C(e){return i([e.label,e.group,...e.keywords??[]])}export function CommandPalette({items:i,open:x,defaultOpen:K=!1,onOpenChange:S,onSelect:_,shortcut:z="Mod+K",width:L,maxHeight:E=320,locale:M,placeholder:O,emptyMessage:P,label:V,size:D="md",color:F="primary",density:H="default",className:I,classNames:R}){const $=o(s,M),[A,B]=a.useState(K),[T,W]=a.useState(""),q=x??A,G=a.useCallback(e=>{void 0===x&&B(e),S?.(e)},[x,S]);a.useEffect(()=>{if(!1===z)return;const e=e=>{(function(e,t){const a=t.toLowerCase().split("+"),n=a[a.length-1],l=new Set(a.slice(0,-1)),r=/mac|iphone|ipad/i.test("undefined"==typeof navigator?"":navigator.platform||navigator.userAgent)?e.metaKey:e.ctrlKey;return!(l.has("mod")!==r||l.has("shift")!==e.shiftKey||l.has("alt")!==e.altKey||!l.has("mod")&&l.has("ctrl")!==e.ctrlKey||!l.has("mod")&&l.has("meta")!==e.metaKey||e.key.toLowerCase()!==n)})(e,z)&&(e.preventDefault(),G(!0))};return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)},[z,G]);const J=a.useMemo(()=>i.map(C),[i]),Q=a.useMemo(()=>{const e=c(T);return""===e?i:i.filter((t,a)=>J[a].includes(e))},[i,J,T]),U=b(L),X=b(E);return e(l.Root,{open:q,onOpenChange:e=>{e||W(""),G(e)},children:t(l.Portal,{children:[e(l.Backdrop,{className:m("neba-portal",g,R?.backdrop)}),e(l.Viewport,{className:m("neba-portal fixed inset-0 z-50 flex justify-center p-4 pt-[12vh]",R?.viewport),children:e(l.Popup,{"aria-label":V??$.label,className:m(y,h[D],d[D],void 0===U?v[D]:"","self-start",I),style:{...f(F,3),...void 0===U?null:{maxWidth:U}},children:t(n.Root,{open:!0,mode:"list",items:Q,filter:null,value:T,onValueChange:e=>W(e),itemToStringValue:e=>e.label,children:[e("div",{className:`flex shrink-0 items-center border-b [border-color:var(--n-line)] ${k[D]}`,children:e(n.Input,{autoFocus:!0,placeholder:O??$.search,className:m("min-w-0 flex-1 bg-transparent [font:inherit] text-inherit [outline:none]","placeholder:text-(--neba-muted-fg) caret-(--n-accent)",w[D],R?.input)})}),e(n.List,{className:m("min-h-0 flex-1 overflow-y-auto overscroll-contain p-1",R?.list),style:{maxHeight:X},children:(l,s)=>t(a.Fragment,{children:[l.group&&l.group!==Q[s-1]?.group?e("div",{role:"presentation",className:m(k[D],"pt-2 pb-1 font-medium text-(--neba-muted-fg)",u[D],R?.group),children:l.group}):null,t(n.Item,{index:s,value:l,disabled:l.disabled,onClick:()=>(e=>{e.disabled||(e.onSelect?.(),_?.(e),G(!1))})(l),className:m(j,h[D],k[D],N["compact"===H?"xs":D],R?.item),children:[p(l.icon)?e("span",{className:"flex h-[1lh] shrink-0 items-center [&_svg]:size-[1.15em]",children:l.icon}):null,t("span",{className:"flex min-w-0 flex-1 flex-col",children:[e("span",{className:"truncate",children:l.label}),p(l.description)?e("span",{className:`truncate text-(--neba-muted-fg) ${u[D]}`,children:l.description}):null]}),l.shortcut?e(r,{size:"xs",keys:l.shortcut,className:"shrink-0"}):null]})]},l.value)}),e(n.Empty,{className:m(k[D],"py-6 text-center text-(--neba-muted-fg)",u[D],R?.empty),children:P??$.empty})]})})})]})})}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export{CommandPalette}from"./CommandPalette.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{boxPaddingXClasses as m}from"../box/Box.js";const o={xs:"max-w-[30rem]",sm:"max-w-[40rem]",md:"max-w-[48rem]",lg:"max-w-[64rem]",xl:"max-w-[80rem]"};export const Container=/*@__PURE__*/e.forwardRef(function({maxWidth:e="none",padded:
|
|
1
|
+
"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{boxPaddingXClasses as m}from"../box/Box.js";import{cx as n}from"../../internal/styles.js";const o={xs:"max-w-[30rem]",sm:"max-w-[40rem]",md:"max-w-[48rem]",lg:"max-w-[64rem]",xl:"max-w-[80rem]"};export const Container=/*@__PURE__*/e.forwardRef(function({maxWidth:e="none",padded:t=!0,size:a="md",density:s="default",centered:d=!0,render:i,className:c,children:l,...x},f){const p=n("block w-full","none"===e?"":o[e],d?"mx-auto":"",t?m[s][a]:"",c??"");return r({render:i,ref:f,props:{className:p,children:l,...x}})});
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import type { NebaDensity, NebaOrientation, NebaSize } from '../../types.js';
|
|
3
|
+
export interface DataListProps extends Omit<React.ComponentPropsWithoutRef<'dl'>, 'color'> {
|
|
4
|
+
/**
|
|
5
|
+
* Where the label sits.
|
|
6
|
+
*
|
|
7
|
+
* - `horizontal` — beside the value, in a column of its own. The default, and
|
|
8
|
+
* the shape a details panel takes.
|
|
9
|
+
* - `vertical` — above it. For a narrow column, and for values long enough
|
|
10
|
+
* that a label beside them would leave most of the row empty.
|
|
11
|
+
* @default 'horizontal'
|
|
12
|
+
*/
|
|
13
|
+
orientation?: NebaOrientation;
|
|
14
|
+
/**
|
|
15
|
+
* How wide the label column is when `horizontal`. A number of pixels or any
|
|
16
|
+
* CSS length. Left out, it is as wide as the widest label — which is what
|
|
17
|
+
* keeps every value in the list starting at the same place.
|
|
18
|
+
*/
|
|
19
|
+
labelWidth?: number | string;
|
|
20
|
+
/** Draws a hairline between the rows. @default false */
|
|
21
|
+
dividers?: boolean;
|
|
22
|
+
/** @default 'md' */
|
|
23
|
+
size?: NebaSize;
|
|
24
|
+
/** Changes the gaps between rows and columns, and nothing else. @default 'default' */
|
|
25
|
+
density?: NebaDensity;
|
|
26
|
+
/** The rows. */
|
|
27
|
+
children?: React.ReactNode;
|
|
28
|
+
}
|
|
29
|
+
export interface DataListItemProps {
|
|
30
|
+
/** What the value is called. */
|
|
31
|
+
label: React.ReactNode;
|
|
32
|
+
/** The value. A node, so a Chip, a link or a piece of code all fit. */
|
|
33
|
+
children?: React.ReactNode;
|
|
34
|
+
}
|
|
35
|
+
/**
|
|
36
|
+
* One pair: what it is called, and what it is.
|
|
37
|
+
*
|
|
38
|
+
* A fragment rather than an element, so the `<dt>` and the `<dd>` land as direct
|
|
39
|
+
* children of the `<dl>` and the grid can line every label up against every
|
|
40
|
+
* other. It has no `size` or `density` of its own — those belong to the list.
|
|
41
|
+
*/
|
|
42
|
+
export declare function DataListItem({ label, children }: DataListItemProps): React.JSX.Element;
|
|
43
|
+
/**
|
|
44
|
+
* A list of things and what they are called — a details panel, a summary of a
|
|
45
|
+
* record, the metadata under a heading.
|
|
46
|
+
*
|
|
47
|
+
* It is a real `<dl>` with real `<dt>`/`<dd>` pairs, which is the whole reason
|
|
48
|
+
* it is a component rather than a two-column [Table](./table): a table is a grid
|
|
49
|
+
* of *rows*, all of the same shape, and a screen reader reads it by walking a
|
|
50
|
+
* grid. This is a set of *pairs*, and each one is read as "label, value" — which
|
|
51
|
+
* is what a details panel actually is.
|
|
52
|
+
*
|
|
53
|
+
* It draws no surface. Put it in a [Card](../surfaces/card) when one is wanted.
|
|
54
|
+
*/
|
|
55
|
+
export declare const DataList: React.ForwardRefExoticComponent<DataListProps & React.RefAttributes<HTMLDListElement>>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use client";import{jsx as t,Fragment as e,jsxs as n}from"react/jsx-runtime";import*as d from"react";import{controlTextLeadingClasses as a,hasContent as o,metaTextClasses as p,toLength as r}from"../../internal/styles.js";const l=/*@__PURE__*/d.createContext({size:"md",density:"default",orientation:"horizontal"}),s={default:{xs:"gap-x-3",sm:"gap-x-4",md:"gap-x-5",lg:"gap-x-6",xl:"gap-x-8"},compact:{xs:"gap-x-2",sm:"gap-x-2.5",md:"gap-x-3",lg:"gap-x-4",xl:"gap-x-5"}},i={default:{xs:"gap-y-2",sm:"gap-y-2.5",md:"gap-y-3",lg:"gap-y-3.5",xl:"gap-y-4"},compact:{xs:"gap-y-1",sm:"gap-y-1.5",md:"gap-y-2",lg:"gap-y-2",xl:"gap-y-2.5"}},m=["[&>dt:nth-of-type(n+2)]:border-t [&>dd:nth-of-type(n+2)]:border-t","[&>dt]:[border-color:var(--neba-border)] [&>dd]:[border-color:var(--neba-border)]"].join(" "),f={default:{xs:"[&>dt:nth-of-type(n+2)]:pt-2 [&>dd:nth-of-type(n+2)]:pt-2",sm:"[&>dt:nth-of-type(n+2)]:pt-2.5 [&>dd:nth-of-type(n+2)]:pt-2.5",md:"[&>dt:nth-of-type(n+2)]:pt-3 [&>dd:nth-of-type(n+2)]:pt-3",lg:"[&>dt:nth-of-type(n+2)]:pt-3.5 [&>dd:nth-of-type(n+2)]:pt-3.5",xl:"[&>dt:nth-of-type(n+2)]:pt-4 [&>dd:nth-of-type(n+2)]:pt-4"},compact:{xs:"[&>dt:nth-of-type(n+2)]:pt-1 [&>dd:nth-of-type(n+2)]:pt-1",sm:"[&>dt:nth-of-type(n+2)]:pt-1.5 [&>dd:nth-of-type(n+2)]:pt-1.5",md:"[&>dt:nth-of-type(n+2)]:pt-2 [&>dd:nth-of-type(n+2)]:pt-2",lg:"[&>dt:nth-of-type(n+2)]:pt-2 [&>dd:nth-of-type(n+2)]:pt-2",xl:"[&>dt:nth-of-type(n+2)]:pt-2.5 [&>dd:nth-of-type(n+2)]:pt-2.5"}};export function DataListItem({label:r,children:s}){const{size:i,orientation:m}=d.useContext(l);return n(e,{children:[t("dt",{className:["min-w-0 text-(--neba-muted-fg)",p[i],"vertical"===m?"mb-0.5":"py-px"].join(" "),children:r}),t("dd",{className:`m-0 min-w-0 text-(--neba-fg) ${a[i]}`,children:o(s)?s:null})]})}export const DataList=/*@__PURE__*/d.forwardRef(function({orientation:e="horizontal",labelWidth:n,dividers:a=!1,size:o="md",density:p="default",className:y,style:x,children:c,...h},g){const u=d.useMemo(()=>({size:o,density:p,orientation:e}),[o,p,e]),b=r(n);return t(l.Provider,{value:u,children:t("dl",{ref:g,className:["m-0 min-w-0","vertical"===e?"flex flex-col":"grid [grid-template-columns:var(--n-label)_minmax(0,1fr)] items-baseline",s[p][o],i[p][o],a?`${m} ${f[p][o]}`:"",y??""].filter(Boolean).join(" "),style:{"--n-label":b??"max-content",...x},...h,children:c})})});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export{DataList,DataListItem}from"./DataList.js";
|
|
@@ -1 +1 @@
|
|
|
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{Checkbox as o}from"../checkbox/Checkbox.js";import{Pagination as l}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 v,searchText as y,sortRows as b,virtualWindow as k}from"../../internal/data-table.js";import{emptyMessages as w,fillMessage as x,tableMessages as C,useMessages as S}from"../../internal/i18n.js";import{ChevronIcon as M}from"../../internal/icons.js";import{controlTextLeadingClasses as N,cx as K,hasContent as z,metaTextClasses as $,paddingXValues as j,srOnlyClasses as E}from"../../internal/styles.js";const _=["[--n-row:transparent]","[transition:background-color_var(--neba-duration)_var(--neba-ease)]"].join(" "),R={"--n-stripe":"color-mix(in oklab, var(--neba-fg) 4%, transparent)"},D=["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(" "),L=["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)]"].join(" ");function P(){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"})]})}function A(e){return"number"==typeof e?`${e}px`:e}export function DataTable({headers:T,items:H,getRowKey:B,variant:I="outline",size:W="sm",color:F="primary",density:O="compact",elevation:q=0,height:U,maxHeight:X,rowHeight:Y,striped:V=!1,hoverable:G=!0,stickyHeader:J=!0,caption:Q,label:Z,empty:ee,virtual:te=!0,overscan:ne=8,sortable:re=!1,sortMode:ae="single",sort:oe,defaultSort:le,onSortChange:se,resizable:ie=!1,columnWidths:ce,defaultColumnWidths:ue,onColumnWidthsChange:de,selectionMode:pe="none",selected:me,defaultSelected:he,onSelectedChange:fe,checkboxes:ge=!1,onRowClick:ve,onRowActivate:ye,paging:be="scroll",page:ke,defaultPage:we=1,onPageChange:xe,pageSize:Ce,defaultPageSize:Se=25,onPageSizeChange:Me,pageSizeOptions:Ne=[10,25,50,100],footer:Ke,search:ze,defaultSearch:$e,onSearchChange:je,searchable:Ee=!1,searchPlaceholder:_e,filter:Re,toolbar:De,manual:Le=!1,rowCount:Pe,locale:Ae,className:Te,style:He,...Be}){const Ie=S(C,Ae),We=S(w,Ae),Fe=r.useId(),Oe=Y??d[O][W],qe=u[O][W],Ue=j[O][W],Xe=r.useMemo(()=>new Set(!0===Le?["sort","filter","pages"]:Le||[]),[Le]),Ye=r.useMemo(()=>T.filter(e=>!e.hidden),[T]),Ve=Ye.some(e=>void 0!==e.group),Ge="none"!==pe,Je="multiple"===pe,Qe=Ge&&ge,Ze=r.useMemo(()=>H.map((e,t)=>{const n=B?B(e,t):t;return{row:e,identity:n,key:String(n),origin:t}}),[H,B]),[et,tt]=r.useState($e??""),nt=(ze??et).trim(),rt=r.useMemo(()=>{if(Xe.has("filter"))return Ze;const e=y(nt),t=Ye.filter(e=>!1!==e.searchable);let n=Ze;return""!==e&&t.length>0&&(n=n.filter(n=>t.some(t=>{const r=t.value?t.value(n.row):n.row[t.key];return y(r).includes(e)}))),Re?n.filter(e=>Re(e.row,e.origin)):n},[Ze,Ye,nt,Re,Xe]),at=r.useMemo(()=>new Intl.Collator(Ae,{numeric:!0,sensitivity:"base"}),[Ae]),[ot,lt]=r.useState(le??[]),st=oe??ot,it=r.useMemo(()=>Xe.has("sort")?rt:b(rt,st,e=>{const t=Ye.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)=>c(n(e.row),n(t.row),at)}),[rt,st,Ye,at,Xe]),[ct,ut]=r.useState(we),[dt,pt]=r.useState(Se),mt=Ce??dt,ht=Xe.has("pages")?Pe??it.length:it.length,ft=v(ht,ke??ct,mt),gt=r.useMemo(()=>"pages"!==be||Xe.has("pages")?it:it.slice(ft.start,ft.end),[it,be,Xe,ft.start,ft.end]),vt="pages"===be?ft.start:0,yt=r.useMemo(()=>gt.map(e=>e.key),[gt]),bt=r.useMemo(()=>new Map(Ze.map(e=>[e.key,e])),[Ze]),[kt,wt]=r.useState(he??[]),xt=me??kt,Ct=r.useMemo(()=>new Set(xt.map(String)),[xt]),[St,Mt]=r.useState(null),Nt=r.useRef(null),Kt=r.useRef({paged:gt,pagedKeys:yt,byKey:bt,selectedKeys:Ct,multiple:Je});Kt.current={paged:gt,pagedKeys:yt,byKey:bt,selectedKeys:Ct,multiple:Je};const zt=r.useCallback(e=>{const t=[],n=[];for(const r of e){const e=Kt.current.byKey.get(r);e&&(t.push(e.identity),n.push(e.row))}void 0===me&&wt(t),fe?.(t,n)},[me,fe]),$t=r.useCallback(e=>{Nt.current=e,zt([e])},[zt]),jt=r.useCallback(e=>{const t=Kt.current.selectedKeys,n=new Set(t);n.has(e)?n.delete(e):n.add(e),Nt.current=e,zt([...n])},[zt]),Et=r.useCallback((e,t)=>{const n=Kt.current.pagedKeys,r=Nt.current??n[0];if(void 0===r)return;const a=h(n,r,e);0!==a.length&&zt(t?[...new Set([...Kt.current.selectedKeys,...a])]:a)},[zt]),_t=r.useRef(null),Rt=r.useRef(null),Dt=r.useRef(null),[Lt,Pt]=r.useState(0),[At,Tt]=r.useState(0),Ht=void 0!==U||void 0!==X,Bt=te&&Ht&>.length>0;r.useLayoutEffect(()=>{const e=_t.current;if(!e||!Bt)return;const t=new ResizeObserver(([e])=>{Pt(e.contentRect.height)});return t.observe(e),Pt(e.clientHeight),()=>t.disconnect()},[Bt]);const It=r.useCallback(e=>{if(!Bt)return;const t=Math.floor(e.currentTarget.scrollTop/Oe)*Oe;Tt(e=>e===t?e:t)},[Bt,Oe]),Wt=Bt?k(At,Lt,Oe,gt.length,ne):{start:0,end:gt.length,before:0,after:0},Ft=gt.slice(Wt.start,Wt.end),Ot=Ge&&null!==St&&Ft.some(e=>e.key===St),[qt,Ut]=r.useState(ue??{}),Xt=ce??qt,Yt=r.useCallback(e=>{void 0===ce&&Ut(e),de?.(e)},[ce,de]),Vt=r.useRef(new Map),Gt=r.useCallback(e=>{const t=_t.current;if(!t||!Ht)return;const n=J?qe*(Ve?2:1):0,r=e*Oe;r<t.scrollTop+n?t.scrollTop=Math.max(0,r-n):r+Oe>t.scrollTop+t.clientHeight&&(t.scrollTop=r+Oe-t.clientHeight)},[Ht,J,qe,Ve,Oe]),Jt=(e,t)=>{const n=Kt.current.paged,r=Math.min(Math.max(e,0),n.length-1),a=n[r];a&&(t.preventDefault(),Mt(a.key),Gt(r),t.shiftKey&&Kt.current.multiple?Et(a.key,!1):t.ctrlKey||t.metaKey||$t(a.key))};const Qt=r.useCallback(e=>{const t=Rt.current,n=Kt.current.paged;if(!t||0===n.length)return null;const r=t.getBoundingClientRect().top,a=Math.floor((e-r)/Oe);return Math.min(Math.max(a,0),n.length-1)},[Oe]),Zt=r.useRef(null),en=r.useCallback(e=>{const t=Qt(e),n=null===t?void 0:Kt.current.paged[t];n&&(Mt(n.key),Et(n.key,!1))},[Qt,Et]),tn=r.useRef(en);tn.current=en;function nn(e,t){if(Ge&&!t.target.closest('button, a, input, select, textarea, [role="button"]'))if(Dt.current?.focus({preventScroll:!0}),Mt(e.key),2!==t.button){if(0===t.button)return t.shiftKey&&Je?(t.preventDefault(),void Et(e.key,t.ctrlKey||t.metaKey)):void((t.ctrlKey||t.metaKey)&&Je?jt(e.key):($t(e.key),Je&&(e=>{if(Zt.current)return;const t=e=>{const t=Zt.current,r=_t.current;if(!t)return;if(t.y=e.clientY,tn.current(t.y),!r||!Ht)return;const a=r.getBoundingClientRect(),o=a.top+Oe-t.y,l=t.y-(a.bottom-Oe);t.speed=o>0?-Math.min(o,40):l>0?Math.min(l,40):0,0!==t.speed&&null===t.frame&&(t.frame=requestAnimationFrame(n))},n=()=>{const e=Zt.current,t=_t.current;e&&t&&0!==e.speed?(t.scrollTop+=e.speed,tn.current(e.y),e.frame=requestAnimationFrame(n)):e&&(e.frame=null)},r=()=>{const e=Zt.current;null!=e?.frame&&cancelAnimationFrame(e.frame),Zt.current=null,window.removeEventListener("pointermove",t),window.removeEventListener("pointerup",r),window.removeEventListener("pointercancel",r)};Zt.current={y:e,speed:0,frame:null,stop:r},window.addEventListener("pointermove",t),window.addEventListener("pointerup",r),window.addEventListener("pointercancel",r)})(t.clientY)))}else Kt.current.selectedKeys.has(e.key)||$t(e.key)}r.useEffect(()=>()=>Zt.current?.stop(),[]);const rn=r.useMemo(()=>yt.reduce((e,t)=>Ct.has(t)?e+1:e,0),[yt,Ct]),an=yt.length>0&&rn===yt.length,on=p[W],ln=e=>Xt[e.key]??e.width,sn=(Qe?on:0)+Ye.reduce((e,t)=>e+(ln(t)??f),0),cn=Ye.length>0&&Ye.every(e=>void 0!==ln(e)),un=Ye.length+(Qe?1:0)+(cn?1:0),dn=r.useMemo(()=>{const e=[];return Ye.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},[Ye]),pn={padding:`0 ${Ue}`,borderBottom:"1px solid var(--n-line)",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},mn={...pn,height:`${qe}px`,backgroundColor:"var(--n-panel-press)"},hn="odd"===V?0:1,fn=r.useMemo(()=>new Intl.NumberFormat(Ae),[Ae]),gn=Ke??"pages"===be,vn=x(Ie.range,{start:fn.format(0===ht?0:("pages"===be?ft.start:0)+1),end:fn.format("pages"===be?ft.end:ht),total:fn.format(ht)}),yn=e=>{void 0===ke&&ut(e),xe?.(e)},bn=(n,r,a)=>{const o=n.sortable??re,l=n.resizable??ie,s=(i=n.key,st.find(e=>e.key===i));var i;const c=s?st.findIndex(e=>e.key===n.key)+1:0,u=n.headerAlign??n.align??"start";return t("th",{ref:e=>{e?Vt.current.set(n.key,e):Vt.current.delete(n.key)},scope:"col",rowSpan:a,"aria-sort":s?"asc"===s.direction?"ascending":"descending":void 0,className:K("relative font-semibold select-none",s?"text-(--n-accent)":"text-(--neba-muted-fg)",J?"sticky z-20 [backdrop-filter:var(--neba-blur)]":""),style:{...mn,top:J?2!==a&&Ve?qe:0:void 0,textAlign:u},children:[o?t("button",{type:"button",className:K(D,"end"===u?"justify-end":"center"===u?"justify-center":"justify-start"),onClick:e=>((e,t)=>{const n=g(st,e,t&&"multiple"===ae);void 0===oe&<(n),se?.(n)})(n.key,e.shiftKey),children:[e("span",{className:"min-w-0 truncate",children:n.label??n.key}),e("span",{"aria-hidden":"true",className:K("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(M,{})}),c>1?e("span",{"aria-hidden":"true",className:"text-[0.85em] tabular-nums",children:c}):null]}):e("span",{className:"block truncate",children:n.label??n.key}),l&&r<Ye.length-1?e("span",{"aria-hidden":"true",className:L,onPointerDown:e=>((e,t)=>{t.preventDefault(),t.stopPropagation();const n=t.currentTarget,r={...Xt};for(const e of Ye){const t=Vt.current.get(e.key);t&&void 0===r[e.key]&&(r[e.key]=Math.round(t.getBoundingClientRect().width))}const a="rtl"===getComputedStyle(n).direction,o=t.clientX,l=r[e]??m,s=Ye.find(t=>t.key===e)?.minWidth??f;n.setPointerCapture(t.pointerId);const i=t=>{const n=(t.clientX-o)*(a?-1:1);Yt({...r,[e]:Math.max(s,Math.round(l+n))})},c=()=>{n.removeEventListener("pointermove",i),n.removeEventListener("pointerup",c),n.removeEventListener("pointercancel",c)};n.addEventListener("pointermove",i),n.addEventListener("pointerup",c),n.addEventListener("pointercancel",c)})(n.key,e),onDoubleClick:()=>(e=>{const t={...Xt};delete t[e],Yt(t)})(n.key)}):null]},n.key)},kn=t=>e("span",{className:"flex items-center justify-center",children:t}),wn=t=>e("td",{role:Ge?"gridcell":void 0,style:{...pn,padding:0,overflow:"visible"},children:kn(e(o,{size:W,color:F,checked:Ct.has(t.key),"aria-label":Ie.selectRow,onCheckedChange:()=>{Je?jt(t.key):$t(t.key)}}))}),xn=Je?kn(e(o,{size:W,color:F,checked:an,indeterminate:rn>0&&!an,"aria-label":Ie.selectAll,onCheckedChange:()=>{if(an){const e=new Set(yt);zt([...Ct].filter(t=>!e.has(t)))}else zt([...new Set([...Ct,...yt])])}})):null,Cn=cn?e("th",{"aria-hidden":"true",className:K(J?"sticky top-0 z-20 [backdrop-filter:var(--neba-blur)]":""),style:{...mn,padding:0}}):null,Sn=(t,n)=>n>0?e("tr",{"aria-hidden":"true",style:{height:`${n}px`},children:e("td",{colSpan:un,style:{padding:0,border:0}})},t):null;return t(a,{variant:I,size:W,color:F,density:O,elevation:q,padded:!1,className:K("flex flex-col overflow-hidden",Ge?"has-[:focus-visible]:[outline:2px_solid_var(--n-ring)] has-[:focus-visible]:outline-offset-2":"",Te),style:{...R,...He},...Be,children:[Ee||z(De)?t("div",{className:"flex items-center gap-2",style:{padding:`${Ue} ${Ue}`,borderBottom:"1px solid var(--n-line)"},children:[Ee?e(i,{size:W,color:F,density:O,variant:"outline",type:"search",className:"w-full max-w-64",startIcon:e(P,{}),placeholder:_e??Ie.search,"aria-label":_e??Ie.search,value:ze??et,onChange:e=>{const t=e.target.value;void 0===ze&&tt(t),yn(1),je?.(t)}}):null,z(De)?e("div",{className:"ms-auto flex items-center gap-2",children:De}):null]}):null,e("div",{ref:_t,className:"min-h-0 flex-auto overflow-auto overscroll-contain",style:{height:A(U),maxHeight:A(X)},onScroll:It,children:t("table",{ref:Dt,role:Ge?"grid":void 0,"aria-label":Z,"aria-multiselectable":Je||void 0,"aria-rowcount":Bt?gt.length+1:void 0,"aria-activedescendant":Ot?`${Fe}-${St}`:void 0,tabIndex:Ge?0:void 0,className:K("w-full text-start [outline:none]",N[W],"text-(--neba-fg)",Ge?"select-none":""),style:{tableLayout:"fixed",borderCollapse:"separate",borderSpacing:0,minWidth:`${sn}px`},onKeyDown:function(e){if(!Ge||e.target!==e.currentTarget)return;const t=Kt.current.paged;if(0===t.length)return;const n=null===St?-1:Kt.current.pagedKeys.indexOf(St),r=Math.max(1,Math.floor((Lt||10*Oe)/Oe)-1);switch(e.key){case"ArrowDown":Jt(n+1,e);break;case"ArrowUp":Jt(-1===n?0:n-1,e);break;case"Home":Jt(0,e);break;case"End":Jt(t.length-1,e);break;case"PageDown":Jt(-1===n?0:n+r,e);break;case"PageUp":Jt(-1===n?0:n-r,e);break;case" ":-1!==n&&(e.preventDefault(),(e.ctrlKey||e.metaKey)&&Je?jt(t[n].key):$t(t[n].key));break;case"a":case"A":(e.ctrlKey||e.metaKey)&&Je&&(e.preventDefault(),zt(Kt.current.pagedKeys));break;case"Escape":e.preventDefault(),zt([]);break;case"Enter":-1!==n&&ye&&(e.preventDefault(),ye(t[n].row,vt+n))}},children:[Q?e("caption",{className:K($[W],"text-(--neba-muted-fg)"),style:{padding:`0.5rem ${Ue}`,textAlign:"start"},children:Q}):null,t("colgroup",{children:[Qe?e("col",{style:{width:`${on}px`}}):null,Ye.map(t=>{const n=ln(t);return e("col",{style:void 0===n?void 0:{width:`${n}px`}},t.key)}),cn?e("col",{}):null]}),t("thead",{children:[Ve?t("tr",{style:{height:`${qe}px`},children:[Qe?e("th",{scope:"col",rowSpan:2,className:K(J?"sticky top-0 z-20 [backdrop-filter:var(--neba-blur)]":""),style:{...mn,padding:0,overflow:"visible"},children:xn}):null,dn.map(t=>void 0===t.label?bn(Ye[t.from],t.from,2):e("th",{scope:"colgroup",colSpan:t.span,className:K("font-semibold text-(--neba-muted-fg) select-none",J?"sticky top-0 z-20 [backdrop-filter:var(--neba-blur)]":""),style:{...mn,textAlign:"center"},children:t.label},`group-${t.from}`)),cn?r.cloneElement(Cn,{rowSpan:2}):null]}):null,t("tr",{style:{height:`${qe}px`},children:[Qe&&!Ve?e("th",{scope:"col",className:K(J?"sticky top-0 z-20 [backdrop-filter:var(--neba-blur)]":""),style:{...mn,padding:0,overflow:"visible"},children:xn}):null,Ye.map((e,t)=>Ve&&void 0===e.group?null:bn(e,t)),cn&&!Ve?Cn:null]})]}),e("tbody",{ref:Rt,children:0===gt.length?e("tr",{children:e("td",{colSpan:un,className:"text-(--neba-muted-fg)",style:{padding:`2rem ${Ue}`,textAlign:"center"},children:ee??We.title})}):t(n,{children:[Sn("before",Wt.before),Ft.map((n,r)=>{const a=Wt.start+r,o=Ct.has(n.key),l=St===n.key;return t("tr",{id:`${Fe}-${n.key}`,"aria-selected":Ge?o:void 0,"aria-rowindex":Bt?a+2:void 0,"data-neba-row":n.key,className:K(_,o?"[--n-row:var(--n-soft-press)]":!1!==V&&a%2===hn?"[--n-row:var(--n-stripe)]":"",!o&&G?"hover:[--n-row:var(--n-soft)]":"",l&&Ge?"[box-shadow:inset_0_0_0_1px_var(--n-ring)]":"",Ge||ve?"cursor-default":""),style:{height:`${Oe}px`,backgroundColor:"var(--n-row)"},onPointerDown:e=>nn(n,e),onClick:e=>ve?.(n.row,vt+a,e),onDoubleClick:()=>ye?.(n.row,vt+a),children:[Qe?wn(n):null,Ye.map(t=>e("td",{role:Ge?"gridcell":void 0,style:{...pn,textAlign:t.align??"start"},children:t.render?t.render(n.row,vt+a):n.row[t.key]},t.key)),cn?e("td",{"aria-hidden":"true",style:{...pn,padding:0}}):null]},n.key)}),Sn("after",Wt.after)]})})]})}),gn?t("div",{className:K("flex flex-wrap items-center gap-3",$[W]),style:{padding:`0.375rem ${Ue}`,borderTop:"1px solid var(--n-line)"},children:[e("span",{className:"text-(--neba-muted-fg) tabular-nums",children:vn}),Ge&&Ct.size>0?e("span",{className:"text-(--n-accent) tabular-nums",children:x(Ie.selected,{count:fn.format(Ct.size)})}):null,t("div",{className:"ms-auto flex items-center gap-2",children:["pages"===be&&Ne.length>0?e(n,{children:e(s,{size:W,color:F,density:O,variant:"outline",label:Ie.rowsPerPage,items:Ne.map(e=>({value:e})),value:mt,onValueChange:e=>{const t=Number(e);void 0===Ce&&pt(t),yn(Math.floor(ft.start/t)+1),Me?.(t)}})}):null,"pages"===be?e(l,{size:W,color:F,count:ft.pages,page:ft.page,siblingCount:0,onPageChange:yn}):null]})]}):null,!gn&&Bt?e("span",{className:E,"aria-live":"polite",children:vn}):null]})}
|
|
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,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({ size, color, density, open, defaultOpen, onOpenChange, trigger, title, description, actions, dividers, showClose, locale, closeLabel, width, fullWidth, fullScreen, modal, dismissible, className, style, children, ...props }: DialogProps): React.JSX.Element;
|
|
134
|
+
export declare function Dialog({ size, color, density, open, defaultOpen, onOpenChange, trigger, title, description, actions, dividers, showClose, locale, closeLabel, width, fullWidth, fullScreen, modal, dismissible, className, classNames, style, children, ...props }: 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
|
|
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 p,sheetHeaderGapClasses as f,sheetSectionGapClasses as u,sheetTitleClasses as b,surfaceClasses as x,surfaceSlots as h}from"../../internal/styles.js";const v={xs:"max-w-80",sm:"max-w-96",md:"max-w-lg",lg:"max-w-2xl",xl:"max-w-4xl"},g=[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(" "),y=["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(" "),w="border-t [border-color:var(--n-line)]";export const DialogClose=l.Close;export function Dialog({size:x="md",color:j="primary",density:N="default",open:_,defaultOpen:k,onOpenChange:$,trigger:C,title:z,description:D,actions:O,dividers:P=!1,showClose:B=!0,locale:T,closeLabel:W,width:L,fullWidth:R=!0,fullScreen:S=!1,modal:V=!0,dismissible:q=!0,className:A,classNames:E,style:F,children:G,...H}){const I=r(o,T),J=n[N][x],K=i[N][x],M=P?`${J} ${K}`:J,Q=c(z)||c(D),U=c(O);return a(l.Root,{open:_,defaultOpen:k,modal:V,disablePointerDismissal:!q,onOpenChange:(e,a)=>{q||e||"escape-key"!==a.reason?$?.(e):a.cancel()},children:[C?e(l.Trigger,{render:C}):null,a(l.Portal,{children:[e(l.Backdrop,{className:t("neba-portal",y,E?.backdrop)}),e(l.Viewport,{className:t("neba-portal fixed inset-0 z-50 flex justify-center",S?"items-stretch":"items-center p-4",E?.viewport),children:a(l.Popup,{className:t(g,p[x],S?"h-full max-w-none rounded-none":`max-h-full ${m[x]} ${void 0===L?v[x]:""}`,S||R?"":"w-auto",P?"":`${K} ${u[x]}`,A??""),style:{...h(j,3),...void 0===L?null:{maxWidth:"number"==typeof L?`${L}px`:L},...F},...H,children:[Q||B?a("div",{className:`flex shrink-0 items-start gap-3 ${M}`,children:[a("div",{className:`flex min-w-0 flex-1 flex-col ${f[x]}`,children:[c(z)?e(l.Title,{className:t("font-semibold",b[x],"m-0",E?.title),children:z}):null,c(D)?e(l.Description,{className:t("m-0 text-(--neba-muted-fg)",d[x],E?.description),children:D}):null]}),B?e(l.Close,{"aria-label":W??I.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",E?.close),children:e(s,{})}):null]}):null,c(G)?e("div",{className:t("min-h-0 flex-1 overflow-y-auto overscroll-contain",M,P&&(Q||B)?w:"",P?"":"py-1 -my-1",E?.body),children:G}):null,U?e("div",{className:t("flex shrink-0 flex-wrap items-center justify-end gap-2",M,P?w:"",E?.actions),children:O}):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
|
|
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 n,toLength as i}from"../../internal/styles.js";const s="[border-color:var(--n-line)]",o={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"]}},d={xs:"gap-1.5",sm:"gap-2",md:"gap-3",lg:"gap-3.5",xl:"gap-4"};export const Divider=/*@__PURE__*/t.forwardRef(function({orientation:t="horizontal",color:c="primary",size:f="md",length:h,thickness:m,textAlign:p="center",className:u,style:x,children:w,...v},b){const g="vertical"===t,$=null!=w&&!1!==w&&""!==w,k={"--n-line":`var(--neba-${c}-line)`,"--n-rule":i(m)??"1px"},y=i(h),N={...k,...void 0===y?null:g?{height:y}:{width:y},...x};if(!$)return e(l,{ref:b,orientation:t,className:a(g?"w-0 border-l [border-left-width:var(--n-rule)] "+(void 0===y?"self-stretch":""):"h-0 w-full border-t [border-top-width:var(--n-rule)]",s,u??""),style:N,...v});const[j,z]=o[t][p],A=g?"w-0 border-l [border-left-width:var(--n-rule)]":"h-0 border-t [border-top-width:var(--n-rule)]";return r(l,{ref:b,orientation:t,"aria-label":"string"==typeof w?w:void 0,className:a("flex items-center",g?"w-auto flex-col "+(void 0===y?"self-stretch":""):"w-full",d[f],u??""),style:N,...v,children:[e("span",{"aria-hidden":"true",className:`${A} ${j} ${s}`}),e("span",{className:["shrink-0 whitespace-nowrap text-(--neba-muted-fg)",n[f],g?"[writing-mode:vertical-rl]":""].filter(Boolean).join(" "),children:w}),e("span",{"aria-hidden":"true",className:`${A} ${z} ${s}`})]})});
|
|
@@ -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
|
|
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 b,sheetBodyClasses as m,sheetHeaderGapClasses as c,sheetSectionGapClasses as f,sheetTitleClasses as x,surfaceClasses as p,surfaceSlots as g}from"../../internal/styles.js";const h={xs:"w-56",sm:"w-64",md:"w-80",lg:"w-96",xl:"w-[28rem]"},v={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)"}},y={left:"border-r",right:"border-l",top:"border-b",bottom:"border-t"},w={left:"flex-row justify-start",right:"flex-row justify-end",top:"flex-col justify-start",bottom:"flex-col justify-end"},j=[p,"relative flex flex-col overflow-hidden","text-(--neba-fg) bg-(--n-panel-press)","[border-color:var(--n-line)]","[outline:none]"].join(" "),N=["[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)]",N].join(" "),_="border-t [border-color:var(--n-line)]",k=["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({side:p="left",mode:C="overlay",size:z="md",color:D="primary",density:O="default",open:P,defaultOpen:B,onOpenChange:T,trigger:F,title:L,description:R,actions:V,dividers:q=!1,showClose:A,locale:E,closeLabel:G,extent:H,rounded:I=!0,modal:J=!0,dismissible:K=!0,className:M,style:Q,children:S,...U}){const W=i(o,E),X="overlay"===C,Y="left"===p||"right"===p,Z=A??X,ee=n[O][z],re=s[O][z],ae=q?`${ee} ${re}`:ee,le=u(L)||u(R),ne=u(V),se=void 0===H?null:{[Y?"width":"height"]:"number"==typeof H?`${H}px`:H},oe=t(j,m[z],y[p],I?v[p][z]:"",X?"[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]":"[box-shadow:var(--neba-plate-glass)]",X?N:"",Y?`h-full max-w-full ${void 0===H?h[z]:""}`:"w-full "+(void 0===H?"max-h-[85%]":""),q?"":`${re} ${f[z]}`,M??""),ie=X?l.Title:"h2",de=X?l.Description:"p",te=r(a,{children:[le||Z?r("div",{className:`flex shrink-0 items-start gap-3 ${ae}`,children:[r("div",{className:`flex min-w-0 flex-1 flex-col ${c[z]}`,children:[u(L)?e(ie,{className:`m-0 font-semibold ${x[z]}`,children:L}):null,u(R)?e(de,{className:`m-0 text-(--neba-muted-fg) ${b[z]}`,children:R}):null]}),Z?X?e(l.Close,{"aria-label":G??W.close,className:k,children:e(d,{})}):e("button",{type:"button","aria-label":G??W.close,className:k,onClick:()=>T?.(!1),children:e(d,{})}):null]}):null,u(S)?e("div",{className:t("min-h-0 flex-1 overflow-y-auto overscroll-contain",ae,q&&(le||Z)?_:"",q?"":"py-1 -my-1"),children:S}):null,ne?e("div",{className:t("flex shrink-0 flex-wrap items-center justify-end gap-2",ae,q?_:""),children:V}):null]});return X?r(l.Root,{open:P,defaultOpen:B,modal:J,disablePointerDismissal:!K,onOpenChange:(e,r)=>{K||e||"escape-key"!==r.reason?T?.(e):r.cancel()},children:[F?e(l.Trigger,{render:F}):null,r(l.Portal,{children:[e(l.Backdrop,{className:`neba-portal ${$}`}),e(l.Viewport,{className:`neba-portal fixed inset-0 z-50 flex ${w[p]}`,children:e(l.Popup,{className:oe,style:{...g(D,3),...se,...Q},...U,children:te})})]})]}):P??B??!0?e("div",{className:oe,style:{...g(D,0),...se,...Q},children:te}):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
|
|
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 g={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"}},j={xs:"text-[1.25rem]",sm:"text-[1.5rem]",md:"text-[1.75rem]",lg:"text-[2.125rem]",xl:"text-[2.5rem]"},N={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 k(){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({variant:n="text",size:v="md",color:w="secondary",density:$="default",elevation:L=0,title:B,icon:C,action:W,locale:z,transition:E,render:F,className:M,style:R,children:Z,...q},A){const D=i(o,z),G=void 0===B?D.title:B,H=void 0===C?e(k,{}):C,I=s(E),J=c(G),K=m("flex w-full flex-col items-center justify-center text-center",a[$][v],g[$][v],x[v],u[v],b,N[n],I.className,M??"");return l({render:F,ref:A,props:{role:"status",className:K,style:{...y(w,L),...I.style,...R},children:t(r,{children:[c(H)?e("span",{className:`flex items-center text-(--neba-muted-fg) ${j[v]} ${d}`,children:H}):null,J||c(Z)?t("div",{className:`flex max-w-prose flex-col items-center ${f[v]}`,children:[J?e("div",{className:`neba-title font-semibold ${h[v]}`,children:G}):null,c(Z)?e("div",{className:`${p[v]} ${J?"text-(--neba-muted-fg)":""}`,children:Z}):null]}):null,c(W)?e("div",{className:"flex flex-wrap items-center justify-center gap-2",children:W}):null]}),...q}})});
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import type { NebaSize } from '../../types.js';
|
|
3
|
+
export interface FieldsetProps extends Omit<React.ComponentPropsWithoutRef<'fieldset'>, 'color'> {
|
|
4
|
+
/**
|
|
5
|
+
* What the group is called. It becomes the accessible name of every control
|
|
6
|
+
* inside, so it has to be a phrase that still reads correctly in front of each
|
|
7
|
+
* of them — "Billing address", not "Where should we send it?".
|
|
8
|
+
*/
|
|
9
|
+
legend?: React.ReactNode;
|
|
10
|
+
/** A line under the legend. */
|
|
11
|
+
description?: React.ReactNode;
|
|
12
|
+
/** Disables every control inside at once, the way a `<fieldset>` always has. */
|
|
13
|
+
disabled?: boolean;
|
|
14
|
+
/** The type scale of the legend and the gap between the controls. @default 'md' */
|
|
15
|
+
size?: NebaSize;
|
|
16
|
+
children?: React.ReactNode;
|
|
17
|
+
}
|
|
18
|
+
/**
|
|
19
|
+
* A group of controls that answer one question together, with a name on it.
|
|
20
|
+
*
|
|
21
|
+
* It draws no surface, and that is deliberate: a group of fields is a *grouping*
|
|
22
|
+
* and not a sheet, and the sheet already exists — put this inside a
|
|
23
|
+
* [Card](../surfaces/card) or a [Box](../surfaces/box) when one is wanted. What
|
|
24
|
+
* it owns is the legend, the gap the controls stand at, and the one thing only a
|
|
25
|
+
* real `<fieldset>` can do: `disabled` reaches every control inside it,
|
|
26
|
+
* including ones a component three levels down rendered and never heard of it.
|
|
27
|
+
*
|
|
28
|
+
* The legend is a `<div>` pointed at by `aria-labelledby` rather than a
|
|
29
|
+
* `<legend>` — Base UI's decision, and the one that makes the group a normal
|
|
30
|
+
* flex container: a real rendered legend is lifted out of its fieldset's content
|
|
31
|
+
* box by every browser, so a `gap` would put no space under it at all.
|
|
32
|
+
*/
|
|
33
|
+
export declare const Fieldset: React.ForwardRefExoticComponent<FieldsetProps & React.RefAttributes<HTMLFieldSetElement>>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import*as l from"react";import{Fieldset as r}from"@base-ui/react/fieldset";import{cx as n,hasContent as a,metaTextClasses as i,sheetHeaderGapClasses as t,sheetSectionGapClasses as o,sheetTitleClasses as c}from"../../internal/styles.js";export const Fieldset=/*@__PURE__*/l.forwardRef(function({legend:l,description:d,disabled:m=!1,size:f="md",className:p,children:u,...x},b){const h=a(l)||a(d);return s(r.Root,{ref:b,disabled:m,className:n("m-0 flex min-w-0 flex-col border-0 p-0",o[f],p??""),...x,children:[h?s(r.Legend,{className:`flex min-w-0 flex-col p-0 ${t[f]}`,children:[a(l)?e("span",{className:`font-semibold ${c[f]}`,children:l}):null,a(d)?e("span",{className:`text-(--neba-muted-fg) ${i[f]}`,children:d}):null]}):null,u]})});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export{Fieldset}from"./Fieldset.js";
|