@antscorp/antsomi-ui 2.0.65 → 2.0.66

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

@@ -3,7 +3,7 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import { SearchPopover } from '../../SearchPopover';
 import './styles.scss';
 import { Button, Checkbox } from '../../../../atoms';
-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';
@@ -12,7 +12,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;
@@ -99,6 +99,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) });
@@ -113,7 +119,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/package.json

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