ding-react-admin 2.0.8 → 2.1.0

package/src/crud/utils/referenceSelectDropdownProps.ts

@@ -0,0 +1,30 @@
+import type { SelectProps } from "antd";
+
+export const REFERENCE_SELECT_POPUP_MIN_WIDTH = 360;
+
+export type ReferenceSelectDropdownOptions = {
+  /** When false (default), the dropdown may be wider than the input. */
+  popupMatchSelectWidth?: boolean | number;
+  /** Minimum popup width in px when `popupMatchSelectWidth` is false. */
+  popupMinWidth?: number;
+};
+
+/** Ant Design Select props so reference dropdowns are not clipped to input width. */
+export function referenceSelectDropdownProps(
+  options: ReferenceSelectDropdownOptions = {},
+): Pick<SelectProps, "popupMatchSelectWidth" | "styles"> {
+  const popupMatchSelectWidth = options.popupMatchSelectWidth ?? false;
+  if (popupMatchSelectWidth !== false) {
+    return { popupMatchSelectWidth };
+  }
+
+  const minWidth = options.popupMinWidth ?? REFERENCE_SELECT_POPUP_MIN_WIDTH;
+  return {
+    popupMatchSelectWidth: false,
+    styles: {
+      popup: {
+        root: { minWidth },
+      },
+    },
+  };
+}

package/src/crud/utils/useDebouncedValue.ts

@@ -0,0 +1,17 @@
+import { useEffect, useState } from "react";
+
+/** Returns `value` after it stays unchanged for `delayMs`. When `delayMs <= 0`, returns `value` immediately. */
+export function useDebouncedValue<T>(value: T, delayMs: number): T {
+  const [debounced, setDebounced] = useState(value);
+
+  useEffect(() => {
+    if (delayMs <= 0) {
+      setDebounced(value);
+      return;
+    }
+    const timer = window.setTimeout(() => setDebounced(value), delayMs);
+    return () => window.clearTimeout(timer);
+  }, [value, delayMs]);
+
+  return delayMs <= 0 ? value : debounced;
+}

package/src/index.ts

