@popsure/dirty-swan 0.58.0 → 0.58.2

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.
@@ -3,7 +3,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
3
3
  import { c as classNames } from '../../../index-6ea95111.js';
4
4
  import { s as styleInject } from '../../../style-inject.es-1f59c1d0.js';
5
5
 
6
- var css_248z = ".styles-module_container__3zJJC {\n max-width: 100%;\n border: 0;\n margin: 0;\n min-width: 0;\n padding: 0.01em 0 0 0;\n}\n\n.styles-module_narrow__2p34b {\n max-width: 424px;\n}";
6
+ var css_248z = ".styles-module_container__3zJJC {\n max-width: 100%;\n}\n\n.styles-module_narrow__2p34b {\n max-width: 424px;\n}";
7
7
  var styles = {"container":"styles-module_container__3zJJC","narrow":"styles-module_narrow__2p34b"};
8
8
  styleInject(css_248z);
9
9
 
@@ -16,12 +16,14 @@ var Input = React__default.forwardRef(function (_a, ref) {
16
16
  return (jsxs("div", { className: "".concat(styles.container, " ").concat(className !== null && className !== void 0 ? className : ''), children: [label && !labelInsideInput && (jsx("label", { htmlFor: uniqueId, className: classNames('p-p', styles.label, (_b = {},
17
17
  _b[styles['label--with-error']] = error,
18
18
  _b['sr-only'] = hideLabel,
19
- _b)), children: label })), jsxs("div", { style: { position: 'relative' }, children: [jsx("input", __assign({ id: uniqueId, "data-testid": "ds-input-input", type: "text", ref: ref, className: classNames(error ? 'p-input--error' : 'p-input', (!label || labelInsideInput) && placeholder && placeholder.length > 0
19
+ _b)), children: label })), jsxs("div", { style: { position: 'relative' }, children: [jsx("input", __assign({ id: uniqueId, "data-testid": "ds-input-input", type: "text", ref: ref, className: classNames(error ? 'p-input--error' : 'p-input', (!label || labelInsideInput) &&
20
+ placeholder &&
21
+ placeholder.length > 0
20
22
  ? styles.input
21
23
  : styles['input--no-placeholder'], (_c = {},
22
24
  _c[styles['input--with-prefix']] = prefix,
23
25
  _c[styles['input--with-inside-label']] = labelInsideInput,
24
- _c)), placeholder: label || labelInsideInput ? placeholder : ' ', disabled: disabled, "aria-invalid": !!error, "aria-errormessage": error ? error : undefined }, props)), prefix && (jsx("span", { className: classNames(styles.prefix, (_d = {}, _d[styles['prefix--with-error']] = error, _d), (_e = {}, _e[styles['prefix--disabled']] = disabled, _e)), children: prefix })), (!label || labelInsideInput) && (jsx("label", { htmlFor: uniqueId, className: classNames(styles.placeholder, (_f = {}, _f[styles['placeholder--with-prefix']] = prefix, _f), (_g = {}, _g[styles['placeholder--with-error']] = error, _g)), children: labelInsideInput ? label : placeholder }))] }), error && (jsx("p", { className: "p-p--small tc-red-500 w100 ".concat(styles.error), children: error }))] }));
26
+ _c)), placeholder: label || labelInsideInput ? placeholder : ' ', disabled: disabled, "aria-invalid": !!error, "aria-errormessage": error ? "".concat(uniqueId, "-error") : undefined }, props)), prefix && (jsx("span", { className: classNames(styles.prefix, (_d = {}, _d[styles['prefix--with-error']] = error, _d), (_e = {}, _e[styles['prefix--disabled']] = disabled, _e)), children: prefix })), (!label || labelInsideInput) && (jsx("label", { htmlFor: uniqueId, className: classNames(styles.placeholder, (_f = {}, _f[styles['placeholder--with-prefix']] = prefix, _f), (_g = {}, _g[styles['placeholder--with-error']] = error, _g)), children: labelInsideInput ? label : placeholder }))] }), error && (jsx("p", { id: "".concat(uniqueId, "-error"), className: "p-p--small tc-red-500 w100 ".concat(styles.error), children: error }))] }));
25
27
  });
26
28
 
