react-better-html 1.1.157 → 1.1.158

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 (5) hide show
  1. package/dist/index.js +101 -48
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +109 -56
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -2726,12 +2726,17 @@ function useStyledComponentStyles(props, theme2, excludeProps) {
2726
2726
  haveHover = true;
2727
2727
  const normalKey = key.slice(0, -5);
2728
2728
  hoverStyle[normalKey] = props[key];
2729
+ if (normalKey === "transition") hoverStyle.WebkitTransition = hoverStyle.transition;
2729
2730
  } else {
2730
2731
  if (!cssProps[key.toLowerCase()]) continue;
2731
2732
  normalStyle[key] = props[key];
2733
+ if (key === "transition") normalStyle.WebkitTransition = normalStyle.transition;
2732
2734
  }
2733
2735
  }
2734
- if (haveHover) normalStyle.transition = theme2?.styles.transition ?? "";
2736
+ if (haveHover) {
2737
+ normalStyle.transition = theme2?.styles.transition ?? "";
2738
+ normalStyle.WebkitTransition = normalStyle.transition;
2739
+ }
2735
2740
  return {
2736
2741
  normalStyle,
2737
2742
  hoverStyle
@@ -4396,13 +4401,15 @@ var countries = [
4396
4401
  name: "Finland",
4397
4402
  code: "FI",
4398
4403
  timeZone: "Europe/Helsinki",
4399
- phoneNumberExtension: "358"
4404
+ phoneNumberExtension: "358",
4405
+ phoneNumberFormat: "XX XXX XX XX"
4400
4406
  },
4401
4407
  {
4402
4408
  name: "France",
4403
4409
  code: "FR",
4404
4410
  timeZone: "Europe/Paris",
4405
- phoneNumberExtension: "33"
4411
+ phoneNumberExtension: "33",
4412
+ phoneNumberFormat: "X XX XX XX XX"
4406
4413
  },
4407
4414
  {
4408
4415
  name: "French Guiana",
@@ -4445,7 +4452,7 @@ var countries = [
4445
4452
  code: "DE",
4446
4453
  timeZone: "Europe/Berlin",
4447
4454
  phoneNumberExtension: "49",
4448
- phoneNumberFormat: "XXXX XXXXXX"
4455
+ phoneNumberFormat: "XXXX XXXXXXX"
4449
4456
  },
4450
4457
  {
4451
4458
  name: "Ghana",
@@ -5894,8 +5901,18 @@ var getWeekDayName = (day, short = false) => {
5894
5901
  };
5895
5902
  var weekDaysIndex = [1, 2, 3, 4, 5, 6, 0];
5896
5903
  var yearsRange = Array.from({ length: 100 + 1 + 50 }, (_, index) => index + (/* @__PURE__ */ new Date()).getFullYear() - 100);
5904
+ var SelectWrapperComponent = import_styled_components10.default.div.withConfig({
5905
+ shouldForwardProp: (prop) => !["theme"].includes(prop)
5906
+ })`
5907
+ &:has(select:focus) {
5908
+ outline: auto;
5909
+ outline-color: -webkit-focus-ring-color;
5910
+ outline-style: auto;
5911
+ outline-offset: 2px;
5912
+ }
5913
+ `;
5897
5914
  var SelectComponent = import_styled_components10.default.select.withConfig({
5898
- shouldForwardProp: (prop) => !["normalStyle", "hoverStyle"].includes(prop)
5915
+ shouldForwardProp: (prop) => !["theme"].includes(prop)
5899
5916
  })`
5900
5917
  position: absolute;
5901
5918
  top: 50%;
@@ -5905,6 +5922,7 @@ var SelectComponent = import_styled_components10.default.select.withConfig({
5905
5922
  `;
5906
5923
  function Calendar({ value, minDate, maxDate, onChange }) {
5907
5924
  const theme2 = useTheme();
5925
+ const internalYearSelectId = (0, import_react19.useId)();
5908
5926
  const [currentDate, setCurrentDate] = (0, import_react19.useState)(value ? new Date(value) : void 0);
5909
5927
  const [currentMonth, setCurrentMonth] = (0, import_react19.useState)(currentDate?.getMonth() ?? (/* @__PURE__ */ new Date()).getMonth());
5910
5928
  const [currentYear, setCurrentYear] = (0, import_react19.useState)(currentDate?.getFullYear() ?? (/* @__PURE__ */ new Date()).getFullYear());
@@ -5972,11 +5990,20 @@ function Calendar({ value, minDate, maxDate, onChange }) {
5972
5990
  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Button_default.icon, { icon: "chevronLeft", onClick: onClickPreviousMonthButton }),
5973
5991
  /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Div_default.row, { alignItems: "center", gap: 4, children: [
5974
5992
  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Text_default, { fontWeight: 700, children: getMonthName(currentMonth) }),
5975
- /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Div_default.row, { position: "relative", alignItems: "center", gap: 2, children: [
5993
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SelectWrapperComponent, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Div_default.row, { position: "relative", alignItems: "center", gap: 2, children: [
5976
5994
  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Text_default, { fontWeight: 700, children: currentYear }),
5977
5995
  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Icon_default, { name: "chevronDown", size: 12 }),
5978
- /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SelectComponent, { theme: theme2, value: currentYear, onChange: onChangeYearSelect, children: yearsRange.map((year) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("option", { value: year, children: year }, year)) })
5979
- ] })
5996
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
5997
+ SelectComponent,
5998
+ {
5999
+ theme: theme2,
6000
+ value: currentYear,
6001
+ onChange: onChangeYearSelect,
6002
+ id: internalYearSelectId,
6003
+ children: yearsRange.map((year) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("option", { value: year, children: year }, year))
6004
+ }
6005
+ )
6006
+ ] }) })
5980
6007
  ] }),
