@sproutsocial/seeds-react-tooltip 1.0.0 → 1.0.1

package/.turbo/turbo-build.log

@@ -8,14 +8,14 @@ CLI Target: es2022
 CLI Cleaning output folder
 CJS Build start
 ESM Build start
+CJS dist/index.js     6.48 KB
+CJS dist/index.js.map 10.28 KB
+CJS ⚡️ Build success in 182ms
 ESM dist/esm/index.js     4.49 KB
 ESM dist/esm/index.js.map 10.17 KB
-ESM ⚡️ Build success in 146ms
-CJS dist/index.js     6.47 KB
-CJS dist/index.js.map 10.28 KB
-CJS ⚡️ Build success in 151ms
+ESM ⚡️ Build success in 187ms
 DTS Build start
-DTS ⚡️ Build success in 15731ms
+DTS ⚡️ Build success in 29323ms
 DTS dist/index.d.ts  1.91 KB
 DTS dist/index.d.mts 1.91 KB
-Done in 20.16s.
+Done in 36.94s.

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @sproutsocial/seeds-react-tooltip
 
+## 1.0.1
+
+### Patch Changes
+
+- 9fd8bac: Update dependencies to use semantic package version instead of wildcards
+- Updated dependencies [9fd8bac]
+  - @sproutsocial/seeds-react-system-props@3.0.2
+  - @sproutsocial/seeds-react-popout@2.1.1
+  - @sproutsocial/seeds-react-theme@2.2.1
+  - @sproutsocial/seeds-react-box@1.1.2
+
 ## 1.0.0
 
 ### Major Changes

package/dist/esm/index.js

@@ -165,9 +165,9 @@ var Tooltip_default = Tooltip;
 import "react";
 
 // src/index.ts
