@dnb/eufemia 10.11.0 → 10.12.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/CHANGELOG.md +24 -0
- package/cjs/components/button/Button.d.ts +3 -3
- package/cjs/components/form-label/FormLabel.js +2 -1
- package/cjs/components/form-label/FormLabel.js.map +1 -1
- package/cjs/components/form-label/style/themes/dnb-form-label-theme-ui.css +2 -2
- package/cjs/components/form-label/style/themes/dnb-form-label-theme-ui.min.css +1 -1
- package/cjs/components/form-label/style/themes/dnb-form-label-theme-ui.scss +1 -1
- package/cjs/components/input-masked/InputMasked.d.ts +0 -1
- package/cjs/components/input-masked/InputMasked.js +3 -3
- package/cjs/components/input-masked/InputMasked.js.map +1 -1
- package/cjs/components/input-masked/MultiInputMask.d.ts +60 -0
- package/cjs/components/input-masked/MultiInputMask.js +159 -0
- package/cjs/components/input-masked/MultiInputMask.js.map +1 -0
- package/cjs/components/input-masked/TextMask.d.ts +1 -1
- package/cjs/components/input-masked/hooks/useHandleCursorPosition.d.ts +7 -0
- package/cjs/components/input-masked/hooks/useHandleCursorPosition.js +113 -0
- package/cjs/components/input-masked/hooks/useHandleCursorPosition.js.map +1 -0
- package/cjs/components/input-masked/hooks/useMultiInputValues.d.ts +8 -0
- package/cjs/components/input-masked/hooks/useMultiInputValues.js +37 -0
- package/cjs/components/input-masked/hooks/useMultiInputValues.js.map +1 -0
- package/cjs/components/input-masked/index.d.ts +2 -0
- package/cjs/components/input-masked/index.js +21 -1
- package/cjs/components/input-masked/index.js.map +1 -1
- package/cjs/components/input-masked/style/dnb-input-masked.css +57 -0
- package/cjs/components/input-masked/style/dnb-input-masked.min.css +1 -1
- package/cjs/components/input-masked/style/dnb-input-masked.scss +73 -0
- package/cjs/components/lib.d.ts +1 -1
- package/cjs/components/section/Section.d.ts +2 -2
- package/cjs/components/section/Section.js.map +1 -1
- package/cjs/extensions/payment-card/style/dnb-payment-card.css +3 -0
- package/cjs/extensions/payment-card/style/dnb-payment-card.min.css +1 -1
- package/cjs/extensions/payment-card/style/dnb-payment-card.scss +4 -0
- package/cjs/fragments/drawer-list/style/themes/dnb-drawer-list-theme-sbanken.scss +4 -1
- package/cjs/shared/Eufemia.d.ts +1 -1
- package/cjs/shared/Eufemia.js +2 -2
- package/cjs/shared/Eufemia.js.map +1 -1
- package/cjs/shared/useTheme.d.ts +12 -1
- package/cjs/shared/useTheme.js +16 -1
- package/cjs/shared/useTheme.js.map +1 -1
- package/cjs/style/dnb-ui-components.css +57 -0
- package/cjs/style/dnb-ui-components.min.css +1 -1
- package/cjs/style/dnb-ui-extensions.css +3 -0
- package/cjs/style/dnb-ui-extensions.min.css +1 -1
- package/cjs/style/themes/theme-eiendom/eiendom-theme-components.css +59 -2
- package/cjs/style/themes/theme-eiendom/eiendom-theme-components.min.css +2 -2
- package/cjs/style/themes/theme-eiendom/eiendom-theme-extensions.css +3 -0
- package/cjs/style/themes/theme-eiendom/eiendom-theme-extensions.min.css +1 -1
- package/cjs/style/themes/theme-sbanken/sbanken-theme-components.css +67 -6
- package/cjs/style/themes/theme-sbanken/sbanken-theme-components.min.css +2 -2
- package/cjs/style/themes/theme-sbanken/sbanken-theme-extensions.css +3 -0
- package/cjs/style/themes/theme-sbanken/sbanken-theme-extensions.min.css +1 -1
- package/cjs/style/themes/theme-ui/ui-theme-components.css +59 -2
- package/cjs/style/themes/theme-ui/ui-theme-components.min.css +2 -2
- package/cjs/style/themes/theme-ui/ui-theme-extensions.css +3 -0
- package/cjs/style/themes/theme-ui/ui-theme-extensions.min.css +1 -1
- package/components/button/Button.d.ts +3 -3
- package/components/form-label/FormLabel.js +2 -1
- package/components/form-label/FormLabel.js.map +1 -1
- package/components/form-label/style/themes/dnb-form-label-theme-ui.css +2 -2
- package/components/form-label/style/themes/dnb-form-label-theme-ui.min.css +1 -1
- package/components/form-label/style/themes/dnb-form-label-theme-ui.scss +1 -1
- package/components/input-masked/InputMasked.d.ts +0 -1
- package/components/input-masked/InputMasked.js +2 -2
- package/components/input-masked/InputMasked.js.map +1 -1
- package/components/input-masked/MultiInputMask.d.ts +60 -0
- package/components/input-masked/MultiInputMask.js +148 -0
- package/components/input-masked/MultiInputMask.js.map +1 -0
- package/components/input-masked/TextMask.d.ts +1 -1
- package/components/input-masked/hooks/useHandleCursorPosition.d.ts +7 -0
- package/components/input-masked/hooks/useHandleCursorPosition.js +106 -0
- package/components/input-masked/hooks/useHandleCursorPosition.js.map +1 -0
- package/components/input-masked/hooks/useMultiInputValues.d.ts +8 -0
- package/components/input-masked/hooks/useMultiInputValues.js +29 -0
- package/components/input-masked/hooks/useMultiInputValues.js.map +1 -0
- package/components/input-masked/index.d.ts +2 -0
- package/components/input-masked/index.js +2 -0
- package/components/input-masked/index.js.map +1 -1
- package/components/input-masked/style/dnb-input-masked.css +57 -0
- package/components/input-masked/style/dnb-input-masked.min.css +1 -1
- package/components/input-masked/style/dnb-input-masked.scss +73 -0
- package/components/lib.d.ts +1 -1
- package/components/section/Section.d.ts +2 -2
- package/components/section/Section.js.map +1 -1
- package/es/components/button/Button.d.ts +3 -3
- package/es/components/form-label/FormLabel.js +2 -1
- package/es/components/form-label/FormLabel.js.map +1 -1
- package/es/components/form-label/style/themes/dnb-form-label-theme-ui.css +2 -2
- package/es/components/form-label/style/themes/dnb-form-label-theme-ui.min.css +1 -1
- package/es/components/form-label/style/themes/dnb-form-label-theme-ui.scss +1 -1
- package/es/components/input-masked/InputMasked.d.ts +0 -1
- package/es/components/input-masked/InputMasked.js +2 -2
- package/es/components/input-masked/InputMasked.js.map +1 -1
- package/es/components/input-masked/MultiInputMask.d.ts +60 -0
- package/es/components/input-masked/MultiInputMask.js +145 -0
- package/es/components/input-masked/MultiInputMask.js.map +1 -0
- package/es/components/input-masked/TextMask.d.ts +1 -1
- package/es/components/input-masked/hooks/useHandleCursorPosition.d.ts +7 -0
- package/es/components/input-masked/hooks/useHandleCursorPosition.js +105 -0
- package/es/components/input-masked/hooks/useHandleCursorPosition.js.map +1 -0
- package/es/components/input-masked/hooks/useMultiInputValues.d.ts +8 -0
- package/es/components/input-masked/hooks/useMultiInputValues.js +28 -0
- package/es/components/input-masked/hooks/useMultiInputValues.js.map +1 -0
- package/es/components/input-masked/index.d.ts +2 -0
- package/es/components/input-masked/index.js +2 -0
- package/es/components/input-masked/index.js.map +1 -1
- package/es/components/input-masked/style/dnb-input-masked.css +57 -0
- package/es/components/input-masked/style/dnb-input-masked.min.css +1 -1
- package/es/components/input-masked/style/dnb-input-masked.scss +73 -0
- package/es/components/lib.d.ts +1 -1
- package/es/components/section/Section.d.ts +2 -2
- package/es/components/section/Section.js.map +1 -1
- package/es/extensions/payment-card/style/dnb-payment-card.css +3 -0
- package/es/extensions/payment-card/style/dnb-payment-card.min.css +1 -1
- package/es/extensions/payment-card/style/dnb-payment-card.scss +4 -0
- package/es/fragments/drawer-list/style/themes/dnb-drawer-list-theme-sbanken.scss +4 -1
- package/es/shared/Eufemia.d.ts +1 -1
- package/es/shared/Eufemia.js +2 -2
- package/es/shared/Eufemia.js.map +1 -1
- package/es/shared/useTheme.d.ts +12 -1
- package/es/shared/useTheme.js +14 -1
- package/es/shared/useTheme.js.map +1 -1
- package/es/style/dnb-ui-components.css +57 -0
- package/es/style/dnb-ui-components.min.css +1 -1
- package/es/style/dnb-ui-extensions.css +3 -0
- package/es/style/dnb-ui-extensions.min.css +1 -1
- package/es/style/themes/theme-eiendom/eiendom-theme-components.css +59 -2
- package/es/style/themes/theme-eiendom/eiendom-theme-components.min.css +2 -2
- package/es/style/themes/theme-eiendom/eiendom-theme-extensions.css +3 -0
- package/es/style/themes/theme-eiendom/eiendom-theme-extensions.min.css +1 -1
- package/es/style/themes/theme-sbanken/sbanken-theme-components.css +67 -6
- package/es/style/themes/theme-sbanken/sbanken-theme-components.min.css +2 -2
- package/es/style/themes/theme-sbanken/sbanken-theme-extensions.css +3 -0
- package/es/style/themes/theme-sbanken/sbanken-theme-extensions.min.css +1 -1
- package/es/style/themes/theme-ui/ui-theme-components.css +59 -2
- package/es/style/themes/theme-ui/ui-theme-components.min.css +2 -2
- package/es/style/themes/theme-ui/ui-theme-extensions.css +3 -0
- package/es/style/themes/theme-ui/ui-theme-extensions.min.css +1 -1
- package/esm/dnb-ui-basis.min.mjs +1 -1
- package/esm/dnb-ui-components.min.mjs +1 -1
- package/esm/dnb-ui-elements.min.mjs +1 -1
- package/esm/dnb-ui-extensions.min.mjs +3 -3
- package/esm/dnb-ui-lib.min.mjs +1 -1
- package/extensions/payment-card/style/dnb-payment-card.css +3 -0
- package/extensions/payment-card/style/dnb-payment-card.min.css +1 -1
- package/extensions/payment-card/style/dnb-payment-card.scss +4 -0
- package/fragments/drawer-list/style/themes/dnb-drawer-list-theme-sbanken.scss +4 -1
- package/package.json +1 -1
- package/shared/Eufemia.d.ts +1 -1
- package/shared/Eufemia.js +2 -2
- package/shared/Eufemia.js.map +1 -1
- package/shared/useTheme.d.ts +12 -1
- package/shared/useTheme.js +14 -1
- package/shared/useTheme.js.map +1 -1
- package/style/dnb-ui-components.css +57 -0
- package/style/dnb-ui-components.min.css +1 -1
- package/style/dnb-ui-extensions.css +3 -0
- package/style/dnb-ui-extensions.min.css +1 -1
- package/style/themes/theme-eiendom/eiendom-theme-components.css +59 -2
- package/style/themes/theme-eiendom/eiendom-theme-components.min.css +2 -2
- package/style/themes/theme-eiendom/eiendom-theme-extensions.css +3 -0
- package/style/themes/theme-eiendom/eiendom-theme-extensions.min.css +1 -1
- package/style/themes/theme-sbanken/sbanken-theme-components.css +67 -6
- package/style/themes/theme-sbanken/sbanken-theme-components.min.css +2 -2
- package/style/themes/theme-sbanken/sbanken-theme-extensions.css +3 -0
- package/style/themes/theme-sbanken/sbanken-theme-extensions.min.css +1 -1
- package/style/themes/theme-ui/ui-theme-components.css +59 -2
- package/style/themes/theme-ui/ui-theme-components.min.css +2 -2
- package/style/themes/theme-ui/ui-theme-extensions.css +3 -0
- package/style/themes/theme-ui/ui-theme-extensions.min.css +1 -1
- package/umd/dnb-ui-basis.min.js +1 -1
- package/umd/dnb-ui-components.min.js +1 -1
- package/umd/dnb-ui-elements.min.js +1 -1
- package/umd/dnb-ui-extensions.min.js +3 -3
- package/umd/dnb-ui-lib.min.js +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,30 @@
|
|
|
3
3
|
All notable changes to @dnb/eufemia will be documented in this file. See
|
|
4
4
|
[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [10.12.0](https://github.com/dnbexperience/eufemia/compare/v10.11.0...v10.12.0) (2023-11-07)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### :sparkles: Features
|
|
10
|
+
|
|
11
|
+
* **MultiInputMask:** add support for multiple inputs ([#2736](https://github.com/dnbexperience/eufemia/issues/2736)) ([099c823](https://github.com/dnbexperience/eufemia/commit/099c823abd1094836d7d6b1f637d3cb4d5e7f273))
|
|
12
|
+
* **useTheme:** return boolean constants: isUi, isSbanken and isEiendom ([#2845](https://github.com/dnbexperience/eufemia/issues/2845)) ([d3bb9be](https://github.com/dnbexperience/eufemia/commit/d3bb9be507588ac4596e793b316238de94e7ca15))
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
### :memo: Documentation
|
|
16
|
+
|
|
17
|
+
* fix heading evels in contribution guide ([e67a05a](https://github.com/dnbexperience/eufemia/commit/e67a05a3ae8361279f6b5890bfa15ee0551863b6))
|
|
18
|
+
* fix heading levels in contribution guide ([#2853](https://github.com/dnbexperience/eufemia/issues/2853)) ([4c01854](https://github.com/dnbexperience/eufemia/commit/4c018545111243fc1a7a539ae4589321ef0c9add))
|
|
19
|
+
* **Theme:** enhance info about using the shared theme provider ([#2860](https://github.com/dnbexperience/eufemia/issues/2860)) ([dec0664](https://github.com/dnbexperience/eufemia/commit/dec066463a06965cbca67d5532d8f96c67bbbc38))
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
### :bug: Bug Fixes
|
|
23
|
+
|
|
24
|
+
* **Button:** element's type supports Link of react-router-dom ([#2858](https://github.com/dnbexperience/eufemia/issues/2858)) ([b90acdb](https://github.com/dnbexperience/eufemia/commit/b90acdba6528d8eff9befce6bc93ae0fdd87c5bb))
|
|
25
|
+
* **DrawerList:** Add focus style for Sbanken theme ([#2856](https://github.com/dnbexperience/eufemia/issues/2856)) ([1815342](https://github.com/dnbexperience/eufemia/commit/181534223feaa091573251ba3fb320462bffab34))
|
|
26
|
+
* **FormLabel:** move hover color logic to act on properties forId and onClick ([#2848](https://github.com/dnbexperience/eufemia/issues/2848)) ([43723ab](https://github.com/dnbexperience/eufemia/commit/43723ab8c143e36119a4a9a5a87f7d9b419876e8))
|
|
27
|
+
* **MultiInputMask:** incorrect legend hover and focus within effect ([#2861](https://github.com/dnbexperience/eufemia/issues/2861)) ([1cd6be4](https://github.com/dnbexperience/eufemia/commit/1cd6be4fdd39c9424365e2d9b394ecf0e34d2740))
|
|
28
|
+
* **PaymentCard:** overlay icon fill color ([#2846](https://github.com/dnbexperience/eufemia/issues/2846)) ([712a227](https://github.com/dnbexperience/eufemia/commit/712a2278094039a27a9df5c3739a053281c3ca8a))
|
|
29
|
+
|
|
6
30
|
## [10.11.0](https://github.com/dnbexperience/eufemia/compare/v10.10.0...v10.11.0) (2023-11-03)
|
|
7
31
|
|
|
8
32
|
|
|
@@ -38,9 +38,9 @@ export type ButtonChildren =
|
|
|
38
38
|
| string
|
|
39
39
|
| ((...args: any[]) => any)
|
|
40
40
|
| React.ReactNode;
|
|
41
|
-
export type ButtonElement =
|
|
42
|
-
HTMLButtonElement | HTMLAnchorElement | AnchorProps
|
|
43
|
-
|
|
41
|
+
export type ButtonElement =
|
|
42
|
+
| DynamicElement<HTMLButtonElement | HTMLAnchorElement | AnchorProps>
|
|
43
|
+
| React.ReactNode;
|
|
44
44
|
export type ButtonOnClick = string | ((...args: any[]) => any);
|
|
45
45
|
export type ButtonProps = {
|
|
46
46
|
/**
|
|
@@ -41,8 +41,9 @@ function FormLabel(localProps) {
|
|
|
41
41
|
label_direction
|
|
42
42
|
} = props,
|
|
43
43
|
attributes = _objectWithoutProperties(props, _excluded);
|
|
44
|
+
const isInteractive = !props.disabled && !srOnly && (typeof props.onClick === 'function' || forId || for_id);
|
|
44
45
|
const params = _objectSpread({
|
|
45
|
-
className: (0, _classnames.default)('dnb-form-label', ((0, _componentHelper.isTrue)(vertical) || label_direction === 'vertical') && `dnb-form-label--vertical`, (srOnly || (0, _componentHelper.isTrue)(sr_only)) && 'dnb-sr-only', (0, _SkeletonHelper.createSkeletonClass)('font', skeleton, context), (0, _SpacingHelper.createSpacingClasses)(props), className, size && `dnb-h--${size}
|
|
46
|
+
className: (0, _classnames.default)('dnb-form-label', ((0, _componentHelper.isTrue)(vertical) || label_direction === 'vertical') && `dnb-form-label--vertical`, (srOnly || (0, _componentHelper.isTrue)(sr_only)) && 'dnb-sr-only', (0, _SkeletonHelper.createSkeletonClass)('font', skeleton, context), (0, _SpacingHelper.createSpacingClasses)(props), className, size && `dnb-h--${size}`, isInteractive && 'dnb-form-label--interactive'),
|
|
46
47
|
htmlFor: forId || for_id
|
|
47
48
|
}, attributes);
|
|
48
49
|
params['ref'] = innerRef;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormLabel.js","names":["_react","_interopRequireDefault","require","_classnames","_componentHelper","_SpacingHelper","_SkeletonHelper","_filterValidProps","_Context","_excluded","obj","__esModule","default","ownKeys","object","enumerableOnly","keys","Object","getOwnPropertySymbols","symbols","filter","sym","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","target","i","arguments","length","source","forEach","key","_defineProperty","getOwnPropertyDescriptors","defineProperties","defineProperty","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","call","TypeError","Number","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","sourceSymbolKeys","indexOf","prototype","propertyIsEnumerable","sourceKeys","FormLabel","localProps","context","React","useContext","Context","props","extendPropsWithContext","skeleton","pickFormElementProps","FormRow","formElement","forId","text","srOnly","vertical","size","element","Element","innerRef","className","children","for_id","sr_only","label_direction","attributes","params","classnames","isTrue","createSkeletonClass","createSpacingClasses","htmlFor","skeletonDOMAttributes","validateDOMAttributes","createElement","_supportsSpacingProps"],"sources":["../../../../src/components/form-label/FormLabel.tsx"],"sourcesContent":["/**\n * Web FormLabel Component\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport {\n extendPropsWithContext,\n isTrue,\n validateDOMAttributes,\n} from '../../shared/component-helper'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport {\n createSkeletonClass,\n skeletonDOMAttributes,\n} from '../skeleton/SkeletonHelper'\nimport { pickFormElementProps } from '../../shared/helpers/filterValidProps'\nimport Context from '../../shared/Context'\nimport {\n DynamicElement,\n DynamicElementParams,\n SpacingProps,\n} from '../../shared/types'\n\nexport type FormLabelProps = {\n forId?: string\n element?: DynamicElement<HTMLLabelElement>\n text?: React.ReactNode\n size?: 'basis' | 'medium' | 'large'\n id?: string\n skeleton?: boolean\n label?: React.ReactNode\n vertical?: boolean\n srOnly?: boolean\n innerRef?: React.RefObject<HTMLElement>\n\n /** Is not a part of HTMLLabelElement and not documented as of now */\n disabled?: boolean\n\n /** @deprecated use forId instead */\n for_id?: string\n /** @deprecated use srOnly instead */\n sr_only?: boolean\n /** @deprecated use labelDirection instead (was not documented before) */\n label_direction?: 'vertical' | 'horizontal'\n}\n\nexport type FormLabelAllProps = FormLabelProps &\n React.HTMLAttributes<HTMLLabelElement> &\n SpacingProps\n\nexport default function FormLabel(localProps: FormLabelAllProps) {\n const context = React.useContext(Context)\n\n // use only the props from context, who are available here anyway\n const props = extendPropsWithContext(\n localProps,\n null,\n { skeleton: context?.skeleton },\n pickFormElementProps(context?.FormRow), // Deprecated – can be removed in v11\n pickFormElementProps(context?.formElement),\n context?.FormLabel\n )\n\n const {\n forId,\n text,\n srOnly,\n vertical,\n size,\n skeleton,\n element: Element = 'label',\n innerRef,\n className,\n children,\n\n /** @deprecated can be removed in v11 */\n for_id,\n sr_only,\n label_direction,\n\n ...attributes\n } = props\n\n const params = {\n className: classnames(\n 'dnb-form-label',\n (isTrue(vertical) || label_direction === 'vertical') &&\n `dnb-form-label--vertical`,\n (srOnly || isTrue(sr_only)) && 'dnb-sr-only',\n size && `dnb-h--${size}`,\n createSkeletonClass('font', skeleton, context),\n createSpacingClasses(props),\n className\n ),\n htmlFor: forId || for_id,\n ...(attributes as DynamicElementParams),\n }\n\n params['ref'] = innerRef\n\n skeletonDOMAttributes(params, skeleton, context)\n validateDOMAttributes(localProps, params)\n\n return <Element {...params}>{text || children}</Element>\n}\n\nFormLabel._supportsSpacingProps = true\n"],"mappings":";;;;;;AAKA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,WAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,gBAAA,GAAAF,OAAA;AAKA,IAAAG,cAAA,GAAAH,OAAA;AACA,IAAAI,eAAA,GAAAJ,OAAA;AAIA,IAAAK,iBAAA,GAAAL,OAAA;AACA,IAAAM,QAAA,GAAAP,sBAAA,CAAAC,OAAA;AAA0C,MAAAO,SAAA;AAAA,SAAAR,uBAAAS,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,QAAAC,MAAA,EAAAC,cAAA,QAAAC,IAAA,GAAAC,MAAA,CAAAD,IAAA,CAAAF,MAAA,OAAAG,MAAA,CAAAC,qBAAA,QAAAC,OAAA,GAAAF,MAAA,CAAAC,qBAAA,CAAAJ,MAAA,GAAAC,cAAA,KAAAI,OAAA,GAAAA,OAAA,CAAAC,MAAA,WAAAC,GAAA,WAAAJ,MAAA,CAAAK,wBAAA,CAAAR,MAAA,EAAAO,GAAA,EAAAE,UAAA,OAAAP,IAAA,CAAAQ,IAAA,CAAAC,KAAA,CAAAT,IAAA,EAAAG,OAAA,YAAAH,IAAA;AAAA,SAAAU,cAAAC,MAAA,aAAAC,CAAA,MAAAA,CAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAF,CAAA,UAAAG,MAAA,WAAAF,SAAA,CAAAD,CAAA,IAAAC,SAAA,CAAAD,CAAA,QAAAA,CAAA,OAAAf,OAAA,CAAAI,MAAA,CAAAc,MAAA,OAAAC,OAAA,WAAAC,GAAA,IAAAC,eAAA,CAAAP,MAAA,EAAAM,GAAA,EAAAF,MAAA,CAAAE,GAAA,SAAAhB,MAAA,CAAAkB,yBAAA,GAAAlB,MAAA,CAAAmB,gBAAA,CAAAT,MAAA,EAAAV,MAAA,CAAAkB,yBAAA,CAAAJ,MAAA,KAAAlB,OAAA,CAAAI,MAAA,CAAAc,MAAA,GAAAC,OAAA,WAAAC,GAAA,IAAAhB,MAAA,CAAAoB,cAAA,CAAAV,MAAA,EAAAM,GAAA,EAAAhB,MAAA,CAAAK,wBAAA,CAAAS,MAAA,EAAAE,GAAA,iBAAAN,MAAA;AAAA,SAAAO,gBAAAxB,GAAA,EAAAuB,GAAA,EAAAK,KAAA,IAAAL,GAAA,GAAAM,cAAA,CAAAN,GAAA,OAAAA,GAAA,IAAAvB,GAAA,IAAAO,MAAA,CAAAoB,cAAA,CAAA3B,GAAA,EAAAuB,GAAA,IAAAK,KAAA,EAAAA,KAAA,EAAAf,UAAA,QAAAiB,YAAA,QAAAC,QAAA,oBAAA/B,GAAA,CAAAuB,GAAA,IAAAK,KAAA,WAAA5B,GAAA;AAAA,SAAA6B,eAAAG,GAAA,QAAAT,GAAA,GAAAU,YAAA,CAAAD,GAAA,2BAAAT,GAAA,gBAAAA,GAAA,GAAAW,MAAA,CAAAX,GAAA;AAAA,SAAAU,aAAAE,KAAA,EAAAC,IAAA,eAAAD,KAAA,iBAAAA,KAAA,kBAAAA,KAAA,MAAAE,IAAA,GAAAF,KAAA,CAAAG,MAAA,CAAAC,WAAA,OAAAF,IAAA,KAAAG,SAAA,QAAAC,GAAA,GAAAJ,IAAA,CAAAK,IAAA,CAAAP,KAAA,EAAAC,IAAA,2BAAAK,GAAA,sBAAAA,GAAA,YAAAE,SAAA,4DAAAP,IAAA,gBAAAF,MAAA,GAAAU,MAAA,EAAAT,KAAA;AAAA,SAAAU,yBAAAxB,MAAA,EAAAyB,QAAA,QAAAzB,MAAA,yBAAAJ,MAAA,GAAA8B,6BAAA,CAAA1B,MAAA,EAAAyB,QAAA,OAAAvB,GAAA,EAAAL,CAAA,MAAAX,MAAA,CAAAC,qBAAA,QAAAwC,gBAAA,GAAAzC,MAAA,CAAAC,qBAAA,CAAAa,MAAA,QAAAH,CAAA,MAAAA,CAAA,GAAA8B,gBAAA,CAAA5B,MAAA,EAAAF,CAAA,MAAAK,GAAA,GAAAyB,gBAAA,CAAA9B,CAAA,OAAA4B,QAAA,CAAAG,OAAA,CAAA1B,GAAA,uBAAAhB,MAAA,CAAA2C,SAAA,CAAAC,oBAAA,CAAAT,IAAA,CAAArB,MAAA,EAAAE,GAAA,aAAAN,MAAA,CAAAM,GAAA,IAAAF,MAAA,CAAAE,GAAA,cAAAN,MAAA;AAAA,SAAA8B,8BAAA1B,MAAA,EAAAyB,QAAA,QAAAzB,MAAA,yBAAAJ,MAAA,WAAAmC,UAAA,GAAA7C,MAAA,CAAAD,IAAA,CAAAe,MAAA,OAAAE,GAAA,EAAAL,CAAA,OAAAA,CAAA,MAAAA,CAAA,GAAAkC,UAAA,CAAAhC,MAAA,EAAAF,CAAA,MAAAK,GAAA,GAAA6B,UAAA,CAAAlC,CAAA,OAAA4B,QAAA,CAAAG,OAAA,CAAA1B,GAAA,kBAAAN,MAAA,CAAAM,GAAA,IAAAF,MAAA,CAAAE,GAAA,YAAAN,MAAA;AAkC3B,SAASoC,SAASA,CAACC,UAA6B,EAAE;EAC/D,MAAMC,OAAO,GAAGC,cAAK,CAACC,UAAU,CAACC,gBAAO,CAAC;EAGzC,MAAMC,KAAK,GAAG,IAAAC,uCAAsB,EAClCN,UAAU,EACV,IAAI,EACJ;IAAEO,QAAQ,EAAEN,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEM;EAAS,CAAC,EAC/B,IAAAC,sCAAoB,EAACP,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEQ,OAAO,CAAC,EACtC,IAAAD,sCAAoB,EAACP,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAES,WAAW,CAAC,EAC1CT,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEF,SACX,CAAC;EAED,MAAM;MACJY,KAAK;MACLC,IAAI;MACJC,MAAM;MACNC,QAAQ;MACRC,IAAI;MACJR,QAAQ;MACRS,OAAO,EAAEC,OAAO,GAAG,OAAO;MAC1BC,QAAQ;MACRC,SAAS;MACTC,QAAQ;MAGRC,MAAM;MACNC,OAAO;MACPC;IAGF,CAAC,GAAGlB,KAAK;IADJmB,UAAU,GAAAjC,wBAAA,CACXc,KAAK,EAAA5D,SAAA;EAET,MAAMgF,MAAM,
|
|
1
|
+
{"version":3,"file":"FormLabel.js","names":["_react","_interopRequireDefault","require","_classnames","_componentHelper","_SpacingHelper","_SkeletonHelper","_filterValidProps","_Context","_excluded","obj","__esModule","default","ownKeys","object","enumerableOnly","keys","Object","getOwnPropertySymbols","symbols","filter","sym","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","target","i","arguments","length","source","forEach","key","_defineProperty","getOwnPropertyDescriptors","defineProperties","defineProperty","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","call","TypeError","Number","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","sourceSymbolKeys","indexOf","prototype","propertyIsEnumerable","sourceKeys","FormLabel","localProps","context","React","useContext","Context","props","extendPropsWithContext","skeleton","pickFormElementProps","FormRow","formElement","forId","text","srOnly","vertical","size","element","Element","innerRef","className","children","for_id","sr_only","label_direction","attributes","isInteractive","disabled","onClick","params","classnames","isTrue","createSkeletonClass","createSpacingClasses","htmlFor","skeletonDOMAttributes","validateDOMAttributes","createElement","_supportsSpacingProps"],"sources":["../../../../src/components/form-label/FormLabel.tsx"],"sourcesContent":["/**\n * Web FormLabel Component\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport {\n extendPropsWithContext,\n isTrue,\n validateDOMAttributes,\n} from '../../shared/component-helper'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport {\n createSkeletonClass,\n skeletonDOMAttributes,\n} from '../skeleton/SkeletonHelper'\nimport { pickFormElementProps } from '../../shared/helpers/filterValidProps'\nimport Context from '../../shared/Context'\nimport {\n DynamicElement,\n DynamicElementParams,\n SpacingProps,\n} from '../../shared/types'\n\nexport type FormLabelProps = {\n forId?: string\n element?: DynamicElement<HTMLLabelElement>\n text?: React.ReactNode\n size?: 'basis' | 'medium' | 'large'\n id?: string\n skeleton?: boolean\n label?: React.ReactNode\n vertical?: boolean\n srOnly?: boolean\n innerRef?: React.RefObject<HTMLElement>\n\n /** Is not a part of HTMLLabelElement and not documented as of now */\n disabled?: boolean\n\n /** @deprecated use forId instead */\n for_id?: string\n /** @deprecated use srOnly instead */\n sr_only?: boolean\n /** @deprecated use labelDirection instead (was not documented before) */\n label_direction?: 'vertical' | 'horizontal'\n}\n\nexport type FormLabelAllProps = FormLabelProps &\n React.HTMLAttributes<HTMLLabelElement> &\n SpacingProps\n\nexport default function FormLabel(localProps: FormLabelAllProps) {\n const context = React.useContext(Context)\n\n // use only the props from context, who are available here anyway\n const props = extendPropsWithContext(\n localProps,\n null,\n { skeleton: context?.skeleton },\n pickFormElementProps(context?.FormRow), // Deprecated – can be removed in v11\n pickFormElementProps(context?.formElement),\n context?.FormLabel\n )\n\n const {\n forId,\n text,\n srOnly,\n vertical,\n size,\n skeleton,\n element: Element = 'label',\n innerRef,\n className,\n children,\n\n /** @deprecated can be removed in v11 */\n for_id,\n sr_only,\n label_direction,\n\n ...attributes\n } = props\n\n const isInteractive =\n !props.disabled &&\n !srOnly &&\n (typeof props.onClick === 'function' || forId || for_id)\n\n const params = {\n className: classnames(\n 'dnb-form-label',\n (isTrue(vertical) || label_direction === 'vertical') &&\n `dnb-form-label--vertical`,\n (srOnly || isTrue(sr_only)) && 'dnb-sr-only',\n size && `dnb-h--${size}`,\n isInteractive && 'dnb-form-label--interactive',\n createSkeletonClass('font', skeleton, context),\n createSpacingClasses(props),\n className\n ),\n htmlFor: forId || for_id,\n ...(attributes as DynamicElementParams),\n }\n\n params['ref'] = innerRef\n\n skeletonDOMAttributes(params, skeleton, context)\n validateDOMAttributes(localProps, params)\n\n return <Element {...params}>{text || children}</Element>\n}\n\nFormLabel._supportsSpacingProps = true\n"],"mappings":"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"}
|
|
@@ -5,9 +5,9 @@
|
|
|
5
5
|
.dnb-form-label {
|
|
6
6
|
color: var(--color-black-80);
|
|
7
7
|
}
|
|
8
|
-
.dnb-form-label
|
|
8
|
+
.dnb-form-label--interactive {
|
|
9
9
|
cursor: pointer;
|
|
10
10
|
}
|
|
11
|
-
.dnb-form-label
|
|
11
|
+
.dnb-form-label--interactive:hover {
|
|
12
12
|
color: var(--color-sea-green);
|
|
13
13
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.dnb-form-label{color:var(--color-black-80)}.dnb-form-label
|
|
1
|
+
.dnb-form-label{color:var(--color-black-80)}.dnb-form-label--interactive{cursor:pointer}.dnb-form-label--interactive:hover{color:var(--color-sea-green)}
|
|
@@ -38,9 +38,6 @@ const InputMasked = props => {
|
|
|
38
38
|
}
|
|
39
39
|
}, _InputMaskedElement || (_InputMaskedElement = _react.default.createElement(_InputMaskedElement2.default, null)));
|
|
40
40
|
};
|
|
41
|
-
InputMasked._supportsSpacingProps = true;
|
|
42
|
-
var _default = InputMasked;
|
|
43
|
-
exports.default = _default;
|
|
44
41
|
process.env.NODE_ENV !== "production" ? InputMasked.propTypes = _objectSpread({
|
|
45
42
|
mask: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.array, _propTypes.default.func]),
|
|
46
43
|
number_mask: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool, _propTypes.default.object]),
|
|
@@ -87,4 +84,7 @@ InputMasked.defaultProps = _objectSpread(_objectSpread({}, _Input.default.defaul
|
|
|
87
84
|
on_submit_focus: null,
|
|
88
85
|
on_submit_blur: null
|
|
89
86
|
});
|
|
87
|
+
InputMasked._supportsSpacingProps = true;
|
|
88
|
+
var _default = InputMasked;
|
|
89
|
+
exports.default = _default;
|
|
90
90
|
//# sourceMappingURL=InputMasked.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputMasked.js","names":["_react","_interopRequireDefault","require","_propTypes","_componentHelper","_InputMaskedContext","_InputMaskedElement2","_Input","_interopRequireWildcard","_Context","_InputMaskedElement","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","ownKeys","object","enumerableOnly","keys","getOwnPropertySymbols","symbols","filter","sym","enumerable","push","apply","_objectSpread","target","i","arguments","length","source","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","InputMasked","props","context","React","useContext","Context","mask","alias","test","contextAndProps","useCallback","extendPropsWithContext","defaultProps","createElement","Provider","_supportsSpacingProps","_default","exports","process","env","NODE_ENV","propTypes","PropTypes","oneOfType","array","func","number_mask","string","bool","currency_mask","mask_options","number_format","locale","as_currency","as_number","as_percent","show_mask","show_guide","pipe","keep_char_positions","placeholder_char","inner_ref","on_change","on_submit","on_focus","on_blur","on_submit_focus","on_submit_blur","inputPropTypes","Input"],"sources":["../../../../src/components/input-masked/InputMasked.js"],"sourcesContent":["/* eslint-disable react/no-unused-prop-types */\n/**\n * Web InputMasked Component\n *\n */\n\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport { extendPropsWithContext } from '../../shared/component-helper'\nimport InputMaskedContext from './InputMaskedContext'\nimport InputMaskedElement from './InputMaskedElement'\nimport Input, { inputPropTypes } from '../input/Input'\nimport Context from '../../shared/Context'\n\nconst InputMasked = (props) => {\n const context = React.useContext(Context)\n\n // Remove masks defined in Provider/Context, because it overwrites a custom mask\n if (props?.mask) {\n const alias = context?.InputMasked\n for (const key in alias) {\n if (/^as[_A-Z]|number_mask|currency_mask/.test(key)) {\n delete alias[key]\n }\n }\n }\n\n const contextAndProps = React.useCallback(\n extendPropsWithContext(\n props,\n InputMasked.defaultProps,\n context?.InputMasked\n ),\n [props, InputMasked.defaultProps, context?.InputMasked]\n )\n\n return (\n <InputMaskedContext.Provider\n value={{\n props: contextAndProps,\n context,\n }}\n >\n <InputMaskedElement />\n </InputMaskedContext.Provider>\n )\n}\n\nInputMasked._supportsSpacingProps = true\n\nexport default InputMasked\n\nInputMasked.propTypes = {\n mask: PropTypes.oneOfType([\n PropTypes.object,\n PropTypes.array,\n PropTypes.func,\n ]),\n number_mask: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.bool,\n PropTypes.object,\n ]),\n currency_mask: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.bool,\n PropTypes.object,\n ]),\n mask_options: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),\n number_format: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),\n locale: PropTypes.string,\n as_currency: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n as_number: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n as_percent: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n show_mask: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n show_guide: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n pipe: PropTypes.func,\n keep_char_positions: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.bool,\n ]),\n placeholder_char: PropTypes.string,\n inner_ref: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),\n\n on_change: PropTypes.func,\n on_submit: PropTypes.func,\n on_focus: PropTypes.func,\n on_blur: PropTypes.func,\n on_submit_focus: PropTypes.func,\n on_submit_blur: PropTypes.func,\n\n ...inputPropTypes,\n}\n\nInputMasked.defaultProps = {\n ...Input.defaultProps,\n\n mask: null,\n number_mask: null,\n currency_mask: null,\n mask_options: null,\n number_format: null,\n as_currency: null,\n as_number: null,\n as_percent: null,\n locale: null,\n show_mask: false,\n show_guide: true,\n pipe: null,\n keep_char_positions: false,\n placeholder_char: null,\n inner_ref: null,\n\n on_change: null,\n on_submit: null,\n on_focus: null,\n on_blur: null,\n on_submit_focus: null,\n on_submit_blur: null,\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"InputMasked.js","names":["_react","_interopRequireDefault","require","_propTypes","_componentHelper","_InputMaskedContext","_InputMaskedElement2","_Input","_interopRequireWildcard","_Context","_InputMaskedElement","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","ownKeys","object","enumerableOnly","keys","getOwnPropertySymbols","symbols","filter","sym","enumerable","push","apply","_objectSpread","target","i","arguments","length","source","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","InputMasked","props","context","React","useContext","Context","mask","alias","test","contextAndProps","useCallback","extendPropsWithContext","defaultProps","createElement","Provider","process","env","NODE_ENV","propTypes","PropTypes","oneOfType","array","func","number_mask","string","bool","currency_mask","mask_options","number_format","locale","as_currency","as_number","as_percent","show_mask","show_guide","pipe","keep_char_positions","placeholder_char","inner_ref","on_change","on_submit","on_focus","on_blur","on_submit_focus","on_submit_blur","inputPropTypes","Input","_supportsSpacingProps","_default","exports"],"sources":["../../../../src/components/input-masked/InputMasked.js"],"sourcesContent":["/* eslint-disable react/no-unused-prop-types */\n/**\n * Web InputMasked Component\n *\n */\n\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport { extendPropsWithContext } from '../../shared/component-helper'\nimport InputMaskedContext from './InputMaskedContext'\nimport InputMaskedElement from './InputMaskedElement'\nimport Input, { inputPropTypes } from '../input/Input'\nimport Context from '../../shared/Context'\n\nconst InputMasked = (props) => {\n const context = React.useContext(Context)\n\n // Remove masks defined in Provider/Context, because it overwrites a custom mask\n if (props?.mask) {\n const alias = context?.InputMasked\n for (const key in alias) {\n if (/^as[_A-Z]|number_mask|currency_mask/.test(key)) {\n delete alias[key]\n }\n }\n }\n\n const contextAndProps = React.useCallback(\n extendPropsWithContext(\n props,\n InputMasked.defaultProps,\n context?.InputMasked\n ),\n [props, InputMasked.defaultProps, context?.InputMasked]\n )\n\n return (\n <InputMaskedContext.Provider\n value={{\n props: contextAndProps,\n context,\n }}\n >\n <InputMaskedElement />\n </InputMaskedContext.Provider>\n )\n}\n\nInputMasked.propTypes = {\n mask: PropTypes.oneOfType([\n PropTypes.object,\n PropTypes.array,\n PropTypes.func,\n ]),\n number_mask: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.bool,\n PropTypes.object,\n ]),\n currency_mask: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.bool,\n PropTypes.object,\n ]),\n mask_options: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),\n number_format: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),\n locale: PropTypes.string,\n as_currency: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n as_number: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n as_percent: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n show_mask: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n show_guide: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n pipe: PropTypes.func,\n keep_char_positions: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.bool,\n ]),\n placeholder_char: PropTypes.string,\n inner_ref: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),\n\n on_change: PropTypes.func,\n on_submit: PropTypes.func,\n on_focus: PropTypes.func,\n on_blur: PropTypes.func,\n on_submit_focus: PropTypes.func,\n on_submit_blur: PropTypes.func,\n\n ...inputPropTypes,\n}\n\nInputMasked.defaultProps = {\n ...Input.defaultProps,\n\n mask: null,\n number_mask: null,\n currency_mask: null,\n mask_options: null,\n number_format: null,\n as_currency: null,\n as_number: null,\n as_percent: null,\n locale: null,\n show_mask: false,\n show_guide: true,\n pipe: null,\n keep_char_positions: false,\n placeholder_char: null,\n inner_ref: null,\n\n on_change: null,\n on_submit: null,\n on_focus: null,\n on_blur: null,\n on_submit_focus: null,\n on_submit_blur: null,\n}\n\nInputMasked._supportsSpacingProps = true\n\nexport default InputMasked\n"],"mappings":"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"}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { SpacingProps } from '../space/types';
|
|
3
|
+
import { FormStatusState, FormStatusText } from '../FormStatus';
|
|
4
|
+
export type MultiInputMaskInput<T extends string> = {
|
|
5
|
+
/**
|
|
6
|
+
* Defines the id for the input. This id is also used to map the input value to the correct property on the objects used for `values` and `onChange` paramaters.
|
|
7
|
+
*/
|
|
8
|
+
id: T;
|
|
9
|
+
/**
|
|
10
|
+
* Label used by the input. The label itself is hidden, but required to uphold accesability standards for screen readers.
|
|
11
|
+
*/
|
|
12
|
+
label: React.ReactNode;
|
|
13
|
+
/**
|
|
14
|
+
* Each RegExp item in the array defines what the mask should be for each subsequent character in the input. The length sets the size of the input, so an array of two items would produce an input of two characters
|
|
15
|
+
*/
|
|
16
|
+
mask: RegExp[];
|
|
17
|
+
/**
|
|
18
|
+
* Sets the placeholder character used for the input.
|
|
19
|
+
*/
|
|
20
|
+
placeholderCharacter: string;
|
|
21
|
+
};
|
|
22
|
+
export type MultiInputMaskValue<T extends string> = {
|
|
23
|
+
[K in T]: string;
|
|
24
|
+
};
|
|
25
|
+
export type MultiInputMaskProps<T extends string> = {
|
|
26
|
+
/**
|
|
27
|
+
* The label describing the group of inputs inside the components.
|
|
28
|
+
*/
|
|
29
|
+
label?: React.ReactNode;
|
|
30
|
+
/**
|
|
31
|
+
* Use to change the label layout direction. Defaults to `horizontal`.
|
|
32
|
+
*/
|
|
33
|
+
labelDirection?: 'vertical' | 'horizontal';
|
|
34
|
+
/**
|
|
35
|
+
* Used to define the different inputs representing the inputs in the component. The id's defined here is used to map input value to correct property in `values` parameters used in `onChange`
|
|
36
|
+
*/
|
|
37
|
+
inputs: MultiInputMaskInput<T>[];
|
|
38
|
+
/**
|
|
39
|
+
* Values used for the inputs inside the component. Expects an object with keys matching the id's defined in `inputs`
|
|
40
|
+
*/
|
|
41
|
+
values?: MultiInputMaskValue<T>;
|
|
42
|
+
/**
|
|
43
|
+
* Defines the delimiter used to seperate the inputs inside the component.
|
|
44
|
+
*/
|
|
45
|
+
delimiter?: string;
|
|
46
|
+
/**
|
|
47
|
+
* Runs when the input value changes. Has an object parameter with keys matching the id's defined in `inputs`. i.e. `{month: string, year: string}`
|
|
48
|
+
*/
|
|
49
|
+
onChange?: (values: MultiInputMaskValue<T>) => void;
|
|
50
|
+
/**
|
|
51
|
+
* Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.
|
|
52
|
+
*/
|
|
53
|
+
status?: FormStatusText;
|
|
54
|
+
/**
|
|
55
|
+
* Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.
|
|
56
|
+
*/
|
|
57
|
+
statusState?: FormStatusState;
|
|
58
|
+
} & Omit<React.HTMLProps<HTMLInputElement>, 'onChange' | 'ref' | 'value' | 'label'> & SpacingProps;
|
|
59
|
+
declare function MultiInputMask<T extends string>({ label, labelDirection, inputs, delimiter, onChange: onChangeExternal, disabled, status, statusState, values: defaultValues, className, ...props }: MultiInputMaskProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
60
|
+
export default MultiInputMask;
|
|
@@ -0,0 +1,159 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
+
var _Input = _interopRequireDefault(require("../Input"));
|
|
9
|
+
var _TextMask = _interopRequireDefault(require("./TextMask"));
|
|
10
|
+
var _useHandleCursorPosition = _interopRequireDefault(require("./hooks/useHandleCursorPosition"));
|
|
11
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
12
|
+
var _FormLabel = _interopRequireDefault(require("../FormLabel"));
|
|
13
|
+
var _SpacingHelper = require("../space/SpacingHelper");
|
|
14
|
+
var _useMultiInputValues = require("./hooks/useMultiInputValues");
|
|
15
|
+
const _excluded = ["label", "labelDirection", "inputs", "delimiter", "onChange", "disabled", "status", "statusState", "values", "className"];
|
|
16
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
18
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
19
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
20
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
21
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
22
|
+
function MultiInputMask(_ref) {
|
|
23
|
+
let {
|
|
24
|
+
label,
|
|
25
|
+
labelDirection = 'horizontal',
|
|
26
|
+
inputs,
|
|
27
|
+
delimiter,
|
|
28
|
+
onChange: onChangeExternal,
|
|
29
|
+
disabled,
|
|
30
|
+
status,
|
|
31
|
+
statusState,
|
|
32
|
+
values: defaultValues,
|
|
33
|
+
className
|
|
34
|
+
} = _ref,
|
|
35
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
36
|
+
const [values, onChange] = (0, _useMultiInputValues.useMultiInputValue)({
|
|
37
|
+
inputs,
|
|
38
|
+
defaultValues,
|
|
39
|
+
callback: onChangeExternal
|
|
40
|
+
});
|
|
41
|
+
const inputRefs = (0, _react.useRef)([]);
|
|
42
|
+
const {
|
|
43
|
+
onKeyDown
|
|
44
|
+
} = (0, _useHandleCursorPosition.default)(inputRefs.current, getKeysToHandle());
|
|
45
|
+
const WrapperElement = label ? 'fieldset' : 'div';
|
|
46
|
+
return _react.default.createElement(WrapperElement, {
|
|
47
|
+
className: (0, _classnames.default)('dnb-multi-input-mask__fieldset', (0, _SpacingHelper.createSpacingClasses)(props), labelDirection === 'horizontal' && 'dnb-multi-input-mask__fieldset--horizontal')
|
|
48
|
+
}, label && _react.default.createElement(_FormLabel.default, {
|
|
49
|
+
className: 'dnb-multi-input-mask__legend' + (labelDirection === 'horizontal' ? " dnb-multi-input-mask__legend--horizontal" : ""),
|
|
50
|
+
element: "legend",
|
|
51
|
+
onClick: onLegendClick,
|
|
52
|
+
disabled: disabled,
|
|
53
|
+
vertical: labelDirection === 'vertical'
|
|
54
|
+
}, _react.default.createElement("span", null, label)), _react.default.createElement(_Input.default, _extends({}, props, {
|
|
55
|
+
className: (0, _classnames.default)('dnb-multi-input-mask', className),
|
|
56
|
+
disabled: disabled,
|
|
57
|
+
status: status,
|
|
58
|
+
status_state: statusState,
|
|
59
|
+
input_element: inputs.map((input, index) => _react.default.createElement(_react.Fragment, {
|
|
60
|
+
key: input.id
|
|
61
|
+
}, _react.default.createElement(MultiInputMaskInput, _extends({}, input, {
|
|
62
|
+
value: values[input.id],
|
|
63
|
+
delimiter: index !== inputs.length - 1 ? delimiter : undefined,
|
|
64
|
+
onKeyDown: onKeyDown,
|
|
65
|
+
onChange: onChange,
|
|
66
|
+
disabled: disabled,
|
|
67
|
+
inputRef: getInputRef
|
|
68
|
+
}))))
|
|
69
|
+
})));
|
|
70
|
+
function onLegendClick() {
|
|
71
|
+
if (disabled) {
|
|
72
|
+
return;
|
|
73
|
+
}
|
|
74
|
+
const firstInput = inputRefs.current[0].current;
|
|
75
|
+
firstInput.focus();
|
|
76
|
+
firstInput.setSelectionRange(0, 0);
|
|
77
|
+
}
|
|
78
|
+
function getInputRef(ref) {
|
|
79
|
+
const inputRef = ref === null || ref === void 0 ? void 0 : ref.inputRef;
|
|
80
|
+
if (inputRef && !inputRefs.current.includes(inputRef)) {
|
|
81
|
+
inputRefs.current.push(inputRef);
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
function getKeysToHandle() {
|
|
85
|
+
const uniqueMasks = getUniqueMasks();
|
|
86
|
+
if (uniqueMasks.size === 1) {
|
|
87
|
+
const pattern = uniqueMasks.values().next().value.replace(/\//g, '');
|
|
88
|
+
return new RegExp(pattern);
|
|
89
|
+
}
|
|
90
|
+
return inputs.reduce((keys, _ref2) => {
|
|
91
|
+
let {
|
|
92
|
+
id,
|
|
93
|
+
mask
|
|
94
|
+
} = _ref2;
|
|
95
|
+
keys[`${id}__input`] = mask;
|
|
96
|
+
return keys;
|
|
97
|
+
}, {});
|
|
98
|
+
}
|
|
99
|
+
function getUniqueMasks() {
|
|
100
|
+
const masks = new Set();
|
|
101
|
+
inputs.forEach(input => {
|
|
102
|
+
input.mask.forEach(pattern => masks.add(String(pattern)));
|
|
103
|
+
});
|
|
104
|
+
return masks;
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
function MultiInputMaskInput(_ref3) {
|
|
108
|
+
let {
|
|
109
|
+
id,
|
|
110
|
+
label,
|
|
111
|
+
value,
|
|
112
|
+
mask,
|
|
113
|
+
placeholderCharacter,
|
|
114
|
+
delimiter,
|
|
115
|
+
disabled,
|
|
116
|
+
inputRef,
|
|
117
|
+
onKeyDown,
|
|
118
|
+
onChange
|
|
119
|
+
} = _ref3;
|
|
120
|
+
return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_TextMask.default, {
|
|
121
|
+
id: `${id}__input`,
|
|
122
|
+
className: "dnb-input__input dnb-multi-input-mask__input" + (value ? " dnb-multi-input-mask__input--highlight" : ""),
|
|
123
|
+
disabled: disabled,
|
|
124
|
+
size: mask.length,
|
|
125
|
+
mask: mask,
|
|
126
|
+
value: value ?? '',
|
|
127
|
+
placeholderChar: placeholderCharacter,
|
|
128
|
+
guide: true,
|
|
129
|
+
showMask: true,
|
|
130
|
+
keepCharPositions: false,
|
|
131
|
+
"aria-labelledby": `${id}__label`,
|
|
132
|
+
ref: inputRef,
|
|
133
|
+
onKeyDown: onKeyDown,
|
|
134
|
+
onFocus: onFocus,
|
|
135
|
+
onChange: event => {
|
|
136
|
+
onChange(id, removePlaceholder(event.target.value, placeholderCharacter));
|
|
137
|
+
}
|
|
138
|
+
}), _react.default.createElement("label", {
|
|
139
|
+
id: `${id}__label`,
|
|
140
|
+
htmlFor: `${id}__input`,
|
|
141
|
+
hidden: true
|
|
142
|
+
}, label), delimiter && _react.default.createElement("span", {
|
|
143
|
+
"aria-hidden": true,
|
|
144
|
+
className: 'dnb-multi-input-mask__delimiter' + (value ? " dnb-multi-input-mask__delimiter--highlight" : "")
|
|
145
|
+
}, delimiter));
|
|
146
|
+
function removePlaceholder(value, placeholder) {
|
|
147
|
+
return value.replace(RegExp(placeholder, 'gm'), '');
|
|
148
|
+
}
|
|
149
|
+
function onFocus(_ref4) {
|
|
150
|
+
let {
|
|
151
|
+
target
|
|
152
|
+
} = _ref4;
|
|
153
|
+
target.focus();
|
|
154
|
+
target.select();
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
var _default = MultiInputMask;
|
|
158
|
+
exports.default = _default;
|
|
159
|
+
//# sourceMappingURL=MultiInputMask.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MultiInputMask.js","names":["_react","_interopRequireWildcard","require","_Input","_interopRequireDefault","_TextMask","_useHandleCursorPosition","_classnames","_FormLabel","_SpacingHelper","_useMultiInputValues","_excluded","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","MultiInputMask","_ref","label","labelDirection","inputs","delimiter","onChange","onChangeExternal","disabled","status","statusState","values","defaultValues","className","props","useMultiInputValue","callback","inputRefs","useRef","onKeyDown","useHandleCursorPosition","current","getKeysToHandle","WrapperElement","createElement","classnames","createSpacingClasses","element","onClick","onLegendClick","vertical","status_state","input_element","map","input","index","Fragment","id","MultiInputMaskInput","value","undefined","inputRef","getInputRef","firstInput","focus","setSelectionRange","ref","includes","push","uniqueMasks","getUniqueMasks","size","pattern","next","replace","RegExp","reduce","_ref2","mask","masks","Set","forEach","add","String","_ref3","placeholderCharacter","placeholderChar","guide","showMask","keepCharPositions","onFocus","event","removePlaceholder","htmlFor","hidden","placeholder","_ref4","select","_default","exports"],"sources":["../../../../src/components/input-masked/MultiInputMask.tsx"],"sourcesContent":["import React, { Fragment, MutableRefObject, useRef } from 'react'\nimport Input from '../Input'\nimport TextMask from './TextMask'\nimport useHandleCursorPosition from './hooks/useHandleCursorPosition'\nimport classnames from 'classnames'\nimport FormLabel from '../FormLabel'\nimport { SpacingProps } from '../space/types'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport { FormStatusState, FormStatusText } from '../FormStatus'\nimport { useMultiInputValue } from './hooks/useMultiInputValues'\n\nexport type MultiInputMaskInput<T extends string> = {\n /**\n * Defines the id for the input. This id is also used to map the input value to the correct property on the objects used for `values` and `onChange` paramaters.\n */\n id: T\n /**\n * Label used by the input. The label itself is hidden, but required to uphold accesability standards for screen readers.\n */\n label: React.ReactNode\n /**\n * Each RegExp item in the array defines what the mask should be for each subsequent character in the input. The length sets the size of the input, so an array of two items would produce an input of two characters\n */\n mask: RegExp[]\n /**\n * Sets the placeholder character used for the input.\n */\n placeholderCharacter: string\n}\n\nexport type MultiInputMaskValue<T extends string> = {\n // eslint-disable-next-line no-unused-vars\n [K in T]: string\n}\n\nexport type MultiInputMaskProps<T extends string> = {\n /**\n * The label describing the group of inputs inside the components.\n */\n label?: React.ReactNode\n /**\n * Use to change the label layout direction. Defaults to `horizontal`.\n */\n labelDirection?: 'vertical' | 'horizontal'\n /**\n * Used to define the different inputs representing the inputs in the component. The id's defined here is used to map input value to correct property in `values` parameters used in `onChange`\n */\n inputs: MultiInputMaskInput<T>[]\n /**\n * Values used for the inputs inside the component. Expects an object with keys matching the id's defined in `inputs`\n */\n values?: MultiInputMaskValue<T>\n /**\n * Defines the delimiter used to seperate the inputs inside the component.\n */\n delimiter?: string\n /**\n * Runs when the input value changes. Has an object parameter with keys matching the id's defined in `inputs`. i.e. `{month: string, year: string}`\n */\n onChange?: (values: MultiInputMaskValue<T>) => void\n /**\n * Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.\n */\n status?: FormStatusText\n /**\n * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.\n */\n statusState?: FormStatusState\n} & Omit<\n React.HTMLProps<HTMLInputElement>,\n 'onChange' | 'ref' | 'value' | 'label'\n> &\n SpacingProps\n\nfunction MultiInputMask<T extends string>({\n label,\n labelDirection = 'horizontal',\n inputs,\n delimiter,\n onChange: onChangeExternal,\n disabled,\n status,\n statusState,\n values: defaultValues,\n className,\n ...props\n}: MultiInputMaskProps<T>) {\n const [values, onChange] = useMultiInputValue({\n inputs,\n defaultValues,\n callback: onChangeExternal,\n })\n\n const inputRefs = useRef<Array<MutableRefObject<HTMLInputElement>>>([])\n\n const { onKeyDown } = useHandleCursorPosition(\n inputRefs.current,\n getKeysToHandle()\n )\n\n const WrapperElement = label ? 'fieldset' : 'div'\n\n return (\n <WrapperElement\n className={classnames(\n 'dnb-multi-input-mask__fieldset',\n labelDirection === 'horizontal' &&\n 'dnb-multi-input-mask__fieldset--horizontal',\n createSpacingClasses(props)\n )}\n >\n {label && (\n <FormLabel\n className={classnames(\n 'dnb-multi-input-mask__legend',\n labelDirection === 'horizontal' &&\n 'dnb-multi-input-mask__legend--horizontal'\n )}\n element=\"legend\"\n onClick={onLegendClick}\n disabled={disabled}\n vertical={labelDirection === 'vertical'}\n >\n {/* This <span/> wrapper is needed to make hover work in Safari Desktop */}\n <span>{label}</span>\n </FormLabel>\n )}\n <Input\n {...props}\n className={classnames('dnb-multi-input-mask', className)}\n disabled={disabled}\n status={status}\n status_state={statusState}\n input_element={inputs.map((input, index) => (\n <Fragment key={input.id}>\n <MultiInputMaskInput\n {...input}\n value={values[input.id]}\n delimiter={\n index !== inputs.length - 1 ? delimiter : undefined\n }\n onKeyDown={onKeyDown}\n onChange={onChange}\n disabled={disabled}\n inputRef={getInputRef}\n />\n </Fragment>\n ))}\n />\n </WrapperElement>\n )\n\n // Event handlers\n function onLegendClick() {\n if (disabled) {\n return\n }\n\n const firstInput = inputRefs.current[0].current\n\n firstInput.focus()\n firstInput.setSelectionRange(0, 0)\n }\n\n // Utilites\n function getInputRef(ref: any) {\n const inputRef = ref?.inputRef\n\n if (inputRef && !inputRefs.current.includes(inputRef)) {\n inputRefs.current.push(inputRef)\n }\n }\n\n function getKeysToHandle() {\n const uniqueMasks = getUniqueMasks()\n\n // Return the only one RegExp since all the inputs are using the same mask\n if (uniqueMasks.size === 1) {\n const pattern = uniqueMasks.values().next().value.replace(/\\//g, '')\n return new RegExp(pattern)\n }\n\n // If there are multiple types of masks used, then map the maps to an object based on input ids\n // So that useHandleCursorPosition can do a per character test to see if the pressed key should be handeled or not\n return inputs.reduce(\n (keys, { id, mask }) => {\n keys[`${id}__input`] = mask\n\n return keys\n },\n {} as Record<`${T}__input`, RegExp[]>\n )\n }\n\n function getUniqueMasks() {\n const masks = new Set()\n\n inputs.forEach((input) => {\n input.mask.forEach((pattern) => masks.add(String(pattern)))\n })\n\n return masks\n }\n}\n\ntype MultiInputMaskInputProps<T extends string> =\n MultiInputMaskInput<T> & {\n id: MultiInputMaskInput<T>['id']\n label: MultiInputMaskInput<T>['label']\n value: string\n mask: MultiInputMaskInput<T>['mask']\n placeholderCharacter: MultiInputMaskInput<T>['placeholderCharacter']\n delimiter?: MultiInputMaskProps<T>['delimiter']\n disabled: boolean\n onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void\n onChange: (\n id: string,\n placeholderCharacter: MultiInputMaskInput<T>['placeholderCharacter']\n ) => void\n inputRef: any\n }\n\nfunction MultiInputMaskInput<T extends string>({\n id,\n label,\n value,\n mask,\n placeholderCharacter,\n delimiter,\n disabled,\n inputRef,\n onKeyDown,\n onChange,\n}: MultiInputMaskInputProps<T>) {\n return (\n <>\n <TextMask\n id={`${id}__input`}\n className={classnames(\n 'dnb-input__input',\n 'dnb-multi-input-mask__input',\n value && 'dnb-multi-input-mask__input--highlight'\n )}\n disabled={disabled}\n size={mask.length}\n mask={mask}\n value={value ?? ''}\n placeholderChar={placeholderCharacter}\n guide={true}\n showMask={true}\n keepCharPositions={false} // so we can overwrite next value, if it already exists\n aria-labelledby={`${id}__label`}\n ref={inputRef}\n onKeyDown={onKeyDown}\n onFocus={onFocus}\n onChange={(event) => {\n onChange(\n id,\n removePlaceholder(event.target.value, placeholderCharacter)\n )\n }}\n />\n <label id={`${id}__label`} htmlFor={`${id}__input`} hidden>\n {label}\n </label>\n {delimiter && (\n <span\n aria-hidden\n className={classnames(\n 'dnb-multi-input-mask__delimiter',\n value && 'dnb-multi-input-mask__delimiter--highlight'\n )}\n >\n {delimiter}\n </span>\n )}\n </>\n )\n\n function removePlaceholder(value: string, placeholder: string) {\n return value.replace(RegExp(placeholder, 'gm'), '')\n }\n\n function onFocus({ target }: React.FocusEvent<HTMLInputElement>) {\n target.focus()\n target.select()\n }\n}\n\nexport default MultiInputMask\n"],"mappings":"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"}
|
|
@@ -13,7 +13,7 @@ export type TextMaskInputElement =
|
|
|
13
13
|
export type TextMaskValue = string | number;
|
|
14
14
|
export interface TextMaskProps extends React.HTMLProps<HTMLElement> {
|
|
15
15
|
mask: TextMaskMask;
|
|
16
|
-
inputRef?:
|
|
16
|
+
inputRef?: React.MutableRefObject<HTMLInputElement>;
|
|
17
17
|
inputElement?: TextMaskInputElement;
|
|
18
18
|
onChange?: (...args: any[]) => any;
|
|
19
19
|
guide?: boolean;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { MutableRefObject } from 'react';
|
|
2
|
+
declare function useHandleCursorPosition(inputRefs: MutableRefObject<HTMLInputElement>[], keysToHandle?: RegExp | {
|
|
3
|
+
[inputId: string]: RegExp[];
|
|
4
|
+
}): {
|
|
5
|
+
onKeyDown: (event: React.KeyboardEvent) => void;
|
|
6
|
+
};
|
|
7
|
+
export default useHandleCursorPosition;
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _react = require("react");
|
|
8
|
+
function useHandleCursorPosition(inputRefs, keysToHandle) {
|
|
9
|
+
const inputList = (0, _react.useRef)(refsToInputList(inputRefs));
|
|
10
|
+
(0, _react.useEffect)(() => {
|
|
11
|
+
inputList.current = refsToInputList(inputRefs);
|
|
12
|
+
}, [inputRefs]);
|
|
13
|
+
function onKeyDown(event) {
|
|
14
|
+
var _getKeysToHandle;
|
|
15
|
+
const inputs = inputList.current;
|
|
16
|
+
const input = event.target;
|
|
17
|
+
const pressedKey = event.key;
|
|
18
|
+
const hasPressedKeysToHandle = ((_getKeysToHandle = getKeysToHandle({
|
|
19
|
+
keysToHandle,
|
|
20
|
+
input
|
|
21
|
+
})) === null || _getKeysToHandle === void 0 ? void 0 : _getKeysToHandle.test(pressedKey)) || /(ArrowRight|ArrowLeft|Backspace)/.test(pressedKey);
|
|
22
|
+
const initialSelectionStart = input.selectionStart;
|
|
23
|
+
const inputPosition = getInputPosition(input, inputs);
|
|
24
|
+
window.requestAnimationFrame(() => {
|
|
25
|
+
const caretPosition = getCaretPosition(input);
|
|
26
|
+
if (!hasPressedKeysToHandle) {
|
|
27
|
+
return;
|
|
28
|
+
}
|
|
29
|
+
if (caretPosition === 'last' && inputPosition !== 'last' && !(initialSelectionStart === 1 && pressedKey === 'ArrowRight')) {
|
|
30
|
+
return goToInput('next', input, inputs);
|
|
31
|
+
}
|
|
32
|
+
if (caretPosition === 'first' && inputPosition !== 'first' && !(initialSelectionStart === 1 && (pressedKey === 'ArrowLeft' || pressedKey === 'Backspace'))) {
|
|
33
|
+
return goToInput('previous', input, inputs);
|
|
34
|
+
}
|
|
35
|
+
});
|
|
36
|
+
}
|
|
37
|
+
return {
|
|
38
|
+
onKeyDown
|
|
39
|
+
};
|
|
40
|
+
}
|
|
41
|
+
function refsToInputList(inputRefs) {
|
|
42
|
+
return inputRefs.map(ref => ref.current).filter(Boolean);
|
|
43
|
+
}
|
|
44
|
+
function getKeysToHandle(_ref) {
|
|
45
|
+
let {
|
|
46
|
+
keysToHandle,
|
|
47
|
+
input
|
|
48
|
+
} = _ref;
|
|
49
|
+
if (!keysToHandle) {
|
|
50
|
+
return undefined;
|
|
51
|
+
}
|
|
52
|
+
if (keysToHandle instanceof RegExp) {
|
|
53
|
+
return keysToHandle;
|
|
54
|
+
}
|
|
55
|
+
const masks = keysToHandle[input.id];
|
|
56
|
+
const selection = input.selectionStart === input.selectionEnd ? input.selectionStart : undefined;
|
|
57
|
+
if (!selection) {
|
|
58
|
+
return undefined;
|
|
59
|
+
}
|
|
60
|
+
const maskIndex = selection === input.size ? masks.length - 1 : selection;
|
|
61
|
+
return masks[maskIndex];
|
|
62
|
+
}
|
|
63
|
+
function getInputPosition(input, inputs) {
|
|
64
|
+
const firstInput = inputs[0];
|
|
65
|
+
const lastInput = inputs[inputs.length - 1];
|
|
66
|
+
if (input === firstInput) {
|
|
67
|
+
return 'first';
|
|
68
|
+
}
|
|
69
|
+
if (input === lastInput) {
|
|
70
|
+
return 'last';
|
|
71
|
+
}
|
|
72
|
+
return 'non-initial';
|
|
73
|
+
}
|
|
74
|
+
function getSelectionPositions(input) {
|
|
75
|
+
return {
|
|
76
|
+
start: 0,
|
|
77
|
+
end: Number(input.size)
|
|
78
|
+
};
|
|
79
|
+
}
|
|
80
|
+
function getCaretPosition(input) {
|
|
81
|
+
const {
|
|
82
|
+
start,
|
|
83
|
+
end
|
|
84
|
+
} = getSelectionPositions(input);
|
|
85
|
+
const selectionStart = input.selectionStart;
|
|
86
|
+
const selectionEnd = input.selectionEnd;
|
|
87
|
+
if (selectionStart === start && selectionEnd === start) {
|
|
88
|
+
return 'first';
|
|
89
|
+
}
|
|
90
|
+
if (selectionStart === end && selectionEnd === end) {
|
|
91
|
+
return 'last';
|
|
92
|
+
}
|
|
93
|
+
return 'non-initial';
|
|
94
|
+
}
|
|
95
|
+
function goToInput(to, input, inputs) {
|
|
96
|
+
const currentInputIndex = inputs.indexOf(input);
|
|
97
|
+
const siblingIndex = to === 'next' ? currentInputIndex + 1 : to === 'previous' ? currentInputIndex - 1 : 0;
|
|
98
|
+
const siblingInput = inputs[siblingIndex];
|
|
99
|
+
const {
|
|
100
|
+
start,
|
|
101
|
+
end
|
|
102
|
+
} = getSelectionPositions(siblingInput);
|
|
103
|
+
siblingInput.focus();
|
|
104
|
+
if (to === 'next') {
|
|
105
|
+
return siblingInput.setSelectionRange(start, start);
|
|
106
|
+
}
|
|
107
|
+
if (to === 'previous') {
|
|
108
|
+
return siblingInput.setSelectionRange(end, end);
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
var _default = useHandleCursorPosition;
|
|
112
|
+
exports.default = _default;
|
|
113
|
+
//# sourceMappingURL=useHandleCursorPosition.js.map
|