@megafon/ui-core 5.7.1 → 5.9.0

package/CHANGELOG.md

@@ -3,6 +3,36 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.9.0](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-core@5.8.0...@megafon/ui-core@5.9.0) (2024-04-08)
+
+
+### Bug Fixes
+
+* **tabs:** change tab color for dark theme ([5618d4b](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/5618d4b7f5a9ae862fad380691f9b3414a0fb3a0))
+
+
+### Features
+
+* **chips:** add features to Chips ([2684b97](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/2684b974fe868ea2e869fec168ed6bced2f6b75e))
+* **contentview:** add new component ContentView ([f2419dc](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/f2419dc1a659da427a306d41edd3fb67a123d25d))
+* **sliders:** add new components: Slider, SliderRatio, SliderRange ([4e03e12](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/4e03e12b587637e3e2abbe2638b5adaf4b88c00c))
+* **switcher:** add new prop theme ([2959b87](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/2959b87726cafeb2ee25e5ba50317c7423b9aa6e))
+
+
+
+
+
+# [5.8.0](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-core@5.7.1...@megafon/ui-core@5.8.0) (2024-04-01)
+
+
+### Features
+
+* **search:** add href to search item ([2c00dc8](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/2c00dc858352794b91962af2791c75927fcdf570))
+
+
+
+
+
 ## [5.7.1](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-core@5.7.0...@megafon/ui-core@5.7.1) (2024-03-26)
 
 **Note:** Version bump only for package @megafon/ui-core

package/dist/es/components/{Chip → Chips}/Chip.css

@@ -11,9 +11,6 @@
           align-items: center;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
-  min-width: -webkit-fit-content;
-  min-width: -moz-fit-content;
-  min-width: fit-content;
   padding: 8px 20px;
   border: none;
   border-radius: 20px;
@@ -43,6 +40,47 @@
 .mfui-chip:hover {
   background-color: var(--spbSky1);
 }
