@telefonica/mistica 12.1.0 → 12.3.0

package/dist/navigation-breadcrumbs.js

@@ -7,6 +7,15 @@ var _jsxRuntime = require("react/jsx-runtime");
 var React = _interopRequireWildcard(require("react"));
 var _text = require("./text");
 var _hooks = require("./hooks");
+var _jss = require("./jss");
+var _dom = require("./utils/dom");
+var _textLink = _interopRequireDefault(require("./text-link"));
+var _themeVariantContext = require("./theme-variant-context");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 function _interopRequireWildcard(obj) {
     if (obj && obj.__esModule) {
         return obj;
@@ -28,41 +37,111 @@ function _interopRequireWildcard(obj) {
         return newObj;
     }
 }
+function _defineProperty(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _objectSpread(target) {
+    var _arguments = arguments, _loop = function(i) {
+        var source = _arguments[i] != null ? _arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _defineProperty(target, key, source[key]);
+        });
+    };
+    for(var i = 1; i < arguments.length; i++)_loop(i);
+    return target;
+}
 var BREADCRUMB_SEPARATOR = " / ";
+var useStyles = (0, _jss).createUseStyles(function() {
+    return {
+        link: {
+            "&:hover": {
+                textDecoration: "underline"
+            }
+        },
+        current: {
+            textDecoration: "none",
+            pointerEvents: "none"
+        },
+        list: {
+            padding: 0,
+            margin: 0,
+            listStyleType: "none",
+            "& > li": {
+                display: "inline"
+            }
+        }
+    };
+});
 var NavigationBreadcrumbs = function NavigationBreadcrumbs(param1) {
-    var title1 = param1.title, breadcrumbs = param1.breadcrumbs;
-    var theme = (0, _hooks).useTheme();
-    var Link = theme.Link;
-    return /*#__PURE__*/ (0, _jsxRuntime).jsxs("div", {
-        children: [
-            breadcrumbs.map(function(param, index) {
-                var title = param.title, url = param.url;
-                return /*#__PURE__*/ (0, _jsxRuntime).jsxs(React.Fragment, {
-                    children: [
-                        /*#__PURE__*/ (0, _jsxRuntime).jsx(Link, {
-                            style: {
-                                textDecoration: "none"
-                            },
-                            to: url,
-                            children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text1, {
+    var title1 = param1.title, breadcrumbs = param1.breadcrumbs, dataAttributes = param1.dataAttributes, tmp = param1["aria-label"], ariaLabel = tmp === void 0 ? "Breadcrumb" : tmp;
+    var colors = (0, _hooks).useTheme().colors;
+    var classes = useStyles();
+    var isInverse = (0, _themeVariantContext).useIsInverseVariant();
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx("nav", _objectSpread({
+        "aria-label": ariaLabel
+    }, (0, _dom).getPrefixedDataAttributes(dataAttributes), {
+        children: /*#__PURE__*/ (0, _jsxRuntime).jsxs("ol", {
+            className: classes.list,
+            children: [
+                breadcrumbs.map(function(param, index) {
+                    var title = param.title, url = param.url;
+                    return /*#__PURE__*/ (0, _jsxRuntime).jsxs("li", {
+                        children: [
+                            /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text1, {
                                 regular: true,
-                                children: title
+                                children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_textLink.default, {
+                                    to: url,
+                                    style: {
+                                        color: isInverse ? colors.textPrimaryInverse : colors.textPrimary
+                                    },
+                                    className: classes.link,
+                                    children: title
+                                })
+                            }),
+                            /*#__PURE__*/ (0, _jsxRuntime).jsx("span", {
+                                role: "presentation",
+                                children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text1, {
+                                    regular: true,
+                                    children: BREADCRUMB_SEPARATOR
+                                })
                             })
-                        }),
-                        /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text1, {
+                        ]
+                    }, index);
+                }),
+                /*#__PURE__*/ (0, _jsxRuntime).jsx("li", {
+                    children: /*#__PURE__*/ (0, _jsxRuntime).jsx("a", {
+                        "aria-current": "page",
+                        href: "#",
+                        className: classes.current,
+                        onClick: function onClick(e) {
+                            e.preventDefault();
+                        },
+                        children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text1, {
                             regular: true,
-                            children: BREADCRUMB_SEPARATOR
+                            color: isInverse ? colors.textSecondaryInverse : colors.textSecondary,
+                            children: title1
                         })
-                    ]
-                }, index);
-            }),
-            /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text1, {
-                regular: true,
-                color: theme.colors.textSecondary,
-                children: title1
-            })
-        ]
-    });
+                    })
+                })
+            ]
+        })
+    }));
 };
 var _default = NavigationBreadcrumbs;
 exports.default = _default;

