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.mjs CHANGED
@@ -950,7 +950,8 @@ function useComponentInputFieldDateProps(props, holderRef, disabled) {
950
950
  setInternalValue,
951
951
  inputFieldProps,
952
952
  insideInputFieldComponentProps,
953
- isOpen
953
+ isOpen,
954
+ isFocused
954
955
  };
955
956
  }
956
957
  function usePageResize() {
@@ -4993,7 +4994,7 @@ InputFieldComponent.phoneNumber = forwardRef11(function PhoneNumber(inputFieldPr
4993
4994
  ] })
4994
4995
  ] });
4995
4996
  });
4996
- InputFieldComponent.date = forwardRef11(function Date2({ minDate, maxDate, ...inputFieldProps }, ref) {
4997
+ InputFieldComponent.date = forwardRef11(function Date2({ minDate, maxDate, dropdownPosition = "left", ...inputFieldProps }, ref) {
4997
4998
  const betterHtmlContextInternal = useBetterHtmlContextInternal();
4998
4999
  const props = useComponentsPropsMerger(
4999
5000
  betterHtmlContextInternal.components.inputField?.style?.date,
@@ -5006,7 +5007,8 @@ InputFieldComponent.date = forwardRef11(function Date2({ minDate, maxDate, ...in
5006
5007
  internalValue,
5007
5008
  setInternalValue,
5008
5009
  inputFieldProps: restInputFieldProps,
5009
- insideInputFieldComponentProps
5010
+ insideInputFieldComponentProps,
5011
+ isFocused
5010
5012
  } = useComponentInputFieldDateProps(props, holderRef, isMobileIOS);
5011
5013
  const onChange = useCallback10(
5012
5014
  (date) => {
@@ -5020,12 +5022,13 @@ InputFieldComponent.date = forwardRef11(function Date2({ minDate, maxDate, ...in
5020
5022
  {
5021
5023
  ...betterHtmlContextInternal.components.inputField?.style?.date,
5022
5024
  type: "date",
5023
- insideInputFieldAfterComponent: !isMobileIOS ? /* @__PURE__ */ jsx17(
5025
+ insideInputFieldAfterComponent: !isMobileIOS ? /* @__PURE__ */ jsxs14(
5024
5026
  Div_default,
5025
5027
  {
5026
5028
  position: "absolute",
5027
5029
  top: "100%",
5028
- left: 0,
5030
+ left: dropdownPosition === "left" ? 0 : void 0,
5031
+ right: dropdownPosition === "right" ? 0 : void 0,
5029
5032
  width: "fit-content",
5030
5033
  backgroundColor: theme2.colors.backgroundContent,
5031
5034
  borderBottomLeftRadius: theme2.styles.borderRadius,
@@ -5033,7 +5036,22 @@ InputFieldComponent.date = forwardRef11(function Date2({ minDate, maxDate, ...in
5033
5036
  boxShadow: "0px 10px 20px #00000020",
5034
5037
  userSelect: "none",
5035
5038
  ...insideInputFieldComponentProps,
5036
- children: /* @__PURE__ */ jsx17(Calendar_default, { value: internalValue, minDate, maxDate, onChange })
5039
+ children: [
5040
+ /* @__PURE__ */ jsx17(
5041
+ Div_default,
5042
+ {
5043
+ position: "absolute",
5044
+ top: 0,
5045
+ left: -theme2.styles.borderWidth,
5046
+ width: `calc(100% + ${theme2.styles.borderWidth * 2}px)`,
5047
+ height: theme2.styles.borderWidth,
5048
+ backgroundColor: isFocused ? theme2.colors.primary : theme2.colors.border,
5049
+ transform: `translateY(-${theme2.styles.borderWidth}px)`,
5050
+ transition: theme2.styles.transition
5051
+ }
5052
+ ),
5053
+ /* @__PURE__ */ jsx17(Calendar_default, { value: internalValue, minDate, maxDate, onChange })
5054
+ ]
5037
5055
  }
5038
5056
  ) : void 0,
5039
5057
  holderRef,
@@ -5050,6 +5068,7 @@ InputFieldComponent.dateTime = forwardRef11(function DateTime({
5050
5068
  maxDate,
5051
5069
  defaultDateAfterTimePick,
5052
5070
  defaultTimeAfterDatePick = "00:00",
5071
+ dropdownPosition = "left",
5053
5072
  ...inputFieldProps
5054
5073
  }, ref) {
5055
5074
  const betterHtmlContextInternal = useBetterHtmlContextInternal();
@@ -5067,7 +5086,8 @@ InputFieldComponent.dateTime = forwardRef11(function DateTime({
5067
5086
  setInternalValue,
5068
5087
  inputFieldProps: restInputFieldProps,
5069
5088
  insideInputFieldComponentProps,
5070
- isOpen
5089
+ isOpen,
5090
+ isFocused
5071
5091
  } = useComponentInputFieldDateProps(props, holderRef, isMobileIOS);
5072
5092
  const readyHours = useMemo6(
5073
5093
  () => hoursToRender?.filter((hour) => hour >= 0 && hour <= 23) ?? hours,
@@ -5145,12 +5165,13 @@ InputFieldComponent.dateTime = forwardRef11(function DateTime({
5145
5165
  {
5146
5166
  ...betterHtmlContextInternal.components.inputField?.style?.dateTime,
5147
5167
  type: "datetime-local",
5148
- insideInputFieldAfterComponent: !isMobileIOS ? /* @__PURE__ */ jsx17(
5168
+ insideInputFieldAfterComponent: !isMobileIOS ? /* @__PURE__ */ jsxs14(
5149
5169
  Div_default,
5150
5170
  {
5151
5171
  position: "absolute",
5152
5172
  top: "100%",
5153
- left: 0,
5173
+ left: dropdownPosition === "left" ? 0 : void 0,
5174
+ right: dropdownPosition === "right" ? 0 : void 0,
5154
5175
  width: "fit-content",
5155
5176
  backgroundColor: theme2.colors.backgroundContent,
5156
5177
  borderBottomLeftRadius: theme2.styles.borderRadius,
@@ -5159,89 +5180,104 @@ InputFieldComponent.dateTime = forwardRef11(function DateTime({
5159
5180
  overflow: "hidden",
5160
5181
  userSelect: "none",
5161
5182
  ...insideInputFieldComponentProps,
5162
- children: /* @__PURE__ */ jsxs14(Div_default.row, { gap: theme2.styles.space, children: [
5163
- /* @__PURE__ */ jsx17(Calendar_default, { value: internalValue, minDate, maxDate, onChange }),
5164
- /* @__PURE__ */ jsxs14(
5165
- Div_default.row,
5183
+ children: [
5184
+ /* @__PURE__ */ jsx17(
5185
+ Div_default,
5166
5186
  {
5167
- height: 276,
5168
- gap: theme2.styles.gap / 2,
5169
- paddingTop: topSpacing,
5170
- paddingBottom: theme2.styles.space / 2,
5171
- paddingRight: theme2.styles.space / 2,
5172
- children: [
5173
- /* @__PURE__ */ jsxs14(Div_default, { height: "100%", children: [
5174
- /* @__PURE__ */ jsx17(Text_default, { fontSize: 14, fontWeight: 700, textAlign: "center", marginBottom: theme2.styles.gap / 2, children: "H" }),
5175
- /* @__PURE__ */ jsx17(
5176
- Div_default,
5177
- {
5178
- className: "react-better-html-no-scrollbar",
5179
- width: buttonWidth,
5180
- height: `calc(100% - ${16 + theme2.styles.gap / 2}px)`,
5181
- overflowY: "auto",
5182
- tabIndex: -1,
5183
- children: readyHours.map((hour) => {
5184
- const isSelected = hour.toString() === valueHour;
5185
- return /* @__PURE__ */ jsx17(
5186
- Div_default.row,
5187
- {
5188
- alignItems: "center",
5189
- justifyContent: "center",
5190
- color: isSelected ? theme2.colors.base : theme2.colors.textPrimary,
5191
- backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
5192
- borderRadius: theme2.styles.borderRadius / 2,
5193
- filterHover: "brightness(0.9)",
5194
- cursor: "pointer",
5195
- padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
5196
- value: hour,
5197
- onClickWithValue: onClickHour,
5198
- ref: isSelected ? selectedHourRef : void 0,
5199
- children: /* @__PURE__ */ jsx17(Text_default, { textAlign: "center", children: hour.toString().padStart(2, "0") })
5200
- },
5201
- hour
5202
- );
5203
- })
5204
- }
5205
- )
5206
- ] }),
5207
- /* @__PURE__ */ jsxs14(Div_default, { height: "100%", children: [
5208
- /* @__PURE__ */ jsx17(Text_default, { fontSize: 14, fontWeight: 700, textAlign: "center", marginBottom: theme2.styles.gap / 2, children: "M" }),
5209
- /* @__PURE__ */ jsx17(
5210
- Div_default,
5211
- {
5212
- className: "react-better-html-no-scrollbar",
5213
- width: buttonWidth,
5214
- height: `calc(100% - ${16 + theme2.styles.gap / 2}px)`,
5215
- overflowY: "auto",
5216
- tabIndex: -1,
5217
- children: readyMinutes.map((minute) => {
5218
- const isSelected = minute.toString() === valueMinute;
5219
- return /* @__PURE__ */ jsx17(
5220
- Div_default.row,
5221
- {
5222
- alignItems: "center",
5223
- justifyContent: "center",
5224
- color: isSelected ? theme2.colors.base : theme2.colors.textPrimary,
5225
- backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
5226
- borderRadius: theme2.styles.borderRadius / 2,
5227
- filterHover: "brightness(0.9)",
5228
- cursor: "pointer",
5229
- padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
5230
- value: minute,
5231
- onClickWithValue: onClickMinute,
5232
- ref: isSelected ? selectedMinuteRef : void 0,
5233
- children: /* @__PURE__ */ jsx17(Text_default, { textAlign: "center", children: minute.toString().padStart(2, "0") })
5234
- },
5235
- minute
5236
- );
5237
- })
5238
- }
5239
- )
5240
- ] })
5241
- ]
5187
+ position: "absolute",
5188
+ top: 0,
5189
+ left: -theme2.styles.borderWidth,
5190
+ width: `calc(100% + ${theme2.styles.borderWidth * 2}px)`,
5191
+ height: theme2.styles.borderWidth,
5192
+ backgroundColor: isFocused ? theme2.colors.primary : theme2.colors.border,
5193
+ transform: `translateY(-${theme2.styles.borderWidth}px)`,
5194
+ transition: theme2.styles.transition
5242
5195
  }
5243
- )
5244
- ] })
5196
+ ),
5197
+ /* @__PURE__ */ jsxs14(Div_default.row, { gap: theme2.styles.space, children: [
5198
+ /* @__PURE__ */ jsx17(Calendar_default, { value: internalValue, minDate, maxDate, onChange }),
5199
+ /* @__PURE__ */ jsxs14(
5200
+ Div_default.row,
5201
+ {
5202
+ height: 276,
5203
+ gap: theme2.styles.gap / 2,
5204
+ paddingTop: topSpacing,
5205
+ paddingBottom: theme2.styles.space / 2,
5206
+ paddingRight: theme2.styles.space / 2,
5207
+ children: [
5208
+ /* @__PURE__ */ jsxs14(Div_default, { height: "100%", children: [
5209
+ /* @__PURE__ */ jsx17(Text_default, { fontSize: 14, fontWeight: 700, textAlign: "center", marginBottom: theme2.styles.gap / 2, children: "H" }),
5210
+ /* @__PURE__ */ jsx17(
5211
+ Div_default,
5212
+ {
5213
+ className: "react-better-html-no-scrollbar",
5214
+ width: buttonWidth,
5215
+ height: `calc(100% - ${16 + theme2.styles.gap / 2}px)`,
5216
+ overflowY: "auto",
5217
+ tabIndex: -1,
5218
+ children: readyHours.map((hour) => {
5219
+ const isSelected = hour.toString() === valueHour;
5220
+ return /* @__PURE__ */ jsx17(
5221
+ Div_default.row,
5222
+ {
5223
+ alignItems: "center",
5224
+ justifyContent: "center",
5225
+ color: isSelected ? theme2.colors.base : theme2.colors.textPrimary,
5226
+ backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
5227
+ borderRadius: theme2.styles.borderRadius / 2,
5228
+ filterHover: "brightness(0.9)",
5229
+ cursor: "pointer",
5230
+ padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
5231
+ value: hour,
5232
+ onClickWithValue: onClickHour,
5233
+ ref: isSelected ? selectedHourRef : void 0,
5234
+ children: /* @__PURE__ */ jsx17(Text_default, { textAlign: "center", children: hour.toString().padStart(2, "0") })
5235
+ },
5236
+ hour
5237
+ );
5238
+ })
5239
+ }
5240
+ )
5241
+ ] }),
5242
+ /* @__PURE__ */ jsxs14(Div_default, { height: "100%", children: [
5243
+ /* @__PURE__ */ jsx17(Text_default, { fontSize: 14, fontWeight: 700, textAlign: "center", marginBottom: theme2.styles.gap / 2, children: "M" }),
5244
+ /* @__PURE__ */ jsx17(
5245
+ Div_default,
5246
+ {
5247
+ className: "react-better-html-no-scrollbar",
5248
+ width: buttonWidth,
5249
+ height: `calc(100% - ${16 + theme2.styles.gap / 2}px)`,
5250
+ overflowY: "auto",
5251
+ tabIndex: -1,
5252
+ children: readyMinutes.map((minute) => {
5253
+ const isSelected = minute.toString() === valueMinute;
5254
+ return /* @__PURE__ */ jsx17(
5255
+ Div_default.row,
5256
+ {
5257
+ alignItems: "center",
5258
+ justifyContent: "center",
5259
+ color: isSelected ? theme2.colors.base : theme2.colors.textPrimary,
5260
+ backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
5261
+ borderRadius: theme2.styles.borderRadius / 2,
5262
+ filterHover: "brightness(0.9)",
5263
+ cursor: "pointer",
5264
+ padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
5265
+ value: minute,
5266
+ onClickWithValue: onClickMinute,
5267
+ ref: isSelected ? selectedMinuteRef : void 0,
5268
+ children: /* @__PURE__ */ jsx17(Text_default, { textAlign: "center", children: minute.toString().padStart(2, "0") })
5269
+ },
5270
+ minute
5271
+ );
5272
+ })
5273
+ }
5274
+ )
5275
+ ] })
5276
+ ]
5277
+ }
5278
+ )
5279
+ ] })
5280
+ ]
5245
5281
  }
5246
5282
  ) : void 0,
5247
5283
  holderRef,
@@ -5252,7 +5288,7 @@ InputFieldComponent.dateTime = forwardRef11(function DateTime({
5252
5288
  }
5253
5289
  );
5254
5290
  });
5255
- InputFieldComponent.time = forwardRef11(function Time({ hoursToRender, minutesToRender, minTime, maxTime, ...inputFieldProps }, ref) {
5291
+ InputFieldComponent.time = forwardRef11(function Time({ hoursToRender, minutesToRender, minTime, maxTime, dropdownPosition = "left", ...inputFieldProps }, ref) {
5256
5292
  const betterHtmlContextInternal = useBetterHtmlContextInternal();
5257
5293
  const props = useComponentsPropsMerger(
5258
5294
  betterHtmlContextInternal.components.inputField?.style?.time,
@@ -5272,7 +5308,8 @@ InputFieldComponent.time = forwardRef11(function Time({ hoursToRender, minutesTo
5272
5308
  setInternalValue,
5273
5309
  inputFieldProps: restInputFieldProps,
5274
5310
  insideInputFieldComponentProps,
5275
- isOpen
5311
+ isOpen,
5312
+ isFocused
5276
5313
  } = useComponentInputFieldDateProps(props, holderRef, isMobileIOS);
5277
5314
  const readyHours = useMemo6(
5278
5315
  () => hoursToRender?.filter((hour) => hour >= 0 && hour <= 23) ?? hours,
@@ -5339,12 +5376,13 @@ InputFieldComponent.time = forwardRef11(function Time({ hoursToRender, minutesTo
5339
5376
  {
5340
5377
  ...betterHtmlContextInternal.components.inputField?.style?.time,
5341
5378
  type: "time",
5342
- insideInputFieldAfterComponent: !isMobileIOS ? /* @__PURE__ */ jsx17(
5379
+ insideInputFieldAfterComponent: !isMobileIOS ? /* @__PURE__ */ jsxs14(
5343
5380
  Div_default,
5344
5381
  {
5345
5382
  position: "absolute",
5346
5383
  top: "100%",
5347
- left: 0,
5384
+ left: dropdownPosition === "left" ? 0 : void 0,
5385
+ right: dropdownPosition === "right" ? 0 : void 0,
5348
5386
  width: buttonWidth * 2 + 2,
5349
5387
  height: 300,
5350
5388
  backgroundColor: theme2.colors.backgroundContent,
@@ -5354,73 +5392,88 @@ InputFieldComponent.time = forwardRef11(function Time({ hoursToRender, minutesTo
5354
5392
  overflowY: "auto",
5355
5393
  userSelect: "none",
5356
5394
  ...insideInputFieldComponentProps,
5357
- children: /* @__PURE__ */ jsxs14(Div_default.row, { height: "100%", children: [
5395
+ children: [
5358
5396
  /* @__PURE__ */ jsx17(
5359
5397
  Div_default,
5360
5398
  {
5361
- className: "react-better-html-no-scrollbar",
5362
- width: buttonWidth,
5363
- height: "100%",
5364
- overflowY: "auto",
5365
- tabIndex: -1,
5366
- children: readyHours.map((hour) => {
5367
- const isSelected = hour.toString() === valueHour;
5368
- const isDisabled = minHours && hour < minHours || maxHours && hour > maxHours;
5369
- return /* @__PURE__ */ jsx17(
5370
- Div_default.row,
5371
- {
5372
- alignItems: "center",
5373
- justifyContent: "center",
5374
- color: isSelected ? theme2.colors.base : theme2.colors.textPrimary,
5375
- backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
5376
- filterHover: "brightness(0.9)",
5377
- cursor: isDisabled ? "not-allowed" : "pointer",
5378
- padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
5379
- opacity: isDisabled ? 0.6 : void 0,
5380
- value: hour,
5381
- onClickWithValue: !isDisabled ? onClickHour : void 0,
5382
- ref: isSelected ? selectedHourRef : void 0,
5383
- children: /* @__PURE__ */ jsx17(Text_default, { textAlign: "center", children: hour.toString().padStart(2, "0") })
5384
- },
5385
- hour
5386
- );
5387
- })
5399
+ position: "absolute",
5400
+ top: 0,
5401
+ left: -theme2.styles.borderWidth,
5402
+ width: `calc(100% + ${theme2.styles.borderWidth * 2}px)`,
5403
+ height: theme2.styles.borderWidth,
5404
+ backgroundColor: isFocused ? theme2.colors.primary : theme2.colors.border,
5405
+ transform: `translateY(-${theme2.styles.borderWidth}px)`,
5406
+ transition: theme2.styles.transition
5388
5407
  }
5389
5408
  ),
5390
- /* @__PURE__ */ jsx17(
5391
- Div_default,
5392
- {
5393
- className: "react-better-html-no-scrollbar",
5394
- width: buttonWidth,
5395
- height: "100%",
5396
- overflowY: "auto",
5397
- tabIndex: -1,
5398
- children: readyMinutes.map((minute) => {
5399
- const isSelected = minute.toString() === valueMinute;
5400
- const currentHour = parseInt(valueHour);
5401
- const isDisabled = minHours !== void 0 && minMinutes !== void 0 && currentHour === minHours && minute < minMinutes || maxHours !== void 0 && maxMinutes !== void 0 && currentHour === maxHours && minute > maxMinutes;
5402
- return /* @__PURE__ */ jsx17(
5403
- Div_default.row,
5404
- {
5405
- alignItems: "center",
5406
- justifyContent: "center",
5407
- color: isSelected ? theme2.colors.base : theme2.colors.textPrimary,
5408
- backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
5409
- filterHover: "brightness(0.9)",
5410
- cursor: isDisabled ? "not-allowed" : "pointer",
5411
- padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
5412
- opacity: isDisabled ? 0.6 : void 0,
5413
- value: minute,
5414
- onClickWithValue: !isDisabled ? onClickMinute : void 0,
5415
- ref: isSelected ? selectedMinuteRef : void 0,
5416
- children: /* @__PURE__ */ jsx17(Text_default, { textAlign: "center", children: minute.toString().padStart(2, "0") })
5417
- },
5418
- minute
5419
- );
5420
- })
5421
- }
5422
- )
5423
- ] })
5409
+ /* @__PURE__ */ jsxs14(Div_default.row, { height: "100%", children: [
5410
+ /* @__PURE__ */ jsx17(
5411
+ Div_default,
5412
+ {
5413
+ className: "react-better-html-no-scrollbar",
5414
+ width: buttonWidth,
5415
+ height: "100%",
5416
+ overflowY: "auto",
5417
+ tabIndex: -1,
5418
+ children: readyHours.map((hour) => {
5419
+ const isSelected = hour.toString() === valueHour;
5420
+ const isDisabled = minHours && hour < minHours || maxHours && hour > maxHours;
5421
+ return /* @__PURE__ */ jsx17(
5422
+ Div_default.row,
5423
+ {
5424
+ alignItems: "center",
5425
+ justifyContent: "center",
5426
+ color: isSelected ? theme2.colors.base : theme2.colors.textPrimary,
5427
+ backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
5428
+ filterHover: "brightness(0.9)",
5429
+ cursor: isDisabled ? "not-allowed" : "pointer",
5430
+ padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
5431
+ opacity: isDisabled ? 0.6 : void 0,
5432
+ value: hour,
5433
+ onClickWithValue: !isDisabled ? onClickHour : void 0,
5434
+ ref: isSelected ? selectedHourRef : void 0,
5435
+ children: /* @__PURE__ */ jsx17(Text_default, { textAlign: "center", children: hour.toString().padStart(2, "0") })
5436
+ },
5437
+ hour
5438
+ );
5439
+ })
5440
+ }
5441
+ ),
5442
+ /* @__PURE__ */ jsx17(
5443
+ Div_default,
5444
+ {
5445
+ className: "react-better-html-no-scrollbar",
5446
+ width: buttonWidth,
5447
+ height: "100%",
5448
+ overflowY: "auto",
5449
+ tabIndex: -1,
5450
+ children: readyMinutes.map((minute) => {
5451
+ const isSelected = minute.toString() === valueMinute;
5452
+ const currentHour = parseInt(valueHour);
5453
+ const isDisabled = minHours !== void 0 && minMinutes !== void 0 && currentHour === minHours && minute < minMinutes || maxHours !== void 0 && maxMinutes !== void 0 && currentHour === maxHours && minute > maxMinutes;
5454
+ return /* @__PURE__ */ jsx17(
5455
+ Div_default.row,
5456
+ {
5457
+ alignItems: "center",
5458
+ justifyContent: "center",
5459
+ color: isSelected ? theme2.colors.base : theme2.colors.textPrimary,
5460
+ backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
5461
+ filterHover: "brightness(0.9)",
5462
+ cursor: isDisabled ? "not-allowed" : "pointer",
5463
+ padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
5464
+ opacity: isDisabled ? 0.6 : void 0,
5465
+ value: minute,
5466
+ onClickWithValue: !isDisabled ? onClickMinute : void 0,
5467
+ ref: isSelected ? selectedMinuteRef : void 0,
5468
+ children: /* @__PURE__ */ jsx17(Text_default, { textAlign: "center", children: minute.toString().padStart(2, "0") })
5469
+ },
5470
+ minute
5471
+ );
5472
+ })
5473
+ }
5474
+ )
5475
+ ] })
5476
+ ]
5424
5477
  }
5425
5478
  ) : void 0,
5426
5479
  holderRef,
@@ -5432,7 +5485,7 @@ InputFieldComponent.time = forwardRef11(function Time({ hoursToRender, minutesTo
5432
5485
  }
5433
5486
  );
5434
5487
  });
5435
- InputFieldComponent.color = forwardRef11(function Color4(inputFieldProps, ref) {
5488
+ InputFieldComponent.color = forwardRef11(function Color4({ ...inputFieldProps }, ref) {
5436
5489
  const betterHtmlContextInternal = useBetterHtmlContextInternal();
5437
5490
  const { value, onChangeValue, ...props } = useComponentsPropsMerger(
5438
5491
  betterHtmlContextInternal.components.inputField?.style?.time,
@@ -7761,18 +7814,11 @@ var MenuItemComponent = memo27(function MenuItemComponent2({
7761
7814
  backgroundColor,
7762
7815
  activeItemColor,
7763
7816
  hoverItemColor,
7817
+ location,
7764
7818
  onClick
7765
7819
  }) {
7766
- const reactRouterDomPlugin2 = usePlugin("react-router-dom");
7767
- if (!reactRouterDomPlugin2) {
7768
- throw new Error(
7769
- "`SideMenu` component requires the `react-router-dom` plugin to be added to the `plugins` prop in `<BetterHtmlProvider>`."
7770
- );
7771
- }
7772
- const reactRouterDomPluginConfig = reactRouterDomPlugin2.getConfig();
7773
7820
  const theme2 = useTheme29();
7774
7821
  const mediaQuery = useMediaQuery();
7775
- const location = reactRouterDomPluginConfig.useLocation();
7776
7822
  const { components, sideMenuIsCollapsed, setSideMenuIsCollapsed } = useBetterHtmlContextInternal();
7777
7823
  const { colorTheme } = useBetterCoreContext11();
7778
7824
  const { activeItem, setActiveItem } = useSideMenuContext();
@@ -7924,6 +7970,7 @@ var MenuItemComponent = memo27(function MenuItemComponent2({
7924
7970
  {
7925
7971
  item: child,
7926
7972
  backgroundColor: readyBackgroundColor,
7973
+ location,
7927
7974
  onClick
7928
7975
  },
7929
7976
  child.text
@@ -7974,6 +8021,7 @@ var MenuItemComponent = memo27(function MenuItemComponent2({
7974
8021
  var SideMenuComponent = function SideMenu({
7975
8022
  items,
7976
8023
  bottomItems,
8024
+ location,
7977
8025
  topSpace = 0,
7978
8026
  logoAssetName,
7979
8027
  logoUrl,
@@ -8035,6 +8083,7 @@ var SideMenuComponent = function SideMenu({
8035
8083
  backgroundColor: readyBackgroundColor,
8036
8084
  activeItemColor,
8037
8085
  hoverItemColor,
8086
+ location,
8038
8087
  onClick: onClickXButton
8039
8088
  },
8040
8089
  item.text
@@ -8057,6 +8106,7 @@ var SideMenuComponent = function SideMenu({
8057
8106
  backgroundColor: readyBackgroundColor,
8058
8107
  activeItemColor,
8059
8108
  hoverItemColor,
8109
+ location,
8060
8110
  onClick: onClickXButton
8061
8111
  },
8062
8112
  item.text