@erxes/ui 3.2.22-1 → 3.2.25-2

package/dist/components/combobox.d.ts

@@ -18,6 +18,14 @@ export declare const ComboboxContent: React.ForwardRefExoticComponent<Omit<Omit<
 export declare const ComboboxCheck: React.ForwardRefExoticComponent<Omit<import("@tabler/icons-react").IconProps & React.RefAttributes<import("@tabler/icons-react").Icon>, "ref"> & {
     checked?: boolean;
 } & React.RefAttributes<import("@tabler/icons-react").Icon>>;
+export declare const ComboboxChipTrigger: ({ label, children, className, disabled, onClear, clearLabel, }: {
+    label?: string;
+    children: React.ReactNode;
+    className?: string;
+    disabled?: boolean;
+    onClear?: () => void;
+    clearLabel?: string;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const ComboboxFetchMore: React.ForwardRefExoticComponent<Omit<Omit<{
     children?: React.ReactNode;
 } & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
@@ -53,6 +61,14 @@ export declare const Combobox: {
     Check: React.ForwardRefExoticComponent<Omit<import("@tabler/icons-react").IconProps & React.RefAttributes<import("@tabler/icons-react").Icon>, "ref"> & {
         checked?: boolean;
     } & React.RefAttributes<import("@tabler/icons-react").Icon>>;
+    ChipTrigger: ({ label, children, className, disabled, onClear, clearLabel, }: {
+        label?: string;
+        children: React.ReactNode;
+        className?: string;
+        disabled?: boolean;
+        onClear?: () => void;
+        clearLabel?: string;
+    }) => import("react/jsx-runtime").JSX.Element;
     FetchMore: React.ForwardRefExoticComponent<Omit<Omit<{
         children?: React.ReactNode;
     } & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@erxes/ui",
-  "version": "3.2.22-1",
+  "version": "3.2.25-2",
   "description": "erxes design system: UI primitives, business modules, hooks and shared frontend state",
   "license": "AGPL-3.0-only",
   "repository": {

package/src/components/combobox.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Button } from './button';
 import { cn } from '../lib/utils';
-import { IconCheck, IconChevronDown } from '@tabler/icons-react';
+import { IconCheck, IconChevronDown, IconX } from '@tabler/icons-react';
 import { Popover } from './popover';
 import { Command } from './command';
 import { useInView } from 'react-intersection-observer';
@@ -139,6 +139,72 @@ export const ComboboxCheck = React.forwardRef<
 
 ComboboxCheck.displayName = 'ComboboxCheck';
 
+export const ComboboxChipTrigger = ({
+  label,
+  children,
+  className,
+  disabled,
+  onClear,
+  clearLabel,
+}: {
+  label?: string;
+  children: React.ReactNode;
+  className?: string;
+  disabled?: boolean;
+  onClear?: () => void;
+  clearLabel?: string;
+}) => {
+  const trigger = (
+    <ComboboxTriggerBase
+      className={cn(
+        'group w-fit max-w-sm h-7 rounded p-0 gap-0 overflow-hidden',
+        'data-[state=open]:border-primary/40',
+        className,
+      )}
+      disabled={disabled}
+    >
+      {label && (
+        <span className="flex h-full shrink-0 items-center whitespace-nowrap px-3 text-muted-foreground bg-muted/40 border-r">
+          {label}
+        </span>
+      )}
+      <span className="flex min-w-0 items-center gap-1.5 pl-3 pr-2.5 font-medium text-foreground">
+        <span className="flex min-w-0 items-center gap-1.5 overflow-hidden whitespace-nowrap [&_svg]:size-4 [&_svg]:shrink-0">
+          {children}
+        </span>
+        {onClear ? (
+          <span className="size-5 shrink-0" />
+        ) : (
+          <IconChevronDown className="size-3.5 shrink-0 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" />
+        )}
+      </span>
+    </ComboboxTriggerBase>
+  );
+
+  if (!onClear) {
+    return trigger;
+  }
+
+  return (
+    <div className="relative w-fit max-w-sm">
+      {trigger}
+      <Button
+        variant="ghost"
+        size="icon"
+        aria-label={clearLabel}
+        title={clearLabel}
+        className="absolute right-2 top-1/2 size-5 -translate-y-1/2 p-0 text-muted-foreground"
+        onClick={(e) => {
+          e.stopPropagation();
+          onClear();
+        }}
+      >
+        <IconX />
+      </Button>
+    </div>
+  );
+};
+
 export const ComboboxFetchMore = React.forwardRef<
   React.ElementRef<typeof Command.Item>,
   React.ComponentPropsWithoutRef<typeof Command.Item> & {
@@ -207,6 +273,7 @@ export const Combobox = {
   Value: ComboboxValue,
   Content: ComboboxContent,
   Check: ComboboxCheck,
+  ChipTrigger: ComboboxChipTrigger,
   FetchMore: ComboboxFetchMore,
   Empty: ComboboxEmpty,
 };

package/src/components/sidebar/panel.tsx

@@ -32,6 +32,14 @@ const findSidebarPanelSlot = (panel: HTMLElement | null) => {
   return null;
 };
 
+const SidebarPanelInnerTriggerHiddenContext = React.createContext(false);
+
+const isSlotAbovePanel = (slot: HTMLElement, panel: HTMLElement | null) =>
+  Boolean(
+    panel &&
+      slot.compareDocumentPosition(panel) & Node.DOCUMENT_POSITION_FOLLOWING,
+  );
+
 const useSidebarPanelSlot = (
   panelRef: React.RefObject<HTMLDivElement | null>,
   open: boolean,
@@ -40,13 +48,9 @@ const useSidebarPanelSlot = (
   const [claimed, setClaimed] = React.useState(false);
 
   React.useLayoutEffect(() => {
-    if (open) {
-      return;
-    }
-
     const found = findSidebarPanelSlot(panelRef.current);
 
-    if (!found) {
+    if (!found || (open && !isSlotAbovePanel(found, panelRef.current))) {
       setSlot(null);
       setClaimed(false);
       return;
@@ -68,19 +72,24 @@ const useSidebarPanelSlot = (
     };
   }, [open, panelRef]);
 
-  return { slot: open ? null : slot, claimed };
+  return { slot, claimed };
 };
 
 export const SidebarPanelTrigger = React.forwardRef<
   React.ElementRef<typeof Button>,
   React.ComponentProps<typeof Button>
 >(({ className, onClick, ...props }, ref) => {
+  const hidden = React.useContext(SidebarPanelInnerTriggerHiddenContext);
   const [open, setOpen] = useAtom(sidebarPanelOpenState);
   const { t } = useTranslation('common', { keyPrefix: 'navigation' });
   const toggleLabel = open
     ? t('collapse-sidebar', 'Collapse sidebar')
     : t('expand-sidebar', 'Expand sidebar');
 
+  if (hidden) {
+    return null;
+  }
+
   return (
     <Button
       ref={ref}
@@ -116,6 +125,7 @@ export const SidebarPanel = React.forwardRef<
   const open = useAtomValue(sidebarPanelOpenState);
   const [panelRef, setRefs] = useComposedRef(ref);
   const { slot, claimed } = useSidebarPanelSlot(panelRef, open);
+  const triggerInSlot = Boolean(slot && claimed);
 
   return (
     <div
@@ -138,28 +148,27 @@ export const SidebarPanel = React.forwardRef<
         </Portal.Root>
       )}
       {!open && !slot && (
-        <div className="absolute top-2 left-2 z-20">
+        <div className="absolute top-2.5 left-2 z-20">
           <SidebarPanelTrigger className="size-7 border bg-background shadow-xs" />
         </div>
       )}
-      {open && label && (
-        <div className="flex shrink-0 items-center gap-1 pt-3 pr-3 pl-4">
-          <span className="min-w-0 flex-1 truncate px-2 font-mono text-xs font-semibold uppercase text-accent-foreground">
-            {label}
-          </span>
-          {actions}
-          <SidebarPanelTrigger />
-        </div>
-      )}
-      <div
-        hidden={!open}
-        className={cn(
-          'flex min-h-0 flex-1 flex-col overflow-y-auto',
-          label && '[&>[data-sidebar=group]:first-child]:pt-0',
+      <SidebarPanelInnerTriggerHiddenContext.Provider value={triggerInSlot}>
+        {open && label && (
+          <div className="flex h-12 shrink-0 items-center gap-1 px-2">
+            <span className="min-w-0 flex-1 truncate px-2 text-sm font-medium">
+              {label}
+            </span>
+            {actions}
+            <SidebarPanelTrigger className="size-8" />
+          </div>
         )}
-      >
-        {children}
-      </div>
+        <div
+          hidden={!open}
+          className="flex min-h-0 flex-1 flex-col overflow-y-auto"
+        >
+          {children}
+        </div>
+      </SidebarPanelInnerTriggerHiddenContext.Provider>
     </div>
   );
 });