@transferwise/components 46.89.2 → 46.90.0

package/src/inputs/SelectInput.story.tsx

@@ -290,6 +290,65 @@ export const MultipleCurrencies: Story<Currency, true> = {
   },
 };
 
+export const WithSelectAll: Story<Currency, true> = {
+  args: {
+    ...MultipleCurrencies.args,
+  },
+  render: function Render(args) {
+    const [selectedItems, setSelectedItems] = useState<Currency[]>([]);
+
+    const allSelected = (items: Currency[]) => {
+      const selectedSet = new Set(selectedItems);
+      return items.every((item) => selectedSet.has(item));
+    };
+
+    const toggleItems = (items: Currency[]) => {
+      setSelectedItems((currentItems) =>
+        allSelected(items)
+          ? currentItems.filter((item) => !items.includes(item))
+          : [...new Set([...currentItems, ...items])],
+      );
+    };
+
+    return (
+      <SelectInput
+        {...args}
+        items={[
+          {
+            type: 'group',
+            label: 'Popular currencies',
+            options: popularCurrencies.map((currency) => currencyOption(currency)),
+            action: {
+              label: allSelected(popularCurrencies) ? 'Deselect all' : 'Select all',
+              onClick: () => {
+                toggleItems(popularCurrencies);
+              },
+            },
+          },
+          {
+            type: 'group',
+            label: 'Other currencies',
+            options: otherCurrencies.map((currency) => currencyOption(currency)),
+            action: {
+              label: allSelected(otherCurrencies) ? 'Deselect all' : 'Select all',
+              onClick: () => {
+                toggleItems(otherCurrencies);
+              },
+            },
+          },
+        ]}
+        value={selectedItems}
+        onChange={(currencies) => {
+          setSelectedItems(currencies);
+        }}
+        onClear={() => {
+          setSelectedItems([]);
+        }}
+      />
+    );
+  },
+};
+
 export const CustomTrigger: Story<Month> = {
   args: {
     placeholder: 'Month',

package/src/inputs/SelectInput.tsx

@@ -30,6 +30,9 @@ import { useInputAttributes, WithInputAttributesProps } from './contexts';
 import { InputGroup } from './InputGroup';
 import { SearchInput } from './SearchInput';
 import messages from './SelectInput.messages';
+import Header from '../header';
+import Section from '../section';
+import { ButtonProps } from '../button/Button.types';
 
 const MAX_ITEMS_WITHOUT_VIRTUALIZATION = 50;
 
@@ -62,6 +65,10 @@ export interface SelectInputGroupItem<T = string> {
   type: 'group';
   label: string;
   options: readonly SelectInputOptionItem<T>[];
+  action?: {
+    label: string;
+    onClick: ButtonProps['onClick'];
+  };
 }
 
 export interface SelectInputSeparatorItem {
@@ -810,23 +817,33 @@ function SelectInputGroupItemView<T = string>({
 }: SelectInputGroupItemViewProps<T>) {
   const headerId = useId();
 
+  const header = (
+    <Header
+      as="header"
+      role="none"
+      id={headerId}
+      title={item.label}
+      // @ts-expect-error when we migrate ActionButton to new Button this should be sorted
+      action={
+        item.action && {
+          text: item.action.label,
+          onClick: item.action.onClick,
+        }
+      }
+      className="np-select-input-group-item-header p-x-1"
+    />
+  );
+
   return (
     // An empty container may be rendered when no options match `needle`
     // However, pre-filtering would result in worse performance overall
-    <section
+    <Section
+      as="section"
       role="group"
       aria-labelledby={headerId}
-      className={clsx(needle === null && 'np-select-input-group-item--without-needle')}
+      className={clsx('m-y-0', needle === null && 'np-select-input-group-item--without-needle')}
     >
-      {needle == null ? (
-        <header
-          id={headerId}
-          role="none"
-          className="np-select-input-group-item-header np-text-title-group"
-        >
-          {item.label}
-        </header>
-      ) : null}
+      {needle == null ? header : null}
       {item.options.map((option, index) => (
         <SelectInputItemView
           // eslint-disable-next-line react/no-array-index-key
@@ -836,7 +853,7 @@ function SelectInputGroupItemView<T = string>({
           needle={needle}
         />
       ))}
-    </section>
+    </Section>
   );
 }
 

package/src/main.css

@@ -2943,10 +2943,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   z-index: 10;
   background-color: #ffffff;
   background-color: var(--color-background-elevated);
-  padding: 8px 16px 4px;
-  padding: var(--size-8) var(--size-16) var(--size-4);
-  color: #5d7079;
-  color: var(--color-content-secondary);
 }
 .np-select-input-option-container {
   display: flex;

package/src/section/Section.tsx

@@ -1,14 +1,15 @@
 import { clsx } from 'clsx';
-import { PropsWithChildren } from 'react';
+import { HTMLAttributes, PropsWithChildren } from 'react';
 
 import { CommonProps } from '../common';
 
 type SectionProps = PropsWithChildren<
   CommonProps & {
-    as?: 'div' | 'fieldset';
+    as?: 'div' | 'fieldset' | 'section';
     withHorizontalPadding?: boolean;
   }
->;
+> &
+  Pick<HTMLAttributes<HTMLDivElement>, 'role' | 'aria-labelledby'>;
 
 /**
  *
@@ -20,12 +21,16 @@ const Section = ({
   children,
   className,
   withHorizontalPadding = false,
+  role = undefined,
+  ...restProps
 }: SectionProps) => {
   return (
     <Element
       className={clsx('np-section', className, {
         'np-section--with-horizontal-padding': withHorizontalPadding,
       })}
+      role={role}
+      {...restProps}
     >
       {children}
     </Element>

package/src/title/Title.tsx

@@ -18,7 +18,7 @@ type Props = LabelHTMLAttributes<HTMLHeadingElement | HTMLSpanElement | HTMLLabe
     /**
      * Default value will based one `type` prop
      */
-    as?: 'span' | 'label' | 'li' | 'legend' | Heading;
+    as?: 'span' | 'label' | 'li' | 'legend' | 'header' | Heading;
     /**
      * Default value: {@link DEFAULT_TYPE}
      */