@pingux/astro 2.140.0-alpha.2 → 2.140.0-alpha.4

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 (14) hide show
  1. package/lib/cjs/components/DataTable/DataTable.js +13 -10
  2. package/lib/cjs/styles/themeOverrides/nextGenDarkMode/colors.d.ts +1 -0
  3. package/lib/cjs/styles/themeOverrides/nextGenDarkMode/colors.js +2 -1
  4. package/lib/cjs/styles/themes/astro/customProperties/icons.js +1 -1
  5. package/lib/cjs/styles/themes/next-gen/next-gen.d.ts +5 -0
  6. package/lib/cjs/styles/themes/next-gen/variants/dataTable.d.ts +5 -0
  7. package/lib/cjs/styles/themes/next-gen/variants/dataTable.js +5 -0
  8. package/lib/cjs/styles/themes/next-gen/variants/variants.d.ts +5 -0
  9. package/lib/cjs/types/dataTable.d.ts +2 -0
  10. package/lib/components/DataTable/DataTable.js +13 -10
  11. package/lib/styles/themeOverrides/nextGenDarkMode/colors.js +2 -1
  12. package/lib/styles/themes/astro/customProperties/icons.js +1 -1
  13. package/lib/styles/themes/next-gen/variants/dataTable.js +5 -0
  14. package/package.json +1 -1
package/lib/cjs/components/DataTable/DataTable.js CHANGED
@@ -33,7 +33,7 @@ var _useGetTheme3 = _interopRequireDefault(require("../../hooks/useGetTheme"));
33
33
  var _index = require("../../index");
34
34
  var _DataTableVirtualizer = _interopRequireDefault(require("./DataTableVirtualizer"));
35
35
  var _react2 = require("@emotion/react");
36
- var _excluded = ["defaultSelectedKeys", "selectionMode", "selectedKeys"],
36
+ var _excluded = ["defaultSelectedKeys", "selectionMode", "selectedKeys", "containerProps"],
37
37
  _excluded2 = ["children"],
38
38
  _excluded3 = ["children"],
39
39
  _excluded4 = ["item", "children", "hasActions"];
@@ -69,6 +69,7 @@ var DataTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
69
69
  defaultSelectedKeys = _props$defaultSelecte === void 0 ? [] : _props$defaultSelecte,
70
70
  selectionMode = props.selectionMode,
71
71
  selectedKeys = props.selectedKeys,
72
+ containerProps = props.containerProps,
72
73
  others = (0, _objectWithoutProperties2["default"])(props, _excluded);
73
74
  var direction = 'ltr';
74
75
  var onAction = props.onAction,
@@ -246,9 +247,9 @@ var DataTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
246
247
  }
247
248
  };
248
249
  var mergedProps = (0, _reactAria.mergeProps)(gridProps, focusProps);
