react-better-html 1.1.254 → 1.1.255

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 +215 -165
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +215 -165
  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() {
@@ -5042,7 +5043,7 @@ InputFieldComponent.phoneNumber = (0, import_react21.forwardRef)(function PhoneN
5042
5043
  ] })
5043
5044
  ] });
5044
5045
  });
5045
- InputFieldComponent.date = (0, import_react21.forwardRef)(function Date2({ minDate, maxDate, ...inputFieldProps }, ref) {
5046
+ InputFieldComponent.date = (0, import_react21.forwardRef)(function Date2({ minDate, maxDate, dropdownPosition = "left", ...inputFieldProps }, ref) {
5046
5047
  const betterHtmlContextInternal = useBetterHtmlContextInternal();
5047
5048
  const props = useComponentsPropsMerger(
5048
5049
  betterHtmlContextInternal.components.inputField?.style?.date,
@@ -5055,7 +5056,8 @@ InputFieldComponent.date = (0, import_react21.forwardRef)(function Date2({ minDa
5055
5056
  internalValue,
5056
5057
  setInternalValue,
5057
5058
  inputFieldProps: restInputFieldProps,
5058
- insideInputFieldComponentProps
5059
+ insideInputFieldComponentProps,
5060
+ isFocused
5059
5061
  } = useComponentInputFieldDateProps(props, holderRef, isMobileIOS);
5060
5062
  const onChange = (0, import_react21.useCallback)(
5061
5063
  (date) => {
@@ -5069,12 +5071,13 @@ InputFieldComponent.date = (0, import_react21.forwardRef)(function Date2({ minDa
5069
5071
  {
5070
5072
  ...betterHtmlContextInternal.components.inputField?.style?.date,
5071
5073
  type: "date",
5072
- insideInputFieldAfterComponent: !isMobileIOS ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
5074
+ insideInputFieldAfterComponent: !isMobileIOS ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
5073
5075
  Div_default,
5074
5076
  {
5075
5077
  position: "absolute",
5076
5078
  top: "100%",
5077
- left: 0,
5079
+ left: dropdownPosition === "left" ? 0 : void 0,
5080
+ right: dropdownPosition === "right" ? 0 : void 0,
5078
5081
  width: "fit-content",
5079
5082
  backgroundColor: theme2.colors.backgroundContent,
5080
5083
  borderBottomLeftRadius: theme2.styles.borderRadius,
@@ -5082,7 +5085,22 @@ InputFieldComponent.date = (0, import_react21.forwardRef)(function Date2({ minDa
5082
5085
  boxShadow: "0px 10px 20px #00000020",
5083
5086
  userSelect: "none",
5084
5087
  ...insideInputFieldComponentProps,
5085
- children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Calendar_default, { value: internalValue, minDate, maxDate, onChange })
5088
+ children: [
5089
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
5090
+ Div_default,
5091
+ {
5092
+ position: "absolute",
5093
+ top: 0,
5094
+ left: -theme2.styles.borderWidth,
5095
+ width: `calc(100% + ${theme2.styles.borderWidth * 2}px)`,
5096
+ height: theme2.styles.borderWidth,
5097
+ backgroundColor: isFocused ? theme2.colors.primary : theme2.colors.border,
5098
+ transform: `translateY(-${theme2.styles.borderWidth}px)`,
5099
+ transition: theme2.styles.transition
5100
+ }
5101
+ ),
5102
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Calendar_default, { value: internalValue, minDate, maxDate, onChange })
5103
+ ]
5086
5104
  }
5087
5105
  ) : void 0,
5088
5106
  holderRef,
@@ -5099,6 +5117,7 @@ InputFieldComponent.dateTime = (0, import_react21.forwardRef)(function DateTime(
5099
5117
  maxDate,
5100
5118
  defaultDateAfterTimePick,
5101
5119
  defaultTimeAfterDatePick = "00:00",
5120
+ dropdownPosition = "left",
5102
5121
  ...inputFieldProps
5103
5122
  }, ref) {
5104
5123
  const betterHtmlContextInternal = useBetterHtmlContextInternal();
@@ -5116,7 +5135,8 @@ InputFieldComponent.dateTime = (0, import_react21.forwardRef)(function DateTime(
5116
5135
  setInternalValue,
5117
5136
  inputFieldProps: restInputFieldProps,
5118
5137
  insideInputFieldComponentProps,
5119
- isOpen
5138
+ isOpen,
5139
+ isFocused
5120
5140
  } = useComponentInputFieldDateProps(props, holderRef, isMobileIOS);
5121
5141
  const readyHours = (0, import_react21.useMemo)(
5122
5142
  () => hoursToRender?.filter((hour) => hour >= 0 && hour <= 23) ?? hours,
@@ -5194,12 +5214,13 @@ InputFieldComponent.dateTime = (0, import_react21.forwardRef)(function DateTime(
5194
5214
  {
5195
5215
  ...betterHtmlContextInternal.components.inputField?.style?.dateTime,
5196
5216
  type: "datetime-local",
5197
- insideInputFieldAfterComponent: !isMobileIOS ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
5217
+ insideInputFieldAfterComponent: !isMobileIOS ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
5198
5218
  Div_default,
5199
5219
  {
5200
5220
  position: "absolute",
5201
5221
  top: "100%",
5202
- left: 0,
5222
+ left: dropdownPosition === "left" ? 0 : void 0,
5223
+ right: dropdownPosition === "right" ? 0 : void 0,
5203
5224
  width: "fit-content",
5204
5225
  backgroundColor: theme2.colors.backgroundContent,
5205
5226
  borderBottomLeftRadius: theme2.styles.borderRadius,
@@ -5208,89 +5229,104 @@ InputFieldComponent.dateTime = (0, import_react21.forwardRef)(function DateTime(
5208
5229
  overflow: "hidden",
5209
5230
  userSelect: "none",
5210
5231
  ...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,
5232
+ children: [
5233
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
5234
+ Div_default,
5215
5235
  {
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
- ]
5236
+ position: "absolute",
5237
+ top: 0,
5238
+ left: -theme2.styles.borderWidth,
5239
+ width: `calc(100% + ${theme2.styles.borderWidth * 2}px)`,
5240
+ height: theme2.styles.borderWidth,
5241
+ backgroundColor: isFocused ? theme2.colors.primary : theme2.colors.border,
5242
+ transform: `translateY(-${theme2.styles.borderWidth}px)`,
5243
+ transition: theme2.styles.transition
5291
5244
  }
5292
- )
5293
- ] })
5245
+ ),
5246
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default.row, { gap: theme2.styles.space, children: [
5247
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Calendar_default, { value: internalValue, minDate, maxDate, onChange }),
5248
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
5249
+ Div_default.row,
5250
+ {
5251
+ height: 276,
5252
+ gap: theme2.styles.gap / 2,
5253
+ paddingTop: topSpacing,
5254
+ paddingBottom: theme2.styles.space / 2,
5255
+ paddingRight: theme2.styles.space / 2,
5256
+ children: [
5257
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default, { height: "100%", children: [
5258
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text_default, { fontSize: 14, fontWeight: 700, textAlign: "center", marginBottom: theme2.styles.gap / 2, children: "H" }),
5259
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
5260
+ Div_default,
5261
+ {
5262
+ className: "react-better-html-no-scrollbar",
5263
+ width: buttonWidth,
5264
+ height: `calc(100% - ${16 + theme2.styles.gap / 2}px)`,
5265
+ overflowY: "auto",
5266
+ tabIndex: -1,
5267
+ children: readyHours.map((hour) => {
5268
+ const isSelected = hour.toString() === valueHour;
5269
+ return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
5270
+ Div_default.row,
5271
+ {
5272
+ alignItems: "center",
5273
+ justifyContent: "center",
5274
+ color: isSelected ? theme2.colors.base : theme2.colors.textPrimary,
5275
+ backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
5276
+ borderRadius: theme2.styles.borderRadius / 2,
5277
+ filterHover: "brightness(0.9)",
5278
+ cursor: "pointer",
5279
+ padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
5280
+ value: hour,
5281
+ onClickWithValue: onClickHour,
5282
+ ref: isSelected ? selectedHourRef : void 0,
5283
+ children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text_default, { textAlign: "center", children: hour.toString().padStart(2, "0") })
5284
+ },
5285
+ hour
5286
+ );
5287
+ })
5288
+ }
5289
+ )
5290
+ ] }),
5291
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default, { height: "100%", children: [
5292
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text_default, { fontSize: 14, fontWeight: 700, textAlign: "center", marginBottom: theme2.styles.gap / 2, children: "M" }),
5293
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
5294
+ Div_default,
5295
+ {
5296
+ className: "react-better-html-no-scrollbar",
5297
+ width: buttonWidth,
5298
+ height: `calc(100% - ${16 + theme2.styles.gap / 2}px)`,
5299
+ overflowY: "auto",
5300
+ tabIndex: -1,
5301
+ children: readyMinutes.map((minute) => {
5302
+ const isSelected = minute.toString() === valueMinute;
5303
+ return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
5304
+ Div_default.row,
5305
+ {
5306
+ alignItems: "center",
5307
+ justifyContent: "center",
5308
+ color: isSelected ? theme2.colors.base : theme2.colors.textPrimary,
5309
+ backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
5310
+ borderRadius: theme2.styles.borderRadius / 2,
5311
+ filterHover: "brightness(0.9)",
5312
+ cursor: "pointer",
5313
+ padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
5314
+ value: minute,
5315
+ onClickWithValue: onClickMinute,
5316
+ ref: isSelected ? selectedMinuteRef : void 0,
5317
+ children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text_default, { textAlign: "center", children: minute.toString().padStart(2, "0") })
5318
+ },
5319
+ minute
5320
+ );
5321
+ })
5322
+ }
5323
+ )
5324
+ ] })
5325
+ ]
5326
+ }
5327
+ )
5328
+ ] })
5329
+ ]
5294
5330
  }
5295
5331
  ) : void 0,
