@transferwise/components 0.0.0-experimental-ddeb968 → 0.0.0-experimental-80dda9c

package/README.md

@@ -40,6 +40,14 @@ export default function Hello() {
 }
 ```
 
+### TypeScript | Type Declarations
+
+This package exposes [type declarations](https://www.typescriptlang.org/docs/handbook/2/type-declarations.html) for all components.
+
+Note: types for some of components are not 100% accurate (some of them will be just [`any`](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#any)), this is due to fact that many of components written on JavaScript and types generated by [react-to-typescript-definitions](https://www.npmjs.com/package/react-to-typescript-definitions) based of components `PropTypes` and unfortunatly the library doesn't resolve all `PropTypes` features and use cases (e.g custom validators, `PropTypes.objectOf`, etc). But bear with us as eventually it would be fully on TypeScript.
+
+Please follow [rules for JS components](https://github.com/transferwise/neptune-web/blob/main/packages/components/CONTRIBUTING.md#js-component-rules) in order to generate accurate types for them.
+
 ### Mocks for testing
 
 We expose reusable mocks for Jest and Vitest under an isolated entry point. They can be applied by passing the testing framework as the parameter:

package/build/common/panel/Panel.js

@@ -126,6 +126,7 @@ const Panel = /*#__PURE__*/React.forwardRef(function Panel({
     })
   });
 });
+var Panel$1 = Panel;
 
-module.exports = Panel;
+module.exports = Panel$1;
 //# sourceMappingURL=Panel.js.map

package/build/common/panel/Panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.js","sources":["../../../src/common/panel/Panel.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport {\n  CSSProperties,\n  HTMLAttributes,\n  MutableRefObject,\n  PropsWithChildren,\n  SyntheticEvent,\n  forwardRef,\n  useContext,\n  useEffect,\n  useState,\n} from 'react';\nimport { usePopper } from 'react-popper';\n\nimport { Position, PositionBottom, PositionLeft, PositionRight, PositionTop } from '..';\nimport Dimmer from '../../dimmer';\nimport { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';\n\nconst POPOVER_OFFSET = [0, 16];\n\n// By default the flip positioning explores only the opposite alternative. So if left is passed and there's no enough space\n// the right one gets chosen. If there's no space on both sides popover goes back to the initially chosen one left.\n// This mapping forces popover to try the four available positions before going back to the initial chosen one.\nconst fallbackPlacements = {\n  [Position.TOP]: [Position.BOTTOM, Position.RIGHT, Position.LEFT],\n  [Position.BOTTOM]: [Position.TOP, Position.RIGHT, Position.LEFT],\n  [Position.LEFT]: [Position.RIGHT, Position.TOP, Position.BOTTOM],\n  [Position.RIGHT]: [Position.LEFT, Position.TOP, Position.BOTTOM],\n};\n\nexport type PanelProps = PropsWithChildren<{\n  arrow?: boolean;\n  flip?: boolean;\n  altAxis?: boolean;\n  open?: boolean;\n  onClose?: (event: Event | SyntheticEvent) => void;\n  position?: PositionBottom | PositionLeft | PositionRight | PositionTop;\n  anchorRef: MutableRefObject<Element | null>;\n  anchorWidth?: boolean;\n}> &\n  HTMLAttributes<HTMLDivElement>;\n\nconst Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(\n  {\n    arrow = false,\n    flip = true,\n    altAxis = false,\n    children,\n    open = false,\n    onClose,\n    position = Position.BOTTOM,\n    anchorRef,\n    anchorWidth = false,\n    ...rest\n  }: PanelProps,\n  reference,\n) {\n  const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null);\n  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);\n\n  const modifiers = [];\n\n  if (altAxis) {\n    modifiers.push({\n      // https://popper.js.org/docs/v2/modifiers/prevent-overflow\n      name: 'preventOverflow',\n      options: {\n        altAxis: true,\n        tether: false,\n      },\n    });\n  }\n\n  if (arrow) {\n    modifiers.push({\n      name: 'arrow',\n      options: {\n        element: arrowElement,\n        options: {\n          padding: 8, // 8px from the edges of the popper\n        },\n      },\n    });\n    // This lets you displace a popper element from its reference element.\n    modifiers.push({ name: 'offset', options: { offset: POPOVER_OFFSET } });\n  }\n  if (flip && fallbackPlacements[position]) {\n    modifiers.push({\n      name: 'flip',\n      options: {\n        fallbackPlacements: fallbackPlacements[position],\n      },\n    });\n  }\n\n  const { styles, attributes, forceUpdate } = usePopper(anchorRef.current, popperElement, {\n    placement: position,\n    modifiers,\n  });\n\n  // If the trigger is not visible when the position is calculated, it will be incorrect. Because this can happen repeatedly (on resize for example),\n  // it is most simple just to always position before opening\n  useEffect(() => {\n    if (open && forceUpdate) {\n      forceUpdate();\n    }\n  }, [open]);\n\n  const contentStyle: CSSProperties = {\n    ...(anchorWidth ? { width: anchorRef.current?.clientWidth } : undefined),\n  };\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return (\n    <Dimmer open={open} transparent fadeContentOnEnter fadeContentOnExit onClose={onClose}>\n      <div\n        id={overlayId}\n        {...rest}\n        ref={setPopperElement}\n        role=\"dialog\"\n        // eslint-disable-next-line react/forbid-dom-props\n        style={{ ...styles.popper }}\n        {...attributes.popper}\n        className={clsx('np-panel', { 'np-panel--open': open }, rest.className)}\n      >\n        <div\n          ref={reference}\n          /* eslint-disable-next-line react/forbid-dom-props */\n          style={contentStyle}\n          className={clsx('np-panel__content')}\n        >\n          {children}\n          {/* Arrow has to stay inside content to get the same animations as the \"dialog\" and to get hidden when panel is closed. */}\n          {arrow && (\n            <div\n              ref={setArrowElement}\n              className={clsx('np-panel__arrow')}\n              // eslint-disable-next-line react/forbid-dom-props\n              style={styles.arrow}\n            />\n          )}\n        </div>\n      </div>\n    </Dimmer>\n  );\n});\n\nexport default Panel;\n"],"names":["POPOVER_OFFSET","fallbackPlacements","Position","TOP","BOTTOM","RIGHT","LEFT","Panel","forwardRef","arrow","flip","altAxis","children","open","onClose","position","anchorRef","anchorWidth","rest","reference","arrowElement","setArrowElement","useState","popperElement","setPopperElement","modifiers","push","name","options","tether","element","padding","offset","styles","attributes","forceUpdate","usePopper","current","placement","useEffect","contentStyle","width","clientWidth","undefined","overlayId","useContext","OverlayIdContext","_jsx","Dimmer","transparent","fadeContentOnEnter","fadeContentOnExit","id","ref","role","style","popper","className","clsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"Panel.js","sources":["../../../src/common/panel/Panel.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport {\n  CSSProperties,\n  HTMLAttributes,\n  MutableRefObject,\n  PropsWithChildren,\n  SyntheticEvent,\n  forwardRef,\n  useContext,\n  useEffect,\n  useState,\n} from 'react';\nimport { usePopper } from 'react-popper';\n\nimport { Position, PositionBottom, PositionLeft, PositionRight, PositionTop } from '..';\nimport Dimmer from '../../dimmer';\nimport { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';\n\nconst POPOVER_OFFSET = [0, 16];\n\n// By default the flip positioning explores only the opposite alternative. So if left is passed and there's no enough space\n// the right one gets chosen. If there's no space on both sides popover goes back to the initially chosen one left.\n// This mapping forces popover to try the four available positions before going back to the initial chosen one.\nconst fallbackPlacements = {\n  [Position.TOP]: [Position.BOTTOM, Position.RIGHT, Position.LEFT],\n  [Position.BOTTOM]: [Position.TOP, Position.RIGHT, Position.LEFT],\n  [Position.LEFT]: [Position.RIGHT, Position.TOP, Position.BOTTOM],\n  [Position.RIGHT]: [Position.LEFT, Position.TOP, Position.BOTTOM],\n};\n\nexport type PanelProps = PropsWithChildren<{\n  arrow?: boolean;\n  flip?: boolean;\n  altAxis?: boolean;\n  open?: boolean;\n  onClose?: (event: Event | SyntheticEvent) => void;\n  position?: PositionBottom | PositionLeft | PositionRight | PositionTop;\n  anchorRef: MutableRefObject<Element | null>;\n  anchorWidth?: boolean;\n}> &\n  HTMLAttributes<HTMLDivElement>;\n\nconst Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(\n  {\n    arrow = false,\n    flip = true,\n    altAxis = false,\n    children,\n    open = false,\n    onClose,\n    position = Position.BOTTOM,\n    anchorRef,\n    anchorWidth = false,\n    ...rest\n  }: PanelProps,\n  reference,\n) {\n  const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null);\n  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);\n\n  const modifiers = [];\n\n  if (altAxis) {\n    modifiers.push({\n      // https://popper.js.org/docs/v2/modifiers/prevent-overflow\n      name: 'preventOverflow',\n      options: {\n        altAxis: true,\n        tether: false,\n      },\n    });\n  }\n\n  if (arrow) {\n    modifiers.push({\n      name: 'arrow',\n      options: {\n        element: arrowElement,\n        options: {\n          padding: 8, // 8px from the edges of the popper\n        },\n      },\n    });\n    // This lets you displace a popper element from its reference element.\n    modifiers.push({ name: 'offset', options: { offset: POPOVER_OFFSET } });\n  }\n  if (flip && fallbackPlacements[position]) {\n    modifiers.push({\n      name: 'flip',\n      options: {\n        fallbackPlacements: fallbackPlacements[position],\n      },\n    });\n  }\n\n  const { styles, attributes, forceUpdate } = usePopper(anchorRef.current, popperElement, {\n    placement: position,\n    modifiers,\n  });\n\n  // If the trigger is not visible when the position is calculated, it will be incorrect. Because this can happen repeatedly (on resize for example),\n  // it is most simple just to always position before opening\n  useEffect(() => {\n    if (open && forceUpdate) {\n      forceUpdate();\n    }\n  }, [open]);\n\n  const contentStyle: CSSProperties = {\n    ...(anchorWidth ? { width: anchorRef.current?.clientWidth } : undefined),\n  };\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return (\n    <Dimmer open={open} transparent fadeContentOnEnter fadeContentOnExit onClose={onClose}>\n      <div\n        id={overlayId}\n        {...rest}\n        ref={setPopperElement}\n        role=\"dialog\"\n        // eslint-disable-next-line react/forbid-dom-props\n        style={{ ...styles.popper }}\n        {...attributes.popper}\n        className={clsx('np-panel', { 'np-panel--open': open }, rest.className)}\n      >\n        <div\n          ref={reference}\n          /* eslint-disable-next-line react/forbid-dom-props */\n          style={contentStyle}\n          className={clsx('np-panel__content')}\n        >\n          {children}\n          {/* Arrow has to stay inside content to get the same animations as the \"dialog\" and to get hidden when panel is closed. */}\n          {arrow && (\n            <div\n              ref={setArrowElement}\n              className={clsx('np-panel__arrow')}\n              // eslint-disable-next-line react/forbid-dom-props\n              style={styles.arrow}\n            />\n          )}\n        </div>\n      </div>\n    </Dimmer>\n  );\n});\n\nexport default Panel;\n"],"names":["POPOVER_OFFSET","fallbackPlacements","Position","TOP","BOTTOM","RIGHT","LEFT","Panel","forwardRef","arrow","flip","altAxis","children","open","onClose","position","anchorRef","anchorWidth","rest","reference","arrowElement","setArrowElement","useState","popperElement","setPopperElement","modifiers","push","name","options","tether","element","padding","offset","styles","attributes","forceUpdate","usePopper","current","placement","useEffect","contentStyle","width","clientWidth","undefined","overlayId","useContext","OverlayIdContext","_jsx","Dimmer","transparent","fadeContentOnEnter","fadeContentOnExit","id","ref","role","style","popper","className","clsx","_jsxs"],"mappings":"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"}

package/build/common/panel/Panel.mjs

@@ -124,6 +124,7 @@ const Panel = /*#__PURE__*/forwardRef(function Panel({
     })
   });
 });
+var Panel$1 = Panel;
 
-export { Panel as default };
+export { Panel$1 as default };
 //# sourceMappingURL=Panel.mjs.map

package/build/common/panel/Panel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.mjs","sources":["../../../src/common/panel/Panel.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport {\n  CSSProperties,\n  HTMLAttributes,\n  MutableRefObject,\n  PropsWithChildren,\n  SyntheticEvent,\n  forwardRef,\n  useContext,\n  useEffect,\n  useState,\n} from 'react';\nimport { usePopper } from 'react-popper';\n\nimport { Position, PositionBottom, PositionLeft, PositionRight, PositionTop } from '..';\nimport Dimmer from '../../dimmer';\nimport { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';\n\nconst POPOVER_OFFSET = [0, 16];\n\n// By default the flip positioning explores only the opposite alternative. So if left is passed and there's no enough space\n// the right one gets chosen. If there's no space on both sides popover goes back to the initially chosen one left.\n// This mapping forces popover to try the four available positions before going back to the initial chosen one.\nconst fallbackPlacements = {\n  [Position.TOP]: [Position.BOTTOM, Position.RIGHT, Position.LEFT],\n  [Position.BOTTOM]: [Position.TOP, Position.RIGHT, Position.LEFT],\n  [Position.LEFT]: [Position.RIGHT, Position.TOP, Position.BOTTOM],\n  [Position.RIGHT]: [Position.LEFT, Position.TOP, Position.BOTTOM],\n};\n\nexport type PanelProps = PropsWithChildren<{\n  arrow?: boolean;\n  flip?: boolean;\n  altAxis?: boolean;\n  open?: boolean;\n  onClose?: (event: Event | SyntheticEvent) => void;\n  position?: PositionBottom | PositionLeft | PositionRight | PositionTop;\n  anchorRef: MutableRefObject<Element | null>;\n  anchorWidth?: boolean;\n}> &\n  HTMLAttributes<HTMLDivElement>;\n\nconst Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(\n  {\n    arrow = false,\n    flip = true,\n    altAxis = false,\n    children,\n    open = false,\n    onClose,\n    position = Position.BOTTOM,\n    anchorRef,\n    anchorWidth = false,\n    ...rest\n  }: PanelProps,\n  reference,\n) {\n  const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null);\n  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);\n\n  const modifiers = [];\n\n  if (altAxis) {\n    modifiers.push({\n      // https://popper.js.org/docs/v2/modifiers/prevent-overflow\n      name: 'preventOverflow',\n      options: {\n        altAxis: true,\n        tether: false,\n      },\n    });\n  }\n\n  if (arrow) {\n    modifiers.push({\n      name: 'arrow',\n      options: {\n        element: arrowElement,\n        options: {\n          padding: 8, // 8px from the edges of the popper\n        },\n      },\n    });\n    // This lets you displace a popper element from its reference element.\n    modifiers.push({ name: 'offset', options: { offset: POPOVER_OFFSET } });\n  }\n  if (flip && fallbackPlacements[position]) {\n    modifiers.push({\n      name: 'flip',\n      options: {\n        fallbackPlacements: fallbackPlacements[position],\n      },\n    });\n  }\n\n  const { styles, attributes, forceUpdate } = usePopper(anchorRef.current, popperElement, {\n    placement: position,\n    modifiers,\n  });\n\n  // If the trigger is not visible when the position is calculated, it will be incorrect. Because this can happen repeatedly (on resize for example),\n  // it is most simple just to always position before opening\n  useEffect(() => {\n    if (open && forceUpdate) {\n      forceUpdate();\n    }\n  }, [open]);\n\n  const contentStyle: CSSProperties = {\n    ...(anchorWidth ? { width: anchorRef.current?.clientWidth } : undefined),\n  };\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return (\n    <Dimmer open={open} transparent fadeContentOnEnter fadeContentOnExit onClose={onClose}>\n      <div\n        id={overlayId}\n        {...rest}\n        ref={setPopperElement}\n        role=\"dialog\"\n        // eslint-disable-next-line react/forbid-dom-props\n        style={{ ...styles.popper }}\n        {...attributes.popper}\n        className={clsx('np-panel', { 'np-panel--open': open }, rest.className)}\n      >\n        <div\n          ref={reference}\n          /* eslint-disable-next-line react/forbid-dom-props */\n          style={contentStyle}\n          className={clsx('np-panel__content')}\n        >\n          {children}\n          {/* Arrow has to stay inside content to get the same animations as the \"dialog\" and to get hidden when panel is closed. */}\n          {arrow && (\n            <div\n              ref={setArrowElement}\n              className={clsx('np-panel__arrow')}\n              // eslint-disable-next-line react/forbid-dom-props\n              style={styles.arrow}\n            />\n          )}\n        </div>\n      </div>\n    </Dimmer>\n  );\n});\n\nexport default Panel;\n"],"names":["POPOVER_OFFSET","fallbackPlacements","Position","TOP","BOTTOM","RIGHT","LEFT","Panel","forwardRef","arrow","flip","altAxis","children","open","onClose","position","anchorRef","anchorWidth","rest","reference","arrowElement","setArrowElement","useState","popperElement","setPopperElement","modifiers","push","name","options","tether","element","padding","offset","styles","attributes","forceUpdate","usePopper","current","placement","useEffect","contentStyle","width","clientWidth","undefined","overlayId","useContext","OverlayIdContext","_jsx","Dimmer","transparent","fadeContentOnEnter","fadeContentOnExit","id","ref","role","style","popper","className","clsx","_jsxs"],"mappings":";;;;;;;;AAkBA,MAAMA,cAAc,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,CAAA;AAE9B;AACA;AACA;AACA,MAAMC,kBAAkB,GAAG;AACzB,EAAA,CAACC,QAAQ,CAACC,GAAG,GAAG,CAACD,QAAQ,CAACE,MAAM,EAAEF,QAAQ,CAACG,KAAK,EAAEH,QAAQ,CAACI,IAAI,CAAC;AAChE,EAAA,CAACJ,QAAQ,CAACE,MAAM,GAAG,CAACF,QAAQ,CAACC,GAAG,EAAED,QAAQ,CAACG,KAAK,EAAEH,QAAQ,CAACI,IAAI,CAAC;AAChE,EAAA,CAACJ,QAAQ,CAACI,IAAI,GAAG,CAACJ,QAAQ,CAACG,KAAK,EAAEH,QAAQ,CAACC,GAAG,EAAED,QAAQ,CAACE,MAAM,CAAC;AAChE,EAAA,CAACF,QAAQ,CAACG,KAAK,GAAG,CAACH,QAAQ,CAACI,IAAI,EAAEJ,QAAQ,CAACC,GAAG,EAAED,QAAQ,CAACE,MAAM,CAAA;CAChE,CAAA;AAcD,MAAMG,KAAK,gBAAGC,UAAU,CAA6B,SAASD,KAAKA,CACjE;AACEE,EAAAA,KAAK,GAAG,KAAK;AACbC,EAAAA,IAAI,GAAG,IAAI;AACXC,EAAAA,OAAO,GAAG,KAAK;EACfC,QAAQ;AACRC,EAAAA,IAAI,GAAG,KAAK;EACZC,OAAO;EACPC,QAAQ,GAAGb,QAAQ,CAACE,MAAM;EAC1BY,SAAS;AACTC,EAAAA,WAAW,GAAG,KAAK;EACnB,GAAGC,IAAAA;AAAI,CACI,EACbC,SAAS,EAAA;EAET,MAAM,CAACC,YAAY,EAAEC,eAAe,CAAC,GAAGC,QAAQ,CAAwB,IAAI,CAAC,CAAA;EAC7E,MAAM,CAACC,aAAa,EAAEC,gBAAgB,CAAC,GAAGF,QAAQ,CAAwB,IAAI,CAAC,CAAA;EAE/E,MAAMG,SAAS,GAAG,EAAE,CAAA;AAEpB,EAAA,IAAId,OAAO,EAAE;IACXc,SAAS,CAACC,IAAI,CAAC;AACb;AACAC,MAAAA,IAAI,EAAE,iBAAiB;AACvBC,MAAAA,OAAO,EAAE;AACPjB,QAAAA,OAAO,EAAE,IAAI;AACbkB,QAAAA,MAAM,EAAE,KAAA;AACT,OAAA;AACF,KAAA,CAAC,CAAA;AACJ,GAAA;AAEA,EAAA,IAAIpB,KAAK,EAAE;IACTgB,SAAS,CAACC,IAAI,CAAC;AACbC,MAAAA,IAAI,EAAE,OAAO;AACbC,MAAAA,OAAO,EAAE;AACPE,QAAAA,OAAO,EAAEV,YAAY;AACrBQ,QAAAA,OAAO,EAAE;UACPG,OAAO,EAAE,CAAC;AACX,SAAA;AACF,OAAA;AACF,KAAA,CAAC,CAAA;AACF;IACAN,SAAS,CAACC,IAAI,CAAC;AAAEC,MAAAA,IAAI,EAAE,QAAQ;AAAEC,MAAAA,OAAO,EAAE;AAAEI,QAAAA,MAAM,EAAEhC,cAAAA;AAAgB,OAAA;AAAA,KAAE,CAAC,CAAA;AACzE,GAAA;AACA,EAAA,IAAIU,IAAI,IAAIT,kBAAkB,CAACc,QAAQ,CAAC,EAAE;IACxCU,SAAS,CAACC,IAAI,CAAC;AACbC,MAAAA,IAAI,EAAE,MAAM;AACZC,MAAAA,OAAO,EAAE;QACP3B,kBAAkB,EAAEA,kBAAkB,CAACc,QAAQ,CAAA;AAChD,OAAA;AACF,KAAA,CAAC,CAAA;AACJ,GAAA;EAEA,MAAM;IAAEkB,MAAM;IAAEC,UAAU;AAAEC,IAAAA,WAAAA;GAAa,GAAGC,SAAS,CAACpB,SAAS,CAACqB,OAAO,EAAEd,aAAa,EAAE;AACtFe,IAAAA,SAAS,EAAEvB,QAAQ;AACnBU,IAAAA,SAAAA;AACD,GAAA,CAAC,CAAA;AAEF;AACA;AACAc,EAAAA,SAAS,CAAC,MAAK;IACb,IAAI1B,IAAI,IAAIsB,WAAW,EAAE;AACvBA,MAAAA,WAAW,EAAE,CAAA;AACf,KAAA;AACF,GAAC,EAAE,CAACtB,IAAI,CAAC,CAAC,CAAA;AAEV,EAAA,MAAM2B,YAAY,GAAkB;AAClC,IAAA,IAAIvB,WAAW,GAAG;AAAEwB,MAAAA,KAAK,EAAEzB,SAAS,CAACqB,OAAO,EAAEK,WAAAA;AAAW,KAAE,GAAGC,SAAS,CAAA;GACxE,CAAA;AAED,EAAA,MAAMC,SAAS,GAAGC,UAAU,CAACC,gBAAgB,CAAC,CAAA;EAE9C,oBACEC,GAAA,CAACC,MAAM,EAAA;AAACnC,IAAAA,IAAI,EAAEA,IAAK;IAACoC,WAAW,EAAA,IAAA;IAACC,kBAAkB,EAAA,IAAA;IAACC,iBAAiB,EAAA,IAAA;AAACrC,IAAAA,OAAO,EAAEA,OAAQ;AAAAF,IAAAA,QAAA,eACpFmC,GAAA,CAAA,KAAA,EAAA;AACEK,MAAAA,EAAE,EAAER,SAAU;AAAA,MAAA,GACV1B,IAAI;AACRmC,MAAAA,GAAG,EAAE7B,gBAAiB;AACtB8B,MAAAA,IAAI,EAAC,QAAA;AACL;AAAA;AACAC,MAAAA,KAAK,EAAE;AAAE,QAAA,GAAGtB,MAAM,CAACuB,MAAAA;OAAS;MAAA,GACxBtB,UAAU,CAACsB,MAAM;AACrBC,MAAAA,SAAS,EAAEC,IAAI,CAAC,UAAU,EAAE;AAAE,QAAA,gBAAgB,EAAE7C,IAAAA;AAAI,OAAE,EAAEK,IAAI,CAACuC,SAAS,CAAE;AAAA7C,MAAAA,QAAA,eAExE+C,IAAA,CAAA,KAAA,EAAA;AACEN,QAAAA,GAAG,EAAElC,SAAAA;AACL;AACAoC,QAAAA,KAAK,EAAEf,YAAa;AACpBiB,QAAAA,SAAS,EAAEC,IAAI,CAAC,mBAAmB,CAAE;AAAA9C,QAAAA,QAAA,EAEpCA,CAAAA,QAAQ,EAERH,KAAK,iBACJsC,GAAA,CAAA,KAAA,EAAA;AACEM,UAAAA,GAAG,EAAEhC,eAAgB;UACrBoC,SAAS,EAAEC,IAAI,CAAC,iBAAiB,CAAA;AACjC;AAAA;UACAH,KAAK,EAAEtB,MAAM,CAACxB,KAAAA;AAAM,SAAA,CAEvB,CAAA;OACE,CAAA;KACF,CAAA;AACP,GAAQ,CAAC,CAAA;AAEb,CAAC;;;;"}
+{"version":3,"file":"Panel.mjs","sources":["../../../src/common/panel/Panel.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport {\n  CSSProperties,\n  HTMLAttributes,\n  MutableRefObject,\n  PropsWithChildren,\n  SyntheticEvent,\n  forwardRef,\n  useContext,\n  useEffect,\n  useState,\n} from 'react';\nimport { usePopper } from 'react-popper';\n\nimport { Position, PositionBottom, PositionLeft, PositionRight, PositionTop } from '..';\nimport Dimmer from '../../dimmer';\nimport { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';\n\nconst POPOVER_OFFSET = [0, 16];\n\n// By default the flip positioning explores only the opposite alternative. So if left is passed and there's no enough space\n// the right one gets chosen. If there's no space on both sides popover goes back to the initially chosen one left.\n// This mapping forces popover to try the four available positions before going back to the initial chosen one.\nconst fallbackPlacements = {\n  [Position.TOP]: [Position.BOTTOM, Position.RIGHT, Position.LEFT],\n  [Position.BOTTOM]: [Position.TOP, Position.RIGHT, Position.LEFT],\n  [Position.LEFT]: [Position.RIGHT, Position.TOP, Position.BOTTOM],\n  [Position.RIGHT]: [Position.LEFT, Position.TOP, Position.BOTTOM],\n};\n\nexport type PanelProps = PropsWithChildren<{\n  arrow?: boolean;\n  flip?: boolean;\n  altAxis?: boolean;\n  open?: boolean;\n  onClose?: (event: Event | SyntheticEvent) => void;\n  position?: PositionBottom | PositionLeft | PositionRight | PositionTop;\n  anchorRef: MutableRefObject<Element | null>;\n  anchorWidth?: boolean;\n}> &\n  HTMLAttributes<HTMLDivElement>;\n\nconst Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(\n  {\n    arrow = false,\n    flip = true,\n    altAxis = false,\n    children,\n    open = false,\n    onClose,\n    position = Position.BOTTOM,\n    anchorRef,\n    anchorWidth = false,\n    ...rest\n  }: PanelProps,\n  reference,\n) {\n  const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null);\n  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);\n\n  const modifiers = [];\n\n  if (altAxis) {\n    modifiers.push({\n      // https://popper.js.org/docs/v2/modifiers/prevent-overflow\n      name: 'preventOverflow',\n      options: {\n        altAxis: true,\n        tether: false,\n      },\n    });\n  }\n\n  if (arrow) {\n    modifiers.push({\n      name: 'arrow',\n      options: {\n        element: arrowElement,\n        options: {\n          padding: 8, // 8px from the edges of the popper\n        },\n      },\n    });\n    // This lets you displace a popper element from its reference element.\n    modifiers.push({ name: 'offset', options: { offset: POPOVER_OFFSET } });\n  }\n  if (flip && fallbackPlacements[position]) {\n    modifiers.push({\n      name: 'flip',\n      options: {\n        fallbackPlacements: fallbackPlacements[position],\n      },\n    });\n  }\n\n  const { styles, attributes, forceUpdate } = usePopper(anchorRef.current, popperElement, {\n    placement: position,\n    modifiers,\n  });\n\n  // If the trigger is not visible when the position is calculated, it will be incorrect. Because this can happen repeatedly (on resize for example),\n  // it is most simple just to always position before opening\n  useEffect(() => {\n    if (open && forceUpdate) {\n      forceUpdate();\n    }\n  }, [open]);\n\n  const contentStyle: CSSProperties = {\n    ...(anchorWidth ? { width: anchorRef.current?.clientWidth } : undefined),\n  };\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return (\n    <Dimmer open={open} transparent fadeContentOnEnter fadeContentOnExit onClose={onClose}>\n      <div\n        id={overlayId}\n        {...rest}\n        ref={setPopperElement}\n        role=\"dialog\"\n        // eslint-disable-next-line react/forbid-dom-props\n        style={{ ...styles.popper }}\n        {...attributes.popper}\n        className={clsx('np-panel', { 'np-panel--open': open }, rest.className)}\n      >\n        <div\n          ref={reference}\n          /* eslint-disable-next-line react/forbid-dom-props */\n          style={contentStyle}\n          className={clsx('np-panel__content')}\n        >\n          {children}\n          {/* Arrow has to stay inside content to get the same animations as the \"dialog\" and to get hidden when panel is closed. */}\n          {arrow && (\n            <div\n              ref={setArrowElement}\n              className={clsx('np-panel__arrow')}\n              // eslint-disable-next-line react/forbid-dom-props\n              style={styles.arrow}\n            />\n          )}\n        </div>\n      </div>\n    </Dimmer>\n  );\n});\n\nexport default Panel;\n"],"names":["POPOVER_OFFSET","fallbackPlacements","Position","TOP","BOTTOM","RIGHT","LEFT","Panel","forwardRef","arrow","flip","altAxis","children","open","onClose","position","anchorRef","anchorWidth","rest","reference","arrowElement","setArrowElement","useState","popperElement","setPopperElement","modifiers","push","name","options","tether","element","padding","offset","styles","attributes","forceUpdate","usePopper","current","placement","useEffect","contentStyle","width","clientWidth","undefined","overlayId","useContext","OverlayIdContext","_jsx","Dimmer","transparent","fadeContentOnEnter","fadeContentOnExit","id","ref","role","style","popper","className","clsx","_jsxs"],"mappings":"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"}

package/build/select/Select.js

@@ -2,6 +2,7 @@
 
 var componentsTheming = require('@wise/components-theming');
 var clsx = require('clsx');
+var PropTypes = require('prop-types');
 var React = require('react');
 var reactIntl = require('react-intl');
 var Button = require('../button/Button.js');
@@ -13,11 +14,15 @@ var Drawer = require('../drawer/Drawer.js');
 var contexts = require('../inputs/contexts.js');
 var Select_messages = require('./Select.messages.js');
 var Option = require('./option/Option.js');
-var SearchBox = require('./searchBox/SearchBox.js');
 var jsxRuntime = require('react/jsx-runtime');
 var useLayout = require('../common/hooks/useLayout/useLayout.js');
+var SearchBox = require('./searchBox/SearchBox.js');
 var position = require('../common/propsValues/position.js');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+
 const DEFAULT_SEARCH_VALUE = '';
 const DEFAULT_OPTIONS_PAGE_SIZE = 1000;
 const includesString = (string1, string2) => string1.toLowerCase().includes(string2.toLowerCase());
@@ -32,7 +37,7 @@ function defaultFilterFunction(option, searchValue) {
     currency,
     searchStrings
   } = option;
-  return typeof label === 'string' && includesString(label, searchValue) || typeof note === 'string' && includesString(note, searchValue) || typeof secondary === 'string' && includesString(secondary, searchValue) || !!currency && includesString(currency, searchValue) || !!searchStrings && searchStrings.some(string => includesString(string, searchValue));
+  return !!label && includesString(label, searchValue) || !!note && includesString(note, searchValue) || !!secondary && includesString(secondary, searchValue) || !!currency && includesString(currency, searchValue) || !!searchStrings && searchStrings.some(string => includesString(string, searchValue));
 }
 function isActionableOption(option) {
   return !option.header && !option.separator && !option.disabled;
@@ -46,6 +51,7 @@ function isSeparatorOption(option) {
 function clamp(from, to, value) {
   return Math.max(Math.min(to, value), from);
 }
+
 /**
  * No option or placeholder option is selected
  */
@@ -56,15 +62,14 @@ function isPlaceholderOption(option) {
 function isSearchableOption(option) {
   return !isHeaderOption(option) && !isSeparatorOption(option) && !isPlaceholderOption(option);
 }
-const getUniqueIdForOption = (parentId, option) => {
+const getUniqueIdForOption = (parentId = '', option) => {
   if (option == null) {
     return undefined;
   }
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-  const uniqueOptionId = option.value || (typeof option.label === 'string' ? option.label.replace(/\s/g, '') : '');
-  return `option-${parentId ?? ''}-${uniqueOptionId}`;
+  const uniqueOptionId = option.value || (option.label?.replace(/\s/g, '') ?? '');
+  return `option-${parentId}-${uniqueOptionId}`;
 };
-const defaultClassNames = {};
+
 /**
  * @deprecated Use `SelectInput` instead (https://neptune.wise.design/blog/2023-11-28-adopting-our-new-selectinput)
  */
@@ -75,8 +80,8 @@ function Select({
   disabled,
   inverse,
   dropdownWidth,
-  size = 'md',
-  block = true,
+  size,
+  block,
   selected,
   search,
   onChange,
@@ -84,9 +89,10 @@ function Select({
   onBlur,
   options: defaultOptions,
   onSearchChange,
-  searchValue: initSearchValue = '',
+  searchValue: initSearchValue,
   searchPlaceholder,
-  classNames: classNamesProp = defaultClassNames,
+  // eslint-disable-next-line unicorn/prevent-abbreviations
+  classNames: classNamesProp,
   dropdownUp,
   dropdownProps,
   buttonProps
@@ -101,9 +107,9 @@ function Select({
   const s = className => classNamesProp[className] || className;
   const [open, setOpen] = React.useState(false);
   const [searchValue, setSearchValue] = React.useState(DEFAULT_SEARCH_VALUE);
-  const [keyboardFocusedOptionIndex, setKeyboardFocusedOptionIndex] = React.useState(-1);
-  const keyboardFocusedReference = React.useRef(null);
-  const previousKeyboardFocusedOptionIndex = React.useRef(-1);
+  const [keyboardFocusedOptionIndex, setKeyboardFocusedOptionIndex] = React.useState(null);
+  const keyboardFocusedReference = React.useRef();
+  const previousKeyboardFocusedOptionIndex = React.useRef();
   const [numberOfOptionsShown, setNumberOfOptionsShown] = React.useState(DEFAULT_OPTIONS_PAGE_SIZE);
   const searchBoxReference = React.useRef(null);
   const selectReference = React.useRef(null);
@@ -132,7 +138,7 @@ function Select({
     isMobile
   } = useLayout.useLayout();
   React.useEffect(() => {
-    let cancelled = false;
+    let cancelled;
     if (keyboardFocusedOptionIndex >= 0) {
       requestAnimationFrame(() => {
         if (!cancelled) {
@@ -159,7 +165,9 @@ function Select({
     }
   };
   const handleOnFocus = event => {
-    onFocus?.(event);
+    if (onFocus) {
+      onFocus(event);
+    }
   };
   const handleOnBlur = event => {
     const {
@@ -168,16 +176,20 @@ function Select({
     if (nativeEvent) {
       const elementReceivingFocus = nativeEvent.relatedTarget;
       const select = event.currentTarget;
-      if (select && elementReceivingFocus instanceof Node && select.contains(elementReceivingFocus)) {
+      if (select && elementReceivingFocus && select.contains(elementReceivingFocus)) {
         return;
       }
     }
-    onBlur?.(event);
+    if (onBlur) {
+      onBlur(event);
+    }
   };
   const handleSearchChange = event => {
     setNumberOfOptionsShown(DEFAULT_OPTIONS_PAGE_SIZE);
     setSearchValue(event.target.value);
-    onSearchChange?.(event.target.value);
+    if (onSearchChange) {
+      onSearchChange(event.target.value);
+    }
   };
   const handleKeyDown = event => {
     switch (event.key) {
@@ -220,24 +232,24 @@ function Select({
     }
   };
   function selectKeyboardFocusedOption() {
-    if (keyboardFocusedOptionIndex >= 0 && selectableOptions.length > 0) {
+    if (keyboardFocusedOptionIndex != null && selectableOptions.length > 0) {
       selectOption(selectableOptions[keyboardFocusedOptionIndex]);
     }
   }
   function moveFocusWithDifference(difference) {
     const selectedOptionIndex = selectableOptions.reduce((optionIndex, current, index) => {
-      if (optionIndex >= 0) {
+      if (optionIndex != null) {
         return optionIndex;
       }
       if (isOptionSelected(selected, current)) {
         return index;
       }
-      return -1;
-    }, -1);
-    const previousFocusedIndex = previousKeyboardFocusedOptionIndex.current;
+      return null;
+    }, null);
+    const previousFocusedIndex = previousKeyboardFocusedOptionIndex.current ?? -1;
     let indexToStartMovingFrom = previousFocusedIndex;
-    if (previousFocusedIndex < 0) {
-      if (selectedOptionIndex < 0) {
+    if (previousFocusedIndex === -1) {
+      if (selectedOptionIndex == null) {
         setKeyboardFocusedOptionIndex(0);
       } else {
         indexToStartMovingFrom = selectedOptionIndex;
@@ -253,18 +265,18 @@ function Select({
         if (isSearchEnabled && searchBoxReference.current) {
           searchBoxReference.current.focus();
         }
-        if (!isSearchEnabled && optionsListReference.current && previousKeyboardFocusedOptionIndex.current < 0) {
+        if (!isSearchEnabled && optionsListReference.current && (previousKeyboardFocusedOptionIndex.current == null || Number.isNaN(previousKeyboardFocusedOptionIndex.current))) {
           optionsListReference.current.focus();
         }
       }
       previousKeyboardFocusedOptionIndex.current = keyboardFocusedOptionIndex;
     } else {
-      previousKeyboardFocusedOptionIndex.current = -1;
+      previousKeyboardFocusedOptionIndex.current = null;
     }
   }, [open, searchValue, isSearchEnabled, isMobile, keyboardFocusedOptionIndex]);
   const handleCloseOptions = () => {
     setOpen(false);
-    setKeyboardFocusedOptionIndex(-1);
+    setKeyboardFocusedOptionIndex(null);
     if (dropdownButtonReference.current) {
       dropdownButtonReference.current.focus();
     }
@@ -280,7 +292,7 @@ function Select({
     handleCloseOptions();
   }
   function renderOptionsList({
-    className = ''
+    className
   } = {}) {
     const dropdownClass = clsx.clsx(s('np-dropdown-menu'), {
       [s('np-dropdown-menu-desktop')]: !isMobile,
@@ -292,8 +304,8 @@ function Select({
       id: listboxId,
       role: "listbox",
       "aria-orientation": "vertical",
-      "aria-activedescendant": getUniqueIdForOption(id, selected ?? null),
-      tabIndex: -1,
+      "aria-activedescendant": getUniqueIdForOption(id, selected),
+      tabIndex: "-1",
       className: dropdownClass,
       ...dropdownProps,
       children: [showPlaceholder && /*#__PURE__*/jsxRuntime.jsx(PlaceHolderOption, {}), isSearchEnabled && /*#__PURE__*/jsxRuntime.jsx(SearchBox, {
@@ -343,6 +355,7 @@ function Select({
       })
     );
   }
+
   // eslint-disable-next-line react/prop-types
   function SeparatorOption() {
     return /*#__PURE__*/jsxRuntime.jsx("li", {
@@ -350,6 +363,7 @@ function Select({
       "aria-hidden": true
     });
   }
+
   // eslint-disable-next-line react/prop-types
   function HeaderOption({
     children
@@ -393,15 +407,13 @@ function Select({
         "aria-selected": isActive,
         "aria-disabled": option.disabled,
         role: "option",
-        tabIndex: -1,
+        tabIndex: "-1",
         className: className,
         onClick: handleOnClick,
         onKeyPress: handleOnClick,
         children: /*#__PURE__*/jsxRuntime.jsx("a", {
           disabled: selectOption.disabled,
           children: /*#__PURE__*/jsxRuntime.jsx(Option, {
-            label: undefined,
-            value: undefined,
             ...selectOption,
             classNames: classNamesProp
           })
@@ -419,11 +431,11 @@ function Select({
   }
   const hasActiveOptions = !!defaultOptions.length;
   if (open && (initSearchValue || searchValue)) {
-    if (hasActiveOptions && keyboardFocusedOptionIndex < 0) {
+    if (hasActiveOptions && keyboardFocusedOptionIndex == null) {
       setKeyboardFocusedOptionIndex(0);
     }
-    if (!hasActiveOptions && keyboardFocusedOptionIndex >= 0) {
-      setKeyboardFocusedOptionIndex(-1);
+    if (!hasActiveOptions && keyboardFocusedOptionIndex != null) {
+      setKeyboardFocusedOptionIndex(null);
     }
   }
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
@@ -444,15 +456,14 @@ function Select({
       className: clsx.clsx(s('np-dropdown-toggle'), s('np-text-body-large'), inverse ? s('np-dropdown-toggle-navy') : null)
       // reset Button's styles
       ,
-      type: undefined,
-      priority: undefined,
+      type: null,
+      priority: null,
       disabled: disabled,
       "aria-controls": listboxId,
       "aria-expanded": open,
       onClick: handleOnClick,
       ...buttonProps,
       children: [selected ? /*#__PURE__*/jsxRuntime.jsx(Option, {
-        label: undefined,
         ...selected,
         classNames: classNamesProp,
         selected: true
@@ -489,6 +500,79 @@ function Select({
     })]
   });
 }
+Select.propTypes = {
+  placeholder: PropTypes__default.default.string,
+  id: PropTypes__default.default.string,
+  required: PropTypes__default.default.bool,
+  disabled: PropTypes__default.default.bool,
+  inverse: PropTypes__default.default.bool,
+  dropdownRight: PropTypes__default.default.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
+  dropdownWidth: PropTypes__default.default.oneOf(['sm', 'md', 'lg']),
+  size: PropTypes__default.default.oneOf(['sm', 'md', 'lg']),
+  block: PropTypes__default.default.bool,
+  selected: PropTypes__default.default.shape({
+    value: PropTypes__default.default.any.isRequired,
+    label: PropTypes__default.default.node,
+    icon: PropTypes__default.default.node,
+    currency: PropTypes__default.default.string,
+    note: PropTypes__default.default.node,
+    secondary: PropTypes__default.default.node
+  }),
+  /**
+   * Search toggle
+   * if `true` default search functionality being enabled (not case sensitive search in option labels & currency props)
+   * if `function` you can define your own search function to implement custom search experience. This search function used while filtering the options array. The custom search function takes two parameters. First is the option the second is the keyword.
+   */
+  search: PropTypes__default.default.oneOfType([PropTypes__default.default.bool, PropTypes__default.default.func]),
+  options: PropTypes__default.default.arrayOf(PropTypes__default.default.shape({
+    value: PropTypes__default.default.any,
+    label: PropTypes__default.default.node,
+    header: PropTypes__default.default.node,
+    icon: PropTypes__default.default.node,
+    currency: PropTypes__default.default.string,
+    note: PropTypes__default.default.node,
+    secondary: PropTypes__default.default.node,
+    separator: PropTypes__default.default.bool,
+    disabled: PropTypes__default.default.bool,
+    searchStrings: PropTypes__default.default.arrayOf(PropTypes__default.default.string)
+  })).isRequired,
+  searchValue: PropTypes__default.default.string,
+  searchPlaceholder: PropTypes__default.default.string,
+  classNames: PropTypes__default.default.objectOf(PropTypes__default.default.string),
+  dropdownUp: PropTypes__default.default.bool,
+  buttonProps: PropTypes__default.default.object,
+  dropdownProps: PropTypes__default.default.object,
+  onChange: PropTypes__default.default.func.isRequired,
+  onFocus: PropTypes__default.default.func,
+  onBlur: PropTypes__default.default.func,
+  /**
+   * To have full control of your search value and response use `onSearchChange` function combined with `searchValue` and custom filtering on the options array.
+   * DO NOT USE TOGETHER WITH `search` PROPERTY
+   */
+  onSearchChange: PropTypes__default.default.func
+};
+Select.defaultProps = {
+  id: undefined,
+  placeholder: undefined,
+  size: 'md',
+  dropdownRight: null,
+  dropdownWidth: null,
+  inverse: false,
+  required: false,
+  disabled: false,
+  block: true,
+  selected: null,
+  onFocus: null,
+  onBlur: null,
+  onSearchChange: undefined,
+  search: false,
+  searchValue: '',
+  searchPlaceholder: undefined,
+  classNames: {},
+  dropdownUp: false,
+  buttonProps: {},
+  dropdownProps: {}
+};
 
 module.exports = Select;
 //# sourceMappingURL=Select.js.map