@antscorp/antsomi-ui 1.3.5-beta.95 → 1.3.5-beta.950

package/es/components/atoms/Iframe/Iframe.d.ts

@@ -0,0 +1,4 @@
+import React, { IframeHTMLAttributes } from 'react';
+export interface IframeProps extends IframeHTMLAttributes<HTMLIFrameElement> {
+}
+export declare const Iframe: React.FC<IframeProps>;

package/es/components/atoms/Iframe/Iframe.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Libraries
+import clsx from 'clsx';
+import { useEffect, useRef } from 'react';
+// Constants
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+// Styled
+import styled from 'styled-components';
+const StyledIframe = styled.iframe `
+  border: none;
+  opacity: 0;
+`;
+export const Iframe = props => {
+    const { children, className, src, srcDoc, ...restProps } = props;
+    // Ref
+    const iframeRef = useRef(null);
+    // Effects
+    useEffect(() => 
+    // Handle hide iframe until iframe is loaded
+    () => {
+        if (iframeRef.current) {
+            iframeRef.current.style.opacity = '0';
+        }
+    }, [src, srcDoc]);
+    useEffect(() => {
+        const iframe = iframeRef.current;
+        const handleLoad = () => {
+            const iframeDoc = iframe.contentDocument || iframe?.contentWindow?.document;
+            const style = document.createElement('style');
+            style.innerHTML = `
+         ::-webkit-scrollbar {
+            background-color: transparent;
+            width: 4px;
+          }
+          ::-webkit-scrollbar-thumb {
+            background-color: transparent;
+            border-radius: 4px;
+          }
+
+          *:hover {
+            &::-webkit-scrollbar-thumb {
+              background-color: ${globalToken?.gray5};
+            }
+          }
+      `;
+            if (iframeDoc && iframeRef.current) {
+                iframeDoc.head.appendChild(style);
+                iframeRef.current.style.opacity = '1';
+            }
+        };
+        if (iframe) {
+            iframe.addEventListener('load', handleLoad);
+        }
+        return () => {
+            if (iframe) {
+                iframe.removeEventListener('load', handleLoad);
+            }
+        };
+    }, []);
+    return (_jsx(StyledIframe, { ...restProps, src: src, srcDoc: srcDoc, className: clsx('antsomi-iframe', className), ref: iframeRef }));
+};

package/es/components/atoms/Iframe/index.d.ts

@@ -0,0 +1 @@
+export { Iframe, type IframeProps } from './Iframe';

package/es/components/atoms/Iframe/index.js

@@ -0,0 +1 @@
+export { Iframe } from './Iframe';

package/es/components/atoms/Image/Image.d.ts

@@ -0,0 +1,2 @@
+export { Image } from 'antd';
+export type { ImageProps } from 'antd';

package/es/components/atoms/Image/Image.js

@@ -0,0 +1 @@
+export { Image } from 'antd';

package/es/components/atoms/Image/index.d.ts

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

package/es/components/atoms/Image/index.js

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

package/es/components/atoms/Input/Input.d.ts

@@ -1,11 +1,11 @@
 /// <reference types="hoist-non-react-statics" />
 import React, { ReactNode } from 'react';
