@artsy/palette 46.4.0 → 46.5.0

package/dist/cjs/elements/SelectInput/SelectInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectInput.js","names":["_composeReactRefs","_interopRequireDefault","require","_themeGet","_react","_interopRequireWildcard","_styledComponents","_styledSystem","_utils","_Box","_Text","_tokens","_RequiredField","_SelectInputList","_Select","_Clickable","_jsxRuntime","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","SelectInput","exports","React","forwardRef","className","enableSearch","disabled","dropdownValue","error","focus","hover","label","inputValue","onSelect","options","required","selectWidth","optionTextMinWidth","rest","forwardedRef","length","Error","inputRef","useRef","containerRef","defaultOption","useMemo","find","option","value","boxProps","inputProps","splitBoxProps","open","setOpen","useState","selectedOption","setSelectedOption","anchorRef","tooltipRef","usePosition","position","offset","active","flip","width","useWidthOf","ref","inputName","name","handleSelect","current","handleFocusChange","useCallback","focused","containsFocusRef","useContainsFocus","onChange","handleClose","jsxs","Box","composeRefs","children","SelectInputContainer","placeholder","jsx","SelectInputSelect","onClick","text","SelectInputInput","maxLength","SelectInputLabel","htmlFor","SelectInputDropdown","role","SelectInputList","onClose","RequiredField","mt","ml","Text","variant","mr","color","textAlign","displayName","styled","withConfig","componentId","props","css","SELECT_INPUT_STATES","completed","Clickable","caretMixin","p","themeGet","input","systemHeight"],"sources":["../../../../src/elements/SelectInput/SelectInput.tsx"],"sourcesContent":["import composeRefs from \"@seznam/compose-react-refs\"\nimport { themeGet } from \"@styled-system/theme-get\"\nimport React, { useCallback, useMemo, useRef, useState } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { height as systemHeight } from \"styled-system\"\nimport { useContainsFocus, usePosition, useWidthOf } from \"../../utils\"\nimport { Box, splitBoxProps } from \"../Box\"\nimport { InputProps } from \"../Input\"\nimport { Text, TextProps } from \"../Text\"\nimport { SELECT_INPUT_STATES } from \"./tokens\"\nimport { RequiredField } from \"../../shared/RequiredField\"\nimport { Option, SelectInputList } from \"./SelectInputList\"\nimport { caretMixin } from \"../Select\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\n\nexport interface SelectInputProps extends Omit<InputProps, \"onSelect\"> {\n  active?: boolean\n  enableSearch?: boolean\n  disabled?: boolean\n  dropdownValue?: string\n  error?: string | boolean\n  focus?: boolean\n  hover?: boolean\n  inputValue?: string\n  label: string\n  onSelect: (option: Option) => void\n  options: Option[]\n  required?: boolean\n  /** Controls the width of the left hand select dropdown UI */\n  selectWidth?: ClickableProps[\"width\"]\n  /** Controls the gap between the text and name labels in select options */\n  optionTextMinWidth?: TextProps[\"minWidth\"]\n}\n\nexport const SelectInput = React.forwardRef<HTMLInputElement, SelectInputProps>(\n  (\n    {\n      className,\n      enableSearch,\n      disabled,\n      dropdownValue,\n      error,\n      focus,\n      hover,\n      label,\n      inputValue,\n      onSelect,\n      options,\n      required,\n      selectWidth,\n      optionTextMinWidth,\n      ...rest\n    },\n    forwardedRef\n  ) => {\n    if (options.length === 0) {\n      throw new Error(\n        \"Palette SelectInput requires at least 1 option in the options prop\"\n      )\n    }\n\n    const inputRef = useRef<HTMLInputElement | null>(null)\n    const containerRef = useRef<HTMLDivElement | null>(null)\n\n    const defaultOption = useMemo(\n      () =>\n        dropdownValue &&\n        options.find((option) => option.value === dropdownValue),\n      [dropdownValue, options]\n    )\n\n    const [boxProps, inputProps] = splitBoxProps(rest)\n\n    const [open, setOpen] = useState(false)\n    const [selectedOption, setSelectedOption] = useState(\n      defaultOption || options[0]\n    )\n\n    const { anchorRef, tooltipRef } = usePosition({\n      position: \"bottom\",\n      offset: 10,\n      active: open,\n      flip: false,\n    })\n\n    const { width } = useWidthOf({ ref: anchorRef })\n\n    const inputName = inputProps.name || \"palette-select-input\"\n\n    const handleSelect = (option: Option) => {\n      setSelectedOption(option)\n      setOpen(false)\n      inputRef.current?.focus()\n      onSelect?.(option)\n    }\n\n    const handleFocusChange = useCallback(\n      (focused: boolean) => {\n        if (focused || !open) return\n        setOpen(false)\n      },\n      [open]\n    )\n\n    // Handle closing the dropdown when clicking outside of the input\n    // or when focus leaves the input completely\n    const { ref: containsFocusRef } = useContainsFocus({\n      onChange: handleFocusChange,\n    })\n\n    const handleClose = () => {\n      setOpen(false)\n    }\n\n    return (\n      <Box\n        ref={composeRefs(containerRef, containsFocusRef) as any}\n        width=\"100%\"\n        className={className}\n        {...boxProps}\n      >\n        <SelectInputContainer\n          ref={anchorRef as any}\n          open={open}\n          hover={hover}\n          focus={focus}\n          error={error}\n          disabled={disabled}\n          placeholder={inputProps.placeholder}\n        >\n          <SelectInputSelect\n            data-testid=\"country-picker\"\n            disabled={disabled}\n            onClick={() => {\n              setOpen(!disabled && !open)\n            }}\n            width={selectWidth}\n          >\n            {selectedOption.text}\n          </SelectInputSelect>\n\n          <SelectInputInput\n            disabled={disabled}\n            ref={composeRefs(inputRef, forwardedRef)}\n            required={required}\n            name={inputName}\n            maxLength={25}\n            placeholder={inputProps.placeholder}\n            value={inputValue}\n            {...inputProps}\n          />\n\n          <SelectInputLabel htmlFor={inputName}>{label}</SelectInputLabel>\n        </SelectInputContainer>\n\n        {open && (\n          <SelectInputDropdown\n            ref={tooltipRef as any}\n            role=\"listbox\"\n            width={width}\n          >\n            <SelectInputList\n              options={options}\n              onSelect={handleSelect}\n              onClose={handleClose}\n              enableSearch={enableSearch}\n              optionTextMinWidth={optionTextMinWidth}\n            />\n          </SelectInputDropdown>\n        )}\n\n        {required && !(error && typeof error === \"string\") && (\n          <RequiredField mt={0.5} ml={1} disabled={disabled} />\n        )}\n\n        {error && typeof error === \"string\" && (\n          <Text variant=\"xs\" mt={0.5} mr={1} color=\"red100\" textAlign=\"right\">\n            {error}\n          </Text>\n        )}\n      </Box>\n    )\n  }\n)\n\nSelectInput.displayName = \"SelectInput\"\n\ntype ContainerProps = Pick<\n  SelectInputProps,\n  \"disabled\" | \"error\" | \"hover\" | \"focus\" | \"placeholder\"\n> & { open: boolean }\n\nconst SelectInputContainer = styled(Box)<ContainerProps>`\n  position: relative;\n  display: flex;\n  flex-direction: row;\n\n  ${(props) => {\n    return css`\n      ${SELECT_INPUT_STATES.default}\n      ${props.hover && SELECT_INPUT_STATES.hover}\n      ${(props.focus || props.open) && SELECT_INPUT_STATES.focus}\n      ${props.disabled && SELECT_INPUT_STATES.disabled}\n      ${props.error && SELECT_INPUT_STATES.error}\n\n      &:hover {\n        /* Applies hover style if the dropdown is not visible or the input is disabled */\n        ${!props.open && !props.disabled && SELECT_INPUT_STATES.hover}\n      }\n\n      &:focus-within {\n        ${!props.disabled && SELECT_INPUT_STATES.focus}\n\n        &:has(input:not(:placeholder-shown)) {\n          ${SELECT_INPUT_STATES.active}\n          ${props.error && SELECT_INPUT_STATES.error};\n        }\n      }\n\n      &:has(input:not(:placeholder-shown)) {\n        ${!!props.placeholder && SELECT_INPUT_STATES.completed}\n        ${props.error && SELECT_INPUT_STATES.error};\n      }\n    `\n  }}\n`\n\nconst SelectInputSelect = styled(Clickable)<{ disabled?: boolean }>`\n  ${caretMixin}\n  display: flex;\n  align-items: center;\n  position: relative;\n  min-width: ${(p) => p.width ?? 120}px;\n  border: 1px solid;\n  border-right: 0;\n  /* 24px = space.1 + 4px-wide caret + space.1 */\n  padding: 0 24px 0 ${themeGet(\"space.1\")};\n  font-family: ${themeGet(\"fonts.sans\")};\n  border-radius: 3px 0 0 3px;\n  border-color: ${themeGet(\"colors.mono30\")};\n  cursor: pointer;\n  line-height: 1;\n  transition: color 0.25s, border-color 0.25s;\n  height: 50px;\n  font-size: ${themeGet(\"textVariants.sm-display.fontSize\")};\n  color: ${themeGet(\"colors.mono100\")};\n  &:focus {\n    outline: none;\n    text-decoration: underline;\n    color: ${themeGet(\"colors.blue100\")};\n  }\n`\n\nconst SelectInputDropdown = styled(Box)`\n  box-shadow: ${themeGet(\"effects.dropShadow\")};\n  background: ${themeGet(\"colors.mono0\")};\n  z-index: 1;\n  padding: ${themeGet(\"space.1\")};\n`\n\nconst SelectInputInput = styled.input`\n  width: 100%;\n  background-color: ${themeGet(\"colors.mono0\")};\n  padding: 0 ${themeGet(\"space.1\")};\n  appearance: none;\n  outline: none;\n  line-height: 1;\n  border: 1px solid;\n  border-radius: 0 3px 3px 0;\n  transition: color 0.25s, border-color 0.25s;\n  font-family: ${themeGet(\"fonts.sans\")};\n  font-size: ${themeGet(\"textVariants.sm-display.fontSize\")};\n  color: ${themeGet(\"colors.mono100\")};\n  border-color: ${themeGet(\"colors.mono30\")};\n  ${systemHeight}\n\n  ::placeholder {\n    color: ${themeGet(\"colors.mono60\")};\n    transition: color 0.25s;\n  }\n`\n\nconst SelectInputLabel = styled.label`\n  position: absolute;\n  top: 0;\n  left: 5px;\n  padding: 0 5px;\n  background-color: transparent;\n  transform: translateY(-50%);\n  transition: color 0.25s;\n  font-family: ${themeGet(\"fonts.sans\")};\n  pointer-events: none;\n  font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n  color: ${themeGet(\"colors.mono60\")};\n\n  &::after {\n    content: \"\";\n    display: block;\n    position: absolute;\n    top: 50%;\n    left: 0;\n    height: 2px;\n    width: 100%;\n    background-color: ${themeGet(\"colors.mono0\")};\n    z-index: -1;\n  }\n`\n"],"mappings":"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"}
+{"version":3,"file":"SelectInput.js","names":["_composeReactRefs","_interopRequireDefault","require","_themeGet","_react","_interopRequireWildcard","_styledComponents","_styledSystem","_utils","_Box","_Text","_tokens","_RequiredField","_SelectInputList","_Select","_Clickable","_jsxRuntime","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","SelectInput","exports","React","forwardRef","className","enableSearch","disabled","dropdownValue","error","focus","hover","label","inputValue","onSelect","options","required","selectWidth","optionTextMinWidth","rest","forwardedRef","length","Error","inputRef","useRef","containerRef","defaultOption","useMemo","find","option","value","boxProps","inputProps","splitBoxProps","open","setOpen","useState","selectedOption","setSelectedOption","anchorRef","tooltipRef","floatingStyles","usePosition","position","offset","active","flip","width","useWidthOf","ref","inputName","name","handleSelect","current","handleFocusChange","useCallback","focused","containsFocusRef","useContainsFocus","onChange","handleClose","jsxs","Box","composeRefs","children","SelectInputContainer","placeholder","jsx","SelectInputSelect","onClick","text","SelectInputInput","maxLength","SelectInputLabel","htmlFor","SelectInputDropdown","role","style","SelectInputList","onClose","RequiredField","mt","ml","Text","variant","mr","color","textAlign","displayName","styled","withConfig","componentId","props","css","SELECT_INPUT_STATES","completed","Clickable","caretMixin","p","themeGet","input","systemHeight"],"sources":["../../../../src/elements/SelectInput/SelectInput.tsx"],"sourcesContent":["import composeRefs from \"@seznam/compose-react-refs\"\nimport { themeGet } from \"@styled-system/theme-get\"\nimport React, { useCallback, useMemo, useRef, useState } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { height as systemHeight } from \"styled-system\"\nimport { useContainsFocus, usePosition, useWidthOf } from \"../../utils\"\nimport { Box, splitBoxProps } from \"../Box\"\nimport { InputProps } from \"../Input\"\nimport { Text, TextProps } from \"../Text\"\nimport { SELECT_INPUT_STATES } from \"./tokens\"\nimport { RequiredField } from \"../../shared/RequiredField\"\nimport { Option, SelectInputList } from \"./SelectInputList\"\nimport { caretMixin } from \"../Select\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\n\nexport interface SelectInputProps extends Omit<InputProps, \"onSelect\"> {\n  active?: boolean\n  enableSearch?: boolean\n  disabled?: boolean\n  dropdownValue?: string\n  error?: string | boolean\n  focus?: boolean\n  hover?: boolean\n  inputValue?: string\n  label: string\n  onSelect: (option: Option) => void\n  options: Option[]\n  required?: boolean\n  /** Controls the width of the left hand select dropdown UI */\n  selectWidth?: ClickableProps[\"width\"]\n  /** Controls the gap between the text and name labels in select options */\n  optionTextMinWidth?: TextProps[\"minWidth\"]\n}\n\nexport const SelectInput = React.forwardRef<HTMLInputElement, SelectInputProps>(\n  (\n    {\n      className,\n      enableSearch,\n      disabled,\n      dropdownValue,\n      error,\n      focus,\n      hover,\n      label,\n      inputValue,\n      onSelect,\n      options,\n      required,\n      selectWidth,\n      optionTextMinWidth,\n      ...rest\n    },\n    forwardedRef\n  ) => {\n    if (options.length === 0) {\n      throw new Error(\n        \"Palette SelectInput requires at least 1 option in the options prop\"\n      )\n    }\n\n    const inputRef = useRef<HTMLInputElement | null>(null)\n    const containerRef = useRef<HTMLDivElement | null>(null)\n\n    const defaultOption = useMemo(\n      () =>\n        dropdownValue &&\n        options.find((option) => option.value === dropdownValue),\n      [dropdownValue, options]\n    )\n\n    const [boxProps, inputProps] = splitBoxProps(rest)\n\n    const [open, setOpen] = useState(false)\n    const [selectedOption, setSelectedOption] = useState(\n      defaultOption || options[0]\n    )\n\n    const { anchorRef, tooltipRef, floatingStyles } = usePosition({\n      position: \"bottom\",\n      offset: 10,\n      active: open,\n      flip: false,\n    })\n\n    const { width } = useWidthOf({ ref: anchorRef })\n\n    const inputName = inputProps.name || \"palette-select-input\"\n\n    const handleSelect = (option: Option) => {\n      setSelectedOption(option)\n      setOpen(false)\n      inputRef.current?.focus()\n      onSelect?.(option)\n    }\n\n    const handleFocusChange = useCallback(\n      (focused: boolean) => {\n        if (focused || !open) return\n        setOpen(false)\n      },\n      [open]\n    )\n\n    // Handle closing the dropdown when clicking outside of the input\n    // or when focus leaves the input completely\n    const { ref: containsFocusRef } = useContainsFocus({\n      onChange: handleFocusChange,\n    })\n\n    const handleClose = () => {\n      setOpen(false)\n    }\n\n    return (\n      <Box\n        ref={composeRefs(containerRef, containsFocusRef) as any}\n        width=\"100%\"\n        className={className}\n        {...boxProps}\n      >\n        <SelectInputContainer\n          ref={anchorRef as any}\n          open={open}\n          hover={hover}\n          focus={focus}\n          error={error}\n          disabled={disabled}\n          placeholder={inputProps.placeholder}\n        >\n          <SelectInputSelect\n            data-testid=\"country-picker\"\n            disabled={disabled}\n            onClick={() => {\n              setOpen(!disabled && !open)\n            }}\n            width={selectWidth}\n          >\n            {selectedOption.text}\n          </SelectInputSelect>\n\n          <SelectInputInput\n            disabled={disabled}\n            ref={composeRefs(inputRef, forwardedRef)}\n            required={required}\n            name={inputName}\n            maxLength={25}\n            placeholder={inputProps.placeholder}\n            value={inputValue}\n            {...inputProps}\n          />\n\n          <SelectInputLabel htmlFor={inputName}>{label}</SelectInputLabel>\n        </SelectInputContainer>\n\n        {open && (\n          <SelectInputDropdown\n            ref={tooltipRef as any}\n            role=\"listbox\"\n            width={width}\n            style={floatingStyles}\n          >\n            <SelectInputList\n              options={options}\n              onSelect={handleSelect}\n              onClose={handleClose}\n              enableSearch={enableSearch}\n              optionTextMinWidth={optionTextMinWidth}\n            />\n          </SelectInputDropdown>\n        )}\n\n        {required && !(error && typeof error === \"string\") && (\n          <RequiredField mt={0.5} ml={1} disabled={disabled} />\n        )}\n\n        {error && typeof error === \"string\" && (\n          <Text variant=\"xs\" mt={0.5} mr={1} color=\"red100\" textAlign=\"right\">\n            {error}\n          </Text>\n        )}\n      </Box>\n    )\n  }\n)\n\nSelectInput.displayName = \"SelectInput\"\n\ntype ContainerProps = Pick<\n  SelectInputProps,\n  \"disabled\" | \"error\" | \"hover\" | \"focus\" | \"placeholder\"\n> & { open: boolean }\n\nconst SelectInputContainer = styled(Box)<ContainerProps>`\n  position: relative;\n  display: flex;\n  flex-direction: row;\n\n  ${(props) => {\n    return css`\n      ${SELECT_INPUT_STATES.default}\n      ${props.hover && SELECT_INPUT_STATES.hover}\n      ${(props.focus || props.open) && SELECT_INPUT_STATES.focus}\n      ${props.disabled && SELECT_INPUT_STATES.disabled}\n      ${props.error && SELECT_INPUT_STATES.error}\n\n      &:hover {\n        /* Applies hover style if the dropdown is not visible or the input is disabled */\n        ${!props.open && !props.disabled && SELECT_INPUT_STATES.hover}\n      }\n\n      &:focus-within {\n        ${!props.disabled && SELECT_INPUT_STATES.focus}\n\n        &:has(input:not(:placeholder-shown)) {\n          ${SELECT_INPUT_STATES.active}\n          ${props.error && SELECT_INPUT_STATES.error};\n        }\n      }\n\n      &:has(input:not(:placeholder-shown)) {\n        ${!!props.placeholder && SELECT_INPUT_STATES.completed}\n        ${props.error && SELECT_INPUT_STATES.error};\n      }\n    `\n  }}\n`\n\nconst SelectInputSelect = styled(Clickable)<{ disabled?: boolean }>`\n  ${caretMixin}\n  display: flex;\n  align-items: center;\n  position: relative;\n  min-width: ${(p) => p.width ?? 120}px;\n  border: 1px solid;\n  border-right: 0;\n  /* 24px = space.1 + 4px-wide caret + space.1 */\n  padding: 0 24px 0 ${themeGet(\"space.1\")};\n  font-family: ${themeGet(\"fonts.sans\")};\n  border-radius: 3px 0 0 3px;\n  border-color: ${themeGet(\"colors.mono30\")};\n  cursor: pointer;\n  line-height: 1;\n  transition: color 0.25s, border-color 0.25s;\n  height: 50px;\n  font-size: ${themeGet(\"textVariants.sm-display.fontSize\")};\n  color: ${themeGet(\"colors.mono100\")};\n  &:focus {\n    outline: none;\n    text-decoration: underline;\n    color: ${themeGet(\"colors.blue100\")};\n  }\n`\n\nconst SelectInputDropdown = styled(Box)`\n  box-shadow: ${themeGet(\"effects.dropShadow\")};\n  background: ${themeGet(\"colors.mono0\")};\n  z-index: 1;\n  padding: ${themeGet(\"space.1\")};\n`\n\nconst SelectInputInput = styled.input`\n  width: 100%;\n  background-color: ${themeGet(\"colors.mono0\")};\n  padding: 0 ${themeGet(\"space.1\")};\n  appearance: none;\n  outline: none;\n  line-height: 1;\n  border: 1px solid;\n  border-radius: 0 3px 3px 0;\n  transition: color 0.25s, border-color 0.25s;\n  font-family: ${themeGet(\"fonts.sans\")};\n  font-size: ${themeGet(\"textVariants.sm-display.fontSize\")};\n  color: ${themeGet(\"colors.mono100\")};\n  border-color: ${themeGet(\"colors.mono30\")};\n  ${systemHeight}\n\n  ::placeholder {\n    color: ${themeGet(\"colors.mono60\")};\n    transition: color 0.25s;\n  }\n`\n\nconst SelectInputLabel = styled.label`\n  position: absolute;\n  top: 0;\n  left: 5px;\n  padding: 0 5px;\n  background-color: transparent;\n  transform: translateY(-50%);\n  transition: color 0.25s;\n  font-family: ${themeGet(\"fonts.sans\")};\n  pointer-events: none;\n  font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n  color: ${themeGet(\"colors.mono60\")};\n\n  &::after {\n    content: \"\";\n    display: block;\n    position: absolute;\n    top: 50%;\n    left: 0;\n    height: 2px;\n    width: 100%;\n    background-color: ${themeGet(\"colors.mono0\")};\n    z-index: -1;\n  }\n`\n"],"mappings":"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"}

