react-better-html 1.1.156 → 1.1.158

package/dist/index.mjs

@@ -1565,10 +1565,24 @@ import styled from "styled-components";
 import { jsx } from "react/jsx-runtime";
 import { createElement } from "react";
 var IconElement = styled.svg.withConfig({
-  shouldForwardProp: (prop) => !["normalStyle", "hoverStyle"].includes(prop)
+  shouldForwardProp: (prop) => !["theme", "normalStyle", "hoverStyle", "hoverColor"].includes(prop)
 })`
    ${(props) => props.normalStyle}
 
+   path {
+      ${(props) => props.hoverColor ? `transition: ${props.theme.styles.transition};` : ""}
+   }
+
+   &:hover {
+      path.react-better-html-icon-path-with-fill {
+         fill: ${(props) => props.hoverColor};
+      }
+
+      path.react-better-html-icon-path-with-stroke {
+         stroke: ${(props) => props.hoverColor};
+      }
+   }
+
    &:hover {
       ${(props) => props.hoverStyle}
    }
@@ -1581,6 +1595,7 @@ var Icon = forwardRef(function Icon2({ name, size = 16, ...props }, ref) {
   const ariaProps = useComponentPropsWithPrefix(props, "aria");
   const restProps = useComponentPropsWithoutStyle(props);
   const svgColor = props.color ?? theme2.colors.textPrimary;
+  const svgHoverColorColor = props.colorHover;
   useEffect(() => {
     if (!icons2[name.toString()])
       console.warn(
@@ -1595,6 +1610,8 @@ var Icon = forwardRef(function Icon2({ name, size = 16, ...props }, ref) {
       viewBox: `0 0 ${icons2[name.toString()]?.width ?? 0} ${icons2[name.toString()]?.height ?? 0}`,
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
+      theme: theme2,
+      hoverColor: svgHoverColorColor,
       ...styledComponentStyles,
       ...dataProps,
       ...ariaProps,
@@ -1604,6 +1621,7 @@ var Icon = forwardRef(function Icon2({ name, size = 16, ...props }, ref) {
         "path",
         {
           ...path,
+          className: path.type === "fill" ? "react-better-html-icon-path-with-fill" : "react-better-html-icon-path-with-stroke",
           fill: path.type === "fill" ? svgColor : void 0,
           stroke: path.type === "stroke" ? svgColor : void 0,
           key: path.d
@@ -2619,12 +2637,17 @@ function useStyledComponentStyles(props, theme2, excludeProps) {
         haveHover = true;
         const normalKey = key.slice(0, -5);
         hoverStyle[normalKey] = props[key];
+        if (normalKey === "transition") hoverStyle.WebkitTransition = hoverStyle.transition;
       } else {
         if (!cssProps[key.toLowerCase()]) continue;
         normalStyle[key] = props[key];
+        if (key === "transition") normalStyle.WebkitTransition = normalStyle.transition;
       }
     }
-    if (haveHover) normalStyle.transition = theme2?.styles.transition ?? "";
+    if (haveHover) {
+      normalStyle.transition = theme2?.styles.transition ?? "";
+      normalStyle.WebkitTransition = normalStyle.transition;
+    }
     return {
       normalStyle,
       hoverStyle
@@ -3830,7 +3853,7 @@ Chip2.colored = ChipComponent.colored;
 var Chip_default = Chip2;
 
 // src/components/InputField.tsx
-import { forwardRef as forwardRef11, memo as memo18, useCallback as useCallback9, useState as useState7, useEffect as useEffect8, useMemo as useMemo6, useRef as useRef5, useId } from "react";
+import { forwardRef as forwardRef11, memo as memo18, useCallback as useCallback9, useState as useState7, useEffect as useEffect8, useMemo as useMemo6, useRef as useRef5, useId as useId2 } from "react";
 import styled10 from "styled-components";
 
 // src/constants/countries.ts
@@ -4289,13 +4312,15 @@ var countries = [
     name: "Finland",
     code: "FI",
     timeZone: "Europe/Helsinki",
-    phoneNumberExtension: "358"
+    phoneNumberExtension: "358",
+    phoneNumberFormat: "XX XXX XX XX"
   },
   {
     name: "France",
     code: "FR",
     timeZone: "Europe/Paris",
-    phoneNumberExtension: "33"
+    phoneNumberExtension: "33",
+    phoneNumberFormat: "X XX XX XX XX"
   },
   {
     name: "French Guiana",
@@ -4338,7 +4363,7 @@ var countries = [
     code: "DE",
     timeZone: "Europe/Berlin",
     phoneNumberExtension: "49",
-    phoneNumberFormat: "XXXX XXXXXX"
+    phoneNumberFormat: "XXXX XXXXXXX"
   },
   {
     name: "Ghana",
@@ -5375,6 +5400,16 @@ var formatPhoneNumber = (phoneNumber) => {
 var getFormErrorObject = (formValues) => {
   return {};
 };
+var eventPreventDefault = (event) => {
+  event.preventDefault();
+};
+var eventStopPropagation = (event) => {
+  event.stopPropagation();
+};
+var eventPreventStop = (event) => {
+  event.preventDefault();
+  event.stopPropagation();
+};
 
 // src/components/Label.tsx
 import { memo as memo15 } from "react";
@@ -5745,7 +5780,7 @@ Dropdown2.countries = DropdownComponent.countries;
 var Dropdown_default = Dropdown2;
 
 // src/components/Calendar.tsx
-import { useCallback as useCallback8, useMemo as useMemo5, useState as useState6, memo as memo17, useEffect as useEffect7 } from "react";
+import { useCallback as useCallback8, useMemo as useMemo5, useState as useState6, memo as memo17, useEffect as useEffect7, useId } from "react";
 import styled9 from "styled-components";
 import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
 var getMonthName = (month, short = false) => {
@@ -5777,8 +5812,18 @@ var getWeekDayName = (day, short = false) => {
 };
 var weekDaysIndex = [1, 2, 3, 4, 5, 6, 0];
 var yearsRange = Array.from({ length: 100 + 1 + 50 }, (_, index) => index + (/* @__PURE__ */ new Date()).getFullYear() - 100);
+var SelectWrapperComponent = styled9.div.withConfig({
+  shouldForwardProp: (prop) => !["theme"].includes(prop)
+})`
+   &:has(select:focus) {
+      outline: auto;
+      outline-color: -webkit-focus-ring-color;
+      outline-style: auto;
+      outline-offset: 2px;
+   }
+`;
 var SelectComponent = styled9.select.withConfig({
-  shouldForwardProp: (prop) => !["normalStyle", "hoverStyle"].includes(prop)
+  shouldForwardProp: (prop) => !["theme"].includes(prop)
 })`
    position: absolute;
    top: 50%;