+.mfui-chip__inner {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.mfui-chip__counter {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  margin-left: 6px;
+  color: var(--spbSky3);
+}
+@media screen and (max-width: 767px) {
+  .mfui-chip__counter {
+    margin-left: 4px;
+  }
+}
+.mfui-chip__icon,
+.mfui-chip__icon-arrow {
+  display: block;
+  width: 20px;
+  min-width: 20px;
+  max-height: 20px;
+}
+.mfui-chip__icon svg,
+.mfui-chip__icon-arrow svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.mfui-chip__icon {
+  margin-right: 6px;
+}
+@media screen and (max-width: 767px) {
+  .mfui-chip__icon {
+    margin-right: 4px;
+  }
+}
 .mfui-chip_disabled,
 .mfui-chip_disabled:hover {
   color: var(--spbSky3);
@@ -54,6 +92,10 @@
 .mfui-chip_disabled:hover svg {
   fill: var(--spbSky3);
 }
+.mfui-chip_disabled .mfui-chip__counter,
+.mfui-chip_disabled:hover .mfui-chip__counter {
+  color: var(--spbSky2);
+}
 .mfui-chip_checked,
 .mfui-chip_checked:hover {
   color: var(--stcWhite);
@@ -63,6 +105,10 @@
 .mfui-chip_checked:hover svg {
   fill: var(--stcWhite);
 }
+.mfui-chip_checked .mfui-chip__counter,
+.mfui-chip_checked:hover .mfui-chip__counter {
+  color: var(--stcWhite);
+}
 .mfui-chip_checked.mfui-chip_color_black,
 .mfui-chip_checked.mfui-chip_color_black:hover {
   color: var(--base);
@@ -72,6 +118,10 @@
 .mfui-chip_checked.mfui-chip_color_black:hover svg {
   fill: var(--base);
 }
+.mfui-chip_checked.mfui-chip_color_black .mfui-chip__counter,
+.mfui-chip_checked.mfui-chip_color_black:hover .mfui-chip__counter {
+  color: var(--base);
+}
 .mfui-chip_with-icon {
   padding-left: 16px;
 }
@@ -80,32 +130,3 @@
     padding-left: 8px;
   }
 }
-.mfui-chip__inner {
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  white-space: nowrap;
-}
-.mfui-chip__icon {
-  display: block;
-  width: 20px;
-  min-width: 20px;
-  max-height: 20px;
-  margin-right: 6px;
-}
-@media screen and (max-width: 767px) {
-  .mfui-chip__icon {
-    margin-right: 4px;
-  }
-}
-.mfui-chip__icon svg {
-  display: block;
-  width: 100%;
-  height: 100%;
-}

package/dist/es/components/Chips/Chip.d.ts

@@ -0,0 +1,74 @@
+import React, { Ref } from 'react';
+import * as PropTypes from 'prop-types';
+import './Chip.less';
+export declare type ChipIdType = number | string;
+export declare const ChipColors: {
+    readonly DEFAULT: "default";
+    readonly BLACK: "black";
+};
+export declare type ChipColorsType = typeof ChipColors[keyof typeof ChipColors];
+export declare const ChipArrow: {
+    readonly UP: "up";
+    readonly DOWN: "down";
+};
+export declare type ChipArrowType = typeof ChipArrow[keyof typeof ChipArrow];
+export interface IChipProps {
+    /** Идентификатор */
+    id: ChipIdType;
+    /** Набор цветов для компонента */
+    color?: ChipColorsType;
+    /** Отображение в отмеченном (зажатом) состоянии */
+    checked?: boolean;
+    /** Отключенное состояние */
+    disabled?: boolean;
+    /** Иконка */
+    icon?: JSX.Element;
+    /** Значение счетчика */
+    counterValue?: number;
+    /** Стрелка вверх или вниз */
+    arrow?: ChipArrowType;
+    /** Обработчик нажатия */
+    onClick?: (e: React.SyntheticEvent<EventTarget>, id?: ChipIdType) => void;
+    /** Дочерние элементы */
+    children?: React.ReactNode;
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные классы для внутренних элементов */
+    classes?: {
+        root?: string;
+        inner?: string;
+        icon?: string;
+        counter?: string;
+    };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        inner?: Record<string, string>;
+        icon?: Record<string, string>;
+        counter?: Record<string, string>;
+        arrow?: Record<string, string>;
+    };
+    /** Ссылка на элемент */
+    rootRef?: Ref<HTMLButtonElement>;
+}
+declare const Chip: React.FC<IChipProps>;
+export declare const ChipPropType: {
+    id: PropTypes.Validator<string | number>;
+    color: PropTypes.Requireable<"default" | "black">;
+    checked: PropTypes.Requireable<boolean>;
+    disabled: PropTypes.Requireable<boolean>;
+    icon: PropTypes.Requireable<PropTypes.ReactElementLike>;
+    counterValue: PropTypes.Requireable<number>;
+    arrow: PropTypes.Requireable<"down" | "up">;
+    onClick: PropTypes.Requireable<(...args: any[]) => any>;
+    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    className: PropTypes.Requireable<string>;
+    classes: PropTypes.Requireable<{
+        [x: string]: string | null | undefined;
+    }>;
+    dataAttrs: PropTypes.Requireable<{
+        [x: string]: object | null | undefined;
+    }>;
+    rootRef: PropTypes.Requireable<any>;
+};
+export default Chip;

package/dist/es/components/{Chip → Chips}/Chip.js

@@ -1,8 +1,38 @@
 import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.object.values.js";
 import React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 import "./Chip.css";
+
+var ArrowDown = function ArrowDown(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M6 8h8l-4 5z",
+    fillRule: "evenodd",
+    clipRule: "evenodd"
+  }));
+};
+
+var ArrowUp = function ArrowUp(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M14 12H6l4-5z",
+    fillRule: "evenodd",
+    clipRule: "evenodd"
+  }));
+};
+
+export var ChipColors = {
+  DEFAULT: 'default',
+  BLACK: 'black'
+};
+export var ChipArrow = {
+  UP: 'up',
+  DOWN: 'down'
+};
 var cn = cnCreate('mfui-chip');
 
 var Chip = function Chip(_ref) {
@@ -14,6 +44,8 @@ var Chip = function Chip(_ref) {
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       icon = _ref.icon,
+      counterValue = _ref.counterValue,
+      arrow = _ref.arrow,
       onClick = _ref.onClick,
       children = _ref.children,
       className = _ref.className,
@@ -40,22 +72,29 @@ var Chip = function Chip(_ref) {
     className: cn('icon', [classes.icon])
   }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.icon)), icon), /*#__PURE__*/React.createElement("span", _extends({
     className: cn('inner', [classes.inner])
-  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.inner)), children));
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.inner)), children), !!counterValue && /*#__PURE__*/React.createElement("span", _extends({
+    className: cn('counter', [classes.counter])
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.counter)), counterValue), !!arrow && /*#__PURE__*/React.createElement("div", _extends({
+    className: cn('icon-arrow')
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrow)), arrow === 'up' ? /*#__PURE__*/React.createElement(ArrowUp, null) : /*#__PURE__*/React.createElement(ArrowDown, null)));
 };
 
