@seeqdev/qomponents 0.0.172 → 0.0.174
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.esm.js +406 -374
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +406 -374
- package/dist/index.js.map +1 -1
- package/dist/src/Alert/Alert.stories.d.ts +1 -0
- package/dist/src/Alert/Alert.types.d.ts +1 -1
- package/dist/styles.css +2769 -3418
- package/package.json +15 -12
package/dist/index.js
CHANGED
|
@@ -66,34 +66,34 @@ const getQTipData = ({ tooltip, tooltipPlacement, isHtmlTooltip, tooltipTestId,
|
|
|
66
66
|
: undefined;
|
|
67
67
|
|
|
68
68
|
const colorClassesThemeLight = {
|
|
69
|
-
'theme': 'tw
|
|
70
|
-
'white': 'tw
|
|
71
|
-
'dark-gray': 'tw
|
|
72
|
-
'warning': 'tw
|
|
73
|
-
'darkish-gray': 'tw
|
|
74
|
-
'gray': 'tw
|
|
69
|
+
'theme': 'tw:text-sq-theme-dark',
|
|
70
|
+
'white': 'tw:text-sq-white',
|
|
71
|
+
'dark-gray': 'tw:text-sq-fairly-dark-gray',
|
|
72
|
+
'warning': 'tw:text-sq-warning',
|
|
73
|
+
'darkish-gray': 'tw:text-sq-darkish-gray',
|
|
74
|
+
'gray': 'tw:text-sq-disabled-gray',
|
|
75
75
|
'color': '',
|
|
76
|
-
'info': 'tw
|
|
77
|
-
'text': 'tw
|
|
76
|
+
'info': 'tw:text-sq-theme-link',
|
|
77
|
+
'text': 'tw:text-sq-text-color',
|
|
78
78
|
'inherit': '',
|
|
79
|
-
'danger': 'tw
|
|
80
|
-
'theme-light': 'tw
|
|
81
|
-
'success': 'tw
|
|
79
|
+
'danger': 'tw:text-sq-danger',
|
|
80
|
+
'theme-light': 'tw:text-sq-theme-light',
|
|
81
|
+
'success': 'tw:text-sq-success',
|
|
82
82
|
};
|
|
83
83
|
const colorClassesThemeDark = {
|
|
84
|
-
'theme': 'dark:
|
|
84
|
+
'theme': 'tw:dark:text-sq-theme-darker',
|
|
85
85
|
'white': '',
|
|
86
|
-
'dark-gray': 'tw
|
|
86
|
+
'dark-gray': 'tw:text-sq-fairly-dark-gray',
|
|
87
87
|
'warning': '',
|
|
88
|
-
'darkish-gray': 'tw
|
|
89
|
-
'gray': 'dark:
|
|
88
|
+
'darkish-gray': 'tw:text-sq-darkish-gray',
|
|
89
|
+
'gray': 'tw:dark:text-sq-dark-disabled-gray',
|
|
90
90
|
'color': '',
|
|
91
|
-
'info': 'dark:
|
|
92
|
-
'text': 'dark:
|
|
91
|
+
'info': 'tw:dark:text-sq-theme-link',
|
|
92
|
+
'text': 'tw:dark:text-sq-dark-text',
|
|
93
93
|
'inherit': '',
|
|
94
|
-
'danger': 'tw
|
|
95
|
-
'theme-light': 'tw
|
|
96
|
-
'success': 'tw
|
|
94
|
+
'danger': 'tw:text-sq-danger',
|
|
95
|
+
'theme-light': 'tw:text-sq-theme-light',
|
|
96
|
+
'success': 'tw:text-sq-success',
|
|
97
97
|
};
|
|
98
98
|
/**
|
|
99
99
|
* Icon:
|
|
@@ -105,14 +105,14 @@ const Icon = ({ onClick, icon, iconPrefix = undefined, type = 'theme', extraClas
|
|
|
105
105
|
const errorMessage = color === undefined || color === ''
|
|
106
106
|
? 'Icon with type="color" must have prop color specified.'
|
|
107
107
|
: 'Icon with prop color must have type="color".';
|
|
108
|
-
return jsxRuntime.jsx("div", { className: "tw
|
|
108
|
+
return jsxRuntime.jsx("div", { className: "tw:text-sq-danger-color", children: errorMessage });
|
|
109
109
|
}
|
|
110
110
|
const fontAwesomePrefix = iconPrefix ? iconPrefix : 'fa-sharp fa-regular';
|
|
111
111
|
const iconPrefixString = icon.startsWith('fc') ? 'fc' : fontAwesomePrefix;
|
|
112
112
|
const style = type === 'color' && color ? { color } : {};
|
|
113
113
|
const sizeClass = size ? `fa-${size}` : small ? 'fa-sm' : large ? 'fa-lg' : '';
|
|
114
114
|
const appliedClassNames = `${iconPrefixString} ${icon} ${sizeClass}
|
|
115
|
-
${colorClassesThemeLight[type]} ${colorClassesThemeDark[type]} ${onClick ? 'tw
|
|
115
|
+
${colorClassesThemeLight[type]} ${colorClassesThemeDark[type]} ${onClick ? 'tw:cursor-pointer' : ''} ${extraClassNames} tw:focus:outline-none tw:focus-visible:outline-none tw:outline-none`;
|
|
116
116
|
const tooltipData = getQTipData(tooltipProps);
|
|
117
117
|
return (jsxRuntime.jsx("i", { className: appliedClassNames, style: style, onClick: onClick, "data-testid": testId, "data-customid": customId, id: id, "data-number": number, ...tooltipData }));
|
|
118
118
|
};
|
|
@@ -123,58 +123,58 @@ const Icon = ({ onClick, icon, iconPrefix = undefined, type = 'theme', extraClas
|
|
|
123
123
|
* - include tooltips and/or icons
|
|
124
124
|
*/
|
|
125
125
|
const Button = ({ onClick, label, variant = 'outline', type = 'button', size = 'sm', disabled, extraClassNames, id, testId, stopPropagation = true, tooltip, tooltipOptions, iconStyle = 'text', icon, iconColor, iconPosition = 'left', iconPrefix = undefined, preventBlur = false, isHtmlTooltip = false, tooltipTestId, }) => {
|
|
126
|
-
const baseClasses = 'tw
|
|
126
|
+
const baseClasses = 'tw:px-2.5 tw:rounded-md tw:focus:ring-0 tw:focus-visible:outline-none tw:cursor-pointer tw:disabled:pointer-events-none';
|
|
127
127
|
const baseClassesByVariant = {
|
|
128
|
-
'outline': 'disabled:
|
|
129
|
-
'theme': 'disabled:
|
|
130
|
-
'danger': 'tw
|
|
131
|
-
'tw
|
|
132
|
-
'theme-light': 'disabled:
|
|
133
|
-
'no-border': 'disabled:
|
|
134
|
-
'warning': 'tw
|
|
128
|
+
'outline': 'tw:disabled:opacity-50 tw:border-solid tw:border',
|
|
129
|
+
'theme': 'tw:disabled:opacity-50 tw:border-solid tw:border',
|
|
130
|
+
'danger': 'tw:bg-sq-danger tw:hover:bg-sq-danger-hover/80 tw:disabled:opacity-50 tw:border-solid tw:border ' +
|
|
131
|
+
'tw:border-sq-danger tw:hover:border-sq-danger-hover/80',
|
|
132
|
+
'theme-light': 'tw:disabled:opacity-50 tw:border-solid tw:border',
|
|
133
|
+
'no-border': 'tw:bg-transparent tw:disabled:opacity-50',
|
|
134
|
+
'warning': 'tw:bg-sq-warning tw:border-solid tw:border tw:border-sq-warning',
|
|
135
135
|
};
|
|
136
136
|
const textClassesByVariantLightTheme = {
|
|
137
|
-
'outline': 'tw
|
|
138
|
-
'theme': 'tw
|
|
139
|
-
'theme-light': 'tw
|
|
140
|
-
'danger': 'tw
|
|
141
|
-
'no-border': 'tw
|
|
142
|
-
'warning': 'tw
|
|
137
|
+
'outline': 'tw:text-sq-text-color',
|
|
138
|
+
'theme': 'tw:text-sq-white',
|
|
139
|
+
'theme-light': 'tw:text-sq-white',
|
|
140
|
+
'danger': 'tw:text-sq-white',
|
|
141
|
+
'no-border': 'tw:text-sq-text-color',
|
|
142
|
+
'warning': 'tw:text-sq-white',
|
|
143
143
|
};
|
|
144
144
|
const textClassesByVariantDarkTheme = {
|
|
145
|
-
'outline': 'dark:
|
|
146
|
-
'theme': 'dark:
|
|
147
|
-
'theme-light': 'dark:
|
|
148
|
-
'danger': 'dark:
|
|
149
|
-
'no-border': 'dark:
|
|
150
|
-
'warning': 'dark:
|
|
145
|
+
'outline': 'tw:dark:text-sq-dark-text',
|
|
146
|
+
'theme': 'tw:dark:text-sq-white',
|
|
147
|
+
'theme-light': 'tw:dark:text-sq-white',
|
|
148
|
+
'danger': 'tw:dark:text-sq-white',
|
|
149
|
+
'no-border': 'tw:dark:text-sq-dark-text',
|
|
150
|
+
'warning': 'tw:dark:text-sq-white',
|
|
151
151
|
};
|
|
152
152
|
const classesByVariantLightTheme = {
|
|
153
|
-
'outline': 'tw
|
|
154
|
-
' focus:
|
|
155
|
-
'theme': 'tw
|
|
156
|
-
' hover:
|
|
153
|
+
'outline': 'tw:bg-sq-white tw:dark:bg-sq-dark-background tw:border-sq-disabled-gray tw:hover:bg-sq-light-gray' +
|
|
154
|
+
' tw:focus:bg-sq-dark-gray tw:active:bg-sq-dark-gray tw:focus:border-sq-color-dark tw:active:border-sq-color-dark',
|
|
155
|
+
'theme': 'tw:bg-sq-theme-dark tw:hover:bg-sq-theme-highlight tw:border-sq-theme-dark' +
|
|
156
|
+
' tw:hover:border-sq-theme-highlight',
|
|
157
157
|
'danger': '',
|
|
158
|
-
'theme-light': 'tw
|
|
158
|
+
'theme-light': 'tw:bg-sq-theme-icon tw:hover:bg-sq-theme-link tw:border-sq-theme-icon tw:hover:border-sq-theme-link',
|
|
159
159
|
'no-border': '',
|
|
160
160
|
'warning': '',
|
|
161
161
|
};
|
|
162
162
|
const classesByVariantDarkTheme = {
|
|
163
|
-
'outline': 'dark:
|
|
164
|
-
' dark:focus:
|
|
165
|
-
' dark:active:
|
|
166
|
-
'theme': 'dark:
|
|
167
|
-
' dark:hover:
|
|
163
|
+
'outline': 'tw:dark:border-sq-dark-disabled-gray tw:dark:hover:bg-sq-highlight-color-dark' +
|
|
164
|
+
' tw:dark:focus:bg-sq-multi-gray-dark tw:dark:active:bg-sq-multi-gray-dark tw:dark:focus:border-sq-theme-dark' +
|
|
165
|
+
' tw:dark:active:border-sq-theme-dark',
|
|
166
|
+
'theme': 'tw:dark:bg-sq-theme-dark tw:dark:hover:bg-sq-theme-highlight tw:dark:border-sq-theme-dark' +
|
|
167
|
+
' tw:dark:hover:border-sq-theme-highlight',
|
|
168
168
|
'danger': '',
|
|
169
|
-
'theme-light': 'dark:
|
|
170
|
-
' dark:hover:
|
|
169
|
+
'theme-light': 'tw:dark:bg-sq-theme-icon tw:dark:hover:bg-sq-link-dark tw:dark:border-sq-icon-dark' +
|
|
170
|
+
' tw:dark:hover:border-sq-link-dark',
|
|
171
171
|
'no-border': '',
|
|
172
172
|
'warning': '',
|
|
173
173
|
};
|
|
174
174
|
const sizeClasses = {
|
|
175
|
-
xs: 'tw
|
|
176
|
-
sm: 'tw
|
|
177
|
-
lg: 'tw
|
|
175
|
+
xs: 'tw:text-xs tw:py-0.5',
|
|
176
|
+
sm: 'tw:text-sm tw:py-1',
|
|
177
|
+
lg: 'tw:text-xl tw:py-1',
|
|
178
178
|
};
|
|
179
179
|
const appliedClasses = `${baseClasses} ${baseClassesByVariant[variant]} ${sizeClasses[size]} ${classesByVariantLightTheme[variant]} ${classesByVariantDarkTheme[variant]} ${textClassesByVariantLightTheme[variant]} ${textClassesByVariantDarkTheme[variant]} ${extraClassNames}`;
|
|
180
180
|
let tooltipData = undefined;
|
|
@@ -187,7 +187,7 @@ const Button = ({ onClick, label, variant = 'outline', type = 'button', size = '
|
|
|
187
187
|
'data-qtip-delay': tooltipOptions?.delay ?? DEFAULT_TOOL_TIP_DELAY,
|
|
188
188
|
};
|
|
189
189
|
}
|
|
190
|
-
const iconClass = iconPosition === 'left' ? 'tw
|
|
190
|
+
const iconClass = iconPosition === 'left' ? 'tw:mr-1' : 'tw:ml-1';
|
|
191
191
|
const iconElement = icon && (jsxRuntime.jsx(Icon, { icon: icon, iconPrefix: iconPrefix, type: iconStyle, color: iconColor, extraClassNames: label
|
|
192
192
|
? `${iconClass} ${textClassesByVariantLightTheme[variant]} ${textClassesByVariantDarkTheme[variant]}`
|
|
193
193
|
: '', testId: `${id}_spinner` }));
|
|
@@ -1404,7 +1404,7 @@ const flip$4 = function (options) {
|
|
|
1404
1404
|
if (!ignoreCrossAxisOverflow ||
|
|
1405
1405
|
// We leave the current main axis only if every placement on that axis
|
|
1406
1406
|
// overflows the main axis.
|
|
1407
|
-
overflowsData.every(d => d.overflows[0] > 0
|
|
1407
|
+
overflowsData.every(d => getSideAxis(d.placement) === initialSideAxis ? d.overflows[0] > 0 : true)) {
|
|
1408
1408
|
// Try next placement and re-run the lifecycle.
|
|
1409
1409
|
return {
|
|
1410
1410
|
data: {
|
|
@@ -2143,14 +2143,9 @@ function getWindowScrollBarX$1(element, rect) {
|
|
|
2143
2143
|
return rect.left + leftScroll;
|
|
2144
2144
|
}
|
|
2145
2145
|
|
|
2146
|
-
function getHTMLOffset(documentElement, scroll
|
|
2147
|
-
if (ignoreScrollbarX === void 0) {
|
|
2148
|
-
ignoreScrollbarX = false;
|
|
2149
|
-
}
|
|
2146
|
+
function getHTMLOffset(documentElement, scroll) {
|
|
2150
2147
|
const htmlRect = documentElement.getBoundingClientRect();
|
|
2151
|
-
const x = htmlRect.left + scroll.scrollLeft - (
|
|
2152
|
-
// RTL <body> scrollbar.
|
|
2153
|
-
getWindowScrollBarX$1(documentElement, htmlRect));
|
|
2148
|
+
const x = htmlRect.left + scroll.scrollLeft - getWindowScrollBarX$1(documentElement, htmlRect);
|
|
2154
2149
|
const y = htmlRect.top + scroll.scrollTop;
|
|
2155
2150
|
return {
|
|
2156
2151
|
x,
|
|
@@ -2189,7 +2184,7 @@ function convertOffsetParentRelativeRectToViewportRelativeRect$1(_ref) {
|
|
|
2189
2184
|
offsets.y = offsetRect.y + offsetParent.clientTop;
|
|
2190
2185
|
}
|
|
2191
2186
|
}
|
|
2192
|
-
const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll
|
|
2187
|
+
const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
|
|
2193
2188
|
return {
|
|
2194
2189
|
width: rect.width * scale.x,
|
|
2195
2190
|
height: rect.height * scale.y,
|
|
@@ -2223,6 +2218,10 @@ function getDocumentRect$1(element) {
|
|
|
2223
2218
|
};
|
|
2224
2219
|
}
|
|
2225
2220
|
|
|
2221
|
+
// Safety check: ensure the scrollbar space is reasonable in case this
|
|
2222
|
+
// calculation is affected by unusual styles.
|
|
2223
|
+
// Most scrollbars leave 15-18px of space.
|
|
2224
|
+
const SCROLLBAR_MAX = 25;
|
|
2226
2225
|
function getViewportRect$1(element, strategy) {
|
|
2227
2226
|
const win = getWindow(element);
|
|
2228
2227
|
const html = getDocumentElement(element);
|
|
@@ -2240,6 +2239,24 @@ function getViewportRect$1(element, strategy) {
|
|
|
2240
2239
|
y = visualViewport.offsetTop;
|
|
2241
2240
|
}
|
|
2242
2241
|
}
|
|
2242
|
+
const windowScrollbarX = getWindowScrollBarX$1(html);
|
|
2243
|
+
// <html> `overflow: hidden` + `scrollbar-gutter: stable` reduces the
|
|
2244
|
+
// visual width of the <html> but this is not considered in the size
|
|
2245
|
+
// of `html.clientWidth`.
|
|
2246
|
+
if (windowScrollbarX <= 0) {
|
|
2247
|
+
const doc = html.ownerDocument;
|
|
2248
|
+
const body = doc.body;
|
|
2249
|
+
const bodyStyles = getComputedStyle(body);
|
|
2250
|
+
const bodyMarginInline = doc.compatMode === 'CSS1Compat' ? parseFloat(bodyStyles.marginLeft) + parseFloat(bodyStyles.marginRight) || 0 : 0;
|
|
2251
|
+
const clippingStableScrollbarWidth = Math.abs(html.clientWidth - body.clientWidth - bodyMarginInline);
|
|
2252
|
+
if (clippingStableScrollbarWidth <= SCROLLBAR_MAX) {
|
|
2253
|
+
width -= clippingStableScrollbarWidth;
|
|
2254
|
+
}
|
|
2255
|
+
} else if (windowScrollbarX <= SCROLLBAR_MAX) {
|
|
2256
|
+
// If the <body> scrollbar is on the left, the width needs to be extended
|
|
2257
|
+
// by the scrollbar amount so there isn't extra space on the right.
|
|
2258
|
+
width += windowScrollbarX;
|
|
2259
|
+
}
|
|
2243
2260
|
return {
|
|
2244
2261
|
width,
|
|
2245
2262
|
height,
|
|
@@ -4762,31 +4779,30 @@ function getSvgIconPath(icon) {
|
|
|
4762
4779
|
}
|
|
4763
4780
|
|
|
4764
4781
|
const popoverBorderStyles = [
|
|
4765
|
-
'tw
|
|
4766
|
-
'tw
|
|
4767
|
-
'tw
|
|
4768
|
-
'tw
|
|
4769
|
-
'dark:
|
|
4782
|
+
'tw:border-solid',
|
|
4783
|
+
'tw:border',
|
|
4784
|
+
'tw:rounded-md',
|
|
4785
|
+
'tw:border-sq-disabled-gray',
|
|
4786
|
+
'tw:dark:border-gray-500',
|
|
4770
4787
|
].join(' ');
|
|
4771
4788
|
const triggerBackgroundStyles = [
|
|
4772
|
-
'tw
|
|
4773
|
-
'hover:
|
|
4774
|
-
'active:
|
|
4775
|
-
'dark:
|
|
4776
|
-
'dark:hover:
|
|
4777
|
-
'dark:active:
|
|
4789
|
+
'tw:bg-transparent',
|
|
4790
|
+
'tw:hover:bg-sq-worksheetspanel-gray',
|
|
4791
|
+
'tw:active:bg-sq-worksheetspanel-gray',
|
|
4792
|
+
'tw:dark:bg-transparent',
|
|
4793
|
+
'tw:dark:hover:bg-sq-field-disabled-gray/30',
|
|
4794
|
+
'tw:dark:active:bg-sq-field-disabled-gray/30',
|
|
4778
4795
|
].join(' ');
|
|
4779
4796
|
const activeBackgroundStyles = [
|
|
4780
4797
|
'active',
|
|
4781
|
-
'tw
|
|
4782
|
-
'
|
|
4783
|
-
'
|
|
4784
|
-
'dark:
|
|
4785
|
-
'dark:
|
|
4786
|
-
'dark:active:tw-bg-sq-dark-disabled-gray',
|
|
4798
|
+
'tw:bg-sq-overlay',
|
|
4799
|
+
'tw:active:bg-sq-overlay',
|
|
4800
|
+
'tw:dark:bg-sq-dark-disabled-gray',
|
|
4801
|
+
'tw:dark:hover:border-sq-dark-disabled-gray/30',
|
|
4802
|
+
'tw:dark:active:bg-sq-dark-disabled-gray/30',
|
|
4787
4803
|
].join(' ');
|
|
4788
|
-
const bgStyles$3 = ['tw
|
|
4789
|
-
const disabledClasses$4 = ['tw
|
|
4804
|
+
const bgStyles$3 = ['tw:bg-sq-white', 'tw:dark:bg-sq-dark-background'].join(' ');
|
|
4805
|
+
const disabledClasses$4 = ['tw:opacity-50', 'tw:cursor-not-allowed'].join(' ');
|
|
4790
4806
|
const PopoverContent = React__namespace.forwardRef(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (jsxRuntime.jsx(Content2$3, { ref: ref, align: align, sideOffset: sideOffset, ...props, asChild: true })));
|
|
4791
4807
|
const ToolbarButton = ({ isSmall = false, label, icon, secondIcon, forceSmallIcon = false, tooltipText, id, popoverContent, extraClassNames, testId, tooltipTestId, tooltipOptions, isActive = false, isHtmlTooltip = false, hasArrow = false, disabled = false, isPrimaryAnSvg = false, primaryIconExtraClassNames = false, iconHeight = 24, iconWidth = 24, primaryIconViewbox = '0 0 24 24', onClick, onHide, }) => {
|
|
4792
4808
|
let tooltipData = undefined;
|
|
@@ -4804,12 +4820,12 @@ const ToolbarButton = ({ isSmall = false, label, icon, secondIcon, forceSmallIco
|
|
|
4804
4820
|
onHide && onHide();
|
|
4805
4821
|
}
|
|
4806
4822
|
};
|
|
4807
|
-
return (jsxRuntime.jsxs(Root2$3, { defaultOpen: false, onOpenChange: onOpenChange, children: [jsxRuntime.jsx(Trigger$3, { id: id, className: `tw-border-none tw
|
|
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-[1.5px] tw:first:ml-0 tw:last:mr-0 ${isActive ? 'active' : ''}`, disabled: disabled, "data-testid": testId, onClick: (e) => {
|
|
4808
4824
|
onClick && onClick(e);
|
|
4809
|
-
}, children: jsxRuntime.jsxs("div", { ...tooltipData, className: `tw
|
|
4810
|
-
' tw
|
|
4811
|
-
' data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2' +
|
|
4812
|
-
popoverBorderStyles, children: [hasArrow && (jsxRuntime.jsx(Arrow2$2, { asChild: true, children: jsxRuntime.jsx("div", { className: " tw
|
|
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-[5px]'} ${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-[3px] tw:text-[0.5rem]", type: "text", size: "sm" })) : undefined] }), !isSmall && (jsxRuntime.jsx("small", { className: "tw:text-sq-text-color tw:dark:text-sq-dark-text tw:text-[0.625rem]", 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-[0.5rem] tw:focus-visible:outline-none tw:outline-none tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out' +
|
|
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-[15px] tw:h-[15px] tw:mt-[-7px] 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] }));
|
|
4813
4829
|
};
|
|
4814
4830
|
|
|
4815
4831
|
const setValidInputDimension = (width, height) => {
|
|
@@ -4826,24 +4842,24 @@ const setValidInputDimension = (width, height) => {
|
|
|
4826
4842
|
return inputStyle;
|
|
4827
4843
|
};
|
|
4828
4844
|
|
|
4829
|
-
const errorClasses$4 = 'tw
|
|
4845
|
+
const errorClasses$4 = 'tw:border-sq-danger';
|
|
4830
4846
|
const borderColorClasses$4 = [
|
|
4831
|
-
'tw
|
|
4832
|
-
'dark:
|
|
4833
|
-
'dark:focus:
|
|
4834
|
-
'dark:active:
|
|
4835
|
-
'focus:
|
|
4836
|
-
'active:
|
|
4847
|
+
'tw:border-sq-disabled-gray',
|
|
4848
|
+
'tw:dark:border-sq-dark-disabled-gray',
|
|
4849
|
+
'tw:dark:focus:border-sq-theme-dark-dark',
|
|
4850
|
+
'tw:dark:active:border-sq-theme-darker',
|
|
4851
|
+
'tw:focus:border-sq-theme-dark',
|
|
4852
|
+
'tw:active:border-sq-theme-dark',
|
|
4837
4853
|
].join(' ');
|
|
4838
|
-
const baseClasses$6 = 'tw
|
|
4839
|
-
' disabled:
|
|
4840
|
-
' disabled:
|
|
4841
|
-
' dark:
|
|
4842
|
-
const darkTheme$3 = 'dark:
|
|
4843
|
-
const lightTheme$3 = 'tw
|
|
4854
|
+
const baseClasses$6 = 'tw:h-[2.125rem] tw:leading-normal tw:outline-none tw:py-1 tw:px-3' +
|
|
4855
|
+
' tw:disabled:pointer-events-none tw:disabled:bg-sq-light-gray tw:disabled:dark:bg-sq-dark-disabled-gray' +
|
|
4856
|
+
' tw:disabled:cursor-not-allowed tw:p-1 tw:border-solid tw:border tw:placeholder-gray-400' +
|
|
4857
|
+
' tw:dark:placeholder-sq-dark-text/30 specTextField';
|
|
4858
|
+
const darkTheme$3 = 'tw:dark:bg-sq-dark-background tw:dark:text-sq-dark-text tw:disabled:dark:text-sq-dark-text/30';
|
|
4859
|
+
const lightTheme$3 = 'tw:text-sq-text-color tw:disabled:text-sq-darkish-gray';
|
|
4844
4860
|
const sizeClasses = {
|
|
4845
|
-
sm: 'tw
|
|
4846
|
-
lg: 'tw
|
|
4861
|
+
sm: 'tw:text-sm',
|
|
4862
|
+
lg: 'tw:text-xl',
|
|
4847
4863
|
};
|
|
4848
4864
|
/**
|
|
4849
4865
|
* Textfield.
|
|
@@ -4885,12 +4901,12 @@ const TextField = React.forwardRef((props, ref) => {
|
|
|
4885
4901
|
internalRef.current.value = `${value}`;
|
|
4886
4902
|
}
|
|
4887
4903
|
}, [value]);
|
|
4888
|
-
let borderRadius = 'tw
|
|
4904
|
+
let borderRadius = 'tw:rounded-md';
|
|
4889
4905
|
if (inputGroup === 'left') {
|
|
4890
|
-
borderRadius = 'tw
|
|
4906
|
+
borderRadius = 'tw:rounded-l-md tw:border-r-0 tw:focus:border-r' + ' tw:active:border-r';
|
|
4891
4907
|
}
|
|
4892
4908
|
else if (inputGroup === 'right') {
|
|
4893
|
-
borderRadius = 'tw
|
|
4909
|
+
borderRadius = 'tw:rounded-r-md tw:border-l-0 tw:focus:border-l tw:active:border-l';
|
|
4894
4910
|
}
|
|
4895
4911
|
const appliedClasses = `${baseClasses$6} ${sizeClasses[size]} ${extraClassNames} ${lightTheme$3} ${darkTheme$3} ${borderRadius} ${showError ? errorClasses$4 : borderColorClasses$4} `;
|
|
4896
4912
|
const inputProp = setValidInputDimension(inputWidth, inputHeight)
|
|
@@ -4903,18 +4919,18 @@ const TextField = React.forwardRef((props, ref) => {
|
|
|
4903
4919
|
inputLenghtProp.maxLength = maxLength;
|
|
4904
4920
|
if (minLength)
|
|
4905
4921
|
inputLenghtProp.minLength = minLength;
|
|
4906
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("input", { ref: setAllRefs, "data-testid": testId, name: name, id: id, type: type, value: value, className: appliedClasses, placeholder: placeholder, disabled: disabled, readOnly: readonly, autoComplete: autoComplete, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, onKeyUp: onKeyUp, step: step, required: required, min: min, max: max, ...inputLenghtProp, ...inputProp, ...tooltipData }), errorText && showError && jsxRuntime.jsx("div", { className: "tw
|
|
4922
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("input", { ref: setAllRefs, "data-testid": testId, name: name, id: id, type: type, value: value, className: appliedClasses, placeholder: placeholder, disabled: disabled, readOnly: readonly, autoComplete: autoComplete, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, onKeyUp: onKeyUp, step: step, required: required, min: min, max: max, ...inputLenghtProp, ...inputProp, ...tooltipData }), errorText && showError && jsxRuntime.jsx("div", { className: "tw:text-sq-danger tw:text-xs tw:mt-1", children: errorText })] }));
|
|
4907
4923
|
});
|
|
4908
4924
|
|
|
4909
|
-
const alignment = 'tw
|
|
4910
|
-
const labelClasses = 'tw
|
|
4911
|
-
const baseClasses$5 = 'tw-border
|
|
4912
|
-
' dark:
|
|
4913
|
-
' checked:
|
|
4914
|
-
' checked:active:
|
|
4915
|
-
' dark:disabled:
|
|
4916
|
-
const checkboxClasses = `tw
|
|
4917
|
-
const radioClasses = `tw
|
|
4925
|
+
const alignment = 'tw:flex';
|
|
4926
|
+
const labelClasses = 'tw:ml-1.5 tw:text-sm tw:-mt-0.5';
|
|
4927
|
+
const baseClasses$5 = 'tw:appearance-none tw:border tw:h-3.5 tw:w-3.5 tw:focus:ring-0 tw:focus:ring-offset-0 tw:outline-none tw:focus:outline-none' +
|
|
4928
|
+
' tw:dark:bg-sq-dark-background tw:dark:border-sq-dark-text tw:dark:hover:bg-sq-dark-background' +
|
|
4929
|
+
' tw:checked:text-white tw:checked:border-sq-text-color tw:checked:hover:border-sq-theme-dark' +
|
|
4930
|
+
' tw:checked:active:border-sq-theme-darker tw:checked:focus:border-sq-theme-dark tw:disabled:border-sq-disabled-gray' +
|
|
4931
|
+
' tw:dark:disabled:border-sq-fairly-dark-gray tw:dark:checked:focus:bg-sq-dark-background';
|
|
4932
|
+
const checkboxClasses = `tw:form-checkbox tw:rounded ${baseClasses$5}`;
|
|
4933
|
+
const radioClasses = `tw:form-radio tw:rounded-full ${baseClasses$5}`;
|
|
4918
4934
|
/**
|
|
4919
4935
|
* Checkbox and Radio Box Component.
|
|
4920
4936
|
*/
|
|
@@ -4922,26 +4938,25 @@ const Checkbox = (props) => {
|
|
|
4922
4938
|
const { type = 'checkbox', value, disabled = false, label, onChange, onClick, onKeyDown, checked, defaultChecked, id, name, extraClassNames, extraLabelClassNames, testId, ...tooltipProps } = props;
|
|
4923
4939
|
const assignedId = id ?? 'checkbox_' + Math.random();
|
|
4924
4940
|
const tooltipData = getQTipData(tooltipProps);
|
|
4925
|
-
return (jsxRuntime.jsxs("span", { className: `${alignment} ${extraClassNames}`, children: [jsxRuntime.jsx("input", { value: value, type: type, "data-testid": testId, name: name, id: assignedId, readOnly: !onChange, checked: checked, defaultChecked: defaultChecked, className: `${type === 'checkbox' ? checkboxClasses : radioClasses} ${disabled ? 'tw
|
|
4926
|
-
|
|
4927
|
-
|
|
4928
|
-
|
|
4929
|
-
|
|
4930
|
-
|
|
4931
|
-
|
|
4932
|
-
' disabled:
|
|
4933
|
-
|
|
4934
|
-
|
|
4935
|
-
|
|
4936
|
-
const
|
|
4937
|
-
const errorClasses$3 = 'tw-border-sq-danger-color';
|
|
4941
|
+
return (jsxRuntime.jsxs("span", { className: `${alignment} ${extraClassNames}`, children: [jsxRuntime.jsx("input", { value: value, type: type, "data-testid": testId, name: name, id: assignedId, readOnly: !onChange, checked: checked, defaultChecked: defaultChecked, className: `${type === 'checkbox' ? checkboxClasses : radioClasses} ${disabled ? 'tw:cursor-not-allowed' : 'tw:cursor-pointer'}`, disabled: disabled, onClick: onClick, onChange: onChange, onKeyDown: onKeyDown, ...tooltipData }), label && (jsxRuntime.jsx("label", { htmlFor: assignedId, className: `${labelClasses} ${extraLabelClassNames} ${disabled
|
|
4942
|
+
? 'tw:cursor-not-allowed tw:dark:text-sq-fairly-dark-gray tw:text-sq-fairly-dark-gray'
|
|
4943
|
+
: 'tw:cursor-pointer tw:text-sq-text-color tw:dark:text-sq-dark-text'}`, children: label }))] }));
|
|
4944
|
+
};
|
|
4945
|
+
|
|
4946
|
+
const baseClasses$4 = 'tw:leading-normal tw:outline-none tw:py-1 tw:px-3 tw:rounded-md tw:w-full' +
|
|
4947
|
+
' tw:disabled:pointer-events-none tw:disabled:bg-sq-light-gray tw:disabled:dark:bg-sq-dark-disabled-gray' +
|
|
4948
|
+
' tw:disabled:cursor-not-allowed tw:p-1 tw:border-solid tw:border tw:text-sm';
|
|
4949
|
+
const darkTheme$2 = 'tw:dark:bg-sq-dark-background tw:dark:text-sq-dark-text ' +
|
|
4950
|
+
'tw:dark:placeholder-sq-dark-text/30 tw:disabled:dark:text-sq-dark-text/30';
|
|
4951
|
+
const lightTheme$2 = 'tw:text-sq-text-color tw:placeholder-gray-400 tw:disabled:text-sq-darkish-gray';
|
|
4952
|
+
const errorClasses$3 = 'tw:border-sq-danger';
|
|
4938
4953
|
const borderColorClasses$3 = [
|
|
4939
|
-
'tw
|
|
4940
|
-
'dark:
|
|
4941
|
-
'dark:focus:
|
|
4942
|
-
'dark:active:
|
|
4943
|
-
'focus:
|
|
4944
|
-
'active:
|
|
4954
|
+
'tw:border-sq-disabled-gray',
|
|
4955
|
+
'tw:dark:border-sq-dark-disabled-gray',
|
|
4956
|
+
'tw:dark:focus:border-sq-theme-darker',
|
|
4957
|
+
'tw:dark:active:border-sq-theme-darker',
|
|
4958
|
+
'tw:focus:border-sq-theme-dark',
|
|
4959
|
+
'tw:active:border-sq-theme-dark',
|
|
4945
4960
|
].join(' ');
|
|
4946
4961
|
/**
|
|
4947
4962
|
* TextArea.
|
|
@@ -4990,25 +5005,25 @@ const TextArea = React.forwardRef(({ readonly = false, disabled = false, onChang
|
|
|
4990
5005
|
* display correctly.
|
|
4991
5006
|
*/
|
|
4992
5007
|
const Tooltip = ({ position = 'bottom', children, text, delay = DEFAULT_TOOL_TIP_DELAY, }) => {
|
|
4993
|
-
const arrowBaseClasses =
|
|
4994
|
-
const centerArrowVertically = 'before:
|
|
4995
|
-
const centerArrowHorizontally = 'before:
|
|
4996
|
-
const arrowRight = `${arrowBaseClasses} ${centerArrowVertically} before:
|
|
4997
|
-
before:
|
|
4998
|
-
const arrowLeft = `${arrowBaseClasses} ${centerArrowVertically} before:
|
|
4999
|
-
before:
|
|
5000
|
-
const arrowBottom = `${arrowBaseClasses} ${centerArrowHorizontally} before:-
|
|
5001
|
-
before:
|
|
5002
|
-
const arrowTop = `${arrowBaseClasses} ${centerArrowHorizontally} before:-
|
|
5003
|
-
before:
|
|
5008
|
+
const arrowBaseClasses = "tw:before:content-[''] tw:before:absolute tw:before:border-8";
|
|
5009
|
+
const centerArrowVertically = 'tw:before:top-1/2 tw:before:-translate-y-1/2';
|
|
5010
|
+
const centerArrowHorizontally = 'tw:before:left-1/2 tw:before:-translate-x-1/2';
|
|
5011
|
+
const arrowRight = `${arrowBaseClasses} ${centerArrowVertically} tw:before:right-[100%] tw:before:border-y-transparent
|
|
5012
|
+
tw:before:border-l-transparent tw:before:border-r-sq-black`;
|
|
5013
|
+
const arrowLeft = `${arrowBaseClasses} ${centerArrowVertically} tw:before:left-[100%] tw:before:border-y-transparent
|
|
5014
|
+
tw:before:border-l-sq-black tw:before:border-r-transparent`;
|
|
5015
|
+
const arrowBottom = `${arrowBaseClasses} ${centerArrowHorizontally} tw:before:-top-4 tw:before:border-b-sq-black
|
|
5016
|
+
tw:before:border-r-transparent tw:before:border-l-transparent tw:before:border-t-transparent`;
|
|
5017
|
+
const arrowTop = `${arrowBaseClasses} ${centerArrowHorizontally} tw:before:-bottom-4 tw:before:border-b-transparent
|
|
5018
|
+
tw:before:border-t-sq-black tw:before:border-l-transparent tw:before:border-r-transparent`;
|
|
5004
5019
|
const placements = {
|
|
5005
|
-
top:
|
|
5006
|
-
left:
|
|
5007
|
-
right: `tw
|
|
5008
|
-
bottom:
|
|
5020
|
+
top: `tw:-top-2 tw:-translate-y-full tw:left-1/2 tw:-translate-x-1/2 ${arrowTop}`,
|
|
5021
|
+
left: `tw:-translate-x-full tw:-left-3 tw:-translate-y-1/2 tw:top-1/2 ${arrowLeft}`,
|
|
5022
|
+
right: `tw:translate-x-full tw:-right-3 tw:-translate-y-1/2 tw:top-1/2 ${arrowRight}`,
|
|
5023
|
+
bottom: `tw:-bottom-2 tw:translate-y-full tw:left-1/2 tw:-translate-x-1/2 ${arrowBottom}`,
|
|
5009
5024
|
};
|
|
5010
|
-
return (jsxRuntime.jsxs("div", { className: "tw
|
|
5011
|
-
tw
|
|
5025
|
+
return (jsxRuntime.jsxs("div", { className: "tw:group tw:relative tw:inline-block", children: [children, jsxRuntime.jsx("div", { className: `tw:z-50 tw:whitespace-nowrap tw:hidden tw:group-hover:inline-block tw:group-hover:delay-[${delay}ms]
|
|
5026
|
+
tw:absolute tw:opacity-0 tw:group-hover:opacity-100 tw:rounded tw:bg-sq-black tw:p-2 tw:text-xs tw:text-sq-white ${placements[position]}`, children: text })] }));
|
|
5012
5027
|
};
|
|
5013
5028
|
|
|
5014
5029
|
/*! @license DOMPurify 3.2.3 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.2.3/LICENSE */
|
|
@@ -7494,8 +7509,8 @@ const QTip = () => {
|
|
|
7494
7509
|
: positionTooltip();
|
|
7495
7510
|
}
|
|
7496
7511
|
};
|
|
7497
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { onMouseEnter: () => setOverTooltip(true), onMouseLeave: () => setOverTooltip(false), "data-testid": tooltipTestId, ref: tooltipRef, className: 'tw
|
|
7498
|
-
(show ? 'tw
|
|
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-[10px] tw:h-[10px] tw:rotate-45 tw:bg-sq-black", ref: tooltipArrowRef })] }) }));
|
|
7499
7514
|
};
|
|
7500
7515
|
|
|
7501
7516
|
function _typeof$1(o) {
|
|
@@ -13910,75 +13925,75 @@ var CreatableSelect = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
13910
13925
|
});
|
|
13911
13926
|
var CreatableSelect$1 = CreatableSelect;
|
|
13912
13927
|
|
|
13913
|
-
const baseClasses$3 = ['focus:tw
|
|
13914
|
-
const containerStyles = ['tw
|
|
13915
|
-
const errorClasses$2 = 'tw
|
|
13916
|
-
const borderColorClasses$2 = ['tw
|
|
13928
|
+
const baseClasses$3 = ['focus:tw:ring-0', 'tw:disabled:cursor-not-allowed'].join(' ');
|
|
13929
|
+
const containerStyles = ['tw:bg-sq-white', 'tw:dark:bg-sq-dark-background'].join(' ');
|
|
13930
|
+
const errorClasses$2 = 'tw:border-sq-danger-color';
|
|
13931
|
+
const borderColorClasses$2 = ['tw:border-sq-disabled-gray', 'tw:dark:border-sq-dark-disabled-gray'].join(' ');
|
|
13917
13932
|
const borderStyles$3 = [
|
|
13918
|
-
'tw
|
|
13919
|
-
'tw
|
|
13920
|
-
'hover:
|
|
13921
|
-
'focus:tw
|
|
13922
|
-
'active:tw
|
|
13923
|
-
'dark:hover:
|
|
13924
|
-
'dark:focus:tw
|
|
13925
|
-
'dark:active:tw
|
|
13933
|
+
'tw:border-solid',
|
|
13934
|
+
'tw:border',
|
|
13935
|
+
'tw:hover:border-sq-theme-dark',
|
|
13936
|
+
'focus:tw:border-sq-theme-dark',
|
|
13937
|
+
'active:tw:border-sq-theme-dark',
|
|
13938
|
+
'tw:dark:hover:border-sq-theme-dark-dark',
|
|
13939
|
+
'dark:focus:tw:border-sq-theme-dark-dark',
|
|
13940
|
+
'dark:active:tw:border-sq-theme-dark-dark',
|
|
13926
13941
|
].join(' ');
|
|
13927
|
-
const textStyles = ['tw
|
|
13942
|
+
const textStyles = ['tw:text-sq-text-color', 'tw:dark:text-sq-dark-text', 'tw:text-sm'].join(' ');
|
|
13928
13943
|
const textActiveStyles = [
|
|
13929
|
-
'hover:
|
|
13930
|
-
'focus:tw
|
|
13931
|
-
'active:tw
|
|
13932
|
-
'dark:
|
|
13933
|
-
'dark:hover:
|
|
13934
|
-
'dark:focus:tw
|
|
13935
|
-
'dark:active:tw
|
|
13944
|
+
'tw:hover:text-sq-theme-dark',
|
|
13945
|
+
'focus:tw:text-sq-theme-dark',
|
|
13946
|
+
'active:tw:text-sq-theme-dark',
|
|
13947
|
+
'tw:dark:text-sq-dark-disabled-gray',
|
|
13948
|
+
'tw:dark:hover:text-sq-theme-dark-dark',
|
|
13949
|
+
'dark:focus:tw:text-sq-theme-dark-dark',
|
|
13950
|
+
'dark:active:tw:text-sq-theme-dark-dark',
|
|
13936
13951
|
].join(' ');
|
|
13937
13952
|
const menuStyles = [
|
|
13938
|
-
'tw
|
|
13939
|
-
'tw
|
|
13940
|
-
'tw
|
|
13941
|
-
'tw
|
|
13942
|
-
'dark:
|
|
13943
|
-
'tw
|
|
13944
|
-
'tw
|
|
13945
|
-
'!tw
|
|
13953
|
+
'tw:border-solid',
|
|
13954
|
+
'tw:border',
|
|
13955
|
+
'tw:rounded-b',
|
|
13956
|
+
'tw:border-sq-disabled-gray',
|
|
13957
|
+
'tw:dark:border-sq-dark-disabled-gray',
|
|
13958
|
+
'tw:whitespace-nowrap',
|
|
13959
|
+
'tw:min-w-fit',
|
|
13960
|
+
'!tw:z-[9999]',
|
|
13946
13961
|
].join(' ');
|
|
13947
13962
|
const menuListStyles = [
|
|
13948
|
-
'tw
|
|
13949
|
-
'tw
|
|
13950
|
-
'dark:
|
|
13951
|
-
'tw
|
|
13952
|
-
'!tw
|
|
13963
|
+
'tw:rounded-b',
|
|
13964
|
+
'tw:bg-sq-white',
|
|
13965
|
+
'tw:dark:bg-sq-dark-background',
|
|
13966
|
+
'tw:min-w-fit',
|
|
13967
|
+
'!tw:z-[9999]',
|
|
13953
13968
|
'specSelectMenu',
|
|
13954
13969
|
].join(' ');
|
|
13955
13970
|
const groupHeadingStyles = [
|
|
13956
|
-
'tw
|
|
13957
|
-
'dark:
|
|
13958
|
-
'tw
|
|
13959
|
-
'tw
|
|
13960
|
-
'tw
|
|
13971
|
+
'tw:bg-sq-light-gray',
|
|
13972
|
+
'tw:dark:bg-sq-dark-disabled-gray',
|
|
13973
|
+
'tw:text-sq-darkish-gray',
|
|
13974
|
+
'tw:py-1',
|
|
13975
|
+
'tw:px-2.5',
|
|
13961
13976
|
'specSelectGroupHeading',
|
|
13962
13977
|
].join(' ');
|
|
13963
13978
|
const optionStyles = [
|
|
13964
|
-
'hover:
|
|
13965
|
-
'hover:
|
|
13966
|
-
'dark:hover:
|
|
13967
|
-
'tw
|
|
13968
|
-
'tw
|
|
13979
|
+
'tw:hover:bg-sq-gray-highlight',
|
|
13980
|
+
'tw:hover:cursor-pointer',
|
|
13981
|
+
'tw:dark:hover:bg-sq-gray-highlight-dark',
|
|
13982
|
+
'tw:py-1',
|
|
13983
|
+
'tw:px-2.5',
|
|
13969
13984
|
'specSelectOption',
|
|
13970
13985
|
].join(' ');
|
|
13971
|
-
const disabledClasses$3 = ['tw
|
|
13972
|
-
const dropDownIndicatorStyles = `tw
|
|
13973
|
-
const placeholderStyles = ['tw
|
|
13986
|
+
const disabledClasses$3 = ['tw:bg-sq-field-disabled-gray', 'tw:cursor-not-allowed'].join(' ');
|
|
13987
|
+
const dropDownIndicatorStyles = `tw:text-sq-disabled-gray ${textActiveStyles} specOpenIt`;
|
|
13988
|
+
const placeholderStyles = ['tw:text-gray-400', 'tw:dark:text-sq-dark-text-lighter', 'specOpenSelect'].join(' ');
|
|
13974
13989
|
const multiValueStyles = [
|
|
13975
|
-
'tw
|
|
13976
|
-
'dark:
|
|
13977
|
-
'tw
|
|
13978
|
-
'tw
|
|
13979
|
-
'tw
|
|
13980
|
-
'tw
|
|
13981
|
-
'tw
|
|
13990
|
+
'tw:bg-sq-disabled-gray',
|
|
13991
|
+
'tw:dark:bg-sq-multi-gray-dark',
|
|
13992
|
+
'tw:text-sm',
|
|
13993
|
+
'tw:py-0.5',
|
|
13994
|
+
'tw:px-1',
|
|
13995
|
+
'tw:m-0.5',
|
|
13996
|
+
'tw:rounded-sm',
|
|
13982
13997
|
'specOpenSelect',
|
|
13983
13998
|
].join(' ');
|
|
13984
13999
|
/**
|
|
@@ -14043,38 +14058,38 @@ const Select = ({ options, value, placeholder = 'select', noOptionsMessage = 'no
|
|
|
14043
14058
|
filterOption: filterOption ? filterOption : filterConfig ? createFilter(filterConfig) : undefined,
|
|
14044
14059
|
classNames: {
|
|
14045
14060
|
control: ({ menuIsOpen }) => {
|
|
14046
|
-
let border = menuIsOpen ? 'tw
|
|
14061
|
+
let border = menuIsOpen ? 'tw:rounded-t-md' : 'tw:rounded-md';
|
|
14047
14062
|
// if it's on the left side of the input group make sure the right side is straight and not curved
|
|
14048
14063
|
if (inputGroup === 'left') {
|
|
14049
|
-
border = menuIsOpen ? 'tw
|
|
14064
|
+
border = menuIsOpen ? 'tw:rounded-tl-md' : 'tw:rounded-l-md';
|
|
14050
14065
|
}
|
|
14051
14066
|
else if (inputGroup === 'right') {
|
|
14052
|
-
border = menuIsOpen ? 'tw
|
|
14067
|
+
border = menuIsOpen ? 'tw:rounded-tr-md' : 'tw:rounded-r-md';
|
|
14053
14068
|
}
|
|
14054
14069
|
const appliedClasses = `${borderStyles$3} ${border} ${showError ? errorClasses$2 : borderColorClasses$2} ${small ? 'reactSelectMinHeightSmall' : 'reactSelectMinHeight'} ${controlClassNames}`;
|
|
14055
|
-
return `${appliedClasses} ${baseClasses$3} ${containerStyles} specSelectControl ${isDisabled ? disabledClasses$3 : ''} ${small ? 'tw
|
|
14070
|
+
return `${appliedClasses} ${baseClasses$3} ${containerStyles} specSelectControl ${isDisabled ? disabledClasses$3 : ''} ${small ? 'tw:pl-2 tw:pr-1' : 'tw:pl-2.5 tw:pr-1.5'}`;
|
|
14056
14071
|
},
|
|
14057
14072
|
placeholder: () => placeholderStyles,
|
|
14058
14073
|
container: ({ selectProps }) => {
|
|
14059
|
-
const containerBorderStyles = selectProps?.menuIsOpen ? 'tw
|
|
14074
|
+
const containerBorderStyles = selectProps?.menuIsOpen ? 'tw:rounded-t-md' : 'tw:rounded-md';
|
|
14060
14075
|
return `${textStyles} ${extraClassNames} ${containerBorderStyles}`;
|
|
14061
14076
|
},
|
|
14062
14077
|
input: () => textStyles + ' specSelectInput',
|
|
14063
14078
|
menuList: () => menuListStyles,
|
|
14064
14079
|
menu: () => menuStyles,
|
|
14065
|
-
menuPortal: () => '!tw
|
|
14080
|
+
menuPortal: () => '!tw:z-[9000]',
|
|
14066
14081
|
dropdownIndicator: () => dropDownIndicatorStyles,
|
|
14067
14082
|
option: ({ isSelected, isDisabled }) => {
|
|
14068
14083
|
let classes = optionStyles;
|
|
14069
14084
|
if (isDisabled) {
|
|
14070
14085
|
classes += ' specDisabledOption ';
|
|
14071
14086
|
}
|
|
14072
|
-
return isSelected ? classes + ' tw
|
|
14087
|
+
return isSelected ? classes + ' tw:bg-sq-colored-hover tw:dark:bg-sq-colored-hover-dark' : classes;
|
|
14073
14088
|
},
|
|
14074
14089
|
singleValue: () => 'specOpenSelect',
|
|
14075
14090
|
multiValue: () => multiValueStyles,
|
|
14076
|
-
multiValueRemove: () => 'hover:
|
|
14077
|
-
clearIndicator: () => 'tw
|
|
14091
|
+
multiValueRemove: () => 'tw:hover:text-sq-danger-color specSelectMultiValueRemove',
|
|
14092
|
+
clearIndicator: () => 'tw:text-sq-disabled-gray tw:hover:text-sq-danger-color specClearSelect',
|
|
14078
14093
|
group: () => 'specSelectGroup',
|
|
14079
14094
|
groupHeading: () => groupHeadingStyles,
|
|
14080
14095
|
},
|
|
@@ -14464,11 +14479,11 @@ var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
|
|
|
14464
14479
|
const Dialog = Root$4;
|
|
14465
14480
|
const DialogPortal = Portal$1;
|
|
14466
14481
|
const DialogClose = Close;
|
|
14467
|
-
const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => (jsxRuntime.jsxs(DialogPortal, { children: [jsxRuntime.jsx("div", { className: "tw
|
|
14468
|
-
tw
|
|
14469
|
-
tw
|
|
14482
|
+
const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => (jsxRuntime.jsxs(DialogPortal, { children: [jsxRuntime.jsx("div", { className: "tw:select-none tw:fixed tw:w-full tw:h-full tw:opacity-50 tw:inset-0 tw:z-[1009] tw:bg-sq-dark-background\n tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out tw:data-[state=closed]:fade-out-0\n tw:data-[state=open]:fade-in-0 " }), jsxRuntime.jsxs(Content$2, { ref: ref, className: `tw:fixed tw:left-[50%] tw:top-0 tw:my-6 tw:translate-x-[-50%] tw:z-[1010] tw:grid
|
|
14483
|
+
tw:gap-4 tw:border tw:bg-sq-white tw:dark:bg-sq-dark-background tw:p-6 tw:shadow-lg tw:duration-200
|
|
14484
|
+
tw:rounded-lg ${className}`, ...props, children: [jsxRuntime.jsx(DialogTitle$1, { className: "tw:hidden" }), children] })] })));
|
|
14470
14485
|
DialogContent.displayName = Content$2.displayName;
|
|
14471
|
-
const DialogHeader = (props) => (jsxRuntime.jsx("div", { className: "tw
|
|
14486
|
+
const DialogHeader = (props) => (jsxRuntime.jsx("div", { className: "tw:w-full tw:justify-between", children: jsxRuntime.jsx("div", { ...props }) }));
|
|
14472
14487
|
DialogHeader.displayName = 'DialogHeader';
|
|
14473
14488
|
const DialogFooter = (props) => jsxRuntime.jsx("div", { ...props });
|
|
14474
14489
|
DialogFooter.displayName = 'DialogFooter';
|
|
@@ -14506,26 +14521,26 @@ const Modal = ({ titleIcon, title = 'Modal title example', titleSuffixLabel, sub
|
|
|
14506
14521
|
let titleIconElement = jsxRuntime.jsx(jsxRuntime.Fragment, {});
|
|
14507
14522
|
if (titleIcon) {
|
|
14508
14523
|
if (typeof titleIcon === 'string') {
|
|
14509
|
-
titleIconElement = (jsxRuntime.jsx(Icon, { icon: titleIcon, testId: "modalTitleIcon", extraClassNames: "tw
|
|
14524
|
+
titleIconElement = (jsxRuntime.jsx(Icon, { icon: titleIcon, testId: "modalTitleIcon", extraClassNames: "tw:flex tw:text-xl tw:mt-1" }));
|
|
14510
14525
|
}
|
|
14511
14526
|
else {
|
|
14512
|
-
titleIconElement = jsxRuntime.jsx("div", { className: "tw
|
|
14527
|
+
titleIconElement = jsxRuntime.jsx("div", { className: "tw:mt-1.5", children: titleIcon });
|
|
14513
14528
|
}
|
|
14514
14529
|
}
|
|
14515
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [titleIcon && titleIconPosition === 'left' ? jsxRuntime.jsx("div", { className: "tw
|
|
14530
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [titleIcon && titleIconPosition === 'left' ? jsxRuntime.jsx("div", { className: "tw:flex tw:mr-2", children: titleIconElement }) : jsxRuntime.jsx(jsxRuntime.Fragment, {}), jsxRuntime.jsx(DialogTitle, { asChild: true, children: isTitleEditable ? (jsxRuntime.jsxs("div", { className: "tw:flex tw:w-full tw:items-center", children: [jsxRuntime.jsx(TextField, { extraClassNames: inputExtraClassNames, value: title, type: "text", testId: "modalTitle", onChange: onTitleChanged, placeholder: titlePlaceholder, required: titleRequired, showError: !!titleError }), titleError && jsxRuntime.jsx("p", { className: "tw:text-sq-danger tw:min-w-fit tw:pl-2 tw:mb-0", children: titleError })] })) : (customHeader ?? (jsxRuntime.jsxs("div", { "data-testid": "modalTitle", className: "modal-title", children: [jsxRuntime.jsxs("div", { className: "tw:flex tw:items-center", children: [jsxRuntime.jsx("h3", { children: title }), titleSuffixLabel && jsxRuntime.jsx("span", { className: "tw:text-xl tw:pl-0.5", children: titleSuffixLabel })] }), subtitle && (jsxRuntime.jsx("div", { className: "tw:italic tw:text-sm tw:text-left tw:mt-1", "data-testid": "modal-subtitle", children: subtitle }))] }))) }), titleIcon && titleIconPosition === 'right' ? jsxRuntime.jsx("div", { className: "tw:flex tw:ml-4", children: titleIconElement }) : jsxRuntime.jsx(jsxRuntime.Fragment, {})] }));
|
|
14516
14531
|
};
|
|
14517
|
-
return open ? (jsxRuntime.jsx(Dialog, { open: true, onOpenChange: onClose, modal: keepFocusInsideModal, children: jsxRuntime.jsxs(DialogContent, { onPointerDownOutside: (e) => (onPointerDownOutside ? onPointerDownOutside(e) : e.preventDefault()), onInteractOutside: (e) => (onInteractOutside ? onInteractOutside(e) : e.preventDefault()), "data-testid": testId, className: classNames(`modalContent tw
|
|
14518
|
-
'tw
|
|
14519
|
-
'tw
|
|
14520
|
-
'tw
|
|
14521
|
-
'tw
|
|
14522
|
-
'tw
|
|
14523
|
-
'tw
|
|
14524
|
-
'tw
|
|
14525
|
-
'tw
|
|
14526
|
-
'tw
|
|
14527
|
-
'tw
|
|
14528
|
-
}, dialogClassName), children: [jsxRuntime.jsxs(DialogHeader, { className: "modal-header tw
|
|
14532
|
+
return open ? (jsxRuntime.jsx(Dialog, { open: true, onOpenChange: onClose, modal: keepFocusInsideModal, children: jsxRuntime.jsxs(DialogContent, { onPointerDownOutside: (e) => (onPointerDownOutside ? onPointerDownOutside(e) : e.preventDefault()), onInteractOutside: (e) => (onInteractOutside ? onInteractOutside(e) : e.preventDefault()), "data-testid": testId, className: classNames(`modalContent tw:w-full !tw:p-0 tw:border-none tw:shadow-none tw:dark:text-sq-dark-text !tw:gap-0`, {
|
|
14533
|
+
'tw:max-w-xs': size === 'xs',
|
|
14534
|
+
'tw:max-w-sm': size === 'sm',
|
|
14535
|
+
'tw:max-w-md': size === 'md',
|
|
14536
|
+
'tw:max-w-lg': size === 'lg',
|
|
14537
|
+
'tw:max-w-xl': size === 'xl',
|
|
14538
|
+
'tw:max-w-2xl': size === '2xl',
|
|
14539
|
+
'tw:max-w-3xl': size === '3xl',
|
|
14540
|
+
'tw:max-w-4xl': size === '4xl',
|
|
14541
|
+
'tw:max-w-5xl': size === '5xl',
|
|
14542
|
+
'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-[100px]", 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-[100px]", 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-[100px]" }))] })] })) }))] }) })) : (jsxRuntime.jsx(jsxRuntime.Fragment, {}));
|
|
14529
14544
|
};
|
|
14530
14545
|
|
|
14531
14546
|
function createCollection(name) {
|
|
@@ -14983,11 +14998,11 @@ const Tabs = ({ tabs, defaultActiveTab, activeTab, onTabSelect, extraClassNames,
|
|
|
14983
14998
|
return;
|
|
14984
14999
|
onTabSelect && onTabSelect(tabId);
|
|
14985
15000
|
};
|
|
14986
|
-
return (jsxRuntime.jsxs(Root2$2, { className: `tw
|
|
14987
|
-
? 'tw
|
|
14988
|
-
: 'hover:
|
|
14989
|
-
? 'dark:
|
|
14990
|
-
: 'dark:
|
|
15001
|
+
return (jsxRuntime.jsxs(Root2$2, { className: `tw:flex tw:flex-col tw:min-w-[300px] 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-[25px] tw:focus-visible:outline-none tw:min-w-[100px] tw:px-4 tw:border-solid tw:flex tw:flex-1 tw:justify-center tw:items-center tw:border-r-[2px] 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
|
|
15002
|
+
? 'tw:border-b-sq-theme-dark tw:dark:border-b-sq-theme-dark tw:border-b-[3px]'
|
|
15003
|
+
: 'tw:hover:bg-sq-light-gray tw:border-b-[1px] 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-[0.9375rem] tw:mr-[7px] tw:flex-shrink-0" })), jsxRuntime.jsx("span", { className: `tw:text-[0.875rem] tw:font-medium tw:whitespace-nowrap tw:overflow-hidden tw:text-ellipsis ${activeTab === id
|
|
15004
|
+
? '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-[1px] tw:border-t-[1px] 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`)))] }));
|
|
14991
15006
|
};
|
|
14992
15007
|
|
|
14993
15008
|
var COLLAPSIBLE_NAME = "Collapsible";
|
|
@@ -15412,18 +15427,18 @@ var Trigger2 = AccordionTrigger;
|
|
|
15412
15427
|
var Content2$2 = AccordionContent;
|
|
15413
15428
|
|
|
15414
15429
|
const Accordion = ({ accordionItems, defaultValue, value, onItemSelect, disabled, extraClassNames, testId, }) => {
|
|
15415
|
-
return (jsxRuntime.jsx(Root2$1, { className: `tw
|
|
15430
|
+
return (jsxRuntime.jsx(Root2$1, { className: `tw:rounded-md tw:w-full tw:focus-visible:outline-none ${extraClassNames || ''}`, type: "single", defaultValue: defaultValue, value: value, collapsible: true, "data-testid": testId, onValueChange: (_value) => onItemSelect(_value), children: accordionItems.map((item) => (jsxRuntime.jsxs(Item, { className: `tw:p-0 tw:flex tw:flex-col tw:w-full`, disabled: disabled, value: item.value, children: [jsxRuntime.jsx(Trigger2, { disabled: disabled, className: `tw:w-full tw:cursor-default tw:focus-visible:outline-none tw:bg-transparent`, children: item.trigger }), jsxRuntime.jsx(Content2$2, { className: `tw:data-[state=open]:animate-slideDown tw:data-[state=closed]:animate-slideUp tw:overflow-hidden tw:focus-visible:outline-none ${item.contentClassNames || ''}`, children: item.content })] }, item.value))) }));
|
|
15416
15431
|
};
|
|
15417
15432
|
|
|
15418
|
-
const bgStyles$2 = ['tw
|
|
15433
|
+
const bgStyles$2 = ['tw:bg-sq-white', 'tw:dark:bg-sq-dark-background'].join(' ');
|
|
15419
15434
|
const borderStyles$2 = [
|
|
15420
|
-
'tw
|
|
15421
|
-
'tw
|
|
15422
|
-
'tw
|
|
15423
|
-
'tw
|
|
15424
|
-
'dark:
|
|
15435
|
+
'tw:border-solid',
|
|
15436
|
+
'tw:border',
|
|
15437
|
+
'tw:rounded-popover',
|
|
15438
|
+
'tw:border-sq-disabled-gray',
|
|
15439
|
+
'tw:dark:border-gray-500',
|
|
15425
15440
|
].join(' ');
|
|
15426
|
-
const disabledClasses$2 = ['tw
|
|
15441
|
+
const disabledClasses$2 = ['tw:opacity-50', 'tw:cursor-not-allowed'].join(' ');
|
|
15427
15442
|
const ButtonWithPopover = ({ children, trigger, id, hasArrow, extraTriggerClassNames, extraPopoverClassNames, containerTestId, onInteractOutside, onPointerDownOutside, isTriggerAsChild = false, shouldTriggerFullWidth = false, disabled = false, align = 'end', alignOffset = -35, placement = 'bottom', placementOffset = 2, isHoverEnabled = false, hoverOpenDelay = 300, onOpenChange, isOpen, isCloseOnContentClick = false, isPortal = false, ...tooltipProps }) => {
|
|
15428
15443
|
const tooltipData = getQTipData(tooltipProps);
|
|
15429
15444
|
const timeout = React.useRef(null);
|
|
@@ -15454,12 +15469,12 @@ const ButtonWithPopover = ({ children, trigger, id, hasArrow, extraTriggerClassN
|
|
|
15454
15469
|
};
|
|
15455
15470
|
React__namespace.useEffect(() => clearHoverTimeout, []);
|
|
15456
15471
|
const renderContent = () => {
|
|
15457
|
-
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
|
|
15458
|
-
data-[side=top]:
|
|
15459
|
-
${extraPopoverClassNames || ''}`, children: [hasArrow && (jsxRuntime.jsx(Arrow2$2, { asChild: true, children: jsxRuntime.jsx("div", { className: "tw
|
|
15472
|
+
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
|
+
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-[15px] tw:h-[15px] tw:mt-[-7px] 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] }) }));
|
|
15460
15475
|
};
|
|
15461
15476
|
const renderPopover = (popoverOpenState) => {
|
|
15462
|
-
return (jsxRuntime.jsxs(Root2$3, { open: popoverOpenState, defaultOpen: false, onOpenChange: onOpenChange, children: [trigger ? (jsxRuntime.jsx(Trigger$3, { id: id, asChild: isTriggerAsChild, className: `focus-visible:
|
|
15477
|
+
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()] }));
|
|
15463
15478
|
};
|
|
15464
15479
|
return isHoverEnabled ? renderPopover(isHoveredOpen) : renderPopover(isOpen);
|
|
15465
15480
|
};
|
|
@@ -16524,63 +16539,65 @@ var SubTrigger2 = DropdownMenuSubTrigger;
|
|
|
16524
16539
|
var SubContent2 = DropdownMenuSubContent;
|
|
16525
16540
|
|
|
16526
16541
|
const borderStyles$1 = [
|
|
16527
|
-
'tw
|
|
16528
|
-
'tw
|
|
16529
|
-
'tw
|
|
16530
|
-
'tw
|
|
16531
|
-
'dark:
|
|
16542
|
+
'tw:border-solid',
|
|
16543
|
+
'tw:border',
|
|
16544
|
+
'tw:rounded-popover',
|
|
16545
|
+
'tw:border-sq-disabled-gray',
|
|
16546
|
+
'tw:dark:border-gray-500',
|
|
16532
16547
|
].join(' ');
|
|
16533
|
-
const bgStyles$1 = ['tw
|
|
16534
|
-
const disabledClasses$1 = ['tw
|
|
16548
|
+
const bgStyles$1 = ['tw:bg-sq-white', 'tw:dark:bg-sq-dark-background'].join(' ');
|
|
16549
|
+
const disabledClasses$1 = ['tw:opacity-50', 'tw:cursor-not-allowed'].join(' ');
|
|
16535
16550
|
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 }) => {
|
|
16536
16551
|
const tooltipData = getQTipData(tooltipProps);
|
|
16537
|
-
return (jsxRuntime.jsxs(Root2, { defaultOpen: false, open: isOpen, onOpenChange: onOpenChange, modal: keepFocusInsideDropdown, children: [jsxRuntime.jsx(Trigger, { id: id, className: `tw-border-none focus-visible:
|
|
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-[15px] tw:h-[15px] 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-[-7px]" }) })), dropdownItems.map((item, index) => {
|
|
16538
16553
|
const tooltipData = getQTipData(item);
|
|
16539
16554
|
if (item.isLabel) {
|
|
16540
|
-
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
|
|
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-[18px]" })), jsxRuntime.jsx("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 tw:dark:text-sq-white'} tw:not-italic tw:font-normal ${item.labelClasses}`, children: item.label })] }, (item.id || '') + index));
|
|
16541
16556
|
}
|
|
16542
16557
|
if (Array.isArray(item.subMenuItems) && item.subMenuItems.length > 0) {
|
|
16543
|
-
return (jsxRuntime.jsxs(Sub2, { children: [jsxRuntime.jsxs(SubTrigger2, { id: id, className: `tw
|
|
16544
|
-
? '!tw
|
|
16545
|
-
: 'tw
|
|
16546
|
-
return (jsxRuntime.jsxs(Item2, { onSelect: subItem.onClick, "data-qtip-text": subItem.tooltip, className: "tw
|
|
16547
|
-
? 'tw
|
|
16548
|
-
: 'tw
|
|
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-[27px] tw:pl-[19px] 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-[18px] ${item.disabled
|
|
16559
|
+
? '!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-[0.8125rem] 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-[18px] tw:ml-4 tw:text-[0.5rem] 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) => {
|
|
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-[27px] tw:px-[19px] 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-[18px] ${item.disabled && '!tw:opacity-30'}` })), jsxRuntime.jsx("div", { className: `tw:text-[0.8125rem] tw:ml-1 ${subItem.disabled
|
|
16562
|
+
? 'tw:text-sq-disabled-gray'
|
|
16563
|
+
: 'tw:text-sq-text-color tw:dark:text-sq-white'} tw:not-italic tw:font-normal ${item.labelClasses}`, children: subItem.label })] }, subItem.label + subIndex));
|
|
16549
16564
|
}) }) }) })] }, (item.id || item.icon || '') + index));
|
|
16550
16565
|
}
|
|
16551
16566
|
return (jsxRuntime.jsxs("div", { ...tooltipData, children: [jsxRuntime.jsxs(Item2, { "data-customid": item.itemCustomId, onSelect: (e) => {
|
|
16552
16567
|
item.onClick(e);
|
|
16553
|
-
}, className: `tw
|
|
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-[27px] tw:px-[19px] 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-[18px] ${item.disabled && '!tw:opacity-30'} ${item.iconExtraClassNames || ''}` })), jsxRuntime.jsx("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 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));
|
|
16554
16569
|
})] }) }) })] }));
|
|
16555
16570
|
};
|
|
16556
16571
|
|
|
16557
|
-
const baseClasses$2 = 'tw
|
|
16558
|
-
' tw
|
|
16559
|
-
const darkTheme$1 = 'dark:
|
|
16560
|
-
const lightTheme$1 = 'tw
|
|
16561
|
-
const errorClasses$1 = 'tw
|
|
16562
|
-
const borderColorClasses$1 = 'tw
|
|
16572
|
+
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
|
+
' tw:border-solid tw:border tw:text-sm tw:flex tw:flex-col tw:justify-center tw:items-center';
|
|
16574
|
+
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';
|
|
16576
|
+
const errorClasses$1 = 'tw:border-sq-danger';
|
|
16577
|
+
const borderColorClasses$1 = 'tw:border-sq-theme-dark';
|
|
16563
16578
|
/**
|
|
16564
16579
|
* Alert.
|
|
16565
16580
|
*/
|
|
16566
16581
|
const Alert = ({ children, dismissible = true, onClose, show = true, variant, testId = 'alert-id', id, extraClassNames, ...tooltipProps }) => {
|
|
16567
16582
|
const appliedTheme = {
|
|
16568
16583
|
theme: `${lightTheme$1} ${darkTheme$1}`,
|
|
16569
|
-
|
|
16570
|
-
|
|
16571
|
-
|
|
16584
|
+
formulaError: 'tw:text-red-800 tw:bg-red-200 !tw:rounded-[4px]',
|
|
16585
|
+
danger: 'tw:text-sq-text-color tw:bg-sq-danger',
|
|
16586
|
+
warning: 'tw:bg-sq-bg-warning tw:text-sq-text-color',
|
|
16587
|
+
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',
|
|
16572
16588
|
};
|
|
16573
16589
|
const appliedBorderTheme = {
|
|
16574
16590
|
theme: borderColorClasses$1,
|
|
16575
16591
|
danger: errorClasses$1,
|
|
16576
|
-
warning: 'tw
|
|
16577
|
-
gray: 'tw
|
|
16592
|
+
warning: 'tw:border-none',
|
|
16593
|
+
gray: 'tw:border-sq-darkish-gray',
|
|
16594
|
+
formulaError: 'tw:border-red-100',
|
|
16578
16595
|
};
|
|
16579
16596
|
const appliedClasses = `${baseClasses$2} ${appliedTheme[variant]} ${extraClassNames} ${appliedBorderTheme[variant]}`;
|
|
16580
16597
|
if (!show) {
|
|
16581
16598
|
return jsxRuntime.jsx("div", {});
|
|
16582
16599
|
}
|
|
16583
|
-
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/) ? 'color' : 'theme', color: variant.match(/danger|warning/) ? 'inherit' : undefined, extraClassNames: `tw
|
|
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-[0.6875rem] tw:cursor-pointer tw:absolute tw:right-[10px] tw:top-[10px] ${variant.match(/danger|warning|gray|formulaError/) ? 'tw:text-sq-text-color tw:dark:text-sq-dark-text' : ''}`, testId: `${testId}-close-btn`, onClick: onClose, ...tooltipProps }))] }));
|
|
16584
16601
|
};
|
|
16585
16602
|
|
|
16586
16603
|
/**
|
|
@@ -16599,47 +16616,40 @@ const Alert = ({ children, dismissible = true, onClose, show = true, variant, te
|
|
|
16599
16616
|
* @param tooltipProps - props to pass to the tooltip
|
|
16600
16617
|
*/
|
|
16601
16618
|
const SvgIcon = ({ onClick, icon, color, type = 'default', extraClassNames, viewBox = '0 0 19 19', id, testId, customId, ...tooltipProps }) => {
|
|
16602
|
-
const appliedClassNames = `${onClick ? 'tw
|
|
16603
|
-
tw
|
|
16619
|
+
const appliedClassNames = `${onClick ? 'tw:cursor-pointer' : ''} ${extraClassNames} focus:tw:outline-none focus-visible:tw:outline-none
|
|
16620
|
+
tw:outline-none`;
|
|
16604
16621
|
const tooltipData = getQTipData(tooltipProps);
|
|
16605
16622
|
const appliedType = type === 'default' ? 'currentColor' : 'rgb(var(--sq-icon))';
|
|
16606
|
-
return (jsxRuntime.jsx("div", { onClick: onClick, ...tooltipData, className: `svgContainer ${appliedClassNames}`, children: jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: `tw
|
|
16623
|
+
return (jsxRuntime.jsx("div", { onClick: onClick, ...tooltipData, className: `svgContainer ${appliedClassNames}`, children: jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: `tw:sq-icon tw:dark:text-sq-white`, viewBox: viewBox, fill: color ? color : appliedType, "data-testid": testId, children: jsxRuntime.jsx("path", { d: getSvgIconPath(icon) }) }) }));
|
|
16607
16624
|
};
|
|
16608
16625
|
|
|
16609
16626
|
const SeeqActionDropdownItem = (item) => {
|
|
16610
16627
|
let renderIcon = jsxRuntime.jsx(jsxRuntime.Fragment, {});
|
|
16611
16628
|
if (item.icon) {
|
|
16612
|
-
renderIcon = isSvgIcon(item.icon) ? (jsxRuntime.jsx(SvgIcon, { icon: item.icon, extraClassNames: 'tw-
|
|
16613
|
-
' dark:tw-text-sq-white tw-text-[22px] tw-text-sq-white ' +
|
|
16614
|
-
item.iconExtraClassNames, ...item })) : (jsxRuntime.jsx(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 ' +
|
|
16615
|
-
item.iconExtraClassNames }));
|
|
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-[1.375rem] tw:text-sq-white ' + item.iconExtraClassNames, ...item })) : (jsxRuntime.jsx(Icon, { icon: item.icon, type: "text", extraClassNames: 'tw:dark:text-sq-white tw:!text-[1.375rem] tw:text-sq-white ' + item.iconExtraClassNames }));
|
|
16616
16630
|
}
|
|
16617
|
-
return (jsxRuntime.jsxs("div", { className: "tw
|
|
16631
|
+
return (jsxRuntime.jsxs("div", { className: "tw:flex-col tw:flex tw:p-[10px] tw:pl-5 tw:w-[600px]", children: [jsxRuntime.jsxs("div", { className: "tw:flex tw:flex-row tw:gap-2 tw:items-end", children: [jsxRuntime.jsx("div", { className: "tw:rounded-[3px] 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-[20px] mb-0", children: item.display })] }), jsxRuntime.jsx("div", { className: "tw:text-[0.8125rem] tw:font-normal", children: item.text })] }));
|
|
16618
16632
|
};
|
|
16619
16633
|
const ViewWorkbench = (item) => {
|
|
16620
16634
|
let renderIcon = jsxRuntime.jsx(jsxRuntime.Fragment, {});
|
|
16621
16635
|
if (item.icon) {
|
|
16622
|
-
renderIcon = isSvgIcon(item.icon) ? (jsxRuntime.jsx(SvgIcon, { icon: item.icon, extraClassNames: 'tw-
|
|
16623
|
-
' tw-text-sq-text-color ' +
|
|
16624
|
-
item.iconExtraClassNames, type: "default", ...item })) : (jsxRuntime.jsx(Icon, { icon: item.icon, type: "text", extraClassNames: 'tw-flex tw-justify-center tw-items-center tw-text-[1.25rem] dark:tw-text-sq-white' +
|
|
16625
|
-
' tw-text-sq-text-color ' +
|
|
16626
|
-
item.iconExtraClassNames }));
|
|
16636
|
+
renderIcon = isSvgIcon(item.icon) ? (jsxRuntime.jsx(SvgIcon, { icon: item.icon, extraClassNames: 'tw:w-4 tw:text-[1.25rem] 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-[1.25rem] tw:dark:text-sq-white tw:text-sq-text-color ' + item.iconExtraClassNames }));
|
|
16627
16637
|
}
|
|
16628
|
-
return (jsxRuntime.jsx("div", { className: "tw
|
|
16638
|
+
return (jsxRuntime.jsx("div", { className: "tw:flex-col tw:flex tw:p-[10px]", children: jsxRuntime.jsxs("div", { className: "tw:flex tw:flex-row tw:gap-2 tw:items-end", children: [jsxRuntime.jsx("div", { className: "tw:rounded-[3px] tw:h-5 tw:w-5 tw:flex tw:justify-center tw:items-center ", children: renderIcon }), jsxRuntime.jsx("div", { className: "tw:text-[0.8125rem]", children: item.display })] }) }));
|
|
16629
16639
|
};
|
|
16630
16640
|
const InsertSeeqContent = (item) => {
|
|
16631
|
-
return (jsxRuntime.jsxs("div", { className: "tw
|
|
16641
|
+
return (jsxRuntime.jsxs("div", { className: "tw:flex-col tw:flex tw:justify-start tw:p-[10px] tw:font-normal tw:text-left tw:text-sq-text-color tw:dark:text-sq-dark-text", children: [jsxRuntime.jsx("h5", { className: "tw:text-[1rem] tw:font-medium tw:text-sq-theme-dark tw:leading-[18px]", children: item.display }), jsxRuntime.jsx("div", { className: "tw:text-[0.8125rem] tw:text-sq-text-color tw:dark:text-sq-dark-text !tw:mt-1", children: item.text })] }));
|
|
16632
16642
|
};
|
|
16633
16643
|
|
|
16634
16644
|
const borderStyles = [
|
|
16635
|
-
'tw
|
|
16636
|
-
'tw
|
|
16637
|
-
'tw
|
|
16638
|
-
'tw
|
|
16639
|
-
'dark:
|
|
16645
|
+
'tw:border-solid',
|
|
16646
|
+
'tw:border',
|
|
16647
|
+
'tw:rounded-md',
|
|
16648
|
+
'tw:border-sq-disabled-gray',
|
|
16649
|
+
'tw:dark:border-gray-500',
|
|
16640
16650
|
].join(' ');
|
|
16641
|
-
const bgStyles = ['tw
|
|
16642
|
-
const disabledClasses = ['tw
|
|
16651
|
+
const bgStyles = ['tw:bg-sq-white', 'tw:dark:bg-sq-dark-background'].join(' ');
|
|
16652
|
+
const disabledClasses = ['tw:opacity-50', 'tw:cursor-not-allowed'].join(' ');
|
|
16643
16653
|
const renderItem = (variant, item) => {
|
|
16644
16654
|
switch (variant) {
|
|
16645
16655
|
case 'create-workbench':
|
|
@@ -16654,31 +16664,31 @@ const renderItem = (variant, item) => {
|
|
|
16654
16664
|
};
|
|
16655
16665
|
const SeeqActionDropdown = ({ seeqActionDropdownItems, trigger, id, extraClassNames, containerTestId, disabled = false, align = 'end', placement = 'bottom', placementOffset = 5, alignOffset = -35, hasArrow = false, onOpenChange, isOpen, setFocusOnTriggerOnClose = true, keepFocusInsideDropdown = true, variant, ...tooltipProps }) => {
|
|
16656
16666
|
const tooltipData = getQTipData(tooltipProps);
|
|
16657
|
-
return (jsxRuntime.jsxs(Root2, { defaultOpen: false, open: isOpen, onOpenChange: onOpenChange, modal: keepFocusInsideDropdown, children: [jsxRuntime.jsx(Trigger, { id: id, "data-testid": id, className: `tw
|
|
16658
|
-
' tw
|
|
16659
|
-
' data-[state=open]:
|
|
16660
|
-
' forceFont data-[side=top]:
|
|
16661
|
-
borderStyles, children: [hasArrow && (jsxRuntime.jsx(Arrow2, { asChild: true, children: jsxRuntime.jsx("div", { className: " tw
|
|
16667
|
+
return (jsxRuntime.jsxs(Root2, { defaultOpen: false, open: isOpen, onOpenChange: onOpenChange, modal: keepFocusInsideDropdown, children: [jsxRuntime.jsx(Trigger, { id: id, "data-testid": id, className: `tw:border-none tw:focus-visible:outline-none tw:focus:outline-none tw:focus-within:outline-none`, asChild: true, 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 : ''} ${extraClassNames || ''}`, children: trigger }) }), jsxRuntime.jsx(Content2, { 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 +
|
|
16668
|
+
' tw:relative tw:z-[1200] tw:min-w-6 tw:py-2 tw:focus-visible:outline-none tw:outline-none' +
|
|
16669
|
+
' tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out' +
|
|
16670
|
+
' 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-[15px] tw:h-[15px] 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-[-7px]" }) })), seeqActionDropdownItems.map((item, index) => {
|
|
16662
16672
|
return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Item2, { onSelect: (e) => {
|
|
16663
16673
|
item.action(e);
|
|
16664
|
-
}, className: `tw
|
|
16674
|
+
}, 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));
|
|
16665
16675
|
})] }) })] }));
|
|
16666
16676
|
};
|
|
16667
16677
|
|
|
16668
|
-
const baseClasses$1 = 'tw
|
|
16669
|
-
const errorClasses = 'tw
|
|
16678
|
+
const baseClasses$1 = 'tw:flex tw:outline-none tw:rounded-md tw:w-full tw:relative tw:flex-wrap';
|
|
16679
|
+
const errorClasses = 'tw:border-sq-danger';
|
|
16670
16680
|
const borderColorClasses = [
|
|
16671
|
-
'tw
|
|
16672
|
-
'dark:
|
|
16673
|
-
'dark:focus:
|
|
16674
|
-
'dark:active:
|
|
16675
|
-
'focus:
|
|
16676
|
-
'active:
|
|
16681
|
+
'tw:border-sq-disabled-gray',
|
|
16682
|
+
'tw:dark:border-sq-dark-disabled-gray',
|
|
16683
|
+
'tw:dark:focus:border-sq-theme-darker',
|
|
16684
|
+
'tw:dark:active:border-sq-theme-darker',
|
|
16685
|
+
'tw:focus:border-sq-theme-dark',
|
|
16686
|
+
'tw:active:border-sq-theme-dark',
|
|
16677
16687
|
].join(' ');
|
|
16678
|
-
const fieldBorderRadius = 'tw
|
|
16679
|
-
const fieldClasses = 'tw
|
|
16680
|
-
const darkTheme = 'dark:
|
|
16681
|
-
const lightTheme = 'tw
|
|
16688
|
+
const fieldBorderRadius = 'tw:rounded-l-md tw:rounded-r-none';
|
|
16689
|
+
const fieldClasses = 'tw:leading-normal tw:outline-none tw:py-1 tw:px-3' + 'tw:p-1 tw:border-solid tw:border';
|
|
16690
|
+
const darkTheme = 'tw:dark:bg-sq-dark-background tw:dark:text-sq-dark-text tw:disabled:dark:text-sq-disabled-gray';
|
|
16691
|
+
const lightTheme = 'tw:text-sq-text-color tw:disabled:text-sq-darkish-gray';
|
|
16682
16692
|
/**
|
|
16683
16693
|
* InputGroup.
|
|
16684
16694
|
*/
|
|
@@ -16688,8 +16698,10 @@ const InputGroup = React.forwardRef((props, ref) => {
|
|
|
16688
16698
|
const appliedClasses = `${baseClasses$1} ${extraClassNames}`;
|
|
16689
16699
|
const fieldAppliedClasses = `${fieldClasses} ${extraClassNames} ${lightTheme} ${darkTheme} ${fieldBorderRadius} ${showError ? errorClasses : borderColorClasses} `;
|
|
16690
16700
|
const elementsToAppend = append.filter(Boolean);
|
|
16691
|
-
return (jsxRuntime.jsxs("div", { id: `input-group-${id}`, className: appliedClasses, children: [field ? (jsxRuntime.jsx("div", { "data-testid": testId, className: `tw
|
|
16692
|
-
return item?.variant === 'button' ? (jsxRuntime.jsx(Button, { extraClassNames: `$
|
|
16701
|
+
return (jsxRuntime.jsxs("div", { id: `input-group-${id}`, className: appliedClasses, children: [field ? (jsxRuntime.jsx("div", { "data-testid": testId, className: `tw:flex tw:flex-1 tw:cursor-pointer tw:active:z-50 ${fieldAppliedClasses}`, children: field })) : (jsxRuntime.jsx(TextField, { testId: testId, readonly: readonly, onChange: onChange, onKeyUp: onKeyUp, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, name: name, ref: ref, showError: showError, value: value, required: required, placeholder: placeholder, autoComplete: autoComplete, autoFocus: autoFocus, id: id, type: type, disabled: disabled, step: step, min: min, max: max, maxLength: maxLength, minLength: minLength, extraClassNames: `tw:flex tw:flex-1 tw:w-full tw:focus:z-30 tw:rounded-r-none tw:last:rounded-r-md ${extraClassNames}`, ...tooltipData })), elementsToAppend.map((item, index) => {
|
|
16702
|
+
return item?.variant === 'button' ? (jsxRuntime.jsx(Button, { extraClassNames: `$
|
|
16703
|
+
index ? 'tw:-ml-px' : 'tw:ml-0'
|
|
16704
|
+
} tw:focus:z-40 tw:focus:border tw:rounded-none tw:last:rounded-r-md`, ...item.buttonProps }, index)) : (jsxRuntime.jsx("div", { className: `${borderColorClasses} ${index ? 'tw:-ml-px' : 'tw:ml-0'} tw:flex tw:items-center tw:justify-center tw:rounded-none tw:last:rounded-r-md tw:active:z-30 tw:active:border tw:border`, children: item?.element }, index));
|
|
16693
16705
|
})] }));
|
|
16694
16706
|
});
|
|
16695
16707
|
|
|
@@ -16738,22 +16750,23 @@ const clamp$1 = (min, max, v) => {
|
|
|
16738
16750
|
return v;
|
|
16739
16751
|
};
|
|
16740
16752
|
|
|
16753
|
+
function formatErrorMessage(message, errorCode) {
|
|
16754
|
+
return errorCode
|
|
16755
|
+
? `${message}. For more information and steps for solving, visit https://motion.dev/troubleshooting/${errorCode}`
|
|
16756
|
+
: message;
|
|
16757
|
+
}
|
|
16758
|
+
|
|
16741
16759
|
let warning = () => { };
|
|
16742
16760
|
let invariant = () => { };
|
|
16743
16761
|
if (process.env.NODE_ENV !== "production") {
|
|
16744
|
-
const formatMessage = (message, errorCode) => {
|
|
16745
|
-
return errorCode
|
|
16746
|
-
? `${message}. For more information and steps for solving, visit https://motion.dev/troubleshooting/${errorCode}`
|
|
16747
|
-
: message;
|
|
16748
|
-
};
|
|
16749
16762
|
warning = (check, message, errorCode) => {
|
|
16750
16763
|
if (!check && typeof console !== "undefined") {
|
|
16751
|
-
console.warn(
|
|
16764
|
+
console.warn(formatErrorMessage(message, errorCode));
|
|
16752
16765
|
}
|
|
16753
16766
|
};
|
|
16754
16767
|
invariant = (check, message, errorCode) => {
|
|
16755
16768
|
if (!check) {
|
|
16756
|
-
throw new Error(
|
|
16769
|
+
throw new Error(formatErrorMessage(message, errorCode));
|
|
16757
16770
|
}
|
|
16758
16771
|
};
|
|
16759
16772
|
}
|
|
@@ -16874,10 +16887,10 @@ function velocityPerSecond(velocity, frameDuration) {
|
|
|
16874
16887
|
}
|
|
16875
16888
|
|
|
16876
16889
|
const warned = new Set();
|
|
16877
|
-
function warnOnce(condition, message,
|
|
16890
|
+
function warnOnce(condition, message, errorCode) {
|
|
16878
16891
|
if (condition || warned.has(message))
|
|
16879
16892
|
return;
|
|
16880
|
-
console.warn(message);
|
|
16893
|
+
console.warn(formatErrorMessage(message, errorCode));
|
|
16881
16894
|
warned.add(message);
|
|
16882
16895
|
}
|
|
16883
16896
|
|
|
@@ -18482,6 +18495,10 @@ class JSAnimation extends WithPromise {
|
|
|
18482
18495
|
get duration() {
|
|
18483
18496
|
return millisecondsToSeconds(this.calculatedDuration);
|
|
18484
18497
|
}
|
|
18498
|
+
get iterationDuration() {
|
|
18499
|
+
const { delay = 0 } = this.options || {};
|
|
18500
|
+
return this.duration + millisecondsToSeconds(delay);
|
|
18501
|
+
}
|
|
18485
18502
|
get time() {
|
|
18486
18503
|
return millisecondsToSeconds(this.currentTime);
|
|
18487
18504
|
}
|
|
@@ -19084,6 +19101,10 @@ class NativeAnimation extends WithPromise {
|
|
|
19084
19101
|
const duration = this.animation.effect?.getComputedTiming?.().duration || 0;
|
|
19085
19102
|
return millisecondsToSeconds(Number(duration));
|
|
19086
19103
|
}
|
|
19104
|
+
get iterationDuration() {
|
|
19105
|
+
const { delay = 0 } = this.options || {};
|
|
19106
|
+
return this.duration + millisecondsToSeconds(delay);
|
|
19107
|
+
}
|
|
19087
19108
|
get time() {
|
|
19088
19109
|
return millisecondsToSeconds(Number(this.animation.currentTime) || 0);
|
|
19089
19110
|
}
|
|
@@ -19270,12 +19291,9 @@ function canAnimate(keyframes, name, type, velocity) {
|
|
|
19270
19291
|
((type === "spring" || isGenerator(type)) && velocity));
|
|
19271
19292
|
}
|
|
19272
19293
|
|
|
19273
|
-
|
|
19274
|
-
|
|
19275
|
-
|
|
19276
|
-
*/
|
|
19277
|
-
function isHTMLElement(element) {
|
|
19278
|
-
return isObject(element) && "offsetHeight" in element;
|
|
19294
|
+
function makeAnimationInstant(options) {
|
|
19295
|
+
options.duration = 0;
|
|
19296
|
+
options.type = "keyframes";
|
|
19279
19297
|
}
|
|
19280
19298
|
|
|
19281
19299
|
/**
|
|
@@ -19292,7 +19310,14 @@ const acceleratedValues = new Set([
|
|
|
19292
19310
|
const supportsWaapi = /*@__PURE__*/ memo(() => Object.hasOwnProperty.call(Element.prototype, "animate"));
|
|
19293
19311
|
function supportsBrowserAnimation(options) {
|
|
19294
19312
|
const { motionValue, name, repeatDelay, repeatType, damping, type } = options;
|
|
19295
|
-
|
|
19313
|
+
const subject = motionValue?.owner?.current;
|
|
19314
|
+
/**
|
|
19315
|
+
* We use this check instead of isHTMLElement() because we explicitly
|
|
19316
|
+
* **don't** want elements in different timing contexts (i.e. popups)
|
|
19317
|
+
* to be accelerated, as it's not possible to sync these animations
|
|
19318
|
+
* properly with those driven from the main window frameloop.
|
|
19319
|
+
*/
|
|
19320
|
+
if (!(subject instanceof HTMLElement)) {
|
|
19296
19321
|
return false;
|
|
19297
19322
|
}
|
|
19298
19323
|
const { onUpdate, transformTemplate } = motionValue.owner.getProps();
|
|
@@ -19363,7 +19388,7 @@ class AsyncMotionValueAnimation extends WithPromise {
|
|
|
19363
19388
|
onUpdate?.(getFinalKeyframe$1(keyframes, options, finalKeyframe));
|
|
19364
19389
|
}
|
|
19365
19390
|
keyframes[0] = keyframes[keyframes.length - 1];
|
|
19366
|
-
options
|
|
19391
|
+
makeAnimationInstant(options);
|
|
19367
19392
|
options.repeat = 0;
|
|
19368
19393
|
}
|
|
19369
19394
|
/**
|
|
@@ -19430,6 +19455,9 @@ class AsyncMotionValueAnimation extends WithPromise {
|
|
|
19430
19455
|
get duration() {
|
|
19431
19456
|
return this.animation.duration;
|
|
19432
19457
|
}
|
|
19458
|
+
get iterationDuration() {
|
|
19459
|
+
return this.animation.iterationDuration;
|
|
19460
|
+
}
|
|
19433
19461
|
get time() {
|
|
19434
19462
|
return this.animation.time;
|
|
19435
19463
|
}
|
|
@@ -19866,6 +19894,14 @@ const getValueAsType = (value, type) => {
|
|
|
19866
19894
|
: value;
|
|
19867
19895
|
};
|
|
19868
19896
|
|
|
19897
|
+
/**
|
|
19898
|
+
* Checks if an element is an HTML element in a way
|
|
19899
|
+
* that works across iframes
|
|
19900
|
+
*/
|
|
19901
|
+
function isHTMLElement(element) {
|
|
19902
|
+
return isObject(element) && "offsetHeight" in element;
|
|
19903
|
+
}
|
|
19904
|
+
|
|
19869
19905
|
/**
|
|
19870
19906
|
* Maximum time between the value of two frames, beyond which we
|
|
19871
19907
|
* assume the velocity has since been 0.
|
|
@@ -19899,7 +19935,7 @@ class MotionValue {
|
|
|
19899
19935
|
* An object containing a SubscriptionManager for each active event.
|
|
19900
19936
|
*/
|
|
19901
19937
|
this.events = {};
|
|
19902
|
-
this.updateAndNotify = (v
|
|
19938
|
+
this.updateAndNotify = (v) => {
|
|
19903
19939
|
const currentTime = time.now();
|
|
19904
19940
|
/**
|
|
19905
19941
|
* If we're updating the value during another frame or eventloop
|
|
@@ -19920,10 +19956,6 @@ class MotionValue {
|
|
|
19920
19956
|
}
|
|
19921
19957
|
}
|
|
19922
19958
|
}
|
|
19923
|
-
// Update render subscribers
|
|
19924
|
-
if (render) {
|
|
19925
|
-
this.events.renderRequest?.notify(this.current);
|
|
19926
|
-
}
|
|
19927
19959
|
};
|
|
19928
19960
|
this.hasAnimated = false;
|
|
19929
19961
|
this.setCurrent(init);
|
|
@@ -20034,9 +20066,9 @@ class MotionValue {
|
|
|
20034
20066
|
*
|
|
20035
20067
|
* @public
|
|
20036
20068
|
*/
|
|
20037
|
-
set(v
|
|
20038
|
-
if (!
|
|
20039
|
-
this.updateAndNotify(v
|
|
20069
|
+
set(v) {
|
|
20070
|
+
if (!this.passiveEffect) {
|
|
20071
|
+
this.updateAndNotify(v);
|
|
20040
20072
|
}
|
|
20041
20073
|
else {
|
|
20042
20074
|
this.passiveEffect(v, this.updateAndNotify);
|
|
@@ -27399,7 +27431,7 @@ var Thumb = SliderThumb;
|
|
|
27399
27431
|
*/
|
|
27400
27432
|
const Slider = (props) => {
|
|
27401
27433
|
const { onValueChange, onPointerUp, id, value, name, disabled = false, rootExtraClassNames = '', trackExtraClassNames = '', rangeExtraClassNames = '', thumbExtraClassNames = '', step, min, max, } = props;
|
|
27402
|
-
return (jsxRuntime.jsxs(Root$1, { className: `tw
|
|
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-[5px] 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-[15px] tw:w-[15px] 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 })] }));
|
|
27403
27435
|
};
|
|
27404
27436
|
|
|
27405
27437
|
var PROGRESS_NAME = "Progress";
|
|
@@ -28668,7 +28700,7 @@ function validateWCAG2Parms(parms) {
|
|
|
28668
28700
|
};
|
|
28669
28701
|
}
|
|
28670
28702
|
|
|
28671
|
-
const baseLabelClasses = 'tw
|
|
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-[18px]';
|
|
28672
28704
|
const ProgressIndicator = (props) => {
|
|
28673
28705
|
const { value, color = undefined, testId, label, extraClasses = '', labelClasses = '', valuesLength, max, index, totalValue, ...tooltipProps } = props;
|
|
28674
28706
|
const tooltipData = getQTipData(tooltipProps);
|
|
@@ -28681,19 +28713,19 @@ const ProgressIndicator = (props) => {
|
|
|
28681
28713
|
if (totalValue >= max) {
|
|
28682
28714
|
// If progress is 100%, round both ends
|
|
28683
28715
|
if (index === 0 && valuesLength === 1) {
|
|
28684
|
-
roundedCorners = 'tw
|
|
28716
|
+
roundedCorners = 'tw:rounded-[15px]';
|
|
28685
28717
|
}
|
|
28686
28718
|
else if (index === 0) {
|
|
28687
|
-
roundedCorners = 'tw
|
|
28719
|
+
roundedCorners = 'tw:rounded-l-[15px]';
|
|
28688
28720
|
}
|
|
28689
28721
|
else if (index === valuesLength - 1) {
|
|
28690
|
-
roundedCorners = 'tw
|
|
28722
|
+
roundedCorners = 'tw:rounded-r-[15px]';
|
|
28691
28723
|
}
|
|
28692
28724
|
}
|
|
28693
28725
|
else {
|
|
28694
28726
|
// Otherwise, only round the leftmost indicator
|
|
28695
28727
|
if (index === 0) {
|
|
28696
|
-
roundedCorners = 'tw
|
|
28728
|
+
roundedCorners = 'tw:rounded-l-[15px]';
|
|
28697
28729
|
}
|
|
28698
28730
|
}
|
|
28699
28731
|
React.useEffect(() => {
|
|
@@ -28705,13 +28737,13 @@ const ProgressIndicator = (props) => {
|
|
|
28705
28737
|
return () => clearTimeout(timeout);
|
|
28706
28738
|
}, [value]);
|
|
28707
28739
|
const bgColor = color || undefined;
|
|
28708
|
-
const bgClass = color ? '' : 'tw
|
|
28740
|
+
const bgClass = color ? '' : 'tw:bg-sq-theme-dark';
|
|
28709
28741
|
const computeTextClass = (elem) => {
|
|
28710
28742
|
const computedStyle = getComputedStyle(elem);
|
|
28711
28743
|
const backgroundColor = computedStyle.backgroundColor;
|
|
28712
28744
|
const textColorClass = tinycolor(backgroundColor).isDark()
|
|
28713
|
-
? 'tw
|
|
28714
|
-
: 'tw
|
|
28745
|
+
? 'tw:text-sq-white tw:dark:text-sq-white'
|
|
28746
|
+
: 'tw:text-sq-text-color tw:dark:text-sq-text-color';
|
|
28715
28747
|
setTextColorClass(textColorClass);
|
|
28716
28748
|
};
|
|
28717
28749
|
React.useEffect(() => {
|
|
@@ -28719,35 +28751,35 @@ const ProgressIndicator = (props) => {
|
|
|
28719
28751
|
computeTextClass(indicatorElementRef.current);
|
|
28720
28752
|
}
|
|
28721
28753
|
}, [!!indicatorElementRef.current]);
|
|
28722
|
-
return (React.createElement(Indicator, { className: `tw
|
|
28754
|
+
return (React.createElement(Indicator, { className: `tw:ease-[cubic-bezier(0.65, 0, 0.35, 1)] tw:w-full tw:h-[18px] 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: {
|
|
28723
28755
|
// Background color will default to the theme color if undefined
|
|
28724
28756
|
backgroundColor: bgColor,
|
|
28725
28757
|
animation: 'width 660ms forwards',
|
|
28726
28758
|
width: `${animatedWidth}%`,
|
|
28727
|
-
} }, label ? (jsxRuntime.jsx("span", { className: `${baseLabelClasses} ${labelClasses} ${textColorClass} ${valuesLength === 1 ? 'tw
|
|
28759
|
+
} }, label ? (jsxRuntime.jsx("span", { className: `${baseLabelClasses} ${labelClasses} ${textColorClass} ${valuesLength === 1 ? 'tw:absolute tw:z-50' : ''}`, children: label })) : undefined));
|
|
28728
28760
|
};
|
|
28729
28761
|
const ProgressBar = ({ values = [], max = 100, containerExtraClasses = '', zeroValueLabel = 'No progress yet', }) => {
|
|
28730
28762
|
const totalValue = values.reduce((acc, { value }) => acc + value, 0);
|
|
28731
|
-
return (jsxRuntime.jsx(Root, { className: `tw
|
|
28732
|
-
return React.createElement(ProgressIndicator, { ...props, max: max, valuesLength: values.length, index: i, totalValue: totalValue, key: i });
|
|
28733
|
-
})) : (jsxRuntime.jsx("div", { className: `${baseLabelClasses} tw
|
|
28763
|
+
return (jsxRuntime.jsx(Root, { className: `tw:relative tw:h-[18px] tw:w-full tw:overflow-hidden tw:rounded-[15px] 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
|
+
return (React.createElement(ProgressIndicator, { ...props, max: max, valuesLength: values.length, index: i, totalValue: totalValue, key: i }));
|
|
28765
|
+
})) : (jsxRuntime.jsx("div", { className: `${baseLabelClasses} tw:mx-auto tw:overflow-hidden`, children: zeroValueLabel })) }));
|
|
28734
28766
|
};
|
|
28735
28767
|
|
|
28736
|
-
const baseClasses = 'tw
|
|
28768
|
+
const baseClasses = 'tw:flex tw:outline-none tw:w-full tw:relative tw:flex-wrap';
|
|
28737
28769
|
const activeClassesByVariantLightTheme = {
|
|
28738
|
-
'outline': '!tw
|
|
28739
|
-
'theme': 'tw
|
|
28770
|
+
'outline': '!tw:bg-sq-disabled-gray tw:border-sq-theme-dark',
|
|
28771
|
+
'theme': 'tw:bg-sq-theme-highlight',
|
|
28740
28772
|
'danger': '',
|
|
28741
28773
|
'theme-light': '',
|
|
28742
|
-
'no-border': '!tw
|
|
28774
|
+
'no-border': '!tw:bg-sq-disabled-gray',
|
|
28743
28775
|
'warning': '',
|
|
28744
28776
|
};
|
|
28745
28777
|
const activeClassesByVariantDarkTheme = {
|
|
28746
|
-
'outline': 'dark
|
|
28747
|
-
'theme': 'dark:
|
|
28778
|
+
'outline': '!tw:dark:bg-sq-multi-gray-dark tw:dark:border-sq-theme-dark',
|
|
28779
|
+
'theme': 'tw:dark:bg-sq-theme-highlight',
|
|
28748
28780
|
'danger': '',
|
|
28749
28781
|
'theme-light': '',
|
|
28750
|
-
'no-border': 'dark
|
|
28782
|
+
'no-border': '!tw:dark:bg-sq-multi-gray-dark',
|
|
28751
28783
|
'warning': '',
|
|
28752
28784
|
};
|
|
28753
28785
|
/**
|
|
@@ -28759,7 +28791,7 @@ const ButtonGroup = (props) => {
|
|
|
28759
28791
|
const appliedClasses = `${baseClasses} ${extraClassNames}`;
|
|
28760
28792
|
return (jsxRuntime.jsx("div", { id: id ? `button-group-${id}` : undefined, "data-testid": testId, className: appliedClasses, ...tooltipData, children: buttons
|
|
28761
28793
|
.filter(Boolean)
|
|
28762
|
-
.map((item, index) => item?.variant === 'button' ? (jsxRuntime.jsx(Button, { ...item.buttonProps, extraClassNames: `tw
|
|
28794
|
+
.map((item, index) => item?.variant === 'button' ? (jsxRuntime.jsx(Button, { ...item.buttonProps, extraClassNames: `tw:ml-[-1px] 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
|
|
28763
28795
|
? `${activeClassesByVariantLightTheme[item?.buttonProps?.variant ?? 'outline']} ${activeClassesByVariantDarkTheme[item?.buttonProps?.variant ?? 'outline']} `
|
|
28764
28796
|
: ''} ${item.buttonProps.extraClassNames}`, onClick: () => onChange && onChange(item?.buttonProps?.value) }, index)) : (item?.element)) }));
|
|
28765
28797
|
};
|
|
@@ -28769,7 +28801,7 @@ const ButtonGroup = (props) => {
|
|
|
28769
28801
|
* - Easily create a carousel with custom slides.
|
|
28770
28802
|
* - Supports automatic sliding, navigation arrows, and slide indicators.
|
|
28771
28803
|
*/
|
|
28772
|
-
const Carousel = ({ testId = 'carousel-id', activeIndex = 0, extraClassNames = '', onSlide = () => { }, autoSlide, showIndicators = true, continuous = true, interval = 4000, prevIcon = 'fc-arrow-dropdown tw
|
|
28804
|
+
const Carousel = ({ testId = 'carousel-id', activeIndex = 0, extraClassNames = '', onSlide = () => { }, autoSlide, showIndicators = true, continuous = true, interval = 4000, prevIcon = 'fc-arrow-dropdown tw:rotate-90', nextIcon = 'fc-arrow-dropdown tw:rotate-270', showArrows = true, iconExtraClassNames = '', carouselItems = [], }) => {
|
|
28773
28805
|
const [currentIndex, setCurrentIndex] = React.useState(activeIndex);
|
|
28774
28806
|
const changeSlide = (nextIndex) => {
|
|
28775
28807
|
const newIndex = (nextIndex + carouselItems.length) % carouselItems.length;
|
|
@@ -28831,7 +28863,7 @@ const Carousel = ({ testId = 'carousel-id', activeIndex = 0, extraClassNames = '
|
|
|
28831
28863
|
transition: { type: 'spring', damping: 20, stiffness: 100 },
|
|
28832
28864
|
}),
|
|
28833
28865
|
};
|
|
28834
|
-
return (jsxRuntime.jsxs("div", { "data-testid": testId, className: `tw
|
|
28866
|
+
return (jsxRuntime.jsxs("div", { "data-testid": testId, className: `tw:flex tw:flex-col tw:items-center tw:justify-center tw:w-full tw:overflow-hidden ${extraClassNames}`, children: [jsxRuntime.jsxs("div", { className: "tw:flex tw:items-center tw:w-full tw:h-max tw:gap-1", children: [showArrows && (jsxRuntime.jsx(Button, { icon: prevIcon, size: "lg", variant: "no-border", testId: "carousel-prev", extraClassNames: `${currentIndex === 0 && !continuous ? 'tw:invisible' : ''} ${iconExtraClassNames} tw:animate-fadeIn`, onClick: onBackClick })), jsxRuntime.jsx("div", { className: "tw:h-full tw:w-full tw:overflow-hidden", children: jsxRuntime.jsx(motion.div, { custom: 1, initial: "initial", animate: "animate", exit: "exit", variants: slideVariants, className: "tw:w-full", children: carouselItems[currentIndex] }, currentIndex) }), showArrows && (jsxRuntime.jsx(Button, { icon: nextIcon, testId: "carousel-next", size: "lg", variant: "no-border", extraClassNames: `${currentIndex === carouselItems.length - 1 && !continuous ? 'tw:invisible' : ''} ${iconExtraClassNames} tw:animate-fadeIn`, onClick: onForwardClick }))] }), showIndicators && (jsxRuntime.jsx("div", { className: "tw:flex tw:gap-1 tw:mt-2", children: carouselItems.map((_, i) => (jsxRuntime.jsx("div", { className: `tw:w-2 tw:h-2 tw:rounded-full tw:cursor-pointer ${i === currentIndex ? 'tw:bg-sq-theme-dark' : 'tw:bg-sq-darkish-gray'}`, onClick: () => changeSlide(i) }, i))) }))] }));
|
|
28835
28867
|
};
|
|
28836
28868
|
|
|
28837
28869
|
const buttonTypes = ['button', 'reset', 'submit', 'link'];
|