Merge remote-tracking branch 'origin/develop' into develop

epam · Jan 5, 2024 · 87d5425 · 87d5425
2 parents c13acf7 + 6b92f90
commit 87d5425
Show file tree

Hide file tree

Showing 6 changed files with 146 additions and 38 deletions.
diff --git a/changelog.md b/changelog.md
@@ -20,6 +20,7 @@
 * [NotificationCard]: color `gray60` in promo, and `night600` in loveship are deprecated and will be removed in future release.
 * [VirtualList]: fixed `onScroll` prop typing
 * [PickerInput]: fixed closing picker body by checking some item in 'Show only selected' mode
+* [PresetPanel]: fixed the problem of creating duplicates of the new preset when clicking the accept button quickly.
 
 # 5.4.3 - 19.12.2023
 

diff --git a/public/docs/docsGenOutput/docsGenOutput.d.ts b/public/docs/docsGenOutput/docsGenOutput.d.ts
@@ -348,7 +348,7 @@ type Autogenerated_TDocsGenExportedTypeRef = '@epam/uui-core:AcceptDropParams' |
 '@epam/uui:PickerListItemProps' |
 '@epam/uui:PickerListProps' |
 '@epam/uui:PickerModalProps' |
-'@epam/uui:pickerPart' |
+'@epam/uui:PickerPart' |
 '@epam/uui:PickerTogglerMods' |
 '@epam/uui:PresetsPanelProps' |
 '@epam/uui:ProgressBarProps' |

diff --git a/public/docs/docsGenOutput/docsGenOutput.json b/public/docs/docsGenOutput/docsGenOutput.json
@@ -16770,7 +16770,7 @@
    "details": {
     "kind": 264,
     "typeValue": {
-     "raw": "FilterConfigBase<TFilter> & Pick<PickerBaseOptions<any, any>, 'dataSource' | 'getName' | 'renderRow'> & { type: 'singlePicker' | 'multiPicker'; showSearch?: boolean | undefined; } & IEditable<any> & IDropdownBodyProps & { selectedPredicate?: string | undefined; } | FilterConfigBase<TFilter> & Pick<BaseDatePickerProps, 'filter' | 'format'> & { type: 'datePicker'; } & IEditable<any> & IDropdownBodyProps & { selectedPredicate?: string | undefined; } | FilterConfigBase<TFilter> & { type: 'numeric'; } & IEditable<any> & IDropdownBodyProps & { selectedPredicate?: string | undefined; } | FilterConfigBase<TFilter> & Pick<BaseDatePickerProps, 'filter' | 'format'> & { type: 'rangeDatePicker'; } & IEditable<any> & IDropdownBodyProps & { selectedPredicate?: string | undefined; } | FilterConfigBase<TFilter> & { type: 'custom'; render: (props: IFilterItemBodyProps<any>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>; getTogglerValue: (props: IFilterItemBodyProps<any>) => React.ReactNode; } & IEditable<any> & IDropdownBodyProps & { selectedPredicate?: string | undefined; }",
+     "raw": "FilterConfigBase<TFilter> & Pick<PickerBaseOptions<any, any>, 'dataSource' | 'getName' | 'renderRow'> & { type: 'singlePicker' | 'multiPicker'; showSearch?: boolean | undefined; maxBodyHeight?: number | undefined; } & IEditable<any> & IDropdownBodyProps & { selectedPredicate?: string | undefined; } | FilterConfigBase<TFilter> & Pick<BaseDatePickerProps, 'filter' | 'format'> & { type: 'datePicker'; } & IEditable<any> & IDropdownBodyProps & { selectedPredicate?: string | undefined; } | FilterConfigBase<TFilter> & { type: 'numeric'; } & IEditable<any> & IDropdownBodyProps & { selectedPredicate?: string | undefined; } | FilterConfigBase<TFilter> & Pick<BaseDatePickerProps, 'filter' | 'format'> & { type: 'rangeDatePicker'; } & IEditable<any> & IDropdownBodyProps & { selectedPredicate?: string | undefined; } | FilterConfigBase<TFilter> & { type: 'custom'; render: (props: IFilterItemBodyProps<any>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>; getTogglerValue: (props: IFilterItemBodyProps<any>) => React.ReactNode; } & IEditable<any> & IDropdownBodyProps & { selectedPredicate?: string | undefined; }",
      "print": [
       "type IFilterItemBodyProps<TFilter> = TableFiltersConfig<TFilter> & IEditable<any> & IDropdownBodyProps & {",
       "    /** Name of currently selected predicate */",
@@ -16981,6 +16981,23 @@
       "from": "@epam/uui-core:PickerFilterConfig",
       "required": false
      },
+     {
+      "uid": "maxBodyHeight",
+      "name": "maxBodyHeight",
+      "comment": {
+       "raw": [
+        "Height of picker items list in px. This height doesn't include height of body toolbars(sorting, predicates)"
+       ]
+      },
+      "typeValue": {
+       "raw": "number"
+      },
+      "editor": {
+       "type": "number"
+      },
+      "from": "@epam/uui-core:PickerFilterConfig",
+      "required": false
+     },
      {
       "uid": "value",
       "name": "value",
@@ -29343,6 +29360,8 @@
       "     * If omitted, true value will be used.",
       "     */",
       "    showSearch?: boolean;",
+      "    /** Height of picker items list in px. This height doesn't include height of body toolbars(sorting, predicates) */",
+      "    maxBodyHeight?: number;",
       "};"
      ]
     },
@@ -29546,6 +29565,22 @@
        "type": "bool"
       },
       "required": false
