@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.
- package/README.md +0 -8
- package/build/button/Button.js.map +1 -1
- package/build/button/Button.mjs.map +1 -1
- package/build/common/panel/Panel.js +1 -2
- package/build/common/panel/Panel.js.map +1 -1
- package/build/common/panel/Panel.mjs +1 -2
- package/build/common/panel/Panel.mjs.map +1 -1
- package/build/select/Select.js +39 -123
- package/build/select/Select.js.map +1 -1
- package/build/select/Select.mjs +39 -119
- package/build/select/Select.mjs.map +1 -1
- package/build/snackbar/Snackbar.js +2 -1
- package/build/snackbar/Snackbar.js.map +1 -1
- package/build/snackbar/Snackbar.mjs +2 -1
- package/build/snackbar/Snackbar.mjs.map +1 -1
- package/build/types/button/Button.d.ts +2 -2
- package/build/types/button/Button.d.ts.map +1 -1
- package/build/types/index.d.ts +1 -0
- package/build/types/index.d.ts.map +1 -1
- package/build/types/select/Select.d.ts +64 -94
- package/build/types/select/Select.d.ts.map +1 -1
- package/build/types/select/index.d.ts +2 -2
- package/build/types/select/index.d.ts.map +1 -1
- package/build/types/select/option/index.d.ts +1 -1
- package/build/types/select/option/index.d.ts.map +1 -1
- package/build/types/select/searchBox/index.d.ts +1 -1
- package/build/types/select/searchBox/index.d.ts.map +1 -1
- package/build/types/snackbar/Snackbar.d.ts.map +1 -1
- package/build/types/upload/steps/uploadImageStep/uploadImageStep.d.ts.map +1 -1
- package/build/upload/steps/uploadImageStep/uploadImageStep.js +2 -0
- package/build/upload/steps/uploadImageStep/uploadImageStep.js.map +1 -1
- package/build/upload/steps/uploadImageStep/uploadImageStep.mjs +2 -0
- package/build/upload/steps/uploadImageStep/uploadImageStep.mjs.map +1 -1
- package/package.json +3 -5
- package/src/button/Button.tsx +2 -2
- package/src/index.ts +6 -0
- package/src/select/{Select.spec.js → Select.spec.tsx} +8 -6
- package/src/select/{Select.js → Select.tsx} +135 -153
- package/src/select/index.ts +7 -0
- package/src/snackbar/Snackbar.tsx +7 -1
- package/src/upload/Upload.story.tsx +1 -0
- package/src/upload/steps/uploadImageStep/uploadImageStep.tsx +5 -1
- package/build/select/index.js +0 -8
- package/build/select/index.js.map +0 -1
- package/build/select/index.mjs +0 -6
- package/build/select/index.mjs.map +0 -1
- package/src/select/index.js +0 -3
- /package/src/select/option/{index.js → index.ts} +0 -0
- /package/src/select/searchBox/{SearchBox.spec.js → SearchBox.spec.tsx} +0 -0
- /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;;;;"}
|
|
@@ -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":";;;;;;;;;;AAkBA,MAAMA,cAAc,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,CAAA;AAE9B;AACA;AACA;AACA,MAAMC,kBAAkB,GAAG;AACzB,EAAA,CAACC,iBAAQ,CAACC,GAAG,GAAG,CAACD,iBAAQ,CAACE,MAAM,EAAEF,iBAAQ,CAACG,KAAK,EAAEH,iBAAQ,CAACI,IAAI,CAAC;AAChE,EAAA,CAACJ,iBAAQ,CAACE,MAAM,GAAG,CAACF,iBAAQ,CAACC,GAAG,EAAED,iBAAQ,CAACG,KAAK,EAAEH,iBAAQ,CAACI,IAAI,CAAC;AAChE,EAAA,CAACJ,iBAAQ,CAACI,IAAI,GAAG,CAACJ,iBAAQ,CAACG,KAAK,EAAEH,iBAAQ,CAACC,GAAG,EAAED,iBAAQ,CAACE,MAAM,CAAC;AAChE,EAAA,CAACF,iBAAQ,CAACG,KAAK,GAAG,CAACH,iBAAQ,CAACI,IAAI,EAAEJ,iBAAQ,CAACC,GAAG,EAAED,iBAAQ,CAACE,MAAM,CAAA;CAChE,CAAA;AAcD,MAAMG,KAAK,gBAAGC,gBAAU,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;YACPC,UAAQ,GAAGb,iBAAQ,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,cAAQ,CAAwB,IAAI,CAAC,CAAA;EAC7E,MAAM,CAACC,aAAa,EAAEC,gBAAgB,CAAC,GAAGF,cAAQ,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,UAAQ,CAAC,EAAE;IACxCU,SAAS,CAACC,IAAI,CAAC;AACbC,MAAAA,IAAI,EAAE,MAAM;AACZC,MAAAA,OAAO,EAAE;QACP3B,kBAAkB,EAAEA,kBAAkB,CAACc,UAAQ,CAAA;AAChD,OAAA;AACF,KAAA,CAAC,CAAA;AACJ,GAAA;EAEA,MAAM;IAAEkB,MAAM;IAAEC,UAAU;AAAEC,IAAAA,WAAAA;GAAa,GAAGC,qBAAS,CAACpB,SAAS,CAACqB,OAAO,EAAEd,aAAa,EAAE;AACtFe,IAAAA,SAAS,EAAEvB,UAAQ;AACnBU,IAAAA,SAAAA;AACD,GAAA,CAAC,CAAA;AAEF;AACA;AACAc,EAAAA,eAAS,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,gBAAU,CAACC,kCAAgB,CAAC,CAAA;EAE9C,oBACEC,cAAA,CAACC,cAAM,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,cAAA,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,SAAI,CAAC,UAAU,EAAE;AAAE,QAAA,gBAAgB,EAAE7C,IAAAA;AAAI,OAAE,EAAEK,IAAI,CAACuC,SAAS,CAAE;AAAA7C,MAAAA,QAAA,eAExE+C,eAAA,CAAA,KAAA,EAAA;AACEN,QAAAA,GAAG,EAAElC,SAAAA;AACL;AACAoC,QAAAA,KAAK,EAAEf,YAAa;AACpBiB,QAAAA,SAAS,EAAEC,SAAI,CAAC,mBAAmB,CAAE;AAAA9C,QAAAA,QAAA,EAEpCA,CAAAA,QAAQ,EAERH,KAAK,iBACJsC,cAAA,CAAA,KAAA,EAAA;AACEM,UAAAA,GAAG,EAAEhC,eAAgB;UACrBoC,SAAS,EAAEC,SAAI,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
|
|
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 +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":"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"}
|
package/build/select/Select.js
CHANGED
|
@@ -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
|
|
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
|
|
59
|
+
const getUniqueIdForOption = (parentId, option) => {
|
|
66
60
|
if (option == null) {
|
|
67
61
|
return undefined;
|
|
68
62
|
}
|
|
69
|
-
|
|
70
|
-
|
|
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
|
-
|
|
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(
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
|
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
|
|
229
|
+
if (optionIndex >= 0) {
|
|
242
230
|
return optionIndex;
|
|
243
231
|
}
|
|
244
232
|
if (isOptionSelected(selected, current)) {
|
|
245
233
|
return index;
|
|
246
234
|
}
|
|
247
|
-
return
|
|
248
|
-
},
|
|
249
|
-
const previousFocusedIndex = previousKeyboardFocusedOptionIndex.current
|
|
235
|
+
return -1;
|
|
236
|
+
}, -1);
|
|
237
|
+
const previousFocusedIndex = previousKeyboardFocusedOptionIndex.current;
|
|
250
238
|
let indexToStartMovingFrom = previousFocusedIndex;
|
|
251
|
-
if (previousFocusedIndex
|
|
252
|
-
if (selectedOptionIndex
|
|
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 &&
|
|
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 =
|
|
262
|
+
previousKeyboardFocusedOptionIndex.current = -1;
|
|
275
263
|
}
|
|
276
264
|
}, [open, searchValue, isSearchEnabled, isMobile, keyboardFocusedOptionIndex]);
|
|
277
265
|
const handleCloseOptions = () => {
|
|
278
266
|
setOpen(false);
|
|
279
|
-
setKeyboardFocusedOptionIndex(
|
|
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:
|
|
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:
|
|
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
|
|
422
|
+
if (hasActiveOptions && keyboardFocusedOptionIndex < 0) {
|
|
435
423
|
setKeyboardFocusedOptionIndex(0);
|
|
436
424
|
}
|
|
437
|
-
if (!hasActiveOptions && keyboardFocusedOptionIndex
|
|
438
|
-
setKeyboardFocusedOptionIndex(
|
|
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
|