react-better-html 1.1.246 → 1.1.248

package/dist/index.d.mts

@@ -497,21 +497,25 @@ type Alert = {
     onClose?: (alert: Alert) => void;
 };
 
+type Tab = {
+    id: string;
+    label?: string;
+};
 type TabGroup = {
     name: string;
     selectedTab: string;
 };
 type TabsProps = {
-    tabs: string[];
+    tabs: Tab[];
     name?: string;
     accentColor?: Color;
     style?: "default" | "borderRadiusTop" | "box";
-    onChange?: (tab: string) => void;
+    onChange?: (tab: Tab) => void;
     children?: React.ReactNode;
 } & ComponentMarginProps;
 type TabsRef = {
     selectedTab: string;
-    selectTab: (tab: string) => void;
+    selectTab: (tab: Tab) => void;
 };
 type TabsComponent = {
     (props: ComponentPropWithRef<TabsRef, TabsProps>): React.ReactElement;
@@ -1179,4 +1183,4 @@ type LocalStoragePluginOptions = {
 declare const defaultLocalStoragePluginOptions: Required<LocalStoragePluginOptions>;
 declare const localStoragePlugin: BetterHtmlPluginConstructor<LocalStoragePluginOptions>;
 
-export { type Alert, type AlertDisplay, type AlertDuration, type AlertType, type AlertsPluginOptions, type AppConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default$1 as BetterHtmlProvider, type BetterHtmlProviderConfig, type BrowserName, type BurgerButtonProps, Button, type ButtonProps, Chip, type ChipProps, ColorThemeSwitch, type ColorThemeSwitchProps, type ComponentHoverStyle, type ComponentMarginProps, type ComponentPaddingProps, Div, type DivProps, _default$4 as Divider, Dropdown, type DropdownOption, type DropdownProps, Foldable, type FoldableProps, type FoldableRef, Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default as Icon, type IconProps, _default$2 as Image, type ImageProps, InputField, type InputFieldProps, _default$3 as Label, type LabelProps, Loader, type LoaderProps, type LocalStoragePluginOptions, Modal, type ModalProps, type ModalRef, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, Pagination, type PluginName, type ReactRouterDomPluginOptions, SideMenu, type SideMenuItem, type SideMenuProps, type TabGroup, Table, type TableColumn, type TableFilterData, type TableListFilterListItem, type TableProps, type TableRef, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, _default$5 as ToggleInput, type ToggleInputProps, type ToggleInputRef, Tooltip, type TooltipProps, type TooltipRef, type VerticalDividerProps, alertControls, alertsPlugin, defaultAlertsPluginOptions, defaultLocalStoragePluginOptions, defaultReactRouterDomPluginOptions, filterHover, generateLocalStorage, getBrowser, getFormErrorObject, isMobileDevice, localStoragePlugin, reactRouterDomPlugin, sideMenuControls, useAlertControls, useBetterHtmlContext, useForm, useMediaQuery, usePageResize, usePageScroll, useUrlQuery };
+export { type Alert, type AlertDisplay, type AlertDuration, type AlertType, type AlertsPluginOptions, type AppConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default$1 as BetterHtmlProvider, type BetterHtmlProviderConfig, type BrowserName, type BurgerButtonProps, Button, type ButtonProps, Chip, type ChipProps, ColorThemeSwitch, type ColorThemeSwitchProps, type ComponentHoverStyle, type ComponentMarginProps, type ComponentPaddingProps, Div, type DivProps, _default$4 as Divider, Dropdown, type DropdownOption, type DropdownProps, Foldable, type FoldableProps, type FoldableRef, Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default as Icon, type IconProps, _default$2 as Image, type ImageProps, InputField, type InputFieldProps, _default$3 as Label, type LabelProps, Loader, type LoaderProps, type LocalStoragePluginOptions, Modal, type ModalProps, type ModalRef, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, Pagination, type PluginName, type ReactRouterDomPluginOptions, SideMenu, type SideMenuItem, type SideMenuProps, type Tab, type TabGroup, Table, type TableColumn, type TableFilterData, type TableListFilterListItem, type TableProps, type TableRef, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, _default$5 as ToggleInput, type ToggleInputProps, type ToggleInputRef, Tooltip, type TooltipProps, type TooltipRef, type VerticalDividerProps, alertControls, alertsPlugin, defaultAlertsPluginOptions, defaultLocalStoragePluginOptions, defaultReactRouterDomPluginOptions, filterHover, generateLocalStorage, getBrowser, getFormErrorObject, isMobileDevice, localStoragePlugin, reactRouterDomPlugin, sideMenuControls, useAlertControls, useBetterHtmlContext, useForm, useMediaQuery, usePageResize, usePageScroll, useUrlQuery };

package/dist/index.d.ts

@@ -497,21 +497,25 @@ type Alert = {
     onClose?: (alert: Alert) => void;
 };
 
+type Tab = {
+    id: string;
+    label?: string;
+};
 type TabGroup = {
     name: string;
     selectedTab: string;
 };
 type TabsProps = {
-    tabs: string[];
+    tabs: Tab[];
     name?: string;
     accentColor?: Color;
     style?: "default" | "borderRadiusTop" | "box";
-    onChange?: (tab: string) => void;
+    onChange?: (tab: Tab) => void;
     children?: React.ReactNode;
 } & ComponentMarginProps;
 type TabsRef = {
     selectedTab: string;
-    selectTab: (tab: string) => void;
+    selectTab: (tab: Tab) => void;
 };
 type TabsComponent = {
     (props: ComponentPropWithRef<TabsRef, TabsProps>): React.ReactElement;
@@ -1179,4 +1183,4 @@ type LocalStoragePluginOptions = {
 declare const defaultLocalStoragePluginOptions: Required<LocalStoragePluginOptions>;
 declare const localStoragePlugin: BetterHtmlPluginConstructor<LocalStoragePluginOptions>;
 
-export { type Alert, type AlertDisplay, type AlertDuration, type AlertType, type AlertsPluginOptions, type AppConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default$1 as BetterHtmlProvider, type BetterHtmlProviderConfig, type BrowserName, type BurgerButtonProps, Button, type ButtonProps, Chip, type ChipProps, ColorThemeSwitch, type ColorThemeSwitchProps, type ComponentHoverStyle, type ComponentMarginProps, type ComponentPaddingProps, Div, type DivProps, _default$4 as Divider, Dropdown, type DropdownOption, type DropdownProps, Foldable, type FoldableProps, type FoldableRef, Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default as Icon, type IconProps, _default$2 as Image, type ImageProps, InputField, type InputFieldProps, _default$3 as Label, type LabelProps, Loader, type LoaderProps, type LocalStoragePluginOptions, Modal, type ModalProps, type ModalRef, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, Pagination, type PluginName, type ReactRouterDomPluginOptions, SideMenu, type SideMenuItem, type SideMenuProps, type TabGroup, Table, type TableColumn, type TableFilterData, type TableListFilterListItem, type TableProps, type TableRef, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, _default$5 as ToggleInput, type ToggleInputProps, type ToggleInputRef, Tooltip, type TooltipProps, type TooltipRef, type VerticalDividerProps, alertControls, alertsPlugin, defaultAlertsPluginOptions, defaultLocalStoragePluginOptions, defaultReactRouterDomPluginOptions, filterHover, generateLocalStorage, getBrowser, getFormErrorObject, isMobileDevice, localStoragePlugin, reactRouterDomPlugin, sideMenuControls, useAlertControls, useBetterHtmlContext, useForm, useMediaQuery, usePageResize, usePageScroll, useUrlQuery };
+export { type Alert, type AlertDisplay, type AlertDuration, type AlertType, type AlertsPluginOptions, type AppConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default$1 as BetterHtmlProvider, type BetterHtmlProviderConfig, type BrowserName, type BurgerButtonProps, Button, type ButtonProps, Chip, type ChipProps, ColorThemeSwitch, type ColorThemeSwitchProps, type ComponentHoverStyle, type ComponentMarginProps, type ComponentPaddingProps, Div, type DivProps, _default$4 as Divider, Dropdown, type DropdownOption, type DropdownProps, Foldable, type FoldableProps, type FoldableRef, Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default as Icon, type IconProps, _default$2 as Image, type ImageProps, InputField, type InputFieldProps, _default$3 as Label, type LabelProps, Loader, type LoaderProps, type LocalStoragePluginOptions, Modal, type ModalProps, type ModalRef, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, Pagination, type PluginName, type ReactRouterDomPluginOptions, SideMenu, type SideMenuItem, type SideMenuProps, type Tab, type TabGroup, Table, type TableColumn, type TableFilterData, type TableListFilterListItem, type TableProps, type TableRef, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, _default$5 as ToggleInput, type ToggleInputProps, type ToggleInputRef, Tooltip, type TooltipProps, type TooltipRef, type VerticalDividerProps, alertControls, alertsPlugin, defaultAlertsPluginOptions, defaultLocalStoragePluginOptions, defaultReactRouterDomPluginOptions, filterHover, generateLocalStorage, getBrowser, getFormErrorObject, isMobileDevice, localStoragePlugin, reactRouterDomPlugin, sideMenuControls, useAlertControls, useBetterHtmlContext, useForm, useMediaQuery, usePageResize, usePageScroll, useUrlQuery };

package/dist/index.js

@@ -4472,11 +4472,13 @@ var TextareaElement = import_styled_components11.default.textarea.withConfig({
       color: ${(props) => props.theme.colors.textSecondary}80;
    }
 
-   ${(props) => props.withNoBorder ? import_styled_components11.css`
-              filter: ${props.hoverStyle.filter ?? filterHover().z1};
-           ` : import_styled_components11.css`
-              border-color: ${props.theme.colors.primary};
-           `}
+   &:focus {
+      ${(props) => props.withNoBorder ? import_styled_components11.css`
+                 filter: ${props.hoverStyle.filter ?? filterHover().z1};
+              ` : import_styled_components11.css`
+                 border-color: ${props.theme.colors.primary};
+              `}
+   }
 
    ${(props) => props.style}
 
@@ -7402,23 +7404,23 @@ var TabsComponent = (0, import_react29.forwardRef)(function Tabs({ tabs, name, a
   const firstRenderPassedRef = (0, import_react29.useRef)(false);
   const tabsRef = (0, import_react29.useRef)({});
   const [selectedTab, setSelectedTab] = (0, import_react29.useState)(() => {
-    const selectedTabValue = tabs[0] ?? "";
+    const selectedTabId = tabs[0]?.id ?? "";
     if (urlQuery) {
       const tabQueryValue = urlQuery.getQuery(name ?? defaultTabName);
-      if (!tabQueryValue) return selectedTabValue;
-      if (tabs.includes(tabQueryValue)) return tabQueryValue;
+      if (!tabQueryValue) return selectedTabId;
+      if (tabs.some((tab) => tab.id === tabQueryValue)) return tabQueryValue;
     }
-    return selectedTabValue;
+    return selectedTabId;
   });
   const [rerenderState, setRerenderState] = (0, import_react29.useState)(0);
   const tabsGap = style === "box" ? theme2.styles.gap / 2 : 0;
   const onClickTab = (0, import_react29.useCallback)(
     (tab) => {
-      setSelectedTab(tab);
+      setSelectedTab(tab.id);
       onChange?.(tab);
       if (urlQuery) {
         urlQuery.setQuery({
-          [name ?? defaultTabName]: tab
+          [name ?? defaultTabName]: tab.id
         });
       }
     },
@@ -7429,7 +7431,7 @@ var TabsComponent = (0, import_react29.forwardRef)(function Tabs({ tabs, name, a
     [rerenderState, selectedTab]
   );
   const leftSpacing = (0, import_react29.useMemo)(() => {
-    const selectedTabIndex = tabs.findIndex((tab) => tab === selectedTab);
+    const selectedTabIndex = tabs.findIndex((tab) => tab.id === selectedTab);
     let spacing = 0;
     Object.values(tabsRef.current).forEach((tab, index) => {
       if (index < selectedTabIndex) spacing += (tab?.getBoundingClientRect().width ?? 0) + tabsGap;
@@ -7488,7 +7490,7 @@ var TabsComponent = (0, import_react29.forwardRef)(function Tabs({ tabs, name, a
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Div_default.column, { width: "100%", gap: theme2.styles.space, ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Div_default, { position: "relative", className: "react-better-html-no-scrollbar", overflowY: "auto", children: [
       /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Div_default.row, { position: "relative", width: "fit-content", gap: tabsGap, userSelect: "none", children: tabs.map((tab) => {
-        const selected = tab === selectedTab;
+        const selected = tab.id === selectedTab;
         return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
           Div_default,
           {
@@ -7507,10 +7509,10 @@ var TabsComponent = (0, import_react29.forwardRef)(function Tabs({ tabs, name, a
             isTabAccessed: true,
             onClickWithValue: onClickTab,
             ref: (ref2) => {
-              tabsRef.current[tab] = ref2;
+              tabsRef.current[tab.id] = ref2;
             },
             children: [
-              componentsState.tabs.tabsWithDots.includes(tab) && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+              componentsState.tabs.tabsWithDots.includes(tab.id) && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                 Div_default,
                 {
                   position: "absolute",
@@ -7530,12 +7532,12 @@ var TabsComponent = (0, import_react29.forwardRef)(function Tabs({ tabs, name, a
                   color: !selected ? theme2.colors.textSecondary : style === "box" ? theme2.colors.base : void 0,
                   transition: theme2.styles.transition,
                   whiteSpace: "nowrap",
-                  children: tab
+                  children: tab.label ?? tab.id
                 }
               )
             ]
           },
-          tab
+          tab.id
         );
       }) }),
       style !== "box" && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(