Merge pull request #533 from nextui-org/next

v1.0.0-beta.9

apps/docs/content/docs/components/card.mdx

@@ -88,17 +88,18 @@ import { Card } from '@nextui-org/react';
 
 #### Card Props
 
-| Attribute            | Type                             | Description                                                         | Default  |
-| -------------------- | -------------------------------- | ------------------------------------------------------------------- | -------- |
-| **children\***       | `ReactNode` `ReactNode[]`        | The content of the card. It's usually the header, body, and footer. | -        |
-| **variant**          | [CardVariants](#card-variants)   | The card variant style.                                             | `shadow` |
-| **borderWeight**     | [NormalWeights](#normal-weights) | The border weight of the bordered card.                             | `light`  |
-| **isHoverable**      | `boolean`                        | Whether the card can be hovered by the user.                        | `false`  |
-| **isPressable**      | `boolean`                        | Whether the card should allow users to interact with the card.      | `false`  |
-| **disableAnimation** | `boolean`                        | Whether the card is animated.                                       | `false`  |
-| **disableRipple**    | `boolean`                        | Whether the card should show a ripple animation on press            | `false`  |
-| **css**              | `Stitches.CSS`                   | Override Default CSS style.                                         | -        |
-| **as**               | `keyof JSX.IntrinsicElements`    | Changes which tag component outputs.                                | `div`    |
+| Attribute                     | Type                             | Description                                                                       | Default  |
+| ----------------------------- | -------------------------------- | --------------------------------------------------------------------------------- | -------- |
+| **children\***                | `ReactNode` `ReactNode[]`        | The content of the card. It's usually the header, body, and footer.               | -        |
+| **variant**                   | [CardVariants](#card-variants)   | The card variant style.                                                           | `shadow` |
+| **borderWeight**              | [NormalWeights](#normal-weights) | The border weight of the bordered card.                                           | `light`  |
+| **isHoverable**               | `boolean`                        | Whether the card can be hovered by the user.                                      | `false`  |
+| **isPressable**               | `boolean`                        | Whether the card should allow users to interact with the card.                    | `false`  |
+| **disableAnimation**          | `boolean`                        | Whether the card is animated.                                                     | `false`  |
+| **disableRipple**             | `boolean`                        | Whether the card should show a ripple animation on press                          | `false`  |
+| **allowTextSelectionOnPress** | `boolean`                        | Whether the card should allow text selection on press. (only for pressable cards) | `true`   |
+| **css**                       | `Stitches.CSS`                   | Override Default CSS style.                                                       | -        |
+| **as**                        | `keyof JSX.IntrinsicElements`    | Changes which tag component outputs.                                              | `div`    |
 
 <Spacer y={1} />
 

apps/docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/docs",
-  "version": "1.0.0-beta.8",
+  "version": "1.0.0-beta.9",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -16,7 +16,7 @@
     "@codesandbox/sandpack-react": "0.14.3",
     "@mapbox/rehype-prism": "^0.6.0",
     "@mdx-js/react": "^1.6.22",
-    "@nextui-org/react": "1.0.0-beta.8",
+    "@nextui-org/react": "1.0.0-beta.9",
     "@types/lodash": "^4.14.170",
     "algoliasearch": "^4.10.3",
     "canvas-confetti": "^1.4.0",

examples/create-next-app/package.json

@@ -9,7 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@nextui-org/react": "1.0.0-beta.8",
+    "@nextui-org/react": "1.0.0-beta.9",
     "next": "11.0.0",
     "react": "17.0.2",
     "react-dom": "17.0.2"

examples/create-react-app/package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@nextui-org/react": "1.0.0-beta.8",
+    "@nextui-org/react": "1.0.0-beta.9",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",

examples/vite-react-typescript/package.json

@@ -8,7 +8,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@nextui-org/react": "1.0.0-beta.8",
+    "@nextui-org/react": "1.0.0-beta.9",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },

examples/with-tailwindcss/package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@nextui-org/react": "^1.0.0-beta.8",
+    "@nextui-org/react": "^1.0.0-beta.9",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.1.1",
     "@testing-library/user-event": "^13.5.0",

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/react",
-  "version": "1.0.0-beta.8",
+  "version": "1.0.0-beta.9",
   "license": "MIT",
   "description": "🚀 Beautiful and modern React UI library.",
   "homepage": "https://nextui.org",
@@ -55,33 +55,33 @@
   },
   "dependencies": {
     "@babel/runtime": "7.9.6",
-    "@react-aria/button": "3.4.4",
-    "@react-aria/checkbox": "3.3.4",
-    "@react-aria/dialog": "3.1.9",
-    "@react-aria/focus": "3.5.5",
-    "@react-aria/i18n": "3.3.9",
-    "@react-aria/interactions": "3.8.4",
-    "@react-aria/label": "3.2.5",
-    "@react-aria/menu": "3.4.4",
-    "@react-aria/overlays": "3.8.2",
-    "@react-aria/radio": "3.1.11",
-    "@react-aria/ssr": "3.1.2",
-    "@react-aria/table": "3.2.4",
-    "@react-aria/utils": "3.12.0",
-    "@react-aria/visually-hidden": "3.2.8",
-    "@react-stately/checkbox": "3.0.7",
-    "@react-stately/data": "3.4.7",
-    "@react-stately/overlays": "3.2.0",
-    "@react-stately/radio": "3.3.6",
-    "@react-stately/table": "3.1.3",
-    "@react-stately/toggle": "3.2.7",
-    "@react-stately/tree": "3.2.4",
-    "@react-types/button": "^3.4.5",
-    "@react-types/checkbox": "3.2.7",
-    "@react-types/grid": "3.0.4",
-    "@react-types/menu": "3.5.3",
-    "@react-types/overlays": "3.5.5",
-    "@react-types/shared": "3.12.0",
+    "@react-aria/button": "3.5.0",
+    "@react-aria/checkbox": "3.4.0",
+    "@react-aria/dialog": "3.2.0",
+    "@react-aria/focus": "3.6.0",
+    "@react-aria/i18n": "3.4.0",
+    "@react-aria/interactions": "3.9.0",
+    "@react-aria/label": "3.3.0",
+    "@react-aria/menu": "3.5.0",
+    "@react-aria/overlays": "3.9.0",
+    "@react-aria/radio": "3.2.0",
+    "@react-aria/ssr": "3.2.0",
+    "@react-aria/table": "3.3.0",
+    "@react-aria/utils": "3.13.0",
+    "@react-aria/visually-hidden": "3.3.0",
+    "@react-stately/checkbox": "3.1.0",
+    "@react-stately/data": "3.5.0",
+    "@react-stately/overlays": "3.3.0",
+    "@react-stately/radio": "3.4.0",
+    "@react-stately/table": "3.2.0",
+    "@react-stately/toggle": "3.3.0",
+    "@react-stately/tree": "3.3.0",
+    "@react-types/button": "^3.5.0",
+    "@react-types/checkbox": "3.3.0",
+    "@react-types/grid": "3.1.0",
+    "@react-types/menu": "3.6.0",
+    "@react-types/overlays": "3.6.0",
+    "@react-types/shared": "3.13.0",
     "@stitches/react": "1.2.8"
   },
   "peerDependencies": {
@@ -99,7 +99,7 @@
     "@babel/preset-react": "^7.14.5",
     "@babel/preset-typescript": "^7.14.5",
     "@react-bootstrap/babel-preset": "^2.1.0",
-    "@storybook/react": "^6.3.10",
+    "@storybook/react": "^6.5.3",
     "@testing-library/dom": "^8.1.0",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.1.2",

packages/react/src/button/button.tsx

@@ -73,12 +73,16 @@ export type ButtonProps = Props &
 const Button = React.forwardRef(
   (
     {
-      onClick,
-      onPress,
       as,
       css,
       iconLeftCss,
       iconRightCss,
+      onClick,
+      onPress,
+      onPressStart,
+      onPressEnd,
+      onPressChange,
+      onPressUp,
       ...btnProps
     }: ButtonProps,
     ref: React.Ref<HTMLButtonElement | null>
@@ -135,7 +139,11 @@ const Button = React.forwardRef(
         onClick: handleClick,
         isDisabled: disabled,
         elementType: as,
-        onPress: handlePress
+        onPress: handlePress,
+        onPressStart,
+        onPressEnd,
+        onPressChange,
+        onPressUp
       } as AriaButtonProps,
       buttonRef
     );

packages/react/src/card/card.stories.tsx

@@ -2,11 +2,23 @@ import React from 'react';
 import { Meta } from '@storybook/react';
 import Card from './index';
 import { styled } from '../theme/stitches.config';
-import { Row, Col, Link, Text, Code, Button, Grid } from '../index';
+import {
+  Row,
+  Col,
+  Link,
+  Text,
+  Code,
+  Button,
+  Grid,
+  Checkbox,
+  Spacer,
+  Input
+} from '../index';
 import AppleEvent from '../../assets/apple-event.jpeg';
 import Homepods from '../../assets/homepod.jpeg';
 import Relaxing from '../../assets/relaxing.jpeg';
 import BreathingApp from '../../assets/breathing-app-icon.jpeg';
+import { Mail, Password } from '../utils/icons';
 
 export default {
   title: 'Surfaces/Card',
@@ -669,3 +681,62 @@ export const Shadows = () => {
     </Grid.Container>
   );
 };
+
+export const withForm = () => {
+  return (
+    <Card css={{ mw: '400px' }}>
+      <Card.Header css={{ justifyContent: 'center' }}>
+        <Text size={18}>
+          Welcome to&nbsp;
+          <Text b size={18}>
+            NextUI
+          </Text>
+        </Text>
+      </Card.Header>
+      <Card.Body css={{ px: '$10', pt: '$1', ov: 'visible' }}>
+        <Input
+          clearable
+          bordered
+          fullWidth
+          size="lg"
+          color="primary"
+          placeholder="Email"
+          contentLeft={<Mail fill="currentColor" />}
+        />
+        <Spacer y={0.5} />
+        <Input
+          clearable
+          bordered
+          fullWidth
+          size="lg"
+          color="primary"
+          placeholder="Password"
+          contentLeft={<Password />}
+        />
+        <Spacer y={0.5} />
+        <Row justify="space-between" align="center">
+          <Checkbox>
+            <Text size={14} css={{ color: '$accents8' }}>
+              Remember me
+            </Text>
+          </Checkbox>
+          <Link href="#" css={{ color: '$link', fontSize: '$sm' }}>
+            Forgot password?
+          </Link>
+        </Row>
+      </Card.Body>
+      <Card.Footer css={{ pt: 0 }}>
+        <Grid.Container justify="flex-end" gap={1}>
+          <Grid>
+            <Button auto flat>
+              Sign Up
+            </Button>
+          </Grid>
+          <Grid>
+            <Button auto>Login</Button>
+          </Grid>
+        </Grid.Container>
+      </Card.Footer>
+    </Card>
+  );
+};

packages/react/src/card/card.tsx

@@ -1,6 +1,5 @@
 import React, { PropsWithoutRef, RefAttributes } from 'react';
 import type { ReactNode } from 'react';
-import { mergeProps } from '@react-aria/utils';
 import Drip from '../utils/drip';
 import { CSS } from '../theme/stitches.config';
 import { useCard } from './use-card';
@@ -35,9 +34,7 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>(
       disableRipple,
       borderWeight,
       isHovered,
-      pressProps,
-      focusProps,
-      hoverProps,
+      getCardProps,
       dripBindings
     } = useCard({ ...otherProps, ref });
 
@@ -55,7 +52,7 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>(
         isHovered={isHovered}
         tabIndex={isPressable ? 0 : -1}
         isFocusVisible={isFocusVisible}
-        {...mergeProps(pressProps, focusProps, hoverProps, otherProps)}
+        {...getCardProps()}
       >
         {isPressable && !disableAnimation && !disableRipple && (
           <Drip {...dripBindings} />

packages/react/src/card/use-card.ts

@@ -1,10 +1,11 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { useFocusRing } from '@react-aria/focus';
 import type {
   PressEvents,
   PressEvent,
   FocusableProps
 } from '@react-types/shared';
+import { mergeProps } from '@react-aria/utils';
 import type { FocusRingAria } from '@react-aria/focus';
 import { usePress } from '@react-aria/interactions';
 import { useHover } from '@react-aria/interactions';
@@ -21,6 +22,8 @@ interface Props extends PressEvents, FocusableProps {
   isHoverable?: boolean;
   disableRipple?: boolean;
   disableAnimation?: boolean;
+  /** Whether text selection should be enabled on the pressable element. */
+  allowTextSelectionOnPress?: boolean;
 }
 
 type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
@@ -46,6 +49,7 @@ export const useCard = (props: UseCardProps) => {
     onClick,
     onPress,
     autoFocus,
+    allowTextSelectionOnPress = true,
     ...otherProps
   } = props;
 
@@ -82,6 +86,7 @@ export const useCard = (props: UseCardProps) => {
   const { isPressed, pressProps } = usePress({
     isDisabled: !isPressable,
     onPress: handlePress,
+    allowTextSelectionOnPress,
     ...otherProps
   });
 
@@ -96,6 +101,20 @@ export const useCard = (props: UseCardProps) => {
 
   pressProps.onClick = handleClick;
 
+  const getCardProps = useCallback(
+    (props = {}) => {
+      return {
+        ...mergeProps(
+          isPressable ? { ...pressProps, ...focusProps } : {},
+          isHoverable ? hoverProps : {},
+          otherProps,
+          props
+        )
+      };
+    },
+    [isPressable, isHoverable, pressProps, focusProps, hoverProps, otherProps]
+  );
+
   return {
     cardRef,
     variant,
@@ -105,13 +124,10 @@ export const useCard = (props: UseCardProps) => {
     isPressed,
     disableAnimation,
     disableRipple,
-    pressProps,
-    hoverProps,
     dripBindings,
-    focusProps,
     onDripClickHandler,
     isFocusVisible,
-    ...otherProps
+    getCardProps
   };
 };