react-better-html 1.1.111 → 1.1.113
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +152 -136
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +152 -136
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -1
package/dist/index.mjs
CHANGED
|
@@ -2819,6 +2819,7 @@ var Divider_default = {
|
|
|
2819
2819
|
|
|
2820
2820
|
// src/components/Modal.tsx
|
|
2821
2821
|
import { memo as memo9, useCallback as useCallback5, forwardRef as forwardRef6, useImperativeHandle, useRef as useRef2, useState as useState3 } from "react";
|
|
2822
|
+
import { createPortal } from "react-dom";
|
|
2822
2823
|
import styled7 from "styled-components";
|
|
2823
2824
|
import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
2824
2825
|
var DialogStylesElement = styled7.dialog.withConfig({
|
|
@@ -2915,101 +2916,104 @@ var ModalComponent = forwardRef6(function Modal({
|
|
|
2915
2916
|
},
|
|
2916
2917
|
[onClickOpen, onClickClose, isOpened]
|
|
2917
2918
|
);
|
|
2918
|
-
return
|
|
2919
|
-
|
|
2920
|
-
|
|
2921
|
-
|
|
2922
|
-
|
|
2923
|
-
|
|
2924
|
-
|
|
2925
|
-
|
|
2926
|
-
|
|
2927
|
-
|
|
2928
|
-
|
|
2929
|
-
|
|
2930
|
-
|
|
2931
|
-
|
|
2932
|
-
|
|
2933
|
-
|
|
2934
|
-
|
|
2935
|
-
|
|
2936
|
-
|
|
2937
|
-
|
|
2938
|
-
|
|
2939
|
-
|
|
2940
|
-
|
|
2941
|
-
|
|
2942
|
-
|
|
2943
|
-
|
|
2944
|
-
|
|
2945
|
-
|
|
2946
|
-
|
|
2947
|
-
|
|
2948
|
-
|
|
2949
|
-
|
|
2950
|
-
|
|
2951
|
-
|
|
2952
|
-
|
|
2953
|
-
/* @__PURE__ */ jsxs5(
|
|
2954
|
-
|
|
2955
|
-
|
|
2956
|
-
|
|
2957
|
-
|
|
2958
|
-
|
|
2959
|
-
|
|
2960
|
-
|
|
2961
|
-
|
|
2962
|
-
|
|
2963
|
-
|
|
2964
|
-
|
|
2965
|
-
|
|
2919
|
+
return createPortal(
|
|
2920
|
+
/* @__PURE__ */ jsx9(
|
|
2921
|
+
DialogStylesElement,
|
|
2922
|
+
{
|
|
2923
|
+
theme: theme2,
|
|
2924
|
+
colorTheme,
|
|
2925
|
+
opacity: !isOpened ? 0 : 1,
|
|
2926
|
+
onClose: onClickClose,
|
|
2927
|
+
ref: dialogRef,
|
|
2928
|
+
children: isOpenedLate ? /* @__PURE__ */ jsx9(
|
|
2929
|
+
Div_default.column,
|
|
2930
|
+
{
|
|
2931
|
+
position: "relative",
|
|
2932
|
+
width: "100%",
|
|
2933
|
+
maxWidth: maxWidth ?? app.contentMaxWidth / 1.3,
|
|
2934
|
+
minHeight: `calc(100% - ${theme2.styles.space * 2}px)`,
|
|
2935
|
+
alignItems: "center",
|
|
2936
|
+
justifyContent: "center",
|
|
2937
|
+
marginBlock: theme2.styles.space,
|
|
2938
|
+
marginInline: "auto",
|
|
2939
|
+
transform: `translateY(${theme2.styles.space}px)`,
|
|
2940
|
+
transition: theme2.styles.transition,
|
|
2941
|
+
animation: isOpened ? "fadeInAnimation 0.2s ease forwards" : "fadeOutAnimation 0.2s ease forwards",
|
|
2942
|
+
children: /* @__PURE__ */ jsxs5(
|
|
2943
|
+
Div_default,
|
|
2944
|
+
{
|
|
2945
|
+
position: "relative",
|
|
2946
|
+
width: "100%",
|
|
2947
|
+
minHeight: 32 + theme2.styles.space * 2,
|
|
2948
|
+
backgroundColor: theme2.colors.backgroundBase,
|
|
2949
|
+
borderRadius: theme2.styles.borderRadius * 2,
|
|
2950
|
+
paddingInline: !title ? theme2.styles.space + theme2.styles.gap : void 0,
|
|
2951
|
+
paddingBlock: !title ? theme2.styles.space : void 0,
|
|
2952
|
+
overflow,
|
|
2953
|
+
children: [
|
|
2954
|
+
title ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
|
|
2955
|
+
/* @__PURE__ */ jsxs5(
|
|
2956
|
+
Div_default.row,
|
|
2957
|
+
{
|
|
2958
|
+
alignItems: "center",
|
|
2959
|
+
gap: theme2.styles.gap,
|
|
2960
|
+
backgroundColor: headerBackgroundColor,
|
|
2961
|
+
borderTopLeftRadius: theme2.styles.borderRadius * 2 - 1,
|
|
2962
|
+
borderTopRightRadius: theme2.styles.borderRadius * 2 - 1,
|
|
2963
|
+
paddingInline: theme2.styles.space + theme2.styles.gap,
|
|
2964
|
+
paddingBlock: theme2.styles.space,
|
|
2965
|
+
transition: theme2.styles.transition,
|
|
2966
|
+
children: [
|
|
2967
|
+
/* @__PURE__ */ jsxs5(Div_default.column, { flex: 1, gap: theme2.styles.gap / 2, children: [
|
|
2968
|
+
/* @__PURE__ */ jsx9(
|
|
2969
|
+
Text_default,
|
|
2970
|
+
{
|
|
2971
|
+
as: "h1",
|
|
2972
|
+
color: titleColor ?? theme2.colors.textPrimary,
|
|
2973
|
+
transition: theme2.styles.transition,
|
|
2974
|
+
children: title
|
|
2975
|
+
}
|
|
2976
|
+
),
|
|
2977
|
+
description && /* @__PURE__ */ jsx9(
|
|
2978
|
+
Text_default,
|
|
2979
|
+
{
|
|
2980
|
+
color: descriptionColor ?? theme2.colors.textSecondary,
|
|
2981
|
+
transition: theme2.styles.transition,
|
|
2982
|
+
children: description
|
|
2983
|
+
}
|
|
2984
|
+
)
|
|
2985
|
+
] }),
|
|
2966
2986
|
/* @__PURE__ */ jsx9(
|
|
2967
|
-
|
|
2968
|
-
{
|
|
2969
|
-
as: "h1",
|
|
2970
|
-
color: titleColor ?? theme2.colors.textPrimary,
|
|
2971
|
-
transition: theme2.styles.transition,
|
|
2972
|
-
children: title
|
|
2973
|
-
}
|
|
2974
|
-
),
|
|
2975
|
-
description && /* @__PURE__ */ jsx9(
|
|
2976
|
-
Text_default,
|
|
2987
|
+
Button_default.icon,
|
|
2977
2988
|
{
|
|
2978
|
-
|
|
2979
|
-
|
|
2980
|
-
|
|
2989
|
+
icon: "XMark",
|
|
2990
|
+
marginTop: 1,
|
|
2991
|
+
iconColor: titleColor,
|
|
2992
|
+
onClick: onClickClose,
|
|
2993
|
+
transition: theme2.styles.transition
|
|
2981
2994
|
}
|
|
2982
2995
|
)
|
|
2983
|
-
]
|
|
2984
|
-
|
|
2985
|
-
|
|
2986
|
-
|
|
2987
|
-
|
|
2988
|
-
|
|
2989
|
-
|
|
2990
|
-
|
|
2991
|
-
|
|
2992
|
-
|
|
2993
|
-
|
|
2994
|
-
]
|
|
2996
|
+
]
|
|
2997
|
+
}
|
|
2998
|
+
),
|
|
2999
|
+
/* @__PURE__ */ jsx9(Divider_default.horizontal, {})
|
|
3000
|
+
] }) : /* @__PURE__ */ jsx9(Div_default, { position: "absolute", top: theme2.styles.space, right: theme2.styles.space, children: /* @__PURE__ */ jsx9(Button_default.icon, { icon: "XMark", onClick: onClickClose }) }),
|
|
3001
|
+
/* @__PURE__ */ jsx9(
|
|
3002
|
+
Div_default,
|
|
3003
|
+
{
|
|
3004
|
+
paddingInline: title ? theme2.styles.space + theme2.styles.gap : void 0,
|
|
3005
|
+
paddingBlock: title ? theme2.styles.space : void 0,
|
|
3006
|
+
children
|
|
2995
3007
|
}
|
|
2996
|
-
)
|
|
2997
|
-
|
|
2998
|
-
|
|
2999
|
-
|
|
3000
|
-
|
|
3001
|
-
|
|
3002
|
-
|
|
3003
|
-
|
|
3004
|
-
|
|
3005
|
-
}
|
|
3006
|
-
)
|
|
3007
|
-
]
|
|
3008
|
-
}
|
|
3009
|
-
)
|
|
3010
|
-
}
|
|
3011
|
-
) : void 0
|
|
3012
|
-
}
|
|
3008
|
+
)
|
|
3009
|
+
]
|
|
3010
|
+
}
|
|
3011
|
+
)
|
|
3012
|
+
}
|
|
3013
|
+
) : void 0
|
|
3014
|
+
}
|
|
3015
|
+
),
|
|
3016
|
+
document.body
|
|
3013
3017
|
);
|
|
3014
3018
|
});
|
|
3015
3019
|
ModalComponent.confirmation = forwardRef6(function Confirmation({ continueButtonLoaderName, onContinue, onCancel, ...props }, ref) {
|
|
@@ -3024,7 +3028,7 @@ ModalComponent.confirmation = forwardRef6(function Confirmation({ continueButton
|
|
|
3024
3028
|
modalRef.current?.close();
|
|
3025
3029
|
}, [onContinue]);
|
|
3026
3030
|
useImperativeHandle(ref, () => modalRef.current, []);
|
|
3027
|
-
return /* @__PURE__ */ jsxs5(
|
|
3031
|
+
return /* @__PURE__ */ jsxs5(ModalComponent, { title: "Are you sure?", maxWidth: 660, ...props, ref: modalRef, children: [
|
|
3028
3032
|
/* @__PURE__ */ jsx9(Text_default, { color: theme2.colors.textSecondary, children: "Do you really want to continue? This action may be irreversible." }),
|
|
3029
3033
|
/* @__PURE__ */ jsxs5(
|
|
3030
3034
|
Div_default.row,
|
|
@@ -3053,7 +3057,7 @@ ModalComponent.destructive = forwardRef6(function Destructive2({ deleteButtonLoa
|
|
|
3053
3057
|
modalRef.current?.close();
|
|
3054
3058
|
}, [onDelete]);
|
|
3055
3059
|
useImperativeHandle(ref, () => modalRef.current, []);
|
|
3056
|
-
return /* @__PURE__ */ jsxs5(
|
|
3060
|
+
return /* @__PURE__ */ jsxs5(ModalComponent, { title: "Are you sure?", maxWidth: 660, ...props, ref: modalRef, children: [
|
|
3057
3061
|
/* @__PURE__ */ jsx9(Text_default, { color: theme2.colors.textSecondary, children: "Do you really want to continue with the deleting of the item? This action may be irreversible." }),
|
|
3058
3062
|
/* @__PURE__ */ jsxs5(
|
|
3059
3063
|
Div_default.row,
|
|
@@ -3104,6 +3108,7 @@ var PageHolderComponent = forwardRef7(function PageHolder({ noMaxContentWidth, c
|
|
|
3104
3108
|
);
|
|
3105
3109
|
});
|
|
3106
3110
|
PageHolderComponent.center = forwardRef7(function Center({
|
|
3111
|
+
pageBackgroundColor,
|
|
3107
3112
|
sideImageSrc,
|
|
3108
3113
|
sideImageName,
|
|
3109
3114
|
sideImagePosition = "right",
|
|
@@ -3117,49 +3122,60 @@ PageHolderComponent.center = forwardRef7(function Center({
|
|
|
3117
3122
|
const mediaQuery = useMediaQuery();
|
|
3118
3123
|
const { app } = useBetterHtmlContextInternal();
|
|
3119
3124
|
const breakingPoint = mediaQuery.size1000;
|
|
3120
|
-
|
|
3121
|
-
|
|
3122
|
-
|
|
3123
|
-
|
|
3124
|
-
|
|
3125
|
-
|
|
3126
|
-
|
|
3127
|
-
|
|
3128
|
-
|
|
3129
|
-
|
|
3130
|
-
|
|
3131
|
-
children
|
|
3132
|
-
|
|
3133
|
-
|
|
3134
|
-
|
|
3135
|
-
|
|
3136
|
-
|
|
3137
|
-
|
|
3138
|
-
|
|
3139
|
-
|
|
3140
|
-
|
|
3141
|
-
|
|
3142
|
-
|
|
3143
|
-
|
|
3144
|
-
|
|
3145
|
-
|
|
3146
|
-
|
|
3147
|
-
|
|
3148
|
-
|
|
3149
|
-
|
|
3150
|
-
|
|
3151
|
-
|
|
3152
|
-
|
|
3153
|
-
|
|
3154
|
-
|
|
3155
|
-
|
|
3156
|
-
|
|
3157
|
-
|
|
3158
|
-
|
|
3159
|
-
|
|
3160
|
-
|
|
3161
|
-
|
|
3162
|
-
|
|
3125
|
+
const withSideImage = (sideImageSrc || sideImageName) && !breakingPoint;
|
|
3126
|
+
return /* @__PURE__ */ jsxs6(
|
|
3127
|
+
Div_default.row,
|
|
3128
|
+
{
|
|
3129
|
+
width: "100%",
|
|
3130
|
+
minHeight: "100svh",
|
|
3131
|
+
alignItems: "center",
|
|
3132
|
+
justifyContent: "center",
|
|
3133
|
+
backgroundColor: pageBackgroundColor,
|
|
3134
|
+
children: [
|
|
3135
|
+
sideImagePosition === "left" && withSideImage && /* @__PURE__ */ jsx10(Div_default, { width: "50%" }),
|
|
3136
|
+
/* @__PURE__ */ jsx10(Div_default.column, { width: `${withSideImage ? 50 : 100}%`, alignItems: "center", children: /* @__PURE__ */ jsx10(
|
|
3137
|
+
Div_default.box,
|
|
3138
|
+
{
|
|
3139
|
+
width: `calc(100% - ${theme2.styles.space}px * 2)`,
|
|
3140
|
+
maxWidth: !noMaxContentWidth ? app.contentMaxWidth / 2 : void 0,
|
|
3141
|
+
marginInline: theme2.styles.space,
|
|
3142
|
+
marginBlock: theme2.styles.space,
|
|
3143
|
+
...props,
|
|
3144
|
+
ref,
|
|
3145
|
+
children
|
|
3146
|
+
}
|
|
3147
|
+
) }),
|
|
3148
|
+
sideImagePosition === "right" && withSideImage && /* @__PURE__ */ jsx10(Div_default, { width: "50%" }),
|
|
3149
|
+
withSideImage && /* @__PURE__ */ jsxs6(
|
|
3150
|
+
Div_default,
|
|
3151
|
+
{
|
|
3152
|
+
position: "fixed",
|
|
3153
|
+
width: "50%",
|
|
3154
|
+
height: "100svh",
|
|
3155
|
+
top: 0,
|
|
3156
|
+
left: sideImagePosition === "left" ? 0 : "auto",
|
|
3157
|
+
right: sideImagePosition === "right" ? 0 : "auto",
|
|
3158
|
+
children: [
|
|
3159
|
+
/* @__PURE__ */ jsx10(
|
|
3160
|
+
Div_default.row,
|
|
3161
|
+
{
|
|
3162
|
+
position: "absolute",
|
|
3163
|
+
width: "100%",
|
|
3164
|
+
height: "100%",
|
|
3165
|
+
top: 0,
|
|
3166
|
+
left: 0,
|
|
3167
|
+
justifyContent: sideImageAlignment === "left" ? "flex-start" : sideImageAlignment === "right" ? "flex-end" : "center",
|
|
3168
|
+
overflow: "hidden",
|
|
3169
|
+
children: /* @__PURE__ */ jsx10(Image_default, { name: sideImageName, height: "100%", src: sideImageSrc })
|
|
3170
|
+
}
|
|
3171
|
+
),
|
|
3172
|
+
/* @__PURE__ */ jsx10(Div_default, { position: "absolute", width: "100%", bottom: theme2.styles.space, children: sideImageFooter })
|
|
3173
|
+
]
|
|
3174
|
+
}
|
|
3175
|
+
)
|
|
3176
|
+
]
|
|
3177
|
+
}
|
|
3178
|
+
);
|
|
3163
3179
|
});
|
|
3164
3180
|
var PageHolder2 = memo10(PageHolderComponent);
|
|
3165
3181
|
PageHolder2.center = PageHolderComponent.center;
|
|
@@ -5224,7 +5240,7 @@ var DropdownComponent = forwardRef10(function Dropdown({
|
|
|
5224
5240
|
Div_default.row,
|
|
5225
5241
|
{
|
|
5226
5242
|
position: "absolute",
|
|
5227
|
-
top: 46 / 2 + (label ? 16 + theme2.styles.gap : 0),
|
|
5243
|
+
top: 46 / 2 + (label ? 16 + theme2.styles.gap / 2 : 0),
|
|
5228
5244
|
right: theme2.styles.space + 1,
|
|
5229
5245
|
alignItems: "center",
|
|
5230
5246
|
gap: theme2.styles.gap,
|