@rebasepro/admin 0.12.1-canary.gf5f1d39 → 0.13.0

package/src/form/field_bindings/BinaryFieldBinding.tsx

@@ -52,6 +52,7 @@ export function BinaryFieldBinding({
     autoFocus,
     property,
     includeDescription,
+    hideLabel,
     size = "large"
 }: FieldProps<BinaryProperty>) {
 
@@ -87,11 +88,11 @@ export function BinaryFieldBinding({
     return (
         <div className="flex flex-col gap-2 w-full mt-2">
             <div className="flex items-center justify-between mb-1">
-                <LabelWithIcon
+                {!hideLabel && <LabelWithIcon
                     icon={getIconForProperty(property, "small")}
                     required={property.validation?.required}
                     title={property.name ?? propertyKey}
-                />
+                />}
             </div>
 
             <PropertyIdCopyTooltip propertyKey={propertyKey}>

package/src/form/field_bindings/DateTimeFieldBinding.tsx

@@ -31,7 +31,8 @@ export function DateTimeFieldBinding({
     disabled,
     touched,
     property,
-    includeDescription
+    includeDescription,
+    hideLabel
 }: DateTimeFieldProps) {
 
     const { locale } = useCustomizationController();
@@ -54,7 +55,7 @@ export function DateTimeFieldBinding({
                     locale={locale}
                     error={showError}
                     disabled={disabled}
-                    label={<LabelWithIcon
+                    label={hideLabel ? undefined : <LabelWithIcon
                         icon={getIconForProperty(property, "small")}
                         required={property.validation?.required}
                         className={showError ? "text-red-500 dark:text-red-500" : "text-text-secondary dark:text-text-secondary-dark"}

package/src/form/field_bindings/GeopointFieldBinding.tsx

@@ -62,6 +62,7 @@ export function GeopointFieldBinding({
     autoFocus,
     property,
     includeDescription,
+    hideLabel,
     size = "large"
 }: FieldProps<GeopointProperty>) {
 
@@ -129,11 +130,11 @@ export function GeopointFieldBinding({
     return (
         <div className="flex flex-col gap-2 w-full mt-2">
             <div className="flex items-center justify-between mb-1">
-                <LabelWithIcon
+                {!hideLabel && <LabelWithIcon
                     icon={getIconForProperty(property, "small")}
                     required={property.validation?.required}
                     title={property.name ?? propertyKey}
-                />
+                />}
                 {!disabled && (latText || lngText) && (
                     <IconButton
                         size="small"

package/src/form/field_bindings/MapFieldBinding.tsx

@@ -46,7 +46,7 @@ export function MapFieldBinding({
 
     const mapFormView = <>
         <div
-            className={cls("py-1 flex flex-col space-y-2", minimalistView && property.admin?.widthPercentage !== undefined ? "mt-8" : undefined)}>
+            className={"py-1 flex flex-col space-y-2"}>
             {Object.entries(mapProperties)
                 .filter(([_, property]) => !isHidden(property))
                 .map(([entryKey, childProperty], index) => {
@@ -96,7 +96,6 @@ export function MapFieldBinding({
 expanded }
                     });
                 }}
-                className={property.admin?.widthPercentage !== undefined ? "mt-8" : undefined}
                 innerClassName={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2 bg-white dark:bg-surface-900"}
                 title={<LabelWithIconAndTooltip
                     propertyKey={propertyKey}

package/src/form/field_bindings/MarkdownEditorFieldBinding.tsx

@@ -74,6 +74,7 @@ export function MarkdownEditorFieldBinding({
     value,
     setValue,
     includeDescription,
+    hideLabel,
     showError,
     error,
     minimalistView,
@@ -216,12 +217,12 @@ export function MarkdownEditorFieldBinding({
     return (
         <>
             <div className="flex items-center w-full">
-                <LabelWithIconAndTooltip
+                {!hideLabel && <LabelWithIconAndTooltip
                     propertyKey={propertyKey}
                     icon={getIconForProperty(property, "small")}
                     required={property.validation?.required}
                     title={property.name ?? propertyKey}
-                    className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
+                    className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>}
                 <div className="flex-grow"/>
                 {property.admin?.clearable && !disabled && (
                     <IconButton

package/src/form/field_bindings/MultiSelectFieldBinding.tsx

@@ -27,6 +27,7 @@ export function MultiSelectFieldBinding({
     disabled,
     property,
     includeDescription,
+    hideLabel,
     size = "large",
     autoFocus
 }: FieldProps<ArrayProperty, unknown, Record<string, unknown>>) {
@@ -91,7 +92,7 @@ export function MultiSelectFieldBinding({
                 value={validValue ? value.map((v) => v?.toString()) : []}
                 disabled={disabled}
                 modalPopover={true}
-                label={<LabelWithIconAndTooltip
+                label={hideLabel ? undefined : <LabelWithIconAndTooltip
                     propertyKey={propertyKey}
                     icon={getIconForProperty(property, "small")}
                     required={property.validation?.required}

package/src/form/field_bindings/ReadOnlyFieldBinding.tsx

@@ -27,6 +27,7 @@ export function ReadOnlyFieldBinding({
     minimalistView,
     property,
     includeDescription,
+    hideLabel,
     context
 }: FieldProps<Property>) {
 
@@ -39,7 +40,7 @@ export function ReadOnlyFieldBinding({
 
         <>
 
-            {!minimalistView && <LabelWithIconAndTooltip
+            {!minimalistView && !hideLabel && <LabelWithIconAndTooltip
                 propertyKey={propertyKey}
                 icon={getIconForProperty(property, "small")}
                 required={property.validation?.required}

package/src/form/field_bindings/ReferenceFieldBinding.tsx

@@ -49,6 +49,7 @@ function ReferenceFieldBindingInternal({
     autoFocus,
     property,
     includeDescription,
+    hideLabel,
     size = "medium"
 }: FieldProps<ReferenceProperty>) {
     if (!property.path) {
@@ -96,7 +97,7 @@ function ReferenceFieldBindingInternal({
 
     return (
         <>
-            {!minimalistView && <LabelWithIconAndTooltip
+            {!minimalistView && !hideLabel && <LabelWithIconAndTooltip
                 propertyKey={propertyKey}
                 icon={getIconForProperty(property, "small")}
                 required={property.validation?.required}

package/src/form/field_bindings/RelationFieldBinding.tsx

@@ -63,6 +63,7 @@ function RelationSelectorBinding({
     isSubmitting,
     property,
     includeDescription,
+    hideLabel,
     setValue,
     relation,
     manyRelation
@@ -75,12 +76,12 @@ function RelationSelectorBinding({
 
     return (
         <div className="">
-            <LabelWithIconAndTooltip
+            {!hideLabel && <LabelWithIconAndTooltip
                 propertyKey={propertyKey}
                 icon={getIconForProperty(property, "small")}
                 required={property.validation?.required}
                 title={property.name ?? propertyKey}
-                className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
+                className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>}
 
             <RelationSelector
                 relation={relation}
@@ -116,6 +117,7 @@ function SingleRelationFieldBinding({
     isSubmitting,
     property,
     includeDescription,
+    hideLabel,
     setValue,
     relation
 }: FieldProps<RelationProperty> & { relation: Relation | undefined }) {
@@ -150,12 +152,12 @@ function SingleRelationFieldBinding({
 
     return (
         <>
-            <LabelWithIconAndTooltip
+            {!hideLabel && <LabelWithIconAndTooltip
                 propertyKey={propertyKey}
                 icon={getIconForProperty(property, "small")}
                 required={property.validation?.required}
                 title={property.name ?? propertyKey}
-                className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
+                className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>}
 
             {!collection && <ErrorView
                 error={"The specified collection does not exist. Check console"}/>}

package/src/form/field_bindings/RepeatFieldBinding.tsx

@@ -85,6 +85,10 @@ export function RepeatFieldBinding({
             context,
             partOfArray: true,
             minimalistView: false,
+            // The panel header already names the field; repeating "Locale" on
+            // every row of a three-item array is noise, and the label was what
+            // made each row a 76px card around a two-character value.
+            hideLabel: true,
             autoFocus: internalId === lastAddedId
         };
         return <ErrorBoundary>
@@ -104,7 +108,6 @@ export function RepeatFieldBinding({
         sortable={sortable}
         newDefaultEntry={getDefaultValueFor(property.of)}
         onValueChange={(value) => setFieldValue(propertyKey, value)}
-        className={property.admin?.widthPercentage !== undefined ? "mt-8" : undefined}
     />;
 
     const title = (<>

package/src/form/field_bindings/SelectFieldBinding.tsx

@@ -31,6 +31,7 @@ export function SelectFieldBinding({
     touched,
     property,
     includeDescription,
+    hideLabel,
     size = "large"
 }: FieldProps<StringProperty | NumberProperty>) {
 
@@ -58,7 +59,7 @@ export function SelectFieldBinding({
                 fullWidth={true}
                 position="item-aligned"
                 inputClassName={cls("w-full")}
-                label={
+                label={hideLabel ? undefined : (
                     <PropertyIdCopyTooltip propertyKey={propertyKey}>
                         <LabelWithIcon
                             icon={getIconForProperty(property, "small")}
@@ -66,7 +67,7 @@ export function SelectFieldBinding({
                             title={property.name ?? propertyKey}
                             className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5 my-0"}
                         />
-                    </PropertyIdCopyTooltip>}
+                    </PropertyIdCopyTooltip>)}
                 endAdornment={
                     property.admin?.clearable && !disabled && <IconButton
                         size="small"

package/src/form/field_bindings/StorageUploadFieldBinding.tsx

@@ -41,7 +41,15 @@ import {
 } from "@rebasepro/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
 
-const dropZoneClasses = "box-border relative pt-[2px] items-center border border-transparent min-h-[254px] outline-none rounded-md duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] focus:border-primary-solid";
+// Height comes from the thumbnails now. It used to be a flat `min-h-[254px]`
+// on top of another 250px inside, so a field holding one small image
+// reserved close to 300px of the form for mostly empty space.
+// One fixed height for the whole zone — 126px of preview row, 34px of hint,
+// and the padding between. Pinned on the root rather than on the children
+// because the hint reflows once files exist ("Drag to reorder"), and any
+// content-driven height makes a filled field taller than the same field
+// empty. Extra thumbnails scroll horizontally instead of growing it.
+const dropZoneClasses = "box-border relative pt-[2px] h-[172px] items-center border border-transparent outline-none rounded-md duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] focus:border-primary-solid";
 const disabledClasses = fieldBackgroundDisabledMixin;
 const nonActiveDropClasses = fieldBackgroundHoverMixin
 const activeDropClasses = "pt-0 border-2 border-solid"
@@ -58,6 +66,7 @@ export function StorageUploadFieldBinding({
                                               minimalistView,
                                               property,
                                               includeDescription,
+                                              hideLabel,
                                               context,
                                               isSubmitting
                                           }: FieldProps<StringProperty | ArrayProperty>) {
@@ -98,7 +107,7 @@ export function StorageUploadFieldBinding({
 
         <>
 
-            {!minimalistView &&
+            {!minimalistView && !hideLabel &&
                 <LabelWithIconAndTooltip
                     propertyKey={propertyKey}
                     icon={getIconForProperty(property, "small")}
@@ -214,7 +223,12 @@ function SortableStorageItem({
             style={style}
             {...attributes}
             {...listeners}
-            className={cls("rounded-md m-1")}
+            // No vertical margin: the strip already pads itself, and `m-1` made
+            // each item 8px taller than the row's content box — enough to make a
+            // field holding one image scroll vertically behind a hidden
+            // scrollbar. `shrink-0` keeps thumbnails square once there are more
+            // of them than fit across.
+            className={cls("rounded-md shrink-0")}
             tabIndex={-1}
         >
             {child}
@@ -310,9 +324,15 @@ function FileDropComponent({
                 })}
         >
             <div
-                className={cls("flex items-center p-1 px-4 no-scrollbar",
-                    multipleFilesSupported && internalValue.length ? "overflow-auto" : "",
-                    multipleFilesSupported && internalValue.length ? "min-h-[180px]" : "min-h-[250px]"
+                className={cls("flex items-center gap-2 p-1 px-3 no-scrollbar",
+                    // Horizontal only. `overflow-auto` scrolls both axes, so any
+                    // pixel of vertical overflow turned the field into a
+                    // scrollable box with nothing visible to scroll to.
+                    multipleFilesSupported && internalValue.length ? "overflow-x-auto overflow-y-hidden" : "",
+                    // A fixed height, not a minimum: the 118px preview overflowed
+                    // a `min-h`, so a field with a file stood taller than the same
+                    // field empty. 126px is the preview plus its padding.
+                    "h-[126px]"
                 )}
             >
                 <input
@@ -339,9 +359,12 @@ function FileDropComponent({
             </div>
 
             <div
-                className="flex-grow min-h-[38px] box-border m-2 text-center">
+                // Two lines' worth, fixed: the hint gains "Drag to reorder" once
+                // the field holds something, and a reflow there put the filled
+                // state 25px taller than the empty one.
+                className="box-border mx-3 mb-2.5 h-[34px] flex items-center justify-center text-center">
                 <Typography align={"center"}
-                            variant={"label"}
+                            variant={"caption"}
                             className={disabled ? "text-surface-accent-600 dark:text-surface-accent-500" : ""}>
                     {helpText}
                 </Typography>

package/src/form/field_bindings/SwitchFieldBinding.tsx

@@ -27,7 +27,8 @@ export const SwitchFieldBinding = function SwitchFieldBinding({
                                                                   disabled,
                                                                   size = "large",
                                                                   property,
-                                                                  includeDescription
+                                                                  includeDescription,
+                                                                  hideLabel
                                                               }: FieldProps<BooleanProperty>) {
 
     useClearRestoreValue({
@@ -44,8 +45,11 @@ export const SwitchFieldBinding = function SwitchFieldBinding({
                     value={value as boolean | null}
                     onValueChange={(v) => setValue(v)}
                     error={showError}
-                    className={property.admin?.widthPercentage !== undefined ? "mt-8" : undefined}
-                    label={<LabelWithIcon
+                    // The control is `justify-between`, so with the label lifted
+                    // out the switch would drift to the far edge of an otherwise
+                    // empty box. Anchor it to the start instead.
+                    position={hideLabel ? "start" : undefined}
+                    label={hideLabel ? undefined : <LabelWithIcon
                         icon={getIconForProperty(property, "small")}
                         required={property.validation?.required}
                         title={property.name ?? propertyKey}/>}

package/src/form/field_bindings/TextFieldBinding.tsx

@@ -36,6 +36,7 @@ export function TextFieldBinding<T extends string | number>({
                                                                 autoFocus,
                                                                 property,
                                                                 includeDescription,
+                                                                hideLabel,
                                                                 size = "large"
                                                             }: FieldProps<StringProperty | NumberProperty>) {
 
@@ -85,12 +86,17 @@ export function TextFieldBinding<T extends string | number>({
         else if (property.admin?.urlPreview) inputType = "url";
     }
 
-    const label = (
-        <LabelWithIcon
-            icon={getIconForProperty(property, "small")}
-            required={property.validation?.required || property.isId === true}
-            title={property.name ?? propertyKey}/>
-    );
+    // `undefined` rather than an empty element: TextField and the multiline box
+    // both reserve a label row whenever `label` is truthy, so a null-rendering
+    // element would leave the gap behind without the text.
+    const label = hideLabel
+        ? undefined
+        : (
+            <LabelWithIcon
+                icon={getIconForProperty(property, "small")}
+                required={property.validation?.required || property.isId === true}
+                title={property.name ?? propertyKey}/>
+        );
     return (<>
             <PropertyIdCopyTooltip propertyKey={propertyKey}>
                 {isMultiline ? (
@@ -98,20 +104,20 @@ export function TextFieldBinding<T extends string | number>({
                         "rounded-md relative max-w-full min-h-[64px]",
                         fieldBackgroundMixin,
                         fieldBackgroundHoverMixin,
-                        showError && error ? "border border-red-500 dark:border-red-600" : "",
-                        property.admin?.widthPercentage !== undefined ? "mt-8" : undefined
+                        showError && error ? "border border-red-500 dark:border-red-600" : ""
                     )}>
-                        <div
+                        {label && <div
                             className="pointer-events-none absolute top-1 text-xs font-medium px-3 text-text-secondary dark:text-text-secondary-dark">
                             {label}
-                        </div>
+                        </div>}
                         <TextareaAutosize
                             value={displayValue}
                             onChange={onChange}
                             autoFocus={autoFocus}
                             disabled={disabled}
                             className={cls(
-                                "rounded-md resize-none w-full outline-none p-[32px] text-base bg-transparent min-h-[64px] px-3 pt-8",
+                                "rounded-md resize-none w-full outline-none text-base bg-transparent min-h-[64px] px-3",
+                                label ? "pt-8 pb-2" : "py-2",
                                 disabled && "outline-none opacity-50 text-surface-accent-600 dark:text-surface-accent-500",
                                 showError && error ? "text-red-500 dark:text-red-600" : ""
                             )}
@@ -131,11 +137,7 @@ export function TextFieldBinding<T extends string | number>({
                         value={displayValue}
                         onChange={onChange}
                         autoFocus={autoFocus}
-                        className={property.admin?.widthPercentage !== undefined ? "mt-8" : undefined}
-                        label={<LabelWithIcon
-                            icon={getIconForProperty(property, "small")}
-                            required={property.validation?.required || property.isId === true}
-                            title={property.name ?? propertyKey}/>}
+                        label={label}
                         type={inputType}
                         disabled={disabled}
                         endAdornment={

package/src/form/field_bindings/UserSelectFieldBinding.tsx

@@ -30,6 +30,7 @@ export function UserSelectFieldBinding({
                                            touched,
                                            property,
                                            includeDescription,
+                                           hideLabel,
                                            size = "large"
                                        }: UserSelectProps) {
 
@@ -37,14 +38,14 @@ export function UserSelectFieldBinding({
 
     return (
         <>
-            <PropertyIdCopyTooltip propertyKey={propertyKey}>
+            {!hideLabel && <PropertyIdCopyTooltip propertyKey={propertyKey}>
                 <LabelWithIcon
                     icon={getIconForProperty(property, "small")}
                     required={property.validation?.required}
                     title={property.name}
                     className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5 my-0"}
                 />
-            </PropertyIdCopyTooltip>
+            </PropertyIdCopyTooltip>}
 
             <UserSelector
                 value={value as string | null | undefined}

package/src/form/field_bindings/VectorFieldBinding.tsx

@@ -37,6 +37,7 @@ export function VectorFieldBinding({
     autoFocus,
     property,
     includeDescription,
+    hideLabel,
     size = "large"
 }: FieldProps<VectorProperty>) {
     const isVectorObject = (val: unknown): val is { value: number[] } => {
@@ -86,7 +87,7 @@ export function VectorFieldBinding({
         });
     };
 
-    const label = (
+    const label = hideLabel ? null : (
         <LabelWithIcon
             icon={getIconForProperty(property, "small")}
             required={property.validation?.required}

package/src/hooks/navigation/useBuildUrlController.tsx

@@ -2,7 +2,7 @@ import type { UrlController, NavigateOptions } from "@rebasepro/admin-types";
 import { useCallback, useMemo } from "react";
 import { removeInitialAndTrailingSlashes, resolveCollectionPathIds } from "@rebasepro/app";
 import { CollectionRegistryController } from "@rebasepro/types";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 
 export function useBuildUrlController(props: {
     basePath: string,

package/src/hooks/navigation/useTopLevelNavigation.ts

@@ -6,7 +6,7 @@ import { deepEqual as equal } from "fast-equals";
 import { CollectionRegistryController } from "@rebasepro/types";
 import { CollectionRegistry } from "@rebasepro/common";
 
-import { computeNavigationGroups, getGroup, NAVIGATION_ADMIN_GROUP_NAME, NAVIGATION_DEFAULT_GROUP_NAME } from "./utils";
+import { computeNavigationGroups, getGroup, isBottomPinnedGroupName, NAVIGATION_ADMIN_GROUP_NAME, NAVIGATION_DEFAULT_GROUP_NAME } from "./utils";
 
 export type UseTopLevelNavigationProps = {
     collections: AdminCollection[];
@@ -178,10 +178,18 @@ export function useTopLevelNavigation(
             }, [] as NavigationEntry[])
         ];
 
-        const groupOrderValue = (groupName?: string): number => {
-            if (groupName === NAVIGATION_ADMIN_GROUP_NAME || groupName === "Settings" || groupName === "Admin") return 1;
-            return 0;
-        };
+        // Groups that sink to the bottom. Two sources, because the string
+        // comparison predates the flag and apps depend on it: the names in
+        // `NAVIGATION_BOTTOM_GROUP_NAMES`, and any group holding a view that
+        // asked for it — which is the only one of the two that survives the
+        // group being renamed or translated.
+        const pinnedGroups = new Set<string>();
+        for (const view of [...(views ?? []), ...(adminViews ?? [])]) {
+            if (view.pinToBottom) pinnedGroups.add(getGroup(view));
+        }
+
+        const groupOrderValue = (groupName?: string): number =>
+            (isBottomPinnedGroupName(groupName) || (groupName !== undefined && pinnedGroups.has(groupName))) ? 1 : 0;
 
         const usedViewsOrder = viewsOrder ?? navigationEntriesOrder;
         navigationEntries = navigationEntries.sort((a, b) => {
@@ -218,8 +226,11 @@ export function useTopLevelNavigation(
         ];
 
         const uniqueGroupsArray = [...new Set(allDefinedGroups)];
-        const lastGroups = uniqueGroupsArray.filter(g => g === NAVIGATION_ADMIN_GROUP_NAME || g === "Settings" || g === "Admin");
-        const otherGroups = uniqueGroupsArray.filter(g => g !== NAVIGATION_ADMIN_GROUP_NAME && g !== "Settings" && g !== "Admin");
+        // Same rule the entry sort uses — read through `groupOrderValue` rather
+        // than repeated inline, so the drawer's group order and the entries
+        // inside it cannot disagree about which groups are last.
+        const lastGroups = uniqueGroupsArray.filter(g => groupOrderValue(g) === 1);
+        const otherGroups = uniqueGroupsArray.filter(g => groupOrderValue(g) === 0);
         const uniqueGroups = [...otherGroups, ...lastGroups] as string[];
 
         const computedTopLevelNav = {

package/src/hooks/navigation/utils.ts

@@ -7,6 +7,26 @@ import { deepEqual as equal } from "fast-equals";
 export const NAVIGATION_DEFAULT_GROUP_NAME = "Views";
 export const NAVIGATION_ADMIN_GROUP_NAME = "Admin";
 
+/**
+ * Group names that sink to the bottom of the drawer on their name alone.
+ *
+ * A magic string, and it stays one for compatibility: apps have been relying on
+ * `group: "Settings"` landing last since before there was a flag, and taking it
+ * away would silently reshuffle their navigation.
+ *
+ * It is a bad way to ask for the behaviour, though — it is invisible from the
+ * `group?: string` type, and it is defeated by the most ordinary edit there is:
+ * translating the label. `group: "Ajustes"` is the same group to a reader and a
+ * different one to this comparison, so the ordering just quietly stops
+ * happening. Set {@link AppView.pinToBottom} instead, which says so.
+ */
+export const NAVIGATION_BOTTOM_GROUP_NAMES = ["Admin", "Settings"] as const;
+
+/** Whether a group sinks to the bottom by virtue of its name. @see NAVIGATION_BOTTOM_GROUP_NAMES */
+export function isBottomPinnedGroupName(groupName?: string): boolean {
+    return groupName !== undefined && (NAVIGATION_BOTTOM_GROUP_NAMES as readonly string[]).includes(groupName);
+}
+
 export function getGroup(collectionOrView: AdminCollection | AppView) {
     const trimmed = collectionOrView.group?.trim();
     if (!trimmed || trimmed === "") {

package/src/hooks/useBuildSideDialogsController.tsx

@@ -1,9 +1,9 @@
 import type { SideDialogPanelProps, SideDialogsController } from "../hooks/useSideDialogsController";
 import { useCallback, useEffect, useRef, useState, useMemo } from "react";
-import { useLocation, useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router";
 ;
 import { deepEqual as equal } from "fast-equals"
-import { Location } from "react-router-dom";
+import { Location } from "react-router";
 
 interface SideDialogLocationState {
     base_location?: Location;