@seeqdev/qomponents 0.0.174 → 0.0.175
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/iconFont/FontCustom.woff +0 -0
- package/dist/iconFont/FontCustom.woff2 +0 -0
- package/dist/index.esm.js +57 -55
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +57 -55
- package/dist/index.js.map +1 -1
- package/dist/src/Alert/Alert.types.d.ts +0 -1
- package/dist/src/ButtonGroup/ButtonGroup.types.d.ts +0 -1
- package/dist/src/ButtonWithDropdown/ButtonWithDropdown.types.d.ts +0 -1
- package/dist/src/Carousel/Carousel.types.d.ts +0 -1
- package/dist/src/Checkbox/Checkbox.types.d.ts +0 -1
- package/dist/src/Collapse/Collapse.types.d.ts +0 -1
- package/dist/src/Icon/Icon.types.d.ts +0 -1
- package/dist/src/InputGroup/InputGroup.types.d.ts +0 -1
- package/dist/src/SeeqActionDropdown/SeeqActionDropdown.types.d.ts +0 -1
- package/dist/src/Slider/Slider.types.d.ts +0 -1
- package/dist/src/SvgIcon/SvgIcon.types.d.ts +0 -1
- package/dist/src/TextArea/TextArea.types.d.ts +0 -1
- package/dist/src/TextField/TextField.types.d.ts +0 -1
- package/dist/styles.css +1225 -1256
- package/package.json +2 -2
package/dist/index.js
CHANGED
|
@@ -4820,12 +4820,12 @@ const ToolbarButton = ({ isSmall = false, label, icon, secondIcon, forceSmallIco
|
|
|
4820
4820
|
onHide && onHide();
|
|
4821
4821
|
}
|
|
4822
4822
|
};
|
|
4823
|
-
return (jsxRuntime.jsxs(Root2$3, { defaultOpen: false, onOpenChange: onOpenChange, children: [jsxRuntime.jsx(Trigger$3, { id: id, className: `tw:bg-transparent tw:border-none tw:mx-
|
|
4823
|
+
return (jsxRuntime.jsxs(Root2$3, { defaultOpen: false, onOpenChange: onOpenChange, children: [jsxRuntime.jsx(Trigger$3, { id: id, className: `tw:bg-transparent tw:border-none tw:mx-sq-1.5 tw:first:ml-0 tw:last:mr-0 ${isActive ? 'active' : ''}`, disabled: disabled, "data-testid": testId, onClick: (e) => {
|
|
4824
4824
|
onClick && onClick(e);
|
|
4825
|
-
}, children: jsxRuntime.jsxs("div", { ...tooltipData, className: `tw:flex tw:flex-col tw:items-center tw:rounded-md ${isSmall ? 'tw:py-px tw:px-1' : 'tw:px-2 tw:py-
|
|
4826
|
-
' tw:relative tw:z-[1000] tw:min-w-6 tw:p-
|
|
4825
|
+
}, children: jsxRuntime.jsxs("div", { ...tooltipData, className: `tw:flex tw:flex-col tw:items-center tw:rounded-md ${isSmall ? 'tw:py-px tw:px-1' : 'tw:px-2 tw:py-sq-5'} ${disabled ? disabledClasses$4 : isActive ? activeBackgroundStyles : triggerBackgroundStyles} ${extraClassNames || ''}`, children: [jsxRuntime.jsxs("span", { className: "tw:nowrap", children: [isPrimaryAnSvg ? (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: `tw:text-sq-text-color tw:dark:text-sq-dark-text ${primaryIconExtraClassNames || ''}`, viewBox: primaryIconViewbox, height: `${iconHeight}px`, width: `${iconWidth}px`, fill: "currentColor", "data-testid": testId, children: jsxRuntime.jsx("path", { d: getSvgIconPath(icon) }) })) : (jsxRuntime.jsx(Icon, { icon: icon, testId: "firstIcon", type: "text", size: !isSmall && !label && !secondIcon && !forceSmallIcon ? 'lg' : 'sm', extraClassNames: `tw:text-sq-text-color tw:dark:text-sq-dark-text` })), secondIcon && jsxRuntime.jsx(Icon, { icon: secondIcon, type: "text", testId: "secondIcon" }), popoverContent ? (jsxRuntime.jsx(Icon, { icon: "fc-arrow-dropdown", extraClassNames: "tw:text-sq-text-color tw:dark:text-sq-dark-text tw:ml-sq-3 tw:text-2", type: "text", size: "sm" })) : undefined] }), !isSmall && jsxRuntime.jsx("small", { className: "tw:text-sq-text-color tw:dark:text-sq-dark-text tw:text-2.5", children: label })] }) }), !!popoverContent ? (jsxRuntime.jsx(PopoverContent, { sideOffset: 2, align: "start", children: jsxRuntime.jsxs("div", { className: bgStyles$3 +
|
|
4826
|
+
' tw:relative tw:z-[1000] tw:min-w-6 tw:p-2 tw:focus-visible:outline-none tw:outline-none tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out' +
|
|
4827
4827
|
' tw:data-[state=closed]:fade-out-0 tw:data-[state=open]:fade-in-0 tw:data-[state=closed]:zoom-out-95 tw:data-[state=open]:zoom-in-95 tw:data-[side=bottom]:slide-in-from-top-2 tw:data-[side=left]:slide-in-from-right-2 tw:data-[side=right]:slide-in-from-left-2 tw:data-[side=top]:slide-in-from-bottom-2' +
|
|
4828
|
-
popoverBorderStyles, children: [hasArrow && (jsxRuntime.jsx(Arrow2$2, { asChild: true, children: jsxRuntime.jsx("div", { className: " tw:fill-transparent tw:bg-sq-white tw:w-
|
|
4828
|
+
popoverBorderStyles, children: [hasArrow && (jsxRuntime.jsx(Arrow2$2, { asChild: true, children: jsxRuntime.jsx("div", { className: " tw:fill-transparent tw:bg-sq-white tw:w-sq-15 tw:h-sq-15 tw:-mt-sq-7 tw:rotate-45 tw:dark:bg-sq-dark-background tw:border-b tw:border-r tw:border-sq-disabled-gray tw:dark:border-gray-500" }) })), popoverContent] }) })) : undefined] }));
|
|
4829
4829
|
};
|
|
4830
4830
|
|
|
4831
4831
|
const setValidInputDimension = (width, height) => {
|
|
@@ -4851,7 +4851,7 @@ const borderColorClasses$4 = [
|
|
|
4851
4851
|
'tw:focus:border-sq-theme-dark',
|
|
4852
4852
|
'tw:active:border-sq-theme-dark',
|
|
4853
4853
|
].join(' ');
|
|
4854
|
-
const baseClasses$6 = 'tw:h-
|
|
4854
|
+
const baseClasses$6 = 'tw:h-8.5 tw:leading-normal tw:outline-none tw:py-1 tw:px-3' +
|
|
4855
4855
|
' tw:disabled:pointer-events-none tw:disabled:bg-sq-light-gray tw:disabled:dark:bg-sq-dark-disabled-gray' +
|
|
4856
4856
|
' tw:disabled:cursor-not-allowed tw:p-1 tw:border-solid tw:border tw:placeholder-gray-400' +
|
|
4857
4857
|
' tw:dark:placeholder-sq-dark-text/30 specTextField';
|
|
@@ -5008,9 +5008,9 @@ const Tooltip = ({ position = 'bottom', children, text, delay = DEFAULT_TOOL_TIP
|
|
|
5008
5008
|
const arrowBaseClasses = "tw:before:content-[''] tw:before:absolute tw:before:border-8";
|
|
5009
5009
|
const centerArrowVertically = 'tw:before:top-1/2 tw:before:-translate-y-1/2';
|
|
5010
5010
|
const centerArrowHorizontally = 'tw:before:left-1/2 tw:before:-translate-x-1/2';
|
|
5011
|
-
const arrowRight = `${arrowBaseClasses} ${centerArrowVertically} tw:before:right-
|
|
5011
|
+
const arrowRight = `${arrowBaseClasses} ${centerArrowVertically} tw:before:right-full tw:before:border-y-transparent
|
|
5012
5012
|
tw:before:border-l-transparent tw:before:border-r-sq-black`;
|
|
5013
|
-
const arrowLeft = `${arrowBaseClasses} ${centerArrowVertically} tw:before:left-
|
|
5013
|
+
const arrowLeft = `${arrowBaseClasses} ${centerArrowVertically} tw:before:left-full tw:before:border-y-transparent
|
|
5014
5014
|
tw:before:border-l-sq-black tw:before:border-r-transparent`;
|
|
5015
5015
|
const arrowBottom = `${arrowBaseClasses} ${centerArrowHorizontally} tw:before:-top-4 tw:before:border-b-sq-black
|
|
5016
5016
|
tw:before:border-r-transparent tw:before:border-l-transparent tw:before:border-t-transparent`;
|
|
@@ -7510,7 +7510,7 @@ const QTip = () => {
|
|
|
7510
7510
|
}
|
|
7511
7511
|
};
|
|
7512
7512
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { onMouseEnter: () => setOverTooltip(true), onMouseLeave: () => setOverTooltip(false), "data-testid": tooltipTestId, ref: tooltipRef, className: 'tw:absolute tw:rounded tw:bg-black tw:max-w-96 tw:p-2 tw:text-xs tw:text-sq-white tw:z-[9999] tw:fade-in ' +
|
|
7513
|
-
(show ? 'tw:visible' : 'tw:invisible tw:pointer-events-none'), children: [html ? jsxRuntime.jsx(HTMLTip, { text: tooltipText }) : tooltipText, jsxRuntime.jsx("div", { className: "tw:absolute tw:w-
|
|
7513
|
+
(show ? 'tw:visible' : 'tw:invisible tw:pointer-events-none'), children: [html ? jsxRuntime.jsx(HTMLTip, { text: tooltipText }) : tooltipText, jsxRuntime.jsx("div", { className: "tw:absolute tw:w-2.5 tw:h-2.5 tw:rotate-45 tw:bg-sq-black", ref: tooltipArrowRef })] }) }));
|
|
7514
7514
|
};
|
|
7515
7515
|
|
|
7516
7516
|
function _typeof$1(o) {
|
|
@@ -13925,29 +13925,31 @@ var CreatableSelect = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
13925
13925
|
});
|
|
13926
13926
|
var CreatableSelect$1 = CreatableSelect;
|
|
13927
13927
|
|
|
13928
|
-
const baseClasses$3 = ['focus:
|
|
13928
|
+
const baseClasses$3 = ['tw:focus:ring-0', 'tw:disabled:cursor-not-allowed'].join(' ');
|
|
13929
13929
|
const containerStyles = ['tw:bg-sq-white', 'tw:dark:bg-sq-dark-background'].join(' ');
|
|
13930
13930
|
const errorClasses$2 = 'tw:border-sq-danger-color';
|
|
13931
13931
|
const borderColorClasses$2 = ['tw:border-sq-disabled-gray', 'tw:dark:border-sq-dark-disabled-gray'].join(' ');
|
|
13932
|
-
const borderStyles$3 = [
|
|
13933
|
-
|
|
13934
|
-
'tw:border',
|
|
13935
|
-
'tw:
|
|
13936
|
-
'
|
|
13937
|
-
'
|
|
13938
|
-
'tw:dark:
|
|
13939
|
-
'dark:
|
|
13940
|
-
'dark:active:tw:border-sq-theme-dark-dark',
|
|
13932
|
+
const borderStyles$3 = ['tw:border-solid', 'tw:border'].join(' ');
|
|
13933
|
+
const borderActiveClasses = [
|
|
13934
|
+
'tw:hover:border-sq-color-dark',
|
|
13935
|
+
'tw:focus-within:border-sq-color-dark',
|
|
13936
|
+
'tw:active:border-sq-color-dark',
|
|
13937
|
+
'tw:dark:hover:border-sq-color-dark-dark',
|
|
13938
|
+
'tw:dark:focus-within:border-sq-color-dark-dark',
|
|
13939
|
+
'tw:dark:active:border-sq-color-dark-dark',
|
|
13941
13940
|
].join(' ');
|
|
13942
13941
|
const textStyles = ['tw:text-sq-text-color', 'tw:dark:text-sq-dark-text', 'tw:text-sm'].join(' ');
|
|
13943
13942
|
const textActiveStyles = [
|
|
13944
13943
|
'tw:hover:text-sq-theme-dark',
|
|
13945
|
-
'focus:
|
|
13946
|
-
'active:
|
|
13944
|
+
'tw:focus:text-sq-theme-dark',
|
|
13945
|
+
'tw:active:text-sq-theme-dark',
|
|
13947
13946
|
'tw:dark:text-sq-dark-disabled-gray',
|
|
13948
13947
|
'tw:dark:hover:text-sq-theme-dark-dark',
|
|
13949
|
-
'dark:focus:
|
|
13950
|
-
'dark:active:
|
|
13948
|
+
'tw:dark:focus:text-sq-theme-dark-dark',
|
|
13949
|
+
'tw:dark:active:text-sq-theme-dark-dark',
|
|
13950
|
+
'tw:hover:text-sq-color-dark',
|
|
13951
|
+
'tw:dark:text-sq-dark-disabled-gray',
|
|
13952
|
+
'tw:dark:hover:text-sq-color-dark-dark',
|
|
13951
13953
|
].join(' ');
|
|
13952
13954
|
const menuStyles = [
|
|
13953
13955
|
'tw:border-solid',
|
|
@@ -13983,7 +13985,7 @@ const optionStyles = [
|
|
|
13983
13985
|
'tw:px-2.5',
|
|
13984
13986
|
'specSelectOption',
|
|
13985
13987
|
].join(' ');
|
|
13986
|
-
const disabledClasses$3 = ['tw:bg-sq-field-disabled-gray', 'tw:cursor-not-allowed'].join(' ');
|
|
13988
|
+
const disabledClasses$3 = ['tw:bg-sq-field-disabled-gray', '!tw:cursor-not-allowed', 'tw:opacity-50'].join(' ');
|
|
13987
13989
|
const dropDownIndicatorStyles = `tw:text-sq-disabled-gray ${textActiveStyles} specOpenIt`;
|
|
13988
13990
|
const placeholderStyles = ['tw:text-gray-400', 'tw:dark:text-sq-dark-text-lighter', 'specOpenSelect'].join(' ');
|
|
13989
13991
|
const multiValueStyles = [
|
|
@@ -14066,13 +14068,13 @@ const Select = ({ options, value, placeholder = 'select', noOptionsMessage = 'no
|
|
|
14066
14068
|
else if (inputGroup === 'right') {
|
|
14067
14069
|
border = menuIsOpen ? 'tw:rounded-tr-md' : 'tw:rounded-r-md';
|
|
14068
14070
|
}
|
|
14069
|
-
const appliedClasses = `${borderStyles$3} ${border} ${showError ? errorClasses$2 : borderColorClasses$2} ${small ? 'reactSelectMinHeightSmall' : 'reactSelectMinHeight'} ${controlClassNames}`;
|
|
14071
|
+
const appliedClasses = `${borderStyles$3} ${isDisabled ? '' : borderActiveClasses} ${border} ${showError ? errorClasses$2 : borderColorClasses$2} ${small ? 'reactSelectMinHeightSmall' : 'reactSelectMinHeight'} ${controlClassNames}`;
|
|
14070
14072
|
return `${appliedClasses} ${baseClasses$3} ${containerStyles} specSelectControl ${isDisabled ? disabledClasses$3 : ''} ${small ? 'tw:pl-2 tw:pr-1' : 'tw:pl-2.5 tw:pr-1.5'}`;
|
|
14071
14073
|
},
|
|
14072
14074
|
placeholder: () => placeholderStyles,
|
|
14073
14075
|
container: ({ selectProps }) => {
|
|
14074
14076
|
const containerBorderStyles = selectProps?.menuIsOpen ? 'tw:rounded-t-md' : 'tw:rounded-md';
|
|
14075
|
-
return `${textStyles} ${extraClassNames} ${containerBorderStyles}`;
|
|
14077
|
+
return `${textStyles} ${extraClassNames} ${containerBorderStyles} !tw:pointer-events-auto`;
|
|
14076
14078
|
},
|
|
14077
14079
|
input: () => textStyles + ' specSelectInput',
|
|
14078
14080
|
menuList: () => menuListStyles,
|
|
@@ -14540,7 +14542,7 @@ const Modal = ({ titleIcon, title = 'Modal title example', titleSuffixLabel, sub
|
|
|
14540
14542
|
'tw:max-w-4xl': size === '4xl',
|
|
14541
14543
|
'tw:max-w-5xl': size === '5xl',
|
|
14542
14544
|
'tw:max-w-6xl': size === '6xl',
|
|
14543
|
-
}, dialogClassName), children: [jsxRuntime.jsxs(DialogHeader, { className: "modal-header tw:flex tw:w-full tw:justify-between tw:border-sq-disabled-gray\n tw:dark:border-sq-dark-disabled-gray tw:border-0 tw:border-b tw:px-6 tw:py-4", children: [jsxRuntime.jsx("div", { className: "tw:flex tw:w-full", children: renderTitle() }), !hideCloseIcon && (jsxRuntime.jsx(DialogClose, { autoFocus: false, className: "tw:[&:has(:focus-visible)]:none tw:opacity-70 tw:bg-transparent tw:hover:opacity-100 close tw:text-base tw:cursor-pointer tw:ml-4", "data-testid": "closeButton", children: jsxRuntime.jsx("span", { className: "tw:cursor-pointer", children: "\u00D7" }) }))] }), jsxRuntime.jsx(DialogDescription, { className: "modal-body tw:px-6 tw:py-4 tw:overflow-y-auto", asChild: true, children: children }), !hideFooterButtons && (jsxRuntime.jsx(DialogFooter, { className: "modal-footer tw:px-6 tw:py-4", children: modalFooter ?? (jsxRuntime.jsxs("div", { className: "tw:flex tw:w-full tw:justify-between", "data-testid": "modalFooter", children: [jsxRuntime.jsx("div", { className: "tw:flex tw:justify-start", children: customButton && (jsxRuntime.jsx(Button, { label: customButtonLabel, onClick: onClickCustomButton, disabled: disableCustomButton, extraClassNames: "tw:justify-start tw:min-w-
|
|
14545
|
+
}, dialogClassName), children: [jsxRuntime.jsxs(DialogHeader, { className: "modal-header tw:flex tw:w-full tw:justify-between tw:border-sq-disabled-gray\n tw:dark:border-sq-dark-disabled-gray tw:border-0 tw:border-b tw:px-6 tw:py-4", children: [jsxRuntime.jsx("div", { className: "tw:flex tw:w-full", children: renderTitle() }), !hideCloseIcon && (jsxRuntime.jsx(DialogClose, { autoFocus: false, className: "tw:[&:has(:focus-visible)]:none tw:opacity-70 tw:bg-transparent tw:hover:opacity-100 close tw:text-base tw:cursor-pointer tw:ml-4", "data-testid": "closeButton", children: jsxRuntime.jsx("span", { className: "tw:cursor-pointer", children: "\u00D7" }) }))] }), jsxRuntime.jsx(DialogDescription, { className: "modal-body tw:px-6 tw:py-4 tw:overflow-y-auto", asChild: true, children: children }), !hideFooterButtons && (jsxRuntime.jsx(DialogFooter, { className: "modal-footer tw:px-6 tw:py-4", children: modalFooter ?? (jsxRuntime.jsxs("div", { className: "tw:flex tw:w-full tw:justify-between", "data-testid": "modalFooter", children: [jsxRuntime.jsx("div", { className: "tw:flex tw:justify-start", children: customButton && (jsxRuntime.jsx(Button, { label: customButtonLabel, onClick: onClickCustomButton, disabled: disableCustomButton, extraClassNames: "tw:justify-start tw:min-w-25", testId: "customButton", variant: customButtonVariant })) }), jsxRuntime.jsxs("div", { className: "tw:flex tw:justify-end", children: [jsxRuntime.jsx("div", { className: "tw:flex tw:items-center", children: middleFooterSection }), !hideCancelButton && (jsxRuntime.jsx(DialogClose, { asChild: true, children: jsxRuntime.jsx(Button, { label: cancelButtonLabel, extraClassNames: "tw:mr-5 tw:min-w-25", tooltip: cancelButtonTooltip, variant: "outline", stopPropagation: false, testId: "cancelButton" }) })), !hideSubmitButton && (jsxRuntime.jsx(Button, { label: submitButtonLabel, onClick: handleSubmit, disabled: disableSubmitButton || isLoading, variant: submitButtonVariant, stopPropagation: stopPropagationSubmitButton, tooltip: submitButtonTooltip, icon: isLoading ? 'fc-loading-notch tw:animate-spin' : undefined, iconPosition: "left", testId: "submitButton", extraClassNames: "tw:min-w-25" }))] })] })) }))] }) })) : (jsxRuntime.jsx(jsxRuntime.Fragment, {}));
|
|
14544
14546
|
};
|
|
14545
14547
|
|
|
14546
14548
|
function createCollection(name) {
|
|
@@ -14998,11 +15000,11 @@ const Tabs = ({ tabs, defaultActiveTab, activeTab, onTabSelect, extraClassNames,
|
|
|
14998
15000
|
return;
|
|
14999
15001
|
onTabSelect && onTabSelect(tabId);
|
|
15000
15002
|
};
|
|
15001
|
-
return (jsxRuntime.jsxs(Root2$2, { className: `tw:flex tw:flex-col tw:min-w-
|
|
15002
|
-
? 'tw:border-b-sq-theme-dark tw:dark:border-b-sq-theme-dark tw:border-b-
|
|
15003
|
-
: 'tw:hover:bg-sq-light-gray tw:border-b-
|
|
15003
|
+
return (jsxRuntime.jsxs(Root2$2, { className: `tw:flex tw:flex-col tw:min-w-75 tw:max-w-full tw:flex-grow tw:focus-visible:outline-none ${extraClassNames || ''}`, defaultValue: defaultActiveTab, "data-testid": testId, id: id, value: activeTab, onValueChange: handleTabSelect, children: [jsxRuntime.jsx(List, { className: `tw:flex tw:flex-row tw:flex-wrap tw:z-[1001]`, children: tabs.map(({ id, icon, label, tabExtraClassNames, testId: tabsTestId, disabled, tabLabelExtraClassNames = '' }, index) => (jsxRuntime.jsx(Trigger$2, { className: `tw:bg-sq-white tw:dark:bg-sq-dark-background tw:h-sq-25 tw:focus-visible:outline-none tw:min-w-25 tw:px-4 tw:border-solid tw:flex tw:flex-1 tw:justify-center tw:items-center tw:border-r-0.5 tw:last:border-r-0 tw:border-sq-overlay tw:dark:border-gray-700 ${stretchTabs ? '' : 'tw:max-w-max tw:min-w-fit'} ${tabExtraClassNames || ''} ${activeTab === id
|
|
15004
|
+
? 'tw:border-b-sq-theme-dark tw:dark:border-b-sq-theme-dark tw:border-b-sq-3'
|
|
15005
|
+
: 'tw:hover:bg-sq-light-gray tw:border-b-sq-1 tw:hover:dark:bg-gray-700'}`, "data-testid": tabsTestId, disabled: disabled, value: id, children: jsxRuntime.jsxs("span", { className: "tw:flex tw:items-center tw:overflow-hidden", children: [icon && (jsxRuntime.jsx(Icon, { icon: icon, testId: `${id}_tab-icon`, extraClassNames: "tw:text-sq-15 tw:mr-sq-7 tw:flex-shrink-0" })), jsxRuntime.jsx("span", { className: `tw:text-sq-13 tw:font-medium tw:whitespace-nowrap tw:overflow-hidden tw:text-ellipsis ${activeTab === id
|
|
15004
15006
|
? 'tw:dark:text-sq-dark-text tw:text-gray-500'
|
|
15005
|
-
: 'tw:dark:text-sq-theme-darker tw:text-sq-theme-dark'} ${tabLabelExtraClassNames}`, children: label })] }) }, `${label}-${id}-${index}`))) }), tabs.map((tab, index) => (jsxRuntime.jsx(Content$1, { className: `tw:bg-sq-white tw:dark:bg-sq-dark-background tw:overflow-y-auto tw:-mt-
|
|
15007
|
+
: 'tw:dark:text-sq-theme-darker tw:text-sq-theme-dark'} ${tabLabelExtraClassNames}`, children: label })] }) }, `${label}-${id}-${index}`))) }), tabs.map((tab, index) => (jsxRuntime.jsx(Content$1, { className: `tw:bg-sq-white tw:dark:bg-sq-dark-background tw:overflow-y-auto tw:-mt-sq-1 tw:border-t-sq-1 tw:border-t-sq-overlay tw:dark:border-t-gray-700 tw:z-[500] tw:flex tw:flex-col tw:flex-grow tw:focus-visible:outline-none ${tab.tabContentExtraClassNames || ''}`, value: tab.id, children: tab.content }, `${tab.label}_${index}_content`)))] }));
|
|
15006
15008
|
};
|
|
15007
15009
|
|
|
15008
15010
|
var COLLAPSIBLE_NAME = "Collapsible";
|
|
@@ -15471,7 +15473,7 @@ const ButtonWithPopover = ({ children, trigger, id, hasArrow, extraTriggerClassN
|
|
|
15471
15473
|
const renderContent = () => {
|
|
15472
15474
|
return (jsxRuntime.jsx(Content2$3, { sideOffset: placementOffset, align: align, side: placement, onInteractOutside: onInteractOutside, onPointerDownOutside: onPointerDownOutside, alignOffset: isHoverEnabled ? -10 : alignOffset, asChild: true, onClick: () => isCloseOnContentClick && onOpenChange && onOpenChange(false), className: "focus-visible:tw:outline-none tw:outline-none tw:w-full tw:h-full", children: jsxRuntime.jsxs("div", { "data-testid": containerTestId, className: `${bgStyles$2} ${borderStyles$2} tw:relative tw:z-[1200] tw:min-w-6 tw:focus-visible:outline-none tw:outline-none data-[state=open]:tw:animate-in data-[state=closed]:tw:animate-out
|
|
15473
15475
|
tw:data-[side=top]:animate-slideDownAndFade data-[side=right]:tw:animate-slideLeftAndFade tw:data-[side=bottom]:animate-slideUpAndFade tw:data-[side=left]:animate-slideRightAndFade tw:text-sq-text-color
|
|
15474
|
-
${extraPopoverClassNames || ''}`, children: [hasArrow && (jsxRuntime.jsx(Arrow2$2, { asChild: true, children: jsxRuntime.jsx("div", { className: "tw:fill-transparent tw:bg-sq-white tw:w-
|
|
15476
|
+
${extraPopoverClassNames || ''}`, children: [hasArrow && (jsxRuntime.jsx(Arrow2$2, { asChild: true, children: jsxRuntime.jsx("div", { className: "tw:fill-transparent tw:bg-sq-white tw:w-sq-15 tw:h-sq-15 tw:-mt-sq-7 tw:rotate-45 tw:dark:bg-sq-dark-background tw:border-b tw:border-r tw:border-sq-disabled-gray tw:dark:border-gray-500" }) })), children] }) }));
|
|
15475
15477
|
};
|
|
15476
15478
|
const renderPopover = (popoverOpenState) => {
|
|
15477
15479
|
return (jsxRuntime.jsxs(Root2$3, { open: popoverOpenState, defaultOpen: false, onOpenChange: onOpenChange, children: [trigger ? (jsxRuntime.jsx(Trigger$3, { id: id, asChild: isTriggerAsChild, className: `tw:focus-visible:outline-none tw:outline-none tw:bg-transparent ${shouldTriggerFullWidth ? 'tw:w-full tw:h-full' : ''}`, disabled: disabled, children: jsxRuntime.jsx("div", { ...tooltipData, onMouseOver: onHoverStart, onMouseOut: onHoverEnd, className: `tw:focus-visible:outline-none tw:outline-none tw:dark:text-sq-white ${disabled ? disabledClasses$2 : ''} ${shouldTriggerFullWidth ? 'tw:flex tw:flex-col tw:items-center tw:justify-center' : 'tw:inline'} ${extraTriggerClassNames || ''}`, children: trigger }) })) : (jsxRuntime.jsx(Trigger$3, { asChild: true, children: jsxRuntime.jsx("div", {}) })), isPortal ? jsxRuntime.jsx(Portal$2, { children: renderContent() }) : renderContent()] }));
|
|
@@ -16549,30 +16551,30 @@ const bgStyles$1 = ['tw:bg-sq-white', 'tw:dark:bg-sq-dark-background'].join(' ')
|
|
|
16549
16551
|
const disabledClasses$1 = ['tw:opacity-50', 'tw:cursor-not-allowed'].join(' ');
|
|
16550
16552
|
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 }) => {
|
|
16551
16553
|
const tooltipData = getQTipData(tooltipProps);
|
|
16552
|
-
return (jsxRuntime.jsxs(Root2, { defaultOpen: false, open: isOpen, onOpenChange: onOpenChange, modal: keepFocusInsideDropdown, children: [jsxRuntime.jsx(Trigger, { id: id, className: `tw:bg-transparent tw:border-none tw:focus-visible:outline-none tw:focus:outline-none tw:focus-within:outline-none`, disabled: disabled, children: jsxRuntime.jsx("div", { ...tooltipData, className: `tw:bg-transparent tw:flex tw:flex-col tw:items-center tw:focus-visible:outline-none tw:focus:outline-none tw:focus-within:outline-none ${disabled ? disabledClasses$1 : ''} ${extraClassNames}`, children: triggerIcon }) }), jsxRuntime.jsx(Portal2, { children: jsxRuntime.jsx(Content2, { onClick: onContainerClick, sideOffset: placementOffset, side: placement, align: align, alignOffset: alignOffset, asChild: true, onCloseAutoFocus: (e) => !setFocusOnTriggerOnClose && e.preventDefault(), className: "tw:focus-visible:outline-none tw:outline-none", children: jsxRuntime.jsxs("div", { "data-testid": containerTestId, className: `${bgStyles$1} tw:relative tw:z-[1200] tw:min-w-6 tw:py-2 tw:focus-visible:outline-none tw:outline-none tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out forceFont tw:data-[side=top]:animate-slideDownAndFade tw:data-[side=right]:animate-slideLeftAndFade tw:data-[side=bottom]:animate-slideUpAndFade tw:data-[side=left]:animate-slideRightAndFade ${borderStyles$1} ${contentExtraClassNames}`, children: [hasArrow && (jsxRuntime.jsx(Arrow2, { asChild: true, children: jsxRuntime.jsx("div", { className: "tw:fill-transparent tw:bg-sq-white tw:w-
|
|
16554
|
+
return (jsxRuntime.jsxs(Root2, { defaultOpen: false, open: isOpen, onOpenChange: onOpenChange, modal: keepFocusInsideDropdown, children: [jsxRuntime.jsx(Trigger, { id: id, className: `tw:bg-transparent tw:border-none tw:focus-visible:outline-none tw:focus:outline-none tw:focus-within:outline-none`, disabled: disabled, children: jsxRuntime.jsx("div", { ...tooltipData, className: `tw:bg-transparent tw:flex tw:flex-col tw:items-center tw:focus-visible:outline-none tw:focus:outline-none tw:focus-within:outline-none ${disabled ? disabledClasses$1 : ''} ${extraClassNames}`, children: triggerIcon }) }), jsxRuntime.jsx(Portal2, { children: jsxRuntime.jsx(Content2, { onClick: onContainerClick, sideOffset: placementOffset, side: placement, align: align, alignOffset: alignOffset, asChild: true, onCloseAutoFocus: (e) => !setFocusOnTriggerOnClose && e.preventDefault(), className: "tw:focus-visible:outline-none tw:outline-none", children: jsxRuntime.jsxs("div", { "data-testid": containerTestId, className: `${bgStyles$1} tw:relative tw:z-[1200] tw:min-w-6 tw:py-2 tw:focus-visible:outline-none tw:outline-none tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out forceFont tw:data-[side=top]:animate-slideDownAndFade tw:data-[side=right]:animate-slideLeftAndFade tw:data-[side=bottom]:animate-slideUpAndFade tw:data-[side=left]:animate-slideRightAndFade ${borderStyles$1} ${contentExtraClassNames}`, children: [hasArrow && (jsxRuntime.jsx(Arrow2, { asChild: true, children: jsxRuntime.jsx("div", { className: "tw:fill-transparent tw:bg-sq-white tw:w-sq-15 tw:h-sq-15 tw:rotate-45 tw:dark:bg-sq-dark-background tw:border-b tw:border-r tw:border-sq-disabled-gray tw:dark:border-gray-500 tw:-mt-sq-7" }) })), dropdownItems.map((item, index) => {
|
|
16553
16555
|
const tooltipData = getQTipData(item);
|
|
16554
16556
|
if (item.isLabel) {
|
|
16555
|
-
return (jsxRuntime.jsxs(Label2, { className: item.itemExtraClassNames, ...tooltipData, children: [item.icon && (jsxRuntime.jsx(Icon, { icon: item.icon, testId: item.iconTestId, type: "text", color: item.iconColor, extraClassNames: "tw:text-sq-text-color tw:dark:text-sq-white tw:w-
|
|
16557
|
+
return (jsxRuntime.jsxs(Label2, { className: item.itemExtraClassNames, ...tooltipData, children: [item.icon && (jsxRuntime.jsx(Icon, { icon: item.icon, testId: item.iconTestId, type: "text", color: item.iconColor, extraClassNames: "tw:text-sq-text-color tw:dark:text-sq-white tw:w-4.5" })), jsxRuntime.jsx("div", { "data-testid": item.labelTestId, className: `tw:text-sq-13 tw:ml-1 ${item.disabled ? 'tw:text-sq-disabled-gray' : 'tw:text-sq-text-color tw:dark:text-sq-white'} tw:not-italic tw:font-normal ${item.labelClasses}`, children: item.label })] }, (item.id || '') + index));
|
|
16556
16558
|
}
|
|
16557
16559
|
if (Array.isArray(item.subMenuItems) && item.subMenuItems.length > 0) {
|
|
16558
|
-
return (jsxRuntime.jsxs(Sub2, { children: [jsxRuntime.jsxs(SubTrigger2, { id: id, className: `tw:cursor-pointer tw:flex tw:justify-between tw:dark:text-sq-white tw:hover:bg-sq-gray-highlight tw:dark:hover:bg-sq-gray-highlight-dark tw:leading-none tw:items-center tw:h-
|
|
16560
|
+
return (jsxRuntime.jsxs(Sub2, { children: [jsxRuntime.jsxs(SubTrigger2, { id: id, className: `tw:cursor-pointer tw:flex tw:justify-between tw:dark:text-sq-white tw:hover:bg-sq-gray-highlight tw:dark:hover:bg-sq-gray-highlight-dark tw:leading-none tw:items-center tw:h-sq-27 tw:pl-sq-19 tw:relative tw:select-none tw:outline-none tw:data-disabled:pointer-events-none ${item.itemExtraClassNames || ''}`, "data-testid": item.testId, disabled: item.disabled, ...tooltipData, children: [jsxRuntime.jsxs("div", { className: "tw:flex", children: [item.icon && (jsxRuntime.jsx(Icon, { icon: item.icon, extraClassNames: `tw:w-4.5 ${item.disabled
|
|
16559
16561
|
? '!tw:text-sq-disabled-gray'
|
|
16560
|
-
: 'tw:text-sq-text-color tw:dark:text-sq-white'} ${item.iconExtraClassNames || ''}` })), jsxRuntime.jsx("div", { "data-testid": item.labelTestId, "data-customid": item.labelCustomId, className: `tw:text-
|
|
16561
|
-
return (jsxRuntime.jsxs(Item2, { onSelect: subItem.onClick, "data-qtip-text": subItem.tooltip, className: "tw:cursor-pointer tw:flex tw:dark:text-sq-white tw:hover:bg-sq-gray-highlight tw:dark:hover:bg-sq-gray-highlight-dark tw:leading-none tw:items-center tw:h-
|
|
16562
|
+
: 'tw:text-sq-text-color tw:dark:text-sq-white'} ${item.iconExtraClassNames || ''}` })), jsxRuntime.jsx("div", { "data-testid": item.labelTestId, "data-customid": item.labelCustomId, className: `tw:text-sq-13 tw:ml-1 ${item.disabled && '!tw:opacity-30'} tw:not-italic tw:font-semibold ${item.labelClasses}`, children: item.label })] }), jsxRuntime.jsx(Icon, { size: "sm", icon: "fc-arrow-dropdown tw:rotate-270", extraClassNames: `${item.disabled ? 'tw:text-sq-disabled-gray' : 'tw:text-sq-text-color tw:dark:text-sq-white'} tw:w-4.5 tw:ml-4 tw:text-2 tw:justify-center tw:flex` })] }), jsxRuntime.jsx(Portal2, { children: jsxRuntime.jsx(SubContent2, { className: "tw:focus-visible:outline-none tw:outline-none", children: jsxRuntime.jsx("div", { "data-testid": containerTestId, className: `${bgStyles$1} tw:relative tw:z-[1000] tw:min-w-6 tw:py-2 tw:focus-visible:outline-none tw:outline-none tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out forceFont tw:data-[side=top]:animate-slideDownAndFade tw:data-[side=right]:animate-slideLeftAndFade tw:data-[side=bottom]:animate-slideUpAndFade tw:data-[side=left]:animate-slideRightAndFade ${borderStyles$1}`, children: item.subMenuItems.map((subItem, subIndex) => {
|
|
16563
|
+
return (jsxRuntime.jsxs(Item2, { onSelect: subItem.onClick, "data-qtip-text": subItem.tooltip, className: "tw:cursor-pointer tw:flex tw:dark:text-sq-white tw:hover:bg-sq-gray-highlight tw:dark:hover:bg-sq-gray-highlight-dark tw:leading-none tw:items-center tw:h-sq-27 tw:px-sq-19 tw:relative tw:select-none tw:outline-none tw:data-disabled:pointer-events-none", disabled: subItem.disabled, children: [subItem.iconClass && (jsxRuntime.jsx(Icon, { icon: subItem.iconClass, type: "text", extraClassNames: `tw:w-4.5 ${item.disabled && '!tw:opacity-30'}` })), jsxRuntime.jsx("div", { className: `tw:text-sq-13 tw:ml-1 ${subItem.disabled
|
|
16562
16564
|
? 'tw:text-sq-disabled-gray'
|
|
16563
16565
|
: 'tw:text-sq-text-color tw:dark:text-sq-white'} tw:not-italic tw:font-normal ${item.labelClasses}`, children: subItem.label })] }, subItem.label + subIndex));
|
|
16564
16566
|
}) }) }) })] }, (item.id || item.icon || '') + index));
|
|
16565
16567
|
}
|
|
16566
16568
|
return (jsxRuntime.jsxs("div", { ...tooltipData, children: [jsxRuntime.jsxs(Item2, { "data-customid": item.itemCustomId, onSelect: (e) => {
|
|
16567
16569
|
item.onClick(e);
|
|
16568
|
-
}, className: `tw:cursor-pointer tw:flex tw:dark:text-sq-white tw:hover:bg-sq-gray-highlight tw:dark:hover:bg-sq-gray-highlight-dark tw:leading-none tw:items-center tw:min-h-
|
|
16570
|
+
}, className: `tw:cursor-pointer tw:flex tw:dark:text-sq-white tw:hover:bg-sq-gray-highlight tw:dark:hover:bg-sq-gray-highlight-dark tw:leading-none tw:items-center tw:min-h-sq-27 tw:px-sq-19 tw:relative tw:select-none tw:outline-none tw:data-disabled:pointer-events-none ${item.itemExtraClassNames || ''}`, "data-testid": item.testId, disabled: item.disabled, children: [item.icon && (jsxRuntime.jsx(Icon, { icon: item.icon, testId: item.iconTestId, type: (item.iconType || 'text'), color: item.iconColor, customId: item.iconCustomId, extraClassNames: `tw:w-sq-4.5 ${item.disabled && '!tw:opacity-30'} ${item.iconExtraClassNames || ''}` })), jsxRuntime.jsx("div", { "data-testid": item.labelTestId, "data-customid": item.labelCustomId, className: `tw:text-sq-13 tw:ml-1 ${item.disabled ? 'tw:text-sq-disabled-gray' : 'tw:text-sq-text-color tw:dark:text-sq-white'} tw:not-italic tw:font-normal ${item.labelClasses || ''}`, children: item.label })] }, (item.id || item.icon || '') + index), item.hasDivider && (jsxRuntime.jsx(Separator2, { "data-testid": `dropdown-divider-${index}`, className: "tw:h-px tw:bg-sq-disabled-gray tw:dark:bg-gray-500 tw:my-2" }))] }, (item.id || '') + index));
|
|
16569
16571
|
})] }) }) })] }));
|
|
16570
16572
|
};
|
|
16571
16573
|
|
|
16572
16574
|
const baseClasses$2 = 'tw:mx-auto tw:p-4 tw:leading-normal tw:outline-none tw:py-2 tw:px-3 tw:rounded-[10px] tw:w-full tw:relative' +
|
|
16573
16575
|
' tw:border-solid tw:border tw:text-sm tw:flex tw:flex-col tw:justify-center tw:items-center';
|
|
16574
16576
|
const darkTheme$1 = 'tw:dark:bg-sq-theme-hover-dark tw:dark:text-sq-text-color-dark';
|
|
16575
|
-
const lightTheme$1 = 'tw:text-sq-text-color tw:bg-sq-theme-highlight';
|
|
16577
|
+
const lightTheme$1 = 'tw:text-sq-text-color tw:bg-sq-theme-highlight/10';
|
|
16576
16578
|
const errorClasses$1 = 'tw:border-sq-danger';
|
|
16577
16579
|
const borderColorClasses$1 = 'tw:border-sq-theme-dark';
|
|
16578
16580
|
/**
|
|
@@ -16581,7 +16583,7 @@ const borderColorClasses$1 = 'tw:border-sq-theme-dark';
|
|
|
16581
16583
|
const Alert = ({ children, dismissible = true, onClose, show = true, variant, testId = 'alert-id', id, extraClassNames, ...tooltipProps }) => {
|
|
16582
16584
|
const appliedTheme = {
|
|
16583
16585
|
theme: `${lightTheme$1} ${darkTheme$1}`,
|
|
16584
|
-
formulaError: 'tw:text-red-800 tw:bg-red-200 !tw:rounded-[
|
|
16586
|
+
formulaError: 'tw:text-red-800 tw:bg-red-200 !tw:rounded-[0.25rem]',
|
|
16585
16587
|
danger: 'tw:text-sq-text-color tw:bg-sq-danger',
|
|
16586
16588
|
warning: 'tw:bg-sq-bg-warning tw:text-sq-text-color',
|
|
16587
16589
|
gray: 'tw:bg-sq-hover-gray tw:text-sq-text-color tw:dark:bg-sq-tools-background-dark tw:dark:text-sq-text-color-dark',
|
|
@@ -16597,7 +16599,7 @@ const Alert = ({ children, dismissible = true, onClose, show = true, variant, te
|
|
|
16597
16599
|
if (!show) {
|
|
16598
16600
|
return jsxRuntime.jsx("div", {});
|
|
16599
16601
|
}
|
|
16600
|
-
return (jsxRuntime.jsxs("div", { "data-testid": testId, id: id, className: appliedClasses, children: [children, dismissible && (jsxRuntime.jsx(Icon, { icon: "fc-delete", type: variant.match(/danger|warning|formulaError/) ? 'color' : 'theme', color: variant.match(/danger|warning|formulaError/) ? 'inherit' : undefined, extraClassNames: `tw:self-end tw:text-
|
|
16602
|
+
return (jsxRuntime.jsxs("div", { "data-testid": testId, id: id, className: appliedClasses, children: [children, dismissible && (jsxRuntime.jsx(Icon, { icon: "fc-delete", type: variant.match(/danger|warning|formulaError/) ? 'color' : 'theme', color: variant.match(/danger|warning|formulaError/) ? 'inherit' : undefined, extraClassNames: `tw:self-end tw:text-size-11 tw:cursor-pointer tw:absolute tw:right-2.5 tw:top-2.5 ${variant.match(/danger|warning|gray|formulaError/) ? 'tw:text-sq-text-color tw:dark:text-sq-dark-text' : ''}`, testId: `${testId}-close-btn`, onClick: onClose, ...tooltipProps }))] }));
|
|
16601
16603
|
};
|
|
16602
16604
|
|
|
16603
16605
|
/**
|
|
@@ -16626,19 +16628,19 @@ const SvgIcon = ({ onClick, icon, color, type = 'default', extraClassNames, view
|
|
|
16626
16628
|
const SeeqActionDropdownItem = (item) => {
|
|
16627
16629
|
let renderIcon = jsxRuntime.jsx(jsxRuntime.Fragment, {});
|
|
16628
16630
|
if (item.icon) {
|
|
16629
|
-
renderIcon = isSvgIcon(item.icon) ? (jsxRuntime.jsx(SvgIcon, { icon: item.icon, extraClassNames: 'tw:p-1 tw:h-8 tw:w-8 tw:dark:text-sq-white tw:!text-
|
|
16631
|
+
renderIcon = isSvgIcon(item.icon) ? (jsxRuntime.jsx(SvgIcon, { icon: item.icon, extraClassNames: 'tw:p-1 tw:h-8 tw:w-8 tw:dark:text-sq-white tw:!text-5.5 tw:text-sq-white ' + item.iconExtraClassNames, ...item })) : (jsxRuntime.jsx(Icon, { icon: item.icon, type: "text", extraClassNames: 'tw:dark:text-sq-white tw:!text-5.5 tw:text-sq-white ' + item.iconExtraClassNames }));
|
|
16630
16632
|
}
|
|
16631
|
-
return (jsxRuntime.jsxs("div", { className: "tw:flex-col tw:flex tw:p-
|
|
16633
|
+
return (jsxRuntime.jsxs("div", { className: "tw:flex-col tw:flex tw:p-2.5 tw:pl-5 tw:w-150", children: [jsxRuntime.jsxs("div", { className: "tw:flex tw:flex-row tw:gap-2 tw:items-end", children: [jsxRuntime.jsx("div", { className: "tw:rounded-[0.1875rem] tw:h-8 tw:w-8 tw:bg-sq-theme-dark tw:flex tw:justify-center tw:items-center ", children: renderIcon }), jsxRuntime.jsx("h4", { className: "tw:text-base tw:font-[600] tw:leading-5 mb-0", children: item.display })] }), jsxRuntime.jsx("div", { className: "tw:text-sq-13 tw:font-normal", children: item.text })] }));
|
|
16632
16634
|
};
|
|
16633
16635
|
const ViewWorkbench = (item) => {
|
|
16634
16636
|
let renderIcon = jsxRuntime.jsx(jsxRuntime.Fragment, {});
|
|
16635
16637
|
if (item.icon) {
|
|
16636
|
-
renderIcon = isSvgIcon(item.icon) ? (jsxRuntime.jsx(SvgIcon, { icon: item.icon, extraClassNames: 'tw:w-4 tw:text-
|
|
16638
|
+
renderIcon = isSvgIcon(item.icon) ? (jsxRuntime.jsx(SvgIcon, { icon: item.icon, extraClassNames: 'tw:w-4 tw:text-5 tw:dark:text-sq-white' + ' tw:text-sq-text-color ' + item.iconExtraClassNames, type: "default", ...item })) : (jsxRuntime.jsx(Icon, { icon: item.icon, type: "text", extraClassNames: 'tw:text-5 tw:dark:text-sq-white tw:text-sq-text-color ' + item.iconExtraClassNames }));
|
|
16637
16639
|
}
|
|
16638
|
-
return (jsxRuntime.jsx("div", { className: "tw:flex-col tw:flex tw:p-
|
|
16640
|
+
return (jsxRuntime.jsx("div", { className: "tw:flex-col tw:flex tw:p-2.5", children: jsxRuntime.jsxs("div", { className: "tw:flex tw:flex-row tw:gap-2 tw:items-end", children: [jsxRuntime.jsx("div", { className: "tw:rounded-[0.1875rem] tw:h-5 tw:w-5 tw:flex tw:justify-center tw:items-center ", children: renderIcon }), jsxRuntime.jsx("div", { className: "tw:text-sq-13", children: item.display })] }) }));
|
|
16639
16641
|
};
|
|
16640
16642
|
const InsertSeeqContent = (item) => {
|
|
16641
|
-
return (jsxRuntime.jsxs("div", { className: "tw:flex-col tw:flex tw:justify-start tw:p-
|
|
16643
|
+
return (jsxRuntime.jsxs("div", { className: "tw:flex-col tw:flex tw:justify-start tw:p-2.5 tw:font-normal tw:text-left tw:text-sq-text-color tw:dark:text-sq-dark-text", children: [jsxRuntime.jsx("h5", { className: "tw:text-4 tw:font-medium tw:text-sq-theme-dark tw:leading-4.5", children: item.display }), jsxRuntime.jsx("div", { className: "tw:text-sq-13 tw:text-sq-text-color tw:dark:text-sq-dark-text !tw:mt-1", children: item.text })] }));
|
|
16642
16644
|
};
|
|
16643
16645
|
|
|
16644
16646
|
const borderStyles = [
|
|
@@ -16668,7 +16670,7 @@ const SeeqActionDropdown = ({ seeqActionDropdownItems, trigger, id, extraClassNa
|
|
|
16668
16670
|
' tw:relative tw:z-[1200] tw:min-w-6 tw:py-2 tw:focus-visible:outline-none tw:outline-none' +
|
|
16669
16671
|
' tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out' +
|
|
16670
16672
|
' forceFont tw:data-[side=top]:animate-slideDownAndFade tw:data-[side=right]:animate-slideLeftAndFade tw:data-[side=bottom]:animate-slideUpAndFade tw:data-[side=left]:animate-slideRightAndFade ' +
|
|
16671
|
-
borderStyles, children: [hasArrow && (jsxRuntime.jsx(Arrow2, { asChild: true, children: jsxRuntime.jsx("div", { className: " tw:fill-transparent tw:bg-sq-white tw:w-
|
|
16673
|
+
borderStyles, children: [hasArrow && (jsxRuntime.jsx(Arrow2, { asChild: true, children: jsxRuntime.jsx("div", { className: " tw:fill-transparent tw:bg-sq-white tw:w-sq-15 tw:h-sq-15 tw:rotate-45 tw:dark:bg-sq-dark-background tw:border-b tw:border-r tw:border-sq-disabled-gray tw:dark:border-gray-500 tw:-mt-sq-7" }) })), seeqActionDropdownItems.map((item, index) => {
|
|
16672
16674
|
return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Item2, { onSelect: (e) => {
|
|
16673
16675
|
item.action(e);
|
|
16674
16676
|
}, className: `tw:cursor-pointer tw:flex tw:dark:text-sq-white tw:hover:bg-sq-gray-highlight tw:dark:hover:bg-sq-gray-highlight-dark tw:relative tw:select-none tw:outline-none tw:data-[disabled]:text-sq-disabled-gray tw:data-[disabled]:pointer-events-none`, "data-testid": item.testId, disabled: !item.enabled, children: renderItem(variant, item) }), item.divider && (jsxRuntime.jsx(Separator2, { "data-testid": `dropdown-divider-${index}`, className: "tw:h-px tw:bg-sq-disabled-gray tw:dark:bg-gray-500 tw:my-2" }))] }, item.display + index));
|
|
@@ -27431,7 +27433,7 @@ var Thumb = SliderThumb;
|
|
|
27431
27433
|
*/
|
|
27432
27434
|
const Slider = (props) => {
|
|
27433
27435
|
const { onValueChange, onPointerUp, id, value, name, disabled = false, rootExtraClassNames = '', trackExtraClassNames = '', rangeExtraClassNames = '', thumbExtraClassNames = '', step, min, max, } = props;
|
|
27434
|
-
return (jsxRuntime.jsxs(Root$1, { className: `tw:relative tw:flex tw:h-5 tw:w-full tw:touch-none tw:select-none tw:items-center ${rootExtraClassNames}`, defaultValue: [value], value: [value], onValueChange: (value) => onValueChange && onValueChange(value), onPointerUp: (e) => onPointerUp && onPointerUp(e), name: name, id: id, max: max, min: min, disabled: disabled, step: step, children: [jsxRuntime.jsx(Track, { className: `tw:relative tw:h-
|
|
27436
|
+
return (jsxRuntime.jsxs(Root$1, { className: `tw:relative tw:flex tw:h-5 tw:w-full tw:touch-none tw:select-none tw:items-center ${rootExtraClassNames}`, defaultValue: [value], value: [value], onValueChange: (value) => onValueChange && onValueChange(value), onPointerUp: (e) => onPointerUp && onPointerUp(e), name: name, id: id, max: max, min: min, disabled: disabled, step: step, children: [jsxRuntime.jsx(Track, { className: `tw:relative tw:h-sq-5 tw:grow tw:rounded-sm tw:bg-sq-dark-gray tw:dark:bg-sq-dark-disabled-gray ${trackExtraClassNames}`, children: jsxRuntime.jsx(Range, { className: `tw:absolute tw:h-full tw:rounded-full ${rangeExtraClassNames}` }) }), jsxRuntime.jsx(Thumb, { className: `tw:block tw:h-sq-15 tw:w-sq-15 tw:rounded-full tw:bg-sq-theme-dark active:tw:bg-sq-theme-darker tw:focus:outline-none tw:focus-visible:outline-none tw:aria-disabled:bg-sq-dark-gray tw:dark:aria-disabled:bg-sq-dark-disabled-gray tw:transition tw:ease-in-out ${thumbExtraClassNames}`, "aria-disabled": disabled })] }));
|
|
27435
27437
|
};
|
|
27436
27438
|
|
|
27437
27439
|
var PROGRESS_NAME = "Progress";
|
|
@@ -28700,7 +28702,7 @@ function validateWCAG2Parms(parms) {
|
|
|
28700
28702
|
};
|
|
28701
28703
|
}
|
|
28702
28704
|
|
|
28703
|
-
const baseLabelClasses = 'tw:left-1 tw:text-xs tw:text-sq-text-color tw:dark:text-sq-dark-text tw:items-center tw:h-
|
|
28705
|
+
const baseLabelClasses = 'tw:left-1 tw:text-xs tw:text-sq-text-color tw:dark:text-sq-dark-text tw:items-center tw:h-4.5';
|
|
28704
28706
|
const ProgressIndicator = (props) => {
|
|
28705
28707
|
const { value, color = undefined, testId, label, extraClasses = '', labelClasses = '', valuesLength, max, index, totalValue, ...tooltipProps } = props;
|
|
28706
28708
|
const tooltipData = getQTipData(tooltipProps);
|
|
@@ -28713,19 +28715,19 @@ const ProgressIndicator = (props) => {
|
|
|
28713
28715
|
if (totalValue >= max) {
|
|
28714
28716
|
// If progress is 100%, round both ends
|
|
28715
28717
|
if (index === 0 && valuesLength === 1) {
|
|
28716
|
-
roundedCorners = 'tw:rounded-[
|
|
28718
|
+
roundedCorners = 'tw:rounded-[0.9375rem]';
|
|
28717
28719
|
}
|
|
28718
28720
|
else if (index === 0) {
|
|
28719
|
-
roundedCorners = 'tw:rounded-l-[
|
|
28721
|
+
roundedCorners = 'tw:rounded-l-[0.9375rem]';
|
|
28720
28722
|
}
|
|
28721
28723
|
else if (index === valuesLength - 1) {
|
|
28722
|
-
roundedCorners = 'tw:rounded-r-[
|
|
28724
|
+
roundedCorners = 'tw:rounded-r-[0.9375rem]';
|
|
28723
28725
|
}
|
|
28724
28726
|
}
|
|
28725
28727
|
else {
|
|
28726
28728
|
// Otherwise, only round the leftmost indicator
|
|
28727
28729
|
if (index === 0) {
|
|
28728
|
-
roundedCorners = 'tw:rounded-l-[
|
|
28730
|
+
roundedCorners = 'tw:rounded-l-[0.9375rem]';
|
|
28729
28731
|
}
|
|
28730
28732
|
}
|
|
28731
28733
|
React.useEffect(() => {
|
|
@@ -28751,7 +28753,7 @@ const ProgressIndicator = (props) => {
|
|
|
28751
28753
|
computeTextClass(indicatorElementRef.current);
|
|
28752
28754
|
}
|
|
28753
28755
|
}, [!!indicatorElementRef.current]);
|
|
28754
|
-
return (React.createElement(Indicator, { className: `tw:ease-[cubic-bezier(0.65, 0, 0.35, 1)] tw:w-full tw:h-
|
|
28756
|
+
return (React.createElement(Indicator, { className: `tw:ease-[cubic-bezier(0.65, 0, 0.35, 1)] tw:w-full tw:h-4.5 tw:duration-[660ms] tw:flex tw:justify-center tw:items-center ${valuesLength === 1 ? '' : 'tw:overflow-hidden'} ${roundedCorners} ${bgClass} ${extraClasses}`, ...tooltipData, "data-qtip-text": tooltipProps.tooltip ? tooltipProps.tooltip : `${value}%`, "data-testid": `progress-bar-indicator-${testId ? testId : value}`, key: `${index}-${value}`, ref: indicatorElementRef, style: {
|
|
28755
28757
|
// Background color will default to the theme color if undefined
|
|
28756
28758
|
backgroundColor: bgColor,
|
|
28757
28759
|
animation: 'width 660ms forwards',
|
|
@@ -28760,7 +28762,7 @@ const ProgressIndicator = (props) => {
|
|
|
28760
28762
|
};
|
|
28761
28763
|
const ProgressBar = ({ values = [], max = 100, containerExtraClasses = '', zeroValueLabel = 'No progress yet', }) => {
|
|
28762
28764
|
const totalValue = values.reduce((acc, { value }) => acc + value, 0);
|
|
28763
|
-
return (jsxRuntime.jsx(Root, { className: `tw:relative tw:h-
|
|
28765
|
+
return (jsxRuntime.jsx(Root, { className: `tw:relative tw:h-4.5 tw:w-full tw:overflow-hidden tw:rounded-[0.9375rem] tw:bg-sq-dark-gray tw:dark:bg-sq-dark-disabled-gray tw:flex tw:flex-1 ${containerExtraClasses}`, max: max, value: totalValue, children: totalValue > 0 ? (values.map((props, i) => {
|
|
28764
28766
|
return (React.createElement(ProgressIndicator, { ...props, max: max, valuesLength: values.length, index: i, totalValue: totalValue, key: i }));
|
|
28765
28767
|
})) : (jsxRuntime.jsx("div", { className: `${baseLabelClasses} tw:mx-auto tw:overflow-hidden`, children: zeroValueLabel })) }));
|
|
28766
28768
|
};
|
|
@@ -28791,7 +28793,7 @@ const ButtonGroup = (props) => {
|
|
|
28791
28793
|
const appliedClasses = `${baseClasses} ${extraClassNames}`;
|
|
28792
28794
|
return (jsxRuntime.jsx("div", { id: id ? `button-group-${id}` : undefined, "data-testid": testId, className: appliedClasses, ...tooltipData, children: buttons
|
|
28793
28795
|
.filter(Boolean)
|
|
28794
|
-
.map((item, index) => item?.variant === 'button' ? (jsxRuntime.jsx(Button, { ...item.buttonProps, extraClassNames: `tw
|
|
28796
|
+
.map((item, index) => item?.variant === 'button' ? (jsxRuntime.jsx(Button, { ...item.buttonProps, extraClassNames: `tw:-ml-sq-1 tw:focus:z-40 tw:outline-none tw:focus:border tw:rounded-none tw:first:rounded-l-md tw:last:rounded-r-md ${item.buttonProps?.isActive
|
|
28795
28797
|
? `${activeClassesByVariantLightTheme[item?.buttonProps?.variant ?? 'outline']} ${activeClassesByVariantDarkTheme[item?.buttonProps?.variant ?? 'outline']} `
|
|
28796
28798
|
: ''} ${item.buttonProps.extraClassNames}`, onClick: () => onChange && onChange(item?.buttonProps?.value) }, index)) : (item?.element)) }));
|
|
28797
28799
|
};
|