@elliemae/ds-classnames 3.15.0 → 3.16.0-next.10
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/cjs/aggregatedClasses.js +4 -4
- package/dist/cjs/aggregatedClasses.js.map +2 -2
- package/dist/cjs/classNameManager.js +10 -10
- package/dist/cjs/classNameManager.js.map +2 -2
- package/dist/cjs/index.js +2 -2
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/package.json +7 -0
- package/dist/esm/aggregatedClasses.js +3 -3
- package/dist/esm/aggregatedClasses.js.map +1 -1
- package/dist/esm/classNameManager.js +8 -8
- package/dist/esm/classNameManager.js.map +1 -1
- package/dist/esm/index.js +2 -2
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/package.json +7 -0
- package/dist/types/index.d.ts +2 -2
- package/package.json +4 -3
|
@@ -31,10 +31,10 @@ module.exports = __toCommonJS(aggregatedClasses_exports);
|
|
|
31
31
|
var React = __toESM(require("react"));
|
|
32
32
|
var import_react = __toESM(require("react"));
|
|
33
33
|
var import_obj_str = __toESM(require("obj-str"));
|
|
34
|
-
var import_classNameManager = require("./classNameManager");
|
|
35
|
-
var
|
|
36
|
-
var import_validateNativeProps = require("./validateNativeProps");
|
|
37
|
-
const cssPrefix =
|
|
34
|
+
var import_classNameManager = require("./classNameManager.js");
|
|
35
|
+
var import_dimsum_config = require("./dimsum.config.js");
|
|
36
|
+
var import_validateNativeProps = require("./validateNativeProps.js");
|
|
37
|
+
const cssPrefix = import_dimsum_config.dimsumConfig.classNamePrefix;
|
|
38
38
|
const generateClassNameWithModifier = (block, element, modifier) => `${cssPrefix}-${block}${element ? `__${element}` : ""}--${modifier}`;
|
|
39
39
|
const appendBlockAndPrefixToObj = (obj, block, element) => obj ? Object.keys(obj).reduce(
|
|
40
40
|
(acc, key) => ({
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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 './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;AAAA;ACAA,YAAuB;ADIvB,mBAAkB;AAClB,qBAAe;AACf,8BAA0C;AAC1C,
|
|
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.js';\nimport { dimsumConfig } from './dimsum.config.js';\nimport {\n isValidNativeAttribute,\n isNativeHTMLElement,\n} from './validateNativeProps.js';\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;AAAA;ACAA,YAAuB;ADIvB,mBAAkB;AAClB,qBAAe;AACf,8BAA0C;AAC1C,2BAA6B;AAC7B,iCAGO;AAEA,MAAM,YAAY,kCAAa;AAatC,MAAM,gCAAgC,CAAC,OAAO,SAAS,aACrD,GAAG,aAAa,QAAQ,UAAU,KAAK,YAAY,OAAO;AAE5D,MAAM,4BAA4B,CAAC,KAAK,OAAO,YAC7C,MACI,OAAO,KAAK,GAAG,EAAE;AAAA,EACjB,CAAC,KAAK,SAAS;AAAA,IACb,GAAG;AAAA,IACH,CAAC,GAAG,8BAA8B,OAAO,SAAS,GAAG,MAAM,IAAI;AAAA,EACjE;AAAA,EACA,CAAC;AACH,IACE,CAAC;AAEP,MAAM,oBACJ,CAAC,MAAM,UACL,CAAC,OAAO,SAAS,qBAAqB,UAAU,CAAC,MAC/C,aAAAA,QAAM,WAAW,CAAC,EAAE,UAAU,UAAU,YAAY,cAAc,WAAW,OAAO,KAAK,GAAG,QAAQ;AAElG,MAAI,iBAAiB,0BAA0B,qBAAqB,OAAO,OAAO;AAClF,MAAI,OAAO,wBAAwB;AACjC,qBAAiB;AAAA,MACf,oBAAoB,EAAE,GAAG,MAAM,GAAG,YAAY,UAAU,CAAC;AAAA,MACzD;AAAA,MACA;AAAA,IACF;AAEF,QAAM,wBAAoB,eAAAC,SAAG,cAAc;AAC3C,QAAM,EAAE,QAAQ,gCAAgC,CAAC,EAAE,IAAI;AACvD,QAAM,EAAE,cAAc,WAAW,QAAI;AAAA,IACnC;AAAA,IACA;AAAA,IACA,EAAE,GAAG,WAAW;AAAA,IAChB,EAAE,QAAQ,QAAQ;AAAA,EACpB;AACA,QAAM,yBAAyB,EAAE,GAAG,OAAO,GAAG,KAAK;AACnD,gCAA8B,QAAQ,CAAC,YAAY;AACjD,WAAO,uBAAuB;AAAA,EAChC,CAAC;AAED,UAAI,gDAAoB,KAAK,GAAG;AAC9B,WAAO,KAAK,sBAAsB,EAAE,QAAQ,CAAC,QAAQ;AACnD,UAAI,KAAC,mDAAuB,GAAG;AAAG,eAAO,uBAAuB;AAAA,IAClE,CAAC;AAAA,EACH;AAEA,SAAO,aAAAD,QAAM;AAAA,IACX,MAAM;AAAA,IACN;AAAA,MACE,KAAK,YAAY;AAAA,MACjB,WAAW,CAAC,YAAY,mBAAmB,SAAS,EAAE,KAAK,GAAG;AAAA,MAC9D,GAAG;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF,CAAC;AAEP,IAAO,4BAAQ;",
|
|
6
6
|
"names": ["React", "cx"]
|
|
7
7
|
}
|
|
@@ -30,15 +30,15 @@ __export(classNameManager_exports, {
|
|
|
30
30
|
});
|
|
31
31
|
module.exports = __toCommonJS(classNameManager_exports);
|
|
32
32
|
var React = __toESM(require("react"));
|
|
33
|
-
var
|
|
34
|
-
var
|
|
35
|
-
var import_converPropsToFormModifiers = require("./converPropsToFormModifiers");
|
|
36
|
-
var import_convertPropsToLayoutModifiers = require("./convertPropsToLayoutModifiers");
|
|
37
|
-
var import_convertPropToFeedBackModifiers = require("./convertPropToFeedBackModifiers");
|
|
38
|
-
var import_convertPropsToSizeModifiers = require("./convertPropsToSizeModifiers");
|
|
39
|
-
var import_convertPropsToTextModifiers = require("./convertPropsToTextModifiers");
|
|
40
|
-
var import_convertPropsToColorModifiers = require("./convertPropsToColorModifiers");
|
|
41
|
-
const cssPrefix = `${
|
|
33
|
+
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
34
|
+
var import_dimsum_config = require("./dimsum.config.js");
|
|
35
|
+
var import_converPropsToFormModifiers = require("./converPropsToFormModifiers.js");
|
|
36
|
+
var import_convertPropsToLayoutModifiers = require("./convertPropsToLayoutModifiers.js");
|
|
37
|
+
var import_convertPropToFeedBackModifiers = require("./convertPropToFeedBackModifiers.js");
|
|
38
|
+
var import_convertPropsToSizeModifiers = require("./convertPropsToSizeModifiers.js");
|
|
39
|
+
var import_convertPropsToTextModifiers = require("./convertPropsToTextModifiers.js");
|
|
40
|
+
var import_convertPropsToColorModifiers = require("./convertPropsToColorModifiers.js");
|
|
41
|
+
const cssPrefix = `${import_dimsum_config.dimsumConfig.classNamePrefix}-`;
|
|
42
42
|
const executePipelines = (props) => {
|
|
43
43
|
const form = (0, import_converPropsToFormModifiers.pipe)().execute(props);
|
|
44
44
|
const layout = (0, import_convertPropsToLayoutModifiers.pipe)().execute(props);
|
|
@@ -51,7 +51,7 @@ const executePipelines = (props) => {
|
|
|
51
51
|
const cssPipeline = (blockName = "block", cssClassNameModifier = "", props = {}, options = {}) => {
|
|
52
52
|
const { prefix, element } = options;
|
|
53
53
|
const prefixBlockName = `${prefix || cssPrefix}${blockName}${element ? `__${element}` : ""}`;
|
|
54
|
-
const pipes = !(0,
|
|
54
|
+
const pipes = !(0, import_ds_utilities.isEmpty)(props) ? executePipelines(props) : [];
|
|
55
55
|
const basePipeline = [prefixBlockName, ...pipes];
|
|
56
56
|
const className = cssClassNameModifier ? [...basePipeline].join(` ${prefixBlockName}--`).concat(` ${cssClassNameModifier}`) : [...basePipeline].join(` ${prefixBlockName}--`);
|
|
57
57
|
return {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/classNameManager.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable max-params */\nimport { isEmpty } from '@elliemae/ds-utilities
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable max-params */\nimport { isEmpty } from '@elliemae/ds-utilities';\nimport { dimsumConfig } from './dimsum.config.js';\nimport { pipe as formPipe } from './converPropsToFormModifiers.js';\nimport { pipe as layoutModifiers } from './convertPropsToLayoutModifiers.js';\nimport { pipe as feedBackModifiers } from './convertPropToFeedBackModifiers.js';\nimport { pipe as sizeModifiers } from './convertPropsToSizeModifiers.js';\nimport { pipe as textModifiers } from './convertPropsToTextModifiers.js';\nimport { pipe as colorModifiers } from './convertPropsToColorModifiers.js';\n\nexport const cssPrefix = `${dimsumConfig.classNamePrefix}-`;\n\nconst executePipelines = (props) => {\n const form = formPipe().execute(props);\n const layout = layoutModifiers().execute(props);\n const feedback = feedBackModifiers().execute(props);\n const size = sizeModifiers().execute(props);\n const text = textModifiers().execute(props);\n const color = colorModifiers().execute(props);\n return [...form, ...layout, ...feedback, ...size, ...text, ...color];\n};\n\n/**\n * Docs: http://getbem.com/naming/\n * blockName\n * cssClassNameModifier: Main modifier\n * props { hasError, hasWarning, hasSuccess, readOnly, disabled}\n *\n * @param blockName\n * @param cssClassNameModifier\n * @param props\n * @param options\n */\nconst cssPipeline: (\n blockName?: string,\n cssClassNameModifier?: string,\n props?: { [key: string]: any },\n options?: { [key: string]: any },\n) => {\n blockName: string;\n cssPrefix: string;\n prefixBlockName: string;\n cssClassName: string;\n mainModifier(modifier: any): string;\n classNameBlock(elementName: any, usePrefix?: boolean): string;\n classNameBlockModifier(modifierName: any, elementBlockName?: string): string;\n classNameElement(elementName: any, elementBlockName?: string): string;\n classNameModifier(modifierName: any, elementName?: string): string;\n} = (blockName = 'block', cssClassNameModifier = '', props = {}, options = {}) => {\n const { prefix, element } = options;\n\n const prefixBlockName = `${prefix || cssPrefix}${blockName}${element ? `__${element}` : ''}`;\n\n // PipeLine\n const pipes = !isEmpty(props) ? executePipelines(props) : [];\n\n const basePipeline = [prefixBlockName, ...pipes];\n\n // specific classname\n const className = cssClassNameModifier\n ? [...basePipeline].join(` ${prefixBlockName}--`).concat(` ${cssClassNameModifier}`)\n : [...basePipeline].join(` ${prefixBlockName}--`);\n\n return {\n blockName,\n cssPrefix,\n prefixBlockName,\n cssClassName: className,\n mainModifier(modifier) {\n return `${className}--${modifier}`;\n },\n classNameBlock(elementName, usePrefix = true) {\n return `${!usePrefix ? blockName : prefixBlockName}-${elementName}`;\n },\n classNameBlockModifier(modifierName, elementBlockName = '') {\n return `${prefixBlockName}-${elementBlockName}--${modifierName}`;\n },\n classNameElement(elementName, elementBlockName = '') {\n return `${prefixBlockName}${elementBlockName ? `-${elementBlockName}` : ''}__${elementName}`;\n },\n classNameModifier(modifierName, elementName = '') {\n return `${prefixBlockName}${elementName ? `__${elementName}` : ''}--${modifierName}`;\n },\n };\n};\n\nexport { cssPipeline as convertPropToCssClassName };\nexport default cssPipeline;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,0BAAwB;AACxB,2BAA6B;AAC7B,wCAAiC;AACjC,2CAAwC;AACxC,4CAA0C;AAC1C,yCAAsC;AACtC,yCAAsC;AACtC,0CAAuC;AAEhC,MAAM,YAAY,GAAG,kCAAa;AAEzC,MAAM,mBAAmB,CAAC,UAAU;AAClC,QAAM,WAAO,kCAAAA,MAAS,EAAE,QAAQ,KAAK;AACrC,QAAM,aAAS,qCAAAC,MAAgB,EAAE,QAAQ,KAAK;AAC9C,QAAM,eAAW,sCAAAC,MAAkB,EAAE,QAAQ,KAAK;AAClD,QAAM,WAAO,mCAAAC,MAAc,EAAE,QAAQ,KAAK;AAC1C,QAAM,WAAO,mCAAAC,MAAc,EAAE,QAAQ,KAAK;AAC1C,QAAM,YAAQ,oCAAAC,MAAe,EAAE,QAAQ,KAAK;AAC5C,SAAO,CAAC,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK;AACrE;AAaA,MAAM,cAeF,CAAC,YAAY,SAAS,uBAAuB,IAAI,QAAQ,CAAC,GAAG,UAAU,CAAC,MAAM;AAChF,QAAM,EAAE,QAAQ,QAAQ,IAAI;AAE5B,QAAM,kBAAkB,GAAG,UAAU,YAAY,YAAY,UAAU,KAAK,YAAY;AAGxF,QAAM,QAAQ,KAAC,6BAAQ,KAAK,IAAI,iBAAiB,KAAK,IAAI,CAAC;AAE3D,QAAM,eAAe,CAAC,iBAAiB,GAAG,KAAK;AAG/C,QAAM,YAAY,uBACd,CAAC,GAAG,YAAY,EAAE,KAAK,IAAI,mBAAmB,EAAE,OAAO,IAAI,sBAAsB,IACjF,CAAC,GAAG,YAAY,EAAE,KAAK,IAAI,mBAAmB;AAElD,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,aAAa,UAAU;AACrB,aAAO,GAAG,cAAc;AAAA,IAC1B;AAAA,IACA,eAAe,aAAa,YAAY,MAAM;AAC5C,aAAO,GAAG,CAAC,YAAY,YAAY,mBAAmB;AAAA,IACxD;AAAA,IACA,uBAAuB,cAAc,mBAAmB,IAAI;AAC1D,aAAO,GAAG,mBAAmB,qBAAqB;AAAA,IACpD;AAAA,IACA,iBAAiB,aAAa,mBAAmB,IAAI;AACnD,aAAO,GAAG,kBAAkB,mBAAmB,IAAI,qBAAqB,OAAO;AAAA,IACjF;AAAA,IACA,kBAAkB,cAAc,cAAc,IAAI;AAChD,aAAO,GAAG,kBAAkB,cAAc,KAAK,gBAAgB,OAAO;AAAA,IACxE;AAAA,EACF;AACF;AAGA,IAAO,2BAAQ;",
|
|
6
6
|
"names": ["formPipe", "layoutModifiers", "feedBackModifiers", "sizeModifiers", "textModifiers", "colorModifiers"]
|
|
7
7
|
}
|
package/dist/cjs/index.js
CHANGED
|
@@ -30,6 +30,6 @@ __export(src_exports, {
|
|
|
30
30
|
});
|
|
31
31
|
module.exports = __toCommonJS(src_exports);
|
|
32
32
|
var React = __toESM(require("react"));
|
|
33
|
-
var import_classNameManager = __toESM(require("./classNameManager"));
|
|
34
|
-
var import_aggregatedClasses = __toESM(require("./aggregatedClasses"));
|
|
33
|
+
var import_classNameManager = __toESM(require("./classNameManager.js"));
|
|
34
|
+
var import_aggregatedClasses = __toESM(require("./aggregatedClasses.js"));
|
|
35
35
|
//# sourceMappingURL=index.js.map
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/index.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export { default as convertPropToCssClassName, cssPrefix } from './classNameManager';\nexport { default as aggregatedClasses } from './aggregatedClasses';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
4
|
+
"sourcesContent": ["export { default as convertPropToCssClassName, cssPrefix } from './classNameManager.js';\nexport { default as aggregatedClasses } from './aggregatedClasses.js';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAAgE;AAChE,+BAA6C;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import React2 from "react";
|
|
3
3
|
import cx from "obj-str";
|
|
4
|
-
import { convertPropToCssClassName } from "./classNameManager";
|
|
5
|
-
import { dimsumConfig } from "./dimsum.config";
|
|
4
|
+
import { convertPropToCssClassName } from "./classNameManager.js";
|
|
5
|
+
import { dimsumConfig } from "./dimsum.config.js";
|
|
6
6
|
import {
|
|
7
7
|
isValidNativeAttribute,
|
|
8
8
|
isNativeHTMLElement
|
|
9
|
-
} from "./validateNativeProps";
|
|
9
|
+
} from "./validateNativeProps.js";
|
|
10
10
|
const cssPrefix = dimsumConfig.classNamePrefix;
|
|
11
11
|
const generateClassNameWithModifier = (block, element, modifier) => `${cssPrefix}-${block}${element ? `__${element}` : ""}--${modifier}`;
|
|
12
12
|
const appendBlockAndPrefixToObj = (obj, block, element) => obj ? Object.keys(obj).reduce(
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/aggregatedClasses.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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 './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"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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.js';\nimport { dimsumConfig } from './dimsum.config.js';\nimport {\n isValidNativeAttribute,\n isNativeHTMLElement,\n} from './validateNativeProps.js';\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"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACIvB,OAAOA,YAAW;AAClB,OAAO,QAAQ;AACf,SAAS,iCAAiC;AAC1C,SAAS,oBAAoB;AAC7B;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAEA,MAAM,YAAY,aAAa;AAatC,MAAM,gCAAgC,CAAC,OAAO,SAAS,aACrD,GAAG,aAAa,QAAQ,UAAU,KAAK,YAAY,OAAO;AAE5D,MAAM,4BAA4B,CAAC,KAAK,OAAO,YAC7C,MACI,OAAO,KAAK,GAAG,EAAE;AAAA,EACjB,CAAC,KAAK,SAAS;AAAA,IACb,GAAG;AAAA,IACH,CAAC,GAAG,8BAA8B,OAAO,SAAS,GAAG,MAAM,IAAI;AAAA,EACjE;AAAA,EACA,CAAC;AACH,IACE,CAAC;AAEP,MAAM,oBACJ,CAAC,MAAM,UACL,CAAC,OAAO,SAAS,qBAAqB,UAAU,CAAC,MAC/CA,OAAM,WAAW,CAAC,EAAE,UAAU,UAAU,YAAY,cAAc,WAAW,OAAO,KAAK,GAAG,QAAQ;AAElG,MAAI,iBAAiB,0BAA0B,qBAAqB,OAAO,OAAO;AAClF,MAAI,OAAO,wBAAwB;AACjC,qBAAiB;AAAA,MACf,oBAAoB,EAAE,GAAG,MAAM,GAAG,YAAY,UAAU,CAAC;AAAA,MACzD;AAAA,MACA;AAAA,IACF;AAEF,QAAM,oBAAoB,GAAG,cAAc;AAC3C,QAAM,EAAE,QAAQ,gCAAgC,CAAC,EAAE,IAAI;AACvD,QAAM,EAAE,cAAc,WAAW,IAAI;AAAA,IACnC;AAAA,IACA;AAAA,IACA,EAAE,GAAG,WAAW;AAAA,IAChB,EAAE,QAAQ,QAAQ;AAAA,EACpB;AACA,QAAM,yBAAyB,EAAE,GAAG,OAAO,GAAG,KAAK;AACnD,gCAA8B,QAAQ,CAAC,YAAY;AACjD,WAAO,uBAAuB;AAAA,EAChC,CAAC;AAED,MAAI,oBAAoB,KAAK,GAAG;AAC9B,WAAO,KAAK,sBAAsB,EAAE,QAAQ,CAAC,QAAQ;AACnD,UAAI,CAAC,uBAAuB,GAAG;AAAG,eAAO,uBAAuB;AAAA,IAClE,CAAC;AAAA,EACH;AAEA,SAAOA,OAAM;AAAA,IACX,MAAM;AAAA,IACN;AAAA,MACE,KAAK,YAAY;AAAA,MACjB,WAAW,CAAC,YAAY,mBAAmB,SAAS,EAAE,KAAK,GAAG;AAAA,MAC9D,GAAG;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF,CAAC;AAEP,IAAO,4BAAQ;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import { isEmpty } from "@elliemae/ds-utilities
|
|
3
|
-
import { dimsumConfig } from "./dimsum.config";
|
|
4
|
-
import { pipe as formPipe } from "./converPropsToFormModifiers";
|
|
5
|
-
import { pipe as layoutModifiers } from "./convertPropsToLayoutModifiers";
|
|
6
|
-
import { pipe as feedBackModifiers } from "./convertPropToFeedBackModifiers";
|
|
7
|
-
import { pipe as sizeModifiers } from "./convertPropsToSizeModifiers";
|
|
8
|
-
import { pipe as textModifiers } from "./convertPropsToTextModifiers";
|
|
9
|
-
import { pipe as colorModifiers } from "./convertPropsToColorModifiers";
|
|
2
|
+
import { isEmpty } from "@elliemae/ds-utilities";
|
|
3
|
+
import { dimsumConfig } from "./dimsum.config.js";
|
|
4
|
+
import { pipe as formPipe } from "./converPropsToFormModifiers.js";
|
|
5
|
+
import { pipe as layoutModifiers } from "./convertPropsToLayoutModifiers.js";
|
|
6
|
+
import { pipe as feedBackModifiers } from "./convertPropToFeedBackModifiers.js";
|
|
7
|
+
import { pipe as sizeModifiers } from "./convertPropsToSizeModifiers.js";
|
|
8
|
+
import { pipe as textModifiers } from "./convertPropsToTextModifiers.js";
|
|
9
|
+
import { pipe as colorModifiers } from "./convertPropsToColorModifiers.js";
|
|
10
10
|
const cssPrefix = `${dimsumConfig.classNamePrefix}-`;
|
|
11
11
|
const executePipelines = (props) => {
|
|
12
12
|
const form = formPipe().execute(props);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/classNameManager.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable max-params */\nimport { isEmpty } from '@elliemae/ds-utilities
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable max-params */\nimport { isEmpty } from '@elliemae/ds-utilities';\nimport { dimsumConfig } from './dimsum.config.js';\nimport { pipe as formPipe } from './converPropsToFormModifiers.js';\nimport { pipe as layoutModifiers } from './convertPropsToLayoutModifiers.js';\nimport { pipe as feedBackModifiers } from './convertPropToFeedBackModifiers.js';\nimport { pipe as sizeModifiers } from './convertPropsToSizeModifiers.js';\nimport { pipe as textModifiers } from './convertPropsToTextModifiers.js';\nimport { pipe as colorModifiers } from './convertPropsToColorModifiers.js';\n\nexport const cssPrefix = `${dimsumConfig.classNamePrefix}-`;\n\nconst executePipelines = (props) => {\n const form = formPipe().execute(props);\n const layout = layoutModifiers().execute(props);\n const feedback = feedBackModifiers().execute(props);\n const size = sizeModifiers().execute(props);\n const text = textModifiers().execute(props);\n const color = colorModifiers().execute(props);\n return [...form, ...layout, ...feedback, ...size, ...text, ...color];\n};\n\n/**\n * Docs: http://getbem.com/naming/\n * blockName\n * cssClassNameModifier: Main modifier\n * props { hasError, hasWarning, hasSuccess, readOnly, disabled}\n *\n * @param blockName\n * @param cssClassNameModifier\n * @param props\n * @param options\n */\nconst cssPipeline: (\n blockName?: string,\n cssClassNameModifier?: string,\n props?: { [key: string]: any },\n options?: { [key: string]: any },\n) => {\n blockName: string;\n cssPrefix: string;\n prefixBlockName: string;\n cssClassName: string;\n mainModifier(modifier: any): string;\n classNameBlock(elementName: any, usePrefix?: boolean): string;\n classNameBlockModifier(modifierName: any, elementBlockName?: string): string;\n classNameElement(elementName: any, elementBlockName?: string): string;\n classNameModifier(modifierName: any, elementName?: string): string;\n} = (blockName = 'block', cssClassNameModifier = '', props = {}, options = {}) => {\n const { prefix, element } = options;\n\n const prefixBlockName = `${prefix || cssPrefix}${blockName}${element ? `__${element}` : ''}`;\n\n // PipeLine\n const pipes = !isEmpty(props) ? executePipelines(props) : [];\n\n const basePipeline = [prefixBlockName, ...pipes];\n\n // specific classname\n const className = cssClassNameModifier\n ? [...basePipeline].join(` ${prefixBlockName}--`).concat(` ${cssClassNameModifier}`)\n : [...basePipeline].join(` ${prefixBlockName}--`);\n\n return {\n blockName,\n cssPrefix,\n prefixBlockName,\n cssClassName: className,\n mainModifier(modifier) {\n return `${className}--${modifier}`;\n },\n classNameBlock(elementName, usePrefix = true) {\n return `${!usePrefix ? blockName : prefixBlockName}-${elementName}`;\n },\n classNameBlockModifier(modifierName, elementBlockName = '') {\n return `${prefixBlockName}-${elementBlockName}--${modifierName}`;\n },\n classNameElement(elementName, elementBlockName = '') {\n return `${prefixBlockName}${elementBlockName ? `-${elementBlockName}` : ''}__${elementName}`;\n },\n classNameModifier(modifierName, elementName = '') {\n return `${prefixBlockName}${elementName ? `__${elementName}` : ''}--${modifierName}`;\n },\n };\n};\n\nexport { cssPipeline as convertPropToCssClassName };\nexport default cssPipeline;\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,eAAe;AACxB,SAAS,oBAAoB;AAC7B,SAAS,QAAQ,gBAAgB;AACjC,SAAS,QAAQ,uBAAuB;AACxC,SAAS,QAAQ,yBAAyB;AAC1C,SAAS,QAAQ,qBAAqB;AACtC,SAAS,QAAQ,qBAAqB;AACtC,SAAS,QAAQ,sBAAsB;AAEhC,MAAM,YAAY,GAAG,aAAa;AAEzC,MAAM,mBAAmB,CAAC,UAAU;AAClC,QAAM,OAAO,SAAS,EAAE,QAAQ,KAAK;AACrC,QAAM,SAAS,gBAAgB,EAAE,QAAQ,KAAK;AAC9C,QAAM,WAAW,kBAAkB,EAAE,QAAQ,KAAK;AAClD,QAAM,OAAO,cAAc,EAAE,QAAQ,KAAK;AAC1C,QAAM,OAAO,cAAc,EAAE,QAAQ,KAAK;AAC1C,QAAM,QAAQ,eAAe,EAAE,QAAQ,KAAK;AAC5C,SAAO,CAAC,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK;AACrE;AAaA,MAAM,cAeF,CAAC,YAAY,SAAS,uBAAuB,IAAI,QAAQ,CAAC,GAAG,UAAU,CAAC,MAAM;AAChF,QAAM,EAAE,QAAQ,QAAQ,IAAI;AAE5B,QAAM,kBAAkB,GAAG,UAAU,YAAY,YAAY,UAAU,KAAK,YAAY;AAGxF,QAAM,QAAQ,CAAC,QAAQ,KAAK,IAAI,iBAAiB,KAAK,IAAI,CAAC;AAE3D,QAAM,eAAe,CAAC,iBAAiB,GAAG,KAAK;AAG/C,QAAM,YAAY,uBACd,CAAC,GAAG,YAAY,EAAE,KAAK,IAAI,mBAAmB,EAAE,OAAO,IAAI,sBAAsB,IACjF,CAAC,GAAG,YAAY,EAAE,KAAK,IAAI,mBAAmB;AAElD,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,aAAa,UAAU;AACrB,aAAO,GAAG,cAAc;AAAA,IAC1B;AAAA,IACA,eAAe,aAAa,YAAY,MAAM;AAC5C,aAAO,GAAG,CAAC,YAAY,YAAY,mBAAmB;AAAA,IACxD;AAAA,IACA,uBAAuB,cAAc,mBAAmB,IAAI;AAC1D,aAAO,GAAG,mBAAmB,qBAAqB;AAAA,IACpD;AAAA,IACA,iBAAiB,aAAa,mBAAmB,IAAI;AACnD,aAAO,GAAG,kBAAkB,mBAAmB,IAAI,qBAAqB,OAAO;AAAA,IACjF;AAAA,IACA,kBAAkB,cAAc,cAAc,IAAI;AAChD,aAAO,GAAG,kBAAkB,cAAc,KAAK,gBAAgB,OAAO;AAAA,IACxE;AAAA,EACF;AACF;AAGA,IAAO,2BAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import { default as default2, cssPrefix } from "./classNameManager";
|
|
3
|
-
import { default as default3 } from "./aggregatedClasses";
|
|
2
|
+
import { default as default2, cssPrefix } from "./classNameManager.js";
|
|
3
|
+
import { default as default3 } from "./aggregatedClasses.js";
|
|
4
4
|
export {
|
|
5
5
|
default3 as aggregatedClasses,
|
|
6
6
|
default2 as convertPropToCssClassName,
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { default as convertPropToCssClassName, cssPrefix } from './classNameManager';\nexport { default as aggregatedClasses } from './aggregatedClasses';\n"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { default as convertPropToCssClassName, cssPrefix } from './classNameManager.js';\nexport { default as aggregatedClasses } from './aggregatedClasses.js';\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAoB,WAAXA,UAAsC,iBAAiB;AAChE,SAAoB,WAAXA,gBAAoC;",
|
|
6
6
|
"names": ["default"]
|
|
7
7
|
}
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { default as convertPropToCssClassName, cssPrefix } from './classNameManager';
|
|
2
|
-
export { default as aggregatedClasses } from './aggregatedClasses';
|
|
1
|
+
export { default as convertPropToCssClassName, cssPrefix } from './classNameManager.js';
|
|
2
|
+
export { default as aggregatedClasses } from './aggregatedClasses.js';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-classnames",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.16.0-next.10",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum Library - Aggregated classNames to component",
|
|
6
6
|
"files": [
|
|
@@ -72,7 +72,8 @@
|
|
|
72
72
|
},
|
|
73
73
|
"dependencies": {
|
|
74
74
|
"obj-str": "~1.1.0",
|
|
75
|
-
"@elliemae/ds-
|
|
75
|
+
"@elliemae/ds-props-helpers": "3.16.0-next.10",
|
|
76
|
+
"@elliemae/ds-utilities": "3.16.0-next.10"
|
|
76
77
|
},
|
|
77
78
|
"publishConfig": {
|
|
78
79
|
"access": "public",
|
|
@@ -89,7 +90,7 @@
|
|
|
89
90
|
"eslint:fix": "eslint --ext='.js,.jsx,.test.js,.ts,.tsx' --fix --config='../../.eslintrc.js' src/",
|
|
90
91
|
"dts": "node ../../scripts/dts.mjs",
|
|
91
92
|
"build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs",
|
|
92
|
-
"dev:build": "pnpm --filter {.}... build
|
|
93
|
+
"dev:build": "pnpm --filter {.}... build",
|
|
93
94
|
"dev:install": "pnpm --filter {.}... i --no-lockfile && pnpm run dev:build",
|
|
94
95
|
"checkDeps": "npx -yes ../ds-codemods check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\"",
|
|
95
96
|
"dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch"
|