@seeqdev/qomponents 0.0.74 → 0.0.75

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.js CHANGED
@@ -15056,7 +15056,7 @@ const ButtonWithPopover = ({ children, trigger, id, hasArrow, extraTriggerClassN
15056
15056
  data-[side=top]:tw-animate-slideDownAndFade data-[side=right]:tw-animate-slideLeftAndFade data-[side=bottom]:tw-animate-slideUpAndFade data-[side=left]:tw-animate-slideRightAndFade tw-text-sq-text-color
15057
15057
  ${extraPopoverClassNames || ''}` },
15058
15058
  hasArrow && (React__namespace.createElement($cb5cc270b50c6fcd$export$21b07c8f274aebd5, { asChild: true },
15059
- React__namespace.createElement("div", { className: " tw-fill-transparent tw-bg-white tw-w-[15px] tw-h-[15px] tw-mt-[-7px] 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" }))),
15059
+ React__namespace.createElement("div", { className: "tw-fill-transparent tw-bg-white tw-w-[15px] tw-h-[15px] tw-mt-[-7px] 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" }))),
15060
15060
  children)));
15061
15061
  };
15062
15062
  const renderPopover = (popoverOpenState) => {
@@ -16069,31 +16069,35 @@ const ButtonWithDropdown = ({ dropdownItems, triggerIcon, id, extraClassNames, c
16069
16069
  if (item.isLabel) {
16070
16070
  return (React__namespace.createElement($d08ef79370b62062$export$b04be29aa201d4f5, { key: (item.label || '') + index, className: item.containerExtraClassNames },
16071
16071
  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]" })),
16072
- React__namespace.createElement("div", { "data-testid": item.labelTestId, className: "tw-text-[13px] tw-text-sq-text-color dark:tw-text-sq-white tw-ml-1" }, item.label)));
16072
+ 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)));
16073
16073
  }
16074
16074
  if (Array.isArray(item.subMenuItems) && item.subMenuItems.length > 0) {
16075
16075
  return (React__namespace.createElement($d08ef79370b62062$export$d7a01e11500dfb6f, { key: item.label + index },
16076
- 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-text-sq-disabled-gray data-[disabled]:tw-pointer-events-none ${item.containerExtraClassNames || ''}`, "data-testid": item.testId, disabled: item.disabled },
16076
+ 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 },
16077
16077
  React__namespace.createElement("div", { className: "tw-flex" },
16078
- item.icon && (React__namespace.createElement(Icon, { icon: item.icon, extraClassNames: `tw-text-sq-text-color dark:tw-text-sq-white tw-w-[18px] ${item.iconExtraClassNames || ''}` })),
16079
- React__namespace.createElement("div", { "data-testid": item.labelTestId, "data-customid": item.labelCustomId, className: `tw-text-[13px] tw-ml-1 ${item.labelClasses}` }, item.label)),
16080
- React__namespace.createElement(Icon, { small: true, icon: "fc-arrow-dropdown -tw-rotate-90", extraClassNames: "tw-text-sq-text-color dark:tw-text-sq-white tw-w-[18px] tw-ml-4 tw-text-[8px] tw-justify-center tw-flex" })),
16078
+ item.icon && (React__namespace.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 || ''}` })),
16079
+ 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)),
16080
+ 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` })),
16081
16081
  React__namespace.createElement($d08ef79370b62062$export$6d4de93b380beddf, { className: "focus-visible:tw-outline-none tw-outline-none" },
16082
16082
  React__namespace.createElement("div", { "data-testid": containerTestId, className: bgStyles +
16083
16083
  ' 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' +
16084
16084
  ' 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 ' +
16085
16085
  borderStyles }, item.subMenuItems.map((subItem, subIndex) => {
16086
- 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-text-sq-disabled-gray data-[disabled]:tw-pointer-events-none", disabled: subItem.disabled },
16087
- subItem.iconClass && (React__namespace.createElement(Icon, { icon: subItem.iconClass, extraClassNames: `tw-text-sq-text-color dark:tw-text-sq-white tw-w-[18px]` })),
16088
- React__namespace.createElement("div", { className: `tw-text-[13px] tw-ml-1` }, subItem.label)));
16086
+ 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 },
16087
+ subItem.iconClass && (React__namespace.createElement(Icon, { icon: subItem.iconClass, extraClassNames: `tw-w-[18px] ${subItem.disabled
16088
+ ? '!tw-text-sq-disabled-gray'
16089
+ : 'tw-text-sq-text-color dark:tw-text-sq-white'}` })),
16090
+ React__namespace.createElement("div", { className: `tw-text-[13px] tw-ml-1 ${subItem.disabled
16091
+ ? 'tw-text-sq-disabled-gray'
16092
+ : 'tw-text-sq-text-color dark:tw-text-sq-white'} tw-not-italic tw-font-normal ${item.labelClasses}` }, subItem.label)));
16089
16093
  })))));
16090
16094
  }
16091
16095
  return (React__namespace.createElement("div", { key: item.label + index },
16092
16096
  React__namespace.createElement($d08ef79370b62062$export$6d08773d2e66f8f2, { key: item.label + index, "data-customid": item.itemCustomId, onSelect: (e) => {
16093
16097
  item.onClick(e);
16094
- }, 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-text-sq-disabled-gray data-[disabled]:tw-pointer-events-none ${item.containerExtraClassNames || ''}`, "data-testid": item.testId, disabled: item.disabled },
16095
- item.icon && (React__namespace.createElement(Icon, { icon: item.icon, testId: item.iconTestId, type: (item.iconType || 'text'), color: item.iconColor, customId: item.iconCustomId, extraClassNames: `tw-text-sq-text-color dark:tw-text-sq-white tw-w-[18px] ${item.iconExtraClassNames || ''}` })),
16096
- React__namespace.createElement("div", { "data-testid": item.labelTestId, "data-customid": item.labelCustomId, className: `tw-text-[13px] tw-ml-1 ${item.labelClasses}` }, item.label)),
16098
+ }, 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 },
16099
+ 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 || ''}` })),
16100
+ 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)),
16097
16101
  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]" }))));
16098
16102
  })))));
16099
16103
  };