react-better-html 1.1.91 → 1.1.93

package/dist/index.d.mts

@@ -381,6 +381,7 @@ type InputFieldComponentType = {
         maxDate?: Date;
     }>) => React.ReactElement;
     time: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
+    color: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
 };
 declare const InputFieldComponent: InputFieldComponentType;
 declare const InputField: typeof InputFieldComponent & {
@@ -392,6 +393,15 @@ declare const InputField: typeof InputFieldComponent & {
     date: typeof InputFieldComponent.date;
     dateTime: typeof InputFieldComponent.dateTime;
     time: typeof InputFieldComponent.time;
+    color: typeof InputFieldComponent.color;
+};
+
+type Country = {
+    code: string;
+    name: string;
+    timeZone: string;
+    phoneNumberExtension: string;
+    phoneNumberFormat?: string;
 };
 
 type DropdownOption<Value, Data = unknown> = {
@@ -435,9 +445,12 @@ type DropdownProps<Value, Data = unknown> = {
 } & OmitProps<DivProps, "onChange" | "defaultChecked">;
 type DropdownComponentType = {
     <Value, Data>(props: ComponentPropWithRef<HTMLDivElement, DropdownProps<Value, Data>>): React.ReactElement;
+    countries: (props: ComponentPropWithRef<HTMLDivElement, OmitProps<DropdownProps<string, Country>, "options">>) => React.ReactElement;
 };
 declare const DropdownComponent: DropdownComponentType;
-declare const Dropdown: typeof DropdownComponent & {};
+declare const Dropdown: typeof DropdownComponent & {
+    countries: typeof DropdownComponent.countries;
+};
 
 type ToggleInputRef = {};
 type InternalToggleInputProps<Value> = {

package/dist/index.d.ts

@@ -381,6 +381,7 @@ type InputFieldComponentType = {
         maxDate?: Date;
     }>) => React.ReactElement;
     time: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
+    color: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
 };
 declare const InputFieldComponent: InputFieldComponentType;
 declare const InputField: typeof InputFieldComponent & {
@@ -392,6 +393,15 @@ declare const InputField: typeof InputFieldComponent & {
     date: typeof InputFieldComponent.date;
     dateTime: typeof InputFieldComponent.dateTime;
     time: typeof InputFieldComponent.time;
+    color: typeof InputFieldComponent.color;
+};
+
+type Country = {
+    code: string;
+    name: string;
+    timeZone: string;
+    phoneNumberExtension: string;
+    phoneNumberFormat?: string;
 };
 
 type DropdownOption<Value, Data = unknown> = {
@@ -435,9 +445,12 @@ type DropdownProps<Value, Data = unknown> = {
 } & OmitProps<DivProps, "onChange" | "defaultChecked">;
 type DropdownComponentType = {
     <Value, Data>(props: ComponentPropWithRef<HTMLDivElement, DropdownProps<Value, Data>>): React.ReactElement;
+    countries: (props: ComponentPropWithRef<HTMLDivElement, OmitProps<DropdownProps<string, Country>, "options">>) => React.ReactElement;
 };
 declare const DropdownComponent: DropdownComponentType;
-declare const Dropdown: typeof DropdownComponent & {};
+declare const Dropdown: typeof DropdownComponent & {
+    countries: typeof DropdownComponent.countries;
+};
 
 type ToggleInputRef = {};
 type InternalToggleInputProps<Value> = {

package/dist/index.js

@@ -1882,7 +1882,7 @@ function useComponentInputFieldDateProps(props, holderRef, disabled) {
   }, [isOpen]);
   (0, import_react2.useEffect)(() => {
     const handleClickOutside = (event) => {
-      if (holderRef.current && !holderRef.current.contains(event.target)) {
+      if (holderRef && holderRef.current && !holderRef.current.contains(event.target)) {
         setIsOpen.setFalse();
       }
     };
@@ -2556,7 +2556,7 @@ Image.profileImage = (0, import_react8.forwardRef)(function ProfileImage({ size
       justifyContent: "center",
       ref,
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text_default, { fontWeight: 700, children: letters.toUpperCase().slice(0, 2) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text_default, { fontSize: size / 2.5, fontWeight: 700, children: letters.toUpperCase().slice(0, 2) })
     }
   ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Image, { width: size, height: size, borderRadius: 999, objectFit: "cover", ref, ...props });
 });
@@ -4925,6 +4925,7 @@ function Label({ text, required, isError, color, htmlFor }) {
     Text_default,
     {
       as: "label",
+      width: "fit-content",
       height: 16,
       fontSize: 14,
       color: isError ? theme2.colors.error : color ?? theme2.colors.textSecondary,
@@ -5227,7 +5228,39 @@ var DropdownComponent = (0, import_react16.forwardRef)(function Dropdown({
     )
   ] }) });
 });
+DropdownComponent.countries = (0, import_react16.forwardRef)(function Countries({ ...props }, ref) {
+  const theme2 = useTheme();
+  const renderOption = (0, import_react16.useCallback)(
+    (option, index, isSelected) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Image_default, { src: `https://flagcdn.com/w80/${option.data?.code.toString().toLowerCase()}.webp`, width: 20 }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Text_default, { children: option.label })
+    ] }),
+    []
+  );
+  const options = (0, import_react16.useMemo)(
+    () => countries.map(
+      (country) => ({
+        value: country.code,
+        label: country.name,
+        data: country,
+        searchValues: [country.code]
+      })
+    ),
+    []
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    DropdownComponent,
+    {
+      placeholder: "Select a country",
+      options,
+      renderOption,
+      ref,
+      ...props
+    }
+  );
+});
 var Dropdown2 = (0, import_react16.memo)(DropdownComponent);
