ci(changesets): version packages (#2825)

Co-authored-by: Junior Garcia <jrgarciadev@gmail.com>

apps/docs/components/cmdk.tsx

@@ -410,8 +410,8 @@ export const Cmdk: FC<{}> = () => {
             </Kbd>
           </div>
           <Command.List ref={listRef} className={slots.list()} role="listbox">
-            {query.length > 0 && (
-              <Command.Empty>
+            <Command.Empty>
+              {query.length > 0 && (
                 <div className={slots.emptyWrapper()}>
                   <div>
                     <p>No results for &quot;{query}&quot;</p>
@@ -424,8 +424,8 @@ export const Cmdk: FC<{}> = () => {
                     )}
                   </div>
                 </div>
-              </Command.Empty>
-            )}
+              )}
+            </Command.Empty>
 
             {isEmpty(query) &&
               (isEmpty(recentSearches) ? (

apps/docs/components/docs/components/package-managers.tsx

@@ -54,7 +54,7 @@ export const PackageManagers = ({commands}: PackageManagersProps) => {
     <Tabs
       aria-label="NextUI installation commands"
       classNames={{
-        base: "group mt-4",
+        base: "group mt-4 min-w-[300px] w-full overflow-x-auto",
         tabList: "h-10",
       }}
       selectedKey={selectedManager}

apps/docs/content/components/date-input/readonly.ts

@@ -1,5 +1,5 @@
 const App = `import {DateInput} from "@nextui-org/react";
-import {CalendarDate} from "@internationalized/date";
+import {CalendarDate, parseDate} from "@internationalized/date";
 
 export default function App() {
   return (

apps/docs/content/components/date-input/required.ts

@@ -1,5 +1,5 @@
 const App = `import {DateInput} from "@nextui-org/react";
-import {CalendarDate} from "@internationalized/date";
+import {CalendarDate, parseDate} from "@internationalized/date";
 
 export default function App() {
   return (

apps/docs/content/components/date-input/start-end-content.ts

@@ -55,7 +55,7 @@ export default function App() {
 
 const react = {
   "/App.jsx": App,
-  "/MailIcon.jsx": CalendarIcon,
+  "/CalendarIcon.jsx": CalendarIcon,
 };
 
 export default {

apps/docs/content/components/date-input/time-zones.ts

@@ -1,5 +1,5 @@
-const AppTs = `import {DateInput} from "@nextui-org/react";
-import {parseZonedDateTime} from "@internationalized/date";
+const App = `import {DateInput} from "@nextui-org/react";
+import {parseZonedDateTime, parseAbsoluteToLocal} from "@internationalized/date";
 
 export default function App() {
   return (
@@ -19,7 +19,7 @@ export default function App() {
 }`;
 
 const react = {
-  "/App.tsx": AppTs,
+  "/App.jsx": App,
 };
 
 export default {

apps/docs/content/components/date-input/variants.ts

@@ -1,4 +1,5 @@
 const App = `import {DateInput} from "@nextui-org/react";
+import {CalendarDate} from "@internationalized/date";
 
 export default function App() {
   const variants = ["flat", "bordered", "underlined", "faded"];

apps/docs/content/components/date-picker/description.ts

@@ -1,5 +1,4 @@
 const App = `import {DatePicker} from "@nextui-org/react";
-import {CalendarDate} from "@internationalized/date";
 
 export default function App() {
   return (

apps/docs/content/components/date-picker/disabled.ts

@@ -1,5 +1,4 @@
 const App = `import {DatePicker} from "@nextui-org/react";
-import {CalendarDate, parseDate} from "@internationalized/date";
 
 export default function App() {
   return (

apps/docs/content/components/date-picker/error-message.ts

@@ -1,5 +1,4 @@
 const App = `import {DatePicker} from "@nextui-org/react";
-import {CalendarDate, parseDate} from "@internationalized/date";
 
 export default function App() {
   return (

apps/docs/content/components/date-picker/min-and-max-date.ts

@@ -1,5 +1,5 @@
 const App = `import {DatePicker} from "@nextui-org/react";
-import {getLocalTimeZone, parseDate, today} from "@internationalized/date";
+import {getLocalTimeZone, today} from "@internationalized/date";
 
 export default function App() {
   return (

apps/docs/content/components/date-picker/preset.ts

@@ -1,6 +1,6 @@
-const App = `import {DatePicker} from "@nextui-org/react";
-import {now, useLocale, startOfWeek, startOfMonth, useDateFormatter, getLocalTimeZone} from "@internationalized/date";
-import {I18nProvider} from "@react-aria/i18n";
+const App = `import {DatePicker, RadioGroup, Radio, ButtonGroup, Button, cn} from "@nextui-org/react";
+import {startOfWeek, startOfMonth, getLocalTimeZone, today} from "@internationalized/date";
+import {useLocale, useDateFormatter} from "@react-aria/i18n";
 
 export default function App() {
   let defaultDate = today(getLocalTimeZone());
@@ -91,9 +91,9 @@ export default function App() {
   );
 }`;
 
-const AppTs = `import {DatePicker} from "@nextui-org/react";
-import {DateValue, now, useLocale, startOfWeek, startOfMonth, useDateFormatter, getLocalTimeZone} from "@internationalized/date";
-import {I18nProvider} from "@react-aria/i18n";
+const AppTs = `import {DatePicker, RadioGroup, Radio, ButtonGroup, Button, cn} from "@nextui-org/react";
+import {DateValue, startOfWeek, startOfMonth, getLocalTimeZone, today} from "@internationalized/date";
+import {useLocale, useDateFormatter} from "@react-aria/i18n";
 
 export default function App() {
   let defaultDate = today(getLocalTimeZone());

apps/docs/content/components/date-picker/readonly.ts

@@ -1,5 +1,4 @@
 const App = `import {DatePicker} from "@nextui-org/react";
-import {CalendarDate} from "@internationalized/date";
 
 export default function App() {
   return (

apps/docs/content/components/date-picker/required.ts

@@ -1,5 +1,4 @@
 const App = `import {DatePicker} from "@nextui-org/react";
-import {CalendarDate} from "@internationalized/date";
 
 export default function App() {
   return (

apps/docs/content/components/date-picker/time-zones.ts

@@ -1,5 +1,5 @@
 const AppTs = `import {DatePicker} from "@nextui-org/react";
-import {parseZonedDateTime} from "@internationalized/date";
+import {parseZonedDateTime, parseAbsoluteToLocal} from "@internationalized/date";
 
 export default function App() {
   return (

apps/docs/content/components/date-picker/with-time-field.ts

@@ -1,4 +1,5 @@
 const App = `import {DatePicker} from "@nextui-org/react";
+import {now, getLocalTimeZone} from "@internationalized/date";
 
 export default function App() {
   return (

apps/docs/content/components/date-range-picker/controlled.ts

@@ -1,5 +1,5 @@
 const App = `import {DateRangePicker} from "@nextui-org/react";
-import {parseDate} from "@internationalized/date";
+import {parseDate, getLocalTimeZone} from "@internationalized/date";
 import {useDateFormatter} from "@react-aria/i18n";
 
 export default function App() {
@@ -40,7 +40,7 @@ export default function App() {
 }`;
 
 const AppTs = `import {DateRangePicker} from "@nextui-org/react";
-import {parseDate} from "@internationalized/date";
+import {parseDate, getLocalTimeZone} from "@internationalized/date";
 import {useDateFormatter} from "@react-aria/i18n";
 import {RangeValue} from "@react-types/shared";
 import {DateValue} from "@react-types/datepicker";

apps/docs/content/components/date-range-picker/time-zones.ts

@@ -1,4 +1,4 @@
-const AppTs = `import {DateRangePicker} from "@nextui-org/react";
+const App = `import {DateRangePicker} from "@nextui-org/react";
 import {parseZonedDateTime, parseAbsoluteToLocal} from "@internationalized/date";
 
 export default function App() {
@@ -9,6 +9,7 @@ export default function App() {
           start: parseZonedDateTime("2024-04-01T00:45[America/Los_Angeles]"),
           end: parseZonedDateTime("2024-04-14T11:15[America/Los_Angeles]"),
         }}
+        label="Stay duration"
         labelPlacement="outside"
       />
       <DateRangePicker
@@ -16,14 +17,15 @@ export default function App() {
           start: parseAbsoluteToLocal("2024-04-01T07:45:00Z"),
           end: parseAbsoluteToLocal("2024-04-14T19:15:00Z"),
         }}
+        label="Stay duration"
         labelPlacement="outside"
       />
-  </div>
+    </div>
   );
 }`;
 
 const react = {
-  "/App.tsx": AppTs,
+  "/App.jsx": App,
 };
 
 export default {

apps/docs/content/components/date-range-picker/with-time-field.ts

@@ -1,4 +1,6 @@
 const App = `import {DateRangePicker} from "@nextui-org/react";
+import {parseZonedDateTime} from "@internationalized/date";
+
 export default function App() {
   return (
     <div className="w-full max-w-xl flex flex-row gap-4">

apps/docs/content/components/time-input/timezones.ts

@@ -1,5 +1,5 @@
 const App = `import {TimeInput} from "@nextui-org/react";
-import {Time, parseZonedDateTime} from "@internationalized/date";
+import {Time, parseZonedDateTime, parseAbsoluteToLocal} from "@internationalized/date";
 
 export default function App() {
   return (

apps/docs/content/docs/guide/installation.mdx

@@ -211,7 +211,7 @@ in your terminal:
 #### Tailwind CSS Setup
 
 TailwindCSS setup changes a bit when you use individual packages. You only need to add the
-styles of the components your using to your `tailwind.config.js` file. For example, for the
+styles of the components you're using to your `tailwind.config.js` file. For example, for the
 [Button](/docs/components/button) component, you need to add the following code to your
 `tailwind.config.js` file:
 

apps/docs/content/docs/guide/introduction.mdx

@@ -95,7 +95,7 @@ NextUI's primary goal is to streamline the development process, offering a beaut
   can still use the NextUI components styling part with other frameworks or libraries.
 </div>
 
-### Why NextUI uses Framer Motion?
+### Why does NextUI use Framer Motion?
 
 <div className="text-default-500">
   We use <Link href="https://www.framer.com/motion" isExternal showAnchorIcon>Framer Motion</Link> to animate some components due to

packages/components/accordion/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @nextui-org/accordion
 
+## 2.0.32
+
+### Patch Changes
+
+- Updated dependencies [[`10f2b8f42`](https://github.com/nextui-org/nextui/commit/10f2b8f42b1d208e4edea366c6bbc37ef8614ef6)]:
+  - @nextui-org/use-aria-accordion@2.0.4
+  - @nextui-org/divider@2.0.27
+
 ## 2.0.31
 
 ### Patch Changes

packages/components/accordion/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/accordion",
-  "version": "2.0.31",
+  "version": "2.0.32",
   "description": "Collapse display a list of high-level options that can expand/collapse to reveal more information.",
   "keywords": [
     "react",

packages/components/autocomplete/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @nextui-org/autocomplete
 
+## 2.0.16
+
+### Patch Changes
+
+- Updated dependencies [[`355235320`](https://github.com/nextui-org/nextui/commit/35523532030468837939d127b68bee30bbc4e2b0), [`1dacf52f3`](https://github.com/nextui-org/nextui/commit/1dacf52f305a410cbf59d067d1977024d982ad03)]:
+  - @nextui-org/input@2.1.21
+  - @nextui-org/popover@2.1.21
+  - @nextui-org/button@2.0.31
+  - @nextui-org/listbox@2.1.19
+  - @nextui-org/scroll-shadow@2.1.16
+  - @nextui-org/spinner@2.0.28
+
 ## 2.0.15
 
 ### Patch Changes

packages/components/autocomplete/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/autocomplete",
-  "version": "2.0.15",
+  "version": "2.0.16",
   "description": "An autocomplete combines a text input with a listbox, allowing users to filter a list of options to items matching a query.",
   "keywords": [
     "autocomplete"

packages/components/button/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @nextui-org/button
 
+## 2.0.31
+
+### Patch Changes
+
+- Updated dependencies [[`765c04e2a`](https://github.com/nextui-org/nextui/commit/765c04e2a5b3e3a072d87a4ae1bcb8ae389d53a0)]:
+  - @nextui-org/ripple@2.0.28
+  - @nextui-org/spinner@2.0.28
+
 ## 2.0.30
 
 ### Patch Changes

packages/components/button/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/button",
-  "version": "2.0.30",
+  "version": "2.0.31",
   "description": "Buttons allow users to perform actions and choose with a single tap.",
   "keywords": [
     "button"

packages/components/calendar/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @nextui-org/calendar
 
+## 2.0.4
+
+### Patch Changes
+
+- [#2861](https://github.com/nextui-org/nextui/pull/2861) [`e9fef9bd9`](https://github.com/nextui-org/nextui/commit/e9fef9bd922ae1efdf3f796cfe88a579bf693c1d) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix #2820 #2857 Maximum update depth exceeded on Calendar & RangeCalendar when hovering the dates.
+
+- Updated dependencies []:
+  - @nextui-org/button@2.0.31
+
 ## 2.0.3
 
 ### Patch Changes

packages/components/calendar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/calendar",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "A calendar displays one or more date grids and allows users to select a single date.",
   "keywords": [
     "calendar"

packages/components/calendar/src/calendar-month.tsx

@@ -1,5 +1,3 @@
-import type {CalendarState, RangeCalendarState} from "@react-stately/calendar";
-
 import {CalendarDate, endOfMonth, getWeeksInMonth} from "@internationalized/date";
 import {CalendarPropsBase} from "@react-types/calendar";
 import {HTMLNextUIProps} from "@nextui-org/system";
@@ -7,7 +5,6 @@ import {useLocale} from "@react-aria/i18n";
 import {useCalendarGrid} from "@react-aria/calendar";
 import {m} from "framer-motion";
 import {dataAttr} from "@nextui-org/shared-utils";
-import {useEffect, useState} from "react";
 
 import {CalendarCell} from "./calendar-cell";
 import {slideVariants} from "./calendar-transitions";
@@ -25,29 +22,8 @@ export function CalendarMonth(props: CalendarMonthProps) {
   const {locale} = useLocale();
   const weeksInMonth = getWeeksInMonth(startDate, locale);
 
-  const {
-    state: stateProp,
-    slots,
-    weekdayStyle,
-    isHeaderExpanded,
-    disableAnimation,
-    classNames,
-  } = useCalendarContext();
-
-  // Self-controlled state
-  const [state, setState] = useState<CalendarState | RangeCalendarState>(() => stateProp);
-
-  /**
-   * This avoid focusing the date cell when navigating through the picker'
-   * months/years with the keyboard.
-   */
-  useEffect(() => {
-    if (isHeaderExpanded) {
-      return;
-    }
-
-    setState(stateProp);
-  }, [stateProp, isHeaderExpanded]);
+  const {state, slots, weekdayStyle, isHeaderExpanded, disableAnimation, classNames} =
+    useCalendarContext();
 
   const {gridProps, headerProps, weekDays} = useCalendarGrid(
     {

packages/components/card/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @nextui-org/card
 
+## 2.0.28
+
+### Patch Changes
+
+- Updated dependencies [[`765c04e2a`](https://github.com/nextui-org/nextui/commit/765c04e2a5b3e3a072d87a4ae1bcb8ae389d53a0)]:
+  - @nextui-org/ripple@2.0.28
+
 ## 2.0.27
 
 ### Patch Changes

packages/components/card/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/card",
-  "version": "2.0.27",
+  "version": "2.0.28",
   "description": "Card is a container for text, photos, and actions in the context of a single subject.",
   "keywords": [
     "card"

packages/components/date-picker/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @nextui-org/date-picker
 
+## 2.0.7
+
+### Patch Changes
+
+- [#2832](https://github.com/nextui-org/nextui/pull/2832) [`1cc5215ce`](https://github.com/nextui-org/nextui/commit/1cc5215ce6026da7e7736d74a5479b2f5b86c1ff) Thanks [@ryo-manba](https://github.com/ryo-manba)! - Fixed missing aria labels in date range picker (#2804)
+
+- [#2833](https://github.com/nextui-org/nextui/pull/2833) [`308b32c0f`](https://github.com/nextui-org/nextui/commit/308b32c0f1611ecc72d8cf3b91a4481cc0fc09a5) Thanks [@ryo-manba](https://github.com/ryo-manba)! - Fixed console errors for non-DOM props in DatePicker (#2823)
+
+- Updated dependencies [[`e9fef9bd9`](https://github.com/nextui-org/nextui/commit/e9fef9bd922ae1efdf3f796cfe88a579bf693c1d)]:
+  - @nextui-org/calendar@2.0.4
+  - @nextui-org/popover@2.1.21
+  - @nextui-org/button@2.0.31
+  - @nextui-org/date-input@2.0.3
+
 ## 2.0.6
 
 ### Patch Changes

packages/components/date-picker/__tests__/date-picker.test.tsx

@@ -372,8 +372,17 @@ describe("DatePicker", () => {
   describe("Calendar popover", function () {
     it("should emit onChange when selecting a date in the calendar in controlled mode", function () {
       let onChange = jest.fn();
+      const consoleWarnSpy = jest.spyOn(console, "warn").mockImplementation(() => {});
+      const consoleErrorSpy = jest.spyOn(console, "error").mockImplementation(() => {});
+
       let {getByRole, getAllByRole, queryByLabelText} = render(
-        <DatePicker label="Date" value={new CalendarDate(2019, 2, 3)} onChange={onChange} />,
+        <DatePicker
+          hideTimeZone
+          isRequired
+          label="Date"
+          value={new CalendarDate(2019, 2, 3)}
+          onChange={onChange}
+        />,
       );
 
       let combobox = getAllByRole("group")[0];
@@ -406,6 +415,11 @@ describe("DatePicker", () => {
       expect(onChange).toHaveBeenCalledTimes(1);
       expect(onChange).toHaveBeenCalledWith(new CalendarDate(2019, 2, 4));
       expect(getTextValue(combobox)).toBe("2/3/2019"); // controlled
+
+      expect(consoleWarnSpy).not.toHaveBeenCalled();
+      expect(consoleErrorSpy).not.toHaveBeenCalled();
+      consoleWarnSpy.mockRestore();
+      consoleErrorSpy.mockRestore();
     });
 
     it("should emit onChange when selecting a date in the calendar in uncontrolled mode", function () {

packages/components/date-picker/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/date-picker",
-  "version": "2.0.6",
+  "version": "2.0.7",
   "description": "A date picker combines a DateInput and a Calendar popover to allow users to enter or select a date and time value.",
   "keywords": [
     "date-picker"

packages/components/date-picker/src/use-date-picker-base.ts

@@ -229,10 +229,11 @@ export function useDatePickerBase<T extends DateValue>(originalProps: UseDatePic
     hideTimeZone: props.hideTimeZone,
   } as TimeInputProps;
 
-  const popoverProps = {
-    ...mergeProps(slotsProps.popoverProps, props),
+  const popoverProps: PopoverProps = {
+    ...slotsProps.popoverProps,
+    children: slotsProps.popoverProps?.children ?? [],
     triggerRef: domRef,
-  } as PopoverProps;
+  };
 
   const calendarProps = {
     ...slotsProps.calendarProps,

packages/components/date-picker/src/use-date-picker.ts

@@ -131,7 +131,7 @@ export function useDatePicker<T extends DateValue>({
     } as DateInputProps;
   };
 
-  const getTimeInputProps = () => {
+  const getTimeInputProps = (): TimeInputProps => {
     if (!showTimeField) return {};
 
     return {
@@ -139,8 +139,8 @@ export function useDatePicker<T extends DateValue>({
       value: state.timeValue,
       onChange: state.setTimeValue,
       granularity: timeGranularity,
-      minValue: timeMinValue,
-      maxValue: timeMaxValue,
+      minValue: timeMinValue ?? undefined,
+      maxValue: timeMaxValue ?? undefined,
       classNames: {
         base: slots.timeInput({
           class: clsx(classNames?.timeInput, userTimeInputProps?.classNames?.base),
@@ -149,15 +149,14 @@ export function useDatePicker<T extends DateValue>({
           class: clsx(classNames?.timeInputLabel, userTimeInputProps?.classNames?.label),
         }),
       },
-    } as TimeInputProps;
+    };
   };
 
-  const getPopoverProps = (props: DOMAttributes = {}) => {
+  const getPopoverProps = (props: DOMAttributes = {}): PopoverProps => {
     return {
       state,
       dialogProps,
       ...popoverProps,
-      ...props,
       classNames: {
         content: slots.popoverContent({
           class: clsx(
@@ -167,10 +166,10 @@ export function useDatePicker<T extends DateValue>({
           ),
         }),
       },
-    } as PopoverProps;
+    };
   };
 
-  const getCalendarProps = () => {
+  const getCalendarProps = (): CalendarProps => {
     return {
       ...ariaCalendarProps,
       ...calendarProps,
@@ -178,15 +177,15 @@ export function useDatePicker<T extends DateValue>({
         base: slots.calendar({class: classNames?.calendar}),
         content: slots.calendarContent({class: classNames?.calendarContent}),
       },
-    } as CalendarProps;
+    };
   };
 
-  const getSelectorButtonProps = () => {
+  const getSelectorButtonProps = (): ButtonProps => {
     return {
       ...buttonProps,
       ...selectorButtonProps,
       className: slots.selectorButton({class: classNames?.selectorButton}),
-    } as ButtonProps;
+    };
   };
 
   const getSelectorIconProps = () => {

packages/components/date-picker/src/use-date-range-picker.ts

@@ -57,7 +57,6 @@ export type UseDateRangePickerProps<T extends DateValue> = Props<T> & AriaDateRa
 
 export function useDateRangePicker<T extends DateValue>({
   as,
-  label,
   isInvalid,
   description,
   startContent,
@@ -96,8 +95,6 @@ export function useDateRangePicker<T extends DateValue>({
 
   const popoverTriggerRef = useRef<HTMLDivElement>(null);
 
-  originalProps.minValue;
-
   let {
     groupProps,
     labelProps,
@@ -131,12 +128,15 @@ export function useDateRangePicker<T extends DateValue>({
   const showTimeField = !!timeGranularity;
 
   const labelPlacement = useMemo<DateInputVariantProps["labelPlacement"]>(() => {
-    if ((!originalProps.labelPlacement || originalProps.labelPlacement === "inside") && !label) {
+    if (
+      (!originalProps.labelPlacement || originalProps.labelPlacement === "inside") &&
+      !originalProps.label
+    ) {
       return "outside";
     }
 
     return originalProps.labelPlacement ?? "inside";
-  }, [originalProps.labelPlacement, label]);
+  }, [originalProps.labelPlacement, originalProps.label]);
 
   const shouldLabelBeOutside = labelPlacement === "outside" || labelPlacement === "outside-left";
 
@@ -371,7 +371,7 @@ export function useDateRangePicker<T extends DateValue>({
   const getDateInputGroupProps = () => {
     return {
       as,
-      label,
+      label: originalProps.label,
       description,
       endContent,
       errorMessage,
@@ -400,7 +400,7 @@ export function useDateRangePicker<T extends DateValue>({
 
   return {
     state,
-    label,
+    label: originalProps.label,
     slots,
     classNames,
     endContent,

packages/components/date-picker/stories/date-range-picker.stories.tsx

@@ -138,6 +138,7 @@ const TimeZonesTemplate = (args: DateRangePickerProps) => (
     />
     <DateRangePicker
       // {...args}
+      aria-label="Event date"
       className="max-w-xs"
       defaultValue={{
         start: parseAbsoluteToLocal("2024-04-01T07:45:00Z"),

packages/components/dropdown/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @nextui-org/dropdown
 
+## 2.1.23
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/popover@2.1.21
+  - @nextui-org/menu@2.0.22
+
 ## 2.1.22
 
 ### Patch Changes

packages/components/dropdown/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/dropdown",
-  "version": "2.1.22",
+  "version": "2.1.23",
   "description": "A dropdown displays a list of actions or options that a user can choose.",
   "keywords": [
     "dropdown"

packages/components/input/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @nextui-org/input
 
+## 2.1.21
+
+### Patch Changes
+
+- [#2796](https://github.com/nextui-org/nextui/pull/2796) [`355235320`](https://github.com/nextui-org/nextui/commit/35523532030468837939d127b68bee30bbc4e2b0) Thanks [@wingkwong](https://github.com/wingkwong)! - Fixes the isClearable function in the input component (#2791)
+
+- [#2072](https://github.com/nextui-org/nextui/pull/2072) [`1dacf52f3`](https://github.com/nextui-org/nextui/commit/1dacf52f305a410cbf59d067d1977024d982ad03) Thanks [@black197](https://github.com/black197)! - Fix #2069 keep input component's position steady
+
 ## 2.1.20
 
 ### Patch Changes

packages/components/input/__tests__/input.test.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import {render} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
 import {Input} from "../src";
 
@@ -116,4 +117,32 @@ describe("Input", () => {
 
     expect(ref.current?.value)?.toBe(value);
   });
+
+  it("should clear the value and onClear is triggered", async () => {
+    const onClear = jest.fn();
+
+    const ref = React.createRef<HTMLInputElement>();
+
+    const {getByRole} = render(
+      <Input
+        ref={ref}
+        isClearable
+        defaultValue="junior@nextui.org"
+        label="test input"
+        onClear={onClear}
+      />,
+    );
+
+    const clearButton = getByRole("button");
+
+    expect(clearButton).not.toBeNull();
+
+    const user = userEvent.setup();
+
+    await user.click(clearButton);
+
+    expect(ref.current?.value)?.toBe("");
+
+    expect(onClear).toHaveBeenCalledTimes(1);
+  });
 });

packages/components/input/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/input",
-  "version": "2.1.20",
+  "version": "2.1.21",
   "description": "The input component is designed for capturing user input within a text field.",
   "keywords": [
     "input"
@@ -43,6 +43,7 @@
     "@nextui-org/react-utils": "workspace:*",
     "@nextui-org/shared-icons": "workspace:*",
     "@nextui-org/shared-utils": "workspace:*",
+    "@nextui-org/use-safe-layout-effect": "workspace:*",
     "@react-aria/focus": "^3.16.2",
     "@react-aria/interactions": "^3.21.1",
     "@react-aria/textfield": "^3.14.3",
@@ -57,7 +58,8 @@
     "@nextui-org/system": "workspace:*",
     "clean-package": "2.2.0",
     "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react-dom": "^18.0.0",
+    "react-hook-form": "^7.51.3"
   },
   "clean-package": "../../../clean-package.config.json"
 }

packages/components/input/src/input.tsx

@@ -65,19 +65,11 @@ const Input = forwardRef<"input", InputProps>((props, ref) => {
   ]);
 
   const innerWrapper = useMemo(() => {
-    if (startContent || end) {
-      return (
-        <div {...getInnerWrapperProps()}>
-          {startContent}
-          <input {...getInputProps()} />
-          {end}
-        </div>
-      );
-    }
-
     return (
       <div {...getInnerWrapperProps()}>
+        {startContent}
         <input {...getInputProps()} />
+        {end}
       </div>
     );
   }, [startContent, end, getInputProps, getInnerWrapperProps]);

packages/components/input/src/use-input.ts

@@ -2,6 +2,7 @@ import type {InputVariantProps, SlotsToClasses, InputSlots} from "@nextui-org/th
 import type {AriaTextFieldOptions} from "@react-aria/textfield";
 
 import {HTMLNextUIProps, mapPropsVariants, PropGetter} from "@nextui-org/system";
+import {useSafeLayoutEffect} from "@nextui-org/use-safe-layout-effect";
 import {AriaTextFieldProps} from "@react-types/textfield";
 import {useFocusRing} from "@react-aria/focus";
 import {input} from "@nextui-org/theme";
@@ -143,6 +144,15 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
     domRef.current?.focus();
   }, [setInputValue, onClear]);
 
+  // if we use `react-hook-form`, it will set the input value using the ref in register
+  // i.e. setting ref.current.value to something which is uncontrolled
+  // hence, sync the state with `ref.current.value`
+  useSafeLayoutEffect(() => {
+    if (!domRef.current) return;
+
+    setInputValue(domRef.current.value);
+  }, [domRef.current]);
+
   const {
     labelProps,
     inputProps,
@@ -156,7 +166,7 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
       ...originalProps,
       validationBehavior: "native",
       autoCapitalize: originalProps.autoCapitalize as AutoCapitalize,
-      value: domRef?.current?.value ?? inputValue,
+      value: inputValue,
       "aria-label": safeAriaLabel(
         originalProps?.["aria-label"],
         originalProps?.label,

packages/components/input/stories/input.stories.tsx

@@ -13,6 +13,7 @@ import {
   CloseFilledIcon,
 } from "@nextui-org/shared-icons";
 import {button} from "@nextui-org/theme";
+import {useForm} from "react-hook-form";
 
 import {Input, InputProps, useInput} from "../src";
 
@@ -474,6 +475,38 @@ const CustomWithHooksTemplate = (args: InputProps) => {
   );
 };
 
+const WithReactHookFormTemplate = (args: InputProps) => {
+  const {
+    register,
+    formState: {errors},
+    handleSubmit,
+  } = useForm({
+    defaultValues: {
+      withDefaultValue: "wkw",
+      withoutDefaultValue: "",
+      requiredField: "",
+    },
+  });
+
+  const onSubmit = (data: any) => {
+    // eslint-disable-next-line no-console
+    console.log(data);
+    alert("Submitted value: " + JSON.stringify(data));
+  };
+
+  return (
+    <form className="flex flex-col gap-4" onSubmit={handleSubmit(onSubmit)}>
+      <Input isClearable label="With default value" {...register("withDefaultValue")} />
+      <Input {...args} label="Without default value" {...register("withoutDefaultValue")} />
+      <Input {...args} label="Required" {...register("requiredField", {required: true})} />
+      {errors.requiredField && <span className="text-danger">This field is required</span>}
+      <button className={button({class: "w-fit"})} type="submit">
+        Submit
+      </button>
+    </form>
+  );
+};
+
 export const Default = {
   render: MirrorTemplate,
 
@@ -706,3 +739,11 @@ export const CustomWithHooks = {
     ),
   },
 };
+
+export const WithReactHookForm = {
+  render: WithReactHookFormTemplate,
+
+  args: {
+    ...defaultProps,
+  },
+};

packages/components/menu/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @nextui-org/menu
 
+## 2.0.22
+
+### Patch Changes
+
+- Updated dependencies [[`b8e6b2fe2`](https://github.com/nextui-org/nextui/commit/b8e6b2fe25bbbf52f656bbcac52fc00714f464bc)]:
+  - @nextui-org/use-aria-menu@2.0.2
+  - @nextui-org/divider@2.0.27
+
 ## 2.0.21
 
 ### Patch Changes

packages/components/menu/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/menu",
-  "version": "2.0.21",
+  "version": "2.0.22",
   "description": "A menu displays a list of options and allows a user to select one or more of them.",
   "keywords": [
     "menu"

packages/components/popover/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @nextui-org/popover
 
+## 2.1.21
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/button@2.0.31
+
 ## 2.1.20
 
 ### Patch Changes

packages/components/popover/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/popover",
-  "version": "2.1.20",
+  "version": "2.1.21",
   "description": "A popover is an overlay element positioned relative to a trigger.",
   "keywords": [
     "popover"

packages/components/progress/stories/progress.stories.tsx

@@ -122,3 +122,15 @@ export const Striped = {
     isStriped: true,
   },
 };
+
+export const CustomSlots = {
+  render: Template,
+
+  args: {
+    ...defaultProps,
+    classNames: {
+      indicator: "bg-[#14708A] rounded-[4px]",
+      track: "bg-red-500 rounded-[4px]",
+    },
+  },
+};

packages/components/ripple/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @nextui-org/ripple
 
+## 2.0.28
+
+### Patch Changes
+
+- [#2853](https://github.com/nextui-org/nextui/pull/2853) [`765c04e2a`](https://github.com/nextui-org/nextui/commit/765c04e2a5b3e3a072d87a4ae1bcb8ae389d53a0) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix press event on iOS, the ripple zIndex was preventing the press event
+
 ## 2.0.27
 
 ### Patch Changes

packages/components/ripple/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/ripple",
-  "version": "2.0.27",
+  "version": "2.0.28",
   "description": "A simple implementation to display a ripple animation when the source component is clicked",
   "keywords": [
     "ripple"

packages/components/ripple/src/ripple.tsx

@@ -36,7 +36,9 @@ const Ripple: FC<RippleProps> = (props) => {
                     borderRadius: "100%",
                     transformOrigin: "center",
                     pointerEvents: "none",
-                    zIndex: 10,
+                    overflow: "hidden",
+                    inset: 0,
+                    zIndex: 0,
                     top: ripple.y,
                     left: ripple.x,
                     width: `${ripple.size}px`,

packages/components/ripple/src/use-ripple.ts

@@ -24,8 +24,8 @@ export function useRipple(props: UseRippleProps = {}) {
       {
         key: getUniqueID(prevRipples.length.toString()),
         size,
-        x: event.clientX - rect.x - size / 2,
-        y: event.clientY - rect.y - size / 2,
+        x: event.clientX - rect.left - size / 2,
+        y: event.clientY - rect.top - size / 2,
       },
     ]);
   }, []);

packages/components/select/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @nextui-org/select
 
+## 2.1.27
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/popover@2.1.21
+  - @nextui-org/listbox@2.1.19
+  - @nextui-org/scroll-shadow@2.1.16
+  - @nextui-org/spinner@2.0.28
+
 ## 2.1.26
 
 ### Patch Changes

packages/components/select/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/select",
-  "version": "2.1.26",
+  "version": "2.1.27",
   "description": "A select displays a collapsible list of options and allows a user to select one of them.",
   "keywords": [
     "select"

packages/components/snippet/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @nextui-org/snippet
 
+## 2.0.35
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/button@2.0.31
+  - @nextui-org/tooltip@2.0.33
+
 ## 2.0.34
 
 ### Patch Changes

packages/components/snippet/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/snippet",
-  "version": "2.0.34",
+  "version": "2.0.35",
   "description": "Display a snippet of copyable code for the command line.",
   "keywords": [
     "snippet"

packages/components/table/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @nextui-org/table
 
+## 2.0.33
+
+### Patch Changes
+
+- [#2584](https://github.com/nextui-org/nextui/pull/2584) [`d532a9da7`](https://github.com/nextui-org/nextui/commit/d532a9da7a24d3552ef1bf0706c9fbf984887ddb) Thanks [@sapkra](https://github.com/sapkra)! - Add missing export of TableRowProps type
+
+- Updated dependencies []:
+  - @nextui-org/checkbox@2.0.29
+  - @nextui-org/spacer@2.0.27
+
 ## 2.0.32
 
 ### Patch Changes

packages/components/table/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/table",
-  "version": "2.0.32",
+  "version": "2.0.33",
   "description": "Tables are used to display tabular data using rows and columns. ",
   "keywords": [
     "table"

packages/components/table/src/base/index.ts

@@ -9,3 +9,4 @@ export type {TableBodyProps} from "./table-body";
 export type {TableCellProps} from "./table-cell";
 export type {TableColumnProps} from "./table-column";
 export type {TableHeaderProps} from "./table-header";
+export type {TableRowProps} from "./table-row";

packages/core/react/CHANGELOG.md

@@ -1,5 +1,52 @@
 # @nextui-org/react
 
+## 2.3.6
+
+### Patch Changes
+
+- Updated dependencies [[`d532a9da7`](https://github.com/nextui-org/nextui/commit/d532a9da7a24d3552ef1bf0706c9fbf984887ddb), [`1cc5215ce`](https://github.com/nextui-org/nextui/commit/1cc5215ce6026da7e7736d74a5479b2f5b86c1ff), [`355235320`](https://github.com/nextui-org/nextui/commit/35523532030468837939d127b68bee30bbc4e2b0), [`31934017a`](https://github.com/nextui-org/nextui/commit/31934017a54627cbc78583674e990dc66dbe303e), [`25484f866`](https://github.com/nextui-org/nextui/commit/25484f866338cf6df549ba0b1082ffd57384eee2), [`6b96ea9c9`](https://github.com/nextui-org/nextui/commit/6b96ea9c9c091d025a886361f50970599a260715), [`308b32c0f`](https://github.com/nextui-org/nextui/commit/308b32c0f1611ecc72d8cf3b91a4481cc0fc09a5), [`e9fef9bd9`](https://github.com/nextui-org/nextui/commit/e9fef9bd922ae1efdf3f796cfe88a579bf693c1d), [`1dacf52f3`](https://github.com/nextui-org/nextui/commit/1dacf52f305a410cbf59d067d1977024d982ad03), [`765c04e2a`](https://github.com/nextui-org/nextui/commit/765c04e2a5b3e3a072d87a4ae1bcb8ae389d53a0)]:
+  - @nextui-org/table@2.0.33
+  - @nextui-org/date-picker@2.0.7
+  - @nextui-org/input@2.1.21
+  - @nextui-org/theme@2.2.3
+  - @nextui-org/calendar@2.0.4
+  - @nextui-org/ripple@2.0.28
+  - @nextui-org/accordion@2.0.32
+  - @nextui-org/autocomplete@2.0.16
+  - @nextui-org/modal@2.0.33
+  - @nextui-org/navbar@2.0.30
+  - @nextui-org/popover@2.1.21
+  - @nextui-org/select@2.1.27
+  - @nextui-org/tabs@2.0.29
+  - @nextui-org/avatar@2.0.27
+  - @nextui-org/badge@2.0.27
+  - @nextui-org/breadcrumbs@2.0.7
+  - @nextui-org/button@2.0.31
+  - @nextui-org/card@2.0.28
+  - @nextui-org/checkbox@2.0.29
+  - @nextui-org/chip@2.0.28
+  - @nextui-org/code@2.0.27
+  - @nextui-org/date-input@2.0.3
+  - @nextui-org/divider@2.0.27
+  - @nextui-org/dropdown@2.1.23
+  - @nextui-org/image@2.0.27
+  - @nextui-org/kbd@2.0.28
+  - @nextui-org/link@2.0.29
+  - @nextui-org/listbox@2.1.19
+  - @nextui-org/menu@2.0.22
+  - @nextui-org/pagination@2.0.30
+  - @nextui-org/progress@2.0.28
+  - @nextui-org/radio@2.0.28
+  - @nextui-org/scroll-shadow@2.1.16
+  - @nextui-org/skeleton@2.0.27
+  - @nextui-org/slider@2.2.9
+  - @nextui-org/snippet@2.0.35
+  - @nextui-org/spacer@2.0.27
+  - @nextui-org/spinner@2.0.28
+  - @nextui-org/switch@2.0.28
+  - @nextui-org/tooltip@2.0.33
+  - @nextui-org/user@2.0.28
+
 ## 2.3.5
 
 ### Patch Changes

packages/core/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/react",
-  "version": "2.3.5",
+  "version": "2.3.6",
   "description": "🚀 Beautiful and modern React UI library.",
   "author": "Junior Garcia <jrgarciadev@gmail.com>",
   "homepage": "https://nextui.org",

packages/core/theme/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @nextui-org/theme
 
+## 2.2.3
+
+### Patch Changes
+
+- [#2508](https://github.com/nextui-org/nextui/pull/2508) [`31934017a`](https://github.com/nextui-org/nextui/commit/31934017a54627cbc78583674e990dc66dbe303e) Thanks [@khatabakhsh](https://github.com/khatabakhsh)! - Improved styling for radio button labels, including adjustments for different screen sizes and support for right-to-left (RTL) languages. (#2507)
+
+- [#2660](https://github.com/nextui-org/nextui/pull/2660) [`25484f866`](https://github.com/nextui-org/nextui/commit/25484f866338cf6df549ba0b1082ffd57384eee2) Thanks [@sossost](https://github.com/sossost)! - Fixed slider component vertical mark y position focus (#2658)
+
+- [#2668](https://github.com/nextui-org/nextui/pull/2668) [`6b96ea9c9`](https://github.com/nextui-org/nextui/commit/6b96ea9c9c091d025a886361f50970599a260715) Thanks [@caebwallace](https://github.com/caebwallace)! - Fix custom slot styling with twMerge set to true (#2153)
+
 ## 2.2.2
 
 ### Patch Changes

packages/core/theme/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/theme",
-  "version": "2.2.2",
+  "version": "2.2.3",
   "description": "The default theme for NextUI components",
   "keywords": [
     "theme",

packages/core/theme/src/components/progress.ts

@@ -133,7 +133,7 @@ const progress = tv(
     ],
   },
   {
-    twMerge: false,
+    twMerge: true,
   },
 );
 

packages/core/theme/src/components/radio.ts

@@ -97,14 +97,14 @@ const radio = tv({
       md: {
         wrapper: "w-5 h-5",
         control: "w-2 h-2",
-        labelWrapper: "ml-2",
+        labelWrapper: "ml-2 rtl:mr-2 rtl:ml-[unset]",
         label: "text-medium",
         description: "text-small",
       },
       lg: {
         wrapper: "w-6 h-6",
         control: "w-2.5 h-2.5",
-        labelWrapper: "ml-2",
+        labelWrapper: "ml-2 rtl:mr-2 rtl:ml-[unset]",
         label: "text-large",
         description: "text-medium",
       },

packages/core/theme/src/components/slider.ts

@@ -144,7 +144,7 @@ const slider = tv({
         track: "h-full border-y-transparent",
         labelWrapper: "flex-col justify-center items-center",
         step: ["left-1/2", "-translate-x-1/2", "translate-y-1/2"],
-        mark: ["left-1/2", "ml-1", "translate-x-1/2", "-translate-y-1/2"],
+        mark: ["left-1/2", "ml-1", "translate-x-1/2", "translate-y-1/2"],
       },
       false: {
         thumb: "top-1/2",

packages/hooks/use-aria-accordion/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @nextui-org/use-aria-accordion
 
+## 2.0.4
+
+### Patch Changes
+
+- [#2063](https://github.com/nextui-org/nextui/pull/2063) [`10f2b8f42`](https://github.com/nextui-org/nextui/commit/10f2b8f42b1d208e4edea366c6bbc37ef8614ef6) Thanks [@black197](https://github.com/black197)! - Fixes ctrl+a keyboard shortcut enabled inside Accordion with `selectionMode="multiple"` (#2055)
+
 ## 2.0.3
 
 ### Patch Changes

packages/hooks/use-aria-accordion/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/use-aria-accordion",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "React-aria useAccordion hooks with custom implementations",
   "keywords": [
     "use-aria-accordion"

packages/hooks/use-aria-accordion/src/use-accordion.ts

@@ -29,6 +29,7 @@ export function useReactAriaAccordion<T>(
     ...props,
     ...state,
     allowsTabNavigation: true,
+    disallowSelectAll: true,
     ref,
   });
 

packages/hooks/use-aria-menu/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @nextui-org/use-aria-menu
 
+## 2.0.2
+
+### Patch Changes
+
+- [#2862](https://github.com/nextui-org/nextui/pull/2862) [`b8e6b2fe2`](https://github.com/nextui-org/nextui/commit/b8e6b2fe25bbbf52f656bbcac52fc00714f464bc) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Add react-dom as peerDependency to user-aria-menu hook
+
 ## 2.0.1
 
 ### Patch Changes

packages/hooks/use-aria-menu/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/use-aria-menu",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "React-aria useMenu hooks with custom implementations",
   "keywords": [
     "use-aria-menu"
@@ -34,7 +34,8 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=18",
+    "react-dom": ">=18"
   },
   "dependencies": {
     "@react-aria/utils": "^3.23.2",

pnpm-lock.yaml

@@ -1523,6 +1523,9 @@ importers:
       '@nextui-org/shared-utils':
         specifier: workspace:*
         version: link:../../utilities/shared-utils
+      '@nextui-org/use-safe-layout-effect':
+        specifier: workspace:*
+        version: link:../../hooks/use-safe-layout-effect
       '@react-aria/focus':
         specifier: ^3.16.2
         version: 3.16.2(react@18.2.0)
@@ -1563,6 +1566,9 @@ importers:
       react-dom:
         specifier: ^18.2.0
         version: 18.2.0(react@18.2.0)
+      react-hook-form:
+        specifier: ^7.51.3
+        version: 7.51.3(react@18.2.0)
 
   packages/components/kbd:
     dependencies:
@@ -3205,6 +3211,9 @@ importers:
       '@react-types/shared':
         specifier: ^3.22.1
         version: 3.22.1(react@18.2.0)
+      react-dom:
+        specifier: ^18.2.0
+        version: 18.2.0(react@18.2.0)
     devDependencies:
       clean-package:
         specifier: 2.2.0
@@ -5937,6 +5946,10 @@ packages:
     peerDependencies:
       '@effect-ts/otel-node': '*'
     peerDependenciesMeta:
+      '@effect-ts/core':
+        optional: true
+      '@effect-ts/otel':
+        optional: true
       '@effect-ts/otel-node':
         optional: true
     dependencies:
@@ -22430,6 +22443,9 @@ packages:
     resolution: {integrity: sha512-W+gxAq7aQ9dJIg/XLKGcRT0cvnStFAQHPaI0pvD0U2l6IVLueUAm3nwN7lkY62zZNmlvNx6jNtE4wlbS+CyqSg==}
     engines: {node: '>= 12.0.0'}
     hasBin: true
+    peerDependenciesMeta:
+      '@parcel/core':
+        optional: true
     dependencies:
       '@parcel/config-default': 2.12.0(@parcel/core@2.12.0)(typescript@4.9.5)
       '@parcel/core': 2.12.0