@sproutsocial/seeds-react-popout 1.2.2 → 1.2.3

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.
Files changed (5) hide show
  1. package/dist/esm/index.js.map +1 -1
  2. package/dist/index.d.mts +1 -0
  3. package/dist/index.d.ts +1 -0
  4. package/dist/index.js.map +1 -1
  5. package/package.json +2 -1
package/dist/esm/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Popout.tsx","../../src/styles.ts","../../src/PopoutTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { useState, useEffect, useRef, useCallback, useMemo } from \"react\";\nimport { useTransition, animated } from \"@react-spring/web\";\nimport FocusLock from \"react-focus-lock\";\nimport { Popper } from \"react-popper\";\nimport { MOTION_DURATION_FAST } from \"@sproutsocial/seeds-motion/dist/seeds-motion-unitless\";\nimport { useMutationObserver } from \"@sproutsocial/seeds-react-hooks\";\nimport Portal from \"@sproutsocial/seeds-react-portal\";\nimport Box, { type TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\nimport { TargetWrapper } from \"./styles\";\nimport type { TypePopoutProps } from \"./PopoutTypes\";\n\nconst doesRefContainEventTarget = (\n ref: React.MutableRefObject<HTMLDivElement | undefined>,\n event: MouseEvent\n) => {\n return (\n ref.current &&\n event.target instanceof Node &&\n ref.current.contains(event.target)\n );\n};\n\n// Transition definitions for fading in and out\nconst transitionConfig = {\n from: {\n opacity: 0,\n },\n enter: {\n opacity: 1,\n },\n leave: {\n opacity: 0,\n },\n config: {\n duration:\n // skip animation in test environment\n process.env.NODE_ENV === \"test\" ? 0 : MOTION_DURATION_FAST * 1000,\n },\n};\n\nexport function Popout({\n isOpen,\n setIsOpen,\n content,\n children,\n placement = \"auto\",\n fullWidth = false,\n zIndex = 7,\n focusOnContent = true,\n onOpen,\n onClose,\n qa = {},\n popperProps,\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n scheduleUpdateRef = () => {},\n appendToBody = true,\n focusLockProps = {},\n color,\n \"aria-haspopup\": ariaHasPopup,\n disableWrapperAria = false,\n id,\n ...rest\n}: TypePopoutProps) {\n const PopoutComponentWrapper = appendToBody ? Portal : React.Fragment;\n const [isInternalShown, setIsInternalShown] = useState<boolean>(false);\n const isControlled = typeof isOpen === \"boolean\";\n const isShown = isControlled ? isOpen : isInternalShown;\n\n const setIsShown = useMemo(\n () => (isControlled && setIsOpen ? setIsOpen : setIsInternalShown),\n [isControlled, setIsOpen]\n );\n\n const targetRef = useRef<HTMLElement | any>();\n const popoutRef = useRef<HTMLDivElement>();\n\n // This callback will automatically trigger a recalculation of the popout position if the content is changed\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n const scheduleUpdateCallback = useRef(() => {});\n\n useMutationObserver(\n popoutRef.current ?? null,\n {\n childList: true,\n characterData: true,\n subtree: true,\n },\n scheduleUpdateCallback.current\n );\n\n const {\n autoFocus = true,\n returnFocus = true,\n ...restFocusLockProps\n } = focusLockProps;\n\n const isInvalidContent = content === null || content === undefined;\n\n // Callbacks for showing, hiding, and toggling visibility of the popout\n // (Not used when isOpen is passed explicitly)\n const show = useCallback(() => setIsShown(true), [setIsShown]);\n const hide = useCallback(() => setIsShown(false), [setIsShown]);\n const toggle = useCallback(() => setIsShown(!isShown), [isShown, setIsShown]);\n\n useEffect(() => {\n const documentBody = document.body;\n\n if (isShown && documentBody) {\n // Callback passed to a click handler attached to document.body,\n // allowing user to close the popout by clicking outside\n const bodyClick = (e: MouseEvent): void => {\n if (\n doesRefContainEventTarget(targetRef, e) ||\n doesRefContainEventTarget(popoutRef, e)\n ) {\n return;\n }\n\n setIsShown(false, e);\n };\n\n // Callback for allowing user to close by keying \"esc\"\n const onEsc = (e: KeyboardEvent): void => {\n // older browsers use \"Esc\"\n if ([\"Escape\", \"Esc\"].includes(e.key)) {\n // stop propagation to avoid interacting with other components when popout is shown\n // ie if we have a popout shown in a modal and hit esc, we don't want to close both the popout and modal\n e.stopPropagation();\n setIsShown(false, e);\n }\n };\n\n documentBody.addEventListener(\"click\", bodyClick, { capture: true });\n documentBody.addEventListener(\"keydown\", onEsc, { capture: true });\n return () => {\n documentBody.removeEventListener(\"click\", bodyClick, { capture: true });\n documentBody.removeEventListener(\"keydown\", onEsc, { capture: true });\n };\n }\n }, [isShown, setIsShown]);\n\n const callbackStateRef = useRef({ calledFor: isShown });\n useEffect(() => {\n if (callbackStateRef.current.calledFor === isShown) {\n return;\n }\n\n callbackStateRef.current.calledFor = isShown;\n if (isShown) {\n onOpen?.();\n } else {\n onClose?.();\n }\n }, [isShown, onOpen, onClose]);\n\n const transition = useTransition(isShown, transitionConfig);\n // WAI-Aria properties for the popout trigger, disabled if necessary\n const ariaProps = useMemo(\n () =>\n disableWrapperAria\n ? {}\n : {\n \"aria-expanded\": isShown,\n \"aria-haspopup\": ariaHasPopup ? ariaHasPopup : true,\n },\n [isShown, ariaHasPopup, disableWrapperAria]\n );\n\n // In cases where a controlled popout is used (e.g. props.isOpen is true), we need\n // to wait for the targetRef to receive a value before rendering the popout. Otherwise,\n // the Popout component renders, but doesn't know how to position itself due the\n // `refereElement` property being undefined.\n const [shouldRenderPopout, setShouldRenderPopout] = useState<boolean>( // Only trigger this shouldRenderPopout logic when using a controlled component.\n // The reason for that is because controlled components may render the popout\n // immediately before the targetRef has a value set to it.\n !isControlled\n );\n\n const childrenRef = (el: React.ElementRef<any> | HTMLElement) => {\n targetRef.current = el;\n\n if (targetRef.current) {\n setShouldRenderPopout(true);\n }\n };\n\n return (\n <React.Fragment>\n {typeof children === \"function\" ? (\n children({\n ref: childrenRef,\n toggle,\n show,\n hide,\n ariaProps,\n })\n ) : (\n <TargetWrapper {...qa} id={id} {...rest} ref={childrenRef}>\n {React.cloneElement(children, {\n ...ariaProps,\n ...(!isControlled\n ? {\n onClick: toggle,\n }\n : undefined),\n })}\n </TargetWrapper>\n )}\n {shouldRenderPopout &&\n !isInvalidContent &&\n transition(\n (transitionStyle, isVisible, transition) =>\n isVisible && (\n <PopoutComponentWrapper key={transition.key}>\n <Popper\n referenceElement={targetRef.current}\n placement={placement}\n modifiers={{\n preventOverflow: {\n boundariesElement: \"viewport\",\n },\n }}\n {...popperProps}\n >\n {({\n ref,\n style,\n placement,\n outOfBoundaries,\n scheduleUpdate,\n }) => {\n const interceptRef = (el: HTMLDivElement | undefined) => {\n popoutRef.current = el;\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n ref(el);\n };\n\n scheduleUpdateCallback.current = scheduleUpdate;\n scheduleUpdateRef(scheduleUpdate);\n\n return (\n <div\n ref={interceptRef}\n style={{\n ...style,\n zIndex,\n width:\n fullWidth && targetRef.current\n ? targetRef.current.offsetWidth\n : \"initial\",\n }}\n data-placement={placement}\n data-qa-popout=\"\"\n data-qa-popout-isopen={isOpen === true}\n // TODO: fix this type since `color` should be valid here. TS can't resolve the correct type.\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n color={color}\n {...rest}\n >\n {isVisible && !outOfBoundaries && (\n <animated.div style={transitionStyle}>\n <FocusLock\n autoFocus={autoFocus}\n returnFocus={returnFocus}\n disabled={!focusOnContent}\n {...restFocusLockProps}\n >\n {typeof content === \"function\" &&\n content({\n hide,\n })}\n {typeof content !== \"function\" && content}\n </FocusLock>\n </animated.div>\n )}\n </div>\n );\n }}\n </Popper>\n </PopoutComponentWrapper>\n )\n )}\n </React.Fragment>\n );\n}\n\nconst PopoutContent = ({ children, ...rest }: TypeBoxProps) => (\n <Box\n bg=\"container.background.base\"\n color=\"text.body\"\n border={500}\n borderColor=\"container.border.base\"\n borderRadius=\"outer\"\n boxShadow=\"medium\"\n p={400}\n m={300}\n {...rest}\n >\n {children}\n </Box>\n);\n\nPopoutContent.displayName = \"Popout.Content\";\nPopout.Content = PopoutContent;\n\nexport default Popout;\n","import styled from \"styled-components\";\nimport { COMMON, LAYOUT } from \"@sproutsocial/seeds-react-system-props\";\n\nexport const TargetWrapper = styled.div`\n display: inline-block;\n ${COMMON}\n ${LAYOUT}\n`;\n","/* eslint-disable @typescript-eslint/no-explicit-any */\nimport * as React from \"react\";\nimport type { PopperProps } from \"react-popper\";\nimport type {\n TypeSystemCommonProps,\n TypeSystemLayoutProps,\n TypeStyledComponentsCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\nexport type EnumPlacements = Exclude<PopperProps[\"placement\"], undefined>;\n\nexport interface TypeFocusLockProps {\n disabled?: boolean;\n returnFocus?:\n | boolean\n | FocusOptions\n | ((returnTo: Element) => boolean | FocusOptions);\n persistentFocus?: boolean;\n autoFocus?: boolean;\n noFocusGuards?: boolean | \"tail\";\n group?: string;\n className?: string;\n onActivation?: (node: HTMLElement) => void;\n onDeactivation?: (node: HTMLElement) => void;\n as?: TypeStyledComponentsCommonProps[\"as\"];\n lockProps?: any;\n ref?: any;\n whiteList?: (activeElement: HTMLElement) => boolean;\n shards?: Array<any>;\n children?: React.ReactNode;\n}\n\nexport interface TypePopoutProps\n extends TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n TypeSystemLayoutProps,\n Omit<\n React.ComponentPropsWithoutRef<\"div\">,\n \"color\" | \"children\" | \"content\"\n > {\n /**\n * Whether Popout should automatically add aria-attributes to its wrapped elements\n */\n disableWrapperAria?: boolean;\n /**\n * Is the popout open? This prop is optional. By using it, you will lose some automatic handling of the logic for opening and closing the popout.\n */\n isOpen?: boolean;\n\n /**\n * If you use the isOpen prop you will need to pass a handler to change the state of the popout\n */\n setIsOpen?: (isOpen: boolean, event?: MouseEvent | KeyboardEvent) => void;\n\n /**\n * The content to be shown in the popout. If there is no content, just the children are rendered\n */\n content:\n | (React.ReactElement<any> | null | undefined)\n | (\n | ((opts: { hide: () => void }) => React.ReactElement<any>)\n | null\n | undefined\n );\n\n /**\n * The content that the popout should be attached to\n */\n children:\n | React.ReactElement<any>\n | ((opts: {\n ref: (arg0: React.ElementRef<any> | HTMLElement) => void;\n toggle: () => void;\n show: () => void;\n hide: () => void;\n ariaProps: Record<string, any>;\n }) => React.ReactNode);\n\n /** How the popped-out content should be placed, in relationship to the children */\n placement?: EnumPlacements;\n\n /**\n * Should the popped-out content inherit its width from the children?\n * This is useful for typeaheads and other places where a popout needs to match the width of a given element.\n */\n fullWidth?: boolean;\n\n /**\n * When the popout has opened, should we focus on its content?\n * Focus will be brought inside by looking for elements with [autofocus] first, [tabindex] second and buttons/links/other natively-focusable elements last.\n * Upon closing the popout, focus will be returned to the popout's target.\n * If nothing within your popout's content is focusable, this prop will do nothing.\n */\n focusOnContent?: boolean;\n qa?: Record<string, string>;\n zIndex?: number;\n\n /**\n * Override react-popper per the API documentation here: https://github.com/FezVrasta/react-popper#api-documentation\n */\n popperProps?: Partial<PopperProps>;\n onClose?: () => void;\n onOpen?: () => void;\n\n /**\n * And optional callback to receive the scheduleUpdate function.\n * Use the function to recalculate the popout position in relation to the contents.\n */\n scheduleUpdateRef?: (arg0: () => void) => void;\n\n /**\n * Mount the popout at the bottom of the DOM (using React.Portal) instead of inside the current DOM tree\n */\n appendToBody?: boolean;\n\n /**\n * Override `FocusLock` props, see the API documentation for more details: https://github.com/theKashey/react-focus-lock#api\n */\n focusLockProps?: TypeFocusLockProps;\n}\n","import Popout from \"./Popout\";\n\nexport default Popout;\nexport { Popout };\nexport * from \"./PopoutTypes\";\n"],"mappings":"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","names":["transition","placement"]}
1
+ {"version":3,"sources":["../../src/Popout.tsx","../../src/styles.ts","../../src/PopoutTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { useState, useEffect, useRef, useCallback, useMemo } from \"react\";\nimport { useTransition, animated } from \"@react-spring/web\";\nimport FocusLock from \"react-focus-lock\";\nimport { Popper } from \"react-popper\";\nimport { MOTION_DURATION_FAST } from \"@sproutsocial/seeds-motion/dist/seeds-motion-unitless\";\nimport { useMutationObserver } from \"@sproutsocial/seeds-react-hooks\";\nimport Portal from \"@sproutsocial/seeds-react-portal\";\nimport Box, { type TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\nimport { TargetWrapper } from \"./styles\";\nimport type { TypePopoutProps } from \"./PopoutTypes\";\n\nconst doesRefContainEventTarget = (\n ref: React.MutableRefObject<HTMLDivElement | undefined>,\n event: MouseEvent\n) => {\n return (\n ref.current &&\n event.target instanceof Node &&\n ref.current.contains(event.target)\n );\n};\n\n// Transition definitions for fading in and out\nconst transitionConfig = {\n from: {\n opacity: 0,\n },\n enter: {\n opacity: 1,\n },\n leave: {\n opacity: 0,\n },\n config: {\n duration:\n // skip animation in test environment\n process.env.NODE_ENV === \"test\" ? 0 : MOTION_DURATION_FAST * 1000,\n },\n};\n\nexport function Popout({\n isOpen,\n setIsOpen,\n content,\n children,\n placement = \"auto\",\n fullWidth = false,\n zIndex = 7,\n focusOnContent = true,\n onOpen,\n onClose,\n qa = {},\n popperProps,\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n scheduleUpdateRef = () => {},\n appendToBody = true,\n focusLockProps = {},\n color,\n \"aria-haspopup\": ariaHasPopup,\n disableWrapperAria = false,\n id,\n ...rest\n}: TypePopoutProps) {\n const PopoutComponentWrapper = appendToBody ? Portal : React.Fragment;\n const [isInternalShown, setIsInternalShown] = useState<boolean>(false);\n const isControlled = typeof isOpen === \"boolean\";\n const isShown = isControlled ? isOpen : isInternalShown;\n\n const setIsShown = useMemo(\n () => (isControlled && setIsOpen ? setIsOpen : setIsInternalShown),\n [isControlled, setIsOpen]\n );\n\n const targetRef = useRef<HTMLElement | any>();\n const popoutRef = useRef<HTMLDivElement>();\n\n // This callback will automatically trigger a recalculation of the popout position if the content is changed\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n const scheduleUpdateCallback = useRef(() => {});\n\n useMutationObserver(\n popoutRef.current ?? null,\n {\n childList: true,\n characterData: true,\n subtree: true,\n },\n scheduleUpdateCallback.current\n );\n\n const {\n autoFocus = true,\n returnFocus = true,\n ...restFocusLockProps\n } = focusLockProps;\n\n const isInvalidContent = content === null || content === undefined;\n\n // Callbacks for showing, hiding, and toggling visibility of the popout\n // (Not used when isOpen is passed explicitly)\n const show = useCallback(() => setIsShown(true), [setIsShown]);\n const hide = useCallback(() => setIsShown(false), [setIsShown]);\n const toggle = useCallback(() => setIsShown(!isShown), [isShown, setIsShown]);\n\n useEffect(() => {\n const documentBody = document.body;\n\n if (isShown && documentBody) {\n // Callback passed to a click handler attached to document.body,\n // allowing user to close the popout by clicking outside\n const bodyClick = (e: MouseEvent): void => {\n if (\n doesRefContainEventTarget(targetRef, e) ||\n doesRefContainEventTarget(popoutRef, e)\n ) {\n return;\n }\n\n setIsShown(false, e);\n };\n\n // Callback for allowing user to close by keying \"esc\"\n const onEsc = (e: KeyboardEvent): void => {\n // older browsers use \"Esc\"\n if ([\"Escape\", \"Esc\"].includes(e.key)) {\n // stop propagation to avoid interacting with other components when popout is shown\n // ie if we have a popout shown in a modal and hit esc, we don't want to close both the popout and modal\n e.stopPropagation();\n setIsShown(false, e);\n }\n };\n\n documentBody.addEventListener(\"click\", bodyClick, { capture: true });\n documentBody.addEventListener(\"keydown\", onEsc, { capture: true });\n return () => {\n documentBody.removeEventListener(\"click\", bodyClick, { capture: true });\n documentBody.removeEventListener(\"keydown\", onEsc, { capture: true });\n };\n }\n }, [isShown, setIsShown]);\n\n const callbackStateRef = useRef({ calledFor: isShown });\n useEffect(() => {\n if (callbackStateRef.current.calledFor === isShown) {\n return;\n }\n\n callbackStateRef.current.calledFor = isShown;\n if (isShown) {\n onOpen?.();\n } else {\n onClose?.();\n }\n }, [isShown, onOpen, onClose]);\n\n const transition = useTransition(isShown, transitionConfig);\n // WAI-Aria properties for the popout trigger, disabled if necessary\n const ariaProps = useMemo(\n () =>\n disableWrapperAria\n ? {}\n : {\n \"aria-expanded\": isShown,\n \"aria-haspopup\": ariaHasPopup ? ariaHasPopup : true,\n },\n [isShown, ariaHasPopup, disableWrapperAria]\n );\n\n // In cases where a controlled popout is used (e.g. props.isOpen is true), we need\n // to wait for the targetRef to receive a value before rendering the popout. Otherwise,\n // the Popout component renders, but doesn't know how to position itself due the\n // `refereElement` property being undefined.\n const [shouldRenderPopout, setShouldRenderPopout] = useState<boolean>( // Only trigger this shouldRenderPopout logic when using a controlled component.\n // The reason for that is because controlled components may render the popout\n // immediately before the targetRef has a value set to it.\n !isControlled\n );\n\n const childrenRef = (el: React.ElementRef<any> | HTMLElement) => {\n targetRef.current = el;\n\n if (targetRef.current) {\n setShouldRenderPopout(true);\n }\n };\n\n return (\n <React.Fragment>\n {typeof children === \"function\" ? (\n children({\n ref: childrenRef,\n toggle,\n show,\n hide,\n ariaProps,\n })\n ) : (\n <TargetWrapper {...qa} id={id} {...rest} ref={childrenRef}>\n {React.cloneElement(children, {\n ...ariaProps,\n ...(!isControlled\n ? {\n onClick: toggle,\n }\n : undefined),\n })}\n </TargetWrapper>\n )}\n {shouldRenderPopout &&\n !isInvalidContent &&\n transition(\n (transitionStyle, isVisible, transition) =>\n isVisible && (\n <PopoutComponentWrapper key={transition.key}>\n <Popper\n referenceElement={targetRef.current}\n placement={placement}\n modifiers={{\n preventOverflow: {\n boundariesElement: \"viewport\",\n },\n }}\n {...popperProps}\n >\n {({\n ref,\n style,\n placement,\n outOfBoundaries,\n scheduleUpdate,\n }) => {\n const interceptRef = (el: HTMLDivElement | undefined) => {\n popoutRef.current = el;\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n ref(el);\n };\n\n scheduleUpdateCallback.current = scheduleUpdate;\n scheduleUpdateRef(scheduleUpdate);\n\n return (\n <div\n ref={interceptRef}\n style={{\n ...style,\n zIndex,\n width:\n fullWidth && targetRef.current\n ? targetRef.current.offsetWidth\n : \"initial\",\n }}\n data-placement={placement}\n data-qa-popout=\"\"\n data-qa-popout-isopen={isOpen === true}\n // TODO: fix this type since `color` should be valid here. TS can't resolve the correct type.\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n color={color}\n {...rest}\n >\n {isVisible && !outOfBoundaries && (\n <animated.div style={transitionStyle}>\n <FocusLock\n autoFocus={autoFocus}\n returnFocus={returnFocus}\n disabled={!focusOnContent}\n {...restFocusLockProps}\n >\n {typeof content === \"function\" &&\n content({\n hide,\n })}\n {typeof content !== \"function\" && content}\n </FocusLock>\n </animated.div>\n )}\n </div>\n );\n }}\n </Popper>\n </PopoutComponentWrapper>\n )\n )}\n </React.Fragment>\n );\n}\n\nconst PopoutContent = ({ children, ...rest }: TypeBoxProps) => (\n <Box\n bg=\"container.background.base\"\n color=\"text.body\"\n border={500}\n borderColor=\"container.border.base\"\n borderRadius=\"outer\"\n boxShadow=\"medium\"\n p={400}\n m={300}\n {...rest}\n >\n {children}\n </Box>\n);\n\nPopoutContent.displayName = \"Popout.Content\";\nPopout.Content = PopoutContent;\n\nexport default Popout;\n","import styled from \"styled-components\";\nimport { COMMON, LAYOUT } from \"@sproutsocial/seeds-react-system-props\";\n\nexport const TargetWrapper = styled.div`\n display: inline-block;\n ${COMMON}\n ${LAYOUT}\n`;\n","/* eslint-disable @typescript-eslint/no-explicit-any */\nimport * as React from \"react\";\nimport type { PopperProps } from \"react-popper\";\nimport type {\n TypeSystemCommonProps,\n TypeSystemLayoutProps,\n TypeStyledComponentsCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\nexport type EnumPlacements = Exclude<PopperProps[\"placement\"], undefined>;\n\nexport interface TypeFocusLockProps {\n disabled?: boolean;\n returnFocus?:\n | boolean\n | FocusOptions\n | ((returnTo: Element) => boolean | FocusOptions);\n persistentFocus?: boolean;\n autoFocus?: boolean;\n crossFrame?: boolean;\n noFocusGuards?: boolean | \"tail\";\n group?: string;\n className?: string;\n onActivation?: (node: HTMLElement) => void;\n onDeactivation?: (node: HTMLElement) => void;\n as?: TypeStyledComponentsCommonProps[\"as\"];\n lockProps?: any;\n ref?: any;\n whiteList?: (activeElement: HTMLElement) => boolean;\n shards?: Array<any>;\n children?: React.ReactNode;\n}\n\nexport interface TypePopoutProps\n extends TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n TypeSystemLayoutProps,\n Omit<\n React.ComponentPropsWithoutRef<\"div\">,\n \"color\" | \"children\" | \"content\"\n > {\n /**\n * Whether Popout should automatically add aria-attributes to its wrapped elements\n */\n disableWrapperAria?: boolean;\n /**\n * Is the popout open? This prop is optional. By using it, you will lose some automatic handling of the logic for opening and closing the popout.\n */\n isOpen?: boolean;\n\n /**\n * If you use the isOpen prop you will need to pass a handler to change the state of the popout\n */\n setIsOpen?: (isOpen: boolean, event?: MouseEvent | KeyboardEvent) => void;\n\n /**\n * The content to be shown in the popout. If there is no content, just the children are rendered\n */\n content:\n | (React.ReactElement<any> | null | undefined)\n | (\n | ((opts: { hide: () => void }) => React.ReactElement<any>)\n | null\n | undefined\n );\n\n /**\n * The content that the popout should be attached to\n */\n children:\n | React.ReactElement<any>\n | ((opts: {\n ref: (arg0: React.ElementRef<any> | HTMLElement) => void;\n toggle: () => void;\n show: () => void;\n hide: () => void;\n ariaProps: Record<string, any>;\n }) => React.ReactNode);\n\n /** How the popped-out content should be placed, in relationship to the children */\n placement?: EnumPlacements;\n\n /**\n * Should the popped-out content inherit its width from the children?\n * This is useful for typeaheads and other places where a popout needs to match the width of a given element.\n */\n fullWidth?: boolean;\n\n /**\n * When the popout has opened, should we focus on its content?\n * Focus will be brought inside by looking for elements with [autofocus] first, [tabindex] second and buttons/links/other natively-focusable elements last.\n * Upon closing the popout, focus will be returned to the popout's target.\n * If nothing within your popout's content is focusable, this prop will do nothing.\n */\n focusOnContent?: boolean;\n qa?: Record<string, string>;\n zIndex?: number;\n\n /**\n * Override react-popper per the API documentation here: https://github.com/FezVrasta/react-popper#api-documentation\n */\n popperProps?: Partial<PopperProps>;\n onClose?: () => void;\n onOpen?: () => void;\n\n /**\n * And optional callback to receive the scheduleUpdate function.\n * Use the function to recalculate the popout position in relation to the contents.\n */\n scheduleUpdateRef?: (arg0: () => void) => void;\n\n /**\n * Mount the popout at the bottom of the DOM (using React.Portal) instead of inside the current DOM tree\n */\n appendToBody?: boolean;\n\n /**\n * Override `FocusLock` props, see the API documentation for more details: https://github.com/theKashey/react-focus-lock#api\n */\n focusLockProps?: TypeFocusLockProps;\n}\n","import Popout from \"./Popout\";\n\nexport default Popout;\nexport { Popout };\nexport * from \"./PopoutTypes\";\n"],"mappings":"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","names":["transition","placement"]}
package/dist/index.d.mts CHANGED
@@ -10,6 +10,7 @@ interface TypeFocusLockProps {
10
10
  returnFocus?: boolean | FocusOptions | ((returnTo: Element) => boolean | FocusOptions);
11
11
  persistentFocus?: boolean;
12
12
  autoFocus?: boolean;
13
+ crossFrame?: boolean;
13
14
  noFocusGuards?: boolean | "tail";
14
15
  group?: string;
15
16
  className?: string;
package/dist/index.d.ts CHANGED
@@ -10,6 +10,7 @@ interface TypeFocusLockProps {
10
10
  returnFocus?: boolean | FocusOptions | ((returnTo: Element) => boolean | FocusOptions);
11
11
  persistentFocus?: boolean;
12
12
  autoFocus?: boolean;
13
+ crossFrame?: boolean;
13
14
  noFocusGuards?: boolean | "tail";
14
15
  group?: string;
15
16
  className?: string;
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts","../src/Popout.tsx","../src/styles.ts","../src/PopoutTypes.ts"],"sourcesContent":["import Popout from \"./Popout\";\n\nexport default Popout;\nexport { Popout };\nexport * from \"./PopoutTypes\";\n","import * as React from \"react\";\nimport { useState, useEffect, useRef, useCallback, useMemo } from \"react\";\nimport { useTransition, animated } from \"@react-spring/web\";\nimport FocusLock from \"react-focus-lock\";\nimport { Popper } from \"react-popper\";\nimport { MOTION_DURATION_FAST } from \"@sproutsocial/seeds-motion/dist/seeds-motion-unitless\";\nimport { useMutationObserver } from \"@sproutsocial/seeds-react-hooks\";\nimport Portal from \"@sproutsocial/seeds-react-portal\";\nimport Box, { type TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\nimport { TargetWrapper } from \"./styles\";\nimport type { TypePopoutProps } from \"./PopoutTypes\";\n\nconst doesRefContainEventTarget = (\n ref: React.MutableRefObject<HTMLDivElement | undefined>,\n event: MouseEvent\n) => {\n return (\n ref.current &&\n event.target instanceof Node &&\n ref.current.contains(event.target)\n );\n};\n\n// Transition definitions for fading in and out\nconst transitionConfig = {\n from: {\n opacity: 0,\n },\n enter: {\n opacity: 1,\n },\n leave: {\n opacity: 0,\n },\n config: {\n duration:\n // skip animation in test environment\n process.env.NODE_ENV === \"test\" ? 0 : MOTION_DURATION_FAST * 1000,\n },\n};\n\nexport function Popout({\n isOpen,\n setIsOpen,\n content,\n children,\n placement = \"auto\",\n fullWidth = false,\n zIndex = 7,\n focusOnContent = true,\n onOpen,\n onClose,\n qa = {},\n popperProps,\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n scheduleUpdateRef = () => {},\n appendToBody = true,\n focusLockProps = {},\n color,\n \"aria-haspopup\": ariaHasPopup,\n disableWrapperAria = false,\n id,\n ...rest\n}: TypePopoutProps) {\n const PopoutComponentWrapper = appendToBody ? Portal : React.Fragment;\n const [isInternalShown, setIsInternalShown] = useState<boolean>(false);\n const isControlled = typeof isOpen === \"boolean\";\n const isShown = isControlled ? isOpen : isInternalShown;\n\n const setIsShown = useMemo(\n () => (isControlled && setIsOpen ? setIsOpen : setIsInternalShown),\n [isControlled, setIsOpen]\n );\n\n const targetRef = useRef<HTMLElement | any>();\n const popoutRef = useRef<HTMLDivElement>();\n\n // This callback will automatically trigger a recalculation of the popout position if the content is changed\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n const scheduleUpdateCallback = useRef(() => {});\n\n useMutationObserver(\n popoutRef.current ?? null,\n {\n childList: true,\n characterData: true,\n subtree: true,\n },\n scheduleUpdateCallback.current\n );\n\n const {\n autoFocus = true,\n returnFocus = true,\n ...restFocusLockProps\n } = focusLockProps;\n\n const isInvalidContent = content === null || content === undefined;\n\n // Callbacks for showing, hiding, and toggling visibility of the popout\n // (Not used when isOpen is passed explicitly)\n const show = useCallback(() => setIsShown(true), [setIsShown]);\n const hide = useCallback(() => setIsShown(false), [setIsShown]);\n const toggle = useCallback(() => setIsShown(!isShown), [isShown, setIsShown]);\n\n useEffect(() => {\n const documentBody = document.body;\n\n if (isShown && documentBody) {\n // Callback passed to a click handler attached to document.body,\n // allowing user to close the popout by clicking outside\n const bodyClick = (e: MouseEvent): void => {\n if (\n doesRefContainEventTarget(targetRef, e) ||\n doesRefContainEventTarget(popoutRef, e)\n ) {\n return;\n }\n\n setIsShown(false, e);\n };\n\n // Callback for allowing user to close by keying \"esc\"\n const onEsc = (e: KeyboardEvent): void => {\n // older browsers use \"Esc\"\n if ([\"Escape\", \"Esc\"].includes(e.key)) {\n // stop propagation to avoid interacting with other components when popout is shown\n // ie if we have a popout shown in a modal and hit esc, we don't want to close both the popout and modal\n e.stopPropagation();\n setIsShown(false, e);\n }\n };\n\n documentBody.addEventListener(\"click\", bodyClick, { capture: true });\n documentBody.addEventListener(\"keydown\", onEsc, { capture: true });\n return () => {\n documentBody.removeEventListener(\"click\", bodyClick, { capture: true });\n documentBody.removeEventListener(\"keydown\", onEsc, { capture: true });\n };\n }\n }, [isShown, setIsShown]);\n\n const callbackStateRef = useRef({ calledFor: isShown });\n useEffect(() => {\n if (callbackStateRef.current.calledFor === isShown) {\n return;\n }\n\n callbackStateRef.current.calledFor = isShown;\n if (isShown) {\n onOpen?.();\n } else {\n onClose?.();\n }\n }, [isShown, onOpen, onClose]);\n\n const transition = useTransition(isShown, transitionConfig);\n // WAI-Aria properties for the popout trigger, disabled if necessary\n const ariaProps = useMemo(\n () =>\n disableWrapperAria\n ? {}\n : {\n \"aria-expanded\": isShown,\n \"aria-haspopup\": ariaHasPopup ? ariaHasPopup : true,\n },\n [isShown, ariaHasPopup, disableWrapperAria]\n );\n\n // In cases where a controlled popout is used (e.g. props.isOpen is true), we need\n // to wait for the targetRef to receive a value before rendering the popout. Otherwise,\n // the Popout component renders, but doesn't know how to position itself due the\n // `refereElement` property being undefined.\n const [shouldRenderPopout, setShouldRenderPopout] = useState<boolean>( // Only trigger this shouldRenderPopout logic when using a controlled component.\n // The reason for that is because controlled components may render the popout\n // immediately before the targetRef has a value set to it.\n !isControlled\n );\n\n const childrenRef = (el: React.ElementRef<any> | HTMLElement) => {\n targetRef.current = el;\n\n if (targetRef.current) {\n setShouldRenderPopout(true);\n }\n };\n\n return (\n <React.Fragment>\n {typeof children === \"function\" ? (\n children({\n ref: childrenRef,\n toggle,\n show,\n hide,\n ariaProps,\n })\n ) : (\n <TargetWrapper {...qa} id={id} {...rest} ref={childrenRef}>\n {React.cloneElement(children, {\n ...ariaProps,\n ...(!isControlled\n ? {\n onClick: toggle,\n }\n : undefined),\n })}\n </TargetWrapper>\n )}\n {shouldRenderPopout &&\n !isInvalidContent &&\n transition(\n (transitionStyle, isVisible, transition) =>\n isVisible && (\n <PopoutComponentWrapper key={transition.key}>\n <Popper\n referenceElement={targetRef.current}\n placement={placement}\n modifiers={{\n preventOverflow: {\n boundariesElement: \"viewport\",\n },\n }}\n {...popperProps}\n >\n {({\n ref,\n style,\n placement,\n outOfBoundaries,\n scheduleUpdate,\n }) => {\n const interceptRef = (el: HTMLDivElement | undefined) => {\n popoutRef.current = el;\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n ref(el);\n };\n\n scheduleUpdateCallback.current = scheduleUpdate;\n scheduleUpdateRef(scheduleUpdate);\n\n return (\n <div\n ref={interceptRef}\n style={{\n ...style,\n zIndex,\n width:\n fullWidth && targetRef.current\n ? targetRef.current.offsetWidth\n : \"initial\",\n }}\n data-placement={placement}\n data-qa-popout=\"\"\n data-qa-popout-isopen={isOpen === true}\n // TODO: fix this type since `color` should be valid here. TS can't resolve the correct type.\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n color={color}\n {...rest}\n >\n {isVisible && !outOfBoundaries && (\n <animated.div style={transitionStyle}>\n <FocusLock\n autoFocus={autoFocus}\n returnFocus={returnFocus}\n disabled={!focusOnContent}\n {...restFocusLockProps}\n >\n {typeof content === \"function\" &&\n content({\n hide,\n })}\n {typeof content !== \"function\" && content}\n </FocusLock>\n </animated.div>\n )}\n </div>\n );\n }}\n </Popper>\n </PopoutComponentWrapper>\n )\n )}\n </React.Fragment>\n );\n}\n\nconst PopoutContent = ({ children, ...rest }: TypeBoxProps) => (\n <Box\n bg=\"container.background.base\"\n color=\"text.body\"\n border={500}\n borderColor=\"container.border.base\"\n borderRadius=\"outer\"\n boxShadow=\"medium\"\n p={400}\n m={300}\n {...rest}\n >\n {children}\n </Box>\n);\n\nPopoutContent.displayName = \"Popout.Content\";\nPopout.Content = PopoutContent;\n\nexport default Popout;\n","import styled from \"styled-components\";\nimport { COMMON, LAYOUT } from \"@sproutsocial/seeds-react-system-props\";\n\nexport const TargetWrapper = styled.div`\n display: inline-block;\n ${COMMON}\n ${LAYOUT}\n`;\n","/* eslint-disable @typescript-eslint/no-explicit-any */\nimport * as React from \"react\";\nimport type { PopperProps } from \"react-popper\";\nimport type {\n TypeSystemCommonProps,\n TypeSystemLayoutProps,\n TypeStyledComponentsCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\nexport type EnumPlacements = Exclude<PopperProps[\"placement\"], undefined>;\n\nexport interface TypeFocusLockProps {\n disabled?: boolean;\n returnFocus?:\n | boolean\n | FocusOptions\n | ((returnTo: Element) => boolean | FocusOptions);\n persistentFocus?: boolean;\n autoFocus?: boolean;\n noFocusGuards?: boolean | \"tail\";\n group?: string;\n className?: string;\n onActivation?: (node: HTMLElement) => void;\n onDeactivation?: (node: HTMLElement) => void;\n as?: TypeStyledComponentsCommonProps[\"as\"];\n lockProps?: any;\n ref?: any;\n whiteList?: (activeElement: HTMLElement) => boolean;\n shards?: Array<any>;\n children?: React.ReactNode;\n}\n\nexport interface TypePopoutProps\n extends TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n TypeSystemLayoutProps,\n Omit<\n React.ComponentPropsWithoutRef<\"div\">,\n \"color\" | \"children\" | \"content\"\n > {\n /**\n * Whether Popout should automatically add aria-attributes to its wrapped elements\n */\n disableWrapperAria?: boolean;\n /**\n * Is the popout open? This prop is optional. By using it, you will lose some automatic handling of the logic for opening and closing the popout.\n */\n isOpen?: boolean;\n\n /**\n * If you use the isOpen prop you will need to pass a handler to change the state of the popout\n */\n setIsOpen?: (isOpen: boolean, event?: MouseEvent | KeyboardEvent) => void;\n\n /**\n * The content to be shown in the popout. If there is no content, just the children are rendered\n */\n content:\n | (React.ReactElement<any> | null | undefined)\n | (\n | ((opts: { hide: () => void }) => React.ReactElement<any>)\n | null\n | undefined\n );\n\n /**\n * The content that the popout should be attached to\n */\n children:\n | React.ReactElement<any>\n | ((opts: {\n ref: (arg0: React.ElementRef<any> | HTMLElement) => void;\n toggle: () => void;\n show: () => void;\n hide: () => void;\n ariaProps: Record<string, any>;\n }) => React.ReactNode);\n\n /** How the popped-out content should be placed, in relationship to the children */\n placement?: EnumPlacements;\n\n /**\n * Should the popped-out content inherit its width from the children?\n * This is useful for typeaheads and other places where a popout needs to match the width of a given element.\n */\n fullWidth?: boolean;\n\n /**\n * When the popout has opened, should we focus on its content?\n * Focus will be brought inside by looking for elements with [autofocus] first, [tabindex] second and buttons/links/other natively-focusable elements last.\n * Upon closing the popout, focus will be returned to the popout's target.\n * If nothing within your popout's content is focusable, this prop will do nothing.\n */\n focusOnContent?: boolean;\n qa?: Record<string, string>;\n zIndex?: number;\n\n /**\n * Override react-popper per the API documentation here: https://github.com/FezVrasta/react-popper#api-documentation\n */\n popperProps?: Partial<PopperProps>;\n onClose?: () => void;\n onOpen?: () => void;\n\n /**\n * And optional callback to receive the scheduleUpdate function.\n * Use the function to recalculate the popout position in relation to the contents.\n */\n scheduleUpdateRef?: (arg0: () => void) => void;\n\n /**\n * Mount the popout at the bottom of the DOM (using React.Portal) instead of inside the current DOM tree\n */\n appendToBody?: boolean;\n\n /**\n * Override `FocusLock` props, see the API documentation for more details: https://github.com/theKashey/react-focus-lock#api\n */\n focusLockProps?: TypeFocusLockProps;\n}\n"],"mappings":"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","names":["styled","Portal","transition","placement","FocusLock","Box","React"]}
1
+ {"version":3,"sources":["../src/index.ts","../src/Popout.tsx","../src/styles.ts","../src/PopoutTypes.ts"],"sourcesContent":["import Popout from \"./Popout\";\n\nexport default Popout;\nexport { Popout };\nexport * from \"./PopoutTypes\";\n","import * as React from \"react\";\nimport { useState, useEffect, useRef, useCallback, useMemo } from \"react\";\nimport { useTransition, animated } from \"@react-spring/web\";\nimport FocusLock from \"react-focus-lock\";\nimport { Popper } from \"react-popper\";\nimport { MOTION_DURATION_FAST } from \"@sproutsocial/seeds-motion/dist/seeds-motion-unitless\";\nimport { useMutationObserver } from \"@sproutsocial/seeds-react-hooks\";\nimport Portal from \"@sproutsocial/seeds-react-portal\";\nimport Box, { type TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\nimport { TargetWrapper } from \"./styles\";\nimport type { TypePopoutProps } from \"./PopoutTypes\";\n\nconst doesRefContainEventTarget = (\n ref: React.MutableRefObject<HTMLDivElement | undefined>,\n event: MouseEvent\n) => {\n return (\n ref.current &&\n event.target instanceof Node &&\n ref.current.contains(event.target)\n );\n};\n\n// Transition definitions for fading in and out\nconst transitionConfig = {\n from: {\n opacity: 0,\n },\n enter: {\n opacity: 1,\n },\n leave: {\n opacity: 0,\n },\n config: {\n duration:\n // skip animation in test environment\n process.env.NODE_ENV === \"test\" ? 0 : MOTION_DURATION_FAST * 1000,\n },\n};\n\nexport function Popout({\n isOpen,\n setIsOpen,\n content,\n children,\n placement = \"auto\",\n fullWidth = false,\n zIndex = 7,\n focusOnContent = true,\n onOpen,\n onClose,\n qa = {},\n popperProps,\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n scheduleUpdateRef = () => {},\n appendToBody = true,\n focusLockProps = {},\n color,\n \"aria-haspopup\": ariaHasPopup,\n disableWrapperAria = false,\n id,\n ...rest\n}: TypePopoutProps) {\n const PopoutComponentWrapper = appendToBody ? Portal : React.Fragment;\n const [isInternalShown, setIsInternalShown] = useState<boolean>(false);\n const isControlled = typeof isOpen === \"boolean\";\n const isShown = isControlled ? isOpen : isInternalShown;\n\n const setIsShown = useMemo(\n () => (isControlled && setIsOpen ? setIsOpen : setIsInternalShown),\n [isControlled, setIsOpen]\n );\n\n const targetRef = useRef<HTMLElement | any>();\n const popoutRef = useRef<HTMLDivElement>();\n\n // This callback will automatically trigger a recalculation of the popout position if the content is changed\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n const scheduleUpdateCallback = useRef(() => {});\n\n useMutationObserver(\n popoutRef.current ?? null,\n {\n childList: true,\n characterData: true,\n subtree: true,\n },\n scheduleUpdateCallback.current\n );\n\n const {\n autoFocus = true,\n returnFocus = true,\n ...restFocusLockProps\n } = focusLockProps;\n\n const isInvalidContent = content === null || content === undefined;\n\n // Callbacks for showing, hiding, and toggling visibility of the popout\n // (Not used when isOpen is passed explicitly)\n const show = useCallback(() => setIsShown(true), [setIsShown]);\n const hide = useCallback(() => setIsShown(false), [setIsShown]);\n const toggle = useCallback(() => setIsShown(!isShown), [isShown, setIsShown]);\n\n useEffect(() => {\n const documentBody = document.body;\n\n if (isShown && documentBody) {\n // Callback passed to a click handler attached to document.body,\n // allowing user to close the popout by clicking outside\n const bodyClick = (e: MouseEvent): void => {\n if (\n doesRefContainEventTarget(targetRef, e) ||\n doesRefContainEventTarget(popoutRef, e)\n ) {\n return;\n }\n\n setIsShown(false, e);\n };\n\n // Callback for allowing user to close by keying \"esc\"\n const onEsc = (e: KeyboardEvent): void => {\n // older browsers use \"Esc\"\n if ([\"Escape\", \"Esc\"].includes(e.key)) {\n // stop propagation to avoid interacting with other components when popout is shown\n // ie if we have a popout shown in a modal and hit esc, we don't want to close both the popout and modal\n e.stopPropagation();\n setIsShown(false, e);\n }\n };\n\n documentBody.addEventListener(\"click\", bodyClick, { capture: true });\n documentBody.addEventListener(\"keydown\", onEsc, { capture: true });\n return () => {\n documentBody.removeEventListener(\"click\", bodyClick, { capture: true });\n documentBody.removeEventListener(\"keydown\", onEsc, { capture: true });\n };\n }\n }, [isShown, setIsShown]);\n\n const callbackStateRef = useRef({ calledFor: isShown });\n useEffect(() => {\n if (callbackStateRef.current.calledFor === isShown) {\n return;\n }\n\n callbackStateRef.current.calledFor = isShown;\n if (isShown) {\n onOpen?.();\n } else {\n onClose?.();\n }\n }, [isShown, onOpen, onClose]);\n\n const transition = useTransition(isShown, transitionConfig);\n // WAI-Aria properties for the popout trigger, disabled if necessary\n const ariaProps = useMemo(\n () =>\n disableWrapperAria\n ? {}\n : {\n \"aria-expanded\": isShown,\n \"aria-haspopup\": ariaHasPopup ? ariaHasPopup : true,\n },\n [isShown, ariaHasPopup, disableWrapperAria]\n );\n\n // In cases where a controlled popout is used (e.g. props.isOpen is true), we need\n // to wait for the targetRef to receive a value before rendering the popout. Otherwise,\n // the Popout component renders, but doesn't know how to position itself due the\n // `refereElement` property being undefined.\n const [shouldRenderPopout, setShouldRenderPopout] = useState<boolean>( // Only trigger this shouldRenderPopout logic when using a controlled component.\n // The reason for that is because controlled components may render the popout\n // immediately before the targetRef has a value set to it.\n !isControlled\n );\n\n const childrenRef = (el: React.ElementRef<any> | HTMLElement) => {\n targetRef.current = el;\n\n if (targetRef.current) {\n setShouldRenderPopout(true);\n }\n };\n\n return (\n <React.Fragment>\n {typeof children === \"function\" ? (\n children({\n ref: childrenRef,\n toggle,\n show,\n hide,\n ariaProps,\n })\n ) : (\n <TargetWrapper {...qa} id={id} {...rest} ref={childrenRef}>\n {React.cloneElement(children, {\n ...ariaProps,\n ...(!isControlled\n ? {\n onClick: toggle,\n }\n : undefined),\n })}\n </TargetWrapper>\n )}\n {shouldRenderPopout &&\n !isInvalidContent &&\n transition(\n (transitionStyle, isVisible, transition) =>\n isVisible && (\n <PopoutComponentWrapper key={transition.key}>\n <Popper\n referenceElement={targetRef.current}\n placement={placement}\n modifiers={{\n preventOverflow: {\n boundariesElement: \"viewport\",\n },\n }}\n {...popperProps}\n >\n {({\n ref,\n style,\n placement,\n outOfBoundaries,\n scheduleUpdate,\n }) => {\n const interceptRef = (el: HTMLDivElement | undefined) => {\n popoutRef.current = el;\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n ref(el);\n };\n\n scheduleUpdateCallback.current = scheduleUpdate;\n scheduleUpdateRef(scheduleUpdate);\n\n return (\n <div\n ref={interceptRef}\n style={{\n ...style,\n zIndex,\n width:\n fullWidth && targetRef.current\n ? targetRef.current.offsetWidth\n : \"initial\",\n }}\n data-placement={placement}\n data-qa-popout=\"\"\n data-qa-popout-isopen={isOpen === true}\n // TODO: fix this type since `color` should be valid here. TS can't resolve the correct type.\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n color={color}\n {...rest}\n >\n {isVisible && !outOfBoundaries && (\n <animated.div style={transitionStyle}>\n <FocusLock\n autoFocus={autoFocus}\n returnFocus={returnFocus}\n disabled={!focusOnContent}\n {...restFocusLockProps}\n >\n {typeof content === \"function\" &&\n content({\n hide,\n })}\n {typeof content !== \"function\" && content}\n </FocusLock>\n </animated.div>\n )}\n </div>\n );\n }}\n </Popper>\n </PopoutComponentWrapper>\n )\n )}\n </React.Fragment>\n );\n}\n\nconst PopoutContent = ({ children, ...rest }: TypeBoxProps) => (\n <Box\n bg=\"container.background.base\"\n color=\"text.body\"\n border={500}\n borderColor=\"container.border.base\"\n borderRadius=\"outer\"\n boxShadow=\"medium\"\n p={400}\n m={300}\n {...rest}\n >\n {children}\n </Box>\n);\n\nPopoutContent.displayName = \"Popout.Content\";\nPopout.Content = PopoutContent;\n\nexport default Popout;\n","import styled from \"styled-components\";\nimport { COMMON, LAYOUT } from \"@sproutsocial/seeds-react-system-props\";\n\nexport const TargetWrapper = styled.div`\n display: inline-block;\n ${COMMON}\n ${LAYOUT}\n`;\n","/* eslint-disable @typescript-eslint/no-explicit-any */\nimport * as React from \"react\";\nimport type { PopperProps } from \"react-popper\";\nimport type {\n TypeSystemCommonProps,\n TypeSystemLayoutProps,\n TypeStyledComponentsCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\nexport type EnumPlacements = Exclude<PopperProps[\"placement\"], undefined>;\n\nexport interface TypeFocusLockProps {\n disabled?: boolean;\n returnFocus?:\n | boolean\n | FocusOptions\n | ((returnTo: Element) => boolean | FocusOptions);\n persistentFocus?: boolean;\n autoFocus?: boolean;\n crossFrame?: boolean;\n noFocusGuards?: boolean | \"tail\";\n group?: string;\n className?: string;\n onActivation?: (node: HTMLElement) => void;\n onDeactivation?: (node: HTMLElement) => void;\n as?: TypeStyledComponentsCommonProps[\"as\"];\n lockProps?: any;\n ref?: any;\n whiteList?: (activeElement: HTMLElement) => boolean;\n shards?: Array<any>;\n children?: React.ReactNode;\n}\n\nexport interface TypePopoutProps\n extends TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n TypeSystemLayoutProps,\n Omit<\n React.ComponentPropsWithoutRef<\"div\">,\n \"color\" | \"children\" | \"content\"\n > {\n /**\n * Whether Popout should automatically add aria-attributes to its wrapped elements\n */\n disableWrapperAria?: boolean;\n /**\n * Is the popout open? This prop is optional. By using it, you will lose some automatic handling of the logic for opening and closing the popout.\n */\n isOpen?: boolean;\n\n /**\n * If you use the isOpen prop you will need to pass a handler to change the state of the popout\n */\n setIsOpen?: (isOpen: boolean, event?: MouseEvent | KeyboardEvent) => void;\n\n /**\n * The content to be shown in the popout. If there is no content, just the children are rendered\n */\n content:\n | (React.ReactElement<any> | null | undefined)\n | (\n | ((opts: { hide: () => void }) => React.ReactElement<any>)\n | null\n | undefined\n );\n\n /**\n * The content that the popout should be attached to\n */\n children:\n | React.ReactElement<any>\n | ((opts: {\n ref: (arg0: React.ElementRef<any> | HTMLElement) => void;\n toggle: () => void;\n show: () => void;\n hide: () => void;\n ariaProps: Record<string, any>;\n }) => React.ReactNode);\n\n /** How the popped-out content should be placed, in relationship to the children */\n placement?: EnumPlacements;\n\n /**\n * Should the popped-out content inherit its width from the children?\n * This is useful for typeaheads and other places where a popout needs to match the width of a given element.\n */\n fullWidth?: boolean;\n\n /**\n * When the popout has opened, should we focus on its content?\n * Focus will be brought inside by looking for elements with [autofocus] first, [tabindex] second and buttons/links/other natively-focusable elements last.\n * Upon closing the popout, focus will be returned to the popout's target.\n * If nothing within your popout's content is focusable, this prop will do nothing.\n */\n focusOnContent?: boolean;\n qa?: Record<string, string>;\n zIndex?: number;\n\n /**\n * Override react-popper per the API documentation here: https://github.com/FezVrasta/react-popper#api-documentation\n */\n popperProps?: Partial<PopperProps>;\n onClose?: () => void;\n onOpen?: () => void;\n\n /**\n * And optional callback to receive the scheduleUpdate function.\n * Use the function to recalculate the popout position in relation to the contents.\n */\n scheduleUpdateRef?: (arg0: () => void) => void;\n\n /**\n * Mount the popout at the bottom of the DOM (using React.Portal) instead of inside the current DOM tree\n */\n appendToBody?: boolean;\n\n /**\n * Override `FocusLock` props, see the API documentation for more details: https://github.com/theKashey/react-focus-lock#api\n */\n focusLockProps?: TypeFocusLockProps;\n}\n"],"mappings":"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","names":["styled","Portal","transition","placement","FocusLock","Box","React"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sproutsocial/seeds-react-popout",
3
- "version": "1.2.2",
3
+ "version": "1.2.3",
4
4
  "description": "Seeds React Popout",
5
5
  "author": "Sprout Social, Inc.",
6
6
  "license": "MIT",
@@ -12,6 +12,7 @@
12
12
  ],
13
13
  "scripts": {
14
14
  "build": "tsup --dts",
15
+ "build:debug": "tsup --dts --metafile",
15
16
  "dev": "tsup --watch --dts",
16
17
  "clean": "rm -rf .turbo dist",
17
18
  "clean:modules": "rm -rf node_modules",