@cdx-ui/primitives 0.0.1-beta.114 → 0.0.1-beta.116
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/README.md +32 -30
- package/lib/commonjs/index.js +35 -0
- package/lib/commonjs/index.js.map +1 -1
- package/lib/commonjs/overlay/useAnchorPosition.js +60 -11
- package/lib/commonjs/overlay/useAnchorPosition.js.map +1 -1
- package/lib/commonjs/slider/SliderRail.js +131 -0
- package/lib/commonjs/slider/SliderRail.js.map +1 -0
- package/lib/commonjs/slider/SliderRoot.js +186 -0
- package/lib/commonjs/slider/SliderRoot.js.map +1 -0
- package/lib/commonjs/slider/SliderThumb.js +228 -0
- package/lib/commonjs/slider/SliderThumb.js.map +1 -0
- package/lib/commonjs/slider/context.js +11 -0
- package/lib/commonjs/slider/context.js.map +1 -0
- package/lib/commonjs/slider/index.js +65 -0
- package/lib/commonjs/slider/index.js.map +1 -0
- package/lib/commonjs/slider/types.js +6 -0
- package/lib/commonjs/slider/types.js.map +1 -0
- package/lib/commonjs/slider/useSliderPointer.js +116 -0
- package/lib/commonjs/slider/useSliderPointer.js.map +1 -0
- package/lib/commonjs/slider/utils.js +155 -0
- package/lib/commonjs/slider/utils.js.map +1 -0
- package/lib/commonjs/utils/assignRef.js +16 -0
- package/lib/commonjs/utils/assignRef.js.map +1 -0
- package/lib/commonjs/utils/createPortal.js +3 -1
- package/lib/commonjs/utils/createPortal.js.map +1 -1
- package/lib/module/index.js +4 -0
- package/lib/module/index.js.map +1 -1
- package/lib/module/overlay/useAnchorPosition.js +60 -11
- package/lib/module/overlay/useAnchorPosition.js.map +1 -1
- package/lib/module/slider/SliderRail.js +127 -0
- package/lib/module/slider/SliderRail.js.map +1 -0
- package/lib/module/slider/SliderRoot.js +182 -0
- package/lib/module/slider/SliderRoot.js.map +1 -0
- package/lib/module/slider/SliderThumb.js +224 -0
- package/lib/module/slider/SliderThumb.js.map +1 -0
- package/lib/module/slider/context.js +5 -0
- package/lib/module/slider/context.js.map +1 -0
- package/lib/module/slider/index.js +8 -0
- package/lib/module/slider/index.js.map +1 -0
- package/lib/module/slider/types.js +4 -0
- package/lib/module/slider/types.js.map +1 -0
- package/lib/module/slider/useSliderPointer.js +110 -0
- package/lib/module/slider/useSliderPointer.js.map +1 -0
- package/lib/module/slider/utils.js +138 -0
- package/lib/module/slider/utils.js.map +1 -0
- package/lib/module/utils/assignRef.js +12 -0
- package/lib/module/utils/assignRef.js.map +1 -0
- package/lib/module/utils/createPortal.js +3 -1
- package/lib/module/utils/createPortal.js.map +1 -1
- package/lib/typescript/index.d.ts +4 -0
- package/lib/typescript/index.d.ts.map +1 -1
- package/lib/typescript/overlay/useAnchorPosition.d.ts +7 -1
- package/lib/typescript/overlay/useAnchorPosition.d.ts.map +1 -1
- package/lib/typescript/slider/SliderRail.d.ts +6 -0
- package/lib/typescript/slider/SliderRail.d.ts.map +1 -0
- package/lib/typescript/slider/SliderRoot.d.ts +7 -0
- package/lib/typescript/slider/SliderRoot.d.ts.map +1 -0
- package/lib/typescript/slider/SliderThumb.d.ts +6 -0
- package/lib/typescript/slider/SliderThumb.d.ts.map +1 -0
- package/lib/typescript/slider/context.d.ts +37 -0
- package/lib/typescript/slider/context.d.ts.map +1 -0
- package/lib/typescript/slider/index.d.ts +8 -0
- package/lib/typescript/slider/index.d.ts.map +1 -0
- package/lib/typescript/slider/types.d.ts +37 -0
- package/lib/typescript/slider/types.d.ts.map +1 -0
- package/lib/typescript/slider/useSliderPointer.d.ts +23 -0
- package/lib/typescript/slider/useSliderPointer.d.ts.map +1 -0
- package/lib/typescript/slider/utils.d.ts +23 -0
- package/lib/typescript/slider/utils.d.ts.map +1 -0
- package/lib/typescript/utils/assignRef.d.ts +3 -0
- package/lib/typescript/utils/assignRef.d.ts.map +1 -0
- package/lib/typescript/utils/createPortal.d.ts.map +1 -1
- package/package.json +2 -2
- package/src/index.ts +4 -0
- package/src/overlay/useAnchorPosition.ts +79 -11
- package/src/slider/SliderRail.tsx +143 -0
- package/src/slider/SliderRoot.tsx +266 -0
- package/src/slider/SliderThumb.tsx +268 -0
- package/src/slider/context.tsx +38 -0
- package/src/slider/index.ts +19 -0
- package/src/slider/types.ts +44 -0
- package/src/slider/useSliderPointer.ts +157 -0
- package/src/slider/utils.ts +181 -0
- package/src/utils/assignRef.ts +11 -0
- package/src/utils/createPortal.ts +3 -1
package/README.md
CHANGED
|
@@ -21,39 +21,41 @@ pnpm add @cdx-ui/primitives
|
|
|
21
21
|
|
|
22
22
|
Concrete behavioral components with built-in interaction state tracking, accessibility (roles, ARIA props, keyboard handling), and context propagation. Each primitive owns behavior that the styled layer (`@cdx-ui/components`) cannot express with host elements alone.
|
|
23
23
|
|
|
24
|
-
| Export
|
|
25
|
-
|
|
|
26
|
-
| `AvatarRoot`
|
|
27
|
-
| `ButtonRoot`
|
|
28
|
-
| `CheckboxRoot`, `CheckboxGroup`
|
|
29
|
-
| `ChipRoot`
|
|
30
|
-
| `DialogRoot`, `DialogTrigger`, `DialogPopup`, `DialogClose`
|
|
31
|
-
| `FieldRoot`, `FieldLabel`
|
|
32
|
-
| `FormRoot`
|
|
33
|
-
| `InputRoot`, `InputField`
|
|
34
|
-
| `LinkRoot`
|
|
35
|
-
| `ListItemRoot`
|
|
36
|
-
| `useOtpInput`, `OtpInputField`
|
|
37
|
-
| `ProgressBarRoot`, `ProgressBarIndicator`
|
|
38
|
-
| `RadioRoot`, `RadioGroup`
|
|
39
|
-
| `SelectRoot`, `SelectTrigger`, `SelectContent`, `SelectItem`
|
|
40
|
-
| `useSwitch`
|
|
41
|
-
| `TileRoot`, `TileGroup`
|
|
24
|
+
| Export | Description |
|
|
25
|
+
| ------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
26
|
+
| `AvatarRoot` | Concrete root primitive (context provider for image load state; Image/Text/Icon/Badge live in `@cdx-ui/components`) |
|
|
27
|
+
| `ButtonRoot` | Concrete root primitive (no sub-slots — Label/Icon/Spinner/Group live in `@cdx-ui/components`) |
|
|
28
|
+
| `CheckboxRoot`, `CheckboxGroup` | Concrete checkbox primitives (Root owns controlled state + ARIA + `.web` split; Group owns group context. Indicator/Icon/Label live in `@cdx-ui/components`) |
|
|
29
|
+
| `ChipRoot` | Concrete root primitive (View/Pressable union with interaction state + context; Label/Icon/Avatar live in `@cdx-ui/components`) |
|
|
30
|
+
| `DialogRoot`, `DialogTrigger`, `DialogPortal`, `DialogOverlay`, `DialogContent`, `DialogPopup`, `DialogClose` | Concrete dialog primitives (Root owns open state + context; Trigger/Close use `Slot` for `asChild`; Portal mounts children into the shared `PortalHost`; Overlay is the dismiss backdrop; Content owns FocusScope + ARIA + Escape/back-button dismissal; `DialogPopup` is the legacy fused panel, kept for back-compat. Header/Title/Description/Content/Footer live in `@cdx-ui/components`) |
|
|
31
|
+
| `FieldRoot`, `FieldLabel` | Concrete field primitives (Root provides `FormControlContext`; Label is platform-split: `Text` + focus-bridge on native, `<label htmlFor>` on web; Helper/Error/ErrorIcon live in `@cdx-ui/components`) |
|
|
32
|
+
| `FormRoot` | Concrete form primitive (platform-split: `<form>` on web, `View` on native) |
|
|
33
|
+
| `InputRoot`, `InputField` | Concrete input primitives (Root owns input context; Field is platform-split: `.tsx`/`.web.tsx`/`.android.tsx`. Slot lives in `@cdx-ui/components`) |
|
|
34
|
+
| `LinkRoot` | Concrete link primitive (`useLink` press behavior + ARIA + cross-platform routing) |
|
|
35
|
+
| `ListItemRoot` | Concrete root primitive (View/Pressable union with bespoke `asChild` merging — interaction state + context; LeadingSlot/Content/Title/Description/Meta/TrailingSlot/SectionHeader live in `@cdx-ui/components`) |
|
|
36
|
+
| `useOtpInput`, `OtpInputField` | Headless hook for OTP state machine + concrete per-cell TextInput primitive (focus management, a11y, autofill; styled layer composes `Input`/`HStack` on top) |
|
|
37
|
+
| `ProgressBarRoot`, `ProgressBarIndicator` | Concrete progress primitives (Root owns percent context; Indicator maps percent to width) |
|
|
38
|
+
| `RadioRoot`, `RadioGroup` | Concrete radio primitives (Root owns interaction + checked state + `.web` split; Group owns selection contract + group context. Indicator/Label live in `@cdx-ui/components`) |
|
|
39
|
+
| `SelectRoot`, `SelectTrigger`, `SelectContent`, `SelectItem` | Concrete select primitives (Root owns controlled value/open state; Trigger is platform-split; Content owns FocusScope + keyboard nav; Item owns selection state. Value/Icon/ItemLabel live in `@cdx-ui/components`) |
|
|
40
|
+
| `useSwitch` | Headless hook for `Switch` (controlled state + ARIA + interaction tracking; styled layer renders the host element) |
|
|
41
|
+
| `TileRoot`, `TileGroup` | Concrete tile primitives (Root owns interaction + selection state + per-tile context; Group owns selection contract + group context. LeadingSlot/Content/Title/Description/Indicator/TrailingSlot live in `@cdx-ui/components`) |
|
|
42
42
|
|
|
43
43
|
### Utility exports
|
|
44
44
|
|
|
45
|
-
| Export | Description
|
|
46
|
-
| ------------------------ |
|
|
47
|
-
| `dataAttributes` | Builds `data-hover`, `data-active`, `data-focus-visible`, etc. from an `InteractionState` object.
|
|
48
|
-
| `mergeDataAttributes` | Combines multiple data-attribute sources into one spread (prevents overwrites on web).
|
|
49
|
-
| `domDataAttributes` | Web-specific variant that converts data attributes to DOM-compatible format.
|
|
50
|
-
| `mergeDomDataAttributes` | Web-specific merge variant for combining DOM data attribute sources.
|
|
51
|
-
| `Slot` | Primitives-layer `asChild` implementation — merges props/ref onto the consumer's child element.
|
|
52
|
-
| `FormControlContext` | Re-exported from `@cdx-ui/utils`; shared context for field/form control state.
|
|
53
|
-
| `useFormControlContext` | Re-exported from `@cdx-ui/utils`; reads `FormControlContext` in descendant components.
|
|
54
|
-
| `OverlayInsetsProvider` | Context provider for safe-area insets used by overlay/dialog positioning.
|
|
55
|
-
| `
|
|
56
|
-
| `
|
|
45
|
+
| Export | Description |
|
|
46
|
+
| ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
47
|
+
| `dataAttributes` | Builds `data-hover`, `data-active`, `data-focus-visible`, etc. from an `InteractionState` object. |
|
|
48
|
+
| `mergeDataAttributes` | Combines multiple data-attribute sources into one spread (prevents overwrites on web). |
|
|
49
|
+
| `domDataAttributes` | Web-specific variant that converts data attributes to DOM-compatible format. |
|
|
50
|
+
| `mergeDomDataAttributes` | Web-specific merge variant for combining DOM data attribute sources. |
|
|
51
|
+
| `Slot` | Primitives-layer `asChild` implementation — merges props/ref onto the consumer's child element. |
|
|
52
|
+
| `FormControlContext` | Re-exported from `@cdx-ui/utils`; shared context for field/form control state. |
|
|
53
|
+
| `useFormControlContext` | Re-exported from `@cdx-ui/utils`; reads `FormControlContext` in descendant components. |
|
|
54
|
+
| `OverlayInsetsProvider` | Context provider for safe-area insets used by overlay/dialog positioning. |
|
|
55
|
+
| `Portal`, `PortalHost` | Store-backed portal: `Portal` registers children into a named host; `PortalHost` renders them and must be mounted once near the app root (Forge UI's `ForgeDesignProvider` does this). Used by `Dialog`, `Toast`, etc. |
|
|
56
|
+
| `FullWindowOverlay` | iOS wrapper (over `react-native-screens`) that renders overlays in a separate window above native modals/keyboard; pass-through on Android/web. |
|
|
57
|
+
| `InteractionState` | Type: `{ hover, focus, active, disabled, focusVisible }`. |
|
|
58
|
+
| `EdgeInsets` | Type: `{ top, right, bottom, left }`. |
|
|
57
59
|
|
|
58
60
|
### OTP input utilities
|
|
59
61
|
|
package/lib/commonjs/index.js
CHANGED
|
@@ -5,12 +5,15 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
var _exportNames = {
|
|
7
7
|
OverlayInsetsProvider: true,
|
|
8
|
+
useAnchorPosition: true,
|
|
8
9
|
FormControlContext: true,
|
|
9
10
|
useFormControlContext: true,
|
|
10
11
|
dataAttributes: true,
|
|
11
12
|
mergeDataAttributes: true,
|
|
12
13
|
domDataAttributes: true,
|
|
13
14
|
mergeDomDataAttributes: true,
|
|
15
|
+
assignRef: true,
|
|
16
|
+
createPortalFn: true,
|
|
14
17
|
Slot: true
|
|
15
18
|
};
|
|
16
19
|
Object.defineProperty(exports, "FormControlContext", {
|
|
@@ -31,6 +34,18 @@ Object.defineProperty(exports, "Slot", {
|
|
|
31
34
|
return _slot.Slot;
|
|
32
35
|
}
|
|
33
36
|
});
|
|
37
|
+
Object.defineProperty(exports, "assignRef", {
|
|
38
|
+
enumerable: true,
|
|
39
|
+
get: function () {
|
|
40
|
+
return _assignRef.assignRef;
|
|
41
|
+
}
|
|
42
|
+
});
|
|
43
|
+
Object.defineProperty(exports, "createPortalFn", {
|
|
44
|
+
enumerable: true,
|
|
45
|
+
get: function () {
|
|
46
|
+
return _createPortal.createPortalFn;
|
|
47
|
+
}
|
|
48
|
+
});
|
|
34
49
|
Object.defineProperty(exports, "dataAttributes", {
|
|
35
50
|
enumerable: true,
|
|
36
51
|
get: function () {
|
|
@@ -55,6 +70,12 @@ Object.defineProperty(exports, "mergeDomDataAttributes", {
|
|
|
55
70
|
return _domDataAttributes.mergeDomDataAttributes;
|
|
56
71
|
}
|
|
57
72
|
});
|
|
73
|
+
Object.defineProperty(exports, "useAnchorPosition", {
|
|
74
|
+
enumerable: true,
|
|
75
|
+
get: function () {
|
|
76
|
+
return _overlay.useAnchorPosition;
|
|
77
|
+
}
|
|
78
|
+
});
|
|
58
79
|
Object.defineProperty(exports, "useFormControlContext", {
|
|
59
80
|
enumerable: true,
|
|
60
81
|
get: function () {
|
|
@@ -290,8 +311,22 @@ Object.keys(_radio).forEach(function (key) {
|
|
|
290
311
|
}
|
|
291
312
|
});
|
|
292
313
|
});
|
|
314
|
+
var _slider = require("./slider");
|
|
315
|
+
Object.keys(_slider).forEach(function (key) {
|
|
316
|
+
if (key === "default" || key === "__esModule") return;
|
|
317
|
+
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
318
|
+
if (key in exports && exports[key] === _slider[key]) return;
|
|
319
|
+
Object.defineProperty(exports, key, {
|
|
320
|
+
enumerable: true,
|
|
321
|
+
get: function () {
|
|
322
|
+
return _slider[key];
|
|
323
|
+
}
|
|
324
|
+
});
|
|
325
|
+
});
|
|
293
326
|
var _utils = require("@cdx-ui/utils");
|
|
294
327
|
var _dataAttributes = require("./utils/dataAttributes");
|
|
295
328
|
var _domDataAttributes = require("./utils/domDataAttributes");
|
|
329
|
+
var _assignRef = require("./utils/assignRef");
|
|
330
|
+
var _createPortal = require("./utils/createPortal");
|
|
296
331
|
var _slot = require("./slot");
|
|
297
332
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_avatar","require","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","_button","_chip","_checkbox","_dialog","_field","_form","_fullWindowOverlay","_input","_otpInput","_link","_listItem","_overlay","_select","_switch","_tile","_toast","_portal","_progressBar","_radio","_utils","_dataAttributes","_domDataAttributes","_slot"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":"
|
|
1
|
+
{"version":3,"names":["_avatar","require","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","_button","_chip","_checkbox","_dialog","_field","_form","_fullWindowOverlay","_input","_otpInput","_link","_listItem","_overlay","_select","_switch","_tile","_toast","_portal","_progressBar","_radio","_slider","_utils","_dataAttributes","_domDataAttributes","_assignRef","_createPortal","_slot"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":"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","ignoreList":[]}
|
|
@@ -16,29 +16,60 @@ function measureWeb(element) {
|
|
|
16
16
|
height: rect.height
|
|
17
17
|
};
|
|
18
18
|
}
|
|
19
|
-
|
|
19
|
+
function setLayoutIfChanged(setLayout, next) {
|
|
20
|
+
setLayout(prev => {
|
|
21
|
+
if (prev?.x === next.x && prev.y === next.y && prev.width === next.width && prev.height === next.height) {
|
|
22
|
+
return prev;
|
|
23
|
+
}
|
|
24
|
+
return next;
|
|
25
|
+
});
|
|
26
|
+
}
|
|
20
27
|
/**
|
|
21
28
|
* Measures an anchor element's position and size, re-measuring on scroll/resize
|
|
22
29
|
* (web) so a positioned overlay can track its anchor across layout changes.
|
|
23
30
|
*
|
|
24
31
|
* Returns `null` until the first measurement completes.
|
|
25
32
|
*/
|
|
26
|
-
function useAnchorPosition(anchorRef, open) {
|
|
33
|
+
function useAnchorPosition(anchorRef, open, options) {
|
|
34
|
+
const {
|
|
35
|
+
remeasureKey,
|
|
36
|
+
trackWhileOpen = false
|
|
37
|
+
} = options ?? {};
|
|
27
38
|
const [layout, setLayout] = (0, _react.useState)(null);
|
|
39
|
+
const measureAnchor = () => {
|
|
40
|
+
const anchor = anchorRef.current;
|
|
41
|
+
if (!anchor) {
|
|
42
|
+
return;
|
|
43
|
+
}
|
|
44
|
+
if (_reactNative.Platform.OS === 'web') {
|
|
45
|
+
setLayoutIfChanged(setLayout, measureWeb(anchor));
|
|
46
|
+
return;
|
|
47
|
+
}
|
|
48
|
+
anchor.measureInWindow((x, y, width, height) => {
|
|
49
|
+
setLayoutIfChanged(setLayout, {
|
|
50
|
+
x,
|
|
51
|
+
y,
|
|
52
|
+
width,
|
|
53
|
+
height
|
|
54
|
+
});
|
|
55
|
+
});
|
|
56
|
+
};
|
|
28
57
|
useIsomorphicLayoutEffect(() => {
|
|
29
58
|
if (!open) {
|
|
30
59
|
setLayout(null);
|
|
31
60
|
return;
|
|
32
61
|
}
|
|
33
|
-
const anchor = anchorRef.current;
|
|
34
|
-
if (!anchor) return;
|
|
35
62
|
let cancelled = false;
|
|
36
63
|
if (_reactNative.Platform.OS === 'web') {
|
|
37
|
-
|
|
64
|
+
measureAnchor();
|
|
38
65
|
} else {
|
|
66
|
+
const anchor = anchorRef.current;
|
|
67
|
+
if (!anchor) {
|
|
68
|
+
return;
|
|
69
|
+
}
|
|
39
70
|
anchor.measureInWindow((x, y, width, height) => {
|
|
40
71
|
if (!cancelled) {
|
|
41
|
-
setLayout
|
|
72
|
+
setLayoutIfChanged(setLayout, {
|
|
42
73
|
x,
|
|
43
74
|
y,
|
|
44
75
|
width,
|
|
@@ -50,19 +81,37 @@ function useAnchorPosition(anchorRef, open) {
|
|
|
50
81
|
return () => {
|
|
51
82
|
cancelled = true;
|
|
52
83
|
};
|
|
53
|
-
}, [open, anchorRef]);
|
|
84
|
+
}, [open, anchorRef, remeasureKey]);
|
|
54
85
|
(0, _react.useEffect)(() => {
|
|
55
|
-
if (!open ||
|
|
86
|
+
if (!open || !trackWhileOpen) {
|
|
87
|
+
return;
|
|
88
|
+
}
|
|
89
|
+
let frameId = 0;
|
|
90
|
+
const tick = () => {
|
|
91
|
+
measureAnchor();
|
|
92
|
+
frameId = requestAnimationFrame(tick);
|
|
93
|
+
};
|
|
94
|
+
frameId = requestAnimationFrame(tick);
|
|
95
|
+
return () => {
|
|
96
|
+
cancelAnimationFrame(frameId);
|
|
97
|
+
};
|
|
98
|
+
}, [open, anchorRef, remeasureKey, trackWhileOpen]);
|
|
99
|
+
(0, _react.useEffect)(() => {
|
|
100
|
+
if (!open || _reactNative.Platform.OS !== 'web' || trackWhileOpen) {
|
|
101
|
+
return;
|
|
102
|
+
}
|
|
56
103
|
const anchor = anchorRef.current;
|
|
57
|
-
if (!anchor)
|
|
58
|
-
|
|
104
|
+
if (!anchor) {
|
|
105
|
+
return;
|
|
106
|
+
}
|
|
107
|
+
const update = () => setLayoutIfChanged(setLayout, measureWeb(anchor));
|
|
59
108
|
window.addEventListener('scroll', update, true);
|
|
60
109
|
window.addEventListener('resize', update);
|
|
61
110
|
return () => {
|
|
62
111
|
window.removeEventListener('scroll', update, true);
|
|
63
112
|
window.removeEventListener('resize', update);
|
|
64
113
|
};
|
|
65
|
-
}, [open, anchorRef]);
|
|
114
|
+
}, [open, anchorRef, remeasureKey, trackWhileOpen]);
|
|
66
115
|
return layout;
|
|
67
116
|
}
|
|
68
117
|
//# sourceMappingURL=useAnchorPosition.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","require","_reactNative","useIsomorphicLayoutEffect","Platform","OS","useLayoutEffect","useEffect","measureWeb","element","rect","getBoundingClientRect","x","left","y","top","width","height","useAnchorPosition","anchorRef","open","
|
|
1
|
+
{"version":3,"names":["_react","require","_reactNative","useIsomorphicLayoutEffect","Platform","OS","useLayoutEffect","useEffect","measureWeb","element","rect","getBoundingClientRect","x","left","y","top","width","height","setLayoutIfChanged","setLayout","next","prev","useAnchorPosition","anchorRef","open","options","remeasureKey","trackWhileOpen","layout","useState","measureAnchor","anchor","current","measureInWindow","cancelled","frameId","tick","requestAnimationFrame","cancelAnimationFrame","update","window","addEventListener","removeEventListener"],"sourceRoot":"../../../src","sources":["overlay/useAnchorPosition.ts"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.SliderRail = void 0;
|
|
7
|
+
var _react = require("react");
|
|
8
|
+
var _reactNative = require("react-native");
|
|
9
|
+
var _slot = require("../slot");
|
|
10
|
+
var _assignRef = require("../utils/assignRef");
|
|
11
|
+
var _dataAttributes = require("../utils/dataAttributes");
|
|
12
|
+
var _context = require("./context");
|
|
13
|
+
var _useSliderPointer = require("./useSliderPointer");
|
|
14
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
15
|
+
const SliderRail = exports.SliderRail = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
16
|
+
asChild,
|
|
17
|
+
style,
|
|
18
|
+
onLayout,
|
|
19
|
+
children,
|
|
20
|
+
...props
|
|
21
|
+
}, ref) => {
|
|
22
|
+
const {
|
|
23
|
+
orientation,
|
|
24
|
+
isDisabled,
|
|
25
|
+
isDragging,
|
|
26
|
+
trackLayout,
|
|
27
|
+
thumbSize,
|
|
28
|
+
setValueFromRatio,
|
|
29
|
+
setTrackLayout,
|
|
30
|
+
setIsDragging
|
|
31
|
+
} = (0, _context.useSliderContext)();
|
|
32
|
+
const railRef = (0, _react.useRef)(null);
|
|
33
|
+
const measureRail = (0, _react.useCallback)(() => {
|
|
34
|
+
const node = railRef.current;
|
|
35
|
+
if (!node?.measureInWindow) {
|
|
36
|
+
return;
|
|
37
|
+
}
|
|
38
|
+
node.measureInWindow((x, y, width, height) => {
|
|
39
|
+
setTrackLayout({
|
|
40
|
+
x,
|
|
41
|
+
y,
|
|
42
|
+
width,
|
|
43
|
+
height
|
|
44
|
+
});
|
|
45
|
+
});
|
|
46
|
+
}, [setTrackLayout]);
|
|
47
|
+
const handleLayout = (0, _react.useCallback)(event => {
|
|
48
|
+
measureRail();
|
|
49
|
+
onLayout?.(event);
|
|
50
|
+
}, [measureRail, onLayout]);
|
|
51
|
+
const {
|
|
52
|
+
startDrag
|
|
53
|
+
} = (0, _useSliderPointer.useWebSliderDrag)({
|
|
54
|
+
isDisabled,
|
|
55
|
+
setIsDragging,
|
|
56
|
+
setValueFromRatio,
|
|
57
|
+
trackLayout,
|
|
58
|
+
orientation,
|
|
59
|
+
thumbSize
|
|
60
|
+
});
|
|
61
|
+
const updateFromEvent = (0, _react.useCallback)(event => {
|
|
62
|
+
if (isDisabled) {
|
|
63
|
+
return;
|
|
64
|
+
}
|
|
65
|
+
const {
|
|
66
|
+
x,
|
|
67
|
+
y
|
|
68
|
+
} = (0, _useSliderPointer.getPointerCoords)(event.nativeEvent);
|
|
69
|
+
setValueFromRatio((0, _useSliderPointer.getRatioFromPagePoint)(x, y, trackLayout, orientation, thumbSize), true);
|
|
70
|
+
}, [isDisabled, orientation, setValueFromRatio, thumbSize, trackLayout]);
|
|
71
|
+
const handlePress = (0, _react.useCallback)(event => {
|
|
72
|
+
updateFromEvent(event);
|
|
73
|
+
}, [updateFromEvent]);
|
|
74
|
+
const handlePointerDown = (0, _react.useCallback)(event => {
|
|
75
|
+
if (_reactNative.Platform.OS !== 'web' || isDisabled) {
|
|
76
|
+
return;
|
|
77
|
+
}
|
|
78
|
+
event.preventDefault();
|
|
79
|
+
const node = railRef.current;
|
|
80
|
+
if (!node) return;
|
|
81
|
+
const rect = node.getBoundingClientRect();
|
|
82
|
+
const freshLayout = {
|
|
83
|
+
x: rect.left,
|
|
84
|
+
y: rect.top,
|
|
85
|
+
width: rect.width,
|
|
86
|
+
height: rect.height
|
|
87
|
+
};
|
|
88
|
+
setTrackLayout(freshLayout);
|
|
89
|
+
const {
|
|
90
|
+
x,
|
|
91
|
+
y
|
|
92
|
+
} = (0, _useSliderPointer.getPointerCoords)(event.nativeEvent);
|
|
93
|
+
startDrag(x, y, undefined, freshLayout);
|
|
94
|
+
}, [isDisabled, setTrackLayout, startDrag]);
|
|
95
|
+
const Comp = asChild ? _slot.Slot : _reactNative.View;
|
|
96
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
|
|
97
|
+
accessibilityRole: "none",
|
|
98
|
+
accessible: false,
|
|
99
|
+
disabled: isDisabled,
|
|
100
|
+
onPress: _reactNative.Platform.OS === 'web' ? undefined : handlePress,
|
|
101
|
+
onPointerDown: _reactNative.Platform.OS === 'web' ? handlePointerDown : undefined,
|
|
102
|
+
accessibilityElementsHidden: true,
|
|
103
|
+
importantForAccessibility: "no-hide-descendants",
|
|
104
|
+
"aria-hidden": true,
|
|
105
|
+
tabIndex: -1,
|
|
106
|
+
style: styles.railHitArea,
|
|
107
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, {
|
|
108
|
+
ref: node => {
|
|
109
|
+
railRef.current = node;
|
|
110
|
+
(0, _assignRef.assignRef)(ref, node);
|
|
111
|
+
},
|
|
112
|
+
...props,
|
|
113
|
+
onLayout: handleLayout,
|
|
114
|
+
style: style,
|
|
115
|
+
...(0, _dataAttributes.dataAttributes)({
|
|
116
|
+
slot: 'slider-rail',
|
|
117
|
+
dragging: isDragging
|
|
118
|
+
}),
|
|
119
|
+
children: children
|
|
120
|
+
})
|
|
121
|
+
});
|
|
122
|
+
});
|
|
123
|
+
SliderRail.displayName = 'SliderRail';
|
|
124
|
+
const styles = _reactNative.StyleSheet.create({
|
|
125
|
+
railHitArea: {
|
|
126
|
+
..._reactNative.StyleSheet.absoluteFillObject,
|
|
127
|
+
justifyContent: 'center',
|
|
128
|
+
alignItems: 'center'
|
|
129
|
+
}
|
|
130
|
+
});
|
|
131
|
+
//# sourceMappingURL=SliderRail.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["_react","require","_reactNative","_slot","_assignRef","_dataAttributes","_context","_useSliderPointer","_jsxRuntime","SliderRail","exports","forwardRef","asChild","style","onLayout","children","props","ref","orientation","isDisabled","isDragging","trackLayout","thumbSize","setValueFromRatio","setTrackLayout","setIsDragging","useSliderContext","railRef","useRef","measureRail","useCallback","node","current","measureInWindow","x","y","width","height","handleLayout","event","startDrag","useWebSliderDrag","updateFromEvent","getPointerCoords","nativeEvent","getRatioFromPagePoint","handlePress","handlePointerDown","Platform","OS","preventDefault","rect","getBoundingClientRect","freshLayout","left","top","undefined","Comp","Slot","View","jsx","Pressable","accessibilityRole","accessible","disabled","onPress","onPointerDown","accessibilityElementsHidden","importantForAccessibility","tabIndex","styles","railHitArea","assignRef","dataAttributes","slot","dragging","displayName","StyleSheet","create","absoluteFillObject","justifyContent","alignItems"],"sourceRoot":"../../../src","sources":["slider/SliderRail.tsx"],"mappings":"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","ignoreList":[]}
|