@alfalab/core-components-picker-button 10.3.29 → 11.0.0

package/modern/utils-5e1b8383.d.ts

@@ -0,0 +1,38 @@
+import { ReactNode, RefObject } from 'react';
+import { BaseSelectProps, GroupShape, OptionShape } from "./typings-5e1b8383";
+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']): {
+    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 usePrevious<T>(value: T): T | undefined;
+declare const lastIndexOf: <T>(array: T[], predicate: (item: T) => boolean) => number;
+export { isGroup, isOptionShape, joinOptions, processOptions, useVisibleOptions, usePrevious, lastIndexOf };

package/option/Component.d.ts

@@ -1,11 +1,12 @@
 /// <reference types="react" />
-import { FC, SVGProps } from 'react';
-import { OptionShape } from "../typings-5e1b8383";
-import { OptionProps as BaseOptionProps } from "../typings-5e1b8383";
+import React from 'react';
+import { FC, SVGProps } from "react";
+import { OptionShape } from "../shared-4cd3936b";
+import { OptionProps as BaseOptionProps } from "../shared-4cd3936b";
 type OptionProps = Omit<BaseOptionProps, 'option'> & {
     option: OptionShape & {
         icon?: FC<SVGProps<SVGSVGElement>>;
     };
 };
-declare const Option: ({ option, children, ...restProps }: OptionProps) => JSX.Element;
+declare const Option: ({ option, children, ...restProps }: OptionProps) => React.JSX.Element;
 export { Option };

package/option/Component.js

