@pingux/astro 2.14.0 → 2.14.1-alpha.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 (8) hide show
  1. package/lib/cjs/components/ListViewItem/ListViewItem.styles.js +41 -4
  2. package/lib/cjs/components/Text/Text.styles.d.ts +40 -8
  3. package/lib/cjs/components/Text/Text.styles.js +34 -25
  4. package/lib/cjs/experimental/ListViewItem/ListViewItem.js +17 -91
  5. package/lib/components/ListViewItem/ListViewItem.styles.js +41 -4
  6. package/lib/components/Text/Text.styles.js +34 -25
  7. package/lib/experimental/ListViewItem/ListViewItem.js +15 -91
  8. package/package.json +1 -1
package/lib/cjs/components/ListViewItem/ListViewItem.styles.js CHANGED
@@ -42,10 +42,6 @@ var container = {
42
42
  borderBottomColor: 'line.light'
43
43
  }
44
44
  };
45
- var styledListItem = _objectSpread(_objectSpread({}, container), {}, {
46
- padding: 0,
47
- minHeight: 0
48
- });
49
45
  var linkedViewContainer = _objectSpread(_objectSpread({}, container), {}, {
50
46
  minHeight: '75px',
51
47
  height: '76px',
@@ -75,9 +71,50 @@ var linkedViewContainer = _objectSpread(_objectSpread({}, container), {}, {
75
71
  }
76
72
  }
77
73
  });
74
+ var styledContainer = {
75
+ m: '1px',
76
+ minHeight: '72px',
77
+ '&.is-hovered': {
78
+ bg: 'white',
79
+ cursor: 'pointer'
80
+ }
81
+ };
82
+ var styledListItem = _objectSpread(_objectSpread({}, container), {}, {
83
+ minHeight: 0,
84
+ padding: 0
85
+ });
86
+ var controls = {
87
+ alignItems: 'center',
88
+ alignSelf: 'center',
89
+ flexShrink: 0,
90
+ ml: 'auto',
91
+ pr: 'sm'
92
+ };
93
+ var iconWrapper = {
94
+ cursor: 'pointer',
95
+ display: 'flex',
96
+ flex: '1 1 0px',
97
+ ml: 'md'
98
+ };
99
+ var imageWrapper = _objectSpread(_objectSpread({}, iconWrapper), {}, {
100
+ ml: 'sm'
101
+ });
102
+ var leftOfDataWrapper = _objectSpread(_objectSpread({}, iconWrapper), {}, {
103
+ ml: 0
104
+ });
105
+ var rightOfData = {
106
+ alignSelf: 'center',
107
+ flexShrink: 0
108
+ };
78
109
  var _default = {
79
110
  container: container,
111
+ controls: controls,
112
+ iconWrapper: iconWrapper,
113
+ imageWrapper: imageWrapper,
114
+ leftOfDataWrapper: leftOfDataWrapper,
80
115
  linkedViewContainer: linkedViewContainer,
116
+ rightOfData: rightOfData,
117
+ styledContainer: styledContainer,
81
118
  styledListItem: styledListItem
82
119
  };
83
120
  exports["default"] = _default;
package/lib/cjs/components/Text/Text.styles.d.ts CHANGED
@@ -21,9 +21,9 @@ export declare const text: {
21
21
  overflowWrap: string;
22
22
  };
