@stack-spot/ai-chat-widget 1.38.2-beta.2 → 2.0.0-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +33 -32
- package/dist/StackspotAIWidget.d.ts +14 -2
- package/dist/StackspotAIWidget.d.ts.map +1 -1
- package/dist/StackspotAIWidget.js +7 -8
- package/dist/StackspotAIWidget.js.map +1 -1
- package/dist/app-metadata.json +13 -5
- package/dist/chat-interceptors/quick-commands.js +3 -3
- package/dist/chat-interceptors/quick-commands.js.map +1 -1
- package/dist/components/AdaptiveTextArea.d.ts +1 -1
- package/dist/components/AdaptiveTextArea.d.ts.map +1 -1
- package/dist/components/AdaptiveTextArea.js +1 -1
- package/dist/components/AdaptiveTextArea.js.map +1 -1
- package/dist/components/AgentCard/AgentCardCreate.d.ts.map +1 -1
- package/dist/components/AgentCard/AgentCardCreate.js +4 -5
- package/dist/components/AgentCard/AgentCardCreate.js.map +1 -1
- package/dist/components/AgentCard/index.d.ts.map +1 -1
- package/dist/components/AgentCard/index.js +5 -6
- package/dist/components/AgentCard/index.js.map +1 -1
- package/dist/components/ButtonFavorite.d.ts +8 -7
- package/dist/components/ButtonFavorite.d.ts.map +1 -1
- package/dist/components/ButtonFavorite.js +5 -14
- package/dist/components/ButtonFavorite.js.map +1 -1
- package/dist/components/Code.d.ts.map +1 -1
- package/dist/components/Code.js +11 -9
- package/dist/components/Code.js.map +1 -1
- package/dist/components/ComponentNavigator.d.ts.map +1 -1
- package/dist/components/ComponentNavigator.js +2 -4
- package/dist/components/ComponentNavigator.js.map +1 -1
- package/dist/components/FadingOverflow.d.ts.map +1 -1
- package/dist/components/FadingOverflow.js +3 -4
- package/dist/components/FadingOverflow.js.map +1 -1
- package/dist/components/FileDescription.d.ts.map +1 -1
- package/dist/components/FileDescription.js +3 -4
- package/dist/components/FileDescription.js.map +1 -1
- package/dist/components/HistoryList.d.ts.map +1 -1
- package/dist/components/HistoryList.js +3 -1
- package/dist/components/HistoryList.js.map +1 -1
- package/dist/components/ListResource.js +3 -3
- package/dist/components/ListResource.js.map +1 -1
- package/dist/components/Markdown.js +1 -1
- package/dist/components/Markdown.js.map +1 -1
- package/dist/components/Modal.d.ts.map +1 -1
- package/dist/components/Modal.js +2 -4
- package/dist/components/Modal.js.map +1 -1
- package/dist/components/QuickStartButton.d.ts +2 -3
- package/dist/components/QuickStartButton.d.ts.map +1 -1
- package/dist/components/QuickStartButton.js +4 -3
- package/dist/components/QuickStartButton.js.map +1 -1
- package/dist/components/RightPanelForm.d.ts.map +1 -1
- package/dist/components/RightPanelForm.js +20 -13
- package/dist/components/RightPanelForm.js.map +1 -1
- package/dist/components/RightPanelTabs.d.ts +1 -4
- package/dist/components/RightPanelTabs.d.ts.map +1 -1
- package/dist/components/RightPanelTabs.js +4 -16
- package/dist/components/RightPanelTabs.js.map +1 -1
- package/dist/components/Selector/index.d.ts.map +1 -1
- package/dist/components/Selector/index.js +5 -8
- package/dist/components/Selector/index.js.map +1 -1
- package/dist/components/Selector/styled.d.ts.map +1 -1
- package/dist/components/Selector/styled.js +8 -5
- package/dist/components/Selector/styled.js.map +1 -1
- package/dist/components/StackedBadge.js +5 -5
- package/dist/components/StackedBadge.js.map +1 -1
- package/dist/components/TabManager.d.ts.map +1 -1
- package/dist/components/TabManager.js +9 -32
- package/dist/components/TabManager.js.map +1 -1
- package/dist/components/ToolBadge.d.ts +3 -8
- package/dist/components/ToolBadge.d.ts.map +1 -1
- package/dist/components/ToolBadge.js +23 -99
- package/dist/components/ToolBadge.js.map +1 -1
- package/dist/components/WorkspaceTabNavigator.d.ts.map +1 -1
- package/dist/components/WorkspaceTabNavigator.js +7 -9
- package/dist/components/WorkspaceTabNavigator.js.map +1 -1
- package/dist/components/form/DescribedCheckboxGroup.d.ts +24 -2
- package/dist/components/form/DescribedCheckboxGroup.d.ts.map +1 -1
- package/dist/components/form/DescribedCheckboxGroup.js +46 -29
- package/dist/components/form/DescribedCheckboxGroup.js.map +1 -1
- package/dist/components/form/DescribedRadioGroup.d.ts +24 -4
- package/dist/components/form/DescribedRadioGroup.d.ts.map +1 -1
- package/dist/components/form/DescribedRadioGroup.js +39 -18
- package/dist/components/form/DescribedRadioGroup.js.map +1 -1
- package/dist/context/hooks.d.ts +6 -1
- package/dist/context/hooks.d.ts.map +1 -1
- package/dist/context/hooks.js +4 -1
- package/dist/context/hooks.js.map +1 -1
- package/dist/hooks/midnight-update-view.d.ts +5 -0
- package/dist/hooks/midnight-update-view.d.ts.map +1 -0
- package/dist/hooks/midnight-update-view.js +30 -0
- package/dist/hooks/midnight-update-view.js.map +1 -0
- package/dist/index.d.ts +4 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/layout.css +0 -26
- package/dist/right-panel/DefaultPanel.d.ts.map +1 -1
- package/dist/right-panel/DefaultPanel.js +2 -4
- package/dist/right-panel/DefaultPanel.js.map +1 -1
- package/dist/state/ChatEntry.d.ts +3 -4
- package/dist/state/ChatEntry.d.ts.map +1 -1
- package/dist/state/ChatEntry.js.map +1 -1
- package/dist/state/constants.d.ts.map +1 -1
- package/dist/state/constants.js +1 -0
- package/dist/state/constants.js.map +1 -1
- package/dist/types.d.ts +8 -3
- package/dist/types.d.ts.map +1 -1
- package/dist/utils/tools.d.ts +9 -3
- package/dist/utils/tools.d.ts.map +1 -1
- package/dist/utils/tools.js +1 -6
- package/dist/utils/tools.js.map +1 -1
- package/dist/views/Agents/AgentDescription.d.ts.map +1 -1
- package/dist/views/Agents/AgentDescription.js +8 -13
- package/dist/views/Agents/AgentDescription.js.map +1 -1
- package/dist/views/Agents/AgentsPanel.d.ts.map +1 -1
- package/dist/views/Agents/AgentsPanel.js +7 -7
- package/dist/views/Agents/AgentsPanel.js.map +1 -1
- package/dist/views/Agents/AgentsTab.d.ts.map +1 -1
- package/dist/views/Agents/AgentsTab.js +30 -29
- package/dist/views/Agents/AgentsTab.js.map +1 -1
- package/dist/views/Agents/dictionary.d.ts +1 -1
- package/dist/views/Agents/useAgentFavorites.js +3 -3
- package/dist/views/Agents/useAgentFavorites.js.map +1 -1
- package/dist/views/Chat/AgentInfo.d.ts.map +1 -1
- package/dist/views/Chat/AgentInfo.js +3 -5
- package/dist/views/Chat/AgentInfo.js.map +1 -1
- package/dist/views/Chat/ChatMessage.d.ts +24 -2
- package/dist/views/Chat/ChatMessage.d.ts.map +1 -1
- package/dist/views/Chat/ChatMessage.js +36 -47
- package/dist/views/Chat/ChatMessage.js.map +1 -1
- package/dist/views/Chat/ChatMessages.d.ts +1 -1
- package/dist/views/Chat/ChatMessages.d.ts.map +1 -1
- package/dist/views/Chat/ChatMessages.js +2 -2
- package/dist/views/Chat/ChatMessages.js.map +1 -1
- package/dist/views/Chat/StepsList.d.ts.map +1 -1
- package/dist/views/Chat/StepsList.js +10 -10
- package/dist/views/Chat/StepsList.js.map +1 -1
- package/dist/views/Chat/index.d.ts +1 -1
- package/dist/views/Chat/index.d.ts.map +1 -1
- package/dist/views/Chat/index.js +2 -2
- package/dist/views/Chat/index.js.map +1 -1
- package/dist/views/Chat/styled.d.ts.map +1 -1
- package/dist/views/Chat/styled.js +11 -16
- package/dist/views/Chat/styled.js.map +1 -1
- package/dist/views/ChatHistory/HistoryItem.d.ts.map +1 -1
- package/dist/views/ChatHistory/HistoryItem.js +10 -48
- package/dist/views/ChatHistory/HistoryItem.js.map +1 -1
- package/dist/views/ChatHistory/index.js +1 -1
- package/dist/views/ChatHistory/index.js.map +1 -1
- package/dist/views/ChatHistory/styled.d.ts.map +1 -1
- package/dist/views/ChatHistory/styled.js +3 -5
- package/dist/views/ChatHistory/styled.js.map +1 -1
- package/dist/views/ChatHistory/utils.d.ts +7 -0
- package/dist/views/ChatHistory/utils.d.ts.map +1 -1
- package/dist/views/ChatHistory/utils.js +40 -1
- package/dist/views/ChatHistory/utils.js.map +1 -1
- package/dist/views/ChatTabSelection.d.ts +6 -1
- package/dist/views/ChatTabSelection.d.ts.map +1 -1
- package/dist/views/ChatTabSelection.js +13 -8
- package/dist/views/ChatTabSelection.js.map +1 -1
- package/dist/views/Editor.d.ts.map +1 -1
- package/dist/views/Editor.js +6 -12
- package/dist/views/Editor.js.map +1 -1
- package/dist/views/Home/BuiltInAgent.d.ts.map +1 -1
- package/dist/views/Home/BuiltInAgent.js +2 -3
- package/dist/views/Home/BuiltInAgent.js.map +1 -1
- package/dist/views/Home/CustomAgent.js +3 -3
- package/dist/views/Home/CustomAgent.js.map +1 -1
- package/dist/views/Home/index.js +2 -2
- package/dist/views/Home/index.js.map +1 -1
- package/dist/views/Home/styled.d.ts.map +1 -1
- package/dist/views/Home/styled.js +21 -22
- package/dist/views/Home/styled.js.map +1 -1
- package/dist/views/KSDocument.d.ts.map +1 -1
- package/dist/views/KSDocument.js +3 -4
- package/dist/views/KSDocument.js.map +1 -1
- package/dist/views/KnowledgeSources.d.ts.map +1 -1
- package/dist/views/KnowledgeSources.js +14 -36
- package/dist/views/KnowledgeSources.js.map +1 -1
- package/dist/views/MessageInput/AgentSelector.d.ts.map +1 -1
- package/dist/views/MessageInput/AgentSelector.js +7 -5
- package/dist/views/MessageInput/AgentSelector.js.map +1 -1
- package/dist/views/MessageInput/ButtonAgent.d.ts.map +1 -1
- package/dist/views/MessageInput/ButtonAgent.js +4 -5
- package/dist/views/MessageInput/ButtonAgent.js.map +1 -1
- package/dist/views/MessageInput/ButtonBar.d.ts.map +1 -1
- package/dist/views/MessageInput/ButtonBar.js +2 -4
- package/dist/views/MessageInput/ButtonBar.js.map +1 -1
- package/dist/views/MessageInput/ContextBar.d.ts.map +1 -1
- package/dist/views/MessageInput/ContextBar.js +3 -6
- package/dist/views/MessageInput/ContextBar.js.map +1 -1
- package/dist/views/MessageInput/QuickCommandSelector.js +2 -2
- package/dist/views/MessageInput/QuickCommandSelector.js.map +1 -1
- package/dist/views/MessageInput/SelectContent.d.ts.map +1 -1
- package/dist/views/MessageInput/SelectContent.js +30 -29
- package/dist/views/MessageInput/SelectContent.js.map +1 -1
- package/dist/views/MessageInput/UploadDragNDrop.d.ts.map +1 -1
- package/dist/views/MessageInput/UploadDragNDrop.js +2 -3
- package/dist/views/MessageInput/UploadDragNDrop.js.map +1 -1
- package/dist/views/MessageInput/dictionary.d.ts +1 -1
- package/dist/views/MessageInput/index.d.ts +2 -1
- package/dist/views/MessageInput/index.d.ts.map +1 -1
- package/dist/views/MessageInput/index.js +5 -6
- package/dist/views/MessageInput/index.js.map +1 -1
- package/dist/views/MessageInput/styled.d.ts +1 -3
- package/dist/views/MessageInput/styled.d.ts.map +1 -1
- package/dist/views/MessageInput/styled.js +11 -15
- package/dist/views/MessageInput/styled.js.map +1 -1
- package/dist/views/MinimizedHeader.d.ts.map +1 -1
- package/dist/views/MinimizedHeader.js +3 -4
- package/dist/views/MinimizedHeader.js.map +1 -1
- package/dist/views/Resources.d.ts.map +1 -1
- package/dist/views/Resources.js +11 -8
- package/dist/views/Resources.js.map +1 -1
- package/dist/views/Stacks.d.ts.map +1 -1
- package/dist/views/Stacks.js +23 -28
- package/dist/views/Stacks.js.map +1 -1
- package/dist/views/Steps/FlowChart/NodeStep.d.ts.map +1 -1
- package/dist/views/Steps/FlowChart/NodeStep.js +3 -3
- package/dist/views/Steps/FlowChart/NodeStep.js.map +1 -1
- package/dist/views/Steps/StepModal.d.ts.map +1 -1
- package/dist/views/Steps/StepModal.js +4 -6
- package/dist/views/Steps/StepModal.js.map +1 -1
- package/dist/views/Steps/dictionary.d.ts +1 -1
- package/dist/views/Steps/index.d.ts.map +1 -1
- package/dist/views/Steps/index.js +3 -4
- package/dist/views/Steps/index.js.map +1 -1
- package/dist/views/Steps/utils.d.ts +2 -1
- package/dist/views/Steps/utils.d.ts.map +1 -1
- package/dist/views/Steps/utils.js +8 -8
- package/dist/views/Steps/utils.js.map +1 -1
- package/dist/views/Tools.js +1 -1
- package/dist/views/Tools.js.map +1 -1
- package/dist/views/Workspaces/WorkspacesTab.d.ts.map +1 -1
- package/dist/views/Workspaces/WorkspacesTab.js +7 -10
- package/dist/views/Workspaces/WorkspacesTab.js.map +1 -1
- package/dist/views/Workspaces/index.js +4 -2
- package/dist/views/Workspaces/index.js.map +1 -1
- package/package.json +5 -3
- package/src/StackspotAIWidget.tsx +51 -37
- package/src/app-metadata.json +13 -5
- package/src/chat-interceptors/quick-commands.ts +3 -3
- package/src/components/AdaptiveTextArea.tsx +1 -1
- package/src/components/AgentCard/AgentCardCreate.tsx +4 -7
- package/src/components/AgentCard/index.tsx +7 -7
- package/src/components/ButtonFavorite.tsx +20 -47
- package/src/components/Code.tsx +31 -36
- package/src/components/ComponentNavigator.tsx +4 -8
- package/src/components/FadingOverflow.tsx +6 -7
- package/src/components/FileDescription.tsx +14 -10
- package/src/components/HistoryList.tsx +4 -1
- package/src/components/ListResource.tsx +5 -5
- package/src/components/Markdown.tsx +1 -1
- package/src/components/Modal.tsx +2 -4
- package/src/components/QuickStartButton.tsx +5 -4
- package/src/components/RightPanelForm.tsx +20 -13
- package/src/components/RightPanelTabs.tsx +4 -32
- package/src/components/Selector/index.tsx +17 -13
- package/src/components/Selector/styled.ts +8 -5
- package/src/components/StackedBadge.tsx +5 -5
- package/src/components/TabManager.tsx +31 -55
- package/src/components/ToolBadge.tsx +48 -129
- package/src/components/WorkspaceTabNavigator.tsx +22 -25
- package/src/components/form/DescribedCheckboxGroup.tsx +90 -65
- package/src/components/form/DescribedRadioGroup.tsx +78 -46
- package/src/context/hooks.ts +4 -1
- package/src/hooks/midnight-update-view.ts +36 -0
- package/src/index.ts +4 -2
- package/src/layout.css +0 -26
- package/src/right-panel/DefaultPanel.tsx +3 -7
- package/src/state/ChatEntry.ts +3 -4
- package/src/state/constants.ts +2 -1
- package/src/types.ts +9 -3
- package/src/utils/tools.ts +3 -12
- package/src/views/Agents/AgentDescription.tsx +20 -36
- package/src/views/Agents/AgentsPanel.tsx +11 -12
- package/src/views/Agents/AgentsTab.tsx +38 -57
- package/src/views/Agents/useAgentFavorites.ts +3 -3
- package/src/views/Chat/AgentInfo.tsx +7 -6
- package/src/views/Chat/ChatMessage.tsx +163 -145
- package/src/views/Chat/ChatMessages.tsx +2 -1
- package/src/views/Chat/StepsList.tsx +10 -11
- package/src/views/Chat/index.tsx +9 -2
- package/src/views/Chat/styled.ts +11 -16
- package/src/views/ChatHistory/HistoryItem.tsx +15 -54
- package/src/views/ChatHistory/index.tsx +1 -1
- package/src/views/ChatHistory/styled.ts +3 -5
- package/src/views/ChatHistory/utils.ts +43 -2
- package/src/views/ChatTabSelection.tsx +18 -10
- package/src/views/Editor.tsx +9 -14
- package/src/views/Home/BuiltInAgent.tsx +7 -8
- package/src/views/Home/CustomAgent.tsx +3 -3
- package/src/views/Home/index.tsx +2 -2
- package/src/views/Home/styled.ts +21 -22
- package/src/views/KSDocument.tsx +7 -8
- package/src/views/KnowledgeSources.tsx +24 -66
- package/src/views/MessageInput/AgentSelector.tsx +10 -8
- package/src/views/MessageInput/ButtonAgent.tsx +24 -12
- package/src/views/MessageInput/ButtonBar.tsx +25 -21
- package/src/views/MessageInput/ContextBar.tsx +16 -14
- package/src/views/MessageInput/QuickCommandSelector.tsx +2 -2
- package/src/views/MessageInput/SelectContent.tsx +39 -62
- package/src/views/MessageInput/UploadDragNDrop.tsx +2 -5
- package/src/views/MessageInput/index.tsx +8 -9
- package/src/views/MessageInput/styled.ts +12 -16
- package/src/views/MinimizedHeader.tsx +5 -7
- package/src/views/Resources.tsx +31 -30
- package/src/views/Stacks.tsx +31 -54
- package/src/views/Steps/FlowChart/NodeStep.tsx +6 -4
- package/src/views/Steps/StepModal.tsx +14 -18
- package/src/views/Steps/index.tsx +4 -5
- package/src/views/Steps/utils.tsx +9 -9
- package/src/views/Tools.tsx +0 -1
- package/src/views/Workspaces/WorkspacesTab.tsx +17 -21
- package/src/views/Workspaces/index.tsx +4 -2
- package/dist/components/Accordion.d.ts +0 -20
- package/dist/components/Accordion.d.ts.map +0 -1
- package/dist/components/Accordion.js +0 -51
- package/dist/components/Accordion.js.map +0 -1
- package/dist/components/FallbackBoundary/ErrorBoundary.d.ts +0 -33
- package/dist/components/FallbackBoundary/ErrorBoundary.d.ts.map +0 -1
- package/dist/components/FallbackBoundary/ErrorBoundary.js +0 -52
- package/dist/components/FallbackBoundary/ErrorBoundary.js.map +0 -1
- package/dist/components/FallbackBoundary/Loading.d.ts +0 -2
- package/dist/components/FallbackBoundary/Loading.d.ts.map +0 -1
- package/dist/components/FallbackBoundary/Loading.js +0 -12
- package/dist/components/FallbackBoundary/Loading.js.map +0 -1
- package/dist/components/FallbackBoundary/index.d.ts +0 -17
- package/dist/components/FallbackBoundary/index.d.ts.map +0 -1
- package/dist/components/FallbackBoundary/index.js +0 -9
- package/dist/components/FallbackBoundary/index.js.map +0 -1
- package/dist/components/IconInput.d.ts +0 -10
- package/dist/components/IconInput.d.ts.map +0 -1
- package/dist/components/IconInput.js +0 -61
- package/dist/components/IconInput.js.map +0 -1
- package/dist/components/OverlayMenu.d.ts +0 -21
- package/dist/components/OverlayMenu.d.ts.map +0 -1
- package/dist/components/OverlayMenu.js +0 -79
- package/dist/components/OverlayMenu.js.map +0 -1
- package/dist/components/ProgressBar.d.ts +0 -37
- package/dist/components/ProgressBar.d.ts.map +0 -1
- package/dist/components/ProgressBar.js +0 -131
- package/dist/components/ProgressBar.js.map +0 -1
- package/dist/components/Tooltip/Tooltip.d.ts +0 -37
- package/dist/components/Tooltip/Tooltip.d.ts.map +0 -1
- package/dist/components/Tooltip/Tooltip.js +0 -30
- package/dist/components/Tooltip/Tooltip.js.map +0 -1
- package/dist/components/Tooltip/TooltipAPI.d.ts +0 -29
- package/dist/components/Tooltip/TooltipAPI.d.ts.map +0 -1
- package/dist/components/Tooltip/TooltipAPI.js +0 -107
- package/dist/components/Tooltip/TooltipAPI.js.map +0 -1
- package/dist/components/Tooltip/context.d.ts +0 -5
- package/dist/components/Tooltip/context.d.ts.map +0 -1
- package/dist/components/Tooltip/context.js +0 -18
- package/dist/components/Tooltip/context.js.map +0 -1
- package/dist/components/Tooltip/index.d.ts +0 -3
- package/dist/components/Tooltip/index.d.ts.map +0 -1
- package/dist/components/Tooltip/index.js +0 -3
- package/dist/components/Tooltip/index.js.map +0 -1
- package/dist/components/Tooltip/style.d.ts +0 -4
- package/dist/components/Tooltip/style.d.ts.map +0 -1
- package/dist/components/Tooltip/style.js +0 -22
- package/dist/components/Tooltip/style.js.map +0 -1
- package/dist/components/Tooltip/types.d.ts +0 -27
- package/dist/components/Tooltip/types.d.ts.map +0 -1
- package/dist/components/Tooltip/types.js +0 -2
- package/dist/components/Tooltip/types.js.map +0 -1
- package/src/components/Accordion.tsx +0 -75
- package/src/components/FallbackBoundary/ErrorBoundary.tsx +0 -71
- package/src/components/FallbackBoundary/Loading.tsx +0 -14
- package/src/components/FallbackBoundary/index.tsx +0 -26
- package/src/components/IconInput.tsx +0 -73
- package/src/components/OverlayMenu.tsx +0 -133
- package/src/components/ProgressBar.tsx +0 -183
- package/src/components/Tooltip/Tooltip.tsx +0 -78
- package/src/components/Tooltip/TooltipAPI.ts +0 -101
- package/src/components/Tooltip/context.tsx +0 -24
- package/src/components/Tooltip/index.ts +0 -2
- package/src/components/Tooltip/style.tsx +0 -24
- package/src/components/Tooltip/types.ts +0 -28
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
import { WithStyle } from '@stack-spot/portal-theme';
|
|
2
|
-
import { WithChildren } from '../../types.js';
|
|
3
|
-
import { TooltipPosition } from './types.js';
|
|
4
|
-
interface Props extends WithChildren, WithStyle {
|
|
5
|
-
/**
|
|
6
|
-
* The content of the tooltip. Can be either a string or a Rect Element.
|
|
7
|
-
*/
|
|
8
|
-
content: React.ReactNode;
|
|
9
|
-
/**
|
|
10
|
-
* Where to position the tooltip relative to the element that triggered it.
|
|
11
|
-
*/
|
|
12
|
-
position?: TooltipPosition;
|
|
13
|
-
/**
|
|
14
|
-
* A tooltip can be triggered either by hovering an element or by clicking it.
|
|
15
|
-
* @default 'hover'
|
|
16
|
-
*/
|
|
17
|
-
triggeredBy?: 'click' | 'hover';
|
|
18
|
-
/**
|
|
19
|
-
* If true, no style is applied to the tooltip, letting you customize it however you want to.
|
|
20
|
-
*/
|
|
21
|
-
custom?: boolean;
|
|
22
|
-
/**
|
|
23
|
-
* Function to run whenever the tooltip is shown.
|
|
24
|
-
*/
|
|
25
|
-
onShow?: () => void;
|
|
26
|
-
/**
|
|
27
|
-
* Function to run whenever the tooltip is hidden.
|
|
28
|
-
*/
|
|
29
|
-
onHide?: () => void;
|
|
30
|
-
}
|
|
31
|
-
/**
|
|
32
|
-
* Shows a tooltip for its children. This tooltip element is always reused and placed at a root level in order to not be cut out by
|
|
33
|
-
* hidden overflows in the children and its ascendants.
|
|
34
|
-
*/
|
|
35
|
-
export declare const Tooltip: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLDivElement>>;
|
|
36
|
-
export {};
|
|
37
|
-
//# sourceMappingURL=Tooltip.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AAEpD,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAG1C,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAEzC,UAAU,KAAM,SAAQ,YAAY,EAAE,SAAS;IAC7C;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAChC;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED;;;GAGG;AACH,eAAO,MAAM,OAAO,kGAoClB,CAAA"}
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
/* eslint-disable react/display-name */
|
|
3
|
-
import { Text } from '@citric/core';
|
|
4
|
-
import { forwardRef } from 'react';
|
|
5
|
-
import { useTooltip } from './context.js';
|
|
6
|
-
import { DefaultTooltip } from './style.js';
|
|
7
|
-
/**
|
|
8
|
-
* Shows a tooltip for its children. This tooltip element is always reused and placed at a root level in order to not be cut out by
|
|
9
|
-
* hidden overflows in the children and its ascendants.
|
|
10
|
-
*/
|
|
11
|
-
export const Tooltip = forwardRef(({ content, custom, position, triggeredBy = 'hover', onHide, onShow, children, className, style }, ref) => {
|
|
12
|
-
const api = useTooltip();
|
|
13
|
-
async function show(e, hideOnClickOutside) {
|
|
14
|
-
await api.show({
|
|
15
|
-
content: custom ? content : _jsx(DefaultTooltip, { children: _jsx(Text, { appearance: "microtext1", children: content }) }),
|
|
16
|
-
anchor: e.target,
|
|
17
|
-
position,
|
|
18
|
-
hideOnClickOutside,
|
|
19
|
-
});
|
|
20
|
-
onShow?.();
|
|
21
|
-
}
|
|
22
|
-
function hide() {
|
|
23
|
-
api.hide();
|
|
24
|
-
onHide?.();
|
|
25
|
-
}
|
|
26
|
-
return (_jsx("div", { ...(triggeredBy === 'hover'
|
|
27
|
-
? { onMouseEnter: show, onMouseLeave: hide }
|
|
28
|
-
: { onClick: (e) => show(e, true), onKeyDown: (e) => e.key === 'Enter' && show(e, true) }), className: className, style: style, tabIndex: triggeredBy === 'click' ? 0 : undefined, role: triggeredBy === 'click' ? 'button' : undefined, ref: ref, children: children }));
|
|
29
|
-
});
|
|
30
|
-
//# sourceMappingURL=Tooltip.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAEnC,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAElC,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAA;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AA+BxC;;;GAGG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,UAAU,CAAwB,CACvD,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,GAAG,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,EAChG,GAAG,EACH,EAAE;IACF,MAAM,GAAG,GAAG,UAAU,EAAE,CAAA;IAExB,KAAK,UAAU,IAAI,CAAC,CAAgB,EAAE,kBAA4B;QAChE,MAAM,GAAG,CAAC,IAAI,CAAC;YACb,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAC,cAAc,cAAC,KAAC,IAAI,IAAC,UAAU,EAAC,YAAY,YAAE,OAAO,GAAQ,GAAiB;YAC3G,MAAM,EAAE,CAAC,CAAC,MAAqB;YAC/B,QAAQ;YACR,kBAAkB;SACnB,CAAC,CAAA;QACF,MAAM,EAAE,EAAE,CAAA;IACZ,CAAC;IAED,SAAS,IAAI;QACX,GAAG,CAAC,IAAI,EAAE,CAAA;QACV,MAAM,EAAE,EAAE,CAAA;IACZ,CAAC;IAED,OAAO,CACL,iBACM,CAAC,WAAW,KAAK,OAAO;YAC1B,CAAC,CAAC,EAAE,YAAY,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE;YAC5C,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,CAC1F,EACD,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,WAAW,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EACjD,IAAI,EAAE,WAAW,KAAK,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EACpD,GAAG,EAAE,GAAG,YAEP,QAAQ,GACL,CACP,CAAA;AACH,CAAC,CAAC,CAAA"}
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import { ShowOptions } from './types.js';
|
|
2
|
-
/**
|
|
3
|
-
* Allows interaction with the tooltip element.
|
|
4
|
-
*
|
|
5
|
-
* This places the tooltip element at the correct place, shows it, hides it and manages its contents.
|
|
6
|
-
*
|
|
7
|
-
* This also takes into account the screen edges, making adjustments to the tooltip position if it would overflow the screen.
|
|
8
|
-
*/
|
|
9
|
-
export declare class TooltipAPI {
|
|
10
|
-
/**
|
|
11
|
-
* A reference to the tooltip element in the HTML tree.
|
|
12
|
-
*/
|
|
13
|
-
tooltipRef: React.RefObject<HTMLDivElement>;
|
|
14
|
-
private setContent;
|
|
15
|
-
private hideTimeoutId;
|
|
16
|
-
private clickListener;
|
|
17
|
-
private relativeTo;
|
|
18
|
-
constructor(tooltipRef: React.RefObject<HTMLDivElement>, setContent: React.Dispatch<React.SetStateAction<React.ReactNode>>);
|
|
19
|
-
private computeRelativeTo;
|
|
20
|
-
/**
|
|
21
|
-
* Shows the tooltip with `content`. Its position is based on `position` and the position of the element referred by `anchor`.
|
|
22
|
-
*/
|
|
23
|
-
show({ content, anchor, position, hideOnClickOutside }: ShowOptions): Promise<void>;
|
|
24
|
-
/**
|
|
25
|
-
* Hides the tooltip. After the animation, the content is removed.
|
|
26
|
-
*/
|
|
27
|
-
hide(): void;
|
|
28
|
-
}
|
|
29
|
-
//# sourceMappingURL=TooltipAPI.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TooltipAPI.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/TooltipAPI.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AASrC;;;;;;GAMG;AACH,qBAAa,UAAU;IACrB;;OAEG;IACH,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;IAC3C,OAAO,CAAC,UAAU,CAAuD;IACzE,OAAO,CAAC,aAAa,CAAoB;IACzC,OAAO,CAAC,aAAa,CAAuC;IAC5D,OAAO,CAAC,UAAU,CAAyB;gBAE/B,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,EAAE,UAAU,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;IAK1H,OAAO,CAAC,iBAAiB;IAQzB;;OAEG;IACG,IAAI,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,QAAmB,EAAE,kBAAkB,EAAE,EAAE,WAAW;IA+CpF;;OAEG;IACH,IAAI,IAAI,IAAI;CAMb"}
|
|
@@ -1,107 +0,0 @@
|
|
|
1
|
-
import { delay } from '@stack-spot/portal-components';
|
|
2
|
-
import { animationTimeMS } from './style.js';
|
|
3
|
-
// the maximum amount of pixels a tooltip can get close to the screen edges.
|
|
4
|
-
const MARGIN_TO_CORNERS_PX = 10;
|
|
5
|
-
function isRelative(element) {
|
|
6
|
-
return ['relative', 'absolute', 'fixed'].includes(element.computedStyleMap().get('position')?.toString() ?? '');
|
|
7
|
-
}
|
|
8
|
-
/**
|
|
9
|
-
* Allows interaction with the tooltip element.
|
|
10
|
-
*
|
|
11
|
-
* This places the tooltip element at the correct place, shows it, hides it and manages its contents.
|
|
12
|
-
*
|
|
13
|
-
* This also takes into account the screen edges, making adjustments to the tooltip position if it would overflow the screen.
|
|
14
|
-
*/
|
|
15
|
-
export class TooltipAPI {
|
|
16
|
-
/**
|
|
17
|
-
* A reference to the tooltip element in the HTML tree.
|
|
18
|
-
*/
|
|
19
|
-
tooltipRef;
|
|
20
|
-
setContent;
|
|
21
|
-
hideTimeoutId;
|
|
22
|
-
clickListener;
|
|
23
|
-
relativeTo;
|
|
24
|
-
constructor(tooltipRef, setContent) {
|
|
25
|
-
this.tooltipRef = tooltipRef;
|
|
26
|
-
this.setContent = setContent;
|
|
27
|
-
}
|
|
28
|
-
computeRelativeTo() {
|
|
29
|
-
if (this.relativeTo)
|
|
30
|
-
return;
|
|
31
|
-
this.relativeTo = this.tooltipRef.current?.parentElement;
|
|
32
|
-
while (this.relativeTo && this.relativeTo !== document.body && !isRelative(this.relativeTo)) {
|
|
33
|
-
this.relativeTo = this.relativeTo.parentElement;
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
/**
|
|
37
|
-
* Shows the tooltip with `content`. Its position is based on `position` and the position of the element referred by `anchor`.
|
|
38
|
-
*/
|
|
39
|
-
async show({ content, anchor, position = 'bottom', hideOnClickOutside }) {
|
|
40
|
-
window.clearTimeout(this.hideTimeoutId);
|
|
41
|
-
this.hideTimeoutId = undefined;
|
|
42
|
-
if (this.clickListener)
|
|
43
|
-
document.removeEventListener('click', this.clickListener);
|
|
44
|
-
this.setContent(content);
|
|
45
|
-
await delay(10);
|
|
46
|
-
if (!this.tooltipRef.current)
|
|
47
|
-
return;
|
|
48
|
-
const anchorRect = anchor.getClientRects()[0];
|
|
49
|
-
this.tooltipRef.current.classList.add('visible');
|
|
50
|
-
const tooltipWidth = this.tooltipRef.current.clientWidth;
|
|
51
|
-
const tooltipHeight = this.tooltipRef.current.clientHeight;
|
|
52
|
-
let top = 0;
|
|
53
|
-
let left = 0;
|
|
54
|
-
if (position === 'left' || position === 'right') {
|
|
55
|
-
top = anchorRect.top + anchorRect.height / 2 - tooltipHeight / 2;
|
|
56
|
-
if (position === 'left')
|
|
57
|
-
left = anchorRect.left - tooltipWidth;
|
|
58
|
-
else
|
|
59
|
-
left = anchorRect.left + anchorRect.width;
|
|
60
|
-
}
|
|
61
|
-
else {
|
|
62
|
-
left = anchorRect.left + anchorRect.width / 2 - tooltipWidth / 2;
|
|
63
|
-
if (position === 'top')
|
|
64
|
-
top = anchorRect.top - tooltipHeight;
|
|
65
|
-
else
|
|
66
|
-
top = anchorRect.top + anchorRect.height;
|
|
67
|
-
}
|
|
68
|
-
// takes the parent the tooltip is positioned relative to into consideration
|
|
69
|
-
this.computeRelativeTo();
|
|
70
|
-
const relativeRect = this.relativeTo?.getClientRects()[0] ?? { top: 0, left: 0 };
|
|
71
|
-
top -= relativeRect.top;
|
|
72
|
-
left -= relativeRect.left;
|
|
73
|
-
// adjusts positions in order to avoid overflowing the window and leaving a margin to the corners
|
|
74
|
-
if (top <= 0)
|
|
75
|
-
top += MARGIN_TO_CORNERS_PX;
|
|
76
|
-
else if (top + tooltipHeight >= document.body.clientHeight - MARGIN_TO_CORNERS_PX) {
|
|
77
|
-
top = document.body.clientHeight - MARGIN_TO_CORNERS_PX + tooltipHeight;
|
|
78
|
-
}
|
|
79
|
-
if (left <= 0)
|
|
80
|
-
left += MARGIN_TO_CORNERS_PX;
|
|
81
|
-
else if (left + tooltipWidth >= document.body.clientWidth - MARGIN_TO_CORNERS_PX) {
|
|
82
|
-
left = document.body.clientWidth - MARGIN_TO_CORNERS_PX - tooltipWidth;
|
|
83
|
-
}
|
|
84
|
-
this.tooltipRef.current.style.top = `${top}px`;
|
|
85
|
-
this.tooltipRef.current.style.left = `${left}px`;
|
|
86
|
-
if (hideOnClickOutside) {
|
|
87
|
-
this.clickListener = (e) => {
|
|
88
|
-
if (this.tooltipRef.current?.contains(e.target))
|
|
89
|
-
return;
|
|
90
|
-
this.hide();
|
|
91
|
-
};
|
|
92
|
-
document.addEventListener('click', this.clickListener);
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
/**
|
|
96
|
-
* Hides the tooltip. After the animation, the content is removed.
|
|
97
|
-
*/
|
|
98
|
-
hide() {
|
|
99
|
-
if (!this.tooltipRef.current)
|
|
100
|
-
return;
|
|
101
|
-
this.tooltipRef.current.classList.remove('visible');
|
|
102
|
-
this.hideTimeoutId = window.setTimeout(() => this.setContent(undefined), animationTimeMS);
|
|
103
|
-
if (this.clickListener)
|
|
104
|
-
document.removeEventListener('click', this.clickListener);
|
|
105
|
-
}
|
|
106
|
-
}
|
|
107
|
-
//# sourceMappingURL=TooltipAPI.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TooltipAPI.js","sourceRoot":"","sources":["../../../src/components/Tooltip/TooltipAPI.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import { WithChildren } from '../../types.js';
|
|
2
|
-
import { TooltipAPI } from './TooltipAPI.js';
|
|
3
|
-
export declare const TooltipProvider: ({ children }: Required<WithChildren>) => import("react/jsx-runtime").JSX.Element;
|
|
4
|
-
export declare function useTooltip(): TooltipAPI;
|
|
5
|
-
//# sourceMappingURL=context.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/context.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAE1C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAIzC,eAAO,MAAM,eAAe,iBAAkB,QAAQ,CAAC,YAAY,CAAC,4CAUnE,CAAA;AAED,wBAAgB,UAAU,eAIzB"}
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { createContext, useContext, useMemo, useRef, useState } from 'react';
|
|
3
|
-
import { TooltipBox } from './style.js';
|
|
4
|
-
import { TooltipAPI } from './TooltipAPI.js';
|
|
5
|
-
const Context = createContext(undefined);
|
|
6
|
-
export const TooltipProvider = ({ children }) => {
|
|
7
|
-
const ref = useRef(null);
|
|
8
|
-
const [content, setContent] = useState();
|
|
9
|
-
const api = useMemo(() => new TooltipAPI(ref, setContent), []);
|
|
10
|
-
return (_jsxs(Context.Provider, { value: api, children: [children, _jsx(TooltipBox, { ref: ref, children: content })] }));
|
|
11
|
-
};
|
|
12
|
-
export function useTooltip() {
|
|
13
|
-
const api = useContext(Context);
|
|
14
|
-
if (!api)
|
|
15
|
-
throw new Error('In order to use tooltips, you must wrap your content in a <TooltipProvider>.');
|
|
16
|
-
return api;
|
|
17
|
-
}
|
|
18
|
-
//# sourceMappingURL=context.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"context.js","sourceRoot":"","sources":["../../../src/components/Tooltip/context.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAE5E,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEzC,MAAM,OAAO,GAAG,aAAa,CAAyB,SAAS,CAAC,CAAA;AAEhE,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAAE,QAAQ,EAA0B,EAAE,EAAE;IACtE,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IACxC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,EAAmB,CAAA;IACzD,MAAM,GAAG,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,UAAU,CAAC,GAAG,EAAE,UAAU,CAAC,EAAE,EAAE,CAAC,CAAA;IAC9D,OAAO,CACL,MAAC,OAAO,CAAC,QAAQ,IAAC,KAAK,EAAE,GAAG,aACzB,QAAQ,EACT,KAAC,UAAU,IAAC,GAAG,EAAE,GAAG,YAAG,OAAO,GAAc,IAC3B,CACpB,CAAA;AACH,CAAC,CAAA;AAED,MAAM,UAAU,UAAU;IACxB,MAAM,GAAG,GAAG,UAAU,CAAC,OAAO,CAAC,CAAA;IAC/B,IAAI,CAAC,GAAG;QAAE,MAAM,IAAI,KAAK,CAAC,8EAA8E,CAAC,CAAA;IACzG,OAAO,GAAG,CAAA;AACZ,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAA;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAA;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA"}
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
export declare const animationTimeMS = 300;
|
|
2
|
-
export declare const TooltipBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
3
|
-
export declare const DefaultTooltip: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
4
|
-
//# sourceMappingURL=style.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/style.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe,MAAM,CAAA;AAElC,eAAO,MAAM,UAAU,wOAUtB,CAAA;AAED,eAAO,MAAM,cAAc,wOAM1B,CAAA"}
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import { theme } from '@stack-spot/portal-theme';
|
|
2
|
-
import { styled } from 'styled-components';
|
|
3
|
-
export const animationTimeMS = 300;
|
|
4
|
-
export const TooltipBox = styled.div `
|
|
5
|
-
position: absolute;
|
|
6
|
-
opacity: 0;
|
|
7
|
-
transition: opacity ${animationTimeMS / 1000}s;
|
|
8
|
-
top: 0;
|
|
9
|
-
left: 0;
|
|
10
|
-
|
|
11
|
-
&.visible {
|
|
12
|
-
opacity: 1;
|
|
13
|
-
}
|
|
14
|
-
`;
|
|
15
|
-
export const DefaultTooltip = styled.div `
|
|
16
|
-
padding: 4px 8px;
|
|
17
|
-
background-color: ${theme.color.inverse[500]};
|
|
18
|
-
color: ${theme.color.inverse.contrastText};
|
|
19
|
-
border-radius: 6px;
|
|
20
|
-
margin: 6px;
|
|
21
|
-
`;
|
|
22
|
-
//# sourceMappingURL=style.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sourceRoot":"","sources":["../../../src/components/Tooltip/style.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAE1C,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;AAElC,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;wBAGZ,eAAe,GAAE,IAAI;;;;;;;CAO5C,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA;;sBAElB,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;WACnC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY;;;CAG1C,CAAA"}
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
export type TooltipPosition = 'left' | 'right' | 'top' | 'bottom';
|
|
2
|
-
export interface BoxPosition {
|
|
3
|
-
x1: number;
|
|
4
|
-
x2: number;
|
|
5
|
-
y1: number;
|
|
6
|
-
y2: number;
|
|
7
|
-
}
|
|
8
|
-
export interface ShowOptions {
|
|
9
|
-
/**
|
|
10
|
-
* The content of the tooltip. Can be either a string or a React Element.
|
|
11
|
-
*/
|
|
12
|
-
content: React.ReactNode;
|
|
13
|
-
/**
|
|
14
|
-
* The anchor to the tooltip. This is part of what defines the position where the tooltip will appear.
|
|
15
|
-
*/
|
|
16
|
-
anchor: HTMLElement;
|
|
17
|
-
/**
|
|
18
|
-
* The position relative to the element referred by `anchor`.
|
|
19
|
-
* @default bottom
|
|
20
|
-
*/
|
|
21
|
-
position?: TooltipPosition;
|
|
22
|
-
/**
|
|
23
|
-
* Whether or not to hide the tooltip when a click is detected outside of it.
|
|
24
|
-
*/
|
|
25
|
-
hideOnClickOutside?: boolean;
|
|
26
|
-
}
|
|
27
|
-
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAA;AAEjE,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,MAAM,EAAE,WAAW,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B;;OAEG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/Tooltip/types.ts"],"names":[],"mappings":""}
|
|
@@ -1,75 +0,0 @@
|
|
|
1
|
-
/* Copiar do EDP ou usar o AnimatedHeight da lib de components */
|
|
2
|
-
|
|
3
|
-
import { ChevronDown } from '@citric/icons'
|
|
4
|
-
import { IconButton } from '@citric/ui'
|
|
5
|
-
import { AnimatedHeight } from '@stack-spot/portal-components/AnimatedHeight'
|
|
6
|
-
import { theme, WithStyle } from '@stack-spot/portal-theme'
|
|
7
|
-
import React, { useState } from 'react'
|
|
8
|
-
import { styled } from 'styled-components'
|
|
9
|
-
import { WithChildren } from '../types'
|
|
10
|
-
|
|
11
|
-
interface Props extends WithStyle, Required<WithChildren> {
|
|
12
|
-
/**
|
|
13
|
-
* The header of the accordion (always rendered). The body (hidden part) must be passed as the children.
|
|
14
|
-
*/
|
|
15
|
-
header: React.ReactNode,
|
|
16
|
-
/**
|
|
17
|
-
* Whether or not to start expanded.
|
|
18
|
-
* @default false
|
|
19
|
-
*/
|
|
20
|
-
startExpanded?: boolean,
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
const StyledAccordion = styled.div`
|
|
24
|
-
> header {
|
|
25
|
-
display: flex;
|
|
26
|
-
flex-direction: row;
|
|
27
|
-
justify-content: space-between;
|
|
28
|
-
align-items: center;
|
|
29
|
-
padding: 10px;
|
|
30
|
-
background-color: ${theme.color.light[400]};
|
|
31
|
-
|
|
32
|
-
> button {
|
|
33
|
-
transition: transform 0.3s ease-out;
|
|
34
|
-
background: transparent;
|
|
35
|
-
border: none;
|
|
36
|
-
padding: 0;
|
|
37
|
-
|
|
38
|
-
&:hover {
|
|
39
|
-
background: transparent;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
svg {
|
|
43
|
-
width: 16px;
|
|
44
|
-
height: 16px;
|
|
45
|
-
margin: 4px;
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
&.expanded > button {
|
|
50
|
-
transform: rotate(180deg);
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
> .accordion-content {
|
|
55
|
-
padding: 10px;
|
|
56
|
-
}
|
|
57
|
-
`
|
|
58
|
-
|
|
59
|
-
/**
|
|
60
|
-
* A component that can have it's content shown or hidden (animated).
|
|
61
|
-
*/
|
|
62
|
-
export const Accordion = ({ children, header, className, startExpanded, style }: Props) => {
|
|
63
|
-
const [expanded, setExpanded] = useState(startExpanded)
|
|
64
|
-
return (
|
|
65
|
-
<AnimatedHeight style={style} className={className} outerStyle={{ width: '100%' }}>
|
|
66
|
-
<StyledAccordion>
|
|
67
|
-
<header className={expanded ? 'expanded' : ''}>
|
|
68
|
-
{header}
|
|
69
|
-
<IconButton onClick={() => setExpanded(v => !v)}><ChevronDown /></IconButton>
|
|
70
|
-
</header>
|
|
71
|
-
{expanded ? <div className="accordion-content">{children}</div> : null}
|
|
72
|
-
</StyledAccordion>
|
|
73
|
-
</AnimatedHeight>
|
|
74
|
-
)
|
|
75
|
-
}
|
|
@@ -1,71 +0,0 @@
|
|
|
1
|
-
import { IconBox, Text } from '@citric/core'
|
|
2
|
-
import { TimesCircle } from '@citric/icons'
|
|
3
|
-
import { ErrorDescription, ErrorFeedback } from '@stack-spot/portal-components/error'
|
|
4
|
-
import { StackspotAPIError } from '@stack-spot/portal-network'
|
|
5
|
-
import { Component } from 'react'
|
|
6
|
-
import { styled } from 'styled-components'
|
|
7
|
-
|
|
8
|
-
interface State extends ErrorDescription {
|
|
9
|
-
hasError: boolean,
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
interface Props {
|
|
13
|
-
mini?: boolean,
|
|
14
|
-
message?: string,
|
|
15
|
-
children: React.ReactNode,
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
const ErrorBox = styled.div`
|
|
19
|
-
width: 100%;
|
|
20
|
-
height: 100%;
|
|
21
|
-
display: flex;
|
|
22
|
-
flex-direction: column;
|
|
23
|
-
align-items: center;
|
|
24
|
-
justify-content: center;
|
|
25
|
-
`
|
|
26
|
-
|
|
27
|
-
/**
|
|
28
|
-
* An Error Boundary that renders an ErrorFeedback instead of its content if any of its children throws.
|
|
29
|
-
*
|
|
30
|
-
* To customize what properties are passed to the ErrorFeedback component, setup an error descriptor for the ErrorManager class. If you're
|
|
31
|
-
* using the component `Layout` or `RawLayout`, you can use the property `errorDescriptor`.
|
|
32
|
-
*
|
|
33
|
-
* To run an error handler every time an error is catch by this boundary, setup an error handler for the ErrorManager class. If you're
|
|
34
|
-
* using the component `Layout` or `RawLayout`, you can use the property `onError`.
|
|
35
|
-
*/
|
|
36
|
-
export class ErrorBoundary extends Component<Props, State> {
|
|
37
|
-
constructor(props: Props) {
|
|
38
|
-
super(props)
|
|
39
|
-
this.state = { hasError: false }
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
static getDerivedStateFromError(error: any) {
|
|
43
|
-
const message = error instanceof StackspotAPIError ? error.translate() : (error.message ?? `${error}`)
|
|
44
|
-
const code = error instanceof StackspotAPIError ? error.status : undefined
|
|
45
|
-
return { hasError: true, message, code }
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
componentDidCatch(error: any, errorInfo: any) {
|
|
49
|
-
// eslint-disable-next-line no-console
|
|
50
|
-
console.error(error, errorInfo)
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
componentDidUpdate(prevProps: Readonly<Props>) {
|
|
54
|
-
if (this.props.children !== prevProps.children) this.setState({ hasError: false })
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
private renderError() {
|
|
58
|
-
return this.props.mini
|
|
59
|
-
? (
|
|
60
|
-
<ErrorBox className="error">
|
|
61
|
-
<IconBox size="lg" colorIcon="danger.500"><TimesCircle /></IconBox>
|
|
62
|
-
<Text colorScheme="light.700">{this.props.message || this.state.message}</Text>
|
|
63
|
-
</ErrorBox>
|
|
64
|
-
)
|
|
65
|
-
: <ErrorFeedback className="error" code={this.state.code} message={this.props.message || this.state.message} />
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
render() {
|
|
69
|
-
return this.state.hasError ? this.renderError() : this.props.children
|
|
70
|
-
}
|
|
71
|
-
}
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { LoadingCircular } from '@citric/ui'
|
|
2
|
-
import styled from 'styled-components'
|
|
3
|
-
|
|
4
|
-
const LoadingBox = styled.div`
|
|
5
|
-
width: 100%;
|
|
6
|
-
height: 100%;
|
|
7
|
-
display: flex;
|
|
8
|
-
align-items: center;
|
|
9
|
-
justify-content: center;
|
|
10
|
-
`
|
|
11
|
-
|
|
12
|
-
export const Loading = () => (
|
|
13
|
-
<LoadingBox className="loading"><LoadingCircular /></LoadingBox>
|
|
14
|
-
)
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import { Suspense } from 'react'
|
|
2
|
-
import { WithChildren } from '../../types'
|
|
3
|
-
import { ErrorBoundary } from './ErrorBoundary'
|
|
4
|
-
import { Loading } from './Loading'
|
|
5
|
-
|
|
6
|
-
interface Props extends WithChildren {
|
|
7
|
-
/**
|
|
8
|
-
* Use this to show errors in small spaces.
|
|
9
|
-
*/
|
|
10
|
-
mini?: boolean,
|
|
11
|
-
/**
|
|
12
|
-
* Replaces the error message with this text.
|
|
13
|
-
*/
|
|
14
|
-
message?: string,
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
/**
|
|
18
|
-
* Fallbacks for errors and loadings (suspense).
|
|
19
|
-
*/
|
|
20
|
-
export const FallbackBoundary = ({ children, mini, message }: Props) => (
|
|
21
|
-
<ErrorBoundary mini={mini} message={message}>
|
|
22
|
-
<Suspense fallback={<Loading />}>
|
|
23
|
-
{children}
|
|
24
|
-
</Suspense>
|
|
25
|
-
</ErrorBoundary>
|
|
26
|
-
)
|
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
import { IconBox } from '@citric/core'
|
|
2
|
-
import { listToClass, theme } from '@stack-spot/portal-theme'
|
|
3
|
-
import { useMemo, useState } from 'react'
|
|
4
|
-
import { styled } from 'styled-components'
|
|
5
|
-
|
|
6
|
-
interface Props extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
|
|
7
|
-
icon: React.ReactElement,
|
|
8
|
-
onChange?: (value: string) => void,
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
const InputBox = styled.div`
|
|
12
|
-
display: flex;
|
|
13
|
-
flex-direction: row;
|
|
14
|
-
transition: border-color 0.3s, box-shadow 0.3s;
|
|
15
|
-
border: 1px solid ${theme.color.light[600]};
|
|
16
|
-
border-radius: 0.25rem;
|
|
17
|
-
background-color: ${theme.color.light[300]};
|
|
18
|
-
overflow: hidden;
|
|
19
|
-
flex-shrink: 0;
|
|
20
|
-
|
|
21
|
-
&.focused {
|
|
22
|
-
border-color: ${theme.color.primary[500]};
|
|
23
|
-
box-shadow: 0 0 0 1px ${theme.color.primary[500]};
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
&.disabled {
|
|
27
|
-
background-color: ${theme.color.light[500]};
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
${IconBox} {
|
|
31
|
-
width: 40px;
|
|
32
|
-
height: 40px;
|
|
33
|
-
border-radius: 0;
|
|
34
|
-
background-color: ${theme.color.light[600]};
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
input {
|
|
38
|
-
padding: 8px;
|
|
39
|
-
border: none;
|
|
40
|
-
background-color: transparent;
|
|
41
|
-
flex: 1;
|
|
42
|
-
color: ${theme.color.light.contrastText};
|
|
43
|
-
|
|
44
|
-
&:focus {
|
|
45
|
-
outline: none;
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
`
|
|
49
|
-
|
|
50
|
-
/**
|
|
51
|
-
* A text input with an icon at the left side.
|
|
52
|
-
*/
|
|
53
|
-
export const IconInput = ({ icon, onChange, style, className, disabled, onFocus, onBlur, ...props }: Props) => {
|
|
54
|
-
const [focused, setFocused] = useState(false)
|
|
55
|
-
|
|
56
|
-
const { focus, blur } = useMemo(() => ({
|
|
57
|
-
focus: (e: React.FocusEvent<HTMLInputElement, Element>) => {
|
|
58
|
-
setFocused(true)
|
|
59
|
-
onFocus?.(e)
|
|
60
|
-
},
|
|
61
|
-
blur: (e: React.FocusEvent<HTMLInputElement, Element>) => {
|
|
62
|
-
setFocused(false)
|
|
63
|
-
onBlur?.(e)
|
|
64
|
-
},
|
|
65
|
-
}), [])
|
|
66
|
-
|
|
67
|
-
return (
|
|
68
|
-
<InputBox style={style} className={listToClass([className, focused && !disabled && 'focused', disabled && 'disabled'])}>
|
|
69
|
-
<IconBox>{icon}</IconBox>
|
|
70
|
-
<input {...props} disabled={disabled} onFocus={focus} onBlur={blur} onChange={e => onChange?.(e.target.value)} />
|
|
71
|
-
</InputBox>
|
|
72
|
-
)
|
|
73
|
-
}
|