mirror of
https://github.com/nextui-org/nextui.git
synced 2025-12-08 19:26:11 +00:00
v2.4.2 (#3256)
* chore(root): reat-aria packages updated (#2889) * chore(storybook): common colors enabled (#2902) * fix(range-calendar): hide only dates outside the month (#2906) * fix(range-calendar): hide only dates outside the month #2890 * fix(range-calendar): corrected spelling mistake in changeset description * fix(range-calendar): corrected capitalization in changeset description * chore(changeset): patch @nextui-org/theme --------- Co-authored-by: shrinidhi.upadhyaya <shrinidhi.upadhyaya@stud.uni-bamberg.de> Co-authored-by: աɨռɢӄաօռɢ <wingkwong.code@gmail.com> * fix(date-picker): keep date picker style consistent for different variants (#2908) * fix: add missing TableRowProps export (#2866) * fix: add missing TableRowProps export * feat(changeset): add changeset for PR2866 * chore(changeset): revise changeset message --------- Co-authored-by: աɨռɢӄաօռɢ <wingkwong.code@gmail.com> * fix(input): correct label margin for RTL required inputs (#2781) * fix(input): correct label margin for RTL required inputs * fix(theme): add changeset fr theme * docs(core): add storybook and canary release info (#2914) * Cn utility refactor (#2915) * refactor(core): cn utility adjusted and moved to the theme package * chore(root): changeset * fix(storybook): stories that used cn * docs(date-picker): change to jsx instead (#2919) * fix(switch): support uncontrolled switch in react-hook-form (#2924) * feat(switch): add @nextui-org/use-safe-layout-effect * chore(deps): add @nextui-org/use-safe-layout-effect * fix(switch): react-hook-form uncontrolled switch component * fix(switch): react-hook-form uncontrolled switch component * feat(switch): add rect-hook-form in dev dep * feat(switch): add WithReactHookFormTemplate * refactor(root): react aria packages fixed (#2944) * feat(docs): docs changes (#2868) * feat(docs): add example how to set locale (#2867) * docs(guide): add an explanation for the installation guide (#2769) * docs(guide): add an explanation for the installation guide * docs(guide): add an explanation for the cli guide * docs(guide): add support for cli output * fix: change sort priority - cmdk (#2873) * docs: remove unsupported props in range calendar and date range picker (#2881) * chore(calendar): remove showMonthAndYearPickers from range calendar story * docs(date-range-picker): remove showMonthAndYearPickers info * docs(range-calendar): remove unsupported props * docs: refactor typing in form.ts (#2882) * chore(docs): supplement errorMessage behaviour in input (#2892) * refactor(docs): revise NextUI Provider structure * chore(docs): add updated tag --------- Co-authored-by: Nozomi-Hijikata <116155762+Nozomi-Hijikata@users.noreply.github.com> Co-authored-by: HaRuki <soccer_haruki15@me.com> Co-authored-by: Kaben <carnoxen@gmail.com> * fix(slider): missing marks when hideThumb is true & revise slider styles (#2883) * chore(slider): include marks in hideThumb * fix(slider): revise slider styles * feat(changeset): add changeset * feat(slider): add tests with marks and hideThumb * feat(test): react hook form tests & stories (#2931) * feat(input): add Input with React Hook Form tests * refactor(input): add missing types * feat(checkbox): add checkbox with React Hook Form tests * feat(select): add react-hook-form to dev dep * feat(select): add react hook form story * feat(select): react hook form tests * fix(select): incorrect button reference * feat(deps): add react-hook-form to dev dep in autocomplete * feat(autocomplete): react hook form story * feat(autocomplete): react hook form tests * fix(autocomplete): rollback wrapper type * feat(switch): add react hook form tests * refactor(stories): reorder stories items * fix: update accordion item heading tag to be customizable (#2265) * fix: update accordion item heading tag to be customizable * Update .changeset/heavy-hairs-join.md Co-authored-by: Junior Garcia <jrgarciadev@gmail.com> * Update .changeset/heavy-hairs-join.md Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * chore(accordion): lint * chore(changeset): add issue number * feat(docs): add HeadingComponent prop --------- Co-authored-by: Shawn Dong <shawn.dong@flybuys.com.au> Co-authored-by: Junior Garcia <jrgarciadev@gmail.com> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Co-authored-by: աɨռɢӄաօռɢ <wingkwong.code@gmail.com> * fix(theme): add pointer-events-none to skeleton base (#2972) * feat(tabs): add `destroyInactiveTabPanel` prop for Tabs component (#2973) * feat(tabs): add destroyInactiveTabPanel and set default to false * feat(tabs): integrate with destroyInactiveTabPanel * feat(theme): hidden inert tab panel * feat(changeset): add changeset * chore(changeset): add issue number * feat(docs): add `destroyInactiveTabPanel` prop to tabs page * chore(docs): set destroyInactiveTabPanel to true by default * chore(tabs): set destroyInactiveTabPanel to true by default * chore(tabs): revise destroyInactiveTabPanel logic * feat(tabs): add tests for destroyInactiveTabPanel * chore(tabs): change the default value of destroyInactiveTabPanel to true * refactor: add support for disabling the animation globally (#2929) * refactor: add support for disabling the animation globally * chore(docs): disableAnimation removed from global provider * feat(docs): nextui provider api updated, storybook preview adjusted * chore(theme): button is scalable when disabled, tooltip animation improved * fix(theme): remove origin-bottom from button (#2990) * fix(skeleton): overflow issue in skeleton (#2986) * fix(theme): set overflow visible after skeleton loaded * feat(changeset): add changeset * fix(table): v2 input/textarea don't allow spaces inside a table (#3020) * fix(table): set onKeyDownCapture to undefined * feat(changeset): add changeset * fix(slider): calculate the correct value on mark click (#3017) * fix(slider): calculate the correct value on mark click * refactor(slider): remove the tests inside describe block * feat(slider): add tests for thumb move on mark click * refactor(slider): use val instead of pos * fix(theme): revise input isInvalid styles (#3010) * fix(theme): revise isInvalid input styles * feat(changeset): add changeset * feat(date-picker): add missing ref to input wrapper (#3011) * fix(date-picker): add missing ref to input wrapper * feat(changeset): add changeset * fix(core): incorrect tailwind classnames (#3018) * fix(dropdown): focus behaviour on press / enter keydown (#2970) * fix(dropdown): set focus on the first item * feat(dropdown): add keyboard interactions tests * feat(changeset): add changeset * fix(dropdown): use fireEvent.keyDown instead * chore(deps): add @nextui-org/test-utils to dropdown * refactor(dropdown): pass onKeyDown to menu trigger and don't hardcode autoFocus * chore(dropdown): remove autoFocus * fix(menu): pass userMenuProps to useTreeState and useAriaMenu and remove from getListProps * chore(changeset): add menu package * fix(component): update type definition to prevent primitive values as items (#2953) * fix: update type definition to prevent primitive values as items * fix: typecheck * fix(select): onSelectionChange can handle number (#2937) * fix: onSelectionChange type for dynamic items in Select component * docs: remove unnecessary properties * docs: update highlightedLines * chore: add changeset * fix(calendar): scrolling is hidden when changing the month (#2949) * fix(calendar): scrolling is hidden when changing the month * chore(changeset): correct package name --------- Co-authored-by: Poli Sour <polisour.work@gmail.com> Co-authored-by: WK Wong <wingkwong.code@gmail.com> * fix: make VisuallyHidden's element type as span when it's inside phrasing element (#3013) * fix(checkbox): make VisuallyHidden's element type as span * feat(changeset): add changeset * fix(radio): make the VisuallyHidden element type as span * fix(switch): make the VisuallyHidden element type as span * fix(select): make the VisuallyHidden element type as span * feat(changeset): replace changeset * chore: fix formatting * docs: sync nextui-cli api (#3035) * docs: sync nextui-cli api * docs: update * chore: update routes.json with new path and set updated flag --------- Co-authored-by: Junior Garcia <jrgarciadev@gmail.com> * feat: switch default validationBehavior to aria and allow switching via props (#2987) * chore: add support validationBehavior aria * chore: add validationBehavior to Provider * chore: add autocomplete validation test * chore: add checkbox validation test * fix(input): require condition * docs: add description of validationBehavior props * chore: add support validationBehavior props for date components * docs(dates): add description of validationBehavior props * chore: add changeset * chore: format * chore: fix test * fix: select validationBehavior is not support yet * fix: select validationBehavior not supported yet * chore(docs): validation behavior prop added to nextui-provider --------- Co-authored-by: Junior Garcia <jrgarciadev@gmail.com> * fix: popover-based focus behaviour (#2854) * fix(autocomplete): autocomplete focus behaviour * feat(autocomplete): add test case for catching blur cases * refactor(autocomplete): use isOpen instead * feat(autocomplete): add "should focus when clicking autocomplete" test case * feat(autocomplete): add should set the input after selection * fix(autocomplete): remove shouldUseVirtualFocus * fix(autocomplete): uncomment blur logic * refactor(autocomplete): remove state as it is in getPopoverProps * refactor(autocomplete): remove unnecessary blur * refactor(select): remove unncessary props * fix(popover): use domRef instead * fix(popover): revise isNonModal and isDismissable * fix(popover): use dialogRef back * fix(popover): rollback * fix(autocomplete): onFocus logic * feat(popover): set disableFocusManagement to overlay * feat(modal): set disableFocusManagement to overlay * fix(autocomplete): set disableFocusManagement for autocomplete * feat(popover): include disableFocusManagement prop * refactor(autocomplete): revise type in selectorButton * fix(autocomplete): revise focus logic * feat(autocomplete): add internal focus state and add shouldCloseOnInteractOutside * feat(autocomplete): handle selectedItem change * feat(autocomplete): add clear button test * feat(changeset): add changeset * refactor(components): use the original order * refactor(autocomplete): add more comments * fix(autocomplete): revise focus behaviours * refactor(autocomplete): rename to listbox * chore(popover): remove disableFocusManagement from popover * chore(autocomplete): remove disableFocusManagement from autocomplete * chore(changeset): add issue number * fix(popover): don't set default value to transformOrigin * fix(autocomplete): revise shouldCloseOnInteractOutside logic * feat(autocomplete): should close listbox by clicking another autocomplete * fix(popover): add disableFocusManagement to overlay * refactor(autocomplete): revise comments and refactor shouldCloseOnInteractOutside * feat(changeset): add issue number * fix(autocomplete): merge with selectorButtonProps.onClick * refactor(autocomplete): remove extra line * refactor(autocomplete): revise comment * feat(select): add shouldCloseOnInteractOutside * feat(dropdown): add shouldCloseOnInteractOutside * feat(date-picker): add shouldCloseOnInteractOutside * feat(changeset): add dropdown and date-picker * fix(popover): revise shouldCloseOnInteractOutside * feat(date-picker): integrate with ariaShouldCloseOnInteractOutside * feat(select): integrate with ariaShouldCloseOnInteractOutside * feat(dropdown): integrate with ariaShouldCloseOnInteractOutside * feat(popover): integrate with ariaShouldCloseOnInteractOutside * feat(aria-utils): ariaShouldCloseOnInteractOutside * chore(deps): update pnpm-lock.yaml * feat(autocomplete): integrate with ariaShouldCloseOnInteractOutside * feat(aria-utils): handle setShouldFocus logic * feat(changeset): add @nextui-org/aria-utils * chore(autocomplete): put the test into correct group * feat(select): should close listbox by clicking another select * feat(dropdown): should close listbox by clicking another dropdown * feat(popover): should close listbox by clicking another popover * feat(date-picker): should close listbox by clicking another datepicker * chore(changeset): add issue numbers and revise changeset message * refactor(autocomplete): change to useRef instead * refactor(autocomplete): change to useRef instead * refactor(aria-utils): revise comments and format code * chore(changeset): add issue number * chore: take popoverProps.shouldCloseOnInteractOutside first * refactor(autocomplete): remove unnecessary logic * refactor(autocomplete): focus management logic * fix(components): Fix 'Tap to click' behavior on macOS with Edge/Chrome for Accordion and Tab (#2725) * fix(components): fix 'Tap to click' behavior on macOS * Add change file for accordion, menu, and tabs * Remove 'fix(components)' from the .changeset file * fix(components): undo dropdown change now that it's no longer applicable * fix(components): update changeset file now that we are no longer modifying the dropdown component * fix(date-picker): corrected inert value for true condition (#3054) * fix(date-picker): corrected inert value for true condition #3044 * refactor(calendar): add todo comment * feat(changeset): add changeset --------- Co-authored-by: shrinidhi.upadhyaya <shrinidhi.upadhyaya@stud.uni-bamberg.de> Co-authored-by: WK Wong <wingkwong.code@gmail.com> * fix(hooks): resolve type error in onKeyDown event handler (#3064) * fix(hooks): resolve type error in onKeyDown event handler * chore(changeset): revise changeset --------- Co-authored-by: WK Wong <wingkwong.code@gmail.com> * Update dependency array on setPage useCallback hook (#3029) Changes: Add the onChangeActivePage function to the dependency array of the setPage useCallback hook to ensure it always reflects the latest state. Impact: This fix ensures that the pagination component accurately reflects the current state when triggering onChangeActivePage. * fix: error peerDep in pkg (#3014) * fix: error peerDep in pkg * docs: changeset * Fix DatePicker Time Input (#2845) * fix(date-picker): set `isCalendarHeaderExpanded` to `false` when DatePicker is closed * fix(date-picker): calendar header controlled state on DatePicker * chore(date-picker): update test * chore(date-picker): remove unnecessary `async` in test * Update packages/components/date-picker/__tests__/date-picker.test.tsx --------- Co-authored-by: WK Wong <wingkwong.code@gmail.com> Co-authored-by: Junior Garcia <jrgarciadev@gmail.com> * fix(date-picker): test * fix(hooks): optimize useScrollPosition with useCallback and useRef (#3049) * fix(hooks): optimize useScrollPosition with useCallback and useRef * Update .changeset/lucky-cobras-jog.md * Update packages/hooks/use-scroll-position/src/index.ts * Update packages/hooks/use-scroll-position/src/index.ts --------- Co-authored-by: Junior Garcia <jrgarciadev@gmail.com> * fix(select): placeholder text display for controlled component (#3081) * fix: return placeholder when selectedItems is empty * chore: add test and changeset * chore(docs): v2.4.0 (#3084) * chore(docs): v2.4.0 * chore(docs): v2.4.0 blog * chore(docs): revise typos based on coderabbitai * chore(docs): adjust navbar --------- Co-authored-by: WK Wong <wingkwong.code@gmail.com> * chore(changese): update @nextui-org/react dependency to minor version * docs: update cli docs (#3096) * ci(changesets): version packages (#2903) Co-authored-by: Junior Garcia <jrgarciadev@gmail.com> * fix(radio): remove required attribute for Radio with validationBehavior="aria" (#3110) * fix(theme): add missing pointer event after data loaded (#3126) * fix(system): listbox href issue (experimental) (#3119) * fix(system): @react-aria/utils * feat(hooks): include routerLinkProps * feat(changeset): add changeset * chore(deps): bump @react-aria/utils to 3.24.1 * fix(hooks): missing arguments * chore(deps): bump @react-types/link * chore(link): bump @react-aria/link to 3.7.1 * chore(link): use @react-aria/link instead * chore(changeset): revise changeset * chore(hooks): undo use-aria-link changes * chore(deps): undo use-aria-link changes * chore(deps): bump `@react-aria/utils` to `3.24.1` * chore(deps): bump `@react-types/shared` * feat: add missing router.open parameters due to router change * chore(changeset): add new line * chore(deps): bump `@react-types/shared` to `3.23.1` * fix(avatar): avoid passing `disableAnimation` prop to a DOM element (#3111) * fix(avatar): avoid passing `disableAnimation` prop to a DOM element * refactor(avatar): use filterDOMProps approach * chore(avatar): remove to type import * chore(avatar): change to shouldFilterDOMProps * fix(docs): removed unused import & corrected prop for disabled DatePicker (#3136) Co-authored-by: shrinidhi.upadhyaya <shrinidhi.upadhyaya@stud.uni-bamberg.de> * ci(changesets): version packages (#3115) * fix(pagination): missing animation (#3144) * fix tsup domain (#3158) * chore(docs): remove destroyInactiveTabPanel from Tab due to merge conflict (#3155) * fix(autocomplete): maximum update depth exceeded in autocomplete (#3175) * chore(checkbox): avoid passing non-DOM attributes to svg (#3199) * chore(docs): avoid passing non-DOM attributes to svg * chore(utilities): avoid passing non-DOM attributes to svg * feat(changeset): add changeset * fix(docs): fix typo in autocomplete documentation page (#3182) * fix(select): add missing data-invalid in select and add missing data attributes in docs (#3177) * fix(select): add missing data-invalid attribute * chore(docs): add missing data attributes for select base * fix(tabs): destroyInactiveTabPanel unmounts inactive tabs' content (#3164) * fix(tabs): incorrect content in tab panel * feat(tabs): revise destroyInactiveTabPanel test cases * fix(select): unset form value after unselecting an item (#3157) * fix(select): set empty string instead of undefined for unsetting value * feat(selet): should unset form value * fix(tabs): set tab panel id correctly (#3246) * docs(tooltip): supplement correct style path (#3183) * docs(tooltip): supplement correct style path * chore(docs): move the note below import tabs * fix(use-aria-menu): link logic in useMenuItem (#3229) * chore(deps): bump @internationalized/date version (#3230) * fix(input): input display with hidden type (#3174) * fix(input): input display with hidden type * chore(input): add isHiddenType to dependency * refactor(input): move the styles to theme and change hidden to data attr * feat(theme): add isHiddenType to input * chore(changeset): include theme package * chore(input): revise input test * fix(theme): remove isHiddenType from variants and use data-hidden prop instead * fix(theme): remove isHiddenType from defaultVariants * fix(input): remove isHiddenType passing to input * feat(date-picker): add support for DatePicker to apply styles to DateInput (#3146) * feat(date-picker): add support for DatePicker to apply styles to DateInput * chore: update changeset * docs(date-picker): add dateInputClassNames props * refactor(date): updated errorMessage story and modified to import props (#3112) * refactor(date): updated errorMessage story and modified to import props * docs(date): add errorMessageFunction examples * chore: add changeset * fix: remove unnecessary props * fix: typo * Update regex-validation.ts (#3123) * Update regex-validation.ts Fix email regex * Update email regex input.stories.tsx * fix(autocomplete): controlled state logic (#2969) * fix(autocomplete): autocomplete controlled state (#2955) * chore(autocomplete): add changeset * Update packages/components/autocomplete/__tests__/autocomplete.test.tsx --------- Co-authored-by: Junior Garcia <jrgarciadev@gmail.com> * fix(utilities): resolve assignRef TypeScript ref assignment issue (#3098) * fix(utilities): resolve assignRef TypeScript ref assignment issue * chore(changeset): revise changeset message --------- Co-authored-by: WK Wong <wingkwong.code@gmail.com> * fix(table): table-column align prop (#2900) * fix(navbar): fixed the height of navbar menu (#1805) * fix(navbar): fixed the height of navbar menu * fix(navbar): refactored the css of navbar * fix(navbar): fix redundant expression * fix(navbar): fixed unnecessary changes * fix(navbar): adjust viewport * fix: RA dependencies bump (#3240) * fix(popover): popover focus issue (#3187) * fix(popover): move useDialog to popover-content * fix(popover): move useDialog to free-solo-popover * refactor(popover): use const instead * feat(changset): add changeset * feat(popover): popover focus test * refactor(popover): getDialogProps * fix: interactions with popover & focus issues (#3137) * fix(aria-utils): handle click on listbox * fix(popover): move useDialog to popover-content * fix(popover): move useDialog to free-solo-popover * refactor(popover): use const instead * feat(changset): add changeset * feat(popover): popover focus test * refactor(popover): getDialogProps * chore(utilities): remove ariaShouldCloseOnInteractOutside * chore(deps): pnpm-lock.yaml * fix(popover): remove disableFocusManagement * fix(modal): remove disableFocusManagement * fix(autocomplete): remove custom focus logic and remove ariaShouldCloseOnInteractOutside * fix(popover): rewrite shouldCloseOnInteractOutside logic * chore(utilities): remove ariaShouldCloseOnInteractOutside * chore(deps): bump react-aria dependencies * chore(autocomplete): change back to focus * feat(changeset): update changeset * chore(docs): update type in onSelectionChange * fix(popover): revise popover test case * chore(deps): add @nextui-org/aria-utils * fix(autocomplete): add ariaShouldCloseOnInteractOutside * fix(date-picker): add ariaShouldCloseOnInteractOutside * fix(select): add ariaShouldCloseOnInteractOutside * chore(deps): add @nextui-org/aria-utils * fix(dropdown): add ariaShouldCloseOnInteractOutside * feat(utilities): rewrite ariaShouldCloseOnInteractOutside * fix(popover): use ariaShouldCloseOnInteractOutside * fix(autocomplete): add back shouldFocus * fix(utilities): include shouldFocus logic * chore(utilities): remove ! * refactor(aria-utils): add more comments * chore(changeset): update packages * refactor(aria-utils): add more comments * feat(popover): add test * fix: dropdown onPress issue (#3211) * fix(popover): move useDialog to popover-content * fix(popover): move useDialog to free-solo-popover * refactor(popover): use const instead * feat(changset): add changeset * feat(popover): popover focus test * refactor(popover): getDialogProps * fix(popover): dropdown onPress blocking issue * fix(dropdown): incorrect keyCodes * feat(dropdown): add keyboard onPress test cases * chore(deps): keep all @react-aria/overlays version consistent * chore(deps): sync dependencies * chore(deps): sync dependencies * refactor(aria-utils): remove shouldFocus logic * refactor(autocomplete): remove shouldFocus logic and set input focus when open * chore(deps): bump dependencies * chore(deps): fix react aria dependencies * fix(autocomplete): move popover style width inside isOpen true block * fix(autocomplete): focus back to trigger * feat(changeset): add changeset * chore(deps): bump react-aria dependencies * refactor(autocomplete): revise comment * refactor(dropdown): revise logSpy and trigger mockRestore * refactor(popover): remove debug className * fix(date-input): avoid setting isInvalid in useDateFieldState * fix(autocomplete): use ComboBoxValidationValue * feat(use-aria-menu): add deprecate message * feat(changeset): add missing packages * refactor(use-aria-menu): remove isLink since it is included in useLinkProps * Update packages/hooks/use-aria-menu/src/use-menu-item.ts --------- Co-authored-by: Junior Garcia <jrgarciadev@gmail.com> * ci(changesets): version packages (#3147) Co-authored-by: Junior Garcia <jrgarciadev@gmail.com> --------- Co-authored-by: Shrinidhi Upadhyaya <shrinidhiupadhyaya1195@gmail.com> Co-authored-by: shrinidhi.upadhyaya <shrinidhi.upadhyaya@stud.uni-bamberg.de> Co-authored-by: աɨռɢӄաօռɢ <wingkwong.code@gmail.com> Co-authored-by: Paul Tiedtke <PaulTiedtke@web.de> Co-authored-by: Mohammad Reza Badri <85818966+mrbadri@users.noreply.github.com> Co-authored-by: Nozomi-Hijikata <116155762+Nozomi-Hijikata@users.noreply.github.com> Co-authored-by: HaRuki <soccer_haruki15@me.com> Co-authored-by: Kaben <carnoxen@gmail.com> Co-authored-by: Shawn Dong <dsknight@live.com.au> Co-authored-by: Shawn Dong <shawn.dong@flybuys.com.au> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Co-authored-by: Ryo Matsukawa <76232929+ryo-manba@users.noreply.github.com> Co-authored-by: Poli Sour <57824881+novsource@users.noreply.github.com> Co-authored-by: Poli Sour <polisour.work@gmail.com> Co-authored-by: Artem Pitikin <git@kosmotema.dev> Co-authored-by: winches <329487092@qq.com> Co-authored-by: Eric Abreu <ericfabreu@gmail.com> Co-authored-by: Minsu <52266597+Gaic4o@users.noreply.github.com> Co-authored-by: Jesus Perdomo Lampignano <38929969+jesuzon@users.noreply.github.com> Co-authored-by: chirokas <157580465+chirokas@users.noreply.github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: EGOIST <0x142857@gmail.com> Co-authored-by: Damien Leroy <10438692+ShiiFu@users.noreply.github.com> Co-authored-by: Christian Abele <manufaktur@christian-abele.de> Co-authored-by: Nozomi Hijikata <121233810+nozomemein@users.noreply.github.com>
This commit is contained in:
Junior Garcia
GitHub
parent
ecb93d05f5
commit
47c6228649
@ -1,5 +0,0 @@
|
||||
---
|
||||
"@nextui-org/pagination": patch
|
||||
---
|
||||
|
||||
Fixed pagination missing animation (#3138)
|
||||
@ -1,5 +0,0 @@
|
||||
---
|
||||
"@nextui-org/autocomplete": patch
|
||||
---
|
||||
|
||||
Fix maximum update depth exceeded on Autocomplete component (#3094)
|
||||
@ -53,7 +53,7 @@ export default function Page() {
|
||||
|
||||
// Specify how each of the Autocomplete values should change when an
|
||||
// option is selected from the list box
|
||||
const onSelectionChange = (key: React.Key) => {
|
||||
const onSelectionChange = (key: React.Key | null) => {
|
||||
setFieldState((prevState) => {
|
||||
let selectedItem = prevState.items.find((option) => option.value === key);
|
||||
|
||||
|
||||
@ -179,7 +179,8 @@
|
||||
"key": "checkbox",
|
||||
"title": "Checkbox",
|
||||
"keywords": "checkbox, binary choice, selection control, toggle",
|
||||
"path": "/docs/components/checkbox.mdx"
|
||||
"path": "/docs/components/checkbox.mdx",
|
||||
"updated": true
|
||||
},
|
||||
{
|
||||
"key": "checkbox-group",
|
||||
@ -397,7 +398,8 @@
|
||||
"key": "tooltip",
|
||||
"title": "Tooltip",
|
||||
"keywords": "tooltip, hint, descriptive message, hover info",
|
||||
"path": "/docs/components/tooltip.mdx"
|
||||
"path": "/docs/components/tooltip.mdx",
|
||||
"updated": true
|
||||
},
|
||||
{
|
||||
"key": "user",
|
||||
|
||||
@ -1,11 +1,7 @@
|
||||
const HeartIcon = `export const HeartIcon = ({
|
||||
filled,
|
||||
size,
|
||||
height,
|
||||
width,
|
||||
label,
|
||||
...props
|
||||
}) => {
|
||||
const HeartIcon = `export const HeartIcon = ({ size, height, width, ...props }) => {
|
||||
// avoid passing non-DOM attributes to svg
|
||||
const {isSelected, isIndeterminate, disableAnimation, ...otherProps} = props;
|
||||
|
||||
return (
|
||||
<svg
|
||||
width={size || width || 24}
|
||||
@ -13,7 +9,7 @@ const HeartIcon = `export const HeartIcon = ({
|
||||
viewBox="0 0 24 24"
|
||||
fill='fill'
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}
|
||||
{...otherProps}
|
||||
>
|
||||
<path
|
||||
d="M12.62 20.81c-.34.12-.9.12-1.24 0C8.48 19.82 2 15.69 2 8.69 2 5.6 4.49 3.1 7.56 3.1c1.82 0 3.43.88 4.44 2.24a5.53 5.53 0 0 1 4.44-2.24C19.51 3.1 22 5.6 22 8.69c0 7-6.48 11.13-9.38 12.12Z"
|
||||
@ -25,6 +21,9 @@ const HeartIcon = `export const HeartIcon = ({
|
||||
`;
|
||||
|
||||
const PlusIcon = `export const PlusIcon = ({ size, height, width, ...props }) => {
|
||||
// avoid passing non-DOM attributes to svg
|
||||
const {isSelected, isIndeterminate, disableAnimation, ...otherProps} = props;
|
||||
|
||||
return (
|
||||
<svg
|
||||
width={size || width || 24}
|
||||
@ -32,7 +31,7 @@ const PlusIcon = `export const PlusIcon = ({ size, height, width, ...props }) =>
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}
|
||||
{...otherProps}
|
||||
>
|
||||
<path
|
||||
d="M6 12H18"
|
||||
|
||||
@ -0,0 +1,30 @@
|
||||
const App = `import {DateInput} from "@nextui-org/react";
|
||||
import {CalendarDate, parseDate} from "@internationalized/date";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<div className="flex w-full flex-wrap md:flex-nowrap gap-4">
|
||||
<DateInput
|
||||
label={"Birth date"}
|
||||
defaultValue={parseDate("2024-04-04")}
|
||||
placeholderValue={new CalendarDate(1995, 11, 6)}
|
||||
description={"This is my birth date."}
|
||||
isInvalid
|
||||
errorMessage={(value) => {
|
||||
if (value.isInvalid) {
|
||||
return "Please enter a valid date.";
|
||||
}
|
||||
}}
|
||||
className="max-w-xs"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.jsx": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -7,6 +7,7 @@ import labelPlacements from "./label-placements";
|
||||
import description from "./description";
|
||||
import startEndContent from "./start-end-content";
|
||||
import errorMessage from "./error-message";
|
||||
import errorMessageFunction from "./error-message-function";
|
||||
import controlled from "./controlled";
|
||||
import timeZones from "./time-zones";
|
||||
import granularity from "./granularity";
|
||||
@ -25,6 +26,7 @@ export const dateInputContent = {
|
||||
description,
|
||||
startEndContent,
|
||||
errorMessage,
|
||||
errorMessageFunction,
|
||||
controlled,
|
||||
timeZones,
|
||||
granularity,
|
||||
|
||||
@ -0,0 +1,26 @@
|
||||
const App = `import {DatePicker} from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<div className="flex w-full flex-wrap md:flex-nowrap gap-4">
|
||||
<DatePicker
|
||||
label="Birth date"
|
||||
className="max-w-[284px]"
|
||||
isInvalid
|
||||
errorMessage={(value) => {
|
||||
if (value.isInvalid) {
|
||||
return "Please enter a valid date.";
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.jsx": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -6,6 +6,7 @@ import variants from "./variants";
|
||||
import labelPlacements from "./label-placements";
|
||||
import description from "./description";
|
||||
import errorMessage from "./error-message";
|
||||
import errorMessageFunction from "./error-message-function";
|
||||
import withMonthAndYearPickers from "./with-month-and-year-pickers";
|
||||
import withTimeField from "./with-time-field";
|
||||
import selectorIcon from "./selector-icon";
|
||||
@ -28,6 +29,7 @@ export const datePickerContent = {
|
||||
labelPlacements,
|
||||
description,
|
||||
errorMessage,
|
||||
errorMessageFunction,
|
||||
withMonthAndYearPickers,
|
||||
withTimeField,
|
||||
selectorIcon,
|
||||
|
||||
@ -0,0 +1,30 @@
|
||||
const App = `import {DateRangePicker} from "@nextui-org/react";
|
||||
import {parseDate} from "@internationalized/date";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<DateRangePicker
|
||||
isInvalid
|
||||
label="Stay duration"
|
||||
variant="bordered"
|
||||
errorMessage={(value) => {
|
||||
if (value.isInvalid) {
|
||||
return "Please enter your stay duration";
|
||||
}
|
||||
}}
|
||||
defaultValue={{
|
||||
start: parseDate("2024-04-01"),
|
||||
end: parseDate("2024-04-08"),
|
||||
}}
|
||||
className="max-w-xs"
|
||||
/>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.jsx": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -6,6 +6,7 @@ import variants from "./variants";
|
||||
import labelPlacements from "./label-placements";
|
||||
import description from "./description";
|
||||
import errorMessage from "./error-message";
|
||||
import errorMessageFunction from "./error-message-function";
|
||||
import withTimeField from "./with-time-field";
|
||||
import selectorIcon from "./selector-icon";
|
||||
import controlled from "./controlled";
|
||||
@ -28,6 +29,7 @@ export const dateRangePickerContent = {
|
||||
labelPlacements,
|
||||
description,
|
||||
errorMessage,
|
||||
errorMessageFunction,
|
||||
withTimeField,
|
||||
selectorIcon,
|
||||
controlled,
|
||||
|
||||
@ -3,7 +3,7 @@ const App = `import {Input} from "@nextui-org/react";
|
||||
export default function App() {
|
||||
const [value, setValue] = React.useState("junior2nextui.org");
|
||||
|
||||
const validateEmail = (value) => value.match(/^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}$/i);
|
||||
const validateEmail = (value) => value.match(/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i);
|
||||
|
||||
const isInvalid = React.useMemo(() => {
|
||||
if (value === "") return false;
|
||||
|
||||
@ -7,7 +7,6 @@ export default function App() {
|
||||
<RadioGroup
|
||||
className="mb-4"
|
||||
label="Placement"
|
||||
orientation="top"
|
||||
value={placement}
|
||||
onValueChange={(value) => setPlacement(value)}
|
||||
>
|
||||
|
||||
@ -0,0 +1,23 @@
|
||||
const App = `import {TimeInput} from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<TimeInput
|
||||
label="Event Time"
|
||||
isInvalid
|
||||
errorMessage={(value) => {
|
||||
if (value.isInvalid) {
|
||||
return "Please enter a valid time";
|
||||
}
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.jsx": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
19
apps/docs/content/components/time-input/error-message.ts
Normal file
19
apps/docs/content/components/time-input/error-message.ts
Normal file
@ -0,0 +1,19 @@
|
||||
const App = `import {TimeInput} from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<TimeInput
|
||||
label="Event Time"
|
||||
isInvalid
|
||||
errorMessage="Please enter a valid time"
|
||||
/>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.jsx": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -4,6 +4,8 @@ import disabled from "./disabled";
|
||||
import readonly from "./read-only";
|
||||
import withoutLabel from "./without-label";
|
||||
import withDescription from "./with-description";
|
||||
import errorMessage from "./error-message";
|
||||
import errorMessageFunction from "./error-message-function";
|
||||
import labelPlacement from "./label-placement";
|
||||
import startContent from "./start-content";
|
||||
import endContent from "./end-content";
|
||||
@ -23,6 +25,8 @@ export const timeInputContent = {
|
||||
readonly,
|
||||
withoutLabel,
|
||||
withDescription,
|
||||
errorMessage,
|
||||
errorMessageFunction,
|
||||
labelPlacement,
|
||||
startContent,
|
||||
endContent,
|
||||
|
||||
@ -254,7 +254,7 @@ The following example uses the `defaultFilter` prop to filter the list of option
|
||||
|
||||
### Asynchronous Filtering
|
||||
|
||||
Autocomplete supports asynchronous filtering, in the example below we are using the [useAyncList](https://react-spectrum.adobe.com/react-stately/useAsyncList.html) function
|
||||
Autocomplete supports asynchronous filtering, in the example below we are using the [useAsyncList](https://react-spectrum.adobe.com/react-stately/useAsyncList.html) function
|
||||
from [react-aria](https://react-spectrum.adobe.com) to handle asynchronous loading and filtering of data from a server.
|
||||
|
||||
<PackageManagers
|
||||
|
||||
@ -13,8 +13,6 @@ Checkboxes allow users to select multiple items from a list of individual items,
|
||||
|
||||
---
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
<PackageManagers
|
||||
@ -70,6 +68,8 @@ The `isIndeterminate` prop sets a `Checkbox` to an indeterminate state, overridi
|
||||
|
||||
### Custom Check Icon
|
||||
|
||||
> By default, `IconProps` will be passed to your icon component. Please make sure that `isSelected`, `isIndeterminate`, and `disableAnimation` are not passed to a DOM element.
|
||||
|
||||
<CodeDemo title="Custom Check Icon" files={checkboxContent.customCheckIcon} />
|
||||
|
||||
### Controlled
|
||||
|
||||
@ -84,6 +84,10 @@ You can combine the `isInvalid` and `errorMessage` properties to show an invalid
|
||||
|
||||
<CodeDemo title="With Error Message" files={dateInputContent.errorMessage} />
|
||||
|
||||
You can also pass an error message as a function. This allows for dynamic error message handling based on the [ValidationResult]((https://github.com/adobe/react-spectrum/blob/1cacbf1d438675feb3859fee54b17e620b458d9c/packages/%40react-types/shared/src/inputs.d.ts#L44-L51)).
|
||||
|
||||
<CodeDemo title="With Error Message Function" files={dateInputContent.errorMessageFunction} />
|
||||
|
||||
### Controlled
|
||||
|
||||
You can use the `value` and `onChange` properties to control the input value.
|
||||
|
||||
@ -77,6 +77,10 @@ You can combine the `isInvalid` and `errorMessage` properties to show an invalid
|
||||
|
||||
<CodeDemo title="With Error Message" files={datePickerContent.errorMessage} />
|
||||
|
||||
You can also pass an error message as a function. This allows for dynamic error message handling based on the [ValidationResult]((https://github.com/adobe/react-spectrum/blob/1cacbf1d438675feb3859fee54b17e620b458d9c/packages/%40react-types/shared/src/inputs.d.ts#L44-L51)).
|
||||
|
||||
<CodeDemo title="With Error Message Function" files={datePickerContent.errorMessageFunction} />
|
||||
|
||||
### With Month and Year Pickers
|
||||
|
||||
<CodeDemo title="With Month and Year Pickers" files={datePickerContent.withMonthAndYearPickers} />
|
||||
@ -342,6 +346,7 @@ import {I18nProvider} from "@react-aria/i18n";
|
||||
| timeInputProps | `TimeInputProps` | Props to be passed to the time input component. | `{ size: "sm", variant: "light", radius: "full", isIconOnly: true }` |
|
||||
| disableAnimation | `boolean` | Whether to disable all animations in the date picker. Including the DateInput, Button, Calendar, and Popover. | `false` |
|
||||
| classNames | `Record<"base" \| "selectorButton" \| "selectorIcon" \| "popoverContent" \| "calendar" \| "calendarContent" \| "timeInputLabel" \| "timeInput", string>` | Allows to set custom class names for the date-picker slots. | - |
|
||||
| dateInputClassNames | `Record<"base"｜ "label"｜ "inputWrapper"｜ "innerWrapper"｜ "input"｜ "helperWrapper"｜ "description"｜ "errorMessage", string>` | Allows to set custom class names for the [date input slots](/docs/components/date-input#slots). | - |
|
||||
|
||||
### DatePicker Events
|
||||
|
||||
|
||||
@ -92,6 +92,10 @@ You can combine the `isInvalid` and `errorMessage` properties to show an invalid
|
||||
|
||||
<CodeDemo title="With Error Message" files={dateRangePickerContent.errorMessage} />
|
||||
|
||||
You can also pass an error message as a function. This allows for dynamic error message handling based on the [ValidationResult]((https://github.com/adobe/react-spectrum/blob/1cacbf1d438675feb3859fee54b17e620b458d9c/packages/%40react-types/shared/src/inputs.d.ts#L44-L51)).
|
||||
|
||||
<CodeDemo title="With Error Message Function" files={dateRangePickerContent.errorMessageFunction} />
|
||||
|
||||
### With Time Fields
|
||||
|
||||
DateRangePicker automatically includes time fields when a `CalendarDateTime` or `ZonedDateTime` object is provided as the value.
|
||||
|
||||
@ -285,6 +285,14 @@ the popover and listbox components.
|
||||
|
||||
- **data-filled**:
|
||||
Indicates if the select has a value, is focused, has start/end content or is open.
|
||||
- **data-has-value**:
|
||||
Indicates if the select has selected item(s).
|
||||
- **data-has-label**:
|
||||
Indicates if the select has a label. Based on `label` prop.
|
||||
- **data-has-helper**:
|
||||
Indicates if the select has helper text. Based on `errorMessage` or `description` prop.
|
||||
- **data-invalid**:
|
||||
Indicates if the select is invalid. Based on `isInvalid` prop.
|
||||
|
||||
`Select` has the following attributes on the `trigger` element:
|
||||
|
||||
|
||||
@ -78,6 +78,17 @@ A description for the field. Provides a hint such as specific requirements for w
|
||||
|
||||
<CodeDemo title="With Description" files={timeInputContent.withDescription} />
|
||||
|
||||
### With Error Message
|
||||
|
||||
You can combine the `isInvalid` and `errorMessage` properties to show an invalid input.
|
||||
|
||||
<CodeDemo title="With Error Message" files={timeInputContent.errorMessage} />
|
||||
|
||||
You can also pass an error message as a function. This allows for dynamic error message handling based on the [ValidationResult]((https://github.com/adobe/react-spectrum/blob/1cacbf1d438675feb3859fee54b17e620b458d9c/packages/%40react-types/shared/src/inputs.d.ts#L44-L51)).
|
||||
|
||||
<CodeDemo title="With Error Message Function" files={timeInputContent.errorMessageFunction} />
|
||||
|
||||
|
||||
### Label Placement
|
||||
|
||||
The label's overall position relative to the element it is labeling.
|
||||
|
||||
@ -28,7 +28,6 @@ Tooltips display a brief, informative message that appears when a user interacts
|
||||
}}
|
||||
/>
|
||||
|
||||
|
||||
## Import
|
||||
|
||||
<ImportTabs
|
||||
@ -38,6 +37,8 @@ Tooltips display a brief, informative message that appears when a user interacts
|
||||
}}
|
||||
/>
|
||||
|
||||
> For individual installation, please note that you should add `./node_modules/@nextui-org/theme/dist/components/popover.js` to your `tailwind.config.js` file instead since tooltip reuses popover styles.
|
||||
|
||||
## Usage
|
||||
|
||||
<CodeDemo title="Usage" files={tooltipContent.usage} />
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
"@codesandbox/sandpack-react": "^2.6.4",
|
||||
"@iconify/icons-solar": "^1.2.3",
|
||||
"@iconify/react": "^4.1.1",
|
||||
"@internationalized/date": "^3.5.2",
|
||||
"@internationalized/date": "^3.5.4",
|
||||
"@mapbox/rehype-prism": "^0.6.0",
|
||||
"@nextui-org/aria-utils": "workspace:*",
|
||||
"@nextui-org/badge": "workspace:*",
|
||||
@ -37,17 +37,17 @@
|
||||
"@nextui-org/use-infinite-scroll": "workspace:*",
|
||||
"@nextui-org/use-is-mobile": "workspace:*",
|
||||
"@radix-ui/react-scroll-area": "^1.0.5",
|
||||
"@react-aria/focus": "^3.16.2",
|
||||
"@react-aria/focus": "3.17.1",
|
||||
"@react-aria/i18n": "^3.10.2",
|
||||
"@react-aria/interactions": "^3.21.1",
|
||||
"@react-aria/selection": "^3.17.5",
|
||||
"@react-aria/ssr": "^3.9.2",
|
||||
"@react-aria/interactions": "3.21.3",
|
||||
"@react-aria/selection": "3.18.1",
|
||||
"@react-aria/ssr": "3.9.4",
|
||||
"@react-aria/utils": "3.24.1",
|
||||
"@react-aria/virtualizer": "^3.9.10",
|
||||
"@react-aria/visually-hidden": "^3.8.10",
|
||||
"@react-stately/data": "^3.11.2",
|
||||
"@react-stately/layout": "^3.13.7",
|
||||
"@react-stately/tree": "^3.7.6",
|
||||
"@react-aria/virtualizer": "3.10.1",
|
||||
"@react-aria/visually-hidden": "3.8.12",
|
||||
"@react-stately/data": "3.11.4",
|
||||
"@react-stately/layout": "3.13.9",
|
||||
"@react-stately/tree": "3.8.1",
|
||||
"@rehooks/local-storage": "^2.4.5",
|
||||
"@vercel/analytics": "^1.2.2",
|
||||
"canvas-confetti": "^1.9.2",
|
||||
|
||||
@ -1,5 +1,19 @@
|
||||
# @nextui-org/accordion
|
||||
|
||||
## 2.0.35
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [#3240](https://github.com/nextui-org/nextui/pull/3240) [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b) Thanks [@wingkwong](https://github.com/wingkwong)! - bump react-aria dependencies
|
||||
|
||||
- Updated dependencies [[`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b), [`3500147d7`](https://github.com/nextui-org/nextui/commit/3500147d7fbe53bc01ae24749fdeaf87c37c0d12), [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b), [`b9bb06ff3`](https://github.com/nextui-org/nextui/commit/b9bb06ff37f99bfc438e848706ec79b4c7b7c5d3)]:
|
||||
- @nextui-org/aria-utils@2.0.21
|
||||
- @nextui-org/shared-icons@2.0.8
|
||||
- @nextui-org/use-aria-accordion@2.0.6
|
||||
- @nextui-org/react-utils@2.0.14
|
||||
- @nextui-org/framer-utils@2.0.21
|
||||
- @nextui-org/divider@2.0.28
|
||||
|
||||
## 2.0.34
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/accordion",
|
||||
"version": "2.0.34",
|
||||
"version": "2.0.35",
|
||||
"description": "Collapse display a list of high-level options that can expand/collapse to reveal more information.",
|
||||
"keywords": [
|
||||
"react",
|
||||
@ -54,12 +54,12 @@
|
||||
"@nextui-org/framer-utils": "workspace:*",
|
||||
"@nextui-org/divider": "workspace:*",
|
||||
"@nextui-org/use-aria-accordion": "workspace:*",
|
||||
"@react-aria/interactions": "3.21.1",
|
||||
"@react-aria/focus": "3.16.2",
|
||||
"@react-aria/interactions": "3.21.3",
|
||||
"@react-aria/focus": "3.17.1",
|
||||
"@react-aria/utils": "3.24.1",
|
||||
"@react-stately/tree": "3.7.6",
|
||||
"@react-aria/button": "3.9.3",
|
||||
"@react-types/accordion": "3.0.0-alpha.19",
|
||||
"@react-stately/tree": "3.8.1",
|
||||
"@react-aria/button": "3.9.5",
|
||||
"@react-types/accordion": "3.0.0-alpha.21",
|
||||
"@react-types/shared": "3.23.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@ -1,5 +1,29 @@
|
||||
# @nextui-org/autocomplete
|
||||
|
||||
## 2.1.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [#3240](https://github.com/nextui-org/nextui/pull/3240) [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b) Thanks [@wingkwong](https://github.com/wingkwong)! - Fix popover focus issue (#3171, #2992)
|
||||
|
||||
- [#3240](https://github.com/nextui-org/nextui/pull/3240) [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b) Thanks [@wingkwong](https://github.com/wingkwong)! - bump react-aria dependencies
|
||||
|
||||
- [#2969](https://github.com/nextui-org/nextui/pull/2969) [`255c641f9`](https://github.com/nextui-org/nextui/commit/255c641f96903e0d6d29343774e9e7ae67fcdb34) Thanks [@chirokas](https://github.com/chirokas)! - Fix autocomplete controlled state (#2955)
|
||||
|
||||
- [#3175](https://github.com/nextui-org/nextui/pull/3175) [`2069a7a9d`](https://github.com/nextui-org/nextui/commit/2069a7a9d00291266fef763c6817b3bdd3ed4707) Thanks [@wingkwong](https://github.com/wingkwong)! - Fix maximum update depth exceeded on Autocomplete component (#3094)
|
||||
|
||||
- Updated dependencies [[`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b), [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b), [`3500147d7`](https://github.com/nextui-org/nextui/commit/3500147d7fbe53bc01ae24749fdeaf87c37c0d12), [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b), [`dbb4b8ee5`](https://github.com/nextui-org/nextui/commit/dbb4b8ee564114bfb0ef93467ed9ef6a3ff7e2e7), [`b9bb06ff3`](https://github.com/nextui-org/nextui/commit/b9bb06ff37f99bfc438e848706ec79b4c7b7c5d3)]:
|
||||
- @nextui-org/popover@2.1.24
|
||||
- @nextui-org/aria-utils@2.0.21
|
||||
- @nextui-org/shared-icons@2.0.8
|
||||
- @nextui-org/button@2.0.34
|
||||
- @nextui-org/input@2.2.2
|
||||
- @nextui-org/listbox@2.1.22
|
||||
- @nextui-org/use-aria-button@2.0.9
|
||||
- @nextui-org/react-utils@2.0.14
|
||||
- @nextui-org/scroll-shadow@2.1.17
|
||||
- @nextui-org/spinner@2.0.30
|
||||
|
||||
## 2.1.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -48,6 +48,21 @@ const itemsSectionData = [
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
const ControlledAutocomplete = <T = object>(props: AutocompleteProps<T>) => {
|
||||
const [selectedKey, setSelectedKey] = React.useState<React.Key>("cat");
|
||||
|
||||
return (
|
||||
<Autocomplete
|
||||
{...props}
|
||||
aria-label="Favorite Animal"
|
||||
label="Favorite Animal"
|
||||
selectedKey={selectedKey}
|
||||
onSelectionChange={setSelectedKey}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const AutocompleteExample = (props: Partial<AutocompleteProps> = {}) => (
|
||||
<Autocomplete label="Favorite Animal" {...props}>
|
||||
<AutocompleteItem key="penguin" value="penguin">
|
||||
@ -62,6 +77,7 @@ const AutocompleteExample = (props: Partial<AutocompleteProps> = {}) => (
|
||||
</Autocomplete>
|
||||
);
|
||||
|
||||
|
||||
describe("Autocomplete", () => {
|
||||
it("should render correctly", () => {
|
||||
const wrapper = render(<AutocompleteExample />);
|
||||
@ -165,7 +181,7 @@ describe("Autocomplete", () => {
|
||||
// assert that the autocomplete listbox is open
|
||||
expect(autocomplete).toHaveAttribute("aria-expanded", "true");
|
||||
|
||||
// assert that input is focused
|
||||
// assert that the autocomplete input is focused
|
||||
expect(autocomplete).toHaveFocus();
|
||||
});
|
||||
|
||||
@ -355,8 +371,8 @@ describe("Autocomplete", () => {
|
||||
// assert that the autocomplete listbox is closed
|
||||
expect(autocomplete).toHaveAttribute("aria-expanded", "false");
|
||||
|
||||
// assert that input is not focused
|
||||
expect(autocomplete).not.toHaveFocus();
|
||||
// assert that input is focused
|
||||
expect(autocomplete).toHaveFocus();
|
||||
});
|
||||
|
||||
it("should set the input after selection", async () => {
|
||||
@ -529,7 +545,7 @@ describe("Autocomplete", () => {
|
||||
<form data-testid="form">
|
||||
<AutocompleteExample
|
||||
defaultInputValue="Penguin"
|
||||
validate={(v) => (v === "Penguin" ? "Invalid value" : null)}
|
||||
validate={(v) => (v.inputValue === "Penguin" ? "Invalid value" : null)}
|
||||
validationBehavior="aria"
|
||||
/>
|
||||
</form>,
|
||||
@ -559,6 +575,60 @@ describe("Autocomplete", () => {
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it("should work when key equals textValue", async () => {
|
||||
const wrapper = render(
|
||||
<Autocomplete
|
||||
aria-label="Favorite Animal"
|
||||
data-testid="when-key-equals-textValue"
|
||||
defaultSelectedKey="cat"
|
||||
items={itemsData}
|
||||
label="Favorite Animal"
|
||||
>
|
||||
{(item) => <AutocompleteItem key={item.value}>{item.value}</AutocompleteItem>}
|
||||
</Autocomplete>,
|
||||
);
|
||||
|
||||
const autocomplete = wrapper.getByTestId("when-key-equals-textValue");
|
||||
|
||||
const user = userEvent.setup();
|
||||
|
||||
await user.click(autocomplete);
|
||||
|
||||
expect(autocomplete).toHaveValue("cat");
|
||||
expect(autocomplete).toHaveAttribute("aria-expanded", "true");
|
||||
|
||||
let listboxItems = wrapper.getAllByRole("option");
|
||||
|
||||
await user.click(listboxItems[1]);
|
||||
|
||||
expect(autocomplete).toHaveValue("dog");
|
||||
expect(autocomplete).toHaveAttribute("aria-expanded", "false");
|
||||
});
|
||||
|
||||
it("should work when key equals textValue (controlled)", async () => {
|
||||
const wrapper = render(
|
||||
<ControlledAutocomplete data-testid="when-key-equals-textValue" items={itemsData}>
|
||||
{(item) => <AutocompleteItem key={item.value}>{item.value}</AutocompleteItem>}
|
||||
</ControlledAutocomplete>,
|
||||
);
|
||||
|
||||
const autocomplete = wrapper.getByTestId("when-key-equals-textValue");
|
||||
|
||||
const user = userEvent.setup();
|
||||
|
||||
await user.click(autocomplete);
|
||||
|
||||
expect(autocomplete).toHaveValue("cat");
|
||||
expect(autocomplete).toHaveAttribute("aria-expanded", "true");
|
||||
|
||||
let listboxItems = wrapper.getAllByRole("option");
|
||||
|
||||
await user.click(listboxItems[1]);
|
||||
|
||||
expect(autocomplete).toHaveValue("dog");
|
||||
expect(autocomplete).toHaveAttribute("aria-expanded", "false");
|
||||
});
|
||||
});
|
||||
|
||||
describe("Autocomplete with React Hook Form", () => {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/autocomplete",
|
||||
"version": "2.1.1",
|
||||
"version": "2.1.2",
|
||||
"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"
|
||||
@ -53,14 +53,14 @@
|
||||
"@nextui-org/use-aria-button": "workspace:*",
|
||||
"@nextui-org/shared-icons": "workspace:*",
|
||||
"@nextui-org/use-safe-layout-effect": "workspace:*",
|
||||
"@react-aria/combobox": "3.8.4",
|
||||
"@react-aria/focus": "3.16.2",
|
||||
"@react-aria/i18n": "3.10.2",
|
||||
"@react-aria/interactions": "3.21.1",
|
||||
"@react-aria/combobox": "3.9.1",
|
||||
"@react-aria/focus": "3.17.1",
|
||||
"@react-aria/i18n": "3.11.1",
|
||||
"@react-aria/interactions": "3.21.3",
|
||||
"@react-aria/utils": "3.24.1",
|
||||
"@react-aria/visually-hidden": "3.8.10",
|
||||
"@react-stately/combobox": "3.8.2",
|
||||
"@react-types/combobox": "3.10.1",
|
||||
"@react-aria/visually-hidden": "3.8.12",
|
||||
"@react-stately/combobox": "3.8.4",
|
||||
"@react-types/combobox": "3.11.1",
|
||||
"@react-types/shared": "3.23.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -70,7 +70,7 @@
|
||||
"@nextui-org/chip": "workspace:*",
|
||||
"@nextui-org/stories-utils": "workspace:*",
|
||||
"@nextui-org/use-infinite-scroll": "workspace:*",
|
||||
"@react-stately/data": "3.11.2",
|
||||
"@react-stately/data": "3.11.4",
|
||||
"framer-motion": "^11.0.28",
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0",
|
||||
|
||||
@ -202,9 +202,6 @@ export function useAutocomplete<T extends object>(originalProps: UseAutocomplete
|
||||
const inputRef = useDOMRef<HTMLInputElement>(ref);
|
||||
const scrollShadowRef = useDOMRef<HTMLElement>(scrollRefProp);
|
||||
|
||||
// control the input focus behaviours internally
|
||||
const shouldFocus = useRef(false);
|
||||
|
||||
const {
|
||||
buttonProps,
|
||||
inputProps,
|
||||
@ -314,32 +311,28 @@ export function useAutocomplete<T extends object>(originalProps: UseAutocomplete
|
||||
const key = inputRef.current.value;
|
||||
const item = state.collection.getItem(key);
|
||||
|
||||
if (item) {
|
||||
if (item && state.inputValue !== item.textValue) {
|
||||
state.setSelectedKey(key);
|
||||
state.setInputValue(item.textValue);
|
||||
}
|
||||
}, [inputRef.current]);
|
||||
|
||||
// apply the same with to the popover as the select
|
||||
useEffect(() => {
|
||||
if (isOpen && popoverRef.current && inputWrapperRef.current) {
|
||||
let rect = inputWrapperRef.current.getBoundingClientRect();
|
||||
// set input focus
|
||||
if (isOpen) {
|
||||
onFocus(true);
|
||||
|
||||
let popover = popoverRef.current;
|
||||
// apply the same with to the popover as the select
|
||||
if (popoverRef.current && inputWrapperRef.current) {
|
||||
let rect = inputWrapperRef.current.getBoundingClientRect();
|
||||
|
||||
popover.style.width = rect.width + "px";
|
||||
let popover = popoverRef.current;
|
||||
|
||||
popover.style.width = rect.width + "px";
|
||||
}
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
// react aria has different focus strategies internally
|
||||
// hence, handle focus behaviours on our side for better flexibilty
|
||||
useEffect(() => {
|
||||
const action = shouldFocus.current || isOpen ? "focus" : "blur";
|
||||
|
||||
inputRef?.current?.[action]();
|
||||
if (action === "blur") shouldFocus.current = false;
|
||||
}, [shouldFocus.current, isOpen]);
|
||||
|
||||
// to prevent the error message:
|
||||
// stopPropagation is now the default behavior for events in React Spectrum.
|
||||
// You can use continuePropagation() to revert this behavior.
|
||||
@ -466,8 +459,7 @@ export function useAutocomplete<T extends object>(originalProps: UseAutocomplete
|
||||
},
|
||||
shouldCloseOnInteractOutside: popoverProps?.shouldCloseOnInteractOutside
|
||||
? popoverProps.shouldCloseOnInteractOutside
|
||||
: (element: Element) =>
|
||||
ariaShouldCloseOnInteractOutside(element, inputWrapperRef, state, shouldFocus),
|
||||
: (element: Element) => ariaShouldCloseOnInteractOutside(element, inputWrapperRef, state),
|
||||
} as unknown as PopoverProps;
|
||||
};
|
||||
|
||||
|
||||
@ -1,5 +1,14 @@
|
||||
# @nextui-org/avatar
|
||||
|
||||
## 2.0.30
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [#3240](https://github.com/nextui-org/nextui/pull/3240) [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b) Thanks [@wingkwong](https://github.com/wingkwong)! - bump react-aria dependencies
|
||||
|
||||
- Updated dependencies [[`b9bb06ff3`](https://github.com/nextui-org/nextui/commit/b9bb06ff37f99bfc438e848706ec79b4c7b7c5d3)]:
|
||||
- @nextui-org/react-utils@2.0.14
|
||||
|
||||
## 2.0.29
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/avatar",
|
||||
"version": "2.0.29",
|
||||
"version": "2.0.30",
|
||||
"description": "The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon.",
|
||||
"keywords": [
|
||||
"avatar"
|
||||
@ -43,9 +43,9 @@
|
||||
"@nextui-org/shared-utils": "workspace:*",
|
||||
"@nextui-org/react-utils": "workspace:*",
|
||||
"@nextui-org/use-image": "workspace:*",
|
||||
"@react-aria/interactions": "3.21.1",
|
||||
"@react-aria/focus": "3.16.2",
|
||||
"@react-aria/utils": "3.23.2"
|
||||
"@react-aria/interactions": "3.21.3",
|
||||
"@react-aria/focus": "3.17.1",
|
||||
"@react-aria/utils": "3.24.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@nextui-org/theme": "workspace:*",
|
||||
|
||||
@ -1,5 +1,12 @@
|
||||
# @nextui-org/badge
|
||||
|
||||
## 2.0.29
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [[`b9bb06ff3`](https://github.com/nextui-org/nextui/commit/b9bb06ff37f99bfc438e848706ec79b4c7b7c5d3)]:
|
||||
- @nextui-org/react-utils@2.0.14
|
||||
|
||||
## 2.0.28
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/badge",
|
||||
"version": "2.0.28",
|
||||
"version": "2.0.29",
|
||||
"description": "Badges are used as a small numerical value or status descriptor for UI elements.",
|
||||
"keywords": [
|
||||
"badge"
|
||||
|
||||
@ -1,5 +1,15 @@
|
||||
# @nextui-org/breadcrumbs
|
||||
|
||||
## 2.0.10
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [#3240](https://github.com/nextui-org/nextui/pull/3240) [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b) Thanks [@wingkwong](https://github.com/wingkwong)! - bump react-aria dependencies
|
||||
|
||||
- Updated dependencies [[`3500147d7`](https://github.com/nextui-org/nextui/commit/3500147d7fbe53bc01ae24749fdeaf87c37c0d12), [`b9bb06ff3`](https://github.com/nextui-org/nextui/commit/b9bb06ff37f99bfc438e848706ec79b4c7b7c5d3)]:
|
||||
- @nextui-org/shared-icons@2.0.8
|
||||
- @nextui-org/react-utils@2.0.14
|
||||
|
||||
## 2.0.9
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/breadcrumbs",
|
||||
"version": "2.0.9",
|
||||
"version": "2.0.10",
|
||||
"description": "Breadcrumbs display a hierarchy of links to the current page or resource in an application.",
|
||||
"keywords": [
|
||||
"breadcrumbs"
|
||||
@ -43,10 +43,10 @@
|
||||
"@nextui-org/react-utils": "workspace:*",
|
||||
"@nextui-org/shared-utils": "workspace:*",
|
||||
"@nextui-org/shared-icons": "workspace:*",
|
||||
"@react-aria/focus": "3.16.2",
|
||||
"@react-aria/breadcrumbs": "3.5.11",
|
||||
"@react-aria/focus": "3.17.1",
|
||||
"@react-aria/breadcrumbs": "3.5.13",
|
||||
"@react-aria/utils": "3.24.1",
|
||||
"@react-types/breadcrumbs": "3.7.3",
|
||||
"@react-types/breadcrumbs": "3.7.5",
|
||||
"@react-types/shared": "3.23.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@ -1,5 +1,17 @@
|
||||
# @nextui-org/button
|
||||
|
||||
## 2.0.34
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [#3240](https://github.com/nextui-org/nextui/pull/3240) [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b) Thanks [@wingkwong](https://github.com/wingkwong)! - bump react-aria dependencies
|
||||
|
||||
- Updated dependencies [[`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b), [`b9bb06ff3`](https://github.com/nextui-org/nextui/commit/b9bb06ff37f99bfc438e848706ec79b4c7b7c5d3)]:
|
||||
- @nextui-org/use-aria-button@2.0.9
|
||||
- @nextui-org/react-utils@2.0.14
|
||||
- @nextui-org/ripple@2.0.30
|
||||
- @nextui-org/spinner@2.0.30
|
||||
|
||||
## 2.0.33
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/button",
|
||||
"version": "2.0.33",
|
||||
"version": "2.0.34",
|
||||
"description": "Buttons allow users to perform actions and choose with a single tap.",
|
||||
"keywords": [
|
||||
"button"
|
||||
@ -46,12 +46,12 @@
|
||||
"@nextui-org/use-aria-button": "workspace:*",
|
||||
"@nextui-org/ripple": "workspace:*",
|
||||
"@nextui-org/spinner": "workspace:*",
|
||||
"@react-aria/button": "3.9.3",
|
||||
"@react-aria/interactions": "3.21.1",
|
||||
"@react-aria/button": "3.9.5",
|
||||
"@react-aria/interactions": "3.21.3",
|
||||
"@react-aria/utils": "3.24.1",
|
||||
"@react-aria/focus": "3.16.2",
|
||||
"@react-aria/focus": "3.17.1",
|
||||
"@react-types/shared": "3.23.1",
|
||||
"@react-types/button": "3.9.2"
|
||||
"@react-types/button": "3.9.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@nextui-org/theme": "workspace:*",
|
||||
|
||||
@ -1,5 +1,18 @@
|
||||
# @nextui-org/calendar
|
||||
|
||||
## 2.0.7
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [#3240](https://github.com/nextui-org/nextui/pull/3240) [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b) Thanks [@wingkwong](https://github.com/wingkwong)! - bump react-aria dependencies
|
||||
|
||||
- Updated dependencies [[`3500147d7`](https://github.com/nextui-org/nextui/commit/3500147d7fbe53bc01ae24749fdeaf87c37c0d12), [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b), [`b9bb06ff3`](https://github.com/nextui-org/nextui/commit/b9bb06ff37f99bfc438e848706ec79b4c7b7c5d3)]:
|
||||
- @nextui-org/shared-icons@2.0.8
|
||||
- @nextui-org/button@2.0.34
|
||||
- @nextui-org/use-aria-button@2.0.9
|
||||
- @nextui-org/react-utils@2.0.14
|
||||
- @nextui-org/framer-utils@2.0.21
|
||||
|
||||
## 2.0.6
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/calendar",
|
||||
"version": "2.0.6",
|
||||
"version": "2.0.7",
|
||||
"description": "A calendar displays one or more date grids and allows users to select a single date.",
|
||||
"keywords": [
|
||||
"calendar"
|
||||
@ -47,17 +47,17 @@
|
||||
"@nextui-org/use-aria-button": "workspace:*",
|
||||
"@nextui-org/button": "workspace:*",
|
||||
"lodash.debounce": "^4.0.8",
|
||||
"@internationalized/date": "^3.5.2",
|
||||
"@react-aria/calendar": "3.5.6",
|
||||
"@react-aria/focus": "3.16.2",
|
||||
"@react-aria/i18n": "3.10.2",
|
||||
"@react-stately/calendar": "3.4.4",
|
||||
"@react-types/button": "3.9.2",
|
||||
"@react-aria/visually-hidden": "3.8.10",
|
||||
"@internationalized/date": "^3.5.4",
|
||||
"@react-aria/calendar": "3.5.8",
|
||||
"@react-aria/focus": "3.17.1",
|
||||
"@react-aria/i18n": "3.11.1",
|
||||
"@react-stately/calendar": "3.5.1",
|
||||
"@react-types/button": "3.9.4",
|
||||
"@react-aria/visually-hidden": "3.8.12",
|
||||
"@react-aria/utils": "3.24.1",
|
||||
"@react-stately/utils": "3.9.1",
|
||||
"@react-types/calendar": "3.4.4",
|
||||
"@react-aria/interactions": "3.21.1",
|
||||
"@react-stately/utils": "3.10.1",
|
||||
"@react-types/calendar": "3.4.6",
|
||||
"@react-aria/interactions": "3.21.3",
|
||||
"@react-types/shared": "3.23.1",
|
||||
"scroll-into-view-if-needed": "3.0.10",
|
||||
"@types/lodash.debounce": "^4.0.7"
|
||||
|
||||
@ -1,5 +1,16 @@
|
||||
# @nextui-org/card
|
||||
|
||||
## 2.0.31
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [#3240](https://github.com/nextui-org/nextui/pull/3240) [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b) Thanks [@wingkwong](https://github.com/wingkwong)! - bump react-aria dependencies
|
||||
|
||||
- Updated dependencies [[`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b), [`b9bb06ff3`](https://github.com/nextui-org/nextui/commit/b9bb06ff37f99bfc438e848706ec79b4c7b7c5d3)]:
|
||||
- @nextui-org/use-aria-button@2.0.9
|
||||
- @nextui-org/react-utils@2.0.14
|
||||
- @nextui-org/ripple@2.0.30
|
||||
|
||||
## 2.0.30
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/card",
|
||||
"version": "2.0.30",
|
||||
"version": "2.0.31",
|
||||
"description": "Card is a container for text, photos, and actions in the context of a single subject.",
|
||||
"keywords": [
|
||||
"card"
|
||||
@ -45,10 +45,10 @@
|
||||
"@nextui-org/react-utils": "workspace:*",
|
||||
"@nextui-org/use-aria-button": "workspace:*",
|
||||
"@nextui-org/ripple": "workspace:*",
|
||||
"@react-aria/focus": "3.16.2",
|
||||
"@react-aria/focus": "3.17.1",
|
||||
"@react-aria/utils": "3.24.1",
|
||||
"@react-aria/interactions": "3.21.1",
|
||||
"@react-aria/button": "3.9.3",
|
||||
"@react-aria/interactions": "3.21.3",
|
||||
"@react-aria/button": "3.9.5",
|
||||
"@react-types/shared": "3.23.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@ -1,5 +1,14 @@
|
||||
# @nextui-org/checkbox
|
||||
|
||||
## 2.1.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [#3240](https://github.com/nextui-org/nextui/pull/3240) [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b) Thanks [@wingkwong](https://github.com/wingkwong)! - bump react-aria dependencies
|
||||
|
||||
- Updated dependencies [[`b9bb06ff3`](https://github.com/nextui-org/nextui/commit/b9bb06ff37f99bfc438e848706ec79b4c7b7c5d3)]:
|
||||
- @nextui-org/react-utils@2.0.14
|
||||
|
||||
## 2.1.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/checkbox",
|
||||
"version": "2.1.1",
|
||||
"version": "2.1.2",
|
||||
"description": "Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected.",
|
||||
"keywords": [
|
||||
"checkbox"
|
||||
@ -44,14 +44,14 @@
|
||||
"@nextui-org/shared-utils": "workspace:*",
|
||||
"@nextui-org/use-callback-ref": "workspace:*",
|
||||
"@nextui-org/use-safe-layout-effect": "workspace:*",
|
||||
"@react-aria/checkbox": "3.14.1",
|
||||
"@react-aria/focus": "3.16.2",
|
||||
"@react-aria/interactions": "3.21.1",
|
||||
"@react-aria/checkbox": "3.14.3",
|
||||
"@react-aria/focus": "3.17.1",
|
||||
"@react-aria/interactions": "3.21.3",
|
||||
"@react-aria/utils": "3.24.1",
|
||||
"@react-aria/visually-hidden": "3.8.10",
|
||||
"@react-stately/checkbox": "3.6.3",
|
||||
"@react-stately/toggle": "3.7.2",
|
||||
"@react-types/checkbox": "3.7.1",
|
||||
"@react-aria/visually-hidden": "3.8.12",
|
||||
"@react-stately/checkbox": "3.6.5",
|
||||
"@react-stately/toggle": "3.7.4",
|
||||
"@react-types/checkbox": "3.8.1",
|
||||
"@react-types/shared": "3.23.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@ -1,5 +1,15 @@
|
||||
# @nextui-org/chip
|
||||
|
||||
## 2.0.30
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [#3240](https://github.com/nextui-org/nextui/pull/3240) [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b) Thanks [@wingkwong](https://github.com/wingkwong)! - bump react-aria dependencies
|
||||
|
||||
- Updated dependencies [[`3500147d7`](https://github.com/nextui-org/nextui/commit/3500147d7fbe53bc01ae24749fdeaf87c37c0d12), [`b9bb06ff3`](https://github.com/nextui-org/nextui/commit/b9bb06ff37f99bfc438e848706ec79b4c7b7c5d3)]:
|
||||
- @nextui-org/shared-icons@2.0.8
|
||||
- @nextui-org/react-utils@2.0.14
|
||||
|
||||
## 2.0.29
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/chip",
|
||||
"version": "2.0.29",
|
||||
"version": "2.0.30",
|
||||
"description": "Chips help people enter information, make selections, filter content, or trigger actions.",
|
||||
"keywords": [
|
||||
"chip"
|
||||
@ -43,10 +43,10 @@
|
||||
"@nextui-org/shared-icons": "workspace:*",
|
||||
"@nextui-org/shared-utils": "workspace:*",
|
||||
"@nextui-org/react-utils": "workspace:*",
|
||||
"@react-aria/focus": "3.16.2",
|
||||
"@react-aria/interactions": "3.21.1",
|
||||
"@react-aria/focus": "3.17.1",
|
||||
"@react-aria/interactions": "3.21.3",
|
||||
"@react-aria/utils": "3.24.1",
|
||||
"@react-types/checkbox": "3.7.1"
|
||||
"@react-types/checkbox": "3.8.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@nextui-org/theme": "workspace:*",
|
||||
|
||||
@ -1,5 +1,13 @@
|
||||
# @nextui-org/code
|
||||
|
||||
## 2.0.29
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [[`b9bb06ff3`](https://github.com/nextui-org/nextui/commit/b9bb06ff37f99bfc438e848706ec79b4c7b7c5d3)]:
|
||||
- @nextui-org/react-utils@2.0.14
|
||||
- @nextui-org/system-rsc@2.1.2
|
||||
|
||||
## 2.0.28
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/code",
|
||||
"version": "2.0.28",
|
||||
"version": "2.0.29",
|
||||
"description": "Code is a component used to display inline code.",
|
||||
"keywords": [
|
||||
"code"
|
||||
|
||||
@ -1,5 +1,16 @@
|
||||
# @nextui-org/date-input
|
||||
|
||||
## 2.1.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [#3240](https://github.com/nextui-org/nextui/pull/3240) [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b) Thanks [@wingkwong](https://github.com/wingkwong)! - bump react-aria dependencies
|
||||
|
||||
- [#3112](https://github.com/nextui-org/nextui/pull/3112) [`df0126f93`](https://github.com/nextui-org/nextui/commit/df0126f93f0f9c2cfa0cbfa44f5abd394ebd48d0) Thanks [@ryo-manba](https://github.com/ryo-manba)! - chore(date): update errorMessageFunction story and docs for date libraries
|
||||
|
||||
- Updated dependencies [[`b9bb06ff3`](https://github.com/nextui-org/nextui/commit/b9bb06ff37f99bfc438e848706ec79b4c7b7c5d3)]:
|
||||
- @nextui-org/react-utils@2.0.14
|
||||
|
||||
## 2.1.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/date-input",
|
||||
"version": "2.1.0",
|
||||
"version": "2.1.1",
|
||||
"description": "A date input allows users to enter and edit date and time values using a keyboard.",
|
||||
"keywords": [
|
||||
"date-field"
|
||||
@ -42,13 +42,13 @@
|
||||
"dependencies": {
|
||||
"@nextui-org/react-utils": "workspace:*",
|
||||
"@nextui-org/shared-utils": "workspace:*",
|
||||
"@internationalized/date": "^3.5.2",
|
||||
"@react-aria/datepicker": "3.9.3",
|
||||
"@react-aria/i18n": "3.10.2",
|
||||
"@react-stately/datepicker": "3.9.2",
|
||||
"@react-types/datepicker": "3.7.2",
|
||||
"@internationalized/date": "^3.5.4",
|
||||
"@react-aria/datepicker": "3.10.1",
|
||||
"@react-aria/i18n": "3.11.1",
|
||||
"@react-stately/datepicker": "3.9.4",
|
||||
"@react-types/datepicker": "3.7.4",
|
||||
"@react-types/shared": "3.23.1",
|
||||
"@react-aria/utils": "3.23.2"
|
||||
"@react-aria/utils": "3.24.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@nextui-org/system": "workspace:*",
|
||||
|
||||
@ -1,21 +1,11 @@
|
||||
import type {HTMLAttributes, ReactElement, ReactNode} from "react";
|
||||
import type {GroupDOMAttributes} from "@react-types/shared";
|
||||
import type {GroupDOMAttributes, HelpTextProps, ValidationResult} from "@react-types/shared";
|
||||
|
||||
import {useMemo} from "react";
|
||||
import {forwardRef} from "@nextui-org/system";
|
||||
import {dataAttr} from "@nextui-org/shared-utils";
|
||||
|
||||
// TODO: Use HelpTextProps from "@react-types/shared"; once we upgrade react-aria packages to the latest version.
|
||||
export interface ValidationResult {
|
||||
/** Whether the input value is invalid. */
|
||||
isInvalid: boolean;
|
||||
/** The current error messages for the input if it is invalid, otherwise an empty array. */
|
||||
validationErrors: string[];
|
||||
/** The native validation details for the input. */
|
||||
validationDetails: ValidityState;
|
||||
}
|
||||
|
||||
export interface DateInputGroupProps extends ValidationResult {
|
||||
export interface DateInputGroupProps extends ValidationResult, HelpTextProps {
|
||||
children?: ReactElement | ReactElement[];
|
||||
shouldLabelBeOutside?: boolean;
|
||||
label?: ReactNode;
|
||||
@ -27,10 +17,6 @@ export interface DateInputGroupProps extends ValidationResult {
|
||||
labelProps?: HTMLAttributes<HTMLElement>;
|
||||
descriptionProps?: HTMLAttributes<HTMLElement>;
|
||||
errorMessageProps?: HTMLAttributes<HTMLElement>;
|
||||
/** A description for the field. Provides a hint such as specific requirements for what to choose. */
|
||||
description?: ReactNode;
|
||||
/** An error message for the field. */
|
||||
errorMessage?: ReactNode | ((v: ValidationResult) => ReactNode);
|
||||
}
|
||||
|
||||
export const DateInputGroup = forwardRef<"div", DateInputGroupProps>((props, ref) => {
|
||||
|
||||
@ -155,7 +155,6 @@ export function useDateInput<T extends DateValue>(originalProps: UseDateInputPro
|
||||
minValue,
|
||||
maxValue,
|
||||
validationBehavior,
|
||||
isInvalid: isInvalidProp,
|
||||
shouldForceLeadingZeros,
|
||||
createCalendar:
|
||||
!createCalendarProp || typeof createCalendarProp !== "function"
|
||||
|
||||
@ -13,6 +13,7 @@ import {
|
||||
} from "@internationalized/date";
|
||||
import {CalendarBoldIcon} from "@nextui-org/shared-icons";
|
||||
import {useDateFormatter, I18nProvider} from "@react-aria/i18n";
|
||||
import {ValidationResult} from "@react-types/shared";
|
||||
|
||||
import {DateInput, DateInputProps} from "../src";
|
||||
|
||||
@ -254,10 +255,25 @@ export const WithErrorMessage = {
|
||||
|
||||
args: {
|
||||
...defaultProps,
|
||||
isInvalid: true,
|
||||
errorMessage: "Please enter a valid date",
|
||||
},
|
||||
};
|
||||
|
||||
export const WithErrorMessageFunction = {
|
||||
render: Template,
|
||||
|
||||
args: {
|
||||
...defaultProps,
|
||||
isInvalid: true,
|
||||
errorMessage: (value: ValidationResult) => {
|
||||
if (value.isInvalid) {
|
||||
return "Please enter a valid date";
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const IsInvalid = {
|
||||
render: Template,
|
||||
|
||||
|
||||
@ -9,6 +9,7 @@ import {
|
||||
ZonedDateTime,
|
||||
} from "@internationalized/date";
|
||||
import {useDateFormatter} from "@react-aria/i18n";
|
||||
import {ValidationResult} from "@react-types/shared";
|
||||
|
||||
import {TimeInput, TimeInputProps, TimeInputValue as TimeValue} from "../src";
|
||||
|
||||
@ -192,6 +193,30 @@ export const WithDescription = {
|
||||
},
|
||||
};
|
||||
|
||||
export const WithErrorMessage = {
|
||||
render: Template,
|
||||
|
||||
args: {
|
||||
...defaultProps,
|
||||
isInvalid: true,
|
||||
errorMessage: "Please enter a valid time",
|
||||
},
|
||||
};
|
||||
|
||||
export const WithErrorMessageFunction = {
|
||||
render: Template,
|
||||
|
||||
args: {
|
||||
...defaultProps,
|
||||
isInvalid: true,
|
||||
errorMessage: (value: ValidationResult) => {
|
||||
if (value.isInvalid) {
|
||||
return "Please enter a valid date";
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const LabelPlacement = {
|
||||
render: LabelPlacementTemplate,
|
||||
|
||||
|
||||
@ -1,5 +1,24 @@
|
||||
# @nextui-org/date-picker
|
||||
|
||||
## 2.1.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [#3146](https://github.com/nextui-org/nextui/pull/3146) [`3da81494c`](https://github.com/nextui-org/nextui/commit/3da81494c37f26e9b0e76745e461ac091e7c03af) Thanks [@ryo-manba](https://github.com/ryo-manba)! - Add support for apply styles to DateInput (#2770, #2895, #2998)
|
||||
|
||||
- [#3240](https://github.com/nextui-org/nextui/pull/3240) [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b) Thanks [@wingkwong](https://github.com/wingkwong)! - bump react-aria dependencies
|
||||
|
||||
- [#3112](https://github.com/nextui-org/nextui/pull/3112) [`df0126f93`](https://github.com/nextui-org/nextui/commit/df0126f93f0f9c2cfa0cbfa44f5abd394ebd48d0) Thanks [@ryo-manba](https://github.com/ryo-manba)! - chore(date): update errorMessageFunction story and docs for date libraries
|
||||
|
||||
- Updated dependencies [[`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b), [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b), [`3500147d7`](https://github.com/nextui-org/nextui/commit/3500147d7fbe53bc01ae24749fdeaf87c37c0d12), [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b), [`df0126f93`](https://github.com/nextui-org/nextui/commit/df0126f93f0f9c2cfa0cbfa44f5abd394ebd48d0), [`b9bb06ff3`](https://github.com/nextui-org/nextui/commit/b9bb06ff37f99bfc438e848706ec79b4c7b7c5d3)]:
|
||||
- @nextui-org/popover@2.1.24
|
||||
- @nextui-org/aria-utils@2.0.21
|
||||
- @nextui-org/shared-icons@2.0.8
|
||||
- @nextui-org/button@2.0.34
|
||||
- @nextui-org/calendar@2.0.7
|
||||
- @nextui-org/date-input@2.1.1
|
||||
- @nextui-org/react-utils@2.0.14
|
||||
|
||||
## 2.1.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -172,6 +172,26 @@ describe("DatePicker", () => {
|
||||
|
||||
expect(getByTestId("foo")).toHaveAttribute("role", "group");
|
||||
});
|
||||
|
||||
it("should apply custom dateInput classNames", function () {
|
||||
const {getByRole, getByText} = render(
|
||||
<DatePicker
|
||||
dateInputClassNames={{
|
||||
inputWrapper: "border-green-500",
|
||||
label: "text-green-500",
|
||||
}}
|
||||
label="Date"
|
||||
/>,
|
||||
);
|
||||
|
||||
const label = getByText("Date");
|
||||
|
||||
expect(label).toHaveClass("text-green-500");
|
||||
|
||||
const inputWrapper = getByRole("group");
|
||||
|
||||
expect(inputWrapper).toHaveClass("border-green-500");
|
||||
});
|
||||
});
|
||||
|
||||
describe("Events", () => {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/date-picker",
|
||||
"version": "2.1.1",
|
||||
"version": "2.1.2",
|
||||
"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"
|
||||
@ -48,15 +48,15 @@
|
||||
"@nextui-org/date-input": "workspace:*",
|
||||
"@nextui-org/shared-icons": "workspace:*",
|
||||
"@nextui-org/aria-utils": "workspace:*",
|
||||
"@react-stately/overlays": "3.6.5",
|
||||
"@react-stately/utils": "3.9.1",
|
||||
"@internationalized/date": "^3.5.2",
|
||||
"@react-aria/datepicker": "3.9.3",
|
||||
"@react-aria/i18n": "3.10.2",
|
||||
"@react-stately/datepicker": "3.9.2",
|
||||
"@react-types/datepicker": "3.7.2",
|
||||
"@react-stately/overlays": "3.6.7",
|
||||
"@react-stately/utils": "3.10.1",
|
||||
"@internationalized/date": "^3.5.4",
|
||||
"@react-aria/datepicker": "3.10.1",
|
||||
"@react-aria/i18n": "3.11.1",
|
||||
"@react-stately/datepicker": "3.9.4",
|
||||
"@react-types/datepicker": "3.7.4",
|
||||
"@react-types/shared": "3.23.1",
|
||||
"@react-aria/utils": "3.23.2"
|
||||
"@react-aria/utils": "3.24.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@nextui-org/system": "workspace:*",
|
||||
|
||||
@ -49,7 +49,13 @@ interface Props<T extends DateValue>
|
||||
classNames?: SlotsToClasses<DatePickerSlots> & DateInputProps<T>["classNames"];
|
||||
}
|
||||
|
||||
export type UseDatePickerProps<T extends DateValue> = Props<T> & AriaDatePickerProps<T>;
|
||||
export type UseDatePickerProps<T extends DateValue> = Props<T> &
|
||||
AriaDatePickerProps<T> & {
|
||||
/**
|
||||
* Classname or List of classes to change the classNames of the date input element.
|
||||
*/
|
||||
dateInputClassNames?: DateInputProps<T>["classNames"];
|
||||
};
|
||||
|
||||
export function useDatePicker<T extends DateValue>({
|
||||
className,
|
||||
@ -129,6 +135,7 @@ export function useDatePicker<T extends DateValue>({
|
||||
const getDateInputProps = () => {
|
||||
return {
|
||||
...dateInputProps,
|
||||
classNames: {...originalProps?.dateInputClassNames},
|
||||
groupProps,
|
||||
labelProps,
|
||||
createCalendar,
|
||||
|
||||
@ -17,6 +17,7 @@ import {I18nProvider, useDateFormatter, useLocale} from "@react-aria/i18n";
|
||||
import {Button, ButtonGroup} from "@nextui-org/button";
|
||||
import {Radio, RadioGroup} from "@nextui-org/radio";
|
||||
import {cn} from "@nextui-org/theme";
|
||||
import {ValidationResult} from "@react-types/shared";
|
||||
|
||||
import {DatePicker, DatePickerProps} from "../src";
|
||||
|
||||
@ -424,10 +425,25 @@ export const WithErrorMessage = {
|
||||
|
||||
args: {
|
||||
...defaultProps,
|
||||
isInvalid: true,
|
||||
errorMessage: "Please enter a valid date",
|
||||
},
|
||||
};
|
||||
|
||||
export const WithErrorMessageFunction = {
|
||||
render: Template,
|
||||
|
||||
args: {
|
||||
...defaultProps,
|
||||
isInvalid: true,
|
||||
errorMessage: (value: ValidationResult) => {
|
||||
if (value.isInvalid) {
|
||||
return "Please enter a valid date";
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const IsInvalid = {
|
||||
render: Template,
|
||||
|
||||
@ -537,3 +553,18 @@ export const WithValidation = {
|
||||
label: "Date (Year 2024 or later)",
|
||||
},
|
||||
};
|
||||
|
||||
export const WithDateInputClassNames = {
|
||||
render: Template,
|
||||
args: {
|
||||
...defaultProps,
|
||||
dateInputClassNames: {
|
||||
base: "bg-gray-200 p-2 rounded-md",
|
||||
label: "text-blue-400 font-semibold",
|
||||
inputWrapper: "border-3 border-solid border-blue-400 p-2 rounded-md",
|
||||
description: "text-black",
|
||||
},
|
||||
isRequired: true,
|
||||
description: "Please enter your birth date",
|
||||
},
|
||||
};
|
||||
|
||||
@ -13,7 +13,7 @@ import {
|
||||
startOfWeek,
|
||||
today,
|
||||
} from "@internationalized/date";
|
||||
import {RangeValue} from "@react-types/shared";
|
||||
import {RangeValue, ValidationResult} from "@react-types/shared";
|
||||
import {DateValue} from "@react-types/datepicker";
|
||||
import {I18nProvider, useDateFormatter, useLocale} from "@react-aria/i18n";
|
||||
import {Button, ButtonGroup} from "@nextui-org/button";
|
||||
@ -499,7 +499,22 @@ export const WithErrorMessage = {
|
||||
|
||||
args: {
|
||||
...defaultProps,
|
||||
errorMessage: "Please enter your stay duration",
|
||||
isInvalid: true,
|
||||
errorMessage: "Please enter a valid date range",
|
||||
},
|
||||
};
|
||||
|
||||
export const WithErrorMessageFunction = {
|
||||
render: Template,
|
||||
|
||||
args: {
|
||||
...defaultProps,
|
||||
isInvalid: true,
|
||||
errorMessage: (value: ValidationResult) => {
|
||||
if (value.isInvalid) {
|
||||
return "Please enter a valid date range";
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@ -1,5 +1,17 @@
|
||||
# @nextui-org/dropdown
|
||||
|
||||
## 2.1.26
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [#3240](https://github.com/nextui-org/nextui/pull/3240) [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b) Thanks [@wingkwong](https://github.com/wingkwong)! - bump react-aria dependencies
|
||||
|
||||
- Updated dependencies [[`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b), [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b), [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b), [`b9bb06ff3`](https://github.com/nextui-org/nextui/commit/b9bb06ff37f99bfc438e848706ec79b4c7b7c5d3)]:
|
||||
- @nextui-org/popover@2.1.24
|
||||
- @nextui-org/aria-utils@2.0.21
|
||||
- @nextui-org/menu@2.0.25
|
||||
- @nextui-org/react-utils@2.0.14
|
||||
|
||||
## 2.1.25
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -667,7 +667,7 @@ describe("Keyboard interactions", () => {
|
||||
|
||||
expect(triggerButton).toHaveFocus();
|
||||
|
||||
fireEvent.keyDown(triggerButton, {key: " ", charCode: keyCodes.Space});
|
||||
fireEvent.keyDown(triggerButton, {key: " ", charCode: keyCodes[" "]});
|
||||
|
||||
let menu = wrapper.queryByRole("menu");
|
||||
|
||||
@ -679,4 +679,120 @@ describe("Keyboard interactions", () => {
|
||||
|
||||
expect(menuItems[0]).toHaveFocus();
|
||||
});
|
||||
|
||||
it("should press the item on keyDown (Enter)", async () => {
|
||||
const user = userEvent.setup();
|
||||
|
||||
const logSpy = jest.spyOn(console, "log").mockImplementation(() => {});
|
||||
|
||||
const wrapper = render(
|
||||
<Dropdown>
|
||||
<DropdownTrigger>
|
||||
<Button data-testid="trigger-test">Trigger</Button>
|
||||
</DropdownTrigger>
|
||||
<DropdownMenu aria-label="Actions" selectionMode="single">
|
||||
<DropdownItem
|
||||
key="new"
|
||||
onPress={() => {
|
||||
/* eslint-disable no-console */
|
||||
console.log("ENTER");
|
||||
}}
|
||||
>
|
||||
New file
|
||||
</DropdownItem>
|
||||
<DropdownItem key="copy">Copy link</DropdownItem>
|
||||
<DropdownItem key="edit">Edit file</DropdownItem>
|
||||
<DropdownItem key="delete" color="danger">
|
||||
Delete file
|
||||
</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>,
|
||||
);
|
||||
|
||||
let triggerButton = wrapper.getByTestId("trigger-test");
|
||||
|
||||
act(() => {
|
||||
triggerButton.focus();
|
||||
});
|
||||
|
||||
expect(triggerButton).toHaveFocus();
|
||||
|
||||
fireEvent.keyDown(triggerButton, {key: "Enter", charCode: keyCodes.Enter});
|
||||
|
||||
let menu = wrapper.queryByRole("menu");
|
||||
|
||||
expect(menu).toBeTruthy();
|
||||
|
||||
let menuItems = wrapper.getAllByRole("menuitemradio");
|
||||
|
||||
expect(menuItems.length).toBe(4);
|
||||
|
||||
expect(menuItems[0]).toHaveFocus();
|
||||
|
||||
await act(async () => {
|
||||
await user.keyboard("[Enter]");
|
||||
});
|
||||
|
||||
expect(logSpy).toHaveBeenCalledWith("ENTER");
|
||||
|
||||
logSpy.mockRestore();
|
||||
});
|
||||
|
||||
it("should press the item on keyDown (Space)", async () => {
|
||||
const user = userEvent.setup();
|
||||
|
||||
const logSpy = jest.spyOn(console, "log").mockImplementation(() => {});
|
||||
|
||||
const wrapper = render(
|
||||
<Dropdown>
|
||||
<DropdownTrigger>
|
||||
<Button data-testid="trigger-test">Trigger</Button>
|
||||
</DropdownTrigger>
|
||||
<DropdownMenu aria-label="Actions" selectionMode="single">
|
||||
<DropdownItem
|
||||
key="new"
|
||||
onPress={() => {
|
||||
/* eslint-disable no-console */
|
||||
console.log("SPACE");
|
||||
}}
|
||||
>
|
||||
New file
|
||||
</DropdownItem>
|
||||
<DropdownItem key="copy">Copy link</DropdownItem>
|
||||
<DropdownItem key="edit">Edit file</DropdownItem>
|
||||
<DropdownItem key="delete" color="danger">
|
||||
Delete file
|
||||
</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>,
|
||||
);
|
||||
|
||||
let triggerButton = wrapper.getByTestId("trigger-test");
|
||||
|
||||
act(() => {
|
||||
triggerButton.focus();
|
||||
});
|
||||
|
||||
expect(triggerButton).toHaveFocus();
|
||||
|
||||
fireEvent.keyDown(triggerButton, {key: "Enter", charCode: keyCodes.Enter});
|
||||
|
||||
let menu = wrapper.queryByRole("menu");
|
||||
|
||||
expect(menu).toBeTruthy();
|
||||
|
||||
let menuItems = wrapper.getAllByRole("menuitemradio");
|
||||
|
||||
expect(menuItems.length).toBe(4);
|
||||
|
||||
expect(menuItems[0]).toHaveFocus();
|
||||
|
||||
await act(async () => {
|
||||
await user.keyboard("[Space]");
|
||||
});
|
||||
|
||||
expect(logSpy).toHaveBeenCalledWith("SPACE");
|
||||
|
||||
logSpy.mockRestore();
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/dropdown",
|
||||
"version": "2.1.25",
|
||||
"version": "2.1.26",
|
||||
"description": "A dropdown displays a list of actions or options that a user can choose.",
|
||||
"keywords": [
|
||||
"dropdown"
|
||||
@ -46,11 +46,11 @@
|
||||
"@nextui-org/shared-utils": "workspace:*",
|
||||
"@nextui-org/react-utils": "workspace:*",
|
||||
"@nextui-org/aria-utils": "workspace:*",
|
||||
"@react-aria/menu": "3.13.1",
|
||||
"@react-aria/menu": "3.14.1",
|
||||
"@react-aria/utils": "3.24.1",
|
||||
"@react-stately/menu": "3.6.1",
|
||||
"@react-aria/focus": "3.16.2",
|
||||
"@react-types/menu": "3.9.7"
|
||||
"@react-stately/menu": "3.7.1",
|
||||
"@react-aria/focus": "3.17.1",
|
||||
"@react-types/menu": "3.9.9"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@nextui-org/theme": "workspace:*",
|
||||
|
||||
@ -1,5 +1,12 @@
|
||||
# @nextui-org/image
|
||||
|
||||
## 2.0.29
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [[`b9bb06ff3`](https://github.com/nextui-org/nextui/commit/b9bb06ff37f99bfc438e848706ec79b4c7b7c5d3)]:
|
||||
- @nextui-org/react-utils@2.0.14
|
||||
|
||||
## 2.0.28
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/image",
|
||||
"version": "2.0.28",
|
||||
"version": "2.0.29",
|
||||
"description": "A simple image component",
|
||||
"keywords": [
|
||||
"image"
|
||||
|
||||
@ -1,5 +1,17 @@
|
||||
# @nextui-org/input
|
||||
|
||||
## 2.2.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [#3240](https://github.com/nextui-org/nextui/pull/3240) [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b) Thanks [@wingkwong](https://github.com/wingkwong)! - bump react-aria dependencies
|
||||
|
||||
- [#3174](https://github.com/nextui-org/nextui/pull/3174) [`dbb4b8ee5`](https://github.com/nextui-org/nextui/commit/dbb4b8ee564114bfb0ef93467ed9ef6a3ff7e2e7) Thanks [@wingkwong](https://github.com/wingkwong)! - Fix input display with hidden type (#3170)
|
||||
|
||||
- Updated dependencies [[`3500147d7`](https://github.com/nextui-org/nextui/commit/3500147d7fbe53bc01ae24749fdeaf87c37c0d12), [`b9bb06ff3`](https://github.com/nextui-org/nextui/commit/b9bb06ff37f99bfc438e848706ec79b4c7b7c5d3)]:
|
||||
- @nextui-org/shared-icons@2.0.8
|
||||
- @nextui-org/react-utils@2.0.14
|
||||
|
||||
## 2.2.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -153,6 +153,33 @@ describe("Input", () => {
|
||||
|
||||
expect(onClear).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it("should not display input with hidden type", async () => {
|
||||
const wrapper = render(
|
||||
<>
|
||||
<Input data-testid="input-1" type="hidden" />
|
||||
<Input data-testid="input-2" />
|
||||
</>,
|
||||
);
|
||||
|
||||
const {container} = wrapper;
|
||||
|
||||
const inputBaseWrappers = container.querySelectorAll("[data-slot='base']");
|
||||
|
||||
expect(inputBaseWrappers).toHaveLength(2);
|
||||
|
||||
const inputs = container.querySelectorAll("input");
|
||||
|
||||
expect(inputs).toHaveLength(2);
|
||||
|
||||
expect(inputBaseWrappers[0]).toHaveAttribute("data-hidden");
|
||||
|
||||
expect(inputBaseWrappers[1]).not.toHaveAttribute("data-hidden");
|
||||
|
||||
expect(inputs[0]).not.toBeVisible();
|
||||
|
||||
expect(inputs[1]).toBeVisible();
|
||||
});
|
||||
});
|
||||
|
||||
describe("Input with React Hook Form", () => {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/input",
|
||||
"version": "2.2.1",
|
||||
"version": "2.2.2",
|
||||
"description": "The input component is designed for capturing user input within a text field.",
|
||||
"keywords": [
|
||||
"input"
|
||||
@ -44,13 +44,13 @@
|
||||
"@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",
|
||||
"@react-aria/focus": "3.17.1",
|
||||
"@react-aria/interactions": "3.21.3",
|
||||
"@react-aria/textfield": "3.14.5",
|
||||
"@react-aria/utils": "3.24.1",
|
||||
"@react-stately/utils": "3.9.1",
|
||||
"@react-stately/utils": "3.10.1",
|
||||
"@react-types/shared": "3.23.1",
|
||||
"@react-types/textfield": "3.9.1",
|
||||
"@react-types/textfield": "3.9.3",
|
||||
"react-textarea-autosize": "^8.5.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@ -145,9 +145,11 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
|
||||
const isFilledByDefault = ["date", "time", "month", "week", "range"].includes(type!);
|
||||
const isFilled = !isEmpty(inputValue) || isFilledByDefault;
|
||||
const isFilledWithin = isFilled || isFocusWithin;
|
||||
const baseStyles = clsx(classNames?.base, className, isFilled ? "is-filled" : "");
|
||||
const isHiddenType = type === "hidden";
|
||||
const isMultiline = originalProps.isMultiline;
|
||||
|
||||
const baseStyles = clsx(classNames?.base, className, isFilled ? "is-filled" : "");
|
||||
|
||||
const handleClear = useCallback(() => {
|
||||
setInputValue("");
|
||||
|
||||
@ -286,6 +288,7 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
|
||||
"data-has-helper": dataAttr(hasHelper),
|
||||
"data-has-label": dataAttr(hasLabel),
|
||||
"data-has-value": dataAttr(!isPlaceholderShown),
|
||||
"data-hidden": dataAttr(isHiddenType),
|
||||
...focusWithinProps,
|
||||
...props,
|
||||
};
|
||||
@ -307,6 +310,7 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
|
||||
isFilledWithin,
|
||||
hasPlaceholder,
|
||||
focusWithinProps,
|
||||
isHiddenType,
|
||||
originalProps.isReadOnly,
|
||||
originalProps.isRequired,
|
||||
originalProps.isDisabled,
|
||||
|
||||
@ -137,7 +137,7 @@ const PasswordTemplate = (args) => {
|
||||
const RegexValidationTemplate = (args) => {
|
||||
const [value, setValue] = React.useState("");
|
||||
|
||||
const validateEmail = (value) => value.match(/^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}$/i);
|
||||
const validateEmail = (value) => value.match(/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i);
|
||||
|
||||
const validationState = React.useMemo(() => {
|
||||
if (value === "") return undefined;
|
||||
|
||||
@ -1,5 +1,15 @@
|
||||
# @nextui-org/kbd
|
||||
|
||||
## 2.0.30
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [#3240](https://github.com/nextui-org/nextui/pull/3240) [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b) Thanks [@wingkwong](https://github.com/wingkwong)! - bump react-aria dependencies
|
||||
|
||||
- Updated dependencies [[`b9bb06ff3`](https://github.com/nextui-org/nextui/commit/b9bb06ff37f99bfc438e848706ec79b4c7b7c5d3)]:
|
||||
- @nextui-org/react-utils@2.0.14
|
||||
- @nextui-org/system-rsc@2.1.2
|
||||
|
||||
## 2.0.29
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/kbd",
|
||||
"version": "2.0.29",
|
||||
"version": "2.0.30",
|
||||
"description": "The keyboard key components indicates which key or set of keys used to execute a specificv action",
|
||||
"keywords": [
|
||||
"kbd"
|
||||
@ -42,7 +42,7 @@
|
||||
"@nextui-org/system-rsc": "workspace:*",
|
||||
"@nextui-org/shared-utils": "workspace:*",
|
||||
"@nextui-org/react-utils": "workspace:*",
|
||||
"@react-aria/utils": "3.23.2"
|
||||
"@react-aria/utils": "3.24.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@nextui-org/theme": "workspace:*",
|
||||
|
||||
@ -1,5 +1,16 @@
|
||||
# @nextui-org/link
|
||||
|
||||
## 2.0.32
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [#3240](https://github.com/nextui-org/nextui/pull/3240) [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b) Thanks [@wingkwong](https://github.com/wingkwong)! - bump react-aria dependencies
|
||||
|
||||
- Updated dependencies [[`3500147d7`](https://github.com/nextui-org/nextui/commit/3500147d7fbe53bc01ae24749fdeaf87c37c0d12), [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b), [`b9bb06ff3`](https://github.com/nextui-org/nextui/commit/b9bb06ff37f99bfc438e848706ec79b4c7b7c5d3)]:
|
||||
- @nextui-org/shared-icons@2.0.8
|
||||
- @nextui-org/use-aria-link@2.0.18
|
||||
- @nextui-org/react-utils@2.0.14
|
||||
|
||||
## 2.0.31
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/link",
|
||||
"version": "2.0.31",
|
||||
"version": "2.0.32",
|
||||
"description": "Links allow users to click their way from page to page. This component is styled to resemble a hyperlink and semantically renders an <a>",
|
||||
"keywords": [
|
||||
"link"
|
||||
@ -46,8 +46,8 @@
|
||||
"@nextui-org/use-aria-link": "workspace:*",
|
||||
"@react-aria/link": "3.7.1",
|
||||
"@react-aria/utils": "3.24.1",
|
||||
"@react-aria/focus": "3.16.2",
|
||||
"@react-types/link": "3.5.3"
|
||||
"@react-aria/focus": "3.17.1",
|
||||
"@react-types/link": "3.5.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@nextui-org/theme": "workspace:*",
|
||||
|
||||
@ -1,5 +1,17 @@
|
||||
# @nextui-org/listbox
|
||||
|
||||
## 2.1.22
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [#3240](https://github.com/nextui-org/nextui/pull/3240) [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b) Thanks [@wingkwong](https://github.com/wingkwong)! - bump react-aria dependencies
|
||||
|
||||
- Updated dependencies [[`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b), [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b), [`b9bb06ff3`](https://github.com/nextui-org/nextui/commit/b9bb06ff37f99bfc438e848706ec79b4c7b7c5d3)]:
|
||||
- @nextui-org/aria-utils@2.0.21
|
||||
- @nextui-org/use-is-mobile@2.0.8
|
||||
- @nextui-org/react-utils@2.0.14
|
||||
- @nextui-org/divider@2.0.28
|
||||
|
||||
## 2.1.21
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/listbox",
|
||||
"version": "2.1.21",
|
||||
"version": "2.1.22",
|
||||
"description": "A listbox displays a list of options and allows a user to select one or more of them.",
|
||||
"keywords": [
|
||||
"listbox"
|
||||
@ -46,11 +46,11 @@
|
||||
"@nextui-org/aria-utils": "workspace:*",
|
||||
"@nextui-org/use-is-mobile": "workspace:*",
|
||||
"@react-aria/utils": "3.24.1",
|
||||
"@react-aria/listbox": "3.11.5",
|
||||
"@react-stately/list": "3.10.3",
|
||||
"@react-aria/focus": "3.16.2",
|
||||
"@react-aria/interactions": "3.21.1",
|
||||
"@react-types/menu": "3.9.7",
|
||||
"@react-aria/listbox": "3.12.1",
|
||||
"@react-stately/list": "3.10.5",
|
||||
"@react-aria/focus": "3.17.1",
|
||||
"@react-aria/interactions": "3.21.3",
|
||||
"@react-types/menu": "3.9.9",
|
||||
"@react-types/shared": "3.23.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@ -1,5 +1,18 @@
|
||||
# @nextui-org/menu
|
||||
|
||||
## 2.0.25
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [#3240](https://github.com/nextui-org/nextui/pull/3240) [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b) Thanks [@wingkwong](https://github.com/wingkwong)! - bump react-aria dependencies
|
||||
|
||||
- Updated dependencies [[`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b), [`5b9e317a8`](https://github.com/nextui-org/nextui/commit/5b9e317a80dacad09a3fc3c5b762729cd10b2bb3), [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b), [`b9bb06ff3`](https://github.com/nextui-org/nextui/commit/b9bb06ff37f99bfc438e848706ec79b4c7b7c5d3)]:
|
||||
- @nextui-org/aria-utils@2.0.21
|
||||
- @nextui-org/use-aria-menu@2.0.5
|
||||
- @nextui-org/use-is-mobile@2.0.8
|
||||
- @nextui-org/react-utils@2.0.14
|
||||
- @nextui-org/divider@2.0.28
|
||||
|
||||
## 2.0.24
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/menu",
|
||||
"version": "2.0.24",
|
||||
"version": "2.0.25",
|
||||
"description": "A menu displays a list of options and allows a user to select one or more of them.",
|
||||
"keywords": [
|
||||
"menu"
|
||||
@ -46,13 +46,13 @@
|
||||
"@nextui-org/shared-utils": "workspace:*",
|
||||
"@nextui-org/react-utils": "workspace:*",
|
||||
"@nextui-org/use-aria-menu": "workspace:*",
|
||||
"@react-aria/focus": "3.16.2",
|
||||
"@react-aria/interactions": "3.21.1",
|
||||
"@react-aria/menu": "3.13.1",
|
||||
"@react-aria/focus": "3.17.1",
|
||||
"@react-aria/interactions": "3.21.3",
|
||||
"@react-aria/menu": "3.14.1",
|
||||
"@react-aria/utils": "3.24.1",
|
||||
"@react-stately/menu": "3.6.1",
|
||||
"@react-stately/tree": "3.7.6",
|
||||
"@react-types/menu": "3.9.7",
|
||||
"@react-stately/menu": "3.7.1",
|
||||
"@react-stately/tree": "3.8.1",
|
||||
"@react-types/menu": "3.9.9",
|
||||
"@react-types/shared": "3.23.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@ -1,5 +1,21 @@
|
||||
# @nextui-org/modal
|
||||
|
||||
## 2.0.36
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [#3240](https://github.com/nextui-org/nextui/pull/3240) [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b) Thanks [@wingkwong](https://github.com/wingkwong)! - remove `disableFocusManagement` from Overlay
|
||||
|
||||
- [#3240](https://github.com/nextui-org/nextui/pull/3240) [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b) Thanks [@wingkwong](https://github.com/wingkwong)! - bump react-aria dependencies
|
||||
|
||||
- Updated dependencies [[`3500147d7`](https://github.com/nextui-org/nextui/commit/3500147d7fbe53bc01ae24749fdeaf87c37c0d12), [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b), [`b9bb06ff3`](https://github.com/nextui-org/nextui/commit/b9bb06ff37f99bfc438e848706ec79b4c7b7c5d3)]:
|
||||
- @nextui-org/shared-icons@2.0.8
|
||||
- @nextui-org/use-aria-button@2.0.9
|
||||
- @nextui-org/use-aria-modal-overlay@2.0.10
|
||||
- @nextui-org/use-disclosure@2.0.9
|
||||
- @nextui-org/react-utils@2.0.14
|
||||
- @nextui-org/framer-utils@2.0.21
|
||||
|
||||
## 2.0.35
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/modal",
|
||||
"version": "2.0.35",
|
||||
"version": "2.0.36",
|
||||
"description": "Displays a dialog with a custom content that requires attention or provides additional information.",
|
||||
"keywords": [
|
||||
"modal"
|
||||
@ -48,13 +48,13 @@
|
||||
"@nextui-org/react-utils": "workspace:*",
|
||||
"@nextui-org/shared-icons": "workspace:*",
|
||||
"@nextui-org/use-aria-modal-overlay": "workspace:*",
|
||||
"@react-aria/dialog": "3.5.12",
|
||||
"@react-aria/focus": "3.16.2",
|
||||
"@react-aria/interactions": "3.21.1",
|
||||
"@react-aria/overlays": "3.21.1",
|
||||
"@react-aria/dialog": "3.5.14",
|
||||
"@react-aria/focus": "3.17.1",
|
||||
"@react-aria/interactions": "3.21.3",
|
||||
"@react-aria/overlays": "3.22.1",
|
||||
"@react-aria/utils": "3.24.1",
|
||||
"@react-stately/overlays": "3.6.5",
|
||||
"@react-types/overlays": "3.8.5"
|
||||
"@react-stately/overlays": "3.6.7",
|
||||
"@react-types/overlays": "3.8.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@nextui-org/theme": "workspace:*",
|
||||
|
||||
@ -17,11 +17,7 @@ const Modal = forwardRef<"div", ModalProps>((props, ref) => {
|
||||
const {children, ...otherProps} = props;
|
||||
const context = useModal({...otherProps, ref});
|
||||
|
||||
const overlay = (
|
||||
<Overlay disableFocusManagement portalContainer={context.portalContainer}>
|
||||
{children}
|
||||
</Overlay>
|
||||
);
|
||||
const overlay = <Overlay portalContainer={context.portalContainer}>{children}</Overlay>;
|
||||
|
||||
return (
|
||||
<ModalProvider value={context}>
|
||||
|
||||
@ -1,5 +1,16 @@
|
||||
# @nextui-org/navbar
|
||||
|
||||
## 2.0.33
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [#3240](https://github.com/nextui-org/nextui/pull/3240) [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b) Thanks [@wingkwong](https://github.com/wingkwong)! - bump react-aria dependencies
|
||||
|
||||
- Updated dependencies [[`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b), [`b9bb06ff3`](https://github.com/nextui-org/nextui/commit/b9bb06ff37f99bfc438e848706ec79b4c7b7c5d3)]:
|
||||
- @nextui-org/use-aria-toggle-button@2.0.9
|
||||
- @nextui-org/react-utils@2.0.14
|
||||
- @nextui-org/framer-utils@2.0.21
|
||||
|
||||
## 2.0.32
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/navbar",
|
||||
"version": "2.0.32",
|
||||
"version": "2.0.33",
|
||||
"description": "A responsive navigation header positioned on top side of your page that includes support for branding, links, navigation, collapse and more.",
|
||||
"keywords": [
|
||||
"navbar"
|
||||
@ -46,12 +46,12 @@
|
||||
"@nextui-org/framer-utils": "workspace:*",
|
||||
"@nextui-org/use-aria-toggle-button": "workspace:*",
|
||||
"@nextui-org/use-scroll-position": "workspace:*",
|
||||
"@react-aria/focus": "3.16.2",
|
||||
"@react-aria/interactions": "3.21.1",
|
||||
"@react-aria/overlays": "3.21.1",
|
||||
"@react-aria/focus": "3.17.1",
|
||||
"@react-aria/interactions": "3.21.3",
|
||||
"@react-aria/overlays": "3.22.1",
|
||||
"@react-aria/utils": "3.24.1",
|
||||
"@react-stately/toggle": "3.7.2",
|
||||
"@react-stately/utils": "3.9.1",
|
||||
"@react-stately/toggle": "3.7.4",
|
||||
"@react-stately/utils": "3.10.1",
|
||||
"react-remove-scroll": "^2.5.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@ -2,7 +2,7 @@ import {Variants} from "framer-motion";
|
||||
|
||||
export const menuVariants: Variants = {
|
||||
enter: {
|
||||
height: "calc(100vh - var(--navbar-height) - 1px)",
|
||||
height: "calc(100vh - var(--navbar-height))",
|
||||
transition: {
|
||||
duration: 0.3,
|
||||
easings: "easeOut",
|
||||
|
||||
@ -1,5 +1,18 @@
|
||||
# @nextui-org/pagination
|
||||
|
||||
## 2.0.33
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [#3144](https://github.com/nextui-org/nextui/pull/3144) [`68d1629e7`](https://github.com/nextui-org/nextui/commit/68d1629e778723c85825463ef0d2cdd66c1a4aff) Thanks [@wingkwong](https://github.com/wingkwong)! - Fixed pagination missing animation (#3138)
|
||||
|
||||
- [#3240](https://github.com/nextui-org/nextui/pull/3240) [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b) Thanks [@wingkwong](https://github.com/wingkwong)! - bump react-aria dependencies
|
||||
|
||||
- Updated dependencies [[`3500147d7`](https://github.com/nextui-org/nextui/commit/3500147d7fbe53bc01ae24749fdeaf87c37c0d12), [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b), [`b9bb06ff3`](https://github.com/nextui-org/nextui/commit/b9bb06ff37f99bfc438e848706ec79b4c7b7c5d3)]:
|
||||
- @nextui-org/shared-icons@2.0.8
|
||||
- @nextui-org/use-pagination@2.0.7
|
||||
- @nextui-org/react-utils@2.0.14
|
||||
|
||||
## 2.0.32
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/pagination",
|
||||
"version": "2.0.32",
|
||||
"version": "2.0.33",
|
||||
"description": "The Pagination component allows you to display active page and navigate between multiple pages.",
|
||||
"keywords": [
|
||||
"pagination"
|
||||
@ -44,9 +44,9 @@
|
||||
"@nextui-org/react-utils": "workspace:*",
|
||||
"@nextui-org/shared-icons": "workspace:*",
|
||||
"@nextui-org/use-pagination": "workspace:*",
|
||||
"@react-aria/focus": "3.16.2",
|
||||
"@react-aria/i18n": "3.10.2",
|
||||
"@react-aria/interactions": "3.21.1",
|
||||
"@react-aria/focus": "3.17.1",
|
||||
"@react-aria/i18n": "3.11.1",
|
||||
"@react-aria/interactions": "3.21.3",
|
||||
"@react-aria/utils": "3.24.1",
|
||||
"scroll-into-view-if-needed": "3.0.10"
|
||||
},
|
||||
|
||||
@ -1,5 +1,22 @@
|
||||
# @nextui-org/popover
|
||||
|
||||
## 2.1.24
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [#3240](https://github.com/nextui-org/nextui/pull/3240) [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b) Thanks [@wingkwong](https://github.com/wingkwong)! - Fix popover focus issue (#3171, #2992)
|
||||
|
||||
- [#3240](https://github.com/nextui-org/nextui/pull/3240) [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b) Thanks [@wingkwong](https://github.com/wingkwong)! - remove `disableFocusManagement` from Overlay
|
||||
|
||||
- [#3240](https://github.com/nextui-org/nextui/pull/3240) [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b) Thanks [@wingkwong](https://github.com/wingkwong)! - bump react-aria dependencies
|
||||
|
||||
- Updated dependencies [[`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b), [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b), [`b9bb06ff3`](https://github.com/nextui-org/nextui/commit/b9bb06ff37f99bfc438e848706ec79b4c7b7c5d3)]:
|
||||
- @nextui-org/aria-utils@2.0.21
|
||||
- @nextui-org/button@2.0.34
|
||||
- @nextui-org/use-aria-button@2.0.9
|
||||
- @nextui-org/react-utils@2.0.14
|
||||
- @nextui-org/framer-utils@2.0.21
|
||||
|
||||
## 2.1.23
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -4,6 +4,7 @@ import userEvent from "@testing-library/user-event";
|
||||
import {Button} from "@nextui-org/button";
|
||||
|
||||
import {Popover, PopoverContent, PopoverTrigger} from "../src";
|
||||
import {Select, SelectItem} from "../../select/src";
|
||||
|
||||
// e.g. console.error Warning: Function components cannot be given refs.
|
||||
// Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
|
||||
@ -213,4 +214,104 @@ describe("Popover", () => {
|
||||
// assert that the second popover is open
|
||||
expect(popover2).toHaveAttribute("aria-expanded", "true");
|
||||
});
|
||||
|
||||
it("should focus on dialog when opened", async () => {
|
||||
const wrapper = render(
|
||||
<Popover>
|
||||
<PopoverTrigger>
|
||||
<Button disableRipple data-testid="trigger-test">
|
||||
Open popover
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent>
|
||||
<p>This is the content of the popover.</p>
|
||||
</PopoverContent>
|
||||
</Popover>,
|
||||
);
|
||||
|
||||
const trigger = wrapper.getByTestId("trigger-test");
|
||||
|
||||
// open popover
|
||||
await act(async () => {
|
||||
await userEvent.click(trigger);
|
||||
});
|
||||
|
||||
const {getByRole} = wrapper;
|
||||
|
||||
let dialog = getByRole("dialog");
|
||||
|
||||
// assert that the focus is on the dialog
|
||||
expect(dialog).toHaveFocus();
|
||||
});
|
||||
|
||||
it("should restore focus on trigger when closed", async () => {
|
||||
const wrapper = render(
|
||||
<Popover>
|
||||
<PopoverTrigger>
|
||||
<Button data-testid="popover-trigger">Open popover</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent>
|
||||
<p>This is the content of the popover.</p>
|
||||
</PopoverContent>
|
||||
</Popover>,
|
||||
);
|
||||
|
||||
const trigger = wrapper.getByTestId("popover-trigger");
|
||||
|
||||
await act(async () => {
|
||||
// open popover
|
||||
await userEvent.click(trigger);
|
||||
// close popover
|
||||
await userEvent.click(trigger);
|
||||
// assert that the focus is restored back to trigger
|
||||
expect(trigger).toHaveFocus();
|
||||
});
|
||||
});
|
||||
|
||||
it("should not close popover if nested select is closed", async () => {
|
||||
const wrapper = render(
|
||||
<Popover>
|
||||
<PopoverTrigger>
|
||||
<Button data-testid="popover">Open popover</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent>
|
||||
<Select data-testid="select" label="Select country">
|
||||
<SelectItem key="argentina">Argentina</SelectItem>
|
||||
<SelectItem key="venezuela">Venezuela</SelectItem>
|
||||
<SelectItem key="brazil">Brazil</SelectItem>
|
||||
</Select>
|
||||
</PopoverContent>
|
||||
</Popover>,
|
||||
);
|
||||
|
||||
const popover = wrapper.getByTestId("popover");
|
||||
|
||||
await act(async () => {
|
||||
// open popover
|
||||
await userEvent.click(popover);
|
||||
});
|
||||
|
||||
// assert that the popover is open
|
||||
expect(popover).toHaveAttribute("aria-expanded", "true");
|
||||
|
||||
const select = wrapper.getByTestId("select");
|
||||
|
||||
await act(async () => {
|
||||
// open select
|
||||
await userEvent.click(select);
|
||||
});
|
||||
|
||||
// assert that the select is open
|
||||
expect(select).toHaveAttribute("aria-expanded", "true");
|
||||
|
||||
await act(async () => {
|
||||
await userEvent.click(document.body);
|
||||
});
|
||||
|
||||
// assert that the select is closed
|
||||
expect(select).toHaveAttribute("aria-expanded", "false");
|
||||
|
||||
// assert that the popover is still open
|
||||
expect(popover).toHaveAttribute("aria-expanded", "true");
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/popover",
|
||||
"version": "2.1.23",
|
||||
"version": "2.1.24",
|
||||
"description": "A popover is an overlay element positioned relative to a trigger.",
|
||||
"keywords": [
|
||||
"popover"
|
||||
@ -48,14 +48,14 @@
|
||||
"@nextui-org/shared-utils": "workspace:*",
|
||||
"@nextui-org/react-utils": "workspace:*",
|
||||
"@nextui-org/use-safe-layout-effect": "workspace:*",
|
||||
"@react-aria/dialog": "3.5.12",
|
||||
"@react-aria/focus": "3.16.2",
|
||||
"@react-aria/interactions": "3.21.1",
|
||||
"@react-aria/overlays": "3.21.1",
|
||||
"@react-aria/dialog": "3.5.14",
|
||||
"@react-aria/focus": "3.17.1",
|
||||
"@react-aria/interactions": "3.21.3",
|
||||
"@react-aria/overlays": "3.22.1",
|
||||
"@react-aria/utils": "3.24.1",
|
||||
"@react-stately/overlays": "3.6.5",
|
||||
"@react-types/button": "3.9.2",
|
||||
"@react-types/overlays": "3.8.5",
|
||||
"@react-stately/overlays": "3.6.7",
|
||||
"@react-types/button": "3.9.4",
|
||||
"@react-types/overlays": "3.8.7",
|
||||
"react-remove-scroll": "^2.5.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@ -14,6 +14,7 @@ import {domAnimation, HTMLMotionProps, LazyMotion, m} from "framer-motion";
|
||||
import {mergeProps} from "@react-aria/utils";
|
||||
import {getTransformOrigins} from "@nextui-org/aria-utils";
|
||||
import {TRANSITION_VARIANTS} from "@nextui-org/framer-utils";
|
||||
import {useDialog} from "@react-aria/dialog";
|
||||
|
||||
import {usePopover, UsePopoverProps, UsePopoverReturn} from "./use-popover";
|
||||
|
||||
@ -92,7 +93,6 @@ const FreeSoloPopover = forwardRef<"div", FreeSoloPopoverProps>(
|
||||
state,
|
||||
placement,
|
||||
backdrop,
|
||||
titleProps,
|
||||
portalContainer,
|
||||
disableAnimation,
|
||||
motionProps,
|
||||
@ -106,6 +106,13 @@ const FreeSoloPopover = forwardRef<"div", FreeSoloPopoverProps>(
|
||||
ref,
|
||||
});
|
||||
|
||||
const dialogRef = React.useRef(null);
|
||||
const {dialogProps: ariaDialogProps, titleProps} = useDialog({}, dialogRef);
|
||||
const dialogProps = getDialogProps({
|
||||
ref: dialogRef,
|
||||
...ariaDialogProps,
|
||||
});
|
||||
|
||||
const backdropContent = React.useMemo(() => {
|
||||
if (backdrop === "transparent") {
|
||||
return null;
|
||||
@ -138,7 +145,7 @@ const FreeSoloPopover = forwardRef<"div", FreeSoloPopoverProps>(
|
||||
placement={placement}
|
||||
tabIndex={-1}
|
||||
transformOrigin={transformOrigin}
|
||||
{...getDialogProps()}
|
||||
{...dialogProps}
|
||||
>
|
||||
{!isNonModal && <DismissButton onDismiss={state.close} />}
|
||||
<div {...getContentProps()}>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import type {AriaDialogProps} from "@react-aria/dialog";
|
||||
import type {HTMLMotionProps} from "framer-motion";
|
||||
|
||||
import {DOMAttributes, ReactNode, useMemo, useCallback, ReactElement} from "react";
|
||||
import {DOMAttributes, ReactNode, useMemo, useRef} from "react";
|
||||
import {forwardRef} from "@nextui-org/system";
|
||||
import {DismissButton} from "@react-aria/overlays";
|
||||
import {TRANSITION_VARIANTS} from "@nextui-org/framer-utils";
|
||||
@ -9,6 +9,7 @@ import {m, domAnimation, LazyMotion} from "framer-motion";
|
||||
import {HTMLNextUIProps} from "@nextui-org/system";
|
||||
import {RemoveScroll} from "react-remove-scroll";
|
||||
import {getTransformOrigins} from "@nextui-org/aria-utils";
|
||||
import {useDialog} from "@react-aria/dialog";
|
||||
|
||||
import {usePopoverContext} from "./popover-context";
|
||||
|
||||
@ -27,7 +28,6 @@ const PopoverContent = forwardRef<"div", PopoverContentProps>((props, _) => {
|
||||
placement,
|
||||
backdrop,
|
||||
motionProps,
|
||||
titleProps,
|
||||
disableAnimation,
|
||||
shouldBlockScroll,
|
||||
getPopoverProps,
|
||||
@ -38,10 +38,13 @@ const PopoverContent = forwardRef<"div", PopoverContentProps>((props, _) => {
|
||||
onClose,
|
||||
} = usePopoverContext();
|
||||
|
||||
const dialogProps = getDialogProps(otherProps);
|
||||
|
||||
// Not needed in the popover context, the popover role comes from getPopoverProps
|
||||
delete dialogProps.role;
|
||||
const dialogRef = useRef(null);
|
||||
const {dialogProps: ariaDialogProps, titleProps} = useDialog({}, dialogRef);
|
||||
const dialogProps = getDialogProps({
|
||||
ref: dialogRef,
|
||||
...ariaDialogProps,
|
||||
...otherProps,
|
||||
});
|
||||
|
||||
const Component = as || OverlayComponent || "div";
|
||||
|
||||
@ -79,34 +82,27 @@ const PopoverContent = forwardRef<"div", PopoverContentProps>((props, _) => {
|
||||
);
|
||||
}, [backdrop, disableAnimation, getBackdropProps]);
|
||||
|
||||
const RemoveScrollWrapper = useCallback(
|
||||
({children}: {children: ReactElement}) => {
|
||||
return (
|
||||
<RemoveScroll enabled={shouldBlockScroll && isOpen} removeScrollBar={false}>
|
||||
{children}
|
||||
</RemoveScroll>
|
||||
);
|
||||
},
|
||||
[shouldBlockScroll, isOpen],
|
||||
);
|
||||
|
||||
const contents = disableAnimation ? (
|
||||
<RemoveScrollWrapper>{content}</RemoveScrollWrapper>
|
||||
) : (
|
||||
<LazyMotion features={domAnimation}>
|
||||
<m.div
|
||||
animate="enter"
|
||||
exit="exit"
|
||||
initial="initial"
|
||||
style={{
|
||||
...getTransformOrigins(placement === "center" ? "top" : placement),
|
||||
}}
|
||||
variants={TRANSITION_VARIANTS.scaleSpringOpacity}
|
||||
{...motionProps}
|
||||
>
|
||||
<RemoveScrollWrapper>{content}</RemoveScrollWrapper>
|
||||
</m.div>
|
||||
</LazyMotion>
|
||||
const contents = (
|
||||
<RemoveScroll enabled={shouldBlockScroll && isOpen} removeScrollBar={false}>
|
||||
{disableAnimation ? (
|
||||
content
|
||||
) : (
|
||||
<LazyMotion features={domAnimation}>
|
||||
<m.div
|
||||
animate="enter"
|
||||
exit="exit"
|
||||
initial="initial"
|
||||
style={{
|
||||
...getTransformOrigins(placement === "center" ? "top" : placement),
|
||||
}}
|
||||
variants={TRANSITION_VARIANTS.scaleSpringOpacity}
|
||||
{...motionProps}
|
||||
>
|
||||
{content}
|
||||
</m.div>
|
||||
</LazyMotion>
|
||||
)}
|
||||
</RemoveScroll>
|
||||
);
|
||||
|
||||
return (
|
||||
|
||||
@ -20,11 +20,7 @@ const Popover = forwardRef<"div", PopoverProps>((props, ref) => {
|
||||
|
||||
const [trigger, content] = Children.toArray(children);
|
||||
|
||||
const overlay = (
|
||||
<Overlay disableFocusManagement portalContainer={context.portalContainer}>
|
||||
{content}
|
||||
</Overlay>
|
||||
);
|
||||
const overlay = <Overlay portalContainer={context.portalContainer}>{content}</Overlay>;
|
||||
|
||||
return (
|
||||
<PopoverProvider value={context}>
|
||||
|
||||
@ -6,11 +6,15 @@ import {
|
||||
useOverlayPosition,
|
||||
AriaOverlayProps,
|
||||
} from "@react-aria/overlays";
|
||||
import {OverlayPlacement, ariaHideOutside, toReactAriaPlacement} from "@nextui-org/aria-utils";
|
||||
import {
|
||||
OverlayPlacement,
|
||||
ariaHideOutside,
|
||||
toReactAriaPlacement,
|
||||
ariaShouldCloseOnInteractOutside,
|
||||
} from "@nextui-org/aria-utils";
|
||||
import {OverlayTriggerState} from "@react-stately/overlays";
|
||||
import {mergeProps} from "@react-aria/utils";
|
||||
import {useSafeLayoutEffect} from "@nextui-org/use-safe-layout-effect";
|
||||
import {ariaShouldCloseOnInteractOutside} from "@nextui-org/aria-utils";
|
||||
|
||||
export interface Props {
|
||||
/**
|
||||
|
||||
@ -19,7 +19,7 @@ import {popover} from "@nextui-org/theme";
|
||||
import {mergeProps, mergeRefs} from "@react-aria/utils";
|
||||
import {clsx, dataAttr, objectToDeps} from "@nextui-org/shared-utils";
|
||||
import {useMemo, useCallback, useRef} from "react";
|
||||
import {AriaDialogProps, useDialog} from "@react-aria/dialog";
|
||||
import {AriaDialogProps} from "@react-aria/dialog";
|
||||
|
||||
import {useReactAriaPopover, ReactAriaPopoverProps} from "./use-aria-popover";
|
||||
|
||||
@ -131,7 +131,6 @@ export function usePopover(originalProps: UsePopoverProps) {
|
||||
|
||||
const domTriggerRef = useRef<HTMLElement>(null);
|
||||
const wasTriggerPressedRef = useRef(false);
|
||||
const dialogRef = useRef(null);
|
||||
const triggerRef = triggerRefProp || domTriggerRef;
|
||||
|
||||
const disableAnimation =
|
||||
@ -179,8 +178,6 @@ export function usePopover(originalProps: UsePopoverProps) {
|
||||
|
||||
const {isFocusVisible, isFocused, focusProps} = useFocusRing();
|
||||
|
||||
const {dialogProps, titleProps} = useDialog({}, dialogRef);
|
||||
|
||||
const slots = useMemo(
|
||||
() =>
|
||||
popover({
|
||||
@ -198,14 +195,15 @@ export function usePopover(originalProps: UsePopoverProps) {
|
||||
});
|
||||
|
||||
const getDialogProps: PropGetter = (props = {}) => ({
|
||||
ref: dialogRef,
|
||||
// `ref` and `dialogProps` from `useDialog` are passed from props
|
||||
// if we use `useDialog` here, dialogRef won't be focused on mount
|
||||
"data-slot": "base",
|
||||
"data-open": dataAttr(state.isOpen),
|
||||
"data-focus": dataAttr(isFocused),
|
||||
"data-arrow": dataAttr(showArrow),
|
||||
"data-focus-visible": dataAttr(isFocusVisible),
|
||||
"data-placement": getArrowPlacement(ariaPlacement, placementProp),
|
||||
...mergeProps(focusProps, dialogProps, dialogPropsProp, props),
|
||||
...mergeProps(focusProps, dialogPropsProp, props),
|
||||
className: slots.base({class: clsx(baseStyles)}),
|
||||
style: {
|
||||
// this prevent the dialog to have a default outline
|
||||
@ -316,7 +314,6 @@ export function usePopover(originalProps: UsePopoverProps) {
|
||||
triggerRef,
|
||||
placement,
|
||||
isNonModal,
|
||||
titleProps,
|
||||
popoverRef: domRef,
|
||||
portalContainer,
|
||||
isOpen: state.isOpen,
|
||||
|
||||
@ -1,5 +1,14 @@
|
||||
# @nextui-org/progress
|
||||
|
||||
## 2.0.31
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [#3240](https://github.com/nextui-org/nextui/pull/3240) [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b) Thanks [@wingkwong](https://github.com/wingkwong)! - bump react-aria dependencies
|
||||
|
||||
- Updated dependencies [[`b9bb06ff3`](https://github.com/nextui-org/nextui/commit/b9bb06ff37f99bfc438e848706ec79b4c7b7c5d3)]:
|
||||
- @nextui-org/react-utils@2.0.14
|
||||
|
||||
## 2.0.30
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/progress",
|
||||
"version": "2.0.30",
|
||||
"version": "2.0.31",
|
||||
"description": "Progress bars show either determinate or indeterminate progress of an operation over time.",
|
||||
"keywords": [
|
||||
"progress"
|
||||
@ -43,10 +43,10 @@
|
||||
"@nextui-org/shared-utils": "workspace:*",
|
||||
"@nextui-org/react-utils": "workspace:*",
|
||||
"@nextui-org/use-is-mounted": "workspace:*",
|
||||
"@react-aria/i18n": "3.10.2",
|
||||
"@react-aria/progress": "3.4.11",
|
||||
"@react-aria/i18n": "3.11.1",
|
||||
"@react-aria/progress": "3.4.13",
|
||||
"@react-aria/utils": "3.24.1",
|
||||
"@react-types/progress": "3.5.2"
|
||||
"@react-types/progress": "3.5.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@nextui-org/theme": "workspace:*",
|
||||
|
||||
@ -1,5 +1,14 @@
|
||||
# @nextui-org/radio
|
||||
|
||||
## 2.1.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [#3240](https://github.com/nextui-org/nextui/pull/3240) [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b) Thanks [@wingkwong](https://github.com/wingkwong)! - bump react-aria dependencies
|
||||
|
||||
- Updated dependencies [[`b9bb06ff3`](https://github.com/nextui-org/nextui/commit/b9bb06ff37f99bfc438e848706ec79b4c7b7c5d3)]:
|
||||
- @nextui-org/react-utils@2.0.14
|
||||
|
||||
## 2.1.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nextui-org/radio",
|
||||
"version": "2.1.1",
|
||||
"version": "2.1.2",
|
||||
"description": "Radios allow users to select a single option from a list of mutually exclusive options.",
|
||||
"keywords": [
|
||||
"radio"
|
||||
@ -42,13 +42,13 @@
|
||||
"dependencies": {
|
||||
"@nextui-org/shared-utils": "workspace:*",
|
||||
"@nextui-org/react-utils": "workspace:*",
|
||||
"@react-aria/focus": "3.16.2",
|
||||
"@react-aria/interactions": "3.21.1",
|
||||
"@react-aria/radio": "3.10.2",
|
||||
"@react-aria/focus": "3.17.1",
|
||||
"@react-aria/interactions": "3.21.3",
|
||||
"@react-aria/radio": "3.10.4",
|
||||
"@react-aria/utils": "3.24.1",
|
||||
"@react-aria/visually-hidden": "3.8.10",
|
||||
"@react-stately/radio": "3.10.2",
|
||||
"@react-types/radio": "3.7.1",
|
||||
"@react-aria/visually-hidden": "3.8.12",
|
||||
"@react-stately/radio": "3.10.4",
|
||||
"@react-types/radio": "3.8.1",
|
||||
"@react-types/shared": "3.23.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@ -1,5 +1,12 @@
|
||||
# @nextui-org/ripple
|
||||
|
||||
## 2.0.30
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [[`b9bb06ff3`](https://github.com/nextui-org/nextui/commit/b9bb06ff37f99bfc438e848706ec79b4c7b7c5d3)]:
|
||||
- @nextui-org/react-utils@2.0.14
|
||||
|
||||
## 2.0.29
|
||||
|
||||
### Patch Changes
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user