23
23
  bodyStrong: {
24
- fontWeight: number;
25
24
  color: string;
26
25
  fontFamily: string;
26
+ fontWeight: number;
27
27
  display: string;
28
28
  overflowWrap: string;
29
29
  maxWidth: string;
@@ -181,12 +181,12 @@ export declare const text: {
181
181
  wordBreak: string;
182
182
  };
183
183
  listTitle: {
184
+ textOverflow: string;
185
+ overflow: string;
186
+ whiteSpace: string;
184
187
  fontSize: string;
185
188
  fontWeight: number;
186
189
  color: string;
187
- whiteSpace: string;
188
- overflow: string;
189
- textOverflow: string;
190
190
  display: string;
191
191
  overflowWrap: string;
192
192
  maxWidth: string;
@@ -194,12 +194,44 @@ export declare const text: {
194
194
  wordBreak: string;
195
195
  };
196
196
  listSubtitle: {
197
+ textOverflow: string;
198
+ overflow: string;
199
+ whiteSpace: string;
197
200
  fontSize: string;
198
201
  fontWeight: number;
199
202
  color: string;
200
- whiteSpace: string;
203
+ display: string;
204
+ overflowWrap: string;
205
+ maxWidth: string;
206
+ wordWrap: string;
207
+ wordBreak: string;
208
+ };
209
+ listViewItemSubtext: {
210
+ alignSelf: string;
211
+ fontSize: string;
212
+ lineHeight: string;
213
+ my: string;
214
+ textOverflow: string;
201
215
  overflow: string;
216
+ whiteSpace: string;
217
+ color: string;
218
+ fontFamily: string;
219
+ fontWeight: number;
220
+ display: string;
221
+ overflowWrap: string;
222
+ maxWidth: string;
223
+ wordWrap: string;
224
+ wordBreak: string;
225
+ };
226
+ listViewItemText: {
227
+ alignSelf: string;
228
+ fontSize: string;
202
229
  textOverflow: string;
230
+ overflow: string;
231
+ whiteSpace: string;
232
+ color: string;
233
+ fontFamily: string;
234
+ fontWeight: number;
203
235
  display: string;
204
236
  overflowWrap: string;
205
237
  maxWidth: string;
@@ -223,9 +255,9 @@ export declare const text: {
223
255
  wordBreak: string;
224
256
  };
225
257
  subtitle: {
226
- fontWeight: number;
227
258
  color: string;
228
259
  fontFamily: string;
260
+ fontWeight: number;
229
261
  display: string;
230
262
  overflowWrap: string;
231
263
  maxWidth: string;
@@ -268,9 +300,9 @@ export declare const text: {
268
300
  wordBreak: string;
269
301
  };
270
302
  textEllipsis: {
271
- whiteSpace: string;
272
- overflow: string;
273
303
  textOverflow: string;
304
+ overflow: string;
305
+ whiteSpace: string;
274
306
  };
275
307
  title: {
276
308
  fontSize: string;
package/lib/cjs/components/Text/Text.styles.js CHANGED
@@ -74,13 +74,34 @@ var itemTitle = _objectSpread(_objectSpread({}, wordWrap), {}, {
74
74
  color: 'text.primary',
75
75
  fontFamily: 'standard'
76
76
  });
77
+ var bodyStrong = _objectSpread(_objectSpread({}, wordWrap), {}, {
78
+ color: 'text.primary',
79
+ fontFamily: 'standard',
80
+ fontWeight: 1
81
+ });
82
+ var subtitle = _objectSpread(_objectSpread({}, wordWrap), {}, {
83
+ color: 'text.secondary',
84
+ fontFamily: 'standard',
85
+ fontWeight: 0
86
+ });
87
+ var textEllipsis = {
88
+ textOverflow: 'ellipsis',
89
+ overflow: 'hidden',
90
+ whiteSpace: 'nowrap'
91
+ };
92
+ var listViewItemText = _objectSpread(_objectSpread(_objectSpread({}, bodyStrong), textEllipsis), {}, {
93
+ alignSelf: 'start',
94
+ fontSize: 'md'
95
+ });
96
+ var listViewItemSubtext = _objectSpread(_objectSpread(_objectSpread({}, subtitle), textEllipsis), {}, {
97
+ alignSelf: 'start',
98
+ fontSize: 'sm',
99
+ lineHeight: '16px',
100
+ my: '1px'
101
+ });
77
102
  var text = {
78
103
  base: base,
79
- bodyStrong: _objectSpread(_objectSpread({}, wordWrap), {}, {
80
- fontWeight: 1,
81
- color: 'text.primary',
82
- fontFamily: 'standard'
83
- }),
104
+ bodyStrong: bodyStrong,
84
105
  bodyWeak: _objectSpread(_objectSpread({}, wordWrap), {}, {
85
106
  fontSize: 'sm',
86
107
  color: 'text.secondary',
@@ -152,30 +173,22 @@ var text = {
152
173
  listTitle: _objectSpread(_objectSpread({}, wordWrap), {}, {
153
174
  fontSize: 'md',
154
175
  fontWeight: 1,
155
- color: 'text.primary',
156
- whiteSpace: 'nowrap',
157
- overflow: 'hidden',
158
- textOverflow: 'ellipsis'
159
- }),
176
+ color: 'text.primary'
177
+ }, textEllipsis),
160
178
  listSubtitle: _objectSpread(_objectSpread({}, wordWrap), {}, {
161
179
  fontSize: 'sm',
162
180
  fontWeight: 0,
163
- color: 'text.secondary',
164
- whiteSpace: 'nowrap',
165
- overflow: 'hidden',
166
- textOverflow: 'ellipsis'
167
- }),
181
+ color: 'text.secondary'
182
+ }, textEllipsis),
183
+ listViewItemSubtext: listViewItemSubtext,
184
+ listViewItemText: listViewItemText,
168
185
  placeholder: {
169
186
  fontWeight: -1,
170
187
  color: 'text.secondary',
171
188
  fontFamily: 'standard'
172
189
  },
173
190
  sectionTitle: sectionTitle,
174
- subtitle: _objectSpread(_objectSpread({}, wordWrap), {}, {
175
- fontWeight: 0,
176
- color: 'text.secondary',
177
- fontFamily: 'standard'
178
- }),
191
+ subtitle: subtitle,
179
192
  tabLabel: tabLabel,
180
193
  tableData: _objectSpread(_objectSpread({}, wordWrap), {}, {
181
194
  fontSize: 'sm',
@@ -183,11 +196,7 @@ var text = {
183
196
  color: 'text.primary',
184
197
  fontFamily: 'standard'
185
198
  }),
186
- textEllipsis: {
187
- whiteSpace: 'nowrap',
188
- overflow: 'hidden',
189
- textOverflow: 'ellipsis'
190
- },
199
+ textEllipsis: textEllipsis,
191
200
  title: title
192
201
  };
193
202
  exports.text = text;
package/lib/cjs/experimental/ListViewItem/ListViewItem.js CHANGED
@@ -1,15 +1,9 @@
1
1
  "use strict";
2
2
 
3
3
  var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
4
- var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
5
- var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
6
- var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
7
- var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
8
- var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
9
- var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
10
- var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
11
- var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
12
4
  var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
5
+ var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
6
+ var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
13
7
  var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
14
8
  _Object$defineProperty(exports, "__esModule", {
15
9
  value: true
@@ -18,7 +12,6 @@ exports["default"] = exports.LIST_ITEM_ICON = void 0;
18
12
  var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
19
13
  var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
20
14
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
21
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
22
15
  var _react = _interopRequireWildcard(require("react"));
23
16
  var _interactions = require("@react-aria/interactions");
24
17
  var _hooks = require("../../hooks");
@@ -28,62 +21,6 @@ var _react2 = require("@emotion/react");
28
21
  var _excluded = ["children", "className", "data", "isHovered", "isSelected", "linkProps", "onHoverChange", "onHoverEnd", "onHoverStart", "slots"];
29
22
  function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
30
23
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
31
- function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
32
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
33
- var truncate = {
34
- textOverflow: 'ellipsis',
35
- overflow: 'hidden',
36
- whiteSpace: 'nowrap'
37
- };
38
- var sx = {
39
- container: {
40
- m: 1,
41
- minHeight: 72,
42
- '&.is-hovered': {
43
- bg: 'white',
44
- cursor: 'pointer'
45
- }
46
- },
47
- controls: {
48
- alignSelf: 'center',
49
- ml: 'auto',
50
- pr: 'sm',
51
- flexShrink: 0
52
- },
53
- data: {
54
- alignItems: 'center'
55
- },
56
- icon: {
57
- width: 25,
58
- color: 'accent.40'
59
- },
60
- image: {
61
- width: 35
62
- },
63
- rightOfData: {
64
- alignSelf: 'center',
65
- ml: 'sm'
66
- },
67
- subtitle: _objectSpread(_objectSpread({}, truncate), {}, {
68
- alignSelf: 'start',
69
- fontSize: 'sm',
70
- lineHeight: '16px',
71
- my: '1px'
72
- }),
73
- text: {
74
- ml: 'md'
75
- },
76
- title: _objectSpread(_objectSpread({}, truncate), {}, {
77
- alignSelf: 'start',
78
- fontSize: 'md'
79
- }),
80
- wrapper: {
81
- cursor: 'pointer',
82
- display: 'flex',
83
- flex: '1 1 0px',
84
- ml: 'md'
85
- }
86
- };
87
24
  var LIST_ITEM_ICON = '-list-item-icon';
88
25
  exports.LIST_ITEM_ICON = LIST_ITEM_ICON;
89
26
  var ListViewItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
@@ -116,22 +53,15 @@ var ListViewItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
116
53
  isSelected: isSelected
117
54
  }),
118
55
  classNames = _useStatusClasses.classNames;
119
- var iff = function iff(condition, then, otherwise) {
120
- return condition ? then : otherwise;
56
+ var getWrapperVariant = function getWrapperVariant() {
57
+ if (slots !== null && slots !== void 0 && slots.leftOfData) return 'listViewItem.leftOfDataWrapper';
58
+ if (image && !icon) return 'listViewItem.imageWrapper';
59
+ return 'listViewItem.iconWrapper';
121
60
  };
122
- var wrapperStyles = slots !== null && slots !== void 0 && slots.leftOfData ? _objectSpread(_objectSpread({}, sx.wrapper), {}, {
123
- ml: 0
124
- }) : iff(!icon && image, _objectSpread(_objectSpread({}, sx.wrapper), {}, {
125
- ml: 10
126
- }), sx.wrapper);
127
- var textStyles = slots !== null && slots !== void 0 && slots.leftOfData ? _objectSpread(_objectSpread({}, sx.text), {}, {
128
- ml: 0
129
- }) : iff(!icon && image, _objectSpread(_objectSpread({}, sx.wrapper), {}, {
130
- ml: 10
131
- }), sx.wrapper);
132
61
  var renderIcon = icon && (0, _react2.jsx)(_index.Box, {
133
- sx: sx.icon
62
+ width: "25px"
134
63
  }, (0, _react2.jsx)(_index.Icon, {
64
+ color: "accent.40",
135
65
  icon: icon,
136
66
  size: "md",
137
67
  title: {
@@ -140,7 +70,7 @@ var ListViewItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
140
70
  }
141
71
  }));
142
72
  var renderImage = !icon && image && (0, _react2.jsx)(_index.Box, {
143
- sx: sx.image
73
+ width: "35px"
144
74
  }, (0, _react2.jsx)(_index.Image, {
145
75
  src: image.src,
146
76
  alt: image.alt,
@@ -148,32 +78,28 @@ var ListViewItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
148
78
  }));
149
79
  var renderData = (0, _react2.jsx)(_index.Box, {
150
80
  isRow: true,
151
- sx: sx.data
81
+ alignItems: "center"
152
82
  }, (slots === null || slots === void 0 ? void 0 : slots.leftOfData) || renderIcon || renderImage, (0, _react2.jsx)(_index.Box, {
153
- sx: textStyles
83
+ variant: getWrapperVariant()
154
84
  }, text && (0, _react2.jsx)(_index.Text, {
155
- variant: "bodyStrong",
156
- sx: sx.title
85
+ variant: "listViewItemText"
157
86
  }, text), subtext && (0, _react2.jsx)(_index.Text, {
158
- variant: "subtitle",
159
- sx: sx.subtitle
87
+ variant: "listViewItemSubtext"
160
88
  }, subtext)));
161
89
  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
162
90
  className: classNames,
163
91
  ref: ref,
164
- sx: sx.container
92
+ variant: "listViewItem.styledContainer"
165
93
  }, hoverProps, others), (0, _react2.jsx)(_index.Box, {
166
94
  isRow: true,
167
- sx: wrapperStyles
95
+ variant: getWrapperVariant()
168
96
  }, renderData, (slots === null || slots === void 0 ? void 0 : slots.rightOfData) && (0, _react2.jsx)(_index.Box, {
169
97
  isRow: true,
170
- alignSelf: "center",
171
- flexShrink: 0
98
+ variant: "listViewItem.rightOfData"
172
99
  }, slots.rightOfData), (0, _react2.jsx)(_index.Box, {
173
100
  isRow: true,
174
101
  gap: "sm",
175
- alignItems: "center",
176
- sx: sx.controls
102
+ variant: "listViewItem.controls"
177
103
  }, children)));
178
104
  });
179
105
  ListViewItem.propTypes = _listViewItemAttributes.listViewItemPropTypes;
package/lib/components/ListViewItem/ListViewItem.styles.js CHANGED
@@ -35,10 +35,6 @@ var container = {
35
35
  borderBottomColor: 'line.light'
36
36
  }
37
37
  };