@@ -4,20 +4,20 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var React = require('react');
-var coreComponentsSelect = require('@alfalab/core-components-select');
+var shared = require('@alfalab/core-components-select/shared');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-var styles = {"container":"picker-button__container_tl44d","icon":"picker-button__icon_tl44d","content":"picker-button__content_tl44d"};
+var styles = {"container":"picker-button__container_n5ay9","icon":"picker-button__icon_n5ay9","content":"picker-button__content_n5ay9"};
 require('./index.css')
 
 var Option = function (_a) {
     var option = _a.option, children = _a.children, restProps = tslib.__rest(_a, ["option", "children"]);
     var content = children || option.content || option.key;
     var Icon = option.icon;
-    return (React__default.default.createElement(coreComponentsSelect.Option, tslib.__assign({ option: option }, restProps),
+    return (React__default.default.createElement(shared.Option, tslib.__assign({ option: option }, restProps),
         React__default.default.createElement("div", { className: styles.container },
             Icon && React__default.default.createElement(Icon, { className: styles.icon }),
             React__default.default.createElement("div", { className: styles.content }, content))));

package/option/index.css

@@ -1,4 +1,4 @@
-/* hash: wqdyo */
+/* hash: 1g853 */
 :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_tl44d {
+} .picker-button__container_n5ay9 {
     display: flex;
     align-items: center;
-} .picker-button__icon_tl44d {
+} .picker-button__icon_n5ay9 {
     display: flex;
     margin-right: var(--gap-s);
-} .picker-button__content_tl44d {
+} .picker-button__content_n5ay9 {
     overflow: hidden;
     flex: 1;
     text-overflow: ellipsis;

package/option/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var option_Component = require('./Component.js');
 require('tslib');
 require('react');
-require('@alfalab/core-components-select');
+require('@alfalab/core-components-select/shared');
 
 
 

package/package.json

@@ -1,11 +1,35 @@
 {
     "name": "@alfalab/core-components-picker-button",
-    "version": "10.3.29",
+    "version": "11.0.0",
     "description": "Picker button component",
     "keywords": [],
     "license": "MIT",
     "main": "index.js",
     "module": "./esm/index.js",
+    "exports": {
+        ".": {
+            "import": "./esm/index.js",
+            "require": "./index.js"
+        },
+        "./mobile": {
+            "import": "./esm/mobile.js",
+            "require": "./mobile.js"
+        },
+        "./desktop": {
+            "import": "./esm/desktop.js",
+            "require": "./desktop.js"
+        },
+        "./shared": {
+            "import": "./esm/shared.js",
+            "require": "./shared.js"
+        },
+        "./esm": "./esm/index.js",
+        "./cssm": "./cssm/index.js",
+        "./modern": "./modern/index.js",
+        "./esm/*": "./esm/*",
+        "./cssm/*": "./cssm/*",
+        "./modern/*": "./modern/*"
+    },
     "publishConfig": {
         "access": "public",
         "directory": "dist"
@@ -15,8 +39,8 @@
         "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
     "dependencies": {
-        "@alfalab/core-components-button": "^8.5.1",
-        "@alfalab/core-components-select": "^14.3.4",
+        "@alfalab/core-components-button": "^9.0.0",
+        "@alfalab/core-components-select": "^15.0.0",
         "@alfalab/hooks": "^1.13.0",
         "@alfalab/icons-glyph": "^2.108.0",
         "classnames": "^2.3.1",

package/shared-4cd3936b.d.ts

@@ -0,0 +1,93 @@
+/// <reference types="react" />
+import React from "react";
+import { ReactNode } from "react";
+import { BaseSelectProps, OptionProps, OptionShape } from "./typings-5e1b8383";
+// eslint-disable-next-line @typescript-eslint/naming-convention
+type useSelectWithLoadingProps = {
+    loading?: boolean;
+    visibleOptions?: BaseSelectProps["visibleOptions"];
+    Option?: React.FC<OptionProps>;
+};
+declare function useSelectWithLoading({ loading, visibleOptions, Option }: useSelectWithLoadingProps): {
+    Option: (props: OptionProps) => React.JSX.Element;
+    options: OptionShape[];
+} | null;
+type OptionsFetcherResponse = {
+    options: OptionShape[];
+    hasMore: boolean;
+};
+// eslint-disable-next-line @typescript-eslint/naming-convention
+type useLazyLoadingProps = {
+    /** Количество элементов на "странице" */
+    limit?: number;
+    /** Начальный номер "страницы" */
+    initialOffset?: number;
+    /** Скелетон загружаемых элементов */
+    skeleton?: React.ReactNode;
+    /** Компонент пункта меню */
+    Option?: React.FC<OptionProps>;
+    /**
+     * Функция-загрузчик опций.
+     * @param offset - текущая страница
+     * @param limit - количество элементов на странице
+     * @param queryString - строчные данные, пробрасываемые для поиска из кастомного инпута, расположенного в заголовке OptionsList
+     * @returns Promise<{
+     *  options - список опций следующей "страницы". Они аппендятся к предыдущим
+     *  hasMore - указывает, есть ли еще незагруженные элементы (в случае false перестает загружать "следующую страницу")
+     * }>
+     */
+    optionsFetcher(offset: number, limit: number, queryString?: string): Promise<OptionsFetcherResponse>;
+};
+declare function useLazyLoading({ limit, initialOffset, optionsFetcher, skeleton, Option }: useLazyLoadingProps): {
+    optionsProps: {
+        Option: (props: OptionProps) => React.JSX.Element;
+        options: OptionShape[];
+        optionsListProps: {
+            ref: React.RefObject<HTMLDivElement>;
+            inputProps: {
+                onChange: (event: React.ChangeEvent<HTMLInputElement>, payload: {
+                    value: string;
+                }) => void;
+                value: string;
+            };
+        };
+        onOpen: (payload: {
+            open?: boolean;
+        }) => void;
+    };
+    reset: () => void;
+};
+type SkeletonProps = {
+    /**
+     * Флаг, явно задающий состояние, при котором контент закрывается прелоадером
+     */
+    visible?: boolean;
+    /**
+     * Флаг явного включения анимации скелета
+     */
+    animate?: boolean;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительные инлайн стили
+     */
+    style?: React.CSSProperties;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Дочерние элементы.
+     */
+    children?: ReactNode;
+};
+declare const Skeleton: React.FC<SkeletonProps>;
+export * from "./index-ebda875c";
+export * from "./Component-5e1b8383";
+export { useSelectWithLoading, useLazyLoading, SkeletonProps, Skeleton };
+export * from "./hook-9ea9e32c";
+export * from "./typings-5e1b8383";
+export * from "./utils-5e1b8383";
+export type { AdditionalMobileProps } from "./Component.mobile-06ffd24b";

package/shared.d.ts

@@ -0,0 +1,2 @@
+export { getIcon } from "./utils/index";
+export * from "./types";

package/shared.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var utils_index = require('./utils/index.js');
+require('@alfalab/icons-glyph/ChevronDownCompactSIcon');
+require('@alfalab/icons-glyph/ChevronDownMIcon');
+require('@alfalab/icons-glyph/MoreMIcon');
+require('@alfalab/icons-glyph/MoreSIcon');
+
+
+
+exports.getIcon = utils_index.getIcon;

package/src/Component.desktop.tsx

@@ -0,0 +1,122 @@
+import React, { FC, forwardRef, SVGProps } from 'react';
+import cn from 'classnames';
+
+import type { ButtonProps } from '@alfalab/core-components-button';
+import {
+    BaseSelect,
+    BaseSelectProps,
+    Optgroup as DefaultOptgroup,
+    OptionsList as DefaultOptionsList,
+} from '@alfalab/core-components-select/shared';
+
+import { Field as DefaultField } from './field';
+import { Option as DefaultOption } from './option';
+import type { PickerButtonSize, PickerButtonVariant } from './types';
+
+import styles from './index.module.css';
+
+const SIDE_POSITIONS = ['right', 'right-start', 'right-end', 'left', 'left-start', 'left-end'];
+
+export type PickerButtonDesktopProps = Omit<
+    BaseSelectProps,
+    | 'placeholder'
+    | 'Arrow'
+    | 'autocomplete'
+    | 'size'
+    | 'onFocus'
+    | 'selected'
+    | 'closeOnSelect'
+    | 'multiple'
+    | 'hint'
+    | 'allowUnselect'
+    | 'options'
+> &
+    Pick<ButtonProps, 'view' | 'loading' | 'leftAddons' | 'rightAddons'> & {
+        options: Array<
+            BaseSelectProps['options'][0] & {
+                /**
+                 * Иконка, отображающаяся слева от текстового представления пункта
+                 */
+                icon?: FC<SVGProps<SVGSVGElement>>;
+            }
+        >;
+
+        /**
+         * Размер кнопки
+         */
+        size?: PickerButtonSize;
+
+        /**
+         * Тип кнопки
+         */
+        variant?: PickerButtonVariant;
+
+        /**
+         * Показывать стрелку
+         * @default true
+         */
+        showArrow?: boolean;
+    };
+
+export const PickerButtonDesktop = forwardRef<HTMLInputElement, PickerButtonDesktopProps>(
+    (
+        {
+            OptionsList = DefaultOptionsList,
+            Optgroup = DefaultOptgroup,
+            Option = DefaultOption,
+            view,
+            loading,
+            size = 'm',
+            variant = 'default',
+            className,
+            leftAddons,
+            rightAddons,
+            popperClassName,
+            optionClassName,
+            showArrow,
+            Field = DefaultField,
+            fieldProps = {},
+            ...restProps
+        },
+        ref,
+    ) => {
+        const isSideGap =
+            !!restProps.popoverPosition && SIDE_POSITIONS.includes(restProps.popoverPosition);
+
+        const fieldDefaultProps = {
+            view,
+            loading,
+            /** size у select, button несовместимы */
+            buttonSize: size,
+            buttonVariant: variant,
+            leftAddons,
+            rightAddons,
+            showArrow,
+            breakpoint: 1,
+        };
+
+        return (
+            <BaseSelect
+                {...restProps}
+                optionProps={{ Checkmark: null }}
+                ref={ref}
+                Option={Option}
+                Field={Field}
+                size={size === 'm' ? 'm' : 's'}
+                fieldProps={{
+                    ...fieldDefaultProps,
+                    ...(fieldProps as object),
+                }}
+                Optgroup={Optgroup}
+                OptionsList={OptionsList}
+                className={cn(styles.container, className)}
+                popperClassName={cn('cc-picker-button', styles.optionsPopover, popperClassName, {
+                    [styles.sideGap]: isSideGap,
+                })}
+                optionClassName={cn(styles.option, optionClassName)}
+                selected={[]}
+                closeOnSelect={true}
+            />
+        );
+    },
+);

package/src/Component.mobile.tsx

@@ -0,0 +1,83 @@
+import React, { forwardRef } from 'react';
+
+import { SelectMobile } from '@alfalab/core-components-select/mobile';
+import {
+    AdditionalMobileProps,
+    Optgroup as DefaultOptgroup,
+} from '@alfalab/core-components-select/shared';
+
+import type { PickerButtonDesktopProps } from './desktop';
+import { Field as DefaultField } from './field';
+import { Option as DefaultOption } from './option';
+
+export type PickerButtonMobileProps = Omit<
+    PickerButtonDesktopProps,
+    'OptionsList' | 'Checkmark' | 'onScroll'
+> &
+    AdditionalMobileProps & {
+        /**
+         * Контрольная точка для кнопки, с нее начинается desktop версия
+         * @default 1024
+         */
+        breakpoint?: number;
+    };
+
+export const PickerButtonMobile = forwardRef<HTMLInputElement, PickerButtonMobileProps>(
+    (
+        {
+            options,
+            label,
+            Option = DefaultOption,
+            Optgroup = DefaultOptgroup,
+            view,
+            loading,
+            variant = 'default',
+            leftAddons,
+            rightAddons,
+            size,
+            bottomSheetProps,
+            showArrow,
+            Field = DefaultField,
+            fieldProps = {},
+            breakpoint = 1024,
+            ...restProps
+        },
+        ref,
+    ) => {
+        const fieldDefaultProps = {
+            view,
+            loading,
+            /** size у select, button несовместимы */
+            buttonSize: size,
+            buttonVariant: variant,
+            leftAddons,
+            rightAddons,
+            showArrow,
+            breakpoint,
+        };
+
+        return (
+            <SelectMobile
+                {...restProps}
+                label={label}
+                Option={Option}
+                bottomSheetProps={{
+                    title: label,
+                    stickyHeader: true,
+                    ...bottomSheetProps,
+                }}
+                Field={Field}
+                Optgroup={Optgroup}
+                size={size === 'm' ? 'm' : 's'}
+                closeOnSelect={true}
+                fieldProps={{
+                    ...fieldDefaultProps,
+                    ...(fieldProps as object),
+                }}
+                ref={ref}
+                options={options}
+                selected={[]}
+            />
+        );
+    },
+);

package/src/Component.responsive.tsx

@@ -0,0 +1,61 @@
+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 { useMedia } from '@alfalab/hooks';
+
+import { PickerButtonDesktop, PickerButtonDesktopProps } from './desktop';
+import { PickerButtonMobile } from './mobile';
+
+export type PickerButtonMatchMedia = 'desktop' | 'mobile';
+
+export type PickerButtonResponsiveProps = PickerButtonDesktopProps &
+    AdditionalMobileProps & {
+        /**
+         * Контрольная точка, с нее начинается desktop версия
+         * @default 1024
+         */
+        breakpoint?: number;
+    };
+
+export const PickerButtonResponsive = forwardRef<HTMLInputElement, PickerButtonResponsiveProps>(
+    (
+        {
+            OptionsList,
+            onScroll,
+            footer,
+            swipeable,
+            bottomSheetProps,
+            breakpoint = 1024,
+            ...restProps
+        },
+        ref,
+    ) => {
+        const [view] = useMedia(
+            [
+                ['mobile', `(max-width: ${breakpoint - 1}px)`],
+                ['desktop', `(min-width: ${breakpoint}px)`],
+            ],
+            'desktop',
+        );
+
+        return view === 'desktop' ? (
+            <PickerButtonDesktop
+                ref={ref}
+                OptionsList={OptionsList}
+                onScroll={onScroll}
+                {...restProps}
+            />
+        ) : (
+            <PickerButtonMobile
+                ref={ref}
+                footer={footer}
+                swipeable={swipeable}
+                bottomSheetProps={bottomSheetProps}
+                breakpoint={breakpoint}
+                {...restProps}
+            />
+        );
+    },
+);

package/src/desktop.ts

@@ -0,0 +1 @@
+export { PickerButtonDesktop, PickerButtonDesktopProps } from './Component.desktop';

package/src/field/Component.tsx

@@ -0,0 +1,86 @@
+import React, { ButtonHTMLAttributes, FC, Fragment, SVGProps } from 'react';
+import cn from 'classnames';
+
+import { Button, ButtonProps } from '@alfalab/core-components-button';
+import { FieldProps as BaseFieldProps } from '@alfalab/core-components-select/src/typings';
+
+import type { PickerButtonSize, PickerButtonVariant } from '../types';
+import { getIcon } from '../utils';
+
+import styles from './index.module.css';
+
+type FieldProps = Omit<BaseFieldProps, 'size' | 'hint' | 'success' | 'error' | 'placeholder'> &
+    ButtonProps & {
+        buttonSize?: PickerButtonSize;
+        buttonVariant?: PickerButtonVariant;
+        showArrow?: boolean;
+    };
+
+export const Field = ({
+    buttonSize = 'm',
+    buttonVariant = 'default',
+    view,
+    label,
+    open,
+    multiple,
+    rightAddons,
+    Arrow,
+    innerProps,
+    className,
+    selected,
+    selectedMultiple,
+    setSelectedItems,
+    toggleMenu,
+    valueRenderer,
+    showArrow = true,
+    labelView,
+    ...restProps
+}: FieldProps) => {
+    const Icon: FC<SVGProps<SVGSVGElement>> = getIcon(buttonVariant, buttonSize);
+
+    const { ref, ...restInnerProps } = innerProps;
+
+    const buttonProps = {
+        ...restProps,
+        ...restInnerProps,
+    } as ButtonHTMLAttributes<HTMLButtonElement>;
+
+    return (
+        <div ref={ref}>
+            <Button
+                {...buttonProps}
+                rightAddons={
+                    <Fragment>
+                        {rightAddons && (
+                            <span
+                                className={cn(styles.addonsContainer, {
+                                    [styles.showControlIcon]:
+                                        showArrow || buttonVariant === 'compact',
+                                })}
+                            >
+                                {rightAddons}
+                            </span>
+                        )}
+
+                        {(showArrow || buttonVariant === 'compact') && (
+                            <span
+                                className={cn(
+                                    styles.iconContainer,
+                                    buttonVariant !== 'compact' && open && styles.open,
+                                )}
+                            >
+                                <Icon data-test-id='picker-button-icon' />
+                            </span>
+                        )}
+                    </Fragment>
+                }
+                block={true}
+                view={view}
+                size={buttonSize}
+                className={cn(styles.component, view === 'primary' && styles.primary, className)}
+            >
+                {buttonVariant !== 'compact' && label}
+            </Button>
+        </div>
+    );
+};

package/src/field/index.module.css

@@ -0,0 +1,18 @@
+@import '@alfalab/core-components-themes/src/default.css';
+
+.iconContainer {
+    display: flex;
+    transition: transform 0.15s ease-in-out;
+}
+
+.addonsContainer {
+    display: flex;
+
+    &.showControlIcon {
+        margin-right: var(--gap-2xs);
+    }
+}
+
+.open {
+    transform: var(--arrow-transform);
+}

package/src/field/index.ts

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

package/src/index.module.css

@@ -0,0 +1,22 @@
+@import '@alfalab/core-components-themes/src/default.css';
+
+.container {
+    min-width: auto;
+}
+
+:global(.cc-picker-button) {
+    &.optionsPopover {
+        &.sideGap {
+            padding: 0 var(--gap-xs);
+        }
+    }
+
+    & .option {
+        padding: 0 var(--gap-m);
+
+        &:before {
+            /* Удаляем разделители у опций выпадающего списка. */
+            display: none;
+        }
+    }
+}