hsuanyi-chou / shadcn-ui-expansions

More components built on top of shadcn-ui.

shadcn-ui expansions

Introduction

This is built on top of shadcn/ui and includes many useful components such as multiple selector, loading button, infinite scroll and more.

The same as shadcn/ui, all components are free to use for personal and commercial.

Just copy and paste to your project and customize to your needs. The code is yours.

Check it out here 👉 Demo

Components

• Autosize Textarea
• Blockquote
• Floating Label Input
• Heading With Anchor
• Infinite Scroll
• Loading Button
• Multiple Selector
• Datetime picker
• Spinner
• Scrollable tabs 🚧
• Daterange picker 🚧

Contributing

Be welcome to contribute! Here's how you can contribute:

• Open an issue if you believe you've encountered a bug.
• Make a pull request to add new features/make quality-of-life improvements/fix bugs.

_{Built by hsuanyi-chou}

License

Licensed under the MIT License.

shadcn-ui-expansions's Issues

Pass in triggerAutoSize

It would be great to be able to pass in my own triggerAutoSize and setTriggerAutoSize props to the autosize textarea component. This would allow me to manually trigger the resize if the textarea content is dynamically set. Currently, only user input changes the type, but if I have a form and set the form value, the textarea size does not change.

export type AutosizeTextAreaProps = {
  maxHeight?: number;
  minHeight?: number;
  triggerAutoSize?: string;
  setTriggerAutoSize?: React.Dispatch<React.SetStateAction<string>>;
} & React.AreaHTMLAttributes<HTMLTextAreaElement>;
export const AutosizeTextarea = ({
  maxHeight = Number.MAX_SAFE_INTEGER,
  minHeight = 52,
  className,
  onChange,
  triggerAutoSize,
  setTriggerAutoSize,
  ...props
}: AutosizeTextAreaProps) => {
  const ref = React.useRef<HTMLTextAreaElement | null>(null);
  const [_triggerAutoSize, _setTriggerAutoSize] = React.useState('');
  const triggerAutoSizeVal = triggerAutoSize || _triggerAutoSize;
  const setTriggerAutoSizeVal = setTriggerAutoSize || _setTriggerAutoSize;
  
    useAutosizeTextArea({
    textAreaRef: ref.current,
    triggerAutoSize: triggerAutoSizeVal,
    maxHeight,
    minHeight,
  });

  return (
    <textarea
      ref={ref}
      className={cn(
        'flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
        className,
      )}
      onChange={(e) => {
        setTriggerAutoSizeVal(e.target.value);
        onChange?.(e);
      }}
      {...props}
    />
  );
};

This would allow the size to be dynamically set by just passing in

const [triggerAutoSize, setTriggerAutoSize] = React.useState('');

as a prop. Then, just call setTriggerAutoSize(value) to trigger the auto-size.

MultipleSelector appears to be searching on option value and not label

I'm using MultipleSelector using defaultOptions, and setting each option value to a system generated unique identifier (UUID). When I do this, filtering for options isn't working. The list of options is displayed, but when you type anything, there are no matches. I did some testing and found the component is searching based on the option value, not the label.
This makes it necessary to set the value equal to the label, or some version of the label text. It'd be great if it instead searched based on label text.

Sample code:

const OPTIONS: Option[] = [
  { label: 'nextjs', value: '1' },
  { label: 'React', value: '2' },
  { label: 'Remix', value: '3' },
  { label: 'Vite', value: '4' },
  { label: 'Nuxt', value: '5' },
  { label: 'Vue', value: '6' },
  { label: 'Svelte', value: '7' },
  { label: 'Angular', value: '8' },
  { label: 'Ember', value: '9', disable: true },
  { label: 'Gatsby', value: '10', disable: true },
  { label: 'Astro', value: '11' },
];

        <MultipleSelector
        defaultOptions={OPTIONS}
        placeholder="Type something that does not exist in dropdowns..."
        creatable
        emptyIndicator={
          <p className="text-center text-lg leading-10 text-gray-600 dark:text-gray-400">
            no results found.
          </p>
        }
      />