38
- var styledListItem = _objectSpread(_objectSpread({}, container), {}, {
39
- padding: 0,
40
- minHeight: 0
41
- });
42
38
  var linkedViewContainer = _objectSpread(_objectSpread({}, container), {}, {
43
39
  minHeight: '75px',
44
40
  height: '76px',
@@ -68,8 +64,49 @@ var linkedViewContainer = _objectSpread(_objectSpread({}, container), {}, {
68
64
  }
69
65
  }
70
66
  });
67
+ var styledContainer = {
68
+ m: '1px',
69
+ minHeight: '72px',
70
+ '&.is-hovered': {
71
+ bg: 'white',
72
+ cursor: 'pointer'
73
+ }
74
+ };
75
+ var styledListItem = _objectSpread(_objectSpread({}, container), {}, {
76
+ minHeight: 0,
77
+ padding: 0
78
+ });
79
+ var controls = {
80
+ alignItems: 'center',
81
+ alignSelf: 'center',
82
+ flexShrink: 0,
83
+ ml: 'auto',
84
+ pr: 'sm'
85
+ };
86
+ var iconWrapper = {
87
+ cursor: 'pointer',
88
+ display: 'flex',
89
+ flex: '1 1 0px',
90
+ ml: 'md'
91
+ };
92
+ var imageWrapper = _objectSpread(_objectSpread({}, iconWrapper), {}, {
93
+ ml: 'sm'
94
+ });
95
+ var leftOfDataWrapper = _objectSpread(_objectSpread({}, iconWrapper), {}, {
96
+ ml: 0
97
+ });
98
+ var rightOfData = {
99
+ alignSelf: 'center',
100
+ flexShrink: 0
101
+ };
71
102
  export default {
72
103
  container: container,
104
+ controls: controls,
105
+ iconWrapper: iconWrapper,
106
+ imageWrapper: imageWrapper,
107
+ leftOfDataWrapper: leftOfDataWrapper,
73
108
  linkedViewContainer: linkedViewContainer,
109
+ rightOfData: rightOfData,
110
+ styledContainer: styledContainer,
74
111
  styledListItem: styledListItem
75
112
  };
