@meonode/ui 0.1.62 → 0.1.64
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/core.node.d.ts +3 -3
- package/dist/core.node.d.ts.map +1 -1
- package/dist/core.node.js +17 -17
- package/dist/hoc/portal.hoc.js +2 -2
- package/dist/hook/useClasses.js +3 -3
- package/package.json +1 -1
package/dist/core.node.d.ts
CHANGED
|
@@ -36,14 +36,14 @@ export declare class BaseNode<E extends NodeElement> implements NodeInstance<E>
|
|
|
36
36
|
*
|
|
37
37
|
* - If the element is a flex container:
|
|
38
38
|
* - Sets `flexShrink` to 0 for specific scenarios:
|
|
39
|
-
* - Column-based layout
|
|
40
|
-
* - Row-based layout without wrapping (default direction is assumed to be 'row').
|
|
39
|
+
* - Column-based layout without wrapping.
|
|
40
|
+
* - Row-based layout without wrapping (a default direction is assumed to be 'row').
|
|
41
41
|
* - If the element is not a flex container:
|
|
42
42
|
* - Defaults `flexShrink` to 0.
|
|
43
43
|
* @param style The CSSProperties object containing style definitions.
|
|
44
44
|
* @returns An object with resolved default styles.
|
|
45
45
|
*/
|
|
46
|
-
private
|
|
46
|
+
private _resolveDefaultStyle;
|
|
47
47
|
/**
|
|
48
48
|
* Resolves theme variable references in an object's values recursively.
|
|
49
49
|
* Handles nested objects and prevents circular references.
|
package/dist/core.node.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"core.node.d.ts","sourceRoot":"","sources":["../src/core.node.ts"],"names":[],"mappings":"AACA,OAAc,EAAsG,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AACjJ,OAAO,KAAK,EAAE,cAAc,EAAyB,WAAW,EAAE,YAAY,EAAE,SAAS,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAGzI,OAAO,EAAc,KAAK,IAAI,IAAI,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAExE;;;;;;;;GAQG;AACH,qBAAa,QAAQ,CAAC,CAAC,SAAS,WAAW,CAAE,YAAW,YAAY,CAAC,CAAC,CAAC;IACrE,+EAA+E;IACxE,OAAO,EAAE,CAAC,CAAA;IAEjB,kFAAkF;IAC3E,QAAQ,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAA;IAEjC,wFAAwF;IACjF,KAAK,EAAE,cAAc,CAAA;IAE5B,OAAO,CAAC,iBAAiB,CAA8B;IACvD,OAAO,CAAC,gBAAgB,CAA4B;IAEpD;;;;;;;;OAQG;gBACS,OAAO,EAAE,CAAC,EAAE,QAAQ,GAAE,YAAY,CAAC,CAAC,CAAM;IA2CtD;;;;;;;;;;;;;OAaG;IACH,OAAO,CAAC,
|
|
1
|
+
{"version":3,"file":"core.node.d.ts","sourceRoot":"","sources":["../src/core.node.ts"],"names":[],"mappings":"AACA,OAAc,EAAsG,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AACjJ,OAAO,KAAK,EAAE,cAAc,EAAyB,WAAW,EAAE,YAAY,EAAE,SAAS,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAGzI,OAAO,EAAc,KAAK,IAAI,IAAI,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAExE;;;;;;;;GAQG;AACH,qBAAa,QAAQ,CAAC,CAAC,SAAS,WAAW,CAAE,YAAW,YAAY,CAAC,CAAC,CAAC;IACrE,+EAA+E;IACxE,OAAO,EAAE,CAAC,CAAA;IAEjB,kFAAkF;IAC3E,QAAQ,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAA;IAEjC,wFAAwF;IACjF,KAAK,EAAE,cAAc,CAAA;IAE5B,OAAO,CAAC,iBAAiB,CAA8B;IACvD,OAAO,CAAC,gBAAgB,CAA4B;IAEpD;;;;;;;;OAQG;gBACS,OAAO,EAAE,CAAC,EAAE,QAAQ,GAAE,YAAY,CAAC,CAAC,CAAM;IA2CtD;;;;;;;;;;;;;OAaG;IACH,OAAO,CAAC,oBAAoB;IA8B5B;;;;;;;OAOG;IACH,OAAO,CAAC,oBAAoB;IAsE5B;;;;;;;;;;OAUG;IACH,OAAO,CAAC,iBAAiB;IAuDzB;;;;;;;;OAQG;IACI,eAAe,CACpB,OAAO,EAAE,WAAW,EACpB,WAAW,CAAC,EAAE,KAAK,EACnB,UAAU,CAAC,EAAE,MAAM,GAClB,WAAW;IAyFd;;;;;;;;;;;;;OAaG;IACH,OAAO,CAAC,eAAe,CAmCtB;IAED;;;;OAIG;IACI,MAAM,IAAI,SAAS;IAsC1B,OAAO,CAAC,2BAA2B;IAsB5B,QAAQ,IAAI,YAAY,GAAG,IAAI;CAsBvC;AAED;;;;;GAKG;AACH,wBAAgB,IAAI,CAAC,CAAC,SAAS,WAAW,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,GAAE,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAM,GAAG,YAAY,CAAC,CAAC,CAAC,CAU1G"}
|
package/dist/core.node.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var _excluded=["ref","children","nodetheme","theme"],_excluded2=["
|
|
1
|
+
"use strict";var _excluded=["ref","children","nodetheme","theme"],_excluded2=["flex"],_excluded3=["style"],_excluded4=["children","key"];function _typeof(a){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(a){return typeof a}:function(a){return a&&"function"==typeof Symbol&&a.constructor===Symbol&&a!==Symbol.prototype?"symbol":typeof a},_typeof(a)}function _objectWithoutProperties(a,b){if(null==a)return{};var c,d,e=_objectWithoutPropertiesLoose(a,b);if(Object.getOwnPropertySymbols){var f=Object.getOwnPropertySymbols(a);for(d=0;d<f.length;d++)c=f[d],-1===b.indexOf(c)&&{}.propertyIsEnumerable.call(a,c)&&(e[c]=a[c])}return e}function _objectWithoutPropertiesLoose(a,b){if(null==a)return{};var c={};for(var d in a)if({}.hasOwnProperty.call(a,d)){if(-1!==b.indexOf(d))continue;c[d]=a[d]}return c}function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}function _defineProperty(a,b,c){return(b=_toPropertyKey(b))in a?Object.defineProperty(a,b,{value:c,enumerable:!0,configurable:!0,writable:!0}):a[b]=c,a}function _toPropertyKey(a){var b=_toPrimitive(a,"string");return"symbol"==_typeof(b)?b:b+""}function _toPrimitive(a,b){if("object"!=_typeof(a)||!a)return a;var c=a[Symbol.toPrimitive];if(void 0!==c){var d=c.call(a,b||"default");if("object"!=_typeof(d))return d;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===b?String:Number)(a)}import React,{createElement,isValidElement}from"react";import{getComponentType,getCSSProps,getDOMProps,getElementTypeName,getValueByPath}from"./node.helper.js";import{isForwardRef,isMemo,isReactClassComponent,isValidElementType}from"./react-is.helper.js";import{createRoot}from"react-dom/client";/**
|
|
2
2
|
* Represents a node in a React component tree with theme and styling capabilities.
|
|
3
3
|
* This class wraps React elements and handles:
|
|
4
4
|
* - Props processing and normalization
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
* - Child node processing and management
|
|
7
7
|
* - Style processing with theme variables
|
|
8
8
|
* @template E The type of React element or component this node represents
|
|
9
|
-
*/export
|
|
9
|
+
*/export class BaseNode{/**
|
|
10
10
|
* Creates a new BaseNode instance that wraps a React element.
|
|
11
11
|
* Processes raw props by:
|
|
12
12
|
* - Extracting and resolving theme-aware styles
|
|
@@ -14,15 +14,15 @@
|
|
|
14
14
|
* - Normalizing children with theme inheritance
|
|
15
15
|
* @param element The React element/component to wrap
|
|
16
16
|
* @param rawProps Initial props including theme, styles, and children
|
|
17
|
-
*/
|
|
17
|
+
*/constructor(a){var b=this,c=1<arguments.length&&arguments[1]!==void 0?arguments[1]:{};_defineProperty(this,"_portalDOMElement",null),_defineProperty(this,"_portalReactRoot",null),_defineProperty(this,"_normalizeChild",function(a){var c,d;if(!a)return a;var e=(null===(c=b.rawProps)||void 0===c?void 0:c.nodetheme)||(null===(d=b.rawProps)||void 0===d?void 0:d.theme)||b.props.nodetheme||b.props.theme;// For BaseNode instances, apply current theme if child has no theme
|
|
18
18
|
if(a instanceof BaseNode){var f;return null!==(f=a.rawProps)&&void 0!==f&&f.nodetheme||void 0===e?a.render():new BaseNode(a.element,_objectSpread(_objectSpread({},a.rawProps),{},{nodetheme:e})).render()}// For React.Component instances, wrap in BaseNode with theme if needed
|
|
19
19
|
if(a instanceof React.Component)return a.props.nodetheme||void 0===e?a.render():new BaseNode(a.render(),_objectSpread(_objectSpread({},a.props),{},{nodetheme:e})).render();// Validate element type before returning
|
|
20
20
|
if(!isValidElementType(a)){var g=getComponentType(a);throw new Error("Invalid element type: ".concat(g," provided!"))}// Return valid React elements as-is
|
|
21
21
|
return a}),this.element=a,this.rawProps=c;// Destructure raw props into relevant parts
|
|
22
|
-
var d=c.ref,e=c.children,f=c.nodetheme,g=c.theme,h=_objectWithoutProperties(c,_excluded),i=g||f,j=this._resolveObjWithTheme(h,i),k=getCSSProps(j),l=this.
|
|
22
|
+
var d=c.ref,e=c.children,f=c.nodetheme,g=c.theme,h=_objectWithoutProperties(c,_excluded),i=g||f,j=this._resolveObjWithTheme(h,i),k=getCSSProps(j),l=this._resolveDefaultStyle(k),m=_objectSpread(_objectSpread({},l),j.style),n=getDOMProps(j),o=void 0;// Resolve any theme variables in the remaining props
|
|
23
23
|
// Extract CSS-related properties from the resolved theme-aware props
|
|
24
24
|
// Resolve default styles based on the processed style properties
|
|
25
|
-
// Merge
|
|
25
|
+
// Merge resolved default styles and processed style properties into final style props
|
|
26
26
|
// Extract remaining props that are valid DOM attributes
|
|
27
27
|
// Process children while maintaining theme inheritance
|
|
28
28
|
// Combine processed props into final normalized form
|
|
@@ -33,22 +33,22 @@ e&&(Array.isArray(e)?o=e.map(function(a,c){return b._processRawNode(a,i,c)}):o=t
|
|
|
33
33
|
*
|
|
34
34
|
* - If the element is a flex container:
|
|
35
35
|
* - Sets `flexShrink` to 0 for specific scenarios:
|
|
36
|
-
* - Column-based layout
|
|
37
|
-
* - Row-based layout without wrapping (default direction is assumed to be 'row').
|
|
36
|
+
* - Column-based layout without wrapping.
|
|
37
|
+
* - Row-based layout without wrapping (a default direction is assumed to be 'row').
|
|
38
38
|
* - If the element is not a flex container:
|
|
39
39
|
* - Defaults `flexShrink` to 0.
|
|
40
40
|
* @param style The CSSProperties object containing style definitions.
|
|
41
41
|
* @returns An object with resolved default styles.
|
|
42
|
-
*/
|
|
43
|
-
|
|
44
|
-
|
|
42
|
+
*/_resolveDefaultStyle(a){var b,c=a.flex,d=_objectWithoutProperties(a,_excluded2),e="flex"===d.display,f=!!(d.overflow||d.overflowY||d.overflowX),g=(null===(b=d.flexFlow)||void 0===b?void 0:b.includes("wrap"))||"wrap"===d.flexWrap,h=void 0;if(!e)// If it's not a flex container, default flex-shrink to 0
|
|
43
|
+
h=0;else if(!f){var i="column"===d.flexDirection||"column-reverse"===d.flexDirection,j="row"===d.flexDirection||"row-reverse"===d.flexDirection||!d.flexDirection;// Scenario 1: Column-based layout
|
|
44
|
+
i&&!g?h=0:j&&!g&&(h=0)}return _objectSpread({flex:c,flexShrink:h,minHeight:0,minWidth:0},d)}/**
|
|
45
45
|
* Resolves theme variable references in an object's values recursively.
|
|
46
46
|
* Handles nested objects and prevents circular references.
|
|
47
47
|
* Theme variables are referenced using the format "theme.path.to.value".
|
|
48
48
|
* @param obj The object whose values should be resolved against the theme
|
|
49
49
|
* @param theme Optional theme object containing variable definitions
|
|
50
50
|
* @returns A new object with all theme variables resolved to their values
|
|
51
|
-
*/
|
|
51
|
+
*/_resolveObjWithTheme(a,b){var c;// Early return if no theme or empty object
|
|
52
52
|
if(!b||0===Object.keys(a).length)return a;// Merge parent theme with current theme
|
|
53
53
|
var d=_objectSpread(_objectSpread({},null===(c=this.rawProps)||void 0===c?void 0:c.nodetheme),b),e=function resolveRecursively(a,b){// Prevent processing same object multiple times
|
|
54
54
|
if(b.has(a))return a;// Track this object to detect circular references
|
|
@@ -71,7 +71,7 @@ else c[f]=g&&"object"===_typeof(g)&&!Array.isArray(g)?e(g,b):g}return c};/**
|
|
|
71
71
|
* @param props.render The function to invoke for rendering the child.
|
|
72
72
|
* @param props.passedTheme The theme to provide to the child, if applicable.
|
|
73
73
|
* @returns The rendered ReactNode, with theme applied if necessary.
|
|
74
|
-
*/
|
|
74
|
+
*/_functionRenderer(a){var b=a.render,c=a.passedTheme,d=a.passedKey,e=a.processRawNode,f=b();// Call the user-provided render function to get the child.
|
|
75
75
|
if(f instanceof React.Component){var g=f.render(),h=e(g,c);if(h instanceof BaseNode){var i,j;if(((null===(i=h.rawProps)||void 0===i?void 0:i.theme)||(null===(j=h.rawProps)||void 0===j?void 0:j.nodetheme))===void 0&&c!==void 0){var k,l,m;return new BaseNode(h.element,_objectSpread(_objectSpread({},h.rawProps),{},{nodetheme:(null===(k=h.rawProps)||void 0===k?void 0:k.theme)||(null===(l=h.rawProps)||void 0===l?void 0:l.nodetheme)||c,key:(null===(m=h.rawProps)||void 0===m?void 0:m.key)||d})).render()}}return h}if(f instanceof BaseNode){var n,o=f;// If the returned BaseNode does not have its own theme, but a theme is provided,
|
|
76
76
|
// re-create the node with the provided theme to ensure correct theme propagation.
|
|
77
77
|
return void 0===(null===(n=o.rawProps)||void 0===n?void 0:n.nodetheme)&&void 0!==c?new BaseNode(o.element,_objectSpread(_objectSpread({},o.rawProps||{}),{},{nodetheme:c,key:d})).render():o.render();// If the node already has a theme or no theme is provided, render as-is.
|
|
@@ -86,7 +86,7 @@ return f}/**
|
|
|
86
86
|
* @param parentTheme The theme inherited from the parent node.
|
|
87
87
|
* @param childIndex Optional index of the child if it's part of an array.
|
|
88
88
|
* @returns The processed child.
|
|
89
|
-
*/
|
|
89
|
+
*/_processRawNode(a,b,c// Index for generating stable keys for array children
|
|
90
90
|
){var d=getComponentType(a),e=function generateIndexedKeyIfNeeded(a,b){if(b!==void 0&&null!==b)return b;if(void 0!==c){var d=getElementTypeName(a);// Get element type name for key generation
|
|
91
91
|
return"".concat(d,"-").concat(c)}// No explicit key, and not an array child, so BaseNode constructor will handle.
|
|
92
92
|
};// Determine the type of the raw node
|
|
@@ -103,7 +103,7 @@ if("function"===d&&!isReactClassComponent(a)&&!isMemo(a)&&!isForwardRef(a)){// T
|
|
|
103
103
|
var j=e(this._functionRenderer,void 0);// Generate key for function renderer
|
|
104
104
|
return new BaseNode(this._functionRenderer,{processRawNode:this._processRawNode.bind(this),render:a,passedTheme:b,key:j// Assign the generated key
|
|
105
105
|
})}// Case 4: Child is a React Element (JSX element like <div> or <MyComponent>)
|
|
106
|
-
if(isValidElement(a)){var k=a.props,l=k.style,m=_objectWithoutProperties(k,
|
|
106
|
+
if(isValidElement(a)){var k=a.props,l=k.style,m=_objectWithoutProperties(k,_excluded3),n=_objectSpread(_objectSpread({},m),l||{}),o=n.theme||n.nodetheme||b,p=e(a.type,a.key);// Combine top-level props from the element with its flattened style object properties
|
|
107
107
|
return new BaseNode(a.type,_objectSpread(_objectSpread({},n),{},{// Pass the combined props
|
|
108
108
|
nodetheme:o,key:p}))}// Case 5: Child is an ElementType (string tag, class component, Memo/ForwardRef)
|
|
109
109
|
if(isReactClassComponent(a)||"object"===d&&(isMemo(a)||isForwardRef(a))){// ElementTypes don't have an intrinsic key from the rawNode itself.
|
|
@@ -126,17 +126,17 @@ return a}/**
|
|
|
126
126
|
* @param child The child node to normalize into a renderable form
|
|
127
127
|
* @returns The normalized ReactNode that can be rendered by React
|
|
128
128
|
* @throws Error if child is an invalid element type
|
|
129
|
-
|
|
129
|
+
*//**
|
|
130
130
|
* Converts this BaseNode instance into a renderable React node.
|
|
131
131
|
* Recursively processes child nodes and uses `React.createElement` to construct the final React element.
|
|
132
132
|
* @returns A ReactNode representing the rendered element.
|
|
133
|
-
*/
|
|
133
|
+
*/render(){var a=this;if(!isValidElementType(this.element)){var b=getComponentType(this.element);throw new Error("Invalid element type: ".concat(b," provided!"))}var c=this.props,d=c.children,e=c.key,f=_objectWithoutProperties(c,_excluded4),g=void 0;// Extract children and key
|
|
134
134
|
// More accurate type
|
|
135
135
|
if(d!==void 0&&null!==d)if(!Array.isArray(d))// Single child
|
|
136
136
|
g=this._normalizeChild(d);else if(0<d.length){var h=d.map(function(b){return a._normalizeChild(b)});// Normalize each child in the array
|
|
137
137
|
// Check if all children are null/undefined (e.g., conditional rendering resulted in nothing)
|
|
138
138
|
g=h.every(function(a){return null===a||void 0===a})?void 0:h}else g=void 0;// Prepare props for React.createElement
|
|
139
|
-
var i=_objectSpread(_objectSpread({},f),{},{key:e});return createElement(this.element,i,g)}
|
|
139
|
+
var i=_objectSpread(_objectSpread({},f),{},{key:e});return createElement(this.element,i,g)}_ensurePortalInfrastructure(){if("undefined"==typeof window)return!1;if(this._portalDOMElement&&this._portalReactRoot)return!0;if(this._portalDOMElement&&!this._portalDOMElement.isConnected&&(this._portalDOMElement=null,this._portalDOMElement=null),this._portalDOMElement||(this._portalDOMElement=document.createElement("div"),document.body.appendChild(this._portalDOMElement)),!this._portalReactRoot){if(!this._portalDOMElement)return!1;this._portalReactRoot=createRoot(this._portalDOMElement)}return!0}toPortal(){var a=this;if(!this._ensurePortalInfrastructure()||!this._portalReactRoot)return null;var b=this.render();return this._portalReactRoot.render(b),_objectSpread(_objectSpread({},this._portalReactRoot),{},{unmount:function unmount(){a._portalReactRoot&&(a._portalReactRoot.unmount(),a._portalReactRoot=null),a._portalDOMElement&&(a._portalDOMElement.parentNode&&a._portalDOMElement.parentNode.removeChild(a._portalDOMElement),a._portalDOMElement=null)}})}}/**
|
|
140
140
|
* Factory function to create a BaseNode instance.
|
|
141
141
|
* @param element The React element type.
|
|
142
142
|
* @param props The props for the node.
|
package/dist/hoc/portal.hoc.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var _excluded=["nodetheme"],_excluded2=["provider","nodetheme"];function _typeof(a){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(a){return typeof a}:function(a){return a&&"function"==typeof Symbol&&a.constructor===Symbol&&a!==Symbol.prototype?"symbol":typeof a},_typeof(a)}function
|
|
1
|
+
"use strict";var _excluded=["nodetheme"],_excluded2=["provider","nodetheme"];function _typeof(a){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(a){return typeof a}:function(a){return a&&"function"==typeof Symbol&&a.constructor===Symbol&&a!==Symbol.prototype?"symbol":typeof a},_typeof(a)}function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}function _defineProperty(a,b,c){return(b=_toPropertyKey(b))in a?Object.defineProperty(a,b,{value:c,enumerable:!0,configurable:!0,writable:!0}):a[b]=c,a}function _toPropertyKey(a){var b=_toPrimitive(a,"string");return"symbol"==_typeof(b)?b:b+""}function _toPrimitive(a,b){if("object"!=_typeof(a)||!a)return a;var c=a[Symbol.toPrimitive];if(void 0!==c){var d=c.call(a,b||"default");if("object"!=_typeof(d))return d;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===b?String:Number)(a)}function _objectWithoutProperties(a,b){if(null==a)return{};var c,d,e=_objectWithoutPropertiesLoose(a,b);if(Object.getOwnPropertySymbols){var f=Object.getOwnPropertySymbols(a);for(d=0;d<f.length;d++)c=f[d],-1===b.indexOf(c)&&{}.propertyIsEnumerable.call(a,c)&&(e[c]=a[c])}return e}function _objectWithoutPropertiesLoose(a,b){if(null==a)return{};var c={};for(var d in a)if({}.hasOwnProperty.call(a,d)){if(-1!==b.indexOf(d))continue;c[d]=a[d]}return c}import{BaseNode,Node}from"../core.node";/**
|
|
2
2
|
* Creates a portal component with a fixed set of providers by passing an array of `NodeInstance`s.
|
|
3
3
|
* The content component will be rendered within these providers. This method is considered deprecated.
|
|
4
4
|
* @deprecated Use `Portal(provider: NodeInstance<any>, component: ...)` instead for fixed providers.
|
|
@@ -87,7 +87,7 @@ var j=injectContentDeeply(g,b);return Node(a.element,_objectSpread(_objectSpread
|
|
|
87
87
|
// Iterates through the combined providers (fixed + dynamic) to wrap the content.
|
|
88
88
|
// Providers are applied in reverse order to ensure the innermost content is wrapped by the outermost provider.
|
|
89
89
|
var b,c=[];// Combine fixed and dynamic providers
|
|
90
|
-
Array.isArray(a.provider)?(console.warn("Portal: Passing an array of providers as the `provider` prop is deprecated. Please pass a single NodeInstance instead."),c.push
|
|
90
|
+
Array.isArray(a.provider)?(console.warn("Portal: Passing an array of providers as the `provider` prop is deprecated. Please pass a single NodeInstance instead."),c.push(...a.provider)):a.provider&&c.push(a.provider);var g=[...(null!==d&&void 0!==d?d:[]),...c],h=a.provider,i=a.nodetheme,j=_objectWithoutProperties(a,_excluded2),k=_objectSpread(_objectSpread({},j),{},{nodetheme:i}),l=Node(f,k);// Separates props for the portal's content from internal props like 'provider' or 'nodetheme'.
|
|
91
91
|
// Creates the base node for the portal's content.
|
|
92
92
|
return b=0<g.length?g.reduceRight(function(a,b){var c,d,e;if(!(b instanceof BaseNode))return console.warn("Portal: Item in provider is not a valid NodeInstance. Skipping.",b),a;var f=(null===(c=b.rawProps)||void 0===c?void 0:c.children)instanceof BaseNode;// If the provider already has nested children, inject content deeply.
|
|
93
93
|
// Otherwise, simply set currentWrappedContent as its direct child.
|
package/dist/hook/useClasses.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
function _createForOfIteratorHelper(b,c){var d="undefined"!=typeof Symbol&&b[Symbol.iterator]||b["@@iterator"];if(!d){if(Array.isArray(b)||(d=_unsupportedIterableToArray(b))||c&&b&&"number"==typeof b.length){d&&(b=d);var e=0,f=function F(){};return{s:f,n:function n(){return e>=b.length?{done:!0}:{done:!1,value:b[e++]}},e:function e(a){throw a},f:f}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var g,h=!0,i=!1;return{s:function s(){d=d.call(b)},n:function n(){var a=d.next();return h=a.done,a},e:function e(a){i=!0,g=a},f:function f(){try{h||null==d["return"]||d["return"]()}finally{if(i)throw g}}}}function _slicedToArray(a,b){return _arrayWithHoles(a)||_iterableToArrayLimit(a,b)||_unsupportedIterableToArray(a,b)||_nonIterableRest()}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _iterableToArrayLimit(b,c){var d=null==b?null:"undefined"!=typeof Symbol&&b[Symbol.iterator]||b["@@iterator"];if(null!=d){var g,h,j,k,l=[],a=!0,m=!1;try{if(j=(d=d.call(b)).next,0===c){if(Object(d)!==d)return;a=!1}else for(;!(a=(g=j.call(d)).done)&&(l.push(g.value),l.length!==c);a=!0);}catch(a){m=!0,h=a}finally{try{if(!a&&null!=d["return"]&&(k=d["return"](),Object(k)!==k))return}finally{if(m)throw h}}return l}}function _arrayWithHoles(a){if(Array.isArray(a))return a}function _typeof(a){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(a){return typeof a}:function(a){return a&&"function"==typeof Symbol&&a.constructor===Symbol&&a!==Symbol.prototype?"symbol":typeof a},_typeof(a)}
|
|
1
|
+
function _createForOfIteratorHelper(b,c){var d="undefined"!=typeof Symbol&&b[Symbol.iterator]||b["@@iterator"];if(!d){if(Array.isArray(b)||(d=_unsupportedIterableToArray(b))||c&&b&&"number"==typeof b.length){d&&(b=d);var e=0,f=function F(){};return{s:f,n:function n(){return e>=b.length?{done:!0}:{done:!1,value:b[e++]}},e:function e(a){throw a},f:f}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var g,h=!0,i=!1;return{s:function s(){d=d.call(b)},n:function n(){var a=d.next();return h=a.done,a},e:function e(a){i=!0,g=a},f:function f(){try{h||null==d["return"]||d["return"]()}finally{if(i)throw g}}}}function _slicedToArray(a,b){return _arrayWithHoles(a)||_iterableToArrayLimit(a,b)||_unsupportedIterableToArray(a,b)||_nonIterableRest()}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(b,c){if(b){if("string"==typeof b)return _arrayLikeToArray(b,c);var a={}.toString.call(b).slice(8,-1);return"Object"===a&&b.constructor&&(a=b.constructor.name),"Map"===a||"Set"===a?Array.from(b):"Arguments"===a||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a)?_arrayLikeToArray(b,c):void 0}}function _arrayLikeToArray(b,c){(null==c||c>b.length)&&(c=b.length);for(var d=0,f=Array(c);d<c;d++)f[d]=b[d];return f}function _iterableToArrayLimit(b,c){var d=null==b?null:"undefined"!=typeof Symbol&&b[Symbol.iterator]||b["@@iterator"];if(null!=d){var g,h,j,k,l=[],a=!0,m=!1;try{if(j=(d=d.call(b)).next,0===c){if(Object(d)!==d)return;a=!1}else for(;!(a=(g=j.call(d)).done)&&(l.push(g.value),l.length!==c);a=!0);}catch(a){m=!0,h=a}finally{try{if(!a&&null!=d["return"]&&(k=d["return"](),Object(k)!==k))return}finally{if(m)throw h}}return l}}function _arrayWithHoles(a){if(Array.isArray(a))return a}function _typeof(a){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(a){return typeof a}:function(a){return a&&"function"==typeof Symbol&&a.constructor===Symbol&&a!==Symbol.prototype?"symbol":typeof a},_typeof(a)}import{useEffect,useMemo}from"react";// Manages styles for server-side rendering (SSR)
|
|
2
2
|
var serverStyles=[],serverRuleIndex=0;/**
|
|
3
3
|
* Retrieves the concatenated CSS string for server-side rendering.
|
|
4
4
|
* @returns {string} The CSS string.
|
|
@@ -30,7 +30,7 @@ var d="sx-".concat(ruleIndex++),e=[],f={},g={},h={},i={};// Stores the generated
|
|
|
30
30
|
// First pass: Separates top-level styles from at-rules
|
|
31
31
|
for(var j in a){var k=a[j];j.startsWith("@media")?g[j]=k:j.startsWith("@container")?h[j]=k:j.startsWith("@supports")?i[j]=k:f[j]=k}// Collects all rules for the base class and its nested selectors
|
|
32
32
|
// Injects styles based on the rendering environment
|
|
33
|
-
if(e.push
|
|
33
|
+
if(e.push(...collectRules(f,".".concat(d))),processAtRuleBlocks(g,e,d),processAtRuleBlocks(h,e,d),processAtRuleBlocks(i,e,d),"undefined"==typeof document){// Server-side rendering: stores CSS and returns a server-specific class name
|
|
34
34
|
var l="sx-".concat(serverRuleIndex++),m=e.map(function(a){return a.replace(new RegExp(d,"g"),l)}).join("\n");return serverStyles.push(m),sxCache.set(c,l),l}// Caches the generated rules and class name
|
|
35
35
|
return styleSheet&&// Client-side injection: inserts rules into the stylesheet
|
|
36
36
|
injectStyles(e),ruleMap.set(c,e),sxCache.set(c,d),d}/**
|
|
@@ -41,7 +41,7 @@ injectStyles(e),ruleMap.set(c,e),sxCache.set(c,d),d}/**
|
|
|
41
41
|
* @returns {string[]} An array of complete CSS rules.
|
|
42
42
|
*/function collectRules(a,b){var c=[],d={};// Stores direct CSS properties for the current selector
|
|
43
43
|
for(var e in a){var f=a[e];if("object"!==_typeof(f)||null===f)d[e]=f;else if(e.startsWith("&")){// Handles nested selectors (e.g., '&:hover', '& span')
|
|
44
|
-
var g=e.replace(/&/g,b);c.push
|
|
44
|
+
var g=e.replace(/&/g,b);c.push(...collectRules(f,g))}else e.startsWith("@")?// Warns about deeply nested at-rules, as they are processed at top-level or directly under the base class.
|
|
45
45
|
console.warn("Nested at-rule found at key \"".concat(e,"\" within selector \"").concat(b,"\". Current implementation processes at-rules at the top level or directly under the base class.")):// Flattens plain nested objects into the current selector's declarations
|
|
46
46
|
Object.assign(d,f)}// Generates the CSS rule for the current selector's direct properties
|
|
47
47
|
var h=toCssDeclarations(d);return h&&c.unshift("".concat(b," { ").concat(h," }")),c}/**
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@meonode/ui",
|
|
3
3
|
"description": "A structured approach to component composition with built-in theming, prop separation, and dynamic children handling.",
|
|
4
|
-
"version": "0.1.
|
|
4
|
+
"version": "0.1.64",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/main.js",
|
|
7
7
|
"types": "./dist/main.d.ts",
|