@bitrise/bitkit-v2 0.3.516-beta.3300 → 0.3.516-beta.3302
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.
|
@@ -21,7 +21,7 @@ export interface BitkitPopoverProps {
|
|
|
21
21
|
defaultOpen?: PopoverRootProps['defaultOpen'];
|
|
22
22
|
/**
|
|
23
23
|
* Render the panel inline instead of in a portal. Only needed when it must stay inside its
|
|
24
|
-
* parent's DOM subtree
|
|
24
|
+
* parent's DOM subtree.
|
|
25
25
|
*/
|
|
26
26
|
disablePortal?: boolean;
|
|
27
27
|
onOpenChange?: (open: boolean) => void;
|
|
@@ -35,8 +35,8 @@ export interface BitkitPopoverProps {
|
|
|
35
35
|
* `positioning.getAnchorElement`.
|
|
36
36
|
*
|
|
37
37
|
* The panel is mounted only while open, and renders in a portal so it escapes any ancestor that
|
|
38
|
-
* traps stacking or clips overflow.
|
|
39
|
-
* `
|
|
38
|
+
* traps stacking or clips overflow. Unlike the smaller floating components, it stays in the portal
|
|
39
|
+
* inside a dialog too, like `BitkitCalendar`: a dialog's body would clip a panel this size.
|
|
40
40
|
*/
|
|
41
41
|
declare const BitkitPopover: {
|
|
42
42
|
({ children, title, footer, trigger, autoFocus, open, defaultOpen, disablePortal, onOpenChange, positioning, persistentElements, }: BitkitPopoverProps): import('react').JSX.Element;
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import IconArrowDown from "../../icons/IconArrowDown.js";
|
|
2
|
-
import BitkitPortalContext from "../../utilities/BitkitPortalContext.js";
|
|
3
2
|
import BitkitCloseButton from "../BitkitCloseButton/BitkitCloseButton.js";
|
|
4
3
|
import { chakra } from "@chakra-ui/react/styled-system";
|
|
5
|
-
import { useCallback,
|
|
4
|
+
import { useCallback, useEffect, useId, useRef, useState } from "react";
|
|
6
5
|
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
7
6
|
import { Box } from "@chakra-ui/react/box";
|
|
8
7
|
import { Portal } from "@chakra-ui/react/portal";
|
|
@@ -66,11 +65,10 @@ var ScrollablePopoverBody = ({ children }) => {
|
|
|
66
65
|
* `positioning.getAnchorElement`.
|
|
67
66
|
*
|
|
68
67
|
* The panel is mounted only while open, and renders in a portal so it escapes any ancestor that
|
|
69
|
-
* traps stacking or clips overflow.
|
|
70
|
-
* `
|
|
68
|
+
* traps stacking or clips overflow. Unlike the smaller floating components, it stays in the portal
|
|
69
|
+
* inside a dialog too, like `BitkitCalendar`: a dialog's body would clip a panel this size.
|
|
71
70
|
*/
|
|
72
71
|
var BitkitPopover = ({ children, title, footer, trigger, autoFocus, open, defaultOpen, disablePortal, onOpenChange, positioning, persistentElements }) => {
|
|
73
|
-
const { disablePortal: disablePortalFromContext } = useContext(BitkitPortalContext);
|
|
74
72
|
const titleId = useId();
|
|
75
73
|
return /* @__PURE__ */ jsxs(Popover.Root, {
|
|
76
74
|
autoFocus,
|
|
@@ -90,7 +88,7 @@ var BitkitPopover = ({ children, title, footer, trigger, autoFocus, open, defaul
|
|
|
90
88
|
asChild: true,
|
|
91
89
|
children: trigger
|
|
92
90
|
}) : null, /* @__PURE__ */ jsx(Portal, {
|
|
93
|
-
disabled: disablePortal
|
|
91
|
+
disabled: disablePortal,
|
|
94
92
|
children: /* @__PURE__ */ jsx(Popover.Positioner, { children: /* @__PURE__ */ jsxs(Popover.Content, {
|
|
95
93
|
"aria-labelledby": titleId,
|
|
96
94
|
children: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitPopover.js","names":["_Fragment"],"sources":["../../../lib/components/BitkitPopover/BitkitPopover.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Popover, type PopoverRootProps, usePopoverContext, usePopoverStyles } from '@chakra-ui/react/popover';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { chakra } from '@chakra-ui/react/styled-system';\nimport { type ReactNode, useCallback,
|
|
1
|
+
{"version":3,"file":"BitkitPopover.js","names":["_Fragment"],"sources":["../../../lib/components/BitkitPopover/BitkitPopover.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Popover, type PopoverRootProps, usePopoverContext, usePopoverStyles } from '@chakra-ui/react/popover';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { chakra } from '@chakra-ui/react/styled-system';\nimport { type ReactNode, useCallback, useEffect, useId, useRef, useState } from 'react';\n\nimport { IconArrowDown } from '../../icons';\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\n\nexport interface BitkitPopoverProps {\n /** Body content of the panel. Scrolls within the panel when it overflows. */\n children: ReactNode;\n /** Header title, shown next to the close button. */\n title: ReactNode;\n /** Optional footer content (e.g. actions). Laid out with space between for a secondary/primary pair. */\n footer?: ReactNode;\n /**\n * Element that toggles and anchors the popover. Omit when anchoring via\n * `positioning.getAnchorElement` (e.g. a trigger that can't be wrapped) and controlling `open`.\n */\n trigger?: ReactNode;\n /**\n * Move focus into the panel when it opens (default `true`). Turn it off for a panel that opens\n * while the user is typing elsewhere, such as hints beside a focused input.\n */\n autoFocus?: PopoverRootProps['autoFocus'];\n open?: PopoverRootProps['open'];\n defaultOpen?: PopoverRootProps['defaultOpen'];\n /**\n * Render the panel inline instead of in a portal. Only needed when it must stay inside its\n * parent's DOM subtree.\n */\n disablePortal?: boolean;\n onOpenChange?: (open: boolean) => void;\n positioning?: PopoverRootProps['positioning'];\n persistentElements?: PopoverRootProps['persistentElements'];\n}\n\n/**\n * Scrolls the body and shows a scroll-to-bottom button with a fade gradient while the content\n * isn't scrolled to the bottom — mirrors the BitkitDialog scrollable-body behaviour.\n */\nconst ScrollablePopoverBody = ({ children }: { children: ReactNode }) => {\n const styles = usePopoverStyles();\n const { open } = usePopoverContext();\n const contentRef = useRef<HTMLDivElement>(null);\n const [isScrollButtonVisible, setIsScrollButtonVisible] = useState(false);\n\n const updateScrollButtonVisibility = useCallback(() => {\n const content = contentRef.current;\n if (!content) {\n setIsScrollButtonVisible(false);\n return;\n }\n const didScrollToBottom = content.scrollTop >= content.scrollHeight - content.offsetHeight - 1;\n setIsScrollButtonVisible(!didScrollToBottom);\n }, []);\n\n useEffect(() => {\n const content = contentRef.current;\n if (!open || !content) return undefined;\n\n content.addEventListener('scroll', updateScrollButtonVisibility);\n const resizeObserver = new ResizeObserver(updateScrollButtonVisibility);\n resizeObserver.observe(content);\n\n return () => {\n content.removeEventListener('scroll', updateScrollButtonVisibility);\n resizeObserver.disconnect();\n };\n }, [open, updateScrollButtonVisibility]);\n\n return (\n <Box css={styles.scrollBody}>\n <Popover.Body ref={contentRef}>{children}</Popover.Body>\n {isScrollButtonVisible && (\n <>\n <Box css={styles.scrollGradient} />\n <chakra.button\n aria-label=\"Scroll to bottom\"\n css={styles.scrollButton}\n type=\"button\"\n onClick={() => {\n contentRef.current?.scrollTo({ top: contentRef.current.scrollHeight, behavior: 'smooth' });\n }}\n >\n <IconArrowDown color=\"icon/tertiary\" size=\"16\" />\n </chakra.button>\n </>\n )}\n </Box>\n );\n};\n\n/**\n * An anchored, non-modal floating panel built on Chakra Popover, styled as a compact dialog:\n * a header (title + close button), a scrollable body, and an optional footer. Anchor it with a\n * `trigger`, or — when the trigger can't be wrapped — control `open` and pass\n * `positioning.getAnchorElement`.\n *\n * The panel is mounted only while open, and renders in a portal so it escapes any ancestor that\n * traps stacking or clips overflow. Unlike the smaller floating components, it stays in the portal\n * inside a dialog too, like `BitkitCalendar`: a dialog's body would clip a panel this size.\n */\nconst BitkitPopover = ({\n children,\n title,\n footer,\n trigger,\n autoFocus,\n open,\n defaultOpen,\n disablePortal,\n onOpenChange,\n positioning,\n persistentElements,\n}: BitkitPopoverProps) => {\n const titleId = useId();\n\n return (\n <Popover.Root\n autoFocus={autoFocus}\n ids={{ title: titleId }}\n open={open}\n defaultOpen={defaultOpen}\n lazyMount\n onOpenChange={onOpenChange ? ({ open: isOpen }) => onOpenChange(isOpen) : undefined}\n positioning={{ placement: 'bottom-start', gutter: 4, ...positioning }}\n persistentElements={persistentElements}\n unmountOnExit\n >\n {trigger ? <Popover.Trigger asChild>{trigger}</Popover.Trigger> : null}\n <Portal disabled={disablePortal}>\n {/* z-index belongs on Content, not Positioner: Zag derives the positioner's inline z-index\n from Content's computed z-index, so a value set on Positioner is ignored. */}\n <Popover.Positioner>\n <Popover.Content aria-labelledby={titleId}>\n <Popover.Header>\n <Popover.Title>{title}</Popover.Title>\n <Popover.CloseTrigger asChild>\n <BitkitCloseButton aria-label=\"Close\" />\n </Popover.CloseTrigger>\n </Popover.Header>\n <ScrollablePopoverBody>{children}</ScrollablePopoverBody>\n {footer ? <Popover.Footer>{footer}</Popover.Footer> : null}\n </Popover.Content>\n </Popover.Positioner>\n </Portal>\n </Popover.Root>\n );\n};\n\nBitkitPopover.displayName = 'BitkitPopover';\n\nexport default BitkitPopover;\n"],"mappings":";;;;;;;;;;;;;AA0CA,IAAM,yBAAyB,EAAE,eAAwC;CACvE,MAAM,SAAS,iBAAiB;CAChC,MAAM,EAAE,SAAS,kBAAkB;CACnC,MAAM,aAAa,OAAuB,IAAI;CAC9C,MAAM,CAAC,uBAAuB,4BAA4B,SAAS,KAAK;CAExE,MAAM,+BAA+B,kBAAkB;EACrD,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,SAAS;GACZ,yBAAyB,KAAK;GAC9B;EACF;EACA,MAAM,oBAAoB,QAAQ,aAAa,QAAQ,eAAe,QAAQ,eAAe;EAC7F,yBAAyB,CAAC,iBAAiB;CAC7C,GAAG,CAAC,CAAC;CAEL,gBAAgB;EACd,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,QAAQ,CAAC,SAAS,OAAO,KAAA;EAE9B,QAAQ,iBAAiB,UAAU,4BAA4B;EAC/D,MAAM,iBAAiB,IAAI,eAAe,4BAA4B;EACtE,eAAe,QAAQ,OAAO;EAE9B,aAAa;GACX,QAAQ,oBAAoB,UAAU,4BAA4B;GAClE,eAAe,WAAW;EAC5B;CACF,GAAG,CAAC,MAAM,4BAA4B,CAAC;CAEvC,OACE,qBAAC,KAAD;EAAK,KAAK,OAAO;EAAjB,UAAA,CACE,oBAAC,QAAQ,MAAT;GAAc,KAAK;GAAa;EAAuB,CAAA,GACtD,yBACC,qBAAAA,YAAA,EAAA,UAAA,CACE,oBAAC,KAAD,EAAK,KAAK,OAAO,eAAiB,CAAA,GAClC,oBAAC,OAAO,QAAR;GACE,cAAW;GACX,KAAK,OAAO;GACZ,MAAK;GACL,eAAe;IACb,WAAW,SAAS,SAAS;KAAE,KAAK,WAAW,QAAQ;KAAc,UAAU;IAAS,CAAC;GAC3F;GAEA,UAAA,oBAAC,eAAD;IAAe,OAAM;IAAgB,MAAK;GAAM,CAAA;EACnC,CAAA,CACf,EAAA,CAAA,CAED;;AAET;;;;;;;;;;;AAYA,IAAM,iBAAiB,EACrB,UACA,OACA,QACA,SACA,WACA,MACA,aACA,eACA,cACA,aACA,yBACwB;CACxB,MAAM,UAAU,MAAM;CAEtB,OACE,qBAAC,QAAQ,MAAT;EACa;EACX,KAAK,EAAE,OAAO,QAAQ;EAChB;EACO;EACb,WAAA;EACA,cAAc,gBAAgB,EAAE,MAAM,aAAa,aAAa,MAAM,IAAI,KAAA;EAC1E,aAAa;GAAE,WAAW;GAAgB,QAAQ;GAAG,GAAG;EAAY;EAChD;EACpB,eAAA;EATF,UAAA,CAWG,UAAU,oBAAC,QAAQ,SAAT;GAAiB,SAAA;GAAS,UAAA;EAAyB,CAAA,IAAI,MAClE,oBAAC,QAAD;GAAQ,UAAU;GAGhB,UAAA,oBAAC,QAAQ,YAAT,EAAA,UACE,qBAAC,QAAQ,SAAT;IAAiB,mBAAiB;IAAlC,UAAA;KACE,qBAAC,QAAQ,QAAT,EAAA,UAAA,CACE,oBAAC,QAAQ,OAAT,EAAA,UAAgB,MAAqB,CAAA,GACrC,oBAAC,QAAQ,cAAT;MAAsB,SAAA;MACpB,UAAA,oBAAC,mBAAD,EAAmB,cAAW,QAAS,CAAA;KACnB,CAAA,CACR,EAAA,CAAA;KAChB,oBAAC,uBAAD,EAAwB,SAAgC,CAAA;KACvD,SAAS,oBAAC,QAAQ,QAAT,EAAA,UAAiB,OAAuB,CAAA,IAAI;IACvC;GACC,CAAA,EAAA,CAAA;EACd,CAAA,CACI;;AAElB;AAEA,cAAc,cAAc"}
|