@crispy-seed/data-table 0.1.0 → 0.1.2
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 +25 -13
- package/dist/index.cjs +4563 -2
- package/dist/index.d.ts +8 -1
- package/dist/index.js +4547 -1
- package/package.json +1 -2
- package/dist/DataTable-12s-8LMBtS2u.cjs +0 -1532
- package/dist/DataTable-12s-Bd20OuMs.js +0 -1482
- package/dist/DataTable-12s-Zml1x9Kr-12s-CTRzgvMT.cjs +0 -161
- package/dist/DataTable-12s-Zml1x9Kr-12s-Coi-3lUa.js +0 -153
- package/dist/Menu-12s-Db_zr1AP.cjs +0 -104
- package/dist/Menu-12s-Di5JADW4.js +0 -78
- package/dist/Select-12s-1Uh7XbkG.js +0 -219
- package/dist/Select-12s-D8DdKT-U.cjs +0 -250
- package/dist/body-cells-12s-BnOVUTKN.js +0 -453
- package/dist/body-cells-12s-BoOTcg-l.cjs +0 -462
- package/dist/column-calc-12s-C6IPSOaF.js +0 -129
- package/dist/column-calc-12s-CKuSpe-l.cjs +0 -149
- package/dist/column-layout-12s-CTu5yT_D.cjs +0 -120
- package/dist/column-layout-12s-s7wnxkMN.js +0 -99
- package/dist/column-menu-12s-BPE9N1gs.cjs +0 -427
- package/dist/column-menu-12s-mRBk-4oa.js +0 -407
- package/dist/editors-12s-BO9Mp034.js +0 -525
- package/dist/editors-12s-DO8TZkYV.cjs +0 -555
- package/dist/resize-12s-jQY-PX67.cjs +0 -58
- package/dist/resize-12s-nsMvrmLt.js +0 -58
- package/dist/states-12s-CLO_uVue.cjs +0 -125
- package/dist/states-12s-DEFSxJCO.js +0 -122
- package/dist/toolbar-12s-AVU-sbDW.js +0 -69
- package/dist/toolbar-12s-CaLgJrDo.cjs +0 -71
- package/dist/useDataTable-12s-BHiDUubw-12s-CBeCwTe7.js +0 -61
- package/dist/useDataTable-12s-BHiDUubw-12s-Dgvt7XDk.cjs +0 -61
- package/dist/useDataTableColumnCalc-12s-DTQQTtEJ-12s-CvD14JYo.cjs +0 -207
- package/dist/useDataTableColumnCalc-12s-DTQQTtEJ-12s-DsEse3uq.js +0 -183
- package/dist/useDataTableColumns-12s-Cn2ZAzFL-12s-CD6goR59.js +0 -289
- package/dist/useDataTableColumns-12s-Cn2ZAzFL-12s-CUk_CpYT.cjs +0 -292
- package/dist/useDataTableEdit-12s-9Wb_UCrN-12s-BoOHq3GB.js +0 -98
- package/dist/useDataTableEdit-12s-9Wb_UCrN-12s-De6YHBba.cjs +0 -98
- package/dist/useDataTableFilter-12s-ZzbmWMin-12s-CWyBeFna.js +0 -74
- package/dist/useDataTableFilter-12s-ZzbmWMin-12s-lpjzZY3_.cjs +0 -74
- package/dist/useDataTableInfiniteScroll-12s-8ZG31URd-12s-BexjP6iO.js +0 -104
- package/dist/useDataTableInfiniteScroll-12s-8ZG31URd-12s-Bt8gojr9.cjs +0 -104
- package/dist/useDataTableRow-12s-CPYaDa1p-12s-BmUSAnPe.js +0 -30
- package/dist/useDataTableRow-12s-CPYaDa1p-12s-D-DRjwAe.cjs +0 -30
- package/dist/useDataTableScroll-12s-BKDCr0en-12s-C7f2vHeG.js +0 -61
- package/dist/useDataTableScroll-12s-BKDCr0en-12s-CUvUYMtt.cjs +0 -61
- package/dist/useDataTableSearch-12s-Ck3iWcpX-12s-B-65V6gH.js +0 -37
- package/dist/useDataTableSearch-12s-Ck3iWcpX-12s-DhVfN2Hq.cjs +0 -37
- package/dist/useDataTableSelection-12s-BIDtiRQq-12s-IS__VAnU.cjs +0 -71
- package/dist/useDataTableSelection-12s-BIDtiRQq-12s-O6M_BhrH.js +0 -71
- package/dist/useDataTableSort-12s-DvJYtmeS-12s-C5VGnsq4.cjs +0 -78
- package/dist/useDataTableSort-12s-DvJYtmeS-12s-DABSNt6U.js +0 -78
|
@@ -1,219 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
function __insertCSS(code) {
|
|
3
|
-
if (!code || typeof document == 'undefined') return
|
|
4
|
-
let head = document.head || document.getElementsByTagName('head')[0]
|
|
5
|
-
let style = document.createElement('style')
|
|
6
|
-
style.type = 'text/css'
|
|
7
|
-
head.appendChild(style)
|
|
8
|
-
;style.styleSheet ? (style.styleSheet.cssText = code) : style.appendChild(document.createTextNode(code))
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
import { jsx } from 'react/jsx-runtime';
|
|
12
|
-
import { Select, useSelectContext, useSelectItemContext } from '@seed-design/react-select';
|
|
13
|
-
import { useFieldContext } from '@seed-design/react-field';
|
|
14
|
-
import { mergeProps } from '@seed-design/dom-utils';
|
|
15
|
-
import { select } from '@seed-design/css/recipes/select';
|
|
16
|
-
import { selectTrigger } from '@seed-design/css/recipes/select-trigger';
|
|
17
|
-
import { selectItem } from '@seed-design/css/recipes/select-item';
|
|
18
|
-
import { Primitive } from '@seed-design/react-primitive';
|
|
19
|
-
import { c as createSlotRecipeContext, a as createWithStateProps, I as InternalIcon, b as clsx, s as splitMultipleVariantsProps } from './DataTable-12s-Bd20OuMs.js';
|
|
20
|
-
import * as React from 'react';
|
|
21
|
-
|
|
22
|
-
// A select-only combobox spans three specs — the trigger, the floating listbox
|
|
23
|
-
// container, and the option rows — each with its own independent states and its own
|
|
24
|
-
// variant map. `SelectRoot` seeds defaults for all three, but only the container
|
|
25
|
-
// resolves there, since its slots are spread across the portal subtree with no
|
|
26
|
-
// single element to own them. The trigger and each option row resolve their own
|
|
27
|
-
// recipe, so a per-instance variant can override the root's default.
|
|
28
|
-
const { ClassNamesProvider: TriggerClassNamesProvider, PropsProvider: TriggerPropsProvider, useProps: useTriggerProps, withContext: withTriggerContext, useClassNames: useTriggerClassNames } = createSlotRecipeContext(selectTrigger);
|
|
29
|
-
const { ClassNamesProvider: ContentClassNamesProvider, withContext: withContentContext, useClassNames: useContentClassNames } = createSlotRecipeContext(select);
|
|
30
|
-
const { ClassNamesProvider: ItemClassNamesProvider, PropsProvider: ItemPropsProvider, useProps: useItemProps, withContext: withItemContext, useClassNames: useItemClassNames } = createSlotRecipeContext(selectItem);
|
|
31
|
-
const withStateProps = createWithStateProps([
|
|
32
|
-
useSelectContext
|
|
33
|
-
]);
|
|
34
|
-
const withItemStateProps = createWithStateProps([
|
|
35
|
-
useSelectItemContext
|
|
36
|
-
]);
|
|
37
|
-
// NOTE: `gutter` and `overflowPadding` are specified in Rootage (`select.yaml`,
|
|
38
|
-
// both `$dimension.x2`) and generated into `@seed-design/css`, but nothing reads
|
|
39
|
-
// them: floating-ui's `offset`/`shift` take numbers, not CSS custom properties,
|
|
40
|
-
// so the headless layer falls back to its own `8`. That default stays
|
|
41
|
-
// design-system-agnostic on purpose — this layer is the one that owns the
|
|
42
|
-
// Rootage binding, so seed the spec values from here when they need to win,
|
|
43
|
-
// the way `HelpBubbleRoot` passes `gutter` through `defaultProps`.
|
|
44
|
-
const SelectRoot = (props)=>{
|
|
45
|
-
const [{ select: contentVariantProps, selectTrigger: triggerVariantProps, selectItem: itemVariantProps }, otherProps] = splitMultipleVariantsProps(props, {
|
|
46
|
-
select,
|
|
47
|
-
selectTrigger,
|
|
48
|
-
selectItem
|
|
49
|
-
});
|
|
50
|
-
const contentClassNames = select(contentVariantProps);
|
|
51
|
-
return /*#__PURE__*/ jsx(ContentClassNamesProvider, {
|
|
52
|
-
value: contentClassNames,
|
|
53
|
-
children: /*#__PURE__*/ jsx(TriggerPropsProvider, {
|
|
54
|
-
value: triggerVariantProps,
|
|
55
|
-
children: /*#__PURE__*/ jsx(ItemPropsProvider, {
|
|
56
|
-
value: itemVariantProps,
|
|
57
|
-
children: /*#__PURE__*/ jsx(Select.Root, {
|
|
58
|
-
...otherProps
|
|
59
|
-
})
|
|
60
|
-
})
|
|
61
|
-
})
|
|
62
|
-
});
|
|
63
|
-
};
|
|
64
|
-
const SelectTrigger = /*#__PURE__*/ React.forwardRef(({ className, ...props }, ref)=>{
|
|
65
|
-
const [variantProps, otherProps] = selectTrigger.splitVariantProps(props);
|
|
66
|
-
const rootProps = useTriggerProps();
|
|
67
|
-
const classNames = selectTrigger({
|
|
68
|
-
...rootProps,
|
|
69
|
-
...variantProps
|
|
70
|
-
});
|
|
71
|
-
const fieldContext = useFieldContext({
|
|
72
|
-
strict: false
|
|
73
|
-
});
|
|
74
|
-
// Pull only the field's labelledby/describedby: `useSelect` owns the
|
|
75
|
-
// combobox's aria-invalid/required and native disabled, so we don't merge
|
|
76
|
-
// those from the field (avoids duplicate ownership and aria-disabled on top
|
|
77
|
-
// of the native disabled button).
|
|
78
|
-
const mergedProps = mergeProps(fieldContext ? {
|
|
79
|
-
"aria-labelledby": fieldContext.inputAriaAttributes["aria-labelledby"],
|
|
80
|
-
"aria-describedby": fieldContext.inputAriaAttributes["aria-describedby"]
|
|
81
|
-
} : {}, otherProps);
|
|
82
|
-
if (process.env.NODE_ENV !== "production" && !fieldContext && !otherProps["aria-label"] && !otherProps["aria-labelledby"]) {
|
|
83
|
-
console.warn("SelectTrigger: Please provide `aria-label` or `aria-labelledby` for accessibility, or put `SelectTrigger` inside a `Field` where a `FieldLabel` is provided.");
|
|
84
|
-
}
|
|
85
|
-
return /*#__PURE__*/ jsx(TriggerClassNamesProvider, {
|
|
86
|
-
value: classNames,
|
|
87
|
-
children: /*#__PURE__*/ jsx(Select.Trigger, {
|
|
88
|
-
ref: ref,
|
|
89
|
-
className: clsx(classNames.root, className),
|
|
90
|
-
...mergedProps
|
|
91
|
-
})
|
|
92
|
-
});
|
|
93
|
-
});
|
|
94
|
-
SelectTrigger.displayName = "SelectTrigger";
|
|
95
|
-
const SelectValue = withTriggerContext(withStateProps(Select.Value), "value");
|
|
96
|
-
const SelectPlaceholder = withTriggerContext(withStateProps(Select.Placeholder), "placeholder");
|
|
97
|
-
const SelectPrefixIcon = /*#__PURE__*/ React.forwardRef(({ fallback, className, ...otherProps }, ref)=>{
|
|
98
|
-
const { selectedItem, stateProps } = useSelectContext();
|
|
99
|
-
const classNames = useTriggerClassNames();
|
|
100
|
-
const svg = selectedItem?.icon ?? fallback;
|
|
101
|
-
if (!svg) return null;
|
|
102
|
-
return /*#__PURE__*/ jsx(InternalIcon, {
|
|
103
|
-
ref: ref,
|
|
104
|
-
svg: svg,
|
|
105
|
-
className: clsx(classNames.prefixIcon, className),
|
|
106
|
-
...stateProps,
|
|
107
|
-
...otherProps
|
|
108
|
-
});
|
|
109
|
-
});
|
|
110
|
-
SelectPrefixIcon.displayName = "SelectPrefixIcon";
|
|
111
|
-
const SelectSuffixIcon = withTriggerContext(withStateProps(InternalIcon), "suffixIcon");
|
|
112
|
-
const SelectPositioner = /*#__PURE__*/ React.forwardRef(({ className, ...props }, ref)=>{
|
|
113
|
-
const classNames = useContentClassNames();
|
|
114
|
-
return /*#__PURE__*/ jsx(Select.Positioner, {
|
|
115
|
-
ref: ref,
|
|
116
|
-
className: clsx(classNames.positioner, className),
|
|
117
|
-
...props
|
|
118
|
-
});
|
|
119
|
-
});
|
|
120
|
-
SelectPositioner.displayName = "SelectPositioner";
|
|
121
|
-
const SelectContent = /*#__PURE__*/ React.forwardRef(({ className, ...otherProps }, ref)=>{
|
|
122
|
-
const classNames = useContentClassNames();
|
|
123
|
-
const fieldContext = useFieldContext({
|
|
124
|
-
strict: false
|
|
125
|
-
});
|
|
126
|
-
// Label the listbox popup with the same field label (APG combobox pattern).
|
|
127
|
-
const mergedProps = mergeProps(fieldContext ? {
|
|
128
|
-
"aria-labelledby": fieldContext.inputAriaAttributes["aria-labelledby"]
|
|
129
|
-
} : {}, otherProps);
|
|
130
|
-
return /*#__PURE__*/ jsx(Select.Content, {
|
|
131
|
-
ref: ref,
|
|
132
|
-
className: clsx(classNames.content, className),
|
|
133
|
-
...mergedProps
|
|
134
|
-
});
|
|
135
|
-
});
|
|
136
|
-
SelectContent.displayName = "SelectContent";
|
|
137
|
-
const SelectScrollArea = withContentContext(Primitive.div, "scrollArea");
|
|
138
|
-
withContentContext(Select.Group, "group");
|
|
139
|
-
withContentContext(Select.GroupLabel, "groupLabel");
|
|
140
|
-
const SelectItem = /*#__PURE__*/ React.forwardRef(({ prefixIcon, className, ...props }, ref)=>{
|
|
141
|
-
const [variantProps, otherProps] = selectItem.splitVariantProps(props);
|
|
142
|
-
const rootProps = useItemProps();
|
|
143
|
-
const classNames = selectItem({
|
|
144
|
-
...rootProps,
|
|
145
|
-
...variantProps
|
|
146
|
-
});
|
|
147
|
-
return /*#__PURE__*/ jsx(ItemClassNamesProvider, {
|
|
148
|
-
value: classNames,
|
|
149
|
-
children: /*#__PURE__*/ jsx(Select.Item, {
|
|
150
|
-
ref: ref,
|
|
151
|
-
icon: prefixIcon,
|
|
152
|
-
...otherProps,
|
|
153
|
-
className: clsx(classNames.root, className)
|
|
154
|
-
})
|
|
155
|
-
});
|
|
156
|
-
});
|
|
157
|
-
SelectItem.displayName = "SelectItem";
|
|
158
|
-
const SelectItemPrefixIcon = /*#__PURE__*/ React.forwardRef(({ svg: svgOverride, className, ...otherProps }, ref)=>{
|
|
159
|
-
const { icon, stateProps } = useSelectItemContext();
|
|
160
|
-
const classNames = useItemClassNames();
|
|
161
|
-
const svg = svgOverride ?? icon;
|
|
162
|
-
if (!svg) return null;
|
|
163
|
-
return /*#__PURE__*/ jsx(InternalIcon, {
|
|
164
|
-
ref: ref,
|
|
165
|
-
svg: svg,
|
|
166
|
-
className: clsx(classNames.prefixIcon, className),
|
|
167
|
-
...stateProps,
|
|
168
|
-
...otherProps
|
|
169
|
-
});
|
|
170
|
-
});
|
|
171
|
-
SelectItemPrefixIcon.displayName = "SelectItemPrefixIcon";
|
|
172
|
-
const SelectItemBody = withItemContext(withItemStateProps(Primitive.div), "body");
|
|
173
|
-
const SelectItemLabel = /*#__PURE__*/ React.forwardRef(({ children, className, ...otherProps }, ref)=>{
|
|
174
|
-
const { label, stateProps } = useSelectItemContext();
|
|
175
|
-
const classNames = useItemClassNames();
|
|
176
|
-
// stateProps stays because the label's disabled style targets its own
|
|
177
|
-
// `data-disabled`.
|
|
178
|
-
return /*#__PURE__*/ jsx(Primitive.span, {
|
|
179
|
-
ref: ref,
|
|
180
|
-
className: clsx(classNames.label, className),
|
|
181
|
-
...stateProps,
|
|
182
|
-
...otherProps,
|
|
183
|
-
children: children ?? label
|
|
184
|
-
});
|
|
185
|
-
});
|
|
186
|
-
SelectItemLabel.displayName = "SelectItemLabel";
|
|
187
|
-
withItemContext(withItemStateProps(Primitive.span), "description");
|
|
188
|
-
const SelectItemIndicator = /*#__PURE__*/ React.forwardRef(({ selected: selectedSvg, unselected: unselectedSvg, className, ...otherProps }, ref)=>{
|
|
189
|
-
const { isSelected, stateProps } = useSelectItemContext();
|
|
190
|
-
const classNames = useItemClassNames();
|
|
191
|
-
const svg = isSelected ? selectedSvg : unselectedSvg;
|
|
192
|
-
if (!svg) return null;
|
|
193
|
-
return /*#__PURE__*/ jsx(InternalIcon, {
|
|
194
|
-
ref: ref,
|
|
195
|
-
svg: svg,
|
|
196
|
-
className: clsx(classNames.indicator, className),
|
|
197
|
-
...stateProps,
|
|
198
|
-
...otherProps
|
|
199
|
-
});
|
|
200
|
-
});
|
|
201
|
-
SelectItemIndicator.displayName = "SelectItemIndicator";
|
|
202
|
-
const SelectHiddenSelect = /*#__PURE__*/ React.forwardRef((props, ref)=>{
|
|
203
|
-
const fieldContext = useFieldContext({
|
|
204
|
-
strict: false
|
|
205
|
-
});
|
|
206
|
-
// The field label's `htmlFor` targets the field input id. Carrying that id on
|
|
207
|
-
// the hidden native select — a labelable element whose label activation only
|
|
208
|
-
// focuses, never opens anything — makes label clicks reach the trigger through
|
|
209
|
-
// the hidden select's focus redirect. Associating the label with the trigger
|
|
210
|
-
// button instead would forward label clicks as activation and open the listbox.
|
|
211
|
-
return /*#__PURE__*/ jsx(Select.HiddenSelect, {
|
|
212
|
-
ref: ref,
|
|
213
|
-
id: fieldContext?.inputProps.id,
|
|
214
|
-
...props
|
|
215
|
-
});
|
|
216
|
-
});
|
|
217
|
-
SelectHiddenSelect.displayName = "SelectHiddenSelect";
|
|
218
|
-
|
|
219
|
-
export { SelectRoot as S, SelectTrigger as a, SelectValue as b, SelectPlaceholder as c, SelectSuffixIcon as d, SelectPositioner as e, SelectContent as f, SelectScrollArea as g, SelectItem as h, SelectItemBody as i, SelectItemLabel as j, SelectItemIndicator as k };
|
|
@@ -1,250 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
function __insertCSS(code) {
|
|
3
|
-
if (!code || typeof document == 'undefined') return
|
|
4
|
-
let head = document.head || document.getElementsByTagName('head')[0]
|
|
5
|
-
let style = document.createElement('style')
|
|
6
|
-
style.type = 'text/css'
|
|
7
|
-
head.appendChild(style)
|
|
8
|
-
;style.styleSheet ? (style.styleSheet.cssText = code) : style.appendChild(document.createTextNode(code))
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
12
|
-
var reactSelect = require('@seed-design/react-select');
|
|
13
|
-
var reactField = require('@seed-design/react-field');
|
|
14
|
-
var domUtils = require('@seed-design/dom-utils');
|
|
15
|
-
var select = require('@seed-design/css/recipes/select');
|
|
16
|
-
var selectTrigger = require('@seed-design/css/recipes/select-trigger');
|
|
17
|
-
var selectItem = require('@seed-design/css/recipes/select-item');
|
|
18
|
-
var reactPrimitive = require('@seed-design/react-primitive');
|
|
19
|
-
var DataTable12s = require('./DataTable-12s-8LMBtS2u.cjs');
|
|
20
|
-
var React = require('react');
|
|
21
|
-
|
|
22
|
-
function _interopNamespace(e) {
|
|
23
|
-
if (e && e.__esModule) return e;
|
|
24
|
-
var n = Object.create(null);
|
|
25
|
-
if (e) {
|
|
26
|
-
Object.keys(e).forEach(function (k) {
|
|
27
|
-
if (k !== 'default') {
|
|
28
|
-
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
29
|
-
Object.defineProperty(n, k, d.get ? d : {
|
|
30
|
-
enumerable: true,
|
|
31
|
-
get: function () { return e[k]; }
|
|
32
|
-
});
|
|
33
|
-
}
|
|
34
|
-
});
|
|
35
|
-
}
|
|
36
|
-
n.default = e;
|
|
37
|
-
return n;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
41
|
-
|
|
42
|
-
// A select-only combobox spans three specs — the trigger, the floating listbox
|
|
43
|
-
// container, and the option rows — each with its own independent states and its own
|
|
44
|
-
// variant map. `SelectRoot` seeds defaults for all three, but only the container
|
|
45
|
-
// resolves there, since its slots are spread across the portal subtree with no
|
|
46
|
-
// single element to own them. The trigger and each option row resolve their own
|
|
47
|
-
// recipe, so a per-instance variant can override the root's default.
|
|
48
|
-
const { ClassNamesProvider: TriggerClassNamesProvider, PropsProvider: TriggerPropsProvider, useProps: useTriggerProps, withContext: withTriggerContext, useClassNames: useTriggerClassNames } = DataTable12s.createSlotRecipeContext(selectTrigger.selectTrigger);
|
|
49
|
-
const { ClassNamesProvider: ContentClassNamesProvider, withContext: withContentContext, useClassNames: useContentClassNames } = DataTable12s.createSlotRecipeContext(select.select);
|
|
50
|
-
const { ClassNamesProvider: ItemClassNamesProvider, PropsProvider: ItemPropsProvider, useProps: useItemProps, withContext: withItemContext, useClassNames: useItemClassNames } = DataTable12s.createSlotRecipeContext(selectItem.selectItem);
|
|
51
|
-
const withStateProps = DataTable12s.createWithStateProps([
|
|
52
|
-
reactSelect.useSelectContext
|
|
53
|
-
]);
|
|
54
|
-
const withItemStateProps = DataTable12s.createWithStateProps([
|
|
55
|
-
reactSelect.useSelectItemContext
|
|
56
|
-
]);
|
|
57
|
-
// NOTE: `gutter` and `overflowPadding` are specified in Rootage (`select.yaml`,
|
|
58
|
-
// both `$dimension.x2`) and generated into `@seed-design/css`, but nothing reads
|
|
59
|
-
// them: floating-ui's `offset`/`shift` take numbers, not CSS custom properties,
|
|
60
|
-
// so the headless layer falls back to its own `8`. That default stays
|
|
61
|
-
// design-system-agnostic on purpose — this layer is the one that owns the
|
|
62
|
-
// Rootage binding, so seed the spec values from here when they need to win,
|
|
63
|
-
// the way `HelpBubbleRoot` passes `gutter` through `defaultProps`.
|
|
64
|
-
const SelectRoot = (props)=>{
|
|
65
|
-
const [{ select: contentVariantProps, selectTrigger: triggerVariantProps, selectItem: itemVariantProps }, otherProps] = DataTable12s.splitMultipleVariantsProps(props, {
|
|
66
|
-
select: select.select,
|
|
67
|
-
selectTrigger: selectTrigger.selectTrigger,
|
|
68
|
-
selectItem: selectItem.selectItem
|
|
69
|
-
});
|
|
70
|
-
const contentClassNames = select.select(contentVariantProps);
|
|
71
|
-
return /*#__PURE__*/ jsxRuntime.jsx(ContentClassNamesProvider, {
|
|
72
|
-
value: contentClassNames,
|
|
73
|
-
children: /*#__PURE__*/ jsxRuntime.jsx(TriggerPropsProvider, {
|
|
74
|
-
value: triggerVariantProps,
|
|
75
|
-
children: /*#__PURE__*/ jsxRuntime.jsx(ItemPropsProvider, {
|
|
76
|
-
value: itemVariantProps,
|
|
77
|
-
children: /*#__PURE__*/ jsxRuntime.jsx(reactSelect.Select.Root, {
|
|
78
|
-
...otherProps
|
|
79
|
-
})
|
|
80
|
-
})
|
|
81
|
-
})
|
|
82
|
-
});
|
|
83
|
-
};
|
|
84
|
-
const SelectTrigger = /*#__PURE__*/ React__namespace.forwardRef(({ className, ...props }, ref)=>{
|
|
85
|
-
const [variantProps, otherProps] = selectTrigger.selectTrigger.splitVariantProps(props);
|
|
86
|
-
const rootProps = useTriggerProps();
|
|
87
|
-
const classNames = selectTrigger.selectTrigger({
|
|
88
|
-
...rootProps,
|
|
89
|
-
...variantProps
|
|
90
|
-
});
|
|
91
|
-
const fieldContext = reactField.useFieldContext({
|
|
92
|
-
strict: false
|
|
93
|
-
});
|
|
94
|
-
// Pull only the field's labelledby/describedby: `useSelect` owns the
|
|
95
|
-
// combobox's aria-invalid/required and native disabled, so we don't merge
|
|
96
|
-
// those from the field (avoids duplicate ownership and aria-disabled on top
|
|
97
|
-
// of the native disabled button).
|
|
98
|
-
const mergedProps = domUtils.mergeProps(fieldContext ? {
|
|
99
|
-
"aria-labelledby": fieldContext.inputAriaAttributes["aria-labelledby"],
|
|
100
|
-
"aria-describedby": fieldContext.inputAriaAttributes["aria-describedby"]
|
|
101
|
-
} : {}, otherProps);
|
|
102
|
-
if (process.env.NODE_ENV !== "production" && !fieldContext && !otherProps["aria-label"] && !otherProps["aria-labelledby"]) {
|
|
103
|
-
console.warn("SelectTrigger: Please provide `aria-label` or `aria-labelledby` for accessibility, or put `SelectTrigger` inside a `Field` where a `FieldLabel` is provided.");
|
|
104
|
-
}
|
|
105
|
-
return /*#__PURE__*/ jsxRuntime.jsx(TriggerClassNamesProvider, {
|
|
106
|
-
value: classNames,
|
|
107
|
-
children: /*#__PURE__*/ jsxRuntime.jsx(reactSelect.Select.Trigger, {
|
|
108
|
-
ref: ref,
|
|
109
|
-
className: DataTable12s.clsx(classNames.root, className),
|
|
110
|
-
...mergedProps
|
|
111
|
-
})
|
|
112
|
-
});
|
|
113
|
-
});
|
|
114
|
-
SelectTrigger.displayName = "SelectTrigger";
|
|
115
|
-
const SelectValue = withTriggerContext(withStateProps(reactSelect.Select.Value), "value");
|
|
116
|
-
const SelectPlaceholder = withTriggerContext(withStateProps(reactSelect.Select.Placeholder), "placeholder");
|
|
117
|
-
const SelectPrefixIcon = /*#__PURE__*/ React__namespace.forwardRef(({ fallback, className, ...otherProps }, ref)=>{
|
|
118
|
-
const { selectedItem, stateProps } = reactSelect.useSelectContext();
|
|
119
|
-
const classNames = useTriggerClassNames();
|
|
120
|
-
const svg = selectedItem?.icon ?? fallback;
|
|
121
|
-
if (!svg) return null;
|
|
122
|
-
return /*#__PURE__*/ jsxRuntime.jsx(DataTable12s.InternalIcon, {
|
|
123
|
-
ref: ref,
|
|
124
|
-
svg: svg,
|
|
125
|
-
className: DataTable12s.clsx(classNames.prefixIcon, className),
|
|
126
|
-
...stateProps,
|
|
127
|
-
...otherProps
|
|
128
|
-
});
|
|
129
|
-
});
|
|
130
|
-
SelectPrefixIcon.displayName = "SelectPrefixIcon";
|
|
131
|
-
const SelectSuffixIcon = withTriggerContext(withStateProps(DataTable12s.InternalIcon), "suffixIcon");
|
|
132
|
-
const SelectPositioner = /*#__PURE__*/ React__namespace.forwardRef(({ className, ...props }, ref)=>{
|
|
133
|
-
const classNames = useContentClassNames();
|
|
134
|
-
return /*#__PURE__*/ jsxRuntime.jsx(reactSelect.Select.Positioner, {
|
|
135
|
-
ref: ref,
|
|
136
|
-
className: DataTable12s.clsx(classNames.positioner, className),
|
|
137
|
-
...props
|
|
138
|
-
});
|
|
139
|
-
});
|
|
140
|
-
SelectPositioner.displayName = "SelectPositioner";
|
|
141
|
-
const SelectContent = /*#__PURE__*/ React__namespace.forwardRef(({ className, ...otherProps }, ref)=>{
|
|
142
|
-
const classNames = useContentClassNames();
|
|
143
|
-
const fieldContext = reactField.useFieldContext({
|
|
144
|
-
strict: false
|
|
145
|
-
});
|
|
146
|
-
// Label the listbox popup with the same field label (APG combobox pattern).
|
|
147
|
-
const mergedProps = domUtils.mergeProps(fieldContext ? {
|
|
148
|
-
"aria-labelledby": fieldContext.inputAriaAttributes["aria-labelledby"]
|
|
149
|
-
} : {}, otherProps);
|
|
150
|
-
return /*#__PURE__*/ jsxRuntime.jsx(reactSelect.Select.Content, {
|
|
151
|
-
ref: ref,
|
|
152
|
-
className: DataTable12s.clsx(classNames.content, className),
|
|
153
|
-
...mergedProps
|
|
154
|
-
});
|
|
155
|
-
});
|
|
156
|
-
SelectContent.displayName = "SelectContent";
|
|
157
|
-
const SelectScrollArea = withContentContext(reactPrimitive.Primitive.div, "scrollArea");
|
|
158
|
-
withContentContext(reactSelect.Select.Group, "group");
|
|
159
|
-
withContentContext(reactSelect.Select.GroupLabel, "groupLabel");
|
|
160
|
-
const SelectItem = /*#__PURE__*/ React__namespace.forwardRef(({ prefixIcon, className, ...props }, ref)=>{
|
|
161
|
-
const [variantProps, otherProps] = selectItem.selectItem.splitVariantProps(props);
|
|
162
|
-
const rootProps = useItemProps();
|
|
163
|
-
const classNames = selectItem.selectItem({
|
|
164
|
-
...rootProps,
|
|
165
|
-
...variantProps
|
|
166
|
-
});
|
|
167
|
-
return /*#__PURE__*/ jsxRuntime.jsx(ItemClassNamesProvider, {
|
|
168
|
-
value: classNames,
|
|
169
|
-
children: /*#__PURE__*/ jsxRuntime.jsx(reactSelect.Select.Item, {
|
|
170
|
-
ref: ref,
|
|
171
|
-
icon: prefixIcon,
|
|
172
|
-
...otherProps,
|
|
173
|
-
className: DataTable12s.clsx(classNames.root, className)
|
|
174
|
-
})
|
|
175
|
-
});
|
|
176
|
-
});
|
|
177
|
-
SelectItem.displayName = "SelectItem";
|
|
178
|
-
const SelectItemPrefixIcon = /*#__PURE__*/ React__namespace.forwardRef(({ svg: svgOverride, className, ...otherProps }, ref)=>{
|
|
179
|
-
const { icon, stateProps } = reactSelect.useSelectItemContext();
|
|
180
|
-
const classNames = useItemClassNames();
|
|
181
|
-
const svg = svgOverride ?? icon;
|
|
182
|
-
if (!svg) return null;
|
|
183
|
-
return /*#__PURE__*/ jsxRuntime.jsx(DataTable12s.InternalIcon, {
|
|
184
|
-
ref: ref,
|
|
185
|
-
svg: svg,
|
|
186
|
-
className: DataTable12s.clsx(classNames.prefixIcon, className),
|
|
187
|
-
...stateProps,
|
|
188
|
-
...otherProps
|
|
189
|
-
});
|
|
190
|
-
});
|
|
191
|
-
SelectItemPrefixIcon.displayName = "SelectItemPrefixIcon";
|
|
192
|
-
const SelectItemBody = withItemContext(withItemStateProps(reactPrimitive.Primitive.div), "body");
|
|
193
|
-
const SelectItemLabel = /*#__PURE__*/ React__namespace.forwardRef(({ children, className, ...otherProps }, ref)=>{
|
|
194
|
-
const { label, stateProps } = reactSelect.useSelectItemContext();
|
|
195
|
-
const classNames = useItemClassNames();
|
|
196
|
-
// stateProps stays because the label's disabled style targets its own
|
|
197
|
-
// `data-disabled`.
|
|
198
|
-
return /*#__PURE__*/ jsxRuntime.jsx(reactPrimitive.Primitive.span, {
|
|
199
|
-
ref: ref,
|
|
200
|
-
className: DataTable12s.clsx(classNames.label, className),
|
|
201
|
-
...stateProps,
|
|
202
|
-
...otherProps,
|
|
203
|
-
children: children ?? label
|
|
204
|
-
});
|
|
205
|
-
});
|
|
206
|
-
SelectItemLabel.displayName = "SelectItemLabel";
|
|
207
|
-
withItemContext(withItemStateProps(reactPrimitive.Primitive.span), "description");
|
|
208
|
-
const SelectItemIndicator = /*#__PURE__*/ React__namespace.forwardRef(({ selected: selectedSvg, unselected: unselectedSvg, className, ...otherProps }, ref)=>{
|
|
209
|
-
const { isSelected, stateProps } = reactSelect.useSelectItemContext();
|
|
210
|
-
const classNames = useItemClassNames();
|
|
211
|
-
const svg = isSelected ? selectedSvg : unselectedSvg;
|
|
212
|
-
if (!svg) return null;
|
|
213
|
-
return /*#__PURE__*/ jsxRuntime.jsx(DataTable12s.InternalIcon, {
|
|
214
|
-
ref: ref,
|
|
215
|
-
svg: svg,
|
|
216
|
-
className: DataTable12s.clsx(classNames.indicator, className),
|
|
217
|
-
...stateProps,
|
|
218
|
-
...otherProps
|
|
219
|
-
});
|
|
220
|
-
});
|
|
221
|
-
SelectItemIndicator.displayName = "SelectItemIndicator";
|
|
222
|
-
const SelectHiddenSelect = /*#__PURE__*/ React__namespace.forwardRef((props, ref)=>{
|
|
223
|
-
const fieldContext = reactField.useFieldContext({
|
|
224
|
-
strict: false
|
|
225
|
-
});
|
|
226
|
-
// The field label's `htmlFor` targets the field input id. Carrying that id on
|
|
227
|
-
// the hidden native select — a labelable element whose label activation only
|
|
228
|
-
// focuses, never opens anything — makes label clicks reach the trigger through
|
|
229
|
-
// the hidden select's focus redirect. Associating the label with the trigger
|
|
230
|
-
// button instead would forward label clicks as activation and open the listbox.
|
|
231
|
-
return /*#__PURE__*/ jsxRuntime.jsx(reactSelect.Select.HiddenSelect, {
|
|
232
|
-
ref: ref,
|
|
233
|
-
id: fieldContext?.inputProps.id,
|
|
234
|
-
...props
|
|
235
|
-
});
|
|
236
|
-
});
|
|
237
|
-
SelectHiddenSelect.displayName = "SelectHiddenSelect";
|
|
238
|
-
|
|
239
|
-
exports.SelectContent = SelectContent;
|
|
240
|
-
exports.SelectItem = SelectItem;
|
|
241
|
-
exports.SelectItemBody = SelectItemBody;
|
|
242
|
-
exports.SelectItemIndicator = SelectItemIndicator;
|
|
243
|
-
exports.SelectItemLabel = SelectItemLabel;
|
|
244
|
-
exports.SelectPlaceholder = SelectPlaceholder;
|
|
245
|
-
exports.SelectPositioner = SelectPositioner;
|
|
246
|
-
exports.SelectRoot = SelectRoot;
|
|
247
|
-
exports.SelectScrollArea = SelectScrollArea;
|
|
248
|
-
exports.SelectSuffixIcon = SelectSuffixIcon;
|
|
249
|
-
exports.SelectTrigger = SelectTrigger;
|
|
250
|
-
exports.SelectValue = SelectValue;
|