@antscorp/antsomi-ui 1.3.6-beta.3 → 1.3.6-beta.4

package/es/components/molecules/AddDynamicContent/components/DisplayFormat/DisplayFormat.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { PayloadInfo } from '@antscorp/antsomi-ui/es/types';
 export type TDisplayFormat = 'number' | 'percentage' | 'currency' | 'datetime';
 type DisplayFormatProps = {

package/es/components/molecules/EditingListV2/EditingList.d.ts

@@ -0,0 +1,2 @@
+import { EditingListProps } from './types';
+export declare const EditingListV2: (props: EditingListProps) => import("react/jsx-runtime").JSX.Element;

package/es/components/molecules/EditingListV2/EditingList.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { Suspense } from '../../atoms';
+import { ListItem, LazyComponent } from './components';
+const { Popover } = LazyComponent;
+export const EditingListV2 = (props) => {
+    const { isLoading = false, addButtonLabel = 'Add', options = [], selected = [], removable = true, popupPlacement = 'right', className, onChange, } = props;
+    const selectedOptions = useMemo(() => options.filter(opt => selected.includes(opt.key)), [selected, options]);
+    // const isSelectAll = selectedOptions.length === options.length;
+    const handleRemove = (removedKey) => {
+        const selectedKeys = selectedOptions.filter(opt => opt.key !== removedKey).map(opt => opt.key);
+        onChange?.(selectedKeys);
+    };
+    return (_jsxs("div", { className: className, children: [_jsx(ListItem, { isLoading: isLoading, selectOptions: selectedOptions, removable: removable, onClickRemove: handleRemove }), !isLoading && (_jsx(Suspense, { children: _jsx(Popover, { placement: popupPlacement, options: options, selected: selected, addButtonLabel: addButtonLabel, onChange: onChange }) }))] }));
+};

package/es/components/molecules/EditingListV2/components/Action/Action.d.ts

@@ -0,0 +1,6 @@
+type ActionProps = {
+    removable: boolean;
+    onClickRemove: () => void;
+};
+export declare const Action: (props: ActionProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/es/components/molecules/EditingListV2/components/Action/Action.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CloseIcon } from '@antscorp/antsomi-ui/es/components/icons';
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+import { CLS } from '../../utils';
+export const Action = (props) => {
+    const { removable, onClickRemove } = props;
+    if (!removable)
+        return null;
+    return (_jsx(CloseIcon, { className: CLS.RemoveButton.default, size: 20, color: globalToken?.bw8, onClick: onClickRemove }));
+};

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

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

package/es/components/molecules/EditingListV2/components/Action/index.js

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

package/es/components/molecules/EditingListV2/components/List/List.d.ts

@@ -0,0 +1,9 @@
+import { Option } from '../../types';
+type ListProps = {
+    isLoading: boolean;
+    selectOptions: Option[];
+    removable?: boolean;
+    onClickRemove?: (key: string) => void;
+};
+export declare const ListItem: (props: ListProps) => import("react/jsx-runtime").JSX.Element | undefined;
+export {};

package/es/components/molecules/EditingListV2/components/List/List.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Spin, Typography } from '../../../../atoms';
+import { isEmpty } from 'lodash';
+import { CLS } from '../../utils';
+import { List } from 'antd';
+import { CloseIcon } from '@antscorp/antsomi-ui/es/components/icons';
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+import { useState } from 'react';
+export const ListItem = (props) => {
+    const { isLoading, selectOptions, onClickRemove, removable } = props;
+    const [hover, setHover] = useState('');
+    const renderLabel = (label) => {
+        if (typeof label === 'string') {
+            return _jsx(Typography.Text, { ellipsis: { tooltip: true }, children: label });
+        }
+        return label;
+    };
+    const items = selectOptions.map(opt => ({
+        className: CLS.ListItem.default,
+        key: opt.key,
+        label: renderLabel(opt.label),
+    }));
+    if (isLoading) {
+        return _jsx(Spin, { indicatorSize: 24 });
+    }
+    if (isEmpty(selectOptions)) {
+        return;
+    }
+    return (_jsx(List, { dataSource: items, renderItem: item => (_jsxs(List.Item, { style: {
+                display: 'flex',
+                alignItems: 'center',
+                border: '1px solid #B8CFE6',
+                borderRadius: '4px',
+                padding: '10px',
+                marginBottom: '10px',
+                minHeight: '40px',
+            }, onMouseEnter: () => setHover(item.key), onMouseLeave: () => setHover(''), children: [item.label, ' ', hover === item.key && removable && (_jsx(CloseIcon, { size: 18, color: globalToken?.bw8, style: { flexShrink: 0 }, onClick: onClickRemove ? () => onClickRemove(item.key) : undefined }))] })) }));
+};

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

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

