react-better-html 1.1.254 → 1.1.256

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 +6 -1
  2. package/dist/index.d.ts +6 -1
  3. package/dist/index.js +223 -169
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +223 -169
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -4,7 +4,7 @@ import * as react from 'react';
4
4
  import { ComponentProps, ReactNode } from 'react';
5
5
  import * as react_jsx_runtime from 'react/jsx-runtime';
6
6
  import { WebTarget } from 'styled-components';
7
- import { useNavigate, useLocation, useInRouterContext, useSearchParams, createSearchParams } from 'react-router-dom';
7
+ import { Location, useNavigate, useLocation, useInRouterContext, useSearchParams, createSearchParams } from 'react-router-dom';
8
8
 
9
9
  type PluginName = "alerts" | "react-router-dom" | "localStorage";
10
10
  type BetterHtmlPluginConstructor<T extends object = object> = (config?: T) => BetterHtmlPlugin<T>;
@@ -84,6 +84,7 @@ declare const Button: typeof ButtonComponent & {
84
84
  upload: typeof ButtonComponent.upload;
85
85
  };
86
86
 
87
+ type DropdownPosition = "left" | "right";
87
88
  type InputFieldProps = {
88
89
  label?: string;
89
90
  labelFontFamily?: React.CSSProperties["fontFamily"];
@@ -125,6 +126,7 @@ type InputFieldComponentType = {
125
126
  date: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps & {
126
127
  minDate?: Date;
127
128
  maxDate?: Date;
129
+ dropdownPosition?: DropdownPosition;
128
130
  }>) => React.ReactElement;
129
131
  dateTime: (props: ComponentPropWithRef<HTMLInputElement, OmitProps<InputFieldProps, keyof InputFieldDateTimeExcludeProps> & {
130
132
  hoursToRender?: number[];
@@ -135,6 +137,7 @@ type InputFieldComponentType = {
135
137
  defaultDateAfterTimePick?: `${number}-${number}-${number}`;
136
138
  /** @default "00:00" */
137
139
  defaultTimeAfterDatePick?: `${number}:${number}`;
140
+ dropdownPosition?: DropdownPosition;
138
141
  }>) => React.ReactElement;
139
142
  time: (props: ComponentPropWithRef<HTMLInputElement, OmitProps<InputFieldProps, keyof InputFieldDateTimeExcludeProps>> & {
140
143
  hoursToRender?: number[];
@@ -143,6 +146,7 @@ type InputFieldComponentType = {
143
146
  minTime?: string;
144
147
  /** @default 23:59 */
145
148
  maxTime?: string;
149
+ dropdownPosition?: DropdownPosition;
146
150
  }) => React.ReactElement;
147
151
  color: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
148
152
  };
@@ -1089,6 +1093,7 @@ type SideMenuItem = {
1089
1093
  type SideMenuProps = {
1090
1094
  items: SideMenuItem[];
1091
1095
  bottomItems?: SideMenuItem[];
1096
+ location: Location;
1092
1097
  topSpace?: number;
1093
1098
  logoAssetName?: AssetName | AnyOtherString;
1094
1099
  logoUrl?: string;
package/dist/index.d.ts CHANGED
@@ -4,7 +4,7 @@ import * as react from 'react';
4
4
  import { ComponentProps, ReactNode } from 'react';
5
5
  import * as react_jsx_runtime from 'react/jsx-runtime';
6
6
  import { WebTarget } from 'styled-components';
7
- import { useNavigate, useLocation, useInRouterContext, useSearchParams, createSearchParams } from 'react-router-dom';
7
+ import { Location, useNavigate, useLocation, useInRouterContext, useSearchParams, createSearchParams } from 'react-router-dom';
8
8
 
9
9
  type PluginName = "alerts" | "react-router-dom" | "localStorage";
10
10
  type BetterHtmlPluginConstructor<T extends object = object> = (config?: T) => BetterHtmlPlugin<T>;
@@ -84,6 +84,7 @@ declare const Button: typeof ButtonComponent & {
84
84
  upload: typeof ButtonComponent.upload;
85
85
  };
86
86
 
87
+ type DropdownPosition = "left" | "right";
87
88
  type InputFieldProps = {
88
89
  label?: string;
89
90
  labelFontFamily?: React.CSSProperties["fontFamily"];
@@ -125,6 +126,7 @@ type InputFieldComponentType = {
125
126
  date: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps & {
126
127
  minDate?: Date;
127
128
  maxDate?: Date;
129
+ dropdownPosition?: DropdownPosition;
128
130
  }>) => React.ReactElement;
129
131
  dateTime: (props: ComponentPropWithRef<HTMLInputElement, OmitProps<InputFieldProps, keyof InputFieldDateTimeExcludeProps> & {
130
132
  hoursToRender?: number[];
@@ -135,6 +137,7 @@ type InputFieldComponentType = {
135
137
  defaultDateAfterTimePick?: `${number}-${number}-${number}`;
136
138
  /** @default "00:00" */
137
139
  defaultTimeAfterDatePick?: `${number}:${number}`;
140
+ dropdownPosition?: DropdownPosition;
138
141
  }>) => React.ReactElement;
139
142
  time: (props: ComponentPropWithRef<HTMLInputElement, OmitProps<InputFieldProps, keyof InputFieldDateTimeExcludeProps>> & {
140
143
  hoursToRender?: number[];
@@ -143,6 +146,7 @@ type InputFieldComponentType = {
143
146
  minTime?: string;
144
147
  /** @default 23:59 */
145
148
  maxTime?: string;
149
+ dropdownPosition?: DropdownPosition;
146
150
  }) => React.ReactElement;
147
151
  color: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
148
152
  };
@@ -1089,6 +1093,7 @@ type SideMenuItem = {
1089
1093
  type SideMenuProps = {
1090
1094
  items: SideMenuItem[];
1091
1095
  bottomItems?: SideMenuItem[];
1096
+ location: Location;
1092
1097
  topSpace?: number;
1093
1098
  logoAssetName?: AssetName | AnyOtherString;
1094
1099
  logoUrl?: string;
package/dist/index.js CHANGED
@@ -1021,7 +1021,8 @@ function useComponentInputFieldDateProps(props, holderRef, disabled) {
1021
1021
  setInternalValue,
1022
1022
  inputFieldProps,
1023
1023
  insideInputFieldComponentProps,
1024
- isOpen
1024
+ isOpen,
1025
+ isFocused
1025
1026
  };
1026
1027
  }
1027
1028
  function usePageResize() {
@@ -2475,6 +2476,10 @@ var ModalComponent = (0, import_react11.forwardRef)(function Modal({
2475
2476
  const { app } = useBetterHtmlContextInternal();
2476
2477
  const { colorTheme } = (0, import_react_better_core10.useBetterCoreContext)();
2477
2478
  const dialogRef = (0, import_react11.useRef)(null);
2479
+ const onOpenRef = (0, import_react11.useRef)(onOpen);
2480
+ onOpenRef.current = onOpen;
2481
+ const onCloseRef = (0, import_react11.useRef)(onClose);
2482
+ onCloseRef.current = onClose;
2478
2483
  const [isOpened, setIsOpened] = (0, import_react_better_core10.useBooleanState)(false);
2479
2484
  const [isOpenedLate, setIsOpenedLate] = (0, import_react_better_core10.useBooleanState)(false);
2480
2485
  const onClickOpen = (0, import_react11.useCallback)(() => {
@@ -2489,20 +2494,20 @@ var ModalComponent = (0, import_react11.forwardRef)(function Modal({
2489
2494
  false
2490
2495
  );
2491
2496
  }
2492
- onOpen?.();
2493
- }, [onOpen, urlQuery, name]);
2497
+ onOpenRef.current?.();
2498
+ }, [urlQuery, name]);
2494
2499
  const onClickClose = (0, import_react11.useCallback)(
2495
2500
  (event) => {
2496
2501
  event?.stopPropagation();
2497
2502
  setIsOpened.setFalse();
2498
- onClose?.();
2503
+ onCloseRef.current?.();
2499
2504
  if (urlQuery && name) urlQuery.removeQuery(`${name}-modal`, false);
2500
2505
  setTimeout(() => {
2501
2506
  dialogRef.current?.close();
2502
2507
  setIsOpenedLate.setFalse();
2503
2508
  }, 0.2 * 1e3);
2504
2509
  },
2505
- [onClose, urlQuery, name]
2510
+ [urlQuery, name]
2506
2511
  );
2507
2512
  const onKeyDown = (0, import_react11.useCallback)(
2508
2513
  (event) => {
@@ -5042,7 +5047,7 @@ InputFieldComponent.phoneNumber = (0, import_react21.forwardRef)(function PhoneN
5042
5047
  ] })
5043
5048
  ] });
5044
5049
  });
5045
- InputFieldComponent.date = (0, import_react21.forwardRef)(function Date2({ minDate, maxDate, ...inputFieldProps }, ref) {
5050
+ InputFieldComponent.date = (0, import_react21.forwardRef)(function Date2({ minDate, maxDate, dropdownPosition = "left", ...inputFieldProps }, ref) {
5046
5051
  const betterHtmlContextInternal = useBetterHtmlContextInternal();
5047
5052
  const props = useComponentsPropsMerger(
5048
5053
  betterHtmlContextInternal.components.inputField?.style?.date,
@@ -5055,7 +5060,8 @@ InputFieldComponent.date = (0, import_react21.forwardRef)(function Date2({ minDa
5055
5060
  internalValue,
5056
5061
  setInternalValue,
5057
5062
  inputFieldProps: restInputFieldProps,
5058
- insideInputFieldComponentProps
5063
+ insideInputFieldComponentProps,
5064
+ isFocused
5059
5065
  } = useComponentInputFieldDateProps(props, holderRef, isMobileIOS);
5060
5066
  const onChange = (0, import_react21.useCallback)(
5061
5067
  (date) => {
@@ -5069,12 +5075,13 @@ InputFieldComponent.date = (0, import_react21.forwardRef)(function Date2({ minDa
5069
5075
  {
5070
5076
  ...betterHtmlContextInternal.components.inputField?.style?.date,
5071
5077
  type: "date",
5072
- insideInputFieldAfterComponent: !isMobileIOS ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
5078
+ insideInputFieldAfterComponent: !isMobileIOS ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
5073
5079
  Div_default,
5074
5080
  {
5075
5081
  position: "absolute",
5076
5082
  top: "100%",
5077
- left: 0,
5083
+ left: dropdownPosition === "left" ? 0 : void 0,
5084
+ right: dropdownPosition === "right" ? 0 : void 0,
5078
5085
  width: "fit-content",
5079
5086
  backgroundColor: theme2.colors.backgroundContent,
5080
5087
  borderBottomLeftRadius: theme2.styles.borderRadius,
@@ -5082,7 +5089,22 @@ InputFieldComponent.date = (0, import_react21.forwardRef)(function Date2({ minDa
5082
5089
  boxShadow: "0px 10px 20px #00000020",
5083
5090
  userSelect: "none",
5084
5091
  ...insideInputFieldComponentProps,
5085
- children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Calendar_default, { value: internalValue, minDate, maxDate, onChange })
5092
+ children: [
5093
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
5094
+ Div_default,
5095
+ {
5096
+ position: "absolute",
5097
+ top: 0,
5098
+ left: -theme2.styles.borderWidth,
5099
+ width: `calc(100% + ${theme2.styles.borderWidth * 2}px)`,
5100
+ height: theme2.styles.borderWidth,
5101
+ backgroundColor: isFocused ? theme2.colors.primary : theme2.colors.border,
5102
+ transform: `translateY(-${theme2.styles.borderWidth}px)`,
5103
+ transition: theme2.styles.transition
5104
+ }
5105
+ ),
5106
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Calendar_default, { value: internalValue, minDate, maxDate, onChange })
5107
+ ]
5086
5108
  }
5087
5109
  ) : void 0,
5088
5110
  holderRef,
@@ -5099,6 +5121,7 @@ InputFieldComponent.dateTime = (0, import_react21.forwardRef)(function DateTime(
5099
5121
  maxDate,
5100
5122
  defaultDateAfterTimePick,
5101
5123
  defaultTimeAfterDatePick = "00:00",
5124
+ dropdownPosition = "left",
5102
5125
  ...inputFieldProps
5103
5126
  }, ref) {
5104
5127
  const betterHtmlContextInternal = useBetterHtmlContextInternal();
@@ -5116,7 +5139,8 @@ InputFieldComponent.dateTime = (0, import_react21.forwardRef)(function DateTime(
5116
5139
  setInternalValue,
5117
5140
  inputFieldProps: restInputFieldProps,
5118
5141
  insideInputFieldComponentProps,
5119
- isOpen
5142
+ isOpen,
5143
+ isFocused
5120
5144
  } = useComponentInputFieldDateProps(props, holderRef, isMobileIOS);
5121
5145
  const readyHours = (0, import_react21.useMemo)(
5122
5146
  () => hoursToRender?.filter((hour) => hour >= 0 && hour <= 23) ?? hours,
@@ -5194,12 +5218,13 @@ InputFieldComponent.dateTime = (0, import_react21.forwardRef)(function DateTime(
5194
5218
  {
5195
5219
  ...betterHtmlContextInternal.components.inputField?.style?.dateTime,
5196
5220
  type: "datetime-local",
5197
- insideInputFieldAfterComponent: !isMobileIOS ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
5221
+ insideInputFieldAfterComponent: !isMobileIOS ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
5198
5222
  Div_default,
5199
5223
  {
5200
5224
  position: "absolute",
5201
5225
  top: "100%",
5202
- left: 0,
5226
+ left: dropdownPosition === "left" ? 0 : void 0,
5227
+ right: dropdownPosition === "right" ? 0 : void 0,
5203
5228
  width: "fit-content",
5204
5229
  backgroundColor: theme2.colors.backgroundContent,
5205
5230
  borderBottomLeftRadius: theme2.styles.borderRadius,
@@ -5208,89 +5233,104 @@ InputFieldComponent.dateTime = (0, import_react21.forwardRef)(function DateTime(
5208
5233
  overflow: "hidden",
5209
5234
  userSelect: "none",
5210
5235
  ...insideInputFieldComponentProps,
5211
- children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default.row, { gap: theme2.styles.space, children: [
5212
- /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Calendar_default, { value: internalValue, minDate, maxDate, onChange }),
5213
- /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
5214
- Div_default.row,
5236
+ children: [
5237
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
5238
+ Div_default,
5215
5239
  {
5216
- height: 276,
5217
- gap: theme2.styles.gap / 2,
5218
- paddingTop: topSpacing,
5219
- paddingBottom: theme2.styles.space / 2,
5220
- paddingRight: theme2.styles.space / 2,
5221
- children: [
5222
- /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default, { height: "100%", children: [
5223
- /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text_default, { fontSize: 14, fontWeight: 700, textAlign: "center", marginBottom: theme2.styles.gap / 2, children: "H" }),
5224
- /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
5225
- Div_default,
5226
- {
5227
- className: "react-better-html-no-scrollbar",
5228
- width: buttonWidth,
5229
- height: `calc(100% - ${16 + theme2.styles.gap / 2}px)`,
5230
- overflowY: "auto",
5231
- tabIndex: -1,
5232
- children: readyHours.map((hour) => {
5233
- const isSelected = hour.toString() === valueHour;
5234
- return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
5235
- Div_default.row,
5236
- {
5237
- alignItems: "center",
5238
- justifyContent: "center",
5239
- color: isSelected ? theme2.colors.base : theme2.colors.textPrimary,
5240
- backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
5241
- borderRadius: theme2.styles.borderRadius / 2,
5242
- filterHover: "brightness(0.9)",
5243
- cursor: "pointer",
5244
- padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
5245
- value: hour,
5246
- onClickWithValue: onClickHour,
5247
- ref: isSelected ? selectedHourRef : void 0,
5248
- children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text_default, { textAlign: "center", children: hour.toString().padStart(2, "0") })
5249
- },
5250
- hour
5251
- );
5252
- })
5253
- }
5254
- )
5255
- ] }),
5256
- /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default, { height: "100%", children: [
5257
- /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text_default, { fontSize: 14, fontWeight: 700, textAlign: "center", marginBottom: theme2.styles.gap / 2, children: "M" }),
5258
- /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
5259
- Div_default,
5260
- {
5261
- className: "react-better-html-no-scrollbar",
5262
- width: buttonWidth,
5263
- height: `calc(100% - ${16 + theme2.styles.gap / 2}px)`,
5264
- overflowY: "auto",
5265
- tabIndex: -1,
5266
- children: readyMinutes.map((minute) => {
5267
- const isSelected = minute.toString() === valueMinute;
5268
- return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
5269
- Div_default.row,
5270
- {
5271
- alignItems: "center",
5272
- justifyContent: "center",
5273
- color: isSelected ? theme2.colors.base : theme2.colors.textPrimary,
5274
- backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
5275
- borderRadius: theme2.styles.borderRadius / 2,
5276
- filterHover: "brightness(0.9)",
5277
- cursor: "pointer",
5278
- padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
5279
- value: minute,
5280
- onClickWithValue: onClickMinute,
5281
- ref: isSelected ? selectedMinuteRef : void 0,
5282
- children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text_default, { textAlign: "center", children: minute.toString().padStart(2, "0") })
5283
- },
5284
- minute
5285
- );
5286
- })
5287
- }
5288
- )
5289
- ] })
5290
- ]
5240
+ position: "absolute",
5241
+ top: 0,
5242
+ left: -theme2.styles.borderWidth,
5243
+ width: `calc(100% + ${theme2.styles.borderWidth * 2}px)`,
5244
+ height: theme2.styles.borderWidth,
5245
+ backgroundColor: isFocused ? theme2.colors.primary : theme2.colors.border,
5246
+ transform: `translateY(-${theme2.styles.borderWidth}px)`,
5247
+ transition: theme2.styles.transition
5291
5248
  }
5292
- )
5293
- ] })
5249
+ ),
5250
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default.row, { gap: theme2.styles.space, children: [
5251
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Calendar_default, { value: internalValue, minDate, maxDate, onChange }),
5252
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
5253
+ Div_default.row,
5254
+ {
5255
+ height: 276,
5256
+ gap: theme2.styles.gap / 2,
5257
+ paddingTop: topSpacing,
5258
+ paddingBottom: theme2.styles.space / 2,
5259
+ paddingRight: theme2.styles.space / 2,
5260
+ children: [
5261
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default, { height: "100%", children: [
5262
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text_default, { fontSize: 14, fontWeight: 700, textAlign: "center", marginBottom: theme2.styles.gap / 2, children: "H" }),
5263
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
5264
+ Div_default,
5265
+ {
5266
+ className: "react-better-html-no-scrollbar",
5267
+ width: buttonWidth,
5268
+ height: `calc(100% - ${16 + theme2.styles.gap / 2}px)`,
5269
+ overflowY: "auto",
5270
+ tabIndex: -1,
5271
+ children: readyHours.map((hour) => {
5272
+ const isSelected = hour.toString() === valueHour;
5273
+ return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
5274
+ Div_default.row,
5275
+ {
5276
+ alignItems: "center",
5277
+ justifyContent: "center",
5278
+ color: isSelected ? theme2.colors.base : theme2.colors.textPrimary,
5279
+ backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
5280
+ borderRadius: theme2.styles.borderRadius / 2,
5281
+ filterHover: "brightness(0.9)",
5282
+ cursor: "pointer",
5283
+ padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
5284
+ value: hour,
5285
+ onClickWithValue: onClickHour,
5286
+ ref: isSelected ? selectedHourRef : void 0,
5287
+ children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text_default, { textAlign: "center", children: hour.toString().padStart(2, "0") })
5288
+ },
5289
+ hour
5290
+ );
5291
+ })
5292
+ }
5293
+ )
5294
+ ] }),
5295
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default, { height: "100%", children: [
5296
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text_default, { fontSize: 14, fontWeight: 700, textAlign: "center", marginBottom: theme2.styles.gap / 2, children: "M" }),
5297
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
5298
+ Div_default,
5299
+ {
5300
+ className: "react-better-html-no-scrollbar",
5301
+ width: buttonWidth,
5302
+ height: `calc(100% - ${16 + theme2.styles.gap / 2}px)`,
5303
+ overflowY: "auto",
5304
+ tabIndex: -1,
5305
+ children: readyMinutes.map((minute) => {
5306
+ const isSelected = minute.toString() === valueMinute;
5307
+ return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
5308
+ Div_default.row,
5309
+ {
5310
+ alignItems: "center",
5311
+ justifyContent: "center",
5312
+ color: isSelected ? theme2.colors.base : theme2.colors.textPrimary,
5313
+ backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
5314
+ borderRadius: theme2.styles.borderRadius / 2,
5315
+ filterHover: "brightness(0.9)",
5316
+ cursor: "pointer",
5317
+ padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
5318
+ value: minute,
5319
+ onClickWithValue: onClickMinute,
5320
+ ref: isSelected ? selectedMinuteRef : void 0,
5321
+ children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text_default, { textAlign: "center", children: minute.toString().padStart(2, "0") })
5322
+ },
5323
+ minute
5324
+ );
5325
+ })
5326
+ }
5327
+ )
5328
+ ] })
5329
+ ]
5330
+ }
5331
+ )
5332
+ ] })
5333
+ ]
5294
5334
  }
