@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.
Files changed (46) hide show
  1. package/lib/atoms/InputField/Containers.d.ts +7 -2
  2. package/lib/atoms/InputField/Containers.d.ts.map +1 -1
  3. package/lib/atoms/InputField/Containers.js +5 -5
  4. package/lib/atoms/InputField/InputLabel.d.ts +1 -0
  5. package/lib/atoms/InputField/InputLabel.d.ts.map +1 -1
  6. package/lib/atoms/InputField/InputLabel.js +2 -1
  7. package/lib/atoms/InputField/index.d.ts +3 -0
  8. package/lib/atoms/InputField/index.d.ts.map +1 -1
  9. package/lib/atoms/InputField/index.js +17 -4
  10. package/lib/atoms/InputField/schema.d.ts.map +1 -1
  11. package/lib/atoms/InputField/schema.js +1 -0
  12. package/lib/components/Combobox/Target.d.ts.map +1 -1
  13. package/lib/components/Combobox/Target.js +3 -4
  14. package/lib/components/Combobox/index.test.js +122 -98
  15. package/lib/components/Select/Target.js +1 -1
  16. package/lib/components/Select/index.d.ts.map +1 -1
  17. package/lib/components/Select/index.js +17 -0
  18. package/lib/components/Select/index.test.js +82 -23
  19. package/lib/components/Select/schema.d.ts.map +1 -1
  20. package/lib/components/Select/schema.js +2 -0
  21. package/lib/components/Select/types.d.ts +2 -0
  22. package/lib/components/Select/types.d.ts.map +1 -1
  23. package/lib/components/SelectDate/Target.js +1 -1
  24. package/lib/components/SelectDate/index.d.ts.map +1 -1
  25. package/lib/components/SelectDate/index.js +17 -0
  26. package/lib/components/SelectDate/index.test.js +108 -51
  27. package/lib/components/SelectDate/schema.d.ts.map +1 -1
  28. package/lib/components/SelectDate/schema.js +2 -0
  29. package/lib/components/SelectDate/types.d.ts +2 -0
  30. package/lib/components/SelectDate/types.d.ts.map +1 -1
  31. package/lib/components/SelectDateRange/index.d.ts.map +1 -1
  32. package/lib/components/SelectDateRange/index.js +17 -0
  33. package/lib/components/SelectDateRange/index.test.js +115 -58
  34. package/lib/components/SelectDateRange/schema.d.ts.map +1 -1
  35. package/lib/components/SelectDateRange/schema.js +2 -0
  36. package/lib/components/TextArea/index.js +1 -0
  37. package/lib/components/TextArea/index.test.js +5 -0
  38. package/lib/components/TextField/Input.js +1 -1
  39. package/lib/components/TextField/index.test.js +5 -0
  40. package/lib/utils/useFirstMount.d.ts +2 -0
  41. package/lib/utils/useFirstMount.d.ts.map +1 -0
  42. package/lib/utils/useFirstMount.js +19 -0
  43. package/lib/utils/useUpdateEffect.d.ts +4 -0
  44. package/lib/utils/useUpdateEffect.d.ts.map +1 -0
  45. package/lib/utils/useUpdateEffect.js +28 -0
  46. 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
- }, "flexWrap" | "paddingLeft" | "flex">;
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;CACpB;AA6BD,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCA0C1B,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mCAOzB,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uCAa/B,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 10px;width:30px;"], (0, _toColorString.default)(_color.default.base.alaskanHusky));
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% - 40px);"])));
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;CACpB;AAUD,QAAA,MAAM,UAAU;;;;6CAmBf,CAAC;AAEF,eAAe,UAAU,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-top:6px;padding-right:10px;text-align:left;width:100%;cursor:inherit;*{cursor:inherit;}", ";", ";"], (0, _styleModifiers.when)('disabled', inactiveStyles), (0, _styleModifiers.when)('readOnly', inactiveStyles));
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;CACzB;AAgKD,QAAA,MAAM,iBAAiB,EAAE,sBAAsB,CAC7C,GAAG,CAAC,GAAG,CAAC,EACR,mBAAmB,CACK,CAAC;AAQ3B,eAAe,iBAAiB,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
- rest = _objectWithoutProperties(props, ["children", "cursor", "disabled", "helpMessage", "icon", "id", "inputContainerRef", "label", "labelId", "maxLength", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "overflow", "readOnly", "required", "requiredMessage", "showCharacterCount", "style", "value", "warningMessage"]);
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
- }, IconComponent && _react.default.createElement(_Containers.IconContainer, null, _react.default.createElement(IconComponent, null)), _react.default.createElement(_Containers.InputInnerContainer, {
162
- hasIcon: !!IconComponent
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;AAiElD,eAAe,MAAM,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;AAoLtC,QAAA,MAAM,aAAa,EAAE,sBAAsB,CACzC,gBAAgB,EAChB,WAAW,CACS,CAAC;AAGvB,eAAe,aAAa,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;position:relative;width:100%;margin:2px auto;padding-right:15px;", ""], (0, _styleModifiers.when)('hasExpandIndicator', (0, _styledComponents.css)(["padding-right:45px;"])));
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:1px 10px 6px 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);
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:0;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))));
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,