@vtex/admin-core - npm Package Compare versions

Comparing version 0.10.7 to 0.10.8-experimental.0

CHANGELOG.md

@@ -6,2 +6,20 @@ # Change Log
 
+## [0.10.8-experimental.0](https://github.com/vtex/onda/compare/@vtex/admin-core@0.10.7...@vtex/admin-core@0.10.8-experimental.0) (2021-04-28)
+
+
+### Features
+
+* **admin-core:** accept own props & useHook on onda factory ([f4796a5](https://github.com/vtex/onda/commit/f4796a53af462cea6e85109b24f34f87db9d1024))
+* **admin-core:** onda factory ([e88a5b2](https://github.com/vtex/onda/commit/e88a5b2dee976f84e1208b56d4fbbd0781fc1cf3))
+* **core:** add inline onda call ([04c8cd8](https://github.com/vtex/onda/commit/04c8cd8844e3edc0fd71a848518dd503d299773b))
+
+
+### BREAKING CHANGES
+
+* **admin-core:** heading 'element' prop, is now called 'as'
+
+
+
+
+
 ## [0.10.7](https://github.com/vtex/onda/compare/@vtex/admin-core@0.10.6...@vtex/admin-core@0.10.7) (2021-04-21)
@@ -8,0 +26,0 @@

dist/admin-core.cjs.development.js

@@ -15,2 +15,4 @@ 'use strict';
 var reactHelmet = require('react-helmet');
+var reactIs = require('react-is');
+var isPropValid = _interopDefault(require('@emotion/is-prop-valid'));
 
@@ -35,2 +37,17 @@ function _extends() {
 
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
 function _taggedTemplateLiteralLoose(strings, raw) {
@@ -132,2 +149,156 @@ if (!raw) {
 
+var ONDA_METADATA = /*#__PURE__*/Symbol('Onda component metadata');
+
+function useOwnPropsIdentity(_, props) {
+  return props;
+}
+/**
+ * clean invalid HTML props
+ * @param props
+ */
+
+function cleanProps(props) {
+  var validKeys = Object.keys(props).filter(isPropValid);
+  var htmlProps = adminUiSystem.pick(props, validKeys);
+  return htmlProps;
+}
+function isOndaComponent(value) {
+  return !!value[ONDA_METADATA];
+}
+function pickOwnProps(type) {
+  // is a configuration
+  if (!!type.as) {
+    var _type$ownProps2;
+
+    if (isOndaComponent(type.as)) {
+      var _meta$ownProps, _type$ownProps;
+
+      // passed an onda component on `as`
+      var meta = type[ONDA_METADATA];
+      return [].concat((_meta$ownProps = meta === null || meta === void 0 ? void 0 : meta.ownProps) !== null && _meta$ownProps !== void 0 ? _meta$ownProps : [], (_type$ownProps = type === null || type === void 0 ? void 0 : type.ownProps) !== null && _type$ownProps !== void 0 ? _type$ownProps : []);
+    }
+
+    return (_type$ownProps2 = type === null || type === void 0 ? void 0 : type.ownProps) !== null && _type$ownProps2 !== void 0 ? _type$ownProps2 : [];
+  } // is a literal type
+
+
+  if (isOndaComponent(type)) {
+    var _meta$ownProps2;
+
+    var _meta = type[ONDA_METADATA];
+    return (_meta$ownProps2 = _meta === null || _meta === void 0 ? void 0 : _meta.ownProps) !== null && _meta$ownProps2 !== void 0 ? _meta$ownProps2 : [];
+  }
+
+  return [];
+}
+
+function useStyleSheet(params) {
+  var styleSheet = params.styleSheet,
+      sync = params.sync,
+      props = params.props,
+      ownProps = params.ownProps;
+
+  var csx = props.csx,
+      className = props.className,
+      htmlProps = _objectWithoutPropertiesLoose(props, ["csx", "className"]);
+
+  var _useSystem = useSystem(),
+      cn = _useSystem.cn,
+      cx = _useSystem.cx;
+
+  var _styleSheet$variants = styleSheet.variants,
+      variants = _styleSheet$variants === void 0 ? {} : _styleSheet$variants,
+      preCsx = _objectWithoutPropertiesLoose(styleSheet, ["variants"]);
+
+  var variantList = Object.keys(variants);
+  var synced = sync.reduce(function (acc, currentSync) {
+    var csx = currentSync.csx,
+        variantsToSync = _objectWithoutPropertiesLoose(currentSync, ["csx"]);
+
+    var hasAll = Object.keys(variantsToSync).every(function (variant) {
+      return (htmlProps === null || htmlProps === void 0 ? void 0 : htmlProps[variant]) === variantsToSync[variant];
+    });
+
+    if (!hasAll) {
+      return acc;
+    }
+
+    return [].concat(acc, [csx]);
+  }, []);
+  var variantStyles = variantList.reduce(function (acc, $key) {
+    var _variants$$key, _current$htmlProps$$k;
+
+    var current = (_variants$$key = variants === null || variants === void 0 ? void 0 : variants[$key]) !== null && _variants$$key !== void 0 ? _variants$$key : {};
+    return adminUiSystem.merge(acc, (_current$htmlProps$$k = current === null || current === void 0 ? void 0 : current[htmlProps === null || htmlProps === void 0 ? void 0 : htmlProps[$key]]) !== null && _current$htmlProps$$k !== void 0 ? _current$htmlProps$$k : {});
+  }, {});
+  var sheetObject = adminUiSystem.merge.apply(void 0, [preCsx, variantStyles].concat(synced, [csx]));
+  var finalProps = adminUiSystem.omit(htmlProps, [].concat(variantList, ownProps));
+  return _extends({}, finalProps, {
+    className: cx(cn(sheetObject), className)
+  });
+}
+
+function createOnda(target, styleSheet, sync) {
+  var _unsafeType$useOwnPro, _configuration$sheet, _Object$assign;
+
+  if (styleSheet === void 0) {
+    styleSheet = {};
+  }
+
+  if (sync === void 0) {
+    sync = [];
+  }
+
+  var unsafeType = target; // chooses the correct configuration setting for the target
+
+  var configuration = {
+    type: reactIs.isValidElementType(target) ? target : target.as,
+    ownProps: pickOwnProps(unsafeType),
+    useOwnProps: (_unsafeType$useOwnPro = unsafeType === null || unsafeType === void 0 ? void 0 : unsafeType.useOwnProps) !== null && _unsafeType$useOwnPro !== void 0 ? _unsafeType$useOwnPro : useOwnPropsIdentity,
+    sheet: isOndaComponent(unsafeType) ? adminUiSystem.merge(unsafeType[ONDA_METADATA].sheet, styleSheet) : styleSheet
+  };
+
+  var ConcreteOndaComponent = function ConcreteOndaComponent(_ref, ref) {
+    var _ref$as = _ref.as,
+        ComponentCall = _ref$as === void 0 ? configuration === null || configuration === void 0 ? void 0 : configuration.type : _ref$as,
+        props = _objectWithoutPropertiesLoose(_ref, ["as"]);
+
+    var system = useSystem();
+    var interceptedProps = configuration.useOwnProps(adminUiSystem.pick(props, configuration.ownProps), adminUiSystem.omit(props, configuration.ownProps), system);
+    var hookedProps = adminUiSystem.merge(props, interceptedProps);
+    var propsWithCompiledStyle = useStyleSheet({
+      styleSheet: styleSheet,
+      sync: sync,
+      props: hookedProps,
+      ownProps: configuration.ownProps
+    });
+
+    var _ref2 = typeof configuration.type === 'string' ? cleanProps(propsWithCompiledStyle) : adminUiSystem.merge(propsWithCompiledStyle, adminUiSystem.pick(hookedProps, configuration.ownProps)),
+        children = _ref2.children,
+        htmlProps = _objectWithoutPropertiesLoose(_ref2, ["children"]);
+
+    return React__default.createElement(ComponentCall, Object.assign({
+      ref: ref
+    }, htmlProps), adminUiSystem.isFunction(children) ? children(htmlProps) : children);
+  };
+
+  var Forwarded = React__default.forwardRef(ConcreteOndaComponent);
+  return Object.assign(Forwarded, (_Object$assign = {}, _Object$assign[ONDA_METADATA] = {
+    useOwnProps: configuration.useOwnProps,
+    ownProps: configuration.ownProps,
+    styleSheet: (_configuration$sheet = configuration === null || configuration === void 0 ? void 0 : configuration.sheet) !== null && _configuration$sheet !== void 0 ? _configuration$sheet : {}
+  }, _Object$assign));
+}
+
+/**
+ * Carefully selected html elements for admin-ui components.
+ * This is mostly for `jsx.<element>` syntax.
+ */
+var domElements = ['a', 'b', 'article', 'aside', 'blockquote', 'button', 'caption', 'cite', 'circle', 'code', 'dd', 'div', 'dl', 'dt', 'fieldset', 'figcaption', 'figure', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'header', 'hr', 'img', 'input', 'kbd', 'label', 'li', 'mark', 'nav', 'ol', 'p', 'path', 'pre', 'q', 'rect', 's', 'svg', 'section', 'select', 'strong', 'small', 'span', 'sub', 'sup', 'table', 'tbody', 'td', 'textarea', 'tfoot', 'th', 'thead', 'tr', 'ul'];
+
+var onda = createOnda;
+domElements.forEach(function (tag) {
+  onda[tag] = createOnda(tag);
+});
+
 Object.defineProperty(exports, 'Global', {
@@ -337,6 +508,15 @@ enumerable: true,
 });
+exports.ONDA_METADATA = ONDA_METADATA;
 exports.ThemeProvider = ThemeProvider;
+exports.cleanProps = cleanProps;
+exports.createOnda = createOnda;
 exports.createSystem = createSystem;
 exports.defaultSystem = defaultSystem;
+exports.domElements = domElements;
+exports.isOndaComponent = isOndaComponent;
+exports.onda = onda;
+exports.pickOwnProps = pickOwnProps;
+exports.useOwnPropsIdentity = useOwnPropsIdentity;
+exports.useStyleSheet = useStyleSheet;
 exports.useSystem = useSystem;
 //# sourceMappingURL=admin-core.cjs.development.js.map

dist/admin-core.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),r=e(t),n=require("@vtex/admin-ui-system"),o=e(require("tiny-invariant"));require("focus-visible/dist/focus-visible");var u=require("@vtex/admin-ui-theme"),i=require("@emotion/react"),s=require("react-helmet");function a(){return(a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}function c(e,t){void 0===t&&(t={overrides:{}});var r=t.components,o=n.merge(u.theme,t.overrides),i=r?Object.assign(o,{components:a({},r,u.theme.components)}):o;return n.createSystem(i,"vtex-"+e)}var l,f,p,m=c("admin-ui");function b(){var e,t,r=(e=["\n      ","\n    "],t||(t=e.slice(0)),e.raw=t,e);return b=function(){return r},r}var d=null!==(l=null===(f=u.theme.global)||void 0===f||null===(p=f.imports)||void 0===p?void 0:p.reduce((function(e,t){return e+" @import '"+t+"';"}),""))&&void 0!==l?l:"";function y(){return n.jsxs(i.Global,{styles:i.css(b(),d)})}function x(){return n.jsxs.apply(void 0,[s.Helmet,{}].concat([n.jsxs("link",{rel:"preload",href:"https://io.vtex.com.br/fonts/vtex-trust/VTEXTrust-Variable.woff2",as:"font",type:"font/woff2",crossorigin:"anonymous"})]))}function g(){var e;return n.jsxs(i.Global,{styles:n.styles(null==u.theme||null===(e=u.theme.global)||void 0===e?void 0:e.styles)(u.theme)})}var j=t.createContext(null);Object.defineProperty(exports,"Global",{enumerable:!0,get:function(){return n.Global}}),Object.defineProperty(exports,"alpha",{enumerable:!0,get:function(){return n.alpha}}),Object.defineProperty(exports,"complement",{enumerable:!0,get:function(){return n.complement}}),Object.defineProperty(exports,"createComponent",{enumerable:!0,get:function(){return n.createComponent}}),Object.defineProperty(exports,"css",{enumerable:!0,get:function(){return n.css}}),Object.defineProperty(exports,"darken",{enumerable:!0,get:function(){return n.darken}}),Object.defineProperty(exports,"desaturate",{enumerable:!0,get:function(){return n.desaturate}}),Object.defineProperty(exports,"forwardRef",{enumerable:!0,get:function(){return n.forwardRef}}),Object.defineProperty(exports,"get",{enumerable:!0,get:function(){return n.get}}),Object.defineProperty(exports,"getColor",{enumerable:!0,get:function(){return n.getColor}}),Object.defineProperty(exports,"grayscale",{enumerable:!0,get:function(){return n.grayscale}}),Object.defineProperty(exports,"hue",{enumerable:!0,get:function(){return n.hue}}),Object.defineProperty(exports,"inlineVariant",{enumerable:!0,get:function(){return n.inlineVariant}}),Object.defineProperty(exports,"invert",{enumerable:!0,get:function(){return n.invert}}),Object.defineProperty(exports,"isFunction",{enumerable:!0,get:function(){return n.isFunction}}),Object.defineProperty(exports,"isObjectEmpty",{enumerable:!0,get:function(){return n.isObjectEmpty}}),Object.defineProperty(exports,"jsxs",{enumerable:!0,get:function(){return n.jsxs}}),Object.defineProperty(exports,"lighten",{enumerable:!0,get:function(){return n.lighten}}),Object.defineProperty(exports,"lightness",{enumerable:!0,get:function(){return n.lightness}}),Object.defineProperty(exports,"merge",{enumerable:!0,get:function(){return n.merge}}),Object.defineProperty(exports,"mix",{enumerable:!0,get:function(){return n.mix}}),Object.defineProperty(exports,"omit",{enumerable:!0,get:function(){return n.omit}}),Object.defineProperty(exports,"pick",{enumerable:!0,get:function(){return n.pick}}),Object.defineProperty(exports,"rotate",{enumerable:!0,get:function(){return n.rotate}}),Object.defineProperty(exports,"saturate",{enumerable:!0,get:function(){return n.saturate}}),Object.defineProperty(exports,"saturation",{enumerable:!0,get:function(){return n.saturation}}),Object.defineProperty(exports,"shade",{enumerable:!0,get:function(){return n.shade}}),Object.defineProperty(exports,"styles",{enumerable:!0,get:function(){return n.styles}}),Object.defineProperty(exports,"tint",{enumerable:!0,get:function(){return n.tint}}),Object.defineProperty(exports,"transparentize",{enumerable:!0,get:function(){return n.transparentize}}),Object.defineProperty(exports,"useMediaQuery",{enumerable:!0,get:function(){return n.useMediaQuery}}),Object.defineProperty(exports,"useResponsiveValue",{enumerable:!0,get:function(){return n.useResponsiveValue}}),Object.defineProperty(exports,"useTheme",{enumerable:!0,get:function(){return n.useTheme}}),Object.defineProperty(exports,"theme",{enumerable:!0,get:function(){return u.theme}}),exports.ThemeProvider=function(e){var t=e.children,o=e.system,u=void 0===o?m:o;return r.createElement(n.CacheProvider,{value:u.emotionInstance.cache},r.createElement(j.Provider,{value:u},r.createElement(x,null),r.createElement(y,null),r.createElement(g,null),r.createElement(u.ThemeProvider,null,t)))},exports.createSystem=c,exports.defaultSystem=m,exports.useSystem=function(){var e=t.useContext(j);e||o(!1);var r=e.emotionInstance;return{cn:e.cn,stylesOf:e.stylesOf,keyframes:r.keyframes,cx:r.cx}};
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),r=e(t),n=require("@vtex/admin-ui-system"),o=e(require("tiny-invariant"));require("focus-visible/dist/focus-visible");var i=require("@vtex/admin-ui-theme"),u=require("@emotion/react"),s=require("react-helmet"),a=require("react-is"),c=e(require("@emotion/is-prop-valid"));function l(){return(l=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}function p(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)t.indexOf(r=i[n])>=0||(o[r]=e[r]);return o}function f(e,t){void 0===t&&(t={overrides:{}});var r=t.components,o=n.merge(i.theme,t.overrides),u=r?Object.assign(o,{components:l({},r,i.theme.components)}):o;return n.createSystem(u,"vtex-"+e)}var d,m,b,v=f("admin-ui");function y(){var e,t,r=(e=["\n      ","\n    "],t||(t=e.slice(0)),e.raw=t,e);return y=function(){return r},r}var x=null!==(d=null===(m=i.theme.global)||void 0===m||null===(b=m.imports)||void 0===b?void 0:b.reduce((function(e,t){return e+" @import '"+t+"';"}),""))&&void 0!==d?d:"";function g(){return n.jsxs(u.Global,{styles:u.css(y(),x)})}function O(){return n.jsxs.apply(void 0,[s.Helmet,{}].concat([n.jsxs("link",{rel:"preload",href:"https://io.vtex.com.br/fonts/vtex-trust/VTEXTrust-Variable.woff2",as:"font",type:"font/woff2",crossorigin:"anonymous"})]))}function P(){var e;return n.jsxs(u.Global,{styles:n.styles(null==i.theme||null===(e=i.theme.global)||void 0===e?void 0:e.styles)(i.theme)})}var h=t.createContext(null);function j(){var e=t.useContext(h);e||o(!1);var r=e.emotionInstance;return{cn:e.cn,stylesOf:e.stylesOf,keyframes:r.keyframes,cx:r.cx}}var w=Symbol("Onda component metadata");function k(e,t){return t}function E(e){var t=Object.keys(e).filter(c);return n.pick(e,t)}function q(e){return!!e[w]}function S(e){if(e.as){var t;if(q(e.as)){var r,n,o=e[w];return[].concat(null!==(r=null==o?void 0:o.ownProps)&&void 0!==r?r:[],null!==(n=null==e?void 0:e.ownProps)&&void 0!==n?n:[])}return null!==(t=null==e?void 0:e.ownProps)&&void 0!==t?t:[]}if(q(e)){var i,u=e[w];return null!==(i=null==u?void 0:u.ownProps)&&void 0!==i?i:[]}return[]}function T(e){var t=e.styleSheet,r=e.sync,o=e.props,i=e.ownProps,u=o.csx,s=o.className,a=p(o,["csx","className"]),c=j(),f=c.cn,d=c.cx,m=t.variants,b=void 0===m?{}:m,v=p(t,["variants"]),y=Object.keys(b),x=r.reduce((function(e,t){var r=t.csx,n=p(t,["csx"]);return Object.keys(n).every((function(e){return(null==a?void 0:a[e])===n[e]}))?[].concat(e,[r]):e}),[]),g=y.reduce((function(e,t){var r,o,i=null!==(r=null==b?void 0:b[t])&&void 0!==r?r:{};return n.merge(e,null!==(o=null==i?void 0:i[null==a?void 0:a[t]])&&void 0!==o?o:{})}),{}),O=n.merge.apply(void 0,[v,g].concat(x,[u]));return l({},n.omit(a,[].concat(y,i)),{className:d(f(O),s)})}function C(e,t,o){var i,u,s;void 0===t&&(t={}),void 0===o&&(o=[]);var c=e,l={type:a.isValidElementType(e)?e:e.as,ownProps:S(c),useOwnProps:null!==(i=null==c?void 0:c.useOwnProps)&&void 0!==i?i:k,sheet:q(c)?n.merge(c[w].sheet,t):t},f=r.forwardRef((function(e,i){var u=e.as,s=void 0===u?null==l?void 0:l.type:u,a=p(e,["as"]),c=j(),f=l.useOwnProps(n.pick(a,l.ownProps),n.omit(a,l.ownProps),c),d=n.merge(a,f),m=T({styleSheet:t,sync:o,props:d,ownProps:l.ownProps}),b="string"==typeof l.type?E(m):n.merge(m,n.pick(d,l.ownProps)),v=b.children,y=p(b,["children"]);return r.createElement(s,Object.assign({ref:i},y),n.isFunction(v)?v(y):v)}));return Object.assign(f,((s={})[w]={useOwnProps:l.useOwnProps,ownProps:l.ownProps,styleSheet:null!==(u=null==l?void 0:l.sheet)&&void 0!==u?u:{}},s))}var V=["a","b","article","aside","blockquote","button","caption","cite","circle","code","dd","div","dl","dt","fieldset","figcaption","figure","footer","form","h1","h2","h3","h4","h5","h6","header","hr","img","input","kbd","label","li","mark","nav","ol","p","path","pre","q","rect","s","svg","section","select","strong","small","span","sub","sup","table","tbody","td","textarea","tfoot","th","thead","tr","ul"],R=C;V.forEach((function(e){R[e]=C(e)})),Object.defineProperty(exports,"Global",{enumerable:!0,get:function(){return n.Global}}),Object.defineProperty(exports,"alpha",{enumerable:!0,get:function(){return n.alpha}}),Object.defineProperty(exports,"complement",{enumerable:!0,get:function(){return n.complement}}),Object.defineProperty(exports,"createComponent",{enumerable:!0,get:function(){return n.createComponent}}),Object.defineProperty(exports,"css",{enumerable:!0,get:function(){return n.css}}),Object.defineProperty(exports,"darken",{enumerable:!0,get:function(){return n.darken}}),Object.defineProperty(exports,"desaturate",{enumerable:!0,get:function(){return n.desaturate}}),Object.defineProperty(exports,"forwardRef",{enumerable:!0,get:function(){return n.forwardRef}}),Object.defineProperty(exports,"get",{enumerable:!0,get:function(){return n.get}}),Object.defineProperty(exports,"getColor",{enumerable:!0,get:function(){return n.getColor}}),Object.defineProperty(exports,"grayscale",{enumerable:!0,get:function(){return n.grayscale}}),Object.defineProperty(exports,"hue",{enumerable:!0,get:function(){return n.hue}}),Object.defineProperty(exports,"inlineVariant",{enumerable:!0,get:function(){return n.inlineVariant}}),Object.defineProperty(exports,"invert",{enumerable:!0,get:function(){return n.invert}}),Object.defineProperty(exports,"isFunction",{enumerable:!0,get:function(){return n.isFunction}}),Object.defineProperty(exports,"isObjectEmpty",{enumerable:!0,get:function(){return n.isObjectEmpty}}),Object.defineProperty(exports,"jsxs",{enumerable:!0,get:function(){return n.jsxs}}),Object.defineProperty(exports,"lighten",{enumerable:!0,get:function(){return n.lighten}}),Object.defineProperty(exports,"lightness",{enumerable:!0,get:function(){return n.lightness}}),Object.defineProperty(exports,"merge",{enumerable:!0,get:function(){return n.merge}}),Object.defineProperty(exports,"mix",{enumerable:!0,get:function(){return n.mix}}),Object.defineProperty(exports,"omit",{enumerable:!0,get:function(){return n.omit}}),Object.defineProperty(exports,"pick",{enumerable:!0,get:function(){return n.pick}}),Object.defineProperty(exports,"rotate",{enumerable:!0,get:function(){return n.rotate}}),Object.defineProperty(exports,"saturate",{enumerable:!0,get:function(){return n.saturate}}),Object.defineProperty(exports,"saturation",{enumerable:!0,get:function(){return n.saturation}}),Object.defineProperty(exports,"shade",{enumerable:!0,get:function(){return n.shade}}),Object.defineProperty(exports,"styles",{enumerable:!0,get:function(){return n.styles}}),Object.defineProperty(exports,"tint",{enumerable:!0,get:function(){return n.tint}}),Object.defineProperty(exports,"transparentize",{enumerable:!0,get:function(){return n.transparentize}}),Object.defineProperty(exports,"useMediaQuery",{enumerable:!0,get:function(){return n.useMediaQuery}}),Object.defineProperty(exports,"useResponsiveValue",{enumerable:!0,get:function(){return n.useResponsiveValue}}),Object.defineProperty(exports,"useTheme",{enumerable:!0,get:function(){return n.useTheme}}),Object.defineProperty(exports,"theme",{enumerable:!0,get:function(){return i.theme}}),exports.ONDA_METADATA=w,exports.ThemeProvider=function(e){var t=e.children,o=e.system,i=void 0===o?v:o;return r.createElement(n.CacheProvider,{value:i.emotionInstance.cache},r.createElement(h.Provider,{value:i},r.createElement(O,null),r.createElement(g,null),r.createElement(P,null),r.createElement(i.ThemeProvider,null,t)))},exports.cleanProps=E,exports.createOnda=C,exports.createSystem=f,exports.defaultSystem=v,exports.domElements=V,exports.isOndaComponent=q,exports.onda=R,exports.pickOwnProps=S,exports.useOwnPropsIdentity=k,exports.useStyleSheet=T,exports.useSystem=j;
 //# sourceMappingURL=admin-core.cjs.production.min.js.map

dist/admin-core.esm.js

 import React, { useContext, createContext } from 'react';
-import { merge, createSystem as createSystem$1, jsxs, styles, CacheProvider } from '@vtex/admin-ui-system';
+import { merge, createSystem as createSystem$1, jsxs, styles, CacheProvider, pick, omit, isFunction } from '@vtex/admin-ui-system';
 export { Global, alpha, complement, createComponent, css, darken, desaturate, forwardRef, get, getColor, grayscale, hue, inlineVariant, invert, isFunction, isObjectEmpty, jsxs, lighten, lightness, merge, mix, omit, pick, rotate, saturate, saturation, shade, styles, tint, transparentize, useMediaQuery, useResponsiveValue, useTheme } from '@vtex/admin-ui-system';
@@ -10,2 +10,4 @@ import invariant from 'tiny-invariant';
 import { Helmet } from 'react-helmet';
+import { isValidElementType } from 'react-is';
+import isPropValid from '@emotion/is-prop-valid';
 
@@ -30,2 +32,17 @@ function _extends() {
 
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
 function _taggedTemplateLiteralLoose(strings, raw) {
@@ -127,3 +144,157 @@ if (!raw) {
 
-export { ThemeProvider, createSystem, defaultSystem, useSystem };
+var ONDA_METADATA = /*#__PURE__*/Symbol('Onda component metadata');
+
+function useOwnPropsIdentity(_, props) {
+  return props;
+}
+/**
+ * clean invalid HTML props
+ * @param props
+ */
+
+function cleanProps(props) {
+  var validKeys = Object.keys(props).filter(isPropValid);
+  var htmlProps = pick(props, validKeys);
+  return htmlProps;
+}
+function isOndaComponent(value) {
+  return !!value[ONDA_METADATA];
+}
+function pickOwnProps(type) {
+  // is a configuration
+  if (!!type.as) {
+    var _type$ownProps2;
+
+    if (isOndaComponent(type.as)) {
+      var _meta$ownProps, _type$ownProps;
+
+      // passed an onda component on `as`
+      var meta = type[ONDA_METADATA];
+      return [].concat((_meta$ownProps = meta === null || meta === void 0 ? void 0 : meta.ownProps) !== null && _meta$ownProps !== void 0 ? _meta$ownProps : [], (_type$ownProps = type === null || type === void 0 ? void 0 : type.ownProps) !== null && _type$ownProps !== void 0 ? _type$ownProps : []);
+    }
+
+    return (_type$ownProps2 = type === null || type === void 0 ? void 0 : type.ownProps) !== null && _type$ownProps2 !== void 0 ? _type$ownProps2 : [];
+  } // is a literal type
+
+
+  if (isOndaComponent(type)) {
+    var _meta$ownProps2;
+
+    var _meta = type[ONDA_METADATA];
+    return (_meta$ownProps2 = _meta === null || _meta === void 0 ? void 0 : _meta.ownProps) !== null && _meta$ownProps2 !== void 0 ? _meta$ownProps2 : [];
+  }
+
+  return [];
+}
+
+function useStyleSheet(params) {
+  var styleSheet = params.styleSheet,
+      sync = params.sync,
+      props = params.props,
+      ownProps = params.ownProps;
+
+  var csx = props.csx,
+      className = props.className,
+      htmlProps = _objectWithoutPropertiesLoose(props, ["csx", "className"]);
+
+  var _useSystem = useSystem(),
+      cn = _useSystem.cn,
+      cx = _useSystem.cx;
+
+  var _styleSheet$variants = styleSheet.variants,
+      variants = _styleSheet$variants === void 0 ? {} : _styleSheet$variants,
+      preCsx = _objectWithoutPropertiesLoose(styleSheet, ["variants"]);
+
+  var variantList = Object.keys(variants);
+  var synced = sync.reduce(function (acc, currentSync) {
+    var csx = currentSync.csx,
+        variantsToSync = _objectWithoutPropertiesLoose(currentSync, ["csx"]);
+
+    var hasAll = Object.keys(variantsToSync).every(function (variant) {
+      return (htmlProps === null || htmlProps === void 0 ? void 0 : htmlProps[variant]) === variantsToSync[variant];
+    });
+
+    if (!hasAll) {
+      return acc;
+    }
+
+    return [].concat(acc, [csx]);
+  }, []);
+  var variantStyles = variantList.reduce(function (acc, $key) {
+    var _variants$$key, _current$htmlProps$$k;
+
+    var current = (_variants$$key = variants === null || variants === void 0 ? void 0 : variants[$key]) !== null && _variants$$key !== void 0 ? _variants$$key : {};
+    return merge(acc, (_current$htmlProps$$k = current === null || current === void 0 ? void 0 : current[htmlProps === null || htmlProps === void 0 ? void 0 : htmlProps[$key]]) !== null && _current$htmlProps$$k !== void 0 ? _current$htmlProps$$k : {});
+  }, {});
+  var sheetObject = merge.apply(void 0, [preCsx, variantStyles].concat(synced, [csx]));
+  var finalProps = omit(htmlProps, [].concat(variantList, ownProps));
+  return _extends({}, finalProps, {
+    className: cx(cn(sheetObject), className)
+  });
+}
+
+function createOnda(target, styleSheet, sync) {
+  var _unsafeType$useOwnPro, _configuration$sheet, _Object$assign;
+
+  if (styleSheet === void 0) {
+    styleSheet = {};
+  }
+
+  if (sync === void 0) {
+    sync = [];
+  }
+
+  var unsafeType = target; // chooses the correct configuration setting for the target
+
+  var configuration = {
+    type: isValidElementType(target) ? target : target.as,
+    ownProps: pickOwnProps(unsafeType),
+    useOwnProps: (_unsafeType$useOwnPro = unsafeType === null || unsafeType === void 0 ? void 0 : unsafeType.useOwnProps) !== null && _unsafeType$useOwnPro !== void 0 ? _unsafeType$useOwnPro : useOwnPropsIdentity,
+    sheet: isOndaComponent(unsafeType) ? merge(unsafeType[ONDA_METADATA].sheet, styleSheet) : styleSheet
+  };
+
+  var ConcreteOndaComponent = function ConcreteOndaComponent(_ref, ref) {
+    var _ref$as = _ref.as,
+        ComponentCall = _ref$as === void 0 ? configuration === null || configuration === void 0 ? void 0 : configuration.type : _ref$as,
+        props = _objectWithoutPropertiesLoose(_ref, ["as"]);
+
+    var system = useSystem();
+    var interceptedProps = configuration.useOwnProps(pick(props, configuration.ownProps), omit(props, configuration.ownProps), system);
+    var hookedProps = merge(props, interceptedProps);
+    var propsWithCompiledStyle = useStyleSheet({
+      styleSheet: styleSheet,
+      sync: sync,
+      props: hookedProps,
+      ownProps: configuration.ownProps
+    });
+
+    var _ref2 = typeof configuration.type === 'string' ? cleanProps(propsWithCompiledStyle) : merge(propsWithCompiledStyle, pick(hookedProps, configuration.ownProps)),
+        children = _ref2.children,
+        htmlProps = _objectWithoutPropertiesLoose(_ref2, ["children"]);
+
+    return React.createElement(ComponentCall, Object.assign({
+      ref: ref
+    }, htmlProps), isFunction(children) ? children(htmlProps) : children);
+  };
+
+  var Forwarded = React.forwardRef(ConcreteOndaComponent);
+  return Object.assign(Forwarded, (_Object$assign = {}, _Object$assign[ONDA_METADATA] = {
+    useOwnProps: configuration.useOwnProps,
+    ownProps: configuration.ownProps,
+    styleSheet: (_configuration$sheet = configuration === null || configuration === void 0 ? void 0 : configuration.sheet) !== null && _configuration$sheet !== void 0 ? _configuration$sheet : {}
+  }, _Object$assign));
+}
+
+/**
+ * Carefully selected html elements for admin-ui components.
+ * This is mostly for `jsx.<element>` syntax.
+ */
+var domElements = ['a', 'b', 'article', 'aside', 'blockquote', 'button', 'caption', 'cite', 'circle', 'code', 'dd', 'div', 'dl', 'dt', 'fieldset', 'figcaption', 'figure', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'header', 'hr', 'img', 'input', 'kbd', 'label', 'li', 'mark', 'nav', 'ol', 'p', 'path', 'pre', 'q', 'rect', 's', 'svg', 'section', 'select', 'strong', 'small', 'span', 'sub', 'sup', 'table', 'tbody', 'td', 'textarea', 'tfoot', 'th', 'thead', 'tr', 'ul'];
+
+var onda = createOnda;
+domElements.forEach(function (tag) {
+  onda[tag] = createOnda(tag);
+});
+
+export { ONDA_METADATA, ThemeProvider, cleanProps, createOnda, createSystem, defaultSystem, domElements, isOndaComponent, onda, pickOwnProps, useOwnPropsIdentity, useStyleSheet, useSystem };
 //# sourceMappingURL=admin-core.esm.js.map

dist/index.d.ts

 export * from './core';
 export * from './theme';
 export * from './system';
+export * from './onda';

package.json

 {
   "name": "@vtex/admin-core",
-  "version": "0.10.7",
+  "version": "0.10.8-experimental.0",
   "main": "dist/index.js",
@@ -38,11 +38,13 @@ "module": "dist/admin-core.esm.js",
   "dependencies": {
-    "@vtex/admin-ui-system": "^0.15.1",
-    "@vtex/admin-ui-theme": "^0.25.1",
+    "@emotion/is-prop-valid": "^1.1.0",
+    "@vtex/admin-ui-system": "^0.15.2-experimental.0",
+    "@vtex/admin-ui-theme": "^0.25.2-experimental.0",
     "deepmerge": "^4.2.2",
     "focus-visible": "^5.1.0",
     "react-helmet": "6.1.0",
+    "react-is": "^17.0.2",
     "tiny-invariant": "^1.1.0",
     "tiny-warning": "^1.0.3"
   },
-  "gitHead": "c486f58b14fa6557ce5e4fe17cb1784dcd15ed21"
+  "gitHead": "e6ee6f4f64f1ce93206f374af913e079e014093b"
 }

src/index.ts

 export * from './core'
 export * from './theme'
 export * from './system'
+export * from './onda'

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

132251

increased by144.46%

Number of package files

38

increased by90%

Lines of code

1963

increased by192.99%

Worsened metrics

Dependency count

13

increased by18.18%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@emotion/is-prop-valid@^1.1.0

• + Addedreact-is@^17.0.2

• + Added@emotion/is-prop-valid@1.3.1(transitive)

• + Added@vtex/admin-ui-system@0.15.2-experimental.0(transitive)

• + Added@vtex/admin-ui-theme@0.25.2-experimental.0(transitive)

• + Addedreact-is@17.0.2(transitive)

• - Removed@vtex/admin-ui-system@0.15.1(transitive)

• - Removed@vtex/admin-ui-theme@0.25.1(transitive)

• Updated@vtex/admin-ui-system@^0.15.2-experimental.0

• Updated@vtex/admin-ui-theme@^0.25.2-experimental.0