@snack-uikit/search 0.6.3 → 0.6.5-preview-85d9bbdc.0

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.6.4 (2023-12-28)
+
+### Only dependencies have been changed
+* [@snack-uikit/droplist@0.12.4](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/droplist/CHANGELOG.md)
+
+
+
+
+
 ## 0.6.3 (2023-12-25)
 
 ### Only dependencies have been changed

package/README.md

@@ -24,13 +24,6 @@ import { Search, SearchPrivate } from "@snack-uikit/search";
   autocomplete
 />
 
-<SearchPrivate
-  value={value}
-  onChange={handleSearchChange}
-  loading={loading}
-  onSubmit={onSubmit}
-  size='s'
-/>
 ```
 
 [//]: DOCUMENTATION_SECTION_START
@@ -53,22 +46,6 @@ import { Search, SearchPrivate } from "@snack-uikit/search";
 | autocomplete | `boolean` | - | Работа в режиме Autocomplete в значении true  Работа в режиме FieldText в значении false \| undefined |
 | ref | `Ref<HTMLInputElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom |
 | key | `Key` | - |  |
-## SearchPrivate
-### Props
-| name | type | default value | description |
-|------|------|---------------|-------------|
-| size | enum Size: `"s"`, `"m"`, `"l"` | s | Размер |
-| loading | `boolean` | - | Состояние загрузки |
-| onSubmit | `(value: string) => void` | - | Колбек на подтверждение поиска по строке |
-| className | `string` | - | CSS-класс |
-| value | `string` | - | Значение input |
-| onChange | `(value: string, e?: ChangeEvent<HTMLInputElement>) => void` | - | Колбек смены значения |
-| placeholder | `string` | - | Значение плейсхолдера |
-| onFocus | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки получения фокуса |
-| onBlur | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки потери фокуса |
-| onKeyDown | `KeyboardEventHandler<HTMLInputElement>` | - | Колбек обработки нажатия клавиши клавиатуры |
-| ref | `Ref<HTMLInputElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom |
-| key | `Key` | - |  |
 
 
 [//]: DOCUMENTATION_SECTION_END

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
+import { SearchPrivateProps } from '@snack-uikit/search-private';
 import { SearchAutocompleteProps } from '../SearchAutocomplete';
-import { SearchPrivateProps } from '../SearchPrivate';
 export type SearchProps = Omit<SearchPrivateProps, 'onKeyDown'> & {
     /** Внешний бордер */
     outline?: boolean;

package/dist/components/SearchAutocomplete/SearchAutocomplete.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { ItemSingleProps } from '@snack-uikit/droplist';
-import { SearchPrivateProps } from '../SearchPrivate';
+import { SearchPrivateProps } from '@snack-uikit/search-private';
 export type SearchAutocompleteProps = Omit<SearchPrivateProps, 'onKeyDown'> & {
     /**
      * Элементы выпадающие в Droplist в режиме Autocomplete.

package/dist/components/SearchAutocomplete/SearchAutocomplete.js

@@ -15,9 +15,9 @@ import cn from 'classnames';
 import mergeRefs from 'merge-refs';
 import { forwardRef, useCallback, useRef, useState } from 'react';
 import { Droplist } from '@snack-uikit/droplist';
+import { SearchPrivate } from '@snack-uikit/search-private';
 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;

package/dist/components/SearchFieldText/SearchFieldText.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { SearchPrivateProps } from '../SearchPrivate';
+import { SearchPrivateProps } from '@snack-uikit/search-private';
 export type SearchTextFieldProps = Omit<SearchPrivateProps, 'onKeyDown'> & {
     /** Внешний бордер */
     outline?: boolean;

package/dist/components/SearchFieldText/SearchFieldText.js

@@ -11,9 +11,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
+import { SearchPrivate } from '@snack-uikit/search-private';
 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"]);
     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/index.d.ts

@@ -1,2 +1 @@
 export * from './Search';
-export * from './SearchPrivate';

package/dist/components/index.js

@@ -1,2 +1 @@
 export * from './Search';
-export * from './SearchPrivate';

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Search",
-  "version": "0.6.3",
+  "version": "0.6.5-preview-85d9bbdc.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -32,17 +32,14 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/droplist": "0.12.3",
-    "@snack-uikit/icons": "0.19.2",
-    "@snack-uikit/input-private": "3.0.2",
-    "@snack-uikit/loaders": "0.5.0",
+    "@snack-uikit/droplist": "0.12.4",
+    "@snack-uikit/search-private": "0.0.1-preview-85d9bbdc.0",
     "@snack-uikit/utils": "3.2.0",
     "classnames": "2.3.2",
-    "merge-refs": "1.0.0",
-    "uncontrollable": "8.0.4"
+    "merge-refs": "1.0.0"
   },
   "devDependencies": {
     "@types/merge-refs": "1.0.0"
   },
-  "gitHead": "420ccb07e016ae79a8b783e88c24f2045fadc026"
+  "gitHead": "4328a9b2d2b79da1e9179707e7a230a1556ff78c"
 }

package/src/components/Search/Search.tsx

@@ -1,11 +1,11 @@
 import { forwardRef } from 'react';
 
+import { SearchPrivateProps } from '@snack-uikit/search-private';
 import { extractSupportProps } from '@snack-uikit/utils';
 
 import { SIZE } from '../../constants';
 import { SearchAutocomplete, SearchAutocompleteProps } from '../SearchAutocomplete';
 import { SearchFieldText } from '../SearchFieldText';
-import { SearchPrivateProps } from '../SearchPrivate';
 
 export type SearchProps = Omit<SearchPrivateProps, 'onKeyDown'> & {
   /** Внешний бордер */

package/src/components/SearchAutocomplete/SearchAutocomplete.tsx

@@ -3,10 +3,10 @@ import mergeRefs from 'merge-refs';
 import { forwardRef, KeyboardEvent, useCallback, useRef, useState } from 'react';
 
 import { Droplist, ItemSingleProps } from '@snack-uikit/droplist';
+import { SearchPrivate, SearchPrivateProps } from '@snack-uikit/search-private';
 
 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';
 
 export type SearchAutocompleteProps = Omit<SearchPrivateProps, 'onKeyDown'> & {

package/src/components/SearchFieldText/SearchFieldText.tsx

@@ -1,8 +1,9 @@
 import { forwardRef } from 'react';
 
+import { SearchPrivate, SearchPrivateProps } from '@snack-uikit/search-private';
+
 import { PRIVATE_SEARCH_TEST_IDS, SIZE } from '../../constants';
 import { SearchDecorator } from '../SearchDecorator';
-import { SearchPrivate, SearchPrivateProps } from '../SearchPrivate';
 
 export type SearchTextFieldProps = Omit<SearchPrivateProps, 'onKeyDown'> & {
   /** Внешний бордер */

package/src/components/index.ts

@@ -1,2 +1 @@
 export * from './Search';
-export * from './SearchPrivate';

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

@@ -1,26 +0,0 @@
-/// <reference types="react" />
-import { InputPrivateProps } from '@snack-uikit/input-private';
-import { WithSupportProps } from '@snack-uikit/utils';
-import { Size } from '../../types';
-export type SearchPrivateProps = WithSupportProps<{
-    /** Размер */
-    size?: Size;
-    /** Состояние загрузки */
-    loading?: boolean;
-    /** Колбек на подтверждение поиска по строке */
-    onSubmit?(value: string): void;
-    /** CSS-класс */
-    className?: string;
-} & Pick<Partial<InputPrivateProps>, 'value' | 'onChange' | 'placeholder' | 'onFocus' | 'onBlur' | 'onKeyDown'>>;
-export declare const SearchPrivate: import("react").ForwardRefExoticComponent<{
-    'data-test-id'?: string | undefined;
-} & import("react").AriaAttributes & {
-    /** Размер */
-    size?: Size | undefined;
-    /** Состояние загрузки */
-    loading?: boolean | undefined;
-    /** Колбек на подтверждение поиска по строке */
-    onSubmit?(value: string): void;
-    /** CSS-класс */
-    className?: string | undefined;
-} & Pick<Partial<InputPrivateProps>, "value" | "onChange" | "placeholder" | "onFocus" | "onBlur" | "onKeyDown"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/SearchPrivate/SearchPrivate.js

@@ -1,61 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import cn from 'classnames';
-import mergeRefs from 'merge-refs';
-import { forwardRef, useCallback, useMemo, useRef } from 'react';
-import { useUncontrolledProp } from 'uncontrollable';
-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 styles from './styles.module.css';
-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);
-    const showClearButton = Boolean(value);
-    const onClear = () => {
-        var _a;
-        onValueChange('');
-        (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    };
-    const clearButtonSettings = useClearButton({
-        clearButtonRef,
-        showClearButton,
-        size,
-        onClear,
-    });
-    const { buttons, inputTabIndex, onInputKeyDown } = useButtonNavigation({
-        inputRef: localRef,
-        buttons: useMemo(() => [clearButtonSettings], [clearButtonSettings]),
-        readonly: false,
-        submitKeys: ['Enter', 'Space'],
-    });
-    const handleKeyDown = useCallback((e) => {
-        var _a, _b;
-        onKeyDown && onKeyDown(e);
-        onInputKeyDown(e);
-        if (e.key === 'Enter' && ((_a = localRef.current) === null || _a === void 0 ? void 0 : _a.value)) {
-            onSubmit && onSubmit(localRef.current.value);
-            // TODO: think about remove blur behavior
-            (_b = localRef.current) === null || _b === void 0 ? void 0 : _b.blur();
-        }
-    }, [onInputKeyDown, onKeyDown, onSubmit]);
-    const handleOnFocus = useCallback((e) => {
-        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", { 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", { className: styles.postfix, children: buttons })] })));
-});

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

@@ -1 +0,0 @@
-export * from './SearchPrivate';

package/dist/components/SearchPrivate/index.js

@@ -1 +0,0 @@
-export * from './SearchPrivate';

package/dist/components/SearchPrivate/styles.module.css

@@ -1,68 +0,0 @@
-.container{
-  display:flex;
-  flex-grow:1;
-  align-items:center;
-  box-sizing:border-box;
-}
-.container[data-size=s]{
-  gap:var(--space-search-search-private-s, 4px);
-}
-.container[data-size=s] input{
-  font-family:var(--sans-body-s-font-family, SB Sans Interface);
-  font-weight:var(--sans-body-s-font-weight, Regular);
-  line-height:var(--sans-body-s-line-height, 16px);
-  font-size:var(--sans-body-s-font-size, 12px);
-  letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
-  paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
-  cursor:text;
-}
-.container[data-size=s] svg{
-  width:var(--dimension-3m, 24px) !important;
-  height:var(--dimension-3m, 24px) !important;
-}
-.container[data-size=m]{
-  gap:var(--space-search-search-private-m, 4px);
-}
-.container[data-size=m] input{
-  font-family:var(--sans-body-m-font-family, SB Sans Interface);
-  font-weight:var(--sans-body-m-font-weight, Regular);
-  line-height:var(--sans-body-m-line-height, 20px);
-  font-size:var(--sans-body-m-font-size, 14px);
-  letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
-  paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
-  cursor:text;
-}
-.container[data-size=m] svg{
-  width:var(--dimension-3m, 24px) !important;
-  height:var(--dimension-3m, 24px) !important;
-}
-.container[data-size=l]{
-  gap:var(--space-search-search-private-l, 8px);
-}
-.container[data-size=l] input{
-  font-family:var(--sans-body-l-font-family, SB Sans Interface);
-  font-weight:var(--sans-body-l-font-weight, Regular);
-  line-height:var(--sans-body-l-line-height, 24px);
-  font-size:var(--sans-body-l-font-size, 16px);
-  letter-spacing:var(--sans-body-l-letter-spacing, 0.1px);
-  paragraph-spacing:var(--sans-body-l-paragraph-spacing, 8.8px);
-  cursor:text;
-}
-.container[data-size=l] svg{
-  width:var(--dimension-3m, 24px) !important;
-  height:var(--dimension-3m, 24px) !important;
-}
-
-.prefix{
-  display:inline-flex;
-  flex-shrink:0;
-  align-items:center;
-  justify-content:center;
-  color:var(--sys-neutral-text-light, #898989);
-}
-
-.postfix{
-  display:inline-flex;
-  flex-shrink:0;
-  gap:var(--space-fields-postfix-gap, 4px);
-}

package/src/components/SearchPrivate/SearchPrivate.tsx

@@ -1,125 +0,0 @@
-import cn from 'classnames';
-import mergeRefs from 'merge-refs';
-import { FocusEvent, forwardRef, KeyboardEvent, useCallback, useMemo, useRef } from 'react';
-import { useUncontrolledProp } from 'uncontrollable';
-
-import { SearchSVG } from '@snack-uikit/icons';
-import {
-  InputPrivate,
-  InputPrivateProps,
-  moveCursorToEnd,
-  useButtonNavigation,
-  useClearButton,
-} from '@snack-uikit/input-private';
-import { Sun } from '@snack-uikit/loaders';
-import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
-
-import { PRIVATE_SEARCH_TEST_IDS, SIZE } from '../../constants';
-import { Size } from '../../types';
-import styles from './styles.module.scss';
-
-export type SearchPrivateProps = WithSupportProps<
-  {
-    /** Размер */
-    size?: Size;
-    /** Состояние загрузки */
-    loading?: boolean;
-    /** Колбек на подтверждение поиска по строке */
-    onSubmit?(value: string): void;
-    /** CSS-класс */
-    className?: string;
-  } & Pick<Partial<InputPrivateProps>, 'value' | 'onChange' | 'placeholder' | 'onFocus' | 'onBlur' | 'onKeyDown'>
->;
-
-export const SearchPrivate = forwardRef<HTMLInputElement, SearchPrivateProps>(function SearchPrivate(
-  {
-    size = SIZE.S,
-    value: valueProp = '',
-    onChange: onChangeProp,
-    loading,
-    placeholder,
-    onKeyDown,
-    onFocus,
-    onBlur,
-    onSubmit,
-    className,
-    ...rest
-  },
-  ref,
-) {
-  const [value, onValueChange] = useUncontrolledProp(valueProp, '', onChangeProp);
-
-  const localRef = useRef<HTMLInputElement>(null);
-  const clearButtonRef = useRef<HTMLButtonElement>(null);
-
-  const showClearButton = Boolean(value);
-
-  const onClear = () => {
-    onValueChange('');
-
-    localRef.current?.focus();
-  };
-
-  const clearButtonSettings = useClearButton({
-    clearButtonRef,
-    showClearButton,
-    size,
-    onClear,
-  });
-
-  const { buttons, inputTabIndex, onInputKeyDown } = useButtonNavigation({
-    inputRef: localRef,
-    buttons: useMemo(() => [clearButtonSettings], [clearButtonSettings]),
-    readonly: false,
-    submitKeys: ['Enter', 'Space'],
-  });
-
-  const handleKeyDown = useCallback(
-    (e: KeyboardEvent<HTMLInputElement>) => {
-      onKeyDown && onKeyDown(e);
-      onInputKeyDown(e);
-
-      if (e.key === 'Enter' && localRef.current?.value) {
-        onSubmit && onSubmit(localRef.current.value);
-        // TODO: think about remove blur behavior
-        localRef.current?.blur();
-      }
-    },
-    [onInputKeyDown, onKeyDown, onSubmit],
-  );
-
-  const handleOnFocus = useCallback(
-    (e: FocusEvent<HTMLInputElement, Element>) => {
-      onFocus && onFocus(e);
-      moveCursorToEnd(localRef.current);
-    },
-    [onFocus],
-  );
-
-  return (
-    <div className={cn(styles.container, className)} {...extractSupportProps(rest)} data-size={size}>
-      <span className={styles.prefix}>
-        {loading ? (
-          <Sun data-test-id={PRIVATE_SEARCH_TEST_IDS.iconSun} />
-        ) : (
-          <SearchSVG data-test-id={PRIVATE_SEARCH_TEST_IDS.iconSearch} />
-        )}
-      </span>
-
-      <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}
-      />
-
-      <span className={styles.postfix}>{buttons}</span>
-    </div>
-  );
-});

package/src/components/SearchPrivate/index.ts

@@ -1 +0,0 @@
-export * from './SearchPrivate';

package/src/components/SearchPrivate/styles.module.scss

@@ -1,43 +0,0 @@
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-search';
-@import "@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element";
-
-$sizes: 's', 'm', 'l';
-
-.container {
-  display: flex;
-  flex-grow: 1;
-  align-items: center;
-  box-sizing: border-box; 
-
-  @each $size in $sizes {
-    &[data-size='#{$size}'] {
-      @include composite-var($search-private, $size);
-
-      input {
-        @include composite-var($theme-variables, 'sans', 'body', $size);
-
-        cursor: text;
-      }
-
-      svg {
-        width: $icon-s !important; /* stylelint-disable-line declaration-no-important */
-        height: $icon-s !important; /* stylelint-disable-line declaration-no-important */
-      }
-    }
-  }
-}
-
-.prefix {
-  display: inline-flex;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-
-  color: $sys-neutral-text-light;
-}
-
-.postfix {
-  display: inline-flex;
-  flex-shrink: 0;
-  gap: $space-fields-postfix-gap;
-}