package/lib/components/Text/Text.styles.js CHANGED
@@ -65,13 +65,34 @@ var itemTitle = _objectSpread(_objectSpread({}, wordWrap), {}, {
65
65
  color: 'text.primary',
66
66
  fontFamily: 'standard'
67
67
  });
68
+ var bodyStrong = _objectSpread(_objectSpread({}, wordWrap), {}, {
69
+ color: 'text.primary',
70
+ fontFamily: 'standard',
71
+ fontWeight: 1
72
+ });
73
+ var subtitle = _objectSpread(_objectSpread({}, wordWrap), {}, {
74
+ color: 'text.secondary',
75
+ fontFamily: 'standard',
76
+ fontWeight: 0
77
+ });
78
+ var textEllipsis = {
79
+ textOverflow: 'ellipsis',
80
+ overflow: 'hidden',
81
+ whiteSpace: 'nowrap'
82
+ };
83
+ var listViewItemText = _objectSpread(_objectSpread(_objectSpread({}, bodyStrong), textEllipsis), {}, {
84
+ alignSelf: 'start',
85
+ fontSize: 'md'
86
+ });
87
+ var listViewItemSubtext = _objectSpread(_objectSpread(_objectSpread({}, subtitle), textEllipsis), {}, {
88
+ alignSelf: 'start',
89
+ fontSize: 'sm',
90
+ lineHeight: '16px',
91
+ my: '1px'
92
+ });
68
93
  export var text = {
69
94
  base: base,
70
- bodyStrong: _objectSpread(_objectSpread({}, wordWrap), {}, {
71
- fontWeight: 1,
72
- color: 'text.primary',
73
- fontFamily: 'standard'
74
- }),
95
+ bodyStrong: bodyStrong,
75
96
  bodyWeak: _objectSpread(_objectSpread({}, wordWrap), {}, {
76
97
  fontSize: 'sm',
77
98
  color: 'text.secondary',
@@ -143,30 +164,22 @@ export var text = {
143
164
  listTitle: _objectSpread(_objectSpread({}, wordWrap), {}, {
144
165
  fontSize: 'md',
145
166
  fontWeight: 1,
146
- color: 'text.primary',
147
- whiteSpace: 'nowrap',
148
- overflow: 'hidden',
149
- textOverflow: 'ellipsis'
150
- }),
167
+ color: 'text.primary'
168
+ }, textEllipsis),
151
169
  listSubtitle: _objectSpread(_objectSpread({}, wordWrap), {}, {
152
170
  fontSize: 'sm',
153
171
  fontWeight: 0,
154
- color: 'text.secondary',
155
- whiteSpace: 'nowrap',
156
- overflow: 'hidden',
157
- textOverflow: 'ellipsis'
158
- }),
172
+ color: 'text.secondary'
173
+ }, textEllipsis),
174
+ listViewItemSubtext: listViewItemSubtext,
175
+ listViewItemText: listViewItemText,
159
176
  placeholder: {
160
177
  fontWeight: -1,
161
178
  color: 'text.secondary',
162
179
  fontFamily: 'standard'
163
180
  },