5295
5335
  ) : void 0,
5296
5336
  holderRef,
@@ -5301,7 +5341,7 @@ InputFieldComponent.dateTime = (0, import_react21.forwardRef)(function DateTime(
5301
5341
  }
5302
5342
  );
5303
5343
  });
5304
- InputFieldComponent.time = (0, import_react21.forwardRef)(function Time({ hoursToRender, minutesToRender, minTime, maxTime, ...inputFieldProps }, ref) {
5344
+ InputFieldComponent.time = (0, import_react21.forwardRef)(function Time({ hoursToRender, minutesToRender, minTime, maxTime, dropdownPosition = "left", ...inputFieldProps }, ref) {
5305
5345
  const betterHtmlContextInternal = useBetterHtmlContextInternal();
5306
5346
  const props = useComponentsPropsMerger(
5307
5347
  betterHtmlContextInternal.components.inputField?.style?.time,
@@ -5321,7 +5361,8 @@ InputFieldComponent.time = (0, import_react21.forwardRef)(function Time({ hoursT
5321
5361
  setInternalValue,
5322
5362
  inputFieldProps: restInputFieldProps,
5323
5363
  insideInputFieldComponentProps,
5324
- isOpen
5364
+ isOpen,
5365
+ isFocused
5325
5366
  } = useComponentInputFieldDateProps(props, holderRef, isMobileIOS);
5326
5367
  const readyHours = (0, import_react21.useMemo)(
5327
5368
  () => hoursToRender?.filter((hour) => hour >= 0 && hour <= 23) ?? hours,
@@ -5388,12 +5429,13 @@ InputFieldComponent.time = (0, import_react21.forwardRef)(function Time({ hoursT
5388
5429
  {
5389
5430
  ...betterHtmlContextInternal.components.inputField?.style?.time,
5390
5431
  type: "time",
5391
- insideInputFieldAfterComponent: !isMobileIOS ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
5432
+ insideInputFieldAfterComponent: !isMobileIOS ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
5392
5433
  Div_default,
5393
5434
  {
5394
5435
  position: "absolute",
5395
5436
  top: "100%",
5396
- left: 0,
5437
+ left: dropdownPosition === "left" ? 0 : void 0,
5438
+ right: dropdownPosition === "right" ? 0 : void 0,
5397
5439
  width: buttonWidth * 2 + 2,
5398
5440
  height: 300,
5399
5441
  backgroundColor: theme2.colors.backgroundContent,
@@ -5403,73 +5445,88 @@ InputFieldComponent.time = (0, import_react21.forwardRef)(function Time({ hoursT
5403
5445
  overflowY: "auto",
5404
5446
  userSelect: "none",
5405
5447
  ...insideInputFieldComponentProps,
5406
- children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default.row, { height: "100%", children: [
5448
+ children: [
5407
5449
  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
5408
5450
  Div_default,
5409
5451
  {
5410
- className: "react-better-html-no-scrollbar",
5411
- width: buttonWidth,
5412
- height: "100%",
5413
- overflowY: "auto",
5414
- tabIndex: -1,
5415
- children: readyHours.map((hour) => {
5416
- const isSelected = hour.toString() === valueHour;
5417
- const isDisabled = minHours && hour < minHours || maxHours && hour > maxHours;
5418
- return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
5419
- Div_default.row,
5420
- {
5421
- alignItems: "center",
5422
- justifyContent: "center",
5423
- color: isSelected ? theme2.colors.base : theme2.colors.textPrimary,
5424
- backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
5425
- filterHover: "brightness(0.9)",
5426
- cursor: isDisabled ? "not-allowed" : "pointer",
5427
- padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
5428
- opacity: isDisabled ? 0.6 : void 0,
5429
- value: hour,
5430
- onClickWithValue: !isDisabled ? onClickHour : void 0,
5431
- ref: isSelected ? selectedHourRef : void 0,
5432
- children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text_default, { textAlign: "center", children: hour.toString().padStart(2, "0") })
5433
- },
5434
- hour
5435
- );
5436
- })
5452
+ position: "absolute",
5453
+ top: 0,
5454
+ left: -theme2.styles.borderWidth,
5455
+ width: `calc(100% + ${theme2.styles.borderWidth * 2}px)`,
5456
+ height: theme2.styles.borderWidth,
5457
+ backgroundColor: isFocused ? theme2.colors.primary : theme2.colors.border,
5458
+ transform: `translateY(-${theme2.styles.borderWidth}px)`,
5459
+ transition: theme2.styles.transition
5437
5460
  }
5438
5461
  ),
5439
- /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
5440
- Div_default,
5441
- {
5442
- className: "react-better-html-no-scrollbar",
5443
- width: buttonWidth,
5444
- height: "100%",
5445
- overflowY: "auto",
5446
- tabIndex: -1,
5447
- children: readyMinutes.map((minute) => {
5448
- const isSelected = minute.toString() === valueMinute;
5449
- const currentHour = parseInt(valueHour);
5450
- const isDisabled = minHours !== void 0 && minMinutes !== void 0 && currentHour === minHours && minute < minMinutes || maxHours !== void 0 && maxMinutes !== void 0 && currentHour === maxHours && minute > maxMinutes;
5451
- return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
5452
- Div_default.row,
5453
- {
5454
- alignItems: "center",
5455
- justifyContent: "center",
5456
- color: isSelected ? theme2.colors.base : theme2.colors.textPrimary,
5457
- backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
5458
- filterHover: "brightness(0.9)",
5459
- cursor: isDisabled ? "not-allowed" : "pointer",
5460
- padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
5461
- opacity: isDisabled ? 0.6 : void 0,
5462
- value: minute,
5463
- onClickWithValue: !isDisabled ? onClickMinute : void 0,
5464
- ref: isSelected ? selectedMinuteRef : void 0,
5465
- children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text_default, { textAlign: "center", children: minute.toString().padStart(2, "0") })
5466
- },
5467
- minute
5468
- );
5469
- })
5470
- }
5471
- )
5472
- ] })
5462
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default.row, { height: "100%", children: [
5463
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
5464
+ Div_default,
5465
+ {
5466
+ className: "react-better-html-no-scrollbar",
5467
+ width: buttonWidth,
5468
+ height: "100%",
5469
+ overflowY: "auto",
5470
+ tabIndex: -1,
5471
+ children: readyHours.map((hour) => {
5472
+ const isSelected = hour.toString() === valueHour;
5473
+ const isDisabled = minHours && hour < minHours || maxHours && hour > maxHours;
5474
+ return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
5475
+ Div_default.row,
5476
+ {
5477
+ alignItems: "center",
5478
+ justifyContent: "center",
5479
+ color: isSelected ? theme2.colors.base : theme2.colors.textPrimary,
5480
+ backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
5481
+ filterHover: "brightness(0.9)",
5482
+ cursor: isDisabled ? "not-allowed" : "pointer",
5483
+ padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
5484
+ opacity: isDisabled ? 0.6 : void 0,
5485
+ value: hour,
5486
+ onClickWithValue: !isDisabled ? onClickHour : void 0,
5487
+ ref: isSelected ? selectedHourRef : void 0,
5488
+ children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text_default, { textAlign: "center", children: hour.toString().padStart(2, "0") })
5489
+ },
5490
+ hour
5491
+ );
5492
+ })
5493
+ }
5494
+ ),
5495
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
5496
+ Div_default,
5497
+ {
5498
+ className: "react-better-html-no-scrollbar",
5499
+ width: buttonWidth,
5500
+ height: "100%",
5501
+ overflowY: "auto",
5502
+ tabIndex: -1,
5503
+ children: readyMinutes.map((minute) => {
5504
+ const isSelected = minute.toString() === valueMinute;
5505
+ const currentHour = parseInt(valueHour);
5506
+ const isDisabled = minHours !== void 0 && minMinutes !== void 0 && currentHour === minHours && minute < minMinutes || maxHours !== void 0 && maxMinutes !== void 0 && currentHour === maxHours && minute > maxMinutes;
5507
+ return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
5508
+ Div_default.row,
5509
+ {
5510
+ alignItems: "center",
5511
+ justifyContent: "center",
5512
+ color: isSelected ? theme2.colors.base : theme2.colors.textPrimary,
5513
+ backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
5514
+ filterHover: "brightness(0.9)",
5515
+ cursor: isDisabled ? "not-allowed" : "pointer",
5516
+ padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
5517
+ opacity: isDisabled ? 0.6 : void 0,
5518
+ value: minute,
5519
+ onClickWithValue: !isDisabled ? onClickMinute : void 0,
5520
+ ref: isSelected ? selectedMinuteRef : void 0,
5521
+ children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text_default, { textAlign: "center", children: minute.toString().padStart(2, "0") })
5522
+ },
5523
+ minute
5524
+ );
5525
+ })
5526
+ }
5527
+ )
5528
+ ] })
5529
+ ]
5473
5530
  }
5474
5531
  ) : void 0,
