@clicktap/ui 0.14.16 → 0.14.18

package/components/ContextMenu/ContextMenu.types.d.ts

@@ -3,7 +3,7 @@ import { Dispatch, Key, SetStateAction, ReactNode } from 'react';
 import { MotionStyle } from 'framer-motion';
 import { SlotsToClasses } from '../../types/SlotsToClasses';
 type ContextMenuAnimationState = 'unmounted' | 'hidden' | 'visible';
-export interface PopoverProps extends Omit<AriaPopoverProps, 'children' | 'style'> {
+export interface PopoverProps extends Omit<AriaPopoverProps, 'children' | 'style' | 'onAnimationStart'> {
     animation: ContextMenuAnimationState;
     children: ReactNode;
     onAction?: (key: Key) => void;

package/components/ContextMenu/ContextMenu.types.ts

@@ -6,7 +6,7 @@ import type { SlotsToClasses } from '../../types/SlotsToClasses';
 type ContextMenuAnimationState = 'unmounted' | 'hidden' | 'visible';
 
 export interface PopoverProps
-  extends Omit<AriaPopoverProps, 'children' | 'style'> {
+  extends Omit<AriaPopoverProps, 'children' | 'style' | 'onAnimationStart'> {
   animation: ContextMenuAnimationState;
   children: ReactNode;
   onAction?: (key: Key) => void;

package/components/Dialog/Dialog.types.d.ts

@@ -1,7 +1,7 @@
 import { Key } from 'react';
 import { DialogProps as UIDialogProps } from 'react-aria-components';
 import { MotionStyle, Variants } from 'framer-motion';
-export type DialogProps = UIDialogProps & {
+export type DialogProps = Omit<UIDialogProps, 'onAnimationStart'> & {
     key?: Key;
     style?: MotionStyle;
     animationVariants?: Variants;

package/components/Dialog/Dialog.types.ts

@@ -2,7 +2,7 @@ import type { Key } from 'react';
 import type { DialogProps as UIDialogProps } from 'react-aria-components';
 import { MotionStyle, Variants } from 'framer-motion';
 
-export type DialogProps = UIDialogProps & {
+export type DialogProps = Omit<UIDialogProps, 'onAnimationStart'> & {
   key?: Key;
   style?: MotionStyle;
   animationVariants?: Variants;

package/components/Drawer/Drawer.types.d.ts

@@ -1,7 +1,7 @@
 import { Key } from 'react';
 import { DialogProps } from 'react-aria-components';
 import { MotionStyle, Variants } from 'framer-motion';
-export type DrawerProps = DialogProps & {
+export type DrawerProps = Omit<DialogProps, 'onAnimationStart'> & {
     direction?: 'top' | 'right' | 'bottom' | 'left';
     key?: Key;
     style?: MotionStyle;

package/components/Drawer/Drawer.types.ts

@@ -2,7 +2,7 @@ import type { Key } from 'react';
 import type { DialogProps } from 'react-aria-components';
 import type { MotionStyle, Variants } from 'framer-motion';
 
-export type DrawerProps = DialogProps & {
+export type DrawerProps = Omit<DialogProps, 'onAnimationStart'> & {
   direction?: 'top' | 'right' | 'bottom' | 'left';
   key?: Key;
   style?: MotionStyle;

package/components/ModalOverlay/ModalOverlay.js

@@ -1 +1 @@
-import{jsx as o}from"react/jsx-runtime";import{forwardRef as u,useId as v}from"react";import{ModalOverlay as h}from"react-aria-components";import{motion as y,AnimatePresence as b}from"framer-motion";import{useDialogTrigger as x}from"../DialogTrigger/DialogTrigger.js";import{cn as M}from"../../utils/cn.js";const O=u(({style:i,...r},e)=>o(h,{...r,ref:e,style:i})),g=y.create(O);function a({animate:i,animation:r,setAnimation:e,className:t,animationVariants:d,children:l,...s}){const m=v(),{key:c,...f}=s;return o(g,{isExiting:r==="hidden",onAnimationComplete:p=>{e(n=>p==="hidden"&&n==="hidden"?"unmounted":n)},variants:d||{hidden:{opacity:0,backdropFilter:"blur(0px)",transition:{delay:.08}},visible:{opacity:1,backdropFilter:"blur(8px)"}},initial:"hidden",animate:i,exit:"hidden",className:M("bg-black/30","fixed top-0 left-0","z-50","w-screen h-[var(--visual-viewport-height)]",t),...f,children:l},c||m)}function j(i){const{isOpen:r}=i,{animation:e,setAnimation:t}=x();return r!==void 0?o(b,{children:r&&o(a,{...i,animate:"visible",animation:e,setAnimation:t})}):o(a,{...i,animate:e,animation:e,setAnimation:t})}export{j as ModalOverlay,j as default};
+import{jsx as o}from"react/jsx-runtime";import{forwardRef as p,useId as v}from"react";import{ModalOverlay as y}from"react-aria-components";import{motion as h,AnimatePresence as b}from"framer-motion";import{useDialogTrigger as x}from"../DialogTrigger/DialogTrigger.js";import{cn as M}from"../../utils/cn.js";const O=p(({style:i,...e},t)=>{const n=typeof i=="function"?i(e):i;return o(y,{...e,ref:t,style:n})}),g=h.create(O);function a({animate:i,animation:e,setAnimation:t,className:n,animationVariants:d,children:l,...m}){const s=v(),{key:c,...f}=m;return o(g,{isExiting:e==="hidden",onAnimationComplete:u=>{t(r=>u==="hidden"&&r==="hidden"?"unmounted":r)},variants:d||{hidden:{opacity:0,backdropFilter:"blur(0px)",transition:{delay:.08}},visible:{opacity:1,backdropFilter:"blur(8px)"}},initial:"hidden",animate:i,exit:"hidden",className:M("bg-black/30","fixed top-0 left-0","z-50","w-screen h-[var(--visual-viewport-height)]",n),...f,children:l},c||s)}function j(i){const{isOpen:e}=i,{animation:t,setAnimation:n}=x();return e!==void 0?o(b,{children:e&&o(a,{...i,animate:"visible",animation:t,setAnimation:n})}):o(a,{...i,animate:t,animation:t,setAnimation:n})}export{j as ModalOverlay,j as default};

package/components/ModalOverlay/ModalOverlay.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { forwardRef, useId } from 'react';
-import type { CSSProperties, Dispatch, ReactNode, SetStateAction } from 'react';
+import type { Dispatch, ReactNode, Ref, SetStateAction } from 'react';
 import { ModalOverlay as UIModalOverlay } from 'react-aria-components';
 import { AnimatePresence, motion } from 'framer-motion';
 import { useDialogTrigger } from '../DialogTrigger/DialogTrigger';
@@ -10,16 +10,17 @@ import type { DriverAnimationState } from '../DialogTrigger/DialogTrigger.types'
 import { cn } from '../../utils/cn';
 import type { ModalOverlayProps } from './ModalOverlay.types';
 
-const ForwardedModalOverlay = forwardRef<HTMLDivElement, ModalOverlayProps>(
-  ({ style, ...props }, ref) => {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const ForwardedModalOverlay = forwardRef<HTMLElement, any>(
+  ({ style, ...props }, ref: Ref<HTMLElement>) => {
+    // Separate the dynamic style logic
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call
+    const ariaStyle = typeof style === 'function' ? style(props) : style;
+
     return (
       // Pass only static styles to framer-motion
-      <UIModalOverlay
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-        ref={ref}
-        style={style as CSSProperties}
-      />
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, react/jsx-props-no-spreading
+      <UIModalOverlay {...props} ref={ref} style={ariaStyle} />
     );
   }
 );

package/components/ModalOverlay/ModalOverlay.types.d.ts

@@ -1,7 +1,7 @@
 import { Key, ReactNode } from 'react';
 import { ModalOverlayProps as UiModalOverlayProps, ModalRenderProps } from 'react-aria-components';
 import { MotionStyle, Variant } from 'framer-motion';
-export interface ModalOverlayProps extends Omit<UiModalOverlayProps, 'children' | 'style'> {
+export interface ModalOverlayProps extends Omit<UiModalOverlayProps, 'children' | 'style' | 'onAnimationStart'> {
     key?: Key;
     style?: MotionStyle;
     animationVariants?: {

package/components/ModalOverlay/ModalOverlay.types.ts

@@ -6,7 +6,7 @@ import type {
 import type { MotionStyle, Variant } from 'framer-motion';
 
 export interface ModalOverlayProps
-  extends Omit<UiModalOverlayProps, 'children' | 'style'> {
+  extends Omit<UiModalOverlayProps, 'children' | 'style' | 'onAnimationStart'> {
   key?: Key;
   style?: MotionStyle;
   animationVariants?: { visible: Variant; hidden: Variant };

package/components/Select/Select.tsx

@@ -269,3 +269,4 @@ interface SelectComponent {
 export const Select = forwardRef(SelectInner) as SelectComponent;
 
 export default Select;
+

package/components/ToggleButton/ToggleButton.stories.tsx

@@ -37,10 +37,10 @@ export const Example: Story = {
     autoFocus: {
       control: 'boolean',
     },
-    type: {
-      options: ['button', 'submit', 'reset'],
-      control: { type: 'radio' },
-    },
+    // type: {
+    //   options: ['button', 'submit', 'reset'],
+    //   control: { type: 'radio' },
+    // },
     excludeFromTabOrder: {
       control: 'boolean',
     },
@@ -73,7 +73,7 @@ export const Example: Story = {
     autoFocus: false,
     defaultSelected: false,
     excludeFromTabOrder: false,
-    type: 'button',
+    // type: 'button',
     children: 'Press me',
     onPress: action('onPress'),
     onPressStart: action('onPressStart'),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clicktap/ui",
-  "version": "0.14.16",
+  "version": "0.14.18",
   "private": false,
   "author": "Clicktap",
   "description": "A library of React UI components and low-level hooks.",

package/components/Tabs/Tabs.context.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-export declare const TabsOrientationContext: import('react').Context<import('react-aria').Orientation | undefined>;
-export default TabsOrientationContext;