@seeqdev/qomponents 0.0.78 → 0.0.79

package/dist/Tooltip/Tooltip.stories.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Tooltip } from './Tooltip';
+import Icon from '../Icon';
+import Button from '../Button';
+import { tooltipPositions } from './Tooltip.types';
+export default {
+    title: 'Tooltip',
+};
+export const AllTooltips = () => {
+    const renderButtonsWithTooltip = () => tooltipPositions.map((position) => (React.createElement("div", { key: `${position}_button` },
+        React.createElement(Tooltip, { text: `Tooltip on the ${position}`, position: position },
+            React.createElement(Button, { label: position })))));
+    const renderIconsWithHtmlTooltip = () => tooltipPositions.map((position) => (React.createElement("div", { key: `${position}_icon` },
+        React.createElement(Tooltip, { text: React.createElement("div", null,
+                React.createElement("h2", null, "Fancy Tooltip"),
+                " This is a special tooltip. Why?",
+                React.createElement("br", null),
+                "Because it supports ",
+                React.createElement("b", null, "HTML!")), position: position },
+            React.createElement(Icon, { icon: "fc-sun" })))));
+    const renderTextTooltipOnText = () => tooltipPositions.map((position) => (React.createElement("div", { key: `${position}_text` },
+        React.createElement(Tooltip, { text: "Helpful information provided here", position: position },
+            React.createElement("span", null,
+                "Hover for Tooltip (on the ",
+                position,
+                ")")))));
+    return (React.createElement("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4 tw-text-center" },
+        renderButtonsWithTooltip(),
+        renderIconsWithHtmlTooltip(),
+        renderTextTooltipOnText()));
+};
+//# sourceMappingURL=Tooltip.stories.js.map

package/dist/Tooltip/Tooltip.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.stories.js","sourceRoot":"","sources":["../../src/Tooltip/Tooltip.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAEnD,eAAe;IACb,KAAK,EAAE,SAAS;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,EAAE;IAC9B,MAAM,wBAAwB,GAAG,GAAG,EAAE,CACpC,gBAAgB,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CACjC,6BAAK,GAAG,EAAE,GAAG,QAAQ,SAAS;QAC5B,oBAAC,OAAO,IAAC,IAAI,EAAE,kBAAkB,QAAQ,EAAE,EAAE,QAAQ,EAAE,QAAQ;YAC7D,oBAAC,MAAM,IAAC,KAAK,EAAE,QAAQ,GAAI,CACnB,CACN,CACP,CAAC,CAAC;IAEL,MAAM,0BAA0B,GAAG,GAAG,EAAE,CACtC,gBAAgB,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CACjC,6BAAK,GAAG,EAAE,GAAG,QAAQ,OAAO;QAC1B,oBAAC,OAAO,IACN,IAAI,EACF;gBACE,gDAAsB;;gBACtB,+BAAM;;gBACc,uCAAY,CAC5B,EAER,QAAQ,EAAE,QAAQ;YAClB,oBAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,GAAG,CACd,CACN,CACP,CAAC,CAAC;IAEL,MAAM,uBAAuB,GAAG,GAAG,EAAE,CACnC,gBAAgB,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CACjC,6BAAK,GAAG,EAAE,GAAG,QAAQ,OAAO;QAC1B,oBAAC,OAAO,IAAC,IAAI,EAAC,mCAAmC,EAAC,QAAQ,EAAE,QAAQ;YAClE;;gBAAiC,QAAQ;oBAAS,CAC1C,CACN,CACP,CAAC,CAAC;IAEL,OAAO,CACL,6BAAK,SAAS,EAAC,gDAAgD;QAC5D,wBAAwB,EAAE;QAC1B,0BAA0B,EAAE;QAC5B,uBAAuB,EAAE,CACtB,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/Tooltip/Tooltip.types.js

@@ -0,0 +1,3 @@
+export const DEFAULT_TOOL_TIP_DELAY = 500;
+export const tooltipPositions = ['top', 'left', 'right', 'bottom'];
+//# sourceMappingURL=Tooltip.types.js.map

