react-better-html 1.1.185 → 1.1.187

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/index.d.mts +7 -5
  2. package/dist/index.d.ts +7 -5
  3. package/dist/index.js +55 -23
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +55 -23
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -931,23 +931,25 @@ declare const Foldable: typeof FoldableComponent & {
931
931
  box: typeof FoldableComponent.box;
932
932
  };
933
933
 
934
- type MenuItem = {
934
+ type SideMenuItem = {
935
935
  text: string;
936
936
  iconName: IconName | AnyOtherString;
937
937
  href?: string;
938
- onClick?: (item: MenuItem) => void;
938
+ onClick?: (item: SideMenuItem) => void;
939
939
  disabled?: boolean;
940
940
  hidden?: boolean;
941
- children?: MenuItem[];
941
+ children?: SideMenuItem[];
942
942
  };
943
943
  type SideMenuProps = {
944
- items: MenuItem[];
944
+ items: SideMenuItem[];
945
+ bottomItems?: SideMenuItem[];
945
946
  topSpace?: number;
946
947
  logoAssetName?: AssetName | AnyOtherString;
947
948
  logoUrl?: string;
948
949
  logoText?: string;
949
950
  logoFontFamily?: string;
950
951
  collapsable?: boolean;
952
+ withCloseButton?: boolean;
951
953
  widthMobileHandle?: boolean;
952
954
  };
953
955
  type SideMenuComponentType = {
@@ -1122,4 +1124,4 @@ type LocalStoragePluginOptions = {
1122
1124
  declare const defaultLocalStoragePluginOptions: Required<LocalStoragePluginOptions>;
1123
1125
  declare const localStoragePlugin: BetterHtmlPluginConstructor<LocalStoragePluginOptions>;
1124
1126
 
1125
- export { type Alert, type AlertType, type AlertsPluginOptions, type AppConfig, type AssetName, type AssetsConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default as BetterHtmlProvider, type BetterHtmlProviderConfig, type BrowserName, Button, type ButtonProps, Chip, type ChipProps, type Color, type ColorName, type ColorTheme, ColorThemeSwitch, type ColorThemeSwitchProps, type Colors, type ComponentHoverStyle, type ComponentMarginProps, type ComponentPaddingProps, type DeepPartialRecord, Div, type DivProps, _default$3 as Divider, Dropdown, type DropdownOption, type DropdownProps, type ExcludeOptions, Foldable, type FoldableProps, type FoldableRef, Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default$5 as Icon, type IconName, type IconProps, type IconsConfig, _default$4 as Image, type ImageProps, InputField, type InputFieldProps, _default$1 as Label, type LabelProps, Loader, type LoaderConfig, type LoaderName, type LoaderProps, type LocalStoragePluginOptions, type MenuItem, Modal, type ModalProps, type ModalRef, type OmitProps, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, type PartialRecord, type PickAllRequired, type PickValue, type PluginName, type ReactRouterDomPluginOptions, SideMenu, type Styles, type TabGroup, Table, type TableColumn, type TableFilterData, type TableProps, type TableRef, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, type Theme, type ThemeConfig, _default$2 as ToggleInput, type ToggleInputProps, type ToggleInputRef, Tooltip, type TooltipProps, type TooltipRef, type VerticalDividerProps, alertControls, alertsPlugin, colorThemeControls, countries, darkenColor, defaultAlertsPluginOptions, defaultLocalStoragePluginOptions, defaultReactRouterDomPluginOptions, desaturateColor, eventPreventDefault, eventPreventStop, eventStopPropagation, filterHover, formatPhoneNumber, generateLocalStorage, generateRandomString, getBrowser, getFormErrorObject, isMobileDevice, lightenColor, loaderControls, localStoragePlugin, reactRouterDomPlugin, saturateColor, sideMenuControls, useAlertControls, useBetterHtmlContext, useBooleanState, useDebounceState, useForm, useLoader, useLoaderControls, useMediaQuery, usePageResize, usePageScroll, useTheme, useUrlQuery };
1127
+ export { type Alert, type AlertType, type AlertsPluginOptions, type AppConfig, type AssetName, type AssetsConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default as BetterHtmlProvider, type BetterHtmlProviderConfig, type BrowserName, Button, type ButtonProps, Chip, type ChipProps, type Color, type ColorName, type ColorTheme, ColorThemeSwitch, type ColorThemeSwitchProps, type Colors, type ComponentHoverStyle, type ComponentMarginProps, type ComponentPaddingProps, type DeepPartialRecord, Div, type DivProps, _default$3 as Divider, Dropdown, type DropdownOption, type DropdownProps, type ExcludeOptions, Foldable, type FoldableProps, type FoldableRef, Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default$5 as Icon, type IconName, type IconProps, type IconsConfig, _default$4 as Image, type ImageProps, InputField, type InputFieldProps, _default$1 as Label, type LabelProps, Loader, type LoaderConfig, type LoaderName, type LoaderProps, type LocalStoragePluginOptions, Modal, type ModalProps, type ModalRef, type OmitProps, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, type PartialRecord, type PickAllRequired, type PickValue, type PluginName, type ReactRouterDomPluginOptions, SideMenu, type SideMenuItem, type Styles, type TabGroup, Table, type TableColumn, type TableFilterData, type TableProps, type TableRef, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, type Theme, type ThemeConfig, _default$2 as ToggleInput, type ToggleInputProps, type ToggleInputRef, Tooltip, type TooltipProps, type TooltipRef, type VerticalDividerProps, alertControls, alertsPlugin, colorThemeControls, countries, darkenColor, defaultAlertsPluginOptions, defaultLocalStoragePluginOptions, defaultReactRouterDomPluginOptions, desaturateColor, eventPreventDefault, eventPreventStop, eventStopPropagation, filterHover, formatPhoneNumber, generateLocalStorage, generateRandomString, getBrowser, getFormErrorObject, isMobileDevice, lightenColor, loaderControls, localStoragePlugin, reactRouterDomPlugin, saturateColor, sideMenuControls, useAlertControls, useBetterHtmlContext, useBooleanState, useDebounceState, useForm, useLoader, useLoaderControls, useMediaQuery, usePageResize, usePageScroll, useTheme, useUrlQuery };
package/dist/index.d.ts CHANGED
@@ -931,23 +931,25 @@ declare const Foldable: typeof FoldableComponent & {
931
931
  box: typeof FoldableComponent.box;
932
932
  };
933
933
 
934
- type MenuItem = {
934
+ type SideMenuItem = {
935
935
  text: string;
936
936
  iconName: IconName | AnyOtherString;
937
937
  href?: string;
938
- onClick?: (item: MenuItem) => void;
938
+ onClick?: (item: SideMenuItem) => void;
939
939
  disabled?: boolean;
940
940
  hidden?: boolean;
941
- children?: MenuItem[];
941
+ children?: SideMenuItem[];
942
942
  };
943
943
  type SideMenuProps = {
944
- items: MenuItem[];
944
+ items: SideMenuItem[];
945
+ bottomItems?: SideMenuItem[];
945
946
  topSpace?: number;
946
947
  logoAssetName?: AssetName | AnyOtherString;
947
948
  logoUrl?: string;
948
949
  logoText?: string;
949
950
  logoFontFamily?: string;
950
951
  collapsable?: boolean;
952
+ withCloseButton?: boolean;
951
953
  widthMobileHandle?: boolean;
952
954
  };
953
955
  type SideMenuComponentType = {
@@ -1122,4 +1124,4 @@ type LocalStoragePluginOptions = {
1122
1124
  declare const defaultLocalStoragePluginOptions: Required<LocalStoragePluginOptions>;
1123
1125
  declare const localStoragePlugin: BetterHtmlPluginConstructor<LocalStoragePluginOptions>;
1124
1126
 
1125
- export { type Alert, type AlertType, type AlertsPluginOptions, type AppConfig, type AssetName, type AssetsConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default as BetterHtmlProvider, type BetterHtmlProviderConfig, type BrowserName, Button, type ButtonProps, Chip, type ChipProps, type Color, type ColorName, type ColorTheme, ColorThemeSwitch, type ColorThemeSwitchProps, type Colors, type ComponentHoverStyle, type ComponentMarginProps, type ComponentPaddingProps, type DeepPartialRecord, Div, type DivProps, _default$3 as Divider, Dropdown, type DropdownOption, type DropdownProps, type ExcludeOptions, Foldable, type FoldableProps, type FoldableRef, Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default$5 as Icon, type IconName, type IconProps, type IconsConfig, _default$4 as Image, type ImageProps, InputField, type InputFieldProps, _default$1 as Label, type LabelProps, Loader, type LoaderConfig, type LoaderName, type LoaderProps, type LocalStoragePluginOptions, type MenuItem, Modal, type ModalProps, type ModalRef, type OmitProps, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, type PartialRecord, type PickAllRequired, type PickValue, type PluginName, type ReactRouterDomPluginOptions, SideMenu, type Styles, type TabGroup, Table, type TableColumn, type TableFilterData, type TableProps, type TableRef, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, type Theme, type ThemeConfig, _default$2 as ToggleInput, type ToggleInputProps, type ToggleInputRef, Tooltip, type TooltipProps, type TooltipRef, type VerticalDividerProps, alertControls, alertsPlugin, colorThemeControls, countries, darkenColor, defaultAlertsPluginOptions, defaultLocalStoragePluginOptions, defaultReactRouterDomPluginOptions, desaturateColor, eventPreventDefault, eventPreventStop, eventStopPropagation, filterHover, formatPhoneNumber, generateLocalStorage, generateRandomString, getBrowser, getFormErrorObject, isMobileDevice, lightenColor, loaderControls, localStoragePlugin, reactRouterDomPlugin, saturateColor, sideMenuControls, useAlertControls, useBetterHtmlContext, useBooleanState, useDebounceState, useForm, useLoader, useLoaderControls, useMediaQuery, usePageResize, usePageScroll, useTheme, useUrlQuery };
1127
+ export { type Alert, type AlertType, type AlertsPluginOptions, type AppConfig, type AssetName, type AssetsConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default as BetterHtmlProvider, type BetterHtmlProviderConfig, type BrowserName, Button, type ButtonProps, Chip, type ChipProps, type Color, type ColorName, type ColorTheme, ColorThemeSwitch, type ColorThemeSwitchProps, type Colors, type ComponentHoverStyle, type ComponentMarginProps, type ComponentPaddingProps, type DeepPartialRecord, Div, type DivProps, _default$3 as Divider, Dropdown, type DropdownOption, type DropdownProps, type ExcludeOptions, Foldable, type FoldableProps, type FoldableRef, Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default$5 as Icon, type IconName, type IconProps, type IconsConfig, _default$4 as Image, type ImageProps, InputField, type InputFieldProps, _default$1 as Label, type LabelProps, Loader, type LoaderConfig, type LoaderName, type LoaderProps, type LocalStoragePluginOptions, Modal, type ModalProps, type ModalRef, type OmitProps, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, type PartialRecord, type PickAllRequired, type PickValue, type PluginName, type ReactRouterDomPluginOptions, SideMenu, type SideMenuItem, type Styles, type TabGroup, Table, type TableColumn, type TableFilterData, type TableProps, type TableRef, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, type Theme, type ThemeConfig, _default$2 as ToggleInput, type ToggleInputProps, type ToggleInputRef, Tooltip, type TooltipProps, type TooltipRef, type VerticalDividerProps, alertControls, alertsPlugin, colorThemeControls, countries, darkenColor, defaultAlertsPluginOptions, defaultLocalStoragePluginOptions, defaultReactRouterDomPluginOptions, desaturateColor, eventPreventDefault, eventPreventStop, eventStopPropagation, filterHover, formatPhoneNumber, generateLocalStorage, generateRandomString, getBrowser, getFormErrorObject, isMobileDevice, lightenColor, loaderControls, localStoragePlugin, reactRouterDomPlugin, saturateColor, sideMenuControls, useAlertControls, useBetterHtmlContext, useBooleanState, useDebounceState, useForm, useLoader, useLoaderControls, useMediaQuery, usePageResize, usePageScroll, useTheme, useUrlQuery };
package/dist/index.js CHANGED
@@ -9512,12 +9512,14 @@ var MenuItemComponent = (0, import_react29.memo)(function MenuItemComponent2({ i
9512
9512
  });
9513
9513
  var SideMenuComponent = function SideMenu({
9514
9514
  items,
9515
+ bottomItems,
9515
9516
  topSpace = 0,
9516
9517
  logoAssetName,
9517
9518
  logoUrl,
9518
9519
  logoText,
9519
9520
  logoFontFamily,
9520
9521
  collapsable,
9522
+ withCloseButton,
9521
9523
  widthMobileHandle
9522
9524
  }) {
9523
9525
  const theme2 = useTheme();
@@ -9527,6 +9529,8 @@ var SideMenuComponent = function SideMenu({
9527
9529
  setSideMenuIsOpenMobile.setFalse();
9528
9530
  }, []);
9529
9531
  const readyItems = (0, import_react29.useMemo)(() => items.filter((item) => !item.hidden), [items]);
9532
+ const readyBottomItems = (0, import_react29.useMemo)(() => bottomItems?.filter((item) => !item.hidden), [bottomItems]);
9533
+ const isCollapsable = collapsable && !mediaQuery.size1000;
9530
9534
  const isCollapsed = sideMenuIsCollapsed && !mediaQuery.size1000;
9531
9535
  const LinkComponentTag = components.button?.tagReplacement?.linkComponent ?? "a";
9532
9536
  const sideMenuWidth = components.sideMenu?.width ?? defaultSideMenuWidth;
@@ -9543,15 +9547,13 @@ var SideMenuComponent = function SideMenu({
9543
9547
  backgroundColor: theme2.colors.backgroundContent,
9544
9548
  borderRight: `solid 1px ${theme2.colors.border}`,
9545
9549
  transform: !mediaQuery.size1000 || sideMenuIsOpenMobile ? "translateX(0)" : "translateX(-100%)",
9546
- paddingInline: theme2.styles.space,
9547
9550
  paddingTop: logoAssetName || logoUrl ? theme2.styles.gap : theme2.styles.space,
9548
- paddingBottom: theme2.styles.space,
9549
9551
  transition: mediaQuery.size1000 ? !isCollapsed ? `transform ${theme2.styles.transition}` : "none" : theme2.styles.transition,
9550
9552
  userSelect: "none",
9551
- zIndex: 11,
9553
+ zIndex: 10,
9552
9554
  children: [
9553
9555
  /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Div_default.column, { width: "100%", height: "100%", gap: theme2.styles.space, children: [
9554
- (logoAssetName || logoUrl || mediaQuery.size1000) && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Div_default.row, { alignItems: "center", children: [
9556
+ (logoAssetName || logoUrl || withCloseButton && mediaQuery.size1000) && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Div_default.row, { alignItems: "center", paddingInline: theme2.styles.space, children: [
9555
9557
  (logoAssetName || logoUrl) && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(LinkComponentTag, { to: "/", href: "/", onClick: onClickXButton, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
9556
9558
  Div_default.row,
9557
9559
  {
@@ -9586,30 +9588,60 @@ var SideMenuComponent = function SideMenu({
9586
9588
  ]
9587
9589
  }
9588
9590
  ) }),
9589
- mediaQuery.size1000 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Button_default.icon, { icon: "XMark", marginLeft: "auto", onClick: onClickXButton })
9591
+ withCloseButton && mediaQuery.size1000 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Button_default.icon, { icon: "XMark", marginLeft: "auto", onClick: onClickXButton })
9590
9592
  ] }),
9591
- /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Div_default.column, { gap: theme2.styles.gap / 2, children: readyItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MenuItemComponent, { item, onClick: onClickXButton }, item.text)) }),
9592
- collapsable && !mediaQuery.size1000 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
9593
- Div_default.row,
9593
+ /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
9594
+ Div_default.column,
9594
9595
  {
9595
- alignItems: "center",
9596
- justifyContent: "center",
9597
- backgroundColor: theme2.colors.backgroundContent,
9598
- borderRadius: theme2.styles.borderRadius,
9596
+ width: "100%",
9597
+ height: "100%",
9598
+ overflowY: "auto",
9599
+ paddingInline: theme2.styles.space,
9600
+ paddingBottom: !isCollapsable && !readyBottomItems ? theme2.styles.space : void 0,
9601
+ children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Div_default.column, { gap: theme2.styles.gap / 2, children: readyItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MenuItemComponent, { item, onClick: onClickXButton }, item.text)) })
9602
+ }
9603
+ ),
9604
+ readyBottomItems && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
9605
+ Div_default.column,
9606
+ {
9607
+ borderTop: `solid 1px ${theme2.colors.border}`,
9608
+ gap: theme2.styles.gap / 2,
9599
9609
  marginTop: "auto",
9600
- cursor: "pointer",
9601
- filterHover: filterHover().z1,
9602
- paddingBlock: theme2.styles.gap,
9603
- isTabAccessed: true,
9604
- onClick: setSideMenuIsCollapsed.toggle,
9610
+ paddingTop: theme2.styles.space,
9611
+ paddingInline: theme2.styles.space,
9612
+ paddingBottom: !isCollapsable ? theme2.styles.space : void 0,
9613
+ children: readyBottomItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MenuItemComponent, { item, onClick: onClickXButton }, item.text))
9614
+ }
9615
+ ),
9616
+ isCollapsable && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
9617
+ Div_default,
9618
+ {
9619
+ borderTop: `solid 1px ${theme2.colors.border}`,
9620
+ marginTop: !readyBottomItems ? "auto" : void 0,
9621
+ paddingInline: theme2.styles.space,
9622
+ paddingBlock: theme2.styles.space,
9605
9623
  children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
9606
- Icon_default,
9624
+ Div_default.row,
9607
9625
  {
9608
- name: "chevronRight",
9609
- size: 20,
9610
- color: theme2.colors.textSecondary,
9611
- transform: `rotate(${isCollapsed ? 0 : 180}deg)`,
9612
- transition: theme2.styles.transition
9626
+ alignItems: "center",
9627
+ justifyContent: "center",
9628
+ backgroundColor: theme2.colors.backgroundContent,
9629
+ borderRadius: theme2.styles.borderRadius,
9630
+ cursor: "pointer",
9631
+ filterHover: filterHover().z1,
9632
+ isTabAccessed: true,
9633
+ paddingBlock: theme2.styles.gap,
9634
+ onClick: setSideMenuIsCollapsed.toggle,
9635
+ children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
9636
+ Icon_default,
9637
+ {
9638
+ name: "chevronRight",
9639
+ size: 20,
9640
+ color: theme2.colors.textSecondary,
9641
+ transform: `rotate(${isCollapsed ? 0 : 180}deg)`,
9642
+ transition: theme2.styles.transition
9643
+ }
9644
+ )
9613
9645
  }
9614
9646
  )
9615
9647
  }