@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.esm.js
CHANGED
|
@@ -14058,16 +14058,17 @@ const DialogContent = React__default.forwardRef(({ className, children, ...props
|
|
|
14058
14058
|
tw-gap-4 tw-border tw-bg-sq-white dark:tw-bg-sq-dark-background tw-p-6 tw-shadow-lg tw-duration-200
|
|
14059
14059
|
tw-rounded-lg ${className}`, ...props }, children))));
|
|
14060
14060
|
DialogContent.displayName = $5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2.displayName;
|
|
14061
|
-
const DialogHeader = (
|
|
14062
|
-
React__default.createElement("div", {
|
|
14061
|
+
const DialogHeader = (props) => (React__default.createElement("div", { className: "tw-w-full tw-justify-between" },
|
|
14062
|
+
React__default.createElement("div", { ...props })));
|
|
14063
14063
|
DialogHeader.displayName = 'DialogHeader';
|
|
14064
|
-
const DialogFooter = (
|
|
14064
|
+
const DialogFooter = (props) => React__default.createElement("div", { ...props });
|
|
14065
14065
|
DialogFooter.displayName = 'DialogFooter';
|
|
14066
|
-
const DialogTitle = React__default.forwardRef((
|
|
14066
|
+
const DialogTitle = React__default.forwardRef((props, ref) => React__default.createElement($5d3850c4d0b4e6c7$export$f99233281efd08a0, { ref: ref, ...props }));
|
|
14067
14067
|
DialogTitle.displayName = $5d3850c4d0b4e6c7$export$f99233281efd08a0.displayName;
|
|
14068
|
-
const DialogDescription = React__default.forwardRef((
|
|
14068
|
+
const DialogDescription = React__default.forwardRef((props, ref) => React__default.createElement($5d3850c4d0b4e6c7$export$393edc798c47379d, { ref: ref, ...props }));
|
|
14069
14069
|
DialogDescription.displayName = $5d3850c4d0b4e6c7$export$393edc798c47379d.displayName;
|
|
14070
14070
|
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__default.createElement(React__default.Fragment, null), customButtonVariant = 'outline', keepFocusInsideModal = true, }) => {
|
|
14071
|
+
const [isLoading, setIsLoading] = useState(false);
|
|
14071
14072
|
// the Dialog is adding pointerEvents: none to body and the dropdowns from the modal does not work anymore
|
|
14072
14073
|
useEffect(() => {
|
|
14073
14074
|
if (open) {
|
|
@@ -14081,6 +14082,17 @@ const Modal = ({ titleIcon, title = 'Modal title example', titleSuffixLabel, sub
|
|
|
14081
14082
|
document.body.style.pointerEvents = 'auto';
|
|
14082
14083
|
}
|
|
14083
14084
|
}, [open]);
|
|
14085
|
+
const handleSubmit = async (e) => {
|
|
14086
|
+
if (!onSubmit)
|
|
14087
|
+
return;
|
|
14088
|
+
try {
|
|
14089
|
+
setIsLoading(true);
|
|
14090
|
+
await onSubmit(e);
|
|
14091
|
+
}
|
|
14092
|
+
finally {
|
|
14093
|
+
setIsLoading(false);
|
|
14094
|
+
}
|
|
14095
|
+
};
|
|
14084
14096
|
const renderTitle = () => {
|
|
14085
14097
|
let titleIconElement = React__default.createElement(React__default.Fragment, null);
|
|
14086
14098
|
if (titleIcon) {
|
|
@@ -14126,7 +14138,7 @@ const Modal = ({ titleIcon, title = 'Modal title example', titleSuffixLabel, sub
|
|
|
14126
14138
|
React__default.createElement("div", { className: "tw-flex tw-items-center" }, middleFooterSection),
|
|
14127
14139
|
!hideCancelButton && (React__default.createElement(DialogClose, { asChild: true },
|
|
14128
14140
|
React__default.createElement(Button, { label: cancelButtonLabel, extraClassNames: "tw-mr-5 tw-min-w-[100px]", tooltip: cancelButtonTooltip, variant: "outline", stopPropagation: false, testId: "cancelButton" }))),
|
|
14129
|
-
!hideSubmitButton && (React__default.createElement(Button, { label: submitButtonLabel, onClick:
|
|
14141
|
+
!hideSubmitButton && (React__default.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__default.createElement(React__default.Fragment, null));
|
|
14130
14142
|
};
|
|
14131
14143
|
|
|
14132
14144
|
// We have resorted to returning slots directly rather than exposing primitives that can then
|
|
@@ -15013,7 +15025,7 @@ const borderStyles$2 = [
|
|
|
15013
15025
|
'dark:tw-border-gray-500',
|
|
15014
15026
|
].join(' ');
|
|
15015
15027
|
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,
|
|
15028
|
+
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
15029
|
const tooltipData = getQTipData(tooltipProps);
|
|
15018
15030
|
let timeout;
|
|
15019
15031
|
const [isHoveredOpen, setIsHoveredOpen] = React.useState(false);
|
|
@@ -15170,6 +15182,19 @@ const $6cc32821e9371a1c$export$9fa5ebd18bee4d43 = /*#__PURE__*/ forwardRef((prop
|
|
|
15170
15182
|
const [$6cc32821e9371a1c$var$PortalProvider, $6cc32821e9371a1c$var$usePortalContext] = $6cc32821e9371a1c$var$createMenuContext($6cc32821e9371a1c$var$PORTAL_NAME, {
|
|
15171
15183
|
forceMount: undefined
|
|
15172
15184
|
});
|
|
15185
|
+
const $6cc32821e9371a1c$export$793392f970497feb = (props)=>{
|
|
15186
|
+
const { __scopeMenu: __scopeMenu , forceMount: forceMount , children: children , container: container } = props;
|
|
15187
|
+
const context = $6cc32821e9371a1c$var$useMenuContext($6cc32821e9371a1c$var$PORTAL_NAME, __scopeMenu);
|
|
15188
|
+
return /*#__PURE__*/ createElement($6cc32821e9371a1c$var$PortalProvider, {
|
|
15189
|
+
scope: __scopeMenu,
|
|
15190
|
+
forceMount: forceMount
|
|
15191
|
+
}, /*#__PURE__*/ createElement($921a889cee6df7e8$export$99c2b779aa4e8b8b, {
|
|
15192
|
+
present: forceMount || context.open
|
|
15193
|
+
}, /*#__PURE__*/ createElement($f1701beae083dbae$export$602eac185826482c, {
|
|
15194
|
+
asChild: true,
|
|
15195
|
+
container: container
|
|
15196
|
+
}, children)));
|
|
15197
|
+
};
|
|
15173
15198
|
/* -------------------------------------------------------------------------------------------------
|
|
15174
15199
|
* MenuContent
|
|
15175
15200
|
* -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$CONTENT_NAME = 'MenuContent';
|
|
@@ -15825,6 +15850,7 @@ function $6cc32821e9371a1c$var$whenMouse(handler) {
|
|
|
15825
15850
|
}
|
|
15826
15851
|
const $6cc32821e9371a1c$export$be92b6f5f03c0fe9 = $6cc32821e9371a1c$export$d9b273488cd8ce6f;
|
|
15827
15852
|
const $6cc32821e9371a1c$export$b688253958b8dfe7 = $6cc32821e9371a1c$export$9fa5ebd18bee4d43;
|
|
15853
|
+
const $6cc32821e9371a1c$export$602eac185826482c = $6cc32821e9371a1c$export$793392f970497feb;
|
|
15828
15854
|
const $6cc32821e9371a1c$export$7c6e2c02157bb7d2 = $6cc32821e9371a1c$export$479f0f2f71193efe;
|
|
15829
15855
|
const $6cc32821e9371a1c$export$b04be29aa201d4f5 = $6cc32821e9371a1c$export$dd37bec0e8a99143;
|
|
15830
15856
|
const $6cc32821e9371a1c$export$6d08773d2e66f8f2 = $6cc32821e9371a1c$export$2ce376c2cc3355c8;
|
|
@@ -15916,6 +15942,11 @@ const $d08ef79370b62062$export$d2469213b3befba9 = /*#__PURE__*/ forwardRef((prop
|
|
|
15916
15942
|
})
|
|
15917
15943
|
})));
|
|
15918
15944
|
});
|
|
15945
|
+
const $d08ef79370b62062$export$cd369b4d4d54efc9 = (props)=>{
|
|
15946
|
+
const { __scopeDropdownMenu: __scopeDropdownMenu , ...portalProps } = props;
|
|
15947
|
+
const menuScope = $d08ef79370b62062$var$useMenuScope(__scopeDropdownMenu);
|
|
15948
|
+
return /*#__PURE__*/ createElement($6cc32821e9371a1c$export$602eac185826482c, _extends({}, menuScope, portalProps));
|
|
15949
|
+
};
|
|
15919
15950
|
/* -------------------------------------------------------------------------------------------------
|
|
15920
15951
|
* DropdownMenuContent
|
|
15921
15952
|
* -----------------------------------------------------------------------------------------------*/ const $d08ef79370b62062$var$CONTENT_NAME = 'DropdownMenuContent';
|
|
@@ -16018,6 +16049,7 @@ const $d08ef79370b62062$export$f34ec8bc2482cc5f = /*#__PURE__*/ forwardRef((prop
|
|
|
16018
16049
|
});
|
|
16019
16050
|
/* -----------------------------------------------------------------------------------------------*/ const $d08ef79370b62062$export$be92b6f5f03c0fe9 = $d08ef79370b62062$export$e44a253a59704894;
|
|
16020
16051
|
const $d08ef79370b62062$export$41fb9f06171c75f4 = $d08ef79370b62062$export$d2469213b3befba9;
|
|
16052
|
+
const $d08ef79370b62062$export$602eac185826482c = $d08ef79370b62062$export$cd369b4d4d54efc9;
|
|
16021
16053
|
const $d08ef79370b62062$export$7c6e2c02157bb7d2 = $d08ef79370b62062$export$6e76d93a37c01248;
|
|
16022
16054
|
const $d08ef79370b62062$export$b04be29aa201d4f5 = $d08ef79370b62062$export$76e48c5b57f24495;
|
|
16023
16055
|
const $d08ef79370b62062$export$6d08773d2e66f8f2 = $d08ef79370b62062$export$ed97964d1871885d;
|
|
@@ -16041,49 +16073,53 @@ const ButtonWithDropdown = ({ dropdownItems, triggerIcon, id, extraClassNames, c
|
|
|
16041
16073
|
return (React.createElement($d08ef79370b62062$export$be92b6f5f03c0fe9, { defaultOpen: false, open: isOpen, onOpenChange: onOpenChange, modal: keepFocusInsideDropdown },
|
|
16042
16074
|
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
16075
|
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
|
|
16076
|
+
React.createElement($d08ef79370b62062$export$602eac185826482c, null,
|
|
16077
|
+
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" },
|
|
16078
|
+
React.createElement("div", { "data-testid": containerTestId, className: bgStyles$1 +
|
|
16079
|
+
' tw-relative tw-z-[1200] tw-min-w-6 tw-py-2 focus-visible:tw-outline-none tw-outline-none' +
|
|
16080
|
+
' data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out' +
|
|
16081
|
+
' 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 ' +
|
|
16082
|
+
borderStyles$1 },
|
|
16083
|
+
hasArrow && (React.createElement($d08ef79370b62062$export$21b07c8f274aebd5, { asChild: true },
|
|
16084
|
+
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]" }))),
|
|
16085
|
+
dropdownItems.map((item, index) => {
|
|
16086
|
+
if (item.isLabel) {
|
|
16087
|
+
return (React.createElement($d08ef79370b62062$export$b04be29aa201d4f5, { key: (item.label || '') + index, className: item.containerExtraClassNames },
|
|
16088
|
+
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]" })),
|
|
16089
|
+
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)));
|
|
16090
|
+
}
|
|
16091
|
+
if (Array.isArray(item.subMenuItems) && item.subMenuItems.length > 0) {
|
|
16092
|
+
return (React.createElement($d08ef79370b62062$export$d7a01e11500dfb6f, { key: item.label + index },
|
|
16093
|
+
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 },
|
|
16094
|
+
React.createElement("div", { className: "tw-flex" },
|
|
16095
|
+
item.icon && (React.createElement(Icon, { icon: item.icon, extraClassNames: `tw-w-[18px] ${item.disabled
|
|
16072
16096
|
? '!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
|
-
|
|
16097
|
+
: 'tw-text-sq-text-color dark:tw-text-sq-white'} ${item.iconExtraClassNames || ''}` })),
|
|
16098
|
+
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)),
|
|
16099
|
+
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` })),
|
|
16100
|
+
React.createElement($d08ef79370b62062$export$602eac185826482c, null,
|
|
16101
|
+
React.createElement($d08ef79370b62062$export$6d4de93b380beddf, { className: "focus-visible:tw-outline-none tw-outline-none" },
|
|
16102
|
+
React.createElement("div", { "data-testid": containerTestId, className: bgStyles$1 +
|
|
16103
|
+
' 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' +
|
|
16104
|
+
' 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 ' +
|
|
16105
|
+
borderStyles$1 }, item.subMenuItems.map((subItem, subIndex) => {
|
|
16106
|
+
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 },
|
|
16107
|
+
subItem.iconClass && (React.createElement(Icon, { icon: subItem.iconClass, extraClassNames: `tw-w-[18px] ${subItem.disabled
|
|
16108
|
+
? '!tw-text-sq-disabled-gray'
|
|
16109
|
+
: 'tw-text-sq-text-color dark:tw-text-sq-white'}` })),
|
|
16110
|
+
React.createElement("div", { className: `tw-text-[13px] tw-ml-1 ${subItem.disabled
|
|
16111
|
+
? 'tw-text-sq-disabled-gray'
|
|
16112
|
+
: 'tw-text-sq-text-color dark:tw-text-sq-white'} tw-not-italic tw-font-normal ${item.labelClasses}` }, subItem.label)));
|
|
16113
|
+
}))))));
|
|
16114
|
+
}
|
|
16115
|
+
return (React.createElement("div", { key: item.label + index },
|
|
16116
|
+
React.createElement($d08ef79370b62062$export$6d08773d2e66f8f2, { key: item.label + index, "data-customid": item.itemCustomId, onSelect: (e) => {
|
|
16117
|
+
item.onClick(e);
|
|
16118
|
+
}, 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 },
|
|
16119
|
+
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 || ''}` })),
|
|
16120
|
+
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)),
|
|
16121
|
+
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]" }))));
|
|
16122
|
+
}))))));
|
|
16087
16123
|
};
|
|
16088
16124
|
|
|
16089
16125
|
const NewWorkbenchItem = (item) => {
|