package/dist/Tooltip/Tooltip.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.types.js","sourceRoot":"","sources":["../../src/Tooltip/Tooltip.types.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAC;AAC1C,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,CAAU,CAAC"}

package/dist/Tooltip/TooltipPerformance.stories.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Tooltip } from './Tooltip';
+import Icon from '../Icon';
+export default {
+    title: 'Tooltip',
+};
+const renderManyTooltips = () => {
+    const colsCount = 100;
+    const rowCount = 100;
+    const rows = [];
+    const getCols = (rowId) => {
+        const cols = [];
+        for (let i = 0; i < colsCount; i++) {
+            cols.push(React.createElement("td", { key: 'col_' + i + '_row_' + rowId },
+                React.createElement(Tooltip, { text: `hello there ${i}` },
+                    React.createElement(Icon, { icon: "fc-sun" }))));
+        }
+        return cols;
+    };
+    for (let i = 0; i < rowCount; i++) {
+        rows.push(React.createElement("tr", { key: 'row_' + i }, ...getCols(i)));
+    }
+    return (React.createElement("table", null,
+        React.createElement("tbody", null, rows.map((row) => row))));
+};
+export const TooltipPerformance = () => {
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4 tw-text-center" }, renderManyTooltips())));
+};
+//# sourceMappingURL=TooltipPerformance.stories.js.map

package/dist/Tooltip/TooltipPerformance.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipPerformance.stories.js","sourceRoot":"","sources":["../../src/Tooltip/TooltipPerformance.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,eAAe;IACb,KAAK,EAAE,SAAS;CACjB,CAAC;AAEF,MAAM,kBAAkB,GAAG,GAAG,EAAE;IAC9B,MAAM,SAAS,GAAG,GAAG,CAAC;IACtB,MAAM,QAAQ,GAAG,GAAG,CAAC;IACrB,MAAM,IAAI,GAAG,EAAE,CAAC;IAEhB,MAAM,OAAO,GAAG,CAAC,KAAa,EAAE,EAAE;QAChC,MAAM,IAAI,GAAG,EAAE,CAAC;QAChB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,SAAS,EAAE,CAAC,EAAE,EAAE;YAClC,IAAI,CAAC,IAAI,CACP,4BAAI,GAAG,EAAE,MAAM,GAAG,CAAC,GAAG,OAAO,GAAG,KAAK;gBACnC,oBAAC,OAAO,IAAC,IAAI,EAAE,eAAe,CAAC,EAAE;oBAC/B,oBAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,GAAG,CACd,CACP,CACN,CAAC;SACH;QACD,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;IAEF,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,EAAE,CAAC,EAAE,EAAE;QACjC,IAAI,CAAC,IAAI,CAAC,4BAAI,GAAG,EAAE,MAAM,GAAG,CAAC,OAAM,OAAO,CAAC,CAAC,CAAC,CAAM,CAAC,CAAC;KACtD;IACD,OAAO,CACL;QACE,mCAAQ,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,CAAS,CACjC,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,EAAE;IACrC,OAAO,CACL;QACE,6BAAK,SAAS,EAAC,gDAAgD,IAAE,kBAAkB,EAAE,CAAO,CAC3F,CACJ,CAAC;AACJ,CAAC,CAAC"}

package/dist/Tooltip/index.js

@@ -0,0 +1,3 @@
+export { Tooltip } from './Tooltip';
+export { QTip } from './Qtip';
+//# sourceMappingURL=index.js.map

package/dist/Tooltip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC"}

package/dist/Tooltip/qTip.utilities.js

@@ -0,0 +1,11 @@
+import { DEFAULT_TOOL_TIP_DELAY } from './Tooltip.types';
+export const getQTipData = ({ tooltip, tooltipPlacement, isHtmlTooltip, tooltipTestId, tooltipDelay = DEFAULT_TOOL_TIP_DELAY, }) => tooltip
+    ? {
+        'data-qtip-text': tooltip,
+        'data-qtip-placement': tooltipPlacement,
+        'data-qtip-is-html': isHtmlTooltip,
+        'data-qtip-testid': tooltipTestId,
+        'data-qtip-delay': tooltipDelay,
+    }
+    : undefined;
+//# sourceMappingURL=qTip.utilities.js.map

