indicator-ui 0.1.118 → 0.1.120

package/dist/scss/ui/CheckboxMark/styles/mixins/properties/incorrect.scss

@@ -1,49 +1,65 @@
 @use '../../../../../styles' as *;
 
 @mixin incorrect-checked-hover() {
-  background-color: var(--error-600);
+  border: transparent !important;
+  background-color: var(--error-600) !important;
 
-  border: transparent;
-}
-
-@mixin incorrect-disabled-hover() {
-  background-color: var(--gray-300);
-
-  border: transparent;
+  @include darkTheme {
+    border: transparent !important;
+    background-color: var(--error-700) !important;
+  }
 }
 
 @mixin incorrect-checked() {
+  border: transparent;
   background-color: var(--error-500);
 
-  border: transparent;
-  @include fnt($size: 14, $line-height: 14, $weight: 500, $color: var(--base-white));
+  @include fnt($size: 14, $line-height: 14, $weight: 500);
+  @include fnt($color: var(--base-white));
   @include modify-svg($stroke: var(--base-white));
 
-  &:after {
-    display: none;
+  @include darkTheme {
+    background-color: var(--error-600);
+    @include fnt($color: var(--gray-50));
+    @include modify-svg($stroke: var(--gray-50));
   }
 
-  @include tablet-plus {
-    &:hover {
-      @include incorrect-checked-hover();
-    }
+  &:after {
+    display: none;
   }
 }
 
-@mixin incorrect-disabled() {
+@mixin incorrect-checked-disabled() {
   background-color: var(--gray-300);
-
   border: transparent;
   @include fnt($size: 14, $line-height: 14, $weight: 500, $color: var(--base-white));
   @include modify-svg($stroke: var(--base-white));
 
+  @include darkTheme {
+    background-color: var(--gray-700);
+    @include fnt($color: var(--gray-500));
+    @include modify-svg($stroke: var(--gray-500));
+  }
+
   &:after {
     display: none;
   }
+}
 
-  @include tablet-plus {
-    &:hover {
-      @include incorrect-disabled-hover();
-    }
+@mixin incorrect-disabled() {
+  border: 1px solid var(--gray-300);
+  background-color: var(--gray-100);
+  @include fnt($size: 14, $line-height: 14, $weight: 500, $color: var(--gray-300));
+  @include modify-svg($stroke: var(--base-white));
+
+  @include darkTheme {
+    border: 1px solid var(--gray-700);
+    background-color: var(--gray-800);
+    @include fnt($color: var(--gray-500));
+    @include modify-svg($stroke: var(--gray-500));
+  }
+
+  &:after {
+    display: none;
   }
 }

package/dist/scss/ui/CheckboxMark/styles/mixins/properties/indeterminate.scss

@@ -2,6 +2,10 @@
 
 @mixin indeterminate-hover() {
   border: 1px solid var(--primary-400);
+  @include darkTheme {
+    border: 1px solid var(--primary-700);
+    background-color: var(--primary-900);
+  }
 }
 
 @mixin indeterminate() {
@@ -11,9 +15,9 @@
   @include modify-svg($stroke: var(--primary-500));
   @include fnt($size: 14, $line-height: 14, $weight: 500, $color: var(--primary-500));
 
-  @include tablet-plus {
-    &:hover {
-      @include indeterminate-hover();
-    }
+  @include darkTheme {
+    background-color: var(--primary-950);
+    border: 1px solid var(--primary-700);
+    @include fnt($size: 14, $line-height: 14, $weight: 500, $color: var(--primary-600));
   }
 }

package/dist/scss/ui/CheckboxMark/styles/mixins/properties/radio.scss

@@ -1,6 +1,6 @@
 @use '../../../../../styles' as *;
 
-@mixin radio($theme: 'light') {
+@mixin radio() {
   border-radius: 50%;
 
   &:after {
@@ -10,11 +10,5 @@
     width: 8px;
     height: 8px;
     border-radius: 50%;
-
-    @if $theme == 'light' {
-      background-color: var(--primary-500);
-    } @else {
-      background-color: var(--rose-600);
-    }
   }
 }

package/dist/ts/src/test/pages/ButtonsPage.d.ts

@@ -1 +1,2 @@
+import './style.scss';
 export declare function ButtonsPage(): JSX.Element;

package/dist/ts/src/test/pages/DropdownV2Page.d.ts

@@ -0,0 +1 @@
+export declare function DropdownV2Page(): JSX.Element;

package/dist/ts/src/test/pages/index.d.ts

@@ -1,7 +1,7 @@
 export * from './HomePage';
 export * from './ButtonsPage';
 export * from './MicroButtonsPage';
-export * from './FieldsPage';
+export * from './FieldsPage/FieldsPage';
 export * from './CheckboxMarkPage';
 export * from './FormBuilderPage';
 export * from './CheckboxPage';
@@ -27,3 +27,4 @@ export * from './FormPage';
 export * from './SelectFieldPage';
 export * from './BreadcrumbsPage';
 export * from './UseDragPage';
+export * from './DropdownV2Page';

package/dist/ts/src/ui/Buttons/types/ButtonTypes.d.ts

@@ -35,7 +35,11 @@ export type ButtonPropsType<T extends React.ElementType> = AsProps<T, {
     }>;
     /** Дополнительные имена стилей */
     additionStyles?: string | string[];
-    /** Тема кнопки: светлая (primary: blue-dark) или темная (primary: rose)*/
+    /**
+     * Тема кнопки: светлая (primary: blue-dark) или темная (primary: rose)
+     *
+     * @deprecated
+     * */
     theme?: "light" | "dark" | undefined;
     isLoading?: boolean;
     counter?: React.ReactNode;

package/dist/ts/src/ui/DateTimePicker/hooks/useDateTimePicker.d.ts

@@ -25,7 +25,7 @@ export declare function useDateTimePicker<T extends DateType>(props: PropsType<T
     handleSubmit: () => void;
     setPickerType: React.Dispatch<React.SetStateAction<"time" | "date" | "month" | "year">>;
     getDate: () => React.ComponentProps<typeof DatePicker>["date"];
-    onClickDate: (value: [] | [string | undefined] | [string | undefined, string | undefined]) => void;
+    onClickDate: (value: [] | [string | undefined, string | undefined] | [string | undefined]) => void;
     onYear: () => void;
     onMonth: () => void;
     getHourValue: () => React.ComponentProps<typeof TimePicker>["hour"];

package/dist/ts/src/ui/DropdownItem/types/DropdownItemTypes.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
-import { UserPickUrlType } from "../../../ui";
+import { UserPick } from "../../../ui";
+type UserPickUrlType = React.ComponentProps<typeof UserPick>['url'];
 type AdditionElementPropsType = {
     isHover?: boolean;
     selected?: boolean;

package/dist/ts/src/ui/DropdownV2/index.d.ts

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

package/dist/ts/src/ui/DropdownV2/styles/components/index.d.ts

@@ -0,0 +1,2 @@
+export { default as InfoStyle } from './Info.module.scss';
+export { default as CheckStyle } from './Check.module.scss';

package/dist/ts/src/ui/DropdownV2/styles/index.d.ts

@@ -0,0 +1,3 @@
+export { default as DropdownV2Style } from './DropdownV2.module.scss';
+export { default as DropdownItemV2Style } from './DropdownItemV2.module.scss';
+export * from './components';

package/dist/ts/src/ui/DropdownV2/ui/DropdownItemV2.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { AsProps } from "../../../types";
+type PropsType<T extends React.ElementType> = AsProps<T, {
+    selected?: boolean;
+    disabled?: boolean;
+    title?: React.ReactNode;
+    avatar?: string;
+    subtitle?: React.ReactNode;
+    icon?: React.ReactNode;
+    size?: 'small' | 'medium';
+}>;
+export declare function DropdownItemV2<T extends React.ElementType = 'li'>(props: PropsType<T>): JSX.Element;
+export {};

package/dist/ts/src/ui/DropdownV2/ui/DropdownV2.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { Merge } from "../../../types";
+import { DropdownItemV2 } from "./DropdownItemV2";
+type ListItemType = React.ComponentProps<typeof DropdownItemV2>;
+type ListType = ListItemType[];
+type PropsType = Merge<React.ComponentProps<'ul'>, {
+    list?: ListType;
+}>;
+export declare const DropdownV2: React.ForwardRefExoticComponent<Omit<PropsType, "ref"> & React.RefAttributes<HTMLUListElement>>;
+export {};

package/dist/ts/src/ui/DropdownV2/ui/components/Check.d.ts

@@ -0,0 +1,6 @@
+type PropsType = {
+    selected?: boolean;
+    disabled?: boolean;
+};
+export declare function Check(props: PropsType): JSX.Element;
+export {};

package/dist/ts/src/ui/DropdownV2/ui/components/Info.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { DropdownItemV2 } from "../DropdownItemV2";
+type PropsType = {
+    title?: React.ReactNode;
+    subtitle?: React.ReactNode;
+    disabled?: boolean;
+    size?: React.ComponentProps<typeof DropdownItemV2>['size'];
+};
+export declare function Info(props: PropsType): JSX.Element;
+export {};

package/dist/ts/src/ui/DropdownV2/ui/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Check';
+export * from './Info';

package/dist/ts/src/ui/DropdownV2/ui/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DropdownItemV2';
+export * from './DropdownV2';

package/dist/ts/src/ui/InputFields/FlexField/types/FlexFieldTypes.d.ts

@@ -1,6 +1,7 @@
 import React, { ReactNode } from "react";
+import { UserPick } from "../../../../ui";
 import { FieldsBasePropsType } from "../../FieldsBase";
-import { UserPickUrlType } from "../../../../ui";
+type UserPickUrlType = React.ComponentProps<typeof UserPick>['url'];
 export type DisplayTypes = "small" | "large" | undefined;
 export type BlocksType = any;
 export type PatternType = any;
@@ -75,3 +76,4 @@ export type FlexFieldPropsType = FieldsBasePropsType<FlexFieldValueType> & {
      * */
     theme?: "dark" | "light" | undefined;
 };
+export {};

package/dist/ts/src/ui/InputFields/FlexField/ui/FlexField.d.ts

@@ -13,7 +13,7 @@ export declare const FlexField: React.ForwardRefExoticComponent<import("../../..
     notInput?: boolean;
     icon?: React.ReactNode;
     textSupport?: boolean | string | React.ReactNode;
-    userPic?: import("../../../../ui").UserPickUrlType | React.ReactNode | false;
+    userPic?: (string | null | undefined) | React.ReactNode | false;
     help?: boolean | React.ReactNode;
     dropdown?: boolean | React.ReactNode;
     onDropdownClick?: (e: any) => void;

package/dist/ts/src/ui/Tag/ui/FilterTag.d.ts

@@ -8,6 +8,6 @@ type PropsType<T extends React.ElementType> = AsProps<T, {
     onClose?: () => void;
     active?: boolean;
 }>;
-export declare const _FilterTag: <T extends React.ElementType = "button">(props: PropsType<T>, ref: RefType<T>) => JSX.Element;
+export declare const _FilterTag: <T extends React.ElementType = "button">(props: PropsType<T>, ref: React.Ref<RefType<T>>) => JSX.Element;
 export declare const FilterTag: <T extends React.ElementType = "button">(props: PropsType<T> & React.RefAttributes<RefType<T>>) => JSX.Element;
 export {};

package/dist/ts/src/ui/UserPick/index.d.ts

@@ -1,2 +1 @@
 export * from './ui';
-export * from './types';

package/dist/ts/src/ui/UserPick/ui/UserPick.d.ts

@@ -1,2 +1,18 @@
-import { UserPickPropsType } from "../types";
-export declare function UserPick({ size, url, additionStyles }: UserPickPropsType): JSX.Element;
+export type PropsType = {
+    /**
+     * Ссылка на изображение.
+     *
+     * __Если не указано (```!!url === false```) появится заглушка.__
+     * */
+    url?: string | null;
+    /**
+     * Один из предоставленных размеров, либо кастомный,
+     * которому будет равна длинна и высота картинки.
+     * */
+    size?: '20' | '24' | '32' | '40' | '48' | '64' | '72' | '80' | '96' | '120' | '144' | '160' | number;
+    /** Дополнительные имена стилей */
+    additionStyles?: string | string[];
+    className?: string;
+    disabled?: boolean;
+};
+export declare function UserPick(props: PropsType): JSX.Element;

package/dist/ts/src/ui/formFields/FormPaginatedSelectField/hooks/useFormPaginatedSelectField.d.ts

@@ -6,6 +6,7 @@ type BasePropsType<D, M extends boolean> = FieldPropsType<ValueType<D, M>> & {
     options?: OptionsType<D>;
     multiple?: M;
     disabled?: boolean;
+    placeholder?: string;
     /** Заменяет `options`, которые есть сейчас */
     search?: (props: FetchEventPropsType<D>) => Promise<OptionsType<D>>;
     /** Добавляет `options` к текущим */
@@ -49,6 +50,7 @@ export declare function useFormPaginatedSelectField<D, M extends boolean = false
         style?: React.CSSProperties | undefined;
         title?: string | undefined | undefined;
         id?: string | undefined | undefined;
+        onResize?: React.ReactEventHandler<HTMLDivElement> | undefined;
         onSubmit?: React.FormEventHandler<HTMLDivElement> | undefined;
         onReset?: React.FormEventHandler<HTMLDivElement> | undefined;
         key?: React.Key | null | undefined;
@@ -206,7 +208,6 @@ export declare function useFormPaginatedSelectField<D, M extends boolean = false
         onProgressCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
         onRateChange?: React.ReactEventHandler<HTMLDivElement> | undefined;
         onRateChangeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-        onResize?: React.ReactEventHandler<HTMLDivElement> | undefined;
         onResizeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
         onSeeked?: React.ReactEventHandler<HTMLDivElement> | undefined;
         onSeekedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;

package/dist/ts/src/ui/index.d.ts

@@ -27,3 +27,4 @@ export * from './Tooltip';
 export * from './Dropdown';
 export * from './formFields';
 export * from './Breadcrumbs';
+export * from './DropdownV2';

package/docs/CSSVariables/CSSThemeCustomize.md

@@ -0,0 +1,123 @@
+# CSS кастомизация
+
+---
+
+## FormField
+
+- ### base
+  - `--ui-form-field-label-color`
+  - `--ui-form-field-required-color`
+  - `--ui-form-field-hint-color`
+  - `--ui-form-field-helper-link-color`
+  - `--ui-form-field-background-color`
+  - `--ui-form-field-border-color`
+  - `--ui-form-field-border-radius`
+  - `--ui-form-field-text-color`
+  - `--ui-form-field-placeholder-color`
+  - `--ui-form-field-box-shadow`
+
+- #### focus
+  - `--ui-form-field-focus-text-color`
+  - `--ui-form-field-focus-background-color`
+  - `--ui-form-field-focus-border-color`
+  - `--ui-form-field-focus-box-shadow`
+
+- #### disabled
+  - `--ui-form-field-disabled-text-color`
+  - `--ui-form-field-disabled-background-color`
+  - `--ui-form-field-disabled-border-color`
+
+- #### error
+  - `--ui-form-field-error-text-color`
+  - `--ui-form-field-error-hint-color`
+  - `--ui-form-field-error-background-color`
+  - `--ui-form-field-error-border-color`
+  - `--ui-form-field-error-box-shadow`
+
+- #### error focus
+  - `--ui-form-field-error-focus-text-color`
+  - `--ui-form-field-error-focus-background-color`
+  - `--ui-form-field-error-focus-border-color`
+  - `--ui-form-field-error-focus-box-shadow`
+
+## Dropdown
+- `--ui-dropdown-background-color`
+- `--ui-dropdown-border-color`
+- `--ui-dropdown-border-radius`
+- `--ui-dropdown-box-shadow`
+- `--ui-dropdown-title-color`
+
+### Dropdown Item
+- #### base
+  - `--ui-dropdown-item-border-radius` - сюда можно писать только одиночный радиус
+  - `--ui-dropdown-item-text-color`
+  - `--ui-dropdown-item-support-text-color`
+  - `--ui-dropdown-item-show-icon-color`
+- #### hover
+  - `--ui-dropdown-item-hover-background-color`
+  - `--ui-dropdown-item-hover-text-color`
+  - `--ui-dropdown-item-hover-support-text-color`
+  - `--ui-dropdown-item-hover-show-icon-color`
+- #### active
+  - `--ui-dropdown-item-active-background-color`
+  - `--ui-dropdown-item-active-text-color`
+  - `--ui-dropdown-item-active-support-text-color`
+  - `--ui-dropdown-item-active-show-icon-color`
+  - `--ui-dropdown-item-active-check-icon-color`
+- #### active hover
+  - `--ui-dropdown-item-active-hover-background-color`
+  - `--ui-dropdown-item-active-hover-text-color`
+  - `--ui-dropdown-item-active-hover-support-text-color`
+  - `--ui-dropdown-item-active-hover-show-icon-color`
+  - `--ui-dropdown-item-active-hover-check-icon-color`
+
+## Checkbox
+- ### base
+  - `--ui-checkbox-text-color`
+  - `--ui-checkbox-support-text-color`
+- ### focus
+  - `--ui-checkbox-focus-text-color`
+  - `--ui-checkbox-focus-support-text-color`
+- ### error
+  - `--ui-checkbox-error-text-color`
+  - `--ui-checkbox-error-support-text-color`
+- ### error focus
+  - `--ui-checkbox-error-focus-text-color`
+  - `--ui-checkbox-error-focus-text-color`
+- ### disabled
+  - `--ui-checkbox-disabled-text-color`
+  - `--ui-checkbox-disabled-support-text-color`
+- ### active
+  - `--ui-checkbox-active-text-color`
+  - `--ui-checkbox-active-support-text-color`
+- ### active focus
+  - `--ui-checkbox-active-focus-text-color`
+  - `--ui-checkbox-active-focus-support-text-color`
+
+### Checkbox Mark
+- ### base
+  - `--ui-checkbox-mark-background-color`
+  - `--ui-checkbox-mark-border-color`
+- ### focus
+  - `--ui-checkbox-mark-focus-background-color`
+  - `--ui-checkbox-mark-focus-border-color`
+- ### error
+  - `--ui-checkbox-mark-error-background-color`
+  - `--ui-checkbox-mark-error-border-color`
+  - `--ui-checkbox-mark-error-symbol-color`
+- ### error focus
+  - `--ui-checkbox-mark-error-focus-background-color`
+  - `--ui-checkbox-mark-error-focus-border-color`
+  - `--ui-checkbox-mark-error-focus-symbol-color`
+- ### disabled
+  - `--ui-checkbox-mark-disabled-background-color`
+  - `--ui-checkbox-mark-disabled-border-color`
+  - `--ui-checkbox-mark-disabled-symbol-color`
+- ### active
+  - `--ui-checkbox-mark-active-background-color`
+  - `--ui-checkbox-mark-active-border-color`
+  - `--ui-checkbox-mark-active-symbol-color`
+- ### active focus
+  - `--ui-checkbox-mark-active-focus-background-color`
+  - `--ui-checkbox-mark-active-focus-border-color`
+  - `--ui-checkbox-mark-active-focus-symbol-color`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "indicator-ui",
-  "version": "0.1.118",
+  "version": "0.1.120",
   "main": "dist/index.js",
   "types": "dist/ts/src/index.d.ts",
   "style": "dist/index.css",

package/dist/ts/src/ui/UserPick/types/UserPickTypes.d.ts

@@ -1,17 +0,0 @@
-/**
- * Один из предоставленных размеров, либо кастомный,
- * которому будет равна длинна и высота картинки.
- * */
-export type UserPickSizeType = '20' | '24' | '32' | '40' | '48' | '64' | '72' | '80' | '96' | '120' | '144' | '160' | number;
-/**
- * Ссылка на изображение.
- *
- * __Если не указано (```!!url === false```) появится заглушка.__
- * */
-export type UserPickUrlType = string | undefined | null;
-export type UserPickPropsType = {
-    url?: UserPickUrlType;
-    size?: UserPickSizeType;
-    /** Дополнительные имена стилей */
-    additionStyles?: string | string[];
-};

package/dist/ts/src/ui/UserPick/types/index.d.ts

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