@astryxdesign/core 0.1.3-canary.6d57c8d → 0.1.3-canary.70cd22e
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.map +1 -1
- package/dist/Button/Button.js +29 -8
- package/dist/Calendar/Calendar.d.ts.map +1 -1
- package/dist/Calendar/Calendar.js +43 -19
- package/dist/Calendar/dayCellUtils.d.ts +67 -5
- package/dist/Calendar/dayCellUtils.d.ts.map +1 -1
- package/dist/Calendar/dayCellUtils.js +139 -18
- package/dist/ContextMenu/ContextMenu.d.ts +9 -1
- package/dist/ContextMenu/ContextMenu.d.ts.map +1 -1
- package/dist/ContextMenu/ContextMenu.js +6 -3
- package/dist/Table/BaseTable.d.ts.map +1 -1
- package/dist/Table/BaseTable.js +2 -1
- package/dist/Table/TableCell.d.ts.map +1 -1
- package/dist/Table/TableCell.js +73 -4
- package/dist/Table/index.d.ts +2 -0
- package/dist/Table/index.d.ts.map +1 -1
- package/dist/Table/index.js +1 -0
- package/dist/Table/plugins/rowExpansion/index.d.ts +3 -0
- package/dist/Table/plugins/rowExpansion/index.d.ts.map +1 -0
- package/dist/Table/plugins/rowExpansion/index.js +3 -0
- package/dist/Table/plugins/rowExpansion/useTableRowExpansion.d.ts +90 -0
- package/dist/Table/plugins/rowExpansion/useTableRowExpansion.d.ts.map +1 -0
- package/dist/Table/plugins/rowExpansion/useTableRowExpansion.js +398 -0
- package/dist/Table/tableContextMenu.d.ts +5 -1
- package/dist/Table/tableContextMenu.d.ts.map +1 -1
- package/dist/Table/tableContextMenu.js +10 -3
- package/dist/astryx.css +4 -0
- package/dist/astryx.umd.js +46 -46
- package/dist/astryx.umd.js.map +4 -4
- package/package.json +1 -1
- package/src/Avatar/Avatar.doc.mjs +2 -2
- package/src/Button/Button.tsx +39 -6
- package/src/Calendar/Calendar.test.tsx +79 -0
- package/src/Calendar/Calendar.tsx +53 -21
- package/src/Calendar/dayCellUtils.test.ts +306 -1
- package/src/Calendar/dayCellUtils.ts +206 -13
- package/src/CheckboxInput/CheckboxInput.doc.mjs +2 -2
- package/src/CheckboxList/CheckboxList.doc.mjs +1 -1
- package/src/ContextMenu/ContextMenu.tsx +17 -1
- package/src/DateInput/DateInput.doc.mjs +1 -1
- package/src/DateRangeInput/DateRangeInput.doc.mjs +1 -1
- package/src/DateTimeInput/DateTimeInput.doc.mjs +1 -1
- package/src/Grid/Grid.doc.mjs +3 -3
- package/src/Layout/__tests__/edgeCompensation.test.tsx +72 -0
- package/src/MultiSelector/MultiSelector.doc.mjs +1 -1
- package/src/PowerSearch/PowerSearch.doc.mjs +2 -2
- package/src/RadioList/RadioList.doc.mjs +1 -1
- package/src/SegmentedControl/SegmentedControl.doc.mjs +1 -1
- package/src/Selector/Selector.doc.mjs +1 -1
- package/src/Slider/Slider.doc.mjs +2 -2
- package/src/Switch/Switch.doc.mjs +2 -2
- package/src/Table/BaseTable.tsx +3 -1
- package/src/Table/TableCell.tsx +87 -8
- package/src/Table/index.ts +5 -0
- package/src/Table/plugins/rowExpansion/index.ts +7 -0
- package/src/Table/plugins/rowExpansion/useTableRowExpansion.test.tsx +155 -0
- package/src/Table/plugins/rowExpansion/useTableRowExpansion.tsx +590 -0
- package/src/Table/tableContextMenu.test.tsx +27 -3
- package/src/Table/tableContextMenu.tsx +20 -2
- package/src/Table/useTablePagination.doc.mjs +4 -1
- package/src/Table/useTableRowExpansion.doc.mjs +63 -0
- package/src/Table/useTableSortable.doc.mjs +4 -1
- package/src/TextArea/TextArea.doc.mjs +1 -1
- package/src/TextInput/TextInput.doc.mjs +1 -1
- package/src/TimeInput/TimeInput.doc.mjs +13 -8
- package/src/Tokenizer/Tokenizer.doc.mjs +2 -2
- package/src/Typeahead/Typeahead.doc.mjs +1 -1
- package/src/hooks/useKeyboardHint.doc.mjs +6 -6
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"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
|
|
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
|
@@ -19,15 +19,15 @@
|
|
|
19
19
|
*/
|
|
20
20
|
import { useRef, useTransition } from 'react';
|
|
21
21
|
import * as stylex from '@stylexjs/stylex';
|
|
22
|
+
import { useTooltip } from "../Tooltip/useTooltip.js";
|
|
22
23
|
import "../theme/tokens.stylex.js";
|
|
23
24
|
import { colorVars, sizeVars, spacingVars, radiusVars, borderVars, durationVars, easeVars, fontWeightVars, typeScaleVars } from "../theme/tokens.stylex.js";
|
|
24
|
-
import { Tooltip } from "../Tooltip/Tooltip.js";
|
|
25
25
|
import { Spinner } from "../Spinner/index.js";
|
|
26
26
|
import { VisuallyHidden } from "../VisuallyHidden/index.js";
|
|
27
27
|
import { EDGE_COMP_ATTR } from "../Layout/edgeCompensation.stylex.js";
|
|
28
28
|
import { useSize } from "../SizeContext/SizeContext.js";
|
|
29
29
|
import { useButtonGroup } from "../ButtonGroup/ButtonGroupContext.js";
|
|
30
|
-
import { mergeProps } from "../utils/index.js";
|
|
30
|
+
import { mergeProps, mergeRefs } from "../utils/index.js";
|
|
31
31
|
import { useLinkComponent } from "../Link/useLinkComponent.js";
|
|
32
32
|
import { themeProps } from "../utils/themeProps.js";
|
|
33
33
|
|
|
@@ -339,6 +339,16 @@ export function Button({
|
|
|
339
339
|
// Use aria-disabled when tooltip is present so the button remains focusable
|
|
340
340
|
// for keyboard users to reach the tooltip. Otherwise use native disabled.
|
|
341
341
|
const useAriaDisabled = tooltip != null && buttonDisabled;
|
|
342
|
+
|
|
343
|
+
// Attach tooltip behavior via the hook rather than wrapping the button in a
|
|
344
|
+
// <Tooltip> element. The hook adds hover/focus triggers to the button itself,
|
|
345
|
+
// so no extra DOM node is inserted — the button stays a direct child of its
|
|
346
|
+
// container (no layout shift, and edge-compensation markers remain
|
|
347
|
+
// discoverable through the container's direct-child `:has()` selector).
|
|
348
|
+
const tooltipHook = useTooltip({
|
|
349
|
+
placement: 'above',
|
|
350
|
+
isEnabled: tooltip != null
|
|
351
|
+
});
|
|
342
352
|
const handleClick = e => {
|
|
343
353
|
// The ref guard dedupes fire-once actions. Interruptible callers skip it so
|
|
344
354
|
// a re-click while pending starts a fresh action that interrupts the prior.
|
|
@@ -429,28 +439,41 @@ export function Button({
|
|
|
429
439
|
const ariaLabelProp = needsAriaLabel ? {
|
|
430
440
|
'aria-label': label
|
|
431
441
|
} : null;
|
|
442
|
+
|
|
443
|
+
// When a tooltip is attached via the hook, point aria-describedby at the
|
|
444
|
+
// tooltip content (composing with any consumer-provided value).
|
|
445
|
+
const describedByProp = tooltip != null ? {
|
|
446
|
+
'aria-describedby': [props['aria-describedby'], tooltipHook.describedBy].filter(Boolean).join(' ') || undefined
|
|
447
|
+
} : null;
|
|
448
|
+
|
|
449
|
+
// Merge the consumer ref with the tooltip hook's trigger ref so both point at
|
|
450
|
+
// the same element. mergeRefs tolerates undefined, so this is a no-op for the
|
|
451
|
+
// tooltip side when no tooltip is set.
|
|
452
|
+
const mergedButtonRef = mergeRefs(ref, tooltip != null ? tooltipHook.ref : undefined);
|
|
432
453
|
let element;
|
|
433
454
|
if (renderAsLink) {
|
|
434
455
|
element = /*#__PURE__*/_jsx(LinkComponent, {
|
|
435
|
-
ref:
|
|
456
|
+
ref: mergedButtonRef,
|
|
436
457
|
href: href,
|
|
437
458
|
target: target,
|
|
438
459
|
rel: rel,
|
|
439
460
|
...sharedMergedProps,
|
|
440
461
|
...props,
|
|
441
462
|
...ariaLabelProp,
|
|
463
|
+
...describedByProp,
|
|
442
464
|
...edgeCompAttr,
|
|
443
465
|
onClick: handleClick,
|
|
444
466
|
children: buttonContent
|
|
445
467
|
});
|
|
446
468
|
} else {
|
|
447
469
|
element = /*#__PURE__*/_jsx("button", {
|
|
448
|
-
ref:
|
|
470
|
+
ref: mergedButtonRef,
|
|
449
471
|
type: type,
|
|
450
472
|
disabled: useAriaDisabled ? undefined : buttonDisabled,
|
|
451
473
|
...sharedMergedProps,
|
|
452
474
|
...props,
|
|
453
475
|
...ariaLabelProp,
|
|
476
|
+
...describedByProp,
|
|
454
477
|
...edgeCompAttr,
|
|
455
478
|
"aria-busy": isLoadingState || undefined,
|
|
456
479
|
"aria-disabled": useAriaDisabled || undefined,
|
|
@@ -462,10 +485,8 @@ export function Button({
|
|
|
462
485
|
});
|
|
463
486
|
}
|
|
464
487
|
if (tooltip) {
|
|
465
|
-
return /*#__PURE__*/
|
|
466
|
-
|
|
467
|
-
placement: "above",
|
|
468
|
-
children: element
|
|
488
|
+
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
489
|
+
children: [element, tooltipHook.renderTooltip(tooltip)]
|
|
469
490
|
});
|
|
470
491
|
}
|
|
471
492
|
return element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../src/Calendar/Calendar.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../src/Calendar/Calendar.tsx"],"names":[],"mappings":"AA0BA,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;AAI5B,+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,+BA4RtD;yBA5Re,QAAQ"}
|
|
@@ -25,7 +25,7 @@ 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";
|
|
27
27
|
import { mergeProps } from "../utils/index.js";
|
|
28
|
-
import { computeDayCellState, computeRangeRounding, computePreviewRounding, isEndpoint } from "./dayCellUtils.js";
|
|
28
|
+
import { computeDayCellState, computeRangeRounding, computePreviewRounding, computeDayNeighborContinuity, isEndpoint } from "./dayCellUtils.js";
|
|
29
29
|
|
|
30
30
|
// =============================================================================
|
|
31
31
|
// Types
|
|
@@ -537,22 +537,39 @@ function MonthGrid({
|
|
|
537
537
|
role: "rowheader",
|
|
538
538
|
...stylex.props(monthGridStyles.weekNumber),
|
|
539
539
|
children: weekNum
|
|
540
|
-
}), week.map((day, dayIndex) =>
|
|
541
|
-
day
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
540
|
+
}), week.map((day, dayIndex) => {
|
|
541
|
+
// Whether the previous/next day in this week row continues the
|
|
542
|
+
// highlighted run (range and preview). A disabled or
|
|
543
|
+
// adjacent-month neighbour breaks continuity, so this day gets
|
|
544
|
+
// an end cap on that side (#2715).
|
|
545
|
+
const neighbors = computeDayNeighborContinuity({
|
|
546
|
+
week,
|
|
547
|
+
dayIndex,
|
|
548
|
+
mode,
|
|
549
|
+
rangeStart,
|
|
550
|
+
rangeEnd,
|
|
551
|
+
previewStart,
|
|
552
|
+
previewEnd,
|
|
553
|
+
isDisabled: isDateDisabled
|
|
554
|
+
});
|
|
555
|
+
return /*#__PURE__*/_jsx(DayCell, {
|
|
556
|
+
day: day,
|
|
557
|
+
dayIndex: dayIndex,
|
|
558
|
+
mode: mode,
|
|
559
|
+
selectedDate: selectedDate,
|
|
560
|
+
rangeStart: rangeStart,
|
|
561
|
+
rangeEnd: rangeEnd,
|
|
562
|
+
previewStart: previewStart,
|
|
563
|
+
previewEnd: previewEnd,
|
|
564
|
+
today: today,
|
|
565
|
+
hasOutsideDays: hasOutsideDays,
|
|
566
|
+
isDisabled: isDateDisabled(day.date),
|
|
567
|
+
neighbors: neighbors,
|
|
568
|
+
isTabbable: day.iso === seedTabbableIso,
|
|
569
|
+
onDayClick: onDayClick,
|
|
570
|
+
onDayHover: onDayHover
|
|
571
|
+
}, day.iso);
|
|
572
|
+
})]
|
|
556
573
|
}, plainDateToISO(weekDate));
|
|
557
574
|
})]
|
|
558
575
|
})
|
|
@@ -575,6 +592,7 @@ function DayCell({
|
|
|
575
592
|
today,
|
|
576
593
|
hasOutsideDays,
|
|
577
594
|
isDisabled,
|
|
595
|
+
neighbors,
|
|
578
596
|
isTabbable: isTabbableDay,
|
|
579
597
|
onDayClick,
|
|
580
598
|
onDayHover
|
|
@@ -606,8 +624,14 @@ function DayCell({
|
|
|
606
624
|
isOutside
|
|
607
625
|
});
|
|
608
626
|
const endpoint = isEndpoint(state);
|
|
609
|
-
const rangeRounding = computeRangeRounding(state
|
|
610
|
-
|
|
627
|
+
const rangeRounding = computeRangeRounding(state, {
|
|
628
|
+
prevInRange: neighbors.prevInRange,
|
|
629
|
+
nextInRange: neighbors.nextInRange
|
|
630
|
+
});
|
|
631
|
+
const previewRounding = computePreviewRounding(state, {
|
|
632
|
+
prevInPreview: neighbors.prevInPreview,
|
|
633
|
+
nextInPreview: neighbors.nextInPreview
|
|
634
|
+
});
|
|
611
635
|
return /*#__PURE__*/_jsxs("div", {
|
|
612
636
|
role: "gridcell",
|
|
613
637
|
...stylex.props(dayCellStyles.cell),
|
|
@@ -25,18 +25,80 @@ export interface DayCellStateInput {
|
|
|
25
25
|
isDisabled: boolean;
|
|
26
26
|
isOutside: boolean;
|
|
27
27
|
}
|
|
28
|
-
/**
|
|
28
|
+
/**
|
|
29
|
+
* Derives all visual/interaction states for a single day cell.
|
|
30
|
+
*
|
|
31
|
+
* Outside (adjacent-month) days never receive selection, range, or preview
|
|
32
|
+
* state: in the two-month layout the same date renders in both panes, and
|
|
33
|
+
* highlighting the spillover copy would duplicate the selection onto the wrong
|
|
34
|
+
* month's pane (#2715).
|
|
35
|
+
*/
|
|
29
36
|
export declare function computeDayCellState(input: DayCellStateInput): DayCellState;
|
|
30
|
-
/**
|
|
31
|
-
export declare function computeRangeRounding(state: DayCellState
|
|
37
|
+
/** Rounding for the committed range background. */
|
|
38
|
+
export declare function computeRangeRounding(state: DayCellState, neighbors?: {
|
|
39
|
+
prevInRange?: boolean;
|
|
40
|
+
nextInRange?: boolean;
|
|
41
|
+
}): {
|
|
32
42
|
roundLeft: boolean;
|
|
33
43
|
roundRight: boolean;
|
|
34
44
|
};
|
|
35
|
-
/**
|
|
36
|
-
export declare function computePreviewRounding(state: DayCellState
|
|
45
|
+
/** Rounding for the hover-preview background. */
|
|
46
|
+
export declare function computePreviewRounding(state: DayCellState, neighbors?: {
|
|
47
|
+
prevInPreview?: boolean;
|
|
48
|
+
nextInPreview?: boolean;
|
|
49
|
+
}): {
|
|
37
50
|
roundLeft: boolean;
|
|
38
51
|
roundRight: boolean;
|
|
39
52
|
};
|
|
40
53
|
/** Whether a day is a selection endpoint (selected, range start, or range end). */
|
|
41
54
|
export declare function isEndpoint(state: DayCellState): boolean;
|
|
55
|
+
/** Whether a day participates in the continuous committed-range highlight. */
|
|
56
|
+
export declare function isRangeHighlighted(input: {
|
|
57
|
+
date: PlainDate;
|
|
58
|
+
mode: 'single' | 'range';
|
|
59
|
+
rangeStart: PlainDate | null;
|
|
60
|
+
rangeEnd: PlainDate | null;
|
|
61
|
+
isDisabled: boolean;
|
|
62
|
+
isOutside: boolean;
|
|
63
|
+
}): boolean;
|
|
64
|
+
/** Whether a day participates in the continuous hover-preview highlight. */
|
|
65
|
+
export declare function isPreviewHighlighted(input: {
|
|
66
|
+
date: PlainDate;
|
|
67
|
+
previewStart: PlainDate | null;
|
|
68
|
+
previewEnd: PlainDate | null;
|
|
69
|
+
isDisabled: boolean;
|
|
70
|
+
isOutside: boolean;
|
|
71
|
+
}): boolean;
|
|
72
|
+
/**
|
|
73
|
+
* Continuity of the highlighted run through a day's immediate neighbours in the
|
|
74
|
+
* same week row, for both the committed range and the hover preview. A day gets
|
|
75
|
+
* an end cap on whichever side its neighbour does not continue the run (see
|
|
76
|
+
* {@link computeRangeRounding} / {@link computePreviewRounding}).
|
|
77
|
+
*/
|
|
78
|
+
export interface DayNeighborContinuity {
|
|
79
|
+
prevInRange: boolean;
|
|
80
|
+
nextInRange: boolean;
|
|
81
|
+
prevInPreview: boolean;
|
|
82
|
+
nextInPreview: boolean;
|
|
83
|
+
}
|
|
84
|
+
/** Minimal shape needed from a week's day cells to derive neighbour continuity. */
|
|
85
|
+
export interface NeighborDay {
|
|
86
|
+
date: PlainDate;
|
|
87
|
+
isOutside: boolean;
|
|
88
|
+
}
|
|
89
|
+
/**
|
|
90
|
+
* Derives whether the previous/next day in the same week row continues the
|
|
91
|
+
* highlighted run, for both range and preview. Broken out from the render path
|
|
92
|
+
* so the neighbour logic is unit-testable in isolation.
|
|
93
|
+
*/
|
|
94
|
+
export declare function computeDayNeighborContinuity(input: {
|
|
95
|
+
week: ReadonlyArray<NeighborDay>;
|
|
96
|
+
dayIndex: number;
|
|
97
|
+
mode: 'single' | 'range';
|
|
98
|
+
rangeStart: PlainDate | null;
|
|
99
|
+
rangeEnd: PlainDate | null;
|
|
100
|
+
previewStart: PlainDate | null;
|
|
101
|
+
previewEnd: PlainDate | null;
|
|
102
|
+
isDisabled: (date: PlainDate) => boolean;
|
|
103
|
+
}): DayNeighborContinuity;
|
|
42
104
|
//# sourceMappingURL=dayCellUtils.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dayCellUtils.d.ts","sourceRoot":"","sources":["../../src/Calendar/dayCellUtils.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAGlD,MAAM,WAAW,YAAY;IAC3B,mBAAmB,EAAE,OAAO,CAAC;IAC7B,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,OAAO,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,OAAO,CAAC;IACxB,YAAY,EAAE,OAAO,CAAC;IACtB,aAAa,EAAE,OAAO,CAAC;IACvB,YAAY,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,QAAQ,GAAG,OAAO,CAAC;IACzB,YAAY,EAAE,SAAS,GAAG,IAAI,CAAC;IAC/B,UAAU,EAAE,SAAS,GAAG,IAAI,CAAC;IAC7B,QAAQ,EAAE,SAAS,GAAG,IAAI,CAAC;IAC3B,YAAY,EAAE,SAAS,GAAG,IAAI,CAAC;IAC/B,UAAU,EAAE,SAAS,GAAG,IAAI,CAAC;IAC7B,KAAK,EAAE,SAAS,CAAC;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;CACpB;AAED
|
|
1
|
+
{"version":3,"file":"dayCellUtils.d.ts","sourceRoot":"","sources":["../../src/Calendar/dayCellUtils.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,7 +1,14 @@
|
|
|
1
1
|
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
2
|
|
|
3
3
|
import { plainDateIsEqual, plainDateIsInRange } from "../utils/plainDate.js";
|
|
4
|
-
/**
|
|
4
|
+
/**
|
|
5
|
+
* Derives all visual/interaction states for a single day cell.
|
|
6
|
+
*
|
|
7
|
+
* Outside (adjacent-month) days never receive selection, range, or preview
|
|
8
|
+
* state: in the two-month layout the same date renders in both panes, and
|
|
9
|
+
* highlighting the spillover copy would duplicate the selection onto the wrong
|
|
10
|
+
* month's pane (#2715).
|
|
11
|
+
*/
|
|
5
12
|
export function computeDayCellState(input) {
|
|
6
13
|
const {
|
|
7
14
|
date,
|
|
@@ -19,35 +26,149 @@ export function computeDayCellState(input) {
|
|
|
19
26
|
return {
|
|
20
27
|
effectivelyDisabled: isDisabled || isOutside,
|
|
21
28
|
isToday: plainDateIsEqual(date, today),
|
|
22
|
-
isSelected: !!(mode === 'single' && selectedDate && plainDateIsEqual(date, selectedDate)),
|
|
23
|
-
isInRange: !!(mode === 'range' && rangeStart && rangeEnd && plainDateIsInRange(date, [rangeStart, rangeEnd])),
|
|
24
|
-
isRangeStart: !!(mode === 'range' && rangeStart && plainDateIsEqual(date, rangeStart)),
|
|
25
|
-
isRangeEnd: !!(mode === 'range' && rangeEnd && plainDateIsEqual(date, rangeEnd)),
|
|
26
|
-
isInPreview: !!(previewStart && previewEnd && plainDateIsInRange(date, [previewStart, previewEnd])),
|
|
27
|
-
isPreviewStart: !!(previewStart && plainDateIsEqual(date, previewStart)),
|
|
28
|
-
isPreviewEnd: !!(previewEnd && plainDateIsEqual(date, previewEnd)),
|
|
29
|
+
isSelected: !!(!isOutside && mode === 'single' && selectedDate && plainDateIsEqual(date, selectedDate)),
|
|
30
|
+
isInRange: !!(!isOutside && mode === 'range' && rangeStart && rangeEnd && plainDateIsInRange(date, [rangeStart, rangeEnd])),
|
|
31
|
+
isRangeStart: !!(!isOutside && mode === 'range' && rangeStart && plainDateIsEqual(date, rangeStart)),
|
|
32
|
+
isRangeEnd: !!(!isOutside && mode === 'range' && rangeEnd && plainDateIsEqual(date, rangeEnd)),
|
|
33
|
+
isInPreview: !!(!isOutside && previewStart && previewEnd && plainDateIsInRange(date, [previewStart, previewEnd])),
|
|
34
|
+
isPreviewStart: !!(!isOutside && previewStart && plainDateIsEqual(date, previewStart)),
|
|
35
|
+
isPreviewEnd: !!(!isOutside && previewEnd && plainDateIsEqual(date, previewEnd)),
|
|
29
36
|
isFirstColumn: dayIndex === 0,
|
|
30
37
|
isLastColumn: dayIndex === 6
|
|
31
38
|
};
|
|
32
39
|
}
|
|
33
40
|
|
|
34
|
-
/**
|
|
35
|
-
|
|
41
|
+
/**
|
|
42
|
+
* Generic rounding for a highlight run (range or preview).
|
|
43
|
+
*
|
|
44
|
+
* Rounds at the run's endpoints and the grid row edges, and also caps the
|
|
45
|
+
* highlight where the run meets a break in continuity — a neighbouring cell
|
|
46
|
+
* that is disabled or an adjacent-month (outside) day (#2715).
|
|
47
|
+
*/
|
|
48
|
+
function computeHighlightRounding(input) {
|
|
49
|
+
const prevBreaks = input.prevContinues !== undefined ? !input.prevContinues : false;
|
|
50
|
+
const nextBreaks = input.nextContinues !== undefined ? !input.nextContinues : false;
|
|
36
51
|
return {
|
|
37
|
-
roundLeft:
|
|
38
|
-
roundRight:
|
|
52
|
+
roundLeft: input.isStart || input.isFirstColumn || prevBreaks,
|
|
53
|
+
roundRight: input.isEnd || input.isLastColumn || nextBreaks
|
|
39
54
|
};
|
|
40
55
|
}
|
|
41
56
|
|
|
42
|
-
/**
|
|
43
|
-
export function
|
|
44
|
-
return {
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
57
|
+
/** Rounding for the committed range background. */
|
|
58
|
+
export function computeRangeRounding(state, neighbors) {
|
|
59
|
+
return computeHighlightRounding({
|
|
60
|
+
isStart: state.isRangeStart,
|
|
61
|
+
isEnd: state.isRangeEnd,
|
|
62
|
+
isFirstColumn: state.isFirstColumn,
|
|
63
|
+
isLastColumn: state.isLastColumn,
|
|
64
|
+
prevContinues: neighbors?.prevInRange,
|
|
65
|
+
nextContinues: neighbors?.nextInRange
|
|
66
|
+
});
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
/** Rounding for the hover-preview background. */
|
|
70
|
+
export function computePreviewRounding(state, neighbors) {
|
|
71
|
+
return computeHighlightRounding({
|
|
72
|
+
isStart: state.isPreviewStart,
|
|
73
|
+
isEnd: state.isPreviewEnd,
|
|
74
|
+
isFirstColumn: state.isFirstColumn,
|
|
75
|
+
isLastColumn: state.isLastColumn,
|
|
76
|
+
prevContinues: neighbors?.prevInPreview,
|
|
77
|
+
nextContinues: neighbors?.nextInPreview
|
|
78
|
+
});
|
|
48
79
|
}
|
|
49
80
|
|
|
50
81
|
/** Whether a day is a selection endpoint (selected, range start, or range end). */
|
|
51
82
|
export function isEndpoint(state) {
|
|
52
83
|
return state.isSelected || state.isRangeStart || state.isRangeEnd;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
/**
|
|
87
|
+
* Whether a day is part of an unbroken highlight run (enabled, in-month, inside
|
|
88
|
+
* the given span). Outside and disabled days break the run, producing end caps.
|
|
89
|
+
*/
|
|
90
|
+
function isSpanHighlighted(input) {
|
|
91
|
+
const {
|
|
92
|
+
date,
|
|
93
|
+
spanStart,
|
|
94
|
+
spanEnd,
|
|
95
|
+
isDisabled,
|
|
96
|
+
isOutside
|
|
97
|
+
} = input;
|
|
98
|
+
return !!(!isOutside && !isDisabled && spanStart && spanEnd && plainDateIsInRange(date, [spanStart, spanEnd]));
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
/** Whether a day participates in the continuous committed-range highlight. */
|
|
102
|
+
export function isRangeHighlighted(input) {
|
|
103
|
+
if (input.mode !== 'range') {
|
|
104
|
+
return false;
|
|
105
|
+
}
|
|
106
|
+
return isSpanHighlighted({
|
|
107
|
+
date: input.date,
|
|
108
|
+
spanStart: input.rangeStart,
|
|
109
|
+
spanEnd: input.rangeEnd,
|
|
110
|
+
isDisabled: input.isDisabled,
|
|
111
|
+
isOutside: input.isOutside
|
|
112
|
+
});
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
/** Whether a day participates in the continuous hover-preview highlight. */
|
|
116
|
+
export function isPreviewHighlighted(input) {
|
|
117
|
+
return isSpanHighlighted({
|
|
118
|
+
date: input.date,
|
|
119
|
+
spanStart: input.previewStart,
|
|
120
|
+
spanEnd: input.previewEnd,
|
|
121
|
+
isDisabled: input.isDisabled,
|
|
122
|
+
isOutside: input.isOutside
|
|
123
|
+
});
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
/**
|
|
127
|
+
* Continuity of the highlighted run through a day's immediate neighbours in the
|
|
128
|
+
* same week row, for both the committed range and the hover preview. A day gets
|
|
129
|
+
* an end cap on whichever side its neighbour does not continue the run (see
|
|
130
|
+
* {@link computeRangeRounding} / {@link computePreviewRounding}).
|
|
131
|
+
*/
|
|
132
|
+
|
|
133
|
+
/** Minimal shape needed from a week's day cells to derive neighbour continuity. */
|
|
134
|
+
|
|
135
|
+
/**
|
|
136
|
+
* Derives whether the previous/next day in the same week row continues the
|
|
137
|
+
* highlighted run, for both range and preview. Broken out from the render path
|
|
138
|
+
* so the neighbour logic is unit-testable in isolation.
|
|
139
|
+
*/
|
|
140
|
+
export function computeDayNeighborContinuity(input) {
|
|
141
|
+
const {
|
|
142
|
+
week,
|
|
143
|
+
dayIndex,
|
|
144
|
+
mode,
|
|
145
|
+
rangeStart,
|
|
146
|
+
rangeEnd,
|
|
147
|
+
previewStart,
|
|
148
|
+
previewEnd,
|
|
149
|
+
isDisabled
|
|
150
|
+
} = input;
|
|
151
|
+
const prev = week[dayIndex - 1];
|
|
152
|
+
const next = week[dayIndex + 1];
|
|
153
|
+
const rangeContinues = day => day != null && isRangeHighlighted({
|
|
154
|
+
date: day.date,
|
|
155
|
+
mode,
|
|
156
|
+
rangeStart,
|
|
157
|
+
rangeEnd,
|
|
158
|
+
isDisabled: isDisabled(day.date),
|
|
159
|
+
isOutside: day.isOutside
|
|
160
|
+
});
|
|
161
|
+
const previewContinues = day => day != null && isPreviewHighlighted({
|
|
162
|
+
date: day.date,
|
|
163
|
+
previewStart,
|
|
164
|
+
previewEnd,
|
|
165
|
+
isDisabled: isDisabled(day.date),
|
|
166
|
+
isOutside: day.isOutside
|
|
167
|
+
});
|
|
168
|
+
return {
|
|
169
|
+
prevInRange: rangeContinues(prev),
|
|
170
|
+
nextInRange: rangeContinues(next),
|
|
171
|
+
prevInPreview: previewContinues(prev),
|
|
172
|
+
nextInPreview: previewContinues(next)
|
|
173
|
+
};
|
|
53
174
|
}
|
|
@@ -24,6 +24,7 @@
|
|
|
24
24
|
import React from 'react';
|
|
25
25
|
import type { ReactNode } from 'react';
|
|
26
26
|
import type { BaseProps } from '../BaseProps';
|
|
27
|
+
import type { StyleXStyles } from '../theme/types';
|
|
27
28
|
import type { DropdownMenuOption, DropdownMenuItemData, DropdownMenuDivider, DropdownMenuSection } from '../DropdownMenu/DropdownMenu';
|
|
28
29
|
export type ContextMenuItemData = DropdownMenuItemData;
|
|
29
30
|
export type ContextMenuDivider = DropdownMenuDivider;
|
|
@@ -32,6 +33,13 @@ export type ContextMenuOption = DropdownMenuOption;
|
|
|
32
33
|
interface ContextMenuBaseProps extends BaseProps {
|
|
33
34
|
/** Ref forwarded to the trigger wrapper element. */
|
|
34
35
|
ref?: React.Ref<HTMLDivElement>;
|
|
36
|
+
/**
|
|
37
|
+
* Styles applied to the trigger wrapper element (the right-click target).
|
|
38
|
+
* By default the trigger is a plain block that hugs its content — pass a
|
|
39
|
+
* fill style (e.g. `width/height: 100%`) when the whole parent area should
|
|
40
|
+
* be right-clickable (as the Table does for full-cell context menus).
|
|
41
|
+
*/
|
|
42
|
+
triggerXstyle?: StyleXStyles | StyleXStyles[];
|
|
35
43
|
/** The trigger area — right-click on this to open the menu. */
|
|
36
44
|
children: ReactNode;
|
|
37
45
|
/** Custom menu width. @default '160px' */
|
|
@@ -83,7 +91,7 @@ export type ContextMenuProps = ContextMenuDataProps | ContextMenuCompoundProps;
|
|
|
83
91
|
* </ContextMenu>
|
|
84
92
|
* ```
|
|
85
93
|
*/
|
|
86
|
-
export declare function ContextMenu({ children, menuWidth, size, label, isDisabled, onOpenChange, ref, className, style, xstyle, 'data-testid': testId, ...props }: ContextMenuProps): React.JSX.Element;
|
|
94
|
+
export declare function ContextMenu({ children, menuWidth, size, label, isDisabled, onOpenChange, ref, className, style, xstyle, triggerXstyle, 'data-testid': testId, ...props }: ContextMenuProps): React.JSX.Element;
|
|
87
95
|
export declare namespace ContextMenu {
|
|
88
96
|
var displayName: string;
|
|
89
97
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../src/ContextMenu/ContextMenu.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,KAON,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAqBrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../src/ContextMenu/ContextMenu.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,KAON,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAqBrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAEjD,OAAO,KAAK,EACV,kBAAkB,EAClB,oBAAoB,EACpB,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,8BAA8B,CAAC;AAsCtC,MAAM,MAAM,mBAAmB,GAAG,oBAAoB,CAAC;AAEvD,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,CAAC;AAErD,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,CAAC;AAErD,MAAM,MAAM,iBAAiB,GAAG,kBAAkB,CAAC;AAMnD,UAAU,oBAAqB,SAAQ,SAAS;IAC9C,oDAAoD;IACpD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;OAKG;IACH,aAAa,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IAC9C,+DAA+D;IAC/D,QAAQ,EAAE,SAAS,CAAC;IACpB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,wCAAwC;IACxC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4EAA4E;IAC5E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,UAAU,oBAAqB,SAAQ,oBAAoB;IACzD,gDAAgD;IAChD,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AAED,UAAU,wBAAyB,SAAQ,oBAAoB;IAC7D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,+CAA+C;IAC/C,WAAW,EAAE,SAAS,CAAC;CACxB;AAED,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GAAG,wBAAwB,CAAC;AAM/E;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,IAAW,EACX,KAAsB,EACtB,UAAkB,EAClB,YAAY,EACZ,GAAG,EACH,SAAS,EACT,KAAK,EACL,MAAM,EACN,aAAa,EACb,aAAa,EAAE,MAAM,EACrB,GAAG,KAAK,EACT,EAAE,gBAAgB,qBAwOlB;yBAtPe,WAAW"}
|
|
@@ -39,6 +39,10 @@ import { mergeProps } from "../utils/index.js";
|
|
|
39
39
|
import { themeProps } from "../utils/themeProps.js";
|
|
40
40
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
41
41
|
const styles = {
|
|
42
|
+
trigger: {
|
|
43
|
+
k7VYTy: "xpdipgo",
|
|
44
|
+
$$css: true
|
|
45
|
+
},
|
|
42
46
|
menu: {
|
|
43
47
|
kB7OPa: "x9f619",
|
|
44
48
|
k1xSpc: "x78zum5",
|
|
@@ -116,6 +120,7 @@ export function ContextMenu({
|
|
|
116
120
|
className,
|
|
117
121
|
style,
|
|
118
122
|
xstyle,
|
|
123
|
+
triggerXstyle,
|
|
119
124
|
'data-testid': testId,
|
|
120
125
|
...props
|
|
121
126
|
}) {
|
|
@@ -284,9 +289,7 @@ export function ContextMenu({
|
|
|
284
289
|
onContextMenu: handleContextMenu,
|
|
285
290
|
...longPressHandlers,
|
|
286
291
|
"data-testid": testId,
|
|
287
|
-
...
|
|
288
|
-
className: "xpdipgo"
|
|
289
|
-
},
|
|
292
|
+
...stylex.props(styles.trigger, ...(triggerXstyle ? Array.isArray(triggerXstyle) ? triggerXstyle : [triggerXstyle] : [])),
|
|
290
293
|
children: children
|
|
291
294
|
}), layer.render(/*#__PURE__*/_jsx("div", {
|
|
292
295
|
ref: listRef,
|
|
@@ -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;AA+hBjB;;;;;;;;;;;;;;;;;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
|
@@ -153,12 +153,13 @@ function TableRowInner({
|
|
|
153
153
|
children: cells
|
|
154
154
|
})
|
|
155
155
|
}, item, rowIndex);
|
|
156
|
-
|
|
156
|
+
const row = /*#__PURE__*/_jsx(RowComponent, {
|
|
157
157
|
ref: rowRenderProps.ref,
|
|
158
158
|
...rowRenderProps.htmlProps,
|
|
159
159
|
xstyle: rowRenderProps.styles,
|
|
160
160
|
children: rowRenderProps.children
|
|
161
161
|
}, rowKey);
|
|
162
|
+
return row;
|
|
162
163
|
}
|
|
163
164
|
|
|
164
165
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableCell.d.ts","sourceRoot":"","sources":["../../src/Table/TableCell.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAQ5C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AACjD,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,SAAS,CAAC;AAgBjD,gDAAgD;AAChD,MAAM,WAAW,cAAe,SAAQ,SAAS,CAAC,oBAAoB,CAAC;IACrE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC;IACtC,0FAA0F;IAC1F,KAAK,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,UAAU,GAAG,UAAU,CAAC;IAChD,yEAAyE;IACzE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,yEAAyE;IACzE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,sEAAsE;IACtE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACvC;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,mBAAmB,CAAC;CAC1C;
|
|
1
|
+
{"version":3,"file":"TableCell.d.ts","sourceRoot":"","sources":["../../src/Table/TableCell.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAQ5C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AACjD,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,SAAS,CAAC;AAgBjD,gDAAgD;AAChD,MAAM,WAAW,cAAe,SAAQ,SAAS,CAAC,oBAAoB,CAAC;IACrE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC;IACtC,0FAA0F;IAC1F,KAAK,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,UAAU,GAAG,UAAU,CAAC;IAChD,yEAAyE;IACzE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,yEAAyE;IACzE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,sEAAsE;IACtE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACvC;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,mBAAmB,CAAC;CAC1C;AAsHD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,MAAM,EACN,GAAG,EACH,SAAS,EAAE,iBAAiB,EAC5B,KAAK,EAAE,aAAa,EACpB,kBAAkB,EAClB,GAAG,KAAK,EACT,EAAE,cAAc,+BAwDhB;yBAhEe,SAAS"}
|