@seeqdev/qomponents 0.0.179 → 0.0.180
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/README.md +0 -9
- package/dist/FontCustom.woff +0 -0
- package/dist/FontCustom.woff2 +0 -0
- package/dist/example/src/Example.tsx +7 -7
- package/dist/index.esm.js +343 -343
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +343 -343
- package/dist/index.js.map +1 -1
- package/dist/src/SeeqActionDropdown/SeeqActionDropdown.types.d.ts +0 -5
- package/dist/styles.css +3849 -3226
- package/package.json +3 -4
- package/dist/iconFont/FontCustom.woff +0 -0
- package/dist/iconFont/FontCustom.woff2 +0 -0
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-color-dark',
|
|
70
|
+
'white': 'tw-text-white',
|
|
71
|
+
'dark-gray': 'tw-text-sq-fairly-dark-gray',
|
|
72
|
+
'warning': 'tw-text-sq-warning-color',
|
|
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-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-color',
|
|
80
|
+
'theme-light': 'tw-text-sq-color-light',
|
|
81
|
+
'success': 'tw-text-sq-success-color',
|
|
82
82
|
};
|
|
83
83
|
const colorClassesThemeDark = {
|
|
84
|
-
'theme': '
|
|
84
|
+
'theme': 'dark:tw-text-sq-color-dark-dark',
|
|
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': '
|
|
88
|
+
'darkish-gray': 'tw-text-sq-darkish-gray',
|
|
89
|
+
'gray': 'dark:tw-text-sq-dark-disabled-gray',
|
|
90
90
|
'color': '',
|
|
91
|
-
'info': '
|
|
92
|
-
'text': '
|
|
91
|
+
'info': 'dark:tw-text-sq-link-dark',
|
|
92
|
+
'text': 'dark:tw-text-sq-dark-text',
|
|
93
93
|
'inherit': '',
|
|
94
|
-
'danger': 'tw
|
|
95
|
-
'theme-light': 'tw
|
|
96
|
-
'success': 'tw
|
|
94
|
+
'danger': 'tw-text-sq-danger-color',
|
|
95
|
+
'theme-light': 'tw-text-sq-color-light',
|
|
96
|
+
'success': 'tw-text-sq-success-color',
|
|
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} focus:tw-outline-none focus-visible:tw-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,71 +123,71 @@ 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 focus:tw-ring-0 focus-visible:tw-outline-none aria-disabled:tw-cursor-not-allowed disabled:tw-pointer-events-none';
|
|
127
127
|
const baseClassesByVariant = {
|
|
128
|
-
'outline': '
|
|
129
|
-
'theme': '
|
|
130
|
-
'danger': 'tw
|
|
131
|
-
'tw
|
|
132
|
-
'theme-light': '
|
|
133
|
-
'no-border': '
|
|
134
|
-
'warning': 'tw
|
|
135
|
-
'
|
|
128
|
+
'outline': 'disabled:tw-opacity-50 aria-disabled:tw-opacity-50 tw-border-solid tw-border',
|
|
129
|
+
'theme': 'disabled:tw-opacity-50 aria-disabled:tw-opacity-50 tw-border-solid tw-border',
|
|
130
|
+
'danger': 'tw-bg-sq-danger-color disabled:tw-opacity-50 aria-disabled:tw-opacity-50 ' +
|
|
131
|
+
'tw-border-solid tw-border tw-border-sq-danger-color',
|
|
132
|
+
'theme-light': 'disabled:tw-opacity-50 aria-disabled:tw-opacity-50 tw-border-solid tw-border',
|
|
133
|
+
'no-border': 'disabled:tw-opacity-50 aria-disabled:tw-opacity-50',
|
|
134
|
+
'warning': 'tw-bg-sq-warning-color tw-border-solid tw-border tw-border-sq-warning-color ' +
|
|
135
|
+
'disabled:tw-opacity-50 aria-disabled:tw-opacity-50',
|
|
136
136
|
};
|
|
137
137
|
const textClassesByVariantLightTheme = {
|
|
138
|
-
'outline': 'tw
|
|
139
|
-
'theme': 'tw
|
|
140
|
-
'theme-light': 'tw
|
|
141
|
-
'danger': 'tw
|
|
142
|
-
'no-border': 'tw
|
|
143
|
-
'warning': 'tw
|
|
138
|
+
'outline': 'tw-text-sq-text-color',
|
|
139
|
+
'theme': 'tw-text-white',
|
|
140
|
+
'theme-light': 'tw-text-white',
|
|
141
|
+
'danger': 'tw-text-white',
|
|
142
|
+
'no-border': 'tw-text-sq-text-color',
|
|
143
|
+
'warning': 'tw-text-white',
|
|
144
144
|
};
|
|
145
145
|
const textClassesByVariantDarkTheme = {
|
|
146
|
-
'outline': '
|
|
147
|
-
'theme': '
|
|
148
|
-
'theme-light': '
|
|
149
|
-
'danger': '
|
|
150
|
-
'no-border': '
|
|
151
|
-
'warning': '
|
|
146
|
+
'outline': 'dark:tw-text-sq-dark-text',
|
|
147
|
+
'theme': 'dark:tw-text-white',
|
|
148
|
+
'theme-light': 'dark:tw-text-white',
|
|
149
|
+
'danger': 'dark:tw-text-white',
|
|
150
|
+
'no-border': 'dark:tw-text-sq-dark-text',
|
|
151
|
+
'warning': 'dark:tw-text-white',
|
|
152
152
|
};
|
|
153
153
|
const classesByVariantLightTheme = {
|
|
154
|
-
'outline': 'tw
|
|
155
|
-
'theme': 'tw
|
|
154
|
+
'outline': 'tw-bg-white tw-border-sq-disabled-gray',
|
|
155
|
+
'theme': 'tw-bg-sq-color-dark tw-border-sq-color-dark',
|
|
156
156
|
'danger': '',
|
|
157
|
-
'theme-light': 'tw
|
|
157
|
+
'theme-light': 'tw-bg-sq-icon',
|
|
158
158
|
'no-border': '',
|
|
159
159
|
'warning': '',
|
|
160
160
|
};
|
|
161
161
|
const classesByVariantDarkTheme = {
|
|
162
|
-
'outline': '
|
|
163
|
-
'theme': '
|
|
162
|
+
'outline': 'dark:tw-bg-sq-dark-background dark:tw-border-sq-dark-disabled-gray',
|
|
163
|
+
'theme': 'dark:tw-bg-sq-color-dark dark:tw-border-sq-color-dark',
|
|
164
164
|
'danger': '',
|
|
165
|
-
'theme-light': '
|
|
165
|
+
'theme-light': 'dark:tw-bg-sq-icon-dark dark:tw-border-sq-icon-dark',
|
|
166
166
|
'no-border': '',
|
|
167
167
|
'warning': '',
|
|
168
168
|
};
|
|
169
169
|
const activeClassesByVariantLightTheme = {
|
|
170
|
-
'outline': '
|
|
171
|
-
'
|
|
172
|
-
'theme': '
|
|
173
|
-
'danger': '
|
|
174
|
-
'theme-light': '
|
|
170
|
+
'outline': 'hover:tw-bg-sq-light-gray focus:tw-bg-sq-dark-gray active:tw-bg-sq-dark-gray focus:tw-border-sq-color-dark' +
|
|
171
|
+
' active:tw-border-sq-color-dark',
|
|
172
|
+
'theme': 'hover:tw-bg-sq-color-highlight hover:tw-border-sq-color-highlight',
|
|
173
|
+
'danger': 'hover:tw-bg-sq-danger-color-hover hover:tw-border-sq-danger-color-hover',
|
|
174
|
+
'theme-light': 'hover:tw-bg-sq-link hover:tw-border-sq-link',
|
|
175
175
|
'no-border': '',
|
|
176
176
|
'warning': '',
|
|
177
177
|
};
|
|
178
178
|
const activeClassesByVariantDarkTheme = {
|
|
179
|
-
'outline': '
|
|
180
|
-
'
|
|
181
|
-
'theme': '
|
|
182
|
-
'danger': '
|
|
183
|
-
'theme-light': '
|
|
179
|
+
'outline': 'dark:hover:tw-bg-sq-highlight-color-dark dark:focus:tw-bg-sq-multi-gray-dark' +
|
|
180
|
+
' dark:active:tw-bg-sq-multi-gray-dark dark:focus:tw-border-sq-color-dark dark:active:tw-border-sq-color-dark',
|
|
181
|
+
'theme': 'dark:hover:tw-bg-sq-color-highlight dark:hover:tw-border-sq-color-highlight',
|
|
182
|
+
'danger': 'dark:hover:tw-bg-sq-danger-color-hover dark:hover:tw-border-sq-danger-color-hover',
|
|
183
|
+
'theme-light': 'dark:hover:tw-bg-sq-link-dark dark:hover:tw-border-sq-link-dark',
|
|
184
184
|
'no-border': '',
|
|
185
185
|
'warning': '',
|
|
186
186
|
};
|
|
187
187
|
const sizeClasses = {
|
|
188
|
-
xs: 'tw
|
|
189
|
-
sm: 'tw
|
|
190
|
-
lg: 'tw
|
|
188
|
+
xs: 'tw-text-xs tw-py-0.5',
|
|
189
|
+
sm: 'tw-text-sm tw-py-1',
|
|
190
|
+
lg: 'tw-text-xl tw-py-1',
|
|
191
191
|
};
|
|
192
192
|
let tooltipData = undefined;
|
|
193
193
|
let appliedClasses = `${baseClasses} ${baseClassesByVariant[variant]} ${sizeClasses[size]} ${classesByVariantLightTheme[variant]} ${classesByVariantDarkTheme[variant]} ${textClassesByVariantLightTheme[variant]} ${textClassesByVariantDarkTheme[variant]} ${extraClassNames}`;
|
|
@@ -203,7 +203,7 @@ const Button = ({ onClick, label, variant = 'outline', type = 'button', size = '
|
|
|
203
203
|
'data-qtip-delay': tooltipOptions?.delay ?? DEFAULT_TOOL_TIP_DELAY,
|
|
204
204
|
};
|
|
205
205
|
}
|
|
206
|
-
const iconClass = iconPosition === 'left' ? 'tw
|
|
206
|
+
const iconClass = iconPosition === 'left' ? 'tw-mr-1' : 'tw-ml-1';
|
|
207
207
|
const iconElement = icon && (jsxRuntime.jsx(Icon, { icon: icon, iconPrefix: iconPrefix, type: iconStyle, color: iconColor, extraClassNames: label
|
|
208
208
|
? `${iconClass} ${textClassesByVariantLightTheme[variant]} ${textClassesByVariantDarkTheme[variant]}`
|
|
209
209
|
: '', testId: `${id}_spinner` }));
|
|
@@ -4797,30 +4797,31 @@ function getSvgIconPath(icon) {
|
|
|
4797
4797
|
}
|
|
4798
4798
|
|
|
4799
4799
|
const popoverBorderStyles = [
|
|
4800
|
-
'tw
|
|
4801
|
-
'tw
|
|
4802
|
-
'tw
|
|
4803
|
-
'tw
|
|
4804
|
-
'
|
|
4800
|
+
'tw-border-solid',
|
|
4801
|
+
'tw-border',
|
|
4802
|
+
'tw-rounded-md',
|
|
4803
|
+
'tw-border-sq-disabled-gray',
|
|
4804
|
+
'dark:tw-border-gray-500',
|
|
4805
4805
|
].join(' ');
|
|
4806
4806
|
const triggerBackgroundStyles = [
|
|
4807
|
-
'tw
|
|
4808
|
-
'
|
|
4809
|
-
'
|
|
4810
|
-
'
|
|
4811
|
-
'
|
|
4812
|
-
'
|
|
4807
|
+
'tw-bg-transparent',
|
|
4808
|
+
'hover:tw-bg-sq-worksheetspanel-gray',
|
|
4809
|
+
'active:tw-bg-sq-worksheetspanel-gray',
|
|
4810
|
+
'dark:tw-bg-transparent',
|
|
4811
|
+
'dark:hover:tw-bg-sq-field-disabled-gray',
|
|
4812
|
+
'dark:active:tw-bg-sq-field-disabled-gray',
|
|
4813
4813
|
].join(' ');
|
|
4814
4814
|
const activeBackgroundStyles = [
|
|
4815
4815
|
'active',
|
|
4816
|
-
'tw
|
|
4817
|
-
'tw
|
|
4818
|
-
'tw
|
|
4819
|
-
'
|
|
4820
|
-
'
|
|
4816
|
+
'tw-bg-sq-overlay-gray',
|
|
4817
|
+
'hover:tw-bg-sq-overlay-gray',
|
|
4818
|
+
'active:tw-bg-sq-overlay-gray',
|
|
4819
|
+
'dark:tw-bg-sq-dark-disabled-gray',
|
|
4820
|
+
'dark:hover:tw-border-sq-dark-disabled-gray',
|
|
4821
|
+
'dark:active:tw-bg-sq-dark-disabled-gray',
|
|
4821
4822
|
].join(' ');
|
|
4822
|
-
const bgStyles$3 = ['tw
|
|
4823
|
-
const disabledClasses$4 = ['tw
|
|
4823
|
+
const bgStyles$3 = ['tw-bg-sq-white', 'dark:tw-bg-sq-dark-background'].join(' ');
|
|
4824
|
+
const disabledClasses$4 = ['tw-opacity-50', 'tw-cursor-not-allowed'].join(' ');
|
|
4824
4825
|
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 })));
|
|
4825
4826
|
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, }) => {
|
|
4826
4827
|
let tooltipData = undefined;
|
|
@@ -4838,12 +4839,12 @@ const ToolbarButton = ({ isSmall = false, label, icon, secondIcon, forceSmallIco
|
|
|
4838
4839
|
onHide && onHide();
|
|
4839
4840
|
}
|
|
4840
4841
|
};
|
|
4841
|
-
return (jsxRuntime.jsxs(Root2$3, { defaultOpen: false, onOpenChange: onOpenChange, children: [jsxRuntime.jsx(Trigger$3, { id: id, className: `tw
|
|
4842
|
+
return (jsxRuntime.jsxs(Root2$3, { defaultOpen: false, onOpenChange: onOpenChange, children: [jsxRuntime.jsx(Trigger$3, { id: id, className: `tw-border-none tw-mx-[1.5px] first:tw-ml-0 last:tw-mr-0 ${isActive ? 'active' : ''}`, disabled: disabled, "data-testid": testId, onClick: (e) => {
|
|
4842
4843
|
onClick && onClick(e);
|
|
4843
|
-
}, children: jsxRuntime.jsxs("div", { ...tooltipData, className: `tw
|
|
4844
|
-
' tw
|
|
4845
|
-
'
|
|
4846
|
-
popoverBorderStyles, children: [hasArrow && (jsxRuntime.jsx(Arrow2$2, { asChild: true, children: jsxRuntime.jsx("div", { className: " tw
|
|
4844
|
+
}, children: jsxRuntime.jsxs("div", { ...tooltipData, className: `tw-flex tw-flex-col tw-items-center tw-rounded-md ${isSmall ? 'tw-py-[1px] 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 dark:tw-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", large: !isSmall && !label && !secondIcon && !forceSmallIcon, extraClassNames: `tw-text-sq-text-color dark:tw-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 dark:tw-text-sq-dark-text tw-ml-[3px] tw-text-[0.5rem]", type: "text" })) : undefined] }), !isSmall && (jsxRuntime.jsx("small", { className: "tw-text-sq-text-color dark:tw-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 +
|
|
4845
|
+
' tw-relative tw-z-[1000] tw-min-w-6 tw-p-[0.5rem] focus-visible:tw-outline-none tw-outline-none data-[state=open]:animate-in data-[state=closed]:animate-out' +
|
|
4846
|
+
' 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' +
|
|
4847
|
+
popoverBorderStyles, children: [hasArrow && (jsxRuntime.jsx(Arrow2$2, { asChild: true, children: jsxRuntime.jsx("div", { className: " tw-fill-transparent tw-bg-white tw-w-[15px] tw-h-[15px] tw-mt-[-7px] tw-rotate-45 dark:tw-bg-sq-dark-background tw-border-b tw-border-r tw-border-sq-disabled-gray dark:tw-border-gray-500" }) })), popoverContent] }) })) : undefined] }));
|
|
4847
4848
|
};
|
|
4848
4849
|
|
|
4849
4850
|
const setValidInputDimension = (width, height) => {
|
|
@@ -4860,24 +4861,24 @@ const setValidInputDimension = (width, height) => {
|
|
|
4860
4861
|
return inputStyle;
|
|
4861
4862
|
};
|
|
4862
4863
|
|
|
4863
|
-
const errorClasses$4 = 'tw
|
|
4864
|
+
const errorClasses$4 = 'tw-border-sq-danger-color';
|
|
4864
4865
|
const borderColorClasses$4 = [
|
|
4865
|
-
'tw
|
|
4866
|
-
'
|
|
4867
|
-
'
|
|
4868
|
-
'
|
|
4869
|
-
'
|
|
4870
|
-
'
|
|
4866
|
+
'tw-border-sq-disabled-gray',
|
|
4867
|
+
'dark:tw-border-sq-dark-disabled-gray',
|
|
4868
|
+
'dark:focus:tw-border-sq-color-dark-dark',
|
|
4869
|
+
'dark:active:tw-border-sq-color-dark-dark',
|
|
4870
|
+
'focus:tw-border-sq-color-dark',
|
|
4871
|
+
'active:tw-border-sq-color-dark',
|
|
4871
4872
|
].join(' ');
|
|
4872
|
-
const baseClasses$6 = 'tw
|
|
4873
|
-
'
|
|
4874
|
-
'
|
|
4875
|
-
'
|
|
4876
|
-
const darkTheme$3 = '
|
|
4877
|
-
const lightTheme$3 = 'tw
|
|
4873
|
+
const baseClasses$6 = 'tw-h-inputs tw-leading-normal tw-outline-none tw-py-1 tw-px-3' +
|
|
4874
|
+
' disabled:tw-pointer-events-none disabled:tw-bg-sq-light-gray disabled:dark:tw-bg-sq-dark-disabled-gray' +
|
|
4875
|
+
' disabled:tw-cursor-not-allowed tw-p-1 tw-border-solid tw-border tw-placeholder-gray-400' +
|
|
4876
|
+
' dark:tw-placeholder-sq-dark-text-lighter specTextField';
|
|
4877
|
+
const darkTheme$3 = 'dark:tw-bg-sq-dark-background dark:tw-text-sq-dark-text disabled:dark:tw-text-sq-dark-text-lighter';
|
|
4878
|
+
const lightTheme$3 = 'tw-text-sq-text-color disabled:tw-text-sq-darkish-gray';
|
|
4878
4879
|
const sizeClasses = {
|
|
4879
|
-
sm: 'tw
|
|
4880
|
-
lg: 'tw
|
|
4880
|
+
sm: 'tw-text-sm',
|
|
4881
|
+
lg: 'tw-text-xl',
|
|
4881
4882
|
};
|
|
4882
4883
|
/**
|
|
4883
4884
|
* Textfield.
|
|
@@ -4919,12 +4920,12 @@ const TextField = React.forwardRef((props, ref) => {
|
|
|
4919
4920
|
internalRef.current.value = `${value}`;
|
|
4920
4921
|
}
|
|
4921
4922
|
}, [value]);
|
|
4922
|
-
let borderRadius = 'tw
|
|
4923
|
+
let borderRadius = 'tw-rounded-md';
|
|
4923
4924
|
if (inputGroup === 'left') {
|
|
4924
|
-
borderRadius = 'tw
|
|
4925
|
+
borderRadius = 'tw-rounded-l-md tw-border-r-0 focus:tw-border-r' + ' active:tw-border-r';
|
|
4925
4926
|
}
|
|
4926
4927
|
else if (inputGroup === 'right') {
|
|
4927
|
-
borderRadius = 'tw
|
|
4928
|
+
borderRadius = 'tw-rounded-r-md tw-border-l-0 focus:tw-border-l active:tw-border-l';
|
|
4928
4929
|
}
|
|
4929
4930
|
const appliedClasses = `${baseClasses$6} ${sizeClasses[size]} ${extraClassNames} ${lightTheme$3} ${darkTheme$3} ${borderRadius} ${showError ? errorClasses$4 : borderColorClasses$4} `;
|
|
4930
4931
|
const inputProp = setValidInputDimension(inputWidth, inputHeight)
|
|
@@ -4937,18 +4938,18 @@ const TextField = React.forwardRef((props, ref) => {
|
|
|
4937
4938
|
inputLenghtProp.maxLength = maxLength;
|
|
4938
4939
|
if (minLength)
|
|
4939
4940
|
inputLenghtProp.minLength = minLength;
|
|
4940
|
-
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
|
|
4941
|
+
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-color tw-text-xs tw-mt-1", children: errorText })] }));
|
|
4941
4942
|
});
|
|
4942
4943
|
|
|
4943
|
-
const alignment = 'tw
|
|
4944
|
-
const labelClasses = 'tw
|
|
4945
|
-
const baseClasses$5 = 'tw
|
|
4946
|
-
'
|
|
4947
|
-
'
|
|
4948
|
-
'
|
|
4949
|
-
'
|
|
4950
|
-
const checkboxClasses = `tw
|
|
4951
|
-
const radioClasses = `tw
|
|
4944
|
+
const alignment = 'tw-flex';
|
|
4945
|
+
const labelClasses = 'tw-ml-1.5 tw-text-sm tw--mt-0.5';
|
|
4946
|
+
const baseClasses$5 = 'tw-border-1 tw-h-3.5 tw-w-3.5 focus:tw-ring-0 focus:tw-ring-offset-0 tw-outline-none focus:tw-outline-none' +
|
|
4947
|
+
' dark:tw-bg-sq-dark-background dark:tw-border-sq-dark-text dark:hover:tw-bg-sq-dark-background' +
|
|
4948
|
+
' checked:tw-text-white checked:tw-border-sq-text-color checked:hover:tw-border-sq-color-dark' +
|
|
4949
|
+
' checked:active:tw-border-sq-color-dark checked:focus:tw-border-sq-color-dark disabled:tw-border-sq-disabled-gray' +
|
|
4950
|
+
' dark:disabled:tw-border-sq-fairly-dark-gray dark:checked:focus:tw-bg-sq-dark-background';
|
|
4951
|
+
const checkboxClasses = `tw-form-checkbox tw-rounded ${baseClasses$5}`;
|
|
4952
|
+
const radioClasses = `tw-form-radio ${baseClasses$5}`;
|
|
4952
4953
|
/**
|
|
4953
4954
|
* Checkbox and Radio Box Component.
|
|
4954
4955
|
*/
|
|
@@ -4956,25 +4957,26 @@ const Checkbox = (props) => {
|
|
|
4956
4957
|
const { type = 'checkbox', value, disabled = false, label, onChange, onClick, onKeyDown, checked, defaultChecked, id, name, extraClassNames, extraLabelClassNames, testId, ...tooltipProps } = props;
|
|
4957
4958
|
const assignedId = id ?? 'checkbox_' + Math.random();
|
|
4958
4959
|
const tooltipData = getQTipData(tooltipProps);
|
|
4959
|
-
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
|
|
4960
|
-
|
|
4961
|
-
|
|
4962
|
-
};
|
|
4963
|
-
|
|
4964
|
-
|
|
4965
|
-
|
|
4966
|
-
'
|
|
4967
|
-
|
|
4968
|
-
|
|
4969
|
-
|
|
4970
|
-
const
|
|
4960
|
+
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 &&
|
|
4961
|
+
jsxRuntime.jsx("label", { htmlFor: assignedId, className: `${labelClasses} ${extraLabelClassNames} ${disabled
|
|
4962
|
+
? 'tw-cursor-not-allowed dark:tw-text-sq-fairly-dark-gray tw-text-sq-fairly-dark-gray'
|
|
4963
|
+
: 'tw-cursor-pointer tw-text-sq-text-color dark:tw-text-sq-dark-text'}`, children: label })] }));
|
|
4964
|
+
};
|
|
4965
|
+
|
|
4966
|
+
const baseClasses$4 = 'tw-leading-normal tw-outline-none tw-py-1 tw-px-3 tw-rounded-md tw-w-full' +
|
|
4967
|
+
' disabled:tw-pointer-events-none disabled:tw-bg-sq-light-gray disabled:dark:tw-bg-sq-dark-disabled-gray' +
|
|
4968
|
+
' disabled:tw-cursor-not-allowed tw-p-1 tw-border-solid tw-border tw-text-sm';
|
|
4969
|
+
const darkTheme$2 = 'dark:tw-bg-sq-dark-background dark:tw-text-sq-dark-text ' +
|
|
4970
|
+
'dark:tw-placeholder-sq-dark-text-lighter disabled:dark:tw-text-sq-dark-text-lighter';
|
|
4971
|
+
const lightTheme$2 = 'tw-text-sq-text-color tw-placeholder-gray-400 disabled:tw-text-sq-darkish-gray';
|
|
4972
|
+
const errorClasses$3 = 'tw-border-sq-danger-color';
|
|
4971
4973
|
const borderColorClasses$3 = [
|
|
4972
|
-
'tw
|
|
4973
|
-
'
|
|
4974
|
-
'
|
|
4975
|
-
'
|
|
4976
|
-
'
|
|
4977
|
-
'
|
|
4974
|
+
'tw-border-sq-disabled-gray',
|
|
4975
|
+
'dark:tw-border-sq-dark-disabled-gray',
|
|
4976
|
+
'dark:focus:tw-border-sq-color-dark-dark',
|
|
4977
|
+
'dark:active:tw-border-sq-color-dark-dark',
|
|
4978
|
+
'focus:tw-border-sq-color-dark',
|
|
4979
|
+
'active:tw-border-sq-color-dark',
|
|
4978
4980
|
].join(' ');
|
|
4979
4981
|
/**
|
|
4980
4982
|
* TextArea.
|
|
@@ -5023,25 +5025,25 @@ const TextArea = React.forwardRef(({ readonly = false, disabled = false, onChang
|
|
|
5023
5025
|
* display correctly.
|
|
5024
5026
|
*/
|
|
5025
5027
|
const Tooltip = ({ position = 'bottom', children, text, delay = DEFAULT_TOOL_TIP_DELAY, }) => {
|
|
5026
|
-
const arrowBaseClasses =
|
|
5027
|
-
const centerArrowVertically = '
|
|
5028
|
-
const centerArrowHorizontally = '
|
|
5029
|
-
const arrowRight = `${arrowBaseClasses} ${centerArrowVertically}
|
|
5030
|
-
|
|
5031
|
-
const arrowLeft = `${arrowBaseClasses} ${centerArrowVertically}
|
|
5032
|
-
|
|
5033
|
-
const arrowBottom = `${arrowBaseClasses} ${centerArrowHorizontally}
|
|
5034
|
-
|
|
5035
|
-
const arrowTop = `${arrowBaseClasses} ${centerArrowHorizontally}
|
|
5036
|
-
|
|
5028
|
+
const arrowBaseClasses = 'before:tw-content-[\'\'] before:tw-absolute before:tw-border-8';
|
|
5029
|
+
const centerArrowVertically = 'before:tw-top-1/2 before:-tw-translate-y-1/2';
|
|
5030
|
+
const centerArrowHorizontally = 'before:tw-left-1/2 before:-tw-translate-x-1/2';
|
|
5031
|
+
const arrowRight = `${arrowBaseClasses} ${centerArrowVertically} before:tw-right-[100%] before:tw-border-y-transparent
|
|
5032
|
+
before:tw-border-l-transparent before:tw-border-r-black`;
|
|
5033
|
+
const arrowLeft = `${arrowBaseClasses} ${centerArrowVertically} before:tw-left-[100%] before:tw-border-y-transparent
|
|
5034
|
+
before:tw-border-l-black before:tw-border-r-transparent`;
|
|
5035
|
+
const arrowBottom = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-top-4 before:tw-border-b-black
|
|
5036
|
+
before:tw-border-r-transparent before:tw-border-l-transparent before:tw-border-t-transparent`;
|
|
5037
|
+
const arrowTop = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-bottom-4 before:tw-border-b-transparent
|
|
5038
|
+
before:tw-border-t-black before:tw-border-l-transparent before:tw-border-r-transparent`;
|
|
5037
5039
|
const placements = {
|
|
5038
|
-
top:
|
|
5039
|
-
left:
|
|
5040
|
-
right: `tw
|
|
5041
|
-
bottom:
|
|
5040
|
+
top: `-tw-top-2 -tw-translate-y-full tw-left-1/2 -tw-translate-x-1/2 ${arrowTop}`,
|
|
5041
|
+
left: `-tw-translate-x-full -tw-left-3 -tw-translate-y-1/2 tw-top-1/2 ${arrowLeft}`,
|
|
5042
|
+
right: `tw-translate-x-full -tw-right-3 -tw-translate-y-1/2 tw-top-1/2 ${arrowRight}`,
|
|
5043
|
+
bottom: `-tw-bottom-2 tw-translate-y-full tw-left-1/2 -tw-translate-x-1/2 ${arrowBottom}`,
|
|
5042
5044
|
};
|
|
5043
|
-
return (jsxRuntime.jsxs("div", { className: "tw
|
|
5044
|
-
tw
|
|
5045
|
+
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 group-hover:tw-inline-block group-hover:tw-delay-[${delay}ms]
|
|
5046
|
+
tw-absolute tw-opacity-0 group-hover:tw-opacity-100 tw-rounded tw-bg-black tw-p-2 tw-text-xs tw-text-white ${placements[position]}`, children: text })] }));
|
|
5045
5047
|
};
|
|
5046
5048
|
|
|
5047
5049
|
/*! @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 */
|
|
@@ -7527,8 +7529,8 @@ const QTip = () => {
|
|
|
7527
7529
|
: positionTooltip();
|
|
7528
7530
|
}
|
|
7529
7531
|
};
|
|
7530
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { onMouseEnter: () => setOverTooltip(true), onMouseLeave: () => setOverTooltip(false), "data-testid": tooltipTestId, ref: tooltipRef, className: 'tw
|
|
7531
|
-
(show ? 'tw
|
|
7532
|
+
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-white tw-z-[9999] fade-in ' +
|
|
7533
|
+
(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-black", ref: tooltipArrowRef })] }) }));
|
|
7532
7534
|
};
|
|
7533
7535
|
|
|
7534
7536
|
function _typeof$1(o) {
|
|
@@ -13943,77 +13945,70 @@ var CreatableSelect = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
13943
13945
|
});
|
|
13944
13946
|
var CreatableSelect$1 = CreatableSelect;
|
|
13945
13947
|
|
|
13946
|
-
const baseClasses$3 = ['
|
|
13947
|
-
const containerStyles = ['tw
|
|
13948
|
-
const errorClasses$2 = 'tw
|
|
13949
|
-
const borderColorClasses$2 = ['tw
|
|
13950
|
-
const borderStyles$3 = ['tw
|
|
13948
|
+
const baseClasses$3 = ['focus:tw-ring-0', 'disabled:tw-cursor-not-allowed'].join(' ');
|
|
13949
|
+
const containerStyles = ['tw-bg-white', 'dark:tw-bg-sq-dark-background'].join(' ');
|
|
13950
|
+
const errorClasses$2 = 'tw-border-sq-danger-color';
|
|
13951
|
+
const borderColorClasses$2 = ['tw-border-sq-disabled-gray', 'dark:tw-border-sq-dark-disabled-gray'].join(' ');
|
|
13952
|
+
const borderStyles$3 = ['tw-border-solid', 'tw-border'].join(' ');
|
|
13951
13953
|
const borderActiveClasses = [
|
|
13952
|
-
'
|
|
13953
|
-
'
|
|
13954
|
-
'
|
|
13955
|
-
'
|
|
13956
|
-
'
|
|
13957
|
-
'
|
|
13954
|
+
'hover:tw-border-sq-color-dark',
|
|
13955
|
+
'focus-within:tw-border-sq-color-dark',
|
|
13956
|
+
'active:tw-border-sq-color-dark',
|
|
13957
|
+
'dark:hover:tw-border-sq-color-dark-dark',
|
|
13958
|
+
'dark:focus-within:tw-border-sq-color-dark-dark',
|
|
13959
|
+
'dark:active:tw-border-sq-color-dark-dark',
|
|
13958
13960
|
].join(' ');
|
|
13959
|
-
const textStyles = ['tw
|
|
13961
|
+
const textStyles = ['tw-text-sq-text-color', 'dark:tw-text-sq-dark-text', 'tw-text-sm'].join(' ');
|
|
13960
13962
|
const textActiveStyles = [
|
|
13961
|
-
'
|
|
13962
|
-
'tw
|
|
13963
|
-
'
|
|
13964
|
-
'tw:dark:text-sq-dark-disabled-gray',
|
|
13965
|
-
'tw:dark:hover:text-sq-theme-dark-dark',
|
|
13966
|
-
'tw:dark:focus:text-sq-theme-dark-dark',
|
|
13967
|
-
'tw:dark:active:text-sq-theme-dark-dark',
|
|
13968
|
-
'tw:hover:text-sq-theme-dark',
|
|
13969
|
-
'tw:dark:text-sq-dark-disabled-gray',
|
|
13970
|
-
'tw:dark:hover:text-sq-theme-dark-dark',
|
|
13963
|
+
'hover:tw-text-sq-color-dark',
|
|
13964
|
+
'dark:tw-text-sq-dark-disabled-gray',
|
|
13965
|
+
'dark:hover:tw-text-sq-color-dark-dark',
|
|
13971
13966
|
].join(' ');
|
|
13972
13967
|
const menuStyles = [
|
|
13973
|
-
'tw
|
|
13974
|
-
'tw
|
|
13975
|
-
'tw
|
|
13976
|
-
'tw
|
|
13977
|
-
'
|
|
13978
|
-
'tw
|
|
13979
|
-
'tw
|
|
13980
|
-
'tw
|
|
13968
|
+
'tw-border-solid',
|
|
13969
|
+
'tw-border',
|
|
13970
|
+
'tw-rounded-b',
|
|
13971
|
+
'tw-border-sq-disabled-gray',
|
|
13972
|
+
'dark:tw-border-sq-dark-disabled-gray',
|
|
13973
|
+
'tw-whitespace-nowrap',
|
|
13974
|
+
'tw-min-w-fit',
|
|
13975
|
+
'!tw-z-[9999]',
|
|
13981
13976
|
].join(' ');
|
|
13982
13977
|
const menuListStyles = [
|
|
13983
|
-
'tw
|
|
13984
|
-
'tw
|
|
13985
|
-
'
|
|
13986
|
-
'tw
|
|
13987
|
-
'tw
|
|
13978
|
+
'tw-rounded-b',
|
|
13979
|
+
'tw-bg-white',
|
|
13980
|
+
'dark:tw-bg-sq-dark-background',
|
|
13981
|
+
'tw-min-w-fit',
|
|
13982
|
+
'!tw-z-[9999]',
|
|
13988
13983
|
'specSelectMenu',
|
|
13989
13984
|
].join(' ');
|
|
13990
13985
|
const groupHeadingStyles = [
|
|
13991
|
-
'tw
|
|
13992
|
-
'
|
|
13993
|
-
'tw
|
|
13994
|
-
'tw
|
|
13995
|
-
'tw
|
|
13986
|
+
'tw-bg-sq-light-gray',
|
|
13987
|
+
'dark:tw-bg-sq-dark-disabled-gray',
|
|
13988
|
+
'tw-text-sq-darkish-gray',
|
|
13989
|
+
'tw-py-1',
|
|
13990
|
+
'tw-px-2.5',
|
|
13996
13991
|
'specSelectGroupHeading',
|
|
13997
13992
|
].join(' ');
|
|
13998
13993
|
const optionStyles = [
|
|
13999
|
-
'
|
|
14000
|
-
'
|
|
14001
|
-
'
|
|
14002
|
-
'tw
|
|
14003
|
-
'tw
|
|
13994
|
+
'hover:tw-bg-sq-gray-highlight',
|
|
13995
|
+
'hover:tw-cursor-pointer',
|
|
13996
|
+
'dark:hover:tw-bg-sq-gray-highlight-dark',
|
|
13997
|
+
'tw-py-1',
|
|
13998
|
+
'tw-px-2.5',
|
|
14004
13999
|
'specSelectOption',
|
|
14005
14000
|
].join(' ');
|
|
14006
|
-
const disabledClasses$3 = ['tw
|
|
14007
|
-
const dropDownIndicatorStyles = `tw
|
|
14008
|
-
const placeholderStyles = ['tw
|
|
14001
|
+
const disabledClasses$3 = ['tw-bg-sq-field-disabled-gray', '!tw-cursor-not-allowed', 'tw-opacity-50'].join(' ');
|
|
14002
|
+
const dropDownIndicatorStyles = `tw-text-sq-disabled-gray ${textActiveStyles} specOpenIt`;
|
|
14003
|
+
const placeholderStyles = ['tw-text-gray-400', 'dark:tw-text-sq-dark-text-lighter', 'specOpenSelect'].join(' ');
|
|
14009
14004
|
const multiValueStyles = [
|
|
14010
|
-
'tw
|
|
14011
|
-
'
|
|
14012
|
-
'tw
|
|
14013
|
-
'tw
|
|
14014
|
-
'tw
|
|
14015
|
-
'tw
|
|
14016
|
-
'tw
|
|
14005
|
+
'tw-bg-sq-disabled-gray',
|
|
14006
|
+
'dark:tw-bg-sq-multi-gray-dark',
|
|
14007
|
+
'tw-text-sm',
|
|
14008
|
+
'tw-py-0.5',
|
|
14009
|
+
'tw-px-1',
|
|
14010
|
+
'tw-m-0.5',
|
|
14011
|
+
'tw-rounded-sm',
|
|
14017
14012
|
'specOpenSelect',
|
|
14018
14013
|
].join(' ');
|
|
14019
14014
|
/**
|
|
@@ -14078,38 +14073,38 @@ const Select = ({ options, value, placeholder = 'select', noOptionsMessage = 'no
|
|
|
14078
14073
|
filterOption: filterOption ? filterOption : filterConfig ? createFilter(filterConfig) : undefined,
|
|
14079
14074
|
classNames: {
|
|
14080
14075
|
control: ({ menuIsOpen }) => {
|
|
14081
|
-
let border = menuIsOpen ? 'tw
|
|
14076
|
+
let border = menuIsOpen ? 'tw-rounded-t-md' : 'tw-rounded-md';
|
|
14082
14077
|
// if it's on the left side of the input group make sure the right side is straight and not curved
|
|
14083
14078
|
if (inputGroup === 'left') {
|
|
14084
|
-
border = menuIsOpen ? 'tw
|
|
14079
|
+
border = menuIsOpen ? 'tw-rounded-tl-md' : 'tw-rounded-l-md';
|
|
14085
14080
|
}
|
|
14086
14081
|
else if (inputGroup === 'right') {
|
|
14087
|
-
border = menuIsOpen ? 'tw
|
|
14082
|
+
border = menuIsOpen ? 'tw-rounded-tr-md' : 'tw-rounded-r-md';
|
|
14088
14083
|
}
|
|
14089
14084
|
const appliedClasses = `${borderStyles$3} ${isDisabled ? '' : borderActiveClasses} ${border} ${showError ? errorClasses$2 : borderColorClasses$2} ${small ? 'reactSelectMinHeightSmall' : 'reactSelectMinHeight'} ${controlClassNames}`;
|
|
14090
|
-
return `${appliedClasses} ${baseClasses$3} ${containerStyles} specSelectControl ${isDisabled ? disabledClasses$3 : ''} ${small ? 'tw
|
|
14085
|
+
return `${appliedClasses} ${baseClasses$3} ${containerStyles} specSelectControl ${isDisabled ? disabledClasses$3 : ''} ${small ? 'tw-pl-2 tw-pr-1' : 'tw-pl-2.5 tw-pr-1.5'}`;
|
|
14091
14086
|
},
|
|
14092
14087
|
placeholder: () => placeholderStyles,
|
|
14093
14088
|
container: ({ selectProps }) => {
|
|
14094
|
-
const containerBorderStyles = selectProps?.menuIsOpen ? 'tw
|
|
14095
|
-
return `${textStyles} ${extraClassNames} ${containerBorderStyles} tw
|
|
14089
|
+
const containerBorderStyles = selectProps?.menuIsOpen ? 'tw-rounded-t-md' : 'tw-rounded-md';
|
|
14090
|
+
return `${textStyles} ${extraClassNames} ${containerBorderStyles} !tw-pointer-events-auto`;
|
|
14096
14091
|
},
|
|
14097
14092
|
input: () => textStyles + ' specSelectInput',
|
|
14098
14093
|
menuList: () => menuListStyles,
|
|
14099
14094
|
menu: () => menuStyles,
|
|
14100
|
-
menuPortal: () => 'tw
|
|
14095
|
+
menuPortal: () => '!tw-z-[9000]',
|
|
14101
14096
|
dropdownIndicator: () => dropDownIndicatorStyles,
|
|
14102
14097
|
option: ({ isSelected, isDisabled }) => {
|
|
14103
14098
|
let classes = optionStyles;
|
|
14104
14099
|
if (isDisabled) {
|
|
14105
14100
|
classes += ' specDisabledOption ';
|
|
14106
14101
|
}
|
|
14107
|
-
return isSelected ? classes + ' tw
|
|
14102
|
+
return isSelected ? classes + ' tw-bg-sq-colored-hover dark:tw-bg-sq-colored-hover-dark' : classes;
|
|
14108
14103
|
},
|
|
14109
14104
|
singleValue: () => 'specOpenSelect',
|
|
14110
14105
|
multiValue: () => multiValueStyles,
|
|
14111
|
-
multiValueRemove: () => '
|
|
14112
|
-
clearIndicator: () => 'tw
|
|
14106
|
+
multiValueRemove: () => 'hover:tw-text-sq-danger-color specSelectMultiValueRemove',
|
|
14107
|
+
clearIndicator: () => 'tw-text-sq-disabled-gray hover:tw-text-sq-danger-color specClearSelect',
|
|
14113
14108
|
group: () => 'specSelectGroup',
|
|
14114
14109
|
groupHeading: () => groupHeadingStyles,
|
|
14115
14110
|
},
|
|
@@ -14499,11 +14494,11 @@ var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
|
|
|
14499
14494
|
const Dialog = Root$4;
|
|
14500
14495
|
const DialogPortal = Portal$1;
|
|
14501
14496
|
const DialogClose = Close;
|
|
14502
|
-
const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => (jsxRuntime.jsxs(DialogPortal, { children: [jsxRuntime.jsx("div", { className: "tw
|
|
14503
|
-
tw
|
|
14504
|
-
tw
|
|
14497
|
+
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 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0\n 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
|
|
14498
|
+
tw-gap-4 tw-border tw-bg-sq-white dark:tw-bg-sq-dark-background tw-p-6 tw-shadow-lg tw-duration-200
|
|
14499
|
+
tw-rounded-lg ${className}`, ...props, children: [jsxRuntime.jsx(DialogTitle$1, { className: "tw-hidden" }), children] })] })));
|
|
14505
14500
|
DialogContent.displayName = Content$2.displayName;
|
|
14506
|
-
const DialogHeader = (props) => (jsxRuntime.jsx("div", { className: "tw
|
|
14501
|
+
const DialogHeader = (props) => (jsxRuntime.jsx("div", { className: "tw-w-full tw-justify-between", children: jsxRuntime.jsx("div", { ...props }) }));
|
|
14507
14502
|
DialogHeader.displayName = 'DialogHeader';
|
|
14508
14503
|
const DialogFooter = (props) => jsxRuntime.jsx("div", { ...props });
|
|
14509
14504
|
DialogFooter.displayName = 'DialogFooter';
|
|
@@ -14541,26 +14536,26 @@ const Modal = ({ titleIcon, title = 'Modal title example', titleSuffixLabel, sub
|
|
|
14541
14536
|
let titleIconElement = jsxRuntime.jsx(jsxRuntime.Fragment, {});
|
|
14542
14537
|
if (titleIcon) {
|
|
14543
14538
|
if (typeof titleIcon === 'string') {
|
|
14544
|
-
titleIconElement = (jsxRuntime.jsx(Icon, { icon: titleIcon, testId: "modalTitleIcon", extraClassNames: "tw
|
|
14539
|
+
titleIconElement = (jsxRuntime.jsx(Icon, { icon: titleIcon, testId: "modalTitleIcon", extraClassNames: "tw-flex tw-text-xl tw-mt-1" }));
|
|
14545
14540
|
}
|
|
14546
14541
|
else {
|
|
14547
|
-
titleIconElement = jsxRuntime.jsx("div", { className: "tw
|
|
14542
|
+
titleIconElement = jsxRuntime.jsx("div", { className: "tw-mt-1.5", children: titleIcon });
|
|
14548
14543
|
}
|
|
14549
14544
|
}
|
|
14550
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [titleIcon && titleIconPosition === 'left' ? jsxRuntime.jsx("div", { className: "tw
|
|
14545
|
+
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-color 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, {})] }));
|
|
14551
14546
|
};
|
|
14552
|
-
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
|
|
14553
|
-
'tw
|
|
14554
|
-
'tw
|
|
14555
|
-
'tw
|
|
14556
|
-
'tw
|
|
14557
|
-
'tw
|
|
14558
|
-
'tw
|
|
14559
|
-
'tw
|
|
14560
|
-
'tw
|
|
14561
|
-
'tw
|
|
14562
|
-
'tw
|
|
14563
|
-
}, dialogClassName), children: [jsxRuntime.jsxs(DialogHeader, { className: "modal-header tw
|
|
14547
|
+
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 dark:tw-text-sq-dark-text !tw-gap-0`, {
|
|
14548
|
+
'tw-max-w-xs': size === 'xs',
|
|
14549
|
+
'tw-max-w-sm': size === 'sm',
|
|
14550
|
+
'tw-max-w-md': size === 'md',
|
|
14551
|
+
'tw-max-w-lg': size === 'lg',
|
|
14552
|
+
'tw-max-w-xl': size === 'xl',
|
|
14553
|
+
'tw-max-w-2xl': size === '2xl',
|
|
14554
|
+
'tw-max-w-3xl': size === '3xl',
|
|
14555
|
+
'tw-max-w-4xl': size === '4xl',
|
|
14556
|
+
'tw-max-w-5xl': size === '5xl',
|
|
14557
|
+
'tw-max-w-6xl': size === '6xl',
|
|
14558
|
+
}, dialogClassName), children: [jsxRuntime.jsxs(DialogHeader, { className: "modal-header tw-flex tw-w-full tw-justify-between tw-border-sq-disabled-gray\n dark:tw-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: "[&:has(:focus-visible)]:none tw-opacity-70 tw-bg-transparent hover:tw-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, {}));
|
|
14564
14559
|
};
|
|
14565
14560
|
|
|
14566
14561
|
function createCollection(name) {
|
|
@@ -15018,11 +15013,11 @@ const Tabs = ({ tabs, defaultActiveTab, activeTab, onTabSelect, extraClassNames,
|
|
|
15018
15013
|
return;
|
|
15019
15014
|
onTabSelect && onTabSelect(tabId);
|
|
15020
15015
|
};
|
|
15021
|
-
return (jsxRuntime.jsxs(Root2$2, { className: `tw
|
|
15022
|
-
? 'tw
|
|
15023
|
-
: '
|
|
15024
|
-
? '
|
|
15025
|
-
: '
|
|
15016
|
+
return (jsxRuntime.jsxs(Root2$2, { className: `tw-flex tw-flex-col tw-min-w-[300px] tw-max-w-full tw-flex-grow focus-visible:tw-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 dark:tw-bg-sq-dark-background tw-h-[25px] focus-visible:tw-outline-none tw-min-w-[100px] tw-px-4 tw-border-solid dark:tw-border-gray-700 tw-flex tw-flex-1 tw-justify-center tw-items-center tw-border-r-[2px] last:tw-border-r-0 ${stretchTabs ? '' : 'tw-max-w-max tw-min-w-fit'} ${tabExtraClassNames || ''} ${activeTab === id
|
|
15017
|
+
? 'tw-border-b-sq-color-dark dark:tw-border-b-sq-color-dark tw-border-b-[3px]'
|
|
15018
|
+
: 'hover:tw-bg-sq-light-gray tw-border-b-[1px] hover:dark:tw-bg-gray-700'}`, "data-testid": tabsTestId, disabled: disabled, value: id, children: jsxRuntime.jsxs("span", { className: "tw-flex tw-items-center tw-overflow-hidden tw-pb-[3px]", 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
|
|
15019
|
+
? 'dark:tw-text-sq-dark-text tw-text-gray-500'
|
|
15020
|
+
: 'dark:tw-text-sq-color-dark-dark tw-text-sq-color-dark'} ${tabLabelExtraClassNames}`, children: label })] }) }, `${label}-${id}-${index}`))) }), tabs.map((tab, index) => (jsxRuntime.jsx(Content$1, { className: `tw-bg-sq-white dark:tw-bg-sq-dark-background tw-overflow-y-auto -tw-mt-[1px] tw-border-t-[1px] dark:tw-border-gray-700 tw-z-[500] tw-flex tw-flex-col tw-flex-grow focus-visible:tw-outline-none ${tab.tabContentExtraClassNames || ''}`, value: tab.id, children: tab.content }, `${tab.label}_${index}_content`)))] }));
|
|
15026
15021
|
};
|
|
15027
15022
|
|
|
15028
15023
|
var COLLAPSIBLE_NAME = "Collapsible";
|
|
@@ -15447,18 +15442,18 @@ var Trigger2 = AccordionTrigger;
|
|
|
15447
15442
|
var Content2$2 = AccordionContent;
|
|
15448
15443
|
|
|
15449
15444
|
const Accordion = ({ accordionItems, defaultValue, value, onItemSelect, disabled, extraClassNames, testId, }) => {
|
|
15450
|
-
return (jsxRuntime.jsx(Root2$1, { className: `tw
|
|
15445
|
+
return (jsxRuntime.jsx(Root2$1, { className: `tw-rounded-md tw-w-full focus-visible:tw-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-bg-transparent 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 focus-visible:tw-outline-none`, children: item.trigger }), jsxRuntime.jsx(Content2$2, { className: `data-[state=open]:tw-animate-slideDown data-[state=closed]:tw-animate-slideUp tw-overflow-hidden focus-visible:tw-outline-none ${item.contentClassNames || ''}`, children: item.content })] }, item.value))) }));
|
|
15451
15446
|
};
|
|
15452
15447
|
|
|
15453
|
-
const bgStyles$2 = ['tw
|
|
15448
|
+
const bgStyles$2 = ['tw-bg-sq-white', 'dark:tw-bg-sq-dark-background'].join(' ');
|
|
15454
15449
|
const borderStyles$2 = [
|
|
15455
|
-
'tw
|
|
15456
|
-
'tw
|
|
15457
|
-
'tw
|
|
15458
|
-
'tw
|
|
15459
|
-
'
|
|
15450
|
+
'tw-border-solid',
|
|
15451
|
+
'tw-border',
|
|
15452
|
+
'tw-rounded-popover',
|
|
15453
|
+
'tw-border-sq-disabled-gray',
|
|
15454
|
+
'dark:tw-border-gray-500',
|
|
15460
15455
|
].join(' ');
|
|
15461
|
-
const disabledClasses$2 = ['tw
|
|
15456
|
+
const disabledClasses$2 = ['tw-opacity-50', 'tw-cursor-not-allowed'].join(' ');
|
|
15462
15457
|
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 }) => {
|
|
15463
15458
|
const tooltipData = getQTipData(tooltipProps);
|
|
15464
15459
|
const timeout = React.useRef(null);
|
|
@@ -15489,12 +15484,12 @@ const ButtonWithPopover = ({ children, trigger, id, hasArrow, extraTriggerClassN
|
|
|
15489
15484
|
};
|
|
15490
15485
|
React__namespace.useEffect(() => clearHoverTimeout, []);
|
|
15491
15486
|
const renderContent = () => {
|
|
15492
|
-
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: "
|
|
15493
|
-
|
|
15494
|
-
${extraPopoverClassNames || ''}`, children: [hasArrow && (jsxRuntime.jsx(Arrow2$2, { asChild: true, children: jsxRuntime.jsx("div", { className: "tw
|
|
15487
|
+
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 focus-visible:tw-outline-none tw-outline-none data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out
|
|
15488
|
+
data-[side=top]:tw-animate-slideDownAndFade data-[side=right]:tw-animate-slideLeftAndFade data-[side=bottom]:tw-animate-slideUpAndFade data-[side=left]:tw-animate-slideRightAndFade tw-text-sq-text-color
|
|
15489
|
+
${extraPopoverClassNames || ''}`, children: [hasArrow && (jsxRuntime.jsx(Arrow2$2, { asChild: true, children: jsxRuntime.jsx("div", { className: "tw-fill-transparent tw-bg-white tw-w-[15px] tw-h-[15px] tw-mt-[-7px] tw-rotate-45 dark:tw-bg-sq-dark-background tw-border-b tw-border-r tw-border-sq-disabled-gray dark:tw-border-gray-500" }) })), children] }) }));
|
|
15495
15490
|
};
|
|
15496
15491
|
const renderPopover = (popoverOpenState) => {
|
|
15497
|
-
return (jsxRuntime.jsxs(Root2$3, { open: popoverOpenState, defaultOpen: false, onOpenChange: onOpenChange, children: [trigger ? (jsxRuntime.jsx(Trigger$3, { id: id, asChild: isTriggerAsChild, className: `
|
|
15492
|
+
return (jsxRuntime.jsxs(Root2$3, { open: popoverOpenState, defaultOpen: false, onOpenChange: onOpenChange, children: [trigger ? (jsxRuntime.jsx(Trigger$3, { id: id, asChild: isTriggerAsChild, className: `focus-visible:tw-outline-none tw-outline-none ${shouldTriggerFullWidth ? 'tw-w-full tw-h-full' : ''}`, disabled: disabled, children: jsxRuntime.jsx("div", { ...tooltipData, onMouseOver: onHoverStart, onMouseOut: onHoverEnd, className: `tw-bg-transparent focus-visible:tw-outline-none tw-outline-none ${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()] }));
|
|
15498
15493
|
};
|
|
15499
15494
|
return isHoverEnabled ? renderPopover(isHoveredOpen) : renderPopover(isOpen);
|
|
15500
15495
|
};
|
|
@@ -16559,65 +16554,65 @@ var SubTrigger2 = DropdownMenuSubTrigger;
|
|
|
16559
16554
|
var SubContent2 = DropdownMenuSubContent;
|
|
16560
16555
|
|
|
16561
16556
|
const borderStyles$1 = [
|
|
16562
|
-
'tw
|
|
16563
|
-
'tw
|
|
16564
|
-
'tw
|
|
16565
|
-
'tw
|
|
16566
|
-
'
|
|
16557
|
+
'tw-border-solid',
|
|
16558
|
+
'tw-border',
|
|
16559
|
+
'tw-rounded-popover',
|
|
16560
|
+
'tw-border-sq-disabled-gray',
|
|
16561
|
+
'dark:tw-border-gray-500',
|
|
16567
16562
|
].join(' ');
|
|
16568
|
-
const bgStyles$1 = ['tw
|
|
16569
|
-
const disabledClasses$1 = ['tw
|
|
16563
|
+
const bgStyles$1 = ['tw-bg-sq-white', 'dark:tw-bg-sq-dark-background'].join(' ');
|
|
16564
|
+
const disabledClasses$1 = ['tw-opacity-50', 'tw-cursor-not-allowed'].join(' ');
|
|
16570
16565
|
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 }) => {
|
|
16571
16566
|
const tooltipData = getQTipData(tooltipProps);
|
|
16572
|
-
return (jsxRuntime.jsxs(Root2, { defaultOpen: false, open: isOpen, onOpenChange: onOpenChange, modal: keepFocusInsideDropdown, children: [jsxRuntime.jsx(Trigger, { id: id, className: `tw
|
|
16567
|
+
return (jsxRuntime.jsxs(Root2, { defaultOpen: false, open: isOpen, onOpenChange: onOpenChange, modal: keepFocusInsideDropdown, children: [jsxRuntime.jsx(Trigger, { id: id, className: `tw-border-none focus-visible:tw-outline-none focus:tw-outline-none focus-within:tw-outline-none`, disabled: disabled, children: jsxRuntime.jsx("div", { ...tooltipData, className: `tw-bg-transparent tw-flex tw-flex-col tw-items-center focus-visible:tw-outline-none focus:tw-outline-none focus-within:tw-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: "focus-visible:tw-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 focus-visible:tw-outline-none tw-outline-none data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out forceFont data-[side=top]:tw-animate-slideDownAndFade data-[side=right]:tw-animate-slideLeftAndFade data-[side=bottom]:tw-animate-slideUpAndFade data-[side=left]:tw-animate-slideRightAndFade ${borderStyles$1} ${contentExtraClassNames}`, children: [hasArrow && (jsxRuntime.jsx(Arrow2, { asChild: true, children: jsxRuntime.jsx("div", { className: " tw-fill-transparent tw-bg-white tw-w-[15px] tw-h-[15px] tw-rotate-45 dark:tw-bg-sq-dark-background tw-border-b tw-border-r tw-border-sq-disabled-gray dark:tw-border-gray-500 tw-mt-[-7px]" }) })), dropdownItems.map((item, index) => {
|
|
16573
16568
|
const tooltipData = getQTipData(item);
|
|
16574
16569
|
if (item.isLabel) {
|
|
16575
|
-
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
|
|
16570
|
+
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 dark:tw-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 dark:tw-text-sq-white'} tw-not-italic tw-font-normal ${item.labelClasses}`, children: item.label })] }, (item.id || '') + index));
|
|
16576
16571
|
}
|
|
16577
16572
|
if (Array.isArray(item.subMenuItems) && item.subMenuItems.length > 0) {
|
|
16578
|
-
return (jsxRuntime.jsxs(Sub2, { children: [jsxRuntime.jsxs(SubTrigger2, { id: id, className: `tw
|
|
16579
|
-
? 'tw
|
|
16580
|
-
: 'tw
|
|
16581
|
-
return (jsxRuntime.jsxs(Item2, { onSelect: subItem.onClick, "data-qtip-text": subItem.tooltip, className: "tw
|
|
16582
|
-
? 'tw
|
|
16583
|
-
: 'tw
|
|
16573
|
+
return (jsxRuntime.jsxs(Sub2, { children: [jsxRuntime.jsxs(SubTrigger2, { id: id, className: `tw-cursor-pointer tw-flex tw-justify-between dark:tw-text-sq-white hover:tw-bg-sq-gray-highlight dark:hover:tw-bg-sq-gray-highlight-dark tw-leading-none tw-items-center tw-h-[27px] tw-pl-[19px] tw-relative tw-select-none tw-outline-none data-[disabled]:tw-pointer-events-none ${item.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
|
|
16574
|
+
? '!tw-text-sq-disabled-gray'
|
|
16575
|
+
: 'tw-text-sq-text-color dark:tw-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, { small: true, icon: "fc-arrow-dropdown -tw-rotate-90", extraClassNames: `${item.disabled ? 'tw-text-sq-disabled-gray' : 'tw-text-sq-text-color dark:tw-text-sq-white'} tw-w-[18px] tw-ml-4 tw-text-[0.5rem] tw-justify-center tw-flex` })] }), jsxRuntime.jsx(Portal2, { children: jsxRuntime.jsx(SubContent2, { className: "focus-visible:tw-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 focus-visible:tw-outline-none tw-outline-none data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out forceFont data-[side=top]:tw-animate-slideDownAndFade data-[side=right]:tw-animate-slideLeftAndFade data-[side=bottom]:tw-animate-slideUpAndFade data-[side=left]:tw-animate-slideRightAndFade ${borderStyles$1}`, children: item.subMenuItems.map((subItem, subIndex) => {
|
|
16576
|
+
return (jsxRuntime.jsxs(Item2, { onSelect: subItem.onClick, "data-qtip-text": subItem.tooltip, className: "tw-cursor-pointer tw-flex dark:tw-text-sq-white hover:tw-bg-sq-gray-highlight dark:hover:tw-bg-sq-gray-highlight-dark tw-leading-none tw-items-center tw-h-[27px] tw-px-[19px] tw-relative tw-select-none tw-outline-none data-[disabled]:tw-pointer-events-none", disabled: subItem.disabled, 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
|
|
16577
|
+
? 'tw-text-sq-disabled-gray'
|
|
16578
|
+
: 'tw-text-sq-text-color dark:tw-text-sq-white'} tw-not-italic tw-font-normal ${item.labelClasses}`, children: subItem.label })] }, subItem.label + subIndex));
|
|
16584
16579
|
}) }) }) })] }, (item.id || item.icon || '') + index));
|
|
16585
16580
|
}
|
|
16586
16581
|
return (jsxRuntime.jsxs("div", { ...tooltipData, children: [jsxRuntime.jsxs(Item2, { "data-customid": item.itemCustomId, onSelect: (e) => {
|
|
16587
16582
|
item.onClick(e);
|
|
16588
|
-
}, className: `tw
|
|
16583
|
+
}, className: `tw-cursor-pointer tw-flex dark:tw-text-sq-white hover:tw-bg-sq-gray-highlight dark:hover:tw-bg-sq-gray-highlight-dark tw-leading-none tw-items-center tw-min-h-[27px] tw-px-[19px] tw-relative tw-select-none tw-outline-none data-[disabled]:tw-pointer-events-none ${item.itemExtraClassNames || ''}`, "data-testid": item.testId, disabled: item.disabled, 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 dark:tw-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-[1px] tw-bg-sq-disabled-gray dark:tw-bg-gray-500 tw-my-[8px]" }))] }, (item.id || '') + index));
|
|
16589
16584
|
})] }) }) })] }));
|
|
16590
16585
|
};
|
|
16591
16586
|
|
|
16592
|
-
const baseClasses$2 = 'tw
|
|
16593
|
-
' tw
|
|
16594
|
-
const darkTheme$1 = '
|
|
16595
|
-
const lightTheme$1 = 'tw
|
|
16596
|
-
const errorClasses$1 = 'tw
|
|
16597
|
-
const borderColorClasses$1 = 'tw
|
|
16587
|
+
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' +
|
|
16588
|
+
' tw-border-solid tw-border tw-text-sm tw-flex tw-flex-col tw-justify-center tw-items-center';
|
|
16589
|
+
const darkTheme$1 = 'dark:tw-bg-sq-colored-hover-dark dark:tw-text-sq-dark-text';
|
|
16590
|
+
const lightTheme$1 = 'tw-text-sq-text-color tw-bg-sq-colored-hover';
|
|
16591
|
+
const errorClasses$1 = 'tw-border-sq-danger-color';
|
|
16592
|
+
const borderColorClasses$1 = 'tw-border-sq-color-dark';
|
|
16598
16593
|
/**
|
|
16599
16594
|
* Alert.
|
|
16600
16595
|
*/
|
|
16601
16596
|
const Alert = ({ children, dismissible = true, onClose, show = true, variant, testId = 'alert-id', id, extraClassNames, ...tooltipProps }) => {
|
|
16602
16597
|
const appliedTheme = {
|
|
16603
16598
|
theme: `${lightTheme$1} ${darkTheme$1}`,
|
|
16604
|
-
formulaError: 'tw
|
|
16605
|
-
danger: 'tw
|
|
16606
|
-
warning: 'tw
|
|
16607
|
-
gray: 'tw
|
|
16599
|
+
formulaError: 'tw-text-red-800 tw-bg-red-200 !tw-rounded-[4px]',
|
|
16600
|
+
danger: 'tw-text-sq-text-color tw-bg-sq-danger-color',
|
|
16601
|
+
warning: 'tw-bg-sq-bg-warning-color tw-text-sq-text-color',
|
|
16602
|
+
gray: 'tw-bg-sq-light-gray tw-text-sq-text-color dark:tw-bg-sq-worksheetspanel-gray-dark dark:tw-text-sq-dark-text',
|
|
16608
16603
|
};
|
|
16609
16604
|
const appliedBorderTheme = {
|
|
16610
16605
|
theme: borderColorClasses$1,
|
|
16611
16606
|
danger: errorClasses$1,
|
|
16612
|
-
warning: 'tw
|
|
16613
|
-
gray: 'tw
|
|
16614
|
-
formulaError: 'tw
|
|
16607
|
+
warning: 'tw-border-none',
|
|
16608
|
+
gray: 'tw-border-sq-darkish-gray',
|
|
16609
|
+
formulaError: 'tw-border-red-100',
|
|
16615
16610
|
};
|
|
16616
16611
|
const appliedClasses = `${baseClasses$2} ${appliedTheme[variant]} ${extraClassNames} ${appliedBorderTheme[variant]}`;
|
|
16617
16612
|
if (!show) {
|
|
16618
16613
|
return jsxRuntime.jsx("div", {});
|
|
16619
16614
|
}
|
|
16620
|
-
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
|
|
16615
|
+
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 dark:tw-text-sq-dark-text' : ''}`, testId: `${testId}-close-btn`, onClick: onClose, ...tooltipProps }))] }));
|
|
16621
16616
|
};
|
|
16622
16617
|
|
|
16623
16618
|
/**
|
|
@@ -16636,40 +16631,47 @@ const Alert = ({ children, dismissible = true, onClose, show = true, variant, te
|
|
|
16636
16631
|
* @param tooltipProps - props to pass to the tooltip
|
|
16637
16632
|
*/
|
|
16638
16633
|
const SvgIcon = ({ onClick, icon, color, type = 'default', extraClassNames, viewBox = '0 0 19 19', id, testId, customId, ...tooltipProps }) => {
|
|
16639
|
-
const appliedClassNames = `${onClick ? 'tw
|
|
16640
|
-
tw
|
|
16634
|
+
const appliedClassNames = `${onClick ? 'tw-cursor-pointer' : ''} ${extraClassNames} focus:tw-outline-none focus-visible:tw-outline-none
|
|
16635
|
+
tw-outline-none`;
|
|
16641
16636
|
const tooltipData = getQTipData(tooltipProps);
|
|
16642
16637
|
const appliedType = type === 'default' ? 'currentColor' : 'rgb(var(--sq-icon))';
|
|
16643
|
-
return (jsxRuntime.jsx("div", { onClick: onClick, ...tooltipData, className: `svgContainer ${appliedClassNames}`, children: jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: `tw
|
|
16638
|
+
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 dark:tw-text-white`, viewBox: viewBox, fill: color ? color : appliedType, "data-testid": testId, children: jsxRuntime.jsx("path", { d: getSvgIconPath(icon) }) }) }));
|
|
16644
16639
|
};
|
|
16645
16640
|
|
|
16646
16641
|
const SeeqActionDropdownItem = (item) => {
|
|
16647
16642
|
let renderIcon = jsxRuntime.jsx(jsxRuntime.Fragment, {});
|
|
16648
16643
|
if (item.icon) {
|
|
16649
|
-
renderIcon = isSvgIcon(item.icon) ? (jsxRuntime.jsx(SvgIcon, { icon: item.icon, extraClassNames:
|
|
16644
|
+
renderIcon = isSvgIcon(item.icon) ? (jsxRuntime.jsx(SvgIcon, { icon: item.icon, extraClassNames: 'tw-rounded-[3px] tw-h-8 tw-w-8 tw-p-1 tw-flex tw-justify-center tw-items-center tw-bg-sq-color-dark' +
|
|
16645
|
+
' dark:tw-text-sq-white tw-text-[22px] tw-text-sq-white ' +
|
|
16646
|
+
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 ' +
|
|
16647
|
+
item.iconExtraClassNames }));
|
|
16650
16648
|
}
|
|
16651
|
-
return (jsxRuntime.jsxs("div", { className: "tw
|
|
16649
|
+
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: [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 })] }));
|
|
16652
16650
|
};
|
|
16653
16651
|
const ViewWorkbench = (item) => {
|
|
16654
16652
|
let renderIcon = jsxRuntime.jsx(jsxRuntime.Fragment, {});
|
|
16655
16653
|
if (item.icon) {
|
|
16656
|
-
renderIcon = isSvgIcon(item.icon) ? (jsxRuntime.jsx(SvgIcon, { icon: item.icon, extraClassNames: 'tw
|
|
16654
|
+
renderIcon = isSvgIcon(item.icon) ? (jsxRuntime.jsx(SvgIcon, { icon: item.icon, extraClassNames: 'tw-flex tw-w-5 tw-justify-center tw-items-center tw-text-[1.25rem] dark:tw-text-sq-white' +
|
|
16655
|
+
' tw-text-sq-text-color ' +
|
|
16656
|
+
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' +
|
|
16657
|
+
' tw-text-sq-text-color ' +
|
|
16658
|
+
item.iconExtraClassNames }));
|
|
16657
16659
|
}
|
|
16658
|
-
return (jsxRuntime.jsx("div", { className: "tw
|
|
16660
|
+
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: [renderIcon, jsxRuntime.jsx("div", { className: "tw-text-[0.8125rem]", children: item.display })] }) }));
|
|
16659
16661
|
};
|
|
16660
16662
|
const InsertSeeqContent = (item) => {
|
|
16661
|
-
return (jsxRuntime.jsxs("div", { className: "tw
|
|
16663
|
+
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 dark:tw-text-sq-dark-text", children: [jsxRuntime.jsx("h5", { className: "tw-text-[1rem] tw-font-medium tw-text-sq-color-dark tw-leading-[18px]", children: item.display }), jsxRuntime.jsx("div", { className: "tw-text-[0.8125rem] tw-text-sq-text-color dark:tw-text-sq-dark-text !tw-mt-1", children: item.text })] }));
|
|
16662
16664
|
};
|
|
16663
16665
|
|
|
16664
16666
|
const borderStyles = [
|
|
16665
|
-
'tw
|
|
16666
|
-
'tw
|
|
16667
|
-
'tw
|
|
16668
|
-
'tw
|
|
16669
|
-
'
|
|
16667
|
+
'tw-border-solid',
|
|
16668
|
+
'tw-border',
|
|
16669
|
+
'tw-rounded-md',
|
|
16670
|
+
'tw-border-sq-disabled-gray',
|
|
16671
|
+
'dark:tw-border-gray-500',
|
|
16670
16672
|
].join(' ');
|
|
16671
|
-
const bgStyles = ['tw
|
|
16672
|
-
const disabledClasses = ['tw
|
|
16673
|
+
const bgStyles = ['tw-bg-sq-white', 'dark:tw-bg-sq-dark-background'].join(' ');
|
|
16674
|
+
const disabledClasses = ['tw-opacity-50', 'tw-cursor-not-allowed'].join(' ');
|
|
16673
16675
|
const renderItem = (variant, item) => {
|
|
16674
16676
|
switch (variant) {
|
|
16675
16677
|
case 'create-workbench':
|
|
@@ -16684,31 +16686,31 @@ const renderItem = (variant, item) => {
|
|
|
16684
16686
|
};
|
|
16685
16687
|
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 }) => {
|
|
16686
16688
|
const tooltipData = getQTipData(tooltipProps);
|
|
16687
|
-
return (jsxRuntime.jsxs(Root2, { defaultOpen: false, open: isOpen, onOpenChange: onOpenChange, modal: keepFocusInsideDropdown, children: [jsxRuntime.jsx(Trigger, { id: id, "data-testid": id, className: `tw
|
|
16688
|
-
' tw
|
|
16689
|
-
'
|
|
16690
|
-
' forceFont
|
|
16691
|
-
borderStyles, children: [hasArrow && (jsxRuntime.jsx(Arrow2, { asChild: true, children: jsxRuntime.jsx("div", { className: " tw
|
|
16689
|
+
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 focus-visible:tw-outline-none focus:tw-outline-none focus-within:tw-outline-none`, asChild: true, disabled: disabled, children: jsxRuntime.jsx("div", { ...tooltipData, className: `tw-bg-transparent tw-flex tw-flex-col tw-items-center focus-visible:tw-outline-none focus:tw-outline-none focus-within:tw-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: "focus-visible:tw-outline-none tw-outline-none", children: jsxRuntime.jsxs("div", { "data-testid": containerTestId, className: bgStyles +
|
|
16690
|
+
' tw-relative tw-z-[1200] tw-min-w-6 tw-py-2 focus-visible:tw-outline-none tw-outline-none' +
|
|
16691
|
+
' data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out' +
|
|
16692
|
+
' forceFont data-[side=top]:tw-animate-slideDownAndFade data-[side=right]:tw-animate-slideLeftAndFade data-[side=bottom]:tw-animate-slideUpAndFade data-[side=left]:tw-animate-slideRightAndFade ' +
|
|
16693
|
+
borderStyles, children: [hasArrow && (jsxRuntime.jsx(Arrow2, { asChild: true, children: jsxRuntime.jsx("div", { className: " tw-fill-transparent tw-bg-white tw-w-[15px] tw-h-[15px] tw-rotate-45 dark:tw-bg-sq-dark-background tw-border-b tw-border-r tw-border-sq-disabled-gray dark:tw-border-gray-500 tw-mt-[-7px]" }) })), seeqActionDropdownItems.map((item, index) => {
|
|
16692
16694
|
return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Item2, { onSelect: (e) => {
|
|
16693
16695
|
item.action(e);
|
|
16694
|
-
}, className: `tw
|
|
16696
|
+
}, className: `tw-cursor-pointer tw-flex dark:tw-text-sq-white hover:tw-bg-sq-gray-highlight dark:hover:tw-bg-sq-gray-highlight-dark tw-relative tw-select-none tw-outline-none data-[disabled]:tw-text-sq-disabled-gray data-[disabled]:tw-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-[1px] tw-bg-sq-disabled-gray dark:tw-bg-gray-500 tw-my-[8px]" }))] }, item.display + index));
|
|
16695
16697
|
})] }) })] }));
|
|
16696
16698
|
};
|
|
16697
16699
|
|
|
16698
|
-
const baseClasses$1 = 'tw
|
|
16699
|
-
const errorClasses = 'tw
|
|
16700
|
+
const baseClasses$1 = 'tw-flex tw-outline-none tw-rounded-md tw-w-full tw-relative tw-flex-wrap';
|
|
16701
|
+
const errorClasses = 'tw-border-sq-danger-color';
|
|
16700
16702
|
const borderColorClasses = [
|
|
16701
|
-
'tw
|
|
16702
|
-
'
|
|
16703
|
-
'
|
|
16704
|
-
'
|
|
16705
|
-
'
|
|
16706
|
-
'
|
|
16703
|
+
'tw-border-sq-disabled-gray',
|
|
16704
|
+
'dark:tw-border-sq-dark-disabled-gray',
|
|
16705
|
+
'dark:focus:tw-border-sq-color-dark-dark',
|
|
16706
|
+
'dark:active:tw-border-sq-color-dark-dark',
|
|
16707
|
+
'focus:tw-border-sq-color-dark',
|
|
16708
|
+
'active:tw-border-sq-color-dark',
|
|
16707
16709
|
].join(' ');
|
|
16708
|
-
const fieldBorderRadius = 'tw
|
|
16709
|
-
const fieldClasses = 'tw
|
|
16710
|
-
const darkTheme = '
|
|
16711
|
-
const lightTheme = 'tw
|
|
16710
|
+
const fieldBorderRadius = 'tw-rounded-l-md tw-rounded-r-none';
|
|
16711
|
+
const fieldClasses = 'tw-leading-normal tw-outline-none tw-py-1 tw-px-3' + 'tw-p-1 tw-border-solid tw-border';
|
|
16712
|
+
const darkTheme = 'dark:tw-bg-sq-dark-background dark:tw-text-sq-dark-text disabled:dark:tw-text-sq-dark-text-lighter';
|
|
16713
|
+
const lightTheme = 'tw-text-sq-text-color disabled:tw-text-sq-darkish-gray';
|
|
16712
16714
|
/**
|
|
16713
16715
|
* InputGroup.
|
|
16714
16716
|
*/
|
|
@@ -16718,10 +16720,8 @@ const InputGroup = React.forwardRef((props, ref) => {
|
|
|
16718
16720
|
const appliedClasses = `${baseClasses$1} ${extraClassNames}`;
|
|
16719
16721
|
const fieldAppliedClasses = `${fieldClasses} ${extraClassNames} ${lightTheme} ${darkTheme} ${fieldBorderRadius} ${showError ? errorClasses : borderColorClasses} `;
|
|
16720
16722
|
const elementsToAppend = append.filter(Boolean);
|
|
16721
|
-
return (jsxRuntime.jsxs("div", { id: `input-group-${id}`, className: appliedClasses, children: [field ? (jsxRuntime.jsx("div", { "data-testid": testId, className: `tw
|
|
16722
|
-
return item?.variant === 'button' ? (jsxRuntime.jsx(Button, { extraClassNames: `$
|
|
16723
|
-
index ? 'tw:-ml-px' : 'tw:ml-0'
|
|
16724
|
-
} 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));
|
|
16723
|
+
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 active:tw-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 focus:tw-z-30 tw-rounded-r-none last:tw-rounded-r-md ${extraClassNames}`, ...tooltipData })), elementsToAppend.map((item, index) => {
|
|
16724
|
+
return item?.variant === 'button' ? (jsxRuntime.jsx(Button, { extraClassNames: `${index ? 'tw-ml-[-1px]' : 'tw-ml-0'} focus:tw-z-40 focus:tw-border tw-rounded-none last:tw-rounded-r-md`, ...item.buttonProps }, index)) : (jsxRuntime.jsx("div", { className: `${borderColorClasses} ${index ? 'tw-ml-[-1px]' : 'tw-ml-0'} tw-flex tw-items-center tw-justify-center tw-rounded-none last:tw-rounded-r-md active:tw-z-30 active:tw-border tw-border`, children: item?.element }, index));
|
|
16725
16725
|
})] }));
|
|
16726
16726
|
});
|
|
16727
16727
|
|
|
@@ -27595,7 +27595,7 @@ var Thumb = SliderThumb;
|
|
|
27595
27595
|
*/
|
|
27596
27596
|
const Slider = (props) => {
|
|
27597
27597
|
const { onValueChange, onPointerUp, id, value, name, disabled = false, rootExtraClassNames = '', trackExtraClassNames = '', rangeExtraClassNames = '', thumbExtraClassNames = '', step, min, max, } = props;
|
|
27598
|
-
return (jsxRuntime.jsxs(Root$1, { className: `tw
|
|
27598
|
+
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-[4px] tw-bg-sq-dark-gray dark:tw-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-color-dark active:tw-bg-sq-color-dark-dark focus:outline-none focus-visible:tw-outline-none aria-disabled:tw-bg-sq-dark-gray dark:aria-disabled:tw-bg-sq-dark-disabled-gray tw-transition tw-ease-in-out ${thumbExtraClassNames}`, "aria-disabled": disabled })] }));
|
|
27599
27599
|
};
|
|
27600
27600
|
|
|
27601
27601
|
var PROGRESS_NAME = "Progress";
|
|
@@ -28864,7 +28864,7 @@ function validateWCAG2Parms(parms) {
|
|
|
28864
28864
|
};
|
|
28865
28865
|
}
|
|
28866
28866
|
|
|
28867
|
-
const baseLabelClasses = 'tw
|
|
28867
|
+
const baseLabelClasses = 'tw-left-1 tw-text-xs tw-text-sq-text-color dark:tw-text-sq-dark-text tw-items-center tw-h-[18px]';
|
|
28868
28868
|
const ProgressIndicator = (props) => {
|
|
28869
28869
|
const { value, color = undefined, testId, label, extraClasses = '', labelClasses = '', valuesLength, max, index, totalValue, ...tooltipProps } = props;
|
|
28870
28870
|
const tooltipData = getQTipData(tooltipProps);
|
|
@@ -28877,19 +28877,19 @@ const ProgressIndicator = (props) => {
|
|
|
28877
28877
|
if (totalValue >= max) {
|
|
28878
28878
|
// If progress is 100%, round both ends
|
|
28879
28879
|
if (index === 0 && valuesLength === 1) {
|
|
28880
|
-
roundedCorners = 'tw
|
|
28880
|
+
roundedCorners = 'tw-rounded-[15px]';
|
|
28881
28881
|
}
|
|
28882
28882
|
else if (index === 0) {
|
|
28883
|
-
roundedCorners = 'tw
|
|
28883
|
+
roundedCorners = 'tw-rounded-l-[15px]';
|
|
28884
28884
|
}
|
|
28885
28885
|
else if (index === valuesLength - 1) {
|
|
28886
|
-
roundedCorners = 'tw
|
|
28886
|
+
roundedCorners = 'tw-rounded-r-[15px]';
|
|
28887
28887
|
}
|
|
28888
28888
|
}
|
|
28889
28889
|
else {
|
|
28890
28890
|
// Otherwise, only round the leftmost indicator
|
|
28891
28891
|
if (index === 0) {
|
|
28892
|
-
roundedCorners = 'tw
|
|
28892
|
+
roundedCorners = 'tw-rounded-l-[15px]';
|
|
28893
28893
|
}
|
|
28894
28894
|
}
|
|
28895
28895
|
React.useEffect(() => {
|
|
@@ -28901,13 +28901,13 @@ const ProgressIndicator = (props) => {
|
|
|
28901
28901
|
return () => clearTimeout(timeout);
|
|
28902
28902
|
}, [value]);
|
|
28903
28903
|
const bgColor = color || undefined;
|
|
28904
|
-
const bgClass = color ? '' : 'tw
|
|
28904
|
+
const bgClass = color ? '' : 'tw-bg-sq-color-dark';
|
|
28905
28905
|
const computeTextClass = (elem) => {
|
|
28906
28906
|
const computedStyle = getComputedStyle(elem);
|
|
28907
28907
|
const backgroundColor = computedStyle.backgroundColor;
|
|
28908
28908
|
const textColorClass = tinycolor(backgroundColor).isDark()
|
|
28909
|
-
? 'tw
|
|
28910
|
-
: 'tw
|
|
28909
|
+
? 'tw-text-sq-white dark:tw-text-sq-white'
|
|
28910
|
+
: 'tw-text-sq-text-color dark:tw-text-sq-text-color';
|
|
28911
28911
|
setTextColorClass(textColorClass);
|
|
28912
28912
|
};
|
|
28913
28913
|
React.useEffect(() => {
|
|
@@ -28915,35 +28915,35 @@ const ProgressIndicator = (props) => {
|
|
|
28915
28915
|
computeTextClass(indicatorElementRef.current);
|
|
28916
28916
|
}
|
|
28917
28917
|
}, [!!indicatorElementRef.current]);
|
|
28918
|
-
return (React.createElement(Indicator, { className: `tw
|
|
28918
|
+
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: {
|
|
28919
28919
|
// Background color will default to the theme color if undefined
|
|
28920
28920
|
backgroundColor: bgColor,
|
|
28921
28921
|
animation: 'width 660ms forwards',
|
|
28922
28922
|
width: `${animatedWidth}%`,
|
|
28923
|
-
} }, label ? (jsxRuntime.jsx("span", { className: `${baseLabelClasses} ${labelClasses} ${textColorClass} ${valuesLength === 1 ? 'tw
|
|
28923
|
+
} }, label ? (jsxRuntime.jsx("span", { className: `${baseLabelClasses} ${labelClasses} ${textColorClass} ${valuesLength === 1 ? 'tw-absolute tw-z-50' : ''}`, children: label })) : undefined));
|
|
28924
28924
|
};
|
|
28925
28925
|
const ProgressBar = ({ values = [], max = 100, containerExtraClasses = '', zeroValueLabel = 'No progress yet', }) => {
|
|
28926
28926
|
const totalValue = values.reduce((acc, { value }) => acc + value, 0);
|
|
28927
|
-
return (jsxRuntime.jsx(Root, { className: `tw
|
|
28928
|
-
return
|
|
28929
|
-
})) : (jsxRuntime.jsx("div", { className: `${baseLabelClasses} tw
|
|
28927
|
+
return (jsxRuntime.jsx(Root, { className: `tw-relative tw-h-[18px] tw-w-full tw-overflow-hidden tw-rounded-[15px] tw-bg-sq-dark-gray dark:tw-bg-sq-dark-disabled-gray tw-flex tw-flex-1 ${containerExtraClasses}`, max: max, value: totalValue, children: totalValue > 0 ? (values.map((props, i) => {
|
|
28928
|
+
return React.createElement(ProgressIndicator, { ...props, max: max, valuesLength: values.length, index: i, totalValue: totalValue, key: i });
|
|
28929
|
+
})) : (jsxRuntime.jsx("div", { className: `${baseLabelClasses} tw-mx-auto tw-overflow-hidden`, children: zeroValueLabel })) }));
|
|
28930
28930
|
};
|
|
28931
28931
|
|
|
28932
|
-
const baseClasses = 'tw
|
|
28932
|
+
const baseClasses = 'tw-flex tw-outline-none tw-w-full tw-relative tw-flex-wrap';
|
|
28933
28933
|
const activeClassesByVariantLightTheme = {
|
|
28934
|
-
'outline': 'tw
|
|
28935
|
-
'theme': 'tw
|
|
28934
|
+
'outline': '!tw-bg-sq-disabled-gray tw-border-sq-color-dark',
|
|
28935
|
+
'theme': 'tw-bg-sq-color-highlight',
|
|
28936
28936
|
'danger': '',
|
|
28937
28937
|
'theme-light': '',
|
|
28938
|
-
'no-border': 'tw
|
|
28938
|
+
'no-border': '!tw-bg-sq-disabled-gray',
|
|
28939
28939
|
'warning': '',
|
|
28940
28940
|
};
|
|
28941
28941
|
const activeClassesByVariantDarkTheme = {
|
|
28942
|
-
'outline': 'tw
|
|
28943
|
-
'theme': '
|
|
28942
|
+
'outline': 'dark:!tw-bg-sq-multi-gray-dark dark:tw-border-sq-color-dark',
|
|
28943
|
+
'theme': 'dark:tw-bg-sq-color-highlight',
|
|
28944
28944
|
'danger': '',
|
|
28945
28945
|
'theme-light': '',
|
|
28946
|
-
'no-border': 'tw
|
|
28946
|
+
'no-border': 'dark:!tw-bg-sq-multi-gray-dark',
|
|
28947
28947
|
'warning': '',
|
|
28948
28948
|
};
|
|
28949
28949
|
/**
|
|
@@ -28955,7 +28955,7 @@ const ButtonGroup = (props) => {
|
|
|
28955
28955
|
const appliedClasses = `${baseClasses} ${extraClassNames}`;
|
|
28956
28956
|
return (jsxRuntime.jsx("div", { id: id ? `button-group-${id}` : undefined, "data-testid": testId, className: appliedClasses, ...tooltipData, children: buttons
|
|
28957
28957
|
.filter(Boolean)
|
|
28958
|
-
.map((item, index) => item?.variant === 'button' ? (jsxRuntime.jsx(Button, { ...item.buttonProps, extraClassNames: `tw
|
|
28958
|
+
.map((item, index) => item?.variant === 'button' ? (jsxRuntime.jsx(Button, { ...item.buttonProps, extraClassNames: `tw-ml-[-1px] focus:tw-z-40 tw-outline-none focus:tw-border tw-rounded-none first:tw-rounded-l-md last:tw-rounded-r-md ${item.buttonProps?.isActive
|
|
28959
28959
|
? `${activeClassesByVariantLightTheme[item?.buttonProps?.variant ?? 'outline']} ${activeClassesByVariantDarkTheme[item?.buttonProps?.variant ?? 'outline']} `
|
|
28960
28960
|
: ''} ${item.buttonProps.extraClassNames}`, onClick: () => onChange && onChange(item?.buttonProps?.value) }, index)) : (item?.element)) }));
|
|
28961
28961
|
};
|
|
@@ -28965,7 +28965,7 @@ const ButtonGroup = (props) => {
|
|
|
28965
28965
|
* - Easily create a carousel with custom slides.
|
|
28966
28966
|
* - Supports automatic sliding, navigation arrows, and slide indicators.
|
|
28967
28967
|
*/
|
|
28968
|
-
const Carousel = ({ testId = 'carousel-id', activeIndex = 0, extraClassNames = '', onSlide = () => { }, autoSlide, showIndicators = true, continuous = true, interval = 4000, prevIcon = 'fc-arrow-dropdown tw
|
|
28968
|
+
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-90', showArrows = true, iconExtraClassNames = '', carouselItems = [], }) => {
|
|
28969
28969
|
const [currentIndex, setCurrentIndex] = React.useState(activeIndex);
|
|
28970
28970
|
const changeSlide = (nextIndex) => {
|
|
28971
28971
|
const newIndex = (nextIndex + carouselItems.length) % carouselItems.length;
|
|
@@ -29032,7 +29032,7 @@ const Carousel = ({ testId = 'carousel-id', activeIndex = 0, extraClassNames = '
|
|
|
29032
29032
|
transition: springTransition,
|
|
29033
29033
|
}),
|
|
29034
29034
|
};
|
|
29035
|
-
return (jsxRuntime.jsxs("div", { "data-testid": testId, className: `tw
|
|
29035
|
+
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-color-dark' : 'tw-bg-sq-darkish-gray'}`, onClick: () => changeSlide(i) }, i))) }))] }));
|
|
29036
29036
|
};
|
|
29037
29037
|
|
|
29038
29038
|
const buttonTypes = ['button', 'reset', 'submit', 'link'];
|