@alfalab/core-components-picker-button 11.2.0 → 11.3.0

package/modern/useSkeleton-1b036d4b.d.ts

@@ -0,0 +1,40 @@
+/// <reference types="react" />
+import React from "react";
+import { ReactNode } from "react";
+import { TextSkeletonProps } from "./types-1b036d4b";
+type SkeletonProps = {
+    /**
+     * Флаг, явно задающий состояние, при котором контент закрывается прелоадером
+     */
+    visible?: boolean;
+    /**
+     * Флаг явного включения анимации скелета
+     */
+    animate?: boolean;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительные инлайн стили
+     */
+    style?: React.CSSProperties;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Дочерние элементы.
+     */
+    children?: ReactNode;
+};
+declare const Skeleton: React.FC<SkeletonProps>;
+type SkeletonProps$0 = {
+    wrapperClassName?: string;
+    dataTestId?: string;
+};
+declare function useSkeleton(showSkeleton?: boolean, skeletonProps?: TextSkeletonProps): {
+    renderSkeleton: (props: SkeletonProps$0) => React.JSX.Element | null;
+    textRef: React.RefObject<HTMLElement>;
+};
+export { SkeletonProps, Skeleton, useSkeleton };

package/modern/utils-d2597f31.d.ts

@@ -0,0 +1,41 @@
+import { ReactNode, RefObject } from 'react';
+import { BaseSelectProps, GroupShape, OptionShape } from "./typings-0816e61d";
+declare const isGroup: (item: OptionShape | GroupShape) => item is GroupShape;
+declare const isOptionShape: (item: OptionShape | string | null) => item is OptionShape;
+declare const joinOptions: ({ selected, selectedMultiple, }: {
+    selected?: OptionShape | undefined;
+    selectedMultiple?: OptionShape[] | undefined;
+}) => ReactNode[] | null;
+declare function processOptions(options: BaseSelectProps['options'], selected?: BaseSelectProps['selected'], filterFn?: (option: OptionShape) => boolean): {
+    filteredOptions: (OptionShape | GroupShape)[];
+    flatOptions: OptionShape[];
+    selectedOptions: OptionShape[];
+};
+type useVisibleOptionsArgs = {
+    /**
+     * Количество видимых пунктов
+     */
+    visibleOptions: number;
+    /**
+     * Реф на контейнер с пунтами меню
+     */
+    listRef: RefObject<HTMLElement>;
+    /**
+     * Реф на контейнер, которому нужно установить высоту
+     */
+    styleTargetRef?: RefObject<HTMLElement>;
+    /**
+     * Флаг открытия меню
+     */
+    open?: boolean;
+    /**
+     * Позволяет вызвать пересчет высоты
+     */
+    invalidate?: unknown;
+};
+declare function useVisibleOptions({ visibleOptions, listRef, styleTargetRef, open, invalidate, }: useVisibleOptionsArgs): void;
+declare function defaultFilterFn(optionText: string, search: string): boolean;
+declare function defaultAccessor(option: OptionShape): string;
+declare function usePrevious<T>(value: T): T | undefined;
+declare const lastIndexOf: <T>(array: T[], predicate: (item: T) => boolean) => number;
+export { isGroup, isOptionShape, joinOptions, processOptions, useVisibleOptions, defaultFilterFn, defaultAccessor, usePrevious, lastIndexOf };

package/option/Component.js