package/es/components/molecules/EditingListV2/components/List/index.js

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

package/es/components/molecules/EditingListV2/components/Loadable.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export declare const Title: import("react").LazyExoticComponent<(props: {
+    title: import("react").ReactNode;
+    showNum: boolean;
+    selectedAmount?: number | undefined;
+    optionAmount?: number | undefined;
+}) => import("react/jsx-runtime").JSX.Element>;
+export declare const Popover: import("react").LazyExoticComponent<(props: {
+    placement?: "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | "left" | "right" | "bottom" | "top" | "bottomLeft" | "topLeft" | "topRight" | "bottomRight" | undefined;
+    options: import("../types").Option[];
+    selected: string[];
+    addButtonLabel: import("react").ReactNode;
+    onChange?: ((selected: string[]) => void) | undefined;
+}) => import("react/jsx-runtime").JSX.Element>;

package/es/components/molecules/EditingListV2/components/Loadable.js

@@ -0,0 +1,3 @@
+import { lazy } from 'react';
+export const Title = lazy(() => import('./Title').then(module => ({ default: module.Title })));
+export const Popover = lazy(() => import('./Popover').then(module => ({ default: module.Popover })));

package/es/components/molecules/EditingListV2/components/Popover/Popover.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { Option } from '../../types';
+type PopoverProps = {
+    placement?: 'left' | 'right' | 'top' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
+    options: Option[];
+    selected: string[];
+    addButtonLabel: React.ReactNode;
+    onChange?: (selected: string[]) => void;
+};
+export declare const Popover: (props: PopoverProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/es/components/molecules/EditingListV2/components/Popover/Popover.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button } from '@antscorp/antsomi-ui/es/components/atoms';
+import { AddIcon } from '../../../../icons';
+import { PopoverAddField } from '../../../SearchPopover';
+export const Popover = (props) => {
+    const { options, selected, addButtonLabel, onChange, placement } = props;
+    return (_jsx(_Fragment, { children: _jsx(PopoverAddField, { style: { margin: 0 }, fields: options, placement: placement, selected: selected, 
+            // onApply={value =>
+            //   updateUnsubscribeSetting([
+            //     {
+            //       fieldPath: 'settings.unsubscribePreferences.preferenceListIds',
+            //       data: value as unknown as string,
+            //     },
+            //   ])
+            // }
+            onApply: onChange, children: _jsxs(Button, { type: "text", children: [_jsx(AddIcon, { size: 14 }), addButtonLabel] }) }) }));
+};

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

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

package/es/components/molecules/EditingListV2/components/Popover/index.js

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