package/dist/navigation-breadcrumbs.js.flow

@@ -1,12 +1,15 @@
 // @flow
 
 import * as React from "react";
+import type { DataAttributes } from "./utils/types";
 export type NavigationBreadcrumbsProps = {
   title: string,
   breadcrumbs: $ReadOnlyArray<{
     +title: string,
     +url: string,
   }>,
+  dataAttributes?: DataAttributes,
+  "aria-label"?: string,
 };
 declare var NavigationBreadcrumbs: React.ComponentType<NavigationBreadcrumbsProps>;
 declare export default typeof NavigationBreadcrumbs;

package/dist/overscroll-color-context.d.ts

@@ -2,6 +2,6 @@ import * as React from 'react';
 declare type ProviderProps = {
     children: React.ReactNode;
 };
-export declare const OverscrollColorProvider: React.FC<ProviderProps>;
+export declare const OverscrollColorProvider: ({ children }: ProviderProps) => JSX.Element;
 declare const OverscrollColor: () => null;
 export default OverscrollColor;

package/dist/overscroll-color-context.js

@@ -36,24 +36,25 @@ function _interopRequireWildcard(obj) {
     }
 }
 var ref = (0, _nestableContext).default(""), Provider = ref.Provider, Getter = ref.Getter, useSetValue = ref.useSetValue;
-var shouldRender = (0, _platform).getPlatform() === "ios";
-var OverscrollColorProviderNoOp = function OverscrollColorProviderNoOp(param) {
-    var children = param.children;
-    return /*#__PURE__*/ (0, _jsxRuntime).jsx(_jsxRuntime.Fragment, {
-        children: children || null
-    });
+var shouldRender = function shouldRender() {
+    return (0, _platform).getPlatform() === "ios";
 };
-var OverscrollColorProviderComponent = function OverscrollColorProviderComponent(param) {
+var OverscrollColorProvider = function OverscrollColorProvider(param) {
     var children = param.children;
     var platformOverrides = (0, _hooks).useTheme().platformOverrides;
     var isTabletOrSmaller = (0, _hooks).useScreenSize().isTabletOrSmaller;
     var theme = (0, _hooks).useTheme();
-    return isTabletOrSmaller ? /*#__PURE__*/ (0, _jsxRuntime).jsx(Provider, {
+    if (!shouldRender()) {
+        return /*#__PURE__*/ (0, _jsxRuntime).jsx(_jsxRuntime.Fragment, {
+            children: children
+        });
+    }
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx(Provider, {
         children: /*#__PURE__*/ (0, _jsxRuntime).jsx(Getter, {
             children: function children1(color) {
                 return /*#__PURE__*/ (0, _jsxRuntime).jsxs(_jsxRuntime.Fragment, {
                     children: [
-                        /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                        isTabletOrSmaller ? /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
                             style: {
                                 position: "absolute",
                                 zIndex: 1,
@@ -64,17 +65,14 @@ var OverscrollColorProviderComponent = function OverscrollColorProviderComponent
                                 marginTop: -500,
                                 transform: "translate3d(0,0,0)"
                             }
-                        }),
+                        }) : null,
                         children
                     ]
                 });
             }
         })
-    }) : /*#__PURE__*/ (0, _jsxRuntime).jsx(_jsxRuntime.Fragment, {
-        children: children
     });
 };
