@transferwise/components 0.0.0-experimental-a4458ac → 0.0.0-experimental-210ef2c

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 (45) hide show
  1. package/build/index.esm.js +80 -99
  2. package/build/index.esm.js.map +1 -1
  3. package/build/index.js +80 -99
  4. package/build/index.js.map +1 -1
  5. package/build/main.css +1 -1
  6. package/build/styles/flowNavigation/FlowNavigation.css +1 -1
  7. package/build/styles/flowNavigation/animatedLabel/AnimatedLabel.css +1 -1
  8. package/build/styles/inputs/SelectInput.css +1 -1
  9. package/build/styles/main.css +1 -1
  10. package/build/styles/overlayHeader/OverlayHeader.css +1 -1
  11. package/build/types/common/flowHeader/FlowHeader.d.ts.map +1 -1
  12. package/build/types/flowNavigation/FlowNavigation.d.ts.map +1 -1
  13. package/build/types/flowNavigation/animatedLabel/AnimatedLabel.d.ts +2 -1
  14. package/build/types/flowNavigation/animatedLabel/AnimatedLabel.d.ts.map +1 -1
  15. package/build/types/flowNavigation/backButton/BackButton.d.ts +11 -10
  16. package/build/types/flowNavigation/backButton/BackButton.d.ts.map +1 -1
  17. package/build/types/inputs/SelectInput.d.ts.map +1 -1
  18. package/build/types/overlayHeader/OverlayHeader.d.ts.map +1 -1
  19. package/package.json +1 -1
  20. package/src/common/flowHeader/FlowHeader.tsx +3 -9
  21. package/src/common/flowHeader/__snapshots__/FlowHeader.spec.js.snap +2 -2
  22. package/src/flowNavigation/FlowNavigation.css +1 -1
  23. package/src/flowNavigation/FlowNavigation.less +9 -0
  24. package/src/flowNavigation/FlowNavigation.spec.js +3 -3
  25. package/src/flowNavigation/FlowNavigation.story.js +183 -24
  26. package/src/flowNavigation/FlowNavigation.tsx +13 -9
  27. package/src/flowNavigation/__snapshots__/FlowNavigation.spec.js.snap +11 -14
  28. package/src/flowNavigation/animatedLabel/AnimatedLabel.css +1 -1
  29. package/src/flowNavigation/animatedLabel/AnimatedLabel.less +6 -0
  30. package/src/flowNavigation/animatedLabel/AnimatedLabel.spec.js +21 -7
  31. package/src/flowNavigation/animatedLabel/AnimatedLabel.story.js +22 -0
  32. package/src/flowNavigation/animatedLabel/AnimatedLabel.tsx +17 -8
  33. package/src/flowNavigation/animatedLabel/__snapshots__/AnimatedLabel.spec.js.snap +4 -4
  34. package/src/flowNavigation/backButton/BackButton.js +9 -14
  35. package/src/flowNavigation/backButton/BackButton.spec.js +2 -3
  36. package/src/flowNavigation/backButton/__snapshots__/BackButton.spec.js.snap +21 -28
  37. package/src/inputs/SelectInput.css +1 -1
  38. package/src/inputs/SelectInput.less +1 -13
  39. package/src/inputs/SelectInput.tsx +61 -80
  40. package/src/main.css +1 -1
  41. package/src/overlayHeader/OverlayHeader.css +1 -1
  42. package/src/overlayHeader/OverlayHeader.js +2 -4
  43. package/src/overlayHeader/OverlayHeader.less +8 -0
  44. package/src/overlayHeader/OverlayHeader.spec.js +1 -1
  45. package/src/overlayHeader/__snapshots__/OverlayHeader.spec.js.snap +3 -3
package/src/flowNavigation/animatedLabel/AnimatedLabel.story.js ADDED
@@ -0,0 +1,22 @@
1
+ import { select } from '@storybook/addon-knobs';
2
+
3
+ import AnimatedLabel from './AnimatedLabel';
4
+
5
+ export default {
6
+ component: AnimatedLabel,
7
+ title: 'Internal/AnimatedLabel',
8
+ };
9
+
10
+ export const Basic = () => {
11
+ const labels = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
12
+ const activeLabel = select('active label', labels, 10);
13
+
14
+ return (
15
+ <div style={{ width: '120px' }} className="p-a-1">
16
+ <AnimatedLabel
17
+ labels={labels.map((element) => `label-${element}`)}
18
+ activeLabel={activeLabel}
19
+ />
20
+ </div>
21
+ );
22
+ };
package/src/flowNavigation/animatedLabel/AnimatedLabel.tsx CHANGED
@@ -1,32 +1,41 @@
1
1
  import classNames from 'classnames';
