@veeqo/ui 16.0.0 → 16.1.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/dist/components/DimensionsInput/DimensionsInput.cjs +22 -21
- package/dist/components/DimensionsInput/DimensionsInput.cjs.map +1 -1
- package/dist/components/DimensionsInput/DimensionsInput.d.ts +1 -0
- package/dist/components/DimensionsInput/DimensionsInput.js +22 -21
- package/dist/components/DimensionsInput/DimensionsInput.js.map +1 -1
- package/dist/components/DimensionsInput/types.d.ts +2 -0
- package/dist/components/WeightInput/WeightInput.cjs +2 -7
- package/dist/components/WeightInput/WeightInput.cjs.map +1 -1
- package/dist/components/WeightInput/WeightInput.js +2 -7
- package/dist/components/WeightInput/WeightInput.js.map +1 -1
- package/dist/components/WeightInput/WeightInput.module.scss.cjs +2 -2
- package/dist/components/WeightInput/WeightInput.module.scss.cjs.map +1 -1
- package/dist/components/WeightInput/WeightInput.module.scss.js +2 -2
- package/dist/components/WeightInput/WeightInput.module.scss.js.map +1 -1
- package/package.json +1 -1
|
@@ -2,33 +2,33 @@
|
|
|
2
2
|
|
|
3
3
|
var React = require('react');
|
|
4
4
|
var withLabels = require('../../hoc/withLabels/withLabels.cjs');
|
|
5
|
-
var
|
|
5
|
+
var buildClassnames = require('../../utils/buildClassnames.cjs');
|
|
6
|
+
require('uid/secure');
|
|
6
7
|
var blockInvalidCharacters = require('../../utils/blockInvalidCharacters.cjs');
|
|
8
|
+
var invalidCharactersNumeric = require('../../utils/invalidCharactersNumeric.cjs');
|
|
9
|
+
var WeightInput_module = require('../WeightInput/WeightInput.module.scss.cjs');
|
|
7
10
|
var InputAffix = require('../InputAffix/InputAffix.cjs');
|
|
8
|
-
var index = require('../TextField/index.cjs');
|
|
9
|
-
var Stack = require('../Stack/Stack.cjs');
|
|
10
11
|
var InputGroup = require('../InputGroup/InputGroup.cjs');
|
|
12
|
+
var FlexRow = require('../Flex/FlexRow/FlexRow.cjs');
|
|
13
|
+
var index = require('../TextField/index.cjs');
|
|
11
14
|
|
|
12
15
|
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
13
16
|
|
|
14
17
|
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
15
18
|
|
|
16
19
|
const blockInvalidChars = (e) => blockInvalidCharacters.blockInvalidCharacters(e, invalidCharactersNumeric.invalidCharsList);
|
|
17
|
-
const
|
|
18
|
-
inputGroup: {
|
|
19
|
-
flex: 1,
|
|
20
|
-
},
|
|
21
|
-
textField: {
|
|
22
|
-
flex: 1,
|
|
23
|
-
},
|
|
24
|
-
};
|
|
25
|
-
const DimensionsInput = withLabels.withLabels(({ size = 'base', handleChangeHeight, handleChangeWidth, handleChangeLength, className, height, width, length, unit = 'cm', hasError, ...rest }) => {
|
|
20
|
+
const DimensionsInput = withLabels.withLabels(({ size = 'base', handleChangeHeight, handleChangeWidth, handleChangeLength, className, height, width, length, unit = 'cm', hasError, placeholder = '0', ...rest }) => {
|
|
26
21
|
const compact = size === 'sm';
|
|
22
|
+
// Default (grey-base) outline for both field + affix; omitted on error so the
|
|
23
|
+
// error/focus border colours take over. Matches WeightInput exactly.
|
|
24
|
+
const defaultBorder = hasError ? undefined : WeightInput_module.defaultBorder;
|
|
25
|
+
// Group gets an error modifier so the focus-within ring turns red on error.
|
|
26
|
+
const groupClass = buildClassnames.buildClassnames([WeightInput_module.group, hasError && WeightInput_module.groupError]);
|
|
27
27
|
const childProps = {
|
|
28
28
|
inputGroup: {
|
|
29
29
|
hasError,
|
|
30
30
|
compact,
|
|
31
|
-
|
|
31
|
+
className: groupClass,
|
|
32
32
|
},
|
|
33
33
|
textField: {
|
|
34
34
|
type: 'number',
|
|
@@ -37,25 +37,26 @@ const DimensionsInput = withLabels.withLabels(({ size = 'base', handleChangeHeig
|
|
|
37
37
|
onKeyDown: blockInvalidChars,
|
|
38
38
|
size,
|
|
39
39
|
hasError,
|
|
40
|
-
|
|
40
|
+
className: buildClassnames.buildClassnames([WeightInput_module.field, defaultBorder]),
|
|
41
41
|
...rest,
|
|
42
42
|
},
|
|
43
43
|
inputAffix: {
|
|
44
44
|
compact,
|
|
45
|
+
className: buildClassnames.buildClassnames([WeightInput_module.affix, defaultBorder]),
|
|
45
46
|
},
|
|
46
47
|
};
|
|
47
|
-
return (React__default.default.createElement(
|
|
48
|
-
React__default.default.createElement(InputGroup.InputGroup, { ...childProps.inputGroup
|
|
48
|
+
return (React__default.default.createElement(FlexRow.FlexRow, { alignItems: "center", gap: 3, className: className },
|
|
49
|
+
React__default.default.createElement(InputGroup.InputGroup, { ...childProps.inputGroup },
|
|
49
50
|
React__default.default.createElement(InputAffix.InputAffix, { ...childProps.inputAffix }, "L"),
|
|
50
|
-
React__default.default.createElement(index.TextField, { ...childProps.textField, name: "length", value: length, "aria-label": "Length", "aria-describedby": "length-unit", onChange: handleChangeLength, placeholder:
|
|
51
|
+
React__default.default.createElement(index.TextField, { ...childProps.textField, name: "length", value: length, "aria-label": "Length", "aria-describedby": "length-unit", onChange: handleChangeLength, placeholder: placeholder }),
|
|
51
52
|
React__default.default.createElement(InputAffix.InputAffix, { id: "length-unit", ...childProps.inputAffix }, unit)),
|
|
52
|
-
React__default.default.createElement(InputGroup.InputGroup, { ...childProps.inputGroup
|
|
53
|
+
React__default.default.createElement(InputGroup.InputGroup, { ...childProps.inputGroup },
|
|
53
54
|
React__default.default.createElement(InputAffix.InputAffix, { ...childProps.inputAffix }, "W"),
|
|
54
|
-
React__default.default.createElement(index.TextField, { ...childProps.textField, name: "width", value: width, "aria-label": "Width", "aria-describedby": "width-unit", onChange: handleChangeWidth, placeholder:
|
|
55
|
+
React__default.default.createElement(index.TextField, { ...childProps.textField, name: "width", value: width, "aria-label": "Width", "aria-describedby": "width-unit", onChange: handleChangeWidth, placeholder: placeholder }),
|
|
55
56
|
React__default.default.createElement(InputAffix.InputAffix, { id: "width-unit", ...childProps.inputAffix }, unit)),
|
|
56
|
-
React__default.default.createElement(InputGroup.InputGroup, { ...childProps.inputGroup
|
|
57
|
+
React__default.default.createElement(InputGroup.InputGroup, { ...childProps.inputGroup },
|
|
57
58
|
React__default.default.createElement(InputAffix.InputAffix, { ...childProps.inputAffix }, "H"),
|
|
58
|
-
React__default.default.createElement(index.TextField, { ...childProps.textField, name: "height", value: height, "aria-label": "Height", "aria-describedby": "height-unit", onChange: handleChangeHeight, placeholder:
|
|
59
|
+
React__default.default.createElement(index.TextField, { ...childProps.textField, name: "height", value: height, "aria-label": "Height", "aria-describedby": "height-unit", onChange: handleChangeHeight, placeholder: placeholder }),
|
|
59
60
|
React__default.default.createElement(InputAffix.InputAffix, { id: "height-unit", ...childProps.inputAffix }, unit))));
|
|
60
61
|
});
|
|
61
62
|
DimensionsInput.displayName = 'DimensionsInput';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DimensionsInput.cjs","sources":["../../../src/components/DimensionsInput/DimensionsInput.tsx"],"sourcesContent":["import React from 'react';\n\nimport { withLabels } from '../../hoc';\nimport {
|
|
1
|
+
{"version":3,"file":"DimensionsInput.cjs","sources":["../../../src/components/DimensionsInput/DimensionsInput.tsx"],"sourcesContent":["import React from 'react';\n\nimport { withLabels } from '../../hoc';\nimport { buildClassnames } from '../../utils';\nimport { blockInvalidCharacters } from '../../utils/blockInvalidCharacters';\nimport { invalidCharsList } from '../../utils/invalidCharactersNumeric';\n// Share WeightInput's module so both inputs use one source of truth for the\n// group/field/affix border + affix text treatment.\nimport styles from '../WeightInput/WeightInput.module.scss';\n\nimport { InputAffix, InputAffixProps } from '../InputAffix';\nimport { InputGroup, InputGroupProps } from '../InputGroup';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { TextField, TextFieldProps } from '../TextField';\n\nimport { DimensionsProps } from './types';\n\ntype ChildComponentProps = {\n inputGroup: Partial<InputGroupProps>;\n textField: Partial<TextFieldProps>;\n inputAffix: Partial<InputAffixProps>;\n};\n\nconst blockInvalidChars = (e: React.KeyboardEvent) => blockInvalidCharacters(e, invalidCharsList);\n\nexport const DimensionsInput = withLabels<DimensionsProps>(\n ({\n size = 'base',\n handleChangeHeight,\n handleChangeWidth,\n handleChangeLength,\n className,\n height,\n width,\n length,\n unit = 'cm',\n hasError,\n placeholder = '0',\n ...rest\n }) => {\n const compact = size === 'sm';\n\n // Default (grey-base) outline for both field + affix; omitted on error so the\n // error/focus border colours take over. Matches WeightInput exactly.\n const defaultBorder = hasError ? undefined : styles.defaultBorder;\n\n // Group gets an error modifier so the focus-within ring turns red on error.\n const groupClass = buildClassnames([styles.group, hasError && styles.groupError]);\n\n const childProps: ChildComponentProps = {\n inputGroup: {\n hasError,\n compact,\n className: groupClass,\n },\n textField: {\n type: 'number',\n min: '0',\n step: 'any',\n onKeyDown: blockInvalidChars,\n size,\n hasError,\n className: buildClassnames([styles.field, defaultBorder]),\n ...rest,\n },\n inputAffix: {\n compact,\n className: buildClassnames([styles.affix, defaultBorder]),\n },\n };\n\n return (\n <FlexRow alignItems=\"center\" gap={3} className={className}>\n <InputGroup {...childProps.inputGroup}>\n <InputAffix {...childProps.inputAffix}>L</InputAffix>\n <TextField\n {...childProps.textField}\n name=\"length\"\n value={length}\n aria-label=\"Length\"\n aria-describedby=\"length-unit\"\n onChange={handleChangeLength}\n placeholder={placeholder}\n />\n <InputAffix id=\"length-unit\" {...childProps.inputAffix}>\n {unit}\n </InputAffix>\n </InputGroup>\n <InputGroup {...childProps.inputGroup}>\n <InputAffix {...childProps.inputAffix}>W</InputAffix>\n <TextField\n {...childProps.textField}\n name=\"width\"\n value={width}\n aria-label=\"Width\"\n aria-describedby=\"width-unit\"\n onChange={handleChangeWidth}\n placeholder={placeholder}\n />\n <InputAffix id=\"width-unit\" {...childProps.inputAffix}>\n {unit}\n </InputAffix>\n </InputGroup>\n <InputGroup {...childProps.inputGroup}>\n <InputAffix {...childProps.inputAffix}>H</InputAffix>\n <TextField\n {...childProps.textField}\n name=\"height\"\n value={height}\n aria-label=\"Height\"\n aria-describedby=\"height-unit\"\n onChange={handleChangeHeight}\n placeholder={placeholder}\n />\n <InputAffix id=\"height-unit\" {...childProps.inputAffix}>\n {unit}\n </InputAffix>\n </InputGroup>\n </FlexRow>\n );\n },\n);\n\nDimensionsInput.displayName = 'DimensionsInput';\n"],"names":["blockInvalidCharacters","invalidCharsList","withLabels","styles","buildClassnames","React","FlexRow","InputGroup","InputAffix","TextField"],"mappings":"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"}
|
|
@@ -328,4 +328,5 @@ export declare const DimensionsInput: React.ForwardRefExoticComponent<{
|
|
|
328
328
|
unit?: string | undefined;
|
|
329
329
|
className?: string | undefined;
|
|
330
330
|
hasError?: boolean | undefined;
|
|
331
|
+
placeholder?: string | undefined;
|
|
331
332
|
} & import("../../hoc/withLabels/withLabels").WithLabelsProps & React.RefAttributes<unknown>>;
|
|
@@ -1,28 +1,28 @@
|
|
|
1
1
|
import React__default from 'react';
|
|
2
2
|
import { withLabels } from '../../hoc/withLabels/withLabels.js';
|
|
3
|
-
import {
|
|
3
|
+
import { buildClassnames } from '../../utils/buildClassnames.js';
|
|
4
|
+
import 'uid/secure';
|
|
4
5
|
import { blockInvalidCharacters } from '../../utils/blockInvalidCharacters.js';
|
|
6
|
+
import { invalidCharsList } from '../../utils/invalidCharactersNumeric.js';
|
|
7
|
+
import styles from '../WeightInput/WeightInput.module.scss.js';
|
|
5
8
|
import { InputAffix } from '../InputAffix/InputAffix.js';
|
|
6
|
-
import { TextField } from '../TextField/index.js';
|
|
7
|
-
import { Stack } from '../Stack/Stack.js';
|
|
8
9
|
import { InputGroup } from '../InputGroup/InputGroup.js';
|
|
10
|
+
import { FlexRow } from '../Flex/FlexRow/FlexRow.js';
|
|
11
|
+
import { TextField } from '../TextField/index.js';
|
|
9
12
|
|
|
10
13
|
const blockInvalidChars = (e) => blockInvalidCharacters(e, invalidCharsList);
|
|
11
|
-
const
|
|
12
|
-
inputGroup: {
|
|
13
|
-
flex: 1,
|
|
14
|
-
},
|
|
15
|
-
textField: {
|
|
16
|
-
flex: 1,
|
|
17
|
-
},
|
|
18
|
-
};
|
|
19
|
-
const DimensionsInput = withLabels(({ size = 'base', handleChangeHeight, handleChangeWidth, handleChangeLength, className, height, width, length, unit = 'cm', hasError, ...rest }) => {
|
|
14
|
+
const DimensionsInput = withLabels(({ size = 'base', handleChangeHeight, handleChangeWidth, handleChangeLength, className, height, width, length, unit = 'cm', hasError, placeholder = '0', ...rest }) => {
|
|
20
15
|
const compact = size === 'sm';
|
|
16
|
+
// Default (grey-base) outline for both field + affix; omitted on error so the
|
|
17
|
+
// error/focus border colours take over. Matches WeightInput exactly.
|
|
18
|
+
const defaultBorder = hasError ? undefined : styles.defaultBorder;
|
|
19
|
+
// Group gets an error modifier so the focus-within ring turns red on error.
|
|
20
|
+
const groupClass = buildClassnames([styles.group, hasError && styles.groupError]);
|
|
21
21
|
const childProps = {
|
|
22
22
|
inputGroup: {
|
|
23
23
|
hasError,
|
|
24
24
|
compact,
|
|
25
|
-
|
|
25
|
+
className: groupClass,
|
|
26
26
|
},
|
|
27
27
|
textField: {
|
|
28
28
|
type: 'number',
|
|
@@ -31,25 +31,26 @@ const DimensionsInput = withLabels(({ size = 'base', handleChangeHeight, handleC
|
|
|
31
31
|
onKeyDown: blockInvalidChars,
|
|
32
32
|
size,
|
|
33
33
|
hasError,
|
|
34
|
-
|
|
34
|
+
className: buildClassnames([styles.field, defaultBorder]),
|
|
35
35
|
...rest,
|
|
36
36
|
},
|
|
37
37
|
inputAffix: {
|
|
38
38
|
compact,
|
|
39
|
+
className: buildClassnames([styles.affix, defaultBorder]),
|
|
39
40
|
},
|
|
40
41
|
};
|
|
41
|
-
return (React__default.createElement(
|
|
42
|
-
React__default.createElement(InputGroup, { ...childProps.inputGroup
|
|
42
|
+
return (React__default.createElement(FlexRow, { alignItems: "center", gap: 3, className: className },
|
|
43
|
+
React__default.createElement(InputGroup, { ...childProps.inputGroup },
|
|
43
44
|
React__default.createElement(InputAffix, { ...childProps.inputAffix }, "L"),
|
|
44
|
-
React__default.createElement(TextField, { ...childProps.textField, name: "length", value: length, "aria-label": "Length", "aria-describedby": "length-unit", onChange: handleChangeLength, placeholder:
|
|
45
|
+
React__default.createElement(TextField, { ...childProps.textField, name: "length", value: length, "aria-label": "Length", "aria-describedby": "length-unit", onChange: handleChangeLength, placeholder: placeholder }),
|
|
45
46
|
React__default.createElement(InputAffix, { id: "length-unit", ...childProps.inputAffix }, unit)),
|
|
46
|
-
React__default.createElement(InputGroup, { ...childProps.inputGroup
|
|
47
|
+
React__default.createElement(InputGroup, { ...childProps.inputGroup },
|
|
47
48
|
React__default.createElement(InputAffix, { ...childProps.inputAffix }, "W"),
|
|
48
|
-
React__default.createElement(TextField, { ...childProps.textField, name: "width", value: width, "aria-label": "Width", "aria-describedby": "width-unit", onChange: handleChangeWidth, placeholder:
|
|
49
|
+
React__default.createElement(TextField, { ...childProps.textField, name: "width", value: width, "aria-label": "Width", "aria-describedby": "width-unit", onChange: handleChangeWidth, placeholder: placeholder }),
|
|
49
50
|
React__default.createElement(InputAffix, { id: "width-unit", ...childProps.inputAffix }, unit)),
|
|
50
|
-
React__default.createElement(InputGroup, { ...childProps.inputGroup
|
|
51
|
+
React__default.createElement(InputGroup, { ...childProps.inputGroup },
|
|
51
52
|
React__default.createElement(InputAffix, { ...childProps.inputAffix }, "H"),
|
|
52
|
-
React__default.createElement(TextField, { ...childProps.textField, name: "height", value: height, "aria-label": "Height", "aria-describedby": "height-unit", onChange: handleChangeHeight, placeholder:
|
|
53
|
+
React__default.createElement(TextField, { ...childProps.textField, name: "height", value: height, "aria-label": "Height", "aria-describedby": "height-unit", onChange: handleChangeHeight, placeholder: placeholder }),
|
|
53
54
|
React__default.createElement(InputAffix, { id: "height-unit", ...childProps.inputAffix }, unit))));
|
|
54
55
|
});
|
|
55
56
|
DimensionsInput.displayName = 'DimensionsInput';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DimensionsInput.js","sources":["../../../src/components/DimensionsInput/DimensionsInput.tsx"],"sourcesContent":["import React from 'react';\n\nimport { withLabels } from '../../hoc';\nimport {
|
|
1
|
+
{"version":3,"file":"DimensionsInput.js","sources":["../../../src/components/DimensionsInput/DimensionsInput.tsx"],"sourcesContent":["import React from 'react';\n\nimport { withLabels } from '../../hoc';\nimport { buildClassnames } from '../../utils';\nimport { blockInvalidCharacters } from '../../utils/blockInvalidCharacters';\nimport { invalidCharsList } from '../../utils/invalidCharactersNumeric';\n// Share WeightInput's module so both inputs use one source of truth for the\n// group/field/affix border + affix text treatment.\nimport styles from '../WeightInput/WeightInput.module.scss';\n\nimport { InputAffix, InputAffixProps } from '../InputAffix';\nimport { InputGroup, InputGroupProps } from '../InputGroup';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { TextField, TextFieldProps } from '../TextField';\n\nimport { DimensionsProps } from './types';\n\ntype ChildComponentProps = {\n inputGroup: Partial<InputGroupProps>;\n textField: Partial<TextFieldProps>;\n inputAffix: Partial<InputAffixProps>;\n};\n\nconst blockInvalidChars = (e: React.KeyboardEvent) => blockInvalidCharacters(e, invalidCharsList);\n\nexport const DimensionsInput = withLabels<DimensionsProps>(\n ({\n size = 'base',\n handleChangeHeight,\n handleChangeWidth,\n handleChangeLength,\n className,\n height,\n width,\n length,\n unit = 'cm',\n hasError,\n placeholder = '0',\n ...rest\n }) => {\n const compact = size === 'sm';\n\n // Default (grey-base) outline for both field + affix; omitted on error so the\n // error/focus border colours take over. Matches WeightInput exactly.\n const defaultBorder = hasError ? undefined : styles.defaultBorder;\n\n // Group gets an error modifier so the focus-within ring turns red on error.\n const groupClass = buildClassnames([styles.group, hasError && styles.groupError]);\n\n const childProps: ChildComponentProps = {\n inputGroup: {\n hasError,\n compact,\n className: groupClass,\n },\n textField: {\n type: 'number',\n min: '0',\n step: 'any',\n onKeyDown: blockInvalidChars,\n size,\n hasError,\n className: buildClassnames([styles.field, defaultBorder]),\n ...rest,\n },\n inputAffix: {\n compact,\n className: buildClassnames([styles.affix, defaultBorder]),\n },\n };\n\n return (\n <FlexRow alignItems=\"center\" gap={3} className={className}>\n <InputGroup {...childProps.inputGroup}>\n <InputAffix {...childProps.inputAffix}>L</InputAffix>\n <TextField\n {...childProps.textField}\n name=\"length\"\n value={length}\n aria-label=\"Length\"\n aria-describedby=\"length-unit\"\n onChange={handleChangeLength}\n placeholder={placeholder}\n />\n <InputAffix id=\"length-unit\" {...childProps.inputAffix}>\n {unit}\n </InputAffix>\n </InputGroup>\n <InputGroup {...childProps.inputGroup}>\n <InputAffix {...childProps.inputAffix}>W</InputAffix>\n <TextField\n {...childProps.textField}\n name=\"width\"\n value={width}\n aria-label=\"Width\"\n aria-describedby=\"width-unit\"\n onChange={handleChangeWidth}\n placeholder={placeholder}\n />\n <InputAffix id=\"width-unit\" {...childProps.inputAffix}>\n {unit}\n </InputAffix>\n </InputGroup>\n <InputGroup {...childProps.inputGroup}>\n <InputAffix {...childProps.inputAffix}>H</InputAffix>\n <TextField\n {...childProps.textField}\n name=\"height\"\n value={height}\n aria-label=\"Height\"\n aria-describedby=\"height-unit\"\n onChange={handleChangeHeight}\n placeholder={placeholder}\n />\n <InputAffix id=\"height-unit\" {...childProps.inputAffix}>\n {unit}\n </InputAffix>\n </InputGroup>\n </FlexRow>\n );\n },\n);\n\nDimensionsInput.displayName = 'DimensionsInput';\n"],"names":["React"],"mappings":"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"}
|
|
@@ -9,8 +9,8 @@ var invalidCharactersNumeric = require('../../utils/invalidCharactersNumeric.cjs
|
|
|
9
9
|
var WeightInput_module = require('./WeightInput.module.scss.cjs');
|
|
10
10
|
var InputAffix = require('../InputAffix/InputAffix.cjs');
|
|
11
11
|
var InputGroup = require('../InputGroup/InputGroup.cjs');
|
|
12
|
-
var Stack = require('../Stack/Stack.cjs');
|
|
13
12
|
var index = require('../TextField/index.cjs');
|
|
13
|
+
var FlexRow = require('../Flex/FlexRow/FlexRow.cjs');
|
|
14
14
|
var types = require('./types.cjs');
|
|
15
15
|
|
|
16
16
|
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
@@ -27,11 +27,6 @@ const WeightInput = withLabels.withLabels((props) => {
|
|
|
27
27
|
// Group gets an error modifier so the focus-within ring turns red on error.
|
|
28
28
|
const groupClass = buildClassnames.buildClassnames([WeightInput_module.group, hasError && WeightInput_module.groupError]);
|
|
29
29
|
const childProps = {
|
|
30
|
-
stack: {
|
|
31
|
-
direction: 'horizontal',
|
|
32
|
-
alignY: 'center',
|
|
33
|
-
spacing: 'base',
|
|
34
|
-
},
|
|
35
30
|
inputGroup: {
|
|
36
31
|
className: groupClass,
|
|
37
32
|
hasError,
|
|
@@ -60,7 +55,7 @@ const WeightInput = withLabels.withLabels((props) => {
|
|
|
60
55
|
}
|
|
61
56
|
// If the weight is imperial, render pounds and ounces
|
|
62
57
|
if (types.isWeightImperial(props)) {
|
|
63
|
-
return (React__default.default.createElement(
|
|
58
|
+
return (React__default.default.createElement(FlexRow.FlexRow, { alignItems: "center", gap: "base", className: className },
|
|
64
59
|
React__default.default.createElement(InputGroup.InputGroup, { ...childProps.inputGroup },
|
|
65
60
|
React__default.default.createElement(index.TextField, { ...childProps.textField, name: "pound", value: props.pound, "aria-label": "Pounds", onChange: props.handleChangePound }),
|
|
66
61
|
React__default.default.createElement(InputAffix.InputAffix, { ...childProps.inputAffix }, "lb")),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WeightInput.cjs","sources":["../../../src/components/WeightInput/WeightInput.tsx"],"sourcesContent":["import React from 'react';\n\nimport { withLabels } from '../../hoc';\nimport { buildClassnames } from '../../utils';\nimport { blockInvalidCharacters } from '../../utils/blockInvalidCharacters';\nimport { invalidCharsList } from '../../utils/invalidCharactersNumeric';\nimport styles from './WeightInput.module.scss';\n\nimport { InputAffix, InputAffixProps } from '../InputAffix';\nimport { InputGroup, InputGroupProps } from '../InputGroup';\nimport {
|
|
1
|
+
{"version":3,"file":"WeightInput.cjs","sources":["../../../src/components/WeightInput/WeightInput.tsx"],"sourcesContent":["import React from 'react';\n\nimport { withLabels } from '../../hoc';\nimport { buildClassnames } from '../../utils';\nimport { blockInvalidCharacters } from '../../utils/blockInvalidCharacters';\nimport { invalidCharsList } from '../../utils/invalidCharactersNumeric';\nimport styles from './WeightInput.module.scss';\n\nimport { InputAffix, InputAffixProps } from '../InputAffix';\nimport { InputGroup, InputGroupProps } from '../InputGroup';\nimport { TextField, TextFieldProps } from '../TextField';\n\nimport { FlexRow } from '../Flex/FlexRow';\nimport { WeightProps, isWeightImperial, isWeightMetric } from './types';\n\ntype ChildComponentProps = {\n inputGroup: Partial<InputGroupProps>;\n textField: Partial<TextFieldProps>;\n inputAffix: Partial<InputAffixProps>;\n};\n\nconst blockInvalidChars = (e: React.KeyboardEvent) => blockInvalidCharacters(e, invalidCharsList);\n\nexport const WeightInput = withLabels<WeightProps>((props) => {\n const { size = 'base', hasError, disabled, className } = props;\n\n const compact = size === 'sm';\n\n // Default (#CDD1D5) outline for both field + affix; omitted on error so the\n // error/focus border colours take over.\n const defaultBorder = hasError ? undefined : styles.defaultBorder;\n\n // Group gets an error modifier so the focus-within ring turns red on error.\n const groupClass = buildClassnames([styles.group, hasError && styles.groupError]);\n\n const childProps: ChildComponentProps = {\n inputGroup: {\n className: groupClass,\n hasError,\n },\n textField: {\n type: 'number',\n placeholder: '0.00',\n min: '0',\n step: 'any',\n size,\n disabled,\n hasError,\n onKeyDown: blockInvalidChars,\n className: buildClassnames([styles.field, defaultBorder]),\n },\n inputAffix: {\n compact,\n className: buildClassnames([styles.affix, defaultBorder]),\n },\n };\n\n // If the weight is metric, render grams\n if (isWeightMetric(props)) {\n return (\n <InputGroup {...childProps.inputGroup} className={buildClassnames([groupClass, className])}>\n <TextField\n {...childProps.textField}\n name=\"gram\"\n value={props.gram}\n aria-label=\"Grams\"\n onChange={props.handleChangeGram}\n />\n <InputAffix {...childProps.inputAffix}>g</InputAffix>\n </InputGroup>\n );\n }\n\n // If the weight is imperial, render pounds and ounces\n if (isWeightImperial(props)) {\n return (\n <FlexRow alignItems=\"center\" gap=\"base\" className={className}>\n <InputGroup {...childProps.inputGroup}>\n <TextField\n {...childProps.textField}\n name=\"pound\"\n value={props.pound}\n aria-label=\"Pounds\"\n onChange={props.handleChangePound}\n />\n <InputAffix {...childProps.inputAffix}>lb</InputAffix>\n </InputGroup>\n <InputGroup {...childProps.inputGroup}>\n <TextField\n {...childProps.textField}\n name=\"ounce\"\n value={props.ounce}\n aria-label=\"Ounces\"\n onChange={props.handleChangeOunce}\n />\n <InputAffix {...childProps.inputAffix}>oz</InputAffix>\n </InputGroup>\n </FlexRow>\n );\n }\n\n // If neither metric nor imperial, return null or handle as needed\n return null;\n});\n\nWeightInput.displayName = 'WeightInput';\n"],"names":["blockInvalidCharacters","invalidCharsList","withLabels","styles","buildClassnames","isWeightMetric","React","InputGroup","TextField","InputAffix","isWeightImperial","FlexRow"],"mappings":"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"}
|
|
@@ -7,8 +7,8 @@ import { invalidCharsList } from '../../utils/invalidCharactersNumeric.js';
|
|
|
7
7
|
import styles from './WeightInput.module.scss.js';
|
|
8
8
|
import { InputAffix } from '../InputAffix/InputAffix.js';
|
|
9
9
|
import { InputGroup } from '../InputGroup/InputGroup.js';
|
|
10
|
-
import { Stack } from '../Stack/Stack.js';
|
|
11
10
|
import { TextField } from '../TextField/index.js';
|
|
11
|
+
import { FlexRow } from '../Flex/FlexRow/FlexRow.js';
|
|
12
12
|
import { isWeightMetric, isWeightImperial } from './types.js';
|
|
13
13
|
|
|
14
14
|
const blockInvalidChars = (e) => blockInvalidCharacters(e, invalidCharsList);
|
|
@@ -21,11 +21,6 @@ const WeightInput = withLabels((props) => {
|
|
|
21
21
|
// Group gets an error modifier so the focus-within ring turns red on error.
|
|
22
22
|
const groupClass = buildClassnames([styles.group, hasError && styles.groupError]);
|
|
23
23
|
const childProps = {
|
|
24
|
-
stack: {
|
|
25
|
-
direction: 'horizontal',
|
|
26
|
-
alignY: 'center',
|
|
27
|
-
spacing: 'base',
|
|
28
|
-
},
|
|
29
24
|
inputGroup: {
|
|
30
25
|
className: groupClass,
|
|
31
26
|
hasError,
|
|
@@ -54,7 +49,7 @@ const WeightInput = withLabels((props) => {
|
|
|
54
49
|
}
|
|
55
50
|
// If the weight is imperial, render pounds and ounces
|
|
56
51
|
if (isWeightImperial(props)) {
|
|
57
|
-
return (React__default.createElement(
|
|
52
|
+
return (React__default.createElement(FlexRow, { alignItems: "center", gap: "base", className: className },
|
|
58
53
|
React__default.createElement(InputGroup, { ...childProps.inputGroup },
|
|
59
54
|
React__default.createElement(TextField, { ...childProps.textField, name: "pound", value: props.pound, "aria-label": "Pounds", onChange: props.handleChangePound }),
|
|
60
55
|
React__default.createElement(InputAffix, { ...childProps.inputAffix }, "lb")),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WeightInput.js","sources":["../../../src/components/WeightInput/WeightInput.tsx"],"sourcesContent":["import React from 'react';\n\nimport { withLabels } from '../../hoc';\nimport { buildClassnames } from '../../utils';\nimport { blockInvalidCharacters } from '../../utils/blockInvalidCharacters';\nimport { invalidCharsList } from '../../utils/invalidCharactersNumeric';\nimport styles from './WeightInput.module.scss';\n\nimport { InputAffix, InputAffixProps } from '../InputAffix';\nimport { InputGroup, InputGroupProps } from '../InputGroup';\nimport {
|
|
1
|
+
{"version":3,"file":"WeightInput.js","sources":["../../../src/components/WeightInput/WeightInput.tsx"],"sourcesContent":["import React from 'react';\n\nimport { withLabels } from '../../hoc';\nimport { buildClassnames } from '../../utils';\nimport { blockInvalidCharacters } from '../../utils/blockInvalidCharacters';\nimport { invalidCharsList } from '../../utils/invalidCharactersNumeric';\nimport styles from './WeightInput.module.scss';\n\nimport { InputAffix, InputAffixProps } from '../InputAffix';\nimport { InputGroup, InputGroupProps } from '../InputGroup';\nimport { TextField, TextFieldProps } from '../TextField';\n\nimport { FlexRow } from '../Flex/FlexRow';\nimport { WeightProps, isWeightImperial, isWeightMetric } from './types';\n\ntype ChildComponentProps = {\n inputGroup: Partial<InputGroupProps>;\n textField: Partial<TextFieldProps>;\n inputAffix: Partial<InputAffixProps>;\n};\n\nconst blockInvalidChars = (e: React.KeyboardEvent) => blockInvalidCharacters(e, invalidCharsList);\n\nexport const WeightInput = withLabels<WeightProps>((props) => {\n const { size = 'base', hasError, disabled, className } = props;\n\n const compact = size === 'sm';\n\n // Default (#CDD1D5) outline for both field + affix; omitted on error so the\n // error/focus border colours take over.\n const defaultBorder = hasError ? undefined : styles.defaultBorder;\n\n // Group gets an error modifier so the focus-within ring turns red on error.\n const groupClass = buildClassnames([styles.group, hasError && styles.groupError]);\n\n const childProps: ChildComponentProps = {\n inputGroup: {\n className: groupClass,\n hasError,\n },\n textField: {\n type: 'number',\n placeholder: '0.00',\n min: '0',\n step: 'any',\n size,\n disabled,\n hasError,\n onKeyDown: blockInvalidChars,\n className: buildClassnames([styles.field, defaultBorder]),\n },\n inputAffix: {\n compact,\n className: buildClassnames([styles.affix, defaultBorder]),\n },\n };\n\n // If the weight is metric, render grams\n if (isWeightMetric(props)) {\n return (\n <InputGroup {...childProps.inputGroup} className={buildClassnames([groupClass, className])}>\n <TextField\n {...childProps.textField}\n name=\"gram\"\n value={props.gram}\n aria-label=\"Grams\"\n onChange={props.handleChangeGram}\n />\n <InputAffix {...childProps.inputAffix}>g</InputAffix>\n </InputGroup>\n );\n }\n\n // If the weight is imperial, render pounds and ounces\n if (isWeightImperial(props)) {\n return (\n <FlexRow alignItems=\"center\" gap=\"base\" className={className}>\n <InputGroup {...childProps.inputGroup}>\n <TextField\n {...childProps.textField}\n name=\"pound\"\n value={props.pound}\n aria-label=\"Pounds\"\n onChange={props.handleChangePound}\n />\n <InputAffix {...childProps.inputAffix}>lb</InputAffix>\n </InputGroup>\n <InputGroup {...childProps.inputGroup}>\n <TextField\n {...childProps.textField}\n name=\"ounce\"\n value={props.ounce}\n aria-label=\"Ounces\"\n onChange={props.handleChangeOunce}\n />\n <InputAffix {...childProps.inputAffix}>oz</InputAffix>\n </InputGroup>\n </FlexRow>\n );\n }\n\n // If neither metric nor imperial, return null or handle as needed\n return null;\n});\n\nWeightInput.displayName = 'WeightInput';\n"],"names":["React"],"mappings":"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"}
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
|
|
4
4
|
|
|
5
|
-
___$insertStyle(".
|
|
6
|
-
var styles = {"group":"
|
|
5
|
+
___$insertStyle("._group_5x4fb_1 {\n flex: 1;\n --interactive-border: var(--colors-secondary-blue-base);\n --focus-ring: var(--colors-secondary-blue-light);\n /* Only focus/active states additionally get the outer focus ring. */\n}\n._group_5x4fb_1 ._defaultBorder_5x4fb_7 {\n --border-color: var(--colors-neutral-grey-base);\n}\n._group_5x4fb_1:not(:has(:disabled)):hover, ._group_5x4fb_1:focus-within, ._group_5x4fb_1:not(:has(:disabled)):active {\n border-radius: var(--radius-base);\n}\n._group_5x4fb_1:not(:has(:disabled)):hover > ._field_5x4fb_13,\n._group_5x4fb_1:not(:has(:disabled)):hover > ._affix_5x4fb_14, ._group_5x4fb_1:focus-within > ._field_5x4fb_13,\n._group_5x4fb_1:focus-within > ._affix_5x4fb_14, ._group_5x4fb_1:not(:has(:disabled)):active > ._field_5x4fb_13,\n._group_5x4fb_1:not(:has(:disabled)):active > ._affix_5x4fb_14 {\n outline: none;\n border-color: var(--interactive-border);\n}\n._group_5x4fb_1:focus-within, ._group_5x4fb_1:not(:has(:disabled)):active {\n outline: var(--sizes-xs) solid var(--focus-ring);\n}\n\n._field_5x4fb_13 {\n flex: 1;\n}\n\n._affix_5x4fb_14 {\n flex: 0;\n --text-hint-text-color: var(--colors-neutral-ink-lightest);\n --text-hint-text-line-height: var(--text-body-line-height);\n}\n\n._groupError_5x4fb_34 {\n --interactive-border: var(--colors-secondary-red-base);\n --focus-ring: var(--colors-secondary-red-light);\n}\n._groupError_5x4fb_34 > ._field_5x4fb_13,\n._groupError_5x4fb_34 > ._affix_5x4fb_14 {\n outline: none;\n border-color: var(--colors-secondary-red-base);\n}");
|
|
6
|
+
var styles = {"group":"_group_5x4fb_1","defaultBorder":"_defaultBorder_5x4fb_7","field":"_field_5x4fb_13","affix":"_affix_5x4fb_14","groupError":"_groupError_5x4fb_34"};
|
|
7
7
|
|
|
8
8
|
module.exports = styles;
|
|
9
9
|
//# sourceMappingURL=WeightInput.module.scss.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WeightInput.module.scss.cjs","sources":["../../../src/components/WeightInput/WeightInput.module.scss"],"sourcesContent":[".group {\n flex: 1;\n\n --interactive-border: var(--colors-secondary-blue-base);\n --focus-ring: var(--colors-secondary-blue-light);\n .defaultBorder {\n --border-color: var(--colors-neutral-grey-
|
|
1
|
+
{"version":3,"file":"WeightInput.module.scss.cjs","sources":["../../../src/components/WeightInput/WeightInput.module.scss"],"sourcesContent":[".group {\n flex: 1;\n\n --interactive-border: var(--colors-secondary-blue-base);\n --focus-ring: var(--colors-secondary-blue-light);\n .defaultBorder {\n --border-color: var(--colors-neutral-grey-base);\n }\n\n &:not(:has(:disabled)):hover,\n &:focus-within,\n &:not(:has(:disabled)):active {\n border-radius: var(--radius-base);\n > .field,\n > .affix {\n outline: none;\n border-color: var(--interactive-border);\n }\n }\n\n /* Only focus/active states additionally get the outer focus ring. */\n &:focus-within,\n &:not(:has(:disabled)):active {\n outline: var(--sizes-xs) solid var(--focus-ring);\n }\n}\n\n.field {\n flex: 1;\n}\n\n.affix {\n flex: 0;\n\n --text-hint-text-color: var(--colors-neutral-ink-lightest);\n --text-hint-text-line-height: var(--text-body-line-height);\n}\n\n.groupError {\n --interactive-border: var(--colors-secondary-red-base);\n --focus-ring: var(--colors-secondary-red-light);\n\n > .field,\n > .affix {\n outline: none;\n border-color: var(--colors-secondary-red-base);\n }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,+/CAAA;AAEA,aAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,eAAA,CAAA,wBAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,YAAA,CAAA,sBAAA;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import insertStyle from '../../_virtual/____insertStyle.js';
|
|
2
2
|
|
|
3
|
-
insertStyle(".
|
|
4
|
-
var styles = {"group":"
|
|
3
|
+
insertStyle("._group_5x4fb_1 {\n flex: 1;\n --interactive-border: var(--colors-secondary-blue-base);\n --focus-ring: var(--colors-secondary-blue-light);\n /* Only focus/active states additionally get the outer focus ring. */\n}\n._group_5x4fb_1 ._defaultBorder_5x4fb_7 {\n --border-color: var(--colors-neutral-grey-base);\n}\n._group_5x4fb_1:not(:has(:disabled)):hover, ._group_5x4fb_1:focus-within, ._group_5x4fb_1:not(:has(:disabled)):active {\n border-radius: var(--radius-base);\n}\n._group_5x4fb_1:not(:has(:disabled)):hover > ._field_5x4fb_13,\n._group_5x4fb_1:not(:has(:disabled)):hover > ._affix_5x4fb_14, ._group_5x4fb_1:focus-within > ._field_5x4fb_13,\n._group_5x4fb_1:focus-within > ._affix_5x4fb_14, ._group_5x4fb_1:not(:has(:disabled)):active > ._field_5x4fb_13,\n._group_5x4fb_1:not(:has(:disabled)):active > ._affix_5x4fb_14 {\n outline: none;\n border-color: var(--interactive-border);\n}\n._group_5x4fb_1:focus-within, ._group_5x4fb_1:not(:has(:disabled)):active {\n outline: var(--sizes-xs) solid var(--focus-ring);\n}\n\n._field_5x4fb_13 {\n flex: 1;\n}\n\n._affix_5x4fb_14 {\n flex: 0;\n --text-hint-text-color: var(--colors-neutral-ink-lightest);\n --text-hint-text-line-height: var(--text-body-line-height);\n}\n\n._groupError_5x4fb_34 {\n --interactive-border: var(--colors-secondary-red-base);\n --focus-ring: var(--colors-secondary-red-light);\n}\n._groupError_5x4fb_34 > ._field_5x4fb_13,\n._groupError_5x4fb_34 > ._affix_5x4fb_14 {\n outline: none;\n border-color: var(--colors-secondary-red-base);\n}");
|
|
4
|
+
var styles = {"group":"_group_5x4fb_1","defaultBorder":"_defaultBorder_5x4fb_7","field":"_field_5x4fb_13","affix":"_affix_5x4fb_14","groupError":"_groupError_5x4fb_34"};
|
|
5
5
|
|
|
6
6
|
export { styles as default };
|
|
7
7
|
//# sourceMappingURL=WeightInput.module.scss.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WeightInput.module.scss.js","sources":["../../../src/components/WeightInput/WeightInput.module.scss"],"sourcesContent":[".group {\n flex: 1;\n\n --interactive-border: var(--colors-secondary-blue-base);\n --focus-ring: var(--colors-secondary-blue-light);\n .defaultBorder {\n --border-color: var(--colors-neutral-grey-
|
|
1
|
+
{"version":3,"file":"WeightInput.module.scss.js","sources":["../../../src/components/WeightInput/WeightInput.module.scss"],"sourcesContent":[".group {\n flex: 1;\n\n --interactive-border: var(--colors-secondary-blue-base);\n --focus-ring: var(--colors-secondary-blue-light);\n .defaultBorder {\n --border-color: var(--colors-neutral-grey-base);\n }\n\n &:not(:has(:disabled)):hover,\n &:focus-within,\n &:not(:has(:disabled)):active {\n border-radius: var(--radius-base);\n > .field,\n > .affix {\n outline: none;\n border-color: var(--interactive-border);\n }\n }\n\n /* Only focus/active states additionally get the outer focus ring. */\n &:focus-within,\n &:not(:has(:disabled)):active {\n outline: var(--sizes-xs) solid var(--focus-ring);\n }\n}\n\n.field {\n flex: 1;\n}\n\n.affix {\n flex: 0;\n\n --text-hint-text-color: var(--colors-neutral-ink-lightest);\n --text-hint-text-line-height: var(--text-body-line-height);\n}\n\n.groupError {\n --interactive-border: var(--colors-secondary-red-base);\n --focus-ring: var(--colors-secondary-red-light);\n\n > .field,\n > .affix {\n outline: none;\n border-color: var(--colors-secondary-red-base);\n }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,+/CAAA;AAEA,aAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,eAAA,CAAA,wBAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,YAAA,CAAA,sBAAA;;;;"}
|