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

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,4 +1,21 @@
 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 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;

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/organism/PreviewCollections/WhatsappMessage/CarouselMessage/index.js

@@ -27,44 +27,43 @@ export default React.memo((props) => {
     // Refs
     const navigationPrevRef = useRef(null);
     const navigationNextRef = useRef(null);
-    const initTimerRef = useRef(null);
+    const isInitializedRef = useRef(false);
+    const onBeforeInit = (swiper) => {
+        if (isInitializedRef.current)
+            return;
+        if (swiper.params.navigation && typeof swiper.params.navigation !== 'boolean') {
+            if (navigationPrevRef.current && navigationNextRef.current) {
+                swiper.params.navigation.prevEl = navigationPrevRef.current;
+                swiper.params.navigation.nextEl = navigationNextRef.current;
+                try {
+                    swiper.navigation.destroy();
+                    swiper.navigation.init();
+                    swiper.navigation.update();
+                    isInitializedRef.current = true;
+                }
+                catch (error) {
+                    console.error('Swiper navigation initialization failed:', error);
+                }
+            }
+        }
+    };
     const renderCarouseMessage = useCallback((cards) => {
         if (cards.length === 0)
             return null;
-        return (_jsxs(CarouselMessageContainer, { className: cls('carousel-message'), children: [_jsx(Swiper, { virtual: true, grabCursor: true, freeMode: true, slidesPerView: 1, spaceBetween: 10, modules: [Virtual, Navigation, A11y], className: "carousel-message-swiper", navigation: {
+        return (_jsxs(CarouselMessageContainer, { className: cls('carousel-message'), children: [_jsx("div", { ref: navigationPrevRef, className: classNames({ 'carousel-button-prev': true }), children: _jsx(Icon, { type: "icon-ants-expand-more" }) }), _jsx("div", { ref: navigationNextRef, className: classNames({ 'carousel-button-next': true }), children: _jsx(Icon, { type: "icon-ants-expand-more" }) }), _jsx(Swiper, { virtual: true, grabCursor: true, freeMode: true, slidesPerView: 1, spaceBetween: 10, modules: [Virtual, Navigation, A11y], className: "carousel-message-swiper", navigation: {
                         prevEl: navigationPrevRef.current,
                         nextEl: navigationNextRef.current,
-                    }, onBeforeInit: swiper => {
-                        if (initTimerRef.current) {
-                            clearTimeout(initTimerRef.current);
-                        }
-                        initTimerRef.current = setTimeout(() => {
-                            // Override prevEl & nextEl now that refs are defined
-                            if (swiper.params.navigation && typeof swiper.params.navigation !== 'boolean') {
-                                swiper.params.navigation.prevEl = navigationPrevRef.current;
-                                swiper.params.navigation.nextEl = navigationNextRef.current;
-                                // Re-init navigation
-                                swiper.navigation.destroy();
-                                swiper.navigation.init();
-                                swiper.navigation.update();
-                            }
-                        });
-                    }, children: cards.map((message, cardIdx) => {
+                    }, onBeforeInit: onBeforeInit, children: cards.map((message, cardIdx) => {
                         const { header, body, buttons } = message;
                         const isHeaderTxt = header?.format === 'TEXT';
                         const isDoc = header?.format === 'DOCUMENT';
                         const isFixed = isFixedMedia(header?.format);
                         const fixedSrc = header?.format ? MEDIA[header.format] : null;
-                        return (_jsx(SwiperSlideItem, { virtualIndex: cardIdx, children: _jsx(SkeletonMessage, { size: "large", messagePadding: 0, 
-                                // messageMargin={getMarginMessage({
-                                //   isFirst: isFirstMessage,
-                                //   isLast: isLastMessage,
-                                // })}
-                                styles: {
+                        return (_jsx(SwiperSlideItem, { virtualIndex: cardIdx, children: _jsx(SkeletonMessage, { size: "large", messagePadding: 0, styles: {
                                     header: headerStyle,
                                     body: bodyStyle,
                                 }, media: isFixed ? (_jsx(MediaMessage, { src: isFixed ? fixedSrc : null, format: header?.format })) : null, header: isHeaderTxt || isDoc ? _jsx(HeaderMessage, { ...header }) : null, body: _jsx(BodyMessage, { ...body }), footer: _jsx(FooterMessage, { buttons: buttons }) }) }, cardIdx));
-                    }) }), _jsx("div", { ref: navigationPrevRef, className: classNames({ 'carousel-button-prev': true }), children: _jsx(Icon, { type: "icon-ants-expand-more" }) }), _jsx("div", { ref: navigationNextRef, className: classNames({ 'carousel-button-next': true }), children: _jsx(Icon, { type: "icon-ants-expand-more" }) })] }));
+                    }) })] }));
     }, []);
     return (_jsxs("div", { children: [_jsx("div", { style: { marginLeft: MARGIN_MESSAGE, marginBottom: MARGIN_MESSAGE }, children: _jsx(PureMessage, { size: "medium", ellipsis: { rows: 3, tooltip: true }, content: body.text }) }), renderCarouseMessage(carousel?.cards || [])] }));
 });

package/package.json

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