@appquality/unguess-design-system 3.1.99 → 3.1.100

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# v3.1.100 (Tue Jun 11 2024)
+
+#### 🐛 Bug Fix
+
+- Improved transcript + player [#391](https://github.com/AppQuality/unguess-design-system/pull/391) ([@marcbon](https://github.com/marcbon))
+- Fix-transcript-obs-button [#388](https://github.com/AppQuality/unguess-design-system/pull/388) ([@marcbon](https://github.com/marcbon))
+- 🩹 fix(controls.tsx, floatingControls.tsx): adjust height to 80px for better [#390](https://github.com/AppQuality/unguess-design-system/pull/390) ([@marcbon](https://github.com/marcbon))
+
+#### Authors: 1
+
+- Marco Bonomo ([@marcbon](https://github.com/marcbon))
+
+---
+
 # v3.1.99 (Mon Jun 10 2024)
 
 #### 🐛 Bug Fix

package/build/index.js

@@ -4500,6 +4500,7 @@ const ControlsWrapper = styled__default["default"].div `
   right: 0;
   padding: ${({ theme }) => theme.space.xxs} 0;
   background-color: ${({ theme }) => theme.palette.grey[100]};
+  height: 80px;
   ${({ isPlaying }) => isPlaying && "display: none;"}
   z-index: 2;
 `;
@@ -4640,6 +4641,7 @@ const FloatingContainer = styled__default["default"].div `
   right: 0;
   ${({ isPlaying }) => isPlaying && "display: none;"}
   z-index: 1;
+  height: calc(100% - 80px);
 `;
 const PlayIcon = styled__default["default"](SvgPlayIcon) ``;
 const BigButton = styled__default["default"](IconButton) `
@@ -5638,10 +5640,12 @@ const CreateObservationButton = styled.styled(Button) `
 `;
 
 const StyledWord = styled__default["default"].div `
-  display: inline;
+  display: inline-block;
   font-size: ${({ theme, size }) => theme.fontSizes[size !== null && size !== void 0 ? size : "md"]};
   padding: ${({ theme }) => theme.space.xxs} 0;
   position: relative;
+  color: ${({ theme }) => theme.palette.grey[700]};
+  white-space: pre;
 
   ${({ observations, theme }) => {
     var _a;
@@ -5650,6 +5654,7 @@ const StyledWord = styled__default["default"].div `
       color: ${(_a = observations[observations.length - 1].color) !== null && _a !== void 0 ? _a : theme.palette.grey[600]};
       box-sizing: border-box;
       font-weight: ${theme.fontWeights.semibold};
+      z-index: 1;
 
       &:focus {
         outline: none;
@@ -5658,13 +5663,15 @@ const StyledWord = styled__default["default"].div `
 }}
 `;
 const ActiveWord = styled__default["default"].span `
+  position: relative;
+  z-index: 2;
   background-color: ${({ theme }) => getColor(theme.palette.fuschia, 400, undefined, 0.4)};
 `;
 const WordsContainer = styled__default["default"].div `
   box-sizing: border-box;
   ${StyledWord}, span {
     &::selection {
-      background-color: ${({ theme }) => getColor(theme.palette.kale, 700, undefined, 0.5)};
+      background-color: ${({ theme }) => getColor(theme.palette.grey, 400, undefined, 0.5)};
     }
   }
 `;
@@ -5682,7 +5689,7 @@ const Layer = styled__default["default"].div `
  */
 const Highlight = (props) => {
     var _a;
-    const { onSelectionButtonClick, search, i18n } = props;
+    const { onSelectionButtonClick, search, i18n, children } = props;
     const ref = React.useRef(null);
     const [isSelecting, setIsSelecting] = React.useState(false);
     const [position, setPosition] = React.useState();
@@ -5704,7 +5711,7 @@ const Highlight = (props) => {
         return filteredText.length ? filteredText.trim() : selection.toString();
     };
     const handleSelectionChange = React.useCallback(() => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         if (activeSelection && activeSelection.toString().length > 0) {
             // Extract the text from the selection cleaning unselectable items
             const text = extractText(activeSelection);
@@ -5717,7 +5724,7 @@ const Highlight = (props) => {
                 ((_c = ref.current) === null || _c === void 0 ? void 0 : _c.contains(anchorNode)) && // Selection starts inside the ref
                 ((_d = ref.current) === null || _d === void 0 ? void 0 : _d.contains(focusNode)) // Selection ends inside the ref
             ) {
-                if (props === null || props === void 0 ? void 0 : props.onSelectionButtonClick) {
+                if (onSelectionButtonClick) {
                     setIsSelecting(true);
                     const range = activeSelection.getRangeAt(0);
                     const rects = range.getClientRects();
@@ -5743,7 +5750,6 @@ const Highlight = (props) => {
                     from: Math.min(Number.parseFloat((_e = anchorNode.getAttribute("data-start")) !== null && _e !== void 0 ? _e : "0"), Number.parseFloat((_f = focusNode.getAttribute("data-start")) !== null && _f !== void 0 ? _f : "0")),
                     to: Math.max(Number.parseFloat((_g = anchorNode.getAttribute("data-end")) !== null && _g !== void 0 ? _g : "0"), Number.parseFloat((_h = focusNode.getAttribute("data-end")) !== null && _h !== void 0 ? _h : "0")),
                 };
-                (_j = props === null || props === void 0 ? void 0 : props.handleSelection) === null || _j === void 0 ? void 0 : _j.call(props, Object.assign(Object.assign({}, selectionPart), { text }));
                 setSelection(Object.assign(Object.assign({}, selectionPart), { text }));
             }
             else {
@@ -5753,7 +5759,7 @@ const Highlight = (props) => {
         else {
             setIsSelecting(false);
         }
-    }, [props, activeSelection]);
+    }, [onSelectionButtonClick, activeSelection]);
     React.useEffect(() => {
         if (ref.current === null)
             return;
@@ -5762,10 +5768,10 @@ const Highlight = (props) => {
             document.removeEventListener("selectionchange", handleSelectionChange);
         };
     }, [ref, props, handleSelectionChange]);
-    return (jsxRuntime.jsxs(HighlightContextProvider, Object.assign({ term: search }, { children: [jsxRuntime.jsx(WordsContainer, Object.assign({ ref: ref }, { children: props.children })), isSelecting && (jsxRuntime.jsxs(CreateObservationButton, Object.assign({ isAccent: true, isPrimary: true, position: position !== null && position !== void 0 ? position : {
+    return (jsxRuntime.jsxs(HighlightContextProvider, Object.assign({ term: search }, { children: [jsxRuntime.jsx(WordsContainer, Object.assign({ ref: ref }, { children: children })), onSelectionButtonClick && isSelecting && selection && (jsxRuntime.jsxs(CreateObservationButton, Object.assign({ isAccent: true, isPrimary: true, position: position !== null && position !== void 0 ? position : {
                     x: 0,
                     y: 0,
-                } }, (onSelectionButtonClick && selection && { onClick: () => onSelectionButtonClick(selection) }), { children: [jsxRuntime.jsx(CreateObservationButton.StartIcon, { children: jsxRuntime.jsx(SvgTagStroke, {}) }), (_a = i18n === null || i18n === void 0 ? void 0 : i18n.selectionButtonLabel) !== null && _a !== void 0 ? _a : "Create observation"] })))] })));
+                }, onClick: () => onSelectionButtonClick(selection) }, { children: [jsxRuntime.jsx(CreateObservationButton.StartIcon, { children: jsxRuntime.jsx(SvgTagStroke, {}) }), (_a = i18n === null || i18n === void 0 ? void 0 : i18n.selectionButtonLabel) !== null && _a !== void 0 ? _a : "Create observation"] })))] })));
 };
 const Word = (props) => {
     const isActive = props.currentTime &&
@@ -5779,7 +5785,7 @@ const Word = (props) => {
     const ObsWord = React.useMemo(() => (jsxRuntime.jsxs(StyledWord, Object.assign({}, props, { "data-start": props.start, "data-end": props.end, className: foundObservations.length > 0 ? "highlighted" : "" }, (foundObservations && { observations: foundObservations }), { children: [foundObservations.length > 0 && foundObservations.map((obs) => {
                 var _a;
                 return (jsxRuntime.jsx(Layer, { color: (_a = obs.hue) !== null && _a !== void 0 ? _a : theme.palette.grey[600] }, obs.id));
-            }), isActive ? (jsxRuntime.jsx(ActiveWord, { children: jsxRuntime.jsx(Searchable, { text: props.text }) })) : (jsxRuntime.jsx(Searchable, { text: props.text })), " "] }))), [props, foundObservations, isActive]);
+            }), isActive ? (jsxRuntime.jsx(ActiveWord, Object.assign({ "data-start": props.start, "data-end": props.end }, { children: jsxRuntime.jsx(Searchable, { text: props.text }) }))) : (jsxRuntime.jsx(Searchable, { text: props.text })), " "] }))), [props, foundObservations, isActive]);
     if (props.tooltipContent !== undefined && foundObservations.length > 0) {
         return (jsxRuntime.jsx(Tooltip, Object.assign({ content: props.tooltipContent(foundObservations), isTransparent: true }, { children: ObsWord })));
     }

package/build/stories/buttons/button/index.stories.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ButtonArgs } from "./_types";
 export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ButtonArgs>;
 export declare const Basic: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ButtonArgs>;

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?: "start" | "center" | "end" | "baseline" | "stretch" | undefined;
-    alignItemsXs?: "start" | "center" | "end" | "baseline" | "stretch" | undefined;
-    alignItemsSm?: "start" | "center" | "end" | "baseline" | "stretch" | undefined;
-    alignItemsMd?: "start" | "center" | "end" | "baseline" | "stretch" | undefined;
-    alignItemsLg?: "start" | "center" | "end" | "baseline" | "stretch" | undefined;
-    alignItemsXl?: "start" | "center" | "end" | "baseline" | "stretch" | undefined;
-    justifyContent?: "start" | "center" | "end" | "between" | "around" | undefined;
-    justifyContentXs?: "start" | "center" | "end" | "between" | "around" | undefined;
-    justifyContentSm?: "start" | "center" | "end" | "between" | "around" | undefined;
-    justifyContentMd?: "start" | "center" | "end" | "between" | "around" | undefined;
-    justifyContentLg?: "start" | "center" | "end" | "between" | "around" | undefined;
-    justifyContentXl?: "start" | "center" | "end" | "between" | "around" | undefined;
+    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;
     wrap?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
     wrapXs?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
     wrapSm?: "wrap" | "nowrap" | "wrap-reverse" | 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?: "decimal" | "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | undefined;
