atomic-layout - npm Package Compare versions

Comparing version 0.12.4 to 0.12.5

lib/umd/index.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("styled-components"),require("react")):"function"==typeof define&&define.amd?define(["exports","styled-components","react"],t):t((e=e||self).AtomicLayout={},e.styled,e.React)}(this,(function(e,t,r){"use strict";var n="default"in t?t.default:t,o="default"in r?r.default:r;var a,i=function(e,t){return e(t={exports:{}},t.exports),t.exports}((function(e,t){Object.defineProperty(t,"__esModule",{value:!0});const r={defaultUnit:"px",defaultBehavior:"up",defaultBreakpointName:"xs",breakpoints:{xs:{maxWidth:"575px"},sm:{minWidth:"576px",maxWidth:"767px"},md:{minWidth:"768px",maxWidth:"991px"},lg:{minWidth:"992px",maxWidth:"1199px"},xl:{minWidth:"1200px"}}};function n(e,t){if(!e)throw new Error(t)}function o(e,t){e||console.warn(t)}var a=new class{constructor(e){return this.defaultUnit=r.defaultUnit,this.defaultBehavior=r.defaultBehavior,this.breakpoints=r.breakpoints,this.defaultBreakpointName=r.defaultBreakpointName,this.isConfigureCalled=!1,e?this.configure(e,!1):this}configure(e,t=!0){return t&&o(!this.isConfigureCalled,"Failed to configure Layout: do not call `Layout.configure()` more than once. Layout configuration must remain consistent throughout the application."),n(e&&"object"==typeof e,`Failed to configure Layout: expected an options Object, but got: ${e}.`),Object.keys(e||{}).forEach(t=>{this[t]=e[t]}),n(this.breakpoints,"Failed to configure Layout: expected to have at least one breakpoint specified, but got none."),n(this.breakpoints.hasOwnProperty(this.defaultBreakpointName),`Failed to configure Layout: cannot use "${this.defaultBreakpointName}" as the default breakpoint (breakpoint not found).`),n(this.defaultBreakpointName,`Failed to configure Layout: expected "defaultBreakpointName" property set, but got: ${this.defaultBreakpointName}.`),this.isConfigureCalled=t,this}};function i(...e){return e.reduce((e,t)=>(...r)=>e(t(...r)))}function u(e){return null!=e}function s(e){if(!u(e))return"";return`${e}${"number"==typeof e&&0!==e?a.defaultUnit:""}`}const p=["/","auto"];function c(e){const t=/^[0-9]/.test(e),r=p.includes(e);return!t&&!r}const l=i(e=>{const t=[],r=[];return e.forEach(e=>{c(e)?t.push(e):r.push(e)}),[t.length>0?`'${t.join(" ")}'`:"",r.join(" ")].filter(Boolean).join(" ")},e=>e.split(" "),e=>e.replace(/'+/gm,""),e=>e.trim()),f=i(e=>e.join("\n"),e=>e.map(l),e=>e.split("\n"),e=>e.trim()),m={area:{props:["grid-area"]},areas:{props:["grid-template-areas"],transformValue:f},template:{props:["grid-template"],transformValue:f},templateCols:{props:["grid-template-columns"]},templateRows:{props:["grid-template-rows"]},col:{props:["grid-column"]},colStart:{props:["grid-column-start"]},colEnd:{props:["grid-column-end"]},row:{props:["grid-row"]},rowStart:{props:["grid-row-start"]},rowEnd:{props:["grid-row-end"]},gap:{props:["grid-gap"],transformValue:s},gapCol:{props:["grid-column-gap"],transformValue:s},gapRow:{props:["grid-row-gap"],transformValue:s},gutter:{props:["grid-gap"],transformValue:s},gutterCol:{props:["grid-column-gap"],transformValue:s},gutterRow:{props:["grid-row-gap"],transformValue:s},autoRows:{props:["grid-auto-rows"],transformValue:s},autoCols:{props:["grid-auto-columns"],transformValue:s},autoFlow:{props:["grid-auto-flow"]},align:{props:["align-self"]},alignItems:{props:["align-items"]},alignContent:{props:["align-content"]},justify:{props:["justify-self"]},justifyItems:{props:["justify-items"]},justifyContent:{props:["justify-content"]},place:{props:["place-self"]},placeItems:{props:["place-items"]},placeContent:{props:["place-content"]},flexDirection:{props:["flex-direction"]},flexShrink:{props:["flex-shrink"]},flexGrow:{props:["flex-grow"]},flexWrap:{props:["flex-wrap"]},height:{props:["height"],transformValue:s},minHeight:{props:["min-height"],transformValue:s},maxHeight:{props:["max-height"],transformValue:s},width:{props:["width"],transformValue:s},minWidth:{props:["min-width"],transformValue:s},maxWidth:{props:["max-width"],transformValue:s},margin:{props:["margin"],transformValue:s},marginTop:{props:["margin-top"],transformValue:s},marginRight:{props:["margin-right"],transformValue:s},marginBottom:{props:["margin-bottom"],transformValue:s},marginLeft:{props:["margin-left"],transformValue:s},marginVertical:{props:["margin-top","margin-bottom"],transformValue:s},marginHorizontal:{props:["margin-right","margin-left"],transformValue:s},padding:{props:["padding"],transformValue:s},paddingTop:{props:["padding-top"],transformValue:s},paddingRight:{props:["padding-right"],transformValue:s},paddingBottom:{props:["padding-bottom"],transformValue:s},paddingLeft:{props:["padding-left"],transformValue:s},paddingVertical:{props:["padding-top","padding-bottom"],transformValue:s},paddingHorizontal:{props:["padding-right","padding-left"],transformValue:s}};function d(e){return e.slice(0,1).toLowerCase()+e.slice(1,e.length)}function g(e){const t=Object.keys(a.breakpoints).join("|"),r=["down","only"].join("|"),n=new RegExp(`(${t})$`,"gi"),o=new RegExp(`(${r})$`,"gi"),i=e.match(o),u=i?i[0]:"",s=e.replace(u,"").match(n),p=s?s[0]:"",c=e.replace(p,"").replace(u,""),l=p?d(p):a.defaultBreakpointName,f=l===a.defaultBreakpointName;return{originPropName:e,purePropName:c,behavior:u?d(u):a.defaultBehavior,breakpoint:{name:l,isDefault:f}}}function h(e){return e.replace(/[A-Z]/g,e=>`-${e}`.toLowerCase())}function b(e){return Object.entries(e).filter(([e,t])=>u(t)).map(([e,t])=>[h(e),t])}const y=e=>t=>t.filter(([t])=>((e,t)=>{const[r,n]=e.split("-");return!["height","width"].includes(n)||("min"===r&&["up","only"].includes(t)||"max"===r&&["down","only"].includes(t))})(t,e)),v=e=>t=>t.map(e).join(" and ");function k(e,t){return i(v(([e,t])=>`(${e}:${String(s(t))})`),y(t),b)(e)}const j=(e,t,r,n)=>{const o=e.map(e=>`${e}:${String(t)};`).join(""),i=a.breakpoints[r.name];return i&&!(r.isDefault&&n===a.defaultBehavior)?`@media ${k(i,n)} {${o}}`:o};const w=(e=>{const t=Object.keys(e);return(r,n)=>{const o=Object.keys(r).filter(e=>{const r=t.includes(e);return r||console.warn('useBreakpoints: Breakpoint "%s" is not found. Add it via "Layout.configure()", or use one of the existing breakpoints (%s).',e,t.join(", ")),r}).find(t=>{const r=e[t],n=k(r,"only");return r&&matchMedia(n).matches});return o?r[o]:n}})(a.breakpoints);function O(e){const t=e.match(/^(min|max)/);return t?t[0]:""}function x(e){return Object.keys(e).reduce((t,r)=>({...t,[r]:"max"===O(r)?void 0:e[r]}),{})}function V(e,t,r){const{behavior:n}=t,{behavior:o}=e,a="up"===n,i=n===o,u=a&&"down"===o,p=a,c=!r&&p?"down":o,l={...t.breakpoint,...e.breakpoint};return{behavior:c,breakpoint:Object.keys(l).reduce((n,o)=>{let a=l[o];const c=O(o);if("max"===c&&!r&&p){a=`calc(${s(e.breakpoint[o.replace(/^max/,"min")])} - 1px)`}return"min"===c&&(r?(i||u)&&(a=t.breakpoint[o]):p&&(a=t.breakpoint[o])),{...n,[o]:a}},{})}}const P=i(e=>e.sort(),e=>Array.from(new Set(e)),e=>e.filter(c),e=>e.filter(Boolean),e=>e.split(" "),e=>e.replace(/\s+/g," "),e=>e.replace(/\r?\n|\'+/g," "));const B=i(function(e){const t={};return r=>(function(...n){const o=e(...n);return o in t||(t[o]=r(...n)),t[o]})}(e=>{return function(e){const{length:t}=e;let r=0,n=0;if(t>0)for(;n<t;)r=(r<<5)-r+e.charCodeAt(n++)|0;return r}(Object.entries(e).reduce((e,[t,r])=>e.concat(`${t}:${r.join()}`),[]).join()).toString()})((function(e){const t=Object.entries(e).reduce((e,[t,r])=>{const{breakpoint:n,behavior:o}=g(t);return{areas:e.areas.concat(r),templates:e.templates.concat({breakpoint:a.breakpoints[n.name],behavior:o,areas:r})}},{areas:[],templates:[]}),{areas:r,templates:n}=t;return{areas:Array.from(new Set(r)),templates:n}})),e=>Object.keys(e).filter(e=>{const{purePropName:t}=g(e);return["areas","template"].includes(t)}).reduce((t,r)=>({...t,[r]:P(e[r])}),{}));function N(e){return e.slice(0,e.length-1)}const S=e=>e.replace(/^min|max/,"_");const E=(e,t)=>{const r=e.behavior===t.behavior,n="up"===e.behavior&&"down"===t.behavior;return!(!r&&!n)&&function(e,t){const r=Object.keys(e).concat(Object.keys(t));return r.every((e,t)=>{const n=S(e);return n===S(r[t-1]||n)})}(e.breakpoint,t.breakpoint)},C=(e,t)=>({behavior:t.behavior,breakpoint:e&&"up"===t.behavior?x(t.breakpoint):t.breakpoint});t.Layout=a,t.applyStyles=function(e){return Object.keys(e).map(g).filter(({purePropName:e})=>m.hasOwnProperty(e)).filter(({originPropName:t})=>u(e[t])).map(({purePropName:t,originPropName:r,breakpoint:n,behavior:o})=>{const{props:a,transformValue:i}=m[t],u=e[r],s=i?i(u):u;return j(a,s,n,o)}).join(" ")},t.closeBreakpoint=function(e){return Object.entries(e).map(([e,t])=>[O(e),e,t]).filter(([e])=>"max"!==e).reduce((e,[t,r,n])=>{const o="min"===t,a=o?r.replace(/^min/,"max"):r,[,i,u]=/(\d+)(.+)?/.exec(n),s=o?parseFloat(i)-1:i;return{...e,[a]:u?`${s}${u}`:s}},{})},t.compose=i,t.createMediaQuery=k,t.defaultOptions=r,t.generateComponents=function({areas:e,templates:t},r,n){const o=e.reduce((e,o)=>{const a=function(e,t){const r=t.length;return t.reduce((t,n,o)=>{const{areas:a,behavior:i,breakpoint:u}=n,s=o===r-1,p=a.includes(e),c={breakpoint:u,behavior:i},l=t[t.length-1];if(p){if(l&&E(l,c)){const e=V(c,l,p);return N(t).concat(C(s,e))}return t.concat(C(s,c))}if(l){const e=V(c,l,p);return N(t).concat([e,null])}return t.concat(null)},[])}(o,t),i=a.filter(Boolean).map(e=>e.breakpoint),u=1===a.length&&i.every(e=>!e.minWidth&&!e.maxWidth),s=r(o),p=function(e){return e.replace(/^./,e=>e.toUpperCase())}(o);return s.displayName=p,{...e,[p]:u?s:n(s,i)}},{});return"undefined"==typeof Proxy?o:new Proxy(o,{get:(e,t)=>t in e||"symbol"==typeof t?e[t]:()=>null})},t.joinQueryList=v,t.mergeAreaRecords=V,t.normalizeQuery=b,t.openBreakpoint=x,t.parsePropName=g,t.parseTemplates=B,t.propAliases=m,t.throttle=function(e,t){let r,n=null;return function o(...a){const i=Date.now();clearTimeout(n),!r||i-r>=t?(e.apply(null,a),r=i):n=setTimeout(o.bind(null,...a),t-(i-r))}},t.transformNumeric=s,t.warn=o,t.withBreakpoints=w}));(a=i)&&a.__esModule&&Object.prototype.hasOwnProperty.call(a,"default")&&a.default;var u=i.Layout,s=i.applyStyles,p=i.closeBreakpoint,c=i.compose,l=i.createMediaQuery,f=(i.defaultOptions,i.generateComponents),m=i.joinQueryList,d=i.mergeAreaRecords,g=i.normalizeQuery,h=i.openBreakpoint,b=i.parsePropName,y=i.parseTemplates,v=(i.propAliases,i.throttle),k=i.transformNumeric,j=i.warn,w=i.withBreakpoints;function O(e){return(O="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function x(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function V(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function P(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?V(Object(r),!0).forEach((function(t){x(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):V(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function B(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}function N(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}))}function S(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if(!(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e)))return;var r=[],n=!0,o=!1,a=void 0;try{for(var i,u=e[Symbol.iterator]();!(n=(i=u.next()).done)&&(r.push(i.value),!t||r.length!==t);n=!0);}catch(e){o=!0,a=e}finally{try{n||null==u.return||u.return()}finally{if(o)throw a}}return r}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}function E(){var e=N(["\n  display: ",";\n\n  && {\n    ",";\n  }\n"]);return E=function(){return e},e}var C=n.div(E(),(function(e){var t=e.flex,r=e.inline;return t?r?"inline-flex":"flex":r?"inline-block":"block"}),s),L=function(e){return c(m((function(e){var t=S(e,2),r=t[0],n=t[1],o=/^\d/.test(String(n))?k(n):n;return"(".concat(r,":").concat(o,")")})),g)(e)},$=function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],n=r.useState(t),o=S(n,2),a=o[0],i=o[1],u=r.useMemo((function(){return[].concat(e).map(L).join(",")}),[e]),s=function(e){i(e.matches)};return r.useLayoutEffect((function(){var e=matchMedia(u);return s(e),e.addListener(s),function(){e.removeListener(s)}}),Object.keys(e)),a},R=function(e){var t=e.children,r=e.matches,n=B(e,["children","matches"]);return t($(n,r))};R.defaultProps={matches:!1};var A=function(e,t){var n=function(n){var o=n.children,a=B(n,["children"]),i=t.reduce((function(t,n,i){return t.concat(r.createElement(R,Object.assign({},n,{key:"".concat(e.displayName,"_").concat(i)}),(function(t){return t&&r.createElement(e,Object.assign({},a),o)})))}),[]);return r.createElement(r.Fragment,null,i)};return n.displayName="Placeholder(".concat(e.displayName,")"),n};function W(){var e=N(["\n  && {\n    ",";\n    display: ",";\n  }\n"]);return W=function(){return e},e}var M=n.div(W(),s,(function(e){return e.inline?"inline-grid":"grid"})),F=function(e){return function(t){return r.createElement(C,Object.assign({area:e},t))}},D=function(e){return"string"==typeof e?u.breakpoints[e]:e};function z(){var e=N(["\n      visibility: hidden;\n    "]);return z=function(){return e},e}function Q(){var e=N(["\n  ","\n"]);return Q=function(){return e},e}var _=n(C)(Q(),(function(e){return!e.matches&&t.css(z())})),T=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:70,n=r.useRef();r.useEffect((function(){n.current=v(e,t)})),r.useEffect((function(){var e=n.current;return e(),window.addEventListener("resize",e),function(){return window.removeEventListener("resize",e)}}),[])},I=function(e,t){var r,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:u.breakpoints;T((function(){var t=Object.keys(n).find((function(e){var t=l(n[e],"only");return matchMedia(t).matches}));r!==t&&(e(t),r=t)}),t)},U=function(e){var t=e.breakpoint,r=e.behavior,n=l(u.breakpoints[t.name],r);return matchMedia(n).matches},H=function(e){return e.breakpoint.isDefault&&"undefined"==typeof window},q=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:U;return Object.keys(e).map(b).filter(t).reduce((function(t,r){var n=r.originPropName;return P({},t,x({},r.purePropName,e[n]))}),{})},G=function(e){var t=S(r.useState(q(e,H)),2),n=t[0],o=t[1],a=S(r.useState(),2),i=a[0],u=a[1];return I(u),r.useEffect((function(){var t=q(e);o(t)}),[e,i]),n||{}};e.Box=C,e.Composition=function(e){var t=e.children,n=B(e,["children"]),o=y(n),a=f(o,F,A),i=Object.keys(a).length>0,u=O(t),s="function"===u;return j(!(i&&!s),"Failed to render 'Composition' with template areas [\"".concat(Object.keys(a).join('", "'),'"]: expected children to be a function, but got: ').concat(u,". Please provide render function as children, or remove assigned template props.")),r.createElement(M,Object.assign({},n),i&&s?t(a):t)},e.MediaQuery=R,e.Only=function(e){var t=e.children,n=e.except,o=e.for,a=e.from,i=e.to,u=function(e,t){return function(){for(var n=arguments.length,o=new Array(n),a=0;a<n;a++)o[a]=arguments[a];var i=A(C,o);return r.createElement(i,Object.assign({},t),e)}}(t,B(e,["children","except","for","from","to"]));if(o)return u(D(o));var s=D(a),c=D(i);return s&&c&&!n?u(d({behavior:"down",breakpoint:c},{behavior:"up",breakpoint:s},!1).breakpoint):s&&c&&n?u(p(s),h(c)):s&&!c?u(h(s)):!s&&c?u(p(c)):r.createElement(r.Fragment,null,"children")},e.Visible=function(e){var t=e.children,r=e.except,n=e.for,a=e.from,i=e.to,u=B(e,["children","except","for","from","to"]),s=D(n),c=D(a),l=D(i),f=s;c&&l&&!r&&(f=d({behavior:"down",breakpoint:l},{behavior:"up",breakpoint:c},!1).breakpoint);c&&l&&r&&(f=[p(c),h(l)]),c&&!l&&(f=h(c)),!c&&l&&(f=p(l));var m=$(f),g=m?{}:{"aria-hidden":"true"};return o.createElement(_,Object.assign({},u,g,{matches:m}),t)},e.default=u,e.useBreakpointChange=I,e.useMediaQuery=$,e.useResponsiveComponent=function(e){return o.forwardRef((function(t,r){var n=G(t);return o.createElement(e,Object.assign({ref:r},n))}))},e.useResponsiveProps=G,e.useResponsiveValue=function(e,t){var n=S(r.useState(t),2),o=n[0],a=n[1];return I((function(){var r=w(e,t);a(r)})),o},e.useViewportChange=T,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("styled-components"),require("react")):"function"==typeof define&&define.amd?define(["exports","styled-components","react"],t):t((e=e||self).AtomicLayout={},e.styled,e.React)}(this,(function(e,t,r){"use strict";var n="default"in t?t.default:t,o="default"in r?r.default:r;var a,i=function(e,t){return e(t={exports:{}},t.exports),t.exports}((function(e,t){Object.defineProperty(t,"__esModule",{value:!0});const r={defaultUnit:"px",defaultBehavior:"up",defaultBreakpointName:"xs",breakpoints:{xs:{maxWidth:"575px"},sm:{minWidth:"576px",maxWidth:"767px"},md:{minWidth:"768px",maxWidth:"991px"},lg:{minWidth:"992px",maxWidth:"1199px"},xl:{minWidth:"1200px"}}};function n(e,t){if(!e)throw new Error(t)}function o(e,t){e||console.warn(t)}var a=new class{constructor(e){return this.defaultUnit=r.defaultUnit,this.defaultBehavior=r.defaultBehavior,this.breakpoints=r.breakpoints,this.defaultBreakpointName=r.defaultBreakpointName,this.isConfigureCalled=!1,e?this.configure(e,!1):this}configure(e,t=!0){return t&&o(!this.isConfigureCalled,"Failed to configure Layout: do not call `Layout.configure()` more than once. Layout configuration must remain consistent throughout the application."),n(e&&"object"==typeof e,`Failed to configure Layout: expected an options Object, but got: ${e}.`),Object.keys(e||{}).forEach(t=>{this[t]=e[t]}),n(this.breakpoints,"Failed to configure Layout: expected to have at least one breakpoint specified, but got none."),n(this.breakpoints.hasOwnProperty(this.defaultBreakpointName),`Failed to configure Layout: cannot use "${this.defaultBreakpointName}" as the default breakpoint (breakpoint not found).`),n(this.defaultBreakpointName,`Failed to configure Layout: expected "defaultBreakpointName" property set, but got: ${this.defaultBreakpointName}.`),this.isConfigureCalled=t,this}};function i(...e){return e.reduce((e,t)=>(...r)=>e(t(...r)))}function u(e){return null!=e}function s(e){if(!u(e))return"";return`${e}${"number"==typeof e&&0!==e?a.defaultUnit:""}`}const p=[/\.+/,/^[0-9]/,"/","auto"];function c(e){return p.every(t=>t instanceof RegExp?!t.test(e):e!==t)}const l=i(e=>{const t=[],r=[];return e.forEach(e=>{c(e)||/\.+/.test(e)?t.push(e):r.push(e)}),[t.length>0?`'${t.join(" ")}'`:"",r.join(" ")].filter(Boolean).join(" ")},e=>e.split(" "),e=>e.replace(/'+/gm,""),e=>e.trim()),f=i(e=>e.join("\n"),e=>e.map(l),e=>e.split("\n"),e=>e.trim()),m={area:{props:["grid-area"]},areas:{props:["grid-template-areas"],transformValue:f},template:{props:["grid-template"],transformValue:f},templateCols:{props:["grid-template-columns"]},templateRows:{props:["grid-template-rows"]},col:{props:["grid-column"]},colStart:{props:["grid-column-start"]},colEnd:{props:["grid-column-end"]},row:{props:["grid-row"]},rowStart:{props:["grid-row-start"]},rowEnd:{props:["grid-row-end"]},gap:{props:["grid-gap"],transformValue:s},gapCol:{props:["grid-column-gap"],transformValue:s},gapRow:{props:["grid-row-gap"],transformValue:s},gutter:{props:["grid-gap"],transformValue:s},gutterCol:{props:["grid-column-gap"],transformValue:s},gutterRow:{props:["grid-row-gap"],transformValue:s},autoRows:{props:["grid-auto-rows"],transformValue:s},autoCols:{props:["grid-auto-columns"],transformValue:s},autoFlow:{props:["grid-auto-flow"]},align:{props:["align-self"]},alignItems:{props:["align-items"]},alignContent:{props:["align-content"]},justify:{props:["justify-self"]},justifyItems:{props:["justify-items"]},justifyContent:{props:["justify-content"]},place:{props:["place-self"]},placeItems:{props:["place-items"]},placeContent:{props:["place-content"]},flexDirection:{props:["flex-direction"]},flexShrink:{props:["flex-shrink"]},flexGrow:{props:["flex-grow"]},flexWrap:{props:["flex-wrap"]},height:{props:["height"],transformValue:s},minHeight:{props:["min-height"],transformValue:s},maxHeight:{props:["max-height"],transformValue:s},width:{props:["width"],transformValue:s},minWidth:{props:["min-width"],transformValue:s},maxWidth:{props:["max-width"],transformValue:s},margin:{props:["margin"],transformValue:s},marginTop:{props:["margin-top"],transformValue:s},marginRight:{props:["margin-right"],transformValue:s},marginBottom:{props:["margin-bottom"],transformValue:s},marginLeft:{props:["margin-left"],transformValue:s},marginVertical:{props:["margin-top","margin-bottom"],transformValue:s},marginHorizontal:{props:["margin-right","margin-left"],transformValue:s},padding:{props:["padding"],transformValue:s},paddingTop:{props:["padding-top"],transformValue:s},paddingRight:{props:["padding-right"],transformValue:s},paddingBottom:{props:["padding-bottom"],transformValue:s},paddingLeft:{props:["padding-left"],transformValue:s},paddingVertical:{props:["padding-top","padding-bottom"],transformValue:s},paddingHorizontal:{props:["padding-right","padding-left"],transformValue:s}};function d(e){return e.slice(0,1).toLowerCase()+e.slice(1,e.length)}function g(e){const t=Object.keys(a.breakpoints).join("|"),r=["down","only"].join("|"),n=new RegExp(`(${t})$`,"gi"),o=new RegExp(`(${r})$`,"gi"),i=e.match(o),u=i?i[0]:"",s=e.replace(u,"").match(n),p=s?s[0]:"",c=e.replace(p,"").replace(u,""),l=p?d(p):a.defaultBreakpointName,f=l===a.defaultBreakpointName;return{originPropName:e,purePropName:c,behavior:u?d(u):a.defaultBehavior,breakpoint:{name:l,isDefault:f}}}function h(e){return e.replace(/[A-Z]/g,e=>`-${e}`.toLowerCase())}function b(e){return Object.entries(e).filter(([e,t])=>u(t)).map(([e,t])=>[h(e),t])}const y=e=>t=>t.filter(([t])=>((e,t)=>{const[r,n]=e.split("-");return!["height","width"].includes(n)||("min"===r&&["up","only"].includes(t)||"max"===r&&["down","only"].includes(t))})(t,e)),v=e=>t=>t.map(e).join(" and ");function k(e,t){return i(v(([e,t])=>`(${e}:${String(s(t))})`),y(t),b)(e)}const j=(e,t,r,n)=>{const o=e.map(e=>`${e}:${String(t)};`).join(""),i=a.breakpoints[r.name];return i&&!(r.isDefault&&n===a.defaultBehavior)?`@media ${k(i,n)} {${o}}`:o};const w=(e=>{const t=Object.keys(e);return(r,n)=>{const o=Object.keys(r).filter(e=>{const r=t.includes(e);return r||console.warn('useBreakpoints: Breakpoint "%s" is not found. Add it via "Layout.configure()", or use one of the existing breakpoints (%s).',e,t.join(", ")),r}).find(t=>{const r=e[t],n=k(r,"only");return r&&matchMedia(n).matches});return o?r[o]:n}})(a.breakpoints);function O(e){const t=e.match(/^(min|max)/);return t?t[0]:""}function x(e){return Object.keys(e).reduce((t,r)=>({...t,[r]:"max"===O(r)?void 0:e[r]}),{})}function V(e,t,r){const{behavior:n}=t,{behavior:o}=e,a="up"===n,i=n===o,u=a&&"down"===o,p=a,c=!r&&p?"down":o,l={...t.breakpoint,...e.breakpoint};return{behavior:c,breakpoint:Object.keys(l).reduce((n,o)=>{let a=l[o];const c=O(o);if("max"===c&&!r&&p){a=`calc(${s(e.breakpoint[o.replace(/^max/,"min")])} - 1px)`}return"min"===c&&(r?(i||u)&&(a=t.breakpoint[o]):p&&(a=t.breakpoint[o])),{...n,[o]:a}},{})}}const P=i(e=>e.sort(),e=>Array.from(new Set(e)),e=>e.filter(c),e=>e.filter(Boolean),e=>e.split(" "),e=>e.replace(/\s+/g," "),e=>e.replace(/\r?\n|\'+/g," "));const B=i(function(e){const t={};return r=>(function(...n){const o=e(...n);return o in t||(t[o]=r(...n)),t[o]})}(e=>{return function(e){const{length:t}=e;let r=0,n=0;if(t>0)for(;n<t;)r=(r<<5)-r+e.charCodeAt(n++)|0;return r}(Object.entries(e).reduce((e,[t,r])=>e.concat(`${t}:${r.join()}`),[]).join()).toString()})((function(e){const t=Object.entries(e).reduce((e,[t,r])=>{const{breakpoint:n,behavior:o}=g(t);return{areas:e.areas.concat(r),templates:e.templates.concat({breakpoint:a.breakpoints[n.name],behavior:o,areas:r})}},{areas:[],templates:[]}),{areas:r,templates:n}=t;return{areas:Array.from(new Set(r)),templates:n}})),e=>Object.keys(e).filter(e=>{const{purePropName:t}=g(e);return["areas","template"].includes(t)}).reduce((t,r)=>({...t,[r]:P(e[r])}),{}));function E(e){return e.slice(0,e.length-1)}const N=e=>e.replace(/^min|max/,"_");const S=(e,t)=>{const r=e.behavior===t.behavior,n="up"===e.behavior&&"down"===t.behavior;return!(!r&&!n)&&function(e,t){const r=Object.keys(e).concat(Object.keys(t));return r.every((e,t)=>{const n=N(e);return n===N(r[t-1]||n)})}(e.breakpoint,t.breakpoint)},C=(e,t)=>({behavior:t.behavior,breakpoint:e&&"up"===t.behavior?x(t.breakpoint):t.breakpoint});t.Layout=a,t.applyStyles=function(e){return Object.keys(e).map(g).filter(({purePropName:e})=>m.hasOwnProperty(e)).filter(({originPropName:t})=>u(e[t])).map(({purePropName:t,originPropName:r,breakpoint:n,behavior:o})=>{const{props:a,transformValue:i}=m[t],u=e[r],s=i?i(u):u;return j(a,s,n,o)}).join(" ")},t.closeBreakpoint=function(e){return Object.entries(e).map(([e,t])=>[O(e),e,t]).filter(([e])=>"max"!==e).reduce((e,[t,r,n])=>{const o="min"===t,a=o?r.replace(/^min/,"max"):r,[,i,u]=/(\d+)(.+)?/.exec(n),s=o?parseFloat(i)-1:i;return{...e,[a]:u?`${s}${u}`:s}},{})},t.compose=i,t.createMediaQuery=k,t.defaultOptions=r,t.generateComponents=function({areas:e,templates:t},r,n){const o=e.reduce((e,o)=>{const a=function(e,t){const r=t.length;return t.reduce((t,n,o)=>{const{areas:a,behavior:i,breakpoint:u}=n,s=o===r-1,p=a.includes(e),c={breakpoint:u,behavior:i},l=t[t.length-1];if(p){if(l&&S(l,c)){const e=V(c,l,p);return E(t).concat(C(s,e))}return t.concat(C(s,c))}if(l){const e=V(c,l,p);return E(t).concat([e,null])}return t.concat(null)},[])}(o,t),i=a.filter(Boolean).map(e=>e.breakpoint),u=1===a.length&&i.every(e=>!e.minWidth&&!e.maxWidth),s=r(o),p=function(e){return e.replace(/^./,e=>e.toUpperCase())}(o);return s.displayName=p,{...e,[p]:u?s:n(s,i)}},{});return"undefined"==typeof Proxy?o:new Proxy(o,{get:(e,t)=>t in e||"symbol"==typeof t?e[t]:()=>null})},t.joinQueryList=v,t.mergeAreaRecords=V,t.normalizeQuery=b,t.openBreakpoint=x,t.parsePropName=g,t.parseTemplates=B,t.propAliases=m,t.throttle=function(e,t){let r,n=null;return function o(...a){const i=Date.now();clearTimeout(n),!r||i-r>=t?(e.apply(null,a),r=i):n=setTimeout(o.bind(null,...a),t-(i-r))}},t.transformNumeric=s,t.warn=o,t.withBreakpoints=w}));(a=i)&&a.__esModule&&Object.prototype.hasOwnProperty.call(a,"default")&&a.default;var u=i.Layout,s=i.applyStyles,p=i.closeBreakpoint,c=i.compose,l=i.createMediaQuery,f=(i.defaultOptions,i.generateComponents),m=i.joinQueryList,d=i.mergeAreaRecords,g=i.normalizeQuery,h=i.openBreakpoint,b=i.parsePropName,y=i.parseTemplates,v=(i.propAliases,i.throttle),k=i.transformNumeric,j=i.warn,w=i.withBreakpoints;function O(e){return(O="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function x(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function V(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function P(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?V(Object(r),!0).forEach((function(t){x(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):V(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function B(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}function E(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}))}function N(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if(!(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e)))return;var r=[],n=!0,o=!1,a=void 0;try{for(var i,u=e[Symbol.iterator]();!(n=(i=u.next()).done)&&(r.push(i.value),!t||r.length!==t);n=!0);}catch(e){o=!0,a=e}finally{try{n||null==u.return||u.return()}finally{if(o)throw a}}return r}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}function S(){var e=E(["\n  display: ",";\n\n  && {\n    ",";\n  }\n"]);return S=function(){return e},e}var C=n.div(S(),(function(e){var t=e.flex,r=e.inline;return t?r?"inline-flex":"flex":r?"inline-block":"block"}),s),L=function(e){return c(m((function(e){var t=N(e,2),r=t[0],n=t[1],o=/^\d/.test(String(n))?k(n):n;return"(".concat(r,":").concat(o,")")})),g)(e)},$=function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],n=r.useState(t),o=N(n,2),a=o[0],i=o[1],u=r.useMemo((function(){return[].concat(e).map(L).join(",")}),[e]),s=function(e){i(e.matches)};return r.useLayoutEffect((function(){var e=matchMedia(u);return s(e),e.addListener(s),function(){e.removeListener(s)}}),Object.keys(e)),a},R=function(e){var t=e.children,r=e.matches,n=B(e,["children","matches"]);return t($(n,r))};R.defaultProps={matches:!1};var A=function(e,t){var n=function(n){var o=n.children,a=B(n,["children"]),i=t.reduce((function(t,n,i){return t.concat(r.createElement(R,Object.assign({},n,{key:"".concat(e.displayName,"_").concat(i)}),(function(t){return t&&r.createElement(e,Object.assign({},a),o)})))}),[]);return r.createElement(r.Fragment,null,i)};return n.displayName="Placeholder(".concat(e.displayName,")"),n};function W(){var e=E(["\n  && {\n    ",";\n    display: ",";\n  }\n"]);return W=function(){return e},e}var M=n.div(W(),s,(function(e){return e.inline?"inline-grid":"grid"})),F=function(e){return function(t){return r.createElement(C,Object.assign({area:e},t))}},D=function(e){return"string"==typeof e?u.breakpoints[e]:e};function z(){var e=E(["\n      visibility: hidden;\n    "]);return z=function(){return e},e}function Q(){var e=E(["\n  ","\n"]);return Q=function(){return e},e}var _=n(C)(Q(),(function(e){return!e.matches&&t.css(z())})),T=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:70,n=r.useRef();r.useEffect((function(){n.current=v(e,t)})),r.useEffect((function(){var e=n.current;return e(),window.addEventListener("resize",e),function(){return window.removeEventListener("resize",e)}}),[])},I=function(e,t){var r,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:u.breakpoints;T((function(){var t=Object.keys(n).find((function(e){var t=l(n[e],"only");return matchMedia(t).matches}));r!==t&&(e(t),r=t)}),t)},U=function(e){var t=e.breakpoint,r=e.behavior,n=l(u.breakpoints[t.name],r);return matchMedia(n).matches},H=function(e){return e.breakpoint.isDefault&&"undefined"==typeof window},q=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:U;return Object.keys(e).map(b).filter(t).reduce((function(t,r){var n=r.originPropName;return P({},t,x({},r.purePropName,e[n]))}),{})},G=function(e){var t=N(r.useState(q(e,H)),2),n=t[0],o=t[1],a=N(r.useState(),2),i=a[0],u=a[1];return I(u),r.useEffect((function(){var t=q(e);o(t)}),[e,i]),n||{}};e.Box=C,e.Composition=function(e){var t=e.children,n=B(e,["children"]),o=y(n),a=f(o,F,A),i=Object.keys(a).length>0,u=O(t),s="function"===u;return j(!(i&&!s),"Failed to render 'Composition' with template areas [\"".concat(Object.keys(a).join('", "'),'"]: expected children to be a function, but got: ').concat(u,". Please provide render function as children, or remove assigned template props.")),r.createElement(M,Object.assign({},n),i&&s?t(a):t)},e.MediaQuery=R,e.Only=function(e){var t=e.children,n=e.except,o=e.for,a=e.from,i=e.to,u=function(e,t){return function(){for(var n=arguments.length,o=new Array(n),a=0;a<n;a++)o[a]=arguments[a];var i=A(C,o);return r.createElement(i,Object.assign({},t),e)}}(t,B(e,["children","except","for","from","to"]));if(o)return u(D(o));var s=D(a),c=D(i);return s&&c&&!n?u(d({behavior:"down",breakpoint:c},{behavior:"up",breakpoint:s},!1).breakpoint):s&&c&&n?u(p(s),h(c)):s&&!c?u(h(s)):!s&&c?u(p(c)):r.createElement(r.Fragment,null,"children")},e.Visible=function(e){var t=e.children,r=e.except,n=e.for,a=e.from,i=e.to,u=B(e,["children","except","for","from","to"]),s=D(n),c=D(a),l=D(i),f=s;c&&l&&!r&&(f=d({behavior:"down",breakpoint:l},{behavior:"up",breakpoint:c},!1).breakpoint);c&&l&&r&&(f=[p(c),h(l)]),c&&!l&&(f=h(c)),!c&&l&&(f=p(l));var m=$(f),g=m?{}:{"aria-hidden":"true"};return o.createElement(_,Object.assign({},u,g,{matches:m}),t)},e.default=u,e.useBreakpointChange=I,e.useMediaQuery=$,e.useResponsiveComponent=function(e){return o.forwardRef((function(t,r){var n=G(t);return o.createElement(e,Object.assign({ref:r},n))}))},e.useResponsiveProps=G,e.useResponsiveValue=function(e,t){var n=N(r.useState(t),2),o=n[0],a=n[1];return I((function(){var r=w(e,t);a(r)})),o},e.useViewportChange=T,Object.defineProperty(e,"__esModule",{value:!0})}));

package.json

 {
   "name": "atomic-layout",
   "description": "Physical representation of layout composition to create declarative, responsive layouts in React.",
-  "version": "0.12.4",
+  "version": "0.12.5",
   "license": "MIT",
@@ -57,3 +57,3 @@ "esnext": "src/index.ts",
   "dependencies": {
-    "@atomic-layout/core": "^0.11.4"
+    "@atomic-layout/core": "^0.11.5"
   },
@@ -128,3 +128,3 @@ "devDependencies": {
   ],
-  "gitHead": "31317d8aef8cb14e2dd1d646dd4d18e856188a6b"
+  "gitHead": "d10ba4587cf70cfacba05d8d71055520ff904d39"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

51011

increased by0.06%

Dependency changes

• Updated@atomic-layout/core@^0.11.5