-var OverscrollColorProvider = shouldRender ? OverscrollColorProviderComponent : OverscrollColorProviderNoOp;
 exports.OverscrollColorProvider = OverscrollColorProvider;
 var OverscrollColorComponent = function OverscrollColorComponent() {
     var isInverseVariant = (0, _themeVariantContext).useIsInverseVariant();
@@ -85,6 +83,6 @@ var OverscrollColorComponent = function OverscrollColorComponent() {
 var OverscrollColorNoOp = function OverscrollColorNoOp() {
     return null;
 };
-var OverscrollColor = shouldRender ? OverscrollColorComponent : OverscrollColorNoOp;
+var OverscrollColor = shouldRender() ? OverscrollColorComponent : OverscrollColorNoOp;
 var _default = OverscrollColor;
 exports.default = _default;

package/dist/overscroll-color-context.js.flow

@@ -4,6 +4,6 @@ import * as React from "react";
 declare type ProviderProps = {
   children: React.Node,
 };
-declare export var OverscrollColorProvider: React.ComponentType<ProviderProps>;
+declare export var OverscrollColorProvider: (x: ProviderProps) => React.Node;
 declare var OverscrollColor: () => null;
 declare export default typeof OverscrollColor;

package/dist/package-version.js

@@ -3,5 +3,5 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 exports.PACKAGE_VERSION = void 0;
-var PACKAGE_VERSION = "12.1.0";
+var PACKAGE_VERSION = "12.3.0";
 exports.PACKAGE_VERSION = PACKAGE_VERSION;

package/dist/responsive-layout.js

@@ -9,6 +9,7 @@ var _jss = require("./jss");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _hooks = require("./hooks");
 var _dom = require("./utils/dom");
+var _containerTypeContext = _interopRequireDefault(require("./container-type-context"));
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -109,16 +110,20 @@ var ResponsiveLayout = function ResponsiveLayout(param) {
     var classes = useStyles();
     var ref = (0, _hooks).useScreenSize(), isMobile = ref.isMobile, isTablet = ref.isTablet;
     var sideMargin = isMobile ? MOBILE_SIDE_MARGIN : isTablet ? TABLET_SIDE_MARGIN : null;
+    var containerType = isMobile ? "mobile-column" : isTablet ? "tablet-column" : "desktop-wide-column";
     return /*#__PURE__*/ (0, _jsxRuntime).jsx(ResponsiveLayoutMarginContext.Provider, {
         value: sideMargin,
-        children: /*#__PURE__*/ (0, _jsxRuntime).jsx("div", _objectSpread({
-            className: (0, _classnames).default(classes.container, className)
-        }, (0, _dom).getPrefixedDataAttributes(dataAttributes), {
-            children: /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
-                className: (0, _classnames).default(classes.layout, _defineProperty({}, classes.layoutFullWidth, fullWidth)),
-                children: children
-            })
-        }))
+        children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_containerTypeContext.default.Provider, {
+            value: containerType,
+            children: /*#__PURE__*/ (0, _jsxRuntime).jsx("div", _objectSpread({
+                className: (0, _classnames).default(classes.container, className)
+            }, (0, _dom).getPrefixedDataAttributes(dataAttributes), {
+                children: /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                    className: (0, _classnames).default(classes.layout, _defineProperty({}, classes.layoutFullWidth, fullWidth)),
+                    children: children
+                })
+            }))
+        })
     });
 };
 var _default = ResponsiveLayout;

package/dist/screen-size-context-provider.js