Additional Customization for Multiselect

This is a great library. I'd love to see more customizations for the multi-select. The current implementation is great for a multi-select, but I think the component could work well as a more general autocomplete/combobox with more functionality than Shadcn's implementation. Would you consider adding any of the following?

1. Limiting the number of displayed items (show the first N items initially, and then show N matching items after the user enters search text)
2. Providing an option to show selected items as text instead of tags (showing the text of a single selection, or "N items selected" if there are multiple, and then show a checkmark in the dropdown list)
3. Along with suggestion 2, it would be useful to be able to switch between a combobox mode (requiring the user to select a provided option, and not allowing them to enter arbitrary input) and an autocomplete mode (allowing the user to either choose a provided option or to enter arbitrary text).
4. The form example gives a result of

{
  "frameworks": [
    {
      "label": "React",
      "value": "react"
    }
  ]
}

Compare this to Shadcn's combobox, which just gives the value:

{
  "language": "en"
}

The latter seems better, as the label is just for display, and the input value that should be submitted is just the value.

• Allow a ReactNode to be used as a label. This would allow for more customizable dropdown options.

Popover content doesn't show up when used inside accordion.

• When MultipleSelector is used inside the accordion component, the popver content doens't fully show up.

   <Accordion
          type="single"
          collapsible
          className="w-full p-2 shadow-md relative"
          defaultValue="Assist Users"
        >
          <AccordionItem value="Assist Users" className="border-none">
            <AccordionTrigger className="font-bold text-xl hover:no-underline">
              Assist Users
            </AccordionTrigger>
            <AccordionContent>

              <MultipleSelector
                defaultOptions={OPTIONS}
                placeholder="Select frameworks you like..."
                emptyIndicator={
                  <p className="text-center text-lg leading-10 text-gray-600 dark:text-gray-400">
                    no results found.
                  </p>
                }
              />
            </AccordionContent>
          </AccordionItem>
        </Accordion>
      </>

Video

Custom options in Multiple Selector

It is possible to pass it on as options with another typing or another schema or it always needs to be in this format?

Option {
  value: string;
  label: string;
  disable?: boolean;
  /** fixed option that can't be removed. */
  fixed?: boolean;
  /** Group the options by providing key. */
  [key: string]: string | boolean | undefined;
}

Existing size option not applied when using Loading Button

<Comp
  className={cn(buttonVariants({ variant, size, className }))}
  disabled={loading}
  ref={ref}
  {...props}
>
  <>
    {loading && <Loader2 className={cn('h-4 w-4 animate-spin', children && 'mr-2')} />}
    {children}
  </>
</Comp>

add a Slottable component
link: https://www.radix-ui.com/primitives/docs/utilities/slot

<Comp
  className={cn(buttonVariants({ variant, size, className }))}
  disabled={loading}
  ref={ref}
  {...props}
>
  {loading ? (
    <Slottable>
      <Loader2 className={cn('h-4 w-4 animate-spin', children && 'mr-2')} />
      {children}
    </Slottable>
  ) : (
    <Slottable>{children}</Slottable>
  )}
</Comp>

Missing license - may not be used for commercial purposes

Currently, there is no License added to the GitHub project, nor to the code, which is a shame, because we don't have permission to use it for a business project. (It could only be used under an MIT or similar license.)

Using TimePicker only on form

Hey there, i am currently testing out the TimePicker Component for a form using shadcn Form, but i can't seem to figure out what type to pass to it. i tried both Date and string but it gets error out

Recording.2024-03-18.145819.mp4

elm.focus is not a function

