@foxford/ui 2.36.0-beta-5e1b37f-20240709 → 2.37.0-beta-3fd53b1-20240802

package/dts/index.d.ts

@@ -1061,6 +1061,8 @@ interface TextProps extends ResponsiveSizeProps, ResponsiveMarginProps, DisplayP
     weight?: CSSFontWeight;
     /** White space */
     whiteSpace?: string;
+    /** Word break */
+    wordBreak?: string;
     /** Font style */
     fontStyle?: 'normal' | 'italic';
     /** Text transform */
@@ -2186,6 +2188,8 @@ interface ListItemProps extends ResponsiveSizeProps, ResponsiveMarginProps, Omit
     /** Appearance variant */
     danger?: boolean;
     /** Appearance variant */
+    success?: boolean;
+    /** Appearance variant */
     active?: boolean;
     /** Appearance variant */
     onColored?: boolean;
@@ -2388,6 +2392,8 @@ interface ChipProps extends ResponsiveSizeProps, ResponsiveMarginProps, React.Re
     contrast?: boolean;
     /** Appearance variant */
     active?: boolean;
+    /** @ignore Internal */
+    cursor?: string;
 }
 
 /**
@@ -2425,7 +2431,7 @@ interface MenuComponentProps extends ResponsiveSizeProps, Omit<React.ComponentPr
     /** Callback to call on unmount (can be used to restore focus on trigger component) */
     onUnmount?: () => void;
     /** Render menu view (Menu.List, Menu.Container, or custom component) */
