@snack-uikit/search 0.5.2 → 0.6.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.6.0 (2023-12-14)
+
+
+### BREAKING CHANGES
+
+
+* **FF-3729:** replace enum with unions ([910db4a](https://github.com/cloud-ru-tech/snack-uikit/commit/910db4aa8231ccbc58e538e5c5c1f461b1dec275))
+
+
+
+
 ## 0.5.2 (2023-12-07)
 
 ### Only dependencies have been changed

package/README.md

@@ -20,7 +20,7 @@ import { Search, SearchPrivate } from "@snack-uikit/search";
   loading={loading}
   options={options}
   onSubmit={onSubmit}
-  size={Search.sizes.S}
+  size='s'
   autocomplete
 />
 
@@ -29,7 +29,7 @@ import { Search, SearchPrivate } from "@snack-uikit/search";
   onChange={handleSearchChange}
   loading={loading}
   onSubmit={onSubmit}
-  size={SearchPrivate.sizes.S}
+  size='s'
 />
 ```
 
@@ -45,7 +45,7 @@ import { Search, SearchPrivate } from "@snack-uikit/search";
 | onFocus | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки получения фокуса |
 | onBlur | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки потери фокуса |
 | className | `string` | - | CSS-класс |
-| size | enum Size: `"s"`, `"m"`, `"l"` | Size.S | Размер |
+| size | enum Size: `"s"`, `"m"`, `"l"` | s | Размер |
 | loading | `boolean` | - | Состояние загрузки |
 | onSubmit | `(value: string) => void` | - | Колбек на подтверждение поиска по строке |
 | outline | `boolean` | - | Внешний бордер |
@@ -57,7 +57,7 @@ import { Search, SearchPrivate } from "@snack-uikit/search";
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| size | enum Size: `"s"`, `"m"`, `"l"` | Size.S | Размер |
+| size | enum Size: `"s"`, `"m"`, `"l"` | s | Размер |
 | loading | `boolean` | - | Состояние загрузки |
 | onSubmit | `(value: string) => void` | - | Колбек на подтверждение поиска по строке |
 | className | `string` | - | CSS-класс |

package/dist/components/Search/Search.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import { Size } from '../../constants';
 import { SearchAutocompleteProps } from '../SearchAutocomplete';
 import { SearchPrivateProps } from '../SearchPrivate';
 export type SearchProps = Omit<SearchPrivateProps, 'onKeyDown'> & {
@@ -17,6 +16,4 @@ export type SearchProps = Omit<SearchPrivateProps, 'onKeyDown'> & {
     /** В режиме FieldText options отсутсвуют */
     options?: never;
 });
-export declare const Search: import("react").ForwardRefExoticComponent<SearchProps & import("react").RefAttributes<HTMLInputElement>> & {
-    sizes: typeof Size;
-};
+export declare const Search: import("react").ForwardRefExoticComponent<SearchProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/Search/Search.js

@@ -12,11 +12,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { extractSupportProps } from '@snack-uikit/utils';
-import { Size } from '../../constants';
+import { SIZE } from '../../constants';
 import { SearchAutocomplete } from '../SearchAutocomplete';
 import { SearchFieldText } from '../SearchFieldText';
-const SearchComponent = forwardRef(function Search(_a, ref) {
-    var { size = Size.S } = _a, props = __rest(_a, ["size"]);
+export const Search = forwardRef(function Search(_a, ref) {
+    var { size = SIZE.S } = _a, props = __rest(_a, ["size"]);
     const { value, onChange, onBlur, onFocus, outline, loading, placeholder, onSubmit, className } = props, rest = __rest(props, ["value", "onChange", "onBlur", "onFocus", "outline", "loading", "placeholder", "onSubmit", "className"]);
     const supportProps = extractSupportProps(rest);
     if (props.autocomplete) {
@@ -24,5 +24,3 @@ const SearchComponent = forwardRef(function Search(_a, ref) {
     }
     return (_jsx(SearchFieldText, Object.assign({ value: value, onChange: onChange, onBlur: onBlur, onFocus: onFocus, onSubmit: onSubmit, size: size, outline: outline, loading: loading, placeholder: placeholder, className: className, ref: ref }, supportProps)));
 });
-export const Search = SearchComponent;
-Search.sizes = Size;

package/dist/components/SearchAutocomplete/SearchAutocomplete.js

@@ -15,23 +15,23 @@ import cn from 'classnames';
 import mergeRefs from 'merge-refs';
 import { forwardRef, useCallback, useRef, useState } from 'react';
 import { Droplist } from '@snack-uikit/droplist';
-import { PRIVATE_SEARCH_TEST_IDS, Size, TEST_IDS } from '../../constants';
+import { PRIVATE_SEARCH_TEST_IDS, SIZE, TEST_IDS } from '../../constants';
 import { SearchDecorator } from '../SearchDecorator';
 import { SearchPrivate } from '../SearchPrivate';
 import styles from './styles.module.css';
 export const SearchAutocomplete = forwardRef(function SearchAutocomplete(_a, ref) {
     var _b, _c;
-    var { size = Size.S, value, onChange, placeholder, options = [], loading, outline, onSubmit, onFocus, className } = _a, rest = __rest(_a, ["size", "value", "onChange", "placeholder", "options", "loading", "outline", "onSubmit", "onFocus", "className"]);
+    var { size = SIZE.S, value, onChange, placeholder, options = [], loading, outline, onSubmit, onFocus, className } = _a, rest = __rest(_a, ["size", "value", "onChange", "placeholder", "options", "loading", "outline", "onSubmit", "onFocus", "className"]);
     const scrollRef = useRef(null);
     const [isOpen, setIsOpen] = useState(false);
     const { firstElementRefCallback, handleDroplistFocusLeave, handleDroplistItemClick, handleTriggerKeyDown, handleDroplistItemKeyDown, triggerElementRef, } = Droplist.useKeyboardNavigation({
         setDroplistOpen: setIsOpen,
-        triggerType: Droplist.useKeyboardNavigation.triggerTypes.Input,
+        triggerType: 'input',
     });
     const handleOptionKeyDown = useCallback((event) => {
         var _a, _b;
         event.stopPropagation();
-        // ignoring special keys (tab, arrows, backspace and etc.)
+        // ignoring special keys (tab, arrows, backspace, etc.)
         if (event.key.length === 1) {
             (_a = triggerElementRef.current) === null || _a === void 0 ? void 0 : _a.focus();
             (_b = scrollRef.current) === null || _b === void 0 ? void 0 : _b.scroll(0, 0);

package/dist/components/SearchDecorator/SearchDecorator.d.ts

@@ -1,6 +1,5 @@
 import { ReactNode } from 'react';
 import { WithSupportProps } from '@snack-uikit/utils';
-import { Size } from '../../constants';
 import { SearchProps } from '../Search';
 export type SearchDecoratorProps = WithSupportProps<{
     children: ReactNode;
@@ -8,6 +7,3 @@ export type SearchDecoratorProps = WithSupportProps<{
     className?: string;
 } & Pick<SearchProps, 'outline' | 'size'>>;
 export declare function SearchDecorator({ children, outline, size, focused, className, ...rest }: SearchDecoratorProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace SearchDecorator {
-    var sizes: typeof Size;
-}

package/dist/components/SearchDecorator/SearchDecorator.js

@@ -12,10 +12,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import cn from 'classnames';
 import { extractSupportProps } from '@snack-uikit/utils';
-import { Size } from '../../constants';
+import { SIZE } from '../../constants';
 import styles from './styles.module.css';
 export function SearchDecorator(_a) {
-    var { children, outline, size = Size.S, focused, className } = _a, rest = __rest(_a, ["children", "outline", "size", "focused", "className"]);
+    var { children, outline, size = SIZE.S, focused, className } = _a, rest = __rest(_a, ["children", "outline", "size", "focused", "className"]);
     return (_jsx("div", Object.assign({ className: cn(styles.decorator, className), "data-outline": outline || undefined, "data-size": size, "data-focused": focused || undefined }, extractSupportProps(rest), { children: children })));
 }
-SearchDecorator.sizes = Size;

package/dist/components/SearchFieldText/SearchFieldText.js

@@ -11,10 +11,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import { PRIVATE_SEARCH_TEST_IDS, Size } from '../../constants';
+import { PRIVATE_SEARCH_TEST_IDS, SIZE } from '../../constants';
 import { SearchDecorator } from '../SearchDecorator';
 import { SearchPrivate } from '../SearchPrivate';
 export const SearchFieldText = forwardRef(function SearchFieldText(_a, ref) {
-    var { value, onChange, onBlur, onFocus, size = Size.S, outline, loading, placeholder, onSubmit, className } = _a, rest = __rest(_a, ["value", "onChange", "onBlur", "onFocus", "size", "outline", "loading", "placeholder", "onSubmit", "className"]);
+    var { value, onChange, onBlur, onFocus, size = SIZE.S, outline, loading, placeholder, onSubmit, className } = _a, rest = __rest(_a, ["value", "onChange", "onBlur", "onFocus", "size", "outline", "loading", "placeholder", "onSubmit", "className"]);
     return (_jsx(SearchDecorator, Object.assign({ outline: outline, size: size, className: className }, rest, { children: _jsx(SearchPrivate, { ref: ref, size: size, value: value, onChange: onChange, onBlur: onBlur, onFocus: onFocus, onSubmit: onSubmit, placeholder: placeholder, loading: loading, "data-test-id": PRIVATE_SEARCH_TEST_IDS.field }) })));
 });

package/dist/components/SearchPrivate/SearchPrivate.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { InputPrivateProps } from '@snack-uikit/input-private';
 import { WithSupportProps } from '@snack-uikit/utils';
-import { Size } from '../../constants';
+import { Size } from '../../types';
 export type SearchPrivateProps = WithSupportProps<{
     /** Размер */
     size?: Size;
@@ -23,6 +23,4 @@ export declare const SearchPrivate: import("react").ForwardRefExoticComponent<{
     onSubmit?(value: string): void;
     /** CSS-класс */
     className?: string | undefined;
-} & Pick<Partial<InputPrivateProps>, "value" | "onChange" | "placeholder" | "onFocus" | "onBlur" | "onKeyDown"> & import("react").RefAttributes<HTMLInputElement>> & {
-    sizes: typeof Size;
-};
+} & Pick<Partial<InputPrivateProps>, "value" | "onChange" | "placeholder" | "onFocus" | "onBlur" | "onKeyDown"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/SearchPrivate/SearchPrivate.js

@@ -18,10 +18,10 @@ import { SearchSVG } from '@snack-uikit/icons';
 import { InputPrivate, moveCursorToEnd, useButtonNavigation, useClearButton, } from '@snack-uikit/input-private';
 import { Sun } from '@snack-uikit/loaders';
 import { extractSupportProps } from '@snack-uikit/utils';
-import { PRIVATE_SEARCH_TEST_IDS, Size } from '../../constants';
+import { PRIVATE_SEARCH_TEST_IDS, SIZE } from '../../constants';
 import styles from './styles.module.css';
-const SearchPrivateComponent = forwardRef(function SearchPrivate(_a, ref) {
-    var { size = Size.S, value: valueProp = '', onChange: onChangeProp, loading, placeholder, onKeyDown, onFocus, onBlur, onSubmit, className } = _a, rest = __rest(_a, ["size", "value", "onChange", "loading", "placeholder", "onKeyDown", "onFocus", "onBlur", "onSubmit", "className"]);
+export const SearchPrivate = forwardRef(function SearchPrivate(_a, ref) {
+    var { size = SIZE.S, value: valueProp = '', onChange: onChangeProp, loading, placeholder, onKeyDown, onFocus, onBlur, onSubmit, className } = _a, rest = __rest(_a, ["size", "value", "onChange", "loading", "placeholder", "onKeyDown", "onFocus", "onBlur", "onSubmit", "className"]);
     const [value, onValueChange] = useUncontrolledProp(valueProp, '', onChangeProp);
     const localRef = useRef(null);
     const clearButtonRef = useRef(null);
@@ -57,7 +57,5 @@ const SearchPrivateComponent = forwardRef(function SearchPrivate(_a, ref) {
         onFocus && onFocus(e);
         moveCursorToEnd(localRef.current);
     }, [onFocus]);
-    return (_jsxs("div", Object.assign({ className: cn(styles.container, className) }, extractSupportProps(rest), { "data-size": size }, { children: [_jsx("span", Object.assign({ className: styles.prefix }, { children: loading ? (_jsx(Sun, { "data-test-id": PRIVATE_SEARCH_TEST_IDS.iconSun })) : (_jsx(SearchSVG, { "data-test-id": PRIVATE_SEARCH_TEST_IDS.iconSearch })) })), _jsx(InputPrivate, { value: value, onChange: onValueChange, onKeyDown: handleKeyDown, onFocus: handleOnFocus, onBlur: onBlur, tabIndex: inputTabIndex, ref: mergeRefs(ref, localRef), placeholder: placeholder, type: InputPrivate.types.Text, "data-test-id": PRIVATE_SEARCH_TEST_IDS.input }), _jsx("span", Object.assign({ className: styles.postfix }, { children: buttons }))] })));
+    return (_jsxs("div", Object.assign({ className: cn(styles.container, className) }, extractSupportProps(rest), { "data-size": size }, { children: [_jsx("span", Object.assign({ className: styles.prefix }, { children: loading ? (_jsx(Sun, { "data-test-id": PRIVATE_SEARCH_TEST_IDS.iconSun })) : (_jsx(SearchSVG, { "data-test-id": PRIVATE_SEARCH_TEST_IDS.iconSearch })) })), _jsx(InputPrivate, { value: value, onChange: onValueChange, onKeyDown: handleKeyDown, onFocus: handleOnFocus, onBlur: onBlur, tabIndex: inputTabIndex, ref: mergeRefs(ref, localRef), placeholder: placeholder, type: 'text', "data-test-id": PRIVATE_SEARCH_TEST_IDS.input }), _jsx("span", Object.assign({ className: styles.postfix }, { children: buttons }))] })));
 });
-export const SearchPrivate = SearchPrivateComponent;
-SearchPrivate.sizes = Size;

package/dist/constants.d.ts

@@ -1,8 +1,8 @@
-export declare enum Size {
-    S = "s",
-    M = "m",
-    L = "l"
-}
+export declare const SIZE: {
+    readonly S: "s";
+    readonly M: "m";
+    readonly L: "l";
+};
 export declare const TEST_IDS: {
     main: string;
     decorator: string;

package/dist/constants.js

@@ -1,9 +1,8 @@
-export var Size;
-(function (Size) {
-    Size["S"] = "s";
-    Size["M"] = "m";
-    Size["L"] = "l";
-})(Size || (Size = {}));
+export const SIZE = {
+    S: 's',
+    M: 'm',
+    L: 'l',
+};
 export const TEST_IDS = {
     main: 'search',
     decorator: 'search__decorator',

package/dist/types.d.ts

@@ -0,0 +1,3 @@
+import { ValueOf } from '@snack-uikit/utils';
+import { SIZE } from './constants';
+export type Size = ValueOf<typeof SIZE>;

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Search",
-  "version": "0.5.2",
+  "version": "0.6.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -32,11 +32,11 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/droplist": "0.11.2",
+    "@snack-uikit/droplist": "0.12.0",
     "@snack-uikit/icons": "0.19.0",
-    "@snack-uikit/input-private": "2.0.1",
-    "@snack-uikit/loaders": "0.4.1",
-    "@snack-uikit/utils": "3.1.0",
+    "@snack-uikit/input-private": "3.0.0",
+    "@snack-uikit/loaders": "0.5.0",
+    "@snack-uikit/utils": "3.2.0",
     "classnames": "2.3.2",
     "merge-refs": "1.0.0",
     "uncontrollable": "8.0.4"
@@ -44,5 +44,5 @@
   "devDependencies": {
     "@types/merge-refs": "1.0.0"
   },
-  "gitHead": "e124e31699926810648702f97db72413d7ebd2b2"
+  "gitHead": "bd39c5e674f3b91b0e2487782a04b15034cf3d8b"
 }

package/src/components/Search/Search.tsx

@@ -2,7 +2,7 @@ import { forwardRef } from 'react';
 
 import { extractSupportProps } from '@snack-uikit/utils';
 
-import { Size } from '../../constants';
+import { SIZE } from '../../constants';
 import { SearchAutocomplete, SearchAutocompleteProps } from '../SearchAutocomplete';
 import { SearchFieldText } from '../SearchFieldText';
 import { SearchPrivateProps } from '../SearchPrivate';
@@ -26,7 +26,7 @@ export type SearchProps = Omit<SearchPrivateProps, 'onKeyDown'> & {
       }
   );
 
-const SearchComponent = forwardRef<HTMLInputElement, SearchProps>(function Search({ size = Size.S, ...props }, ref) {
+export const Search = forwardRef<HTMLInputElement, SearchProps>(function Search({ size = SIZE.S, ...props }, ref) {
   const { value, onChange, onBlur, onFocus, outline, loading, placeholder, onSubmit, className, ...rest } = props;
   const supportProps = extractSupportProps(rest);
 
@@ -67,9 +67,3 @@ const SearchComponent = forwardRef<HTMLInputElement, SearchProps>(function Searc
     />
   );
 });
-
-export const Search = SearchComponent as typeof SearchComponent & {
-  sizes: typeof Size;
-};
-
-Search.sizes = Size;

package/src/components/SearchAutocomplete/SearchAutocomplete.tsx

@@ -4,7 +4,7 @@ import { forwardRef, KeyboardEvent, useCallback, useRef, useState } from 'react'
 
 import { Droplist, ItemSingleProps } from '@snack-uikit/droplist';
 
-import { PRIVATE_SEARCH_TEST_IDS, Size, TEST_IDS } from '../../constants';
+import { PRIVATE_SEARCH_TEST_IDS, SIZE, TEST_IDS } from '../../constants';
 import { SearchDecorator } from '../SearchDecorator';
 import { SearchPrivate, SearchPrivateProps } from '../SearchPrivate';
 import styles from './styles.module.scss';
@@ -22,7 +22,7 @@ export type SearchAutocompleteProps = Omit<SearchPrivateProps, 'onKeyDown'> & {
 
 export const SearchAutocomplete = forwardRef<HTMLInputElement, SearchAutocompleteProps>(function SearchAutocomplete(
   {
-    size = Size.S,
+    size = SIZE.S,
     value,
     onChange,
     placeholder,
@@ -49,14 +49,14 @@ export const SearchAutocomplete = forwardRef<HTMLInputElement, SearchAutocomplet
     triggerElementRef,
   } = Droplist.useKeyboardNavigation<HTMLInputElement>({
     setDroplistOpen: setIsOpen,
-    triggerType: Droplist.useKeyboardNavigation.triggerTypes.Input,
+    triggerType: 'input',
   });
 
   const handleOptionKeyDown = useCallback(
     (event: KeyboardEvent<HTMLButtonElement>) => {
       event.stopPropagation();
 
-      // ignoring special keys (tab, arrows, backspace and etc.)
+      // ignoring special keys (tab, arrows, backspace, etc.)
       if (event.key.length === 1) {
         triggerElementRef.current?.focus();
         scrollRef.current?.scroll(0, 0);

package/src/components/SearchDecorator/SearchDecorator.tsx

@@ -3,7 +3,7 @@ import { ReactNode } from 'react';
 
 import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 
-import { Size } from '../../constants';
+import { SIZE } from '../../constants';
 import { SearchProps } from '../Search';
 import styles from './styles.module.scss';
 
@@ -18,7 +18,7 @@ export type SearchDecoratorProps = WithSupportProps<
 export function SearchDecorator({
   children,
   outline,
-  size = Size.S,
+  size = SIZE.S,
   focused,
   className,
   ...rest
@@ -35,5 +35,3 @@ export function SearchDecorator({
     </div>
   );
 }
-
-SearchDecorator.sizes = Size;

package/src/components/SearchFieldText/SearchFieldText.tsx

@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { PRIVATE_SEARCH_TEST_IDS, Size } from '../../constants';
+import { PRIVATE_SEARCH_TEST_IDS, SIZE } from '../../constants';
 import { SearchDecorator } from '../SearchDecorator';
 import { SearchPrivate, SearchPrivateProps } from '../SearchPrivate';
 
@@ -10,7 +10,7 @@ export type SearchTextFieldProps = Omit<SearchPrivateProps, 'onKeyDown'> & {
 };
 
 export const SearchFieldText = forwardRef<HTMLInputElement, SearchTextFieldProps>(function SearchFieldText(
-  { value, onChange, onBlur, onFocus, size = Size.S, outline, loading, placeholder, onSubmit, className, ...rest },
+  { value, onChange, onBlur, onFocus, size = SIZE.S, outline, loading, placeholder, onSubmit, className, ...rest },
   ref,
 ) {
   return (

package/src/components/SearchPrivate/SearchPrivate.tsx

@@ -14,7 +14,8 @@ import {
 import { Sun } from '@snack-uikit/loaders';
 import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 
-import { PRIVATE_SEARCH_TEST_IDS, Size } from '../../constants';
+import { PRIVATE_SEARCH_TEST_IDS, SIZE } from '../../constants';
+import { Size } from '../../types';
 import styles from './styles.module.scss';
 
 export type SearchPrivateProps = WithSupportProps<
@@ -30,9 +31,9 @@ export type SearchPrivateProps = WithSupportProps<
   } & Pick<Partial<InputPrivateProps>, 'value' | 'onChange' | 'placeholder' | 'onFocus' | 'onBlur' | 'onKeyDown'>
 >;
 
-const SearchPrivateComponent = forwardRef<HTMLInputElement, SearchPrivateProps>(function SearchPrivate(
+export const SearchPrivate = forwardRef<HTMLInputElement, SearchPrivateProps>(function SearchPrivate(
   {
-    size = Size.S,
+    size = SIZE.S,
     value: valueProp = '',
     onChange: onChangeProp,
     loading,
@@ -114,7 +115,7 @@ const SearchPrivateComponent = forwardRef<HTMLInputElement, SearchPrivateProps>(
         tabIndex={inputTabIndex}
         ref={mergeRefs(ref, localRef)}
         placeholder={placeholder}
-        type={InputPrivate.types.Text}
+        type='text'
         data-test-id={PRIVATE_SEARCH_TEST_IDS.input}
       />
 
@@ -122,9 +123,3 @@ const SearchPrivateComponent = forwardRef<HTMLInputElement, SearchPrivateProps>(
     </div>
   );
 });
-
-export const SearchPrivate = SearchPrivateComponent as typeof SearchPrivateComponent & {
-  sizes: typeof Size;
-};
-
-SearchPrivate.sizes = Size;

package/src/constants.ts

@@ -1,8 +1,8 @@
-export enum Size {
-  S = 's',
-  M = 'm',
-  L = 'l',
-}
+export const SIZE = {
+  S: 's',
+  M: 'm',
+  L: 'l',
+} as const;
 
 export const TEST_IDS = {
   main: 'search',

package/src/types.ts

@@ -0,0 +1,5 @@
+import { ValueOf } from '@snack-uikit/utils';
+
+import { SIZE } from './constants';
+
+export type Size = ValueOf<typeof SIZE>;