Uncaught (in promise) TypeError: elm.focus is not a function
focus index.esm.mjs:472
_focusInput index.esm.mjs:1979
iterateFieldsByAction index.esm.mjs:694
_focusError index.esm.mjs:2185
handleSubmit index.esm.mjs:2233
React 23
renderReactElement index.js:421
doRender index.js:579
render index.js:596
hydrate index.js:724
pageBootrap page-bootstrap.js:24
next-dev.js:25
promise callback* next-dev.js:23
NextJS 7

This error often occurred for me,

          <FormField
                control={form.control}
                name="preferred_genres"
                render={({ field: { value, ...rest } }) => (
                  <FormItem>
                    <FormControl>
                      <Multiselect
                        className="border-primary"
                        defaultOptions={GENRE_OPTIONS}
                        placeholder={t("preferred_genres")}
                        value={selectedGenres}
                        {...rest}
                      />
                    </FormControl>
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="platforms"
                render={({ field: { value, ...rest } }) => (
                  <FormItem>
                    <FormControl>
                      <Multiselect
                        className="border-primary"
                        value={selectedPlatforms}
                        {...rest}
                        defaultOptions={PLATFORM_OPTIONS}
                        placeholder={t("platforms")}
                      />
                    </FormControl>
                  </FormItem>
                )}
              />

This is how I used the component, everything worked but when submitting it the focus error would pop up.
react-hook-form/react-hook-form#9398

I am passing my states to the components because I need to set selected values I get from the backend. I would appreciate help in this regard. Thanks in advance

Usage with react-query / trpc

currently, I dont think its possible to use search with react-query / trpc with how the useSearch option works.
would appreciate if you can make an example with it, thanks!

MultiSelector not showing data with useFieldArray react-hook-form

sir, I have some problems using useFieldArray and MultiSelector in react form.
When I append a new data, the data is not appended to the array, and the MultiSelector after pressing create again is not displayed.
Please help me, below is my code

`"use client";

import React, {useEffect, useRef} from "react";
import { useForm, useFieldArray, Controller } from "react-hook-form";
import { Input } from "@/components/ui/input";
import MultipleSelector, {MultipleSelectorRef, Option} from "@/components/common/multi-select/fancy-multi-and-combobox";

interface FormItems {
variants: {
name: string;
value: any[];
}[];
}

const initialValues: FormItems = {
variants: [
{
name: "",
value: [],
},
],
};

export default function ProductNew() {
const [formData, setFormData] = React.useState(initialValues);
const inputRef = React.useRef(null);
const selectorRef = React.useRef(null);

const { register ,control, handleSubmit, setValue, getValues } = useForm<FormItems>({
    defaultValues: initialValues,
});
const { fields, append, remove } = useFieldArray({
    control,
    name: "variants",
});

const updateForm = (fieldToUpdate: any) => {
    const payload = { ...formData, ...fieldToUpdate };
    setFormData(payload);
};

const handleOnSubmit = (value: any) => {
    console.log("handleOnSubmit", value);
};




console.log("variants", formData.variants)

return (
    <div>
        <section>
            <form onSubmit={handleSubmit(handleOnSubmit)} className="w-full flex flex-col justify-between h-full my-8">
                <button type="submit" className="border px-4 py-2">Publish product</button>
                <div id="content2" className="my-5 space-y-5">
                    <ul>
                        {fields.map((item, index) => (
                            <li className="flex gap-3" key={item.id}>
                                <Input
                                    autoFocus
                                    type="text"
                                    {...register(`variants.${index}.name`)}
                                    id={`variants.${index}.name`}
                                    ref={index === fields.length - 1 ? inputRef : null}
                                    placeholder="Warm and cozy"
                                    onChange={(e) => {
                                        updateForm({
                                            variants: formData.variants.map((variant, i) => {
                                                if (i === index) {
                                                    return { ...variant, name: e.target.value };
                                                }
                                                return variant;
                                            }),
                                        });
                                    }}
                                    className="w-full"
                                    required
                                />
                                <Controller
                                    render={({ field }) => (
                                        <MultipleSelector
                                            {...field}
                                            ref={selectorRef} // Ref cần được chuyển tiếp cho component con

                                            creatable={true}
                                            value={formData.variants[index]?.value || []}
                                            onChange={(e: Option[]) => {
                                                updateForm({
                                                    variants: formData.variants.map((variant, i) => {
                                                        if (i === index) {
                                                            return { ...variant, value: e };
                                                        }
                                                        return variant;
                                                    }),
                                                });
                                            }}
                                        />
                                    )}
                                    // name={`variants.${index}.value`}
                                    {...register(`variants.${index}.value`)}
                                    control={control}
                                />
                                <button type="button" onClick={() => remove(index)}>Delete</button>
                            </li>
                        ))}
                    </ul>
                    <button
                        type="button"
                        onClick={() => {
                            append({ name: "", value: [] });

                        }}
                    >
                        append
                    </button>
                </div>
            </form>
        </section>
    </div>
);

}`

and this is result:

Multiple selector does not work inside a conditional modal component

Hello i make a website and i use these multiplse selector for select a author, publisher, category...
but if user does not open a create book pop-up modal i wanna did not render so i choose to code like this my pop-up
{createBookModal && ( <CreateBook openModal={createBookModal} closeModal={() => setCreateBookModal(false)} /> )}
But when i use like this inside my comopnent even useState and useEffect work properly bu multiple selector does not see my new data. if i use shadcn combobox its fine its work realtime. also if i change this code like this
<CreateBook openModal={createBookModal} closeModal={() => setCreateBookModal(false)} />
you see i just delete it condition after then my multiple selector work fine. and im sure to my component so normal if the problem was because of me i can figure it out but r know i think its relation with multiple selector source code also.

Dynamic data for OPTIONS

I need to run the following code under:

 defaultOptions: {
   getNodes()
   ?.filter((node) => node.id !== id)
   ?.map((node) => node.data.label) ?? []
}

Is it possible to run code in defaultOptions? I basically have a string array: ["End Task","Test Task","Start Task"] that needs to be converted to an array of hashes to satisfy the defaultOption data structure format. The thing is, the string array is dynamic and built on the fly.

Datetime Picker: cannot clear value after entering all sections

As the title suggests, once you enter the complete date or date and time (depending on the component) you cannot hit backspace or delete to clear out any of the sections. You can do so as long as the date is still incomplete.

For example, in https://shadcnui-expansions.typeart.cc/docs/datetime-picker#Date picker or Time picker
Enter 2/2/2 in the Date Picker. Try to backspace or delete any of the sections, it won't work.
Refresh the page, enter 2/2 in the Date Picker. Try backspace and see that it clears or the section.

Issue with using react-hook-form

I am passing field.onchange to onchange prop of the multiselect and I am receiving

elm.focus is not a function

error. I am using react-hook-form with Zod for validation.

No EmptyIdenticator shown when clicking the multi-selector and all options selected.

When you pick all the options the EmptyIdenticator is shown:

However, when clicking the component again the EmptyIdenticator is not shown:

It seems like the CommandEmpty is not kicking in

The `MultipleSelector` component does not update its UI when its value changes programmatically.

Hello there, so while trying to build a dual-purpose form, for update and create, and after trying to pass the already existent data to the MultipleSelector component, using react hook form (setValue()) I noticed that the component ui is not getting updated accordingly.

below is a more detailed explanation.

Steps to Reproduce:

1. Render the MultipleSelector component in a parent component.
2. Set the value of the MultipleSelector programmatically using state or props.
3. Observe that the UI of the MultipleSelector component does not update accordingly.

Expected Behavior:

I expected the MultipleSelector component to update its UI to reflect the new value when it is changed programmatically.

Actual Behavior:

The UI of the MultipleSelector component does not update when the value changes programmatically. It remains unchanged even though the value has been updated in the component's state.

Environment:

• React version: 18.2.0
• React hook form : ^7.50.1

Code Snippets:

// Example code where the value of MultipleSelector is updated programmatically
// Set selectedSectors state with useState
const [selectedSectors, setSelectedSectors] = useState([]);

// Update selectedSectors programmatically
useEffect(() => {
    setSelectedSectors([{ label: 'Sector A', value: 'sector-a-id' }]);
}, []);

// Render MultipleSelector with selectedSectors as value
<MultipleSelector
    value={selectedSectors}
    onChange={handleChange}
    options={options}
/>

LoadingButton fails when using asChild

When implementing the LoadingButton with the asChild prop, you get the following error. I guess the current implementation negates the Slot implementation when using asChild:

const LoadingButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
({ className, variant, size, asChild = false, loading, children, ...props }, ref) => {
const Comp = asChild ? Slot : 'button';
return (
<Comp
className={cn(buttonVariants({ variant, size, className }))}
disabled={loading}
ref={ref}
{...props}
>
{loading && <Loader2 className={cn('h-4 w-4 animate-spin', children && 'mr-2')} />}
{children}

);
},
);
LoadingButton.displayName = 'LoadingButton';

Keep values when form changes

I use the multi-select on a sheet that slides from the right. Is it possible to keep my selections when the sheet is closed and re-opened?
Cheers, Dave

Controlled Datetime Picker's calendar doesn't correctly set start state value

The controlled datetime picker will start you on a blank calendar view, despite a jsDate being passed in.
For example:

  const [startDate, setStartDate] = useState<Date>(new Date("2024/01/01"))
  return (<DateTimePicker
          jsDate={startDate}
          onJsDateChange={setStartDate}
          showClearButton={false}
        />)

Will put you in a null state. As if there is no currently selected date. Everything else works correctly, though.

I came up with a solution that is working for me. I don't know if there are issues with it, though. Two minor changes are required to fix this issue. The first is to update the useEffect:

   useEffect(() => { 
     /** 
      * If user types datetime, it will be a null value until we get the correct datetime. 
      * This is controlled by react-aria. 
      **/ 
     if (state.value) { 
       const date = parseDateTime(state.value.toString()).toDate(getLocalTimeZone()); 
       setJsDatetime(date); 
       onJsDateChange?.(date); 
+     } else if (jsDate) {
+      state.setValue(currentValue())  
     }
   }, [state.value, onJsDateChange]); 

As you can see, the state is not being correctly set.

However, doing this, breaks the clear function. So, to fix that:

        <X
          className={cn('h-5 w-5 cursor-pointer text-primary/30', !jsDatetime && 'hidden')}
-          onClick={() => setJsDatetime(null)}
+          onClick={() => {
+             setJsDatetime(null)
+             state.setValue(null)
+           }}
        />

These are all in

shadcn-ui-expansions/components/ui/datetime-picker.tsx

Line 285 in 6a3eea2

const DateTimePicker = React.forwardRef<

I ran into this issue and the fix (or at least fixes it for me) in Vite.

Package Versions

I can try to get a minimal repo going for you if you need. Just let me know. (I know this is not the most helpful list)

├── @hookform/[email protected]
├── @radix-ui/[email protected]
├── @radix-ui/[email protected]
├── @radix-ui/[email protected]
├── @radix-ui/[email protected]
├── @radix-ui/[email protected]
├── @radix-ui/[email protected]
├── @radix-ui/[email protected]
├── @radix-ui/[email protected]
├── @radix-ui/[email protected]
├── @radix-ui/[email protected]
├── @radix-ui/[email protected]
├── @radix-ui/[email protected]
├── @radix-ui/[email protected]
├── @radix-ui/[email protected]
├── @radix-ui/[email protected]
├── @radix-ui/[email protected]
├── @radix-ui/[email protected]
├── @radix-ui/[email protected]
├── @tabler/[email protected]
├── @tanstack/[email protected]
├── @tanstack/[email protected]
├── @trivago/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @typescript-eslint/[email protected]
├── @typescript-eslint/[email protected]
├── @vitejs/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

Reactive data to option

My data for the list comes from the backend and initially the options are an empty array and when the response comes from the backend the Multiple Selector component was not updating the list, I added this code and now the data has become reactive

useEffect(() => {
      setOptions(transToGroupOption(arrayOptions, groupBy));
    }, [arrayOptions, groupBy]);

Multiple Selector collapsible groups

make Grouped Multiple Selector collapsible, e.g;

react
-- next
-- remiix
vue
-- nuxt
-- quasar

if you click on react it should collapse to:

react
vue
-- nuxt
-- quasar

and option to make groups collapsed by default

More accessible using `Popover`

It will be more accessible if using Popover. Without Popover, it's always give additional height if I put the input at the very bottom of the screen. Thank you for your work!

Slowing down/freezing when using creatable

Entering a long string in a creatable selector causes the browser tab to slow down and eventually freeze (starts around 45 characters). Pasting a long string also immediately freezes the tab.

Steps to reproduce:

1. Go to https://shadcnui-expansions.typeart.cc/docs/multiple-selector#Creatable%20Selector
2. Paste a long string or repeatedly paste a short one.

Tested on Chromium and Firefox.
I was able to profile it on Firefox and it seems to be caused by some recursive call.

Multiselect doesn't work with another objets ?

Hi, I am a beginner withReact. And I follow your code but it doesn't work... I need help please. Your design is very nice...

const allSubjects: Subject[] = [
  {
    id: 1,
    title: "Nextjs",
    color: "purple",
    shorttitle: "N",
    ranking: 1,
    isActive: true,
  },
  {
    id: 2,
    title: "vite",
    color: "purple",
    shorttitle: "N",
    ranking: 2,
    isActive: true,
  },
  {
    id: 3,
    title: "nuxt",
    color: "purple",
    shorttitle: "N",
    ranking: 3,
    isActive: true,
  },
];

const OPTIONS: { value: string; label: string }[] = allSubjects.map(subject => ({
  value: subject.id.toString(),  
  label: subject.title,  
  disabled:false
}));
.......

<FormField
                control={form.control}
                name="subjects"
                render={({ field }) => (
                  
                  <FormItem>
                    <FormLabel>Matières enseignées</FormLabel>
                    <FormControl>
                      <MultipleSelector
                        value={field.subjects} // The error is here but What is the error ???????? 
                        onChange={field.onChange}
                        defaultOptions={OPTIONS}
                        placeholder="Selectionner la ou les matières enseignées..."
                        emptyIndicator={
                          <p className="text-center text-lg leading-10 text-gray-600 dark:text-gray-400">
                            Aucune matière trouvée.
                          </p>
                        }
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />```

but the options are disabled ! THANKSSSSSSS for your help.

[ Async Search with Debounce and Creatable ] is always in the loading state

To be noticed: The code for Implementing the muti-select is the same as the one from [ Async Search with Debounce and Creatable ], I copy and paste it into my nextjs project.

Issue: When the loading state is triggered, it seems unstoppable to complete the search, until clear out the input then the results finally show up.

Not able to select options using mouse click in MultiSelector

Hi there, I am using the MultipleSelector component and I have followed exact steps of installation as shown on the website.
I am not able to select the options using mouse like shown on the website but the options are selectable using keyboard.
I want to use mouse click to select the options.

Am I missing something? Please help.

Autosize Textarea - AreaHTMLAttributes

Currently, the Autosize Textarea component can receive props from React.AreaHTMLAttributes<HTMLTextAreaElement>.

type AutosizeTextAreaProps = {
  maxHeight?: number;
  minHeight?: number;
} & React.AreaHTMLAttributes<HTMLTextAreaElement>;

However, this does not contain every prop that a textarea can take (For example, cols). Can this be changed to React.TextareaHTMLAttributes<HTMLTextAreaElement>;?

AutosizeTextarea doesn't resize with defaultValue.

If you render a AutosizeTextarea with defaultValue it will not auto-resize on first render, just on change.