UNPKG

@snowball-tech/fractal

Version:

Fractal's (Snowball's design system) React component library based on RadixUI and PandaCSS

3 lines 5.12 kB
'use client'; import{a as r,b as H}from"./chunk-7QJN26FN.js";import{f as V}from"./chunk-4JB6HFZC.js";import{d as k}from"./chunk-RA5E6SMO.js";import{a as D}from"./chunk-UC7BXZ7T.js";import{b as e}from"./chunk-CMFNILWJ.js";import{a as s,b as N}from"./chunk-KHPUS472.js";import*as a from"@radix-ui/react-popover";import*as n from"@radix-ui/react-scroll-area";import{UilTimes as re}from"@tooni/iconscout-unicons-react";import{forwardRef as oe,useEffect as te,useImperativeHandle as ae,useRef as S,useState as le}from"react";import b from"lodash/fp/isFunction";import ie from"lodash/fp/isNumber";import U from"lodash/fp/omit";import{jsx as t,jsxs as C}from"react/jsx-runtime";var W=oe(({align:q,children:x,closeButtonLabel:B="Close",disabled:p=!1,elevation:j=H,fullWidth:z=!1,modal:G=!1,onClose:A,onCloseButtonClick:X,onInteractOutside:E,onOpen:T,onOpenChange:I,open:f,popover:w={},side:Y,toggleOnTriggerClick:d=!0,toggleOnTriggerHover:F=!1,trigger:L,triggerAsButton:M=!0,width:l="fit",withArrow:J=!0,withCloseButton:K=!1,withScroll:O=!0,...m},Q)=>{let $=S(null),Z=S(null),R=S(null);ae(Q,()=>({get container(){return $?.current??null},get content(){return R?.current??null},get trigger(){return Z?.current??null}}));let v=!!L,c=v,h=!!x,[_,P]=le(f===!0||!c&&h&&f!==!1),y=o=>{if(p)return;let i=_;P(o),b(I)&&i!==o&&I(o),!i&&o&&b(T)&&T(),i&&!o&&b(A)&&A()};te(()=>{y(!!(f===!0||!c&&h&&f!==!1))},[h,c,f]);let ee=o=>{let{target:i}=o;i===window||i===null||i===void 0||(($?.current?.contains(i)||R?.current?.contains(i))&&o.preventDefault(),b(E)&&E(o))},u="max-w-[var(--radix-popper-available-width)]",g={};if(ie(l))g={minWidth:`${l}px`,width:`${l}px`};else if(l.startsWith("*"))if(v){let o=l.slice(1);g={minWidth:`calc(${o} * var(--radix-popper-anchor-width))`,width:`calc(${o} * var(--radix-popper-anchor-width))`}}else u="w-fit",console.warn("The `width` prop is set to a fraction but no `trigger` is provided! Falling back to `auto` (which will fit the content)...");else{switch(l){case"fit":{u="w-fit";break}case"full":{u="w-[var(--radix-popper-available-width)]";break}default:{u=v?'w-[var(--radix-popper-anchor-width,"100%")] min-w-fit':"w-fit";break}}l==="trigger"&&!v&&console.warn("The `width` prop is set to `trigger` but no `trigger` is provided! Falling back to `auto` (which will fit the content)...")}return t("div",{ref:$,className:N(`${e}-${r}`,_?`${e}-${r}--opened`:`${e}-${r}--closed`,p?`${e}-${r}--disabled`:"",z?`${e}-${r}--full-width`:"sm:w-fit",m.className),...U(["className"],m),children:C(a.Root,{...p?{open:!1}:{open:_},modal:G,onOpenChange:y,children:[t(a.Trigger,{asChild:c,className:s(`${e}-${r}__trigger`,"appearance-none border-none bg-unset px-unset py-unset text-left text-color-unset outline-none",l==="fit"||l==="full"?"":"max-w-[var(--radix-dropdown-menu-content-available-width)]",c?"flex items-center":"invisible h-0 max-h-0 border-y-0 py-0",p?`${e}-${r}__trigger--disabled cursor-default text-disabled`:"!cursor-pointer",d?"":"!cursor-default"),type:d?"button":void 0,children:c&&t(D,{className:s(`${e}-${r}__trigger__content`,"w-full",p?`${e}-${r}__trigger__content--disabled`:""),disabled:M&&!d,element:d&&M?"button":"div",onClick:o=>{d||(o.preventDefault(),o.stopPropagation())},onMouseEnter:F?()=>P(!0):void 0,onMouseLeave:F?()=>P(!1):void 0,children:L})}),t(a.Portal,{children:_&&t(a.Content,{ref:R,align:q,asChild:!0,className:N(`${e}-${r}__popover`,'pointer-events-auto relative z-50 data-[side="bottom"]:mt-1 data-[side="left"]:mr-1 data-[side="right"]:ml-1 data-[side="top"]:mb-1',u,h?"":`${e}-${r}__popover--empty invisible`,w?.className),side:Y,style:{display:void 0,...g,...w.style},onInteractOutside:ee,...U(["align","asChild","className","side","style","onInteractOutside"],w),children:C(k,{className:"relative",elevation:j,children:[K&&t(a.Close,{asChild:!0,className:s(`${e}-${r}__close`),children:t("div",{className:"flex justify-end text-right",children:t(V,{icon:t(re,{}),iconOnly:!0,label:B,variant:"text",onClick:X})})}),O?C(n.Root,{className:`${e}-${r}__popover__scrollarea`,...m.dir===void 0?{}:{dir:m.dir},type:"hover",children:[t(n.Viewport,{className:s(`${e}-${r}__popover__scrollarea__viewport`,`relative h-full max-h-[calc(var(--radix-popper-available-height)-theme(spacing.4))] w-full overflow-auto [&:has(+_.${e}-${r}__popover__scrollarea__scrollbar--y)]:w-[calc(100%-theme(spacing.1)+theme(spacing.quarter))]`),style:{overflowY:void 0},children:x}),t(n.Scrollbar,{className:s(`${e}-${r}__popover__scrollarea__scrollbar--y`,'[data-orientation="vertical"]:w-1 flex touch-none select-none rounded-r-sm bg-grey-90 p-quarter transition-background-color duration-300 ease-out hover:bg-grey-70'),orientation:"vertical",children:t(n.Thumb,{className:s(`${e}-${r}__popover__scrollarea__scrollbar--y__thumb`,"before:l-1/2 relative !w-half flex-1 rounded-sm bg-grey-30 before:absolute before:top-1/2 before:h-full before:min-h-[44px] before:w-full before:min-w-[44px] before:-translate-x-1/2 before:-translate-y-1/2 before:content-empty")})})]}):x,J&&t(a.Arrow,{})]})})})]})})});W.displayName="Popover";var be=W;export{W as a,be as b}; //# sourceMappingURL=chunk-2OYEDCJY.js.map