-import { InputProps as AntdInputProps, Input as AntdInput } from 'antd';
+import { InputProps as AntdInputProps, Input as AntdInput, InputRef } from 'antd';
 export interface InputProps extends AntdInputProps {
     noborder?: 'true' | 'false' | boolean;
     debounce?: number;
     label?: ReactNode;
-    onAfterChange?: (value: any) => void;
+    onAfterChange?: (value: string) => void;
     errorArchive?: string;
     required?: boolean;
     isReverseMask?: boolean;
@@ -14,18 +14,22 @@ export interface InputProps extends AntdInputProps {
     focused?: boolean;
     errorMsg?: string;
     disableUndo?: boolean;
+    withWrapper?: boolean;
 }
-export declare const Input: string & import("styled-components").StyledComponentBase<React.ForwardRefExoticComponent<AntdInputProps & React.RefAttributes<import("antd").InputRef>> & {
+export declare const Input: string & import("styled-components").StyledComponentBase<React.ForwardRefExoticComponent<AntdInputProps & React.RefAttributes<InputRef>> & {
     Group: React.FC<import("antd/es/input").GroupProps>;
-    Search: React.ForwardRefExoticComponent<import("antd/es/input").SearchProps & React.RefAttributes<import("antd").InputRef>>;
+    Search: React.ForwardRefExoticComponent<import("antd/es/input").SearchProps & React.RefAttributes<InputRef>>;
     TextArea: React.ForwardRefExoticComponent<import("antd/es/input").TextAreaProps & React.RefAttributes<import("antd/es/input/TextArea").TextAreaRef>>;
-    Password: React.ForwardRefExoticComponent<import("antd/es/input").PasswordProps & React.RefAttributes<import("antd").InputRef>>;
-}, any, InputProps, never> & import("hoist-non-react-statics").NonReactStatics<React.ForwardRefExoticComponent<AntdInputProps & React.RefAttributes<import("antd").InputRef>> & {
+    Password: React.ForwardRefExoticComponent<import("antd/es/input").PasswordProps & React.RefAttributes<InputRef>>;
+}, any, InputProps, never> & import("hoist-non-react-statics").NonReactStatics<React.ForwardRefExoticComponent<AntdInputProps & React.RefAttributes<InputRef>> & {
     Group: React.FC<import("antd/es/input").GroupProps>;
-    Search: React.ForwardRefExoticComponent<import("antd/es/input").SearchProps & React.RefAttributes<import("antd").InputRef>>;
+    Search: React.ForwardRefExoticComponent<import("antd/es/input").SearchProps & React.RefAttributes<InputRef>>;
     TextArea: React.ForwardRefExoticComponent<import("antd/es/input").TextAreaProps & React.RefAttributes<import("antd/es/input/TextArea").TextAreaRef>>;
-    Password: React.ForwardRefExoticComponent<import("antd/es/input").PasswordProps & React.RefAttributes<import("antd").InputRef>>;
+    Password: React.ForwardRefExoticComponent<import("antd/es/input").PasswordProps & React.RefAttributes<InputRef>>;
 }, {}> & {
     DefaultInput: typeof AntdInput;
+    CustomSearch: typeof SearchInput;
 };
+declare const SearchInput: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<InputRef>>;
 export declare const TextArea: React.ForwardRefExoticComponent<import("antd/es/input").TextAreaProps & React.RefAttributes<import("antd/es/input/TextArea").TextAreaRef>>;
+export {};

package/es/components/atoms/Input/Input.js

@@ -1,14 +1,4 @@
-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;
-};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable @typescript-eslint/no-unused-expressions */
 /* eslint-disable react/destructuring-assignment */
 // Libraries
@@ -16,15 +6,18 @@ import React, { useEffect, useMemo, useRef, useState } from 'react';
 // Types
 import { Input as AntdInput } from 'antd';
 // Components
-import { RequiredLabel, Text } from '@antscorp/antsomi-ui/es/components/atoms';
+import { Icon, RequiredLabel, Text } from '@antscorp/antsomi-ui/es/components/atoms';
 // Utils
 import { handleError } from '@antscorp/antsomi-ui/es/utils';
 import { getPreventKeyboardAction } from '@antscorp/antsomi-ui/es/utils/web';
-import { StyledInput } from './styled';
+import { StyledIconWrapper, StyledInput } from './styled';
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+// Icons
+import { PreviewVisibilityEyeIcon, VisibilityOffEyeIcon } from '../../icons';
 const PATH = '@antscorp/antsomi-ui/es/components/atoms/Input/Input.tsx';
-const OriginInput = props => {
+const OriginInput = React.forwardRef((props, ref) => {
     // Props
-    const { debounce, errorArchive, required, labelColor, isReverseMask, isHideErrMessage, focused, label, onAfterChange, onChange, errorMsg } = props, restProps = __rest(props, ["debounce", "errorArchive", "required", "labelColor", "isReverseMask", "isHideErrMessage", "focused", "label", "onAfterChange", "onChange", "errorMsg"]);
+    const { withWrapper, debounce, errorArchive, required, labelColor, isReverseMask, isHideErrMessage, focused, label, onAfterChange, onChange, errorMsg, ...restProps } = props;
     // State
     const [value, setValue] = useState(props.value);
     const [isFocused, setFocused] = useState(false);
@@ -68,29 +61,34 @@ const OriginInput = props => {
     };
     const renderRequiredLabel = (label) => {
         if (required) {
-            return (React.createElement(RequiredLabel, { isReverseMask: isReverseMask, color: labelColor || '#666666', style: { marginBottom: 5 } }, label));
+            return (_jsx(RequiredLabel, { isReverseMask: isReverseMask, color: labelColor || '#666666', style: { marginBottom: 5 }, children: label }));
         }
-        return (React.createElement(Text, { color: "#666666", style: { marginBottom: 5 } }, label));
+        return (_jsx(Text, { color: "#666666", style: { marginBottom: 5 }, children: label }));
     };
     const listDisableActions = [];
     if (props.disableUndo) {
         listDisableActions.push('undo');
     }
-    return (React.createElement("div", { className: "input__wrapper" },
-        label && renderRequiredLabel(label),
-        React.createElement(StyledInput, Object.assign({}, restProps, { value: value, onBlur: e => {
-                if (!isFocused) {
-                    setFocused(true);
-                }
-                restProps.onBlur && restProps.onBlur(e);
-            }, onChange: onChangeInput }, getPreventKeyboardAction(listDisableActions))),
-        (restProps.status === 'error' || errorArchive || requiredMsg) && !isHideErrMessage ? (React.createElement(Text, { color: "#ff4d4f", style: { marginLeft: 8, marginTop: 5 } }, errorMsg || errorArchive || requiredMsg)) : null));
-};
+    const content = (_jsxs(_Fragment, { children: [label && renderRequiredLabel(label), _jsx(StyledInput, { ...restProps, ref: ref, value: value, onBlur: e => {
+                    if (!isFocused) {
+                        setFocused(true);
+                    }
+                    restProps.onBlur && restProps.onBlur(e);
+                }, onChange: onChangeInput, ...getPreventKeyboardAction(listDisableActions) }), (restProps.status === 'error' || errorArchive || requiredMsg) && !isHideErrMessage ? (_jsx(Text, { color: "#ff4d4f", style: { marginLeft: 8, marginTop: 5 }, children: errorMsg || errorArchive || requiredMsg })) : null] }));
+    if (!withWrapper)
+        return content;
+    return _jsx("div", { className: "input__wrapper", children: content });
+});
 OriginInput.defaultProps = {
     debounce: 400,
     isHideErrMessage: false,
+    withWrapper: true,
 };
 export const Input = OriginInput;
+const SearchInput = React.forwardRef((props, ref) => (_jsx(OriginInput, { bordered: false, autoFocus: true, suffix: _jsx(Icon, { type: "icon-ants-search-2", size: 24, color: globalToken?.bw8 }), ...props, ref: ref, className: `${props.className} antsomi-search-input` })));
+const PasswordInput = React.forwardRef((props, ref) => (_jsx(AntdInput.Password, { iconRender: visible => visible ? (_jsx(StyledIconWrapper, { type: "text", children: _jsx(PreviewVisibilityEyeIcon, {}) })) : (_jsx(StyledIconWrapper, { type: "text", children: _jsx(VisibilityOffEyeIcon, {}) })), ...props, ref: ref })));
+Input.CustomSearch = SearchInput;
 Input.TextArea = StyledInput.TextArea;
 Input.DefaultInput = AntdInput;
+Input.Password = PasswordInput;
 export const { TextArea } = StyledInput;

package/es/components/atoms/Input/styled.d.ts

@@ -9,3 +9,10 @@ export declare const StyledInput: import("styled-components").StyledComponent<im
 export declare const TextArea: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/input").TextAreaProps & import("react").RefAttributes<import("antd/es/input/TextArea").TextAreaRef>>, any, {
     showBorder?: boolean | undefined;
 }, never>;
