@dhis2-ui/chip 9.3.0 → 9.4.0-alpha.1

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 (10) hide show
  1. package/build/cjs/chip.js +17 -7
  2. package/build/cjs/chip.stories.js +9 -1
  3. package/build/cjs/icon.js +3 -3
  4. package/build/cjs/remove.js +2 -2
  5. package/build/es/chip.js +17 -7
  6. package/build/es/chip.stories.js +5 -0
  7. package/build/es/icon.js +3 -3
  8. package/build/es/remove.js +2 -2
  9. package/package.json +2 -2
  10. package/types/index.d.ts +10 -2
package/build/cjs/chip.js CHANGED
@@ -39,7 +39,9 @@ const Chip = _ref => {
39
39
  marginBottom,
40
40
  marginLeft,
41
41
  marginRight,
42
- marginTop
42
+ marginTop,
43
+ marginInlineStart,
44
+ marginInlineEnd
43
45
  } = _ref;
44
46
  return /*#__PURE__*/_react.default.createElement("span", {
45
47
  onClick: e => {
@@ -48,7 +50,7 @@ const Chip = _ref => {
48
50
  }
49
51
  },
50
52
  "data-test": dataTest,
51
- className: _style.default.dynamic([["3780556490", [_uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.theme.secondary600, _uiConstants.colors.white]], ["2231360490", [marginBottom && "margin-bottom: ".concat(marginBottom, "px;"), marginLeft && "margin-left: ".concat(marginLeft, "px;"), marginRight && "margin-right: ".concat(marginRight, "px;"), marginTop && "margin-top: ".concat(marginTop, "px")]]]) + " " + ((0, _classnames.default)(className, {
53
+ className: _style.default.dynamic([["3780556490", [_uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.theme.secondary600, _uiConstants.colors.white]], ["1677407912", [marginBottom && "margin-bottom: ".concat(marginBottom, "px;"), marginLeft && "margin-inline-start: ".concat(marginInlineStart !== null && marginInlineStart !== void 0 ? marginInlineStart : marginLeft, "px;"), marginRight && "margin-inline-end: ".concat(marginInlineEnd !== null && marginInlineEnd !== void 0 ? marginInlineEnd : marginRight, "px;"), marginTop && "margin-top: ".concat(marginTop, "px")]]]) + " " + ((0, _classnames.default)(className, {
52
54
  selected,
53
55
  dense,
54
56
  disabled,
@@ -66,9 +68,9 @@ const Chip = _ref => {
66
68
  id: "3780556490",
67
69
  dynamic: [_uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.theme.secondary600, _uiConstants.colors.white]
68
70
  }, ["span.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:32px;border-radius:16px;background-color:".concat(_uiConstants.colors.grey200, ";font-size:14px;line-height:16px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:").concat(_uiConstants.colors.grey900, ";}"), ".dense.__jsx-style-dynamic-selector{height:24px;font-size:13px;line-height:15px;}", "span.__jsx-style-dynamic-selector:hover{background-color:".concat(_uiConstants.colors.grey300, ";}"), ".selected.__jsx-style-dynamic-selector{background-color:".concat(_uiConstants.theme.secondary600, ";font-weight:500;}"), ".selected.__jsx-style-dynamic-selector:hover{background-color:#00695c;}", ".selected.__jsx-style-dynamic-selector,.selected.__jsx-style-dynamic-selector .icon.__jsx-style-dynamic-selector,.selected.__jsx-style-dynamic-selector .remove-icon.__jsx-style-dynamic-selector{color:".concat(_uiConstants.colors.white, ";}"), ".disabled.__jsx-style-dynamic-selector{cursor:not-allowed;opacity:0.3;}", ".disabled.__jsx-style-dynamic-selector .remove-icon.__jsx-style-dynamic-selector{pointer-events:none;}", ".dragging.__jsx-style-dynamic-selector{box-shadow:0 3px 1px -2px rgba(0,0,0,0.2), 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12);}"]), /*#__PURE__*/_react.default.createElement(_style.default, {
69
- id: "2231360490",
70
- dynamic: [marginBottom && "margin-bottom: ".concat(marginBottom, "px;"), marginLeft && "margin-left: ".concat(marginLeft, "px;"), marginRight && "margin-right: ".concat(marginRight, "px;"), marginTop && "margin-top: ".concat(marginTop, "px")]
71
- }, ["span.__jsx-style-dynamic-selector{".concat(marginBottom && "margin-bottom: ".concat(marginBottom, "px;"), " ").concat(marginLeft && "margin-left: ".concat(marginLeft, "px;"), " ").concat(marginRight && "margin-right: ".concat(marginRight, "px;"), " ").concat(marginTop && "margin-top: ".concat(marginTop, "px"), ";}")]));
71
+ id: "1677407912",
72
+ dynamic: [marginBottom && "margin-bottom: ".concat(marginBottom, "px;"), marginLeft && "margin-inline-start: ".concat(marginInlineStart !== null && marginInlineStart !== void 0 ? marginInlineStart : marginLeft, "px;"), marginRight && "margin-inline-end: ".concat(marginInlineEnd !== null && marginInlineEnd !== void 0 ? marginInlineEnd : marginRight, "px;"), marginTop && "margin-top: ".concat(marginTop, "px")]
73
+ }, ["span.__jsx-style-dynamic-selector{".concat(marginBottom && "margin-bottom: ".concat(marginBottom, "px;"), " ").concat(marginLeft && "margin-inline-start: ".concat(marginInlineStart !== null && marginInlineStart !== void 0 ? marginInlineStart : marginLeft, "px;"), " ").concat(marginRight && "margin-inline-end: ".concat(marginInlineEnd !== null && marginInlineEnd !== void 0 ? marginInlineEnd : marginRight, "px;"), " ").concat(marginTop && "margin-top: ".concat(marginTop, "px"), ";}")]));
72
74
  };
73
75
 
74
76
  exports.Chip = Chip;
@@ -77,6 +79,8 @@ Chip.defaultProps = {
77
79
  marginBottom: 4,
78
80
  marginLeft: 4,
79
81
  marginRight: 4,
82
+ marginInlineStart: 4,
83
+ marginInlineEnd: 4,
80
84
  marginTop: 4
81
85
  };
82
86
  Chip.propTypes = {
@@ -91,10 +95,16 @@ Chip.propTypes = {
91
95
  /** `margin-bottom` value, applied in `px` */
92
96
  marginBottom: _propTypes.default.number,
93
97
 
94
- /** `margin-left` value, applied in `px` */
98
+ /** `margin-inline-end` value, applied in `px` */
99
+ marginInlineEnd: _propTypes.default.number,
100
+
101
+ /** `margin-inline-start` value, applied in `px` */
102
+ marginInlineStart: _propTypes.default.number,
103
+
104
+ /** `margin-inline-start` value, applied in `px` */
95
105
  marginLeft: _propTypes.default.number,
96
106
 
97
- /** `margin-right` value, applied in `px` */
107
+ /** `margin-inline-end` value, applied in `px` */
98
108
  marginRight: _propTypes.default.number,
99
109
 
100
110
  /** `margin-top` value, applied in `px` */
package/build/cjs/chip.stories.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.default = exports.Selected = exports.Removable = exports.Overflow = exports.IconContent = exports.Icon = exports.DenseRemoveable = exports.Dense = exports.Default = void 0;
6
+ exports.default = exports.Selected = exports.Removable = exports.RTLRemovable = exports.Overflow = exports.IconContent = exports.Icon = exports.DenseRemoveable = exports.Dense = exports.Default = void 0;
7
7
 
8
8
  var _style = _interopRequireDefault(require("styled-jsx/style"));
9
9
 
@@ -134,4 +134,12 @@ exports.DenseRemoveable = DenseRemoveable;
134
134
  DenseRemoveable.args = { ...Dense.args,
135
135
  ...Removable.args,
136
136
  children: 'Removable and dense'
137
+ };
138
+
139
+ const RTLRemovable = args => /*#__PURE__*/_react.default.createElement("div", {
140
+ dir: "rtl"
141
+ }, /*#__PURE__*/_react.default.createElement(_chip.Chip, args, "RTL removable"));
142
+
143
+ exports.RTLRemovable = RTLRemovable;
144
+ RTLRemovable.args = { ...Removable.args
137
145
  };
package/build/cjs/icon.js CHANGED
@@ -27,11 +27,11 @@ const Icon = _ref => {
27
27
 
28
28
  return /*#__PURE__*/_react.default.createElement("span", {
29
29
  "data-test": dataTest,
30
- className: _style.default.dynamic([["2159848327", [_uiConstants.spacers.dp4]]])
30
+ className: _style.default.dynamic([["1889825154", [_uiConstants.spacers.dp4]]])
31
31
  }, icon, /*#__PURE__*/_react.default.createElement(_style.default, {
32
- id: "2159848327",
32
+ id: "1889825154",
33
33
  dynamic: [_uiConstants.spacers.dp4]
34
- }, ["span.__jsx-style-dynamic-selector{width:24px;height:24px;margin-left:".concat(_uiConstants.spacers.dp4, ";margin-right:-6px;border-radius:50%;overflow:hidden;}"), "span.__jsx-style-dynamic-selector>*{max-height:24px;max-width:24px;}"]));
34
+ }, ["span.__jsx-style-dynamic-selector{width:24px;height:24px;margin-inline-start:".concat(_uiConstants.spacers.dp4, ";margin-inline-end:-6px;border-radius:50%;overflow:hidden;}"), "span.__jsx-style-dynamic-selector>*{max-height:24px;max-width:24px;}"]));
35
35
  };
36
36
 
37
37
  exports.Icon = Icon;
package/build/cjs/remove.js CHANGED
@@ -34,8 +34,8 @@ function CancelOutline(_ref) {
34
34
  CancelOutline.propTypes = {
35
35
  className: _propTypes.default.string
36
36
  };
37
- const containerStyle = ["span.jsx-1924786287{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:20px;width:20px;margin-right:4px;border-radius:12px;margin-left:-8px;}", "span.jsx-1924786287:hover{background:".concat(_uiConstants.colors.grey400, ";}")];
38
- containerStyle.__hash = "1924786287";
37
+ const containerStyle = ["span.jsx-2824632002{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:20px;width:20px;margin-inline-end:4px;border-radius:12px;margin-inline-start:-8px;}", "span.jsx-2824632002:hover{background:".concat(_uiConstants.colors.grey400, ";}")];
38
+ containerStyle.__hash = "2824632002";
39
39
  const removeIcon = {
40
40
  styles: /*#__PURE__*/_react.default.createElement(_style.default, {
41
41
  id: "2658726446"
package/build/es/chip.js CHANGED
@@ -23,7 +23,9 @@ const Chip = _ref => {
23
23
  marginBottom,
24
24
  marginLeft,
25
25
  marginRight,
26
- marginTop
26
+ marginTop,
27
+ marginInlineStart,
28
+ marginInlineEnd
27
29
  } = _ref;
28
30
  return /*#__PURE__*/React.createElement("span", {
29
31
  onClick: e => {
@@ -32,7 +34,7 @@ const Chip = _ref => {
32
34
  }
33
35
  },
34
36
  "data-test": dataTest,
35
- className: _JSXStyle.dynamic([["3780556490", [colors.grey200, colors.grey900, colors.grey300, theme.secondary600, colors.white]], ["2231360490", [marginBottom && "margin-bottom: ".concat(marginBottom, "px;"), marginLeft && "margin-left: ".concat(marginLeft, "px;"), marginRight && "margin-right: ".concat(marginRight, "px;"), marginTop && "margin-top: ".concat(marginTop, "px")]]]) + " " + (cx(className, {
37
+ className: _JSXStyle.dynamic([["3780556490", [colors.grey200, colors.grey900, colors.grey300, theme.secondary600, colors.white]], ["1677407912", [marginBottom && "margin-bottom: ".concat(marginBottom, "px;"), marginLeft && "margin-inline-start: ".concat(marginInlineStart !== null && marginInlineStart !== void 0 ? marginInlineStart : marginLeft, "px;"), marginRight && "margin-inline-end: ".concat(marginInlineEnd !== null && marginInlineEnd !== void 0 ? marginInlineEnd : marginRight, "px;"), marginTop && "margin-top: ".concat(marginTop, "px")]]]) + " " + (cx(className, {
36
38
  selected,
37
39
  dense,
38
40
  disabled,
@@ -50,9 +52,9 @@ const Chip = _ref => {
50
52
  id: "3780556490",
51
53
  dynamic: [colors.grey200, colors.grey900, colors.grey300, theme.secondary600, colors.white]
52
54
  }, ["span.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:32px;border-radius:16px;background-color:".concat(colors.grey200, ";font-size:14px;line-height:16px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:").concat(colors.grey900, ";}"), ".dense.__jsx-style-dynamic-selector{height:24px;font-size:13px;line-height:15px;}", "span.__jsx-style-dynamic-selector:hover{background-color:".concat(colors.grey300, ";}"), ".selected.__jsx-style-dynamic-selector{background-color:".concat(theme.secondary600, ";font-weight:500;}"), ".selected.__jsx-style-dynamic-selector:hover{background-color:#00695c;}", ".selected.__jsx-style-dynamic-selector,.selected.__jsx-style-dynamic-selector .icon.__jsx-style-dynamic-selector,.selected.__jsx-style-dynamic-selector .remove-icon.__jsx-style-dynamic-selector{color:".concat(colors.white, ";}"), ".disabled.__jsx-style-dynamic-selector{cursor:not-allowed;opacity:0.3;}", ".disabled.__jsx-style-dynamic-selector .remove-icon.__jsx-style-dynamic-selector{pointer-events:none;}", ".dragging.__jsx-style-dynamic-selector{box-shadow:0 3px 1px -2px rgba(0,0,0,0.2), 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12);}"]), /*#__PURE__*/React.createElement(_JSXStyle, {
53
- id: "2231360490",
54
- dynamic: [marginBottom && "margin-bottom: ".concat(marginBottom, "px;"), marginLeft && "margin-left: ".concat(marginLeft, "px;"), marginRight && "margin-right: ".concat(marginRight, "px;"), marginTop && "margin-top: ".concat(marginTop, "px")]
55
- }, ["span.__jsx-style-dynamic-selector{".concat(marginBottom && "margin-bottom: ".concat(marginBottom, "px;"), " ").concat(marginLeft && "margin-left: ".concat(marginLeft, "px;"), " ").concat(marginRight && "margin-right: ".concat(marginRight, "px;"), " ").concat(marginTop && "margin-top: ".concat(marginTop, "px"), ";}")]));
55
+ id: "1677407912",
56
+ dynamic: [marginBottom && "margin-bottom: ".concat(marginBottom, "px;"), marginLeft && "margin-inline-start: ".concat(marginInlineStart !== null && marginInlineStart !== void 0 ? marginInlineStart : marginLeft, "px;"), marginRight && "margin-inline-end: ".concat(marginInlineEnd !== null && marginInlineEnd !== void 0 ? marginInlineEnd : marginRight, "px;"), marginTop && "margin-top: ".concat(marginTop, "px")]
57
+ }, ["span.__jsx-style-dynamic-selector{".concat(marginBottom && "margin-bottom: ".concat(marginBottom, "px;"), " ").concat(marginLeft && "margin-inline-start: ".concat(marginInlineStart !== null && marginInlineStart !== void 0 ? marginInlineStart : marginLeft, "px;"), " ").concat(marginRight && "margin-inline-end: ".concat(marginInlineEnd !== null && marginInlineEnd !== void 0 ? marginInlineEnd : marginRight, "px;"), " ").concat(marginTop && "margin-top: ".concat(marginTop, "px"), ";}")]));
56
58
  };
57
59
 
58
60
  Chip.defaultProps = {
@@ -60,6 +62,8 @@ Chip.defaultProps = {
60
62
  marginBottom: 4,
61
63
  marginLeft: 4,
62
64
  marginRight: 4,
65
+ marginInlineStart: 4,
66
+ marginInlineEnd: 4,
63
67
  marginTop: 4
64
68
  };
65
69
  Chip.propTypes = {
@@ -74,10 +78,16 @@ Chip.propTypes = {
74
78
  /** `margin-bottom` value, applied in `px` */
75
79
  marginBottom: PropTypes.number,
76
80
 
77
- /** `margin-left` value, applied in `px` */
81
+ /** `margin-inline-end` value, applied in `px` */
82
+ marginInlineEnd: PropTypes.number,
83
+
84
+ /** `margin-inline-start` value, applied in `px` */
85
+ marginInlineStart: PropTypes.number,
86
+
87
+ /** `margin-inline-start` value, applied in `px` */
78
88
  marginLeft: PropTypes.number,
79
89
 
80
- /** `margin-right` value, applied in `px` */
90
+ /** `margin-inline-end` value, applied in `px` */
81
91
  marginRight: PropTypes.number,
82
92
 
83
93
  /** `margin-top` value, applied in `px` */
package/build/es/chip.stories.js CHANGED
@@ -111,4 +111,9 @@ export const DenseRemoveable = Template.bind({});
111
111
  DenseRemoveable.args = { ...Dense.args,
112
112
  ...Removable.args,
113
113
  children: 'Removable and dense'
114
+ };
115
+ export const RTLRemovable = args => /*#__PURE__*/React.createElement("div", {
116
+ dir: "rtl"
117
+ }, /*#__PURE__*/React.createElement(Chip, args, "RTL removable"));
118
+ RTLRemovable.args = { ...Removable.args
114
119
  };
package/build/es/icon.js CHANGED
@@ -14,11 +14,11 @@ export const Icon = _ref => {
14
14
 
15
15
  return /*#__PURE__*/React.createElement("span", {
16
16
  "data-test": dataTest,
17
- className: _JSXStyle.dynamic([["2159848327", [spacers.dp4]]])
17
+ className: _JSXStyle.dynamic([["1889825154", [spacers.dp4]]])
18
18
  }, icon, /*#__PURE__*/React.createElement(_JSXStyle, {
19
- id: "2159848327",
19
+ id: "1889825154",
20
20
  dynamic: [spacers.dp4]
21
- }, ["span.__jsx-style-dynamic-selector{width:24px;height:24px;margin-left:".concat(spacers.dp4, ";margin-right:-6px;border-radius:50%;overflow:hidden;}"), "span.__jsx-style-dynamic-selector>*{max-height:24px;max-width:24px;}"]));
21
+ }, ["span.__jsx-style-dynamic-selector{width:24px;height:24px;margin-inline-start:".concat(spacers.dp4, ";margin-inline-end:-6px;border-radius:50%;overflow:hidden;}"), "span.__jsx-style-dynamic-selector>*{max-height:24px;max-width:24px;}"]));
22
22
  };
23
23
  Icon.propTypes = {
24
24
  dataTest: PropTypes.string.isRequired,
package/build/es/remove.js CHANGED
@@ -22,8 +22,8 @@ function CancelOutline(_ref) {
22
22
  CancelOutline.propTypes = {
23
23
  className: PropTypes.string
24
24
  };
25
- const containerStyle = ["span.jsx-1924786287{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:20px;width:20px;margin-right:4px;border-radius:12px;margin-left:-8px;}", "span.jsx-1924786287:hover{background:".concat(colors.grey400, ";}")];
26
- containerStyle.__hash = "1924786287";
25
+ const containerStyle = ["span.jsx-2824632002{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:20px;width:20px;margin-inline-end:4px;border-radius:12px;margin-inline-start:-8px;}", "span.jsx-2824632002:hover{background:".concat(colors.grey400, ";}")];
26
+ containerStyle.__hash = "2824632002";
27
27
  const removeIcon = {
28
28
  styles: /*#__PURE__*/React.createElement(_JSXStyle, {
29
29
  id: "2658726446"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dhis2-ui/chip",
3
- "version": "9.3.0",
3
+ "version": "9.4.0-alpha.1",
4
4
  "description": "UI Chip",
5
5
  "repository": {
6
6
  "type": "git",
@@ -33,7 +33,7 @@
33
33
  },
34
34
  "dependencies": {
35
35
  "@dhis2/prop-types": "^3.1.2",
36
- "@dhis2/ui-constants": "9.3.0",
36
+ "@dhis2/ui-constants": "9.4.0-alpha.1",
37
37
  "classnames": "^2.3.1",
38
38
  "prop-types": "^15.7.2"
39
39
  },
package/types/index.d.ts CHANGED
@@ -13,13 +13,21 @@ export interface ChipProps {
13
13
  */
14
14
  marginBottom?: number
15
15
  /**
16
- * `margin-left` value, applied in `px`
16
+ * `margin-inline-start` value, applied in `px` (if marginInlineStart not provided)
17
17
  */
18
18
  marginLeft?: number
19
19
  /**
20
- * `margin-right` value, applied in `px`
20
+ * `margin-inline-end` value, applied in `px` (if marginInlineEnd not provided)
21
21
  */
22
22
  marginRight?: number
23
+ /**
24
+ * `margin-inline-start` value, applied in `px`
25
+ */
26
+ marginInlineStart?: number
27
+ /**
28
+ * `margin-inline-end` value, applied in `px`
29
+ */
30
+ marginInlineEnd?: number
23
31
  /**
24
32
  * `margin-top` value, applied in `px`
25
33
  */