@appquality/unguess-design-system 3.1.88 → 3.1.89-tooltip

package/CHANGELOG.md

@@ -1,16 +1,3 @@
-# v3.1.88 (Mon May 13 2024)
-
-#### 🐛 Bug Fix
-
-- Player fixes [#343](https://github.com/AppQuality/unguess-design-system/pull/343) ([@cannarocks](https://github.com/cannarocks))
-- Fix undefined state in player and reduce renders [#342](https://github.com/AppQuality/unguess-design-system/pull/342) ([@cannarocks](https://github.com/cannarocks))
-
-#### Authors: 1
-
-- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
-
----
-
 # v3.1.87 (Mon May 13 2024)
 
 #### 🐛 Bug Fix

package/build/index.js

@@ -2978,10 +2978,17 @@ const FloatingMenu = (props) => {
 const TooltipComponent = (props) => {
     var _a;
     const theme = React.useContext(styled.ThemeContext);
-    return jsxRuntime.jsx(reactTooltips.Tooltip, Object.assign({}, props, { zIndex: (_a = props.zIndex) !== null && _a !== void 0 ? _a : theme.levels.front }));
+    return (jsxRuntime.jsx(reactTooltips.Tooltip, Object.assign({}, props, { zIndex: (_a = props.zIndex) !== null && _a !== void 0 ? _a : theme.levels.front })));
 };
 const Tooltip = styled__default["default"](TooltipComponent) `
   box-shadow: ${({ theme }) => theme.shadows.lg(`${theme.space.base * 3}px`, `${theme.space.base * 5}px`, getColor("neutralHue", 600, theme, 0.15))};
+
+  ${({ isTransparent }) => isTransparent &&
+    `
+      box-shadow: none;
+      background-color: transparent;
+      border: none;
+    `};
 `;
 
 var _path$t;
@@ -5633,7 +5640,7 @@ const StyledWord = styled__default["default"](reactTypography.Span) `
     return observation &&
         ` user-select: none;
       padding: 0;
-      background-color: ${(_a = observation.backgroundColor) !== null && _a !== void 0 ? _a : getColor(theme.palette.azure, 700, undefined, 0.5)};
+      background-color: ${(_a = observation.hue) !== null && _a !== void 0 ? _a : getColor(theme.palette.azure, 700, undefined, 0.5)};
       color: ${(_b = observation.color) !== null && _b !== void 0 ? _b : "white"};
       box-sizing: border-box;
       &:focus {
@@ -5701,6 +5708,9 @@ const Word = (props) => {
         props.currentTime < props.end;
     // Is there an observation that contains this word?
     const observation = (_a = props.observations) === null || _a === void 0 ? void 0 : _a.find((obs) => props.start >= obs.start && props.end <= obs.end);
+    if (props.tooltipContent !== undefined && !!observation) {
+        return (jsxRuntime.jsx(Tooltip, Object.assign({ content: props.tooltipContent(observation), isTransparent: true }, { children: jsxRuntime.jsxs(StyledWord, Object.assign({}, props, { observation: observation, "data-start": props.start, "data-end": props.end, className: !!observation ? "highlighted" : "" }, (!!observation ? { tag: "observation" } : {}), { children: [isActive ? (jsxRuntime.jsx(ActiveWord, { children: jsxRuntime.jsx(Searchable, { start: props.start, text: props.text }) })) : (jsxRuntime.jsx(Searchable, { start: props.start, text: props.text })), " "] })) })));
+    }
     return (jsxRuntime.jsxs(StyledWord, Object.assign({}, props, { observation: observation, "data-start": props.start, "data-end": props.end, className: !!observation ? "highlighted" : "" }, (!!observation ? { tag: "observation" } : {}), { children: [isActive ? (jsxRuntime.jsx(ActiveWord, { children: jsxRuntime.jsx(Searchable, { start: props.start, text: props.text }) })) : (jsxRuntime.jsx(Searchable, { start: props.start, text: props.text })), " "] })));
 };
 Highlight.Word = Word;

package/build/stories/buttons/utils.d.ts

@@ -8,18 +8,18 @@ export declare const variants: readonly [{}, {
     readonly disabled: true;
 }];
 export declare const Row: import("styled-components").IStyledComponent<"web", {
-    alignItems?: "center" | "start" | "end" | "baseline" | "stretch" | undefined;
-    alignItemsXs?: "center" | "start" | "end" | "baseline" | "stretch" | undefined;
-    alignItemsSm?: "center" | "start" | "end" | "baseline" | "stretch" | undefined;
-    alignItemsMd?: "center" | "start" | "end" | "baseline" | "stretch" | undefined;
-    alignItemsLg?: "center" | "start" | "end" | "baseline" | "stretch" | undefined;
-    alignItemsXl?: "center" | "start" | "end" | "baseline" | "stretch" | undefined;
-    justifyContent?: "center" | "start" | "end" | "between" | "around" | undefined;
-    justifyContentXs?: "center" | "start" | "end" | "between" | "around" | undefined;
-    justifyContentSm?: "center" | "start" | "end" | "between" | "around" | undefined;
-    justifyContentMd?: "center" | "start" | "end" | "between" | "around" | undefined;
-    justifyContentLg?: "center" | "start" | "end" | "between" | "around" | undefined;
-    justifyContentXl?: "center" | "start" | "end" | "between" | "around" | undefined;
+    alignItems?: "start" | "end" | "center" | "baseline" | "stretch" | undefined;
+    alignItemsXs?: "start" | "end" | "center" | "baseline" | "stretch" | undefined;
+    alignItemsSm?: "start" | "end" | "center" | "baseline" | "stretch" | undefined;
+    alignItemsMd?: "start" | "end" | "center" | "baseline" | "stretch" | undefined;
+    alignItemsLg?: "start" | "end" | "center" | "baseline" | "stretch" | undefined;
+    alignItemsXl?: "start" | "end" | "center" | "baseline" | "stretch" | undefined;
+    justifyContent?: "start" | "end" | "center" | "between" | "around" | undefined;
+    justifyContentXs?: "start" | "end" | "center" | "between" | "around" | undefined;
+    justifyContentSm?: "start" | "end" | "center" | "between" | "around" | undefined;
+    justifyContentMd?: "start" | "end" | "center" | "between" | "around" | undefined;
+    justifyContentLg?: "start" | "end" | "center" | "between" | "around" | undefined;
+    justifyContentXl?: "start" | "end" | "center" | "between" | "around" | undefined;
     wrap?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
     wrapXs?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
     wrapSm?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
@@ -33,7 +33,7 @@ export declare const Row: import("styled-components").IStyledComponent<"web", {
     accessKey?: string | undefined;
     autoFocus?: boolean | undefined;
     className?: string | undefined;
-    contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
+    contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
     contextMenu?: string | undefined;
     dir?: string | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
@@ -73,7 +73,7 @@ export declare const Row: import("styled-components").IStyledComponent<"web", {
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "search" | "text" | "email" | "tel" | "url" | "none" | "numeric" | "decimal" | undefined;
+    inputMode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     "aria-activedescendant"?: string | undefined;
     "aria-atomic"?: (boolean | "true" | "false") | undefined;
@@ -84,16 +84,16 @@ export declare const Row: import("styled-components").IStyledComponent<"web", {
     "aria-colindex"?: number | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "time" | "date" | "true" | "false" | "page" | "step" | "location" | undefined;
+    "aria-current"?: boolean | "true" | "false" | "page" | "step" | "location" | "date" | "time" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-details"?: string | undefined;
     "aria-disabled"?: (boolean | "true" | "false") | undefined;
-    "aria-dropeffect"?: "link" | "copy" | "none" | "execute" | "move" | "popup" | undefined;
+    "aria-dropeffect"?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
     "aria-errormessage"?: string | undefined;
     "aria-expanded"?: (boolean | "true" | "false") | undefined;
     "aria-flowto"?: string | undefined;
     "aria-grabbed"?: (boolean | "true" | "false") | undefined;
-    "aria-haspopup"?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
+    "aria-haspopup"?: boolean | "true" | "false" | "dialog" | "grid" | "listbox" | "menu" | "tree" | undefined;
     "aria-hidden"?: (boolean | "true" | "false") | undefined;
     "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
     "aria-keyshortcuts"?: string | undefined;
@@ -299,18 +299,18 @@ export declare const Col: import("styled-components").IStyledComponent<"web", {
     md?: string | number | boolean | undefined;
     lg?: string | number | boolean | undefined;
     xl?: string | number | boolean | undefined;
-    alignSelf?: "center" | "auto" | "start" | "end" | "baseline" | "stretch" | undefined;
-    alignSelfXs?: "center" | "auto" | "start" | "end" | "baseline" | "stretch" | undefined;
-    alignSelfSm?: "center" | "auto" | "start" | "end" | "baseline" | "stretch" | undefined;
-    alignSelfMd?: "center" | "auto" | "start" | "end" | "baseline" | "stretch" | undefined;
-    alignSelfLg?: "center" | "auto" | "start" | "end" | "baseline" | "stretch" | undefined;
-    alignSelfXl?: "center" | "auto" | "start" | "end" | "baseline" | "stretch" | undefined;
-    textAlign?: "center" | "start" | "end" | "justify" | undefined;
-    textAlignXs?: "center" | "start" | "end" | "justify" | undefined;
-    textAlignSm?: "center" | "start" | "end" | "justify" | undefined;
-    textAlignMd?: "center" | "start" | "end" | "justify" | undefined;
-    textAlignLg?: "center" | "start" | "end" | "justify" | undefined;
-    textAlignXl?: "center" | "start" | "end" | "justify" | undefined;
+    alignSelf?: "start" | "end" | "center" | "auto" | "baseline" | "stretch" | undefined;
+    alignSelfXs?: "start" | "end" | "center" | "auto" | "baseline" | "stretch" | undefined;
+    alignSelfSm?: "start" | "end" | "center" | "auto" | "baseline" | "stretch" | undefined;
+    alignSelfMd?: "start" | "end" | "center" | "auto" | "baseline" | "stretch" | undefined;
+    alignSelfLg?: "start" | "end" | "center" | "auto" | "baseline" | "stretch" | undefined;
+    alignSelfXl?: "start" | "end" | "center" | "auto" | "baseline" | "stretch" | undefined;
+    textAlign?: "start" | "end" | "center" | "justify" | undefined;
+    textAlignXs?: "start" | "end" | "center" | "justify" | undefined;
+    textAlignSm?: "start" | "end" | "center" | "justify" | undefined;
+    textAlignMd?: "start" | "end" | "center" | "justify" | undefined;
+    textAlignLg?: "start" | "end" | "center" | "justify" | undefined;
+    textAlignXl?: "start" | "end" | "center" | "justify" | undefined;
     offset?: string | number | undefined;
     offsetXs?: string | number | undefined;
     offsetSm?: string | number | undefined;
@@ -330,7 +330,7 @@ export declare const Col: import("styled-components").IStyledComponent<"web", {
     accessKey?: string | undefined;
     autoFocus?: boolean | undefined;
     className?: string | undefined;
-    contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
+    contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
     contextMenu?: string | undefined;
     dir?: string | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
@@ -370,7 +370,7 @@ export declare const Col: import("styled-components").IStyledComponent<"web", {
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "search" | "text" | "email" | "tel" | "url" | "none" | "numeric" | "decimal" | undefined;
+    inputMode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     "aria-activedescendant"?: string | undefined;
     "aria-atomic"?: (boolean | "true" | "false") | undefined;
@@ -381,16 +381,16 @@ export declare const Col: import("styled-components").IStyledComponent<"web", {
     "aria-colindex"?: number | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "time" | "date" | "true" | "false" | "page" | "step" | "location" | undefined;
+    "aria-current"?: boolean | "true" | "false" | "page" | "step" | "location" | "date" | "time" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-details"?: string | undefined;
     "aria-disabled"?: (boolean | "true" | "false") | undefined;
-    "aria-dropeffect"?: "link" | "copy" | "none" | "execute" | "move" | "popup" | undefined;
+    "aria-dropeffect"?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
     "aria-errormessage"?: string | undefined;
     "aria-expanded"?: (boolean | "true" | "false") | undefined;
     "aria-flowto"?: string | undefined;
     "aria-grabbed"?: (boolean | "true" | "false") | undefined;
-    "aria-haspopup"?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
+    "aria-haspopup"?: boolean | "true" | "false" | "dialog" | "grid" | "listbox" | "menu" | "tree" | undefined;
     "aria-hidden"?: (boolean | "true" | "false") | undefined;
     "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
     "aria-keyshortcuts"?: string | undefined;
@@ -600,7 +600,7 @@ export declare const MD: import("styled-components").IStyledComponent<"web", {
     accessKey?: string | undefined;
     autoFocus?: boolean | undefined;
     className?: string | undefined;
-    contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
+    contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
     contextMenu?: string | undefined;
     dir?: string | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
@@ -640,7 +640,7 @@ export declare const MD: import("styled-components").IStyledComponent<"web", {
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "search" | "text" | "email" | "tel" | "url" | "none" | "numeric" | "decimal" | undefined;
+    inputMode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     "aria-activedescendant"?: string | undefined;
     "aria-atomic"?: (boolean | "true" | "false") | undefined;
@@ -651,16 +651,16 @@ export declare const MD: import("styled-components").IStyledComponent<"web", {
     "aria-colindex"?: number | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "time" | "date" | "true" | "false" | "page" | "step" | "location" | undefined;
+    "aria-current"?: boolean | "true" | "false" | "page" | "step" | "location" | "date" | "time" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-details"?: string | undefined;
     "aria-disabled"?: (boolean | "true" | "false") | undefined;
-    "aria-dropeffect"?: "link" | "copy" | "none" | "execute" | "move" | "popup" | undefined;
+    "aria-dropeffect"?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
     "aria-errormessage"?: string | undefined;
     "aria-expanded"?: (boolean | "true" | "false") | undefined;
     "aria-flowto"?: string | undefined;
     "aria-grabbed"?: (boolean | "true" | "false") | undefined;
-    "aria-haspopup"?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
+    "aria-haspopup"?: boolean | "true" | "false" | "dialog" | "grid" | "listbox" | "menu" | "tree" | undefined;
     "aria-hidden"?: (boolean | "true" | "false") | undefined;
     "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
     "aria-keyshortcuts"?: string | undefined;

package/build/stories/highlight/_types.d.ts

@@ -1,4 +1,6 @@
 import { ISpanProps } from "@zendeskgarden/react-typography";
+import { ReactNode } from "react";
+import { IBookmark } from "../player/_types";
 export interface HighlightArgs {
     /**
      * Applies a font color. Use [PALETTE](/components/palette#palette) colors
@@ -20,11 +22,7 @@ export interface HighlightArgs {
     }) => void;
     search?: string;
 }
-export interface Observation {
-    id: number;
-    start: number;
-    end: number;
-    backgroundColor?: string;
+export interface Observation extends Omit<IBookmark, "onClick"> {
     color?: string;
 }
 export interface WordProps extends ISpanProps {
@@ -35,4 +33,5 @@ export interface WordProps extends ISpanProps {
     text: string;
     /** Adjusts the font size. By default font size is medium */
     size?: "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl";
+    tooltipContent?: (observation: Observation) => ReactNode;
 }

package/build/stories/highlight/demo-parts/data.d.ts

@@ -0,0 +1,49 @@
+export declare const DemoTranscript: {
+    metadata: {
+        transaction_key: string;
+        request_id: string;
+        sha256: string;
+        created: string;
+        duration: number;
+        channels: number;
+        models: string[];
+        model_info: {
+            "4accafca-a091-473d-8241-f5a847cb5766": {
+                name: string;
+                version: string;
+                arch: string;
+            };
+        };
+    };
+    results: {
+        channels: {
+            alternatives: {
+                transcript: string;
+                confidence: number;
+                words: {
+                    word: string;
+                    start: number;
+                    end: number;
+                    confidence: number;
+                    speaker: number;
+                    speaker_confidence: number;
+                    punctuated_word: string;
+                }[];
+                paragraphs: {
+                    transcript: string;
+                    paragraphs: {
+                        sentences: {
+                            text: string;
+                            start: number;
+                            end: number;
+                        }[];
+                        speaker: number;
+                        num_words: number;
+                        start: number;
+                        end: number;
+                    }[];
+                };
+            }[];
+        }[];
+    };
+};

package/build/stories/highlight/demo-parts/transcript-base.d.ts

@@ -0,0 +1,5 @@
+import { StoryArgs } from "../index.stories";
+export declare const Transcript: (args: StoryArgs & {
+    currentTime: number;
+    offset: number;
+}) => import("react/jsx-runtime").JSX.Element;

package/build/stories/highlight/demo-parts/transcript-diarization.d.ts

@@ -0,0 +1,5 @@
+import { StoryArgs } from "../index.stories";
+export declare const TDiarization: (args: StoryArgs & {
+    currentTime: number;
+    offset: number;
+}) => import("react/jsx-runtime").JSX.Element;

package/build/stories/highlight/demo-parts/transcript-paragraph.d.ts

@@ -0,0 +1,5 @@
+import { StoryArgs } from "../index.stories";
+export declare const TParagraph: (args: StoryArgs & {
+    currentTime: number;
+    offset: number;
+}) => import("react/jsx-runtime").JSX.Element;

package/build/stories/highlight/index.stories.d.ts

@@ -1,17 +1,16 @@
-import { HighlightArgs } from "./_types";
-interface StoryArgs extends HighlightArgs {
-    words: {
-        start: number;
-        end: number;
-        word: string;
+import { HighlightArgs, WordProps } from "./_types";
+export interface StoryArgs extends HighlightArgs {
+    words: Array<WordProps & {
         speaker: number;
-    }[];
+    }>;
     currentTime: number;
     includeSearch?: boolean;
 }
 export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, StoryArgs>;
 export declare const VideoSync: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, StoryArgs>;
 export declare const WithSearch: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, StoryArgs>;
+export declare const WithTooltip: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, StoryArgs>;
+export declare const Demo: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, StoryArgs>;
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, HighlightArgs & {
     children?: import("react").ReactNode;
 }>;

package/build/stories/tooltip/_types.d.ts

@@ -1,3 +1,4 @@
 import { ITooltipProps } from "@zendeskgarden/react-tooltips";
 export interface TooltipArgs extends ITooltipProps {
+    isTransparent?: boolean;
 }

package/build/stories/tooltip/index.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { TooltipArgs } from "./_types";
 declare const Tooltip: import("styled-components").IStyledComponent<"web", {
+    isTransparent?: boolean | undefined;
     appendToNode?: Element | undefined;
     hasArrow?: boolean | undefined;
     delayMS?: number | undefined;

package/build/stories/tooltip/index.stories.d.ts

@@ -1,4 +1,5 @@
 import { TooltipArgs } from "./_types";
 export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, TooltipArgs>;
+export declare const Transparent: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, TooltipArgs>;
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, TooltipArgs>;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appquality/unguess-design-system",
-  "version": "3.1.88",
+  "version": "3.1.89-tooltip",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",