Merge pull request #2589 from gluestack/release/@gluestack-ui/popover…

…@0.1.43

release: @gluestack-ui/popover version 0.1.43

example/storybook-nativewind/package.json

@@ -32,7 +32,7 @@
     "@gluestack-style/animation-resolver": "^1.0.4",
     "@gluestack-style/react": "^1.0.57",
     "@gluestack-ui/config": "^1.1.19",
-    "@gluestack-ui/themed": "^1.1.60",
+    "@gluestack-ui/themed": "^1.1.61",
     "@gluestack/design-system": "^0.5.36",
     "@gorhom/bottom-sheet": "^5.0.0-alpha.10",
     "@legendapp/motion": "^2.2.0",

example/storybook-nativewind/src/core-components/nativewind/drawer/index.tsx

@@ -81,7 +81,7 @@ const drawerBackdropStyle = tva({
 });
 
 const drawerContentStyle = tva({
-  base: 'bg-background-0 overflow-scroll border border-outline-100 p-6 absolute',
+  base: 'bg-background-0 overflow-scroll border-outline-100 p-6 absolute',
   parentVariants: {
     size: {
       sm: 'w-1/4',
@@ -90,10 +90,10 @@ const drawerContentStyle = tva({
       full: 'w-full',
     },
     anchor: {
-      left: 'h-full',
-      right: 'h-full',
-      top: 'w-full',
-      bottom: 'w-full',
+      left: 'h-full border-r',
+      right: 'h-full border-l',
+      top: 'w-full border-b',
+      bottom: 'w-full border-t',
     },
   },
   parentCompoundVariants: [

example/storybook-nativewind/src/core-components/nativewind/icon/index.web.tsx

@@ -1,3 +1,4 @@
+'use client';
 import React, { useMemo } from 'react';
 import { createIcon } from '@gluestack-ui/icon';
 import { tva } from '@gluestack-ui/nativewind-utils/tva';

example/storybook-nativewind/src/core-components/nativewind/slider/index.tsx

@@ -60,7 +60,7 @@ const sliderStyle = tva({
 });
 
 const sliderThumbStyle = tva({
-  base: 'bg-primary-500 absolute rounded-full data-[focus=true]:bg-primary-600 data-[active=true]:bg-primary-600 data-[hover=true]:bg-primary-600 data-[disabled=true]:bg-primary-500 web:cursor-pointer web:active:outline-4 web:active:outline web:active:outline-primary-400 data-[focus=true]:web:outline-4 data-[focus=true]:web:outline data-[focus=true]:web:outline-primary-400 shadow-hard-1',
+  base: 'bg-primary-500 absolute rounded-full data-[focus=true]:bg-primary-600 data-[active=true]:bg-primary-600 data-[hover=true]:bg-primary-600 data-[disabled=true]:bg-primary-500 web:cursor-pointer web:data-[active=true]:outline web:data-[active=true]:outline-4 web:data-[active=true]:outline-primary-400 shadow-hard-1',
 
   parentVariants: {
     size: {

packages/config/package.json

@@ -55,7 +55,7 @@
     "@gluestack-ui/menu": "0.2.37",
     "@gluestack-ui/modal": "0.1.35",
     "@gluestack-ui/overlay": "0.1.16",
-    "@gluestack-ui/popover": "0.1.42",
+    "@gluestack-ui/popover": "0.1.43",
     "@gluestack-ui/pressable": "0.1.17",
     "@gluestack-ui/progress": "0.1.18",
     "@gluestack-ui/provider": "0.1.13",
@@ -66,14 +66,14 @@
     "@gluestack-ui/switch": "0.1.23",
     "@gluestack-ui/tabs": "0.1.18",
     "@gluestack-ui/textarea": "0.1.24",
-    "@gluestack-ui/themed": "1.1.60",
+    "@gluestack-ui/themed": "1.1.61",
     "@gluestack-ui/toast": "1.0.8",
     "@gluestack-ui/tooltip": "0.1.35",
     "@legendapp/motion": "latest"
   },
   "peerDependencies": {
     "@gluestack-style/react": ">=1.0.57",
-    "@gluestack-ui/themed": ">=1.1.60"
+    "@gluestack-ui/themed": ">=1.1.61"
   },
   "release-it": {
     "git": {

packages/nativewind/utils/context/index.js → packages/nativewind/utils/context/index.jsx

@@ -2,5 +2,5 @@
 import { createContext, useContext } from 'react';
 export const ParentContext = createContext({});
 export const useParentContext = () => {
-    return useContext(ParentContext);
+  return useContext(ParentContext);
 };

packages/nativewind/utils/package.json

@@ -17,7 +17,7 @@
   "main": "index.js",
   "module": "index.js",
   "types": "index.d.ts",
-  "version": "1.0.25",
+  "version": "1.0.26-alpha.2",
   "react-native": "src/index",
   "source": "src/index",
   "scripts": {

packages/nativewind/utils/tsconfig.json

@@ -26,7 +26,7 @@
     "esModuleInterop": true,
     "importsNotUsedAsValues": "error",
     "forceConsistentCasingInFileNames": true,
-    "jsx": "react",
+    "jsx": "preserve",
     "lib": ["esnext", "dom"],
     "module": "esnext",
     "moduleResolution": "node",

packages/nativewind/utils/withStates/index.js → packages/nativewind/utils/withStates/index.jsx

@@ -9,10 +9,6 @@ export const withStates = (Component) =>
     }, [className, states]);
     return (
       // @ts-ignore
-      React.createElement(Component, {
-        className: classNamesFinal,
-        ...props,
-        ref: ref,
-      })
+      <Component className={classNamesFinal} {...props} ref={ref} />
     );
   });

packages/nativewind/utils/withStyleContext/index.jsx

@@ -0,0 +1,25 @@
+'use client';
+import React from 'react';
+import { ParentContext } from '../context';
+import { useParentContext } from '../context';
+export const withStyleContext = (Component, scope = 'Global') => {
+  return React.forwardRef(({ context, ...props }, ref) => {
+    let contextValues = {};
+    const parentContextValues = useParentContext();
+    if (parentContextValues[scope] !== undefined) {
+      parentContextValues[scope] = context;
+      contextValues = parentContextValues;
+    } else {
+      contextValues = { ...parentContextValues, [scope]: context };
+    }
+    return (
+      <ParentContext.Provider value={contextValues}>
+        <Component {...props} ref={ref} />
+      </ParentContext.Provider>
+    );
+  });
+};
+export const useStyleContext = (scope = 'Global') => {
+  const parentContextValues = useParentContext();
+  return parentContextValues[scope];
+};

packages/nativewind/utils/withStyleContextAndStates/index.jsx

@@ -0,0 +1,30 @@
+'use client';
+import React from 'react';
+import { extractDataClassName } from '../utils';
+import { ParentContext } from '../context';
+import { useParentContext } from '../context';
+export const withStyleContextAndStates = (Component, scope = 'Global') => {
+  return React.forwardRef(({ context, className, states, ...props }, ref) => {
+    let contextValues = {};
+    const parentContextValues = useParentContext();
+    if (parentContextValues[scope] !== undefined) {
+      parentContextValues[scope] = context;
+      contextValues = parentContextValues;
+    } else {
+      contextValues = { ...parentContextValues, [scope]: context };
+    }
+    const classNamesFinal = React.useMemo(() => {
+      if (!className) return;
+      return extractDataClassName(className, states);
+    }, [className, states]);
+    return (
+      <ParentContext.Provider value={contextValues}>
+        <Component className={classNamesFinal} {...props} ref={ref} />
+      </ParentContext.Provider>
+    );
+  });
+};
+export const useStyleContext = (scope = 'Global') => {
+  const parentContextValues = useParentContext();
+  return parentContextValues[scope];
+};

packages/themed/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @gluestack-ui/themed
 
+## 1.1.61
+
+### Patch Changes
+
+- Updated dependencies
+  - @gluestack-ui/popover@0.1.43
+
 ## 1.1.60
 
 ### Patch Changes

packages/themed/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gluestack-ui/themed",
-  "version": "1.1.60",
+  "version": "1.1.61",
   "main": "build/index.js",
   "types": "build/index.d.ts",
   "module": "build/index",
@@ -54,7 +54,7 @@
     "@gluestack-ui/menu": "0.2.37",
     "@gluestack-ui/modal": "0.1.35",
     "@gluestack-ui/overlay": "0.1.16",
-    "@gluestack-ui/popover": "0.1.42",
+    "@gluestack-ui/popover": "0.1.43",
     "@gluestack-ui/pressable": "0.1.17",
     "@gluestack-ui/progress": "0.1.18",
     "@gluestack-ui/provider": "0.1.13",

packages/unstyled/popover/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @gluestack-ui/popover
 
+## 0.1.43
+
+### Patch Changes
+
+- fix: removed unwanted key from popover
+
 ## 0.1.42
 
 ### Patch Changes

packages/unstyled/popover/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gluestack-ui/popover",
-  "version": "0.1.42",
+  "version": "0.1.43",
   "main": "lib/index",
   "module": "lib/index",
   "types": "lib/index.d.ts",

packages/unstyled/popover/src/PopoverArrow.tsx

@@ -36,7 +36,6 @@ const PopoverArrow = (StyledPopoverArrow: any) =>
             updateArrowSize({ height, width });
           }}
           {...props}
-          key={actualPlacement + 'arrow'}
           initial={{
             opacity: 0,
             y:

packages/unstyled/popover/src/PopoverContent.tsx

@@ -226,7 +226,6 @@ const PopoverContent = (StyledPopoverContent: any, AnimatePresence?: any) =>
                 collapsable={false}
                 {...dialogProps}
                 tabIndex={Platform.OS === 'web' ? -1 : undefined}
-                key={placement + calculatedPlacement}
                 initial={initialAnimatedStyles}
                 animate={animatedStyles}
                 exit={exitAnimatedStyles}

yarn.lock

@@ -2607,15 +2607,6 @@
   dependencies:
     "@legendapp/motion" "^2.2.0"
 
-"@gluestack-ui/[email protected]":
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/@gluestack-ui/button/-/button-1.0.7.tgz#513c42b895f285b527969f7dde9abc7f622d7905"
-  integrity sha512-6hz5BPoB+iHMpDvys6AbIpeRPbnFiqyE3SnnbKPSCj8lgl3Dr9sFln41BvDmqmZ98d0usJluk50rz8pVNRZRgw==
-  dependencies:
-    "@gluestack-ui/utils" "0.1.13"
-    "@react-native-aria/focus" "^0.2.9"
-    "@react-native-aria/interactions" "0.2.13"
-
 "@gluestack-ui/button@^0.1.15":
   version "0.1.34"
   resolved "https://registry.yarnpkg.com/@gluestack-ui/button/-/button-0.1.34.tgz#f635aba6a9023d153f5dd82cd96a3785b6244951"