@skbkontur/react-ui 0.0.0-a5ba2462c5 → 0.0.0-a6f09fbded

package/cjs/components/ComboBox/ComboBox.md

@@ -0,0 +1,574 @@
+### Комбобокс с валидацией
+
+```jsx harmony
+import { Tooltip } from '@skbkontur/react-ui';
+
+const delay = time => args => new Promise(resolve => setTimeout(resolve, time, args));
+
+let maybeReject = x => (Math.random() * 3 < 1 ? Promise.reject() : Promise.resolve(x));
+
+let getItems = q =>
+  Promise.resolve(
+    [
+      { value: 1, label: 'First' },
+      { value: 2, label: 'Second' },
+      { value: 3, label: 'Third' },
+      { value: 4, label: 'Fourth' },
+      { value: 5, label: 'Fifth' },
+      { value: 6, label: 'Sixth' },
+    ].filter(x => x.label.toLowerCase().includes(q.toLowerCase()) || x.value.toString(10) === q),
+  )
+    .then(delay(500))
+    .then(maybeReject);
+
+const [selected, setSelected] = React.useState({ value: 3, label: 'Third' });
+const [error, setError] = React.useState(false);
+
+let handleValueChange = value => {
+  setSelected(value);
+  setError(false);
+};
+
+let handleUnexpectedInput = () => {
+  setSelected(null);
+  setError(true);
+};
+
+let handleFocus = () => setError(false);
+
+<Tooltip closeButton={false} render={() => 'Item must be selected!'} trigger={error ? 'opened' : 'closed'}>
+  <ComboBox
+    error={error}
+    getItems={getItems}
+    onValueChange={handleValueChange}
+    onFocus={handleFocus}
+    onUnexpectedInput={handleUnexpectedInput}
+    placeholder="Enter number"
+    value={selected}
+  />
+</Tooltip>;
+```
+
+### Очистка комбобокса
+Очистить значение в `ComboBox`'е можно с помощью пустой строки, `null` или `undefined`
+```jsx harmony
+import { Group, ComboBox, Button } from '@skbkontur/react-ui';
+
+const [value, setValue] = React.useState({ value: 2, label: 'Second' });
+
+const getItems = q => {
+  return Promise.resolve(
+    [
+      { value: 1, label: 'First' },
+      { value: 2, label: 'Second' },
+      { value: 3, label: 'Third' },
+      { value: 4, label: 'Fourth' },
+      { value: 5, label: 'Fifth' },
+      { value: 6, label: 'Sixth' },
+    ].filter(x => x.label.toLowerCase().includes(q.toLowerCase()) || x.value.toString(10) === q),
+  )
+};
+
+<Group>
+  <ComboBox
+    getItems={getItems}
+    onValueChange={setValue}
+    placeholder="Введите число"
+    value={value}
+  />
+  <Button onClick={() => setValue(null)}>Null</Button>
+  <Button onClick={() => setValue(undefined)}>Undefined</Button>
+  <Button onClick={() => setValue('')}>Пустая строка</Button>
+</Group>
+```
+
+### ComboBox with popular values, complex menu items and total count message
+
+```jsx harmony
+import { getCities } from '@skbkontur/react-ui/components/ComboBox/__mocks__/getCities';
+import { Gapped, MenuSeparator } from '@skbkontur/react-ui';
+import {MenuFooter} from "@skbkontur/react-ui/components/MenuFooter";
+
+let popularItems = [
+  { Id: 956, City: 'Махачкала' },
+  { Id: 4974, City: 'Верхняя-Пышма' },
+  { Id: 4980, City: 'Екатеринбург' },
+];
+
+const [value, setValue] = React.useState(null);
+
+let mapCity = ({ Id, City }) => ({
+  value: Id,
+  label: City,
+});
+
+let hasSelectedItem = itemsSets => itemsSets.some(items => items.find(item => value.value === item.Id));
+
+let shouldInsertSelectedItem = (query, items) => value && !query && !hasSelectedItem([items, popularItems]);
+
+let getPopularItems = query => (query ? [] : popularItems.map(mapCity));
+let renderSeparator = query => (query ? [] : <MenuSeparator />);
+let getSelectedItem = (query, items) => (!shouldInsertSelectedItem(query, items) ? [] : value);
+
+let prepareItems = (query, items) =>
+  (!shouldInsertSelectedItem(query, items) ? items : items.slice(0, -1)).map(mapCity);
+
+let renderTotalCount = (foundCount, totalCount) =>
+  foundCount < totalCount ? (
+    <MenuFooter>
+      Показано {foundCount} из {totalCount} найденных городов.
+    </MenuFooter>
+  ) : (
+    []
+  );
+
+let getItems = query =>
+  getCities(query).then(({ foundItems, totalCount }) =>
+    [].concat(
+      getPopularItems(query),
+      renderSeparator(query),
+      getSelectedItem(query, foundItems),
+      prepareItems(query, foundItems),
+      renderTotalCount(foundItems.length, totalCount),
+    ),
+  );
+
+let renderItem = item => (
+  <Gapped>
+    <div style={{ width: 40 }}>{item.value}</div>
+    <div style={{ width: 210, whiteSpace: 'normal' }}>{item.label}</div>
+  </Gapped>
+);
+
+<ComboBox
+  onValueChange={setValue}
+  getItems={getItems}
+  placeholder="Начните вводить название"
+  value={value}
+  renderItem={renderItem}
+/>;
+```
+
+### Переопределение `renderValue`, `renderItem` и `itemWrapper`
+
+```jsx harmony
+import { CheckAIcon16Regular } from '@skbkontur/icons/icons/CheckAIcon/CheckAIcon16Regular';
+import { Tooltip } from '@skbkontur/react-ui';
+
+const delay = time => args => new Promise(resolve => setTimeout(resolve, time, args));
+
+const getItems = q =>
+  Promise.resolve(
+    [
+      { approved: true, value: 1, label: 'Леонид Долецкий', email: 'first@skbkontur.ru' },
+      { approved: true, value: 2, label: 'Владислав Нашкодивший', email: 'second@skbkontur.ru' },
+      { approved: false, value: 3, label: 'Розенкранц Харитонов', email: 'third@skbkontur.ru' },
+      { approved: false, value: 4, label: 'Надежда Дубова', email: 'fourth@skbkontur.ru' },
+      { approved: true, value: 5, label: 'Владислав Сташкеевич', email: 'fifth@skbkontur.ru' },
+      { approved: true, value: 6, label: 'Василиса Александровна Поволоцкая', email: 'sixth@skbkontur.ru' },
+    ].filter(x => x.label.toLowerCase().includes(q.toLowerCase()) || x.value.toString(10) === q),
+  ).then(delay(500));
+
+const [selected, setSelected] = React.useState({
+  approved: false,
+  value: 3,
+  label: 'Розенкранц Харитонов',
+  email: 'third@skbkontur.ru',
+});
+const [error, setError] = React.useState(false);
+
+const handleValueChange = value => {
+  setSelected(value);
+  setError(false);
+};
+
+const handleUnexpectedInput = () => {
+  setSelected(null);
+  setError(true);
+};
+
+const handleFocus = () => setError(false);
+
+const customRenderItem = item => (
+  <div
+    style={{
+      display: 'flex',
+    }}
+  >
+    <div
+      style={{
+        width: '55%',
+        display: 'flex',
+      }}
+    >
+      <span
+        style={{
+          minWidth: '20px',
+        }}
+      >
+        {item.approved ? <CheckAIcon16Regular size={14} /> : null}
+      </span>
+      <span
+        style={{
+          flexGrow: '1',
+        }}
+      >
+        {item.label}
+      </span>
+    </div>
+    <div
+      style={{
+        opacity: '0.6',
+        paddingLeft: '10px',
+        boxSizing: 'border-box',
+      }}
+    >
+      {item.email}
+    </div>
+  </div>
+);
+
+const customItemWrapper = item => {
+  if (item.value === 3) {
+    return (props) => <div {...props} />;
+  }
+
+  return (props) => <button {...props} />
+}
+
+const customRenderValue = item => (
+  <div
+    style={{
+      display: 'flex',
+    }}
+  >
+    <div
+      style={{
+        width: '55%',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis'
+      }}
+    >
+      {item.label}
+    </div>
+    <div
+      style={{
+        opacity: '0.6',
+        paddingLeft: '10px',
+        boxSizing: 'border-box',
+      }}
+    >
+      {item.email}
+    </div>
+  </div>
+);
+
+<Tooltip closeButton={false} render={() => 'Item must be selected!'} trigger={error ? 'opened' : 'closed'}>
+  <ComboBox
+    error={error}
+    getItems={getItems}
+    onValueChange={handleValueChange}
+    onFocus={handleFocus}
+    onUnexpectedInput={handleUnexpectedInput}
+    placeholder="Enter number"
+    value={selected}
+    renderItem={customRenderItem}
+    itemWrapper={customItemWrapper}
+    renderValue={customRenderValue}
+    width="400px"
+  />
+</Tooltip>;
+```
+
+### Подсветка результата поиска
+
+```jsx harmony
+import { Tooltip } from '@skbkontur/react-ui';
+
+const delay = time => args => new Promise(resolve => setTimeout(resolve, time, args));
+
+const getItems = query =>
+  Promise.resolve(
+    [
+      { value: 1, label: 'First' },
+      { value: 2, label: 'Second' },
+      { value: 3, label: 'Third' },
+      { value: 4, label: 'Fourth' },
+      { value: 5, label: 'Fifth' },
+      { value: 6, label: 'Sixth' },
+    ]
+      .filter(x => x.label.toLowerCase().includes(query.toLowerCase()) || x.value.toString(10) === query)
+      .map(({ label, ...rest }) => {
+        const start = label.toLowerCase().indexOf(query.toLowerCase());
+        const end = start + query.length;
+
+        return {
+          ...rest,
+          label,
+          highlightedLabel:
+            start >= 0 ? (
+              <span>
+                {label.substring(0, start)}
+                <strong
+                  style={{
+                    fontSize: '1.1em',
+                  }}
+                >
+                  {label.substring(start, end)}
+                </strong>
+                {label.substring(end)}
+              </span>
+            ) : null,
+        };
+      }),
+  ).then(delay(500));
+
+const [selected, setSelected] = React.useState({ value: 3, label: 'Third' });
+const [error, setError] = React.useState(false);
+
+let handleValueChange = value => {
+  setSelected(value);
+  setError(false);
+};
+
+let handleUnexpectedInput = () => {
+  setSelected(null);
+  setError(true);
+};
+
+let handleFocus = () => setError(false);
+
+const renderItem = item => {
+  if (item.highlightedLabel) {
+    return item.highlightedLabel;
+  }
+
+  return item.label;
+};
+
+<Tooltip closeButton={false} render={() => 'Item must be selected!'} trigger={error ? 'opened' : 'closed'}>
+  <ComboBox
+    error={error}
+    getItems={getItems}
+    onValueChange={handleValueChange}
+    onFocus={handleFocus}
+    onUnexpectedInput={handleUnexpectedInput}
+    placeholder="Enter number"
+    value={selected}
+    renderItem={renderItem}
+  />
+</Tooltip>;
+```
+
+### Добавление элементов в меню
+
+```jsx harmony
+import { MenuItem } from '@skbkontur/react-ui';
+
+const delay = time => args => new Promise(resolve => setTimeout(resolve, time, args));
+
+class ComboboxExample extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      items: [
+        { value: 1, label: 'First' },
+        { value: 2, label: 'Second' },
+        { value: 3, label: 'Third' },
+        { value: 4, label: 'Fourth' },
+        { value: 5, label: 'Fifth' },
+        { value: 6, label: 'Sixth' },
+      ],
+      query: '',
+      selected: { value: 3, label: 'Third' },
+      error: false,
+      shouldRenderAddButton: false,
+    };
+
+    this.comboBoxElement = null;
+
+    this.getItems = this.getItems.bind(this);
+    this.handleValueChange = this.handleValueChange.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
+    this.handleInputValueChange = this.handleInputValueChange.bind(this);
+    this.renderAddButton = this.renderAddButton.bind(this);
+    this.refComboBox = this.refComboBox.bind(this);
+    this.addItem = this.addItem.bind(this);
+  }
+
+  render() {
+    return (
+      <ComboBox
+        error={this.state.error}
+        getItems={this.getItems}
+        onValueChange={this.handleValueChange}
+        onFocus={this.handleFocus}
+        placeholder="Enter number"
+        value={this.state.selected}
+        onInputValueChange={this.handleInputValueChange}
+        renderAddButton={this.renderAddButton}
+        ref={this.refComboBox}
+      />
+    );
+  }
+
+  getItems(q) {
+    return Promise.resolve(
+      this.state.items.filter(x => x.label.toLowerCase().includes(q.toLowerCase()) || x.value.toString(10) === q),
+    ).then(delay(500));
+  }
+
+  handleInputValueChange(query) {
+    const isItemExists = this.state.items.find(x => x.label.toLowerCase() == query.toLowerCase());
+    this.setState({ query, shouldRenderAddButton: !isItemExists });
+  }
+
+  handleValueChange(value) {
+    this.setState({ selected: value, error: false, shouldRenderAddButton: false });
+  }
+
+  handleFocus() {
+    this.setState({ error: false });
+  }
+
+  renderAddButton() {
+    if (!this.state.shouldRenderAddButton) {
+      return null;
+    }
+    return (
+      <MenuItem link onClick={this.addItem}>
+        + Добавить "{this.state.query}"
+      </MenuItem>
+    );
+  }
+
+  refComboBox(element) {
+    this.comboBoxElement = element;
+  }
+
+  addItem() {
+    this.setState(currentState => {
+      const newItem = {
+        value: Math.max(...currentState.items.map(({ value }) => value)) + 1,
+        label: currentState.query,
+      };
+
+      return {
+        items: [...currentState.items, newItem],
+        selected: newItem,
+        error: false,
+        shouldRenderAddButton: false,
+      };
+    });
+  }
+}
+
+<ComboboxExample />;
+```
+
+### Сброс контрола
+Если нужно сбросить контрол без изменения `value`, то можно использовать метод `reset`.
+
+```jsx harmony
+import { Button } from '@skbkontur/react-ui';
+
+const [selected, setSelected] = React.useState({ value: 1, label: "First" });
+const ref = React.useRef(null);
+
+const handleReset = () => {
+  if (ref.current) {
+    ref.current.reset();
+  }
+};
+
+const getItems = (q) =>
+  Promise.resolve(
+    [
+      { value: 1, label: "First" },
+      { value: 2, label: "Second" },
+      { value: 3, label: "Third" }
+    ].filter(
+      (x) =>
+        x.label.toLowerCase().includes(q.toLowerCase()) ||
+        x.value.toString(10) === q
+    )
+  );
+
+<div>
+  <ComboBox
+    ref={ref}
+    getItems={getItems}
+    onValueChange={setSelected}
+    placeholder="Enter number"
+    value={selected}
+  />
+  <Button onClick={handleReset}>Reset</Button>
+</div>
+
+```
+
+### Локали по умолчанию
+
+```typescript static
+interface ComboBoxLocale {
+  notFound?: string;
+  errorNetworkButton?: string;
+  errorNetworkMessage?: string;
+}
+
+const ru_RU = {
+  notFound: 'Не найдено',
+  errorNetworkButton: 'Обновить',
+  errorNetworkMessage: 'Что-то пошло не так. Проверьте соединение с интернетом и попробуйте еще раз',
+};
+
+const en_GB = {
+  notFound: 'Not found',
+  errorNetworkButton: 'Refresh',
+  errorNetworkMessage: 'Something went wrong. Check your internet connection and try again',
+};
+```
+
+### Размер
+```jsx harmony
+import { Gapped } from '@skbkontur/react-ui';
+
+const getItems = q => {
+  return Promise.resolve(
+    [
+      { value: 1, label: 'Маленький' },
+      { value: 2, label: 'Средний' },
+      { value: 3, label: 'Большой' },
+    ].filter(x => x.label.toLowerCase().includes(q.toLowerCase()) || x.value.toString(10) === q),
+  )
+};
+
+const [valueSmall, setValueSmall] = React.useState('Маленький');
+const [valueMedium, setValueMedium] = React.useState('Средний');
+const [valueLarge, setValueLarge] = React.useState('Большой');
+
+<Gapped vertical>
+  <ComboBox
+    getItems={getItems}
+    onValueChange={setValueSmall}
+    placeholder="Введите число"
+    value={valueSmall}
+    size={'small'}
+  />
+  <ComboBox
+    getItems={getItems}
+    onValueChange={setValueMedium}
+    placeholder="Введите число"
+    value={valueMedium}
+    size={'medium'}
+  />
+  <ComboBox
+    getItems={getItems}
+    onValueChange={setValueLarge}
+    placeholder="Введите число"
+    value={valueLarge}
+    size={'large'}
+  />
+</Gapped>
+```

