@snack-uikit/fields 0.16.1-preview-da21d728.0 → 0.17.0

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.17.0 (2024-02-27)
+
+
+### Bug Fixes
+
+* **FF-4324:** fix infinite response in actocomplete mode ([ad19e0c](https://github.com/cloud-ru-tech/snack-uikit/commit/ad19e0cb6e91b4dda12bc34a3f55fe823f508602))
+* **FF-4324:** fix value dec value as value === max ([a8bb974](https://github.com/cloud-ru-tech/snack-uikit/commit/a8bb9747f31864ea616fef6b9e2166047faceae7))
+
+
+### Features
+
+* **FF-4323:** add not found items from value ([a924867](https://github.com/cloud-ru-tech/snack-uikit/commit/a92486740ce4de274ff7331fd9dbf67a9f1a39da))
+* **FF-4324:** add appearance to tags view in muliple select ([1ce6b81](https://github.com/cloud-ru-tech/snack-uikit/commit/1ce6b817714bf6fb35e394338ab0083fa92ca44f))
+
+
+
+
+
+## 0.16.1 (2024-02-27)
+
+### Only dependencies have been changed
+* [@snack-uikit/list@0.5.0](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/list/CHANGELOG.md)
+
+
+
+
+
 # 0.16.0 (2024-02-26)
 
 

package/dist/components/FieldSelect/FieldSelectMultiple.js

@@ -23,7 +23,7 @@ import { FieldDecorator } from '../FieldDecorator';
 import { extractFieldDecoratorProps } from '../FieldDecorator/utils';
 import { useButtons, useHandleDeleteItem, useHandleOnKeyDown, useSearchInput } from './hooks';
 import styles from './styles.module.css';
-import { extractListProps, findSelectedOptions, getArrowIcon, transformOptionsToItems } from './utils';
+import { extractListProps, findSelectedOptions, getArrowIcon, mapOptionToAppearance, transformOptionsToItems, } from './utils';
 const BASE_MIN_WIDTH = 4;
 export const FieldSelectMultiple = forwardRef((_a, ref) => {
     var _b, _c, _d;
@@ -33,6 +33,7 @@ export const FieldSelectMultiple = forwardRef((_a, ref) => {
     const contentRef = useRef(null);
     const [open = false, setOpen] = useValueControl({ value: openProp, onChange: onOpenChange });
     const items = useMemo(() => transformOptionsToItems(options), [options]);
+    const mapItemsToTagAppearance = useMemo(() => mapOptionToAppearance(options), [options]);
     const [value, setValue] = useValueControl({
         value: valueProp,
         defaultValue,
@@ -139,7 +140,7 @@ export const FieldSelectMultiple = forwardRef((_a, ref) => {
             }, dataFiltered: (_d = rest.dataFiltered) !== null && _d !== void 0 ? _d : Boolean(inputValue.length), size: size, open: !disabled && !readonly && open, onOpenChange: handleOpenChange, children: ({ onKeyDown }) => {
                 var _a, _b, _c, _d;
                 return (_jsx(FieldContainerPrivate, { className: cn(styles.container, styles.tagContainer), validationState: validationState, disabled: disabled, readonly: readonly, focused: open, variant: 'single-line-container', inputRef: localRef, size: size, prefix: prefixIcon, children: _jsxs(_Fragment, { children: [_jsxs("div", { className: styles.contentWrapper, ref: contentRef, children: [selected &&
-                                        selected.map(option => (_jsx(Tag, { size: size === 'l' ? 's' : 'xs', tabIndex: -1, label: String(option.content.option), onDelete: !option.disabled && !disabled && !readonly ? handleItemDelete(option) : undefined }, option.id))), _jsx("div", { className: styles.inputWrapper, style: {
+                                        selected.map(option => (_jsx(Tag, { size: size === 'l' ? 's' : 'xs', tabIndex: -1, label: String(option.content.option), appearance: option.id ? mapItemsToTagAppearance[option === null || option === void 0 ? void 0 : option.id] : 'neutral', onDelete: !option.disabled && !disabled && !readonly ? handleItemDelete(option) : undefined }, option.id))), _jsx("div", { className: styles.inputWrapper, style: {
                                             minWidth: value
                                                 ? Math.min((_b = (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : BASE_MIN_WIDTH, (_d = (_c = inputPlugRef.current) === null || _c === void 0 ? void 0 : _c.clientWidth) !== null && _d !== void 0 ? _d : BASE_MIN_WIDTH)
                                                 : '100%',

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

@@ -1,13 +1,14 @@
 import { ReactElement } from 'react';
 import { InputPrivateProps } from '@snack-uikit/input-private';
 import { AccordionItemProps, BaseItemProps, GroupItemProps, ListProps, NextListItemProps, SelectionMultipleState, SelectionSingleState } from '@snack-uikit/list';
+import { TagProps } from '@snack-uikit/tag';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { FieldDecoratorProps } from '../FieldDecorator';
 export type OptionProps = BaseOptionProps | AccordionOptionProps | GroupOptionProps | NestListOptionProps;
 export type OptionWithoutGroup = BaseOptionProps | AccordionOptionProps | NestListOptionProps;
 export type BaseOptionProps = Pick<BaseItemProps, 'beforeContent' | 'afterContent' | 'disabled'> & BaseItemProps['content'] & {
     value: string | number;
-};
+} & Pick<TagProps, 'appearance'>;
 export type AccordionOptionProps = Pick<AccordionItemProps, 'type'> & BaseOptionProps & {
     options: OptionProps[];
 };

package/dist/components/FieldSelect/utils.d.ts

@@ -1,10 +1,12 @@
 import { Size } from '@snack-uikit/input-private';
 import { DroplistProps, ItemProps, SelectionSingleValueType } from '@snack-uikit/list';
+import { TagProps } from '@snack-uikit/tag';
 import { AccordionOptionProps, BaseOptionProps, FieldSelectMultipleProps, FieldSelectProps, FieldSelectSingleProps, GroupOptionProps, ItemWithId, NestListOptionProps, OptionProps } from './types';
 export declare function isBaseOptionProps(option: any): option is BaseOptionProps;
 export declare function isAccordionOptionProps(option: any): option is AccordionOptionProps;
 export declare function isNextListOptionProps(option: any): option is NestListOptionProps;
 export declare function isGroupOptionProps(option: any): option is GroupOptionProps;
+export declare function mapOptionToAppearance(options: OptionProps[]): Record<string | number, TagProps['appearance'] | undefined>;
 export declare function transformOptionsToItems(options: OptionProps[]): ItemProps[];
 export declare function findSelectedOption(items: ItemProps[], value: SelectionSingleValueType): [ItemWithId | undefined, ItemWithId | undefined];
 export declare function findSelectedOptions(items: ItemProps[], value: SelectionSingleValueType[] | undefined): [ItemWithId[] | undefined, ItemWithId[] | undefined];

package/dist/components/FieldSelect/utils.js

@@ -28,6 +28,24 @@ export function isNextListOptionProps(option) {
 export function isGroupOptionProps(option) {
     return 'options' in option && option['type'] === undefined;
 }
+export function mapOptionToAppearance(options) {
+    let mapOption2Appearance = {};
+    options.forEach(option => {
+        if (isAccordionOptionProps(option) || isNextListOptionProps(option)) {
+            const { options, value, appearance } = option;
+            mapOption2Appearance = Object.assign(Object.assign(Object.assign({}, mapOption2Appearance), { [value]: appearance }), mapOptionToAppearance(options));
+        }
+        if (isGroupOptionProps(option)) {
+            const { options } = option;
+            mapOption2Appearance = Object.assign(Object.assign({}, mapOption2Appearance), mapOptionToAppearance(options));
+        }
+        const { value, appearance } = option;
+        if (value !== undefined) {
+            mapOption2Appearance = Object.assign(Object.assign({}, mapOption2Appearance), { [value]: appearance });
+        }
+    });
+    return mapOption2Appearance;
+}
 export function transformOptionsToItems(options) {
     return options.map(option => {
         if (isAccordionOptionProps(option) || isNextListOptionProps(option)) {

package/dist/components/FieldSlider/helpers/generateAllowedValues.js

@@ -1,7 +1,7 @@
 export const generateAllowedValues = (min, max, step) => {
     const values = [];
     let current = min;
-    while (current < max) {
+    while (current <= max) {
         values.push(current);
         current += step;
     }

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Fields",
-  "version": "0.16.1-preview-da21d728.0",
+  "version": "0.17.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -34,13 +34,13 @@
   "dependencies": {
     "@snack-uikit/button": "0.16.1",
     "@snack-uikit/calendar": "0.7.6",
-    "@snack-uikit/droplist": "0.13.9-preview-da21d728.0",
+    "@snack-uikit/droplist": "0.13.9",
     "@snack-uikit/icons": "0.20.1",
     "@snack-uikit/input-private": "3.1.1",
-    "@snack-uikit/list": "0.4.2-preview-da21d728.0",
+    "@snack-uikit/list": "0.6.0",
     "@snack-uikit/scroll": "0.5.2",
     "@snack-uikit/slider": "0.1.4",
-    "@snack-uikit/tag": "0.8.1-preview-da21d728.0",
+    "@snack-uikit/tag": "0.8.1",
     "@snack-uikit/tooltip": "0.12.1",
     "@snack-uikit/truncate-string": "0.4.9",
     "@snack-uikit/utils": "3.2.0",
@@ -56,5 +56,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "9451c0c01e3175ef35d07864f3189c690f73c268"
+  "gitHead": "559f1542bf57e8a3be174390e4bd1f2b8f799946"
 }

package/src/components/FieldSelect/FieldSelectMultiple.tsx

@@ -14,7 +14,13 @@ import { extractFieldDecoratorProps } from '../FieldDecorator/utils';
 import { useButtons, useHandleDeleteItem, useHandleOnKeyDown, useSearchInput } from './hooks';
 import styles from './styles.module.scss';
 import { FieldSelectMultipleProps, ItemWithId } from './types';
-import { extractListProps, findSelectedOptions, getArrowIcon, transformOptionsToItems } from './utils';
+import {
+  extractListProps,
+  findSelectedOptions,
+  getArrowIcon,
+  mapOptionToAppearance,
+  transformOptionsToItems,
+} from './utils';
 
 const BASE_MIN_WIDTH = 4;
 
@@ -52,6 +58,8 @@ export const FieldSelectMultiple = forwardRef<HTMLInputElement, FieldSelectMulti
 
     const [open = false, setOpen] = useValueControl<boolean>({ value: openProp, onChange: onOpenChange });
     const items = useMemo(() => transformOptionsToItems(options), [options]);
+    const mapItemsToTagAppearance = useMemo(() => mapOptionToAppearance(options), [options]);
+
     const [value, setValue] = useValueControl<SelectionSingleValueType[]>({
       value: valueProp,
       defaultValue,
@@ -225,6 +233,7 @@ export const FieldSelectMultiple = forwardRef<HTMLInputElement, FieldSelectMulti
                         tabIndex={-1}
                         label={String(option.content.option)}
                         key={option.id}
+                        appearance={option.id ? mapItemsToTagAppearance[option?.id] : 'neutral'}
                         onDelete={!option.disabled && !disabled && !readonly ? handleItemDelete(option) : undefined}
                       />
                     ))}

package/src/components/FieldSelect/types.ts

@@ -10,6 +10,7 @@ import {
   SelectionMultipleState,
   SelectionSingleState,
 } from '@snack-uikit/list';
+import { TagProps } from '@snack-uikit/tag';
 import { WithSupportProps } from '@snack-uikit/utils';
 
 import { FieldDecoratorProps } from '../FieldDecorator';
@@ -21,7 +22,7 @@ export type OptionProps = BaseOptionProps | AccordionOptionProps | GroupOptionPr
 export type OptionWithoutGroup = BaseOptionProps | AccordionOptionProps | NestListOptionProps;
 
 export type BaseOptionProps = Pick<BaseItemProps, 'beforeContent' | 'afterContent' | 'disabled'> &
-  BaseItemProps['content'] & { value: string | number };
+  BaseItemProps['content'] & { value: string | number } & Pick<TagProps, 'appearance'>;
 
 export type AccordionOptionProps = Pick<AccordionItemProps, 'type'> & BaseOptionProps & { options: OptionProps[] };
 export type GroupOptionProps = Omit<GroupItemProps, 'items' | 'id'> & { options: OptionProps[] };

package/src/components/FieldSelect/utils.ts

@@ -1,6 +1,7 @@
 import { ChevronDownSVG, ChevronUpSVG } from '@snack-uikit/icons';
 import { ICON_SIZE, SIZE, Size } from '@snack-uikit/input-private';
 import { DroplistProps, flattenItems, ItemProps, SelectionSingleValueType } from '@snack-uikit/list';
+import { TagProps } from '@snack-uikit/tag';
 
 import {
   AccordionOptionProps,
@@ -34,6 +35,34 @@ export function isGroupOptionProps(option: any): option is GroupOptionProps {
   return 'options' in option && option['type'] === undefined;
 }
 
+export function mapOptionToAppearance(
+  options: OptionProps[],
+): Record<string | number, TagProps['appearance'] | undefined> {
+  let mapOption2Appearance: Record<string | number, TagProps['appearance'] | undefined> = {};
+
+  options.forEach(option => {
+    if (isAccordionOptionProps(option) || isNextListOptionProps(option)) {
+      const { options, value, appearance } = option;
+
+      mapOption2Appearance = { ...mapOption2Appearance, [value]: appearance, ...mapOptionToAppearance(options) };
+    }
+
+    if (isGroupOptionProps(option)) {
+      const { options } = option;
+
+      mapOption2Appearance = { ...mapOption2Appearance, ...mapOptionToAppearance(options) };
+    }
+
+    const { value, appearance } = option as BaseOptionProps;
+
+    if (value !== undefined) {
+      mapOption2Appearance = { ...mapOption2Appearance, [value]: appearance };
+    }
+  });
+
+  return mapOption2Appearance;
+}
+
 export function transformOptionsToItems(options: OptionProps[]): ItemProps[] {
   return options.map(option => {
     if (isAccordionOptionProps(option) || isNextListOptionProps(option)) {

package/src/components/FieldSlider/helpers/generateAllowedValues.ts

@@ -3,7 +3,7 @@ export const generateAllowedValues = (min: number, max: number, step: number): n
 
   let current = min;
 
-  while (current < max) {
+  while (current <= max) {
     values.push(current);
     current += step;
   }