package/dist/Tooltip/qTip.utilities.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"qTip.utilities.js","sourceRoot":"","sources":["../../src/Tooltip/qTip.utilities.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,sBAAsB,EAAyB,MAAM,iBAAiB,CAAC;AAEhF,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAC1B,OAAO,EACP,gBAAgB,EAChB,aAAa,EACb,aAAa,EACb,YAAY,GAAG,sBAAsB,GACf,EAAkC,EAAE,CAC1D,OAAO;IACL,CAAC,CAAC;QACE,gBAAgB,EAAE,OAAO;QACzB,qBAAqB,EAAE,gBAAgB;QACvC,mBAAmB,EAAE,aAAa;QAClC,kBAAkB,EAAE,aAAa;QACjC,iBAAiB,EAAE,YAAY;KAChC;IACH,CAAC,CAAC,SAAS,CAAC"}

package/dist/index.esm.js

@@ -16086,6 +16086,27 @@ const ButtonWithDropdown = ({ dropdownItems, triggerIcon, id, extraClassNames, c
                 })))));
 };
 
+const NewWorkbenchItem = (item) => {
+    return (React__default.createElement("div", { className: "tw-flex-col tw-flex tw-p-[10px] tw-pl-5 tw-w-[600px]" },
+        React__default.createElement("div", { className: "tw-flex tw-flex-row tw-gap-2 tw-items-end" },
+            item.icon && (React__default.createElement(Icon, { icon: item.icon, type: "text", extraClassNames: 'tw-rounded-[3px] tw-h-8 tw-w-8 tw-flex tw-justify-center tw-items-center tw-bg-sq-color-dark dark:tw-text-sq-white tw-text-[22px] tw-text-sq-white ' +
+                    item.iconExtraClassNames })),
+            React__default.createElement("h4", { className: "tw-text-base tw-font-[600] tw-leading-[20px] mb-0" }, item.display)),
+        React__default.createElement("div", { className: "tw-text-[13px] tw-font-normal" }, item.text)));
+};
+const ViewWorkbench = (item) => {
+    return (React__default.createElement("div", { className: "tw-flex-col tw-flex tw-p-[10px]" },
+        React__default.createElement("div", { className: "tw-flex tw-flex-row tw-gap-2 tw-items-end" },
+            item.icon && (React__default.createElement(Icon, { icon: item.icon, type: "text", extraClassNames: 'tw-flex tw-justify-center tw-items-center tw-text-[20px] dark:tw-text-sq-white tw-text-sq-text-color ' +
+                    item.iconExtraClassNames })),
+            React__default.createElement("div", { className: "tw-text-[13px]" }, item.display))));
+};
+const InsertSeeqContent = (item) => {
+    return (React__default.createElement("div", { className: "tw-flex-col tw-flex tw-justify-start tw-p-[10px] tw-font-normal tw-text-left dark:tw-text-sq-white tw-text-sq-text-color" },
+        React__default.createElement("h5", { className: "tw-text-[15px] tw-leading-[18px]" }, item.display),
+        React__default.createElement("div", { className: "tw-text-[11px] tw-text-[#999] !tw-mt-1" }, item.text)));
+};
+
 const borderStyles = [
     'tw-border-solid',
     'tw-border',
@@ -16095,7 +16116,19 @@ const borderStyles = [
 ].join(' ');
 const bgStyles = ['tw-bg-sq-white', 'dark:tw-bg-sq-dark-background'].join(' ');
 const disabledClasses = ['tw-opacity-50', 'tw-cursor-not-allowed'].join(' ');
-const NewWorkbench = ({ newWorkbenchItems, trigger, id, extraClassNames, containerTestId, disabled = false, align = 'end', placement = 'bottom', placementOffset = 5, alignOffset = -35, hasArrow = false, onOpenChange, isOpen, setFocusOnTriggerOnClose = true, keepFocusInsideDropdown = true, ...tooltipProps }) => {
+const renderItem = (variant, item) => {
+    switch (variant) {
+        case 'create-workbench':
+            return React.createElement(NewWorkbenchItem, { ...item });
+        case 'view-workbench':
+            return React.createElement(ViewWorkbench, { ...item });
+        case 'insert-seeq-content':
+            return React.createElement(InsertSeeqContent, { ...item });
+        default:
+            return React.createElement(NewWorkbenchItem, { ...item });
+    }
+};
+const NewWorkbench = ({ newWorkbenchItems, trigger, id, extraClassNames, containerTestId, disabled = false, align = 'end', placement = 'bottom', placementOffset = 5, alignOffset = -35, hasArrow = false, onOpenChange, isOpen, setFocusOnTriggerOnClose = true, keepFocusInsideDropdown = true, variant, ...tooltipProps }) => {
     const tooltipData = getQTipData(tooltipProps);
     return (React.createElement($d08ef79370b62062$export$be92b6f5f03c0fe9, { defaultOpen: false, open: isOpen, onOpenChange: onOpenChange, modal: keepFocusInsideDropdown },
         React.createElement($d08ef79370b62062$export$41fb9f06171c75f4, { id: id, "data-testid": id, className: `tw-border-none focus-visible:tw-outline-none focus:tw-outline-none focus-within:tw-outline-none`, asChild: true, disabled: disabled },
@@ -16112,13 +16145,7 @@ const NewWorkbench = ({ newWorkbenchItems, trigger, id, extraClassNames, contain
                     return (React.createElement("div", { key: item.display + index },
                         React.createElement($d08ef79370b62062$export$6d08773d2e66f8f2, { onSelect: (e) => {
                                 item.action(e);
-                            }, className: `tw-cursor-pointer tw-flex dark:tw-text-sq-white hover:tw-bg-sq-gray-highlight dark:hover:tw-bg-sq-gray-highlight-dark tw-relative tw-select-none tw-outline-none data-[disabled]:tw-text-sq-disabled-gray data-[disabled]:tw-pointer-events-none`, "data-testid": item.testId, disabled: !item.enabled },
-                            React.createElement("div", { className: "tw-flex-col tw-flex tw-p-[10px] tw-pl-5 tw-w-[600px]" },
-                                React.createElement("div", { className: "tw-flex tw-flex-row tw-gap-2 tw-items-end" },
-                                    item.icon && (React.createElement(Icon, { icon: item.icon, type: "text", extraClassNames: 'tw-rounded-[3px] tw-h-8 tw-w-8 tw-flex tw-justify-center tw-items-center tw-bg-sq-color-dark dark:tw-text-sq-white tw-text-[22px] tw-text-sq-white ' +
-                                            item.iconExtraClassNames })),
-                                    React.createElement("h4", { className: "tw-text-base tw-font-[600] tw-leading-[20px] mb-0" }, item.display)),
-                                React.createElement("div", { className: "tw-text-[13px] tw-font-[400]" }, item.text))),
+                            }, className: `tw-cursor-pointer tw-flex dark:tw-text-sq-white hover:tw-bg-sq-gray-highlight dark:hover:tw-bg-sq-gray-highlight-dark tw-relative tw-select-none tw-outline-none data-[disabled]:tw-text-sq-disabled-gray data-[disabled]:tw-pointer-events-none`, "data-testid": item.testId, disabled: !item.enabled }, renderItem(variant, item)),
                         item.divider && (React.createElement($d08ef79370b62062$export$1ff3c3f08ae963c0, { "data-testid": `dropdown-divider-${index}`, className: "tw-h-[1px] tw-bg-sq-disabled-gray dark:tw-bg-gray-500 tw-my-[8px]" }))));
                 })))));
 };