@dxos/react-ui 0.3.11-main.fbbdc2a → 0.3.11-main.fc97a54
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/lib/browser/index.mjs +34 -22
- package/dist/lib/browser/index.mjs.map +4 -4
- package/dist/lib/browser/meta.json +1 -1
- package/dist/types/src/components/Avatars/Avatar.d.ts +3 -3
- package/dist/types/src/components/Avatars/Avatar.d.ts.map +1 -1
- package/dist/types/src/components/Input/Input.stories.d.ts +1 -1
- package/dist/types/src/components/List/List.d.ts.map +1 -0
- package/dist/types/src/components/{Lists → List}/List.stories.d.ts +3 -1
- package/dist/types/src/components/List/List.stories.d.ts.map +1 -0
- package/dist/types/src/components/List/Tree.d.ts.map +1 -0
- package/dist/types/src/components/List/Tree.stories.d.ts.map +1 -0
- package/dist/types/src/components/List/index.d.ts.map +1 -0
- package/dist/types/src/components/Popover/Popover.stories.d.ts.map +1 -1
- package/dist/types/src/components/ScrollArea/ScrollArea.stories.d.ts.map +1 -1
- package/dist/types/src/components/Select/Select.d.ts.map +1 -1
- package/dist/types/src/components/ThemeProvider/ThemeProvider.d.ts.map +1 -1
- package/dist/types/src/components/ThemeProvider/TranslationsProvider.d.ts +108 -1
- package/dist/types/src/components/ThemeProvider/TranslationsProvider.d.ts.map +1 -1
- package/dist/types/src/components/ThemeProvider/index.d.ts +1 -0
- package/dist/types/src/components/ThemeProvider/index.d.ts.map +1 -1
- package/dist/types/src/components/index.d.ts +1 -1
- package/dist/types/src/components/index.d.ts.map +1 -1
- package/dist/types/src/hooks/useTranslationsContext.d.ts +1 -0
- package/dist/types/src/hooks/useTranslationsContext.d.ts.map +1 -1
- package/dist/types/src/index.d.ts +1 -1
- package/dist/types/src/index.d.ts.map +1 -1
- package/package.json +12 -9
- package/src/components/Avatars/Avatar.tsx +2 -1
- package/src/components/Buttons/Button.stories.tsx +2 -2
- package/src/components/Input/Input.stories.tsx +2 -2
- package/src/components/{Lists → List}/List.stories.tsx +50 -2
- package/src/components/Popover/Popover.stories.tsx +2 -1
- package/src/components/ScrollArea/ScrollArea.stories.tsx +1 -1
- package/src/components/Select/Select.stories.tsx +1 -1
- package/src/components/Select/Select.tsx +14 -12
- package/src/components/ThemeProvider/ThemeProvider.tsx +1 -0
- package/src/components/ThemeProvider/TranslationsProvider.tsx +22 -4
- package/src/components/ThemeProvider/index.ts +1 -0
- package/src/components/index.ts +1 -1
- package/src/index.ts +1 -1
- package/src/playground/Surfaces.stories.tsx +9 -9
- package/src/playground/Typography.stories.tsx +1 -1
- package/dist/types/src/components/Lists/List.d.ts.map +0 -1
- package/dist/types/src/components/Lists/List.stories.d.ts.map +0 -1
- package/dist/types/src/components/Lists/Tree.d.ts.map +0 -1
- package/dist/types/src/components/Lists/Tree.stories.d.ts.map +0 -1
- package/dist/types/src/components/Lists/index.d.ts.map +0 -1
- package/dist/types/src/components/{Lists → List}/List.d.ts +0 -0
- package/dist/types/src/components/{Lists → List}/Tree.d.ts +0 -0
- package/dist/types/src/components/{Lists → List}/Tree.stories.d.ts +0 -0
- package/dist/types/src/components/{Lists → List}/index.d.ts +0 -0
- package/src/components/{Lists → List}/List.tsx +0 -0
- package/src/components/{Lists → List}/Tree.stories.tsx +0 -0
- package/src/components/{Lists → List}/Tree.tsx +1 -1
- /package/src/components/{Lists → List}/index.ts +0 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
// packages/ui/react-ui/src/index.ts
|
|
2
|
-
import {
|
|
2
|
+
import { Trans } from "react-i18next";
|
|
3
3
|
export * from "@dxos/react-ui-types";
|
|
4
4
|
export * from "@dxos/react-hooks";
|
|
5
5
|
|
|
@@ -23,14 +23,16 @@ var useElevationContext = (propsElevation) => {
|
|
|
23
23
|
};
|
|
24
24
|
|
|
25
25
|
// packages/ui/react-ui/src/hooks/useTranslationsContext.ts
|
|
26
|
-
import { useContext as
|
|
26
|
+
import { useContext as useContext4 } from "react";
|
|
27
27
|
|
|
28
28
|
// packages/ui/react-ui/src/components/ThemeProvider/TranslationsProvider.tsx
|
|
29
|
+
import { enUS as dtLocaleEnUs } from "date-fns/locale";
|
|
29
30
|
import i18Next from "i18next";
|
|
30
|
-
import React, { useEffect, createContext, useState, Suspense } from "react";
|
|
31
|
-
import { initReactI18next } from "react-i18next";
|
|
31
|
+
import React, { useEffect, createContext, useState, Suspense, useContext as useContext3 } from "react";
|
|
32
|
+
import { initReactI18next, useTranslation as useI18NextTranslation } from "react-i18next";
|
|
32
33
|
var initialLng = "en-US";
|
|
33
34
|
var initialNs = "dxos-common";
|
|
35
|
+
var initialDtLocale = dtLocaleEnUs;
|
|
34
36
|
var resources = {
|
|
35
37
|
[initialLng]: {
|
|
36
38
|
[initialNs]: {
|
|
@@ -47,9 +49,18 @@ void i18Next.use(initReactI18next).init({
|
|
|
47
49
|
}
|
|
48
50
|
});
|
|
49
51
|
var TranslationsContext = /* @__PURE__ */ createContext({
|
|
50
|
-
appNs: initialNs
|
|
52
|
+
appNs: initialNs,
|
|
53
|
+
dtLocale: initialDtLocale
|
|
51
54
|
});
|
|
52
|
-
var
|
|
55
|
+
var useTranslation = (...args) => {
|
|
56
|
+
const result = useI18NextTranslation(...args);
|
|
57
|
+
const { dtLocale } = useContext3(TranslationsContext);
|
|
58
|
+
return {
|
|
59
|
+
...result,
|
|
60
|
+
dtLocale
|
|
61
|
+
};
|
|
62
|
+
};
|
|
63
|
+
var TranslationsProvider = ({ fallback, resourceExtensions, children, appNs, dtLocale }) => {
|
|
53
64
|
const [loaded, setLoaded] = useState(false);
|
|
54
65
|
useEffect(() => {
|
|
55
66
|
setLoaded(false);
|
|
@@ -68,7 +79,8 @@ var TranslationsProvider = ({ fallback, resourceExtensions, children, appNs }) =
|
|
|
68
79
|
]);
|
|
69
80
|
return /* @__PURE__ */ React.createElement(TranslationsContext.Provider, {
|
|
70
81
|
value: {
|
|
71
|
-
appNs: appNs ?? initialNs
|
|
82
|
+
appNs: appNs ?? initialNs,
|
|
83
|
+
dtLocale: dtLocale ?? initialDtLocale
|
|
72
84
|
}
|
|
73
85
|
}, /* @__PURE__ */ React.createElement(Suspense, {
|
|
74
86
|
fallback
|
|
@@ -76,11 +88,11 @@ var TranslationsProvider = ({ fallback, resourceExtensions, children, appNs }) =
|
|
|
76
88
|
};
|
|
77
89
|
|
|
78
90
|
// packages/ui/react-ui/src/hooks/useTranslationsContext.ts
|
|
79
|
-
var useTranslationsContext = () =>
|
|
91
|
+
var useTranslationsContext = () => useContext4(TranslationsContext);
|
|
80
92
|
|
|
81
93
|
// packages/ui/react-ui/src/hooks/useThemeContext.ts
|
|
82
|
-
import { useContext as
|
|
83
|
-
var useThemeContext = () =>
|
|
94
|
+
import { useContext as useContext5 } from "react";
|
|
95
|
+
var useThemeContext = () => useContext5(ThemeContext);
|
|
84
96
|
|
|
85
97
|
// packages/ui/react-ui/src/hooks/useVisualViewport.ts
|
|
86
98
|
import { useEffect as useEffect2, useState as useState2 } from "react";
|
|
@@ -1088,7 +1100,7 @@ var Input = {
|
|
|
1088
1100
|
DescriptionAndValidation
|
|
1089
1101
|
};
|
|
1090
1102
|
|
|
1091
|
-
// packages/ui/react-ui/src/components/
|
|
1103
|
+
// packages/ui/react-ui/src/components/List/List.tsx
|
|
1092
1104
|
import { CaretDown, CaretRight } from "@phosphor-icons/react";
|
|
1093
1105
|
import { Slot as Slot8 } from "@radix-ui/react-slot";
|
|
1094
1106
|
import React17, { forwardRef as forwardRef14 } from "react";
|
|
@@ -1105,7 +1117,7 @@ var DensityProvider = ({ density, children }) => /* @__PURE__ */ React16.createE
|
|
|
1105
1117
|
}
|
|
1106
1118
|
}, children);
|
|
1107
1119
|
|
|
1108
|
-
// packages/ui/react-ui/src/components/
|
|
1120
|
+
// packages/ui/react-ui/src/components/List/List.tsx
|
|
1109
1121
|
var List = /* @__PURE__ */ forwardRef14(({ classNames, children, ...props }, forwardedRef) => {
|
|
1110
1122
|
const { tx } = useThemeContext();
|
|
1111
1123
|
const density = useDensityContext(props.density);
|
|
@@ -1191,7 +1203,7 @@ var ListItem = {
|
|
|
1191
1203
|
MockOpenTrigger: MockListItemOpenTrigger
|
|
1192
1204
|
};
|
|
1193
1205
|
|
|
1194
|
-
// packages/ui/react-ui/src/components/
|
|
1206
|
+
// packages/ui/react-ui/src/components/List/Tree.tsx
|
|
1195
1207
|
import React18, { forwardRef as forwardRef15 } from "react";
|
|
1196
1208
|
var TreeRoot = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
|
|
1197
1209
|
return /* @__PURE__ */ React18.createElement(List, {
|
|
@@ -1255,24 +1267,24 @@ var useSwipeToDismiss = (ref, {
|
|
|
1255
1267
|
/* side = 'inline-start' */
|
|
1256
1268
|
}) => {
|
|
1257
1269
|
const $root = ref.current;
|
|
1258
|
-
const [motionState, setMotionState] = useState3(
|
|
1270
|
+
const [motionState, setMotionState] = useState3(0);
|
|
1259
1271
|
const [gestureStartX, setGestureStartX] = useState3(0);
|
|
1260
1272
|
const setIdle = useCallback2(() => {
|
|
1261
|
-
setMotionState(
|
|
1273
|
+
setMotionState(0);
|
|
1262
1274
|
$root?.style.removeProperty("inset-inline-start");
|
|
1263
1275
|
$root?.style.setProperty("transition-duration", "200ms");
|
|
1264
1276
|
}, [
|
|
1265
1277
|
$root
|
|
1266
1278
|
]);
|
|
1267
1279
|
const setFollowing = useCallback2(() => {
|
|
1268
|
-
setMotionState(
|
|
1280
|
+
setMotionState(2);
|
|
1269
1281
|
$root?.style.setProperty("transition-duration", "0ms");
|
|
1270
1282
|
}, [
|
|
1271
1283
|
$root
|
|
1272
1284
|
]);
|
|
1273
1285
|
const handlePointerDown = useCallback2(({ screenX }) => {
|
|
1274
|
-
if (motionState ===
|
|
1275
|
-
setMotionState(
|
|
1286
|
+
if (motionState === 0) {
|
|
1287
|
+
setMotionState(1);
|
|
1276
1288
|
setGestureStartX(screenX);
|
|
1277
1289
|
}
|
|
1278
1290
|
}, [
|
|
@@ -1282,7 +1294,7 @@ var useSwipeToDismiss = (ref, {
|
|
|
1282
1294
|
if ($root) {
|
|
1283
1295
|
const delta = Math.min(screenX - gestureStartX, 0);
|
|
1284
1296
|
switch (motionState) {
|
|
1285
|
-
case
|
|
1297
|
+
case 2:
|
|
1286
1298
|
if (Math.abs(delta) > dismissThreshold) {
|
|
1287
1299
|
setIdle();
|
|
1288
1300
|
onDismiss?.();
|
|
@@ -1290,7 +1302,7 @@ var useSwipeToDismiss = (ref, {
|
|
|
1290
1302
|
$root.style.setProperty("inset-inline-start", `${offset + delta}px`);
|
|
1291
1303
|
}
|
|
1292
1304
|
break;
|
|
1293
|
-
case
|
|
1305
|
+
case 1:
|
|
1294
1306
|
if (Math.abs(delta) > debounceThreshold) {
|
|
1295
1307
|
setFollowing();
|
|
1296
1308
|
}
|
|
@@ -1711,13 +1723,13 @@ var SelectTrigger = SelectPrimitive.Trigger;
|
|
|
1711
1723
|
var SelectValue = SelectPrimitive.Value;
|
|
1712
1724
|
var SelectIcon = SelectPrimitive.Icon;
|
|
1713
1725
|
var SelectPortal = SelectPrimitive.Portal;
|
|
1714
|
-
var SelectTriggerButton = /* @__PURE__ */ forwardRef21(({ placeholder, ...props }, forwardedRef) => {
|
|
1726
|
+
var SelectTriggerButton = /* @__PURE__ */ forwardRef21(({ children, placeholder, ...props }, forwardedRef) => {
|
|
1715
1727
|
return /* @__PURE__ */ React24.createElement(SelectPrimitive.Trigger, {
|
|
1716
1728
|
asChild: true,
|
|
1717
1729
|
ref: forwardedRef
|
|
1718
1730
|
}, /* @__PURE__ */ React24.createElement(Button, props, /* @__PURE__ */ React24.createElement(SelectPrimitive.Value, {
|
|
1719
1731
|
placeholder
|
|
1720
|
-
}), /* @__PURE__ */ React24.createElement(SelectPrimitive.Icon, {
|
|
1732
|
+
}, children), /* @__PURE__ */ React24.createElement(SelectPrimitive.Icon, {
|
|
1721
1733
|
className: "pis-2"
|
|
1722
1734
|
}, /* @__PURE__ */ React24.createElement(CaretDown2, {
|
|
1723
1735
|
weight: "bold"
|