package/cjs/components/CurrencyInput/CurrencyInput.md

@@ -0,0 +1,39 @@
+### Базовый пример
+```jsx harmony
+const [value, setValue] = React.useState();
+
+<CurrencyInput value={value} fractionDigits={3} onValueChange={setValue} />
+```
+
+### Очистка значения
+Очистить значение в `CurrencyInput` можно с помощью `null` или `undefined`
+```jsx harmony
+import { Button, Group } from '@skbkontur/react-ui';
+
+const [value, setValue] = React.useState();
+
+<Group>
+  <CurrencyInput value={value} onValueChange={setValue} />
+  <Button onClick={() => setValue(null)}>Null</Button>
+  <Button onClick={() => setValue(undefined)}>Undefined</Button>
+</Group>
+```
+
+### fractionDigits={15}
+
+```jsx harmony
+const [value, setValue] = React.useState();
+
+<CurrencyInput value={value} fractionDigits={15} onValueChange={setValue} />
+```
+
+---
+
+### <a name="/CurrencyInput?id=why15" href="#/CurrencyInput?id=why15">Почему 15?</a>
+
+Максимальное безопасное целочисленное значение - `9007199254740991` (16 цифр).
+Убрав один разряд, мы получим "новое" максимальное безопасное значение - **`999999999999999` (15 цифр)**.
+
+При этом десятичный резделитель может находиться в любом месте. Если целая часть равна `0`, то она не учитывается.
+
+_Детали можно почитать здесь - <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER">MDN web docs</a>_

