@multiplatform.one/components 0.7.8 → 0.7.10

package/src/panels/SimplePopover/SimplePopover.stories.tsx

@@ -21,7 +21,7 @@
 
 import React, { useState } from 'react';
 import { SimplePopover } from './index';
-import { Text, YStack, XStack, Switch, Input, Label } from 'tamagui';
+import { Text, YStack, XStack, Switch, Input, Label, Button } from 'tamagui';
 import type { Meta } from '@storybook/react';
 
 const meta: Meta = {
@@ -31,9 +31,7 @@ const meta: Meta = {
 };
 
 export const main = () => (
-  <SimplePopover
-  // trigger={<Button>Click here to get a Popover</Button>}
-  >
+  <SimplePopover trigger={<Button>Click here to get a Popover</Button>}>
     <YStack>
       <Text>popover content</Text>
     </YStack>
@@ -41,10 +39,7 @@ export const main = () => (
 );
 
 export const closeOnHoverOut = () => (
-  <SimplePopover
-    // trigger={<Button>click here</Button>}
-    closeOnHoverOut
-  >
+  <SimplePopover trigger={<Button>click here</Button>} closeOnHoverOut>
     <YStack>
       <Text>popover content will close on hoverOut</Text>
     </YStack>
@@ -54,10 +49,11 @@ export const closeOnHoverOut = () => (
 function Open() {
   return (
     <SimplePopover
-      // trigger={<Button>hover on it to get Popover</Button>}
+      trigger={<Button>hover on it to get Popover</Button>}
       triggerOnHover
       arrow={false}
       triggerStyle={{ als: 'center', ai: 'center' }}
+      closeOnHoverOut
     >
       <YStack>
         {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((i) => (
@@ -81,11 +77,7 @@ const OnCondition = (props) => {
     <YStack space>
       <Label>change the switch to get popover</Label>
       <Switch checked={props.open} onCheckedChange={setOpen} />
-      <SimplePopover
-        open={open}
-        onOpenChange={setOpen}
-        // trigger={<Button>Popup will open here</Button>}
-      >
+      <SimplePopover open={open} onOpenChange={setOpen} trigger={<Button>Popup will open here</Button>}>
         <Text>Conditional popover</Text>
       </SimplePopover>
     </YStack>
@@ -94,34 +86,4 @@ const OnCondition = (props) => {
 
 export const openOnChangingTheCondition = (args) => <OnCondition {...args} />;
 
-const ConditionalPopover = () => {
-  const [open, setOpen] = useState(false);
-  const [inputVal, setInputVal] = useState('');
-
-  function handleInput(val) {
-    if (val === 'show') setOpen(true);
-    else setOpen(false);
-    setInputVal(val);
-  }
-
-  return (
-    <YStack space>
-      <SimplePopover
-        open={open}
-        onOpenChange={setOpen}
-        triggerElement={
-          <YStack>
-            <Input value={inputVal} onChangeText={handleInput} placeholder="type show to get popup" />
-          </YStack>
-        }
-        arrow={true}
-      >
-        <Text>Conditional popover</Text>
-      </SimplePopover>
-    </YStack>
-  );
-};
-
-export const openOnAnyCondition = (args) => <ConditionalPopover {...args} />;
-
 export default meta;

package/src/panels/SimplePopover/index.tsx

@@ -19,55 +19,22 @@
  * limitations under the License.
  */
 
-import type {
-  PopoverArrowProps,
-  PopoverContentProps,
-  PopoverProps,
-  PopoverTriggerProps,
-  StackProps,
-  TamaguiElement,
-  YStackProps,
-} from 'tamagui';
-import { Adapt, Popover, PopperAnchor, View, getState, useComposedRefs, usePopoverContext } from 'tamagui';
+import type { PopoverArrowProps, PopoverContentProps, PopoverProps, PopoverTriggerProps } from 'tamagui';
+import { Adapt, Popover } from 'tamagui';
 import React from 'react';
 import type { ReactNode } from 'react';
-import { YStack } from 'tamagui';
 
-export interface PopoverCustomProps {
+export type SimplePopoverProps = PopoverProps & {
   contentStyle?: PopoverContentProps;
   arrowStyle?: PopoverArrowProps;
-  triggerStyle?: YStackProps;
+  triggerStyle?: PopoverTriggerProps;
   triggerOnHover?: boolean;
   closeOnHoverOut?: boolean;
   arrow?: boolean;
   open?: boolean;
   setOpen?: (open: boolean) => void;
-}
-
-export interface PopoverOpen {
-  triggerElement: ReactNode;
-}
-
-export type ExclusiveTriggerProps = PopoverTriggerProps | PopoverOpen;
-
-export type SimplePopoverProps = PopoverProps & PopoverCustomProps & ExclusiveTriggerProps;
-
-export const SimplePopoverTrigger = React.forwardRef<TamaguiElement, StackProps>((props: StackProps, forwardedRef) => {
-  const context = usePopoverContext();
-  const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef);
-
-  const trigger = (
-    <View
-      aria-haspopup="dialog"
-      aria-expanded={context.open}
-      data-state={getState(context.open)}
-      {...props}
-      ref={composedTriggerRef}
-    />
-  );
-
-  return context.hasCustomAnchor ? trigger : <PopperAnchor asChild>{trigger}</PopperAnchor>;
-});
+  trigger: ReactNode;
+};
 
 export function SimplePopover({
   children,
@@ -77,30 +44,30 @@ export function SimplePopover({
   arrow = true,
   triggerOnHover,
   closeOnHoverOut,
+  trigger,
   ...props
 }: SimplePopoverProps) {
   const [open, setOpen] = React.useState(false);
-  const trigger = 'trigger' in props;
+
+  function handleHoverIn(e) {
+    if (!triggerOnHover) return;
+    setOpen(true);
+    if (contentStyle?.onHoverIn) contentStyle?.onHoverIn(e);
+    if (triggerStyle?.onHoverIn) triggerStyle.onHoverIn(e);
+  }
+
+  function handleHoverOut(e) {
+    if (!closeOnHoverOut) return;
+    setOpen(false);
+    if (contentStyle?.onHoverOut) contentStyle.onHoverOut(e);
+    if (triggerStyle?.onHoverOut) triggerStyle.onHoverOut(e);
+  }
 
   return (
     <Popover size="$5" allowFlip open={open} onOpenChange={setOpen} {...props}>
-      {trigger &&
-        props.trigger &&
-        ((
-          <Popover.Trigger asChild>
-            {triggerOnHover ? (
-              <YStack onHoverIn={() => setOpen(true)} onHoverOut={() => setOpen(false)} {...triggerStyle}>
-                {props.trigger}
-              </YStack>
-            ) : (
-              props.trigger
-            )}
-          </Popover.Trigger>
-        ) as any)}
-      {!trigger && 'triggerElement' in props && 'open' in props && (
-        <SimplePopoverTrigger asChild>{props.triggerElement}</SimplePopoverTrigger>
-      )}
-
+      <Popover.Trigger asChild {...triggerStyle} onHoverIn={handleHoverIn} onHoverOut={handleHoverOut}>
+        {trigger}
+      </Popover.Trigger>
       <Adapt when="sm" platform="touch">
         <Popover.Sheet modal dismissOnSnapToBottom>
           <Popover.Sheet.Frame padding="$4" onMouseEnter={() => setOpen(true)}>
@@ -130,10 +97,10 @@ export function SimplePopover({
             : undefined
         }
         elevate
-        onHoverIn={triggerOnHover ? () => setOpen(true) : undefined}
-        onHoverOut={triggerOnHover || closeOnHoverOut ? () => setOpen(false) : undefined}
         zi={9999999999}
         {...contentStyle}
+        onHoverIn={handleHoverIn}
+        onHoverOut={handleHoverOut}
       >
         {arrow && <Popover.Arrow borderWidth={1} borderColor="$borderColor" {...arrowStyle} />}
         {children}

package/types/index.d.ts

@@ -8,4 +8,5 @@ export * from './layouts';
 export * from './mdx';
 export * from './panels';
 export * from './table';
+export * from './organize';
 //# sourceMappingURL=index.d.ts.map

package/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAqBA,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC"}

package/types/panels/SimplePopover/SimplePopover.stories.d.ts

@@ -25,6 +25,5 @@ export declare const main: () => React.JSX.Element;
 export declare const closeOnHoverOut: () => React.JSX.Element;
 export declare const openOnHover: () => React.JSX.Element;
 export declare const openOnChangingTheCondition: (args: any) => React.JSX.Element;
-export declare const openOnAnyCondition: (args: any) => React.JSX.Element;
 export default meta;
 //# sourceMappingURL=SimplePopover.stories.d.ts.map

package/types/panels/SimplePopover/SimplePopover.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SimplePopover.stories.d.ts","sourceRoot":"","sources":["../../../src/panels/SimplePopover/SimplePopover.stories.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAE7C,QAAA,MAAM,IAAI,EAAE,IAIX,CAAC;AAEF,eAAO,MAAM,IAAI,yBAQhB,CAAC;AAEF,eAAO,MAAM,eAAe,yBAS3B,CAAC;AAmBF,eAAO,MAAM,WAAW,yBAKvB,CAAC;AAmBF,eAAO,MAAM,0BAA0B,kCAAsC,CAAC;AA8B9E,eAAO,MAAM,kBAAkB,kCAA6C,CAAC;AAE7E,eAAe,IAAI,CAAC"}
+{"version":3,"file":"SimplePopover.stories.d.ts","sourceRoot":"","sources":["../../../src/panels/SimplePopover/SimplePopover.stories.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAE7C,QAAA,MAAM,IAAI,EAAE,IAIX,CAAC;AAEF,eAAO,MAAM,IAAI,yBAMhB,CAAC;AAEF,eAAO,MAAM,eAAe,yBAM3B,CAAC;AAoBF,eAAO,MAAM,WAAW,yBAKvB,CAAC;AAeF,eAAO,MAAM,0BAA0B,kCAAsC,CAAC;AAE9E,eAAe,IAAI,CAAC"}

package/types/panels/SimplePopover/index.d.ts

@@ -18,26 +18,19 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import type { PopoverArrowProps, PopoverContentProps, PopoverProps, PopoverTriggerProps, TamaguiElement, YStackProps } from 'tamagui';
+import type { PopoverArrowProps, PopoverContentProps, PopoverProps, PopoverTriggerProps } from 'tamagui';
 import React from 'react';
 import type { ReactNode } from 'react';
-export interface PopoverCustomProps {
+export type SimplePopoverProps = PopoverProps & {
     contentStyle?: PopoverContentProps;
     arrowStyle?: PopoverArrowProps;
-    triggerStyle?: YStackProps;
+    triggerStyle?: PopoverTriggerProps;
     triggerOnHover?: boolean;
     closeOnHoverOut?: boolean;
     arrow?: boolean;
     open?: boolean;
     setOpen?: (open: boolean) => void;
-}
-export interface PopoverOpen {
-    triggerElement: ReactNode;
-}
-export type ExclusiveTriggerProps = PopoverTriggerProps | PopoverOpen;
-export type SimplePopoverProps = PopoverProps & PopoverCustomProps & ExclusiveTriggerProps;
-export declare const SimplePopoverTrigger: React.ForwardRefExoticComponent<Omit<import("react-native").ViewProps, "style" | "display" | "children" | ("onLayout" | keyof import("react-native").GestureResponderHandlers)> & import("@tamagui/web").ExtendBaseStackProps & import("@tamagui/web").WebOnlyPressEvents & import("@tamagui/web").TamaguiComponentPropsBaseBase & {
-    style?: import("@tamagui/web").StyleProp<import("react-native").ViewStyle | React.CSSProperties | (React.CSSProperties & import("react-native").ViewStyle)>;
-} & import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase>> & import("@tamagui/web").PseudoProps<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase>>> & import("@tamagui/web").MediaProps<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase>> & import("@tamagui/web").PseudoProps<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase> & import("@tamagui/web").WithShorthands<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStylePropsBase>>>> & React.RefAttributes<TamaguiElement>>;
-export declare function SimplePopover({ children, contentStyle, triggerStyle, arrowStyle, arrow, triggerOnHover, closeOnHoverOut, ...props }: SimplePopoverProps): React.JSX.Element;
+    trigger: ReactNode;
+};
+export declare function SimplePopover({ children, contentStyle, triggerStyle, arrowStyle, arrow, triggerOnHover, closeOnHoverOut, trigger, ...props }: SimplePopoverProps): React.JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/types/panels/SimplePopover/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/panels/SimplePopover/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,KAAK,EACV,iBAAiB,EACjB,mBAAmB,EACnB,YAAY,EACZ,mBAAmB,EAEnB,cAAc,EACd,WAAW,EACZ,MAAM,SAAS,CAAC;AAEjB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,WAAW,kBAAkB;IACjC,YAAY,CAAC,EAAE,mBAAmB,CAAC;IACnC,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAC/B,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACnC;AAED,MAAM,WAAW,WAAW;IAC1B,cAAc,EAAE,SAAS,CAAC;CAC3B;AAED,MAAM,MAAM,qBAAqB,GAAG,mBAAmB,GAAG,WAAW,CAAC;AAEtE,MAAM,MAAM,kBAAkB,GAAG,YAAY,GAAG,kBAAkB,GAAG,qBAAqB,CAAC;AAE3F,eAAO,MAAM,oBAAoB;;u9BAe/B,CAAC;AAEH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,KAAY,EACZ,cAAc,EACd,eAAe,EACf,GAAG,KAAK,EACT,EAAE,kBAAkB,qBA8DpB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/panels/SimplePopover/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,KAAK,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAEzG,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,kBAAkB,GAAG,YAAY,GAAG;IAC9C,YAAY,CAAC,EAAE,mBAAmB,CAAC;IACnC,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAC/B,YAAY,CAAC,EAAE,mBAAmB,CAAC;IACnC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAClC,OAAO,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,KAAY,EACZ,cAAc,EACd,eAAe,EACf,OAAO,EACP,GAAG,KAAK,EACT,EAAE,kBAAkB,qBA6DpB"}