@ovotech/element-native 5.5.0 → 5.7.0

package/dist/components/Input/Input.js

@@ -1,37 +1,4 @@
 "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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -46,30 +13,16 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Input = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const element_core_1 = require("@ovotech/element-core");
 const react_1 = require("react");
 const hooks_1 = require("../../hooks");
-const styled_native_1 = __importStar(require("../../styled.native"));
-const Icon_1 = require("../Icon/Icon");
-const StyledIcon = (0, styled_native_1.default)(Icon_1.Icon)(({ theme, side, focused }) => {
-    const focusCompensation = focused ? theme.space[50] : 0;
-    return (0, styled_native_1.css) `
-    position: absolute;
-    z-index: 1;
-    top: ${(0, element_core_1.numToPx)(theme.space[350] + focusCompensation)};
-    ${side === 'left'
-        ? `left: ${(0, element_core_1.numToPx)(theme.space[200] + focusCompensation)}`
-        : ''};
-    ${side === 'right'
-        ? `right: ${(0, element_core_1.numToPx)(theme.space[200] + focusCompensation)}`
-        : ''};
-  `;
-});
+const styled_native_1 = require("../../styled.native");
+const styled_1 = require("./styled");
 const Input = (_a) => {
-    var { onFocus, onBlur, style, iconLeft, iconRight, rightSlot, ref } = _a, rest = __rest(_a, ["onFocus", "onBlur", "style", "iconLeft", "iconRight", "rightSlot", "ref"]);
+    var { onFocus, onBlur, style, iconLeft, iconRight, invalid, rightSlot, ref, selected } = _a, rest = __rest(_a, ["onFocus", "onBlur", "style", "iconLeft", "iconRight", "invalid", "rightSlot", "ref", "selected"]);
     const [focused, setFocused] = (0, react_1.useState)(false);
     const breakpoints = (0, hooks_1.useBreakpoint)();
-    return ((0, jsx_runtime_1.jsxs)(InputWrapper, { focused: focused, children: [iconLeft ? ((0, jsx_runtime_1.jsx)(StyledIcon, { name: iconLeft, size: 16, focused: focused, pointerEvents: "none", side: "left" })) : null, (0, jsx_runtime_1.jsx)(StyledInput, Object.assign({}, rest, breakpoints, { iconLeft: !!iconLeft, iconRight: !!iconRight, hasRightSlot: !!rightSlot, style: style, ref: ref, onFocus: (event) => {
+    const theme = (0, styled_native_1.useTheme)();
+    return ((0, jsx_runtime_1.jsxs)(styled_1.StyledInputWrapper, { focused: focused, hasError: invalid, isSelected: selected, children: [iconLeft ? ((0, jsx_runtime_1.jsx)(styled_1.StyledIcon, { name: iconLeft, size: styled_1.ICON_SIZE, pointerEvents: "none", side: "left" })) : null, (0, jsx_runtime_1.jsx)(styled_1.StyledInput, Object.assign({}, rest, breakpoints, { hasRightSlot: !!rightSlot, iconLeft: !!iconLeft, iconRight: !!iconRight, invalid: invalid, placeholderTextColor: theme.color.surface.onSurfaceVariant, ref: ref, style: style, onFocus: (event) => {
                     setFocused(true);
                     if (onFocus) {
                         onFocus(event);
@@ -79,50 +32,6 @@ const Input = (_a) => {
                     if (onBlur) {
                         onBlur(event);
                     }
-                } })), iconRight && !rightSlot ? ((0, jsx_runtime_1.jsx)(StyledIcon, { name: iconRight, size: 16, focused: focused, pointerEvents: "none", side: "right" })) : null, rightSlot] }));
+                } })), iconRight && !rightSlot ? ((0, jsx_runtime_1.jsx)(styled_1.StyledIcon, { name: iconRight, size: styled_1.ICON_SIZE, pointerEvents: "none", side: "right" })) : null, rightSlot] }));
 };
 exports.Input = Input;
-const InputWrapper = styled_native_1.default.View(({ theme, focused }) => (0, styled_native_1.css) `
-    align-self: stretch;
-    border-radius: ${(0, element_core_1.numToPx)(theme.border.radius.md)};
-    border-width: 0;
-    border-style: solid;
-    border-color: ${theme.input.color.border};
-    flex-direction: row;
-
-    ${focused
-    ? `
-      border-width: ${(0, element_core_1.numToPx)(theme.border.width.md)};
-      border-color: ${theme.color.outline.outer};
-      padding: 2px;
-      margin: -4px;`
-    : null}
-  `);
-const StyledInput = styled_native_1.default.TextInput(({ theme, invalid, smallAndUp, iconLeft, iconRight, hasRightSlot }) => {
-    const fontSize = smallAndUp
-        ? theme.font.size.md.mediaQuery.lg
-        : theme.font.size.md.mediaQuery.sm;
-    const errorStyles = invalid
-        ? `
-        border-color: ${theme.color.alert.error};
-      `
-        : '';
-    return (0, styled_native_1.css) `
-    font-family: ${theme.native.font.family.book};
-    color: ${theme.color.surface.onSurface};
-    font-size: ${(0, element_core_1.numToPx)(fontSize)};
-    height: ${(0, element_core_1.numToPx)(theme.space[1100])};
-    line-height: 18px; /* Corrects for responsive line height in fixed height input */
-    border: ${(0, element_core_1.numToPx)(theme.border.width.md)} solid ${theme.input.color.border};
-    border-radius: ${(0, element_core_1.numToPx)(theme.border.radius.sm)};
-    padding: ${(0, element_core_1.numToPx)(theme.space[200])};
-    flex: 1;
-
-    ${iconLeft ? `padding-left: ${(0, element_core_1.numToPx)(theme.space[800])};` : ''}
-    ${iconRight || hasRightSlot
-        ? `padding-right: ${(0, element_core_1.numToPx)(theme.space[800])};`
-        : ''}
-
-          ${errorStyles}
-  `;
-});

package/dist/components/Input/styled.d.ts

@@ -0,0 +1,16 @@
+import { Breakpoints } from '../../hooks';
+export declare const ICON_SIZE = 20;
+export declare const StyledInputWrapper: import("styled-components").StyledComponent<typeof import("react-native").View, import("@ovotech/element-core/dist/tokens-build/theme-native.types").ThemeNative, {
+    focused: boolean;
+    hasError: boolean;
+    isSelected?: boolean;
+}, never>;
+export declare const StyledInput: import("styled-components").StyledComponent<typeof import("react-native").TextInput, import("@ovotech/element-core/dist/tokens-build/theme-native.types").ThemeNative, Breakpoints & {
+    invalid?: boolean;
+    iconLeft?: boolean;
+    iconRight?: boolean;
+    hasRightSlot?: boolean;
+}, never>;
+export declare const StyledIcon: import("styled-components").StyledComponent<({ name, size, color, testID, ...rest }: import("../Icon/Icon").IconProps) => import("react/jsx-runtime").JSX.Element | null, import("@ovotech/element-core/dist/tokens-build/theme-native.types").ThemeNative, {
+    side: "left" | "right";
+}, never>;

package/dist/components/Input/styled.js

@@ -0,0 +1,96 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledIcon = exports.StyledInput = exports.StyledInputWrapper = exports.ICON_SIZE = void 0;
+const styled_native_1 = __importStar(require("../../styled.native"));
+const theme_1 = require("../../theme");
+const utils_1 = require("../../utils");
+const Icon_1 = require("../Icon");
+exports.ICON_SIZE = 20;
+exports.StyledInputWrapper = styled_native_1.default.View(({ theme, focused, hasError, isSelected }) => {
+    let borderColor = 'transparent';
+    /* prioritise error and selected states for border, even when focused */
+    if (hasError) {
+        borderColor = theme.color.alert.error;
+    }
+    else if (isSelected) {
+        borderColor = theme.color.surface.onSurface;
+    }
+    else if (focused) {
+        borderColor = theme.color.outline.outer;
+    }
+    return (0, styled_native_1.css) `
+    align-self: stretch;
+    background-color: ${theme.color.surface.bright};
+    border-radius: ${(0, theme_1.numToPx)(theme.border.radius.md)};
+    border-width: ${(0, theme_1.numToPx)(theme.border.width.md)};
+    border-style: solid;
+    border-color: ${borderColor};
+    flex-direction: row;
+    ${(0, utils_1.getShadowCSS)({ theme })}
+  `;
+});
+exports.StyledInput = styled_native_1.default.TextInput(({ theme, smallAndUp, iconLeft, iconRight, hasRightSlot }) => {
+    const fontSize = smallAndUp
+        ? theme.font.size.md.mediaQuery.lg
+        : theme.font.size.md.mediaQuery.sm;
+    return (0, styled_native_1.css) `
+    position: relative;
+    flex: 1;
+    padding: ${(0, theme_1.numToPx)(theme.space[400])};
+    border-radius: ${(0, theme_1.numToPx)(theme.border.radius.lg)};
+    color: ${theme.color.surface.onSurface};
+    font-family: ${theme.native.font.family.book};
+    font-size: ${(0, theme_1.numToPx)(fontSize)};
+
+    /* NOTE: height being queried with design, subject to change */
+    min-height: ${(0, theme_1.numToPx)(theme.space[1600])};
+
+    ${iconLeft ? `padding-left: ${(0, theme_1.numToPx)(theme.space[800])};` : ''}
+    ${iconRight || hasRightSlot
+        ? `padding-right: ${(0, theme_1.numToPx)(theme.space[800])};`
+        : ''}
+  `;
+});
+exports.StyledIcon = (0, styled_native_1.default)(Icon_1.Icon)(({ theme, side }) => {
+    return (0, styled_native_1.css) `
+    position: absolute;
+    z-index: 1;
+    top: 50%;
+    margin-top: -${exports.ICON_SIZE / 2}px;
+    ${side === 'left' ? `left: ${(0, theme_1.numToPx)(theme.space[200])}` : ''};
+    ${side === 'right' ? `right: ${(0, theme_1.numToPx)(theme.space[200])}` : ''};
+  `;
+});