164
181
  sectionTitle: sectionTitle,
165
- subtitle: _objectSpread(_objectSpread({}, wordWrap), {}, {
166
- fontWeight: 0,
167
- color: 'text.secondary',
168
- fontFamily: 'standard'
169
- }),
182
+ subtitle: subtitle,
170
183
  tabLabel: tabLabel,
171
184
  tableData: _objectSpread(_objectSpread({}, wordWrap), {}, {
172
185
  fontSize: 'sm',
@@ -174,10 +187,6 @@ export var text = {
174
187
  color: 'text.primary',
175
188
  fontFamily: 'standard'
176
189
  }),
177
- textEllipsis: {
178
- whiteSpace: 'nowrap',
179
- overflow: 'hidden',
180
- textOverflow: 'ellipsis'
181
- },
190
+ textEllipsis: textEllipsis,
182
191
  title: title
183
192
  };
package/lib/experimental/ListViewItem/ListViewItem.js CHANGED
@@ -1,78 +1,13 @@
1
- import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
2
- import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
3
- import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
4
- import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
5
- import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
6
- import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
7
- import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
8
- import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
9
1
  import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
10
2
  import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
11
- import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
12
3
  var _excluded = ["children", "className", "data", "isHovered", "isSelected", "linkProps", "onHoverChange", "onHoverEnd", "onHoverStart", "slots"];
