@seeqdev/qomponents 0.0.122 → 0.0.124

package/dist/index.js

@@ -15796,30 +15796,26 @@ const borderStyles$1 = [
 ].join(' ');
 const bgStyles$1 = ['tw-bg-sq-white', 'dark:tw-bg-sq-dark-background'].join(' ');
 const disabledClasses$1 = ['tw-opacity-50', 'tw-cursor-not-allowed'].join(' ');
-const ButtonWithDropdown = ({ dropdownItems, triggerIcon, id, extraClassNames, containerTestId, disabled = false, align = 'end', placement = 'bottom', placementOffset = 5, alignOffset = -35, hasArrow = false, onOpenChange, isOpen, setFocusOnTriggerOnClose = true, keepFocusInsideDropdown = true, onContainerClick, ...tooltipProps }) => {
+const ButtonWithDropdown = ({ dropdownItems, triggerIcon, id, extraClassNames = '', contentExtraClassNames = '', containerTestId, disabled = false, align = 'end', placement = 'bottom', placementOffset = 5, alignOffset = -35, hasArrow = false, onOpenChange, isOpen, setFocusOnTriggerOnClose = true, keepFocusInsideDropdown = true, onContainerClick, ...tooltipProps }) => {
     const tooltipData = getQTipData(tooltipProps);
     return (React__namespace.createElement($d08ef79370b62062$export$be92b6f5f03c0fe9, { defaultOpen: false, open: isOpen, onOpenChange: onOpenChange, modal: keepFocusInsideDropdown },
         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 },
-            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)),
+            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)),
         React__namespace.createElement($d08ef79370b62062$export$602eac185826482c, null,
             React__namespace.createElement($d08ef79370b62062$export$7c6e2c02157bb7d2, { onClick: onContainerClick, sideOffset: placementOffset, side: placement, align: align, alignOffset: alignOffset, asChild: true, onCloseAutoFocus: (e) => !setFocusOnTriggerOnClose && e.preventDefault(), className: "focus-visible:tw-outline-none tw-outline-none" },
-                React__namespace.createElement("div", { "data-testid": containerTestId, className: bgStyles$1 +
-                        ' tw-relative tw-z-[1200] 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' +
-                        ' 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 ' +
-                        borderStyles$1 },
+                React__namespace.createElement("div", { "data-testid": containerTestId, className: `${bgStyles$1} tw-relative tw-z-[1200] 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 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 ${borderStyles$1} ${contentExtraClassNames}` },
                     hasArrow && (React__namespace.createElement($d08ef79370b62062$export$21b07c8f274aebd5, { asChild: true },
                         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]" }))),
                     dropdownItems.map((item, index) => {
                         const tooltipData = getQTipData(item);
                         if (item.isLabel) {
-                            return (React__namespace.createElement($d08ef79370b62062$export$b04be29aa201d4f5, { key: (item.label || '') + index, className: item.containerExtraClassNames, ...tooltipData },
+                            return (React__namespace.createElement($d08ef79370b62062$export$b04be29aa201d4f5, { key: (item.id || '') + index, className: item.itemExtraClassNames, ...tooltipData },
                                 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]" })),
                                 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)));
                         }
                         if (Array.isArray(item.subMenuItems) && item.subMenuItems.length > 0) {
-                            return (React__namespace.createElement($d08ef79370b62062$export$d7a01e11500dfb6f, { key: item.label + index },
-                                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, ...tooltipData },
+                            return (React__namespace.createElement($d08ef79370b62062$export$d7a01e11500dfb6f, { key: (item.id || item.icon || '') + index },
+                                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.itemExtraClassNames || ''}`, "data-testid": item.testId, disabled: item.disabled, ...tooltipData },
                                     React__namespace.createElement("div", { className: "tw-flex" },
                                         item.icon && (React__namespace.createElement(Icon, { icon: item.icon, extraClassNames: `tw-w-[18px] ${item.disabled
                                                 ? '!tw-text-sq-disabled-gray'
@@ -15828,21 +15824,18 @@ const ButtonWithDropdown = ({ dropdownItems, triggerIcon, id, extraClassNames, c
                                     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` })),
                                 React__namespace.createElement($d08ef79370b62062$export$602eac185826482c, null,
                                     React__namespace.createElement($d08ef79370b62062$export$6d4de93b380beddf, { className: "focus-visible:tw-outline-none tw-outline-none" },
-                                        React__namespace.createElement("div", { "data-testid": containerTestId, className: bgStyles$1 +
-                                                ' 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' +
-                                                ' 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 ' +
-                                                borderStyles$1 }, item.subMenuItems.map((subItem, subIndex) => {
+                                        React__namespace.createElement("div", { "data-testid": containerTestId, className: `${bgStyles$1} 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 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 ${borderStyles$1}` }, item.subMenuItems.map((subItem, subIndex) => {
                                             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 },
-                                                subItem.iconClass && (React__namespace.createElement(Icon, { icon: subItem.iconClass, extraClassNames: `tw-w-[18px] ${item.disabled && '!tw-opacity-30'}` })),
+                                                subItem.iconClass && (React__namespace.createElement(Icon, { icon: subItem.iconClass, type: "text", extraClassNames: `tw-w-[18px] ${item.disabled && '!tw-opacity-30'}` })),
                                                 React__namespace.createElement("div", { className: `tw-text-[13px] tw-ml-1 ${subItem.disabled
                                                         ? 'tw-text-sq-disabled-gray'
                                                         : 'tw-text-sq-text-color dark:tw-text-sq-white'} tw-not-italic tw-font-normal ${item.labelClasses}` }, subItem.label)));
                                         }))))));
                         }
-                        return (React__namespace.createElement("div", { key: item.label + index, ...tooltipData },
-                            React__namespace.createElement($d08ef79370b62062$export$6d08773d2e66f8f2, { key: item.label + index, "data-customid": item.itemCustomId, onSelect: (e) => {
+                        return (React__namespace.createElement("div", { key: (item.id || '') + index, ...tooltipData },
+                            React__namespace.createElement($d08ef79370b62062$export$6d08773d2e66f8f2, { key: (item.id || item.icon || '') + index, "data-customid": item.itemCustomId, onSelect: (e) => {
                                     item.onClick(e);
-                                }, 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 },
+                                }, 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-min-h-[27px] tw-px-[19px] tw-relative tw-select-none tw-outline-none data-[disabled]:tw-pointer-events-none ${item.itemExtraClassNames || ''}`, "data-testid": item.testId, disabled: item.disabled },
                                 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-opacity-30'} ${item.iconExtraClassNames || ''}` })),
                                 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)),
                             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]" }))));
@@ -20732,12 +20725,12 @@ const activeClassesByVariantDarkTheme = {
  * ButtonGroup.
  */
 const ButtonGroup = (props) => {
-    const { id, extraClassNames, value, testId, onChange, buttons = [], ...tooltipProps } = props;
+    const { id, extraClassNames, testId, onChange, buttons = [], ...tooltipProps } = props;
     const tooltipData = getQTipData(tooltipProps);
     const appliedClasses = `${baseClasses} ${extraClassNames}`;
-    return (React.createElement("div", { id: `button-group-${id || ''}`, "data-testid": testId, className: appliedClasses, ...tooltipData }, buttons.filter(Boolean).map((item, index) => item?.variant === 'button' ? (React.createElement(Button, { key: index, ...item.buttonProps, extraClassNames: `tw-ml-[-1px] focus:tw-z-40 tw-outline-none focus:tw-border tw-rounded-r-none tw-rounded-l-none last:tw-rounded-r-sm first:tw-rounded-l-sm ${item?.buttonProps && value === item?.buttonProps?.buttonValue
+    return (React.createElement("div", { id: id ? `button-group-${id}` : undefined, "data-testid": testId, className: appliedClasses, ...tooltipData }, buttons.filter(Boolean).map((item, index) => item?.variant === 'button' ? (React.createElement(Button, { key: index, ...item.buttonProps, extraClassNames: `tw-ml-[-1px] focus:tw-z-40 tw-outline-none focus:tw-border tw-rounded-r-none tw-rounded-l-none last:tw-rounded-r-sm first:tw-rounded-l-sm ${item.buttonProps?.isActive
             ? `${activeClassesByVariantLightTheme[item?.buttonProps?.variant ?? 'outline']} ${activeClassesByVariantDarkTheme[item?.buttonProps?.variant ?? 'outline']} `
-            : ''} ${item.buttonProps.extraClassNames}`, onClick: () => onChange && onChange(item?.buttonProps?.buttonValue) })) : (React.createElement("div", { key: index, className: ` tw-flex tw-items-center tw-justify-center tw-rounded-none tw-ml-[-1px] active:tw-z-30 ${item?.extraClassNames || ''}` }, item?.element)))));
+            : ''} ${item.buttonProps.extraClassNames}`, onClick: () => onChange && onChange(item?.buttonProps?.value) })) : (React.createElement("div", { key: index, className: ` tw-flex tw-items-center tw-justify-center tw-rounded-none tw-ml-[-1px] active:tw-z-30 ${item?.extraClassNames || ''}` }, item?.element)))));
 };
 
 exports.Accordion = Accordion;