@antscorp/antsomi-ui 1.3.5-beta.310 → 1.3.5-beta.312

package/es/assets/css/main.scss

@@ -1,4 +1,22 @@
 :root {
   --primary-color: #005fb8;
   --text-base-color: #222222;
-}
+
+  --border-primary: #005eb8;
+  --border-normal: #b8cfe6;
+  --border-hover: #81bcf4;
+  --border-active: #005eb8;
+  --border-disable: #d4d4d4;
+
+  --divider-1: #e5e5e5;
+  --divider-2: #d4d4d4;
+  --divider-3: #bebebe;
+}
+
+*,
+*:before,
+*:after {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}

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

@@ -5,7 +5,7 @@ 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,6 +14,7 @@ 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>> & {
     Group: React.FC<import("antd/es/input").GroupProps>;

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

@@ -24,7 +24,7 @@ import { StyledInput } from './styled';
 const PATH = '@antscorp/antsomi-ui/es/components/atoms/Input/Input.tsx';
 const OriginInput = props => {
     // 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 } = props, restProps = __rest(props, ["withWrapper", "debounce", "errorArchive", "required", "labelColor", "isReverseMask", "isHideErrMessage", "focused", "label", "onAfterChange", "onChange", "errorMsg"]);
     // State
     const [value, setValue] = useState(props.value);
     const [isFocused, setFocused] = useState(false);
@@ -76,7 +76,7 @@ const OriginInput = props => {
     if (props.disableUndo) {
         listDisableActions.push('undo');
     }
-    return (React.createElement("div", { className: "input__wrapper" },
+    const content = (React.createElement(React.Fragment, null,
         label && renderRequiredLabel(label),
         React.createElement(StyledInput, Object.assign({}, restProps, { value: value, onBlur: e => {
                 if (!isFocused) {
@@ -85,10 +85,14 @@ const OriginInput = props => {
                 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));
+    if (!withWrapper)
+        return content;
+    return React.createElement("div", { className: "input__wrapper" }, content);
 };
 OriginInput.defaultProps = {
     debounce: 400,
     isHideErrMessage: false,
+    withWrapper: true,
 };
 export const Input = OriginInput;
 Input.TextArea = StyledInput.TextArea;

package/es/components/atoms/Scrollbars/Scrollbars.js

@@ -72,9 +72,9 @@ export const Scrollbars = props => {
             // Set a minimum height for the view to ensure space for the scrollbar
             newStyle.minHeight = THUMB_SIZE;
             // If autoHeightMax is defined, adjust the maxHeight to include space for the scrollbar
-            if (autoHeightMax) {
-                newStyle.maxHeight = parseInt(`${autoHeightMax}`) + THUMB_SIZE;
-            }
+            // if (autoHeightMax) {
+            //   newStyle.maxHeight = parseInt(`${autoHeightMax}`) + THUMB_SIZE;
+            // }
             // Return a div element with the adjusted styles and original props, applying a custom class for styling
             return React.createElement("div", Object.assign({ className: "scrollbar-view" }, props, { style: newStyle }));
         }, onUpdate: onUpdate, hideTracksWhenNotNeeded: true }, restProps)));

package/es/components/molecules/HeaderV2/HeaderV2.js

@@ -10,7 +10,8 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { memo, useMemo, useState } from 'react';
-import { Link, useHistory, useLocation } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
+// Hooks
 // Styled
 import { HeaderV2Styled } from './styled';
 // Components
@@ -21,13 +22,15 @@ import { APP_CODES, APP_PERMISSION_DOMAIN, CDP_API, IAM_API, ISSUE_API, PERMISSI
 import { useContextSelector } from 'use-context-selector';
 import { AppConfigContext } from '../../..';
 import { isNil } from 'lodash';
+import { useCustomRouter } from '@antscorp/antsomi-ui/es/hooks';
 const { DATAFLOWS, APP_ANTALYSER } = APP_CODES;
 // const DOUBLE_RIGHT_POINTING = '»'
 export const HeaderV2 = memo(props => {
     var _a, _b;
     const { auth, env: envContext, languageCode = 'en', appCode: contextAppCode, urlLogout: urlLogoutProvider = '', menuCode: contextMenuCode, } = useContextSelector(AppConfigContext, state => state);
     const { search } = useLocation();
-    const history = useHistory();
+    // const history = useHistory();
+    const { navigate } = useCustomRouter();
     // * Prefer to use Header in AppConfigContext
     const { className, style, breadcrumbs, pageTitle = '', accountSelection = {}, helpConfig, notificationConfig = {}, accountSharingConfig, useURLParam, config, } = props;
     /** General config for children component */
@@ -93,7 +96,8 @@ export const HeaderV2 = memo(props => {
             else {
                 urlParams.delete('oid');
             }
-            history.replace({ search: urlParams.toString() });
+            // history.replace({ search: urlParams.toString() });
+            navigate({ search: urlParams.toString() });
         }
         onSelectAccount === null || onSelectAccount === void 0 ? void 0 : onSelectAccount(userId);
     };

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

@@ -0,0 +1,8 @@
+import React, { PropsWithChildren } from 'react';
+import { PopoverProps } from 'antd';
+import { InputProps } from '../../atoms/Input';
+import './styles.scss';
+export type SearchPopoverProps = PropsWithChildren<PopoverProps & {
+    inputSearchProps?: InputProps;
+}>;
+export declare const SearchPopover: (props: SearchPopoverProps) => React.JSX.Element;

package/es/components/molecules/SearchPopover/SearchPopover.js

@@ -0,0 +1,24 @@
+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 React from 'react';
+import { Popover } from 'antd';
+import { Input } from '../../atoms/Input';
+import Icon from '@antscorp/icons';
+import './styles.scss';
+import clsx from 'clsx';
+export const SearchPopover = (props) => {
+    const { inputSearchProps } = props, popoverProps = __rest(props, ["inputSearchProps"]);
+    const { overlayClassName, arrow = false, children, content, trigger = ['click'] } = popoverProps, restPopoverProps = __rest(popoverProps, ["overlayClassName", "arrow", "children", "content", "trigger"]);
+    return (React.createElement(Popover, Object.assign({ trigger: trigger, arrow: arrow }, restPopoverProps, { overlayClassName: clsx('search-popover-overlay', overlayClassName), overlay: true, content: React.createElement(React.Fragment, null,
+            React.createElement(Input, Object.assign({ placeholder: (inputSearchProps === null || inputSearchProps === void 0 ? void 0 : inputSearchProps.placeholder) || 'Search...', addonAfter: React.createElement(Icon, { type: "icon-ants-search-2" }), bordered: false }, inputSearchProps, { withWrapper: false })),
+            content) }), children));
+};

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

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

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

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

package/es/components/molecules/SearchPopover/styles.scss

@@ -0,0 +1,29 @@
+.search-popover-overlay {
+  &.antsomi-popover {
+    .antsomi-popover-inner {
+      padding: 0;
+
+      .antsomi-input-group-wrapper {
+        padding: 8px 10px;
+        border-bottom: 1px solid var(--divider-1);
+
+        .antsomi-input {
+          padding-left: 0;
+          padding-right: 0;
+        }
+
+        .antsomi-input-group-addon {
+          border: none;
+          background: transparent;
+          font-size: 20px;
+          padding: 0;
+
+          > i {
+            font-size: 24px;
+            color: #595959;
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { VirtualizedMenuProps } from './types';
+export declare const VirtualizedMenu: (props: VirtualizedMenuProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;

package/es/components/molecules/VirtualizedMenu/VirtualizedMenu.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { MODE } from './config';
+import { MenuInline } from './components';
+export const VirtualizedMenu = (props) => {
+    const { mode = MODE.Inline } = props;
+    let content = null;
+    switch (mode) {
+        case MODE.Inline: {
+            content = React.createElement(MenuInline, Object.assign({}, props));
+            break;
+        }
+        default:
+            break;
+    }
+    return content;
+};

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

@@ -0,0 +1,2 @@
+import { ItemType } from '../types';
+export declare const LIST_ITEMS: ItemType[];