@antscorp/antsomi-ui 2.0.109 → 2.0.111

package/es/components/molecules/RichMenu/RichMenuBlock/RichMenuCell/styled.js

@@ -1,135 +1,135 @@
 // Libraries
 import styled, { css } from 'styled-components';
-export const CellContainer = styled.div `
-  width: 100%;
-  height: 100%;
-  cursor: pointer;
+export const CellContainer = styled.div `
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
 `;
-export const AddContainer = styled.div `
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-  width: 100%;
-  height: 100%;
-  padding: 8px 0px;
-  overflow: hidden;
+export const AddContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  width: 100%;
+  height: 100%;
+  padding: 8px 0px;
+  overflow: hidden;
 `;
-export const AddLabel = styled.span `
-  width: 100%;
-  padding: 0px 6px;
-
-  font-size: 10px;
-  font-weight: 400;
-  color: #000000;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  text-align: center;
-  overflow: hidden;
+export const AddLabel = styled.span `
+  width: 100%;
+  padding: 0px 6px;
+
+  font-size: 10px;
+  font-weight: 400;
+  color: #000000;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-align: center;
+  overflow: hidden;
 `;
-export const CellImage = styled.div `
-  min-height: 100%;
-  background-image: url(${({ src }) => src});
-  background-size: ${({ imageSize }) => imageSize};
-  background-position: ${({ imagePosition }) => imagePosition};
-
+export const CellImage = styled.div `
+  min-height: 100%;
+  background-image: url(${({ src }) => src});
+  background-size: ${({ imageSize }) => imageSize};
+  background-position: ${({ imagePosition }) => imagePosition};
+
   ${props => props.active &&
-    css `
-      position: relative;
-
-      &::after {
-        content: '';
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        background-color: rgba(0, 95, 184, 0.5);
-        display: block;
-      }
-    `}
+    css `
+      position: relative;
+
+      &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        background-color: rgba(0, 95, 184, 0.5);
+        display: block;
+      }
+    `}
 `;
-export const LayerVideoContainer = styled.div `
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 9999;
-  overflow: hidden;
-
+export const LayerVideoContainer = styled.div `
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9999;
+  overflow: hidden;
+
   ${props => props.active &&
-    css `
-      &::after {
-        content: '';
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        background-color: rgba(0, 95, 184, 0.5);
-        display: block;
-        z-index: 9999;
-      }
-    `}
+    css `
+      &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        background-color: rgba(0, 95, 184, 0.5);
+        display: block;
+        z-index: 9999;
+      }
+    `}
 `;
 export const Video = styled.video ``;
-export const VideoAction = styled.div `
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
-  gap: 10px;
-  z-index: 99999;
-  transform: translate(-50%, -50%);
+export const VideoAction = styled.div `
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 10px;
+  z-index: 99999;
+  transform: translate(-50%, -50%);
 `;
-export const ActionButton = styled.div `
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: auto;
+export const ActionButton = styled.div `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: auto;
 `;
-export const ThumbnailBox = styled.div `
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 9999;
+export const ThumbnailBox = styled.div `
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 9999;
 `;
-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 Link = styled.a `
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  text-decoration: none;
-  height: auto;
+export const Link = styled.a `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-decoration: none;
+  height: auto;
 `;
-export const ActionButtonLabel = styled.span `
-  font-size: 14px;
-  color: #fff;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  line-height: 18px;
-  height: 18px;
-  max-width: 300px;
+export const ActionButtonLabel = styled.span `
+  font-size: 14px;
+  color: #fff;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  line-height: 18px;
+  height: 18px;
+  max-width: 300px;
 `;
-export const CircleBorder = styled.div `
-  width: 18px;
-  height: 18px;
-  border-radius: 50%;
-  border: 1.5px solid #fff;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-left: 3px;
+export const CircleBorder = styled.div `
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  border: 1.5px solid #fff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-left: 3px;
 `;

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

@@ -1,17 +1,17 @@
 // Libraries
 import styled from 'styled-components';
-export const StyledRichMenu = styled.div `
-  display: grid;
-  width: 100%;
-  grid-gap: 1px;
-  aspect-ratio: ${({ $isCompact }) => ($isCompact ? '3 / 1' : '3/ 2')};
-  grid-template-columns: ${({ $gridTemplateCols }) => $gridTemplateCols?.map(col => col).join(' ')};
-  grid-template-rows: ${({ $gridTemplateRows }) => $gridTemplateRows?.map(row => row).join(' ')};
+export const StyledRichMenu = styled.div `
+  display: grid;
+  width: 100%;
+  grid-gap: 1px;
+  aspect-ratio: ${({ $isCompact }) => ($isCompact ? '3 / 1' : '3/ 2')};
+  grid-template-columns: ${({ $gridTemplateCols }) => $gridTemplateCols?.map(col => col).join(' ')};
+  grid-template-rows: ${({ $gridTemplateRows }) => $gridTemplateRows?.map(row => row).join(' ')};
 `;
-export const StyledCell = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  outline: 1px solid var(--primary-color);
-  cursor: pointer;
+export const StyledCell = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  outline: 1px solid var(--primary-color);
+  cursor: pointer;
 `;

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

@@ -2,46 +2,46 @@
 import styled from 'styled-components';
 // Components
 import { Flex } from '@antscorp/antsomi-ui/es/components/atoms/Flex';