@@ -10,7 +10,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-var styles = {"container":"picker-button__container_17ijm","icon":"picker-button__icon_17ijm","content":"picker-button__content_17ijm"};
+var styles = {"container":"picker-button__container_xxpve","icon":"picker-button__icon_xxpve","content":"picker-button__content_xxpve"};
 require('./index.css')
 
 var Option = function (_a) {

package/option/index.css

@@ -1,4 +1,4 @@
-/* hash: 1e4ss */
+/* hash: 1dusi */
 :root {
 } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -15,13 +15,13 @@
     --gap-s: 12px;
 } :root {
 } :root {
-} .picker-button__container_17ijm {
+} .picker-button__container_xxpve {
     display: flex;
     align-items: center;
-} .picker-button__icon_17ijm {
+} .picker-button__icon_xxpve {
     display: flex;
     margin-right: var(--gap-s);
-} .picker-button__content_17ijm {
+} .picker-button__content_xxpve {
     overflow: hidden;
     flex: 1;
     text-overflow: ellipsis;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-picker-button",
-    "version": "11.2.0",
+    "version": "11.3.0",
     "description": "Picker button component",
     "keywords": [],
     "license": "MIT",
@@ -15,8 +15,9 @@
         "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
     "dependencies": {
-        "@alfalab/core-components-button": "^9.1.0",
-        "@alfalab/core-components-select": "^15.3.0",
+        "@alfalab/core-components-button": "^10.0.0",
+        "@alfalab/core-components-select": "^16.0.0",
+        "@alfalab/core-components-popover": "^6.1.0",
         "@alfalab/hooks": "^1.13.0",
         "@alfalab/icons-glyph": "^2.108.0",
         "classnames": "^2.3.1",

package/src/Component.desktop.tsx

@@ -2,6 +2,7 @@ import React, { FC, forwardRef, SVGProps } from 'react';
 import cn from 'classnames';
 
 import type { ButtonProps } from '@alfalab/core-components-button';
+import { Popover } from '@alfalab/core-components-popover';
 import {
     BaseSelect,
     BaseSelectProps,
@@ -101,6 +102,8 @@ export const PickerButtonDesktop = forwardRef<HTMLInputElement, PickerButtonDesk
         return (
             <BaseSelect
                 {...restProps}
+                Popover={Popover}
+                view='desktop'
                 optionProps={{ Checkmark: null }}
                 ref={ref}
                 Option={Option}

package/src/Component.mobile.tsx

@@ -3,6 +3,7 @@ import React, { forwardRef } from 'react';
 import { SelectMobile } from '@alfalab/core-components-select/mobile';
 import {
     AdditionalMobileProps,
+    BottomSheetSelectMobileProps,
     Optgroup as DefaultOptgroup,
 } from '@alfalab/core-components-select/shared';
 
@@ -14,7 +15,8 @@ export type PickerButtonMobileProps = Omit<
     PickerButtonDesktopProps,
     'OptionsList' | 'Checkmark' | 'onScroll'
 > &
-    AdditionalMobileProps & {
+    AdditionalMobileProps &
+    BottomSheetSelectMobileProps & {
         /**
          * Контрольная точка для кнопки, с нее начинается desktop версия
          * @default 1024

package/src/Component.responsive.tsx

@@ -1,17 +1,17 @@
 import React, { forwardRef } from 'react';
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { ButtonProps } from '@alfalab/core-components-button';
-import type { AdditionalMobileProps } from '@alfalab/core-components-select/shared';
+import type {
+    AdditionalMobileProps,
+    BottomSheetSelectMobileProps,
+} from '@alfalab/core-components-select/shared';
 import { useMedia } from '@alfalab/hooks';
 
 import { PickerButtonDesktop, PickerButtonDesktopProps } from './desktop';
 import { PickerButtonMobile } from './mobile';
 
-export type PickerButtonMatchMedia = 'desktop' | 'mobile';
-
 export type PickerButtonResponsiveProps = PickerButtonDesktopProps &
-    AdditionalMobileProps & {
+    AdditionalMobileProps &
+    BottomSheetSelectMobileProps & {
         /**
          * Контрольная точка, с нее начинается desktop версия
          * @default 1024

package/src/field/index.module.css

@@ -18,5 +18,5 @@
 }
 
 .linkOpen:not(:hover) {
-    background-color: var(--color-light-specialbg-secondary-transparent);
+    background-color: var(--color-light-neutral-translucent-100);
 }

package/types-1b036d4b.d.ts

@@ -0,0 +1,13 @@
+type TextElementType = HTMLParagraphElement | HTMLSpanElement | HTMLDivElement;
+type WidthUnit = number | string;
+type TextSkeletonProps = {
+    /**
+     *  Кол-во строк текста
+     */
+    rows?: number;
+    /**
+     * Ширина строки
+     */
+    width?: WidthUnit | WidthUnit[];
+};
+export { TextElementType, TextSkeletonProps };

package/types-1c79e231.d.ts

@@ -0,0 +1,113 @@
+/// <reference types="react" />
+import React from 'react';
+import { ReactNode } from "react";
+import { CloserProps } from "./index-ebda875c";
+type NavigationBarProps = {
+    /**
+     * Контент шапки
+     */
+    children?: ReactNode;
+    /**
+     * Заголовок шапки
+     */
+    title?: string;
+    /**
+     * Подзаголовок (доступен только в мобильной версии)
+     */
+    subtitle?: ReactNode;
+    /**
+     * Размер заголовка (compact доступен только в мобильной версии)
+     */
+    titleSize?: 'default' | 'compact';
+    /**
+     * Доп. класс для аддонов
+     */
+    addonClassName?: string;
+    /**
+     * Слот слева
+     */
+    leftAddons?: ReactNode;
+    /**
+     * Слот справа
+     */
+    rightAddons?: ReactNode;
+    /**
+     * Дополнительный класс для closer
+     */
+    closerClassName?: string;
+    /**
+     * Слот снизу
+     */
+    bottomAddons?: ReactNode;
+    /**
+     * Наличие компонента крестика
+     */
+    hasCloser?: boolean;
+    /**
+     * Наличие кнопки "Назад"
+     */
+    hasBackButton?: boolean;
+    /**
+     * Дополнительный класс для правого аддона
+     */
+    backButtonClassName?: string;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс для контента
+     */
+    contentClassName?: string;
+    /**
+     * Дополнительный класс для нижнего аддона
+     */
+    bottomAddonsClassName?: string;
+    /**
+     * Выравнивание заголовка
+     */
+    align?: 'left' | 'center';
+    /**
+     * Обрезать ли заголовок
+     */
+    trim?: boolean;
+    /**
+     * Фиксирует шапку
+     */
+    sticky?: boolean;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Фоновое изображение
+     */
+    imageUrl?: string;
+    /**
+     * Иконка closer.
+     */
+    closerIcon?: React.ElementType;
+    /**
+     * Обработчик закрытия
+     */
+    onClose?: CloserProps['onClose'];
+    /**
+     * обработчик клика по кнопке "назад"
+     */
+    onBack?: () => void;
+    /**
+     * Вид шапки - мобильный или десктоп
+     */
+    view: 'desktop' | 'mobile';
+    /**
+     * Ссылка на родительскую ноду overflow: auto
+     */
+    scrollableParentRef?: React.RefObject<HTMLDivElement>;
+};
+type ContentParams = {
+    extraClassName?: string;
+    wrapperRef?: React.RefObject<HTMLDivElement>;
+    style?: React.CSSProperties;
+    hidden?: boolean;
+};
+export { NavigationBarProps, ContentParams };