package/cjs/components/CurrencyLabel/CurrencyLabel.js

@@ -47,8 +47,8 @@ var CurrencyLabel = exports.CurrencyLabel = (0, _forwardRefAndName.forwardRefAnd
   {var id = _ref.id,value = _ref.value,_ref$fractionDigits = _ref.fractionDigits,fractionDigits = _ref$fractionDigits === void 0 ? FRACTION_DIGITS_DEFAULT : _ref$fractionDigits,currencySymbol = _ref.currencySymbol,_ref$hideTrailingZero = _ref.hideTrailingZeros,hideTrailingZeros = _ref$hideTrailingZero === void 0 ? false : _ref$hideTrailingZero,rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
     _react.default.useEffect(function () {
       (0, _warning.default)(
-        fractionDigits <= _constants.MAX_SAFE_DIGITS, "[CurrencyLabel]: Prop 'fractionDigits' exceeds " +
-        _constants.MAX_SAFE_DIGITS + ".\nSee CurrencyInput documentation"
+        fractionDigits <= _constants.MAX_SAFE_DIGITS,
+        "[CurrencyLabel]: Prop 'fractionDigits' exceeds " + _constants.MAX_SAFE_DIGITS + "." + "\nSee CurrencyInput documentation"
       );
 
       var _ref2 = _CurrencyHelper.CurrencyHelper.destructString(String(value)) || { fraction: '' },fraction = _ref2.fraction;

package/cjs/components/CurrencyLabel/CurrencyLabel.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_warning","_constants","_CurrencyHelper","_CommonWrapper","_forwardRefAndName","_excluded","FRACTION_DIGITS_DEFAULT","CurrencyLabelDataTids","exports","root","CurrencyLabel","forwardRefAndName","_ref","ref","id","value","_ref$fractionDigits","fractionDigits","currencySymbol","_ref$hideTrailingZero","hideTrailingZeros","rest","_objectWithoutPropertiesLoose2","default","React","useEffect","warning","MAX_SAFE_DIGITS","_ref2","CurrencyHelper","destructString","String","fraction","length","Number","isInteger","createElement","CommonWrapper","format","fromCharCode"],"sources":["CurrencyLabel.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport React from 'react';\nimport warning from 'warning';\n\nimport { MAX_SAFE_DIGITS } from '../CurrencyInput/constants';\nimport { CurrencyHelper } from '../CurrencyInput/CurrencyHelper';\nimport type { CommonProps } from '../../internal/CommonWrapper';\nimport { CommonWrapper } from '../../internal/CommonWrapper';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\n\nexport interface CurrencyLabelProps extends CommonProps, Pick<HTMLAttributes<HTMLElement>, 'id'> {\n  /** Устанавливает минимальное количество отображаемых знаков после запятой.\n   * @default 2 */\n  fractionDigits?: number;\n\n  /** Устанавливает значение. */\n  value: number;\n\n  /** Задает символ валюты. */\n  currencySymbol?: React.ReactNode;\n\n  /** Убирает лишние нули после запятой. */\n  hideTrailingZeros?: boolean;\n}\n\nconst FRACTION_DIGITS_DEFAULT = 2;\n\nexport const CurrencyLabelDataTids = {\n  root: 'CurrencyLabel__root',\n} as const;\n\n/**\n * `CurrencyLabel` — подпись для денежных сумм (и других числовых значений).\n */\nconst CurrencyLabel = forwardRefAndName(\n  'CurrencyLabel',\n  function CurrencyLabel(\n    {\n      id,\n      value,\n      fractionDigits = FRACTION_DIGITS_DEFAULT,\n      currencySymbol,\n      hideTrailingZeros = false,\n      ...rest\n    }: CurrencyLabelProps,\n    ref: React.Ref<HTMLDivElement>,\n  ) {\n    React.useEffect(() => {\n      warning(\n        fractionDigits <= MAX_SAFE_DIGITS,\n        `[CurrencyLabel]: Prop 'fractionDigits' exceeds ${MAX_SAFE_DIGITS}.\\nSee CurrencyInput documentation`,\n      );\n\n      const { fraction } = CurrencyHelper.destructString(String(value)) || { fraction: '' };\n      warning(\n        fraction.length <= fractionDigits,\n        `[CurrencyLabel]: Prop 'fractionDigits' less than fractional part of the 'value' property,` +\n          `'value' will not be cutted`,\n      );\n\n      warning(\n        Number.isInteger(fractionDigits),\n        `[CurrencyLabel]: Prop 'fractionDigits' is not integer, fraction part of these property will not be used`,\n      );\n    }, [fractionDigits, value]);\n\n    return (\n      <CommonWrapper {...rest}>\n        <span id={id} data-tid={CurrencyLabelDataTids.root} ref={ref}>\n          {CurrencyHelper.format(value, { fractionDigits, hideTrailingZeros })}\n          {currencySymbol && String.fromCharCode(0xa0) /* &nbsp; */}\n          {currencySymbol}\n        </span>\n      </CommonWrapper>\n    );\n  },\n);\n\nexport { CurrencyLabel };\n"],"mappings":";AACA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,QAAA,GAAAF,sBAAA,CAAAC,OAAA;;AAEA,IAAAE,UAAA,GAAAF,OAAA;AACA,IAAAG,eAAA,GAAAH,OAAA;;AAEA,IAAAI,cAAA,GAAAJ,OAAA;AACA,IAAAK,kBAAA,GAAAL,OAAA,gCAAgE,IAAAM,SAAA;;;;;;;;;;;;;;;;;AAiBhE,IAAMC,uBAAuB,GAAG,CAAC;;AAE1B,IAAMC,qBAAqB,GAAAC,OAAA,CAAAD,qBAAA,GAAG;EACnCE,IAAI,EAAE;AACR,CAAU;;AAEV;AACA;AACA;AACA,IAAMC,aAAa,GAAAF,OAAA,CAAAE,aAAA,GAAG,IAAAC,oCAAiB;EACrC,eAAe;EACf,SAASD,aAAaA,CAAAE,IAAA;;;;;;;;;EASpBC,GAA8B;EAC9B,KAREC,EAAE,GAAAF,IAAA,CAAFE,EAAE,CACFC,KAAK,GAAAH,IAAA,CAALG,KAAK,CAAAC,mBAAA,GAAAJ,IAAA,CACLK,cAAc,CAAdA,cAAc,GAAAD,mBAAA,cAAGV,uBAAuB,GAAAU,mBAAA,CACxCE,cAAc,GAAAN,IAAA,CAAdM,cAAc,CAAAC,qBAAA,GAAAP,IAAA,CACdQ,iBAAiB,CAAjBA,iBAAiB,GAAAD,qBAAA,cAAG,KAAK,GAAAA,qBAAA,CACtBE,IAAI,OAAAC,8BAAA,CAAAC,OAAA,EAAAX,IAAA,EAAAP,SAAA;IAITmB,cAAK,CAACC,SAAS,CAAC,YAAM;MACpB,IAAAC,gBAAO;QACLT,cAAc,IAAIU,0BAAe;QACiBA,0BAAe;MACnE,CAAC;;MAED,IAAAC,KAAA,GAAqBC,8BAAc,CAACC,cAAc,CAACC,MAAM,CAAChB,KAAK,CAAC,CAAC,IAAI,EAAEiB,QAAQ,EAAE,EAAE,CAAC,CAAC,CAA7EA,QAAQ,GAAAJ,KAAA,CAARI,QAAQ;MAChB,IAAAN,gBAAO;QACLM,QAAQ,CAACC,MAAM,IAAIhB,cAAc;QACjC;;MAEF,CAAC;;MAED,IAAAS,gBAAO;QACLQ,MAAM,CAACC,SAAS,CAAClB,cAAc,CAAC;;MAElC,CAAC;IACH,CAAC,EAAE,CAACA,cAAc,EAAEF,KAAK,CAAC,CAAC;;IAE3B;MACElB,MAAA,CAAA0B,OAAA,CAAAa,aAAA,CAACjC,cAAA,CAAAkC,aAAa,EAAKhB,IAAI;MACrBxB,MAAA,CAAA0B,OAAA,CAAAa,aAAA,WAAMtB,EAAE,EAAEA,EAAG,EAAC,YAAUP,qBAAqB,CAACE,IAAK,EAACI,GAAG,EAAEA,GAAI;MAC1DgB,8BAAc,CAACS,MAAM,CAACvB,KAAK,EAAE,EAAEE,cAAc,EAAdA,cAAc,EAAEG,iBAAiB,EAAjBA,iBAAiB,CAAC,CAAC,CAAC;MACnEF,cAAc,IAAIa,MAAM,CAACQ,YAAY,CAAC,IAAI,CAAC,CAAC;MAC5CrB;MACG;MACO,CAAC;;EAEpB;AACF,CAAC","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_warning","_constants","_CurrencyHelper","_CommonWrapper","_forwardRefAndName","_excluded","FRACTION_DIGITS_DEFAULT","CurrencyLabelDataTids","exports","root","CurrencyLabel","forwardRefAndName","_ref","ref","id","value","_ref$fractionDigits","fractionDigits","currencySymbol","_ref$hideTrailingZero","hideTrailingZeros","rest","_objectWithoutPropertiesLoose2","default","React","useEffect","warning","MAX_SAFE_DIGITS","_ref2","CurrencyHelper","destructString","String","fraction","length","Number","isInteger","createElement","CommonWrapper","format","fromCharCode"],"sources":["CurrencyLabel.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport React from 'react';\nimport warning from 'warning';\n\nimport { MAX_SAFE_DIGITS } from '../CurrencyInput/constants';\nimport { CurrencyHelper } from '../CurrencyInput/CurrencyHelper';\nimport type { CommonProps } from '../../internal/CommonWrapper';\nimport { CommonWrapper } from '../../internal/CommonWrapper';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\n\nexport interface CurrencyLabelProps extends CommonProps, Pick<HTMLAttributes<HTMLElement>, 'id'> {\n  /** Устанавливает минимальное количество отображаемых знаков после запятой.\n   * @default 2 */\n  fractionDigits?: number;\n\n  /** Устанавливает значение. */\n  value: number;\n\n  /** Задает символ валюты. */\n  currencySymbol?: React.ReactNode;\n\n  /** Убирает лишние нули после запятой. */\n  hideTrailingZeros?: boolean;\n}\n\nconst FRACTION_DIGITS_DEFAULT = 2;\n\nexport const CurrencyLabelDataTids = {\n  root: 'CurrencyLabel__root',\n} as const;\n\n/**\n * `CurrencyLabel` — подпись для денежных сумм (и других числовых значений).\n */\nconst CurrencyLabel = forwardRefAndName(\n  'CurrencyLabel',\n  function CurrencyLabel(\n    {\n      id,\n      value,\n      fractionDigits = FRACTION_DIGITS_DEFAULT,\n      currencySymbol,\n      hideTrailingZeros = false,\n      ...rest\n    }: CurrencyLabelProps,\n    ref: React.Ref<HTMLDivElement>,\n  ) {\n    React.useEffect(() => {\n      warning(\n        fractionDigits <= MAX_SAFE_DIGITS,\n        `[CurrencyLabel]: Prop 'fractionDigits' exceeds ${MAX_SAFE_DIGITS}.` + `\\nSee CurrencyInput documentation`,\n      );\n\n      const { fraction } = CurrencyHelper.destructString(String(value)) || { fraction: '' };\n      warning(\n        fraction.length <= fractionDigits,\n        `[CurrencyLabel]: Prop 'fractionDigits' less than fractional part of the 'value' property,` +\n          `'value' will not be cutted`,\n      );\n\n      warning(\n        Number.isInteger(fractionDigits),\n        `[CurrencyLabel]: Prop 'fractionDigits' is not integer, fraction part of these property will not be used`,\n      );\n    }, [fractionDigits, value]);\n\n    return (\n      <CommonWrapper {...rest}>\n        <span id={id} data-tid={CurrencyLabelDataTids.root} ref={ref}>\n          {CurrencyHelper.format(value, { fractionDigits, hideTrailingZeros })}\n          {currencySymbol && String.fromCharCode(0xa0) /* &nbsp; */}\n          {currencySymbol}\n        </span>\n      </CommonWrapper>\n    );\n  },\n);\n\nexport { CurrencyLabel };\n"],"mappings":";AACA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,QAAA,GAAAF,sBAAA,CAAAC,OAAA;;AAEA,IAAAE,UAAA,GAAAF,OAAA;AACA,IAAAG,eAAA,GAAAH,OAAA;;AAEA,IAAAI,cAAA,GAAAJ,OAAA;AACA,IAAAK,kBAAA,GAAAL,OAAA,gCAAgE,IAAAM,SAAA;;;;;;;;;;;;;;;;;AAiBhE,IAAMC,uBAAuB,GAAG,CAAC;;AAE1B,IAAMC,qBAAqB,GAAAC,OAAA,CAAAD,qBAAA,GAAG;EACnCE,IAAI,EAAE;AACR,CAAU;;AAEV;AACA;AACA;AACA,IAAMC,aAAa,GAAAF,OAAA,CAAAE,aAAA,GAAG,IAAAC,oCAAiB;EACrC,eAAe;EACf,SAASD,aAAaA,CAAAE,IAAA;;;;;;;;;EASpBC,GAA8B;EAC9B,KAREC,EAAE,GAAAF,IAAA,CAAFE,EAAE,CACFC,KAAK,GAAAH,IAAA,CAALG,KAAK,CAAAC,mBAAA,GAAAJ,IAAA,CACLK,cAAc,CAAdA,cAAc,GAAAD,mBAAA,cAAGV,uBAAuB,GAAAU,mBAAA,CACxCE,cAAc,GAAAN,IAAA,CAAdM,cAAc,CAAAC,qBAAA,GAAAP,IAAA,CACdQ,iBAAiB,CAAjBA,iBAAiB,GAAAD,qBAAA,cAAG,KAAK,GAAAA,qBAAA,CACtBE,IAAI,OAAAC,8BAAA,CAAAC,OAAA,EAAAX,IAAA,EAAAP,SAAA;IAITmB,cAAK,CAACC,SAAS,CAAC,YAAM;MACpB,IAAAC,gBAAO;QACLT,cAAc,IAAIU,0BAAe;QACjC,oDAAkDA,0BAAe;MACnE,CAAC;;MAED,IAAAC,KAAA,GAAqBC,8BAAc,CAACC,cAAc,CAACC,MAAM,CAAChB,KAAK,CAAC,CAAC,IAAI,EAAEiB,QAAQ,EAAE,EAAE,CAAC,CAAC,CAA7EA,QAAQ,GAAAJ,KAAA,CAARI,QAAQ;MAChB,IAAAN,gBAAO;QACLM,QAAQ,CAACC,MAAM,IAAIhB,cAAc;QACjC;;MAEF,CAAC;;MAED,IAAAS,gBAAO;QACLQ,MAAM,CAACC,SAAS,CAAClB,cAAc,CAAC;;MAElC,CAAC;IACH,CAAC,EAAE,CAACA,cAAc,EAAEF,KAAK,CAAC,CAAC;;IAE3B;MACElB,MAAA,CAAA0B,OAAA,CAAAa,aAAA,CAACjC,cAAA,CAAAkC,aAAa,EAAKhB,IAAI;MACrBxB,MAAA,CAAA0B,OAAA,CAAAa,aAAA,WAAMtB,EAAE,EAAEA,EAAG,EAAC,YAAUP,qBAAqB,CAACE,IAAK,EAACI,GAAG,EAAEA,GAAI;MAC1DgB,8BAAc,CAACS,MAAM,CAACvB,KAAK,EAAE,EAAEE,cAAc,EAAdA,cAAc,EAAEG,iBAAiB,EAAjBA,iBAAiB,CAAC,CAAC,CAAC;MACnEF,cAAc,IAAIa,MAAM,CAACQ,YAAY,CAAC,IAAI,CAAC,CAAC;MAC5CrB;MACG;MACO,CAAC;;EAEpB;AACF,CAAC","ignoreList":[]}

package/cjs/components/CurrencyLabel/CurrencyLabel.md

@@ -0,0 +1,29 @@
+### To render rubles
+
+```jsx
+<CurrencyLabel value={12356.1} currencySymbol={'₽'} />
+```
+
+### ...or dollars
+
+```jsx
+<CurrencyLabel value={12356.1} currencySymbol={'$'} />
+```
+
+### ...or nothing
+
+```jsx
+<CurrencyLabel value={12356.1} />
+```
+
+### Count of fraction digits can be changed
+
+```jsx
+<CurrencyLabel value={3562001.1} fractionDigits={3} currencySymbol={'₽'} />
+```
+
+### Can hide trailing zeros
+
+```jsx
+<CurrencyLabel value={356.167} fractionDigits={5} hideTrailingZeros />
+```