@synerise/ds-format-picker 1.1.23 → 1.1.25

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.1.25](https://github.com/Synerise/synerise-design/compare/@synerise/ds-format-picker@1.1.24...@synerise/ds-format-picker@1.1.25) (2026-03-24)
+
+**Note:** Version bump only for package @synerise/ds-format-picker
+
+## [1.1.24](https://github.com/Synerise/synerise-design/compare/@synerise/ds-format-picker@1.1.23...@synerise/ds-format-picker@1.1.24) (2026-03-20)
+
+**Note:** Version bump only for package @synerise/ds-format-picker
+
 ## [1.1.23](https://github.com/Synerise/synerise-design/compare/@synerise/ds-format-picker@1.1.22...@synerise/ds-format-picker@1.1.23) (2026-03-09)
 
 **Note:** Version bump only for package @synerise/ds-format-picker

package/README.md

@@ -37,31 +37,36 @@ import FormatPicker from '@synerise/ds-format-picker'
 
 ## API
 
-| Property               | Description                    | Type                               | Default |
-| ---------------------- | ------------------------------ | ---------------------------------- | ------- |
-| format                 | Format configuration           | FormattingValue                    | -       |
-| value                  | Example value                  | number                             | -       |
-| onDataFormatChange     | Data format change handler     | (format) => void}                  | -       |
-| onCurrencyChange       | Currency change handler        | (currency: CurrencyType) => void   | -       |
-| onUseSeparatorChange   | Use separator change handler   | (useSeparator: boolean) => void}   | -       |
-| onCompactNumbersChange | Compact numbers change handler | (compactNumbers: boolean) => void} | -       |
-| onFixedLengthChange    | Fixed length change handler    | (fixedLength) => void              | -       |
-| onSetDefault           | Set default value of format    | () => void                         | -       |
-| text                   | Set of custom labels           | Texts                              | -       |
-| buttonType             | type of button                 | string                             | -       |
+| Property               | Description                                            | Type                                        | Default         |
+| ---------------------- | ------------------------------------------------------ | ------------------------------------------- | --------------- |
+| format                 | Current format configuration                           | `FormattingValue`                           | -               |
+| value                  | Example number shown in the trigger button label       | `number`                                    | -               |
+| onDataFormatChange     | Called when user selects a data format                 | `(format: FormattingDataFormat) => void`    | -               |
+| onCurrencyChange       | Called when a currency is selected                     | `(currency: CurrencyType) => void`          | -               |
+| onUseSeparatorChange   | Called when the 1000-separator checkbox changes        | `(useSeparator: boolean) => void`           | -               |
+| onCompactNumbersChange | Called when the compact numbers checkbox changes       | `(compactNumbers: boolean) => void`         | -               |
+| onFixedLengthChange    | Called when decimal places are incremented/decremented | `(fixedLength: number) => void`             | -               |
+| onSetDefault           | If provided, renders a "Set default" footer button     | `() => void`                                | -               |
+| onFormattedValueChange | Called whenever the formatted display value changes    | `(formattedValue: string) => void`          | -               |
+| text                   | Override any subset of UI labels                       | `Partial<FormatPickerTexts>`                | -               |
+| currenciesConfig       | Custom currency list for the cash dropdown             | `CurrencyConfig[]`                          | USD/EUR/PLN/JPY |
+| buttonType             | DS button type for the trigger button                  | `string`                                    | `'tertiary'`    |
+| disabled               | Disables the trigger and all panel controls            | `boolean`                                   | -               |
+| maxFixedLength         | Upper bound for decimal places                         | `number`                                    | -               |
 
 ### Texts
 
 | Property       | Description                       | Type                     | Default              |
 | -------------- | --------------------------------- | ------------------------ | -------------------- |
-| header         | Header of format settings         | string \ React.ReactNode | `Number format`      |
-| format         | Format label                      | string \ React.ReactNode | `Format`             |
-| numeric        | Numeric type of format tooltip    | string \ React.ReactNode | `Numeric`            |
-| cash           | Cash type of format tooltip       | string \ React.ReactNode | `Cash`               |
-| percentage     | Percentage type of format tooltip | string \ React.ReactNode | `Percentage`         |
-| setDefault     | Set default format button label   | string \ React.ReactNode | `Set default`        |
-| useSeparator   | Use 1000 separator checkbox label | string \ React.ReactNode | `Use 1000 separator` |
-| compactNumbers | Compact number checkbox label     | string \ React.ReactNode | `Compact humbers`    |
+| header         | Header of format settings         | `string \| ReactNode` | `Number format`      |
+| format         | Format label                      | `string \| ReactNode` | `Format`             |
+| numeric        | Numeric type of format tooltip    | `string \| ReactNode` | `Numeric`            |
+| cash           | Cash type of format tooltip       | `string \| ReactNode` | `Cash`               |
+| percentage     | Percentage type of format tooltip | `string \| ReactNode` | `Percentage`         |
+| setDefault     | Set default format button label   | `string \| ReactNode` | `Set default`        |
+| useSeparator   | Use 1000 separator checkbox label | `string \| ReactNode` | `Use 1000 separator` |
+| compactNumbers         | Compact numbers checkbox label                         | `string \| ReactNode`    | `Use compact numbers`  |
+| currencyMenuItemPrefix | Prefix shown before the example value in currency rows | `string`                 | `'e.g.'`               |
 
 ### FormattingValue
 
