@transferwise/components 0.0.0-experimental-a7b7094 → 0.0.0-experimental-580125e

package/src/field/Field.tsx

@@ -1,14 +1,9 @@
 import { clsx } from 'clsx';
-import { useCallback, useId, useRef, useState } from 'react';
-import { useIntl } from 'react-intl';
+import { useId, useRef } from 'react';
 
-import Body from '../body';
 import { Sentiment } from '../common';
-import messages from './Field.messages';
 import { InlinePrompt, type InlinePromptProps } from '../prompt';
 import {
-  TextareaCharacterCountProvider,
-  type TextareaCharacterCountState,
   FieldLabelContextProvider,
   InputDescribedByProvider,
   InputIdContextProvider,
@@ -59,7 +54,6 @@ export const Field = ({
   children,
   ...props
 }: FieldProps) => {
-  const { formatMessage } = useIntl();
   const labelRef = useRef<HTMLLabelElement>(null);
   const sentiment = props.error ? Sentiment.NEGATIVE : propType;
   const message = propMessage || props.error;
@@ -72,18 +66,6 @@ export const Field = ({
 
   const messageId = useId();
   const descriptionId = useId();
-  const textareaCharCounterId = useId();
-
-  const [textareaCharacterCount, setTextareaCharacterCount] =
-    useState<TextareaCharacterCountState>(null);
-  const handleTextareaCharacterCount = useCallback(
-    (state: TextareaCharacterCountState) => setTextareaCharacterCount(state),
-    [],
-  );
-
-  const isNearCharLimit =
-    textareaCharacterCount != null &&
-    textareaCharacterCount.current >= textareaCharacterCount.max * 0.8;
 
   /**
    * form control can have multiple messages to describe it,
@@ -97,9 +79,6 @@ export const Field = ({
     if (message) {
       messageIds.push(messageId);
     }
-    if (textareaCharacterCount) {
-      messageIds.push(textareaCharCounterId);
-    }
     return messageIds.length > 0 ? messageIds.join(' ') : undefined;
   }
 
@@ -108,69 +87,43 @@ export const Field = ({
       <InputIdContextProvider value={inputId}>
         <InputDescribedByProvider value={ariaDescribedbyByIds()}>
           <InputInvalidProvider value={hasError}>
-            <TextareaCharacterCountProvider value={handleTextareaCharacterCount}>
-              <div
-                className={clsx(
-                  'np-field form-group d-block',
-                  {
-                    'has-success': sentiment === Sentiment.POSITIVE,
-                    'has-warning': sentiment === Sentiment.WARNING,
-                    'has-error': hasError,
-                    'has-info': sentiment === Sentiment.NEUTRAL,
-                  },
-                  className,
-                )}
-              >
-                {label != null ? (
-                  <>
-                    <Label ref={labelRef} id={labelId} htmlFor={inputId}>
-                      {required ? label : <Label.Optional>{label}</Label.Optional>}
-                    </Label>
-                    <Label.Description id={descriptionId}>{description}</Label.Description>
-                    <div className="np-field-control">{children}</div>
-                  </>
-                ) : (
-                  children
-                )}
+            <div
+              className={clsx(
+                'np-field form-group d-block',
+                {
+                  'has-success': sentiment === Sentiment.POSITIVE,
+                  'has-warning': sentiment === Sentiment.WARNING,
+                  'has-error': hasError,
+                  'has-info': sentiment === Sentiment.NEUTRAL,
+                },
+                className,
+              )}
+            >
+              {label != null ? (
+                <>
+                  <Label ref={labelRef} id={labelId} htmlFor={inputId}>
+                    {required ? label : <Label.Optional>{label}</Label.Optional>}
+                  </Label>
+                  <Label.Description id={descriptionId}>{description}</Label.Description>
+                  <div className="np-field-control">{children}</div>
+                </>
+              ) : (
+                children
+              )}
 
-                {(message || textareaCharacterCount) && (
-                  <div className="np-field-validation">
-                    {message && (
-                      <InlinePrompt
-                        sentiment={sentiment}
-                        id={messageId}
-                        mediaLabel={messageIconLabel}
-                        className="np-field__prompt"
-                        loading={messageLoading}
-                        width="full"
-                      >
-                        {message}
-                      </InlinePrompt>
-                    )}
-                    {textareaCharacterCount && (
-                      <Body
-                        as="span"
-                        id={textareaCharCounterId}
-                        {...(isNearCharLimit
-                          ? {
-                              role: 'status' as const,
-                              'aria-live': 'polite' as const,
-                              'aria-atomic': 'true' as const,
-                            }
-                          : {})}
-                        aria-label={formatMessage(messages.characterCount, {
-                          current: textareaCharacterCount.current,
-                          max: textareaCharacterCount.max,
-                        })}
-                        className="np-field-textarea-char-counter"
-                      >
-                        {textareaCharacterCount.current}/{textareaCharacterCount.max}
-                      </Body>
-                    )}
-                  </div>
-                )}
-              </div>
-            </TextareaCharacterCountProvider>
+              {message && (
+                <InlinePrompt
+                  sentiment={sentiment}
+                  id={messageId}
+                  mediaLabel={messageIconLabel}
+                  className="np-field__prompt"
+                  loading={messageLoading}
+                  width="full"
+                >
+                  {message}
+                </InlinePrompt>
+              )}
+            </div>
           </InputInvalidProvider>
         </InputDescribedByProvider>
       </InputIdContextProvider>

package/src/i18n/en.json

@@ -20,7 +20,6 @@
   "neptune.Expander.expandAriaLabel": "Expand",
   "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Type a currency / country",
   "neptune.ExpressiveMoneyInput.currency.select.currency": "Select currency",
-  "neptune.Field.characterCount": "{current} of {max} characters used",
   "neptune.FlowNavigation.back": "back to previous step",
   "neptune.Info.ariaLabel": "More information",
   "neptune.Label.optional": "(Optional)",

package/src/inputs/TextArea.tsx

@@ -1,9 +1,9 @@
 import { clsx } from 'clsx';
-import { forwardRef, useCallback } from 'react';
+import { forwardRef } from 'react';
 
 import { Merge } from '../utils';
 import { inputClassNameBase } from './_common';
-import { useTextareaCharacterCount, useInputAttributes } from './contexts';
+import { useInputAttributes } from './contexts';
 
 export interface TextAreaProps extends Merge<
   React.ComponentPropsWithRef<'textarea'>,
@@ -13,48 +13,17 @@ export interface TextAreaProps extends Merge<
 > {}
 
 export const TextArea = forwardRef(function TextArea(
-  { className, maxLength, onChange, ...restProps }: TextAreaProps,
+  { className, ...restProps }: TextAreaProps,
   reference: React.ForwardedRef<HTMLTextAreaElement | null>,
 ) {
   const inputAttributes = useInputAttributes();
-  const value = restProps.value ?? restProps.defaultValue ?? '';
-  const currentLength = getGraphemeLength(typeof value === 'string' ? value : String(value));
-
-  useTextareaCharacterCount(currentLength, maxLength);
-
-  const handleChange = useCallback(
-    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-      if (maxLength != null && getGraphemeLength(e.target.value) > maxLength) {
-        return;
-      }
-      onChange?.(e);
-    },
-    [maxLength, onChange],
-  );
 
   return (
     <textarea
       ref={reference}
       className={clsx(className, inputClassNameBase(), 'np-text-area')}
-      onChange={handleChange}
       {...inputAttributes}
       {...restProps}
     />
   );
 });
-
-const segmenter =
-  typeof Intl.Segmenter === 'function'
-    ? new Intl.Segmenter(undefined, { granularity: 'grapheme' })
-    : undefined;
-
-function getGraphemeLength(str: string): number {
-  if (segmenter) {
-    let count = 0;
-    for (const _ of segmenter.segment(str)) {
-      count += 1;
-    }
-    return count;
-  }
-  return Array.from(str).length;
-}

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,36 +30194,18 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   stroke-dasharray: var(--wds-list-item-spotlight-strokeDashSize) var(--wds-list-item-spotlight-strokeDashSize);
 }
 
-.np-field-control {
+.np-field-control,
+.np-field__prompt {
   margin-top: 4px;
   margin-top: var(--size-4);
 }
 
-.np-field-validation {
-  display: flex;
-  align-items: flex-start;
-  margin-top: 4px;
-  margin-top: var(--size-4);
-  gap: 8px;
-  gap: var(--size-8);
-}
-
-.np-field-textarea-char-counter {
-  min-width: 55px;
-  text-align: right;
-  margin-left: auto;
-  padding: 4px 0;
-  padding: var(--size-4) 0;
-  color: #768e9c;
-  color: var(--color-content-tertiary);
-}
-
 .np-field .form-group--typeahead[class],
 .np-field .np-checkbox-label[class] {
   margin-bottom: 0;
 }
 
-.np-field:has(.wds-radio-group) .np-field-validation {
+.np-field:has(.wds-radio-group) .np-field__prompt {
   margin-top: 12px;
   margin-top: var(--size-12);
 }

package/src/popover/Popover.story.tsx

@@ -71,3 +71,48 @@ export const WithoutVisibleTitle: Story = {
     ),
   },
 } satisfies Meta<typeof Popover>;
+
+/**
+ * The `preferredPlacement` prop indicates where the Popover should appear
+ * relative to its trigger element. However, it is a preference, not a guarantee.
+ *
+ * If there isn't enough viewport space in the preferred direction, the Popover
+ * automatically flips to an alternative placement. The fallback order is:
+ * - `top` → tries `bottom`, then `right`, then `left`
+ * - `bottom` → tries `top`, then `right`, then `left`
+ * - `left` → tries `right`, then `top`, then `bottom`
+ * - `right` → tries `left`, then `top`, then `bottom`
+ *
+ * For example, if you set `preferredPlacement="top"` but the trigger is near
+ * the top of the viewport, the Popover will flip to `bottom` instead.
+ *
+ * Try scrolling this story so triggers are near viewport edges to see the
+ * flip behaviour in action.
+ */
+export const PreferredPlacement: Story = {
+  render: () => (
+    <div
+      style={{
+        display: 'flex',
+        flexWrap: 'wrap',
+        gap: '48px',
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: '120px 80px',
+      }}
+    >
+      {([Position.TOP, Position.RIGHT, Position.BOTTOM, Position.LEFT] as const).map(
+        (placement) => (
+          <Popover
+            key={placement}
+            preferredPlacement={placement}
+            title="Guaranteed rate"
+            content={<Content />}
+          >
+            <Button v2>{placement}</Button>
+          </Popover>
+        ),
+      )}
+    </div>
+  ),
+};

package/src/popover/Popover.test.story.tsx

@@ -0,0 +1,63 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { userEvent, within } from 'storybook/test';
+
+import Button from '../button';
+import { Position } from '../common';
+
+import Popover, { PopoverPreferredPlacement } from './Popover';
+
+export default {
+  component: Popover,
+  title: 'Dialogs/Popover/Tests',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof Popover>;
+
+type Story = StoryObj<typeof Popover>;
+
+const createPlacementStory = (
+  placement: PopoverPreferredPlacement,
+  containerStyle?: React.CSSProperties,
+): Story => ({
+  parameters: {
+    chromatic: {
+      delay: 1000,
+    },
+  },
+  render: () => (
+    <div style={containerStyle ?? { display: 'flex', justifyContent: 'center', padding: '150px' }}>
+      <Popover preferredPlacement={placement} title="Info" content="Details">
+        <Button v2>{placement}</Button>
+      </Popover>
+    </div>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole('button'));
+  },
+});
+
+export const PlacementTop: Story = createPlacementStory(Position.TOP);
+export const PlacementRight: Story = createPlacementStory(Position.RIGHT);
+export const PlacementBottom: Story = createPlacementStory(Position.BOTTOM);
+export const PlacementLeft: Story = createPlacementStory(Position.LEFT);
+
+export const FlipTop: Story = createPlacementStory(Position.TOP, {
+  position: 'absolute',
+  top: 0,
+  left: '50%',
+});
+export const FlipRight: Story = createPlacementStory(Position.RIGHT, {
+  position: 'absolute',
+  top: '50%',
+  right: 0,
+});
+export const FlipBottom: Story = createPlacementStory(Position.BOTTOM, {
+  position: 'absolute',
+  bottom: 0,
+  left: '50%',
+});
+export const FlipLeft: Story = createPlacementStory(Position.LEFT, {
+  position: 'absolute',
+  top: '50%',
+  left: 0,
+});

package/src/popover/Popover.test.tsx

@@ -142,6 +142,62 @@ describe('Popover', () => {
     expect(handleOnClose).toHaveBeenCalledTimes(1);
   });
 
+  describe('className', () => {
+    describe('on desktop', () => {
+      beforeEach(() => {
+        global.innerWidth = Breakpoint.SMALL;
+      });
+
+      it('applies className to the panel container', async () => {
+        render(
+          <Popover {...props} className="custom-popover-class">
+            <button type="button">Open</button>
+          </Popover>,
+        );
+
+        await userEvent.click(screen.getByText('Open'));
+        await waitForPanel();
+
+        const panel = getPanel();
+        expect(panel).toHaveClass('np-popover__container');
+        expect(panel).toHaveClass('custom-popover-class');
+      });
+    });
+
+    describe('on mobile', () => {
+      beforeEach(() => {
+        global.innerWidth = Breakpoint.SMALL - 1;
+      });
+
+      it('applies className to the bottom sheet container', async () => {
+        render(
+          <Popover {...props} className="custom-popover-class">
+            <button type="button">Open</button>
+          </Popover>,
+        );
+
+        await userEvent.click(screen.getByText('Open'));
+
+        const bottomSheet = getBottomSheet();
+        expect(bottomSheet).toHaveClass('np-popover__container');
+        expect(bottomSheet).toHaveClass('custom-popover-class');
+      });
+    });
+
+    it('does not apply className to the trigger wrapper', () => {
+      const { container } = render(
+        <Popover {...props} className="custom-popover-class">
+          <button type="button">Open</button>
+        </Popover>,
+      );
+
+      const wrapper = container.firstChild;
+      expect(wrapper).toHaveClass('np-popover');
+      expect(wrapper).toHaveClass('d-inline-block');
+      expect(wrapper).not.toHaveClass('custom-popover-class');
+    });
+  });
+
   const waitForPanel = async () => screen.findByText('content');
   const getDimmer = () => document.querySelector('.dimmer');
   const getPanel = () => document.querySelector('.np-panel');

package/src/popover/Popover.tsx

@@ -75,17 +75,15 @@ export default function Popover({
   };
 
   return (
-    <span className={clsx('np-popover', className)}>
-      <span ref={anchorReference} className="d-inline-block">
-        {isValidElement<{ onClick?: () => void }>(children)
-          ? cloneElement(children, {
-              onClick: () => {
-                children.props.onClick?.();
-                setOpen((prevOpen) => !prevOpen);
-              },
-            })
-          : children}
-      </span>
+    <span ref={anchorReference} className="np-popover d-inline-block">
+      {isValidElement<{ onClick?: () => void }>(children)
+        ? cloneElement(children, {
+            onClick: () => {
+              children.props.onClick?.();
+              setOpen((prevOpen) => !prevOpen);
+            },
+          })
+        : children}
       <ResponsivePanel
         aria-label={ariaLabel}
         aria-labelledby={title && !ariaLabel ? titleId : undefined}
@@ -93,7 +91,7 @@ export default function Popover({
         anchorRef={anchorReference}
         position={resolvedPlacement}
         arrow
-        className="np-popover__container"
+        className={clsx('np-popover__container', className)}
         onClose={handleOnClose}
       >
         <div className="np-popover__content np-text-default-body">

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={10} 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>
-    );
-  },
-};