@mezzanine-ui/react 1.1.0 → 1.2.0
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/COMPONENTS.md +35 -31
- package/Calendar/CalendarConfigProviderTemporal.d.ts +55 -0
- package/Calendar/CalendarConfigProviderTemporal.js +49 -0
- package/Calendar/index.d.ts +2 -0
- package/Calendar/index.js +1 -0
- package/Dropdown/Dropdown.d.ts +8 -0
- package/Dropdown/Dropdown.js +11 -2
- package/Pagination/PaginationPageSize.js +1 -1
- package/package.json +5 -3
- package/temporal.d.ts +48 -0
- package/temporal.js +2 -0
package/COMPONENTS.md
CHANGED
|
@@ -150,37 +150,41 @@
|
|
|
150
150
|
|
|
151
151
|
## Utility（工具）
|
|
152
152
|
|
|
153
|
-
| 元件
|
|
154
|
-
|
|
|
155
|
-
| Calendar
|
|
156
|
-
| RangeCalendar
|
|
157
|
-
| CalendarCell
|
|
158
|
-
| CalendarConfigProvider
|
|
159
|
-
|
|
|
160
|
-
|
|
|
161
|
-
|
|
|
162
|
-
|
|
|
163
|
-
|
|
|
164
|
-
|
|
|
165
|
-
|
|
|
166
|
-
|
|
|
167
|
-
|
|
|
168
|
-
|
|
|
169
|
-
|
|
|
170
|
-
|
|
|
171
|
-
|
|
|
172
|
-
|
|
|
173
|
-
|
|
|
174
|
-
|
|
|
175
|
-
|
|
|
176
|
-
|
|
|
177
|
-
|
|
|
178
|
-
|
|
|
179
|
-
|
|
|
180
|
-
|
|
|
181
|
-
|
|
|
182
|
-
|
|
|
183
|
-
|
|
|
153
|
+
| 元件 | 匯入名稱 | 說明 |
|
|
154
|
+
| ------------------------------ | -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
155
|
+
| Calendar | `Calendar` | 完整日曆元件，支援日/週/月/季/半年/年視圖切換 |
|
|
156
|
+
| RangeCalendar | `RangeCalendar` | 範圍日曆，支援選取起始至結束日期範圍 |
|
|
157
|
+
| CalendarCell | `CalendarCell` | 日曆中的單一日期格子 |
|
|
158
|
+
| CalendarConfigProvider | `CalendarConfigProvider` | 日曆全域設定提供者，設定語系與格式 |
|
|
159
|
+
| CalendarConfigProviderDayjs | `CalendarConfigProviderDayjs` | 預設綁定 dayjs 實作的 CalendarConfigProvider，sub-path entry `@mezzanine-ui/react/dayjs` |
|
|
160
|
+
| CalendarConfigProviderLuxon | `CalendarConfigProviderLuxon` | 預設綁定 luxon 實作的 CalendarConfigProvider，sub-path entry `@mezzanine-ui/react/luxon` |
|
|
161
|
+
| CalendarConfigProviderMoment | `CalendarConfigProviderMoment` | 預設綁定 moment 實作的 CalendarConfigProvider，sub-path entry `@mezzanine-ui/react/moment` |
|
|
162
|
+
| CalendarConfigProviderTemporal | `CalendarConfigProviderTemporal` | 預設綁定 JS-native Temporal 實作的 CalendarConfigProvider，sub-path entry `@mezzanine-ui/react/temporal`；Safari / Node 22 須先安裝 `@js-temporal/polyfill` |
|
|
163
|
+
| CalendarControls | `CalendarControls` | 日曆的月份/年份切換控制列 |
|
|
164
|
+
| CalendarDayOfWeek | `CalendarDayOfWeek` | 日曆的週幾標題列 |
|
|
165
|
+
| CalendarDays | `CalendarDays` | 日曆的日期格子區域 |
|
|
166
|
+
| CalendarHalfYears | `CalendarHalfYears` | 日曆的半年視圖 |
|
|
167
|
+
| CalendarMonths | `CalendarMonths` | 日曆的月份視圖 |
|
|
168
|
+
| CalendarQuarters | `CalendarQuarters` | 日曆的季度視圖 |
|
|
169
|
+
| CalendarWeeks | `CalendarWeeks` | 日曆的週視圖 |
|
|
170
|
+
| CalendarYears | `CalendarYears` | 日曆的年份視圖 |
|
|
171
|
+
| Dropdown | `Dropdown` | 下拉選單面板，由 Select、AutoComplete、Cascader 等元件內部使用 |
|
|
172
|
+
| DropdownAction | `DropdownAction` | Dropdown 中的操作按鈕項目 |
|
|
173
|
+
| DropdownItem | `DropdownItem` | Dropdown 中的標準選項項目 |
|
|
174
|
+
| DropdownItemCard | `DropdownItemCard` | Dropdown 中的卡片式選項項目 |
|
|
175
|
+
| DropdownStatus | `DropdownStatus` | Dropdown 的狀態提示顯示（空狀態、載入中等） |
|
|
176
|
+
| Popper | `Popper` | 定位浮層元件，基於 Floating UI，Tooltip / Dropdown 的定位基底 |
|
|
177
|
+
| Portal | `Portal` | 將子元件渲染到指定 DOM 節點，Modal、Drawer 使用此元件脫離文件流 |
|
|
178
|
+
| TimePanel | `TimePanel` | 時間選取面板，包含時/分/秒的滾輪選取 |
|
|
179
|
+
| TimePanelColumn | `TimePanelColumn` | TimePanel 中的單一時間欄（時、分或秒）的滾輪列 |
|
|
180
|
+
| Transition | `Transition` | 動畫過渡基底元件，提供 Collapse / Fade / Rotate / Scale / Slide / Translate 六種動畫 |
|
|
181
|
+
| Collapse | `Collapse` | 收合展開動畫（高度過渡） |
|
|
182
|
+
| Fade | `Fade` | 淡入淡出動畫 |
|
|
183
|
+
| Rotate | `Rotate` | 旋轉動畫 |
|
|
184
|
+
| Scale | `Scale` | 縮放動畫 |
|
|
185
|
+
| Slide | `Slide` | 滑動動畫，Drawer 使用此元件進行進出場 |
|
|
186
|
+
| Translate | `Translate` | 位移動畫 |
|
|
187
|
+
| createNotifier | `createNotifier` | 工廠函式，建立通知管理器實例，用於指令式顯示 toast / 通知訊息 |
|
|
184
188
|
|
|
185
189
|
---
|
|
186
190
|
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { CalendarLocaleValue } from '@mezzanine-ui/core/calendar';
|
|
3
|
+
export type CalendarConfigProviderTemporalProps = {
|
|
4
|
+
children?: ReactNode;
|
|
5
|
+
defaultDateFormat?: string;
|
|
6
|
+
defaultTimeFormat?: string;
|
|
7
|
+
/**
|
|
8
|
+
* The unified locale for all calendar display and value processing.
|
|
9
|
+
* This determines the first day of week, month names, weekday names, etc.
|
|
10
|
+
* Use CalendarLocale enum for type-safe locale values.
|
|
11
|
+
* @example CalendarLocale.EN_US, CalendarLocale.ZH_TW, CalendarLocale.DE_DE
|
|
12
|
+
* @default CalendarLocale.EN_US
|
|
13
|
+
*/
|
|
14
|
+
locale?: CalendarLocaleValue;
|
|
15
|
+
};
|
|
16
|
+
/**
|
|
17
|
+
* Pre-configured CalendarConfigProvider backed by the JS-native Temporal API.
|
|
18
|
+
*
|
|
19
|
+
* Requires `globalThis.Temporal` to be present **on the client** before any
|
|
20
|
+
* code imports `CalendarMethodsTemporal`. On runtimes that lack native
|
|
21
|
+
* support (Safari, Node 22), install `@js-temporal/polyfill` as a peer
|
|
22
|
+
* dependency.
|
|
23
|
+
*
|
|
24
|
+
* IMPORTANT: in Next.js App Router (and other RSC frameworks), default
|
|
25
|
+
* layouts are Server Components — registering the polyfill at module level
|
|
26
|
+
* in such a layout only runs on the server, leaving the browser without
|
|
27
|
+
* `globalThis.Temporal`. Use a Client Component wrapper instead. See the
|
|
28
|
+
* Calendar story docs for full setup examples (Vite/CRA vs App Router).
|
|
29
|
+
*
|
|
30
|
+
* @example
|
|
31
|
+
* ```tsx
|
|
32
|
+
* // app/temporal-polyfill.tsx (Client Component)
|
|
33
|
+
* 'use client';
|
|
34
|
+
* import { Temporal } from '@js-temporal/polyfill';
|
|
35
|
+
* (globalThis as { Temporal?: unknown }).Temporal = Temporal;
|
|
36
|
+
* export function TemporalPolyfill() { return null; }
|
|
37
|
+
*
|
|
38
|
+
* // app/layout.tsx
|
|
39
|
+
* import { TemporalPolyfill } from './temporal-polyfill';
|
|
40
|
+
* import { CalendarConfigProviderTemporal, CalendarLocale } from '@mezzanine-ui/react/temporal';
|
|
41
|
+
*
|
|
42
|
+
* export default function RootLayout({ children }) {
|
|
43
|
+
* return (
|
|
44
|
+
* <html><body>
|
|
45
|
+
* <TemporalPolyfill />
|
|
46
|
+
* <CalendarConfigProviderTemporal locale={CalendarLocale.ZH_TW}>
|
|
47
|
+
* {children}
|
|
48
|
+
* </CalendarConfigProviderTemporal>
|
|
49
|
+
* </body></html>
|
|
50
|
+
* );
|
|
51
|
+
* }
|
|
52
|
+
* ```
|
|
53
|
+
*/
|
|
54
|
+
export declare function CalendarConfigProviderTemporal(props: CalendarConfigProviderTemporalProps): import("react/jsx-runtime").JSX.Element;
|
|
55
|
+
export default CalendarConfigProviderTemporal;
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx } from 'react/jsx-runtime';
|
|
3
|
+
import CalendarMethodsTemporal from '@mezzanine-ui/core/calendarMethodsTemporal';
|
|
4
|
+
import CalendarConfigProvider from './CalendarContext.js';
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* Pre-configured CalendarConfigProvider backed by the JS-native Temporal API.
|
|
8
|
+
*
|
|
9
|
+
* Requires `globalThis.Temporal` to be present **on the client** before any
|
|
10
|
+
* code imports `CalendarMethodsTemporal`. On runtimes that lack native
|
|
11
|
+
* support (Safari, Node 22), install `@js-temporal/polyfill` as a peer
|
|
12
|
+
* dependency.
|
|
13
|
+
*
|
|
14
|
+
* IMPORTANT: in Next.js App Router (and other RSC frameworks), default
|
|
15
|
+
* layouts are Server Components — registering the polyfill at module level
|
|
16
|
+
* in such a layout only runs on the server, leaving the browser without
|
|
17
|
+
* `globalThis.Temporal`. Use a Client Component wrapper instead. See the
|
|
18
|
+
* Calendar story docs for full setup examples (Vite/CRA vs App Router).
|
|
19
|
+
*
|
|
20
|
+
* @example
|
|
21
|
+
* ```tsx
|
|
22
|
+
* // app/temporal-polyfill.tsx (Client Component)
|
|
23
|
+
* 'use client';
|
|
24
|
+
* import { Temporal } from '@js-temporal/polyfill';
|
|
25
|
+
* (globalThis as { Temporal?: unknown }).Temporal = Temporal;
|
|
26
|
+
* export function TemporalPolyfill() { return null; }
|
|
27
|
+
*
|
|
28
|
+
* // app/layout.tsx
|
|
29
|
+
* import { TemporalPolyfill } from './temporal-polyfill';
|
|
30
|
+
* import { CalendarConfigProviderTemporal, CalendarLocale } from '@mezzanine-ui/react/temporal';
|
|
31
|
+
*
|
|
32
|
+
* export default function RootLayout({ children }) {
|
|
33
|
+
* return (
|
|
34
|
+
* <html><body>
|
|
35
|
+
* <TemporalPolyfill />
|
|
36
|
+
* <CalendarConfigProviderTemporal locale={CalendarLocale.ZH_TW}>
|
|
37
|
+
* {children}
|
|
38
|
+
* </CalendarConfigProviderTemporal>
|
|
39
|
+
* </body></html>
|
|
40
|
+
* );
|
|
41
|
+
* }
|
|
42
|
+
* ```
|
|
43
|
+
*/
|
|
44
|
+
function CalendarConfigProviderTemporal(props) {
|
|
45
|
+
const { children, defaultDateFormat, defaultTimeFormat, locale } = props;
|
|
46
|
+
return (jsx(CalendarConfigProvider, { defaultDateFormat: defaultDateFormat, defaultTimeFormat: defaultTimeFormat, locale: locale, methods: CalendarMethodsTemporal, children: children }));
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
export { CalendarConfigProviderTemporal, CalendarConfigProviderTemporal as default };
|
package/Calendar/index.d.ts
CHANGED
|
@@ -10,6 +10,8 @@ export { default as CalendarConfigProviderMoment } from './CalendarConfigProvide
|
|
|
10
10
|
export type { CalendarConfigProviderMomentProps } from './CalendarConfigProviderMoment';
|
|
11
11
|
export { default as CalendarConfigProviderLuxon } from './CalendarConfigProviderLuxon';
|
|
12
12
|
export type { CalendarConfigProviderLuxonProps } from './CalendarConfigProviderLuxon';
|
|
13
|
+
export { default as CalendarConfigProviderTemporal } from './CalendarConfigProviderTemporal';
|
|
14
|
+
export type { CalendarConfigProviderTemporalProps } from './CalendarConfigProviderTemporal';
|
|
13
15
|
export type { CalendarYearsProps } from './CalendarYears';
|
|
14
16
|
export { default as CalendarYears } from './CalendarYears';
|
|
15
17
|
export type { CalendarQuartersProps } from './CalendarQuarters';
|
package/Calendar/index.js
CHANGED
|
@@ -5,6 +5,7 @@ export { default as CalendarConfigProvider, CalendarContext, useCalendarContext
|
|
|
5
5
|
export { CalendarConfigProviderDayjs } from './CalendarConfigProviderDayjs.js';
|
|
6
6
|
export { CalendarConfigProviderMoment } from './CalendarConfigProviderMoment.js';
|
|
7
7
|
export { CalendarConfigProviderLuxon } from './CalendarConfigProviderLuxon.js';
|
|
8
|
+
export { CalendarConfigProviderTemporal } from './CalendarConfigProviderTemporal.js';
|
|
8
9
|
export { default as CalendarYears } from './CalendarYears.js';
|
|
9
10
|
export { default as CalendarQuarters } from './CalendarQuarters.js';
|
|
10
11
|
export { default as CalendarHalfYears } from './CalendarHalfYears.js';
|
package/Dropdown/Dropdown.d.ts
CHANGED
|
@@ -144,6 +144,14 @@ export interface DropdownProps extends DropdownItemSharedProps {
|
|
|
144
144
|
* @default false
|
|
145
145
|
*/
|
|
146
146
|
sameWidth?: boolean;
|
|
147
|
+
/**
|
|
148
|
+
* Whether to enable floating-ui `flip` middleware.
|
|
149
|
+
* When `true`, the dropdown automatically flips to the opposite side
|
|
150
|
+
* (e.g. `bottom-start` → `top-start`) if it would overflow the viewport.
|
|
151
|
+
* Off by default to preserve existing placement behavior across consumers.
|
|
152
|
+
* @default false
|
|
153
|
+
*/
|
|
154
|
+
flip?: boolean;
|
|
147
155
|
/**
|
|
148
156
|
* If true, display a bar at the top of the dropdown action area.
|
|
149
157
|
* @default false
|
package/Dropdown/Dropdown.js
CHANGED
|
@@ -3,7 +3,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
|
|
|
3
3
|
import { useId, useMemo, useState, useRef, useCallback, useEffect, cloneElement, createElement } from 'react';
|
|
4
4
|
import cx from 'clsx';
|
|
5
5
|
import { dropdownClasses } from '@mezzanine-ui/core/dropdown/dropdown';
|
|
6
|
-
import { size, offset } from '@floating-ui/react-dom';
|
|
6
|
+
import { size, offset, flip } from '@floating-ui/react-dom';
|
|
7
7
|
import { MOTION_EASING, MOTION_DURATION } from '@mezzanine-ui/system/motion';
|
|
8
8
|
import { TransitionGroup } from 'react-transition-group';
|
|
9
9
|
import Button from '../Button/Button.js';
|
|
@@ -72,7 +72,7 @@ function getElementRef(element) {
|
|
|
72
72
|
* @see {@link AutoComplete} 具備自動補全功能的輸入元件
|
|
73
73
|
*/
|
|
74
74
|
function Dropdown(props) {
|
|
75
|
-
const { activeIndex: activeIndexProp, keyboardActiveIndex: keyboardActiveIndexProp, id, children, options = [], type = 'default', toggleCheckedOnClick, maxHeight, minWidth, disabled = false, showDropdownActions = false, actionCancelText, actionConfirmText, actionText, actionClearText, actionCustomButtonProps, showActionShowTopBar, isMatchInputValue = false, inputPosition = 'outside', placement = 'bottom-start', customWidth, sameWidth = false, listboxId: listboxIdProp, listboxLabel, onClose, onOpen, open: openProp, onVisibilityChange, onSelect, onActionConfirm, onActionCancel, onActionCustom, onActionClear, onItemHover, zIndex, status, loadingText, emptyText, emptyIcon, loadingPosition = 'full', followText: followTextProp, globalPortal = true, onReachBottom, onLeaveBottom, onScroll, mode, value, scrollbarDefer, scrollbarDisabled, scrollbarMaxWidth, scrollbarOptions, } = props;
|
|
75
|
+
const { activeIndex: activeIndexProp, keyboardActiveIndex: keyboardActiveIndexProp, id, children, options = [], type = 'default', toggleCheckedOnClick, maxHeight, minWidth, disabled = false, showDropdownActions = false, actionCancelText, actionConfirmText, actionText, actionClearText, actionCustomButtonProps, showActionShowTopBar, isMatchInputValue = false, inputPosition = 'outside', placement = 'bottom-start', customWidth, sameWidth = false, flip: flip$1 = false, listboxId: listboxIdProp, listboxLabel, onClose, onOpen, open: openProp, onVisibilityChange, onSelect, onActionConfirm, onActionCancel, onActionCustom, onActionClear, onItemHover, zIndex, status, loadingText, emptyText, emptyIcon, loadingPosition = 'full', followText: followTextProp, globalPortal = true, onReachBottom, onLeaveBottom, onScroll, mode, value, scrollbarDefer, scrollbarDisabled, scrollbarMaxWidth, scrollbarOptions, } = props;
|
|
76
76
|
const isInline = inputPosition === 'inside';
|
|
77
77
|
const inputId = useId();
|
|
78
78
|
const defaultListboxId = `${inputId}-listbox`;
|
|
@@ -221,6 +221,14 @@ function Dropdown(props) {
|
|
|
221
221
|
const offsetMiddleware = useMemo(() => {
|
|
222
222
|
return offset({ mainAxis: 4 });
|
|
223
223
|
}, []);
|
|
224
|
+
const flipMiddleware = useMemo(() => {
|
|
225
|
+
if (!flip$1)
|
|
226
|
+
return null;
|
|
227
|
+
return flip({
|
|
228
|
+
fallbackStrategy: 'bestFit',
|
|
229
|
+
padding: 8,
|
|
230
|
+
});
|
|
231
|
+
}, [flip$1]);
|
|
224
232
|
// Set z-index for popper only when explicitly provided via the `zIndex` prop.
|
|
225
233
|
// When not provided, do NOT apply any inline z-index so that elements inside
|
|
226
234
|
// the portal stack purely by DOM order — this ensures Modals opened from
|
|
@@ -560,6 +568,7 @@ function Dropdown(props) {
|
|
|
560
568
|
placement: popoverPlacement,
|
|
561
569
|
middleware: [
|
|
562
570
|
offsetMiddleware,
|
|
571
|
+
...(flipMiddleware ? [flipMiddleware] : []),
|
|
563
572
|
...(zIndexMiddleware ? [zIndexMiddleware] : []),
|
|
564
573
|
...(customWidthMiddleware ? [customWidthMiddleware] : []),
|
|
565
574
|
...(sameWidthMiddleware ? [sameWidthMiddleware] : []),
|
|
@@ -25,7 +25,7 @@ const PaginationPageSize = forwardRef((props, ref) => {
|
|
|
25
25
|
onChange === null || onChange === void 0 ? void 0 : onChange(Number(option.id));
|
|
26
26
|
setOpen(false);
|
|
27
27
|
};
|
|
28
|
-
return (jsxs("div", { ...rest, ref: ref, className: cx(paginationPageSizeClasses.host, className), children: [label ? (jsx(Typography, { component: "div", ellipsis: true, variant: "label-primary", children: label })) : null, jsx(Dropdown, { disabled: disabled, minWidth: 0, onSelect: dropDownOnSelect, onVisibilityChange: setOpen, open: open, options: selectOptions, sameWidth: true, value: currentValue === null || currentValue === void 0 ? void 0 : currentValue.id, children: jsx(SelectTrigger, { className: paginationPageSizeClasses.select, disabled: disabled, size: "sub", value: currentValue }) })] }));
|
|
28
|
+
return (jsxs("div", { ...rest, ref: ref, className: cx(paginationPageSizeClasses.host, className), children: [label ? (jsx(Typography, { component: "div", ellipsis: true, variant: "label-primary", children: label })) : null, jsx(Dropdown, { disabled: disabled, flip: true, minWidth: 0, onSelect: dropDownOnSelect, onVisibilityChange: setOpen, open: open, options: selectOptions, sameWidth: true, value: currentValue === null || currentValue === void 0 ? void 0 : currentValue.id, children: jsx(SelectTrigger, { className: paginationPageSizeClasses.select, disabled: disabled, size: "sub", value: currentValue }) })] }));
|
|
29
29
|
});
|
|
30
30
|
|
|
31
31
|
export { PaginationPageSize as default };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mezzanine-ui/react",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.2.0",
|
|
4
4
|
"description": "React components for mezzanine-ui",
|
|
5
5
|
"author": "Mezzanine",
|
|
6
6
|
"repository": {
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
"@floating-ui/dom": "^1.7.4",
|
|
33
33
|
"@floating-ui/react-dom": "^2.1.6",
|
|
34
34
|
"@hello-pangea/dnd": "^18.0.1",
|
|
35
|
-
"@mezzanine-ui/core": "1.0
|
|
35
|
+
"@mezzanine-ui/core": "1.1.0",
|
|
36
36
|
"@mezzanine-ui/icons": "1.0.2",
|
|
37
37
|
"@mezzanine-ui/system": "1.0.2",
|
|
38
38
|
"@tanstack/react-virtual": "^3.13.13",
|
|
@@ -46,6 +46,7 @@
|
|
|
46
46
|
"tslib": "^2.8.1"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
|
+
"@js-temporal/polyfill": "^0.5.1",
|
|
49
50
|
"@types/lodash": "^4.17.20",
|
|
50
51
|
"@types/moment": "^2.13.0",
|
|
51
52
|
"@types/react": "^19.2.2",
|
|
@@ -56,5 +57,6 @@
|
|
|
56
57
|
"moment": "^2.30.1",
|
|
57
58
|
"react": "^19.2.0",
|
|
58
59
|
"react-dom": "^19.2.0"
|
|
59
|
-
}
|
|
60
|
+
},
|
|
61
|
+
"gitHead": "f5fa136dac936a0debafff9ea5a3815ff0b5c040"
|
|
60
62
|
}
|
package/temporal.d.ts
ADDED
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Temporal-specific entry point for Mezzanine UI React.
|
|
3
|
+
* Import from this path to use the JS-native Temporal API without loading
|
|
4
|
+
* any other date library (moment / dayjs / luxon).
|
|
5
|
+
*
|
|
6
|
+
* Runtime requirement: `globalThis.Temporal` must be available **on the
|
|
7
|
+
* client** before any import of `CalendarMethodsTemporal`. On runtimes that
|
|
8
|
+
* lack native support (Safari, Node 22), install `@js-temporal/polyfill` as
|
|
9
|
+
* a peer dependency and register it from a Client Component side-effect.
|
|
10
|
+
*
|
|
11
|
+
* @example Vite / CRA — register at the client entry
|
|
12
|
+
* ```tsx
|
|
13
|
+
* // main.tsx
|
|
14
|
+
* import { Temporal } from '@js-temporal/polyfill';
|
|
15
|
+
* (globalThis as { Temporal?: unknown }).Temporal = Temporal;
|
|
16
|
+
*
|
|
17
|
+
* import { CalendarConfigProviderTemporal, CalendarLocale } from '@mezzanine-ui/react/temporal';
|
|
18
|
+
* ```
|
|
19
|
+
*
|
|
20
|
+
* @example Next.js App Router — Server Component layouts cannot register
|
|
21
|
+
* the polyfill for the browser, so wrap it in a Client Component module:
|
|
22
|
+
* ```tsx
|
|
23
|
+
* // app/temporal-polyfill.tsx
|
|
24
|
+
* 'use client';
|
|
25
|
+
* import { Temporal } from '@js-temporal/polyfill';
|
|
26
|
+
* (globalThis as { Temporal?: unknown }).Temporal = Temporal;
|
|
27
|
+
* export function TemporalPolyfill() { return null; }
|
|
28
|
+
*
|
|
29
|
+
* // app/layout.tsx
|
|
30
|
+
* import { TemporalPolyfill } from './temporal-polyfill';
|
|
31
|
+
* import { CalendarConfigProviderTemporal, CalendarLocale } from '@mezzanine-ui/react/temporal';
|
|
32
|
+
*
|
|
33
|
+
* export default function RootLayout({ children }) {
|
|
34
|
+
* return (
|
|
35
|
+
* <html><body>
|
|
36
|
+
* <TemporalPolyfill />
|
|
37
|
+
* <CalendarConfigProviderTemporal locale={CalendarLocale.ZH_TW}>
|
|
38
|
+
* {children}
|
|
39
|
+
* </CalendarConfigProviderTemporal>
|
|
40
|
+
* </body></html>
|
|
41
|
+
* );
|
|
42
|
+
* }
|
|
43
|
+
* ```
|
|
44
|
+
*/
|
|
45
|
+
export { CalendarLocale } from '@mezzanine-ui/core/calendar';
|
|
46
|
+
export type { CalendarLocaleValue } from '@mezzanine-ui/core/calendar';
|
|
47
|
+
export { default as CalendarConfigProviderTemporal } from './Calendar/CalendarConfigProviderTemporal';
|
|
48
|
+
export type { CalendarConfigProviderTemporalProps } from './Calendar/CalendarConfigProviderTemporal';
|
package/temporal.js
ADDED