+ {
+ setSelectedFile( null );
+ if ( fileInputRef.current ) {
+ fileInputRef.current.value = '';
+ }
+ } }
+ />
+
+ ) }
+
+ );
+};
diff --git a/src/components/file-preview/file-preview.tsx b/src/components/file-preview/file-preview.tsx
new file mode 100644
index 00000000..5877d6fb
--- /dev/null
+++ b/src/components/file-preview/file-preview.tsx
@@ -0,0 +1,135 @@
+import { cn, formatFileSize } from '@/utilities/functions';
+import { File, ImageOff, Trash } from 'lucide-react';
+
+export type FilePreviewFile =
+ | File
+ | { name: string; url: string; type: string; size: number };
+
+export interface FilePreviewProps {
+ /** The file to display. It can be a File object or an object with name, url, type, and size properties. */
+ file: FilePreviewFile;
+
+ /** Function called when the file is removed. The parameter is the selected file object, which can be a File object or an object with name, url, type, and size properties or null. */
+ onRemove: ( selectedFile: FilePreviewFile ) => void;
+
+ /** Indicates whether the file preview is disabled. */
+ disabled?: boolean;
+
+ /** The size of the file preview. */
+ size?: 'sm' | 'md' | 'lg';
+
+ /** Indicates whether the file preview has an error. */
+ error?: boolean;
+}
+
+const commonFilePreviewClasses = {
+ sm: {
+ image: 'w-8 h-8',
+ name: 'text-xs',
+ fileIcon: 'h-8',
+ uploadText: 'text-xs',
+ },
+ md: {
+ image: 'w-10 h-10',
+ name: 'text-sm',
+ fileIcon: 'h-10',
+ uploadText: 'text-xs',
+ },
+ lg: {
+ image: 'w-10 h-10',
+ name: 'text-sm',
+ fileIcon: 'h-10',
+ uploadText: 'text-xs',
+ },
+};
+
+export const FilePreview = ( {
+ file,
+ onRemove,
+ error,
+ disabled,
+ size = 'sm',
+}: FilePreviewProps ) => {
+ const renderFileIcon = () => (
+
+
+
+ );
+};
+
+export default FilePreview;
diff --git a/src/components/file-preview/index.ts b/src/components/file-preview/index.ts
new file mode 100644
index 00000000..ff864038
--- /dev/null
+++ b/src/components/file-preview/index.ts
@@ -0,0 +1 @@
+export { default } from './file-preview';
diff --git a/src/components/index.ts b/src/components/index.ts
index f3a5bdef..43ff2878 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -40,3 +40,4 @@ export { default as PieChart } from './pie-chart';
export { default as AreaChart } from './area-chart';
export { default as Dropzone } from './dropzone';
export { default as Table } from './table';
+export { default as FilePreview } from './file-preview';
diff --git a/src/components/input/input.tsx b/src/components/input/input.tsx
index 9de9b45d..8357b7fb 100644
--- a/src/components/input/input.tsx
+++ b/src/components/input/input.tsx
@@ -36,7 +36,7 @@ export declare interface InputProps {
disabled?: boolean;
/** Function called when the input value changes. */
- onChange?: ( value: string | null ) => void;
+ onChange?: ( value: string | FileList | null ) => void;
/** Indicates whether the input has an error state. */
error?: boolean;
@@ -77,7 +77,10 @@ export const InputComponent = (
label = '',
...props
}: InputProps &
- Omit
+ { file.type.startsWith( 'image' ) ? (
+
+
+ { error ? (
+ 
+ ) }
+
+ ) : (
+ renderFileIcon()
+ ) }
+
+
+
+ { file.name }
+
+ { file.size && file.size > 0 && (
+
+ { formatFileSize( file.size ) }
+
+ ) }
+
+ { ! disabled && (
+
+ ) }
+ (
) as SearchBoxComponent;
SearchBox.displayName = 'SearchBox';
-// Define props for SearchBoxInput
-export interface SearchBoxInputProps extends BaseSearchBoxProps {
- /** Type of the input (e.g., text, search). */
- type?: string;
-
- /** Placeholder text for the input. */
- placeholder?: string;
-
- /** Style variant of the input. */
- variant?: 'primary' | 'secondary' | 'ghost';
-
- /** Whether the input is disabled. */
- disabled?: boolean;
-
- /** Callback for input changes. */
- onChange?: ( value: string ) => void;
-
- /** Child components to be rendered. */
- children?: ReactNode;
-}
-
export const SearchBoxInput = forwardRef(
(
{
className,
type = 'text',
placeholder = 'Search...',
- variant = 'primary',
disabled = false,
onChange = () => {},
...props
@@ -232,13 +330,18 @@ export const SearchBoxInput = forwardRef(
) => {
const {
size,
- onOpenChange,
refs,
getReferenceProps,
searchTerm,
setSearchTerm,
+ open,
+ setActiveIndex,
+ listRef,
+ onOpenChange,
+ variant,
} = useSearchContext();
const badgeSize = size === 'lg' ? 'sm' : 'xs';
+
const handleChange = ( event: React.ChangeEvent ) => {
const newValue = event.target.value;
setSearchTerm!( newValue );
@@ -253,18 +356,61 @@ export const SearchBoxInput = forwardRef(
}
};
+ const handleFocus = () => {
+ if ( disabled || typeof onOpenChange !== 'function' ) {
+ return;
+ }
+ if ( searchTerm?.trim() ) {
+ onOpenChange!( true ); // Open the dropdown on focus if input is not empty
+ }
+ };
+
+ const handleKeyDown = ( event: React.KeyboardEvent ) => {
+ if ( disabled ) {
+ return;
+ }
+
+ // Do not open dropdown on arrow keys
+ if ( event.key === 'ArrowDown' || event.key === 'ArrowUp' ) {
+ // Only navigate if dropdown is already open
+ if ( open ) {
+ event.preventDefault();
+ if ( event.key === 'ArrowDown' ) {
+ // Navigate to first item if none selected, otherwise listNavigation will handle it
+ setActiveIndex!( ( prev ) => ( prev === null ? 0 : prev ) );
+ } else if ( event.key === 'ArrowUp' ) {
+ // Navigate to last item if none selected, otherwise listNavigation will handle it
+ setActiveIndex!( ( prev ) => {
+ // Get the length of the list to select the last item
+ const listLength = listRef?.current?.length || 0;
+ return prev === null && listLength > 0
+ ? listLength - 1
+ : prev;
+ } );
+ }
+ }
+ // Do not open the dropdown
+ return;
+ }
+
+ if ( event.key === 'Escape' ) {
+ onOpenChange!( false );
+ }
+ };
+
return (
+
+
);
};
SearchBoxContent.displayName = 'SearchBox.Content';
-// Define props for SearchBoxList
-export interface SearchBoxListProps {
- /** Whether to filter children based on the search term. */
- filter?: boolean;
+export const SearchBoxPortal = ( {
+ children,
+ id,
+ root,
+}: SearchBoxPortalProps ) => {
+ return (
+
+ { children }
+
+ );
+};
+SearchBoxPortal.displayName = 'SearchBox.Portal';
+// Define props for SearchBoxList
+export interface SearchBoxListProps extends CommonSearchBoxProps {
/** Child components to be rendered. */
children: ReactNode;
}
export const SearchBoxList = ( {
- filter = true,
children,
+ className,
}: SearchBoxListProps ) => {
- const { searchTerm, isLoading } = useSearchContext();
+ const { searchTerm, isLoading, listRef, filter = true } = useSearchContext();
if ( ! filter ) {
- return
+
+ );
}
const filteredChildren = Children.toArray( children )
.map( ( child ) => {
@@ -409,17 +563,19 @@ export const SearchBoxList = ( {
return
+
);
};
SearchBoxList.displayName = 'SearchBox.List';
@@ -428,10 +584,14 @@ SearchBoxList.displayName = 'SearchBox.List';
export interface SearchBoxEmptyProps {
/** Content to display when there are no results. */
children?: ReactNode;
+
+ /** Additional class names for styling. */
+ className?: string;
}
export const SearchBoxEmpty = ( {
children = 'No results found.',
+ className,
}: SearchBoxEmptyProps ) => {
const { size } = useSearchContext();
return (
@@ -439,7 +599,8 @@ export const SearchBoxEmpty = ( {
className={ cn(
'flex justify-center items-center',
sizeClassNames.item[ size! ],
- 'text-text-tertiary p-4'
+ 'text-text-tertiary p-4',
+ className
) }
>
{ children }
@@ -470,7 +631,7 @@ export const SearchBoxGroup = ( { heading, children }: SearchBoxGroupProps ) =>
(
ref={ ref }
className={ cn(
textSizeClassNames[ size! ],
- 'flex-grow font-medium bg-transparent border-none outline-none border-transparent focus:ring-0 py-0',
- disabled
- ? disabledClassNames[ variant ]
- : [
- 'text-field-placeholder focus-within:text-field-input group-hover:text-field-input',
- 'placeholder:text-field-placeholder',
- ],
- className
+ 'flex-grow font-medium bg-transparent border-none outline-none border-transparent focus:ring-0 p-0 min-h-fit',
+ disabled &&
+ 'text-field-placeholder focus-within:text-field-input group-hover:text-field-input placeholder:text-field-placeholder'
) }
disabled={ disabled }
value={ searchTerm }
onChange={ handleChange }
+ onFocus={ handleFocus }
+ onKeyDown={ handleKeyDown }
placeholder={ placeholder }
// Omit custom props that are not valid for input
{ ...omit( props, [
@@ -302,10 +445,11 @@ export const SearchBoxInput = forwardRef(
] ) }
/>
);
@@ -318,24 +462,16 @@ export interface SearchBoxContentProps {
/** Additional class names for styling. */
className?: string;
- /** Root element where the dropdown will be rendered. */
- dropdownPortalRoot?: HTMLElement | null;
-
- /** Id of the dropdown portal where the dropdown will be rendered. */
- dropdownPortalId?: string;
-
/** Child components to be rendered inside the dropdown. */
children: ReactNode;
}
export const SearchBoxContent = ( {
className,
- dropdownPortalRoot = null, // Root element where the dropdown will be rendered.
- dropdownPortalId = '', // Id of the dropdown portal where the dropdown will be rendered.
children,
...props
}: SearchBoxContentProps ) => {
- const { size, open, refs, floatingStyles, getFloatingProps } =
+ const { size, open, refs, floatingStyles, getFloatingProps, context } =
useSearchContext();
if ( ! open ) {
@@ -343,14 +479,18 @@ export const SearchBoxContent = ( {
}
return (
-
{ children }
- { children }
;
+ return (
+ { children }
+
- { filteredChildren.some(
- ( child ) =>
- React.isValidElement( child ) &&
- child.type !== SearchBoxSeparator
- ) ? (
- filteredChildren
- ) : (
-
+
+ { filteredChildren.some(
+ ( child ) =>
+ React.isValidElement( child ) &&
+ child.type !== SearchBoxSeparator
+ ) ? (
+ filteredChildren
+ ) : (
+
+
{ heading }
@@ -492,19 +653,68 @@ export interface SearchBoxItemProps {
/** Child components to be rendered. */
children: ReactNode;
+
+ /** On click handler. */
+ onClick?: () => void;
}
-export const SearchBoxItem = forwardRef(
- ( { className, icon, children, ...props }, ref ) => {
- const { size } = useSearchContext();
+export const SearchBoxItem = forwardRef(
+ ( { className, icon, children, onClick, ...props }, ref ) => {
+ const {
+ size,
+ setSearchTerm,
+ clearAfterSelect,
+ getItemProps,
+ activeIndex,
+ onOpenChange,
+ closeAfterSelect,
+ } = useSearchContext();
+ const { ref: itemRef, index } = useListItem();
+
+ // Combine the refs
+ const combinedRef = ( node: HTMLButtonElement | null ) => {
+ if ( typeof ref === 'function' ) {
+ ref( node );
+ } else if ( ref ) {
+ ref.current = node;
+ }
+ itemRef( node );
+ };
+
+ const isActive = activeIndex === index;
+
+ const handleClick = () => {
+ if ( typeof onClick === 'function' ) {
+ onClick();
+ }
+
+ if ( clearAfterSelect ) {
+ setSearchTerm!( '' );
+ }
+
+ if ( closeAfterSelect ) {
+ onOpenChange!( false );
+ }
+ };
+
return (
-
{ icon && (
(
) }
{ children }
-
+
);
}
);
@@ -589,5 +798,5 @@ SearchBox.List = SearchBoxList;
SearchBox.Empty = SearchBoxEmpty;
SearchBox.Group = SearchBoxGroup;
SearchBox.Item = SearchBoxItem;
-
+SearchBox.Portal = SearchBoxPortal;
export default SearchBox;
diff --git a/src/components/search/styles.ts b/src/components/search/styles.ts
index 02b48208..191a0b59 100644
--- a/src/components/search/styles.ts
+++ b/src/components/search/styles.ts
@@ -43,10 +43,10 @@ export const sizeClassNames = {
};
export const variantClassNames = {
primary:
- 'bg-field-primary-background outline outline-1 outline-field-border hover:outline-border-strong',
+ 'bg-field-primary-background outline outline-1 outline-field-border hover:outline-border-strong focus-within:outline-focus-border focus-within:hover:outline-focus-border',
secondary:
- 'bg-field-secondary-background outline outline-1 outline-field-border hover:outline-border-strong',
- ghost: 'bg-field-secondary-background outline outline-1 outline-transparent',
+ 'bg-field-secondary-background outline outline-1 outline-field-border hover:outline-border-strong focus-within:outline-focus-border focus-within:hover:outline-focus-border',
+ ghost: 'bg-field-secondary-background outline outline-1 outline-transparent focus-within:outline-focus-border',
};
export const iconClasses =
@@ -55,7 +55,7 @@ export const iconClasses =
export const disabledClassNames = {
ghost: 'cursor-not-allowed text-text-disabled placeholder:text-text-disabled',
primary:
- 'border-border-disabled hover:border-border-disabled bg-field-background-disabled cursor-not-allowed text-text-disabled placeholder:text-text-disabled',
+ 'outline-border-disabled hover:outline-border-disabled bg-field-background-disabled cursor-not-allowed text-text-disabled placeholder:text-text-disabled',
secondary:
- 'border-border-disabled hover:border-border-disabled cursor-not-allowed text-text-disabled placeholder:text-text-disabled',
+ 'outline-border-disabled hover:outline-border-disabled cursor-not-allowed text-text-disabled placeholder:text-text-disabled',
};
diff --git a/version.json b/version.json
index 991287a5..3b7733d0 100644
--- a/version.json
+++ b/version.json
@@ -1,3 +1,3 @@
{
- "force-ui": "1.4.2"
+ "force-ui": "1.5.0"
}