27
29
  export { Input };
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../../../../src/lib/components/input/index.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport classnames from 'classnames';\nimport generateId from '../../util/generateId';\n\nimport styles from './style.module.scss';\n\n// Something weird is going on with enterKeyHint that makes it a required field under certain circumstances. The & Omit<…> and & Pick<…> is a hacky way to go around that.\nexport type InputProps = Omit<JSX.IntrinsicElements['input'], 'enterKeyHint'> &\n Partial<Pick<JSX.IntrinsicElements['input'], 'enterKeyHint'>> & {\n error?: string | boolean;\n prefix?: string;\n label?: string;\n id?: string;\n hideLabel?: boolean;\n labelInsideInput?: boolean;\n};\n\nexport const Input = React.forwardRef(\n (\n {\n className,\n placeholder,\n label,\n id,\n prefix,\n error,\n disabled,\n hideLabel = false,\n labelInsideInput = false,\n ...props\n }: InputProps,\n ref?: React.ForwardedRef<HTMLInputElement>\n ) => {\n const [uniqueId] = useState(id ?? generateId());\n\n return (\n <div className={`${styles.container} ${className ?? ''}`}>\n {label && !labelInsideInput && (\n <label\n htmlFor={uniqueId}\n className={classnames('p-p', styles.label, {\n [styles['label--with-error']]: error,\n 'sr-only': hideLabel,\n })}\n >\n {label}\n </label>\n )}\n <div style={{ position: 'relative' }}>\n <input\n id={uniqueId}\n data-testid=\"ds-input-input\"\n type=\"text\"\n ref={ref}\n className={classnames(\n error ? 'p-input--error' : 'p-input',\n (!label || labelInsideInput) && placeholder && placeholder.length > 0\n ? styles.input\n : styles['input--no-placeholder'],\n {\n [styles['input--with-prefix']]: prefix, \n [styles['input--with-inside-label']]: labelInsideInput\n }\n )}\n placeholder={label || labelInsideInput ? placeholder : ' '}\n disabled={disabled}\n aria-invalid={!!error}\n aria-errormessage={error ? error : undefined}\n {...props}\n />\n {prefix && (\n <span\n className={classnames(\n styles.prefix,\n { [styles['prefix--with-error']]: error },\n { [styles['prefix--disabled']]: disabled }\n )}\n >\n {prefix}\n </span>\n )}\n {(!label || labelInsideInput) && (\n <label\n htmlFor={uniqueId}\n className={classnames(\n styles.placeholder,\n { [styles['placeholder--with-prefix']]: prefix },\n { [styles['placeholder--with-error']]: error }\n )}\n >\n {labelInsideInput ? label : placeholder}\n </label>\n )}\n </div>\n {error && (\n <p className={`p-p--small tc-red-500 w100 ${styles.error}`}>\n {error}\n </p>\n )}\n </div>\n );\n }\n);\n"],"names":["React","_jsxs","_jsx","classnames"],"mappings":";;;;;;;;;;;IAiBa,KAAK,GAAGA,cAAK,CAAC,UAAU,CACnC,UACE,EAWa,EACb,GAA0C;;IAXxC,IAAA,SAAS,eAAA,EACT,WAAW,iBAAA,EACX,KAAK,WAAA,EACL,EAAE,QAAA,EACF,MAAM,YAAA,EACN,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,wBAAwB,EAAxB,gBAAgB,mBAAG,KAAK,KAAA,EACrB,KAAK,cAVV,2GAWC,CADS;IAIH,IAAA,QAAQ,GAAI,QAAQ,CAAC,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,UAAU,EAAE,CAAC,GAAhC,CAAiC;IAEhD,QACEC,cAAK,SAAS,EAAE,UAAG,MAAM,CAAC,SAAS,cAAI,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,EAAE,CAAE,aACrD,KAAK,IAAI,CAAC,gBAAgB,KACzBC,eACE,OAAO,EAAE,QAAQ,EACjB,SAAS,EAAEC,UAAU,CAAC,KAAK,EAAE,MAAM,CAAC,KAAK;oBACvC,GAAC,MAAM,CAAC,mBAAmB,CAAC,IAAG,KAAK;oBACpC,aAAS,GAAE,SAAS;wBACpB,YAED,KAAK,GACA,CACT,EACDF,cAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,aAClCC,wBACE,EAAE,EAAE,QAAQ,iBACA,gBAAgB,EAC5B,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,GAAG,EACR,SAAS,EAAEC,UAAU,CACnB,KAAK,GAAG,gBAAgB,GAAG,SAAS,EACpC,CAAC,CAAC,KAAK,IAAI,gBAAgB,KAAK,WAAW,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC;8BACjE,MAAM,CAAC,KAAK;8BACZ,MAAM,CAAC,uBAAuB,CAAC;4BAEjC,GAAC,MAAM,CAAC,oBAAoB,CAAC,IAAG,MAAM;4BACtC,GAAC,MAAM,CAAC,0BAA0B,CAAC,IAAG,gBAAgB;gCAEzD,EACD,WAAW,EAAE,KAAK,IAAI,gBAAgB,GAAG,WAAW,GAAG,GAAG,EAC1D,QAAQ,EAAE,QAAQ,kBACJ,CAAC,CAAC,KAAK,uBACF,KAAK,GAAG,KAAK,GAAG,SAAS,IACxC,KAAK,EACT,EACD,MAAM,KACLD,cACE,SAAS,EAAEC,UAAU,CACnB,MAAM,CAAC,MAAM,YACX,GAAC,MAAM,CAAC,oBAAoB,CAAC,IAAG,KAAK,iBACrC,GAAC,MAAM,CAAC,kBAAkB,CAAC,IAAG,QAAQ,MACzC,YAEA,MAAM,GACF,CACR,EACA,CAAC,CAAC,KAAK,IAAI,gBAAgB,MAC1BD,eACE,OAAO,EAAE,QAAQ,EACjB,SAAS,EAAEC,UAAU,CACnB,MAAM,CAAC,WAAW,YAChB,GAAC,MAAM,CAAC,0BAA0B,CAAC,IAAG,MAAM,iBAC5C,GAAC,MAAM,CAAC,yBAAyB,CAAC,IAAG,KAAK,MAC7C,YAEA,gBAAgB,GAAG,KAAK,GAAG,WAAW,GACjC,CACT,IACG,EACL,KAAK,KACJD,WAAG,SAAS,EAAE,qCAA8B,MAAM,CAAC,KAAK,CAAE,YACvD,KAAK,GACJ,CACL,IACG,EACN;AACJ,CAAC;;;;"}
1
+ {"version":3,"file":"index.js","sources":["../../../../../src/lib/components/input/index.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport classnames from 'classnames';\nimport generateId from '../../util/generateId';\n\nimport styles from './style.module.scss';\n\n// Something weird is going on with enterKeyHint that makes it a required field under certain circumstances. The & Omit<…> and & Pick<…> is a hacky way to go around that.\nexport type InputProps = Omit<JSX.IntrinsicElements['input'], 'enterKeyHint'> &\n Partial<Pick<JSX.IntrinsicElements['input'], 'enterKeyHint'>> & {\n error?: string | boolean;\n prefix?: string;\n label?: string;\n id?: string;\n hideLabel?: boolean;\n labelInsideInput?: boolean;\n };\n\nexport const Input = React.forwardRef(\n (\n {\n className,\n placeholder,\n label,\n id,\n prefix,\n error,\n disabled,\n hideLabel = false,\n labelInsideInput = false,\n ...props\n }: InputProps,\n ref?: React.ForwardedRef<HTMLInputElement>\n ) => {\n const [uniqueId] = useState(id ?? generateId());\n\n return (\n <div className={`${styles.container} ${className ?? ''}`}>\n {label && !labelInsideInput && (\n <label\n htmlFor={uniqueId}\n className={classnames('p-p', styles.label, {\n [styles['label--with-error']]: error,\n 'sr-only': hideLabel,\n })}\n >\n {label}\n </label>\n )}\n <div style={{ position: 'relative' }}>\n <input\n id={uniqueId}\n data-testid=\"ds-input-input\"\n type=\"text\"\n ref={ref}\n className={classnames(\n error ? 'p-input--error' : 'p-input',\n (!label || labelInsideInput) &&\n placeholder &&\n placeholder.length > 0\n ? styles.input\n : styles['input--no-placeholder'],\n {\n [styles['input--with-prefix']]: prefix,\n [styles['input--with-inside-label']]: labelInsideInput,\n }\n )}\n placeholder={label || labelInsideInput ? placeholder : ' '}\n disabled={disabled}\n aria-invalid={!!error}\n aria-errormessage={error ? `${uniqueId}-error` : undefined}\n {...props}\n />\n {prefix && (\n <span\n className={classnames(\n styles.prefix,\n { [styles['prefix--with-error']]: error },\n { [styles['prefix--disabled']]: disabled }\n )}\n >\n {prefix}\n </span>\n )}\n {(!label || labelInsideInput) && (\n <label\n htmlFor={uniqueId}\n className={classnames(\n styles.placeholder,\n { [styles['placeholder--with-prefix']]: prefix },\n { [styles['placeholder--with-error']]: error }\n )}\n >\n {labelInsideInput ? label : placeholder}\n </label>\n )}\n </div>\n {error && (\n <p\n id={`${uniqueId}-error`}\n className={`p-p--small tc-red-500 w100 ${styles.error}`}\n >\n {error}\n </p>\n )}\n </div>\n );\n }\n);\n"],"names":["React","_jsxs","_jsx","classnames"],"mappings":";;;;;;;;;;;IAiBa,KAAK,GAAGA,cAAK,CAAC,UAAU,CACnC,UACE,EAWa,EACb,GAA0C;;IAXxC,IAAA,SAAS,eAAA,EACT,WAAW,iBAAA,EACX,KAAK,WAAA,EACL,EAAE,QAAA,EACF,MAAM,YAAA,EACN,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,wBAAwB,EAAxB,gBAAgB,mBAAG,KAAK,KAAA,EACrB,KAAK,cAVV,2GAWC,CADS;IAIH,IAAA,QAAQ,GAAI,QAAQ,CAAC,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,UAAU,EAAE,CAAC,GAAhC,CAAiC;IAEhD,QACEC,cAAK,SAAS,EAAE,UAAG,MAAM,CAAC,SAAS,cAAI,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,EAAE,CAAE,aACrD,KAAK,IAAI,CAAC,gBAAgB,KACzBC,eACE,OAAO,EAAE,QAAQ,EACjB,SAAS,EAAEC,UAAU,CAAC,KAAK,EAAE,MAAM,CAAC,KAAK;oBACvC,GAAC,MAAM,CAAC,mBAAmB,CAAC,IAAG,KAAK;oBACpC,aAAS,GAAE,SAAS;wBACpB,YAED,KAAK,GACA,CACT,EACDF,cAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,aAClCC,wBACE,EAAE,EAAE,QAAQ,iBACA,gBAAgB,EAC5B,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,GAAG,EACR,SAAS,EAAEC,UAAU,CACnB,KAAK,GAAG,gBAAgB,GAAG,SAAS,EACpC,CAAC,CAAC,KAAK,IAAI,gBAAgB;4BACzB,WAAW;4BACX,WAAW,CAAC,MAAM,GAAG,CAAC;8BACpB,MAAM,CAAC,KAAK;8BACZ,MAAM,CAAC,uBAAuB,CAAC;4BAEjC,GAAC,MAAM,CAAC,oBAAoB,CAAC,IAAG,MAAM;4BACtC,GAAC,MAAM,CAAC,0BAA0B,CAAC,IAAG,gBAAgB;gCAEzD,EACD,WAAW,EAAE,KAAK,IAAI,gBAAgB,GAAG,WAAW,GAAG,GAAG,EAC1D,QAAQ,EAAE,QAAQ,kBACJ,CAAC,CAAC,KAAK,uBACF,KAAK,GAAG,UAAG,QAAQ,WAAQ,GAAG,SAAS,IACtD,KAAK,EACT,EACD,MAAM,KACLD,cACE,SAAS,EAAEC,UAAU,CACnB,MAAM,CAAC,MAAM,YACX,GAAC,MAAM,CAAC,oBAAoB,CAAC,IAAG,KAAK,iBACrC,GAAC,MAAM,CAAC,kBAAkB,CAAC,IAAG,QAAQ,MACzC,YAEA,MAAM,GACF,CACR,EACA,CAAC,CAAC,KAAK,IAAI,gBAAgB,MAC1BD,eACE,OAAO,EAAE,QAAQ,EACjB,SAAS,EAAEC,UAAU,CACnB,MAAM,CAAC,WAAW,YAChB,GAAC,MAAM,CAAC,0BAA0B,CAAC,IAAG,MAAM,iBAC5C,GAAC,MAAM,CAAC,yBAAyB,CAAC,IAAG,KAAK,MAC7C,YAEA,gBAAgB,GAAG,KAAK,GAAG,WAAW,GACjC,CACT,IACG,EACL,KAAK,KACJD,WACE,EAAE,EAAE,UAAG,QAAQ,WAAQ,EACvB,SAAS,EAAE,qCAA8B,MAAM,CAAC,KAAK,CAAE,YAEtD,KAAK,GACJ,CACL,IACG,EACN;AACJ,CAAC;;;;"}
@@ -3,7 +3,7 @@ import { c as classNames } from '../../../index-6ea95111.js';
3
3
  import { s as styleInject } from '../../../style-inject.es-1f59c1d0.js';
