@astryxdesign/core 0.5.2-canary.42584aa → 0.5.2-canary.42b2fdd
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/AppShell/AppShell.d.ts +2 -2
- package/dist/AppShell/AppShell.d.ts.map +1 -1
- package/dist/AppShell/AppShell.js +10 -7
- package/dist/Banner/Banner.d.ts +5 -0
- package/dist/Banner/Banner.d.ts.map +1 -1
- package/dist/Banner/Banner.js +7 -2
- package/dist/Breadcrumbs/BreadcrumbItem.d.ts +3 -2
- package/dist/Breadcrumbs/BreadcrumbItem.d.ts.map +1 -1
- package/dist/Breadcrumbs/BreadcrumbItem.js +22 -15
- package/dist/Chat/ChatComposer.d.ts +2 -2
- package/dist/Chat/ChatComposer.d.ts.map +1 -1
- package/dist/Chat/ChatComposer.js +24 -3
- package/dist/Chat/ChatToolCalls.d.ts +1 -1
- package/dist/Chat/ChatToolCalls.d.ts.map +1 -1
- package/dist/Chat/ChatToolCalls.js +12 -34
- package/dist/Chat/useChatNewMessages.js +3 -3
- package/dist/CheckboxList/CheckboxListItem.d.ts +5 -3
- package/dist/CheckboxList/CheckboxListItem.d.ts.map +1 -1
- package/dist/DateTimeInput/DateTimeInput.d.ts +47 -13
- package/dist/DateTimeInput/DateTimeInput.d.ts.map +1 -1
- package/dist/DateTimeInput/DateTimeInput.js +269 -162
- package/dist/DateTimeInput/NativeDateSegment.d.ts +24 -0
- package/dist/DateTimeInput/NativeDateSegment.d.ts.map +1 -0
- package/dist/DateTimeInput/NativeDateSegment.js +235 -0
- package/dist/DateTimeInput/NativeTimeSegment.d.ts +30 -0
- package/dist/DateTimeInput/NativeTimeSegment.d.ts.map +1 -0
- package/dist/DateTimeInput/NativeTimeSegment.js +248 -0
- package/dist/DateTimeInput/index.d.ts +1 -1
- package/dist/DateTimeInput/index.d.ts.map +1 -1
- package/dist/DateTimeInput/nativePickerSegmentStyles.d.ts +95 -0
- package/dist/DateTimeInput/nativePickerSegmentStyles.d.ts.map +1 -0
- package/dist/DateTimeInput/nativePickerSegmentStyles.js +103 -0
- package/dist/Layout/Layout.d.ts +7 -8
- package/dist/Layout/Layout.d.ts.map +1 -1
- package/dist/Layout/Layout.js +7 -8
- package/dist/MultiSelector/MultiSelector.d.ts +11 -1
- package/dist/MultiSelector/MultiSelector.d.ts.map +1 -1
- package/dist/MultiSelector/MultiSelector.js +89 -45
- package/dist/RadioList/RadioListItem.d.ts +30 -5
- package/dist/RadioList/RadioListItem.d.ts.map +1 -1
- package/dist/RadioList/RadioListItem.js +17 -4
- package/dist/Resizable/ResizeHandle.d.ts.map +1 -1
- package/dist/Resizable/ResizeHandle.js +81 -44
- package/dist/Selector/Selector.d.ts +10 -0
- package/dist/Selector/Selector.d.ts.map +1 -1
- package/dist/Selector/Selector.js +105 -57
- package/dist/Selector/useSelectorPresentation.d.ts +1 -0
- package/dist/Selector/useSelectorPresentation.d.ts.map +1 -1
- package/dist/Selector/useSelectorPresentation.js +17 -2
- package/dist/Spinner/Spinner.d.ts.map +1 -1
- package/dist/Spinner/Spinner.js +9 -10
- package/dist/TabList/TabList.d.ts.map +1 -1
- package/dist/TabList/TabList.js +2 -3
- package/dist/Table/plugins/columnResize/useTableColumnResize.d.ts.map +1 -1
- package/dist/Table/plugins/columnResize/useTableColumnResize.js +8 -9
- package/dist/Table/plugins/rowStatus/useTableRowStatus.d.ts +13 -10
- package/dist/Table/plugins/rowStatus/useTableRowStatus.d.ts.map +1 -1
- package/dist/Table/plugins/rowStatus/useTableRowStatus.js +24 -11
- package/dist/Table/plugins/sortable/useTableSortable.d.ts.map +1 -1
- package/dist/Table/plugins/sortable/useTableSortable.js +9 -1
- package/dist/Text/useTruncation.d.ts +1 -1
- package/dist/Text/useTruncation.d.ts.map +1 -1
- package/dist/Text/useTruncation.js +8 -7
- package/dist/TimeInput/TimeInput.d.ts +16 -1
- package/dist/TimeInput/TimeInput.d.ts.map +1 -1
- package/dist/TimeInput/TimeInput.js +98 -60
- package/dist/TimeInput/index.d.ts +1 -1
- package/dist/TimeInput/index.d.ts.map +1 -1
- package/dist/Toast/ToastViewport.d.ts.map +1 -1
- package/dist/Toast/ToastViewport.js +125 -77
- package/dist/Tokenizer/Tokenizer.d.ts +0 -38
- package/dist/Tokenizer/Tokenizer.d.ts.map +1 -1
- package/dist/Tokenizer/Tokenizer.js +94 -26
- package/dist/Tokenizer/useEndLaneReserve.d.ts +31 -0
- package/dist/Tokenizer/useEndLaneReserve.d.ts.map +1 -0
- package/dist/Tokenizer/useEndLaneReserve.js +136 -0
- package/dist/Typeahead/BaseTypeahead.d.ts.map +1 -1
- package/dist/Typeahead/BaseTypeahead.js +52 -17
- package/dist/Typeahead/Typeahead.d.ts +0 -21
- package/dist/Typeahead/Typeahead.d.ts.map +1 -1
- package/dist/Typeahead/Typeahead.js +108 -67
- package/dist/Typeahead/busyIndicatorLane.d.ts +62 -0
- package/dist/Typeahead/busyIndicatorLane.d.ts.map +1 -0
- package/dist/Typeahead/busyIndicatorLane.js +98 -0
- package/dist/astryx.css +8 -6
- package/dist/hooks/useOverflow.js +11 -11
- package/dist/hooks/useScrollOverflow.d.ts.map +1 -1
- package/dist/hooks/useScrollOverflow.js +7 -4
- package/dist/theme/defineTheme.d.ts +13 -0
- package/dist/theme/defineTheme.d.ts.map +1 -1
- package/dist/theme/defineTheme.js +7 -0
- package/dist/theme/generateThemeRules.d.ts.map +1 -1
- package/dist/theme/generateThemeRules.js +1 -1
- package/dist/theme/localTokens.d.ts +18 -0
- package/dist/theme/localTokens.d.ts.map +1 -0
- package/dist/theme/localTokens.js +162 -0
- package/dist/utils/sharedResizeObserver.d.ts +17 -9
- package/dist/utils/sharedResizeObserver.d.ts.map +1 -1
- package/dist/utils/sharedResizeObserver.js +54 -12
- package/locales/en.json +8 -0
- package/locales/pseudo.json +6 -0
- package/package.json +2 -2
- package/src/AppShell/AppShell.doc.mjs +4 -3
- package/src/AppShell/AppShell.test.tsx +21 -0
- package/src/AppShell/AppShell.tsx +12 -7
- package/src/Banner/Banner.doc.mjs +5 -1
- package/src/Banner/Banner.tsx +12 -1
- package/src/BottomSheet/BottomSheet.doc.mjs +31 -0
- package/src/BottomSheet/BottomSheet.spec.md +178 -0
- package/src/Breadcrumbs/BreadcrumbItem.tsx +18 -9
- package/src/Breadcrumbs/Breadcrumbs.doc.mjs +4 -1
- package/src/Breadcrumbs/Breadcrumbs.test.tsx +12 -0
- package/src/Chat/ChatComposer.doc.mjs +7 -4
- package/src/Chat/ChatComposer.test.tsx +84 -2
- package/src/Chat/ChatComposer.tsx +48 -3
- package/src/Chat/ChatToolCalls.doc.mjs +1 -1
- package/src/Chat/ChatToolCalls.test.tsx +33 -1
- package/src/Chat/ChatToolCalls.tsx +13 -34
- package/src/Chat/useChatNewMessages.ts +3 -3
- package/src/CheckboxList/CheckboxList.doc.mjs +172 -31
- package/src/CheckboxList/CheckboxList.spec.md +215 -0
- package/src/CheckboxList/CheckboxList.test.tsx +45 -0
- package/src/CheckboxList/CheckboxListItem.doc.mjs +11 -9
- package/src/CheckboxList/CheckboxListItem.tsx +5 -3
- package/src/CommandPalette/CommandPalette.spec.md +2 -1
- package/src/ComplexSelector/ComplexSelector.doc.mjs +42 -0
- package/src/ComplexSelector/ComplexSelector.spec.md +190 -0
- package/src/ContextMenu/ContextMenu.doc.mjs +48 -0
- package/src/ContextMenu/ContextMenu.spec.md +207 -0
- package/src/DateTimeInput/DateTimeInput.doc.mjs +43 -23
- package/src/DateTimeInput/DateTimeInput.tsx +388 -181
- package/src/DateTimeInput/DateTimeInputTouch.test.tsx +10 -2
- package/src/DateTimeInput/NativeDateSegment.tsx +308 -0
- package/src/DateTimeInput/NativePickerSegments.test.tsx +626 -0
- package/src/DateTimeInput/NativeTimeSegment.tsx +331 -0
- package/src/DateTimeInput/index.ts +1 -0
- package/src/DateTimeInput/nativePickerSegmentStyles.ts +120 -0
- package/src/Divider/Divider.doc.mjs +24 -0
- package/src/Divider/Divider.spec.md +157 -0
- package/src/DropdownMenu/DropdownMenu.doc.mjs +104 -0
- package/src/DropdownMenu/DropdownMenu.spec.md +246 -0
- package/src/FieldStatus/FieldStatus.spec.md +2 -1
- package/src/Grid/Grid.spec.md +2 -1
- package/src/Icon/Icon.doc.mjs +196 -48
- package/src/Icon/Icon.spec.md +192 -0
- package/src/Kbd/Kbd.doc.mjs +18 -0
- package/src/Kbd/Kbd.spec.md +142 -0
- package/src/Layout/Layout.doc.mjs +31 -23
- package/src/Layout/Layout.spec.md +96 -60
- package/src/Layout/Layout.test.tsx +1 -1
- package/src/Layout/Layout.tsx +7 -8
- package/src/Lightbox/Lightbox.spec.md +2 -1
- package/src/Markdown/Markdown.doc.mjs +60 -0
- package/src/Markdown/Markdown.spec.md +207 -0
- package/src/MobileNav/MobileNav.spec.md +2 -1
- package/src/MoreMenu/MoreMenu.doc.mjs +42 -0
- package/src/MoreMenu/MoreMenu.spec.md +222 -0
- package/src/MultiSelector/MultiSelector.doc.mjs +124 -1
- package/src/MultiSelector/MultiSelector.spec.md +293 -0
- package/src/MultiSelector/MultiSelector.test.tsx +305 -2
- package/src/MultiSelector/MultiSelector.tsx +124 -55
- package/src/NavIcon/NavIcon.spec.md +2 -1
- package/src/NavMenu/NavHeadingMenu.spec.md +9 -4
- package/src/Outline/Outline.doc.mjs +35 -0
- package/src/Outline/Outline.spec.md +162 -0
- package/src/OverflowList/OverflowList.spec.md +2 -1
- package/src/Pagination/Pagination.doc.mjs +74 -0
- package/src/Pagination/Pagination.spec.md +226 -0
- package/src/Popover/Popover.doc.mjs +264 -65
- package/src/Popover/Popover.spec.md +421 -0
- package/src/Popover/usePopover.doc.mjs +208 -33
- package/src/PowerSearch/PowerSearch.spec.md +291 -0
- package/src/ProgressBar/ProgressBar.spec.md +2 -1
- package/src/RadioList/RadioList.test.tsx +136 -2
- package/src/RadioList/RadioListItem.doc.mjs +30 -11
- package/src/RadioList/RadioListItem.tsx +44 -8
- package/src/Resizable/Resizable.spec.md +2 -1
- package/src/Resizable/ResizeHandle.test.tsx +99 -54
- package/src/Resizable/ResizeHandle.tsx +98 -45
- package/src/Section/Section.spec.md +2 -1
- package/src/SegmentedControl/SegmentedControl.spec.md +2 -1
- package/src/Selector/Selector.doc.mjs +133 -97
- package/src/Selector/Selector.spec.md +298 -0
- package/src/Selector/Selector.test.tsx +318 -1
- package/src/Selector/Selector.tsx +127 -60
- package/src/Selector/useSelectorPresentation.ts +24 -4
- package/src/SideNav/SideNav.test.tsx +3 -3
- package/src/SideNav/SideNavItem.doc.mjs +1 -1
- package/src/Skeleton/Skeleton.spec.md +2 -1
- package/src/Slider/Slider.spec.md +2 -1
- package/src/Spinner/Spinner.doc.mjs +5 -5
- package/src/Spinner/Spinner.test.tsx +32 -7
- package/src/Spinner/Spinner.tsx +46 -14
- package/src/Stack/Stack.spec.md +2 -1
- package/src/StatusDot/StatusDot.spec.md +2 -1
- package/src/Stepper/Stepper.doc.mjs +1 -1
- package/src/Switch/Switch.doc.mjs +40 -0
- package/src/Switch/Switch.spec.md +175 -0
- package/src/TabList/TabList.tsx +2 -3
- package/src/Table/Table.doc.mjs +102 -24
- package/src/Table/Table.spec.md +325 -0
- package/src/Table/plugins/columnResize/useTableColumnResize.tsx +8 -12
- package/src/Table/plugins/rowStatus/useTableRowStatus.spec.md +354 -0
- package/src/Table/plugins/rowStatus/useTableRowStatus.test.tsx +38 -20
- package/src/Table/plugins/rowStatus/useTableRowStatus.tsx +30 -12
- package/src/Table/plugins/sortable/useTableSortable.test.tsx +72 -0
- package/src/Table/plugins/sortable/useTableSortable.tsx +18 -1
- package/src/Table/useTableGroupedRows.doc.mjs +2 -2
- package/src/Table/useTableRowStatus.doc.mjs +4 -4
- package/src/Text/Text.spec.md +2 -1
- package/src/Text/useTruncation.ts +8 -7
- package/src/TextArea/TextArea.doc.mjs +255 -45
- package/src/TextArea/TextArea.spec.md +205 -0
- package/src/TimeInput/NativeTimeInput.test.tsx +269 -0
- package/src/TimeInput/TimeInput.doc.mjs +47 -23
- package/src/TimeInput/TimeInput.tsx +109 -50
- package/src/TimeInput/index.ts +1 -0
- package/src/Toast/ToastViewport.test.tsx +194 -0
- package/src/Toast/ToastViewport.tsx +136 -58
- package/src/Tokenizer/Tokenizer.doc.mjs +2 -0
- package/src/Tokenizer/Tokenizer.spec.md +293 -0
- package/src/Tokenizer/Tokenizer.test.tsx +335 -1
- package/src/Tokenizer/Tokenizer.tsx +129 -46
- package/src/Tokenizer/useEndLaneReserve.ts +146 -0
- package/src/Toolbar/Toolbar.spec.md +2 -1
- package/src/Tooltip/Tooltip.spec.md +2 -1
- package/src/TreeList/TreeList.spec.md +9 -5
- package/src/Typeahead/BaseTypeahead.tsx +57 -16
- package/src/Typeahead/Typeahead.doc.mjs +89 -1
- package/src/Typeahead/Typeahead.spec.md +257 -0
- package/src/Typeahead/Typeahead.test.tsx +381 -1
- package/src/Typeahead/Typeahead.tsx +187 -69
- package/src/Typeahead/busyIndicatorLane.tsx +109 -0
- package/src/hooks/useOverflow.ts +11 -11
- package/src/hooks/useScrollOverflow.ts +7 -4
- package/src/theme/defineTheme.test.ts +227 -0
- package/src/theme/defineTheme.ts +30 -0
- package/src/theme/generateThemeRules.ts +4 -1
- package/src/theme/localTokens.ts +272 -0
- package/src/theme/themingTargets.test.ts +39 -7
- package/src/utils/sharedResizeObserver.test.ts +124 -5
- package/src/utils/sharedResizeObserver.ts +60 -14
|
@@ -3,7 +3,7 @@ import React from 'react';
|
|
|
3
3
|
* @file AppShell.tsx
|
|
4
4
|
* @input Uses React, Layout, LayoutHeader, LayoutPanel, LayoutContent, StyleX
|
|
5
5
|
* @output Exports AppShell component and AppShellProps type
|
|
6
|
-
* @position
|
|
6
|
+
* @position Page shell for an application — the top-level wrapper for any app.
|
|
7
7
|
* Composes Layout internally to provide header, sideNav, and main content areas.
|
|
8
8
|
* Use for any app that needs a top nav, side navigation, and scrollable content.
|
|
9
9
|
*
|
|
@@ -175,7 +175,7 @@ export interface AppShellProps extends BaseProps<HTMLDivElement> {
|
|
|
175
175
|
topNav?: ReactNode;
|
|
176
176
|
}
|
|
177
177
|
/**
|
|
178
|
-
*
|
|
178
|
+
* Page shell for an application. Provides the structural frame for an app:
|
|
179
179
|
* top navigation, side navigation, and main content area.
|
|
180
180
|
*
|
|
181
181
|
* Slot-based API with `topNav`, `sideNav`, `banner`, and `children`.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../src/AppShell/AppShell.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAmBf,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAO5C,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,SAAS,CAAC;AA+BhD;;;;;;GAMG;AACH,MAAM,MAAM,kBAAkB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAE7D;;;;;;;GAOG;AAEH;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,kBAAkB,CAAC;AAEvD;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAEhC;;;;;;;;;OASG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,WAAW,CAAC;IAE7B;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEzB;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,eAAe,GAAG,SAAS,CAAC;IAEhD;;;;;;;;;;;;;;;;;;;;;;;;;OAyBG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;
|
|
1
|
+
{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../src/AppShell/AppShell.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAmBf,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAO5C,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,SAAS,CAAC;AA+BhD;;;;;;GAMG;AACH,MAAM,MAAM,kBAAkB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAE7D;;;;;;;GAOG;AAEH;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,kBAAkB,CAAC;AAEvD;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAEhC;;;;;;;;;OASG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,WAAW,CAAC;IAE7B;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEzB;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,eAAe,GAAG,SAAS,CAAC;IAEhD;;;;;;;;;;;;;;;;;;;;;;;;;OAyBG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AA4KD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,OAAoB,EACpB,MAAM,EACN,QAAQ,EACR,cAAc,EACd,aAAa,EAAE,UAAU,EACzB,MAAe,EACf,SAAS,EACT,OAAO,EACP,MAAM,EACN,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,aAAa,qBAiZf;yBAhae,QAAQ"}
|
|
@@ -8,7 +8,7 @@ import React from 'react';
|
|
|
8
8
|
* @file AppShell.tsx
|
|
9
9
|
* @input Uses React, Layout, LayoutHeader, LayoutPanel, LayoutContent, StyleX
|
|
10
10
|
* @output Exports AppShell component and AppShellProps type
|
|
11
|
-
* @position
|
|
11
|
+
* @position Page shell for an application — the top-level wrapper for any app.
|
|
12
12
|
* Composes Layout internally to provide header, sideNav, and main content areas.
|
|
13
13
|
* Use for any app that needs a top nav, side navigation, and scrollable content.
|
|
14
14
|
*
|
|
@@ -36,7 +36,7 @@ import { AppShellMobileContext } from "./AppShellMobileContext.js";
|
|
|
36
36
|
import { mergeProps, isRenderable } from "../utils/index.js";
|
|
37
37
|
import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
|
|
38
38
|
import { useMediaQuery } from "../hooks/useMediaQuery.js";
|
|
39
|
-
import { observeResize
|
|
39
|
+
import { observeResize } from "../utils/sharedResizeObserver.js";
|
|
40
40
|
import { themeProps } from "../utils/themeProps.js";
|
|
41
41
|
import { useTranslator } from "../i18n/index.js";
|
|
42
42
|
import { useMergedRefs } from "../hooks/useMergedRefs.js";
|
|
@@ -105,6 +105,7 @@ const styles = {
|
|
|
105
105
|
k1xSpc: "x78zum5",
|
|
106
106
|
kXwgrk: "xdt5ytf",
|
|
107
107
|
kVAEAm: "x1n2onr6",
|
|
108
|
+
kVQacm: "x7giv3",
|
|
108
109
|
$$css: true
|
|
109
110
|
},
|
|
110
111
|
variantWash: {
|
|
@@ -199,7 +200,7 @@ const styles = {
|
|
|
199
200
|
// =============================================================================
|
|
200
201
|
|
|
201
202
|
/**
|
|
202
|
-
*
|
|
203
|
+
* Page shell for an application. Provides the structural frame for an app:
|
|
203
204
|
* top navigation, side navigation, and main content area.
|
|
204
205
|
*
|
|
205
206
|
* Slot-based API with `topNav`, `sideNav`, `banner`, and `children`.
|
|
@@ -294,6 +295,9 @@ export function AppShell({
|
|
|
294
295
|
const navHasDividers = variant === 'section';
|
|
295
296
|
const isElevated = variant === 'elevated';
|
|
296
297
|
const navAreaStyle = variant === 'wash' || variant === 'elevated' ? styles.navAreaWash : variant === 'surface' ? styles.navAreaSurface : undefined;
|
|
298
|
+
// Section normally inherits the shell's surface background. Its auto-height
|
|
299
|
+
// header needs to paint that surface itself while content scrolls beneath it.
|
|
300
|
+
const headerAreaStyle = navAreaStyle ?? (isAuto && variant === 'section' ? styles.navAreaSurface : undefined);
|
|
297
301
|
const contentAreaStyle = variant === 'wash' ? styles.contentBgWash : variant === 'elevated' && hasTopNav && hasSideNav && !isBelowBreakpoint ? styles.contentBgTransparent : variant === 'surface' || variant === 'elevated' ? styles.contentBgSurface : undefined;
|
|
298
302
|
|
|
299
303
|
// Background for sticky elements in auto mode — must be opaque so content
|
|
@@ -316,8 +320,7 @@ export function AppShell({
|
|
|
316
320
|
const height = headerEl.getBoundingClientRect().height;
|
|
317
321
|
shellEl.style.setProperty('--_app-shell-header-height', `${height}px`);
|
|
318
322
|
};
|
|
319
|
-
observeResize(headerEl, () => updateHeight());
|
|
320
|
-
return () => unobserveResize(headerEl);
|
|
323
|
+
return observeResize(headerEl, () => updateHeight());
|
|
321
324
|
}, [isAuto]);
|
|
322
325
|
|
|
323
326
|
// =========================================================================
|
|
@@ -395,7 +398,7 @@ export function AppShell({
|
|
|
395
398
|
role: "banner",
|
|
396
399
|
...mergeProps(themeProps('app-shell-header', {
|
|
397
400
|
variant
|
|
398
|
-
}), stylex.props(
|
|
401
|
+
}), stylex.props(headerAreaStyle, isAuto && styles.headerSticky)),
|
|
399
402
|
children: headerInner
|
|
400
403
|
}) : undefined;
|
|
401
404
|
|
|
@@ -473,7 +476,7 @@ export function AppShell({
|
|
|
473
476
|
role: headerContent == null ? 'banner' : undefined,
|
|
474
477
|
...mergeProps(themeProps('app-shell-header', {
|
|
475
478
|
variant
|
|
476
|
-
}), stylex.props(
|
|
479
|
+
}), stylex.props(headerAreaStyle, isAuto && styles.headerSticky)),
|
|
477
480
|
children: /*#__PURE__*/_jsx(LayoutHeader, {
|
|
478
481
|
padding: 0,
|
|
479
482
|
hasDivider: navHasDividers,
|
package/dist/Banner/Banner.d.ts
CHANGED
|
@@ -11,6 +11,11 @@
|
|
|
11
11
|
* - Status icon (themeProps 'banner-icon'): the target rides on the default
|
|
12
12
|
* <Icon> itself — the element that paints — so 'status:X' overrides reach
|
|
13
13
|
* the glyph (#4166); for a custom `icon` node it stays on the layout wrapper
|
|
14
|
+
* - Description (themeProps 'banner-description'): the supporting line owns its
|
|
15
|
+
* own colour and type, and the space between it and the title
|
|
16
|
+
* - The end area carries no target: it is a layout row (flex, wrap, edge
|
|
17
|
+
* compensation) rather than a painted surface, and a theme that wants the
|
|
18
|
+
* header to grow around its buttons sets `padding-block` on 'banner'
|
|
14
19
|
* - No left border accent — color is expressed through the full header background
|
|
15
20
|
* - Each visual area owns its own border-radius (no overflow:clip on the container)
|
|
16
21
|
* - Children are collapsible by default: a toggle appears in the header end
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../src/Banner/Banner.tsx"],"names":[],"mappings":"AAIA
|
|
1
|
+
{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../src/Banner/Banner.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AAEH,OAAO,EAA0B,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE9D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAgB5C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,+BAA+B,CAAC;AAErE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAI9C,OAAO,KAAK,EAAC,eAAe,EAAE,kBAAkB,EAAC,MAAM,SAAS,CAAC;AAMjE;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,eAAe,CAAC;AAEjD;;;;;;GAMG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,kBAAkB,CAAC;AAEvD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,MAAM,EAAE,YAAY,CAAC;IACrB;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;;;;;;;OAWG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;;;;;;;;;;;;;;OAkBG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG,iBAAiB,CAAC;IAC1C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAmND;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,KAAK,EACL,WAAW,EACX,IAAI,EACJ,aAAqB,EACrB,SAAS,EACT,YAAY,EACZ,UAAU,EACV,SAAkB,EAClB,SAAkB,EAClB,WAAkB,EAClB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,cAAc,EACd,oBAAoB,EACpB,GAAG,IAAI,EACR,EAAE,WAAW,sCAmPb;yBAvQe,MAAM"}
|
package/dist/Banner/Banner.js
CHANGED
|
@@ -15,6 +15,11 @@
|
|
|
15
15
|
* - Status icon (themeProps 'banner-icon'): the target rides on the default
|
|
16
16
|
* <Icon> itself — the element that paints — so 'status:X' overrides reach
|
|
17
17
|
* the glyph (#4166); for a custom `icon` node it stays on the layout wrapper
|
|
18
|
+
* - Description (themeProps 'banner-description'): the supporting line owns its
|
|
19
|
+
* own colour and type, and the space between it and the title
|
|
20
|
+
* - The end area carries no target: it is a layout row (flex, wrap, edge
|
|
21
|
+
* compensation) rather than a painted surface, and a theme that wants the
|
|
22
|
+
* header to grow around its buttons sets `padding-block` on 'banner'
|
|
18
23
|
* - No left border accent — color is expressed through the full header background
|
|
19
24
|
* - Each visual area owns its own border-radius (no overflow:clip on the container)
|
|
20
25
|
* - Children are collapsible by default: a toggle appears in the header end
|
|
@@ -429,9 +434,9 @@ export function Banner({
|
|
|
429
434
|
},
|
|
430
435
|
children: title
|
|
431
436
|
}), isRenderable(description) && /*#__PURE__*/_jsx("div", {
|
|
432
|
-
...{
|
|
437
|
+
...mergeProps(themeProps('banner-description'), {
|
|
433
438
|
className: "x1ghz6dp xjb2p0i x141an7d x1sodnla x1ltkj2j xv1l7n4 xj0a0fe"
|
|
434
|
-
},
|
|
439
|
+
}),
|
|
435
440
|
children: description
|
|
436
441
|
})]
|
|
437
442
|
}), showEndArea && /*#__PURE__*/_jsxs("div", {
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @file BreadcrumbItem.tsx
|
|
3
3
|
* @input Uses React use/useRef/useEffect, stylex, theme tokens, BreadcrumbContext,
|
|
4
|
-
*
|
|
5
|
-
* (renderDropdownItems,
|
|
4
|
+
* rtlStyles for the contextual default slash, and (for the menu trigger)
|
|
5
|
+
* usePopover + the shared DropdownMenu item API (renderDropdownItems,
|
|
6
|
+
* DropdownMenuContext, MENU_ITEM_SELECTOR, useListFocus)
|
|
6
7
|
* @output Exports BreadcrumbItem component and BreadcrumbItemProps
|
|
7
8
|
* @position Individual breadcrumb item; used inside Breadcrumbs
|
|
8
9
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BreadcrumbItem.d.ts","sourceRoot":"","sources":["../../src/Breadcrumbs/BreadcrumbItem.tsx"],"names":[],"mappings":"AAIA
|
|
1
|
+
{"version":3,"file":"BreadcrumbItem.d.ts","sourceRoot":"","sources":["../../src/Breadcrumbs/BreadcrumbItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,KAAK,EAAE,EAOZ,KAAK,SAAS,EACd,KAAK,UAAU,EAChB,MAAM,OAAO,CAAC;AAWf,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAErD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAS5C,OAAO,EAGL,KAAK,gBAAgB,EACtB,MAAM,qCAAqC,CAAC;AAM7C,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,8BAA8B,CAAC;AAOrE,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAC/C,SAAS,CAAC,aAAa,CAAC,EACxB,SAAS,CACV;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC/C;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;;;;;;;;;OAaG;IACH,IAAI,CAAC,EAAE,kBAAkB,EAAE,GAAG,SAAS,CAAC;IACxC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,gBAAgB,CAAC;CAC7B;AAqID;;;;;;;;;;;;;GAaG;AACH,wBAAgB,cAAc,CAAC,EAC7B,GAAG,EACH,EAAE,EACF,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,SAAS,EAAE,aAAa,EACxB,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,IAAI,EACR,EAAE,mBAAmB,qBAkMrB;yBAjNe,cAAc"}
|
|
@@ -5,8 +5,9 @@
|
|
|
5
5
|
/**
|
|
6
6
|
* @file BreadcrumbItem.tsx
|
|
7
7
|
* @input Uses React use/useRef/useEffect, stylex, theme tokens, BreadcrumbContext,
|
|
8
|
-
*
|
|
9
|
-
* (renderDropdownItems,
|
|
8
|
+
* rtlStyles for the contextual default slash, and (for the menu trigger)
|
|
9
|
+
* usePopover + the shared DropdownMenu item API (renderDropdownItems,
|
|
10
|
+
* DropdownMenuContext, MENU_ITEM_SELECTOR, useListFocus)
|
|
10
11
|
* @output Exports BreadcrumbItem component and BreadcrumbItemProps
|
|
11
12
|
* @position Individual breadcrumb item; used inside Breadcrumbs
|
|
12
13
|
*
|
|
@@ -27,7 +28,7 @@ import "../theme/tokens.stylex.js";
|
|
|
27
28
|
import { colorVars, spacingVars, typeScaleVars, radiusVars, fontWeightVars } from "../theme/tokens.stylex.js";
|
|
28
29
|
import { BreadcrumbContext } from "./Breadcrumbs.js";
|
|
29
30
|
import { useLinkComponent } from "../Link/useLinkComponent.js";
|
|
30
|
-
import { mergeProps } from "../utils/index.js";
|
|
31
|
+
import { mergeProps, rtlStyles } from "../utils/index.js";
|
|
31
32
|
import { themeProps } from "../utils/themeProps.js";
|
|
32
33
|
import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
|
|
33
34
|
import { Icon } from "../Icon/index.js";
|
|
@@ -99,6 +100,20 @@ const itemStyles = {
|
|
|
99
100
|
$$css: true
|
|
100
101
|
}
|
|
101
102
|
};
|
|
103
|
+
function BreadcrumbSeparator({
|
|
104
|
+
separator
|
|
105
|
+
}) {
|
|
106
|
+
return /*#__PURE__*/_jsx("span", {
|
|
107
|
+
"aria-hidden": "true",
|
|
108
|
+
...{
|
|
109
|
+
className: "x11ke7fs x6s0dn4 xv1l7n4 xu0wf1k x87ps6o"
|
|
110
|
+
},
|
|
111
|
+
children: separator === '/' ? /*#__PURE__*/_jsx("span", {
|
|
112
|
+
...stylex.props(rtlStyles.mirror),
|
|
113
|
+
children: "/"
|
|
114
|
+
}) : separator
|
|
115
|
+
});
|
|
116
|
+
}
|
|
102
117
|
const menuStyles = {
|
|
103
118
|
popover: {
|
|
104
119
|
k7Eaqz: "x5w4yej",
|
|
@@ -220,12 +235,8 @@ export function BreadcrumbItem({
|
|
|
220
235
|
}), stylex.props(itemStyles.root, isSupporting ? itemStyles.supportingSize : itemStyles.defaultSize, xstyle), className, style),
|
|
221
236
|
"data-testid": testId,
|
|
222
237
|
...rest,
|
|
223
|
-
children: [/*#__PURE__*/_jsx(
|
|
224
|
-
|
|
225
|
-
...{
|
|
226
|
-
className: "x11ke7fs x6s0dn4 xv1l7n4 xu0wf1k x87ps6o"
|
|
227
|
-
},
|
|
228
|
-
children: ctx.separator
|
|
238
|
+
children: [/*#__PURE__*/_jsx(BreadcrumbSeparator, {
|
|
239
|
+
separator: ctx.separator
|
|
229
240
|
}), hasMenu ?
|
|
230
241
|
/*#__PURE__*/
|
|
231
242
|
// A current crumb can also open a sibling menu — the trigger keeps
|
|
@@ -262,12 +273,8 @@ export function BreadcrumbItem({
|
|
|
262
273
|
}), stylex.props(itemStyles.root, isSupporting ? itemStyles.supportingSize : itemStyles.defaultSize, xstyle), className, style),
|
|
263
274
|
"data-testid": testId,
|
|
264
275
|
...rest,
|
|
265
|
-
children: [/*#__PURE__*/_jsx(
|
|
266
|
-
|
|
267
|
-
...{
|
|
268
|
-
className: "x11ke7fs x6s0dn4 xv1l7n4 xu0wf1k x87ps6o"
|
|
269
|
-
},
|
|
270
|
-
children: ctx.separator
|
|
276
|
+
children: [/*#__PURE__*/_jsx(BreadcrumbSeparator, {
|
|
277
|
+
separator: ctx.separator
|
|
271
278
|
}), hasMenu ? /*#__PURE__*/_jsx(BreadcrumbMenuTrigger, {
|
|
272
279
|
ref: contentRef,
|
|
273
280
|
menu: menu,
|
|
@@ -46,8 +46,8 @@ export interface ChatComposerProps extends Omit<BaseProps<HTMLDivElement>, 'onCh
|
|
|
46
46
|
/**
|
|
47
47
|
* Resting elevation of the composer body. `low` (the default) keeps today's
|
|
48
48
|
* raised look — low at rest, bumping to med on hover / focus. `none` flattens
|
|
49
|
-
* it and draws a border
|
|
50
|
-
*
|
|
49
|
+
* it and draws a border. Keyboard focus in the editor adds the shared focus
|
|
50
|
+
* ring in either presentation; pointer focus does not add that ring.
|
|
51
51
|
* @default 'low'
|
|
52
52
|
*/
|
|
53
53
|
elevation?: 'none' | 'low';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatComposer.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatComposer.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"ChatComposer.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatComposer.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,KAAK,EAAE,EAMZ,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA+B5C,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,EAAE,OAAO,GAAG,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAEtE,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAC7C,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,GAAG,UAAU,CACxB;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,+CAA+C;IAC/C,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,kDAAkD;IAClD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,kFAAkF;IAClF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,qCAAqC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uCAAuC;IACvC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sBAAsB;IACtB,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAI3B,6GAA6G;IAC7G,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,yHAAyH;IACzH,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,yGAAyG;IACzG,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,2DAA2D;IAC3D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gHAAgH;IAChH,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,gHAAgH;IAChH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,gDAAgD;IAChD,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,iEAAiE;IACjE,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,oDAAoD;IACpD,cAAc,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;CACnC;AA8MD;;;;;;;;;;;GAWG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,qBA6MpD;yBA7Me,YAAY"}
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
* - /apps/storybook/stories/ChatComposer.stories.tsx
|
|
23
23
|
* - /packages/cli/assets/templates/blocks/components/ChatComposer/ (block examples)
|
|
24
24
|
*/
|
|
25
|
-
import React, { useState, useCallback, useRef, useMemo } from 'react';
|
|
25
|
+
import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react';
|
|
26
26
|
import * as stylex from '@stylexjs/stylex';
|
|
27
27
|
import "../theme/tokens.stylex.js";
|
|
28
28
|
import { colorVars, spacingVars, radiusVars, shadowVars, durationVars, easeVars, borderVars, typeScaleVars, typographyVars } from "../theme/tokens.stylex.js";
|
|
@@ -33,6 +33,8 @@ import { ChatComposerContext } from "./ChatContext.js";
|
|
|
33
33
|
import { ChatSendButton } from "./ChatSendButton.js";
|
|
34
34
|
import { themeProps } from "../utils/themeProps.js";
|
|
35
35
|
import { useTranslator } from "../i18n/index.js";
|
|
36
|
+
import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
|
|
37
|
+
import { getInteractionModality, trackInteractionModality } from "../utils/interactionModality.js";
|
|
36
38
|
|
|
37
39
|
// =============================================================================
|
|
38
40
|
// Types
|
|
@@ -65,7 +67,8 @@ const styles = {
|
|
|
65
67
|
|
|
66
68
|
// Resting elevation for the composer body, narrowed to two steps.
|
|
67
69
|
// - `low` (default) preserves today's look: low at rest, bumping to med on
|
|
68
|
-
// hover / focus-within
|
|
70
|
+
// hover / focus-within. The WCAG focus indicator is a separate shared ring,
|
|
71
|
+
// gated to keyboard focus in the editor; the shadow change remains depth.
|
|
69
72
|
// - `none` is flat; depth comes from a border + inset rings instead. The
|
|
70
73
|
// border is drawn *inside* the padding — its width is subtracted from every
|
|
71
74
|
// side (like Card) so total inset (border + padding) equals the elevated
|
|
@@ -88,6 +91,9 @@ const elevationStyles = {
|
|
|
88
91
|
$$css: true
|
|
89
92
|
}
|
|
90
93
|
};
|
|
94
|
+
function isComposerEditor(target) {
|
|
95
|
+
return target instanceof HTMLElement && target.matches('textarea, [contenteditable="true"], [role="textbox"], input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"]');
|
|
96
|
+
}
|
|
91
97
|
|
|
92
98
|
// =============================================================================
|
|
93
99
|
// Component
|
|
@@ -134,6 +140,10 @@ export function ChatComposer(props) {
|
|
|
134
140
|
} = props;
|
|
135
141
|
const placeholder = placeholderFromProps ?? t('@astryx.chat.composer.placeholder');
|
|
136
142
|
const [internalValue, setInternalValue] = useState('');
|
|
143
|
+
const [hasKeyboardEditorFocus, setHasKeyboardEditorFocus] = useState(false);
|
|
144
|
+
useEffect(() => {
|
|
145
|
+
trackInteractionModality();
|
|
146
|
+
}, []);
|
|
137
147
|
const isControlled = controlledValue !== undefined;
|
|
138
148
|
const currentValue = isControlled ? controlledValue : internalValue;
|
|
139
149
|
const updateValue = useCallback(newValue => {
|
|
@@ -175,6 +185,14 @@ export function ChatComposer(props) {
|
|
|
175
185
|
const editable = bodyRef.current?.querySelector('[contenteditable="true"], textarea');
|
|
176
186
|
editable?.focus();
|
|
177
187
|
}, []);
|
|
188
|
+
const handleBodyFocusCapture = useCallback(event => {
|
|
189
|
+
setHasKeyboardEditorFocus(isComposerEditor(event.target) && getInteractionModality() === 'keyboard');
|
|
190
|
+
}, []);
|
|
191
|
+
const handleBodyBlurCapture = useCallback(event => {
|
|
192
|
+
if (!event.currentTarget.contains(event.relatedTarget)) {
|
|
193
|
+
setHasKeyboardEditorFocus(false);
|
|
194
|
+
}
|
|
195
|
+
}, []);
|
|
178
196
|
const statusEl = status ? /*#__PURE__*/_jsxs("div", {
|
|
179
197
|
role: status.type === 'error' ? 'alert' : 'status',
|
|
180
198
|
...{
|
|
@@ -238,7 +256,10 @@ export function ChatComposer(props) {
|
|
|
238
256
|
children: [statusPosition === 'top' && statusEl, drawer, /*#__PURE__*/_jsxs("div", {
|
|
239
257
|
ref: bodyRef,
|
|
240
258
|
onClick: handleBodyClick,
|
|
241
|
-
|
|
259
|
+
onPointerDownCapture: () => setHasKeyboardEditorFocus(false),
|
|
260
|
+
onFocusCapture: handleBodyFocusCapture,
|
|
261
|
+
onBlurCapture: handleBodyBlurCapture,
|
|
262
|
+
...stylex.props(styles.body, elevationStyles[elevation], hasKeyboardEditorFocus && focusOutlineStyles.focusWithin, density === 'compact' && styles.compact, xstyle),
|
|
242
263
|
children: [(headerActions || headerContext) && /*#__PURE__*/_jsxs("div", {
|
|
243
264
|
...{
|
|
244
265
|
className: "x78zum5 x6s0dn4 x1qughib x1txdalj xe0p6wg"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatToolCalls.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatToolCalls.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,EAA+B,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAC1E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAwB5C,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;AAE9E,MAAM,WAAW,gBAAgB;IAC/B,0BAA0B;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,oDAAoD;IACpD,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,2FAA2F;IAC3F,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mEAAmE;IACnE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qEAAqE;IACrE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qEAAqE;IACrE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oFAAoF;IACpF,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,mFAAmF;IACnF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,6FAA6F;IAC7F,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B;AAED,MAAM,WAAW,kBAAmB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACnE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,+BAA+B;IAC/B,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,wEAAwE;IACxE,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,4CAA4C;IAC5C,gBAAgB,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;CAClD;
|
|
1
|
+
{"version":3,"file":"ChatToolCalls.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatToolCalls.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,EAA+B,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAC1E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAwB5C,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;AAE9E,MAAM,WAAW,gBAAgB;IAC/B,0BAA0B;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,oDAAoD;IACpD,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,2FAA2F;IAC3F,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mEAAmE;IACnE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qEAAqE;IACrE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qEAAqE;IACrE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oFAAoF;IACpF,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,mFAAmF;IACnF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,6FAA6F;IAC7F,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B;AAED,MAAM,WAAW,kBAAmB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACnE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,+BAA+B;IAC/B,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,wEAAwE;IACxE,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,4CAA4C;IAC5C,gBAAgB,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;CAClD;AAkaD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,4BA2JtD;yBA3Je,aAAa"}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* @file ChatToolCalls.tsx
|
|
7
|
-
* @input Uses React, StyleX, theme tokens
|
|
7
|
+
* @input Uses React, StyleX, semantic icon registry, theme tokens
|
|
8
8
|
* @output Exports ChatToolCalls component
|
|
9
9
|
* @position Chat component — displays tool/function call invocations
|
|
10
10
|
*
|
|
@@ -32,7 +32,7 @@ import { useTranslator } from "../i18n/index.js";
|
|
|
32
32
|
// =============================================================================
|
|
33
33
|
// Types
|
|
34
34
|
// =============================================================================
|
|
35
|
-
import { jsx as _jsx,
|
|
35
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
36
36
|
// =============================================================================
|
|
37
37
|
// =============================================================================
|
|
38
38
|
// Styles
|
|
@@ -93,8 +93,8 @@ const styles = {
|
|
|
93
93
|
const STATUS_ICON_NAMES = {
|
|
94
94
|
pending: 'clock',
|
|
95
95
|
running: null,
|
|
96
|
-
complete: '
|
|
97
|
-
error: '
|
|
96
|
+
complete: 'success',
|
|
97
|
+
error: 'error'
|
|
98
98
|
};
|
|
99
99
|
const STATUS_STYLES = {
|
|
100
100
|
pending: styles.colorPending,
|
|
@@ -168,21 +168,10 @@ function CallRow({
|
|
|
168
168
|
size: "sm",
|
|
169
169
|
shade: "subtle",
|
|
170
170
|
"aria-hidden": "true"
|
|
171
|
-
}) : /*#__PURE__*/
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
}
|
|
176
|
-
}), /*#__PURE__*/_jsx("span", {
|
|
177
|
-
...{
|
|
178
|
-
className: "x1n2onr6 x3nfvp2"
|
|
179
|
-
},
|
|
180
|
-
children: /*#__PURE__*/_jsx(Icon, {
|
|
181
|
-
icon: STATUS_ICON_NAMES[status] ?? 'check',
|
|
182
|
-
size: "xsm",
|
|
183
|
-
color: "inherit"
|
|
184
|
-
})
|
|
185
|
-
})]
|
|
171
|
+
}) : /*#__PURE__*/_jsx(Icon, {
|
|
172
|
+
icon: STATUS_ICON_NAMES[status] ?? 'success',
|
|
173
|
+
size: "xsm",
|
|
174
|
+
color: "inherit"
|
|
186
175
|
}), /*#__PURE__*/_jsx(VisuallyHidden, {
|
|
187
176
|
children: statusAnnouncement
|
|
188
177
|
})]
|
|
@@ -365,21 +354,10 @@ export function ChatToolCalls(props) {
|
|
|
365
354
|
size: "sm",
|
|
366
355
|
shade: "subtle",
|
|
367
356
|
"aria-hidden": "true"
|
|
368
|
-
}) : /*#__PURE__*/
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
}
|
|
373
|
-
}), /*#__PURE__*/_jsx("span", {
|
|
374
|
-
...{
|
|
375
|
-
className: "x1n2onr6 x3nfvp2"
|
|
376
|
-
},
|
|
377
|
-
children: /*#__PURE__*/_jsx(Icon, {
|
|
378
|
-
icon: STATUS_ICON_NAMES[latestStatus] ?? 'check',
|
|
379
|
-
size: "xsm",
|
|
380
|
-
color: "inherit"
|
|
381
|
-
})
|
|
382
|
-
})]
|
|
357
|
+
}) : /*#__PURE__*/_jsx(Icon, {
|
|
358
|
+
icon: STATUS_ICON_NAMES[latestStatus] ?? 'success',
|
|
359
|
+
size: "xsm",
|
|
360
|
+
color: "inherit"
|
|
383
361
|
}), /*#__PURE__*/_jsx(VisuallyHidden, {
|
|
384
362
|
children: latestStatusAnnouncement
|
|
385
363
|
})]
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
* - /packages/core/src/Chat/index.ts (exports)
|
|
24
24
|
*/
|
|
25
25
|
import { useCallback, useEffect, useRef, useState } from 'react';
|
|
26
|
-
import { observeResize
|
|
26
|
+
import { observeResize } from "../utils/sharedResizeObserver.js";
|
|
27
27
|
|
|
28
28
|
// =============================================================================
|
|
29
29
|
// Types
|
|
@@ -49,7 +49,7 @@ export function useChatNewMessages({
|
|
|
49
49
|
const elementRef = useRef(null);
|
|
50
50
|
const cleanupRef = useRef(null);
|
|
51
51
|
const attach = useCallback(el => {
|
|
52
|
-
observeResize(el, () => {
|
|
52
|
+
const unobserve = observeResize(el, () => {
|
|
53
53
|
onResizeRef.current?.();
|
|
54
54
|
const messages = el.getElementsByClassName('astryx-chat-message');
|
|
55
55
|
const last = messages.length > 0 ? messages[messages.length - 1] : null;
|
|
@@ -60,7 +60,7 @@ export function useChatNewMessages({
|
|
|
60
60
|
}
|
|
61
61
|
}
|
|
62
62
|
});
|
|
63
|
-
cleanupRef.current =
|
|
63
|
+
cleanupRef.current = unobserve;
|
|
64
64
|
}, []);
|
|
65
65
|
const detach = useCallback(() => {
|
|
66
66
|
cleanupRef.current?.();
|
|
@@ -19,7 +19,9 @@ export interface CheckboxListItemProps extends BaseProps<HTMLLIElement> {
|
|
|
19
19
|
*
|
|
20
20
|
* Accepts a plain string (single-line truncation applied automatically)
|
|
21
21
|
* or a ReactNode for rich content (no truncation constraints —
|
|
22
|
-
* child components control their own text behavior).
|
|
22
|
+
* child components control their own text behavior). Links and buttons in
|
|
23
|
+
* the label keep their own behavior; only non-interactive row clicks
|
|
24
|
+
* delegate to the checkbox.
|
|
23
25
|
*/
|
|
24
26
|
label: ReactNode;
|
|
25
27
|
/**
|
|
@@ -47,9 +49,9 @@ export interface CheckboxListItemProps extends BaseProps<HTMLLIElement> {
|
|
|
47
49
|
*/
|
|
48
50
|
value?: string;
|
|
49
51
|
/**
|
|
50
|
-
* Secondary
|
|
52
|
+
* Secondary content below the label. Accepts a plain string or a ReactNode.
|
|
51
53
|
*/
|
|
52
|
-
description?:
|
|
54
|
+
description?: ReactNode;
|
|
53
55
|
/**
|
|
54
56
|
* Content rendered after the label area.
|
|
55
57
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxListItem.d.ts","sourceRoot":"","sources":["../../src/CheckboxList/CheckboxListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAc,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAIlD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAsB5C,MAAM,WAAW,qBAAsB,SAAQ,SAAS,CAAC,aAAa,CAAC;IACrE
|
|
1
|
+
{"version":3,"file":"CheckboxListItem.d.ts","sourceRoot":"","sources":["../../src/CheckboxList/CheckboxListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAc,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAIlD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAsB5C,MAAM,WAAW,qBAAsB,SAAQ,SAAS,CAAC,aAAa,CAAC;IACrE;;;;;;;;OAQG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;;;;;;;;;;;;;;;;OAiBG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC;IACtC;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;CAChC;AAMD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,YAAY,EAAE,SAAS,EACvB,KAAK,EACL,WAAW,EACX,UAAU,EACV,UAAU,EAAE,cAAsB,EAClC,SAAS,EAAE,aAAqB,EAChC,SAAS,EACT,OAAO,EACP,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EAAE,WAAW,EACpB,GAAG,SAAS,EACb,EAAE,qBAAqB,+BAqIvB;yBArJe,gBAAgB"}
|
|
@@ -5,6 +5,7 @@ import type { SizeValue } from '../utils/types';
|
|
|
5
5
|
export type ISODateTimeString = string & {
|
|
6
6
|
readonly __brand: 'ISODateTimeString';
|
|
7
7
|
};
|
|
8
|
+
export type DateTimeInputNativePicker = 'touch' | 'always' | 'never';
|
|
8
9
|
export type DateTimeInputHourFormat = '12h' | '24h';
|
|
9
10
|
export type DateTimeInputSize = 'sm' | 'md' | 'lg';
|
|
10
11
|
/** Supported minute increments for arrow-key stepping of the time field. */
|
|
@@ -112,9 +113,10 @@ export interface DateTimeInputProps extends Omit<BaseProps, 'onChange' | 'defaul
|
|
|
112
113
|
*/
|
|
113
114
|
hourFormat?: DateTimeInputHourFormat;
|
|
114
115
|
/**
|
|
115
|
-
*
|
|
116
|
-
*
|
|
117
|
-
*
|
|
116
|
+
* Minute step for the time field. Astryx's typed field uses it for arrow-key
|
|
117
|
+
* stepping. The default value permits the native time picker; a non-default
|
|
118
|
+
* value retains the Astryx time field because iOS does not apply native
|
|
119
|
+
* `step` as picker cadence. Ignored by the Astryx touch sheet.
|
|
118
120
|
* @default 1
|
|
119
121
|
*/
|
|
120
122
|
timeIncrement?: DateTimeInputTimeIncrement;
|
|
@@ -129,10 +131,10 @@ export interface DateTimeInputProps extends Omit<BaseProps, 'onChange' | 'defaul
|
|
|
129
131
|
* list is a shortcut, not a restriction, so a time between two options can
|
|
130
132
|
* still be typed.
|
|
131
133
|
*
|
|
132
|
-
*
|
|
133
|
-
*
|
|
134
|
-
*
|
|
135
|
-
*
|
|
134
|
+
* Setting this prop retains Astryx's typed/combobox time field even when
|
|
135
|
+
* `nativePicker` otherwise selects native controls, because the OS picker has
|
|
136
|
+
* no equivalent preset list. The Astryx touch sheet uses wheels instead.
|
|
137
|
+
* Independent of `timeIncrement`, which governs arrow-key stepping.
|
|
136
138
|
*/
|
|
137
139
|
timeOptionInterval?: DateTimeInputTimeOptionInterval;
|
|
138
140
|
/**
|
|
@@ -190,15 +192,47 @@ export interface DateTimeInputProps extends Omit<BaseProps, 'onChange' | 'defaul
|
|
|
190
192
|
* @default 0
|
|
191
193
|
*/
|
|
192
194
|
weekStartsOn?: DayOfWeek | DayOfWeekName;
|
|
195
|
+
/**
|
|
196
|
+
* When date and time picking are handed to the browser/OS instead of Astryx's
|
|
197
|
+
* calendar and time surfaces.
|
|
198
|
+
*
|
|
199
|
+
* - `'touch'` (default): native date and time inputs on a coarse primary
|
|
200
|
+
* pointer; Astryx's typed fields and popovers otherwise
|
|
201
|
+
* - `'always'`: native date and time inputs wherever the browser supports them
|
|
202
|
+
* - `'never'`: Astryx's own surfaces everywhere — typed fields on a fine
|
|
203
|
+
* pointer and the coordinated Date/Time bottom sheet on a coarse pointer
|
|
204
|
+
*
|
|
205
|
+
* Native pickers cannot express `numberOfMonths`, `weekStartsOn`,
|
|
206
|
+
* `dateConstraints`, or `timeOptionInterval`. Calendar-only options are
|
|
207
|
+
* ignored in native mode and constraints are enforced on commit. The native
|
|
208
|
+
* time control is used for the default minute-precision contract; requesting
|
|
209
|
+
* `hasSeconds`, a non-default `timeIncrement`, or `timeOptionInterval` keeps
|
|
210
|
+
* Astryx's time field because iOS cannot represent those behaviors faithfully.
|
|
211
|
+
* `min` / `max` are forwarded to each native control as hints and enforced in
|
|
212
|
+
* JavaScript. `hourFormat` formats the closed value; the OS picker follows the
|
|
213
|
+
* user's locale.
|
|
214
|
+
*
|
|
215
|
+
* @default 'touch'
|
|
216
|
+
* @example
|
|
217
|
+
* ```
|
|
218
|
+
* <DateTimeInput
|
|
219
|
+
* label="Event time"
|
|
220
|
+
* value={dateTime}
|
|
221
|
+
* onChange={setDateTime}
|
|
222
|
+
* nativePicker="never"
|
|
223
|
+
* />
|
|
224
|
+
* ```
|
|
225
|
+
*/
|
|
226
|
+
nativePicker?: DateTimeInputNativePicker;
|
|
193
227
|
}
|
|
194
228
|
/**
|
|
195
|
-
* A combined date and time picker
|
|
196
|
-
*
|
|
197
|
-
*
|
|
198
|
-
*
|
|
199
|
-
*
|
|
229
|
+
* A combined date and time picker whose `nativePicker` prop chooses both
|
|
230
|
+
* surfaces. Native modes use OS-owned date and time controls in Astryx field
|
|
231
|
+
* chrome. With `nativePicker="never"`, fine pointers keep the typed fields and
|
|
232
|
+
* popovers while coarse pointers get Astryx's coordinated Date/Time bottom
|
|
233
|
+
* sheet.
|
|
200
234
|
*/
|
|
201
|
-
export declare function DateTimeInput(props: DateTimeInputProps): import("react").JSX.Element;
|
|
235
|
+
export declare function DateTimeInput({ nativePicker, ...props }: DateTimeInputProps): import("react").JSX.Element;
|
|
202
236
|
export declare namespace DateTimeInput {
|
|
203
237
|
var displayName: string;
|
|
204
238
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateTimeInput.d.ts","sourceRoot":"","sources":["../../src/DateTimeInput/DateTimeInput.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"DateTimeInput.d.ts","sourceRoot":"","sources":["../../src/DateTimeInput/DateTimeInput.tsx"],"names":[],"mappings":"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"}
|