@transferwise/components 0.0.0-experimental-303fd87 → 0.0.0-experimental-1aabc72

package/build/inputs/_BottomSheet.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"_BottomSheet.mjs","sources":["../../src/inputs/_BottomSheet.tsx"],"sourcesContent":["import {\n  FloatingFocusManager,\n  FloatingPortal,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useRole,\n} from '@floating-ui/react';\nimport { Transition } from '@headlessui/react';\nimport { FocusScope } from '@react-aria/focus';\nimport { ThemeProvider, useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { Fragment, useEffect, useState } from 'react';\n\nimport { CloseButton } from '../common/closeButton';\nimport { useVirtualKeyboard } from '../common/hooks/useVirtualKeyboard';\nimport { PreventScroll } from '../common/preventScroll/PreventScroll';\nimport { Size } from '../common/propsValues/size';\n\nexport interface BottomSheetProps {\n  open: boolean;\n  renderTrigger?: (args: {\n    ref: React.RefCallback<Element>;\n    getInteractionProps: (customEventHandlers?: React.HTMLProps<Element>) => {\n      [key: string]: unknown;\n    };\n  }) => React.ReactNode;\n  title?: string;\n  initialFocusRef?: React.MutableRefObject<HTMLElement | null>;\n  padding?: 'none' | 'md';\n  children?: React.ReactNode;\n  onClose?: () => void;\n  onCloseEnd?: () => void;\n}\n\n/**\n * App pages set scroll-behavior to 'smooth' which causes mobile Safari to\n * slow-scroll and glitch. This function temporarily disables that behaviour\n * while the BottomSheet is open.\n */\nconst freezeScroll = (shouldFreeze = true) => {\n  if (shouldFreeze) {\n    document.documentElement.classList.add('wds-select-input-scroll-freeze');\n  } else {\n    document.documentElement.classList.remove('wds-select-input-scroll-freeze');\n  }\n};\n\nexport function BottomSheet({\n  open,\n  renderTrigger,\n  title,\n  initialFocusRef,\n  padding = 'md',\n  children,\n  onClose,\n  onCloseEnd,\n}: BottomSheetProps) {\n  useVirtualKeyboard();\n\n  const { refs, context } = useFloating<Element>({\n    open,\n    onOpenChange: (value) => {\n      if (!value) {\n        onClose?.();\n      }\n    },\n  });\n\n  useEffect(() => {\n    freezeScroll(open);\n  }, [open]);\n\n  const dismiss = useDismiss(context);\n  const role = useRole(context);\n  const { getReferenceProps, getFloatingProps } = useInteractions([dismiss, role]);\n\n  const [floatingKey, setFloatingKey] = useState(0);\n\n  const { theme, screenMode } = useTheme();\n\n  return (\n    <>\n      {open ? <PreventScroll /> : null}\n      {renderTrigger?.({\n        ref: refs.setReference,\n        getInteractionProps: getReferenceProps,\n      })}\n\n      <FloatingPortal>\n        <ThemeProvider\n          theme=\"personal\"\n          screenMode={theme === 'personal' ? screenMode : 'light'}\n          isNotRootProvider\n        >\n          <Transition\n            show={open}\n            className=\"np-bottom-sheet-v2-container\"\n            beforeEnter={() => {\n              setFloatingKey((prev) => prev + 1);\n            }}\n            afterLeave={onCloseEnd}\n          >\n            <Transition.Child\n              className=\"np-bottom-sheet-v2-backdrop\"\n              enterFrom=\"np-bottom-sheet-v2-backdrop--closed\"\n              leaveTo=\"np-bottom-sheet-v2-backdrop--closed\"\n            />\n\n            <div className=\"np-bottom-sheet-v2\">\n              <FocusScope>\n                <FloatingFocusManager context={context} initialFocus={initialFocusRef}>\n                  <Fragment\n                    key={floatingKey} // Force inner state invalidation on open\n                  >\n                    <Transition.Child\n                      ref={refs.setFloating}\n                      className=\"np-bottom-sheet-v2-content\"\n                      enterFrom=\"np-bottom-sheet-v2-content--closed\"\n                      leaveTo=\"np-bottom-sheet-v2-content--closed\"\n                      {...getFloatingProps()}\n                    >\n                      <div className=\"np-bottom-sheet-v2-header\">\n                        <CloseButton\n                          size={Size.SMALL}\n                          onClick={() => {\n                            onClose?.();\n                          }}\n                        />\n                      </div>\n                      <div\n                        className={clsx(\n                          'np-bottom-sheet-v2-content-inner',\n                          title && 'np-bottom-sheet-v2-content-inner--has-title',\n                          padding === 'md' && 'np-bottom-sheet-v2-content-inner--padding-md',\n                        )}\n                      >\n                        {title ? (\n                          <h2 className=\"np-bottom-sheet-v2-title np-text-title-body\">{title}</h2>\n                        ) : null}\n                        <div className=\"np-bottom-sheet-v2-body np-text-body-default\">\n                          {children}\n                        </div>\n                      </div>\n                    </Transition.Child>\n                  </Fragment>\n                </FloatingFocusManager>\n              </FocusScope>\n            </div>\n          </Transition>\n        </ThemeProvider>\n      </FloatingPortal>\n    </>\n  );\n}\n"],"names":["freezeScroll","shouldFreeze","document","documentElement","classList","add","remove","BottomSheet","open","renderTrigger","title","initialFocusRef","padding","children","onClose","onCloseEnd","useVirtualKeyboard","refs","context","useFloating","onOpenChange","value","useEffect","dismiss","useDismiss","role","useRole","getReferenceProps","getFloatingProps","useInteractions","floatingKey","setFloatingKey","useState","theme","screenMode","useTheme","_jsxs","_Fragment","_jsx","PreventScroll","ref","setReference","getInteractionProps","FloatingPortal","ThemeProvider","isNotRootProvider","Transition","show","className","beforeEnter","prev","afterLeave","Child","enterFrom","leaveTo","FocusScope","FloatingFocusManager","initialFocus","Fragment","setFloating","CloseButton","size","Size","SMALL","onClick","clsx"],"mappings":"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"}
+{"version":3,"file":"_BottomSheet.mjs","sources":["../../src/inputs/_BottomSheet.tsx"],"sourcesContent":["import {\n  FloatingFocusManager,\n  FloatingPortal,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useRole,\n} from '@floating-ui/react';\nimport { Transition } from '@headlessui/react';\nimport { FocusScope } from '@react-aria/focus';\nimport { ThemeProvider, useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { Fragment, useState } from 'react';\n\nimport { CloseButton } from '../common/closeButton';\nimport { useVirtualKeyboard } from '../common/hooks/useVirtualKeyboard';\nimport { PreventScroll } from '../common/preventScroll/PreventScroll';\nimport { Size } from '../common/propsValues/size';\n\nexport interface BottomSheetProps {\n  open: boolean;\n  renderTrigger?: (args: {\n    ref: React.RefCallback<Element>;\n    getInteractionProps: (customEventHandlers?: React.HTMLProps<Element>) => {\n      [key: string]: unknown;\n    };\n  }) => React.ReactNode;\n  title?: string;\n  initialFocusRef?: React.MutableRefObject<HTMLElement | null>;\n  padding?: 'none' | 'md';\n  children?: React.ReactNode;\n  onClose?: () => void;\n  onCloseEnd?: () => void;\n}\n\nexport function BottomSheet({\n  open,\n  renderTrigger,\n  title,\n  initialFocusRef,\n  padding = 'md',\n  children,\n  onClose,\n  onCloseEnd,\n}: BottomSheetProps) {\n  useVirtualKeyboard();\n\n  const { refs, context } = useFloating<Element>({\n    open,\n    onOpenChange: (value) => {\n      if (!value) {\n        onClose?.();\n      }\n    },\n  });\n\n  const dismiss = useDismiss(context);\n  const role = useRole(context);\n  const { getReferenceProps, getFloatingProps } = useInteractions([dismiss, role]);\n\n  const [floatingKey, setFloatingKey] = useState(0);\n\n  const { theme, screenMode } = useTheme();\n\n  return (\n    <>\n      {open ? <PreventScroll /> : null}\n      {renderTrigger?.({\n        ref: refs.setReference,\n        getInteractionProps: getReferenceProps,\n      })}\n\n      <FloatingPortal>\n        <ThemeProvider\n          theme=\"personal\"\n          screenMode={theme === 'personal' ? screenMode : 'light'}\n          isNotRootProvider\n        >\n          <Transition\n            show={open}\n            className=\"np-bottom-sheet-v2-container\"\n            beforeEnter={() => {\n              setFloatingKey((prev) => prev + 1);\n            }}\n            afterLeave={onCloseEnd}\n          >\n            <Transition.Child\n              className=\"np-bottom-sheet-v2-backdrop\"\n              enterFrom=\"np-bottom-sheet-v2-backdrop--closed\"\n              leaveTo=\"np-bottom-sheet-v2-backdrop--closed\"\n            />\n\n            <div className=\"np-bottom-sheet-v2\">\n              <FocusScope>\n                <FloatingFocusManager context={context} initialFocus={initialFocusRef}>\n                  <Fragment\n                    key={floatingKey} // Force inner state invalidation on open\n                  >\n                    <Transition.Child\n                      ref={refs.setFloating}\n                      className=\"np-bottom-sheet-v2-content\"\n                      enterFrom=\"np-bottom-sheet-v2-content--closed\"\n                      leaveTo=\"np-bottom-sheet-v2-content--closed\"\n                      {...getFloatingProps()}\n                    >\n                      <div className=\"np-bottom-sheet-v2-header\">\n                        <CloseButton\n                          size={Size.SMALL}\n                          onClick={() => {\n                            onClose?.();\n                          }}\n                        />\n                      </div>\n                      <div\n                        className={clsx(\n                          'np-bottom-sheet-v2-content-inner',\n                          title && 'np-bottom-sheet-v2-content-inner--has-title',\n                          padding === 'md' && 'np-bottom-sheet-v2-content-inner--padding-md',\n                        )}\n                      >\n                        {title ? (\n                          <h2 className=\"np-bottom-sheet-v2-title np-text-title-body\">{title}</h2>\n                        ) : null}\n                        <div className=\"np-bottom-sheet-v2-body np-text-body-default\">\n                          {children}\n                        </div>\n                      </div>\n                    </Transition.Child>\n                  </Fragment>\n                </FloatingFocusManager>\n              </FocusScope>\n            </div>\n          </Transition>\n        </ThemeProvider>\n      </FloatingPortal>\n    </>\n  );\n}\n"],"names":["BottomSheet","open","renderTrigger","title","initialFocusRef","padding","children","onClose","onCloseEnd","useVirtualKeyboard","refs","context","useFloating","onOpenChange","value","dismiss","useDismiss","role","useRole","getReferenceProps","getFloatingProps","useInteractions","floatingKey","setFloatingKey","useState","theme","screenMode","useTheme","_jsxs","_Fragment","_jsx","PreventScroll","ref","setReference","getInteractionProps","FloatingPortal","ThemeProvider","isNotRootProvider","Transition","show","className","beforeEnter","prev","afterLeave","Child","enterFrom","leaveTo","FocusScope","FloatingFocusManager","initialFocus","Fragment","setFloating","CloseButton","size","Size","SMALL","onClick","clsx"],"mappings":"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"}

