Skip to content

Virtualized list with @tanstack/react-virtual #1964

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 1 commit into from
Oct 28, 2025
Merged

Virtualized list with @tanstack/react-virtual #1964

merged 1 commit into from
Oct 28, 2025

Conversation

@HichamELBSI
Copy link
Collaborator

@HichamELBSI HichamELBSI commented Oct 9, 2025

What does it do?

Add optional virtualized list for combobox (implemented to the timepicker).

Why is it needed?

To improve the TimePicker (and Combobox) performances on long list.

How to test it?

  • Set step = 1 to a TimePicker and try to use it.

Related issue(s)/PR(s)

Let us know if this is related to any issue/pull request

Before fix: https://www.loom.com/share/07fc90f6b02543b48e18a3f036150c70

After fix: https://www.loom.com/share/f740d3fd31424e6285ea05517bebb342

@HichamELBSI HichamELBSI requested review from Adzouz and butcherZ October 9, 2025 15:20
@changeset-bot
Copy link

changeset-bot bot commented Oct 9, 2025 •
edited
Loading

🦋 Changeset detected

Latest commit: 1b1c5d5

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

This PR includes changesets to release 3 packages
Name Type
@strapi/design-system Major
@strapi/ui-primitives Major
@strapi/icons Major

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
Copy link

vercel bot commented Oct 9, 2025 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Comments Updated (UTC)
design-system Ready Ready Preview Comment Oct 27, 2025 3:40pm

@HichamELBSI HichamELBSI added source: design-system relates to design-system package pr: fix This PR is fixing a bug labels Oct 13, 2025
@HichamELBSI HichamELBSI force-pushed the fix/virtualized-combobox branch 2 times, most recently from e5b8141 to 8228a8e Compare October 13, 2025 07:28
Adzouz
Adzouz reviewed Oct 14, 2025
View reviewed changes
Copy link
Contributor

@Adzouz Adzouz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tested and it really improves performance, well done 👏
Just a few questions / comments!

packages/design-system/src/components/Combobox/Combobox.tsx Outdated
onChange,
onClear,
onCreateOption,
virtualized = false,
Copy link
Contributor

@Adzouz Adzouz Oct 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Question here: I get that we want to keep the default behaviour as much as possible but wouldn't it be also possible to turn on the virtualization automatically if the number of items exceed a limit (for example for a dynamic list we don't know how many elements it could have)?

.changeset/famous-trees-jog.md
@@ -0,0 +1,6 @@
---
'@strapi/design-system': major
Copy link
Contributor

@Adzouz Adzouz Oct 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since it's not really breaking anything, is it really necessary to bump to a major?

.changeset/famous-trees-jog.md
'@strapi/ui-primitives': major
---

Add virtualization as an option to combobox list
Copy link
Contributor

@Adzouz Adzouz Oct 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We decided to also stick to conventional commits for changesets messages format :)

@remidej remidej removed their request for review October 14, 2025 12:13
@HichamELBSI HichamELBSI force-pushed the fix/virtualized-combobox branch from d83aa0f to 3f031d4 Compare October 15, 2025 08:12
@HichamELBSI HichamELBSI removed the request for review from markkaylor October 15, 2025 11:48
@HichamELBSI
Copy link
Collaborator Author

HichamELBSI commented Oct 15, 2025 •
edited
Loading

There are some issue with the combobox input events (change, clear, blur) because of the virtualization. I'll post pone the fix on the combobox performance.

@HichamELBSI HichamELBSI added the flag: don't merge This PR should not be merged at the moment label Oct 15, 2025
@HichamELBSI HichamELBSI force-pushed the fix/virtualized-combobox branch 2 times, most recently from 75e38fd to 573c5fa Compare October 17, 2025 19:52
@HichamELBSI
Copy link
Collaborator Author

HichamELBSI commented Oct 17, 2025

The issue has been fixed by disabling the virtualization as soon as the list is being filtered. It solves most of the issues.

@HichamELBSI HichamELBSI removed the flag: don't merge This PR should not be merged at the moment label Oct 17, 2025
@HichamELBSI HichamELBSI requested a review from Adzouz October 17, 2025 19:53
@HichamELBSI HichamELBSI added this to the v2.0.0 milestone Oct 20, 2025
mazzucchelli
mazzucchelli reviewed Oct 27, 2025
View reviewed changes
Copy link
Contributor

@mazzucchelli mazzucchelli left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tested locally and it works well, GJ! Code looks good too 🏅

On top of what Adrien already shared for changeset, there are a couple of comments you might want to clean before merging the PR

// virtualization props removed; virtualization is automatic

// (no lazy render function required anymore)

The issue has been fixed by disabling the virtualization as soon as the list is being filtered. It solves most of the issues.

About this, there's still a decent delay in the rendering when the user wants to filter the timepicker. Have you already tried to debounce the onChange event handler?

@HichamELBSI
Copy link
Collaborator Author

HichamELBSI commented Oct 27, 2025

I tested locally and it works well, GJ! Code looks good too 🏅

On top of what Adrien already shared for changeset, there are a couple of comments you might want to clean before merging the PR

// virtualization props removed; virtualization is automatic

// (no lazy render function required anymore)

