Fix: Fixed the tests for chakra-ui v3

[heath-freenome]

Reasons for making this change

Fixed test for chakra-ui v3

• Deleted CssReset as it was unused
• Fixed up comment in NativeSelectWidget
• Updated the GridSnap tests
• Updated the layout grid to add small margin due to new version padding

Checklist

• I'm updating documentation
  • I've checked the rendering of the Markdown text I've added
• I'm adding or updating code
  • I've added and/or updated tests. I've run npx nx run-many --target=build --exclude=@rjsf/docs && npm run test:update to update snapshots, if needed.
  • I've updated docs if needed
  • I've updated the changelog with a description of the PR
• I'm adding a new feature
  • I've updated the playground with an example use of the feature

[heath-freenome]

@antpaw When this PR merges you should be able to pull and run npm run refresh-node-modules then build. Can you show me HOW the slider doesn't work in a screen recording?

[antpaw]

@heath-freenome Thank you, I can now build. I dont think we need a screenrecording, i've attached a screenshot. The issue is that the slider wont move on mouse click/drag. Oddly the keyboard controls work well and the changes in formData text area are also applied.

[heath-freenome]

@heath-freenome Thank you, I can now build. I dont think we need a screenrecording, i've attached a screenshot. The issue is that the slider wont move on mouse click/drag. Oddly the keyboard controls work well and the changes in formData text area are also applied.

Thanks for the link, Do you have the bandwidth to fix it soon?

[antpaw]

@heath-freenome Thank you, I can now build. I dont think we need a screenrecording, i've attached a screenshot. The issue is that the slider wont move on mouse click/drag. Oddly the keyboard controls work well and the changes in formData text area are also applied.

Thanks for the link, Do you have the bandwidth to fix it soon?

I have the bandwidth, I'm just out of ideas on how to fix it. I've created an issue with steps to reproduce and will try to share it with chakra ui team #4584

[heath-freenome]

@antpaw I'm looking at the chakra ui Slider docs and they have a very different implementation. Maybe you need to do something like what they have, breaking out the control into parts?

import { Slider } from "@chakra-ui/react"
import { useState } from "react"

const Demo = () => {
  const [value, setValue] = useState([40])
  return (
    <Slider.Root
      maxW="200px"
      value={value}
      onValueChange={(e) => setValue(e.value)}
    >
      <Slider.Control>
        <Slider.Track>
          <Slider.Range />
        </Slider.Track>
        <Slider.Thumbs />
      </Slider.Control>
    </Slider.Root>
  )
}