@@ -89,6 +89,8 @@ export { LoginPage } from "./pages/LoginPage";
 export { PlaceholderPage } from "./pages/PlaceholderPage";
 export { AuthPageLayout } from "./layouts/AuthPageLayout";
 export {
+  AppHub,
+  AppLauncherButton,
   AuthAlternateLink,
   DensitySwitch,
   ThemeSwitch,
@@ -110,10 +112,13 @@ export type {
   LoginCredentials,
   AuthRedirects,
   CreateAdminRouterOptions,
+  AppHubProps,
+  AppLauncherButtonProps,
   AuthAlternateLinkProps,
   AuthPageLayoutProps,
   LoginPageProps,
   NavItem,
+  NavMenuItemDivider,
   RouteAccess,
   ThemeDensity,
   ThemeMode,
@@ -130,9 +135,12 @@ export {
   FormSteps,
   FormStep,
   TextField,
+  TextAreaField,
   NumberField,
   BooleanField,
   DateField,
+  DateTimeField,
+  TimeField,
   SelectField,
   PasswordField,
   ReferenceField,
@@ -149,6 +157,7 @@ export {
   ImageColumn,
   CustomColumn,
   TextFilter,
+  DEFAULT_TEXT_FILTER_DEBOUNCE_MS,
   NumberFilter,
   BooleanFilter,
   DateFilter,
@@ -182,6 +191,7 @@ export type {
   FormStepProps,
   InlineFormSetLayout,
   ResourceListProps,
+  TextFilterProps,
   BaseSourceProps,
   ChoiceOption,
   ChoicesLoader,
@@ -196,6 +206,7 @@ export type {
   InlineFormSetBaseProps,
   InlineRowContext,
   InlineFieldRegistration,
+  TextAreaFieldProps,
   FieldWrapperProps,
   ImageFieldProps,
   FileFieldProps,

package/src/layouts/AdminLayout.tsx

@@ -29,7 +29,7 @@ import {
 } from "./navFilter";
 import { navItemsToAntdItems } from "./navMenuItems";
 import { filterNavByPermission } from "../permissions/resourcePermissions";
-import type { AdminLayoutProps, NavItem } from "../types";
+import type { AdminLayoutProps, NavItem, NavMenuItemDivider } from "../types";
 import "../components/navMenu.css";
 
 const LIGHT_SIDEBAR_BG = "#001529";
@@ -87,15 +87,36 @@ type NavMenuProps = {
   openKeys?: string[];
   onOpenChange?: (keys: string[]) => void;
   onNavigate: (key: string) => void;
+  wrapLabels?: boolean;
+  itemDivider?: NavMenuItemDivider;
 };
 
-type SiderNavPanelProps = NavMenuProps & {
+function navMenuClassName({
+  wrapLabels,
+  itemDivider = "none",
+}: {
+  wrapLabels?: boolean;
+  itemDivider?: NavMenuItemDivider;
+}): string {
+  const classes = ["ding-admin-nav-menu"];
+  if (wrapLabels) classes.push("ding-admin-nav-menu--wrap-labels");
+  if (itemDivider === "full") {
+    classes.push("ding-admin-nav-menu--item-divider-full");
+  } else if (itemDivider === "inset") {
+    classes.push("ding-admin-nav-menu--item-divider-inset");
+  }
+  return classes.join(" ");
+}
+
+type SiderNavPanelProps = Omit<NavMenuProps, "wrapLabels" | "itemDivider"> & {
   navQuery: string;
   onNavQueryChange: (value: string) => void;
   showNavSearch: boolean;
   navSearchPlaceholder?: string;
   scrollVariant: "default" | "on-dark";
   searchVariant: "on-dark" | "app";
+  wrapLabels?: boolean;
+  itemDivider?: NavMenuItemDivider;
 };
 
 function SiderNavPanel({
@@ -111,6 +132,8 @@ function SiderNavPanel({
   navSearchPlaceholder,
   scrollVariant,
   searchVariant,
+  wrapLabels,
+  itemDivider,
 }: SiderNavPanelProps) {
   return (
     <>
@@ -138,6 +161,8 @@ function SiderNavPanel({
           openKeys={openKeys}
           onOpenChange={onOpenChange}
           onNavigate={onNavigate}
+          wrapLabels={wrapLabels}
+          itemDivider={itemDivider}
         />
       </ScrollableArea>
     </>
@@ -151,15 +176,17 @@ function NavMenu({
   openKeys,
   onOpenChange,
   onNavigate,
+  wrapLabels,
+  itemDivider,
 }: NavMenuProps) {
   return (
     <Menu
-      className="ding-admin-nav-menu"
+      className={navMenuClassName({ wrapLabels, itemDivider })}
       mode="inline"
       theme="dark"
       inlineCollapsed={inlineCollapsed}
       selectedKeys={selectedKeys}
-      tooltip={{ placement: "right", mouseEnterDelay: 1 }}
+      tooltip={{ placement: "right", mouseEnterDelay: 0 }}
       {...(!inlineCollapsed && openKeys !== undefined && onOpenChange
         ? { openKeys, onOpenChange }
         : {})}
@@ -181,6 +208,8 @@ export function AdminLayout({
   loginPath = "/login",
   siderCollapsedStorageKey = DEFAULT_SIDER_KEY,
   navSearch = true,
+  navMenu,
+  hideSider = false,
 }: AdminLayoutProps) {
   const navigate = useNavigate();
   const location = useLocation();
@@ -200,6 +229,9 @@ export function AdminLayout({
   const navSearchEnabled = navSearch !== false;
   const navSearchPlaceholder =
     typeof navSearch === "object" ? navSearch.placeholder : undefined;
+  const navMenuWrapLabels = navMenu?.wrapLabels !== false;
+  const navMenuItemDivider: NavMenuItemDivider =
+    navMenu?.itemDivider ?? "inset";
 
   const drawerTitle = mobileDrawerTitle ?? brand;
 
@@ -260,9 +292,11 @@ export function AdminLayout({
   const menuItems: MenuProps["items"] = useMemo(
     () =>
       navItemsToAntdItems(displayNavItems, {
-        showLabelTooltip: !collapsed,
+        showLabelTooltip: !collapsed && !navMenuWrapLabels,
+        wrapLabels: navMenuWrapLabels && !collapsed,
+        collapsed,
       }),
-    [displayNavItems, collapsed],
+    [displayNavItems, collapsed, navMenuWrapLabels],
   );
 
   const filteredOpenKeys = useMemo(
@@ -335,7 +369,7 @@ export function AdminLayout({
         background: token.colorBgLayout,
       }}
     >
-      {!isMobile && (
+      {!hideSider && !isMobile && (
         <Layout.Sider
           collapsible
           collapsed={collapsed}
@@ -388,11 +422,13 @@ export function AdminLayout({
               navSearchPlaceholder={navSearchPlaceholder}
               scrollVariant={siderScrollVariant}
               searchVariant={siderSearchVariant}
+              wrapLabels={navMenuWrapLabels}
+              itemDivider={navMenuItemDivider}
             />
           </div>
         </Layout.Sider>
       )}
-      {isMobile && (
+      {!hideSider && isMobile && (
         <Drawer
           title={
             <Typography.Text
@@ -436,6 +472,8 @@ export function AdminLayout({
               navSearchPlaceholder={navSearchPlaceholder}
               scrollVariant={siderScrollVariant}
               searchVariant={siderSearchVariant}
+              wrapLabels={navMenuWrapLabels}
+              itemDivider={navMenuItemDivider}
             />
           </div>
         </Drawer>
@@ -461,7 +499,7 @@ export function AdminLayout({
             flexShrink: 0,
           }}
         >
-          {isMobile && (
+          {!hideSider && isMobile && (
             <Button
               type="text"
               icon={<MenuOutlined />}

package/src/layouts/navMenuItems.tsx

@@ -5,9 +5,16 @@ import { getNavItemLabel } from "./navFilter";
 
 export function navItemsToAntdItems(
   items: NavItem[],
-  options?: { showLabelTooltip?: boolean },
+  options?: {
+    showLabelTooltip?: boolean;
+    wrapLabels?: boolean;
+    /** Collapsed sider: native `title` for icon tooltips only. */
+    collapsed?: boolean;
+  },
 ): NonNullable<MenuProps["items"]> {
   const showLabelTooltip = options?.showLabelTooltip !== false;
+  const wrapLabels = options?.wrapLabels === true;
+  const collapsed = options?.collapsed === true;
 
   return items.map((item) => {
     const IconComp = item.Icon;
@@ -16,6 +23,8 @@ export function navItemsToAntdItems(
     const label =
       title && showLabelTooltip ? (
         <NavMenuLabel label={item.label} title={title} />
+      ) : wrapLabels ? (
+        <NavMenuLabel label={item.label} title="" />
       ) : (
         item.label
       );
@@ -23,7 +32,7 @@ export function navItemsToAntdItems(
     // Expanded: NavMenuLabel tooltip only (omit `title` to avoid native DOM tooltip).
     // Collapsed: string title for the sider icon tooltip.
     const itemTitle: { title?: string } =
-      !showLabelTooltip && title ? { title } : {};
+      collapsed && title ? { title } : {};
 
     if (item.children?.length) {
       return {

package/src/router/createAdminRouter.tsx

@@ -60,5 +60,7 @@ export function createAdminRouter({
     element: <Navigate to={homePath} replace />,
   });
 
-  return createBrowserRouter(routerRoutes);
+  return createBrowserRouter(routerRoutes, {
+    basename: import.meta.env.BASE_URL.replace(/\/$/, "") || undefined,
+  });
 }

package/src/types.ts

@@ -66,6 +66,8 @@ export type AppThemeProviderProps = {
   densityStorageKey?: string;
 };
 
+export type NavMenuItemDivider = "none" | "full" | "inset";
+
 export type AdminLayoutProps = {
   navItems: NavItem[];
   /** Shown in sider header when expanded; drawer title on mobile. */
@@ -87,9 +89,31 @@ export type AdminLayoutProps = {
    * Use an object to customize the placeholder.
    */
   navSearch?: boolean | { placeholder?: string };
+  /**
+   * Sidebar menu presentation.
+   */
+  navMenu?: {
+    /**
+     * Wrap long labels onto multiple lines instead of truncating with ellipsis.
+     * Default **`true`**. Pass **`false`** for ellipsis + Ant Design hover tooltip.
+     */
+    wrapLabels?: boolean;
+    /**
+     * Divider between sibling rows at each submenu level.
+     * Default **`"inset"`**.
+     */
+    itemDivider?: NavMenuItemDivider;
+  };
+  /**
+   * Hide the sidebar and mobile nav drawer (e.g. on an Odoo-style app hub home).
+   * Default **`false`**.
+   */
+  hideSider?: boolean;
 };
 
 export type { AuthPageLayoutProps } from "./layouts/AuthPageLayout";
+export type { AppHubProps } from "./components/AppHub";
+export type { AppLauncherButtonProps } from "./components/AppLauncherButton";
 export type { AuthAlternateLinkProps } from "./components/AuthAlternateLink";
 
 export type LoginPageProps = {