react-better-html 1.1.83 → 1.1.85

package/dist/index.d.mts

@@ -15,6 +15,7 @@ type ComponentHoverStyle = {
     [CSSProperty in keyof ComponentStyle as `${CSSProperty & string}Hover`]: ComponentStyle[CSSProperty];
 };
 type ComponentMarginProps = Pick<ComponentStyle, "margin" | "marginTop" | "marginBottom" | "marginLeft" | "marginRight" | "marginBlock" | "marginInline">;
+type ComponentPaddingProps = Pick<ComponentStyle, "padding" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingBlock" | "paddingInline">;
 type ComponentPropWithRef<ComponentRef, ComponentProps> = ComponentProps & {
     ref?: React.Ref<ComponentRef>;
 };
@@ -46,9 +47,11 @@ type DivProps<Value> = {
 type DivComponentType = {
     <Value>(props: ComponentPropWithRef<HTMLDivElement, DivProps<Value>>): React.ReactElement;
     row: <Value>(props: ComponentPropWithRef<HTMLDivElement, OmitProps<DivProps<Value>, "display" | "flexDirection"> & {
+        reverse?: boolean;
         invertFlexDirection?: boolean;
     }>) => React.ReactElement;
     column: <Value>(props: ComponentPropWithRef<HTMLDivElement, OmitProps<DivProps<Value>, "display" | "flexDirection"> & {
+        reverse?: boolean;
         invertFlexDirection?: boolean;
     }>) => React.ReactElement;
     grid: <Value>(props: ComponentPropWithRef<HTMLDivElement, OmitProps<DivProps<Value>, "display">>) => React.ReactElement;
@@ -302,8 +305,8 @@ type PageHolderProps = {
     /** @default false */
     noMaxContentWidth?: boolean;
     children?: React.ReactNode;
-};
-declare function PageHolder({ noMaxContentWidth, children }: PageHolderProps): react_jsx_runtime.JSX.Element;
+} & ComponentPaddingProps;
+declare function PageHolder({ noMaxContentWidth, children, ...props }: PageHolderProps): react_jsx_runtime.JSX.Element;
 declare const _default$5: React$1.MemoExoticComponent<typeof PageHolder>;
 
 type PageHeaderProps = {
@@ -643,7 +646,7 @@ type TabsProps = {
 } & ComponentMarginProps;
 type TabsRef = {
     selectedTab: string;
-    setSelectedTab: (tab: string) => void;
+    selectTab: (tab: string) => void;
 };
 type TabsComponent = {
     (props: ComponentPropWithRef<TabsRef, TabsProps>): React.ReactElement;
@@ -751,4 +754,4 @@ declare const isMobileDevice: boolean;
 
 declare const reactRouterDomPlugin: BetterHtmlPlugin;
 
-export { type AppConfig, type AssetName, type AssetsConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default as BetterHtmlProvider, type BetterHtmlProviderValue, type BrowserName, Button, type ButtonProps, Chip, type ChipProps, type Color, type ColorName, type ColorTheme, ColorThemeSwitch, type ColorThemeSwitchProps, type Colors, type DeepPartialRecord, Div, type DivProps, _default$6 as Divider, Dropdown, type DropdownOption, type DropdownProps, type ExcludeOptions, Foldable, type FoldableProps, type FoldableRef, _default$2 as Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default$8 as Icon, type IconName, type IconProps, type IconsConfig, _default$7 as Image, type ImageProps, InputField, type InputFieldProps, _default$1 as Label, type LabelProps, Loader, type LoaderConfig, type LoaderName, type LoaderProps, Modal, type ModalProps, type ModalRef, type OmitProps, _default$4 as PageHeader, type PageHeaderProps, _default$5 as PageHolder, type PageHolderProps, type PartialRecord, type PickAllRequired, type PickValue, type PluginName, type Styles, type TabGroup, Table, type TableColumn, type TableProps, Tabs, type TabsProps, Text, type TextAs, type TextProps, type TextareaFieldProps, type Theme, type ThemeConfig, _default$3 as ToggleInput, type ToggleInputProps, type ToggleInputRef, type VerticalDividerProps, formatPhoneNumber, generateRandomString, getBrowser, getFormErrorObject, isMobileDevice, loaderControls, reactRouterDomPlugin, useBetterHtmlContext, useBooleanState, useDebounceState, useForm, useLoader, useLoaderControls, useMediaQuery, usePageResize, usePageScroll, useTheme, useUrlQuery };
+export { type AppConfig, type AssetName, type AssetsConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default as BetterHtmlProvider, type BetterHtmlProviderValue, type BrowserName, Button, type ButtonProps, Chip, type ChipProps, type Color, type ColorName, type ColorTheme, ColorThemeSwitch, type ColorThemeSwitchProps, type Colors, type DeepPartialRecord, Div, type DivProps, _default$6 as Divider, Dropdown, type DropdownOption, type DropdownProps, type ExcludeOptions, Foldable, type FoldableProps, type FoldableRef, _default$2 as Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default$8 as Icon, type IconName, type IconProps, type IconsConfig, _default$7 as Image, type ImageProps, InputField, type InputFieldProps, _default$1 as Label, type LabelProps, Loader, type LoaderConfig, type LoaderName, type LoaderProps, Modal, type ModalProps, type ModalRef, type OmitProps, _default$4 as PageHeader, type PageHeaderProps, _default$5 as PageHolder, type PageHolderProps, type PartialRecord, type PickAllRequired, type PickValue, type PluginName, type Styles, type TabGroup, Table, type TableColumn, type TableProps, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, type Theme, type ThemeConfig, _default$3 as ToggleInput, type ToggleInputProps, type ToggleInputRef, type VerticalDividerProps, formatPhoneNumber, generateRandomString, getBrowser, getFormErrorObject, isMobileDevice, loaderControls, reactRouterDomPlugin, useBetterHtmlContext, useBooleanState, useDebounceState, useForm, useLoader, useLoaderControls, useMediaQuery, usePageResize, usePageScroll, useTheme, useUrlQuery };

package/dist/index.d.ts

@@ -15,6 +15,7 @@ type ComponentHoverStyle = {
     [CSSProperty in keyof ComponentStyle as `${CSSProperty & string}Hover`]: ComponentStyle[CSSProperty];
 };
 type ComponentMarginProps = Pick<ComponentStyle, "margin" | "marginTop" | "marginBottom" | "marginLeft" | "marginRight" | "marginBlock" | "marginInline">;
+type ComponentPaddingProps = Pick<ComponentStyle, "padding" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingBlock" | "paddingInline">;
 type ComponentPropWithRef<ComponentRef, ComponentProps> = ComponentProps & {
     ref?: React.Ref<ComponentRef>;
 };
@@ -46,9 +47,11 @@ type DivProps<Value> = {
 type DivComponentType = {
     <Value>(props: ComponentPropWithRef<HTMLDivElement, DivProps<Value>>): React.ReactElement;
     row: <Value>(props: ComponentPropWithRef<HTMLDivElement, OmitProps<DivProps<Value>, "display" | "flexDirection"> & {
+        reverse?: boolean;
         invertFlexDirection?: boolean;
     }>) => React.ReactElement;
     column: <Value>(props: ComponentPropWithRef<HTMLDivElement, OmitProps<DivProps<Value>, "display" | "flexDirection"> & {
+        reverse?: boolean;
         invertFlexDirection?: boolean;
     }>) => React.ReactElement;
     grid: <Value>(props: ComponentPropWithRef<HTMLDivElement, OmitProps<DivProps<Value>, "display">>) => React.ReactElement;
@@ -302,8 +305,8 @@ type PageHolderProps = {
     /** @default false */
     noMaxContentWidth?: boolean;
     children?: React.ReactNode;
-};
-declare function PageHolder({ noMaxContentWidth, children }: PageHolderProps): react_jsx_runtime.JSX.Element;
+} & ComponentPaddingProps;
+declare function PageHolder({ noMaxContentWidth, children, ...props }: PageHolderProps): react_jsx_runtime.JSX.Element;
 declare const _default$5: React$1.MemoExoticComponent<typeof PageHolder>;
 
 type PageHeaderProps = {
@@ -643,7 +646,7 @@ type TabsProps = {
 } & ComponentMarginProps;
 type TabsRef = {
     selectedTab: string;
-    setSelectedTab: (tab: string) => void;
+    selectTab: (tab: string) => void;
 };
 type TabsComponent = {
     (props: ComponentPropWithRef<TabsRef, TabsProps>): React.ReactElement;
@@ -751,4 +754,4 @@ declare const isMobileDevice: boolean;
 
 declare const reactRouterDomPlugin: BetterHtmlPlugin;
 
-export { type AppConfig, type AssetName, type AssetsConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default as BetterHtmlProvider, type BetterHtmlProviderValue, type BrowserName, Button, type ButtonProps, Chip, type ChipProps, type Color, type ColorName, type ColorTheme, ColorThemeSwitch, type ColorThemeSwitchProps, type Colors, type DeepPartialRecord, Div, type DivProps, _default$6 as Divider, Dropdown, type DropdownOption, type DropdownProps, type ExcludeOptions, Foldable, type FoldableProps, type FoldableRef, _default$2 as Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default$8 as Icon, type IconName, type IconProps, type IconsConfig, _default$7 as Image, type ImageProps, InputField, type InputFieldProps, _default$1 as Label, type LabelProps, Loader, type LoaderConfig, type LoaderName, type LoaderProps, Modal, type ModalProps, type ModalRef, type OmitProps, _default$4 as PageHeader, type PageHeaderProps, _default$5 as PageHolder, type PageHolderProps, type PartialRecord, type PickAllRequired, type PickValue, type PluginName, type Styles, type TabGroup, Table, type TableColumn, type TableProps, Tabs, type TabsProps, Text, type TextAs, type TextProps, type TextareaFieldProps, type Theme, type ThemeConfig, _default$3 as ToggleInput, type ToggleInputProps, type ToggleInputRef, type VerticalDividerProps, formatPhoneNumber, generateRandomString, getBrowser, getFormErrorObject, isMobileDevice, loaderControls, reactRouterDomPlugin, useBetterHtmlContext, useBooleanState, useDebounceState, useForm, useLoader, useLoaderControls, useMediaQuery, usePageResize, usePageScroll, useTheme, useUrlQuery };
+export { type AppConfig, type AssetName, type AssetsConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default as BetterHtmlProvider, type BetterHtmlProviderValue, type BrowserName, Button, type ButtonProps, Chip, type ChipProps, type Color, type ColorName, type ColorTheme, ColorThemeSwitch, type ColorThemeSwitchProps, type Colors, type DeepPartialRecord, Div, type DivProps, _default$6 as Divider, Dropdown, type DropdownOption, type DropdownProps, type ExcludeOptions, Foldable, type FoldableProps, type FoldableRef, _default$2 as Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default$8 as Icon, type IconName, type IconProps, type IconsConfig, _default$7 as Image, type ImageProps, InputField, type InputFieldProps, _default$1 as Label, type LabelProps, Loader, type LoaderConfig, type LoaderName, type LoaderProps, Modal, type ModalProps, type ModalRef, type OmitProps, _default$4 as PageHeader, type PageHeaderProps, _default$5 as PageHolder, type PageHolderProps, type PartialRecord, type PickAllRequired, type PickValue, type PluginName, type Styles, type TabGroup, Table, type TableColumn, type TableProps, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, type Theme, type ThemeConfig, _default$3 as ToggleInput, type ToggleInputProps, type ToggleInputRef, type VerticalDividerProps, formatPhoneNumber, generateRandomString, getBrowser, getFormErrorObject, isMobileDevice, loaderControls, reactRouterDomPlugin, useBetterHtmlContext, useBooleanState, useDebounceState, useForm, useLoader, useLoaderControls, useMediaQuery, usePageResize, usePageScroll, useTheme, useUrlQuery };

package/dist/index.js

@@ -2269,11 +2269,29 @@ var DivComponent = (0, import_react3.forwardRef)(function Div({ value, as, isTab
     }
   );
 });
-DivComponent.row = (0, import_react3.forwardRef)(function Row({ invertFlexDirection, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DivComponent, { display: "flex", flexDirection: invertFlexDirection ? "column" : "row", ref, ...props });
+DivComponent.row = (0, import_react3.forwardRef)(function Row({ reverse, invertFlexDirection, ...props }, ref) {
+  const reverseSuffix = reverse ? "-reverse" : "";
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    DivComponent,
+    {
+      display: "flex",
+      flexDirection: (invertFlexDirection ? "column" : "row") + reverseSuffix,
+      ref,
+      ...props
+    }
+  );
 });
-DivComponent.column = (0, import_react3.forwardRef)(function Column({ invertFlexDirection, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DivComponent, { display: "flex", flexDirection: invertFlexDirection ? "row" : "column", ref, ...props });
+DivComponent.column = (0, import_react3.forwardRef)(function Column({ reverse, invertFlexDirection, ...props }, ref) {
+  const reverseSuffix = reverse ? "-reverse" : "";
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    DivComponent,
+    {
+      display: "flex",
+      flexDirection: (invertFlexDirection ? "column" : "row") + reverseSuffix,
+      ref,
+      ...props
+    }
+  );
 });
 DivComponent.grid = (0, import_react3.forwardRef)(function Grid(props, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DivComponent, { display: "grid", ref, ...props });
@@ -3066,7 +3084,7 @@ var Modal_default = Modal2;
 // src/components/PageHolder.tsx
 var import_react12 = require("react");
 var import_jsx_runtime10 = require("react/jsx-runtime");
-function PageHolder({ noMaxContentWidth, children }) {
+function PageHolder({ noMaxContentWidth, children, ...props }) {
   const theme2 = useTheme();
   const { app } = useBetterHtmlContextInternal();
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
@@ -3077,6 +3095,7 @@ function PageHolder({ noMaxContentWidth, children }) {
       maxWidth: !noMaxContentWidth ? app.contentMaxWidth : void 0,
       margin: "0px auto",
       padding: theme2.styles.space,
+      ...props,
       children
     }
   );
@@ -5245,6 +5264,7 @@ var InputElement = import_styled_components9.default.input.withConfig({
    &[type="time"] {
       // min-height: 46px;
       -webkit-appearance: none;
+      -moz-appearance: textfield;
 
       &::-webkit-calendar-picker-indicator {
          display: none;
@@ -6678,12 +6698,19 @@ var TabsComponent = (0, import_react24.forwardRef)(function Tabs({ tabs, name, a
       block: "nearest"
     });
   }, [selectedTab]);
+  (0, import_react24.useEffect)(() => {
+    return () => {
+      componentsState.tabs.setTabGroups(
+        (oldValue) => oldValue.filter((item) => item.name !== (name ?? defaultTabName))
+      );
+    };
+  }, []);
   (0, import_react24.useImperativeHandle)(
     ref,
     () => {
       return {
         selectedTab,
-        setSelectedTab: onClickTab
+        selectTab: onClickTab
       };
     },
     [selectedTab, onClickTab]
@@ -6754,7 +6781,7 @@ var TabsComponent = (0, import_react24.forwardRef)(function Tabs({ tabs, name, a
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Div_default, { width: "100%", children })
+    children && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Div_default, { width: "100%", children })
   ] });
 });
 TabsComponent.content = function Content({ tab, tabWithDot, tabsGroupName, isInitialTab, children }) {