@dreamtree-org/twreact-ui 1.3.10 → 1.3.11
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 +30 -0
- package/ai-skills/dreamtree-ui.md +12 -7
- package/dist/ai-schema.json +137 -21
- package/dist/charts/index.js +195 -66
- package/dist/components/charts/CartesianChart.d.ts.map +1 -1
- package/dist/components/charts/ChartFrame.d.ts.map +1 -1
- package/dist/components/charts/useChartLayout.d.ts +25 -0
- package/dist/components/charts/useChartLayout.d.ts.map +1 -0
- package/dist/components/core/Button.d.ts.map +1 -1
- package/dist/components/core/Checkbox.d.ts.map +1 -1
- package/dist/components/core/ColorPicker.d.ts.map +1 -1
- package/dist/components/core/Input.d.ts.map +1 -1
- package/dist/components/core/Loader.d.ts.map +1 -1
- package/dist/components/core/LocationPicker.d.ts.map +1 -1
- package/dist/components/core/ProgressBar.d.ts.map +1 -1
- package/dist/components/core/Radio.d.ts.map +1 -1
- package/dist/components/core/Rate.d.ts.map +1 -1
- package/dist/components/core/RoundedTag.d.ts.map +1 -1
- package/dist/components/core/Skeleton.d.ts.map +1 -1
- package/dist/components/core/Slider.d.ts.map +1 -1
- package/dist/components/core/SpeechToText.d.ts.map +1 -1
- package/dist/components/core/Switch.d.ts.map +1 -1
- package/dist/components/core/Tabs.d.ts +2 -5
- package/dist/components/core/Tabs.d.ts.map +1 -1
- package/dist/components/core/Textarea.d.ts.map +1 -1
- package/dist/components/navigation/Breadcrumbs.d.ts.map +1 -1
- package/dist/components/navigation/FootNav.d.ts.map +1 -1
- package/dist/components/utility/Avatar.d.ts +8 -0
- package/dist/components/utility/Avatar.d.ts.map +1 -1
- package/dist/components/utility/AvatarGroup.d.ts +4 -0
- package/dist/components/utility/AvatarGroup.d.ts.map +1 -0
- package/dist/components/utility/Badge.d.ts.map +1 -1
- package/dist/components/utility/Card.d.ts.map +1 -1
- package/dist/components/utility/Carousel.d.ts.map +1 -1
- package/dist/components/utility/FileUpload.d.ts.map +1 -1
- package/dist/components/utility/Pagination.d.ts.map +1 -1
- package/dist/components/utility/Sortable.d.ts.map +1 -1
- package/dist/components/utility/Stepper.d.ts.map +1 -1
- package/dist/esm/components/blocks/EmptyState.js +1 -1
- package/dist/esm/components/blocks/ErrorState.js +1 -1
- package/dist/esm/components/blocks/LoadingState.js +4 -4
- package/dist/esm/components/blocks/StatCard.js +6 -6
- package/dist/esm/components/blocks/StatusPill.js +5 -8
- package/dist/esm/components/charts/CartesianChart.js +85 -62
- package/dist/esm/components/charts/ChartFrame.js +12 -5
- package/dist/esm/components/charts/useChartLayout.js +105 -0
- package/dist/esm/components/core/Button.js +49 -25
- package/dist/esm/components/core/Checkbox.js +71 -45
- package/dist/esm/components/core/ColorPicker.js +31 -42
- package/dist/esm/components/core/Input.js +89 -22
- package/dist/esm/components/core/Loader.js +30 -44
- package/dist/esm/components/core/LocationPicker.js +82 -16
- package/dist/esm/components/core/ProgressBar.js +8 -12
- package/dist/esm/components/core/Radio.js +10 -12
- package/dist/esm/components/core/Rate.js +72 -4
- package/dist/esm/components/core/RoundedTag.js +5 -5
- package/dist/esm/components/core/Skeleton.js +13 -14
- package/dist/esm/components/core/Slider.js +24 -6
- package/dist/esm/components/core/SpeechToText.js +68 -16
- package/dist/esm/components/core/Switch.js +88 -16
- package/dist/esm/components/core/Tabs.js +180 -33
- package/dist/esm/components/core/Textarea.js +10 -2
- package/dist/esm/components/navigation/Breadcrumbs.js +97 -35
- package/dist/esm/components/navigation/FootNav.js +102 -13
- package/dist/esm/components/utility/Avatar.js +14 -12
- package/dist/esm/components/utility/AvatarGroup.js +56 -0
- package/dist/esm/components/utility/Badge.js +43 -23
- package/dist/esm/components/utility/Card.js +32 -8
- package/dist/esm/components/utility/Carousel.js +139 -29
- package/dist/esm/components/utility/FileUpload.js +106 -31
- package/dist/esm/components/utility/Pagination.js +31 -13
- package/dist/esm/components/utility/Sortable.js +6 -2
- package/dist/esm/components/utility/Stepper.js +110 -47
- package/dist/esm/hooks/useSliderValues.js +8 -2
- package/dist/esm/hooks/useSortable.js +107 -5
- package/dist/esm/index.js +1 -0
- package/dist/esm/utils/touchTarget.js +4 -1
- package/dist/hooks/useSliderValues.d.ts +6 -2
- package/dist/hooks/useSliderValues.d.ts.map +1 -1
- package/dist/hooks/useSortable.d.ts +11 -1
- package/dist/hooks/useSortable.d.ts.map +1 -1
- package/dist/index.css +1 -1
- package/dist/index.d.ts +3 -2
- package/dist/index.esm.css +1 -1
- package/dist/index.esm.js +2341 -1191
- package/dist/index.js +2341 -1190
- package/dist/types/charts.d.ts +3 -1
- package/dist/types/charts.d.ts.map +1 -1
- package/dist/types/index.d.ts +56 -7
- package/dist/types/index.d.ts.map +1 -1
- package/doc/README.md +1 -0
- package/mcp/catalog.snapshot.json +279 -80
- package/package.json +1 -1
|
@@ -3,18 +3,75 @@ import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _
|
|
|
3
3
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
4
4
|
import React from 'react';
|
|
5
5
|
import { cn } from '../../utils/cn.js';
|
|
6
|
+
import { TOUCH_TARGET } from '../../utils/touchTarget.js';
|
|
6
7
|
import { Check } from 'lucide-react';
|
|
7
8
|
|
|
8
9
|
var _excluded = ["steps", "currentStep", "orientation", "variant", "onStepClick", "className"];
|
|
10
|
+
// Layout classes per orientation. "auto" stacks vertically below `sm` and lays
|
|
11
|
+
// out horizontally from `sm` up. Every class is written out literally so
|
|
12
|
+
// Tailwind's content scan picks it up.
|
|
13
|
+
var LAYOUT = {
|
|
14
|
+
horizontal: {
|
|
15
|
+
nav: 'flex-row',
|
|
16
|
+
step: 'flex-col flex-1 min-w-0',
|
|
17
|
+
lastStep: 'flex-none',
|
|
18
|
+
track: 'flex-row items-center',
|
|
19
|
+
// Connectors flex to fill the gap between circles, so steps never overflow.
|
|
20
|
+
line: 'h-0.5 flex-1 min-w-4 mx-2',
|
|
21
|
+
content: 'mt-2 pr-2',
|
|
22
|
+
contentGap: ''
|
|
23
|
+
},
|
|
24
|
+
vertical: {
|
|
25
|
+
nav: 'flex-col',
|
|
26
|
+
step: 'flex-row gap-4',
|
|
27
|
+
lastStep: '',
|
|
28
|
+
track: 'flex-col items-center',
|
|
29
|
+
line: 'w-0.5 flex-1 min-h-8 my-1',
|
|
30
|
+
content: 'pt-1',
|
|
31
|
+
contentGap: 'pb-8'
|
|
32
|
+
},
|
|
33
|
+
auto: {
|
|
34
|
+
nav: 'flex-col sm:flex-row',
|
|
35
|
+
step: 'flex-row gap-4 sm:flex-col sm:gap-0 sm:flex-1 sm:min-w-0',
|
|
36
|
+
lastStep: 'sm:flex-none',
|
|
37
|
+
track: 'flex-col items-center sm:flex-row',
|
|
38
|
+
line: 'w-0.5 flex-1 min-h-8 my-1 sm:h-0.5 sm:w-auto sm:min-h-0 sm:min-w-4 sm:my-0 sm:mx-2',
|
|
39
|
+
content: 'pt-1 sm:pt-0 sm:mt-2 sm:pr-2',
|
|
40
|
+
contentGap: 'pb-8 sm:pb-0'
|
|
41
|
+
}
|
|
42
|
+
};
|
|
43
|
+
var FOCUS_RING = 'outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-gray-900';
|
|
44
|
+
var statusColors = {
|
|
45
|
+
completed: {
|
|
46
|
+
circle: 'bg-primary-600 text-white',
|
|
47
|
+
line: 'bg-primary-600',
|
|
48
|
+
text: 'text-primary-600 dark:text-primary-400',
|
|
49
|
+
dot: 'w-2 bg-primary-600'
|
|
50
|
+
},
|
|
51
|
+
current: {
|
|
52
|
+
circle: 'bg-primary-600 text-white',
|
|
53
|
+
line: 'bg-gray-300 dark:bg-gray-700',
|
|
54
|
+
text: 'text-primary-600 dark:text-primary-400',
|
|
55
|
+
// The current dot stretches into a pill.
|
|
56
|
+
dot: 'w-6 bg-primary-600'
|
|
57
|
+
},
|
|
58
|
+
upcoming: {
|
|
59
|
+
circle: 'bg-gray-300 text-gray-700 dark:bg-gray-700 dark:text-gray-200',
|
|
60
|
+
line: 'bg-gray-300 dark:bg-gray-700',
|
|
61
|
+
text: 'text-muted',
|
|
62
|
+
dot: 'w-2 bg-gray-300 dark:bg-gray-600'
|
|
63
|
+
}
|
|
64
|
+
};
|
|
9
65
|
var Stepper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
10
66
|
var _ref$steps = _ref.steps,
|
|
11
67
|
steps = _ref$steps === void 0 ? [] : _ref$steps,
|
|
12
68
|
_ref$currentStep = _ref.currentStep,
|
|
13
69
|
currentStep = _ref$currentStep === void 0 ? 0 : _ref$currentStep,
|
|
14
70
|
_ref$orientation = _ref.orientation,
|
|
15
|
-
orientation = _ref$orientation === void 0 ? 'horizontal' : _ref$orientation
|
|
16
|
-
_ref.variant
|
|
17
|
-
|
|
71
|
+
orientation = _ref$orientation === void 0 ? 'horizontal' : _ref$orientation,
|
|
72
|
+
_ref$variant = _ref.variant,
|
|
73
|
+
variant = _ref$variant === void 0 ? 'default' : _ref$variant,
|
|
74
|
+
onStepClick = _ref.onStepClick,
|
|
18
75
|
className = _ref.className,
|
|
19
76
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
20
77
|
var getStepStatus = function getStepStatus(stepIndex) {
|
|
@@ -22,73 +79,79 @@ var Stepper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
22
79
|
if (stepIndex === currentStep) return 'current';
|
|
23
80
|
return 'upcoming';
|
|
24
81
|
};
|
|
25
|
-
var
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
current: {
|
|
32
|
-
circle: 'bg-primary-600 text-white',
|
|
33
|
-
line: 'bg-gray-300',
|
|
34
|
-
text: 'text-primary-600'
|
|
35
|
-
},
|
|
36
|
-
upcoming: {
|
|
37
|
-
circle: 'bg-gray-300 text-gray-700',
|
|
38
|
-
line: 'bg-gray-300',
|
|
39
|
-
text: 'text-muted'
|
|
40
|
-
}
|
|
82
|
+
var stepLabel = function stepLabel(step, stepIndex, status) {
|
|
83
|
+
var _step$title;
|
|
84
|
+
// `label` is accepted as an alias for `title` (the docs used `label`).
|
|
85
|
+
var stepTitle = (_step$title = step.title) !== null && _step$title !== void 0 ? _step$title : step.label;
|
|
86
|
+
// A completed step shows only a check icon, so the button needs a name.
|
|
87
|
+
return "Step ".concat(stepIndex + 1).concat(stepTitle ? ": ".concat(stepTitle) : '').concat(status === 'completed' ? ' (completed)' : '');
|
|
41
88
|
};
|
|
89
|
+
var isClickable = function isClickable(stepIndex) {
|
|
90
|
+
return Boolean(onStepClick) && stepIndex <= currentStep;
|
|
91
|
+
};
|
|
92
|
+
// Compact progress dots: no titles, just one dot per step (current = pill).
|
|
93
|
+
if (variant === 'dots') {
|
|
94
|
+
return jsx("nav", _objectSpread2(_objectSpread2({
|
|
95
|
+
ref: ref,
|
|
96
|
+
className: cn('flex flex-row items-center gap-1', className),
|
|
97
|
+
"aria-label": "Progress",
|
|
98
|
+
"data-variant": "dots"
|
|
99
|
+
}, props), {}, {
|
|
100
|
+
children: steps.map(function (step, stepIndex) {
|
|
101
|
+
var status = getStepStatus(stepIndex);
|
|
102
|
+
return jsx("button", {
|
|
103
|
+
type: "button",
|
|
104
|
+
className: cn('inline-flex items-center justify-center rounded-full p-1', FOCUS_RING, isClickable(stepIndex) ? cn('cursor-pointer', TOUCH_TARGET) : 'cursor-default'),
|
|
105
|
+
onClick: function onClick() {
|
|
106
|
+
return onStepClick === null || onStepClick === void 0 ? void 0 : onStepClick(step, stepIndex);
|
|
107
|
+
},
|
|
108
|
+
disabled: !isClickable(stepIndex),
|
|
109
|
+
"aria-current": status === 'current' ? 'step' : undefined,
|
|
110
|
+
"aria-label": stepLabel(step, stepIndex, status),
|
|
111
|
+
children: jsx("span", {
|
|
112
|
+
"aria-hidden": "true",
|
|
113
|
+
className: cn('block h-2 rounded-full transition-[width,background-color] duration-base ease-standard motion-reduce:transition-none', statusColors[status].dot)
|
|
114
|
+
})
|
|
115
|
+
}, step.id || stepIndex);
|
|
116
|
+
})
|
|
117
|
+
}));
|
|
118
|
+
}
|
|
119
|
+
var layout = LAYOUT[orientation] || LAYOUT.horizontal;
|
|
42
120
|
return jsx("nav", _objectSpread2(_objectSpread2({
|
|
43
121
|
ref: ref,
|
|
44
|
-
className: cn('flex',
|
|
45
|
-
'flex-col': orientation === 'vertical',
|
|
46
|
-
'flex-row': orientation === 'horizontal'
|
|
47
|
-
}, className),
|
|
122
|
+
className: cn('flex', layout.nav, className),
|
|
48
123
|
"aria-label": "Progress"
|
|
49
124
|
}, props), {}, {
|
|
50
125
|
children: steps.map(function (step, stepIndex) {
|
|
51
|
-
var _step$
|
|
126
|
+
var _step$title2;
|
|
52
127
|
var status = getStepStatus(stepIndex);
|
|
53
128
|
var isLast = stepIndex === steps.length - 1;
|
|
54
129
|
var colors = statusColors[status];
|
|
55
|
-
|
|
56
|
-
var stepTitle = (_step$title = step.title) !== null && _step$title !== void 0 ? _step$title : step.label;
|
|
130
|
+
var stepTitle = (_step$title2 = step.title) !== null && _step$title2 !== void 0 ? _step$title2 : step.label;
|
|
57
131
|
return jsxs("div", {
|
|
58
|
-
className: cn('flex
|
|
59
|
-
'flex-col': orientation === 'horizontal',
|
|
60
|
-
'flex-row': orientation === 'vertical',
|
|
61
|
-
'mb-8': orientation === 'vertical' && !isLast,
|
|
62
|
-
'mr-8': orientation === 'horizontal' && !isLast
|
|
63
|
-
}),
|
|
132
|
+
className: cn('flex', layout.step, isLast && layout.lastStep),
|
|
64
133
|
children: [jsxs("div", {
|
|
65
|
-
className:
|
|
134
|
+
className: cn('flex', layout.track),
|
|
66
135
|
children: [jsx("button", {
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
'cursor-default': !onStepClick || stepIndex > currentStep
|
|
70
|
-
}),
|
|
136
|
+
type: "button",
|
|
137
|
+
className: cn('flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-sm font-medium transition-colors duration-fast motion-reduce:transition-none', FOCUS_RING, colors.circle, isClickable(stepIndex) ? cn('cursor-pointer', TOUCH_TARGET) : 'cursor-default'),
|
|
71
138
|
onClick: function onClick() {
|
|
72
139
|
return onStepClick === null || onStepClick === void 0 ? void 0 : onStepClick(step, stepIndex);
|
|
73
140
|
},
|
|
74
|
-
disabled: !
|
|
141
|
+
disabled: !isClickable(stepIndex),
|
|
75
142
|
"aria-current": status === 'current' ? 'step' : undefined,
|
|
76
|
-
"aria-label":
|
|
143
|
+
"aria-label": stepLabel(step, stepIndex, status),
|
|
77
144
|
children: status === 'completed' ? jsx(Check, {
|
|
78
145
|
className: "h-4 w-4",
|
|
79
146
|
"aria-hidden": "true"
|
|
80
147
|
}) : stepIndex + 1
|
|
81
148
|
}), !isLast && jsx("div", {
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
})
|
|
149
|
+
"aria-hidden": "true",
|
|
150
|
+
"data-stepper-connector": "",
|
|
151
|
+
className: cn('transition-colors duration-base motion-reduce:transition-none', layout.line, colors.line)
|
|
86
152
|
})]
|
|
87
153
|
}), jsxs("div", {
|
|
88
|
-
className: cn('flex flex-col',
|
|
89
|
-
'ml-4': orientation === 'vertical',
|
|
90
|
-
'mt-2': orientation === 'horizontal'
|
|
91
|
-
}),
|
|
154
|
+
className: cn('flex min-w-0 flex-col', layout.content, !isLast && layout.contentGap),
|
|
92
155
|
children: [jsx("span", {
|
|
93
156
|
className: cn('text-sm font-medium', colors.text),
|
|
94
157
|
children: stepTitle
|
|
@@ -91,13 +91,17 @@ function useSliderValues(_ref3) {
|
|
|
91
91
|
setThumb: setThumb
|
|
92
92
|
};
|
|
93
93
|
}
|
|
94
|
-
/**
|
|
94
|
+
/**
|
|
95
|
+
* Pointer drag on the track: picks the nearest thumb and follows the pointer.
|
|
96
|
+
* `onActiveChange(index | null)` reports which thumb is being dragged.
|
|
97
|
+
*/
|
|
95
98
|
function useSliderPointer(_ref4) {
|
|
96
99
|
var trackRef = _ref4.trackRef,
|
|
97
100
|
values = _ref4.values,
|
|
98
101
|
setThumb = _ref4.setThumb,
|
|
99
102
|
bounds = _ref4.bounds,
|
|
100
|
-
disabled = _ref4.disabled
|
|
103
|
+
disabled = _ref4.disabled,
|
|
104
|
+
onActiveChange = _ref4.onActiveChange;
|
|
101
105
|
var active = useRef(null);
|
|
102
106
|
var toValue = function toValue(clientX) {
|
|
103
107
|
var rect = trackRef.current.getBoundingClientRect();
|
|
@@ -112,6 +116,7 @@ function useSliderPointer(_ref4) {
|
|
|
112
116
|
return Math.abs(v - raw) < Math.abs(values[best] - raw) || v === values[best] && raw > v ? i : best;
|
|
113
117
|
}, 0);
|
|
114
118
|
active.current = nearest;
|
|
119
|
+
onActiveChange === null || onActiveChange === void 0 || onActiveChange(nearest);
|
|
115
120
|
(_e$currentTarget$setP = (_e$currentTarget = e.currentTarget).setPointerCapture) === null || _e$currentTarget$setP === void 0 || _e$currentTarget$setP.call(_e$currentTarget, e.pointerId);
|
|
116
121
|
setThumb(nearest, raw);
|
|
117
122
|
(_e$currentTarget$quer = e.currentTarget.querySelectorAll('[role="slider"]')[nearest]) === null || _e$currentTarget$quer === void 0 || _e$currentTarget$quer.focus();
|
|
@@ -123,6 +128,7 @@ function useSliderPointer(_ref4) {
|
|
|
123
128
|
if (active.current === null) return;
|
|
124
129
|
setThumb(active.current, toValue(e.clientX), true);
|
|
125
130
|
active.current = null;
|
|
131
|
+
onActiveChange === null || onActiveChange === void 0 || onActiveChange(null);
|
|
126
132
|
};
|
|
127
133
|
return {
|
|
128
134
|
onPointerDown: onPointerDown,
|
|
@@ -91,7 +91,45 @@ function useSortableKeyboard(_ref) {
|
|
|
91
91
|
cancel: cancel
|
|
92
92
|
};
|
|
93
93
|
}
|
|
94
|
+
// Mouse / pen: a drag starts once the pointer has moved this far, so clicks inside
|
|
95
|
+
// items still work.
|
|
94
96
|
var DRAG_THRESHOLD = 4;
|
|
97
|
+
// Touch: a drag starts after holding still this long, so a swipe over the list
|
|
98
|
+
// still scrolls the page. Moving further than LONG_PRESS_TOLERANCE first cancels it.
|
|
99
|
+
var LONG_PRESS_DELAY = 250;
|
|
100
|
+
var LONG_PRESS_TOLERANCE = 8;
|
|
101
|
+
// While dragging within this many px of a scroll container's (or the viewport's)
|
|
102
|
+
// edge, the container scrolls; speed grows toward the edge up to AUTO_SCROLL_MAX px/frame.
|
|
103
|
+
var AUTO_SCROLL_EDGE = 40;
|
|
104
|
+
var AUTO_SCROLL_MAX = 16;
|
|
105
|
+
var isScrollable = function isScrollable(el, axis) {
|
|
106
|
+
var style = window.getComputedStyle(el);
|
|
107
|
+
var overflow = axis === "horizontal" ? style.overflowX : style.overflowY;
|
|
108
|
+
if (!/(auto|scroll|overlay)/.test(overflow)) return false;
|
|
109
|
+
return axis === "horizontal" ? el.scrollWidth > el.clientWidth : el.scrollHeight > el.clientHeight;
|
|
110
|
+
};
|
|
111
|
+
/** Nearest scrollable ancestor along `axis`, or `null` for the window. */
|
|
112
|
+
function getScrollParent(node, axis) {
|
|
113
|
+
var el = node === null || node === void 0 ? void 0 : node.parentElement;
|
|
114
|
+
while (el && el !== document.body && el !== document.documentElement) {
|
|
115
|
+
if (isScrollable(el, axis)) return el;
|
|
116
|
+
el = el.parentElement;
|
|
117
|
+
}
|
|
118
|
+
return null;
|
|
119
|
+
}
|
|
120
|
+
/** Scroll speed (px/frame, signed) for a coordinate near the [start, end] edges. */
|
|
121
|
+
function edgeSpeed(pos, start, end) {
|
|
122
|
+
var edge = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : AUTO_SCROLL_EDGE;
|
|
123
|
+
if (pos < start + edge) return -Math.ceil(AUTO_SCROLL_MAX * Math.min(1, (start + edge - pos) / edge));
|
|
124
|
+
if (pos > end - edge) return Math.ceil(AUTO_SCROLL_MAX * Math.min(1, (pos - (end - edge)) / edge));
|
|
125
|
+
return 0;
|
|
126
|
+
}
|
|
127
|
+
var raf = function raf(cb) {
|
|
128
|
+
return typeof window.requestAnimationFrame === "function" ? window.requestAnimationFrame(cb) : setTimeout(cb, 16);
|
|
129
|
+
};
|
|
130
|
+
var caf = function caf(id) {
|
|
131
|
+
return typeof window.cancelAnimationFrame === "function" ? window.cancelAnimationFrame(id) : clearTimeout(id);
|
|
132
|
+
};
|
|
95
133
|
function useSortablePointer(_ref2) {
|
|
96
134
|
var keys = _ref2.keys,
|
|
97
135
|
setDraft = _ref2.setDraft,
|
|
@@ -134,7 +172,12 @@ function useSortablePointer(_ref2) {
|
|
|
134
172
|
});
|
|
135
173
|
return index === -1 ? others.length : index;
|
|
136
174
|
};
|
|
175
|
+
// `longPress`: on touch, wait LONG_PRESS_DELAY before picking the item up (used
|
|
176
|
+
// when the whole item is the drag source, so the list still scrolls on swipe).
|
|
137
177
|
var startFor = function startFor(key) {
|
|
178
|
+
var _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
|
|
179
|
+
_ref3$longPress = _ref3.longPress,
|
|
180
|
+
longPress = _ref3$longPress === void 0 ? false : _ref3$longPress;
|
|
138
181
|
return function (e) {
|
|
139
182
|
if (disabled || e.button > 0) return;
|
|
140
183
|
var start = {
|
|
@@ -142,18 +185,59 @@ function useSortablePointer(_ref2) {
|
|
|
142
185
|
y: e.clientY
|
|
143
186
|
};
|
|
144
187
|
var from = latest.current.keys.indexOf(key);
|
|
188
|
+
var waitForPress = longPress && e.pointerType === "touch";
|
|
145
189
|
var active = false;
|
|
190
|
+
var point = start;
|
|
191
|
+
var pressTimer = null;
|
|
192
|
+
var frame = null;
|
|
193
|
+
var scrollTarget = function scrollTarget() {
|
|
194
|
+
return getScrollParent(latest.current.nodeFor(key), latest.current.orientation);
|
|
195
|
+
};
|
|
196
|
+
var _autoScroll = function autoScroll() {
|
|
197
|
+
frame = null;
|
|
198
|
+
if (!active) return;
|
|
199
|
+
var axis = latest.current.orientation;
|
|
200
|
+
var container = scrollTarget();
|
|
201
|
+
var rect = container ? container.getBoundingClientRect() : {
|
|
202
|
+
top: 0,
|
|
203
|
+
left: 0,
|
|
204
|
+
bottom: window.innerHeight,
|
|
205
|
+
right: window.innerWidth
|
|
206
|
+
};
|
|
207
|
+
var speed = axis === "horizontal" ? edgeSpeed(point.x, rect.left, rect.right) : edgeSpeed(point.y, rect.top, rect.bottom);
|
|
208
|
+
if (!speed) return;
|
|
209
|
+
var dx = axis === "horizontal" ? speed : 0;
|
|
210
|
+
var dy = axis === "horizontal" ? 0 : speed;
|
|
211
|
+
if (container) {
|
|
212
|
+
container.scrollLeft += dx;
|
|
213
|
+
container.scrollTop += dy;
|
|
214
|
+
} else if (typeof window.scrollBy === "function") {
|
|
215
|
+
window.scrollBy(dx, dy);
|
|
216
|
+
}
|
|
217
|
+
setDraft(moveKey(latest.current.keys, key, targetIndex(point, key)));
|
|
218
|
+
frame = raf(_autoScroll);
|
|
219
|
+
};
|
|
220
|
+
var activate = function activate() {
|
|
221
|
+
active = true;
|
|
222
|
+
setDragging(key);
|
|
223
|
+
};
|
|
146
224
|
var onMove = function onMove(ev) {
|
|
147
|
-
|
|
225
|
+
point = {
|
|
148
226
|
x: ev.clientX,
|
|
149
227
|
y: ev.clientY
|
|
150
228
|
};
|
|
151
|
-
|
|
229
|
+
var distance = Math.hypot(point.x - start.x, point.y - start.y);
|
|
152
230
|
if (!active) {
|
|
153
|
-
|
|
154
|
-
|
|
231
|
+
if (waitForPress) {
|
|
232
|
+
// Finger moved before the long-press fired: it's a scroll, not a drag.
|
|
233
|
+
if (distance > LONG_PRESS_TOLERANCE) end();
|
|
234
|
+
return;
|
|
235
|
+
}
|
|
236
|
+
if (distance < DRAG_THRESHOLD) return;
|
|
237
|
+
activate();
|
|
155
238
|
}
|
|
156
239
|
setDraft(moveKey(latest.current.keys, key, targetIndex(point, key)));
|
|
240
|
+
if (frame === null) frame = raf(_autoScroll);
|
|
157
241
|
};
|
|
158
242
|
var onUp = function onUp() {
|
|
159
243
|
end();
|
|
@@ -163,18 +247,36 @@ function useSortablePointer(_ref2) {
|
|
|
163
247
|
};
|
|
164
248
|
var onCancel = function onCancel() {
|
|
165
249
|
end();
|
|
250
|
+
if (!active) return;
|
|
166
251
|
setDragging(null);
|
|
167
252
|
setDraft(null);
|
|
168
253
|
};
|
|
254
|
+
// Once a touch drag is live, stop the browser from scrolling (and from firing
|
|
255
|
+
// pointercancel); before that, let the page scroll normally.
|
|
256
|
+
var onTouchMove = function onTouchMove(ev) {
|
|
257
|
+
if (active && ev.cancelable) ev.preventDefault();
|
|
258
|
+
};
|
|
259
|
+
var onContextMenu = function onContextMenu(ev) {
|
|
260
|
+
if (waitForPress) ev.preventDefault();
|
|
261
|
+
};
|
|
169
262
|
end();
|
|
263
|
+
if (waitForPress) pressTimer = setTimeout(activate, LONG_PRESS_DELAY);
|
|
170
264
|
window.addEventListener("pointermove", onMove);
|
|
171
265
|
window.addEventListener("pointerup", onUp);
|
|
172
266
|
window.addEventListener("pointercancel", onCancel);
|
|
267
|
+
window.addEventListener("touchmove", onTouchMove, {
|
|
268
|
+
passive: false
|
|
269
|
+
});
|
|
270
|
+
window.addEventListener("contextmenu", onContextMenu);
|
|
173
271
|
session.current = {
|
|
174
272
|
detach: function detach() {
|
|
273
|
+
if (pressTimer !== null) clearTimeout(pressTimer);
|
|
274
|
+
if (frame !== null) caf(frame);
|
|
175
275
|
window.removeEventListener("pointermove", onMove);
|
|
176
276
|
window.removeEventListener("pointerup", onUp);
|
|
177
277
|
window.removeEventListener("pointercancel", onCancel);
|
|
278
|
+
window.removeEventListener("touchmove", onTouchMove);
|
|
279
|
+
window.removeEventListener("contextmenu", onContextMenu);
|
|
178
280
|
}
|
|
179
281
|
};
|
|
180
282
|
};
|
|
@@ -185,4 +287,4 @@ function useSortablePointer(_ref2) {
|
|
|
185
287
|
};
|
|
186
288
|
}
|
|
187
289
|
|
|
188
|
-
export { DEFAULT_SORTABLE_MESSAGES, moveKey, useSortableKeyboard, useSortablePointer };
|
|
290
|
+
export { AUTO_SCROLL_EDGE, DEFAULT_SORTABLE_MESSAGES, DRAG_THRESHOLD, LONG_PRESS_DELAY, LONG_PRESS_TOLERANCE, edgeSpeed, getScrollParent, moveKey, useSortableKeyboard, useSortablePointer };
|
package/dist/esm/index.js
CHANGED
|
@@ -42,6 +42,7 @@ export { default as Drawer } from './components/feedback/Drawer.js';
|
|
|
42
42
|
export { default as Tour } from './components/feedback/Tour.js';
|
|
43
43
|
export { default as Badge } from './components/utility/Badge.js';
|
|
44
44
|
export { default as Avatar } from './components/utility/Avatar.js';
|
|
45
|
+
export { default as AvatarGroup } from './components/utility/AvatarGroup.js';
|
|
45
46
|
export { default as Card } from './components/utility/Card.js';
|
|
46
47
|
export { default as Pagination } from './components/utility/Pagination.js';
|
|
47
48
|
export { default as Stepper } from './components/utility/Stepper.js';
|
|
@@ -2,5 +2,8 @@
|
|
|
2
2
|
// touch target (WCAG 2.5.5, Apple HIG) on coarse pointers only, so desktop
|
|
3
3
|
// layouts keep their compact size. Pair with inline-flex centering.
|
|
4
4
|
var TOUCH_TARGET = "[@media(pointer:coarse)]:min-h-11 [@media(pointer:coarse)]:min-w-11";
|
|
5
|
+
// Internal (not exported). Native-feeling press: a slight shrink while pressed,
|
|
6
|
+
// off under prefers-reduced-motion. Add to pressables (buttons, tiles, tab items).
|
|
7
|
+
var PRESS_FEEDBACK = "active:scale-[0.97] motion-reduce:active:scale-100 transition-transform duration-fast";
|
|
5
8
|
|
|
6
|
-
export { TOUCH_TARGET };
|
|
9
|
+
export { PRESS_FEEDBACK, TOUCH_TARGET };
|
|
@@ -26,13 +26,17 @@ export function useSliderValues({ value, defaultValue, onChange, onChangeEnd, bo
|
|
|
26
26
|
isRange: boolean;
|
|
27
27
|
setThumb: (index: any, raw: any, commit?: boolean) => void;
|
|
28
28
|
};
|
|
29
|
-
/**
|
|
30
|
-
|
|
29
|
+
/**
|
|
30
|
+
* Pointer drag on the track: picks the nearest thumb and follows the pointer.
|
|
31
|
+
* `onActiveChange(index | null)` reports which thumb is being dragged.
|
|
32
|
+
*/
|
|
33
|
+
export function useSliderPointer({ trackRef, values, setThumb, bounds, disabled, onActiveChange }: {
|
|
31
34
|
trackRef: any;
|
|
32
35
|
values: any;
|
|
33
36
|
setThumb: any;
|
|
34
37
|
bounds: any;
|
|
35
38
|
disabled: any;
|
|
39
|
+
onActiveChange: any;
|
|
36
40
|
}): {
|
|
37
41
|
onPointerDown: (e: any) => void;
|
|
38
42
|
onPointerMove: (e: any) => void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSliderValues.d.ts","sourceRoot":"","sources":["../../src/hooks/useSliderValues.js"],"names":[],"mappings":"AAQA;;;;WAGC;AAID,kFAAkF;AAClF;;;;;QAmBC;AAED;;;;GAIG;AACH;;;;;;;;;;EAqBC;AAED
|
|
1
|
+
{"version":3,"file":"useSliderValues.d.ts","sourceRoot":"","sources":["../../src/hooks/useSliderValues.js"],"names":[],"mappings":"AAQA;;;;WAGC;AAID,kFAAkF;AAClF;;;;;QAmBC;AAED;;;;GAIG;AACH;;;;;;;;;;EAqBC;AAED;;;GAGG;AACH;;;;;;;;;;;;EAgCC;AAxFM,8DAAsF"}
|
|
@@ -11,6 +11,10 @@ export function useSortableKeyboard({ keys, setDraft, commit, announce, labelFor
|
|
|
11
11
|
keyDownFor: (key: any) => (e: any) => void;
|
|
12
12
|
cancel: () => void;
|
|
13
13
|
};
|
|
14
|
+
/** Nearest scrollable ancestor along `axis`, or `null` for the window. */
|
|
15
|
+
export function getScrollParent(node: any, axis: any): any;
|
|
16
|
+
/** Scroll speed (px/frame, signed) for a coordinate near the [start, end] edges. */
|
|
17
|
+
export function edgeSpeed(pos: any, start: any, end: any, edge?: number): number;
|
|
14
18
|
export function useSortablePointer({ keys, setDraft, commit, nodeFor, orientation, disabled }: {
|
|
15
19
|
keys: any;
|
|
16
20
|
setDraft: any;
|
|
@@ -20,7 +24,9 @@ export function useSortablePointer({ keys, setDraft, commit, nodeFor, orientatio
|
|
|
20
24
|
disabled: any;
|
|
21
25
|
}): {
|
|
22
26
|
dragging: null;
|
|
23
|
-
startFor: (key: any
|
|
27
|
+
startFor: (key: any, { longPress }?: {
|
|
28
|
+
longPress?: boolean | undefined;
|
|
29
|
+
}) => (e: any) => void;
|
|
24
30
|
};
|
|
25
31
|
export namespace DEFAULT_SORTABLE_MESSAGES {
|
|
26
32
|
let instructions: string;
|
|
@@ -29,4 +35,8 @@ export namespace DEFAULT_SORTABLE_MESSAGES {
|
|
|
29
35
|
function dropped(label: any, position: any, total: any): string;
|
|
30
36
|
function cancelled(label: any, position: any): string;
|
|
31
37
|
}
|
|
38
|
+
export const DRAG_THRESHOLD: 4;
|
|
39
|
+
export const LONG_PRESS_DELAY: 250;
|
|
40
|
+
export const LONG_PRESS_TOLERANCE: 8;
|
|
41
|
+
export const AUTO_SCROLL_EDGE: 40;
|
|
32
42
|
//# sourceMappingURL=useSortable.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSortable.d.ts","sourceRoot":"","sources":["../../src/hooks/useSortable.js"],"names":[],"mappings":"AAOA,gEAIC;AAcD;;;;;;;;;+BAK+B,MAAC;;EAqC/B;
|
|
1
|
+
{"version":3,"file":"useSortable.d.ts","sourceRoot":"","sources":["../../src/hooks/useSortable.js"],"names":[],"mappings":"AAOA,gEAIC;AAcD;;;;;;;;;+BAK+B,MAAC;;EAqC/B;AAqBD,0EAA0E;AAC1E,2DAOC;AAED,oFAAoF;AACpF,iFAIC;AAOD;;;;;;;;;;;WAwByD,MAAC;EAgGzD;;;IAtNU,gEAAmF;IACrF,8DAAiF;IAC/E,gEAAmF;IACjF,sDAAoF;;AAoDjG,6BAA8B,CAAC,CAAC;AAGhC,+BAAgC,GAAG,CAAC;AACpC,mCAAoC,CAAC,CAAC;AAGtC,+BAAgC,EAAE,CAAC"}
|