@seeqdev/qomponents 0.0.97 → 0.0.99
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.
|
@@ -11,7 +11,7 @@ interface DropdownSubItem {
|
|
|
11
11
|
/** tooltip for the dropdown subitem */
|
|
12
12
|
tooltip?: string;
|
|
13
13
|
}
|
|
14
|
-
interface DropdownItems {
|
|
14
|
+
interface DropdownItems extends TooltipComponentProps {
|
|
15
15
|
id?: string;
|
|
16
16
|
/** icon class to be used with the dropdown items - if available (i.e. 'fc-zoom') */
|
|
17
17
|
icon?: string;
|
package/dist/index.esm.js
CHANGED
|
@@ -89,7 +89,7 @@ const Icon = ({ onClick, icon, iconPrefix = undefined, type = 'theme', extraClas
|
|
|
89
89
|
const iconPrefixString = icon.startsWith('fc') ? 'fc' : fontAwesomePrefix;
|
|
90
90
|
const style = type === 'color' && color ? { color } : {};
|
|
91
91
|
const appliedClassNames = `${iconPrefixString} ${icon} ${small ? 'fa-sm' : ''} ${large ? 'fa-lg' : ''}
|
|
92
|
-
${colorClassesThemeLight[type]} ${colorClassesThemeDark[type]} ${onClick ? 'cursor-pointer' : ''} ${extraClassNames} focus:tw-outline-none focus-visible:tw-outline-none tw-outline-none`;
|
|
92
|
+
${colorClassesThemeLight[type]} ${colorClassesThemeDark[type]} ${onClick ? 'tw-cursor-pointer' : ''} ${extraClassNames} focus:tw-outline-none focus-visible:tw-outline-none tw-outline-none`;
|
|
93
93
|
const tooltipData = getQTipData(tooltipProps);
|
|
94
94
|
return (React__default.createElement("i", { className: appliedClassNames, style: style, onClick: onClick, "data-testid": testId, "data-customid": customId, id: id, "data-number": number, ...tooltipData }));
|
|
95
95
|
};
|
|
@@ -16136,14 +16136,15 @@ const ButtonWithDropdown = ({ dropdownItems, triggerIcon, id, extraClassNames, c
|
|
|
16136
16136
|
hasArrow && (React.createElement($d08ef79370b62062$export$21b07c8f274aebd5, { asChild: true },
|
|
16137
16137
|
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]" }))),
|
|
16138
16138
|
dropdownItems.map((item, index) => {
|
|
16139
|
+
const tooltipData = getQTipData(item);
|
|
16139
16140
|
if (item.isLabel) {
|
|
16140
|
-
return (React.createElement($d08ef79370b62062$export$b04be29aa201d4f5, { key: (item.label || '') + index, className: item.containerExtraClassNames },
|
|
16141
|
+
return (React.createElement($d08ef79370b62062$export$b04be29aa201d4f5, { key: (item.label || '') + index, className: item.containerExtraClassNames, ...tooltipData },
|
|
16141
16142
|
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]" })),
|
|
16142
16143
|
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)));
|
|
16143
16144
|
}
|
|
16144
16145
|
if (Array.isArray(item.subMenuItems) && item.subMenuItems.length > 0) {
|
|
16145
16146
|
return (React.createElement($d08ef79370b62062$export$d7a01e11500dfb6f, { key: item.label + index },
|
|
16146
|
-
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 },
|
|
16147
|
+
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, ...tooltipData },
|
|
16147
16148
|
React.createElement("div", { className: "tw-flex" },
|
|
16148
16149
|
item.icon && (React.createElement(Icon, { icon: item.icon, extraClassNames: `tw-w-[18px] ${item.disabled
|
|
16149
16150
|
? '!tw-text-sq-disabled-gray'
|
|
@@ -16163,7 +16164,7 @@ const ButtonWithDropdown = ({ dropdownItems, triggerIcon, id, extraClassNames, c
|
|
|
16163
16164
|
: 'tw-text-sq-text-color dark:tw-text-sq-white'} tw-not-italic tw-font-normal ${item.labelClasses}` }, subItem.label)));
|
|
16164
16165
|
}))))));
|
|
16165
16166
|
}
|
|
16166
|
-
return (React.createElement("div", { key: item.label + index },
|
|
16167
|
+
return (React.createElement("div", { key: item.label + index, ...tooltipData },
|
|
16167
16168
|
React.createElement($d08ef79370b62062$export$6d08773d2e66f8f2, { key: item.label + index, "data-customid": item.itemCustomId, onSelect: (e) => {
|
|
16168
16169
|
item.onClick(e);
|
|
16169
16170
|
}, 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 },
|