@wireapp/react-ui-kit 9.23.5 → 9.23.7

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.
@@ -1 +1 @@
1
- {"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../src/Form/Input.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,YAAY,EAAW,MAAM,OAAO,CAAC;AAC7C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AACzC,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAKtC,OAAO,EAAC,KAAK,EAAC,MAAM,WAAW,CAAC;AAChC,OAAO,EAAC,SAAS,EAAC,MAAM,SAAS,CAAC;AAGlC,MAAM,WAAW,UAAU,CAAC,CAAC,GAAG,gBAAgB,CAAE,SAAQ,SAAS,CAAC,CAAC,CAAC;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,wBAAwB,CAAC,EAAE,QAAQ,CAAC,aAAa,CAAC;IAClD,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED,eAAO,MAAM,UAAU,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,SA6CvF,CAAC;AAEF,eAAO,MAAM,eAAe,cAAc,CAAC;AAC3C,eAAO,MAAM,WAAW,gBAAgB,CAAC;AAWzC,eAAO,MAAM,KAAK,oHA+FjB,CAAC"}
1
+ {"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../src/Form/Input.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,YAAY,EAAW,MAAM,OAAO,CAAC;AAC7C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AACzC,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAKtC,OAAO,EAAC,KAAK,EAAC,MAAM,WAAW,CAAC;AAChC,OAAO,EAAC,SAAS,EAAC,MAAM,SAAS,CAAC;AAGlC,MAAM,WAAW,UAAU,CAAC,CAAC,GAAG,gBAAgB,CAAE,SAAQ,SAAS,CAAC,CAAC,CAAC;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,wBAAwB,CAAC,EAAE,QAAQ,CAAC,aAAa,CAAC;IAClD,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED,eAAO,MAAM,UAAU,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,SAmEvF,CAAC;AAEF,eAAO,MAAM,eAAe,cAAc,CAAC;AAC3C,eAAO,MAAM,WAAW,gBAAgB,CAAC;AAWzC,eAAO,MAAM,KAAK,oHA+FjB,CAAC"}
package/lib/Form/Input.js CHANGED
@@ -54,6 +54,12 @@ const inputStyle = (theme, { markInvalid = false, placeholderTextTransform = 'no
54
54
  fontSize: theme.fontSizes.base,
55
55
  textTransform: placeholderTextTransform,
56
56
  };
57
+ const defaultBoxShadow = `0 0 0 1px ${theme.Select.borderColor}`;
58
+ const hoverBoxShadow = `0 0 0 1px ${theme.Input.borderHover}`;
59
+ const activeBoxShadow = `0 0 0 1px ${theme.general.primaryColor}`;
60
+ // The autocomplete box shadow is used as a workaround for the autofill background color
61
+ // The value (24px) is hardcoded to match the input background
62
+ const autocompleteBoxShadow = `0 0 0 24px ${theme.Input.backgroundAutocomplete} inset`;
57
63
  return {
58
64
  '&::-moz-placeholder': {
59
65
  ...placeholderStyle,
@@ -66,20 +72,35 @@ const inputStyle = (theme, { markInvalid = false, placeholderTextTransform = 'no
66
72
  ...placeholderStyle,
67
73
  },
68
74
  '&:hover': {
69
- boxShadow: !disabled && `0 0 0 1px ${theme.Input.borderHover}`,
75
+ boxShadow: !disabled && hoverBoxShadow,
70
76
  },
71
77
  '&:focus-visible, &:focus, &:active': {
72
- boxShadow: `0 0 0 1px ${theme.general.primaryColor}`,
78
+ boxShadow: activeBoxShadow,
73
79
  },
74
80
  '&:invalid:not(:focus, :hover)': !markInvalid
75
81
  ? {
76
- boxShadow: `0 0 0 1px ${theme.Select.borderColor}`,
82
+ boxShadow: defaultBoxShadow,
77
83
  }
78
84
  : {},
85
+ '&:-webkit-autofill': {
86
+ boxShadow: `${defaultBoxShadow}, ${autocompleteBoxShadow}`,
87
+ '-webkit-text-fill-color': theme.general.color,
88
+ '&:hover': {
89
+ boxShadow: !disabled && `${hoverBoxShadow}, ${autocompleteBoxShadow}`,
90
+ },
91
+ '&:focus-visible, &:focus, &:active': {
92
+ boxShadow: `${activeBoxShadow}, ${autocompleteBoxShadow}`,
93
+ },
94
+ '&:invalid:not(:focus, :hover)': !markInvalid
95
+ ? {
96
+ boxShadow: `${defaultBoxShadow}, ${autocompleteBoxShadow}`,
97
+ }
98
+ : {},
99
+ },
79
100
  background: disabled ? theme.Input.backgroundColorDisabled : theme.Input.backgroundColor,
80
101
  border: 'none',
81
102
  borderRadius: '12px',
82
- boxShadow: markInvalid ? `0 0 0 1px ${theme.general.dangerColor}` : `0 0 0 1px ${theme.Select.borderColor}`,
103
+ boxShadow: markInvalid ? `0 0 0 1px ${theme.general.dangerColor}` : defaultBoxShadow,
83
104
  caretColor: theme.general.primaryColor,
84
105
  color: theme.general.color,
85
106
  fontWeight: 400,
@@ -1 +1 @@
1
- {"version":3,"file":"GlobalCssVariables.d.ts","sourceRoot":"","sources":["../../src/Theme/GlobalCssVariables.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAwHzC,eAAO,MAAM,kBAAkB;iBApHZ,SAAS;gBAiDV,SAAS;wBAiDD,SAAS;CAsBlC,CAAC"}
1
+ {"version":3,"file":"GlobalCssVariables.d.ts","sourceRoot":"","sources":["../../src/Theme/GlobalCssVariables.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AA0HzC,eAAO,MAAM,kBAAkB;iBAtHZ,SAAS;gBAkDV,SAAS;wBAkDD,SAAS;CAsBlC,CAAC"}
@@ -50,6 +50,7 @@ const light = () => ({
50
50
  '--text-input-placeholder': Identity_1.COLOR_V2.GRAY_70,
51
51
  '--text-input-disabled': Identity_1.COLOR_V2.GRAY_20,
52
52
  '--text-input-label': Identity_1.COLOR_V2.GRAY_80,
53
+ '--text-input-autocomplete-background': Identity_1.COLOR_V2.BLUE_LIGHT_50,
53
54
  // Select
54
55
  '--select-focused-description': Identity_1.COLOR_V2.WHITE,
55
56
  // Range Input
@@ -91,6 +92,7 @@ const dark = () => ({
91
92
  '--text-input-placeholder': Identity_1.COLOR_V2.GRAY_60,
92
93
  '--text-input-disabled': Identity_1.COLOR_V2.GRAY_100,
93
94
  '--text-input-label': Identity_1.COLOR_V2.GRAY_40,
95
+ '--text-input-autocomplete-background': Identity_1.COLOR_V2.BLUE_LIGHT_900,
94
96
  // Select
95
97
  '--select-focused-description': Identity_1.COLOR_V2.GRAY_40,
96
98
  // Range Input
@@ -74,6 +74,7 @@ export interface Theme extends ETheme {
74
74
  Input: {
75
75
  backgroundColor: string;
76
76
  backgroundColorDisabled: string;
77
+ backgroundAutocomplete: string;
77
78
  placeholderColor: string;
78
79
  labelColor: string;
79
80
  borderHover: string;
@@ -1 +1 @@
1
- {"version":3,"file":"Theme.d.ts","sourceRoot":"","sources":["../../src/Theme/Theme.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAwC,KAAK,IAAI,MAAM,EAAC,MAAM,gBAAgB,CAAC;AAOtF,oBAAY,QAAQ;IAClB,IAAI,eAAe;IACnB,KAAK,gBAAgB;IACrB,OAAO,kBAAkB;CAC1B;AAED,MAAM,WAAW,KAAM,SAAQ,MAAM;IACnC,SAAS,EAAE;QACT,UAAU,EAAE,MAAM,CAAC;QACnB,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;QACf,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,UAAU,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,MAAM,CAAC,EAAE;QACP,SAAS,EAAE,MAAM,CAAC;QAClB,cAAc,EAAE,MAAM,CAAC;QACvB,eAAe,EAAE,MAAM,CAAC;QACxB,mBAAmB,EAAE,MAAM,CAAC;QAC5B,kBAAkB,EAAE,MAAM,CAAC;QAC3B,iBAAiB,EAAE,MAAM,CAAC;QAC1B,mBAAmB,EAAE,MAAM,CAAC;QAC5B,iBAAiB,EAAE,MAAM,CAAC;QAC1B,qBAAqB,EAAE,MAAM,CAAC;QAC9B,oBAAoB,EAAE,MAAM,CAAC;QAC7B,UAAU,EAAE,MAAM,CAAC;QACnB,cAAc,EAAE,MAAM,CAAC;QACvB,eAAe,EAAE,MAAM,CAAC;QACxB,mBAAmB,EAAE,MAAM,CAAC;QAC5B,kBAAkB,EAAE,MAAM,CAAC;QAC3B,sBAAsB,EAAE,MAAM,CAAC;QAC/B,gBAAgB,EAAE,MAAM,CAAC;KAC1B,CAAC;IACF,UAAU,EAAE;QACV,oBAAoB,EAAE,MAAM,CAAC;QAC7B,gBAAgB,EAAE,MAAM,CAAC;QACzB,mBAAmB,EAAE,MAAM,CAAC;QAC5B,sBAAsB,EAAE,MAAM,CAAC;QAC/B,cAAc,EAAE,MAAM,CAAC;QACvB,kBAAkB,EAAE,MAAM,CAAC;QAC3B,sBAAsB,EAAE,MAAM,CAAC;QAC/B,0BAA0B,EAAE,MAAM,CAAC;QACnC,uBAAuB,EAAE,MAAM,CAAC;QAChC,0BAA0B,EAAE,MAAM,CAAC;KACpC,CAAC;IACF,QAAQ,EAAE;QACR,UAAU,EAAE,MAAM,CAAC;QACnB,MAAM,EAAE,MAAM,CAAC;QACf,aAAa,EAAE,MAAM,CAAC;QACtB,cAAc,EAAE,MAAM,CAAC;QACvB,kBAAkB,EAAE,MAAM,CAAC;QAC3B,qBAAqB,EAAE,MAAM,CAAC;QAC9B,kBAAkB,EAAE,MAAM,CAAC;KAC5B,CAAC;IACF,OAAO,EAAE;QACP,eAAe,EAAE,MAAM,CAAC;QACxB,KAAK,EAAE,MAAM,CAAC;QACd,aAAa,EAAE,MAAM,CAAC;QACtB,WAAW,EAAE,MAAM,CAAC;QACpB,YAAY,EAAE,MAAM,CAAC;QACrB,UAAU,EAAE,MAAM,CAAC;QACnB,YAAY,EAAE,MAAM,CAAC;KACtB,CAAC;IACF,mBAAmB,EAAE;QACnB,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,OAAO,EAAE;QACP,eAAe,EAAE,MAAM,CAAC;QACxB,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IACF,KAAK,EAAE;QACL,eAAe,EAAE,MAAM,CAAC;QACxB,uBAAuB,EAAE,MAAM,CAAC;QAChC,gBAAgB,EAAE,MAAM,CAAC;QACzB,UAAU,EAAE,MAAM,CAAC;QACnB,WAAW,EAAE,MAAM,CAAC;KACrB,CAAC;IACF,MAAM,EAAE;QACN,aAAa,EAAE,MAAM,CAAC;QACtB,iBAAiB,EAAE,MAAM,CAAC;QAC1B,WAAW,EAAE,MAAM,CAAC;QACpB,uBAAuB,EAAE,MAAM,CAAC;QAChC,aAAa,EAAE,MAAM,CAAC;QACtB,gBAAgB,EAAE,MAAM,CAAC;KAC1B,CAAC;CACH;AAED,eAAO,MAAM,MAAM,EAAE;KAAE,OAAO,IAAI,QAAQ,GAAG,KAAK;CAkOjD,CAAC;AAEF,MAAM,WAAW,UAAU,CAAC,CAAC,GAAG,cAAc,CAAE,SAAQ,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;IACxE,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,aAAa,UAAW,UAAU,qDAA4D,CAAC"}
1
+ {"version":3,"file":"Theme.d.ts","sourceRoot":"","sources":["../../src/Theme/Theme.tsx"],"names":[],"mappings":"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"}
@@ -62,6 +62,7 @@ exports.themes = {
62
62
  Input: {
63
63
  backgroundColor: 'var(--text-input-background)',
64
64
  backgroundColorDisabled: 'var(--text-input-disabled)',
65
+ backgroundAutocomplete: 'var(--text-input-autocomplete-background)',
65
66
  labelColor: 'var(--text-input-label)',
66
67
  placeholderColor: 'var(--text-input-placeholder)',
67
68
  borderHover: 'var(--text-input-border-hover)',
@@ -137,6 +138,7 @@ exports.themes = {
137
138
  Input: {
138
139
  backgroundColor: colors_1.COLOR.WHITE,
139
140
  backgroundColorDisabled: colors_v2_1.COLOR_V2.GRAY_20,
141
+ backgroundAutocomplete: colors_v2_1.COLOR_V2.BLUE_LIGHT_50,
140
142
  placeholderColor: colors_1.COLOR.GRAY_DARKEN_24,
141
143
  labelColor: colors_v2_1.COLOR_V2.GRAY_80,
142
144
  borderHover: 'var(--text-input-border-hover)',
@@ -212,6 +214,7 @@ exports.themes = {
212
214
  Input: {
213
215
  backgroundColor: colors_1.COLOR.BLACK_LIGHTEN_24,
214
216
  backgroundColorDisabled: colors_1.COLOR.GRAY_100,
217
+ backgroundAutocomplete: colors_v2_1.COLOR_V2.BLUE_LIGHT_900,
215
218
  placeholderColor: colors_1.COLOR.GRAY_LIGHTEN_88,
216
219
  labelColor: colors_v2_1.COLOR_V2.GRAY_40,
217
220
  borderHover: 'var(--text-input-border-hover)',
package/package.json CHANGED
@@ -33,7 +33,6 @@
33
33
  "@types/node": "^22.0.0",
34
34
  "@types/react": "^18.0.25",
35
35
  "@types/react-dom": "^18.0.8",
36
- "@types/rimraf": "4.0.5",
37
36
  "@types/webpack-env": "1.18.5",
38
37
  "babel-jest": "29.7.0",
39
38
  "babel-loader": "9.2.1",
@@ -70,6 +69,6 @@
70
69
  "test:watch": "jest --watch",
71
70
  "test:update": "jest --updateSnapshot"
72
71
  },
73
- "version": "9.23.5",
74
- "gitHead": "33dc4977e2c2ac6324e0a60c35387663df2b8b42"
72
+ "version": "9.23.7",
73
+ "gitHead": "8fe98da70ba343fbb2617dcf504a52047c8ecb85"
75
74
  }