@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
package/dist/index.js
CHANGED
|
@@ -15033,7 +15033,7 @@ const borderStyles$2 = [
|
|
|
15033
15033
|
'dark:tw-border-gray-500',
|
|
15034
15034
|
].join(' ');
|
|
15035
15035
|
const disabledClasses$2 = ['tw-opacity-50', 'tw-cursor-not-allowed'].join(' ');
|
|
15036
|
-
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,
|
|
15036
|
+
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 }) => {
|
|
15037
15037
|
const tooltipData = getQTipData(tooltipProps);
|
|
15038
15038
|
let timeout;
|
|
15039
15039
|
const [isHoveredOpen, setIsHoveredOpen] = React__namespace.useState(false);
|
|
@@ -15190,6 +15190,19 @@ const $6cc32821e9371a1c$export$9fa5ebd18bee4d43 = /*#__PURE__*/ React.forwardRef
|
|
|
15190
15190
|
const [$6cc32821e9371a1c$var$PortalProvider, $6cc32821e9371a1c$var$usePortalContext] = $6cc32821e9371a1c$var$createMenuContext($6cc32821e9371a1c$var$PORTAL_NAME, {
|
|
15191
15191
|
forceMount: undefined
|
|
15192
15192
|
});
|
|
15193
|
+
const $6cc32821e9371a1c$export$793392f970497feb = (props)=>{
|
|
15194
|
+
const { __scopeMenu: __scopeMenu , forceMount: forceMount , children: children , container: container } = props;
|
|
15195
|
+
const context = $6cc32821e9371a1c$var$useMenuContext($6cc32821e9371a1c$var$PORTAL_NAME, __scopeMenu);
|
|
15196
|
+
return /*#__PURE__*/ React.createElement($6cc32821e9371a1c$var$PortalProvider, {
|
|
15197
|
+
scope: __scopeMenu,
|
|
15198
|
+
forceMount: forceMount
|
|
15199
|
+
}, /*#__PURE__*/ React.createElement($921a889cee6df7e8$export$99c2b779aa4e8b8b, {
|
|
15200
|
+
present: forceMount || context.open
|
|
15201
|
+
}, /*#__PURE__*/ React.createElement($f1701beae083dbae$export$602eac185826482c, {
|
|
15202
|
+
asChild: true,
|
|
15203
|
+
container: container
|
|
15204
|
+
}, children)));
|
|
15205
|
+
};
|
|
15193
15206
|
/* -------------------------------------------------------------------------------------------------
|
|
15194
15207
|
* MenuContent
|
|
15195
15208
|
* -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$CONTENT_NAME = 'MenuContent';
|
|
@@ -15845,6 +15858,7 @@ function $6cc32821e9371a1c$var$whenMouse(handler) {
|
|
|
15845
15858
|
}
|
|
15846
15859
|
const $6cc32821e9371a1c$export$be92b6f5f03c0fe9 = $6cc32821e9371a1c$export$d9b273488cd8ce6f;
|
|
15847
15860
|
const $6cc32821e9371a1c$export$b688253958b8dfe7 = $6cc32821e9371a1c$export$9fa5ebd18bee4d43;
|
|
15861
|
+
const $6cc32821e9371a1c$export$602eac185826482c = $6cc32821e9371a1c$export$793392f970497feb;
|
|
15848
15862
|
const $6cc32821e9371a1c$export$7c6e2c02157bb7d2 = $6cc32821e9371a1c$export$479f0f2f71193efe;
|
|
15849
15863
|
const $6cc32821e9371a1c$export$b04be29aa201d4f5 = $6cc32821e9371a1c$export$dd37bec0e8a99143;
|
|
15850
15864
|
const $6cc32821e9371a1c$export$6d08773d2e66f8f2 = $6cc32821e9371a1c$export$2ce376c2cc3355c8;
|
|
@@ -15936,6 +15950,11 @@ const $d08ef79370b62062$export$d2469213b3befba9 = /*#__PURE__*/ React.forwardRef
|
|
|
15936
15950
|
})
|
|
15937
15951
|
})));
|
|
15938
15952
|
});
|
|
15953
|
+
const $d08ef79370b62062$export$cd369b4d4d54efc9 = (props)=>{
|
|
15954
|
+
const { __scopeDropdownMenu: __scopeDropdownMenu , ...portalProps } = props;
|
|
15955
|
+
const menuScope = $d08ef79370b62062$var$useMenuScope(__scopeDropdownMenu);
|
|
15956
|
+
return /*#__PURE__*/ React.createElement($6cc32821e9371a1c$export$602eac185826482c, _extends({}, menuScope, portalProps));
|
|
15957
|
+
};
|
|
15939
15958
|
/* -------------------------------------------------------------------------------------------------
|
|
15940
15959
|
* DropdownMenuContent
|
|
15941
15960
|
* -----------------------------------------------------------------------------------------------*/ const $d08ef79370b62062$var$CONTENT_NAME = 'DropdownMenuContent';
|
|
@@ -16038,6 +16057,7 @@ const $d08ef79370b62062$export$f34ec8bc2482cc5f = /*#__PURE__*/ React.forwardRef
|
|
|
16038
16057
|
});
|
|
16039
16058
|
/* -----------------------------------------------------------------------------------------------*/ const $d08ef79370b62062$export$be92b6f5f03c0fe9 = $d08ef79370b62062$export$e44a253a59704894;
|
|
16040
16059
|
const $d08ef79370b62062$export$41fb9f06171c75f4 = $d08ef79370b62062$export$d2469213b3befba9;
|
|
16060
|
+
const $d08ef79370b62062$export$602eac185826482c = $d08ef79370b62062$export$cd369b4d4d54efc9;
|
|
16041
16061
|
const $d08ef79370b62062$export$7c6e2c02157bb7d2 = $d08ef79370b62062$export$6e76d93a37c01248;
|
|
16042
16062
|
const $d08ef79370b62062$export$b04be29aa201d4f5 = $d08ef79370b62062$export$76e48c5b57f24495;
|
|
16043
16063
|
const $d08ef79370b62062$export$6d08773d2e66f8f2 = $d08ef79370b62062$export$ed97964d1871885d;
|
|
@@ -16061,49 +16081,74 @@ const ButtonWithDropdown = ({ dropdownItems, triggerIcon, id, extraClassNames, c
|
|
|
16061
16081
|
return (React__namespace.createElement($d08ef79370b62062$export$be92b6f5f03c0fe9, { defaultOpen: false, open: isOpen, onOpenChange: onOpenChange, modal: keepFocusInsideDropdown },
|
|
16062
16082
|
React__namespace.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 },
|
|
16063
16083
|
React__namespace.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)),
|
|
16064
|
-
React__namespace.createElement($d08ef79370b62062$export$
|
|
16065
|
-
React__namespace.createElement(
|
|
16066
|
-
|
|
16067
|
-
|
|
16068
|
-
|
|
16069
|
-
|
|
16070
|
-
|
|
16071
|
-
React__namespace.createElement(
|
|
16072
|
-
|
|
16073
|
-
|
|
16074
|
-
|
|
16075
|
-
|
|
16076
|
-
|
|
16077
|
-
|
|
16078
|
-
|
|
16079
|
-
|
|
16080
|
-
React__namespace.createElement($d08ef79370b62062$export$
|
|
16081
|
-
React__namespace.createElement(
|
|
16082
|
-
|
|
16083
|
-
|
|
16084
|
-
React__namespace.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` })),
|
|
16085
|
-
React__namespace.createElement($d08ef79370b62062$export$6d4de93b380beddf, { className: "focus-visible:tw-outline-none tw-outline-none" },
|
|
16086
|
-
React__namespace.createElement("div", { "data-testid": containerTestId, className: bgStyles$1 +
|
|
16087
|
-
' 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' +
|
|
16088
|
-
' 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 ' +
|
|
16089
|
-
borderStyles$1 }, item.subMenuItems.map((subItem, subIndex) => {
|
|
16090
|
-
return (React__namespace.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 },
|
|
16091
|
-
subItem.iconClass && (React__namespace.createElement(Icon, { icon: subItem.iconClass, extraClassNames: `tw-w-[18px] ${subItem.disabled
|
|
16084
|
+
React__namespace.createElement($d08ef79370b62062$export$602eac185826482c, null,
|
|
16085
|
+
React__namespace.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" },
|
|
16086
|
+
React__namespace.createElement("div", { "data-testid": containerTestId, className: bgStyles$1 +
|
|
16087
|
+
' tw-relative tw-z-[1200] tw-min-w-6 tw-py-2 focus-visible:tw-outline-none tw-outline-none' +
|
|
16088
|
+
' data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out' +
|
|
16089
|
+
' 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 ' +
|
|
16090
|
+
borderStyles$1 },
|
|
16091
|
+
hasArrow && (React__namespace.createElement($d08ef79370b62062$export$21b07c8f274aebd5, { asChild: true },
|
|
16092
|
+
React__namespace.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]" }))),
|
|
16093
|
+
dropdownItems.map((item, index) => {
|
|
16094
|
+
if (item.isLabel) {
|
|
16095
|
+
return (React__namespace.createElement($d08ef79370b62062$export$b04be29aa201d4f5, { key: (item.label || '') + index, className: item.containerExtraClassNames },
|
|
16096
|
+
item.icon && (React__namespace.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]" })),
|
|
16097
|
+
React__namespace.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)));
|
|
16098
|
+
}
|
|
16099
|
+
if (Array.isArray(item.subMenuItems) && item.subMenuItems.length > 0) {
|
|
16100
|
+
return (React__namespace.createElement($d08ef79370b62062$export$d7a01e11500dfb6f, { key: item.label + index },
|
|
16101
|
+
React__namespace.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 },
|
|
16102
|
+
React__namespace.createElement("div", { className: "tw-flex" },
|
|
16103
|
+
item.icon && (React__namespace.createElement(Icon, { icon: item.icon, extraClassNames: `tw-w-[18px] ${item.disabled
|
|
16092
16104
|
? '!tw-text-sq-disabled-gray'
|
|
16093
|
-
: 'tw-text-sq-text-color dark:tw-text-sq-white'}` })),
|
|
16094
|
-
React__namespace.createElement("div", { className: `tw-text-[13px] tw-ml-1 ${
|
|
16095
|
-
|
|
16096
|
-
|
|
16097
|
-
|
|
16098
|
-
|
|
16099
|
-
|
|
16100
|
-
|
|
16101
|
-
|
|
16102
|
-
|
|
16103
|
-
|
|
16104
|
-
|
|
16105
|
-
|
|
16106
|
-
|
|
16105
|
+
: 'tw-text-sq-text-color dark:tw-text-sq-white'} ${item.iconExtraClassNames || ''}` })),
|
|
16106
|
+
React__namespace.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)),
|
|
16107
|
+
React__namespace.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` })),
|
|
16108
|
+
React__namespace.createElement($d08ef79370b62062$export$602eac185826482c, null,
|
|
16109
|
+
React__namespace.createElement($d08ef79370b62062$export$6d4de93b380beddf, { className: "focus-visible:tw-outline-none tw-outline-none" },
|
|
16110
|
+
React__namespace.createElement("div", { "data-testid": containerTestId, className: bgStyles$1 +
|
|
16111
|
+
' 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' +
|
|
16112
|
+
' 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 ' +
|
|
16113
|
+
borderStyles$1 }, item.subMenuItems.map((subItem, subIndex) => {
|
|
16114
|
+
return (React__namespace.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 },
|
|
16115
|
+
subItem.iconClass && (React__namespace.createElement(Icon, { icon: subItem.iconClass, extraClassNames: `tw-w-[18px] ${subItem.disabled
|
|
16116
|
+
? '!tw-text-sq-disabled-gray'
|
|
16117
|
+
: 'tw-text-sq-text-color dark:tw-text-sq-white'}` })),
|
|
16118
|
+
React__namespace.createElement("div", { className: `tw-text-[13px] tw-ml-1 ${subItem.disabled
|
|
16119
|
+
? 'tw-text-sq-disabled-gray'
|
|
16120
|
+
: 'tw-text-sq-text-color dark:tw-text-sq-white'} tw-not-italic tw-font-normal ${item.labelClasses}` }, subItem.label)));
|
|
16121
|
+
}))))));
|
|
16122
|
+
}
|
|
16123
|
+
return (React__namespace.createElement("div", { key: item.label + index },
|
|
16124
|
+
React__namespace.createElement($d08ef79370b62062$export$6d08773d2e66f8f2, { key: item.label + index, "data-customid": item.itemCustomId, onSelect: (e) => {
|
|
16125
|
+
item.onClick(e);
|
|
16126
|
+
}, 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 },
|
|
16127
|
+
item.icon && (React__namespace.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 || ''}` })),
|
|
16128
|
+
React__namespace.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)),
|
|
16129
|
+
item.hasDivider && (React__namespace.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]" }))));
|
|
16130
|
+
}))))));
|
|
16131
|
+
};
|
|
16132
|
+
|
|
16133
|
+
const NewWorkbenchItem = (item) => {
|
|
16134
|
+
return (React.createElement("div", { className: "tw-flex-col tw-flex tw-p-[10px] tw-pl-5 tw-w-[600px]" },
|
|
16135
|
+
React.createElement("div", { className: "tw-flex tw-flex-row tw-gap-2 tw-items-end" },
|
|
16136
|
+
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 ' +
|
|
16137
|
+
item.iconExtraClassNames })),
|
|
16138
|
+
React.createElement("h4", { className: "tw-text-base tw-font-[600] tw-leading-[20px] mb-0" }, item.display)),
|
|
16139
|
+
React.createElement("div", { className: "tw-text-[13px] tw-font-normal" }, item.text)));
|
|
16140
|
+
};
|
|
16141
|
+
const ViewWorkbench = (item) => {
|
|
16142
|
+
return (React.createElement("div", { className: "tw-flex-col tw-flex tw-p-[10px]" },
|
|
16143
|
+
React.createElement("div", { className: "tw-flex tw-flex-row tw-gap-2 tw-items-end" },
|
|
16144
|
+
item.icon && (React.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 ' +
|
|
16145
|
+
item.iconExtraClassNames })),
|
|
16146
|
+
React.createElement("div", { className: "tw-text-[13px]" }, item.display))));
|
|
16147
|
+
};
|
|
16148
|
+
const InsertSeeqContent = (item) => {
|
|
16149
|
+
return (React.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" },
|
|
16150
|
+
React.createElement("h5", { className: "tw-text-[15px] tw-leading-[18px]" }, item.display),
|
|
16151
|
+
React.createElement("div", { className: "tw-text-[11px] tw-text-[#999] !tw-mt-1" }, item.text)));
|
|
16107
16152
|
};
|
|
16108
16153
|
|
|
16109
16154
|
const borderStyles = [
|
|
@@ -16115,7 +16160,19 @@ const borderStyles = [
|
|
|
16115
16160
|
].join(' ');
|
|
16116
16161
|
const bgStyles = ['tw-bg-sq-white', 'dark:tw-bg-sq-dark-background'].join(' ');
|
|
16117
16162
|
const disabledClasses = ['tw-opacity-50', 'tw-cursor-not-allowed'].join(' ');
|
|
16118
|
-
const
|
|
16163
|
+
const renderItem = (variant, item) => {
|
|
16164
|
+
switch (variant) {
|
|
16165
|
+
case 'create-workbench':
|
|
16166
|
+
return React__namespace.createElement(NewWorkbenchItem, { ...item });
|
|
16167
|
+
case 'view-workbench':
|
|
16168
|
+
return React__namespace.createElement(ViewWorkbench, { ...item });
|
|
16169
|
+
case 'insert-seeq-content':
|
|
16170
|
+
return React__namespace.createElement(InsertSeeqContent, { ...item });
|
|
16171
|
+
default:
|
|
16172
|
+
return React__namespace.createElement(NewWorkbenchItem, { ...item });
|
|
16173
|
+
}
|
|
16174
|
+
};
|
|
16175
|
+
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 }) => {
|
|
16119
16176
|
const tooltipData = getQTipData(tooltipProps);
|
|
16120
16177
|
return (React__namespace.createElement($d08ef79370b62062$export$be92b6f5f03c0fe9, { defaultOpen: false, open: isOpen, onOpenChange: onOpenChange, modal: keepFocusInsideDropdown },
|
|
16121
16178
|
React__namespace.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 },
|
|
@@ -16132,13 +16189,7 @@ const NewWorkbench = ({ newWorkbenchItems, trigger, id, extraClassNames, contain
|
|
|
16132
16189
|
return (React__namespace.createElement("div", { key: item.display + index },
|
|
16133
16190
|
React__namespace.createElement($d08ef79370b62062$export$6d08773d2e66f8f2, { onSelect: (e) => {
|
|
16134
16191
|
item.action(e);
|
|
16135
|
-
}, 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 },
|
|
16136
|
-
React__namespace.createElement("div", { className: "tw-flex-col tw-flex tw-p-[10px] tw-pl-5 tw-w-[600px]" },
|
|
16137
|
-
React__namespace.createElement("div", { className: "tw-flex tw-flex-row tw-gap-2 tw-items-end" },
|
|
16138
|
-
item.icon && (React__namespace.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 ' +
|
|
16139
|
-
item.iconExtraClassNames })),
|
|
16140
|
-
React__namespace.createElement("h4", { className: "tw-text-base tw-font-[600] tw-leading-[20px] mb-0" }, item.display)),
|
|
16141
|
-
React__namespace.createElement("div", { className: "tw-text-[13px] tw-font-[400]" }, item.text))),
|
|
16192
|
+
}, 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)),
|
|
16142
16193
|
item.divider && (React__namespace.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]" }))));
|
|
16143
16194
|
})))));
|
|
16144
16195
|
};
|