@@ -5788,6 +5833,7 @@ var SelectComponent = styled9.select.withConfig({
 `;
 function Calendar({ value, minDate, maxDate, onChange }) {
   const theme2 = useTheme();
+  const internalYearSelectId = useId();
   const [currentDate, setCurrentDate] = useState6(value ? new Date(value) : void 0);
   const [currentMonth, setCurrentMonth] = useState6(currentDate?.getMonth() ?? (/* @__PURE__ */ new Date()).getMonth());
   const [currentYear, setCurrentYear] = useState6(currentDate?.getFullYear() ?? (/* @__PURE__ */ new Date()).getFullYear());
@@ -5855,11 +5901,20 @@ function Calendar({ value, minDate, maxDate, onChange }) {
       /* @__PURE__ */ jsx16(Button_default.icon, { icon: "chevronLeft", onClick: onClickPreviousMonthButton }),
       /* @__PURE__ */ jsxs11(Div_default.row, { alignItems: "center", gap: 4, children: [
         /* @__PURE__ */ jsx16(Text_default, { fontWeight: 700, children: getMonthName(currentMonth) }),
-        /* @__PURE__ */ jsxs11(Div_default.row, { position: "relative", alignItems: "center", gap: 2, children: [
+        /* @__PURE__ */ jsx16(SelectWrapperComponent, { children: /* @__PURE__ */ jsxs11(Div_default.row, { position: "relative", alignItems: "center", gap: 2, children: [
           /* @__PURE__ */ jsx16(Text_default, { fontWeight: 700, children: currentYear }),
           /* @__PURE__ */ jsx16(Icon_default, { name: "chevronDown", size: 12 }),
-          /* @__PURE__ */ jsx16(SelectComponent, { theme: theme2, value: currentYear, onChange: onChangeYearSelect, children: yearsRange.map((year) => /* @__PURE__ */ jsx16("option", { value: year, children: year }, year)) })
-        ] })
+          /* @__PURE__ */ jsx16(
+            SelectComponent,
+            {
+              theme: theme2,
+              value: currentYear,
+              onChange: onChangeYearSelect,
+              id: internalYearSelectId,
+              children: yearsRange.map((year) => /* @__PURE__ */ jsx16("option", { value: year, children: year }, year))
+            }
+          )
+        ] }) })
       ] }),
       /* @__PURE__ */ jsx16(Button_default.icon, { icon: "chevronRight", onClick: onClickNextMonthButton })
     ] }),
@@ -5983,6 +6038,10 @@ var InputElement = styled10.input.withConfig({
       cursor: not-allowed;
    }
 
+   &:read-only {
+      caret-color: transparent;
+   }
+
    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
       -webkit-appearance: none;
@@ -6120,7 +6179,7 @@ var InputFieldComponent = forwardRef11(function InputField({
   ...props
 }, ref) {
   const theme2 = useTheme();
-  const internalId = useId();
+  const internalId = useId2();
   const { colorTheme } = useBetterHtmlContextInternal();
   const [_, debouncedValue, setDebouncedValue] = useDebounceState(
     props.value?.toString() ?? "",
@@ -6269,7 +6328,7 @@ InputFieldComponent.multiline = forwardRef11(function Multiline({
   ...props
 }, ref) {
   const theme2 = useTheme();
-  const internalId = useId();
+  const internalId = useId2();
   const styledComponentStyles = useStyledComponentStyles(props, theme2);
   const dataProps = useComponentPropsWithPrefix(props, "data");
   const ariaProps = useComponentPropsWithPrefix(props, "aria");
@@ -6424,7 +6483,7 @@ InputFieldComponent.search = forwardRef11(function Search({ value, onChangeValue
 });
 InputFieldComponent.phoneNumber = forwardRef11(function PhoneNumber({ label, value, onChangeValue, labelColor, id, ...props }, ref) {
   const theme2 = useTheme();
-  const internalId = useId();
+  const internalId = useId2();
   const [dropdownValue, setDropdownValue] = useState7();
   const [inputFieldValue, setInputFieldValue] = useState7(value?.toString() ?? "");
   const renderOption = useCallback9(
@@ -6639,6 +6698,7 @@ InputFieldComponent.dateTime = forwardRef11(function DateTime({ minDate, maxDate
                         width: buttonWidth,
                         height: `calc(100% - ${16 + theme2.styles.gap / 2}px)`,
                         overflowY: "auto",
+                        tabIndex: -1,
                         children: hours.map((hour) => {
                           const isSelected = hour.toString() === valueHour;
                           return /* @__PURE__ */ jsx17(
@@ -6672,6 +6732,7 @@ InputFieldComponent.dateTime = forwardRef11(function DateTime({ minDate, maxDate
                         width: buttonWidth,
                         height: `calc(100% - ${16 + theme2.styles.gap / 2}px)`,
                         overflowY: "auto",
+                        tabIndex: -1,
                         children: minutes.map((minute) => {
                           const isSelected = minute.toString() === valueMinute;
                           return /* @__PURE__ */ jsx17(
@@ -6760,46 +6821,66 @@ InputFieldComponent.time = forwardRef11(function Time({ ...props }, ref) {
           userSelect: "none",
           ...insideInputFieldComponentProps,
           children: /* @__PURE__ */ jsxs12(Div_default.row, { height: "100%", children: [
-            /* @__PURE__ */ jsx17(Div_default, { className: "react-better-html-no-scrollbar", width: buttonWidth, height: "100%", overflowY: "auto", children: hours.map((hour) => {
-              const isSelected = hour.toString() === valueHour;
-              return /* @__PURE__ */ jsx17(
-                Div_default.row,
-                {
-                  alignItems: "center",
-                  justifyContent: "center",
-                  color: isSelected ? theme2.colors.base : theme2.colors.textPrimary,
-                  backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
-                  filterHover: "brightness(0.9)",
-                  cursor: "pointer",
-                  padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
-                  value: hour,
-                  onClickWithValue: onClickHour,
-                  ref: isSelected ? selectedHourRef : void 0,
-                  children: /* @__PURE__ */ jsx17(Text_default, { textAlign: "center", children: hour.toString().padStart(2, "0") })
-                },
-                hour
-              );
-            }) }),
-            /* @__PURE__ */ jsx17(Div_default, { className: "react-better-html-no-scrollbar", width: buttonWidth, height: "100%", overflowY: "auto", children: minutes.map((minute) => {
-              const isSelected = minute.toString() === valueMinute;
-              return /* @__PURE__ */ jsx17(
-                Div_default.row,
-                {
-                  alignItems: "center",
-                  justifyContent: "center",
-                  color: isSelected ? theme2.colors.base : theme2.colors.textPrimary,
-                  backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
-                  filterHover: "brightness(0.9)",
-                  cursor: "pointer",
-                  padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
-                  value: minute,
-                  onClickWithValue: onClickMinute,
-                  ref: isSelected ? selectedMinuteRef : void 0,
-                  children: /* @__PURE__ */ jsx17(Text_default, { textAlign: "center", children: minute.toString().padStart(2, "0") })
-                },
-                minute
-              );
-            }) })
+            /* @__PURE__ */ jsx17(
+              Div_default,
+              {
+                className: "react-better-html-no-scrollbar",
+                width: buttonWidth,
+                height: "100%",
+                overflowY: "auto",
+                tabIndex: -1,
+                children: hours.map((hour) => {
+                  const isSelected = hour.toString() === valueHour;
+                  return /* @__PURE__ */ jsx17(
+                    Div_default.row,
+                    {
+                      alignItems: "center",
+                      justifyContent: "center",
+                      color: isSelected ? theme2.colors.base : theme2.colors.textPrimary,
+                      backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
+                      filterHover: "brightness(0.9)",
+                      cursor: "pointer",
+                      padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
+                      value: hour,
+                      onClickWithValue: onClickHour,
+                      ref: isSelected ? selectedHourRef : void 0,
+                      children: /* @__PURE__ */ jsx17(Text_default, { textAlign: "center", children: hour.toString().padStart(2, "0") })
+                    },
+                    hour
+                  );
+                })
+              }
+            ),
+            /* @__PURE__ */ jsx17(
+              Div_default,
+              {
+                className: "react-better-html-no-scrollbar",
+                width: buttonWidth,
+                height: "100%",
+                overflowY: "auto",
+                tabIndex: -1,
+                children: minutes.map((minute) => {
+                  const isSelected = minute.toString() === valueMinute;
+                  return /* @__PURE__ */ jsx17(
+                    Div_default.row,
+                    {
+                      alignItems: "center",
+                      justifyContent: "center",
+                      color: isSelected ? theme2.colors.base : theme2.colors.textPrimary,
+                      backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
+                      filterHover: "brightness(0.9)",
+                      cursor: "pointer",
+                      padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
+                      value: minute,
+                      onClickWithValue: onClickMinute,
+                      ref: isSelected ? selectedMinuteRef : void 0,
+                      children: /* @__PURE__ */ jsx17(Text_default, { textAlign: "center", children: minute.toString().padStart(2, "0") })
+                    },
+                    minute
+                  );
+                })
+              }
+            )
           ] })
         }
       ) : void 0,
@@ -6862,7 +6943,7 @@ InputField2.color = InputFieldComponent.color;
 var InputField_default = InputField2;
 
 // src/components/ToggleInput.tsx
-import { forwardRef as forwardRef12, useCallback as useCallback10, useId as useId2, useState as useState8 } from "react";
+import { forwardRef as forwardRef12, useCallback as useCallback10, useId as useId3, useState as useState8 } from "react";
 import styled11 from "styled-components";
 import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
 var componentSize = 26;
@@ -6973,7 +7054,7 @@ var ToggleInputComponent = forwardRef12(function ToggleInput({
   ...props
 }, ref) {
   const theme2 = useTheme();
-  const internalId = useId2();
+  const internalId = useId3();
   const styledComponentStyles = useStyledComponentStyles(props, theme2, true);
   const styledComponentStylesWithExcluded = useComponentPropsWithExcludedStyle(props);
   const dataProps = useComponentPropsWithPrefix(props, "data");
@@ -7090,7 +7171,7 @@ var ToggleInput_default = {
     ...props
   }, ref) {
     const theme2 = useTheme();
-    const internalId = useId2();
+    const internalId = useId3();
     const styledComponentStyles = useStyledComponentStyles(props, theme2, true);
     const styledComponentStylesWithExcluded = useComponentPropsWithExcludedStyle(props);
     const dataProps = useComponentPropsWithPrefix(props, "data");
@@ -8992,6 +9073,9 @@ export {
   darkenColor,
   defaultAlertsPluginOptions,
   desaturateColor,
+  eventPreventDefault,
+  eventPreventStop,
+  eventStopPropagation,
   formatPhoneNumber,
   generateRandomString,
   getBrowser,