react-better-html 1.1.224 → 1.1.226

package/dist/index.d.mts

@@ -460,6 +460,7 @@ type ButtonComponent = {
         icon: IconName | AnyOtherString;
         /** @default 16 */
         size?: number;
+        buttonSize?: number;
         /** @default "#000000" */
         backgroundButtonColor?: string;
     }) => React.ReactElement;
@@ -587,7 +588,9 @@ declare const PageHolder: typeof PageHolderComponent & {
 };
 
 type ChipProps<Value = unknown> = {
-    text: string;
+    text: string | React.ReactNode;
+    beforeText?: React.ReactNode;
+    afterText?: React.ReactNode;
     /** @default theme.colors.textPrimary */
     color?: string;
     /** @default backgroundSecondary */
@@ -599,7 +602,7 @@ type ChipProps<Value = unknown> = {
     value?: Value;
     onClick?: (event: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => void;
     onClickWithValue?: (value: Value) => void;
-} & Pick<DivProps, "border" | "borderColor" | "borderWidth" | "borderStyle"> & Pick<TextProps, "fontFamily" | "fontSize" | "fontWeight" | "fontStyle">;
+} & Pick<DivProps, "border" | "borderColor" | "borderWidth" | "borderStyle" | keyof ComponentPaddingProps | "transition" | "height"> & Pick<TextProps, "fontFamily" | "fontSize" | "fontWeight" | "fontStyle">;
 type ChipComponentType = {
     <Value>(props: ComponentPropWithRef<HTMLDivElement, ChipProps<Value>>): React.ReactElement;
     colored: <Value>(props: ComponentPropWithRef<HTMLDivElement, OmitProps<ChipProps<Value>, "color" | "backgroundColor"> & {

package/dist/index.d.ts

@@ -460,6 +460,7 @@ type ButtonComponent = {
         icon: IconName | AnyOtherString;
         /** @default 16 */
         size?: number;
+        buttonSize?: number;
         /** @default "#000000" */
         backgroundButtonColor?: string;
     }) => React.ReactElement;
@@ -587,7 +588,9 @@ declare const PageHolder: typeof PageHolderComponent & {
 };
 
 type ChipProps<Value = unknown> = {
-    text: string;
+    text: string | React.ReactNode;
+    beforeText?: React.ReactNode;
+    afterText?: React.ReactNode;
     /** @default theme.colors.textPrimary */
     color?: string;
     /** @default backgroundSecondary */
@@ -599,7 +602,7 @@ type ChipProps<Value = unknown> = {
     value?: Value;
     onClick?: (event: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => void;
     onClickWithValue?: (value: Value) => void;
-} & Pick<DivProps, "border" | "borderColor" | "borderWidth" | "borderStyle"> & Pick<TextProps, "fontFamily" | "fontSize" | "fontWeight" | "fontStyle">;
+} & Pick<DivProps, "border" | "borderColor" | "borderWidth" | "borderStyle" | keyof ComponentPaddingProps | "transition" | "height"> & Pick<TextProps, "fontFamily" | "fontSize" | "fontWeight" | "fontStyle">;
 type ChipComponentType = {
     <Value>(props: ComponentPropWithRef<HTMLDivElement, ChipProps<Value>>): React.ReactElement;
     colored: <Value>(props: ComponentPropWithRef<HTMLDivElement, OmitProps<ChipProps<Value>, "color" | "backgroundColor"> & {

package/dist/index.js

@@ -2006,16 +2006,16 @@ var ButtonElement = import_styled_components6.default.button.withConfig({
               opacity: 0.6;
               cursor: not-allowed;
            ` : !props.isLoading ? import_styled_components6.css`
-              cursor: pointer;
+                cursor: pointer;
 
-              &:not(.secondary):hover {
-                 filter: ${props.colorTheme === "dark" ? "brightness(1.2)" : "brightness(0.9)"};
-              }
+                &:not(.secondary):hover {
+                   filter: ${props.colorTheme === "dark" ? "brightness(1.2)" : "brightness(0.9)"};
+                }
 
-              &.secondary:hover {
-                 border-color: ${props.theme.colors.primary};
-              }
-           ` : ""}
+                &.secondary:hover {
+                   border-color: ${props.theme.colors.primary};
+                }
+             ` : ""}
 
    &.secondary {
       padding-block: ${(props) => props.isSmall ? props.theme.styles.gap : (props.theme.styles.space + props.theme.styles.gap) / 2}px;
@@ -2074,14 +2074,22 @@ var ButtonComponent = function Button({
     },
     [onClick, onClickWithValue, value]
   );
-  const iconComponent = icon ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Div_default.row, { height: 20, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    Icon_default,
+  const iconComponent = icon ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    Div_default.row,
     {
-      name: icon,
-      color: iconColor ?? props.color ?? theme2.colors.base,
-      size: iconSize ?? parseInt(style.fontSize?.toString() ?? "16")
+      height: iconSize ?? parseInt(style.fontSize?.toString() ?? "16"),
+      alignItems: "center",
+      justifyContent: "center",
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        Icon_default,
+        {
+          name: icon,
+          color: iconColor ?? props.color ?? theme2.colors.base,
+          size: iconSize ?? parseInt(style.fontSize?.toString() ?? "16")
+        }
+      )
     }
-  ) }) : void 0;
+  ) : void 0;
   const imageComponent = image ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     Image_default,
     {
@@ -2186,17 +2194,17 @@ ButtonComponent.destructive = function Destructive(props) {
     }
   );
 };
-ButtonComponent.icon = function Icon3({ size = 16, backgroundButtonColor, ...props }) {
+ButtonComponent.icon = function Icon3({ size = 16, buttonSize, backgroundButtonColor, ...props }) {
   const theme2 = (0, import_react_better_core9.useTheme)();
   const betterHtmlContext2 = useBetterHtmlContextInternal();
-  const buttonSize = size + theme2.styles.space;
+  const readyButtonSize = buttonSize ?? size + theme2.styles.space;
   const backgroundButtonColorReady = backgroundButtonColor ?? theme2.colors.textPrimary;
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     ButtonComponent,
     {
       ...betterHtmlContext2.components.button?.style?.icon,
-      width: buttonSize,
-      height: buttonSize,
+      width: readyButtonSize,
+      height: readyButtonSize,
       color: theme2.colors.textPrimary,
       backgroundColor: backgroundButtonColorReady + "00",
       backgroundImage: "none",
@@ -3404,6 +3412,8 @@ var import_jsx_runtime14 = require("react/jsx-runtime");
 var borderRadiusOffset = 1.3;
 var ChipComponent = (0, import_react16.forwardRef)(function Chip({
   text,
+  beforeText,
+  afterText,
   color,
   backgroundColor,
   borderRadius,
@@ -3434,7 +3444,11 @@ var ChipComponent = (0, import_react16.forwardRef)(function Chip({
       cursor: onClick || onClickWithValue ? "pointer" : void 0,
       ...props,
       ref,
-      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Text_default, { color: color ?? theme2.colors.textPrimary, children: text })
+      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Div_default.row, { height: "100%", alignItems: "center", gap: theme2.styles.gap, children: [
+        beforeText,
+        typeof text === "string" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Text_default, { color: color ?? theme2.colors.textPrimary, children: text }) : text,
+        afterText
+      ] })
     }
   );
 });
@@ -3734,7 +3748,7 @@ var DropdownComponent = (0, import_react18.forwardRef)(function Dropdown({
     if (!withDebounce) return;
     onChangeSearch?.(debouncedSearchQuery);
   }, [withDebounce, onChangeSearch, debouncedSearchQuery]);
-  const displayValue = (withSearch && isFocused && searchQuery.length > 0 ? searchQuery : !Array.isArray(selectedOption) ? selectedOption?.label : void 0) ?? "";
+  const displayValue = (withSearch && isFocused ? searchQuery : !Array.isArray(selectedOption) ? selectedOption?.label : void 0) ?? "";
   const withClearButton = isOpen && (Array.isArray(selectedOption) ? selectedOption.length > 0 : selectedOption);
   const readyPlaceholder = placeholder ?? `Select ${!withMultiselect ? "an " : ""}${label?.toLowerCase() ?? (0, import_react_better_core17.getPluralWord)("option", withMultiselect ? 2 : 1)}`;
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Div_default.column, { width: "100%", position: "relative", userSelect: "none", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
@@ -3755,7 +3769,7 @@ var DropdownComponent = (0, import_react18.forwardRef)(function Dropdown({
       leftIcon,
       autoComplete: "off",
       className: `react-better-html-dropdown${Array.isArray(selectedOption) && selectedOption.length > 0 ? " react-better-html-dropdown-multiselect" : ""}${isOpen ? " react-better-html-dropdown-open" : ""}${isOpenLate ? " react-better-html-dropdown-open-late" : ""}${inputFieldClassName ? ` ${inputFieldClassName}` : ""}`,
-      onClick: !disabled ? setIsOpen.toggle : void 0,
+      onClick: !disabled ? withMultiselect ? setIsOpen.setTrue : setIsOpen.toggle : void 0,
       onFocus: setIsFocused.setTrue,
       onBlur: setIsFocused.setFalse,
       onKeyDown: onKeyDownInputField,
@@ -3775,10 +3789,25 @@ var DropdownComponent = (0, import_react18.forwardRef)(function Dropdown({
           transition: theme2.styles.transition,
           children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Div_default.row, { width: "100%", flexWrap: "wrap", gap: theme2.styles.gap, children: selectedOption.map((option) => {
             const ChipComponentTag = !option.renderType || option.renderType === "default" || option.renderType === "chip" ? Chip_default : option.renderType === "chip.colored" ? Chip_default.colored : Chip_default;
+            const withXButton = isFocused || isOpen;
             return /* @__PURE__ */ (0, import_react19.createElement)(
               ChipComponentTag,
               {
                 text: option.label,
+                afterText: withXButton && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                  Button_default.icon,
+                  {
+                    icon: "XMark",
+                    color: theme2.colors.textSecondary,
+                    size: 14,
+                    buttonSize: 20,
+                    value: option,
+                    onClickWithValue: onClickOption
+                  }
+                ),
+                height: 20 + theme2.styles.gap,
+                paddingRight: withXButton ? theme2.styles.gap / 2 : void 0,
+                transition: "none",
                 ...option.renderType === "chip" || option.renderType === "chip.colored" ? option.chipProps : [],
                 withWhiteBackground: option.renderType === "chip.colored",
                 key: JSON.stringify(option)