5981
6008
  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Button_default.icon, { icon: "chevronRight", onClick: onClickNextMonthButton })
5982
6009
  ] }),
@@ -6100,6 +6127,10 @@ var InputElement = import_styled_components11.default.input.withConfig({
6100
6127
  cursor: not-allowed;
6101
6128
  }
6102
6129
 
6130
+ &:read-only {
6131
+ caret-color: transparent;
6132
+ }
6133
+
6103
6134
  &::-webkit-outer-spin-button,
6104
6135
  &::-webkit-inner-spin-button {
6105
6136
  -webkit-appearance: none;
@@ -6756,6 +6787,7 @@ InputFieldComponent.dateTime = (0, import_react20.forwardRef)(function DateTime(
6756
6787
  width: buttonWidth,
6757
6788
  height: `calc(100% - ${16 + theme2.styles.gap / 2}px)`,
6758
6789
  overflowY: "auto",
6790
+ tabIndex: -1,
6759
6791
  children: hours.map((hour) => {
6760
6792
  const isSelected = hour.toString() === valueHour;
6761
6793
  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
@@ -6789,6 +6821,7 @@ InputFieldComponent.dateTime = (0, import_react20.forwardRef)(function DateTime(
6789
6821
  width: buttonWidth,
6790
6822
  height: `calc(100% - ${16 + theme2.styles.gap / 2}px)`,
6791
6823
  overflowY: "auto",
6824
+ tabIndex: -1,
6792
6825
  children: minutes.map((minute) => {
6793
6826
  const isSelected = minute.toString() === valueMinute;
6794
6827
  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
@@ -6877,46 +6910,66 @@ InputFieldComponent.time = (0, import_react20.forwardRef)(function Time({ ...pro
6877
6910
  userSelect: "none",
6878
6911
  ...insideInputFieldComponentProps,
6879
6912
  children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default.row, { height: "100%", children: [
6880
- /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Div_default, { className: "react-better-html-no-scrollbar", width: buttonWidth, height: "100%", overflowY: "auto", children: hours.map((hour) => {
6881
- const isSelected = hour.toString() === valueHour;
6882
- return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
6883
- Div_default.row,
6884
- {
6885
- alignItems: "center",
6886
- justifyContent: "center",
6887
- color: isSelected ? theme2.colors.base : theme2.colors.textPrimary,
6888
- backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
6889
- filterHover: "brightness(0.9)",
6890
- cursor: "pointer",
6891
- padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
6892
- value: hour,
6893
- onClickWithValue: onClickHour,
6894
- ref: isSelected ? selectedHourRef : void 0,
6895
- children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text_default, { textAlign: "center", children: hour.toString().padStart(2, "0") })
6896
- },
6897
- hour
6898
- );
6899
- }) }),
6900
- /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Div_default, { className: "react-better-html-no-scrollbar", width: buttonWidth, height: "100%", overflowY: "auto", children: minutes.map((minute) => {
6901
- const isSelected = minute.toString() === valueMinute;
6902
- return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
6903
- Div_default.row,
6904
- {
6905
- alignItems: "center",
6906
- justifyContent: "center",
6907
- color: isSelected ? theme2.colors.base : theme2.colors.textPrimary,
6908
- backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
6909
- filterHover: "brightness(0.9)",
6910
- cursor: "pointer",
6911
- padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
6912
- value: minute,
6913
- onClickWithValue: onClickMinute,
6914
- ref: isSelected ? selectedMinuteRef : void 0,
6915
- children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text_default, { textAlign: "center", children: minute.toString().padStart(2, "0") })
6916
- },
6917
- minute
6918
- );
6919
- }) })
6913
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
6914
+ Div_default,
6915
+ {
6916
+ className: "react-better-html-no-scrollbar",
6917
+ width: buttonWidth,
6918
+ height: "100%",
6919
+ overflowY: "auto",
6920
+ tabIndex: -1,
6921
+ children: hours.map((hour) => {
6922
+ const isSelected = hour.toString() === valueHour;
6923
+ return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
6924
+ Div_default.row,
6925
+ {
6926
+ alignItems: "center",
6927
+ justifyContent: "center",
6928
+ color: isSelected ? theme2.colors.base : theme2.colors.textPrimary,
6929
+ backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
6930
+ filterHover: "brightness(0.9)",
6931
+ cursor: "pointer",
6932
+ padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
6933
+ value: hour,
6934
+ onClickWithValue: onClickHour,
6935
+ ref: isSelected ? selectedHourRef : void 0,
6936
+ children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text_default, { textAlign: "center", children: hour.toString().padStart(2, "0") })
6937
+ },
6938
+ hour
6939
+ );
6940
+ })
6941
+ }
6942
+ ),
6943
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
6944
+ Div_default,
6945
+ {
6946
+ className: "react-better-html-no-scrollbar",
6947
+ width: buttonWidth,
6948
+ height: "100%",
6949
+ overflowY: "auto",
6950
+ tabIndex: -1,
6951
+ children: minutes.map((minute) => {
6952
+ const isSelected = minute.toString() === valueMinute;
6953
+ return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
6954
+ Div_default.row,
6955
+ {
6956
+ alignItems: "center",
6957
+ justifyContent: "center",
6958
+ color: isSelected ? theme2.colors.base : theme2.colors.textPrimary,
6959
+ backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
6960
+ filterHover: "brightness(0.9)",
6961
+ cursor: "pointer",
6962
+ padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
6963
+ value: minute,
6964
+ onClickWithValue: onClickMinute,
6965
+ ref: isSelected ? selectedMinuteRef : void 0,
6966
+ children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text_default, { textAlign: "center", children: minute.toString().padStart(2, "0") })
6967
+ },
6968
+ minute
6969
+ );
6970
+ })
6971
+ }
6972
+ )
6920
6973
  ] })
6921
6974
  }
6922
6975
  ) : void 0,