diff --git a/frontend/__snapshots__/components-properties-timeline--multiple-points-for-one-person-property--light.png b/frontend/__snapshots__/components-properties-timeline--multiple-points-for-one-person-property--light.png index 440227a985a..07182f799b3 100644 Binary files a/frontend/__snapshots__/components-properties-timeline--multiple-points-for-one-person-property--light.png and b/frontend/__snapshots__/components-properties-timeline--multiple-points-for-one-person-property--light.png differ diff --git a/frontend/src/layout/navigation-3000/sidepanel/components/SidePanelPaneHeader.tsx b/frontend/src/layout/navigation-3000/sidepanel/components/SidePanelPaneHeader.tsx index 22deb66030b..1346c218f55 100644 --- a/frontend/src/layout/navigation-3000/sidepanel/components/SidePanelPaneHeader.tsx +++ b/frontend/src/layout/navigation-3000/sidepanel/components/SidePanelPaneHeader.tsx @@ -31,10 +31,7 @@ export function SidePanelPaneHeader({ children, title }: SidePanelPaneHeaderProp ) : null} {children} - + } onClick={() => closeSidePanel()} /> diff --git a/frontend/src/layout/navigation/SideBar/SidebarChangeNotice.tsx b/frontend/src/layout/navigation/SideBar/SidebarChangeNotice.tsx index a0a1514a7a1..7169521d5a2 100644 --- a/frontend/src/layout/navigation/SideBar/SidebarChangeNotice.tsx +++ b/frontend/src/layout/navigation/SideBar/SidebarChangeNotice.tsx @@ -40,7 +40,7 @@ const NOTICES: { You can now find them in Data Management ), - placement: 'rightBottom', + placement: 'bottom-end', flagSuffix: 'annotations-2023-10-30', }, { @@ -52,7 +52,7 @@ const NOTICES: { You can now find them in People ), - placement: 'rightTop', + placement: 'top-end', flagSuffix: 'cohorts-2023-10-30', }, ] diff --git a/frontend/src/lib/components/AddToDashboard/AddToDashboardModal.tsx b/frontend/src/lib/components/AddToDashboard/AddToDashboardModal.tsx index 3d651fa39b7..66db1793379 100644 --- a/frontend/src/lib/components/AddToDashboard/AddToDashboardModal.tsx +++ b/frontend/src/lib/components/AddToDashboard/AddToDashboardModal.tsx @@ -65,7 +65,9 @@ const DashboardRelationRow = ({ {isPrimary && ( - + + + )} diff --git a/frontend/src/lib/components/Cards/InsightCard/InsightMeta.tsx b/frontend/src/lib/components/Cards/InsightCard/InsightMeta.tsx index 9f51da2e10b..c213cbbe0c5 100644 --- a/frontend/src/lib/components/Cards/InsightCard/InsightMeta.tsx +++ b/frontend/src/lib/components/Cards/InsightCard/InsightMeta.tsx @@ -105,7 +105,7 @@ export function InsightMeta({ {loading && ( diff --git a/frontend/src/lib/components/DefinitionPopover/DefinitionPopoverContents.tsx b/frontend/src/lib/components/DefinitionPopover/DefinitionPopoverContents.tsx index d4dceda9988..ede4f6095f8 100644 --- a/frontend/src/lib/components/DefinitionPopover/DefinitionPopoverContents.tsx +++ b/frontend/src/lib/components/DefinitionPopover/DefinitionPopoverContents.tsx @@ -1,5 +1,5 @@ import { hide } from '@floating-ui/react' -import { IconLock } from '@posthog/icons' +import { IconInfo, IconLock } from '@posthog/icons' import { LemonButton, LemonCheckbox, LemonDivider } from '@posthog/lemon-ui' import { useActions, useValues } from 'kea' import { ActionPopoverInfo } from 'lib/components/DefinitionPopover/ActionPopoverInfo' @@ -14,7 +14,7 @@ import { TaxonomicFilterGroup, TaxonomicFilterGroupType, } from 'lib/components/TaxonomicFilter/types' -import { IconInfo, IconOpenInNew } from 'lib/lemon-ui/icons' +import { IconOpenInNew } from 'lib/lemon-ui/icons' import { LemonTextArea } from 'lib/lemon-ui/LemonTextArea/LemonTextArea' import { Link } from 'lib/lemon-ui/Link' import { Popover } from 'lib/lemon-ui/Popover' diff --git a/frontend/src/lib/components/EditableField/EditableField.tsx b/frontend/src/lib/components/EditableField/EditableField.tsx index 2673b59f1fa..28cb2e4a247 100644 --- a/frontend/src/lib/components/EditableField/EditableField.tsx +++ b/frontend/src/lib/components/EditableField/EditableField.tsx @@ -204,7 +204,9 @@ export function EditableField({
{markdown && ( - + + + )} @@ -273,10 +275,12 @@ export function EditableField({ {!isEditing && notice && ( - {React.cloneElement(notice.icon, { - ...notice.icon.props, - className: clsx(notice.icon.props.className, 'EditableField__notice'), - })} + + {React.cloneElement(notice.icon, { + ...notice.icon.props, + className: clsx(notice.icon.props.className, 'EditableField__notice'), + })} + )}
diff --git a/frontend/src/lib/components/ExportButton/ExportButton.tsx b/frontend/src/lib/components/ExportButton/ExportButton.tsx index 52c4bfc9978..863b7f4f1d5 100644 --- a/frontend/src/lib/components/ExportButton/ExportButton.tsx +++ b/frontend/src/lib/components/ExportButton/ExportButton.tsx @@ -1,6 +1,7 @@ import { useMountedLogic } from 'kea' import { LemonButton, LemonButtonProps, LemonButtonWithDropdown } from 'lib/lemon-ui/LemonButton' import { LemonDivider } from 'lib/lemon-ui/LemonDivider' +import { forwardRef } from 'react' import { sidePanelExportsLogic } from '~/layout/navigation-3000/sidepanel/panels/exports/sidePanelExportsLogic' import { sidePanelLogic } from '~/layout/navigation-3000/sidepanel/sidePanelLogic' @@ -20,69 +21,72 @@ export interface ExportButtonProps extends Pick> = + forwardRef(function ExportButton({ items, ...buttonProps }, ref): JSX.Element { + useMountedLogic(sidePanelLogic) + useMountedLogic(sidePanelExportsLogic) - const { actions } = sidePanelLogic - const { loadExports } = sidePanelExportsLogic.actions + const { actions } = sidePanelLogic + const { loadExports } = sidePanelExportsLogic.actions - const onExportClick = async (triggerExportProps: TriggerExportProps): Promise => { - actions.openSidePanel(SidePanelTab.Exports) - loadExports() - await triggerExport(triggerExportProps) - loadExports() - } + const onExportClick = async (triggerExportProps: TriggerExportProps): Promise => { + actions.openSidePanel(SidePanelTab.Exports) + loadExports() + await triggerExport(triggerExportProps) + loadExports() + } - return ( - -
File type
- - {items.map(({ title, ...triggerExportProps }, i) => { - const exportFormatExtension = triggerExportProps.export_format.split('/').pop() + return ( + +
File type
+ + {items.map(({ title, ...triggerExportProps }, i) => { + const exportFormatExtension = triggerExportProps.export_format.split('/').pop() - let target: string - let exportBody: string = '' - if (triggerExportProps.insight) { - target = `insight-${triggerExportProps.insight}` - } else if (triggerExportProps.dashboard) { - target = `dashboard-${triggerExportProps.dashboard}` - } else if ('path' in (triggerExportProps.export_context || {})) { - target = (triggerExportProps.export_context as OnlineExportContext)?.path || 'unknown' - exportBody = - (triggerExportProps.export_context as OnlineExportContext)?.body || 'unknown' - } else { - target = 'unknown' - } + let target: string + let exportBody: string = '' + if (triggerExportProps.insight) { + target = `insight-${triggerExportProps.insight}` + } else if (triggerExportProps.dashboard) { + target = `dashboard-${triggerExportProps.dashboard}` + } else if ('path' in (triggerExportProps.export_context || {})) { + target = + (triggerExportProps.export_context as OnlineExportContext)?.path || 'unknown' + exportBody = + (triggerExportProps.export_context as OnlineExportContext)?.body || 'unknown' + } else { + target = 'unknown' + } - return ( - void onExportClick(triggerExportProps)} - data-attr={`export-button-${exportFormatExtension}`} - data-ph-capture-attribute-export-target={target} - data-ph-capture-attribute-export-body={ - exportBody.length ? JSON.stringify(exportBody) : null - } - > - {title ? title : `.${exportFormatExtension}`} - - ) - })} - - ), - }} - > - Export - - ) -} + return ( + void onExportClick(triggerExportProps)} + data-attr={`export-button-${exportFormatExtension}`} + data-ph-capture-attribute-export-target={target} + data-ph-capture-attribute-export-body={ + exportBody.length ? JSON.stringify(exportBody) : null + } + > + {title ? title : `.${exportFormatExtension}`} + + ) + })} + + ), + }} + > + Export + + ) + }) diff --git a/frontend/src/lib/components/PropertiesTimeline/PropertiesTimeline.tsx b/frontend/src/lib/components/PropertiesTimeline/PropertiesTimeline.tsx index 08549fb345a..6d1772aa0bb 100644 --- a/frontend/src/lib/components/PropertiesTimeline/PropertiesTimeline.tsx +++ b/frontend/src/lib/components/PropertiesTimeline/PropertiesTimeline.tsx @@ -1,8 +1,8 @@ +import { IconInfo } from '@posthog/icons' import { LemonDivider } from '@posthog/lemon-ui' import { Properties } from '@posthog/plugin-scaffold' import { useActions, useValues } from 'kea' import { PropertiesTable } from 'lib/components/PropertiesTable' -import { IconInfo } from 'lib/lemon-ui/icons' import { Tooltip } from 'lib/lemon-ui/Tooltip' import { humanList } from 'lib/utils' import { teamLogic } from 'scenes/teamLogic' diff --git a/frontend/src/lib/components/PropertyFilters/components/PropertyFilterIcon.tsx b/frontend/src/lib/components/PropertyFilters/components/PropertyFilterIcon.tsx index 31b9cb65a4b..31da14675eb 100644 --- a/frontend/src/lib/components/PropertyFilters/components/PropertyFilterIcon.tsx +++ b/frontend/src/lib/components/PropertyFilters/components/PropertyFilterIcon.tsx @@ -1,4 +1,5 @@ -import { IconCohort, IconPerson, IconUnverifiedEvent } from 'lib/lemon-ui/icons' +import { IconPerson } from '@posthog/icons' +import { IconCohort, IconUnverifiedEvent } from 'lib/lemon-ui/icons' import { Tooltip } from 'lib/lemon-ui/Tooltip' import { PropertyFilterType } from '~/types' @@ -9,7 +10,9 @@ export function PropertyFilterIcon({ type }: { type?: PropertyFilterType }): JSX case 'event': iconElement = ( - + + + ) break @@ -23,7 +26,9 @@ export function PropertyFilterIcon({ type }: { type?: PropertyFilterType }): JSX case 'cohort': iconElement = ( - + + + ) break diff --git a/frontend/src/lib/components/RestrictedArea.tsx b/frontend/src/lib/components/RestrictedArea.tsx index 636ab88b06d..fbcfc2b1b0d 100644 --- a/frontend/src/lib/components/RestrictedArea.tsx +++ b/frontend/src/lib/components/RestrictedArea.tsx @@ -70,7 +70,7 @@ export function RestrictedArea({ const restrictionReason = useRestrictedArea({ minimumAccessLevel, scope }) return restrictionReason ? ( - + diff --git a/frontend/src/lib/components/TaxonomicFilter/TaxonomicFilter.tsx b/frontend/src/lib/components/TaxonomicFilter/TaxonomicFilter.tsx index 18100e3e3fd..6ef36a2101a 100644 --- a/frontend/src/lib/components/TaxonomicFilter/TaxonomicFilter.tsx +++ b/frontend/src/lib/components/TaxonomicFilter/TaxonomicFilter.tsx @@ -1,5 +1,6 @@ import './TaxonomicFilter.scss' +import { IconKeyboard } from '@posthog/icons' import clsx from 'clsx' import { BindLogic, useActions, useValues } from 'kea' import { @@ -7,7 +8,6 @@ import { TaxonomicFilterLogicProps, TaxonomicFilterProps, } from 'lib/components/TaxonomicFilter/types' -import { IconKeyboard } from 'lib/lemon-ui/icons' import { LemonInput } from 'lib/lemon-ui/LemonInput/LemonInput' import { Tooltip } from 'lib/lemon-ui/Tooltip' import { useEffect, useMemo, useRef } from 'react' diff --git a/frontend/src/lib/components/TimelineSeekbar/TimelineSeekbar.tsx b/frontend/src/lib/components/TimelineSeekbar/TimelineSeekbar.tsx index 26fc8507bbe..b2fdf2c5cfe 100644 --- a/frontend/src/lib/components/TimelineSeekbar/TimelineSeekbar.tsx +++ b/frontend/src/lib/components/TimelineSeekbar/TimelineSeekbar.tsx @@ -6,7 +6,6 @@ import { Dayjs } from 'lib/dayjs' import { Spinner } from 'lib/lemon-ui/Spinner/Spinner' import { Tooltip } from 'lib/lemon-ui/Tooltip' import { humanFriendlyDetailedTime, pluralize } from 'lib/utils' -import { AlignType } from 'rc-trigger/lib/interface' export interface TimelinePoint { timestamp: Dayjs @@ -23,25 +22,6 @@ export interface TimelineSeekbarProps { className?: string } -const SEEKBAR_TOOLTIP_PLACEMENTS: Record = { - topRight: { - points: ['br', 'tr'], - offset: [7, 0], // To align with badges - overflow: { - adjustX: 0, - adjustY: 0, - }, - }, - topLeft: { - points: ['bl', 'tl'], - offset: [-7, 0], // To align with badges - overflow: { - adjustX: 0, - adjustY: 0, - }, - }, -} - export function TimelineSeekbar({ points, note, @@ -80,8 +60,8 @@ export function TimelineSeekbar({ "This data point's range hasn't been loaded yet" ) } - placement="topLeft" - builtinPlacements={SEEKBAR_TOOLTIP_PLACEMENTS} + placement="top-start" + offset={0} delayMs={0} >
@@ -101,8 +81,8 @@ export function TimelineSeekbar({ "This data point's range hasn't been loaded yet" ) } - placement="topRight" - builtinPlacements={SEEKBAR_TOOLTIP_PLACEMENTS} + placement="top-end" + offset={0} delayMs={0} >
} - placement="topLeft" - builtinPlacements={SEEKBAR_TOOLTIP_PLACEMENTS} + placement="top-start" + arrowOffset={7} delayMs={0} >
- - {content} - - - ) -} +const LemonBadgeComponent: React.FunctionComponent> = forwardRef( + function LemonBadgeComponent( + { + content, + visible = true, + size = 'medium', + position = 'none', + className, + status = 'primary', + active = false, + ...spanProps + }, + ref + ): JSX.Element { + return ( + + + {content} + + + ) + } +) /** An icon-sized badge for displaying a count. * @@ -63,37 +70,34 @@ export function LemonBadge({ * JSX elements are rendered outright to support use cases where the badge is meant to show an icon. * If `showZero` is set to `true`, the component won't be hidden if the count is 0. */ -function LemonBadgeNumber({ - count, - maxDigits = 1, - showZero = false, - ...badgeProps -}: LemonBadgeNumberProps): JSX.Element { - if (maxDigits < 1) { - throw new Error('maxDigits must be at least 1') - } +const LemonBadgeNumber: React.FunctionComponent> = + forwardRef(function LemonBadgeNumber({ count, maxDigits = 1, showZero = false, ...badgeProps }, ref): JSX.Element { + if (maxDigits < 1) { + throw new Error('maxDigits must be at least 1') + } - // NOTE: We use 1 for the text if not showing so the fade out animation looks right - const text = - typeof count === 'object' - ? count - : typeof count === 'number' && count !== 0 - ? count < Math.pow(10, maxDigits) - ? compactNumber(count) - : `${'9'.repeat(maxDigits)}+` - : showZero - ? '0' - : '1' - const hide = count === undefined || (count == 0 && !showZero) + // NOTE: We use 1 for the text if not showing so the fade out animation looks right + const text = + typeof count === 'object' + ? count + : typeof count === 'number' && count !== 0 + ? count < Math.pow(10, maxDigits) + ? compactNumber(count) + : `${'9'.repeat(maxDigits)}+` + : showZero + ? '0' + : '1' + const hide = count === undefined || (count == 0 && !showZero) - return ( - - ) -} + return ( + + ) + }) -LemonBadge.Number = LemonBadgeNumber +export const LemonBadge = Object.assign(LemonBadgeComponent, { Number: LemonBadgeNumber }) diff --git a/frontend/src/lib/lemon-ui/LemonCheckbox/LemonCheckbox.tsx b/frontend/src/lib/lemon-ui/LemonCheckbox/LemonCheckbox.tsx index 29fc0883569..9d7f082892d 100644 --- a/frontend/src/lib/lemon-ui/LemonCheckbox/LemonCheckbox.tsx +++ b/frontend/src/lib/lemon-ui/LemonCheckbox/LemonCheckbox.tsx @@ -68,7 +68,7 @@ export function LemonCheckbox({ }, [checked, indeterminate]) return ( - {disabledReason} : null} placement="topLeft"> + {disabledReason} : null} placement="top-start"> { - const width = isNaN(percent) ? 0 : Math.max(Math.min(percent, 100), 0) +export const LemonProgress: React.FunctionComponent> = + forwardRef(function LemonProgress( + { size = 'medium', percent, strokeColor = 'var(--brand-blue)', children, className }, + ref + ): JSX.Element { + const width = isNaN(percent) ? 0 : Math.max(Math.min(percent, 100), 0) - return ( -
- 0 ? (size === 'large' ? 'min-w-5' : 'min-w-1.5') : null + 'LemonProgress rounded-full w-full inline-block bg-bg-3000', + size === 'large' ? 'h-5' : 'h-1.5', + className )} - // eslint-disable-next-line react/forbid-dom-props - style={{ width: `${width}%`, backgroundColor: strokeColor }} > - {children} - -
- ) -} + 0 ? (size === 'large' ? 'min-w-5' : 'min-w-1.5') : null + )} + // eslint-disable-next-line react/forbid-dom-props + style={{ width: `${width}%`, backgroundColor: strokeColor }} + > + {children} + +
+ ) + }) diff --git a/frontend/src/lib/lemon-ui/LemonRadio/LemonRadio.tsx b/frontend/src/lib/lemon-ui/LemonRadio/LemonRadio.tsx index b737b305f4f..060f740f686 100644 --- a/frontend/src/lib/lemon-ui/LemonRadio/LemonRadio.tsx +++ b/frontend/src/lib/lemon-ui/LemonRadio/LemonRadio.tsx @@ -50,7 +50,7 @@ export function LemonRadio({ if (option.disabledReason) { return ( - + {content} ) diff --git a/frontend/src/lib/lemon-ui/LemonSnack/LemonSnack.tsx b/frontend/src/lib/lemon-ui/LemonSnack/LemonSnack.tsx index c473ca0eabf..0c601baf2a7 100644 --- a/frontend/src/lib/lemon-ui/LemonSnack/LemonSnack.tsx +++ b/frontend/src/lib/lemon-ui/LemonSnack/LemonSnack.tsx @@ -1,6 +1,7 @@ import { IconX } from '@posthog/icons' import { LemonButton } from '@posthog/lemon-ui' import clsx from 'clsx' +import { forwardRef } from 'react' export interface LemonSnackProps { type?: 'regular' | 'pill' @@ -13,51 +14,46 @@ export interface LemonSnackProps { 'data-attr'?: string } -export function LemonSnack({ - type = 'regular', - children, - wrap, - onClick, - onClose, - title, - className, -}: LemonSnackProps): JSX.Element { - const isRegular = type === 'regular' - const isClickable = !!onClick - const bgColor = isRegular ? 'primary-highlight' : 'primary-alt-highlight' - return ( - +export const LemonSnack: React.FunctionComponent> = forwardRef( + function LemonSnack({ type = 'regular', children, wrap, onClick, onClose, title, className }, ref): JSX.Element { + const isRegular = type === 'regular' + const isClickable = !!onClick + const bgColor = isRegular ? 'primary-highlight' : 'primary-alt-highlight' + return ( - {children} - - - {onClose && ( - - } - onClick={(event) => { - event.stopPropagation() - onClose() - }} - /> + + {children} - )} - - ) -} + + {onClose && ( + + } + onClick={(event) => { + event.stopPropagation() + onClose() + }} + /> + + )} + + ) + } +) diff --git a/frontend/src/lib/lemon-ui/LemonSwitch/LemonSwitch.tsx b/frontend/src/lib/lemon-ui/LemonSwitch/LemonSwitch.tsx index 2b32c71d6c7..9e906768e19 100644 --- a/frontend/src/lib/lemon-ui/LemonSwitch/LemonSwitch.tsx +++ b/frontend/src/lib/lemon-ui/LemonSwitch/LemonSwitch.tsx @@ -2,7 +2,7 @@ import './LemonSwitch.scss' import clsx from 'clsx' import { Tooltip } from 'lib/lemon-ui/Tooltip' -import { useMemo, useState } from 'react' +import { forwardRef, useMemo, useState } from 'react' export interface LemonSwitchProps { className?: string @@ -25,84 +25,90 @@ export interface LemonSwitchProps { /** Counter used for collision-less automatic switch IDs. */ let switchCounter = 0 -export function LemonSwitch({ - className, - id: rawId, - onChange, - checked, - fullWidth, - bordered, - disabled, - disabledReason, - label, - labelClassName, - tooltip, - 'data-attr': dataAttr, - 'aria-label': ariaLabel, - handleContent, -}: LemonSwitchProps): JSX.Element { - const id = useMemo(() => rawId || `lemon-switch-${switchCounter++}`, [rawId]) - const [isActive, setIsActive] = useState(false) +export const LemonSwitch: React.FunctionComponent> = forwardRef( + function LemonSwitch( + { + className, + id: rawId, + onChange, + checked, + fullWidth, + bordered, + disabled, + disabledReason, + label, + labelClassName, + tooltip, + 'data-attr': dataAttr, + 'aria-label': ariaLabel, + handleContent, + }, + ref + ): JSX.Element { + const id = useMemo(() => rawId || `lemon-switch-${switchCounter++}`, [rawId]) + const [isActive, setIsActive] = useState(false) - const conditionalProps = {} - if (ariaLabel) { - conditionalProps['aria-label'] = ariaLabel - } + const conditionalProps = {} + if (ariaLabel) { + conditionalProps['aria-label'] = ariaLabel + } - let tooltipContent: JSX.Element | null = null - if (disabledReason) { - disabled = true // Support `disabledReason` while maintaining compatibility with `disabled` - tooltipContent = {disabledReason} - } else if (tooltip) { - tooltipContent = {tooltip} - } - let buttonComponent = ( - - ) - if (tooltipContent) { - buttonComponent = ( - - {/* wrap it in a div so that the tooltip works even when disabled */} -
{buttonComponent}
- + let tooltipContent: JSX.Element | null = null + if (disabledReason) { + disabled = true // Support `disabledReason` while maintaining compatibility with `disabled` + tooltipContent = {disabledReason} + } else if (tooltip) { + tooltipContent = {tooltip} + } + let buttonComponent = ( + + ) + if (tooltipContent) { + buttonComponent = ( + + {/* wrap it in a div so that the tooltip works even when disabled */} +
{buttonComponent}
+ + ) + } + + return ( +
+ {label && ( + + )} + {buttonComponent} +
) } - - return ( -
- {label && ( - - )} - {buttonComponent} -
- ) -} +) diff --git a/frontend/src/lib/lemon-ui/LemonTable/LemonTable.tsx b/frontend/src/lib/lemon-ui/LemonTable/LemonTable.tsx index 8fb3ee58a65..08e000c9286 100644 --- a/frontend/src/lib/lemon-ui/LemonTable/LemonTable.tsx +++ b/frontend/src/lib/lemon-ui/LemonTable/LemonTable.tsx @@ -341,7 +341,6 @@ export function LemonTable>({ : null } /> - {/* this non-breaking space lets antd's tooltip work*/}{' '} )}
diff --git a/frontend/src/lib/lemon-ui/LemonTable/sorting.tsx b/frontend/src/lib/lemon-ui/LemonTable/sorting.tsx index 52609d4b25d..faf206aea96 100644 --- a/frontend/src/lib/lemon-ui/LemonTable/sorting.tsx +++ b/frontend/src/lib/lemon-ui/LemonTable/sorting.tsx @@ -1,4 +1,5 @@ import { IconArrowDown, IconArrowUp, IconSort } from 'lib/lemon-ui/icons' +import { forwardRef } from 'react' /** Sorting state. */ export interface Sorting { @@ -25,11 +26,13 @@ export function getNextSorting( } } -export function SortingIndicator({ order }: { order: Sorting['order'] | null }): JSX.Element { +export const SortingIndicator: React.FunctionComponent< + { order: Sorting['order'] | null } & React.RefAttributes +> = forwardRef(function SortingIndicator({ order }, ref): JSX.Element { return ( -
+
{order === -1 ? : order === 1 ? : null}
) -} +}) diff --git a/frontend/src/lib/lemon-ui/LemonTabs/LemonTabs.tsx b/frontend/src/lib/lemon-ui/LemonTabs/LemonTabs.tsx index d94f9732623..3c26dcec0db 100644 --- a/frontend/src/lib/lemon-ui/LemonTabs/LemonTabs.tsx +++ b/frontend/src/lib/lemon-ui/LemonTabs/LemonTabs.tsx @@ -1,7 +1,6 @@ import './LemonTabs.scss' import clsx from 'clsx' -import { AlignType } from 'rc-trigger/lib/interface' import { useSliderPositioning } from '../hooks' import { IconInfo } from '../icons' @@ -37,18 +36,6 @@ interface LemonTabsCSSProperties extends React.CSSProperties { '--lemon-tabs-slider-offset': `${number}px` } -/** Custom tooltip placement so that it's is closely aligned with the tabs, instead of being distanced. */ -const TAB_TOOLTIP_PLACEMENTS: Record = { - top: { - points: ['bc', 'tc'], // Bottom-center of tooltip aligned to top-center of target - offset: [0, 4], // This is the key change - positioning the tooltip lower to align arrow tip and top of tab - overflow: { - adjustX: 0, - adjustY: 0, - }, - }, -} - export function LemonTabs({ activeKey, onChange, @@ -85,7 +72,7 @@ export function LemonTabs({ ) return ( - +
  • onChange(tab.key) : undefined} diff --git a/frontend/src/lib/lemon-ui/LemonTag/LemonTag.tsx b/frontend/src/lib/lemon-ui/LemonTag/LemonTag.tsx index 7a171d33cd1..3172cb33a12 100644 --- a/frontend/src/lib/lemon-ui/LemonTag/LemonTag.tsx +++ b/frontend/src/lib/lemon-ui/LemonTag/LemonTag.tsx @@ -5,6 +5,7 @@ import clsx from 'clsx' import { IconEllipsis } from 'lib/lemon-ui/icons' import { LemonButton, LemonButtonWithDropdown } from 'lib/lemon-ui/LemonButton' import { LemonButtonDropdown } from 'lib/lemon-ui/LemonButton' +import { forwardRef } from 'react' export type LemonTagType = | 'primary' @@ -31,51 +32,46 @@ export interface LemonTagProps extends React.HTMLAttributes { popover?: LemonButtonDropdown } -export function LemonTag({ - type = 'default', - children, - className, - size = 'medium', - weight, - icon, - closable, - onClose, - popover, - ...props -}: LemonTagProps): JSX.Element { - return ( -
    - {icon && {icon}} - {children} - {popover?.overlay && ( - } - onClick={(e) => { - e.stopPropagation() - }} - /> - )} - {closable && ( - } - onClick={onClose} - size="xsmall" - className="LemonTag__right-button" - /> - )} -
    - ) -} +export const LemonTag: React.FunctionComponent> = forwardRef( + function LemonTag( + { type = 'default', children, className, size = 'medium', weight, icon, closable, onClose, popover, ...props }, + ref + ): JSX.Element { + return ( +
    + {icon && {icon}} + {children} + {popover?.overlay && ( + } + onClick={(e) => { + e.stopPropagation() + }} + /> + )} + {closable && ( + } + onClick={onClose} + size="xsmall" + className="LemonTag__right-button" + /> + )} +
    + ) + } +) diff --git a/frontend/src/lib/lemon-ui/LemonTextArea/LemonTextAreaMarkdown.tsx b/frontend/src/lib/lemon-ui/LemonTextArea/LemonTextAreaMarkdown.tsx index ac463f2aa3d..58b97f682f6 100644 --- a/frontend/src/lib/lemon-ui/LemonTextArea/LemonTextAreaMarkdown.tsx +++ b/frontend/src/lib/lemon-ui/LemonTextArea/LemonTextAreaMarkdown.tsx @@ -63,7 +63,9 @@ export const LemonTextAreaMarkdown = React.forwardRef - + + + Add external images using{' '} diff --git a/frontend/src/lib/lemon-ui/Popover/Popover.tsx b/frontend/src/lib/lemon-ui/Popover/Popover.tsx index 5ea7a7eadca..96ad1b3e831 100644 --- a/frontend/src/lib/lemon-ui/Popover/Popover.tsx +++ b/frontend/src/lib/lemon-ui/Popover/Popover.tsx @@ -114,8 +114,7 @@ export const Popover = React.forwardRef(function P const { x, y, - reference, - refs: { reference: referenceRef, floating: floatingRef }, + refs: { reference: referenceRef, floating: floatingRef, setReference }, strategy, placement: effectivePlacement, update, @@ -156,7 +155,7 @@ export const Popover = React.forwardRef(function P useLayoutEffect(() => { if (referenceElement) { - reference(referenceElement) + setReference(referenceElement) } }, [referenceElement]) diff --git a/frontend/src/lib/lemon-ui/ProfilePicture/ProfileBubbles.tsx b/frontend/src/lib/lemon-ui/ProfilePicture/ProfileBubbles.tsx index 0da16a220f5..ea73b995147 100644 --- a/frontend/src/lib/lemon-ui/ProfilePicture/ProfileBubbles.tsx +++ b/frontend/src/lib/lemon-ui/ProfilePicture/ProfileBubbles.tsx @@ -24,7 +24,7 @@ export function ProfileBubbles({ people, tooltip, limit = 6, ...divProps }: Prof } return ( - +
    {shownPeople.map(({ email, name, title }, index) => ( string) + children: JSX.Element delayMs?: number + offset?: number + arrowOffset?: number + placement?: Placement + className?: string + visible?: boolean } -/** Extension of Ant Design's Tooltip that enables a delay. - * - * Caveat: doesn't work with disabled elements due to lack of workaround that Ant Design uses. - * See https://github.com/ant-design/ant-design/blob/master/components/tooltip/index.tsx#L82-L130. - */ -// CAUTION: Any changes here will affect tooltips across the entire app. -export function Tooltip({ children, visible, delayMs = DEFAULT_DELAY_MS, ...props }: TooltipProps): JSX.Element { - const [localVisible, setVisible] = useState(false) - const [debouncedLocalVisible] = useDebounce(visible ?? localVisible, delayMs) +export function Tooltip({ + children, + title, + className = '', + placement = 'top', + offset = 8, + arrowOffset, + delayMs = 500, + visible: controlledOpen, +}: TooltipProps): JSX.Element { + const [uncontrolledOpen, setUncontrolledOpen] = useState(false) + const caretRef = useRef(null) - const floatingContainer = useFloatingContainerContext()?.current + const open = controlledOpen ?? uncontrolledOpen - if (!('mouseEnterDelay' in props)) { - // If not preserving default behavior and mouseEnterDelay is not already provided, we use a custom default here - props.mouseEnterDelay = delayMs - } + const { context, refs } = useFloating({ + placement, + open, + onOpenChange: setUncontrolledOpen, + whileElementsMounted: autoUpdate, + middleware: [ + offsetFunc(offset), + flip({ fallbackAxisSideDirection: 'start' }), + shift(), + arrow({ element: caretRef }), + ], + }) + + const hover = useHover(context, { + move: false, + delay: { + open: delayMs, + close: 0, + }, + }) + const focus = useFocus(context) + const dismiss = useDismiss(context) + const role = useRole(context, { role: 'tooltip' }) + + const { getFloatingProps, getReferenceProps } = useInteractions([hover, focus, dismiss, role]) + + const { styles: transitionStyles } = useTransitionStyles(context, { + duration: { + open: 150, + close: 0, + }, + initial: ({ side }) => ({ + opacity: 0, + transform: { + top: 'translateY(3px)', + bottom: 'translateY(-3px)', + left: 'translateX(3px)', + right: 'translateX(-3px)', + }[side], + }), + }) + + const childrenRef = (children as any).ref + const triggerRef = useMergeRefs([refs.setReference, childrenRef]) - // If child is not a valid element (string or string + ReactNode, Fragment), antd wraps children in a span. - // See https://github.com/ant-design/ant-design/blob/master/components/tooltip/index.tsx#L226 const child = React.isValidElement(children) ? children : {children} - const derivedVisible = typeof visible === 'undefined' ? localVisible && debouncedLocalVisible : visible + const clonedChild = React.cloneElement( + child, + getReferenceProps({ + ref: triggerRef, + ...child.props, + }) + ) - return props.title ? ( - floatingContainer : undefined} - visible={derivedVisible} - > - {React.cloneElement(child, { - onMouseEnter: () => { - child.props.onMouseEnter?.() - if (typeof visible === 'undefined') { - setVisible(true) - } - }, - onMouseLeave: () => { - child.props.onMouseLeave?.() - if (typeof visible === 'undefined') { - setVisible(false) - } - }, - })} - + return title ? ( + <> + {clonedChild} + {open && ( + +
    +
    + {typeof title === 'function' ? title() : title} + +
    +
    +     + )} + ) : ( - child + children ) } diff --git a/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/AndOrFilterSelect.tsx b/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/AndOrFilterSelect.tsx index b6583793f15..cde744f0310 100644 --- a/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/AndOrFilterSelect.tsx +++ b/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/AndOrFilterSelect.tsx @@ -51,7 +51,7 @@ export function AndOrFilterSelect({ ), }, ]} - optionTooltipPlacement={topLevelFilter ? 'bottomRight' : 'bottomLeft'} + optionTooltipPlacement={topLevelFilter ? 'bottom-end' : 'bottom-start'} dropdownMatchSelectWidth={false} /> {value === FilterLogicalOperator.Or ? suffix[0] : suffix[1]} diff --git a/frontend/src/queries/nodes/PersonsNode/PersonsSearch.tsx b/frontend/src/queries/nodes/PersonsNode/PersonsSearch.tsx index 2dc4c7adece..fb030cb8976 100644 --- a/frontend/src/queries/nodes/PersonsNode/PersonsSearch.tsx +++ b/frontend/src/queries/nodes/PersonsNode/PersonsSearch.tsx @@ -1,4 +1,4 @@ -import { IconInfo } from 'lib/lemon-ui/icons' +import { IconInfo } from '@posthog/icons' import { LemonInput } from 'lib/lemon-ui/LemonInput/LemonInput' import { Tooltip } from 'lib/lemon-ui/Tooltip' @@ -49,7 +49,7 @@ export function PersonsSearch({ query, setQuery }: PersonSearchProps): JSX.Eleme disabled={!setQuery} onChange={onChange} /> - {labels[target].description}}> +
    diff --git a/frontend/src/queries/nodes/TimeToSeeData/Trace/Trace.tsx b/frontend/src/queries/nodes/TimeToSeeData/Trace/Trace.tsx index 373976cd003..e588a1ce3a9 100644 --- a/frontend/src/queries/nodes/TimeToSeeData/Trace/Trace.tsx +++ b/frontend/src/queries/nodes/TimeToSeeData/Trace/Trace.tsx @@ -71,7 +71,9 @@ function DescribeSpan({ node }: { node: TimeToSeeNode }): JSX.Element { {(isFrustratingSession || isFrustratingInteraction) && ( - + + + )} {isInteractionNode(node) && ( diff --git a/frontend/src/scenes/ResourcePermissionModal.tsx b/frontend/src/scenes/ResourcePermissionModal.tsx index d571264aaf3..88784415341 100644 --- a/frontend/src/scenes/ResourcePermissionModal.tsx +++ b/frontend/src/scenes/ResourcePermissionModal.tsx @@ -146,7 +146,7 @@ export function ResourcePermission({ icon={} onClick={() => deleteAssociatedRole(role.id)} tooltip="Remove custom role from feature flag" - tooltipPlacement="bottomLeft" + tooltipPlacement="bottom-start" size="small" /> )} @@ -272,7 +272,7 @@ function RoleRow({ role, deleteRole }: { role: RoleType; deleteRole?: (roleId: R icon={} onClick={() => deleteRole(role.id)} tooltip="Remove role from permission" - tooltipPlacement="bottomLeft" + tooltipPlacement="bottom-start" size="small" /> )} diff --git a/frontend/src/scenes/apps/MetricsTab.tsx b/frontend/src/scenes/apps/MetricsTab.tsx index 635039f3737..3ed5f1f288d 100644 --- a/frontend/src/scenes/apps/MetricsTab.tsx +++ b/frontend/src/scenes/apps/MetricsTab.tsx @@ -1,6 +1,6 @@ +import { IconInfo } from '@posthog/icons' import { useActions, useValues } from 'kea' import { TZLabel } from 'lib/components/TZLabel' -import { IconInfo } from 'lib/lemon-ui/icons' import { LemonSelect } from 'lib/lemon-ui/LemonSelect' import { LemonSkeleton } from 'lib/lemon-ui/LemonSkeleton' import { LemonTable } from 'lib/lemon-ui/LemonTable' diff --git a/frontend/src/scenes/batch_exports/BatchExportEditForm.tsx b/frontend/src/scenes/batch_exports/BatchExportEditForm.tsx index 601dbc24751..4aa36b674b0 100644 --- a/frontend/src/scenes/batch_exports/BatchExportEditForm.tsx +++ b/frontend/src/scenes/batch_exports/BatchExportEditForm.tsx @@ -1,8 +1,8 @@ +import { IconInfo } from '@posthog/icons' import { LemonButton, LemonCheckbox, LemonDivider, LemonInput, LemonSelect } from '@posthog/lemon-ui' import { useActions, useValues } from 'kea' import { Form } from 'kea-forms' import { FEATURE_FLAGS } from 'lib/constants' -import { IconInfo } from 'lib/lemon-ui/icons' import { LemonBanner } from 'lib/lemon-ui/LemonBanner' import { LemonCalendarSelectInput } from 'lib/lemon-ui/LemonCalendar/LemonCalendarSelect' import { LemonField } from 'lib/lemon-ui/LemonField' diff --git a/frontend/src/scenes/billing/Billing.tsx b/frontend/src/scenes/billing/Billing.tsx index 0ca0d63a15c..3486d0b49a6 100644 --- a/frontend/src/scenes/billing/Billing.tsx +++ b/frontend/src/scenes/billing/Billing.tsx @@ -213,12 +213,12 @@ export function Billing(): JSX.Element { )}` : null } - placement="bottomLeft" + placement="bottom-start" > $ {parseInt(billing.discount_amount_usd).toLocaleString()} - {' '} +     remaining credits applied to your bill.

    diff --git a/frontend/src/scenes/billing/BillingLimitInput.tsx b/frontend/src/scenes/billing/BillingLimitInput.tsx index d7ce9d63984..b4024d05441 100644 --- a/frontend/src/scenes/billing/BillingLimitInput.tsx +++ b/frontend/src/scenes/billing/BillingLimitInput.tsx @@ -93,15 +93,8 @@ export const BillingLimitInput = ({ product }: { product: BillingProductV2Type } > ${customLimitUsd}
    • - - Set a billing limit to control your recurring costs. Some features may stop - working if your usage exceeds your billing cap. - - } - > - {billing?.billing_period?.interval}ly billing limit + + {billing?.billing_period?.interval}ly billing limit ) : ( diff --git a/frontend/src/scenes/billing/BillingProduct.tsx b/frontend/src/scenes/billing/BillingProduct.tsx index aa6a7e1fb3e..58c6fc9651c 100644 --- a/frontend/src/scenes/billing/BillingProduct.tsx +++ b/frontend/src/scenes/billing/BillingProduct.tsx @@ -472,24 +472,25 @@ export const BillingProduct = ({ product }: { product: BillingProductV2Type }): }amount you have been billed for this ${ billing?.billing_period?.interval } so far.`} - className="flex flex-col items-center" > -
    - $ - {( - parseFloat(product.current_amount_usd || '') * - (1 - - (billing?.discount_percent - ? billing.discount_percent / 100 - : 0)) - ).toFixed(2) || '0.00'} +
    +
    + $ + {( + parseFloat(product.current_amount_usd || '') * + (1 - + (billing?.discount_percent + ? billing.discount_percent / 100 + : 0)) + ).toFixed(2) || '0.00'} +
    + + {capitalizeFirstLetter( + billing?.billing_period?.interval || '' + )} + -to-date +
    - - {capitalizeFirstLetter( - billing?.billing_period?.interval || '' - )} - -to-date - {product.tiers && ( -
    - $ - {( - parseFloat(product.projected_amount_usd || '') * - (1 - - (billing?.discount_percent - ? billing.discount_percent / 100 - : 0)) - ).toFixed(2) || '0.00'} +
    +
    + $ + {( + parseFloat(product.projected_amount_usd || '') * + (1 - + (billing?.discount_percent + ? billing.discount_percent / 100 + : 0)) + ).toFixed(2) || '0.00'} +
    + Projected
    - Projected )}
    @@ -520,14 +522,15 @@ export const BillingProduct = ({ product }: { product: BillingProductV2Type }):
    -
    - ${product.current_amount_usd} +
    +
    + ${product.current_amount_usd} +
    + + per {billing?.billing_period?.interval || 'period'} +
    - - per {billing?.billing_period?.interval || 'period'} -
    )} diff --git a/frontend/src/scenes/billing/PlanComparison.tsx b/frontend/src/scenes/billing/PlanComparison.tsx index de3a2d94926..b1bbe489287 100644 --- a/frontend/src/scenes/billing/PlanComparison.tsx +++ b/frontend/src/scenes/billing/PlanComparison.tsx @@ -235,7 +235,9 @@ export const PlanComparison = ({ i == fullyFeaturedPlan?.features?.length - 1 && 'PlanTable__th__last-feature' )} > - {feature.name} + + {feature.name} + {plans?.map((plan) => ( @@ -255,7 +257,7 @@ export const PlanComparison = ({

    - Included platform features: + Included platform features:

    @@ -298,7 +300,9 @@ export const PlanComparison = ({ : '' )} > - {feature.name} + + {feature.name} + {includedProduct.plans?.map((plan) => ( diff --git a/frontend/src/scenes/dashboard/DashboardReloadAction.tsx b/frontend/src/scenes/dashboard/DashboardReloadAction.tsx index 86ce333aa1c..a7f15b2918c 100644 --- a/frontend/src/scenes/dashboard/DashboardReloadAction.tsx +++ b/frontend/src/scenes/dashboard/DashboardReloadAction.tsx @@ -65,16 +65,14 @@ export function DashboardReloadAction(): JSX.Element { > -
    - setAutoRefresh(checked, autoRefresh.interval)} - label="Auto refresh" - checked={autoRefresh.enabled} - fullWidth={true} - /> -
    + setAutoRefresh(checked, autoRefresh.interval)} + label="Auto refresh" + checked={autoRefresh.enabled} + fullWidth={true} + />
    diff --git a/frontend/src/scenes/dashboard/dashboards/DashboardsTable.tsx b/frontend/src/scenes/dashboard/dashboards/DashboardsTable.tsx index ca27d481282..7abbd1a842a 100644 --- a/frontend/src/scenes/dashboard/dashboards/DashboardsTable.tsx +++ b/frontend/src/scenes/dashboard/dashboards/DashboardsTable.tsx @@ -101,7 +101,9 @@ export function DashboardsTable({ )} {isPrimary && ( - + + + )}
    diff --git a/frontend/src/scenes/data-management/DataManagementScene.tsx b/frontend/src/scenes/data-management/DataManagementScene.tsx index e90336c9e88..6a7e22df477 100644 --- a/frontend/src/scenes/data-management/DataManagementScene.tsx +++ b/frontend/src/scenes/data-management/DataManagementScene.tsx @@ -1,10 +1,10 @@ +import { IconInfo } from '@posthog/icons' import { actions, connect, kea, path, reducers, selectors, useActions, useValues } from 'kea' import { actionToUrl, combineUrl, router, urlToAction } from 'kea-router' import { ActivityLog } from 'lib/components/ActivityLog/ActivityLog' import { PageHeader } from 'lib/components/PageHeader' import { TitleWithIcon } from 'lib/components/TitleWithIcon' import { FEATURE_FLAGS } from 'lib/constants' -import { IconInfo } from 'lib/lemon-ui/icons' import { LemonTab, LemonTabs } from 'lib/lemon-ui/LemonTabs' import { LemonTag } from 'lib/lemon-ui/LemonTag/LemonTag' import { Tooltip } from 'lib/lemon-ui/Tooltip' diff --git a/frontend/src/scenes/data-warehouse/ViewLinkModal.tsx b/frontend/src/scenes/data-warehouse/ViewLinkModal.tsx index 4aa398cd24f..a75f1f14cc5 100644 --- a/frontend/src/scenes/data-warehouse/ViewLinkModal.tsx +++ b/frontend/src/scenes/data-warehouse/ViewLinkModal.tsx @@ -120,7 +120,7 @@ export function ViewLinkDeleteButton({ table, column }: ViewLinkDeleteButtonProp icon={} onClick={() => deleteViewLink(table, column)} tooltip="Remove view association" - tooltipPlacement="bottomLeft" + tooltipPlacement="bottom-start" size="small" /> ) diff --git a/frontend/src/scenes/experiments/Experiment.tsx b/frontend/src/scenes/experiments/Experiment.tsx index c28b4b16b55..72f0c7a16d1 100644 --- a/frontend/src/scenes/experiments/Experiment.tsx +++ b/frontend/src/scenes/experiments/Experiment.tsx @@ -286,7 +286,7 @@ export function Experiment(): JSX.Element { !(index === 0 || index === 1) && ( )}
    @@ -1030,7 +1030,7 @@ function FeatureFlagRollout({ readOnly }: { readOnly?: boolean }): JSX.Element { ? 'Cannot add variants to a feature flag that is part of an experiment. To update variants, create a new experiment.' : undefined } - tooltipPlacement="topLeft" + tooltipPlacement="top-start" center > Add variant diff --git a/frontend/src/scenes/feature-flags/FeatureFlagSchedule.tsx b/frontend/src/scenes/feature-flags/FeatureFlagSchedule.tsx index 435daa59b2d..c89c87b6831 100644 --- a/frontend/src/scenes/feature-flags/FeatureFlagSchedule.tsx +++ b/frontend/src/scenes/feature-flags/FeatureFlagSchedule.tsx @@ -119,7 +119,7 @@ export default function FeatureFlagSchedule(): JSX.Element { > {text} - {' '} +     ) }, diff --git a/frontend/src/scenes/funnels/FunnelBarHorizontal/DuplicateStepIndicator.tsx b/frontend/src/scenes/funnels/FunnelBarHorizontal/DuplicateStepIndicator.tsx index 7b659c57749..c534f62704a 100644 --- a/frontend/src/scenes/funnels/FunnelBarHorizontal/DuplicateStepIndicator.tsx +++ b/frontend/src/scenes/funnels/FunnelBarHorizontal/DuplicateStepIndicator.tsx @@ -1,4 +1,4 @@ -import { IconInfo } from 'lib/lemon-ui/icons' +import { IconInfo } from '@posthog/icons' import { Tooltip } from 'lib/lemon-ui/Tooltip' export function DuplicateStepIndicator(): JSX.Element { diff --git a/frontend/src/scenes/funnels/FunnelCanvasLabel.tsx b/frontend/src/scenes/funnels/FunnelCanvasLabel.tsx index fb8ba57bccb..76dda95b0c3 100644 --- a/frontend/src/scenes/funnels/FunnelCanvasLabel.tsx +++ b/frontend/src/scenes/funnels/FunnelCanvasLabel.tsx @@ -1,6 +1,6 @@ +import { IconInfo } from '@posthog/icons' import { Link } from '@posthog/lemon-ui' import { useActions, useValues } from 'kea' -import { IconInfo } from 'lib/lemon-ui/icons' import { Tooltip } from 'lib/lemon-ui/Tooltip' import { humanFriendlyDuration, percentage } from 'lib/utils' import React from 'react' diff --git a/frontend/src/scenes/insights/InsightNav/InsightsNav.tsx b/frontend/src/scenes/insights/InsightNav/InsightsNav.tsx index b78b2ad1f97..25aaf46c621 100644 --- a/frontend/src/scenes/insights/InsightNav/InsightsNav.tsx +++ b/frontend/src/scenes/insights/InsightNav/InsightsNav.tsx @@ -31,7 +31,7 @@ export function InsightsNav(): JSX.Element { label: ( - {label} + {label} ), diff --git a/frontend/src/scenes/insights/RetentionDatePicker.tsx b/frontend/src/scenes/insights/RetentionDatePicker.tsx index 19ff93bfa90..2cb951b6da0 100644 --- a/frontend/src/scenes/insights/RetentionDatePicker.tsx +++ b/frontend/src/scenes/insights/RetentionDatePicker.tsx @@ -17,8 +17,7 @@ export function RetentionDatePicker(): JSX.Element { return ( - {/* eslint-disable-next-line react/forbid-dom-props */} - + -
    - + +
    {falseNegative ? percentage(falseNegative / (falseNegative + trueNegative)) : '0.00%'} - -
    +
    +     {falseNegative === 0 ? ( '0 users' ) : ( @@ -157,27 +157,27 @@ export function CorrelationMatrix(): JSX.Element { No -
    - + +
    {falsePositive ? percentage(falsePositive / (truePositive + falsePositive)) : '0.00%'} - -
    +
    + {pluralize(falsePositive, 'user', undefined, true)} -
    - + +
    {trueNegative ? percentage(trueNegative / (falseNegative + trueNegative)) : '0.00%'} - -
    +
    + {pluralize(trueNegative, 'user', undefined, true)} diff --git a/frontend/src/scenes/insights/views/Funnels/FunnelStepsPicker.tsx b/frontend/src/scenes/insights/views/Funnels/FunnelStepsPicker.tsx index a91a2fb43ee..457541eb6f4 100644 --- a/frontend/src/scenes/insights/views/Funnels/FunnelStepsPicker.tsx +++ b/frontend/src/scenes/insights/views/Funnels/FunnelStepsPicker.tsx @@ -48,7 +48,7 @@ export function FunnelStepsPicker(): JSX.Element | null { size="small" className="mx-1" dropdownMatchSelectWidth={false} - optionTooltipPlacement="bottomLeft" + optionTooltipPlacement="bottom-start" disabled={!isFunnelWithEnoughSteps} options={optionsForRange(fromRange)} value={funnelsFilter?.funnelFromStep || 0} @@ -61,7 +61,7 @@ export function FunnelStepsPicker(): JSX.Element | null { size="small" className="mx-1" dropdownMatchSelectWidth={false} - optionTooltipPlacement="bottomLeft" + optionTooltipPlacement="bottom-start" disabled={!isFunnelWithEnoughSteps} options={optionsForRange(toRange)} value={funnelsFilter?.funnelToStep || Math.max(numberOfSeries - 1, 1)} diff --git a/frontend/src/scenes/instance/SystemStatus/index.tsx b/frontend/src/scenes/instance/SystemStatus/index.tsx index 0df19f8e9c2..a9bba3c522d 100644 --- a/frontend/src/scenes/instance/SystemStatus/index.tsx +++ b/frontend/src/scenes/instance/SystemStatus/index.tsx @@ -1,10 +1,10 @@ import './index.scss' +import { IconInfo } from '@posthog/icons' import { LemonBanner, Link } from '@posthog/lemon-ui' import { useActions, useValues } from 'kea' import { PageHeader } from 'lib/components/PageHeader' import { FEATURE_FLAGS } from 'lib/constants' -import { IconInfo } from 'lib/lemon-ui/icons' import { LemonTab, LemonTabs } from 'lib/lemon-ui/LemonTabs' import { LemonTag } from 'lib/lemon-ui/LemonTag/LemonTag' import { Tooltip } from 'lib/lemon-ui/Tooltip' @@ -36,8 +36,10 @@ export function SystemStatus(): JSX.Element { { key: 'overview', label: ( - System overview is cached for 60 seconds}> - System overview + + + System overview + ), content: , diff --git a/frontend/src/scenes/notebooks/Nodes/NotebookNodePersonFeed/EventIcon.tsx b/frontend/src/scenes/notebooks/Nodes/NotebookNodePersonFeed/EventIcon.tsx index 4753bc0703a..5e924de36ef 100644 --- a/frontend/src/scenes/notebooks/Nodes/NotebookNodePersonFeed/EventIcon.tsx +++ b/frontend/src/scenes/notebooks/Nodes/NotebookNodePersonFeed/EventIcon.tsx @@ -26,7 +26,9 @@ export const EventIcon = ({ event }: EventIconProps): JSX.Element => { } return ( - + + + ) } diff --git a/frontend/src/scenes/persons/PersonScene.tsx b/frontend/src/scenes/persons/PersonScene.tsx index fd8c68079e6..52449de8dc9 100644 --- a/frontend/src/scenes/persons/PersonScene.tsx +++ b/frontend/src/scenes/persons/PersonScene.tsx @@ -2,6 +2,7 @@ import './PersonScene.scss' // eslint-disable-next-line no-restricted-imports import { DownOutlined } from '@ant-design/icons' +import { IconInfo } from '@posthog/icons' import { LemonButton, LemonDivider, LemonSelect, LemonTag, Link } from '@posthog/lemon-ui' import { Dropdown, Menu } from 'antd' import { useActions, useValues } from 'kea' @@ -12,7 +13,6 @@ import { PageHeader } from 'lib/components/PageHeader' import { PropertiesTable } from 'lib/components/PropertiesTable' import { TZLabel } from 'lib/components/TZLabel' import { groupsAccessLogic } from 'lib/introductions/groupsAccessLogic' -import { IconInfo } from 'lib/lemon-ui/icons' import { LemonBanner } from 'lib/lemon-ui/LemonBanner' import { LemonTabs } from 'lib/lemon-ui/LemonTabs' import { SpinnerOverlay } from 'lib/lemon-ui/Spinner/Spinner' diff --git a/frontend/src/scenes/persons/PersonsSearch.tsx b/frontend/src/scenes/persons/PersonsSearch.tsx index a222715637b..f532154a9bb 100644 --- a/frontend/src/scenes/persons/PersonsSearch.tsx +++ b/frontend/src/scenes/persons/PersonsSearch.tsx @@ -1,6 +1,6 @@ +import { IconInfo } from '@posthog/icons' import { LemonInput } from '@posthog/lemon-ui' import { useActions, useValues } from 'kea' -import { IconInfo } from 'lib/lemon-ui/icons' import { Tooltip } from 'lib/lemon-ui/Tooltip' import { useEffect, useState } from 'react' import { useDebouncedCallback } from 'use-debounce' diff --git a/frontend/src/scenes/pipeline/PipelineNodeConfiguration.tsx b/frontend/src/scenes/pipeline/PipelineNodeConfiguration.tsx index dcf86635d5c..af05827374f 100644 --- a/frontend/src/scenes/pipeline/PipelineNodeConfiguration.tsx +++ b/frontend/src/scenes/pipeline/PipelineNodeConfiguration.tsx @@ -85,7 +85,7 @@ function PluginConfigurationFields({ <> {fieldConfig.secret && ( diff --git a/frontend/src/scenes/pipeline/PipelineNodeMetrics.tsx b/frontend/src/scenes/pipeline/PipelineNodeMetrics.tsx index 509182b646e..fe5b322ba20 100644 --- a/frontend/src/scenes/pipeline/PipelineNodeMetrics.tsx +++ b/frontend/src/scenes/pipeline/PipelineNodeMetrics.tsx @@ -1,10 +1,9 @@ -import { IconCollapse, IconExpand } from '@posthog/icons' +import { IconCollapse, IconExpand, IconInfo } from '@posthog/icons' import { useActions, useValues } from 'kea' import { Chart, ChartDataset, ChartItem } from 'lib/Chart' import { getColorVar } from 'lib/colors' import { CodeSnippet, Language } from 'lib/components/CodeSnippet' import { TZLabel } from 'lib/components/TZLabel' -import { IconInfo } from 'lib/lemon-ui/icons' import { IconChevronLeft, IconChevronRight } from 'lib/lemon-ui/icons' import { LemonButton } from 'lib/lemon-ui/LemonButton' import { LemonLabel } from 'lib/lemon-ui/LemonLabel/LemonLabel' diff --git a/frontend/src/scenes/pipeline/utils.tsx b/frontend/src/scenes/pipeline/utils.tsx index 8c6e4ce9ff5..3f2f2f5ec75 100644 --- a/frontend/src/scenes/pipeline/utils.tsx +++ b/frontend/src/scenes/pipeline/utils.tsx @@ -140,7 +140,9 @@ export function RenderApp({ plugin, imageSize }: RenderAppProps): JSX.Element { ) : ( - // TODO: tooltip doesn't work on this + + + )}
    diff --git a/frontend/src/scenes/plugins/edit/PluginDrawer.tsx b/frontend/src/scenes/plugins/edit/PluginDrawer.tsx index 40bbdff4e08..2543867ce3c 100644 --- a/frontend/src/scenes/plugins/edit/PluginDrawer.tsx +++ b/frontend/src/scenes/plugins/edit/PluginDrawer.tsx @@ -46,7 +46,7 @@ function EnabledDisabledSwitch({ const SecretFieldIcon = (): JSX.Element => ( <> diff --git a/frontend/src/scenes/plugins/edit/interface-jobs/PluginJobConfiguration.tsx b/frontend/src/scenes/plugins/edit/interface-jobs/PluginJobConfiguration.tsx index 70021a5fe54..d36e6d5d607 100644 --- a/frontend/src/scenes/plugins/edit/interface-jobs/PluginJobConfiguration.tsx +++ b/frontend/src/scenes/plugins/edit/interface-jobs/PluginJobConfiguration.tsx @@ -40,15 +40,17 @@ export function PluginJobConfiguration(props: InterfaceJobsProps): JSX.Element { <> playButtonOnClick(jobHasEmptyPayload)}> - {jobHasEmptyPayload ? ( - - ) : ( - - )} + + {jobHasEmptyPayload ? ( + + ) : ( + + )} + diff --git a/frontend/src/scenes/plugins/tabs/apps/AppView.tsx b/frontend/src/scenes/plugins/tabs/apps/AppView.tsx index 1924802dd03..1470e1bc7bc 100644 --- a/frontend/src/scenes/plugins/tabs/apps/AppView.tsx +++ b/frontend/src/scenes/plugins/tabs/apps/AppView.tsx @@ -69,7 +69,6 @@ export function AppView({ -   {orderedIndex ? ( <> Apps that react to incoming events run in order. This app runs in position{' '} diff --git a/frontend/src/scenes/products/Products.tsx b/frontend/src/scenes/products/Products.tsx index e3ee328ee74..86c52236edd 100644 --- a/frontend/src/scenes/products/Products.tsx +++ b/frontend/src/scenes/products/Products.tsx @@ -81,7 +81,7 @@ function OnboardingNotCompletedButton({ } export function getProductIcon(iconKey?: string | null, className?: string): JSX.Element { - return Icons[iconKey || 'IconLogomark']({ className }) + return Icons[iconKey || 'IconLogomark'].render({ className }) } export function ProductCard({ diff --git a/frontend/src/scenes/saved-insights/SavedInsights.tsx b/frontend/src/scenes/saved-insights/SavedInsights.tsx index 7bfe78d2e6f..e5fb51ceb8a 100644 --- a/frontend/src/scenes/saved-insights/SavedInsights.tsx +++ b/frontend/src/scenes/saved-insights/SavedInsights.tsx @@ -68,7 +68,7 @@ interface NewInsightButtonProps { export interface InsightTypeMetadata { name: string description?: string - icon: (props?: any) => JSX.Element + icon: (props?: any) => JSX.Element | null inMenu: boolean } diff --git a/frontend/src/scenes/session-recordings/player/PlayerMeta.tsx b/frontend/src/scenes/session-recordings/player/PlayerMeta.tsx index 430ba735214..ac22da5dca8 100644 --- a/frontend/src/scenes/session-recordings/player/PlayerMeta.tsx +++ b/frontend/src/scenes/session-recordings/player/PlayerMeta.tsx @@ -227,7 +227,9 @@ export function PlayerMeta(): JSX.Element { } > - + + + diff --git a/frontend/src/scenes/session-recordings/player/controller/PlayerControllerTime.tsx b/frontend/src/scenes/session-recordings/player/controller/PlayerControllerTime.tsx index 400f5a41122..f127d172a79 100644 --- a/frontend/src/scenes/session-recordings/player/controller/PlayerControllerTime.tsx +++ b/frontend/src/scenes/session-recordings/player/controller/PlayerControllerTime.tsx @@ -44,8 +44,7 @@ export function SeekSkip({ direction }: { direction: 'forward' | 'backward' }): return ( {!altKeyHeld ? ( <> diff --git a/frontend/src/scenes/session-recordings/player/inspector/PlayerInspectorControls.tsx b/frontend/src/scenes/session-recordings/player/inspector/PlayerInspectorControls.tsx index f481e6e550e..37235388ad6 100644 --- a/frontend/src/scenes/session-recordings/player/inspector/PlayerInspectorControls.tsx +++ b/frontend/src/scenes/session-recordings/player/inspector/PlayerInspectorControls.tsx @@ -1,16 +1,8 @@ -import { IconTerminal, IconX } from '@posthog/icons' +import { IconInfo, IconPause, IconTerminal, IconX } from '@posthog/icons' import { LemonButton, LemonCheckbox, LemonInput, LemonSelect, Tooltip } from '@posthog/lemon-ui' import { useActions, useValues } from 'kea' import { FEATURE_FLAGS } from 'lib/constants' -import { - IconBugShield, - IconGauge, - IconInfo, - IconPause, - IconPlayCircle, - IconSchedule, - IconUnverifiedEvent, -} from 'lib/lemon-ui/icons' +import { IconBugShield, IconGauge, IconPlayCircle, IconSchedule, IconUnverifiedEvent } from 'lib/lemon-ui/icons' import { Spinner } from 'lib/lemon-ui/Spinner/Spinner' import { featureFlagLogic } from 'lib/logic/featureFlagLogic' import { capitalizeFirstLetter } from 'lib/utils' diff --git a/frontend/src/scenes/session-recordings/player/inspector/components/PlayerInspectorListItem.tsx b/frontend/src/scenes/session-recordings/player/inspector/components/PlayerInspectorListItem.tsx index df97c2d7542..a53bbf65c98 100644 --- a/frontend/src/scenes/session-recordings/player/inspector/components/PlayerInspectorListItem.tsx +++ b/frontend/src/scenes/session-recordings/player/inspector/components/PlayerInspectorListItem.tsx @@ -204,7 +204,7 @@ export function PlayerInspectorListItem({ title="This event occured before the recording started, likely as the page was loading." placement="left" > - {colonDelimitedDuration(item.timeInRecording / 1000, fixedUnits)} + {colonDelimitedDuration(item.timeInRecording / 1000, fixedUnits)} ) : ( colonDelimitedDuration(item.timeInRecording / 1000, fixedUnits) diff --git a/frontend/src/scenes/session-recordings/player/inspector/components/Timing/NetworkRequestTiming.tsx b/frontend/src/scenes/session-recordings/player/inspector/components/Timing/NetworkRequestTiming.tsx index 3059668772a..abb7d73df59 100644 --- a/frontend/src/scenes/session-recordings/player/inspector/components/Timing/NetworkRequestTiming.tsx +++ b/frontend/src/scenes/session-recordings/player/inspector/components/Timing/NetworkRequestTiming.tsx @@ -305,7 +305,9 @@ const TimingBar = ({ <>
    - {label} + + {label} +
    This recording is {description} to this list.}> + This recording is {description} to this list.}> ) diff --git a/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylistSettings.tsx b/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylistSettings.tsx index cc36e8ecfd3..ca423acde35 100644 --- a/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylistSettings.tsx +++ b/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylistSettings.tsx @@ -24,25 +24,23 @@ export function SessionRecordingsPlaylistSettings(): JSX.Element { } placement="bottom" > - - - {autoplayDirection ? : } - - } - /> - + + {autoplayDirection ? : } + + } + />
    diff --git a/frontend/src/scenes/settings/organization/Permissions/PermissionsGrid.tsx b/frontend/src/scenes/settings/organization/Permissions/PermissionsGrid.tsx index 2de74bbc9b7..5b0101c6baf 100644 --- a/frontend/src/scenes/settings/organization/Permissions/PermissionsGrid.tsx +++ b/frontend/src/scenes/settings/organization/Permissions/PermissionsGrid.tsx @@ -1,10 +1,10 @@ +import { IconInfo } from '@posthog/icons' import { LemonButton, LemonCheckbox, LemonTable } from '@posthog/lemon-ui' import { useActions, useValues } from 'kea' import { PayGateMini } from 'lib/components/PayGateMini/PayGateMini' import { useRestrictedArea } from 'lib/components/RestrictedArea' import { TitleWithIcon } from 'lib/components/TitleWithIcon' import { OrganizationMembershipLevel } from 'lib/constants' -import { IconInfo } from 'lib/lemon-ui/icons' import { LemonTableColumns } from 'lib/lemon-ui/LemonTable' import { Tooltip } from 'lib/lemon-ui/Tooltip' import { organizationLogic } from 'scenes/organizationLogic' diff --git a/frontend/src/scenes/settings/organization/VerifiedDomains/VerifiedDomains.tsx b/frontend/src/scenes/settings/organization/VerifiedDomains/VerifiedDomains.tsx index 3cbb8e470d1..d4fecc02f31 100644 --- a/frontend/src/scenes/settings/organization/VerifiedDomains/VerifiedDomains.tsx +++ b/frontend/src/scenes/settings/organization/VerifiedDomains/VerifiedDomains.tsx @@ -73,12 +73,12 @@ function VerifiedDomainsTable(): JSX.Element { { key: 'is_verified', title: ( - <> - Verification +
    + Verification - + - +
    ), render: function Verified(_, { is_verified, verified_at }) { return is_verified ? ( @@ -101,8 +101,8 @@ function VerifiedDomainsTable(): JSX.Element { { key: 'jit_provisioning_enabled', title: ( - <> - Automatic provisioning{' '} +
    + Automatic provisioning - +
    ), render: function AutomaticProvisioning(_, { jit_provisioning_enabled, id, is_verified }) { return is_verified ? ( @@ -132,12 +132,12 @@ function VerifiedDomainsTable(): JSX.Element { { key: 'sso_enforcement', title: ( - <> - Enforce SSO{' '} +
    + Enforce SSO - +
    ), render: function SSOEnforcement(_, { sso_enforcement, is_verified, id, has_saml }, index) { if (!isSSOEnforcementAvailable) { diff --git a/frontend/src/scenes/settings/project/ProjectAccessControl.tsx b/frontend/src/scenes/settings/project/ProjectAccessControl.tsx index 109497d9a2a..f938ca1e7bd 100644 --- a/frontend/src/scenes/settings/project/ProjectAccessControl.tsx +++ b/frontend/src/scenes/settings/project/ProjectAccessControl.tsx @@ -1,10 +1,9 @@ -// eslint-disable-next-line no-restricted-imports -import { CloseCircleOutlined, CrownFilled, LogoutOutlined } from '@ant-design/icons' -import { IconLock, IconUnlock } from '@posthog/icons' -import { LemonButton, LemonSelect, LemonSelectOption, LemonSwitch, LemonTable } from '@posthog/lemon-ui' +import { IconCrown, IconLock, IconUnlock } from '@posthog/icons' +import { LemonButton, LemonSelect, LemonSelectOption, LemonSnack, LemonSwitch, LemonTable } from '@posthog/lemon-ui' import { useActions, useValues } from 'kea' import { RestrictedArea, RestrictionScope, useRestrictedArea } from 'lib/components/RestrictedArea' import { OrganizationMembershipLevel, TeamMembershipLevel } from 'lib/constants' +import { IconCancel, IconLogout } from 'lib/lemon-ui/icons' import { LemonDialog } from 'lib/lemon-ui/LemonDialog' import { LemonTableColumns } from 'lib/lemon-ui/LemonTable' import { ProfilePicture } from 'lib/lemon-ui/ProfilePicture' @@ -51,11 +50,13 @@ function LevelComponent(member: FusedTeamMemberType): JSX.Element | null { ? `This user is a member of the project implicitly due to being an organization ${levelName}.` : getReasonForAccessLevelChangeProhibition(myMembershipLevel, user, member, allowedLevels) - const levelButton = disallowedReason ? ( -
    - {member.level === OrganizationMembershipLevel.Owner && } - {levelName} -
    + return disallowedReason ? ( + + + {member.level === OrganizationMembershipLevel.Owner && } + {levelName} + + ) : ( ) - - return disallowedReason ? {levelButton} : levelButton } function ActionsComponent(member: FusedTeamMemberType): JSX.Element | null { @@ -117,13 +116,16 @@ function ActionsComponent(member: FusedTeamMemberType): JSX.Element | null { // Only members without implicit access can leave or be removed member.organization_level < MINIMUM_IMPLICIT_ACCESS_LEVEL + const isSelf = member.user.uuid === user.uuid + return allowDeletion ? ( - - {member.user.uuid !== user.uuid ? ( - - ) : ( - - )} + + {isSelf ? : } ) : null } diff --git a/frontend/src/scenes/surveys/SurveyEdit.tsx b/frontend/src/scenes/surveys/SurveyEdit.tsx index 9a74b765ce0..7da14d222bb 100644 --- a/frontend/src/scenes/surveys/SurveyEdit.tsx +++ b/frontend/src/scenes/surveys/SurveyEdit.tsx @@ -222,7 +222,7 @@ export default function SurveyEdit(): JSX.Element { displayThankYouMessage: false, }) }} - tooltipPlacement="topRight" + tooltipPlacement="top-end" />
    ), diff --git a/frontend/src/scenes/surveys/SurveyEditQuestionRow.tsx b/frontend/src/scenes/surveys/SurveyEditQuestionRow.tsx index a00a479cda7..79deb2bc13c 100644 --- a/frontend/src/scenes/surveys/SurveyEditQuestionRow.tsx +++ b/frontend/src/scenes/surveys/SurveyEditQuestionRow.tsx @@ -76,7 +76,7 @@ export function SurveyEditQuestionHeader({ survey.questions.filter((_, i) => i !== index) ) }} - tooltipPlacement="topRight" + tooltipPlacement="top-end" /> )}
    diff --git a/frontend/src/styles/vars.scss b/frontend/src/styles/vars.scss index b6994159c8e..04f96c61978 100644 --- a/frontend/src/styles/vars.scss +++ b/frontend/src/styles/vars.scss @@ -142,6 +142,7 @@ $colors: ( 'glass-bg-3000': var(--glass-bg-3000), 'glass-border-3000': var(--border-3000), 'link-3000': var(--link-3000), + 'tooltip-bg': var(--tooltip-bg), 'primary-3000-frame-bg': var(--primary-3000-frame-bg), 'primary-3000-button-bg': var(--primary-3000-button-bg), 'primary-3000-button-border': var(--primary-3000-button-border), @@ -248,6 +249,7 @@ $_lifecycle_dormant: $_danger; --z-command-palette: 1875; --z-force-modal-above-popovers: 1850; --z-ant-message: 1070; + --z-tooltip: 1070; --z-ant-select-dropdown: 1065; --z-definition-popover: 1064; --z-popover: 1063; diff --git a/frontend/src/toolbar/stats/HeatmapToolbarMenu.tsx b/frontend/src/toolbar/stats/HeatmapToolbarMenu.tsx index 2e552d95914..e0af4c02d18 100644 --- a/frontend/src/toolbar/stats/HeatmapToolbarMenu.tsx +++ b/frontend/src/toolbar/stats/HeatmapToolbarMenu.tsx @@ -62,15 +62,13 @@ export const HeatmapToolbarMenu = (): JSX.Element => {
    -
    - setMatchLinksByHref(checked)} - fullWidth={true} - bordered={true} - /> -
    + setMatchLinksByHref(checked)} + fullWidth={true} + bordered={true} + />
    diff --git a/package.json b/package.json index fb9ab4b127f..93dc91dadba 100644 --- a/package.json +++ b/package.json @@ -70,12 +70,12 @@ "@dnd-kit/modifiers": "^6.0.1", "@dnd-kit/sortable": "^7.0.2", "@dnd-kit/utilities": "^3.2.1", - "@floating-ui/react": "^0.16.0", + "@floating-ui/react": "^0.26.9", "@lottiefiles/react-lottie-player": "^3.4.7", "@medv/finder": "^3.1.0", "@microlink/react-json-view": "^1.21.3", "@monaco-editor/react": "4.4.6", - "@posthog/icons": "0.5.1", + "@posthog/icons": "0.6.3", "@posthog/plugin-scaffold": "^1.4.4", "@react-hook/size": "^2.1.2", "@rrweb/types": "2.0.0-alpha.11", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9a7ff15822d..abe23727078 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -29,8 +29,8 @@ dependencies: specifier: ^3.2.1 version: 3.2.1(react@18.2.0) '@floating-ui/react': - specifier: ^0.16.0 - version: 0.16.0(@types/react@17.0.52)(react-dom@18.2.0)(react@18.2.0) + specifier: ^0.26.9 + version: 0.26.9(react-dom@18.2.0)(react@18.2.0) '@lottiefiles/react-lottie-player': specifier: ^3.4.7 version: 3.4.7(react@18.2.0) @@ -44,8 +44,8 @@ dependencies: specifier: 4.4.6 version: 4.4.6(monaco-editor@0.39.0)(react-dom@18.2.0)(react@18.2.0) '@posthog/icons': - specifier: 0.5.1 - version: 0.5.1(react-dom@18.2.0)(react@18.2.0) + specifier: 0.6.3 + version: 0.6.3(react-dom@18.2.0)(react@18.2.0) '@posthog/plugin-scaffold': specifier: ^1.4.4 version: 1.4.4 @@ -4396,22 +4396,26 @@ packages: resolution: {integrity: sha512-jk3WqquEJRlcyu7997NtR5PibI+y5bi+LS3hPmguVClypenMsCY3CBa3LAQnozRCtCrYWSEtAdiskpamuJRFOQ==} dependencies: '@floating-ui/utils': 0.1.1 + dev: true + + /@floating-ui/core@1.6.0: + resolution: {integrity: sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==} + dependencies: + '@floating-ui/utils': 0.2.1 + dev: false /@floating-ui/dom@1.5.1: resolution: {integrity: sha512-KwvVcPSXg6mQygvA1TjbN/gh///36kKtllIF8SUm0qpFj8+rvYrpvlYdL1JoA71SHpDqgSSdGOSoQ0Mp3uY5aw==} dependencies: '@floating-ui/core': 1.4.1 '@floating-ui/utils': 0.1.1 + dev: true - /@floating-ui/react-dom@1.3.0(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-htwHm67Ji5E/pROEAr7f8IKFShuiCKHwUC/UY4vC3I5jiSvGFAYnSYiZO5MlGmads+QqvUkR9ANHEguGrDv72g==} - peerDependencies: - react: '>=16.8.0' - react-dom: '>=16.8.0' + /@floating-ui/dom@1.6.1: + resolution: {integrity: sha512-iA8qE43/H5iGozC3W0YSnVSW42Vh522yyM1gj+BqRwVsTNOyr231PsXDaV04yT39PsO0QL2QpbI/M0ZaLUQgRQ==} dependencies: - '@floating-ui/dom': 1.5.1 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) + '@floating-ui/core': 1.6.0 + '@floating-ui/utils': 0.2.1 dev: false /@floating-ui/react-dom@2.0.1(react-dom@18.2.0)(react@18.2.0): @@ -4425,23 +4429,37 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: true - /@floating-ui/react@0.16.0(@types/react@17.0.52)(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-h+69TJSAY2R/k5rw+az56RzzDFc/Tg7EHn/qEgwkIVz56Zg9LlaRMMUvxkcvd+iN3CNFDLtEnDlsXnpshjsRsQ==} + /@floating-ui/react-dom@2.0.8(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-HOdqOt3R3OGeTKidaLvJKcgg75S6tibQ3Tif4eyd91QnIJWr0NLvoXFpJA/j8HqkFSL68GDca9AuyWEHlhyClw==} peerDependencies: react: '>=16.8.0' react-dom: '>=16.8.0' dependencies: - '@floating-ui/react-dom': 1.3.0(react-dom@18.2.0)(react@18.2.0) - aria-hidden: 1.2.1(@types/react@17.0.52)(react@18.2.0) + '@floating-ui/dom': 1.6.1 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + + /@floating-ui/react@0.26.9(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-p86wynZJVEkEq2BBjY/8p2g3biQ6TlgT4o/3KgFKyTWoJLU1GZ8wpctwRqtkEl2tseYA+kw7dBAIDFcednfI5w==} + peerDependencies: + react: '>=16.8.0' + react-dom: '>=16.8.0' + dependencies: + '@floating-ui/react-dom': 2.0.8(react-dom@18.2.0)(react@18.2.0) + '@floating-ui/utils': 0.2.1 react: 18.2.0 react-dom: 18.2.0(react@18.2.0) tabbable: 6.1.1 - transitivePeerDependencies: - - '@types/react' dev: false /@floating-ui/utils@0.1.1: resolution: {integrity: sha512-m0G6wlnhm/AX0H12IOWtK8gASEMffnX08RtKkCgTdHb9JpHKGloI7icFfLg9ZmQeavcvR0PKmzxClyuFPSjKWw==} + dev: true + + /@floating-ui/utils@0.2.1: + resolution: {integrity: sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==} + dev: false /@hapi/hoek@9.3.0: resolution: {integrity: sha512-/c6rf4UJlmHlC9b5BaNvzAcFv7HZ2QHaV0D4/HNlBdvFnvQq8RI4kYdhyPCl7Xj+oWvTWQ8ujhqS53LIgAe6KQ==} @@ -5089,8 +5107,8 @@ packages: resolution: {integrity: sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==} dev: false - /@posthog/icons@0.5.1(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-BWy5nZMTz4Y2J1zDuUm8Mk+A3OgJH3QdQQl5sZaqxWb6WA32CWzIx1W70CETiN0GMEm9UbiMU3JholhMTPIhcQ==} + /@posthog/icons@0.6.3(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-EQ86OFe9omsU9vUCvISksNN+QPH/VHiE4Z0A8FZApSKbiCtsX2zecPgX3ou765V284ktajkeROsrUI0luj8jRw==} peerDependencies: react: '>=16.14.0' react-dom: '>=16.14.0' @@ -8956,6 +8974,7 @@ packages: '@types/react': 17.0.52 react: 18.2.0 tslib: 2.4.1 + dev: true /aria-query@5.1.3: resolution: {integrity: sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==}