@decisiv/ui-components 2.0.1-alpha.75 → 2.0.1-alpha.84
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/lib/atoms/InputField/Containers.d.ts +7 -2
- package/lib/atoms/InputField/Containers.d.ts.map +1 -1
- package/lib/atoms/InputField/Containers.js +5 -5
- package/lib/atoms/InputField/InputLabel.d.ts +1 -0
- package/lib/atoms/InputField/InputLabel.d.ts.map +1 -1
- package/lib/atoms/InputField/InputLabel.js +2 -1
- package/lib/atoms/InputField/index.d.ts +3 -0
- package/lib/atoms/InputField/index.d.ts.map +1 -1
- package/lib/atoms/InputField/index.js +17 -4
- package/lib/atoms/InputField/schema.d.ts.map +1 -1
- package/lib/atoms/InputField/schema.js +1 -0
- package/lib/components/Combobox/Target.d.ts.map +1 -1
- package/lib/components/Combobox/Target.js +3 -4
- package/lib/components/Combobox/index.test.js +122 -98
- package/lib/components/Select/Target.js +1 -1
- package/lib/components/Select/index.d.ts.map +1 -1
- package/lib/components/Select/index.js +17 -0
- package/lib/components/Select/index.test.js +82 -23
- package/lib/components/Select/schema.d.ts.map +1 -1
- package/lib/components/Select/schema.js +2 -0
- package/lib/components/Select/types.d.ts +2 -0
- package/lib/components/Select/types.d.ts.map +1 -1
- package/lib/components/SelectDate/Target.js +1 -1
- package/lib/components/SelectDate/index.d.ts.map +1 -1
- package/lib/components/SelectDate/index.js +17 -0
- package/lib/components/SelectDate/index.test.js +108 -51
- package/lib/components/SelectDate/schema.d.ts.map +1 -1
- package/lib/components/SelectDate/schema.js +2 -0
- package/lib/components/SelectDate/types.d.ts +2 -0
- package/lib/components/SelectDate/types.d.ts.map +1 -1
- package/lib/components/SelectDateRange/index.d.ts.map +1 -1
- package/lib/components/SelectDateRange/index.js +17 -0
- package/lib/components/SelectDateRange/index.test.js +115 -58
- package/lib/components/SelectDateRange/schema.d.ts.map +1 -1
- package/lib/components/SelectDateRange/schema.js +2 -0
- package/lib/components/TextArea/index.js +1 -0
- package/lib/components/TextArea/index.test.js +5 -0
- package/lib/components/TextField/Input.js +1 -1
- package/lib/components/TextField/index.test.js +5 -0
- package/lib/utils/useFirstMount.d.ts +2 -0
- package/lib/utils/useFirstMount.d.ts.map +1 -0
- package/lib/utils/useFirstMount.js +19 -0
- package/lib/utils/useUpdateEffect.d.ts +4 -0
- package/lib/utils/useUpdateEffect.d.ts.map +1 -0
- package/lib/utils/useUpdateEffect.js +28 -0
- package/package.json +2 -2
|
@@ -205,6 +205,9 @@ interface InputContainerProps extends FlexComponentProps {
|
|
|
205
205
|
hasWarning?: boolean;
|
|
206
206
|
isFocused?: boolean;
|
|
207
207
|
readOnly?: boolean;
|
|
208
|
+
hiddenLabel: boolean;
|
|
209
|
+
isTextArea: boolean;
|
|
210
|
+
multiple: boolean;
|
|
208
211
|
}
|
|
209
212
|
export declare const InputContainer: import("styled-components").StyledComponent<"div", any, Partial<{
|
|
210
213
|
readonly alignContent?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
|
|
@@ -594,6 +597,8 @@ export declare const IconContainer: import("styled-components").StyledComponent<
|
|
|
594
597
|
}> & {
|
|
595
598
|
alignItems: string;
|
|
596
599
|
justifyContent: string;
|
|
600
|
+
} & {
|
|
601
|
+
hiddenLabel: boolean;
|
|
597
602
|
}, "alignItems" | "justifyContent">;
|
|
598
603
|
export declare const InputInnerContainer: import("styled-components").StyledComponent<"div", any, Partial<{
|
|
599
604
|
readonly alignContent?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
|
|
@@ -790,9 +795,9 @@ export declare const InputInnerContainer: import("styled-components").StyledComp
|
|
|
790
795
|
}> & {
|
|
791
796
|
flex: number;
|
|
792
797
|
flexWrap: string;
|
|
793
|
-
paddingLeft: number;
|
|
794
798
|
} & {
|
|
795
799
|
hasIcon?: boolean | undefined;
|
|
796
|
-
|
|
800
|
+
hiddenLabel: boolean;
|
|
801
|
+
}, "flexWrap" | "flex">;
|
|
797
802
|
export {};
|
|
798
803
|
//# sourceMappingURL=Containers.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Containers.d.ts","sourceRoot":"","sources":["../../../src/atoms/InputField/Containers.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAUtC,OAAa,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAEjE,UAAU,wBAAyB,SAAQ,kBAAkB;IAC3D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yCAa/B,CAAC;AAEF,UAAU,mBAAoB,SAAQ,kBAAkB;IACtD,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Containers.d.ts","sourceRoot":"","sources":["../../../src/atoms/InputField/Containers.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAUtC,OAAa,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAEjE,UAAU,wBAAyB,SAAQ,kBAAkB;IAC3D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yCAa/B,CAAC;AAEF,UAAU,mBAAoB,SAAQ,kBAAkB;IACtD,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAiCD,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAwD1B,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mCAazB,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBA4B/B,CAAC"}
|
|
@@ -32,6 +32,7 @@ var InputFieldContainer = (0, _styledComponents.default)(_Flex.default).attrs({
|
|
|
32
32
|
componentId: "me30fz-0"
|
|
33
33
|
})(["flex:1;max-width:100%;", ";"], (0, _styleModifiers.when)('overflow', 'auto', (0, _styledComponents.css)(["overflow:auto;"])));
|
|
34
34
|
exports.InputFieldContainer = InputFieldContainer;
|
|
35
|
+
var hiddenLabelStyles = (0, _styledComponents.css)(["min-height:32px;"]);
|
|
35
36
|
var inactiveStyles = (0, _styledComponents.css)(["background:", ";border-color:", ";cursor:not-allowed;position:relative;&:active,&:hover{background:", ";border-color:", ";", ";}*{cursor:not-allowed;}"], (0, _toColorString.default)(_color.default.opacity.fullMoon50), (0, _toColorString.default)(_color.default.base.quarterMoon), (0, _toColorString.default)(_color.default.opacity.fullMoon50), (0, _toColorString.default)(_color.default.base.quarterMoon), (0, _focusRingWithColor.default)({
|
|
36
37
|
red: 0,
|
|
37
38
|
green: 0,
|
|
@@ -42,7 +43,7 @@ var onFocusStyles = (0, _styledComponents.css)(["border-color:", ";", ";&:hover{
|
|
|
42
43
|
var InputContainer = (0, _styledComponents.default)(_Flex.default).withConfig({
|
|
43
44
|
displayName: "Containers__InputContainer",
|
|
44
45
|
componentId: "me30fz-1"
|
|
45
|
-
})(["background:", ";border:1px solid ", ";box-sizing:border-box;min-height:50px;position:relative;width:100%;", ";& ~ *{cursor:default;margin-top:", "px;width:100%;}&:hover{border-color:", ";}&:active{border-color:", ";", ";}", ";", ";", ";", ";"], (0, _toColorString.default)(_color.default.base.snowWhite), (0, _toColorString.default)(_color.default.base.quarterMoon), (0, _dynamicModifiers.applyDynamicModifiers)('cursor'), _spacing.default.base * 0.5, (0, _toColorString.default)(_color.default.interaction.indianOcean), (0, _toColorString.default)(_color.default.interaction.pacificOcean), (0, _focusRingWithColor.default)(_color.default.interaction.pacificOcean40), (0, _styleModifiers.when)('isFocused', onFocusStyles), (0, _styleModifiers.when)('hasWarning', (0, _styledComponents.css)(["border-color:", ";&:active,&:hover{border-color:", ";}"], (0, _toColorString.default)(_color.default.status.warning.medium), (0, _toColorString.default)(_color.default.status.warning.medium))), (0, _styleModifiers.when)('disabled', inactiveStyles), (0, _styleModifiers.when)('readOnly', inactiveStyles));
|
|
46
|
+
})(["background:", ";border:1px solid ", ";box-sizing:border-box;min-height:50px;position:relative;width:100%;", ";& ~ *{cursor:default;margin-top:", "px;width:100%;}&:hover{border-color:", ";}&:active{border-color:", ";", ";}", ";", ";", ";", ";", ";", ";", ";"], (0, _toColorString.default)(_color.default.base.snowWhite), (0, _toColorString.default)(_color.default.base.quarterMoon), (0, _dynamicModifiers.applyDynamicModifiers)('cursor'), _spacing.default.base * 0.5, (0, _toColorString.default)(_color.default.interaction.indianOcean), (0, _toColorString.default)(_color.default.interaction.pacificOcean), (0, _focusRingWithColor.default)(_color.default.interaction.pacificOcean40), (0, _styleModifiers.when)('isFocused', onFocusStyles), (0, _styleModifiers.when)('hasWarning', (0, _styledComponents.css)(["border-color:", ";&:active,&:hover{border-color:", ";}"], (0, _toColorString.default)(_color.default.status.warning.medium), (0, _toColorString.default)(_color.default.status.warning.medium))), (0, _styleModifiers.when)('disabled', inactiveStyles), (0, _styleModifiers.when)('readOnly', inactiveStyles), (0, _styleModifiers.when)('hiddenLabel', hiddenLabelStyles), (0, _styleModifiers.whenNot)('isTextArea', (0, _styledComponents.css)(["height:32px;"])), (0, _styleModifiers.when)('multiple', (0, _styledComponents.css)(["height:auto;"])));
|
|
46
47
|
exports.InputContainer = InputContainer;
|
|
47
48
|
var IconContainer = (0, _styledComponents.default)(_Flex.default).attrs({
|
|
48
49
|
alignItems: 'flex-start',
|
|
@@ -50,14 +51,13 @@ var IconContainer = (0, _styledComponents.default)(_Flex.default).attrs({
|
|
|
50
51
|
}).withConfig({
|
|
51
52
|
displayName: "Containers__IconContainer",
|
|
52
53
|
componentId: "me30fz-2"
|
|
53
|
-
})(["color:", ";margin:16px 0 6px
|
|
54
|
+
})(["color:", ";margin:16px 0 6px 15px;", ""], (0, _toColorString.default)(_color.default.base.alaskanHusky), (0, _styleModifiers.when)('hiddenLabel', (0, _styledComponents.css)(["margin:8px 0 8px 10px;"])));
|
|
54
55
|
exports.IconContainer = IconContainer;
|
|
55
56
|
var InputInnerContainer = (0, _styledComponents.default)(_Flex.default).attrs({
|
|
56
57
|
flex: 1,
|
|
57
|
-
flexWrap: 'wrap'
|
|
58
|
-
paddingLeft: 1
|
|
58
|
+
flexWrap: 'wrap'
|
|
59
59
|
}).withConfig({
|
|
60
60
|
displayName: "Containers__InputInnerContainer",
|
|
61
61
|
componentId: "me30fz-3"
|
|
62
|
-
})(["max-width:100%;", ";"], (0, _styleModifiers.when)('hasIcon', (0, _styledComponents.css)(["max-width:calc(100% -
|
|
62
|
+
})(["max-width:100%;padding-top:6px;padding-left:15px;", ";", ";", ";"], (0, _styleModifiers.when)('hasIcon', (0, _styledComponents.css)(["max-width:calc(100% - 10px);"])), (0, _styleModifiers.whenNot)('hasIcon', (0, _styledComponents.css)(["padding-left:10px;"])), (0, _styleModifiers.whenAll)([['hasIcon', true], ['hiddenLabel', true]], (0, _styledComponents.css)(["padding-left:10px;"])));
|
|
63
63
|
exports.InputInnerContainer = InputInnerContainer;
|
|
@@ -4,6 +4,7 @@ interface InputLabelProps extends PProps, React.LabelHTMLAttributes<HTMLLabelEle
|
|
|
4
4
|
color?: PProps['color'];
|
|
5
5
|
disabled?: boolean;
|
|
6
6
|
readOnly?: boolean;
|
|
7
|
+
hidden?: boolean;
|
|
7
8
|
}
|
|
8
9
|
declare const InputLabel: import("styled-components").StyledComponent<"p", any, PProps & {
|
|
9
10
|
as: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputLabel.d.ts","sourceRoot":"","sources":["../../../src/atoms/InputField/InputLabel.ts"],"names":[],"mappings":";AAIA,OAAO,EAAK,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAExD,UAAU,eACR,SAAQ,MAAM,EACZ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"InputLabel.d.ts","sourceRoot":"","sources":["../../../src/atoms/InputField/InputLabel.ts"],"names":[],"mappings":";AAIA,OAAO,EAAK,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAExD,UAAU,eACR,SAAQ,MAAM,EACZ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAqBD,QAAA,MAAM,UAAU;;;;6CAoBf,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
|
@@ -14,6 +14,7 @@ var _Typography = require("../../components/Typography");
|
|
|
14
14
|
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
|
|
15
15
|
|
|
16
16
|
var inactiveStyles = (0, _styledComponents.css)(["cursor:not-allowed;*{cursor:not-allowed;}"]);
|
|
17
|
+
var visuallyHiddenStyles = (0, _styledComponents.css)(["border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;"]);
|
|
17
18
|
var InputLabel = (0, _styledComponents.default)(_Typography.P).attrs({
|
|
18
19
|
as: 'label',
|
|
19
20
|
color: 'alaskanHusky',
|
|
@@ -21,6 +22,6 @@ var InputLabel = (0, _styledComponents.default)(_Typography.P).attrs({
|
|
|
21
22
|
}).withConfig({
|
|
22
23
|
displayName: "InputLabel",
|
|
23
24
|
componentId: "ldhs58-0"
|
|
24
|
-
})(["display:block;padding-
|
|
25
|
+
})(["display:block;padding-right:10px;text-align:left;width:100%;cursor:inherit;*{cursor:inherit;}", ";", ";", ";"], (0, _styleModifiers.when)('disabled', inactiveStyles), (0, _styleModifiers.when)('readOnly', inactiveStyles), (0, _styleModifiers.when)('hidden', visuallyHiddenStyles));
|
|
25
26
|
var _default = InputLabel;
|
|
26
27
|
exports.default = _default;
|
|
@@ -39,9 +39,12 @@ export interface BaseInputFieldProps {
|
|
|
39
39
|
required?: boolean;
|
|
40
40
|
requiredMessage?: string;
|
|
41
41
|
showCharacterCount?: boolean;
|
|
42
|
+
hideLabel?: boolean;
|
|
42
43
|
style?: React.CSSProperties;
|
|
43
44
|
value: string;
|
|
44
45
|
warningMessage?: string;
|
|
46
|
+
isTextArea?: boolean;
|
|
47
|
+
multiple?: boolean;
|
|
45
48
|
}
|
|
46
49
|
declare const InputFieldWithRef: RefForwardingComponent<Ref<any>, BaseInputFieldProps>;
|
|
47
50
|
export default InputFieldWithRef;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atoms/InputField/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EACZ,aAAa,EAEb,GAAG,EACH,sBAAsB,EAGvB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAoB5C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAE7C,MAAM,WAAW,mBAAmB;IAClC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC;IACpC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,CAAC;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,GAAG,CAAC,OAAO,CAAC;IACtD,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;IACzC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC;IACzC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC;IACvC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atoms/InputField/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EACZ,aAAa,EAEb,GAAG,EACH,sBAAsB,EAGvB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAoB5C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAE7C,MAAM,WAAW,mBAAmB;IAClC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC;IACpC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,CAAC;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,GAAG,CAAC,OAAO,CAAC;IACtD,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;IACzC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC;IACzC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC;IACvC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAuKD,QAAA,MAAM,iBAAiB,EAAE,sBAAsB,CAC7C,GAAG,CAAC,GAAG,CAAC,EACR,mBAAmB,CACK,CAAC;AAQ3B,eAAe,iBAAiB,CAAC"}
|
|
@@ -62,6 +62,8 @@ function InputField(props, targetRef) {
|
|
|
62
62
|
_props$cursor = props.cursor,
|
|
63
63
|
cursor = _props$cursor === void 0 ? 'text' : _props$cursor,
|
|
64
64
|
disabled = props.disabled,
|
|
65
|
+
_props$hideLabel = props.hideLabel,
|
|
66
|
+
hideLabel = _props$hideLabel === void 0 ? false : _props$hideLabel,
|
|
65
67
|
helpMessage = props.helpMessage,
|
|
66
68
|
IconComponent = props.icon,
|
|
67
69
|
id = props.id,
|
|
@@ -82,7 +84,11 @@ function InputField(props, targetRef) {
|
|
|
82
84
|
style = props.style,
|
|
83
85
|
value = props.value,
|
|
84
86
|
warningMessage = props.warningMessage,
|
|
85
|
-
|
|
87
|
+
_props$isTextArea = props.isTextArea,
|
|
88
|
+
isTextArea = _props$isTextArea === void 0 ? false : _props$isTextArea,
|
|
89
|
+
_props$multiple = props.multiple,
|
|
90
|
+
multiple = _props$multiple === void 0 ? false : _props$multiple,
|
|
91
|
+
rest = _objectWithoutProperties(props, ["children", "cursor", "disabled", "hideLabel", "helpMessage", "icon", "id", "inputContainerRef", "label", "labelId", "maxLength", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "overflow", "readOnly", "required", "requiredMessage", "showCharacterCount", "style", "value", "warningMessage", "isTextArea", "multiple"]);
|
|
86
92
|
|
|
87
93
|
var fallbackTargetRef = (0, _react.useRef)(null);
|
|
88
94
|
var finalTargetRef = targetRef || fallbackTargetRef;
|
|
@@ -151,18 +157,25 @@ function InputField(props, targetRef) {
|
|
|
151
157
|
style: style
|
|
152
158
|
}, _react.default.createElement(_Containers.InputContainer, {
|
|
153
159
|
cursor: cursor,
|
|
160
|
+
hiddenLabel: hideLabel,
|
|
154
161
|
disabled: disabled,
|
|
155
162
|
hasWarning: !!warningMessage,
|
|
156
163
|
isFocused: isFocused,
|
|
157
164
|
readOnly: readOnly,
|
|
158
165
|
ref: inputContainerRef,
|
|
159
166
|
onClick: onInputContainerClickHandler,
|
|
160
|
-
onKeyDown: onKeyDown
|
|
161
|
-
|
|
162
|
-
|
|
167
|
+
onKeyDown: onKeyDown,
|
|
168
|
+
isTextArea: isTextArea,
|
|
169
|
+
multiple: multiple
|
|
170
|
+
}, IconComponent && _react.default.createElement(_Containers.IconContainer, {
|
|
171
|
+
hiddenLabel: hideLabel
|
|
172
|
+
}, _react.default.createElement(IconComponent, null)), _react.default.createElement(_Containers.InputInnerContainer, {
|
|
173
|
+
hasIcon: !!IconComponent,
|
|
174
|
+
hiddenLabel: hideLabel
|
|
163
175
|
}, _react.default.createElement(_InputLabel.default, {
|
|
164
176
|
disabled: disabled,
|
|
165
177
|
htmlFor: targetId,
|
|
178
|
+
hidden: hideLabel,
|
|
166
179
|
id: labelId,
|
|
167
180
|
readOnly: readOnly,
|
|
168
181
|
onClick: function onClick(event) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/atoms/InputField/schema.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,MAAM,KAAqC,CAAC;
|
|
1
|
+
{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/atoms/InputField/schema.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,MAAM,KAAqC,CAAC;AAsElD,eAAe,MAAM,CAAC"}
|
|
@@ -16,6 +16,7 @@ schema.makePropTypes = function () {
|
|
|
16
16
|
return {
|
|
17
17
|
disabled: _reactDesc.PropTypes.bool.description('Sets the input state to disabled if true.'),
|
|
18
18
|
helpMessage: _reactDesc.PropTypes.string.description("A short message to help clarify the input's purpose to the user."),
|
|
19
|
+
hideLabel: _reactDesc.PropTypes.bool.description("Visually hides the label, but leaves it available for screen readers. Use this only if you are sure the input doesn't need a visual label").defaultValue('false'),
|
|
19
20
|
icon: _reactDesc.PropTypes.element.description('An icon to be rendered on the left side of the input.'),
|
|
20
21
|
id: _reactDesc.PropTypes.string.description('A unique ID for the input.'),
|
|
21
22
|
inputContainerRef: _reactDesc.PropTypes.oneOfType([// Either a function
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Target.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/Target.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAO,sBAAsB,EAAc,MAAM,OAAO,CAAC;AAkBvE,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"Target.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/Target.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAO,sBAAsB,EAAc,MAAM,OAAO,CAAC;AAkBvE,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAiLtC,QAAA,MAAM,aAAa,EAAE,sBAAsB,CACzC,gBAAgB,EAChB,WAAW,CACS,CAAC;AAGvB,eAAe,aAAa,CAAC"}
|
|
@@ -46,24 +46,23 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
|
|
|
46
46
|
var TargetContainer = _styledComponents.default.div.withConfig({
|
|
47
47
|
displayName: "Target__TargetContainer",
|
|
48
48
|
componentId: "sc-1obpsql-0"
|
|
49
|
-
})(["align-items:center;display:flex;flex-wrap:wrap;justify-content:flex-start;
|
|
49
|
+
})(["align-items:center;display:flex;flex-wrap:wrap;justify-content:flex-start;width:100%;padding-right:15px;", ""], (0, _styleModifiers.when)('hasExpandIndicator', (0, _styledComponents.css)(["padding-right:45px;"])));
|
|
50
50
|
|
|
51
51
|
var Input = _styledComponents.default.input.withConfig({
|
|
52
52
|
displayName: "Target__Input",
|
|
53
53
|
componentId: "sc-1obpsql-1"
|
|
54
|
-
})(["font-family:", ";font-size:", ";font-weight:", ";overflow:visible;&::-moz-focus-inner{border:0;padding:0;margin:0;}background-color:inherit;border:transparent;display:block;line-height:140%;padding:
|
|
54
|
+
})(["font-family:", ";font-size:", ";font-weight:", ";overflow:visible;&::-moz-focus-inner{border:0;padding:0;margin:0;}background-color:inherit;border:transparent;display:block;line-height:140%;padding:0 10px 5px 1px;flex-grow:100;&:active,&:focus{outline:none;}"], _designTokens.typography.typeface.default, (0, _rem.default)(_designTokens.typography.size.alias.default), _designTokens.typography.weight.alias.default);
|
|
55
55
|
|
|
56
56
|
var ClearButtonContainer = (0, _styledComponents.default)(_Flex.default).withConfig({
|
|
57
57
|
displayName: "Target__ClearButtonContainer",
|
|
58
58
|
componentId: "sc-1obpsql-2"
|
|
59
59
|
})(["position:absolute;bottom:0;right:0;padding-bottom:2px;padding-left:10px;padding-right:10px;", ""], (0, _styleModifiers.when)('hasExpandIndicator', (0, _styledComponents.css)(["right:20px;"])));
|
|
60
60
|
var ExpandedIndicatorContainer = (0, _styledComponents.default)(_Flex.default).attrs({
|
|
61
|
-
paddingBottom: 0.2,
|
|
62
61
|
alignItems: 'center'
|
|
63
62
|
}).withConfig({
|
|
64
63
|
displayName: "Target__ExpandedIndicatorContainer",
|
|
65
64
|
componentId: "sc-1obpsql-3"
|
|
66
|
-
})(["position:absolute;bottom:
|
|
65
|
+
})(["position:absolute;bottom:2px;right:10px;color:", ";&:hover{color:", ";}", ";"], (0, _toColorString.default)(_color.default.interaction.pacificOcean), (0, _toColorString.default)(_color.default.interaction.indianOcean), (0, _styleModifiers.when)('disabled', (0, _styledComponents.css)(["color:", ";&:hover{color:", ";}"], (0, _toColorString.default)(_color.default.opacity.charcoal40), (0, _toColorString.default)(_color.default.opacity.charcoal40))));
|
|
67
66
|
|
|
68
67
|
function Target(_ref, ref) {
|
|
69
68
|
var clearButtonLabel = _ref.clearButtonLabel,
|