@@ -75,7 +80,7 @@ import FormatPicker from '@synerise/ds-format-picker'
 
 ### CurrencyType
 
-Available values: `USD` | `EUR` | `PLN` | `JPY`
+`string` — any currency code string. The default `currenciesConfig` includes `USD`, `EUR`, `PLN`, `JPY`, but the type is not restricted to those values.
 
 ### FormattingDataFormat
 

package/dist/FomartPicker.types.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { ReactNode } from 'react';
 export type CurrencyType = string;
 export type FormattingDataFormat = 'numeric' | 'percent' | 'cash';
 export type FormattingValue = {

package/dist/FomartPicker.types.js

@@ -1 +1 @@
-export {};
+

package/dist/FormatPicker.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import { type FormatPickerProps } from './FomartPicker.types';
+import { default as React } from 'react';
+import { FormatPickerProps } from './FomartPicker.types';
 declare const FormatPicker: ({ onUseSeparatorChange, onFixedLengthChange, onDataFormatChange, onCurrencyChange, onCompactNumbersChange, onSetDefault, onFormattedValueChange, value, format, text, currenciesConfig, buttonType, disabled, maxFixedLength, }: FormatPickerProps) => React.JSX.Element;
 export default FormatPicker;

package/dist/FormatPicker.js

@@ -1,135 +1,119 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useCallback, useEffect, useMemo } from 'react';
-import { useIntl } from 'react-intl';
-import Button from '@synerise/ds-button';
-import { useDataFormat } from '@synerise/ds-core';
-import Dropdown from '@synerise/ds-dropdown';
-import Icon, { HashM } from '@synerise/ds-icon';
-import FormatSettings from './FormatSettings/FormatSettings';
-var FormatPicker = function FormatPicker(_ref) {
-  var onUseSeparatorChange = _ref.onUseSeparatorChange,
-    onFixedLengthChange = _ref.onFixedLengthChange,
-    onDataFormatChange = _ref.onDataFormatChange,
-    onCurrencyChange = _ref.onCurrencyChange,
-    onCompactNumbersChange = _ref.onCompactNumbersChange,
-    onSetDefault = _ref.onSetDefault,
-    onFormattedValueChange = _ref.onFormattedValueChange,
-    value = _ref.value,
-    format = _ref.format,
-    text = _ref.text,
-    currenciesConfig = _ref.currenciesConfig,
-    _ref$buttonType = _ref.buttonType,
-    buttonType = _ref$buttonType === void 0 ? 'tertiary' : _ref$buttonType,
-    disabled = _ref.disabled,
-    maxFixedLength = _ref.maxFixedLength;
-  var intl = useIntl();
-  var _useDataFormat = useDataFormat(),
-    formatValue = _useDataFormat.formatValue;
-  var texts = useMemo(function () {
-    return _extends({
-      header: intl.formatMessage({
-        id: 'DS.FORMAT-PICKER.HEADER',
-        defaultMessage: 'Number format'
-      }),
-      format: intl.formatMessage({
-        id: 'DS.FORMAT-PICKER.FORMAT',
-        defaultMessage: 'Format'
-      }),
-      numeric: intl.formatMessage({
-        id: 'DS.FORMAT-PICKER.NUMERIC',
-        defaultMessage: 'Numeric'
-      }),
-      cash: intl.formatMessage({
-        id: 'DS.FORMAT-PICKER.CASH',
-        defaultMessage: 'Cash'
-      }),
-      percentage: intl.formatMessage({
-        id: 'DS.FORMAT-PICKER.PERCENTAGE',
-        defaultMessage: 'Percentage'
-      }),
-      setDefault: intl.formatMessage({
-        id: 'DS.FORMAT-PICKER.SET-DEFAULT',
-        defaultMessage: 'Set default'
-      }),
-      useSeparator: intl.formatMessage({
-        id: 'DS.FORMAT-PICKER.USE-SEPARATOR',
-        defaultMessage: 'Use 1000 separator'
-      }),
-      currencyMenuItemPrefix: intl.formatMessage({
-        id: 'DS.FORMAT-PICKER.EG',
-        defaultMessage: 'e.g.'
-      }),
-      compactNumbers: intl.formatMessage({
-        id: 'DS.FORMAT-PICKER.COMPACT-NUMBERS',
-        defaultMessage: 'Use compact numbers'
-      })
-    }, text);
-  }, [text, intl]);
-  var getFormattedValue = useCallback(function (overrideOptions) {
-    var useSeparator = format.useSeparator,
-      compactNumbers = format.compactNumbers,
-      currency = format.currency,
-      dataFormat = format.dataFormat,
-      fixedLength = format.fixedLength;
-    var options = {
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useCallback, useEffect } from "react";
+import { useIntl } from "react-intl";
+import Button from "@synerise/ds-button";
+import { useDataFormat } from "@synerise/ds-core";
+import Dropdown from "@synerise/ds-dropdown";
+import Icon, { HashM } from "@synerise/ds-icon";
+import FormatSettings from "./FormatSettings/FormatSettings.js";
+const FormatPicker = ({
+  onUseSeparatorChange,
+  onFixedLengthChange,
+  onDataFormatChange,
+  onCurrencyChange,
+  onCompactNumbersChange,
+  onSetDefault,
+  onFormattedValueChange,
+  value,
+  format,
+  text,
+  currenciesConfig,
+  buttonType = "tertiary",
+  disabled,
+  maxFixedLength
+}) => {
+  const intl = useIntl();
+  const {
+    formatValue
+  } = useDataFormat();
+  const texts = useMemo(() => ({
+    header: intl.formatMessage({
+      id: "DS.FORMAT-PICKER.HEADER",
+      defaultMessage: "Number format"
+    }),
+    format: intl.formatMessage({
+      id: "DS.FORMAT-PICKER.FORMAT",
+      defaultMessage: "Format"
+    }),
+    numeric: intl.formatMessage({
+      id: "DS.FORMAT-PICKER.NUMERIC",
+      defaultMessage: "Numeric"
+    }),
+    cash: intl.formatMessage({
+      id: "DS.FORMAT-PICKER.CASH",
+      defaultMessage: "Cash"
+    }),
+    percentage: intl.formatMessage({
+      id: "DS.FORMAT-PICKER.PERCENTAGE",
+      defaultMessage: "Percentage"
+    }),
+    setDefault: intl.formatMessage({
+      id: "DS.FORMAT-PICKER.SET-DEFAULT",
+      defaultMessage: "Set default"
+    }),
+    useSeparator: intl.formatMessage({
+      id: "DS.FORMAT-PICKER.USE-SEPARATOR",
+      defaultMessage: "Use 1000 separator"
+    }),
+    currencyMenuItemPrefix: intl.formatMessage({
+      id: "DS.FORMAT-PICKER.EG",
+      defaultMessage: "e.g."
+    }),
+    compactNumbers: intl.formatMessage({
+      id: "DS.FORMAT-PICKER.COMPACT-NUMBERS",
+      defaultMessage: "Use compact numbers"
+    }),
+    ...text
+  }), [text, intl]);
+  const getFormattedValue = useCallback((overrideOptions) => {
+    const {
+      useSeparator,
+      compactNumbers,
+      currency,
+      dataFormat,
+      fixedLength
+    } = format;
+    let options = {
       useGrouping: useSeparator
     };
     if (compactNumbers) {
       options = {
-        notation: 'compact'
+        notation: "compact"
       };
     }
-    if (dataFormat === 'cash' && currency) {
-      options = _extends({}, options, {
-        currency: currency,
-        style: 'currency'
-      });
+    if (dataFormat === "cash" && currency) {
+      options = {
+        ...options,
+        currency,
+        style: "currency"
+      };
     }
-    if (dataFormat === 'percent') {
-      options = _extends({}, options, {
-        suffix: compactNumbers ? ' %' : '%'
-      });
+    if (dataFormat === "percent") {
+      options = {
+        ...options,
+        suffix: compactNumbers ? " %" : "%"
+      };
     }
-    if (typeof fixedLength === 'number') {
-      options = _extends({}, options, {
+    if (typeof fixedLength === "number") {
+      options = {
+        ...options,
         minimumFractionDigits: fixedLength,
-        maximumFractionDigits: fixedLength
-      }, overrideOptions);
+        maximumFractionDigits: fixedLength,
+        ...overrideOptions
+      };
     }
     return formatValue(value, options);
   }, [value, format, formatValue]);
-  useEffect(function () {
+  useEffect(() => {
     onFormattedValueChange && onFormattedValueChange(getFormattedValue());
   }, [getFormattedValue, onFormattedValueChange]);
-  return /*#__PURE__*/React.createElement(Dropdown, {
-    trigger: ['click'],
-    disabled: disabled,
-    overlay: /*#__PURE__*/React.createElement(FormatSettings, {
-      onCurrencyChange: onCurrencyChange,
-      onFixedLengthChange: onFixedLengthChange,
-      onDataFormatChange: onDataFormatChange,
-      onCompactNumbersChange: onCompactNumbersChange,
-      onUseSeparatorChange: onUseSeparatorChange,
-      onSetDefault: onSetDefault,
-      format: format,
-      text: texts,
-      currenciesConfig: currenciesConfig,
-      disabled: disabled,
-      getFormattedValue: getFormattedValue,
-      maxFixedLength: maxFixedLength
-    }),
-    placement: "topCenter",
-    popoverProps: {
-      testId: 'format-picker'
-    },
-    size: "auto",
-    asChild: true
-  }, /*#__PURE__*/React.createElement(Button, {
-    type: buttonType,
-    mode: "icon-label",
-    disabled: disabled
-  }, /*#__PURE__*/React.createElement(Icon, {
-    component: /*#__PURE__*/React.createElement(HashM, null)
-  }), texts.format + " " + getFormattedValue()));
+  return /* @__PURE__ */ jsx(Dropdown, { trigger: ["click"], disabled, overlay: /* @__PURE__ */ jsx(FormatSettings, { onCurrencyChange, onFixedLengthChange, onDataFormatChange, onCompactNumbersChange, onUseSeparatorChange, onSetDefault, format, text: texts, currenciesConfig, disabled, getFormattedValue, maxFixedLength }), placement: "topCenter", popoverProps: {
+    testId: "format-picker"
+  }, size: "auto", asChild: true, children: /* @__PURE__ */ jsxs(Button, { type: buttonType, mode: "icon-label", disabled, children: [
+    /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(HashM, {}) }),
+    `${texts.format} ${getFormattedValue()}`
+  ] }) });
+};
+export {
+  FormatPicker as default
 };
-export default FormatPicker;

package/dist/FormatSettings/FormatSettings.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import { type FormatSettingsProps } from './FormatSettings.types';
+import { default as React } from 'react';
+import { FormatSettingsProps } from './FormatSettings.types';
 declare const FormatSettings: ({ onCompactNumbersChange, onCurrencyChange, onDataFormatChange, onFixedLengthChange, onUseSeparatorChange, onSetDefault, getFormattedValue, format, text, currenciesConfig, disabled, maxFixedLength, }: FormatSettingsProps) => React.JSX.Element;
 export default FormatSettings;

package/dist/FormatSettings/FormatSettings.js

@@ -1,161 +1,105 @@
-import React, { useCallback, useMemo } from 'react';
-import { useIntl } from 'react-intl';
-import Button from '@synerise/ds-button';
-import ButtonGroup from '@synerise/ds-button-group';
-import Checkbox from '@synerise/ds-checkbox';
-import Dropdown from '@synerise/ds-dropdown';
-import Icon, { AngleDownS, Coin2M, CommaDecM, CommaIncM, HashM, PercentM } from '@synerise/ds-icon';
-import Radio from '@synerise/ds-radio';
-import Tooltip from '@synerise/ds-tooltip';
-import { Title } from '@synerise/ds-typography';
-import * as S from './FormatSettings.styles';
-var DEFAULT_CURRENCIES_CONFIG = [{
-  currency: 'USD',
-  label: 'Dollar (US)'
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useCallback, useMemo } from "react";
+import { useIntl } from "react-intl";
+import Button from "@synerise/ds-button";
+import ButtonGroup from "@synerise/ds-button-group";
+import Checkbox from "@synerise/ds-checkbox";
+import Dropdown from "@synerise/ds-dropdown";
+import Icon, { CommaDecM, CommaIncM, AngleDownS, HashM, PercentM, Coin2M } from "@synerise/ds-icon";
+import Radio from "@synerise/ds-radio";
+import Tooltip from "@synerise/ds-tooltip";
+import { Title } from "@synerise/ds-typography";
+import { FormatSettingsContainer, FormatSettingsWrapper, FormatSettings as FormatSettings$1, WrapperButtons, FixedLengthButton, FormatOptions, DropdownTrigger, DropdownValue, DropdownWrapper, ListItem, FormatFooter } from "./FormatSettings.styles.js";
+const DEFAULT_CURRENCIES_CONFIG = [{
+  currency: "USD",
+  label: "Dollar (US)"
 }, {
-  currency: 'EUR',
-  label: 'Euro (EU)'
+  currency: "EUR",
+  label: "Euro (EU)"
 }, {
-  currency: 'PLN',
-  label: 'Złoty (PL)'
+  currency: "PLN",
+  label: "Złoty (PL)"
 }, {
-  currency: 'JPY',
-  label: 'Yen (JP)'
+  currency: "JPY",
+  label: "Yen (JP)"
 }];
-var getFormattingTypes = function getFormattingTypes(intl, text) {
-  return [{
-    format: 'numeric',
-    icon: /*#__PURE__*/React.createElement(HashM, null),
-    tooltip: text.numeric
-  }, {
-    format: 'percent',
-    icon: /*#__PURE__*/React.createElement(PercentM, null),
-    tooltip: text.percentage
-  }, {
-    format: 'cash',
-    icon: /*#__PURE__*/React.createElement(Coin2M, null),
-    tooltip: text.cash
-  }];
-};
-var FormatSettings = function FormatSettings(_ref) {
-  var onCompactNumbersChange = _ref.onCompactNumbersChange,
-    onCurrencyChange = _ref.onCurrencyChange,
-    onDataFormatChange = _ref.onDataFormatChange,
-    onFixedLengthChange = _ref.onFixedLengthChange,
-    onUseSeparatorChange = _ref.onUseSeparatorChange,
-    onSetDefault = _ref.onSetDefault,
-    getFormattedValue = _ref.getFormattedValue,
-    format = _ref.format,
-    text = _ref.text,
-    _ref$currenciesConfig = _ref.currenciesConfig,
-    currenciesConfig = _ref$currenciesConfig === void 0 ? DEFAULT_CURRENCIES_CONFIG : _ref$currenciesConfig,
-    disabled = _ref.disabled,
-    maxFixedLength = _ref.maxFixedLength;
-  var intl = useIntl();
-  var handleSelectCurrency = function handleSelectCurrency(currency) {
+const getFormattingTypes = (intl, text) => [{
+  format: "numeric",
+  icon: /* @__PURE__ */ jsx(HashM, {}),
+  tooltip: text.numeric
+}, {
+  format: "percent",
+  icon: /* @__PURE__ */ jsx(PercentM, {}),
+  tooltip: text.percentage
+}, {
+  format: "cash",
+  icon: /* @__PURE__ */ jsx(Coin2M, {}),
+  tooltip: text.cash
+}];
+const FormatSettings = ({
+  onCompactNumbersChange,
+  onCurrencyChange,
+  onDataFormatChange,
+  onFixedLengthChange,
+  onUseSeparatorChange,
+  onSetDefault,
+  getFormattedValue,
+  format,
+  text,
+  currenciesConfig = DEFAULT_CURRENCIES_CONFIG,
+  disabled,
+  maxFixedLength
+}) => {
+  const intl = useIntl();
+  const handleSelectCurrency = (currency) => {
     onCurrencyChange(currency);
   };
-  var handleDecreaseFixedLength = useCallback(function () {
+  const handleDecreaseFixedLength = useCallback(() => {
     if (format.fixedLength > 0) {
       onFixedLengthChange(format.fixedLength - 1);
     } else {
       onFixedLengthChange(0);
     }
   }, [onFixedLengthChange, format]);
-  var handleIncreaseFixedLength = useCallback(function () {
-    if (maxFixedLength === undefined || maxFixedLength > format.fixedLength) {
+  const handleIncreaseFixedLength = useCallback(() => {
+    if (maxFixedLength === void 0 || maxFixedLength > format.fixedLength) {
       onFixedLengthChange(format.fixedLength + 1);
     }
   }, [onFixedLengthChange, format, maxFixedLength]);
-  var selectedCurrency = useMemo(function () {
-    return currenciesConfig.find(function (currency) {
-      return currency.currency === format.currency;
-    });
+  const selectedCurrency = useMemo(() => {
+    return currenciesConfig.find((currency) => currency.currency === format.currency);
   }, [currenciesConfig, format]);
-  return /*#__PURE__*/React.createElement(S.FormatSettingsContainer, {
-    "data-testid": "ds-format-picker-overlay"
-  }, /*#__PURE__*/React.createElement(S.FormatSettingsWrapper, null, /*#__PURE__*/React.createElement(Title, {
-    level: 6
-  }, text.header), /*#__PURE__*/React.createElement(S.FormatSettings, null, /*#__PURE__*/React.createElement(Radio.Group, {
-    defaultValue: format.dataFormat,
-    onChange: function onChange(event) {
-      return onDataFormatChange(event.target.value);
-    }
-  }, /*#__PURE__*/React.createElement(ButtonGroup, null, getFormattingTypes(intl, text).map(function (type) {
-    return /*#__PURE__*/React.createElement(Tooltip, {
-      key: type.format,
-      trigger: ['hover'],
-      title: type.tooltip
-    }, /*#__PURE__*/React.createElement(Button, {
-      type: type.format === format.dataFormat ? 'primary' : 'secondary',
-      mode: "icon",
-      "data-testid": "ds-format-picker-type-" + type.format,
-      onClick: function onClick() {
-        return onDataFormatChange(type.format);
-      },
-      disabled: disabled
-    }, /*#__PURE__*/React.createElement(Icon, {
-      component: type.icon
-    })));
-  }))), /*#__PURE__*/React.createElement(S.WrapperButtons, {
-    buttonsPosition: "right"
-  }, /*#__PURE__*/React.createElement(S.FixedLengthButton, {
-    type: "secondary",
-    mode: "icon",
-    onClick: handleDecreaseFixedLength,
-    disabled: disabled
-  }, /*#__PURE__*/React.createElement(Icon, {
-    component: /*#__PURE__*/React.createElement(CommaDecM, null)
-  })), /*#__PURE__*/React.createElement(S.FixedLengthButton, {
-    type: "secondary",
-    mode: "icon",
-    onClick: handleIncreaseFixedLength,
-    disabled: disabled
-  }, /*#__PURE__*/React.createElement(Icon, {
-    component: /*#__PURE__*/React.createElement(CommaIncM, null)
-  })))), /*#__PURE__*/React.createElement(S.FormatOptions, null, format.dataFormat === 'cash' && /*#__PURE__*/React.createElement(Dropdown, {
-    trigger: ['click'],
-    disabled: disabled,
-    hideOnItemClick: true,
-    popoverProps: {
-      testId: 'format-picker-settings'
-    },
-    asChild: true,
-    size: "match-trigger",
-    overlay: /*#__PURE__*/React.createElement(S.DropdownWrapper, null, currenciesConfig.map(function (_ref2) {
-      var currency = _ref2.currency,
-        label = _ref2.label;
-      return /*#__PURE__*/React.createElement(S.ListItem, {
-        key: currency,
-        suffixel: text.currencyMenuItemPrefix + " " + getFormattedValue({
-          currency: currency
-        }),
-        onClick: function onClick() {
+  return /* @__PURE__ */ jsxs(FormatSettingsContainer, { "data-testid": "ds-format-picker-overlay", children: [
+    /* @__PURE__ */ jsxs(FormatSettingsWrapper, { children: [
+      /* @__PURE__ */ jsx(Title, { level: 6, children: text.header }),
+      /* @__PURE__ */ jsxs(FormatSettings$1, { children: [
+        /* @__PURE__ */ jsx(Radio.Group, { defaultValue: format.dataFormat, onChange: (event) => onDataFormatChange(event.target.value), children: /* @__PURE__ */ jsx(ButtonGroup, { children: getFormattingTypes(intl, text).map((type) => /* @__PURE__ */ jsx(Tooltip, { trigger: ["hover"], title: type.tooltip, children: /* @__PURE__ */ jsx(Button, { type: type.format === format.dataFormat ? "primary" : "secondary", mode: "icon", "data-testid": `ds-format-picker-type-${type.format}`, onClick: () => onDataFormatChange(type.format), disabled, children: /* @__PURE__ */ jsx(Icon, { component: type.icon }) }) }, type.format)) }) }),
+        /* @__PURE__ */ jsxs(WrapperButtons, { buttonsPosition: "right", children: [
+          /* @__PURE__ */ jsx(FixedLengthButton, { type: "secondary", mode: "icon", onClick: handleDecreaseFixedLength, disabled, children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(CommaDecM, {}) }) }),
+          /* @__PURE__ */ jsx(FixedLengthButton, { type: "secondary", mode: "icon", onClick: handleIncreaseFixedLength, disabled, children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(CommaIncM, {}) }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(FormatOptions, { children: [
+        format.dataFormat === "cash" && /* @__PURE__ */ jsx(Dropdown, { trigger: ["click"], disabled, hideOnItemClick: true, popoverProps: {
+          testId: "format-picker-settings"
+        }, asChild: true, size: "match-trigger", overlay: /* @__PURE__ */ jsx(DropdownWrapper, { children: currenciesConfig.map(({
+          currency,
+          label
+        }) => /* @__PURE__ */ jsx(ListItem, { suffixel: `${text.currencyMenuItemPrefix} ${getFormattedValue({
+          currency
+        })}`, onClick: () => {
           handleSelectCurrency(currency);
-        }
-      }, label);
-    }))
-  }, /*#__PURE__*/React.createElement(S.DropdownTrigger, {
-    "data-testid": "ds-format-picker-currency-trigger"
-  }, /*#__PURE__*/React.createElement(S.DropdownValue, null, selectedCurrency == null ? void 0 : selectedCurrency.label), /*#__PURE__*/React.createElement(Icon, {
-    component: /*#__PURE__*/React.createElement(AngleDownS, null)
-  }))), /*#__PURE__*/React.createElement(Checkbox, {
-    onChange: function onChange(event) {
-      return onUseSeparatorChange(event.target.checked);
-    },
-    checked: format.useSeparator,
-    disabled: disabled
-  }, text.useSeparator), /*#__PURE__*/React.createElement(Checkbox, {
-    onChange: function onChange(event) {
-      return onCompactNumbersChange(event.target.checked);
-    },
-    checked: format.compactNumbers,
-    disabled: disabled
-  }, text.compactNumbers))), onSetDefault && /*#__PURE__*/React.createElement(S.FormatFooter, null, /*#__PURE__*/React.createElement(Button, {
-    "data-testid": "ds-format-picker-default-trigger",
-    type: "ghost",
-    onClick: onSetDefault,
-    disabled: disabled
-  }, text.setDefault)));
+        }, children: label }, currency)) }), children: /* @__PURE__ */ jsxs(DropdownTrigger, { "data-testid": "ds-format-picker-currency-trigger", children: [
+          /* @__PURE__ */ jsx(DropdownValue, { children: selectedCurrency?.label }),
+          /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(AngleDownS, {}) })
+        ] }) }),
+        /* @__PURE__ */ jsx(Checkbox, { onChange: (event) => onUseSeparatorChange(event.target.checked), checked: format.useSeparator, disabled, children: text.useSeparator }),
+        /* @__PURE__ */ jsx(Checkbox, { onChange: (event) => onCompactNumbersChange(event.target.checked), checked: format.compactNumbers, disabled, children: text.compactNumbers })
+      ] })
+    ] }),
+    onSetDefault && /* @__PURE__ */ jsx(FormatFooter, { children: /* @__PURE__ */ jsx(Button, { "data-testid": "ds-format-picker-default-trigger", type: "ghost", onClick: onSetDefault, disabled, children: text.setDefault }) })
+  ] });
+};
+export {
+  FormatSettings as default
 };
-export default FormatSettings;

package/dist/FormatSettings/FormatSettings.styles.d.ts

@@ -1,13 +1,13 @@
-import { type StyledButton } from '@synerise/ds-button';
-import { type StyledListItem } from '@synerise/ds-list-item';
-export declare const FormatSettingsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const FormatSettingsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const FormatSettings: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const FormatOptions: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const FormatFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const DropdownTrigger: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const DropdownValue: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const DropdownWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+import { StyledButton } from '@synerise/ds-button';
+import { StyledListItem } from '@synerise/ds-list-item';
+export declare const FormatSettingsContainer: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const FormatSettingsWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const FormatSettings: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const FormatOptions: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const FormatFooter: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const DropdownTrigger: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const DropdownValue: import('styled-components').StyledComponent<"span", any, {}, never>;
+export declare const DropdownWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
 export declare const ListItem: StyledListItem;
 export declare const FixedLengthButton: StyledButton;
-export declare const WrapperButtons: import("styled-components").StyledComponent<({ className, children, title, description, size, fullWidth, buttonsPosition, disabled, splitMode, compact, error, }: import("@synerise/ds-button-group").ButtonGroupProps) => React.JSX.Element, any, {}, never>;
+export declare const WrapperButtons: import('styled-components').StyledComponent<({ className, children, title, description, size, fullWidth, buttonsPosition, disabled, splitMode, compact, error, }: import('@synerise/ds-button-group').ButtonGroupProps) => React.JSX.Element, any, {}, never>;

package/dist/FormatSettings/FormatSettings.styles.js

@@ -1,65 +1,62 @@
-import styled from 'styled-components';
-import Button from '@synerise/ds-button';
-import ButtonGroup from '@synerise/ds-button-group';
-import DSListItem from '@synerise/ds-list-item';
-import { SuffixWrapper } from '@synerise/ds-list-item/dist/components/Text/Text.styles';
-export var FormatSettingsContainer = styled.div.withConfig({
+import styled from "styled-components";
+import Button from "@synerise/ds-button";
+import ButtonGroup from "@synerise/ds-button-group";
+import DSListItem from "@synerise/ds-list-item";
+import { SuffixWrapper } from "@synerise/ds-list-item/dist/components/Text/Text.styles";
+const FormatSettingsContainer = /* @__PURE__ */ styled.div.withConfig({
   displayName: "FormatSettingsstyles__FormatSettingsContainer",
   componentId: "sc-ipk0xd-0"
-})(["display:flex;flex-direction:column;align-items:flex-start;justify-content:stretch;background-color:", ";min-width:268px;.ds-title{margin-bottom:8px;}"], function (props) {
-  return props.theme.palette.white;
-});
-export var FormatSettingsWrapper = styled.div.withConfig({
+})(["display:flex;flex-direction:column;align-items:flex-start;justify-content:stretch;background-color:", ";min-width:268px;.ds-title{margin-bottom:8px;}"], (props) => props.theme.palette.white);
+const FormatSettingsWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "FormatSettingsstyles__FormatSettingsWrapper",
   componentId: "sc-ipk0xd-1"
 })(["display:flex;flex-direction:column;align-items:flex-start;justify-content:stretch;width:100%;padding:20px 20px 0;"]);
-export var FormatSettings = styled.div.withConfig({
+const FormatSettings = /* @__PURE__ */ styled.div.withConfig({
   displayName: "FormatSettingsstyles__FormatSettings",
   componentId: "sc-ipk0xd-2"
 })(["display:flex;flex-direction:row;align-items:flex-start;width:100%;justify-content:space-between;"]);
-export var FormatOptions = styled.div.withConfig({
+const FormatOptions = /* @__PURE__ */ styled.div.withConfig({
   displayName: "FormatSettingsstyles__FormatOptions",
   componentId: "sc-ipk0xd-3"
 })(["display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;margin-top:20px;width:100%;.ds-dropdown-menu{width:100%;}.ds-checkbox{padding:0;margin-bottom:16px;}"]);
-export var FormatFooter = styled.div.withConfig({
+const FormatFooter = /* @__PURE__ */ styled.div.withConfig({
   displayName: "FormatSettingsstyles__FormatFooter",
   componentId: "sc-ipk0xd-4"
-})(["background-color:", ";padding:8px 10px;border-top:1px solid ", ";width:100%;"], function (props) {
-  return props.theme.palette['grey-050'];
-}, function (props) {
-  return props.theme.palette['grey-100'];
-});
-export var DropdownTrigger = styled.div.withConfig({
+})(["background-color:", ";padding:8px 10px;border-top:1px solid ", ";width:100%;"], (props) => props.theme.palette["grey-050"], (props) => props.theme.palette["grey-100"]);
+const DropdownTrigger = /* @__PURE__ */ styled.div.withConfig({
   displayName: "FormatSettingsstyles__DropdownTrigger",
   componentId: "sc-ipk0xd-5"
-})(["display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:0 8px 0 12px;height:32px;border-radius:3px;border:1px solid ", ";width:100%;margin-bottom:20px;"], function (props) {
-  return props.theme.palette['grey-300'];
-});
-export var DropdownValue = styled.span.withConfig({
+})(["display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:0 8px 0 12px;height:32px;border-radius:3px;border:1px solid ", ";width:100%;margin-bottom:20px;"], (props) => props.theme.palette["grey-300"]);
+const DropdownValue = /* @__PURE__ */ styled.span.withConfig({
   displayName: "FormatSettingsstyles__DropdownValue",
   componentId: "sc-ipk0xd-6"
-})(["font-size:13px;line-height:18px;font-weight:400;color:", ";"], function (props) {
-  return props.theme.palette['grey-700'];
-});
-export var DropdownWrapper = styled.div.withConfig({
+})(["font-size:13px;line-height:18px;font-weight:400;color:", ";"], (props) => props.theme.palette["grey-700"]);
+const DropdownWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "FormatSettingsstyles__DropdownWrapper",
   componentId: "sc-ipk0xd-7"
-})(["display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;width:100%;padding:8px;background:", ";"], function (props) {
-  return props.theme.palette.white;
-});
-export var ListItem = styled(DSListItem).withConfig({
+})(["display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;width:100%;padding:8px;background:", ";"], (props) => props.theme.palette.white);
+const ListItem = /* @__PURE__ */ styled(DSListItem).withConfig({
   displayName: "FormatSettingsstyles__ListItem",
   componentId: "sc-ipk0xd-8"
-})(["font-weight:500;width:100%;color:", ";", "{color:", ";font-weight:400;}"], function (props) {
-  return props.theme.palette['grey-700'];
-}, SuffixWrapper, function (props) {
-  return props.theme.palette['grey-500'];
-});
-export var FixedLengthButton = styled(Button).withConfig({
+})(["font-weight:500;width:100%;color:", ";", "{color:", ";font-weight:400;}"], (props) => props.theme.palette["grey-700"], SuffixWrapper, (props) => props.theme.palette["grey-500"]);
+const FixedLengthButton = /* @__PURE__ */ styled(Button).withConfig({
   displayName: "FormatSettingsstyles__FixedLengthButton",
   componentId: "sc-ipk0xd-9"
 })(["&&&{padding:4px;}"]);
-export var WrapperButtons = styled(ButtonGroup).withConfig({
+const WrapperButtons = /* @__PURE__ */ styled(ButtonGroup).withConfig({
   displayName: "FormatSettingsstyles__WrapperButtons",
   componentId: "sc-ipk0xd-10"
-})(["&&&{padding-left:8px;}"]);
+})(["&&&{padding-left:8px;}"]);
+export {
+  DropdownTrigger,
+  DropdownValue,
+  DropdownWrapper,
+  FixedLengthButton,
+  FormatFooter,
+  FormatOptions,
+  FormatSettings,
+  FormatSettingsContainer,
+  FormatSettingsWrapper,
+  ListItem,
+  WrapperButtons
+};

package/dist/FormatSettings/FormatSettings.types.d.ts

@@ -1,5 +1,5 @@
-import { type NumberToFormatOptions } from '@synerise/ds-core';
-import type { FormatPickerProps, FormatPickerTexts } from '../FomartPicker.types';
+import { NumberToFormatOptions } from '@synerise/ds-core';
+import { FormatPickerProps, FormatPickerTexts } from '../FomartPicker.types';
 export type FormatSettingsProps = Omit<FormatPickerProps, 'text' | 'value'> & {
     getFormattedValue: (options: NumberToFormatOptions) => string;
     text: FormatPickerTexts;

package/dist/FormatSettings/FormatSettings.types.js

@@ -1 +1 @@
-export {};
+

package/dist/index.js

@@ -1 +1,4 @@
-export { default } from './FormatPicker';
+import { default as default2 } from "./FormatPicker.js";
+export {
+  default2 as default
+};

package/dist/modules.d.js

@@ -1 +1 @@
-import '@testing-library/jest-dom';
+import "@testing-library/jest-dom";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-format-picker",
-  "version": "1.1.23",
+  "version": "1.1.25",
   "description": "FormatPicker UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -16,10 +16,10 @@
     "access": "public"
   },
   "scripts": {
-    "build": "pnpm run build:js && pnpm run build:css && pnpm run defs",
+    "build": "vite build",
     "build:css": "node ../../../scripts/style/less.js",
     "build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
-    "build:watch": "pnpm run build:js -- --watch",
+    "build:watch": "vite build --watch",
     "defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
     "pack:ci": "pnpm pack --pack-destination ../../storybook/storybook-static/static",
     "prepublish": "pnpm run build",
@@ -35,16 +35,16 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^1.5.16",
-    "@synerise/ds-button-group": "^1.1.41",
-    "@synerise/ds-checkbox": "^1.2.19",
-    "@synerise/ds-dropdown": "^1.3.0",
-    "@synerise/ds-icon": "^1.14.1",
-    "@synerise/ds-list-item": "^1.4.8",
-    "@synerise/ds-radio": "^1.1.1",
-    "@synerise/ds-tooltip": "^1.4.8",
-    "@synerise/ds-typography": "^1.1.11",
-    "@synerise/ds-utils": "^1.6.0"
+    "@synerise/ds-button": "^1.5.18",
+    "@synerise/ds-button-group": "^1.1.43",
+    "@synerise/ds-checkbox": "^1.2.21",
+    "@synerise/ds-dropdown": "^1.3.2",
+    "@synerise/ds-icon": "^1.15.1",
+    "@synerise/ds-list-item": "^1.4.10",
+    "@synerise/ds-radio": "^1.1.3",
+    "@synerise/ds-tooltip": "^1.4.10",
+    "@synerise/ds-typography": "^1.1.13",
+    "@synerise/ds-utils": "^1.7.1"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
@@ -52,5 +52,5 @@
     "react-intl": ">=3.12.0 <= 6.8",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "8dfafc5d7278f09d430f1e7499782d05c76b47c0"
+  "gitHead": "e4ecca8944fc9b41c1b9d59c8bcad5e5e2013225"
 }