+     },
+     {
+      "uid": "maxBodyHeight",
+      "name": "maxBodyHeight",
+      "comment": {
+       "raw": [
+        "Height of picker items list in px. This height doesn't include height of body toolbars(sorting, predicates)"
+       ]
+      },
+      "typeValue": {
+       "raw": "number"
+      },
+      "editor": {
+       "type": "number"
+      },
+      "required": false
      }
     ],
     "propsFromUnion": false
@@ -29739,9 +29774,9 @@
      "print": [
       "type RangeDatePickerPresetValue = {",
       "    /** Range from value */",
-      "    from: string;",
+      "    from?: string;",
       "    /** Range to value */",
-      "    to: string;",
+      "    to?: string;",
       "    /** Preset order in presets list */",
       "    order?: number;",
       "};"
@@ -29762,7 +29797,7 @@
       "editor": {
        "type": "string"
       },
-      "required": true
+      "required": false
      },
      {
       "uid": "to",
@@ -29778,7 +29813,7 @@
       "editor": {
        "type": "string"
       },
-      "required": true
+      "required": false
      },
      {
       "uid": "order",
@@ -31096,6 +31131,23 @@
       "from": "@epam/uui-core:PickerFilterConfig",
       "required": false
      },
+     {
+      "uid": "maxBodyHeight",
+      "name": "maxBodyHeight",
+      "comment": {
+       "raw": [
+        "Height of picker items list in px. This height doesn't include height of body toolbars(sorting, predicates)"
+       ]
+      },
+      "typeValue": {
+       "raw": "number"
+      },
+      "editor": {
+       "type": "number"
+      },
+      "from": "@epam/uui-core:PickerFilterConfig",
+      "required": false
+     },
      {
       "uid": "filter",
       "name": "filter",
@@ -39971,6 +40023,8 @@
       "    maxWidth?: number | 'auto';",
       "    /** Defines height in 'px'. */",
       "    height?: number;",
+      "    /** Defines maxHeight in 'px'. If 'auto' provided, will be used height of the content. */",
+      "    maxHeight?: number | 'auto';",
       "    /** If true, arrow tip will be shown",
       "     * @default false",
       "     * */",
@@ -40060,6 +40114,19 @@
       },
       "required": false
      },
+     {
+      "uid": "maxHeight",
+      "name": "maxHeight",
+      "comment": {
+       "raw": [
+        "Defines maxHeight in 'px'. If 'auto' provided, will be used height of the content."
+       ]
+      },
+      "typeValue": {
+       "raw": "number | 'auto'"
+      },
+      "required": false
+     },
      {
       "uid": "showArrow",
       "name": "showArrow",
@@ -72601,6 +72668,20 @@
       "from": "@epam/uui-components:DropdownContainerProps",
       "required": false
      },