package/dist/cjs/elements/Sup/Sup.d.ts

@@ -4,7 +4,7 @@ export declare const Sup: import("styled-components/dist/types").IStyledComponen
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }, Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("..").BoxProps> & import("..").BoxProps, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}>, TextProps>, "p" | "top" | "bottom" | "left" | "right" | "position" | "padding" | "width" | "height" | "gap" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "backgroundImage" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxShadow" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "textAlign" | "textTransform" | "verticalAlign" | "zIndex" | "background" | "backgroundPosition" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "lineClamp" | "margin" | "overflow" | "bg" | "borderX" | "borderY" | "size" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "textColor" | "variant" | "hyphenate" | "overflowEllipsis"> & import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & Omit<import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, "color"> & {
+}>, TextProps>, "p" | "top" | "bottom" | "left" | "right" | "padding" | "width" | "height" | "position" | "size" | "flex" | "border" | "gap" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "backgroundImage" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxShadow" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "textAlign" | "textTransform" | "verticalAlign" | "zIndex" | "background" | "backgroundPosition" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "gridArea" | "lineClamp" | "margin" | "overflow" | "bg" | "borderX" | "borderY" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "textColor" | "variant" | "hyphenate" | "overflowEllipsis"> & import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & Omit<import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, "color"> & {
     variant?: import("styled-system").ResponsiveValue<import("@artsy/palette-tokens/dist/typography/v3").TextVariant>;
     textColor?: import("styled-system").ResponsiveValue<import("@artsy/palette-tokens").Color>;
     lineClamp?: number;

