@antscorp/antsomi-ui 1.3.5-beta.679 → 1.3.5-beta.680

package/es/components/icons/LazyIcon/LazyIcon.d.ts

@@ -204,6 +204,7 @@ export declare const LazyIcon: {
         backgroundColor?: string | undefined;
     } & import("react").RefAttributes<SVGSVGElement>>>;
     LocalMallIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
+    LongerIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     MapIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     MarkAsReadIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     MarketingHub30Icon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;

package/es/components/icons/LazyIcon/LazyIcon.js

@@ -208,6 +208,7 @@ export const LazyIcon = {
     ListIcon: lazy(() => import('../ListIcon').then(m => ({ default: m.ListIcon }))),
     LoadingIcon: lazy(() => import('../LoadingIcon').then(m => ({ default: m.LoadingIcon }))),
     LocalMallIcon: lazy(() => import('../LocalMallIcon').then(m => ({ default: m.LocalMallIcon }))),
+    LongerIcon: lazy(() => import('../LongerIcon').then(m => ({ default: m.LongerIcon }))),
     MapIcon: lazy(() => import('../MapIcon').then(m => ({ default: m.MapIcon }))),
     MarkAsReadIcon: lazy(() => import('../MarkAsReadIcon').then(m => ({ default: m.MarkAsReadIcon }))),
     MarketingHub30Icon: lazy(() => import('../MarketingHub30Icon').then(m => ({ default: m.MarketingHub30Icon }))),

package/es/components/icons/LongerIcon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IconProps } from './types';
+export declare const LongerIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;

package/es/components/icons/LongerIcon.js

