@ovotech/element-native 5.5.0 → 5.6.0

package/dist/components/CurrencyInput/styled.js

@@ -0,0 +1,39 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledCurrencySymbol = exports.StyledCurrencySymbolWrapper = exports.StyledCurrencyInput = exports.CurrencyInputWrapper = void 0;
+const react_native_1 = require("react-native");
+const styled_native_1 = __importDefault(require("../../styled.native"));
+const theme_1 = require("../../theme");
+const NumberInput_1 = require("../NumberInput");
+const P_1 = require("../P");
+exports.CurrencyInputWrapper = (0, styled_native_1.default)(react_native_1.View) `
+  position: relative;
+`;
+exports.StyledCurrencyInput = (0, styled_native_1.default)(NumberInput_1.NumberInput)(({ theme, smallAndUp }) => `
+  padding-left: ${(0, theme_1.numToPx)(theme.space[800])};
+  padding-bottom: ${(0, theme_1.numToPx)(theme.space[100])};
+  font-family: ${theme.native.font.family.black};
+  font-size: ${(0, theme_1.numToPx)(theme.font.size['4xl'].mediaQuery[smallAndUp ? 'lg' : 'sm'])};
+  line-height: ${(0, theme_1.numToPx)(theme.font.size['4xl'].mediaQuery[smallAndUp ? 'lg' : 'sm'])};
+  letter-spacing: ${(0, theme_1.numToPx)(theme.font.letterSpacing['4xl'].mediaQuery[smallAndUp ? 'lg' : 'sm'])};
+`);
+exports.StyledCurrencySymbolWrapper = (0, styled_native_1.default)(react_native_1.View)(({ theme }) => {
+    return `
+  position: absolute;
+  width: ${(0, theme_1.numToPx)(theme.space[700])};
+  height: ${(0, theme_1.numToPx)(theme.space[700])};
+  top: 50%;
+  margin-top: -${(0, theme_1.numToPx)(theme.space[350])};
+  left: ${(0, theme_1.numToPx)(theme.space[400])};
+`;
+});
+exports.StyledCurrencySymbol = (0, styled_native_1.default)(P_1.P)(({ theme, smallAndUp, }) => {
+    return `
+  font-family: ${theme.native.font.family.bold};
+  font-size: ${(0, theme_1.numToPx)(theme.font.size.xl.mediaQuery[smallAndUp ? 'lg' : 'sm'])};
+  line-height: ${(0, theme_1.numToPx)(theme.font.lineHeight.xl.mediaQuery[smallAndUp ? 'lg' : 'sm'])};
+`;
+});

package/dist/components/DataTable/styles.d.ts

