@seeqdev/qomponents 0.0.178 → 0.0.179
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 +9 -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 +5 -0
- package/dist/styles.css +2920 -3535
- package/package.json +4 -3
package/dist/index.esm.js
CHANGED
|
@@ -46,34 +46,34 @@ const getQTipData = ({ tooltip, tooltipPlacement, isHtmlTooltip, tooltipTestId,
|
|
|
46
46
|
: undefined;
|
|
47
47
|
|
|
48
48
|
const colorClassesThemeLight = {
|
|
49
|
-
'theme': 'tw
|
|
50
|
-
'white': 'tw
|
|
51
|
-
'dark-gray': 'tw
|
|
52
|
-
'warning': 'tw
|
|
53
|
-
'darkish-gray': 'tw
|
|
54
|
-
'gray': 'tw
|
|
49
|
+
'theme': 'tw:text-sq-theme-dark',
|
|
50
|
+
'white': 'tw:text-sq-white',
|
|
51
|
+
'dark-gray': 'tw:text-sq-fairly-dark-gray',
|
|
52
|
+
'warning': 'tw:text-sq-warning',
|
|
53
|
+
'darkish-gray': 'tw:text-sq-darkish-gray',
|
|
54
|
+
'gray': 'tw:text-sq-disabled-gray',
|
|
55
55
|
'color': '',
|
|
56
|
-
'info': 'tw
|
|
57
|
-
'text': 'tw
|
|
56
|
+
'info': 'tw:text-sq-theme-link',
|
|
57
|
+
'text': 'tw:text-sq-text-color',
|
|
58
58
|
'inherit': '',
|
|
59
|
-
'danger': 'tw
|
|
60
|
-
'theme-light': 'tw
|
|
61
|
-
'success': 'tw
|
|
59
|
+
'danger': 'tw:text-sq-danger',
|
|
60
|
+
'theme-light': 'tw:text-sq-theme-light',
|
|
61
|
+
'success': 'tw:text-sq-success',
|
|
62
62
|
};
|
|
63
63
|
const colorClassesThemeDark = {
|
|
64
|
-
'theme': 'dark:
|
|
64
|
+
'theme': 'tw:dark:text-sq-theme-darker',
|
|
65
65
|
'white': '',
|
|
66
|
-
'dark-gray': 'tw
|
|
66
|
+
'dark-gray': 'tw:text-sq-fairly-dark-gray',
|
|
67
67
|
'warning': '',
|
|
68
|
-
'darkish-gray': 'tw
|
|
69
|
-
'gray': 'dark:
|
|
68
|
+
'darkish-gray': 'tw:text-sq-darkish-gray',
|
|
69
|
+
'gray': 'tw:dark:text-sq-dark-disabled-gray',
|
|
70
70
|
'color': '',
|
|
71
|
-
'info': 'dark:
|
|
72
|
-
'text': 'dark:
|
|
71
|
+
'info': 'tw:dark:text-sq-theme-link',
|
|
72
|
+
'text': 'tw:dark:text-sq-dark-text',
|
|
73
73
|
'inherit': '',
|
|
74
|
-
'danger': 'tw
|
|
75
|
-
'theme-light': 'tw
|
|
76
|
-
'success': 'tw
|
|
74
|
+
'danger': 'tw:text-sq-danger',
|
|
75
|
+
'theme-light': 'tw:text-sq-theme-light',
|
|
76
|
+
'success': 'tw:text-sq-success',
|
|
77
77
|
};
|
|
78
78
|
/**
|
|
79
79
|
* Icon:
|
|
@@ -85,14 +85,14 @@ const Icon = ({ onClick, icon, iconPrefix = undefined, type = 'theme', extraClas
|
|
|
85
85
|
const errorMessage = color === undefined || color === ''
|
|
86
86
|
? 'Icon with type="color" must have prop color specified.'
|
|
87
87
|
: 'Icon with prop color must have type="color".';
|
|
88
|
-
return jsx$1("div", { className: "tw
|
|
88
|
+
return jsx$1("div", { className: "tw:text-sq-danger", children: errorMessage });
|
|
89
89
|
}
|
|
90
90
|
const fontAwesomePrefix = iconPrefix ? iconPrefix : 'fa-sharp fa-regular';
|
|
91
91
|
const iconPrefixString = icon.startsWith('fc') ? 'fc' : fontAwesomePrefix;
|
|
92
92
|
const style = type === 'color' && color ? { color } : {};
|
|
93
93
|
const sizeClass = size ? `fa-${size}` : small ? 'fa-sm' : large ? 'fa-lg' : '';
|
|
94
94
|
const appliedClassNames = `${iconPrefixString} ${icon} ${sizeClass}
|
|
95
|
-
${colorClassesThemeLight[type]} ${colorClassesThemeDark[type]} ${onClick ? 'tw
|
|
95
|
+
${colorClassesThemeLight[type]} ${colorClassesThemeDark[type]} ${onClick ? 'tw:cursor-pointer' : ''} ${extraClassNames} tw:focus:outline-none tw:focus-visible:outline-none tw:outline-none`;
|
|
96
96
|
const tooltipData = getQTipData(tooltipProps);
|
|
97
97
|
return (jsx$1("i", { className: appliedClassNames, style: style, onClick: onClick, "data-testid": testId, "data-customid": customId, id: id, "data-number": number, ...tooltipData }));
|
|
98
98
|
};
|
|
@@ -103,71 +103,71 @@ const Icon = ({ onClick, icon, iconPrefix = undefined, type = 'theme', extraClas
|
|
|
103
103
|
* - include tooltips and/or icons
|
|
104
104
|
*/
|
|
105
105
|
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, }) => {
|
|
106
|
-
const baseClasses = 'tw
|
|
106
|
+
const baseClasses = 'tw:px-2.5 tw:rounded-md tw:focus:ring-0 tw:focus-visible:outline-none tw:aria-disabled:cursor-not-allowed tw:disabled:pointer-events-none';
|
|
107
107
|
const baseClassesByVariant = {
|
|
108
|
-
'outline': 'disabled:
|
|
109
|
-
'theme': 'disabled:
|
|
110
|
-
'danger': 'tw
|
|
111
|
-
'tw
|
|
112
|
-
'theme-light': 'disabled:
|
|
113
|
-
'no-border': 'disabled:
|
|
114
|
-
'warning': 'tw
|
|
115
|
-
'disabled:
|
|
108
|
+
'outline': 'tw:disabled:opacity-50 tw:aria-disabled:opacity-50 tw:border-solid tw:border',
|
|
109
|
+
'theme': 'tw:disabled:opacity-50 tw:aria-disabled:opacity-50 tw:border-solid tw:border',
|
|
110
|
+
'danger': 'tw:bg-sq-danger tw:disabled:opacity-50 tw:aria-disabled:opacity-50 ' +
|
|
111
|
+
'tw:border-solid tw:border tw:border-sq-danger',
|
|
112
|
+
'theme-light': 'tw:disabled:opacity-50 tw:aria-disabled:opacity-50 tw:border-solid tw:border',
|
|
113
|
+
'no-border': 'tw:disabled:opacity-50 tw:aria-disabled:opacity-50',
|
|
114
|
+
'warning': 'tw:bg-sq-warning tw:border-solid tw:border tw:border-sq-warning ' +
|
|
115
|
+
'tw:disabled:opacity-50 tw:aria-disabled:opacity-50',
|
|
116
116
|
};
|
|
117
117
|
const textClassesByVariantLightTheme = {
|
|
118
|
-
'outline': 'tw
|
|
119
|
-
'theme': 'tw
|
|
120
|
-
'theme-light': 'tw
|
|
121
|
-
'danger': 'tw
|
|
122
|
-
'no-border': 'tw
|
|
123
|
-
'warning': 'tw
|
|
118
|
+
'outline': 'tw:text-sq-text-color',
|
|
119
|
+
'theme': 'tw:text-sq-white',
|
|
120
|
+
'theme-light': 'tw:text-sq-white',
|
|
121
|
+
'danger': 'tw:text-sq-white',
|
|
122
|
+
'no-border': 'tw:text-sq-text-color',
|
|
123
|
+
'warning': 'tw:text-sq-white',
|
|
124
124
|
};
|
|
125
125
|
const textClassesByVariantDarkTheme = {
|
|
126
|
-
'outline': 'dark:
|
|
127
|
-
'theme': 'dark:
|
|
128
|
-
'theme-light': 'dark:
|
|
129
|
-
'danger': 'dark:
|
|
130
|
-
'no-border': 'dark:
|
|
131
|
-
'warning': 'dark:
|
|
126
|
+
'outline': 'tw:dark:text-sq-dark-text',
|
|
127
|
+
'theme': 'tw:dark:text-sq-white',
|
|
128
|
+
'theme-light': 'tw:dark:text-sq-white',
|
|
129
|
+
'danger': 'tw:dark:text-sq-white',
|
|
130
|
+
'no-border': 'tw:dark:text-sq-dark-text',
|
|
131
|
+
'warning': 'tw:dark:text-sq-white',
|
|
132
132
|
};
|
|
133
133
|
const classesByVariantLightTheme = {
|
|
134
|
-
'outline': 'tw
|
|
135
|
-
'theme': 'tw
|
|
134
|
+
'outline': 'tw:bg-white tw:border-sq-disabled-gray',
|
|
135
|
+
'theme': 'tw:bg-sq-theme-dark tw:border-sq-theme-dark',
|
|
136
136
|
'danger': '',
|
|
137
|
-
'theme-light': 'tw
|
|
137
|
+
'theme-light': 'tw:bg-sq-icon',
|
|
138
138
|
'no-border': '',
|
|
139
139
|
'warning': '',
|
|
140
140
|
};
|
|
141
141
|
const classesByVariantDarkTheme = {
|
|
142
|
-
'outline': 'dark:
|
|
143
|
-
'theme': 'dark:
|
|
142
|
+
'outline': 'tw:dark:bg-sq-dark-background tw:dark:border-sq-dark-disabled-gray',
|
|
143
|
+
'theme': 'tw:dark:bg-sq-theme-dark tw:dark:border-sq-theme-dark',
|
|
144
144
|
'danger': '',
|
|
145
|
-
'theme-light': 'dark:
|
|
145
|
+
'theme-light': 'tw:dark:bg-sq-icon-dark tw:dark:border-sq-icon-dark',
|
|
146
146
|
'no-border': '',
|
|
147
147
|
'warning': '',
|
|
148
148
|
};
|
|
149
149
|
const activeClassesByVariantLightTheme = {
|
|
150
|
-
'outline': 'hover:
|
|
151
|
-
' active:
|
|
152
|
-
'theme': 'hover:
|
|
153
|
-
'danger': 'hover:
|
|
154
|
-
'theme-light': 'hover:
|
|
150
|
+
'outline': 'tw:hover:bg-sq-light-gray tw:focus:bg-sq-dark-gray tw:active:bg-sq-dark-gray tw:focus:border-sq-theme-dark' +
|
|
151
|
+
' tw:active:border-sq-theme-dark',
|
|
152
|
+
'theme': 'tw:hover:bg-sq-theme-highlight tw:hover:border-sq-theme-highlight',
|
|
153
|
+
'danger': 'tw:hover:bg-sq-bg-danger tw:hover:border-sq-bg-danger',
|
|
154
|
+
'theme-light': 'tw:hover:bg-sq-link tw:hover:border-sq-link',
|
|
155
155
|
'no-border': '',
|
|
156
156
|
'warning': '',
|
|
157
157
|
};
|
|
158
158
|
const activeClassesByVariantDarkTheme = {
|
|
159
|
-
'outline': 'dark:hover:
|
|
160
|
-
' dark:active:
|
|
161
|
-
'theme': 'dark:hover:
|
|
162
|
-
'danger': 'dark:hover:
|
|
163
|
-
'theme-light': 'dark:hover:
|
|
159
|
+
'outline': 'tw:dark:hover:bg-sq-highlight-color-dark tw:dark:focus:bg-sq-multi-gray-dark' +
|
|
160
|
+
' tw:dark:active:bg-sq-multi-gray-dark tw:dark:focus:border-sq-theme-dark tw:dark:active:border-sq-theme-dark',
|
|
161
|
+
'theme': 'tw:dark:hover:bg-sq-theme-highlight tw:dark:hover:border-sq-theme-highlight',
|
|
162
|
+
'danger': 'tw:dark:hover:bg-sq-bg-danger tw:dark:hover:border-sq-bg-danger',
|
|
163
|
+
'theme-light': 'tw:dark:hover:bg-sq-link-dark tw:dark:hover:border-sq-link-dark',
|
|
164
164
|
'no-border': '',
|
|
165
165
|
'warning': '',
|
|
166
166
|
};
|
|
167
167
|
const sizeClasses = {
|
|
168
|
-
xs: 'tw
|
|
169
|
-
sm: 'tw
|
|
170
|
-
lg: 'tw
|
|
168
|
+
xs: 'tw:text-xs tw:py-0.5',
|
|
169
|
+
sm: 'tw:text-sm tw:py-1',
|
|
170
|
+
lg: 'tw:text-xl tw:py-1',
|
|
171
171
|
};
|
|
172
172
|
let tooltipData = undefined;
|
|
173
173
|
let appliedClasses = `${baseClasses} ${baseClassesByVariant[variant]} ${sizeClasses[size]} ${classesByVariantLightTheme[variant]} ${classesByVariantDarkTheme[variant]} ${textClassesByVariantLightTheme[variant]} ${textClassesByVariantDarkTheme[variant]} ${extraClassNames}`;
|
|
@@ -183,7 +183,7 @@ const Button = ({ onClick, label, variant = 'outline', type = 'button', size = '
|
|
|
183
183
|
'data-qtip-delay': tooltipOptions?.delay ?? DEFAULT_TOOL_TIP_DELAY,
|
|
184
184
|
};
|
|
185
185
|
}
|
|
186
|
-
const iconClass = iconPosition === 'left' ? 'tw
|
|
186
|
+
const iconClass = iconPosition === 'left' ? 'tw:mr-1' : 'tw:ml-1';
|
|
187
187
|
const iconElement = icon && (jsx$1(Icon, { icon: icon, iconPrefix: iconPrefix, type: iconStyle, color: iconColor, extraClassNames: label
|
|
188
188
|
? `${iconClass} ${textClassesByVariantLightTheme[variant]} ${textClassesByVariantDarkTheme[variant]}`
|
|
189
189
|
: '', testId: `${id}_spinner` }));
|
|
@@ -4777,31 +4777,30 @@ function getSvgIconPath(icon) {
|
|
|
4777
4777
|
}
|
|
4778
4778
|
|
|
4779
4779
|
const popoverBorderStyles = [
|
|
4780
|
-
'tw
|
|
4781
|
-
'tw
|
|
4782
|
-
'tw
|
|
4783
|
-
'tw
|
|
4784
|
-
'dark:
|
|
4780
|
+
'tw:border-solid',
|
|
4781
|
+
'tw:border',
|
|
4782
|
+
'tw:rounded-md',
|
|
4783
|
+
'tw:border-sq-disabled-gray',
|
|
4784
|
+
'tw:dark:border-gray-500',
|
|
4785
4785
|
].join(' ');
|
|
4786
4786
|
const triggerBackgroundStyles = [
|
|
4787
|
-
'tw
|
|
4788
|
-
'hover:
|
|
4789
|
-
'active:
|
|
4790
|
-
'dark:
|
|
4791
|
-
'dark:hover:
|
|
4792
|
-
'dark:active:
|
|
4787
|
+
'tw:bg-transparent',
|
|
4788
|
+
'tw:hover:bg-sq-worksheetspanel-gray',
|
|
4789
|
+
'tw:active:bg-sq-worksheetspanel-gray',
|
|
4790
|
+
'tw:dark:bg-transparent',
|
|
4791
|
+
'tw:dark:hover:bg-sq-field-disabled-gray/30',
|
|
4792
|
+
'tw:dark:active:bg-sq-field-disabled-gray/30',
|
|
4793
4793
|
].join(' ');
|
|
4794
4794
|
const activeBackgroundStyles = [
|
|
4795
4795
|
'active',
|
|
4796
|
-
'tw
|
|
4797
|
-
'
|
|
4798
|
-
'
|
|
4799
|
-
'dark:
|
|
4800
|
-
'dark:
|
|
4801
|
-
'dark:active:tw-bg-sq-dark-disabled-gray',
|
|
4796
|
+
'tw:bg-sq-overlay',
|
|
4797
|
+
'tw:active:bg-sq-overlay',
|
|
4798
|
+
'tw:dark:bg-sq-dark-disabled-gray',
|
|
4799
|
+
'tw:dark:hover:border-sq-dark-disabled-gray/30',
|
|
4800
|
+
'tw:dark:active:bg-sq-dark-disabled-gray/30',
|
|
4802
4801
|
].join(' ');
|
|
4803
|
-
const bgStyles$3 = ['tw
|
|
4804
|
-
const disabledClasses$4 = ['tw
|
|
4802
|
+
const bgStyles$3 = ['tw:bg-sq-white', 'tw:dark:bg-sq-dark-background'].join(' ');
|
|
4803
|
+
const disabledClasses$4 = ['tw:opacity-50', 'tw:cursor-not-allowed'].join(' ');
|
|
4805
4804
|
const PopoverContent = React.forwardRef(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (jsx$1(Content2$3, { ref: ref, align: align, sideOffset: sideOffset, ...props, asChild: true })));
|
|
4806
4805
|
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, }) => {
|
|
4807
4806
|
let tooltipData = undefined;
|
|
@@ -4819,12 +4818,12 @@ const ToolbarButton = ({ isSmall = false, label, icon, secondIcon, forceSmallIco
|
|
|
4819
4818
|
onHide && onHide();
|
|
4820
4819
|
}
|
|
4821
4820
|
};
|
|
4822
|
-
return (jsxs(Root2$3, { defaultOpen: false, onOpenChange: onOpenChange, children: [jsx$1(Trigger$3, { id: id, className: `tw-border-none tw
|
|
4821
|
+
return (jsxs(Root2$3, { defaultOpen: false, onOpenChange: onOpenChange, children: [jsx$1(Trigger$3, { id: id, className: `tw:bg-transparent tw:border-none tw:mx-sq-1.5 tw:first:ml-0 tw:last:mr-0 ${isActive ? 'active' : ''}`, disabled: disabled, "data-testid": testId, onClick: (e) => {
|
|
4823
4822
|
onClick && onClick(e);
|
|
4824
|
-
}, children: jsxs("div", { ...tooltipData, className: `tw
|
|
4825
|
-
' tw
|
|
4826
|
-
' 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' +
|
|
4827
|
-
popoverBorderStyles, children: [hasArrow && (jsx$1(Arrow2$2, { asChild: true, children: jsx$1("div", { className: " tw
|
|
4823
|
+
}, children: jsxs("div", { ...tooltipData, className: `tw:flex tw:flex-col tw:items-center tw:rounded-md ${isSmall ? 'tw:py-px tw:px-1' : 'tw:px-2 tw:py-sq-5'} ${disabled ? disabledClasses$4 : isActive ? activeBackgroundStyles : triggerBackgroundStyles} ${extraClassNames || ''}`, children: [jsxs("span", { className: "tw:nowrap", children: [isPrimaryAnSvg ? (jsx$1("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: jsx$1("path", { d: getSvgIconPath(icon) }) })) : (jsx$1(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 && jsx$1(Icon, { icon: secondIcon, type: "text", testId: "secondIcon" }), popoverContent ? (jsx$1(Icon, { icon: "fc-arrow-dropdown", extraClassNames: "tw:text-sq-text-color tw:dark:text-sq-dark-text tw:ml-sq-3 tw:text-2", type: "text", size: "sm" })) : undefined] }), !isSmall && jsx$1("small", { className: "tw:text-sq-text-color tw:dark:text-sq-dark-text tw:text-2.5", children: label })] }) }), !!popoverContent ? (jsx$1(PopoverContent, { sideOffset: 2, align: "start", children: jsxs("div", { className: bgStyles$3 +
|
|
4824
|
+
' tw:relative tw:z-[1000] tw:min-w-6 tw:p-2 tw:focus-visible:outline-none tw:outline-none tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out' +
|
|
4825
|
+
' 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' +
|
|
4826
|
+
popoverBorderStyles, children: [hasArrow && (jsx$1(Arrow2$2, { asChild: true, children: jsx$1("div", { className: " tw:fill-transparent tw:bg-sq-white tw:w-sq-15 tw:h-sq-15 tw:-mt-sq-7 tw:rotate-45 tw:dark:bg-sq-dark-background tw:border-b tw:border-r tw:border-sq-disabled-gray tw:dark:border-gray-500" }) })), popoverContent] }) })) : undefined] }));
|
|
4828
4827
|
};
|
|
4829
4828
|
|
|
4830
4829
|
const setValidInputDimension = (width, height) => {
|
|
@@ -4841,24 +4840,24 @@ const setValidInputDimension = (width, height) => {
|
|
|
4841
4840
|
return inputStyle;
|
|
4842
4841
|
};
|
|
4843
4842
|
|
|
4844
|
-
const errorClasses$4 = 'tw
|
|
4843
|
+
const errorClasses$4 = 'tw:border-sq-danger';
|
|
4845
4844
|
const borderColorClasses$4 = [
|
|
4846
|
-
'tw
|
|
4847
|
-
'dark:
|
|
4848
|
-
'dark:focus:
|
|
4849
|
-
'dark:active:
|
|
4850
|
-
'focus:
|
|
4851
|
-
'active:
|
|
4845
|
+
'tw:border-sq-disabled-gray',
|
|
4846
|
+
'tw:dark:border-sq-dark-disabled-gray',
|
|
4847
|
+
'tw:dark:focus:border-sq-theme-dark-dark',
|
|
4848
|
+
'tw:dark:active:border-sq-theme-darker',
|
|
4849
|
+
'tw:focus:border-sq-theme-dark',
|
|
4850
|
+
'tw:active:border-sq-theme-dark',
|
|
4852
4851
|
].join(' ');
|
|
4853
|
-
const baseClasses$6 = 'tw
|
|
4854
|
-
' disabled:
|
|
4855
|
-
' disabled:
|
|
4856
|
-
' dark:
|
|
4857
|
-
const darkTheme$3 = 'dark:
|
|
4858
|
-
const lightTheme$3 = 'tw
|
|
4852
|
+
const baseClasses$6 = 'tw:h-8.5 tw:leading-normal tw:outline-none tw:py-1 tw:px-3' +
|
|
4853
|
+
' tw:disabled:pointer-events-none tw:disabled:bg-sq-light-gray tw:disabled:dark:bg-sq-dark-disabled-gray' +
|
|
4854
|
+
' tw:disabled:cursor-not-allowed tw:p-1 tw:border-solid tw:border tw:placeholder-gray-400' +
|
|
4855
|
+
' tw:dark:placeholder-sq-dark-text/30 specTextField';
|
|
4856
|
+
const darkTheme$3 = 'tw:dark:bg-sq-dark-background tw:dark:text-sq-dark-text tw:disabled:dark:text-sq-dark-text/30';
|
|
4857
|
+
const lightTheme$3 = 'tw:text-sq-text-color tw:disabled:text-sq-darkish-gray';
|
|
4859
4858
|
const sizeClasses = {
|
|
4860
|
-
sm: 'tw
|
|
4861
|
-
lg: 'tw
|
|
4859
|
+
sm: 'tw:text-sm',
|
|
4860
|
+
lg: 'tw:text-xl',
|
|
4862
4861
|
};
|
|
4863
4862
|
/**
|
|
4864
4863
|
* Textfield.
|
|
@@ -4900,12 +4899,12 @@ const TextField = React__default.forwardRef((props, ref) => {
|
|
|
4900
4899
|
internalRef.current.value = `${value}`;
|
|
4901
4900
|
}
|
|
4902
4901
|
}, [value]);
|
|
4903
|
-
let borderRadius = 'tw
|
|
4902
|
+
let borderRadius = 'tw:rounded-md';
|
|
4904
4903
|
if (inputGroup === 'left') {
|
|
4905
|
-
borderRadius = 'tw
|
|
4904
|
+
borderRadius = 'tw:rounded-l-md tw:border-r-0 tw:focus:border-r' + ' tw:active:border-r';
|
|
4906
4905
|
}
|
|
4907
4906
|
else if (inputGroup === 'right') {
|
|
4908
|
-
borderRadius = 'tw
|
|
4907
|
+
borderRadius = 'tw:rounded-r-md tw:border-l-0 tw:focus:border-l tw:active:border-l';
|
|
4909
4908
|
}
|
|
4910
4909
|
const appliedClasses = `${baseClasses$6} ${sizeClasses[size]} ${extraClassNames} ${lightTheme$3} ${darkTheme$3} ${borderRadius} ${showError ? errorClasses$4 : borderColorClasses$4} `;
|
|
4911
4910
|
const inputProp = setValidInputDimension(inputWidth, inputHeight)
|
|
@@ -4918,18 +4917,18 @@ const TextField = React__default.forwardRef((props, ref) => {
|
|
|
4918
4917
|
inputLenghtProp.maxLength = maxLength;
|
|
4919
4918
|
if (minLength)
|
|
4920
4919
|
inputLenghtProp.minLength = minLength;
|
|
4921
|
-
return (jsxs(Fragment, { children: [jsx$1("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 && jsx$1("div", { className: "tw
|
|
4920
|
+
return (jsxs(Fragment, { children: [jsx$1("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 && jsx$1("div", { className: "tw:text-sq-danger tw:text-xs tw:mt-1", children: errorText })] }));
|
|
4922
4921
|
});
|
|
4923
4922
|
|
|
4924
|
-
const alignment = 'tw
|
|
4925
|
-
const labelClasses = 'tw
|
|
4926
|
-
const baseClasses$5 = 'tw-border
|
|
4927
|
-
' dark:
|
|
4928
|
-
' checked:
|
|
4929
|
-
' checked:active:
|
|
4930
|
-
' dark:disabled:
|
|
4931
|
-
const checkboxClasses = `tw
|
|
4932
|
-
const radioClasses = `tw
|
|
4923
|
+
const alignment = 'tw:flex';
|
|
4924
|
+
const labelClasses = 'tw:ml-1.5 tw:text-sm tw:-mt-0.5';
|
|
4925
|
+
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' +
|
|
4926
|
+
' tw:dark:bg-sq-dark-background tw:dark:border-sq-dark-text tw:dark:hover:bg-sq-dark-background' +
|
|
4927
|
+
' tw:checked:text-white tw:checked:border-sq-text-color tw:checked:hover:border-sq-theme-dark' +
|
|
4928
|
+
' tw:checked:active:border-sq-theme-darker tw:checked:focus:border-sq-theme-dark tw:disabled:border-sq-disabled-gray' +
|
|
4929
|
+
' tw:dark:disabled:border-sq-fairly-dark-gray tw:dark:checked:focus:bg-sq-dark-background';
|
|
4930
|
+
const checkboxClasses = `tw:form-checkbox tw:rounded ${baseClasses$5}`;
|
|
4931
|
+
const radioClasses = `tw:form-radio tw:rounded-full ${baseClasses$5}`;
|
|
4933
4932
|
/**
|
|
4934
4933
|
* Checkbox and Radio Box Component.
|
|
4935
4934
|
*/
|
|
@@ -4937,26 +4936,25 @@ const Checkbox = (props) => {
|
|
|
4937
4936
|
const { type = 'checkbox', value, disabled = false, label, onChange, onClick, onKeyDown, checked, defaultChecked, id, name, extraClassNames, extraLabelClassNames, testId, ...tooltipProps } = props;
|
|
4938
4937
|
const assignedId = id ?? 'checkbox_' + Math.random();
|
|
4939
4938
|
const tooltipData = getQTipData(tooltipProps);
|
|
4940
|
-
return (jsxs("span", { className: `${alignment} ${extraClassNames}`, children: [jsx$1("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
|
|
4941
|
-
|
|
4942
|
-
|
|
4943
|
-
|
|
4944
|
-
|
|
4945
|
-
|
|
4946
|
-
|
|
4947
|
-
' disabled:
|
|
4948
|
-
|
|
4949
|
-
|
|
4950
|
-
|
|
4951
|
-
const
|
|
4952
|
-
const errorClasses$3 = 'tw-border-sq-danger-color';
|
|
4939
|
+
return (jsxs("span", { className: `${alignment} ${extraClassNames}`, children: [jsx$1("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 && (jsx$1("label", { htmlFor: assignedId, className: `${labelClasses} ${extraLabelClassNames} ${disabled
|
|
4940
|
+
? 'tw:cursor-not-allowed tw:dark:text-sq-fairly-dark-gray tw:text-sq-fairly-dark-gray'
|
|
4941
|
+
: 'tw:cursor-pointer tw:text-sq-text-color tw:dark:text-sq-dark-text'}`, children: label }))] }));
|
|
4942
|
+
};
|
|
4943
|
+
|
|
4944
|
+
const baseClasses$4 = 'tw:leading-normal tw:outline-none tw:py-1 tw:px-3 tw:rounded-md tw:w-full' +
|
|
4945
|
+
' tw:disabled:pointer-events-none tw:disabled:bg-sq-light-gray tw:disabled:dark:bg-sq-dark-disabled-gray' +
|
|
4946
|
+
' tw:disabled:cursor-not-allowed tw:p-1 tw:border-solid tw:border tw:text-sm';
|
|
4947
|
+
const darkTheme$2 = 'tw:dark:bg-sq-dark-background tw:dark:text-sq-dark-text ' +
|
|
4948
|
+
'tw:dark:placeholder-sq-dark-text/30 tw:disabled:dark:text-sq-dark-text/30';
|
|
4949
|
+
const lightTheme$2 = 'tw:text-sq-text-color tw:placeholder-gray-400 tw:disabled:text-sq-darkish-gray';
|
|
4950
|
+
const errorClasses$3 = 'tw:border-sq-danger';
|
|
4953
4951
|
const borderColorClasses$3 = [
|
|
4954
|
-
'tw
|
|
4955
|
-
'dark:
|
|
4956
|
-
'dark:focus:
|
|
4957
|
-
'dark:active:
|
|
4958
|
-
'focus:
|
|
4959
|
-
'active:
|
|
4952
|
+
'tw:border-sq-disabled-gray',
|
|
4953
|
+
'tw:dark:border-sq-dark-disabled-gray',
|
|
4954
|
+
'tw:dark:focus:border-sq-theme-darker',
|
|
4955
|
+
'tw:dark:active:border-sq-theme-darker',
|
|
4956
|
+
'tw:focus:border-sq-theme-dark',
|
|
4957
|
+
'tw:active:border-sq-theme-dark',
|
|
4960
4958
|
].join(' ');
|
|
4961
4959
|
/**
|
|
4962
4960
|
* TextArea.
|
|
@@ -5005,25 +5003,25 @@ const TextArea = React__default.forwardRef(({ readonly = false, disabled = false
|
|
|
5005
5003
|
* display correctly.
|
|
5006
5004
|
*/
|
|
5007
5005
|
const Tooltip = ({ position = 'bottom', children, text, delay = DEFAULT_TOOL_TIP_DELAY, }) => {
|
|
5008
|
-
const arrowBaseClasses =
|
|
5009
|
-
const centerArrowVertically = 'before:
|
|
5010
|
-
const centerArrowHorizontally = 'before:
|
|
5011
|
-
const arrowRight = `${arrowBaseClasses} ${centerArrowVertically} before:
|
|
5012
|
-
before:
|
|
5013
|
-
const arrowLeft = `${arrowBaseClasses} ${centerArrowVertically} before:
|
|
5014
|
-
before:
|
|
5015
|
-
const arrowBottom = `${arrowBaseClasses} ${centerArrowHorizontally} before:-
|
|
5016
|
-
before:
|
|
5017
|
-
const arrowTop = `${arrowBaseClasses} ${centerArrowHorizontally} before:-
|
|
5018
|
-
before:
|
|
5006
|
+
const arrowBaseClasses = "tw:before:content-[''] tw:before:absolute tw:before:border-8";
|
|
5007
|
+
const centerArrowVertically = 'tw:before:top-1/2 tw:before:-translate-y-1/2';
|
|
5008
|
+
const centerArrowHorizontally = 'tw:before:left-1/2 tw:before:-translate-x-1/2';
|
|
5009
|
+
const arrowRight = `${arrowBaseClasses} ${centerArrowVertically} tw:before:right-full tw:before:border-y-transparent
|
|
5010
|
+
tw:before:border-l-transparent tw:before:border-r-sq-black`;
|
|
5011
|
+
const arrowLeft = `${arrowBaseClasses} ${centerArrowVertically} tw:before:left-full tw:before:border-y-transparent
|
|
5012
|
+
tw:before:border-l-sq-black tw:before:border-r-transparent`;
|
|
5013
|
+
const arrowBottom = `${arrowBaseClasses} ${centerArrowHorizontally} tw:before:-top-4 tw:before:border-b-sq-black
|
|
5014
|
+
tw:before:border-r-transparent tw:before:border-l-transparent tw:before:border-t-transparent`;
|
|
5015
|
+
const arrowTop = `${arrowBaseClasses} ${centerArrowHorizontally} tw:before:-bottom-4 tw:before:border-b-transparent
|
|
5016
|
+
tw:before:border-t-sq-black tw:before:border-l-transparent tw:before:border-r-transparent`;
|
|
5019
5017
|
const placements = {
|
|
5020
|
-
top:
|
|
5021
|
-
left:
|
|
5022
|
-
right: `tw
|
|
5023
|
-
bottom:
|
|
5018
|
+
top: `tw:-top-2 tw:-translate-y-full tw:left-1/2 tw:-translate-x-1/2 ${arrowTop}`,
|
|
5019
|
+
left: `tw:-translate-x-full tw:-left-3 tw:-translate-y-1/2 tw:top-1/2 ${arrowLeft}`,
|
|
5020
|
+
right: `tw:translate-x-full tw:-right-3 tw:-translate-y-1/2 tw:top-1/2 ${arrowRight}`,
|
|
5021
|
+
bottom: `tw:-bottom-2 tw:translate-y-full tw:left-1/2 tw:-translate-x-1/2 ${arrowBottom}`,
|
|
5024
5022
|
};
|
|
5025
|
-
return (jsxs("div", { className: "tw
|
|
5026
|
-
tw
|
|
5023
|
+
return (jsxs("div", { className: "tw:group tw:relative tw:inline-block", children: [children, jsx$1("div", { className: `tw:z-50 tw:whitespace-nowrap tw:hidden tw:group-hover:inline-block tw:group-hover:delay-[${delay}ms]
|
|
5024
|
+
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 })] }));
|
|
5027
5025
|
};
|
|
5028
5026
|
|
|
5029
5027
|
/*! @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 */
|
|
@@ -7509,8 +7507,8 @@ const QTip = () => {
|
|
|
7509
7507
|
: positionTooltip();
|
|
7510
7508
|
}
|
|
7511
7509
|
};
|
|
7512
|
-
return (jsx$1(Fragment, { children: jsxs("div", { onMouseEnter: () => setOverTooltip(true), onMouseLeave: () => setOverTooltip(false), "data-testid": tooltipTestId, ref: tooltipRef, className: 'tw
|
|
7513
|
-
(show ? 'tw
|
|
7510
|
+
return (jsx$1(Fragment, { children: 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 ' +
|
|
7511
|
+
(show ? 'tw:visible' : 'tw:invisible tw:pointer-events-none'), children: [html ? jsx$1(HTMLTip, { text: tooltipText }) : tooltipText, jsx$1("div", { className: "tw:absolute tw:w-2.5 tw:h-2.5 tw:rotate-45 tw:bg-sq-black", ref: tooltipArrowRef })] }) }));
|
|
7514
7512
|
};
|
|
7515
7513
|
|
|
7516
7514
|
function _typeof$1(o) {
|
|
@@ -13925,70 +13923,77 @@ var CreatableSelect = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
13925
13923
|
});
|
|
13926
13924
|
var CreatableSelect$1 = CreatableSelect;
|
|
13927
13925
|
|
|
13928
|
-
const baseClasses$3 = ['focus:
|
|
13929
|
-
const containerStyles = ['tw
|
|
13930
|
-
const errorClasses$2 = 'tw
|
|
13931
|
-
const borderColorClasses$2 = ['tw
|
|
13932
|
-
const borderStyles$3 = ['tw
|
|
13926
|
+
const baseClasses$3 = ['tw:focus:ring-0', 'tw:disabled:cursor-not-allowed'].join(' ');
|
|
13927
|
+
const containerStyles = ['tw:bg-sq-white', 'tw:dark:bg-sq-dark-background'].join(' ');
|
|
13928
|
+
const errorClasses$2 = 'tw:border-sq-danger';
|
|
13929
|
+
const borderColorClasses$2 = ['tw:border-sq-disabled-gray', 'tw:dark:border-sq-dark-disabled-gray'].join(' ');
|
|
13930
|
+
const borderStyles$3 = ['tw:border-solid', 'tw:border'].join(' ');
|
|
13933
13931
|
const borderActiveClasses = [
|
|
13934
|
-
'hover:
|
|
13935
|
-
'focus-within:
|
|
13936
|
-
'active:
|
|
13937
|
-
'dark:hover:
|
|
13938
|
-
'dark:focus-within:
|
|
13939
|
-
'dark:active:
|
|
13932
|
+
'tw:hover:border-sq-theme-dark',
|
|
13933
|
+
'tw:focus-within:border-sq-theme-dark',
|
|
13934
|
+
'tw:active:border-sq-theme-dark',
|
|
13935
|
+
'tw:dark:hover:border-sq-theme-dark-dark',
|
|
13936
|
+
'tw:dark:focus-within:border-sq-theme-dark-dark',
|
|
13937
|
+
'tw:dark:active:border-sq-theme-dark-dark',
|
|
13940
13938
|
].join(' ');
|
|
13941
|
-
const textStyles = ['tw
|
|
13939
|
+
const textStyles = ['tw:text-sq-text-color', 'tw:dark:text-sq-dark-text', 'tw:text-sm'].join(' ');
|
|
13942
13940
|
const textActiveStyles = [
|
|
13943
|
-
'hover:
|
|
13944
|
-
'
|
|
13945
|
-
'
|
|
13941
|
+
'tw:hover:text-sq-theme-dark',
|
|
13942
|
+
'tw:focus:text-sq-theme-dark',
|
|
13943
|
+
'tw:active:text-sq-theme-dark',
|
|
13944
|
+
'tw:dark:text-sq-dark-disabled-gray',
|
|
13945
|
+
'tw:dark:hover:text-sq-theme-dark-dark',
|
|
13946
|
+
'tw:dark:focus:text-sq-theme-dark-dark',
|
|
13947
|
+
'tw:dark:active:text-sq-theme-dark-dark',
|
|
13948
|
+
'tw:hover:text-sq-theme-dark',
|
|
13949
|
+
'tw:dark:text-sq-dark-disabled-gray',
|
|
13950
|
+
'tw:dark:hover:text-sq-theme-dark-dark',
|
|
13946
13951
|
].join(' ');
|
|
13947
13952
|
const menuStyles = [
|
|
13948
|
-
'tw
|
|
13949
|
-
'tw
|
|
13950
|
-
'tw
|
|
13951
|
-
'tw
|
|
13952
|
-
'dark:
|
|
13953
|
-
'tw
|
|
13954
|
-
'tw
|
|
13955
|
-
'
|
|
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]',
|
|
13956
13961
|
].join(' ');
|
|
13957
13962
|
const menuListStyles = [
|
|
13958
|
-
'tw
|
|
13959
|
-
'tw
|
|
13960
|
-
'dark:
|
|
13961
|
-
'tw
|
|
13962
|
-
'
|
|
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]',
|
|
13963
13968
|
'specSelectMenu',
|
|
13964
13969
|
].join(' ');
|
|
13965
13970
|
const groupHeadingStyles = [
|
|
13966
|
-
'tw
|
|
13967
|
-
'dark:
|
|
13968
|
-
'tw
|
|
13969
|
-
'tw
|
|
13970
|
-
'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',
|
|
13971
13976
|
'specSelectGroupHeading',
|
|
13972
13977
|
].join(' ');
|
|
13973
13978
|
const optionStyles = [
|
|
13974
|
-
'hover:
|
|
13975
|
-
'hover:
|
|
13976
|
-
'dark:hover:
|
|
13977
|
-
'tw
|
|
13978
|
-
'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',
|
|
13979
13984
|
'specSelectOption',
|
|
13980
13985
|
].join(' ');
|
|
13981
|
-
const disabledClasses$3 = ['tw
|
|
13982
|
-
const dropDownIndicatorStyles = `tw
|
|
13983
|
-
const placeholderStyles = ['tw
|
|
13986
|
+
const disabledClasses$3 = ['tw:bg-sq-field-disabled-gray', 'tw:!cursor-not-allowed', 'tw:opacity-50'].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(' ');
|
|
13984
13989
|
const multiValueStyles = [
|
|
13985
|
-
'tw
|
|
13986
|
-
'dark:
|
|
13987
|
-
'tw
|
|
13988
|
-
'tw
|
|
13989
|
-
'tw
|
|
13990
|
-
'tw
|
|
13991
|
-
'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',
|
|
13992
13997
|
'specOpenSelect',
|
|
13993
13998
|
].join(' ');
|
|
13994
13999
|
/**
|
|
@@ -14053,38 +14058,38 @@ const Select = ({ options, value, placeholder = 'select', noOptionsMessage = 'no
|
|
|
14053
14058
|
filterOption: filterOption ? filterOption : filterConfig ? createFilter(filterConfig) : undefined,
|
|
14054
14059
|
classNames: {
|
|
14055
14060
|
control: ({ menuIsOpen }) => {
|
|
14056
|
-
let border = menuIsOpen ? 'tw
|
|
14061
|
+
let border = menuIsOpen ? 'tw:rounded-t-md' : 'tw:rounded-md';
|
|
14057
14062
|
// if it's on the left side of the input group make sure the right side is straight and not curved
|
|
14058
14063
|
if (inputGroup === 'left') {
|
|
14059
|
-
border = menuIsOpen ? 'tw
|
|
14064
|
+
border = menuIsOpen ? 'tw:rounded-tl-md' : 'tw:rounded-l-md';
|
|
14060
14065
|
}
|
|
14061
14066
|
else if (inputGroup === 'right') {
|
|
14062
|
-
border = menuIsOpen ? 'tw
|
|
14067
|
+
border = menuIsOpen ? 'tw:rounded-tr-md' : 'tw:rounded-r-md';
|
|
14063
14068
|
}
|
|
14064
14069
|
const appliedClasses = `${borderStyles$3} ${isDisabled ? '' : borderActiveClasses} ${border} ${showError ? errorClasses$2 : borderColorClasses$2} ${small ? 'reactSelectMinHeightSmall' : 'reactSelectMinHeight'} ${controlClassNames}`;
|
|
14065
|
-
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'}`;
|
|
14066
14071
|
},
|
|
14067
14072
|
placeholder: () => placeholderStyles,
|
|
14068
14073
|
container: ({ selectProps }) => {
|
|
14069
|
-
const containerBorderStyles = selectProps?.menuIsOpen ? 'tw
|
|
14070
|
-
return `${textStyles} ${extraClassNames} ${containerBorderStyles}
|
|
14074
|
+
const containerBorderStyles = selectProps?.menuIsOpen ? 'tw:rounded-t-md' : 'tw:rounded-md';
|
|
14075
|
+
return `${textStyles} ${extraClassNames} ${containerBorderStyles} tw:!pointer-events-auto`;
|
|
14071
14076
|
},
|
|
14072
14077
|
input: () => textStyles + ' specSelectInput',
|
|
14073
14078
|
menuList: () => menuListStyles,
|
|
14074
14079
|
menu: () => menuStyles,
|
|
14075
|
-
menuPortal: () => '
|
|
14080
|
+
menuPortal: () => 'tw:!z-[9000]',
|
|
14076
14081
|
dropdownIndicator: () => dropDownIndicatorStyles,
|
|
14077
14082
|
option: ({ isSelected, isDisabled }) => {
|
|
14078
14083
|
let classes = optionStyles;
|
|
14079
14084
|
if (isDisabled) {
|
|
14080
14085
|
classes += ' specDisabledOption ';
|
|
14081
14086
|
}
|
|
14082
|
-
return isSelected ? classes + ' tw
|
|
14087
|
+
return isSelected ? classes + ' tw:bg-sq-colored-hover tw:dark:bg-sq-colored-hover-dark' : classes;
|
|
14083
14088
|
},
|
|
14084
14089
|
singleValue: () => 'specOpenSelect',
|
|
14085
14090
|
multiValue: () => multiValueStyles,
|
|
14086
|
-
multiValueRemove: () => 'hover:
|
|
14087
|
-
clearIndicator: () => 'tw
|
|
14091
|
+
multiValueRemove: () => 'tw:hover:text-sq-danger specSelectMultiValueRemove',
|
|
14092
|
+
clearIndicator: () => 'tw:text-sq-disabled-gray tw:hover:text-sq-danger specClearSelect',
|
|
14088
14093
|
group: () => 'specSelectGroup',
|
|
14089
14094
|
groupHeading: () => groupHeadingStyles,
|
|
14090
14095
|
},
|
|
@@ -14474,11 +14479,11 @@ var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
|
|
|
14474
14479
|
const Dialog = Root$4;
|
|
14475
14480
|
const DialogPortal = Portal$1;
|
|
14476
14481
|
const DialogClose = Close;
|
|
14477
|
-
const DialogContent = React__default.forwardRef(({ className, children, ...props }, ref) => (jsxs(DialogPortal, { children: [jsx$1("div", { className: "tw
|
|
14478
|
-
tw
|
|
14479
|
-
tw
|
|
14482
|
+
const DialogContent = React__default.forwardRef(({ className, children, ...props }, ref) => (jsxs(DialogPortal, { children: [jsx$1("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 " }), 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:shadow-lg tw:duration-200
|
|
14484
|
+
tw:rounded-lg ${className}`, ...props, children: [jsx$1(DialogTitle$1, { className: "tw:hidden" }), children] })] })));
|
|
14480
14485
|
DialogContent.displayName = Content$2.displayName;
|
|
14481
|
-
const DialogHeader = (props) => (jsx$1("div", { className: "tw
|
|
14486
|
+
const DialogHeader = (props) => (jsx$1("div", { className: "tw:w-full tw:justify-between", children: jsx$1("div", { ...props }) }));
|
|
14482
14487
|
DialogHeader.displayName = 'DialogHeader';
|
|
14483
14488
|
const DialogFooter = (props) => jsx$1("div", { ...props });
|
|
14484
14489
|
DialogFooter.displayName = 'DialogFooter';
|
|
@@ -14516,26 +14521,26 @@ const Modal = ({ titleIcon, title = 'Modal title example', titleSuffixLabel, sub
|
|
|
14516
14521
|
let titleIconElement = jsx$1(Fragment, {});
|
|
14517
14522
|
if (titleIcon) {
|
|
14518
14523
|
if (typeof titleIcon === 'string') {
|
|
14519
|
-
titleIconElement = (jsx$1(Icon, { icon: titleIcon, testId: "modalTitleIcon", extraClassNames: "tw
|
|
14524
|
+
titleIconElement = (jsx$1(Icon, { icon: titleIcon, testId: "modalTitleIcon", extraClassNames: "tw:flex tw:text-xl tw:mt-1" }));
|
|
14520
14525
|
}
|
|
14521
14526
|
else {
|
|
14522
|
-
titleIconElement = jsx$1("div", { className: "tw
|
|
14527
|
+
titleIconElement = jsx$1("div", { className: "tw:mt-1.5", children: titleIcon });
|
|
14523
14528
|
}
|
|
14524
14529
|
}
|
|
14525
|
-
return (jsxs(Fragment, { children: [titleIcon && titleIconPosition === 'left' ? jsx$1("div", { className: "tw
|
|
14530
|
+
return (jsxs(Fragment, { children: [titleIcon && titleIconPosition === 'left' ? jsx$1("div", { className: "tw:flex tw:mr-2", children: titleIconElement }) : jsx$1(Fragment, {}), jsx$1(DialogTitle, { asChild: true, children: isTitleEditable ? (jsxs("div", { className: "tw:flex tw:w-full tw:items-center", children: [jsx$1(TextField, { extraClassNames: inputExtraClassNames, value: title, type: "text", testId: "modalTitle", onChange: onTitleChanged, placeholder: titlePlaceholder, required: titleRequired, showError: !!titleError }), titleError && jsx$1("p", { className: "tw:text-sq-danger tw:min-w-fit tw:pl-2 tw:mb-0", children: titleError })] })) : (customHeader ?? (jsxs("div", { "data-testid": "modalTitle", className: "modal-title", children: [jsxs("div", { className: "tw:flex tw:items-center", children: [jsx$1("h3", { children: title }), titleSuffixLabel && jsx$1("span", { className: "tw:text-xl tw:pl-0.5", children: titleSuffixLabel })] }), subtitle && (jsx$1("div", { className: "tw:italic tw:text-sm tw:text-left tw:mt-1", "data-testid": "modal-subtitle", children: subtitle }))] }))) }), titleIcon && titleIconPosition === 'right' ? jsx$1("div", { className: "tw:flex tw:ml-4", children: titleIconElement }) : jsx$1(Fragment, {})] }));
|
|
14526
14531
|
};
|
|
14527
|
-
return open ? (jsx$1(Dialog, { open: true, onOpenChange: onClose, modal: keepFocusInsideModal, children: jsxs(DialogContent, { onPointerDownOutside: (e) => (onPointerDownOutside ? onPointerDownOutside(e) : e.preventDefault()), onInteractOutside: (e) => (onInteractOutside ? onInteractOutside(e) : e.preventDefault()), "data-testid": testId, className: classNames(`modalContent tw
|
|
14528
|
-
'tw
|
|
14529
|
-
'tw
|
|
14530
|
-
'tw
|
|
14531
|
-
'tw
|
|
14532
|
-
'tw
|
|
14533
|
-
'tw
|
|
14534
|
-
'tw
|
|
14535
|
-
'tw
|
|
14536
|
-
'tw
|
|
14537
|
-
'tw
|
|
14538
|
-
}, dialogClassName), children: [jsxs(DialogHeader, { className: "modal-header tw
|
|
14532
|
+
return open ? (jsx$1(Dialog, { open: true, onOpenChange: onClose, modal: keepFocusInsideModal, children: 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: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: [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: [jsx$1("div", { className: "tw:flex tw:w-full", children: renderTitle() }), !hideCloseIcon && (jsx$1(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: jsx$1("span", { className: "tw:cursor-pointer", children: "\u00D7" }) }))] }), jsx$1(DialogDescription, { className: "modal-body tw:px-6 tw:py-4 tw:overflow-y-auto", asChild: true, children: children }), !hideFooterButtons && (jsx$1(DialogFooter, { className: "modal-footer tw:px-6 tw:py-4", children: modalFooter ?? (jsxs("div", { className: "tw:flex tw:w-full tw:justify-between", "data-testid": "modalFooter", children: [jsx$1("div", { className: "tw:flex tw:justify-start", children: customButton && (jsx$1(Button, { label: customButtonLabel, onClick: onClickCustomButton, disabled: disableCustomButton, extraClassNames: "tw:justify-start tw:min-w-25", testId: "customButton", variant: customButtonVariant })) }), jsxs("div", { className: "tw:flex tw:justify-end", children: [jsx$1("div", { className: "tw:flex tw:items-center", children: middleFooterSection }), !hideCancelButton && (jsx$1(DialogClose, { asChild: true, children: jsx$1(Button, { label: cancelButtonLabel, extraClassNames: "tw:mr-5 tw:min-w-25", tooltip: cancelButtonTooltip, variant: "outline", stopPropagation: false, testId: "cancelButton" }) })), !hideSubmitButton && (jsx$1(Button, { label: submitButtonLabel, onClick: handleSubmit, disabled: disableSubmitButton || isLoading, variant: submitButtonVariant, stopPropagation: stopPropagationSubmitButton, tooltip: submitButtonTooltip, icon: isLoading ? 'fc-loading-notch tw:animate-spin' : undefined, iconPosition: "left", testId: "submitButton", extraClassNames: "tw:min-w-25" }))] })] })) }))] }) })) : (jsx$1(Fragment, {}));
|
|
14539
14544
|
};
|
|
14540
14545
|
|
|
14541
14546
|
function createCollection(name) {
|
|
@@ -14993,11 +14998,11 @@ const Tabs = ({ tabs, defaultActiveTab, activeTab, onTabSelect, extraClassNames,
|
|
|
14993
14998
|
return;
|
|
14994
14999
|
onTabSelect && onTabSelect(tabId);
|
|
14995
15000
|
};
|
|
14996
|
-
return (jsxs(Root2$2, { className: `tw
|
|
14997
|
-
? 'tw
|
|
14998
|
-
: 'hover:
|
|
14999
|
-
? 'dark:
|
|
15000
|
-
: 'dark:
|
|
15001
|
+
return (jsxs(Root2$2, { className: `tw:flex tw:flex-col tw:min-w-75 tw:max-w-full tw:flex-grow tw:focus-visible:outline-none ${extraClassNames || ''}`, defaultValue: defaultActiveTab, "data-testid": testId, id: id, value: activeTab, onValueChange: handleTabSelect, children: [jsx$1(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) => (jsx$1(Trigger$2, { className: `tw:bg-sq-white tw:dark:bg-sq-dark-background tw:h-sq-25 tw:focus-visible:outline-none tw:min-w-25 tw:px-4 tw:border-solid tw:flex tw:flex-1 tw:justify-center tw:items-center tw:border-r-[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-darker tw:dark:border-b-sq-theme-darker tw:border-b-[0.1875rem]'
|
|
15003
|
+
: 'tw:hover:bg-sq-light-gray tw:border-b-[0.0625rem] tw:hover:dark:bg-gray-700'}`, "data-testid": tabsTestId, disabled: disabled, value: id, children: jsxs("span", { className: "tw:flex tw:items-center tw:overflow-hidden", children: [icon && (jsx$1(Icon, { icon: icon, testId: `${id}_tab-icon`, extraClassNames: "tw:text-sq-15 tw:mr-sq-7 tw:flex-shrink-0" })), jsx$1("span", { className: `tw:text-sq-13 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) => (jsx$1(Content$1, { className: `tw:bg-sq-white tw:dark:bg-sq-dark-background tw:overflow-y-auto tw:-mt-sq-1 tw:border-t-[0.0625rem] 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`)))] }));
|
|
15001
15006
|
};
|
|
15002
15007
|
|
|
15003
15008
|
var COLLAPSIBLE_NAME = "Collapsible";
|
|
@@ -15422,18 +15427,18 @@ var Trigger2 = AccordionTrigger;
|
|
|
15422
15427
|
var Content2$2 = AccordionContent;
|
|
15423
15428
|
|
|
15424
15429
|
const Accordion = ({ accordionItems, defaultValue, value, onItemSelect, disabled, extraClassNames, testId, }) => {
|
|
15425
|
-
return (jsx$1(Root2$1, { className: `tw
|
|
15430
|
+
return (jsx$1(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) => (jsxs(Item, { className: `tw:p-0 tw:flex tw:flex-col tw:w-full`, disabled: disabled, value: item.value, children: [jsx$1(Trigger2, { disabled: disabled, className: `tw:w-full tw:cursor-default tw:focus-visible:outline-none tw:bg-transparent`, children: item.trigger }), jsx$1(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))) }));
|
|
15426
15431
|
};
|
|
15427
15432
|
|
|
15428
|
-
const bgStyles$2 = ['tw
|
|
15433
|
+
const bgStyles$2 = ['tw:bg-sq-white', 'tw:dark:bg-sq-dark-background'].join(' ');
|
|
15429
15434
|
const borderStyles$2 = [
|
|
15430
|
-
'tw
|
|
15431
|
-
'tw
|
|
15432
|
-
'tw
|
|
15433
|
-
'tw
|
|
15434
|
-
'dark:
|
|
15435
|
+
'tw:border-solid',
|
|
15436
|
+
'tw:border',
|
|
15437
|
+
'tw:rounded-[0.5rem]',
|
|
15438
|
+
'tw:border-sq-disabled-gray',
|
|
15439
|
+
'tw:dark:border-gray-500',
|
|
15435
15440
|
].join(' ');
|
|
15436
|
-
const disabledClasses$2 = ['tw
|
|
15441
|
+
const disabledClasses$2 = ['tw:opacity-50', 'tw:cursor-not-allowed'].join(' ');
|
|
15437
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 }) => {
|
|
15438
15443
|
const tooltipData = getQTipData(tooltipProps);
|
|
15439
15444
|
const timeout = useRef(null);
|
|
@@ -15464,12 +15469,12 @@ const ButtonWithPopover = ({ children, trigger, id, hasArrow, extraTriggerClassN
|
|
|
15464
15469
|
};
|
|
15465
15470
|
React.useEffect(() => clearHoverTimeout, []);
|
|
15466
15471
|
const renderContent = () => {
|
|
15467
|
-
return (jsx$1(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:
|
|
15468
|
-
data-[side=top]:
|
|
15469
|
-
${extraPopoverClassNames || ''}`, children: [hasArrow && (jsx$1(Arrow2$2, { asChild: true, children: jsx$1("div", { className: "tw
|
|
15472
|
+
return (jsx$1(Content2$3, { sideOffset: placementOffset, align: align, side: placement, onInteractOutside: onInteractOutside, onPointerDownOutside: onPointerDownOutside, alignOffset: isHoverEnabled ? -10 : alignOffset, asChild: true, onClick: () => isCloseOnContentClick && onOpenChange && onOpenChange(false), className: "tw:focus-visible:outline-none tw:outline-none tw:w-full tw:h-full", children: 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 tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out
|
|
15473
|
+
tw:data-[side=top]:animate-slideDownAndFade tw:data-[side=right]:animate-slideLeftAndFade tw:data-[side=bottom]:animate-slideUpAndFade tw:data-[side=left]:animate-slideRightAndFade tw:text-sq-text-color
|
|
15474
|
+
${extraPopoverClassNames || ''}`, children: [hasArrow && (jsx$1(Arrow2$2, { asChild: true, children: jsx$1("div", { className: "tw:fill-transparent tw:bg-sq-white tw:w-sq-15 tw:h-sq-15 tw:-mt-sq-7 tw:rotate-45 tw:dark:bg-sq-dark-background tw:border-b tw:border-r tw:border-sq-disabled-gray tw:dark:border-gray-500" }) })), children] }) }));
|
|
15470
15475
|
};
|
|
15471
15476
|
const renderPopover = (popoverOpenState) => {
|
|
15472
|
-
return (jsxs(Root2$3, { open: popoverOpenState, defaultOpen: false, onOpenChange: onOpenChange, children: [trigger ? (jsx$1(Trigger$3, { id: id, asChild: isTriggerAsChild, className: `focus-visible:
|
|
15477
|
+
return (jsxs(Root2$3, { open: popoverOpenState, defaultOpen: false, onOpenChange: onOpenChange, children: [trigger ? (jsx$1(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: jsx$1("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 }) })) : (jsx$1(Trigger$3, { asChild: true, children: jsx$1("div", {}) })), isPortal ? jsx$1(Portal$2, { children: renderContent() }) : renderContent()] }));
|
|
15473
15478
|
};
|
|
15474
15479
|
return isHoverEnabled ? renderPopover(isHoveredOpen) : renderPopover(isOpen);
|
|
15475
15480
|
};
|
|
@@ -16534,65 +16539,65 @@ var SubTrigger2 = DropdownMenuSubTrigger;
|
|
|
16534
16539
|
var SubContent2 = DropdownMenuSubContent;
|
|
16535
16540
|
|
|
16536
16541
|
const borderStyles$1 = [
|
|
16537
|
-
'tw
|
|
16538
|
-
'tw
|
|
16539
|
-
'tw
|
|
16540
|
-
'tw
|
|
16541
|
-
'dark:
|
|
16542
|
+
'tw:border-solid',
|
|
16543
|
+
'tw:border',
|
|
16544
|
+
'tw:rounded-[0.5rem]',
|
|
16545
|
+
'tw:border-sq-disabled-gray',
|
|
16546
|
+
'tw:dark:border-gray-500',
|
|
16542
16547
|
].join(' ');
|
|
16543
|
-
const bgStyles$1 = ['tw
|
|
16544
|
-
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(' ');
|
|
16545
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 }) => {
|
|
16546
16551
|
const tooltipData = getQTipData(tooltipProps);
|
|
16547
|
-
return (jsxs(Root2, { defaultOpen: false, open: isOpen, onOpenChange: onOpenChange, modal: keepFocusInsideDropdown, children: [jsx$1(Trigger, { id: id, className: `tw-border-none focus-visible:
|
|
16552
|
+
return (jsxs(Root2, { defaultOpen: false, open: isOpen, onOpenChange: onOpenChange, modal: keepFocusInsideDropdown, children: [jsx$1(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: jsx$1("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 }) }), jsx$1(Portal2, { children: jsx$1(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: 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 && (jsx$1(Arrow2, { asChild: true, children: jsx$1("div", { className: "tw:fill-transparent tw:bg-sq-white tw:w-sq-15 tw:h-sq-15 tw:rotate-45 tw:dark:bg-sq-dark-background tw:border-b tw:border-r tw:border-sq-disabled-gray tw:dark:border-gray-500 tw:-mt-sq-7" }) })), dropdownItems.map((item, index) => {
|
|
16548
16553
|
const tooltipData = getQTipData(item);
|
|
16549
16554
|
if (item.isLabel) {
|
|
16550
|
-
return (jsxs(Label2, { className: item.itemExtraClassNames, ...tooltipData, children: [item.icon && (jsx$1(Icon, { icon: item.icon, testId: item.iconTestId, type: "text", color: item.iconColor, extraClassNames: "tw
|
|
16555
|
+
return (jsxs(Label2, { className: item.itemExtraClassNames, ...tooltipData, children: [item.icon && (jsx$1(Icon, { icon: item.icon, testId: item.iconTestId, type: "text", color: item.iconColor, extraClassNames: "tw:text-sq-text-color tw:dark:text-sq-white tw:w-4.5" })), jsx$1("div", { "data-testid": item.labelTestId, className: `tw:text-sq-13 tw:ml-1 ${item.disabled ? 'tw:text-sq-disabled-gray' : 'tw:text-sq-text-color tw:dark:text-sq-white'} tw:not-italic tw:font-normal ${item.labelClasses}`, children: item.label })] }, (item.id || '') + index));
|
|
16551
16556
|
}
|
|
16552
16557
|
if (Array.isArray(item.subMenuItems) && item.subMenuItems.length > 0) {
|
|
16553
|
-
return (jsxs(Sub2, { children: [jsxs(SubTrigger2, { id: id, className: `tw
|
|
16554
|
-
? '
|
|
16555
|
-
: 'tw
|
|
16556
|
-
return (jsxs(Item2, { onSelect: subItem.onClick, "data-qtip-text": subItem.tooltip, className: "tw
|
|
16557
|
-
? 'tw
|
|
16558
|
-
: 'tw
|
|
16558
|
+
return (jsxs(Sub2, { children: [jsxs(SubTrigger2, { id: id, className: `tw:cursor-pointer tw:flex tw:justify-between tw:dark:text-sq-white tw:hover:bg-sq-gray-highlight tw:dark:hover:bg-sq-gray-highlight-dark tw:leading-none tw:items-center tw:h-sq-27 tw:pl-sq-19 tw:relative tw:select-none tw:outline-none tw:data-disabled:pointer-events-none ${item.itemExtraClassNames || ''}`, "data-testid": item.testId, disabled: item.disabled, ...tooltipData, children: [jsxs("div", { className: "tw:flex", children: [item.icon && (jsx$1(Icon, { icon: item.icon, extraClassNames: `tw:w-4.5 ${item.disabled
|
|
16559
|
+
? 'tw:!text-sq-disabled-gray'
|
|
16560
|
+
: 'tw:text-sq-text-color tw:dark:text-sq-white'} ${item.iconExtraClassNames || ''}` })), jsx$1("div", { "data-testid": item.labelTestId, "data-customid": item.labelCustomId, className: `tw:text-sq-13 tw:ml-1 ${item.disabled && 'tw:!opacity-30'} tw:not-italic tw:font-semibold ${item.labelClasses}`, children: item.label })] }), jsx$1(Icon, { size: "sm", icon: "fc-arrow-dropdown tw:rotate-270", extraClassNames: `${item.disabled ? 'tw:text-sq-disabled-gray' : 'tw:text-sq-text-color tw:dark:text-sq-white'} tw:w-4.5 tw:ml-4 tw:text-2 tw:justify-center tw:flex` })] }), jsx$1(Portal2, { children: jsx$1(SubContent2, { className: "tw:focus-visible:outline-none tw:outline-none", children: jsx$1("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 (jsxs(Item2, { onSelect: subItem.onClick, "data-qtip-text": subItem.tooltip, className: "tw:cursor-pointer tw:flex tw:dark:text-sq-white tw:hover:bg-sq-gray-highlight tw:dark:hover:bg-sq-gray-highlight-dark tw:leading-none tw:items-center tw:h-sq-27 tw:px-sq-19 tw:relative tw:select-none tw:outline-none tw:data-disabled:pointer-events-none", disabled: subItem.disabled, children: [subItem.iconClass && (jsx$1(Icon, { icon: subItem.iconClass, type: "text", extraClassNames: `tw:w-4.5 ${item.disabled && 'tw:!opacity-30'}` })), jsx$1("div", { className: `tw:text-sq-13 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));
|
|
16559
16564
|
}) }) }) })] }, (item.id || item.icon || '') + index));
|
|
16560
16565
|
}
|
|
16561
16566
|
return (jsxs("div", { ...tooltipData, children: [jsxs(Item2, { "data-customid": item.itemCustomId, onSelect: (e) => {
|
|
16562
16567
|
item.onClick(e);
|
|
16563
|
-
}, 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-sq-27 tw:px-sq-19 tw:relative tw:select-none tw:outline-none tw:data-disabled:pointer-events-none ${item.itemExtraClassNames || ''}`, "data-testid": item.testId, disabled: item.disabled, children: [item.icon && (jsx$1(Icon, { icon: item.icon, testId: item.iconTestId, type: (item.iconType || 'text'), color: item.iconColor, customId: item.iconCustomId, extraClassNames: `tw:w-sq-4.5 ${item.disabled && 'tw:!opacity-30'} ${item.iconExtraClassNames || ''}` })), jsx$1("div", { "data-testid": item.labelTestId, "data-customid": item.labelCustomId, className: `tw:text-sq-13 tw:ml-1 ${item.disabled ? 'tw:text-sq-disabled-gray' : 'tw:text-sq-text-color tw:dark:text-sq-white'} tw:not-italic tw:font-normal ${item.labelClasses || ''}`, children: item.label })] }, (item.id || item.icon || '') + index), item.hasDivider && (jsx$1(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));
|
|
16564
16569
|
})] }) }) })] }));
|
|
16565
16570
|
};
|
|
16566
16571
|
|
|
16567
|
-
const baseClasses$2 = 'tw
|
|
16568
|
-
' tw
|
|
16569
|
-
const darkTheme$1 = 'dark:
|
|
16570
|
-
const lightTheme$1 = 'tw
|
|
16571
|
-
const errorClasses$1 = 'tw
|
|
16572
|
-
const borderColorClasses$1 = 'tw
|
|
16572
|
+
const baseClasses$2 = 'tw:mx-auto 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/10';
|
|
16576
|
+
const errorClasses$1 = 'tw:border-sq-danger';
|
|
16577
|
+
const borderColorClasses$1 = 'tw:border-sq-theme-dark';
|
|
16573
16578
|
/**
|
|
16574
16579
|
* Alert.
|
|
16575
16580
|
*/
|
|
16576
16581
|
const Alert = ({ children, dismissible = true, onClose, show = true, variant, testId = 'alert-id', id, extraClassNames, ...tooltipProps }) => {
|
|
16577
16582
|
const appliedTheme = {
|
|
16578
16583
|
theme: `${lightTheme$1} ${darkTheme$1}`,
|
|
16579
|
-
formulaError: 'tw
|
|
16580
|
-
danger: 'tw
|
|
16581
|
-
warning: 'tw
|
|
16582
|
-
gray: 'tw
|
|
16584
|
+
formulaError: 'tw:text-red-800 tw:bg-red-200 tw:!rounded-[0.25rem]',
|
|
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',
|
|
16583
16588
|
};
|
|
16584
16589
|
const appliedBorderTheme = {
|
|
16585
16590
|
theme: borderColorClasses$1,
|
|
16586
16591
|
danger: errorClasses$1,
|
|
16587
|
-
warning: 'tw
|
|
16588
|
-
gray: 'tw
|
|
16589
|
-
formulaError: 'tw
|
|
16592
|
+
warning: 'tw:border-none',
|
|
16593
|
+
gray: 'tw:border-sq-darkish-gray',
|
|
16594
|
+
formulaError: 'tw:border-red-100',
|
|
16590
16595
|
};
|
|
16591
16596
|
const appliedClasses = `${baseClasses$2} ${appliedTheme[variant]} ${extraClassNames} ${appliedBorderTheme[variant]}`;
|
|
16592
16597
|
if (!show) {
|
|
16593
16598
|
return jsx$1("div", {});
|
|
16594
16599
|
}
|
|
16595
|
-
return (jsxs("div", { "data-testid": testId, id: id, className: appliedClasses, children: [children, dismissible && (jsx$1(Icon, { icon: "fc-delete", type: variant.match(/danger|warning|formulaError/) ? 'color' : 'theme', color: variant.match(/danger|warning|formulaError/) ? 'inherit' : undefined, extraClassNames: `tw
|
|
16600
|
+
return (jsxs("div", { "data-testid": testId, id: id, className: appliedClasses, children: [children, dismissible && (jsx$1(Icon, { icon: "fc-delete", type: variant.match(/danger|warning|formulaError/) ? 'color' : 'theme', color: variant.match(/danger|warning|formulaError/) ? 'inherit' : undefined, extraClassNames: `tw:self-end tw:text-size-11 tw:cursor-pointer tw:absolute tw:right-2.5 tw:top-2.5 ${variant.match(/danger|warning|gray|formulaError/) ? 'tw:text-sq-text-color tw:dark:text-sq-dark-text' : ''}`, testId: `${testId}-close-btn`, onClick: onClose, ...tooltipProps }))] }));
|
|
16596
16601
|
};
|
|
16597
16602
|
|
|
16598
16603
|
/**
|
|
@@ -16611,47 +16616,40 @@ const Alert = ({ children, dismissible = true, onClose, show = true, variant, te
|
|
|
16611
16616
|
* @param tooltipProps - props to pass to the tooltip
|
|
16612
16617
|
*/
|
|
16613
16618
|
const SvgIcon = ({ onClick, icon, color, type = 'default', extraClassNames, viewBox = '0 0 19 19', id, testId, customId, ...tooltipProps }) => {
|
|
16614
|
-
const appliedClassNames = `${onClick ? 'tw
|
|
16615
|
-
tw
|
|
16619
|
+
const appliedClassNames = `${onClick ? 'tw:cursor-pointer' : ''} ${extraClassNames} tw:focus:outline-none tw:focus-visible:outline-none
|
|
16620
|
+
tw:outline-none`;
|
|
16616
16621
|
const tooltipData = getQTipData(tooltipProps);
|
|
16617
16622
|
const appliedType = type === 'default' ? 'currentColor' : 'rgb(var(--sq-icon))';
|
|
16618
|
-
return (jsx$1("div", { onClick: onClick, ...tooltipData, className: `svgContainer ${appliedClassNames}`, children: jsx$1("svg", { xmlns: "http://www.w3.org/2000/svg", className: `tw
|
|
16623
|
+
return (jsx$1("div", { onClick: onClick, ...tooltipData, className: `svgContainer ${appliedClassNames}`, children: jsx$1("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: jsx$1("path", { d: getSvgIconPath(icon) }) }) }));
|
|
16619
16624
|
};
|
|
16620
16625
|
|
|
16621
16626
|
const SeeqActionDropdownItem = (item) => {
|
|
16622
16627
|
let renderIcon = jsx$1(Fragment, {});
|
|
16623
16628
|
if (item.icon) {
|
|
16624
|
-
renderIcon = isSvgIcon(item.icon) ? (jsx$1(SvgIcon, { icon: item.icon, extraClassNames: 'tw-
|
|
16625
|
-
' dark:tw-text-sq-white tw-text-[22px] tw-text-sq-white ' +
|
|
16626
|
-
item.iconExtraClassNames, ...item })) : (jsx$1(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 ' +
|
|
16627
|
-
item.iconExtraClassNames }));
|
|
16629
|
+
renderIcon = isSvgIcon(item.icon) ? (jsx$1(SvgIcon, { icon: item.icon, extraClassNames: item.iconExtraClassNames + 'tw:p-1 tw:h-8 tw:w-8 tw:dark:text-sq-white tw:!text-5.5 tw:text-sq-white', ...item })) : (jsx$1(Icon, { icon: item.icon, type: "text", extraClassNames: 'tw:dark:text-sq-white tw:!text-5.5 tw:text-sq-white ' + item.iconExtraClassNames }));
|
|
16628
16630
|
}
|
|
16629
|
-
return (jsxs("div", { className: "tw
|
|
16631
|
+
return (jsxs("div", { className: "tw:flex-col tw:flex tw:p-2.5 tw:pl-5 tw:w-150", children: [jsxs("div", { className: "tw:flex tw:flex-row tw:gap-2 tw:items-end", children: [jsx$1("div", { className: classNames('tw:rounded-[0.1875rem] tw:h-8 tw:w-8 tw:bg-sq-theme-dark tw:flex tw:justify-center tw:items-center ', item.iconContainerExtraClassNames), children: renderIcon }), jsx$1("h4", { className: "tw:text-base tw:font-[600] tw:leading-5 mb-0", children: item.display })] }), jsx$1("div", { className: "tw:text-sq-13 tw:font-normal", children: item.text })] }));
|
|
16630
16632
|
};
|
|
16631
16633
|
const ViewWorkbench = (item) => {
|
|
16632
16634
|
let renderIcon = jsx$1(Fragment, {});
|
|
16633
16635
|
if (item.icon) {
|
|
16634
|
-
renderIcon = isSvgIcon(item.icon) ? (jsx$1(SvgIcon, { icon: item.icon, extraClassNames: 'tw-
|
|
16635
|
-
' tw-text-sq-text-color ' +
|
|
16636
|
-
item.iconExtraClassNames, type: "default", ...item })) : (jsx$1(Icon, { icon: item.icon, type: "text", extraClassNames: 'tw-flex tw-justify-center tw-items-center tw-text-[1.25rem] dark:tw-text-sq-white' +
|
|
16637
|
-
' tw-text-sq-text-color ' +
|
|
16638
|
-
item.iconExtraClassNames }));
|
|
16636
|
+
renderIcon = isSvgIcon(item.icon) ? (jsx$1(SvgIcon, { icon: item.icon, extraClassNames: 'tw:w-4 tw:text-5 tw:dark:text-sq-white' + ' tw:text-sq-text-color ' + item.iconExtraClassNames, type: "default", ...item })) : (jsx$1(Icon, { icon: item.icon, type: "text", extraClassNames: 'tw:text-5 tw:dark:text-sq-white tw:text-sq-text-color ' + item.iconExtraClassNames }));
|
|
16639
16637
|
}
|
|
16640
|
-
return (jsx$1("div", { className: "tw
|
|
16638
|
+
return (jsx$1("div", { className: "tw:flex-col tw:flex tw:p-2.5", children: jsxs("div", { className: "tw:flex tw:flex-row tw:gap-2 tw:items-end", children: [jsx$1("div", { className: "tw:rounded-[0.1875rem] tw:h-5 tw:w-5 tw:flex tw:justify-center tw:items-center ", children: renderIcon }), jsx$1("div", { className: "tw:text-sq-13", children: item.display })] }) }));
|
|
16641
16639
|
};
|
|
16642
16640
|
const InsertSeeqContent = (item) => {
|
|
16643
|
-
return (jsxs("div", { className: "tw
|
|
16641
|
+
return (jsxs("div", { className: "tw:flex-col tw:flex tw:justify-start tw:p-2.5 tw:font-normal tw:text-left tw:text-sq-text-color tw:dark:text-sq-dark-text", children: [jsx$1("h5", { className: "tw:text-4 tw:font-medium tw:text-sq-theme-dark tw:leading-4.5", children: item.display }), jsx$1("div", { className: "tw:text-sq-13 tw:text-sq-text-color tw:dark:text-sq-dark-text tw:!mt-1", children: item.text })] }));
|
|
16644
16642
|
};
|
|
16645
16643
|
|
|
16646
16644
|
const borderStyles = [
|
|
16647
|
-
'tw
|
|
16648
|
-
'tw
|
|
16649
|
-
'tw
|
|
16650
|
-
'tw
|
|
16651
|
-
'dark:
|
|
16645
|
+
'tw:border-solid',
|
|
16646
|
+
'tw:border',
|
|
16647
|
+
'tw:rounded-md',
|
|
16648
|
+
'tw:border-sq-disabled-gray',
|
|
16649
|
+
'tw:dark:border-gray-500',
|
|
16652
16650
|
].join(' ');
|
|
16653
|
-
const bgStyles = ['tw
|
|
16654
|
-
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(' ');
|
|
16655
16653
|
const renderItem = (variant, item) => {
|
|
16656
16654
|
switch (variant) {
|
|
16657
16655
|
case 'create-workbench':
|
|
@@ -16666,31 +16664,31 @@ const renderItem = (variant, item) => {
|
|
|
16666
16664
|
};
|
|
16667
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 }) => {
|
|
16668
16666
|
const tooltipData = getQTipData(tooltipProps);
|
|
16669
|
-
return (jsxs(Root2, { defaultOpen: false, open: isOpen, onOpenChange: onOpenChange, modal: keepFocusInsideDropdown, children: [jsx$1(Trigger, { id: id, "data-testid": id, className: `tw
|
|
16670
|
-
' tw
|
|
16671
|
-
' data-[state=open]:
|
|
16672
|
-
' forceFont data-[side=top]:
|
|
16673
|
-
borderStyles, children: [hasArrow && (jsx$1(Arrow2, { asChild: true, children: jsx$1("div", { className: " tw
|
|
16667
|
+
return (jsxs(Root2, { defaultOpen: false, open: isOpen, onOpenChange: onOpenChange, modal: keepFocusInsideDropdown, children: [jsx$1(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: jsx$1("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 }) }), jsx$1(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: 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 && (jsx$1(Arrow2, { asChild: true, children: jsx$1("div", { className: " tw:fill-transparent tw:bg-sq-white tw:w-sq-15 tw:h-sq-15 tw:rotate-45 tw:dark:bg-sq-dark-background tw:border-b tw:border-r tw:border-sq-disabled-gray tw:dark:border-gray-500 tw:-mt-sq-7" }) })), seeqActionDropdownItems.map((item, index) => {
|
|
16674
16672
|
return (jsxs("div", { children: [jsx$1(Item2, { onSelect: (e) => {
|
|
16675
16673
|
item.action(e);
|
|
16676
|
-
}, 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 && (jsx$1(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));
|
|
16677
16675
|
})] }) })] }));
|
|
16678
16676
|
};
|
|
16679
16677
|
|
|
16680
|
-
const baseClasses$1 = 'tw
|
|
16681
|
-
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';
|
|
16682
16680
|
const borderColorClasses = [
|
|
16683
|
-
'tw
|
|
16684
|
-
'dark:
|
|
16685
|
-
'dark:focus:
|
|
16686
|
-
'dark:active:
|
|
16687
|
-
'focus:
|
|
16688
|
-
'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',
|
|
16689
16687
|
].join(' ');
|
|
16690
|
-
const fieldBorderRadius = 'tw
|
|
16691
|
-
const fieldClasses = 'tw
|
|
16692
|
-
const darkTheme = 'dark:
|
|
16693
|
-
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';
|
|
16694
16692
|
/**
|
|
16695
16693
|
* InputGroup.
|
|
16696
16694
|
*/
|
|
@@ -16700,8 +16698,10 @@ const InputGroup = React__default.forwardRef((props, ref) => {
|
|
|
16700
16698
|
const appliedClasses = `${baseClasses$1} ${extraClassNames}`;
|
|
16701
16699
|
const fieldAppliedClasses = `${fieldClasses} ${extraClassNames} ${lightTheme} ${darkTheme} ${fieldBorderRadius} ${showError ? errorClasses : borderColorClasses} `;
|
|
16702
16700
|
const elementsToAppend = append.filter(Boolean);
|
|
16703
|
-
return (jsxs("div", { id: `input-group-${id}`, className: appliedClasses, children: [field ? (jsx$1("div", { "data-testid": testId, className: `tw
|
|
16704
|
-
return item?.variant === 'button' ? (jsx$1(Button, { extraClassNames: `$
|
|
16701
|
+
return (jsxs("div", { id: `input-group-${id}`, className: appliedClasses, children: [field ? (jsx$1("div", { "data-testid": testId, className: `tw:flex tw:flex-1 tw:cursor-pointer tw:active:z-50 ${fieldAppliedClasses}`, children: field })) : (jsx$1(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' ? (jsx$1(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)) : (jsx$1("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));
|
|
16705
16705
|
})] }));
|
|
16706
16706
|
});
|
|
16707
16707
|
|
|
@@ -27575,7 +27575,7 @@ var Thumb = SliderThumb;
|
|
|
27575
27575
|
*/
|
|
27576
27576
|
const Slider = (props) => {
|
|
27577
27577
|
const { onValueChange, onPointerUp, id, value, name, disabled = false, rootExtraClassNames = '', trackExtraClassNames = '', rangeExtraClassNames = '', thumbExtraClassNames = '', step, min, max, } = props;
|
|
27578
|
-
return (jsxs(Root$1, { className: `tw
|
|
27578
|
+
return (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: [jsx$1(Track, { className: `tw:relative tw:h-sq-5 tw:grow tw:rounded-sm tw:bg-sq-dark-gray tw:dark:bg-sq-dark-disabled-gray ${trackExtraClassNames}`, children: jsx$1(Range, { className: `tw:absolute tw:h-full tw:rounded-full ${rangeExtraClassNames}` }) }), jsx$1(Thumb, { className: `tw:block tw:h-sq-15 tw:w-sq-15 tw:rounded-full tw:bg-sq-theme-dark tw:active: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 })] }));
|
|
27579
27579
|
};
|
|
27580
27580
|
|
|
27581
27581
|
var PROGRESS_NAME = "Progress";
|
|
@@ -28844,7 +28844,7 @@ function validateWCAG2Parms(parms) {
|
|
|
28844
28844
|
};
|
|
28845
28845
|
}
|
|
28846
28846
|
|
|
28847
|
-
const baseLabelClasses = 'tw
|
|
28847
|
+
const baseLabelClasses = 'tw:left-1 tw:text-xs tw:text-sq-text-color tw:dark:text-sq-dark-text tw:items-center tw:h-4.5';
|
|
28848
28848
|
const ProgressIndicator = (props) => {
|
|
28849
28849
|
const { value, color = undefined, testId, label, extraClasses = '', labelClasses = '', valuesLength, max, index, totalValue, ...tooltipProps } = props;
|
|
28850
28850
|
const tooltipData = getQTipData(tooltipProps);
|
|
@@ -28857,19 +28857,19 @@ const ProgressIndicator = (props) => {
|
|
|
28857
28857
|
if (totalValue >= max) {
|
|
28858
28858
|
// If progress is 100%, round both ends
|
|
28859
28859
|
if (index === 0 && valuesLength === 1) {
|
|
28860
|
-
roundedCorners = 'tw
|
|
28860
|
+
roundedCorners = 'tw:rounded-[0.9375rem]';
|
|
28861
28861
|
}
|
|
28862
28862
|
else if (index === 0) {
|
|
28863
|
-
roundedCorners = 'tw
|
|
28863
|
+
roundedCorners = 'tw:rounded-l-[0.9375rem]';
|
|
28864
28864
|
}
|
|
28865
28865
|
else if (index === valuesLength - 1) {
|
|
28866
|
-
roundedCorners = 'tw
|
|
28866
|
+
roundedCorners = 'tw:rounded-r-[0.9375rem]';
|
|
28867
28867
|
}
|
|
28868
28868
|
}
|
|
28869
28869
|
else {
|
|
28870
28870
|
// Otherwise, only round the leftmost indicator
|
|
28871
28871
|
if (index === 0) {
|
|
28872
|
-
roundedCorners = 'tw
|
|
28872
|
+
roundedCorners = 'tw:rounded-l-[0.9375rem]';
|
|
28873
28873
|
}
|
|
28874
28874
|
}
|
|
28875
28875
|
useEffect(() => {
|
|
@@ -28881,13 +28881,13 @@ const ProgressIndicator = (props) => {
|
|
|
28881
28881
|
return () => clearTimeout(timeout);
|
|
28882
28882
|
}, [value]);
|
|
28883
28883
|
const bgColor = color || undefined;
|
|
28884
|
-
const bgClass = color ? '' : 'tw
|
|
28884
|
+
const bgClass = color ? '' : 'tw:bg-sq-theme-dark';
|
|
28885
28885
|
const computeTextClass = (elem) => {
|
|
28886
28886
|
const computedStyle = getComputedStyle(elem);
|
|
28887
28887
|
const backgroundColor = computedStyle.backgroundColor;
|
|
28888
28888
|
const textColorClass = tinycolor(backgroundColor).isDark()
|
|
28889
|
-
? 'tw
|
|
28890
|
-
: 'tw
|
|
28889
|
+
? 'tw:text-sq-white tw:dark:text-sq-white'
|
|
28890
|
+
: 'tw:text-sq-text-color tw:dark:text-sq-text-color';
|
|
28891
28891
|
setTextColorClass(textColorClass);
|
|
28892
28892
|
};
|
|
28893
28893
|
useEffect(() => {
|
|
@@ -28895,35 +28895,35 @@ const ProgressIndicator = (props) => {
|
|
|
28895
28895
|
computeTextClass(indicatorElementRef.current);
|
|
28896
28896
|
}
|
|
28897
28897
|
}, [!!indicatorElementRef.current]);
|
|
28898
|
-
return (createElement(Indicator, { className: `tw
|
|
28898
|
+
return (createElement(Indicator, { className: `tw:ease-[cubic-bezier(0.65, 0, 0.35, 1)] tw:w-full tw:h-4.5 tw:duration-[660ms] tw:flex tw:justify-center tw:items-center ${valuesLength === 1 ? '' : 'tw:overflow-hidden'} ${roundedCorners} ${bgClass} ${extraClasses}`, ...tooltipData, "data-qtip-text": tooltipProps.tooltip ? tooltipProps.tooltip : `${value}%`, "data-testid": `progress-bar-indicator-${testId ? testId : value}`, key: `${index}-${value}`, ref: indicatorElementRef, style: {
|
|
28899
28899
|
// Background color will default to the theme color if undefined
|
|
28900
28900
|
backgroundColor: bgColor,
|
|
28901
28901
|
animation: 'width 660ms forwards',
|
|
28902
28902
|
width: `${animatedWidth}%`,
|
|
28903
|
-
} }, label ? (jsx$1("span", { className: `${baseLabelClasses} ${labelClasses} ${textColorClass} ${valuesLength === 1 ? 'tw
|
|
28903
|
+
} }, label ? (jsx$1("span", { className: `${baseLabelClasses} ${labelClasses} ${textColorClass} ${valuesLength === 1 ? 'tw:absolute tw:z-50' : ''}`, children: label })) : undefined));
|
|
28904
28904
|
};
|
|
28905
28905
|
const ProgressBar = ({ values = [], max = 100, containerExtraClasses = '', zeroValueLabel = 'No progress yet', }) => {
|
|
28906
28906
|
const totalValue = values.reduce((acc, { value }) => acc + value, 0);
|
|
28907
|
-
return (jsx$1(Root, { className: `tw
|
|
28908
|
-
return createElement(ProgressIndicator, { ...props, max: max, valuesLength: values.length, index: i, totalValue: totalValue, key: i });
|
|
28909
|
-
})) : (jsx$1("div", { className: `${baseLabelClasses} tw
|
|
28907
|
+
return (jsx$1(Root, { className: `tw:relative tw:h-4.5 tw:w-full tw:overflow-hidden tw:rounded-[0.9375rem] tw:bg-sq-dark-gray tw:dark:bg-sq-dark-disabled-gray tw:flex tw:flex-1 ${containerExtraClasses}`, max: max, value: totalValue, children: totalValue > 0 ? (values.map((props, i) => {
|
|
28908
|
+
return (createElement(ProgressIndicator, { ...props, max: max, valuesLength: values.length, index: i, totalValue: totalValue, key: i }));
|
|
28909
|
+
})) : (jsx$1("div", { className: `${baseLabelClasses} tw:mx-auto tw:overflow-hidden`, children: zeroValueLabel })) }));
|
|
28910
28910
|
};
|
|
28911
28911
|
|
|
28912
|
-
const baseClasses = 'tw
|
|
28912
|
+
const baseClasses = 'tw:flex tw:outline-none tw:w-full tw:relative tw:flex-wrap';
|
|
28913
28913
|
const activeClassesByVariantLightTheme = {
|
|
28914
|
-
'outline': '
|
|
28915
|
-
'theme': 'tw
|
|
28914
|
+
'outline': 'tw:!bg-sq-disabled-gray tw:border-sq-theme-dark',
|
|
28915
|
+
'theme': 'tw:bg-sq-theme-highlight',
|
|
28916
28916
|
'danger': '',
|
|
28917
28917
|
'theme-light': '',
|
|
28918
|
-
'no-border': '
|
|
28918
|
+
'no-border': 'tw:!bg-sq-disabled-gray',
|
|
28919
28919
|
'warning': '',
|
|
28920
28920
|
};
|
|
28921
28921
|
const activeClassesByVariantDarkTheme = {
|
|
28922
|
-
'outline': 'dark
|
|
28923
|
-
'theme': 'dark:
|
|
28922
|
+
'outline': 'tw:!dark:bg-sq-multi-gray-dark tw:dark:border-sq-theme-dark',
|
|
28923
|
+
'theme': 'tw:dark:bg-sq-theme-highlight',
|
|
28924
28924
|
'danger': '',
|
|
28925
28925
|
'theme-light': '',
|
|
28926
|
-
'no-border': 'dark
|
|
28926
|
+
'no-border': 'tw:!dark:bg-sq-multi-gray-dark',
|
|
28927
28927
|
'warning': '',
|
|
28928
28928
|
};
|
|
28929
28929
|
/**
|
|
@@ -28935,7 +28935,7 @@ const ButtonGroup = (props) => {
|
|
|
28935
28935
|
const appliedClasses = `${baseClasses} ${extraClassNames}`;
|
|
28936
28936
|
return (jsx$1("div", { id: id ? `button-group-${id}` : undefined, "data-testid": testId, className: appliedClasses, ...tooltipData, children: buttons
|
|
28937
28937
|
.filter(Boolean)
|
|
28938
|
-
.map((item, index) => item?.variant === 'button' ? (jsx$1(Button, { ...item.buttonProps, extraClassNames: `tw
|
|
28938
|
+
.map((item, index) => item?.variant === 'button' ? (jsx$1(Button, { ...item.buttonProps, extraClassNames: `tw:-ml-sq-1 tw:focus:z-40 tw:outline-none tw:focus:border tw:rounded-none tw:first:rounded-l-md tw:last:rounded-r-md ${item.buttonProps?.isActive
|
|
28939
28939
|
? `${activeClassesByVariantLightTheme[item?.buttonProps?.variant ?? 'outline']} ${activeClassesByVariantDarkTheme[item?.buttonProps?.variant ?? 'outline']} `
|
|
28940
28940
|
: ''} ${item.buttonProps.extraClassNames}`, onClick: () => onChange && onChange(item?.buttonProps?.value) }, index)) : (item?.element)) }));
|
|
28941
28941
|
};
|
|
@@ -28945,7 +28945,7 @@ const ButtonGroup = (props) => {
|
|
|
28945
28945
|
* - Easily create a carousel with custom slides.
|
|
28946
28946
|
* - Supports automatic sliding, navigation arrows, and slide indicators.
|
|
28947
28947
|
*/
|
|
28948
|
-
const Carousel = ({ testId = 'carousel-id', activeIndex = 0, extraClassNames = '', onSlide = () => { }, autoSlide, showIndicators = true, continuous = true, interval = 4000, prevIcon = 'fc-arrow-dropdown tw
|
|
28948
|
+
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 = [], }) => {
|
|
28949
28949
|
const [currentIndex, setCurrentIndex] = useState(activeIndex);
|
|
28950
28950
|
const changeSlide = (nextIndex) => {
|
|
28951
28951
|
const newIndex = (nextIndex + carouselItems.length) % carouselItems.length;
|
|
@@ -29012,7 +29012,7 @@ const Carousel = ({ testId = 'carousel-id', activeIndex = 0, extraClassNames = '
|
|
|
29012
29012
|
transition: springTransition,
|
|
29013
29013
|
}),
|
|
29014
29014
|
};
|
|
29015
|
-
return (jsxs("div", { "data-testid": testId, className: `tw
|
|
29015
|
+
return (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: [jsxs("div", { className: "tw:flex tw:items-center tw:w-full tw:h-max tw:gap-1", children: [showArrows && (jsx$1(Button, { icon: prevIcon, size: "lg", variant: "no-border", testId: "carousel-prev", extraClassNames: `${currentIndex === 0 && !continuous ? 'tw:invisible' : ''} ${iconExtraClassNames} tw:animate-fadeIn`, onClick: onBackClick })), jsx$1("div", { className: "tw:h-full tw:w-full tw:overflow-hidden", children: jsx$1(motion.div, { custom: 1, initial: "initial", animate: "animate", exit: "exit", variants: slideVariants, className: "tw:w-full", children: carouselItems[currentIndex] }, currentIndex) }), showArrows && (jsx$1(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 && (jsx$1("div", { className: "tw:flex tw:gap-1 tw:mt-2", children: carouselItems.map((_, i) => (jsx$1("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))) }))] }));
|
|
29016
29016
|
};
|
|
29017
29017
|
|
|
29018
29018
|
const buttonTypes = ['button', 'reset', 'submit', 'link'];
|