@@ -0,0 +1,7 @@
+import React, { forwardRef } from 'react';
+import { useIcon } from './hooks/useIcon';
+export const LongerIcon = forwardRef((props, ref) => {
+    const { width, height } = useIcon(props);
+    return (React.createElement("svg", Object.assign({ viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { ref: ref, width: width, height: height }),
+        React.createElement("path", { d: "M14.0156 17.0156V18.9844H3.98438V17.0156H14.0156ZM20.0156 9V11.0156H3.98438V9H20.0156ZM3.98438 15V12.9844H20.0156V15H3.98438ZM3.98438 5.01562H20.0156V6.98438H3.98438V5.01562Z", fill: "currentColor" })));
+});

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

@@ -200,6 +200,7 @@ export { LinkManagementIcon } from './LinkManagementIcon';
 export { ListIcon } from './ListIcon';
 export { LoadingIcon } from './LoadingIcon';
 export { LocalMallIcon } from './LocalMallIcon';
+export { LongerIcon } from './LongerIcon';
 export { MapIcon } from './MapIcon';
 export { MarkAsReadIcon } from './MarkAsReadIcon';
 export { MarketingHub30Icon } from './MarketingHub30Icon';

package/es/components/icons/index.js

@@ -200,6 +200,7 @@ export { LinkManagementIcon } from './LinkManagementIcon';
 export { ListIcon } from './ListIcon';
 export { LoadingIcon } from './LoadingIcon';
 export { LocalMallIcon } from './LocalMallIcon';
+export { LongerIcon } from './LongerIcon';
 export { MapIcon } from './MapIcon';
 export { MarkAsReadIcon } from './MarkAsReadIcon';
 export { MarketingHub30Icon } from './MarketingHub30Icon';

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

@@ -9,7 +9,8 @@ import { EMPTY_ICON_SIZE, EMPTY_WRAPPER_SIZE } from './constants';
 export const EmptyWrapper = styled(Flex) `
   width: 100%;
   height: 100%;
-  padding: 20px;
+  padding: 20px 0px;
+  text-align: center;
 
   .title {
     font-size: 14px;

package/es/components/molecules/MatchAnySelect/MatchesAnySelect.js

@@ -45,11 +45,13 @@ const { t } = i18nInstance;
 const { Text } = Typography;
 export function MatchesAny(props) {
     // Props
-    const { objectName, loading = false, showExtendValue = true, items, groupSelectProps, renderExtraValues, customItemRenders, onApply = () => { }, onCancel = () => { }, onLoadMore = () => { }, onChangeSearch } = props, restOfProps = __rest(props, ["objectName", "loading", "showExtendValue", "items", "groupSelectProps", "renderExtraValues", "customItemRenders", "onApply", "onCancel", "onLoadMore", "onChangeSearch"]);
+    const { objectName, loading = false, showExtendValue = true, items, groupSelectProps, renderExtraValues, customItemRenders, listEmptyProps, selectedListEmptyProps, onApply = () => { }, onCancel = () => { }, onLoadMore = () => { }, onChangeSearch } = props, restOfProps = __rest(props, ["objectName", "loading", "showExtendValue", "items", "groupSelectProps", "renderExtraValues", "customItemRenders", "listEmptyProps", "selectedListEmptyProps", "onApply", "onCancel", "onLoadMore", "onChangeSearch"]);
     // State
     const [state, setState] = useState(matchesAnyInitialState);
     // Variables
     const { searchValue, selectedItems, isShowLoadMoreEl } = state;
+    const _a = listEmptyProps || {}, { icon: listEmptyIcon, description: listEmptyDescription = t(translations.global.noResultsMatchesKeyWord).toString() } = _a, restListEmptyProps = __rest(_a, ["icon", "description"]);
+    const _b = selectedListEmptyProps || {}, { description: selectedListEmptyDescription = t(translations.global.selectItemsFromList).toString(), icon: selectedListEmptyIcon = React.createElement(DataIcon, { color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw5, size: 48 }) } = _b, restSelectedListEmptyProps = __rest(_b, ["description", "icon"]);
     // Refs
     const { ref: loadMoreRef } = useIntersectionObserver({
         threshold: 0,
@@ -267,14 +269,14 @@ export function MatchesAny(props) {
                                     transform: props.expanded ? 'rotate(0)' : 'rotate(-90deg)',
                                     transition: 'transform 0.3s ease',
                                 }, color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8 })) }),
-                        isShowLoadMoreEl && React.createElement("div", { ref: loadMoreRef }))) : (React.createElement(EmptyData, { showIcon: false, description: t(translations.global.noResultsMatchesKeyWord).toString() })))))));
+                        isShowLoadMoreEl && React.createElement("div", { ref: loadMoreRef }))) : (React.createElement(EmptyData, Object.assign({ icon: listEmptyIcon, showIcon: !!listEmptyIcon, description: listEmptyDescription }, restListEmptyProps))))))));
     };
     const renderSelectedList = () => (React.createElement("div", { className: "matches-any__section" },
         React.createElement(Flex, { className: "matches-any__header", justify: "space-between" },
             React.createElement(Text, { strong: true }, `${t(translations.global.selected)} (${(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) || 0})`),
             React.createElement(TextButton, { disabled: isDisableRemoveAll, onClick: onRemoveAll }, t(translations.global.removeAll).toString())),
         React.createElement("div", { className: "matches-any__body" },
-            React.createElement(Scrollbars, { style: { height: '100%' } }, !(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) ? (React.createElement(EmptyData, { icon: React.createElement(DataIcon, { color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw5, size: 48 }), description: t(translations.global.selectItemsFromList).toString() })) : (React.createElement(StyledTree, { selectable: false, treeData: selectedTreeData, switcherIcon: props => (React.createElement(Icon, { type: "icon-ants-caret-down", style: {
+            React.createElement(Scrollbars, { style: { height: '100%' } }, !(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) ? (React.createElement(EmptyData, Object.assign({ icon: selectedListEmptyIcon, description: selectedListEmptyDescription }, restSelectedListEmptyProps))) : (React.createElement(StyledTree, { selectable: false, treeData: selectedTreeData, switcherIcon: props => (React.createElement(Icon, { type: "icon-ants-caret-down", style: {
                         transform: props.expanded ? 'rotate(0)' : 'rotate(-90deg)',
                         transition: 'transform 0.3s ease',
                     }, color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8 })) }))))));
@@ -307,7 +309,7 @@ export function MatchesAny(props) {
 }
 export function MatchesAnySelect(props) {
     var _a, _b, _c;
-    const { placeholder = 'Select an item', dropdownStyle, objectName, selectedItems, items, loading, popupClassName, groupSelectProps, renderExtraValues, customItemRenders, popoverProps, onChangeSearch, onChange = () => { }, onLoadMore } = props, restProps = __rest(props, ["placeholder", "dropdownStyle", "objectName", "selectedItems", "items", "loading", "popupClassName", "groupSelectProps", "renderExtraValues", "customItemRenders", "popoverProps", "onChangeSearch", "onChange", "onLoadMore"]);
+    const { placeholder = 'Select an item', dropdownStyle, objectName, selectedItems, items, loading, popupClassName, groupSelectProps, renderExtraValues, customItemRenders, popoverProps, listEmptyProps, selectedListEmptyProps, onChangeSearch, onChange = () => { }, onLoadMore } = props, restProps = __rest(props, ["placeholder", "dropdownStyle", "objectName", "selectedItems", "items", "loading", "popupClassName", "groupSelectProps", "renderExtraValues", "customItemRenders", "popoverProps", "listEmptyProps", "selectedListEmptyProps", "onChangeSearch", "onChange", "onLoadMore"]);
     // State
     const [state, setState] = useState(initialState);
     // Variables
@@ -320,7 +322,7 @@ export function MatchesAnySelect(props) {
         onChange(selectedItems);
         setState(prev => (Object.assign(Object.assign({}, prev), { isOpenPopover: false })));
     };
-    return (React.createElement(Popover, Object.assign({ open: isOpenPopover, arrow: false, placement: "bottomLeft", content: React.createElement(MatchesAny, { className: popupClassName, items: items, selectedItems: selectedItems, loading: loading, objectName: objectName, groupSelectProps: groupSelectProps, renderExtraValues: renderExtraValues, customItemRenders: customItemRenders, onChangeSearch: onChangeSearch, onApply: onApplyMatchesAny, onCancel: () => setState(prev => (Object.assign(Object.assign({}, prev), { isOpenPopover: false }))), onLoadMore: onLoadMore }), align: {
+    return (React.createElement(Popover, Object.assign({ open: isOpenPopover, arrow: false, placement: "bottomLeft", content: React.createElement(MatchesAny, { className: popupClassName, items: items, selectedItems: selectedItems, loading: loading, objectName: objectName, groupSelectProps: groupSelectProps, renderExtraValues: renderExtraValues, customItemRenders: customItemRenders, listEmptyProps: listEmptyProps, selectedListEmptyProps: selectedListEmptyProps, onChangeSearch: onChangeSearch, onApply: onApplyMatchesAny, onCancel: () => setState(prev => (Object.assign(Object.assign({}, prev), { isOpenPopover: false }))), onLoadMore: onLoadMore }), align: {
             overflow: {
                 shiftY: 0,
                 shiftX: 0,

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

@@ -1,6 +1,6 @@
 import { TreeDataNode } from 'antd';
 import { ReactNode } from 'react';
-import type { SelectProps } from '@antscorp/antsomi-ui/es/components/molecules';
+import type { EmptyDataProps, SelectProps } from '@antscorp/antsomi-ui/es/components/molecules';
 import type { FlexProps, PopoverProps } from '@antscorp/antsomi-ui/es/components/atoms';
 import { PopoverSelectProps } from '../SearchPopover/types';
 export type MatchesAnyItem<TItem = Record<string, any>> = TreeDataNode & {
@@ -44,6 +44,10 @@ export interface MatchesAnySelectProps<TItem = Record<string, any>> extends Sele
     customItemRenders?: CustomItemRenders<TItem>;
     /** Popover Props */
     popoverProps?: Partial<PopoverProps>;
+    /** Empty UI for list items */
+    listEmptyProps?: EmptyDataProps;
+    /** Empty UI for selected list items */
+    selectedListEmptyProps?: EmptyDataProps;
     /** Callback function that is called when the selected items change. */
     onChange?: (selectedItems: MatchesAnyItem<TItem>[]) => void;
     /** Callback function that is called when the search value changes */
@@ -51,7 +55,7 @@ export interface MatchesAnySelectProps<TItem = Record<string, any>> extends Sele
     /** Callback function that is called when the user scroll */
     onLoadMore?: () => void;
 }
-export interface MatchesAnyProps<TItem = Record<string, any>> extends Omit<FlexProps, 'children'>, Pick<MatchesAnySelectProps<TItem>, 'objectName' | 'loading' | 'showExtendValue' | 'items' | 'selectedItems' | 'onLoadMore' | 'groupSelectProps' | 'onChangeSearch' | 'renderExtraValues' | 'customItemRenders'> {
+export interface MatchesAnyProps<TItem = Record<string, any>> extends Omit<FlexProps, 'children'>, Pick<MatchesAnySelectProps<TItem>, 'objectName' | 'loading' | 'showExtendValue' | 'items' | 'selectedItems' | 'onLoadMore' | 'groupSelectProps' | 'onChangeSearch' | 'renderExtraValues' | 'customItemRenders' | 'listEmptyProps' | 'selectedListEmptyProps'> {
     /**
      * Callback function that is called when the apply action is triggered.
      *

package/package.json

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