package/build/main.css

@@ -3519,73 +3519,48 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   padding-inline-start: 8px;
   padding-inline-start: var(--size-8);
 }
-.wds-select-input-scroll-freeze {
-  scroll-behavior: unset !important;
-  height: 100vh;
-}
-.wds-select-input-scroll-freeze body {
-  height: 100vh;
-}
 .np-bottom-sheet-v2-container {
   position: relative;
   z-index: 1060;
 }
 .np-bottom-sheet-v2-backdrop {
   position: fixed;
-  inset: 0;
-  bottom: env(safe-area-inset-bottom, 0px);
-  background-color: rgba(55, 81, 126, 0.4);
+  inset: 0px;
+  background-color: #37517e;
+  background-color: var(--color-content-primary);
+  opacity: 0.4;
   transition-property: opacity;
   transition-timing-function: ease-out;
   transition-duration: 300ms;
-  min-height: 100vh;
-}
-@supports (color: color-mix(in lch, red, blue)) {
-.np-bottom-sheet-v2-backdrop {
-  background-color: color-mix(in srgb, var(--color-content-primary) 40%, transparent);
-}
 }
 .np-bottom-sheet-v2-backdrop--closed {
   opacity: 0;
 }
 .np-bottom-sheet-v2 {
   position: fixed;
-  inset: 0;
-  bottom: env(safe-area-inset-bottom, 0);
-  margin-top: 64px;
-  margin-top: var(--size-64);
+  inset: 0px;
+  bottom: env(keyboard-inset-height, 0px);
   margin-left: 8px;
   margin-left: var(--size-8);
   margin-right: 8px;
   margin-right: var(--size-8);
+  margin-top: 64px;
+  margin-top: var(--size-64);
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
-  height: calc(100vh - 64px - 40px);
-  height: calc(100vh - var(--size-64) - 40px);
-}
-.np-bottom-sheet-v2:after {
-  content: '';
-  position: fixed;
-  bottom: -74px;
-  width: 100%;
-  background: #ffffff;
-  background: var(--color-background-elevated);
-  height: 32px;
-  z-index: 1500;
 }
 .np-bottom-sheet-v2-content {
   display: flex;
   flex-direction: column;
   overflow: auto;
   border-top-left-radius: 32px;
-  border-top-left-radius: var(--size-32);
+  /* TODO: Tokenize */
   border-top-right-radius: 32px;
-  border-top-right-radius: var(--size-32);
+  /* TODO: Tokenize */
   background-color: #ffffff;
   background-color: var(--color-background-elevated);
   box-shadow: 0 0 40px rgba(69, 71, 69, 0.2);
-  will-change: transform;
 }
 .np-bottom-sheet-v2-content:focus {
   outline: none;

package/build/styles/inputs/SelectInput.css

@@ -1,70 +1,45 @@
-.wds-select-input-scroll-freeze {
-  scroll-behavior: unset !important;
-  height: 100vh;
-}
-.wds-select-input-scroll-freeze body {
-  height: 100vh;
-}
 .np-bottom-sheet-v2-container {
   position: relative;
   z-index: 1060;
 }
 .np-bottom-sheet-v2-backdrop {
   position: fixed;
-  inset: 0;
-  bottom: env(safe-area-inset-bottom, 0px);
-  background-color: rgba(55, 81, 126, 0.4);
+  inset: 0px;
+  background-color: #37517e;
+  background-color: var(--color-content-primary);
+  opacity: 0.4;
   transition-property: opacity;
   transition-timing-function: ease-out;
   transition-duration: 300ms;
-  min-height: 100vh;
-}
-@supports (color: color-mix(in lch, red, blue)) {
-.np-bottom-sheet-v2-backdrop {
-  background-color: color-mix(in srgb, var(--color-content-primary) 40%, transparent);
-}
 }
 .np-bottom-sheet-v2-backdrop--closed {
   opacity: 0;
 }
 .np-bottom-sheet-v2 {
   position: fixed;
-  inset: 0;
-  bottom: env(safe-area-inset-bottom, 0);
-  margin-top: 64px;
-  margin-top: var(--size-64);
+  inset: 0px;
+  bottom: env(keyboard-inset-height, 0px);
   margin-left: 8px;
   margin-left: var(--size-8);
   margin-right: 8px;
   margin-right: var(--size-8);
+  margin-top: 64px;
+  margin-top: var(--size-64);
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
-  height: calc(100vh - 64px - 40px);
-  height: calc(100vh - var(--size-64) - 40px);
-}
-.np-bottom-sheet-v2:after {
-  content: '';
-  position: fixed;
-  bottom: -74px;
-  width: 100%;
-  background: #ffffff;
-  background: var(--color-background-elevated);
-  height: 32px;
-  z-index: 1500;
 }
 .np-bottom-sheet-v2-content {
   display: flex;
   flex-direction: column;
   overflow: auto;
   border-top-left-radius: 32px;
-  border-top-left-radius: var(--size-32);
+  /* TODO: Tokenize */
   border-top-right-radius: 32px;
-  border-top-right-radius: var(--size-32);
+  /* TODO: Tokenize */
   background-color: #ffffff;
   background-color: var(--color-background-elevated);
   box-shadow: 0 0 40px rgba(69, 71, 69, 0.2);
-  will-change: transform;
 }
 .np-bottom-sheet-v2-content:focus {
   outline: none;

package/build/styles/main.css

@@ -3519,73 +3519,48 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   padding-inline-start: 8px;
   padding-inline-start: var(--size-8);
 }
-.wds-select-input-scroll-freeze {
-  scroll-behavior: unset !important;
-  height: 100vh;
-}
-.wds-select-input-scroll-freeze body {
-  height: 100vh;
-}
 .np-bottom-sheet-v2-container {
   position: relative;
   z-index: 1060;
 }
 .np-bottom-sheet-v2-backdrop {
   position: fixed;
-  inset: 0;
-  bottom: env(safe-area-inset-bottom, 0px);
-  background-color: rgba(55, 81, 126, 0.4);
+  inset: 0px;
+  background-color: #37517e;
+  background-color: var(--color-content-primary);
+  opacity: 0.4;
   transition-property: opacity;
   transition-timing-function: ease-out;
   transition-duration: 300ms;
-  min-height: 100vh;
-}
-@supports (color: color-mix(in lch, red, blue)) {
-.np-bottom-sheet-v2-backdrop {
-  background-color: color-mix(in srgb, var(--color-content-primary) 40%, transparent);
-}
 }
 .np-bottom-sheet-v2-backdrop--closed {
   opacity: 0;
 }
 .np-bottom-sheet-v2 {
   position: fixed;
-  inset: 0;
-  bottom: env(safe-area-inset-bottom, 0);
-  margin-top: 64px;
-  margin-top: var(--size-64);
+  inset: 0px;
+  bottom: env(keyboard-inset-height, 0px);
   margin-left: 8px;
   margin-left: var(--size-8);
   margin-right: 8px;
   margin-right: var(--size-8);
+  margin-top: 64px;
+  margin-top: var(--size-64);
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
-  height: calc(100vh - 64px - 40px);
-  height: calc(100vh - var(--size-64) - 40px);
-}
-.np-bottom-sheet-v2:after {
-  content: '';
-  position: fixed;
-  bottom: -74px;
-  width: 100%;
-  background: #ffffff;
-  background: var(--color-background-elevated);
-  height: 32px;
-  z-index: 1500;
 }
 .np-bottom-sheet-v2-content {
   display: flex;
   flex-direction: column;
   overflow: auto;
   border-top-left-radius: 32px;
-  border-top-left-radius: var(--size-32);
+  /* TODO: Tokenize */
   border-top-right-radius: 32px;
-  border-top-right-radius: var(--size-32);
+  /* TODO: Tokenize */
   background-color: #ffffff;
   background-color: var(--color-background-elevated);
   box-shadow: 0 0 40px rgba(69, 71, 69, 0.2);
-  will-change: transform;
 }
 .np-bottom-sheet-v2-content:focus {
   outline: none;

package/build/types/common/panel/Panel.d.ts

@@ -9,6 +9,7 @@ export type PanelProps = PropsWithChildren<{
     position?: PositionBottom | PositionLeft | PositionRight | PositionTop;
     anchorRef: MutableRefObject<Element | null>;
     anchorWidth?: boolean;
+    considerHeight?: boolean;
 }> & HTMLAttributes<HTMLDivElement>;
 declare const Panel: import("react").ForwardRefExoticComponent<{
     arrow?: boolean;
@@ -19,6 +20,7 @@ declare const Panel: import("react").ForwardRefExoticComponent<{
     position?: PositionBottom | PositionLeft | PositionRight | PositionTop;
     anchorRef: MutableRefObject<Element | null>;
     anchorWidth?: boolean;
+    considerHeight?: boolean;
 } & {
     children?: import("react").ReactNode | undefined;
 } & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

package/build/types/common/panel/Panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../../src/common/panel/Panel.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,cAAc,EACd,gBAAgB,EAChB,iBAAiB,EACjB,cAAc,EAKf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAY,cAAc,EAAE,YAAY,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,IAAI,CAAC;AAgBxF,MAAM,MAAM,UAAU,GAAG,iBAAiB,CAAC;IACzC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,GAAG,cAAc,KAAK,IAAI,CAAC;IAClD,QAAQ,CAAC,EAAE,cAAc,GAAG,YAAY,GAAG,aAAa,GAAG,WAAW,CAAC;IACvE,SAAS,EAAE,gBAAgB,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC;IAC5C,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC,GACA,cAAc,CAAC,cAAc,CAAC,CAAC;AAEjC,QAAA,MAAM,KAAK;YAXD,OAAO;WACR,OAAO;cACJ,OAAO;WACV,OAAO;cACJ,CAAC,KAAK,EAAE,KAAK,GAAG,cAAc,KAAK,IAAI;eACtC,cAAc,GAAG,YAAY,GAAG,aAAa,GAAG,WAAW;eAC3D,gBAAgB,CAAC,OAAO,GAAG,IAAI,CAAC;kBAC7B,OAAO;;;mFAiGrB,CAAC;AAEH,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../../src/common/panel/Panel.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,cAAc,EACd,gBAAgB,EAChB,iBAAiB,EACjB,cAAc,EAKf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAY,cAAc,EAAE,YAAY,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,IAAI,CAAC;AAgBxF,MAAM,MAAM,UAAU,GAAG,iBAAiB,CAAC;IACzC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,GAAG,cAAc,KAAK,IAAI,CAAC;IAClD,QAAQ,CAAC,EAAE,cAAc,GAAG,YAAY,GAAG,aAAa,GAAG,WAAW,CAAC;IACvE,SAAS,EAAE,gBAAgB,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC;IAC5C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC,GACA,cAAc,CAAC,cAAc,CAAC,CAAC;AAEjC,QAAA,MAAM,KAAK;YAZD,OAAO;WACR,OAAO;cACJ,OAAO;WACV,OAAO;cACJ,CAAC,KAAK,EAAE,KAAK,GAAG,cAAc,KAAK,IAAI;eACtC,cAAc,GAAG,YAAY,GAAG,aAAa,GAAG,WAAW;eAC3D,gBAAgB,CAAC,OAAO,GAAG,IAAI,CAAC;kBAC7B,OAAO;qBACJ,OAAO;;;mFAkGxB,CAAC;AAEH,eAAe,KAAK,CAAC"}

package/build/types/common/responsivePanel/ResponsivePanel.d.ts

@@ -7,6 +7,7 @@ declare const ResponsivePanel: import("react").ForwardRefExoticComponent<{
     position?: import("..").PositionBottom | import("..").PositionLeft | import("..").PositionRight | import("..").PositionTop;
     anchorRef: import("react").MutableRefObject<Element | null>;
     anchorWidth?: boolean;
+    considerHeight?: boolean;
 } & {
     children?: import("react").ReactNode | undefined;
 } & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

package/build/types/common/responsivePanel/ResponsivePanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ResponsivePanel.d.ts","sourceRoot":"","sources":["../../../../src/common/responsivePanel/ResponsivePanel.tsx"],"names":[],"mappings":"AAOA,QAAA,MAAM,eAAe;;;;;;;;;;;mGAiDnB,CAAC;AAEH,eAAe,eAAe,CAAC"}
+{"version":3,"file":"ResponsivePanel.d.ts","sourceRoot":"","sources":["../../../../src/common/responsivePanel/ResponsivePanel.tsx"],"names":[],"mappings":"AAQA,QAAA,MAAM,eAAe;;;;;;;;;;;;mGAsDnB,CAAC;AAEH,eAAe,eAAe,CAAC"}

package/build/types/dateLookup/DateLookup.d.ts.map

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

package/build/types/inputs/_BottomSheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"_BottomSheet.d.ts","sourceRoot":"","sources":["../../../src/inputs/_BottomSheet.tsx"],"names":[],"mappings":"AAmBA,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE;QACrB,GAAG,EAAE,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QAChC,mBAAmB,EAAE,CAAC,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK;YACvE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;SACxB,CAAC;KACH,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC7D,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAeD,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,aAAa,EACb,KAAK,EACL,eAAe,EACf,OAAc,EACd,QAAQ,EACR,OAAO,EACP,UAAU,GACX,EAAE,gBAAgB,+BAiGlB"}
+{"version":3,"file":"_BottomSheet.d.ts","sourceRoot":"","sources":["../../../src/inputs/_BottomSheet.tsx"],"names":[],"mappings":"AAmBA,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE;QACrB,GAAG,EAAE,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QAChC,mBAAmB,EAAE,CAAC,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK;YACvE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;SACxB,CAAC;KACH,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC7D,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,aAAa,EACb,KAAK,EACL,eAAe,EACf,OAAc,EACd,QAAQ,EACR,OAAO,EACP,UAAU,GACX,EAAE,gBAAgB,+BA6FlB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-303fd87",
+  "version": "0.0.0-experimental-1aabc72",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -102,8 +102,8 @@
     "@floating-ui/react": "^0.27.16",
     "@headlessui/react": "^1.7.19",
     "@popperjs/core": "^2.11.8",
-    "@react-aria/focus": "^3.21.1",
-    "@react-aria/overlays": "^3.29.1",
+    "@react-aria/focus": "^3.21.0",
+    "@react-aria/overlays": "^3.28.0",
     "@react-spring/web": "~10.0.1",
     "@transferwise/formatting": "^2.13.4",
     "@transferwise/neptune-validation": "^3.3.1",

package/src/common/panel/Panel.tsx

@@ -37,6 +37,7 @@ export type PanelProps = PropsWithChildren<{
   position?: PositionBottom | PositionLeft | PositionRight | PositionTop;
   anchorRef: MutableRefObject<Element | null>;
   anchorWidth?: boolean;
+  considerHeight?: boolean;
 }> &
   HTMLAttributes<HTMLDivElement>;
 
@@ -51,6 +52,7 @@ const Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(
     position = Position.BOTTOM,
     anchorRef,
     anchorWidth = false,
+    considerHeight = false,
     ...rest
   }: PanelProps,
   reference,

package/src/common/responsivePanel/ResponsivePanel.tsx

@@ -4,6 +4,7 @@ import { Position } from '..';
 import BottomSheet from '../bottomSheet';
 import { useLayout } from '../hooks';
 import Panel, { type PanelProps } from '../panel';
+import { isServerSide } from '../domHelpers';
 
 const ResponsivePanel = forwardRef<HTMLDivElement, PanelProps>(function ResponsivePanel(
   {
@@ -17,12 +18,16 @@ const ResponsivePanel = forwardRef<HTMLDivElement, PanelProps>(function Responsi
     position = Position.BOTTOM,
     anchorWidth = false,
     'aria-label': ariaLabel,
+    considerHeight = false,
     'aria-labelledby': ariaLabelledBy,
   }: PanelProps,
   reference,
 ) {
   const { isMobile } = useLayout();
-  if (isMobile) {
+  const SHORT_SCREEN = 500;
+  const isShortViewport = considerHeight && !isServerSide() && window.innerHeight < SHORT_SCREEN;
+
+  if (isMobile || isShortViewport) {
     return (
       <BottomSheet
         key="bottomSheet"
@@ -47,6 +52,7 @@ const ResponsivePanel = forwardRef<HTMLDivElement, PanelProps>(function Responsi
       anchorWidth={anchorWidth}
       anchorRef={anchorRef}
       aria-label={ariaLabel}
+      considerHeight={considerHeight}
       aria-labelledby={ariaLabelledBy}
       className={className}
       onClose={onClose}

package/src/dateInput/DateInput.spec.tsx

@@ -247,4 +247,31 @@ describe('Date Input Component', () => {
     );
     expect(screen.getAllByRole('group')[0]).toHaveAccessibleName(/^Date of birth/);
   });
+
+  it('focuses day input when `Field` label is clicked', async () => {
+    const label = 'Date of birth';
+
+    render(
+      <Field label={label}>
+        <DateInput onChange={() => {}} />
+      </Field>,
+    );
+
+    const dayInput = screen.getByRole('textbox', { name: /day/i });
+    await userEvent.click(screen.getByText(label, { selector: 'label' })); // Have to use `getByText` due to the way `Field` handles group labelling
+    expect(dayInput).toHaveFocus();
+  });
+
+  it('focuses month input when `Field` label is clicked and day is not present', async () => {
+    const label = 'Date of birth';
+
+    render(
+      <Field label={label}>
+        <DateInput mode="month-year" onChange={() => {}} />
+      </Field>,
+    );
+    const monthTrigger = screen.getByRole('combobox');
+    await userEvent.click(screen.getByText(label, { selector: 'label' })); // Have to use `getByText` due to the way `Field` handles group labelling
+    expect(monthTrigger).toHaveAttribute('aria-expanded', 'true');
+  });
 });

package/src/dateLookup/DateLookup.spec.tsx

@@ -42,6 +42,22 @@ describe('DateLookup', () => {
     expect(button).toHaveAttribute('aria-haspopup');
   });
 
+  it('focuses trigger and opens panel when `Field` label is clicked', async () => {
+    const label = 'Date of birth';
+
+    render(
+      <Field label={label}>
+        <DateLookup value={initialValue} onChange={() => {}} />
+      </Field>,
+    );
+
+    const button = screen.getByRole('button', { name: /^Date of birth/ });
+    await user.click(screen.getByLabelText(label));
+
+    expect(button).toHaveAttribute('aria-expanded', 'true');
+    expect(screen.getByRole('button', { name: /next/iu })).toBeInTheDocument();
+  });
+
   it.each([' ', '{Enter}', '{ArrowDown}', '{ArrowUp}', '{ArrowRight}', '{ArrowLeft}'] as const)(
     "opens with '%s' and closes with '{Escape}'",
     async (text: string) => {

package/src/dateLookup/DateLookup.tsx

@@ -343,6 +343,7 @@ class DateLookup extends PureComponent<DateLookupPropsWithInputAttributes, DateL
             open={open}
             className="tw-date-lookup-menu"
             position={Position.BOTTOM}
+            considerHeight
             onClose={this.discard}
           >
             {this.getCalendar()}

package/src/inputs/SelectInput.css

@@ -1,70 +1,45 @@
-.wds-select-input-scroll-freeze {
-  scroll-behavior: unset !important;
-  height: 100vh;
-}
-.wds-select-input-scroll-freeze body {
-  height: 100vh;
-}
 .np-bottom-sheet-v2-container {
   position: relative;
   z-index: 1060;
 }
 .np-bottom-sheet-v2-backdrop {
   position: fixed;
-  inset: 0;
-  bottom: env(safe-area-inset-bottom, 0px);
-  background-color: rgba(55, 81, 126, 0.4);
+  inset: 0px;
+  background-color: #37517e;
+  background-color: var(--color-content-primary);
+  opacity: 0.4;
   transition-property: opacity;
   transition-timing-function: ease-out;
   transition-duration: 300ms;
-  min-height: 100vh;
-}
-@supports (color: color-mix(in lch, red, blue)) {
-.np-bottom-sheet-v2-backdrop {
-  background-color: color-mix(in srgb, var(--color-content-primary) 40%, transparent);
-}
 }
 .np-bottom-sheet-v2-backdrop--closed {
   opacity: 0;
 }
 .np-bottom-sheet-v2 {
   position: fixed;
-  inset: 0;
-  bottom: env(safe-area-inset-bottom, 0);
-  margin-top: 64px;
-  margin-top: var(--size-64);
+  inset: 0px;
+  bottom: env(keyboard-inset-height, 0px);
   margin-left: 8px;
   margin-left: var(--size-8);
   margin-right: 8px;
   margin-right: var(--size-8);
+  margin-top: 64px;
+  margin-top: var(--size-64);
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
-  height: calc(100vh - 64px - 40px);
-  height: calc(100vh - var(--size-64) - 40px);
-}
-.np-bottom-sheet-v2:after {
-  content: '';
-  position: fixed;
-  bottom: -74px;
-  width: 100%;
-  background: #ffffff;
-  background: var(--color-background-elevated);
-  height: 32px;
-  z-index: 1500;
 }
 .np-bottom-sheet-v2-content {
   display: flex;
   flex-direction: column;
   overflow: auto;
   border-top-left-radius: 32px;
-  border-top-left-radius: var(--size-32);
+  /* TODO: Tokenize */
   border-top-right-radius: 32px;
-  border-top-right-radius: var(--size-32);
+  /* TODO: Tokenize */
   background-color: #ffffff;
   background-color: var(--color-background-elevated);
   box-shadow: 0 0 40px rgba(69, 71, 69, 0.2);
-  will-change: transform;
 }
 .np-bottom-sheet-v2-content:focus {
   outline: none;

package/src/inputs/_BottomSheet.less

@@ -1,12 +1,3 @@
-.wds-select-input-scroll-freeze{
-  scroll-behavior: unset !important;
-  height: 100vh;
-
-  body{
-    height: 100vh;
-  }
-}
-
 .np-bottom-sheet-v2-container {
   position: relative;
   z-index: 1060;
@@ -14,17 +5,12 @@
 
 .np-bottom-sheet-v2-backdrop {
   position: fixed;
-  inset: 0;
-  bottom: env(safe-area-inset-bottom, 0px);
-  background-color: color-mix(
-    in srgb,
-    var(--color-content-primary) 40%,
-    transparent
-  );
+  inset: 0px;
+  background-color: var(--color-content-primary);
+  opacity: 0.4;
   transition-property: opacity;
   transition-timing-function: ease-out;
   transition-duration: 300ms;
-  min-height: 100vh;
 
   &--closed {
     opacity: 0;
@@ -33,36 +19,24 @@
 
 .np-bottom-sheet-v2 {
   position: fixed;
-  inset: 0;
-  bottom: env(safe-area-inset-bottom, 0);
-  margin-top: var(--size-64);
+  inset: 0px;
+  bottom: env(keyboard-inset-height, 0px);
   margin-left: var(--size-8);
   margin-right: var(--size-8);
+  margin-top: var(--size-64);
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
-  height: calc(100vh - var(--size-64) - 40px);
-
-  &:after{
-    content: '';
-    position:fixed;
-    bottom: -74px;
-    width: 100%;
-    background: var(--color-background-elevated);
-    height: 32px;
-    z-index: 1500;
-  }
 }
 
 .np-bottom-sheet-v2-content {
   display: flex;
   flex-direction: column;
   overflow: auto;
-  border-top-left-radius: var(--size-32);
-  border-top-right-radius: var(--size-32);
+  border-top-left-radius: 32px; /* TODO: Tokenize */
+  border-top-right-radius: 32px; /* TODO: Tokenize */
   background-color: var(--color-background-elevated);
   box-shadow: 0 0 40px rgb(69 71 69 / 0.2);
-  will-change: transform;
 
   &:focus {
     outline: none;