@synerise/ds-format-picker 0.3.118 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/FomartPicker.types.d.ts +11 -11
  3. package/dist/FormatPicker.d.ts +2 -2
  4. package/dist/FormatPicker.js +2 -2
  5. package/dist/FormatSettings/FormatSettings.d.ts +2 -2
  6. package/dist/FormatSettings/FormatSettings.js +25 -20
  7. package/dist/FormatSettings/FormatSettings.styles.d.ts +2 -3
  8. package/dist/FormatSettings/FormatSettings.styles.js +9 -7
  9. package/dist/FormatSettings/FormatSettings.types.d.ts +4 -2
  10. package/dist/index.d.ts +1 -0
  11. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -3,6 +3,17 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [0.4.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-format-picker@0.3.118...@synerise/ds-format-picker@0.4.0) (2024-07-02)
7
+
8
+
9
+ ### Features
10
+
11
+ * **format-picker:** menu item swapped for list-item ([c4c0fdb](https://github.com/Synerise/synerise-design/commit/c4c0fdb267f19a4a72af6ee00ad2acfc178d3573))
12
+
13
+
14
+
15
+
16
+
6
17
  ## [0.3.118](https://github.com/Synerise/synerise-design/compare/@synerise/ds-format-picker@0.3.117...@synerise/ds-format-picker@0.3.118) (2024-06-27)
7
18
 
8
19
 
package/dist/FomartPicker.types.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import * as React from 'react';
1
+ import type { ReactNode } from 'react';
2
2
  export type CurrencyType = 'USD' | 'EUR' | 'PLN' | 'JPY';
3
3
  export type FormattingDataFormat = 'numeric' | 'percent' | 'cash';
4
4
  export type FormattingValue = {
@@ -11,21 +11,21 @@ export type FormattingValue = {
11
11
  export type FormattingType = {
12
12
  format: FormattingDataFormat;
13
13
  icon: JSX.Element;
14
- tooltip: string | React.ReactNode;
14
+ tooltip: ReactNode;
15
15
  };
16
16
  export type CurrencyConfig = {
17
17
  currency: CurrencyType;
18
18
  label: string;
19
19
  };
20
20
  export type FormatPickerTexts = {
21
- header?: string | React.ReactNode;
22
- format?: string | React.ReactNode;
23
- numeric?: string | React.ReactNode;
24
- cash?: string | React.ReactNode;
25
- percentage?: string | React.ReactNode;
26
- setDefault?: string | React.ReactNode;
27
- useSeparator?: string | React.ReactNode;
28
- compactNumbers?: string | React.ReactNode;
21
+ header: ReactNode;
22
+ format: ReactNode;
23
+ numeric: ReactNode;
24
+ cash: ReactNode;
25
+ percentage: ReactNode;
26
+ setDefault: ReactNode;
27
+ useSeparator: ReactNode;
28
+ compactNumbers: ReactNode;
29
29
  };
30
30
  export type FormatPickerProps = {
31
31
  format: FormattingValue;
@@ -36,7 +36,7 @@ export type FormatPickerProps = {
36
36
  onCompactNumbersChange: (useCompact: boolean) => void;
37
37
  onFixedLengthChange: (fixedLength: number) => void;
38
38
  onSetDefault: () => void;
39
- text?: FormatPickerTexts;
39
+ text?: Partial<FormatPickerTexts>;
40
40
  currenciesConfig?: CurrencyConfig[];
41
41
  buttonType?: string;
42
42
  };
package/dist/FormatPicker.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import * as React from 'react';
1
+ import React from 'react';
2
2
  import { FormatPickerProps } from './FomartPicker.types';
3
- declare const FormatPicker: React.FC<FormatPickerProps>;
3
+ declare const FormatPicker: ({ onUseSeparatorChange, onFixedLengthChange, onDataFormatChange, onCurrencyChange, onCompactNumbersChange, onSetDefault, value, format, text, currenciesConfig, buttonType, }: FormatPickerProps) => React.JSX.Element;
4
4
  export default FormatPicker;
package/dist/FormatPicker.js CHANGED
@@ -4,7 +4,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
4
4
 
5
5
  function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
6
6
 
7
- import * as React from 'react';
7
+ import React, { useMemo } from 'react';
8
8
  import { useIntl } from 'react-intl';
9
9
  import Button from '@synerise/ds-button';
10
10
  import Dropdown from '@synerise/ds-dropdown';
@@ -26,7 +26,7 @@ var FormatPicker = function FormatPicker(_ref) {
26
26
  _ref$buttonType = _ref.buttonType,
27
27
  buttonType = _ref$buttonType === void 0 ? 'tertiary' : _ref$buttonType;
28
28
  var intl = useIntl();
29
- var texts = React.useMemo(function () {
29
+ var texts = useMemo(function () {
30
30
  return _objectSpread({
31
31
  header: intl.formatMessage({
32
32
  id: 'DS.FORMAT-PICKER.HEADER',
package/dist/FormatSettings/FormatSettings.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import * as React from 'react';
1
+ import React from 'react';
2
2
  import { FormatSettingsProps } from './FormatSettings.types';
3
- declare const FormatSettings: React.FC<FormatSettingsProps>;
3
+ declare const FormatSettings: ({ onCompactNumbersChange, onCurrencyChange, onDataFormatChange, onFixedLengthChange, onUseSeparatorChange, onSetDefault, format, value, text, currenciesConfig, }: FormatSettingsProps) => React.JSX.Element;
4
4
  export default FormatSettings;
package/dist/FormatSettings/FormatSettings.js CHANGED
@@ -4,7 +4,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
4
4
 
5
5
  function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
6
6
 
7
- import * as React from 'react';
7
+ import React, { useCallback, useMemo } from 'react';
8
8
  import Icon, { AngleDownS, Coin2M, CommaDecM, CommaIncM, HashM, PercentM } from '@synerise/ds-icon';
9
9
  import { useIntl } from 'react-intl';
10
10
  import { Title } from '@synerise/ds-typography';
@@ -21,15 +21,15 @@ var getFormattingTypes = function getFormattingTypes(intl, text) {
21
21
  return [{
22
22
  format: 'numeric',
23
23
  icon: /*#__PURE__*/React.createElement(HashM, null),
24
- tooltip: text == null ? void 0 : text.numeric
24
+ tooltip: text.numeric
25
25
  }, {
26
26
  format: 'percent',
27
27
  icon: /*#__PURE__*/React.createElement(PercentM, null),
28
- tooltip: text == null ? void 0 : text.percentage
28
+ tooltip: text.percentage
29
29
  }, {
30
30
  format: 'cash',
31
31
  icon: /*#__PURE__*/React.createElement(Coin2M, null),
32
- tooltip: text == null ? void 0 : text.cash
32
+ tooltip: text.cash
33
33
  }];
34
34
  };
35
35
 
@@ -61,27 +61,29 @@ var FormatSettings = function FormatSettings(_ref) {
61
61
  text = _ref.text,
62
62
  currenciesConfig = _ref.currenciesConfig;
63
63
  var intl = useIntl();
64
- var handleDecreaseFixedLength = React.useCallback(function () {
64
+ var handleDecreaseFixedLength = useCallback(function () {
65
65
  if (format.fixedLength > 0) {
66
66
  onFixedLengthChange(format.fixedLength - 1);
67
67
  } else {
68
68
  onFixedLengthChange(0);
69
69
  }
70
70
  }, [onFixedLengthChange, format]);
71
- var handleIncreaseFixedLength = React.useCallback(function () {
71
+ var handleIncreaseFixedLength = useCallback(function () {
72
72
  onFixedLengthChange(format.fixedLength + 1);
73
73
  }, [onFixedLengthChange, format]);
74
- var selectedCurrency = React.useMemo(function () {
74
+ var selectedCurrency = useMemo(function () {
75
75
  return getCurrenciesConfig(currenciesConfig || []).find(function (currency) {
76
76
  return currency.currency === format.currency;
77
77
  });
78
78
  }, [currenciesConfig, format]);
79
- return /*#__PURE__*/React.createElement(S.FormatSettingsContainer, null, /*#__PURE__*/React.createElement(S.FormatSettingsWrapper, null, /*#__PURE__*/React.createElement(Title, {
79
+ return /*#__PURE__*/React.createElement(S.FormatSettingsContainer, {
80
+ "data-testid": "ds-format-picker-overlay"
81
+ }, /*#__PURE__*/React.createElement(S.FormatSettingsWrapper, null, /*#__PURE__*/React.createElement(Title, {
80
82
  level: 6
81
- }, text == null ? void 0 : text.header), /*#__PURE__*/React.createElement(S.FormatSettings, null, /*#__PURE__*/React.createElement(Radio.Group, {
83
+ }, text.header), /*#__PURE__*/React.createElement(S.FormatSettings, null, /*#__PURE__*/React.createElement(Radio.Group, {
82
84
  defaultValue: format.dataFormat,
83
- onChange: function onChange(e) {
84
- return onDataFormatChange(e.target.value);
85
+ onChange: function onChange(event) {
86
+ return onDataFormatChange(event.target.value);
85
87
  }
86
88
  }, /*#__PURE__*/React.createElement(ButtonGroup, null, getFormattingTypes(intl, text).map(function (type) {
87
89
  return /*#__PURE__*/React.createElement(Tooltip, {
@@ -91,6 +93,7 @@ var FormatSettings = function FormatSettings(_ref) {
91
93
  }, /*#__PURE__*/React.createElement(Button, {
92
94
  type: type.format === format.dataFormat ? 'primary' : 'secondary',
93
95
  mode: "icon",
96
+ "data-testid": "ds-format-picker-type-" + type.format,
94
97
  onClick: function onClick() {
95
98
  return onDataFormatChange(type.format);
96
99
  }
@@ -116,7 +119,7 @@ var FormatSettings = function FormatSettings(_ref) {
116
119
  overlay: /*#__PURE__*/React.createElement(S.DropdownWrapper, null, getCurrenciesConfig(currenciesConfig || []).map(function (_ref2) {
117
120
  var currency = _ref2.currency,
118
121
  label = _ref2.label;
119
- return /*#__PURE__*/React.createElement(S.MenuItem, {
122
+ return /*#__PURE__*/React.createElement(S.ListItem, {
120
123
  key: currency,
121
124
  suffixel: valueFormatter({
122
125
  value: value,
@@ -130,22 +133,24 @@ var FormatSettings = function FormatSettings(_ref) {
130
133
  }
131
134
  }, label);
132
135
  }))
133
- }, /*#__PURE__*/React.createElement(S.DropdownTrigger, null, /*#__PURE__*/React.createElement(S.DropdownValue, null, selectedCurrency == null ? void 0 : selectedCurrency.label), /*#__PURE__*/React.createElement(Icon, {
136
+ }, /*#__PURE__*/React.createElement(S.DropdownTrigger, {
137
+ "data-testid": "ds-format-picker-currency-trigger"
138
+ }, /*#__PURE__*/React.createElement(S.DropdownValue, null, selectedCurrency == null ? void 0 : selectedCurrency.label), /*#__PURE__*/React.createElement(Icon, {
134
139
  component: /*#__PURE__*/React.createElement(AngleDownS, null)
135
140
  }))), /*#__PURE__*/React.createElement(Checkbox, {
136
- onChange: function onChange(e) {
137
- return onUseSeparatorChange(e.target.checked);
141
+ onChange: function onChange(event) {
142
+ return onUseSeparatorChange(event.target.checked);
138
143
  },
139
144
  checked: format.useSeparator
140
- }, text == null ? void 0 : text.useSeparator), /*#__PURE__*/React.createElement(Checkbox, {
141
- onChange: function onChange(e) {
142
- return onCompactNumbersChange(e.target.checked);
145
+ }, text.useSeparator), /*#__PURE__*/React.createElement(Checkbox, {
146
+ onChange: function onChange(event) {
147
+ return onCompactNumbersChange(event.target.checked);
143
148
  },
144
149
  checked: format.compactNumbers
145
- }, text == null ? void 0 : text.compactNumbers))), /*#__PURE__*/React.createElement(S.FormatFooter, null, /*#__PURE__*/React.createElement(Button, {
150
+ }, text.compactNumbers))), /*#__PURE__*/React.createElement(S.FormatFooter, null, /*#__PURE__*/React.createElement(Button, {
146
151
  type: "ghost",
147
152
  onClick: onSetDefault
148
- }, text == null ? void 0 : text.setDefault)));
153
+ }, text.setDefault)));
149
154
  };
150
155
 
151
156
  export default FormatSettings;
package/dist/FormatSettings/FormatSettings.styles.d.ts CHANGED
@@ -1,5 +1,4 @@
1
1
  /// <reference types="react" />
2
- import Menu from '@synerise/ds-menu';
3
2
  import Button from '@synerise/ds-button';
4
3
  export declare const FormatSettingsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
5
4
  export declare const FormatSettingsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -8,6 +7,6 @@ export declare const FormatOptions: import("styled-components").StyledComponent<
8
7
  export declare const FormatFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
9
8
  export declare const DropdownTrigger: import("styled-components").StyledComponent<"div", any, {}, never>;
10
9
  export declare const DropdownValue: import("styled-components").StyledComponent<"span", any, {}, never>;
11
- export declare const DropdownWrapper: import("styled-components").StyledComponent<typeof Menu, any, {}, never>;
12
- export declare const MenuItem: import("styled-components").StyledComponent<import("react").FC<import("@synerise/ds-menu/dist/Elements/SubMenu/SubMenu.types").SubMenuProps & import("@synerise/ds-menu").MenuItemProps>, any, {}, never>;
10
+ export declare const DropdownWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
11
+ export declare const ListItem: import("styled-components").StyledComponent<(props: import("@synerise/ds-list-item").ListItemProps) => import("react").JSX.Element, any, {}, never>;
13
12
  export declare const FixedLengthButton: import("styled-components").StyledComponent<typeof Button, any, {}, never>;
package/dist/FormatSettings/FormatSettings.styles.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import styled from 'styled-components';
2
- import Menu from '@synerise/ds-menu';
3
- import { SuffixWraper } from '@synerise/ds-menu/dist/Elements/Item/Text/Text.styles';
2
+ import DSListItem from '@synerise/ds-list-item';
3
+ import { SuffixWrapper } from '@synerise/ds-list-item/dist/components/Text/Text.styles';
4
4
  import Button from '@synerise/ds-button';
5
5
  export var FormatSettingsContainer = styled.div.withConfig({
6
6
  displayName: "FormatSettingsstyles__FormatSettingsContainer",
@@ -40,16 +40,18 @@ export var DropdownValue = styled.span.withConfig({
40
40
  })(["font-size:13px;line-height:18px;font-weight:400;color:", ";"], function (props) {
41
41
  return props.theme.palette['grey-700'];
42
42
  });
43
- export var DropdownWrapper = styled(Menu).withConfig({
43
+ export var DropdownWrapper = styled.div.withConfig({
44
44
  displayName: "FormatSettingsstyles__DropdownWrapper",
45
45
  componentId: "ipk0xd-7"
46
- })(["display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;width:100%;padding:8px;"]);
47
- export var MenuItem = styled(Menu.Item).withConfig({
48
- displayName: "FormatSettingsstyles__MenuItem",
46
+ })(["display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;width:100%;padding:8px;background:", ";"], function (props) {
47
+ return props.theme.palette.white;
48
+ });
49
+ export var ListItem = styled(DSListItem).withConfig({
50
+ displayName: "FormatSettingsstyles__ListItem",
49
51
  componentId: "ipk0xd-8"
50
52
  })(["font-weight:500;width:100%;color:", ";", "{color:", ";font-weight:400;}"], function (props) {
51
53
  return props.theme.palette['grey-700'];
52
- }, SuffixWraper, function (props) {
54
+ }, SuffixWrapper, function (props) {
53
55
  return props.theme.palette['grey-500'];
54
56
  });
55
57
  export var FixedLengthButton = styled(Button).withConfig({
package/dist/FormatSettings/FormatSettings.types.d.ts CHANGED
@@ -1,2 +1,4 @@
1
- import { FormatPickerProps } from '../FomartPicker.types';
2
- export type FormatSettingsProps = FormatPickerProps;
1
+ import type { FormatPickerProps, FormatPickerTexts } from '../FomartPicker.types';
2
+ export type FormatSettingsProps = Omit<FormatPickerProps, 'text'> & {
3
+ text: FormatPickerTexts;
4
+ };
package/dist/index.d.ts CHANGED
@@ -1 +1,2 @@
1
1
  export { default } from './FormatPicker';
2
+ export type { FormatPickerProps } from './FomartPicker.types';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-format-picker",
3
- "version": "0.3.118",
3
+ "version": "0.4.0",
4
4
  "description": "FormatPicker UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "Synerise/synerise-design",
@@ -36,9 +36,9 @@
36
36
  "@synerise/ds-button": "^0.21.1",
37
37
  "@synerise/ds-button-group": "^0.7.3",
38
38
  "@synerise/ds-checkbox": "^0.12.1",
39
- "@synerise/ds-dropdown": "^0.18.2",
39
+ "@synerise/ds-dropdown": "^0.18.3",
40
40
  "@synerise/ds-icon": "^0.63.0",
41
- "@synerise/ds-menu": "^0.19.3",
41
+ "@synerise/ds-list-item": "^0.3.0",
42
42
  "@synerise/ds-radio": "^0.11.73",
43
43
  "@synerise/ds-tooltip": "^0.14.31",
44
44
  "@synerise/ds-typography": "^0.15.0",
@@ -55,5 +55,5 @@
55
55
  "devDependencies": {
56
56
  "@testing-library/jest-dom": "5.1.1"
57
57
  },
58
- "gitHead": "587eb113074985ae21e4f0c25ec33c3e3e2e072b"
58
+ "gitHead": "0692552b018dc9c8042f18c773f88890c9ad3270"
59
59
  }