-export const TypingInput = styled.input `
-  width: 100%;
-  border-radius: 18px;
-  height: 28px;
-  font-size: 15px;
-  outline: none;
-  border: none;
-  padding: 0px 30px 0px 10px;
-
-  &::placeholder {
-    color: var(--accent-5);
-  }
+export const TypingInput = styled.input `
+  width: 100%;
+  border-radius: 18px;
+  height: 28px;
+  font-size: 15px;
+  outline: none;
+  border: none;
+  padding: 0px 30px 0px 10px;
+
+  &::placeholder {
+    color: var(--accent-5);
+  }
 `;
-export const TypingWrapper = styled.div `
-  position: relative;
-  display: flex;
-  flex: 1 1 0%;
-
-  i {
-    top: 50%;
-    transform: translateY(-50%);
-    position: absolute;
-    right: 10px;
-  }
+export const TypingWrapper = styled.div `
+  position: relative;
+  display: flex;
+  flex: 1 1 0%;
+
+  i {
+    top: 50%;
+    transform: translateY(-50%);
+    position: absolute;
+    right: 10px;
+  }
 `;
-export const TypingChatWrapper = styled(Flex) `
-  width: 100%;
-  height: fit-content;
-  color: #747474;
-
-  > i {
-    cursor: pointer;
-  }
-
-  .icon-angle {
-    padding: 0 16px;
-  }
-
-  .icon-search {
-    position: relative;
-    flex-shrink: 0;
-  }
+export const TypingChatWrapper = styled(Flex) `
+  width: 100%;
+  height: fit-content;
+  color: #747474;
+
+  > i {
+    cursor: pointer;
+  }
+
+  .icon-angle {
+    padding: 0 16px;
+  }
+
+  .icon-search {
+    position: relative;
+    flex-shrink: 0;
+  }
 `;

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/SearchPopover.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { SearchPopoverProps } from './types';
-export declare const SearchPopover: (props: SearchPopoverProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SearchPopover: React.FC<SearchPopoverProps>;

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

@@ -4,8 +4,8 @@ import clsx from 'clsx';
 import { StyledInput } from './styled';
 import { translate, translations } from '@antscorp/antsomi-ui/es/locales';
 import { SearchIcon } from '../../icons';
-export const SearchPopover = (props) => {
-    const { inputSearchProps = {}, ...popoverProps } = props;
+export const SearchPopover = props => {
+    const { inputSearchProps = {}, inputSearchRef, ...popoverProps } = props;
     const { overlayClassName, arrow = false, children, content, trigger = ['click'], ...restPopoverProps } = popoverProps;
-    return (_jsx(Popover, { trigger: trigger, arrow: arrow, destroyTooltipOnHide: true, ...restPopoverProps, overlayClassName: clsx('no-padding-content', overlayClassName), overlay: true, content: _jsxs(_Fragment, { children: [_jsx(StyledInput, { placeholder: inputSearchProps?.placeholder || `${translate(translations.global.search)}`, bordered: false, ...inputSearchProps, addonAfter: _jsx(SearchIcon, {}), withWrapper: false }), content] }), children: children }));
+    return (_jsx(Popover, { trigger: trigger, arrow: arrow, destroyTooltipOnHide: true, ...restPopoverProps, overlayClassName: clsx('no-padding-content', overlayClassName), overlay: true, content: _jsxs(_Fragment, { children: [_jsx(StyledInput, { ref: inputSearchRef, placeholder: inputSearchProps?.placeholder || `${translate(translations.global.search)}`, bordered: false, ...inputSearchProps, addonAfter: _jsx(SearchIcon, {}), withWrapper: false }), content] }), children: children }));
 };

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

@@ -1,43 +1,43 @@
 import styled from 'styled-components';
 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 StyledInputValueWrapper = styled.div `
+  border-top: 1px solid var(--divider-1);
+  padding: 8px 0px;
 `;
-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 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 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 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 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;
+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.d.ts

@@ -1 +1,12 @@
-export declare const StyledInput: import("styled-components").StyledComponent<(props: any) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+/// <reference types="react" />
+export declare const StyledInput: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../atoms/Input").InputProps & import("react").RefAttributes<import("rc-input").InputRef>> & {
+    readonly DefaultInput: import("react").ForwardRefExoticComponent<import("antd").InputProps & import("react").RefAttributes<import("rc-input").InputRef>> & {
+        Group: import("react").FC<import("antd/es/input").GroupProps>;
+        Search: import("react").ForwardRefExoticComponent<import("antd/es/input").SearchProps & import("react").RefAttributes<import("rc-input").InputRef>>;
+        TextArea: import("react").ForwardRefExoticComponent<import("antd/es/input").TextAreaProps & import("react").RefAttributes<import("antd/es/input/TextArea").TextAreaRef>>;
+        Password: import("react").ForwardRefExoticComponent<import("antd/es/input").PasswordProps & import("react").RefAttributes<import("rc-input").InputRef>>;
+    };
+    readonly CustomSearch: import("react").ForwardRefExoticComponent<import("../../atoms/Input").InputProps & import("react").RefAttributes<import("rc-input").InputRef>>;
+    readonly TextArea: import("react").ForwardRefExoticComponent<import("antd/es/input").TextAreaProps & import("react").RefAttributes<import("antd/es/input/TextArea").TextAreaRef>>;
+    readonly Password: import("react").ForwardRefExoticComponent<import("../../atoms/Input").InputProps & import("react").RefAttributes<import("rc-input").InputRef>>;
+}, any, {}, never>;