@transferwise/components 46.37.0 → 46.38.0

package/build/types/uploadInput/uploadButton/UploadButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UploadButton.d.ts","sourceRoot":"","sources":["../../../../src/uploadInput/uploadButton/UploadButton.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,QAAQ,EAAc,MAAM,cAAc,CAAC;AAOpD,KAAK,gBAAgB,GAAG,MAAM,GAAG,SAAS,MAAM,EAAE,GAAG,SAAS,QAAQ,EAAE,CAAC;AACzE,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAE7B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAEjC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;OAIG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAC;IAEpC;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;OAEG;IACH,+BAA+B,EAAE,OAAO,CAAC;CAC1C,CAAC;AAEF,oBAAY,QAAQ;IAClB,WAAW,gBAAgB;IAC3B,SAAS,cAAc;CACxB;AAOD,QAAA,MAAM,YAAY,2IAWf,iBAAiB,gCA8KnB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"UploadButton.d.ts","sourceRoot":"","sources":["../../../../src/uploadInput/uploadButton/UploadButton.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,QAAQ,EAAc,MAAM,cAAc,CAAC;AAMpD,KAAK,gBAAgB,GAAG,MAAM,GAAG,SAAS,MAAM,EAAE,GAAG,SAAS,QAAQ,EAAE,CAAC;AACzE,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAE7B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAEjC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;OAIG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAC;IAEpC;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF,oBAAY,QAAQ;IAClB,WAAW,gBAAgB;IAC3B,SAAS,cAAc;CACxB;AAOD,QAAA,MAAM,YAAY,0GAUf,iBAAiB,gCA6JnB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/build/types/uploadInput/uploadItem/UploadItem.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { UploadedFile } from '../types';
 export type UploadItemProps = JSX.IntrinsicAttributes & {
     file: UploadedFile;

package/build/types/uploadInput/uploadItem/UploadItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UploadItem.d.ts","sourceRoot":"","sources":["../../../../src/uploadInput/uploadItem/UploadItem.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAKxC,MAAM,MAAM,eAAe,GAAG,GAAG,CAAC,mBAAmB,GAAG;IACtD,IAAI,EAAE,YAAY,CAAC;IACnB;;OAEG;IACH,gBAAgB,EAAE,OAAO,CAAC;IAC1B,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IAErB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;CAC3C,CAAC;AAEF,oBAAY,QAAQ;IAClB,UAAU,eAAe;IACzB,SAAS,cAAc;CACxB;AAED,QAAA,MAAM,UAAU,iEAMb,eAAe,gCAmHjB,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"UploadItem.d.ts","sourceRoot":"","sources":["../../../../src/uploadInput/uploadItem/UploadItem.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,YAAY,EAAe,MAAM,UAAU,CAAC;AAKrD,MAAM,MAAM,eAAe,GAAG,GAAG,CAAC,mBAAmB,GAAG;IACtD,IAAI,EAAE,YAAY,CAAC;IACnB;;OAEG;IACH,gBAAgB,EAAE,OAAO,CAAC;IAC1B,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IAErB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;CAC3C,CAAC;AAEF,oBAAY,QAAQ;IAClB,UAAU,eAAe;IACzB,SAAS,cAAc;CACxB;AAED,QAAA,MAAM,UAAU,iEAMb,eAAe,gCAyHjB,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/build/types/withDisplayFormat/WithDisplayFormat.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WithDisplayFormat.d.ts","sourceRoot":"","sources":["../../../src/withDisplayFormat/WithDisplayFormat.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"WithDisplayFormat.d.ts","sourceRoot":"","sources":["../../../src/withDisplayFormat/WithDisplayFormat.tsx"],"names":[],"mappings":"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"}

package/build/types/withNextPortal/withNextPortal.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 export default function withNextPortalWrapper<T extends Record<string, any>>(Component: React.ComponentType<T>): (props: T) => import("react").ReactPortal | null;
 //# sourceMappingURL=withNextPortal.d.ts.map

package/build/types/withNextPortal/withNextPortal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"withNextPortal.d.ts","sourceRoot":"","sources":["../../../src/withNextPortal/withNextPortal.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EACzE,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,WAET,CAAC,wCAQ1B"}
+{"version":3,"file":"withNextPortal.d.ts","sourceRoot":"","sources":["../../../src/withNextPortal/withNextPortal.tsx"],"names":[],"mappings":"AAGA,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EACzE,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,WAET,CAAC,wCAQ1B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.37.0",
+  "version": "46.38.0",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -127,7 +127,6 @@
     "merge-props": "^6.0.0",
     "prop-types": "^15.8.1",
     "react-popper": "^2.3.0",
-    "react-required-if": "^1.0.3",
     "react-transition-group": "^4.4.5"
   },
   "publishConfig": {

package/src/alert/inlineMarkdown/InlineMarkdown.tsx

@@ -0,0 +1,13 @@
+import { MarkdownNodeType } from '../../common';
+import Markdown from '../../markdown';
+
+const allowList = [MarkdownNodeType.STRONG];
+
+export interface InlineMarkdownProps {
+  children?: string;
+  className?: string;
+}
+
+export default function InlineMarkdown(props: InlineMarkdownProps) {
+  return <Markdown {...props} as="span" allowList={allowList} blockList={undefined} />;
+}

package/src/alert/inlineMarkdown/index.ts

@@ -0,0 +1,2 @@
+export { default } from './InlineMarkdown';
+export type { InlineMarkdownProps } from './InlineMarkdown';

package/src/card/{Card.story.js → Card.story.tsx}

@@ -3,27 +3,21 @@ import { FastFlag as FastFlagIcon } from '@transferwise/icons';
 import { useState } from 'react';
 
 import Card from '.';
+import { CardProps } from './Card';
 
 export default {
   component: Card,
   title: 'Layouts/Card',
 };
 
-const Template = (props) => {
+const Template = (props: Pick<CardProps, 'isExpanded' | 'icon' | 'onClick'>) => {
   const elementType = select('elementType', ['div', 'li'], 'div');
   const title = text('title', 'A card');
   const details = text('details', 'Some details about this card');
   const content = text('content', 'Lorem ipsum dolor sit amet.');
 
   return (
-    <Card
-      as={elementType}
-      title={title}
-      details={details}
-      isExpanded={props.isExpanded}
-      icon={props.icon}
-      onClick={props.onClick}
-    >
+    <Card as={elementType} title={title} details={details} {...props}>
       {content}
     </Card>
   );
@@ -36,13 +30,10 @@ export const Basic = () => {
 };
 
 export const Multiple = () => {
-  const [expandedCardIndex, setExpandedCardIndex] = useState(0);
+  const [expandedCardIndex, setExpandedCardIndex] = useState<number | null>(0);
 
-  const handleOnCardClick = (index) => {
-    if (expandedCardIndex === index) {
-      return setExpandedCardIndex(null);
-    }
-    setExpandedCardIndex(index);
+  const handleOnCardClick = (index: number) => {
+    setExpandedCardIndex(index !== expandedCardIndex ? index : null);
   };
 
   return (

package/src/card/{Card.js → Card.tsx}

@@ -1,17 +1,29 @@
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import { forwardRef } from 'react';
-import requiredIf from 'react-required-if';
 
 import Body from '../body';
 import Chevron from '../chevron';
 import { Position, Typography } from '../common';
 import Option from '../common/Option';
 
-const Card = forwardRef((props, reference) => {
-  const {
+export interface CardProps {
+  'aria-label'?: string;
+  as?: React.ElementType;
+  isExpanded?: boolean;
+  title: React.ReactNode;
+  details: React.ReactNode;
+  icon?: React.ReactNode;
+  children?: React.ReactNode;
+  id?: string;
+  className?: string;
+  'data-testid'?: string;
+  onClick?: (nextIsExpanded: boolean) => void;
+}
+
+const Card = forwardRef(function Card(
+  {
     'aria-label': ariaLabel,
-    as: Element,
+    as: Element = 'div',
     isExpanded,
     title,
     details,
@@ -20,8 +32,10 @@ const Card = forwardRef((props, reference) => {
     icon,
     id,
     className,
-    ...rest
-  } = props;
+    'data-testid': dataTestId,
+  }: CardProps,
+  reference,
+) {
   const isOpen = !!(isExpanded && children);
 
   return (
@@ -33,7 +47,7 @@ const Card = forwardRef((props, reference) => {
         'np-card--has-icon': !!icon,
       })}
       id={id}
-      data-testid={rest['data-testid']}
+      data-testid={dataTestId}
     >
       <Option
         aria-label={ariaLabel}
@@ -44,7 +58,7 @@ const Card = forwardRef((props, reference) => {
         content={details}
         showMediaAtAllSizes
         button={children && <Chevron orientation={isOpen ? Position.TOP : Position.BOTTOM} />}
-        onClick={() => children && onClick(!isExpanded)}
+        onClick={children ? () => onClick?.(!isExpanded) : undefined}
       />
       <div
         className={classNames('np-card__divider', {
@@ -60,29 +74,4 @@ const Card = forwardRef((props, reference) => {
   );
 });
 
-const hasChildren = ({ children }) => children;
-
-Card.propTypes = {
-  'aria-label': PropTypes.string,
-  as: PropTypes.string,
-  isExpanded: requiredIf(PropTypes.bool, hasChildren),
-  title: PropTypes.node.isRequired,
-  details: PropTypes.node.isRequired,
-  onClick: requiredIf(PropTypes.func, hasChildren),
-  icon: PropTypes.node,
-  children: PropTypes.node,
-  id: PropTypes.string,
-  className: PropTypes.string,
-  'data-testid': PropTypes.string,
-};
-
-Card.defaultProps = {
-  'aria-label': undefined,
-  as: 'div',
-  children: null,
-  id: null,
-  className: null,
-  'data-testid': null,
-};
-
 export default Card;

package/src/card/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Card';
+export type { CardProps } from './Card';

package/src/checkbox/{Checkbox.spec.js → Checkbox.spec.tsx}

@@ -2,10 +2,10 @@ import '@testing-library/jest-dom';
 
 import { render, fireEvent, screen } from '@testing-library/react';
 
-import Checkbox from '.';
+import Checkbox, { CheckboxProps } from '.';
 
 describe('Checkbox', () => {
-  let props;
+  let props: CheckboxProps;
 
   beforeEach(() => {
     props = {
@@ -68,7 +68,7 @@ describe('Checkbox', () => {
 
   it('has disabled class when the disabled prop is true', () => {
     const { container } = render(<Checkbox {...props} disabled />);
-    expect(getCheckboxContainer(container).firstChild).toHaveClass('disabled');
+    expect(getCheckboxContainer(container)?.firstChild).toHaveClass('disabled');
   });
 
   it('passes required to checkbox button', () => {
@@ -117,7 +117,7 @@ describe('Checkbox', () => {
     expect(getCheckboxContainer(container)).toHaveClass('checkbox-lg');
   });
 
-  const getCheckboxContainer = (container) => container.querySelector('.np-checkbox');
-  const getLabel = () => screen.getByText('hello').parentElement;
+  const getCheckboxContainer = (container: HTMLElement) => container.querySelector('.np-checkbox');
+  const getLabel = () => screen.getByText('hello').parentElement!;
   const getCheckbox = () => screen.getByRole('checkbox');
 });

package/src/checkbox/{Checkbox.js → Checkbox.tsx}

@@ -1,12 +1,24 @@
-import { useTheme } from '@wise/components-theming';
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 
 import Body from '../body/Body';
 import CheckboxButton from '../checkboxButton';
 import { Typography } from '../common';
 
-const Checkbox = ({
+export interface CheckboxProps {
+  id?: string;
+  checked?: boolean;
+  required?: boolean;
+  disabled?: boolean;
+  readOnly?: boolean;
+  label: React.ReactNode;
+  secondary?: string;
+  onFocus?: React.FocusEventHandler<HTMLInputElement>;
+  onChange: (checked: boolean) => void;
+  onBlur?: React.FocusEventHandler<HTMLInputElement>;
+  className?: string;
+}
+
+export default function Checkbox({
   id,
   checked,
   required,
@@ -18,15 +30,13 @@ const Checkbox = ({
   onChange,
   onFocus,
   onBlur,
-}) => {
-  const { isModern } = useTheme();
-
+}: CheckboxProps) {
   const classList = classNames(
     'np-checkbox',
     {
       checkbox: true,
       'checkbox-lg': secondary,
-      disabled: isModern && disabled,
+      disabled,
     },
     className,
   );
@@ -51,41 +61,9 @@ const Checkbox = ({
           type={secondary ? Typography.BODY_LARGE_BOLD : Typography.BODY_LARGE}
         >
           <span className={required ? 'has-required' : undefined}>{label}</span>
-          {secondary && (
-            <Body as="span" className={classNames({ secondary: !isModern })}>
-              {secondary}
-            </Body>
-          )}
+          {secondary && <Body as="span">{secondary}</Body>}
         </Body>
       </label>
     </div>
   );
-};
-
-Checkbox.propTypes = {
-  id: PropTypes.string,
-  checked: PropTypes.bool,
-  required: PropTypes.bool,
-  disabled: PropTypes.bool,
-  readOnly: PropTypes.bool,
-  label: PropTypes.node.isRequired,
-  secondary: PropTypes.string,
-  onFocus: PropTypes.func,
-  onChange: PropTypes.func.isRequired,
-  onBlur: PropTypes.func,
-  className: PropTypes.string,
-};
-
-Checkbox.defaultProps = {
-  id: null,
-  checked: false,
-  required: false,
-  disabled: false,
-  readOnly: false,
-  secondary: null,
-  onFocus: null,
-  onBlur: null,
-  className: undefined,
-};
-
-export default Checkbox;
+}

package/src/checkbox/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Checkbox';
+export type { CheckboxProps } from './Checkbox';

package/src/decision/Decision.tsx

@@ -14,7 +14,7 @@ interface DecisionOption {
     block: React.ReactNode;
     list: React.ReactNode;
   };
-  onClick?: React.MouseEventHandler<HTMLElement>;
+  onClick?: (event?: React.MouseEvent<HTMLElement>) => void;
   title: React.ReactNode;
 }
 

package/src/definitionList/{DefinitionList.story.js → DefinitionList.story.tsx}

@@ -30,14 +30,34 @@ const definitions = [
 
 export const Basic = () => {
   const muted = boolean('muted', false);
-  const layout = select('layout', Object.values(Layout), Layout.HORIZONTAL_LEFT_ALIGNED);
+  const layout = select(
+    'layout',
+    [
+      Layout.VERTICAL_TWO_COLUMN,
+      Layout.VERTICAL_ONE_COLUMN,
+      Layout.HORIZONTAL_JUSTIFIED,
+      Layout.HORIZONTAL_LEFT_ALIGNED,
+      Layout.HORIZONTAL_RIGHT_ALIGNED,
+    ],
+    Layout.HORIZONTAL_LEFT_ALIGNED,
+  );
 
   return <DefinitionList layout={layout} muted={muted} definitions={definitions} />;
 };
 
 export const WithActionButtons = () => {
   const muted = boolean('muted', false);
-  const layout = select('layout', Object.values(Layout), Layout.HORIZONTAL_LEFT_ALIGNED);
+  const layout = select(
+    'layout',
+    [
+      Layout.VERTICAL_TWO_COLUMN,
+      Layout.VERTICAL_ONE_COLUMN,
+      Layout.HORIZONTAL_JUSTIFIED,
+      Layout.HORIZONTAL_LEFT_ALIGNED,
+      Layout.HORIZONTAL_RIGHT_ALIGNED,
+    ],
+    Layout.HORIZONTAL_LEFT_ALIGNED,
+  );
 
   return (
     <DefinitionList

package/src/definitionList/DefinitionList.tsx

@@ -0,0 +1,95 @@
+import classNames from 'classnames';
+
+import ActionButton from '../actionButton';
+import { Layout } from '../common';
+
+interface Definition {
+  action?: {
+    label: string;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  };
+  title: React.ReactNode;
+  value: React.ReactNode;
+  key: string;
+}
+
+type DefinitionListLayout =
+  `${Layout.VERTICAL_TWO_COLUMN | Layout.VERTICAL_ONE_COLUMN | Layout.HORIZONTAL_JUSTIFIED | Layout.HORIZONTAL_LEFT_ALIGNED | Layout.HORIZONTAL_RIGHT_ALIGNED}`;
+
+export interface DefinitionListProps {
+  definitions?: Definition[];
+  layout?: DefinitionListLayout;
+  muted?: boolean;
+}
+
+const isLayoutHorizontal = (layout: DefinitionListLayout) =>
+  layout === Layout.HORIZONTAL_LEFT_ALIGNED ||
+  layout === Layout.HORIZONTAL_RIGHT_ALIGNED ||
+  layout === Layout.HORIZONTAL_JUSTIFIED;
+
+const getAlignmentClasses = (layout: DefinitionListLayout, action: Definition['action']) => {
+  const classes = ['d-flex'];
+
+  if (action) {
+    if (isLayoutHorizontal(layout)) {
+      classes.push('align-items-center');
+    } else {
+      classes.push('align-items-start');
+    }
+  }
+
+  if (layout === Layout.HORIZONTAL_RIGHT_ALIGNED) {
+    classes.push('text-sm-right tw-definition-list--right-aligned-desktop');
+  } else {
+    classes.push('justify-content-between');
+  }
+
+  if (layout === Layout.HORIZONTAL_JUSTIFIED) {
+    classes.push('text-sm-justify');
+  }
+
+  return classes;
+};
+
+const defaultDefinitions = [] satisfies DefinitionListProps['definitions'];
+
+export default function DefinitionList({
+  definitions = defaultDefinitions,
+  layout = 'VERTICAL_TWO_COLUMN',
+  muted,
+}: DefinitionListProps) {
+  return (
+    <dl
+      className={classNames('tw-definition-list d-flex ', {
+        'text-muted': muted,
+        'flex-column': layout === Layout.VERTICAL_ONE_COLUMN,
+        'tw-definition-list--columns flex-column flex-row--sm':
+          layout === Layout.VERTICAL_TWO_COLUMN,
+        'tw-definition-list--horizontal flex-column': isLayoutHorizontal(layout),
+      })}
+    >
+      {definitions
+        .filter((definition) => definition)
+        .map(({ action, title, value, key }) => (
+          <div key={key} className="tw-definition-list__item">
+            <dt>{title}</dt>
+            <dd className={classNames(...getAlignmentClasses(layout, action))}>
+              <div>{value}</div>
+              {action ? (
+                <div
+                  className={classNames(
+                    isLayoutHorizontal(layout) ? 'p-l-2' : 'p-x-2',
+                    'tw-definition-list__action',
+                  )}
+                >
+                  <ActionButton className="tw-definition-list__button" onClick={action.onClick}>
+                    {action.label}
+                  </ActionButton>
+                </div>
+              ) : null}
+            </dd>
+          </div>
+        ))}
+    </dl>
+  );
+}

package/src/definitionList/index.ts

@@ -0,0 +1,2 @@
+export { default } from './DefinitionList';
+export type { DefinitionListProps } from './DefinitionList';

package/src/drawer/{Drawer.rtl.spec.js → Drawer.rtl.spec.tsx}

@@ -1,3 +1,5 @@
+import { DimmerProps } from '../dimmer';
+import { SlidingPanelProps } from '../slidingPanel';
 import { mockMatchMedia, render, screen, userEvent } from '../test-utils';
 
 import Drawer from './Drawer';
@@ -7,7 +9,7 @@ mockMatchMedia();
 jest.mock(
   '../dimmer',
   () =>
-    function ({ open, children }) {
+    function Dimmer({ open, children }: DimmerProps) {
       return open ? <div className="dimmer">{children}</div> : null;
     },
 );
@@ -15,7 +17,7 @@ jest.mock(
 jest.mock(
   '../slidingPanel',
   () =>
-    function ({ open, children }) {
+    function SlidingPanel({ open, children }: SlidingPanelProps) {
       return open ? <div className="sliding-panel">{children}</div> : null;
     },
 );

package/src/drawer/{Drawer.story.js → Drawer.story.tsx}

@@ -3,7 +3,6 @@ import { useState } from 'react';
 
 import { Section, Button, Input, Modal } from '..';
 import { Position, Priority } from '../common';
-import { storyConfig } from '../test-utils';
 
 import Drawer from './Drawer';
 
@@ -17,18 +16,6 @@ export const Basic = () => {
   const [openModal, setOpenModal] = useState(false);
   const position = select('position', [Position.LEFT, Position.RIGHT], Position.RIGHT);
 
-  const handleDrawerClose = (event) => {
-    console.log('drawer close');
-    event.stopPropagation();
-    setOpenDrawer(false);
-  };
-
-  const handleModalClose = (event) => {
-    console.log('modal close');
-    event.stopPropagation();
-    setOpenModal(false);
-  };
-
   return (
     <>
       <Button disabled={false} block={false} onClick={() => setOpenDrawer(true)}>
@@ -48,7 +35,11 @@ export const Basic = () => {
             </Button>
           </>
         }
-        onClose={handleDrawerClose}
+        onClose={(event) => {
+          console.log('drawer close');
+          event.stopPropagation();
+          setOpenDrawer(false);
+        }}
       >
         <p>
           I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated
@@ -62,23 +53,24 @@ export const Basic = () => {
           <Button onClick={() => setOpenModal(true)}>Open Modal</Button>
           <Modal
             body={
-              <>
-                <p className="m-t-4">
-                  I am baby actually poke kickstarter, street art jean shorts bespoke chambray
-                  activated charcoal ramps marfa shoreditch tumeric tumblr. Mixtape cred palo santo,
-                  cliche lyft marfa ethical waistcoat poke jean shorts. Scenester readymade selvage
-                  disrupt pok pok. La croix stumptown try-hard chartreuse. I am baby actually poke
-                  kickstarter, street art jean shorts bespoke chambray activated charcoal ramps
-                  marfa shoreditch tumeric, I am baby actually poke kickstarter, street art jean
-                  shorts bespoke chambray activated charcoal ramps marfa shoreditch tumeric tumblr.
-                  Mixtape cred palo santo, cliche lyft marfa ethical waistcoat poke jean shorts.
-                  Scenester readymade selvage disrupt pok pok.
-                </p>
-              </>
+              <p className="m-t-4">
+                I am baby actually poke kickstarter, street art jean shorts bespoke chambray
+                activated charcoal ramps marfa shoreditch tumeric tumblr. Mixtape cred palo santo,
+                cliche lyft marfa ethical waistcoat poke jean shorts. Scenester readymade selvage
+                disrupt pok pok. La croix stumptown try-hard chartreuse. I am baby actually poke
+                kickstarter, street art jean shorts bespoke chambray activated charcoal ramps marfa
+                shoreditch tumeric, I am baby actually poke kickstarter, street art jean shorts
+                bespoke chambray activated charcoal ramps marfa shoreditch tumeric tumblr. Mixtape
+                cred palo santo, cliche lyft marfa ethical waistcoat poke jean shorts. Scenester
+                readymade selvage disrupt pok pok.
+              </p>
             }
             open={openModal}
             title="Title"
-            onClose={handleModalClose}
+            onClose={() => {
+              console.log('modal close');
+              setOpenModal(false);
+            }}
           />
         </Section>
         <p>