5296
5332
  holderRef,
@@ -5301,7 +5337,7 @@ InputFieldComponent.dateTime = (0, import_react21.forwardRef)(function DateTime(
5301
5337
  }
5302
5338
  );
5303
5339
  });
5304
- InputFieldComponent.time = (0, import_react21.forwardRef)(function Time({ hoursToRender, minutesToRender, minTime, maxTime, ...inputFieldProps }, ref) {
5340
+ InputFieldComponent.time = (0, import_react21.forwardRef)(function Time({ hoursToRender, minutesToRender, minTime, maxTime, dropdownPosition = "left", ...inputFieldProps }, ref) {
5305
5341
  const betterHtmlContextInternal = useBetterHtmlContextInternal();
5306
5342
  const props = useComponentsPropsMerger(
5307
5343
  betterHtmlContextInternal.components.inputField?.style?.time,
@@ -5321,7 +5357,8 @@ InputFieldComponent.time = (0, import_react21.forwardRef)(function Time({ hoursT
5321
5357
  setInternalValue,
5322
5358
  inputFieldProps: restInputFieldProps,
5323
5359
  insideInputFieldComponentProps,
5324
- isOpen
5360
+ isOpen,
5361
+ isFocused
5325
5362
  } = useComponentInputFieldDateProps(props, holderRef, isMobileIOS);
5326
5363
  const readyHours = (0, import_react21.useMemo)(
5327
5364
  () => hoursToRender?.filter((hour) => hour >= 0 && hour <= 23) ?? hours,
@@ -5388,12 +5425,13 @@ InputFieldComponent.time = (0, import_react21.forwardRef)(function Time({ hoursT
5388
5425
  {
5389
5426
  ...betterHtmlContextInternal.components.inputField?.style?.time,
5390
5427
  type: "time",
5391
- insideInputFieldAfterComponent: !isMobileIOS ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
5428
+ insideInputFieldAfterComponent: !isMobileIOS ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
5392
5429
  Div_default,
5393
5430
  {
5394
5431
  position: "absolute",
5395
5432
  top: "100%",
5396
- left: 0,
5433
+ left: dropdownPosition === "left" ? 0 : void 0,
5434
+ right: dropdownPosition === "right" ? 0 : void 0,
5397
5435
  width: buttonWidth * 2 + 2,
5398
5436
  height: 300,
5399
5437
  backgroundColor: theme2.colors.backgroundContent,
@@ -5403,73 +5441,88 @@ InputFieldComponent.time = (0, import_react21.forwardRef)(function Time({ hoursT
5403
5441
  overflowY: "auto",
5404
5442
  userSelect: "none",
5405
5443
  ...insideInputFieldComponentProps,
5406
- children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default.row, { height: "100%", children: [
5444
+ children: [
5407
5445
  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
5408
5446
  Div_default,
5409
5447
  {
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
- })
5448
+ position: "absolute",
5449
+ top: 0,
5450
+ left: -theme2.styles.borderWidth,
5451
+ width: `calc(100% + ${theme2.styles.borderWidth * 2}px)`,
5452
+ height: theme2.styles.borderWidth,
5453
+ backgroundColor: isFocused ? theme2.colors.primary : theme2.colors.border,
5454
+ transform: `translateY(-${theme2.styles.borderWidth}px)`,
5455
+ transition: theme2.styles.transition
5437
5456
  }
5438
5457
  ),
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
- ] })
5458
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default.row, { height: "100%", children: [
5459
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
5460
+ Div_default,
5461
+ {
5462
+ className: "react-better-html-no-scrollbar",
5463
+ width: buttonWidth,
5464
+ height: "100%",
5465
+ overflowY: "auto",
5466
+ tabIndex: -1,
5467
+ children: readyHours.map((hour) => {
5468
+ const isSelected = hour.toString() === valueHour;
5469
+ const isDisabled = minHours && hour < minHours || maxHours && hour > maxHours;
5470
+ return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
5471
+ Div_default.row,
5472
+ {
5473
+ alignItems: "center",
5474
+ justifyContent: "center",
5475
+ color: isSelected ? theme2.colors.base : theme2.colors.textPrimary,
5476
+ backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
5477
+ filterHover: "brightness(0.9)",
5478
+ cursor: isDisabled ? "not-allowed" : "pointer",
5479
+ padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
5480
+ opacity: isDisabled ? 0.6 : void 0,
5481
+ value: hour,
5482
+ onClickWithValue: !isDisabled ? onClickHour : void 0,
5483
+ ref: isSelected ? selectedHourRef : void 0,
5484
+ children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text_default, { textAlign: "center", children: hour.toString().padStart(2, "0") })
5485
+ },
5486
+ hour
5487
+ );
5488
+ })
5489
+ }
5490
+ ),
5491
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
5492
+ Div_default,
5493
+ {
5494
+ className: "react-better-html-no-scrollbar",
5495
+ width: buttonWidth,
5496
+ height: "100%",
5497
+ overflowY: "auto",
5498
+ tabIndex: -1,
5499
+ children: readyMinutes.map((minute) => {
5500
+ const isSelected = minute.toString() === valueMinute;
5501
+ const currentHour = parseInt(valueHour);
5502
+ const isDisabled = minHours !== void 0 && minMinutes !== void 0 && currentHour === minHours && minute < minMinutes || maxHours !== void 0 && maxMinutes !== void 0 && currentHour === maxHours && minute > maxMinutes;
5503
+ return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
5504
+ Div_default.row,
5505
+ {
5506
+ alignItems: "center",
5507
+ justifyContent: "center",
5508
+ color: isSelected ? theme2.colors.base : theme2.colors.textPrimary,
5509
+ backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
5510
+ filterHover: "brightness(0.9)",
5511
+ cursor: isDisabled ? "not-allowed" : "pointer",
5512
+ padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
5513
+ opacity: isDisabled ? 0.6 : void 0,
5514
+ value: minute,
5515
+ onClickWithValue: !isDisabled ? onClickMinute : void 0,
5516
+ ref: isSelected ? selectedMinuteRef : void 0,
5517
+ children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text_default, { textAlign: "center", children: minute.toString().padStart(2, "0") })
5518
+ },
5519
+ minute
5520
+ );
5521
+ })
5522
+ }
5523
+ )
5524
+ ] })
5525
+ ]
5473
5526
  }
5474
5527
  ) : void 0,
5475
5528
  holderRef,
@@ -5481,7 +5534,7 @@ InputFieldComponent.time = (0, import_react21.forwardRef)(function Time({ hoursT
5481
5534
  }
5482
5535
  );
5483
5536
  });
5484
- InputFieldComponent.color = (0, import_react21.forwardRef)(function Color4(inputFieldProps, ref) {
5537
+ InputFieldComponent.color = (0, import_react21.forwardRef)(function Color4({ ...inputFieldProps }, ref) {
5485
5538
  const betterHtmlContextInternal = useBetterHtmlContextInternal();
5486
5539
  const { value, onChangeValue, ...props } = useComponentsPropsMerger(
5487
5540
  betterHtmlContextInternal.components.inputField?.style?.time,
@@ -7794,18 +7847,11 @@ var MenuItemComponent = (0, import_react31.memo)(function MenuItemComponent2({
7794
7847
  backgroundColor,
7795
7848
  activeItemColor,
7796
7849
  hoverItemColor,
7850
+ location,
7797
7851
  onClick
7798
7852
  }) {
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
7853
  const theme2 = (0, import_react_better_core29.useTheme)();
7807
7854
  const mediaQuery = useMediaQuery();
7808
- const location = reactRouterDomPluginConfig.useLocation();
7809
7855
  const { components, sideMenuIsCollapsed, setSideMenuIsCollapsed } = useBetterHtmlContextInternal();
7810
7856
  const { colorTheme } = (0, import_react_better_core29.useBetterCoreContext)();
7811
7857
  const { activeItem, setActiveItem } = useSideMenuContext();
@@ -7957,6 +8003,7 @@ var MenuItemComponent = (0, import_react31.memo)(function MenuItemComponent2({
7957
8003
  {
7958
8004
  item: child,
7959
8005
  backgroundColor: readyBackgroundColor,
8006
+ location,
7960
8007
  onClick
7961
8008
  },
7962
8009
  child.text
@@ -8007,6 +8054,7 @@ var MenuItemComponent = (0, import_react31.memo)(function MenuItemComponent2({
8007
8054
  var SideMenuComponent = function SideMenu({
8008
8055
  items,
8009
8056
  bottomItems,
8057
+ location,
8010
8058
  topSpace = 0,
8011
8059
  logoAssetName,
8012
8060
  logoUrl,
@@ -8068,6 +8116,7 @@ var SideMenuComponent = function SideMenu({
8068
8116
  backgroundColor: readyBackgroundColor,
8069
8117
  activeItemColor,
8070
8118
  hoverItemColor,
8119
+ location,
8071
8120
  onClick: onClickXButton
8072
8121
  },
8073
8122
  item.text
@@ -8090,6 +8139,7 @@ var SideMenuComponent = function SideMenu({
8090
8139
  backgroundColor: readyBackgroundColor,
8091
8140
  activeItemColor,
8092
8141
  hoverItemColor,
8142
+ location,
8093
8143
  onClick: onClickXButton
8094
8144
  },
8095
8145
  item.text