@astryxdesign/core 0.1.6-canary.2829fc5 → 0.1.6-canary.2d8ba8b
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Button/Button.d.ts +10 -2
- package/dist/Button/Button.d.ts.map +1 -1
- package/dist/Button/Button.js +15 -2
- package/dist/Calendar/Calendar.d.ts.map +1 -1
- package/dist/Calendar/Calendar.js +21 -2
- package/dist/Layer/useLayer.d.ts +10 -0
- package/dist/Layer/useLayer.d.ts.map +1 -1
- package/dist/Layer/useLayer.js +23 -1
- package/dist/Selector/Selector.d.ts.map +1 -1
- package/dist/Selector/Selector.js +42 -10
- package/dist/Table/BaseTable.d.ts.map +1 -1
- package/dist/Table/BaseTable.js +26 -15
- package/dist/Table/Table.js +2 -2
- package/dist/Table/plugins/columnResize/useTableColumnResize.js +1 -1
- package/dist/Table/plugins/groupedRows/useTableGroupedRows.js +1 -1
- package/dist/Table/plugins/rowExpansion/useTableRowExpansion.d.ts.map +1 -1
- package/dist/Table/plugins/rowExpansion/useTableRowExpansion.js +1 -1
- package/dist/Table/plugins/stickyColumns/useTableStickyColumns.js +2 -2
- package/dist/Table/types.d.ts +17 -10
- package/dist/Table/types.d.ts.map +1 -1
- package/dist/astryx.umd.js +41 -41
- package/dist/astryx.umd.js.map +3 -3
- package/dist/utils/color.d.ts +13 -1
- package/dist/utils/color.d.ts.map +1 -1
- package/dist/utils/color.js +23 -1
- package/dist/utils/index.d.ts +1 -1
- package/dist/utils/index.d.ts.map +1 -1
- package/dist/utils/index.js +1 -1
- package/package.json +1 -1
- package/src/Button/Button.doc.mjs +8 -0
- package/src/Button/Button.test.tsx +27 -0
- package/src/Button/Button.tsx +17 -1
- package/src/Calendar/Calendar.test.tsx +103 -2
- package/src/Calendar/Calendar.tsx +21 -1
- package/src/DateInput/DateInput.test.tsx +17 -5
- package/src/Layer/useLayer.doc.mjs +8 -5
- package/src/Layer/useLayer.test.tsx +136 -1
- package/src/Layer/useLayer.tsx +34 -2
- package/src/Selector/Selector.doc.mjs +6 -3
- package/src/Selector/Selector.test.tsx +114 -6
- package/src/Selector/Selector.tsx +57 -11
- package/src/Table/BaseTable.tsx +28 -18
- package/src/Table/Table.test.tsx +132 -1
- package/src/Table/Table.tsx +3 -3
- package/src/Table/plugins/columnResize/useTableColumnResize.tsx +1 -1
- package/src/Table/plugins/groupedRows/useTableGroupedRows.tsx +1 -1
- package/src/Table/plugins/rowExpansion/useTableRowExpansion.tsx +2 -5
- package/src/Table/plugins/stickyColumns/useTableStickyColumns.tsx +4 -4
- package/src/Table/types.ts +18 -12
- package/src/utils/color.test.ts +101 -1
- package/src/utils/color.ts +23 -1
- package/src/utils/index.ts +8 -1
package/dist/Button/Button.d.ts
CHANGED
|
@@ -11,10 +11,11 @@
|
|
|
11
11
|
* - /apps/storybook/stories/Button.stories.tsx (storybook stories)
|
|
12
12
|
* - /packages/cli/templates/blocks/components/Button/ (showcase blocks)
|
|
13
13
|
*
|
|
14
|
-
* Last synced props: label, variant, size, isDisabled, isLoading, isInterruptible, clickAction, icon, isIconOnly, children, tooltip, endContent, href, as, target, rel
|
|
14
|
+
* Last synced props: label, variant, size, isDisabled, isLoading, isInterruptible, clickAction, icon, isIconOnly, width, children, tooltip, endContent, href, as, target, rel
|
|
15
15
|
*/
|
|
16
16
|
import { type ReactNode } from 'react';
|
|
17
17
|
import type { BaseProps } from '../BaseProps';
|
|
18
|
+
import type { SizeValue } from '../utils/types';
|
|
18
19
|
import * as stylex from '@stylexjs/stylex';
|
|
19
20
|
import type { LinkComponentType } from '../Link/types';
|
|
20
21
|
declare const sizeStyles: Readonly<{
|
|
@@ -122,6 +123,12 @@ export interface ButtonProps extends BaseProps<HTMLButtonElement> {
|
|
|
122
123
|
* @default false
|
|
123
124
|
*/
|
|
124
125
|
isIconOnly?: boolean;
|
|
126
|
+
/**
|
|
127
|
+
* Width of the button. Numbers are treated as pixels, strings are used as-is
|
|
128
|
+
* (e.g. `'100%'` for a full-width button). By default the button sizes to
|
|
129
|
+
* its content.
|
|
130
|
+
*/
|
|
131
|
+
width?: SizeValue;
|
|
125
132
|
/**
|
|
126
133
|
* Optional visible content. When provided, rendered instead of `label` as the
|
|
127
134
|
* visible text (label still serves as the accessible name via aria-label).
|
|
@@ -181,11 +188,12 @@ export interface ButtonProps extends BaseProps<HTMLButtonElement> {
|
|
|
181
188
|
* <Button label="Edit" icon={<PencilIcon />} />
|
|
182
189
|
* <Button label="Messages" endContent={<Badge label={3} />} />
|
|
183
190
|
* <Button label="Edit" icon={<PencilIcon />} endContent={<Badge label="New" />} />
|
|
191
|
+
* <Button label="Sign in" variant="primary" width="100%" />
|
|
184
192
|
* <Button label="Visit site" href="https://example.com" variant="primary" />
|
|
185
193
|
* <Button label="Open in new tab" href="https://example.com" target="_blank" rel="noopener noreferrer" />
|
|
186
194
|
* ```
|
|
187
195
|
*/
|
|
188
|
-
export declare function Button({ label, variant, size: sizeProp, type, isDisabled, isLoading, isInterruptible, clickAction, icon, isIconOnly, children, endContent, tooltip, href, as, target, rel, xstyle, className, style, ref, ...props }: ButtonProps): ReactNode;
|
|
196
|
+
export declare function Button({ label, variant, size: sizeProp, type, isDisabled, isLoading, isInterruptible, clickAction, icon, isIconOnly, width, children, endContent, tooltip, href, as, target, rel, xstyle, className, style, ref, ...props }: ButtonProps): ReactNode;
|
|
189
197
|
export declare namespace Button {
|
|
190
198
|
var displayName: string;
|
|
191
199
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAwB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAqB3C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"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"}
|
package/dist/Button/Button.js
CHANGED
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
* - /apps/storybook/stories/Button.stories.tsx (storybook stories)
|
|
16
16
|
* - /packages/cli/templates/blocks/components/Button/ (showcase blocks)
|
|
17
17
|
*
|
|
18
|
-
* Last synced props: label, variant, size, isDisabled, isLoading, isInterruptible, clickAction, icon, isIconOnly, children, tooltip, endContent, href, as, target, rel
|
|
18
|
+
* Last synced props: label, variant, size, isDisabled, isLoading, isInterruptible, clickAction, icon, isIconOnly, width, children, tooltip, endContent, href, as, target, rel
|
|
19
19
|
*/
|
|
20
20
|
import { useRef, useTransition } from 'react';
|
|
21
21
|
import * as stylex from '@stylexjs/stylex';
|
|
@@ -98,6 +98,17 @@ const styles = {
|
|
|
98
98
|
$$css: true
|
|
99
99
|
}
|
|
100
100
|
};
|
|
101
|
+
|
|
102
|
+
// Dynamic style for the consumer-controlled button width. Numbers are treated
|
|
103
|
+
// as pixels by StyleX; strings (e.g. '100%') are used as-is.
|
|
104
|
+
const dynamicStyles = {
|
|
105
|
+
width: width => [{
|
|
106
|
+
kzqmXN: width != null ? "x5lhr3w" : width,
|
|
107
|
+
$$css: true
|
|
108
|
+
}, {
|
|
109
|
+
"--x-width": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(width)
|
|
110
|
+
}]
|
|
111
|
+
};
|
|
101
112
|
const sizeStyles = {
|
|
102
113
|
sm: {
|
|
103
114
|
kZKoxP: "x6k0iem",
|
|
@@ -310,6 +321,7 @@ const groupStyles = {
|
|
|
310
321
|
* <Button label="Edit" icon={<PencilIcon />} />
|
|
311
322
|
* <Button label="Messages" endContent={<Badge label={3} />} />
|
|
312
323
|
* <Button label="Edit" icon={<PencilIcon />} endContent={<Badge label="New" />} />
|
|
324
|
+
* <Button label="Sign in" variant="primary" width="100%" />
|
|
313
325
|
* <Button label="Visit site" href="https://example.com" variant="primary" />
|
|
314
326
|
* <Button label="Open in new tab" href="https://example.com" target="_blank" rel="noopener noreferrer" />
|
|
315
327
|
* ```
|
|
@@ -325,6 +337,7 @@ export function Button({
|
|
|
325
337
|
clickAction,
|
|
326
338
|
icon,
|
|
327
339
|
isIconOnly = false,
|
|
340
|
+
width,
|
|
328
341
|
children,
|
|
329
342
|
endContent,
|
|
330
343
|
tooltip,
|
|
@@ -417,7 +430,7 @@ export function Button({
|
|
|
417
430
|
} : null;
|
|
418
431
|
|
|
419
432
|
// Shared StyleX props for both button and link rendering
|
|
420
|
-
const sharedStylexProps = stylex.props(styles.base, sizeStyles[size], variants[variant], isIconOnly && styles.iconOnly, buttonDisabled && styles.disabled, useAriaDisabled && styles.ariaDisabled, renderAsLink && styles.link, !buttonGroup && styles.pressable, buttonGroup && (buttonGroup.orientation === 'horizontal' ? groupStyles.horizontal : groupStyles.vertical), buttonGroup && (variant === 'primary' || variant === 'destructive') && (buttonGroup.orientation === 'horizontal' ? groupStyles.onSolidHorizontal : groupStyles.onSolidVertical), xstyle);
|
|
433
|
+
const sharedStylexProps = stylex.props(styles.base, sizeStyles[size], variants[variant], isIconOnly && styles.iconOnly, buttonDisabled && styles.disabled, useAriaDisabled && styles.ariaDisabled, renderAsLink && styles.link, !buttonGroup && styles.pressable, buttonGroup && (buttonGroup.orientation === 'horizontal' ? groupStyles.horizontal : groupStyles.vertical), buttonGroup && (variant === 'primary' || variant === 'destructive') && (buttonGroup.orientation === 'horizontal' ? groupStyles.onSolidHorizontal : groupStyles.onSolidVertical), width != null && dynamicStyles.width(width), xstyle);
|
|
421
434
|
const sharedMergedProps = mergeProps(themeProps('button', {
|
|
422
435
|
variant,
|
|
423
436
|
size
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../src/Calendar/Calendar.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../src/Calendar/Calendar.tsx"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA8C5C,YAAY,EACV,aAAa,EACb,SAAS,EACT,aAAa,EACb,SAAS,GACV,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EACV,aAAa,EACb,SAAS,EACT,aAAa,EACb,SAAS,EACV,MAAM,oBAAoB,CAAC;AAK5B,+CAA+C;AAE/C,MAAM,WAAW,cAAc;IAC7B,wEAAwE;IACxE,UAAU,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;CAC3C;AAID,UAAU,iBAAkB,SAAQ,IAAI,CACtC,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,GAAG,cAAc,CAC5B;IACC,kDAAkD;IAClD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,qDAAqD;IACrD,SAAS,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACtC,+CAA+C;IAC/C,cAAc,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IAEvB,4CAA4C;IAC5C,GAAG,CAAC,EAAE,aAAa,CAAC;IAEpB,4CAA4C;IAC5C,GAAG,CAAC,EAAE,aAAa,CAAC;IAEpB;;;OAGG;IACH,eAAe,CAAC,EAAE,aAAa,CAAC,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC;IAEzD;;;OAGG;IACH,SAAS,CAAC,EAAE,aAAa,CAAC;IAE1B,yDAAyD;IACzD,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,aAAa,KAAK,IAAI,CAAC;IAEvD;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;;;OAIG;IACH,YAAY,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;CAC1C;AAID,UAAU,mBAAoB,SAAQ,iBAAiB;IACrD,qBAAqB;IACrB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,aAAa,CAAC;IAE7B,qCAAqC;IACrC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,IAAI,KAAK,IAAI,CAAC;CAC9D;AAED,UAAU,kBAAmB,SAAQ,iBAAiB;IACpD,qBAAqB;IACrB,IAAI,EAAE,OAAO,CAAC;IAEd,0BAA0B;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CACvC;AAED,MAAM,MAAM,aAAa,GAAG,mBAAmB,GAAG,kBAAkB,CAAC;AAMrE;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CAAC,EAAC,GAAG,EAAE,GAAG,KAAK,EAAC,EAAE,aAAa,+BAiUtD;yBAjUe,QAAQ"}
|
|
@@ -16,11 +16,11 @@
|
|
|
16
16
|
* - /apps/storybook/stories/Calendar.stories.tsx (storybook stories)
|
|
17
17
|
* - /packages/cli/templates/blocks/components/Calendar/ (showcase blocks)
|
|
18
18
|
*/
|
|
19
|
-
import { useState, useMemo, useCallback, useEffect, useImperativeHandle } from 'react';
|
|
19
|
+
import { useState, useMemo, useCallback, useEffect, useImperativeHandle, useRef } from 'react';
|
|
20
20
|
import * as stylex from '@stylexjs/stylex';
|
|
21
21
|
import { Button } from "../Button/index.js";
|
|
22
22
|
import { Icon } from "../Icon/index.js";
|
|
23
|
-
import { useGridFocus } from "../hooks/index.js";
|
|
23
|
+
import { useAnnounce, useGridFocus } from "../hooks/index.js";
|
|
24
24
|
import { useCalendarDays, useCalendarConstraints } from "./hooks/index.js";
|
|
25
25
|
import { calendarStyles, monthGridStyles, dayCellStyles, dayCellTheme } from "./styles.js";
|
|
26
26
|
import { plainDateFromISO, plainDateToISO, plainDateToDate, plainDateToday, plainDateSetFirstOfMonth, plainDateAddMonths, plainDateAddDays, plainDateIsBefore, plainDateIsEqual, plainDateGetWeekNumber, plainDateFormat, DATE_FORMAT_WITH_WEEKDAY, DATE_FORMAT_MONTH_YEAR } from "../utils/plainDate.js";
|
|
@@ -160,6 +160,25 @@ export function Calendar({
|
|
|
160
160
|
return visibleMonths.map(m => plainDateFormat(m, DATE_FORMAT_MONTH_YEAR)).join(' – ');
|
|
161
161
|
}, [visibleMonths, numberOfMonths]);
|
|
162
162
|
|
|
163
|
+
// Announce the newly visible month to screen readers whenever it changes.
|
|
164
|
+
// The visible month label (`<span>`) carries no live semantics, so paging the
|
|
165
|
+
// grid — via the header prev/next buttons, keyboard grid paging (arrow keys
|
|
166
|
+
// across a month boundary, PageUp/PageDown), the `navigateTo` handle, or a
|
|
167
|
+
// controlled `focusDate` change — otherwise updates the grid silently. Keying
|
|
168
|
+
// off `monthYearLabel` reuses the existing single-/multi-month formatting and
|
|
169
|
+
// only fires when the visible month actually changes (so selecting a date,
|
|
170
|
+
// which does not move the grid, stays silent). The first-render guard avoids
|
|
171
|
+
// announcing the initial month on mount.
|
|
172
|
+
const announce = useAnnounce();
|
|
173
|
+
const isInitialRenderRef = useRef(true);
|
|
174
|
+
useEffect(() => {
|
|
175
|
+
if (isInitialRenderRef.current) {
|
|
176
|
+
isInitialRenderRef.current = false;
|
|
177
|
+
return;
|
|
178
|
+
}
|
|
179
|
+
announce(monthYearLabel);
|
|
180
|
+
}, [monthYearLabel, announce]);
|
|
181
|
+
|
|
163
182
|
// Determine if prev/next navigation is possible based on min/max
|
|
164
183
|
const canNavigatePrevious = useMemo(() => {
|
|
165
184
|
if (!min) {
|
package/dist/Layer/useLayer.d.ts
CHANGED
|
@@ -215,6 +215,16 @@ export interface FixedLayerReturn {
|
|
|
215
215
|
*/
|
|
216
216
|
render: (children: ReactNode, props: FixedRenderProps) => ReactNode;
|
|
217
217
|
}
|
|
218
|
+
/**
|
|
219
|
+
* Compute the `position-try-fallbacks` list for a placement/alignment pair.
|
|
220
|
+
*
|
|
221
|
+
* Flips alone cannot rescue a centered layer — flipping along the alignment
|
|
222
|
+
* axis maps center → center, so overflow on that axis renders clipped
|
|
223
|
+
* (#3671). Centered alignments therefore append span-based fallbacks letting
|
|
224
|
+
* the browser slide the layer along the alignment axis as a last resort
|
|
225
|
+
* (same-side spans first). Flips already resolve non-centered alignments.
|
|
226
|
+
*/
|
|
227
|
+
export declare function getPositionTryFallbacks(placement?: LayerPlacement, alignment?: LayerAlignment): string;
|
|
218
228
|
/**
|
|
219
229
|
* Core layer hook that handles popover behavior and positioning.
|
|
220
230
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useLayer.d.ts","sourceRoot":"","sources":["../../src/Layer/useLayer.tsx"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useLayer.d.ts","sourceRoot":"","sources":["../../src/Layer/useLayer.tsx"],"names":[],"mappings":"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"}
|
package/dist/Layer/useLayer.js
CHANGED
|
@@ -117,6 +117,28 @@ function getPositionArea(placement = 'above', alignment = 'center') {
|
|
|
117
117
|
return inline; // center
|
|
118
118
|
}
|
|
119
119
|
|
|
120
|
+
/**
|
|
121
|
+
* Compute the `position-try-fallbacks` list for a placement/alignment pair.
|
|
122
|
+
*
|
|
123
|
+
* Flips alone cannot rescue a centered layer — flipping along the alignment
|
|
124
|
+
* axis maps center → center, so overflow on that axis renders clipped
|
|
125
|
+
* (#3671). Centered alignments therefore append span-based fallbacks letting
|
|
126
|
+
* the browser slide the layer along the alignment axis as a last resort
|
|
127
|
+
* (same-side spans first). Flips already resolve non-centered alignments.
|
|
128
|
+
*/
|
|
129
|
+
export function getPositionTryFallbacks(placement = 'above', alignment = 'center') {
|
|
130
|
+
const flips = 'flip-block, flip-inline, flip-block flip-inline';
|
|
131
|
+
if (alignment !== 'center') {
|
|
132
|
+
return flips;
|
|
133
|
+
}
|
|
134
|
+
if (placement === 'above' || placement === 'below') {
|
|
135
|
+
const [same, opposite] = placement === 'above' ? ['top', 'bottom'] : ['bottom', 'top'];
|
|
136
|
+
return `${flips}, ${same} span-left, ${same} span-right, ${opposite} span-left, ${opposite} span-right`;
|
|
137
|
+
}
|
|
138
|
+
const [same, opposite] = placement === 'start' ? ['left', 'right'] : ['right', 'left'];
|
|
139
|
+
return `${flips}, ${same} span-top, ${same} span-bottom, ${opposite} span-top, ${opposite} span-bottom`;
|
|
140
|
+
}
|
|
141
|
+
|
|
120
142
|
/**
|
|
121
143
|
* Core layer hook that handles popover behavior and positioning.
|
|
122
144
|
*
|
|
@@ -281,7 +303,7 @@ export function useLayer(options) {
|
|
|
281
303
|
} : {
|
|
282
304
|
positionAnchor: anchorId,
|
|
283
305
|
positionArea: getPositionArea(placement, alignment),
|
|
284
|
-
positionTryFallbacks:
|
|
306
|
+
positionTryFallbacks: getPositionTryFallbacks(placement, alignment)
|
|
285
307
|
};
|
|
286
308
|
const stylexResult = stylex.props(styles.base, xstyle);
|
|
287
309
|
const combinedClassName = extraClassName ? `${extraClassName} ${stylexResult.className ?? ''}` : stylexResult.className;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Selector.d.ts","sourceRoot":"","sources":["../../src/Selector/Selector.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EASZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAU5D,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"Selector.d.ts","sourceRoot":"","sources":["../../src/Selector/Selector.tsx"],"names":[],"mappings":"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"}
|
|
@@ -24,6 +24,7 @@ import { Field, inputStatusBorderStyles, inputStatusHoverShadowStyles, inputWrap
|
|
|
24
24
|
import { Divider } from "../Divider/index.js";
|
|
25
25
|
import { layerAnimations } from "../Layer/layerAnimations.stylex.js";
|
|
26
26
|
import { Spinner } from "../Spinner/index.js";
|
|
27
|
+
import { useAnnounce } from "../hooks/useAnnounce.js";
|
|
27
28
|
import "../theme/tokens.stylex.js";
|
|
28
29
|
import { colorVars, sizeVars, spacingVars, radiusVars, durationVars, easeVars, typographyVars, fontWeightVars, typeScaleVars, borderVars } from "../theme/tokens.stylex.js";
|
|
29
30
|
import { isOptionData, isDivider, isSection, normalizeOption, getSelectableOptions } from "./utils.js";
|
|
@@ -165,6 +166,18 @@ function DefaultOption({
|
|
|
165
166
|
});
|
|
166
167
|
}
|
|
167
168
|
|
|
169
|
+
// Case-insensitive substring filter over the selectable options. Shared by the
|
|
170
|
+
// `filteredItems` memo (rendering) and the search-change handler, which needs
|
|
171
|
+
// the count for the *next* query synchronously to announce it exactly once per
|
|
172
|
+
// keystroke rather than reacting to state in an effect.
|
|
173
|
+
function filterOptionsByQuery(items, query) {
|
|
174
|
+
if (!query) {
|
|
175
|
+
return items;
|
|
176
|
+
}
|
|
177
|
+
const q = query.toLowerCase();
|
|
178
|
+
return items.filter(item => (item.label ?? item.value).toLowerCase().includes(q));
|
|
179
|
+
}
|
|
180
|
+
|
|
168
181
|
/**
|
|
169
182
|
* A selector/dropdown component for choosing from a list of options.
|
|
170
183
|
*
|
|
@@ -256,13 +269,7 @@ export function Selector(props) {
|
|
|
256
269
|
const selectableItems = useMemo(() => getSelectableOptions(options), [options]);
|
|
257
270
|
|
|
258
271
|
// Filter items by search query
|
|
259
|
-
const filteredItems = useMemo(() =>
|
|
260
|
-
if (!searchQuery) {
|
|
261
|
-
return selectableItems;
|
|
262
|
-
}
|
|
263
|
-
const query = searchQuery.toLowerCase();
|
|
264
|
-
return selectableItems.filter(item => (item.label ?? item.value).toLowerCase().includes(query));
|
|
265
|
-
}, [selectableItems, searchQuery]);
|
|
272
|
+
const filteredItems = useMemo(() => filterOptionsByQuery(selectableItems, searchQuery), [selectableItems, searchQuery]);
|
|
266
273
|
|
|
267
274
|
// Find selected item and its index for positioning
|
|
268
275
|
const selectedItemIndex = useMemo(() => {
|
|
@@ -275,11 +282,20 @@ export function Selector(props) {
|
|
|
275
282
|
// Ref for listbox to measure selected item position
|
|
276
283
|
const listboxRef = useRef(null);
|
|
277
284
|
|
|
285
|
+
// Announce match counts / "No results found" politely as the user types, so
|
|
286
|
+
// screen-reader users hear how many options remain. Filtering was previously
|
|
287
|
+
// silent (comboboxes-7). Mirrors BaseTypeahead, which announces from its
|
|
288
|
+
// query-change callback (not a reactive effect) via the same useAnnounce hook.
|
|
289
|
+
const announce = useAnnounce();
|
|
290
|
+
|
|
278
291
|
// Layer for dropdown positioning
|
|
279
292
|
const handleLayerHide = useCallback(() => {
|
|
280
293
|
setSearchQuery('');
|
|
294
|
+
// Clear any lingering result count when the popover closes so stale status
|
|
295
|
+
// text does not linger in the a11y tree.
|
|
296
|
+
announce('');
|
|
281
297
|
triggerRef.current?.focus();
|
|
282
|
-
}, []);
|
|
298
|
+
}, [announce]);
|
|
283
299
|
const popover = usePopover({
|
|
284
300
|
onHide: handleLayerHide,
|
|
285
301
|
hasLightDismiss: true,
|
|
@@ -298,6 +314,22 @@ export function Selector(props) {
|
|
|
298
314
|
// eslint-disable-next-line @eslint-react/exhaustive-deps -- mount-only: isDefaultOpen is not reactive
|
|
299
315
|
}, []);
|
|
300
316
|
|
|
317
|
+
// Announce the filtered result count from the query-change handler (matching
|
|
318
|
+
// BaseTypeahead) rather than a reactive effect: computing the count for the
|
|
319
|
+
// next query here fires the announcement exactly once per keystroke and does
|
|
320
|
+
// not re-speak on unrelated re-renders.
|
|
321
|
+
const handleSearchChange = useCallback(event => {
|
|
322
|
+
const nextQuery = event.target.value;
|
|
323
|
+
setSearchQuery(nextQuery);
|
|
324
|
+
if (nextQuery.length === 0) {
|
|
325
|
+
// Emptying the query clears the region rather than announcing a count.
|
|
326
|
+
announce('');
|
|
327
|
+
return;
|
|
328
|
+
}
|
|
329
|
+
const count = filterOptionsByQuery(selectableItems, nextQuery).length;
|
|
330
|
+
announce(count === 0 ? 'No results found' : `${count} result${count === 1 ? '' : 's'}`);
|
|
331
|
+
}, [announce, selectableItems]);
|
|
332
|
+
|
|
301
333
|
// Calculate offset to position selected item over trigger. Explicit
|
|
302
334
|
// placement opts out of the selector-specific overlay behavior and uses the
|
|
303
335
|
// standard layer positioning API instead.
|
|
@@ -412,7 +444,7 @@ export function Selector(props) {
|
|
|
412
444
|
"aria-label": t('@astryx.selector.searchOptions'),
|
|
413
445
|
type: "text",
|
|
414
446
|
value: searchQuery,
|
|
415
|
-
onChange:
|
|
447
|
+
onChange: handleSearchChange,
|
|
416
448
|
onKeyDown: e => {
|
|
417
449
|
// Arrow keys navigate options; Enter selects; Escape/Tab close.
|
|
418
450
|
// Home/End are left to the input for caret movement.
|
|
@@ -426,7 +458,7 @@ export function Selector(props) {
|
|
|
426
458
|
}
|
|
427
459
|
})
|
|
428
460
|
});
|
|
429
|
-
}, [hasSearch, searchId, listboxId, searchQuery, searchPlaceholder, onKeyDown, popover.isOpen, highlightedIndex, getItemId, t]);
|
|
461
|
+
}, [hasSearch, searchId, listboxId, searchQuery, searchPlaceholder, handleSearchChange, onKeyDown, popover.isOpen, highlightedIndex, getItemId, t]);
|
|
430
462
|
|
|
431
463
|
// Render an individual item
|
|
432
464
|
const renderItem = useCallback((item, flatIndex) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseTable.d.ts","sourceRoot":"","sources":["../../src/Table/BaseTable.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAe,KAAK,YAAY,EAAkB,KAAK,GAAG,EAAC,MAAM,OAAO,CAAC;AAGhF,OAAO,KAAK,EACV,cAAc,EAYf,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"BaseTable.d.ts","sourceRoot":"","sources":["../../src/Table/BaseTable.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAe,KAAK,YAAY,EAAkB,KAAK,GAAG,EAAC,MAAM,OAAO,CAAC;AAGhF,OAAO,KAAK,EACV,cAAc,EAYf,MAAM,SAAS,CAAC;AA2jBjB;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,SAAS,EAAqB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC3E,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG;IAAC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAA;CAAC,KACrD,YAAY,CAAC"}
|
package/dist/Table/BaseTable.js
CHANGED
|
@@ -116,7 +116,7 @@ function TableRowInner({
|
|
|
116
116
|
}
|
|
117
117
|
const initialBodyCellRenderProps = {
|
|
118
118
|
htmlProps: initialCellHtmlProps,
|
|
119
|
-
|
|
119
|
+
xstyle: [],
|
|
120
120
|
columnIndex,
|
|
121
121
|
columns: columns
|
|
122
122
|
};
|
|
@@ -141,7 +141,7 @@ function TableRowInner({
|
|
|
141
141
|
return /*#__PURE__*/_jsx(CellComponent, {
|
|
142
142
|
...cellRenderProps.htmlProps,
|
|
143
143
|
contextMenuActions: cellRenderProps.contextMenuActions,
|
|
144
|
-
xstyle: cellRenderProps.
|
|
144
|
+
xstyle: cellRenderProps.xstyle,
|
|
145
145
|
children: content
|
|
146
146
|
}, col.key);
|
|
147
147
|
});
|
|
@@ -149,7 +149,7 @@ function TableRowInner({
|
|
|
149
149
|
// Apply plugin transforms for row (with pre-rendered children)
|
|
150
150
|
const rowRenderProps = applyPlugins(plugins, p => p.transformBodyRow, {
|
|
151
151
|
htmlProps: {},
|
|
152
|
-
|
|
152
|
+
xstyle: [],
|
|
153
153
|
children: /*#__PURE__*/_jsx(_Fragment, {
|
|
154
154
|
children: cells
|
|
155
155
|
})
|
|
@@ -157,7 +157,7 @@ function TableRowInner({
|
|
|
157
157
|
const row = /*#__PURE__*/_jsx(RowComponent, {
|
|
158
158
|
ref: rowRenderProps.ref,
|
|
159
159
|
...rowRenderProps.htmlProps,
|
|
160
|
-
xstyle: rowRenderProps.
|
|
160
|
+
xstyle: rowRenderProps.xstyle,
|
|
161
161
|
children: rowRenderProps.children
|
|
162
162
|
}, rowKey);
|
|
163
163
|
return row;
|
|
@@ -239,7 +239,11 @@ function BaseTableInner({
|
|
|
239
239
|
textOverflow = 'wrap',
|
|
240
240
|
scrollWrapper: ScrollWrapper,
|
|
241
241
|
emptyState,
|
|
242
|
-
|
|
242
|
+
xstyle,
|
|
243
|
+
className,
|
|
244
|
+
style,
|
|
245
|
+
ref,
|
|
246
|
+
...rest
|
|
243
247
|
}) {
|
|
244
248
|
const t = useTranslator();
|
|
245
249
|
// Use stable empty array when no plugins provided
|
|
@@ -275,7 +279,7 @@ function BaseTableInner({
|
|
|
275
279
|
htmlProps: {
|
|
276
280
|
...userTableProps
|
|
277
281
|
},
|
|
278
|
-
|
|
282
|
+
xstyle: children ? [styles.table, styles.tableAutoLayout] : [styles.table]
|
|
279
283
|
});
|
|
280
284
|
|
|
281
285
|
// --- Plugin pipeline: header cells ---
|
|
@@ -297,7 +301,7 @@ function BaseTableInner({
|
|
|
297
301
|
}
|
|
298
302
|
const initialHeaderRenderProps = {
|
|
299
303
|
htmlProps: initialHeaderHtmlProps,
|
|
300
|
-
|
|
304
|
+
xstyle: [],
|
|
301
305
|
content: headerContent,
|
|
302
306
|
columnIndex,
|
|
303
307
|
columns: resolvedColumns
|
|
@@ -341,7 +345,7 @@ function BaseTableInner({
|
|
|
341
345
|
...mergedHtmlProps,
|
|
342
346
|
...headerTitleProp,
|
|
343
347
|
contextMenuActions: cellRenderProps.contextMenuActions,
|
|
344
|
-
xstyle: cellRenderProps.
|
|
348
|
+
xstyle: cellRenderProps.xstyle,
|
|
345
349
|
children: headerInner
|
|
346
350
|
}, col.key);
|
|
347
351
|
});
|
|
@@ -349,7 +353,7 @@ function BaseTableInner({
|
|
|
349
353
|
// --- Plugin pipeline: header row ---
|
|
350
354
|
const headerRowRenderProps = applyPlugins(plugins, p => p.transformHeaderRow, {
|
|
351
355
|
htmlProps: {},
|
|
352
|
-
|
|
356
|
+
xstyle: [],
|
|
353
357
|
children: /*#__PURE__*/_jsx(_Fragment, {
|
|
354
358
|
children: headerCells
|
|
355
359
|
})
|
|
@@ -358,21 +362,28 @@ function BaseTableInner({
|
|
|
358
362
|
// --- Render ---
|
|
359
363
|
const hasData = data != null && data.length > 0;
|
|
360
364
|
const hasColumns = resolvedColumns.length > 0;
|
|
365
|
+
|
|
366
|
+
// Style precedence: deprecated tableProps.style < consumer style < the
|
|
367
|
+
// computed column min-width (structural — derived from column defs, so it
|
|
368
|
+
// must win when present; when absent, a consumer minWidth survives).
|
|
361
369
|
const tableStyle = {
|
|
362
370
|
...tableRenderProps.htmlProps.style,
|
|
363
|
-
|
|
371
|
+
...style,
|
|
372
|
+
...(resolvedWidths.tableMinWidth > 0 ? {
|
|
373
|
+
minWidth: `${resolvedWidths.tableMinWidth}px`
|
|
374
|
+
} : null)
|
|
364
375
|
};
|
|
365
376
|
let tableElement = /*#__PURE__*/_jsx("table", {
|
|
366
377
|
ref: ref,
|
|
367
378
|
...tableRenderProps.htmlProps,
|
|
368
|
-
...mergeProps(themeProps('base-table'), stylex.props(...tableRenderProps.
|
|
369
|
-
|
|
379
|
+
...mergeProps(themeProps('base-table'), stylex.props(...tableRenderProps.xstyle, xstyle), [tableRenderProps.htmlProps.className, className].filter(Boolean).join(' ') || undefined, tableStyle),
|
|
380
|
+
...rest,
|
|
370
381
|
children: children ? children : /*#__PURE__*/_jsxs(_Fragment, {
|
|
371
382
|
children: [hasColumns && /*#__PURE__*/_jsx(TableHeader, {
|
|
372
383
|
children: /*#__PURE__*/_jsx(RowComponent, {
|
|
373
384
|
...headerRowRenderProps.htmlProps,
|
|
374
385
|
isHeaderRow: true,
|
|
375
|
-
xstyle: headerRowRenderProps.
|
|
386
|
+
xstyle: headerRowRenderProps.xstyle,
|
|
376
387
|
children: headerRowRenderProps.children
|
|
377
388
|
})
|
|
378
389
|
}), /*#__PURE__*/_jsx(TableBody, {
|
|
@@ -412,11 +423,11 @@ function BaseTableInner({
|
|
|
412
423
|
if (ScrollWrapper) {
|
|
413
424
|
const scrollWrapperRenderProps = applyPlugins(plugins, p => p.transformScrollWrapper, {
|
|
414
425
|
htmlProps: {},
|
|
415
|
-
|
|
426
|
+
xstyle: []
|
|
416
427
|
});
|
|
417
428
|
tableElement = /*#__PURE__*/_jsx(ScrollWrapper, {
|
|
418
429
|
htmlProps: scrollWrapperRenderProps.htmlProps,
|
|
419
|
-
|
|
430
|
+
xstyle: scrollWrapperRenderProps.xstyle,
|
|
420
431
|
beforeTable: scrollWrapperRenderProps.beforeTable,
|
|
421
432
|
afterTable: scrollWrapperRenderProps.afterTable,
|
|
422
433
|
children: tableElement
|
package/dist/Table/Table.js
CHANGED
|
@@ -72,7 +72,7 @@ const scrollWrapperStyles = {
|
|
|
72
72
|
function TableScrollWrapper({
|
|
73
73
|
children,
|
|
74
74
|
htmlProps,
|
|
75
|
-
|
|
75
|
+
xstyle: pluginStyles,
|
|
76
76
|
beforeTable,
|
|
77
77
|
afterTable
|
|
78
78
|
}) {
|
|
@@ -113,7 +113,7 @@ function buildTableStylePlugin() {
|
|
|
113
113
|
...props.htmlProps,
|
|
114
114
|
className: existingClass ? `${existingClass} ${tableClass}` : tableClass
|
|
115
115
|
},
|
|
116
|
-
|
|
116
|
+
xstyle: [...props.xstyle, tableStyles.base]
|
|
117
117
|
};
|
|
118
118
|
}
|
|
119
119
|
};
|
|
@@ -595,7 +595,7 @@ export function useTableColumnResize(config) {
|
|
|
595
595
|
overlay: /*#__PURE__*/_jsxs(_Fragment, {
|
|
596
596
|
children: [props.overlay, handle]
|
|
597
597
|
}),
|
|
598
|
-
|
|
598
|
+
xstyle: [...props.xstyle, headerCellRelative.base]
|
|
599
599
|
};
|
|
600
600
|
}
|
|
601
601
|
}), [columnWidths, globalMinWidth, maxWidth, resizableColumns, measureRef]);
|
|
@@ -199,7 +199,7 @@ export function useTableGroupedRows(config) {
|
|
|
199
199
|
onClick: toggle,
|
|
200
200
|
'aria-expanded': !collapsed
|
|
201
201
|
},
|
|
202
|
-
|
|
202
|
+
xstyle: [...props.xstyle, styles.headerRow],
|
|
203
203
|
children:
|
|
204
204
|
/*#__PURE__*/
|
|
205
205
|
// colSpan larger than the column count is clamped by the browser
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTableRowExpansion.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/rowExpansion/useTableRowExpansion.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EACV,WAAW,EAKZ,MAAM,aAAa,CAAC;AAMrB;;;;;;;GAOG;AACH,MAAM,WAAW,0BAA0B,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC3E,0CAA0C;IAC1C,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC1B,gDAAgD;IAChD,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,kDAAkD;IAClD,SAAS,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAC/B,sEAAsE;IACtE,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC;IAC9B,kEAAkE;IAClE,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAC/B,uFAAuF;IACvF,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC;IAC3C;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC;IAC1C,2DAA2D;IAC3D,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC/C;AAED;;;;;;;GAOG;AACH,MAAM,WAAW,+BAA+B,CAC9C,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAEjC,mCAAmC;IACnC,QAAQ,EAAE,CAAC,EAAE,CAAC;IACd,qEAAqE;IACrE,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC;IAC9B,kDAAkD;IAClD,SAAS,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAC/B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC;IAC3C,qDAAqD;IACrD,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC1B,+CAA+C;IAC/C,eAAe,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;CACpE;AAED,MAAM,WAAW,+BAA+B,CAC9C,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAEjC,qEAAqE;IACrE,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,4DAA4D;IAC5D,eAAe,EAAE,0BAA0B,CAAC,CAAC,CAAC,CAAC;CAChD;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,yBAAyB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,EAC3E,QAAQ,EACR,WAAW,EACX,SAAS,EACT,mBAAmB,EACnB,YAAY,EACZ,eAAe,GAChB,EAAE,+BAA+B,CAAC,CAAC,CAAC,GAAG,+BAA+B,CAAC,CAAC,CAAC,CAyHzE;AAuGD,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACpE,MAAM,EAAE,0BAA0B,CAAC,CAAC,CAAC,GACpC,WAAW,CAAC,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"useTableRowExpansion.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/rowExpansion/useTableRowExpansion.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EACV,WAAW,EAKZ,MAAM,aAAa,CAAC;AAMrB;;;;;;;GAOG;AACH,MAAM,WAAW,0BAA0B,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC3E,0CAA0C;IAC1C,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC1B,gDAAgD;IAChD,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,kDAAkD;IAClD,SAAS,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAC/B,sEAAsE;IACtE,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC;IAC9B,kEAAkE;IAClE,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAC/B,uFAAuF;IACvF,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC;IAC3C;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC;IAC1C,2DAA2D;IAC3D,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC/C;AAED;;;;;;;GAOG;AACH,MAAM,WAAW,+BAA+B,CAC9C,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAEjC,mCAAmC;IACnC,QAAQ,EAAE,CAAC,EAAE,CAAC;IACd,qEAAqE;IACrE,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC;IAC9B,kDAAkD;IAClD,SAAS,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAC/B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC;IAC3C,qDAAqD;IACrD,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC1B,+CAA+C;IAC/C,eAAe,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;CACpE;AAED,MAAM,WAAW,+BAA+B,CAC9C,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAEjC,qEAAqE;IACrE,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,4DAA4D;IAC5D,eAAe,EAAE,0BAA0B,CAAC,CAAC,CAAC,CAAC;CAChD;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,yBAAyB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,EAC3E,QAAQ,EACR,WAAW,EACX,SAAS,EACT,mBAAmB,EACnB,YAAY,EACZ,eAAe,GAChB,EAAE,+BAA+B,CAAC,CAAC,CAAC,GAAG,+BAA+B,CAAC,CAAC,CAAC,CAyHzE;AAuGD,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACpE,MAAM,EAAE,0BAA0B,CAAC,CAAC,CAAC,GACpC,WAAW,CAAC,CAAC,CAAC,CAwOhB"}
|
|
@@ -393,7 +393,7 @@ export function useTableRowExpansion(config) {
|
|
|
393
393
|
...props.htmlProps,
|
|
394
394
|
onClick: () => onToggle(key)
|
|
395
395
|
},
|
|
396
|
-
|
|
396
|
+
xstyle: [...props.xstyle, expansionStyles.clickableRow]
|
|
397
397
|
};
|
|
398
398
|
}
|
|
399
399
|
}), [expandedKeys, getRowKey, onToggle, getChildren, getDepth, getIsItemExpandable, hasRowClickExpansion, isAllExpanded, onToggleExpandAll, expansionColumn, t]);
|
|
@@ -307,7 +307,7 @@ export function useTableStickyColumns(config) {
|
|
|
307
307
|
...offsetStyle
|
|
308
308
|
}
|
|
309
309
|
},
|
|
310
|
-
|
|
310
|
+
xstyle: [...props.xstyle, stickyStyles.cell, stickyStyles.headerCell, side.edge === 'start' ? shadowStyles.start : shadowStyles.end]
|
|
311
311
|
};
|
|
312
312
|
},
|
|
313
313
|
transformBodyCell(props, column) {
|
|
@@ -333,7 +333,7 @@ export function useTableStickyColumns(config) {
|
|
|
333
333
|
...offsetStyle
|
|
334
334
|
}
|
|
335
335
|
},
|
|
336
|
-
|
|
336
|
+
xstyle: [...props.xstyle, stickyStyles.cell, stickyStyles.bodyCell, side.edge === 'start' ? shadowStyles.start : shadowStyles.end]
|
|
337
337
|
};
|
|
338
338
|
},
|
|
339
339
|
transformScrollWrapper(props) {
|