@elementor/editor-controls 4.4.0-1078 → 4.4.0-1079

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.js +18 -11
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +32 -25
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +16 -16
  6. package/src/controls/icon-library/icon-library-popover.tsx +11 -4
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@elementor/editor-controls",
3
3
  "description": "This package contains the controls model and utils for the Elementor editor",
4
- "version": "4.4.0-1078",
4
+ "version": "4.4.0-1079",
5
5
  "private": false,
6
6
  "author": "Elementor Team",
7
7
  "homepage": "https://elementor.com/",
@@ -40,23 +40,23 @@
40
40
  "dev": "tsup --config=../../tsup.dev.ts"
41
41
  },
42
42
  "dependencies": {
43
- "@elementor/editor-current-user": "4.4.0-1078",
44
- "@elementor/editor-elements": "4.4.0-1078",
45
- "@elementor/editor-props": "4.4.0-1078",
46
- "@elementor/editor-responsive": "4.4.0-1078",
47
- "@elementor/editor-ui": "4.4.0-1078",
48
- "@elementor/editor-v1-adapters": "4.4.0-1078",
49
- "@elementor/env": "4.4.0-1078",
50
- "@elementor/events": "4.4.0-1078",
51
- "@elementor/http-client": "4.4.0-1078",
43
+ "@elementor/editor-current-user": "4.4.0-1079",
44
+ "@elementor/editor-elements": "4.4.0-1079",
45
+ "@elementor/editor-props": "4.4.0-1079",
46
+ "@elementor/editor-responsive": "4.4.0-1079",
47
+ "@elementor/editor-ui": "4.4.0-1079",
48
+ "@elementor/editor-v1-adapters": "4.4.0-1079",
49
+ "@elementor/env": "4.4.0-1079",
50
+ "@elementor/events": "4.4.0-1079",
51
+ "@elementor/http-client": "4.4.0-1079",
52
52
  "@elementor/icons": "~1.75.1",
53
- "@elementor/locations": "4.4.0-1078",
54
- "@elementor/query": "4.4.0-1078",
55
- "@elementor/schema": "4.4.0-1078",
56
- "@elementor/session": "4.4.0-1078",
53
+ "@elementor/locations": "4.4.0-1079",
54
+ "@elementor/query": "4.4.0-1079",
55
+ "@elementor/schema": "4.4.0-1079",
56
+ "@elementor/session": "4.4.0-1079",
57
57
  "@elementor/ui": "1.37.5",
58
- "@elementor/utils": "4.4.0-1078",
59
- "@elementor/wp-media": "4.4.0-1078",
58
+ "@elementor/utils": "4.4.0-1079",
59
+ "@elementor/wp-media": "4.4.0-1079",
60
60
  "@monaco-editor/react": "^4.7.0",
61
61
  "@tiptap/extension-bold": "^3.11.1",
62
62
  "@tiptap/extension-document": "^3.11.1",
package/src/controls/icon-library/icon-library-popover.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as React from 'react';
2
- import { useMemo, useState } from 'react';
2
+ import { useMemo } from 'react';
3
3
  import {
4
4
  PopoverBody,
5
5
  PopoverHeader,
@@ -10,6 +10,7 @@ import {
10
10
  } from '@elementor/editor-ui';
11
11
  import { ComponentsIcon } from '@elementor/icons';
12
12
  import { Box, CircularProgress, Divider, Link, Stack, styled, Typography } from '@elementor/ui';
13
+ import { useDebounceState } from '@elementor/utils';
13
14
  import { __ } from '@wordpress/i18n';
14
15
 
15
16
  import {
@@ -23,6 +24,7 @@ import { useFontAwesome7Catalog } from './use-font-awesome-7-catalog';
23
24
 
24
25
  export const ICON_LIBRARY_POPOVER_WIDTH = 300;
25
26
  export const ICON_LIBRARY_ROW_HEIGHT = 48;
27
+ export const ICON_LIBRARY_SEARCH_DEBOUNCE_DELAY = 300;
26
28
  const ICON_TILE_SIZE = 40;
27
29
  const ICON_GLYPH_SIZE = 20;
28
30
  const ICON_LIBRARY_INLINE_SPACING = 1;
@@ -52,7 +54,12 @@ export const IconLibraryPopover = ( {
52
54
  onClose,
53
55
  width = ICON_LIBRARY_POPOVER_WIDTH,
54
56
  }: IconLibraryPopoverProps ) => {
55
- const [ searchValue, setSearchValue ] = useState( '' );
57
+ const {
58
+ debouncedValue: searchValue,
59
+ inputValue: searchInputValue,
60
+ handleChange: handleSearchChange,
61
+ setImmediateValue: setSearchValue,
62
+ } = useDebounceState( { delay: ICON_LIBRARY_SEARCH_DEBOUNCE_DELAY } );
56
63
  const { data: icons = [], isLoading } = useFontAwesome7Catalog( open );
57
64
 
58
65
  const items = useMemo( () => createIconLibraryItems( icons, searchValue ), [ icons, searchValue ] );
@@ -92,8 +99,8 @@ export const IconLibraryPopover = ( {
92
99
  sx={ { pl: ICON_LIBRARY_INLINE_SPACING, pr: 0.5 } }
93
100
  />
94
101
  <SearchField
95
- value={ searchValue }
96
- onSearch={ setSearchValue }
102
+ value={ searchInputValue }
103
+ onSearch={ handleSearchChange }
97
104
  placeholder={ __( 'Search', 'elementor' ) }
98
105
  id="icon-library-search"
99
106
  sx={ { px: ICON_LIBRARY_INLINE_SPACING, pb: 1 } }