4
4
  import { g as generateId } from '../../../index-69a46657.js';
5
5
 
6
- var css_248z = ".styles-module_container__3M-sc {\n max-width: 100%;\n border: 0;\n margin: 0;\n min-width: 0;\n padding: 0.01em 0 0 0;\n}\n\n.styles-module_narrow__3VUzp {\n max-width: 424px;\n}\n\n.styles-module_wide__3nLhz {\n max-width: 736px;\n}";
6
+ var css_248z = ".styles-module_container__3M-sc {\n max-width: 100%;\n}\n\n.styles-module_narrow__3VUzp {\n max-width: 424px;\n}\n\n.styles-module_wide__3nLhz {\n max-width: 736px;\n}";
7
7
  var styles = {"container":"styles-module_container__3M-sc","narrow":"styles-module_narrow__3VUzp","wide":"styles-module_wide__3nLhz"};
8
8
  styleInject(css_248z);
9
9
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@popsure/dirty-swan",
3
- "version": "0.58.0",
3
+ "version": "0.58.2",
4
4
  "author": "Vincent Audoire <vincent@getpopsure.com>",
5
5
  "license": "MIT",
6
6
  "private": false,
@@ -1,9 +1,5 @@
1
1
  .container {
2
2
  max-width: 100%;
3
- border: 0;
4
- margin: 0;
5
- min-width: 0;
6
- padding: 0.01em 0 0 0;
7
3
  }
