@antscorp/antsomi-ui 1.3.5-beta.278 → 1.3.5-beta.280

package/es/components/molecules/AccountSelection/AccountListing.js

@@ -1,6 +1,7 @@
 import Icon from '@antscorp/icons';
 import React, { useCallback, useMemo, useState } from 'react';
-import { Input, Text } from '@antscorp/antsomi-ui/es/components/atoms';
+import { Input } from 'antd';
+import { Text } from '@antscorp/antsomi-ui/es/components/atoms';
 import { AccountItem } from './components';
 import { AccountSelectionStyled } from './styled';
 import { PORTALS_IDS } from '@antscorp/antsomi-ui/es/constants';

package/es/components/molecules/EditableName/EditableName.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+export interface EditableNameHandle {
+    value: () => string;
+}
+interface EditableNameProps {
+    className?: string;
+    isLoading?: boolean;
+    defaultValue?: string;
+    required?: boolean;
+    error?: string;
+    value?: string;
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    onChange?: (value: string) => void;
+}
+export declare const EditableName: React.ForwardRefExoticComponent<EditableNameProps & React.RefAttributes<EditableNameHandle>>;
+export {};

package/es/components/molecules/EditableName/EditableName.js

@@ -0,0 +1,53 @@
+import React, { useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { InputWrapperStyled } from './styled';
+import { Input, Tooltip } from 'antd';
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import Icon from '@antscorp/icons';
+import { Spin } from '../../atoms';
+export const EditableName = React.forwardRef((props, ref) => {
+    var _a;
+    const { className, isLoading, defaultValue, required, error, value, onBlur, onChange } = props;
+    const [inputWidth, setInputWidth] = useState(1);
+    const [internalValue, setInternalValue] = useState(defaultValue || '');
+    const requiredError = useMemo(() => (required && internalValue.trim().length === 0 ? 'This field is required' : ''), [required, internalValue]);
+    const spanRef = useRef(null);
+    const inputRef = useRef(null);
+    useImperativeHandle(ref, () => ({
+        value() {
+            return internalValue;
+        },
+    }), [internalValue]);
+    const onKeyDown = (e) => {
+        var _a;
+        if (e.key === 'Enter') {
+            onChange === null || onChange === void 0 ? void 0 : onChange(e.currentTarget.value);
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+        }
+    };
+    useEffect(() => {
+        var _a;
+        if (spanRef.current) {
+            spanRef.current.innerText = value || defaultValue || '';
+            setInputWidth(((_a = spanRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 1);
+        }
+        // NOTE: the defaultValue props should need use only one time and don't change in component life circle
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return (React.createElement(InputWrapperStyled, { className: className || '' },
+        React.createElement(Tooltip, { title: value || internalValue },
+            React.createElement(Input, { ref: inputRef, style: { width: inputWidth + 2 }, defaultValue: defaultValue, value: value, onChange: event => {
+                    var _a;
+                    const newValue = event.target.value;
+                    if (spanRef.current)
+                        spanRef.current.innerText = newValue;
+                    setInputWidth(((_a = spanRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 1);
+                    setInternalValue(newValue);
+                    onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+                }, onBlur: onBlur, onKeyDown: onKeyDown })),
+        isLoading ? (React.createElement(Spin, { indicatorSize: 20, style: { paddingLeft: '5px', marginLeft: '10px' } })) : null,
+        (error || requiredError) && !isLoading ? (React.createElement("div", { className: "suffix-icon-error" },
+            React.createElement(Tooltip, { title: error || requiredError },
+                React.createElement(Icon, { type: "icon-ants-warning-circle", style: { color: '#F44336', fontSize: '19.2px' } })))) : (React.createElement("div", { className: "suffix-icon" },
+            React.createElement(Icon, { type: "icon-ants-pencil", style: { color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.blue7, fontSize: '24px' } }))),
+        React.createElement("span", { ref: spanRef, className: "hidden-span" })));
+});

package/es/components/molecules/EditableName/index.d.ts

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

package/es/components/molecules/EditableName/index.js

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

package/es/components/molecules/EditableName/styled.d.ts

@@ -0,0 +1 @@
+export declare const InputWrapperStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/molecules/EditableName/styled.js

@@ -0,0 +1,67 @@
+var _a;
+import styled from 'styled-components';
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+export const InputWrapperStyled = styled.div `
+  display: inline-block;
+  position: relative;
+  background-color: #fff;
+  border-bottom: 1px solid transparent;
+  max-width: 100%;
+
+  display: inline-flex;
+  align-items: baseline;
+
+  &:has(input:focus) {
+    border-bottom: 1px solid ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.blue1};
+  }
+
+  input {
+    font-size: 20px !important;
+    font-weight: 700;
+    min-width: 23px !important;
+    height: 30px;
+    transition: none !important;
+    padding: 5px 0 !important;
+    border: none !important;
+    text-overflow: ellipsis;
+  }
+
+  .suffix-icon-error,
+  .suffix-icon {
+    display: flex;
+    align-self: stretch;
+    align-items: center;
+    padding: 0 5px;
+    margin-left: 10px;
+  }
+
+  .suffix-icon {
+    display: none;
+  }
+
+  input:hover {
+    background-color: transparent;
+
+    & + .suffix-icon {
+      display: flex;
+    }
+  }
+
+  input:focus + .suffix-icon {
+    display: none;
+  }
+
+  .hidden-span {
+    box-sizing: border-box;
+    visibility: hidden;
+    white-space: pre;
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 30px;
+    font-family: inherit;
+    font-size: 20px;
+    font-weight: 700;
+    padding: 5px 0; /* Match the padding of the Input component */
+  }
+`;

package/es/components/molecules/index.d.ts

@@ -46,6 +46,7 @@ export * from './SelectMulti';
 export * from './SelectEventAttribute';
 export * from './DatePickerV2';
 export { ModalSelect } from './ModalSelect';
+export { EditableName } from './EditableName';
 export * from './EmptyData';
 export * from './PreviewModal';
 export * from './Drawer';
@@ -65,3 +66,4 @@ export type { SelectProps as SelectV2Props } from './SelectV2';
 export type { InputNumberProps as InputNumberWithLabelProps } from './InputNumber';
 export type { ModalSelectProps } from './ModalSelect';
 export type { ImageResizeHandle } from './ImageEditor';
+export type { EditableNameHandle } from './EditableName';

package/es/components/molecules/index.js

@@ -46,6 +46,7 @@ export * from './SelectMulti';
 export * from './SelectEventAttribute';
 export * from './DatePickerV2';
 export { ModalSelect } from './ModalSelect';
+export { EditableName } from './EditableName';
 export * from './EmptyData';
 export * from './PreviewModal';
 export * from './Drawer';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.278",
+  "version": "1.3.5-beta.280",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",