Utilities
Shared Vanilla TS/JS utilities for various Chakra UI components and packages.
This is an internal utility, not intended for public usage.
Installation
yarn add @teste-ui/utils
Common utilities and types for Chakra UI
Shared Vanilla TS/JS utilities for various Chakra UI components and packages.
This is an internal utility, not intended for public usage.
yarn add @teste-ui/utils
c11743b47
Thanks @effectivetom! - Fix incorrect
breakpoint calculation which excluded some viewport widths from media query
coverage#6275
36ef37d58
Thanks @Philzen! - Fix TypeError
in
getCSSVar
when the theme is an empty object
#6257
6c15ec2c2
Thanks @segunadebayo! - Fix issue where
getFocusables
causes excessive repaint due to computed style calls
06f29f8cd
Thanks @segunadebayo! - Bump all packages
to resolve deps issuesf77e3c98f
Thanks @segunadebayo! - Expose
toMediaQuery
internal function for use in the styled system package#5879
c390af485
Thanks @TimKolberger! - Bump all packages
to next major for Chakra UI version 2.
#5989
ed692c0ae
Thanks @TimKolberger! - Omit src
directory from being published to npm
#5882
41b3119f5
Thanks @TimKolberger! - Bump peer
dependency to React and ReactDOM to >=18
ed692c0ae
Thanks @TimKolberger! - Omit src
directory from being published to npm41b3119f5
Thanks @TimKolberger! - Bump peer
depencency to React and ReactDOM to >=18c390af485
Thanks @TimKolberger! - Bump all packages
to next major for Chakra UI version 2.e1fe48cbe
Thanks @TimKolberger! - Bumped patch
version for every package to fix release process. Root cause was a bug in our
CI configuration.a870e6b94
Thanks @TimKolberger! - Fixed an issue
where queryString()
created invalid media queries when min and max were set.a503acabe
Thanks @TimKolberger! - Bumped patch
version for every package to fix release process.24b4333d0
Thanks @nikolovlazar! - Fixing a bug that
happens when using the useCheckboxGroup hook with number values instead of
string values#5316
1537a725f
Thanks @TimKolberger! - Add helper function
flatten
import { flatten } from "@teste-ui/utils"
flatten({ space: [0, 1, 2, 4, 8, 16, 32] })
/** =>
{
"space.0": 0,
"space.1": 1,
"space.2": 2,
"space.3": 4,
"space.4": 8,
"space.5": 16,
"space.6": 32,
}
*/
b28142946
Thanks @cschroeter! - Update babel config to
transpile soruces for older browsers. This fixes issues with CRA and
Storybook.#4991
6095eaf9a
Thanks @segunadebayo! - Update build system
we use from a custom babel cli setup to
preconstruct.
The previous build system transpiles the code in src
directory to dist/esm
and dist/cjs
keeping the same file structure. The new build system merges
all files in src
and transpiles to a single esm
and cjs
file.
Potential Breaking Change: The side effect of this is that, if you
imported any function, component or hook using the undocumented approach
like
import { useOutsideClick } from "@teste-ui/hooks/dist/use-outside-click"
,
you'll notice that the this doesn't work anymore.
Here's how to resolve it:
`
jsx live=false
// Won't work 🎇
import { useOutsideClick } from "@teste-ui/hooks/dist/use-outside-click"
// Works ✅
import { useOutsideClick } from "@teste-ui/hooks"
`
If this affected your project, we recommend that you import hooks, functions or components the way it's shown in the documentation. This will help keep your project future-proof.
cd0893c56
#4873 Thanks
@Nfinished! - fix: always use fromEntries
polyfill from @teste-ui/utils #4872c06d242c6
#4795 Thanks
@Toxiapo! - Fixed iframe bug on firefox when
using getRelatedTarget
function
5b4d8ef24
#4803 Thanks
@segunadebayo! - Fix issue where pan-event
utils don't work within iframe
4c1071969
#4437 Thanks
@Toxiapo! - Remove code that was added as a
workaround for pre-releases of React concurrent mode.
43f66097b
#4458 Thanks
@agundermann! - Fix issues when rendering
chakra components in different window
4a1e4d93b
#4305 Thanks
@MasterGordon! - Fixed a circular
dependency which was causing warnings when bundling Chakra with rollup
.b479ff22e
#3930 Thanks
@TimKolberger! - - Add types for the return
value of pipe
function
07d15eab4
#3850 Thanks
@TimKolberger! - Add walkObject helper to
iterate over all keys including nested
d0f50a46e
Thanks @segunadebayo! - PanSession
class
onSessionStart
to pan event handlerse9ac4cc76
#3511 Thanks
@TimKolberger! - - Add pipe
functionisFunction
guard0974e547c
Thanks @segunadebayo! - Add lazy content
utility for disclosure components like popover, menu, tab, etc.
59ea894a7
#3836 Thanks
@segunadebayo! - - Add pan session class to
handle pan gestures. This is used in the slider logic and sharable with vue
library.
Perf: Throttle pan move events to once per frame which improves the slider's
onChange
call performance.
Update types for internal pointer event
8b5eb9654
Thanks @segunadebayo! - update type
signature for px
function1a04a41bd
Thanks @segunadebayo! - Update import of
shared utils from react-utils
to utils
e481ba491
Thanks @segunadebayo! - - Extract functions
from react-utils
back to utils
package
withFlushSync
function in favor of using a microtask callbackwarn
functiona58b724e9
Thanks @segunadebayo! - Add withFlushSync
function wrapper to help resolve concurrent mode and onFocus state issues.
This is a temp fix until the issue is fixed in React.
b724a9dd9
#3674 Thanks
@codebender828! - Extract all React based
utilities and types into @teste-ui/react-utils
e748219f3
Thanks @segunadebayo! - ### Pointer Events
Add unified pointer event management utils and hook for interal use only.
The hook is called usePointerEvent
, it works pretty similar to
useEventListener
except that does two things:
onMouse*
,
onTouch*
, or onPointer*
handler runsx
and y
position
depending on the pointer type.Credits to
framer-motion
for doing the hard work for this utilities
useFocusOnPointerDown
to get Safari to detect the correct
event.relatedTarget
when you blur a focused element.Set preventScroll
option to be true
by default, setting focus on an
element should happen without scrolling the page (in most cases).
Set nextTick
to undefined
by default and update all components that use
next tick to use { nextTick: true }
.
91ef14839
#3583 Thanks
@segunadebayo! - Add getCSSVar
function
to resolve token values and return the css variable reference instead of the
actual value. It does a lookup against theme.__cssMap
.
const value = getCSSVar(theme, "colors", "blue.500")
// => "var(--teste-colors-blue.500)"
const value = getCSSVar(theme, "colors", "tomato")
// => "tomato" // since tomato doesn't exist in theme colors
87cc23e14
#3463 Thanks
@segunadebayo! - Move responsive utilities
to utils to prevent duplicate work61962345c
#3291 Thanks
@dominictwlee! - Support negative scale
values for css variables.ff4a36bca
#3245 Thanks
@segunadebayo! - Removed objectAssign
function in favor of using native Object.assign
method. It is
now supported in most browsers
This function is only used once in the system
package as well. This PR
simply removes it to cut bundle size of utils. Less is more 😃.
483687237
#3283 Thanks
@segunadebayo! - Update focus util to
handle unsupported browsers (Safari), and ability to opt out of
requestAnimationFrame
8b87406c
#3015 Thanks
@with-heart! - Added a compose
functione73878ee
#2790 Thanks
@yuzima! - Resolved an issue where custom
breakpoints prefixed with a number ("2xl") weren't detected5c482483
#2562 Thanks
@LaurenceGGush! - Fix memory leak in
utils/objects.ts
All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
Note: Version bump only for package @teste-ui/utils
All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
Note: Version bump only for package @teste-ui/utils
Note: Version bump only for package @teste-ui/utils
Note: Version bump only for package @teste-ui/utils
Note: Version bump only for package @teste-ui/utils
Note: Version bump only for package @teste-ui/utils
All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
Note: Version bump only for package @teste-ui/utils
All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
Note: Version bump only for package @teste-ui/utils
All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
Note: Version bump only for package @teste-ui/utils
All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
Note: Version bump only for package @teste-ui/utils
All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.