+     {
+      "uid": "maxHeight",
+      "name": "maxHeight",
+      "comment": {
+       "raw": [
+        "Defines maxHeight in 'px'. If 'auto' provided, will be used height of the content."
+       ]
+      },
+      "typeValue": {
+       "raw": "number | 'auto'"
+      },
+      "from": "@epam/uui-components:DropdownContainerProps",
+      "required": false
+     },
      {
       "uid": "showArrow",
       "name": "showArrow",
@@ -84947,22 +85028,22 @@
     "propsFromUnion": true
    }
   },
-  "@epam/uui:pickerPart": {
+  "@epam/uui:PickerPart": {
    "summary": {
     "module": "@epam/uui",
     "typeName": {
-     "name": "pickerPart",
-     "nameFull": "pickerPart"
+     "name": "PickerPart",
+     "nameFull": "PickerPart"
     },
     "src": "uui/components/datePickers/RangeDatePickerBody.tsx",
     "exported": true
    },
    "details": {
     "kind": 264,
     "typeValue": {
-     "raw": "'from' | 'to'",
+     "raw": "null | 'from' | 'to'",
      "print": [
-      "type pickerPart = 'from' | 'to';"
+      "type PickerPart = 'from' | 'to' | null;"
      ]
     }
    }
@@ -96267,6 +96348,20 @@
       "from": "@epam/uui-components:DropdownContainerProps",
       "required": false
      },
+     {
+      "uid": "maxHeight",
+      "name": "maxHeight",
+      "comment": {
+       "raw": [
+        "Defines maxHeight in 'px'. If 'auto' provided, will be used height of the content."
+       ]
+      },
+      "typeValue": {
+       "raw": "number | 'auto'"
+      },
+      "from": "@epam/uui-components:DropdownContainerProps",
+      "required": false
+     },
      {
       "uid": "showArrow",
       "name": "showArrow",
@@ -104650,6 +104745,20 @@
       "from": "@epam/uui-components:DropdownContainerProps",
       "required": false
      },
+     {
+      "uid": "maxHeight",
+      "name": "maxHeight",
+      "comment": {
+       "raw": [
+        "Defines maxHeight in 'px'. If 'auto' provided, will be used height of the content."
+       ]
+      },
+      "typeValue": {
+       "raw": "number | 'auto'"
+      },
+      "from": "@epam/uui-components:DropdownContainerProps",
+      "required": false
+     },
      {
       "uid": "showArrow",
       "name": "showArrow",

diff --git a/uui-docs/src/peContexts/TableContext.tsx b/uui-docs/src/peContexts/TableContext.tsx
@@ -2,23 +2,11 @@ import React from 'react';
 import { demoData } from '../demoData';
 import { DemoComponentProps } from '../types';
 import { ArrayDataSource, DataColumnProps, Metadata } from '@epam/uui-core';
-import {
-    Panel, DataTable, DataTableCell, useForm, FlexRow, Button, FlexSpacer, FlexCell, Text,
-} from '@epam/uui';
+import { Panel, DataTable, DataTableCell, useForm, FlexRow, Button, FlexSpacer, FlexCell, NumericInput, TextInput } from '@epam/uui';
 
 interface Person {
     id: number;
-    name: string;
-    yearsInCompany: number;
-    personType: string;
-    avatarUrl: string;
-    phoneNumber: string;
-    jobTitle: string;
-    birthDate: string;
-    gender: string;
-    hireDate: string;
-    departmentId: number;
-    departmentName: string;
+    [prop: string]: any;
 }
 
 interface FormState {
@@ -71,12 +59,12 @@ export function TableContext(contextProps: DemoComponentProps) {
 
     const personColumns: DataColumnProps<Person>[] = [
         {
-            key: 'name',
-            caption: 'Name',
+            key: 'Component-1',
+            caption: 'Component',
             renderCell: (props) => (
                 <DataTableCell
-                    { ...props.rowLens.prop(DemoComponent.name === 'PickerInput' ? 'id' : 'name').toProps() }
-                    renderEditor={ (props) => <DemoComponent valueType="id" selectionMode="single" dataSource={ dataSource } getName={ (i: any) => i.name } { ...props } /> }
+                    { ...props.rowLens.prop('id').toProps() }
+                    renderEditor={ (props) => <DemoComponent { ...props } { ...contextProps.props } /> }
                     { ...props }
                 />
             ),
@@ -88,10 +76,8 @@ export function TableContext(contextProps: DemoComponentProps) {
             caption: 'Years In Company',
             renderCell: (props) => (
                 <DataTableCell
-                    { ...props.rowLens.prop(DemoComponent.name === 'PickerInput' ? 'id' : 'yearsInCompany').toProps() }
-                    renderEditor={ (props) => (
-                        <DemoComponent valueType="id" selectionMode="single" dataSource={ dataSource } getName={ (i: any) => i.yearsInCompany } { ...props } />
-                    ) }
+                    { ...props.rowLens.prop('yearsInCompany').toProps() }
+                    renderEditor={ (props) => <NumericInput { ...props } /> }
                     { ...props }
                 />
             ),
@@ -100,16 +86,22 @@ export function TableContext(contextProps: DemoComponentProps) {
         }, {
             key: 'departmentName',
             caption: 'Department Name',
-            render: (props) => <Text>{props.departmentName}</Text>,
+            renderCell: (props) => (
+                <DataTableCell
+                    { ...props.rowLens.prop('departmentName').toProps() }
+                    renderEditor={ (props) => <TextInput { ...props } /> }
+                    { ...props }
+                />
+            ),
             isSortable: true,
             width: 200,
         }, {
-            key: 'birthDate',
-            caption: 'Birth Date',
+            key: 'Component-2',
+            caption: 'Component',
             renderCell: (props) => (
                 <DataTableCell
-                    { ...props.rowLens.prop(DemoComponent.name === 'PickerInput' ? 'id' : 'birthDate').toProps() }
-                    renderEditor={ (props) => <DemoComponent valueType="id" selectionMode="single" dataSource={ dataSource } getName={ (i: any) => i.birthDate } { ...props } /> }
+                    { ...props.rowLens.prop('id').toProps() }
+                    renderEditor={ (props) => <DemoComponent { ...props } { ...contextProps.props } /> }
                     { ...props }
                 />
             ),

diff --git a/uui/components/filters/PresetPanel/PresetInput.tsx b/uui/components/filters/PresetPanel/PresetInput.tsx
@@ -13,17 +13,20 @@ interface IPresetInputProps {
 
 export function PresetInput(props: IPresetInputProps) {
     const [presetCaption, setPresetCaption] = useState(props.preset?.name || '');
+    const [readonly, setReadonly] = useState(false);
 
     const cancelActionHandler = useCallback(() => {
         setPresetCaption('');
         props.onCancel();
     }, [props.onCancel]);
 
     const acceptActionHandler = useCallback(async () => {
+        setReadonly(() => true);
         if (presetCaption) {
             await props.onSuccess(presetCaption);
         }
         props.onCancel();
+        setReadonly(() => false);
     }, [presetCaption]);
 
     const newPresetOnBlurHandler = useCallback(() => {
@@ -44,6 +47,7 @@ export function PresetInput(props: IPresetInputProps) {
                 onBlur={ newPresetOnBlurHandler }
                 autoFocus
                 maxLength={ 50 }
+                isReadonly={ readonly }
             />
         </FlexCell>
     );

diff --git a/uui/components/filters/PresetPanel/__tests__/__snapshots__/PresetInput.test.tsx.snap b/uui/components/filters/PresetPanel/__tests__/__snapshots__/PresetInput.test.tsx.snap
@@ -20,13 +20,15 @@ exports[`PresetInput should render correctly 1`] = `
     tabIndex={-1}
   >
     <input
+      aria-readonly={false}
       autoFocus={true}
       className="uui-input"
       maxLength={50}
       onBlur={[Function]}
       onChange={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
+      readOnly={false}
       tabIndex={0}
       type="text"
       value=""