@erxes/ui 3.2.25-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.25-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,
 };