@transferwise/components 0.0.0-experimental-af6dee0 → 0.0.0-experimental-befc4f0

package/build/main.css

@@ -30737,6 +30737,8 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 
 .np-select-input-content {
   overflow: hidden;
+  overflow: clip;
+  overflow-clip-margin: 1px;
   text-overflow: ellipsis;
   white-space: nowrap;
 }

package/build/styles/inputs/SelectInput/SelectInput.css

@@ -371,6 +371,8 @@
 }
 .np-select-input-content {
   overflow: hidden;
+  overflow: clip;
+  overflow-clip-margin: 1px;
   text-overflow: ellipsis;
   white-space: nowrap;
 }

package/build/styles/main.css

@@ -30737,6 +30737,8 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 
 .np-select-input-content {
   overflow: hidden;
+  overflow: clip;
+  overflow-clip-margin: 1px;
   text-overflow: ellipsis;
   white-space: nowrap;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-af6dee0",
+  "version": "0.0.0-experimental-befc4f0",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -91,8 +91,8 @@
     "storybook-addon-tag-badges": "^3.1.0",
     "storybook-addon-test-codegen": "^3.0.1",
     "@transferwise/less-config": "3.1.2",
-    "@wise/components-theming": "1.10.2",
     "@transferwise/neptune-css": "14.27.1",
+    "@wise/components-theming": "1.10.2",
     "@wise/wds-configs": "0.0.0"
   },
   "peerDependencies": {

package/src/inputs/SelectInput/SelectInput.css

@@ -371,6 +371,8 @@
 }
 .np-select-input-content {
   overflow: hidden;
+  overflow: clip;
+  overflow-clip-margin: 1px;
   text-overflow: ellipsis;
   white-space: nowrap;
 }

package/src/inputs/SelectInput/SelectInput.less

@@ -13,6 +13,8 @@
 // Main SelectInput styles
 .np-select-input-content {
   overflow: hidden;
+  overflow: clip;
+  overflow-clip-margin: 1px;
   text-overflow: ellipsis;
   white-space: nowrap;
 }

package/src/inputs/SelectInput/_stories/SelectInput.test.story.tsx

@@ -1845,3 +1845,26 @@ export const Zoom400: Story<TestMonth | null> = {
   },
   ...withVariantConfig(['400%']),
 };
+
+const jpy = { code: 'JPY', name: 'Japanese yen' } satisfies TestCurrency;
+const flagClippingItems = [testCurrencyOption(jpy)];
+const flagClippingArgs = {
+  items: flagClippingItems,
+  value: jpy,
+  size: 'lg',
+  renderValue: (currency: TestCurrency) => (
+    <SelectInputOptionContent
+      title={currency.code}
+      icon={<Flag code={currency.code} intrinsicSize={24} />}
+    />
+  ),
+} satisfies Story<TestCurrency>['args'];
+
+export const FlagClipping: Story<TestCurrency> = {
+  render: (args) => (
+    <Field label="Flag clipping">
+      <SelectInput {...args} />
+    </Field>
+  ),
+  args: flagClippingArgs,
+};

package/src/main.css

@@ -30737,6 +30737,8 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 
 .np-select-input-content {
   overflow: hidden;
+  overflow: clip;
+  overflow-clip-margin: 1px;
   text-overflow: ellipsis;
   white-space: nowrap;
 }