@ovotech/element-native 4.5.0 → 5.0.0-canary-bcb1788-338

package/dist/esm/utils/utils.js

@@ -1,11 +1,21 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Children, } from 'react';
+import { forwardRef, Children, } from 'react';
 import { useBreakpoint } from '../hooks';
-function mergeRefs(...refs) {
-    return value => {
-        refs.forEach(ref => {
-            assignRef(ref, value);
-        });
+function mergeRefs(ref1, ref2) {
+    return function (element) {
+        assignRef(ref1, element);
+        assignRef(ref2, element);
     };
 }
 function assignRef(ref, element) {
@@ -13,6 +23,7 @@ function assignRef(ref, element) {
         ref(element);
     }
     else if (ref) {
+        // @ts-ignore
         ref.current = element;
     }
 }
@@ -20,47 +31,63 @@ function getText(children) {
     if (!Boolean(children) && typeof children !== 'number') {
         return '';
     }
-    if (typeof children === 'object' &&
-        children.props) {
-        return Children.map(children.props.children, child => getText(child)).join('');
+    if (typeof children === 'object' && children.props) {
+        return Children.map(children.props.children, function (child) {
+            return getText(child);
+        }).join('');
     }
     return String(children);
 }
 function styledComponentWithBreakpoints(Component) {
-    return (props) => {
-        const breakpoints = useBreakpoint();
+    return forwardRef(function (props, ref) {
+        var breakpoints = useBreakpoint();
         // @ts-ignore.
-        return _jsx(Component, { ...props, ...breakpoints, ref: props.ref });
-    };
+        return _jsx(Component, __assign({}, props, breakpoints, { ref: ref }));
+    });
 }
 function responsiveStyle(property, value, breakpoints, formatter) {
-    let values;
+    var values;
     if (Array.isArray(value)) {
         values = value;
     }
     else {
         values = [value];
     }
-    const ascMediaQueries = [
+    var ascMediaQueries = [
         breakpoints.smallAndUp,
         breakpoints.mediumAndUp,
         breakpoints.largeAndUp,
     ];
-    const [base, ...rest] = values;
-    return rest.reduce((acc, val, i) => ascMediaQueries[i]
-        ? `${property}: ${formatter ? formatter(val) : val};`
-        : acc, `${property}: ${formatter ? formatter(base) : base};`);
+    var base = values[0], rest = values.slice(1);
+    return rest.reduce(function (acc, val, i) {
+        return ascMediaQueries[i]
+            ? "".concat(property, ": ").concat(formatter ? formatter(val) : val, ";")
+            : acc;
+    }, "".concat(property, ": ").concat(formatter ? formatter(base) : base, ";"));
 }
 function getErrorMessage(id, errors) {
-    return (errors.find(({ id: errorId }) => id === errorId) || { message: null })
+    return (errors.find(function (_a) {
+        var errorId = _a.id;
+        return id === errorId;
+    }) || { message: null })
         .message;
 }
 // eslint-disable-next-line @typescript-eslint/ban-types
-function callAll(...fns) {
-    return (...args) => fns.forEach(fn => fn && fn(...args));
+function callAll() {
+    var fns = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        fns[_i] = arguments[_i];
+    }
+    return function () {
+        var args = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+        }
+        return fns.forEach(function (fn) { return fn && fn.apply(void 0, args); });
+    };
 }
 function filterChildrenByType(children, type) {
-    return Children.toArray(children).filter(child => child?.type === type);
+    return Children.toArray(children).filter(function (child) { return (child === null || child === void 0 ? void 0 : child.type) === type; });
 }
 function getValidChildren(children) {
     return Children.toArray(children).filter(Boolean);

package/dist/hooks/index.js

@@ -1,2 +1,18 @@
-export * from './use-full-width';
-export * from './use-breakpoint';
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./use-full-width"), exports);
+__exportStar(require("./use-breakpoint"), exports);

package/dist/hooks/use-breakpoint.js

@@ -1,12 +1,16 @@
-import { useContext } from 'react';
-import { useWindowDimensions } from 'react-native';
-import { ThemeContext } from '../styled.native';
-export const useBreakpoint = () => {
-    const { core: { breakpoint }, } = useContext(ThemeContext);
-    const { width } = useWindowDimensions();
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useBreakpoint = void 0;
+var react_1 = require("react");
+var react_native_1 = require("react-native");
+var styled_native_1 = require("../styled.native");
+var useBreakpoint = function () {
+    var breakpoint = (0, react_1.useContext)(styled_native_1.ThemeContext).breakpoint;
+    var width = (0, react_native_1.useWindowDimensions)().width;
     return {
         smallAndUp: width > Number(breakpoint.small),
         mediumAndUp: width > Number(breakpoint.medium),
         largeAndUp: width > Number(breakpoint.large),
     };
 };
+exports.useBreakpoint = useBreakpoint;

package/dist/hooks/use-full-width.js

@@ -1,10 +1,14 @@
-import { useState, useEffect } from 'react';
-import { useBreakpoint } from './use-breakpoint';
-export const useFullWidth = (fullWidth = 'small') => {
-    const [isFullWidth, setIsfullWidth] = useState(true);
-    const { smallAndUp } = useBreakpoint();
-    useEffect(() => {
-        const values = {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFullWidth = void 0;
+var react_1 = require("react");
+var use_breakpoint_1 = require("./use-breakpoint");
+var useFullWidth = function (fullWidth) {
+    if (fullWidth === void 0) { fullWidth = 'small'; }
+    var _a = (0, react_1.useState)(true), isFullWidth = _a[0], setIsfullWidth = _a[1];
+    var smallAndUp = (0, use_breakpoint_1.useBreakpoint)().smallAndUp;
+    (0, react_1.useEffect)(function () {
+        var values = {
             small: !smallAndUp,
             always: true,
             never: false,
@@ -13,3 +17,4 @@ export const useFullWidth = (fullWidth = 'small') => {
     }, [isFullWidth, smallAndUp, setIsfullWidth]);
     return isFullWidth;
 };
+exports.useFullWidth = useFullWidth;

package/dist/hooks/use-layout.js

@@ -1,16 +1,20 @@
-import { useCallback, useState } from 'react';
-export const useLayout = (defaultHeight) => {
-    const [layout, setLayout] = useState({ height: defaultHeight || 0, width: 0, measured: false });
-    const onLayout = useCallback((e) => {
-        const { height, width } = e.nativeEvent.layout;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLayout = void 0;
+var react_1 = require("react");
+var useLayout = function (defaultHeight) {
+    var _a = (0, react_1.useState)({ height: defaultHeight || 0, width: 0, measured: false }), layout = _a[0], setLayout = _a[1];
+    var onLayout = (0, react_1.useCallback)(function (e) {
+        var _a = e.nativeEvent.layout, height = _a.height, width = _a.width;
         if (height === layout.height && width === layout.width) {
             return;
         }
         setLayout({
-            height,
-            width,
+            height: height,
+            width: width,
             measured: true,
         });
     }, [layout.height, layout.width]);
     return [layout, onLayout];
 };
+exports.useLayout = useLayout;

package/dist/index.js

@@ -1,3 +1,19 @@
-export * from './components';
-export * from './utils';
-export * from './theme';
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./components"), exports);
+__exportStar(require("./utils"), exports);
+__exportStar(require("./theme"), exports);

package/dist/providers/IconsProvider.d.ts

@@ -1,5 +1,5 @@
 import { PropsWithChildren } from 'react';
-import { IconsType } from './types';
+import { IconsType } from './icons-types';
 declare const defaultIcons: IconsType;
 declare function useIcons<T extends IconsType = string & object>(): IconsType & T;
 declare function IconsProvider({ children, icons, }: PropsWithChildren<{

package/dist/providers/IconsProvider.js

@@ -1,112 +1,126 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext } from 'react';
-import { Address, Advice, Archive, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Award, Battery, CalBook, Cal, CaretArrowDown, CaretArrowLeft, CaretArrowRight, CaretArrowUp, CaretDown, CaretLeft, CaretRight, CaretUp, ChartFilled, Chart, CheckCircle, Check, ChevronDown, ChevronLeftSmallFirst, ChevronLeftSmall, ChevronLeft, ChevronRightSmallLast, ChevronRightSmall, ChevronRight, ChevronUp, Circle, CloseCircle, Cross, Doc, Dollar, Download, EcoHome, Eco, Edit, ElectricCar, ElectricHome, Electricity, EnergyAdvice, Equals, Euro, Gas, GlobeAddress, HelpFilled, Help, Hide, HomeFilled, Home, HydroPower, Info, Link, Logo, MailOpen, Mail, Menu, MessageFilled, Message, Minus, Mobile, NewWindow, PaymentCardFilled, PaymentCard, Phone, Plus, Pound, PricingFilled, Pricing, Search, Security, ShopFilled, Shop, Show, SmartHome, SmartMeter, Solar, StarFilled, Star, Sun, Torch, Trees, Tune, UserFilled, User, Wallet, WarmHome, Warning, WebAddress, WindPower, } from './icons';
-const defaultIcons = {
-    address: Address,
-    advice: Advice,
-    archive: Archive,
-    'arrow-down': ArrowDown,
-    'arrow-left': ArrowLeft,
-    'arrow-right': ArrowRight,
-    'arrow-up': ArrowUp,
-    award: Award,
-    battery: Battery,
-    'cal-book': CalBook,
-    cal: Cal,
-    'caret-arrow-down': CaretArrowDown,
-    'caret-arrow-left': CaretArrowLeft,
-    'caret-arrow-right': CaretArrowRight,
-    'caret-arrow-up': CaretArrowUp,
-    'caret-down': CaretDown,
-    'caret-left': CaretLeft,
-    'caret-right': CaretRight,
-    'caret-up': CaretUp,
-    'chart-filled': ChartFilled,
-    chart: Chart,
-    'check-circle': CheckCircle,
-    check: Check,
-    'chevron-down': ChevronDown,
-    'chevron-left-small-first': ChevronLeftSmallFirst,
-    'chevron-left-small': ChevronLeftSmall,
-    'chevron-left': ChevronLeft,
-    'chevron-right-small-last': ChevronRightSmallLast,
-    'chevron-right-small': ChevronRightSmall,
-    'chevron-right': ChevronRight,
-    'chevron-up': ChevronUp,
-    circle: Circle,
-    'close-circle': CloseCircle,
-    cross: Cross,
-    doc: Doc,
-    dollar: Dollar,
-    download: Download,
-    'eco-home': EcoHome,
-    eco: Eco,
-    edit: Edit,
-    'electric-car': ElectricCar,
-    'electric-home': ElectricHome,
-    electricity: Electricity,
-    'energy-advice': EnergyAdvice,
-    equals: Equals,
-    euro: Euro,
-    gas: Gas,
-    'globe-address': GlobeAddress,
-    'help-filled': HelpFilled,
-    help: Help,
-    hide: Hide,
-    'home-filled': HomeFilled,
-    home: Home,
-    'hydro-power': HydroPower,
-    info: Info,
-    link: Link,
-    logo: Logo,
-    'mail-open': MailOpen,
-    mail: Mail,
-    menu: Menu,
-    'message-filled': MessageFilled,
-    message: Message,
-    minus: Minus,
-    mobile: Mobile,
-    'new-window': NewWindow,
-    'payment-card-filled': PaymentCardFilled,
-    'payment-card': PaymentCard,
-    phone: Phone,
-    plus: Plus,
-    pound: Pound,
-    'pricing-filled': PricingFilled,
-    pricing: Pricing,
-    search: Search,
-    security: Security,
-    'shop-filled': ShopFilled,
-    shop: Shop,
-    show: Show,
-    'smart-home': SmartHome,
-    'smart-meter': SmartMeter,
-    solar: Solar,
-    'star-filled': StarFilled,
-    star: Star,
-    sun: Sun,
-    torch: Torch,
-    trees: Trees,
-    tune: Tune,
-    'user-filled': UserFilled,
-    user: User,
-    wallet: Wallet,
-    'warm-home': WarmHome,
-    warning: Warning,
-    'web-address': WebAddress,
-    'wind-power': WindPower,
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultIcons = exports.IconsProvider = exports.useIcons = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var icons_1 = require("./icons");
+var defaultIcons = {
+    address: icons_1.Address,
+    advice: icons_1.Advice,
+    archive: icons_1.Archive,
+    'arrow-down': icons_1.ArrowDown,
+    'arrow-left': icons_1.ArrowLeft,
+    'arrow-right': icons_1.ArrowRight,
+    'arrow-up': icons_1.ArrowUp,
+    award: icons_1.Award,
+    battery: icons_1.Battery,
+    'cal-book': icons_1.CalBook,
+    cal: icons_1.Cal,
+    'caret-arrow-down': icons_1.CaretArrowDown,
+    'caret-arrow-left': icons_1.CaretArrowLeft,
+    'caret-arrow-right': icons_1.CaretArrowRight,
+    'caret-arrow-up': icons_1.CaretArrowUp,
+    'caret-down': icons_1.CaretDown,
+    'caret-left': icons_1.CaretLeft,
+    'caret-right': icons_1.CaretRight,
+    'caret-up': icons_1.CaretUp,
+    'chart-filled': icons_1.ChartFilled,
+    chart: icons_1.Chart,
+    'check-circle': icons_1.CheckCircle,
+    check: icons_1.Check,
+    'chevron-down': icons_1.ChevronDown,
+    'chevron-left-small-first': icons_1.ChevronLeftSmallFirst,
+    'chevron-left-small': icons_1.ChevronLeftSmall,
+    'chevron-left': icons_1.ChevronLeft,
+    'chevron-right-small-last': icons_1.ChevronRightSmallLast,
+    'chevron-right-small': icons_1.ChevronRightSmall,
+    'chevron-right': icons_1.ChevronRight,
+    'chevron-up': icons_1.ChevronUp,
+    circle: icons_1.Circle,
+    'close-circle': icons_1.CloseCircle,
+    cross: icons_1.Cross,
+    doc: icons_1.Doc,
+    dollar: icons_1.Dollar,
+    download: icons_1.Download,
+    'eco-home': icons_1.EcoHome,
+    eco: icons_1.Eco,
+    edit: icons_1.Edit,
+    'electric-car': icons_1.ElectricCar,
+    'electric-home': icons_1.ElectricHome,
+    electricity: icons_1.Electricity,
+    'energy-advice': icons_1.EnergyAdvice,
+    equals: icons_1.Equals,
+    euro: icons_1.Euro,
+    gas: icons_1.Gas,
+    'globe-address': icons_1.GlobeAddress,
+    'help-filled': icons_1.HelpFilled,
+    help: icons_1.Help,
+    hide: icons_1.Hide,
+    'home-filled': icons_1.HomeFilled,
+    home: icons_1.Home,
+    'hydro-power': icons_1.HydroPower,
+    info: icons_1.Info,
+    link: icons_1.Link,
+    logo: icons_1.Logo,
+    'mail-open': icons_1.MailOpen,
+    mail: icons_1.Mail,
+    menu: icons_1.Menu,
+    'message-filled': icons_1.MessageFilled,
+    message: icons_1.Message,
+    minus: icons_1.Minus,
+    mobile: icons_1.Mobile,
+    'new-window': icons_1.NewWindow,
+    'payment-card-filled': icons_1.PaymentCardFilled,
+    'payment-card': icons_1.PaymentCard,
+    phone: icons_1.Phone,
+    plus: icons_1.Plus,
+    pound: icons_1.Pound,
+    'pricing-filled': icons_1.PricingFilled,
+    pricing: icons_1.Pricing,
+    search: icons_1.Search,
+    security: icons_1.Security,
+    'shop-filled': icons_1.ShopFilled,
+    shop: icons_1.Shop,
+    show: icons_1.Show,
+    'smart-home': icons_1.SmartHome,
+    'smart-meter': icons_1.SmartMeter,
+    solar: icons_1.Solar,
+    'star-filled': icons_1.StarFilled,
+    star: icons_1.Star,
+    sun: icons_1.Sun,
+    torch: icons_1.Torch,
+    trees: icons_1.Trees,
+    tune: icons_1.Tune,
+    'user-filled': icons_1.UserFilled,
+    user: icons_1.User,
+    wallet: icons_1.Wallet,
+    'warm-home': icons_1.WarmHome,
+    warning: icons_1.Warning,
+    'web-address': icons_1.WebAddress,
+    'wind-power': icons_1.WindPower,
 };
-const IconsContext = createContext(null);
+exports.defaultIcons = defaultIcons;
+var IconsContext = (0, react_1.createContext)(null);
 function useIcons() {
-    const icons = useContext(IconsContext) || defaultIcons;
+    var icons = (0, react_1.useContext)(IconsContext) || defaultIcons;
     return icons;
 }
-function IconsProvider({ children, icons = {}, }) {
-    const baseIcons = useContext(IconsContext) || defaultIcons;
-    const mergedIcons = {
-        ...baseIcons,
-        ...icons,
-    };
-    return (_jsx(IconsContext.Provider, { value: mergedIcons, children: children }));
+exports.useIcons = useIcons;
+function IconsProvider(_a) {
+    var children = _a.children, _b = _a.icons, icons = _b === void 0 ? {} : _b;
+    var baseIcons = (0, react_1.useContext)(IconsContext) || defaultIcons;
+    var mergedIcons = __assign(__assign({}, baseIcons), icons);
+    return ((0, jsx_runtime_1.jsx)(IconsContext.Provider, { value: mergedIcons, children: children }));
 }
-export { useIcons, IconsProvider, defaultIcons };
+exports.IconsProvider = IconsProvider;

package/dist/providers/PictogramsProvider.d.ts

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+import { PictogramsType } from './pictograms-types';
+declare const defaultPictograms: PictogramsType;
+declare function usePictograms<T extends PictogramsType = string & object>(): PictogramsType & T;
+declare function PictogramsProvider({ children, pictograms, }: PropsWithChildren<{
+    pictograms?: PictogramsType;
+}>): import("react/jsx-runtime").JSX.Element;
+export { usePictograms, PictogramsProvider, defaultPictograms };