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.
Files changed (7) hide show
  1. package/dist/index.d.mts +1 -0
  2. package/dist/index.d.ts +1 -0
  3. package/dist/index.js +152 -136
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +152 -136
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +2 -1
package/dist/index.d.mts CHANGED
@@ -318,6 +318,7 @@ type PageHolderProps = {
318
318
  type PageHolderComponentType = {
319
319
  (props: ComponentPropWithRef<HTMLDivElement, PageHolderProps>): React.ReactElement;
320
320
  center: (props: ComponentPropWithRef<HTMLDivElement, PageHolderProps & {
321
+ pageBackgroundColor?: string;
321
322
  sideImageSrc?: string;
322
323
  sideImageName?: AssetName | AnyOtherString;
323
324
  /** @default "right" */
package/dist/index.d.ts CHANGED
@@ -318,6 +318,7 @@ type PageHolderProps = {
318
318
  type PageHolderComponentType = {
319
319
  (props: ComponentPropWithRef<HTMLDivElement, PageHolderProps>): React.ReactElement;
320
320
  center: (props: ComponentPropWithRef<HTMLDivElement, PageHolderProps & {
321
+ pageBackgroundColor?: string;
321
322
  sideImageSrc?: string;
322
323
  sideImageName?: AssetName | AnyOtherString;
323
324
  /** @default "right" */
package/dist/index.js CHANGED
@@ -2899,6 +2899,7 @@ var Divider_default = {
2899
2899
 
2900
2900
  // src/components/Modal.tsx
2901
2901
  var import_react11 = require("react");
2902
+ var import_react_dom = require("react-dom");
2902
2903
  var import_styled_components8 = __toESM(require("styled-components"));
2903
2904
  var import_jsx_runtime9 = require("react/jsx-runtime");
2904
2905
  var DialogStylesElement = import_styled_components8.default.dialog.withConfig({
@@ -2995,101 +2996,104 @@ var ModalComponent = (0, import_react11.forwardRef)(function Modal({
2995
2996
  },
2996
2997
  [onClickOpen, onClickClose, isOpened]
2997
2998
  );
2998
- return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2999
- DialogStylesElement,
3000
- {
3001
- theme: theme2,
3002
- colorTheme,
3003
- opacity: !isOpened ? 0 : 1,
3004
- onClose: onClickClose,
3005
- ref: dialogRef,
3006
- children: isOpenedLate ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
3007
- Div_default.column,
3008
- {
3009
- position: "relative",
3010
- width: "100%",
3011
- maxWidth: maxWidth ?? app.contentMaxWidth / 1.3,
3012
- minHeight: `calc(100% - ${theme2.styles.space * 2}px)`,
3013
- alignItems: "center",
3014
- justifyContent: "center",
3015
- marginBlock: theme2.styles.space,
3016
- marginInline: "auto",
3017
- transform: `translateY(${theme2.styles.space}px)`,
3018
- transition: theme2.styles.transition,
3019
- animation: isOpened ? "fadeInAnimation 0.2s ease forwards" : "fadeOutAnimation 0.2s ease forwards",
3020
- children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
3021
- Div_default,
3022
- {
3023
- position: "relative",
3024
- width: "100%",
3025
- minHeight: 32 + theme2.styles.space * 2,
3026
- backgroundColor: theme2.colors.backgroundBase,
3027
- borderRadius: theme2.styles.borderRadius * 2,
3028
- paddingInline: !title ? theme2.styles.space + theme2.styles.gap : void 0,
3029
- paddingBlock: !title ? theme2.styles.space : void 0,
3030
- overflow,
3031
- children: [
3032
- title ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
3033
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
3034
- Div_default.row,
3035
- {
3036
- alignItems: "center",
3037
- gap: theme2.styles.gap,
3038
- backgroundColor: headerBackgroundColor,
3039
- borderTopLeftRadius: theme2.styles.borderRadius * 2 - 1,
3040
- borderTopRightRadius: theme2.styles.borderRadius * 2 - 1,
3041
- paddingInline: theme2.styles.space + theme2.styles.gap,
3042
- paddingBlock: theme2.styles.space,
3043
- transition: theme2.styles.transition,
3044
- children: [
3045
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Div_default.column, { flex: 1, gap: theme2.styles.gap / 2, children: [
2999
+ return (0, import_react_dom.createPortal)(
3000
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
3001
+ DialogStylesElement,
3002
+ {
3003
+ theme: theme2,
3004
+ colorTheme,
3005
+ opacity: !isOpened ? 0 : 1,
3006
+ onClose: onClickClose,
3007
+ ref: dialogRef,
3008
+ children: isOpenedLate ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
3009
+ Div_default.column,
3010
+ {
3011
+ position: "relative",
3012
+ width: "100%",
3013
+ maxWidth: maxWidth ?? app.contentMaxWidth / 1.3,
3014
+ minHeight: `calc(100% - ${theme2.styles.space * 2}px)`,
3015
+ alignItems: "center",
3016
+ justifyContent: "center",
3017
+ marginBlock: theme2.styles.space,
3018
+ marginInline: "auto",
3019
+ transform: `translateY(${theme2.styles.space}px)`,
3020
+ transition: theme2.styles.transition,
3021
+ animation: isOpened ? "fadeInAnimation 0.2s ease forwards" : "fadeOutAnimation 0.2s ease forwards",
3022
+ children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
3023
+ Div_default,
3024
+ {
3025
+ position: "relative",
3026
+ width: "100%",
3027
+ minHeight: 32 + theme2.styles.space * 2,
3028
+ backgroundColor: theme2.colors.backgroundBase,
3029
+ borderRadius: theme2.styles.borderRadius * 2,
3030
+ paddingInline: !title ? theme2.styles.space + theme2.styles.gap : void 0,
3031
+ paddingBlock: !title ? theme2.styles.space : void 0,
3032
+ overflow,
3033
+ children: [
3034
+ title ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
3035
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
3036
+ Div_default.row,
3037
+ {
3038
+ alignItems: "center",
3039
+ gap: theme2.styles.gap,
3040
+ backgroundColor: headerBackgroundColor,
3041
+ borderTopLeftRadius: theme2.styles.borderRadius * 2 - 1,
3042
+ borderTopRightRadius: theme2.styles.borderRadius * 2 - 1,
3043
+ paddingInline: theme2.styles.space + theme2.styles.gap,
3044
+ paddingBlock: theme2.styles.space,
3045
+ transition: theme2.styles.transition,
3046
+ children: [
3047
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Div_default.column, { flex: 1, gap: theme2.styles.gap / 2, children: [
3048
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
3049
+ Text_default,
3050
+ {
3051
+ as: "h1",
3052
+ color: titleColor ?? theme2.colors.textPrimary,
3053
+ transition: theme2.styles.transition,
3054
+ children: title
3055
+ }
3056
+ ),
3057
+ description && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
3058
+ Text_default,
3059
+ {
3060
+ color: descriptionColor ?? theme2.colors.textSecondary,
3061
+ transition: theme2.styles.transition,
3062
+ children: description
3063
+ }
3064
+ )
3065
+ ] }),
3046
3066
  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
3047
- Text_default,
3048
- {
3049
- as: "h1",
3050
- color: titleColor ?? theme2.colors.textPrimary,
3051
- transition: theme2.styles.transition,
3052
- children: title
3053
- }
3054
- ),
3055
- description && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
3056
- Text_default,
3067
+ Button_default.icon,
3057
3068
  {
3058
- color: descriptionColor ?? theme2.colors.textSecondary,
3059
- transition: theme2.styles.transition,
3060
- children: description
3069
+ icon: "XMark",
3070
+ marginTop: 1,
3071
+ iconColor: titleColor,
3072
+ onClick: onClickClose,
3073
+ transition: theme2.styles.transition
3061
3074
  }
3062
3075
  )
3063
- ] }),
3064
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
3065
- Button_default.icon,
3066
- {
3067
- icon: "XMark",
3068
- marginTop: 1,
3069
- iconColor: titleColor,
3070
- onClick: onClickClose,
3071
- transition: theme2.styles.transition
3072
- }
3073
- )
3074
- ]
3076
+ ]
3077
+ }
3078
+ ),
3079
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Divider_default.horizontal, {})
3080
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Div_default, { position: "absolute", top: theme2.styles.space, right: theme2.styles.space, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Button_default.icon, { icon: "XMark", onClick: onClickClose }) }),
3081
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
3082
+ Div_default,
3083
+ {
3084
+ paddingInline: title ? theme2.styles.space + theme2.styles.gap : void 0,
3085
+ paddingBlock: title ? theme2.styles.space : void 0,
3086
+ children
3075
3087
  }
3076
- ),
3077
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Divider_default.horizontal, {})
3078
- ] }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Div_default, { position: "absolute", top: theme2.styles.space, right: theme2.styles.space, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Button_default.icon, { icon: "XMark", onClick: onClickClose }) }),
3079
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
3080
- Div_default,
3081
- {
3082
- paddingInline: title ? theme2.styles.space + theme2.styles.gap : void 0,
3083
- paddingBlock: title ? theme2.styles.space : void 0,
3084
- children
3085
- }
3086
- )
3087
- ]
3088
- }
3089
- )
3090
- }
3091
- ) : void 0
3092
- }
3088
+ )
3089
+ ]
3090
+ }
3091
+ )
3092
+ }
3093
+ ) : void 0
3094
+ }
3095
+ ),
3096
+ document.body
3093
3097
  );
