@astryxdesign/core 0.7.9-canary.c26fcd5 → 0.7.9-canary.c8a172b
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/Breadcrumbs/BreadcrumbItem.d.ts.map +1 -1
- package/dist/Breadcrumbs/BreadcrumbItem.js +3 -1
- package/dist/CheckboxInput/CheckboxInput.d.ts.map +1 -1
- package/dist/CheckboxInput/CheckboxInput.js +2 -1
- package/dist/CodeBlock/CodeBlock.d.ts.map +1 -1
- package/dist/CodeBlock/CodeBlock.js +12 -4
- package/dist/ContextMenu/ContextMenu.d.ts.map +1 -1
- package/dist/ContextMenu/ContextMenu.js +3 -1
- package/dist/Drawer/Drawer.d.ts.map +1 -1
- package/dist/Drawer/Drawer.js +3 -1
- package/dist/DropdownMenu/DropdownMenu.d.ts +2 -1
- package/dist/DropdownMenu/DropdownMenu.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenu.js +25 -1
- package/dist/Icon/ComponentIcon.d.ts +33 -0
- package/dist/Icon/ComponentIcon.d.ts.map +1 -0
- package/dist/Icon/ComponentIcon.js +56 -0
- package/dist/Icon/globalIconRegistry.d.ts +45 -4
- package/dist/Icon/globalIconRegistry.d.ts.map +1 -1
- package/dist/Icon/globalIconRegistry.js +137 -3
- package/dist/Icon/index.d.ts +69 -2
- package/dist/Icon/index.d.ts.map +1 -1
- package/dist/Icon/index.js +42 -3
- package/dist/Icon/useIcon.d.ts +13 -4
- package/dist/Icon/useIcon.d.ts.map +1 -1
- package/dist/Icon/useIcon.js +16 -5
- package/dist/Item/Item.d.ts.map +1 -1
- package/dist/Item/Item.js +13 -3
- package/dist/Layer/LayerProvider.d.ts.map +1 -1
- package/dist/Layer/LayerProvider.js +8 -7
- package/dist/Layer/LayerTouch.d.ts +13 -0
- package/dist/Layer/LayerTouch.d.ts.map +1 -0
- package/dist/Layer/LayerTouch.js +16 -0
- package/dist/Layer/holdEntranceInput.d.ts.map +1 -1
- package/dist/Layer/holdEntranceInput.js +4 -2
- package/dist/Layer/layerKeyboardClearance.d.ts +41 -0
- package/dist/Layer/layerKeyboardClearance.d.ts.map +1 -0
- package/dist/Layer/layerKeyboardClearance.js +51 -0
- package/dist/Layer/layerViewportInset.stylex.d.ts +5 -1
- package/dist/Layer/layerViewportInset.stylex.d.ts.map +1 -1
- package/dist/Layer/layerViewportInset.stylex.js +11 -4
- package/dist/Layer/settledBox.d.ts +16 -0
- package/dist/Layer/settledBox.d.ts.map +1 -0
- package/dist/Layer/settledBox.js +117 -0
- package/dist/Layer/toastHost.d.ts +77 -0
- package/dist/Layer/toastHost.d.ts.map +1 -0
- package/dist/Layer/toastHost.js +172 -0
- package/dist/Layer/useLayer.d.ts.map +1 -1
- package/dist/Layer/useLayer.js +36 -106
- package/dist/Layer/useLayerKeyboardClearance.d.ts +54 -0
- package/dist/Layer/useLayerKeyboardClearance.d.ts.map +1 -0
- package/dist/Layer/useLayerKeyboardClearance.js +330 -0
- package/dist/MultiSelector/MultiSelector.d.ts.map +1 -1
- package/dist/MultiSelector/MultiSelector.js +7 -2
- package/dist/Popover/Popover.d.ts.map +1 -1
- package/dist/Popover/Popover.js +1 -0
- package/dist/SegmentedControl/useSegmentedSelectionMotion.d.ts.map +1 -1
- package/dist/SegmentedControl/useSegmentedSelectionMotion.js +13 -53
- package/dist/Selector/Selector.d.ts.map +1 -1
- package/dist/Selector/Selector.js +17 -12
- package/dist/SideNav/SideNavItem.d.ts.map +1 -1
- package/dist/SideNav/SideNavItem.js +7 -4
- package/dist/Switch/useSwitchTouch.d.ts.map +1 -1
- package/dist/Switch/useSwitchTouch.js +9 -5
- package/dist/Table/plugins/sortable/useTableSortable.d.ts.map +1 -1
- package/dist/Table/plugins/sortable/useTableSortable.js +16 -8
- package/dist/Timestamp/TimestampHoverCard.d.ts +2 -1
- package/dist/Timestamp/TimestampHoverCard.d.ts.map +1 -1
- package/dist/Timestamp/TimestampHoverCard.js +12 -5
- package/dist/Toast/ToastContext.d.ts +6 -13
- package/dist/Toast/ToastContext.d.ts.map +1 -1
- package/dist/Toast/ToastContext.js +6 -8
- package/dist/Toast/ToastViewport.d.ts.map +1 -1
- package/dist/Toast/ToastViewport.js +14 -7
- package/dist/Toast/useToast.d.ts.map +1 -1
- package/dist/Toast/useToast.js +10 -50
- package/dist/TopNav/TopNavItem.d.ts.map +1 -1
- package/dist/TopNav/TopNavItem.js +7 -2
- package/dist/Typeahead/BaseTypeahead.d.ts.map +1 -1
- package/dist/Typeahead/BaseTypeahead.js +8 -2
- package/dist/astryx.css +8 -3
- package/dist/gestures/createPanGesture.d.ts +49 -0
- package/dist/gestures/createPanGesture.d.ts.map +1 -0
- package/dist/gestures/createPanGesture.js +80 -0
- package/dist/hooks/index.d.ts +2 -0
- package/dist/hooks/index.d.ts.map +1 -1
- package/dist/hooks/index.js +2 -1
- package/dist/hooks/useMenuPress.d.ts.map +1 -1
- package/dist/hooks/useMenuPress.js +7 -0
- package/dist/hooks/usePanGesture.d.ts +32 -0
- package/dist/hooks/usePanGesture.d.ts.map +1 -0
- package/dist/hooks/usePanGesture.js +67 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/dist/motion/animatedLayout.d.ts.map +1 -1
- package/dist/motion/animatedLayout.js +10 -7
- package/dist/motion/animator.d.ts.map +1 -1
- package/dist/motion/animator.js +3 -2
- package/dist/motion/resolveMotion.d.ts +6 -27
- package/dist/motion/resolveMotion.d.ts.map +1 -1
- package/dist/motion/resolveMotion.js +82 -16
- package/dist/motion/themeTempo.d.ts +7 -0
- package/dist/motion/themeTempo.d.ts.map +1 -0
- package/dist/motion/themeTempo.js +38 -0
- package/dist/motion/themeTiming.d.ts +63 -0
- package/dist/motion/themeTiming.d.ts.map +1 -0
- package/dist/motion/themeTiming.js +173 -0
- package/dist/privateAttributes/press.stylex.d.ts +5 -1
- package/dist/privateAttributes/press.stylex.d.ts.map +1 -1
- package/dist/privateAttributes/press.stylex.js +6 -1
- package/dist/theme/defineTheme.d.ts +42 -3
- package/dist/theme/defineTheme.d.ts.map +1 -1
- package/dist/theme/defineTheme.js +48 -0
- package/dist/theme/resolveThemeValues.d.ts.map +1 -1
- package/dist/theme/resolveThemeValues.js +12 -4
- package/dist/theme/themeMotion.d.ts +7 -5
- package/dist/theme/themeMotion.d.ts.map +1 -1
- package/dist/theme/themeMotion.js +7 -5
- package/package.json +4 -4
- package/src/Breadcrumbs/BreadcrumbItem.tsx +7 -1
- package/src/CheckboxInput/CheckboxInput.tsx +5 -1
- package/src/CodeBlock/CodeBlock.doc.mjs +17 -0
- package/src/CodeBlock/CodeBlock.tsx +11 -2
- package/src/ContextMenu/ContextMenu.tsx +7 -1
- package/src/Drawer/Drawer.tsx +3 -1
- package/src/DropdownMenu/DropdownMenu.tsx +32 -1
- package/src/Icon/ComponentIcon.tsx +71 -0
- package/src/Icon/globalIconRegistry.tsx +181 -4
- package/src/Icon/index.ts +83 -2
- package/src/Icon/useIcon.ts +24 -3
- package/src/Item/Item.doc.mjs +19 -4
- package/src/Item/Item.tsx +21 -2
- package/src/Layer/LayerProvider.tsx +9 -8
- package/src/Layer/LayerTouch.ts +17 -0
- package/src/Layer/holdEntranceInput.ts +4 -2
- package/src/Layer/layerKeyboardClearance.ts +55 -0
- package/src/Layer/layerViewportInset.stylex.ts +16 -5
- package/src/Layer/settledBox.ts +138 -0
- package/src/Layer/toastHost.tsx +212 -0
- package/src/Layer/useLayer.tsx +41 -123
- package/src/Layer/useLayerKeyboardClearance.ts +371 -0
- package/src/Link/useLinkComponent.doc.mjs +95 -0
- package/src/MultiSelector/MultiSelector.tsx +24 -2
- package/src/Overlay/useOverlay.doc.mjs +176 -0
- package/src/Popover/Popover.tsx +5 -0
- package/src/SegmentedControl/useSegmentedSelectionMotion.ts +12 -59
- package/src/Selector/Selector.tsx +24 -2
- package/src/SideNav/SideNavItem.tsx +8 -6
- package/src/Switch/useSwitchTouch.ts +13 -5
- package/src/Table/Table.doc.mjs +19 -0
- package/src/Table/plugins/sortable/useTableSortable.tsx +19 -12
- package/src/Timestamp/Timestamp.doc.mjs +17 -0
- package/src/Timestamp/TimestampHoverCard.tsx +11 -3
- package/src/Toast/ToastContext.ts +7 -17
- package/src/Toast/ToastViewport.tsx +13 -9
- package/src/Toast/useToast.tsx +7 -52
- package/src/TopNav/TopNavItem.tsx +7 -2
- package/src/Typeahead/BaseTypeahead.tsx +23 -3
- package/src/animator/createAnimator.doc.mjs +1 -1
- package/src/gestures/README.md +2 -1
- package/src/gestures/createPanGesture.doc.mjs +145 -0
- package/src/gestures/createPanGesture.ts +107 -0
- package/src/hooks/index.ts +8 -0
- package/src/hooks/useAnimatedLayout.doc.mjs +1 -1
- package/src/hooks/useAnimator.doc.mjs +1 -1
- package/src/hooks/useEntryAnimation.doc.mjs +1 -1
- package/src/hooks/useMenuPress.ts +14 -1
- package/src/hooks/usePanGesture.doc.mjs +158 -0
- package/src/hooks/usePanGesture.ts +75 -0
- package/src/hooks/usePressFeedback.doc.mjs +1 -1
- package/src/index.ts +2 -0
- package/src/motion/README.md +3 -2
- package/src/motion/animatedLayout.ts +10 -7
- package/src/motion/animator.ts +3 -2
- package/src/motion/resolveMotion.ts +89 -18
- package/src/motion/themeTempo.ts +41 -0
- package/src/motion/themeTiming.ts +198 -0
- package/src/privateAttributes/press.stylex.ts +21 -1
- package/src/theme/defineTheme.ts +99 -2
- package/src/theme/resolveThemeValues.ts +12 -3
- package/src/theme/themeMotion.ts +7 -5
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BreadcrumbItem.d.ts","sourceRoot":"","sources":["../../src/Breadcrumbs/BreadcrumbItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;GAoBG;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;
|
|
1
|
+
{"version":3,"file":"BreadcrumbItem.d.ts","sourceRoot":"","sources":["../../src/Breadcrumbs/BreadcrumbItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;GAoBG;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;AAc5C,OAAO,EAIL,KAAK,gBAAgB,EACtB,MAAM,qCAAqC,CAAC;AAM7C,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,8BAA8B,CAAC;AAarE,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;;;;;OAKG;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;AA2ID;;;;;;;;;;;;;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,qBAuMrB;yBAtNe,cAAc"}
|
|
@@ -41,6 +41,8 @@ import { menuTouchActionStyles } from "../DropdownMenu/menuTouchAction.stylex.js
|
|
|
41
41
|
import { useMenuOverflow } from "../DropdownMenu/useMenuOverflow.js";
|
|
42
42
|
import { useTypeahead } from "../hooks/useTypeahead.js";
|
|
43
43
|
import { layerAnimations } from "../Layer/layerAnimations.stylex.js";
|
|
44
|
+
import "../Layer/layerViewportInset.stylex.js";
|
|
45
|
+
import { layerViewportInset } from "../Layer/layerViewportInset.stylex.js";
|
|
44
46
|
import { renderDropdownItems } from "../DropdownMenu/renderDropdownItems.js";
|
|
45
47
|
import { DropdownMenuContext, DropdownMenuRootOpenContext } from "../DropdownMenu/DropdownMenuContext.js";
|
|
46
48
|
import { MENU_ITEM_ROLES, MENU_ITEM_SELECTOR, MENU_BOUNDARY_SELECTOR } from "../DropdownMenu/menuItemRoles.js";
|
|
@@ -131,7 +133,7 @@ const menuStyles = {
|
|
|
131
133
|
k1xSpc: "x78zum5",
|
|
132
134
|
kXwgrk: "xdt5ytf",
|
|
133
135
|
kOIVth: "x1lsbc85",
|
|
134
|
-
kskxy: "
|
|
136
|
+
kskxy: "x1uh1i8a",
|
|
135
137
|
kORKVm: "x1odjw0f",
|
|
136
138
|
"--_dropdown-menu-radius": "x1fcsqxe",
|
|
137
139
|
"--_dropdown-menu-padding": "xgory14",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxInput.d.ts","sourceRoot":"","sources":["../../src/CheckboxInput/CheckboxInput.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAOL,KAAK,WAAW,EAChB,KAAK,UAAU,EAGf,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAS3C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAG9C,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AACtC,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"CheckboxInput.d.ts","sourceRoot":"","sources":["../../src/CheckboxInput/CheckboxInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -26,6 +26,7 @@ import { Spinner } from "../Spinner/Spinner.js";
|
|
|
26
26
|
import { useTooltip } from "../Tooltip/useTooltip.js";
|
|
27
27
|
import { mergeProps } from "../utils/mergeProps.js";
|
|
28
28
|
import { rtlStyles } from "../utils/rtlStyles.js";
|
|
29
|
+
import { withholdCallerHandlers } from "../utils/disabledInteraction.js";
|
|
29
30
|
import "../Indicator/indicator.markers.stylex.js";
|
|
30
31
|
import { indicatorScope } from "../Indicator/indicator.markers.stylex.js";
|
|
31
32
|
import "../internal/indicatorPress.stylex.js";
|
|
@@ -327,7 +328,7 @@ export function CheckboxInput({
|
|
|
327
328
|
...stylex.props(styles.checkboxWrapper, wrapperSizeStyles[size], !isDisabled && styles.indicatorPressOverlay, !isDisabled && isRowPressSurface && styles.indicatorRowPressOverlay),
|
|
328
329
|
...focusProps,
|
|
329
330
|
children: [/*#__PURE__*/_jsx("input", {
|
|
330
|
-
...rest,
|
|
331
|
+
...withholdCallerHandlers(rest, isDisabled),
|
|
331
332
|
ref: useMergedRefs(ref, indeterminateRef, disabledMessageTooltip.positionRef, inputRef),
|
|
332
333
|
id: id,
|
|
333
334
|
type: "checkbox"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeBlock.d.ts","sourceRoot":"","sources":["../../src/CodeBlock/CodeBlock.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"CodeBlock.d.ts","sourceRoot":"","sources":["../../src/CodeBlock/CodeBlock.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA4B5C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,WAAW,CAAC;AAW5C,OAAO,EAAc,KAAK,qBAAqB,EAAC,MAAM,iBAAiB,CAAC;AAqfxE,MAAM,WAAW,cAAe,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,IAAI,EAAE,MAAM,CAAC;IACb;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,yJAAyJ;IACzJ,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,CACV,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,KACb;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAC,EAAE,CAAC;IAClD,aAAa,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC5C;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,qBAAqB,CAAC;CACrC;AA0UD;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,QAAsB,EACtB,KAAK,EACL,gBAAuB,EACvB,cAAsB,EACtB,eAAmB,EACnB,cAAc,EACd,MAAc,EACd,aAAoB,EACpB,MAAM,EACN,UAAU,EACV,SAAiB,EACjB,SAAS,EACT,aAAqB,EACrB,oBAAyB,EACzB,IAAW,EACX,KAAK,EAAE,SAAyB,EAChC,SAAkB,EAClB,SAAS,EAAE,eAAe,EAC1B,aAAsB,EACtB,WAAW,EACX,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,cAAc,qBAmUhB;yBA9Ve,SAAS"}
|
|
@@ -4,7 +4,8 @@
|
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* @file CodeBlock.tsx
|
|
7
|
-
* @input Uses React, StyleX, theme tokens, CSS Custom Highlight API, SyntaxTheme
|
|
7
|
+
* @input Uses React, StyleX, theme tokens, CSS Custom Highlight API, SyntaxTheme
|
|
8
|
+
* provider, and the theme's `code-block-copy` icon slot
|
|
8
9
|
* @output Exports CodeBlock component and CodeBlockProps
|
|
9
10
|
* @position Core implementation; read-only syntax-highlighted code display
|
|
10
11
|
*/
|
|
@@ -17,6 +18,7 @@ import { isRenderable, mergeProps, rtlStyles } from "../utils/index.js";
|
|
|
17
18
|
import { useClipboard } from "../hooks/useClipboard.js";
|
|
18
19
|
import { useScrollableArea } from "../hooks/useScrollableArea.js";
|
|
19
20
|
import { Icon } from "../Icon/index.js";
|
|
21
|
+
import { ComponentIcon } from "../Icon/ComponentIcon.js";
|
|
20
22
|
import { IconButton } from "../IconButton/index.js";
|
|
21
23
|
import { tokenize, tokenizeAsync, splitDiffLines, flatTokensToLines, SYNC_TOKENIZE_THRESHOLD } from "./tokenizer.js";
|
|
22
24
|
import { isCustomCodeLanguage, languageKey, languageLabel as languageWord, sameCodeLanguage } from "./grammar.js";
|
|
@@ -693,9 +695,15 @@ export function CodeBlock({
|
|
|
693
695
|
const copyButtonEl = hasCopyButton ? /*#__PURE__*/_jsx(IconButton, {
|
|
694
696
|
variant: "ghost",
|
|
695
697
|
size: "sm",
|
|
696
|
-
icon: /*#__PURE__*/_jsx(
|
|
697
|
-
|
|
698
|
-
|
|
698
|
+
icon: /*#__PURE__*/_jsx(ComponentIcon, {
|
|
699
|
+
slot: "code-block-copy",
|
|
700
|
+
state: {
|
|
701
|
+
copied
|
|
702
|
+
},
|
|
703
|
+
fallback: {
|
|
704
|
+
icon: copied ? 'check' : 'copy',
|
|
705
|
+
size: 'sm'
|
|
706
|
+
},
|
|
699
707
|
color: "inherit"
|
|
700
708
|
})
|
|
701
709
|
// A visible "Copy" hover/focus hint via Button's built-in tooltip. It
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../src/ContextMenu/ContextMenu.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AAEH,OAAO,KASN,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../src/ContextMenu/ContextMenu.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AAEH,OAAO,KASN,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAyCrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAEjD,OAAO,KAAK,EACV,kBAAkB,EAClB,oBAAoB,EACpB,uBAAuB,EACvB,mBAAmB,EACpB,MAAM,8BAA8B,CAAC;AAGtC,OAAO,EAEL,KAAK,oBAAoB,EAC1B,MAAM,kCAAkC,CAAC;AAqI1C,MAAM,MAAM,mBAAmB,GAAG,oBAAoB,CAAC;AAEvD,MAAM,MAAM,sBAAsB,GAAG,uBAAuB,CAAC;AAE7D,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,CAAC;AAErD,MAAM,MAAM,iBAAiB,GAAG,kBAAkB,CAAC;AAMnD,UAAU,oBAAqB,SAAQ,SAAS;IAC9C,oDAAoD;IACpD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IAC3B;;;;;OAKG;IACH,aAAa,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IAC9C,+DAA+D;IAC/D,QAAQ,EAAE,SAAS,CAAC;IACpB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,wCAAwC;IACxC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4EAA4E;IAC5E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,oBAAoB,CAAC;IACpC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,UAAU,oBAAqB,SAAQ,oBAAoB;IACzD,gDAAgD;IAChD,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AAED,UAAU,wBAAyB,SAAQ,oBAAoB;IAC7D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,+CAA+C;IAC/C,WAAW,EAAE,SAAS,CAAC;CACxB;AAED,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GAAG,wBAAwB,CAAC;AAM/E;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,IAAW,EACX,KAAK,EAAE,cAAc,EACrB,UAAkB,EAClB,YAAY,EACZ,YAAwB,EACxB,SAAiB,EACjB,GAAG,EACH,SAAS,EACT,KAAK,EACL,MAAM,EACN,aAAa,EACb,aAAa,EAAE,iBAAiB,EAChC,YAAY,EAAE,gBAAgB,EAC9B,WAAW,EAAE,eAAe,EAC5B,UAAU,EAAE,cAAc,EAC1B,aAAa,EAAE,iBAAiB,EAChC,aAAa,EAAE,MAAM,EACrB,GAAG,IAAI,EACR,EAAE,gBAAgB,qBAijBlB;yBAtkBe,WAAW"}
|
|
@@ -61,6 +61,8 @@ import { useMenuPress } from "../hooks/useMenuPress.js";
|
|
|
61
61
|
import { useTypeahead } from "../hooks/useTypeahead.js";
|
|
62
62
|
import { useLongPress } from "../hooks/useLongPress.js";
|
|
63
63
|
import { layerAnimations } from "../Layer/layerAnimations.stylex.js";
|
|
64
|
+
import "../Layer/layerViewportInset.stylex.js";
|
|
65
|
+
import { layerViewportInset } from "../Layer/layerViewportInset.stylex.js";
|
|
64
66
|
import "../theme/tokens.stylex.js";
|
|
65
67
|
import { colorVars, spacingVars, radiusVars, durationVars, easeVars, shadowVars } from "../theme/tokens.stylex.js";
|
|
66
68
|
import { mergeProps, rtlStyles } from "../utils/index.js";
|
|
@@ -87,7 +89,7 @@ const styles = {
|
|
|
87
89
|
k1xSpc: "x78zum5",
|
|
88
90
|
kXwgrk: "xdt5ytf",
|
|
89
91
|
kOIVth: "x1lsbc85",
|
|
90
|
-
kskxy: "
|
|
92
|
+
kskxy: "x1uh1i8a",
|
|
91
93
|
kORKVm: "x1odjw0f",
|
|
92
94
|
"--_dropdown-menu-radius": "x1fcsqxe",
|
|
93
95
|
"--_dropdown-menu-padding": "xgory14",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../src/Drawer/Drawer.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDG;AAEH,OAAO,EAAgC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAIpE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAQ5C,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../src/Drawer/Drawer.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDG;AAEH,OAAO,EAAgC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAIpE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAQ5C,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,WAAW,CAAC;AAsB7C,OAAO,KAAK,EAAC,WAAW,EAAe,MAAM,WAAW,CAAC;AA+MzD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC/D,iDAAiD;IACjD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAEnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;;OAMG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAExC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAEvB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;;;OAKG;IACH,YAAY,CAAC,EAAE;QACb;;;;;;WAMG;QACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;KAC/B,CAAC;IAEF;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EAAE,UAAU,EAClB,YAAY,EACZ,IAAY,EACZ,KAAW,EACX,YAAY,EACZ,KAAK,EACL,QAAe,EACf,OAAgB,EAChB,OAAO,EACP,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,+BAsNb;yBAxOe,MAAM"}
|
package/dist/Drawer/Drawer.js
CHANGED
|
@@ -64,7 +64,9 @@ import { useSettledOpen } from "../hooks/useSettledOpen.js";
|
|
|
64
64
|
import * as stylex from '@stylexjs/stylex';
|
|
65
65
|
import "../theme/tokens.stylex.js";
|
|
66
66
|
import { borderVars, colorVars, durationVars, easeVars, shadowVars } from "../theme/tokens.stylex.js";
|
|
67
|
-
import { useFocusTrap
|
|
67
|
+
import { useFocusTrap } from "../hooks/useFocusTrap.js";
|
|
68
|
+
import { useMergedRefs } from "../hooks/useMergedRefs.js";
|
|
69
|
+
import { useScrollLock } from "../hooks/useScrollLock.js";
|
|
68
70
|
import { LayerDepthProvider, useLayerDismissal } from "../Layer/index.js";
|
|
69
71
|
import { layerTextReset } from "../Layer/layerTextReset.stylex.js";
|
|
70
72
|
import { layerStructureReset } from "../Layer/layerStructureReset.stylex.js";
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @file DropdownMenu.tsx
|
|
3
3
|
* @input Uses React, StyleX, usePopover, MenuBottomSheet (lazy), Button, List,
|
|
4
|
-
* useListFocus,
|
|
4
|
+
* useListFocus, the shared viewport-safe menu-width resolver, and the
|
|
5
|
+
* layer runtime's entrance hold
|
|
5
6
|
* @output Exports DropdownMenu with caller-selected popover or bottom-sheet
|
|
6
7
|
* presentation
|
|
7
8
|
* @position Core implementation; consumed by index.ts
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenu.tsx"],"names":[],"mappings":"AAIA
|
|
1
|
+
{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AAEH,OAAO,KAAK,EAAE,EAOZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAKf,OAAO,EAAS,KAAK,WAAW,EAAC,MAAM,WAAW,CAAC;AAKnD,OAAO,KAAK,EAAC,qBAAqB,EAAC,MAAM,oBAAoB,CAAC;AA+B9D,OAAO,EAEL,KAAK,oBAAoB,EAC1B,MAAM,kCAAkC,CAAC;AAS1C,OAAO,KAAK,EAAC,cAAc,EAAE,cAAc,EAAC,MAAM,mBAAmB,CAAC;AAStE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA2L5C;;;;;;;GAOG;AACH,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAChD,qBAAqB,EACnB,MAAM,GACN,SAAS,GACT,YAAY,GACZ,SAAS,GACT,aAAa,GACb,YAAY,GACZ,kBAAkB,GAClB,MAAM,GACN,QAAQ,GACR,KAAK,CACR;IACC;;;;;;OAMG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,6BAA6B;IAC7B,KAAK,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,KAAK,CAAC,EAAE,kBAAkB,EAAE,CAAC;CAC9B;AAED;;;GAGG;AACH,MAAM,WAAW,uBAAuB;IACtC,IAAI,EAAE,SAAS,CAAC;CACjB;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,SAAS,CAAC;IAChB,0EAA0E;IAC1E,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,oBAAoB,EAAE,CAAC;CAC/B;AAED,MAAM,MAAM,kBAAkB,GAC5B,oBAAoB,GAAG,uBAAuB,GAAG,mBAAmB,CAAC;AAMvE,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;AAEnE,MAAM,MAAM,wBAAwB,GAAG,oBAAoB,CAAC;AAE5D;;;;;;GAMG;AACH,MAAM,WAAW,wBAAwB;IACvC,yEAAyE;IACzE,GAAG,EAAE,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IAC3C,yDAAyD;IACzD,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACxD,cAAc,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC/D,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAChE,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC9D,SAAS,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC7D,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACxD,eAAe,EAAE,MAAM,GAAG,QAAQ,CAAC;IACnC,eAAe,EAAE,OAAO,CAAC;IACzB,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,UAAU,qBAAsB,SAAQ,SAAS;IAC/C;;;OAGG;IACH,MAAM,CAAC,EAAE,uBAAuB,CAAC;IACjC;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,wBAAwB,KAAK,SAAS,CAAC;IAC/D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B;;;;OAIG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,UAAU,qBAAsB,SAAQ,qBAAqB;IAC3D;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,wBAAwB,CAAC;IACxC,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,UAAU,yBAA0B,SAAQ,qBAAqB;IAC/D;;;;OAIG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,MAAM,iBAAiB,GAC3B,qBAAqB,GAAG,yBAAyB,CAAC;AA4xCpD,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,qBAkDpD;yBAlDe,YAAY"}
|
|
@@ -5,7 +5,8 @@
|
|
|
5
5
|
/**
|
|
6
6
|
* @file DropdownMenu.tsx
|
|
7
7
|
* @input Uses React, StyleX, usePopover, MenuBottomSheet (lazy), Button, List,
|
|
8
|
-
* useListFocus,
|
|
8
|
+
* useListFocus, the shared viewport-safe menu-width resolver, and the
|
|
9
|
+
* layer runtime's entrance hold
|
|
9
10
|
* @output Exports DropdownMenu with caller-selected popover or bottom-sheet
|
|
10
11
|
* presentation
|
|
11
12
|
* @position Core implementation; consumed by index.ts
|
|
@@ -38,6 +39,7 @@ import React, { useCallback, useEffect, useId, useMemo, useRef, useState } from
|
|
|
38
39
|
import { readAccessibleName } from "../utils/accessibleName.js";
|
|
39
40
|
import * as stylex from '@stylexjs/stylex';
|
|
40
41
|
import { usePopover } from "../Popover/usePopover.js";
|
|
42
|
+
import { holdEntranceInput } from "../Layer/holdEntranceInput.js";
|
|
41
43
|
import { Button } from "../Button/index.js";
|
|
42
44
|
import { Heading } from "../Heading/index.js";
|
|
43
45
|
import { Icon } from "../Icon/index.js";
|
|
@@ -631,6 +633,10 @@ function DropdownMenuPopover({
|
|
|
631
633
|
// The press model is mounted below (it needs the popover); the hide path
|
|
632
634
|
// above it ends the gesture in flight through this ref.
|
|
633
635
|
const cancelMenuPressRef = useRef(() => {});
|
|
636
|
+
// The entrance hold starts as the layer shows. Its start is set below, once
|
|
637
|
+
// the list ref exists, and its release is kept for the close.
|
|
638
|
+
const holdEntranceRef = useRef(() => {});
|
|
639
|
+
const releaseEntranceRef = useRef(null);
|
|
634
640
|
|
|
635
641
|
// Submenu flyouts are `popover="manual"` elements nested inside the menu's
|
|
636
642
|
// `popover="auto"` element, so the browser's light dismiss of the menu never
|
|
@@ -676,6 +682,8 @@ function DropdownMenuPopover({
|
|
|
676
682
|
// keyboard (the modality tracker decides; the suppressed style hides the
|
|
677
683
|
// pointer case, which Safari would otherwise paint after a touch pick).
|
|
678
684
|
const handleLayerHide = useCallback(() => {
|
|
685
|
+
releaseEntranceRef.current?.();
|
|
686
|
+
releaseEntranceRef.current = null;
|
|
679
687
|
// Whatever closed the menu — light dismiss, the dismissal stack, Escape
|
|
680
688
|
// or a controlled close — its flyouts close with it.
|
|
681
689
|
hideOpenFlyouts();
|
|
@@ -731,6 +739,7 @@ function DropdownMenuPopover({
|
|
|
731
739
|
}, [renderTrigger, hasRegions, triggerName]);
|
|
732
740
|
const handleLayerShow = useCallback(() => {
|
|
733
741
|
acceptedOpenRef.current = true;
|
|
742
|
+
holdEntranceRef.current();
|
|
734
743
|
resetFocusReturn();
|
|
735
744
|
if (renderTrigger != null) {
|
|
736
745
|
setTriggerName(readAccessibleName(buttonRef.current));
|
|
@@ -858,6 +867,21 @@ function DropdownMenuPopover({
|
|
|
858
867
|
});
|
|
859
868
|
}, [popover.isOpen, focusFirst, focusLast, listRef]);
|
|
860
869
|
|
|
870
|
+
// Under a finger, where the primary pointer is coarse, a tap or a drag during
|
|
871
|
+
// the entrance reaches nothing, as in UIMenu. Keys and assistive technology
|
|
872
|
+
// stay live.
|
|
873
|
+
const holdEntrance = useCallback(() => {
|
|
874
|
+
releaseEntranceRef.current?.();
|
|
875
|
+
const layer = pressTouchModel === 'uikit' ? listRef.current?.closest('[popover]') : null;
|
|
876
|
+
releaseEntranceRef.current = layer == null ? null : holdEntranceInput(layer);
|
|
877
|
+
}, [listRef, pressTouchModel]);
|
|
878
|
+
holdEntranceRef.current = holdEntrance;
|
|
879
|
+
// The layer runtime's input hold: an unmount during the entrance releases it.
|
|
880
|
+
useEffect(() => () => {
|
|
881
|
+
releaseEntranceRef.current?.();
|
|
882
|
+
releaseEntranceRef.current = null;
|
|
883
|
+
}, []);
|
|
884
|
+
|
|
861
885
|
// With a header or footer the popover is a modal dialog: Tab and Shift+Tab
|
|
862
886
|
// walk the header's controls, the menu as one stop, then the footer's
|
|
863
887
|
// controls, and wrap at either end. The key is handled here in full, so the
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @file ComponentIcon.tsx
|
|
3
|
+
* @input A component icon slot, its state, the component's fallback, and
|
|
4
|
+
* optional caller-supplied icon content
|
|
5
|
+
* @output Exports the internal ComponentIcon renderer
|
|
6
|
+
* @position Shared renderer that components use for a themeable icon slot:
|
|
7
|
+
* caller content, then the theme's slot, then the component's fallback
|
|
8
|
+
*/
|
|
9
|
+
import type { ReactNode } from 'react';
|
|
10
|
+
import { type IconColor } from './Icon.js';
|
|
11
|
+
import type { ComponentIconFallback, ComponentIconSlotState } from './globalIconRegistry.js';
|
|
12
|
+
import type { ComponentIconSlotName } from './index.js';
|
|
13
|
+
type ComponentIconProps<Slot extends ComponentIconSlotName> = {
|
|
14
|
+
slot: Slot;
|
|
15
|
+
state: ComponentIconSlotState<Slot>;
|
|
16
|
+
fallback: ComponentIconFallback;
|
|
17
|
+
color?: IconColor;
|
|
18
|
+
/**
|
|
19
|
+
* Icon content the component's caller supplied. When set (`null`
|
|
20
|
+
* included), it renders instead of the slot.
|
|
21
|
+
*/
|
|
22
|
+
content?: ReactNode;
|
|
23
|
+
};
|
|
24
|
+
/**
|
|
25
|
+
* Render a component's themeable icon. Caller content wins. Otherwise the
|
|
26
|
+
* active theme's `componentIcons[slot]` adjusts the component's fallback,
|
|
27
|
+
* and the result renders through `Icon`, so shared icon resolution chooses
|
|
28
|
+
* the artwork. A resolved `null` renders nothing.
|
|
29
|
+
* @internal
|
|
30
|
+
*/
|
|
31
|
+
export declare function ComponentIcon<Slot extends ComponentIconSlotName>({ content, ...props }: ComponentIconProps<Slot>): ReactNode;
|
|
32
|
+
export {};
|
|
33
|
+
//# sourceMappingURL=ComponentIcon.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ComponentIcon.d.ts","sourceRoot":"","sources":["../../src/Icon/ComponentIcon.tsx"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,EAAO,KAAK,SAAS,EAAC,MAAM,QAAQ,CAAC;AAC5C,OAAO,KAAK,EACV,qBAAqB,EACrB,sBAAsB,EACvB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,KAAK,EAAC,qBAAqB,EAAc,MAAM,SAAS,CAAC;AAGhE,KAAK,kBAAkB,CAAC,IAAI,SAAS,qBAAqB,IAAI;IAC5D,IAAI,EAAE,IAAI,CAAC;IACX,KAAK,EAAE,sBAAsB,CAAC,IAAI,CAAC,CAAC;IACpC,QAAQ,EAAE,qBAAqB,CAAC;IAChC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,IAAI,SAAS,qBAAqB,EAAE,EAChE,OAAO,EACP,GAAG,KAAK,EACT,EAAE,kBAAkB,CAAC,IAAI,CAAC,GAAG,SAAS,CAKtC"}
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
|
+
|
|
3
|
+
'use client';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* @file ComponentIcon.tsx
|
|
7
|
+
* @input A component icon slot, its state, the component's fallback, and
|
|
8
|
+
* optional caller-supplied icon content
|
|
9
|
+
* @output Exports the internal ComponentIcon renderer
|
|
10
|
+
* @position Shared renderer that components use for a themeable icon slot:
|
|
11
|
+
* caller content, then the theme's slot, then the component's fallback
|
|
12
|
+
*/
|
|
13
|
+
import { Icon } from "./Icon.js";
|
|
14
|
+
import { useComponentIcon } from "./useIcon.js";
|
|
15
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
16
|
+
/**
|
|
17
|
+
* Render a component's themeable icon. Caller content wins. Otherwise the
|
|
18
|
+
* active theme's `componentIcons[slot]` adjusts the component's fallback,
|
|
19
|
+
* and the result renders through `Icon`, so shared icon resolution chooses
|
|
20
|
+
* the artwork. A resolved `null` renders nothing.
|
|
21
|
+
* @internal
|
|
22
|
+
*/
|
|
23
|
+
export function ComponentIcon({
|
|
24
|
+
content,
|
|
25
|
+
...props
|
|
26
|
+
}) {
|
|
27
|
+
if (content !== undefined) {
|
|
28
|
+
return content;
|
|
29
|
+
}
|
|
30
|
+
return /*#__PURE__*/_jsx(SlotIcon, {
|
|
31
|
+
...props
|
|
32
|
+
});
|
|
33
|
+
}
|
|
34
|
+
function SlotIcon({
|
|
35
|
+
slot,
|
|
36
|
+
state,
|
|
37
|
+
fallback,
|
|
38
|
+
color
|
|
39
|
+
}) {
|
|
40
|
+
const {
|
|
41
|
+
icon,
|
|
42
|
+
variant,
|
|
43
|
+
size
|
|
44
|
+
} = useComponentIcon(slot, state, fallback);
|
|
45
|
+
if (icon == null) {
|
|
46
|
+
return null;
|
|
47
|
+
}
|
|
48
|
+
return /*#__PURE__*/_jsx(Icon, {
|
|
49
|
+
icon: icon
|
|
50
|
+
// Resolution keeps only a variant the active theme lists.
|
|
51
|
+
,
|
|
52
|
+
variant: variant,
|
|
53
|
+
size: size,
|
|
54
|
+
color: color
|
|
55
|
+
});
|
|
56
|
+
}
|
|
@@ -3,9 +3,10 @@
|
|
|
3
3
|
* @input Theme icon entries (a DefinedTheme or a registered theme name), the
|
|
4
4
|
* process-wide registry, and built-in defaults
|
|
5
5
|
* @output Exports registerIcons, getIconRegistry, getIcon, getExtendedIcon,
|
|
6
|
-
* resetIcons, resolveIcon (internal), IconName,
|
|
7
|
-
* IconRequest
|
|
8
|
-
* @position Global and theme-scoped icon registry
|
|
6
|
+
* resetIcons, resolveIcon and resolveComponentIcon (internal), IconName,
|
|
7
|
+
* IconRegistry, IconEntry, IconRequest
|
|
8
|
+
* @position Global and theme-scoped icon registry and component icon slot
|
|
9
|
+
* resolution; works in server and client environments
|
|
9
10
|
*
|
|
10
11
|
* This module has NO 'use client' directive — it's importable from RSC.
|
|
11
12
|
* Components resolve semantic icons through getIcon() or the client useIcon() hook.
|
|
@@ -17,10 +18,14 @@
|
|
|
17
18
|
* its resolved size and a variant the entry can receive (listed by the active
|
|
18
19
|
* theme and, for a theme entry, by the theme that defined it), otherwise
|
|
19
20
|
* `undefined`; the public reads below pass `{size: 'md'}`.
|
|
21
|
+
*
|
|
22
|
+
* `resolveComponentIcon` is the only caller of a theme's `componentIcons`
|
|
23
|
+
* slot functions. It turns a slot, its state, and the component's own
|
|
24
|
+
* fallback into the request the component renders through `Icon`.
|
|
20
25
|
*/
|
|
21
26
|
import type { ReactNode } from 'react';
|
|
22
27
|
import type { IconSize } from './IconSize.stylex.js';
|
|
23
|
-
import type { IconVariant } from './index.js';
|
|
28
|
+
import type { ComponentIconRequest, ComponentIconSlotMap, ComponentIconSlotName, IconVariant } from './index.js';
|
|
24
29
|
import type { DefinedTheme } from '../theme/defineTheme.js';
|
|
25
30
|
/**
|
|
26
31
|
* Semantic icon names used internally by Astryx components.
|
|
@@ -173,6 +178,42 @@ export declare function getIcon(name: ExtendedIconName, source?: IconRegistrySou
|
|
|
173
178
|
* ```
|
|
174
179
|
*/
|
|
175
180
|
export declare function getExtendedIcon(name: ExtendedIconName, fallback?: ReactNode, source?: IconRegistrySource): ReactNode;
|
|
181
|
+
/**
|
|
182
|
+
* A theme's stored value for a slot, function included. A function was typed
|
|
183
|
+
* for its slot's state; resolution passes it the state of that slot only.
|
|
184
|
+
*/
|
|
185
|
+
export type StoredComponentIconValue = IconName | null | ComponentIconRequest<string> | ((state: never) => ComponentIconRequest<string> | null | undefined);
|
|
186
|
+
/** The state a slot's component passes: `undefined` for a stateless slot. */
|
|
187
|
+
export type ComponentIconSlotState<Slot extends ComponentIconSlotName> = ComponentIconSlotMap[Slot] extends true ? undefined : Readonly<ComponentIconSlotMap[Slot]>;
|
|
188
|
+
/**
|
|
189
|
+
* What a component renders for a slot when the theme maps nothing: its own
|
|
190
|
+
* icon name (or `null` for none), and optionally its own variant and size.
|
|
191
|
+
*/
|
|
192
|
+
export type ComponentIconFallback = IconName | null | Readonly<{
|
|
193
|
+
icon: IconName | null;
|
|
194
|
+
variant?: IconVariant;
|
|
195
|
+
size?: IconSize;
|
|
196
|
+
}>;
|
|
197
|
+
/** A slot resolved to what the component renders through `Icon`. */
|
|
198
|
+
export type ResolvedComponentIcon = Readonly<{
|
|
199
|
+
icon: IconName | null;
|
|
200
|
+
variant?: string;
|
|
201
|
+
size?: IconSize;
|
|
202
|
+
}>;
|
|
203
|
+
/**
|
|
204
|
+
* Resolve a component's icon slot. The component passes its slot state and
|
|
205
|
+
* its own fallback; the active theme's `componentIcons[slot]` adjusts that
|
|
206
|
+
* fallback. A shared icon name replaces the fallback icon, `null` hides the
|
|
207
|
+
* icon, a request applies field by field, and a slot function receives the
|
|
208
|
+
* state and returns a request whose result is final: `null` hides the icon,
|
|
209
|
+
* `undefined` changes nothing.
|
|
210
|
+
*
|
|
211
|
+
* This is the only caller of a theme's slot functions. Caller-supplied icon
|
|
212
|
+
* content wins before resolution, so a component does not resolve the slot
|
|
213
|
+
* when its caller passed content.
|
|
214
|
+
* @internal
|
|
215
|
+
*/
|
|
216
|
+
export declare function resolveComponentIcon<Slot extends ComponentIconSlotName>(slot: Slot, state: ComponentIconSlotState<Slot>, fallback: ComponentIconFallback, source: IconRegistrySource): ResolvedComponentIcon;
|
|
176
217
|
/**
|
|
177
218
|
* Reset the global registry. For testing only.
|
|
178
219
|
* @internal
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"globalIconRegistry.d.ts","sourceRoot":"","sources":["../../src/Icon/globalIconRegistry.tsx"],"names":[],"mappings":"AAEA
|
|
1
|
+
{"version":3,"file":"globalIconRegistry.d.ts","sourceRoot":"","sources":["../../src/Icon/globalIconRegistry.tsx"],"names":[],"mappings":"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"}
|
|
@@ -5,9 +5,10 @@
|
|
|
5
5
|
* @input Theme icon entries (a DefinedTheme or a registered theme name), the
|
|
6
6
|
* process-wide registry, and built-in defaults
|
|
7
7
|
* @output Exports registerIcons, getIconRegistry, getIcon, getExtendedIcon,
|
|
8
|
-
* resetIcons, resolveIcon (internal), IconName,
|
|
9
|
-
* IconRequest
|
|
10
|
-
* @position Global and theme-scoped icon registry
|
|
8
|
+
* resetIcons, resolveIcon and resolveComponentIcon (internal), IconName,
|
|
9
|
+
* IconRegistry, IconEntry, IconRequest
|
|
10
|
+
* @position Global and theme-scoped icon registry and component icon slot
|
|
11
|
+
* resolution; works in server and client environments
|
|
11
12
|
*
|
|
12
13
|
* This module has NO 'use client' directive — it's importable from RSC.
|
|
13
14
|
* Components resolve semantic icons through getIcon() or the client useIcon() hook.
|
|
@@ -19,6 +20,10 @@
|
|
|
19
20
|
* its resolved size and a variant the entry can receive (listed by the active
|
|
20
21
|
* theme and, for a theme entry, by the theme that defined it), otherwise
|
|
21
22
|
* `undefined`; the public reads below pass `{size: 'md'}`.
|
|
23
|
+
*
|
|
24
|
+
* `resolveComponentIcon` is the only caller of a theme's `componentIcons`
|
|
25
|
+
* slot functions. It turns a slot, its state, and the component's own
|
|
26
|
+
* fallback into the request the component renders through `Icon`.
|
|
22
27
|
*/
|
|
23
28
|
|
|
24
29
|
import { defaultIcons } from "./defaultIcons.js";
|
|
@@ -319,6 +324,135 @@ export function getExtendedIcon(name, fallback, source) {
|
|
|
319
324
|
return readIconEntry(selectIconEntry(name, source, fallback), PUBLIC_READ_REQUEST);
|
|
320
325
|
}
|
|
321
326
|
|
|
327
|
+
// =============================================================================
|
|
328
|
+
// Component icon slots
|
|
329
|
+
// =============================================================================
|
|
330
|
+
|
|
331
|
+
/**
|
|
332
|
+
* A theme's stored value for a slot, function included. A function was typed
|
|
333
|
+
* for its slot's state; resolution passes it the state of that slot only.
|
|
334
|
+
*/
|
|
335
|
+
|
|
336
|
+
/** The state a slot's component passes: `undefined` for a stateless slot. */
|
|
337
|
+
|
|
338
|
+
/**
|
|
339
|
+
* What a component renders for a slot when the theme maps nothing: its own
|
|
340
|
+
* icon name (or `null` for none), and optionally its own variant and size.
|
|
341
|
+
*/
|
|
342
|
+
|
|
343
|
+
/** A slot resolved to what the component renders through `Icon`. */
|
|
344
|
+
|
|
345
|
+
const ICON_SIZES = new Set(['xsm', 'sm', 'md', 'lg']);
|
|
346
|
+
function isIconName(value) {
|
|
347
|
+
return typeof value === 'string' && !isNamespacedKey(value) && Object.hasOwn(defaultIcons, value);
|
|
348
|
+
}
|
|
349
|
+
|
|
350
|
+
/**
|
|
351
|
+
* The theme's slot values, functions included. A theme from `defineTheme`
|
|
352
|
+
* keeps them in `__componentIcons` when any value is a function (its public
|
|
353
|
+
* `componentIcons` is the static view); otherwise `componentIcons` holds them.
|
|
354
|
+
*/
|
|
355
|
+
function getThemeComponentIcons(theme) {
|
|
356
|
+
if (theme == null) {
|
|
357
|
+
return null;
|
|
358
|
+
}
|
|
359
|
+
return theme.__componentIcons ?? theme.componentIcons ?? null;
|
|
360
|
+
}
|
|
361
|
+
function warnMalformedRequest(slot, problem) {
|
|
362
|
+
warnOnce(`component-icons:${slot}:${problem}`, 'Icon', `componentIcons["${slot}"] ${problem}. The component keeps its own value for that field.`);
|
|
363
|
+
}
|
|
364
|
+
|
|
365
|
+
/**
|
|
366
|
+
* Apply a theme's request to the component's fallback, field by field. A
|
|
367
|
+
* missing field keeps the fallback. An unknown icon, a variant the active
|
|
368
|
+
* theme does not list, or an unsupported size is ignored with one
|
|
369
|
+
* development-only warning.
|
|
370
|
+
*/
|
|
371
|
+
function applyComponentIconRequest(slot, fallback, request, theme) {
|
|
372
|
+
if (request === undefined) {
|
|
373
|
+
return fallback;
|
|
374
|
+
}
|
|
375
|
+
if (request === null) {
|
|
376
|
+
return {
|
|
377
|
+
...fallback,
|
|
378
|
+
icon: null
|
|
379
|
+
};
|
|
380
|
+
}
|
|
381
|
+
if (typeof request !== 'object' || Array.isArray(request)) {
|
|
382
|
+
warnMalformedRequest(slot, `returned ${JSON.stringify(request)}, which is not a request`);
|
|
383
|
+
return fallback;
|
|
384
|
+
}
|
|
385
|
+
const {
|
|
386
|
+
icon,
|
|
387
|
+
variant,
|
|
388
|
+
size
|
|
389
|
+
} = request;
|
|
390
|
+
let resolved = fallback;
|
|
391
|
+
if (icon === null || isIconName(icon)) {
|
|
392
|
+
resolved = {
|
|
393
|
+
...resolved,
|
|
394
|
+
icon
|
|
395
|
+
};
|
|
396
|
+
} else if (icon !== undefined) {
|
|
397
|
+
warnMalformedRequest(slot, `requests the unknown icon ${JSON.stringify(icon)}`);
|
|
398
|
+
}
|
|
399
|
+
if (typeof variant === 'string' && theme?.iconVariants?.includes(variant)) {
|
|
400
|
+
resolved = {
|
|
401
|
+
...resolved,
|
|
402
|
+
variant
|
|
403
|
+
};
|
|
404
|
+
} else if (variant !== undefined) {
|
|
405
|
+
warnMalformedRequest(slot, `requests the variant ${JSON.stringify(variant)}, which the theme does not list`);
|
|
406
|
+
}
|
|
407
|
+
if (ICON_SIZES.has(size)) {
|
|
408
|
+
resolved = {
|
|
409
|
+
...resolved,
|
|
410
|
+
size: size
|
|
411
|
+
};
|
|
412
|
+
} else if (size !== undefined) {
|
|
413
|
+
warnMalformedRequest(slot, `requests the unsupported size ${JSON.stringify(size)}`);
|
|
414
|
+
}
|
|
415
|
+
return resolved;
|
|
416
|
+
}
|
|
417
|
+
|
|
418
|
+
/**
|
|
419
|
+
* Resolve a component's icon slot. The component passes its slot state and
|
|
420
|
+
* its own fallback; the active theme's `componentIcons[slot]` adjusts that
|
|
421
|
+
* fallback. A shared icon name replaces the fallback icon, `null` hides the
|
|
422
|
+
* icon, a request applies field by field, and a slot function receives the
|
|
423
|
+
* state and returns a request whose result is final: `null` hides the icon,
|
|
424
|
+
* `undefined` changes nothing.
|
|
425
|
+
*
|
|
426
|
+
* This is the only caller of a theme's slot functions. Caller-supplied icon
|
|
427
|
+
* content wins before resolution, so a component does not resolve the slot
|
|
428
|
+
* when its caller passed content.
|
|
429
|
+
* @internal
|
|
430
|
+
*/
|
|
431
|
+
export function resolveComponentIcon(slot, state, fallback, source) {
|
|
432
|
+
const own = fallback === null || typeof fallback === 'string' ? {
|
|
433
|
+
icon: fallback
|
|
434
|
+
} : fallback;
|
|
435
|
+
const theme = getTheme(source);
|
|
436
|
+
const value = getThemeComponentIcons(theme)?.[slot];
|
|
437
|
+
if (value === undefined) {
|
|
438
|
+
return own;
|
|
439
|
+
}
|
|
440
|
+
if (typeof value === 'function') {
|
|
441
|
+
const result = value(state);
|
|
442
|
+
if (typeof result === 'string') {
|
|
443
|
+
warnMalformedRequest(slot, `returned ${JSON.stringify(result)}, which is not a request`);
|
|
444
|
+
return own;
|
|
445
|
+
}
|
|
446
|
+
return applyComponentIconRequest(slot, own, result, theme);
|
|
447
|
+
}
|
|
448
|
+
if (typeof value === 'string') {
|
|
449
|
+
return applyComponentIconRequest(slot, own, {
|
|
450
|
+
icon: value
|
|
451
|
+
}, theme);
|
|
452
|
+
}
|
|
453
|
+
return applyComponentIconRequest(slot, own, value, theme);
|
|
454
|
+
}
|
|
455
|
+
|
|
322
456
|
/**
|
|
323
457
|
* Reset the global registry. For testing only.
|
|
324
458
|
* @internal
|