@transferwise/components 0.0.0-experimental-ebe1b52 → 0.0.0-experimental-bcfa03a

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,5 +1,6 @@
1
1
  'use strict';
2
2
 
3
+ var Divider = require('../../../../divider/Divider.js');
3
4
  var SelectInput_helpers = require('../../SelectInput.helpers.js');
4
5
  var SelectInputGroupItemView = require('../GroupItemView/SelectInputGroupItemView.js');
5
6
  var SelectInputOption = require('./Option/SelectInputOption.js');
@@ -33,8 +34,10 @@ function SelectInputItemView({
33
34
  case 'separator':
34
35
  {
35
36
  if (needle == null) {
36
- return /*#__PURE__*/jsxRuntime.jsx("hr", {
37
- className: "np-select-input-separator-item"
37
+ return /*#__PURE__*/jsxRuntime.jsx(Divider.default, {
38
+ isContent: true,
39
+ level: "subsection",
40
+ className: "m-y-1"
38
41
  });
39
42
  }
40
43
  break;
@@ -1 +1 @@
1
- {"version":3,"file":"SelectInputItemView.js","sources":["../../../../../src/inputs/SelectInput/Options/ItemView/SelectInputItemView.tsx"],"sourcesContent":["import { selectInputOptionItemIncludesNeedle } from '../../SelectInput.helpers';\nimport type { SelectInputItemViewProps } from '../../SelectInput.types';\nimport { SelectInputGroupItemView } from '../GroupItemView';\nimport { SelectInputOption } from './Option';\n\nexport function SelectInputItemView<T = string>({\n item,\n renderValue,\n needle,\n}: SelectInputItemViewProps<T>) {\n switch (item.type) {\n case 'option': {\n if (\n item.value != null &&\n (needle == null || selectInputOptionItemIncludesNeedle(item, needle))\n ) {\n return (\n <SelectInputOption value={item.value} disabled={item.disabled}>\n {renderValue(item.value, false)}\n </SelectInputOption>\n );\n }\n break;\n }\n case 'group': {\n return <SelectInputGroupItemView item={item} renderValue={renderValue} needle={needle} />;\n }\n case 'separator': {\n if (needle == null) {\n return <hr className=\"np-select-input-separator-item\" />;\n }\n break;\n }\n }\n return null;\n}\n"],"names":["SelectInputItemView","item","renderValue","needle","type","value","selectInputOptionItemIncludesNeedle","_jsx","SelectInputOption","disabled","children","SelectInputGroupItemView","className"],"mappings":";;;;;;;AAKM,SAAUA,mBAAmBA,CAAa;EAC9CC,IAAI;EACJC,WAAW;AACXC,EAAAA;AAAM,CACsB,EAAA;EAC5B,QAAQF,IAAI,CAACG,IAAI;AACf,IAAA,KAAK,QAAQ;AAAE,MAAA;AACb,QAAA,IACEH,IAAI,CAACI,KAAK,IAAI,IAAI,KACjBF,MAAM,IAAI,IAAI,IAAIG,uDAAmC,CAACL,IAAI,EAAEE,MAAM,CAAC,CAAC,EACrE;UACA,oBACEI,cAAA,CAACC,mCAAiB,EAAA;YAACH,KAAK,EAAEJ,IAAI,CAACI,KAAM;YAACI,QAAQ,EAAER,IAAI,CAACQ,QAAS;AAAAC,YAAAA,QAAA,EAC3DR,WAAW,CAACD,IAAI,CAACI,KAAK,EAAE,KAAK;AAAC,WACd,CAAC;AAExB,QAAA;AACA,QAAA;AACF,MAAA;AACA,IAAA,KAAK,OAAO;AAAE,MAAA;QACZ,oBAAOE,cAAA,CAACI,iDAAwB,EAAA;AAACV,UAAAA,IAAI,EAAEA,IAAK;AAACC,UAAAA,WAAW,EAAEA,WAAY;AAACC,UAAAA,MAAM,EAAEA;AAAO,SAAA,CAAG;AAC3F,MAAA;AACA,IAAA,KAAK,WAAW;AAAE,MAAA;QAChB,IAAIA,MAAM,IAAI,IAAI,EAAE;AAClB,UAAA,oBAAOI,cAAA,CAAA,IAAA,EAAA;AAAIK,YAAAA,SAAS,EAAC;AAAgC,YAAG;AAC1D,QAAA;AACA,QAAA;AACF,MAAA;AACF;AACA,EAAA,OAAO,IAAI;AACb;;;;"}
1
+ {"version":3,"file":"SelectInputItemView.js","sources":["../../../../../src/inputs/SelectInput/Options/ItemView/SelectInputItemView.tsx"],"sourcesContent":["import Divider from '../../../../divider';\nimport { selectInputOptionItemIncludesNeedle } from '../../SelectInput.helpers';\nimport type { SelectInputItemViewProps } from '../../SelectInput.types';\nimport { SelectInputGroupItemView } from '../GroupItemView';\nimport { SelectInputOption } from './Option';\n\nexport function SelectInputItemView<T = string>({\n item,\n renderValue,\n needle,\n}: SelectInputItemViewProps<T>) {\n switch (item.type) {\n case 'option': {\n if (\n item.value != null &&\n (needle == null || selectInputOptionItemIncludesNeedle(item, needle))\n ) {\n return (\n <SelectInputOption value={item.value} disabled={item.disabled}>\n {renderValue(item.value, false)}\n </SelectInputOption>\n );\n }\n break;\n }\n case 'group': {\n return <SelectInputGroupItemView item={item} renderValue={renderValue} needle={needle} />;\n }\n case 'separator': {\n if (needle == null) {\n return <Divider isContent level=\"subsection\" className=\"m-y-1\" />;\n }\n break;\n }\n }\n return null;\n}\n"],"names":["SelectInputItemView","item","renderValue","needle","type","value","selectInputOptionItemIncludesNeedle","_jsx","SelectInputOption","disabled","children","SelectInputGroupItemView","Divider","isContent","level","className"],"mappings":";;;;;;;;AAMM,SAAUA,mBAAmBA,CAAa;EAC9CC,IAAI;EACJC,WAAW;AACXC,EAAAA;AAAM,CACsB,EAAA;EAC5B,QAAQF,IAAI,CAACG,IAAI;AACf,IAAA,KAAK,QAAQ;AAAE,MAAA;AACb,QAAA,IACEH,IAAI,CAACI,KAAK,IAAI,IAAI,KACjBF,MAAM,IAAI,IAAI,IAAIG,uDAAmC,CAACL,IAAI,EAAEE,MAAM,CAAC,CAAC,EACrE;UACA,oBACEI,cAAA,CAACC,mCAAiB,EAAA;YAACH,KAAK,EAAEJ,IAAI,CAACI,KAAM;YAACI,QAAQ,EAAER,IAAI,CAACQ,QAAS;AAAAC,YAAAA,QAAA,EAC3DR,WAAW,CAACD,IAAI,CAACI,KAAK,EAAE,KAAK;AAAC,WACd,CAAC;AAExB,QAAA;AACA,QAAA;AACF,MAAA;AACA,IAAA,KAAK,OAAO;AAAE,MAAA;QACZ,oBAAOE,cAAA,CAACI,iDAAwB,EAAA;AAACV,UAAAA,IAAI,EAAEA,IAAK;AAACC,UAAAA,WAAW,EAAEA,WAAY;AAACC,UAAAA,MAAM,EAAEA;AAAO,SAAA,CAAG;AAC3F,MAAA;AACA,IAAA,KAAK,WAAW;AAAE,MAAA;QAChB,IAAIA,MAAM,IAAI,IAAI,EAAE;UAClB,oBAAOI,cAAA,CAACK,eAAO,EAAA;YAACC,SAAS,EAAA,IAAA;AAACC,YAAAA,KAAK,EAAC,YAAY;AAACC,YAAAA,SAAS,EAAC;AAAO,YAAG;AACnE,QAAA;AACA,QAAA;AACF,MAAA;AACF;AACA,EAAA,OAAO,IAAI;AACb;;;;"}
@@ -1,3 +1,4 @@
1
+ import Divider from '../../../../divider/Divider.mjs';
1
2
  import { selectInputOptionItemIncludesNeedle } from '../../SelectInput.helpers.mjs';
2
3
  import { SelectInputGroupItemView } from '../GroupItemView/SelectInputGroupItemView.mjs';
3
4
  import { SelectInputOption } from './Option/SelectInputOption.mjs';
@@ -31,8 +32,10 @@ function SelectInputItemView({
31
32
  case 'separator':
32
33
  {
33
34
  if (needle == null) {
34
- return /*#__PURE__*/jsx("hr", {
35
- className: "np-select-input-separator-item"
35
+ return /*#__PURE__*/jsx(Divider, {
36
+ isContent: true,
37
+ level: "subsection",
38
+ className: "m-y-1"
36
39
  });
37
40
  }
38
41
  break;
@@ -1 +1 @@
1
- {"version":3,"file":"SelectInputItemView.mjs","sources":["../../../../../src/inputs/SelectInput/Options/ItemView/SelectInputItemView.tsx"],"sourcesContent":["import { selectInputOptionItemIncludesNeedle } from '../../SelectInput.helpers';\nimport type { SelectInputItemViewProps } from '../../SelectInput.types';\nimport { SelectInputGroupItemView } from '../GroupItemView';\nimport { SelectInputOption } from './Option';\n\nexport function SelectInputItemView<T = string>({\n item,\n renderValue,\n needle,\n}: SelectInputItemViewProps<T>) {\n switch (item.type) {\n case 'option': {\n if (\n item.value != null &&\n (needle == null || selectInputOptionItemIncludesNeedle(item, needle))\n ) {\n return (\n <SelectInputOption value={item.value} disabled={item.disabled}>\n {renderValue(item.value, false)}\n </SelectInputOption>\n );\n }\n break;\n }\n case 'group': {\n return <SelectInputGroupItemView item={item} renderValue={renderValue} needle={needle} />;\n }\n case 'separator': {\n if (needle == null) {\n return <hr className=\"np-select-input-separator-item\" />;\n }\n break;\n }\n }\n return null;\n}\n"],"names":["SelectInputItemView","item","renderValue","needle","type","value","selectInputOptionItemIncludesNeedle","_jsx","SelectInputOption","disabled","children","SelectInputGroupItemView","className"],"mappings":";;;;;AAKM,SAAUA,mBAAmBA,CAAa;EAC9CC,IAAI;EACJC,WAAW;AACXC,EAAAA;AAAM,CACsB,EAAA;EAC5B,QAAQF,IAAI,CAACG,IAAI;AACf,IAAA,KAAK,QAAQ;AAAE,MAAA;AACb,QAAA,IACEH,IAAI,CAACI,KAAK,IAAI,IAAI,KACjBF,MAAM,IAAI,IAAI,IAAIG,mCAAmC,CAACL,IAAI,EAAEE,MAAM,CAAC,CAAC,EACrE;UACA,oBACEI,GAAA,CAACC,iBAAiB,EAAA;YAACH,KAAK,EAAEJ,IAAI,CAACI,KAAM;YAACI,QAAQ,EAAER,IAAI,CAACQ,QAAS;AAAAC,YAAAA,QAAA,EAC3DR,WAAW,CAACD,IAAI,CAACI,KAAK,EAAE,KAAK;AAAC,WACd,CAAC;AAExB,QAAA;AACA,QAAA;AACF,MAAA;AACA,IAAA,KAAK,OAAO;AAAE,MAAA;QACZ,oBAAOE,GAAA,CAACI,wBAAwB,EAAA;AAACV,UAAAA,IAAI,EAAEA,IAAK;AAACC,UAAAA,WAAW,EAAEA,WAAY;AAACC,UAAAA,MAAM,EAAEA;AAAO,SAAA,CAAG;AAC3F,MAAA;AACA,IAAA,KAAK,WAAW;AAAE,MAAA;QAChB,IAAIA,MAAM,IAAI,IAAI,EAAE;AAClB,UAAA,oBAAOI,GAAA,CAAA,IAAA,EAAA;AAAIK,YAAAA,SAAS,EAAC;AAAgC,YAAG;AAC1D,QAAA;AACA,QAAA;AACF,MAAA;AACF;AACA,EAAA,OAAO,IAAI;AACb;;;;"}
1
+ {"version":3,"file":"SelectInputItemView.mjs","sources":["../../../../../src/inputs/SelectInput/Options/ItemView/SelectInputItemView.tsx"],"sourcesContent":["import Divider from '../../../../divider';\nimport { selectInputOptionItemIncludesNeedle } from '../../SelectInput.helpers';\nimport type { SelectInputItemViewProps } from '../../SelectInput.types';\nimport { SelectInputGroupItemView } from '../GroupItemView';\nimport { SelectInputOption } from './Option';\n\nexport function SelectInputItemView<T = string>({\n item,\n renderValue,\n needle,\n}: SelectInputItemViewProps<T>) {\n switch (item.type) {\n case 'option': {\n if (\n item.value != null &&\n (needle == null || selectInputOptionItemIncludesNeedle(item, needle))\n ) {\n return (\n <SelectInputOption value={item.value} disabled={item.disabled}>\n {renderValue(item.value, false)}\n </SelectInputOption>\n );\n }\n break;\n }\n case 'group': {\n return <SelectInputGroupItemView item={item} renderValue={renderValue} needle={needle} />;\n }\n case 'separator': {\n if (needle == null) {\n return <Divider isContent level=\"subsection\" className=\"m-y-1\" />;\n }\n break;\n }\n }\n return null;\n}\n"],"names":["SelectInputItemView","item","renderValue","needle","type","value","selectInputOptionItemIncludesNeedle","_jsx","SelectInputOption","disabled","children","SelectInputGroupItemView","Divider","isContent","level","className"],"mappings":";;;;;;AAMM,SAAUA,mBAAmBA,CAAa;EAC9CC,IAAI;EACJC,WAAW;AACXC,EAAAA;AAAM,CACsB,EAAA;EAC5B,QAAQF,IAAI,CAACG,IAAI;AACf,IAAA,KAAK,QAAQ;AAAE,MAAA;AACb,QAAA,IACEH,IAAI,CAACI,KAAK,IAAI,IAAI,KACjBF,MAAM,IAAI,IAAI,IAAIG,mCAAmC,CAACL,IAAI,EAAEE,MAAM,CAAC,CAAC,EACrE;UACA,oBACEI,GAAA,CAACC,iBAAiB,EAAA;YAACH,KAAK,EAAEJ,IAAI,CAACI,KAAM;YAACI,QAAQ,EAAER,IAAI,CAACQ,QAAS;AAAAC,YAAAA,QAAA,EAC3DR,WAAW,CAACD,IAAI,CAACI,KAAK,EAAE,KAAK;AAAC,WACd,CAAC;AAExB,QAAA;AACA,QAAA;AACF,MAAA;AACA,IAAA,KAAK,OAAO;AAAE,MAAA;QACZ,oBAAOE,GAAA,CAACI,wBAAwB,EAAA;AAACV,UAAAA,IAAI,EAAEA,IAAK;AAACC,UAAAA,WAAW,EAAEA,WAAY;AAACC,UAAAA,MAAM,EAAEA;AAAO,SAAA,CAAG;AAC3F,MAAA;AACA,IAAA,KAAK,WAAW;AAAE,MAAA;QAChB,IAAIA,MAAM,IAAI,IAAI,EAAE;UAClB,oBAAOI,GAAA,CAACK,OAAO,EAAA;YAACC,SAAS,EAAA,IAAA;AAACC,YAAAA,KAAK,EAAC,YAAY;AAACC,YAAAA,SAAS,EAAC;AAAO,YAAG;AACnE,QAAA;AACA,QAAA;AACF,MAAA;AACF;AACA,EAAA,OAAO,IAAI;AACb;;;;"}
package/build/main.css CHANGED
@@ -4009,11 +4009,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
4009
4009
  .np-select-input-option-check--not-selected {
4010
4010
  visibility: hidden;
4011
4011
  }
4012
- .np-select-input-separator-item {
4013
- margin: 8px;
4014
- margin: var(--size-8);
4015
- border-top-width: 1px;
4016
- }
4017
4012
  .np-select-input-group-item--without-needle:first-child {
4018
4013
  margin-top: calc(-1 * 8px);
4019
4014
  margin-top: calc(-1 * var(--size-8));
@@ -31,11 +31,6 @@
31
31
  .np-select-input-option-check--not-selected {
32
32
  visibility: hidden;
33
33
  }
34
- .np-select-input-separator-item {
35
- margin: 8px;
36
- margin: var(--size-8);
37
- border-top-width: 1px;
38
- }
39
34
  .np-select-input-group-item--without-needle:first-child {
40
35
  margin-top: calc(-1 * 8px);
41
36
  margin-top: calc(-1 * var(--size-8));
@@ -31,11 +31,6 @@
31
31
  .np-select-input-option-check--not-selected {
32
32
  visibility: hidden;
33
33
  }
34
- .np-select-input-separator-item {
35
- margin: 8px;
36
- margin: var(--size-8);
37
- border-top-width: 1px;
38
- }
39
34
  .np-select-input-group-item--without-needle:first-child {
40
35
  margin-top: calc(-1 * 8px);
41
36
  margin-top: calc(-1 * var(--size-8));
@@ -181,11 +181,6 @@
181
181
  .np-select-input-option-check--not-selected {
182
182
  visibility: hidden;
183
183
  }
184
- .np-select-input-separator-item {
185
- margin: 8px;
186
- margin: var(--size-8);
187
- border-top-width: 1px;
188
- }
189
184
  .np-select-input-group-item--without-needle:first-child {
190
185
  margin-top: calc(-1 * 8px);
191
186
  margin-top: calc(-1 * var(--size-8));
@@ -4009,11 +4009,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
4009
4009
  .np-select-input-option-check--not-selected {
4010
4010
  visibility: hidden;
4011
4011
  }
4012
- .np-select-input-separator-item {
4013
- margin: 8px;
4014
- margin: var(--size-8);
4015
- border-top-width: 1px;
4016
- }
4017
4012
  .np-select-input-group-item--without-needle:first-child {
4018
4013
  margin-top: calc(-1 * 8px);
4019
4014
  margin-top: calc(-1 * var(--size-8));
@@ -1 +1 @@
1
- {"version":3,"file":"SelectInputItemView.d.ts","sourceRoot":"","sources":["../../../../../../src/inputs/SelectInput/Options/ItemView/SelectInputItemView.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,yBAAyB,CAAC;AAIxE,wBAAgB,mBAAmB,CAAC,CAAC,GAAG,MAAM,EAAE,EAC9C,IAAI,EACJ,WAAW,EACX,MAAM,GACP,EAAE,wBAAwB,CAAC,CAAC,CAAC,sCA0B7B"}
1
+ {"version":3,"file":"SelectInputItemView.d.ts","sourceRoot":"","sources":["../../../../../../src/inputs/SelectInput/Options/ItemView/SelectInputItemView.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,yBAAyB,CAAC;AAIxE,wBAAgB,mBAAmB,CAAC,CAAC,GAAG,MAAM,EAAE,EAC9C,IAAI,EACJ,WAAW,EACX,MAAM,GACP,EAAE,wBAAwB,CAAC,CAAC,CAAC,sCA0B7B"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "0.0.0-experimental-ebe1b52",
3
+ "version": "0.0.0-experimental-bcfa03a",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -87,9 +87,9 @@
87
87
  "storybook-addon-tag-badges": "^3.0.4",
88
88
  "storybook-addon-test-codegen": "^3.0.1",
89
89
  "@transferwise/less-config": "3.1.2",
90
- "@wise/wds-configs": "0.0.0",
90
+ "@transferwise/neptune-css": "14.26.1",
91
91
  "@wise/components-theming": "1.10.1",
92
- "@transferwise/neptune-css": "14.26.1"
92
+ "@wise/wds-configs": "0.0.0"
93
93
  },
94
94
  "peerDependencies": {
95
95
  "@transferwise/icons": "^3 || ^4",
@@ -31,11 +31,6 @@
31
31
  .np-select-input-option-check--not-selected {
32
32
  visibility: hidden;
33
33
  }
34
- .np-select-input-separator-item {
35
- margin: 8px;
36
- margin: var(--size-8);
37
- border-top-width: 1px;
38
- }
39
34
  .np-select-input-group-item--without-needle:first-child {
40
35
  margin-top: calc(-1 * 8px);
41
36
  margin-top: calc(-1 * var(--size-8));
@@ -1,10 +1,5 @@
1
1
  @import "./Option/SelectInputOption.less";
2
2
 
3
- .np-select-input-separator-item {
4
- margin: var(--size-8);
5
- border-top-width: 1px;
6
- }
7
-
8
3
  .np-select-input-group-item {
9
4
  &--without-needle:first-child {
10
5
  margin-top: calc(-1 * var(--size-8));
@@ -1,3 +1,4 @@
1
+ import Divider from '../../../../divider';
1
2
  import { selectInputOptionItemIncludesNeedle } from '../../SelectInput.helpers';
2
3
  import type { SelectInputItemViewProps } from '../../SelectInput.types';
3
4
  import { SelectInputGroupItemView } from '../GroupItemView';
@@ -27,7 +28,7 @@ export function SelectInputItemView<T = string>({
27
28
  }
28
29
  case 'separator': {
29
30
  if (needle == null) {
30
- return <hr className="np-select-input-separator-item" />;
31
+ return <Divider isContent level="subsection" className="m-y-1" />;
31
32
  }
32
33
  break;
33
34
  }
@@ -31,11 +31,6 @@
31
31
  .np-select-input-option-check--not-selected {
32
32
  visibility: hidden;
33
33
  }
34
- .np-select-input-separator-item {
35
- margin: 8px;
36
- margin: var(--size-8);
37
- border-top-width: 1px;
38
- }
39
34
  .np-select-input-group-item--without-needle:first-child {
40
35
  margin-top: calc(-1 * 8px);
41
36
  margin-top: calc(-1 * var(--size-8));
@@ -181,11 +181,6 @@
181
181
  .np-select-input-option-check--not-selected {
182
182
  visibility: hidden;
183
183
  }
184
- .np-select-input-separator-item {
185
- margin: 8px;
186
- margin: var(--size-8);
187
- border-top-width: 1px;
188
- }
189
184
  .np-select-input-group-item--without-needle:first-child {
190
185
  margin-top: calc(-1 * 8px);
191
186
  margin-top: calc(-1 * var(--size-8));
package/src/main.css CHANGED
@@ -4009,11 +4009,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
4009
4009
  .np-select-input-option-check--not-selected {
4010
4010
  visibility: hidden;
4011
4011
  }
4012
- .np-select-input-separator-item {
4013
- margin: 8px;
4014
- margin: var(--size-8);
4015
- border-top-width: 1px;
4016
- }
4017
4012
  .np-select-input-group-item--without-needle:first-child {
4018
4013
  margin-top: calc(-1 * 8px);
4019
4014
  margin-top: calc(-1 * var(--size-8));