@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/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 = ({ className, ...props }) => (React__default.createElement("div", { className: "tw-w-full tw-justify-between" },
14062
- React__default.createElement("div", { className: `flex flex-col space-y-1.5 text-center sm:text-left ${className}`, ...props })));
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 = ({ className, ...props }) => (React__default.createElement("div", { className: `flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 ${className}`, ...props }));
14064
+ const DialogFooter = (props) => React__default.createElement("div", { ...props });
14065
14065
  DialogFooter.displayName = 'DialogFooter';
14066
- const DialogTitle = React__default.forwardRef(({ className, ...props }, ref) => (React__default.createElement($5d3850c4d0b4e6c7$export$f99233281efd08a0, { ref: ref, className: `text-lg font-semibold leading-none tracking-tight ${className}`, ...props })));
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(({ className, ...props }, ref) => (React__default.createElement($5d3850c4d0b4e6c7$export$393edc798c47379d, { ref: ref, className: `text-sm text-muted-foreground ${className}`, ...props })));
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: onSubmit, disabled: disableSubmitButton, variant: "theme", stopPropagation: stopPropagationSubmitButton, tooltip: submitButtonTooltip, testId: "submitButton", extraClassNames: "tw-min-w-[100px]" })))))))))) : (React__default.createElement(React__default.Fragment, null));
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, setFocusOnTriggerOnClose = true, isPortal = false, ...tooltipProps }) => {
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$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" },
16045
- React.createElement("div", { "data-testid": containerTestId, className: bgStyles$1 +
16046
- ' tw-relative tw-z-[1200] tw-min-w-6 tw-py-2 focus-visible:tw-outline-none tw-outline-none' +
16047
- ' data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out' +
16048
- ' 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 ' +
16049
- borderStyles$1 },
16050
- hasArrow && (React.createElement($d08ef79370b62062$export$21b07c8f274aebd5, { asChild: true },
16051
- 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]" }))),
16052
- dropdownItems.map((item, index) => {
16053
- if (item.isLabel) {
16054
- return (React.createElement($d08ef79370b62062$export$b04be29aa201d4f5, { key: (item.label || '') + index, className: item.containerExtraClassNames },
16055
- 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]" })),
16056
- 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)));
16057
- }
16058
- if (Array.isArray(item.subMenuItems) && item.subMenuItems.length > 0) {
16059
- return (React.createElement($d08ef79370b62062$export$d7a01e11500dfb6f, { key: item.label + index },
16060
- 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 },
16061
- React.createElement("div", { className: "tw-flex" },
16062
- item.icon && (React.createElement(Icon, { icon: item.icon, extraClassNames: `tw-w-[18px] ${item.disabled ? '!tw-text-sq-disabled-gray' : 'tw-text-sq-text-color dark:tw-text-sq-white'} ${item.iconExtraClassNames || ''}` })),
16063
- 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)),
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 ${subItem.disabled
16075
- ? 'tw-text-sq-disabled-gray'
16076
- : 'tw-text-sq-text-color dark:tw-text-sq-white'} tw-not-italic tw-font-normal ${item.labelClasses}` }, subItem.label)));
16077
- })))));
16078
- }
16079
- return (React.createElement("div", { key: item.label + index },
16080
- React.createElement($d08ef79370b62062$export$6d08773d2e66f8f2, { key: item.label + index, "data-customid": item.itemCustomId, onSelect: (e) => {
16081
- item.onClick(e);
16082
- }, 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 },
16083
- 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 || ''}` })),
16084
- 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)),
16085
- 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]" }))));
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) => {