8
4
 
9
5
  .narrow {
@@ -5,15 +5,15 @@ import generateId from '../../util/generateId';
5
5
  import styles from './style.module.scss';
6
6
 
7
7
  // Something weird is going on with enterKeyHint that makes it a required field under certain circumstances. The & Omit<…> and & Pick<…> is a hacky way to go around that.
8
- export type InputProps = Omit<JSX.IntrinsicElements['input'], 'enterKeyHint'> &
9
- Partial<Pick<JSX.IntrinsicElements['input'], 'enterKeyHint'>> & {
10
- error?: string | boolean;
11
- prefix?: string;
12
- label?: string;
13
- id?: string;
14
- hideLabel?: boolean;
15
- labelInsideInput?: boolean;
16
- };
8
+ export type InputProps = Omit<JSX.IntrinsicElements['input'], 'enterKeyHint'> &
9
+ Partial<Pick<JSX.IntrinsicElements['input'], 'enterKeyHint'>> & {
10
+ error?: string | boolean;
11
+ prefix?: string;
12
+ label?: string;
13
+ id?: string;
14
+ hideLabel?: boolean;
15
+ labelInsideInput?: boolean;
16
+ };
17
17
 
18
18
  export const Input = React.forwardRef(
19
19
  (
@@ -54,18 +54,20 @@ export const Input = React.forwardRef(
54
54
  ref={ref}
55
55
  className={classnames(
56
56
  error ? 'p-input--error' : 'p-input',
57
- (!label || labelInsideInput) && placeholder && placeholder.length > 0
57
+ (!label || labelInsideInput) &&
58
+ placeholder &&
59
+ placeholder.length > 0
58
60
  ? styles.input
59
61
  : styles['input--no-placeholder'],
60
62
  {
61
- [styles['input--with-prefix']]: prefix,
62
- [styles['input--with-inside-label']]: labelInsideInput
63
+ [styles['input--with-prefix']]: prefix,
64
+ [styles['input--with-inside-label']]: labelInsideInput,
63
65
  }
64
66
  )}
65
67
  placeholder={label || labelInsideInput ? placeholder : ' '}
66
68
  disabled={disabled}
67
69
  aria-invalid={!!error}
68
- aria-errormessage={error ? error : undefined}
70
+ aria-errormessage={error ? `${uniqueId}-error` : undefined}
69
71
  {...props}
70
72
  />
71
73
  {prefix && (
@@ -93,7 +95,10 @@ export const Input = React.forwardRef(
93
95
  )}
94
96
  </div>
95
97
  {error && (
96
- <p className={`p-p--small tc-red-500 w100 ${styles.error}`}>
98
+ <p
99
+ id={`${uniqueId}-error`}
100
+ className={`p-p--small tc-red-500 w100 ${styles.error}`}
101
+ >
97
102
  {error}
98
103
  </p>
99
104
  )}
@@ -1,9 +1,5 @@
1
1
  .container {
2
2
  max-width: 100%;
3
- border: 0;
4
- margin: 0;
5
- min-width: 0;
6
- padding: 0.01em 0 0 0;
7
3
  }
8
4
 
9
5
  .narrow {