+Dropdown2.countries = DropdownComponent.countries;
 var Dropdown_default = Dropdown2;
 
 // src/components/Calendar.tsx
@@ -5412,6 +5445,9 @@ var Calendar_default = (0, import_react17.memo)(Calendar);
 // src/components/InputField.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var buttonWidth = 50;
+var colorPickerSpacing = 4;
+var colorPickerColorWidth = 12 + 27 + colorPickerSpacing;
+var colorPickerValueWidth = 12 + 74 + colorPickerSpacing;
 var InputElement = import_styled_components9.default.input.withConfig({
   shouldForwardProp: (prop) => !["theme", "withLeftIcon", "withRightIcon", "normalStyle", "hoverStyle"].includes(prop)
 })`
@@ -5460,6 +5496,17 @@ var InputElement = import_styled_components9.default.input.withConfig({
       }
    }
 
+   &[type="color"] {
+      --color-spacing: ${(props) => (props.theme.styles.space + props.theme.styles.gap) / 2}px;
+
+      width: calc(var(--color-spacing) + 27px + ${colorPickerValueWidth}px);
+      height: 48px;
+      padding: 0px;
+      padding-block: calc(var(--color-spacing) - 3px);
+      padding-left: var(--color-spacing);
+      padding-right: ${colorPickerValueWidth}px;
+   }
+
    &.react-better-html-phone-number-holder {
       border-right: none;
       border-top-right-radius: 0px;
@@ -6172,6 +6219,41 @@ InputFieldComponent.time = (0, import_react18.forwardRef)(function Time({ ...pro
     }
   );
 });
+InputFieldComponent.color = (0, import_react18.forwardRef)(function Color2({ value, onChangeValue, ...props }, ref) {
+  const [inputFieldValue, setInputFieldValue] = (0, import_react18.useState)(value ?? "#000000");
+  const onChangeValueElement = (0, import_react18.useCallback)(
+    (value2) => {
+      setInputFieldValue(value2);
+      onChangeValue?.(value2);
+    },
+    [onChangeValue]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    InputFieldComponent,
+    {
+      type: "color",
+      insideInputFieldComponent: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        Div_default.row,
+        {
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+          top: 0,
+          left: colorPickerSpacing,
+          alignItems: "center",
+          pointerEvents: "none",
+          userSelect: "none",
+          paddingLeft: colorPickerColorWidth,
+          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text_default, { children: inputFieldValue })
+        }
+      ),
+      value: inputFieldValue,
+      onChangeValue: onChangeValueElement,
+      ref,
+      ...props
+    }
+  );
+});
 var InputField2 = (0, import_react18.memo)(InputFieldComponent);
 InputField2.multiline = InputFieldComponent.multiline;
 InputField2.email = InputFieldComponent.email;
@@ -6181,6 +6263,7 @@ InputField2.phoneNumber = InputFieldComponent.phoneNumber;
 InputField2.date = InputFieldComponent.date;
 InputField2.dateTime = InputFieldComponent.dateTime;
 InputField2.time = InputFieldComponent.time;
+InputField2.color = InputFieldComponent.color;
 var InputField_default = InputField2;
 
 // src/components/ToggleInput.tsx