@plasmicpkgs/react-aria 0.0.144 → 0.0.145
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.
- package/dist/.tsbuildinfo +1 -1
- package/dist/react-aria.esm.js +2 -2
- package/dist/react-aria.esm.js.map +1 -1
- package/dist/react-aria.js +1 -1
- package/dist/react-aria.js.map +1 -1
- package/package.json +2 -2
- package/skinny/registerTooltip.cjs.js +1 -1
- package/skinny/registerTooltip.cjs.js.map +1 -1
- package/skinny/registerTooltip.esm.js +2 -2
- package/skinny/registerTooltip.esm.js.map +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@plasmicpkgs/react-aria",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.145",
|
|
4
4
|
"description": "Plasmic registration calls for react-aria based components",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -74,5 +74,5 @@
|
|
|
74
74
|
"publishConfig": {
|
|
75
75
|
"access": "public"
|
|
76
76
|
},
|
|
77
|
-
"gitHead": "
|
|
77
|
+
"gitHead": "131a98acb89746cee78ad0b55691e53bc673de8d"
|
|
78
78
|
}
|
|
@@ -94,7 +94,7 @@ function ControlledBaseTooltip(props) {
|
|
|
94
94
|
props
|
|
95
95
|
});
|
|
96
96
|
const ref = React.useRef(null);
|
|
97
|
-
const tooltipId =
|
|
97
|
+
const tooltipId = reactAria.useId();
|
|
98
98
|
const state = reactStately.useTooltipTriggerState(__spreadProps(__spreadValues({}, props), {
|
|
99
99
|
isOpen: isCanvasAwareOpen,
|
|
100
100
|
trigger: trigger === "focus" ? trigger : void 0
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"registerTooltip.cjs.js","sources":["../src/registerTooltip.tsx"],"sourcesContent":["import React, { useCallback, useContext, useId, useRef, useState } from \"react\";\nimport { mergeProps, useFocusWithin, useHover } from \"react-aria\";\nimport {\n Provider,\n Tooltip,\n TooltipProps,\n TooltipTriggerStateContext,\n} from \"react-aria-components\";\nimport { TooltipTriggerProps, useTooltipTriggerState } from \"react-stately\";\nimport { COMMON_STYLES, getCommonOverlayProps } from \"./common\";\nimport {\n CodeComponentMetaOverrides,\n PlasmicCanvasProps,\n Registerable,\n registerComponentHelper,\n useIsOpen,\n} from \"./utils\";\n\nexport interface BaseTooltipProps\n extends Omit<TooltipTriggerProps, \"trigger\">,\n TooltipProps,\n PlasmicCanvasProps {\n children: React.ReactElement<HTMLElement>;\n tooltipContent?: React.ReactElement;\n resetClassName?: string;\n trigger?: \"focus\" | \"focus and hover\" | undefined;\n className?: string;\n}\n\n// In Studio, the tooltip is always controlled because isOpen is attached to the code component's state.\n// In Codegen, the user decides whether the tooltip is controlled or not. So we need to handle both cases.\nexport function BaseTooltip(props: BaseTooltipProps) {\n if (props.isOpen !== undefined) {\n return <ControlledBaseTooltip {...props} />;\n } else {\n return <UncontrolledBaseTooltip {...props} />;\n }\n}\n\nfunction UncontrolledBaseTooltip({ onOpenChange, ...props }: BaseTooltipProps) {\n const [open, setOpen] = useState(props.defaultOpen ?? false);\n const onOpenChangeMerged = useCallback(\n (newOpen: boolean) => {\n setOpen(newOpen);\n onOpenChange?.(newOpen);\n },\n [onOpenChange]\n );\n return (\n <ControlledBaseTooltip\n {...props}\n isOpen={open}\n onOpenChange={onOpenChangeMerged}\n />\n );\n}\n\nfunction ControlledBaseTooltip(props: BaseTooltipProps) {\n const {\n children,\n isDisabled = false,\n delay,\n closeDelay,\n trigger,\n isOpen,\n tooltipContent,\n resetClassName,\n placement,\n offset,\n crossOffset,\n shouldFlip,\n className,\n onOpenChange = () => {},\n } = props;\n\n const isCanvasAwareOpen = useIsOpen({\n triggerSlotName: \"children\",\n isOpen,\n props,\n });\n\n // The following is a custom implementation of the <TooltipTrigger /> component.\n // The default <TooltipTrigger /> from react-aria-components automatically manages state changes when a useFocusable element (e.g., an Aria Button) is clicked.\n // However, in our custom trigger, <TriggerWrapper>, we use useFocusWithin to explicitly handle state changes, allowing any element—not just an Aria Button—to act as a trigger.\n // However, this results in duplicate state updates when using an Aria Button, as state changes are triggered both by useFocusWithin and useFocusable.\n // Consequently, onOpenChange is called twice.\n //\n // This implementation is adapted from:\n // https://github.com/adobe/react-spectrum/blob/988096cf3f1dbd59f274d8c552e9fe7d5dcf4f41/packages/react-aria-components/src/Tooltip.tsx#L89\n // The <FocusableProvider> has been removed, as it handles automatic state updates for the Aria Button.\n const ref = useRef<any>(null);\n const tooltipId = useId();\n\n const state = useTooltipTriggerState({\n ...props,\n isOpen: isCanvasAwareOpen,\n trigger: trigger === \"focus\" ? trigger : undefined,\n });\n\n return (\n // TooltipTriggerStateContext used by BaseOverlayArrow\n <Provider values={[[TooltipTriggerStateContext, state]]}>\n <TriggerWrapper\n ref={ref}\n className={className}\n tooltipId={state.isOpen ? tooltipId : undefined}\n isDisabled={isDisabled}\n triggerOnFocusOnly={trigger === \"focus\"}\n >\n {children}\n </TriggerWrapper>\n <Tooltip\n triggerRef={ref}\n // @ts-expect-error <Tooltip> is wrongly typed to not have id prop\n id={tooltipId}\n offset={offset}\n delay={delay}\n closeDelay={closeDelay}\n crossOffset={crossOffset}\n shouldFlip={shouldFlip}\n className={resetClassName}\n onOpenChange={onOpenChange}\n placement={placement}\n >\n {tooltipContent}\n </Tooltip>\n </Provider>\n );\n}\n\ninterface TriggerWrapperProps {\n children: React.ReactElement;\n isDisabled: boolean;\n triggerOnFocusOnly: boolean;\n tooltipId?: string;\n className?: string;\n}\n\n// React Aria's TooltipTrigger requires a focusable element with ref.\n// To make sure that this requirement is fulfilled, wrap everything in a focusable div.\n// https://react-spectrum.adobe.com/react-aria/Tooltip.html#example\n// (In the example, Aria Button works as a trigger because it uses useFocusable behind the scenes)\n//\n// Discussion (React-aria-components TooltipTrigger with custom button):\n// https://github.com/adobe/react-spectrum/discussions/5119#discussioncomment-7084661\nconst TriggerWrapper = React.forwardRef<HTMLDivElement, TriggerWrapperProps>(\n function TriggerWrapper_(\n { children, isDisabled, triggerOnFocusOnly, tooltipId, className },\n ref: React.Ref<HTMLDivElement>\n ) {\n const state = useContext(TooltipTriggerStateContext)!;\n\n const { hoverProps } = useHover({\n isDisabled,\n onHoverStart: () => !triggerOnFocusOnly && state.open(),\n onHoverEnd: () => !triggerOnFocusOnly && state.close(),\n });\n\n // useFocusWithin captures focus events for all nested focusable elements\n const { focusWithinProps } = useFocusWithin({\n isDisabled,\n onFocusWithin: () => state.open(),\n onBlurWithin: () => state.close(),\n });\n\n const mergedProps = mergeProps(hoverProps, focusWithinProps, {\n \"aria-describedby\": tooltipId,\n // We expose className to allow user control over the wrapper div's styling.\n className,\n ref,\n style: COMMON_STYLES,\n });\n\n return <div {...mergedProps}>{children}</div>;\n }\n);\n\nexport function registerTooltip(\n loader?: Registerable,\n overrides?: CodeComponentMetaOverrides<typeof BaseTooltip>\n) {\n registerComponentHelper(\n loader,\n BaseTooltip,\n {\n name: \"plasmic-react-aria-tooltip\",\n displayName: \"Aria Tooltip\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerTooltip\",\n importName: \"BaseTooltip\",\n isAttachment: true,\n props: {\n children: {\n type: \"slot\",\n mergeWithParent: true,\n displayName: \"Trigger\",\n defaultValue: {\n type: \"text\",\n value: \"Hover me!\",\n styles: {\n width: \"hug\",\n },\n },\n },\n tooltipContent: {\n type: \"slot\",\n mergeWithParent: true,\n displayName: \"Tooltip Content\",\n // NOTE: This is not applied in attachment\n defaultValue: {\n type: \"text\",\n value: \"Hello from Tooltip!\",\n styles: {\n background: \"black\",\n color: \"white\",\n padding: \"7px\",\n borderRadius: \"7px\",\n },\n },\n },\n resetClassName: {\n type: \"themeResetClass\",\n },\n isDisabled: {\n type: \"boolean\",\n },\n delay: {\n type: \"number\",\n // Default value is explicitly set to 0 to prevent users from mistakenly thinking the tooltip isn’t opening due to a delay.\n defaultValue: 0,\n defaultValueHint: 0,\n description:\n \"The delay (in milliseconds) for the tooltip to show up.\",\n },\n closeDelay: {\n type: \"number\",\n // Default value is explicitly set to 0 to prevent users from mistakenly thinking the tooltip isn’t closing due to a delay.\n defaultValue: 0,\n defaultValueHint: 0,\n description: \"The delay (in milliseconds) for the tooltip to close.\",\n },\n trigger: {\n type: \"choice\",\n options: [\"focus\", \"focus and hover\"],\n defaultValueHint: \"focus and hover\",\n },\n ...getCommonOverlayProps<BaseTooltipProps>(\"popover\", {\n placement: { defaultValueHint: \"top\" },\n offset: { defaultValueHint: 0 },\n containerPadding: { defaultValueHint: 12 },\n crossOffset: { defaultValueHint: 0 },\n }),\n isOpen: {\n type: \"boolean\",\n editOnly: true,\n uncontrolledProp: \"defaultOpen\",\n description: \"Whether the overlay is open by default\",\n defaultValueHint: false,\n hidden: () => true,\n },\n onOpenChange: {\n type: \"eventHandler\",\n argTypes: [{ name: \"isOpen\", type: \"boolean\" }],\n },\n },\n states: {\n isOpen: {\n type: \"writable\",\n valueProp: \"isOpen\",\n onChangeProp: \"onOpenChange\",\n variableType: \"boolean\",\n },\n },\n trapsFocus: true,\n },\n overrides\n );\n}\n"],"names":["React","_a","useState","useCallback","useIsOpen","useRef","useId","useTooltipTriggerState","Provider","TooltipTriggerStateContext","Tooltip","useContext","useHover","useFocusWithin","mergeProps","COMMON_STYLES","registerComponentHelper","getCommonOverlayProps"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"registerTooltip.cjs.js","sources":["../src/registerTooltip.tsx"],"sourcesContent":["import React, { useCallback, useContext, useRef, useState } from \"react\";\nimport { mergeProps, useFocusWithin, useHover, useId } from \"react-aria\";\nimport {\n Provider,\n Tooltip,\n TooltipProps,\n TooltipTriggerStateContext,\n} from \"react-aria-components\";\nimport { TooltipTriggerProps, useTooltipTriggerState } from \"react-stately\";\nimport { COMMON_STYLES, getCommonOverlayProps } from \"./common\";\nimport {\n CodeComponentMetaOverrides,\n PlasmicCanvasProps,\n Registerable,\n registerComponentHelper,\n useIsOpen,\n} from \"./utils\";\n\nexport interface BaseTooltipProps\n extends Omit<TooltipTriggerProps, \"trigger\">,\n TooltipProps,\n PlasmicCanvasProps {\n children: React.ReactElement<HTMLElement>;\n tooltipContent?: React.ReactElement;\n resetClassName?: string;\n trigger?: \"focus\" | \"focus and hover\" | undefined;\n className?: string;\n}\n\n// In Studio, the tooltip is always controlled because isOpen is attached to the code component's state.\n// In Codegen, the user decides whether the tooltip is controlled or not. So we need to handle both cases.\nexport function BaseTooltip(props: BaseTooltipProps) {\n if (props.isOpen !== undefined) {\n return <ControlledBaseTooltip {...props} />;\n } else {\n return <UncontrolledBaseTooltip {...props} />;\n }\n}\n\nfunction UncontrolledBaseTooltip({ onOpenChange, ...props }: BaseTooltipProps) {\n const [open, setOpen] = useState(props.defaultOpen ?? false);\n const onOpenChangeMerged = useCallback(\n (newOpen: boolean) => {\n setOpen(newOpen);\n onOpenChange?.(newOpen);\n },\n [onOpenChange]\n );\n return (\n <ControlledBaseTooltip\n {...props}\n isOpen={open}\n onOpenChange={onOpenChangeMerged}\n />\n );\n}\n\nfunction ControlledBaseTooltip(props: BaseTooltipProps) {\n const {\n children,\n isDisabled = false,\n delay,\n closeDelay,\n trigger,\n isOpen,\n tooltipContent,\n resetClassName,\n placement,\n offset,\n crossOffset,\n shouldFlip,\n className,\n onOpenChange = () => {},\n } = props;\n\n const isCanvasAwareOpen = useIsOpen({\n triggerSlotName: \"children\",\n isOpen,\n props,\n });\n\n // The following is a custom implementation of the <TooltipTrigger /> component.\n // The default <TooltipTrigger /> from react-aria-components automatically manages state changes when a useFocusable element (e.g., an Aria Button) is clicked.\n // However, in our custom trigger, <TriggerWrapper>, we use useFocusWithin to explicitly handle state changes, allowing any element—not just an Aria Button—to act as a trigger.\n // However, this results in duplicate state updates when using an Aria Button, as state changes are triggered both by useFocusWithin and useFocusable.\n // Consequently, onOpenChange is called twice.\n //\n // This implementation is adapted from:\n // https://github.com/adobe/react-spectrum/blob/988096cf3f1dbd59f274d8c552e9fe7d5dcf4f41/packages/react-aria-components/src/Tooltip.tsx#L89\n // The <FocusableProvider> has been removed, as it handles automatic state updates for the Aria Button.\n const ref = useRef<any>(null);\n const tooltipId = useId();\n\n const state = useTooltipTriggerState({\n ...props,\n isOpen: isCanvasAwareOpen,\n trigger: trigger === \"focus\" ? trigger : undefined,\n });\n\n return (\n // TooltipTriggerStateContext used by BaseOverlayArrow\n <Provider values={[[TooltipTriggerStateContext, state]]}>\n <TriggerWrapper\n ref={ref}\n className={className}\n tooltipId={state.isOpen ? tooltipId : undefined}\n isDisabled={isDisabled}\n triggerOnFocusOnly={trigger === \"focus\"}\n >\n {children}\n </TriggerWrapper>\n <Tooltip\n triggerRef={ref}\n // @ts-expect-error <Tooltip> is wrongly typed to not have id prop\n id={tooltipId}\n offset={offset}\n delay={delay}\n closeDelay={closeDelay}\n crossOffset={crossOffset}\n shouldFlip={shouldFlip}\n className={resetClassName}\n onOpenChange={onOpenChange}\n placement={placement}\n >\n {tooltipContent}\n </Tooltip>\n </Provider>\n );\n}\n\ninterface TriggerWrapperProps {\n children: React.ReactElement;\n isDisabled: boolean;\n triggerOnFocusOnly: boolean;\n tooltipId?: string;\n className?: string;\n}\n\n// React Aria's TooltipTrigger requires a focusable element with ref.\n// To make sure that this requirement is fulfilled, wrap everything in a focusable div.\n// https://react-spectrum.adobe.com/react-aria/Tooltip.html#example\n// (In the example, Aria Button works as a trigger because it uses useFocusable behind the scenes)\n//\n// Discussion (React-aria-components TooltipTrigger with custom button):\n// https://github.com/adobe/react-spectrum/discussions/5119#discussioncomment-7084661\nconst TriggerWrapper = React.forwardRef<HTMLDivElement, TriggerWrapperProps>(\n function TriggerWrapper_(\n { children, isDisabled, triggerOnFocusOnly, tooltipId, className },\n ref: React.Ref<HTMLDivElement>\n ) {\n const state = useContext(TooltipTriggerStateContext)!;\n\n const { hoverProps } = useHover({\n isDisabled,\n onHoverStart: () => !triggerOnFocusOnly && state.open(),\n onHoverEnd: () => !triggerOnFocusOnly && state.close(),\n });\n\n // useFocusWithin captures focus events for all nested focusable elements\n const { focusWithinProps } = useFocusWithin({\n isDisabled,\n onFocusWithin: () => state.open(),\n onBlurWithin: () => state.close(),\n });\n\n const mergedProps = mergeProps(hoverProps, focusWithinProps, {\n \"aria-describedby\": tooltipId,\n // We expose className to allow user control over the wrapper div's styling.\n className,\n ref,\n style: COMMON_STYLES,\n });\n\n return <div {...mergedProps}>{children}</div>;\n }\n);\n\nexport function registerTooltip(\n loader?: Registerable,\n overrides?: CodeComponentMetaOverrides<typeof BaseTooltip>\n) {\n registerComponentHelper(\n loader,\n BaseTooltip,\n {\n name: \"plasmic-react-aria-tooltip\",\n displayName: \"Aria Tooltip\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerTooltip\",\n importName: \"BaseTooltip\",\n isAttachment: true,\n props: {\n children: {\n type: \"slot\",\n mergeWithParent: true,\n displayName: \"Trigger\",\n defaultValue: {\n type: \"text\",\n value: \"Hover me!\",\n styles: {\n width: \"hug\",\n },\n },\n },\n tooltipContent: {\n type: \"slot\",\n mergeWithParent: true,\n displayName: \"Tooltip Content\",\n // NOTE: This is not applied in attachment\n defaultValue: {\n type: \"text\",\n value: \"Hello from Tooltip!\",\n styles: {\n background: \"black\",\n color: \"white\",\n padding: \"7px\",\n borderRadius: \"7px\",\n },\n },\n },\n resetClassName: {\n type: \"themeResetClass\",\n },\n isDisabled: {\n type: \"boolean\",\n },\n delay: {\n type: \"number\",\n // Default value is explicitly set to 0 to prevent users from mistakenly thinking the tooltip isn’t opening due to a delay.\n defaultValue: 0,\n defaultValueHint: 0,\n description:\n \"The delay (in milliseconds) for the tooltip to show up.\",\n },\n closeDelay: {\n type: \"number\",\n // Default value is explicitly set to 0 to prevent users from mistakenly thinking the tooltip isn’t closing due to a delay.\n defaultValue: 0,\n defaultValueHint: 0,\n description: \"The delay (in milliseconds) for the tooltip to close.\",\n },\n trigger: {\n type: \"choice\",\n options: [\"focus\", \"focus and hover\"],\n defaultValueHint: \"focus and hover\",\n },\n ...getCommonOverlayProps<BaseTooltipProps>(\"popover\", {\n placement: { defaultValueHint: \"top\" },\n offset: { defaultValueHint: 0 },\n containerPadding: { defaultValueHint: 12 },\n crossOffset: { defaultValueHint: 0 },\n }),\n isOpen: {\n type: \"boolean\",\n editOnly: true,\n uncontrolledProp: \"defaultOpen\",\n description: \"Whether the overlay is open by default\",\n defaultValueHint: false,\n hidden: () => true,\n },\n onOpenChange: {\n type: \"eventHandler\",\n argTypes: [{ name: \"isOpen\", type: \"boolean\" }],\n },\n },\n states: {\n isOpen: {\n type: \"writable\",\n valueProp: \"isOpen\",\n onChangeProp: \"onOpenChange\",\n variableType: \"boolean\",\n },\n },\n trapsFocus: true,\n },\n overrides\n );\n}\n"],"names":["React","_a","useState","useCallback","useIsOpen","useRef","useId","useTooltipTriggerState","Provider","TooltipTriggerStateContext","Tooltip","useContext","useHover","useFocusWithin","mergeProps","COMMON_STYLES","registerComponentHelper","getCommonOverlayProps"],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import React, { useContext, useState, useCallback, useRef
|
|
2
|
-
import { useHover, useFocusWithin, mergeProps } from 'react-aria';
|
|
1
|
+
import React, { useContext, useState, useCallback, useRef } from 'react';
|
|
2
|
+
import { useHover, useFocusWithin, mergeProps, useId } from 'react-aria';
|
|
3
3
|
import { TooltipTriggerStateContext, Provider, Tooltip } from 'react-aria-components';
|
|
4
4
|
import { useTooltipTriggerState } from 'react-stately';
|
|
5
5
|
import { C as COMMON_STYLES, b as getCommonOverlayProps } from './common-3fde23cc.esm.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"registerTooltip.esm.js","sources":["../src/registerTooltip.tsx"],"sourcesContent":["import React, { useCallback, useContext, useId, useRef, useState } from \"react\";\nimport { mergeProps, useFocusWithin, useHover } from \"react-aria\";\nimport {\n Provider,\n Tooltip,\n TooltipProps,\n TooltipTriggerStateContext,\n} from \"react-aria-components\";\nimport { TooltipTriggerProps, useTooltipTriggerState } from \"react-stately\";\nimport { COMMON_STYLES, getCommonOverlayProps } from \"./common\";\nimport {\n CodeComponentMetaOverrides,\n PlasmicCanvasProps,\n Registerable,\n registerComponentHelper,\n useIsOpen,\n} from \"./utils\";\n\nexport interface BaseTooltipProps\n extends Omit<TooltipTriggerProps, \"trigger\">,\n TooltipProps,\n PlasmicCanvasProps {\n children: React.ReactElement<HTMLElement>;\n tooltipContent?: React.ReactElement;\n resetClassName?: string;\n trigger?: \"focus\" | \"focus and hover\" | undefined;\n className?: string;\n}\n\n// In Studio, the tooltip is always controlled because isOpen is attached to the code component's state.\n// In Codegen, the user decides whether the tooltip is controlled or not. So we need to handle both cases.\nexport function BaseTooltip(props: BaseTooltipProps) {\n if (props.isOpen !== undefined) {\n return <ControlledBaseTooltip {...props} />;\n } else {\n return <UncontrolledBaseTooltip {...props} />;\n }\n}\n\nfunction UncontrolledBaseTooltip({ onOpenChange, ...props }: BaseTooltipProps) {\n const [open, setOpen] = useState(props.defaultOpen ?? false);\n const onOpenChangeMerged = useCallback(\n (newOpen: boolean) => {\n setOpen(newOpen);\n onOpenChange?.(newOpen);\n },\n [onOpenChange]\n );\n return (\n <ControlledBaseTooltip\n {...props}\n isOpen={open}\n onOpenChange={onOpenChangeMerged}\n />\n );\n}\n\nfunction ControlledBaseTooltip(props: BaseTooltipProps) {\n const {\n children,\n isDisabled = false,\n delay,\n closeDelay,\n trigger,\n isOpen,\n tooltipContent,\n resetClassName,\n placement,\n offset,\n crossOffset,\n shouldFlip,\n className,\n onOpenChange = () => {},\n } = props;\n\n const isCanvasAwareOpen = useIsOpen({\n triggerSlotName: \"children\",\n isOpen,\n props,\n });\n\n // The following is a custom implementation of the <TooltipTrigger /> component.\n // The default <TooltipTrigger /> from react-aria-components automatically manages state changes when a useFocusable element (e.g., an Aria Button) is clicked.\n // However, in our custom trigger, <TriggerWrapper>, we use useFocusWithin to explicitly handle state changes, allowing any element—not just an Aria Button—to act as a trigger.\n // However, this results in duplicate state updates when using an Aria Button, as state changes are triggered both by useFocusWithin and useFocusable.\n // Consequently, onOpenChange is called twice.\n //\n // This implementation is adapted from:\n // https://github.com/adobe/react-spectrum/blob/988096cf3f1dbd59f274d8c552e9fe7d5dcf4f41/packages/react-aria-components/src/Tooltip.tsx#L89\n // The <FocusableProvider> has been removed, as it handles automatic state updates for the Aria Button.\n const ref = useRef<any>(null);\n const tooltipId = useId();\n\n const state = useTooltipTriggerState({\n ...props,\n isOpen: isCanvasAwareOpen,\n trigger: trigger === \"focus\" ? trigger : undefined,\n });\n\n return (\n // TooltipTriggerStateContext used by BaseOverlayArrow\n <Provider values={[[TooltipTriggerStateContext, state]]}>\n <TriggerWrapper\n ref={ref}\n className={className}\n tooltipId={state.isOpen ? tooltipId : undefined}\n isDisabled={isDisabled}\n triggerOnFocusOnly={trigger === \"focus\"}\n >\n {children}\n </TriggerWrapper>\n <Tooltip\n triggerRef={ref}\n // @ts-expect-error <Tooltip> is wrongly typed to not have id prop\n id={tooltipId}\n offset={offset}\n delay={delay}\n closeDelay={closeDelay}\n crossOffset={crossOffset}\n shouldFlip={shouldFlip}\n className={resetClassName}\n onOpenChange={onOpenChange}\n placement={placement}\n >\n {tooltipContent}\n </Tooltip>\n </Provider>\n );\n}\n\ninterface TriggerWrapperProps {\n children: React.ReactElement;\n isDisabled: boolean;\n triggerOnFocusOnly: boolean;\n tooltipId?: string;\n className?: string;\n}\n\n// React Aria's TooltipTrigger requires a focusable element with ref.\n// To make sure that this requirement is fulfilled, wrap everything in a focusable div.\n// https://react-spectrum.adobe.com/react-aria/Tooltip.html#example\n// (In the example, Aria Button works as a trigger because it uses useFocusable behind the scenes)\n//\n// Discussion (React-aria-components TooltipTrigger with custom button):\n// https://github.com/adobe/react-spectrum/discussions/5119#discussioncomment-7084661\nconst TriggerWrapper = React.forwardRef<HTMLDivElement, TriggerWrapperProps>(\n function TriggerWrapper_(\n { children, isDisabled, triggerOnFocusOnly, tooltipId, className },\n ref: React.Ref<HTMLDivElement>\n ) {\n const state = useContext(TooltipTriggerStateContext)!;\n\n const { hoverProps } = useHover({\n isDisabled,\n onHoverStart: () => !triggerOnFocusOnly && state.open(),\n onHoverEnd: () => !triggerOnFocusOnly && state.close(),\n });\n\n // useFocusWithin captures focus events for all nested focusable elements\n const { focusWithinProps } = useFocusWithin({\n isDisabled,\n onFocusWithin: () => state.open(),\n onBlurWithin: () => state.close(),\n });\n\n const mergedProps = mergeProps(hoverProps, focusWithinProps, {\n \"aria-describedby\": tooltipId,\n // We expose className to allow user control over the wrapper div's styling.\n className,\n ref,\n style: COMMON_STYLES,\n });\n\n return <div {...mergedProps}>{children}</div>;\n }\n);\n\nexport function registerTooltip(\n loader?: Registerable,\n overrides?: CodeComponentMetaOverrides<typeof BaseTooltip>\n) {\n registerComponentHelper(\n loader,\n BaseTooltip,\n {\n name: \"plasmic-react-aria-tooltip\",\n displayName: \"Aria Tooltip\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerTooltip\",\n importName: \"BaseTooltip\",\n isAttachment: true,\n props: {\n children: {\n type: \"slot\",\n mergeWithParent: true,\n displayName: \"Trigger\",\n defaultValue: {\n type: \"text\",\n value: \"Hover me!\",\n styles: {\n width: \"hug\",\n },\n },\n },\n tooltipContent: {\n type: \"slot\",\n mergeWithParent: true,\n displayName: \"Tooltip Content\",\n // NOTE: This is not applied in attachment\n defaultValue: {\n type: \"text\",\n value: \"Hello from Tooltip!\",\n styles: {\n background: \"black\",\n color: \"white\",\n padding: \"7px\",\n borderRadius: \"7px\",\n },\n },\n },\n resetClassName: {\n type: \"themeResetClass\",\n },\n isDisabled: {\n type: \"boolean\",\n },\n delay: {\n type: \"number\",\n // Default value is explicitly set to 0 to prevent users from mistakenly thinking the tooltip isn’t opening due to a delay.\n defaultValue: 0,\n defaultValueHint: 0,\n description:\n \"The delay (in milliseconds) for the tooltip to show up.\",\n },\n closeDelay: {\n type: \"number\",\n // Default value is explicitly set to 0 to prevent users from mistakenly thinking the tooltip isn’t closing due to a delay.\n defaultValue: 0,\n defaultValueHint: 0,\n description: \"The delay (in milliseconds) for the tooltip to close.\",\n },\n trigger: {\n type: \"choice\",\n options: [\"focus\", \"focus and hover\"],\n defaultValueHint: \"focus and hover\",\n },\n ...getCommonOverlayProps<BaseTooltipProps>(\"popover\", {\n placement: { defaultValueHint: \"top\" },\n offset: { defaultValueHint: 0 },\n containerPadding: { defaultValueHint: 12 },\n crossOffset: { defaultValueHint: 0 },\n }),\n isOpen: {\n type: \"boolean\",\n editOnly: true,\n uncontrolledProp: \"defaultOpen\",\n description: \"Whether the overlay is open by default\",\n defaultValueHint: false,\n hidden: () => true,\n },\n onOpenChange: {\n type: \"eventHandler\",\n argTypes: [{ name: \"isOpen\", type: \"boolean\" }],\n },\n },\n states: {\n isOpen: {\n type: \"writable\",\n valueProp: \"isOpen\",\n onChangeProp: \"onOpenChange\",\n variableType: \"boolean\",\n },\n },\n trapsFocus: true,\n },\n overrides\n );\n}\n"],"names":["_a"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"registerTooltip.esm.js","sources":["../src/registerTooltip.tsx"],"sourcesContent":["import React, { useCallback, useContext, useRef, useState } from \"react\";\nimport { mergeProps, useFocusWithin, useHover, useId } from \"react-aria\";\nimport {\n Provider,\n Tooltip,\n TooltipProps,\n TooltipTriggerStateContext,\n} from \"react-aria-components\";\nimport { TooltipTriggerProps, useTooltipTriggerState } from \"react-stately\";\nimport { COMMON_STYLES, getCommonOverlayProps } from \"./common\";\nimport {\n CodeComponentMetaOverrides,\n PlasmicCanvasProps,\n Registerable,\n registerComponentHelper,\n useIsOpen,\n} from \"./utils\";\n\nexport interface BaseTooltipProps\n extends Omit<TooltipTriggerProps, \"trigger\">,\n TooltipProps,\n PlasmicCanvasProps {\n children: React.ReactElement<HTMLElement>;\n tooltipContent?: React.ReactElement;\n resetClassName?: string;\n trigger?: \"focus\" | \"focus and hover\" | undefined;\n className?: string;\n}\n\n// In Studio, the tooltip is always controlled because isOpen is attached to the code component's state.\n// In Codegen, the user decides whether the tooltip is controlled or not. So we need to handle both cases.\nexport function BaseTooltip(props: BaseTooltipProps) {\n if (props.isOpen !== undefined) {\n return <ControlledBaseTooltip {...props} />;\n } else {\n return <UncontrolledBaseTooltip {...props} />;\n }\n}\n\nfunction UncontrolledBaseTooltip({ onOpenChange, ...props }: BaseTooltipProps) {\n const [open, setOpen] = useState(props.defaultOpen ?? false);\n const onOpenChangeMerged = useCallback(\n (newOpen: boolean) => {\n setOpen(newOpen);\n onOpenChange?.(newOpen);\n },\n [onOpenChange]\n );\n return (\n <ControlledBaseTooltip\n {...props}\n isOpen={open}\n onOpenChange={onOpenChangeMerged}\n />\n );\n}\n\nfunction ControlledBaseTooltip(props: BaseTooltipProps) {\n const {\n children,\n isDisabled = false,\n delay,\n closeDelay,\n trigger,\n isOpen,\n tooltipContent,\n resetClassName,\n placement,\n offset,\n crossOffset,\n shouldFlip,\n className,\n onOpenChange = () => {},\n } = props;\n\n const isCanvasAwareOpen = useIsOpen({\n triggerSlotName: \"children\",\n isOpen,\n props,\n });\n\n // The following is a custom implementation of the <TooltipTrigger /> component.\n // The default <TooltipTrigger /> from react-aria-components automatically manages state changes when a useFocusable element (e.g., an Aria Button) is clicked.\n // However, in our custom trigger, <TriggerWrapper>, we use useFocusWithin to explicitly handle state changes, allowing any element—not just an Aria Button—to act as a trigger.\n // However, this results in duplicate state updates when using an Aria Button, as state changes are triggered both by useFocusWithin and useFocusable.\n // Consequently, onOpenChange is called twice.\n //\n // This implementation is adapted from:\n // https://github.com/adobe/react-spectrum/blob/988096cf3f1dbd59f274d8c552e9fe7d5dcf4f41/packages/react-aria-components/src/Tooltip.tsx#L89\n // The <FocusableProvider> has been removed, as it handles automatic state updates for the Aria Button.\n const ref = useRef<any>(null);\n const tooltipId = useId();\n\n const state = useTooltipTriggerState({\n ...props,\n isOpen: isCanvasAwareOpen,\n trigger: trigger === \"focus\" ? trigger : undefined,\n });\n\n return (\n // TooltipTriggerStateContext used by BaseOverlayArrow\n <Provider values={[[TooltipTriggerStateContext, state]]}>\n <TriggerWrapper\n ref={ref}\n className={className}\n tooltipId={state.isOpen ? tooltipId : undefined}\n isDisabled={isDisabled}\n triggerOnFocusOnly={trigger === \"focus\"}\n >\n {children}\n </TriggerWrapper>\n <Tooltip\n triggerRef={ref}\n // @ts-expect-error <Tooltip> is wrongly typed to not have id prop\n id={tooltipId}\n offset={offset}\n delay={delay}\n closeDelay={closeDelay}\n crossOffset={crossOffset}\n shouldFlip={shouldFlip}\n className={resetClassName}\n onOpenChange={onOpenChange}\n placement={placement}\n >\n {tooltipContent}\n </Tooltip>\n </Provider>\n );\n}\n\ninterface TriggerWrapperProps {\n children: React.ReactElement;\n isDisabled: boolean;\n triggerOnFocusOnly: boolean;\n tooltipId?: string;\n className?: string;\n}\n\n// React Aria's TooltipTrigger requires a focusable element with ref.\n// To make sure that this requirement is fulfilled, wrap everything in a focusable div.\n// https://react-spectrum.adobe.com/react-aria/Tooltip.html#example\n// (In the example, Aria Button works as a trigger because it uses useFocusable behind the scenes)\n//\n// Discussion (React-aria-components TooltipTrigger with custom button):\n// https://github.com/adobe/react-spectrum/discussions/5119#discussioncomment-7084661\nconst TriggerWrapper = React.forwardRef<HTMLDivElement, TriggerWrapperProps>(\n function TriggerWrapper_(\n { children, isDisabled, triggerOnFocusOnly, tooltipId, className },\n ref: React.Ref<HTMLDivElement>\n ) {\n const state = useContext(TooltipTriggerStateContext)!;\n\n const { hoverProps } = useHover({\n isDisabled,\n onHoverStart: () => !triggerOnFocusOnly && state.open(),\n onHoverEnd: () => !triggerOnFocusOnly && state.close(),\n });\n\n // useFocusWithin captures focus events for all nested focusable elements\n const { focusWithinProps } = useFocusWithin({\n isDisabled,\n onFocusWithin: () => state.open(),\n onBlurWithin: () => state.close(),\n });\n\n const mergedProps = mergeProps(hoverProps, focusWithinProps, {\n \"aria-describedby\": tooltipId,\n // We expose className to allow user control over the wrapper div's styling.\n className,\n ref,\n style: COMMON_STYLES,\n });\n\n return <div {...mergedProps}>{children}</div>;\n }\n);\n\nexport function registerTooltip(\n loader?: Registerable,\n overrides?: CodeComponentMetaOverrides<typeof BaseTooltip>\n) {\n registerComponentHelper(\n loader,\n BaseTooltip,\n {\n name: \"plasmic-react-aria-tooltip\",\n displayName: \"Aria Tooltip\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerTooltip\",\n importName: \"BaseTooltip\",\n isAttachment: true,\n props: {\n children: {\n type: \"slot\",\n mergeWithParent: true,\n displayName: \"Trigger\",\n defaultValue: {\n type: \"text\",\n value: \"Hover me!\",\n styles: {\n width: \"hug\",\n },\n },\n },\n tooltipContent: {\n type: \"slot\",\n mergeWithParent: true,\n displayName: \"Tooltip Content\",\n // NOTE: This is not applied in attachment\n defaultValue: {\n type: \"text\",\n value: \"Hello from Tooltip!\",\n styles: {\n background: \"black\",\n color: \"white\",\n padding: \"7px\",\n borderRadius: \"7px\",\n },\n },\n },\n resetClassName: {\n type: \"themeResetClass\",\n },\n isDisabled: {\n type: \"boolean\",\n },\n delay: {\n type: \"number\",\n // Default value is explicitly set to 0 to prevent users from mistakenly thinking the tooltip isn’t opening due to a delay.\n defaultValue: 0,\n defaultValueHint: 0,\n description:\n \"The delay (in milliseconds) for the tooltip to show up.\",\n },\n closeDelay: {\n type: \"number\",\n // Default value is explicitly set to 0 to prevent users from mistakenly thinking the tooltip isn’t closing due to a delay.\n defaultValue: 0,\n defaultValueHint: 0,\n description: \"The delay (in milliseconds) for the tooltip to close.\",\n },\n trigger: {\n type: \"choice\",\n options: [\"focus\", \"focus and hover\"],\n defaultValueHint: \"focus and hover\",\n },\n ...getCommonOverlayProps<BaseTooltipProps>(\"popover\", {\n placement: { defaultValueHint: \"top\" },\n offset: { defaultValueHint: 0 },\n containerPadding: { defaultValueHint: 12 },\n crossOffset: { defaultValueHint: 0 },\n }),\n isOpen: {\n type: \"boolean\",\n editOnly: true,\n uncontrolledProp: \"defaultOpen\",\n description: \"Whether the overlay is open by default\",\n defaultValueHint: false,\n hidden: () => true,\n },\n onOpenChange: {\n type: \"eventHandler\",\n argTypes: [{ name: \"isOpen\", type: \"boolean\" }],\n },\n },\n states: {\n isOpen: {\n type: \"writable\",\n valueProp: \"isOpen\",\n onChangeProp: \"onOpenChange\",\n variableType: \"boolean\",\n },\n },\n trapsFocus: true,\n },\n overrides\n );\n}\n"],"names":["_a"],"mappings":"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"}
|