@elliemae/ds-classnames 2.3.0-alpha.9 → 2.3.0-next.3
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/cjs/aggregatedClasses.js +91 -0
- package/cjs/classNameManager.js +92 -0
- package/cjs/converPropsToFormModifiers.js +39 -0
- package/cjs/convertPropToFeedBackModifiers.js +39 -0
- package/cjs/convertPropsToColorModifiers.js +38 -0
- package/cjs/convertPropsToLayoutModifiers.js +41 -0
- package/cjs/convertPropsToSizeModifiers.js +43 -0
- package/cjs/convertPropsToTextModifiers.js +38 -0
- package/cjs/index.js +12 -0
- package/{dist/cjs → cjs}/validateNativeProps.js +31 -48
- package/esm/aggregatedClasses.js +78 -0
- package/esm/classNameManager.js +83 -0
- package/esm/converPropsToFormModifiers.js +37 -0
- package/esm/convertPropToFeedBackModifiers.js +37 -0
- package/esm/convertPropsToColorModifiers.js +36 -0
- package/esm/convertPropsToLayoutModifiers.js +39 -0
- package/esm/convertPropsToSizeModifiers.js +41 -0
- package/esm/convertPropsToTextModifiers.js +36 -0
- package/esm/index.js +2 -0
- package/{dist/esm → esm}/validateNativeProps.js +19 -19
- package/package.json +36 -38
- package/{dist/types → types}/aggregatedClasses.d.ts +0 -0
- package/{dist/types → types}/classNameManager.d.ts +0 -1
- package/{dist/types → types}/converPropsToFormModifiers.d.ts +0 -1
- package/{dist/types → types}/convertPropToFeedBackModifiers.d.ts +0 -1
- package/{dist/types → types}/convertPropsToColorModifiers.d.ts +0 -1
- package/{dist/types → types}/convertPropsToLayoutModifiers.d.ts +0 -1
- package/{dist/types → types}/convertPropsToSizeModifiers.d.ts +0 -1
- package/{dist/types → types}/convertPropsToTextModifiers.d.ts +0 -1
- package/{dist/types → types}/index.d.ts +0 -0
- package/{dist/types → types}/validateNativeProps.d.ts +0 -0
- package/dist/cjs/aggregatedClasses.js +0 -70
- package/dist/cjs/aggregatedClasses.js.map +0 -7
- package/dist/cjs/aggregatedClasses.md +0 -323
- package/dist/cjs/classNameManager.js +0 -83
- package/dist/cjs/classNameManager.js.map +0 -7
- package/dist/cjs/converPropsToFormModifiers.js +0 -62
- package/dist/cjs/converPropsToFormModifiers.js.map +0 -7
- package/dist/cjs/convertPropToFeedBackModifiers.js +0 -65
- package/dist/cjs/convertPropToFeedBackModifiers.js.map +0 -7
- package/dist/cjs/convertPropsToColorModifiers.js +0 -58
- package/dist/cjs/convertPropsToColorModifiers.js.map +0 -7
- package/dist/cjs/convertPropsToLayoutModifiers.js +0 -65
- package/dist/cjs/convertPropsToLayoutModifiers.js.map +0 -7
- package/dist/cjs/convertPropsToSizeModifiers.js +0 -77
- package/dist/cjs/convertPropsToSizeModifiers.js.map +0 -7
- package/dist/cjs/convertPropsToTextModifiers.js +0 -58
- package/dist/cjs/convertPropsToTextModifiers.js.map +0 -7
- package/dist/cjs/index.js +0 -38
- package/dist/cjs/index.js.map +0 -7
- package/dist/cjs/validateNativeProps.js.map +0 -7
- package/dist/esm/aggregatedClasses.js +0 -44
- package/dist/esm/aggregatedClasses.js.map +0 -7
- package/dist/esm/aggregatedClasses.md +0 -323
- package/dist/esm/classNameManager.js +0 -54
- package/dist/esm/classNameManager.js.map +0 -7
- package/dist/esm/converPropsToFormModifiers.js +0 -33
- package/dist/esm/converPropsToFormModifiers.js.map +0 -7
- package/dist/esm/convertPropToFeedBackModifiers.js +0 -36
- package/dist/esm/convertPropToFeedBackModifiers.js.map +0 -7
- package/dist/esm/convertPropsToColorModifiers.js +0 -29
- package/dist/esm/convertPropsToColorModifiers.js.map +0 -7
- package/dist/esm/convertPropsToLayoutModifiers.js +0 -36
- package/dist/esm/convertPropsToLayoutModifiers.js.map +0 -7
- package/dist/esm/convertPropsToSizeModifiers.js +0 -48
- package/dist/esm/convertPropsToSizeModifiers.js.map +0 -7
- package/dist/esm/convertPropsToTextModifiers.js +0 -29
- package/dist/esm/convertPropsToTextModifiers.js.map +0 -7
- package/dist/esm/index.js +0 -9
- package/dist/esm/index.js.map +0 -7
- package/dist/esm/validateNativeProps.js.map +0 -7
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
import 'core-js/modules/web.dom-collections.iterator.js';
|
|
2
|
+
import { isEmpty } from '@elliemae/ds-utilities/utils';
|
|
3
|
+
import DimsumConfig from '@elliemae/ds-shared/dimsum.config';
|
|
4
|
+
import pipe from './converPropsToFormModifiers.js';
|
|
5
|
+
import pipe$1 from './convertPropsToLayoutModifiers.js';
|
|
6
|
+
import pipe$2 from './convertPropToFeedBackModifiers.js';
|
|
7
|
+
import pipe$3 from './convertPropsToSizeModifiers.js';
|
|
8
|
+
import pipe$4 from './convertPropsToTextModifiers.js';
|
|
9
|
+
import pipe$5 from './convertPropsToColorModifiers.js';
|
|
10
|
+
|
|
11
|
+
const cssPrefix = "".concat(DimsumConfig.classNamePrefix, "-");
|
|
12
|
+
|
|
13
|
+
const executePipelines = props => {
|
|
14
|
+
const form = pipe().execute(props);
|
|
15
|
+
const layout = pipe$1().execute(props);
|
|
16
|
+
const feedback = pipe$2().execute(props);
|
|
17
|
+
const size = pipe$3().execute(props);
|
|
18
|
+
const text = pipe$4().execute(props);
|
|
19
|
+
const color = pipe$5().execute(props);
|
|
20
|
+
return [...form, ...layout, ...feedback, ...size, ...text, ...color];
|
|
21
|
+
};
|
|
22
|
+
/**
|
|
23
|
+
* Docs: http://getbem.com/naming/
|
|
24
|
+
* blockName
|
|
25
|
+
* cssClassNameModifier: Main modifier
|
|
26
|
+
* props { hasError, hasWarning, hasSuccess, readOnly, disabled}
|
|
27
|
+
*
|
|
28
|
+
* @param blockName
|
|
29
|
+
* @param cssClassNameModifier
|
|
30
|
+
* @param props
|
|
31
|
+
* @param options
|
|
32
|
+
*/
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
const cssPipeline = function () {
|
|
36
|
+
let blockName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'block';
|
|
37
|
+
let cssClassNameModifier = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
|
|
38
|
+
let props = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
|
|
39
|
+
let options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
|
|
40
|
+
const {
|
|
41
|
+
prefix,
|
|
42
|
+
element
|
|
43
|
+
} = options;
|
|
44
|
+
const prefixBlockName = "".concat(prefix || cssPrefix).concat(blockName).concat(element ? "__".concat(element) : ''); // PipeLine
|
|
45
|
+
|
|
46
|
+
const pipes = !isEmpty(props) ? executePipelines(props) : [];
|
|
47
|
+
const basePipeline = [prefixBlockName, ...pipes]; // specific classname
|
|
48
|
+
|
|
49
|
+
const className = cssClassNameModifier ? [...basePipeline].join(" ".concat(prefixBlockName, "--")).concat(" ".concat(cssClassNameModifier)) : [...basePipeline].join(" ".concat(prefixBlockName, "--"));
|
|
50
|
+
return {
|
|
51
|
+
blockName,
|
|
52
|
+
cssPrefix,
|
|
53
|
+
prefixBlockName,
|
|
54
|
+
cssClassName: className,
|
|
55
|
+
|
|
56
|
+
mainModifier(modifier) {
|
|
57
|
+
return "".concat(className, "--").concat(modifier);
|
|
58
|
+
},
|
|
59
|
+
|
|
60
|
+
classNameBlock(elementName) {
|
|
61
|
+
let usePrefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
|
|
62
|
+
return "".concat(!usePrefix ? blockName : prefixBlockName, "-").concat(elementName);
|
|
63
|
+
},
|
|
64
|
+
|
|
65
|
+
classNameBlockModifier(modifierName) {
|
|
66
|
+
let elementBlockName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
|
|
67
|
+
return "".concat(prefixBlockName, "-").concat(elementBlockName, "--").concat(modifierName);
|
|
68
|
+
},
|
|
69
|
+
|
|
70
|
+
classNameElement(elementName) {
|
|
71
|
+
let elementBlockName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
|
|
72
|
+
return "".concat(prefixBlockName).concat(elementBlockName ? "-".concat(elementBlockName) : '', "__").concat(elementName);
|
|
73
|
+
},
|
|
74
|
+
|
|
75
|
+
classNameModifier(modifierName) {
|
|
76
|
+
let elementName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
|
|
77
|
+
return "".concat(prefixBlockName).concat(elementName ? "__".concat(elementName) : '', "--").concat(modifierName);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
};
|
|
81
|
+
};
|
|
82
|
+
|
|
83
|
+
export { cssPrefix, cssPipeline as default };
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import 'core-js/modules/esnext.async-iterator.reduce.js';
|
|
2
|
+
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
3
|
+
import 'core-js/modules/esnext.iterator.reduce.js';
|
|
4
|
+
import 'core-js/modules/web.dom-collections.iterator.js';
|
|
5
|
+
|
|
6
|
+
const basicAction = _ref => {
|
|
7
|
+
let {
|
|
8
|
+
readOnly = false,
|
|
9
|
+
disabled = false,
|
|
10
|
+
checked = false
|
|
11
|
+
} = _ref;
|
|
12
|
+
const cssModifier = []; // input state modifiers
|
|
13
|
+
|
|
14
|
+
if (checked) cssModifier.push('checked');
|
|
15
|
+
if (readOnly) cssModifier.push('readonly');
|
|
16
|
+
if (disabled) cssModifier.push('disabled');
|
|
17
|
+
return cssModifier;
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
const instance = [basicAction];
|
|
21
|
+
|
|
22
|
+
const pipe = () => ({
|
|
23
|
+
getInstance() {
|
|
24
|
+
return instance;
|
|
25
|
+
},
|
|
26
|
+
|
|
27
|
+
add(customModifier) {
|
|
28
|
+
instance.push(customModifier);
|
|
29
|
+
},
|
|
30
|
+
|
|
31
|
+
execute(props) {
|
|
32
|
+
return instance.reduce((temp, action) => [...temp, ...action(props)], []);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
});
|
|
36
|
+
|
|
37
|
+
export { pipe as default };
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import 'core-js/modules/esnext.async-iterator.reduce.js';
|
|
2
|
+
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
3
|
+
import 'core-js/modules/esnext.iterator.reduce.js';
|
|
4
|
+
import 'core-js/modules/web.dom-collections.iterator.js';
|
|
5
|
+
|
|
6
|
+
const basicAction = _ref => {
|
|
7
|
+
let {
|
|
8
|
+
hasError = false,
|
|
9
|
+
hasWarning = false,
|
|
10
|
+
hasSuccess = false,
|
|
11
|
+
modalType
|
|
12
|
+
} = _ref;
|
|
13
|
+
const cssModifier = []; // valid state modifier
|
|
14
|
+
|
|
15
|
+
if (hasError) cssModifier.push('error');else if (hasWarning) cssModifier.push('warning');else if (hasSuccess) cssModifier.push('success');
|
|
16
|
+
if (modalType) cssModifier.push("modal-type-".concat(modalType));
|
|
17
|
+
return cssModifier;
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
const instance = [basicAction];
|
|
21
|
+
|
|
22
|
+
const pipe = () => ({
|
|
23
|
+
getInstance() {
|
|
24
|
+
return instance;
|
|
25
|
+
},
|
|
26
|
+
|
|
27
|
+
add(customModifier) {
|
|
28
|
+
instance.push(customModifier);
|
|
29
|
+
},
|
|
30
|
+
|
|
31
|
+
execute(props) {
|
|
32
|
+
return instance.reduce((temp, action) => [...temp, ...action(props)], []);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
});
|
|
36
|
+
|
|
37
|
+
export { pipe as default };
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import 'core-js/modules/esnext.async-iterator.reduce.js';
|
|
2
|
+
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
3
|
+
import 'core-js/modules/esnext.iterator.reduce.js';
|
|
4
|
+
import 'core-js/modules/web.dom-collections.iterator.js';
|
|
5
|
+
|
|
6
|
+
const basicAction = _ref => {
|
|
7
|
+
let {
|
|
8
|
+
color = null
|
|
9
|
+
} = _ref;
|
|
10
|
+
const cssModifier = [];
|
|
11
|
+
|
|
12
|
+
if (color && color[0]) {
|
|
13
|
+
if (color[1] !== null) cssModifier.push("color-".concat(color[0], "-").concat(color[1]));else cssModifier.push("color-".concat(color[0]));
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
return cssModifier;
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
const instance = [basicAction];
|
|
20
|
+
|
|
21
|
+
const pipe = () => ({
|
|
22
|
+
getInstance() {
|
|
23
|
+
return instance;
|
|
24
|
+
},
|
|
25
|
+
|
|
26
|
+
add(customModifier) {
|
|
27
|
+
instance.push(customModifier);
|
|
28
|
+
},
|
|
29
|
+
|
|
30
|
+
execute(props) {
|
|
31
|
+
return instance.reduce((temp, action) => [...temp, ...action(props)], []);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
});
|
|
35
|
+
|
|
36
|
+
export { pipe as default };
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import 'core-js/modules/esnext.async-iterator.reduce.js';
|
|
2
|
+
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
3
|
+
import 'core-js/modules/esnext.iterator.reduce.js';
|
|
4
|
+
import 'core-js/modules/web.dom-collections.iterator.js';
|
|
5
|
+
|
|
6
|
+
const basicAction = _ref => {
|
|
7
|
+
let {
|
|
8
|
+
id,
|
|
9
|
+
buttonType = 'default',
|
|
10
|
+
fluidWidth = false,
|
|
11
|
+
fluidHeight = false
|
|
12
|
+
} = _ref;
|
|
13
|
+
const cssModifier = []; // buttons types
|
|
14
|
+
|
|
15
|
+
if (id) cssModifier.push("id-".concat(id));
|
|
16
|
+
if (buttonType) cssModifier.push(buttonType);
|
|
17
|
+
if (fluidWidth) cssModifier.push('fluid-width');
|
|
18
|
+
if (fluidHeight) cssModifier.push('fluid-height');
|
|
19
|
+
return cssModifier;
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
const instance = [basicAction];
|
|
23
|
+
|
|
24
|
+
const pipe = () => ({
|
|
25
|
+
getInstance() {
|
|
26
|
+
return instance;
|
|
27
|
+
},
|
|
28
|
+
|
|
29
|
+
add(customModifier) {
|
|
30
|
+
instance.push(customModifier);
|
|
31
|
+
},
|
|
32
|
+
|
|
33
|
+
execute(props) {
|
|
34
|
+
return instance.reduce((temp, action) => [...temp, ...action(props)], []);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
});
|
|
38
|
+
|
|
39
|
+
export { pipe as default };
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import 'core-js/modules/esnext.async-iterator.reduce.js';
|
|
2
|
+
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
3
|
+
import 'core-js/modules/esnext.iterator.reduce.js';
|
|
4
|
+
import 'core-js/modules/web.dom-collections.iterator.js';
|
|
5
|
+
|
|
6
|
+
const basicAction = _ref => {
|
|
7
|
+
let {
|
|
8
|
+
size = null,
|
|
9
|
+
extraTight = false,
|
|
10
|
+
tight = false,
|
|
11
|
+
base = false,
|
|
12
|
+
bitLoose = false,
|
|
13
|
+
loose = false,
|
|
14
|
+
extraLoose = false,
|
|
15
|
+
superLoose = false
|
|
16
|
+
} = _ref;
|
|
17
|
+
const cssModifier = [];
|
|
18
|
+
if (size) cssModifier.push("".concat(size)); // Size as Flag
|
|
19
|
+
|
|
20
|
+
if (extraTight) cssModifier.push('size-extra-tight');else if (tight) cssModifier.push('size-tight');else if (base) cssModifier.push('size-base');else if (bitLoose) cssModifier.push('size-bit-loose');else if (loose) cssModifier.push('size-loose');else if (extraLoose) cssModifier.push('size-extra-loose');else if (superLoose) cssModifier.push('size-super-loose');
|
|
21
|
+
return cssModifier;
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
const instance = [basicAction];
|
|
25
|
+
|
|
26
|
+
const pipe = () => ({
|
|
27
|
+
getInstance() {
|
|
28
|
+
return instance;
|
|
29
|
+
},
|
|
30
|
+
|
|
31
|
+
add(customModifier) {
|
|
32
|
+
instance.push(customModifier);
|
|
33
|
+
},
|
|
34
|
+
|
|
35
|
+
execute(props) {
|
|
36
|
+
return instance.reduce((temp, action) => [...temp, ...action(props)], []);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
});
|
|
40
|
+
|
|
41
|
+
export { pipe as default };
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import 'core-js/modules/esnext.async-iterator.reduce.js';
|
|
2
|
+
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
3
|
+
import 'core-js/modules/esnext.iterator.reduce.js';
|
|
4
|
+
import 'core-js/modules/web.dom-collections.iterator.js';
|
|
5
|
+
|
|
6
|
+
const basicAction = _ref => {
|
|
7
|
+
let {
|
|
8
|
+
textEllipsis,
|
|
9
|
+
textAlignment,
|
|
10
|
+
wordBreak
|
|
11
|
+
} = _ref;
|
|
12
|
+
const cssModifier = [];
|
|
13
|
+
if (textEllipsis) cssModifier.push('text-overflow-ellipsis');
|
|
14
|
+
if (wordBreak) cssModifier.push('text-overflow-word-break');
|
|
15
|
+
if (['left', 'right', 'center', 'justify'].indexOf(textAlignment) > -1) cssModifier.push("text-align-".concat(textAlignment));
|
|
16
|
+
return cssModifier;
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
const instance = [basicAction];
|
|
20
|
+
|
|
21
|
+
const pipe = () => ({
|
|
22
|
+
getInstance() {
|
|
23
|
+
return instance;
|
|
24
|
+
},
|
|
25
|
+
|
|
26
|
+
add(customModifier) {
|
|
27
|
+
instance.push(customModifier);
|
|
28
|
+
},
|
|
29
|
+
|
|
30
|
+
execute(props) {
|
|
31
|
+
return instance.reduce((temp, action) => [...temp, ...action(props)], []);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
});
|
|
35
|
+
|
|
36
|
+
export { pipe as default };
|
package/esm/index.js
ADDED
|
@@ -1,4 +1,15 @@
|
|
|
1
|
-
import
|
|
1
|
+
import 'core-js/modules/esnext.async-iterator.filter.js';
|
|
2
|
+
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
3
|
+
import 'core-js/modules/esnext.iterator.filter.js';
|
|
4
|
+
import 'core-js/modules/esnext.async-iterator.for-each.js';
|
|
5
|
+
import 'core-js/modules/esnext.iterator.for-each.js';
|
|
6
|
+
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
|
|
7
|
+
|
|
8
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
9
|
+
|
|
10
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
11
|
+
|
|
12
|
+
/* eslint-disable max-lines */
|
|
2
13
|
const attributeWhiteList = {
|
|
3
14
|
accept: true,
|
|
4
15
|
acceptCharset: true,
|
|
@@ -266,15 +277,10 @@ const eventsWhiteList = {
|
|
|
266
277
|
onTransitionEnd: true,
|
|
267
278
|
onToggle: true
|
|
268
279
|
};
|
|
269
|
-
const whiteList = {
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
...eventsWhiteList
|
|
274
|
-
};
|
|
275
|
-
const isDataAttribute = (attribute) => attribute.substring(0, 5) === "data-";
|
|
276
|
-
const isAriaAttribute = (attribute) => attribute.substring(0, 6) === "aria-";
|
|
277
|
-
const isValidNativeAttribute = (attribute) => whiteList[attribute] === true || isDataAttribute(attribute) || isAriaAttribute(attribute) || attribute.toLowerCase() === attribute;
|
|
280
|
+
const whiteList = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, attributeWhiteList), svgAttributesWhiteList), otherWhiteList), eventsWhiteList);
|
|
281
|
+
const isDataAttribute = attribute => attribute.substring(0, 5) === 'data-';
|
|
282
|
+
const isAriaAttribute = attribute => attribute.substring(0, 6) === 'aria-';
|
|
283
|
+
const isValidNativeAttribute = attribute => whiteList[attribute] === true || isDataAttribute(attribute) || isAriaAttribute(attribute) || attribute.toLowerCase() === attribute;
|
|
278
284
|
const nativeHTMLElements = {
|
|
279
285
|
a: true,
|
|
280
286
|
abbr: true,
|
|
@@ -389,12 +395,6 @@ const nativeHTMLElements = {
|
|
|
389
395
|
video: true,
|
|
390
396
|
wbr: true
|
|
391
397
|
};
|
|
392
|
-
const isNativeHTMLElement =
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
isDataAttribute,
|
|
396
|
-
isNativeHTMLElement,
|
|
397
|
-
isValidNativeAttribute,
|
|
398
|
-
whiteList
|
|
399
|
-
};
|
|
400
|
-
//# sourceMappingURL=validateNativeProps.js.map
|
|
398
|
+
const isNativeHTMLElement = type => nativeHTMLElements[type] === true;
|
|
399
|
+
|
|
400
|
+
export { isAriaAttribute, isDataAttribute, isNativeHTMLElement, isValidNativeAttribute, whiteList };
|
package/package.json
CHANGED
|
@@ -1,54 +1,51 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-classnames",
|
|
3
|
-
"version": "2.3.0-
|
|
3
|
+
"version": "2.3.0-next.3",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum Library - Aggregated classNames to component",
|
|
6
|
-
"
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
"module": "./dist/esm/index.js",
|
|
10
|
-
"main": "./dist/cjs/index.js",
|
|
11
|
-
"types": "./dist/types/index.d.ts",
|
|
6
|
+
"module": "./esm/index.js",
|
|
7
|
+
"main": "./cjs/index.js",
|
|
8
|
+
"types": "./types/index.d.ts",
|
|
12
9
|
"exports": {
|
|
13
10
|
".": {
|
|
14
|
-
"import": "./
|
|
15
|
-
"require": "./
|
|
11
|
+
"import": "./esm/index.js",
|
|
12
|
+
"require": "./cjs/index.js"
|
|
16
13
|
},
|
|
17
14
|
"./validateNativeProps": {
|
|
18
|
-
"import": "./
|
|
19
|
-
"require": "./
|
|
15
|
+
"import": "./esm/validateNativeProps.js",
|
|
16
|
+
"require": "./cjs/validateNativeProps.js"
|
|
20
17
|
},
|
|
21
18
|
"./convertPropToFeedBackModifiers": {
|
|
22
|
-
"import": "./
|
|
23
|
-
"require": "./
|
|
19
|
+
"import": "./esm/convertPropToFeedBackModifiers.js",
|
|
20
|
+
"require": "./cjs/convertPropToFeedBackModifiers.js"
|
|
24
21
|
},
|
|
25
22
|
"./convertPropsToTextModifiers": {
|
|
26
|
-
"import": "./
|
|
27
|
-
"require": "./
|
|
23
|
+
"import": "./esm/convertPropsToTextModifiers.js",
|
|
24
|
+
"require": "./cjs/convertPropsToTextModifiers.js"
|
|
28
25
|
},
|
|
29
26
|
"./convertPropsToSizeModifiers": {
|
|
30
|
-
"import": "./
|
|
31
|
-
"require": "./
|
|
27
|
+
"import": "./esm/convertPropsToSizeModifiers.js",
|
|
28
|
+
"require": "./cjs/convertPropsToSizeModifiers.js"
|
|
32
29
|
},
|
|
33
30
|
"./convertPropsToLayoutModifiers": {
|
|
34
|
-
"import": "./
|
|
35
|
-
"require": "./
|
|
31
|
+
"import": "./esm/convertPropsToLayoutModifiers.js",
|
|
32
|
+
"require": "./cjs/convertPropsToLayoutModifiers.js"
|
|
36
33
|
},
|
|
37
34
|
"./convertPropsToColorModifiers": {
|
|
38
|
-
"import": "./
|
|
39
|
-
"require": "./
|
|
35
|
+
"import": "./esm/convertPropsToColorModifiers.js",
|
|
36
|
+
"require": "./cjs/convertPropsToColorModifiers.js"
|
|
40
37
|
},
|
|
41
38
|
"./converPropsToFormModifiers": {
|
|
42
|
-
"import": "./
|
|
43
|
-
"require": "./
|
|
39
|
+
"import": "./esm/converPropsToFormModifiers.js",
|
|
40
|
+
"require": "./cjs/converPropsToFormModifiers.js"
|
|
44
41
|
},
|
|
45
42
|
"./classNameManager": {
|
|
46
|
-
"import": "./
|
|
47
|
-
"require": "./
|
|
43
|
+
"import": "./esm/classNameManager.js",
|
|
44
|
+
"require": "./cjs/classNameManager.js"
|
|
48
45
|
},
|
|
49
46
|
"./aggregatedClasses": {
|
|
50
|
-
"import": "./
|
|
51
|
-
"require": "./
|
|
47
|
+
"import": "./esm/aggregatedClasses.js",
|
|
48
|
+
"require": "./cjs/aggregatedClasses.js"
|
|
52
49
|
}
|
|
53
50
|
},
|
|
54
51
|
"sideEffects": [
|
|
@@ -60,28 +57,29 @@
|
|
|
60
57
|
"url": "https://git.elliemae.io/platform-ui/dimsum.git"
|
|
61
58
|
},
|
|
62
59
|
"engines": {
|
|
63
|
-
"
|
|
64
|
-
"node": ">=
|
|
60
|
+
"npm": ">=7",
|
|
61
|
+
"node": ">=14"
|
|
65
62
|
},
|
|
66
63
|
"author": "ICE MT",
|
|
64
|
+
"scripts": {
|
|
65
|
+
"prebuild": "exit 0",
|
|
66
|
+
"predev": "exit 0",
|
|
67
|
+
"build": "node ../../scripts/build/build.js",
|
|
68
|
+
"dev": "cross-env NODE_ENV=development && node ../../scripts/build/build.js -w"
|
|
69
|
+
},
|
|
67
70
|
"dependencies": {
|
|
68
|
-
"@elliemae/ds-shared": "2.3.0-
|
|
69
|
-
"@elliemae/ds-utilities": "2.3.0-
|
|
71
|
+
"@elliemae/ds-shared": "2.3.0-next.3",
|
|
72
|
+
"@elliemae/ds-utilities": "2.3.0-next.3",
|
|
70
73
|
"obj-str": "~1.0.3"
|
|
71
74
|
},
|
|
72
75
|
"publishConfig": {
|
|
73
76
|
"access": "public",
|
|
74
|
-
"
|
|
77
|
+
"directory": "dist",
|
|
78
|
+
"generateSubmodules": true
|
|
75
79
|
},
|
|
76
80
|
"peerDependencies": {
|
|
77
81
|
"lodash": "^4.17.21",
|
|
78
82
|
"react": "~17.0.2",
|
|
79
83
|
"react-dom": "^17.0.2"
|
|
80
|
-
},
|
|
81
|
-
"scripts": {
|
|
82
|
-
"prebuild": "exit 0",
|
|
83
|
-
"predev": "exit 0",
|
|
84
|
-
"build": "node ../../scripts/build/build.js",
|
|
85
|
-
"dev": "cross-env NODE_ENV=development && node ../../scripts/build/build.js -w"
|
|
86
84
|
}
|
|
87
85
|
}
|
|
File without changes
|
|
@@ -25,5 +25,4 @@ declare const cssPipeline: (blockName?: string, cssClassNameModifier?: string, p
|
|
|
25
25
|
classNameElement(elementName: any, elementBlockName?: string): string;
|
|
26
26
|
classNameModifier(modifierName: any, elementName?: string): string;
|
|
27
27
|
};
|
|
28
|
-
export { cssPipeline as convertPropToCssClassName };
|
|
29
28
|
export default cssPipeline;
|
|
File without changes
|
|
File without changes
|
|
@@ -1,70 +0,0 @@
|
|
|
1
|
-
var __create = Object.create;
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
-
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
|
-
var __export = (target, all) => {
|
|
9
|
-
for (var name in all)
|
|
10
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
-
};
|
|
12
|
-
var __reExport = (target, module2, copyDefault, desc) => {
|
|
13
|
-
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
14
|
-
for (let key of __getOwnPropNames(module2))
|
|
15
|
-
if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
|
|
16
|
-
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
17
|
-
}
|
|
18
|
-
return target;
|
|
19
|
-
};
|
|
20
|
-
var __toESM = (module2, isNodeMode) => {
|
|
21
|
-
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
22
|
-
};
|
|
23
|
-
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
24
|
-
return (module2, temp) => {
|
|
25
|
-
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
26
|
-
};
|
|
27
|
-
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
28
|
-
var aggregatedClasses_exports = {};
|
|
29
|
-
__export(aggregatedClasses_exports, {
|
|
30
|
-
cssPrefix: () => cssPrefix,
|
|
31
|
-
default: () => aggregatedClasses_default
|
|
32
|
-
});
|
|
33
|
-
var React = __toESM(require("react"));
|
|
34
|
-
var import_react = __toESM(require("react"));
|
|
35
|
-
var import_obj_str = __toESM(require("obj-str"));
|
|
36
|
-
var import_classNameManager = require("./classNameManager");
|
|
37
|
-
var import_dimsum = require("@elliemae/ds-shared/dimsum.config");
|
|
38
|
-
var import_validateNativeProps = require("./validateNativeProps");
|
|
39
|
-
const cssPrefix = import_dimsum.dimsumConfig.classNamePrefix;
|
|
40
|
-
const generateClassNameWithModifier = (block, element, modifier) => `${cssPrefix}-${block}${element ? `__${element}` : ""}--${modifier}`;
|
|
41
|
-
const appendBlockAndPrefixToObj = (obj, block, element) => obj ? Object.keys(obj).reduce((acc, key) => ({
|
|
42
|
-
...acc,
|
|
43
|
-
[`${generateClassNameWithModifier(block, element, key)}`]: obj[key]
|
|
44
|
-
}), {}) : [];
|
|
45
|
-
const aggregatedClasses = (type, props) => (block, element, additionalModifiers, options = {}) => import_react.default.forwardRef(({ innerRef, children, classProps, useComponent, className, as, ...rest }, ref) => {
|
|
46
|
-
let otherModifiers = appendBlockAndPrefixToObj(additionalModifiers, block, element);
|
|
47
|
-
if (typeof additionalModifiers === "function")
|
|
48
|
-
otherModifiers = appendBlockAndPrefixToObj(additionalModifiers({ ...rest, ...classProps, className }), block, element);
|
|
49
|
-
const otherModifiersStr = (0, import_obj_str.default)(otherModifiers);
|
|
50
|
-
const { prefix, propsToRemoveFromFinalElement = [] } = options;
|
|
51
|
-
const { cssClassName: classNames } = (0, import_classNameManager.convertPropToCssClassName)(block, null, { ...classProps }, { prefix, element });
|
|
52
|
-
const cleanedPropsPassedDown = { ...props, ...rest };
|
|
53
|
-
propsToRemoveFromFinalElement.forEach((propKey) => {
|
|
54
|
-
delete cleanedPropsPassedDown[propKey];
|
|
55
|
-
});
|
|
56
|
-
if ((0, import_validateNativeProps.isNativeHTMLElement)(block)) {
|
|
57
|
-
Object.keys(cleanedPropsPassedDown).forEach((key) => {
|
|
58
|
-
if (!(0, import_validateNativeProps.isValidNativeAttribute)(key))
|
|
59
|
-
delete cleanedPropsPassedDown[key];
|
|
60
|
-
});
|
|
61
|
-
}
|
|
62
|
-
return import_react.default.createElement(as || type, {
|
|
63
|
-
ref: innerRef || ref,
|
|
64
|
-
className: [classNames, otherModifiersStr, className].join(" "),
|
|
65
|
-
...cleanedPropsPassedDown
|
|
66
|
-
}, children);
|
|
67
|
-
});
|
|
68
|
-
var aggregatedClasses_default = aggregatedClasses;
|
|
69
|
-
module.exports = __toCommonJS(aggregatedClasses_exports);
|
|
70
|
-
//# sourceMappingURL=aggregatedClasses.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/aggregatedClasses.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable @typescript-eslint/no-unsafe-assignment */\n/* eslint-disable prettier/prettier */\n/* eslint-disable max-params */\n/* eslint-disable react/prop-types */\nimport React from 'react';\nimport cx from 'obj-str';\nimport { convertPropToCssClassName } from './classNameManager';\nimport { dimsumConfig } from '@elliemae/ds-shared/dimsum.config';\nimport {\n isValidNativeAttribute,\n isNativeHTMLElement,\n} from './validateNativeProps';\n\nexport const cssPrefix = dimsumConfig.classNamePrefix;\n\ntype AggregatedClassesT<T = unknown> = (\n type: any,\n props?: any,\n) => (\n block: string,\n element?: string | null,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n additionalModifiers?: { [key: string]: unknown } | ((arg: any) => { [key: string]: unknown }),\n options?: { [key: string]: unknown },\n) => React.ForwardRefExoticComponent<React.RefAttributes<T>>;\n\nconst generateClassNameWithModifier = (block, element, modifier) =>\n `${cssPrefix}-${block}${element ? `__${element}` : ''}--${modifier}`;\n\nconst appendBlockAndPrefixToObj = (obj, block, element) =>\n obj\n ? Object.keys(obj).reduce(\n (acc, key) => ({\n ...acc,\n [`${generateClassNameWithModifier(block, element, key)}`]: obj[key],\n }),\n {},\n )\n : [];\n\nconst aggregatedClasses: AggregatedClassesT=\n (type, props) =>\n (block, element, additionalModifiers, options = {}) =>\n React.forwardRef(({ innerRef, children, classProps, useComponent, className, as, ...rest }, ref) => {\n // get the additional classNames either from a function or an object\n let otherModifiers = appendBlockAndPrefixToObj(additionalModifiers, block, element);\n if (typeof additionalModifiers === 'function')\n otherModifiers = appendBlockAndPrefixToObj(\n additionalModifiers({ ...rest, ...classProps, className }),\n block,\n element,\n );\n\n const otherModifiersStr = cx(otherModifiers);\n const { prefix, propsToRemoveFromFinalElement = [] } = options;\n const { cssClassName: classNames } = convertPropToCssClassName(\n block,\n null,\n { ...classProps },\n { prefix, element },\n );\n const cleanedPropsPassedDown = { ...props, ...rest };\n propsToRemoveFromFinalElement.forEach((propKey) => {\n delete cleanedPropsPassedDown[propKey];\n });\n\n if (isNativeHTMLElement(block)) {\n Object.keys(cleanedPropsPassedDown).forEach((key) => {\n if (!isValidNativeAttribute(key)) delete cleanedPropsPassedDown[key];\n });\n }\n\n return React.createElement(\n as || type,\n {\n ref: innerRef || ref,\n className: [classNames, otherModifiersStr, className].join(' '),\n ...cleanedPropsPassedDown,\n },\n children,\n );\n });\n\nexport default aggregatedClasses;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,mBAAkB;AAClB,qBAAe;AACf,8BAA0C;AAC1C,oBAA6B;AAC7B,iCAGO;AAEA,MAAM,YAAY,2BAAa;AAatC,MAAM,gCAAgC,CAAC,OAAO,SAAS,aACrD,GAAG,aAAa,QAAQ,UAAU,KAAK,YAAY,OAAO;AAE5D,MAAM,4BAA4B,CAAC,KAAK,OAAO,YAC7C,MACI,OAAO,KAAK,KAAK,OACjB,CAAC,KAAK,QAAS;AAAA,KACV;AAAA,GACF,GAAG,8BAA8B,OAAO,SAAS,SAAS,IAAI;AAAA,IAEjE,MAEA;AAEN,MAAM,oBACJ,CAAC,MAAM,UACL,CAAC,OAAO,SAAS,qBAAqB,UAAU,OAC9C,qBAAM,WAAW,CAAC,EAAE,UAAU,UAAU,YAAY,cAAc,WAAW,OAAO,QAAQ,QAAQ;AAElG,MAAI,iBAAiB,0BAA0B,qBAAqB,OAAO;AAC3E,MAAI,OAAO,wBAAwB;AACjC,qBAAiB,0BACf,oBAAoB,KAAK,SAAS,YAAY,cAC9C,OACA;AAGJ,QAAM,oBAAoB,4BAAG;AAC7B,QAAM,EAAE,QAAQ,gCAAgC,OAAO;AACvD,QAAM,EAAE,cAAc,eAAe,uDACnC,OACA,MACA,KAAK,cACL,EAAE,QAAQ;AAEZ,QAAM,yBAAyB,KAAK,UAAU;AAC9C,gCAA8B,QAAQ,CAAC,YAAY;AACjD,WAAO,uBAAuB;AAAA;AAGhC,MAAI,oDAAoB,QAAQ;AAC9B,WAAO,KAAK,wBAAwB,QAAQ,CAAC,QAAQ;AACnD,UAAI,CAAC,uDAAuB;AAAM,eAAO,uBAAuB;AAAA;AAAA;AAIpE,SAAO,qBAAM,cACX,MAAM,MACN;AAAA,IACE,KAAK,YAAY;AAAA,IACjB,WAAW,CAAC,YAAY,mBAAmB,WAAW,KAAK;AAAA,OACxD;AAAA,KAEL;AAAA;AAIV,IAAO,4BAAQ;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|