+export declare const StyledSearchInput: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").InputProps & import("react").RefAttributes<import("antd").InputRef>> & {
+    Group: import("react").FC<import("antd/es/input").GroupProps>;
+    Search: import("react").ForwardRefExoticComponent<import("antd/es/input").SearchProps & import("react").RefAttributes<import("antd").InputRef>>;
+    TextArea: import("react").ForwardRefExoticComponent<import("antd/es/input").TextAreaProps & import("react").RefAttributes<import("antd/es/input/TextArea").TextAreaRef>>;
+    Password: import("react").ForwardRefExoticComponent<import("antd/es/input").PasswordProps & import("react").RefAttributes<import("antd").InputRef>>;
+}, any, {}, never>;
+export declare const StyledIconWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<import("react").LegacyRef<HTMLElement>>>, any, {}, never>;

package/es/components/atoms/Input/styled.js

@@ -1,8 +1,8 @@
-var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
 // Styled
 import styled, { css } from 'styled-components';
 // Components
 import { Input as InputAntd } from 'antd';
+import { Button } from '../Button';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 export const StyledInput = styled(InputAntd) `
@@ -13,18 +13,18 @@ export const StyledInput = styled(InputAntd) `
   padding-left: 5px;
   padding-right: 5px;
   font-family: 'Roboto';