5475
5532
  holderRef,
@@ -5481,7 +5538,7 @@ InputFieldComponent.time = (0, import_react21.forwardRef)(function Time({ hoursT
5481
5538
  }
5482
5539
  );
5483
5540
  });
5484
- InputFieldComponent.color = (0, import_react21.forwardRef)(function Color4(inputFieldProps, ref) {
5541
+ InputFieldComponent.color = (0, import_react21.forwardRef)(function Color4({ ...inputFieldProps }, ref) {
5485
5542
  const betterHtmlContextInternal = useBetterHtmlContextInternal();
5486
5543
  const { value, onChangeValue, ...props } = useComponentsPropsMerger(
5487
5544
  betterHtmlContextInternal.components.inputField?.style?.time,
@@ -7794,18 +7851,11 @@ var MenuItemComponent = (0, import_react31.memo)(function MenuItemComponent2({
7794
7851
  backgroundColor,
7795
7852
  activeItemColor,
7796
7853
  hoverItemColor,
7854
+ location,
7797
7855
  onClick
7798
7856
  }) {
7799
- const reactRouterDomPlugin2 = usePlugin("react-router-dom");
7800
- if (!reactRouterDomPlugin2) {
7801
- throw new Error(
7802
- "`SideMenu` component requires the `react-router-dom` plugin to be added to the `plugins` prop in `<BetterHtmlProvider>`."
7803
- );
7804
- }
7805
- const reactRouterDomPluginConfig = reactRouterDomPlugin2.getConfig();
7806
7857
  const theme2 = (0, import_react_better_core29.useTheme)();
7807
7858
  const mediaQuery = useMediaQuery();
7808
- const location = reactRouterDomPluginConfig.useLocation();
7809
7859
  const { components, sideMenuIsCollapsed, setSideMenuIsCollapsed } = useBetterHtmlContextInternal();
7810
7860
  const { colorTheme } = (0, import_react_better_core29.useBetterCoreContext)();
7811
7861
  const { activeItem, setActiveItem } = useSideMenuContext();
@@ -7957,6 +8007,7 @@ var MenuItemComponent = (0, import_react31.memo)(function MenuItemComponent2({
7957
8007
  {
7958
8008
  item: child,
7959
8009
  backgroundColor: readyBackgroundColor,
8010
+ location,
7960
8011
  onClick
7961
8012
  },
7962
8013
  child.text
@@ -8007,6 +8058,7 @@ var MenuItemComponent = (0, import_react31.memo)(function MenuItemComponent2({
8007
8058
  var SideMenuComponent = function SideMenu({
8008
8059
  items,
8009
8060
  bottomItems,
8061
+ location,
8010
8062
  topSpace = 0,
8011
8063
  logoAssetName,
8012
8064
  logoUrl,
@@ -8068,6 +8120,7 @@ var SideMenuComponent = function SideMenu({
8068
8120
  backgroundColor: readyBackgroundColor,
8069
8121
  activeItemColor,
8070
8122
  hoverItemColor,
8123
+ location,
8071
8124
  onClick: onClickXButton
8072
8125
  },
8073
8126
  item.text
@@ -8090,6 +8143,7 @@ var SideMenuComponent = function SideMenu({
8090
8143
  backgroundColor: readyBackgroundColor,
8091
8144
  activeItemColor,
8092
8145
  hoverItemColor,
8146
+ location,
8093
8147
  onClick: onClickXButton
8094
8148
  },
8095
8149
  item.text