@transferwise/components 0.0.0-experimental-b20133d → 0.0.0-experimental-a2f9b4e

package/src/inputs/contexts.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext, useEffect } from 'react';
+import { createContext, useContext } from 'react';
 
 type FieldLabelContextType = {
   id?: string;
@@ -36,23 +36,6 @@ export function useFieldLabelRef() {
   return useContext(FieldLabelContext)?.ref;
 }
 
-export type TextareaCharacterCountState = { current: number; max: number } | null;
-
-const TextareaCharacterCountContext = createContext<
-  ((state: TextareaCharacterCountState) => void) | undefined
->(undefined);
-export const TextareaCharacterCountProvider = TextareaCharacterCountContext.Provider;
-
-export function useTextareaCharacterCount(current: number, max: number | undefined) {
-  const setCharacterCount = useContext(TextareaCharacterCountContext);
-  useEffect(() => {
-    if (setCharacterCount && max != null) {
-      setCharacterCount({ current, max });
-      return () => setCharacterCount(null);
-    }
-  }, [setCharacterCount, current, max]);
-}
-
 export interface WithInputAttributesProps {
   inputAttributes: ReturnType<typeof useInputAttributes>;
 }

package/src/main.css

@@ -30194,22 +30194,9 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 }
 
 .np-field-control,
-.np-field-footer {
-  display: flex;
-  align-items: flex-start;
+.np-field__prompt {
   margin-top: 4px;
   margin-top: var(--size-4);
-  gap: 8px;
-  gap: var(--size-8);
-}
-
-.np-field-counter {
-  margin-left: auto;
-  white-space: nowrap;
-  padding: 4px 0;
-  padding: var(--size-4) 0;
-  color: #768e9c;
-  color: var(--color-content-tertiary);
 }
 
 .np-field .form-group--typeahead[class],

package/src/textareaWithDisplayFormat/TextareaWithDisplayFormat.story.tsx

@@ -21,7 +21,6 @@ export const Basic: Story = {
         <TextareaWithDisplayFormat
           id={id}
           value="0000"
-          maxLength={20}
           displayPattern="**** - **** - ****"
           onChange={console.log}
         />

package/build/field/Field.messages.js

@@ -1,14 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var reactIntl = require('react-intl');
-
-var messages = reactIntl.defineMessages({
-  characterCount: {
-    id: "neptune.Field.characterCount"
-  }
-});
-
-exports.default = messages;
-//# sourceMappingURL=Field.messages.js.map

package/build/field/Field.messages.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Field.messages.js","sources":["../../src/field/Field.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n  characterCount: {\n    id: 'neptune.Field.characterCount',\n    defaultMessage: '{current} of {max} characters used',\n  },\n});\n"],"names":["defineMessages","characterCount","id"],"mappings":";;;;;;AAEA,eAAeA,wBAAc,CAAC;AAC5BC,EAAAA,cAAc,EAAE;IACdC,EAAE,EAAA;AAEH;AACF,CAAA,CAAC;;;;"}

package/build/field/Field.messages.mjs

@@ -1,10 +0,0 @@
-import { defineMessages } from 'react-intl';
-
-var messages = defineMessages({
-  characterCount: {
-    id: "neptune.Field.characterCount"
-  }
-});
-
-export { messages as default };
-//# sourceMappingURL=Field.messages.mjs.map

package/build/field/Field.messages.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Field.messages.mjs","sources":["../../src/field/Field.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n  characterCount: {\n    id: 'neptune.Field.characterCount',\n    defaultMessage: '{current} of {max} characters used',\n  },\n});\n"],"names":["defineMessages","characterCount","id"],"mappings":";;AAEA,eAAeA,cAAc,CAAC;AAC5BC,EAAAA,cAAc,EAAE;IACdC,EAAE,EAAA;AAEH;AACF,CAAA,CAAC;;;;"}

package/build/types/field/Field.messages.d.ts

@@ -1,8 +0,0 @@
-declare const _default: {
-    characterCount: {
-        id: string;
-        defaultMessage: string;
-    };
-};
-export default _default;
-//# sourceMappingURL=Field.messages.d.ts.map

package/build/types/field/Field.messages.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Field.messages.d.ts","sourceRoot":"","sources":["../../../src/field/Field.messages.ts"],"names":[],"mappings":";;;;;;AAEA,wBAKG"}

package/src/field/Field.messages.ts

@@ -1,8 +0,0 @@
-import { defineMessages } from 'react-intl';
-
-export default defineMessages({
-  characterCount: {
-    id: 'neptune.Field.characterCount',
-    defaultMessage: '{current} of {max} characters used',
-  },
-});

package/src/inputs/TextArea.story.tsx

@@ -1,56 +0,0 @@
-import { useState } from 'react';
-import { Meta, StoryObj } from '@storybook/react-webpack5';
-
-import { Field } from '../field/Field';
-import { Sentiment } from '../common';
-import { TextArea } from './TextArea';
-
-const meta: Meta<typeof TextArea> = {
-  title: 'Forms/TextArea',
-  component: TextArea,
-};
-
-export default meta;
-type Story = StoryObj<typeof TextArea>;
-
-export const Basic: Story = {
-  render: () => {
-    const [value, setValue] = useState('');
-
-    return (
-      <Field label="Message" required={false}>
-        <TextArea maxLength={200} value={value} onChange={({ target }) => setValue(target.value)} />
-      </Field>
-    );
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `<Field label="Message" required={false}>
-  <TextArea
-    maxLength={200}
-    value={value}
-    onChange={({ target }) => setValue(target.value)}
-  />
-</Field>`,
-      },
-    },
-  },
-};
-
-export const WithError: Story = {
-  render: () => {
-    const [value, setValue] = useState('');
-
-    return (
-      <Field
-        label="Message"
-        required={false}
-        sentiment={Sentiment.NEGATIVE}
-        message="You have exceeded the character limit"
-      >
-        <TextArea maxLength={200} value={value} onChange={({ target }) => setValue(target.value)} />
-      </Field>
-    );
-  },
-};