@seeqdev/qomponents 0.0.78 → 0.0.80
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/dist/ButtonWithDropdown/ButtonWithDropdown.types.d.ts +0 -6
- package/dist/ButtonWithPopover/ButtonWithPopover.types.d.ts +0 -6
- package/dist/NewWorkbench/NewWorkbench.types.d.ts +1 -0
- package/dist/NewWorkbench/variants.d.ts +5 -0
- package/dist/index.esm.js +102 -51
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +102 -51
- package/dist/index.js.map +1 -1
- package/dist/styles.css +21 -4
- package/package.json +1 -1
|
@@ -31,8 +31,6 @@ interface DropdownItems {
|
|
|
31
31
|
isLabel?: boolean;
|
|
32
32
|
/** function called when the dropdown item is clicked on */
|
|
33
33
|
onClick: (e?: Event) => void;
|
|
34
|
-
/** dropdown subitem container classes */
|
|
35
|
-
itemContainerClasses?: string;
|
|
36
34
|
/** dropdown subitem label classes */
|
|
37
35
|
labelClasses?: string;
|
|
38
36
|
/** is item disabled */
|
|
@@ -65,8 +63,6 @@ export interface ButtonWithDropdownProps extends TooltipComponentProps {
|
|
|
65
63
|
containerTestId?: string;
|
|
66
64
|
/** is the button disabled */
|
|
67
65
|
disabled?: boolean;
|
|
68
|
-
/** function called when the trigger is clicked on, i.e. for tracking (does not open the popover) */
|
|
69
|
-
onClick?: (e: MouseEvent) => void;
|
|
70
66
|
/** alignment of the content of the popover */
|
|
71
67
|
align?: 'start' | 'center' | 'end';
|
|
72
68
|
/** number offset from the aligned position */
|
|
@@ -83,8 +79,6 @@ export interface ButtonWithDropdownProps extends TooltipComponentProps {
|
|
|
83
79
|
onOpenChange?: (isOpen: boolean) => void;
|
|
84
80
|
/** sets focus on the trigger button after the dropdown is closed */
|
|
85
81
|
setFocusOnTriggerOnClose?: boolean;
|
|
86
|
-
/** should popover close when the content is clicked? */
|
|
87
|
-
isCloseOnContentClick?: boolean;
|
|
88
82
|
/** focus should be kept within dropdown */
|
|
89
83
|
keepFocusInsideDropdown?: boolean;
|
|
90
84
|
}
|
|
@@ -6,15 +6,11 @@ export interface ButtonWithPopoverProps extends TooltipComponentProps {
|
|
|
6
6
|
/** items for the popover content */
|
|
7
7
|
children: React.ReactNode;
|
|
8
8
|
id?: string;
|
|
9
|
-
/** extra class names to be placed on the Popover container component */
|
|
10
|
-
extraClassNames?: string;
|
|
11
9
|
/** id that will be used in the data-testid attribute on the container element */
|
|
12
10
|
containerTestId?: string;
|
|
13
11
|
disabled?: boolean;
|
|
14
12
|
/** function called when the toolbar is clicked on, i.e. for tracking (does not open the popover) */
|
|
15
13
|
onClick?: (isOpen: boolean) => void;
|
|
16
|
-
/** called when popup is hidden */
|
|
17
|
-
onHide?: () => void;
|
|
18
14
|
/** alignment of the content of the popover */
|
|
19
15
|
align?: 'start' | 'center' | 'end';
|
|
20
16
|
/** number offset from the aligned position */
|
|
@@ -39,8 +35,6 @@ export interface ButtonWithPopoverProps extends TooltipComponentProps {
|
|
|
39
35
|
extraPopoverClassNames?: string;
|
|
40
36
|
/** should popover close when the content is clicked? */
|
|
41
37
|
isCloseOnContentClick?: boolean;
|
|
42
|
-
/** sets focus on the trigger button after the dropdown is closed */
|
|
43
|
-
setFocusOnTriggerOnClose?: boolean;
|
|
44
38
|
/** calls the function if click or focus happens outside popover content */
|
|
45
39
|
onInteractOutside?: () => void;
|
|
46
40
|
/** calls the function if pointer down happens outside popover content */
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { NewWorkbenchItems } from './NewWorkbench.types';
|
|
3
|
+
export declare const NewWorkbenchItem: React.FC<NewWorkbenchItems>;
|
|
4
|
+
export declare const ViewWorkbench: React.FC<NewWorkbenchItems>;
|
|
5
|
+
export declare const InsertSeeqContent: React.FC<NewWorkbenchItems>;
|
package/dist/index.esm.js
CHANGED
|
@@ -15013,7 +15013,7 @@ const borderStyles$2 = [
|
|
|
15013
15013
|
'dark:tw-border-gray-500',
|
|
15014
15014
|
].join(' ');
|
|
15015
15015
|
const disabledClasses$2 = ['tw-opacity-50', 'tw-cursor-not-allowed'].join(' ');
|
|
15016
|
-
const ButtonWithPopover = ({ children, trigger, id, hasArrow, extraTriggerClassNames, extraPopoverClassNames, containerTestId, onInteractOutside, onPointerDownOutside, isTriggerAsChild = false, shouldTriggerFullWidth = false, disabled = false, align = 'end', alignOffset = -35, placement = 'bottom', placementOffset = 2, isHoverEnabled = false, hoverOpenDelay = 300, onOpenChange, isOpen, isCloseOnContentClick = false,
|
|
15016
|
+
const ButtonWithPopover = ({ children, trigger, id, hasArrow, extraTriggerClassNames, extraPopoverClassNames, containerTestId, onInteractOutside, onPointerDownOutside, isTriggerAsChild = false, shouldTriggerFullWidth = false, disabled = false, align = 'end', alignOffset = -35, placement = 'bottom', placementOffset = 2, isHoverEnabled = false, hoverOpenDelay = 300, onOpenChange, isOpen, isCloseOnContentClick = false, isPortal = false, ...tooltipProps }) => {
|
|
15017
15017
|
const tooltipData = getQTipData(tooltipProps);
|
|
15018
15018
|
let timeout;
|
|
15019
15019
|
const [isHoveredOpen, setIsHoveredOpen] = React.useState(false);
|
|
@@ -15170,6 +15170,19 @@ const $6cc32821e9371a1c$export$9fa5ebd18bee4d43 = /*#__PURE__*/ forwardRef((prop
|
|
|
15170
15170
|
const [$6cc32821e9371a1c$var$PortalProvider, $6cc32821e9371a1c$var$usePortalContext] = $6cc32821e9371a1c$var$createMenuContext($6cc32821e9371a1c$var$PORTAL_NAME, {
|
|
15171
15171
|
forceMount: undefined
|
|
15172
15172
|
});
|
|
15173
|
+
const $6cc32821e9371a1c$export$793392f970497feb = (props)=>{
|
|
15174
|
+
const { __scopeMenu: __scopeMenu , forceMount: forceMount , children: children , container: container } = props;
|
|
15175
|
+
const context = $6cc32821e9371a1c$var$useMenuContext($6cc32821e9371a1c$var$PORTAL_NAME, __scopeMenu);
|
|
15176
|
+
return /*#__PURE__*/ createElement($6cc32821e9371a1c$var$PortalProvider, {
|
|
15177
|
+
scope: __scopeMenu,
|
|
15178
|
+
forceMount: forceMount
|
|
15179
|
+
}, /*#__PURE__*/ createElement($921a889cee6df7e8$export$99c2b779aa4e8b8b, {
|
|
15180
|
+
present: forceMount || context.open
|
|
15181
|
+
}, /*#__PURE__*/ createElement($f1701beae083dbae$export$602eac185826482c, {
|
|
15182
|
+
asChild: true,
|
|
15183
|
+
container: container
|
|
15184
|
+
}, children)));
|
|
15185
|
+
};
|
|
15173
15186
|
/* -------------------------------------------------------------------------------------------------
|
|
15174
15187
|
* MenuContent
|
|
15175
15188
|
* -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$CONTENT_NAME = 'MenuContent';
|
|
@@ -15825,6 +15838,7 @@ function $6cc32821e9371a1c$var$whenMouse(handler) {
|
|
|
15825
15838
|
}
|
|
15826
15839
|
const $6cc32821e9371a1c$export$be92b6f5f03c0fe9 = $6cc32821e9371a1c$export$d9b273488cd8ce6f;
|
|
15827
15840
|
const $6cc32821e9371a1c$export$b688253958b8dfe7 = $6cc32821e9371a1c$export$9fa5ebd18bee4d43;
|
|
15841
|
+
const $6cc32821e9371a1c$export$602eac185826482c = $6cc32821e9371a1c$export$793392f970497feb;
|
|
15828
15842
|
const $6cc32821e9371a1c$export$7c6e2c02157bb7d2 = $6cc32821e9371a1c$export$479f0f2f71193efe;
|
|
15829
15843
|
const $6cc32821e9371a1c$export$b04be29aa201d4f5 = $6cc32821e9371a1c$export$dd37bec0e8a99143;
|
|
15830
15844
|
const $6cc32821e9371a1c$export$6d08773d2e66f8f2 = $6cc32821e9371a1c$export$2ce376c2cc3355c8;
|
|
@@ -15916,6 +15930,11 @@ const $d08ef79370b62062$export$d2469213b3befba9 = /*#__PURE__*/ forwardRef((prop
|
|
|
15916
15930
|
})
|
|
15917
15931
|
})));
|
|
15918
15932
|
});
|
|
15933
|
+
const $d08ef79370b62062$export$cd369b4d4d54efc9 = (props)=>{
|
|
15934
|
+
const { __scopeDropdownMenu: __scopeDropdownMenu , ...portalProps } = props;
|
|
15935
|
+
const menuScope = $d08ef79370b62062$var$useMenuScope(__scopeDropdownMenu);
|
|
15936
|
+
return /*#__PURE__*/ createElement($6cc32821e9371a1c$export$602eac185826482c, _extends({}, menuScope, portalProps));
|
|
15937
|
+
};
|
|
15919
15938
|
/* -------------------------------------------------------------------------------------------------
|
|
15920
15939
|
* DropdownMenuContent
|
|
15921
15940
|
* -----------------------------------------------------------------------------------------------*/ const $d08ef79370b62062$var$CONTENT_NAME = 'DropdownMenuContent';
|
|
@@ -16018,6 +16037,7 @@ const $d08ef79370b62062$export$f34ec8bc2482cc5f = /*#__PURE__*/ forwardRef((prop
|
|
|
16018
16037
|
});
|
|
16019
16038
|
/* -----------------------------------------------------------------------------------------------*/ const $d08ef79370b62062$export$be92b6f5f03c0fe9 = $d08ef79370b62062$export$e44a253a59704894;
|
|
16020
16039
|
const $d08ef79370b62062$export$41fb9f06171c75f4 = $d08ef79370b62062$export$d2469213b3befba9;
|
|
16040
|
+
const $d08ef79370b62062$export$602eac185826482c = $d08ef79370b62062$export$cd369b4d4d54efc9;
|
|
16021
16041
|
const $d08ef79370b62062$export$7c6e2c02157bb7d2 = $d08ef79370b62062$export$6e76d93a37c01248;
|
|
16022
16042
|
const $d08ef79370b62062$export$b04be29aa201d4f5 = $d08ef79370b62062$export$76e48c5b57f24495;
|
|
16023
16043
|
const $d08ef79370b62062$export$6d08773d2e66f8f2 = $d08ef79370b62062$export$ed97964d1871885d;
|
|
@@ -16041,49 +16061,74 @@ const ButtonWithDropdown = ({ dropdownItems, triggerIcon, id, extraClassNames, c
|
|
|
16041
16061
|
return (React.createElement($d08ef79370b62062$export$be92b6f5f03c0fe9, { defaultOpen: false, open: isOpen, onOpenChange: onOpenChange, modal: keepFocusInsideDropdown },
|
|
16042
16062
|
React.createElement($d08ef79370b62062$export$41fb9f06171c75f4, { id: id, className: `tw-border-none focus-visible:tw-outline-none focus:tw-outline-none focus-within:tw-outline-none`, disabled: disabled },
|
|
16043
16063
|
React.createElement("div", { ...tooltipData, className: `tw-bg-transparent tw-flex tw-flex-col tw-items-center focus-visible:tw-outline-none focus:tw-outline-none focus-within:tw-outline-none ${disabled ? disabledClasses$1 : ''} ${extraClassNames || ''}` }, triggerIcon)),
|
|
16044
|
-
React.createElement($d08ef79370b62062$export$
|
|
16045
|
-
React.createElement(
|
|
16046
|
-
|
|
16047
|
-
|
|
16048
|
-
|
|
16049
|
-
|
|
16050
|
-
|
|
16051
|
-
React.createElement(
|
|
16052
|
-
|
|
16053
|
-
|
|
16054
|
-
|
|
16055
|
-
|
|
16056
|
-
|
|
16057
|
-
|
|
16058
|
-
|
|
16059
|
-
|
|
16060
|
-
React.createElement($d08ef79370b62062$export$
|
|
16061
|
-
React.createElement(
|
|
16062
|
-
|
|
16063
|
-
|
|
16064
|
-
React.createElement(Icon, { small: true, icon: "fc-arrow-dropdown -tw-rotate-90", extraClassNames: `${item.disabled ? 'tw-text-sq-disabled-gray' : 'tw-text-sq-text-color dark:tw-text-sq-white'} tw-w-[18px] tw-ml-4 tw-text-[8px] tw-justify-center tw-flex` })),
|
|
16065
|
-
React.createElement($d08ef79370b62062$export$6d4de93b380beddf, { className: "focus-visible:tw-outline-none tw-outline-none" },
|
|
16066
|
-
React.createElement("div", { "data-testid": containerTestId, className: bgStyles$1 +
|
|
16067
|
-
' tw-relative tw-z-[1000] tw-min-w-6 tw-py-2 focus-visible:tw-outline-none tw-outline-none data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out' +
|
|
16068
|
-
' forceFont data-[side=top]:tw-animate-slideDownAndFade data-[side=right]:tw-animate-slideLeftAndFade data-[side=bottom]:tw-animate-slideUpAndFade data-[side=left]:tw-animate-slideRightAndFade ' +
|
|
16069
|
-
borderStyles$1 }, item.subMenuItems.map((subItem, subIndex) => {
|
|
16070
|
-
return (React.createElement($d08ef79370b62062$export$6d08773d2e66f8f2, { key: subItem.label + subIndex, onSelect: subItem.onClick, "data-qtip-text": subItem.tooltip, 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-leading-none tw-items-center tw-h-[27px] tw-px-[19px] tw-relative tw-select-none tw-outline-none data-[disabled]:tw-pointer-events-none", disabled: subItem.disabled },
|
|
16071
|
-
subItem.iconClass && (React.createElement(Icon, { icon: subItem.iconClass, extraClassNames: `tw-w-[18px] ${subItem.disabled
|
|
16064
|
+
React.createElement($d08ef79370b62062$export$602eac185826482c, null,
|
|
16065
|
+
React.createElement($d08ef79370b62062$export$7c6e2c02157bb7d2, { sideOffset: placementOffset, side: placement, align: align, alignOffset: alignOffset, asChild: true, onCloseAutoFocus: (e) => !setFocusOnTriggerOnClose && e.preventDefault(), className: "focus-visible:tw-outline-none tw-outline-none" },
|
|
16066
|
+
React.createElement("div", { "data-testid": containerTestId, className: bgStyles$1 +
|
|
16067
|
+
' tw-relative tw-z-[1200] tw-min-w-6 tw-py-2 focus-visible:tw-outline-none tw-outline-none' +
|
|
16068
|
+
' data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out' +
|
|
16069
|
+
' forceFont data-[side=top]:tw-animate-slideDownAndFade data-[side=right]:tw-animate-slideLeftAndFade data-[side=bottom]:tw-animate-slideUpAndFade data-[side=left]:tw-animate-slideRightAndFade ' +
|
|
16070
|
+
borderStyles$1 },
|
|
16071
|
+
hasArrow && (React.createElement($d08ef79370b62062$export$21b07c8f274aebd5, { asChild: true },
|
|
16072
|
+
React.createElement("div", { className: " tw-fill-transparent tw-bg-white tw-w-[15px] tw-h-[15px] tw-rotate-45 dark:tw-bg-sq-dark-background tw-border-b tw-border-r tw-border-sq-disabled-gray dark:tw-border-gray-500 tw-mt-[-7px]" }))),
|
|
16073
|
+
dropdownItems.map((item, index) => {
|
|
16074
|
+
if (item.isLabel) {
|
|
16075
|
+
return (React.createElement($d08ef79370b62062$export$b04be29aa201d4f5, { key: (item.label || '') + index, className: item.containerExtraClassNames },
|
|
16076
|
+
item.icon && (React.createElement(Icon, { icon: item.icon, testId: item.iconTestId, type: "text", color: item.iconColor, extraClassNames: "tw-text-sq-text-color dark:tw-text-sq-white tw-w-[18px]" })),
|
|
16077
|
+
React.createElement("div", { "data-testid": item.labelTestId, className: `tw-text-[13px] tw-ml-1 ${item.disabled ? 'tw-text-sq-disabled-gray' : 'tw-text-sq-text-color dark:tw-text-sq-white'} tw-not-italic tw-font-normal ${item.labelClasses}` }, item.label)));
|
|
16078
|
+
}
|
|
16079
|
+
if (Array.isArray(item.subMenuItems) && item.subMenuItems.length > 0) {
|
|
16080
|
+
return (React.createElement($d08ef79370b62062$export$d7a01e11500dfb6f, { key: item.label + index },
|
|
16081
|
+
React.createElement($d08ef79370b62062$export$2ea8a7a591ac5eac, { id: id, className: `tw-cursor-pointer tw-flex tw-justify-between dark:tw-text-sq-white hover:tw-bg-sq-gray-highlight dark:hover:tw-bg-sq-gray-highlight-dark tw-leading-none tw-items-center tw-h-[27px] tw-pl-[19px] tw-relative tw-select-none tw-outline-none data-[disabled]:tw-pointer-events-none ${item.containerExtraClassNames || ''}`, "data-testid": item.testId, disabled: item.disabled },
|
|
16082
|
+
React.createElement("div", { className: "tw-flex" },
|
|
16083
|
+
item.icon && (React.createElement(Icon, { icon: item.icon, extraClassNames: `tw-w-[18px] ${item.disabled
|
|
16072
16084
|
? '!tw-text-sq-disabled-gray'
|
|
16073
|
-
: 'tw-text-sq-text-color dark:tw-text-sq-white'}` })),
|
|
16074
|
-
React.createElement("div", { className: `tw-text-[13px] tw-ml-1 ${
|
|
16075
|
-
|
|
16076
|
-
|
|
16077
|
-
|
|
16078
|
-
|
|
16079
|
-
|
|
16080
|
-
|
|
16081
|
-
|
|
16082
|
-
|
|
16083
|
-
|
|
16084
|
-
|
|
16085
|
-
|
|
16086
|
-
|
|
16085
|
+
: 'tw-text-sq-text-color dark:tw-text-sq-white'} ${item.iconExtraClassNames || ''}` })),
|
|
16086
|
+
React.createElement("div", { "data-testid": item.labelTestId, "data-customid": item.labelCustomId, className: `tw-text-[13px] tw-ml-1 ${item.disabled ? 'tw-text-sq-disabled-gray' : 'tw-text-sq-text-color dark:tw-text-sq-white'} tw-not-italic tw-font-semibold ${item.labelClasses}` }, item.label)),
|
|
16087
|
+
React.createElement(Icon, { small: true, icon: "fc-arrow-dropdown -tw-rotate-90", extraClassNames: `${item.disabled ? 'tw-text-sq-disabled-gray' : 'tw-text-sq-text-color dark:tw-text-sq-white'} tw-w-[18px] tw-ml-4 tw-text-[8px] tw-justify-center tw-flex` })),
|
|
16088
|
+
React.createElement($d08ef79370b62062$export$602eac185826482c, null,
|
|
16089
|
+
React.createElement($d08ef79370b62062$export$6d4de93b380beddf, { className: "focus-visible:tw-outline-none tw-outline-none" },
|
|
16090
|
+
React.createElement("div", { "data-testid": containerTestId, className: bgStyles$1 +
|
|
16091
|
+
' tw-relative tw-z-[1000] tw-min-w-6 tw-py-2 focus-visible:tw-outline-none tw-outline-none data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out' +
|
|
16092
|
+
' forceFont data-[side=top]:tw-animate-slideDownAndFade data-[side=right]:tw-animate-slideLeftAndFade data-[side=bottom]:tw-animate-slideUpAndFade data-[side=left]:tw-animate-slideRightAndFade ' +
|
|
16093
|
+
borderStyles$1 }, item.subMenuItems.map((subItem, subIndex) => {
|
|
16094
|
+
return (React.createElement($d08ef79370b62062$export$6d08773d2e66f8f2, { key: subItem.label + subIndex, onSelect: subItem.onClick, "data-qtip-text": subItem.tooltip, 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-leading-none tw-items-center tw-h-[27px] tw-px-[19px] tw-relative tw-select-none tw-outline-none data-[disabled]:tw-pointer-events-none", disabled: subItem.disabled },
|
|
16095
|
+
subItem.iconClass && (React.createElement(Icon, { icon: subItem.iconClass, extraClassNames: `tw-w-[18px] ${subItem.disabled
|
|
16096
|
+
? '!tw-text-sq-disabled-gray'
|
|
16097
|
+
: 'tw-text-sq-text-color dark:tw-text-sq-white'}` })),
|
|
16098
|
+
React.createElement("div", { className: `tw-text-[13px] tw-ml-1 ${subItem.disabled
|
|
16099
|
+
? 'tw-text-sq-disabled-gray'
|
|
16100
|
+
: 'tw-text-sq-text-color dark:tw-text-sq-white'} tw-not-italic tw-font-normal ${item.labelClasses}` }, subItem.label)));
|
|
16101
|
+
}))))));
|
|
16102
|
+
}
|
|
16103
|
+
return (React.createElement("div", { key: item.label + index },
|
|
16104
|
+
React.createElement($d08ef79370b62062$export$6d08773d2e66f8f2, { key: item.label + index, "data-customid": item.itemCustomId, onSelect: (e) => {
|
|
16105
|
+
item.onClick(e);
|
|
16106
|
+
}, 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-leading-none tw-items-center tw-h-[27px] tw-px-[19px] tw-relative tw-select-none tw-outline-none data-[disabled]:tw-pointer-events-none ${item.containerExtraClassNames || ''}`, "data-testid": item.testId, disabled: item.disabled },
|
|
16107
|
+
item.icon && (React.createElement(Icon, { icon: item.icon, testId: item.iconTestId, type: (item.iconType || 'text'), color: item.iconColor, customId: item.iconCustomId, extraClassNames: `tw-w-[18px] ${item.disabled ? '!tw-text-sq-disabled-gray' : 'tw-text-sq-text-color dark:tw-text-sq-white'} ${item.iconExtraClassNames || ''}` })),
|
|
16108
|
+
React.createElement("div", { "data-testid": item.labelTestId, "data-customid": item.labelCustomId, className: `tw-text-[13px] tw-ml-1 ${item.disabled ? 'tw-text-sq-disabled-gray' : 'tw-text-sq-text-color dark:tw-text-sq-white'} tw-not-italic tw-font-normal ${item.labelClasses || ''}` }, item.label)),
|
|
16109
|
+
item.hasDivider && (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]" }))));
|
|
16110
|
+
}))))));
|
|
16111
|
+
};
|
|
16112
|
+
|
|
16113
|
+
const NewWorkbenchItem = (item) => {
|
|
16114
|
+
return (React__default.createElement("div", { className: "tw-flex-col tw-flex tw-p-[10px] tw-pl-5 tw-w-[600px]" },
|
|
16115
|
+
React__default.createElement("div", { className: "tw-flex tw-flex-row tw-gap-2 tw-items-end" },
|
|
16116
|
+
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 ' +
|
|
16117
|
+
item.iconExtraClassNames })),
|
|
16118
|
+
React__default.createElement("h4", { className: "tw-text-base tw-font-[600] tw-leading-[20px] mb-0" }, item.display)),
|
|
16119
|
+
React__default.createElement("div", { className: "tw-text-[13px] tw-font-normal" }, item.text)));
|
|
16120
|
+
};
|
|
16121
|
+
const ViewWorkbench = (item) => {
|
|
16122
|
+
return (React__default.createElement("div", { className: "tw-flex-col tw-flex tw-p-[10px]" },
|
|
16123
|
+
React__default.createElement("div", { className: "tw-flex tw-flex-row tw-gap-2 tw-items-end" },
|
|
16124
|
+
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 ' +
|
|
16125
|
+
item.iconExtraClassNames })),
|
|
16126
|
+
React__default.createElement("div", { className: "tw-text-[13px]" }, item.display))));
|
|
16127
|
+
};
|
|
16128
|
+
const InsertSeeqContent = (item) => {
|
|
16129
|
+
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" },
|
|
16130
|
+
React__default.createElement("h5", { className: "tw-text-[15px] tw-leading-[18px]" }, item.display),
|
|
16131
|
+
React__default.createElement("div", { className: "tw-text-[11px] tw-text-[#999] !tw-mt-1" }, item.text)));
|
|
16087
16132
|
};
|
|
16088
16133
|
|
|
16089
16134
|
const borderStyles = [
|
|
@@ -16095,7 +16140,19 @@ const borderStyles = [
|
|
|
16095
16140
|
].join(' ');
|
|
16096
16141
|
const bgStyles = ['tw-bg-sq-white', 'dark:tw-bg-sq-dark-background'].join(' ');
|
|
16097
16142
|
const disabledClasses = ['tw-opacity-50', 'tw-cursor-not-allowed'].join(' ');
|
|
16098
|
-
const
|
|
16143
|
+
const renderItem = (variant, item) => {
|
|
16144
|
+
switch (variant) {
|
|
16145
|
+
case 'create-workbench':
|
|
16146
|
+
return React.createElement(NewWorkbenchItem, { ...item });
|
|
16147
|
+
case 'view-workbench':
|
|
16148
|
+
return React.createElement(ViewWorkbench, { ...item });
|
|
16149
|
+
case 'insert-seeq-content':
|
|
16150
|
+
return React.createElement(InsertSeeqContent, { ...item });
|
|
16151
|
+
default:
|
|
16152
|
+
return React.createElement(NewWorkbenchItem, { ...item });
|
|
16153
|
+
}
|
|
16154
|
+
};
|
|
16155
|
+
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 }) => {
|
|
16099
16156
|
const tooltipData = getQTipData(tooltipProps);
|
|
16100
16157
|
return (React.createElement($d08ef79370b62062$export$be92b6f5f03c0fe9, { defaultOpen: false, open: isOpen, onOpenChange: onOpenChange, modal: keepFocusInsideDropdown },
|
|
16101
16158
|
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 +16169,7 @@ const NewWorkbench = ({ newWorkbenchItems, trigger, id, extraClassNames, contain
|
|
|
16112
16169
|
return (React.createElement("div", { key: item.display + index },
|
|
16113
16170
|
React.createElement($d08ef79370b62062$export$6d08773d2e66f8f2, { onSelect: (e) => {
|
|
16114
16171
|
item.action(e);
|
|
16115
|
-
}, 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 },
|
|
16116
|
-
React.createElement("div", { className: "tw-flex-col tw-flex tw-p-[10px] tw-pl-5 tw-w-[600px]" },
|
|
16117
|
-
React.createElement("div", { className: "tw-flex tw-flex-row tw-gap-2 tw-items-end" },
|
|
16118
|
-
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 ' +
|
|
16119
|
-
item.iconExtraClassNames })),
|
|
16120
|
-
React.createElement("h4", { className: "tw-text-base tw-font-[600] tw-leading-[20px] mb-0" }, item.display)),
|
|
16121
|
-
React.createElement("div", { className: "tw-text-[13px] tw-font-[400]" }, item.text))),
|
|
16172
|
+
}, 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)),
|
|
16122
16173
|
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]" }))));
|
|
16123
16174
|
})))));
|
|
16124
16175
|
};
|