@clicktap/ui 0.14.14 → 0.14.16

package/components/ModalOverlay/ModalOverlay.js

@@ -1 +1 @@
-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};
+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};

package/components/ModalOverlay/ModalOverlay.tsx

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

package/components/Select/Select.d.ts

@@ -1,3 +1,9 @@
+import { ForwardedRef } from 'react';
 import { SelectProps } from './Select.types';
-export declare function Select<T extends object>({ label, description, errorMessage, children, placeholder, key, isLoading, slots, popoverPortalContainer, popoverOffset, selectedKey, className, classNames, ...props }: SelectProps<T>): import("react/jsx-runtime").JSX.Element;
+interface SelectComponent {
+    <T extends object>(props: SelectProps<T> & {
+        ref?: ForwardedRef<HTMLInputElement>;
+    }): JSX.Element;
+}
+export declare const Select: SelectComponent;
 export default Select;

package/components/Select/Select.js

@@ -1 +1 @@
-import{jsx as e,jsxs as v,Fragment as O}from"react/jsx-runtime";import{Popover as S,ComboBox as I,Label as P,Input as j,Button as m,Text as A,FieldError as D,ListBox as E}from"react-aria-components";import{forwardRef as F,useState as g}from"react";import{motion as M}from"framer-motion";import{cn as o}from"../../utils/cn.js";import{Pulse as T}from"../Loader/Pulse.js";const R=F((d,i)=>e(S,{...d,ref:i})),U=M.create(R);function W({buttonIcon:d,...i}){return d?typeof d=="function"?d(i):d:e("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:o("transition-all ease-in-out duration-200",i.isOpen?"rotate-180":"rotate-0"),children:e("path",{d:"M6 9L12 15L18 9",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:o(["stroke-slate-900",i.isDisabled&&"stroke-slate-400",i.isInvalid&&"stroke-red-500"])})})}function q({listBoxComponent:d,children:i,...r}){return e(d||E,{...r,children:i})}function X({label:d,description:i,errorMessage:r,children:u,placeholder:w,key:C,isLoading:a,slots:n,popoverPortalContainer:B,popoverOffset:_,selectedKey:x,className:c,classNames:t,...b}){const[l,f]=g("unmounted"),[h,k]=g(!1);return e(I,{onOpenChange:()=>{f(l==="visible"?"hidden":"visible"),k(!h)},isDisabled:b.isDisabled||a,"data-has-value":!!x,selectedKey:x,...b,className:o("flex flex-col","w-full",c),children:y=>v(O,{children:[e(P,{className:o("flex","text-xs text-slate-500",t==null?void 0:t.label),children:d}),v("div",{className:o("flex","relative","w-full",t==null?void 0:t.comboBoxContainer),children:[e(j,{placeholder:w,className:o("border border-solid border-slate-300","text-sm text-slate-900","py-0 px-2","h-10 w-full","m-0","rounded-md","bg-white","transition-all ease-in-out duration-200","data-[hovered]:border-slate-400","data-[focused]:border-slate-400 data-[focused]:outline data-[focused]:outline-2 data-[focused]:outline-slate-200"," data-[disabled]:bg-slate-100 data-[disabled]:border-slate-300",a?"data-[disabled]:text-slate-900":"data-[disabled]:text-slate-500","data-[invalid]:border-red-500 data-[invalid]:bg-red-100 data-[invalid]:text-red-600","data-[invalid]:data-[hovered]:border-red-600","data-[invalid]:data-[focused]:border-red-600 data-[invalid]:data-[focused]:outline data-[invalid]:data-[focused]:outline-2 data-[invalid]:data-[focused]:outline-red-200","data-[invalid]:placeholder:text-slate-400",t==null?void 0:t.input)}),a?e("div",{className:o("absolute top-2 right-2","block",t==null?void 0:t.loader),children:(n==null?void 0:n.loadingIcon)||e(T,{})}):e(m,{className:o("absolute top-2 right-0","block","border-none","bg-none",t==null?void 0:t.arrowButton),children:e(W,{buttonIcon:n==null?void 0:n.buttonIcon,...y})})]}),i&&e(A,{slot:"description",className:o("flex","text-xs","text-slate-500",t==null?void 0:t.description),children:i}),e(D,{className:o("flex","text-xs","text-red-500",t==null?void 0:t.errorMessage),children:r}),e(U,{isOpen:h,isExiting:l==="hidden",offset:_,UNSTABLE_portalContainer:B,onAnimationComplete:L=>{f(p=>L==="hidden"&&p==="hidden"?"unmounted":p)},variants:{hidden:{opacity:0,y:-10},visible:{opacity:1,y:0}},initial:"hidden",animate:l,className:o("px-0 py-1.5","shadow-[0_10px_15px_-3px_rgba(0,0,0,0.1),0_4px_6px_-4px_rgba(0,0,0,0.1)]","rounded-md","w-[var(--trigger-width)]","bg-white","border border-solid border-slate-300",t==null?void 0:t.listContainer),children:e(q,{listBoxComponent:n==null?void 0:n.listBoxComponent,className:o("max-h-80","overflow-y-scroll",t==null?void 0:t.list),children:u})},C)]})})}export{X as Select,X as default};
+import{jsx as e,jsxs as v,Fragment as P}from"react/jsx-runtime";import{Popover as j,ComboBox as m,Label as A,Input as D,Button as E,Text as F,FieldError as M,ListBox as T}from"react-aria-components";import{forwardRef as w,useState as g}from"react";import{motion as R}from"framer-motion";import{cn as o}from"../../utils/cn.js";import{Pulse as U}from"../Loader/Pulse.js";const W=w((d,i)=>e(j,{...d,ref:i})),q=R.create(W);function z({buttonIcon:d,...i}){return d?typeof d=="function"?d(i):d:e("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:o("transition-all ease-in-out duration-200",i.isOpen?"rotate-180":"rotate-0"),children:e("path",{d:"M6 9L12 15L18 9",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:o(["stroke-slate-900",i.isDisabled&&"stroke-slate-400",i.isInvalid&&"stroke-red-500"])})})}function G({listBoxComponent:d,children:i,...r}){return e(d||T,{...r,children:i})}function H({label:d,description:i,errorMessage:r,children:u,placeholder:C,key:B,isLoading:a,slots:n,popoverPortalContainer:c,popoverOffset:_,selectedKey:x,className:k,classNames:t,autoComplete:y,...b},L){const[l,f]=g("unmounted"),[h,S]=g(!1);return e(m,{onOpenChange:()=>{f(l==="visible"?"hidden":"visible"),S(!h)},isDisabled:b.isDisabled||a,"data-has-value":!!x,selectedKey:x,...b,className:o("flex flex-col","w-full",k),children:I=>v(P,{children:[e(A,{className:o("flex","text-xs text-slate-500",t==null?void 0:t.label),children:d}),v("div",{className:o("flex","relative","w-full",t==null?void 0:t.comboBoxContainer),children:[e(D,{placeholder:C,className:o("border border-solid border-slate-300","text-sm text-slate-900","py-0 px-2","h-10 w-full","m-0","rounded-md","bg-white","transition-all ease-in-out duration-200","data-[hovered]:border-slate-400","data-[focused]:border-slate-400 data-[focused]:outline data-[focused]:outline-2 data-[focused]:outline-slate-200"," data-[disabled]:bg-slate-100 data-[disabled]:border-slate-300",a?"data-[disabled]:text-slate-900":"data-[disabled]:text-slate-500","data-[invalid]:border-red-500 data-[invalid]:bg-red-100 data-[invalid]:text-red-600","data-[invalid]:data-[hovered]:border-red-600","data-[invalid]:data-[focused]:border-red-600 data-[invalid]:data-[focused]:outline data-[invalid]:data-[focused]:outline-2 data-[invalid]:data-[focused]:outline-red-200","data-[invalid]:placeholder:text-slate-400",t==null?void 0:t.input),ref:L,autoComplete:y}),a?e("div",{className:o("absolute top-2 right-2","block",t==null?void 0:t.loader),children:(n==null?void 0:n.loadingIcon)||e(U,{})}):e(E,{className:o("absolute top-2 right-0","block","border-none","bg-none",t==null?void 0:t.arrowButton),children:e(z,{buttonIcon:n==null?void 0:n.buttonIcon,...I})})]}),i&&e(F,{slot:"description",className:o("flex","text-xs","text-slate-500",t==null?void 0:t.description),children:i}),e(M,{className:o("flex","text-xs","text-red-500",t==null?void 0:t.errorMessage),children:r}),e(q,{isOpen:h,isExiting:l==="hidden",offset:_,UNSTABLE_portalContainer:c,onAnimationComplete:O=>{f(p=>O==="hidden"&&p==="hidden"?"unmounted":p)},variants:{hidden:{opacity:0,y:-10},visible:{opacity:1,y:0}},initial:"hidden",animate:l,className:o("px-0 py-1.5","shadow-[0_10px_15px_-3px_rgba(0,0,0,0.1),0_4px_6px_-4px_rgba(0,0,0,0.1)]","rounded-md","w-[var(--trigger-width)]","bg-white","border border-solid border-slate-300",t==null?void 0:t.listContainer),children:e(G,{listBoxComponent:n==null?void 0:n.listBoxComponent,className:o("max-h-80","overflow-y-scroll",t==null?void 0:t.list),children:u})},B)]})})}const $=w(H);export{$ as Select,$ as default};

package/components/Select/Select.tsx

@@ -12,7 +12,7 @@ import {
 } from 'react-aria-components';
 import type { ComboBoxRenderProps, ListBoxProps } from 'react-aria-components';
 import { forwardRef, useState } from 'react';
-import type { PropsWithChildren, Ref } from 'react';
+import type { ForwardedRef, Ref } from 'react';
 import { motion } from 'framer-motion';
 import { cn } from '../../utils/cn';
 import { Pulse } from '../Loader';
@@ -85,22 +85,28 @@ function ListBoxSlot<T extends object>({
   );
 }
 
-export function Select<T extends object>({
-  label,
-  description,
-  errorMessage,
-  children,
-  placeholder,
-  key,
-  isLoading,
-  slots,
-  popoverPortalContainer,
-  popoverOffset,
-  selectedKey,
-  className,
-  classNames,
-  ...props
-}: SelectProps<T>) {
+// Internal component - necessary to preserve generics in children
+// i.e. <Select items={[{id: 'test', value: 'test'}]}.../> won't reference "any"
+function SelectInner<T extends object>(
+  {
+    label,
+    description,
+    errorMessage,
+    children,
+    placeholder,
+    key,
+    isLoading,
+    slots,
+    popoverPortalContainer,
+    popoverOffset,
+    selectedKey,
+    className,
+    classNames,
+    autoComplete,
+    ...props
+  }: SelectProps<T>,
+  ref: ForwardedRef<HTMLInputElement>
+) {
   const [animation, setAnimation] =
     useState<ComboBoxPopoverAnimationState>('unmounted');
   const [isComboOpen, setIsComboOpen] = useState<boolean>(false);
@@ -156,6 +162,8 @@ export function Select<T extends object>({
                 'data-[invalid]:placeholder:text-slate-400',
                 classNames?.input
               )}
+              ref={ref}
+              autoComplete={autoComplete}
             />
             {isLoading ? (
               <div
@@ -250,4 +258,14 @@ export function Select<T extends object>({
   );
 }
 
+// Type for the exported component that preserves generics
+interface SelectComponent {
+  <T extends object>(
+    props: SelectProps<T> & { ref?: ForwardedRef<HTMLInputElement> }
+  ): JSX.Element;
+}
+
+// Create the forwarded component with proper typing
+export const Select = forwardRef(SelectInner) as SelectComponent;
+
 export default Select;

package/components/Select/Select.types.d.ts

@@ -1,5 +1,5 @@
 import { ComboBoxRenderProps, ComboBoxProps as AriaComboBoxProps, ValidationResult, ListBoxProps } from 'react-aria-components';
-import { ComponentType, Key, ReactNode } from 'react';
+import { ComponentType, HTMLInputAutoCompleteAttribute, Key, ReactNode } from 'react';
 import { SlotsToClasses } from '../../types/SlotsToClasses';
 export type ComboBoxPopoverAnimationState = 'unmounted' | 'hidden' | 'visible';
 export type SelectSlots<T extends object> = {
@@ -19,4 +19,5 @@ export interface SelectProps<T extends object> extends Omit<AriaComboBoxProps<T>
     popoverOffset?: number;
     popoverPortalContainer?: Element;
     classNames?: SlotsToClasses<'label' | 'name' | 'comboBoxContainer' | 'input' | 'loader' | 'arrowButton' | 'description' | 'errorMessage' | 'listContainer' | 'list'>;
+    autoComplete?: HTMLInputAutoCompleteAttribute;
 }

package/components/Select/Select.types.ts

@@ -4,7 +4,12 @@ import type {
   ValidationResult,
   ListBoxProps,
 } from 'react-aria-components';
-import type { ComponentType, Key, ReactNode } from 'react';
+import type {
+  ComponentType,
+  HTMLInputAutoCompleteAttribute,
+  Key,
+  ReactNode,
+} from 'react';
 import type { SlotsToClasses } from '../../types/SlotsToClasses';
 
 export type ComboBoxPopoverAnimationState = 'unmounted' | 'hidden' | 'visible';
@@ -39,4 +44,5 @@ export interface SelectProps<T extends object>
     | 'listContainer'
     | 'list'
   >;
+  autoComplete?: HTMLInputAutoCompleteAttribute;
 }

package/package.json

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