npm - @frontify/fondue - Versions diffs - 12.0.0-beta.164 → 12.0.0-beta.165 - Mend

@frontify/fondue 12.0.0-beta.164 → 12.0.0-beta.165

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (166) hide show

package/dist/components/Tooltip/BrightHeader.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { ReactElement } from 'react';
 export declare enum BrightHeaderStyle {
     Information = "Information",
     Warning = "Warning",
@@ -10,5 +10,8 @@ export declare const brightHeaderArrowBackgroundColors: Record<BrightHeaderStyle
 type BrightHeaderProps = {
     headerStyle: BrightHeaderStyle;
 };
-export declare const BrightHeader: FC<BrightHeaderProps>;
+export declare const BrightHeader: {
+    ({ headerStyle }: BrightHeaderProps): ReactElement;
+    displayName: string;
+};
 export {};

package/dist/components/Tooltip/BrightHeader.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BrightHeader.es.js","sources":["../../../src/components/Tooltip/BrightHeader.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { ~~FC,~~ ReactElement, cloneElement } from 'react';\nimport { merge } from '@utilities/merge';\nimport {\n IconCheckMark,\n IconDocument,\n IconExclamationMarkCircle,\n IconExclamationMarkTriangle,\n} from '@foundation/Icon/Generated';\nimport { IconSize } from '@foundation/Icon/IconSize';\n\nexport enum BrightHeaderStyle {\n Information = 'Information',\n Warning = 'Warning',\n Tip = 'Tip',\n Note = 'Note',\n}\n\nexport const brightHeaderBackgroundColors: Record<BrightHeaderStyle, string> = {\n [BrightHeaderStyle.Information]: 'tw-bg-box-selected-strong',\n [BrightHeaderStyle.Warning]: 'tw-bg-box-negative-strong-pressed',\n [BrightHeaderStyle.Tip]: 'tw-bg-box-positive-strong-pressed',\n [BrightHeaderStyle.Note]: 'tw-bg-box-warning-strong',\n};\n\nexport const brightHeaderArrowBackgroundColors: Record<BrightHeaderStyle, string> = {\n [BrightHeaderStyle.Information]: 'before:tw-bg-box-selected-strong',\n [BrightHeaderStyle.Warning]: 'before:tw-bg-box-negative-strong-pressed',\n [BrightHeaderStyle.Tip]: 'before:tw-bg-box-positive-strong-pressed',\n [BrightHeaderStyle.Note]: 'before:tw-bg-box-warning-strong',\n};\n\nconst brightHeaderIcon: Record<BrightHeaderStyle, ReactElement> = {\n [BrightHeaderStyle.Information]: <IconExclamationMarkCircle />,\n [BrightHeaderStyle.Warning]: <IconExclamationMarkTriangle />,\n [BrightHeaderStyle.Tip]: <IconCheckMark />,\n [BrightHeaderStyle.Note]: <IconDocument />,\n};\n\ntype BrightHeaderProps = {\n headerStyle: BrightHeaderStyle;\n};\n\nexport const BrightHeader: ~~FC<BrightHeaderProps>~~ = ({ headerStyle }) => {\n return (\n <div\n data-test-id=\"bright-header\"\n className={merge([\n 'tw-h-9 tw-relative tw-z-[120000] tw-flex tw-justify-center tw-items-center tw-rounded-t-md tw-dark tw-text-text',\n brightHeaderBackgroundColors[headerStyle],\n ])}\n >\n {cloneElement(brightHeaderIcon[headerStyle], { size: IconSize.Size20 })}\n </div>\n );\n};\nBrightHeader.displayName = 'FondueBrightHeader';\n"],"names":["BrightHeaderStyle","brightHeaderBackgroundColors","brightHeaderArrowBackgroundColors","brightHeaderIcon","React","IconExclamationMarkCircle","IconExclamationMarkTriangle","IconCheckMark","IconDocument","BrightHeader","headerStyle","merge","cloneElement","IconSize"],"mappings":";;;;;;;AAYY,IAAAA,sBAAAA,OACRA,EAAA,cAAc,eACdA,EAAA,UAAU,WACVA,EAAA,MAAM,OACNA,EAAA,OAAO,QAJCA,IAAAA,KAAA,CAAA,CAAA;AAOL,MAAMC,IAAkE;AAAA,EAC1E,aAAgC;AAAA,EAChC,SAA4B;AAAA,EAC5B,KAAwB;AAAA,EACxB,MAAyB;AAC9B,GAEaC,IAAuE;AAAA,EAC/E,aAAgC;AAAA,EAChC,SAA4B;AAAA,EAC5B,KAAwB;AAAA,EACxB,MAAyB;AAC9B,GAEMC,IAA4D;AAAA,EAC7D,aAAgC,gBAAAC,EAAA,cAACC,GAA0B,IAAA;AAAA,EAC3D,SAA4B,gBAAAD,EAAA,cAACE,GAA4B,IAAA;AAAA,EACzD,KAAwB,gBAAAF,EAAA,cAACG,GAAc,IAAA;AAAA,EACvC,MAAyB,gBAAAH,EAAA,cAACI,GAAa,IAAA;AAC5C,GAMaC,~~IAAsC~~,CAAC,EAAE,aAAAC,~~QAE9C~~,gBAAAN,EAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,gBAAa;AAAA,IACb,WAAWO,EAAM;AAAA,MACb;AAAA,MACAV,EAA6BS,CAAW;AAAA,IAAA,CAC3C;AAAA,EAAA;AAAA,EAEAE,EAAaT,EAAiBO,CAAW,GAAG,EAAE,MAAMG,EAAS,QAAQ;AAAA;AAIlFJ,EAAa,cAAc;"}
1	+ {"version":3,"file":"BrightHeader.es.js","sources":["../../../src/components/Tooltip/BrightHeader.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { ReactElement, cloneElement } from 'react';\nimport { merge } from '@utilities/merge';\nimport {\n IconCheckMark,\n IconDocument,\n IconExclamationMarkCircle,\n IconExclamationMarkTriangle,\n} from '@foundation/Icon/Generated';\nimport { IconSize } from '@foundation/Icon/IconSize';\n\nexport enum BrightHeaderStyle {\n Information = 'Information',\n Warning = 'Warning',\n Tip = 'Tip',\n Note = 'Note',\n}\n\nexport const brightHeaderBackgroundColors: Record<BrightHeaderStyle, string> = {\n [BrightHeaderStyle.Information]: 'tw-bg-box-selected-strong',\n [BrightHeaderStyle.Warning]: 'tw-bg-box-negative-strong-pressed',\n [BrightHeaderStyle.Tip]: 'tw-bg-box-positive-strong-pressed',\n [BrightHeaderStyle.Note]: 'tw-bg-box-warning-strong',\n};\n\nexport const brightHeaderArrowBackgroundColors: Record<BrightHeaderStyle, string> = {\n [BrightHeaderStyle.Information]: 'before:tw-bg-box-selected-strong',\n [BrightHeaderStyle.Warning]: 'before:tw-bg-box-negative-strong-pressed',\n [BrightHeaderStyle.Tip]: 'before:tw-bg-box-positive-strong-pressed',\n [BrightHeaderStyle.Note]: 'before:tw-bg-box-warning-strong',\n};\n\nconst brightHeaderIcon: Record<BrightHeaderStyle, ReactElement> = {\n [BrightHeaderStyle.Information]: <IconExclamationMarkCircle />,\n [BrightHeaderStyle.Warning]: <IconExclamationMarkTriangle />,\n [BrightHeaderStyle.Tip]: <IconCheckMark />,\n [BrightHeaderStyle.Note]: <IconDocument />,\n};\n\ntype BrightHeaderProps = {\n headerStyle: BrightHeaderStyle;\n};\n\nexport const BrightHeader = ({ headerStyle }: BrightHeaderProps): ReactElement => {\n return (\n <div\n data-test-id=\"bright-header\"\n className={merge([\n 'tw-h-9 tw-relative tw-z-[120000] tw-flex tw-justify-center tw-items-center tw-rounded-t-md tw-dark tw-text-text',\n brightHeaderBackgroundColors[headerStyle],\n ])}\n >\n {cloneElement(brightHeaderIcon[headerStyle], { size: IconSize.Size20 })}\n </div>\n );\n};\nBrightHeader.displayName = 'FondueBrightHeader';\n"],"names":["BrightHeaderStyle","brightHeaderBackgroundColors","brightHeaderArrowBackgroundColors","brightHeaderIcon","React","IconExclamationMarkCircle","IconExclamationMarkTriangle","IconCheckMark","IconDocument","BrightHeader","headerStyle","merge","cloneElement","IconSize"],"mappings":";;;;;;;AAYY,IAAAA,sBAAAA,OACRA,EAAA,cAAc,eACdA,EAAA,UAAU,WACVA,EAAA,MAAM,OACNA,EAAA,OAAO,QAJCA,IAAAA,KAAA,CAAA,CAAA;AAOL,MAAMC,IAAkE;AAAA,EAC1E,aAAgC;AAAA,EAChC,SAA4B;AAAA,EAC5B,KAAwB;AAAA,EACxB,MAAyB;AAC9B,GAEaC,IAAuE;AAAA,EAC/E,aAAgC;AAAA,EAChC,SAA4B;AAAA,EAC5B,KAAwB;AAAA,EACxB,MAAyB;AAC9B,GAEMC,IAA4D;AAAA,EAC7D,aAAgC,gBAAAC,EAAA,cAACC,GAA0B,IAAA;AAAA,EAC3D,SAA4B,gBAAAD,EAAA,cAACE,GAA4B,IAAA;AAAA,EACzD,KAAwB,gBAAAF,EAAA,cAACG,GAAc,IAAA;AAAA,EACvC,MAAyB,gBAAAH,EAAA,cAACI,GAAa,IAAA;AAC5C,GAMaC,IAAe,CAAC,EAAE,aAAAC,QAEvB,gBAAAN,EAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,gBAAa;AAAA,IACb,WAAWO,EAAM;AAAA,MACb;AAAA,MACAV,EAA6BS,CAAW;AAAA,IAAA,CAC3C;AAAA,EAAA;AAAA,EAEAE,EAAaT,EAAiBO,CAAW,GAAG,EAAE,MAAMG,EAAS,QAAQ;AAAA;AAIlFJ,EAAa,cAAc;"}

package/dist/components/Tooltip/Tooltip.d.ts CHANGED Viewed

@@ -1,10 +1,10 @@
-import { PropsWithChildren, ReactChild, ReactElement, ReactNode } from 'react';
+import { ReactElement, ReactNode } from 'react';
 import { BrightHeaderStyle } from './BrightHeader';
 export type TooltipButton = {
     label: string;
     action: () => void;
 };
-export type TooltipProps = PropsWithChildren<{
+export type TooltipProps = {
     triggerElement?: ReactElement;
     content: ReactNode;
     tooltipIcon?: ReactElement;
@@ -14,7 +14,7 @@ export type TooltipProps = PropsWithChildren<{
     linkLabel?: string;
     brightHeader?: BrightHeaderStyle;
     buttons?: [TooltipButton, TooltipButton] | [TooltipButton];
-    children?: ReactChild;
+    children?: ReactNode;
     position?: TooltipPosition;
     alignment?: TooltipAlignment;
     flip?: boolean;
@@ -25,7 +25,7 @@ export type TooltipProps = PropsWithChildren<{
     disabled?: boolean;
     /** @deprecated use disabled since the tooltip is always present in the DOM now so hidden has no effect anymore */
     hidden?: boolean;
-}>;
+};
 export declare enum TooltipPosition {
     Top = "Top",
     Right = "Right",

package/dist/components/Tooltip/Tooltip.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tooltip.es.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. /\n\nimport { Button, ButtonEmphasis, ButtonSize, ButtonStyle } from '@components/Button';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { useLink } from '@react-aria/link';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport React, {\n FocusEvent,\n HTMLAttributes,\n PropsWithChildren,\n ReactChild,\n ReactElement,\n ReactNode,\n cloneElement,\n useCallback,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { BrightHeader, BrightHeaderStyle, brightHeaderArrowBackgroundColors } from './BrightHeader';\nimport { usePopper } from 'react-popper';\nimport { Placement } from '@popperjs/core';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\n\nexport type TooltipButton = {\n label: string;\n action: () => void;\n};\n\nexport type TooltipProps = PropsWithChildren<{\n triggerElement?: ReactElement;\n content: ReactNode;\n tooltipIcon?: ReactElement;\n heading?: ReactNode;\n headingIcon?: ReactElement;\n linkUrl?: string;\n linkLabel?: string;\n brightHeader?: BrightHeaderStyle;\n buttons?: [TooltipButton, TooltipButton] \| [TooltipButton];\n children?: ReactChild;\n position?: TooltipPosition;\n alignment?: TooltipAlignment;\n flip?: boolean;\n withArrow?: boolean;\n hoverDelay?: number;\n enterDelay?: number;\n open?: boolean;\n disabled?: boolean;\n /* @deprecated use disabled since the tooltip is always present in the DOM now so hidden has no effect anymore /\n hidden?: boolean;\n}>;\n\n/\n This is a temporary workaround because for some yet unknown reasons `tailwindcss` in clarify purges the `tw-pb-3.5` and `tw-pt-3.5` class.\n /\nconst paddingsTop = {\n small: 'tw-pt-3.5',\n large: 'tw-pt-4',\n};\n\nconst paddingsBottom = {\n small: 'tw-pb-3.5',\n large: 'tw-pb-4',\n};\n\nexport enum TooltipPosition {\n Top = 'Top',\n Right = 'Right',\n Bottom = 'Bottom',\n Left = 'Left',\n}\n\nexport enum TooltipAlignment {\n Start = 'Start',\n Middle = 'Middle',\n End = 'End',\n}\n\nconst placementMap: Record<`${TooltipPosition}-${TooltipAlignment}`, Placement> = {\n ['Top-Start']: 'top-start',\n ['Top-End']: 'top-end',\n ['Bottom-Start']: 'bottom-start',\n ['Bottom-End']: 'bottom-end',\n ['Left-Start']: 'left-start',\n ['Left-End']: 'left-end',\n ['Right-Start']: 'right-start',\n ['Right-End']: 'right-end',\n ['Top-Middle']: 'top',\n ['Right-Middle']: 'right',\n ['Bottom-Middle']: 'bottom',\n ['Left-Middle']: 'left',\n};\n\nconst getArrowClasses = (currentPlacement: string, brightHeader: BrightHeaderStyle \| undefined, alignment: string) => {\n switch (true) {\n case currentPlacement.toString().includes(TooltipPosition.Top.toLowerCase()):\n return 'before:tw-border-t-0 before:tw-border-l-0 tw-bottom-[-6px] before:tw-dark before:tw-bg-base';\n case currentPlacement.toString().includes(TooltipPosition.Right.toLowerCase()):\n return merge([\n 'before:tw-border-t-0 before:tw-border-r-0 tw-left-[-5px]',\n brightHeader &&\n alignment === TooltipAlignment.Start &&\n currentPlacement.toString().includes(TooltipAlignment.Start.toLowerCase())\n ? brightHeaderArrowBackgroundColors[brightHeader]\n : 'before:tw-dark before:tw-bg-base',\n ]);\n case currentPlacement.toString().includes(TooltipPosition.Bottom.toLowerCase()):\n return merge([\n 'before:tw-border-b-0 before:tw-border-r-0 tw-top-[-6px]',\n brightHeader ? brightHeaderArrowBackgroundColors[brightHeader] : 'before:tw-dark before:tw-bg-base',\n ]);\n case currentPlacement.toString().includes(TooltipPosition.Left.toLowerCase()):\n return merge([\n 'before:tw-border-b-0 before:tw-border-l-0 tw-right-[-5px]',\n brightHeader &&\n alignment === TooltipAlignment.Start &&\n currentPlacement.toString().includes(TooltipAlignment.Start.toLowerCase())\n ? brightHeaderArrowBackgroundColors[brightHeader]\n : 'before:tw-dark before:tw-bg-base',\n ]);\n default:\n return 'before:tw-border-b-0 before:tw-border-r-0 tw-top-[-6px] before:tw-dark before:tw-bg-base';\n }\n};\n\nexport const Tooltip = ({\n content,\n tooltipIcon,\n heading,\n headingIcon,\n linkUrl,\n linkLabel,\n brightHeader,\n buttons,\n children,\n position = TooltipPosition.Bottom,\n alignment = TooltipAlignment.Middle,\n withArrow,\n flip = true,\n triggerElement,\n hoverDelay = 200,\n enterDelay = 0,\n open = false,\n disabled = false,\n hidden = false,\n}: TooltipProps) => {\n const [triggerElementRef, setTriggerElementRef] = useState<HTMLElement \| HTMLDivElement \| HTMLButtonElement \| null>(\n null,\n );\n const linkRef = useRef<HTMLAnchorElement \| null>(null);\n\n const shouldPreventTooltipOpening = hidden \|\| disabled;\n const { linkProps } = useLink({ isDisabled: shouldPreventTooltipOpening }, linkRef);\n const hasLargePaddingTop = useMemo(\n () => linkUrl \|\| brightHeader \|\| buttons \|\| heading \|\| headingIcon,\n [linkUrl, brightHeader, buttons, heading, headingIcon],\n );\n\n const placement = placementMap[`${position}-${alignment}`];\n const [tooltipContainerRef, setTooltipContainerRef] = useState<HTMLDivElement \| null>(null);\n const [triggerElementContainerRef, setTriggerElementContainerRef] = useState<HTMLDivElement \| null>(null);\n const [arrowElement, setArrowElement] = useState<HTMLDivElement \| null>(null);\n const id = useMemoizedId();\n\n const tooltipOffset = withArrow ? 10 : 5;\n const popperInstance = usePopper(triggerElementRef, tooltipContainerRef, {\n placement,\n strategy: 'fixed',\n modifiers: [\n {\n name: 'arrow',\n options: {\n element: arrowElement,\n },\n },\n {\n name: 'offset',\n options: {\n offset: [0, tooltipOffset],\n },\n },\n {\n name: 'flip',\n enabled: flip,\n },\n ],\n });\n\n const currentPlacement = popperInstance.state?.placement ?? position;\n const arrowStyling = getArrowClasses(currentPlacement, brightHeader, alignment);\n const [isOpen, setIsOpen] = useState(false);\n const timeoutRef = useRef<ReturnType<typeof setTimeout> \| null>(null);\n\n const handleHideTooltipOnHover = useCallback(() => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n timeoutRef.current = setTimeout(() => setIsOpen(false), hoverDelay);\n }, [hoverDelay]);\n\n const handleShowTooltipOnHover = useCallback(() => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n\n if (enterDelay) {\n timeoutRef.current = setTimeout(() => setIsOpen(true), enterDelay);\n return;\n }\n\n setIsOpen(true);\n }, [enterDelay]);\n\n const checkIfHovered = useCallback(\n (event) => {\n const hoveredElement = event.path ?? event.composedPath?.();\n const hoverSources = [triggerElementRef, triggerElementContainerRef, tooltipContainerRef];\n\n if (hoveredElement && hoverSources.some((el) => hoveredElement.includes(el))) {\n handleShowTooltipOnHover();\n }\n },\n [handleShowTooltipOnHover, triggerElementRef, triggerElementContainerRef, tooltipContainerRef],\n );\n\n const handleCloseIfFocusedOutside = useCallback(\n (event: FocusEvent<HTMLElement>) => {\n const { relatedTarget } = event;\n const elements = [tooltipContainerRef, triggerElementContainerRef];\n\n if (!relatedTarget \|\| !elements.some((element) => element?.contains(relatedTarget))) {\n setIsOpen(false);\n }\n },\n [tooltipContainerRef, triggerElementContainerRef],\n );\n\n const openingEvents: HTMLAttributes<HTMLElement> = shouldPreventTooltipOpening\n ? {}\n : {\n onMouseOver: (event) => checkIfHovered(event.nativeEvent),\n onMouseLeave: handleHideTooltipOnHover,\n onFocus: () => setIsOpen(true),\n onBlur: handleCloseIfFocusedOutside,\n };\n\n useEffect(() => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n setIsOpen(shouldPreventTooltipOpening ? false : open);\n }, [open, shouldPreventTooltipOpening]);\n\n const listenForEsc = useCallback(\n (event: KeyboardEvent) => {\n if (isOpen && event.key === 'Escape') {\n setIsOpen(false);\n }\n },\n [isOpen],\n );\n\n useLayoutEffect(() => {\n if (typeof popperInstance.update === 'function' && isOpen) {\n popperInstance.update();\n }\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isOpen]);\n\n useEffect(() => {\n if (isOpen) {\n window.addEventListener('keydown', listenForEsc);\n } else {\n window.removeEventListener('keydown', listenForEsc);\n }\n\n return () => {\n window.removeEventListener('keydown', listenForEsc);\n };\n }, [listenForEsc, isOpen]);\n\n return (\n <>\n <div {...openingEvents} ref={setTriggerElementContainerRef}>\n {triggerElement &&\n cloneElement(triggerElement, {\n ref: setTriggerElementRef,\n 'aria-describedby': id,\n 'aria-disabled': shouldPreventTooltipOpening,\n })}\n </div>\n <div\n ref={setTooltipContainerRef}\n aria-hidden={shouldPreventTooltipOpening}\n className={merge([\n 'tw-popper-container tw-inline-block tw-max-w-[200px] tw-dark tw-bg-base tw-rounded-md tw-shadow-mid tw-text-text tw-z-[120000]',\n !isOpen && 'tw-opacity-0 tw-h-0 tw-w-0 tw-overflow-hidden',\n ])}\n data-test-id=\"tooltip\"\n role=\"tooltip\"\n id={id}\n style={popperInstance.styles.popper}\n {...popperInstance.attributes.popper}\n {...openingEvents}\n >\n {brightHeader && <BrightHeader headerStyle={brightHeader} />}\n <div\n className={merge([\n 'tw-px-4 tw-dark tw-bg-base tw-rounded-md tw-relative tw-z-[120000]',\n hasLargePaddingTop ? paddingsTop.small : paddingsTop.large,\n linkUrl ? paddingsBottom.small : paddingsBottom.large,\n ])}\n >\n {heading && (\n <h4 className=\"tw-flex tw-text-m tw-font-bold tw-mb-1\">\n {headingIcon && (\n <span className=\"tw-mr-1.5\">\n {cloneElement(headingIcon, { size: IconSize.Size20 })}\n </span>\n )}\n {heading}\n </h4>\n )}\n <div className=\"tw-flex\">\n {tooltipIcon && (\n <span className=\"tw-shrink-0 tw-mr-1 tw-leading-4\">\n {cloneElement(tooltipIcon, { size: IconSize.Size16 })}\n </span>\n )}\n <span className=\"tw-text-s tw-min-w-0 tw-break-words\">{content}</span>\n </div>\n {linkUrl && (\n <a\n {...linkProps}\n data-test-id=\"tooltip-link\"\n ref={linkRef}\n href={linkUrl}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className={merge(['tw-text-xs tw-text-black-40 tw-underline tw-mt-1', FOCUS_VISIBLE_STYLE])}\n >\n {linkLabel ?? 'Click here to learn more.'}\n </a>\n )}\n {buttons && (\n <div className=\"tw-flex tw-flex-row-reverse tw-gap-x-1 tw-mt-4\">\n {buttons.length > 0 && (\n <Button\n style={ButtonStyle.Default}\n emphasis={ButtonEmphasis.Strong}\n size={ButtonSize.Small}\n onClick={buttons[0].action}\n disabled={shouldPreventTooltipOpening}\n >\n {buttons[0].label}\n </Button>\n )}\n {buttons.length === 2 && (\n <Button\n style={ButtonStyle.Default}\n emphasis={ButtonEmphasis.Default}\n size={ButtonSize.Small}\n onClick={buttons[1].action}\n disabled={shouldPreventTooltipOpening}\n >\n {buttons[1].label}\n </Button>\n )}\n </div>\n )}\n </div>\n {/\n This container is needed for the arrow element to not be styled by popperJS\n * selectors for its immediate children .tw-popper-container > .tw-popper-arrow\n * */}\n <div aria-hidden=\"true\">\n <div\n data-test-id=\"popover-arrow\"\n data-popper-arrow={withArrow}\n ref={setArrowElement}\n style={popperInstance.styles.arrow}\n className={merge([\n withArrow &&\n 'tw-popper-arrow tw-z-[110000] tw-absolute tw-w-3 tw-h-3 tw-pointer-events-none before:tw-absolute before:tw-w-3 before:tw-h-3 before:tw-rotate-45 before:tw-border before:tw-border-line',\n withArrow && arrowStyling,\n ])}\n />\n </div>\n {children}\n </div>\n </>\n );\n};\nTooltip.displayName = 'FondueTooltip';\n"],"names":["paddingsTop","paddingsBottom","TooltipPosition","TooltipAlignment","placementMap","getArrowClasses","currentPlacement","brightHeader","alignment","merge","brightHeaderArrowBackgroundColors","Tooltip","content","tooltipIcon","heading","headingIcon","linkUrl","linkLabel","buttons","children","position","withArrow","flip","triggerElement","hoverDelay","enterDelay","open","disabled","hidden","triggerElementRef","setTriggerElementRef","useState","linkRef","useRef","shouldPreventTooltipOpening","linkProps","useLink","hasLargePaddingTop","useMemo","placement","tooltipContainerRef","setTooltipContainerRef","triggerElementContainerRef","setTriggerElementContainerRef","arrowElement","setArrowElement","id","useMemoizedId","popperInstance","usePopper","_a","arrowStyling","isOpen","setIsOpen","timeoutRef","handleHideTooltipOnHover","useCallback","handleShowTooltipOnHover","checkIfHovered","event","hoveredElement","el","handleCloseIfFocusedOutside","relatedTarget","element","openingEvents","useEffect","listenForEsc","useLayoutEffect","React","cloneElement","BrightHeader","IconSize","FOCUS_VISIBLE_STYLE","Button","ButtonStyle","ButtonEmphasis","ButtonSize"],"mappings":"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"}
1	+ {"version":3,"file":"Tooltip.es.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. /\n\nimport { Button, ButtonEmphasis, ButtonSize, ButtonStyle } from '@components/Button';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { useLink } from '@react-aria/link';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport React, {\n FocusEvent,\n HTMLAttributes,\n ReactElement,\n ReactNode,\n cloneElement,\n useCallback,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { BrightHeader, BrightHeaderStyle, brightHeaderArrowBackgroundColors } from './BrightHeader';\nimport { usePopper } from 'react-popper';\nimport { Placement } from '@popperjs/core';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\n\nexport type TooltipButton = {\n label: string;\n action: () => void;\n};\n\nexport type TooltipProps = {\n triggerElement?: ReactElement;\n content: ReactNode;\n tooltipIcon?: ReactElement;\n heading?: ReactNode;\n headingIcon?: ReactElement;\n linkUrl?: string;\n linkLabel?: string;\n brightHeader?: BrightHeaderStyle;\n buttons?: [TooltipButton, TooltipButton] \| [TooltipButton];\n children?: ReactNode;\n position?: TooltipPosition;\n alignment?: TooltipAlignment;\n flip?: boolean;\n withArrow?: boolean;\n hoverDelay?: number;\n enterDelay?: number;\n open?: boolean;\n disabled?: boolean;\n /* @deprecated use disabled since the tooltip is always present in the DOM now so hidden has no effect anymore /\n hidden?: boolean;\n};\n\n/\n This is a temporary workaround because for some yet unknown reasons `tailwindcss` in clarify purges the `tw-pb-3.5` and `tw-pt-3.5` class.\n /\nconst paddingsTop = {\n small: 'tw-pt-3.5',\n large: 'tw-pt-4',\n};\n\nconst paddingsBottom = {\n small: 'tw-pb-3.5',\n large: 'tw-pb-4',\n};\n\nexport enum TooltipPosition {\n Top = 'Top',\n Right = 'Right',\n Bottom = 'Bottom',\n Left = 'Left',\n}\n\nexport enum TooltipAlignment {\n Start = 'Start',\n Middle = 'Middle',\n End = 'End',\n}\n\nconst placementMap: Record<`${TooltipPosition}-${TooltipAlignment}`, Placement> = {\n ['Top-Start']: 'top-start',\n ['Top-End']: 'top-end',\n ['Bottom-Start']: 'bottom-start',\n ['Bottom-End']: 'bottom-end',\n ['Left-Start']: 'left-start',\n ['Left-End']: 'left-end',\n ['Right-Start']: 'right-start',\n ['Right-End']: 'right-end',\n ['Top-Middle']: 'top',\n ['Right-Middle']: 'right',\n ['Bottom-Middle']: 'bottom',\n ['Left-Middle']: 'left',\n};\n\nconst getArrowClasses = (currentPlacement: string, brightHeader: BrightHeaderStyle \| undefined, alignment: string) => {\n switch (true) {\n case currentPlacement.toString().includes(TooltipPosition.Top.toLowerCase()):\n return 'before:tw-border-t-0 before:tw-border-l-0 tw-bottom-[-6px] before:tw-dark before:tw-bg-base';\n case currentPlacement.toString().includes(TooltipPosition.Right.toLowerCase()):\n return merge([\n 'before:tw-border-t-0 before:tw-border-r-0 tw-left-[-5px]',\n brightHeader &&\n alignment === TooltipAlignment.Start &&\n currentPlacement.toString().includes(TooltipAlignment.Start.toLowerCase())\n ? brightHeaderArrowBackgroundColors[brightHeader]\n : 'before:tw-dark before:tw-bg-base',\n ]);\n case currentPlacement.toString().includes(TooltipPosition.Bottom.toLowerCase()):\n return merge([\n 'before:tw-border-b-0 before:tw-border-r-0 tw-top-[-6px]',\n brightHeader ? brightHeaderArrowBackgroundColors[brightHeader] : 'before:tw-dark before:tw-bg-base',\n ]);\n case currentPlacement.toString().includes(TooltipPosition.Left.toLowerCase()):\n return merge([\n 'before:tw-border-b-0 before:tw-border-l-0 tw-right-[-5px]',\n brightHeader &&\n alignment === TooltipAlignment.Start &&\n currentPlacement.toString().includes(TooltipAlignment.Start.toLowerCase())\n ? brightHeaderArrowBackgroundColors[brightHeader]\n : 'before:tw-dark before:tw-bg-base',\n ]);\n default:\n return 'before:tw-border-b-0 before:tw-border-r-0 tw-top-[-6px] before:tw-dark before:tw-bg-base';\n }\n};\n\nexport const Tooltip = ({\n content,\n tooltipIcon,\n heading,\n headingIcon,\n linkUrl,\n linkLabel,\n brightHeader,\n buttons,\n children,\n position = TooltipPosition.Bottom,\n alignment = TooltipAlignment.Middle,\n withArrow,\n flip = true,\n triggerElement,\n hoverDelay = 200,\n enterDelay = 0,\n open = false,\n disabled = false,\n hidden = false,\n}: TooltipProps) => {\n const [triggerElementRef, setTriggerElementRef] = useState<HTMLElement \| HTMLDivElement \| HTMLButtonElement \| null>(\n null,\n );\n const linkRef = useRef<HTMLAnchorElement \| null>(null);\n\n const shouldPreventTooltipOpening = hidden \|\| disabled;\n const { linkProps } = useLink({ isDisabled: shouldPreventTooltipOpening }, linkRef);\n const hasLargePaddingTop = useMemo(\n () => linkUrl \|\| brightHeader \|\| buttons \|\| heading \|\| headingIcon,\n [linkUrl, brightHeader, buttons, heading, headingIcon],\n );\n\n const placement = placementMap[`${position}-${alignment}`];\n const [tooltipContainerRef, setTooltipContainerRef] = useState<HTMLDivElement \| null>(null);\n const [triggerElementContainerRef, setTriggerElementContainerRef] = useState<HTMLDivElement \| null>(null);\n const [arrowElement, setArrowElement] = useState<HTMLDivElement \| null>(null);\n const id = useMemoizedId();\n\n const tooltipOffset = withArrow ? 10 : 5;\n const popperInstance = usePopper(triggerElementRef, tooltipContainerRef, {\n placement,\n strategy: 'fixed',\n modifiers: [\n {\n name: 'arrow',\n options: {\n element: arrowElement,\n },\n },\n {\n name: 'offset',\n options: {\n offset: [0, tooltipOffset],\n },\n },\n {\n name: 'flip',\n enabled: flip,\n },\n ],\n });\n\n const currentPlacement = popperInstance.state?.placement ?? position;\n const arrowStyling = getArrowClasses(currentPlacement, brightHeader, alignment);\n const [isOpen, setIsOpen] = useState(false);\n const timeoutRef = useRef<ReturnType<typeof setTimeout> \| null>(null);\n\n const handleHideTooltipOnHover = useCallback(() => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n timeoutRef.current = setTimeout(() => setIsOpen(false), hoverDelay);\n }, [hoverDelay]);\n\n const handleShowTooltipOnHover = useCallback(() => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n\n if (enterDelay) {\n timeoutRef.current = setTimeout(() => setIsOpen(true), enterDelay);\n return;\n }\n\n setIsOpen(true);\n }, [enterDelay]);\n\n const checkIfHovered = useCallback(\n (event) => {\n const hoveredElement = event.path ?? event.composedPath?.();\n const hoverSources = [triggerElementRef, triggerElementContainerRef, tooltipContainerRef];\n\n if (hoveredElement && hoverSources.some((el) => hoveredElement.includes(el))) {\n handleShowTooltipOnHover();\n }\n },\n [handleShowTooltipOnHover, triggerElementRef, triggerElementContainerRef, tooltipContainerRef],\n );\n\n const handleCloseIfFocusedOutside = useCallback(\n (event: FocusEvent<HTMLElement>) => {\n const { relatedTarget } = event;\n const elements = [tooltipContainerRef, triggerElementContainerRef];\n\n if (!relatedTarget \|\| !elements.some((element) => element?.contains(relatedTarget))) {\n setIsOpen(false);\n }\n },\n [tooltipContainerRef, triggerElementContainerRef],\n );\n\n const openingEvents: HTMLAttributes<HTMLElement> = shouldPreventTooltipOpening\n ? {}\n : {\n onMouseOver: (event) => checkIfHovered(event.nativeEvent),\n onMouseLeave: handleHideTooltipOnHover,\n onFocus: () => setIsOpen(true),\n onBlur: handleCloseIfFocusedOutside,\n };\n\n useEffect(() => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n setIsOpen(shouldPreventTooltipOpening ? false : open);\n }, [open, shouldPreventTooltipOpening]);\n\n const listenForEsc = useCallback(\n (event: KeyboardEvent) => {\n if (isOpen && event.key === 'Escape') {\n setIsOpen(false);\n }\n },\n [isOpen],\n );\n\n useLayoutEffect(() => {\n if (typeof popperInstance.update === 'function' && isOpen) {\n popperInstance.update();\n }\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isOpen]);\n\n useEffect(() => {\n if (isOpen) {\n window.addEventListener('keydown', listenForEsc);\n } else {\n window.removeEventListener('keydown', listenForEsc);\n }\n\n return () => {\n window.removeEventListener('keydown', listenForEsc);\n };\n }, [listenForEsc, isOpen]);\n\n return (\n <>\n <div {...openingEvents} ref={setTriggerElementContainerRef}>\n {triggerElement &&\n cloneElement(triggerElement, {\n ref: setTriggerElementRef,\n 'aria-describedby': id,\n 'aria-disabled': shouldPreventTooltipOpening,\n })}\n </div>\n <div\n ref={setTooltipContainerRef}\n aria-hidden={shouldPreventTooltipOpening}\n className={merge([\n 'tw-popper-container tw-inline-block tw-max-w-[200px] tw-dark tw-bg-base tw-rounded-md tw-shadow-mid tw-text-text tw-z-[120000]',\n !isOpen && 'tw-opacity-0 tw-h-0 tw-w-0 tw-overflow-hidden',\n ])}\n data-test-id=\"tooltip\"\n role=\"tooltip\"\n id={id}\n style={popperInstance.styles.popper}\n {...popperInstance.attributes.popper}\n {...openingEvents}\n >\n {brightHeader && <BrightHeader headerStyle={brightHeader} />}\n <div\n className={merge([\n 'tw-px-4 tw-dark tw-bg-base tw-rounded-md tw-relative tw-z-[120000]',\n hasLargePaddingTop ? paddingsTop.small : paddingsTop.large,\n linkUrl ? paddingsBottom.small : paddingsBottom.large,\n ])}\n >\n {heading && (\n <h4 className=\"tw-flex tw-text-m tw-font-bold tw-mb-1\">\n {headingIcon && (\n <span className=\"tw-mr-1.5\">\n {cloneElement(headingIcon, { size: IconSize.Size20 })}\n </span>\n )}\n {heading}\n </h4>\n )}\n <div className=\"tw-flex\">\n {tooltipIcon && (\n <span className=\"tw-shrink-0 tw-mr-1 tw-leading-4\">\n {cloneElement(tooltipIcon, { size: IconSize.Size16 })}\n </span>\n )}\n <span className=\"tw-text-s tw-min-w-0 tw-break-words\">{content}</span>\n </div>\n {linkUrl && (\n <a\n {...linkProps}\n data-test-id=\"tooltip-link\"\n ref={linkRef}\n href={linkUrl}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className={merge(['tw-text-xs tw-text-black-40 tw-underline tw-mt-1', FOCUS_VISIBLE_STYLE])}\n >\n {linkLabel ?? 'Click here to learn more.'}\n </a>\n )}\n {buttons && (\n <div className=\"tw-flex tw-flex-row-reverse tw-gap-x-1 tw-mt-4\">\n {buttons.length > 0 && (\n <Button\n style={ButtonStyle.Default}\n emphasis={ButtonEmphasis.Strong}\n size={ButtonSize.Small}\n onClick={buttons[0].action}\n disabled={shouldPreventTooltipOpening}\n >\n {buttons[0].label}\n </Button>\n )}\n {buttons.length === 2 && (\n <Button\n style={ButtonStyle.Default}\n emphasis={ButtonEmphasis.Default}\n size={ButtonSize.Small}\n onClick={buttons[1].action}\n disabled={shouldPreventTooltipOpening}\n >\n {buttons[1].label}\n </Button>\n )}\n </div>\n )}\n </div>\n {/\n This container is needed for the arrow element to not be styled by popperJS\n * selectors for its immediate children .tw-popper-container > .tw-popper-arrow\n * */}\n <div aria-hidden=\"true\">\n <div\n data-test-id=\"popover-arrow\"\n data-popper-arrow={withArrow}\n ref={setArrowElement}\n style={popperInstance.styles.arrow}\n className={merge([\n withArrow &&\n 'tw-popper-arrow tw-z-[110000] tw-absolute tw-w-3 tw-h-3 tw-pointer-events-none before:tw-absolute before:tw-w-3 before:tw-h-3 before:tw-rotate-45 before:tw-border before:tw-border-line',\n withArrow && arrowStyling,\n ])}\n />\n </div>\n {children}\n </div>\n </>\n );\n};\nTooltip.displayName = 'FondueTooltip';\n"],"names":["paddingsTop","paddingsBottom","TooltipPosition","TooltipAlignment","placementMap","getArrowClasses","currentPlacement","brightHeader","alignment","merge","brightHeaderArrowBackgroundColors","Tooltip","content","tooltipIcon","heading","headingIcon","linkUrl","linkLabel","buttons","children","position","withArrow","flip","triggerElement","hoverDelay","enterDelay","open","disabled","hidden","triggerElementRef","setTriggerElementRef","useState","linkRef","useRef","shouldPreventTooltipOpening","linkProps","useLink","hasLargePaddingTop","useMemo","placement","tooltipContainerRef","setTooltipContainerRef","triggerElementContainerRef","setTriggerElementContainerRef","arrowElement","setArrowElement","id","useMemoizedId","popperInstance","usePopper","_a","arrowStyling","isOpen","setIsOpen","timeoutRef","handleHideTooltipOnHover","useCallback","handleShowTooltipOnHover","checkIfHovered","event","hoveredElement","el","handleCloseIfFocusedOutside","relatedTarget","element","openingEvents","useEffect","listenForEsc","useLayoutEffect","React","cloneElement","BrightHeader","IconSize","FOCUS_VISIBLE_STYLE","Button","ButtonStyle","ButtonEmphasis","ButtonSize"],"mappings":"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"}

package/dist/components/TooltipIcon/TooltipIcon.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { FC, ReactElement } from 'react';
+import { ReactElement } from 'react';
 import { IconSize } from '../../foundation/Icon/IconSize';
 import { TooltipProps } from '../Tooltip/Tooltip';
 import { IconProps } from '../../foundation/Icon/IconProps';
@@ -13,4 +13,7 @@ export declare enum TooltipIconTriggerStyle {
     Warning = "Warning",
     Primary = "Primary"
 }
-export declare const TooltipIcon: FC<TooltipIconProps>;
+export declare const TooltipIcon: {
+    ({ tooltip, iconSize, triggerIcon, triggerStyle, }: TooltipIconProps): ReactElement;
+    displayName: string;
+};

package/dist/components/TooltipIcon/TooltipIcon.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TooltipIcon.es.js","sources":["../../../src/components/TooltipIcon/TooltipIcon.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { ~~FC,~~ ReactElement, cloneElement } from 'react';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { Tooltip, TooltipProps } from '@components/Tooltip/Tooltip';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { IconProps } from '@foundation/Icon/IconProps';\nimport { IconQuestionMarkCircle } from '@foundation/Icon/Generated';\n\nexport type TooltipIconProps = {\n tooltip?: TooltipProps;\n iconSize?: IconSize;\n triggerIcon?: ReactElement<IconProps>;\n triggerStyle?: TooltipIconTriggerStyle;\n};\n\nexport enum TooltipIconTriggerStyle {\n Danger = 'Danger',\n Warning = 'Warning',\n Primary = 'Primary',\n}\n\nconst tooltipTriggerStyleClass: Record<TooltipIconTriggerStyle, string> = {\n [TooltipIconTriggerStyle.Danger]: 'tw-text-box-negative-inverse',\n [TooltipIconTriggerStyle.Warning]: 'tw-text-box-warning-inverse',\n [TooltipIconTriggerStyle.Primary]: 'tw-text-text-weak',\n};\n\nconst tooltipHoverClasses = {\n [TooltipIconTriggerStyle.Danger]: 'hover:tw-text-box-negative-inverse-hover hover:tw-bg-box-neutral',\n [TooltipIconTriggerStyle.Warning]: 'hover:tw-text-box-warning-inverse-hover hover:tw-bg-box-neutral',\n [TooltipIconTriggerStyle.Primary]: 'hover:tw-text-text hover:tw-bg-box-neutral',\n};\n\nexport const TooltipIcon: ~~FC<TooltipIconProps>~~ = ({\n tooltip,\n iconSize = IconSize.Size16,\n triggerIcon = <IconQuestionMarkCircle />,\n triggerStyle = TooltipIconTriggerStyle.Primary,\n}: TooltipIconProps) => {\n return (\n <div data-test-id=\"tooltip-icon\">\n {tooltip && (\n <div>\n <Tooltip\n triggerElement={\n <button\n type=\"button\"\n aria-label=\"More info\"\n data-test-id=\"tooltip-icon-trigger\"\n className={merge([\n 'tw-inline-flex tw-justify-center tw-items-center tw-cursor-default tw-outline-none tw-rounded-full',\n FOCUS_VISIBLE_STYLE,\n tooltipTriggerStyleClass[triggerStyle],\n tooltipHoverClasses[triggerStyle],\n ])}\n >\n {cloneElement(triggerIcon, { size: iconSize })}\n </button>\n }\n withArrow={true}\n {...tooltip}\n />\n </div>\n )}\n </div>\n );\n};\nTooltipIcon.displayName = 'FondueTooltipIcon';\n"],"names":["TooltipIconTriggerStyle","tooltipTriggerStyleClass","tooltipHoverClasses","TooltipIcon","tooltip","iconSize","IconSize","triggerIcon","IconQuestionMarkCircle","triggerStyle","React","Tooltip","merge","FOCUS_VISIBLE_STYLE","cloneElement"],"mappings":";;;;;;AAiBY,IAAAA,sBAAAA,OACRA,EAAA,SAAS,UACTA,EAAA,UAAU,WACVA,EAAA,UAAU,WAHFA,IAAAA,KAAA,CAAA,CAAA;AAMZ,MAAMC,IAAoE;AAAA,EACrE,QAAiC;AAAA,EACjC,SAAkC;AAAA,EAClC,SAAkC;AACvC,GAEMC,IAAsB;AAAA,EACvB,QAAiC;AAAA,EACjC,SAAkC;AAAA,EAClC,SAAkC;AACvC,GAEaC,~~IAAoC~~,CAAC;AAAA,~~EAC9C~~,SAAAC;AAAA,EACA,UAAAC,IAAWC,EAAS;AAAA,EACpB,aAAAC,oCAAeC,GAAuB,IAAA;AAAA,EACtC,cAAAC,IAAe;AAAA;AACnB,sCAES,OAAI,EAAA,gBAAa,eACb,GAAAL,qCACI,OACG,MAAA,gBAAAM,EAAA;AAAA,EAACC;AAAA,EAAA;AAAA,IACG,gBACI,gBAAAD,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,MAAK;AAAA,QACL,cAAW;AAAA,QACX,gBAAa;AAAA,QACb,WAAWE,EAAM;AAAA,UACb;AAAA,UACAC;AAAA,UACAZ,EAAyBQ,CAAY;AAAA,UACrCP,EAAoBO,CAAY;AAAA,QAAA,CACnC;AAAA,MAAA;AAAA,MAEAK,EAAaP,GAAa,EAAE,MAAMF,GAAU;AAAA,IACjD;AAAA,IAEJ,WAAW;AAAA,IACV,GAAGD;AAAA,EAAA;AAEZ,CAAA,CAER;AAGRD,EAAY,cAAc;"}
1	+ {"version":3,"file":"TooltipIcon.es.js","sources":["../../../src/components/TooltipIcon/TooltipIcon.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { ReactElement, cloneElement } from 'react';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { Tooltip, TooltipProps } from '@components/Tooltip/Tooltip';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { IconProps } from '@foundation/Icon/IconProps';\nimport { IconQuestionMarkCircle } from '@foundation/Icon/Generated';\n\nexport type TooltipIconProps = {\n tooltip?: TooltipProps;\n iconSize?: IconSize;\n triggerIcon?: ReactElement<IconProps>;\n triggerStyle?: TooltipIconTriggerStyle;\n};\n\nexport enum TooltipIconTriggerStyle {\n Danger = 'Danger',\n Warning = 'Warning',\n Primary = 'Primary',\n}\n\nconst tooltipTriggerStyleClass: Record<TooltipIconTriggerStyle, string> = {\n [TooltipIconTriggerStyle.Danger]: 'tw-text-box-negative-inverse',\n [TooltipIconTriggerStyle.Warning]: 'tw-text-box-warning-inverse',\n [TooltipIconTriggerStyle.Primary]: 'tw-text-text-weak',\n};\n\nconst tooltipHoverClasses = {\n [TooltipIconTriggerStyle.Danger]: 'hover:tw-text-box-negative-inverse-hover hover:tw-bg-box-neutral',\n [TooltipIconTriggerStyle.Warning]: 'hover:tw-text-box-warning-inverse-hover hover:tw-bg-box-neutral',\n [TooltipIconTriggerStyle.Primary]: 'hover:tw-text-text hover:tw-bg-box-neutral',\n};\n\nexport const TooltipIcon = ({\n tooltip,\n iconSize = IconSize.Size16,\n triggerIcon = <IconQuestionMarkCircle />,\n triggerStyle = TooltipIconTriggerStyle.Primary,\n}: TooltipIconProps): ReactElement => {\n return (\n <div data-test-id=\"tooltip-icon\">\n {tooltip && (\n <div>\n <Tooltip\n triggerElement={\n <button\n type=\"button\"\n aria-label=\"More info\"\n data-test-id=\"tooltip-icon-trigger\"\n className={merge([\n 'tw-inline-flex tw-justify-center tw-items-center tw-cursor-default tw-outline-none tw-rounded-full',\n FOCUS_VISIBLE_STYLE,\n tooltipTriggerStyleClass[triggerStyle],\n tooltipHoverClasses[triggerStyle],\n ])}\n >\n {cloneElement(triggerIcon, { size: iconSize })}\n </button>\n }\n withArrow={true}\n {...tooltip}\n />\n </div>\n )}\n </div>\n );\n};\nTooltipIcon.displayName = 'FondueTooltipIcon';\n"],"names":["TooltipIconTriggerStyle","tooltipTriggerStyleClass","tooltipHoverClasses","TooltipIcon","tooltip","iconSize","IconSize","triggerIcon","IconQuestionMarkCircle","triggerStyle","React","Tooltip","merge","FOCUS_VISIBLE_STYLE","cloneElement"],"mappings":";;;;;;AAiBY,IAAAA,sBAAAA,OACRA,EAAA,SAAS,UACTA,EAAA,UAAU,WACVA,EAAA,UAAU,WAHFA,IAAAA,KAAA,CAAA,CAAA;AAMZ,MAAMC,IAAoE;AAAA,EACrE,QAAiC;AAAA,EACjC,SAAkC;AAAA,EAClC,SAAkC;AACvC,GAEMC,IAAsB;AAAA,EACvB,QAAiC;AAAA,EACjC,SAAkC;AAAA,EAClC,SAAkC;AACvC,GAEaC,IAAc,CAAC;AAAA,EACxB,SAAAC;AAAA,EACA,UAAAC,IAAWC,EAAS;AAAA,EACpB,aAAAC,oCAAeC,GAAuB,IAAA;AAAA,EACtC,cAAAC,IAAe;AAAA;AACnB,sCAES,OAAI,EAAA,gBAAa,eACb,GAAAL,qCACI,OACG,MAAA,gBAAAM,EAAA;AAAA,EAACC;AAAA,EAAA;AAAA,IACG,gBACI,gBAAAD,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,MAAK;AAAA,QACL,cAAW;AAAA,QACX,gBAAa;AAAA,QACb,WAAWE,EAAM;AAAA,UACb;AAAA,UACAC;AAAA,UACAZ,EAAyBQ,CAAY;AAAA,UACrCP,EAAoBO,CAAY;AAAA,QAAA,CACnC;AAAA,MAAA;AAAA,MAEAK,EAAaP,GAAa,EAAE,MAAMF,GAAU;AAAA,IACjD;AAAA,IAEJ,WAAW;AAAA,IACV,GAAGD;AAAA,EAAA;AAEZ,CAAA,CAER;AAGRD,EAAY,cAAc;"}

package/dist/components/Trigger/Trigger.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { Validation } from '../../utilities/validation';
-import { FC, HTMLAttributes } from 'react';
+import { HTMLAttributes, ReactElement, ReactNode } from 'react';
 export declare enum TriggerSize {
     Small = "Small",
     Large = "Large"
@@ -10,6 +10,7 @@ export declare enum TriggerEmphasis {
 }
 export type TriggerProps = {
     disabled?: boolean;
+    children?: ReactNode;
     isOpen?: boolean;
     onClear?: () => void;
     onDelete?: () => void;
@@ -20,4 +21,7 @@ export type TriggerProps = {
     validation?: Validation;
     emphasis?: TriggerEmphasis;
 };
-export declare const Trigger: FC<TriggerProps>;
+export declare const Trigger: {
+    ({ buttonProps, onClear, onDelete, children, disabled, isOpen, isFocusVisible, size, showClear, validation, emphasis, }: TriggerProps): ReactElement;
+    displayName: string;
+};

package/dist/components/Trigger/Trigger.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Trigger.es.js","sources":["../../../src/components/Trigger/Trigger.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown, IconCross, IconExclamationMarkTriangle, IconTrashBin } from '@foundation/Icon/Generated';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { useFocusRing } from '@react-aria/focus';\nimport { FOCUS_STYLE, FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { Validation, validationClassMap } from '@utilities/validation';\nimport React, { FC, ~~HTMLAttributes~~ } from 'react';\n\nexport enum TriggerSize {\n Small = 'Small',\n Large = 'Large',\n}\n\nexport enum TriggerEmphasis {\n Default = 'Default',\n Weak = 'Weak',\n}\n\nexport type TriggerProps = {\n disabled?: boolean;\n isOpen?: boolean;\n onClear?: () => void;\n onDelete?: () => void;\n buttonProps?: HTMLAttributes<HTMLElement>;\n isFocusVisible?: boolean;\n size?: TriggerSize;\n showClear?: boolean;\n validation?: Validation;\n emphasis?: TriggerEmphasis;\n};\n\nconst getTriggerClassNames = (\n isFocusVisible: boolean,\n disabled: boolean,\n isOpen: boolean,\n emphasis: TriggerEmphasis,\n validation: Validation,\n) =>\n merge([\n 'tw-group tw-relative tw-flex tw-w-full tw-items-center tw-justify-between tw-border tw-rounded tw-transition-colors tw-min-h-[36px]',\n isFocusVisible && FOCUS_STYLE,\n disabled\n ? 'tw-border-black-5 tw-bg-black-5 tw-pointer-events-none'\n : merge([\n 'hover:tw-border-line-xx-strong',\n emphasis === TriggerEmphasis.Weak ? '' : 'tw-bg-base',\n isOpen ? 'tw-border-line-xx-strong' : 'tw-border-line',\n emphasis === TriggerEmphasis.Weak\n ? 'tw-border-0 hover:tw-outline hover:tw-outline-1'\n : validationClassMap[validation],\n ]),\n ]);\n\nexport const Trigger: ~~FC<TriggerProps>~~ = ({\n buttonProps,\n onClear,\n onDelete,\n children,\n disabled = false,\n isOpen = false,\n isFocusVisible = false,\n size = TriggerSize.Small,\n showClear = false,\n validation = Validation.Default,\n emphasis = TriggerEmphasis.Default,\n}) => {\n const { focusProps: clearableFocusProps, isFocusVisible: isClearFocusVisible } = useFocusRing();\n const { focusProps: onDeleteFocusProps, isFocusVisible: isOnDeleteFocusVisible } = useFocusRing();\n\n return (\n <div\n data-test-id=\"trigger\"\n className={getTriggerClassNames(isFocusVisible, disabled, isOpen, emphasis, validation)}\n >\n {children}\n <div\n className={merge([\n 'tw-flex-none tw-flex tw-items-center tw-absolute',\n size === TriggerSize.Large ? 'tw-right-5 tw-gap-1.5' : 'tw-right-3 tw-gap-1',\n ])}\n >\n {showClear && (\n <button\n {...clearableFocusProps}\n data-test-id=\"dropdown-clear-button\"\n aria-label=\"Clear selection\"\n type=\"button\"\n className={merge([\n isClearFocusVisible && FOCUS_STYLE,\n disabled ? 'tw-pointer-events-none tw-text-black-40' : 'tw-text-black-80',\n ])}\n onClick={() => !!onClear && onClear()}\n >\n <IconCross size={IconSize.Size12} />\n </button>\n )}\n {!!onDelete && (\n <button\n {...onDeleteFocusProps}\n data-test-id=\"dropdown-delete-button\"\n aria-label=\"Delete selection\"\n type=\"button\"\n className={merge([\n 'tw-rounded',\n isOnDeleteFocusVisible && FOCUS_STYLE,\n disabled ? 'tw-pointer-events-none tw-text-black-40' : 'tw-text-black-80',\n ])}\n onClick={onDelete}\n >\n <IconTrashBin size={IconSize.Size12} />\n </button>\n )}\n <button\n {...buttonProps}\n aria-hidden=\"true\"\n type=\"button\"\n disabled={disabled}\n className={merge([\n 'tw-rounded',\n disabled\n ? 'tw-pointer-events-none tw-text-black-40'\n : merge([\n 'group-hover:tw-text-black ',\n isOpen ? 'tw-text-black-100' : 'tw-text-black-80',\n FOCUS_VISIBLE_STYLE,\n ]),\n ])}\n >\n <div className={merge(['tw-transition-transform', isOpen && 'tw-rotate-180'])}>\n <IconCaretDown size={IconSize.Size16} />\n </div>\n </button>\n {(validation === Validation.Error \|\| validation === Validation.Warning) && (\n <span\n className={merge([\n 'tw-flex tw-items-center tw-justify-center',\n validation === Validation.Error && 'tw-text-text-negative',\n validation === Validation.Warning && 'tw-text-text-warning',\n ])}\n data-test-id=\"error-state-exclamation-mark-icon\"\n >\n <IconExclamationMarkTriangle />\n </span>\n )}\n </div>\n </div>\n );\n};\nTrigger.displayName = 'FondueTrigger';\n"],"names":["TriggerSize","TriggerEmphasis","getTriggerClassNames","isFocusVisible","disabled","isOpen","emphasis","validation","merge","FOCUS_STYLE","validationClassMap","Trigger","buttonProps","onClear","onDelete","children","size","showClear","Validation","clearableFocusProps","isClearFocusVisible","useFocusRing","onDeleteFocusProps","isOnDeleteFocusVisible","React","IconCross","IconSize","IconTrashBin","FOCUS_VISIBLE_STYLE","IconCaretDown","IconExclamationMarkTriangle"],"mappings":";;;;;;;;;;AAUY,IAAAA,sBAAAA,OACRA,EAAA,QAAQ,SACRA,EAAA,QAAQ,SAFAA,IAAAA,KAAA,CAAA,CAAA,GAKAC,sBAAAA,OACRA,EAAA,UAAU,WACVA,EAAA,OAAO,QAFCA,IAAAA,KAAA,CAAA,CAAA;~~AAkBZ~~,MAAMC,IAAuB,CACzBC,GACAC,GACAC,GACAC,GACAC,MAEAC,EAAM;AAAA,EACF;AAAA,EACAL,KAAkBM;AAAA,EAClBL,IACM,2DACAI,EAAM;AAAA,IACF;AAAA,IACAF,MAAa,SAAuB,KAAK;AAAA,IACzCD,IAAS,6BAA6B;AAAA,IACtCC,MAAa,SACP,oDACAI,EAAmBH,CAAU;AAAA,EAAA,CACtC;AACX,CAAC,GAEQI,~~IAA4B~~,CAAC;AAAA,~~EACtC~~,aAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAX,IAAW;AAAA,EACX,QAAAC,IAAS;AAAA,EACT,gBAAAF,IAAiB;AAAA,EACjB,MAAAa,IAAO;AAAA,EACP,WAAAC,IAAY;AAAA,EACZ,YAAAV,IAAaW,EAAW;AAAA,EACxB,UAAAZ,IAAW;AAAA;AACf,~~MAAM~~;~~AACF~~,QAAM,EAAE,YAAYa,GAAqB,gBAAgBC,EAAA,IAAwBC,KAC3E,EAAE,YAAYC,GAAoB,gBAAgBC,EAAA,IAA2BF;AAG/E,SAAA,gBAAAG,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,gBAAa;AAAA,MACb,WAAWtB,EAAqBC,GAAgBC,GAAUC,GAAQC,GAAUC,CAAU;AAAA,IAAA;AAAA,IAErFQ;AAAA,IACD,gBAAAS,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAWhB,EAAM;AAAA,UACb;AAAA,UACAQ,MAAS,UAAoB,0BAA0B;AAAA,QAAA,CAC1D;AAAA,MAAA;AAAA,MAEAC,KACG,gBAAAO,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACI,GAAGL;AAAA,UACJ,gBAAa;AAAA,UACb,cAAW;AAAA,UACX,MAAK;AAAA,UACL,WAAWX,EAAM;AAAA,YACbY,KAAuBX;AAAA,YACvBL,IAAW,4CAA4C;AAAA,UAAA,CAC1D;AAAA,UACD,SAAS,MAAM,CAAC,CAACS,KAAWA,EAAQ;AAAA,QAAA;AAAA,QAEnC,gBAAAW,EAAA,cAAAC,GAAA,EAAU,MAAMC,EAAS,QAAQ;AAAA,MACtC;AAAA,MAEH,CAAC,CAACZ,KACC,gBAAAU,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACI,GAAGF;AAAA,UACJ,gBAAa;AAAA,UACb,cAAW;AAAA,UACX,MAAK;AAAA,UACL,WAAWd,EAAM;AAAA,YACb;AAAA,YACAe,KAA0Bd;AAAA,YAC1BL,IAAW,4CAA4C;AAAA,UAAA,CAC1D;AAAA,UACD,SAASU;AAAA,QAAA;AAAA,QAER,gBAAAU,EAAA,cAAAG,GAAA,EAAa,MAAMD,EAAS,QAAQ;AAAA,MACzC;AAAA,MAEJ,gBAAAF,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACI,GAAGZ;AAAA,UACJ,eAAY;AAAA,UACZ,MAAK;AAAA,UACL,UAAAR;AAAA,UACA,WAAWI,EAAM;AAAA,YACb;AAAA,YACAJ,IACM,4CACAI,EAAM;AAAA,cACF;AAAA,cACAH,IAAS,sBAAsB;AAAA,cAC/BuB;AAAA,YAAA,CACH;AAAA,UAAA,CACV;AAAA,QAAA;AAAA,QAEA,gBAAAJ,EAAA,cAAA,OAAA,EAAI,WAAWhB,EAAM,CAAC,2BAA2BH,KAAU,eAAe,CAAC,KACvE,gBAAAmB,EAAA,cAAAK,GAAA,EAAc,MAAMH,EAAS,QAAQ,CAC1C;AAAA,MACJ;AAAA,OACEnB,MAAeW,EAAW,SAASX,MAAeW,EAAW,YAC3D,gBAAAM,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAWhB,EAAM;AAAA,YACb;AAAA,YACAD,MAAeW,EAAW,SAAS;AAAA,YACnCX,MAAeW,EAAW,WAAW;AAAA,UAAA,CACxC;AAAA,UACD,gBAAa;AAAA,QAAA;AAAA,wCAEZY,GAA4B,IAAA;AAAA,MACjC;AAAA,IAER;AAAA,EAAA;AAGZ;AACAnB,EAAQ,cAAc;"}
1	+ {"version":3,"file":"Trigger.es.js","sources":["../../../src/components/Trigger/Trigger.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown, IconCross, IconExclamationMarkTriangle, IconTrashBin } from '@foundation/Icon/Generated';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { useFocusRing } from '@react-aria/focus';\nimport { FOCUS_STYLE, FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { Validation, validationClassMap } from '@utilities/validation';\nimport React, { HTMLAttributes, ReactElement, ReactNode } from 'react';\n\nexport enum TriggerSize {\n Small = 'Small',\n Large = 'Large',\n}\n\nexport enum TriggerEmphasis {\n Default = 'Default',\n Weak = 'Weak',\n}\n\nexport type TriggerProps = {\n disabled?: boolean;\n children?: ReactNode;\n isOpen?: boolean;\n onClear?: () => void;\n onDelete?: () => void;\n buttonProps?: HTMLAttributes<HTMLElement>;\n isFocusVisible?: boolean;\n size?: TriggerSize;\n showClear?: boolean;\n validation?: Validation;\n emphasis?: TriggerEmphasis;\n};\n\nconst getTriggerClassNames = (\n isFocusVisible: boolean,\n disabled: boolean,\n isOpen: boolean,\n emphasis: TriggerEmphasis,\n validation: Validation,\n) =>\n merge([\n 'tw-group tw-relative tw-flex tw-w-full tw-items-center tw-justify-between tw-border tw-rounded tw-transition-colors tw-min-h-[36px]',\n isFocusVisible && FOCUS_STYLE,\n disabled\n ? 'tw-border-black-5 tw-bg-black-5 tw-pointer-events-none'\n : merge([\n 'hover:tw-border-line-xx-strong',\n emphasis === TriggerEmphasis.Weak ? '' : 'tw-bg-base',\n isOpen ? 'tw-border-line-xx-strong' : 'tw-border-line',\n emphasis === TriggerEmphasis.Weak\n ? 'tw-border-0 hover:tw-outline hover:tw-outline-1'\n : validationClassMap[validation],\n ]),\n ]);\n\nexport const Trigger = ({\n buttonProps,\n onClear,\n onDelete,\n children,\n disabled = false,\n isOpen = false,\n isFocusVisible = false,\n size = TriggerSize.Small,\n showClear = false,\n validation = Validation.Default,\n emphasis = TriggerEmphasis.Default,\n}: TriggerProps): ReactElement => {\n const { focusProps: clearableFocusProps, isFocusVisible: isClearFocusVisible } = useFocusRing();\n const { focusProps: onDeleteFocusProps, isFocusVisible: isOnDeleteFocusVisible } = useFocusRing();\n\n return (\n <div\n data-test-id=\"trigger\"\n className={getTriggerClassNames(isFocusVisible, disabled, isOpen, emphasis, validation)}\n >\n {children}\n <div\n className={merge([\n 'tw-flex-none tw-flex tw-items-center tw-absolute',\n size === TriggerSize.Large ? 'tw-right-5 tw-gap-1.5' : 'tw-right-3 tw-gap-1',\n ])}\n >\n {showClear && (\n <button\n {...clearableFocusProps}\n data-test-id=\"dropdown-clear-button\"\n aria-label=\"Clear selection\"\n type=\"button\"\n className={merge([\n isClearFocusVisible && FOCUS_STYLE,\n disabled ? 'tw-pointer-events-none tw-text-black-40' : 'tw-text-black-80',\n ])}\n onClick={() => !!onClear && onClear()}\n >\n <IconCross size={IconSize.Size12} />\n </button>\n )}\n {!!onDelete && (\n <button\n {...onDeleteFocusProps}\n data-test-id=\"dropdown-delete-button\"\n aria-label=\"Delete selection\"\n type=\"button\"\n className={merge([\n 'tw-rounded',\n isOnDeleteFocusVisible && FOCUS_STYLE,\n disabled ? 'tw-pointer-events-none tw-text-black-40' : 'tw-text-black-80',\n ])}\n onClick={onDelete}\n >\n <IconTrashBin size={IconSize.Size12} />\n </button>\n )}\n <button\n {...buttonProps}\n aria-hidden=\"true\"\n type=\"button\"\n disabled={disabled}\n className={merge([\n 'tw-rounded',\n disabled\n ? 'tw-pointer-events-none tw-text-black-40'\n : merge([\n 'group-hover:tw-text-black ',\n isOpen ? 'tw-text-black-100' : 'tw-text-black-80',\n FOCUS_VISIBLE_STYLE,\n ]),\n ])}\n >\n <div className={merge(['tw-transition-transform', isOpen && 'tw-rotate-180'])}>\n <IconCaretDown size={IconSize.Size16} />\n </div>\n </button>\n {(validation === Validation.Error \|\| validation === Validation.Warning) && (\n <span\n className={merge([\n 'tw-flex tw-items-center tw-justify-center',\n validation === Validation.Error && 'tw-text-text-negative',\n validation === Validation.Warning && 'tw-text-text-warning',\n ])}\n data-test-id=\"error-state-exclamation-mark-icon\"\n >\n <IconExclamationMarkTriangle />\n </span>\n )}\n </div>\n </div>\n );\n};\nTrigger.displayName = 'FondueTrigger';\n"],"names":["TriggerSize","TriggerEmphasis","getTriggerClassNames","isFocusVisible","disabled","isOpen","emphasis","validation","merge","FOCUS_STYLE","validationClassMap","Trigger","buttonProps","onClear","onDelete","children","size","showClear","Validation","clearableFocusProps","isClearFocusVisible","useFocusRing","onDeleteFocusProps","isOnDeleteFocusVisible","React","IconCross","IconSize","IconTrashBin","FOCUS_VISIBLE_STYLE","IconCaretDown","IconExclamationMarkTriangle"],"mappings":"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"}