3094
3098
  });
3095
3099
  ModalComponent.confirmation = (0, import_react11.forwardRef)(function Confirmation({ continueButtonLoaderName, onContinue, onCancel, ...props }, ref) {
@@ -3104,7 +3108,7 @@ ModalComponent.confirmation = (0, import_react11.forwardRef)(function Confirmati
3104
3108
  modalRef.current?.close();
3105
3109
  }, [onContinue]);
3106
3110
  (0, import_react11.useImperativeHandle)(ref, () => modalRef.current, []);
3107
- return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Modal2, { title: "Are you sure?", maxWidth: 660, ...props, ref: modalRef, children: [
3111
+ return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(ModalComponent, { title: "Are you sure?", maxWidth: 660, ...props, ref: modalRef, children: [
3108
3112
  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text_default, { color: theme2.colors.textSecondary, children: "Do you really want to continue? This action may be irreversible." }),
3109
3113
  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
3110
3114
  Div_default.row,
@@ -3133,7 +3137,7 @@ ModalComponent.destructive = (0, import_react11.forwardRef)(function Destructive
3133
3137
  modalRef.current?.close();
3134
3138
  }, [onDelete]);
3135
3139
  (0, import_react11.useImperativeHandle)(ref, () => modalRef.current, []);
3136
- return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Modal2, { title: "Are you sure?", maxWidth: 660, ...props, ref: modalRef, children: [
3140
+ return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(ModalComponent, { title: "Are you sure?", maxWidth: 660, ...props, ref: modalRef, children: [
3137
3141
  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text_default, { color: theme2.colors.textSecondary, children: "Do you really want to continue with the deleting of the item? This action may be irreversible." }),
3138
3142
  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
3139
3143
  Div_default.row,
@@ -3184,6 +3188,7 @@ var PageHolderComponent = (0, import_react12.forwardRef)(function PageHolder({ n
3184
3188
  );
3185
3189
  });
3186
3190
  PageHolderComponent.center = (0, import_react12.forwardRef)(function Center({
3191
+ pageBackgroundColor,
3187
3192
  sideImageSrc,
3188
3193
  sideImageName,
3189
3194
  sideImagePosition = "right",
@@ -3197,49 +3202,60 @@ PageHolderComponent.center = (0, import_react12.forwardRef)(function Center({
3197
3202
  const mediaQuery = useMediaQuery();
3198
3203
  const { app } = useBetterHtmlContextInternal();
3199
3204
  const breakingPoint = mediaQuery.size1000;
3200
- return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Div_default.row, { width: "100%", minHeight: "100svh", alignItems: "center", justifyContent: "center", children: [
3201
- sideImagePosition === "left" && !breakingPoint && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Div_default, { width: "50%" }),
3202
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Div_default.column, { width: `${!breakingPoint && (sideImageSrc || sideImageName) ? 50 : 100}%`, alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
3203
- Div_default.box,
3204
- {
3205
- width: `calc(100% - ${theme2.styles.space}px * 2)`,
3206
- maxWidth: !noMaxContentWidth ? app.contentMaxWidth / 2 : void 0,
3207
- marginInline: theme2.styles.space,
3208
- marginBlock: theme2.styles.space,
3209
- ...props,
3210
- ref,
3211
- children
3212
- }
3213
- ) }),
3214
- sideImagePosition === "right" && !breakingPoint && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Div_default, { width: "50%" }),
3215
- (sideImageSrc || sideImageName) && !breakingPoint && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
3216
- Div_default,
3217
- {
3218
- position: "fixed",
3219
- width: "50%",
3220
- height: "100svh",
3221
- top: 0,
3222
- left: sideImagePosition === "left" ? 0 : "auto",
3223
- right: sideImagePosition === "right" ? 0 : "auto",
3224
- children: [
3225
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
3226
- Div_default.row,
3227
- {
3228
- position: "absolute",
3229
- width: "100%",
3230
- height: "100%",
3231
- top: 0,
3232
- left: 0,
3233
- justifyContent: sideImageAlignment === "left" ? "flex-start" : sideImageAlignment === "right" ? "flex-end" : "center",
3234
- overflow: "hidden",
3235
- children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Image_default, { name: sideImageName, height: "100%", src: sideImageSrc })
3236
- }
3237
- ),
3238
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Div_default, { position: "absolute", width: "100%", bottom: theme2.styles.space, children: sideImageFooter })
3239
- ]
3240
- }
3241
- )
3242
- ] });
3205
+ const withSideImage = (sideImageSrc || sideImageName) && !breakingPoint;
3206
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
3207
+ Div_default.row,
3208
+ {
3209
+ width: "100%",
3210
+ minHeight: "100svh",
3211
+ alignItems: "center",
3212
+ justifyContent: "center",
3213
+ backgroundColor: pageBackgroundColor,
3214
+ children: [
3215
+ sideImagePosition === "left" && withSideImage && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Div_default, { width: "50%" }),
3216
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Div_default.column, { width: `${withSideImage ? 50 : 100}%`, alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
3217
+ Div_default.box,
3218
+ {
3219
+ width: `calc(100% - ${theme2.styles.space}px * 2)`,
3220
+ maxWidth: !noMaxContentWidth ? app.contentMaxWidth / 2 : void 0,
3221
+ marginInline: theme2.styles.space,
3222
+ marginBlock: theme2.styles.space,
3223
+ ...props,
3224
+ ref,
3225
+ children
3226
+ }
3227
+ ) }),
3228
+ sideImagePosition === "right" && withSideImage && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Div_default, { width: "50%" }),
3229
+ withSideImage && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
3230
+ Div_default,
3231
+ {
3232
+ position: "fixed",
3233
+ width: "50%",
3234
+ height: "100svh",
3235
+ top: 0,
3236
+ left: sideImagePosition === "left" ? 0 : "auto",
3237
+ right: sideImagePosition === "right" ? 0 : "auto",
3238
+ children: [
3239
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
3240
+ Div_default.row,
3241
+ {
3242
+ position: "absolute",
3243
+ width: "100%",
3244
+ height: "100%",
3245
+ top: 0,
3246
+ left: 0,
3247
+ justifyContent: sideImageAlignment === "left" ? "flex-start" : sideImageAlignment === "right" ? "flex-end" : "center",
3248
+ overflow: "hidden",
3249
+ children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Image_default, { name: sideImageName, height: "100%", src: sideImageSrc })
3250
+ }
3251
+ ),
3252
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Div_default, { position: "absolute", width: "100%", bottom: theme2.styles.space, children: sideImageFooter })
3253
+ ]
3254
+ }
3255
+ )
3256
+ ]
3257
+ }
3258
+ );
3243
3259
  });
3244
3260
  var PageHolder2 = (0, import_react12.memo)(PageHolderComponent);
3245
3261
  PageHolder2.center = PageHolderComponent.center;
@@ -5304,7 +5320,7 @@ var DropdownComponent = (0, import_react16.forwardRef)(function Dropdown({
5304
5320
  Div_default.row,
5305
5321
  {
5306
5322
  position: "absolute",
5307
- top: 46 / 2 + (label ? 16 + theme2.styles.gap : 0),
5323
+ top: 46 / 2 + (label ? 16 + theme2.styles.gap / 2 : 0),
5308
5324
  right: theme2.styles.space + 1,
5309
5325
  alignItems: "center",
5310
5326
  gap: theme2.styles.gap,