@snowball-tech/fractal
Version:
Fractal's (Snowball's design system) React component library based on RadixUI and PandaCSS
3 lines • 5.69 kB
JavaScript
'use client';
import{a as r,b as z}from"./chunk-7QJN26FN.js";import{f as q}from"./chunk-2FP3EMO2.js";import{d as j}from"./chunk-262C6VLB.js";import{a as T}from"./chunk-HTOKQYVM.js";import{b as e}from"./chunk-CMFNILWJ.js";import{a as n,b as w}from"./chunk-XYM7TA65.js";import*as t from"@radix-ui/react-popover";import*as c from"@radix-ui/react-scroll-area";import{UilTimes as te}from"@tooni/iconscout-unicons-react";import{forwardRef as le,useEffect as ie,useImperativeHandle as se,useRef as I,useState as ne}from"react";import m from"lodash/fp/isEmpty";import $ from"lodash/fp/isFunction";import ce from"lodash/fp/isNumber";import F from"lodash/fp/omit";import{jsx as a,jsxs as g}from"react/jsx-runtime";var G=le(({align:X="center",children:R,closeButtonLabel:Y="Close",disabled:d=!1,elevation:B=z,fullWidth:J=!1,modal:K=!1,onClose:L,onCloseButtonClick:O,onInteractOutside:M,onOpen:D,onOpenChange:k,open:u,paper:V={},popover:y={},side:Q="bottom",title:p,toggleOnTriggerClick:v=!0,toggleOnTriggerHover:H=!1,trigger:U,triggerAsButton:W=!0,width:l="fit",withArrow:Z=!0,withCloseButton:P=!1,withScroll:ee=!0,...h},re)=>{let N=I(null),oe=I(null),S=I(null);se(re,()=>({get container(){return N?.current??null},get content(){return S?.current??null},get trigger(){return oe?.current??null}}));let b=!!U,f=b,x=!!R,[_,E]=ne(u===!0||!f&&x&&u!==!1),A=o=>{if(d)return;let s=_;E(o),$(k)&&s!==o&&k(o),!s&&o&&$(D)&&D(),s&&!o&&$(L)&&L()};ie(()=>{A(!!(u===!0||!f&&x&&u!==!1))},[x,f,u]);let ae=o=>{let{target:s}=o;s===window||s===null||s===void 0||((N?.current?.contains(s)||S?.current?.contains(s))&&o.preventDefault(),$(M)&&M(o))},i="max-w-[calc(var(--radix-popper-available-width)-theme(spacing.2))]",C={};if(ce(l))C={minWidth:`${l}px`,width:`${l}px`};else if(l.startsWith("*"))if(b){let o=l.slice(1);C={minWidth:`calc(${o} * var(--radix-popper-anchor-width))`,width:`calc(${o} * var(--radix-popper-anchor-width))`}}else i=`${i} 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":{i=`${i} w-fit`;break}case"full":{i=`${i} w-[var(--radix-popper-available-width)]`;break}default:{i=`${i} ${b?'w-[var(--radix-popper-anchor-width,"100%")] min-w-fit':"w-fit"}`;break}}l==="trigger"&&!b&&console.warn("The `width` prop is set to `trigger` but no `trigger` is provided! Falling back to `auto` (which will fit the content)...")}return a("div",{ref:N,className:w(`${e}-${r}`,_?`${e}-${r}--opened`:`${e}-${r}--closed`,d?`${e}-${r}--disabled`:"",J?`${e}-${r}--full-width w-full`:"sm:w-fit",h.className),...F(["className"],h),children:g(t.Root,{...d?{open:!1}:{open:_},modal:K,onOpenChange:A,children:[a(t.Trigger,{asChild:f,className:n(`${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)]",f?"flex items-center":"invisible h-0 max-h-0 border-y-0 py-0",d?`${e}-${r}__trigger--disabled cursor-default text-disabled`:"!cursor-pointer",v?"":"!cursor-default"),type:v?"button":void 0,children:f&&a(T,{className:n(`${e}-${r}__trigger__content`,"w-full",d?`${e}-${r}__trigger__content--disabled`:""),disabled:W&&!v,element:v&&W?"button":"div",onClick:o=>{v||(o.preventDefault(),o.stopPropagation())},onMouseEnter:H?()=>E(!0):void 0,onMouseLeave:H?()=>E(!1):void 0,children:U})}),a(t.Portal,{children:_&&a(t.Content,{ref:S,align:X,asChild:!0,className:w(`${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',i,x?"":`${e}-${r}__popover--empty invisible`,y?.className),side:Q,style:{display:void 0,...C,...y.style},onInteractOutside:ae,...F(["align","asChild","className","side","style","onInteractOutside"],y),children:g(j,{className:w("relative",V.className),elevation:B,...F(["className"],V),children:[(P||!m(p))&&g("div",{className:n("flex flex-row items-center justify-between gap-1",m(p)?"":"mb-2"),children:[!m(p)&&a(T,{className:"w-full",variant:"body-1-bold",children:p}),P&&a(t.Close,{asChild:!0,className:n(`${e}-${r}__close`),children:a("div",{className:n("flex items-center justify-end text-right",m(p)?"w-full":""),children:a(q,{icon:a(te,{}),iconOnly:!0,label:Y,variant:"text",onClick:O})})})]}),ee?g(c.Root,{className:`${e}-${r}__popover__scrollarea`,...h.dir===void 0?{}:{dir:h.dir},type:"hover",children:[a(c.Viewport,{className:n(`${e}-${r}__popover__scrollarea__viewport`,`relative h-full w-full overflow-auto [&:has(+_.${e}-${r}__popover__scrollarea__scrollbar--y)]:w-[calc(100%-theme(spacing.1)+theme(spacing.quarter))]`,P||!m(p)?m(p)?"max-h-[calc(var(--radix-popper-available-height)-theme(spacing.6)-theme(spacing.6))]":"max-h-[calc(var(--radix-popper-available-height)-theme(spacing.6)-theme(spacing.4))]":"max-h-[calc(var(--radix-popper-available-height)-theme(spacing.6))]"),style:{overflowY:void 0},children:R}),a(c.Scrollbar,{className:n(`${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:a(c.Thumb,{className:n(`${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")})})]}):R,Z&&a(t.Arrow,{})]})})})]})})});G.displayName="Popover";var ge=G;export{G as a,ge as b};
//# sourceMappingURL=chunk-CVNLFXS2.js.map