react-better-html 1.1.93 → 1.1.95

package/dist/index.mjs

@@ -4866,7 +4866,7 @@ var Label_default = memo13(Label);
 
 // src/components/Dropdown.tsx
 import { forwardRef as forwardRef7, memo as memo14, useCallback as useCallback6, useEffect as useEffect5, useMemo as useMemo3, useRef as useRef3, useState as useState4 } from "react";
-import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 var DropdownComponent = forwardRef7(function Dropdown({
   label,
   labelColor,
@@ -4887,6 +4887,7 @@ var DropdownComponent = forwardRef7(function Dropdown({
   debounceIsLoading,
   debounceMinimumSymbolsRequired,
   withoutClearButton,
+  withoutRenderingOptionsWhenClosed,
   onChange,
   onChangeSearch,
   renderOption,
@@ -4895,6 +4896,7 @@ var DropdownComponent = forwardRef7(function Dropdown({
 }, ref) {
   const theme2 = useTheme();
   const inputFieldHolderRef = useRef3(null);
+  const buttonsRef = useRef3(null);
   const inputRef = useRef3(null);
   const [isOpen, setIsOpen] = useBooleanState();
   const [isOpenLate, setIsOpenLate] = useBooleanState();
@@ -4989,6 +4991,33 @@ var DropdownComponent = forwardRef7(function Dropdown({
     [withDebounce, onChangeSearch]
   );
   const selectedOption = useMemo3(() => options.find((option) => option.value === value), [options, value]);
+  const renderedOptions = useMemo3(
+    () => filteredOptions.map((option, index) => {
+      const isSelected = option.value === value;
+      const isDisabled = option.disabled;
+      const isFocused2 = index === focusedOptionIndex;
+      return /* @__PURE__ */ jsx13(
+        Div_default,
+        {
+          color: isDisabled ? theme2.colors.textSecondary + "80" : isSelected ? theme2.colors.base : theme2.colors.textPrimary,
+          backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
+          filter: isFocused2 ? isDisabled ? "brightness(0.95)" : "brightness(0.9)" : void 0,
+          filterHover: focusedOptionIndex === void 0 && !isDisabled ? "brightness(0.9)" : void 0,
+          cursor: isDisabled ? "not-allowed" : "pointer",
+          padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
+          value: option,
+          onClickWithValue: onClickOption,
+          onMouseMove: () => setFocusedOptionIndex(void 0),
+          role: "option",
+          "aria-selected": isSelected,
+          "aria-disabled": isDisabled,
+          children: renderOption ? renderOption(option, index, isSelected) : /* @__PURE__ */ jsx13(Text_default, { children: option.label })
+        },
+        JSON.stringify(option)
+      );
+    }),
+    [filteredOptions, value, focusedOptionIndex, theme2.colors, onClickOption, renderOption]
+  );
   useEffect5(() => {
     if (isOpen) {
       setIsOpenLate.setTrue();
@@ -5005,7 +5034,7 @@ var DropdownComponent = forwardRef7(function Dropdown({
   }, [filteredOptions]);
   useEffect5(() => {
     const handleClickOutside = (event) => {
-      if (inputFieldHolderRef.current && !inputFieldHolderRef.current.contains(event.target)) {
+      if (inputFieldHolderRef.current && buttonsRef.current && !inputFieldHolderRef.current.contains(event.target) && !buttonsRef.current.contains(event.target)) {
         setIsOpen.setFalse();
         setSearchQuery("");
         setFocusedOptionIndex(void 0);
@@ -5025,7 +5054,7 @@ var DropdownComponent = forwardRef7(function Dropdown({
   const displayValue = withSearch && isFocused ? searchQuery : selectedOption?.label ?? "";
   const withClearButton = isOpen && selectedOption;
   const readyPlaceholder = placeholder ? placeholder : `Select an ${label?.toLowerCase() ?? "option"}`;
-  return /* @__PURE__ */ jsx13(Div_default.column, { width: "100%", position: "relative", userSelect: "none", ...props, children: /* @__PURE__ */ jsxs8(Div_default.row, { position: "relative", width: "100%", ref: inputFieldHolderRef, children: [
+  return /* @__PURE__ */ jsx13(Div_default.column, { width: "100%", position: "relative", userSelect: "none", ...props, children: /* @__PURE__ */ jsxs8(Div_default.row, { position: "relative", width: "100%", children: [
     /* @__PURE__ */ jsx13(
       InputField_default,
       {
@@ -5070,30 +5099,7 @@ var DropdownComponent = forwardRef7(function Dropdown({
             transition: theme2.styles.transition,
             role: "listbox",
             "aria-label": label,
-            children: isLoadingDebouncedSearchQuery || debounceIsLoading ? /* @__PURE__ */ jsx13(Div_default, { padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`, children: /* @__PURE__ */ jsx13(Loader_default.text, {}) }) : filteredOptions.length ? filteredOptions.map((option, index) => {
-              const isSelected = option.value === value;
-              const isDisabled = option.disabled;
-              const isFocused2 = index === focusedOptionIndex;
-              return /* @__PURE__ */ jsx13(
-                Div_default,
-                {
-                  color: isDisabled ? theme2.colors.textSecondary + "80" : isSelected ? theme2.colors.base : theme2.colors.textPrimary,
-                  backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
-                  filter: isFocused2 ? isDisabled ? "brightness(0.95)" : "brightness(0.9)" : void 0,
-                  filterHover: focusedOptionIndex === void 0 && !isDisabled ? "brightness(0.9)" : void 0,
-                  cursor: isDisabled ? "not-allowed" : "pointer",
-                  padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
-                  value: option,
-                  onClickWithValue: onClickOption,
-                  onMouseMove: () => setFocusedOptionIndex(void 0),
-                  role: "option",
-                  "aria-selected": isSelected,
-                  "aria-disabled": isDisabled,
-                  children: renderOption ? renderOption(option, index, isSelected) : /* @__PURE__ */ jsx13(Text_default, { children: option.label })
-                },
-                JSON.stringify(option)
-              );
-            }) : /* @__PURE__ */ jsx13(Div_default, { padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`, children: /* @__PURE__ */ jsx13(Text_default.unknown, { textAlign: "left", children: debounceMinimumSymbolsRequired !== void 0 && searchQuery.length < debounceMinimumSymbolsRequired ? `Enter at least ${debounceMinimumSymbolsRequired} characters` : "No options" }) })
+            children: isLoadingDebouncedSearchQuery || debounceIsLoading ? /* @__PURE__ */ jsx13(Div_default, { padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`, children: /* @__PURE__ */ jsx13(Loader_default.text, {}) }) : filteredOptions.length ? /* @__PURE__ */ jsx13(Fragment3, { children: (withoutRenderingOptionsWhenClosed ? isOpen || isOpenLate : true) ? renderedOptions : void 0 }) : /* @__PURE__ */ jsx13(Div_default, { padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`, children: /* @__PURE__ */ jsx13(Text_default.unknown, { textAlign: "left", children: debounceMinimumSymbolsRequired !== void 0 && searchQuery.length < debounceMinimumSymbolsRequired ? `Enter at least ${debounceMinimumSymbolsRequired} characters` : "No options" }) })
           }
         ),
         role: "combobox",
@@ -5101,6 +5107,7 @@ var DropdownComponent = forwardRef7(function Dropdown({
         "aria-controls": "dropdown-list",
         "aria-haspopup": "listbox",
         "aria-label": label,
+        holderRef: inputFieldHolderRef,
         ref: inputRef
       }
     ),
@@ -5117,6 +5124,7 @@ var DropdownComponent = forwardRef7(function Dropdown({
         filter: disabled ? "brightness(0.9)" : void 0,
         opacity: disabled ? 0.6 : void 0,
         zIndex: isOpen || isOpenLate ? 1001 : void 0,
+        ref: buttonsRef,
         children: [
           !withoutClearButton && /* @__PURE__ */ jsx13(
             Button_default.icon,
@@ -5175,6 +5183,7 @@ DropdownComponent.countries = forwardRef7(function Countries({ ...props }, ref)
       placeholder: "Select a country",
       options,
       renderOption,
+      withoutRenderingOptionsWhenClosed: true,
       ref,
       ...props
     }
@@ -6473,7 +6482,7 @@ var ToggleInput_default = {
 };
 
 // src/components/Form.tsx
-import { memo as memo17, useMemo as useMemo6 } from "react";
+import { Children, Fragment as Fragment4, memo as memo17, useMemo as useMemo6 } from "react";
 import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
 function Form({
   form,
@@ -6485,6 +6494,7 @@ function Form({
   gap,
   isSubmitting,
   isDestructive,
+  withDividers,
   onClickCancel,
   onSubmit,
   children,
@@ -6500,7 +6510,10 @@ function Form({
   const SubmitButtonTag = isDestructive ? Button_default.destructive : Button_default;
   const submitButtonIsDisabledFinal = submitButtonIsDisabled || submitButtonIsDisabledInternal;
   return /* @__PURE__ */ jsx17(Div_default, { width: "100%", ...props, children: /* @__PURE__ */ jsxs12("form", { onSubmit: onSubmit ?? form?.onSubmit, children: [
-    gap !== void 0 ? /* @__PURE__ */ jsx17(Div_default.column, { gap, children }) : children,
+    gap !== void 0 || withDividers ? /* @__PURE__ */ jsx17(Div_default.column, { gap: gap ?? (withDividers ? theme2.styles.space : theme2.styles.gap), children: withDividers ? Children.toArray(children).map((child, index) => /* @__PURE__ */ jsxs12(Fragment4, { children: [
+      child,
+      index < Children.toArray(children).length - 1 && /* @__PURE__ */ jsx17(Divider_default.horizontal, {})
+    ] }, index)) : children }) : children,
     submitButtonText && /* @__PURE__ */ jsxs12(
       Div_default.row,
       {
@@ -6647,7 +6660,7 @@ var ColorThemeSwitch_default = ColorThemeSwitch2;
 // src/components/Table.tsx
 import { forwardRef as forwardRef11, memo as memo20, useCallback as useCallback10, useMemo as useMemo7, useState as useState8 } from "react";
 import styled10, { css as css2 } from "styled-components";
-import { Fragment as Fragment3, jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
 var defaultImageWidth = 120;
 var TableStyledComponent = styled10.table.withConfig({
   shouldForwardProp: (prop) => !["isStriped", "withHover", "withStickyHeader", "colorTheme", "theme"].includes(prop)
@@ -6734,7 +6747,7 @@ var TableComponent = forwardRef11(function Table({
           return column.format ? column.format(item, index) : String(value ?? "");
         }
         case "element": {
-          return column.render?.(item, index) ?? /* @__PURE__ */ jsx20(Fragment3, {});
+          return column.render?.(item, index) ?? /* @__PURE__ */ jsx20(Fragment5, {});
         }
         case "image": {
           const { type, keyName, ...props2 } = column;
@@ -6759,7 +6772,7 @@ var TableComponent = forwardRef11(function Table({
           );
         }
         default: {
-          return /* @__PURE__ */ jsx20(Fragment3, {});
+          return /* @__PURE__ */ jsx20(Fragment5, {});
         }
       }
     },