Merge branch 'canary' of github.com:nextui-org/nextui into canary

nextui-org · Sep 15, 2024 · 324f912 · 324f912
2 parents d67579c + 4c01d18
commit 324f912
Show file tree

Hide file tree

Showing 24 changed files with 195 additions and 211 deletions.
diff --git a/.changeset/fair-worms-reflect.md b/.changeset/fair-worms-reflect.md
@@ -0,0 +1,6 @@
+---
+"@nextui-org/popover": patch
+"@nextui-org/tooltip": patch
+---
+
+rollback PR3307. rescheduled to v2.5.0.
diff --git a/.changeset/silent-ads-mix.md b/.changeset/silent-ads-mix.md
@@ -0,0 +1,5 @@
+---
+"@nextui-org/theme": patch
+---
+
+remove tw nested group (rollback PR3658)
diff --git a/apps/docs/app/examples/perf/page.tsx b/apps/docs/app/examples/perf/page.tsx
@@ -106,7 +106,7 @@ const MyInput = extendVariants(Input, {
           "focus-within:bg-zinc-100",
           "data-[hover=true]:border-zinc-600",
           "data-[hover=true]:bg-zinc-100",
-          "group-data-[focus=true]/input:border-zinc-600",
+          "group-data-[focus=true]:border-zinc-600",
           // dark theme
           "dark:bg-zinc-900",
           "dark:border-zinc-800",

diff --git a/apps/docs/components/marketing/hero/floating-components.tsx b/apps/docs/components/marketing/hero/floating-components.tsx
@@ -110,7 +110,6 @@ export const FloatingComponents: React.FC<{}> = () => {
             content="Developers love Next.js"
             isOpen={!isTablet}
             placement="top"
-            shouldBlockScroll={false}
             style={{
               zIndex: 39,
             }}

diff --git a/apps/docs/components/theme-switch.tsx b/apps/docs/components/theme-switch.tsx
@@ -57,7 +57,7 @@ export const ThemeSwitch: FC<ThemeSwitchProps> = ({className, classNames}) => {
               "bg-transparent",
               "rounded-lg",
               "flex items-center justify-center",
-              "group-data-[selected=true]/toggle:bg-transparent",
+              "group-data-[selected=true]:bg-transparent",
               "!text-default-600 dark:!text-default-500",
               "pt-px",
               "px-0",

diff --git a/apps/docs/content/components/input/custom-styles.ts b/apps/docs/content/components/input/custom-styles.ts
@@ -52,8 +52,8 @@ export default function App() {
             "backdrop-saturate-200",
             "hover:bg-default-200/70",
             "dark:hover:bg-default/70",
-            "group-data-[focus=true]/input:bg-default-200/50",
-            "dark:group-data-[focus=true]/input:bg-default/60",
+            "group-data-[focus=true]:bg-default-200/50",
+            "dark:group-data-[focus=true]:bg-default/60",
             "!cursor-text",
           ],
         }}

diff --git a/apps/docs/content/components/select/custom-styles.ts b/apps/docs/content/components/select/custom-styles.ts
@@ -212,7 +212,7 @@ export default function App() {
       className="max-w-xs"
       variant="bordered"
       classNames={{
-        label: "group-data-[filled=true]/select:-translate-y-5",
+        label: "group-data-[filled=true]:-translate-y-5",
         trigger: "min-h-16",
         listboxWrapper: "max-h-[400px]",
       }}

diff --git a/apps/docs/content/components/switch/custom-styles.ts b/apps/docs/content/components/switch/custom-styles.ts
@@ -11,12 +11,12 @@ export default function App() {
         ),
         wrapper: "p-0 h-4 overflow-visible",
         thumb: cn("w-6 h-6 border-2 shadow-lg",
-          "group-data-[hover=true]/toggle:border-primary",
+          "group-data-[hover=true]:border-primary",
           //selected
-          "group-data-[selected=true]/toggle:ml-6",
+          "group-data-[selected=true]:ml-6",
           // pressed
-          "group-data-[pressed=true]/toggle:w-7",
-          "group-data-[selected]:group-data-[pressed]/toggle:ml-4",
+          "group-data-[pressed=true]:w-7",
+          "group-data-[selected]:group-data-[pressed]:ml-4",
         ),
       }}
     >

diff --git a/apps/docs/content/customization/custom-variants/slots-component.ts b/apps/docs/content/customization/custom-variants/slots-component.ts
@@ -47,7 +47,7 @@ const MyInput = extendVariants(Input, {
           "focus-within:bg-zinc-100",
           "data-[hover=true]:border-zinc-600",
           "data-[hover=true]:bg-zinc-100",
-          "group-data-[focus=true]/input:border-zinc-600",
+          "group-data-[focus=true]:border-zinc-600",
           "dark:bg-zinc-900",
           "dark:border-zinc-800",
           "dark:data-[hover=true]:bg-zinc-900",

diff --git a/apps/docs/content/docs/customization/custom-variants.mdx b/apps/docs/content/docs/customization/custom-variants.mdx
@@ -133,7 +133,7 @@ const MyInput = extendVariants(Input, {
           "focus-within:bg-zinc-100",
           "data-[hover=true]:border-zinc-600",
           "data-[hover=true]:bg-zinc-100",
-          "group-data-[focus=true]/input:border-zinc-600",
+          "group-data-[focus=true]:border-zinc-600",
           // dark theme
           "dark:bg-zinc-900",
           "dark:border-zinc-800",

diff --git a/packages/components/popover/package.json b/packages/components/popover/package.json
@@ -56,7 +56,8 @@
     "@react-aria/utils": "3.24.1",
     "@react-stately/overlays": "3.6.7",
     "@react-types/button": "3.9.4",
-    "@react-types/overlays": "3.8.7"
+    "@react-types/overlays": "3.8.7",
+    "react-remove-scroll": "^2.5.6"
   },
   "devDependencies": {
     "@nextui-org/card": "workspace:*",

diff --git a/packages/components/popover/src/popover-content.tsx b/packages/components/popover/src/popover-content.tsx
@@ -3,6 +3,7 @@ import type {HTMLMotionProps} from "framer-motion";
 
 import {DOMAttributes, ReactNode, useMemo, useRef} from "react";
 import {forwardRef} from "@nextui-org/system";
+import {RemoveScroll} from "react-remove-scroll";
 import {DismissButton} from "@react-aria/overlays";
 import {TRANSITION_VARIANTS} from "@nextui-org/framer-utils";
 import {m, domAnimation, LazyMotion} from "framer-motion";
@@ -23,10 +24,12 @@ const PopoverContent = forwardRef<"div", PopoverContentProps>((props, _) => {
 
   const {
     Component: OverlayComponent,
+    isOpen,
     placement,
     backdrop,
     motionProps,
     disableAnimation,
+    shouldBlockScroll,
     getPopoverProps,
     getDialogProps,
     getBackdropProps,
@@ -79,23 +82,27 @@ const PopoverContent = forwardRef<"div", PopoverContentProps>((props, _) => {
     );
   }, [backdrop, disableAnimation, getBackdropProps]);
 
-  const contents = 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>
+  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 (

diff --git a/packages/components/popover/src/use-popover.ts b/packages/components/popover/src/use-popover.ts
@@ -6,7 +6,7 @@ import {RefObject, Ref} from "react";
 import {ReactRef, useDOMRef} from "@nextui-org/react-utils";
 import {OverlayTriggerState, useOverlayTriggerState} from "@react-stately/overlays";
 import {useFocusRing} from "@react-aria/focus";
-import {useOverlayTrigger, usePreventScroll} from "@react-aria/overlays";
+import {useOverlayTrigger} from "@react-aria/overlays";
 import {OverlayTriggerProps} from "@react-types/overlays";
 import {
   HTMLNextUIProps,
@@ -298,10 +298,6 @@ export function usePopover(originalProps: UsePopoverProps) {
     [slots, state.isOpen, classNames, underlayProps],
   );
 
-  usePreventScroll({
-    isDisabled: !(shouldBlockScroll && state.isOpen),
-  });
-
   return {
     state,
     Component,
@@ -316,6 +312,7 @@ export function usePopover(originalProps: UsePopoverProps) {
     isOpen: state.isOpen,
     onClose: state.close,
     disableAnimation,
+    shouldBlockScroll,
     backdrop: originalProps.backdrop ?? "transparent",
     motionProps,
     getBackdropProps,

diff --git a/packages/components/select/stories/select.stories.tsx b/packages/components/select/stories/select.stories.tsx
@@ -505,7 +505,7 @@ const CustomStylesTemplate = ({color, variant, ...args}: SelectProps<User>) => {
     <Select
       className="max-w-xs"
       classNames={{
-        label: "group-data-[filled=true]/select:-translate-y-5",
+        label: "group-data-[filled=true]:-translate-y-5",
         trigger: "min-h-16",
         listboxWrapper: "max-h-[400px]",
       }}

diff --git a/packages/components/tooltip/src/use-tooltip.ts b/packages/components/tooltip/src/use-tooltip.ts
@@ -8,12 +8,7 @@ import {ReactNode, Ref, useId, useImperativeHandle} from "react";
 import {useTooltipTriggerState} from "@react-stately/tooltip";
 import {mergeProps} from "@react-aria/utils";
 import {useTooltip as useReactAriaTooltip, useTooltipTrigger} from "@react-aria/tooltip";
-import {
-  useOverlayPosition,
-  useOverlay,
-  AriaOverlayProps,
-  usePreventScroll,
-} from "@react-aria/overlays";
+import {useOverlayPosition, useOverlay, AriaOverlayProps} from "@react-aria/overlays";
 import {
   HTMLNextUIProps,
   mapPropsVariants,
@@ -87,11 +82,6 @@ interface Props extends Omit<HTMLNextUIProps, "content"> {
    * ```
    */
   classNames?: SlotsToClasses<"base" | "arrow" | "content">;
-  /**
-   * Whether to block scrolling outside the tooltip.
-   * @default true
-   */
-  shouldBlockScroll?: boolean;
 }
 
 export type UseTooltipProps = Props &
@@ -133,7 +123,6 @@ export function useTooltip(originalProps: UseTooltipProps) {
     onClose,
     motionProps,
     classNames,
-    shouldBlockScroll = true,
     ...otherProps
   } = props;
 
@@ -169,8 +158,6 @@ export function useTooltip(originalProps: UseTooltipProps) {
     createDOMRef(overlayRef),
   );
 
-  usePreventScroll({isDisabled: !(shouldBlockScroll && isOpen)});
-
   const {triggerProps, tooltipProps: triggerTooltipProps} = useTooltipTrigger(
     {
       isDisabled,

diff --git a/packages/core/theme/src/components/autocomplete.ts b/packages/core/theme/src/components/autocomplete.ts
@@ -4,7 +4,7 @@ import {tv} from "../utils/tv";
 
 const autocomplete = tv({
   slots: {
-    base: "group/autocomplete inline-flex flex-column w-full",
+    base: "group inline-flex flex-column w-full",
     listboxWrapper: "scroll-py-6 max-h-64 w-full",
     listbox: "",
     popoverContent: "w-full p-1 overflow-hidden",
@@ -16,14 +16,14 @@ const autocomplete = tv({
       "opacity-0",
       "pointer-events-none",
       "text-default-500",
-      "group-data-[invalid=true]/autocomplete:text-danger",
+      "group-data-[invalid=true]:text-danger",
       "data-[visible=true]:opacity-100", // on mobile is always visible when there is a value
       "data-[visible=true]:pointer-events-auto",
       "data-[visible=true]:cursor-pointer",
       "sm:data-[visible=true]:opacity-0", // only visible on hover
       "sm:data-[visible=true]:pointer-events-none",
-      "sm:group-data-[hover=true]:data-[visible=true]/autocomplete:opacity-100",
-      "sm:group-data-[hover=true]:data-[visible=true]/autocomplete:pointer-events-auto",
+      "sm:group-data-[hover=true]:data-[visible=true]:opacity-100",
+      "sm:group-data-[hover=true]:data-[visible=true]:pointer-events-auto",
     ],
     selectorButton: "text-medium",
   },

diff --git a/packages/core/theme/src/components/checkbox.ts b/packages/core/theme/src/components/checkbox.ts
@@ -21,7 +21,7 @@ import {groupDataFocusVisibleClasses} from "../utils";
  */
 const checkbox = tv({
   slots: {
-    base: "group/checkbox relative max-w-fit inline-flex items-center justify-start cursor-pointer tap-highlight-transparent p-2 -m-2 select-none",
+    base: "group relative max-w-fit inline-flex items-center justify-start cursor-pointer tap-highlight-transparent p-2 -m-2 select-none",
     wrapper: [
       "relative",
       "inline-flex",
@@ -44,14 +44,14 @@ const checkbox = tv({
       "after:scale-50",
       "after:opacity-0",
       "after:origin-center",
-      "group-data-[selected=true]/checkbox:after:scale-100",
-      "group-data-[selected=true]/checkbox:after:opacity-100",
+      "group-data-[selected=true]:after:scale-100",
+      "group-data-[selected=true]:after:opacity-100",
       // hover
-      "group-data-[hover=true]/checkbox:before:bg-default-100",
+      "group-data-[hover=true]:before:bg-default-100",
       // focus ring
       ...groupDataFocusVisibleClasses,
     ],
-    icon: "z-10 w-4 h-3 opacity-0 group-data-[selected=true]/checkbox:opacity-100",
+    icon: "z-10 w-4 h-3 opacity-0 group-data-[selected=true]:opacity-100",
     label: "relative text-foreground select-none",
   },
   variants: {
@@ -147,8 +147,8 @@ const checkbox = tv({
           "before:bg-foreground",
           "before:w-0",
           "before:h-0.5",
-          "group-data-[selected=true]/checkbox:opacity-60",
-          "group-data-[selected=true]/checkbox:before:w-full",
+          "group-data-[selected=true]:opacity-60",
+          "group-data-[selected=true]:before:w-full",
         ],
       },
     },
@@ -172,7 +172,7 @@ const checkbox = tv({
       false: {
         wrapper: [
           "before:transition-colors",
-          "group-data-[pressed=true]/checkbox:scale-95",
+          "group-data-[pressed=true]:scale-95",
           "transition-transform",
           "after:transition-transform-opacity",
           "after:!ease-linear",