@via-profit/ui-kit 0.1.0-rc.60 → 0.1.0-rc.62

package/Modal/BaseModal/ModalInner.js

@@ -35,7 +35,7 @@ const StyledModalInner = styled_1.default.div `
     (0, react_2.css) `
       opacity: 1;
       transform: translate(-50%, -50%);
-      ransition:
+      transition:
         transform 240ms ease-out,
         opacity 100ms ease-out;
     `}

package/TextArea/TextAreaIconWrapper.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { TextFieldIconWrapperProps } from '../TextField/TextFieldIconWrapper';
+export type TextAreaIconWrapperProps = TextFieldIconWrapperProps;
+declare const _default: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLDivElement> & {
+    readonly position: "end" | "start";
+    readonly error?: boolean | undefined;
+    readonly focused?: boolean | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/TextArea/TextAreaIconWrapper.js

@@ -0,0 +1,53 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const TextFieldIconWrapper_1 = __importDefault(require("../TextField/TextFieldIconWrapper"));
+const StyledTextFieldIconWrapper = (0, styled_1.default)(TextFieldIconWrapper_1.default) `
+  align-items: flex-start;
+  & > svg {
+    margin: 1em;
+  }
+`;
+const TextAreaIconWrapper = (props, ref) => {
+    const { children } = props, restProps = __rest(props, ["children"]);
+    return (React.createElement(StyledTextFieldIconWrapper, Object.assign({}, restProps, { ref: ref }), children));
+};
+exports.default = React.forwardRef(TextAreaIconWrapper);

package/TextArea/TextAreaInput.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export interface TextAreaInputProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    readonly hasStartIcon: boolean;
+    readonly hasEndIcon: boolean;
+}
+declare const _default: React.ForwardRefExoticComponent<TextAreaInputProps & React.RefAttributes<HTMLTextAreaElement>>;
+export default _default;

package/TextArea/TextAreaInput.js

@@ -0,0 +1,72 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_1 = require("@emotion/react");
+const TextareaNative = styled_1.default.textarea `
+  resize: none;
+  padding: 1em 1.2em;
+  font-size: 1em;
+  background: none;
+  border-radius: inherit;
+  margin: 0;
+  border: 0;
+  width: ${({ cols }) => (typeof cols !== 'undefined' ? 'auto' : '100%')};
+  color: currentColor;
+  ${({ $hasStartIcon }) => $hasStartIcon &&
+    (0, react_1.css) `
+      padding-left: 0;
+    `};
+  ${({ $hasEndIcon }) => $hasEndIcon &&
+    (0, react_1.css) `
+      padding-right: 0;
+    `};
+  &:focus {
+    outline: none;
+  }
+  &::placeholder {
+    font-style: italic;
+  }
+`;
+const TextAreaInput = (props, ref) => {
+    const { hasEndIcon, hasStartIcon } = props, nativeProps = __rest(props, ["hasEndIcon", "hasStartIcon"]);
+    return (React.createElement(TextareaNative, Object.assign({}, nativeProps, { "$hasEndIcon": hasEndIcon, "$hasStartIcon": hasStartIcon, ref: ref })));
+};
+exports.default = React.forwardRef(TextAreaInput);

package/TextArea/index.d.ts

@@ -0,0 +1,80 @@
+import * as React from 'react';
+import { TextFieldContainerProps } from '../TextField/TextFieldContainer';
+import { TextFieldLabelProps } from '../TextField/TextFieldLabel';
+import { TextFieldLabelAsteriskProps } from '../TextField/TextFieldLabelAsterisk';
+import { TextFieldInputWrapperProps } from '../TextField/TextFieldInputWrapper';
+import { TextAreaInputProps } from '../TextArea/TextAreaInput';
+import { TextFieldErrorTextProps } from '../TextField/TextFieldErrorText';
+import { TextAreaIconWrapperProps } from './TextAreaIconWrapper';
+export interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    /**
+     * If true then `errorText` value will be displayed under the TextField element
+     */
+    readonly error?: boolean;
+    /**
+     * If is true then the asterisk will be displayed in label\
+     * If is ReactNode then ReactNode will be displayed in label
+     */
+    readonly requiredAsterisk?: boolean | React.ReactNode;
+    /**
+     * Text or ReactNode to show in error element\
+     * Will be displaed only if `error` property is tru
+     */
+    readonly errorText?: React.ReactNode;
+    /**
+     * If true then TextField will be filled in full width on horizontal
+     */
+    readonly fullWidth?: boolean;
+    /**
+     * Native <input> element reference
+     */
+    readonly inputRef?: React.MutableRefObject<HTMLTextAreaElement | null> | React.RefCallback<HTMLTextAreaElement | null>;
+    /**
+     * Field label text or element
+     */
+    readonly label?: React.ReactNode;
+    /**
+     * End icon component
+     */
+    readonly endIcon?: React.ReactElement;
+    /**
+     * Start icon component
+     */
+    readonly startIcon?: React.ReactElement;
+    /**
+     * Overridable components map
+     */
+    readonly overrides?: TextAreaOverrides;
+}
+export interface TextAreaOverrides {
+    /**
+     * Native `input` component
+     */
+    readonly Input?: React.ForwardRefExoticComponent<TextAreaInputProps & React.RefAttributes<HTMLTextAreaElement>>;
+    /**
+     * Component for display error text
+     */
+    readonly ErrorText?: React.ForwardRefExoticComponent<TextFieldErrorTextProps & React.RefAttributes<HTMLDivElement>>;
+    /**
+     * Icons wrapper component
+     */
+    readonly IconWrapper?: React.ForwardRefExoticComponent<TextAreaIconWrapperProps & React.RefAttributes<HTMLDivElement>>;
+    /**
+     * input field wrapper component
+     */
+    readonly InputWrapper?: React.ForwardRefExoticComponent<TextFieldInputWrapperProps & React.RefAttributes<HTMLDivElement>>;
+    /**
+     * label component
+     */
+    readonly Label?: React.ForwardRefExoticComponent<TextFieldLabelProps & React.RefAttributes<HTMLLabelElement>>;
+    /**
+     * label asterisk component
+     */
+    readonly Asterisk?: React.ForwardRefExoticComponent<TextFieldLabelAsteriskProps & React.RefAttributes<HTMLSpanElement>>;
+    /**
+     * label component
+     */
+    readonly Container?: React.ForwardRefExoticComponent<TextFieldContainerProps & React.RefAttributes<HTMLDivElement>>;
+}
+declare const _default: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/TextArea/index.js

@@ -0,0 +1,100 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const TextFieldContainer_1 = __importDefault(require("../TextField/TextFieldContainer"));
+const TextFieldLabel_1 = __importDefault(require("../TextField/TextFieldLabel"));
+const TextFieldLabelAsterisk_1 = __importDefault(require("../TextField/TextFieldLabelAsterisk"));
+const TextFieldInputWrapper_1 = __importDefault(require("../TextField/TextFieldInputWrapper"));
+const TextAreaInput_1 = __importDefault(require("../TextArea/TextAreaInput"));
+const TextFieldErrorText_1 = __importDefault(require("../TextField/TextFieldErrorText"));
+const TextAreaIconWrapper_1 = __importDefault(require("./TextAreaIconWrapper"));
+const TextArea = (props, ref) => {
+    const { error, fullWidth, inputRef, label, id, errorText, className, style, endIcon, startIcon, requiredAsterisk, overrides, onChange, onFocus, onBlur } = props, nativeInputProps = __rest(props, ["error", "fullWidth", "inputRef", "label", "id", "errorText", "className", "style", "endIcon", "startIcon", "requiredAsterisk", "overrides", "onChange", "onFocus", "onBlur"]);
+    const [focused, setFocused] = React.useState(false);
+    const inputID = React.useMemo(() => {
+        if (typeof id === 'string') {
+            return id;
+        }
+        const u = Date.now().toString(16) + Math.random().toString(16) + '0'.repeat(16);
+        const guid = [
+            u.substring(0, 8),
+            u.substring(8, 12),
+            '4000-8' + u.substring(13, 16),
+            u.substring(16, 28),
+        ].join('-');
+        return guid;
+    }, [id]);
+    const inputChange = React.useCallback(event => {
+        if (onChange) {
+            onChange(event);
+        }
+    }, [onChange]);
+    const inputFocus = React.useCallback(event => {
+        setFocused(true);
+        if (typeof onFocus === 'function') {
+            onFocus(event);
+        }
+    }, [onFocus]);
+    const inputBlur = React.useCallback(event => {
+        setFocused(false);
+        if (typeof onBlur === 'function') {
+            onBlur(event);
+        }
+    }, [onBlur]);
+    const hasStartIcon = React.useMemo(() => typeof startIcon !== 'undefined' && startIcon !== null, [startIcon]);
+    const hasEndIcon = React.useMemo(() => typeof endIcon !== 'undefined' && endIcon !== null, [endIcon]);
+    const overridesMap = React.useMemo(() => (Object.assign({ Label: TextFieldLabel_1.default,
+        Input: TextAreaInput_1.default,
+        Asterisk: TextFieldLabelAsterisk_1.default,
+        Container: TextFieldContainer_1.default,
+        ErrorText: TextFieldErrorText_1.default,
+        IconWrapper: TextAreaIconWrapper_1.default,
+        InputWrapper: TextFieldInputWrapper_1.default }, overrides)), [overrides]);
+    return (React.createElement(overridesMap.Container, { ref: ref, fullWidth: fullWidth, className: className, style: style, focused: focused },
+        typeof label !== 'undefined' && label !== null && (React.createElement(overridesMap.Label, { htmlFor: inputID, error: error },
+            label,
+            typeof requiredAsterisk !== 'undefined' && requiredAsterisk !== null && (React.createElement(overridesMap.Asterisk, null, typeof requiredAsterisk === 'boolean' ? '*' : requiredAsterisk)))),
+        React.createElement(overridesMap.InputWrapper, { error: error, focused: focused, fullWidth: fullWidth },
+            hasStartIcon && (React.createElement(overridesMap.IconWrapper, { position: "start" }, startIcon)),
+            React.createElement(overridesMap.Input, Object.assign({}, nativeInputProps, { hasStartIcon: hasStartIcon, hasEndIcon: hasEndIcon, ref: inputRef, id: inputID, onChange: inputChange, onFocus: inputFocus, onBlur: inputBlur })),
+            hasEndIcon && (React.createElement(overridesMap.IconWrapper, { position: "end" }, endIcon))),
+        React.createElement(overridesMap.ErrorText, { error: error, focused: focused }, errorText)));
+};
+exports.default = React.forwardRef(TextArea);

package/TextField/TextFieldErrorText.js

@@ -42,6 +42,7 @@ const styled_1 = __importDefault(require("@emotion/styled"));
 const NoSSR_1 = __importDefault(require("../NoSSR"));
 const ErrorTextContainer = styled_1.default.div `
   margin-left: 0.5em;
+  max-height: 0;
   max-height: ${({ $maxHeight }) => typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight};
   transition: max-height 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
   overflow: hidden;
@@ -56,7 +57,7 @@ const ErrorTextInner = styled_1.default.div `
 const TextFieldErrorText = (props, ref) => {
     const { children, error, focused } = props, nativeProps = __rest(props, ["children", "error", "focused"]);
     const innerRef = React.useRef(null);
-    const [maxHeight, setMaxHeight] = React.useState('auto');
+    const [maxHeight, setMaxHeight] = React.useState('initial');
     React.useEffect(() => {
         const updateMaxHeight = () => {
             if (innerRef.current && innerRef.current.getBoundingClientRect().height > 0) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@via-profit/ui-kit",
-  "version": "0.1.0-rc.60",
+  "version": "0.1.0-rc.62",
   "description": "UI Kit",
   "repository": {
     "type": "git",