-Chip.propTypes = {
-  id: PropTypes.string.isRequired,
-  color: PropTypes.oneOf(['default', 'black']),
+export var ChipPropType = {
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  color: PropTypes.oneOf(Object.values(ChipColors)),
   checked: PropTypes.bool,
   disabled: PropTypes.bool,
   icon: PropTypes.element,
+  counterValue: PropTypes.number,
+  arrow: PropTypes.oneOf(Object.values(ChipArrow)),
+  onClick: PropTypes.func,
+  children: PropTypes.node,
   className: PropTypes.string,
   classes: PropTypes.objectOf(PropTypes.string),
   dataAttrs: PropTypes.objectOf(PropTypes.object),
-  onClick: PropTypes.func,
-  children: PropTypes.node,
   rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
     current: PropTypes.elementType
   }), PropTypes.any])])
 };
+Chip.propTypes = ChipPropType;
 export default Chip;

package/dist/es/components/Chips/Chips.css

@@ -0,0 +1,19 @@
+.mfui-chips {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  gap: 12px;
+  width: 100%;
+}
+@media screen and (max-width: 767px) {
+  .mfui-chips {
+    gap: 8px;
+  }
+}
+.mfui-chips_hidden {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minMax(0, -webkit-min-content));
+  grid-template-columns: repeat(auto-fit, minMax(0, min-content));
+}

package/dist/es/components/Chips/Chips.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import { ChipColorsType, ChipIdType, IChipProps } from './Chip';
+import './Chips.less';
+export interface IChipsProps {
+    /** Массив элементов */
+    items: IChipProps[];
+    /** Значение */
+    value: ChipIdType;
+    /** Цвет активного элемента */
+    color?: ChipColorsType;
+    /** Количество отображаемых элементов на всех разрешениях экрана */
+    visibleItemsCountAll?: number;
+    /** Количество отображаемых элементов на разрешении 768 - 1023 */
+    visibleItemsCountTablet?: number;
+    /** Количество отображаемых элементов на разрешении 1024 - 1279 */
+    visibleItemsCountDesktop?: number;
+    /** Количество отображаемых элементов на разрешении 1280+ */
+    visibleItemsCountWide?: number;
+    /** Название дополнительной кнопки */
+    moreTitle?: string;
+    /** Обработчик изменения значения */
+    onChange?: (id: ChipIdType, e?: React.SyntheticEvent<EventTarget>) => void;
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+}
+declare const Chips: React.FC<IChipsProps>;
+export default Chips;

package/dist/es/components/Chips/Chips.js

