From 6a3fae1ae7e1158269e0a1acd06b9baaee998585 Mon Sep 17 00:00:00 2001 From: Junior Garcia Date: Wed, 5 Apr 2023 19:37:33 -0300 Subject: [PATCH] feat(root): new version --- packages/components/accordion/CHANGELOG.md | 30 ++++ packages/components/accordion/package.json | 2 +- packages/components/avatar/CHANGELOG.md | 24 ++++ packages/components/avatar/package.json | 2 +- packages/components/badge/CHANGELOG.md | 22 +++ packages/components/badge/package.json | 2 +- packages/components/button/CHANGELOG.md | 26 ++++ packages/components/button/package.json | 2 +- packages/components/card/CHANGELOG.md | 24 ++++ packages/components/card/package.json | 2 +- packages/components/checkbox/CHANGELOG.md | 22 +++ packages/components/checkbox/package.json | 2 +- .../components/checkbox/src/use-checkbox.ts | 16 ++- .../checkbox/stories/checkbox.stories.tsx | 4 +- packages/components/chip/CHANGELOG.md | 24 ++++ packages/components/chip/package.json | 2 +- packages/components/code/CHANGELOG.md | 22 +++ packages/components/code/package.json | 2 +- packages/components/drip/CHANGELOG.md | 22 +++ packages/components/drip/package.json | 2 +- packages/components/input/CHANGELOG.md | 26 ++++ packages/components/input/package.json | 7 +- packages/components/input/src/index.ts | 4 +- packages/components/input/src/input.tsx | 12 +- packages/components/input/src/textarea.tsx | 103 +++++++++++++ ...ia-text-field.ts => use-aria-textfield.ts} | 0 packages/components/input/src/use-input.ts | 37 +++-- .../input/stories/input.stories.tsx | 9 +- .../input/stories/textarea.stories.tsx | 135 ++++++++++++++++++ packages/components/link/CHANGELOG.md | 22 +++ packages/components/link/package.json | 2 +- packages/components/pagination/CHANGELOG.md | 26 ++++ packages/components/pagination/package.json | 2 +- packages/components/progress/CHANGELOG.md | 26 ++++ packages/components/progress/package.json | 2 +- packages/components/radio/CHANGELOG.md | 22 +++ packages/components/radio/package.json | 2 +- packages/components/radio/src/radio-group.tsx | 11 +- .../components/radio/src/use-radio-group.ts | 28 +++- packages/components/radio/src/use-radio.ts | 11 +- .../radio/stories/radio.stories.tsx | 7 +- packages/components/snippet/CHANGELOG.md | 26 ++++ packages/components/snippet/package.json | 2 +- packages/components/spinner/CHANGELOG.md | 22 +++ packages/components/spinner/package.json | 2 +- packages/components/switch/CHANGELOG.md | 22 +++ packages/components/switch/package.json | 2 +- packages/components/switch/src/use-switch.ts | 20 ++- .../switch/stories/switch.stories.tsx | 12 +- packages/components/tooltip/CHANGELOG.md | 26 ++++ packages/components/tooltip/package.json | 2 +- packages/components/user/CHANGELOG.md | 24 ++++ packages/components/user/package.json | 2 +- packages/core/react/CHANGELOG.md | 56 ++++++++ packages/core/react/package.json | 2 +- packages/core/system/CHANGELOG.md | 12 ++ packages/core/system/package.json | 2 +- packages/core/system/src/types.ts | 4 +- packages/core/theme/CHANGELOG.md | 12 ++ packages/core/theme/package.json | 2 +- packages/core/theme/src/components/input.ts | 12 +- .../use-aria-accordion-item/CHANGELOG.md | 12 ++ .../use-aria-accordion-item/package.json | 2 +- packages/hooks/use-aria-field/CHANGELOG.md | 18 +++ packages/hooks/use-aria-field/package.json | 2 +- packages/hooks/use-aria-label/CHANGELOG.md | 12 ++ packages/hooks/use-aria-label/package.json | 2 +- packages/hooks/use-aria-slot-id/CHANGELOG.md | 12 ++ packages/hooks/use-aria-slot-id/package.json | 2 +- packages/hooks/use-clipboard/CHANGELOG.md | 12 ++ packages/hooks/use-clipboard/package.json | 2 +- packages/hooks/use-image/CHANGELOG.md | 16 +++ packages/hooks/use-image/package.json | 2 +- packages/hooks/use-is-mounted/CHANGELOG.md | 12 ++ packages/hooks/use-is-mounted/package.json | 2 +- packages/hooks/use-pagination/CHANGELOG.md | 16 +++ packages/hooks/use-pagination/package.json | 2 +- packages/hooks/use-real-shape/CHANGELOG.md | 16 +++ packages/hooks/use-real-shape/package.json | 2 +- packages/hooks/use-ref-state/CHANGELOG.md | 12 ++ packages/hooks/use-ref-state/package.json | 2 +- packages/hooks/use-resize/CHANGELOG.md | 12 ++ packages/hooks/use-resize/package.json | 2 +- .../hooks/use-safe-layout-effect/CHANGELOG.md | 12 ++ .../hooks/use-safe-layout-effect/package.json | 2 +- packages/hooks/use-ssr/CHANGELOG.md | 12 ++ packages/hooks/use-ssr/package.json | 2 +- packages/utilities/aria-utils/CHANGELOG.md | 16 +++ packages/utilities/aria-utils/package.json | 2 +- packages/utilities/dom-utils/CHANGELOG.md | 12 ++ packages/utilities/dom-utils/package.json | 2 +- .../utilities/framer-transitions/CHANGELOG.md | 18 +++ .../utilities/framer-transitions/package.json | 2 +- packages/utilities/react-utils/CHANGELOG.md | 18 +++ packages/utilities/react-utils/package.json | 2 +- packages/utilities/shared-icons/CHANGELOG.md | 12 ++ packages/utilities/shared-icons/package.json | 2 +- packages/utilities/shared-utils/CHANGELOG.md | 12 ++ packages/utilities/shared-utils/package.json | 2 +- packages/utilities/test-utils/CHANGELOG.md | 12 ++ packages/utilities/test-utils/package.json | 2 +- pnpm-lock.yaml | 53 ++++++- 102 files changed, 1274 insertions(+), 105 deletions(-) create mode 100644 packages/components/input/src/textarea.tsx rename packages/components/input/src/{use-aria-text-field.ts => use-aria-textfield.ts} (100%) create mode 100644 packages/components/input/stories/textarea.stories.tsx diff --git a/packages/components/accordion/CHANGELOG.md b/packages/components/accordion/CHANGELOG.md index e569e0589..38a70af51 100644 --- a/packages/components/accordion/CHANGELOG.md +++ b/packages/components/accordion/CHANGELOG.md @@ -1,5 +1,35 @@ # @nextui-org/accordion +## 0.0.0-dev-v2-20230405205125 + +### Patch Changes + +- Native events exposed in all form elements +- Updated dependencies + - @nextui-org/use-aria-accordion-item@0.0.0-dev-v2-20230405205125 + - @nextui-org/framer-transitions@0.0.0-dev-v2-20230405205125 + - @nextui-org/shared-icons@0.0.0-dev-v2-20230405205125 + - @nextui-org/shared-utils@0.0.0-dev-v2-20230405205125 + - @nextui-org/aria-utils@0.0.0-dev-v2-20230405205125 + - @nextui-org/dom-utils@0.0.0-dev-v2-20230405205125 + - @nextui-org/system@0.0.0-dev-v2-20230405205125 + - @nextui-org/theme@0.0.0-dev-v2-20230405205125 + +## 0.0.0-dev-v2-20230405200614 + +### Patch Changes + +- Textarea component added +- Updated dependencies + - @nextui-org/use-aria-accordion-item@0.0.0-dev-v2-20230405200614 + - @nextui-org/framer-transitions@0.0.0-dev-v2-20230405200614 + - @nextui-org/shared-icons@0.0.0-dev-v2-20230405200614 + - @nextui-org/shared-utils@0.0.0-dev-v2-20230405200614 + - @nextui-org/aria-utils@0.0.0-dev-v2-20230405200614 + - @nextui-org/dom-utils@0.0.0-dev-v2-20230405200614 + - @nextui-org/system@0.0.0-dev-v2-20230405200614 + - @nextui-org/theme@0.0.0-dev-v2-20230405200614 + ## 0.0.0-dev-v2-20230405030905 ### Patch Changes diff --git a/packages/components/accordion/package.json b/packages/components/accordion/package.json index 0b3be36d4..88ed7f6cf 100644 --- a/packages/components/accordion/package.json +++ b/packages/components/accordion/package.json @@ -1,6 +1,6 @@ { "name": "@nextui-org/accordion", - "version": "0.0.0-dev-v2-20230405030905", + "version": "0.0.0-dev-v2-20230405205125", "description": "Collapse display a list of high-level options that can expand/collapse to reveal more information.", "keywords": [ "react", diff --git a/packages/components/avatar/CHANGELOG.md b/packages/components/avatar/CHANGELOG.md index 4f410a515..264cb245f 100644 --- a/packages/components/avatar/CHANGELOG.md +++ b/packages/components/avatar/CHANGELOG.md @@ -1,5 +1,29 @@ # @nextui-org/avatar +## 0.0.0-dev-v2-20230405205125 + +### Patch Changes + +- Native events exposed in all form elements +- Updated dependencies + - @nextui-org/shared-utils@0.0.0-dev-v2-20230405205125 + - @nextui-org/dom-utils@0.0.0-dev-v2-20230405205125 + - @nextui-org/use-image@0.0.0-dev-v2-20230405205125 + - @nextui-org/system@0.0.0-dev-v2-20230405205125 + - @nextui-org/theme@0.0.0-dev-v2-20230405205125 + +## 0.0.0-dev-v2-20230405200614 + +### Patch Changes + +- Textarea component added +- Updated dependencies + - @nextui-org/shared-utils@0.0.0-dev-v2-20230405200614 + - @nextui-org/dom-utils@0.0.0-dev-v2-20230405200614 + - @nextui-org/use-image@0.0.0-dev-v2-20230405200614 + - @nextui-org/system@0.0.0-dev-v2-20230405200614 + - @nextui-org/theme@0.0.0-dev-v2-20230405200614 + ## 0.0.0-dev-v2-20230405030905 ### Patch Changes diff --git a/packages/components/avatar/package.json b/packages/components/avatar/package.json index 811b83318..351f3ec07 100644 --- a/packages/components/avatar/package.json +++ b/packages/components/avatar/package.json @@ -1,6 +1,6 @@ { "name": "@nextui-org/avatar", - "version": "0.0.0-dev-v2-20230405030905", + "version": "0.0.0-dev-v2-20230405205125", "description": "The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon.", "keywords": [ "avatar" diff --git a/packages/components/badge/CHANGELOG.md b/packages/components/badge/CHANGELOG.md index 1149c16d8..5af6acc63 100644 --- a/packages/components/badge/CHANGELOG.md +++ b/packages/components/badge/CHANGELOG.md @@ -1,5 +1,27 @@ # @nextui-org/badge +## 0.0.0-dev-v2-20230405205125 + +### Patch Changes + +- Native events exposed in all form elements +- Updated dependencies + - @nextui-org/shared-utils@0.0.0-dev-v2-20230405205125 + - @nextui-org/dom-utils@0.0.0-dev-v2-20230405205125 + - @nextui-org/system@0.0.0-dev-v2-20230405205125 + - @nextui-org/theme@0.0.0-dev-v2-20230405205125 + +## 0.0.0-dev-v2-20230405200614 + +### Patch Changes + +- Textarea component added +- Updated dependencies + - @nextui-org/shared-utils@0.0.0-dev-v2-20230405200614 + - @nextui-org/dom-utils@0.0.0-dev-v2-20230405200614 + - @nextui-org/system@0.0.0-dev-v2-20230405200614 + - @nextui-org/theme@0.0.0-dev-v2-20230405200614 + ## 0.0.0-dev-v2-20230405030905 ### Patch Changes diff --git a/packages/components/badge/package.json b/packages/components/badge/package.json index c423b35d9..6edfa10e0 100644 --- a/packages/components/badge/package.json +++ b/packages/components/badge/package.json @@ -1,6 +1,6 @@ { "name": "@nextui-org/badge", - "version": "0.0.0-dev-v2-20230405030905", + "version": "0.0.0-dev-v2-20230405205125", "description": "Badges are used as a small numerical value or status descriptor for UI elements.", "keywords": [ "badge" diff --git a/packages/components/button/CHANGELOG.md b/packages/components/button/CHANGELOG.md index 334b6cc44..6c90ae997 100644 --- a/packages/components/button/CHANGELOG.md +++ b/packages/components/button/CHANGELOG.md @@ -1,5 +1,31 @@ # @nextui-org/button +## 0.0.0-dev-v2-20230405205125 + +### Patch Changes + +- Native events exposed in all form elements +- Updated dependencies + - @nextui-org/shared-utils@0.0.0-dev-v2-20230405205125 + - @nextui-org/dom-utils@0.0.0-dev-v2-20230405205125 + - @nextui-org/spinner@0.0.0-dev-v2-20230405205125 + - @nextui-org/drip@0.0.0-dev-v2-20230405205125 + - @nextui-org/system@0.0.0-dev-v2-20230405205125 + - @nextui-org/theme@0.0.0-dev-v2-20230405205125 + +## 0.0.0-dev-v2-20230405200614 + +### Patch Changes + +- Textarea component added +- Updated dependencies + - @nextui-org/shared-utils@0.0.0-dev-v2-20230405200614 + - @nextui-org/dom-utils@0.0.0-dev-v2-20230405200614 + - @nextui-org/spinner@0.0.0-dev-v2-20230405200614 + - @nextui-org/drip@0.0.0-dev-v2-20230405200614 + - @nextui-org/system@0.0.0-dev-v2-20230405200614 + - @nextui-org/theme@0.0.0-dev-v2-20230405200614 + ## 0.0.0-dev-v2-20230405030905 ### Patch Changes diff --git a/packages/components/button/package.json b/packages/components/button/package.json index c4de544ba..82a62710c 100644 --- a/packages/components/button/package.json +++ b/packages/components/button/package.json @@ -1,6 +1,6 @@ { "name": "@nextui-org/button", - "version": "0.0.0-dev-v2-20230405030905", + "version": "0.0.0-dev-v2-20230405205125", "description": "Buttons allow users to perform actions and choose with a single tap.", "keywords": [ "button" diff --git a/packages/components/card/CHANGELOG.md b/packages/components/card/CHANGELOG.md index 889aff55e..281f2eb64 100644 --- a/packages/components/card/CHANGELOG.md +++ b/packages/components/card/CHANGELOG.md @@ -1,5 +1,29 @@ # @nextui-org/card +## 0.0.0-dev-v2-20230405205125 + +### Patch Changes + +- Native events exposed in all form elements +- Updated dependencies + - @nextui-org/shared-utils@0.0.0-dev-v2-20230405205125 + - @nextui-org/dom-utils@0.0.0-dev-v2-20230405205125 + - @nextui-org/drip@0.0.0-dev-v2-20230405205125 + - @nextui-org/system@0.0.0-dev-v2-20230405205125 + - @nextui-org/theme@0.0.0-dev-v2-20230405205125 + +## 0.0.0-dev-v2-20230405200614 + +### Patch Changes + +- Textarea component added +- Updated dependencies + - @nextui-org/shared-utils@0.0.0-dev-v2-20230405200614 + - @nextui-org/dom-utils@0.0.0-dev-v2-20230405200614 + - @nextui-org/drip@0.0.0-dev-v2-20230405200614 + - @nextui-org/system@0.0.0-dev-v2-20230405200614 + - @nextui-org/theme@0.0.0-dev-v2-20230405200614 + ## 0.0.0-dev-v2-20230405030905 ### Patch Changes diff --git a/packages/components/card/package.json b/packages/components/card/package.json index 922b3d6e7..a470df52c 100644 --- a/packages/components/card/package.json +++ b/packages/components/card/package.json @@ -1,6 +1,6 @@ { "name": "@nextui-org/card", - "version": "0.0.0-dev-v2-20230405030905", + "version": "0.0.0-dev-v2-20230405205125", "description": "Card is a container for text, photos, and actions in the context of a single subject.", "keywords": [ "card" diff --git a/packages/components/checkbox/CHANGELOG.md b/packages/components/checkbox/CHANGELOG.md index f53bb8044..8b422524f 100644 --- a/packages/components/checkbox/CHANGELOG.md +++ b/packages/components/checkbox/CHANGELOG.md @@ -1,5 +1,27 @@ # @nextui-org/checkbox +## 0.0.0-dev-v2-20230405205125 + +### Patch Changes + +- Native events exposed in all form elements +- Updated dependencies + - @nextui-org/shared-utils@0.0.0-dev-v2-20230405205125 + - @nextui-org/dom-utils@0.0.0-dev-v2-20230405205125 + - @nextui-org/system@0.0.0-dev-v2-20230405205125 + - @nextui-org/theme@0.0.0-dev-v2-20230405205125 + +## 0.0.0-dev-v2-20230405200614 + +### Patch Changes + +- Textarea component added +- Updated dependencies + - @nextui-org/shared-utils@0.0.0-dev-v2-20230405200614 + - @nextui-org/dom-utils@0.0.0-dev-v2-20230405200614 + - @nextui-org/system@0.0.0-dev-v2-20230405200614 + - @nextui-org/theme@0.0.0-dev-v2-20230405200614 + ## 0.0.0-dev-v2-20230405030905 ### Patch Changes diff --git a/packages/components/checkbox/package.json b/packages/components/checkbox/package.json index 58fecd977..3acdf5c1f 100644 --- a/packages/components/checkbox/package.json +++ b/packages/components/checkbox/package.json @@ -1,6 +1,6 @@ { "name": "@nextui-org/checkbox", - "version": "0.0.0-dev-v2-20230405030905", + "version": "0.0.0-dev-v2-20230405205125", "description": "Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected.", "keywords": [ "checkbox" diff --git a/packages/components/checkbox/src/use-checkbox.ts b/packages/components/checkbox/src/use-checkbox.ts index 0ae7a81ee..72dc1566a 100644 --- a/packages/components/checkbox/src/use-checkbox.ts +++ b/packages/components/checkbox/src/use-checkbox.ts @@ -8,7 +8,7 @@ import {useToggleState} from "@react-stately/toggle"; import {checkbox} from "@nextui-org/theme"; import {useHover} from "@react-aria/interactions"; import {useFocusRing} from "@react-aria/focus"; -import {mergeProps} from "@react-aria/utils"; +import {chain, mergeProps} from "@react-aria/utils"; import {useFocusableRef} from "@nextui-org/dom-utils"; import {__DEV__, warn, clsx, dataAttr} from "@nextui-org/shared-utils"; import { @@ -45,6 +45,10 @@ interface Props extends HTMLNextUIProps<"label"> { * The icon to be displayed when the checkbox is checked. */ icon?: ReactNode | ((props: CheckboxIconProps) => ReactNode); + /** + * React aria onChange event. + */ + onValueChange?: AriaCheckboxProps["onChange"]; /** * Classname or List of classes to change the styles of the element. * if `className` is passed, it will be added to the base slot. @@ -62,8 +66,8 @@ interface Props extends HTMLNextUIProps<"label"> { styles?: SlotsToClasses; } -export type UseCheckboxProps = Omit & - Omit & +export type UseCheckboxProps = Omit & + Omit & Omit; export function useCheckbox(props: UseCheckboxProps) { @@ -93,6 +97,7 @@ export function useCheckbox(props: UseCheckboxProps) { styles, onChange, className, + onValueChange, ...otherProps } = props; @@ -136,7 +141,7 @@ export function useCheckbox(props: UseCheckboxProps) { validationState, "aria-label": ariaLabel, "aria-labelledby": otherProps["aria-labelledby"] || labelId, - onChange, + onChange: onValueChange, }; }, [ value, @@ -151,7 +156,7 @@ export function useCheckbox(props: UseCheckboxProps) { validationState, otherProps["aria-label"], otherProps["aria-labelledby"], - onChange, + onValueChange, ]); const {inputProps} = isInGroup @@ -227,6 +232,7 @@ export function useCheckbox(props: UseCheckboxProps) { return { ref: inputRef, ...mergeProps(inputProps, focusProps), + onChange: chain(inputProps.onChange, onChange), }; }; diff --git a/packages/components/checkbox/stories/checkbox.stories.tsx b/packages/components/checkbox/stories/checkbox.stories.tsx index 1e4c5c247..d35f1963a 100644 --- a/packages/components/checkbox/stories/checkbox.stories.tsx +++ b/packages/components/checkbox/stories/checkbox.stories.tsx @@ -68,7 +68,7 @@ const ControlledTemplate: ComponentStory = (args: CheckboxProps return (
- + Subscribe (controlled)