@@ -99,13 +99,15 @@ var ScreenSizeContextProvider = function ScreenSizeContextProvider(param1) {
             mobile: stripMedia(theme.mq.mobile),
             tablet: stripMedia(theme.mq.tablet),
             tabletOrBigger: stripMedia(theme.mq.tabletOrBigger),
-            tabletOrSmaller: stripMedia(theme.mq.tabletOrSmaller)
+            tabletOrSmaller: stripMedia(theme.mq.tabletOrSmaller),
+            largueDesktop: stripMedia(theme.mq.largeDesktop)
         };
     }, [
         theme.mq.mobile,
         theme.mq.tablet,
         theme.mq.tabletOrBigger,
-        theme.mq.tabletOrSmaller
+        theme.mq.tabletOrSmaller,
+        theme.mq.largeDesktop, 
     ]);
     var ref1 = _slicedToArray(React.useState(function() {
         return !isServerSide && window.matchMedia(mediaQueries.mobile).matches;
@@ -119,6 +121,9 @@ var ScreenSizeContextProvider = function ScreenSizeContextProvider(param1) {
     var ref4 = _slicedToArray(React.useState(function() {
         return !isServerSide && window.matchMedia(mediaQueries.tabletOrSmaller).matches;
     }), 2), isTabletOrSmaller = ref4[0], setIsTabletOrSmaller = ref4[1];
+    var ref5 = _slicedToArray(React.useState(function() {
+        return !isServerSide && window.matchMedia(mediaQueries.largueDesktop).matches;
+    }), 2), isLargeDesktop = ref5[0], setIsLargeDesktop = ref5[1];
     (0, _hooks).useIsomorphicLayoutEffect(function() {
         if (!window.matchMedia) {
             return;
@@ -139,6 +144,10 @@ var ScreenSizeContextProvider = function ScreenSizeContextProvider(param1) {
             [
                 mediaQueries.tabletOrSmaller,
                 setIsTabletOrSmaller
+            ],
+            [
+                mediaQueries.largueDesktop,
+                setIsLargeDesktop
             ], 
         ];
         var cleanupFunctions = entries.map(function(param) {
@@ -162,7 +171,8 @@ var ScreenSizeContextProvider = function ScreenSizeContextProvider(param1) {
         mediaQueries.mobile,
         mediaQueries.tablet,
         mediaQueries.tabletOrBigger,
-        mediaQueries.tabletOrSmaller
+        mediaQueries.tabletOrSmaller,
+        mediaQueries.largueDesktop, 
     ]);
     var value = React.useMemo(function() {
         return {
@@ -170,13 +180,15 @@ var ScreenSizeContextProvider = function ScreenSizeContextProvider(param1) {
             isTablet: isTablet,
             isTabletOrBigger: isTabletOrBigger,
             isTabletOrSmaller: isTabletOrSmaller,
-            isDesktopOrBigger: !isTabletOrSmaller
+            isDesktopOrBigger: !isTabletOrSmaller,
+            isLargeDesktop: isLargeDesktop
         };
     }, [
         isMobile,
         isTablet,
         isTabletOrBigger,
-        isTabletOrSmaller
+        isTabletOrSmaller,
+        isLargeDesktop
     ]);
     return /*#__PURE__*/ (0, _jsxRuntime).jsx(_screenSizeContext.default.Provider, {
         value: value,

package/dist/screen-size-context.d.ts

@@ -5,6 +5,7 @@ export declare type ScreenSizeContextType = {
     isTabletOrBigger: boolean;
     isTabletOrSmaller: boolean;
     isDesktopOrBigger: boolean;
+    isLargeDesktop: boolean;
 };
 declare const ScreenSizeContext: React.Context<ScreenSizeContextType>;
 export default ScreenSizeContext;

package/dist/screen-size-context.js

@@ -30,7 +30,8 @@ var ScreenSizeContext = /*#__PURE__*/ React.createContext({
     isTablet: false,
     isTabletOrBigger: false,
     isTabletOrSmaller: false,
-    isDesktopOrBigger: false
+    isDesktopOrBigger: false,
+    isLargeDesktop: false
 });
 var _default = ScreenSizeContext;
 exports.default = _default;

package/dist/screen-size-context.js.flow

@@ -7,6 +7,7 @@ export type ScreenSizeContextType = {
   isTabletOrBigger: boolean,
   isTabletOrSmaller: boolean,
   isDesktopOrBigger: boolean,
+  isLargeDesktop: boolean,
 };
 declare var ScreenSizeContext: React.Context<ScreenSizeContextType>;
 declare export default typeof ScreenSizeContext;

package/dist/skeleton-base.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+declare type SkeletonBaseProps = {
+    width?: string | number;
+    height?: string | number;
+    radius?: string | number;
+    className?: string;
+};
+declare const SkeletonBase: ({ width, height, radius, className, }: SkeletonBaseProps) => JSX.Element;
+export default SkeletonBase;

package/dist/skeleton-base.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.default = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _themeVariantContext = require("./theme-variant-context");
+var React = _interopRequireWildcard(require("react"));
+var _jss = require("./jss");
+var _classnames = _interopRequireDefault(require("classnames"));
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _interopRequireWildcard(obj) {
+    if (obj && obj.__esModule) {
+        return obj;
+    } else {
+        var newObj = {};
+        if (obj != null) {
+            for(var key in obj){
+                if (Object.prototype.hasOwnProperty.call(obj, key)) {
+                    var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {};
+                    if (desc.get || desc.set) {
+                        Object.defineProperty(newObj, key, desc);
+                    } else {
+                        newObj[key] = obj[key];
+                    }
+                }
+            }
+        }
+        newObj.default = obj;
+        return newObj;
+    }
+}
+var useSkeletonBaseStyles = (0, _jss).createUseStyles(function(param1) {
+    var colors = param1.colors;
+    return {
+        skeletonBase: {
+            borderRadius: function borderRadius(param) {
+                var radius = param.radius;
+                return radius;
+            },
+            height: function height(param) {
+                var height1 = param.height;
+                return height1;
+            },
+            width: function width(param) {
+                var width1 = param.width;
+                return width1;
+            },
+            background: function background(param) {
+                var isInverse = param.isInverse;
+                return isInverse ? colors.backgroundSkeletonInverse : colors.backgroundSkeleton;
+            }
+        }
+    };
+});
+var SkeletonBase = function SkeletonBase(param) {
+    var _width = param.width, width = _width === void 0 ? "100%" : _width, _height = param.height, height = _height === void 0 ? 8 : _height, _radius = param.radius, radius = _radius === void 0 ? 8 : _radius, className = param.className;
+    var isInverse = (0, _themeVariantContext).useIsInverseVariant();
+    var classes = useSkeletonBaseStyles({
+        isInverse: isInverse,
+        width: width,
+        height: height,
+        radius: radius
+    });
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+        className: (0, _classnames).default(classes.skeletonBase, className),
+        "aria-hidden": true
+    });
+};
+var _default = SkeletonBase;
+exports.default = _default;

package/dist/skeleton-base.js.flow

@@ -0,0 +1,11 @@
+// @flow
+import * as React from "react";
+
+declare type SkeletonBaseProps = {
+  width?: string | number,
+  height?: string | number,
+  radius?: string | number,
+  className?: string,
+};
+declare var SkeletonBase: (x: SkeletonBaseProps) => React.Node;
+declare export default typeof SkeletonBase;

package/dist/skeletons.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import type { DataAttributes } from './utils/types';
+declare type SkeletonLineProps = {
+    width?: string | number;
+    ariaLabel?: string;
+    dataAttributes?: DataAttributes;
+};
+export declare const SkeletonLine: ({ width, ariaLabel, dataAttributes }: SkeletonLineProps) => JSX.Element;
+declare type SkeletonTextProps = Omit<SkeletonLineProps, 'width'>;
+export declare const SkeletonText: ({ ariaLabel, dataAttributes }: SkeletonTextProps) => JSX.Element;
+declare type SkeletonCircleProps = Omit<SkeletonLineProps, 'width'> & {
+    size?: number | string;
+};
+export declare const SkeletonCircle: ({ ariaLabel, size, dataAttributes }: SkeletonCircleProps) => JSX.Element;
+declare type SkeletonRowProps = SkeletonLineProps;
+export declare const SkeletonRow: ({ width, ariaLabel, dataAttributes }: SkeletonRowProps) => JSX.Element;
+declare type SkeletonRectangleProps = SkeletonLineProps & {
+    height: number | string;
+};
+export declare const SkeletonRectangle: ({ width, height, ariaLabel, dataAttributes, }: SkeletonRectangleProps) => JSX.Element;
+export {};