@@ -0,0 +1,129 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "core-js/modules/es.array.slice.js";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.object.values.js";
+import React from 'react';
+import { breakpoints, cnCreate } from '@megafon/ui-helpers';
+import throttleTime from '@megafon/ui-shared/src/constants/throttleTime';
+import throttle from 'lodash.throttle';
+import * as PropTypes from 'prop-types';
+import Chip, { ChipColors, ChipPropType } from "./Chip";
+import ChipsDropdown from "./components/ChipsDropdown";
+import "./Chips.css";
+var DESKTOP_SMALL_START = breakpoints.DESKTOP_SMALL_START,
+    DESKTOP_MIDDLE_START = breakpoints.DESKTOP_MIDDLE_START,
+    MOBILE_BIG_START = breakpoints.MOBILE_BIG_START;
+var cn = cnCreate('mfui-chips');
+
+var Chips = function Chips(_ref) {
+  var items = _ref.items,
+      value = _ref.value,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'default' : _ref$color,
+      _ref$moreTitle = _ref.moreTitle,
+      moreTitle = _ref$moreTitle === void 0 ? 'Еще' : _ref$moreTitle,
+      visibleItemsCountAll = _ref.visibleItemsCountAll,
+      visibleItemsCountTablet = _ref.visibleItemsCountTablet,
+      visibleItemsCountDesktop = _ref.visibleItemsCountDesktop,
+      visibleItemsCountWide = _ref.visibleItemsCountWide,
+      onChange = _ref.onChange,
+      className = _ref.className;
+
+  var _React$useState = React.useState(value),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      selectedId = _React$useState2[0],
+      setSelectedId = _React$useState2[1];
+
+  var _React$useState3 = React.useState(visibleItemsCountAll),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      visibleItemsCount = _React$useState4[0],
+      setVisibleItemsCount = _React$useState4[1];
+
+  var _React$useState5 = React.useState([]),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      visibleItems = _React$useState6[0],
+      setVisibleItems = _React$useState6[1];
+
+  var _React$useState7 = React.useState(null),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      hiddenItems = _React$useState8[0],
+      setHiddenItems = _React$useState8[1];
+
+  var handleClick = React.useCallback(function (e, id) {
+    e.persist();
+    setSelectedId(id);
+    onChange === null || onChange === void 0 ? void 0 : onChange(id, e);
+  }, [onChange]);
+  React.useEffect(function () {
+    var resizeHandler = function resizeHandler() {
+      var windowWidth = window.innerWidth;
+
+      if (visibleItemsCountWide && windowWidth >= DESKTOP_MIDDLE_START) {
+        setVisibleItemsCount(visibleItemsCountWide);
+        return;
+      }
+
+      if (visibleItemsCountDesktop && windowWidth >= DESKTOP_SMALL_START && windowWidth < DESKTOP_MIDDLE_START) {
+        setVisibleItemsCount(visibleItemsCountDesktop);
+        return;
+      }
+
+      if (visibleItemsCountTablet && windowWidth >= MOBILE_BIG_START && windowWidth < DESKTOP_SMALL_START) {
+        setVisibleItemsCount(visibleItemsCountTablet);
+        return;
+      }
+
+      setVisibleItemsCount(visibleItemsCountAll);
+    };
+
+    var resizeHandlerThrottled = throttle(resizeHandler, throttleTime.resize);
+    resizeHandler();
+    window.addEventListener('resize', resizeHandlerThrottled);
+    return function () {
+      window.removeEventListener('resize', resizeHandlerThrottled);
+    };
+  }, [visibleItemsCountAll, visibleItemsCountDesktop, visibleItemsCountTablet, visibleItemsCountWide]);
+  React.useEffect(function () {
+    if (visibleItemsCount && items.length > visibleItemsCount) {
+      setVisibleItems(items.slice(0, visibleItemsCount));
+      setHiddenItems(items.slice(visibleItemsCount));
+    } else {
+      setVisibleItems(items);
+      setHiddenItems(null);
+    }
+  }, [items, visibleItemsCount]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn({
+      hidden: !!hiddenItems
+    }, [className])
+  }, visibleItems.map(function (item) {
+    return /*#__PURE__*/React.createElement(Chip, _extends({
+      key: item.id
+    }, item, {
+      checked: item.id === selectedId,
+      color: color,
+      onClick: handleClick
+    }), !!(item === null || item === void 0 ? void 0 : item.children) && item.children);
+  }), !!hiddenItems && /*#__PURE__*/React.createElement(ChipsDropdown, {
+    value: selectedId,
+    items: hiddenItems,
+    moreTitle: moreTitle,
+    color: color,
+    onClick: handleClick
+  }));
+};
+
+Chips.propTypes = {
+  items: PropTypes.arrayOf(PropTypes.shape(ChipPropType).isRequired).isRequired,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  color: PropTypes.oneOf(Object.values(ChipColors)),
+  visibleItemsCountAll: PropTypes.number,
+  visibleItemsCountTablet: PropTypes.number,
+  visibleItemsCountDesktop: PropTypes.number,
+  visibleItemsCountWide: PropTypes.number,
+  moreTitle: PropTypes.string,
+  onChange: PropTypes.func,
+  className: PropTypes.string
+};
+export default Chips;