+    inputMode?: "text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     "aria-activedescendant"?: string | undefined;
     "aria-atomic"?: (boolean | "true" | "false") | undefined;
@@ -84,7 +84,7 @@ export declare const Row: import("styled-components").IStyledComponent<"web", {
     "aria-colindex"?: number | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "true" | "false" | "page" | "step" | "location" | "date" | "time" | undefined;
+    "aria-current"?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-details"?: string | undefined;
     "aria-disabled"?: (boolean | "true" | "false") | undefined;
@@ -93,7 +93,7 @@ export declare const Row: import("styled-components").IStyledComponent<"web", {
     "aria-expanded"?: (boolean | "true" | "false") | undefined;
     "aria-flowto"?: string | undefined;
     "aria-grabbed"?: (boolean | "true" | "false") | undefined;
-    "aria-haspopup"?: boolean | "true" | "false" | "dialog" | "grid" | "listbox" | "menu" | "tree" | undefined;
+    "aria-haspopup"?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "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?: "start" | "center" | "end" | "baseline" | "stretch" | "auto" | undefined;
-    alignSelfXs?: "start" | "center" | "end" | "baseline" | "stretch" | "auto" | undefined;
-    alignSelfSm?: "start" | "center" | "end" | "baseline" | "stretch" | "auto" | undefined;
-    alignSelfMd?: "start" | "center" | "end" | "baseline" | "stretch" | "auto" | undefined;
-    alignSelfLg?: "start" | "center" | "end" | "baseline" | "stretch" | "auto" | undefined;
-    alignSelfXl?: "start" | "center" | "end" | "baseline" | "stretch" | "auto" | undefined;
-    textAlign?: "start" | "center" | "end" | "justify" | undefined;
-    textAlignXs?: "start" | "center" | "end" | "justify" | undefined;
-    textAlignSm?: "start" | "center" | "end" | "justify" | undefined;
-    textAlignMd?: "start" | "center" | "end" | "justify" | undefined;
-    textAlignLg?: "start" | "center" | "end" | "justify" | undefined;
-    textAlignXl?: "start" | "center" | "end" | "justify" | 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;
     offset?: string | number | undefined;
     offsetXs?: string | number | undefined;
     offsetSm?: string | number | 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?: "decimal" | "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | undefined;
+    inputMode?: "text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     "aria-activedescendant"?: string | undefined;
     "aria-atomic"?: (boolean | "true" | "false") | undefined;
@@ -381,7 +381,7 @@ export declare const Col: import("styled-components").IStyledComponent<"web", {
     "aria-colindex"?: number | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "true" | "false" | "page" | "step" | "location" | "date" | "time" | undefined;
+    "aria-current"?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-details"?: string | undefined;
     "aria-disabled"?: (boolean | "true" | "false") | undefined;
@@ -390,7 +390,7 @@ export declare const Col: import("styled-components").IStyledComponent<"web", {
     "aria-expanded"?: (boolean | "true" | "false") | undefined;
     "aria-flowto"?: string | undefined;
     "aria-grabbed"?: (boolean | "true" | "false") | undefined;
-    "aria-haspopup"?: boolean | "true" | "false" | "dialog" | "grid" | "listbox" | "menu" | "tree" | undefined;
+    "aria-haspopup"?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
     "aria-hidden"?: (boolean | "true" | "false") | undefined;
     "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
     "aria-keyshortcuts"?: string | 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?: "decimal" | "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | undefined;
+    inputMode?: "text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     "aria-activedescendant"?: string | undefined;
     "aria-atomic"?: (boolean | "true" | "false") | undefined;
@@ -651,7 +651,7 @@ export declare const MD: import("styled-components").IStyledComponent<"web", {
     "aria-colindex"?: number | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "true" | "false" | "page" | "step" | "location" | "date" | "time" | undefined;
+    "aria-current"?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-details"?: string | undefined;
     "aria-disabled"?: (boolean | "true" | "false") | undefined;
@@ -660,7 +660,7 @@ export declare const MD: import("styled-components").IStyledComponent<"web", {
     "aria-expanded"?: (boolean | "true" | "false") | undefined;
     "aria-flowto"?: string | undefined;
     "aria-grabbed"?: (boolean | "true" | "false") | undefined;
-    "aria-haspopup"?: boolean | "true" | "false" | "dialog" | "grid" | "listbox" | "menu" | "tree" | undefined;
+    "aria-haspopup"?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
     "aria-hidden"?: (boolean | "true" | "false") | undefined;
     "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
     "aria-keyshortcuts"?: string | undefined;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { PlaceholderOptions } from "@tiptap/extension-placeholder";
 import { Editor as TipTapEditor } from "@tiptap/react";
 import { ChatEditorArgs, CommentMedia, SuggestedUser } from "./_types";

package/build/stories/dropdowns/select/index.stories.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { DropdownArgs, SelectArgs } from "./_types";
 import { MenuArgs } from "../menu/_types";
 interface IItem {

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { EditorArgs } from "./_types";
 interface EditorStoryArgs extends EditorArgs {
     children?: any;

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

@@ -15,11 +15,6 @@ export interface HighlightArgs {
     isMonospace?: boolean;
     /** Adjusts the font size. By default font size is medium */
     size?: "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl";
-    handleSelection?: (part: {
-        from: number;
-        to: number;
-        text: string;
-    }) => void;
     search?: string;
     onSelectionButtonClick?: (part: {
         from: number;

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

@@ -8,9 +8,9 @@ export interface StoryArgs extends HighlightArgs {
 }
 export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, StoryArgs>;
 export declare const WithSelectionButton: 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 WithSearch: 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 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/player/index.stories.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { PlayerArgs } from "./_types";
 interface PlayerStoryArgs extends PlayerArgs {
 }

package/package.json

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