2
2
  import React from 'react';
3
3
 
4
- import Body from '../../body';
5
- import { Typography } from '../../common';
6
-
7
4
  export interface AnimatedLabelProps {
8
5
  activeLabel: number;
9
6
  className?: string;
10
7
  labels: React.ReactNode[];
8
+ 'aria-label': string;
11
9
  }
12
10
 
13
- const AnimatedLabel = ({ activeLabel, className, labels }: AnimatedLabelProps) => {
11
+ const AnimatedLabel = ({
12
+ activeLabel,
13
+ className,
14
+ labels,
15
+ 'aria-label': ariaLabel,
16
+ }: AnimatedLabelProps) => {
17
+ const numberLabels = labels.length - 1;
18
+
14
19
  return (
15
- <Body type={Typography.BODY_LARGE_BOLD} className={classNames('np-animated-label', className)}>
20
+ <div
21
+ aria-label={ariaLabel}
22
+ className={classNames('np-animated-label', 'np-text-body-large-bold', className)}
23
+ >
16
24
  {labels.map((label, index) => {
17
25
  const nextLabel = index - 1;
18
26
  return (
19
27
  <div
20
28
  key={nextLabel}
21
- className={classNames('text-xs-center', {
22
- 'np-animated-label--in text-ellipsis': index === activeLabel,
29
+ className={classNames('text-xs-left', {
30
+ 'np-animated-label--in': index === activeLabel,
31
+ 'np-animated-label--out': nextLabel === activeLabel && nextLabel !== numberLabels,
23
32
  })}
24
33
  >
25
34
  {label}
26
35
  </div>
27
36
  );
28
37
  })}
29
- </Body>
38
+ </div>
30
39
  );
31
40
  };
32
41
 
package/src/flowNavigation/animatedLabel/__snapshots__/AnimatedLabel.spec.js.snap CHANGED
@@ -3,20 +3,20 @@
3
3
  exports[`AnimatedLabel renders all labels 1`] = `
4
4
  <div>
5
5
  <div
6
- class="np-text-body-large-bold np-animated-label"
6
+ class="np-animated-label np-text-body-large-bold"
7
7
  >
8
8
  <div
9
- class="text-xs-center np-animated-label--in text-ellipsis"
9
+ class="text-xs-left np-animated-label--in"
10
10
  >
11
11
  label1
12
12
  </div>
13
13
  <div
14
- class="text-xs-center"
14
+ class="text-xs-left np-animated-label--out"
15
15
  >
16
16
  label2
17
17
  </div>
18
18
  <div
19
- class="text-xs-center"
19
+ class="text-xs-left"
20
20
  >
21
21
  label3
22
22
  </div>
package/src/flowNavigation/backButton/BackButton.js CHANGED
@@ -2,23 +2,18 @@ import { ArrowLeft as ArrowLeftIcon } from '@transferwise/icons';
2
2
  import classNames from 'classnames';
3
3
  import PropTypes from 'prop-types';
4
4
 
5
- import Avatar, { AvatarType } from '../../avatar';
6
-
7
- const BackButton = ({ className, onClick, 'aria-label': ariaLabel }) => (
8
- <Avatar type={AvatarType.ICON} size={40}>
9
- <button
10
- type="button"
11
- aria-label={ariaLabel}
12
- className={classNames('np-back-button', 'btn-unstyled', className)}
13
- onClick={onClick}
14
- >
15
- <ArrowLeftIcon size={24} />
16
- </button>
17
- </Avatar>
5
+ const BackButton = ({ label, className, onClick }) => (
6
+ <button
7
+ type="button"
8
+ className={classNames('np-back-button', 'align-items-center', 'btn-unstyled', className)}
9
+ onClick={onClick}
10
+ >
11
+ <ArrowLeftIcon size={24} />
12
+ {label}
13
+ </button>
18
14
  );
19
15
 
20
16
  BackButton.propTypes = {
21
- 'aria-label': PropTypes.string.isRequired,
22
17
  className: PropTypes.string,
23
18
  label: PropTypes.element,
24
19
  onClick: PropTypes.func,
package/src/flowNavigation/backButton/BackButton.spec.js CHANGED
@@ -1,5 +1,5 @@
1
- import { render } from '../../test-utils';
2
- import messages from '../FlowNavigation.messages';
1
+ import '@testing-library/jest-dom';
2
+ import { render } from '@testing-library/react';
3
3
 
4
4
  import BackButton from '.';
5
5
 
@@ -7,7 +7,6 @@ const props = {
7
7
  label: <>label</>,
8
8
  className: 'className',
9
9
  onClick: jest.fn(),
10
- 'aria-label': messages.back.defaultMessage,
11
10
  };
12
11
  describe('BackButton', () => {
13
12
  it(`renders as expected`, () => {
package/src/flowNavigation/backButton/__snapshots__/BackButton.spec.js.snap CHANGED
@@ -2,36 +2,29 @@
2
2
 
3
3
  exports[`BackButton renders as expected 1`] = `
4
4
  <div>
5
- <div
6
- class="tw-avatar tw-avatar--40 tw-avatar--icon"
5
+ <button
6
+ class="np-back-button align-items-center btn-unstyled className"
7
+ type="button"
7
8
  >
8
- <div
9
- class="tw-avatar__content"
9
+ <span
10
+ aria-hidden="true"
11
+ class="tw-icon tw-icon-arrow-left "
12
+ data-testid="arrow-left-icon"
13
+ role="presentation"
10
14
  >
11
- <button
12
- class="np-back-button btn-unstyled className"
13
- type="button"
15
+ <svg
16
+ fill="currentColor"
17
+ focusable="false"
18
+ height="24"
19
+ viewBox="0 0 24 24"
20
+ width="24"
14
21
  >
15
- <span
16
- aria-hidden="true"
17
- class="tw-icon tw-icon-arrow-left "
18
- data-testid="arrow-left-icon"
19
- role="presentation"
20
- >
21
- <svg
22
- fill="currentColor"
23
- focusable="false"
24
- height="24"
25
- viewBox="0 0 24 24"
26
- width="24"
27
- >
28
- <path
29
- d="M22.286 11.316H4.629l7.114-7.114-1.2-1.2-8.572 8.571a.829.829 0 0 0 0 1.2l8.572 8.572 1.2-1.2-7.114-7.114h17.657v-1.715Z"
30
- />
31
- </svg>
32
- </span>
33
- </button>
34
- </div>
35
- </div>
22
+ <path
23
+ d="M22.286 11.316H4.629l7.114-7.114-1.2-1.2-8.572 8.571a.829.829 0 0 0 0 1.2l8.572 8.572 1.2-1.2-7.114-7.114h17.657v-1.715Z"
24
+ />
25
+ </svg>
26
+ </span>
27
+ label
28
+ </button>
36
29
  </div>
37
30
  `;
package/src/inputs/SelectInput.css CHANGED
@@ -1 +1 @@
1
- .np-bottom-sheet-v2-container{position:relative;z-index:1060}.np-bottom-sheet-v2-backdrop-container--enter,.np-bottom-sheet-v2-backdrop-container--leave{transition-duration:.15s;transition-property:opacity;transition-timing-function:ease-out}.np-bottom-sheet-v2-backdrop-container--enter-from,.np-bottom-sheet-v2-backdrop-container--leave-to{opacity:0}.np-bottom-sheet-v2-backdrop{background-color:#37517e;background-color:var(--color-content-primary);inset:0;opacity:.4;position:fixed}.np-bottom-sheet-v2{display:flex;flex-direction:column;inset:0;justify-content:flex-end;padding-left:8px;padding-left:var(--size-8);padding-right:8px;padding-right:var(--size-8);padding-top:64px;padding-top:var(--size-64);position:fixed}.np-bottom-sheet-v2-content{max-height:100%}.np-bottom-sheet-v2-content--enter,.np-bottom-sheet-v2-content--leave{transition-duration:.3s;transition-property:transform;transition-timing-function:ease-out}@media (prefers-reduced-motion:reduce){.np-bottom-sheet-v2-content--enter,.np-bottom-sheet-v2-content--leave{transition-property:opacity}}@media (prefers-reduced-motion:no-preference){.np-bottom-sheet-v2-content--enter-from,.np-bottom-sheet-v2-content--leave-to{transform:translateY(100%)}}@media (prefers-reduced-motion:reduce){.np-bottom-sheet-v2-content--enter-from,.np-bottom-sheet-v2-content--leave-to{opacity:0}}.np-bottom-sheet-v2-content-inner-container{background-color:#fff;background-color:var(--color-background-elevated);border-top-left-radius:32px;border-top-right-radius:32px;box-shadow:0 0 40px rgba(69,71,69,.2);display:flex;flex-direction:column;height:100%}.np-bottom-sheet-v2-content-inner-container:focus{outline:none}.np-bottom-sheet-v2-header{align-self:flex-end;padding:16px;padding:var(--size-16)}.np-bottom-sheet-v2-content-inner{display:grid;grid-template-rows:repeat(1,minmax(0,1fr));overflow-y:auto;padding-top:0;row-gap:8px;row-gap:var(--size-8)}.np-bottom-sheet-v2-content-inner--has-title{grid-template-rows:auto 1fr}.np-bottom-sheet-v2-content-inner--padding-md{padding:16px;padding:var(--size-16)}.np-bottom-sheet-v2-title{color:#37517e;color:var(--color-content-primary)}.np-bottom-sheet-v2-body{color:#5d7079;color:var(--color-content-secondary)}.np-button-input{align-content:center;border-radius:10px;border-radius:var(--size-10);display:inline-grid;grid-auto-columns:minmax(0,1fr);text-align:start}.np-popover-v2-container{background-color:#fff;background-color:var(--color-background-elevated);border-radius:10px;border-radius:var(--radius-small);box-shadow:0 0 40px rgba(69,71,69,.2);display:flex;flex-direction:column;max-height:var(--max-height);min-width:20rem;width:var(--width);z-index:1060}.np-popover-v2-container:focus{outline:none}.np-popover-v2{display:grid;grid-template-rows:repeat(1,minmax(0,1fr));overflow-y:auto;row-gap:8px;row-gap:var(--size-8)}.np-popover-v2--has-title{grid-template-rows:auto 1fr}.np-popover-v2--padding-md{padding:16px;padding:var(--size-16)}.np-popover-v2-title{color:#37517e;color:var(--color-content-primary)}.np-popover-v2-content{color:#5d7079;color:var(--color-content-secondary)}.np-select-input-placeholder{color:#768e9c;color:var(--color-content-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.np-select-input-options-container{display:flex;flex-direction:column;height:100%}.np-select-input-options-container:focus{outline:none}@media (min-width:576px){.np-select-input-options-container{max-height:28rem}}.np-select-input-options-status{align-items:center;-moz-column-gap:8px;column-gap:8px;-moz-column-gap:var(--size-8);column-gap:var(--size-8);display:flex;padding:8px 24px 0;padding:var(--size-8) var(--size-24) 0}.np-select-input-options-status-icon{color:#768e9c;color:var(--color-content-tertiary);padding:0 4px;padding:0 var(--size-4)}.np-select-input-query-container{display:flex;flex-direction:column;padding:8px;padding:var(--size-8);padding-top:0}@media (min-width:576px){.np-select-input-query-container{padding-top:8px;padding-top:var(--size-8)}}.np-select-input-listbox-container{height:var(--initial-height);overflow-y:auto;position:relative;scroll-padding-bottom:8px;scroll-padding-bottom:var(--size-8);scroll-padding-top:8px;scroll-padding-top:var(--size-8)}@media (min-width:576px){.np-select-input-listbox-container{height:auto}}.np-select-input-listbox-container--has-group{scroll-padding-top:32px;scroll-padding-top:var(--size-32)}.np-select-input-listbox{padding:8px;padding:var(--size-8)}.np-select-input-listbox:focus{outline:none}.np-select-input-separator-item{border-top-width:1px;margin:8px;margin:var(--size-8)}.np-select-input-group-item--without-needle:first-child{margin-top:-8px;margin-top:calc(var(--size-8)*-1)}.np-select-input-group-item-header{background-color:#fff;background-color:var(--color-background-elevated);color:#5d7079;color:var(--color-content-secondary);padding:8px 16px 4px;padding:var(--size-8) var(--size-16) var(--size-4);position:sticky;top:0;z-index:10}.np-select-input-option-container{align-items:center;border-radius:10px;border-radius:var(--radius-small);color:var(--color-interactive-primary);-moz-column-gap:8px;column-gap:8px;-moz-column-gap:var(--size-8);column-gap:var(--size-8);cursor:default;display:flex;padding:12px 16px;padding:var(--size-12) var(--size-16);-webkit-user-select:none;-moz-user-select:none;user-select:none}.np-select-input-option-container--active{background-color:var(--color-interactive-primary)}.np-select-input-option-container--active.np-select-input-option-container--active *{color:var(--color-interactive-contrast)}.np-select-input-option-container--disabled{opacity:.45}.np-select-input-option-check{padding:0 4px;padding:0 var(--size-4)}.np-select-input-option-check--not-selected{visibility:hidden}.np-select-input-option-check-placeholder{display:inline-block;margin-inline-start:16px;margin-inline-start:var(--size-16);width:16px;width:var(--size-16)}.np-select-input-option{flex:1}.np-select-input-option-content-container{align-items:center;color:#37517e;color:var(--color-content-primary);-moz-column-gap:8px;column-gap:8px;-moz-column-gap:var(--size-8);column-gap:var(--size-8);display:flex}.np-select-input-option-content-icon{display:flex}.np-select-input-option-content-icon--not-within-trigger{align-self:flex-start}.np-select-input-option-content-text{display:flex;flex:1;flex-direction:column;overflow:hidden}.np-select-input-option-content-text-primary{font:inherit}.np-select-input-option-content-text-secondary{color:#5d7079;color:var(--color-content-secondary)}.np-select-input-option-content-text-within-trigger{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.np-select-input-option-content-text-line-1>:not([hidden])~:not([hidden]){margin-left:8px;margin-left:var(--size-8);margin-right:8px;margin-right:var(--size-8)}.np-select-input-addon-container{align-items:center;display:inline-flex;pointer-events:none}.np-select-input-addon-container,.np-select-input-addon-container>:not([hidden])~:not([hidden]){margin-inline-start:4px;margin-inline-start:var(--size-4)}.np-select-input-addon{align-items:center;background:none;border-radius:.125rem;border-width:0;display:inline-flex;height:24px;height:var(--size-24);justify-content:center;width:24px;width:var(--size-24)}.np-select-input-addon--interactive{color:#c9cbce;color:var(--color-interactive-secondary);pointer-events:auto}.np-select-input-addon--interactive:hover{color:#b5b7ba;color:var(--color-interactive-secondary-hover)}.np-select-input-addon--interactive:focus{outline:none}.np-select-input-addon--interactive:focus-visible{outline:var(--ring-outline-color) solid var(--ring-outline-width);outline-offset:var(--ring-outline-offset)}.np-select-input-addon-separator{border-inline-start:1px solid #0000001a;border-inline-start:1px solid var(--color-border-neutral);height:24px;height:var(--size-24)}
1
+ .np-bottom-sheet-v2-container{position:relative;z-index:1060}.np-bottom-sheet-v2-backdrop-container--enter,.np-bottom-sheet-v2-backdrop-container--leave{transition-duration:.15s;transition-property:opacity;transition-timing-function:ease-out}.np-bottom-sheet-v2-backdrop-container--enter-from,.np-bottom-sheet-v2-backdrop-container--leave-to{opacity:0}.np-bottom-sheet-v2-backdrop{background-color:#37517e;background-color:var(--color-content-primary);inset:0;opacity:.4;position:fixed}.np-bottom-sheet-v2{display:flex;flex-direction:column;inset:0;justify-content:flex-end;padding-left:8px;padding-left:var(--size-8);padding-right:8px;padding-right:var(--size-8);padding-top:64px;padding-top:var(--size-64);position:fixed}.np-bottom-sheet-v2-content{max-height:100%}.np-bottom-sheet-v2-content--enter,.np-bottom-sheet-v2-content--leave{transition-duration:.3s;transition-property:transform;transition-timing-function:ease-out}@media (prefers-reduced-motion:reduce){.np-bottom-sheet-v2-content--enter,.np-bottom-sheet-v2-content--leave{transition-property:opacity}}@media (prefers-reduced-motion:no-preference){.np-bottom-sheet-v2-content--enter-from,.np-bottom-sheet-v2-content--leave-to{transform:translateY(100%)}}@media (prefers-reduced-motion:reduce){.np-bottom-sheet-v2-content--enter-from,.np-bottom-sheet-v2-content--leave-to{opacity:0}}.np-bottom-sheet-v2-content-inner-container{background-color:#fff;background-color:var(--color-background-elevated);border-top-left-radius:32px;border-top-right-radius:32px;box-shadow:0 0 40px rgba(69,71,69,.2);display:flex;flex-direction:column;height:100%}.np-bottom-sheet-v2-content-inner-container:focus{outline:none}.np-bottom-sheet-v2-header{align-self:flex-end;padding:16px;padding:var(--size-16)}.np-bottom-sheet-v2-content-inner{display:grid;grid-template-rows:repeat(1,minmax(0,1fr));overflow-y:auto;padding-top:0;row-gap:8px;row-gap:var(--size-8)}.np-bottom-sheet-v2-content-inner--has-title{grid-template-rows:auto 1fr}.np-bottom-sheet-v2-content-inner--padding-md{padding:16px;padding:var(--size-16)}.np-bottom-sheet-v2-title{color:#37517e;color:var(--color-content-primary)}.np-bottom-sheet-v2-body{color:#5d7079;color:var(--color-content-secondary)}.np-button-input{align-content:center;border-radius:10px;border-radius:var(--size-10);display:inline-grid;grid-auto-columns:minmax(0,1fr);text-align:start}.np-popover-v2-container{background-color:#fff;background-color:var(--color-background-elevated);border-radius:10px;border-radius:var(--radius-small);box-shadow:0 0 40px rgba(69,71,69,.2);display:flex;flex-direction:column;max-height:var(--max-height);min-width:20rem;width:var(--width);z-index:1060}.np-popover-v2-container:focus{outline:none}.np-popover-v2{display:grid;grid-template-rows:repeat(1,minmax(0,1fr));overflow-y:auto;row-gap:8px;row-gap:var(--size-8)}.np-popover-v2--has-title{grid-template-rows:auto 1fr}.np-popover-v2--padding-md{padding:16px;padding:var(--size-16)}.np-popover-v2-title{color:#37517e;color:var(--color-content-primary)}.np-popover-v2-content{color:#5d7079;color:var(--color-content-secondary)}.np-select-input-placeholder{color:#768e9c;color:var(--color-content-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.np-select-input-options-container{display:flex;flex-direction:column;height:100%}.np-select-input-options-container:focus{outline:none}@media (min-width:576px){.np-select-input-options-container{max-height:28rem}}.np-select-input-options-status{align-items:center;-moz-column-gap:8px;column-gap:8px;-moz-column-gap:var(--size-8);column-gap:var(--size-8);display:flex;padding:8px 24px 0;padding:var(--size-8) var(--size-24) 0}.np-select-input-options-status-icon{color:#768e9c;color:var(--color-content-tertiary);padding:0 4px;padding:0 var(--size-4)}.np-select-input-query-container{display:flex;flex-direction:column;padding:8px;padding:var(--size-8);padding-top:0}@media (min-width:576px){.np-select-input-query-container{padding-top:8px;padding-top:var(--size-8)}}.np-select-input-listbox-container{height:var(--initial-height);overflow-y:auto;position:relative;scroll-padding-bottom:8px;scroll-padding-bottom:var(--size-8);scroll-padding-top:8px;scroll-padding-top:var(--size-8)}@media (min-width:576px){.np-select-input-listbox-container{height:auto}}.np-select-input-listbox-container--has-group{scroll-padding-top:32px;scroll-padding-top:var(--size-32)}.np-select-input-listbox{padding:8px;padding:var(--size-8)}.np-select-input-listbox:focus{outline:none}.np-select-input-separator-item{border-top-width:1px;margin:8px;margin:var(--size-8)}.np-select-input-group-item--without-needle:first-child{margin-top:-8px;margin-top:calc(var(--size-8)*-1)}.np-select-input-group-item-header{background-color:#fff;background-color:var(--color-background-elevated);color:#5d7079;color:var(--color-content-secondary);padding:8px 16px 4px;padding:var(--size-8) var(--size-16) var(--size-4);position:sticky;top:0;z-index:10}.np-select-input-option-container{align-items:center;border-radius:10px;border-radius:var(--radius-small);color:var(--color-interactive-primary);-moz-column-gap:8px;column-gap:8px;-moz-column-gap:var(--size-8);column-gap:var(--size-8);cursor:default;display:flex;padding:12px 16px;padding:var(--size-12) var(--size-16);-webkit-user-select:none;-moz-user-select:none;user-select:none}.np-select-input-option-container--active{box-shadow:inset 0 0 0 1px #c9cbce;box-shadow:inset 0 0 0 1px var(--color-interactive-secondary)}.np-select-input-option-container--disabled{opacity:.45}.np-select-input-option-check--not-selected{visibility:hidden}.np-select-input-option{flex:1}.np-select-input-option-content-container{align-items:center;color:#37517e;color:var(--color-content-primary);-moz-column-gap:8px;column-gap:8px;-moz-column-gap:var(--size-8);column-gap:var(--size-8);display:flex}.np-select-input-option-content-icon{display:flex}.np-select-input-option-content-icon--not-within-trigger{align-self:flex-start}.np-select-input-option-content-text{display:flex;flex:1;flex-direction:column;overflow:hidden}.np-select-input-option-content-text-primary{font:inherit}.np-select-input-option-content-text-secondary{color:#5d7079;color:var(--color-content-secondary)}.np-select-input-option-content-text-within-trigger{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.np-select-input-option-content-text-line-1>:not([hidden])~:not([hidden]){margin-left:8px;margin-left:var(--size-8);margin-right:8px;margin-right:var(--size-8)}.np-select-input-addon-container{align-items:center;display:inline-flex;pointer-events:none}.np-select-input-addon-container,.np-select-input-addon-container>:not([hidden])~:not([hidden]){margin-inline-start:4px;margin-inline-start:var(--size-4)}.np-select-input-addon{align-items:center;background:none;border-radius:.125rem;border-width:0;display:inline-flex;height:24px;height:var(--size-24);justify-content:center;width:24px;width:var(--size-24)}.np-select-input-addon--interactive{color:#c9cbce;color:var(--color-interactive-secondary);pointer-events:auto}.np-select-input-addon--interactive:hover{color:#b5b7ba;color:var(--color-interactive-secondary-hover)}.np-select-input-addon--interactive:focus{outline:none}.np-select-input-addon--interactive:focus-visible{outline:var(--ring-outline-color) solid var(--ring-outline-width);outline-offset:var(--ring-outline-offset)}.np-select-input-addon-separator{border-inline-start:1px solid #0000001a;border-inline-start:1px solid var(--color-border-neutral);height:24px;height:var(--size-24)}
package/src/inputs/SelectInput.less CHANGED
@@ -108,11 +108,7 @@
108
108
  color: var(--color-interactive-primary);
109
109
 
110
110
  &--active {
111
- background-color: var(--color-interactive-primary);
112
-
113
- && * {
114
- color: var(--color-interactive-contrast);
115
- }
111
+ box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
116
112
  }
117
113
 
118
114
  &--disabled {
@@ -121,19 +117,11 @@
121
117
  }
122
118
 
123
119
  .np-select-input-option-check {
124
- padding: 0 var(--size-4);
125
-
126
120
  &--not-selected {
127
121
  visibility: hidden;
128
122
  }
129
123
  }
130
124
 
131
- .np-select-input-option-check-placeholder {
132
- margin-inline-start: var(--size-16);
133
- display: inline-block;
134
- width: var(--size-16);
135
- }
136
-
137
125
  .np-select-input-option {
138
126
  flex: 1;
139
127
  }
package/src/inputs/SelectInput.tsx CHANGED
@@ -40,17 +40,6 @@ function inferSearchableStrings(value: unknown) {
40
40
  return [];
41
41
  }
42
42
 
43
- const SelectInputItemCheckPaddingContext = createContext(false);
44
-
45
- function useSelectInputItemCheckPadding() {
46
- const checkPadding = useContext(SelectInputItemCheckPaddingContext);
47
-
48
- // Avoid layout shifts during transitions via caching
49
- const [initialCheckPadding] = useState(checkPadding);
50
-
51
- return initialCheckPadding;
52
- }
53
-
54
43
  const SelectInputTriggerButtonPropsContext = createContext<{
55
44
  ref?: React.ForwardedRef<HTMLButtonElement>;
56
45
  onClick?: () => void;
@@ -257,64 +246,62 @@ export function SelectInput<T = string>({
257
246
  }}
258
247
  >
259
248
  {({ disabled: uiDisabled, value }) => (
260
- <SelectInputItemCheckPaddingContext.Provider value={Boolean(filterable) || value != null}>
261
- <OptionsOverlay
262
- placement="bottom-start"
263
- open={open}
264
- renderTrigger={({ ref, getInteractionProps }) => (
265
- <SelectInputTriggerButtonPropsContext.Provider
266
- // eslint-disable-next-line react/jsx-no-constructed-context-values
267
- value={{
268
- ref: mergeRefs([ref, triggerRef]),
269
- ...mergeProps(
270
- {
271
- onClick: () => {
272
- setOpen((prev) => !prev);
273
- },
249
+ <OptionsOverlay
250
+ placement="bottom-start"
251
+ open={open}
252
+ renderTrigger={({ ref, getInteractionProps }) => (
253
+ <SelectInputTriggerButtonPropsContext.Provider
254
+ // eslint-disable-next-line react/jsx-no-constructed-context-values
255
+ value={{
256
+ ref: mergeRefs([ref, triggerRef]),
257
+ ...mergeProps(
258
+ {
259
+ onClick: () => {
260
+ setOpen((prev) => !prev);
274
261
  },
275
- getInteractionProps(),
262
+ },
263
+ getInteractionProps(),
264
+ ),
265
+ }}
266
+ >
267
+ {renderTrigger({
268
+ content:
269
+ value != null ? (
270
+ <SelectInputOptionContentWithinTriggerContext.Provider value>
271
+ {renderValue(value, true)}
272
+ </SelectInputOptionContentWithinTriggerContext.Provider>
273
+ ) : (
274
+ placeholder
276
275
  ),
277
- }}
278
- >
279
- {renderTrigger({
280
- content:
281
- value != null ? (
282
- <SelectInputOptionContentWithinTriggerContext.Provider value>
283
- {renderValue(value, true)}
284
- </SelectInputOptionContentWithinTriggerContext.Provider>
285
- ) : (
286
- placeholder
287
- ),
288
- placeholderShown: value == null,
289
- clear:
290
- onClear != null
291
- ? () => {
292
- onClear();
293
- triggerRef.current?.focus({ preventScroll: true });
294
- }
295
- : undefined,
296
- disabled: uiDisabled,
297
- size,
298
- className,
299
- })}
300
- </SelectInputTriggerButtonPropsContext.Provider>
301
- )}
302
- initialFocusRef={controllerRef}
303
- padding="none"
304
- onClose={() => {
305
- setOpen(false);
306
- }}
307
- >
308
- <SelectInputOptions
309
- items={items}
310
- renderValue={renderValue}
311
- filterable={filterable}
312
- filterPlaceholder={filterPlaceholder}
313
- searchInputRef={searchInputRef}
314
- listboxRef={listboxRef}
315
- />
316
- </OptionsOverlay>
317
- </SelectInputItemCheckPaddingContext.Provider>
276
+ placeholderShown: value == null,
277
+ clear:
278
+ onClear != null
279
+ ? () => {
280
+ onClear();
281
+ triggerRef.current?.focus({ preventScroll: true });
282
+ }
283
+ : undefined,
284
+ disabled: uiDisabled,
285
+ size,
286
+ className,
287
+ })}
288
+ </SelectInputTriggerButtonPropsContext.Provider>
289
+ )}
290
+ initialFocusRef={controllerRef}
291
+ padding="none"
292
+ onClose={() => {
293
+ setOpen(false);
294
+ }}
295
+ >
296
+ <SelectInputOptions
297
+ items={items}
298
+ renderValue={renderValue}
299
+ filterable={filterable}
300
+ filterPlaceholder={filterPlaceholder}
301
+ searchInputRef={searchInputRef}
302
+ listboxRef={listboxRef}
303
+ />
304
+ </OptionsOverlay>
318
305
  )}
319
306
  </ListboxBase>
320
307
  );
@@ -548,7 +535,6 @@ function SelectInputGroupItemView<T = string>({
548
535
  needle,
549
536
  }: SelectInputGroupItemViewProps<T>) {
550
537
  const headerId = useId();
551
- const checkPadding = useSelectInputItemCheckPadding();
552
538
 
553
539
  return (
554
540
  // An empty container may be rendered when no options match `needle`
@@ -564,7 +550,6 @@ function SelectInputGroupItemView<T = string>({
564
550
  role="presentation"
565
551
  className="np-select-input-group-item-header np-text-title-group"
566
552
  >
567
- {checkPadding ? <span className="np-select-input-option-check-placeholder" /> : null}
568
553
  {item.label}
569
554
  </header>
570
555
  ) : null}
@@ -588,8 +573,6 @@ interface SelectInputOptionProps<T = string> {
588
573
  }
589
574
 
590
575
  function SelectInputOption<T = string>({ value, disabled, children }: SelectInputOptionProps<T>) {
591
- const checkPadding = useSelectInputItemCheckPadding();
592
-
593
576
  return (
594
577
  <ListboxBase.Option
595
578
  as="div"
@@ -605,16 +588,14 @@ function SelectInputOption<T = string>({ value, disabled, children }: SelectInpu
605
588
  >
606
589
  {({ selected }) => (
607
590
  <>
608
- {checkPadding ? (
609
- <Check
610
- size={16}
611
- className={classNames(
612
- 'np-select-input-option-check',
613
- !selected && 'np-select-input-option-check--not-selected',
614
- )}
615
- />
616
- ) : null}
617
591
  <div className="np-select-input-option">{children}</div>
592
+ <Check
593
+ size={16}
594
+ className={classNames(
595
+ 'np-select-input-option-check',
596
+ !selected && 'np-select-input-option-check--not-selected',
597
+ )}
598
+ />
618
599
  </>
619
600
  )}
620
601
  </ListboxBase.Option>