@sproutsocial/seeds-react-popout 2.2.1 → 2.3.0

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 (7) hide show
  1. package/dist/esm/index.js +24 -6
  2. package/dist/esm/index.js.map +1 -1
  3. package/dist/index.d.mts +8 -1
  4. package/dist/index.d.ts +8 -1
  5. package/dist/index.js +24 -6
  6. package/dist/index.js.map +1 -1
  7. package/package.json +1 -1
package/dist/esm/index.js CHANGED
@@ -39,6 +39,7 @@ function Popout({
39
39
  content,
40
40
  children,
41
41
  placement = "auto",
42
+ lockPlacement = false,
42
43
  fullWidth = false,
43
44
  zIndex = 7,
44
45
  focusOnContent = true,
@@ -60,6 +61,7 @@ function Popout({
60
61
  }) {
61
62
  const PopoutComponentWrapper = appendToBody ? Portal : React.Fragment;
62
63
  const [isInternalShown, setIsInternalShown] = useState(false);
64
+ const [lockedPlacement, setLockedPlacement] = useState();
63
65
  const isControlled = typeof isOpen === "boolean";
64
66
  const isShown = isControlled ? isOpen : isInternalShown;
65
67
  const setIsShown = useMemo(
@@ -136,6 +138,11 @@ function Popout({
136
138
  // immediately before the targetRef has a value set to it.
137
139
  !isControlled
138
140
  );
141
+ useEffect(() => {
142
+ if (!isShown && lockedPlacement) {
143
+ setLockedPlacement(void 0);
144
+ }
145
+ }, [isShown, lockedPlacement]);
139
146
  const childrenRef = (el) => {
140
147
  targetRef.current = el;
141
148
  if (targetRef.current) {
@@ -158,21 +165,31 @@ function Popout({
158
165
  shouldRenderPopout && !isInvalidContent && /* @__PURE__ */ jsx(AnimatePresence, { children: isShown && /* @__PURE__ */ jsx(PopoutComponentWrapper, { children: /* @__PURE__ */ jsx(
159
166
  Popper,
160
167
  {
168
+ ...popperProps,
161
169
  referenceElement: targetRef.current,
162
- placement,
170
+ placement: lockPlacement && lockedPlacement ? lockedPlacement : placement,
163
171
  modifiers: {
164
172
  preventOverflow: {
165
173
  boundariesElement: "viewport"
166
- }
174
+ },
175
+ // Disable flip after locking when lockPlacement is true
176
+ flip: { enabled: !(lockPlacement && lockedPlacement) },
177
+ ...popperProps?.modifiers
167
178
  },
168
- ...popperProps,
169
179
  children: ({
170
180
  ref,
171
181
  style,
172
- placement: placement2,
182
+ placement: actualPlacement,
173
183
  outOfBoundaries,
174
184
  scheduleUpdate
175
185
  }) => {
186
+ if (lockPlacement && !lockedPlacement && actualPlacement) {
187
+ setTimeout(() => {
188
+ if (lockPlacement && !lockedPlacement && actualPlacement) {
189
+ setLockedPlacement(actualPlacement);
190
+ }
191
+ }, 0);
192
+ }
176
193
  const interceptRef = (el) => {
177
194
  popoutRef.current = el;
178
195
  ref(el);
@@ -188,7 +205,7 @@ function Popout({
188
205
  zIndex,
189
206
  width: fullWidth && targetRef.current ? targetRef.current.offsetWidth : "initial"
190
207
  },
191
- "data-placement": placement2,
208
+ "data-placement": actualPlacement,
192
209
  "data-qa-popout": "",
193
210
  "data-qa-popout-isopen": isOpen === true,
194
211
  color,
@@ -202,7 +219,8 @@ function Popout({
202
219
  ...restFocusLockProps,
203
220
  children: [
204
221
  typeof content === "function" && content({
205
- hide
222
+ hide,
223
+ actualPlacement
206
224
  }),
207
225
  typeof content !== "function" && content
208
226
  ]
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 { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport FocusLock from \"react-focus-lock\";\nimport { Popper } from \"react-popper\";\nimport { MOTION_DURATION_FAST } from \"@sproutsocial/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\nconst defaultAnimationConfig = {\n initial: { opacity: 0 },\n animate: { opacity: 1 },\n exit: { opacity: 0 },\n transition: {\n ease: \"circOut\",\n type: \"tween\",\n duration: process.env.NODE_ENV === \"test\" ? 0 : MOTION_DURATION_FAST,\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 animationConfig = defaultAnimationConfig,\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 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 // 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 && !isInvalidContent && (\n <AnimatePresence>\n {isShown && (\n <PopoutComponentWrapper>\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 {!outOfBoundaries && (\n <motion.div {...animationConfig}>\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 </motion.div>\n )}\n </div>\n );\n }}\n </Popper>\n </PopoutComponentWrapper>\n )}\n </AnimatePresence>\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\";\nimport type { HTMLMotionProps } from \"motion/react\";\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 /** Used to override the default Popout animations.\n * Any props that are valid for use on a Motion div can be passed here as an object.\n * See https://motion.dev/docs/react-motion-component#props */\n animationConfig?: Omit<HTMLMotionProps<\"div\">, \"children\">;\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":["placement"]}
1
+ {"version":3,"sources":["../../src/Popout.tsx","../../src/styles.ts","../../src/PopoutTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport FocusLock from \"react-focus-lock\";\nimport { Popper } from \"react-popper\";\nimport { MOTION_DURATION_FAST } from \"@sproutsocial/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\nconst defaultAnimationConfig = {\n initial: { opacity: 0 },\n animate: { opacity: 1 },\n exit: { opacity: 0 },\n transition: {\n ease: \"circOut\",\n type: \"tween\",\n duration: process.env.NODE_ENV === \"test\" ? 0 : MOTION_DURATION_FAST,\n },\n};\n\nexport function Popout({\n isOpen,\n setIsOpen,\n content,\n children,\n placement = \"auto\",\n lockPlacement = false,\n fullWidth = false,\n zIndex = 7,\n focusOnContent = true,\n onOpen,\n onClose,\n qa = {},\n popperProps,\n animationConfig = defaultAnimationConfig,\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 [lockedPlacement, setLockedPlacement] = useState<\n typeof placement | undefined\n >();\n const isControlled = typeof isOpen === \"boolean\";\n const isShown = isControlled ? isOpen : isInternalShown;\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 // 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 // Reset the locked placement when the popout is closed\n useEffect(() => {\n if (!isShown && lockedPlacement) {\n setLockedPlacement(undefined);\n }\n }, [isShown, lockedPlacement]);\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 && !isInvalidContent && (\n <AnimatePresence>\n {isShown && (\n <PopoutComponentWrapper>\n <Popper\n {...popperProps}\n referenceElement={targetRef.current}\n placement={\n lockPlacement && lockedPlacement ? lockedPlacement : placement\n }\n modifiers={{\n preventOverflow: {\n boundariesElement: \"viewport\",\n },\n // Disable flip after locking when lockPlacement is true\n flip: { enabled: !(lockPlacement && lockedPlacement) },\n ...popperProps?.modifiers,\n }}\n >\n {({\n ref,\n style,\n placement: actualPlacement,\n outOfBoundaries,\n scheduleUpdate,\n }) => {\n // HACK: We use setTimeout to defer locking the placement until after render,\n // because Popper v1 only exposes the computed placement in the render prop,\n // and React does not allow setState during render.\n if (lockPlacement && !lockedPlacement && actualPlacement) {\n setTimeout(() => {\n // Check again before setting to avoid a race condition\n if (\n lockPlacement &&\n !lockedPlacement &&\n actualPlacement\n ) {\n setLockedPlacement(actualPlacement);\n }\n }, 0);\n }\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={actualPlacement}\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 {!outOfBoundaries && (\n <motion.div {...animationConfig}>\n <FocusLock\n autoFocus={autoFocus}\n returnFocus={returnFocus}\n disabled={!focusOnContent}\n {...restFocusLockProps}\n >\n {typeof content === \"function\" &&\n content({\n hide,\n actualPlacement,\n })}\n {typeof content !== \"function\" && content}\n </FocusLock>\n </motion.div>\n )}\n </div>\n );\n }}\n </Popper>\n </PopoutComponentWrapper>\n )}\n </AnimatePresence>\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\";\nimport type { HTMLMotionProps } from \"motion/react\";\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: {\n hide: () => void;\n actualPlacement: EnumPlacements;\n }) => 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 popout be locked in place? This will prevent it from moving when the user scrolls or if the height of the popout changes.\n * This is useful for modals and other places where you want the popout to stay in place\n * after it has been opened but want to use an auto placement strategy.\n */\n lockPlacement?: boolean;\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 /** Used to override the default Popout animations.\n * Any props that are valid for use on a Motion div can be passed here as an object.\n * See https://motion.dev/docs/react-motion-component#props */\n animationConfig?: Omit<HTMLMotionProps<\"div\">, \"children\">;\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":[]}
package/dist/index.d.mts CHANGED
@@ -42,6 +42,7 @@ interface TypePopoutProps extends TypeStyledComponentsCommonProps, TypeSystemCom
42
42
  */
43
43
  content: (React.ReactElement<any> | null | undefined) | (((opts: {
44
44
  hide: () => void;
45
+ actualPlacement: EnumPlacements;
45
46
  }) => React.ReactElement<any>) | null | undefined);
46
47
  /**
47
48
  * The content that the popout should be attached to
@@ -55,6 +56,12 @@ interface TypePopoutProps extends TypeStyledComponentsCommonProps, TypeSystemCom
55
56
  }) => React.ReactNode);
56
57
  /** How the popped-out content should be placed, in relationship to the children */
57
58
  placement?: EnumPlacements;
59
+ /**
60
+ * Should the popout be locked in place? This will prevent it from moving when the user scrolls or if the height of the popout changes.
61
+ * This is useful for modals and other places where you want the popout to stay in place
62
+ * after it has been opened but want to use an auto placement strategy.
63
+ */
64
+ lockPlacement?: boolean;
58
65
  /**
59
66
  * Should the popped-out content inherit its width from the children?
60
67
  * This is useful for typeaheads and other places where a popout needs to match the width of a given element.
@@ -94,7 +101,7 @@ interface TypePopoutProps extends TypeStyledComponentsCommonProps, TypeSystemCom
94
101
  focusLockProps?: TypeFocusLockProps;
95
102
  }
96
103
 
97
- declare function Popout({ isOpen, setIsOpen, content, children, placement, fullWidth, zIndex, focusOnContent, onOpen, onClose, qa, popperProps, animationConfig, scheduleUpdateRef, appendToBody, focusLockProps, color, "aria-haspopup": ariaHasPopup, disableWrapperAria, id, ...rest }: TypePopoutProps): react_jsx_runtime.JSX.Element;
104
+ declare function Popout({ isOpen, setIsOpen, content, children, placement, lockPlacement, fullWidth, zIndex, focusOnContent, onOpen, onClose, qa, popperProps, animationConfig, scheduleUpdateRef, appendToBody, focusLockProps, color, "aria-haspopup": ariaHasPopup, disableWrapperAria, id, ...rest }: TypePopoutProps): react_jsx_runtime.JSX.Element;
98
105
  declare namespace Popout {
99
106
  var Content: {
100
107
  ({ children, ...rest }: TypeBoxProps): react_jsx_runtime.JSX.Element;
package/dist/index.d.ts CHANGED
@@ -42,6 +42,7 @@ interface TypePopoutProps extends TypeStyledComponentsCommonProps, TypeSystemCom
42
42
  */
43
43
  content: (React.ReactElement<any> | null | undefined) | (((opts: {
44
44
  hide: () => void;
45
+ actualPlacement: EnumPlacements;
45
46
  }) => React.ReactElement<any>) | null | undefined);
46
47
  /**
47
48
  * The content that the popout should be attached to
@@ -55,6 +56,12 @@ interface TypePopoutProps extends TypeStyledComponentsCommonProps, TypeSystemCom
55
56
  }) => React.ReactNode);
56
57
  /** How the popped-out content should be placed, in relationship to the children */
57
58
  placement?: EnumPlacements;
59
+ /**
60
+ * Should the popout be locked in place? This will prevent it from moving when the user scrolls or if the height of the popout changes.
61
+ * This is useful for modals and other places where you want the popout to stay in place
62
+ * after it has been opened but want to use an auto placement strategy.
63
+ */
64
+ lockPlacement?: boolean;
58
65
  /**
59
66
  * Should the popped-out content inherit its width from the children?
60
67
  * This is useful for typeaheads and other places where a popout needs to match the width of a given element.
@@ -94,7 +101,7 @@ interface TypePopoutProps extends TypeStyledComponentsCommonProps, TypeSystemCom
94
101
  focusLockProps?: TypeFocusLockProps;
95
102
  }
96
103
 
97
- declare function Popout({ isOpen, setIsOpen, content, children, placement, fullWidth, zIndex, focusOnContent, onOpen, onClose, qa, popperProps, animationConfig, scheduleUpdateRef, appendToBody, focusLockProps, color, "aria-haspopup": ariaHasPopup, disableWrapperAria, id, ...rest }: TypePopoutProps): react_jsx_runtime.JSX.Element;
104
+ declare function Popout({ isOpen, setIsOpen, content, children, placement, lockPlacement, fullWidth, zIndex, focusOnContent, onOpen, onClose, qa, popperProps, animationConfig, scheduleUpdateRef, appendToBody, focusLockProps, color, "aria-haspopup": ariaHasPopup, disableWrapperAria, id, ...rest }: TypePopoutProps): react_jsx_runtime.JSX.Element;
98
105
  declare namespace Popout {
99
106
  var Content: {
100
107
  ({ children, ...rest }: TypeBoxProps): react_jsx_runtime.JSX.Element;
package/dist/index.js CHANGED
@@ -76,6 +76,7 @@ function Popout({
76
76
  content,
77
77
  children,
78
78
  placement = "auto",
79
+ lockPlacement = false,
79
80
  fullWidth = false,
80
81
  zIndex = 7,
81
82
  focusOnContent = true,
@@ -97,6 +98,7 @@ function Popout({
97
98
  }) {
98
99
  const PopoutComponentWrapper = appendToBody ? import_seeds_react_portal.default : React.Fragment;
99
100
  const [isInternalShown, setIsInternalShown] = (0, import_react.useState)(false);
101
+ const [lockedPlacement, setLockedPlacement] = (0, import_react.useState)();
100
102
  const isControlled = typeof isOpen === "boolean";
101
103
  const isShown = isControlled ? isOpen : isInternalShown;
102
104
  const setIsShown = (0, import_react.useMemo)(
@@ -173,6 +175,11 @@ function Popout({
173
175
  // immediately before the targetRef has a value set to it.
174
176
  !isControlled
175
177
  );
178
+ (0, import_react.useEffect)(() => {
179
+ if (!isShown && lockedPlacement) {
180
+ setLockedPlacement(void 0);
181
+ }
182
+ }, [isShown, lockedPlacement]);
176
183
  const childrenRef = (el) => {
177
184
  targetRef.current = el;
178
185
  if (targetRef.current) {
@@ -195,21 +202,31 @@ function Popout({
195
202
  shouldRenderPopout && !isInvalidContent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.AnimatePresence, { children: isShown && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopoutComponentWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
196
203
  import_react_popper.Popper,
197
204
  {
205
+ ...popperProps,
198
206
  referenceElement: targetRef.current,
199
- placement,
207
+ placement: lockPlacement && lockedPlacement ? lockedPlacement : placement,
200
208
  modifiers: {
201
209
  preventOverflow: {
202
210
  boundariesElement: "viewport"
203
- }
211
+ },
212
+ // Disable flip after locking when lockPlacement is true
213
+ flip: { enabled: !(lockPlacement && lockedPlacement) },
214
+ ...popperProps?.modifiers
204
215
  },
205
- ...popperProps,
206
216
  children: ({
207
217
  ref,
208
218
  style,
209
- placement: placement2,
219
+ placement: actualPlacement,
210
220
  outOfBoundaries,
211
221
  scheduleUpdate
212
222
  }) => {
223
+ if (lockPlacement && !lockedPlacement && actualPlacement) {
224
+ setTimeout(() => {
225
+ if (lockPlacement && !lockedPlacement && actualPlacement) {
226
+ setLockedPlacement(actualPlacement);
227
+ }
228
+ }, 0);
229
+ }
213
230
  const interceptRef = (el) => {
214
231
  popoutRef.current = el;
215
232
  ref(el);
@@ -225,7 +242,7 @@ function Popout({
225
242
  zIndex,
226
243
  width: fullWidth && targetRef.current ? targetRef.current.offsetWidth : "initial"
227
244
  },
228
- "data-placement": placement2,
245
+ "data-placement": actualPlacement,
229
246
  "data-qa-popout": "",
230
247
  "data-qa-popout-isopen": isOpen === true,
231
248
  color,
@@ -239,7 +256,8 @@ function Popout({
239
256
  ...restFocusLockProps,
240
257
  children: [
241
258
  typeof content === "function" && content({
242
- hide
259
+ hide,
260
+ actualPlacement
243
261
  }),
244
262
  typeof content !== "function" && content
245
263
  ]
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 { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport FocusLock from \"react-focus-lock\";\nimport { Popper } from \"react-popper\";\nimport { MOTION_DURATION_FAST } from \"@sproutsocial/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\nconst defaultAnimationConfig = {\n initial: { opacity: 0 },\n animate: { opacity: 1 },\n exit: { opacity: 0 },\n transition: {\n ease: \"circOut\",\n type: \"tween\",\n duration: process.env.NODE_ENV === \"test\" ? 0 : MOTION_DURATION_FAST,\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 animationConfig = defaultAnimationConfig,\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 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 // 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 && !isInvalidContent && (\n <AnimatePresence>\n {isShown && (\n <PopoutComponentWrapper>\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 {!outOfBoundaries && (\n <motion.div {...animationConfig}>\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 </motion.div>\n )}\n </div>\n );\n }}\n </Popper>\n </PopoutComponentWrapper>\n )}\n </AnimatePresence>\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\";\nimport type { HTMLMotionProps } from \"motion/react\";\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 /** Used to override the default Popout animations.\n * Any props that are valid for use on a Motion div can be passed here as an object.\n * See https://motion.dev/docs/react-motion-component#props */\n animationConfig?: Omit<HTMLMotionProps<\"div\">, \"children\">;\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":["import_react","styled","Portal","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 { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport FocusLock from \"react-focus-lock\";\nimport { Popper } from \"react-popper\";\nimport { MOTION_DURATION_FAST } from \"@sproutsocial/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\nconst defaultAnimationConfig = {\n initial: { opacity: 0 },\n animate: { opacity: 1 },\n exit: { opacity: 0 },\n transition: {\n ease: \"circOut\",\n type: \"tween\",\n duration: process.env.NODE_ENV === \"test\" ? 0 : MOTION_DURATION_FAST,\n },\n};\n\nexport function Popout({\n isOpen,\n setIsOpen,\n content,\n children,\n placement = \"auto\",\n lockPlacement = false,\n fullWidth = false,\n zIndex = 7,\n focusOnContent = true,\n onOpen,\n onClose,\n qa = {},\n popperProps,\n animationConfig = defaultAnimationConfig,\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 [lockedPlacement, setLockedPlacement] = useState<\n typeof placement | undefined\n >();\n const isControlled = typeof isOpen === \"boolean\";\n const isShown = isControlled ? isOpen : isInternalShown;\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 // 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 // Reset the locked placement when the popout is closed\n useEffect(() => {\n if (!isShown && lockedPlacement) {\n setLockedPlacement(undefined);\n }\n }, [isShown, lockedPlacement]);\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 && !isInvalidContent && (\n <AnimatePresence>\n {isShown && (\n <PopoutComponentWrapper>\n <Popper\n {...popperProps}\n referenceElement={targetRef.current}\n placement={\n lockPlacement && lockedPlacement ? lockedPlacement : placement\n }\n modifiers={{\n preventOverflow: {\n boundariesElement: \"viewport\",\n },\n // Disable flip after locking when lockPlacement is true\n flip: { enabled: !(lockPlacement && lockedPlacement) },\n ...popperProps?.modifiers,\n }}\n >\n {({\n ref,\n style,\n placement: actualPlacement,\n outOfBoundaries,\n scheduleUpdate,\n }) => {\n // HACK: We use setTimeout to defer locking the placement until after render,\n // because Popper v1 only exposes the computed placement in the render prop,\n // and React does not allow setState during render.\n if (lockPlacement && !lockedPlacement && actualPlacement) {\n setTimeout(() => {\n // Check again before setting to avoid a race condition\n if (\n lockPlacement &&\n !lockedPlacement &&\n actualPlacement\n ) {\n setLockedPlacement(actualPlacement);\n }\n }, 0);\n }\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={actualPlacement}\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 {!outOfBoundaries && (\n <motion.div {...animationConfig}>\n <FocusLock\n autoFocus={autoFocus}\n returnFocus={returnFocus}\n disabled={!focusOnContent}\n {...restFocusLockProps}\n >\n {typeof content === \"function\" &&\n content({\n hide,\n actualPlacement,\n })}\n {typeof content !== \"function\" && content}\n </FocusLock>\n </motion.div>\n )}\n </div>\n );\n }}\n </Popper>\n </PopoutComponentWrapper>\n )}\n </AnimatePresence>\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\";\nimport type { HTMLMotionProps } from \"motion/react\";\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: {\n hide: () => void;\n actualPlacement: EnumPlacements;\n }) => 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 popout be locked in place? This will prevent it from moving when the user scrolls or if the height of the popout changes.\n * This is useful for modals and other places where you want the popout to stay in place\n * after it has been opened but want to use an auto placement strategy.\n */\n lockPlacement?: boolean;\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 /** Used to override the default Popout animations.\n * Any props that are valid for use on a Motion div can be passed here as an object.\n * See https://motion.dev/docs/react-motion-component#props */\n animationConfig?: Omit<HTMLMotionProps<\"div\">, \"children\">;\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":["import_react","styled","Portal","FocusLock","Box","React"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sproutsocial/seeds-react-popout",
3
- "version": "2.2.1",
3
+ "version": "2.3.0",
4
4
  "description": "Seeds React Popout",
5
5
  "author": "Sprout Social, Inc.",
6
6
  "license": "MIT",