-  font-size: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.fontSize}px;
+  font-size: ${THEME.token?.fontSize}px;
   --tw-shadow: 0 1px 0 0 #e0e0e0;
   --tw-shadow-colored: 0 1px 0 0 var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
     var(--tw-shadow);
 
   &::placeholder {
-    color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.accent5};
+    color: ${THEME.token?.accent5};
   }
 
   &:hover {
-    background-color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.blue0};
+    background-color: ${THEME.token?.blue0};
   }
 
   transition-property: all;
@@ -43,7 +43,7 @@ export const StyledInput = styled(InputAntd) `
 
   &:active,
   &:focus {
-    background-color: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.blue0};
+    background-color: ${THEME.token?.blue0};
     --tw-shadow: 0 1px 0 0 #194e8d;
     --tw-shadow-colored: 0 1px 0 0 var(--tw-shadow-color);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
@@ -51,8 +51,8 @@ export const StyledInput = styled(InputAntd) `
   }
 
   &:disabled {
-    background-color: ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.accent1};
-    color: ${(_f = THEME.token) === null || _f === void 0 ? void 0 : _f.accent5};
+    background-color: ${THEME.token?.accent1};
+    color: ${THEME.token?.accent5};
     --tw-shadow: 0 1px 0 0 #e0e0e0;
     --tw-shadow-colored: 0 1px 0 0 var(--tw-shadow-color);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