@@ -38,6 +38,7 @@ export declare const StyledTableContainer: import("styled-components").StyledCom
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -80,6 +81,7 @@ export declare const StyledTableContainer: import("styled-components").StyledCom
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -88,6 +90,7 @@ export declare const StyledTableContainer: import("styled-components").StyledCom
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -613,6 +616,7 @@ export declare const TableHeader: import("styled-components").StyledComponent<ty
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -655,6 +659,7 @@ export declare const TableHeader: import("styled-components").StyledComponent<ty
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -663,6 +668,7 @@ export declare const TableHeader: import("styled-components").StyledComponent<ty
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -1190,6 +1196,7 @@ export declare const TableHeaderText: import("styled-components").StyledComponen
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -1232,6 +1239,7 @@ export declare const TableHeaderText: import("styled-components").StyledComponen
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -1240,6 +1248,7 @@ export declare const TableHeaderText: import("styled-components").StyledComponen
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -1765,6 +1774,7 @@ export declare const TableCaptionText: import("styled-components").StyledCompone
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -1807,6 +1817,7 @@ export declare const TableCaptionText: import("styled-components").StyledCompone
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -1815,6 +1826,7 @@ export declare const TableCaptionText: import("styled-components").StyledCompone
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -2340,6 +2352,7 @@ export declare const CellText: import("styled-components").StyledComponent<typeo
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -2382,6 +2395,7 @@ export declare const CellText: import("styled-components").StyledComponent<typeo
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -2390,6 +2404,7 @@ export declare const CellText: import("styled-components").StyledComponent<typeo
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -2915,6 +2930,7 @@ export declare const TableCaption: import("styled-components").StyledComponent<t
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -2957,6 +2973,7 @@ export declare const TableCaption: import("styled-components").StyledComponent<t
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -2965,6 +2982,7 @@ export declare const TableCaption: import("styled-components").StyledComponent<t
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -3490,6 +3508,7 @@ export declare const TableRow: import("styled-components").StyledComponent<typeo
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -3532,6 +3551,7 @@ export declare const TableRow: import("styled-components").StyledComponent<typeo
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -3540,6 +3560,7 @@ export declare const TableRow: import("styled-components").StyledComponent<typeo
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -4067,6 +4088,7 @@ export declare const TableRowHeading: import("styled-components").StyledComponen
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -4109,6 +4131,7 @@ export declare const TableRowHeading: import("styled-components").StyledComponen
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -4117,6 +4140,7 @@ export declare const TableRowHeading: import("styled-components").StyledComponen
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -4642,6 +4666,7 @@ export declare const TableBody: import("styled-components").StyledComponent<type
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -4684,6 +4709,7 @@ export declare const TableBody: import("styled-components").StyledComponent<type
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -4692,6 +4718,7 @@ export declare const TableBody: import("styled-components").StyledComponent<type
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -5217,6 +5244,7 @@ export declare const TableCell: import("styled-components").StyledComponent<type
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -5259,6 +5287,7 @@ export declare const TableCell: import("styled-components").StyledComponent<type
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -5267,6 +5296,7 @@ export declare const TableCell: import("styled-components").StyledComponent<type
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -5794,6 +5824,7 @@ export declare const RowHeading: import("styled-components").StyledComponent<typ
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -5836,6 +5867,7 @@ export declare const RowHeading: import("styled-components").StyledComponent<typ
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -5844,6 +5876,7 @@ export declare const RowHeading: import("styled-components").StyledComponent<typ
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -6371,6 +6404,7 @@ export declare const StyledSeparatorRow: import("styled-components").StyledCompo
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -6413,6 +6447,7 @@ export declare const StyledSeparatorRow: import("styled-components").StyledCompo
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -6421,6 +6456,7 @@ export declare const StyledSeparatorRow: import("styled-components").StyledCompo
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -6948,6 +6984,7 @@ export declare const SeparatorRowText: import("styled-components").StyledCompone
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -6990,6 +7027,7 @@ export declare const SeparatorRowText: import("styled-components").StyledCompone
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -6998,6 +7036,7 @@ export declare const SeparatorRowText: import("styled-components").StyledCompone
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {

package/dist/components/Disclosure/Disclosure.d.ts

@@ -39,6 +39,7 @@ declare const DisclosureButton: import("styled-components").StyledComponent<type
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -81,6 +82,7 @@ declare const DisclosureButton: import("styled-components").StyledComponent<type
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -89,6 +91,7 @@ declare const DisclosureButton: import("styled-components").StyledComponent<type
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {

package/dist/components/Divider/Divider.d.ts

@@ -1,5 +1,5 @@
 export type DividerProps = {
-    type?: 'default' | 'differentiated';
+    type?: 'default' | 'differentiated' | 'brand';
     width?: string;
 };
 export declare const Divider: ({ type, width }: DividerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Divider/Divider.js

@@ -41,7 +41,9 @@ const StyledDivider = styled_native_1.default.View(({ theme, type = 'default', w
       height: 1px;
       background: ${type === 'default'
         ? theme.color.surface.border
-        : theme.color.surface.borderDim};
+        : type === 'brand'
+            ? theme.color.green[70]
+            : theme.color.surface.borderDim};
       width: ${width};
     `;
 });

package/dist/components/Em/Em.d.ts

@@ -37,6 +37,7 @@ export declare const Em: import("styled-components").StyledComponent<typeof impo
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -79,6 +80,7 @@ export declare const Em: import("styled-components").StyledComponent<typeof impo
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -87,6 +89,7 @@ export declare const Em: import("styled-components").StyledComponent<typeof impo
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {

package/dist/components/EmailInput/EmailInput.d.ts

@@ -1,3 +1,6 @@
 import { InputProps } from '../Input/Input';
-declare const EmailInput: ({ ref, ...rest }: InputProps) => import("react/jsx-runtime").JSX.Element;
+type EmailInputProps = InputProps & {
+    onValidityChange?: (isValid: boolean) => void;
+};
+declare const EmailInput: ({ onChangeText, onSubmitEditing, value, invalid, onValidityChange, ...rest }: EmailInputProps) => import("react/jsx-runtime").JSX.Element;
 export { EmailInput };

package/dist/components/EmailInput/EmailInput.js

@@ -13,9 +13,25 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EmailInput = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const Input_1 = require("../Input/Input");
+const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 const EmailInput = (_a) => {
-    var { ref } = _a, rest = __rest(_a, ["ref"]);
-    return ((0, jsx_runtime_1.jsx)(Input_1.Input, Object.assign({ keyboardType: "email-address", autoCapitalize: "none", autoCorrect: false, ref: ref }, rest)));
+    var { onChangeText, onSubmitEditing, value, invalid, onValidityChange } = _a, rest = __rest(_a, ["onChangeText", "onSubmitEditing", "value", "invalid", "onValidityChange"]);
+    const textValue = typeof value === 'string' ? value : '';
+    const isValid = (0, react_1.useMemo)(() => textValue.length > 0 && EMAIL_REGEX.test(textValue), [textValue]);
+    const [hasUserInput, setHasUserInput] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        onValidityChange === null || onValidityChange === void 0 ? void 0 : onValidityChange(isValid);
+    }, [isValid, onValidityChange]);
+    return ((0, jsx_runtime_1.jsx)(Input_1.Input, Object.assign({ keyboardType: "email-address", autoCapitalize: "none", autoCorrect: false, value: value, invalid: invalid !== null && invalid !== void 0 ? invalid : (hasUserInput && !isValid), onChangeText: text => {
+            if (!hasUserInput)
+                setHasUserInput(true);
+            onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(text);
+        }, onSubmitEditing: e => {
+            if (!isValid)
+                return;
+            onSubmitEditing === null || onSubmitEditing === void 0 ? void 0 : onSubmitEditing(e);
+        } }, rest)));
 };
 exports.EmailInput = EmailInput;

package/dist/components/EmptyState/EmptyState.d.ts

@@ -0,0 +1,2 @@
+import { EmptyStateProps } from './types';
+export declare const EmptyState: ({ backgroundStyle, children, illustration, heading, pictogramName, }: EmptyStateProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/EmptyState/EmptyState.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EmptyState = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const providers_1 = require("../../providers");
+const styled_native_1 = require("../../styled.native");
+const Heading_1 = require("../Heading");
+const Pictogram_1 = require("../Pictogram");
+const RemoteImage_1 = require("../RemoteImage");
+const styles_1 = require("./styles");
+const EmptyState = ({ backgroundStyle = 'filled', children, illustration, heading, pictogramName, }) => {
+    const pictograms = (0, providers_1.usePictograms)();
+    const theme = (0, styled_native_1.useTheme)();
+    const isFilledBackground = backgroundStyle === 'filled';
+    return ((0, jsx_runtime_1.jsxs)(styles_1.StyledCard, { testID: "empty-state-card", background: isFilledBackground ? theme.color.surface.bright : 'transparent', children: [(illustration === null || illustration === void 0 ? void 0 : illustration.uri) ? ((0, jsx_runtime_1.jsx)(RemoteImage_1.RemoteImage, Object.assign({ testID: "empty-state-illustration", resizeMode: "contain" }, illustration))) : null, pictogramName && pictograms[pictogramName] ? ((0, jsx_runtime_1.jsx)(Pictogram_1.Pictogram, { testID: "empty-state-pictogram", size: 64, name: pictogramName })) : null, (0, jsx_runtime_1.jsxs)(styles_1.TextContainer, { children: [(0, jsx_runtime_1.jsx)(Heading_1.Heading4, { style: { color: theme.color.surface.onSurface }, children: heading }), children] })] }));
+};
+exports.EmptyState = EmptyState;

package/dist/components/EmptyState/EmptyState.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/EmptyState/EmptyState.test.js

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const utils_1 = require("../../test/utils");
+const EmptyState_1 = require("./EmptyState");
+jest.mock('../../providers', () => (Object.assign(Object.assign({}, jest.requireActual('../../providers')), { usePictograms: () => ({
+        'test-pictogram': 'test-pictogram-data',
+    }) })));
+const mockIllustration = {
+    uri: 'https://example.com/image.png',
+    width: 100,
+    height: 100,
+};
+const setup = (props) => {
+    return (0, utils_1.render)((0, jsx_runtime_1.jsx)(EmptyState_1.EmptyState, Object.assign({}, props)));
+};
+describe('EmptyState', () => {
+    it('should render the heading and children', () => {
+        const { getByText } = setup({
+            heading: 'Default Heading',
+            children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { children: "Default Children" }),
+            pictogramName: 'test-pictogram',
+        });
+        expect(getByText('Default Heading')).toBeDefined();
+        expect(getByText('Default Children')).toBeDefined();
+    });
+    it('should have a filled background by default', () => {
+        const { getByTestId } = setup({
+            heading: 'Default Heading',
+            pictogramName: 'test-pictogram',
+        });
+        const card = getByTestId('empty-state-card');
+        expect(card.props.style.backgroundColor).not.toBe('transparent');
+    });
+    it("should have a transparent background when backgroundStyle is 'transparent'", () => {
+        const { getByTestId } = setup({
+            backgroundStyle: 'transparent',
+            heading: 'Default Heading',
+            pictogramName: 'test-pictogram',
+        });
+        const card = getByTestId('empty-state-card');
+        expect(card.props.style.backgroundColor).toBe('transparent');
+    });
+    it('should render an illustration if provided', () => {
+        const { getByTestId } = setup({
+            heading: 'Default Heading',
+            illustration: mockIllustration,
+        });
+        const image = getByTestId('empty-state-illustration');
+        expect(image).toBeDefined();
+        expect(image.props.source.uri).toBe(mockIllustration.uri);
+    });
+    it('should not render an illustration if uri is not provided', () => {
+        const { queryByTestId } = setup({
+            heading: 'Default Heading',
+            // @ts-expect-error - we are intentionally providing an illustration without a valid uri to test rendering logic
+            illustration: { height: 100, width: 100 },
+        });
+        expect(queryByTestId('empty-state-illustration')).toBeNull();
+    });
+    it('should render a pictogram if a valid pictogramName is provided', () => {
+        const { getByTestId } = setup({
+            heading: 'Default Heading',
+            pictogramName: 'test-pictogram',
+        });
+        expect(getByTestId('empty-state-pictogram')).toBeDefined();
+    });
+    it('should not render a pictogram if pictogramName is invalid', () => {
+        const { queryByTestId } = setup({
+            heading: 'Default Heading',
+            pictogramName: 'invalid-pictogram',
+        });
+        expect(queryByTestId('empty-state-pictogram')).toBeNull();
+    });
+    it('should render custom children', () => {
+        const { getByText } = (0, utils_1.render)((0, jsx_runtime_1.jsx)(EmptyState_1.EmptyState, { heading: "Custom Heading", pictogramName: "test-pictogram", children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { children: "My Custom Child" }) }));
+        expect(getByText('My Custom Child')).toBeDefined();
+    });
+    it('should only render illustration when both illustration and pictogramName are provided', () => {
+        // According to the EmptyStateProps, only one of them should be present.
+        // However, if a user passes both, the component's internal logic will prioritize illustration.
+        // @ts-expect-error - we are intentionally passing both props to test runtime behavior
+        const { getByTestId, queryByTestId } = setup({
+            heading: 'Default Heading',
+            illustration: mockIllustration,
+            pictogramName: 'test-pictogram',
+        });
+        expect(getByTestId('empty-state-illustration')).toBeDefined();
+        expect(queryByTestId('empty-state-pictogram')).toBeNull();
+    });
+});

package/dist/components/EmptyState/index.d.ts

@@ -0,0 +1 @@
+export * from './EmptyState';

package/dist/components/EmptyState/index.js

@@ -0,0 +1,17 @@
+"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("./EmptyState"), exports);