v2.2.0 🕹️

[jrgarciadev]

Closes #172
Closes #886
Closes #888
Closes #1685
Closes #694
Closes #1780
Closes #1737
Closes #1650
Closes #1804
Closes #1822
Closes #760
Closes #1670
Closes #1654
Closes #1534
Closes #1397
Closes #1650
Closes #1691
Closes #1837
Closes #1761

📝 Description

• New component added: Slider feat: Slider Component #1686
• New component added: Breadcrumbs Breadcrumbs component #1794
• New component: Single selection Autocomplete based on useComboBox and useComboBoxState
• React Aria Client side router support added, this allows components such as Link, Tabs, Listbox and Dropdown items to be rendered as links and navigate using the proper navigation function for each framework. Client side routing #1764
• RTL Support added to Accordion. feat: added RTL support to accordion component #1725
• RTL Support added to Avatar & AvatarGroup components feat: added RTL support to avatar and avatar group component #1727
• RTL Support added to ButtonGroup feat: added RTL support to button group component #1726
• Spacing units changed from px to rem this improves the mobile components' sizes refactor(root): styles refactor #1688
• Tabs/Tab new prop added shouldSelectOnPressUp which is enabled by default true, this prop defines whether the tabs selection should occur on press up instead of press down. refactor(root): styles refactor #1688
• Chip font size changed to text-tiny on sm size. refactor(root): styles refactor #1688
• Button with only the icon now displays only the spinner during loading fix(button): show only spinner if button isLoading & isIconOnly #1800
• Popover open state fixed for blur/opaque backdrops Fix blur/opaque Popover #1812
• The ScrollShadow API has been enhanced with new features. Users can now manage the visibility of shadows using the visibility and onVisibilityChange props. Feat/controlled scroll shadow #1819
• emptyContent property added to Listbox/Menu/Dropdown
• topContent and bottomContent properties added to Listbox/Menu/Dropdown
• baseRef added to Input, it allows to control the input's parent element ref
• tailwind-variants upgraded to v0.1.18 it includes slot variants control
• Custom usePress implemented to fix the corner press issue, opened a PR and Issue on react-aria project fix(interactions): Press up event adobe/react-spectrum#5291
• Custom usePress implemented across all NextUI interactive components
• Input & Select label animations & position improved
• react-aria packages and framer-motion upgraded
• Generic items typescript support added to Menu and DropdownMenu [BUG] - Typescript error with DropdownItem #1691
• Popover animation improved
• Package dependencies were modified to not include the ones already installed through either global or individual installations. This reduces the individual package bundle size. Fix/peer dependencies #1848
• Input outline removed on focus-visible
• ButtonGroup radius prop fixed
• isActive prop added to NavbarMenuItem
• Pagination custom-items example fixed, key prop added
• Collection Items are now supported by extendVariants function [BUG] - SelectItem & ListBoxItem extendVariants -> Error: type.getCollectionNode is not a function #1761
• Transition added to menu/listbox items
• disableAutosize prop added to Textarea, this disable the auto resize.
• Textarea styles fixed
• Textarea height style animated
• hoverOpacity key added to themes object in the plugin
• Button hover effect added

💣 Is this a breaking change (Yes/No): Yes

📝 Additional Information

Breaking Changes

• Popover API changed to improve the arrow implementation, arrow is now a pseudo-element, which allows the popover to also move the arrow altogether, this change impacts the Popover, Tooltip and Select implementations.

Popover changes:

  <Popover
      showArrow
      backdrop="opaque"
      placement="right"
      classNames={{
-        base: "py-3 px-4 border border-default-200 bg-gradient-to-br from-white to-default-300 dark:from-default-100 dark:to-default-50",
-        arrow: "bg-default-200",
+        base: [
+          // the "before" pseudo element is now the popover' arrow
+          "before:bg-default-200"
+        ],
+        content: [ // now we need to use the "content" slot to actually modify the popover' content styles
+          "py-3 px-4 border border-default-200",
+          "bg-gradient-to-br from-white to-default-300",
+          "dark:from-default-100 dark:to-default-50",
        ],
      }}
    >
      <PopoverTrigger>
        <Button>Open Popover</Button>
      </PopoverTrigger>
      <PopoverContent>
        {(titleProps) => (
          <div className="px-1 py-2">
            <h3 className="text-small font-bold" {...titleProps}>
              Popover Content
            </h3>
            <div className="text-tiny">This is the popover content</div>
          </div>
        )}
      </PopoverContent>
  </Popover>

Tooltip changes:

 <Tooltip
      showArrow
      placement="right"
      content="I am a tooltip"
      classNames={{
-        base: "py-2 px-4 shadow-xl text-black bg-gradient-to-br from-white to-neutral-400",
-        arrow: "bg-neutral-400 dark:bg-white",
+        base: [
+          // the "before" pseudo element is now the popover' arrow
+          "before:bg-neutral-400 dark:before:bg-white",
+        ],
+        content: [ // now we need to use the "content" slot to actually modify the popover' content styles
+          "py-2 px-4 shadow-xl",
+          "text-black bg-gradient-to-br from-white to-neutral-400",
+        ],
      }}
    >
      <Button variant="flat">Hover me</Button>
</Tooltip>

