@transferwise/components 46.54.1 → 46.56.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (50) hide show
  1. package/README.md +0 -8
  2. package/build/button/Button.js.map +1 -1
  3. package/build/button/Button.mjs.map +1 -1
  4. package/build/common/panel/Panel.js +1 -2
  5. package/build/common/panel/Panel.js.map +1 -1
  6. package/build/common/panel/Panel.mjs +1 -2
  7. package/build/common/panel/Panel.mjs.map +1 -1
  8. package/build/select/Select.js +39 -123
  9. package/build/select/Select.js.map +1 -1
  10. package/build/select/Select.mjs +39 -119
  11. package/build/select/Select.mjs.map +1 -1
  12. package/build/snackbar/Snackbar.js +2 -1
  13. package/build/snackbar/Snackbar.js.map +1 -1
  14. package/build/snackbar/Snackbar.mjs +2 -1
  15. package/build/snackbar/Snackbar.mjs.map +1 -1
  16. package/build/types/button/Button.d.ts +2 -2
  17. package/build/types/button/Button.d.ts.map +1 -1
  18. package/build/types/index.d.ts +1 -0
  19. package/build/types/index.d.ts.map +1 -1
  20. package/build/types/select/Select.d.ts +64 -94
  21. package/build/types/select/Select.d.ts.map +1 -1
  22. package/build/types/select/index.d.ts +2 -2
  23. package/build/types/select/index.d.ts.map +1 -1
  24. package/build/types/select/option/index.d.ts +1 -1
  25. package/build/types/select/option/index.d.ts.map +1 -1
  26. package/build/types/select/searchBox/index.d.ts +1 -1
  27. package/build/types/select/searchBox/index.d.ts.map +1 -1
  28. package/build/types/snackbar/Snackbar.d.ts.map +1 -1
  29. package/build/types/upload/steps/uploadImageStep/uploadImageStep.d.ts.map +1 -1
  30. package/build/upload/steps/uploadImageStep/uploadImageStep.js +2 -0
  31. package/build/upload/steps/uploadImageStep/uploadImageStep.js.map +1 -1
  32. package/build/upload/steps/uploadImageStep/uploadImageStep.mjs +2 -0
  33. package/build/upload/steps/uploadImageStep/uploadImageStep.mjs.map +1 -1
  34. package/package.json +3 -5
  35. package/src/button/Button.tsx +2 -2
  36. package/src/index.ts +6 -0
  37. package/src/select/{Select.spec.js → Select.spec.tsx} +8 -6
  38. package/src/select/{Select.js → Select.tsx} +135 -153
  39. package/src/select/index.ts +7 -0
  40. package/src/snackbar/Snackbar.tsx +7 -1
  41. package/src/upload/Upload.story.tsx +1 -0
  42. package/src/upload/steps/uploadImageStep/uploadImageStep.tsx +5 -1
  43. package/build/select/index.js +0 -8
  44. package/build/select/index.js.map +0 -1
  45. package/build/select/index.mjs +0 -6
  46. package/build/select/index.mjs.map +0 -1
  47. package/src/select/index.js +0 -3
  48. /package/src/select/option/{index.js → index.ts} +0 -0
  49. /package/src/select/searchBox/{SearchBox.spec.js → SearchBox.spec.tsx} +0 -0
  50. /package/src/select/searchBox/{index.js → index.ts} +0 -0
package/README.md CHANGED
@@ -40,14 +40,6 @@ export default function Hello() {
40
40
  }