package/dist/es/components/Chips/components/ChipsDropdown.css

@@ -0,0 +1,106 @@
+@-webkit-keyframes listAppear {
+  from {
+    -webkit-transform: translateY(-25px);
+            transform: translateY(-25px);
+    opacity: 0;
+  }
+  to {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+    opacity: 1;
+  }
+}
+@keyframes listAppear {
+  from {
+    -webkit-transform: translateY(-25px);
+            transform: translateY(-25px);
+    opacity: 0;
+  }
+  to {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+    opacity: 1;
+  }
+}
+.mfui-chips-dropdown {
+  position: relative;
+}
+.mfui-chips-dropdown__button {
+  width: 100%;
+}
+.mfui-chips-dropdown__list {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 100;
+  display: block;
+  border-radius: 12px;
+  background-color: var(--base);
+  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  -webkit-animation-name: listAppear;
+          animation-name: listAppear;
+  -webkit-animation-duration: 0.3s;
+          animation-duration: 0.3s;
+  -webkit-animation-timing-function: ease-in-out;
+          animation-timing-function: ease-in-out;
+}
+.mfui-chips-dropdown__list-inner {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  max-height: 320px;
+  width: -webkit-max-content;
+  width: -moz-max-content;
+  width: max-content;
+  max-width: 256px;
+  padding: 16px;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--spbSky2) transparent;
+  overflow-wrap: normal;
+}
+.mfui-chips-dropdown__list-inner::-webkit-scrollbar {
+  width: 16px;
+}
+.mfui-chips-dropdown__list-inner::-webkit-scrollbar-thumb {
+  border: 6px solid transparent;
+  border-radius: 16px;
+  background-color: var(--spbSky2);
+  background-clip: padding-box;
+}
+.mfui-chips-dropdown__list-inner::-webkit-scrollbar-thumb:hover {
+  background-color: var(--spbSky3);
+}
+.mfui-chips-dropdown__list-item {
+  font-family: inherit;
+  font-size: 15px;
+  line-height: 24px;
+  font-weight: 500;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 12px 32px;
+  border-radius: 12px;
+  background-color: transparent;
+  cursor: pointer;
+}
+.mfui-chips-dropdown__list-item:hover {
+  background-color: var(--spbSky0);
+}
+.mfui-chips-dropdown__list-item_with-icon {
+  padding-left: 16px;
+  padding-right: 16px;
+}
+.mfui-chips-dropdown__icon {
+  display: block;
+  width: 24px;
+  min-width: 24px;
+  max-height: 24px;
+  margin-right: 16px;
+}
+.mfui-chips-dropdown__icon svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  fill: var(--content);
+}

package/dist/es/components/Chips/components/ChipsDropdown.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ChipColorsType, ChipIdType, IChipProps } from '../Chip';
+import './ChipsDropdown.less';
+export interface IChipsDropdownProps {
+    moreTitle: string;
+    value: ChipIdType;
+    items: IChipProps[];
+    color: ChipColorsType;
+    onClick: (e: React.SyntheticEvent<EventTarget>, id: ChipIdType) => void;
+    dataAttrs?: {
+        root?: Record<string, string>;
+        list?: Record<string, string>;
+    };
+}
+declare const ChipsDropdown: React.FC<IChipsDropdownProps>;
+export default ChipsDropdown;