@planningcenter/tapestry 4.2.0-rc.7 → 4.2.0-rc.9
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/components/internal/tooltip/Tooltip.d.ts.map +1 -1
- package/dist/components/internal/tooltip/Tooltip.js +1 -1
- package/dist/components/internal/tooltip/Tooltip.js.map +1 -1
- package/dist/reactRender.css +1270 -1270
- package/dist/reactRender.css.map +1 -1
- package/dist/reactRenderLegacy.css +1270 -1270
- package/dist/reactRenderLegacy.css.map +1 -1
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/internal/tooltip/Tooltip.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/internal/tooltip/Tooltip.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,EAAE,KAAK,YAAY,EAAU,MAAM,OAAO,CAAA;AAExD,OAAO,EACL,KAAK,SAAS,EAEf,MAAM,+BAA+B,CAAA;AActC,MAAM,WAAW,YAAY;IAC3B;;;;;OAKG;IACH,QAAQ,EAAE,YAAY,CAAA;IACtB;;;OAGG;IACH,OAAO,EAAE,MAAM,CAAA;IACf,mFAAmF;IACnF,SAAS,CAAC,EAAE,SAAS,CAAA;CACtB;AAED;;;;;;;;GAQG;AACH,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,OAAO,EACP,SAA0B,GAC3B,EAAE,YAAY,qBAyEd;yBA7Ee,OAAO"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.js","sources":["../../../../src/components/internal/tooltip/Tooltip.tsx"],"sourcesContent":["import { tokens } from \"@planningcenter/tapestry-tokens/tokens\"\nimport classNames from \"classnames\"\nimport React, { type ReactElement,
|
|
1
|
+
{"version":3,"file":"Tooltip.js","sources":["../../../../src/components/internal/tooltip/Tooltip.tsx"],"sourcesContent":["import { tokens } from \"@planningcenter/tapestry-tokens/tokens\"\nimport { useId } from \"@utilities/useId\"\nimport classNames from \"classnames\"\nimport React, { type ReactElement, useRef } from \"react\"\nimport { Overlay } from \"react-aria/Overlay\"\nimport {\n type Placement,\n useOverlayPosition,\n} from \"react-aria/useOverlayPosition\"\nimport { useTooltip, useTooltipTrigger } from \"react-aria/useTooltipTrigger\"\nimport { useTooltipTriggerState } from \"react-stately/useTooltipTriggerState\"\n\nimport { TooltipTriggerContext } from \"./TooltipTriggerContext\"\n\n// Single source of truth for the arrow's dimensions -- index.css reads these\n// via --tds-tooltip-arrow-size/--tds-tooltip-arrow-depth instead of its own literals.\nconst ARROW_SIZE = 10\nconst ARROW_DEPTH = 5\nconst FOCUS_RING_REACH =\n parseFloat(tokens[\"--t-focus-ring-offset\"]) +\n parseFloat(tokens[\"--t-focus-ring-width\"])\n\nexport interface TooltipProps {\n /**\n * A single `BaseButton`-derived element (e.g. `IconButton`, `Button`) to\n * act as the trigger. Must be exactly one trigger — nothing enforces this\n * at runtime, so a fragment with more than one child would silently hand\n * every child the same ref and trigger props.\n */\n children: ReactElement\n /**\n * The hint text. Best used with information beyond the trigger's accessible name\n * (e.g. its `aria-label` or visible label).\n */\n content: string\n /** Where the tooltip renders relative to the trigger. Default `'bottom start'`. */\n placement?: Placement\n}\n\n/**\n * Shows a short hover/focus hint next to a trigger. Built from React Aria's\n * tooltip hooks rather than `react-aria-components`'s `<Tooltip>`, because\n * that component unmounts its content entirely while closed, so a screen\n * reader's virtual cursor never gets access to the description unless real\n * DOM focus lands on the trigger. This keeps the tooltip content always\n * mounted and wires `aria-describedby` unconditionally, toggling only CSS\n * visibility.\n */\nexport function Tooltip({\n children,\n content,\n placement = \"bottom start\",\n}: TooltipProps) {\n const triggerRef = useRef<HTMLButtonElement>(null)\n const overlayRef = useRef<HTMLDivElement>(null)\n const tooltipId = `tds-tooltip-${useId()}`\n\n const state = useTooltipTriggerState()\n const { triggerProps } = useTooltipTrigger({}, state, triggerRef)\n const { tooltipProps: ariaTooltipProps } = useTooltip(\n { id: tooltipId },\n state\n )\n\n const {\n arrowProps,\n overlayProps,\n placement: resolvedPlacement,\n } = useOverlayPosition({\n arrowSize: ARROW_SIZE,\n isOpen: state.isOpen,\n offset: ARROW_DEPTH + FOCUS_RING_REACH,\n onClose: () => state.close(true),\n overlayRef,\n placement,\n targetRef: triggerRef,\n })\n\n const contextValue = {\n ref: triggerRef,\n triggerProps: {\n ...triggerProps,\n \"aria-describedby\": tooltipId,\n },\n }\n\n return (\n <>\n <TooltipTriggerContext.Provider value={contextValue}>\n {children}\n </TooltipTriggerContext.Provider>\n <Overlay disableFocusManagement>\n <div\n {...ariaTooltipProps}\n {...overlayProps}\n ref={overlayRef}\n className={classNames(\"tds-tooltip\", {\n \"tds-tooltip--open\": state.isOpen,\n })}\n data-placement={resolvedPlacement}\n style={\n {\n ...overlayProps.style,\n \"--tds-tooltip-arrow-depth-raw\": `${ARROW_DEPTH}px`,\n \"--tds-tooltip-arrow-size-raw\": `${ARROW_SIZE}px`,\n } as React.CSSProperties\n }\n >\n {content}\n <div className=\"tds-tooltip-arrow\" {...arrowProps}>\n <svg\n aria-hidden\n className=\"tds-tooltip-arrow-icon\"\n role=\"img\"\n viewBox={`0 0 ${ARROW_SIZE} ${ARROW_DEPTH}`}\n >\n <polygon\n points={`${ARROW_SIZE / 2},0 0,${ARROW_DEPTH} ${ARROW_SIZE},${ARROW_DEPTH}`}\n />\n </svg>\n </div>\n </div>\n </Overlay>\n </>\n )\n}\n\nTooltip.displayName = \"Tooltip\"\n"],"names":[],"mappings":";;;;;;;;;AAmBE,UAAU,CAAC,MAAM,CAAC,uBAAuB,CAAC,CAAC;AAC3C,IAAA,UAAU,CAAC,MAAM,CAAC,sBAAsB,CAAC"}
|