Select changes:

 <Select
      items={users}
      label="Assigned to"
      className="max-w-xs"
      variant="bordered"
      classNames={{
        label: "group-data-[filled=true]:-translate-y-5",
        trigger: "min-h-unit-16",
        listboxWrapper: "max-h-[400px]",
      }}
      listboxProps={{
        itemClasses: {
          base: [
            "rounded-md",
            "text-default-500",
            "transition-opacity",
            "data-[hover=true]:text-foreground",
            "data-[hover=true]:bg-default-100",
            "dark:data-[hover=true]:bg-default-50",
            "data-[selectable=true]:focus:bg-default-50",
            "data-[pressed=true]:opacity-70",
            "data-[focus-visible=true]:ring-default-500",
          ],
        },
      }}
      popoverProps={{
        classNames: {
-          base: "p-0 border-small border-divider bg-background",
-          arrow: "bg-default-200",
+          base: "before:bg-default-200", // the before pseudo element controls the popover's arrow
+          content: "p-0 border-small border-divider bg-background", // now instead of the "base" slot we use the "content" slot
        },
      }}
      renderValue={(items) => {
        return items.map((item) => (
          <div key={item.key} className="flex items-center gap-2">
            <Avatar
              alt={item.data.name}
              className="flex-shrink-0"
              size="sm"
              src={item.data.avatar}
            />
            <div className="flex flex-col">
              <span>{item.data.name}</span>
              <span className="text-default-500 text-tiny">({item.data.email})</span>
            </div>
          </div>
        ));
      }}
    >
      {(user) => (
        <SelectItem key={user.id} textValue={user.name}>
          <div className="flex gap-2 items-center">
            <Avatar alt={user.name} className="flex-shrink-0" size="sm" src={user.avatar} />
            <div className="flex flex-col">
              <span className="text-small">{user.name}</span>
              <span className="text-tiny text-default-400">{user.email}</span>
            </div>
          </div>
        </SelectItem>
      )}
    </Select>
  );
}`;

Dropdown Changes

    <Dropdown
      showArrow
      classNames={{
-        base: "py-1 px-1 border border-default-200 bg-gradient-to-br from-white to-default-200 dark:from-default-50 dark:to-black",
-        arrow: "bg-default-200",
+        content: "py-1 px-1 border border-default-200 bg-gradient-to-br from-white to-default-200 dark:from-default-50 dark:to-black",  // now instead of the "base" slot we use the "content" 
+        base: "before:bg-default-200",  // the before pseudo element controls the popover's arrow
      }}
    >

📝 Additional Information

[changeset-bot]

🦋 Changeset detected

Latest commit: ea19a78

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 59 packages

Name	Type
@nextui-org/button	Patch
@nextui-org/listbox	Patch
@nextui-org/tabs	Patch
@nextui-org/theme	Patch
@nextui-org/use-aria-accordion-item	Patch
@nextui-org/use-aria-modal-overlay	Patch
@nextui-org/use-aria-toggle-button	Patch
@nextui-org/use-aria-multiselect	Patch
@nextui-org/react-rsc-utils	Patch
@nextui-org/use-aria-accordion	Patch
@nextui-org/shared-icons	Patch
@nextui-org/pagination	Patch
@nextui-org/use-aria-button	Patch
@nextui-org/accordion	Patch
@nextui-org/use-disclosure	Patch
@nextui-org/aria-utils	Patch
@nextui-org/checkbox	Patch
@nextui-org/dropdown	Patch
@nextui-org/progress	Patch
@nextui-org/use-aria-link	Patch
@nextui-org/divider	Patch
@nextui-org/popover	Patch
@nextui-org/snippet	Patch
@nextui-org/tooltip	Patch
@nextui-org/avatar	Patch
@nextui-org/navbar	Patch
@nextui-org/select	Patch
@nextui-org/slider	Patch
@nextui-org/switch	Patch
@nextui-org/badge	Patch
@nextui-org/input	Patch
@nextui-org/modal	Patch
@nextui-org/radio	Patch
@nextui-org/table	Patch
@nextui-org/card	Patch
@nextui-org/chip	Patch
@nextui-org/link	Patch
@nextui-org/menu	Patch
@nextui-org/user	Patch
@nextui-org/kbd	Patch
@nextui-org/system	Patch
@nextui-org/react	Patch
@nextui-org/breadcrumbs	Patch
@nextui-org/framer-transitions	Patch
@nextui-org/autocomplete	Patch
@nextui-org/use-aria-press	Patch
@nextui-org/test-utils	Patch
@nextui-org/ripple	Patch
@nextui-org/system-rsc	Patch
@nextui-org/use-data-scroll-overflow	Patch
@nextui-org/scroll-shadow	Patch
@nextui-org/stories-utils	Patch
@nextui-org/skeleton	Patch
@nextui-org/spinner	Patch
@nextui-org/spacer	Patch
@nextui-org/image	Patch
@nextui-org/code	Patch
@nextui-org/react-utils	Patch
@nextui-org/use-real-shape	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
nextui-docs-v2	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 3, 2023 0:18am
nextui-storybook-v2	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 3, 2023 0:18am

[sayem314]

Any ETA for release? Need range slider by next week or must go with 3rd party lib by then.

[toxsick]

Hey @jrgarciadev, the new Autocomplete component looks awesome, but is there any chance we can have something like renderValue of the Select to render a custom selected values?

Thanks for the awesome work!

[jrgarciadev]

Hey @jrgarciadev, the new Autocomplete component looks awesome, but is there any chance we can have something like renderValue of the Select to render a custom selected values?

Thanks for the awesome work!

Hey @toxsick thanks!, we plan to add custom render value support later, once we include the multiple selection mode