@snowball-tech/fractal/dist/Popover/Popover.js

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

"use client";import{a as e}from"../constants-CW2-utNH.js";import{n as t,r as n}from"../helpers-DBEwVIlX.js";import{Typography as r}from"../Typography/Typography.js";import{r as ee}from"../utils-K22C_6qC.js";import{Button as te}from"../Button/Button.js";import{Paper as ne}from"../Paper/Paper.js";import{DEFAULT_ELEVATION as i,GROUP_NAME as a}from"./Popover.constants.js";import{forwardRef as o,useEffect as s,useImperativeHandle as c,useRef as l,useState as u}from"react";import d from"lodash/fp/isFunction.js";import f from"lodash/fp/isString.js";import p from"lodash/fp/omit.js";import{jsx as m,jsxs as h}from"react/jsx-runtime";import*as g from"@radix-ui/react-scroll-area";import{UilTimes as re}from"@tooni/iconscout-unicons-react";import _ from"lodash/fp/isNumber.js";import*as v from"@radix-ui/react-popover";const y=o(({align:o=`center`,children:y,closeButtonLabel:b,disabled:x=!1,elevation:S=i,fullWidth:C=!1,modal:ie=!1,onClose:w,onCloseButtonClick:ae,onInteractOutside:T,onOpen:E,onOpenChange:D,open:O,paper:k={},popover:A={},side:j=`bottom`,title:M,toggleOnTriggerClick:N=!0,toggleOnTriggerHover:P=!1,trigger:F,triggerAsButton:I=!0,width:L=`fit`,withArrow:R=!0,withCloseButton:z=!1,withScroll:B=!0,...V},H)=>{let U=l(null),W=l(null),G=l(null);c(H,()=>({get container(){return U?.current??null},get content(){return G?.current??null},get trigger(){return W?.current??null}}));let K=!!F,q=K,J=!!y,[Y,X]=u(O===!0||!q&&J&&O!==!1),Z=e=>{if(x)return;let t=Y;X(e),d(D)&&t!==e&&D(e),!t&&e&&d(E)&&E(),t&&!e&&d(w)&&w()};s(()=>{Z(!!(O===!0||!q&&J&&O!==!1))},[J,q,O]);let oe=e=>{let{target:t}=e;t===window||t==null||((U?.current?.contains(t)||G?.current?.contains(t))&&e.preventDefault(),d(T)&&T(e))},Q=`max-w-[calc(var(--radix-popper-available-width)-theme(spacing.2))]`,$={};if(_(L))$={minWidth:`${L}px`,width:`${L}px`};else if(L.startsWith(`*`))if(K){let e=L.slice(1);$={minWidth:`calc(${e} * var(--radix-popper-anchor-width))`,width:`calc(${e} * var(--radix-popper-anchor-width))`}}else Q=`${Q} 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`:Q=`${Q} w-fit`;break;case`full`:Q=`${Q} w-[var(--radix-popper-available-width)]`;break;default:Q=`${Q} ${K?`w-[var(--radix-popper-anchor-width,"100%")] min-w-fit`:`w-fit`}`;break}L===`trigger`&&!K&&console.warn("The `width` prop is set to `trigger` but no `trigger` is provided! Falling back to `auto` (which will fit the content)...")}let se=f(M)?M:ee(M);return m(`div`,{ref:U,className:n(`${e}-${a}`,Y?`${e}-${a}--opened`:`${e}-${a}--closed`,x?`${e}-${a}--disabled`:``,C?`${e}-${a}--full-width w-full`:`sm:w-fit`,V.className),...p([`className`],V),children:h(v.Root,{...x?{open:!1}:{open:Y},modal:ie,onOpenChange:Z,children:[m(v.Trigger,{ref:W,asChild:q,className:t(`${e}-${a}__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)]`,q?`flex items-center`:`invisible h-0 max-h-0 border-y-0 py-0`,x?`${e}-${a}__trigger--disabled cursor-default text-disabled`:`!cursor-pointer`,N?``:`!cursor-default`),type:N?`button`:void 0,children:q&&m(r,{className:t(`fractal-popover__trigger__content`,`w-full`,x?`fractal-popover__trigger__content--disabled`:``),disabled:I&&!N,element:N&&I?`button`:`div`,onClick:e=>{N||(e.preventDefault(),e.stopPropagation())},onMouseEnter:P?()=>X(!0):void 0,onMouseLeave:P?()=>X(!1):void 0,children:F})}),m(v.Portal,{children:Y&&m(v.Content,{ref:G,align:o,asChild:!0,className:n(`fractal-popover__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`,Q,J?``:`fractal-popover__popover--empty invisible`,A?.className),side:j,style:{display:void 0,...$,...A.style},onInteractOutside:oe,...p([`align`,`asChild`,`className`,`side`,`style`,`onInteractOutside`],A),children:h(ne,{"aria-label":se,className:n(`relative`,k.className),contentClassName:k.contentClassName,elevation:S,...p([`className`,`contentClassName`],k),children:[(z||M)&&h(`div`,{className:t(`flex flex-row items-center justify-between gap-1`,M?`mb-2`:``),children:[M&&m(r,{className:`w-full`,element:f(M)?void 0:`div`,variant:`body-1-bold`,children:M}),z&&m(v.Close,{asChild:!0,className:t(`fractal-popover__close`),children:m(`div`,{className:t(`flex items-center justify-end text-right`,M?``:`w-full`),children:m(te,{icon:m(re,{}),iconOnly:!0,label:b||`Fermer`,variant:`text`,onClick:ae})})})]}),B?h(g.Root,{className:`fractal-popover__popover__scrollarea`,...V.dir===void 0?{}:{dir:V.dir},type:`hover`,children:[m(g.Viewport,{className:t(`fractal-popover__popover__scrollarea__viewport`,`relative h-full w-full overflow-auto [&:has(+_.fractal-popover__popover__scrollarea__scrollbar--y)]:w-[calc(100%-theme(spacing.1)+theme(spacing.quarter))]`,z||M?M?`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)-theme(spacing.6))]`:`max-h-[calc(var(--radix-popper-available-height)-theme(spacing.6))]`),style:{overflowY:void 0},children:y}),m(g.Scrollbar,{className:t(`fractal-popover__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:m(g.Thumb,{className:t(`fractal-popover__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`)})})]}):y,R&&m(v.Arrow,{})]})})})]})})});y.displayName=`Popover`;export{y as Popover,y as default};
//# sourceMappingURL=Popover.js.map