@antscorp/antsomi-ui 1.3.6-beta.63 → 1.3.6-beta.64

package/es/components/molecules/RichMenu/RichMenuChatBar/styled.js

@@ -2,34 +2,34 @@
 import styled, { css } from 'styled-components';
 // Components
 import { Flex } from '@antscorp/antsomi-ui/es/components/atoms/Flex';
-export const ChatBarWrapper = styled(Flex) `
-  position: relative;
-  height: ${props => (props.$size === 'medium' ? 65 : 84)}px;
-  padding: 10px 20px;
-  background-color: #fff;
-  z-index: 10;
-
-  ${({ $disabled }) => css `
-    pointer-events: ${$disabled ? 'none' : 'auto'};
-  `}
-
-  .icon-caret {
-    transition: all 300ms;
-    ${({ $showRichMenu }) => css `
-      transform: ${$showRichMenu ? 'rotate(0deg)' : 'rotate(180deg)'};
-    `}
-  }
-
-  .icon-keyboard {
-    cursor: pointer;
-  }
+export const ChatBarWrapper = styled(Flex) `
+  position: relative;
+  height: ${props => (props.$size === 'medium' ? 65 : 84)}px;
+  padding: 10px 20px;
+  background-color: #fff;
+  z-index: 10;
+
+  ${({ $disabled }) => css `
+    pointer-events: ${$disabled ? 'none' : 'auto'};
+  `}
+
+  .icon-caret {
+    transition: all 300ms;
+    ${({ $showRichMenu }) => css `
+      transform: ${$showRichMenu ? 'rotate(0deg)' : 'rotate(180deg)'};
+    `}
+  }
+
+  .icon-keyboard {
+    cursor: pointer;
+  }
 `;
-export const ChatBarMenuBox = styled(Flex) `
-  position: absolute;
-  transform: translateX(-50%);
-  top: 10px;
-  left: 50%;
-  cursor: pointer;
+export const ChatBarMenuBox = styled(Flex) `
+  position: absolute;
+  transform: translateX(-50%);
+  top: 10px;
+  left: 50%;
+  cursor: pointer;
 `;
 ChatBarMenuBox.defaultProps = {
     align: 'center',

package/es/components/molecules/RichMenu/RichMenuMobileView/RichMenuMobileView.js

@@ -28,7 +28,7 @@ export const RichMenuMobileView = props => {
                                             width: 20,
                                             height: 20,
                                         }, children: _jsx(Image, { src: TailMessage, alt: "tail decorator", style: { objectFit: 'contain' } }) }), _jsx(Message, { children: messagePreview?.text ||
-                                            `Antsomi CDP 365 helps businesses decode their customer data, understand the
-nuances of their customer lifecycles, and act on them – 24 hours a day, 365 days a
+                                            `Antsomi CDP 365 helps businesses decode their customer data, understand the
+nuances of their customer lifecycles, and act on them – 24 hours a day, 365 days a
 year.` })] })] }))] })), _jsxs(MobileContent, { children: [_jsx(RichMenuWrapper, { "$showRichMenu": showRichMenu && !showTypingChat, "$isPreview": !!isPreview, children: richMenu && (_jsx(RichMenuBlock, { richMenu: richMenu, isPreview: isPreview, onChange: onChangeRichMenu, onClickCell: onClickCell, reCalculateFlag: reCalculateFlag })) }), _jsx(RichMenuChatBar, { disabled: !isPreview, label: richMenu?.chatBar.label, size: size, showRichMenu: showRichMenu, showTypingChat: showTypingChat, onToggleRichMenu: showRichMenu => setState(prevState => ({ ...prevState, showRichMenu: !!showRichMenu })), onToggleTypingChat: showTypingChat => setState(prevState => ({ ...prevState, showTypingChat: !!showTypingChat })) })] })] }));
 };

package/es/components/molecules/RichMenu/RichMenuMobileView/styled.js

@@ -2,49 +2,49 @@
 import styled, { css } from 'styled-components';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
-export const MobileContent = styled.div `
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-
-  .antsomi-chat-bar {
-    background-color: #f8f8f8;
-  }
+export const MobileContent = styled.div `
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+
+  .antsomi-chat-bar {
+    background-color: #f8f8f8;
+  }
 `;
-export const RichMenuWrapper = styled.div `
-  transition: all 200ms;
-
-  ${({ $showRichMenu, $isPreview }) => css `
-    transform: ${$showRichMenu ? 'translateY(0)' : 'translateY(101%)'};
-    pointer-events: ${$isPreview ? 'none' : 'auto'};
-  `}
+export const RichMenuWrapper = styled.div `
+  transition: all 200ms;
+
+  ${({ $showRichMenu, $isPreview }) => css `
+    transform: ${$showRichMenu ? 'translateY(0)' : 'translateY(101%)'};
+    pointer-events: ${$isPreview ? 'none' : 'auto'};
+  `}
 `;
 export const TopBar = styled.img ``;
-export const MessageBox = styled.div `
-  display: flex;
-  gap: 10px;
-  margin: 15px 9px 0px 8px;
+export const MessageBox = styled.div `
+  display: flex;
+  gap: 10px;
+  margin: 15px 9px 0px 8px;
 `;
-export const Profile = styled.div `
-  width: 24px;
-  height: 24px;
+export const Profile = styled.div `
+  width: 24px;
+  height: 24px;
 `;
-export const Image = styled.img `
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
+export const Image = styled.img `
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 `;
-export const Message = styled.div `
-  color: rgba(37, 37, 37, 1);
-  font-size: ${THEME.token?.fontSize}px;
-  line-height: 16px;
+export const Message = styled.div `
+  color: rgba(37, 37, 37, 1);
+  font-size: ${THEME.token?.fontSize}px;
+  line-height: 16px;
 `;
-export const MessageWrapper = styled.div `
-  position: relative;
-  flex: 1;
-  padding: 10px;
-  background-color: rgba(229, 229, 234, 1);
-  border-radius: 15px;
-  color: rgba(229, 229, 234, 1);
-  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+export const MessageWrapper = styled.div `
+  position: relative;
+  flex: 1;
+  padding: 10px;
+  background-color: rgba(229, 229, 234, 1);
+  border-radius: 15px;
+  color: rgba(229, 229, 234, 1);
+  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
 `;

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

@@ -5,7 +5,7 @@ import './styles.scss';
 import { Button } from '../../../../atoms/Button';
 import { Checkbox } from '../../../../atoms/Checkbox';
 import { Typography } from '../../../../atoms/Typography';
-import { StyledAction, StyledFooter, StyledListFieldsWrapper } from './styled';
+import { StyledAction, StyledFooter, StyledInputValue, StyledInputValueWrapper, StyledListFieldsWrapper, } from './styled';
 import { EmptyData } from '../../../EmptyData';
 import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
 import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
@@ -14,7 +14,7 @@ import { VirtualizedMenu } from '../../../VirtualizedMenu';
 import { ITEM_SIZE, ITEM_SPACING } from '../../../VirtualizedMenu/config';
 const { t } = i18nInstance;
 export const PopoverSelect = (props) => {
-    const { open: openProp, selected, options: optionsProp = [], inputSearchProps = {}, children, showAllLabel = 'Show all', showSelectedLabel = 'Show selected', selectAllLabel = 'Select all', deselectAllLabel = 'Unselect all', menuProps = {}, isAllowEmpty = false, onCancel, onApply, onSearchPredicate, ...rest } = props;
+    const { open: openProp, selected, options: optionsProp = [], inputSearchProps = {}, children, showAllLabel = 'Show all', showSelectedLabel = 'Show selected', selectAllLabel = 'Select all', deselectAllLabel = 'Unselect all', menuProps = {}, isAllowEmpty = false, inputValue = false, onCancel, onApply, onSearchPredicate, onClickInputValue, ...rest } = props;
     const itemSize = menuProps.itemSize || ITEM_SIZE;
     const itemSpacing = menuProps.itemSpacing || ITEM_SPACING;
     const { value: searchValue, searchConfig, ...restInputSearchProps } = inputSearchProps;
@@ -101,6 +101,12 @@ export const PopoverSelect = (props) => {
     const handleOpenChange = (visible) => {
         setOpen(visible);
     };
+    const handleInputValue = () => {
+        if (typeof onClickInputValue === 'function') {
+            onClickInputValue();
+        }
+        setOpen(false);
+    };
     const renderCheckBoxLabel = (option) => {
         if (typeof option.label === 'function') {
             return option.label({ selected: selectedKeys.has(option.key) });
@@ -117,7 +123,7 @@ export const PopoverSelect = (props) => {
                         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'], open: open, inputSearchProps: {
+                    }), children: _jsx(VirtualizedMenu, { ...menuProps, itemSize: itemSize, items: items }) })) : (_jsx(EmptyData, { showIcon: false, description: t(translations.noData).toString() })), inputValue && (_jsx(StyledInputValueWrapper, { children: _jsx(StyledInputValue, { onClick: handleInputValue, children: "Input value" }) })), _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/SearchPopover/components/PopoverSelect/styled.d.ts

@@ -1,3 +1,5 @@
+export declare const StyledInputValueWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledInputValue: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledAction: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledListFieldsWrapper: import("styled-components").StyledComponent<"div", any, {

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

@@ -1,26 +1,43 @@
 import styled from 'styled-components';
-export const StyledFooter = styled.div `
-  gap: 10px;
-  padding: 10px;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  border-top: 1px solid var(--divider-1);
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+export const StyledInputValueWrapper = styled.div `
+  border-top: 1px solid var(--divider-1);
+  padding: 8px 0px;
 `;
-export const StyledAction = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-  padding: 5px 0px;
-
-  > button {
-    height: 30px;
-    padding: 0 10px;
-  }
+export const StyledInputValue = styled.div `
+  height: 30px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  padding: 0 10px;
+  cursor: pointer;
+
+  &:hover {
+    background-color: ${THEME?.components?.Menu?.itemHoverBg};
+  }
 `;
-export const StyledListFieldsWrapper = styled.div `
-  min-height: ${props => props.$minHeight}px;
-  min-width: 300px;
-  flex: 1;
+export const StyledFooter = styled.div `
+  gap: 10px;
+  padding: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  border-top: 1px solid var(--divider-1);
+`;
+export const StyledAction = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 5px 0px;
+
+  > button {
+    height: 30px;
+    padding: 0 10px;
+  }
+`;
+export const StyledListFieldsWrapper = styled.div `
+  min-height: ${props => props.$minHeight}px;
+  min-width: 300px;
+  flex: 1;
 `;

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

@@ -1,7 +1,7 @@
-.search-popover-overlay {
-  &.antsomi-popover {
-    .antsomi-popover-inner {
-      min-width: 300px;
-    }
-  }
-}
+.search-popover-overlay {
+  &.antsomi-popover {
+    .antsomi-popover-inner {
+      min-width: 300px;
+    }
+  }
+}

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

@@ -2,36 +2,36 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import styled from 'styled-components';
 import { Input } from '../../atoms/Input';
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
-export const StyledInput = styled(props => _jsx(Input, { ...props })) `
-  &.antsomi-input-group-wrapper {
-    padding: 8px 10px;
-    border-bottom: 1px solid var(--divider-1);
-
-    .antsomi-input-wrapper {
-      display: flex;
-      align-items: center;
-      gap: 4px;
-
-      .antsomi-input {
-        padding-left: 0;
-        padding-right: 0;
-      }
-
-      .antsomi-input-group-addon {
-        display: flex;
-        align-items: center;
-        border: none;
-        background: transparent;
-        font-size: 20px;
-        padding: 0;
-        min-width: 25px;
-
-        > svg {
-          font-size: 24px;
-          color: ${THEME.token?.colorIcon};
-          cursor: pointer;
-        }
-      }
-    }
-  }
+export const StyledInput = styled(props => _jsx(Input, { ...props })) `
+  &.antsomi-input-group-wrapper {
+    padding: 8px 10px;
+    border-bottom: 1px solid var(--divider-1);
+
+    .antsomi-input-wrapper {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+
+      .antsomi-input {
+        padding-left: 0;
+        padding-right: 0;
+      }
+
+      .antsomi-input-group-addon {
+        display: flex;
+        align-items: center;
+        border: none;
+        background: transparent;
+        font-size: 20px;
+        padding: 0;
+        min-width: 25px;
+
+        > svg {
+          font-size: 24px;
+          color: ${THEME.token?.colorIcon};
+          cursor: pointer;
+        }
+      }
+    }
+  }
 `;

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

@@ -32,9 +32,11 @@ export type PopoverSelectProps<TOption extends Option = Option> = SearchPopoverP
     deselectAllLabel: string;
     selectAllLabel: string;
     menuProps: Pick<MenuInlineProps, 'onClick' | 'inlineIndent' | 'inlinePadding' | 'itemSpacing' | 'className' | 'itemSize'>;
+    inputValue?: boolean;
     onSearchPredicate: (option: Option) => boolean;
     onCancel: () => void;
     onApply: (selected: string[]) => void;
+    onClickInputValue?: () => void;
 }>;
 export type PopoverAddFieldProps = Omit<PopoverSelectProps, 'options'> & {
     fields: Field[];

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

@@ -4,37 +4,37 @@ import styled from 'styled-components';
 import { Tag } from '../../atoms/Tag';
 // Constants
 import { THEME } from '../../../constants';
-export const StyledTag = styled(Tag) `
-  position: relative;
-  background-color: ${THEME.token?.blue2} !important;
-  padding: 3px 10px !important;
-  margin: 0px !important;
-  border-radius: 15px !important;
-  border: none !important;
-  font-size: ${THEME.token?.fontSize}px !important;
-
-  .antsomi-tag-close-icon {
-    opacity: 0;
-    transition: all 0.3s;
-  }
-
-  &:hover {
-    .antsomi-tag-close-icon {
-      opacity: 1;
-    }
-  }
+export const StyledTag = styled(Tag) `
+  position: relative;
+  background-color: ${THEME.token?.blue2} !important;
+  padding: 3px 10px !important;
+  margin: 0px !important;
+  border-radius: 15px !important;
+  border: none !important;
+  font-size: ${THEME.token?.fontSize}px !important;
+
+  .antsomi-tag-close-icon {
+    opacity: 0;
+    transition: all 0.3s;
+  }
+
+  &:hover {
+    .antsomi-tag-close-icon {
+      opacity: 1;
+    }
+  }
 `;
-export const TagCloseBtn = styled.div `
-  position: absolute;
-  top: 3px;
-  right: 3px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 16px;
-  height: 16px;
-  border-radius: 100%;
-  border: 2.5px solid ${p => (p.borderColor ? p.borderColor : '#cae5fe')};
-  background-color: #fff;
-  color: ${THEME.token?.colorPrimary};
+export const TagCloseBtn = styled.div `
+  position: absolute;
+  top: 3px;
+  right: 3px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border-radius: 100%;
+  border: 2.5px solid ${p => (p.borderColor ? p.borderColor : '#cae5fe')};
+  background-color: #fff;
+  color: ${THEME.token?.colorPrimary};
 `;