@kanso-labs/kanso-ui 0.30.2 → 0.30.4
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/calendar/styles.js +6 -0
- package/dist/calendar/styles.js.map +1 -1
- package/dist/components/button/index.d.ts +1 -1
- package/dist/components/button/index.js +38 -35
- package/dist/components/button/index.js.map +1 -1
- package/dist/components/calendar/index.js +1 -1
- package/dist/components/calendar/index.js.map +1 -1
- package/dist/components/chip/index.d.ts +1 -1
- package/dist/components/chip/index.js +34 -22
- package/dist/components/chip/index.js.map +1 -1
- package/dist/components/color-picker/index.d.ts +7 -1
- package/dist/components/color-picker/index.js +35 -28
- package/dist/components/color-picker/index.js.map +1 -1
- package/dist/components/color-swatch-picker/index.js +38 -26
- package/dist/components/color-swatch-picker/index.js.map +1 -1
- package/dist/components/dialog/index.js +1 -1
- package/dist/components/dialog/index.js.map +1 -1
- package/dist/components/icon-button/index.d.ts +1 -1
- package/dist/components/icon-button/index.js +49 -46
- package/dist/components/icon-button/index.js.map +1 -1
- package/dist/components/menu/index.d.ts +8 -5
- package/dist/components/menu/index.js +33 -38
- package/dist/components/menu/index.js.map +1 -1
- package/dist/components/navigation-tree/index.js +2 -5
- package/dist/components/navigation-tree/index.js.map +1 -1
- package/dist/components/progress-indicator/index.js +3 -3
- package/dist/components/progress-indicator/index.js.map +1 -1
- package/dist/components/range-calendar/index.js +1 -1
- package/dist/components/range-calendar/index.js.map +1 -1
- package/dist/components/sheet/index.js +1 -1
- package/dist/components/sheet/index.js.map +1 -1
- package/dist/components/table/index.js +8 -8
- package/dist/components/table/index.js.map +1 -1
- package/dist/field/index.js +78 -57
- package/dist/field/index.js.map +1 -1
- package/dist/row/index.js +71 -69
- package/dist/row/index.js.map +1 -1
- package/dist/row/styles.js +4 -0
- package/dist/row/styles.js.map +1 -1
- package/dist/styles.css +44 -8
- package/package.json +8 -8
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["CalendarDate","ReactElement","DateValue","RangeCalendarProps","RACRangeCalendarProps","stylex","CalendarCell","RACCalendarCell","CalendarGrid","RACCalendarGrid","CalendarGridBody","RACCalendarGridBody","RangeCalendar","RACRangeCalendar","CalendarGridHeader","CalendarHeader","monthOffsets","calendarStyles","focus","mergeStatefulStyles","Omit","T","className","style","cellClassName","state","isDisabled","isSelected","isSelectionEnd","isSelectionStart","isToday","isEnd","props","cell","ring","cellToday","cellInRange","cellRangeStart","cellRangeEnd","cellSelected","cellDisabled","gridCell","date","$","_c","t0","root","t1","t2","Symbol","for","months","t3","visibleDuration","map","_temp","t4","t5","offset","grid"],"sources":["../../../src/components/range-calendar/index.tsx"],"sourcesContent":["import type { CalendarDate } from '@internationalized/date';\nimport type { ReactElement } from 'react';\nimport type { DateValue, RangeCalendarProps as RACRangeCalendarProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { CalendarCell as RACCalendarCell, CalendarGrid as RACCalendarGrid, CalendarGridBody as RACCalendarGridBody, RangeCalendar as RACRangeCalendar } from 'react-aria-components';\nimport { CalendarGridHeader, CalendarHeader } from '../../calendar';\nimport { monthOffsets } from '../../calendar/months';\nimport { calendarStyles } from '../../calendar/styles';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\n\n// The date pickers page's calendar again, picking two dates rather than one.\n// Every part it draws is Calendar's, from `src/calendar` — the container, the\n// grid, the weekday row, the chevrons and the date circle — so the two cannot\n// come apart.\n//\n// What a range adds is the band between its two ends, and the page tokenises\n// no such thing: its token set covers the docked calendar's selected date and\n// stops there. So the band is the library's own, and its reasons are in\n// `src/calendar/styles.ts` where it is defined — the secondary container, one\n// step down from the primary the two ends take.\n//\n// Two things follow from drawing a band across a grid whose cells are spaced\n// apart.\n//\n// **The band is square and the ends are round.** A range of consecutive days\n// reads as one shape rather than a row of circles, and the first and last day\n// round only their outer edge, which is what makes the band begin and end at\n// a circle.\n//\n// **The band reaches across the grid's own spacing.** A negative inline\n// margin of half that spacing on each side closes the gap between one day and\n// the next without moving either. Without it the band arrives as a dashed run\n// of separate blocks.\n\ntype RangeCalendarProps<T extends DateValue = DateValue> = Omit<RACRangeCalendarProps<T>, 'children' | 'className' | 'style'> & {\n /** A function may compute the class from the calendar's render state. */\n className?: RACRangeCalendarProps<T>['className'];\n /** A function may compute the style from the calendar's render state. */\n style?: RACRangeCalendarProps<T>['style'];\n};\n\n// A date's classes, from React Aria's render state. StyleX cannot target\n// `[data-selected]` on the element it is styling, so the state comes from\n// what React Aria hands the className.\n//\n// The order is what makes a range read as one shape. Every selected day takes\n// the band; the two ends then take the circle over it, and round the outer\n// edge the band does not continue past. `disabled` is last of all, and StyleX
|
|
1
|
+
{"version":3,"file":"index.js","names":["CalendarDate","ReactElement","DateValue","RangeCalendarProps","RACRangeCalendarProps","stylex","CalendarCell","RACCalendarCell","CalendarGrid","RACCalendarGrid","CalendarGridBody","RACCalendarGridBody","RangeCalendar","RACRangeCalendar","CalendarGridHeader","CalendarHeader","monthOffsets","calendarStyles","focus","mergeStatefulStyles","Omit","T","className","style","cellClassName","state","isDisabled","isSelected","isSelectionEnd","isSelectionStart","isToday","isUnavailable","isEnd","props","cell","ring","cellToday","cellInRange","cellRangeStart","cellRangeEnd","cellSelected","cellUnavailable","cellDisabled","gridCell","date","$","_c","t0","root","t1","t2","Symbol","for","months","t3","visibleDuration","map","_temp","t4","t5","offset","grid"],"sources":["../../../src/components/range-calendar/index.tsx"],"sourcesContent":["import type { CalendarDate } from '@internationalized/date';\nimport type { ReactElement } from 'react';\nimport type { DateValue, RangeCalendarProps as RACRangeCalendarProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { CalendarCell as RACCalendarCell, CalendarGrid as RACCalendarGrid, CalendarGridBody as RACCalendarGridBody, RangeCalendar as RACRangeCalendar } from 'react-aria-components';\nimport { CalendarGridHeader, CalendarHeader } from '../../calendar';\nimport { monthOffsets } from '../../calendar/months';\nimport { calendarStyles } from '../../calendar/styles';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\n\n// The date pickers page's calendar again, picking two dates rather than one.\n// Every part it draws is Calendar's, from `src/calendar` — the container, the\n// grid, the weekday row, the chevrons and the date circle — so the two cannot\n// come apart.\n//\n// What a range adds is the band between its two ends, and the page tokenises\n// no such thing: its token set covers the docked calendar's selected date and\n// stops there. So the band is the library's own, and its reasons are in\n// `src/calendar/styles.ts` where it is defined — the secondary container, one\n// step down from the primary the two ends take.\n//\n// Two things follow from drawing a band across a grid whose cells are spaced\n// apart.\n//\n// **The band is square and the ends are round.** A range of consecutive days\n// reads as one shape rather than a row of circles, and the first and last day\n// round only their outer edge, which is what makes the band begin and end at\n// a circle.\n//\n// **The band reaches across the grid's own spacing.** A negative inline\n// margin of half that spacing on each side closes the gap between one day and\n// the next without moving either. Without it the band arrives as a dashed run\n// of separate blocks.\n\ntype RangeCalendarProps<T extends DateValue = DateValue> = Omit<RACRangeCalendarProps<T>, 'children' | 'className' | 'style'> & {\n /** A function may compute the class from the calendar's render state. */\n className?: RACRangeCalendarProps<T>['className'];\n /** A function may compute the style from the calendar's render state. */\n style?: RACRangeCalendarProps<T>['style'];\n};\n\n// A date's classes, from React Aria's render state. StyleX cannot target\n// `[data-selected]` on the element it is styling, so the state comes from\n// what React Aria hands the className.\n//\n// The order is what makes a range read as one shape. Every selected day takes\n// the band; the two ends then take the circle over it, and round the outer\n// edge the band does not continue past. `unavailable` comes after those, so a\n// ruled-out day inside a range keeps the band and takes the strikethrough\n// over it. `disabled` is last of all, and StyleX replaces a property whole,\n// so it takes the branches above it with it.\nfunction cellClassName(state: {\n isDisabled: boolean;\n isSelected: boolean;\n isSelectionEnd: boolean;\n isSelectionStart: boolean;\n isToday: boolean;\n isUnavailable: boolean;\n}) {\n const isEnd = state.isSelected && (state.isSelectionStart || state.isSelectionEnd);\n return stylex.props(calendarStyles.cell, focus.ring, state.isToday && calendarStyles.cellToday, state.isSelected && calendarStyles.cellInRange, state.isSelected && state.isSelectionStart && calendarStyles.cellRangeStart, state.isSelected && state.isSelectionEnd && calendarStyles.cellRangeEnd, isEnd && calendarStyles.cellSelected, state.isUnavailable && calendarStyles.cellUnavailable, state.isDisabled && calendarStyles.cellDisabled).className ?? '';\n}\nfunction gridCell(date: CalendarDate): ReactElement {\n return <RACCalendarCell className={cellClassName} date={date} />;\n}\n\n/**\n * A calendar for picking a range of dates. The value is React Aria's: pass\n * `value` with `onChange` to control it, or `defaultValue` to let it keep its\n * own, both as a `{ start, end }` pair of `@internationalized/date` values\n * from this package's `./date` subpath.\n *\n * ```tsx\n * import { CalendarDate } from '@kanso-labs/kanso-ui/date'\n *\n * <RangeCalendar\n * aria-label=\"Label\"\n * defaultValue={{\n * start: new CalendarDate(2026, 9, 8),\n * end: new CalendarDate(2026, 9, 15),\n * }}\n * />\n * ```\n *\n * The two ends take the circle a selected date takes in `Calendar`, and the\n * days between them a band in the secondary container. `minValue`,\n * `maxValue`, `isDateUnavailable` and `visibleDuration` are the same props\n * `Calendar` takes, and `allowsNonContiguousRanges` lets a range skip the\n * dates ruled out inside it rather than stopping at the first.\n *\n * The call site's `className` and `style` land on the container, which is the\n * element a layout positions.\n */\nfunction RangeCalendar<T extends DateValue>(props: RangeCalendarProps<T>) {\n return <RACRangeCalendar<T> {...props} {...mergeStatefulStyles(stylex.props(calendarStyles.root), props)}>\n <CalendarHeader />\n <div {...stylex.props(calendarStyles.months)}>\n {monthOffsets(props.visibleDuration?.months ?? 1).map(offset => <RACCalendarGrid key={offset.months} offset={offset} {...stylex.props(calendarStyles.grid)}>\n <CalendarGridHeader />\n <RACCalendarGridBody>{gridCell}</RACCalendarGridBody>\n </RACCalendarGrid>)}\n </div>\n </RACRangeCalendar>;\n}\nexport type { RangeCalendarProps };\nexport default RangeCalendar;"],"mappings":";;;;;;;;;;AAoDA,SAASwB,cAAcC,OAOpB;CACD,MAAMO,QAAQP,MAAME,eAAeF,MAAMI,oBAAoBJ,MAAMG;CACnE,OAAOvB,MAAaY,eAAeiB,MAAMhB,MAAMiB,MAAMV,MAAMK,WAAWb,eAAemB,WAAWX,MAAME,cAAcV,eAAeoB,aAAaZ,MAAME,cAAcF,MAAMI,oBAAoBZ,eAAeqB,gBAAgBb,MAAME,cAAcF,MAAMG,kBAAkBX,eAAesB,cAAcP,SAASf,eAAeuB,cAAcf,MAAMM,iBAAiBd,eAAewB,iBAAiBhB,MAAMC,cAAcT,eAAeyB,YAAY,CAAC,CAACpB,aAAa;AACnc;AACA,SAASqB,SAASC,MAAkC;CAClD,OAAO,oBAAC,cAAD;EAAiB,WAAWpB;EAAqBoB;CAAK,CAAA;AAC/D;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,SAAAhC,gBAAAqB,SAAA;CAAA,MAAAY,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAF,EAAA,OAAAZ,SAAA;EAC6Cc,KAAA5B,oBAAoBd,MAAaY,eAAc+B,IAAK,GAAGf,OAAK;EAACY,EAAA,KAAAZ;EAAAY,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAAA,IAAAI;CAAA,IAAAC;CAAA,IAAAL,EAAA,OAAAM,OAAAC,IAAA,2BAAA,GAAA;EACpGH,KAAA,oBAAC,gBAAD,CAAe,CAAA;EACNC,KAAA7C,MAAaY,eAAcoC,MAAO;EAACR,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAA;EAAAD,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;CAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,OAAAZ,QAAAsB,iBAAAF,QAAA;EACzCC,KAAAtC,aAAaiB,QAAKsB,iBAAwBF,UAA7B,CAAkC,CAAC,CAAAG,IAAKC,KAGlC;EAACZ,EAAA,KAAAZ,QAAAsB,iBAAAF;EAAAR,EAAA,KAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,IAAAa;CAAA,IAAAb,EAAA,OAAAS,IAAA;EAJvBI,KAAA,oBAAA,OAAA;GAKM,GALGR;GACNI,UAAAA;EAIG,CAAA;EAAAT,EAAA,KAAAS;EAAAT,EAAA,KAAAa;CAAA,OAAAA,KAAAb,EAAA;CAAA,IAAAc;CAAA,IAAAd,EAAA,OAAAZ,WAAAY,EAAA,OAAAE,MAAAF,EAAA,QAAAa,IAAA;EAPHC,KAAA,qBAAC,eAAD;GAAiB,GAAQ1B;GAAK,GAAMc;GAApC,UAAA,CACHE,IACAS,EAFoB;;EAQHb,EAAA,KAAAZ;EAAAY,EAAA,KAAAE;EAAAF,EAAA,MAAAa;EAAAb,EAAA,MAAAc;CAAA,OAAAA,KAAAd,EAAA;CAAA,OARdc;AAQc;AATvB,SAAAF,MAAAG,QAAA;CAAA,OAIwE,qBAAC,cAAD;EAA6CA;EAAM,GAAMvD,MAAaY,eAAc4C,IAAK;EAAzF,UAAA,CAC5D,oBAAC,sBAAD,CAAmB,CAAA,GACnB,oBAAC,kBAAD,EAAA,UAAsBlB,SAAF,CAAA,CAFwD;CAAMiB,GAAAA,OAAMP,MAAZ;AAG5D"}
|
|
@@ -108,7 +108,7 @@ function SheetContent(t0) {
|
|
|
108
108
|
} else t2 = $[8];
|
|
109
109
|
let t3;
|
|
110
110
|
if ($[9] !== className || $[10] !== style) {
|
|
111
|
-
t3 = mergeStatefulStyles({ className: "x1n1nwrg x1u6grsq xu2fq7p x18ihq2d x16dv9tl x1vnz5z6 xkducg2 xrzall9 xb0nsol x1a37zkv xys6ro8 x6xk272 x9t1vth x19efjv6 x9f619 x139gbkf x78zum5 xdt5ytf x1l2rt3b xwvxfow x1ey2m1c x13vifvy xmpip4z xtijo5x xhi6v0a x1upgybz x7ab17h x11ijow0 xb3r6kr xixxii4" }, {
|
|
111
|
+
t3 = mergeStatefulStyles({ className: "x1n1nwrg x1u6grsq x1ioi8j8 xu2fq7p x18ihq2d x16dv9tl x1vnz5z6 xkducg2 xrzall9 xb0nsol x1a37zkv xys6ro8 x6xk272 x9t1vth x19efjv6 x9f619 x139gbkf x78zum5 xdt5ytf x1l2rt3b xwvxfow x1ey2m1c x13vifvy xmpip4z xtijo5x xhi6v0a x1upgybz x7ab17h x11ijow0 xb3r6kr xixxii4" }, {
|
|
112
112
|
className,
|
|
113
113
|
style
|
|
114
114
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["HTMLAttributes","ReactNode","ClassNameOrFunction","DialogProps","DialogTriggerProps","HeadingProps","ModalOverlayProps","ModalRenderProps","StyleOrFunction","stylex","Dialog","DialogTrigger","Heading","Modal","ModalOverlay","mergeStatefulStyles","mergeStyles","overlay","colors","media","motion","radii","shadows","spacing","typography","slideInFromEnd","slideInFromBottom","SheetProps","Omit","children","Sheet","t0","$","_c","props","t1","SheetBody","className","SheetContent","container","isKeyboardDismissDisabled","style","isDismissable","undefined","t2","Symbol","for","scrim","t3","t4","modalDialog","t5","t6","t7","SheetFooter","SheetHandle","SheetHeader","SheetTitle","Body","Content","Footer","Handle","Header","Title","SheetContentProps","Pick","Element","SheetTitleProps"],"sources":["../../../src/components/sheet/index.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport type { ClassNameOrFunction, DialogProps, DialogTriggerProps, HeadingProps, ModalOverlayProps, ModalRenderProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Dialog, DialogTrigger, Heading, Modal, ModalOverlay } from 'react-aria-components';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, media, motion, radii, shadows, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// One component, two presentations. Above the medium breakpoint it is a side\n// sheet pinned to the inline end of the viewport; below it, the same panel\n// becomes a bottom sheet. That is the pairing the Material Design pages draw\n// rather than two components: a sheet that stayed on the right at 375px would\n// be a drawer covering the whole screen.\n//\n// The two differ in five things and no more: which edges they are pinned to,\n// which two corners are rounded, which axis they arrive along, how much of\n// the viewport they may take, and the drag handle, which is the bottom\n// sheets page's element alone. Everything inside the panel — the 24 of start\n// and end padding, the 12 between the header's elements, the actions area —\n// comes from the side sheets page and is drawn the same in both.\nconst slideInFromEnd = \"x17cjob-B\";\nconst slideInFromBottom = \"x15b941j-B\";\n\n// Entry only, so there is no exit animation to wait for and closing is\n// immediate: React Aria keeps a closing panel mounted only while an animation\n// is running on it, and finds none. See the comment on `SheetContent` for why\n// that is a design call rather than a limit of StyleX.\n//\n// React Aria's overlay is three nested elements — the scrim, the panel, and\n// the dialog inside it — so the styles are split the same way: the overlay\n// module's scrim on the first, `content` on the panel, its modal dialog style\n// on the element that carries the role. The scrim and that dialog style are\n// shared with every modal overlay; the panel is the sheet's own, since which\n// edge it is pinned to is what makes it a sheet.\n\ntype SheetProps = Omit<DialogTriggerProps, 'children'> & {\n children?: ReactNode;\n};\n\n/**\n * A modal panel that arrives from the edge of the screen — a side sheet on a\n * wide viewport, a bottom sheet on a narrow one. Open state is React Aria's:\n * pass `isOpen` with `onOpenChange` to control it, or `defaultOpen` to let it\n * keep its own.\n *\n * Composed rather than configured by props, because a sheet's header, body,\n * and footer all take arbitrary content — the parts are `Sheet.Content`,\n * `Sheet.Header`, `Sheet.Title`, `Sheet.Body`, and `Sheet.Footer`. A\n * `Button` or `IconButton` placed directly inside `Sheet` opens it, and one\n * given `slot=\"close\"` anywhere inside the content closes it; neither needs\n * a part of its own.\n */\nfunction Sheet({\n children,\n ...props\n}: SheetProps) {\n return <DialogTrigger {...props}>{children}</DialogTrigger>;\n}\nfunction SheetBody(props: HTMLAttributes<HTMLDivElement>) {\n return <div {...props} {...mergeStyles({\n className: \"x9f619 x78zum5 xdt5ytf x1iyjqo2 xxj4525 x1odjw0f xp6hjv6 xg0ps1x\"\n }, props)} />;\n}\n\n/**\n * The panel itself, and the scrim behind it. Everything the sheet shows goes\n * in here; the trigger stays outside it, since the trigger lives in the page\n * while this is portalled out to the end of the body.\n *\n * A press on the scrim closes the sheet unless `isDismissable` says\n * otherwise — React Aria's own default is the reverse, and a sheet that\n * ignores a tap outside it reads as stuck.\n */\nfunction SheetContent({\n children,\n className,\n container,\n isDismissable = true,\n isKeyboardDismissDisabled,\n style,\n ...props\n}: SheetContentProps) {\n return <ModalOverlay isDismissable={isDismissable} isKeyboardDismissDisabled={isKeyboardDismissDisabled}\n // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n UNSTABLE_portalContainer={container} {...stylex.props(overlay.scrim)}>\n <Modal {...mergeStatefulStyles({\n className: \"x1n1nwrg x1u6grsq xu2fq7p x18ihq2d x16dv9tl x1vnz5z6 xkducg2 xrzall9 xb0nsol x1a37zkv xys6ro8 x6xk272 x9t1vth x19efjv6 x9f619 x139gbkf x78zum5 xdt5ytf x1l2rt3b xwvxfow x1ey2m1c x13vifvy xmpip4z xtijo5x xhi6v0a x1upgybz x7ab17h x11ijow0 xb3r6kr xixxii4\"\n }, {\n className,\n style\n })}>\n <Dialog {...props} {...stylex.props(overlay.modalDialog)}>\n {children}\n </Dialog>\n </Modal>\n </ModalOverlay>;\n}\nfunction SheetFooter(props: HTMLAttributes<HTMLDivElement>) {\n return <div {...props} {...mergeStyles({\n className: \"x12smttz x13fuv20 x178xt8z x9f619 x78zum5 x2lah0s x126z3so x1nhvcw1 x1qafhyn x8i8c5o x1clyivc xg0ps1x\"\n }, props)} />;\n}\n\n/**\n * The bottom sheets page's drag handle: a short bar above the sheet's\n * content, saying the panel is a bottom sheet. Place it first inside\n * `Sheet.Content`; above the medium breakpoint the panel is a side sheet and\n * this draws nothing.\n *\n * It is decoration rather than a control, and hidden from assistive\n * technology. Material's own handle drags a sheet between a collapsed and an\n * expanded height and dismisses it from the collapsed one; this panel has\n * one height and cannot be dragged, so a control that only looked draggable\n * would promise what it cannot do. Closing is already the scrim, Escape, and\n * any button given `slot=\"close\"`.\n */\nfunction SheetHandle(props: HTMLAttributes<HTMLDivElement>) {\n return <div aria-hidden=\"true\" {...props} {...mergeStyles({\n className: \"x6s0dn4 x9f619 x1s85apg x37i4ze x2lah0s xl56j7k x1xg6qyv\"\n }, props)}>\n <span className=\"x1ccu2yh xqu0tyb x1dkaolv x9f619 x1td3qas\" />\n </div>;\n}\nfunction SheetHeader(props: HTMLAttributes<HTMLDivElement>) {\n return <div {...props} {...mergeStyles({\n className: \"x6s0dn4 x1j6faob x1q0q8m5 xso031l x9f619 x78zum5 x2lah0s x1gka490 x1qughib x1cmllll xg0ps1x\"\n }, props)} />;\n}\n\n/**\n * Names the sheet. Rendered through React Aria's title slot, which is what\n * points the dialog's `aria-labelledby` at it — a sheet without one announces\n * itself as an unnamed dialog.\n */\nfunction SheetTitle(props: SheetTitleProps) {\n return <Heading slot=\"title\" {...props} {...mergeStyles({\n className: \"x9f619 x1w5n3ug xdy5w5q xete2z3 x14ijtet xug9e1u x2divse x1ghz6dp\"\n }, props)} />;\n}\nSheet.Body = SheetBody;\nSheet.Content = SheetContent;\nSheet.Footer = SheetFooter;\nSheet.Handle = SheetHandle;\nSheet.Header = SheetHeader;\nSheet.Title = SheetTitle;\n\n// The dialog's own props, plus the scrim's dismissal settings and the panel's\n// styling. A call site has no reason to know there are three elements:\n// `className` and `style` reach the panel, which is the one worth restyling\n// and positioning, and everything else lands on the dialog.\ntype SheetContentProps = Omit<DialogProps, 'className' | 'style'> & Pick<ModalOverlayProps, 'isDismissable' | 'isKeyboardDismissDisabled'> & {\n /** A function may compute the class from the panel's render state. */\n className?: ClassNameOrFunction<ModalRenderProps>;\n /**\n * Where to portal the panel and scrim. Defaults to the end of `<body>`,\n * which is right for an app that sets its StyleX theme on `:root`. An app\n * that scopes the theme to a subtree has to point this at an element inside\n * it, or the sheet renders outside the theme and falls back to the tokens'\n * `prefers-color-scheme` default.\n */\n container?: Element;\n /** A function may compute the style from the panel's render state. */\n style?: StyleOrFunction<ModalRenderProps>;\n};\ntype SheetTitleProps = HeadingProps;\nexport type { SheetContentProps, SheetProps, SheetTitleProps };\nexport default Sheet;"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["HTMLAttributes","ReactNode","ClassNameOrFunction","DialogProps","DialogTriggerProps","HeadingProps","ModalOverlayProps","ModalRenderProps","StyleOrFunction","stylex","Dialog","DialogTrigger","Heading","Modal","ModalOverlay","mergeStatefulStyles","mergeStyles","overlay","colors","media","motion","radii","shadows","spacing","typography","slideInFromEnd","slideInFromStart","slideInFromBottom","SheetProps","Omit","children","Sheet","t0","$","_c","props","t1","SheetBody","className","SheetContent","container","isKeyboardDismissDisabled","style","isDismissable","undefined","t2","Symbol","for","scrim","t3","t4","modalDialog","t5","t6","t7","SheetFooter","SheetHandle","SheetHeader","SheetTitle","Body","Content","Footer","Handle","Header","Title","SheetContentProps","Pick","Element","SheetTitleProps"],"sources":["../../../src/components/sheet/index.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport type { ClassNameOrFunction, DialogProps, DialogTriggerProps, HeadingProps, ModalOverlayProps, ModalRenderProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Dialog, DialogTrigger, Heading, Modal, ModalOverlay } from 'react-aria-components';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, media, motion, radii, shadows, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// One component, two presentations. Above the medium breakpoint it is a side\n// sheet pinned to the inline end of the viewport; below it, the same panel\n// becomes a bottom sheet. That is the pairing the Material Design pages draw\n// rather than two components: a sheet that stayed on the right at 375px would\n// be a drawer covering the whole screen.\n//\n// The two differ in five things and no more: which edges they are pinned to,\n// which two corners are rounded, which axis they arrive along, how much of\n// the viewport they may take, and the drag handle, which is the bottom\n// sheets page's element alone. Everything inside the panel — the 24 of start\n// and end padding, the 12 between the header's elements, the actions area —\n// comes from the side sheets page and is drawn the same in both.\n\n// The side sheet arrives along the inline axis, and it takes two keyframes to\n// do that rather than one. Which edge the panel rests against is logical —\n// `insetInlineEnd` puts it on the right under a left-to-right document and on\n// the left under a right-to-left one — but `translateX` is physical and flips\n// with nothing. One keyframe would therefore have the panel arrive from the\n// far side of where it comes to rest under one of the two.\nconst slideInFromEnd = \"x17cjob-B\";\nconst slideInFromStart = \"x18x3npg-B\";\nconst slideInFromBottom = \"x15b941j-B\";\n\n// Entry only, so there is no exit animation to wait for and closing is\n// immediate: React Aria keeps a closing panel mounted only while an animation\n// is running on it, and finds none. See the comment on `SheetContent` for why\n// that is a design call rather than a limit of StyleX.\n//\n// React Aria's overlay is three nested elements — the scrim, the panel, and\n// the dialog inside it — so the styles are split the same way: the overlay\n// module's scrim on the first, `content` on the panel, its modal dialog style\n// on the element that carries the role. The scrim and that dialog style are\n// shared with every modal overlay; the panel is the sheet's own, since which\n// edge it is pinned to is what makes it a sheet.\n\ntype SheetProps = Omit<DialogTriggerProps, 'children'> & {\n children?: ReactNode;\n};\n\n/**\n * A modal panel that arrives from the edge of the screen — a side sheet on a\n * wide viewport, a bottom sheet on a narrow one. Open state is React Aria's:\n * pass `isOpen` with `onOpenChange` to control it, or `defaultOpen` to let it\n * keep its own.\n *\n * Composed rather than configured by props, because a sheet's header, body,\n * and footer all take arbitrary content — the parts are `Sheet.Content`,\n * `Sheet.Header`, `Sheet.Title`, `Sheet.Body`, and `Sheet.Footer`. A\n * `Button` or `IconButton` placed directly inside `Sheet` opens it, and one\n * given `slot=\"close\"` anywhere inside the content closes it; neither needs\n * a part of its own.\n */\nfunction Sheet({\n children,\n ...props\n}: SheetProps) {\n return <DialogTrigger {...props}>{children}</DialogTrigger>;\n}\nfunction SheetBody(props: HTMLAttributes<HTMLDivElement>) {\n return <div {...props} {...mergeStyles({\n className: \"x9f619 x78zum5 xdt5ytf x1iyjqo2 xxj4525 x1odjw0f xp6hjv6 xg0ps1x\"\n }, props)} />;\n}\n\n/**\n * The panel itself, and the scrim behind it. Everything the sheet shows goes\n * in here; the trigger stays outside it, since the trigger lives in the page\n * while this is portalled out to the end of the body.\n *\n * A press on the scrim closes the sheet unless `isDismissable` says\n * otherwise — React Aria's own default is the reverse, and a sheet that\n * ignores a tap outside it reads as stuck.\n */\nfunction SheetContent({\n children,\n className,\n container,\n isDismissable = true,\n isKeyboardDismissDisabled,\n style,\n ...props\n}: SheetContentProps) {\n return <ModalOverlay isDismissable={isDismissable} isKeyboardDismissDisabled={isKeyboardDismissDisabled}\n // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n UNSTABLE_portalContainer={container} {...stylex.props(overlay.scrim)}>\n <Modal {...mergeStatefulStyles({\n className: \"x1n1nwrg x1u6grsq x1ioi8j8 xu2fq7p x18ihq2d x16dv9tl x1vnz5z6 xkducg2 xrzall9 xb0nsol x1a37zkv xys6ro8 x6xk272 x9t1vth x19efjv6 x9f619 x139gbkf x78zum5 xdt5ytf x1l2rt3b xwvxfow x1ey2m1c x13vifvy xmpip4z xtijo5x xhi6v0a x1upgybz x7ab17h x11ijow0 xb3r6kr xixxii4\"\n }, {\n className,\n style\n })}>\n <Dialog {...props} {...stylex.props(overlay.modalDialog)}>\n {children}\n </Dialog>\n </Modal>\n </ModalOverlay>;\n}\nfunction SheetFooter(props: HTMLAttributes<HTMLDivElement>) {\n return <div {...props} {...mergeStyles({\n className: \"x12smttz x13fuv20 x178xt8z x9f619 x78zum5 x2lah0s x126z3so x1nhvcw1 x1qafhyn x8i8c5o x1clyivc xg0ps1x\"\n }, props)} />;\n}\n\n/**\n * The bottom sheets page's drag handle: a short bar above the sheet's\n * content, saying the panel is a bottom sheet. Place it first inside\n * `Sheet.Content`; above the medium breakpoint the panel is a side sheet and\n * this draws nothing.\n *\n * It is decoration rather than a control, and hidden from assistive\n * technology. Material's own handle drags a sheet between a collapsed and an\n * expanded height and dismisses it from the collapsed one; this panel has\n * one height and cannot be dragged, so a control that only looked draggable\n * would promise what it cannot do. Closing is already the scrim, Escape, and\n * any button given `slot=\"close\"`.\n */\nfunction SheetHandle(props: HTMLAttributes<HTMLDivElement>) {\n return <div aria-hidden=\"true\" {...props} {...mergeStyles({\n className: \"x6s0dn4 x9f619 x1s85apg x37i4ze x2lah0s xl56j7k x1xg6qyv\"\n }, props)}>\n <span className=\"x1ccu2yh xqu0tyb x1dkaolv x9f619 x1td3qas\" />\n </div>;\n}\nfunction SheetHeader(props: HTMLAttributes<HTMLDivElement>) {\n return <div {...props} {...mergeStyles({\n className: \"x6s0dn4 x1j6faob x1q0q8m5 xso031l x9f619 x78zum5 x2lah0s x1gka490 x1qughib x1cmllll xg0ps1x\"\n }, props)} />;\n}\n\n/**\n * Names the sheet. Rendered through React Aria's title slot, which is what\n * points the dialog's `aria-labelledby` at it — a sheet without one announces\n * itself as an unnamed dialog.\n */\nfunction SheetTitle(props: SheetTitleProps) {\n return <Heading slot=\"title\" {...props} {...mergeStyles({\n className: \"x9f619 x1w5n3ug xdy5w5q xete2z3 x14ijtet xug9e1u x2divse x1ghz6dp\"\n }, props)} />;\n}\nSheet.Body = SheetBody;\nSheet.Content = SheetContent;\nSheet.Footer = SheetFooter;\nSheet.Handle = SheetHandle;\nSheet.Header = SheetHeader;\nSheet.Title = SheetTitle;\n\n// The dialog's own props, plus the scrim's dismissal settings and the panel's\n// styling. A call site has no reason to know there are three elements:\n// `className` and `style` reach the panel, which is the one worth restyling\n// and positioning, and everything else lands on the dialog.\ntype SheetContentProps = Omit<DialogProps, 'className' | 'style'> & Pick<ModalOverlayProps, 'isDismissable' | 'isKeyboardDismissDisabled'> & {\n /** A function may compute the class from the panel's render state. */\n className?: ClassNameOrFunction<ModalRenderProps>;\n /**\n * Where to portal the panel and scrim. Defaults to the end of `<body>`,\n * which is right for an app that sets its StyleX theme on `:root`. An app\n * that scopes the theme to a subtree has to point this at an element inside\n * it, or the sheet renders outside the theme and falls back to the tokens'\n * `prefers-color-scheme` default.\n */\n container?: Element;\n /** A function may compute the style from the panel's render state. */\n style?: StyleOrFunction<ModalRenderProps>;\n};\ntype SheetTitleProps = HeadingProps;\nexport type { SheetContentProps, SheetProps, SheetTitleProps };\nexport default Sheet;"],"mappings":"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"}
|
|
@@ -70,14 +70,14 @@ function resizerClassName(state) {
|
|
|
70
70
|
}
|
|
71
71
|
function rowStyles(state) {
|
|
72
72
|
return {
|
|
73
|
-
0: { className: "xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z" },
|
|
74
|
-
4: { className: "xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z x83qkoq x1p2om7n xjbqb8w x1ypdohk" },
|
|
75
|
-
2: { className: "xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z xxwd9aw x1hei0q8 xp89om9 xscdzaa" },
|
|
76
|
-
6: { className: "xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z x1ypdohk xxwd9aw x1hei0q8 xp89om9 xscdzaa" },
|
|
77
|
-
1: { className: "xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z xjbqb8w x1xj74d8 x1h6gzvc" },
|
|
78
|
-
5: { className: "xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z xjbqb8w x1xj74d8 x1h6gzvc" },
|
|
79
|
-
3: { className: "xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z xjbqb8w x1xj74d8 x1h6gzvc" },
|
|
80
|
-
7: { className: "xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z xjbqb8w x1xj74d8 x1h6gzvc" }
|
|
73
|
+
0: { className: "xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn" },
|
|
74
|
+
4: { className: "xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x83qkoq x1p2om7n xjbqb8w x1ypdohk" },
|
|
75
|
+
2: { className: "xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn xxwd9aw x1hei0q8 xp89om9 xscdzaa" },
|
|
76
|
+
6: { className: "xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x1ypdohk xxwd9aw x1hei0q8 xp89om9 xscdzaa" },
|
|
77
|
+
1: { className: "xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn xjbqb8w x1xj74d8 x1h6gzvc" },
|
|
78
|
+
5: { className: "xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn xjbqb8w x1xj74d8 x1h6gzvc" },
|
|
79
|
+
3: { className: "xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn xjbqb8w x1xj74d8 x1h6gzvc" },
|
|
80
|
+
7: { className: "xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn xjbqb8w x1xj74d8 x1h6gzvc" }
|
|
81
81
|
}[!!(state.selectionMode !== "none") << 2 | !!state.isSelected << 1 | !!state.isDisabled << 0];
|
|
82
82
|
}
|
|
83
83
|
function sortArrowFor(direction) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["ReactNode","ColumnRenderProps","ColumnResizerRenderProps","CellProps","RACCellProps","ColumnProps","RACColumnProps","RowProps","RACRowProps","TableBodyProps","RACTableBodyProps","TableFooterProps","RACTableFooterProps","TableHeaderProps","RACTableHeaderProps","TableLoadMoreItemProps","RACTableLoadMoreItemProps","TableProps","RACTableProps","ResizableTableContainerProps","RowRenderProps","TableBodyRenderProps","stylex","createContext","useContext","Cell","RACCell","Column","RACColumn","ColumnResizer","RACColumnResizer","ResizableTableContainer","RACResizableTableContainer","Row","RACRow","Table","RACTable","TableBody","RACTableBody","TableFooter","RACTableFooter","TableHeader","RACTableHeader","TableLoadMoreItem","RACTableLoadMoreItem","CollectionLoadMore","ArrowDownwardGlyph","ArrowUpwardGlyph","mergeStatefulStyles","mergeStyles","colors","sizing","spacing","stateLayerOpacity","typography","Checkbox","SelectAllLabelContext","SelectLabelContext","Omit","T","className","emptyState","style","TableCellProps","children","selection","TableColumnProps","resizable","TableLoadMoreProps","label","onResize","onResizeEnd","resizeLabel","selectAllLabel","selectLabel","stickyHeader","TableRowProps","ResizeLabelContext","ResizableContext","StickyHeaderContext","cellContent","cellStyles","columnContent","state","sortArrowFor","sortDirection","resizerClassName","columnStyles","sticky","allowsSorting","dropAriaLevel","node","HTMLTableRowElement","removeAttribute","emptyContent","_state","resizableContainerClassName","isResizing","isFocusVisible","rowStyles","selectionMode","isSelected","isDisabled","direction","undefined","t0","$","_c","T0","t1","t2","t3","t4","t5","t6","t7","t8","t9","props","table","TableCell","TableColumn","resizableTable","0","1","TableLoadMore","TableRow","Body","Footer","Header","LoadMore"],"sources":["../../../src/components/table/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ColumnRenderProps, ColumnResizerRenderProps, CellProps as RACCellProps, ColumnProps as RACColumnProps, RowProps as RACRowProps, TableBodyProps as RACTableBodyProps, TableFooterProps as RACTableFooterProps, TableHeaderProps as RACTableHeaderProps, TableLoadMoreItemProps as RACTableLoadMoreItemProps, TableProps as RACTableProps, ResizableTableContainerProps, RowRenderProps, TableBodyRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useContext } from 'react';\nimport { Cell as RACCell, Column as RACColumn, ColumnResizer as RACColumnResizer, ResizableTableContainer as RACResizableTableContainer, Row as RACRow, Table as RACTable, TableBody as RACTableBody, TableFooter as RACTableFooter, TableHeader as RACTableHeader, TableLoadMoreItem as RACTableLoadMoreItem } from 'react-aria-components';\nimport { CollectionLoadMore } from '../../collection';\nimport { ArrowDownwardGlyph, ArrowUpwardGlyph } from '../../glyphs';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, sizing, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\nimport Checkbox from '../checkbox';\n\n// A grid of rows and columns, with sorting and selection. The design system\n// carries no data table page — it was dropped after Material Design 2 — so\n// the geometry comes from the archived one at\n// <https://m2.material.io/components/data-tables>, which is the page this\n// component is drawn from: a 56dp header row, 52dp body rows, 16dp of\n// padding on each side of a cell, a medium-weight header to set it apart\n// from the rows, and an arrow beside the name of the column being sorted.\n//\n// Its colour roles are the current system's rather than that page's, since\n// a table sits beside lists, cards and menus that all draw from the tokens\n// here. That means the row's state layers are the ones `src/row` uses — the\n// same hover, pressed and selected treatment a list row takes — so a\n// selected table row and a selected list row on one page cannot disagree.\n//\n// The row is not `src/row`, and that is the one place this departs from the\n// library's other collections. That module's row is a headline with a\n// supporting line and a slot at each end; a table row is a run of cells with\n// no such shape, and forcing one into the other would give every cell the\n// row's 56dp floor and body-large headline. The state layers are shared by\n// being written from the same tokens rather than by sharing the module.\n//\n// Four things are this component's own.\n//\n// **The rule between rows is drawn on the row, not on its cells.** A cell\n// cannot see whether its row is the first one, so a rule per cell either\n// doubles under the header or needs the row's position passed down. The\n// table collapses its borders, which is what lets a `<tr>` carry one.\n//\n// **A selecting table draws its checkbox where the call site puts it.**\n// `selection` on a column and on a cell renders the library's Checkbox in\n// React Aria's selection slot — the column's is select-all, the cell's is\n// that row's. It is a prop rather than an injected column because the header\n// and every row have to agree on how many columns there are, and only the\n// call site can keep that true.\n//\n// **A sortable column is the press target itself.** React Aria puts no\n// button inside the header cell; it makes the cell pressable and sets\n// `aria-sort` on it. So the arrow is content next to the name, and the\n// hover and pressed layers belong to the cell.\n//\n// **The header sticks only when asked.** A sticky header needs an opaque\n// background to scroll rows under, and that colour is only right when the\n// table is in something that scrolls. `stickyHeader` is what says so.\n//\n// **Resizing is asked for twice, and both are needed.** React Aria puts the\n// resize state on a container around the table and the handle inside a\n// column, so `resizable` on the table is what brings the container and\n// `resizable` on a column is what draws its handle. The archived page has no\n// resizer to take a treatment from — it predates the feature — so the handle\n// is the divider's own rule, thickening and taking the primary role while it\n// is dragged.\n//\n// **A resizable table stops filling its width.** The container sets\n// `table-layout: fixed` and `width: min-content` on the table as inline\n// styles, which no rule here can outrank; the container fills the width\n// instead and scrolls when the columns together are wider than it.\n//\n// One thing about React Aria's collection is worth knowing before writing a\n// call site. **A column's `id` and a row's `id` share one namespace**, and a\n// value used by both silently drops every column — the table then throws\n// \"Cell count must match column count\", naming the cells rather than the\n// duplicate key that caused it. Nothing here can catch it, since both ids\n// are the call site's to choose; the docstrings below say to keep them\n// apart, and the stories and tests use `col`-prefixed column ids so the two\n// sets cannot meet.\n\n// What the selection checkboxes are called. A context rather than a prop on\n// every column and cell, since it is the table's decision and repeating it\n// per row is how the two drift.\nconst SelectAllLabelContext = createContext('Select all');\nconst SelectLabelContext = createContext('Select');\ntype TableBodyProps<T extends object = object> = Omit<RACTableBodyProps<T>, 'className' | 'renderEmptyState' | 'style'> & {\n /** A function may compute the class from the body's render state. */\n className?: RACTableBodyProps<T>['className'];\n /**\n * What the table shows in place of rows when it has none. Drawn in a row\n * of its own spanning every column.\n */\n emptyState?: ReactNode;\n /** A function may compute the style from the body's render state. */\n style?: RACTableBodyProps<T>['style'];\n};\ntype TableCellProps = Omit<RACCellProps, 'children' | 'className' | 'style'> & {\n /** What the cell holds. */\n children?: ReactNode;\n /** A function may compute the class from the cell's render state. */\n className?: RACCellProps['className'];\n /**\n * Draws this row's selection checkbox instead of `children`. The row's own\n * text is what names the row; the box inside it takes the table's\n * `selectLabel`.\n */\n selection?: boolean;\n /** A function may compute the style from the cell's render state. */\n style?: RACCellProps['style'];\n};\ntype TableColumnProps = {\n /** The column's name. */\n children?: ReactNode;\n /** A function may compute the class from the column's render state. */\n className?: RACColumnProps['className'];\n /**\n * Draws a handle at the column's trailing edge that drags its width. Needs\n * the table's own `resizable` as well — React Aria keeps the resize state\n * on a container around the table, and without it there is nothing for a\n * handle to change. `defaultWidth`, `minWidth` and `maxWidth` are React\n * Aria's and apply only inside that container.\n */\n resizable?: boolean;\n /**\n * Draws the select-all checkbox instead of `children`, for the column the\n * rows put their own checkboxes in.\n */\n selection?: boolean;\n /** A function may compute the style from the column's render state. */\n style?: RACColumnProps['style'];\n} & Omit<RACColumnProps, 'children' | 'className' | 'style'>;\ntype TableFooterProps<T extends object = object> = RACTableFooterProps<T>;\ntype TableHeaderProps<T extends object = object> = RACTableHeaderProps<T>;\ntype TableLoadMoreProps = Omit<RACTableLoadMoreItemProps, 'children'> & {\n /**\n * What the row says while it is loading. Read by a screen reader; the ring\n * itself carries no text.\n * @default 'Loading more'\n */\n label?: string;\n};\ntype TableProps = Omit<RACTableProps, 'className' | 'style'> & {\n /** A function may compute the class from the table's render state. */\n className?: RACTableProps['className'];\n /** Called as a column is dragged, with every column's width. */\n onResize?: ResizableTableContainerProps['onResize'];\n /** Called once a drag ends, with every column's width. */\n onResizeEnd?: ResizableTableContainerProps['onResizeEnd'];\n /**\n * Lets columns marked `resizable` be dragged, by putting the table in the\n * container React Aria keeps the resize state on. A resizable table sizes\n * to its columns rather than to its parent, and that container is what\n * fills the width and scrolls instead.\n */\n resizable?: boolean;\n /**\n * What the resize handle is called, for a screen reader. React Aria\n * composes it with the column's own name.\n * @default 'Resize column'\n */\n resizeLabel?: string;\n /**\n * What the select-all checkbox is called, for a screen reader.\n * @default 'Select all'\n */\n selectAllLabel?: string;\n /**\n * What each row's selection checkbox is called, for a screen reader. The\n * row's own text is what names the row; this names the box inside it.\n * @default 'Select'\n */\n selectLabel?: string;\n /**\n * Holds the header row in place while the rows scroll under it. Needs the\n * table inside something that scrolls; on a table that does not, it draws\n * the same as without it.\n */\n stickyHeader?: boolean;\n /** A function may compute the style from the table's render state. */\n style?: RACTableProps['style'];\n};\ntype TableRowProps<T extends object = object> = Omit<RACRowProps<T>, 'className' | 'style'> & {\n /** A function may compute the class from the row's render state. */\n className?: RACRowProps<T>['className'];\n /** A function may compute the style from the row's render state. */\n style?: RACRowProps<T>['style'];\n};\n\n// What the resize handles are called, for the same reason the selection\n// labels travel this way: it is the table's decision, and repeating it per\n// column is how the two drift.\nconst ResizeLabelContext = createContext('Resize column');\n\n// Whether the table brought the container. React Aria's resizer throws\n// outright without one — \"Wrap your <Table> in a <ResizableTableContainer>\",\n// naming a component a consumer of this library never writes — so a column\n// asking to resize inside a table that does not would take the whole page\n// down. It draws no handle instead.\nconst ResizableContext = createContext(false);\n\n// Whether the header sticks, so a column reaches it without every call site\n// repeating the table's own decision on each one.\nconst StickyHeaderContext = createContext(false);\n\n// What a body cell draws, and the classes it draws with. Written as calls\n// rather than inline at the props, which is what react-perf's\n// no-new-function-as-prop and jsx-no-jsx-as-prop are after; the React\n// Compiler memoises the results on their inputs.\n// The return type is written out rather than inferred, here and in the two\n// below: `ReactNode` is a union that includes a promise, and a function\n// inferred as returning one has to be `async`.\nfunction cellContent(children: ReactNode, selection: boolean, label: string): ReactNode {\n if (!selection) {\n return children;\n }\n return <Checkbox aria-label={label} slot=\"selection\" />;\n}\nfunction cellStyles(selection: boolean) {\n return {\n 0: {\n className: \"x9f619 x790zyz x1yc453h xxymvpz xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn\"\n },\n 1: {\n className: \"x9f619 x790zyz x1yc453h xxymvpz xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x19ddzpn xuxw1ft\"\n }\n }[!!selection << 0];\n}\nfunction columnContent(children: ReactNode, selection: boolean, label: string, resizable: boolean, resizeLabel: string): RACColumnProps['children'] {\n if (selection) {\n return <Checkbox aria-label={label} slot=\"selection\" />;\n }\n // The handle is a sibling of the name rather than part of it: React Aria\n // renders it as its own element, positioned against the cell's trailing\n // edge, which the name's own box does not reach.\n return (state: ColumnRenderProps): ReactNode => <>\n <span className=\"x6s0dn4 x78zum5 x126z3so\">\n {children}\n {sortArrowFor(state.sortDirection)}\n </span>\n {resizable ? <RACColumnResizer aria-label={resizeLabel} className={resizerClassName} /> : null}\n </>;\n}\nfunction columnStyles(selection: boolean, sticky: boolean) {\n return (state: ColumnRenderProps) => ({\n 0: {\n className: \"x9f619 x790zyz x1yc453h xxymvpz x1ded5cy x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 x1n2onr6 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn\"\n },\n 4: {\n className: \"x9f619 x790zyz x1yc453h xxymvpz x1ded5cy x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x14s9m32 x1ixd52e x13vifvy x7wzq59 x1vjfegm\"\n },\n 2: {\n className: \"x9f619 x790zyz x1yc453h xxymvpz x1ded5cy x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 x1n2onr6 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x19ddzpn xuxw1ft\"\n },\n 6: {\n className: \"x9f619 x790zyz x1yc453h xxymvpz x1ded5cy x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x14s9m32 x1ixd52e x13vifvy x7wzq59 x1vjfegm x19ddzpn xuxw1ft\"\n },\n 1: {\n className: \"x9f619 x790zyz x1yc453h xxymvpz x1ded5cy x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 x1n2onr6 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x83qkoq x1p2om7n xjbqb8w x1ypdohk\"\n },\n 5: {\n className: \"x9f619 x790zyz x1yc453h xxymvpz x1ded5cy x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x1ixd52e x13vifvy x7wzq59 x1vjfegm x83qkoq x1p2om7n xjbqb8w x1ypdohk\"\n },\n 3: {\n className: \"x9f619 x790zyz x1yc453h xxymvpz x1ded5cy x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 x1n2onr6 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x19ddzpn xuxw1ft x83qkoq x1p2om7n xjbqb8w x1ypdohk\"\n },\n 7: {\n className: \"x9f619 x790zyz x1yc453h xxymvpz x1ded5cy x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x1ixd52e x13vifvy x7wzq59 x1vjfegm x19ddzpn xuxw1ft x83qkoq x1p2om7n xjbqb8w x1ypdohk\"\n }\n })[!!sticky << 2 | !!selection << 1 | !!state.allowsSorting << 0];\n}\n\n// React Aria puts `aria-level` on the load-more row, and `aria-level` is only\n// valid on a row inside a `treegrid` — a grid's rows have no level. axe flags\n// it as `aria-conditional-attr`, and this library's stories run axe as an\n// error, so a table with a load-more row would fail on an attribute nothing\n// here asks for.\n//\n// It cannot be turned off through props: React Aria writes it after spreading\n// what the call site passed, so `aria-level={undefined}` is overwritten. The\n// attribute is taken off the element instead. React writes an attribute only\n// when its prop changes between renders, and this one is always 1, so the\n// removal holds rather than being undone by the next render. `load more` in\n// index.test.tsx pins that it is gone, which is what would notice if React\n// Aria stopped setting it or started varying it.\nfunction dropAriaLevel(node: HTMLTableRowElement | null) {\n node?.removeAttribute('aria-level');\n}\n\n// What the body draws in place of rows. A call rather than a function\n// written at the prop, for the same reason the others are.\nfunction emptyContent(emptyState: ReactNode) {\n // The return type is written out rather than inferred: `ReactNode` is a\n // union that includes a promise, and a function inferred as returning one\n // has to be `async`.\n return (_state: TableBodyRenderProps): ReactNode => <span className=\"x9f619 x1w5n3ug x1lliihq xpo2rfv x193rfdd x1hews6w xn43zvd xv61bfh x1lrxzt4 x790zyz x2b8uid\">{emptyState}</span>;\n}\n\n// The container's class. React Aria takes a plain string here rather than a\n// function of render state, since the container reports none — so this is a\n// call rather than the function form the other parts pass.\nfunction resizableContainerClassName() {\n return {\n className: \"x9f619 xh8yej3 xw2csxc\"\n }.className ?? '';\n}\n\n// The handle's classes, from React Aria's own render state — it reports the\n// drag and the keyboard focus separately, and the two get one treatment.\nfunction resizerClassName(state: ColumnResizerRenderProps) {\n return {\n 0: {\n className: \"x1l12bh x5yr21d x9f619 xicojor x1i1rx1s x13vifvy xtijo5x x10l6tqk x5ve5x3\"\n },\n 1: {\n className: \"x5yr21d x9f619 xicojor x13vifvy xtijo5x x10l6tqk x5ve5x3 xnety89 xfo62xy\"\n }\n }[!!(state.isResizing || state.isFocusVisible) << 0].className ?? '';\n}\nfunction rowStyles(state: RowRenderProps) {\n return {\n 0: {\n className: \"xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z\"\n },\n 4: {\n className: \"xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z x83qkoq x1p2om7n xjbqb8w x1ypdohk\"\n },\n 2: {\n className: \"xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z xxwd9aw x1hei0q8 xp89om9 xscdzaa\"\n },\n 6: {\n className: \"xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z x1ypdohk xxwd9aw x1hei0q8 xp89om9 xscdzaa\"\n },\n 1: {\n className: \"xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z xjbqb8w x1xj74d8 x1h6gzvc\"\n },\n 5: {\n className: \"xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z xjbqb8w x1xj74d8 x1h6gzvc\"\n },\n 3: {\n className: \"xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z xjbqb8w x1xj74d8 x1h6gzvc\"\n },\n 7: {\n className: \"xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z xjbqb8w x1xj74d8 x1h6gzvc\"\n }\n }[!!(state.selectionMode !== 'none') << 2 | !!state.isSelected << 1 | !!state.isDisabled << 0];\n}\n\n// The arrow beside a sorted column's name. Nothing is drawn on a column that\n// is sortable but not currently sorted: the page puts the arrow next to the\n// column being sorted, and an arrow on every sortable column would say every\n// one of them was.\nfunction sortArrowFor(direction: 'ascending' | 'descending' | undefined) {\n if (direction === undefined) {\n return null;\n }\n return direction === 'ascending' ? <ArrowUpwardGlyph className=\"xmix8c7 x2lah0s x1xp8n7a\" /> : <ArrowDownwardGlyph className=\"xmix8c7 x2lah0s x1xp8n7a\" />;\n}\n\n/**\n * A grid of rows and columns. Sorting and selection are React Aria's: pass\n * `sortDescriptor` with `onSortChange` and mark the sortable columns\n * `allowsSorting`, and set `selectionMode` to `single` or `multiple` with\n * `selectedKeys` and `onSelectionChange`, or `defaultSelectedKeys`.\n *\n * ```tsx\n * <Table aria-label=\"Label\" selectionMode=\"multiple\">\n * <Table.Header>\n * <Table.Column selection />\n * <Table.Column id=\"name\" isRowHeader>Label</Table.Column>\n * </Table.Header>\n * <Table.Body>\n * <Table.Row id=\"first\">\n * <Table.Cell selection />\n * <Table.Cell>First item</Table.Cell>\n * </Table.Row>\n * </Table.Body>\n * </Table>\n * ```\n *\n * Composed from parts, since a cell takes arbitrary content: `Table.Header`,\n * `Table.Column`, `Table.Body`, `Table.Row`, `Table.Cell` and\n * `Table.Footer`. Name the table with `aria-label` or `aria-labelledby`, and\n * mark one column `isRowHeader` so a screen reader has something to read a\n * row by.\n *\n * The call site's `className` and `style` land on the table, which is the\n * element a layout positions.\n */\nfunction Table({\n onResize,\n onResizeEnd,\n resizable = false,\n resizeLabel = 'Resize column',\n selectAllLabel = 'Select all',\n selectLabel = 'Select',\n stickyHeader = false,\n ...props\n}: TableProps) {\n const table = <RACTable {...props} {...mergeStatefulStyles({\n className: \"x1mwwwfo x9f619 x139gbkf xpo2rfv x193rfdd x1hews6w xh8yej3 xn43zvd xv61bfh x1t137rt\"\n }, props)} />;\n return <SelectAllLabelContext value={selectAllLabel}>\n <SelectLabelContext value={selectLabel}>\n <ResizeLabelContext value={resizeLabel}>\n <ResizableContext value={resizable}>\n <StickyHeaderContext value={stickyHeader}>\n {resizable ? <RACResizableTableContainer className={resizableContainerClassName()} onResize={onResize} onResizeEnd={onResizeEnd}>\n {table}\n </RACResizableTableContainer> : table}\n </StickyHeaderContext>\n </ResizableContext>\n </ResizeLabelContext>\n </SelectLabelContext>\n </SelectAllLabelContext>;\n}\n\n/**\n * The rows. `emptyState` is what it shows when there are none — a table with\n * no rows and nothing to say in their place is a blank area with a header\n * over it.\n *\n * It carries no styles of its own, since every rule a body needs is drawn by\n * the rows inside it, so a `className` here lands on the `<tbody>` through\n * React Aria rather than through a merge.\n */\nfunction TableBody<T extends object = object>({\n emptyState,\n ...props\n}: TableBodyProps<T>) {\n return <RACTableBody<T> {...props} renderEmptyState={emptyState === undefined ? undefined : emptyContent(emptyState)} />;\n}\n\n/**\n * One cell. `selection` draws this row's checkbox in place of whatever else\n * the cell would hold.\n */\nfunction TableCell({\n children,\n selection = false,\n ...props\n}: TableCellProps) {\n const label = useContext(SelectLabelContext);\n return <RACCell {...props} {...mergeStatefulStyles(cellStyles(selection), props)}>\n {cellContent(children, selection, label)}\n </RACCell>;\n}\n\n/**\n * One column. `allowsSorting` is React Aria's and makes the header cell\n * itself the control that sorts; the arrow appears on the column the\n * `sortDescriptor` names. `isRowHeader` marks the column a screen reader\n * reads a row by.\n *\n * Its `id` shares a namespace with the rows', so give the two sets values\n * that cannot collide — a column and a row with one id between them leaves\n * the table with no columns at all.\n */\nfunction TableColumn({\n children,\n resizable = false,\n selection = false,\n ...props\n}: TableColumnProps) {\n const label = useContext(SelectAllLabelContext);\n const resizeLabel = useContext(ResizeLabelContext);\n const resizableTable = useContext(ResizableContext);\n const sticky = useContext(StickyHeaderContext);\n return <RACColumn {...props} {...mergeStatefulStyles(columnStyles(selection, sticky), props)}>\n {columnContent(children, selection, label, resizable && resizableTable, resizeLabel)}\n </RACColumn>;\n}\n\n/**\n * A row under the body, for totals and the like. It is not part of the\n * selection or the keyboard navigation — React Aria keeps it out of both.\n */\nfunction TableFooter<T extends object = object>(props: TableFooterProps<T>) {\n return <RACTableFooter<T> {...props} {...mergeStyles({\n className: \"x12smttz x13fuv20 x178xt8z x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4\"\n }, props)} />;\n}\n\n/**\n * The header row, holding the columns, and the rule drawn under it — which\n * moves to the cells when the header sticks, since a row group's border does\n * not travel with cells `position: sticky` has lifted out of it.\n */\nfunction TableHeader<T extends object = object>(props: TableHeaderProps<T>) {\n const sticky = useContext(StickyHeaderContext);\n return <RACTableHeader<T> {...props} {...mergeStatefulStyles({\n 0: {\n className: \"x1j6faob x1q0q8m5 xso031l\"\n },\n 1: {}\n }[!!sticky << 0], props)} />;\n}\n\n/**\n * The row the table shows while it is fetching more. React Aria calls\n * `onLoadMore` when this comes into view, and draws it only while\n * `isLoading`. It goes inside `Table.Body`, after the rows.\n */\nfunction TableLoadMore({\n label = 'Loading more',\n ...props\n}: TableLoadMoreProps) {\n return <RACTableLoadMoreItem {...props} {...mergeStyles({\n className: \"xdd8jsf\"\n }, props)} ref={dropAriaLevel}>\n <span className=\"x6s0dn4 x9f619 x78zum5 xl56j7k\">\n <CollectionLoadMore label={label} size=\"24px\" />\n </span>\n </RACTableLoadMoreItem>;\n}\n\n/**\n * One row. Give every row an `id` — that is the key selection is reported\n * by, and it has to differ from every column's. `onAction` runs when the\n * row is pressed.\n */\nfunction TableRow<T extends object = object>(props: TableRowProps<T>) {\n return <RACRow<T> {...props} {...mergeStatefulStyles(rowStyles, props)} />;\n}\nTable.Body = TableBody;\nTable.Cell = TableCell;\nTable.Column = TableColumn;\nTable.Footer = TableFooter;\nTable.Header = TableHeader;\nTable.LoadMore = TableLoadMore;\nTable.Row = TableRow;\nexport type { TableBodyProps, TableCellProps, TableColumnProps, TableFooterProps, TableHeaderProps, TableLoadMoreProps, TableProps, TableRowProps };\nexport default Table;"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["ReactNode","ColumnRenderProps","ColumnResizerRenderProps","CellProps","RACCellProps","ColumnProps","RACColumnProps","RowProps","RACRowProps","TableBodyProps","RACTableBodyProps","TableFooterProps","RACTableFooterProps","TableHeaderProps","RACTableHeaderProps","TableLoadMoreItemProps","RACTableLoadMoreItemProps","TableProps","RACTableProps","ResizableTableContainerProps","RowRenderProps","TableBodyRenderProps","stylex","createContext","useContext","Cell","RACCell","Column","RACColumn","ColumnResizer","RACColumnResizer","ResizableTableContainer","RACResizableTableContainer","Row","RACRow","Table","RACTable","TableBody","RACTableBody","TableFooter","RACTableFooter","TableHeader","RACTableHeader","TableLoadMoreItem","RACTableLoadMoreItem","CollectionLoadMore","ArrowDownwardGlyph","ArrowUpwardGlyph","mergeStatefulStyles","mergeStyles","colors","sizing","spacing","stateLayerOpacity","typography","Checkbox","SelectAllLabelContext","SelectLabelContext","Omit","T","className","emptyState","style","TableCellProps","children","selection","TableColumnProps","resizable","TableLoadMoreProps","label","onResize","onResizeEnd","resizeLabel","selectAllLabel","selectLabel","stickyHeader","TableRowProps","ResizeLabelContext","ResizableContext","StickyHeaderContext","cellContent","cellStyles","columnContent","state","sortArrowFor","sortDirection","resizerClassName","columnStyles","sticky","allowsSorting","dropAriaLevel","node","HTMLTableRowElement","removeAttribute","emptyContent","_state","resizableContainerClassName","isResizing","isFocusVisible","rowStyles","selectionMode","isSelected","isDisabled","direction","undefined","t0","$","_c","T0","t1","t2","t3","t4","t5","t6","t7","t8","t9","props","table","TableCell","TableColumn","resizableTable","0","1","TableLoadMore","TableRow","Body","Footer","Header","LoadMore"],"sources":["../../../src/components/table/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ColumnRenderProps, ColumnResizerRenderProps, CellProps as RACCellProps, ColumnProps as RACColumnProps, RowProps as RACRowProps, TableBodyProps as RACTableBodyProps, TableFooterProps as RACTableFooterProps, TableHeaderProps as RACTableHeaderProps, TableLoadMoreItemProps as RACTableLoadMoreItemProps, TableProps as RACTableProps, ResizableTableContainerProps, RowRenderProps, TableBodyRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useContext } from 'react';\nimport { Cell as RACCell, Column as RACColumn, ColumnResizer as RACColumnResizer, ResizableTableContainer as RACResizableTableContainer, Row as RACRow, Table as RACTable, TableBody as RACTableBody, TableFooter as RACTableFooter, TableHeader as RACTableHeader, TableLoadMoreItem as RACTableLoadMoreItem } from 'react-aria-components';\nimport { CollectionLoadMore } from '../../collection';\nimport { ArrowDownwardGlyph, ArrowUpwardGlyph } from '../../glyphs';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, sizing, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\nimport Checkbox from '../checkbox';\n\n// A grid of rows and columns, with sorting and selection. The design system\n// carries no data table page — it was dropped after Material Design 2 — so\n// the geometry comes from the archived one at\n// <https://m2.material.io/components/data-tables>, which is the page this\n// component is drawn from: a 56dp header row, 52dp body rows, 16dp of\n// padding on each side of a cell, a medium-weight header to set it apart\n// from the rows, and an arrow beside the name of the column being sorted.\n//\n// Its colour roles are the current system's rather than that page's, since\n// a table sits beside lists, cards and menus that all draw from the tokens\n// here. That means the row's state layers are the ones `src/row` uses — the\n// same hover, pressed and selected treatment a list row takes — so a\n// selected table row and a selected list row on one page cannot disagree.\n//\n// The row is not `src/row`, and that is the one place this departs from the\n// library's other collections. That module's row is a headline with a\n// supporting line and a slot at each end; a table row is a run of cells with\n// no such shape, and forcing one into the other would give every cell the\n// row's 56dp floor and body-large headline. The state layers are shared by\n// being written from the same tokens rather than by sharing the module.\n//\n// Four things are this component's own.\n//\n// **The rule between rows is drawn on the row, not on its cells.** A cell\n// cannot see whether its row is the first one, so a rule per cell either\n// doubles under the header or needs the row's position passed down. The\n// table collapses its borders, which is what lets a `<tr>` carry one.\n//\n// **A selecting table draws its checkbox where the call site puts it.**\n// `selection` on a column and on a cell renders the library's Checkbox in\n// React Aria's selection slot — the column's is select-all, the cell's is\n// that row's. It is a prop rather than an injected column because the header\n// and every row have to agree on how many columns there are, and only the\n// call site can keep that true.\n//\n// **A sortable column is the press target itself.** React Aria puts no\n// button inside the header cell; it makes the cell pressable and sets\n// `aria-sort` on it. So the arrow is content next to the name, and the\n// hover and pressed layers belong to the cell.\n//\n// **The header sticks only when asked.** A sticky header needs an opaque\n// background to scroll rows under, and that colour is only right when the\n// table is in something that scrolls. `stickyHeader` is what says so.\n//\n// **Resizing is asked for twice, and both are needed.** React Aria puts the\n// resize state on a container around the table and the handle inside a\n// column, so `resizable` on the table is what brings the container and\n// `resizable` on a column is what draws its handle. The archived page has no\n// resizer to take a treatment from — it predates the feature — so the handle\n// is the divider's own rule, thickening and taking the primary role while it\n// is dragged.\n//\n// **A resizable table stops filling its width.** The container sets\n// `table-layout: fixed` and `width: min-content` on the table as inline\n// styles, which no rule here can outrank; the container fills the width\n// instead and scrolls when the columns together are wider than it.\n//\n// One thing about React Aria's collection is worth knowing before writing a\n// call site. **A column's `id` and a row's `id` share one namespace**, and a\n// value used by both silently drops every column — the table then throws\n// \"Cell count must match column count\", naming the cells rather than the\n// duplicate key that caused it. Nothing here can catch it, since both ids\n// are the call site's to choose; the docstrings below say to keep them\n// apart, and the stories and tests use `col`-prefixed column ids so the two\n// sets cannot meet.\n\n// What the selection checkboxes are called. A context rather than a prop on\n// every column and cell, since it is the table's decision and repeating it\n// per row is how the two drift.\nconst SelectAllLabelContext = createContext('Select all');\nconst SelectLabelContext = createContext('Select');\ntype TableBodyProps<T extends object = object> = Omit<RACTableBodyProps<T>, 'className' | 'renderEmptyState' | 'style'> & {\n /** A function may compute the class from the body's render state. */\n className?: RACTableBodyProps<T>['className'];\n /**\n * What the table shows in place of rows when it has none. Drawn in a row\n * of its own spanning every column.\n */\n emptyState?: ReactNode;\n /** A function may compute the style from the body's render state. */\n style?: RACTableBodyProps<T>['style'];\n};\ntype TableCellProps = Omit<RACCellProps, 'children' | 'className' | 'style'> & {\n /** What the cell holds. */\n children?: ReactNode;\n /** A function may compute the class from the cell's render state. */\n className?: RACCellProps['className'];\n /**\n * Draws this row's selection checkbox instead of `children`. The row's own\n * text is what names the row; the box inside it takes the table's\n * `selectLabel`.\n */\n selection?: boolean;\n /** A function may compute the style from the cell's render state. */\n style?: RACCellProps['style'];\n};\ntype TableColumnProps = {\n /** The column's name. */\n children?: ReactNode;\n /** A function may compute the class from the column's render state. */\n className?: RACColumnProps['className'];\n /**\n * Draws a handle at the column's trailing edge that drags its width. Needs\n * the table's own `resizable` as well — React Aria keeps the resize state\n * on a container around the table, and without it there is nothing for a\n * handle to change. `defaultWidth`, `minWidth` and `maxWidth` are React\n * Aria's and apply only inside that container.\n */\n resizable?: boolean;\n /**\n * Draws the select-all checkbox instead of `children`, for the column the\n * rows put their own checkboxes in.\n */\n selection?: boolean;\n /** A function may compute the style from the column's render state. */\n style?: RACColumnProps['style'];\n} & Omit<RACColumnProps, 'children' | 'className' | 'style'>;\ntype TableFooterProps<T extends object = object> = RACTableFooterProps<T>;\ntype TableHeaderProps<T extends object = object> = RACTableHeaderProps<T>;\ntype TableLoadMoreProps = Omit<RACTableLoadMoreItemProps, 'children'> & {\n /**\n * What the row says while it is loading. Read by a screen reader; the ring\n * itself carries no text.\n * @default 'Loading more'\n */\n label?: string;\n};\ntype TableProps = Omit<RACTableProps, 'className' | 'style'> & {\n /** A function may compute the class from the table's render state. */\n className?: RACTableProps['className'];\n /** Called as a column is dragged, with every column's width. */\n onResize?: ResizableTableContainerProps['onResize'];\n /** Called once a drag ends, with every column's width. */\n onResizeEnd?: ResizableTableContainerProps['onResizeEnd'];\n /**\n * Lets columns marked `resizable` be dragged, by putting the table in the\n * container React Aria keeps the resize state on. A resizable table sizes\n * to its columns rather than to its parent, and that container is what\n * fills the width and scrolls instead.\n */\n resizable?: boolean;\n /**\n * What the resize handle is called, for a screen reader. React Aria\n * composes it with the column's own name.\n * @default 'Resize column'\n */\n resizeLabel?: string;\n /**\n * What the select-all checkbox is called, for a screen reader.\n * @default 'Select all'\n */\n selectAllLabel?: string;\n /**\n * What each row's selection checkbox is called, for a screen reader. The\n * row's own text is what names the row; this names the box inside it.\n * @default 'Select'\n */\n selectLabel?: string;\n /**\n * Holds the header row in place while the rows scroll under it. Needs the\n * table inside something that scrolls; on a table that does not, it draws\n * the same as without it.\n */\n stickyHeader?: boolean;\n /** A function may compute the style from the table's render state. */\n style?: RACTableProps['style'];\n};\ntype TableRowProps<T extends object = object> = Omit<RACRowProps<T>, 'className' | 'style'> & {\n /** A function may compute the class from the row's render state. */\n className?: RACRowProps<T>['className'];\n /** A function may compute the style from the row's render state. */\n style?: RACRowProps<T>['style'];\n};\n\n// What the resize handles are called, for the same reason the selection\n// labels travel this way: it is the table's decision, and repeating it per\n// column is how the two drift.\nconst ResizeLabelContext = createContext('Resize column');\n\n// Whether the table brought the container. React Aria's resizer throws\n// outright without one — \"Wrap your <Table> in a <ResizableTableContainer>\",\n// naming a component a consumer of this library never writes — so a column\n// asking to resize inside a table that does not would take the whole page\n// down. It draws no handle instead.\nconst ResizableContext = createContext(false);\n\n// Whether the header sticks, so a column reaches it without every call site\n// repeating the table's own decision on each one.\nconst StickyHeaderContext = createContext(false);\n\n// What a body cell draws, and the classes it draws with. Written as calls\n// rather than inline at the props, which is what react-perf's\n// no-new-function-as-prop and jsx-no-jsx-as-prop are after; the React\n// Compiler memoises the results on their inputs.\n// The return type is written out rather than inferred, here and in the two\n// below: `ReactNode` is a union that includes a promise, and a function\n// inferred as returning one has to be `async`.\nfunction cellContent(children: ReactNode, selection: boolean, label: string): ReactNode {\n if (!selection) {\n return children;\n }\n return <Checkbox aria-label={label} slot=\"selection\" />;\n}\nfunction cellStyles(selection: boolean) {\n return {\n 0: {\n className: \"x9f619 x790zyz x1yc453h xxymvpz xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn\"\n },\n 1: {\n className: \"x9f619 x790zyz x1yc453h xxymvpz xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x19ddzpn xuxw1ft\"\n }\n }[!!selection << 0];\n}\nfunction columnContent(children: ReactNode, selection: boolean, label: string, resizable: boolean, resizeLabel: string): RACColumnProps['children'] {\n if (selection) {\n return <Checkbox aria-label={label} slot=\"selection\" />;\n }\n // The handle is a sibling of the name rather than part of it: React Aria\n // renders it as its own element, positioned against the cell's trailing\n // edge, which the name's own box does not reach.\n return (state: ColumnRenderProps): ReactNode => <>\n <span className=\"x6s0dn4 x78zum5 x126z3so\">\n {children}\n {sortArrowFor(state.sortDirection)}\n </span>\n {resizable ? <RACColumnResizer aria-label={resizeLabel} className={resizerClassName} /> : null}\n </>;\n}\nfunction columnStyles(selection: boolean, sticky: boolean) {\n return (state: ColumnRenderProps) => ({\n 0: {\n className: \"x9f619 x790zyz x1yc453h xxymvpz x1ded5cy x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 x1n2onr6 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn\"\n },\n 4: {\n className: \"x9f619 x790zyz x1yc453h xxymvpz x1ded5cy x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x14s9m32 x1ixd52e x13vifvy x7wzq59 x1vjfegm\"\n },\n 2: {\n className: \"x9f619 x790zyz x1yc453h xxymvpz x1ded5cy x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 x1n2onr6 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x19ddzpn xuxw1ft\"\n },\n 6: {\n className: \"x9f619 x790zyz x1yc453h xxymvpz x1ded5cy x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x14s9m32 x1ixd52e x13vifvy x7wzq59 x1vjfegm x19ddzpn xuxw1ft\"\n },\n 1: {\n className: \"x9f619 x790zyz x1yc453h xxymvpz x1ded5cy x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 x1n2onr6 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x83qkoq x1p2om7n xjbqb8w x1ypdohk\"\n },\n 5: {\n className: \"x9f619 x790zyz x1yc453h xxymvpz x1ded5cy x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x1ixd52e x13vifvy x7wzq59 x1vjfegm x83qkoq x1p2om7n xjbqb8w x1ypdohk\"\n },\n 3: {\n className: \"x9f619 x790zyz x1yc453h xxymvpz x1ded5cy x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 x1n2onr6 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x19ddzpn xuxw1ft x83qkoq x1p2om7n xjbqb8w x1ypdohk\"\n },\n 7: {\n className: \"x9f619 x790zyz x1yc453h xxymvpz x1ded5cy x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x1ixd52e x13vifvy x7wzq59 x1vjfegm x19ddzpn xuxw1ft x83qkoq x1p2om7n xjbqb8w x1ypdohk\"\n }\n })[!!sticky << 2 | !!selection << 1 | !!state.allowsSorting << 0];\n}\n\n// React Aria puts `aria-level` on the load-more row, and `aria-level` is only\n// valid on a row inside a `treegrid` — a grid's rows have no level. axe flags\n// it as `aria-conditional-attr`, and this library's stories run axe as an\n// error, so a table with a load-more row would fail on an attribute nothing\n// here asks for.\n//\n// It cannot be turned off through props: React Aria writes it after spreading\n// what the call site passed, so `aria-level={undefined}` is overwritten. The\n// attribute is taken off the element instead. React writes an attribute only\n// when its prop changes between renders, and this one is always 1, so the\n// removal holds rather than being undone by the next render. `load more` in\n// index.test.tsx pins that it is gone, which is what would notice if React\n// Aria stopped setting it or started varying it.\nfunction dropAriaLevel(node: HTMLTableRowElement | null) {\n node?.removeAttribute('aria-level');\n}\n\n// What the body draws in place of rows. A call rather than a function\n// written at the prop, for the same reason the others are.\nfunction emptyContent(emptyState: ReactNode) {\n // The return type is written out rather than inferred: `ReactNode` is a\n // union that includes a promise, and a function inferred as returning one\n // has to be `async`.\n return (_state: TableBodyRenderProps): ReactNode => <span className=\"x9f619 x1w5n3ug x1lliihq xpo2rfv x193rfdd x1hews6w xn43zvd xv61bfh x1lrxzt4 x790zyz x2b8uid\">{emptyState}</span>;\n}\n\n// The container's class. React Aria takes a plain string here rather than a\n// function of render state, since the container reports none — so this is a\n// call rather than the function form the other parts pass.\nfunction resizableContainerClassName() {\n return {\n className: \"x9f619 xh8yej3 xw2csxc\"\n }.className ?? '';\n}\n\n// The handle's classes, from React Aria's own render state — it reports the\n// drag and the keyboard focus separately, and the two get one treatment.\nfunction resizerClassName(state: ColumnResizerRenderProps) {\n return {\n 0: {\n className: \"x1l12bh x5yr21d x9f619 xicojor x1i1rx1s x13vifvy xtijo5x x10l6tqk x5ve5x3\"\n },\n 1: {\n className: \"x5yr21d x9f619 xicojor x13vifvy xtijo5x x10l6tqk x5ve5x3 xnety89 xfo62xy\"\n }\n }[!!(state.isResizing || state.isFocusVisible) << 0].className ?? '';\n}\nfunction rowStyles(state: RowRenderProps) {\n return {\n 0: {\n className: \"xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn\"\n },\n 4: {\n className: \"xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x83qkoq x1p2om7n xjbqb8w x1ypdohk\"\n },\n 2: {\n className: \"xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn xxwd9aw x1hei0q8 xp89om9 xscdzaa\"\n },\n 6: {\n className: \"xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x1ypdohk xxwd9aw x1hei0q8 xp89om9 xscdzaa\"\n },\n 1: {\n className: \"xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn xjbqb8w x1xj74d8 x1h6gzvc\"\n },\n 5: {\n className: \"xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn xjbqb8w x1xj74d8 x1h6gzvc\"\n },\n 3: {\n className: \"xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn xjbqb8w x1xj74d8 x1h6gzvc\"\n },\n 7: {\n className: \"xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn xjbqb8w x1xj74d8 x1h6gzvc\"\n }\n }[!!(state.selectionMode !== 'none') << 2 | !!state.isSelected << 1 | !!state.isDisabled << 0];\n}\n\n// The arrow beside a sorted column's name. Nothing is drawn on a column that\n// is sortable but not currently sorted: the page puts the arrow next to the\n// column being sorted, and an arrow on every sortable column would say every\n// one of them was.\nfunction sortArrowFor(direction: 'ascending' | 'descending' | undefined) {\n if (direction === undefined) {\n return null;\n }\n return direction === 'ascending' ? <ArrowUpwardGlyph className=\"xmix8c7 x2lah0s x1xp8n7a\" /> : <ArrowDownwardGlyph className=\"xmix8c7 x2lah0s x1xp8n7a\" />;\n}\n\n/**\n * A grid of rows and columns. Sorting and selection are React Aria's: pass\n * `sortDescriptor` with `onSortChange` and mark the sortable columns\n * `allowsSorting`, and set `selectionMode` to `single` or `multiple` with\n * `selectedKeys` and `onSelectionChange`, or `defaultSelectedKeys`.\n *\n * ```tsx\n * <Table aria-label=\"Label\" selectionMode=\"multiple\">\n * <Table.Header>\n * <Table.Column selection />\n * <Table.Column id=\"name\" isRowHeader>Label</Table.Column>\n * </Table.Header>\n * <Table.Body>\n * <Table.Row id=\"first\">\n * <Table.Cell selection />\n * <Table.Cell>First item</Table.Cell>\n * </Table.Row>\n * </Table.Body>\n * </Table>\n * ```\n *\n * Composed from parts, since a cell takes arbitrary content: `Table.Header`,\n * `Table.Column`, `Table.Body`, `Table.Row`, `Table.Cell` and\n * `Table.Footer`. Name the table with `aria-label` or `aria-labelledby`, and\n * mark one column `isRowHeader` so a screen reader has something to read a\n * row by.\n *\n * The call site's `className` and `style` land on the table, which is the\n * element a layout positions.\n */\nfunction Table({\n onResize,\n onResizeEnd,\n resizable = false,\n resizeLabel = 'Resize column',\n selectAllLabel = 'Select all',\n selectLabel = 'Select',\n stickyHeader = false,\n ...props\n}: TableProps) {\n const table = <RACTable {...props} {...mergeStatefulStyles({\n className: \"x1mwwwfo x9f619 x139gbkf xpo2rfv x193rfdd x1hews6w xh8yej3 xn43zvd xv61bfh x1t137rt\"\n }, props)} />;\n return <SelectAllLabelContext value={selectAllLabel}>\n <SelectLabelContext value={selectLabel}>\n <ResizeLabelContext value={resizeLabel}>\n <ResizableContext value={resizable}>\n <StickyHeaderContext value={stickyHeader}>\n {resizable ? <RACResizableTableContainer className={resizableContainerClassName()} onResize={onResize} onResizeEnd={onResizeEnd}>\n {table}\n </RACResizableTableContainer> : table}\n </StickyHeaderContext>\n </ResizableContext>\n </ResizeLabelContext>\n </SelectLabelContext>\n </SelectAllLabelContext>;\n}\n\n/**\n * The rows. `emptyState` is what it shows when there are none — a table with\n * no rows and nothing to say in their place is a blank area with a header\n * over it.\n *\n * It carries no styles of its own, since every rule a body needs is drawn by\n * the rows inside it, so a `className` here lands on the `<tbody>` through\n * React Aria rather than through a merge.\n */\nfunction TableBody<T extends object = object>({\n emptyState,\n ...props\n}: TableBodyProps<T>) {\n return <RACTableBody<T> {...props} renderEmptyState={emptyState === undefined ? undefined : emptyContent(emptyState)} />;\n}\n\n/**\n * One cell. `selection` draws this row's checkbox in place of whatever else\n * the cell would hold.\n */\nfunction TableCell({\n children,\n selection = false,\n ...props\n}: TableCellProps) {\n const label = useContext(SelectLabelContext);\n return <RACCell {...props} {...mergeStatefulStyles(cellStyles(selection), props)}>\n {cellContent(children, selection, label)}\n </RACCell>;\n}\n\n/**\n * One column. `allowsSorting` is React Aria's and makes the header cell\n * itself the control that sorts; the arrow appears on the column the\n * `sortDescriptor` names. `isRowHeader` marks the column a screen reader\n * reads a row by.\n *\n * Its `id` shares a namespace with the rows', so give the two sets values\n * that cannot collide — a column and a row with one id between them leaves\n * the table with no columns at all.\n */\nfunction TableColumn({\n children,\n resizable = false,\n selection = false,\n ...props\n}: TableColumnProps) {\n const label = useContext(SelectAllLabelContext);\n const resizeLabel = useContext(ResizeLabelContext);\n const resizableTable = useContext(ResizableContext);\n const sticky = useContext(StickyHeaderContext);\n return <RACColumn {...props} {...mergeStatefulStyles(columnStyles(selection, sticky), props)}>\n {columnContent(children, selection, label, resizable && resizableTable, resizeLabel)}\n </RACColumn>;\n}\n\n/**\n * A row under the body, for totals and the like. It is not part of the\n * selection or the keyboard navigation — React Aria keeps it out of both.\n */\nfunction TableFooter<T extends object = object>(props: TableFooterProps<T>) {\n return <RACTableFooter<T> {...props} {...mergeStyles({\n className: \"x12smttz x13fuv20 x178xt8z x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4\"\n }, props)} />;\n}\n\n/**\n * The header row, holding the columns, and the rule drawn under it — which\n * moves to the cells when the header sticks, since a row group's border does\n * not travel with cells `position: sticky` has lifted out of it.\n */\nfunction TableHeader<T extends object = object>(props: TableHeaderProps<T>) {\n const sticky = useContext(StickyHeaderContext);\n return <RACTableHeader<T> {...props} {...mergeStatefulStyles({\n 0: {\n className: \"x1j6faob x1q0q8m5 xso031l\"\n },\n 1: {}\n }[!!sticky << 0], props)} />;\n}\n\n/**\n * The row the table shows while it is fetching more. React Aria calls\n * `onLoadMore` when this comes into view, and draws it only while\n * `isLoading`. It goes inside `Table.Body`, after the rows.\n */\nfunction TableLoadMore({\n label = 'Loading more',\n ...props\n}: TableLoadMoreProps) {\n return <RACTableLoadMoreItem {...props} {...mergeStyles({\n className: \"xdd8jsf\"\n }, props)} ref={dropAriaLevel}>\n <span className=\"x6s0dn4 x9f619 x78zum5 xl56j7k\">\n <CollectionLoadMore label={label} size=\"24px\" />\n </span>\n </RACTableLoadMoreItem>;\n}\n\n/**\n * One row. Give every row an `id` — that is the key selection is reported\n * by, and it has to differ from every column's. `onAction` runs when the\n * row is pressed.\n */\nfunction TableRow<T extends object = object>(props: TableRowProps<T>) {\n return <RACRow<T> {...props} {...mergeStatefulStyles(rowStyles, props)} />;\n}\nTable.Body = TableBody;\nTable.Cell = TableCell;\nTable.Column = TableColumn;\nTable.Footer = TableFooter;\nTable.Header = TableHeader;\nTable.LoadMore = TableLoadMore;\nTable.Row = TableRow;\nexport type { TableBodyProps, TableCellProps, TableColumnProps, TableFooterProps, TableHeaderProps, TableLoadMoreProps, TableProps, TableRowProps };\nexport default Table;"],"mappings":"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"}
|
package/dist/field/index.js
CHANGED
|
@@ -5,7 +5,7 @@ import { fieldChromeStyles, groupStyles } from "./styles.js";
|
|
|
5
5
|
import { c } from "react/compiler-runtime";
|
|
6
6
|
import { createContext, useContext } from "react";
|
|
7
7
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
8
|
-
import { Button, FieldError, FieldErrorContext, Group, Input, InputContext, Label, SelectStateContext, Text, TextArea, TextAreaContext, VisuallyHidden, useSlottedContext } from "react-aria-components";
|
|
8
|
+
import { Button, FieldError, FieldErrorContext, Group, Input, InputContext, Label, SelectStateContext, Text, TextArea, TextAreaContext, TextContext, VisuallyHidden, useSlottedContext } from "react-aria-components";
|
|
9
9
|
//#region src/field/index.tsx
|
|
10
10
|
const OUTSIDE_BOX = {
|
|
11
11
|
label: "none",
|
|
@@ -349,7 +349,7 @@ function FieldInput(t0) {
|
|
|
349
349
|
*/
|
|
350
350
|
function FieldTextArea(t0) {
|
|
351
351
|
const $ = c(17);
|
|
352
|
-
const { autosize: t1, placeholder, ...props$
|
|
352
|
+
const { autosize: t1, placeholder, ...props$4 } = t0;
|
|
353
353
|
const autosize = t1 === void 0 ? false : t1;
|
|
354
354
|
const box = useContext(BoxContext);
|
|
355
355
|
const context = useSlottedContext(TextAreaContext);
|
|
@@ -363,16 +363,16 @@ function FieldTextArea(t0) {
|
|
|
363
363
|
$[1] = box;
|
|
364
364
|
$[2] = t3;
|
|
365
365
|
} else t3 = $[2];
|
|
366
|
-
const t4 = mergeStatefulStyles(t3, props$
|
|
366
|
+
const t4 = mergeStatefulStyles(t3, props$4);
|
|
367
367
|
let t5;
|
|
368
|
-
if ($[3] !== T0 || $[4] !== props$
|
|
368
|
+
if ($[3] !== T0 || $[4] !== props$4 || $[5] !== t2 || $[6] !== t4) {
|
|
369
369
|
t5 = /* @__PURE__ */ jsx(T0, {
|
|
370
370
|
placeholder: t2,
|
|
371
|
-
...props$
|
|
371
|
+
...props$4,
|
|
372
372
|
...t4
|
|
373
373
|
});
|
|
374
374
|
$[3] = T0;
|
|
375
|
-
$[4] = props$
|
|
375
|
+
$[4] = props$4;
|
|
376
376
|
$[5] = t2;
|
|
377
377
|
$[6] = t4;
|
|
378
378
|
$[7] = t5;
|
|
@@ -423,21 +423,21 @@ function FieldTextArea(t0) {
|
|
|
423
423
|
* the fill, the underline and the focus indicator, and it lights up while
|
|
424
424
|
* this has focus because the indicator follows focus within.
|
|
425
425
|
*/
|
|
426
|
-
function FieldTrigger(props$
|
|
426
|
+
function FieldTrigger(props$5) {
|
|
427
427
|
const $ = c(5);
|
|
428
428
|
let t0;
|
|
429
|
-
if ($[0] !== props$
|
|
430
|
-
t0 = mergeStatefulStyles(props(fieldChromeStyles.trigger), props$
|
|
431
|
-
$[0] = props$
|
|
429
|
+
if ($[0] !== props$5) {
|
|
430
|
+
t0 = mergeStatefulStyles(props(fieldChromeStyles.trigger), props$5);
|
|
431
|
+
$[0] = props$5;
|
|
432
432
|
$[1] = t0;
|
|
433
433
|
} else t0 = $[1];
|
|
434
434
|
let t1;
|
|
435
|
-
if ($[2] !== props$
|
|
435
|
+
if ($[2] !== props$5 || $[3] !== t0) {
|
|
436
436
|
t1 = /* @__PURE__ */ jsx(Button, {
|
|
437
|
-
...props$
|
|
437
|
+
...props$5,
|
|
438
438
|
...t0
|
|
439
439
|
});
|
|
440
|
-
$[2] = props$
|
|
440
|
+
$[2] = props$5;
|
|
441
441
|
$[3] = t0;
|
|
442
442
|
$[4] = t1;
|
|
443
443
|
} else t1 = $[4];
|
|
@@ -460,19 +460,19 @@ function FieldTrigger(props$1) {
|
|
|
460
460
|
*/
|
|
461
461
|
function FieldValue(t0) {
|
|
462
462
|
const $ = c(3);
|
|
463
|
-
const { isFocused: t1, isPlaceholder: t2, ...props$
|
|
463
|
+
const { isFocused: t1, isPlaceholder: t2, ...props$3 } = t0;
|
|
464
464
|
const isFocused = t1 === void 0 ? false : t1;
|
|
465
465
|
const isPlaceholder = t2 === void 0 ? false : t2;
|
|
466
466
|
const box = useContext(BoxContext);
|
|
467
467
|
const hidden = isPlaceholder && box.label === "floating" && !isFocused;
|
|
468
|
-
const t3 = mergeStyles(props(fieldChromeStyles.input, fieldChromeStyles.value, box.underLabel && fieldChromeStyles.inputUnderLabel, isPlaceholder && fieldChromeStyles.valuePlaceholder, hidden && fieldChromeStyles.valuePlaceholderHidden), props$
|
|
468
|
+
const t3 = mergeStyles(props(fieldChromeStyles.input, fieldChromeStyles.value, box.underLabel && fieldChromeStyles.inputUnderLabel, isPlaceholder && fieldChromeStyles.valuePlaceholder, hidden && fieldChromeStyles.valuePlaceholderHidden), props$3);
|
|
469
469
|
let t4;
|
|
470
|
-
if ($[0] !== props$
|
|
470
|
+
if ($[0] !== props$3 || $[1] !== t3) {
|
|
471
471
|
t4 = /* @__PURE__ */ jsx("span", {
|
|
472
|
-
...props$
|
|
472
|
+
...props$3,
|
|
473
473
|
...t3
|
|
474
474
|
});
|
|
475
|
-
$[0] = props$
|
|
475
|
+
$[0] = props$3;
|
|
476
476
|
$[1] = t3;
|
|
477
477
|
$[2] = t4;
|
|
478
478
|
} else t4 = $[2];
|
|
@@ -504,7 +504,7 @@ function FieldLabel(t0) {
|
|
|
504
504
|
let t1;
|
|
505
505
|
let t2;
|
|
506
506
|
if ($[0] !== t0) {
|
|
507
|
-
const { state: t3, variant: t4, ...props$
|
|
507
|
+
const { state: t3, variant: t4, ...props$1 } = t0;
|
|
508
508
|
const state = t3 === void 0 ? NO_STATE : t3;
|
|
509
509
|
const variant = t4 === void 0 ? "field" : t4;
|
|
510
510
|
const { isDisabled: t5, isFocusWithin: t6, isInvalid: t7 } = state;
|
|
@@ -512,8 +512,8 @@ function FieldLabel(t0) {
|
|
|
512
512
|
const isFocusWithin = t6 === void 0 ? false : t6;
|
|
513
513
|
const isInvalid = t7 === void 0 ? false : t7;
|
|
514
514
|
T0 = Label;
|
|
515
|
-
t1 = props$
|
|
516
|
-
t2 = mergeStyles(props(fieldChromeStyles.label, variant === "group" && groupStyles.label, isDisabled && fieldChromeStyles.labelDisabled, isInvalid && fieldChromeStyles.labelError, !isDisabled && !isInvalid && isFocusWithin && fieldChromeStyles.labelFocused), props$
|
|
515
|
+
t1 = props$1;
|
|
516
|
+
t2 = mergeStyles(props(fieldChromeStyles.label, variant === "group" && groupStyles.label, isDisabled && fieldChromeStyles.labelDisabled, isInvalid && fieldChromeStyles.labelError, !isDisabled && !isInvalid && isFocusWithin && fieldChromeStyles.labelFocused), props$1);
|
|
517
517
|
$[0] = t0;
|
|
518
518
|
$[1] = T0;
|
|
519
519
|
$[2] = t1;
|
|
@@ -546,7 +546,7 @@ function FieldLabel(t0) {
|
|
|
546
546
|
* the field's validation state is read for.
|
|
547
547
|
*/
|
|
548
548
|
function FieldMessage(t0) {
|
|
549
|
-
const $ = c(
|
|
549
|
+
const $ = c(26);
|
|
550
550
|
const { characterCount: t1, characterLimitLabel, description, error, inset: t2, maxLength } = t0;
|
|
551
551
|
const characterCount = t1 === void 0 ? false : t1;
|
|
552
552
|
const inset = t2 === void 0 ? true : t2;
|
|
@@ -555,6 +555,7 @@ function FieldMessage(t0) {
|
|
|
555
555
|
const input = useSlottedContext(InputContext);
|
|
556
556
|
const textArea = useSlottedContext(TextAreaContext);
|
|
557
557
|
const insideForm = useInsideForm();
|
|
558
|
+
const text = useContext(TextContext);
|
|
558
559
|
const limit = maxLength === void 0 ? void 0 : characterLimitLabel ?? `Up to ${maxLength} character${maxLength === 1 ? "" : "s"}`;
|
|
559
560
|
let t3;
|
|
560
561
|
if ($[0] !== limit) {
|
|
@@ -589,55 +590,75 @@ function FieldMessage(t0) {
|
|
|
589
590
|
$[5] = t4;
|
|
590
591
|
} else t4 = $[5];
|
|
591
592
|
const described = t4;
|
|
593
|
+
const errorSlot = text !== null && typeof text === "object" && "slots" in text && text.slots?.errorMessage !== void 0;
|
|
592
594
|
let t5;
|
|
593
|
-
if ($[6]
|
|
594
|
-
t5 = props(fieldChromeStyles.message, fieldChromeStyles.
|
|
595
|
-
$[6] =
|
|
596
|
-
|
|
597
|
-
|
|
595
|
+
if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
|
|
596
|
+
t5 = props(fieldChromeStyles.message, fieldChromeStyles.messageError);
|
|
597
|
+
$[6] = t5;
|
|
598
|
+
} else t5 = $[6];
|
|
599
|
+
const messageStyles = t5;
|
|
598
600
|
let t6;
|
|
599
|
-
if ($[
|
|
600
|
-
t6 =
|
|
601
|
-
|
|
601
|
+
if ($[7] !== error || $[8] !== errorSlot) {
|
|
602
|
+
t6 = errorSlot ? /* @__PURE__ */ jsx(Text, {
|
|
603
|
+
slot: "errorMessage",
|
|
604
|
+
...messageStyles,
|
|
602
605
|
children: error
|
|
603
|
-
}) : /* @__PURE__ */ jsx(
|
|
604
|
-
...
|
|
606
|
+
}) : /* @__PURE__ */ jsx("span", {
|
|
607
|
+
...messageStyles,
|
|
605
608
|
children: error
|
|
606
609
|
});
|
|
607
|
-
$[
|
|
608
|
-
$[
|
|
609
|
-
$[
|
|
610
|
-
} else t6 = $[
|
|
610
|
+
$[7] = error;
|
|
611
|
+
$[8] = errorSlot;
|
|
612
|
+
$[9] = t6;
|
|
613
|
+
} else t6 = $[9];
|
|
614
|
+
const written = t6;
|
|
611
615
|
let t7;
|
|
612
|
-
if ($[
|
|
613
|
-
t7 =
|
|
616
|
+
if ($[10] !== inset) {
|
|
617
|
+
t7 = props(fieldChromeStyles.message, fieldChromeStyles.messageLine, inset && fieldChromeStyles.messageInset);
|
|
618
|
+
$[10] = inset;
|
|
619
|
+
$[11] = t7;
|
|
620
|
+
} else t7 = $[11];
|
|
621
|
+
let t8;
|
|
622
|
+
if ($[12] !== error || $[13] !== validation || $[14] !== written) {
|
|
623
|
+
t8 = validation === null && error !== void 0 ? written : /* @__PURE__ */ jsx(FieldError, {
|
|
624
|
+
...props(fieldChromeStyles.message, fieldChromeStyles.messageError),
|
|
625
|
+
children: error
|
|
626
|
+
});
|
|
627
|
+
$[12] = error;
|
|
628
|
+
$[13] = validation;
|
|
629
|
+
$[14] = written;
|
|
630
|
+
$[15] = t8;
|
|
631
|
+
} else t8 = $[15];
|
|
632
|
+
let t9;
|
|
633
|
+
if ($[16] !== characterCount || $[17] !== invalid || $[18] !== length || $[19] !== maxLength) {
|
|
634
|
+
t9 = characterCount ? /* @__PURE__ */ jsx("span", {
|
|
614
635
|
"aria-hidden": "true",
|
|
615
636
|
...props(fieldChromeStyles.message, fieldChromeStyles.counter, invalid && fieldChromeStyles.messageError),
|
|
616
637
|
children: maxLength === void 0 ? length : `${length}/${maxLength}`
|
|
617
638
|
}) : null;
|
|
618
|
-
$[
|
|
619
|
-
$[
|
|
620
|
-
$[
|
|
621
|
-
$[
|
|
622
|
-
$[
|
|
623
|
-
} else
|
|
624
|
-
let
|
|
625
|
-
if ($[
|
|
626
|
-
|
|
627
|
-
...
|
|
639
|
+
$[16] = characterCount;
|
|
640
|
+
$[17] = invalid;
|
|
641
|
+
$[18] = length;
|
|
642
|
+
$[19] = maxLength;
|
|
643
|
+
$[20] = t9;
|
|
644
|
+
} else t9 = $[20];
|
|
645
|
+
let t10;
|
|
646
|
+
if ($[21] !== described || $[22] !== t7 || $[23] !== t8 || $[24] !== t9) {
|
|
647
|
+
t10 = /* @__PURE__ */ jsxs("div", {
|
|
648
|
+
...t7,
|
|
628
649
|
children: [
|
|
629
|
-
|
|
650
|
+
t8,
|
|
630
651
|
described,
|
|
631
|
-
|
|
652
|
+
t9
|
|
632
653
|
]
|
|
633
654
|
});
|
|
634
|
-
$[
|
|
635
|
-
$[
|
|
636
|
-
$[
|
|
637
|
-
$[
|
|
638
|
-
$[
|
|
639
|
-
} else
|
|
640
|
-
return
|
|
655
|
+
$[21] = described;
|
|
656
|
+
$[22] = t7;
|
|
657
|
+
$[23] = t8;
|
|
658
|
+
$[24] = t9;
|
|
659
|
+
$[25] = t10;
|
|
660
|
+
} else t10 = $[25];
|
|
661
|
+
return t10;
|
|
641
662
|
}
|
|
642
663
|
//#endregion
|
|
643
664
|
export { FieldBox, FieldInput, FieldLabel, FieldMessage, FieldTextArea, FieldTrigger, FieldValue };
|