@snack-uikit/list 0.4.2-preview-3bc93fc3.0 → 0.5.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.5.0 (2024-02-27)
+
+
+### Features
+
+* **FF-4237:** add onmousedown handling ([1d9347a](https://github.com/cloud-ru-tech/snack-uikit/commit/1d9347a73c24b439d09bde236ebee84cb3843cf4))
+
+
+
+
+
 ## 0.4.1 (2024-02-26)
 
 ### Only dependencies have been changed

package/README.md

@@ -8,36 +8,11 @@
 
 [//]: DOCUMENTATION_SECTION_START
 [//]: THIS_SECTION_IS_AUTOGENERATED_PLEASE_DONT_EDIT_IT
-## useFuzzySearch
-Нечеткий поиск среди айтемов по полям 'content.option', 'content.caption', 'content.description', 'label'
-### Props
-| name | type | default value | description |
-|------|------|---------------|-------------|
 ## extractChildIds
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
 | items* | `ItemProps[]` | - |  |
-## flattenItems
-`flattenItems` 
-
-Функция разворачивает массив айтемов в плоский список
-## isAccordionItemProps
-### Props
-| name | type | default value | description |
-|------|------|---------------|-------------|
-## isBaseItemProps
-### Props
-| name | type | default value | description |
-|------|------|---------------|-------------|
-## isGroupItemProps
-### Props
-| name | type | default value | description |
-|------|------|---------------|-------------|
-## isNextListItemProps
-### Props
-| name | type | default value | description |
-|------|------|---------------|-------------|
 ## useGroupItemSelection
 ### Props
 | name | type | default value | description |

package/dist/components/Items/BaseItem/BaseItem.d.ts

@@ -5,5 +5,5 @@ type AllBaseItemProps = BaseItemProps & BaseItemPrivateProps & {
     onSelect?(): void;
     isParentNode?: boolean;
 };
-export declare function BaseItem({ beforeContent, afterContent, content, onClick, id, expandIcon, disabled, open, itemRef, switch: switchProp, onKeyDown, onFocus, indeterminate, onSelect, isParentNode, className, inactive, itemWrapRender, ...rest }: AllBaseItemProps): string | number | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export declare function BaseItem({ beforeContent, afterContent, content, onClick, onMouseDown, id, expandIcon, disabled, open, itemRef, switch: switchProp, onKeyDown, onFocus, indeterminate, onSelect, isParentNode, className, inactive, itemWrapRender, ...rest }: AllBaseItemProps): string | number | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
 export {};

package/dist/components/Items/BaseItem/BaseItem.js

@@ -19,7 +19,7 @@ import commonStyles from '../styles.module.css';
 import { CHECKBOX_SIZE_MAP } from './constants';
 import styles from './styles.module.css';
 export function BaseItem(_a) {
-    var { beforeContent, afterContent, content, onClick, id, expandIcon, disabled, open, itemRef, switch: switchProp, onKeyDown, onFocus, indeterminate, onSelect, isParentNode, className, inactive, itemWrapRender } = _a, rest = __rest(_a, ["beforeContent", "afterContent", "content", "onClick", "id", "expandIcon", "disabled", "open", "itemRef", "switch", "onKeyDown", "onFocus", "indeterminate", "onSelect", "isParentNode", "className", "inactive", "itemWrapRender"]);
+    var { beforeContent, afterContent, content, onClick, onMouseDown, id, expandIcon, disabled, open, itemRef, switch: switchProp, onKeyDown, onFocus, indeterminate, onSelect, isParentNode, className, inactive, itemWrapRender } = _a, rest = __rest(_a, ["beforeContent", "afterContent", "content", "onClick", "onMouseDown", "id", "expandIcon", "disabled", "open", "itemRef", "switch", "onKeyDown", "onFocus", "indeterminate", "onSelect", "isParentNode", "className", "inactive", "itemWrapRender"]);
     const { option, caption, description } = content || {};
     const interactive = !inactive;
     const { parentResetActiveFocusIndex } = useParentListContext();
@@ -70,7 +70,7 @@ export function BaseItem(_a) {
         e.stopPropagation();
     };
     const props = extractSupportProps(rest);
-    const item = (_jsxs("li", { role: 'menuitem', "data-test-id": props['data-test-id'] || 'list__base-item_' + id, ref: itemRef, className: cn(commonStyles.listItem, styles.droplistItem, className), "data-size": size, onClick: handleItemClick, tabIndex: -1, "data-non-pointer": inactive && !onClick, "data-inactive": inactive || undefined, "data-checked": (isParentNode && (indeterminate || isChecked)) || (isChecked && !switchProp) || undefined, "data-variant": mode || undefined, "data-open": open || undefined, "data-disabled": disabled || undefined, "aria-disabled": disabled || undefined, "data-parent": parent || 'list', onKeyDown: handleItemKeyDown, onFocus: handleItemFocus, style: { '--level': level }, children: [!switchProp && isSelectionSingle && marker && !isParentNode && interactive && (_jsx("div", { className: styles.markerContainer, "data-test-id": 'list__base-item-marker' })), !switchProp && isSelectionMultiple && interactive && (_jsx("div", { className: styles.checkbox, children: _jsx(Checkbox, { size: CHECKBOX_SIZE_MAP[size !== null && size !== void 0 ? size : 's'], disabled: disabled, tabIndex: -1, onChange: handleCheckboxChange, checked: isChecked, "data-test-id": 'list__base-item-checkbox', onClick: handleCheckboxClick, indeterminate: indeterminate }) })), beforeContent && _jsx("div", { className: styles.beforeContent, children: beforeContent }), _jsxs("div", { className: styles.content, children: [_jsxs("div", { className: styles.headline, children: [_jsx("span", { className: styles.option, children: _jsx(TruncateString, { text: option, maxLines: 1 }) }), caption && _jsx("span", { className: styles.caption, children: caption })] }), description && (_jsx("div", { className: styles.description, children: _jsx(TruncateString, { text: description, maxLines: 2 }) }))] }), afterContent, switchProp && interactive && (_jsx(Switch, { disabled: disabled, checked: isChecked, "data-test-id": 'list__base-item-switch' })), !switchProp && expandIcon && _jsx("span", { className: styles.expandableIcon, children: expandIcon })] }));
+    const item = (_jsxs("li", { role: 'menuitem', "data-test-id": props['data-test-id'] || 'list__base-item_' + id, ref: itemRef, className: cn(commonStyles.listItem, styles.droplistItem, className), "data-size": size, onClick: handleItemClick, onMouseDown: onMouseDown, tabIndex: -1, "data-non-pointer": inactive && !onClick, "data-inactive": inactive || undefined, "data-checked": (isParentNode && (indeterminate || isChecked)) || (isChecked && !switchProp) || undefined, "data-variant": mode || undefined, "data-open": open || undefined, "data-disabled": disabled || undefined, "aria-disabled": disabled || undefined, "data-parent": parent || 'list', onKeyDown: handleItemKeyDown, onFocus: handleItemFocus, style: { '--level': level }, children: [!switchProp && isSelectionSingle && marker && !isParentNode && interactive && (_jsx("div", { className: styles.markerContainer, "data-test-id": 'list__base-item-marker' })), !switchProp && isSelectionMultiple && interactive && (_jsx("div", { className: styles.checkbox, children: _jsx(Checkbox, { size: CHECKBOX_SIZE_MAP[size !== null && size !== void 0 ? size : 's'], disabled: disabled, tabIndex: -1, onChange: handleCheckboxChange, checked: isChecked, "data-test-id": 'list__base-item-checkbox', onClick: handleCheckboxClick, indeterminate: indeterminate }) })), beforeContent && _jsx("div", { className: styles.beforeContent, children: beforeContent }), _jsxs("div", { className: styles.content, children: [_jsxs("div", { className: styles.headline, children: [_jsx("span", { className: styles.option, children: _jsx(TruncateString, { text: option, maxLines: 1 }) }), caption && _jsx("span", { className: styles.caption, children: caption })] }), description && (_jsx("div", { className: styles.description, children: _jsx(TruncateString, { text: description, maxLines: 2 }) }))] }), afterContent, switchProp && interactive && (_jsx(Switch, { disabled: disabled, checked: isChecked, "data-test-id": 'list__base-item-switch' })), !switchProp && expandIcon && _jsx("span", { className: styles.expandableIcon, children: expandIcon })] }));
     if (!itemWrapRender) {
         return item;
     }

package/dist/components/Items/types.d.ts

@@ -26,6 +26,8 @@ export type BaseItemProps = WithSupportProps<{
     content: ItemContentProps;
     /** Колбек обработки клика */
     onClick?(e: MouseEvent<HTMLElement>): void;
+    /** Колбек обработки нажатия кнопки мыши */
+    onMouseDown?(e: MouseEvent<HTMLElement>): void;
     /** Колбек обработки нажатия клавиши */
     onKeyDown?(e: KeyboardEvent<HTMLElement>): void;
     /** Колбек обработки фокуса */

package/dist/components/index.d.ts

@@ -1,4 +1,3 @@
 export * from './Lists';
-export type { AccordionItemProps, NextListItemProps, BaseItemProps, GroupItemProps, ItemProps } from './Items';
-export { isAccordionItemProps, isBaseItemProps, isGroupItemProps, isNextListItemProps } from './Items';
+export type { AccordionItemProps, NextListItemProps, BaseItemProps, GroupItemProps, ItemProps } from './Items/types';
 export { useGroupItemSelection } from './Items/hooks';

package/dist/components/index.js

@@ -1,3 +1,2 @@
 export * from './Lists';
-export { isAccordionItemProps, isBaseItemProps, isGroupItemProps, isNextListItemProps } from './Items';
 export { useGroupItemSelection } from './Items/hooks';

package/dist/hooks.d.ts

@@ -1,5 +1,2 @@
 import { ItemProps } from './components/Items';
-/**
- * Нечеткий поиск среди айтемов по полям 'content.option', 'content.caption', 'content.description', 'label'
- */
 export declare function useFuzzySearch(items: ItemProps[], minSearchInputLength?: number): (search: string) => ItemProps[];

package/dist/hooks.js

@@ -1,10 +1,24 @@
 import FuzzySearch from 'fuzzy-search';
 import { useCallback } from 'react';
-import { flattenItems } from './utils';
+import { isGroupItemProps } from './components/Items';
+function flattenItems(items) {
+    const flattenedItems = [];
+    function flatten(item) {
+        if (!isGroupItemProps(item)) {
+            flattenedItems.push(item);
+        }
+        if ('items' in item) {
+            for (const nestedItem of item.items) {
+                flatten(nestedItem);
+            }
+        }
+    }
+    for (const item of items) {
+        flatten(item);
+    }
+    return flattenedItems;
+}
 const DEFAULT_MIN_SEARCH_INPUT_LENGTH = 2;
-/**
- * Нечеткий поиск среди айтемов по полям 'content.option', 'content.caption', 'content.description', 'label'
- */
 export function useFuzzySearch(items, minSearchInputLength) {
     return useCallback((search) => {
         const searcher = new FuzzySearch(flattenItems(items), ['content.option', 'content.caption', 'content.description', 'label'], {});

package/dist/index.d.ts

@@ -1,4 +1,4 @@
 export * from './components';
 export { useFuzzySearch } from './hooks';
 export type { SearchState } from './types';
-export { extractChildIds, flattenItems } from './utils';
+export { extractChildIds } from './utils';

package/dist/index.js

@@ -1,3 +1,3 @@
 export * from './components';
 export { useFuzzySearch } from './hooks';
-export { extractChildIds, flattenItems } from './utils';
+export { extractChildIds } from './utils';

package/dist/utils.d.ts

@@ -1,5 +1,5 @@
 import { RefObject } from 'react';
-import { AccordionItemProps, BaseItemProps, ItemProps, NextListItemProps } from './components/Items';
+import { ItemProps } from './components/Items';
 type WithCollapsedItemsProps = {
     items: ItemProps[];
     openCollapsedItems: Array<number | string>;
@@ -11,10 +11,6 @@ export declare function withCollapsedItems({ items, openCollapsedItems }: WithCo
     expandedIds: (string | number)[];
 };
 export declare function extractItemRefs(items: ItemProps[]): RefObject<HTMLElement>[];
-/**
- * Функция возвращает массив id дочерних items
- * @function  extractItemIds
- */
 export declare function extractItemIds(items: ItemProps[]): Array<string | number>;
 export declare function extractChildIds({ items }: {
     items: ItemProps[];
@@ -22,9 +18,4 @@ export declare function extractChildIds({ items }: {
 export declare function extractAllChildIds({ items }: {
     items: ItemProps[];
 }): Array<string | number>;
-/**
- *  Функция разворачивает массив айтемов в плоский список
- *  @function  flattenItems
- */
-export declare function flattenItems(items: ItemProps[]): (BaseItemProps | AccordionItemProps | NextListItemProps)[];
 export {};

package/dist/utils.js

@@ -46,10 +46,6 @@ export function extractItemRefs(items) {
         return item.itemRef ? prev.concat([item.itemRef]) : prev;
     }, []);
 }
-/**
- * Функция возвращает массив id дочерних items
- * @function  extractItemIds
- */
 export function extractItemIds(items) {
     return items.reduce((prev, item) => {
         if (isGroupItemProps(item)) {
@@ -92,24 +88,3 @@ export function extractAllChildIds({ items }) {
         return item.id && !isGroupItemProps(item) ? prev.concat([item.id]) : prev;
     }, []);
 }
-/**
- *  Функция разворачивает массив айтемов в плоский список
- *  @function  flattenItems
- */
-export function flattenItems(items) {
-    const flattenedItems = [];
-    function flatten(item) {
-        if (!isGroupItemProps(item)) {
-            flattenedItems.push(item);
-        }
-        if ('items' in item) {
-            for (const nestedItem of item.items) {
-                flatten(nestedItem);
-            }
-        }
-    }
-    for (const item of items) {
-        flatten(item);
-    }
-    return flattenedItems;
-}

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "List",
-  "version": "0.4.2-preview-3bc93fc3.0",
+  "version": "0.5.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -32,7 +32,7 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/divider": "3.0.2-preview-3bc93fc3.0",
+    "@snack-uikit/divider": "3.0.1",
     "@snack-uikit/dropdown": "0.2.0",
     "@snack-uikit/icons": "0.20.1",
     "@snack-uikit/info-block": "0.3.0",
@@ -54,5 +54,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "a2fa7717157c8a23fa1fc6b64c67c7b2d9dfc39c"
+  "gitHead": "bfdd4a8e3c077eab0d45e177172a62b6dcbda06b"
 }

package/src/components/Items/BaseItem/BaseItem.tsx

@@ -19,6 +19,7 @@ export function BaseItem({
   afterContent,
   content,
   onClick,
+  onMouseDown,
   id,
   expandIcon,
   disabled,
@@ -107,6 +108,7 @@ export function BaseItem({
       className={cn(commonStyles.listItem, styles.droplistItem, className)}
       data-size={size}
       onClick={handleItemClick}
+      onMouseDown={onMouseDown}
       tabIndex={-1}
       data-non-pointer={inactive && !onClick}
       data-inactive={inactive || undefined}

package/src/components/Items/types.ts

@@ -32,6 +32,8 @@ export type BaseItemProps = WithSupportProps<{
 
   /** Колбек обработки клика */
   onClick?(e: MouseEvent<HTMLElement>): void;
+  /** Колбек обработки нажатия кнопки мыши */
+  onMouseDown?(e: MouseEvent<HTMLElement>): void;
   /** Колбек обработки нажатия клавиши */
   onKeyDown?(e: KeyboardEvent<HTMLElement>): void;
   /** Колбек обработки фокуса */

package/src/components/index.ts

@@ -1,6 +1,5 @@
 export * from './Lists';
 
-export type { AccordionItemProps, NextListItemProps, BaseItemProps, GroupItemProps, ItemProps } from './Items';
-export { isAccordionItemProps, isBaseItemProps, isGroupItemProps, isNextListItemProps } from './Items';
+export type { AccordionItemProps, NextListItemProps, BaseItemProps, GroupItemProps, ItemProps } from './Items/types';
 
 export { useGroupItemSelection } from './Items/hooks';

package/src/hooks.ts

@@ -1,14 +1,32 @@
 import FuzzySearch from 'fuzzy-search';
 import { useCallback } from 'react';
 
-import { ItemProps } from './components/Items';
-import { flattenItems } from './utils';
+import { isGroupItemProps, ItemProps } from './components/Items';
+
+function flattenItems(items: ItemProps[]): ItemProps[] {
+  const flattenedItems: ItemProps[] = [];
+
+  function flatten(item: ItemProps) {
+    if (!isGroupItemProps(item)) {
+      flattenedItems.push(item);
+    }
+
+    if ('items' in item) {
+      for (const nestedItem of item.items) {
+        flatten(nestedItem);
+      }
+    }
+  }
+
+  for (const item of items) {
+    flatten(item);
+  }
+
+  return flattenedItems;
+}
 
 const DEFAULT_MIN_SEARCH_INPUT_LENGTH = 2;
 
-/**
- * Нечеткий поиск среди айтемов по полям 'content.option', 'content.caption', 'content.description', 'label'
- */
 export function useFuzzySearch(items: ItemProps[], minSearchInputLength?: number) {
   return useCallback(
     (search: string) => {

package/src/index.ts

@@ -1,4 +1,4 @@
 export * from './components';
 export { useFuzzySearch } from './hooks';
 export type { SearchState } from './types';
-export { extractChildIds, flattenItems } from './utils';
+export { extractChildIds } from './utils';

package/src/utils.ts

@@ -1,14 +1,11 @@
 import { RefObject } from 'react';
 
 import {
-  AccordionItemProps,
-  BaseItemProps,
   isAccordionItemProps,
   isBaseItemProps,
   isGroupItemProps,
   isNextListItemProps,
   ItemProps,
-  NextListItemProps,
 } from './components/Items';
 
 type WithCollapsedItemsProps = {
@@ -80,11 +77,6 @@ export function extractItemRefs(items: ItemProps[]): RefObject<HTMLElement>[] {
   }, [] as RefObject<HTMLElement>[]);
 }
 
-/**
- * Функция возвращает массив id дочерних items
- * @function  extractItemIds
- */
-
 export function extractItemIds(items: ItemProps[]): Array<string | number> {
   return items.reduce(
     (prev: Array<string | number>, item: ItemProps) => {
@@ -146,30 +138,3 @@ export function extractAllChildIds({ items }: { items: ItemProps[] }): Array<str
       [] as Array<string | number>,
     );
 }
-
-/**
- *  Функция разворачивает массив айтемов в плоский список
- *  @function  flattenItems
- */
-
-export function flattenItems(items: ItemProps[]): (BaseItemProps | AccordionItemProps | NextListItemProps)[] {
-  const flattenedItems: (BaseItemProps | AccordionItemProps | NextListItemProps)[] = [];
-
-  function flatten(item: ItemProps) {
-    if (!isGroupItemProps(item)) {
-      flattenedItems.push(item);
-    }
-
-    if ('items' in item) {
-      for (const nestedItem of item.items) {
-        flatten(nestedItem);
-      }
-    }
-  }
-
-  for (const item of items) {
-    flatten(item);
-  }
-
-  return flattenedItems;
-}