package/es/components/molecules/EditingListV2/components/Search/Search.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+type SearchProps = {} & React.ComponentProps<'input'>;
+export declare const Search: (props: SearchProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/es/components/molecules/EditingListV2/components/Search/Search.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { InputSearch } from '../../../InputSearch';
+import { CLS } from '../../utils';
+export const Search = (props) => {
+    const { className, placeholder, onChange } = props;
+    return (_jsx(InputSearch, { className: clsx(CLS.Search, className), placeholder: placeholder || 'Search...', onChange: onChange }));
+};

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

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

package/es/components/molecules/EditingListV2/components/Search/index.js

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

package/es/components/molecules/EditingListV2/components/Title/Title.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+type TitleProps = {
+    title: React.ReactNode;
+    showNum: boolean;
+    selectedAmount?: number;
+    optionAmount?: number;
+};
+export declare const Title: (props: TitleProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/es/components/molecules/EditingListV2/components/Title/Title.js

@@ -0,0 +1,16 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Flex, Typography } from 'antd';
+import { AmountSelected } from '../../styled';
+import { CLS } from '../../utils';
+export const Title = (props) => {
+    const { title, showNum } = props;
+    const renderSelectedAmount = () => {
+        if (!showNum)
+            return null;
+        const { optionAmount, selectedAmount } = props;
+        if (!optionAmount || !selectedAmount)
+            return null;
+        return (_jsxs(AmountSelected, { children: ["(", selectedAmount, "/", optionAmount, ")"] }));
+    };
+    return (_jsxs(Flex, { className: CLS.Title.default, align: "center", gap: 8, children: [_jsx(Typography.Text, { strong: true, children: title }), renderSelectedAmount()] }));
+};

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

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

package/es/components/molecules/EditingListV2/components/Title/index.js

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

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

@@ -0,0 +1,6 @@
+export { ListItem } from './List';
+export { Action } from './Action';
+export { Search } from './Search';
+export { Popover } from './Popover';
+export { Title } from './Title';
+export * as LazyComponent from './Loadable';

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

@@ -0,0 +1,6 @@
+export { ListItem } from './List';
+export { Action } from './Action';
+export { Search } from './Search';
+export { Popover } from './Popover';
+export { Title } from './Title';
+export * as LazyComponent from './Loadable';

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

@@ -0,0 +1,2 @@
+export { EditingListV2 } from './EditingList';
+export type { EditingListProps } from './types';

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

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

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const EditingListRoot: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
+export declare const StyledListWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledAddBtn: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
+export declare const AmountSelected: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/typography/Text").TextProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;

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

@@ -0,0 +1,38 @@
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+import { Flex, Typography } from 'antd';
+import styled from 'styled-components';
+import { CLS } from './utils';
+export const EditingListRoot = styled(Flex) `
+  /* height: 100%; */
+`;
+export const StyledListWrapper = styled.div `
+  /* flex: auto; */
+  /* height: auto; */
+
+  .${CLS.ListItem.default} {
+    .${CLS.RemoveButton.default} {
+      flex-shrink: 0;
+      display: none;
+    }
+
+    &:hover {
+      .${CLS.RemoveButton.default} {
+        display: block;
+      }
+    }
+  }
+`;
+export const StyledAddBtn = styled(Flex) `
+  color: ${globalToken?.colorPrimary};
+  cursor: pointer;
+  font-weight: bold;
+  align-items: center;
+  justify-content: space-between;
+  gap: 4px;
+  width: fit-content;
+`;
+export const AmountSelected = styled(Typography.Text) `
+  &.antsomi-typography {
+    font-size: 11px;
+  }
+`;

package/es/components/molecules/EditingListV2/types.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+export type Option = {
+    key: string;
+    label: React.ReactNode;
+    search?: string;
+};
+export type EditingListProps = {
+    popupPlacement?: 'left' | 'right' | 'top' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
+    addButtonLabel?: string;
+    options?: Option[];
+    selected?: string[];
+    showNum?: boolean;
+    className?: string;
+    isLoading?: boolean;
+    emptyDescription?: string;
+    removable?: boolean;
+    onChange?: (selected: string[]) => void;
+};

package/es/components/molecules/EditingListV2/types.js

@@ -0,0 +1 @@
+export {};

package/es/components/molecules/EditingListV2/utils.d.ts

@@ -0,0 +1,27 @@
+export declare const componentCls: (className: string) => string;
+export declare const CLS: {
+    readonly Root: {
+        readonly default: string;
+    };
+    readonly Title: {
+        readonly default: string;
+    };
+    readonly Search: {
+        readonly default: string;
+    };
+    readonly RemoveButton: {
+        readonly default: string;
+    };
+    readonly AddButton: {
+        readonly default: string;
+    };
+    readonly ListWapper: {
+        readonly default: string;
+    };
+    readonly List: {
+        readonly default: string;
+    };
+    readonly ListItem: {
+        readonly default: string;
+    };
+};

package/es/components/molecules/EditingListV2/utils.js

@@ -0,0 +1,28 @@
+import { antsomiClsx } from '@antscorp/antsomi-ui/es/utils';
+export const componentCls = antsomiClsx('editing-list');
+export const CLS = {
+    Root: {
+        default: componentCls('root'),
+    },
+    Title: {
+        default: componentCls('title'),
+    },
+    Search: {
+        default: componentCls('search'),
+    },
+    RemoveButton: {
+        default: componentCls('remove-btn'),
+    },
+    AddButton: {
+        default: componentCls('add-btn'),
+    },
+    ListWapper: {
+        default: componentCls('selected-list-wrapper'),
+    },
+    List: {
+        default: componentCls('selected-list'),
+    },
+    ListItem: {
+        default: componentCls('selected-list-item'),
+    },
+};

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

@@ -113,11 +113,11 @@ export const PopoverSelect = (props) => {
         key: opt.key,
         label: (_jsx(Checkbox, { onChange: e => handleToggleField(opt, e.target.checked), checked: selectedKeys.has(opt.key), children: renderCheckBoxLabel(opt) })),
     }));