@@ -66,18 +66,18 @@ export const TextArea = styled(InputAntd.TextArea) `
   padding-left: 5px;
   padding-right: 5px;
   font-family: 'Roboto';
-  font-size: ${(_g = THEME.token) === null || _g === void 0 ? void 0 : _g.fontSize}px;
+  font-size: ${THEME.token?.fontSize}px;
   --tw-shadow: 0 1px 0 0 #e0e0e0;
   --tw-shadow-colored: 0 1px 0 0 var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
     var(--tw-shadow);
 
   &::placeholder {
-    color: ${(_h = THEME.token) === null || _h === void 0 ? void 0 : _h.accent5};
+    color: ${THEME.token?.accent5};
   }
 
   &:hover {
-    background-color: ${(_j = THEME.token) === null || _j === void 0 ? void 0 : _j.blue0};
+    background-color: ${THEME.token?.blue0};
   }
 
   transition-property: all;
@@ -86,7 +86,7 @@ export const TextArea = styled(InputAntd.TextArea) `
 
   &:active,
   &:focus {
-    background-color: ${(_k = THEME.token) === null || _k === void 0 ? void 0 : _k.blue0};
+    background-color: ${THEME.token?.blue0};
     --tw-shadow: 0 1px 0 0 #194e8d;
     --tw-shadow-colored: 0 1px 0 0 var(--tw-shadow-color);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
@@ -94,8 +94,8 @@ export const TextArea = styled(InputAntd.TextArea) `
   }
 
   &:disabled {
-    background-color: ${(_l = THEME.token) === null || _l === void 0 ? void 0 : _l.accent1};
-    color: ${(_m = THEME.token) === null || _m === void 0 ? void 0 : _m.accent5};
+    background-color: ${THEME.token?.accent1};
+    color: ${THEME.token?.accent5};
     --tw-shadow: 0 1px 0 0 #e0e0e0;
     --tw-shadow-colored: 0 1px 0 0 var(--tw-shadow-color);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
@@ -107,3 +107,11 @@ export const TextArea = styled(InputAntd.TextArea) `
       border: 1px solid #e0e0e0;
     `}
 `;
+export const StyledSearchInput = styled(InputAntd) `
+  &.antsomi-input-affix-wrapper:hover > input.antsomi-input {
+    background-color: transparent;
+  }
+`;
+export const StyledIconWrapper = styled(Button) `
+  padding: 4px;
+`;

package/es/components/atoms/InputDynamic/EditCaretPositioning.js

@@ -8,16 +8,15 @@ const EditCaretPositioning = {};
 if (window.getSelection && document.createRange) {
     // saves caret position(s)
     EditCaretPositioning.saveSelection = function (containerEl) {
-        var _a;
         try {
-            let range = (_a = window === null || window === void 0 ? void 0 : window.getSelection()) === null || _a === void 0 ? void 0 : _a.getRangeAt(0);
-            let preSelectionRange = range === null || range === void 0 ? void 0 : range.cloneRange();
-            preSelectionRange === null || preSelectionRange === void 0 ? void 0 : preSelectionRange.selectNodeContents(containerEl);
-            preSelectionRange === null || preSelectionRange === void 0 ? void 0 : preSelectionRange.setEnd(range === null || range === void 0 ? void 0 : range.startContainer, range === null || range === void 0 ? void 0 : range.startOffset);
-            let start = preSelectionRange === null || preSelectionRange === void 0 ? void 0 : preSelectionRange.toString().length;
+            let range = window?.getSelection()?.getRangeAt(0);
+            let preSelectionRange = range?.cloneRange();
+            preSelectionRange?.selectNodeContents(containerEl);
+            preSelectionRange?.setEnd(range?.startContainer, range?.startOffset);
+            let start = preSelectionRange?.toString().length;
             return {
                 start: start,
-                end: start + (range === null || range === void 0 ? void 0 : range.toString().length),
+                end: start + range?.toString().length,
             };
         }
         catch (e) {
@@ -74,8 +73,8 @@ if (window.getSelection && document.createRange) {
                 range.collapse(true);
             }
         }
-        sel === null || sel === void 0 ? void 0 : sel.removeAllRanges();
-        sel === null || sel === void 0 ? void 0 : sel.addRange(range);
+        sel?.removeAllRanges();
+        sel?.addRange(range);
     };
 }
 else if (document.selection && document.body.createTextRange) {

package/es/components/atoms/InputDynamic/InputDynamic.d.ts

@@ -1,10 +1,5 @@
-import React from 'react';
 import { InputDynamicProps } from './types';
-export declare const AllowDynamicType: {
-    readonly SHORTLINK: "shortlink";
-    readonly ADDPERSONALIZATION: "addPersonalization";
-};
 export declare const InputDynamic: {
-    (props: InputDynamicProps): React.JSX.Element;
+    (props: InputDynamicProps): import("react/jsx-runtime").JSX.Element;
     defaultProps: InputDynamicProps;
 };