-var src_default = Tooltip_default;
+var index_default = Tooltip_default;
 export {
   Tooltip_default as Tooltip,
-  src_default as default
+  index_default as default
 };
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Tooltip.tsx","../../src/styles.ts","../../src/TooltipTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { useState, useEffect } from \"react\";\nimport MOTION from \"@sproutsocial/seeds-motion/unitless\";\nimport Popout from \"@sproutsocial/seeds-react-popout\";\nimport { StyledTooltipContent } from \"./styles\";\nimport type { TypeTooltipProps, TypeTooltipContent } from \"./TooltipTypes\";\n\nlet idCounter = 0;\n\nconst hasAttribute = (child: React.ReactNode, attribute: string) => {\n  return React.isValidElement(child) && child.props[attribute] !== undefined;\n};\n\n/** Tooltip Styled Popout wrapper for handling events */\nconst TooltipBubble = ({\n  appearance = \"pill\",\n  children,\n  onFocus,\n  onBlur,\n  ...rest\n}: TypeTooltipContent) => {\n  // @ts-ignore Will fix during refactor\n  const handleFocus = (e) => {\n    onFocus(e);\n  };\n  // @ts-ignore Will fix during refactor\n  const handleBlur = (e) => {\n    onBlur(e);\n  };\n  return (\n    <StyledTooltipContent\n      role=\"tooltip\"\n      appearance={appearance}\n      borderRadius={appearance === \"box\" ? 500 : \"5000em\"}\n      px={400}\n      py={appearance === \"box\" ? 400 : 200}\n      m={200}\n      color=\"text.body\"\n      bg=\"container.background.base\"\n      boxShadow=\"medium\"\n      border={500}\n      borderColor=\"container.border.base\"\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      onMouseEnter={handleFocus}\n      onMouseLeave={handleBlur}\n      tabIndex={0}\n      {...rest}\n    >\n      {children}\n    </StyledTooltipContent>\n  );\n};\n\n/** Core component */\nconst Tooltip = ({\n  content,\n  children,\n  enterDelay = MOTION.MOTION_DURATION_FAST * 1000,\n  placement = \"auto\",\n  appearance,\n  zIndex = 7,\n  qa,\n  popoutProps,\n  truncated = false,\n  onFocus,\n  onBlur,\n  ...rest\n}: TypeTooltipProps) => {\n  const [shouldShow, setShouldShow] = useState(false);\n  const [isOpen, setIsOpen] = useState(false);\n  const [id] = useState(`Racine-tooltip-${idCounter++}`);\n  const isInvalidContent = content === null || content === undefined;\n\n  // @ts-ignore Will fix during refactor\n  const show = (e) => {\n    onFocus?.(e);\n    setShouldShow(true);\n  };\n  // @ts-ignore Will fix during refactor\n  const hide = (e) => {\n    onBlur?.(e);\n    setShouldShow(false);\n  };\n\n  const exitDelay = MOTION.MOTION_DURATION_FAST * 1000;\n  const defaultAppearance =\n    appearance || (typeof content === \"object\" ? \"box\" : \"pill\");\n\n  /** Handles all the logic around whether to display/not display */\n  useEffect(() => {\n    const documentBody = document.body;\n    let timeout;\n    const onEsc = (e: KeyboardEvent): void => {\n      // older browsers use \"Esc\"\n      if ([\"Escape\", \"Esc\"].includes(e.key)) {\n        setIsOpen(false);\n        setShouldShow(false);\n      }\n    };\n\n    if (shouldShow) {\n      timeout = setTimeout(() => setIsOpen(true), enterDelay);\n    } else {\n      timeout = setTimeout(() => {\n        setIsOpen(false);\n      }, exitDelay);\n    }\n\n    // We only want listeners from the tooltip if its open in the first place\n    if (isOpen) {\n      documentBody.addEventListener(\"keydown\", onEsc, { capture: true });\n    }\n    return () => {\n      documentBody.removeEventListener(\"keydown\", onEsc, { capture: true });\n      clearTimeout(timeout);\n    };\n  }, [isOpen, setShouldShow, shouldShow, enterDelay, exitDelay]);\n\n  /** The wrapped content of whats inside the Tooltip */\n  const TooltipContent = () => (\n    <TooltipBubble\n      appearance={defaultAppearance}\n      onFocus={show}\n      onBlur={hide}\n      aria-expanded={isOpen}\n      id={id}\n      {...rest}\n    >\n      {content}\n    </TooltipBubble>\n  );\n\n  return (\n    <Popout\n      content={!isInvalidContent ? TooltipContent : undefined}\n      isOpen={isOpen}\n      placement={placement}\n      qa={{\n        \"data-qa-tooltip\": id,\n        ...qa,\n      }}\n      id={id + \"-wrapper\"}\n      focusOnContent={false}\n      zIndex={zIndex}\n      aria-haspopup=\"false\"\n      display={truncated ? \"flex\" : undefined}\n      disableWrapperAria={true} // required so that the child span doesnt take in redundant aria props\n      {...popoutProps}\n    >\n      <span\n        onBlur={hide}\n        onFocus={show}\n        onMouseEnter={show}\n        onMouseLeave={hide}\n        style={\n          truncated\n            ? {\n                overflow: \"hidden\",\n                textOverflow: \"ellipsis\",\n                whiteSpace: \"nowrap\",\n              }\n            : {}\n        }\n      >\n        {React.isValidElement(children)\n          ? React.cloneElement(children as React.ReactElement, {\n              //** There may be cases where the Tooltip's child needs to properly describe its role as expanding a drawer, in which case that propery takes priority */\n              \"aria-expanded\": hasAttribute(children, \"aria-expanded\")\n                ? children.props[\"aria-expanded\"]\n                : isOpen,\n              \"aria-describedby\": id,\n            })\n          : children}\n      </span>\n    </Popout>\n  );\n};\n\nexport default Tooltip;\n","import styled from \"styled-components\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport type { TypeTooltipContent } from \"./TooltipTypes\";\n\nexport const StyledTooltipContent = styled(Box)<\n  Pick<TypeTooltipContent, \"appearance\">\n>`\n  font-family: ${(props) => props.theme.fontFamily};\n  ${(props) => props.theme.typography[200]}\n  text-align: ${(props) => (props.appearance === \"box\" ? \"left\" : \"center\")};\n`;\n","import * as React from \"react\";\nimport type { TypePopoutProps } from \"@sproutsocial/seeds-react-popout\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\n\nexport interface TypeTooltipProps\n  extends Omit<\n    TypeBoxProps,\n    \"children\" | \"content\" | \"onMouseEnter\" | \"onMouseLeave\"\n  > {\n  /** The content that the tooltip should be attached to. Hovering or focusing this element will cause the tooltip to appear */\n  children: React.ReactNode;\n\n  /** The content to be displayed within the tooltip. If there is no content, just the children are rendered */\n  content: React.ReactNode;\n\n  /** The placement of the tooltip in relation to the children */\n  placement?: TypePopoutProps[\"placement\"];\n\n  /** The time (in ms) that a user has to be hovered/focused before the tooltip will appear  */\n  enterDelay?: number;\n\n  /** Used to override the appearance of the Tooltip content. By default, strings will have the 'pill' appearance, and more complex content will have the 'box' appearance. You can change those defaults by setting this prop. */\n  appearance?: \"pill\" | \"box\";\n  qa?: object;\n  zIndex?: number;\n\n  /** Props to be spread onto the underlying Popout component */\n  popoutProps?: Partial<TypePopoutProps>;\n\n  /** Truncates text into a single line with ellipsis */\n  truncated?: boolean;\n\n  ariaProps?: Record<string, string>;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface TypeTooltipContent\n  extends Pick<TypeTooltipProps, \"appearance\" | \"children\"> {\n  onFocus: (e: React.FocusEvent<HTMLDivElement, FocusEvent>) => void;\n  onBlur: (e: React.FocusEvent<HTMLDivElement, FocusEvent>) => void;\n}\n","import Tooltip from \"./Tooltip\";\n\nexport default Tooltip;\nexport { Tooltip };\nexport * from \"./TooltipTypes\";\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/Tooltip.tsx","../../src/styles.ts","../../src/TooltipTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { useState, useEffect } from \"react\";\nimport MOTION from \"@sproutsocial/seeds-motion/unitless\";\nimport Popout from \"@sproutsocial/seeds-react-popout\";\nimport { StyledTooltipContent } from \"./styles\";\nimport type { TypeTooltipProps, TypeTooltipContent } from \"./TooltipTypes\";\n\nlet idCounter = 0;\n\nconst hasAttribute = (child: React.ReactNode, attribute: string) => {\n  return React.isValidElement(child) && child.props[attribute] !== undefined;\n};\n\n/** Tooltip Styled Popout wrapper for handling events */\nconst TooltipBubble = ({\n  appearance = \"pill\",\n  children,\n  onFocus,\n  onBlur,\n  ...rest\n}: TypeTooltipContent) => {\n  // @ts-ignore Will fix during refactor\n  const handleFocus = (e) => {\n    onFocus(e);\n  };\n  // @ts-ignore Will fix during refactor\n  const handleBlur = (e) => {\n    onBlur(e);\n  };\n  return (\n    <StyledTooltipContent\n      role=\"tooltip\"\n      appearance={appearance}\n      borderRadius={appearance === \"box\" ? 500 : \"5000em\"}\n      px={400}\n      py={appearance === \"box\" ? 400 : 200}\n      m={200}\n      color=\"text.body\"\n      bg=\"container.background.base\"\n      boxShadow=\"medium\"\n      border={500}\n      borderColor=\"container.border.base\"\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      onMouseEnter={handleFocus}\n      onMouseLeave={handleBlur}\n      tabIndex={0}\n      {...rest}\n    >\n      {children}\n    </StyledTooltipContent>\n  );\n};\n\n/** Core component */\nconst Tooltip = ({\n  content,\n  children,\n  enterDelay = MOTION.MOTION_DURATION_FAST * 1000,\n  placement = \"auto\",\n  appearance,\n  zIndex = 7,\n  qa,\n  popoutProps,\n  truncated = false,\n  onFocus,\n  onBlur,\n  ...rest\n}: TypeTooltipProps) => {\n  const [shouldShow, setShouldShow] = useState(false);\n  const [isOpen, setIsOpen] = useState(false);\n  const [id] = useState(`Racine-tooltip-${idCounter++}`);\n  const isInvalidContent = content === null || content === undefined;\n\n  // @ts-ignore Will fix during refactor\n  const show = (e) => {\n    onFocus?.(e);\n    setShouldShow(true);\n  };\n  // @ts-ignore Will fix during refactor\n  const hide = (e) => {\n    onBlur?.(e);\n    setShouldShow(false);\n  };\n\n  const exitDelay = MOTION.MOTION_DURATION_FAST * 1000;\n  const defaultAppearance =\n    appearance || (typeof content === \"object\" ? \"box\" : \"pill\");\n\n  /** Handles all the logic around whether to display/not display */\n  useEffect(() => {\n    const documentBody = document.body;\n    let timeout;\n    const onEsc = (e: KeyboardEvent): void => {\n      // older browsers use \"Esc\"\n      if ([\"Escape\", \"Esc\"].includes(e.key)) {\n        setIsOpen(false);\n        setShouldShow(false);\n      }\n    };\n\n    if (shouldShow) {\n      timeout = setTimeout(() => setIsOpen(true), enterDelay);\n    } else {\n      timeout = setTimeout(() => {\n        setIsOpen(false);\n      }, exitDelay);\n    }\n\n    // We only want listeners from the tooltip if its open in the first place\n    if (isOpen) {\n      documentBody.addEventListener(\"keydown\", onEsc, { capture: true });\n    }\n    return () => {\n      documentBody.removeEventListener(\"keydown\", onEsc, { capture: true });\n      clearTimeout(timeout);\n    };\n  }, [isOpen, setShouldShow, shouldShow, enterDelay, exitDelay]);\n\n  /** The wrapped content of whats inside the Tooltip */\n  const TooltipContent = () => (\n    <TooltipBubble\n      appearance={defaultAppearance}\n      onFocus={show}\n      onBlur={hide}\n      aria-expanded={isOpen}\n      id={id}\n      {...rest}\n    >\n      {content}\n    </TooltipBubble>\n  );\n\n  return (\n    <Popout\n      content={!isInvalidContent ? TooltipContent : undefined}\n      isOpen={isOpen}\n      placement={placement}\n      qa={{\n        \"data-qa-tooltip\": id,\n        ...qa,\n      }}\n      id={id + \"-wrapper\"}\n      focusOnContent={false}\n      zIndex={zIndex}\n      aria-haspopup=\"false\"\n      display={truncated ? \"flex\" : undefined}\n      disableWrapperAria={true} // required so that the child span doesnt take in redundant aria props\n      {...popoutProps}\n    >\n      <span\n        onBlur={hide}\n        onFocus={show}\n        onMouseEnter={show}\n        onMouseLeave={hide}\n        style={\n          truncated\n            ? {\n                overflow: \"hidden\",\n                textOverflow: \"ellipsis\",\n                whiteSpace: \"nowrap\",\n              }\n            : {}\n        }\n      >\n        {React.isValidElement(children)\n          ? React.cloneElement(children as React.ReactElement, {\n              //** There may be cases where the Tooltip's child needs to properly describe its role as expanding a drawer, in which case that propery takes priority */\n              \"aria-expanded\": hasAttribute(children, \"aria-expanded\")\n                ? children.props[\"aria-expanded\"]\n                : isOpen,\n              \"aria-describedby\": id,\n            })\n          : children}\n      </span>\n    </Popout>\n  );\n};\n\nexport default Tooltip;\n","import styled from \"styled-components\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport type { TypeTooltipContent } from \"./TooltipTypes\";\n\nexport const StyledTooltipContent = styled(Box)<\n  Pick<TypeTooltipContent, \"appearance\">\n>`\n  font-family: ${(props) => props.theme.fontFamily};\n  ${(props) => props.theme.typography[200]}\n  text-align: ${(props) => (props.appearance === \"box\" ? \"left\" : \"center\")};\n`;\n","import * as React from \"react\";\nimport type { TypePopoutProps } from \"@sproutsocial/seeds-react-popout\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\n\nexport interface TypeTooltipProps\n  extends Omit<\n    TypeBoxProps,\n    \"children\" | \"content\" | \"onMouseEnter\" | \"onMouseLeave\"\n  > {\n  /** The content that the tooltip should be attached to. Hovering or focusing this element will cause the tooltip to appear */\n  children: React.ReactNode;\n\n  /** The content to be displayed within the tooltip. If there is no content, just the children are rendered */\n  content: React.ReactNode;\n\n  /** The placement of the tooltip in relation to the children */\n  placement?: TypePopoutProps[\"placement\"];\n\n  /** The time (in ms) that a user has to be hovered/focused before the tooltip will appear  */\n  enterDelay?: number;\n\n  /** Used to override the appearance of the Tooltip content. By default, strings will have the 'pill' appearance, and more complex content will have the 'box' appearance. You can change those defaults by setting this prop. */\n  appearance?: \"pill\" | \"box\";\n  qa?: object;\n  zIndex?: number;\n\n  /** Props to be spread onto the underlying Popout component */\n  popoutProps?: Partial<TypePopoutProps>;\n\n  /** Truncates text into a single line with ellipsis */\n  truncated?: boolean;\n\n  ariaProps?: Record<string, string>;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface TypeTooltipContent\n  extends Pick<TypeTooltipProps, \"appearance\" | \"children\"> {\n  onFocus: (e: React.FocusEvent<HTMLDivElement, FocusEvent>) => void;\n  onBlur: (e: React.FocusEvent<HTMLDivElement, FocusEvent>) => void;\n}\n","import Tooltip from \"./Tooltip\";\n\nexport default Tooltip;\nexport { Tooltip };\nexport * from \"./TooltipTypes\";\n"],"mappings":"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","names":[]}