-    return (_jsx(SearchPopover, { destroyTooltipOnHide: true, ...rest, content: _jsxs(_Fragment, { children: [optionsProp.length > 0 && (_jsxs(StyledAction, { children: [_jsx(Button, { type: "link", size: "small", onClick: () => setShowSelected(current => !current), children: showSelected ? showAllLabel : showSelectedLabel }), selectedKeys.size === options.length ? (_jsx(Button, { type: "link", onClick: handleDeselectAll, children: deselectAllLabel })) : (_jsx(Button, { type: "link", onClick: handleSelectAll, children: selectAllLabel }))] })), filteredOptions.length ? (_jsx(StyledListFieldsWrapper, { "$minHeight": calDefaultListHeightInPopover({
+    return (_jsx(SearchPopover, { destroyTooltipOnHide: true, placement: "bottomLeft", ...rest, content: _jsxs(_Fragment, { children: [optionsProp.length > 0 && (_jsxs(StyledAction, { children: [_jsx(Button, { type: "link", size: "small", onClick: () => setShowSelected(current => !current), children: showSelected ? showAllLabel : showSelectedLabel }), selectedKeys.size === options.length ? (_jsx(Button, { type: "link", onClick: handleDeselectAll, children: deselectAllLabel })) : (_jsx(Button, { type: "link", onClick: handleSelectAll, children: selectAllLabel }))] })), filteredOptions.length ? (_jsx(StyledListFieldsWrapper, { "$minHeight": calDefaultListHeightInPopover({
                         listLength: filteredOptions.length,
                         itemSize,
                         itemSpacing,
-                    }), children: _jsx(VirtualizedMenu, { ...menuProps, itemSize: itemSize, items: items }) })) : (_jsx(EmptyData, { showIcon: false, description: t(translations.noData).toString() })), _jsxs(StyledFooter, { children: [_jsx(Button, { onClick: handleCancel, children: "Cancel" }), _jsx(Button, { onClick: handleApply, disabled: applyDisabled, type: "primary", children: "Apply" })] })] }), trigger: ['click'], placement: "bottomLeft", open: open, inputSearchProps: {
+                    }), children: _jsx(VirtualizedMenu, { ...menuProps, itemSize: itemSize, items: items }) })) : (_jsx(EmptyData, { showIcon: false, description: t(translations.noData).toString() })), _jsxs(StyledFooter, { children: [_jsx(Button, { onClick: handleCancel, children: "Cancel" }), _jsx(Button, { onClick: handleApply, disabled: applyDisabled, type: "primary", children: "Apply" })] })] }), trigger: ['click'], open: open, inputSearchProps: {
             ...restInputSearchProps,
             value: search,
             onAfterChange: handleOnSearch,

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

@@ -6,6 +6,7 @@ export { Select } from './Select';
 export { SelectV2 } from './SelectV2';
 export { DatePicker } from './DatePicker';
 export { ChatBox, ChatBoxInsight } from './ChatBox';
+export { EditingListV2 } from './EditingListV2';
 export { PopupDraggable } from './PopupDraggable';
 export { CaptureScreen } from './CaptureScreen';
 export { SettingWrapper } from './SettingWrapper';

package/es/components/molecules/index.js

@@ -6,6 +6,7 @@ export { Select } from './Select';
 export { SelectV2 } from './SelectV2';
 export { DatePicker } from './DatePicker';
 export { ChatBox, ChatBoxInsight } from './ChatBox';
+export { EditingListV2 } from './EditingListV2';
 export { PopupDraggable } from './PopupDraggable';
 export { CaptureScreen } from './CaptureScreen';
 export { SettingWrapper } from './SettingWrapper';

package/es/components/template/TemplateListing/Loadable.d.ts

@@ -3,4 +3,5 @@
  * Asynchronously loads the component for TemplateListing
  *
  */
+/// <reference types="react" />
 export declare const TemplateListing: (props: import("./types").TemplateListingProps<{}>) => JSX.Element;

package/package.json

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