-    children: React.ReactElement | ((props: Pick<MenuComponentProps, 'size' | 'sizeXXS' | 'sizeXS' | 'sizeS' | 'sizeM' | 'sizeL' | 'sizeXL' | 'showCloseButton' | 'closeButtonProps'> & {
+    children?: React.ReactElement | ((props: Pick<MenuComponentProps, 'size' | 'sizeXXS' | 'sizeXS' | 'sizeS' | 'sizeM' | 'sizeL' | 'sizeXL' | 'showCloseButton' | 'closeButtonProps'> & {
         closeFn: () => void;
     }) => React.ReactElement);
     /** Show button to close menu (forward to children) */
@@ -4206,4 +4212,123 @@ interface FormLabelProps extends ResponsiveSizeProps, ResponsiveMarginProps, Rea
  */
 declare const FormLabel: React.ForwardRefExoticComponent<FormLabelProps>;
 
-export { ActionBtn, Alert, Amount, Anchor, Arrow, ArrowBadge, Avatar, Badge, BaseProps, Breakpoint, Button, COUNTRY_DATA, CSSBorderStyle, CSSColor, CSSFontWeight, CSSGlobalValue, CSSUnit, CSSVerticalAlign, CURRENCY_MAP, Checkbox, Chip, Color, ColorNames, ColorPaletteKey, Container, ContextMenu, CurrencyCodes, DEFAULT_MASK, FormLabel, HEX, INITIAL_MASK, Icon, IconButton, Indicator, Input, ListItem, Menu, Modal, Nullable, Paper, Popover, Progress, RGB, RGBA, Radio, withThemeScrollable as Scrollable, Section, Select, Separator, Size, Sizes, Skeleton, Spacer, Spinner, Switcher, Tab, Tabs, Tag, Text, Textarea, Theme, ThemeMode, ThemeName, ThemePreset, ThemeProvider, Tooltip, adultDarkTheme, adultLightTheme, babyDarkTheme, babyLightTheme, baseInputStyle, buildMediaQuery, color, defaultIcons, desktopFirst, hexToRgbA, isHex, mobileFirst, motherDarkTheme, motherLightTheme, property, responsiveNamedProperty, responsiveProperty, screenL, screenM, screenMaxL, screenMaxM, screenMaxS, screenMaxXl, screenMaxXs, screenMaxXxs, screenMinL, screenMinM, screenMinS, screenMinXl, screenMinXs, screenRetina, screenS, screenXl, screenXs, teenDarkTheme, teenLightTheme, defaultTheme as theme, vAlign };
+declare const FuseSearchKeys: {
+    readonly text: "text";
+    readonly tags: "tags";
+};
+
+declare type DropdownStatus = 'success' | 'error';
+declare type DropdownOption = {
+    /** Уникальный идентификатор (при сабмите используется в паре с name) */
+    value: string;
+    /** Цветовая схема для валидации */
+    status?: DropdownStatus;
+    /** Отображаемый текст (учитывается в текстовом поиске) */
+    [FuseSearchKeys.text]: string;
+    /** Ассоциативные теги (учитывается в текстовом поиске) */
+    [FuseSearchKeys.tags]?: string[];
+};
+interface DropdownProps extends ResponsiveSizeProps, ResponsiveMarginProps, Omit<React.ComponentPropsWithRef<'div'>, 'children'> {
+    /** Закрывать выпадающее меню при скролле */
+    closeMenuOnScroll?: boolean;
+    /** Адаптировать цветовую схему для контрастного фона */
+    contrast?: boolean;
+    /** Выбранная по умолчанию опция или опции */
+    defaultSelectedOption?: DropdownOption | DropdownOption[];
+    /** Интерактивность отключена */
+    disabled?: boolean;
+    /** Иконка для отображения с левого края */
+    icon?: JSX.Element | IconName;
+    /** Пропсы для иконки с левого края */
+    iconProps?: IconProps;
+    /** Отбражать компонент на одной линии с другими */
+    inline?: boolean;
+    /** Тип браузерной виртуальной клавиатуры */
+    inputMode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
+    /** Текст для лейбла текстового инпута */
+    label?: React.ReactNode;
+    /** Положение текста лейбла текстового инпута (по умолчанию dynamic) */
+    labelPosition?: 'dynamic' | 'top' | 'center';
+    /** Использовать состояние загрузки выпадающего меню */
+    loading?: boolean;
+    /** Текст для состояния загрузки выпадающего меню */
+    loadingMessage?: JSX.Element | string;
+    /** Иконка для состояния загрузки выпадающего меню (по умолчанию анимированный спиннер) */
+    loadingIcon?: JSX.Element | IconName;
+    /** Пропсы для иконки состояния загрузки выпадающего меню */
+    loadingIconProps?: IconProps;
+    /** Максимальная длина строки текстового ввода */
+    maxLength?: number;
+    /** Пропсы выпадающего меню для конфигурации размеров */
+    menuProps?: Pick<MenuComponentProps, 'size' | 'sizeXXS' | 'sizeXS' | 'sizeS' | 'sizeM' | 'sizeL' | 'sizeXL' | 'maxHeight'>;
+    /** Включить мод множественного выбора (по умолчанию false) */
+    multiple?: boolean;
+    /** Значение для атрибута name инпутов, которые хранят value выбранных опций */
+    name?: string;
+    /** Колбек, который будет вызван при закрытии выпадающего меню */
+    onCloseMenu?: () => void;
+    /** Колбек, который будет вызван при открытии выпадающего меню */
+    onOpenMenu?: () => void;
+    /** Колбек, который будет вызван при выборе опции.
+     *  Получает аргументом текущую выбранную опцию, опции или null */
+    onSelectOption?: (selectedOptions: DropdownOption | null | DropdownOption[]) => void;
+    /** Доступные для выбора опции */
+    options: DropdownOption[];
+    /** Отображать специальный контрол для массового выбора опций, если включен мод множественного выбора (по умолчанию true) */
+    optionsMultiToggle?: boolean;
+    /** Текст рядом с специальным контролом для массового выбора опций */
+    optionsMultiToggleCaption?: JSX.Element | string;
+    /** Текстовый статус для состояния выпадающего меню, при котором нет подходящих опций */
+    optionsEmptyMessage?: JSX.Element | string;
+    /** Иконка для пустого состояния выпадающего меню (по умолчанию redo) */
+    optionsEmptyIcon?: JSX.Element | IconName;
+    /** Пропсы для иконки пустого состояния выпадающего меню */
+    optionsEmptyIconProps?: IconProps;
+    /** Пользовательские цвета */
+    palette?: {
+        color?: Color;
+        colorDisabled?: Color;
+        placeholderColor?: Color;
+        placeholderColorDisabled?: Color;
+        labelColor?: Color;
+        labelColorHover?: Color;
+        labelColorDisabled?: Color;
+        backgroundColor?: Color;
+        backgroundColorHover?: Color;
+        backgroundColorDisabled?: Color;
+        menuBackgroundColor?: Color;
+        borderColor?: Color;
+        borderColorDisabled?: Color;
+        menuBorderColor?: Color;
+    };
+    /** Подсказка в инпуте текстового ввода */
+    placeholder?: string;
+    /** Вариант цветовой схемы */
+    primary?: boolean;
+    /** Нельзя изменить текущее состояние, но можно взаимодействовать */
+    readOnly?: boolean;
+    /** Сделать выбор опции обязательным */
+    required?: boolean;
+    /** Вариант цветовой схемы */
+    secondary?: boolean;
+    /** Цветовая схема для валидации */
+    status?: DropdownStatus;
+    /** Идентификатор ассоциированной формы */
+    form?: string;
+    /** z-index для рутового элемента */
+    zIndex?: number;
+}
+
+/**
+ *
+ * Компонент поддерживает все атрибуты \<div\> элемента.
+ *
+ * Можно передать "ref", который будет ассоциирован с рутовым элементом.
+ *
+ * Поддерживаются пропсы определения размеров и внешних отступов в зависимости от ширины вьюпорта.
+ *
+ * Полный интерфейс можно посмотреть [тут](https://github.com/foxford/ui/blob/master/src/components/Dropdown/types.ts).
+ */
+declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps>;
+
+export { ActionBtn, Alert, Amount, Anchor, Arrow, ArrowBadge, Avatar, Badge, BaseProps, Breakpoint, Button, COUNTRY_DATA, CSSBorderStyle, CSSColor, CSSFontWeight, CSSGlobalValue, CSSUnit, CSSVerticalAlign, CURRENCY_MAP, Checkbox, Chip, Color, ColorNames, ColorPaletteKey, Container, ContextMenu, CurrencyCodes, DEFAULT_MASK, Dropdown, FormLabel, HEX, INITIAL_MASK, Icon, IconButton, Indicator, Input, ListItem, Menu, Modal, Nullable, Paper, Popover, Progress, RGB, RGBA, Radio, withThemeScrollable as Scrollable, Section, Select, Separator, Size, Sizes, Skeleton, Spacer, Spinner, Switcher, Tab, Tabs, Tag, Text, Textarea, Theme, ThemeMode, ThemeName, ThemePreset, ThemeProvider, Tooltip, adultDarkTheme, adultLightTheme, babyDarkTheme, babyLightTheme, baseInputStyle, buildMediaQuery, color, defaultIcons, desktopFirst, hexToRgbA, isHex, mobileFirst, motherDarkTheme, motherLightTheme, property, responsiveNamedProperty, responsiveProperty, screenL, screenM, screenMaxL, screenMaxM, screenMaxS, screenMaxXl, screenMaxXs, screenMaxXxs, screenMinL, screenMinM, screenMinS, screenMinXl, screenMinXs, screenRetina, screenS, screenXl, screenXs, teenDarkTheme, teenLightTheme, defaultTheme as theme, vAlign };

package/hooks/useMergedPalette.js

@@ -1,2 +1,2 @@
-import{useTheme as e}from'styled-components';function r(r){var t;var o=e();var a=null!==(t=r.palette)&&void 0!==t?t:{};return Object.keys(a).reduce(((e,r)=>{var t;return e[r]=null!==(t=o.colors[a[r]])&&void 0!==t?t:a[r],e}),{})}export{r as useMergedPalette};
+import{useTheme as e}from'styled-components';function r(r){var t;var o=e();var a=null!==(t=r.palette)&&void 0!==t?t:{};return Object.keys(a).reduce(((e,r)=>{var t;var l=null!==(t=o.colors[a[r]])&&void 0!==t?t:a[r];return l&&(e[r]=l),e}),{})}export{r as useMergedPalette};
 //# sourceMappingURL=useMergedPalette.js.map

package/hooks/useMergedPalette.js.map

@@ -1 +1 @@
-{"version":3,"file":"useMergedPalette.js","sources":["../../../src/hooks/useMergedPalette.ts"],"sourcesContent":["import { useTheme } from 'styled-components'\nimport type { ColorPaletteKey, Color, CSSColor } from 'shared/types'\n\nexport function useMergedPalette<\n  T extends {\n    palette?: Partial<Record<ColorPaletteKey, Color>>\n  }\n>(componentProps: T): Record<ColorPaletteKey, CSSColor> {\n  const theme = useTheme()\n\n  const palette = componentProps.palette ?? {}\n\n  return Object.keys(palette).reduce((injected, key) => {\n    injected[key] = theme.colors[palette[key]] ?? palette[key]\n    return injected\n  }, {} as Record<ColorPaletteKey, CSSColor>)\n}\n"],"names":["useMergedPalette","componentProps","_componentProps$palet","theme","useTheme","palette","Object","keys","reduce","injected","key","_theme$colors$palette","colors"],"mappings":"6CAGO,SAASA,EAIdC,GAAsD,IAAAC,EACtD,IAAMC,EAAQC,IAEd,IAAMC,UAAUJ,EAAAA,EAAeI,uBAAW,GAE1C,OAAOC,OAAOC,KAAKF,GAASG,QAAO,CAACC,EAAUC,KAAQ,IAAAC,EAEpD,OADAF,EAASC,WAAOP,EAAAA,EAAMS,OAAOP,EAAQK,mBAASL,EAAQK,GAC/CD,IACN"}
+{"version":3,"file":"useMergedPalette.js","sources":["../../../src/hooks/useMergedPalette.ts"],"sourcesContent":["import { useTheme } from 'styled-components'\nimport type { ColorPaletteKey, Color, CSSColor } from 'shared/types'\n\nexport function useMergedPalette<\n  T extends {\n    palette?: Partial<Record<ColorPaletteKey, Color>>\n  }\n>(componentProps: T): Record<ColorPaletteKey, CSSColor> {\n  const theme = useTheme()\n\n  const palette = componentProps.palette ?? {}\n\n  return Object.keys(palette).reduce((injected, key) => {\n    const cssColor = theme.colors[palette[key]] ?? palette[key]\n\n    if (cssColor) {\n      injected[key] = cssColor\n    }\n\n    return injected\n  }, {} as Record<ColorPaletteKey, CSSColor>)\n}\n"],"names":["useMergedPalette","componentProps","_componentProps$palet","theme","useTheme","palette","Object","keys","reduce","injected","key","_theme$colors$palette","cssColor","colors"],"mappings":"6CAGO,SAASA,EAIdC,GAAsD,IAAAC,EACtD,IAAMC,EAAQC,IAEd,IAAMC,UAAUJ,EAAAA,EAAeI,uBAAW,GAE1C,OAAOC,OAAOC,KAAKF,GAASG,QAAAA,CAAQC,EAAUC,KAAQ,IAAAC,EACpD,IAAMC,EAAQ,QAAAD,EAAGR,EAAMU,OAAOR,EAAQK,WAAAA,IAAxBC,EAAAA,EAAiCN,EAAQK,GAMvD,OAJIE,IACFH,EAASC,GAAOE,GAGXH,IACN"}