41
41
  ```
42
42
 
43
- ### TypeScript | Type Declarations
44
-
45
- This package exposes [type declarations](https://www.typescriptlang.org/docs/handbook/2/type-declarations.html) for all components.
46
-
47
- 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.
48
-
49
- 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.
50
-
51
43
  ### Mocks for testing
52
44
 
53
45
  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:
@@ -1 +1 @@
1
- {"version":3,"file":"Button.js","sources":["../../src/button/Button.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { AnchorHTMLAttributes, ButtonHTMLAttributes, ElementType, forwardRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport {\n Size,\n ControlType,\n Priority,\n ControlTypeAccent,\n ControlTypeNegative,\n ControlTypePositive,\n PriorityPrimary,\n PrioritySecondary,\n PriorityTertiary,\n SizeExtraSmall,\n SizeSmall,\n SizeMedium,\n SizeLarge,\n} from '../common';\nimport ProcessIndicator from '../processIndicator';\n\nimport messages from './Button.messages';\nimport { typeClassMap, priorityClassMap } from './classMap';\nimport { establishNewPriority, establishNewType, logDeprecationNotices } from './legacyUtils';\n\n/** @deprecated */\ntype DeprecatedTypes = 'primary' | 'pay' | 'secondary' | 'danger' | 'link';\n\n/** @deprecated */\ntype DeprecatedSizes = SizeExtraSmall;\n\ntype CommonProps = {\n block?: boolean;\n disabled?: boolean;\n loading?: boolean;\n type?: ControlTypeAccent | ControlTypeNegative | ControlTypePositive | DeprecatedTypes;\n priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary;\n size?: SizeSmall | SizeMedium | SizeLarge | DeprecatedSizes;\n};\n\ntype ButtonProps = CommonProps &\n Omit<React.ComponentPropsWithRef<'button'>, 'type'> & {\n as?: 'button';\n htmlType?: 'submit' | 'reset' | 'button';\n };\n\ntype AnchorProps = CommonProps &\n React.ComponentPropsWithRef<'a'> & {\n as?: 'a';\n };\n\nexport type Props = ButtonProps | AnchorProps;\n\ntype ButtonReferenceType = HTMLButtonElement | HTMLAnchorElement;\n\nconst Button = forwardRef<ButtonReferenceType, Props>(\n (\n {\n as: component,\n block = false,\n children,\n className,\n disabled,\n loading = false,\n priority = Priority.PRIMARY,\n size = Size.MEDIUM,\n type = ControlType.ACCENT,\n ...rest\n }: Props,\n reference,\n ) => {\n const intl = useIntl();\n\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n logDeprecationNotices({ size, type });\n\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n const newType = establishNewType(type);\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n const newPriority = establishNewPriority(priority, type);\n\n const classes = clsx(\n `btn btn-${size}`,\n `np-btn np-btn-${size}`,\n {\n 'btn-loading': loading,\n 'btn-block np-btn-block': block,\n },\n {\n disabled: disabled || loading,\n },\n // @ts-expect-error fix when refactor `typeClassMap` to TypeScript\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n typeClassMap[newType],\n // @ts-expect-error fix when refactor `typeClassMap` to TypeScript\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n priorityClassMap[newPriority],\n className,\n );\n\n function processIndicatorSize() {\n return ['sm', 'xs'].includes(size) ? 'xxs' : 'xs';\n }\n\n const Element = (component as ElementType) ?? 'button';\n let props;\n\n if (Element === 'button') {\n const { htmlType = 'button', ...restProps } = rest as ButtonProps;\n props = {\n ...restProps,\n disabled: disabled || loading,\n type: htmlType,\n };\n } else {\n props = { ...rest } as AnchorProps;\n }\n\n return (\n <Element\n ref={reference}\n className={classes}\n {...props}\n aria-live={loading ? 'polite' : 'off'}\n aria-label={loading ? intl.formatMessage(messages.loadingAriaLabel) : rest['aria-label']}\n >\n {children}\n {loading && <ProcessIndicator size={processIndicatorSize()} className=\"btn-loader\" />}\n </Element>\n );\n },\n);\n\nexport default Button;\n"],"names":["Button","forwardRef","as","component","block","children","className","disabled","loading","priority","Priority","PRIMARY","size","Size","MEDIUM","type","ControlType","ACCENT","rest","reference","intl","useIntl","logDeprecationNotices","newType","establishNewType","newPriority","establishNewPriority","classes","clsx","typeClassMap","priorityClassMap","processIndicatorSize","includes","Element","props","htmlType","restProps","_jsxs","ref","formatMessage","messages","loadingAriaLabel","_jsx","ProcessIndicator"],"mappings":";;;;;;;;;;;;;AAuDA,MAAMA,MAAM,gBAAGC,gBAAU,CACvB,CACE;AACEC,EAAAA,EAAE,EAAEC,SAAS;AACbC,EAAAA,KAAK,GAAG,KAAK;EACbC,QAAQ;EACRC,SAAS;EACTC,QAAQ;AACRC,EAAAA,OAAO,GAAG,KAAK;EACfC,QAAQ,GAAGC,gBAAQ,CAACC,OAAO;QAC3BC,MAAI,GAAGC,SAAI,CAACC,MAAM;EAClBC,IAAI,GAAGC,mBAAW,CAACC,MAAM;EACzB,GAAGC,IAAAA;AACG,CAAA,EACRC,SAAS,KACP;AACF,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE,CAAA;AAEtB;AACAC,EAAAA,iCAAqB,CAAC;UAAEV,MAAI;AAAEG,IAAAA,IAAAA;AAAI,GAAE,CAAC,CAAA;AAErC;AACA,EAAA,MAAMQ,OAAO,GAAGC,4BAAgB,CAACT,IAAI,CAAC,CAAA;AACtC;AACA,EAAA,MAAMU,WAAW,GAAGC,gCAAoB,CAACjB,QAAQ,EAAEM,IAAI,CAAC,CAAA;EAExD,MAAMY,OAAO,GAAGC,SAAI,CAClB,CAAA,QAAA,EAAWhB,MAAI,CAAA,CAAE,EACjB,CAAA,cAAA,EAAiBA,MAAI,CAAA,CAAE,EACvB;AACE,IAAA,aAAa,EAAEJ,OAAO;AACtB,IAAA,wBAAwB,EAAEJ,KAAAA;GAC3B,EACD;IACEG,QAAQ,EAAEA,QAAQ,IAAIC,OAAAA;GACvB;AACD;AACA;EACAqB,qBAAY,CAACN,OAAO,CAAC;AACrB;AACA;AACAO,EAAAA,yBAAgB,CAACL,WAAW,CAAC,EAC7BnB,SAAS,CACV,CAAA;EAED,SAASyB,oBAAoBA,GAAA;AAC3B,IAAA,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAACC,QAAQ,CAACpB,MAAI,CAAC,GAAG,KAAK,GAAG,IAAI,CAAA;AACnD,GAAA;AAEA,EAAA,MAAMqB,OAAO,GAAI9B,SAAyB,IAAI,QAAQ,CAAA;AACtD,EAAA,IAAI+B,KAAK,CAAA;EAET,IAAID,OAAO,KAAK,QAAQ,EAAE;IACxB,MAAM;AAAEE,MAAAA,QAAQ,GAAG,QAAQ;MAAE,GAAGC,SAAAA;AAAS,KAAE,GAAGlB,IAAmB,CAAA;AACjEgB,IAAAA,KAAK,GAAG;AACN,MAAA,GAAGE,SAAS;MACZ7B,QAAQ,EAAEA,QAAQ,IAAIC,OAAO;AAC7BO,MAAAA,IAAI,EAAEoB,QAAAA;KACP,CAAA;AACH,GAAC,MAAM;AACLD,IAAAA,KAAK,GAAG;MAAE,GAAGhB,IAAAA;KAAqB,CAAA;AACpC,GAAA;EAEA,oBACEmB,eAAA,CAACJ,OAAO,EAAA;AACNK,IAAAA,GAAG,EAAEnB,SAAU;AACfb,IAAAA,SAAS,EAAEqB,OAAQ;AAAA,IAAA,GACfO,KAAK;AACT,IAAA,WAAA,EAAW1B,OAAO,GAAG,QAAQ,GAAG,KAAM;AACtC,IAAA,YAAA,EAAYA,OAAO,GAAGY,IAAI,CAACmB,aAAa,CAACC,eAAQ,CAACC,gBAAgB,CAAC,GAAGvB,IAAI,CAAC,YAAY,CAAE;AAAAb,IAAAA,QAAA,GAExFA,QAAQ,EACRG,OAAO,iBAAIkC,cAAA,CAACC,gBAAgB,EAAA;MAAC/B,IAAI,EAAEmB,oBAAoB,EAAG;AAACzB,MAAAA,SAAS,EAAC,YAAA;AAAY,MAAG,CAAA;AAAA,GAC9E,CAAC,CAAA;AAEd,CAAC;;;;"}
1
+ {"version":3,"file":"Button.js","sources":["../../src/button/Button.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { AnchorHTMLAttributes, ButtonHTMLAttributes, ElementType, forwardRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport {\n Size,\n ControlType,\n Priority,\n ControlTypeAccent,\n ControlTypeNegative,\n ControlTypePositive,\n PriorityPrimary,\n PrioritySecondary,\n PriorityTertiary,\n SizeExtraSmall,\n SizeSmall,\n SizeMedium,\n SizeLarge,\n} from '../common';\nimport ProcessIndicator from '../processIndicator';\n\nimport messages from './Button.messages';\nimport { typeClassMap, priorityClassMap } from './classMap';\nimport { establishNewPriority, establishNewType, logDeprecationNotices } from './legacyUtils';\n\n/** @deprecated */\ntype DeprecatedTypes = 'primary' | 'pay' | 'secondary' | 'danger' | 'link';\n\n/** @deprecated */\ntype DeprecatedSizes = SizeExtraSmall;\n\ntype CommonProps = {\n block?: boolean;\n disabled?: boolean;\n loading?: boolean;\n type?: ControlTypeAccent | ControlTypeNegative | ControlTypePositive | DeprecatedTypes | null;\n priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary | null;\n size?: SizeSmall | SizeMedium | SizeLarge | DeprecatedSizes;\n};\n\ntype ButtonProps = CommonProps &\n Omit<React.ComponentPropsWithRef<'button'>, 'type'> & {\n as?: 'button';\n htmlType?: 'submit' | 'reset' | 'button';\n };\n\ntype AnchorProps = CommonProps &\n React.ComponentPropsWithRef<'a'> & {\n as?: 'a';\n };\n\nexport type Props = ButtonProps | AnchorProps;\n\ntype ButtonReferenceType = HTMLButtonElement | HTMLAnchorElement;\n\nconst Button = forwardRef<ButtonReferenceType, Props>(\n (\n {\n as: component,\n block = false,\n children,\n className,\n disabled,\n loading = false,\n priority = Priority.PRIMARY,\n size = Size.MEDIUM,\n type = ControlType.ACCENT,\n ...rest\n }: Props,\n reference,\n ) => {\n const intl = useIntl();\n\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n logDeprecationNotices({ size, type });\n\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n const newType = establishNewType(type);\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n const newPriority = establishNewPriority(priority, type);\n\n const classes = clsx(\n `btn btn-${size}`,\n `np-btn np-btn-${size}`,\n {\n 'btn-loading': loading,\n 'btn-block np-btn-block': block,\n },\n {\n disabled: disabled || loading,\n },\n // @ts-expect-error fix when refactor `typeClassMap` to TypeScript\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n typeClassMap[newType],\n // @ts-expect-error fix when refactor `typeClassMap` to TypeScript\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n priorityClassMap[newPriority],\n className,\n );\n\n function processIndicatorSize() {\n return ['sm', 'xs'].includes(size) ? 'xxs' : 'xs';\n }\n\n const Element = (component as ElementType) ?? 'button';\n let props;\n\n if (Element === 'button') {\n const { htmlType = 'button', ...restProps } = rest as ButtonProps;\n props = {\n ...restProps,\n disabled: disabled || loading,\n type: htmlType,\n };\n } else {\n props = { ...rest } as AnchorProps;\n }\n\n return (\n <Element\n ref={reference}\n className={classes}\n {...props}\n aria-live={loading ? 'polite' : 'off'}\n aria-label={loading ? intl.formatMessage(messages.loadingAriaLabel) : rest['aria-label']}\n >\n {children}\n {loading && <ProcessIndicator size={processIndicatorSize()} className=\"btn-loader\" />}\n </Element>\n );\n },\n);\n\nexport default Button;\n"],"names":["Button","forwardRef","as","component","block","children","className","disabled","loading","priority","Priority","PRIMARY","size","Size","MEDIUM","type","ControlType","ACCENT","rest","reference","intl","useIntl","logDeprecationNotices","newType","establishNewType","newPriority","establishNewPriority","classes","clsx","typeClassMap","priorityClassMap","processIndicatorSize","includes","Element","props","htmlType","restProps","_jsxs","ref","formatMessage","messages","loadingAriaLabel","_jsx","ProcessIndicator"],"mappings":";;;;;;;;;;;;;AAuDA,MAAMA,MAAM,gBAAGC,gBAAU,CACvB,CACE;AACEC,EAAAA,EAAE,EAAEC,SAAS;AACbC,EAAAA,KAAK,GAAG,KAAK;EACbC,QAAQ;EACRC,SAAS;EACTC,QAAQ;AACRC,EAAAA,OAAO,GAAG,KAAK;EACfC,QAAQ,GAAGC,gBAAQ,CAACC,OAAO;QAC3BC,MAAI,GAAGC,SAAI,CAACC,MAAM;EAClBC,IAAI,GAAGC,mBAAW,CAACC,MAAM;EACzB,GAAGC,IAAAA;AACG,CAAA,EACRC,SAAS,KACP;AACF,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE,CAAA;AAEtB;AACAC,EAAAA,iCAAqB,CAAC;UAAEV,MAAI;AAAEG,IAAAA,IAAAA;AAAI,GAAE,CAAC,CAAA;AAErC;AACA,EAAA,MAAMQ,OAAO,GAAGC,4BAAgB,CAACT,IAAI,CAAC,CAAA;AACtC;AACA,EAAA,MAAMU,WAAW,GAAGC,gCAAoB,CAACjB,QAAQ,EAAEM,IAAI,CAAC,CAAA;EAExD,MAAMY,OAAO,GAAGC,SAAI,CAClB,CAAA,QAAA,EAAWhB,MAAI,CAAA,CAAE,EACjB,CAAA,cAAA,EAAiBA,MAAI,CAAA,CAAE,EACvB;AACE,IAAA,aAAa,EAAEJ,OAAO;AACtB,IAAA,wBAAwB,EAAEJ,KAAAA;GAC3B,EACD;IACEG,QAAQ,EAAEA,QAAQ,IAAIC,OAAAA;GACvB;AACD;AACA;EACAqB,qBAAY,CAACN,OAAO,CAAC;AACrB;AACA;AACAO,EAAAA,yBAAgB,CAACL,WAAW,CAAC,EAC7BnB,SAAS,CACV,CAAA;EAED,SAASyB,oBAAoBA,GAAA;AAC3B,IAAA,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAACC,QAAQ,CAACpB,MAAI,CAAC,GAAG,KAAK,GAAG,IAAI,CAAA;AACnD,GAAA;AAEA,EAAA,MAAMqB,OAAO,GAAI9B,SAAyB,IAAI,QAAQ,CAAA;AACtD,EAAA,IAAI+B,KAAK,CAAA;EAET,IAAID,OAAO,KAAK,QAAQ,EAAE;IACxB,MAAM;AAAEE,MAAAA,QAAQ,GAAG,QAAQ;MAAE,GAAGC,SAAAA;AAAS,KAAE,GAAGlB,IAAmB,CAAA;AACjEgB,IAAAA,KAAK,GAAG;AACN,MAAA,GAAGE,SAAS;MACZ7B,QAAQ,EAAEA,QAAQ,IAAIC,OAAO;AAC7BO,MAAAA,IAAI,EAAEoB,QAAAA;KACP,CAAA;AACH,GAAC,MAAM;AACLD,IAAAA,KAAK,GAAG;MAAE,GAAGhB,IAAAA;KAAqB,CAAA;AACpC,GAAA;EAEA,oBACEmB,eAAA,CAACJ,OAAO,EAAA;AACNK,IAAAA,GAAG,EAAEnB,SAAU;AACfb,IAAAA,SAAS,EAAEqB,OAAQ;AAAA,IAAA,GACfO,KAAK;AACT,IAAA,WAAA,EAAW1B,OAAO,GAAG,QAAQ,GAAG,KAAM;AACtC,IAAA,YAAA,EAAYA,OAAO,GAAGY,IAAI,CAACmB,aAAa,CAACC,eAAQ,CAACC,gBAAgB,CAAC,GAAGvB,IAAI,CAAC,YAAY,CAAE;AAAAb,IAAAA,QAAA,GAExFA,QAAQ,EACRG,OAAO,iBAAIkC,cAAA,CAACC,gBAAgB,EAAA;MAAC/B,IAAI,EAAEmB,oBAAoB,EAAG;AAACzB,MAAAA,SAAS,EAAC,YAAA;AAAY,MAAG,CAAA;AAAA,GAC9E,CAAC,CAAA;AAEd,CAAC;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"Button.mjs","sources":["../../src/button/Button.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { AnchorHTMLAttributes, ButtonHTMLAttributes, ElementType, forwardRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport {\n Size,\n ControlType,\n Priority,\n ControlTypeAccent,\n ControlTypeNegative,\n ControlTypePositive,\n PriorityPrimary,\n PrioritySecondary,\n PriorityTertiary,\n SizeExtraSmall,\n SizeSmall,\n SizeMedium,\n SizeLarge,\n} from '../common';\nimport ProcessIndicator from '../processIndicator';\n\nimport messages from './Button.messages';\nimport { typeClassMap, priorityClassMap } from './classMap';\nimport { establishNewPriority, establishNewType, logDeprecationNotices } from './legacyUtils';\n\n/** @deprecated */\ntype DeprecatedTypes = 'primary' | 'pay' | 'secondary' | 'danger' | 'link';\n\n/** @deprecated */\ntype DeprecatedSizes = SizeExtraSmall;\n\ntype CommonProps = {\n block?: boolean;\n disabled?: boolean;\n loading?: boolean;\n type?: ControlTypeAccent | ControlTypeNegative | ControlTypePositive | DeprecatedTypes;\n priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary;\n size?: SizeSmall | SizeMedium | SizeLarge | DeprecatedSizes;\n};\n\ntype ButtonProps = CommonProps &\n Omit<React.ComponentPropsWithRef<'button'>, 'type'> & {\n as?: 'button';\n htmlType?: 'submit' | 'reset' | 'button';\n };\n\ntype AnchorProps = CommonProps &\n React.ComponentPropsWithRef<'a'> & {\n as?: 'a';\n };\n\nexport type Props = ButtonProps | AnchorProps;\n\ntype ButtonReferenceType = HTMLButtonElement | HTMLAnchorElement;\n\nconst Button = forwardRef<ButtonReferenceType, Props>(\n (\n {\n as: component,\n block = false,\n children,\n className,\n disabled,\n loading = false,\n priority = Priority.PRIMARY,\n size = Size.MEDIUM,\n type = ControlType.ACCENT,\n ...rest\n }: Props,\n reference,\n ) => {\n const intl = useIntl();\n\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n logDeprecationNotices({ size, type });\n\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n const newType = establishNewType(type);\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n const newPriority = establishNewPriority(priority, type);\n\n const classes = clsx(\n `btn btn-${size}`,\n `np-btn np-btn-${size}`,\n {\n 'btn-loading': loading,\n 'btn-block np-btn-block': block,\n },\n {\n disabled: disabled || loading,\n },\n // @ts-expect-error fix when refactor `typeClassMap` to TypeScript\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n typeClassMap[newType],\n // @ts-expect-error fix when refactor `typeClassMap` to TypeScript\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n priorityClassMap[newPriority],\n className,\n );\n\n function processIndicatorSize() {\n return ['sm', 'xs'].includes(size) ? 'xxs' : 'xs';\n }\n\n const Element = (component as ElementType) ?? 'button';\n let props;\n\n if (Element === 'button') {\n const { htmlType = 'button', ...restProps } = rest as ButtonProps;\n props = {\n ...restProps,\n disabled: disabled || loading,\n type: htmlType,\n };\n } else {\n props = { ...rest } as AnchorProps;\n }\n\n return (\n <Element\n ref={reference}\n className={classes}\n {...props}\n aria-live={loading ? 'polite' : 'off'}\n aria-label={loading ? intl.formatMessage(messages.loadingAriaLabel) : rest['aria-label']}\n >\n {children}\n {loading && <ProcessIndicator size={processIndicatorSize()} className=\"btn-loader\" />}\n </Element>\n );\n },\n);\n\nexport default Button;\n"],"names":["Button","forwardRef","as","component","block","children","className","disabled","loading","priority","Priority","PRIMARY","size","Size","MEDIUM","type","ControlType","ACCENT","rest","reference","intl","useIntl","logDeprecationNotices","newType","establishNewType","newPriority","establishNewPriority","classes","clsx","typeClassMap","priorityClassMap","processIndicatorSize","includes","Element","props","htmlType","restProps","_jsxs","ref","formatMessage","messages","loadingAriaLabel","_jsx","ProcessIndicator"],"mappings":";;;;;;;;;;;AAuDA,MAAMA,MAAM,gBAAGC,UAAU,CACvB,CACE;AACEC,EAAAA,EAAE,EAAEC,SAAS;AACbC,EAAAA,KAAK,GAAG,KAAK;EACbC,QAAQ;EACRC,SAAS;EACTC,QAAQ;AACRC,EAAAA,OAAO,GAAG,KAAK;EACfC,QAAQ,GAAGC,QAAQ,CAACC,OAAO;EAC3BC,IAAI,GAAGC,IAAI,CAACC,MAAM;EAClBC,IAAI,GAAGC,WAAW,CAACC,MAAM;EACzB,GAAGC,IAAAA;AACG,CAAA,EACRC,SAAS,KACP;AACF,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE,CAAA;AAEtB;AACAC,EAAAA,qBAAqB,CAAC;IAAEV,IAAI;AAAEG,IAAAA,IAAAA;AAAI,GAAE,CAAC,CAAA;AAErC;AACA,EAAA,MAAMQ,OAAO,GAAGC,gBAAgB,CAACT,IAAI,CAAC,CAAA;AACtC;AACA,EAAA,MAAMU,WAAW,GAAGC,oBAAoB,CAACjB,QAAQ,EAAEM,IAAI,CAAC,CAAA;EAExD,MAAMY,OAAO,GAAGC,IAAI,CAClB,CAAA,QAAA,EAAWhB,IAAI,CAAA,CAAE,EACjB,CAAA,cAAA,EAAiBA,IAAI,CAAA,CAAE,EACvB;AACE,IAAA,aAAa,EAAEJ,OAAO;AACtB,IAAA,wBAAwB,EAAEJ,KAAAA;GAC3B,EACD;IACEG,QAAQ,EAAEA,QAAQ,IAAIC,OAAAA;GACvB;AACD;AACA;EACAqB,YAAY,CAACN,OAAO,CAAC;AACrB;AACA;AACAO,EAAAA,gBAAgB,CAACL,WAAW,CAAC,EAC7BnB,SAAS,CACV,CAAA;EAED,SAASyB,oBAAoBA,GAAA;AAC3B,IAAA,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAACC,QAAQ,CAACpB,IAAI,CAAC,GAAG,KAAK,GAAG,IAAI,CAAA;AACnD,GAAA;AAEA,EAAA,MAAMqB,OAAO,GAAI9B,SAAyB,IAAI,QAAQ,CAAA;AACtD,EAAA,IAAI+B,KAAK,CAAA;EAET,IAAID,OAAO,KAAK,QAAQ,EAAE;IACxB,MAAM;AAAEE,MAAAA,QAAQ,GAAG,QAAQ;MAAE,GAAGC,SAAAA;AAAS,KAAE,GAAGlB,IAAmB,CAAA;AACjEgB,IAAAA,KAAK,GAAG;AACN,MAAA,GAAGE,SAAS;MACZ7B,QAAQ,EAAEA,QAAQ,IAAIC,OAAO;AAC7BO,MAAAA,IAAI,EAAEoB,QAAAA;KACP,CAAA;AACH,GAAC,MAAM;AACLD,IAAAA,KAAK,GAAG;MAAE,GAAGhB,IAAAA;KAAqB,CAAA;AACpC,GAAA;EAEA,oBACEmB,IAAA,CAACJ,OAAO,EAAA;AACNK,IAAAA,GAAG,EAAEnB,SAAU;AACfb,IAAAA,SAAS,EAAEqB,OAAQ;AAAA,IAAA,GACfO,KAAK;AACT,IAAA,WAAA,EAAW1B,OAAO,GAAG,QAAQ,GAAG,KAAM;AACtC,IAAA,YAAA,EAAYA,OAAO,GAAGY,IAAI,CAACmB,aAAa,CAACC,QAAQ,CAACC,gBAAgB,CAAC,GAAGvB,IAAI,CAAC,YAAY,CAAE;AAAAb,IAAAA,QAAA,GAExFA,QAAQ,EACRG,OAAO,iBAAIkC,GAAA,CAACC,gBAAgB,EAAA;MAAC/B,IAAI,EAAEmB,oBAAoB,EAAG;AAACzB,MAAAA,SAAS,EAAC,YAAA;AAAY,MAAG,CAAA;AAAA,GAC9E,CAAC,CAAA;AAEd,CAAC;;;;"}
1
+ {"version":3,"file":"Button.mjs","sources":["../../src/button/Button.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { AnchorHTMLAttributes, ButtonHTMLAttributes, ElementType, forwardRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport {\n Size,\n ControlType,\n Priority,\n ControlTypeAccent,\n ControlTypeNegative,\n ControlTypePositive,\n PriorityPrimary,\n PrioritySecondary,\n PriorityTertiary,\n SizeExtraSmall,\n SizeSmall,\n SizeMedium,\n SizeLarge,\n} from '../common';\nimport ProcessIndicator from '../processIndicator';\n\nimport messages from './Button.messages';\nimport { typeClassMap, priorityClassMap } from './classMap';\nimport { establishNewPriority, establishNewType, logDeprecationNotices } from './legacyUtils';\n\n/** @deprecated */\ntype DeprecatedTypes = 'primary' | 'pay' | 'secondary' | 'danger' | 'link';\n\n/** @deprecated */\ntype DeprecatedSizes = SizeExtraSmall;\n\ntype CommonProps = {\n block?: boolean;\n disabled?: boolean;\n loading?: boolean;\n type?: ControlTypeAccent | ControlTypeNegative | ControlTypePositive | DeprecatedTypes | null;\n priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary | null;\n size?: SizeSmall | SizeMedium | SizeLarge | DeprecatedSizes;\n};\n\ntype ButtonProps = CommonProps &\n Omit<React.ComponentPropsWithRef<'button'>, 'type'> & {\n as?: 'button';\n htmlType?: 'submit' | 'reset' | 'button';\n };\n\ntype AnchorProps = CommonProps &\n React.ComponentPropsWithRef<'a'> & {\n as?: 'a';\n };\n\nexport type Props = ButtonProps | AnchorProps;\n\ntype ButtonReferenceType = HTMLButtonElement | HTMLAnchorElement;\n\nconst Button = forwardRef<ButtonReferenceType, Props>(\n (\n {\n as: component,\n block = false,\n children,\n className,\n disabled,\n loading = false,\n priority = Priority.PRIMARY,\n size = Size.MEDIUM,\n type = ControlType.ACCENT,\n ...rest\n }: Props,\n reference,\n ) => {\n const intl = useIntl();\n\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n logDeprecationNotices({ size, type });\n\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n const newType = establishNewType(type);\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n const newPriority = establishNewPriority(priority, type);\n\n const classes = clsx(\n `btn btn-${size}`,\n `np-btn np-btn-${size}`,\n {\n 'btn-loading': loading,\n 'btn-block np-btn-block': block,\n },\n {\n disabled: disabled || loading,\n },\n // @ts-expect-error fix when refactor `typeClassMap` to TypeScript\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n typeClassMap[newType],\n // @ts-expect-error fix when refactor `typeClassMap` to TypeScript\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n priorityClassMap[newPriority],\n className,\n );\n\n function processIndicatorSize() {\n return ['sm', 'xs'].includes(size) ? 'xxs' : 'xs';\n }\n\n const Element = (component as ElementType) ?? 'button';\n let props;\n\n if (Element === 'button') {\n const { htmlType = 'button', ...restProps } = rest as ButtonProps;\n props = {\n ...restProps,\n disabled: disabled || loading,\n type: htmlType,\n };\n } else {\n props = { ...rest } as AnchorProps;\n }\n\n return (\n <Element\n ref={reference}\n className={classes}\n {...props}\n aria-live={loading ? 'polite' : 'off'}\n aria-label={loading ? intl.formatMessage(messages.loadingAriaLabel) : rest['aria-label']}\n >\n {children}\n {loading && <ProcessIndicator size={processIndicatorSize()} className=\"btn-loader\" />}\n </Element>\n );\n },\n);\n\nexport default Button;\n"],"names":["Button","forwardRef","as","component","block","children","className","disabled","loading","priority","Priority","PRIMARY","size","Size","MEDIUM","type","ControlType","ACCENT","rest","reference","intl","useIntl","logDeprecationNotices","newType","establishNewType","newPriority","establishNewPriority","classes","clsx","typeClassMap","priorityClassMap","processIndicatorSize","includes","Element","props","htmlType","restProps","_jsxs","ref","formatMessage","messages","loadingAriaLabel","_jsx","ProcessIndicator"],"mappings":";;;;;;;;;;;AAuDA,MAAMA,MAAM,gBAAGC,UAAU,CACvB,CACE;AACEC,EAAAA,EAAE,EAAEC,SAAS;AACbC,EAAAA,KAAK,GAAG,KAAK;EACbC,QAAQ;EACRC,SAAS;EACTC,QAAQ;AACRC,EAAAA,OAAO,GAAG,KAAK;EACfC,QAAQ,GAAGC,QAAQ,CAACC,OAAO;EAC3BC,IAAI,GAAGC,IAAI,CAACC,MAAM;EAClBC,IAAI,GAAGC,WAAW,CAACC,MAAM;EACzB,GAAGC,IAAAA;AACG,CAAA,EACRC,SAAS,KACP;AACF,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE,CAAA;AAEtB;AACAC,EAAAA,qBAAqB,CAAC;IAAEV,IAAI;AAAEG,IAAAA,IAAAA;AAAI,GAAE,CAAC,CAAA;AAErC;AACA,EAAA,MAAMQ,OAAO,GAAGC,gBAAgB,CAACT,IAAI,CAAC,CAAA;AACtC;AACA,EAAA,MAAMU,WAAW,GAAGC,oBAAoB,CAACjB,QAAQ,EAAEM,IAAI,CAAC,CAAA;EAExD,MAAMY,OAAO,GAAGC,IAAI,CAClB,CAAA,QAAA,EAAWhB,IAAI,CAAA,CAAE,EACjB,CAAA,cAAA,EAAiBA,IAAI,CAAA,CAAE,EACvB;AACE,IAAA,aAAa,EAAEJ,OAAO;AACtB,IAAA,wBAAwB,EAAEJ,KAAAA;GAC3B,EACD;IACEG,QAAQ,EAAEA,QAAQ,IAAIC,OAAAA;GACvB;AACD;AACA;EACAqB,YAAY,CAACN,OAAO,CAAC;AACrB;AACA;AACAO,EAAAA,gBAAgB,CAACL,WAAW,CAAC,EAC7BnB,SAAS,CACV,CAAA;EAED,SAASyB,oBAAoBA,GAAA;AAC3B,IAAA,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAACC,QAAQ,CAACpB,IAAI,CAAC,GAAG,KAAK,GAAG,IAAI,CAAA;AACnD,GAAA;AAEA,EAAA,MAAMqB,OAAO,GAAI9B,SAAyB,IAAI,QAAQ,CAAA;AACtD,EAAA,IAAI+B,KAAK,CAAA;EAET,IAAID,OAAO,KAAK,QAAQ,EAAE;IACxB,MAAM;AAAEE,MAAAA,QAAQ,GAAG,QAAQ;MAAE,GAAGC,SAAAA;AAAS,KAAE,GAAGlB,IAAmB,CAAA;AACjEgB,IAAAA,KAAK,GAAG;AACN,MAAA,GAAGE,SAAS;MACZ7B,QAAQ,EAAEA,QAAQ,IAAIC,OAAO;AAC7BO,MAAAA,IAAI,EAAEoB,QAAAA;KACP,CAAA;AACH,GAAC,MAAM;AACLD,IAAAA,KAAK,GAAG;MAAE,GAAGhB,IAAAA;KAAqB,CAAA;AACpC,GAAA;EAEA,oBACEmB,IAAA,CAACJ,OAAO,EAAA;AACNK,IAAAA,GAAG,EAAEnB,SAAU;AACfb,IAAAA,SAAS,EAAEqB,OAAQ;AAAA,IAAA,GACfO,KAAK;AACT,IAAA,WAAA,EAAW1B,OAAO,GAAG,QAAQ,GAAG,KAAM;AACtC,IAAA,YAAA,EAAYA,OAAO,GAAGY,IAAI,CAACmB,aAAa,CAACC,QAAQ,CAACC,gBAAgB,CAAC,GAAGvB,IAAI,CAAC,YAAY,CAAE;AAAAb,IAAAA,QAAA,GAExFA,QAAQ,EACRG,OAAO,iBAAIkC,GAAA,CAACC,gBAAgB,EAAA;MAAC/B,IAAI,EAAEmB,oBAAoB,EAAG;AAACzB,MAAAA,SAAS,EAAC,YAAA;AAAY,MAAG,CAAA;AAAA,GAC9E,CAAC,CAAA;AAEd,CAAC;;;;"}
@@ -126,7 +126,6 @@ const Panel = /*#__PURE__*/React.forwardRef(function Panel({
126
126
  })
127
127
  });
128
128
  });
129
- var Panel$1 = Panel;
130
129
 
131
- module.exports = Panel$1;
130
+ module.exports = Panel;
132
131
  //# sourceMappingURL=Panel.js.map
@@ -1 +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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"}
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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"}
@@ -124,7 +124,6 @@ const Panel = /*#__PURE__*/forwardRef(function Panel({
124
124
  })
125
125
  });
126
126
  });
127
- var Panel$1 = Panel;
128
127
 
129
- export { Panel$1 as default };
128
+ export { Panel as default };
130
129
  //# sourceMappingURL=Panel.mjs.map
@@ -1 +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":"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"}
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;;;;"}
@@ -2,7 +2,6 @@
2
2
 
3
3
  var componentsTheming = require('@wise/components-theming');
4
4
  var clsx = require('clsx');
5
- var PropTypes = require('prop-types');
6
5
  var React = require('react');
7
6
  var reactIntl = require('react-intl');
8
7
  var Button = require('../button/Button.js');
@@ -14,15 +13,11 @@ var Drawer = require('../drawer/Drawer.js');
14
13
  var contexts = require('../inputs/contexts.js');
15
14
  var Select_messages = require('./Select.messages.js');
16
15
  var Option = require('./option/Option.js');
16
+ var SearchBox = require('./searchBox/SearchBox.js');
17
17
  var jsxRuntime = require('react/jsx-runtime');
18
18
  var useLayout = require('../common/hooks/useLayout/useLayout.js');
19
- var SearchBox = require('./searchBox/SearchBox.js');
20
19
  var position = require('../common/propsValues/position.js');
21
20
 
22
- function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
23
-
24
- var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
25
-
26
21
  const DEFAULT_SEARCH_VALUE = '';
27
22
  const DEFAULT_OPTIONS_PAGE_SIZE = 1000;
28
23
  const includesString = (string1, string2) => string1.toLowerCase().includes(string2.toLowerCase());
@@ -37,7 +32,7 @@ function defaultFilterFunction(option, searchValue) {
37
32
  currency,
38
33
  searchStrings
39
34
  } = option;
40
- return !!label && includesString(label, searchValue) || !!note && includesString(note, searchValue) || !!secondary && includesString(secondary, searchValue) || !!currency && includesString(currency, searchValue) || !!searchStrings && searchStrings.some(string => includesString(string, searchValue));
35
+ 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));
41
36
  }
42
37
  function isActionableOption(option) {
43
38
  return !option.header && !option.separator && !option.disabled;
@@ -51,7 +46,6 @@ function isSeparatorOption(option) {
51
46
  function clamp(from, to, value) {
52
47
  return Math.max(Math.min(to, value), from);
53
48
  }
54
-
55
49
  /**
56
50
  * No option or placeholder option is selected
57
51
  */
@@ -62,14 +56,15 @@ function isPlaceholderOption(option) {
62
56
  function isSearchableOption(option) {
63
57
  return !isHeaderOption(option) && !isSeparatorOption(option) && !isPlaceholderOption(option);
64
58
  }
65
- const getUniqueIdForOption = (parentId = '', option) => {
59
+ const getUniqueIdForOption = (parentId, option) => {
66
60
  if (option == null) {
67
61
  return undefined;
68
62
  }
69
- const uniqueOptionId = option.value || (option.label?.replace(/\s/g, '') ?? '');
70
- return `option-${parentId}-${uniqueOptionId}`;
63
+ // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
64
+ const uniqueOptionId = option.value || (typeof option.label === 'string' ? option.label.replace(/\s/g, '') : '');
65
+ return `option-${parentId ?? ''}-${uniqueOptionId}`;
71
66
  };
72
-
67
+ const defaultClassNames = {};
73
68
  /**
74
69
  * @deprecated Use `SelectInput` instead (https://neptune.wise.design/blog/2023-11-28-adopting-our-new-selectinput)
75
70
  */
@@ -80,8 +75,8 @@ function Select({
80
75
  disabled,
81
76
  inverse,
82
77
  dropdownWidth,
83
- size,
84
- block,
78
+ size = 'md',
79
+ block = true,
85
80
  selected,
86
81
  search,
87
82
  onChange,
@@ -89,10 +84,9 @@ function Select({
89
84
  onBlur,
90
85
  options: defaultOptions,
91
86
  onSearchChange,
92
- searchValue: initSearchValue,
87
+ searchValue: initSearchValue = '',
93
88
  searchPlaceholder,
94
- // eslint-disable-next-line unicorn/prevent-abbreviations
95
- classNames: classNamesProp,
89
+ classNames: classNamesProp = defaultClassNames,
96
90
  dropdownUp,
97
91
  dropdownProps,
98
92
  buttonProps
@@ -107,9 +101,9 @@ function Select({
107
101
  const s = className => classNamesProp[className] || className;
108
102
  const [open, setOpen] = React.useState(false);
109
103
  const [searchValue, setSearchValue] = React.useState(DEFAULT_SEARCH_VALUE);
110
- const [keyboardFocusedOptionIndex, setKeyboardFocusedOptionIndex] = React.useState(null);
111
- const keyboardFocusedReference = React.useRef();
112
- const previousKeyboardFocusedOptionIndex = React.useRef();
104
+ const [keyboardFocusedOptionIndex, setKeyboardFocusedOptionIndex] = React.useState(-1);
105
+ const keyboardFocusedReference = React.useRef(null);
106
+ const previousKeyboardFocusedOptionIndex = React.useRef(-1);
113
107
  const [numberOfOptionsShown, setNumberOfOptionsShown] = React.useState(DEFAULT_OPTIONS_PAGE_SIZE);
114
108
  const searchBoxReference = React.useRef(null);
115
109
  const selectReference = React.useRef(null);
@@ -138,7 +132,7 @@ function Select({
138
132
  isMobile
139
133
  } = useLayout.useLayout();
140
134
  React.useEffect(() => {
141
- let cancelled;
135
+ let cancelled = false;
142
136
  if (keyboardFocusedOptionIndex >= 0) {
143
137
  requestAnimationFrame(() => {
144
138
  if (!cancelled) {
@@ -165,9 +159,7 @@ function Select({
165
159
  }
166
160
  };
167
161
  const handleOnFocus = event => {
168
- if (onFocus) {
169
- onFocus(event);
170
- }
162
+ onFocus?.(event);
171
163
  };
172
164
  const handleOnBlur = event => {
173
165
  const {
@@ -176,20 +168,16 @@ function Select({
176
168
  if (nativeEvent) {
177
169
  const elementReceivingFocus = nativeEvent.relatedTarget;
178
170
  const select = event.currentTarget;
179
- if (select && elementReceivingFocus && select.contains(elementReceivingFocus)) {
171
+ if (select && elementReceivingFocus instanceof Node && select.contains(elementReceivingFocus)) {
180
172
  return;
181
173
  }
182
174
  }
183
- if (onBlur) {
184
- onBlur(event);
185
- }
175
+ onBlur?.(event);
186
176
  };
187
177
  const handleSearchChange = event => {
188
178
  setNumberOfOptionsShown(DEFAULT_OPTIONS_PAGE_SIZE);
189
179
  setSearchValue(event.target.value);
190
- if (onSearchChange) {
191
- onSearchChange(event.target.value);
192
- }
180
+ onSearchChange?.(event.target.value);
193
181
  };
194
182
  const handleKeyDown = event => {
195
183
  switch (event.key) {
@@ -232,24 +220,24 @@ function Select({
232
220
  }
233
221
  };
234
222
  function selectKeyboardFocusedOption() {
235
- if (keyboardFocusedOptionIndex != null && selectableOptions.length > 0) {
223
+ if (keyboardFocusedOptionIndex >= 0 && selectableOptions.length > 0) {
236
224
  selectOption(selectableOptions[keyboardFocusedOptionIndex]);
237
225
  }
238
226
  }
239
227
  function moveFocusWithDifference(difference) {
240
228
  const selectedOptionIndex = selectableOptions.reduce((optionIndex, current, index) => {
241
- if (optionIndex != null) {
229
+ if (optionIndex >= 0) {
242
230
  return optionIndex;
243
231
  }
244
232
  if (isOptionSelected(selected, current)) {
245
233
  return index;
246
234
  }
247
- return null;
248
- }, null);
249
- const previousFocusedIndex = previousKeyboardFocusedOptionIndex.current ?? -1;
235
+ return -1;
236
+ }, -1);
237
+ const previousFocusedIndex = previousKeyboardFocusedOptionIndex.current;
250
238
  let indexToStartMovingFrom = previousFocusedIndex;
251
- if (previousFocusedIndex === -1) {
252
- if (selectedOptionIndex == null) {
239
+ if (previousFocusedIndex < 0) {
240
+ if (selectedOptionIndex < 0) {
253
241
  setKeyboardFocusedOptionIndex(0);
254
242
  } else {
255
243
  indexToStartMovingFrom = selectedOptionIndex;
@@ -265,18 +253,18 @@ function Select({
265
253
  if (isSearchEnabled && searchBoxReference.current) {
266
254
  searchBoxReference.current.focus();
267
255
  }
268
- if (!isSearchEnabled && optionsListReference.current && (previousKeyboardFocusedOptionIndex.current == null || Number.isNaN(previousKeyboardFocusedOptionIndex.current))) {
256
+ if (!isSearchEnabled && optionsListReference.current && previousKeyboardFocusedOptionIndex.current < 0) {
269
257
  optionsListReference.current.focus();
270
258
  }
271
259
  }
272
260
  previousKeyboardFocusedOptionIndex.current = keyboardFocusedOptionIndex;
273
261
  } else {
274
- previousKeyboardFocusedOptionIndex.current = null;
262
+ previousKeyboardFocusedOptionIndex.current = -1;
275
263
  }
276
264
  }, [open, searchValue, isSearchEnabled, isMobile, keyboardFocusedOptionIndex]);
277
265
  const handleCloseOptions = () => {
278
266
  setOpen(false);
279
- setKeyboardFocusedOptionIndex(null);
267
+ setKeyboardFocusedOptionIndex(-1);
280
268
  if (dropdownButtonReference.current) {
281
269
  dropdownButtonReference.current.focus();
282
270
  }
@@ -292,7 +280,7 @@ function Select({
292
280
  handleCloseOptions();
293
281
  }
294
282
  function renderOptionsList({
295
- className
283
+ className = ''
296
284
  } = {}) {
297
285
  const dropdownClass = clsx.clsx(s('np-dropdown-menu'), {
298
286
  [s('np-dropdown-menu-desktop')]: !isMobile,
@@ -304,8 +292,8 @@ function Select({
304
292
  id: listboxId,
305
293
  role: "listbox",
306
294
  "aria-orientation": "vertical",
307
- "aria-activedescendant": getUniqueIdForOption(id, selected),
308
- tabIndex: "-1",
295
+ "aria-activedescendant": getUniqueIdForOption(id, selected ?? null),
296
+ tabIndex: -1,
309
297
  className: dropdownClass,
310
298
  ...dropdownProps,
311
299
  children: [showPlaceholder && /*#__PURE__*/jsxRuntime.jsx(PlaceHolderOption, {}), isSearchEnabled && /*#__PURE__*/jsxRuntime.jsx(SearchBox, {
@@ -355,7 +343,6 @@ function Select({
355
343
  })
356
344
  );
357
345
  }
358
-
359
346
  // eslint-disable-next-line react/prop-types
360
347
  function SeparatorOption() {
361
348
  return /*#__PURE__*/jsxRuntime.jsx("li", {
@@ -363,7 +350,6 @@ function Select({
363
350
  "aria-hidden": true
364
351
  });
365
352
  }
366
-
367
353
  // eslint-disable-next-line react/prop-types
368
354
  function HeaderOption({
369
355
  children
@@ -407,13 +393,15 @@ function Select({
407
393
  "aria-selected": isActive,
408
394
  "aria-disabled": option.disabled,
409
395
  role: "option",
410
- tabIndex: "-1",
396
+ tabIndex: -1,
411
397
  className: className,
412
398
  onClick: handleOnClick,
413
399
  onKeyPress: handleOnClick,
414
400
  children: /*#__PURE__*/jsxRuntime.jsx("a", {
415
401
  disabled: selectOption.disabled,
416
402
  children: /*#__PURE__*/jsxRuntime.jsx(Option, {
403
+ label: undefined,
404
+ value: undefined,
417
405
  ...selectOption,
418
406
  classNames: classNamesProp
419
407
  })
@@ -431,11 +419,11 @@ function Select({
431
419
  }
432
420
  const hasActiveOptions = !!defaultOptions.length;
433
421
  if (open && (initSearchValue || searchValue)) {
434
- if (hasActiveOptions && keyboardFocusedOptionIndex == null) {
422
+ if (hasActiveOptions && keyboardFocusedOptionIndex < 0) {
435
423
  setKeyboardFocusedOptionIndex(0);
436
424
  }
437
- if (!hasActiveOptions && keyboardFocusedOptionIndex != null) {
438
- setKeyboardFocusedOptionIndex(null);
425
+ if (!hasActiveOptions && keyboardFocusedOptionIndex >= 0) {
426
+ setKeyboardFocusedOptionIndex(-1);
439
427
  }
440
428
  }
441
429
  return /*#__PURE__*/jsxRuntime.jsxs("div", {
@@ -464,6 +452,7 @@ function Select({
464
452
  onClick: handleOnClick,
465
453
  ...buttonProps,
466
454
  children: [selected ? /*#__PURE__*/jsxRuntime.jsx(Option, {
455
+ label: undefined,
467
456
  ...selected,
468
457
  classNames: classNamesProp,
469
458
  selected: true
@@ -500,79 +489,6 @@ function Select({
500
489
  })]
501
490
  });
502
491
  }
503
- Select.propTypes = {
504
- placeholder: PropTypes__default.default.string,
505
- id: PropTypes__default.default.string,
506
- required: PropTypes__default.default.bool,
507
- disabled: PropTypes__default.default.bool,
508
- inverse: PropTypes__default.default.bool,
509
- dropdownRight: PropTypes__default.default.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
510
- dropdownWidth: PropTypes__default.default.oneOf(['sm', 'md', 'lg']),
511
- size: PropTypes__default.default.oneOf(['sm', 'md', 'lg']),
512
- block: PropTypes__default.default.bool,
513
- selected: PropTypes__default.default.shape({
514
- value: PropTypes__default.default.any.isRequired,
515
- label: PropTypes__default.default.node,
516
- icon: PropTypes__default.default.node,
517
- currency: PropTypes__default.default.string,
518
- note: PropTypes__default.default.node,
519
- secondary: PropTypes__default.default.node
520
- }),
521
- /**
522
- * Search toggle
523
- * if `true` default search functionality being enabled (not case sensitive search in option labels & currency props)
524
- * 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.
525
- */
526
- search: PropTypes__default.default.oneOfType([PropTypes__default.default.bool, PropTypes__default.default.func]),
527
- options: PropTypes__default.default.arrayOf(PropTypes__default.default.shape({
528
- value: PropTypes__default.default.any,
529
- label: PropTypes__default.default.node,
530
- header: PropTypes__default.default.node,
531
- icon: PropTypes__default.default.node,
532
- currency: PropTypes__default.default.string,
533
- note: PropTypes__default.default.node,
534
- secondary: PropTypes__default.default.node,
535
- separator: PropTypes__default.default.bool,
536
- disabled: PropTypes__default.default.bool,
537
- searchStrings: PropTypes__default.default.arrayOf(PropTypes__default.default.string)
538
- })).isRequired,
539
- searchValue: PropTypes__default.default.string,
540
- searchPlaceholder: PropTypes__default.default.string,
541
- classNames: PropTypes__default.default.objectOf(PropTypes__default.default.string),
542
- dropdownUp: PropTypes__default.default.bool,
543
- buttonProps: PropTypes__default.default.object,
544
- dropdownProps: PropTypes__default.default.object,
545
- onChange: PropTypes__default.default.func.isRequired,
546
- onFocus: PropTypes__default.default.func,
547
- onBlur: PropTypes__default.default.func,
548
- /**
549
- * To have full control of your search value and response use `onSearchChange` function combined with `searchValue` and custom filtering on the options array.
550
- * DO NOT USE TOGETHER WITH `search` PROPERTY
551
- */
552
- onSearchChange: PropTypes__default.default.func
553
- };
554
- Select.defaultProps = {
555
- id: undefined,
556
- placeholder: undefined,
557
- size: 'md',
558
- dropdownRight: null,
559
- dropdownWidth: null,
560
- inverse: false,
561
- required: false,
562
- disabled: false,
563
- block: true,
564
- selected: null,
565
- onFocus: null,
566
- onBlur: null,
567
- onSearchChange: undefined,
568
- search: false,
569
- searchValue: '',
570
- searchPlaceholder: undefined,
571
- classNames: {},
572
- dropdownUp: false,
573
- buttonProps: {},
574
- dropdownProps: {}
575
- };
576
492
 
577
493
  module.exports = Select;
578
494
  //# sourceMappingURL=Select.js.map