The issue has been fixed by disabling the virtualization as soon as the list is being filtered. It solves most of the issues.

About this, there's still a decent delay in the rendering when the user wants to filter the timepicker. Have you already tried to debounce the onChange event handler?

Thanks for the review, I'll remove the comments. I tried the debounce but with the same result, the issue is that we want to render a descent amount of elements in the dom. The timepicker (step=1) is rendering more than 1700, filtering this list is heavy no matter what we are doing. The debounce is just moving the delay. I've seen similar issue while trying other UI libraries (chakra combobox, shadcn combobox but it is based on Radix as well 😅 ). A long term fix must be a UX one I guess (the https://imask.js.org/ you have shared few weeks ago could replace the timepicker but this requires some alignments with product designer and product manager).

@HichamELBSI HichamELBSI force-pushed the fix/virtualized-combobox branch from 573c5fa to 1b1c5d5 Compare October 27, 2025 15:36
@sonarqubecloud
Copy link

sonarqubecloud bot commented Oct 27, 2025

Quality Gate Failed Quality Gate failed

Failed conditions
C Reliability Rating on New Code (required ≥ A)

See analysis details on SonarQube Cloud

Catch issues before they fail your Quality Gate with our IDE extension SonarQube for IDE

@HichamELBSI HichamELBSI merged commit ace623b into main Oct 28, 2025
9 of 12 checks passed
@HichamELBSI HichamELBSI deleted the fix/virtualized-combobox branch October 28, 2025 13:41
@github-actions github-actions bot mentioned this pull request Oct 17, 2025
Merged
HichamELBSI added a commit that referenced this pull request Nov 5, 2025
@HichamELBSI
chore: version packages for release (#1961)
a4f1a8f 
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.


# Releases
## @strapi/[email protected]

### Major Changes

- [#1744](#1744)
[`a292dc3`](a292dc3)
Thanks [@joshuaellis](https://github.com/joshuaellis)! - chore!:
refactor Radio to use radix primitive

- [#1734](#1734)
[`9ec3c38`](9ec3c38)
Thanks [@joshuaellis](https://github.com/joshuaellis)! - chore: refactor
Switch to use radix primitive

- [#1744](#1744)
[`6040949`](6040949)
Thanks [@joshuaellis](https://github.com/joshuaellis)! - chore!:
refactor ModalLayout to Modal and use radix-ui primitives

- [#1744](#1744)
[`833b58f`](833b58f)
Thanks [@joshuaellis](https://github.com/joshuaellis)! -
chore!(design-system): remove deprecated components. Most components
have a V2 counterpart and those that do not e.g. Select have been split
into separate components to handle Single & MultiSelect. Stack was just
an alias of Flex so that should be used instead.

- [#1693](#1693)
[`ec2fc0c`](ec2fc0c)
Thanks [@madhurisandbhor](https://github.com/madhurisandbhor)! -
enhancement!: removed field wrapper components from inputs to streamline
and inputs stories are moved under `stories/inputs` folder.

- [#1894](#1894)
[`23b4a59`](23b4a59)
Thanks [@HichamELBSI](https://github.com/HichamELBSI)! - fix searchbar
clear button type

- [#1960](#1960)
[`09ecec5`](09ecec5)
Thanks [@butcherZ](https://github.com/butcherZ)! - fix clear button for
DateTimePicker

- [#1693](#1693)
[`ec2fc0c`](ec2fc0c)
Thanks [@madhurisandbhor](https://github.com/madhurisandbhor)! - chore!:
remove CreatableCombobox

    Users should instead use `<Combobox createable />`.

- [#1722](#1722)
[`f28dda1`](f28dda1)
Thanks [@joshuaellis](https://github.com/joshuaellis)! - chore!:
streamline IconButton API

    -   remove `icon` prop
    -   remove `ariaLabel` prop
    -   add `withTooltip` prop (default false)

    `children` & `label` are now required props.

- [#1695](#1695)
[`649d0f5`](649d0f5)
Thanks [@christiancp100](https://github.com/christiancp100)! - chore!:
default color for Typography is currentColor

- [#1964](#1964)
[`1b1c5d5`](1b1c5d5)
Thanks [@HichamELBSI](https://github.com/HichamELBSI)! - Add
virtualization as an option to combobox list

- [#1693](#1693)
[`ec2fc0c`](ec2fc0c)
Thanks [@madhurisandbhor](https://github.com/madhurisandbhor)! -
enhancement!: ToggleInput renamed to just Toggle

- [#1727](#1727)
[`490835e`](490835e)
Thanks [@joshuaellis](https://github.com/joshuaellis)! - chore!:
refactor Dialog component to use radix primitive

- [#1898](#1898)
[`8d8ccba`](8d8ccba)
Thanks [@HichamELBSI](https://github.com/HichamELBSI)! - TimePicker
input pattern

- [#1892](#1892)
[`7767141`](7767141)
Thanks [@HichamELBSI](https://github.com/HichamELBSI)! - fix searchbar
component

- [#1737](#1737)
[`daae1f0`](daae1f0)
Thanks [@madhurisandbhor](https://github.com/madhurisandbhor)! - feat:
responsive props are now supported in base Box component and removed
existing media queries from theme

- [#1744](#1744)
[`5ff487b`](5ff487b)
Thanks [@joshuaellis](https://github.com/joshuaellis)! - chore!:
refactor Avatar component to use radix primitive

- [#1744](#1744)
[`569133b`](569133b)
Thanks [@joshuaellis](https://github.com/joshuaellis)! - chore!:
refactor Checkbox to use radix primitive

- [#1958](#1958)
[`8018392`](8018392)
Thanks [@HichamELBSI](https://github.com/HichamELBSI)! - Fix grid item
column fallback value

- [#1896](#1896)
[`fd58c67`](fd58c67)
Thanks [@HichamELBSI](https://github.com/HichamELBSI)! - modal animation
fix

- [#1718](#1718)
[`981d6d0`](981d6d0)
Thanks [@joshuaellis](https://github.com/joshuaellis)! - chore!: remove
size from inputs

`size` was used to give our inputs a fixed size, this would not have
worked with different writing directions or be very responsive. Instead,
we use logical padding values.

- [#1710](#1710)
[`adbe237`](adbe237)
Thanks [@joshuaellis](https://github.com/joshuaellis)! - chore!:
CardAction is now a react component

- [#1744](#1744)
[`6040949`](6040949)
Thanks [@joshuaellis](https://github.com/joshuaellis)! - chore!:
refactor Grid to be composite component

- [#1744](#1744)
[`43d440e`](43d440e)
Thanks [@joshuaellis](https://github.com/joshuaellis)! - chore!:
refactor Tabs component to use radix primitive

- [#1718](#1718)
[`981d6d0`](981d6d0)
Thanks [@joshuaellis](https://github.com/joshuaellis)! - chore!: all
XXSize & XXVariant types are now singular

    This is consistent across the codebase.

- [#1744](#1744)
[`7c81e86`](7c81e86)
Thanks [@joshuaellis](https://github.com/joshuaellis)! - chore!: remove
ThemeProvider

`ThemeProvider` has been removed and replaced with
`DesignSystemProvider`.

- [#1744](#1744)
[`a843b4c`](a843b4c)
Thanks [@joshuaellis](https://github.com/joshuaellis)! - chore!:
refactor Popover to use radix-ui primitive

- [#1696](#1696)
[`1622c2b`](1622c2b)
Thanks [@joshuaellis](https://github.com/joshuaellis)! - chore!: remove
the Icon component

Users should instead apply `fill` and `stroke` directly to the icon
component as theme colors are now possible.

- [#1744](#1744)
[`9e68153`](9e68153)
Thanks [@joshuaellis](https://github.com/joshuaellis)! - chore!: remove
direct imports. Users should import everything from the root of the
project instead.

- [#1713](#1713)
[`1613d94`](1613d94)
Thanks [@joshuaellis](https://github.com/joshuaellis)! - feat!: refactor
Field api

- [#1744](#1744)
[`8b7afb1`](8b7afb1)
Thanks [@joshuaellis](https://github.com/joshuaellis)! - chore!: change
z-indexes on theme from array to dictionary

`z-indices` on the theme object were an array of length 4. We've since
changed this to a dictionary to help engineers understand how to
correctly apply these values. See the `Elevation` documentation for more
information.

- [#1732](#1732)
[`4972ad1`](4972ad1)
Thanks [@joshuaellis](https://github.com/joshuaellis)! - chore: refactor
ProgressBar to use radix primitive

- [#1855](#1855)
[`ac908a2`](ac908a2)
Thanks [@HichamELBSI](https://github.com/HichamELBSI)! - Migration guide
update

- [#1703](#1703)
[`54ebfad`](54ebfad)
Thanks [@madhurisandbhor](https://github.com/madhurisandbhor)! - chore!:
removed CMS specific components.The following components have been
removed from DS and moved to CMS where it belongs.

    -   `Layout`
    -   `HeaderLayout`
    -   `TwoColsLayout`
    -   `GridLayout`
    -   `ActionLayout`
    -   `ContentLayout`

- [#1719](#1719)
[`dd79369`](dd79369)
Thanks [@joshuaellis](https://github.com/joshuaellis)! - chore!: remove
deprecated options & change selectedDate prop to be value on DatePicker

- [#1744](#1744)
[`00e131b`](00e131b)
Thanks [@joshuaellis](https://github.com/joshuaellis)! -
refactor!(design-system): set base font-size to 62.5% to be 10px, users
should stop dividing their px values by 16 and instead divide by 10.
This will make it easier to convert px to rem.

- [#1695](#1695)
[`649d0f5`](649d0f5)
Thanks [@christiancp100](https://github.com/christiancp100)! - chore:
Box/Flex/Grid & Typography are now all react components, they are no
longer styled-components.

- [#1695](#1695)
[`649d0f5`](649d0f5)
Thanks [@christiancp100](https://github.com/christiancp100)! - chore:
update to use styled-components@6

- [#1721](#1721)
[`940110c`](940110c)
Thanks [@joshuaellis](https://github.com/joshuaellis)! - feat!: refactor
Accordion to use radix primitive

The Accordion API has changed significently whilst retaining it's
functionality, we recommend your review the documentation to understand
the changes and how to migrate your code.

- [#1695](#1695)
[`649d0f5`](649d0f5)
Thanks [@christiancp100](https://github.com/christiancp100)! - chore:
disallow use of as and instead use tag prop instead

- [#1897](#1897)
[`e73b1d5`](e73b1d5)
Thanks [@HichamELBSI](https://github.com/HichamELBSI)! - update cursor
on disabled inputs

- [#1835](#1835)
[`fd5e74b`](fd5e74b)
Thanks [@HichamELBSI](https://github.com/HichamELBSI)! - Bump ViteJS

- [#1722](#1722)
[`f28dda1`](f28dda1)
Thanks [@joshuaellis](https://github.com/joshuaellis)! - feat!: refactor
Tooltip to use radix-ui

The Tooltip API has changed significently whilst retaining it's
functionality, we recommend your review the documentation to understand
the changes and how to migrate your code.

### Minor Changes

- [#1966](#1966)
[`5c5512c`](5c5512c)
Thanks [@HichamELBSI](https://github.com/HichamELBSI)! - fix: move
searchbar to real search input type

- [#1967](#1967)
[`b99d984`](b99d984)
Thanks [@HoldenFolk](https://github.com/HoldenFolk)! - Add variants to
Badge component

- [#1697](#1697)
[`6f59131`](6f59131)
Thanks [@joshuaellis](https://github.com/joshuaellis)! - feat:
typography now extends Box

- [#1727](#1727)
[`490835e`](490835e)
Thanks [@joshuaellis](https://github.com/joshuaellis)! - feat: export
useMeasure, useControllableState, useId & useIsomorphicLayoutEffect

- [#1939](#1939)
[`ff20b38`](ff20b38)
Thanks [@markkaylor](https://github.com/markkaylor)! - export
Popover.Anchor

- [#1910](#1910)
[`2ad3e90`](2ad3e90)
Thanks [@simotae14](https://github.com/simotae14)! - fix: combobox
creatable button background on hover

- [#1744](#1744)
[`732330a`](732330a)
Thanks [@joshuaellis](https://github.com/joshuaellis)! - feat: add logic
spacing properties

- [#1744](#1744)
[`f328dee`](f328dee)
Thanks [@joshuaellis](https://github.com/joshuaellis)! - feat: add
ScrollArea component

- [#1963](#1963)
[`25b6330`](25b6330)
Thanks [@HichamELBSI](https://github.com/HichamELBSI)! - DatePicker
performance issue

- [#1826](#1826)
[`0871c2c`](0871c2c)
Thanks [@mukulpadwal](https://github.com/mukulpadwal)! - Updated hover
styles to apply correct color for text and SVG icons

- [#1912](#1912)
[`604ef36`](604ef36)
Thanks [@simotae14](https://github.com/simotae14)! - fix: carousel slide
display when selected

- [#1812](#1812)
[`663daf7`](663daf7)
Thanks [@butcherZ](https://github.com/butcherZ)! - add a11y add-on for
storybook

- [#1744](#1744)
[`a5c4031`](a5c4031)
Thanks [@joshuaellis](https://github.com/joshuaellis)! - feat: add
motion properties to theme as well as transitions

- [#1905](#1905)
[`15c87c5`](15c87c5)
Thanks [@simotae14](https://github.com/simotae14)! - feat: add creatable
option set to visible

- [#1907](#1907)
[`39fc51d`](39fc51d)
Thanks [@simotae14](https://github.com/simotae14)! - fix: combobox
creatable visible close when clicked

- [#1918](#1918)
[`4a9b3e5`](4a9b3e5)
Thanks [@simotae14](https://github.com/simotae14)! - chore: enable the
ds pre-release gh action

- [#1735](#1735)
[`de40090`](de40090)
Thanks [@joshuaellis](https://github.com/joshuaellis)! - feat:
reimplement size prop

- [#1957](#1957)
[`c40cac6`](c40cac6)
Thanks [@Adzouz](https://github.com/Adzouz)! - fix(design-system):
improve responsiveness of Dialog and Modal

- [#1913](#1913)
[`187d18a`](187d18a)
Thanks [@simotae14](https://github.com/simotae14)! - fix: solve the
cropped box shadow in input elements when focused

- [#1748](#1748)
[`61936d6`](61936d6)
Thanks [@madhurisandbhor](https://github.com/madhurisandbhor)! - chore:
standardise forwardRefs across components

- [#1822](#1822)
[`3d7125f`](3d7125f)
Thanks [@mukulpadwal](https://github.com/mukulpadwal)! - Added XS size
variant to IconButton component for smaller button options.

- [#1794](#1794)
[`8bd760b`](8bd760b)
Thanks [@jhoward1994](https://github.com/jhoward1994)! - pass props to
icons in accordion triggers

- [#1850](#1850)
[`1d5c646`](1d5c646)
Thanks [@markkaylor](https://github.com/markkaylor)! - add start and end
icons to MenuItem

- [#1911](#1911)
[`9600413`](9600413)
Thanks [@simotae14](https://github.com/simotae14)! - feat: add disabled
mode to the combobox create item option

- [#1937](#1937)
[`430a40f`](430a40f)
Thanks [@simotae14](https://github.com/simotae14)! - fix: modify the
creatable ui to reflect the desired style

- [#1950](#1950)
[`7d49b5f`](7d49b5f)
Thanks [@Adzouz](https://github.com/Adzouz)! - fix: dark mode switch in
stories and colors page

- [#1965](#1965)
[`48566b3`](48566b3)
Thanks [@HichamELBSI](https://github.com/HichamELBSI)! - fix: link color
(icon + text) in simple menu

- [#1744](#1744)
[`7e1c4b0`](7e1c4b0)
Thanks [@joshuaellis](https://github.com/joshuaellis)! -
feat(multiselect): add size prop

- [#1941](#1941)
[`bf30a2b`](bf30a2b)
Thanks [@markkaylor](https://github.com/markkaylor)! - export popover
arrow

### Patch Changes

- [#1758](#1758)
[`4b0cf89`](4b0cf89)
Thanks [@madhurisandbhor](https://github.com/madhurisandbhor)! - simple
menu with icon should work now as expected

- [#1932](#1932)
[`42269cf`](42269cf)
Thanks [@Adzouz](https://github.com/Adzouz)! - fix: glitch of height on
inputs caused by wrong padding on IconButton

- [#1846](#1846)
[`a511ac5`](a511ac5)
Thanks [@remidej](https://github.com/remidej)! - feat: add menu
separator component

- [#1780](#1780)
[`4e0baaf`](4e0baaf)
Thanks [@HichamELBSI](https://github.com/HichamELBSI)! - fix various
size issues

- [#1760](#1760)
[`6972656`](6972656)
Thanks [@simotae14](https://github.com/simotae14)! - fix aria-disabled
css rule on menu item

- [#1801](#1801)
[`bcc2862`](bcc2862)
Thanks [@remidej](https://github.com/remidej)! - add xs size to status
component

- [#1774](#1774)
[`ee58ac1`](ee58ac1)
Thanks [@madhurisandbhor](https://github.com/madhurisandbhor)! - fix:
accordian styles

- [#1770](#1770)
[`49bf5c1`](49bf5c1)
Thanks [@madhurisandbhor](https://github.com/madhurisandbhor)! - fix:
multiple ui style fixes

- [#1880](#1880)
[`6e78ead`](6e78ead)
Thanks [@lucasboilly](https://github.com/lucasboilly)! - fix: scrollbar
ui

- [#1738](#1738)
[`8a87483`](8a87483)
Thanks [@joshuaellis](https://github.com/joshuaellis)! -
fix(IconButton): sizing was wrong compared to other buttons

- [#1744](#1744)
[`01ff7ca`](01ff7ca)
Thanks [@joshuaellis](https://github.com/joshuaellis)! -
fix(design-system): edit Divider accessibility design

- [#1771](#1771)
[`d230d45`](d230d45)
Thanks [@madhurisandbhor](https://github.com/madhurisandbhor)! - fix:
animations fixed as per requirement

- [#1885](#1885)
[`a67838b`](a67838b)
Thanks [@ankit7201](https://github.com/ankit7201)! - Fixed accordion
title overflow issue

- [#1878](#1878)
[`373138b`](373138b)
Thanks [@lucasboilly](https://github.com/lucasboilly)! - feat: use xs
iconbutton for combobox, datepicker and searchbar

- [#1750](#1750)
[`d89c9c3`](d89c9c3)
Thanks [@madhurisandbhor](https://github.com/madhurisandbhor)! - Fixed:
Link doesn't show the hover color

- [#1877](#1877)
[`a356b03`](a356b03)
Thanks [@lucasboilly](https://github.com/lucasboilly)! - fix: remove
selected item background

- [#1922](#1922)
[`a42d42c`](a42d42c)
Thanks [@Adzouz](https://github.com/Adzouz)! - fix: min-width of
DatePicker and TimePicker

- [#1927](#1927)
[`eafb1e3`](eafb1e3)
Thanks [@lucasboilly](https://github.com/lucasboilly)! - fix:
multi-select items style and clear button

- [#1829](#1829)
[`a63bb74`](a63bb74)
Thanks [@markkaylor](https://github.com/markkaylor)! - add disabled prop
to menu trigger not applied through asChild

- [#1923](#1923)
[`20fb5ea`](20fb5ea)
Thanks [@Adzouz](https://github.com/Adzouz)! - fix: variant danger and
icon color in menu item

- [#1744](#1744)
[`f785c2c`](f785c2c)
Thanks [@joshuaellis](https://github.com/joshuaellis)! - fix: set dev
dependencies correctly to avoid styled-components being bundled

- [#1769](#1769)
[`0928a5d`](0928a5d)
Thanks [@madhurisandbhor](https://github.com/madhurisandbhor)! - fix:
field input padding updated to show correct highlight in autocomplete

- [#1833](#1833)
[`ba28ea1`](ba28ea1)
Thanks [@ShatilKhan](https://github.com/ShatilKhan)! - cleaner search
bar

- [#1769](#1769)
[`0928a5d`](0928a5d)
Thanks [@madhurisandbhor](https://github.com/madhurisandbhor)! - fix:
ghost button active style border removed

- [#1709](#1709)
[`2f198e9`](2f198e9)
Thanks [@joshuaellis](https://github.com/joshuaellis)! -
fix(design-system): codemirror packages that aren't in package.json are
declared as external

- [#1759](#1759)
[`2ee82d3`](2ee82d3)
Thanks [@simotae14](https://github.com/simotae14)! - change modal
content height and max height

- [#1955](#1955)
[`157f2f1`](157f2f1)
Thanks [@Adzouz](https://github.com/Adzouz)! - fix(design-system):
module declaration fixes local linking

- [#1845](#1845)
[`ef9cd18`](ef9cd18)
Thanks [@remidej](https://github.com/remidej)! - feat: add
onCloseAutoFocus to Menu.Content

- [#1744](#1744)
[`063e574`](063e574)
Thanks [@joshuaellis](https://github.com/joshuaellis)! - fix(accordion):
variant should apply to header not all accordions

- [#1764](#1764)
[`69b23b7`](69b23b7)
Thanks [@madhurisandbhor](https://github.com/madhurisandbhor)! - fix:
badge to allow possible values for background and text color

- [#1765](#1765)
[`ae052a2`](ae052a2)
Thanks [@madhurisandbhor](https://github.com/madhurisandbhor)! - fix:
link hover color apply to its label and not to children

- [#1744](#1744)
[`cb0147b`](cb0147b)
Thanks [@joshuaellis](https://github.com/joshuaellis)! - fix: use px for
media queries as font-size won't affect media queries

- [#1840](#1840)
[`cbf07ea`](cbf07ea)
Thanks [@dzakki](https://github.com/dzakki)! - sync view source to the
correct path

- [#1847](#1847)
[`e25a380`](e25a380)
Thanks [@remidej](https://github.com/remidej)! - fix: pass menu
separator ref

- [#1821](#1821)
[`0693ce9`](0693ce9)
Thanks [@PlanckConst](https://github.com/PlanckConst)! - fix: Checkbox
Item Not Centered

Added justify-content: center and align-items: center to Checkbox
Indicator component

    Original:

    const CheckboxIndicator = styled(Checkbox.Indicator)`  width: 100%;
    height: 100%;
    cursor: pointer;`;

    Updated:

    const CheckboxIndicator = styled(Checkbox.Indicator)\`

    -   display: inline-flex;
    -   pointer-events: auto !important;
        width: 100%;
        height: 100%;
        cursor: pointer;
    -   justify-content: center;
    -   align-items: center;
        \`;

Refactored inline styling and added it to checkbox indicator stype
component

    Original:

<CheckboxIndicator style={{ display: 'inline-flex', pointerEvents:
'auto'}} forceMount>

    Updated:

          <CheckboxIndicator forceMount>

- [#1699](#1699)
[`9fdfdde`](9fdfdde)
Thanks [@joshuaellis](https://github.com/joshuaellis)! - fix: main nav
icon size was set to 1rem it should be 1.6rem

- [#1761](#1761)
[`60dd5ee`](60dd5ee)
Thanks [@madhurisandbhor](https://github.com/madhurisandbhor)! - fix:
icon button default size updated to small

- [#1879](#1879)
[`4e7d782`](4e7d782)
Thanks [@lucasboilly](https://github.com/lucasboilly)! - fix: add
scrollbar to combobox

- [#1844](#1844)
[`1b5a2d0`](1b5a2d0)
Thanks [@jorrit](https://github.com/jorrit)! - Fix inflated package size
because direct dependencies not listed in package.json

- [#1933](#1933)
[`cc6c2db`](cc6c2db)
Thanks [@spruce](https://github.com/spruce)! - fix: allow vertically
resizing Textarea

- [#1753](#1753)
[`9df216b`](9df216b)
Thanks [@simotae14](https://github.com/simotae14)! - fixed Modal Content
scroll issues

- [#1752](#1752)
[`90da62e`](90da62e)
Thanks [@remidej](https://github.com/remidej)! - fixed SubNavHeader not
applying space between label and search icon

- [#1754](#1754)
[`2c9c4ea`](2c9c4ea)
Thanks [@jhoward1994](https://github.com/jhoward1994)! - change github
action to use default github secret

- [#1766](#1766)
[`d62d58b`](d62d58b)
Thanks [@madhurisandbhor](https://github.com/madhurisandbhor)! - fix:
removed static placeholder from subnavheader

- [#1784](#1784)
[`6f405fa`](6f405fa)
Thanks [@remidej](https://github.com/remidej)! - fix carousel input
icons

- [#1769](#1769)
[`0928a5d`](0928a5d)
Thanks [@madhurisandbhor](https://github.com/madhurisandbhor)! - fix:
popover default border radius added

- [#1793](#1793)
[`fae2bf8`](fae2bf8)
Thanks [@Sam-Phillemon9493](https://github.com/Sam-Phillemon9493)! -
patch for hovering effect

- [#1921](#1921)
[`d7c9c41`](d7c9c41)
Thanks [@Adzouz](https://github.com/Adzouz)! - fix: wrong color of
placeholders

- [#1749](#1749)
[`c7c5ad6`](c7c5ad6)
Thanks [@madhurisandbhor](https://github.com/madhurisandbhor)! - fix:
add click action on tag icon instead of on tag itself

- [#1786](#1786)
[`dc49935`](dc49935)
Thanks [@Feranchz](https://github.com/Feranchz)! - fix select bugs with
startIcon

- [#1920](#1920)
[`7c70603`](7c70603)
Thanks [@Adzouz](https://github.com/Adzouz)! - fix: improve responsive
of the DateTimePicker

- [#1834](#1834)
[`bf538d1`](bf538d1)
Thanks [@mazzucchelli](https://github.com/mazzucchelli)! - Prevent
tooltip from rendering when the label property is not passed

- [#1889](#1889)
[`44004d6`](44004d6)
Thanks [@Marc-Roig](https://github.com/Marc-Roig)! - fix: menu z-index

- [#1856](#1856)
[`10f026c`](10f026c)
Thanks [@hansemannn](https://github.com/hansemannn)! - fix: add missing
scrollbar to select elements

- [#1930](#1930)
[`21676c1`](21676c1)
Thanks [@Adzouz](https://github.com/Adzouz)! - fix: wrapping content of
dialog in overlay to restore pointer-events

- [#1744](#1744)
[`6040949`](6040949)
Thanks [@joshuaellis](https://github.com/joshuaellis)! -
fix(design-system): time-picker icon was too small

- [#1744](#1744)
[`7e1c4b0`](7e1c4b0)
Thanks [@joshuaellis](https://github.com/joshuaellis)! - fix(link):
isExternal should be false by default

- [#1775](#1775)
[`9babd08`](9babd08)
Thanks [@madhurisandbhor](https://github.com/madhurisandbhor)! - fix:
responsive breakpoint for large screens updated to 1080px as per design

- [#1917](#1917)
[`d74f4c3`](d74f4c3)
Thanks [@Adzouz](https://github.com/Adzouz)! - fix: modal issues
(scrolling and combobox)

- [#1928](#1928)
[`a3535e7`](a3535e7)
Thanks [@Adzouz](https://github.com/Adzouz)! - fix: disabled checked
checkboxes border

- Updated dependencies
\[[`f2ad83e`](f2ad83e),
[`23b4a59`](23b4a59),
[`1b1c5d5`](1b1c5d5),
[`49bf5c1`](49bf5c1),
[`8d8ccba`](8d8ccba),
[`f785c2c`](f785c2c),
[`7767141`](7767141),
[`8018392`](8018392),
[`fd58c67`](fd58c67),
[`15c87c5`](15c87c5),
[`39fc51d`](39fc51d),
[`4a9b3e5`](4a9b3e5),
[`1b5a2d0`](1b5a2d0),
[`2c9c4ea`](2c9c4ea),
[`ac908a2`](ac908a2),
[`e73b1d5`](e73b1d5),
[`fd5e74b`](fd5e74b),
[`f949efb`](f949efb)]:
    -   @strapi/[email protected]

## @strapi/[email protected]

### Major Changes

- [#1696](#1696)
[`1622c2b`](1622c2b)
Thanks [@joshuaellis](https://github.com/joshuaellis)! - chore!: removes
some icons and renames others

Users should refer to the BREAKING_CHANGES.md for more information on
how to migrate. Most of the icons have been visually changed. Snapshots
will most likely need to be updated.

- [#1894](#1894)
[`23b4a59`](23b4a59)
Thanks [@HichamELBSI](https://github.com/HichamELBSI)! - fix searchbar
clear button type

- [#1898](#1898)
[`8d8ccba`](8d8ccba)
Thanks [@HichamELBSI](https://github.com/HichamELBSI)! - TimePicker
input pattern

- [#1892](#1892)
[`7767141`](7767141)
Thanks [@HichamELBSI](https://github.com/HichamELBSI)! - fix searchbar
component

- [#1896](#1896)
[`fd58c67`](fd58c67)
Thanks [@HichamELBSI](https://github.com/HichamELBSI)! - modal animation
fix

- [#1855](#1855)
[`ac908a2`](ac908a2)
Thanks [@HichamELBSI](https://github.com/HichamELBSI)! - Migration guide
update

- [#1695](#1695)
[`649d0f5`](649d0f5)
Thanks [@christiancp100](https://github.com/christiancp100)! - chore:
update to use styled-components@6

- [#1897](#1897)
[`e73b1d5`](e73b1d5)
Thanks [@HichamELBSI](https://github.com/HichamELBSI)! - update cursor
on disabled inputs

- [#1835](#1835)
[`fd5e74b`](fd5e74b)
Thanks [@HichamELBSI](https://github.com/HichamELBSI)! - Bump ViteJS

### Minor Changes

- [#1943](#1943)
[`b1ec628`](b1ec628)
Thanks [@Adzouz](https://github.com/Adzouz)! - New icons (Files, Graph,
TrendUp and Webhooks)

- [#1728](#1728)
[`f34ca77`](f34ca77)
Thanks [@simotae14](https://github.com/simotae14)! - add lightning icon

- [#1860](#1860)
[`ee72e66`](ee72e66)
Thanks [@remidej](https://github.com/remidej)! - feat: add new icons
(ArrowLine, SealCheck, ListSearch)

- [#1831](#1831)
[`240c73e`](240c73e)
Thanks [@vikas-singh369](https://github.com/vikas-singh369)! - added new
check circle empty icon

- [#1865](#1865)
[`d50b719`](d50b719)
Thanks [@simotae14](https://github.com/simotae14)! - feat: add new icons
(ArrosOut, Stop)

- [#1814](#1814)
[`e708f16`](e708f16)
Thanks [@mukulpadwal](https://github.com/mukulpadwal)! - Added 3 new
icons for "xls", "zip", and "csv" from Phosphor icon library.

- [#1918](#1918)
[`4a9b3e5`](4a9b3e5)
Thanks [@simotae14](https://github.com/simotae14)! - chore: enable the
ds pre-release gh action

- [#1805](#1805)
[`d7befb6`](d7befb6)
Thanks [@mukulpadwal](https://github.com/mukulpadwal)! - Added a new
"CodeBlock" icon to the icon library

This update introduces a "CodeBlock" icon to improve clarity and
differentiation between block and inline code elements in the CMS.

### Patch Changes

- [#1708](#1708)
[`b9646de`](b9646de)
Thanks [@joshuaellis](https://github.com/joshuaellis)! - fix: dont use
rem for width and height on SVG attributes

- [#1744](#1744)
[`f785c2c`](f785c2c)
Thanks [@joshuaellis](https://github.com/joshuaellis)! - fix: set dev
dependencies correctly to avoid styled-components being bundled

- [#1754](#1754)
[`2c9c4ea`](2c9c4ea)
Thanks [@jhoward1994](https://github.com/jhoward1994)! - change github
action to use default github secret

## @strapi/[email protected]

### Major Changes

- [#1816](#1816)
[`f2ad83e`](f2ad83e)
Thanks [@HichamELBSI](https://github.com/HichamELBSI)! - fixes the
combobox primitive empty state when autocomplete is set to none

- [#1894](#1894)
[`23b4a59`](23b4a59)
Thanks [@HichamELBSI](https://github.com/HichamELBSI)! - fix searchbar
clear button type

- [#1964](#1964)
[`1b1c5d5`](1b1c5d5)
Thanks [@HichamELBSI](https://github.com/HichamELBSI)! - Add
virtualization as an option to combobox list

- [#1898](#1898)
[`8d8ccba`](8d8ccba)
Thanks [@HichamELBSI](https://github.com/HichamELBSI)! - TimePicker
input pattern

- [#1892](#1892)
[`7767141`](7767141)
Thanks [@HichamELBSI](https://github.com/HichamELBSI)! - fix searchbar
component

- [#1958](#1958)
[`8018392`](8018392)
Thanks [@HichamELBSI](https://github.com/HichamELBSI)! - Fix grid item
column fallback value

- [#1896](#1896)
[`fd58c67`](fd58c67)
Thanks [@HichamELBSI](https://github.com/HichamELBSI)! - modal animation
fix

- [#1855](#1855)
[`ac908a2`](ac908a2)
Thanks [@HichamELBSI](https://github.com/HichamELBSI)! - Migration guide
update

- [#1897](#1897)
[`e73b1d5`](e73b1d5)
Thanks [@HichamELBSI](https://github.com/HichamELBSI)! - update cursor
on disabled inputs

- [#1835](#1835)
[`fd5e74b`](fd5e74b)
Thanks [@HichamELBSI](https://github.com/HichamELBSI)! - Bump ViteJS

### Minor Changes

- [#1905](#1905)
[`15c87c5`](15c87c5)
Thanks [@simotae14](https://github.com/simotae14)! - feat: add creatable
option set to visible

- [#1907](#1907)
[`39fc51d`](39fc51d)
Thanks [@simotae14](https://github.com/simotae14)! - fix: combobox
creatable visible close when clicked

- [#1918](#1918)
[`4a9b3e5`](4a9b3e5)
Thanks [@simotae14](https://github.com/simotae14)! - chore: enable the
ds pre-release gh action

### Patch Changes

- [#1770](#1770)
[`49bf5c1`](49bf5c1)
Thanks [@madhurisandbhor](https://github.com/madhurisandbhor)! - fix:
combobox with no options handled

- [#1744](#1744)
[`f785c2c`](f785c2c)
Thanks [@joshuaellis](https://github.com/joshuaellis)! - fix: set dev
dependencies correctly to avoid styled-components being bundled

- [#1844](#1844)
[`1b5a2d0`](1b5a2d0)
Thanks [@jorrit](https://github.com/jorrit)! - Fix inflated package size
because direct dependencies not listed in package.json

- [#1754](#1754)
[`2c9c4ea`](2c9c4ea)
Thanks [@jhoward1994](https://github.com/jhoward1994)! - change github
action to use default github secret

- [#1773](#1773)
[`f949efb`](f949efb)
Thanks [@madhurisandbhor](https://github.com/madhurisandbhor)! - fix:
combobox with no options and autocomplete none, show nooptions value
passed instead of null
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@mazzucchelli mazzucchelli mazzucchelli approved these changes

@butcherZ butcherZ Awaiting requested review from butcherZ

@Adzouz Adzouz Awaiting requested review from Adzouz

Assignees

No one assigned

Labels

hacktoberfest-accepted pr: fix This PR is fixing a bug source: design-system relates to design-system package

Projects

None yet

Milestone

v2.0.0

Development

Successfully merging this pull request may close these issues.

3 participants

@HichamELBSI @Adzouz @mazzucchelli