@alto-avios/alto-ui 5.8.0 → 5.8.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/assets/Popover.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._popover_1ntxl_1{background:var(--alto-sem-color-bg-layer2-default);border:1px solid var(--alto-sem-color-border-tertiary);border-radius:var(--alto-card-radius,12px);box-shadow:0 4px 6px -1px var(--alto-sem-color-overlay-state-darken-active),0 2px 4px -2px var(--alto-sem-color-overlay-state-darken-active);position:absolute}._arrow_1ntxl_11{background:url('data:image/svg+xml;utf8,<svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="path-1-inside-1_15337_1997" fill="white"><path d="M17 9.29999L8.51472 17.7853L0.0294347 9.29999L8.51472 0.814707L17 9.29999Z"/></mask><path d="M17 9.29999L8.51472 17.7853L0.0294347 9.29999L8.51472 0.814707L17 9.29999Z" fill="%23FEFEFE"/><path d="M8.51472 0.814707L9.22182 0.107601L8.51472 -0.599506L7.80761 0.107601L8.51472 0.814707ZM0.736542 10.0071L9.22182 1.52181L7.80761 0.107601L-0.677672 8.59288L0.736542 10.0071ZM7.80761 1.52181L16.2929 10.0071L17.7071 8.59288L9.22182 0.107601L7.80761 1.52181Z" fill="%239593A0" fill-opacity="0.25" mask="url(%23path-1-inside-1_15337_1997)"/></svg>') 50% no-repeat;height:16px;position:absolute;width:16px}._arrow_1ntxl_11[data-placement=top]{bottom:-9px;left:50%;margin-left:-8.5px;transform:rotate(180deg)}._arrow_1ntxl_11[data-placement="top start"]{bottom:-9px;left:15px;margin-left:-8.5px;transform:rotate(180deg)}._arrow_1ntxl_11[data-placement="top end"]{bottom:-9px;margin-right:-8.5px;right:15px;transform:rotate(180deg)}._arrow_1ntxl_11[data-placement=bottom]{left:50%;margin-left:-8.5px;top:-9px}._arrow_1ntxl_11[data-placement=left]{margin-top:-9px;right:-9px;top:50%;transform:rotate(90deg)}._arrow_1ntxl_11[data-placement=right]{left:-9px;margin-top:-9px;top:50%;transform:rotate(-90deg)}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
2
|
import { OverlayTriggerState } from 'react-stately';
|
|
3
|
+
import { ResponsiveValue } from '../../utils/breakpoint/responsiveSSR';
|
|
3
4
|
type PlacementType = 'top' | 'top start' | 'top end' | 'right' | 'right top' | 'right bottom' | 'bottom' | 'bottom start' | 'bottom end' | 'left' | 'left top' | 'left bottom';
|
|
4
|
-
type ArrowDirectionType = 'top' | 'right' | 'bottom' | 'left';
|
|
5
|
+
type ArrowDirectionType = 'top' | 'top-left' | 'top-right' | 'right' | 'bottom' | 'left';
|
|
5
6
|
export interface InternalPopoverProps {
|
|
6
7
|
/**
|
|
7
8
|
* @private Internal use only - placement of the popover
|
|
@@ -34,8 +35,8 @@ export interface PopoverProps {
|
|
|
34
35
|
children: React.ReactNode;
|
|
35
36
|
/** State object controlling the overlay's open/closed status */
|
|
36
37
|
state: OverlayTriggerState;
|
|
37
|
-
/** Direction of the arrow that points to the trigger element */
|
|
38
|
-
arrowDirection?: ArrowDirectionType
|
|
38
|
+
/** **[Responsive]** Direction of the arrow that points to the trigger element */
|
|
39
|
+
arrowDirection?: ResponsiveValue<ArrowDirectionType>;
|
|
39
40
|
/** Reference to the trigger element that opens the popover */
|
|
40
41
|
triggerRef: React.RefObject<HTMLButtonElement | null> | {
|
|
41
42
|
current: HTMLElement | null;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{jsx as
|
|
2
|
-
return
|
|
3
|
-
/* @__PURE__ */
|
|
1
|
+
import{jsx as t,jsxs as e}from"react/jsx-runtime";import o,{useRef as r,useEffect as s}from"react";import{usePopover as i,Overlay as n,DismissButton as a}from"@react-aria/overlays";import{FocusScope as p}from"@react-aria/focus";import{useBreakpoint as l}from"../../utils/breakpoint/hooks/useBreakpoint.js";import{resolveResponsiveProp as c}from"../../utils/breakpoint/responsive.js";import '../../assets/Popover.css';const m="_popover_1ntxl_1",u="_arrow_1ntxl_11",f={top:"top","top-left":"top start","top-right":"top end",right:"right",bottom:"bottom",left:"left"},d=t=>t?.split(" ")[0],h=({children:h,state:b,arrowDirection:v="bottom",triggerRef:w,hasArrow:g=!0,placement:_,shouldFlip:j=!0,isNonModal:F=!1,allowTabOut:k=!1,autoFocus:x=!0})=>{const y=r(null),M=l(),N=o.useMemo(()=>c(v,M)??"bottom",[v,M]),E=_||f[N],[O,R]=o.useState(E);s(()=>{const t=()=>{y.current&&w.current&&R(E)};return t(),window.addEventListener("resize",t),()=>window.removeEventListener("resize",t)},[E,w]);const{popoverProps:z,arrowProps:D,placement:L}=i({popoverRef:y,triggerRef:w,offset:12,placement:O,shouldFlip:j,isNonModal:F},b),P=d(L)===d(O)?O:L||O,A="top start"===P||"top end"===P?P:d(P)||P,B=o.useMemo(()=>{const t=D.style;if(t){if("top start"===A||"top end"===A){return Object.fromEntries(Object.entries(t).filter(([t])=>"left"!==t&&"right"!==t&&"top"!==t&&"bottom"!==t))}return t}},[D.style,A]);/* @__PURE__ */
|
|
2
|
+
return t(n,{children:/* @__PURE__ */t(p,{restoreFocus:!0,contain:!k,autoFocus:x,children:/* @__PURE__ */e("div",{...z,ref:y,className:m,children:[
|
|
3
|
+
/* @__PURE__ */t(a,{onDismiss:b.close}),h,g&&/* @__PURE__ */t("div",{...D,className:u,style:B,"data-placement":A})]})})})};export{h as Popover,h as default};
|
|
4
4
|
//# sourceMappingURL=Popover.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popover.js","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import React, { useRef, useEffect } from 'react';\nimport { usePopover, DismissButton, Overlay } from '@react-aria/overlays';\nimport { FocusScope } from '@react-aria/focus';\nimport type { OverlayTriggerState } from 'react-stately';\nimport styles from './Popover.module.css';\n\n// Define all possible placement options for internal use (menu component)\ntype PlacementType =\n | 'top'\n | 'top start'\n | 'top end'\n | 'right'\n | 'right top'\n | 'right bottom'\n | 'bottom'\n | 'bottom start'\n | 'bottom end'\n | 'left'\n | 'left top'\n | 'left bottom';\n\n// Define the arrow direction options for the public use\ntype ArrowDirectionType
|
|
1
|
+
{"version":3,"file":"Popover.js","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import React, { useRef, useEffect } from 'react';\nimport { usePopover, DismissButton, Overlay } from '@react-aria/overlays';\nimport { FocusScope } from '@react-aria/focus';\nimport type { OverlayTriggerState } from 'react-stately';\nimport { useBreakpoint } from '../../utils/breakpoint/hooks/useBreakpoint';\nimport { resolveResponsiveProp } from '../../utils/breakpoint/responsive';\nimport type { ResponsiveValue } from '../../utils/breakpoint/responsiveSSR';\nimport styles from './Popover.module.css';\n\n// Define all possible placement options for internal use (menu component)\ntype PlacementType =\n | 'top'\n | 'top start'\n | 'top end'\n | 'right'\n | 'right top'\n | 'right bottom'\n | 'bottom'\n | 'bottom start'\n | 'bottom end'\n | 'left'\n | 'left top'\n | 'left bottom';\n\n// Define the arrow direction options for the public use\ntype ArrowDirectionType =\n | 'top'\n | 'top-left'\n | 'top-right'\n | 'right'\n | 'bottom'\n | 'left';\n\n// Mapping arrow direction to placement\nconst arrowDirectionToPlacement: Record<ArrowDirectionType, PlacementType> = {\n top: 'top',\n 'top-left': 'top start',\n 'top-right': 'top end',\n right: 'right',\n bottom: 'bottom',\n left: 'left',\n};\n\nconst getPlacementSide = (value?: string | null) => value?.split(' ')[0];\n\n// Internal props that should only be used by specific components like Menu\nexport interface InternalPopoverProps {\n /**\n * @private Internal use only - placement of the popover\n * This prop should only be used by internal components like Menu\n */\n placement?: PlacementType;\n\n /**\n * @private Internal use only - whether the popover should flip to fit in the viewport\n * This prop should only be used by internal components like Menu\n */\n shouldFlip?: boolean;\n\n /**\n * @private Internal use only - whether to allow elements outside the popover may be interacted with\n * This prop should only be used by internal components like Menu\n */\n isNonModal?: boolean;\n\n /**\n * @private Internal use only - whether to allow tabbing out of the popover\n * This prop should only be used by internal components like Menu\n */\n allowTabOut?: boolean;\n\n /**\n * @private Internal use only - whether to auto-focus elements within the popover\n * This prop should only be used by internal components like Menu\n */\n autoFocus?: boolean;\n}\n\n// Public props exposed to all component users\nexport interface PopoverProps {\n /** Content to be rendered inside the popover */\n children: React.ReactNode;\n\n /** State object controlling the overlay's open/closed status */\n state: OverlayTriggerState;\n\n /** **[Responsive]** Direction of the arrow that points to the trigger element */\n arrowDirection?: ResponsiveValue<ArrowDirectionType>;\n\n /** Reference to the trigger element that opens the popover */\n triggerRef:\n | React.RefObject<HTMLButtonElement | null>\n | { current: HTMLElement | null };\n\n /** Whether to show the directional arrow on the popover */\n hasArrow?: boolean;\n}\n\n// Combined props type for internal use\nexport type CombinedPopoverProps = PopoverProps & InternalPopoverProps;\n\nexport const Popover = ({\n children,\n state,\n arrowDirection = 'bottom',\n triggerRef,\n hasArrow = true,\n placement,\n shouldFlip = true,\n isNonModal = false,\n allowTabOut = false,\n autoFocus = true,\n}: CombinedPopoverProps) => {\n const popoverRef = useRef<HTMLDivElement>(null);\n const currentBreakpoint = useBreakpoint();\n\n const resolvedArrowDirection = React.useMemo(\n () => resolveResponsiveProp(arrowDirection, currentBreakpoint) ?? 'bottom',\n [arrowDirection, currentBreakpoint],\n );\n\n // Determine the placement - either from direct placement (internal) or mapped from arrowDirection\n const initialPlacement =\n placement || arrowDirectionToPlacement[resolvedArrowDirection];\n const [optimalPlacement, setOptimalPlacement] =\n React.useState<PlacementType>(initialPlacement);\n\n useEffect(() => {\n const updatePlacement = () => {\n if (!popoverRef.current || !triggerRef.current) return;\n\n // When viewport constraints are encountered, the placement can change\n // React Aria's shouldFlip handles most of this logic now\n setOptimalPlacement(initialPlacement);\n };\n\n updatePlacement();\n window.addEventListener('resize', updatePlacement);\n return () => window.removeEventListener('resize', updatePlacement);\n }, [initialPlacement, triggerRef]);\n\n const {\n popoverProps,\n arrowProps,\n placement: finalPlacement,\n } = usePopover(\n {\n popoverRef,\n triggerRef,\n offset: 12,\n placement: optimalPlacement,\n shouldFlip,\n isNonModal,\n },\n state,\n );\n\n const arrowPlacement =\n getPlacementSide(finalPlacement) === getPlacementSide(optimalPlacement)\n ? optimalPlacement\n : finalPlacement || optimalPlacement;\n\n const normalizedArrowPlacement =\n arrowPlacement === 'top start' || arrowPlacement === 'top end'\n ? arrowPlacement\n : getPlacementSide(arrowPlacement) || arrowPlacement;\n\n const resolvedArrowStyle = React.useMemo(() => {\n const inlineArrowStyle = arrowProps.style;\n\n if (!inlineArrowStyle) {\n return undefined;\n }\n\n // Keep react-aria computed styles generally, but preserve CSS-driven\n // arrow offsets for top start/end variants.\n if (\n normalizedArrowPlacement === 'top start' ||\n normalizedArrowPlacement === 'top end'\n ) {\n const nonPositionalStyles = Object.fromEntries(\n Object.entries(inlineArrowStyle).filter(\n ([key]) =>\n key !== 'left' &&\n key !== 'right' &&\n key !== 'top' &&\n key !== 'bottom',\n ),\n );\n\n return nonPositionalStyles;\n }\n\n return inlineArrowStyle;\n }, [arrowProps.style, normalizedArrowPlacement]);\n\n return (\n <Overlay>\n <FocusScope restoreFocus contain={!allowTabOut} autoFocus={autoFocus}>\n <div {...popoverProps} ref={popoverRef} className={styles.popover}>\n <DismissButton onDismiss={state.close} />\n {children}\n {hasArrow && (\n <div\n {...arrowProps}\n className={styles.arrow}\n style={resolvedArrowStyle}\n data-placement={normalizedArrowPlacement}\n />\n )}\n </div>\n </FocusScope>\n </Overlay>\n );\n};\n\nexport default Popover;\n"],"names":["arrowDirectionToPlacement","top","right","bottom","left","getPlacementSide","value","split","Popover","children","state","arrowDirection","triggerRef","hasArrow","placement","shouldFlip","isNonModal","allowTabOut","autoFocus","popoverRef","useRef","currentBreakpoint","useBreakpoint","resolvedArrowDirection","React","useMemo","resolveResponsiveProp","initialPlacement","optimalPlacement","setOptimalPlacement","useState","useEffect","updatePlacement","current","window","addEventListener","removeEventListener","popoverProps","arrowProps","finalPlacement","usePopover","offset","arrowPlacement","normalizedArrowPlacement","resolvedArrowStyle","inlineArrowStyle","style","Object","fromEntries","entries","filter","key","Overlay","jsx","FocusScope","restoreFocus","contain","jsxs","ref","className","styles","DismissButton","onDismiss","close"],"mappings":"8aAkCMA,EAAuE,CAC3EC,IAAK,MACL,WAAY,YACZ,YAAa,UACbC,MAAO,QACPC,OAAQ,SACRC,KAAM,QAGFC,EAAoBC,GAA0BA,GAAOC,MAAM,KAAK,GA0DzDC,EAAU,EACrBC,WACAC,QACAC,iBAAiB,SACjBC,aACAC,YAAW,EACXC,YACAC,cAAa,EACbC,cAAa,EACbC,eAAc,EACdC,aAAY,MAEZ,MAAMC,EAAaC,EAAuB,MACpCC,EAAoBC,IAEpBC,EAAyBC,EAAMC,QACnC,IAAMC,EAAsBf,EAAgBU,IAAsB,SAClE,CAACV,EAAgBU,IAIbM,EACJb,GAAad,EAA0BuB,IAClCK,EAAkBC,GACvBL,EAAMM,SAAwBH,GAEhCI,EAAU,KACR,MAAMC,EAAkB,KACjBb,EAAWc,SAAYrB,EAAWqB,SAIvCJ,EAAoBF,IAKtB,OAFAK,IACAE,OAAOC,iBAAiB,SAAUH,GAC3B,IAAME,OAAOE,oBAAoB,SAAUJ,IACjD,CAACL,EAAkBf,IAEtB,MAAMyB,aACJA,EAAAC,WACAA,EACAxB,UAAWyB,GACTC,EACF,CACErB,aACAP,aACA6B,OAAQ,GACR3B,UAAWc,EACXb,aACAC,cAEFN,GAGIgC,EACJrC,EAAiBkC,KAAoBlC,EAAiBuB,GAClDA,EACAW,GAAkBX,EAElBe,EACe,cAAnBD,GAAqD,YAAnBA,EAC9BA,EACArC,EAAiBqC,IAAmBA,EAEpCE,EAAqBpB,EAAMC,QAAQ,KACvC,MAAMoB,EAAmBP,EAAWQ,MAEpC,GAAKD,EAAL,CAMA,GAC+B,cAA7BF,GAC6B,YAA7BA,EACA,CAWA,OAV4BI,OAAOC,YACjCD,OAAOE,QAAQJ,GAAkBK,OAC/B,EAAEC,KACQ,SAARA,GACQ,UAARA,GACQ,QAARA,GACQ,WAARA,GAKR,CAEA,OAAON,CArBP,GAsBC,CAACP,EAAWQ,MAAOH;AAEtB,SACGS,EAAA,CACC3C,wBAAA4C,EAACC,GAAWC,cAAY,EAACC,SAAUvC,EAAaC,YAC9CT,wBAAAgD,EAAC,UAAQpB,EAAcqB,IAAKvC,EAAYwC,UAAWC,EACjDnD,SAAA;iBAACoD,EAAA,CAAcC,UAAWpD,EAAMqD,QAC/BtD,EACAI,kBACCwC,EAAC,MAAA,IACKf,EACJqB,UAAWC,EACXd,MAAOF,EACP,iBAAgBD"}
|