249
- return (0, _react2.jsx)(_index.Box, {
250
+ return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
250
251
  variant: "dataTable.container"
251
- }, (0, _react2.jsx)(_DataTableContext.DataTableContext.Provider, {
252
+ }, containerProps), (0, _react2.jsx)(_DataTableContext.DataTableContext.Provider, {
252
253
  value: {
253
254
  state: state,
254
255
  layout: layout,
@@ -291,24 +292,26 @@ var TableColumnHeader = function TableColumnHeader(props) {
291
292
  var _useDataTableContext = (0, _DataTableContext.useDataTableContext)(),
292
293
  state = _useDataTableContext.state;
293
294
  var _useGetTheme2 = (0, _useGetTheme3["default"])(),
294
- icons = _useGetTheme2.icons;
295
- var MenuUp = icons.MenuUp,
296
- MenuDown = icons.MenuDown;
295
+ icons = _useGetTheme2.icons,
296
+ isOnyx = _useGetTheme2.themeState.isOnyx;
297
+ var Ascending = icons.Ascending,
298
+ Descending = icons.Descending;
297
299
  var _useTableColumnHeader = (0, _table.useTableColumnHeader)({
298
300
  node: column,
299
301
  isVirtualized: true
300
302
  }, state, ref),
301
303
  columnHeaderProps = _useTableColumnHeader.columnHeaderProps;
302
304
  var columnProps = column.props;
305
+ var iconSize = isOnyx ? 16 : 24;
303
306
  var arrowIcon = ((_state$sortDescriptor = state.sortDescriptor) === null || _state$sortDescriptor === void 0 ? void 0 : _state$sortDescriptor.direction) === 'ascending' && column.key === ((_state$sortDescriptor2 = state.sortDescriptor) === null || _state$sortDescriptor2 === void 0 ? void 0 : _state$sortDescriptor2.column) ? (0, _react2.jsx)(_index.Icon, {
304
- size: 24,
305
- icon: MenuUp,
307
+ size: iconSize,
308
+ icon: Ascending,
306
309
  title: {
307
310
  name: 'Menu Up Icon'
308
311
  }
309
312
  }) : (0, _react2.jsx)(_index.Icon, {
310
- size: 24,
311
- icon: MenuDown,
313
+ size: iconSize,
314
+ icon: Descending,
312
315
  color: "active",
313
316
  title: {
314
317
  name: 'Menu Down Icon'
package/lib/cjs/styles/themeOverrides/nextGenDarkMode/colors.d.ts CHANGED
@@ -42,6 +42,7 @@ export declare const colors: {
42
42
  };
43
43
  font: {
44
44
  base: string;
45
+ light: string;
45
46
  };
46
47
  badge: {
47
48
  background: string;
package/lib/cjs/styles/themeOverrides/nextGenDarkMode/colors.js CHANGED
@@ -26,7 +26,8 @@ var overrides = {
26
26
  };
27
27
  exports.overrides = overrides;
28
28
  var font = {
29
- base: _colorTokens.nextGenColors['gray-100']
29
+ base: _colorTokens.nextGenColors['gray-100'],
30
+ light: _colorTokens.nextGenColors['gray-400']
30
31
  };
31
32
  var hoverDark = _chromaJs["default"].mix('#23282e', 'white', 0.04, 'rgb').hex();
32
33
  var border = {
package/lib/cjs/styles/themes/astro/customProperties/icons.js CHANGED
@@ -31,5 +31,5 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
31
31
  var _default = (_MenuDown$MenuUp$stat = {
32
32
  MenuDown: _MenuDownIcon["default"],
33
33
  MenuUp: _MenuUpIcon["default"]
34
- }, (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses["default"].DEFAULT, _InformationIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses["default"].ERROR, _AlertCircleIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses["default"].SUCCESS, _CheckCircleIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses["default"].WARNING, _AlertIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses.statusIcon.INFO, _InformationOutlineIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses.statusIcon.CRITICAL, _AlertCircleOutlineIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses.statusIcon.MAJOR, _ArrowUpIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses.statusIcon.MINOR, _ArrowDownIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses.statusIcon.WARNING_NEUTRAL, _AlertOutlineIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses.statusIcon.FATAL, _CloseOctagonOutlineIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, "pingLogoHorizontalSmall", _logos.pingLogoHorizontalSmallWhite), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, "listViewMenu", _MoreVertIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, "Ascending", _ArrowUpIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, "Descending", _ArrowDownIcon["default"]), _MenuDown$MenuUp$stat);
34
+ }, (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses["default"].DEFAULT, _InformationIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses["default"].ERROR, _AlertCircleIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses["default"].SUCCESS, _CheckCircleIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses["default"].WARNING, _AlertIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses.statusIcon.INFO, _InformationOutlineIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses.statusIcon.CRITICAL, _AlertCircleOutlineIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses.statusIcon.MAJOR, _ArrowUpIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses.statusIcon.MINOR, _ArrowDownIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses.statusIcon.WARNING_NEUTRAL, _AlertOutlineIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, _statuses.statusIcon.FATAL, _CloseOctagonOutlineIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, "pingLogoHorizontalSmall", _logos.pingLogoHorizontalSmallWhite), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, "listViewMenu", _MoreVertIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, "Ascending", _MenuUpIcon["default"]), (0, _defineProperty2["default"])(_MenuDown$MenuUp$stat, "Descending", _MenuDownIcon["default"]), _MenuDown$MenuUp$stat);
35
35
  exports["default"] = _default;
package/lib/cjs/styles/themes/next-gen/next-gen.d.ts CHANGED
@@ -3940,6 +3940,11 @@ declare const _default: {
3940
3940
  px: string;
3941
3941
  fontWeight: string;
3942
3942
  fontSize: string;
3943
+ '&.is-column-sortable': {
3944
+ svg: {
3945
+ fill: string;
3946
+ };
3947
+ };
3943
3948
  '&.is-first-column': {
3944
3949
  borderTopLeftRadius: string;
3945
3950
  };
package/lib/cjs/styles/themes/next-gen/variants/dataTable.d.ts CHANGED
@@ -45,6 +45,11 @@ export declare const dataTable: {
45
45
  px: string;
46
46
  fontWeight: string;
47
47
  fontSize: string;
48
+ '&.is-column-sortable': {
49
+ svg: {
50
+ fill: string;
51
+ };
52
+ };
48
53
  '&.is-first-column': {
49
54
  borderTopLeftRadius: string;
50
55
  };
package/lib/cjs/styles/themes/next-gen/variants/dataTable.js CHANGED
@@ -58,6 +58,11 @@ var dataTable = {
58
58
  px: 'lg',
59
59
  fontWeight: '2',
60
60
  fontSize: 'md',
61
+ '&.is-column-sortable': {
62
+ 'svg': {
63
+ fill: 'font.light'
64
+ }
65
+ },
61
66
  '&.is-first-column': {
62
67
  borderTopLeftRadius: '16px'
63
68
  },
package/lib/cjs/styles/themes/next-gen/variants/variants.d.ts CHANGED
@@ -591,6 +591,11 @@ declare const _default: {
591
591
  px: string;
592
592
  fontWeight: string;
593
593
  fontSize: string;
594
+ '&.is-column-sortable': {
595
+ svg: {
596
+ fill: string;
597
+ };
598
+ };
594
599
  '&.is-first-column': {
595
600
  borderTopLeftRadius: string;
596
601
  };
package/lib/cjs/types/dataTable.d.ts CHANGED
@@ -3,6 +3,7 @@ import { Layout, ReusableView } from '@react-stately/virtualizer';
3
3
  import type { GridNode } from '@react-types/grid';
4
4
  import type { ColumnSize, TableCollection } from '@react-types/table';
5
5
  import { BadgeProps } from './badge';
6
+ import { BoxProps } from './box';
6
7
  import { IconTypeExtended } from './icon';
7
8
  import { loadingState } from './shared';
8
9
  export interface DataTableBadgeProps extends BadgeProps {
@@ -68,6 +69,7 @@ export interface DataTableProps {
68
69
  width?: string | number;
69
70
  children: ReactNode;
70
71
  scale?: 'large' | 'medium' | 'xl';
72
+ containerProps?: BoxProps;
71
73
  }
72
74
  export interface DataTableCellProps {
73
75
  cell: GridNode<object>;
package/lib/components/DataTable/DataTable.js CHANGED
@@ -10,7 +10,7 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
10
10
  import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
11
11
  import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
12
12
  import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
13
- var _excluded = ["defaultSelectedKeys", "selectionMode", "selectedKeys"],
13
+ var _excluded = ["defaultSelectedKeys", "selectionMode", "selectedKeys", "containerProps"],
14
14
  _excluded2 = ["children"],
15
15
  _excluded3 = ["children"],
16
16
  _excluded4 = ["item", "children", "hasActions"];
@@ -58,6 +58,7 @@ var DataTable = /*#__PURE__*/forwardRef(function (props, ref) {
58
58
  defaultSelectedKeys = _props$defaultSelecte === void 0 ? [] : _props$defaultSelecte,
59
59
  selectionMode = props.selectionMode,
60
60
  selectedKeys = props.selectedKeys,
61
+ containerProps = props.containerProps,
61
62
  others = _objectWithoutProperties(props, _excluded);
62
63
  var direction = 'ltr';
63
64
  var onAction = props.onAction,
@@ -235,9 +236,9 @@ var DataTable = /*#__PURE__*/forwardRef(function (props, ref) {
235
236
  }
236
237
  };
237
238
  var mergedProps = mergeProps(gridProps, focusProps);
238
- return ___EmotionJSX(Box, {
239
+ return ___EmotionJSX(Box, _extends({
239
240
  variant: "dataTable.container"
240
- }, ___EmotionJSX(DataTableContext.Provider, {
241
+ }, containerProps), ___EmotionJSX(DataTableContext.Provider, {
241
242
  value: {
242
243
  state: state,
243
244
  layout: layout,
@@ -280,24 +281,26 @@ var TableColumnHeader = function TableColumnHeader(props) {
280
281
  var _useDataTableContext = useDataTableContext(),
281
282
  state = _useDataTableContext.state;
282
283
  var _useGetTheme2 = useGetTheme(),
283
- icons = _useGetTheme2.icons;
284
- var MenuUp = icons.MenuUp,
285
- MenuDown = icons.MenuDown;
284
+ icons = _useGetTheme2.icons,
285
+ isOnyx = _useGetTheme2.themeState.isOnyx;
286
+ var Ascending = icons.Ascending,
287
+ Descending = icons.Descending;
286
288
  var _useTableColumnHeader = useTableColumnHeader({
287
289
  node: column,
288
290
  isVirtualized: true
289
291
  }, state, ref),
290
292
  columnHeaderProps = _useTableColumnHeader.columnHeaderProps;
291
293
  var columnProps = column.props;
294
+ var iconSize = isOnyx ? 16 : 24;
292
295
  var arrowIcon = ((_state$sortDescriptor = state.sortDescriptor) === null || _state$sortDescriptor === void 0 ? void 0 : _state$sortDescriptor.direction) === 'ascending' && column.key === ((_state$sortDescriptor2 = state.sortDescriptor) === null || _state$sortDescriptor2 === void 0 ? void 0 : _state$sortDescriptor2.column) ? ___EmotionJSX(Icon, {
293
- size: 24,
294
- icon: MenuUp,
296
+ size: iconSize,
297
+ icon: Ascending,
295
298
  title: {
296
299
  name: 'Menu Up Icon'
297
300
  }
298
301
  }) : ___EmotionJSX(Icon, {
299
- size: 24,
300
- icon: MenuDown,
302
+ size: iconSize,
303
+ icon: Descending,
301
304
  color: "active",
302
305
  title: {
303
306
  name: 'Menu Down Icon'
package/lib/styles/themeOverrides/nextGenDarkMode/colors.js CHANGED
@@ -18,7 +18,8 @@ export var overrides = {
18
18
  disabled: '#30373f'
19
19
  };
20
20
  var font = {
21
- base: nextGenColors['gray-100']
21
+ base: nextGenColors['gray-100'],
22
+ light: nextGenColors['gray-400']
22
23
  };
23
24
  var hoverDark = chroma.mix('#23282e', 'white', 0.04, 'rgb').hex();
24
25
  var border = {
package/lib/styles/themes/astro/customProperties/icons.js CHANGED
@@ -18,4 +18,4 @@ import statuses, { statusIcon } from '../../../../utils/devUtils/constants/statu
18
18
  export default (_MenuDown$MenuUp$stat = {
19
19
  MenuDown: MenuDown,
20
20
  MenuUp: MenuUp
21
- }, _defineProperty(_MenuDown$MenuUp$stat, statuses.DEFAULT, InformationIcon), _defineProperty(_MenuDown$MenuUp$stat, statuses.ERROR, AlertCircleIcon), _defineProperty(_MenuDown$MenuUp$stat, statuses.SUCCESS, CheckCircleIcon), _defineProperty(_MenuDown$MenuUp$stat, statuses.WARNING, AlertIcon), _defineProperty(_MenuDown$MenuUp$stat, statusIcon.INFO, InformationOutlineIcon), _defineProperty(_MenuDown$MenuUp$stat, statusIcon.CRITICAL, AlertCircleOutlineIcon), _defineProperty(_MenuDown$MenuUp$stat, statusIcon.MAJOR, ArrowUpIcon), _defineProperty(_MenuDown$MenuUp$stat, statusIcon.MINOR, ArrowDownIcon), _defineProperty(_MenuDown$MenuUp$stat, statusIcon.WARNING_NEUTRAL, AlertOutlineIcon), _defineProperty(_MenuDown$MenuUp$stat, statusIcon.FATAL, CloseOctagonOutlineIcon), _defineProperty(_MenuDown$MenuUp$stat, "pingLogoHorizontalSmall", pingLogoHorizontalSmallWhite), _defineProperty(_MenuDown$MenuUp$stat, "listViewMenu", MoreVertIcon), _defineProperty(_MenuDown$MenuUp$stat, "Ascending", ArrowUpIcon), _defineProperty(_MenuDown$MenuUp$stat, "Descending", ArrowDownIcon), _MenuDown$MenuUp$stat);
21
+ }, _defineProperty(_MenuDown$MenuUp$stat, statuses.DEFAULT, InformationIcon), _defineProperty(_MenuDown$MenuUp$stat, statuses.ERROR, AlertCircleIcon), _defineProperty(_MenuDown$MenuUp$stat, statuses.SUCCESS, CheckCircleIcon), _defineProperty(_MenuDown$MenuUp$stat, statuses.WARNING, AlertIcon), _defineProperty(_MenuDown$MenuUp$stat, statusIcon.INFO, InformationOutlineIcon), _defineProperty(_MenuDown$MenuUp$stat, statusIcon.CRITICAL, AlertCircleOutlineIcon), _defineProperty(_MenuDown$MenuUp$stat, statusIcon.MAJOR, ArrowUpIcon), _defineProperty(_MenuDown$MenuUp$stat, statusIcon.MINOR, ArrowDownIcon), _defineProperty(_MenuDown$MenuUp$stat, statusIcon.WARNING_NEUTRAL, AlertOutlineIcon), _defineProperty(_MenuDown$MenuUp$stat, statusIcon.FATAL, CloseOctagonOutlineIcon), _defineProperty(_MenuDown$MenuUp$stat, "pingLogoHorizontalSmall", pingLogoHorizontalSmallWhite), _defineProperty(_MenuDown$MenuUp$stat, "listViewMenu", MoreVertIcon), _defineProperty(_MenuDown$MenuUp$stat, "Ascending", MenuUp), _defineProperty(_MenuDown$MenuUp$stat, "Descending", MenuDown), _MenuDown$MenuUp$stat);
package/lib/styles/themes/next-gen/variants/dataTable.js CHANGED
@@ -51,6 +51,11 @@ export var dataTable = {
51
51
  px: 'lg',
52
52
  fontWeight: '2',
53
53
  fontSize: 'md',
54
+ '&.is-column-sortable': {
55
+ 'svg': {
56
+ fill: 'font.light'
57
+ }
58
+ },
54
59
  '&.is-first-column': {
55
60
  borderTopLeftRadius: '16px'
56
61
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pingux/astro",
3
- "version": "2.140.0-alpha.2",
3
+ "version": "2.140.0-alpha.4",
4
4
  "description": "React component library for Ping Identity's design system",
5
5
  "repository": {
6
6
  "type": "git",