@synerise/ds-input-number 0.6.28 → 0.7.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 (7) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/README.md +23 -21
  3. package/dist/InputNumber.js +15 -3
  4. package/dist/InputNumber.styles.d.ts +1 -0
  5. package/dist/InputNumber.styles.js +16 -10
  6. package/dist/InputNumber.types.d.ts +4 -1
  7. package/package.json +4 -2
package/CHANGELOG.md CHANGED
@@ -3,6 +3,24 @@
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.7.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-input-number@0.6.28...@synerise/ds-input-number@0.7.0) (2023-03-06)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **input-number:** fixes styles ([f1ea06f](https://github.com/Synerise/synerise-design/commit/f1ea06f25f76ca0a3a0ee7b7fc3012e78e721c53))
12
+
13
+
14
+ ### Features
15
+
16
+ * **input-number:** adds tooltip next to input label ([bba90b6](https://github.com/Synerise/synerise-design/commit/bba90b60db71b49d994c7432c48d92668ec93937))
17
+ * **input-number:** adds wrapper element for number input ([29f6f12](https://github.com/Synerise/synerise-design/commit/29f6f121777f68f4dbd04c9566166dc1c0c4392b))
18
+ * **input-number:** updates path to importing types ([069650f](https://github.com/Synerise/synerise-design/commit/069650febbbcda6d8ca4ac58ca57296dddbae73f))
19
+
20
+
21
+
22
+
23
+
6
24
  ## [0.6.28](https://github.com/Synerise/synerise-design/compare/@synerise/ds-input-number@0.6.27...@synerise/ds-input-number@0.6.28) (2023-02-28)
7
25
 
8
26
  **Note:** Version bump only for package @synerise/ds-input-number
package/README.md CHANGED
@@ -13,27 +13,29 @@ Input-Number UI Component
13
13
 
14
14
  ### Props
15
15
 
16
- | Property | Description | Type | Default |
17
- | ---------------- | ------------------------------------------------------------------------------------------------- | ---------------------------------- | --------- |
18
- | autoFocus | Get focus when component mounted | boolean | `false` |
19
- | decimalSeparator | Decimal separator | string | - |
20
- | defaultValue | Initial value | number |
21
- | description | Input description | string | - |
22
- | disabled | Disable the input | boolean | `false` |
23
- | errorText | Error message, if provided input will be set in error state | string | - |
24
- | formatter | Specifies the format of the value presented | (value: number / string) => string | - |
25
- | label | Input label | string | - |
26
- | max | Max value | number | Infinity |
27
- | min | Min value | number | -Infinity |
28
- | onChange | The callback triggered when the value is changed. | (value: number / string) => void |
29
- | onPressEnter | The callback function that is triggered when Enter key is pressed. | (e:Event) => void |
30
- | parser | Specifies the value extracted from formatter | (val: number / string) => string | - |
31
- | precision | Precision of input value | number | - |
32
- | size | Height of input box | string | - |
33
- | step | The number to which the current value is increased or decreased. It can be an integer or decimal. | number / string | 1 |
34
- | value | Current value | number | - |
35
- | prefixel | String or ReactNode to set prefix | string / ReactNode | - |
36
- | suffixel | String or ReactNode to set suffix | string / ReactNode | - |
16
+ | Property | Description | Type | Default |
17
+ | ---------------- | ------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- | --------- |
18
+ | autoFocus | Get focus when component mounted | boolean | `false` |
19
+ | decimalSeparator | Decimal separator | string | - |
20
+ | defaultValue | Initial value | number |
21
+ | description | Input description | string | - |
22
+ | disabled | Disable the input | boolean | `false` |
23
+ | errorText | Error message, if provided input will be set in error state | string | - |
24
+ | formatter | Specifies the format of the value presented | (value: number / string) => string | - |
25
+ | label | Input label | string | - |
26
+ | max | Max value | number | Infinity |
27
+ | min | Min value | number | -Infinity |
28
+ | onChange | The callback triggered when the value is changed. | (value: number / string) => void |
29
+ | onPressEnter | The callback function that is triggered when Enter key is pressed. | (e:Event) => void |
30
+ | parser | Specifies the value extracted from formatter | (val: number / string) => string | - |
31
+ | precision | Precision of input value | number | - |
32
+ | size | Height of input box | string | - |
33
+ | step | The number to which the current value is increased or decreased. It can be an integer or decimal. | number / string | 1 |
34
+ | value | Current value | number | - |
35
+ | prefixel | String or ReactNode to set prefix | string / ReactNode | - |
36
+ | suffixel | String or ReactNode to set suffix | string / ReactNode | - |
37
+ | tooltip | Tooltip content | ReactNode | - |
38
+ | tooltipConfig | Config of tooltip | [TooltipProps](https://design.synerise.com/docs/components/tooltip#api) | - |
37
39
 
38
40
  ### Methods
39
41
 
package/dist/InputNumber.js CHANGED
@@ -1,4 +1,4 @@
1
- var _excluded = ["label", "description", "errorText", "raw", "error", "prefixel", "suffixel", "style"];
1
+ var _excluded = ["label", "description", "errorText", "raw", "error", "prefixel", "suffixel", "style", "tooltip", "tooltipConfig"];
2
2
 
3
3
  function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
4
4
 
@@ -7,6 +7,8 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
7
7
  import * as React from 'react';
8
8
  import { v4 as uuid } from 'uuid';
9
9
  import '@synerise/ds-core/dist/js/style';
10
+ import Tooltip from '@synerise/ds-tooltip';
11
+ import Icon, { InfoFillS } from '@synerise/ds-icon';
10
12
  import "./style/index.css";
11
13
  import * as S from './InputNumber.styles';
12
14
 
@@ -19,15 +21,25 @@ var InputNumber = function InputNumber(_ref) {
19
21
  prefixel = _ref.prefixel,
20
22
  suffixel = _ref.suffixel,
21
23
  style = _ref.style,
24
+ tooltip = _ref.tooltip,
25
+ tooltipConfig = _ref.tooltipConfig,
22
26
  antdProps = _objectWithoutPropertiesLoose(_ref, _excluded);
23
27
 
24
28
  var id = React.useMemo(function () {
25
29
  return uuid();
26
30
  }, []);
27
31
  var showError = Boolean(error || errorText);
28
- return /*#__PURE__*/React.createElement(React.Fragment, null, label && !raw && /*#__PURE__*/React.createElement(S.ContentAbove, null, /*#__PURE__*/React.createElement(S.Label, {
32
+ return /*#__PURE__*/React.createElement(S.InputNumberContainer, null, label && !raw && /*#__PURE__*/React.createElement(S.ContentAbove, null, /*#__PURE__*/React.createElement(S.Label, {
29
33
  htmlFor: id
30
- }, label)), /*#__PURE__*/React.createElement(S.InputNumberWrapper, {
34
+ }, label, (tooltip || tooltipConfig) && /*#__PURE__*/React.createElement(Tooltip, _extends({
35
+ title: tooltip,
36
+ placement: "top",
37
+ trigger: "hover",
38
+ transitionName: "zoom-big-fast"
39
+ }, tooltipConfig), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Icon, {
40
+ size: 24,
41
+ component: /*#__PURE__*/React.createElement(InfoFillS, null)
42
+ }))))), /*#__PURE__*/React.createElement(S.InputNumberWrapper, {
31
43
  prefixel: !!prefixel,
32
44
  suffixel: !!suffixel,
33
45
  style: style
package/dist/InputNumber.styles.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import { ThemeProps } from '@synerise/ds-core/dist/js/DSProvider/ThemeProvider/theme';
3
+ export declare const InputNumberContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
3
4
  export declare const AntdInputNumber: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/lib/input-number").InputNumberProps & import("react").RefAttributes<unknown>>, any, {
4
5
  error: boolean;
5
6
  } & ThemeProps, never>;
package/dist/InputNumber.styles.js CHANGED
@@ -1,8 +1,12 @@
1
1
  import styled from 'styled-components';
2
2
  import BaseAntInputNumber from 'antd/lib/input-number';
3
+ export var InputNumberContainer = styled.div.withConfig({
4
+ displayName: "InputNumberstyles__InputNumberContainer",
5
+ componentId: "sc-17jwffw-0"
6
+ })(["display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;"]);
3
7
  export var AntdInputNumber = styled(BaseAntInputNumber).withConfig({
4
8
  displayName: "InputNumberstyles__AntdInputNumber",
5
- componentId: "sc-17jwffw-0"
9
+ componentId: "sc-17jwffw-1"
6
10
  })(["color:", ";input,input:focus{", ";}"], function (props) {
7
11
  return props.theme.palette['grey-700'];
8
12
  }, function (props) {
@@ -10,45 +14,47 @@ export var AntdInputNumber = styled(BaseAntInputNumber).withConfig({
10
14
  });
11
15
  export var ContentAbove = styled.div.withConfig({
12
16
  displayName: "InputNumberstyles__ContentAbove",
13
- componentId: "sc-17jwffw-1"
17
+ componentId: "sc-17jwffw-2"
14
18
  })(["display:flex;justify-content:space-between;margin-bottom:8px;"]);
15
19
  export var Label = styled.label.withConfig({
16
20
  displayName: "InputNumberstyles__Label",
17
- componentId: "sc-17jwffw-2"
18
- })(["color:", ";font-weight:500;display:block;white-space:nowrap;"], function (props) {
21
+ componentId: "sc-17jwffw-3"
22
+ })(["color:", ";font-weight:500;display:block;white-space:nowrap;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;cursor:pointer;.ds-icon > svg{margin-top:-1px;fill:", ";}"], function (props) {
19
23
  return props.theme.palette['grey-800'];
24
+ }, function (props) {
25
+ return props.theme.palette['grey-400'];
20
26
  });
21
27
  export var Description = styled.div.withConfig({
22
28
  displayName: "InputNumberstyles__Description",
23
- componentId: "sc-17jwffw-3"
29
+ componentId: "sc-17jwffw-4"
24
30
  })(["color:", ";"], function (props) {
25
31
  return props.theme.palette['grey-600'];
26
32
  });
27
33
  export var ContentBelow = styled.div.withConfig({
28
34
  displayName: "InputNumberstyles__ContentBelow",
29
- componentId: "sc-17jwffw-4"
35
+ componentId: "sc-17jwffw-5"
30
36
  })(["margin-top:8px;"]);
31
37
  export var ErrorText = styled.div.withConfig({
32
38
  displayName: "InputNumberstyles__ErrorText",
33
- componentId: "sc-17jwffw-5"
39
+ componentId: "sc-17jwffw-6"
34
40
  })(["color:", ";margin-bottom:4px;"], function (props) {
35
41
  return props.theme.palette['red-600'];
36
42
  });
37
43
  export var Prefixel = styled.div.withConfig({
38
44
  displayName: "InputNumberstyles__Prefixel",
39
- componentId: "sc-17jwffw-6"
45
+ componentId: "sc-17jwffw-7"
40
46
  })(["border:1px solid ", ";border-radius:3px 0 0 3px;border-right-width:0;"], function (props) {
41
47
  return props.theme.palette['grey-300'];
42
48
  });
43
49
  export var Suffixel = styled.div.withConfig({
44
50
  displayName: "InputNumberstyles__Suffixel",
45
- componentId: "sc-17jwffw-7"
51
+ componentId: "sc-17jwffw-8"
46
52
  })(["border:1px solid ", ";border-radius:0 3px 3px 0;border-left-width:0;"], function (props) {
47
53
  return props.theme.palette['grey-300'];
48
54
  });
49
55
  export var InputNumberWrapper = styled.div.withConfig({
50
56
  displayName: "InputNumberstyles__InputNumberWrapper",
51
- componentId: "sc-17jwffw-8"
57
+ componentId: "sc-17jwffw-9"
52
58
  })(["display:flex;align-items:center;", ",", "{background:", ";display:flex;align-items:center;align-self:stretch;padding:0 12px;}", " ", ""], Prefixel, Suffixel, function (props) {
53
59
  return props.theme.palette['grey-050'];
54
60
  }, function (props) {
package/dist/InputNumber.types.d.ts CHANGED
@@ -1,5 +1,6 @@
1
- import { InputNumberProps } from 'antd/lib/input-number';
2
1
  import * as React from 'react';
2
+ import { InputNumberProps } from 'antd/lib/input-number';
3
+ import type { TooltipProps } from '@synerise/ds-tooltip';
3
4
  export interface Props extends InputNumberProps {
4
5
  errorText?: React.ReactNode | string;
5
6
  label?: React.ReactNode | string;
@@ -8,4 +9,6 @@ export interface Props extends InputNumberProps {
8
9
  prefixel?: React.ReactNode | string;
9
10
  suffixel?: React.ReactNode | string;
10
11
  raw?: boolean;
12
+ tooltip?: string;
13
+ tooltipConfig?: TooltipProps;
11
14
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-input-number",
3
- "version": "0.6.28",
3
+ "version": "0.7.0",
4
4
  "description": "Input-Number UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "Synerise/synerise-design",
@@ -32,6 +32,8 @@
32
32
  ],
33
33
  "types": "dist/index.d.ts",
34
34
  "dependencies": {
35
+ "@synerise/ds-icon": "^0.53.0",
36
+ "@synerise/ds-tooltip": "^0.13.0",
35
37
  "@synerise/ds-utils": "^0.24.1",
36
38
  "uuid": "^7.0.2"
37
39
  },
@@ -43,5 +45,5 @@
43
45
  "devDependencies": {
44
46
  "@types/uuid": "7.0.0"
45
47
  },
46
- "gitHead": "c0b5a65f7c3a9783c31d2344ccda68303cbcf08d"
48
+ "gitHead": "a9c9628df732abd42421880fd1aa61b7f7c580ee"
47
49
  }