Selected: {selected ? "true" : "false"}

@@ -170,7 +170,7 @@ export const CustomWithStyles = (props: CustomCheckboxProps) => { const checkboxProps = !isInGroup ? { isSelected, - onChange: setIsSelected, + onValueChange: setIsSelected, } : {}; diff --git a/packages/components/chip/CHANGELOG.md b/packages/components/chip/CHANGELOG.md index cfd877969..59627da30 100644 --- a/packages/components/chip/CHANGELOG.md +++ b/packages/components/chip/CHANGELOG.md @@ -1,5 +1,29 @@ # @nextui-org/chip +## 0.0.0-dev-v2-20230405205125 + +### Patch Changes + +- Native events exposed in all form elements +- Updated dependencies + - @nextui-org/shared-icons@0.0.0-dev-v2-20230405205125 + - @nextui-org/shared-utils@0.0.0-dev-v2-20230405205125 + - @nextui-org/dom-utils@0.0.0-dev-v2-20230405205125 + - @nextui-org/system@0.0.0-dev-v2-20230405205125 + - @nextui-org/theme@0.0.0-dev-v2-20230405205125 + +## 0.0.0-dev-v2-20230405200614 + +### Patch Changes + +- Textarea component added +- Updated dependencies + - @nextui-org/shared-icons@0.0.0-dev-v2-20230405200614 + - @nextui-org/shared-utils@0.0.0-dev-v2-20230405200614 + - @nextui-org/dom-utils@0.0.0-dev-v2-20230405200614 + - @nextui-org/system@0.0.0-dev-v2-20230405200614 + - @nextui-org/theme@0.0.0-dev-v2-20230405200614 + ## 0.0.0-dev-v2-20230405030905 ### Patch Changes diff --git a/packages/components/chip/package.json b/packages/components/chip/package.json index 3a67125c9..2bcc3d39e 100644 --- a/packages/components/chip/package.json +++ b/packages/components/chip/package.json @@ -1,6 +1,6 @@ { "name": "@nextui-org/chip", - "version": "0.0.0-dev-v2-20230405030905", + "version": "0.0.0-dev-v2-20230405205125", "description": "Chips help people enter information, make selections, filter content, or trigger actions.", "keywords": [ "chip" diff --git a/packages/components/code/CHANGELOG.md b/packages/components/code/CHANGELOG.md index 16e1512ed..bc30565a3 100644 --- a/packages/components/code/CHANGELOG.md +++ b/packages/components/code/CHANGELOG.md @@ -1,5 +1,27 @@ # @nextui-org/code +## 0.0.0-dev-v2-20230405205125 + +### Patch Changes + +- Native events exposed in all form elements +- Updated dependencies + - @nextui-org/shared-utils@0.0.0-dev-v2-20230405205125 + - @nextui-org/dom-utils@0.0.0-dev-v2-20230405205125 + - @nextui-org/system@0.0.0-dev-v2-20230405205125 + - @nextui-org/theme@0.0.0-dev-v2-20230405205125 + +## 0.0.0-dev-v2-20230405200614 + +### Patch Changes + +- Textarea component added +- Updated dependencies + - @nextui-org/shared-utils@0.0.0-dev-v2-20230405200614 + - @nextui-org/dom-utils@0.0.0-dev-v2-20230405200614 + - @nextui-org/system@0.0.0-dev-v2-20230405200614 + - @nextui-org/theme@0.0.0-dev-v2-20230405200614 + ## 0.0.0-dev-v2-20230405030905 ### Patch Changes diff --git a/packages/components/code/package.json b/packages/components/code/package.json index a97377bbc..117d5c466 100644 --- a/packages/components/code/package.json +++ b/packages/components/code/package.json @@ -1,6 +1,6 @@ { "name": "@nextui-org/code", - "version": "0.0.0-dev-v2-20230405030905", + "version": "0.0.0-dev-v2-20230405205125", "description": "Code is a component used to display inline code.", "keywords": [ "code" diff --git a/packages/components/drip/CHANGELOG.md b/packages/components/drip/CHANGELOG.md index 1d020732c..71ad59bee 100644 --- a/packages/components/drip/CHANGELOG.md +++ b/packages/components/drip/CHANGELOG.md @@ -1,5 +1,27 @@ # @nextui-org/drip +## 0.0.0-dev-v2-20230405205125 + +### Patch Changes + +- Native events exposed in all form elements +- Updated dependencies + - @nextui-org/shared-utils@0.0.0-dev-v2-20230405205125 + - @nextui-org/dom-utils@0.0.0-dev-v2-20230405205125 + - @nextui-org/system@0.0.0-dev-v2-20230405205125 + - @nextui-org/theme@0.0.0-dev-v2-20230405205125 + +## 0.0.0-dev-v2-20230405200614 + +### Patch Changes + +- Textarea component added +- Updated dependencies + - @nextui-org/shared-utils@0.0.0-dev-v2-20230405200614 + - @nextui-org/dom-utils@0.0.0-dev-v2-20230405200614 + - @nextui-org/system@0.0.0-dev-v2-20230405200614 + - @nextui-org/theme@0.0.0-dev-v2-20230405200614 + ## 0.0.0-dev-v2-20230405030905 ### Patch Changes diff --git a/packages/components/drip/package.json b/packages/components/drip/package.json index 92ef62948..ec0dde5d9 100644 --- a/packages/components/drip/package.json +++ b/packages/components/drip/package.json @@ -1,6 +1,6 @@ { "name": "@nextui-org/drip", - "version": "0.0.0-dev-v2-20230405030905", + "version": "0.0.0-dev-v2-20230405205125", "description": "A ripple effect for ensuring that the user fells the system is reacting instantaneously", "keywords": [ "drip" diff --git a/packages/components/input/CHANGELOG.md b/packages/components/input/CHANGELOG.md index 961f02a9f..986190696 100644 --- a/packages/components/input/CHANGELOG.md +++ b/packages/components/input/CHANGELOG.md @@ -1,5 +1,31 @@ # @nextui-org/input +## 0.0.0-dev-v2-20230405205125 + +### Patch Changes + +- Native events exposed in all form elements +- Updated dependencies + - @nextui-org/shared-icons@0.0.0-dev-v2-20230405205125 + - @nextui-org/shared-utils@0.0.0-dev-v2-20230405205125 + - @nextui-org/use-aria-field@0.0.0-dev-v2-20230405205125 + - @nextui-org/dom-utils@0.0.0-dev-v2-20230405205125 + - @nextui-org/system@0.0.0-dev-v2-20230405205125 + - @nextui-org/theme@0.0.0-dev-v2-20230405205125 + +## 0.0.0-dev-v2-20230405200614 + +### Patch Changes + +- Textarea component added +- Updated dependencies + - @nextui-org/shared-icons@0.0.0-dev-v2-20230405200614 + - @nextui-org/shared-utils@0.0.0-dev-v2-20230405200614 + - @nextui-org/use-aria-field@0.0.0-dev-v2-20230405200614 + - @nextui-org/dom-utils@0.0.0-dev-v2-20230405200614 + - @nextui-org/system@0.0.0-dev-v2-20230405200614 + - @nextui-org/theme@0.0.0-dev-v2-20230405200614 + ## 0.0.0-dev-v2-20230405030905 ### Patch Changes diff --git a/packages/components/input/package.json b/packages/components/input/package.json index 8cda99292..3a213bc96 100644 --- a/packages/components/input/package.json +++ b/packages/components/input/package.json @@ -1,6 +1,6 @@ { "name": "@nextui-org/input", - "version": "0.0.0-dev-v2-20230405030905", + "version": "0.0.0-dev-v2-20230405205125", "description": "The input component is designed for capturing user input within a text field.", "keywords": [ "input" @@ -38,15 +38,16 @@ }, "dependencies": { "@nextui-org/dom-utils": "workspace:*", - "@nextui-org/shared-utils": "workspace:*", "@nextui-org/shared-icons": "workspace:*", + "@nextui-org/shared-utils": "workspace:*", "@nextui-org/system": "workspace:*", "@nextui-org/theme": "workspace:*", "@nextui-org/use-aria-field": "workspace:*", "@react-aria/focus": "^3.11.0", + "@react-aria/interactions": "^3.14.0", "@react-aria/utils": "^3.15.0", "@react-stately/utils": "^3.6.0", - "@react-aria/interactions": "^3.14.0" + "react-textarea-autosize": "^8.4.1" }, "devDependencies": { "@react-types/shared": "^3.15.0", diff --git a/packages/components/input/src/index.ts b/packages/components/input/src/index.ts index 67ce3cb1b..096ad5827 100644 --- a/packages/components/input/src/index.ts +++ b/packages/components/input/src/index.ts @@ -1,10 +1,12 @@ import Input from "./input"; +import Textarea from "./textarea"; // export types export type {InputProps} from "./input"; +export type {TextAreaProps} from "./textarea"; // export hooks export {useInput} from "./use-input"; // export component -export {Input}; +export {Input, Textarea}; diff --git a/packages/components/input/src/input.tsx b/packages/components/input/src/input.tsx index 854b5259c..8544416e8 100644 --- a/packages/components/input/src/input.tsx +++ b/packages/components/input/src/input.tsx @@ -5,7 +5,10 @@ import {useMemo} from "react"; import {UseInputProps, useInput} from "./use-input"; export interface InputProps - extends Omit {} + extends Omit< + UseInputProps, + "ref" | "isClearButtonFocusVisible" | "isLabelPlaceholder" | "isTextarea" + > {} const Input = forwardRef((props, ref) => { const { @@ -59,8 +62,11 @@ const Input = forwardRef((props, ref) => { {shouldLabelBeInside ? labelContent : null} {innerWrapper}
- {description &&
{description}
} - {errorMessage &&
{errorMessage}
} + {errorMessage ? ( +
{errorMessage}
+ ) : description ? ( +
{description}
+ ) : null} ); }); diff --git a/packages/components/input/src/textarea.tsx b/packages/components/input/src/textarea.tsx new file mode 100644 index 000000000..dfd80fb6f --- /dev/null +++ b/packages/components/input/src/textarea.tsx @@ -0,0 +1,103 @@ +import {forwardRef} from "@nextui-org/system"; +import {mergeProps} from "@react-aria/utils"; +import TextareaAutosize from "react-textarea-autosize"; + +import {UseInputProps, useInput} from "./use-input"; + +type NativeTextareaProps = React.TextareaHTMLAttributes; +type TextareaAutoSizeStyle = Omit< + NonNullable, + "maxHeight" | "minHeight" +> & { + height?: number; +}; + +type OmittedInputProps = + | "isClearButtonFocusVisible" + | "isLabelPlaceholder" + | "isClearable" + | "isTextarea" + | "startContent" + | "endContent"; + +export type TextareaHeightChangeMeta = { + rowHeight: number; +}; + +export interface TextAreaProps extends Omit { + /** + * Minimum number of rows to show for textarea + * @default 3 + */ + minRows?: number; + /** + * Maximum number of rows up to which the textarea can grow + * @default 6 + */ + maxRows?: number; + /** + * Reuse previously computed measurements when computing height of textarea. + * @default false + */ + cacheMeasurements?: boolean; + /** + * Function invoked on textarea height change, with height as first argument. + * The second function argument is an object containing additional information that + * might be useful for custom behaviors. Current options include `{ rowHeight: number }`. + * + * @param height - The height of the textarea + * @param meta - Additional information about the height change + */ + onHeightChange?: (height: number, meta: TextareaHeightChangeMeta) => void; +} + +const Textarea = forwardRef( + ( + {style, minRows = 3, maxRows = 8, cacheMeasurements = false, onHeightChange, ...otherProps}, + ref, + ) => { + const { + Component, + label, + description, + shouldLabelBeOutside, + shouldLabelBeInside, + errorMessage, + getBaseProps, + getLabelProps, + getInputProps, + getInputWrapperProps, + getDescriptionProps, + getErrorMessageProps, + } = useInput({ref, ...otherProps, isMultiline: true}); + + const labelContent = ; + const inputProps = getInputProps(); + + return ( + + {shouldLabelBeOutside ? labelContent : null} +
+ {shouldLabelBeInside ? labelContent : null} + +
+ {errorMessage ? ( +
{errorMessage}
+ ) : description ? ( +
{description}
+ ) : null} + + ); + }, +); + +Textarea.displayName = "NextUI.Textarea"; + +export default Textarea; diff --git a/packages/components/input/src/use-aria-text-field.ts b/packages/components/input/src/use-aria-textfield.ts similarity index 100% rename from packages/components/input/src/use-aria-text-field.ts rename to packages/components/input/src/use-aria-textfield.ts diff --git a/packages/components/input/src/use-input.ts b/packages/components/input/src/use-input.ts index cbd01b33d..79bbb8721 100644 --- a/packages/components/input/src/use-input.ts +++ b/packages/components/input/src/use-input.ts @@ -8,12 +8,12 @@ import {useDOMRef} from "@nextui-org/dom-utils"; import {usePress} from "@react-aria/interactions"; import {clsx, dataAttr} from "@nextui-org/shared-utils"; import {useControlledState} from "@react-stately/utils"; -import {useMemo, Ref} from "react"; +import {useMemo, Ref, RefObject} from "react"; import {chain, filterDOMProps, mergeProps} from "@react-aria/utils"; -import {useAriaTextField} from "./use-aria-text-field"; +import {useAriaTextField} from "./use-aria-textfield"; -export interface Props extends Omit, "onChange"> { +export interface Props extends HTMLNextUIProps<"input"> { /** * Ref to the DOM node. */ @@ -29,11 +29,6 @@ export interface Props extends Omit, "onChange"> { * default clear button. */ endContent?: React.ReactNode; - /** - * Callback fired when the value is cleared. - * if you pass this prop, the clear button will be shown. - */ - onClear?: () => void; /** * Classname or List of classes to change the styles of the element. * if `className` is passed, it will be added to the base slot. @@ -47,14 +42,23 @@ export interface Props extends Omit, "onChange"> { * input: "input-classes", * clearButton: "clear-button-classes", * description: "description-classes", - * helperText: "helper-text-classes", + * errorMessage: "error-message-classes", * }} /> * ``` */ styles?: SlotsToClasses; + /** + * Callback fired when the value is cleared. + * if you pass this prop, the clear button will be shown. + */ + onClear?: () => void; + /** + * React aria onChange event. + */ + onValueChange?: AriaTextFieldProps["onChange"]; } -export type UseInputProps = Props & AriaTextFieldProps & InputVariantProps; +export type UseInputProps = Props & Omit & InputVariantProps; export function useInput(originalProps: UseInputProps) { const [props, variantProps] = mapPropsVariants(originalProps, input.variantKeys); @@ -72,6 +76,7 @@ export function useInput(originalProps: UseInputProps) { endContent, onClear, onChange, + onValueChange, ...otherProps } = props; @@ -79,8 +84,11 @@ export function useInput(originalProps: UseInputProps) { const Component = as || "div"; const baseStyles = clsx(styles?.base, className, !!inputValue ? "is-filled" : ""); + const isMultiline = originalProps.isMultiline; - const domRef = useDOMRef(ref); + const domRef = useDOMRef(ref) as typeof isMultiline extends "true" + ? RefObject + : RefObject; const handleClear = () => { setInputValue(undefined); @@ -95,8 +103,9 @@ export function useInput(originalProps: UseInputProps) { const {labelProps, inputProps, descriptionProps, errorMessageProps} = useAriaTextField( { ...originalProps, + inputElementType: isMultiline ? "textarea" : "input", value: inputValue, - onChange: chain(onChange, setInputValue), + onChange: chain(onValueChange, setInputValue), }, domRef, ); @@ -115,7 +124,7 @@ export function useInput(originalProps: UseInputProps) { const isInvalid = props.validationState === "invalid"; const labelPosition = originalProps.labelPosition || "inside"; - const isLabelPlaceholder = !props.placeholder && labelPosition !== "outside-left"; + const isLabelPlaceholder = !props.placeholder && labelPosition !== "outside-left" && !isMultiline; const isClearable = !!onClear || originalProps.isClearable; const shouldLabelBeOutside = labelPosition === "outside" || labelPosition === "outside-left"; @@ -170,6 +179,7 @@ export function useInput(originalProps: UseInputProps) { "data-focused": dataAttr(isFocused), "data-invalid": dataAttr(isInvalid), ...mergeProps(focusProps, inputProps, filterDOMProps(otherProps, {labelable: true}), props), + onChange: chain(inputProps.onChange, onChange), }; }; @@ -235,6 +245,7 @@ export function useInput(originalProps: UseInputProps) { endContent, labelPosition, isClearable, + isInvalid, shouldLabelBeOutside, shouldLabelBeInside, errorMessage, diff --git a/packages/components/input/stories/input.stories.tsx b/packages/components/input/stories/input.stories.tsx index 802db2e4e..9a549649e 100644 --- a/packages/components/input/stories/input.stories.tsx +++ b/packages/components/input/stories/input.stories.tsx @@ -123,7 +123,7 @@ const RegexValidationTemplate: ComponentStory = (args: InputProps) placeholder="Enter your email" validationState={validationState} value={value} - onChange={setValue} + onValueChange={setValue} /> ); @@ -134,7 +134,7 @@ const ControlledTemplate: ComponentStory = (args: InputProps) => { return (
- +

Input value: {value}

); @@ -434,11 +434,6 @@ const CustomWithHooksTemplate: ComponentStory = (args: InputProps) ); }; -export const Empty = Template.bind({}); -Empty.args = { - label: "Email", -}; - export const Default = MirrorTemplate.bind({}); Default.args = { ...defaultProps, diff --git a/packages/components/input/stories/textarea.stories.tsx b/packages/components/input/stories/textarea.stories.tsx new file mode 100644 index 000000000..24ea914a5 --- /dev/null +++ b/packages/components/input/stories/textarea.stories.tsx @@ -0,0 +1,135 @@ +import React from "react"; +import {ComponentStory, ComponentMeta} from "@storybook/react"; +import {input} from "@nextui-org/theme"; + +import {Textarea, TextAreaProps} from "../src"; + +export default { + title: "Components/Textarea", + component: Textarea, + argTypes: { + variant: { + control: { + type: "select", + options: ["flat", "faded", "bordered", "underlined"], + }, + }, + color: { + control: { + type: "select", + options: ["neutral", "primary", "secondary", "success", "warning", "danger"], + }, + }, + radius: { + control: { + type: "select", + options: ["none", "base", "sm", "md", "lg", "xl", "full"], + }, + }, + size: { + control: { + type: "select", + options: ["xs", "sm", "md", "lg", "xl"], + }, + }, + labelPosition: { + control: { + type: "select", + options: ["inside", "outside", "outside-left"], + }, + }, + isDisabled: { + control: { + type: "boolean", + }, + }, + }, + decorators: [ + (Story) => ( +
+ +
+ ), + ], +} as ComponentMeta; + +const defaultProps = { + ...input.defaultVariants, + label: "Description", + placeholder: "Enter your description", +}; + +const Template: ComponentStory = (args: TextAreaProps) => ( +
+