@monimesl/dot-renderer-react 0.1.0-alpha.7 → 0.1.0-alpha.9
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 +39 -1
- package/dist/LICENSE-PHOSPHOR +21 -21
- package/dist/_virtual/_rolldown/runtime.js +14 -0
- package/dist/_virtual/builtin_esm-external-require-react.js +9 -0
- package/dist/color.js +105 -0
- package/dist/components/amount-input.d.ts +6 -0
- package/dist/components/amount-input.js +106 -0
- package/dist/components/button.d.ts +6 -0
- package/dist/components/button.js +42 -0
- package/dist/components/carousel.d.ts +6 -0
- package/dist/components/carousel.js +254 -0
- package/dist/components/chip.d.ts +6 -0
- package/dist/components/chip.js +41 -0
- package/dist/components/code-input.d.ts +6 -0
- package/dist/components/code-input.js +97 -0
- package/dist/components/detail-row.d.ts +6 -0
- package/dist/components/detail-row.js +40 -0
- package/dist/components/divider.d.ts +6 -0
- package/dist/components/divider.js +18 -0
- package/dist/components/empty-state.d.ts +6 -0
- package/dist/components/empty-state.js +66 -0
- package/dist/components/feedback.d.ts +8 -0
- package/dist/components/feedback.js +85 -0
- package/dist/components/field-box.js +44 -0
- package/dist/components/field.js +43 -0
- package/dist/components/footer.d.ts +6 -0
- package/dist/components/footer.js +24 -0
- package/dist/components/grid.d.ts +7 -0
- package/dist/components/grid.js +98 -0
- package/dist/components/icon-artwork.js +74 -0
- package/dist/components/icon.d.ts +6 -0
- package/dist/components/icon.js +40 -0
- package/dist/components/image.d.ts +6 -0
- package/dist/components/image.js +40 -0
- package/dist/components/index.d.ts +30 -0
- package/dist/components/index.js +72 -0
- package/dist/components/input.d.ts +6 -0
- package/dist/components/input.js +86 -0
- package/dist/components/link.d.ts +6 -0
- package/dist/components/link.js +39 -0
- package/dist/components/list.d.ts +7 -0
- package/dist/components/list.js +143 -0
- package/dist/components/option-place.js +9 -0
- package/dist/components/option.d.ts +6 -0
- package/dist/components/option.js +43 -0
- package/dist/components/padding.d.ts +2 -0
- package/dist/components/padding.js +27 -0
- package/dist/components/pressable.js +17 -0
- package/dist/components/qr-code.d.ts +6 -0
- package/dist/components/qr-code.js +58 -0
- package/dist/components/scroll.d.ts +6 -0
- package/dist/components/scroll.js +55 -0
- package/dist/components/select.d.ts +6 -0
- package/dist/components/select.js +92 -0
- package/dist/components/sheet.d.ts +8 -0
- package/dist/components/sheet.js +105 -0
- package/dist/components/skeleton.d.ts +6 -0
- package/dist/components/skeleton.js +55 -0
- package/dist/components/spinner.d.ts +6 -0
- package/dist/components/spinner.js +48 -0
- package/dist/components/tabs.d.ts +7 -0
- package/dist/components/tabs.js +91 -0
- package/dist/components/text-area.d.ts +6 -0
- package/dist/components/text-area.js +42 -0
- package/dist/components/text.d.ts +6 -0
- package/dist/components/text.js +46 -0
- package/dist/components/toast.d.ts +6 -0
- package/dist/components/toast.js +56 -0
- package/dist/components/toggles.d.ts +9 -0
- package/dist/components/toggles.js +149 -0
- package/dist/components/tokens.js +37 -0
- package/dist/components/tones.js +24 -0
- package/dist/components/typed-text.js +28 -0
- package/dist/components/view.d.ts +6 -0
- package/dist/components/view.js +51 -0
- package/dist/index.d.ts +35 -64
- package/dist/index.js +32 -22636
- package/dist/page-root.d.ts +2 -0
- package/dist/page-root.js +20 -0
- package/dist/portal.js +8 -0
- package/dist/renderer.d.ts +17 -0
- package/dist/renderer.js +33 -0
- package/dist/root.d.ts +10 -0
- package/dist/root.js +51 -0
- package/dist/styles.css +95 -1
- package/dist/theme.d.ts +25 -0
- package/dist/theme.js +84 -0
- package/dist/types.d.ts +7 -0
- package/dist/vendor/@base-ui/react/checkbox/indicator/CheckboxIndicator.js +51 -0
- package/dist/vendor/@base-ui/react/checkbox/root/CheckboxRoot.js +265 -0
- package/dist/vendor/@base-ui/react/checkbox/root/CheckboxRootContext.js +13 -0
- package/dist/vendor/@base-ui/react/checkbox/root/CheckboxRootDataAttributes.js +11 -0
- package/dist/vendor/@base-ui/react/checkbox/utils/getCheckboxStateAttributesMapping.js +15 -0
- package/dist/vendor/@base-ui/react/checkbox-group/CheckboxGroupContext.js +10 -0
- package/dist/vendor/@base-ui/react/dialog/backdrop/DialogBackdrop.js +40 -0
- package/dist/vendor/@base-ui/react/dialog/close/DialogClose.js +39 -0
- package/dist/vendor/@base-ui/react/dialog/popup/DialogPopup.js +92 -0
- package/dist/vendor/@base-ui/react/dialog/popup/DialogPopupCssVars.js +8 -0
- package/dist/vendor/@base-ui/react/dialog/popup/DialogPopupDataAttributes.js +7 -0
- package/dist/vendor/@base-ui/react/dialog/portal/DialogPortal.js +38 -0
- package/dist/vendor/@base-ui/react/dialog/portal/DialogPortalContext.js +13 -0
- package/dist/vendor/@base-ui/react/dialog/root/DialogRoot.js +16 -0
- package/dist/vendor/@base-ui/react/dialog/root/DialogRootContext.js +13 -0
- package/dist/vendor/@base-ui/react/dialog/root/useDialogRoot.js +77 -0
- package/dist/vendor/@base-ui/react/dialog/root/useRenderDialogRoot.js +65 -0
- package/dist/vendor/@base-ui/react/dialog/store/DialogStore.js +70 -0
- package/dist/vendor/@base-ui/react/dialog/title/DialogTitle.js +25 -0
- package/dist/vendor/@base-ui/react/dialog/utils/stateAttributesMapping.js +17 -0
- package/dist/vendor/@base-ui/react/field/control/FieldControlDataAttributes.js +11 -0
- package/dist/vendor/@base-ui/react/field/item/FieldItemContext.js +10 -0
- package/dist/vendor/@base-ui/react/field/root/useFieldValidation.js +18 -0
- package/dist/vendor/@base-ui/react/fieldset/root/FieldsetRootContext.js +13 -0
- package/dist/vendor/@base-ui/react/floating-ui-react/components/FloatingFocusManager.js +477 -0
- package/dist/vendor/@base-ui/react/floating-ui-react/components/FloatingPortal.js +165 -0
- package/dist/vendor/@base-ui/react/floating-ui-react/components/FloatingRootStore.js +65 -0
- package/dist/vendor/@base-ui/react/floating-ui-react/components/FloatingTree.js +22 -0
- package/dist/vendor/@base-ui/react/floating-ui-react/hooks/useDismiss.js +373 -0
- package/dist/vendor/@base-ui/react/floating-ui-react/hooks/useSyncedFloatingRootContext.js +58 -0
- package/dist/vendor/@base-ui/react/floating-ui-react/utils/composite.js +40 -0
- package/dist/vendor/@base-ui/react/floating-ui-react/utils/constants.js +5 -0
- package/dist/vendor/@base-ui/react/floating-ui-react/utils/createAttribute.js +6 -0
- package/dist/vendor/@base-ui/react/floating-ui-react/utils/createEventEmitter.js +18 -0
- package/dist/vendor/@base-ui/react/floating-ui-react/utils/element.js +26 -0
- package/dist/vendor/@base-ui/react/floating-ui-react/utils/enqueueFocus.js +25 -0
- package/dist/vendor/@base-ui/react/floating-ui-react/utils/event.js +25 -0
- package/dist/vendor/@base-ui/react/floating-ui-react/utils/markOthers.js +116 -0
- package/dist/vendor/@base-ui/react/floating-ui-react/utils/nodes.js +16 -0
- package/dist/vendor/@base-ui/react/floating-ui-react/utils/tabbable.js +135 -0
- package/dist/vendor/@base-ui/react/internals/TransitionStatusDataAttributes.js +11 -0
- package/dist/vendor/@base-ui/react/internals/composite/composite.js +89 -0
- package/dist/vendor/@base-ui/react/internals/composite/constants.js +4 -0
- package/dist/vendor/@base-ui/react/internals/composite/item/CompositeItem.js +21 -0
- package/dist/vendor/@base-ui/react/internals/composite/item/useCompositeItem.js +31 -0
- package/dist/vendor/@base-ui/react/internals/composite/list/CompositeList.js +180 -0
- package/dist/vendor/@base-ui/react/internals/composite/list/CompositeListContext.js +15 -0
- package/dist/vendor/@base-ui/react/internals/composite/list/useCompositeListItem.js +54 -0
- package/dist/vendor/@base-ui/react/internals/composite/root/CompositeRoot.js +62 -0
- package/dist/vendor/@base-ui/react/internals/composite/root/CompositeRootContext.js +13 -0
- package/dist/vendor/@base-ui/react/internals/composite/root/useCompositeRoot.js +170 -0
- package/dist/vendor/@base-ui/react/internals/constants.js +18 -0
- package/dist/vendor/@base-ui/react/internals/createBaseUIEventDetails.js +40 -0
- package/dist/vendor/@base-ui/react/internals/direction-context/DirectionContext.js +10 -0
- package/dist/vendor/@base-ui/react/internals/field-constants/constants.js +33 -0
- package/dist/vendor/@base-ui/react/internals/field-register-control/useRegisterFieldControl.js +40 -0
- package/dist/vendor/@base-ui/react/internals/field-root-context/FieldRootContext.js +45 -0
- package/dist/vendor/@base-ui/react/internals/form-context/FormContext.js +18 -0
- package/dist/vendor/@base-ui/react/internals/getStateAttributesProps.js +17 -0
- package/dist/vendor/@base-ui/react/internals/labelable-provider/LabelableContext.js +24 -0
- package/dist/vendor/@base-ui/react/internals/labelable-provider/useAriaLabelledBy.js +35 -0
- package/dist/vendor/@base-ui/react/internals/labelable-provider/useLabelableId.js +57 -0
- package/dist/vendor/@base-ui/react/internals/reason-parts.js +14 -0
- package/dist/vendor/@base-ui/react/internals/serializeValue.js +12 -0
- package/dist/vendor/@base-ui/react/internals/stateAttributesMapping.js +11 -0
- package/dist/vendor/@base-ui/react/internals/use-button/useButton.js +137 -0
- package/dist/vendor/@base-ui/react/internals/useAnimationsFinished.js +94 -0
- package/dist/vendor/@base-ui/react/internals/useBaseUiId.js +13 -0
- package/dist/vendor/@base-ui/react/internals/useOpenChangeComplete.js +28 -0
- package/dist/vendor/@base-ui/react/internals/useRenderElement.js +109 -0
- package/dist/vendor/@base-ui/react/internals/useTransitionStatus.js +70 -0
- package/dist/vendor/@base-ui/react/internals/useValueChanged.js +15 -0
- package/dist/vendor/@base-ui/react/merge-props/mergeProps.js +153 -0
- package/dist/vendor/@base-ui/react/radio/indicator/RadioIndicator.js +46 -0
- package/dist/vendor/@base-ui/react/radio/root/RadioRoot.js +179 -0
- package/dist/vendor/@base-ui/react/radio/root/RadioRootContext.js +13 -0
- package/dist/vendor/@base-ui/react/radio/root/RadioRootDataAttributes.js +11 -0
- package/dist/vendor/@base-ui/react/radio/utils/stateAttributesMapping.js +14 -0
- package/dist/vendor/@base-ui/react/radio-group/RadioGroup.js +170 -0
- package/dist/vendor/@base-ui/react/radio-group/RadioGroupContext.js +10 -0
- package/dist/vendor/@base-ui/react/switch/root/SwitchRoot.js +170 -0
- package/dist/vendor/@base-ui/react/switch/root/SwitchRootContext.js +13 -0
- package/dist/vendor/@base-ui/react/switch/root/SwitchRootDataAttributes.js +11 -0
- package/dist/vendor/@base-ui/react/switch/stateAttributesMapping.js +12 -0
- package/dist/vendor/@base-ui/react/switch/thumb/SwitchThumb.js +25 -0
- package/dist/vendor/@base-ui/react/tabs/list/TabsList.js +98 -0
- package/dist/vendor/@base-ui/react/tabs/list/TabsListContext.js +13 -0
- package/dist/vendor/@base-ui/react/tabs/root/TabsRoot.js +213 -0
- package/dist/vendor/@base-ui/react/tabs/root/TabsRootContext.js +16 -0
- package/dist/vendor/@base-ui/react/tabs/root/TabsRootDataAttributes.js +8 -0
- package/dist/vendor/@base-ui/react/tabs/root/stateAttributesMapping.js +5 -0
- package/dist/vendor/@base-ui/react/tabs/tab/TabsTab.js +137 -0
- package/dist/vendor/@base-ui/react/utils/CommonPopupDataAttributes.js +24 -0
- package/dist/vendor/@base-ui/react/utils/CommonTriggerDataAttributes.js +11 -0
- package/dist/vendor/@base-ui/react/utils/FocusGuard.js +32 -0
- package/dist/vendor/@base-ui/react/utils/InternalBackdrop.js +30 -0
- package/dist/vendor/@base-ui/react/utils/dispatchClickWithModifiers.js +25 -0
- package/dist/vendor/@base-ui/react/utils/popupStateMapping.js +22 -0
- package/dist/vendor/@base-ui/react/utils/popups/popupStoreUtils.js +247 -0
- package/dist/vendor/@base-ui/react/utils/popups/popupTriggerMap.js +96 -0
- package/dist/vendor/@base-ui/react/utils/popups/store.js +94 -0
- package/dist/vendor/@base-ui/react/utils/resolveClassName.js +13 -0
- package/dist/vendor/@base-ui/react/utils/resolveRef.js +11 -0
- package/dist/vendor/@base-ui/react/utils/resolveStyle.js +13 -0
- package/dist/vendor/@base-ui/react/utils/useFocusableWhenDisabled.js +30 -0
- package/dist/vendor/@base-ui/utils/addEventListener.js +12 -0
- package/dist/vendor/@base-ui/utils/createLogOnce.js +20 -0
- package/dist/vendor/@base-ui/utils/empty.js +6 -0
- package/dist/vendor/@base-ui/utils/error.js +5 -0
- package/dist/vendor/@base-ui/utils/fastHooks.js +68 -0
- package/dist/vendor/@base-ui/utils/formatErrorMessage.js +27 -0
- package/dist/vendor/@base-ui/utils/getDefaultFormSubmitter.js +25 -0
- package/dist/vendor/@base-ui/utils/getReactElementRef.js +14 -0
- package/dist/vendor/@base-ui/utils/inertValue.js +8 -0
- package/dist/vendor/@base-ui/utils/isElementDisabled.js +6 -0
- package/dist/vendor/@base-ui/utils/mergeCleanups.js +14 -0
- package/dist/vendor/@base-ui/utils/mergeObjects.js +11 -0
- package/dist/vendor/@base-ui/utils/owner.js +7 -0
- package/dist/vendor/@base-ui/utils/platform/engine.js +8 -0
- package/dist/vendor/@base-ui/utils/platform/env.js +6 -0
- package/dist/vendor/@base-ui/utils/platform/os.js +15 -0
- package/dist/vendor/@base-ui/utils/platform/screen-reader.js +9 -0
- package/dist/vendor/@base-ui/utils/platform/shared.js +36 -0
- package/dist/vendor/@base-ui/utils/reactVersion.js +8 -0
- package/dist/vendor/@base-ui/utils/safeReact.js +13 -0
- package/dist/vendor/@base-ui/utils/shadowDom.js +26 -0
- package/dist/vendor/@base-ui/utils/store/ReactStore.js +181 -0
- package/dist/vendor/@base-ui/utils/store/Store.js +102 -0
- package/dist/vendor/@base-ui/utils/store/useStore.js +97 -0
- package/dist/vendor/@base-ui/utils/useAnimationFrame.js +87 -0
- package/dist/vendor/@base-ui/utils/useControlled.js +52 -0
- package/dist/vendor/@base-ui/utils/useId.js +32 -0
- package/dist/vendor/@base-ui/utils/useIsoLayoutEffect.js +7 -0
- package/dist/vendor/@base-ui/utils/useMergedRefs.js +87 -0
- package/dist/vendor/@base-ui/utils/useOnMount.js +12 -0
- package/dist/vendor/@base-ui/utils/useRefWithInit.js +18 -0
- package/dist/vendor/@base-ui/utils/useScrollLock.js +206 -0
- package/dist/vendor/@base-ui/utils/useStableCallback.js +38 -0
- package/dist/vendor/@base-ui/utils/useTimeout.js +43 -0
- package/dist/vendor/@base-ui/utils/useValueAsRef.js +27 -0
- package/dist/vendor/@base-ui/utils/visuallyHidden.js +23 -0
- package/dist/vendor/@base-ui/utils/warn.js +5 -0
- package/dist/vendor/@floating-ui/utils/dist/floating-ui.utils.dom.js +49 -0
- package/dist/vendor/uqr/dist/index.js +858 -0
- package/dist/vendor/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.js +74 -0
- package/dist/vendor/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.production.js +77 -0
- package/dist/vendor/use-sync-external-store/cjs/use-sync-external-store-shim.development.js +69 -0
- package/dist/vendor/use-sync-external-store/cjs/use-sync-external-store-shim.production.js +64 -0
- package/dist/vendor/use-sync-external-store/shim/index.js +11 -0
- package/dist/vendor/use-sync-external-store/shim/with-selector.js +11 -0
- package/package.json +8 -14
- package/dist/garra-versions.json +0 -7
package/dist/theme.js
ADDED
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
import { contrast, darken } from "./color.js";
|
|
2
|
+
import { createContext, useContext } from "react";
|
|
3
|
+
//#region src/theme.ts
|
|
4
|
+
const FONT_FAMILY = "system-ui, sans-serif";
|
|
5
|
+
const SHAPE_RADIUS = {
|
|
6
|
+
square: 0,
|
|
7
|
+
subtle: 4,
|
|
8
|
+
soft: 12,
|
|
9
|
+
rounded: 20
|
|
10
|
+
};
|
|
11
|
+
const DEFAULT_COLORS = {
|
|
12
|
+
light: {
|
|
13
|
+
primary: "#1c1c1e",
|
|
14
|
+
background: "#f2f2f2",
|
|
15
|
+
surface: "#ffffff",
|
|
16
|
+
text: "#111111",
|
|
17
|
+
subtle: "#8e8e93",
|
|
18
|
+
muted: "#e9e9eb",
|
|
19
|
+
border: "#e9e9eb",
|
|
20
|
+
info: "#0a64d6",
|
|
21
|
+
success: "#1a8a4a",
|
|
22
|
+
warning: "#b25e00",
|
|
23
|
+
danger: "#d0312d"
|
|
24
|
+
},
|
|
25
|
+
dark: {
|
|
26
|
+
primary: "#f5f5f5",
|
|
27
|
+
background: "#121212",
|
|
28
|
+
surface: "#1e1e1e",
|
|
29
|
+
text: "#f5f5f5",
|
|
30
|
+
subtle: "#8e8e93",
|
|
31
|
+
muted: "#2c2c2e",
|
|
32
|
+
border: "#2a2a2c",
|
|
33
|
+
info: "#4c9dff",
|
|
34
|
+
success: "#3ecf72",
|
|
35
|
+
warning: "#ffb340",
|
|
36
|
+
danger: "#ff6961"
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
const MOST_DARKENING = 15;
|
|
40
|
+
function resolveTheme(theme, systemScheme) {
|
|
41
|
+
const scheme = !theme.scheme || theme.scheme === "system" ? systemScheme : theme.scheme;
|
|
42
|
+
const defaults = DEFAULT_COLORS[scheme];
|
|
43
|
+
const colors = theme.colors ?? {};
|
|
44
|
+
const pick = (color, fallback) => color?.[scheme] ?? fallback;
|
|
45
|
+
const shape = theme.shape ?? "soft";
|
|
46
|
+
const surface = pick(colors.surface, defaults.surface);
|
|
47
|
+
const text = pick(colors.text, defaults.text);
|
|
48
|
+
const primary = pick(colors.primary, defaults.primary);
|
|
49
|
+
return {
|
|
50
|
+
scheme,
|
|
51
|
+
colors: {
|
|
52
|
+
...defaults,
|
|
53
|
+
...primaryAndOnPrimary(primary, surface, text, scheme),
|
|
54
|
+
background: pick(colors.background, defaults.background),
|
|
55
|
+
surface,
|
|
56
|
+
text
|
|
57
|
+
},
|
|
58
|
+
shape,
|
|
59
|
+
radius: SHAPE_RADIUS[shape]
|
|
60
|
+
};
|
|
61
|
+
}
|
|
62
|
+
function primaryAndOnPrimary(primary, surface, text, scheme) {
|
|
63
|
+
if (contrast(primary, surface) >= 4.5) return {
|
|
64
|
+
primary,
|
|
65
|
+
onPrimary: surface
|
|
66
|
+
};
|
|
67
|
+
if (scheme === "light") for (let points = .5; points <= MOST_DARKENING; points += .5) {
|
|
68
|
+
const darker = darken(primary, points);
|
|
69
|
+
if (contrast(darker, surface) >= 4.5) return {
|
|
70
|
+
primary: darker,
|
|
71
|
+
onPrimary: surface
|
|
72
|
+
};
|
|
73
|
+
}
|
|
74
|
+
return {
|
|
75
|
+
primary,
|
|
76
|
+
onPrimary: contrast(primary, text) > contrast(primary, surface) ? text : surface
|
|
77
|
+
};
|
|
78
|
+
}
|
|
79
|
+
const ThemeContext = createContext(resolveTheme({}, "light"));
|
|
80
|
+
function useTheme() {
|
|
81
|
+
return useContext(ThemeContext);
|
|
82
|
+
}
|
|
83
|
+
//#endregion
|
|
84
|
+
export { FONT_FAMILY, ThemeContext, resolveTheme, useTheme };
|
package/dist/types.d.ts
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { BuiltinComponents, ComponentManifest, PropsOf } from "@monimesl/dot-core";
|
|
2
|
+
import { ComponentType, ReactNode } from "react";
|
|
3
|
+
//#region src/types.d.ts
|
|
4
|
+
export type ReactComponent<M extends ComponentManifest> = ComponentType<PropsOf<M, ReactNode>>;
|
|
5
|
+
export type ReactComponents<Manifests extends Record<string, ComponentManifest>> = { readonly [K in keyof Manifests]: ReactComponent<Manifests[K]>; };
|
|
6
|
+
export type BuiltinReactComponents = ReactComponents<BuiltinComponents>;
|
|
7
|
+
//#endregion
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { useRenderElement } from "../../internals/useRenderElement.js";
|
|
3
|
+
import { transitionStatusMapping } from "../../internals/stateAttributesMapping.js";
|
|
4
|
+
import { useTransitionStatus } from "../../internals/useTransitionStatus.js";
|
|
5
|
+
import { useOpenChangeComplete } from "../../internals/useOpenChangeComplete.js";
|
|
6
|
+
import { getCheckboxStateAttributesMapping } from "../utils/getCheckboxStateAttributesMapping.js";
|
|
7
|
+
import { useCheckboxRootContext } from "../root/CheckboxRootContext.js";
|
|
8
|
+
import * as React from "react";
|
|
9
|
+
//#region ../../../node_modules/.pnpm/@base-ui+react@1.8.0_@date-fns+tz@1.5.0_@types+react@19.3.0_date-fns@4.4.0_react-dom@19.3.0_react@19.3.0__react@19.3.0/node_modules/@base-ui/react/checkbox/indicator/CheckboxIndicator.mjs
|
|
10
|
+
/**
|
|
11
|
+
* Indicates whether the checkbox is ticked.
|
|
12
|
+
* Renders a `<span>` element.
|
|
13
|
+
*
|
|
14
|
+
* Documentation: [Base UI Checkbox](https://base-ui.com/react/components/checkbox)
|
|
15
|
+
*/
|
|
16
|
+
const CheckboxIndicator = /*#__PURE__*/ React.forwardRef(function CheckboxIndicator(componentProps, forwardedRef) {
|
|
17
|
+
const { render, className, style, keepMounted = false, ...elementProps } = componentProps;
|
|
18
|
+
const rootState = useCheckboxRootContext();
|
|
19
|
+
const rendered = rootState.checked || rootState.indeterminate;
|
|
20
|
+
const { mounted, transitionStatus, setMounted } = useTransitionStatus(rendered);
|
|
21
|
+
const indicatorRef = React.useRef(null);
|
|
22
|
+
const state = {
|
|
23
|
+
...rootState,
|
|
24
|
+
transitionStatus
|
|
25
|
+
};
|
|
26
|
+
useOpenChangeComplete({
|
|
27
|
+
batch: true,
|
|
28
|
+
enabled: !rendered,
|
|
29
|
+
open: rendered,
|
|
30
|
+
ref: indicatorRef,
|
|
31
|
+
onComplete() {
|
|
32
|
+
if (!rendered) setMounted(false);
|
|
33
|
+
}
|
|
34
|
+
});
|
|
35
|
+
const stateAttributesMapping = {
|
|
36
|
+
...getCheckboxStateAttributesMapping(rootState),
|
|
37
|
+
...transitionStatusMapping
|
|
38
|
+
};
|
|
39
|
+
const shouldRender = keepMounted || mounted;
|
|
40
|
+
const element = useRenderElement("span", componentProps, {
|
|
41
|
+
ref: [forwardedRef, indicatorRef],
|
|
42
|
+
state,
|
|
43
|
+
stateAttributesMapping,
|
|
44
|
+
props: elementProps
|
|
45
|
+
});
|
|
46
|
+
if (!shouldRender) return null;
|
|
47
|
+
return element;
|
|
48
|
+
});
|
|
49
|
+
if (process.env.NODE_ENV !== "production") CheckboxIndicator.displayName = "CheckboxIndicator";
|
|
50
|
+
//#endregion
|
|
51
|
+
export { CheckboxIndicator };
|
|
@@ -0,0 +1,265 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { useMergedRefs } from "../../../utils/useMergedRefs.js";
|
|
3
|
+
import { EMPTY_OBJECT } from "../../../utils/empty.js";
|
|
4
|
+
import { mergeProps } from "../../merge-props/mergeProps.js";
|
|
5
|
+
import { useRenderElement } from "../../internals/useRenderElement.js";
|
|
6
|
+
import { getWindow } from "../../../../@floating-ui/utils/dist/floating-ui.utils.dom.js";
|
|
7
|
+
import { useIsoLayoutEffect } from "../../../utils/useIsoLayoutEffect.js";
|
|
8
|
+
import { dispatchClickWithModifiers } from "../../utils/dispatchClickWithModifiers.js";
|
|
9
|
+
import { useButton } from "../../internals/use-button/useButton.js";
|
|
10
|
+
import { none } from "../../internals/reason-parts.js";
|
|
11
|
+
import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
|
|
12
|
+
import { useBaseUiId } from "../../internals/useBaseUiId.js";
|
|
13
|
+
import { visuallyHidden, visuallyHiddenInput } from "../../../utils/visuallyHidden.js";
|
|
14
|
+
import { useValueChanged } from "../../internals/useValueChanged.js";
|
|
15
|
+
import { useControlled } from "../../../utils/useControlled.js";
|
|
16
|
+
import { getDefaultFormSubmitter } from "../../../utils/getDefaultFormSubmitter.js";
|
|
17
|
+
import { getCheckboxStateAttributesMapping } from "../utils/getCheckboxStateAttributesMapping.js";
|
|
18
|
+
import { useFieldRootContext } from "../../internals/field-root-context/FieldRootContext.js";
|
|
19
|
+
import { useRegisterFieldControl } from "../../internals/field-register-control/useRegisterFieldControl.js";
|
|
20
|
+
import { useFieldItemContext } from "../../field/item/FieldItemContext.js";
|
|
21
|
+
import { useFormContext } from "../../internals/form-context/FormContext.js";
|
|
22
|
+
import { useLabelableContext } from "../../internals/labelable-provider/LabelableContext.js";
|
|
23
|
+
import { useAriaLabelledBy } from "../../internals/labelable-provider/useAriaLabelledBy.js";
|
|
24
|
+
import { useLabelableId } from "../../internals/labelable-provider/useLabelableId.js";
|
|
25
|
+
import { useCheckboxGroupContext } from "../../checkbox-group/CheckboxGroupContext.js";
|
|
26
|
+
import { CheckboxRootContext } from "./CheckboxRootContext.js";
|
|
27
|
+
import * as React from "react";
|
|
28
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
29
|
+
//#region ../../../node_modules/.pnpm/@base-ui+react@1.8.0_@date-fns+tz@1.5.0_@types+react@19.3.0_date-fns@4.4.0_react-dom@19.3.0_react@19.3.0__react@19.3.0/node_modules/@base-ui/react/checkbox/root/CheckboxRoot.mjs
|
|
30
|
+
const PARENT_CHECKBOX = "data-parent";
|
|
31
|
+
/**
|
|
32
|
+
* Represents the checkbox itself.
|
|
33
|
+
* Renders a `<span>` element and a hidden `<input>` beside.
|
|
34
|
+
*
|
|
35
|
+
* Documentation: [Base UI Checkbox](https://base-ui.com/react/components/checkbox)
|
|
36
|
+
*/
|
|
37
|
+
const CheckboxRoot = /*#__PURE__*/ React.forwardRef(function CheckboxRoot(componentProps, forwardedRef) {
|
|
38
|
+
const { checked: checkedProp, className, defaultChecked = false, "aria-labelledby": ariaLabelledByProp, disabled: disabledProp = false, form, id: idProp, indeterminate = false, inputRef: inputRefProp, name: nameProp, onCheckedChange, parent = false, readOnly = false, render, required = false, uncheckedValue, value: valueProp, nativeButton = false, style, ...elementProps } = componentProps;
|
|
39
|
+
const { clearErrors } = useFormContext();
|
|
40
|
+
const { disabled: rootDisabled, name: fieldName, setDirty, setFilled, setFocused, setTouched, state: fieldState, validationMode, validityData, validation: localValidation } = useFieldRootContext();
|
|
41
|
+
const fieldItemContext = useFieldItemContext();
|
|
42
|
+
const { labelId, registerControlId, getDescriptionProps } = useLabelableContext();
|
|
43
|
+
const groupContext = useCheckboxGroupContext();
|
|
44
|
+
const parentContext = groupContext?.allValues === void 0 ? void 0 : groupContext.parent;
|
|
45
|
+
const isGroupedWithParent = parentContext !== void 0;
|
|
46
|
+
const disabled = rootDisabled || fieldItemContext.disabled || groupContext?.disabled || disabledProp;
|
|
47
|
+
const name = fieldName ?? nameProp;
|
|
48
|
+
const value = valueProp ?? name;
|
|
49
|
+
const id = useBaseUiId();
|
|
50
|
+
const ownsControlId = groupContext?.registerControlId !== registerControlId;
|
|
51
|
+
const controlId = useLabelableId({
|
|
52
|
+
id: idProp || void 0,
|
|
53
|
+
enabled: ownsControlId
|
|
54
|
+
});
|
|
55
|
+
const rootId = nativeButton ? controlId : id;
|
|
56
|
+
let groupProps = {};
|
|
57
|
+
if (isGroupedWithParent) {
|
|
58
|
+
if (parent) groupProps = parentContext.getParentProps();
|
|
59
|
+
else if (value !== void 0) groupProps = parentContext.getChildProps(value);
|
|
60
|
+
}
|
|
61
|
+
const { checked: groupChecked = checkedProp, indeterminate: groupIndeterminate = indeterminate, onCheckedChange: groupOnChange, ...otherGroupProps } = groupProps;
|
|
62
|
+
const groupValue = groupContext?.value;
|
|
63
|
+
const controlRef = React.useRef(null);
|
|
64
|
+
const { getButtonProps, buttonRef } = useButton({
|
|
65
|
+
disabled,
|
|
66
|
+
native: nativeButton
|
|
67
|
+
});
|
|
68
|
+
const validation = groupContext?.validation ?? localValidation;
|
|
69
|
+
const [checked, setCheckedState] = useControlled({
|
|
70
|
+
controlled: value !== void 0 && groupValue !== void 0 && !parent ? groupValue.includes(value) : groupChecked,
|
|
71
|
+
default: defaultChecked,
|
|
72
|
+
name: "Checkbox",
|
|
73
|
+
state: "checked"
|
|
74
|
+
});
|
|
75
|
+
const computedChecked = isGroupedWithParent ? Boolean(groupChecked) : checked;
|
|
76
|
+
const computedIndeterminate = isGroupedWithParent ? groupIndeterminate || indeterminate : indeterminate;
|
|
77
|
+
useRegisterFieldControl(controlRef, id, checked, void 0, !groupContext && !disabled, nameProp);
|
|
78
|
+
const registerChildId = parentContext?.registerChildId;
|
|
79
|
+
const inputRef = React.useRef(null);
|
|
80
|
+
const registerFieldInput = validation.registerInput;
|
|
81
|
+
const registeredInputValue = groupContext ? value : void 0;
|
|
82
|
+
const registerInput = React.useCallback((element) => registerFieldInput(element, {
|
|
83
|
+
controlRef,
|
|
84
|
+
value: registeredInputValue
|
|
85
|
+
}), [registerFieldInput, registeredInputValue]);
|
|
86
|
+
const mergedInputRef = useMergedRefs(inputRefProp, inputRef, parent ? void 0 : registerInput);
|
|
87
|
+
const ariaLabelledBy = useAriaLabelledBy(ariaLabelledByProp, labelId, inputRef, !nativeButton, controlId);
|
|
88
|
+
useIsoLayoutEffect(() => {
|
|
89
|
+
if (inputRef.current) inputRef.current.indeterminate = computedIndeterminate;
|
|
90
|
+
if (!groupContext) setFilled(checked);
|
|
91
|
+
}, [
|
|
92
|
+
checked,
|
|
93
|
+
computedIndeterminate,
|
|
94
|
+
groupContext,
|
|
95
|
+
setFilled
|
|
96
|
+
]);
|
|
97
|
+
useValueChanged(checked, () => {
|
|
98
|
+
if (groupContext) return;
|
|
99
|
+
clearErrors(name);
|
|
100
|
+
setDirty(checked !== validityData.initialValue);
|
|
101
|
+
validation.change(checked);
|
|
102
|
+
});
|
|
103
|
+
const inputProps = mergeProps({
|
|
104
|
+
checked,
|
|
105
|
+
disabled,
|
|
106
|
+
form,
|
|
107
|
+
name: parent ? void 0 : name,
|
|
108
|
+
id: nativeButton ? void 0 : controlId,
|
|
109
|
+
required,
|
|
110
|
+
ref: mergedInputRef,
|
|
111
|
+
style: name ? visuallyHiddenInput : visuallyHidden,
|
|
112
|
+
tabIndex: -1,
|
|
113
|
+
type: "checkbox",
|
|
114
|
+
"aria-hidden": true,
|
|
115
|
+
onChange(event) {
|
|
116
|
+
if (event.nativeEvent.defaultPrevented) return;
|
|
117
|
+
if (readOnly) {
|
|
118
|
+
event.preventDefault();
|
|
119
|
+
return;
|
|
120
|
+
}
|
|
121
|
+
const nextChecked = event.currentTarget.checked;
|
|
122
|
+
const details = createChangeEventDetails(none, event.nativeEvent);
|
|
123
|
+
onCheckedChange?.(nextChecked, details);
|
|
124
|
+
if (details.isCanceled) return;
|
|
125
|
+
groupOnChange?.(nextChecked, details);
|
|
126
|
+
if (details.isCanceled) return;
|
|
127
|
+
setCheckedState(nextChecked);
|
|
128
|
+
if (value !== void 0 && groupContext !== void 0 && !parent && !isGroupedWithParent) {
|
|
129
|
+
const nextGroupValue = nextChecked ? [...groupContext.value, value] : groupContext.value.filter((item) => item !== value);
|
|
130
|
+
groupContext.setValue(nextGroupValue, details);
|
|
131
|
+
}
|
|
132
|
+
},
|
|
133
|
+
onClick(event) {
|
|
134
|
+
event.stopPropagation();
|
|
135
|
+
},
|
|
136
|
+
onFocus() {
|
|
137
|
+
controlRef.current?.focus();
|
|
138
|
+
}
|
|
139
|
+
}, valueProp !== void 0 ? { value: (groupContext ? checked && valueProp : valueProp) || "" } : EMPTY_OBJECT, getDescriptionProps, (props) => validation.getValidationProps(disabled, props));
|
|
140
|
+
React.useEffect(() => {
|
|
141
|
+
if (!parentContext || value === void 0) return;
|
|
142
|
+
const disabledStates = parentContext.disabledStatesRef.current;
|
|
143
|
+
disabledStates.set(value, disabled);
|
|
144
|
+
return () => {
|
|
145
|
+
disabledStates.delete(value);
|
|
146
|
+
};
|
|
147
|
+
}, [
|
|
148
|
+
parentContext,
|
|
149
|
+
disabled,
|
|
150
|
+
value
|
|
151
|
+
]);
|
|
152
|
+
const state = React.useMemo(() => ({
|
|
153
|
+
...fieldState,
|
|
154
|
+
checked: computedChecked,
|
|
155
|
+
disabled,
|
|
156
|
+
readOnly,
|
|
157
|
+
required,
|
|
158
|
+
indeterminate: computedIndeterminate
|
|
159
|
+
}), [
|
|
160
|
+
fieldState,
|
|
161
|
+
computedChecked,
|
|
162
|
+
disabled,
|
|
163
|
+
readOnly,
|
|
164
|
+
required,
|
|
165
|
+
computedIndeterminate
|
|
166
|
+
]);
|
|
167
|
+
const stateAttributesMapping = getCheckboxStateAttributesMapping(state);
|
|
168
|
+
const element = useRenderElement("span", componentProps, {
|
|
169
|
+
state,
|
|
170
|
+
ref: [
|
|
171
|
+
buttonRef,
|
|
172
|
+
controlRef,
|
|
173
|
+
forwardedRef
|
|
174
|
+
],
|
|
175
|
+
props: [
|
|
176
|
+
{
|
|
177
|
+
id: rootId,
|
|
178
|
+
role: "checkbox",
|
|
179
|
+
"aria-checked": computedIndeterminate ? "mixed" : computedChecked,
|
|
180
|
+
"aria-readonly": readOnly || void 0,
|
|
181
|
+
"aria-required": required || void 0,
|
|
182
|
+
"aria-labelledby": ariaLabelledBy,
|
|
183
|
+
[PARENT_CHECKBOX]: parent ? "" : void 0,
|
|
184
|
+
onFocus() {
|
|
185
|
+
if (!disabled) setFocused(true);
|
|
186
|
+
},
|
|
187
|
+
onBlur() {
|
|
188
|
+
const inputEl = inputRef.current;
|
|
189
|
+
if (!inputEl) return;
|
|
190
|
+
setTouched(true);
|
|
191
|
+
setFocused(false);
|
|
192
|
+
if (validationMode === "onBlur") validation.commit(groupContext ? groupValue : inputEl.checked);
|
|
193
|
+
},
|
|
194
|
+
onKeyDown(event) {
|
|
195
|
+
if (event.key !== "Enter") return;
|
|
196
|
+
event.preventBaseUIHandler();
|
|
197
|
+
if (event.defaultPrevented) return;
|
|
198
|
+
const formToSubmit = inputRef.current?.form ?? null;
|
|
199
|
+
const currentTarget = event.currentTarget;
|
|
200
|
+
const nativeEvent = event.nativeEvent;
|
|
201
|
+
const originalPreventDefault = event.preventDefault;
|
|
202
|
+
const originalNativePreventDefault = nativeEvent.preventDefault;
|
|
203
|
+
let preventDefaultCalledAfterPropagation = false;
|
|
204
|
+
event.preventDefault = () => {
|
|
205
|
+
preventDefaultCalledAfterPropagation = true;
|
|
206
|
+
originalPreventDefault.call(event);
|
|
207
|
+
};
|
|
208
|
+
nativeEvent.preventDefault = () => {
|
|
209
|
+
preventDefaultCalledAfterPropagation = true;
|
|
210
|
+
originalNativePreventDefault.call(nativeEvent);
|
|
211
|
+
};
|
|
212
|
+
originalNativePreventDefault.call(nativeEvent);
|
|
213
|
+
getWindow(currentTarget).queueMicrotask(() => {
|
|
214
|
+
event.preventDefault = originalPreventDefault;
|
|
215
|
+
nativeEvent.preventDefault = originalNativePreventDefault;
|
|
216
|
+
if (!preventDefaultCalledAfterPropagation) getDefaultFormSubmitter(formToSubmit)?.click();
|
|
217
|
+
});
|
|
218
|
+
},
|
|
219
|
+
onClick(event) {
|
|
220
|
+
if (readOnly || disabled) return;
|
|
221
|
+
event.preventDefault();
|
|
222
|
+
const input = inputRef.current;
|
|
223
|
+
if (!input) return;
|
|
224
|
+
dispatchClickWithModifiers(input, event);
|
|
225
|
+
}
|
|
226
|
+
},
|
|
227
|
+
elementProps,
|
|
228
|
+
otherGroupProps,
|
|
229
|
+
getButtonProps,
|
|
230
|
+
getDescriptionProps,
|
|
231
|
+
(props) => validation.getValidationProps(disabled, props)
|
|
232
|
+
],
|
|
233
|
+
stateAttributesMapping
|
|
234
|
+
});
|
|
235
|
+
const renderedId = element.props.id;
|
|
236
|
+
useIsoLayoutEffect(() => {
|
|
237
|
+
if (!registerChildId || parent || value === void 0 || renderedId === void 0) return;
|
|
238
|
+
return registerChildId(value, renderedId);
|
|
239
|
+
}, [
|
|
240
|
+
registerChildId,
|
|
241
|
+
parent,
|
|
242
|
+
value,
|
|
243
|
+
renderedId
|
|
244
|
+
]);
|
|
245
|
+
return /*#__PURE__*/ jsxs(CheckboxRootContext.Provider, {
|
|
246
|
+
value: state,
|
|
247
|
+
children: [
|
|
248
|
+
element,
|
|
249
|
+
!checked && !groupContext && name && !parent && uncheckedValue !== void 0 && /*#__PURE__*/ jsx("input", {
|
|
250
|
+
type: "hidden",
|
|
251
|
+
form,
|
|
252
|
+
name,
|
|
253
|
+
value: uncheckedValue,
|
|
254
|
+
disabled
|
|
255
|
+
}),
|
|
256
|
+
/*#__PURE__*/ jsx("input", {
|
|
257
|
+
...inputProps,
|
|
258
|
+
suppressHydrationWarning: true
|
|
259
|
+
})
|
|
260
|
+
]
|
|
261
|
+
});
|
|
262
|
+
});
|
|
263
|
+
if (process.env.NODE_ENV !== "production") CheckboxRoot.displayName = "CheckboxRoot";
|
|
264
|
+
//#endregion
|
|
265
|
+
export { CheckboxRoot, PARENT_CHECKBOX };
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import formatErrorMessage from "../../../utils/formatErrorMessage.js";
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
//#region ../../../node_modules/.pnpm/@base-ui+react@1.8.0_@date-fns+tz@1.5.0_@types+react@19.3.0_date-fns@4.4.0_react-dom@19.3.0_react@19.3.0__react@19.3.0/node_modules/@base-ui/react/checkbox/root/CheckboxRootContext.mjs
|
|
5
|
+
const CheckboxRootContext = /*#__PURE__*/ React.createContext(void 0);
|
|
6
|
+
if (process.env.NODE_ENV !== "production") CheckboxRootContext.displayName = "CheckboxRootContext";
|
|
7
|
+
function useCheckboxRootContext() {
|
|
8
|
+
const context = React.useContext(CheckboxRootContext);
|
|
9
|
+
if (context === void 0) throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: CheckboxRootContext is missing. Checkbox parts must be placed within <Checkbox.Root>." : formatErrorMessage(14));
|
|
10
|
+
return context;
|
|
11
|
+
}
|
|
12
|
+
//#endregion
|
|
13
|
+
export { CheckboxRootContext, useCheckboxRootContext };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
//#region ../../../node_modules/.pnpm/@base-ui+react@1.8.0_@date-fns+tz@1.5.0_@types+react@19.3.0_date-fns@4.4.0_react-dom@19.3.0_react@19.3.0__react@19.3.0/node_modules/@base-ui/react/checkbox/root/CheckboxRootDataAttributes.mjs
|
|
2
|
+
/**
|
|
3
|
+
* Present when the checkbox is checked.
|
|
4
|
+
*/
|
|
5
|
+
const checked = "data-checked";
|
|
6
|
+
/**
|
|
7
|
+
* Present when the checkbox is not checked.
|
|
8
|
+
*/
|
|
9
|
+
const unchecked = "data-unchecked";
|
|
10
|
+
//#endregion
|
|
11
|
+
export { checked, unchecked };
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { fieldValidityMapping } from "../../internals/field-constants/constants.js";
|
|
2
|
+
import { checked, unchecked } from "../root/CheckboxRootDataAttributes.js";
|
|
3
|
+
//#region ../../../node_modules/.pnpm/@base-ui+react@1.8.0_@date-fns+tz@1.5.0_@types+react@19.3.0_date-fns@4.4.0_react-dom@19.3.0_react@19.3.0__react@19.3.0/node_modules/@base-ui/react/checkbox/utils/getCheckboxStateAttributesMapping.mjs
|
|
4
|
+
function getCheckboxStateAttributesMapping(state) {
|
|
5
|
+
return {
|
|
6
|
+
checked(value) {
|
|
7
|
+
if (state.indeterminate) return {};
|
|
8
|
+
if (value) return { [checked]: "" };
|
|
9
|
+
return { [unchecked]: "" };
|
|
10
|
+
},
|
|
11
|
+
...fieldValidityMapping
|
|
12
|
+
};
|
|
13
|
+
}
|
|
14
|
+
//#endregion
|
|
15
|
+
export { getCheckboxStateAttributesMapping };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
//#region ../../../node_modules/.pnpm/@base-ui+react@1.8.0_@date-fns+tz@1.5.0_@types+react@19.3.0_date-fns@4.4.0_react-dom@19.3.0_react@19.3.0__react@19.3.0/node_modules/@base-ui/react/checkbox-group/CheckboxGroupContext.mjs
|
|
4
|
+
const CheckboxGroupContext = /*#__PURE__*/ React.createContext(void 0);
|
|
5
|
+
if (process.env.NODE_ENV !== "production") CheckboxGroupContext.displayName = "CheckboxGroupContext";
|
|
6
|
+
function useCheckboxGroupContext() {
|
|
7
|
+
return React.useContext(CheckboxGroupContext);
|
|
8
|
+
}
|
|
9
|
+
//#endregion
|
|
10
|
+
export { CheckboxGroupContext, useCheckboxGroupContext };
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { useDialogRootContext } from "../root/DialogRootContext.js";
|
|
3
|
+
import { useRenderElement } from "../../internals/useRenderElement.js";
|
|
4
|
+
import { popupTransitionStateMapping } from "../../utils/popupStateMapping.js";
|
|
5
|
+
import * as React from "react";
|
|
6
|
+
//#region ../../../node_modules/.pnpm/@base-ui+react@1.8.0_@date-fns+tz@1.5.0_@types+react@19.3.0_date-fns@4.4.0_react-dom@19.3.0_react@19.3.0__react@19.3.0/node_modules/@base-ui/react/dialog/backdrop/DialogBackdrop.mjs
|
|
7
|
+
/**
|
|
8
|
+
* An overlay displayed beneath the popup.
|
|
9
|
+
* Renders a `<div>` element.
|
|
10
|
+
*
|
|
11
|
+
* Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
|
|
12
|
+
*/
|
|
13
|
+
const DialogBackdrop = /*#__PURE__*/ React.forwardRef(function DialogBackdrop(componentProps, forwardedRef) {
|
|
14
|
+
const { render, className, style, forceRender = false, ...elementProps } = componentProps;
|
|
15
|
+
const store = useDialogRootContext();
|
|
16
|
+
const open = store.useState("open");
|
|
17
|
+
const nested = store.useState("nested");
|
|
18
|
+
const mounted = store.useState("mounted");
|
|
19
|
+
const state = {
|
|
20
|
+
open,
|
|
21
|
+
transitionStatus: store.useState("transitionStatus")
|
|
22
|
+
};
|
|
23
|
+
return useRenderElement("div", componentProps, {
|
|
24
|
+
state,
|
|
25
|
+
ref: [store.context.backdropRef, forwardedRef],
|
|
26
|
+
stateAttributesMapping: popupTransitionStateMapping,
|
|
27
|
+
props: [{
|
|
28
|
+
role: "presentation",
|
|
29
|
+
hidden: !mounted,
|
|
30
|
+
style: {
|
|
31
|
+
userSelect: "none",
|
|
32
|
+
WebkitUserSelect: "none"
|
|
33
|
+
}
|
|
34
|
+
}, elementProps],
|
|
35
|
+
enabled: forceRender || !nested
|
|
36
|
+
});
|
|
37
|
+
});
|
|
38
|
+
if (process.env.NODE_ENV !== "production") DialogBackdrop.displayName = "DialogBackdrop";
|
|
39
|
+
//#endregion
|
|
40
|
+
export { DialogBackdrop };
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { useDialogRootContext } from "../root/DialogRootContext.js";
|
|
3
|
+
import { useRenderElement } from "../../internals/useRenderElement.js";
|
|
4
|
+
import { useButton } from "../../internals/use-button/useButton.js";
|
|
5
|
+
import { closePress } from "../../internals/reason-parts.js";
|
|
6
|
+
import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
|
|
7
|
+
import * as React from "react";
|
|
8
|
+
//#region ../../../node_modules/.pnpm/@base-ui+react@1.8.0_@date-fns+tz@1.5.0_@types+react@19.3.0_date-fns@4.4.0_react-dom@19.3.0_react@19.3.0__react@19.3.0/node_modules/@base-ui/react/dialog/close/DialogClose.mjs
|
|
9
|
+
/**
|
|
10
|
+
* A button that closes the dialog.
|
|
11
|
+
* Renders a `<button>` element.
|
|
12
|
+
*
|
|
13
|
+
* Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
|
|
14
|
+
*/
|
|
15
|
+
const DialogClose = /*#__PURE__*/ React.forwardRef(function DialogClose(componentProps, forwardedRef) {
|
|
16
|
+
const { render, className, style, disabled = false, nativeButton = true, ...elementProps } = componentProps;
|
|
17
|
+
const store = useDialogRootContext();
|
|
18
|
+
const open = store.useState("open");
|
|
19
|
+
const { getButtonProps, buttonRef } = useButton({
|
|
20
|
+
disabled,
|
|
21
|
+
native: nativeButton
|
|
22
|
+
});
|
|
23
|
+
const state = { disabled };
|
|
24
|
+
function handleClick(event) {
|
|
25
|
+
if (open) store.setOpen(false, createChangeEventDetails(closePress, event.nativeEvent));
|
|
26
|
+
}
|
|
27
|
+
return useRenderElement("button", componentProps, {
|
|
28
|
+
state,
|
|
29
|
+
ref: [forwardedRef, buttonRef],
|
|
30
|
+
props: [
|
|
31
|
+
{ onClick: handleClick },
|
|
32
|
+
elementProps,
|
|
33
|
+
getButtonProps
|
|
34
|
+
]
|
|
35
|
+
});
|
|
36
|
+
});
|
|
37
|
+
if (process.env.NODE_ENV !== "production") DialogClose.displayName = "DialogClose";
|
|
38
|
+
//#endregion
|
|
39
|
+
export { DialogClose };
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { useDialogRootContext } from "../root/DialogRootContext.js";
|
|
3
|
+
import { useRenderElement } from "../../internals/useRenderElement.js";
|
|
4
|
+
import { FloatingFocusManager } from "../../floating-ui-react/components/FloatingFocusManager.js";
|
|
5
|
+
import { useOpenChangeComplete } from "../../internals/useOpenChangeComplete.js";
|
|
6
|
+
import { FOCUSABLE_POPUP_PROPS, createDefaultInitialFocus } from "../../utils/popups/popupStoreUtils.js";
|
|
7
|
+
import { useDialogPortalContext } from "../portal/DialogPortalContext.js";
|
|
8
|
+
import { COMPOSITE_KEYS } from "../../internals/composite/composite.js";
|
|
9
|
+
import { nestedDialogs } from "./DialogPopupCssVars.js";
|
|
10
|
+
import { dialogStateAttributesMapping } from "../utils/stateAttributesMapping.js";
|
|
11
|
+
import * as React from "react";
|
|
12
|
+
import { jsx } from "react/jsx-runtime";
|
|
13
|
+
//#region ../../../node_modules/.pnpm/@base-ui+react@1.8.0_@date-fns+tz@1.5.0_@types+react@19.3.0_date-fns@4.4.0_react-dom@19.3.0_react@19.3.0__react@19.3.0/node_modules/@base-ui/react/dialog/popup/DialogPopup.mjs
|
|
14
|
+
/**
|
|
15
|
+
* A container for the dialog contents.
|
|
16
|
+
* Renders a `<div>` element.
|
|
17
|
+
*
|
|
18
|
+
* Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
|
|
19
|
+
*/
|
|
20
|
+
const DialogPopup = /*#__PURE__*/ React.forwardRef(function DialogPopup(componentProps, forwardedRef) {
|
|
21
|
+
const { render, className, style, finalFocus, initialFocus, ...elementProps } = componentProps;
|
|
22
|
+
const store = useDialogRootContext();
|
|
23
|
+
const descriptionElementId = store.useState("descriptionElementId");
|
|
24
|
+
const disablePointerDismissal = store.useState("disablePointerDismissal");
|
|
25
|
+
const floatingRootContext = store.useState("floatingRootContext");
|
|
26
|
+
const rootPopupProps = store.useState("popupProps");
|
|
27
|
+
const modal = store.useState("modal");
|
|
28
|
+
const mounted = store.useState("mounted");
|
|
29
|
+
const nested = store.useState("nested");
|
|
30
|
+
const nestedOpenDialogCount = store.useState("nestedOpenDialogCount");
|
|
31
|
+
const open = store.useState("open");
|
|
32
|
+
const openMethod = store.useState("openMethod");
|
|
33
|
+
const titleElementId = store.useState("titleElementId");
|
|
34
|
+
const transitionStatus = store.useState("transitionStatus");
|
|
35
|
+
const role = store.useState("role");
|
|
36
|
+
const floatingId = floatingRootContext.useState("floatingId");
|
|
37
|
+
useDialogPortalContext();
|
|
38
|
+
useOpenChangeComplete({
|
|
39
|
+
open,
|
|
40
|
+
ref: store.context.popupRef,
|
|
41
|
+
onComplete() {
|
|
42
|
+
if (open) store.context.onOpenChangeComplete?.(true);
|
|
43
|
+
}
|
|
44
|
+
});
|
|
45
|
+
const resolvedInitialFocus = initialFocus === void 0 ? createDefaultInitialFocus(store.context.popupRef) : initialFocus;
|
|
46
|
+
const nestedDialogOpen = nestedOpenDialogCount > 0;
|
|
47
|
+
const setPopupElement = store.useStateSetter("popupElement");
|
|
48
|
+
const element = useRenderElement("div", componentProps, {
|
|
49
|
+
state: {
|
|
50
|
+
open,
|
|
51
|
+
nested,
|
|
52
|
+
transitionStatus,
|
|
53
|
+
nestedDialogOpen
|
|
54
|
+
},
|
|
55
|
+
props: [
|
|
56
|
+
rootPopupProps,
|
|
57
|
+
{
|
|
58
|
+
id: floatingId,
|
|
59
|
+
"aria-labelledby": titleElementId,
|
|
60
|
+
"aria-describedby": descriptionElementId,
|
|
61
|
+
role,
|
|
62
|
+
...FOCUSABLE_POPUP_PROPS,
|
|
63
|
+
hidden: !mounted,
|
|
64
|
+
onKeyDown(event) {
|
|
65
|
+
if (COMPOSITE_KEYS.has(event.key)) event.stopPropagation();
|
|
66
|
+
},
|
|
67
|
+
style: { [nestedDialogs]: nestedOpenDialogCount }
|
|
68
|
+
},
|
|
69
|
+
elementProps
|
|
70
|
+
],
|
|
71
|
+
ref: [
|
|
72
|
+
forwardedRef,
|
|
73
|
+
store.context.popupRef,
|
|
74
|
+
setPopupElement
|
|
75
|
+
],
|
|
76
|
+
stateAttributesMapping: dialogStateAttributesMapping
|
|
77
|
+
});
|
|
78
|
+
return /*#__PURE__*/ jsx(FloatingFocusManager, {
|
|
79
|
+
context: floatingRootContext,
|
|
80
|
+
openInteractionType: openMethod,
|
|
81
|
+
disabled: !mounted,
|
|
82
|
+
closeOnFocusOut: !disablePointerDismissal,
|
|
83
|
+
initialFocus: resolvedInitialFocus,
|
|
84
|
+
returnFocus: finalFocus,
|
|
85
|
+
modal: modal !== false,
|
|
86
|
+
restoreFocus: "popup",
|
|
87
|
+
children: element
|
|
88
|
+
});
|
|
89
|
+
});
|
|
90
|
+
if (process.env.NODE_ENV !== "production") DialogPopup.displayName = "DialogPopup";
|
|
91
|
+
//#endregion
|
|
92
|
+
export { DialogPopup };
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
//#region ../../../node_modules/.pnpm/@base-ui+react@1.8.0_@date-fns+tz@1.5.0_@types+react@19.3.0_date-fns@4.4.0_react-dom@19.3.0_react@19.3.0__react@19.3.0/node_modules/@base-ui/react/dialog/popup/DialogPopupCssVars.mjs
|
|
2
|
+
/**
|
|
3
|
+
* Indicates how many dialogs are nested within.
|
|
4
|
+
* @type {number}
|
|
5
|
+
*/
|
|
6
|
+
const nestedDialogs = "--nested-dialogs";
|
|
7
|
+
//#endregion
|
|
8
|
+
export { nestedDialogs };
|