@wireapp/react-ui-kit 9.12.8 → 9.13.0

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 (4) hide show
  1. package/lib/Form/Input.d.ts +4 -0
  2. package/lib/Form/Input.d.ts.map +1 -1
  3. package/lib/Form/Input.js +2 -2
  4. package/package.json +5 -5
package/lib/Form/Input.d.ts CHANGED
@@ -11,6 +11,10 @@ export interface InputProps<T = HTMLInputElement> extends TextProps<T> {
11
11
  helperText?: string;
12
12
  placeholderTextTransform?: Property.TextTransform;
13
13
  wrapperCSS?: CSSObject;
14
+ inputCSS?: CSSObject;
15
+ size?: number;
16
+ startContent?: React.ReactNode;
17
+ endContent?: React.ReactNode;
14
18
  }
15
19
  export declare const inputStyle: <T>(theme: Theme, props: InputProps<T>, hasError?: boolean) => CSSObject;
16
20
  export declare const INPUT_CLASSNAME = "wireinput";
package/lib/Form/Input.d.ts.map CHANGED
@@ -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;CACxB;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,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAAC,gBAAgB,CAAC,CA2EvD,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,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,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,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAAC,gBAAgB,CAAC,CAkGxD,CAAC"}
package/lib/Form/Input.js CHANGED
@@ -105,7 +105,7 @@ const centerInputAction = {
105
105
  transform: 'translateY(-50%)',
106
106
  };
107
107
  exports.Input = React.forwardRef((_a, ref) => {
108
- var { type, label, error, helperText, wrapperCSS = {}, className = '' } = _a, props = __rest(_a, ["type", "label", "error", "helperText", "wrapperCSS", "className"]);
108
+ var { type, label, error, helperText, startContent = null, endContent = null, inputCSS = {}, wrapperCSS = {}, className = '' } = _a, props = __rest(_a, ["type", "label", "error", "helperText", "startContent", "endContent", "inputCSS", "wrapperCSS", "className"]);
109
109
  const [togglePassword, setTogglePassword] = (0, react_1.useState)(false);
110
110
  const hasError = !!error;
111
111
  const isPasswordInput = type === 'password';
@@ -113,7 +113,7 @@ exports.Input = React.forwardRef((_a, ref) => {
113
113
  const toggleSetPassword = () => setTogglePassword(prevState => !prevState);
114
114
  return ((0, jsx_runtime_1.jsxs)("div", { className: exports.INPUT_GROUP, css: (theme) => (Object.assign({ marginBottom: hasError ? '2px' : '20px', width: '100%', '&:focus-within label': {
115
115
  color: theme.general.primaryColor,
116
- } }, wrapperCSS)), children: [label && ((0, jsx_runtime_1.jsx)(InputLabel_1.InputLabel, { htmlFor: props.id, isRequired: props.required, markInvalid: props.markInvalid, children: label })), (0, jsx_runtime_1.jsxs)("div", { css: { marginBottom: hasError && '8px', position: 'relative' }, children: [(0, jsx_runtime_1.jsx)("input", Object.assign({ className: exports.INPUT_CLASSNAME, css: (theme) => (0, exports.inputStyle)(theme, props, hasError), ref: ref, type: isPasswordInput ? toggledPasswordType : type, "aria-required": props.required }, filterInputProps(props))), hasError && !isPasswordInput && ((0, jsx_runtime_1.jsx)(Icon_1.ErrorIcon, { css: centerInputAction, width: 16, height: 16, "aria-hidden": "true" })), isPasswordInput && ((0, jsx_runtime_1.jsx)("button", { type: "button", "data-uie-name": !togglePassword ? 'do-show-password' : 'do-hide-password', css: Object.assign(Object.assign({}, centerInputAction), { background: 'transparent', border: 'none', cursor: 'pointer', padding: 0 }), onClick: toggleSetPassword, title: "Toggle password visibility", "aria-controls": props.id, "aria-expanded": togglePassword, children: togglePassword ? (0, jsx_runtime_1.jsx)(Icon_1.HideIcon, {}) : (0, jsx_runtime_1.jsx)(Icon_1.ShowIcon, {}) }))] }), !hasError && helperText && ((0, jsx_runtime_1.jsx)("p", { css: (theme) => ({
116
+ } }, wrapperCSS)), children: [label && ((0, jsx_runtime_1.jsx)(InputLabel_1.InputLabel, { htmlFor: props.id, isRequired: props.required, markInvalid: props.markInvalid, children: label })), (0, jsx_runtime_1.jsxs)("div", { css: { marginBottom: hasError && '8px', position: 'relative' }, children: [startContent, (0, jsx_runtime_1.jsx)("input", Object.assign({ className: exports.INPUT_CLASSNAME, css: (theme) => (Object.assign(Object.assign({}, (0, exports.inputStyle)(theme, props, hasError)), inputCSS)), ref: ref, type: isPasswordInput ? toggledPasswordType : type, "aria-required": props.required }, filterInputProps(props))), endContent, hasError && !isPasswordInput && ((0, jsx_runtime_1.jsx)(Icon_1.ErrorIcon, { css: centerInputAction, width: 16, height: 16, "aria-hidden": "true" })), isPasswordInput && ((0, jsx_runtime_1.jsx)("button", { type: "button", "data-uie-name": !togglePassword ? 'do-show-password' : 'do-hide-password', css: Object.assign(Object.assign({}, centerInputAction), { background: 'transparent', border: 'none', cursor: 'pointer', padding: 0 }), onClick: toggleSetPassword, title: "Toggle password visibility", "aria-controls": props.id, "aria-expanded": togglePassword, children: togglePassword ? (0, jsx_runtime_1.jsx)(Icon_1.HideIcon, {}) : (0, jsx_runtime_1.jsx)(Icon_1.ShowIcon, {}) }))] }), !hasError && helperText && ((0, jsx_runtime_1.jsx)("p", { css: (theme) => ({
117
117
  fontSize: theme.fontSizes.small,
118
118
  fontWeight: 400,
119
119
  color: theme.Input.placeholderColor,
package/package.json CHANGED
@@ -15,9 +15,9 @@
15
15
  "react-transition-group": "4.4.5"
16
16
  },
17
17
  "devDependencies": {
18
- "@babel/cli": "7.23.4",
18
+ "@babel/cli": "7.23.9",
19
19
  "@babel/core": "7.23.7",
20
- "@babel/preset-env": "7.23.8",
20
+ "@babel/preset-env": "7.23.9",
21
21
  "@babel/preset-react": "7.23.3",
22
22
  "@babel/preset-typescript": "7.23.3",
23
23
  "@emotion/babel-preset-css-prop": "^11.10.0",
@@ -26,7 +26,7 @@
26
26
  "@hot-loader/react-dom": "17.0.2",
27
27
  "@swc/core": "^1.3.10",
28
28
  "@swc/jest": "^0.2.23",
29
- "@testing-library/jest-dom": "6.2.0",
29
+ "@testing-library/jest-dom": "6.3.0",
30
30
  "@testing-library/react": "14.1.2",
31
31
  "@testing-library/user-event": "14.5.2",
32
32
  "@types/jest": "^29.2.0",
@@ -70,6 +70,6 @@
70
70
  "test:watch": "jest --watch",
71
71
  "test:update": "jest --updateSnapshot"
72
72
  },
73
- "version": "9.12.8",
74
- "gitHead": "368d0946bb85bb8eff2c71d91b8c4b46c14aeb1d"
73
+ "version": "9.13.0",
74
+ "gitHead": "d2e3e053aab7e6b58b376a7562a5f3e7733fb1fc"
75
75
  }