package/dist/index.js

@@ -28,12 +28,12 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
-var src_exports = {};
-__export(src_exports, {
+var index_exports = {};
+__export(index_exports, {
   Tooltip: () => Tooltip_default,
-  default: () => src_default
+  default: () => index_default
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
 
 // src/Tooltip.tsx
 var React = __toESM(require("react"));
@@ -202,7 +202,7 @@ var Tooltip_default = Tooltip;
 var React2 = require("react");
 
 // src/index.ts
-var src_default = Tooltip_default;
+var index_default = Tooltip_default;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Tooltip

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/Tooltip.tsx","../src/styles.ts","../src/TooltipTypes.ts"],"sourcesContent":["import Tooltip from \"./Tooltip\";\n\nexport default Tooltip;\nexport { Tooltip };\nexport * from \"./TooltipTypes\";\n","import * as React from \"react\";\nimport { useState, useEffect } from \"react\";\nimport MOTION from \"@sproutsocial/seeds-motion/unitless\";\nimport Popout from \"@sproutsocial/seeds-react-popout\";\nimport { StyledTooltipContent } from \"./styles\";\nimport type { TypeTooltipProps, TypeTooltipContent } from \"./TooltipTypes\";\n\nlet idCounter = 0;\n\nconst hasAttribute = (child: React.ReactNode, attribute: string) => {\n  return React.isValidElement(child) && child.props[attribute] !== undefined;\n};\n\n/** Tooltip Styled Popout wrapper for handling events */\nconst TooltipBubble = ({\n  appearance = \"pill\",\n  children,\n  onFocus,\n  onBlur,\n  ...rest\n}: TypeTooltipContent) => {\n  // @ts-ignore Will fix during refactor\n  const handleFocus = (e) => {\n    onFocus(e);\n  };\n  // @ts-ignore Will fix during refactor\n  const handleBlur = (e) => {\n    onBlur(e);\n  };\n  return (\n    <StyledTooltipContent\n      role=\"tooltip\"\n      appearance={appearance}\n      borderRadius={appearance === \"box\" ? 500 : \"5000em\"}\n      px={400}\n      py={appearance === \"box\" ? 400 : 200}\n      m={200}\n      color=\"text.body\"\n      bg=\"container.background.base\"\n      boxShadow=\"medium\"\n      border={500}\n      borderColor=\"container.border.base\"\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      onMouseEnter={handleFocus}\n      onMouseLeave={handleBlur}\n      tabIndex={0}\n      {...rest}\n    >\n      {children}\n    </StyledTooltipContent>\n  );\n};\n\n/** Core component */\nconst Tooltip = ({\n  content,\n  children,\n  enterDelay = MOTION.MOTION_DURATION_FAST * 1000,\n  placement = \"auto\",\n  appearance,\n  zIndex = 7,\n  qa,\n  popoutProps,\n  truncated = false,\n  onFocus,\n  onBlur,\n  ...rest\n}: TypeTooltipProps) => {\n  const [shouldShow, setShouldShow] = useState(false);\n  const [isOpen, setIsOpen] = useState(false);\n  const [id] = useState(`Racine-tooltip-${idCounter++}`);\n  const isInvalidContent = content === null || content === undefined;\n\n  // @ts-ignore Will fix during refactor\n  const show = (e) => {\n    onFocus?.(e);\n    setShouldShow(true);\n  };\n  // @ts-ignore Will fix during refactor\n  const hide = (e) => {\n    onBlur?.(e);\n    setShouldShow(false);\n  };\n\n  const exitDelay = MOTION.MOTION_DURATION_FAST * 1000;\n  const defaultAppearance =\n    appearance || (typeof content === \"object\" ? \"box\" : \"pill\");\n\n  /** Handles all the logic around whether to display/not display */\n  useEffect(() => {\n    const documentBody = document.body;\n    let timeout;\n    const onEsc = (e: KeyboardEvent): void => {\n      // older browsers use \"Esc\"\n      if ([\"Escape\", \"Esc\"].includes(e.key)) {\n        setIsOpen(false);\n        setShouldShow(false);\n      }\n    };\n\n    if (shouldShow) {\n      timeout = setTimeout(() => setIsOpen(true), enterDelay);\n    } else {\n      timeout = setTimeout(() => {\n        setIsOpen(false);\n      }, exitDelay);\n    }\n\n    // We only want listeners from the tooltip if its open in the first place\n    if (isOpen) {\n      documentBody.addEventListener(\"keydown\", onEsc, { capture: true });\n    }\n    return () => {\n      documentBody.removeEventListener(\"keydown\", onEsc, { capture: true });\n      clearTimeout(timeout);\n    };\n  }, [isOpen, setShouldShow, shouldShow, enterDelay, exitDelay]);\n\n  /** The wrapped content of whats inside the Tooltip */\n  const TooltipContent = () => (\n    <TooltipBubble\n      appearance={defaultAppearance}\n      onFocus={show}\n      onBlur={hide}\n      aria-expanded={isOpen}\n      id={id}\n      {...rest}\n    >\n      {content}\n    </TooltipBubble>\n  );\n\n  return (\n    <Popout\n      content={!isInvalidContent ? TooltipContent : undefined}\n      isOpen={isOpen}\n      placement={placement}\n      qa={{\n        \"data-qa-tooltip\": id,\n        ...qa,\n      }}\n      id={id + \"-wrapper\"}\n      focusOnContent={false}\n      zIndex={zIndex}\n      aria-haspopup=\"false\"\n      display={truncated ? \"flex\" : undefined}\n      disableWrapperAria={true} // required so that the child span doesnt take in redundant aria props\n      {...popoutProps}\n    >\n      <span\n        onBlur={hide}\n        onFocus={show}\n        onMouseEnter={show}\n        onMouseLeave={hide}\n        style={\n          truncated\n            ? {\n                overflow: \"hidden\",\n                textOverflow: \"ellipsis\",\n                whiteSpace: \"nowrap\",\n              }\n            : {}\n        }\n      >\n        {React.isValidElement(children)\n          ? React.cloneElement(children as React.ReactElement, {\n              //** There may be cases where the Tooltip's child needs to properly describe its role as expanding a drawer, in which case that propery takes priority */\n              \"aria-expanded\": hasAttribute(children, \"aria-expanded\")\n                ? children.props[\"aria-expanded\"]\n                : isOpen,\n              \"aria-describedby\": id,\n            })\n          : children}\n      </span>\n    </Popout>\n  );\n};\n\nexport default Tooltip;\n","import styled from \"styled-components\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport type { TypeTooltipContent } from \"./TooltipTypes\";\n\nexport const StyledTooltipContent = styled(Box)<\n  Pick<TypeTooltipContent, \"appearance\">\n>`\n  font-family: ${(props) => props.theme.fontFamily};\n  ${(props) => props.theme.typography[200]}\n  text-align: ${(props) => (props.appearance === \"box\" ? \"left\" : \"center\")};\n`;\n","import * as React from \"react\";\nimport type { TypePopoutProps } from \"@sproutsocial/seeds-react-popout\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\n\nexport interface TypeTooltipProps\n  extends Omit<\n    TypeBoxProps,\n    \"children\" | \"content\" | \"onMouseEnter\" | \"onMouseLeave\"\n  > {\n  /** The content that the tooltip should be attached to. Hovering or focusing this element will cause the tooltip to appear */\n  children: React.ReactNode;\n\n  /** The content to be displayed within the tooltip. If there is no content, just the children are rendered */\n  content: React.ReactNode;\n\n  /** The placement of the tooltip in relation to the children */\n  placement?: TypePopoutProps[\"placement\"];\n\n  /** The time (in ms) that a user has to be hovered/focused before the tooltip will appear  */\n  enterDelay?: number;\n\n  /** Used to override the appearance of the Tooltip content. By default, strings will have the 'pill' appearance, and more complex content will have the 'box' appearance. You can change those defaults by setting this prop. */\n  appearance?: \"pill\" | \"box\";\n  qa?: object;\n  zIndex?: number;\n\n  /** Props to be spread onto the underlying Popout component */\n  popoutProps?: Partial<TypePopoutProps>;\n\n  /** Truncates text into a single line with ellipsis */\n  truncated?: boolean;\n\n  ariaProps?: Record<string, string>;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface TypeTooltipContent\n  extends Pick<TypeTooltipProps, \"appearance\" | \"children\"> {\n  onFocus: (e: React.FocusEvent<HTMLDivElement, FocusEvent>) => void;\n  onBlur: (e: React.FocusEvent<HTMLDivElement, FocusEvent>) => void;\n}\n"],"mappings":"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","names":["styled","Box","MOTION","Popout","React"]}
+{"version":3,"sources":["../src/index.ts","../src/Tooltip.tsx","../src/styles.ts","../src/TooltipTypes.ts"],"sourcesContent":["import Tooltip from \"./Tooltip\";\n\nexport default Tooltip;\nexport { Tooltip };\nexport * from \"./TooltipTypes\";\n","import * as React from \"react\";\nimport { useState, useEffect } from \"react\";\nimport MOTION from \"@sproutsocial/seeds-motion/unitless\";\nimport Popout from \"@sproutsocial/seeds-react-popout\";\nimport { StyledTooltipContent } from \"./styles\";\nimport type { TypeTooltipProps, TypeTooltipContent } from \"./TooltipTypes\";\n\nlet idCounter = 0;\n\nconst hasAttribute = (child: React.ReactNode, attribute: string) => {\n  return React.isValidElement(child) && child.props[attribute] !== undefined;\n};\n\n/** Tooltip Styled Popout wrapper for handling events */\nconst TooltipBubble = ({\n  appearance = \"pill\",\n  children,\n  onFocus,\n  onBlur,\n  ...rest\n}: TypeTooltipContent) => {\n  // @ts-ignore Will fix during refactor\n  const handleFocus = (e) => {\n    onFocus(e);\n  };\n  // @ts-ignore Will fix during refactor\n  const handleBlur = (e) => {\n    onBlur(e);\n  };\n  return (\n    <StyledTooltipContent\n      role=\"tooltip\"\n      appearance={appearance}\n      borderRadius={appearance === \"box\" ? 500 : \"5000em\"}\n      px={400}\n      py={appearance === \"box\" ? 400 : 200}\n      m={200}\n      color=\"text.body\"\n      bg=\"container.background.base\"\n      boxShadow=\"medium\"\n      border={500}\n      borderColor=\"container.border.base\"\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      onMouseEnter={handleFocus}\n      onMouseLeave={handleBlur}\n      tabIndex={0}\n      {...rest}\n    >\n      {children}\n    </StyledTooltipContent>\n  );\n};\n\n/** Core component */\nconst Tooltip = ({\n  content,\n  children,\n  enterDelay = MOTION.MOTION_DURATION_FAST * 1000,\n  placement = \"auto\",\n  appearance,\n  zIndex = 7,\n  qa,\n  popoutProps,\n  truncated = false,\n  onFocus,\n  onBlur,\n  ...rest\n}: TypeTooltipProps) => {\n  const [shouldShow, setShouldShow] = useState(false);\n  const [isOpen, setIsOpen] = useState(false);\n  const [id] = useState(`Racine-tooltip-${idCounter++}`);\n  const isInvalidContent = content === null || content === undefined;\n\n  // @ts-ignore Will fix during refactor\n  const show = (e) => {\n    onFocus?.(e);\n    setShouldShow(true);\n  };\n  // @ts-ignore Will fix during refactor\n  const hide = (e) => {\n    onBlur?.(e);\n    setShouldShow(false);\n  };\n\n  const exitDelay = MOTION.MOTION_DURATION_FAST * 1000;\n  const defaultAppearance =\n    appearance || (typeof content === \"object\" ? \"box\" : \"pill\");\n\n  /** Handles all the logic around whether to display/not display */\n  useEffect(() => {\n    const documentBody = document.body;\n    let timeout;\n    const onEsc = (e: KeyboardEvent): void => {\n      // older browsers use \"Esc\"\n      if ([\"Escape\", \"Esc\"].includes(e.key)) {\n        setIsOpen(false);\n        setShouldShow(false);\n      }\n    };\n\n    if (shouldShow) {\n      timeout = setTimeout(() => setIsOpen(true), enterDelay);\n    } else {\n      timeout = setTimeout(() => {\n        setIsOpen(false);\n      }, exitDelay);\n    }\n\n    // We only want listeners from the tooltip if its open in the first place\n    if (isOpen) {\n      documentBody.addEventListener(\"keydown\", onEsc, { capture: true });\n    }\n    return () => {\n      documentBody.removeEventListener(\"keydown\", onEsc, { capture: true });\n      clearTimeout(timeout);\n    };\n  }, [isOpen, setShouldShow, shouldShow, enterDelay, exitDelay]);\n\n  /** The wrapped content of whats inside the Tooltip */\n  const TooltipContent = () => (\n    <TooltipBubble\n      appearance={defaultAppearance}\n      onFocus={show}\n      onBlur={hide}\n      aria-expanded={isOpen}\n      id={id}\n      {...rest}\n    >\n      {content}\n    </TooltipBubble>\n  );\n\n  return (\n    <Popout\n      content={!isInvalidContent ? TooltipContent : undefined}\n      isOpen={isOpen}\n      placement={placement}\n      qa={{\n        \"data-qa-tooltip\": id,\n        ...qa,\n      }}\n      id={id + \"-wrapper\"}\n      focusOnContent={false}\n      zIndex={zIndex}\n      aria-haspopup=\"false\"\n      display={truncated ? \"flex\" : undefined}\n      disableWrapperAria={true} // required so that the child span doesnt take in redundant aria props\n      {...popoutProps}\n    >\n      <span\n        onBlur={hide}\n        onFocus={show}\n        onMouseEnter={show}\n        onMouseLeave={hide}\n        style={\n          truncated\n            ? {\n                overflow: \"hidden\",\n                textOverflow: \"ellipsis\",\n                whiteSpace: \"nowrap\",\n              }\n            : {}\n        }\n      >\n        {React.isValidElement(children)\n          ? React.cloneElement(children as React.ReactElement, {\n              //** There may be cases where the Tooltip's child needs to properly describe its role as expanding a drawer, in which case that propery takes priority */\n              \"aria-expanded\": hasAttribute(children, \"aria-expanded\")\n                ? children.props[\"aria-expanded\"]\n                : isOpen,\n              \"aria-describedby\": id,\n            })\n          : children}\n      </span>\n    </Popout>\n  );\n};\n\nexport default Tooltip;\n","import styled from \"styled-components\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport type { TypeTooltipContent } from \"./TooltipTypes\";\n\nexport const StyledTooltipContent = styled(Box)<\n  Pick<TypeTooltipContent, \"appearance\">\n>`\n  font-family: ${(props) => props.theme.fontFamily};\n  ${(props) => props.theme.typography[200]}\n  text-align: ${(props) => (props.appearance === \"box\" ? \"left\" : \"center\")};\n`;\n","import * as React from \"react\";\nimport type { TypePopoutProps } from \"@sproutsocial/seeds-react-popout\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\n\nexport interface TypeTooltipProps\n  extends Omit<\n    TypeBoxProps,\n    \"children\" | \"content\" | \"onMouseEnter\" | \"onMouseLeave\"\n  > {\n  /** The content that the tooltip should be attached to. Hovering or focusing this element will cause the tooltip to appear */\n  children: React.ReactNode;\n\n  /** The content to be displayed within the tooltip. If there is no content, just the children are rendered */\n  content: React.ReactNode;\n\n  /** The placement of the tooltip in relation to the children */\n  placement?: TypePopoutProps[\"placement\"];\n\n  /** The time (in ms) that a user has to be hovered/focused before the tooltip will appear  */\n  enterDelay?: number;\n\n  /** Used to override the appearance of the Tooltip content. By default, strings will have the 'pill' appearance, and more complex content will have the 'box' appearance. You can change those defaults by setting this prop. */\n  appearance?: \"pill\" | \"box\";\n  qa?: object;\n  zIndex?: number;\n\n  /** Props to be spread onto the underlying Popout component */\n  popoutProps?: Partial<TypePopoutProps>;\n\n  /** Truncates text into a single line with ellipsis */\n  truncated?: boolean;\n\n  ariaProps?: Record<string, string>;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface TypeTooltipContent\n  extends Pick<TypeTooltipProps, \"appearance\" | \"children\"> {\n  onFocus: (e: React.FocusEvent<HTMLDivElement, FocusEvent>) => void;\n  onBlur: (e: React.FocusEvent<HTMLDivElement, FocusEvent>) => void;\n}\n"],"mappings":"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","names":["styled","Box","MOTION","Popout","React"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-tooltip",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Seeds React Tooltip",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -18,11 +18,11 @@
     "test:watch": "jest --watch --coverage=false"
   },
   "dependencies": {
-    "@sproutsocial/seeds-react-theme": "*",
-    "@sproutsocial/seeds-react-system-props": "*",
-    "@sproutsocial/seeds-react-popout": "*",
-    "@sproutsocial/seeds-react-box": "*",
-    "@sproutsocial/seeds-motion": "*"
+    "@sproutsocial/seeds-react-theme": "^2.2.0",
+    "@sproutsocial/seeds-react-system-props": "^3.0.1",
+    "@sproutsocial/seeds-react-popout": "^2.1.0",
+    "@sproutsocial/seeds-react-box": "^1.1.1",
+    "@sproutsocial/seeds-motion": "^1.8.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",
@@ -35,11 +35,11 @@
     "@sproutsocial/seeds-tsconfig": "*",
     "@sproutsocial/seeds-testing": "*",
     "@sproutsocial/seeds-react-testing-library": "*",
-    "@sproutsocial/seeds-react-icon": "*",
-    "@sproutsocial/seeds-react-banner": "*",
-    "@sproutsocial/seeds-react-button": "*",
-    "@sproutsocial/seeds-react-text": "*",
-    "@sproutsocial/seeds-react-portal": "*"
+    "@sproutsocial/seeds-react-icon": "^1.1.1",
+    "@sproutsocial/seeds-react-banner": "^1.0.0",
+    "@sproutsocial/seeds-react-button": "^1.2.0",
+    "@sproutsocial/seeds-react-text": "^1.3.0",
+    "@sproutsocial/seeds-react-portal": "^1.1.0"
   },
   "peerDependencies": {
     "styled-components": "^5.2.3"