@seeqdev/qomponents 0.0.106 → 0.0.107
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Button/Button.js +5 -3
- package/dist/Button/Button.js.map +1 -1
- package/dist/InputGroup/InputGroup.d.ts +7 -0
- package/dist/InputGroup/InputGroup.js +16 -17
- package/dist/InputGroup/InputGroup.js.map +1 -1
- package/dist/InputGroup/InputGroup.stories.d.ts +5 -0
- package/dist/InputGroup/InputGroup.stories.js +102 -26
- package/dist/InputGroup/InputGroup.stories.js.map +1 -1
- package/dist/InputGroup/InputGroup.test.d.ts +1 -1
- package/dist/InputGroup/InputGroup.test.js +12 -9
- package/dist/InputGroup/InputGroup.test.js.map +1 -1
- package/dist/InputGroup/InputGroup.types.d.ts +20 -0
- package/dist/InputGroup/index.d.ts +1 -0
- package/dist/TextField/TextField.js +4 -2
- package/dist/TextField/TextField.js.map +1 -1
- package/dist/TextField/TextField.stories.js +8 -2
- package/dist/TextField/TextField.stories.js.map +1 -1
- package/dist/TextField/TextField.types.d.ts +2 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.esm.js +41 -17
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +41 -16
- package/dist/index.js.map +1 -1
- package/dist/styles.css +43 -0
- package/package.json +1 -1
package/dist/Button/Button.js
CHANGED
|
@@ -9,7 +9,7 @@ import { DEFAULT_TOOL_TIP_DELAY } from '../Tooltip/Tooltip.types';
|
|
|
9
9
|
* - include tooltips and/or icons
|
|
10
10
|
*/
|
|
11
11
|
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, }) => {
|
|
12
|
-
const baseClasses = 'tw-py-1 tw-px-2.5 tw-rounded-sm focus:tw-ring-0 disabled:tw-pointer-events-none';
|
|
12
|
+
const baseClasses = 'tw-py-1 tw-px-2.5 tw-rounded-sm focus:tw-ring-0 focus-visible:tw-outline-none disabled:tw-pointer-events-none';
|
|
13
13
|
const baseClassesByVariant = {
|
|
14
14
|
'outline': 'disabled:tw-opacity-50 tw-border-solid tw-border',
|
|
15
15
|
'theme': 'disabled:tw-opacity-50 tw-border-solid tw-border',
|
|
@@ -72,8 +72,10 @@ const Button = ({ onClick, label, variant = 'outline', type = 'button', size = '
|
|
|
72
72
|
'data-qtip-delay': tooltipOptions?.delay ?? DEFAULT_TOOL_TIP_DELAY,
|
|
73
73
|
};
|
|
74
74
|
}
|
|
75
|
-
const iconClass =
|
|
76
|
-
const iconElement = icon && (React.createElement(Icon, { icon: icon, iconPrefix: iconPrefix, type: iconStyle, color: iconColor, extraClassNames: label
|
|
75
|
+
const iconClass = iconPosition === 'left' ? 'tw-mr-1' : 'tw-ml-1';
|
|
76
|
+
const iconElement = icon && (React.createElement(Icon, { icon: icon, iconPrefix: iconPrefix, type: iconStyle, color: iconColor, extraClassNames: label
|
|
77
|
+
? `${iconClass} ${textClassesByVariantLightTheme[variant]} ${textClassesByVariantDarkTheme[variant]}`
|
|
78
|
+
: '', testId: `${id}_spinner` }));
|
|
77
79
|
return (React.createElement("button", { id: id, ...tooltipData, disabled: disabled, "data-testid": testId, type: type === 'link' || (type === 'submit' && browserIsFirefox) ? 'button' : type, onClick: (e) => {
|
|
78
80
|
stopPropagation && e.stopPropagation();
|
|
79
81
|
onClick && onClick(e);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,eAAe,CAAC;AACvB,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAElE;;;;GAIG;AACH,MAAM,MAAM,GAAyC,CAAC,EACpD,OAAO,EACP,KAAK,EACL,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,QAAQ,EACf,IAAI,GAAG,IAAI,EACX,QAAQ,EACR,eAAe,EACf,EAAE,EACF,MAAM,EACN,eAAe,GAAG,IAAI,EACtB,OAAO,EACP,cAAc,EACd,SAAS,GAAG,MAAM,EAClB,IAAI,EACJ,SAAS,EACT,YAAY,GAAG,MAAM,EACrB,UAAU,GAAG,SAAS,EACtB,WAAW,GAAG,KAAK,EACnB,aAAa,GAAG,KAAK,EACrB,aAAa,GACd,EAAE,EAAE;IACH,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,27 +1,26 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import '../styles.css';
|
|
3
3
|
import { getQTipData } from '../Tooltip/qTip.utilities';
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
const lightTheme = 'tw-text-sq-text-color tw-placeholder-gray-400 disabled:tw-text-sq-darkish-gray';
|
|
8
|
-
const borderColorClasses = [
|
|
9
|
-
'tw-border-sq-disabled-gray',
|
|
10
|
-
'dark:tw-border-sq-dark-disabled-gray',
|
|
11
|
-
'dark:focus:tw-border-sq-color-dark-dark',
|
|
12
|
-
'dark:active:tw-border-sq-color-dark-dark',
|
|
13
|
-
'focus:tw-border-sq-color-dark',
|
|
14
|
-
'active:tw-border-sq-color-dark',
|
|
15
|
-
].join(' ');
|
|
4
|
+
import TextField from '../TextField';
|
|
5
|
+
import Button from '../Button';
|
|
6
|
+
const baseClasses = 'tw-flex tw-outline-none tw-rounded-sm tw-w-full tw-relative tw-flex-wrap tw-items-stretch';
|
|
16
7
|
/**
|
|
17
8
|
* InputGroup.
|
|
18
9
|
*/
|
|
19
|
-
export const InputGroup = ({
|
|
10
|
+
export const InputGroup = ({ readonly = false, onChange, onKeyUp, onFocus, onBlur, onKeyDown, onClick, name, value, placeholder, append = [], extraClassNames = '', id, testId, showError, required, autoComplete, autoFocus, disabled, type, step, min, max, ...tooltipProps }) => {
|
|
20
11
|
const tooltipData = getQTipData(tooltipProps);
|
|
21
|
-
const appliedClasses = `${baseClasses} ${extraClassNames}
|
|
12
|
+
const appliedClasses = `${baseClasses} ${extraClassNames}`;
|
|
13
|
+
const borderColorClasses = [
|
|
14
|
+
'tw-border-sq-disabled-gray',
|
|
15
|
+
'dark:tw-border-sq-dark-disabled-gray',
|
|
16
|
+
'dark:focus:tw-border-sq-color-dark-dark',
|
|
17
|
+
'dark:active:tw-border-sq-color-dark-dark',
|
|
18
|
+
'focus:tw-border-sq-color-dark',
|
|
19
|
+
'active:tw-border-sq-color-dark',
|
|
20
|
+
].join(' ');
|
|
21
|
+
const textfield = (React.createElement(TextField, { readonly: onClick ? true : readonly, onChange: onChange, onKeyUp: onKeyUp, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, name: name, showError: showError, value: value, required: required, placeholder: placeholder, autoComplete: autoComplete, autoFocus: autoFocus, id: id, type: type, disabled: disabled, step: step, min: min, max: max, extraClassNames: `tw-flex tw-flex-1 tw-rounded-r-none focus:tw-z-30 ${onClick ? 'tw-cursor-pointer' : ''} ${extraClassNames}`, ...tooltipData }));
|
|
22
22
|
return (React.createElement("div", { id: id, "data-testid": testId, className: appliedClasses },
|
|
23
|
-
|
|
24
|
-
React.createElement("div", {
|
|
25
|
-
append.filter(Boolean).map((appendItem, index) => (React.createElement("div", { key: index, className: "" }, appendItem)))));
|
|
23
|
+
onClick ? (React.createElement("div", { onClick: onClick, className: "tw-flex tw-flex-1 tw-cursor-pointer" }, textfield)) : (textfield),
|
|
24
|
+
append.filter(Boolean).map((item, index) => item.variant === 'button' ? (React.createElement(Button, { key: index, extraClassNames: "tw-ml-[-1px] focus:tw-z-40 focus:tw-border tw-rounded-l-none tw-rounded-r-none last:tw-rounded-r-sm", onClick: item.buttonProps.onClick, variant: item.buttonProps.variant, icon: item.buttonProps.icon, iconColor: item.buttonProps.iconColor, testId: item.buttonProps.testId, disabled: item.buttonProps.disabled, label: item.buttonProps.label, iconStyle: item.buttonProps.iconStyle })) : (React.createElement("div", { key: index, className: `${borderColorClasses} tw-flex tw-items-center tw-h-inputs tw-justify-center tw-rounded-none tw-ml-[-1px] focus:tw-z-40 focus:tw-border last:tw-border last:tw-rounded-r-sm` }, item.element)))));
|
|
26
25
|
};
|
|
27
26
|
//# sourceMappingURL=InputGroup.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputGroup.js","sourceRoot":"","sources":["../../src/InputGroup/InputGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,eAAe,CAAC;AACvB,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;
|
|
1
|
+
{"version":3,"file":"InputGroup.js","sourceRoot":"","sources":["../../src/InputGroup/InputGroup.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { InputGroup } from './InputGroup';
|
|
3
|
-
import TextField from '../TextField';
|
|
4
|
-
import Button from '../Button';
|
|
5
3
|
import { QTip } from '../Tooltip/Qtip';
|
|
6
4
|
export default {
|
|
7
5
|
title: 'InputGroup',
|
|
@@ -10,44 +8,122 @@ export const AllTextFields = () => {
|
|
|
10
8
|
const renderAllVariations = () => (React.createElement(React.Fragment, null,
|
|
11
9
|
React.createElement("div", { className: "light" },
|
|
12
10
|
React.createElement("div", { className: "tw-p-4" },
|
|
13
|
-
React.createElement(InputGroup, {
|
|
14
|
-
|
|
15
|
-
|
|
11
|
+
React.createElement(InputGroup, { value: "value provided", append: [
|
|
12
|
+
{
|
|
13
|
+
variant: 'button',
|
|
14
|
+
buttonProps: {
|
|
15
|
+
icon: 'fc-annotate',
|
|
16
|
+
iconStyle: 'theme',
|
|
17
|
+
},
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
variant: 'button',
|
|
21
|
+
buttonProps: {
|
|
22
|
+
icon: 'fc-trash',
|
|
23
|
+
iconStyle: 'theme',
|
|
24
|
+
},
|
|
25
|
+
},
|
|
16
26
|
] })),
|
|
17
27
|
React.createElement("div", { className: "tw-p-4" },
|
|
18
|
-
React.createElement(InputGroup, { tooltip: "This is a small input group.", tooltipDelay: 0, tooltipPlacement: "top", isHtmlTooltip: false,
|
|
19
|
-
|
|
20
|
-
|
|
28
|
+
React.createElement(InputGroup, { tooltip: "This is a small input group.", tooltipDelay: 0, tooltipPlacement: "top", isHtmlTooltip: false, value: "with tooltip", append: [
|
|
29
|
+
{
|
|
30
|
+
variant: 'button',
|
|
31
|
+
buttonProps: {
|
|
32
|
+
icon: 'fc-annotate',
|
|
33
|
+
iconStyle: 'theme',
|
|
34
|
+
},
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
variant: 'button',
|
|
38
|
+
buttonProps: {
|
|
39
|
+
icon: 'fc-trash',
|
|
40
|
+
iconStyle: 'theme',
|
|
41
|
+
},
|
|
42
|
+
},
|
|
21
43
|
] })),
|
|
22
44
|
React.createElement("div", { className: "tw-p-4" },
|
|
23
|
-
React.createElement(InputGroup, { tooltip: "This is a small input group.", tooltipDelay: 0, tooltipPlacement: "top", isHtmlTooltip: false,
|
|
45
|
+
React.createElement(InputGroup, { tooltip: "This is a small input group.", tooltipDelay: 0, tooltipPlacement: "top", isHtmlTooltip: false, value: "with tooltip", append: [
|
|
46
|
+
{
|
|
47
|
+
variant: 'button',
|
|
48
|
+
buttonProps: {
|
|
49
|
+
icon: 'fc-annotate',
|
|
50
|
+
iconStyle: 'theme',
|
|
51
|
+
},
|
|
52
|
+
},
|
|
53
|
+
] })),
|
|
24
54
|
React.createElement("div", { className: "tw-p-4" },
|
|
25
|
-
React.createElement(InputGroup, { tooltip: "This is a small input group.", tooltipDelay: 0, tooltipPlacement: "top", isHtmlTooltip: false,
|
|
55
|
+
React.createElement(InputGroup, { tooltip: "This is a small input group.", tooltipDelay: 0, tooltipPlacement: "top", isHtmlTooltip: false, value: "with custom element", append: [
|
|
56
|
+
{
|
|
57
|
+
variant: 'element',
|
|
58
|
+
element: React.createElement("div", { className: "tw-text-sm tw-p-1 tw-bg-sq-light-background" }, "Custom"),
|
|
59
|
+
},
|
|
60
|
+
] })),
|
|
26
61
|
React.createElement("div", { className: "tw-p-4" },
|
|
27
|
-
React.createElement(InputGroup, { tooltip: "This is a small input group.", tooltipDelay: 0, tooltipPlacement: "top", isHtmlTooltip: false,
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
62
|
+
React.createElement(InputGroup, { tooltip: "This is a small input group.", tooltipDelay: 0, tooltipPlacement: "top", isHtmlTooltip: false, value: "button input group", onClick: () => console.log('clicked'), append: [
|
|
63
|
+
{
|
|
64
|
+
variant: 'element',
|
|
65
|
+
element: (React.createElement("div", { className: "tw-text-sm tw-p-1 tw-bg-sq-light-background dark:tw-text-sq-dark-text" }, "Custom")),
|
|
66
|
+
},
|
|
67
|
+
] }))),
|
|
31
68
|
React.createElement("div", { className: "tw-dark tw-bg-sq-dark-background" },
|
|
32
69
|
React.createElement("div", { className: "tw-p-4" },
|
|
33
|
-
React.createElement(InputGroup, {
|
|
34
|
-
|
|
35
|
-
|
|
70
|
+
React.createElement(InputGroup, { value: "value provided", append: [
|
|
71
|
+
{
|
|
72
|
+
variant: 'button',
|
|
73
|
+
buttonProps: {
|
|
74
|
+
icon: 'fc-annotate',
|
|
75
|
+
iconStyle: 'theme',
|
|
76
|
+
},
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
variant: 'button',
|
|
80
|
+
buttonProps: {
|
|
81
|
+
icon: 'fc-trash',
|
|
82
|
+
iconStyle: 'theme',
|
|
83
|
+
},
|
|
84
|
+
},
|
|
36
85
|
] })),
|
|
37
86
|
React.createElement("div", { className: "tw-p-4" },
|
|
38
|
-
React.createElement(InputGroup, { tooltip: "This is a small input group.", tooltipDelay: 0, tooltipPlacement: "top", isHtmlTooltip: false,
|
|
39
|
-
|
|
40
|
-
|
|
87
|
+
React.createElement(InputGroup, { tooltip: "This is a small input group.", tooltipDelay: 0, tooltipPlacement: "top", isHtmlTooltip: false, value: "with tooltip", append: [
|
|
88
|
+
{
|
|
89
|
+
variant: 'button',
|
|
90
|
+
buttonProps: {
|
|
91
|
+
icon: 'fc-annotate',
|
|
92
|
+
iconStyle: 'theme',
|
|
93
|
+
},
|
|
94
|
+
},
|
|
95
|
+
{
|
|
96
|
+
variant: 'button',
|
|
97
|
+
buttonProps: {
|
|
98
|
+
icon: 'fc-trash',
|
|
99
|
+
iconStyle: 'theme',
|
|
100
|
+
},
|
|
101
|
+
},
|
|
41
102
|
] })),
|
|
42
103
|
React.createElement("div", { className: "tw-p-4" },
|
|
43
|
-
React.createElement(InputGroup, { tooltip: "This is a small input group.", tooltipDelay: 0, tooltipPlacement: "top", isHtmlTooltip: false,
|
|
104
|
+
React.createElement(InputGroup, { tooltip: "This is a small input group.", tooltipDelay: 0, tooltipPlacement: "top", isHtmlTooltip: false, value: "with tooltip", append: [
|
|
105
|
+
{
|
|
106
|
+
variant: 'button',
|
|
107
|
+
buttonProps: {
|
|
108
|
+
icon: 'fc-annotate',
|
|
109
|
+
iconStyle: 'theme',
|
|
110
|
+
},
|
|
111
|
+
},
|
|
112
|
+
] })),
|
|
44
113
|
React.createElement("div", { className: "tw-p-4" },
|
|
45
|
-
React.createElement(InputGroup, { tooltip: "This is a small input group.", tooltipDelay: 0, tooltipPlacement: "top", isHtmlTooltip: false,
|
|
114
|
+
React.createElement(InputGroup, { tooltip: "This is a small input group.", tooltipDelay: 0, tooltipPlacement: "top", isHtmlTooltip: false, value: "with custom element", append: [
|
|
115
|
+
{
|
|
116
|
+
variant: 'element',
|
|
117
|
+
element: (React.createElement("div", { className: "tw-text-sm tw-p-1 tw-bg-sq-light-background dark:tw-text-sq-dark-text" }, "Custom")),
|
|
118
|
+
},
|
|
119
|
+
] })),
|
|
46
120
|
React.createElement("div", { className: "tw-p-4" },
|
|
47
|
-
React.createElement(InputGroup, { tooltip: "This is a small input group.", tooltipDelay: 0, tooltipPlacement: "top", isHtmlTooltip: false,
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
121
|
+
React.createElement(InputGroup, { tooltip: "This is a small input group.", tooltipDelay: 0, tooltipPlacement: "top", isHtmlTooltip: false, value: "button input group", onClick: () => console.log('clicked'), append: [
|
|
122
|
+
{
|
|
123
|
+
variant: 'element',
|
|
124
|
+
element: (React.createElement("div", { className: "tw-text-sm tw-p-1 tw-bg-sq-light-background dark:tw-text-sq-dark-text" }, "Custom")),
|
|
125
|
+
},
|
|
126
|
+
] })))));
|
|
51
127
|
return (React.createElement("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4" },
|
|
52
128
|
React.createElement(QTip, null),
|
|
53
129
|
React.createElement("div", { className: "color_topic" },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputGroup.stories.js","sourceRoot":"","sources":["../../src/InputGroup/InputGroup.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,
|
|
1
|
+
{"version":3,"file":"InputGroup.stories.js","sourceRoot":"","sources":["../../src/InputGroup/InputGroup.stories.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import '@testing-library/jest-dom/extend-expect';
|
|
1
|
+
import '@testing-library/jest-dom/extend-expect';
|
|
@@ -4,9 +4,16 @@ import '@testing-library/jest-dom/extend-expect';
|
|
|
4
4
|
import { InputGroup } from './InputGroup';
|
|
5
5
|
describe('InputGroup', () => {
|
|
6
6
|
const defaultProps = {
|
|
7
|
-
|
|
8
|
-
append: [
|
|
9
|
-
|
|
7
|
+
value: 'with tooltip',
|
|
8
|
+
append: [
|
|
9
|
+
{
|
|
10
|
+
variant: 'button',
|
|
11
|
+
buttonProps: {
|
|
12
|
+
icon: 'fc-annotate',
|
|
13
|
+
iconStyle: 'theme',
|
|
14
|
+
},
|
|
15
|
+
},
|
|
16
|
+
],
|
|
10
17
|
extraClassNames: 'extra-class',
|
|
11
18
|
tooltip: 'Tooltip title',
|
|
12
19
|
tooltipDelay: 0,
|
|
@@ -24,13 +31,9 @@ describe('InputGroup', () => {
|
|
|
24
31
|
expect(inputGroup).toHaveClass('tw-outline-none');
|
|
25
32
|
expect(inputGroup).toHaveClass('extra-class');
|
|
26
33
|
});
|
|
27
|
-
it('renders prepend items', () => {
|
|
28
|
-
const { getByText } = render(React.createElement(InputGroup, { ...defaultProps }));
|
|
29
|
-
expect(getByText('Prepend')).toBeInTheDocument();
|
|
30
|
-
});
|
|
31
34
|
it('renders append items', () => {
|
|
32
|
-
const {
|
|
33
|
-
expect(
|
|
35
|
+
const { getByRole } = render(React.createElement(InputGroup, { ...defaultProps }));
|
|
36
|
+
expect(getByRole('button')).toBeInTheDocument();
|
|
34
37
|
});
|
|
35
38
|
it('renders input element', () => {
|
|
36
39
|
const { container } = render(React.createElement(InputGroup, { ...defaultProps }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputGroup.test.js","sourceRoot":"","sources":["../../src/InputGroup/InputGroup.test.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,yCAAyC,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG1C,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;IAC1B,MAAM,YAAY,GAAoB;QACpC,KAAK,EAAE
|
|
1
|
+
{"version":3,"file":"InputGroup.test.js","sourceRoot":"","sources":["../../src/InputGroup/InputGroup.test.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,yCAAyC,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG1C,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;IAC1B,MAAM,YAAY,GAAoB;QACpC,KAAK,EAAE,cAAc;QACrB,MAAM,EAAE;YACN;gBACE,OAAO,EAAE,QAAQ;gBACjB,WAAW,EAAE;oBACX,IAAI,EAAE,aAAa;oBACnB,SAAS,EAAE,OAAO;iBACnB;aACF;SACF;QACD,eAAe,EAAE,aAAa;QAC9B,OAAO,EAAE,eAAe;QACxB,YAAY,EAAE,CAAC;QACf,EAAE,EAAE,gBAAgB;QACpB,MAAM,EAAE,qBAAqB;KAC9B,CAAC;IAEF,EAAE,CAAC,0BAA0B,EAAE,GAAG,EAAE;QAClC,MAAM,EAAE,WAAW,EAAE,GAAG,MAAM,CAAC,oBAAC,UAAU,OAAK,YAAY,GAAI,CAAC,CAAC;QACjE,MAAM,CAAC,WAAW,CAAC,qBAAqB,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACjE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6BAA6B,EAAE,GAAG,EAAE;QACrC,MAAM,EAAE,WAAW,EAAE,GAAG,MAAM,CAAC,oBAAC,UAAU,OAAK,YAAY,GAAI,CAAC,CAAC;QACjE,MAAM,UAAU,GAAG,WAAW,CAAC,qBAAqB,CAAC,CAAC;QACtD,MAAM,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;QAC1C,MAAM,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC,iBAAiB,CAAC,CAAC;QAClD,MAAM,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC;IAChD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sBAAsB,EAAE,GAAG,EAAE;QAC9B,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,oBAAC,UAAU,OAAK,YAAY,GAAI,CAAC,CAAC;QAC/D,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IAClD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,uBAAuB,EAAE,GAAG,EAAE;QAC/B,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,oBAAC,UAAU,OAAK,YAAY,GAAI,CAAC,CAAC;QAC/D,MAAM,CAAC,SAAS,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IAC5E,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { ButtonProps } from '../Button/Button.types';
|
|
2
|
+
import { TextFieldProps } from '../TextField/TextField.types';
|
|
3
|
+
import { TooltipComponentProps } from '../Tooltip/Tooltip.types';
|
|
4
|
+
interface AppendedButtonProps {
|
|
5
|
+
variant: 'button';
|
|
6
|
+
buttonProps: ButtonProps;
|
|
7
|
+
}
|
|
8
|
+
interface ElementProps {
|
|
9
|
+
variant: 'element';
|
|
10
|
+
element: React.ReactNode;
|
|
11
|
+
}
|
|
12
|
+
type AppendedProps = AppendedButtonProps | ElementProps;
|
|
13
|
+
interface BaseInputGroupProps extends TextFieldProps {
|
|
14
|
+
/** Append elements */
|
|
15
|
+
append: AppendedProps[];
|
|
16
|
+
onClick?: React.MouseEventHandler;
|
|
17
|
+
}
|
|
18
|
+
/** Combined InputGroupProps */
|
|
19
|
+
export type InputGroupProps = BaseInputGroupProps & TooltipComponentProps;
|
|
20
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { InputGroup as default } from './InputGroup';
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React, { useEffect, useRef, useState } from 'react';
|
|
2
2
|
import '../styles.css';
|
|
3
3
|
import { setValidInputDimension } from '../utils/validateStyleDimension';
|
|
4
|
+
import { getQTipData } from '../Tooltip/qTip.utilities';
|
|
4
5
|
const errorClasses = 'tw-border-sq-danger-color';
|
|
5
6
|
const borderColorClasses = [
|
|
6
7
|
'tw-border-sq-disabled-gray',
|
|
@@ -24,9 +25,10 @@ const sizeClasses = {
|
|
|
24
25
|
* Textfield.
|
|
25
26
|
*/
|
|
26
27
|
export const TextField = React.forwardRef((props, ref) => {
|
|
27
|
-
const { readonly = false, disabled = false, onChange, onKeyUp, onFocus, onBlur, onKeyDown, id, name, size = 'sm', value, placeholder, extraClassNames, testId, type = 'text', inputGroup, step, showError, errorText, min, max, maxLength, minLength, required = false, autoComplete = 'off', inputWidth = undefined, inputHeight = undefined, autoFocus = false, } = props;
|
|
28
|
+
const { readonly = false, disabled = false, onChange, onKeyUp, onFocus, onBlur, onKeyDown, id, name, size = 'sm', value, placeholder, extraClassNames, testId, type = 'text', inputGroup, step, showError, errorText, min, max, maxLength, minLength, required = false, autoComplete = 'off', inputWidth = undefined, inputHeight = undefined, autoFocus = false, ...tooltipProps } = props;
|
|
28
29
|
const internalRef = useRef(null);
|
|
29
30
|
const [cursor, setCursor] = useState(null);
|
|
31
|
+
const tooltipData = getQTipData(tooltipProps);
|
|
30
32
|
const setAllRefs = (receivedRef) => {
|
|
31
33
|
if (ref)
|
|
32
34
|
ref.current = receivedRef;
|
|
@@ -71,7 +73,7 @@ export const TextField = React.forwardRef((props, ref) => {
|
|
|
71
73
|
if (minLength)
|
|
72
74
|
inputLenghtProp.minLength = minLength;
|
|
73
75
|
return (React.createElement(React.Fragment, null,
|
|
74
|
-
React.createElement("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, autoFocus: autoFocus, min: min, max: max, ...inputLenghtProp, ...inputProp }),
|
|
76
|
+
React.createElement("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, autoFocus: autoFocus, min: min, max: max, ...inputLenghtProp, ...inputProp, ...tooltipData }),
|
|
75
77
|
errorText && showError && React.createElement("div", { className: "tw-text-sq-danger-color tw-text-xs tw-mt-1" }, errorText)));
|
|
76
78
|
});
|
|
77
79
|
//# sourceMappingURL=TextField.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextField.js","sourceRoot":"","sources":["../../src/TextField/TextField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE3D,OAAO,eAAe,CAAC;AACvB,OAAO,EAAE,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;
|
|
1
|
+
{"version":3,"file":"TextField.js","sourceRoot":"","sources":["../../src/TextField/TextField.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { TextField } from './TextField';
|
|
3
|
+
import { QTip } from '../Tooltip';
|
|
3
4
|
export default {
|
|
4
5
|
title: 'TextField',
|
|
5
6
|
};
|
|
@@ -25,7 +26,9 @@ export const AllTextFields = () => {
|
|
|
25
26
|
React.createElement("div", null, "min value = 2"),
|
|
26
27
|
React.createElement(TextField, { type: "number", value: 1, min: 2 })),
|
|
27
28
|
React.createElement("div", { className: "tw-p-4" },
|
|
28
|
-
React.createElement(TextField, { value: "large", size: "lg" }))
|
|
29
|
+
React.createElement(TextField, { value: "large", size: "lg" })),
|
|
30
|
+
React.createElement("div", { className: "tw-p-4" },
|
|
31
|
+
React.createElement(TextField, { value: "with tooltip", tooltip: "small tooltip" }))),
|
|
29
32
|
React.createElement("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background" },
|
|
30
33
|
React.createElement("div", { className: "tw-p-4" },
|
|
31
34
|
React.createElement(TextField, { value: "value provided" })),
|
|
@@ -46,8 +49,11 @@ export const AllTextFields = () => {
|
|
|
46
49
|
React.createElement("div", { className: "tw-text-sq-color-dark dark:tw-text-sq-color-dark-dark" }, "min value = 2"),
|
|
47
50
|
React.createElement(TextField, { type: "number", value: 10, min: 2 })),
|
|
48
51
|
React.createElement("div", { className: "tw-p-4" },
|
|
49
|
-
React.createElement(TextField, { value: "large", size: "lg" }))
|
|
52
|
+
React.createElement(TextField, { value: "large", size: "lg" })),
|
|
53
|
+
React.createElement("div", { className: "tw-p-4" },
|
|
54
|
+
React.createElement(TextField, { value: "with tooltip", tooltip: "small tooltip" })))));
|
|
50
55
|
return (React.createElement("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4" },
|
|
56
|
+
React.createElement(QTip, null),
|
|
51
57
|
React.createElement("div", { className: "color_topic" },
|
|
52
58
|
React.createElement("b", null, "Topic Colors"),
|
|
53
59
|
renderAllVariations()),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextField.stories.js","sourceRoot":"","sources":["../../src/TextField/TextField.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"TextField.stories.js","sourceRoot":"","sources":["../../src/TextField/TextField.stories.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
+
import { TooltipComponentProps } from '../Tooltip/Tooltip.types';
|
|
1
2
|
import { FormControlElement, InputGroupPlacement } from '../types';
|
|
2
|
-
export interface TextFieldProps {
|
|
3
|
+
export interface TextFieldProps extends TooltipComponentProps {
|
|
3
4
|
readonly?: boolean;
|
|
4
5
|
disabled?: boolean;
|
|
5
6
|
onChange?: React.ChangeEventHandler<FormControlElement>;
|
package/dist/index.d.ts
CHANGED
|
@@ -14,6 +14,7 @@ import ButtonWithPopover from './ButtonWithPopover';
|
|
|
14
14
|
import ButtonWithDropdown from './ButtonWithDropdown';
|
|
15
15
|
import Alert from './Alert';
|
|
16
16
|
import SeeqActionDropdown from './SeeqActionDropdown';
|
|
17
|
+
import InputGroup from './InputGroup';
|
|
17
18
|
export { Tabs };
|
|
18
19
|
export { Button };
|
|
19
20
|
export { ToolbarButton };
|
|
@@ -31,3 +32,4 @@ export { ButtonWithPopover };
|
|
|
31
32
|
export { ButtonWithDropdown };
|
|
32
33
|
export { Alert };
|
|
33
34
|
export { SeeqActionDropdown };
|
|
35
|
+
export { InputGroup };
|