13
4
  import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
14
- function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
15
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
16
5
  import React, { forwardRef } from 'react';
17
6
  import { useHover } from '@react-aria/interactions';
18
7
  import { useStatusClasses } from '../../hooks';
19
8
  import { Box, Icon, Image, Text } from '../../index';
20
9
  import { listViewItemPropTypes } from './listViewItemAttributes';
21
10
  import { jsx as ___EmotionJSX } from "@emotion/react";
22
- var truncate = {
23
- textOverflow: 'ellipsis',
24
- overflow: 'hidden',
25
- whiteSpace: 'nowrap'
26
- };
27
- var sx = {
28
- container: {
29
- m: 1,
30
- minHeight: 72,
31
- '&.is-hovered': {
32
- bg: 'white',
33
- cursor: 'pointer'
34
- }
35
- },
36
- controls: {
37
- alignSelf: 'center',
38
- ml: 'auto',
39
- pr: 'sm',
40
- flexShrink: 0
41
- },
42
- data: {
43
- alignItems: 'center'
44
- },
45
- icon: {
46
- width: 25,
47
- color: 'accent.40'
48
- },
49
- image: {
50
- width: 35
51
- },
52
- rightOfData: {
53
- alignSelf: 'center',
54
- ml: 'sm'
55
- },
56
- subtitle: _objectSpread(_objectSpread({}, truncate), {}, {
57
- alignSelf: 'start',
58
- fontSize: 'sm',
59
- lineHeight: '16px',
60
- my: '1px'
61
- }),
62
- text: {
63
- ml: 'md'
64
- },
65
- title: _objectSpread(_objectSpread({}, truncate), {}, {
66
- alignSelf: 'start',
67
- fontSize: 'md'
68
- }),
69
- wrapper: {
70
- cursor: 'pointer',
71
- display: 'flex',
72
- flex: '1 1 0px',
73
- ml: 'md'
74
- }
75
- };
76
11
  export var LIST_ITEM_ICON = '-list-item-icon';