package/dist/cjs/elements/Tooltip/Tooltip.js

@@ -52,16 +52,18 @@ const Tooltip = ({
   const deactivate = () => {
     setActive(false);
   };
+  const arrowRef = (0, _react.useRef)(null);
   const {
     anchorRef,
     tooltipRef,
-    state: {
-      isFlipped
-    }
+    floatingStyles,
+    context,
+    rects
   } = (0, _usePosition.usePosition)({
     position: placement,
     offset,
-    active: visible ?? active
+    active: visible ?? active,
+    arrowRef: arrowRef
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/_react.default.cloneElement(children, {
@@ -77,20 +79,17 @@ const Tooltip = ({
       variant: variant,
       width: width,
       zIndex: zIndex,
-      style:
-      // If visible is explictly set to `false` then the tooltip should be hidden
-      // Otherwise it should be visible or utilize the active state.
-      visible !== false ? {
-        opacity: visible ?? active ? 1 : 0
-      } : {
-        opacity: 0
+      style: {
+        ...floatingStyles,
+        // If visible is explictly set to `false` then the tooltip should be hidden
+        // Otherwise it should be visible or utilize the active state.
+        opacity: visible !== false ? visible ?? active ? 1 : 0 : 0
       },
       children: [pointer && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pointer.Pointer, {
-        anchorRef: anchorRef,
-        tooltipRef: tooltipRef,
-        variant: variant,
-        placement: placement,
-        isFlipped: isFlipped
+        ref: arrowRef,
+        context: context,
+        rects: rects,
+        variant: variant
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Panel, {
         variant: variant,
         p: 1,
@@ -107,7 +106,7 @@ exports.Tooltip = Tooltip;
 const Tip = (0, _styledComponents.default)(_Box.Box).withConfig({
   displayName: "Tooltip__Tip",
   componentId: "sc-ymkaxc-0"
-})(["position:absolute;transition:opacity 250ms ease-out;text-align:left;box-shadow:", ";cursor:default;pointer-events:none;font-weight:normal;font-style:normal;", ""], (0, _themeGet.themeGet)("effects.dropShadow"), (0, _styledSystem.variant)({
+})(["transition:opacity 250ms ease-out;text-align:left;box-shadow:", ";cursor:default;pointer-events:none;font-weight:normal;font-style:normal;", ""], (0, _themeGet.themeGet)("effects.dropShadow"), (0, _styledSystem.variant)({
   variants: TOOLTIP_VARIANTS
 }));
 const Panel = (0, _styledComponents.default)(_Box.Box).withConfig({

package/dist/cjs/elements/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_styledSystem","_helpers","_usePosition","_Box","_Pointer","_Text","_themeGet","_jsxRuntime","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","TOOLTIP_VARIANTS","exports","defaultLight","backgroundColor","color","defaultDark","Tooltip","children","content","width","offset","placement","pointer","variant","visible","zIndex","rest","active","setActive","useState","handleClick","prevActive","activate","deactivate","anchorRef","tooltipRef","state","isFlipped","usePosition","position","jsxs","Fragment","React","cloneElement","ref","tabIndex","onClick","compose","props","onMouseOver","onMouseOut","onFocus","onBlur","Tip","style","opacity","jsx","Pointer","Panel","p","isText","Text","styled","Box","withConfig","displayName","componentId","themeGet","variants","a","b","args"],"sources":["../../../../src/elements/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, { useState } from \"react\"\nimport styled from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport { isText } from \"../../helpers\"\nimport { Position, usePosition } from \"../../utils/usePosition\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Pointer } from \"../Pointer\"\nimport { Text } from \"../Text\"\nimport { themeGet } from \"@styled-system/theme-get\"\n\nexport const TOOLTIP_VARIANTS = {\n  defaultLight: {\n    backgroundColor: \"mono0\",\n    color: \"mono100\",\n  },\n  defaultDark: {\n    backgroundColor: \"mono100\",\n    color: \"mono0\",\n  },\n}\n\nexport type TooltipVariant = keyof typeof TOOLTIP_VARIANTS\n\nexport interface TooltipProps extends BoxProps {\n  /** Anchor element to attach to tooltip */\n  children: React.ReactElement<any, string | React.JSXElementConstructor<any>>\n  /** Content of tooltip */\n  content: React.ReactNode\n  offset?: number\n  placement?: Position\n  pointer?: boolean\n  variant?: TooltipVariant\n  visible?: boolean\n}\n\n/**\n * A tooltip\n */\nexport const Tooltip: React.FC<React.PropsWithChildren<TooltipProps>> = ({\n  children,\n  content,\n  width = 230,\n  offset = 10,\n  placement = \"top\",\n  pointer = false,\n  variant = \"defaultLight\",\n  visible,\n  zIndex = 1,\n  ...rest\n}) => {\n  const [active, setActive] = useState(false)\n\n  const handleClick = () => {\n    setActive((prevActive) => !prevActive)\n  }\n\n  const activate = () => {\n    setActive(true)\n  }\n\n  const deactivate = () => {\n    setActive(false)\n  }\n\n  const {\n    anchorRef,\n    tooltipRef,\n    state: { isFlipped },\n  } = usePosition({\n    position: placement,\n    offset,\n    active: visible ?? active,\n  })\n\n  return (\n    <>\n      {React.cloneElement(children, {\n        ref: anchorRef,\n        tabIndex: 0,\n        onClick: compose(handleClick, children.props?.onClick),\n        onMouseOver: compose(activate, children.props?.onMouseOver),\n        onMouseOut: compose(deactivate, children.props?.onMouseOut),\n        onFocus: compose(activate, children.props?.onFocus),\n        onBlur: compose(deactivate, children.props?.onBlur),\n      })}\n\n      <Tip\n        ref={tooltipRef as any}\n        variant={variant}\n        width={width}\n        zIndex={zIndex}\n        style={\n          // If visible is explictly set to `false` then the tooltip should be hidden\n          // Otherwise it should be visible or utilize the active state.\n          visible !== false\n            ? {\n                opacity: visible ?? active ? 1 : 0,\n              }\n            : { opacity: 0 }\n        }\n      >\n        {pointer && (\n          <Pointer\n            anchorRef={anchorRef}\n            tooltipRef={tooltipRef}\n            variant={variant}\n            placement={placement}\n            isFlipped={isFlipped}\n          />\n        )}\n\n        <Panel variant={variant} p={1} {...rest}>\n          {isText(content) ? <Text variant=\"xs\">{content}</Text> : content}\n        </Panel>\n      </Tip>\n    </>\n  )\n}\n\nconst Tip = styled(Box)<{ variant?: TooltipVariant }>`\n  position: absolute;\n  transition: opacity 250ms ease-out;\n  text-align: left;\n  box-shadow: ${themeGet(\"effects.dropShadow\")};\n  cursor: default;\n  pointer-events: none;\n  font-weight: normal;\n  font-style: normal;\n  ${variant({ variants: TOOLTIP_VARIANTS })}\n`\n\nconst Panel = styled(Box)<{ variant?: TooltipVariant }>`\n  ${variant({ variants: TOOLTIP_VARIANTS })}\n`\n\nconst compose = (a?: (...args: any) => any, b?: (...args: any) => any) => {\n  return (...args) => {\n    a?.(...args)\n    b?.(...args)\n  }\n}\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,aAAA,GAAAH,OAAA;AACA,IAAAI,QAAA,GAAAJ,OAAA;AACA,IAAAK,YAAA,GAAAL,OAAA;AACA,IAAAM,IAAA,GAAAN,OAAA;AACA,IAAAO,QAAA,GAAAP,OAAA;AACA,IAAAQ,KAAA,GAAAR,OAAA;AACA,IAAAS,SAAA,GAAAT,OAAA;AAAmD,IAAAU,WAAA,GAAAV,OAAA;AAAA,SAAAE,uBAAAS,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAhB,wBAAAY,GAAA,EAAAI,WAAA,SAAAA,WAAA,IAAAJ,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAQ,KAAA,GAAAL,wBAAA,CAAAC,WAAA,OAAAI,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAT,GAAA,YAAAQ,KAAA,CAAAE,GAAA,CAAAV,GAAA,SAAAW,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAhB,GAAA,QAAAgB,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAnB,GAAA,EAAAgB,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAf,GAAA,EAAAgB,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAhB,GAAA,CAAAgB,GAAA,SAAAL,MAAA,CAAAT,OAAA,GAAAF,GAAA,MAAAQ,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAArB,GAAA,EAAAW,MAAA,YAAAA,MAAA;AAE5C,MAAMW,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,GAAG;EAC9BE,YAAY,EAAE;IACZC,eAAe,EAAE,OAAO;IACxBC,KAAK,EAAE;EACT,CAAC;EACDC,WAAW,EAAE;IACXF,eAAe,EAAE,SAAS;IAC1BC,KAAK,EAAE;EACT;AACF,CAAC;AAgBD;AACA;AACA;AACO,MAAME,OAAwD,GAAGA,CAAC;EACvEC,QAAQ;EACRC,OAAO;EACPC,KAAK,GAAG,GAAG;EACXC,MAAM,GAAG,EAAE;EACXC,SAAS,GAAG,KAAK;EACjBC,OAAO,GAAG,KAAK;EACfC,OAAO,GAAG,cAAc;EACxBC,OAAO;EACPC,MAAM,GAAG,CAAC;EACV,GAAGC;AACL,CAAC,KAAK;EACJ,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAG,IAAAC,eAAQ,EAAC,KAAK,CAAC;EAE3C,MAAMC,WAAW,GAAGA,CAAA,KAAM;IACxBF,SAAS,CAAEG,UAAU,IAAK,CAACA,UAAU,CAAC;EACxC,CAAC;EAED,MAAMC,QAAQ,GAAGA,CAAA,KAAM;IACrBJ,SAAS,CAAC,IAAI,CAAC;EACjB,CAAC;EAED,MAAMK,UAAU,GAAGA,CAAA,KAAM;IACvBL,SAAS,CAAC,KAAK,CAAC;EAClB,CAAC;EAED,MAAM;IACJM,SAAS;IACTC,UAAU;IACVC,KAAK,EAAE;MAAEC;IAAU;EACrB,CAAC,GAAG,IAAAC,wBAAW,EAAC;IACdC,QAAQ,EAAElB,SAAS;IACnBD,MAAM;IACNO,MAAM,EAAEH,OAAO,IAAIG;EACrB,CAAC,CAAC;EAEF,oBACE,IAAAxC,WAAA,CAAAqD,IAAA,EAAArD,WAAA,CAAAsD,QAAA;IAAAxB,QAAA,gBACGyB,cAAK,CAACC,YAAY,CAAC1B,QAAQ,EAAE;MAC5B2B,GAAG,EAAEV,SAAS;MACdW,QAAQ,EAAE,CAAC;MACXC,OAAO,EAAEC,OAAO,CAACjB,WAAW,EAAEb,QAAQ,CAAC+B,KAAK,EAAEF,OAAO,CAAC;MACtDG,WAAW,EAAEF,OAAO,CAACf,QAAQ,EAAEf,QAAQ,CAAC+B,KAAK,EAAEC,WAAW,CAAC;MAC3DC,UAAU,EAAEH,OAAO,CAACd,UAAU,EAAEhB,QAAQ,CAAC+B,KAAK,EAAEE,UAAU,CAAC;MAC3DC,OAAO,EAAEJ,OAAO,CAACf,QAAQ,EAAEf,QAAQ,CAAC+B,KAAK,EAAEG,OAAO,CAAC;MACnDC,MAAM,EAAEL,OAAO,CAACd,UAAU,EAAEhB,QAAQ,CAAC+B,KAAK,EAAEI,MAAM;IACpD,CAAC,CAAC,eAEF,IAAAjE,WAAA,CAAAqD,IAAA,EAACa,GAAG;MACFT,GAAG,EAAET,UAAkB;MACvBZ,OAAO,EAAEA,OAAQ;MACjBJ,KAAK,EAAEA,KAAM;MACbM,MAAM,EAAEA,MAAO;MACf6B,KAAK;MACH;MACA;MACA9B,OAAO,KAAK,KAAK,GACb;QACE+B,OAAO,EAAE/B,OAAO,IAAIG,MAAM,GAAG,CAAC,GAAG;MACnC,CAAC,GACD;QAAE4B,OAAO,EAAE;MAAE,CAClB;MAAAtC,QAAA,GAEAK,OAAO,iBACN,IAAAnC,WAAA,CAAAqE,GAAA,EAACxE,QAAA,CAAAyE,OAAO;QACNvB,SAAS,EAAEA,SAAU;QACrBC,UAAU,EAAEA,UAAW;QACvBZ,OAAO,EAAEA,OAAQ;QACjBF,SAAS,EAAEA,SAAU;QACrBgB,SAAS,EAAEA;MAAU,EAExB,eAED,IAAAlD,WAAA,CAAAqE,GAAA,EAACE,KAAK;QAACnC,OAAO,EAAEA,OAAQ;QAACoC,CAAC,EAAE,CAAE;QAAA,GAAKjC,IAAI;QAAAT,QAAA,EACpC,IAAA2C,eAAM,EAAC1C,OAAO,CAAC,gBAAG,IAAA/B,WAAA,CAAAqE,GAAA,EAACvE,KAAA,CAAA4E,IAAI;UAACtC,OAAO,EAAC,IAAI;UAAAN,QAAA,EAAEC;QAAO,EAAQ,GAAGA;MAAO,EAC1D;IAAA,EACJ;EAAA,EACL;AAEP,CAAC;AAAAP,OAAA,CAAAK,OAAA,GAAAA,OAAA;AAED,MAAMqC,GAAG,GAAG,IAAAS,yBAAM,EAACC,QAAG,CAAC,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,yKAIP,IAAAC,kBAAQ,EAAC,oBAAoB,CAAC,EAK1C,IAAA5C,qBAAO,EAAC;EAAE6C,QAAQ,EAAE1D;AAAiB,CAAC,CAAC,CAC1C;AAED,MAAMgD,KAAK,GAAG,IAAAI,yBAAM,EAACC,QAAG,CAAC,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,aACrB,IAAA3C,qBAAO,EAAC;EAAE6C,QAAQ,EAAE1D;AAAiB,CAAC,CAAC,CAC1C;AAED,MAAMqC,OAAO,GAAGA,CAACsB,CAAyB,EAAEC,CAAyB,KAAK;EACxE,OAAO,CAAC,GAAGC,IAAI,KAAK;IAClBF,CAAC,GAAG,GAAGE,IAAI,CAAC;IACZD,CAAC,GAAG,GAAGC,IAAI,CAAC;EACd,CAAC;AACH,CAAC"}
+{"version":3,"file":"Tooltip.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_styledSystem","_helpers","_usePosition","_Box","_Pointer","_Text","_themeGet","_jsxRuntime","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","TOOLTIP_VARIANTS","exports","defaultLight","backgroundColor","color","defaultDark","Tooltip","children","content","width","offset","placement","pointer","variant","visible","zIndex","rest","active","setActive","useState","handleClick","prevActive","activate","deactivate","arrowRef","useRef","anchorRef","tooltipRef","floatingStyles","context","rects","usePosition","position","jsxs","Fragment","React","cloneElement","ref","tabIndex","onClick","compose","props","onMouseOver","onMouseOut","onFocus","onBlur","Tip","style","opacity","jsx","Pointer","Panel","p","isText","Text","styled","Box","withConfig","displayName","componentId","themeGet","variants","a","b","args"],"sources":["../../../../src/elements/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, { useRef, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport { isText } from \"../../helpers\"\nimport { Position, usePosition } from \"../../utils/usePosition\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Pointer } from \"../Pointer\"\nimport { Text } from \"../Text\"\nimport { themeGet } from \"@styled-system/theme-get\"\n\nexport const TOOLTIP_VARIANTS = {\n  defaultLight: {\n    backgroundColor: \"mono0\",\n    color: \"mono100\",\n  },\n  defaultDark: {\n    backgroundColor: \"mono100\",\n    color: \"mono0\",\n  },\n}\n\nexport type TooltipVariant = keyof typeof TOOLTIP_VARIANTS\n\nexport interface TooltipProps extends BoxProps {\n  /** Anchor element to attach to tooltip */\n  children: React.ReactElement<any, string | React.JSXElementConstructor<any>>\n  /** Content of tooltip */\n  content: React.ReactNode\n  offset?: number\n  placement?: Position\n  pointer?: boolean\n  variant?: TooltipVariant\n  visible?: boolean\n}\n\n/**\n * A tooltip\n */\nexport const Tooltip: React.FC<React.PropsWithChildren<TooltipProps>> = ({\n  children,\n  content,\n  width = 230,\n  offset = 10,\n  placement = \"top\",\n  pointer = false,\n  variant = \"defaultLight\",\n  visible,\n  zIndex = 1,\n  ...rest\n}) => {\n  const [active, setActive] = useState(false)\n\n  const handleClick = () => {\n    setActive((prevActive) => !prevActive)\n  }\n\n  const activate = () => {\n    setActive(true)\n  }\n\n  const deactivate = () => {\n    setActive(false)\n  }\n\n  const arrowRef = useRef<SVGSVGElement | null>(null)\n\n  const {\n    anchorRef,\n    tooltipRef,\n    floatingStyles,\n    context,\n    rects,\n  } = usePosition({\n    position: placement,\n    offset,\n    active: visible ?? active,\n    arrowRef: arrowRef as React.RefObject<Element | null>,\n  })\n\n  return (\n    <>\n      {React.cloneElement(children, {\n        ref: anchorRef,\n        tabIndex: 0,\n        onClick: compose(handleClick, children.props?.onClick),\n        onMouseOver: compose(activate, children.props?.onMouseOver),\n        onMouseOut: compose(deactivate, children.props?.onMouseOut),\n        onFocus: compose(activate, children.props?.onFocus),\n        onBlur: compose(deactivate, children.props?.onBlur),\n      })}\n\n      <Tip\n        ref={tooltipRef as any}\n        variant={variant}\n        width={width}\n        zIndex={zIndex}\n        style={{\n          ...floatingStyles,\n          // If visible is explictly set to `false` then the tooltip should be hidden\n          // Otherwise it should be visible or utilize the active state.\n          opacity: visible !== false ? (visible ?? active ? 1 : 0) : 0,\n        }}\n      >\n        {pointer && (\n          <Pointer\n            ref={arrowRef}\n            context={context}\n            rects={rects}\n            variant={variant}\n          />\n        )}\n\n        <Panel variant={variant} p={1} {...rest}>\n          {isText(content) ? <Text variant=\"xs\">{content}</Text> : content}\n        </Panel>\n      </Tip>\n    </>\n  )\n}\n\nconst Tip = styled(Box)<{ variant?: TooltipVariant }>`\n  transition: opacity 250ms ease-out;\n  text-align: left;\n  box-shadow: ${themeGet(\"effects.dropShadow\")};\n  cursor: default;\n  pointer-events: none;\n  font-weight: normal;\n  font-style: normal;\n  ${variant({ variants: TOOLTIP_VARIANTS })}\n`\n\nconst Panel = styled(Box)<{ variant?: TooltipVariant }>`\n  ${variant({ variants: TOOLTIP_VARIANTS })}\n`\n\nconst compose = (a?: (...args: any) => any, b?: (...args: any) => any) => {\n  return (...args) => {\n    a?.(...args)\n    b?.(...args)\n  }\n}\n"],"mappings":"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"}

package/dist/cjs/utils/usePosition.d.ts

@@ -1,3 +1,5 @@
+import React from "react";
+import { Placement, AutoPlacementOptions, FlipOptions } from "@floating-ui/react";
 export declare const POSITION: {
     readonly "top-start": "top-start";
     readonly top: "top";
@@ -13,16 +15,29 @@ export declare const POSITION: {
     readonly "right-end": "right-end";
 };
 export type Position = keyof typeof POSITION;
-interface TargetPosition {
-    x: number;
-    y: number;
+export type PositionFlip = boolean | FlipOptions;
+export type PositionAutoPlacement = boolean | AutoPlacementOptions;
+/** Element rects captured mid-middleware-chain. */
+export interface PositionRects {
+    reference: {
+        width: number;
+        height: number;
+        x: number;
+        y: number;
+    };
+    floating: {
+        width: number;
+        height: number;
+        x: number;
+        y: number;
+    };
 }
 /**
  * Will position the floating element (tooltip) relative to the anchor element,
  * using `position: fixed` and in such a way that it shouldn't ever appear
  * partially offscreen and will move correctly when the parent is scrolled.
  */
-export declare const usePosition: ({ key, position, offset, active, flip, clamp, padding, }: {
+export declare const usePosition: ({ key, position, offset, active, flip, clamp, padding, autoPlacement, arrowRef, onOpenChange, }: {
     /** Listen to changes on this value */
     key?: string | number | boolean;
     /** Placement relative to anchor */
@@ -31,46 +46,65 @@ export declare const usePosition: ({ key, position, offset, active, flip, clamp,
     offset?: number;
     /** Optionally disable for performance (default: `true`) */
     active?: boolean;
-    /** Optionally disable flipping (default: `true`) */
-    flip?: boolean;
-    /** Optionally disable clamping (default: `true`) */
+    /**
+     * Flip to the opposite side when there is no space. Cannot be combined with
+     * `autoPlacement`. (default: `true`)
+     */
+    flip?: PositionFlip;
+    /** Optionally disable clamping along the axis (default: `true`) */
     clamp?: boolean;
     /** Add boundary padding (default: `0`) used when clamping */
     padding?: number;
+    /**
+     * When true, automatically selects the placement with the most available
+     * space instead of using `flip`. Mutually exclusive with `flip`.
+     * (default: `false`)
+     */
+    autoPlacement?: PositionAutoPlacement;
+    /**
+     * Ref to the arrow/pointer element. When provided, the `arrow()` middleware
+     * is added so that `arrowData` is populated with the exact x/y offset needed
+     * to keep the arrow pointing at the anchor even after shift clamping.
+     */
+    arrowRef?: React.RefObject<Element | null>;
+    /**
+     * Called by Floating UI interaction hooks (useHover, useClick, useDismiss)
+     * whenever they want to open or close the floating element.
+     * `reason` identifies the source ('hover', 'click', 'escape-key', etc.).
+     */
+    onOpenChange?: (open: boolean, event?: Event, reason?: string) => void;
 }) => {
-    tooltipRef: import("react").MutableRefObject<HTMLElement | null>;
-    anchorRef: import("react").MutableRefObject<HTMLElement | null>;
+    tooltipRef: React.MutableRefObject<HTMLElement | null>;
+    anchorRef: React.MutableRefObject<HTMLElement | null>;
+    resolvedPlacement: Position;
+    arrowData: {
+        x?: number;
+        y?: number;
+    } | undefined;
+    rects: PositionRects | undefined;
+    context: {
+        x: number;
+        y: number;
+        placement: Placement;
+        strategy: import("@floating-ui/utils").Strategy;
+        middlewareData: import("@floating-ui/core").MiddlewareData;
+        isPositioned: boolean;
+        update: () => void;
+        floatingStyles: React.CSSProperties;
+        open: boolean;
+        onOpenChange: (open: boolean, event?: Event, reason?: import("@floating-ui/react").OpenChangeReason) => void;
+        events: import("@floating-ui/react").FloatingEvents;
+        dataRef: React.MutableRefObject<import("@floating-ui/react").ContextData>;
+        nodeId: string | undefined;
+        floatingId: string | undefined;
+        refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
+        elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
+    };
     state: {
         isFlipped: boolean;
     };
+    floatingStyles: React.CSSProperties;
 };
-interface PlaceTooltip {
-    anchor: HTMLElement;
-    tooltip: HTMLElement;
-    position: Position;
-    offset?: number;
-    boundaryRect?: DOMRect;
-    flip?: boolean;
-    clamp?: boolean;
-    padding?: number;
-}
-export declare const placeTooltip: ({ anchor, tooltip, position, offset, boundaryRect, flip, clamp, padding, }: PlaceTooltip) => {
-    isFlipped: boolean;
-};
-export declare const getPosition: ({ elementRect, tooltipRect, position, }: {
-    elementRect: Pick<DOMRect, "width" | "height" | "top" | "right" | "bottom" | "left">;
-    tooltipRect: Pick<DOMRect, "width" | "height">;
-    position: Position;
-}) => TargetPosition;
-export declare const translateWithOffset: (targetPosition: TargetPosition, position: Position, offset: number) => string;
-export declare const getDocumentBoundingRect: () => DOMRect;
-interface ShouldFlip {
-    targetPosition: TargetPosition;
-    position: Position;
-    boundaryRect: Pick<DOMRect, "top" | "right" | "bottom" | "left">;
-    tooltipRect: Pick<DOMRect, "width" | "height">;
-}
-export declare const shouldFlip: ({ targetPosition, position, boundaryRect, tooltipRect, }: ShouldFlip) => boolean;
 /**
  * Calculate the maximum height available for a tooltip based on its placement and viewport constraints.
  */
@@ -79,4 +113,3 @@ export declare const calculateMaxHeight: ({ anchorRect, position, offset, }: {
     position: Position;
     offset?: number;
 }) => number;
-export {};