@seeqdev/qomponents 0.0.146 → 0.0.148
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/FontCustom.woff +0 -0
- package/dist/FontCustom.woff2 +0 -0
- package/dist/Select/Select.types.d.ts +3 -1
- package/dist/example/src/Example.tsx +5 -5
- package/dist/index.esm.js +27 -27
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +27 -27
- package/dist/index.js.map +1 -1
- package/dist/styles.css +61 -34
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -4568,20 +4568,20 @@ const popoverBorderStyles = [
|
|
|
4568
4568
|
].join(' ');
|
|
4569
4569
|
const triggerBackgroundStyles = [
|
|
4570
4570
|
'tw-bg-transparent',
|
|
4571
|
-
'hover:tw-bg-sq-
|
|
4572
|
-
'active:tw-bg-sq-
|
|
4571
|
+
'hover:tw-bg-sq-worksheetspanel-gray',
|
|
4572
|
+
'active:tw-bg-sq-worksheetspanel-gray',
|
|
4573
4573
|
'dark:tw-bg-transparent',
|
|
4574
4574
|
'dark:hover:tw-bg-sq-field-disabled-gray',
|
|
4575
4575
|
'dark:active:tw-bg-sq-field-disabled-gray',
|
|
4576
4576
|
].join(' ');
|
|
4577
4577
|
const activeBackgroundStyles = [
|
|
4578
4578
|
'active',
|
|
4579
|
-
'tw-bg-sq-
|
|
4580
|
-
'hover:tw-bg-sq-
|
|
4581
|
-
'active:tw-bg-sq-
|
|
4582
|
-
'dark:tw-bg-sq-
|
|
4583
|
-
'dark:hover:tw-border-sq-
|
|
4584
|
-
'dark:active:tw-bg-sq-
|
|
4579
|
+
'tw-bg-sq-overlay-gray',
|
|
4580
|
+
'hover:tw-bg-sq-overlay-gray',
|
|
4581
|
+
'active:tw-bg-sq-overlay-gray',
|
|
4582
|
+
'dark:tw-bg-sq-dark-disabled-gray',
|
|
4583
|
+
'dark:hover:tw-border-sq-dark-disabled-gray',
|
|
4584
|
+
'dark:active:tw-bg-sq-dark-disabled-gray',
|
|
4585
4585
|
].join(' ');
|
|
4586
4586
|
const bgStyles$3 = ['tw-bg-sq-white', 'dark:tw-bg-sq-dark-background'].join(' ');
|
|
4587
4587
|
const disabledClasses$4 = ['tw-opacity-50', 'tw-cursor-not-allowed'].join(' ');
|
|
@@ -4611,8 +4611,8 @@ const ToolbarButton = ({ isSmall = false, label, icon, secondIcon, forceSmallIco
|
|
|
4611
4611
|
isPrimaryAnSvg ? (React__namespace.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: `tw-text-sq-text-color dark:tw-text-sq-dark-text ${primaryIconExtraClassNames || ''}`, viewBox: primaryIconViewbox, height: `${iconHeight}px`, width: `${iconWidth}px`, fill: "currentColor", "data-testid": testId },
|
|
4612
4612
|
React__namespace.createElement("path", { d: getSvgIconPath(icon) }))) : (React__namespace.createElement(Icon, { icon: icon, testId: "firstIcon", type: "text", large: !isSmall && !label && !secondIcon && !forceSmallIcon, extraClassNames: `tw-text-sq-text-color dark:tw-text-sq-dark-text` })),
|
|
4613
4613
|
secondIcon && React__namespace.createElement(Icon, { icon: secondIcon, type: "text", testId: "secondIcon" }),
|
|
4614
|
-
popoverContent ? (React__namespace.createElement(Icon, { icon: "fc-arrow-dropdown", extraClassNames: "tw-text-sq-text-color dark:tw-text-sq-dark-text tw-ml-[3px] tw-text-[
|
|
4615
|
-
!isSmall && (React__namespace.createElement("small", { className: "tw-text-sq-text-color dark:tw-text-sq-dark-text tw-text-[
|
|
4614
|
+
popoverContent ? (React__namespace.createElement(Icon, { icon: "fc-arrow-dropdown", extraClassNames: "tw-text-sq-text-color dark:tw-text-sq-dark-text tw-ml-[3px] tw-text-[0.5rem]", type: "text" })) : undefined),
|
|
4615
|
+
!isSmall && (React__namespace.createElement("small", { className: "tw-text-sq-text-color dark:tw-text-sq-dark-text tw-text-[0.625rem]" }, label)))),
|
|
4616
4616
|
!!popoverContent ? (React__namespace.createElement(PopoverContent, { sideOffset: 2, align: "start" },
|
|
4617
4617
|
React__namespace.createElement("div", { className: bgStyles$3 +
|
|
4618
4618
|
' tw-relative tw-z-[1000] tw-min-w-6 tw-p-[0.5rem] focus-visible:tw-outline-none tw-outline-none data-[state=open]:animate-in data-[state=closed]:animate-out' +
|
|
@@ -13409,7 +13409,7 @@ const multiValueStyles = [
|
|
|
13409
13409
|
* For ease of testing most of the elements of this select can be identified by classNames prefixed with "spec".
|
|
13410
13410
|
*
|
|
13411
13411
|
*/
|
|
13412
|
-
const Select = ({ options, value, placeholder = 'select', noOptionsMessage = 'no matching options', isSearchable = true, creatable = false, isMulti = false, isClearable = false, closeMenuOnSelect = true, id, inputId, menuPortalTarget, getOptionLabel, getSelectedValueLabel, getOptionValue, onChange, menuIsOpen, menuPlacement = 'auto', extraClassNames, inputGroup, filterConfig, filterOption, small = false, isDisabled = false, showError = false, isLoading = false, formatGroupLabel, onRemove, defaultValue, onMenuOpen, onMenuClose, components, onMenuInputFocus, onInputChange, inputValue, }) => {
|
|
13412
|
+
const Select = ({ options, value, placeholder = 'select', noOptionsMessage = 'no matching options', isSearchable = true, creatable = false, isMulti = false, isClearable = false, closeMenuOnSelect = true, id, inputId, menuPortalTarget, getOptionLabel, getSelectedValueLabel, getOptionValue, onChange, menuIsOpen, menuPlacement = 'auto', extraClassNames, controlClassNames = '', inputGroup, filterConfig, filterOption, small = false, isDisabled = false, showError = false, isLoading = false, formatGroupLabel, onRemove, defaultValue, onMenuOpen, onMenuClose, components, onMenuInputFocus, onInputChange, inputValue, }) => {
|
|
13413
13413
|
const getOptionOrSelectedLabel = (option, { context }) => {
|
|
13414
13414
|
const getSelectedOptionLabel = getSelectedValueLabel ? getSelectedValueLabel : getOptionLabel;
|
|
13415
13415
|
if (getOptionLabel || getSelectedValueLabel) {
|
|
@@ -13472,7 +13472,7 @@ const Select = ({ options, value, placeholder = 'select', noOptionsMessage = 'no
|
|
|
13472
13472
|
else if (inputGroup === 'right') {
|
|
13473
13473
|
border = menuIsOpen ? 'tw-rounded-tr-md' : 'tw-rounded-r-md';
|
|
13474
13474
|
}
|
|
13475
|
-
const appliedClasses = `${borderStyles$3} ${border} ${showError ? errorClasses$2 : borderColorClasses$2} ${small ? 'reactSelectMinHeightSmall' : 'reactSelectMinHeight'} `;
|
|
13475
|
+
const appliedClasses = `${borderStyles$3} ${border} ${showError ? errorClasses$2 : borderColorClasses$2} ${small ? 'reactSelectMinHeightSmall' : 'reactSelectMinHeight'} ${controlClassNames}`;
|
|
13476
13476
|
return `${appliedClasses} ${baseClasses$3} specSelectControl ${isDisabled ? disabledClasses$3 : ''} ${small ? 'tw-pl-2 tw-pr-1' : 'tw-pl-2.5 tw-pr-1.5'}`;
|
|
13477
13477
|
},
|
|
13478
13478
|
placeholder: () => placeholderStyles,
|
|
@@ -14337,8 +14337,8 @@ const Tabs = ({ tabs, defaultActiveTab, activeTab, onTabSelect, extraClassNames,
|
|
|
14337
14337
|
? 'tw-border-b-sq-color-dark dark:tw-border-b-sq-color-dark tw-border-b-[3px]'
|
|
14338
14338
|
: 'hover:tw-bg-sq-light-gray tw-border-b-[1px] hover:dark:tw-bg-gray-700'}`, "data-testid": tabsTestId, disabled: disabled, key: `${label}-${id}-${index}`, value: id },
|
|
14339
14339
|
React.createElement("span", { className: "tw-flex tw-items-center tw-overflow-hidden tw-pb-[3px]" },
|
|
14340
|
-
icon && React.createElement(Icon, { icon: icon, testId: `${id}_tab-icon`, extraClassNames: "tw-text-[
|
|
14341
|
-
React.createElement("span", { className: `tw-text-[
|
|
14340
|
+
icon && React.createElement(Icon, { icon: icon, testId: `${id}_tab-icon`, extraClassNames: "tw-text-[0.9375rem] tw-mr-[7px] tw-flex-shrink-0" }),
|
|
14341
|
+
React.createElement("span", { className: `tw-text-[0.875rem] tw-font-medium tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis ${activeTab === id
|
|
14342
14342
|
? 'dark:tw-text-sq-dark-text tw-text-gray-500'
|
|
14343
14343
|
: 'dark:tw-text-sq-color-dark-dark tw-text-sq-color-dark'}` }, label)))))),
|
|
14344
14344
|
tabs.map((tab, index) => (React.createElement($69cb30bb0017df05$export$7c6e2c02157bb7d2, { className: `tw-bg-sq-white dark:tw-bg-sq-dark-background tw-overflow-y-auto -tw-mt-[1px] tw-border-t-[1px] dark:tw-border-gray-700 tw-z-[500] tw-flex tw-flex-col tw-flex-grow focus-visible:tw-outline-none ${tab.tabContentExtraClassNames || ''}`, key: `${tab.label}_${index}_content`, value: tab.id }, tab.content)))));
|
|
@@ -15816,7 +15816,7 @@ const ButtonWithDropdown = ({ dropdownItems, triggerIcon, id, extraClassNames =
|
|
|
15816
15816
|
if (item.isLabel) {
|
|
15817
15817
|
return (React__namespace.createElement($d08ef79370b62062$export$b04be29aa201d4f5, { key: (item.id || '') + index, className: item.itemExtraClassNames, ...tooltipData },
|
|
15818
15818
|
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]" })),
|
|
15819
|
-
React__namespace.createElement("div", { "data-testid": item.labelTestId, className: `tw-text-[
|
|
15819
|
+
React__namespace.createElement("div", { "data-testid": item.labelTestId, className: `tw-text-[0.8125rem] 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)));
|
|
15820
15820
|
}
|
|
15821
15821
|
if (Array.isArray(item.subMenuItems) && item.subMenuItems.length > 0) {
|
|
15822
15822
|
return (React__namespace.createElement($d08ef79370b62062$export$d7a01e11500dfb6f, { key: (item.id || item.icon || '') + index },
|
|
@@ -15825,14 +15825,14 @@ const ButtonWithDropdown = ({ dropdownItems, triggerIcon, id, extraClassNames =
|
|
|
15825
15825
|
item.icon && (React__namespace.createElement(Icon, { icon: item.icon, extraClassNames: `tw-w-[18px] ${item.disabled
|
|
15826
15826
|
? '!tw-text-sq-disabled-gray'
|
|
15827
15827
|
: 'tw-text-sq-text-color dark:tw-text-sq-white'} ${item.iconExtraClassNames || ''}` })),
|
|
15828
|
-
React__namespace.createElement("div", { "data-testid": item.labelTestId, "data-customid": item.labelCustomId, className: `tw-text-[
|
|
15829
|
-
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-[
|
|
15828
|
+
React__namespace.createElement("div", { "data-testid": item.labelTestId, "data-customid": item.labelCustomId, className: `tw-text-[0.8125rem] tw-ml-1 ${item.disabled && '!tw-opacity-30'} tw-not-italic tw-font-semibold ${item.labelClasses}` }, item.label)),
|
|
15829
|
+
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-[0.5rem] tw-justify-center tw-flex` })),
|
|
15830
15830
|
React__namespace.createElement($d08ef79370b62062$export$602eac185826482c, null,
|
|
15831
15831
|
React__namespace.createElement($d08ef79370b62062$export$6d4de93b380beddf, { className: "focus-visible:tw-outline-none tw-outline-none" },
|
|
15832
15832
|
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) => {
|
|
15833
15833
|
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 },
|
|
15834
15834
|
subItem.iconClass && (React__namespace.createElement(Icon, { icon: subItem.iconClass, type: "text", extraClassNames: `tw-w-[18px] ${item.disabled && '!tw-opacity-30'}` })),
|
|
15835
|
-
React__namespace.createElement("div", { className: `tw-text-[
|
|
15835
|
+
React__namespace.createElement("div", { className: `tw-text-[0.8125rem] tw-ml-1 ${subItem.disabled
|
|
15836
15836
|
? 'tw-text-sq-disabled-gray'
|
|
15837
15837
|
: 'tw-text-sq-text-color dark:tw-text-sq-white'} tw-not-italic tw-font-normal ${item.labelClasses}` }, subItem.label)));
|
|
15838
15838
|
}))))));
|
|
@@ -15842,7 +15842,7 @@ const ButtonWithDropdown = ({ dropdownItems, triggerIcon, id, extraClassNames =
|
|
|
15842
15842
|
item.onClick(e);
|
|
15843
15843
|
}, 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 },
|
|
15844
15844
|
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 || ''}` })),
|
|
15845
|
-
React__namespace.createElement("div", { "data-testid": item.labelTestId, "data-customid": item.labelCustomId, className: `tw-text-[
|
|
15845
|
+
React__namespace.createElement("div", { "data-testid": item.labelTestId, "data-customid": item.labelCustomId, className: `tw-text-[0.8125rem] 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)),
|
|
15846
15846
|
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]" }))));
|
|
15847
15847
|
}))))));
|
|
15848
15848
|
};
|
|
@@ -15875,7 +15875,7 @@ const Alert = ({ children, dismissible = true, onClose, show = true, variant, te
|
|
|
15875
15875
|
}
|
|
15876
15876
|
return (React.createElement("div", { "data-testid": testId, id: id, className: appliedClasses },
|
|
15877
15877
|
children,
|
|
15878
|
-
dismissible && (React.createElement(Icon, { icon: "fc-delete", type: variant.match(/danger|warning/) ? 'color' : 'theme', color: variant.match(/danger|warning/) ? 'inherit' : undefined, extraClassNames: `tw-self-end tw-text-[
|
|
15878
|
+
dismissible && (React.createElement(Icon, { icon: "fc-delete", type: variant.match(/danger|warning/) ? 'color' : 'theme', color: variant.match(/danger|warning/) ? 'inherit' : undefined, extraClassNames: `tw-self-end tw-text-[0.6875rem] tw-cursor-pointer tw-absolute tw-right-[10px] tw-top-[10px] ${variant.match(/danger|warning|gray/) ? 'tw-text-sq-text-color dark:tw-text-sq-dark-text' : ''}`, testId: `${testId}-close-btn`, onClick: onClose, ...tooltipProps }))));
|
|
15879
15879
|
};
|
|
15880
15880
|
|
|
15881
15881
|
/**
|
|
@@ -15908,33 +15908,33 @@ const SeeqActionDropdownItem = (item) => {
|
|
|
15908
15908
|
if (item.icon) {
|
|
15909
15909
|
renderIcon = isSvgIcon(item.icon) ? (React.createElement(SvgIcon, { icon: item.icon, extraClassNames: 'tw-rounded-[3px] tw-h-8 tw-w-8 tw-p-1 tw-flex tw-justify-center tw-items-center tw-bg-sq-color-dark' +
|
|
15910
15910
|
' dark:tw-text-sq-white tw-text-[22px] tw-text-sq-white ' +
|
|
15911
|
-
item.iconExtraClassNames, ...item })) : (React.createElement(Icon, { icon: item.icon, type: "text", extraClassNames: 'tw-rounded-[3px] tw-h-8 tw-w-8 tw-flex tw-justify-center tw-items-center tw-bg-sq-color-dark dark:tw-text-sq-white tw-text-[
|
|
15911
|
+
item.iconExtraClassNames, ...item })) : (React.createElement(Icon, { icon: item.icon, type: "text", extraClassNames: 'tw-rounded-[3px] tw-h-8 tw-w-8 tw-flex tw-justify-center tw-items-center tw-bg-sq-color-dark dark:tw-text-sq-white tw-text-[1.375rem] tw-text-sq-white ' +
|
|
15912
15912
|
item.iconExtraClassNames }));
|
|
15913
15913
|
}
|
|
15914
15914
|
return (React.createElement("div", { className: "tw-flex-col tw-flex tw-p-[10px] tw-pl-5 tw-w-[600px]" },
|
|
15915
15915
|
React.createElement("div", { className: "tw-flex tw-flex-row tw-gap-2 tw-items-end" },
|
|
15916
15916
|
renderIcon,
|
|
15917
15917
|
React.createElement("h4", { className: "tw-text-base tw-font-[600] tw-leading-[20px] mb-0" }, item.display)),
|
|
15918
|
-
React.createElement("div", { className: "tw-text-[
|
|
15918
|
+
React.createElement("div", { className: "tw-text-[0.8125rem] tw-font-normal" }, item.text)));
|
|
15919
15919
|
};
|
|
15920
15920
|
const ViewWorkbench = (item) => {
|
|
15921
15921
|
let renderIcon = React.createElement(React.Fragment, null);
|
|
15922
15922
|
if (item.icon) {
|
|
15923
|
-
renderIcon = isSvgIcon(item.icon) ? (React.createElement(SvgIcon, { icon: item.icon, extraClassNames: 'tw-flex tw-w-5 tw-justify-center tw-items-center tw-text-[
|
|
15923
|
+
renderIcon = isSvgIcon(item.icon) ? (React.createElement(SvgIcon, { icon: item.icon, extraClassNames: 'tw-flex tw-w-5 tw-justify-center tw-items-center tw-text-[1.25rem] dark:tw-text-sq-white' +
|
|
15924
15924
|
' tw-text-sq-text-color ' +
|
|
15925
|
-
item.iconExtraClassNames, type: "default", ...item })) : (React.createElement(Icon, { icon: item.icon, type: "text", extraClassNames: 'tw-flex tw-justify-center tw-items-center tw-text-[
|
|
15925
|
+
item.iconExtraClassNames, type: "default", ...item })) : (React.createElement(Icon, { icon: item.icon, type: "text", extraClassNames: 'tw-flex tw-justify-center tw-items-center tw-text-[1.25rem] dark:tw-text-sq-white' +
|
|
15926
15926
|
' tw-text-sq-text-color ' +
|
|
15927
15927
|
item.iconExtraClassNames }));
|
|
15928
15928
|
}
|
|
15929
15929
|
return (React.createElement("div", { className: "tw-flex-col tw-flex tw-p-[10px]" },
|
|
15930
15930
|
React.createElement("div", { className: "tw-flex tw-flex-row tw-gap-2 tw-items-end" },
|
|
15931
15931
|
renderIcon,
|
|
15932
|
-
React.createElement("div", { className: "tw-text-[
|
|
15932
|
+
React.createElement("div", { className: "tw-text-[0.8125rem]" }, item.display))));
|
|
15933
15933
|
};
|
|
15934
15934
|
const InsertSeeqContent = (item) => {
|
|
15935
15935
|
return (React.createElement("div", { className: "tw-flex-col tw-flex tw-justify-start tw-p-[10px] tw-font-normal tw-text-left tw-text-sq-text-color dark:tw-text-sq-dark-text" },
|
|
15936
|
-
React.createElement("h5", { className: "tw-text-[
|
|
15937
|
-
React.createElement("div", { className: "tw-text-[
|
|
15936
|
+
React.createElement("h5", { className: "tw-text-[1rem] tw-font-medium tw-text-sq-color-dark tw-leading-[18px]" }, item.display),
|
|
15937
|
+
React.createElement("div", { className: "tw-text-[0.8125rem] tw-text-sq-text-color dark:tw-text-sq-dark-text !tw-mt-1" }, item.text)));
|
|
15938
15938
|
};
|
|
15939
15939
|
|
|
15940
15940
|
const borderStyles = [
|