77
12
  var ListViewItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
78
13
  var _context, _context2;
@@ -104,22 +39,15 @@ var ListViewItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
104
39
  isSelected: isSelected
105
40
  }),
106
41
  classNames = _useStatusClasses.classNames;
107
- var iff = function iff(condition, then, otherwise) {
108
- return condition ? then : otherwise;
42
+ var getWrapperVariant = function getWrapperVariant() {
43
+ if (slots !== null && slots !== void 0 && slots.leftOfData) return 'listViewItem.leftOfDataWrapper';
44
+ if (image && !icon) return 'listViewItem.imageWrapper';
45
+ return 'listViewItem.iconWrapper';
109
46
  };
110
- var wrapperStyles = slots !== null && slots !== void 0 && slots.leftOfData ? _objectSpread(_objectSpread({}, sx.wrapper), {}, {
111
- ml: 0
112
- }) : iff(!icon && image, _objectSpread(_objectSpread({}, sx.wrapper), {}, {
113
- ml: 10
114
- }), sx.wrapper);
115
- var textStyles = slots !== null && slots !== void 0 && slots.leftOfData ? _objectSpread(_objectSpread({}, sx.text), {}, {
116
- ml: 0
117
- }) : iff(!icon && image, _objectSpread(_objectSpread({}, sx.wrapper), {}, {
118
- ml: 10
119
- }), sx.wrapper);
120
47
  var renderIcon = icon && ___EmotionJSX(Box, {
121
- sx: sx.icon
48
+ width: "25px"
122
49
  }, ___EmotionJSX(Icon, {
50
+ color: "accent.40",
123
51
  icon: icon,
124
52
  size: "md",
125
53
  title: {
@@ -128,7 +56,7 @@ var ListViewItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
128
56
  }
129
57
  }));
130
58
  var renderImage = !icon && image && ___EmotionJSX(Box, {
131
- sx: sx.image
59
+ width: "35px"
132
60
  }, ___EmotionJSX(Image, {
133
61
  src: image.src,
134
62
  alt: image.alt,
@@ -136,32 +64,28 @@ var ListViewItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
136
64
  }));
137
65
  var renderData = ___EmotionJSX(Box, {
138
66
  isRow: true,
139
- sx: sx.data
67
+ alignItems: "center"
140
68
  }, (slots === null || slots === void 0 ? void 0 : slots.leftOfData) || renderIcon || renderImage, ___EmotionJSX(Box, {
141
- sx: textStyles
69
+ variant: getWrapperVariant()
142
70
  }, text && ___EmotionJSX(Text, {
143
- variant: "bodyStrong",
144
- sx: sx.title
71
+ variant: "listViewItemText"
145
72
  }, text), subtext && ___EmotionJSX(Text, {
146
- variant: "subtitle",
147
- sx: sx.subtitle
73
+ variant: "listViewItemSubtext"
148
74
  }, subtext)));
149
75
  return ___EmotionJSX(Box, _extends({
150
76
  className: classNames,
151
77
  ref: ref,
152
- sx: sx.container
78
+ variant: "listViewItem.styledContainer"
153
79
  }, hoverProps, others), ___EmotionJSX(Box, {
154
80
  isRow: true,
155
- sx: wrapperStyles
81
+ variant: getWrapperVariant()
156
82
  }, renderData, (slots === null || slots === void 0 ? void 0 : slots.rightOfData) && ___EmotionJSX(Box, {
157
83
  isRow: true,
158
- alignSelf: "center",
159
- flexShrink: 0
84
+ variant: "listViewItem.rightOfData"
160
85
  }, slots.rightOfData), ___EmotionJSX(Box, {
161
86
  isRow: true,
162
87
  gap: "sm",
163
- alignItems: "center",
164
- sx: sx.controls
88
+ variant: "listViewItem.controls"
165
89
  }, children)));
166
90
  });
167
91
  ListViewItem.propTypes = listViewItemPropTypes;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pingux/astro",
3
- "version": "2.14.0",
3
+ "version": "2.14.1-alpha.0",
4
4
  "description": "React component library for Ping Identity's design system",
5
5
  "repository": {
6
6
  "type": "git",