@seeqdev/qomponents 0.0.69 → 0.0.71
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 +135 -135
- package/dist/Button/Button.types.d.ts +1 -5
- package/dist/ButtonWithPopover/ButtonWithPopover.types.d.ts +6 -0
- package/dist/Select/Select.types.d.ts +6 -0
- package/dist/example/.eslintrc.cjs +14 -14
- package/dist/example/README.md +33 -33
- package/dist/example/index.html +13 -13
- package/dist/example/package.json +30 -30
- package/dist/example/src/ComplexSelectExample.tsx +81 -81
- package/dist/example/src/Example.tsx +167 -167
- package/dist/example/src/index.css +102 -102
- package/dist/example/src/main.tsx +10 -10
- package/dist/example/src/vite-env.d.ts +1 -1
- package/dist/example/tsconfig.json +33 -33
- package/dist/example/tsconfig.node.json +12 -12
- package/dist/example/vite.config.ts +12 -12
- package/dist/index.esm.js +45 -28
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +45 -28
- package/dist/index.js.map +1 -1
- package/dist/styles.css +3281 -3272
- package/package.json +83 -83
|
@@ -1,102 +1,102 @@
|
|
|
1
|
-
@import '@seeqdev/qomponents/dist/styles.css';
|
|
2
|
-
@import '@fortawesome/fontawesome-free/css/all.css';
|
|
3
|
-
|
|
4
|
-
.tw-light {
|
|
5
|
-
background-color: white;
|
|
6
|
-
color: #1a1a1a;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
.tw-dark {
|
|
10
|
-
background-color: rgb(36, 36, 34);
|
|
11
|
-
color: rgb(194, 188, 176);
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
.formPanel {
|
|
15
|
-
align-items: center;
|
|
16
|
-
width: 500px;
|
|
17
|
-
display: flex;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
.header {
|
|
21
|
-
font-size: larger;
|
|
22
|
-
font-weight: bold;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
.backdrop {
|
|
26
|
-
margin: 0;
|
|
27
|
-
display: flex;
|
|
28
|
-
justify-content: center;
|
|
29
|
-
align-items: center;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
.scroll-container {
|
|
33
|
-
margin: auto;
|
|
34
|
-
max-height: 100%;
|
|
35
|
-
overflow: auto;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
.flex-container {
|
|
39
|
-
margin-top: 30px;
|
|
40
|
-
margin-bottom: 70px;
|
|
41
|
-
display: flex;
|
|
42
|
-
flex-direction: column;
|
|
43
|
-
justify-content: center;
|
|
44
|
-
width: 500px;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
.formRow {
|
|
48
|
-
display: flex;
|
|
49
|
-
flex-direction: row;
|
|
50
|
-
margin-bottom: 15px;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
.formColumn {
|
|
54
|
-
display: flex;
|
|
55
|
-
flex-direction: column;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
.buttonRow {
|
|
59
|
-
display: flex;
|
|
60
|
-
justify-content: center;
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
.labelWidth {
|
|
64
|
-
width: 150px;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
.formElementWidth {
|
|
68
|
-
width: 350px;
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
.mr-10 {
|
|
72
|
-
margin-right: 10px;
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
.ml-10 {
|
|
76
|
-
margin-left: 10px;
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
.mb-10 {
|
|
80
|
-
margin-bottom: 10px;
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
/* styles for complexSelect*/
|
|
84
|
-
.selectOptionWrapperDiv {
|
|
85
|
-
display: flex;
|
|
86
|
-
flex-direction: row;
|
|
87
|
-
align-items: center;
|
|
88
|
-
height: 34px;
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
.selectOptionDiv {
|
|
92
|
-
display: flex;
|
|
93
|
-
flex-direction: column;
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
.selectOptionSubText {
|
|
97
|
-
font-size: smaller;
|
|
98
|
-
padding: 0;
|
|
99
|
-
margin-top: -6px;
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
/* end styles for complexSelect*/
|
|
1
|
+
@import '@seeqdev/qomponents/dist/styles.css';
|
|
2
|
+
@import '@fortawesome/fontawesome-free/css/all.css';
|
|
3
|
+
|
|
4
|
+
.tw-light {
|
|
5
|
+
background-color: white;
|
|
6
|
+
color: #1a1a1a;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.tw-dark {
|
|
10
|
+
background-color: rgb(36, 36, 34);
|
|
11
|
+
color: rgb(194, 188, 176);
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.formPanel {
|
|
15
|
+
align-items: center;
|
|
16
|
+
width: 500px;
|
|
17
|
+
display: flex;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.header {
|
|
21
|
+
font-size: larger;
|
|
22
|
+
font-weight: bold;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.backdrop {
|
|
26
|
+
margin: 0;
|
|
27
|
+
display: flex;
|
|
28
|
+
justify-content: center;
|
|
29
|
+
align-items: center;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.scroll-container {
|
|
33
|
+
margin: auto;
|
|
34
|
+
max-height: 100%;
|
|
35
|
+
overflow: auto;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.flex-container {
|
|
39
|
+
margin-top: 30px;
|
|
40
|
+
margin-bottom: 70px;
|
|
41
|
+
display: flex;
|
|
42
|
+
flex-direction: column;
|
|
43
|
+
justify-content: center;
|
|
44
|
+
width: 500px;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.formRow {
|
|
48
|
+
display: flex;
|
|
49
|
+
flex-direction: row;
|
|
50
|
+
margin-bottom: 15px;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.formColumn {
|
|
54
|
+
display: flex;
|
|
55
|
+
flex-direction: column;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.buttonRow {
|
|
59
|
+
display: flex;
|
|
60
|
+
justify-content: center;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.labelWidth {
|
|
64
|
+
width: 150px;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.formElementWidth {
|
|
68
|
+
width: 350px;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.mr-10 {
|
|
72
|
+
margin-right: 10px;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.ml-10 {
|
|
76
|
+
margin-left: 10px;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.mb-10 {
|
|
80
|
+
margin-bottom: 10px;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
/* styles for complexSelect*/
|
|
84
|
+
.selectOptionWrapperDiv {
|
|
85
|
+
display: flex;
|
|
86
|
+
flex-direction: row;
|
|
87
|
+
align-items: center;
|
|
88
|
+
height: 34px;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.selectOptionDiv {
|
|
92
|
+
display: flex;
|
|
93
|
+
flex-direction: column;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.selectOptionSubText {
|
|
97
|
+
font-size: smaller;
|
|
98
|
+
padding: 0;
|
|
99
|
+
margin-top: -6px;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
/* end styles for complexSelect*/
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import ReactDOM from 'react-dom/client';
|
|
3
|
-
import Example from './Example';
|
|
4
|
-
import './index.css';
|
|
5
|
-
|
|
6
|
-
ReactDOM.createRoot(document.body as HTMLElement).render(
|
|
7
|
-
<React.StrictMode>
|
|
8
|
-
<Example />
|
|
9
|
-
</React.StrictMode>,
|
|
10
|
-
);
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import ReactDOM from 'react-dom/client';
|
|
3
|
+
import Example from './Example';
|
|
4
|
+
import './index.css';
|
|
5
|
+
|
|
6
|
+
ReactDOM.createRoot(document.body as HTMLElement).render(
|
|
7
|
+
<React.StrictMode>
|
|
8
|
+
<Example />
|
|
9
|
+
</React.StrictMode>,
|
|
10
|
+
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
/// <reference types="vite/client" />
|
|
1
|
+
/// <reference types="vite/client" />
|
|
@@ -1,33 +1,33 @@
|
|
|
1
|
-
{
|
|
2
|
-
"compilerOptions": {
|
|
3
|
-
"target": "ES2020",
|
|
4
|
-
"useDefineForClassFields": true,
|
|
5
|
-
"lib": [
|
|
6
|
-
"ES2020",
|
|
7
|
-
"DOM",
|
|
8
|
-
"DOM.Iterable"
|
|
9
|
-
],
|
|
10
|
-
"module": "ESNext",
|
|
11
|
-
"skipLibCheck": true,
|
|
12
|
-
"moduleResolution": "node",
|
|
13
|
-
"allowImportingTsExtensions": true,
|
|
14
|
-
"resolveJsonModule": true,
|
|
15
|
-
"isolatedModules": true,
|
|
16
|
-
"noEmit": true,
|
|
17
|
-
"jsx": "react",
|
|
18
|
-
/* Linting */
|
|
19
|
-
"strict": true,
|
|
20
|
-
"noUnusedLocals": true,
|
|
21
|
-
"noUnusedParameters": true,
|
|
22
|
-
"noFallthroughCasesInSwitch": true,
|
|
23
|
-
"allowSyntheticDefaultImports": true
|
|
24
|
-
},
|
|
25
|
-
"include": [
|
|
26
|
-
"src"
|
|
27
|
-
],
|
|
28
|
-
"references": [
|
|
29
|
-
{
|
|
30
|
-
"path": "./tsconfig.node.json"
|
|
31
|
-
}
|
|
32
|
-
]
|
|
33
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"target": "ES2020",
|
|
4
|
+
"useDefineForClassFields": true,
|
|
5
|
+
"lib": [
|
|
6
|
+
"ES2020",
|
|
7
|
+
"DOM",
|
|
8
|
+
"DOM.Iterable"
|
|
9
|
+
],
|
|
10
|
+
"module": "ESNext",
|
|
11
|
+
"skipLibCheck": true,
|
|
12
|
+
"moduleResolution": "node",
|
|
13
|
+
"allowImportingTsExtensions": true,
|
|
14
|
+
"resolveJsonModule": true,
|
|
15
|
+
"isolatedModules": true,
|
|
16
|
+
"noEmit": true,
|
|
17
|
+
"jsx": "react",
|
|
18
|
+
/* Linting */
|
|
19
|
+
"strict": true,
|
|
20
|
+
"noUnusedLocals": true,
|
|
21
|
+
"noUnusedParameters": true,
|
|
22
|
+
"noFallthroughCasesInSwitch": true,
|
|
23
|
+
"allowSyntheticDefaultImports": true
|
|
24
|
+
},
|
|
25
|
+
"include": [
|
|
26
|
+
"src"
|
|
27
|
+
],
|
|
28
|
+
"references": [
|
|
29
|
+
{
|
|
30
|
+
"path": "./tsconfig.node.json"
|
|
31
|
+
}
|
|
32
|
+
]
|
|
33
|
+
}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
{
|
|
2
|
-
"compilerOptions": {
|
|
3
|
-
"composite": true,
|
|
4
|
-
"skipLibCheck": true,
|
|
5
|
-
"module": "ESNext",
|
|
6
|
-
"moduleResolution": "node",
|
|
7
|
-
"allowSyntheticDefaultImports": true
|
|
8
|
-
},
|
|
9
|
-
"include": [
|
|
10
|
-
"vite.config.ts"
|
|
11
|
-
]
|
|
12
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"composite": true,
|
|
4
|
+
"skipLibCheck": true,
|
|
5
|
+
"module": "ESNext",
|
|
6
|
+
"moduleResolution": "node",
|
|
7
|
+
"allowSyntheticDefaultImports": true
|
|
8
|
+
},
|
|
9
|
+
"include": [
|
|
10
|
+
"vite.config.ts"
|
|
11
|
+
]
|
|
12
|
+
}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { defineConfig } from 'vite';
|
|
2
|
-
import react from '@vitejs/plugin-react';
|
|
3
|
-
|
|
4
|
-
// https://vitejs.dev/config/
|
|
5
|
-
export default defineConfig({
|
|
6
|
-
plugins: [react()],
|
|
7
|
-
css: {
|
|
8
|
-
postcss: {
|
|
9
|
-
plugins: [],
|
|
10
|
-
},
|
|
11
|
-
},
|
|
12
|
-
});
|
|
1
|
+
import { defineConfig } from 'vite';
|
|
2
|
+
import react from '@vitejs/plugin-react';
|
|
3
|
+
|
|
4
|
+
// https://vitejs.dev/config/
|
|
5
|
+
export default defineConfig({
|
|
6
|
+
plugins: [react()],
|
|
7
|
+
css: {
|
|
8
|
+
postcss: {
|
|
9
|
+
plugins: [],
|
|
10
|
+
},
|
|
11
|
+
},
|
|
12
|
+
});
|
package/dist/index.esm.js
CHANGED
|
@@ -88,7 +88,7 @@ const Icon = ({ onClick, icon, iconPrefix = undefined, type = 'theme', extraClas
|
|
|
88
88
|
const fontAwesomePrefix = iconPrefix ? iconPrefix : 'fa-sharp fa-regular';
|
|
89
89
|
const iconPrefixString = icon.startsWith('fc') ? 'fc' : fontAwesomePrefix;
|
|
90
90
|
const style = type === 'color' && color ? { color } : {};
|
|
91
|
-
const appliedClassNames = `${iconPrefixString} ${icon} ${small ? 'fa-sm' : ''} ${large ? 'fa-lg' : ''}
|
|
91
|
+
const appliedClassNames = `${iconPrefixString} ${icon} ${small ? 'fa-sm' : ''} ${large ? 'fa-lg' : ''}
|
|
92
92
|
${colorClassesThemeLight[type]} ${colorClassesThemeDark[type]} ${onClick ? 'cursor-pointer' : ''} ${extraClassNames} focus:tw-outline-none focus-visible:tw-outline-none tw-outline-none`;
|
|
93
93
|
const tooltipData = getQTipData(tooltipProps);
|
|
94
94
|
return (React__default.createElement("i", { className: appliedClassNames, style: style, onClick: onClick, "data-testid": testId, "data-customid": customId, id: id, "data-number": number, ...tooltipData }));
|
|
@@ -99,7 +99,7 @@ const Icon = ({ onClick, icon, iconPrefix = undefined, type = 'theme', extraClas
|
|
|
99
99
|
* - use "variant" to achieve the desired style
|
|
100
100
|
* - include tooltips and/or icons
|
|
101
101
|
*/
|
|
102
|
-
const Button = ({ onClick, label, variant = 'outline', type = 'button', size = 'sm', disabled, extraClassNames, id, testId, stopPropagation = true, tooltip, tooltipOptions, iconStyle = 'text', icon, iconColor,
|
|
102
|
+
const Button = ({ onClick, label, variant = 'outline', type = 'button', size = 'sm', disabled, extraClassNames, id, testId, stopPropagation = true, tooltip, tooltipOptions, iconStyle = 'text', icon, iconColor, iconPrefix = undefined, preventBlur = false, isHtmlTooltip = false, tooltipTestId, }) => {
|
|
103
103
|
const baseClasses = 'tw-py-1 tw-px-2.5 tw-rounded-sm focus:tw-ring-0 disabled:tw-pointer-events-none';
|
|
104
104
|
const baseClassesByVariant = {
|
|
105
105
|
'outline': 'disabled:tw-opacity-50 tw-border-solid tw-border',
|
|
@@ -163,8 +163,6 @@ const Button = ({ onClick, label, variant = 'outline', type = 'button', size = '
|
|
|
163
163
|
'data-qtip-delay': tooltipOptions?.delay ?? DEFAULT_TOOL_TIP_DELAY,
|
|
164
164
|
};
|
|
165
165
|
}
|
|
166
|
-
const iconClass = (iconPosition === 'left' ? 'tw-mr-1' : 'tw-ml-1');
|
|
167
|
-
const iconElement = icon && (React__default.createElement(Icon, { icon: icon, iconPrefix: iconPrefix, type: iconStyle, color: iconColor, extraClassNames: label ? `${iconClass} ${textClassesByVariantLightTheme[variant]} ${textClassesByVariantDarkTheme[variant]}` : '', testId: `${id}_spinner` }));
|
|
168
166
|
return (React__default.createElement("button", { id: id, ...tooltipData, disabled: disabled, "data-testid": testId, type: type === 'link' || (type === 'submit' && browserIsFirefox) ? 'button' : type, onClick: (e) => {
|
|
169
167
|
stopPropagation && e.stopPropagation();
|
|
170
168
|
onClick && onClick(e);
|
|
@@ -173,9 +171,8 @@ const Button = ({ onClick, label, variant = 'outline', type = 'button', size = '
|
|
|
173
171
|
e.preventDefault();
|
|
174
172
|
}
|
|
175
173
|
}, className: appliedClasses },
|
|
176
|
-
|
|
177
|
-
label
|
|
178
|
-
iconPosition === 'right' && iconElement));
|
|
174
|
+
icon && (React__default.createElement(Icon, { icon: icon, iconPrefix: iconPrefix, type: iconStyle, color: iconColor, extraClassNames: label ? `tw-mr-1 ${textClassesByVariantLightTheme[variant]} ${textClassesByVariantDarkTheme[variant]}` : '', testId: `${id}_spinner` })),
|
|
175
|
+
label));
|
|
179
176
|
};
|
|
180
177
|
|
|
181
178
|
function _extends() {
|
|
@@ -4406,6 +4403,19 @@ const $cb5cc270b50c6fcd$export$7dacb05d26466c3 = /*#__PURE__*/ forwardRef((props
|
|
|
4406
4403
|
const [$cb5cc270b50c6fcd$var$PortalProvider, $cb5cc270b50c6fcd$var$usePortalContext] = $cb5cc270b50c6fcd$var$createPopoverContext($cb5cc270b50c6fcd$var$PORTAL_NAME, {
|
|
4407
4404
|
forceMount: undefined
|
|
4408
4405
|
});
|
|
4406
|
+
const $cb5cc270b50c6fcd$export$dd679ffb4362d2d4 = (props)=>{
|
|
4407
|
+
const { __scopePopover: __scopePopover , forceMount: forceMount , children: children , container: container } = props;
|
|
4408
|
+
const context = $cb5cc270b50c6fcd$var$usePopoverContext($cb5cc270b50c6fcd$var$PORTAL_NAME, __scopePopover);
|
|
4409
|
+
return /*#__PURE__*/ createElement($cb5cc270b50c6fcd$var$PortalProvider, {
|
|
4410
|
+
scope: __scopePopover,
|
|
4411
|
+
forceMount: forceMount
|
|
4412
|
+
}, /*#__PURE__*/ createElement($921a889cee6df7e8$export$99c2b779aa4e8b8b, {
|
|
4413
|
+
present: forceMount || context.open
|
|
4414
|
+
}, /*#__PURE__*/ createElement($f1701beae083dbae$export$602eac185826482c, {
|
|
4415
|
+
asChild: true,
|
|
4416
|
+
container: container
|
|
4417
|
+
}, children)));
|
|
4418
|
+
};
|
|
4409
4419
|
/* -------------------------------------------------------------------------------------------------
|
|
4410
4420
|
* PopoverContent
|
|
4411
4421
|
* -----------------------------------------------------------------------------------------------*/ const $cb5cc270b50c6fcd$var$CONTENT_NAME = 'PopoverContent';
|
|
@@ -4544,6 +4554,7 @@ const $cb5cc270b50c6fcd$export$3152841115e061b2 = /*#__PURE__*/ forwardRef((prop
|
|
|
4544
4554
|
}
|
|
4545
4555
|
const $cb5cc270b50c6fcd$export$be92b6f5f03c0fe9 = $cb5cc270b50c6fcd$export$5b6b19405a83ff9d;
|
|
4546
4556
|
const $cb5cc270b50c6fcd$export$41fb9f06171c75f4 = $cb5cc270b50c6fcd$export$7dacb05d26466c3;
|
|
4557
|
+
const $cb5cc270b50c6fcd$export$602eac185826482c = $cb5cc270b50c6fcd$export$dd679ffb4362d2d4;
|
|
4547
4558
|
const $cb5cc270b50c6fcd$export$7c6e2c02157bb7d2 = $cb5cc270b50c6fcd$export$d7e1f420b25549ff;
|
|
4548
4559
|
const $cb5cc270b50c6fcd$export$21b07c8f274aebd5 = $cb5cc270b50c6fcd$export$3152841115e061b2;
|
|
4549
4560
|
|
|
@@ -4735,13 +4746,13 @@ const Tooltip = ({ position = 'bottom', children, text, delay = DEFAULT_TOOL_TIP
|
|
|
4735
4746
|
const arrowBaseClasses = 'before:tw-content-[\'\'] before:tw-absolute before:tw-border-8';
|
|
4736
4747
|
const centerArrowVertically = 'before:tw-top-1/2 before:-tw-translate-y-1/2';
|
|
4737
4748
|
const centerArrowHorizontally = 'before:tw-left-1/2 before:-tw-translate-x-1/2';
|
|
4738
|
-
const arrowRight = `${arrowBaseClasses} ${centerArrowVertically} before:tw-right-[100%] before:tw-border-y-transparent
|
|
4749
|
+
const arrowRight = `${arrowBaseClasses} ${centerArrowVertically} before:tw-right-[100%] before:tw-border-y-transparent
|
|
4739
4750
|
before:tw-border-l-transparent before:tw-border-r-black`;
|
|
4740
|
-
const arrowLeft = `${arrowBaseClasses} ${centerArrowVertically} before:tw-left-[100%] before:tw-border-y-transparent
|
|
4751
|
+
const arrowLeft = `${arrowBaseClasses} ${centerArrowVertically} before:tw-left-[100%] before:tw-border-y-transparent
|
|
4741
4752
|
before:tw-border-l-black before:tw-border-r-transparent`;
|
|
4742
|
-
const arrowBottom = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-top-4 before:tw-border-b-black
|
|
4753
|
+
const arrowBottom = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-top-4 before:tw-border-b-black
|
|
4743
4754
|
before:tw-border-r-transparent before:tw-border-l-transparent before:tw-border-t-transparent`;
|
|
4744
|
-
const arrowTop = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-bottom-4 before:tw-border-b-transparent
|
|
4755
|
+
const arrowTop = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-bottom-4 before:tw-border-b-transparent
|
|
4745
4756
|
before:tw-border-t-black before:tw-border-l-transparent before:tw-border-r-transparent`;
|
|
4746
4757
|
const placements = {
|
|
4747
4758
|
top: `-tw-top-2 -tw-translate-y-full tw-left-1/2 -tw-translate-x-1/2 ${arrowTop}`,
|
|
@@ -4751,7 +4762,7 @@ const Tooltip = ({ position = 'bottom', children, text, delay = DEFAULT_TOOL_TIP
|
|
|
4751
4762
|
};
|
|
4752
4763
|
return (React__default.createElement("div", { className: "tw-group tw-relative tw-inline-block" },
|
|
4753
4764
|
children,
|
|
4754
|
-
React__default.createElement("div", { className: `tw-z-50 tw-whitespace-nowrap tw-hidden group-hover:tw-inline-block group-hover:tw-delay-[${delay}ms]
|
|
4765
|
+
React__default.createElement("div", { className: `tw-z-50 tw-whitespace-nowrap tw-hidden group-hover:tw-inline-block group-hover:tw-delay-[${delay}ms]
|
|
4755
4766
|
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]}` }, text)));
|
|
4756
4767
|
};
|
|
4757
4768
|
|
|
@@ -13672,7 +13683,7 @@ const multiValueStyles = [
|
|
|
13672
13683
|
* For ease of testing most of the elements of this select can be identified by classNames prefixed with "spec".
|
|
13673
13684
|
*
|
|
13674
13685
|
*/
|
|
13675
|
-
const Select = ({ options, value, placeholder = 'select', noOptionsMessage = 'no matching options', isSearchable = true, creatable = false, isMulti = false, isClearable = false, closeMenuOnSelect = true, id, inputId, menuPortalTarget, getOptionLabel, getSelectedValueLabel, getOptionValue, onChange, menuIsOpen, menuPlacement = 'auto', extraClassNames, inputGroup, filterConfig, filterOption, small = false, isDisabled = false, showError = false, isLoading = false, formatGroupLabel, onRemove, defaultValue, }) => {
|
|
13686
|
+
const Select = ({ options, value, placeholder = 'select', noOptionsMessage = 'no matching options', isSearchable = true, creatable = false, isMulti = false, isClearable = false, closeMenuOnSelect = true, id, inputId, menuPortalTarget, getOptionLabel, getSelectedValueLabel, getOptionValue, onChange, menuIsOpen, menuPlacement = 'auto', extraClassNames, inputGroup, filterConfig, filterOption, small = false, isDisabled = false, showError = false, isLoading = false, formatGroupLabel, onRemove, defaultValue, onMenuOpen, onMenuClose, components }) => {
|
|
13676
13687
|
const getOptionOrSelectedLabel = (option, { context }) => {
|
|
13677
13688
|
const getSelectedOptionLabel = getSelectedValueLabel ? getSelectedValueLabel : getOptionLabel;
|
|
13678
13689
|
if (getOptionLabel || getSelectedValueLabel) {
|
|
@@ -13717,6 +13728,9 @@ const Select = ({ options, value, placeholder = 'select', noOptionsMessage = 'no
|
|
|
13717
13728
|
getOptionValue,
|
|
13718
13729
|
options,
|
|
13719
13730
|
isDisabled,
|
|
13731
|
+
onMenuOpen,
|
|
13732
|
+
onMenuClose,
|
|
13733
|
+
components,
|
|
13720
13734
|
hideSelectedOptions: isMulti,
|
|
13721
13735
|
filterOption: filterOption ? filterOption : filterConfig ? createFilter(filterConfig) : undefined,
|
|
13722
13736
|
classNames: {
|
|
@@ -14032,9 +14046,9 @@ const Dialog = $5d3850c4d0b4e6c7$export$be92b6f5f03c0fe9;
|
|
|
14032
14046
|
const DialogPortal = $5d3850c4d0b4e6c7$export$602eac185826482c;
|
|
14033
14047
|
const DialogClose = $5d3850c4d0b4e6c7$export$f39c2d165cd861fe;
|
|
14034
14048
|
const DialogContent = React__default.forwardRef(({ className, children, ...props }, ref) => (React__default.createElement(DialogPortal, null,
|
|
14035
|
-
React__default.createElement("div", { className: "tw-select-none tw-fixed tw-w-full tw-h-full tw-opacity-50 tw-inset-0 tw-z-[1000] 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 " }),
|
|
14036
|
-
React__default.createElement($5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2, { ref: ref, className: `tw-fixed tw-left-[50%] tw-top-0 tw-my-6 tw-translate-x-[-50%] tw-z-[1001] tw-grid
|
|
14037
|
-
tw-gap-4 tw-border tw-bg-sq-white dark:tw-bg-sq-dark-background tw-p-6 tw-shadow-lg tw-duration-200
|
|
14049
|
+
React__default.createElement("div", { className: "tw-select-none tw-fixed tw-w-full tw-h-full tw-opacity-50 tw-inset-0 tw-z-[1000] tw-bg-sq-dark-background\r\n data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0\r\n data-[state=open]:fade-in-0 " }),
|
|
14050
|
+
React__default.createElement($5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2, { ref: ref, className: `tw-fixed tw-left-[50%] tw-top-0 tw-my-6 tw-translate-x-[-50%] tw-z-[1001] tw-grid
|
|
14051
|
+
tw-gap-4 tw-border tw-bg-sq-white dark:tw-bg-sq-dark-background tw-p-6 tw-shadow-lg tw-duration-200
|
|
14038
14052
|
tw-rounded-lg ${className}`, ...props }, children))));
|
|
14039
14053
|
DialogContent.displayName = $5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2.displayName;
|
|
14040
14054
|
const DialogHeader = ({ className, ...props }) => (React__default.createElement("div", { className: "tw-w-full tw-justify-between" },
|
|
@@ -14101,7 +14115,7 @@ const Modal = ({ titleIcon, title = 'Modal title example', titleSuffixLabel, sub
|
|
|
14101
14115
|
'tw-max-w-5xl': size === '5xl',
|
|
14102
14116
|
'tw-max-w-6xl': size === '6xl',
|
|
14103
14117
|
}, dialogClassName) },
|
|
14104
|
-
React__default.createElement(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" },
|
|
14118
|
+
React__default.createElement(DialogHeader, { className: "modal-header tw-flex tw-w-full tw-justify-between tw-border-sq-disabled-gray\r\n dark:tw-border-sq-dark-disabled-gray tw-border-0 tw-border-b tw-px-6 tw-py-4" },
|
|
14105
14119
|
React__default.createElement("div", { className: "tw-flex tw-w-full" }, renderTitle()),
|
|
14106
14120
|
!hideCloseIcon && React__default.createElement(DialogClose, { autoFocus: false, className: "[&:has(:focus-visible)]:none tw-opacity-70 tw-bg-transparent hover:tw-opacity-100 close tw-cursor-pointer tw-ml-4", "data-testid": "closeButton" },
|
|
14107
14121
|
React__default.createElement("span", { className: "tw-cursor-pointer" }, "\u00D7"))),
|
|
@@ -15003,7 +15017,7 @@ const borderStyles$1 = [
|
|
|
15003
15017
|
'dark:tw-border-gray-500',
|
|
15004
15018
|
].join(' ');
|
|
15005
15019
|
const disabledClasses$1 = ['tw-opacity-50', 'tw-cursor-not-allowed'].join(' ');
|
|
15006
|
-
const ButtonWithPopover = ({ children, trigger, id, hasArrow, extraTriggerClassNames, extraPopoverClassNames, containerTestId, onInteractOutside, onPointerDownOutside, disabled = false, align = 'end', alignOffset = -35, placement = 'bottom', placementOffset = 2, isHoverEnabled = false, hoverOpenDelay = 300, onOpenChange, isOpen, isCloseOnContentClick = false, setFocusOnTriggerOnClose = true, ...tooltipProps }) => {
|
|
15020
|
+
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, setFocusOnTriggerOnClose = true, isPortal = false, ...tooltipProps }) => {
|
|
15007
15021
|
const tooltipData = getQTipData(tooltipProps);
|
|
15008
15022
|
let timeout;
|
|
15009
15023
|
const [isHoveredOpen, setIsHoveredOpen] = React.useState(false);
|
|
@@ -15024,17 +15038,20 @@ const ButtonWithPopover = ({ children, trigger, id, hasArrow, extraTriggerClassN
|
|
|
15024
15038
|
}
|
|
15025
15039
|
};
|
|
15026
15040
|
React.useEffect(() => () => timeout && clearTimeout(timeout), []);
|
|
15041
|
+
const renderContent = () => {
|
|
15042
|
+
return (React.createElement($cb5cc270b50c6fcd$export$7c6e2c02157bb7d2, { 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" },
|
|
15043
|
+
React.createElement("div", { "data-testid": containerTestId, className: `${bgStyles$1} ${borderStyles$1} tw-relative tw-z-[1000] tw-min-w-6 focus-visible:tw-outline-none tw-outline-none data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out
|
|
15044
|
+
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
|
|
15045
|
+
${extraPopoverClassNames || ''}` },
|
|
15046
|
+
hasArrow && (React.createElement($cb5cc270b50c6fcd$export$21b07c8f274aebd5, { asChild: true },
|
|
15047
|
+
React.createElement("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" }))),
|
|
15048
|
+
children)));
|
|
15049
|
+
};
|
|
15027
15050
|
const renderPopover = (popoverOpenState) => {
|
|
15028
15051
|
return (React.createElement($cb5cc270b50c6fcd$export$be92b6f5f03c0fe9, { open: popoverOpenState, defaultOpen: false, onOpenChange: onOpenChange },
|
|
15029
|
-
React.createElement($cb5cc270b50c6fcd$export$41fb9f06171c75f4, { id: id, className: `tw-
|
|
15030
|
-
React.createElement("div", { ...tooltipData, onMouseOver: onHoverStart, onMouseOut: onHoverEnd, className: `tw-bg-transparent
|
|
15031
|
-
React.createElement($cb5cc270b50c6fcd$export$
|
|
15032
|
-
React.createElement("div", { "data-testid": containerTestId, className: `${bgStyles$1} ${borderStyles$1} tw-relative tw-z-[1000] tw-min-w-6 focus-visible:tw-outline-none tw-outline-none data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out
|
|
15033
|
-
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
|
|
15034
|
-
${extraPopoverClassNames || ''}` },
|
|
15035
|
-
hasArrow && (React.createElement($cb5cc270b50c6fcd$export$21b07c8f274aebd5, { asChild: true },
|
|
15036
|
-
React.createElement("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" }))),
|
|
15037
|
-
children))));
|
|
15052
|
+
React.createElement($cb5cc270b50c6fcd$export$41fb9f06171c75f4, { id: id, asChild: isTriggerAsChild, className: `focus-visible:tw-outline-none tw-outline-none ${shouldTriggerFullWidth ? 'tw-w-full tw-h-full' : ''}`, disabled: disabled },
|
|
15053
|
+
React.createElement("div", { ...tooltipData, onMouseOver: onHoverStart, onMouseOut: onHoverEnd, className: `tw-bg-transparent focus-visible:tw-outline-none tw-outline-none ${disabled ? disabledClasses$1 : ''} ${shouldTriggerFullWidth ? 'tw-flex tw-flex-col tw-items-center tw-justify-center' : 'inline'} ${extraTriggerClassNames || ''}` }, trigger)),
|
|
15054
|
+
isPortal ? React.createElement($cb5cc270b50c6fcd$export$602eac185826482c, null, renderContent()) : renderContent()));
|
|
15038
15055
|
};
|
|
15039
15056
|
return isHoverEnabled ? renderPopover(isHoveredOpen) : renderPopover(isOpen);
|
|
15040
15057
|
};
|
|
@@ -16039,7 +16056,7 @@ const ButtonWithDropdown = ({ dropdownItems, triggerIcon, id, extraClassNames, c
|
|
|
16039
16056
|
if (item.isLabel) {
|
|
16040
16057
|
return (React.createElement($d08ef79370b62062$export$b04be29aa201d4f5, { key: (item.label || '') + index, className: item.containerExtraClassNames },
|
|
16041
16058
|
item.icon && (React.createElement(Icon, { icon: item.icon, testId: item.iconTestId, type: "text", color: item.iconColor, extraClassNames: "tw-text-sq-text-color dark:tw-text-sq-white tw-w-[18px]" })),
|
|
16042
|
-
React.createElement("div", { "data-testid": item.labelTestId, className: "tw-text-[13px] tw-ml-1" }, item.label)));
|
|
16059
|
+
React.createElement("div", { "data-testid": item.labelTestId, className: "tw-text-[13px] tw-text-sq-text-color dark:tw-text-sq-white tw-ml-1" }, item.label)));
|
|
16043
16060
|
}
|
|
16044
16061
|
if (Array.isArray(item.subMenuItems) && item.subMenuItems.length > 0) {
|
|
16045
16062
|
return (React.createElement($d08ef79370b62062$export$d7a01e11500dfb6f, { key: item.label + index },
|