react-miui 0.33.0 → 0.35.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/.claude/settings.json +12 -0
- package/.claude/settings.local.json +5 -1
- package/.storybook/preview.tsx +10 -4
- package/CHANGELOG.md +22 -0
- package/dist/components/form/index.d.ts +1 -0
- package/dist/components/form/index.d.ts.map +1 -1
- package/dist/components/form/index.js +1 -0
- package/dist/components/form/index.js.map +1 -1
- package/dist/components/form/input/Input.d.ts.map +1 -1
- package/dist/components/form/input/Input.js +9 -5
- package/dist/components/form/input/Input.js.map +1 -1
- package/dist/components/form/timepicker/TimePicker.css.d.ts +99 -0
- package/dist/components/form/timepicker/TimePicker.css.d.ts.map +1 -0
- package/dist/components/form/timepicker/TimePicker.css.js +116 -0
- package/dist/components/form/timepicker/TimePicker.css.js.map +1 -0
- package/dist/components/form/timepicker/TimePicker.d.ts +22 -0
- package/dist/components/form/timepicker/TimePicker.d.ts.map +1 -0
- package/dist/components/form/timepicker/TimePicker.js +141 -0
- package/dist/components/form/timepicker/TimePicker.js.map +1 -0
- package/dist/components/form/timepicker/TimePicker.styled.d.ts +936 -0
- package/dist/components/form/timepicker/TimePicker.styled.d.ts.map +1 -0
- package/dist/components/form/timepicker/TimePicker.styled.js +29 -0
- package/dist/components/form/timepicker/TimePicker.styled.js.map +1 -0
- package/dist/components/form/timepicker/TimePickerModal.d.ts +17 -0
- package/dist/components/form/timepicker/TimePickerModal.d.ts.map +1 -0
- package/dist/components/form/timepicker/TimePickerModal.js +92 -0
- package/dist/components/form/timepicker/TimePickerModal.js.map +1 -0
- package/dist/components/form/timepicker/Wheel.d.ts +12 -0
- package/dist/components/form/timepicker/Wheel.d.ts.map +1 -0
- package/dist/components/form/timepicker/Wheel.js +187 -0
- package/dist/components/form/timepicker/Wheel.js.map +1 -0
- package/dist/components/form/timepicker/utils.d.ts +4 -0
- package/dist/components/form/timepicker/utils.d.ts.map +1 -0
- package/dist/components/form/timepicker/utils.js +62 -0
- package/dist/components/form/timepicker/utils.js.map +1 -0
- package/dist/components/icons/Clock.d.ts +7 -0
- package/dist/components/icons/Clock.d.ts.map +1 -0
- package/dist/components/icons/Clock.js +45 -0
- package/dist/components/icons/Clock.js.map +1 -0
- package/dist/components/icons/Icon.d.ts +2 -1
- package/dist/components/icons/Icon.d.ts.map +1 -1
- package/dist/components/icons/Icon.js +3 -0
- package/dist/components/icons/Icon.js.map +1 -1
- package/dist/components/ui/drawer/Drawer.d.ts +10 -1
- package/dist/components/ui/drawer/Drawer.d.ts.map +1 -1
- package/dist/components/ui/drawer/Drawer.js +135 -15
- package/dist/components/ui/drawer/Drawer.js.map +1 -1
- package/dist/components/ui/drawer/Drawer.styled.d.ts +86 -1
- package/dist/components/ui/drawer/Drawer.styled.d.ts.map +1 -1
- package/dist/components/ui/drawer/Drawer.styled.js +13 -1
- package/dist/components/ui/drawer/Drawer.styled.js.map +1 -1
- package/dist/components/ui/modal/Modal.d.ts +1 -2
- package/dist/components/ui/modal/Modal.d.ts.map +1 -1
- package/dist/components/ui/modal/Modal.js +114 -42
- package/dist/components/ui/modal/Modal.js.map +1 -1
- package/dist/components/ui/modal/Modal.styled.d.ts +1 -1
- package/dist/components/ui/modal/Modal.styled.d.ts.map +1 -1
- package/dist/components/ui/modal/Modal.styled.js +40 -25
- package/dist/components/ui/modal/Modal.styled.js.map +1 -1
- package/dist/components/ui/toaster/Toaster.d.ts.map +1 -1
- package/dist/components/ui/toaster/Toaster.js +7 -1
- package/dist/components/ui/toaster/Toaster.js.map +1 -1
- package/dist/components/ui/tooltip/Tooltip.d.ts +30 -0
- package/dist/components/ui/tooltip/Tooltip.d.ts.map +1 -0
- package/dist/components/ui/tooltip/Tooltip.js +81 -0
- package/dist/components/ui/tooltip/Tooltip.js.map +1 -0
- package/dist/components/ui/tooltip/Tooltip.styled.d.ts +173 -0
- package/dist/components/ui/tooltip/Tooltip.styled.d.ts.map +1 -0
- package/dist/components/ui/tooltip/Tooltip.styled.js +65 -0
- package/dist/components/ui/tooltip/Tooltip.styled.js.map +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/theme.css-global.d.ts.map +1 -1
- package/dist/theme.css-global.js +0 -1
- package/dist/theme.css-global.js.map +1 -1
- package/dist/utils/index.d.ts +1 -0
- package/dist/utils/index.d.ts.map +1 -1
- package/dist/utils/index.js +1 -0
- package/dist/utils/index.js.map +1 -1
- package/dist/utils/useNativeValidity.d.ts +11 -0
- package/dist/utils/useNativeValidity.d.ts.map +1 -0
- package/dist/utils/useNativeValidity.js +32 -0
- package/dist/utils/useNativeValidity.js.map +1 -0
- package/docs/assets/highlight.css +7 -0
- package/docs/assets/navigation.js +1 -1
- package/docs/assets/search.js +1 -1
- package/docs/classes/index.Pop.html +7 -7
- package/docs/documents/Test.html +2 -2
- package/docs/enums/index.ICON.html +3 -2
- package/docs/functions/index.Action.html +3 -3
- package/docs/functions/index.Button.html +4 -4
- package/docs/functions/index.Card.html +3 -3
- package/docs/functions/index.Checkbox.html +3 -3
- package/docs/functions/index.Choice.html +2 -2
- package/docs/functions/index.ColorPicker.html +3 -3
- package/docs/functions/index.CoveringLoader.html +3 -3
- package/docs/functions/index.DirectionPad.html +2 -2
- package/docs/functions/index.Drawer.html +2 -2
- package/docs/functions/index.EqualActions.html +2 -2
- package/docs/functions/index.FullLoader.html +3 -3
- package/docs/functions/index.Gap.html +3 -3
- package/docs/functions/index.HandleEsc.html +3 -3
- package/docs/functions/index.Header.html +3 -3
- package/docs/functions/index.HeaderIconAction.html +3 -3
- package/docs/functions/index.Icon-1.html +2 -2
- package/docs/functions/index.If.html +3 -3
- package/docs/functions/index.Input.html +1 -1
- package/docs/functions/index.KeyValue.html +2 -2
- package/docs/functions/index.Label.html +2 -2
- package/docs/functions/index.Line.html +4 -4
- package/docs/functions/index.List.html +2 -2
- package/docs/functions/index.Loader.html +3 -3
- package/docs/functions/index.Loading.html +3 -3
- package/docs/functions/index.Message.html +4 -4
- package/docs/functions/index.Modal.html +2 -2
- package/docs/functions/index.ModalButtons.html +3 -3
- package/docs/functions/index.PopLoader.html +3 -3
- package/docs/functions/index.PopOption.html +2 -2
- package/docs/functions/index.Progress.html +2 -2
- package/docs/functions/index.SearchContainer.html +3 -3
- package/docs/functions/index.Section.html +4 -4
- package/docs/functions/index.Select.html +3 -3
- package/docs/functions/index.Selector.html +2 -2
- package/docs/functions/index.Spacer.html +3 -3
- package/docs/functions/index.Stats.html +2 -2
- package/docs/functions/index.StickyHeader.html +4 -4
- package/docs/functions/index.Table.html +3 -3
- package/docs/functions/index.TextArea.html +2 -2
- package/docs/functions/index.TimePicker.html +10 -0
- package/docs/functions/index.ToasterProvider.html +3 -3
- package/docs/functions/index.Toggle.html +3 -3
- package/docs/functions/index.ToolButton.html +4 -4
- package/docs/functions/index.Tooltip.html +18 -0
- package/docs/functions/index.TooltipProvider.html +6 -0
- package/docs/functions/index.borderPxToRem.html +1 -1
- package/docs/functions/index.createTheme.html +1 -1
- package/docs/functions/index.css.html +1 -1
- package/docs/functions/index.dimensionsPxToRem.html +1 -1
- package/docs/functions/index.fontPxToRem.html +1 -1
- package/docs/functions/index.getCssText.html +1 -1
- package/docs/functions/index.globalCss.html +2 -2
- package/docs/functions/index.injectGlobalStyles.html +1 -1
- package/docs/functions/index.keyframes.html +1 -1
- package/docs/functions/index.pxToRem.html +1 -1
- package/docs/functions/index.styled.html +1 -1
- package/docs/functions/index.toast.html +2 -2
- package/docs/functions/index.useToaster.html +1 -1
- package/docs/index.html +2 -2
- package/docs/interfaces/index.IconProps.html +2 -2
- package/docs/interfaces/index.InputCustomProps.html +3 -3
- package/docs/interfaces/index.LoaderProps.html +6 -6
- package/docs/interfaces/index.StickyHeaderProps.html +4 -4
- package/docs/interfaces/index.ToasterProviderProps.html +3 -3
- package/docs/interfaces/index.TooltipProps.html +36 -0
- package/docs/interfaces/index.TooltipProviderProps.html +13 -0
- package/docs/modules/index.html +1 -1
- package/docs/modules.html +1 -1
- package/docs/types/index.ActionProps.html +1 -1
- package/docs/types/index.CardProps.html +1 -1
- package/docs/types/index.CheckboxProps.html +2 -2
- package/docs/types/index.ChoiceProps.html +1 -1
- package/docs/types/index.ColorPickerProps.html +1 -1
- package/docs/types/index.DirectionPadProps.html +1 -1
- package/docs/types/index.DrawerFrom.html +1 -0
- package/docs/types/index.DrawerProps.html +28 -1
- package/docs/types/index.EqualActionsProps.html +1 -1
- package/docs/types/index.HeaderProps.html +1 -1
- package/docs/types/index.InputProps.html +1 -1
- package/docs/types/index.KeyValueProps.html +1 -1
- package/docs/types/index.LabelProps.html +1 -1
- package/docs/types/index.OverwriteProps.html +1 -1
- package/docs/types/index.ProgressProps.html +2 -2
- package/docs/types/index.SelectProps.html +1 -1
- package/docs/types/index.SelectorProps.html +1 -1
- package/docs/types/index.Stat.html +1 -1
- package/docs/types/index.StatsProps.html +1 -1
- package/docs/types/index.TextAreaProps.html +1 -1
- package/docs/types/index.ThemeCSS.html +1 -1
- package/docs/types/index.TimePickerProps.html +1 -0
- package/docs/types/index.ToggleProps.html +2 -2
- package/docs/variables/index.ActionBadgeSelector.html +1 -1
- package/docs/variables/index.ActionCircleSelector.html +1 -1
- package/docs/variables/index.CheckboxCheckmarkWrapperSelector.html +1 -1
- package/docs/variables/index.CheckboxTextLabelSelector.html +1 -1
- package/docs/variables/index.ChoiceItemSelector.html +1 -1
- package/docs/variables/index.ColorPickerColorDisplaySelector.html +1 -1
- package/docs/variables/index.DirectionPadButtonDotSelector.html +1 -1
- package/docs/variables/index.DirectionPadButtonSelector.html +1 -1
- package/docs/variables/index.DirectionPadLineSelector.html +1 -1
- package/docs/variables/index.DirectionPadMiddleSelector.html +1 -1
- package/docs/variables/index.DrawerContentSelector.html +1 -1
- package/docs/variables/index.HeaderAfterSelector.html +1 -1
- package/docs/variables/index.HeaderBeforeSelector.html +1 -1
- package/docs/variables/index.HeaderContentsSelector.html +1 -1
- package/docs/variables/index.HeaderIconActionIconSelector.html +1 -1
- package/docs/variables/index.InputContainerSelector.html +1 -1
- package/docs/variables/index.InputInputSelector.html +1 -1
- package/docs/variables/index.InputLabelSelector.html +1 -1
- package/docs/variables/index.InputPrefixSelector.html +1 -1
- package/docs/variables/index.InputSuffixSelector.html +1 -1
- package/docs/variables/index.KeyValueIconSelector.html +1 -1
- package/docs/variables/index.KeyValueItemSelector.html +1 -1
- package/docs/variables/index.KeyValueKeySelector.html +1 -1
- package/docs/variables/index.KeyValuePairSelector.html +1 -1
- package/docs/variables/index.KeyValueValueSelector.html +1 -1
- package/docs/variables/index.LabelTextSelector.html +1 -1
- package/docs/variables/index.ListItemInnerContainerClassNameSelector.html +1 -1
- package/docs/variables/index.ModalContainerSelector.html +1 -1
- package/docs/variables/index.ModalRemovePaddingSelector.html +1 -1
- package/docs/variables/index.ModalTitleSelector.html +1 -1
- package/docs/variables/index.PopListSelector.html +1 -1
- package/docs/variables/index.PopOptionButtonSelector.html +1 -1
- package/docs/variables/index.PopOptionIconSelector.html +1 -1
- package/docs/variables/index.PopOverlaySelector.html +1 -1
- package/docs/variables/index.ProgressBackgroundSelector.html +1 -1
- package/docs/variables/index.ProgressValueSelector.html +1 -1
- package/docs/variables/index.SelectorItemSelector.html +1 -1
- package/docs/variables/index.StatsItemSelector.html +1 -1
- package/docs/variables/index.StatsLabelSelector.html +1 -1
- package/docs/variables/index.StatsSeparatorSelector.html +1 -1
- package/docs/variables/index.StatsValueSelector.html +1 -1
- package/docs/variables/index.TextAreaLabelSelector.html +1 -1
- package/docs/variables/index.TextAreaTextAreaSelector.html +1 -1
- package/docs/variables/index.TextAreaWrapperSelector.html +1 -1
- package/docs/variables/index.ToggleStyledToggleSelector.html +1 -1
- package/docs/variables/index.TooltipContentSelector.html +1 -0
- package/docs/variables/index.config.html +1 -1
- package/docs/variables/index.cssReset.html +2 -2
- package/docs/variables/index.darkTheme.html +1 -1
- package/docs/variables/index.miuiScrollbars.html +1 -1
- package/docs/variables/index.theme.html +1 -1
- package/esm/components/form/index.d.ts +1 -0
- package/esm/components/form/index.d.ts.map +1 -1
- package/esm/components/form/index.js +1 -0
- package/esm/components/form/index.js.map +1 -1
- package/esm/components/form/input/Input.d.ts.map +1 -1
- package/esm/components/form/input/Input.js +9 -5
- package/esm/components/form/input/Input.js.map +1 -1
- package/esm/components/form/timepicker/TimePicker.css.d.ts +99 -0
- package/esm/components/form/timepicker/TimePicker.css.d.ts.map +1 -0
- package/esm/components/form/timepicker/TimePicker.css.js +102 -0
- package/esm/components/form/timepicker/TimePicker.css.js.map +1 -0
- package/esm/components/form/timepicker/TimePicker.d.ts +22 -0
- package/esm/components/form/timepicker/TimePicker.d.ts.map +1 -0
- package/esm/components/form/timepicker/TimePicker.js +93 -0
- package/esm/components/form/timepicker/TimePicker.js.map +1 -0
- package/esm/components/form/timepicker/TimePicker.styled.d.ts +936 -0
- package/esm/components/form/timepicker/TimePicker.styled.d.ts.map +1 -0
- package/esm/components/form/timepicker/TimePicker.styled.js +20 -0
- package/esm/components/form/timepicker/TimePicker.styled.js.map +1 -0
- package/esm/components/form/timepicker/TimePickerModal.d.ts +17 -0
- package/esm/components/form/timepicker/TimePickerModal.d.ts.map +1 -0
- package/esm/components/form/timepicker/TimePickerModal.js +56 -0
- package/esm/components/form/timepicker/TimePickerModal.js.map +1 -0
- package/esm/components/form/timepicker/Wheel.d.ts +12 -0
- package/esm/components/form/timepicker/Wheel.d.ts.map +1 -0
- package/esm/components/form/timepicker/Wheel.js +151 -0
- package/esm/components/form/timepicker/Wheel.js.map +1 -0
- package/esm/components/form/timepicker/utils.d.ts +4 -0
- package/esm/components/form/timepicker/utils.d.ts.map +1 -0
- package/esm/components/form/timepicker/utils.js +58 -0
- package/esm/components/form/timepicker/utils.js.map +1 -0
- package/esm/components/icons/Clock.d.ts +7 -0
- package/esm/components/icons/Clock.d.ts.map +1 -0
- package/esm/components/icons/Clock.js +9 -0
- package/esm/components/icons/Clock.js.map +1 -0
- package/esm/components/icons/Icon.d.ts +2 -1
- package/esm/components/icons/Icon.d.ts.map +1 -1
- package/esm/components/icons/Icon.js +3 -0
- package/esm/components/icons/Icon.js.map +1 -1
- package/esm/components/ui/drawer/Drawer.d.ts +10 -1
- package/esm/components/ui/drawer/Drawer.d.ts.map +1 -1
- package/esm/components/ui/drawer/Drawer.js +139 -15
- package/esm/components/ui/drawer/Drawer.js.map +1 -1
- package/esm/components/ui/drawer/Drawer.styled.d.ts +86 -1
- package/esm/components/ui/drawer/Drawer.styled.d.ts.map +1 -1
- package/esm/components/ui/drawer/Drawer.styled.js +12 -1
- package/esm/components/ui/drawer/Drawer.styled.js.map +1 -1
- package/esm/components/ui/modal/Modal.d.ts +1 -2
- package/esm/components/ui/modal/Modal.d.ts.map +1 -1
- package/esm/components/ui/modal/Modal.js +103 -43
- package/esm/components/ui/modal/Modal.js.map +1 -1
- package/esm/components/ui/modal/Modal.styled.d.ts +1 -1
- package/esm/components/ui/modal/Modal.styled.d.ts.map +1 -1
- package/esm/components/ui/modal/Modal.styled.js +40 -25
- package/esm/components/ui/modal/Modal.styled.js.map +1 -1
- package/esm/components/ui/toaster/Toaster.d.ts.map +1 -1
- package/esm/components/ui/toaster/Toaster.js +8 -2
- package/esm/components/ui/toaster/Toaster.js.map +1 -1
- package/esm/components/ui/tooltip/Tooltip.d.ts +30 -0
- package/esm/components/ui/tooltip/Tooltip.d.ts.map +1 -0
- package/esm/components/ui/tooltip/Tooltip.js +43 -0
- package/esm/components/ui/tooltip/Tooltip.js.map +1 -0
- package/esm/components/ui/tooltip/Tooltip.styled.d.ts +173 -0
- package/esm/components/ui/tooltip/Tooltip.styled.d.ts.map +1 -0
- package/esm/components/ui/tooltip/Tooltip.styled.js +28 -0
- package/esm/components/ui/tooltip/Tooltip.styled.js.map +1 -0
- package/esm/index.d.ts +1 -0
- package/esm/index.d.ts.map +1 -1
- package/esm/index.js +1 -0
- package/esm/index.js.map +1 -1
- package/esm/theme.css-global.d.ts.map +1 -1
- package/esm/theme.css-global.js +0 -1
- package/esm/theme.css-global.js.map +1 -1
- package/esm/utils/index.d.ts +1 -0
- package/esm/utils/index.d.ts.map +1 -1
- package/esm/utils/index.js +1 -0
- package/esm/utils/index.js.map +1 -1
- package/esm/utils/useNativeValidity.d.ts +11 -0
- package/esm/utils/useNativeValidity.d.ts.map +1 -0
- package/esm/utils/useNativeValidity.js +29 -0
- package/esm/utils/useNativeValidity.js.map +1 -0
- package/package.json +2 -1
- package/pnpm-workspace.yaml +3 -0
- package/src/bugfixes/ToastsFromModal.stories.tsx +59 -0
- package/src/components/form/index.ts +1 -0
- package/src/components/form/input/Input.stories.tsx +47 -1
- package/src/components/form/input/Input.tsx +11 -5
- package/src/components/form/timepicker/TimePicker.css.ts +132 -0
- package/src/components/form/timepicker/TimePicker.stories.tsx +107 -0
- package/src/components/form/timepicker/TimePicker.styled.ts +52 -0
- package/src/components/form/timepicker/TimePicker.tsx +229 -0
- package/src/components/form/timepicker/TimePickerModal.tsx +131 -0
- package/src/components/form/timepicker/Wheel.tsx +201 -0
- package/src/components/form/timepicker/utils.ts +66 -0
- package/src/components/icons/Clock.tsx +38 -0
- package/src/components/icons/Icon.tsx +3 -0
- package/src/components/ui/drawer/Drawer.stories.tsx +143 -59
- package/src/components/ui/drawer/Drawer.styled.ts +13 -0
- package/src/components/ui/drawer/Drawer.tsx +214 -20
- package/src/components/ui/modal/Modal.stories.tsx +43 -7
- package/src/components/ui/modal/Modal.styled.ts +46 -25
- package/src/components/ui/modal/Modal.tsx +135 -52
- package/src/components/ui/toaster/Toaster.tsx +12 -2
- package/src/components/ui/tooltip/Tooltip.stories.tsx +285 -0
- package/src/components/ui/tooltip/Tooltip.styled.ts +36 -0
- package/src/components/ui/tooltip/Tooltip.tsx +195 -0
- package/src/index.ts +1 -0
- package/src/theme.css-global.ts +0 -1
- package/src/utils/index.ts +1 -0
- package/src/utils/useNativeValidity.ts +57 -0
|
@@ -35,13 +35,81 @@ var __importStar = (this && this.__importStar) || (function () {
|
|
|
35
35
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
36
|
exports.DrawerContentSelector = exports.Drawer = void 0;
|
|
37
37
|
const react_1 = __importStar(require("react"));
|
|
38
|
+
const react_dom_1 = require("react-dom");
|
|
39
|
+
const use_forwarded_ref_1 = require("@bedrock-layout/use-forwarded-ref");
|
|
38
40
|
const oop_timers_1 = require("oop-timers");
|
|
39
41
|
const HandleEsc_1 = require("../../utils/HandleEsc");
|
|
40
42
|
const Drawer_styled_1 = require("./Drawer.styled");
|
|
41
43
|
const RENDER_TIMEOUT = 500;
|
|
44
|
+
const TRANSITION_MS = 300;
|
|
45
|
+
const DEFAULT_CONTENT_SCALE = 0.92;
|
|
46
|
+
const DEFAULT_TINT_OPACITY = 0.1;
|
|
47
|
+
const PARTIAL_RADIUS = "16px";
|
|
48
|
+
const DEFAULT_SCALE_SELECTORS = ["#__next", "#root", "#storybook-root", "body>*:first-child"];
|
|
49
|
+
const closedTransform = {
|
|
50
|
+
bottom: "translate(0, 100%)",
|
|
51
|
+
top: "translate(0, -100%)",
|
|
52
|
+
left: "translate(-100%, 0)",
|
|
53
|
+
right: "translate(100%, 0)",
|
|
54
|
+
};
|
|
55
|
+
const getSizeCss = (size) => {
|
|
56
|
+
if (size === undefined) {
|
|
57
|
+
return undefined;
|
|
58
|
+
}
|
|
59
|
+
if (typeof size === "string") {
|
|
60
|
+
return size;
|
|
61
|
+
}
|
|
62
|
+
if (size >= 0) {
|
|
63
|
+
return `${size}px`;
|
|
64
|
+
}
|
|
65
|
+
return `calc(100% + ${size}px)`;
|
|
66
|
+
};
|
|
67
|
+
const positioningPresets = {
|
|
68
|
+
bottom: (size) => ({ top: "auto", height: size }),
|
|
69
|
+
top: (size) => ({ bottom: "auto", height: size }),
|
|
70
|
+
left: (size) => ({ right: "auto", width: size }),
|
|
71
|
+
right: (size) => ({ left: "auto", width: size }),
|
|
72
|
+
};
|
|
73
|
+
const radiusPresets = {
|
|
74
|
+
bottom: { borderTopLeftRadius: PARTIAL_RADIUS, borderTopRightRadius: PARTIAL_RADIUS },
|
|
75
|
+
top: { borderBottomLeftRadius: PARTIAL_RADIUS, borderBottomRightRadius: PARTIAL_RADIUS },
|
|
76
|
+
left: { borderTopRightRadius: PARTIAL_RADIUS, borderBottomRightRadius: PARTIAL_RADIUS },
|
|
77
|
+
right: { borderTopLeftRadius: PARTIAL_RADIUS, borderBottomLeftRadius: PARTIAL_RADIUS },
|
|
78
|
+
};
|
|
79
|
+
const getStaticStyle = (from, size) => {
|
|
80
|
+
const sizeCss = getSizeCss(size);
|
|
81
|
+
if (sizeCss === undefined) {
|
|
82
|
+
return {};
|
|
83
|
+
}
|
|
84
|
+
return Object.assign(Object.assign({}, positioningPresets[from](sizeCss)), radiusPresets[from]);
|
|
85
|
+
};
|
|
86
|
+
const findScaleTargets = (selectors, mode) => {
|
|
87
|
+
for (const sel of selectors) {
|
|
88
|
+
if (mode === "first") {
|
|
89
|
+
const el = document.querySelector(sel);
|
|
90
|
+
if (el) {
|
|
91
|
+
return [el];
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
else {
|
|
95
|
+
const els = Array.from(document.querySelectorAll(sel));
|
|
96
|
+
if (els.length > 0) {
|
|
97
|
+
return els;
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
return [];
|
|
102
|
+
};
|
|
103
|
+
const applyScale = (target, transform) => {
|
|
104
|
+
target.style.setProperty("transition", `transform ${TRANSITION_MS}ms`);
|
|
105
|
+
target.style.setProperty("transform-origin", "50% 0");
|
|
106
|
+
target.style.setProperty("transform", transform);
|
|
107
|
+
};
|
|
42
108
|
const Drawer = (0, react_1.forwardRef)((props, ref) => {
|
|
43
|
-
var _a;
|
|
109
|
+
var _a, _b, _c;
|
|
110
|
+
const drawerRef = (0, use_forwarded_ref_1.useForwardedRef)(ref);
|
|
44
111
|
const [shouldRenderWhenClosed, setShouldRenderWhenClosed] = (0, react_1.useState)(false);
|
|
112
|
+
const [isVisible, setIsVisible] = (0, react_1.useState)(props.isOpen);
|
|
45
113
|
const timeoutRef = (0, react_1.useRef)(null);
|
|
46
114
|
(0, react_1.useEffect)(() => {
|
|
47
115
|
timeoutRef.current = new oop_timers_1.Timeout(() => {
|
|
@@ -55,24 +123,76 @@ const Drawer = (0, react_1.forwardRef)((props, ref) => {
|
|
|
55
123
|
}, []);
|
|
56
124
|
(0, react_1.useEffect)(() => {
|
|
57
125
|
var _a, _b;
|
|
58
|
-
if (props.isOpen) {
|
|
59
|
-
(_a = timeoutRef.current) === null || _a === void 0 ? void 0 : _a.
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
else {
|
|
63
|
-
(_b = timeoutRef.current) === null || _b === void 0 ? void 0 : _b.start();
|
|
126
|
+
if (!props.isOpen) {
|
|
127
|
+
(_a = timeoutRef.current) === null || _a === void 0 ? void 0 : _a.start();
|
|
128
|
+
setIsVisible(false);
|
|
129
|
+
return undefined;
|
|
64
130
|
}
|
|
131
|
+
(_b = timeoutRef.current) === null || _b === void 0 ? void 0 : _b.stop();
|
|
132
|
+
setShouldRenderWhenClosed(true);
|
|
133
|
+
const id = requestAnimationFrame(() => {
|
|
134
|
+
setIsVisible(true);
|
|
135
|
+
});
|
|
136
|
+
return () => {
|
|
137
|
+
cancelAnimationFrame(id);
|
|
138
|
+
};
|
|
65
139
|
}, [props.isOpen]);
|
|
66
|
-
const
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
140
|
+
const { scaleContent, scaleSelectors, scaleSelectorsMode } = props;
|
|
141
|
+
(0, react_1.useEffect)(() => {
|
|
142
|
+
if (!scaleContent || !props.isOpen) {
|
|
143
|
+
return undefined;
|
|
144
|
+
}
|
|
145
|
+
const selectors = scaleSelectors === undefined
|
|
146
|
+
? DEFAULT_SCALE_SELECTORS
|
|
147
|
+
: (Array.isArray(scaleSelectors) ? scaleSelectors : [scaleSelectors]);
|
|
148
|
+
const mode = scaleSelectorsMode !== null && scaleSelectorsMode !== void 0 ? scaleSelectorsMode : "first";
|
|
149
|
+
const targets = findScaleTargets(selectors, mode);
|
|
150
|
+
if (targets.length === 0) {
|
|
151
|
+
return undefined;
|
|
152
|
+
}
|
|
153
|
+
const scale = typeof scaleContent === "number" ? scaleContent : DEFAULT_CONTENT_SCALE;
|
|
154
|
+
targets.forEach((el) => {
|
|
155
|
+
applyScale(el, `scale(${scale})`);
|
|
156
|
+
});
|
|
157
|
+
return () => {
|
|
158
|
+
targets.forEach((el) => {
|
|
159
|
+
applyScale(el, "");
|
|
160
|
+
});
|
|
161
|
+
};
|
|
162
|
+
}, [props.isOpen, scaleContent, scaleSelectors, scaleSelectorsMode]);
|
|
163
|
+
const from = (_a = props.from) !== null && _a !== void 0 ? _a : "bottom";
|
|
164
|
+
const style = Object.assign(Object.assign({}, getStaticStyle(from, props.size)), { transform: isVisible ? "translate(0, 0)" : closedTransform[from], transition: props.isOpen && !isVisible ? "none" : undefined });
|
|
70
165
|
const shouldRender = props.isOpen || shouldRenderWhenClosed;
|
|
71
|
-
const closeOnEsc = (
|
|
166
|
+
const closeOnEsc = (_b = props.closeOnEsc) !== null && _b !== void 0 ? _b : true;
|
|
72
167
|
const esc = closeOnEsc && react_1.default.createElement(HandleEsc_1.HandleEsc, { onPress: props.onClose });
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
168
|
+
const portal = (_c = props.portal) !== null && _c !== void 0 ? _c : true;
|
|
169
|
+
const overlayClick = props.onOverlayClick === undefined ? "close" : props.onOverlayClick;
|
|
170
|
+
const { onClose } = props;
|
|
171
|
+
const handleOverlayClick = (0, react_1.useCallback)(() => {
|
|
172
|
+
if (overlayClick === "close") {
|
|
173
|
+
onClose();
|
|
174
|
+
return;
|
|
175
|
+
}
|
|
176
|
+
if (typeof overlayClick === "function") {
|
|
177
|
+
overlayClick();
|
|
178
|
+
}
|
|
179
|
+
}, [overlayClick, onClose]);
|
|
180
|
+
const hasOverlay = props.size !== undefined || Boolean(scaleContent);
|
|
181
|
+
const overlayInteractive = overlayClick !== null && props.isOpen;
|
|
182
|
+
const tintStyle = {
|
|
183
|
+
opacity: isVisible ? DEFAULT_TINT_OPACITY : 0,
|
|
184
|
+
pointerEvents: (overlayInteractive ? "auto" : "none"),
|
|
185
|
+
};
|
|
186
|
+
const tree = (react_1.default.createElement(react_1.default.Fragment, null,
|
|
187
|
+
hasOverlay && (react_1.default.createElement(Drawer_styled_1.Tint, { style: tintStyle, onClick: handleOverlayClick, "aria-hidden": true })),
|
|
188
|
+
react_1.default.createElement(Drawer_styled_1.StyledDrawer, { className: props.className, style: style, ref: drawerRef },
|
|
189
|
+
esc,
|
|
190
|
+
react_1.default.createElement(Drawer_styled_1.Content, null, shouldRender && props.children))));
|
|
191
|
+
if (portal) {
|
|
192
|
+
const root = typeof portal === "boolean" ? document.body : portal;
|
|
193
|
+
return (0, react_dom_1.createPortal)(tree, root);
|
|
194
|
+
}
|
|
195
|
+
return tree;
|
|
76
196
|
});
|
|
77
197
|
exports.Drawer = Drawer;
|
|
78
198
|
Drawer.displayName = "Drawer";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../../src/components/ui/drawer/Drawer.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+
|
|
1
|
+
{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../../src/components/ui/drawer/Drawer.tsx"],"names":[],"mappings":"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"}
|
|
@@ -83,6 +83,91 @@ declare const StyledDrawer: import("../../../../node_modules/@stitches/react/typ
|
|
|
83
83
|
height: string | number;
|
|
84
84
|
};
|
|
85
85
|
}>>;
|
|
86
|
+
declare const Tint: import("../../../../node_modules/@stitches/react/types/styled-component").StyledComponent<"div", {}, {}, import("../../../../node_modules/@stitches/react/types/css-util").CSS<{}, {
|
|
87
|
+
colors: {
|
|
88
|
+
background: "white";
|
|
89
|
+
mainColor: "#008ad2";
|
|
90
|
+
mainColorAlt: "#006AA9";
|
|
91
|
+
activeBg: "#e7e7e7";
|
|
92
|
+
inactiveBg: "#d3d3de";
|
|
93
|
+
inactiveDarkBg: "#999";
|
|
94
|
+
toggleHandleBg: "#e0e0e0";
|
|
95
|
+
toggleHandleBorder: "#cdcdcd";
|
|
96
|
+
toggleBgDisabled: "#f0f0f0";
|
|
97
|
+
toggleHandleBorderDisabled: "#c29f7d";
|
|
98
|
+
toggleHandleBgDisabled: "#deae84";
|
|
99
|
+
icon: "#636363";
|
|
100
|
+
border: "#d5d5d5";
|
|
101
|
+
buttonBorder: "#bababa";
|
|
102
|
+
headerBorder: "#c8c8c9";
|
|
103
|
+
headerBg: "#efeff0";
|
|
104
|
+
headerText: "#484848";
|
|
105
|
+
text: "#323232";
|
|
106
|
+
text2: "#181818";
|
|
107
|
+
text3: "#000000";
|
|
108
|
+
sub: "#959595";
|
|
109
|
+
popText: "#666";
|
|
110
|
+
toolbarBorder: "#ababab";
|
|
111
|
+
toolbarBg: "#f8f8f8";
|
|
112
|
+
modalBg: "#f7f7f7";
|
|
113
|
+
modalButtonBg: "#f8f8f8";
|
|
114
|
+
modalButtonBorder: "#c2c2c2";
|
|
115
|
+
inputDisabledBg: "#f3f3f3";
|
|
116
|
+
inputDisabledText: "#959595";
|
|
117
|
+
choiceBg: "#ffffff";
|
|
118
|
+
choiceText: "#999999";
|
|
119
|
+
choiceActiveBg: "#f3f3f3";
|
|
120
|
+
choiceActiveText: "#313131";
|
|
121
|
+
choiceBorder: "#cfcfcf";
|
|
122
|
+
selectorText: "#606060";
|
|
123
|
+
selectorActive: "#008ad2";
|
|
124
|
+
blue1: "#038bf4";
|
|
125
|
+
blue2: "#b7d6f5";
|
|
126
|
+
blue3: "#dbe6ff";
|
|
127
|
+
blue4: "#33b4ff";
|
|
128
|
+
blue5: "#30a2e6";
|
|
129
|
+
orange1: "#ff7200";
|
|
130
|
+
orange1Darker: "#cc5b00";
|
|
131
|
+
purple1: "#7357e8";
|
|
132
|
+
green1: "#3ec234";
|
|
133
|
+
green1Darker: "#38af2f";
|
|
134
|
+
pink1: "#ff388f";
|
|
135
|
+
red1: "#ea2700";
|
|
136
|
+
yellow1: "#ffde9d";
|
|
137
|
+
yellow2: "#e4a429";
|
|
138
|
+
yellow3: "#fff5db";
|
|
139
|
+
pinky1: "#f5c0b7";
|
|
140
|
+
pinky2: "#e07b67";
|
|
141
|
+
pinky3: "#ffe1db";
|
|
142
|
+
grey1: "#737373";
|
|
143
|
+
focusColor: "#dcaf00";
|
|
144
|
+
scrollbarsThumb: "#737373";
|
|
145
|
+
scrollbarsBg: "transparent";
|
|
146
|
+
tableStripedBg: "#fafafa";
|
|
147
|
+
toolButtonText: "#666e80";
|
|
148
|
+
};
|
|
149
|
+
}, import("../../../../node_modules/@stitches/react/types/config").DefaultThemeMap, {
|
|
150
|
+
mx: (value: string | number) => {
|
|
151
|
+
marginLeft: string | number;
|
|
152
|
+
marginRight: string | number;
|
|
153
|
+
};
|
|
154
|
+
my: (value: string | number) => {
|
|
155
|
+
marginTop: string | number;
|
|
156
|
+
marginBottom: string | number;
|
|
157
|
+
};
|
|
158
|
+
px: (value: string | number) => {
|
|
159
|
+
paddingLeft: string | number;
|
|
160
|
+
paddingRight: string | number;
|
|
161
|
+
};
|
|
162
|
+
py: (value: string | number) => {
|
|
163
|
+
paddingTop: string | number;
|
|
164
|
+
paddingBottom: string | number;
|
|
165
|
+
};
|
|
166
|
+
size: (value: string | number) => {
|
|
167
|
+
width: string | number;
|
|
168
|
+
height: string | number;
|
|
169
|
+
};
|
|
170
|
+
}>>;
|
|
86
171
|
declare const Content: import("../../../../node_modules/@stitches/react/types/styled-component").StyledComponent<"div", {}, {}, import("../../../../node_modules/@stitches/react/types/css-util").CSS<{}, {
|
|
87
172
|
colors: {
|
|
88
173
|
background: "white";
|
|
@@ -168,5 +253,5 @@ declare const Content: import("../../../../node_modules/@stitches/react/types/st
|
|
|
168
253
|
height: string | number;
|
|
169
254
|
};
|
|
170
255
|
}>>;
|
|
171
|
-
export { StyledDrawer, Content, };
|
|
256
|
+
export { StyledDrawer, Tint, Content, };
|
|
172
257
|
//# sourceMappingURL=Drawer.styled.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.styled.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/drawer/Drawer.styled.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAUhB,CAAC;AAEH,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAEX,CAAC;AAEH,OAAO,EACH,YAAY,EACZ,OAAO,GACV,CAAC"}
|
|
1
|
+
{"version":3,"file":"Drawer.styled.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/drawer/Drawer.styled.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAUhB,CAAC;AAEH,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAUR,CAAC;AAEH,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAEX,CAAC;AAEH,OAAO,EACH,YAAY,EACZ,IAAI,EACJ,OAAO,GACV,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.Content = exports.StyledDrawer = void 0;
|
|
3
|
+
exports.Content = exports.Tint = exports.StyledDrawer = void 0;
|
|
4
4
|
const theme_1 = require("../../../theme");
|
|
5
5
|
const StyledDrawer = (0, theme_1.styled)("div", {
|
|
6
6
|
position: "fixed",
|
|
@@ -14,6 +14,18 @@ const StyledDrawer = (0, theme_1.styled)("div", {
|
|
|
14
14
|
overflow: "auto",
|
|
15
15
|
});
|
|
16
16
|
exports.StyledDrawer = StyledDrawer;
|
|
17
|
+
const Tint = (0, theme_1.styled)("div", {
|
|
18
|
+
position: "fixed",
|
|
19
|
+
top: 0,
|
|
20
|
+
left: 0,
|
|
21
|
+
right: 0,
|
|
22
|
+
bottom: 0,
|
|
23
|
+
background: "$text",
|
|
24
|
+
opacity: 0,
|
|
25
|
+
transition: "opacity 300ms",
|
|
26
|
+
zIndex: 0,
|
|
27
|
+
});
|
|
28
|
+
exports.Tint = Tint;
|
|
17
29
|
const Content = (0, theme_1.styled)("div", {
|
|
18
30
|
height: "100%",
|
|
19
31
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.styled.js","sourceRoot":"","sources":["../../../../src/components/ui/drawer/Drawer.styled.ts"],"names":[],"mappings":";;;AAAA,0CAAwC;AAExC,MAAM,YAAY,GAAG,IAAA,cAAM,EAAC,KAAK,EAAE;IAC/B,QAAQ,EAAE,OAAO;IACjB,GAAG,EAAE,CAAC;IACN,IAAI,EAAE,CAAC;IACP,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,CAAC;IACT,UAAU,EAAE,aAAa;IACzB,MAAM,EAAE,CAAC;IACT,UAAU,EAAE,iBAAiB;IAC7B,QAAQ,EAAE,MAAM;CACnB,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"Drawer.styled.js","sourceRoot":"","sources":["../../../../src/components/ui/drawer/Drawer.styled.ts"],"names":[],"mappings":";;;AAAA,0CAAwC;AAExC,MAAM,YAAY,GAAG,IAAA,cAAM,EAAC,KAAK,EAAE;IAC/B,QAAQ,EAAE,OAAO;IACjB,GAAG,EAAE,CAAC;IACN,IAAI,EAAE,CAAC;IACP,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,CAAC;IACT,UAAU,EAAE,aAAa;IACzB,MAAM,EAAE,CAAC;IACT,UAAU,EAAE,iBAAiB;IAC7B,QAAQ,EAAE,MAAM;CACnB,CAAC,CAAC;AAmBC,oCAAY;AAjBhB,MAAM,IAAI,GAAG,IAAA,cAAM,EAAC,KAAK,EAAE;IACvB,QAAQ,EAAE,OAAO;IACjB,GAAG,EAAE,CAAC;IACN,IAAI,EAAE,CAAC;IACP,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,CAAC;IACT,UAAU,EAAE,OAAO;IACnB,OAAO,EAAE,CAAC;IACV,UAAU,EAAE,eAAe;IAC3B,MAAM,EAAE,CAAC;CACZ,CAAC,CAAC;AAQC,oBAAI;AANR,MAAM,OAAO,GAAG,IAAA,cAAM,EAAC,KAAK,EAAE;IAC1B,MAAM,EAAE,MAAM;CACjB,CAAC,CAAC;AAKC,0BAAO"}
|
|
@@ -2,13 +2,12 @@ import React from "react";
|
|
|
2
2
|
import { ContainerStyled, OverlayStyled } from "./Modal.styled";
|
|
3
3
|
type OverlayProps = React.ComponentProps<typeof OverlayStyled>;
|
|
4
4
|
type ContainerProps = React.ComponentProps<typeof ContainerStyled>;
|
|
5
|
-
interface Props {
|
|
5
|
+
interface Props extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
|
|
6
6
|
onOverlayClick?: (() => void) | "close" | null;
|
|
7
7
|
closeOnEsc?: boolean;
|
|
8
8
|
onClose: () => void;
|
|
9
9
|
isOpen: boolean;
|
|
10
10
|
title?: React.ReactNode;
|
|
11
|
-
className?: string;
|
|
12
11
|
portal?: boolean | HTMLElement;
|
|
13
12
|
children: React.ReactNode;
|
|
14
13
|
position?: OverlayProps["position"];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsE,MAAM,OAAO,CAAC;AAS3F,OAAO,EAAE,eAAe,EAAoB,aAAa,EAA8B,MAAM,gBAAgB,CAAC;AAE9G,KAAK,YAAY,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,CAAC;AAC/D,KAAK,cAAc,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,CAAC;AAkBnE,UAAU,KAAM,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACvE,cAAc,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,OAAO,GAAG,IAAI,CAAC;IAC/C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,GAAG,WAAW,CAAC;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,QAAQ,CAAC,EAAE,YAAY,CAAC,UAAU,CAAC,CAAC;IACpC,IAAI,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC;CACjC;AAoND,QAAA,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAET,CAAC;AAGH,QAAA,MAAM,sBAAsB,QAA6B,CAAC;AAC1D,QAAA,MAAM,kBAAkB,QAAyB,CAAC;AAClD,QAAA,MAAM,0BAA0B,QAA2B,CAAC;AAE5D,OAAO,EAAE,KAAK,EAAE,sBAAsB,EAAE,kBAAkB,EAAE,0BAA0B,EAAE,CAAC"}
|
|
@@ -32,54 +32,117 @@ var __importStar = (this && this.__importStar) || (function () {
|
|
|
32
32
|
return result;
|
|
33
33
|
};
|
|
34
34
|
})();
|
|
35
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
36
|
+
var t = {};
|
|
37
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
38
|
+
t[p] = s[p];
|
|
39
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
40
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
41
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
42
|
+
t[p[i]] = s[p[i]];
|
|
43
|
+
}
|
|
44
|
+
return t;
|
|
45
|
+
};
|
|
35
46
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
47
|
exports.ModalRemovePaddingSelector = exports.ModalTitleSelector = exports.ModalContainerSelector = exports.Modal = void 0;
|
|
37
48
|
const react_1 = __importStar(require("react"));
|
|
38
49
|
const react_dom_1 = require("react-dom");
|
|
39
50
|
const use_forwarded_ref_1 = require("@bedrock-layout/use-forwarded-ref");
|
|
40
51
|
const fnWithProps_1 = require("../../../types/fnWithProps");
|
|
52
|
+
const HandleEsc_1 = require("../../utils/HandleEsc");
|
|
41
53
|
const Modal_styled_1 = require("./Modal.styled");
|
|
42
|
-
const
|
|
54
|
+
const FOCUSABLE_SELECTOR = [
|
|
55
|
+
"a[href]",
|
|
56
|
+
"button:not([disabled])",
|
|
57
|
+
"input:not([disabled])",
|
|
58
|
+
"select:not([disabled])",
|
|
59
|
+
"textarea:not([disabled])",
|
|
60
|
+
"[tabindex]:not([tabindex=\"-1\"])",
|
|
61
|
+
].join(",");
|
|
62
|
+
const prefersReducedMotion = () => {
|
|
63
|
+
if (typeof window === "undefined") {
|
|
64
|
+
return false;
|
|
65
|
+
}
|
|
66
|
+
return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
67
|
+
};
|
|
68
|
+
const ModalBase = (0, react_1.forwardRef)((_a, ref) => {
|
|
69
|
+
var { children, onClose, isOpen, title, className, onOverlayClick = "close", closeOnEsc = true, portal = true, position, full } = _a, rest = __rest(_a, ["children", "onClose", "isOpen", "title", "className", "onOverlayClick", "closeOnEsc", "portal", "position", "full"]);
|
|
43
70
|
const [isClosing, setIsClosing] = (0, react_1.useState)(false);
|
|
44
71
|
const [isRendered, setIsRendered] = (0, react_1.useState)(false);
|
|
45
72
|
const overlayRef = (0, react_1.useRef)(null);
|
|
46
73
|
const containerRef = (0, use_forwarded_ref_1.useForwardedRef)(ref);
|
|
74
|
+
const previouslyFocusedRef = (0, react_1.useRef)(null);
|
|
75
|
+
const titleId = (0, react_1.useId)();
|
|
47
76
|
(0, react_1.useEffect)(() => {
|
|
48
|
-
if (
|
|
77
|
+
if (isOpen) {
|
|
78
|
+
setIsRendered(true);
|
|
79
|
+
setIsClosing(false);
|
|
49
80
|
return;
|
|
50
81
|
}
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
}
|
|
55
|
-
};
|
|
56
|
-
document.addEventListener("keydown", onKeyDown);
|
|
57
|
-
return () => {
|
|
58
|
-
document.removeEventListener("keydown", onKeyDown);
|
|
59
|
-
};
|
|
60
|
-
}, [isOpen, closeOnEsc, onClose]);
|
|
61
|
-
(0, react_1.useEffect)(() => {
|
|
62
|
-
if (!isOpen) {
|
|
63
|
-
setIsClosing(true);
|
|
82
|
+
if (prefersReducedMotion()) {
|
|
83
|
+
setIsRendered(false);
|
|
84
|
+
setIsClosing(false);
|
|
64
85
|
return;
|
|
65
86
|
}
|
|
66
|
-
|
|
67
|
-
setIsClosing(false);
|
|
87
|
+
setIsClosing(true);
|
|
68
88
|
}, [isOpen]);
|
|
69
89
|
(0, react_1.useEffect)(() => {
|
|
70
90
|
if (!isClosing) {
|
|
71
91
|
return;
|
|
72
92
|
}
|
|
73
|
-
|
|
93
|
+
const overlay = overlayRef.current;
|
|
94
|
+
const container = containerRef.current;
|
|
95
|
+
if (!overlay || !container) {
|
|
74
96
|
return;
|
|
75
97
|
}
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
98
|
+
overlay.style.animation = "none";
|
|
99
|
+
container.style.animation = "none";
|
|
100
|
+
overlay.offsetHeight;
|
|
101
|
+
overlay.style.removeProperty("animation");
|
|
102
|
+
container.style.removeProperty("animation");
|
|
81
103
|
}, [isClosing, containerRef]);
|
|
82
|
-
|
|
104
|
+
(0, react_1.useEffect)(() => {
|
|
105
|
+
var _a;
|
|
106
|
+
if (!isOpen || !isRendered) {
|
|
107
|
+
return;
|
|
108
|
+
}
|
|
109
|
+
const container = containerRef.current;
|
|
110
|
+
const overlay = overlayRef.current;
|
|
111
|
+
if (!container || !overlay) {
|
|
112
|
+
return;
|
|
113
|
+
}
|
|
114
|
+
previouslyFocusedRef.current = document.activeElement instanceof HTMLElement
|
|
115
|
+
? document.activeElement
|
|
116
|
+
: null;
|
|
117
|
+
const focusables = container.querySelectorAll(FOCUSABLE_SELECTOR);
|
|
118
|
+
((_a = focusables[0]) !== null && _a !== void 0 ? _a : container).focus();
|
|
119
|
+
const inerted = [];
|
|
120
|
+
let cursor = overlay;
|
|
121
|
+
while (cursor !== document.body) {
|
|
122
|
+
const parentEl = cursor.parentElement;
|
|
123
|
+
if (!parentEl) {
|
|
124
|
+
break;
|
|
125
|
+
}
|
|
126
|
+
for (const child of Array.from(parentEl.children)) {
|
|
127
|
+
if (child === cursor || !(child instanceof HTMLElement)) {
|
|
128
|
+
continue;
|
|
129
|
+
}
|
|
130
|
+
if (!child.hasAttribute("inert")) {
|
|
131
|
+
child.setAttribute("inert", "");
|
|
132
|
+
inerted.push(child);
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
cursor = parentEl;
|
|
136
|
+
}
|
|
137
|
+
return () => {
|
|
138
|
+
var _a;
|
|
139
|
+
inerted.forEach((el) => {
|
|
140
|
+
el.removeAttribute("inert");
|
|
141
|
+
});
|
|
142
|
+
(_a = previouslyFocusedRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
143
|
+
};
|
|
144
|
+
}, [isOpen, isRendered, containerRef]);
|
|
145
|
+
const titleElem = title ? react_1.default.createElement(Modal_styled_1.TitleStyled, { id: titleId }, title) : null;
|
|
83
146
|
const handleOverlayClick = (0, react_1.useCallback)((e) => {
|
|
84
147
|
if (e.target !== e.currentTarget) {
|
|
85
148
|
return;
|
|
@@ -87,11 +150,14 @@ const ModalBase = (0, react_1.forwardRef)(({ children, onClose, isOpen, title, c
|
|
|
87
150
|
if (onOverlayClick === "close") {
|
|
88
151
|
onClose();
|
|
89
152
|
}
|
|
90
|
-
if (typeof onOverlayClick === "function") {
|
|
153
|
+
else if (typeof onOverlayClick === "function") {
|
|
91
154
|
onOverlayClick();
|
|
92
155
|
}
|
|
93
156
|
}, [onOverlayClick, onClose]);
|
|
94
|
-
const handleAnimationEnd = (0, react_1.useCallback)(() => {
|
|
157
|
+
const handleAnimationEnd = (0, react_1.useCallback)((e) => {
|
|
158
|
+
if (e.target !== e.currentTarget) {
|
|
159
|
+
return;
|
|
160
|
+
}
|
|
95
161
|
if (isOpen) {
|
|
96
162
|
return;
|
|
97
163
|
}
|
|
@@ -101,31 +167,37 @@ const ModalBase = (0, react_1.forwardRef)(({ children, onClose, isOpen, title, c
|
|
|
101
167
|
return null;
|
|
102
168
|
}
|
|
103
169
|
const overlayVariants = {};
|
|
104
|
-
|
|
105
|
-
|
|
170
|
+
if (isClosing) {
|
|
171
|
+
overlayVariants.isClosing = true;
|
|
172
|
+
}
|
|
173
|
+
if (position != null) {
|
|
174
|
+
overlayVariants.position = position;
|
|
175
|
+
}
|
|
106
176
|
const containerVariants = {};
|
|
107
|
-
|
|
108
|
-
|
|
177
|
+
if (isClosing) {
|
|
178
|
+
containerVariants.isClosing = true;
|
|
179
|
+
}
|
|
180
|
+
if (full != null) {
|
|
181
|
+
containerVariants.full = full;
|
|
182
|
+
}
|
|
109
183
|
const childrenCount = react_1.default.Children.count(children);
|
|
110
184
|
const chld = react_1.default.Children.map(children, (child, index) => {
|
|
111
185
|
var _a;
|
|
112
|
-
if (react_1.default.isValidElement(child)) {
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
css.marginBottom = Modal_styled_1.NEGATIVE_PADDING;
|
|
120
|
-
}
|
|
121
|
-
return react_1.default.cloneElement(child, { css });
|
|
186
|
+
if (react_1.default.isValidElement(child) && child.type === Modal_styled_1.RemovePadding) {
|
|
187
|
+
const css = Object.assign({}, ((_a = child.props.css) !== null && _a !== void 0 ? _a : {}));
|
|
188
|
+
if (index === 0 && titleElem == null) {
|
|
189
|
+
css.marginTop = Modal_styled_1.NEGATIVE_PADDING;
|
|
190
|
+
}
|
|
191
|
+
if (index === childrenCount - 1) {
|
|
192
|
+
css.marginBottom = Modal_styled_1.NEGATIVE_PADDING;
|
|
122
193
|
}
|
|
123
|
-
return child;
|
|
194
|
+
return react_1.default.cloneElement(child, { css });
|
|
124
195
|
}
|
|
125
196
|
return child;
|
|
126
197
|
});
|
|
127
198
|
const tree = (react_1.default.createElement(Modal_styled_1.OverlayStyled, Object.assign({}, overlayVariants, { onClick: handleOverlayClick, ref: overlayRef, onAnimationEnd: handleAnimationEnd }),
|
|
128
|
-
react_1.default.createElement(
|
|
199
|
+
closeOnEsc ? react_1.default.createElement(HandleEsc_1.HandleEsc, { onPress: onClose }) : null,
|
|
200
|
+
react_1.default.createElement(Modal_styled_1.ContainerStyled, Object.assign({ role: "dialog", "aria-modal": true, "aria-labelledby": titleElem ? titleId : undefined, tabIndex: -1, className: className }, containerVariants, { ref: containerRef }, rest),
|
|
129
201
|
titleElem,
|
|
130
202
|
chld)));
|
|
131
203
|
if (portal) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../../src/components/ui/modal/Modal.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../../src/components/ui/modal/Modal.tsx"],"names":[],"mappings":"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"}
|
|
@@ -260,7 +260,7 @@ declare const ContainerStyled: import("../../../../node_modules/@stitches/react/
|
|
|
260
260
|
height: string | number;
|
|
261
261
|
};
|
|
262
262
|
}>>;
|
|
263
|
-
declare const TitleStyled: import("../../../../node_modules/@stitches/react/types/styled-component").StyledComponent<"
|
|
263
|
+
declare const TitleStyled: import("../../../../node_modules/@stitches/react/types/styled-component").StyledComponent<"h2", {}, {}, import("../../../../node_modules/@stitches/react/types/css-util").CSS<{}, {
|
|
264
264
|
colors: {
|
|
265
265
|
background: "white";
|
|
266
266
|
mainColor: "#008ad2";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.styled.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/modal/Modal.styled.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,gBAAgB,QAAe,CAAC;AAWtC,QAAA,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"Modal.styled.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/modal/Modal.styled.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,gBAAgB,QAAe,CAAC;AAWtC,QAAA,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCjB,CAAC;AAaH,QAAA,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAEjB,CAAC;AAEH,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCnB,CAAC;AAEH,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAMf,CAAC;AAEH,OAAO,EACH,aAAa,EACb,aAAa,EACb,eAAe,EACf,WAAW,EAEX,gBAAgB,GACnB,CAAC"}
|