@seeqdev/qomponents 0.0.79 → 0.0.81
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.js +46 -42
- package/dist/ButtonWithDropdown/ButtonWithDropdown.js.map +1 -1
- package/dist/ButtonWithDropdown/ButtonWithDropdown.types.d.ts +0 -6
- package/dist/ButtonWithPopover/ButtonWithPopover.js +1 -1
- package/dist/ButtonWithPopover/ButtonWithPopover.js.map +1 -1
- package/dist/ButtonWithPopover/ButtonWithPopover.types.d.ts +0 -6
- package/dist/Modal/Modal.js +11 -2
- package/dist/Modal/Modal.js.map +1 -1
- package/dist/Modal/Modal.stories.js +20 -9
- package/dist/Modal/Modal.stories.js.map +1 -1
- package/dist/index.esm.js +85 -49
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +85 -49
- package/dist/index.js.map +1 -1
- package/dist/styles.css +11 -0
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -14078,16 +14078,17 @@ const DialogContent = React.forwardRef(({ className, children, ...props }, ref)
|
|
|
14078
14078
|
tw-gap-4 tw-border tw-bg-sq-white dark:tw-bg-sq-dark-background tw-p-6 tw-shadow-lg tw-duration-200
|
|
14079
14079
|
tw-rounded-lg ${className}`, ...props }, children))));
|
|
14080
14080
|
DialogContent.displayName = $5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2.displayName;
|
|
14081
|
-
const DialogHeader = (
|
|
14082
|
-
React.createElement("div", {
|
|
14081
|
+
const DialogHeader = (props) => (React.createElement("div", { className: "tw-w-full tw-justify-between" },
|
|
14082
|
+
React.createElement("div", { ...props })));
|
|
14083
14083
|
DialogHeader.displayName = 'DialogHeader';
|
|
14084
|
-
const DialogFooter = (
|
|
14084
|
+
const DialogFooter = (props) => React.createElement("div", { ...props });
|
|
14085
14085
|
DialogFooter.displayName = 'DialogFooter';
|
|
14086
|
-
const DialogTitle = React.forwardRef((
|
|
14086
|
+
const DialogTitle = React.forwardRef((props, ref) => React.createElement($5d3850c4d0b4e6c7$export$f99233281efd08a0, { ref: ref, ...props }));
|
|
14087
14087
|
DialogTitle.displayName = $5d3850c4d0b4e6c7$export$f99233281efd08a0.displayName;
|
|
14088
|
-
const DialogDescription = React.forwardRef((
|
|
14088
|
+
const DialogDescription = React.forwardRef((props, ref) => React.createElement($5d3850c4d0b4e6c7$export$393edc798c47379d, { ref: ref, ...props }));
|
|
14089
14089
|
DialogDescription.displayName = $5d3850c4d0b4e6c7$export$393edc798c47379d.displayName;
|
|
14090
14090
|
const Modal = ({ titleIcon, title = 'Modal title example', titleSuffixLabel, subtitle, children, open = false, onClose, customButton = false, customButtonLabel = 'Back', onClickCustomButton, submitButtonLabel = 'Submit', cancelButtonLabel = 'Cancel', disableSubmitButton = false, stopPropagationSubmitButton = false, onSubmit, isTitleEditable = false, onTitleChanged, inputExtraClassNames, hideCloseIcon = false, size = 'xl', titleIconPosition = 'left', hideFooterButtons = false, hideSubmitButton = false, hideCancelButton = false, testId = 'modal', modalFooter, dialogClassName, titlePlaceholder, titleRequired, titleError, submitButtonTooltip, cancelButtonTooltip, disableCustomButton, customHeader, middleFooterSection = React.createElement(React.Fragment, null), customButtonVariant = 'outline', keepFocusInsideModal = true, }) => {
|
|
14091
|
+
const [isLoading, setIsLoading] = React.useState(false);
|
|
14091
14092
|
// the Dialog is adding pointerEvents: none to body and the dropdowns from the modal does not work anymore
|
|
14092
14093
|
React.useEffect(() => {
|
|
14093
14094
|
if (open) {
|
|
@@ -14101,6 +14102,17 @@ const Modal = ({ titleIcon, title = 'Modal title example', titleSuffixLabel, sub
|
|
|
14101
14102
|
document.body.style.pointerEvents = 'auto';
|
|
14102
14103
|
}
|
|
14103
14104
|
}, [open]);
|
|
14105
|
+
const handleSubmit = async (e) => {
|
|
14106
|
+
if (!onSubmit)
|
|
14107
|
+
return;
|
|
14108
|
+
try {
|
|
14109
|
+
setIsLoading(true);
|
|
14110
|
+
await onSubmit(e);
|
|
14111
|
+
}
|
|
14112
|
+
finally {
|
|
14113
|
+
setIsLoading(false);
|
|
14114
|
+
}
|
|
14115
|
+
};
|
|
14104
14116
|
const renderTitle = () => {
|
|
14105
14117
|
let titleIconElement = React.createElement(React.Fragment, null);
|
|
14106
14118
|
if (titleIcon) {
|
|
@@ -14146,7 +14158,7 @@ const Modal = ({ titleIcon, title = 'Modal title example', titleSuffixLabel, sub
|
|
|
14146
14158
|
React.createElement("div", { className: "tw-flex tw-items-center" }, middleFooterSection),
|
|
14147
14159
|
!hideCancelButton && (React.createElement(DialogClose, { asChild: true },
|
|
14148
14160
|
React.createElement(Button, { label: cancelButtonLabel, extraClassNames: "tw-mr-5 tw-min-w-[100px]", tooltip: cancelButtonTooltip, variant: "outline", stopPropagation: false, testId: "cancelButton" }))),
|
|
14149
|
-
!hideSubmitButton && (React.createElement(Button, { label: submitButtonLabel, onClick:
|
|
14161
|
+
!hideSubmitButton && (React.createElement(Button, { label: submitButtonLabel, onClick: handleSubmit, disabled: disableSubmitButton || isLoading, variant: "theme", stopPropagation: stopPropagationSubmitButton, tooltip: submitButtonTooltip, icon: isLoading ? 'fc-loading-notch tw-animate-spin' : undefined, iconPosition: "left", testId: "submitButton", extraClassNames: "tw-min-w-[100px]" })))))))))) : (React.createElement(React.Fragment, null));
|
|
14150
14162
|
};
|
|
14151
14163
|
|
|
14152
14164
|
// We have resorted to returning slots directly rather than exposing primitives that can then
|
|
@@ -15033,7 +15045,7 @@ const borderStyles$2 = [
|
|
|
15033
15045
|
'dark:tw-border-gray-500',
|
|
15034
15046
|
].join(' ');
|
|
15035
15047
|
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,
|
|
15048
|
+
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
15049
|
const tooltipData = getQTipData(tooltipProps);
|
|
15038
15050
|
let timeout;
|
|
15039
15051
|
const [isHoveredOpen, setIsHoveredOpen] = React__namespace.useState(false);
|
|
@@ -15190,6 +15202,19 @@ const $6cc32821e9371a1c$export$9fa5ebd18bee4d43 = /*#__PURE__*/ React.forwardRef
|
|
|
15190
15202
|
const [$6cc32821e9371a1c$var$PortalProvider, $6cc32821e9371a1c$var$usePortalContext] = $6cc32821e9371a1c$var$createMenuContext($6cc32821e9371a1c$var$PORTAL_NAME, {
|
|
15191
15203
|
forceMount: undefined
|
|
15192
15204
|
});
|
|
15205
|
+
const $6cc32821e9371a1c$export$793392f970497feb = (props)=>{
|
|
15206
|
+
const { __scopeMenu: __scopeMenu , forceMount: forceMount , children: children , container: container } = props;
|
|
15207
|
+
const context = $6cc32821e9371a1c$var$useMenuContext($6cc32821e9371a1c$var$PORTAL_NAME, __scopeMenu);
|
|
15208
|
+
return /*#__PURE__*/ React.createElement($6cc32821e9371a1c$var$PortalProvider, {
|
|
15209
|
+
scope: __scopeMenu,
|
|
15210
|
+
forceMount: forceMount
|
|
15211
|
+
}, /*#__PURE__*/ React.createElement($921a889cee6df7e8$export$99c2b779aa4e8b8b, {
|
|
15212
|
+
present: forceMount || context.open
|
|
15213
|
+
}, /*#__PURE__*/ React.createElement($f1701beae083dbae$export$602eac185826482c, {
|
|
15214
|
+
asChild: true,
|
|
15215
|
+
container: container
|
|
15216
|
+
}, children)));
|
|
15217
|
+
};
|
|
15193
15218
|
/* -------------------------------------------------------------------------------------------------
|
|
15194
15219
|
* MenuContent
|
|
15195
15220
|
* -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$CONTENT_NAME = 'MenuContent';
|
|
@@ -15845,6 +15870,7 @@ function $6cc32821e9371a1c$var$whenMouse(handler) {
|
|
|
15845
15870
|
}
|
|
15846
15871
|
const $6cc32821e9371a1c$export$be92b6f5f03c0fe9 = $6cc32821e9371a1c$export$d9b273488cd8ce6f;
|
|
15847
15872
|
const $6cc32821e9371a1c$export$b688253958b8dfe7 = $6cc32821e9371a1c$export$9fa5ebd18bee4d43;
|
|
15873
|
+
const $6cc32821e9371a1c$export$602eac185826482c = $6cc32821e9371a1c$export$793392f970497feb;
|
|
15848
15874
|
const $6cc32821e9371a1c$export$7c6e2c02157bb7d2 = $6cc32821e9371a1c$export$479f0f2f71193efe;
|
|
15849
15875
|
const $6cc32821e9371a1c$export$b04be29aa201d4f5 = $6cc32821e9371a1c$export$dd37bec0e8a99143;
|
|
15850
15876
|
const $6cc32821e9371a1c$export$6d08773d2e66f8f2 = $6cc32821e9371a1c$export$2ce376c2cc3355c8;
|
|
@@ -15936,6 +15962,11 @@ const $d08ef79370b62062$export$d2469213b3befba9 = /*#__PURE__*/ React.forwardRef
|
|
|
15936
15962
|
})
|
|
15937
15963
|
})));
|
|
15938
15964
|
});
|
|
15965
|
+
const $d08ef79370b62062$export$cd369b4d4d54efc9 = (props)=>{
|
|
15966
|
+
const { __scopeDropdownMenu: __scopeDropdownMenu , ...portalProps } = props;
|
|
15967
|
+
const menuScope = $d08ef79370b62062$var$useMenuScope(__scopeDropdownMenu);
|
|
15968
|
+
return /*#__PURE__*/ React.createElement($6cc32821e9371a1c$export$602eac185826482c, _extends({}, menuScope, portalProps));
|
|
15969
|
+
};
|
|
15939
15970
|
/* -------------------------------------------------------------------------------------------------
|
|
15940
15971
|
* DropdownMenuContent
|
|
15941
15972
|
* -----------------------------------------------------------------------------------------------*/ const $d08ef79370b62062$var$CONTENT_NAME = 'DropdownMenuContent';
|
|
@@ -16038,6 +16069,7 @@ const $d08ef79370b62062$export$f34ec8bc2482cc5f = /*#__PURE__*/ React.forwardRef
|
|
|
16038
16069
|
});
|
|
16039
16070
|
/* -----------------------------------------------------------------------------------------------*/ const $d08ef79370b62062$export$be92b6f5f03c0fe9 = $d08ef79370b62062$export$e44a253a59704894;
|
|
16040
16071
|
const $d08ef79370b62062$export$41fb9f06171c75f4 = $d08ef79370b62062$export$d2469213b3befba9;
|
|
16072
|
+
const $d08ef79370b62062$export$602eac185826482c = $d08ef79370b62062$export$cd369b4d4d54efc9;
|
|
16041
16073
|
const $d08ef79370b62062$export$7c6e2c02157bb7d2 = $d08ef79370b62062$export$6e76d93a37c01248;
|
|
16042
16074
|
const $d08ef79370b62062$export$b04be29aa201d4f5 = $d08ef79370b62062$export$76e48c5b57f24495;
|
|
16043
16075
|
const $d08ef79370b62062$export$6d08773d2e66f8f2 = $d08ef79370b62062$export$ed97964d1871885d;
|
|
@@ -16061,49 +16093,53 @@ const ButtonWithDropdown = ({ dropdownItems, triggerIcon, id, extraClassNames, c
|
|
|
16061
16093
|
return (React__namespace.createElement($d08ef79370b62062$export$be92b6f5f03c0fe9, { defaultOpen: false, open: isOpen, onOpenChange: onOpenChange, modal: keepFocusInsideDropdown },
|
|
16062
16094
|
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
16095
|
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
|
|
16096
|
+
React__namespace.createElement($d08ef79370b62062$export$602eac185826482c, null,
|
|
16097
|
+
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" },
|
|
16098
|
+
React__namespace.createElement("div", { "data-testid": containerTestId, className: bgStyles$1 +
|
|
16099
|
+
' tw-relative tw-z-[1200] tw-min-w-6 tw-py-2 focus-visible:tw-outline-none tw-outline-none' +
|
|
16100
|
+
' data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out' +
|
|
16101
|
+
' 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 ' +
|
|
16102
|
+
borderStyles$1 },
|
|
16103
|
+
hasArrow && (React__namespace.createElement($d08ef79370b62062$export$21b07c8f274aebd5, { asChild: true },
|
|
16104
|
+
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]" }))),
|
|
16105
|
+
dropdownItems.map((item, index) => {
|
|
16106
|
+
if (item.isLabel) {
|
|
16107
|
+
return (React__namespace.createElement($d08ef79370b62062$export$b04be29aa201d4f5, { key: (item.label || '') + index, className: item.containerExtraClassNames },
|
|
16108
|
+
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]" })),
|
|
16109
|
+
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)));
|
|
16110
|
+
}
|
|
16111
|
+
if (Array.isArray(item.subMenuItems) && item.subMenuItems.length > 0) {
|
|
16112
|
+
return (React__namespace.createElement($d08ef79370b62062$export$d7a01e11500dfb6f, { key: item.label + index },
|
|
16113
|
+
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 },
|
|
16114
|
+
React__namespace.createElement("div", { className: "tw-flex" },
|
|
16115
|
+
item.icon && (React__namespace.createElement(Icon, { icon: item.icon, extraClassNames: `tw-w-[18px] ${item.disabled
|
|
16092
16116
|
? '!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
|
-
|
|
16117
|
+
: 'tw-text-sq-text-color dark:tw-text-sq-white'} ${item.iconExtraClassNames || ''}` })),
|
|
16118
|
+
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)),
|
|
16119
|
+
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` })),
|
|
16120
|
+
React__namespace.createElement($d08ef79370b62062$export$602eac185826482c, null,
|
|
16121
|
+
React__namespace.createElement($d08ef79370b62062$export$6d4de93b380beddf, { className: "focus-visible:tw-outline-none tw-outline-none" },
|
|
16122
|
+
React__namespace.createElement("div", { "data-testid": containerTestId, className: bgStyles$1 +
|
|
16123
|
+
' 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' +
|
|
16124
|
+
' 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 ' +
|
|
16125
|
+
borderStyles$1 }, item.subMenuItems.map((subItem, subIndex) => {
|
|
16126
|
+
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 },
|
|
16127
|
+
subItem.iconClass && (React__namespace.createElement(Icon, { icon: subItem.iconClass, extraClassNames: `tw-w-[18px] ${subItem.disabled
|
|
16128
|
+
? '!tw-text-sq-disabled-gray'
|
|
16129
|
+
: 'tw-text-sq-text-color dark:tw-text-sq-white'}` })),
|
|
16130
|
+
React__namespace.createElement("div", { className: `tw-text-[13px] tw-ml-1 ${subItem.disabled
|
|
16131
|
+
? 'tw-text-sq-disabled-gray'
|
|
16132
|
+
: 'tw-text-sq-text-color dark:tw-text-sq-white'} tw-not-italic tw-font-normal ${item.labelClasses}` }, subItem.label)));
|
|
16133
|
+
}))))));
|
|
16134
|
+
}
|
|
16135
|
+
return (React__namespace.createElement("div", { key: item.label + index },
|
|
16136
|
+
React__namespace.createElement($d08ef79370b62062$export$6d08773d2e66f8f2, { key: item.label + index, "data-customid": item.itemCustomId, onSelect: (e) => {
|
|
16137
|
+
item.onClick(e);
|
|
16138
|
+
}, 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 },
|
|
16139
|
+
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 || ''}` })),
|
|
16140
|
+
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)),
|
|
16141
|
+
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]" }))));
|
|
16142
|
+
}))))));
|
|
16107
16143
|
};
|
|
16108
16144
|
|
|
16109
16145
|
const NewWorkbenchItem = (item) => {
|