@pingux/astro 1.0.0-alpha.10 → 1.0.0-alpha.11

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/CHANGELOG.md +11 -0
  2. package/lib/cjs/components/ListView/ListView.js +4 -3
  3. package/lib/cjs/components/ListViewItem/ListViewItem.js +3 -6
  4. package/lib/cjs/styles/variants/boxes.js +4 -0
  5. package/lib/components/ListView/ListView.js +4 -3
  6. package/lib/components/ListViewItem/ListViewItem.js +3 -5
  7. package/lib/styles/variants/boxes.js +4 -0
  8. package/package.json +1 -1
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
+ # [1.0.0-alpha.11](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.0.0-alpha.10...@pingux/astro@1.0.0-alpha.11) (2022-01-08)
7
+
8
+
9
+ ### Features
10
+
11
+ * [UIP-4887] ListView hides Separators on zoom ([92ca2bb](https://gitlab.corp.pingidentity.com/ux/pingux/commit/92ca2bb40bb49ce9a69eb097cc88b5e210acce8a))
12
+
13
+
14
+
15
+
16
+
6
17
  # [1.0.0-alpha.10](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.0.0-alpha.9...@pingux/astro@1.0.0-alpha.10) (2022-01-07)
7
18
 
8
19
 
package/lib/cjs/components/ListView/ListView.js CHANGED
@@ -81,18 +81,19 @@ var collectionTypes = {
81
81
  exports.collectionTypes = collectionTypes;
82
82
 
83
83
  function useListLayout(state) {
84
+ var ROW_HEIGHT = 81;
84
85
  var collator = (0, _i18n.useCollator)({
85
86
  usage: 'search',
86
87
  sensitivity: 'base'
87
88
  });
88
89
  var layout = (0, _react.useMemo)(function () {
89
90
  return new _layout.ListLayout({
90
- estimatedRowHeight: 81,
91
+ estimatedRowHeight: ROW_HEIGHT,
91
92
  estimatedHeadingHeight: 26,
92
93
  paddingRight: 4,
93
94
  paddingLeft: 4,
94
- loaderHeight: 81,
95
- placeholderHeight: 81,
95
+ loaderHeight: ROW_HEIGHT,
96
+ placeholderHeight: ROW_HEIGHT,
96
97
  collator: collator
97
98
  });
98
99
  }, [collator]);
package/lib/cjs/components/ListViewItem/ListViewItem.js CHANGED
@@ -32,8 +32,6 @@ var _ListViewContext = require("../ListView/ListViewContext");
32
32
 
33
33
  var _Box = _interopRequireDefault(require("../Box"));
34
34
 
35
- var _Separator = _interopRequireDefault(require("../Separator"));
36
-
37
35
  var _hooks = require("../../hooks");
38
36
 
39
37
  var _react2 = require("@emotion/react");
@@ -90,7 +88,8 @@ var ListViewItem = function ListViewItem(props) {
90
88
  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
91
89
  isHovered: isHovered,
92
90
  isSelected: isSelected,
93
- isFocused: isDisabled ? false : isFocusVisible
91
+ isFocused: isDisabled ? false : isFocusVisible,
92
+ hasSeparator: hasSeparator
94
93
  }),
95
94
  classNames = _useStatusClasses.classNames;
96
95
 
@@ -111,9 +110,7 @@ var ListViewItem = function ListViewItem(props) {
111
110
  isSelected: isSelected,
112
111
  className: classNames,
113
112
  "data-id": dataId
114
- }, listItemProps), item.rendered)), hasSeparator && (0, _react2.jsx)(_Separator["default"], {
115
- m: "0px"
116
- }));
113
+ }, listItemProps), item.rendered)));
117
114
  };
118
115
 
119
116
  ListViewItem.propTypes = {
package/lib/cjs/styles/variants/boxes.js CHANGED
@@ -106,6 +106,10 @@ var listViewItem = _objectSpread(_objectSpread({}, base), {}, {
106
106
  },
107
107
  '&.is-focused': {
108
108
  boxShadow: 'inset 0 0 5px #5873bdbf'
109
+ },
110
+ '&.has-separator': {
111
+ borderBottom: '1px solid',
112
+ borderBottomColor: 'line.hairline'
109
113
  }
110
114
  });
111
115
 
package/lib/components/ListView/ListView.js CHANGED
@@ -37,18 +37,19 @@ export var collectionTypes = {
37
37
  PLACEHOLDER: 'placeholder'
38
38
  };
39
39
  export function useListLayout(state) {
40
+ var ROW_HEIGHT = 81;
40
41
  var collator = useCollator({
41
42
  usage: 'search',
42
43
  sensitivity: 'base'
43
44
  });
44
45
  var layout = useMemo(function () {
45
46
  return new ListLayout({
46
- estimatedRowHeight: 81,
47
+ estimatedRowHeight: ROW_HEIGHT,
47
48
  estimatedHeadingHeight: 26,
48
49
  paddingRight: 4,
49
50
  paddingLeft: 4,
50
- loaderHeight: 81,
51
- placeholderHeight: 81,
51
+ loaderHeight: ROW_HEIGHT,
52
+ placeholderHeight: ROW_HEIGHT,
52
53
  collator: collator
53
54
  });
54
55
  }, [collator]);
package/lib/components/ListViewItem/ListViewItem.js CHANGED
@@ -8,7 +8,6 @@ import { useGridCell, useGridRow } from '@react-aria/grid';
8
8
  import { useHover } from '@react-aria/interactions';
9
9
  import { ListViewContext } from '../ListView/ListViewContext';
10
10
  import Box from '../Box';
11
- import Separator from '../Separator';
12
11
  import { useStatusClasses } from '../../hooks';
13
12
  import { jsx as ___EmotionJSX } from "@emotion/react";
14
13
 
@@ -65,7 +64,8 @@ var ListViewItem = function ListViewItem(props) {
65
64
  var _useStatusClasses = useStatusClasses(className, {
66
65
  isHovered: isHovered,
67
66
  isSelected: isSelected,
68
- isFocused: isDisabled ? false : isFocusVisible
67
+ isFocused: isDisabled ? false : isFocusVisible,
68
+ hasSeparator: hasSeparator
69
69
  }),
70
70
  classNames = _useStatusClasses.classNames;
71
71
 
@@ -86,9 +86,7 @@ var ListViewItem = function ListViewItem(props) {
86
86
  isSelected: isSelected,
87
87
  className: classNames,
88
88
  "data-id": dataId
89
- }, listItemProps), item.rendered)), hasSeparator && ___EmotionJSX(Separator, {
90
- m: "0px"
91
- }));
89
+ }, listItemProps), item.rendered)));
92
90
  };
93
91
 
94
92
  ListViewItem.propTypes = {
package/lib/styles/variants/boxes.js CHANGED
@@ -85,6 +85,10 @@ var listViewItem = _objectSpread(_objectSpread({}, base), {}, {
85
85
  },
86
86
  '&.is-focused': {
87
87
  boxShadow: 'inset 0 0 5px #5873bdbf'
88
+ },
89
+ '&.has-separator': {
90
+ borderBottom: '1px solid',
91
+ borderBottomColor: 'line.hairline'
88
92
  }
89
93
  });
90
94
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pingux/astro",
3
- "version": "1.0.0-alpha.10",
3
+ "version": "1.0.0-alpha.11",
4
4
  "description": "PingUX themeable React component library",
5
5
  "author": "uxdev@pingidentity.com",
6
6
  "license": "Apache-2.0",