@scality/core-ui 0.121.0 → 0.123.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 (102) hide show
  1. package/.storybook/preview.js +29 -8
  2. package/dist/components/card/Card.component.d.ts.map +1 -1
  3. package/dist/components/card/Card.component.js +7 -5
  4. package/dist/components/checkbox/Checkbox.component.d.ts +7 -0
  5. package/dist/components/checkbox/Checkbox.component.d.ts.map +1 -1
  6. package/dist/components/checkbox/Checkbox.component.js +2 -0
  7. package/dist/components/constrainedtext/Constrainedtext.component.d.ts.map +1 -1
  8. package/dist/components/constrainedtext/Constrainedtext.component.js +1 -4
  9. package/dist/components/emptystate/Emptystate.component.d.ts +11 -1
  10. package/dist/components/emptystate/Emptystate.component.d.ts.map +1 -1
  11. package/dist/components/emptystate/Emptystate.component.js +9 -4
  12. package/dist/components/icon/Icon.component.d.ts +2 -2
  13. package/dist/components/icon/Icon.component.d.ts.map +1 -1
  14. package/dist/components/infomessage/InfoMessageUtils.d.ts +1 -1
  15. package/dist/components/infomessage/InfoMessageUtils.d.ts.map +1 -1
  16. package/dist/components/infomessage/InfoMessageUtils.js +5 -4
  17. package/dist/components/layout/v2/AppContainer.js +1 -1
  18. package/dist/components/linetemporalchart/LineTemporalChart.component.d.ts.map +1 -1
  19. package/dist/components/linetemporalchart/LineTemporalChart.component.js +1 -2
  20. package/dist/components/navbar/Navbar.component.d.ts.map +1 -1
  21. package/dist/components/navbar/Navbar.component.js +1 -0
  22. package/dist/components/searchinput/SearchInput.component.d.ts +2 -1
  23. package/dist/components/searchinput/SearchInput.component.d.ts.map +1 -1
  24. package/dist/components/selectv2/Selectv2.component.d.ts +1 -1
  25. package/dist/components/selectv2/Selectv2.component.d.ts.map +1 -1
  26. package/dist/components/selectv2/Selectv2.component.js +10 -7
  27. package/dist/components/sidebar/Sidebar.component.d.ts.map +1 -1
  28. package/dist/components/sidebar/Sidebar.component.js +2 -1
  29. package/dist/components/steppers/Steppers.component.d.ts.map +1 -1
  30. package/dist/components/steppers/Steppers.component.js +9 -3
  31. package/dist/components/tablev2/MultiSelectableContent.d.ts +1 -2
  32. package/dist/components/tablev2/MultiSelectableContent.d.ts.map +1 -1
  33. package/dist/components/tablev2/MultiSelectableContent.js +9 -24
  34. package/dist/components/tablev2/Search.d.ts +0 -6
  35. package/dist/components/tablev2/Search.d.ts.map +1 -1
  36. package/dist/components/tablev2/Search.js +3 -4
  37. package/dist/components/tablev2/SingleSelectableContent.d.ts +4 -5
  38. package/dist/components/tablev2/SingleSelectableContent.d.ts.map +1 -1
  39. package/dist/components/tablev2/SingleSelectableContent.js +9 -23
  40. package/dist/components/tablev2/TableCommon.d.ts +15 -3
  41. package/dist/components/tablev2/TableCommon.d.ts.map +1 -1
  42. package/dist/components/tablev2/TableCommon.js +37 -2
  43. package/dist/components/tablev2/TableUtils.d.ts +11 -0
  44. package/dist/components/tablev2/TableUtils.d.ts.map +1 -1
  45. package/dist/components/tablev2/TableUtils.js +23 -0
  46. package/dist/components/tablev2/Tablestyle.d.ts +6 -3
  47. package/dist/components/tablev2/Tablestyle.d.ts.map +1 -1
  48. package/dist/components/tablev2/Tablestyle.js +29 -36
  49. package/dist/components/tablev2/Tablev2.component.d.ts +24 -3
  50. package/dist/components/tablev2/Tablev2.component.d.ts.map +1 -1
  51. package/dist/components/tablev2/Tablev2.component.js +3 -1
  52. package/dist/components/tabsv2/StyledTabs.d.ts.map +1 -1
  53. package/dist/components/tabsv2/StyledTabs.js +14 -14
  54. package/dist/components/toast/Toast.component.d.ts.map +1 -1
  55. package/dist/components/toast/Toast.component.js +1 -1
  56. package/dist/components/toast/useMutationsHandler.d.ts +1 -1
  57. package/dist/components/toast/useMutationsHandler.d.ts.map +1 -1
  58. package/dist/components/toast/useMutationsHandler.js +8 -6
  59. package/dist/components/vegachartv2/VegaChartV2.component.js +1 -1
  60. package/dist/organisms/attachments/AttachmentConfirmationModal.d.ts.map +1 -1
  61. package/dist/organisms/attachments/AttachmentConfirmationModal.js +1 -1
  62. package/dist/organisms/attachments/AttachmentTable.d.ts.map +1 -1
  63. package/dist/organisms/attachments/AttachmentTable.js +15 -12
  64. package/package.json +5 -3
  65. package/src/lib/components/card/Card.component.tsx +7 -6
  66. package/src/lib/components/checkbox/Checkbox.component.tsx +3 -1
  67. package/src/lib/components/constrainedtext/Constrainedtext.component.tsx +1 -4
  68. package/src/lib/components/emptystate/Emptystate.component.tsx +34 -10
  69. package/src/lib/components/icon/Icon.component.tsx +2 -2
  70. package/src/lib/components/infomessage/InfoMessageUtils.ts +39 -33
  71. package/src/lib/components/layout/v2/AppContainer.tsx +1 -1
  72. package/src/lib/components/linetemporalchart/LineTemporalChart.component.tsx +1 -2
  73. package/src/lib/components/navbar/Navbar.component.tsx +1 -0
  74. package/src/lib/components/searchinput/SearchInput.component.tsx +1 -0
  75. package/src/lib/components/selectv2/Selectv2.component.tsx +12 -8
  76. package/src/lib/components/selectv2/selectv2.test.tsx +193 -5
  77. package/src/lib/components/sidebar/Sidebar.component.tsx +3 -2
  78. package/src/lib/components/steppers/Steppers.component.tsx +13 -3
  79. package/src/lib/components/tablev2/MultiSelectableContent.tsx +13 -63
  80. package/src/lib/components/tablev2/Search.tsx +13 -24
  81. package/src/lib/components/tablev2/SingleSelectableContent.tsx +18 -71
  82. package/src/lib/components/tablev2/TableCommon.tsx +100 -1
  83. package/src/lib/components/tablev2/TableUtils.ts +37 -0
  84. package/src/lib/components/tablev2/Tablestyle.tsx +30 -37
  85. package/src/lib/components/tablev2/Tablev2.component.tsx +14 -0
  86. package/src/lib/components/tablev2/Tablev2.test.tsx +0 -3
  87. package/src/lib/components/tabsv2/StyledTabs.ts +16 -14
  88. package/src/lib/components/toast/Toast.component.tsx +1 -0
  89. package/src/lib/components/toast/useMutationsHandler.ts +4 -2
  90. package/src/lib/components/vegachartv2/VegaChartV2.component.tsx +1 -1
  91. package/src/lib/organisms/attachments/AttachmentConfirmationModal.tsx +0 -1
  92. package/src/lib/organisms/attachments/AttachmentTable.tsx +25 -16
  93. package/stories/Checkbox/checkbox.guideline.mdx +55 -0
  94. package/stories/Checkbox/checkbox.stories.tsx +173 -0
  95. package/stories/Hooks/useMutationsHandler.mdx +121 -0
  96. package/stories/attachment.stories.tsx +78 -0
  97. package/stories/common.tsx +12 -6
  98. package/stories/emptystate.stories.tsx +1 -2
  99. package/stories/form.stories.tsx +1 -3
  100. package/stories/modal.stories.tsx +0 -2
  101. package/stories/tablev2.stories.tsx +131 -52
  102. package/stories/checkbox.stories.tsx +0 -63
@@ -3,7 +3,7 @@ import { QueryClient, QueryClientProvider } from 'react-query';
3
3
  import { CoreUiThemeProvider } from '../src/lib/next';
4
4
  import { brand, coreUIAvailableThemes } from '../src/lib/style/theme';
5
5
  import { Wrapper } from '../stories/common';
6
- import { ToastProvider } from '../src/lib';
6
+ import { ScrollbarWrapper, ToastProvider } from '../src/lib';
7
7
 
8
8
  export const globalTypes = {
9
9
  theme: {
@@ -12,27 +12,47 @@ export const globalTypes = {
12
12
  defaultValue: 'darkRebrand',
13
13
  toolbar: {
14
14
  title: 'Preview Theme',
15
- dynamicTitle: false,
15
+ dynamicTitle: true,
16
16
  // array of plain string values or MenuItem shape (see below)
17
17
  items: [
18
- { value: 'darkRebrand', title: 'Dark', icon: 'moon' },
19
- { value: 'artescaLight', title: 'Light', icon: 'sun' },
20
- { value: 'ring9dark', title: 'Ring Dark', icon: 'moon' },
18
+ { value: 'darkRebrand', title: ' A-Dark', icon: 'moon' },
19
+ { value: 'artescaLight', title: 'A-Light', icon: 'sun' },
20
+ { value: 'ring9dark', title: 'R-Dark', icon: 'moon' },
21
21
  ],
22
22
  },
23
23
  },
24
+ background: {
25
+ name: 'Background Level',
26
+ description: 'Background for the wrapper',
27
+ toolbar: {
28
+ title: 'Background Level',
29
+ items: [
30
+ { value: 'backgroundLevel1', title: 'backgroundLevel 1' },
31
+ { value: 'backgroundLevel2', title: 'backgroundLevel 2' },
32
+ { value: 'backgroundLevel3', title: 'backgroundLevel 3' },
33
+ { value: 'backgroundLevel4', title: 'backgroundLevel 4' },
34
+ ],
35
+ dynamicTitle: true,
36
+ },
37
+ },
24
38
  };
25
-
26
39
  const withThemeProvider = (Story, context) => {
27
40
  const theme = coreUIAvailableThemes[context.globals.theme];
41
+ const { background } = context.globals;
28
42
  const { viewMode } = context;
29
43
  return (
30
44
  <QueryClientProvider client={new QueryClient()}>
31
45
  <CoreUiThemeProvider theme={theme}>
32
46
  {/* Wrapper to make the stories take the full screen but not in docs */}
33
- <div style={viewMode === 'story' ? { height: 100 + 'vh' } : null}>
47
+ <div
48
+ style={
49
+ viewMode === 'story'
50
+ ? { height: 100 + 'vh', overflow: 'scroll' }
51
+ : null
52
+ }
53
+ >
34
54
  <ToastProvider>
35
- <Wrapper>
55
+ <Wrapper style={{ backgroundColor: background }}>
36
56
  <Story {...context} />
37
57
  </Wrapper>
38
58
  </ToastProvider>
@@ -58,6 +78,7 @@ export const parameters = {
58
78
  matchers: {
59
79
  color: /color/i,
60
80
  },
81
+ exclude: ['data-cy'],
61
82
  },
62
83
  options: {
63
84
  storySort: {
@@ -1 +1 @@
1
- {"version":3,"file":"Card.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/card/Card.component.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKlC,KAAK,gBAAgB,GAAG;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAmDF,eAAO,MAAM,UAAU,qCAhDqB,gBAAgB,gBAgDC,CAAC;AAC9D,eAAO,MAAM,QAAQ,qCAjDuB,gBAAgB,gBAiDH,CAAC;AAC1D,eAAO,MAAM,iBAAiB,qCAlDc,gBAAgB,gBAkDe,CAAC;AAmD5E,KAAK,SAAS,GAAG;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;IAC5C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,SAAS,CAAC,cAAc,CAAC,CAAC;AAC9B,iBAAS,IAAI,CAAC,EACZ,KAAc,EACd,MAAe,EACf,qBAAyC,EACzC,mBAAwC,EACxC,MAAa,EACb,OAAc,EACd,MAAc,EACd,QAAgB,EAChB,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,SAAS,eA6CX;kBAzDQ,IAAI;;;;;AA6Db,OAAO,EAAE,IAAI,EAAE,CAAC"}
1
+ {"version":3,"file":"Card.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/card/Card.component.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMlC,KAAK,gBAAgB,GAAG;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAmDF,eAAO,MAAM,UAAU,qCAhDqB,gBAAgB,gBAgDC,CAAC;AAC9D,eAAO,MAAM,QAAQ,qCAjDuB,gBAAgB,gBAiDH,CAAC;AAC1D,eAAO,MAAM,iBAAiB,qCAlDc,gBAAgB,gBAkDe,CAAC;AAoD5E,KAAK,SAAS,GAAG;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;IAC5C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,SAAS,CAAC,cAAc,CAAC,CAAC;AAC9B,iBAAS,IAAI,CAAC,EACZ,KAAc,EACd,MAAe,EACf,qBAAyC,EACzC,mBAAwC,EACxC,MAAa,EACb,OAAc,EACd,MAAc,EACd,QAAgB,EAChB,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,SAAS,eA4CX;kBAxDQ,IAAI;;;;;AA4Db,OAAO,EAAE,IAAI,EAAE,CAAC"}
@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { createContext } from 'react';
3
3
  import styled, { css } from 'styled-components';
4
4
  import { FocusVisibleStyle } from '../buttonv2/Buttonv2.component';
5
+ import { hex2RGB } from '../../utils';
5
6
  const CardContext = createContext(null);
6
7
  function withCompoundCheck(Component) {
7
8
  return ({ children, className, ...rest }) => (_jsx(CardContext.Consumer, { children: (value) => {
@@ -51,8 +52,10 @@ const StyledCard = styled.div `
51
52
 
52
53
  ${StyledCardHeader} {
53
54
  color: ${(props) => props.theme.textPrimary};
54
- background: ${(props) => props.theme[props.colorStatus || props.headerBackgroundColor]};
55
- opacity: ${(props) => props.colorStatus && props.colorStatus !== 'backgroundLevel4' ? 0.4 : 1};
55
+ background: ${(props) => props.colorStatus
56
+ ? `rgba(${hex2RGB(props.theme[props.colorStatus]).join(',')}, 0.7)`
57
+ : props.theme[props.headerBackgroundColor]};
58
+
56
59
  ${(props) => props.disabled && 'opacity: 0.3;'}
57
60
  }
58
61
 
@@ -79,9 +82,8 @@ function Card({ width = 'auto', height = 'auto', headerBackgroundColor = 'button
79
82
  let colorStatus = null;
80
83
  if (status) {
81
84
  colorStatus =
82
- status === 'healthy'
83
- ? 'backgroundLevel4'
84
- : 'status' + status.replace(/^\w/, (c) => c.toUpperCase());
85
+ status != 'healthy' &&
86
+ 'status' + status.replace(/^\w/, (c) => c.toUpperCase());
85
87
  }
86
88
  return (_jsx(CardContext.Provider, { value: true, children: _jsx(StyledCard, { className: [`sc-card ${active ? 'active' : ''}`, className].join(' '), width: width, height: height, headerBackgroundColor: headerBackgroundColor, bodyBackgroundColor: bodyBackgroundColor, colorStatus: colorStatus, activeBorderColor: !status || status === 'healthy' ? 'selectedActive' : colorStatus, disabled: disabled, role: onClick && !disabled ? 'button' : null, "aria-pressed": onClick && !disabled ? active : null, tabIndex: onClick && !disabled ? 0 : null, onClick: !disabled ? onClick : undefined, active: active, onKeyDown: (event) => {
87
89
  if (!disabled &&
@@ -1,4 +1,11 @@
1
1
  import { ChangeEvent, InputHTMLAttributes } from 'react';
2
+ export type Props = {
3
+ label?: string;
4
+ value?: string;
5
+ checked?: boolean;
6
+ disabled?: boolean;
7
+ onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
8
+ } & InputHTMLAttributes<HTMLInputElement>;
2
9
  declare const Checkbox: import("react").ForwardRefExoticComponent<{
3
10
  label?: string | undefined;
4
11
  value?: string | undefined;
@@ -1 +1 @@
1
- {"version":3,"file":"Checkbox.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/checkbox/Checkbox.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAc,MAAM,OAAO,CAAC;AAerE,QAAA,MAAM,QAAQ;;;;;oBAHG,YAAY,gBAAgB,CAAC,KAAK,IAAI;4FA0BtD,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC"}
1
+ {"version":3,"file":"Checkbox.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/checkbox/Checkbox.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAc,MAAM,OAAO,CAAC;AAOrE,MAAM,MAAM,KAAK,GAAG;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CACvD,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;AAE1C,QAAA,MAAM,QAAQ;;;;;oBAHG,YAAY,gBAAgB,CAAC,KAAK,IAAI;4FA0BtD,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC"}
@@ -18,6 +18,8 @@ const StyledCheckbox = styled.label `
18
18
  color: ${(props) => props.theme.textPrimary};
19
19
  vertical-align: middle;
20
20
  -webkit-appearance: none;
21
+ -moz-appearance: none;
22
+ appearance: none;
21
23
  background: none;
22
24
  border: 0;
23
25
  outline: 0;
@@ -1 +1 @@
1
- {"version":3,"file":"Constrainedtext.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/constrainedtext/Constrainedtext.component.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAK9C,OAAO,EAAE,KAAK,IAAI,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAErE,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IACpD,YAAY,CAAC,EAAE,aAAa,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC;IAC3D,gBAAgB,CAAC,EAAE,aAAa,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAiDF,iBAAS,eAAe,CAAC,EACvB,IAAI,EACJ,YAAY,EACZ,gBAAgB,EAChB,SAAa,GACd,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAuBrB;AAED,OAAO,EAAE,eAAe,EAAE,CAAC"}
1
+ {"version":3,"file":"Constrainedtext.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/constrainedtext/Constrainedtext.component.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAK9C,OAAO,EAAE,KAAK,IAAI,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAErE,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IACpD,YAAY,CAAC,EAAE,aAAa,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC;IAC3D,gBAAgB,CAAC,EAAE,aAAa,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AA8CF,iBAAS,eAAe,CAAC,EACvB,IAAI,EACJ,YAAY,EACZ,gBAAgB,EAChB,SAAa,GACd,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAuBrB;AAED,OAAO,EAAE,eAAe,EAAE,CAAC"}
@@ -17,10 +17,7 @@ const ConstrainedTextContainer = styled.div `
17
17
  overflow-wrap: break-word;
18
18
  `
19
19
  : `overflow-wrap: break-word;
20
- white-space: nowrap;`}
21
- }
22
-
23
- ;
20
+ white-space: nowrap;`};
24
21
  `;
25
22
  const BlockTooltip = styled.div `
26
23
  width: stretch;
@@ -1,10 +1,20 @@
1
1
  /// <reference types="react" />
2
2
  import { IconName } from '../icon/Icon.component';
3
+ import { CoreUITheme } from '../../style/theme';
3
4
  type Props = {
4
- label: string;
5
+ listedResource: {
6
+ singular: string;
7
+ plural: string;
8
+ };
5
9
  icon: IconName;
6
10
  link?: string;
7
11
  history?: Record<string, any>;
12
+ backgroundColor?: keyof CoreUITheme;
13
+ /**
14
+ * The resource to create before browsing the listed resource
15
+ * Only used when resource to create is different from listed resource
16
+ */
17
+ resourceToCreate?: string;
8
18
  };
9
19
  export declare const EmptyStateRow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
10
20
  export declare const ActionWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
@@ -1 +1 @@
1
- {"version":3,"file":"Emptystate.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/emptystate/Emptystate.component.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAQ,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAExD,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CAC/B,CAAC;AAaF,eAAO,MAAM,aAAa,yGAIzB,CAAC;AACF,eAAO,MAAM,aAAa,yGAGzB,CAAC;AAEF,iBAAS,UAAU,CAAC,KAAK,EAAE,KAAK,eA6B/B;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}
1
+ {"version":3,"file":"Emptystate.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/emptystate/Emptystate.component.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAQ,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAExD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,KAAK,KAAK,GAAG;IACX,cAAc,EAAE;QACd,QAAQ,EAAE,MAAM,CAAC;QACjB,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC9B,eAAe,CAAC,EAAE,MAAM,WAAW,CAAC;IACpC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAgBF,eAAO,MAAM,aAAa,yGAIzB,CAAC;AACF,eAAO,MAAM,aAAa,yGAGzB,CAAC;AAEF,iBAAS,UAAU,CAAC,KAAK,EAAE,KAAK,eAwC/B;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}
@@ -6,9 +6,12 @@ import { Icon } from '../icon/Icon.component';
6
6
  import { LargeText } from '../text/Text.component';
7
7
  const EmptystateContainer = styled.div `
8
8
  ${(props) => {
9
- const brand = props.theme;
9
+ const { theme, backgroundColor } = props;
10
10
  return css `
11
- color: ${brand.textSecondary};
11
+ color: ${theme.textSecondary};
12
+ background-color: ${backgroundColor
13
+ ? theme[backgroundColor]
14
+ : 'transparent'};
12
15
  `;
13
16
  }}
14
17
  display: flex;
@@ -26,7 +29,9 @@ export const ActionWrapper = styled.div `
26
29
  justify-content: space-around;
27
30
  `;
28
31
  function EmptyState(props) {
29
- const { icon, label, link, history } = props;
30
- return (_jsxs(EmptystateContainer, { className: "sc-emptystate", children: [_jsx(EmptyStateRow, { children: _jsx(Icon, { name: icon, color: "infoPrimary", size: "5x", withWrapper: true }) }), _jsx(EmptyStateRow, { children: _jsxs(LargeText, { children: ["A list of ", `${label}s`, " will appear here."] }) }), _jsx(EmptyStateRow, { children: _jsxs(LargeText, { children: ["There are no ", `${label}s`, " created yet, let's create your first", ' ', label, "."] }) }), history && (_jsx(ActionWrapper, { children: _jsx(Button, { label: `Create ${label}`, icon: _jsx(Icon, { name: "Create-add" }), type: "button", variant: "primary", onClick: () => history.push(link) }) }))] }));
32
+ const { icon, listedResource, link, history, resourceToCreate, backgroundColor, } = props;
33
+ return (_jsxs(EmptystateContainer, { className: "sc-emptystate", backgroundColor: backgroundColor, children: [_jsx(EmptyStateRow, { children: _jsx(Icon, { name: icon, color: "infoPrimary", size: "5x", withWrapper: true }) }), _jsx(EmptyStateRow, { children: _jsx(LargeText, { children: `A list of ${listedResource.plural} will appear here.` }) }), _jsx(EmptyStateRow, { children: _jsx(LargeText, { children: !resourceToCreate
34
+ ? `There are no ${listedResource.plural} created yet, let's create your first ${listedResource.singular}.`
35
+ : `Before browsing your ${listedResource.plural}, create your first ${resourceToCreate}.` }) }), history && (_jsx(ActionWrapper, { children: _jsx(Button, { label: `Create ${resourceToCreate || listedResource.singular}`, icon: _jsx(Icon, { name: "Create-add" }), type: "button", variant: "primary", onClick: () => history.push(link) }) }))] }));
31
36
  }
32
37
  export { EmptyState };
@@ -1,5 +1,5 @@
1
1
  import { CSSProperties } from 'react';
2
- import { brand } from '../../style/theme';
2
+ import { CoreUITheme } from '../../style/theme';
3
3
  import { SizeProp } from '@fortawesome/fontawesome-svg-core';
4
4
  export declare const iconTable: {
5
5
  Account: string;
@@ -118,7 +118,7 @@ export declare const iconTable: {
118
118
  Setting: string;
119
119
  };
120
120
  export type IconName = keyof typeof iconTable;
121
- export type IconColor = keyof typeof brand;
121
+ export type IconColor = keyof CoreUITheme;
122
122
  type Props = {
123
123
  name: IconName;
124
124
  size?: SizeProp;
@@ -1 +1 @@
1
- {"version":3,"file":"Icon.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/icon/Icon.component.tsx"],"names":[],"mappings":"AAAA,OAAc,EACZ,aAAa,EAKd,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAI1C,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAG7D,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmHrB,CAAC;AAaF,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,SAAS,CAAC;AAC9C,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,KAAK,CAAC;AAC3C,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAiBF,eAAO,MAAM,WAAW;UAAsB,QAAQ;SAiCrD,CAAC;AAkEF,iBAAS,IAAI,CAAC,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,eAU7C;AAED,OAAO,EAAE,IAAI,EAAE,CAAC"}
1
+ {"version":3,"file":"Icon.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/icon/Icon.component.tsx"],"names":[],"mappings":"AAAA,OAAc,EACZ,aAAa,EAKd,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIhD,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAG7D,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmHrB,CAAC;AAaF,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,SAAS,CAAC;AAC9C,MAAM,MAAM,SAAS,GAAG,MAAM,WAAW,CAAC;AAC1C,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAiBF,eAAO,MAAM,WAAW;UAAsB,QAAQ;SAiCrD,CAAC;AAkEF,iBAAS,IAAI,CAAC,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,eAU7C;AAED,OAAO,EAAE,IAAI,EAAE,CAAC"}
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
- import { DefaultTheme } from "styled-components";
2
+ import { DefaultTheme } from 'styled-components';
3
3
  export declare const useComputeBackgroundColor: () => {
4
4
  containerRef: import("react").MutableRefObject<HTMLDivElement | null>;
5
5
  backgroundColor: string;
@@ -1 +1 @@
1
- {"version":3,"file":"InfoMessageUtils.d.ts","sourceRoot":"","sources":["../../../src/lib/components/infomessage/InfoMessageUtils.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAY,MAAM,mBAAmB,CAAC;AAI3D,eAAO,MAAM,yBAAyB;;;CAcnC,CAAC;AAEJ,eAAO,MAAM,kBAAkB,YAAa,WAAW,SAAS,YAAY,QAkBzE,CAAC"}
1
+ {"version":3,"file":"InfoMessageUtils.d.ts","sourceRoot":"","sources":["../../../src/lib/components/infomessage/InfoMessageUtils.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAY,MAAM,mBAAmB,CAAC;AAI3D,eAAO,MAAM,yBAAyB;;;CAcrC,CAAC;AAEF,eAAO,MAAM,kBAAkB,YACpB,WAAW,SACb,YAAY,QAsBpB,CAAC"}
@@ -1,6 +1,6 @@
1
- import { useTheme } from "styled-components";
2
- import { hex2RGB } from "../../utils";
3
- import { useEffect, useRef, useState } from "react";
1
+ import { useTheme } from 'styled-components';
2
+ import { hex2RGB } from '../../utils';
3
+ import { useEffect, useRef, useState } from 'react';
4
4
  export const useComputeBackgroundColor = () => {
5
5
  const theme = useTheme();
6
6
  const containerRef = useRef(null);
@@ -17,7 +17,8 @@ export const useComputeBackgroundColor = () => {
17
17
  export const getBackgroundColor = (element, theme) => {
18
18
  if (element.parentElement) {
19
19
  const parentElementBackgroundColor = window.getComputedStyle(element.parentElement)['background-color'];
20
- if (/rgba\([0-9]+, [0-9]+, [0-9]+, 0\)/.test(parentElementBackgroundColor) || !window.getComputedStyle(element.parentElement)['background-color']) {
20
+ if (/rgba\([0-9]+, [0-9]+, [0-9]+, 0\)/.test(parentElementBackgroundColor) ||
21
+ !window.getComputedStyle(element.parentElement)['background-color']) {
21
22
  return getBackgroundColor(element.parentElement, theme);
22
23
  }
23
24
  else {
@@ -27,7 +27,7 @@ const ContextWrapper = styled.div `
27
27
  const ContextContainer = ({ children, background, ...rest }) => (_jsx(ContextWrapper, { background: background, children: _jsx(FillAvailableFlexBox, { ...rest, children: children }) }));
28
28
  const OverallSummaryContainer = styled.div `
29
29
  background: ${(props) => props.theme[props.background || 'backgroundLevel2']};
30
- height: 6rem;
30
+ min-height: 6rem;
31
31
  padding: ${({ noPadding }) => (noPadding ? '0' : '0 1rem')};
32
32
  margin-bottom: ${({ noBottomMargin }) => noBottomMargin ? '0' : sectionDistance};
33
33
  margin-top: ${({ hasTopMargin }) => (hasTopMargin ? '1rem' : '0')};
@@ -1 +1 @@
1
- {"version":3,"file":"LineTemporalChart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/linetemporalchart/LineTemporalChart.component.tsx"],"names":[],"mappings":";AAoCA,eAAO,MAAM,sBAAsB,uBAAuB,CAAC;AAC3D,eAAO,MAAM,kBAAkB,mBAAmB,CAAC;AACnD,eAAO,MAAM,aAAa;;;GAqBzB,CAAC;AA+BF,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,EAAE,MAAM,CAAC;IAEjB,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;IAEhC,eAAe,EAAE,CAAC,YAAY,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAEtE,cAAc,CAAC,EAAE,CAAC,YAAY,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAEtE,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AACF,MAAM,MAAM,cAAc,GAAG;IAC3B,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,iBAAiB,EAAE,MAAM,CAAC;IAE1B,SAAS,CAAC,EAAE;QACV,SAAS,EAAE,MAAM,CAAC;QAClB,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,aAAa,CAAC;IACrD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAChC,OAAO,CAAC,EAAE,CAAC,SAAS,EAAE,GAAG,KAAK,IAAI,CAAC;IACnC,kBAAkB,CAAC,EAAE,CACnB,IAAI,EAAE;QACJ,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,YAAY,CAAC,EAAE,OAAO,CAAC;QACvB,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,GAAG,EAAE,MAAM,CAAC;QACZ,SAAS,EAAE,MAAM,CAAC;KACnB,EACD,WAAW,EAAE,GAAG,KACb,MAAM,CAAC;CACb,CAAC;AAkCF,iBAAS,iBAAiB,CAAC,EACzB,MAAM,EACN,KAAK,EACL,MAAM,EACN,iBAAiB,EACjB,SAAS,EACT,SAAiB,EACjB,cAAsB,EACtB,SAAqB,EACrB,UAAU,EACV,QAAQ,EACR,kBAAkB,EAClB,OAAO,EACP,GAAG,IAAI,EACR,EAAE,cAAc,eAqmBhB;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAC"}
1
+ {"version":3,"file":"LineTemporalChart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/linetemporalchart/LineTemporalChart.component.tsx"],"names":[],"mappings":";AAoCA,eAAO,MAAM,sBAAsB,uBAAuB,CAAC;AAC3D,eAAO,MAAM,kBAAkB,mBAAmB,CAAC;AACnD,eAAO,MAAM,aAAa;;;GAqBzB,CAAC;AA+BF,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,EAAE,MAAM,CAAC;IAEjB,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;IAEhC,eAAe,EAAE,CAAC,YAAY,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAEtE,cAAc,CAAC,EAAE,CAAC,YAAY,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAEtE,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AACF,MAAM,MAAM,cAAc,GAAG;IAC3B,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,iBAAiB,EAAE,MAAM,CAAC;IAE1B,SAAS,CAAC,EAAE;QACV,SAAS,EAAE,MAAM,CAAC;QAClB,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,aAAa,CAAC;IACrD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAChC,OAAO,CAAC,EAAE,CAAC,SAAS,EAAE,GAAG,KAAK,IAAI,CAAC;IACnC,kBAAkB,CAAC,EAAE,CACnB,IAAI,EAAE;QACJ,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,YAAY,CAAC,EAAE,OAAO,CAAC;QACvB,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,GAAG,EAAE,MAAM,CAAC;QACZ,SAAS,EAAE,MAAM,CAAC;KACnB,EACD,WAAW,EAAE,GAAG,KACb,MAAM,CAAC;CACb,CAAC;AAkCF,iBAAS,iBAAiB,CAAC,EACzB,MAAM,EACN,KAAK,EACL,MAAM,EACN,iBAAiB,EACjB,SAAS,EACT,SAAiB,EACjB,cAAsB,EACtB,SAAqB,EACrB,UAAU,EACV,QAAQ,EACR,kBAAkB,EAClB,OAAO,EACP,GAAG,IAAI,EACR,EAAE,cAAc,eAomBhB;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAC"}
@@ -205,8 +205,7 @@ function LineTemporalChart({ series, title, height, startingTimeStamp, unitRange
205
205
  //https://vega.github.io/vega-lite/docs/datetime.html
206
206
  },
207
207
  color: {
208
- value: theme.highlight,
209
- opacity: 0.3,
208
+ value: theme.selectedActive,
210
209
  },
211
210
  /*
212
211
  According to the design, the vertical ruler should be hided when the mouse points out of the graph area.
@@ -1 +1 @@
1
- {"version":3,"file":"Navbar.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/navbar/Navbar.component.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAY,IAAI,EAAE,MAAM,gCAAgC,CAAC;AAGhE,KAAK,MAAM,GAAG;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;CACrB,CAAC;AACF,KAAK,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;AAC7B,KAAK,GAAG,GAAG;IACT,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC9B,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACtB,CAAC;AACF,MAAM,MAAM,KAAK,GAAG;IAClB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,YAAY,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;CACnB,CAAC;AA2JF,iBAAS,MAAM,CAAC,EACd,aAAa,EACb,IAAI,EACJ,IAAS,EACT,YAAiB,EACjB,GAAG,IAAI,EACR,EAAE,KAAK,eAwDP;AAED,eAAO,MAAM,MAAM,eAAS,CAAC"}
1
+ {"version":3,"file":"Navbar.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/navbar/Navbar.component.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAY,IAAI,EAAE,MAAM,gCAAgC,CAAC;AAGhE,KAAK,MAAM,GAAG;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;CACrB,CAAC;AACF,KAAK,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;AAC7B,KAAK,GAAG,GAAG;IACT,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC9B,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACtB,CAAC;AACF,MAAM,MAAM,KAAK,GAAG;IAClB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,YAAY,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;CACnB,CAAC;AA4JF,iBAAS,MAAM,CAAC,EACd,aAAa,EACb,IAAI,EACJ,IAAS,EACT,YAAiB,EACjB,GAAG,IAAI,EACR,EAAE,KAAK,eAwDP;AAED,eAAO,MAAM,MAAM,eAAS,CAAC"}
@@ -20,6 +20,7 @@ const NavbarContainer = styled.div `
20
20
  color: ${getThemePropSelector('textPrimary')};
21
21
  }
22
22
  border-bottom: 0.5px solid ${(props) => props.theme.backgroundLevel3};
23
+ box-sizing: border-box;
23
24
  `};
24
25
  `;
25
26
  const NavbarMenu = styled.div `
@@ -1,3 +1,4 @@
1
+ import React from 'react';
1
2
  import { ChangeEvent } from 'react';
2
3
  import { InputSize } from '../inputv2/inputv2';
3
4
  export type Props = {
@@ -10,6 +11,6 @@ export type Props = {
10
11
  id?: string;
11
12
  size?: InputSize;
12
13
  };
13
- declare const SearchInput: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<unknown>>;
14
+ declare const SearchInput: React.ForwardRefExoticComponent<Props & React.RefAttributes<unknown>>;
14
15
  export { SearchInput };
15
16
  //# sourceMappingURL=SearchInput.component.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"SearchInput.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/searchinput/SearchInput.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAA2C,MAAM,OAAO,CAAC;AAG7E,OAAO,EAAS,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAGtD,MAAM,MAAM,KAAK,GAAG;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACrD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC;AAuCF,QAAA,MAAM,WAAW,2FAsFhB,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}
1
+ {"version":3,"file":"SearchInput.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/searchinput/SearchInput.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAA2C,MAAM,OAAO,CAAC;AAG7E,OAAO,EAAS,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAGtD,MAAM,MAAM,KAAK,GAAG;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACrD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC;AAuCF,QAAA,MAAM,WAAW,uEAsFhB,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}
@@ -5,7 +5,7 @@ export type OptionProps = {
5
5
  icon?: React.ReactNode;
6
6
  children?: React.ReactNode;
7
7
  value: string;
8
- disabledReason?: JSX.Element;
8
+ disabledReason?: React.ReactNode;
9
9
  };
10
10
  export declare function Option({ value, children, disabled, icon, disabledReason, ...rest }: OptionProps): JSX.Element;
11
11
  export type SelectProps = {
@@ -1 +1 @@
1
- {"version":3,"file":"Selectv2.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/selectv2/Selectv2.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAcf,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CAC9B,CAAC;AAkBF,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,cAAc,EACd,GAAG,IAAI,EACR,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CA0B3B;AAyND,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC,IAAI,CAAC,EAAE,GAAG,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;CACrC,CAAC;AAgBF,iBAAS,uBAAuB,CAAC,KAAK,EAAE,WAAW,eAyBlD;kBAzBQ,uBAAuB;;;AAiKhC,eAAO,MAAM,MAAM,gCAA0B,CAAC"}
1
+ {"version":3,"file":"Selectv2.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/selectv2/Selectv2.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAcf,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAClC,CAAC;AAkBF,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,cAAc,EACd,GAAG,IAAI,EACR,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CA0B3B;AA6ND,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC,IAAI,CAAC,EAAE,GAAG,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;CACrC,CAAC;AAgBF,iBAAS,uBAAuB,CAAC,KAAK,EAAE,WAAW,eAyBlD;kBAzBQ,uBAAuB;;;AAiKhC,eAAO,MAAM,MAAM,gCAA0B,CAAC"}
@@ -50,12 +50,7 @@ export function Option({ value, children, disabled, icon, disabledReason, ...res
50
50
  return _jsx(_Fragment, {});
51
51
  }
52
52
  const Input = (props) => {
53
- const ariaProps = {
54
- role: props.selectProps.isSearchable ? 'combobox' : 'listbox',
55
- 'aria-expanded': props.selectProps.menuIsOpen,
56
- 'aria-autocomplete': 'list',
57
- };
58
- return _jsx(components.Input, { ...props, ...ariaProps });
53
+ return _jsx(components.Input, { ...props });
59
54
  };
60
55
  const selectDropdownIndicator = (caretType, indicatorDirection) => {
61
56
  if (caretType === 'chevron') {
@@ -171,7 +166,15 @@ const MenuList = (props) => {
171
166
  const ValueContainer = ({ children, ...props }) => {
172
167
  const selectedOption = props.selectProps.selectedOption;
173
168
  const icon = selectedOption ? selectedOption.icon : null;
174
- return (_jsxs(components.ValueContainer, { ...props, children: [icon ? _jsx("div", { className: "value-container-icon", children: icon }) : null, _jsx("div", { children: children })] }));
169
+ const ariaProps = {
170
+ innerProps: {
171
+ role: props.selectProps.isSearchable ? 'combobox' : 'listbox',
172
+ 'aria-expanded': props.selectProps.menuIsOpen,
173
+ 'aria-autocomplete': 'list',
174
+ 'aria-label': props.selectProps.placeholder,
175
+ },
176
+ };
177
+ return (_jsxs(components.ValueContainer, { ...props, ...ariaProps, children: [icon ? _jsx("div", { className: "value-container-icon", children: icon }) : null, _jsx("div", { children: children })] }));
175
178
  };
176
179
  const OptionContext = createContext(null);
177
180
  function SelectWithOptionContext(props) {
@@ -1 +1 @@
1
- {"version":3,"file":"Sidebar.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/sidebar/Sidebar.component.tsx"],"names":[],"mappings":";AAaA,KAAK,IAAI,GAAG;IACV,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACpB,CAAC;AACF,KAAK,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;AACzB,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,KAAK,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B,CAAC;AACF,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAwIF,iBAAS,OAAO,CAAC,EACf,QAAQ,EACR,OAAO,EACP,aAAa,EACb,SAAS,EACT,GAAG,IAAI,EACR,EAAE,KAAK,eA8DP;AAED,OAAO,EAAE,OAAO,EAAE,CAAC"}
1
+ {"version":3,"file":"Sidebar.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/sidebar/Sidebar.component.tsx"],"names":[],"mappings":";AAaA,KAAK,IAAI,GAAG;IACV,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACpB,CAAC;AACF,KAAK,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;AACzB,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,KAAK,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B,CAAC;AACF,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAyIF,iBAAS,OAAO,CAAC,EACf,QAAQ,EACR,OAAO,EACP,aAAa,EACb,SAAS,EACT,GAAG,IAAI,EACR,EAAE,KAAK,eA8DP;AAED,OAAO,EAAE,OAAO,EAAE,CAAC"}
@@ -7,6 +7,7 @@ import { Icon } from '../icon/Icon.component';
7
7
  import { spacing } from '../../spacing';
8
8
  import { FocusVisibleStyle } from '../buttonv2/Buttonv2.component';
9
9
  const Wrapper = styled.div `
10
+ margin-top: 1px;
10
11
  flex-shrink: 0;
11
12
  ${(props) => {
12
13
  const { backgroundLevel1, textPrimary } = props.theme;
@@ -18,7 +19,6 @@ const Wrapper = styled.div `
18
19
  }
19
20
  `;
20
21
  }}
21
- margin-top: 1px;
22
22
  border-right: 1px solid ${(props) => props.theme.backgroundLevel3};
23
23
  ${(props) => {
24
24
  if (props.expanded) {
@@ -41,6 +41,7 @@ const Wrapper = styled.div `
41
41
  height: 100%;
42
42
  background-color: ${backgroundLevel1};
43
43
  z-index: ${zIndex.sidebar};
44
+ border-right: 1px solid ${(props) => props.theme.backgroundLevel3};
44
45
  }
45
46
  `;
46
47
  }
@@ -1 +1 @@
1
- {"version":3,"file":"Steppers.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/steppers/Steppers.component.tsx"],"names":[],"mappings":";AAMA,KAAK,SAAS,GAAG;IACf,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AACF,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAsHF,iBAAS,QAAQ,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,eAiBtD;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}
1
+ {"version":3,"file":"Steppers.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/steppers/Steppers.component.tsx"],"names":[],"mappings":";AAMA,KAAK,SAAS,GAAG;IACf,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AACF,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAgIF,iBAAS,QAAQ,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,eAiBtD;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}
@@ -22,6 +22,7 @@ const Circle = styled.div `
22
22
  display: flex;
23
23
  justify-content: center;
24
24
  align-items: center;
25
+ line-height: 30px;
25
26
  width: 30px;
26
27
  height: 30px;
27
28
  border-radius: 50%;
@@ -58,13 +59,14 @@ const Circle = styled.div `
58
59
  }};
59
60
  `;
60
61
  const StepHeader = styled.span `
61
- padding: 8px;
62
+ margin-left: ${spacing.r8};
63
+ line-height: 30px;
62
64
  color: ${(props) => props.active
63
65
  ? getThemePropSelector('textPrimary')
64
66
  : getThemePropSelector('textSecondary')};
65
67
  `;
66
68
  const StepContent = styled.div `
67
- padding: ${spacing.r8};
69
+ padding: ${spacing.r8} 0 ${spacing.r8} ${spacing.r8};
68
70
  `;
69
71
  const BottomBar = styled.hr `
70
72
  flex-grow: 1;
@@ -88,7 +90,11 @@ const BottomBar = styled.hr `
88
90
  function Step(props) {
89
91
  const { title, content, active, completed, isLast, index = 0, error, inProgress, } = props;
90
92
  const circleContent = completed ? _jsx(Icon, { name: "Check" }) : index + 1;
91
- return (_jsxs(StepContainer, { children: [_jsxs(Panel, { children: [_jsx(Circle, { active: active, error: error, completed: completed, children: active && inProgress ? (_jsx(Loader, { size: "base" })) : (_jsx("span", { children: circleContent })) }), !isLast && _jsx(BottomBar, { completed: completed })] }), _jsxs(Panel, { children: [_jsx(StepHeader, { active: active, children: title }), active && _jsx(StepContent, { children: content })] })] }));
93
+ return (_jsxs(StepContainer, { children: [_jsxs(Panel, { children: [_jsx(Circle, { active: active, error: error, completed: completed, children: active && inProgress ? (_jsx(Loader, { size: "base" })) : (_jsx("span", { children: circleContent })) }), !isLast && _jsx(BottomBar, { completed: completed })] }), _jsxs(Panel, { children: [_jsx("div", { style: {
94
+ height: '30px',
95
+ display: 'flex',
96
+ alignItems: 'center',
97
+ }, children: _jsx(StepHeader, { active: active, children: title }) }), active && _jsx(StepContent, { children: content })] })] }));
92
98
  }
93
99
  function Steppers({ steps, activeStep, ...rest }) {
94
100
  return (_jsx(SteppersContainer, { className: "sc-steppers", ...rest, children: steps.map(({ title, content, ...stepRest }, index) => (_jsx(Step, { title: title, content: content, active: index === activeStep, completed: index < activeStep, isLast: index === steps.length - 1, index: index, ...stepRest }, index))) }));
@@ -7,7 +7,6 @@ type MultiSelectableContentProps<DATA_ROW extends Record<string, unknown> = Reco
7
7
  onToggleAll?: (selected: boolean) => void;
8
8
  rowHeight?: TableHeightKeyType;
9
9
  separationLineVariant?: TableVariantType;
10
- backgroundVariant?: TableVariantType;
11
10
  locale?: TableLocalType;
12
11
  customItemKey?: (index: number, data: DATA_ROW) => string;
13
12
  hasScrollbar?: boolean;
@@ -17,6 +16,6 @@ type MultiSelectableContentProps<DATA_ROW extends Record<string, unknown> = Reco
17
16
  /**
18
17
  * FIXME Need to spend time to change the type to something like this
19
18
  */
20
- export declare const MultiSelectableContent: <DATA_ROW extends Record<string, unknown> = Record<string, unknown>>({ onMultiSelectionChanged, onSingleRowSelected, onToggleAll, rowHeight, separationLineVariant, backgroundVariant, locale, customItemKey, isLoadingMoreItems, children, }: MultiSelectableContentProps<DATA_ROW>) => JSX.Element;
19
+ export declare const MultiSelectableContent: <DATA_ROW extends Record<string, unknown> = Record<string, unknown>>({ onMultiSelectionChanged, onSingleRowSelected, onToggleAll, rowHeight, separationLineVariant, locale, customItemKey, isLoadingMoreItems, children, }: MultiSelectableContentProps<DATA_ROW>) => JSX.Element;
21
20
  export {};
22
21
  //# sourceMappingURL=MultiSelectableContent.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"MultiSelectableContent.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tablev2/MultiSelectableContent.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAWlC,OAAO,EACL,kBAAkB,EAClB,cAAc,EACd,gBAAgB,EACjB,MAAM,cAAc,CAAC;AAqBtB,KAAK,2BAA2B,CAC9B,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAChE;IACF,uBAAuB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,CAAC,QAAQ,CAAC,EAAE,KAAK,IAAI,CAAC;IAC1D,mBAAmB,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC,QAAQ,CAAC,KAAK,IAAI,CAAC;IACnD,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1C,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B,qBAAqB,CAAC,EAAE,gBAAgB,CAAC;IACzC,iBAAiB,CAAC,EAAE,gBAAgB,CAAC;IACrC,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,KAAK,MAAM,CAAC;IAC1D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,CAAC,OAAO,KAAK,GAAG,CAAC,OAAO,CAAC;CAC/C,CAAC;AAEF;;GAEG;AAcH,eAAO,MAAM,sBAAsB,sSAwQlC,CAAC"}
1
+ {"version":3,"file":"MultiSelectableContent.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tablev2/MultiSelectableContent.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAUlC,OAAO,EACL,kBAAkB,EAClB,cAAc,EACd,gBAAgB,EACjB,MAAM,cAAc,CAAC;AAOtB,KAAK,2BAA2B,CAC9B,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAChE;IACF,uBAAuB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,CAAC,QAAQ,CAAC,EAAE,KAAK,IAAI,CAAC;IAC1D,mBAAmB,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC,QAAQ,CAAC,KAAK,IAAI,CAAC;IACnD,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1C,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B,qBAAqB,CAAC,EAAE,gBAAgB,CAAC;IAEzC,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,KAAK,MAAM,CAAC;IAC1D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,CAAC,OAAO,KAAK,GAAG,CAAC,OAAO,CAAC;CAC/C,CAAC;AAEF;;GAEG;AAaH,eAAO,MAAM,sBAAsB,mRAsOlC,CAAC"}
@@ -2,20 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
2
2
  import { useEffect, memo } from 'react';
3
3
  import { areEqual } from 'react-window';
4
4
  import { useTableContext } from './Tablev2.component';
5
- import { HeadRow, NoResult, SortCaret, TableBody, TableHeader, TableRowMultiSelectable, } from './Tablestyle';
6
- import { useTableScrollbar, VirtualizedRows } from './TableCommon';
5
+ import { HeadRow, SortCaret, TableBody, TableHeader, TableRowMultiSelectable, } from './Tablestyle';
6
+ import { TableRows, useTableScrollbar } from './TableCommon';
7
7
  import useSyncedScroll from './useSyncedScroll';
8
8
  import { Box } from '../box/Box';
9
9
  import { Loader } from '../loader/Loader.component';
10
10
  import { spacing } from '../../spacing';
11
- const translations = {
12
- en: {
13
- noResult: 'No results found',
14
- },
15
- fr: {
16
- noResult: `Aucun résultat`,
17
- },
18
- };
19
11
  /**
20
12
  * FIXME Need to spend time to change the type to something like this
21
13
  */
@@ -23,15 +15,14 @@ const translations = {
23
15
  // onMultiSelectionChanged: (rows: Row<ENTRY>[]) => void;
24
16
  // rowHeight?: TableHeightKeyType;
25
17
  // separationLineVariant?: TableVariantType;
26
- // backgroundVariant?: TableVariantType;
27
18
  // customItemKey?: (index: Number, data: ENTRY) => string;
28
19
  // } & ({
29
20
  // locale: TableLocalType;
30
21
  // } | {
31
22
  // children: (rows: JSX.Element) => JSX.Element;
32
23
  // });
33
- export const MultiSelectableContent = ({ onMultiSelectionChanged, onSingleRowSelected, onToggleAll, rowHeight = 'h40', separationLineVariant = 'backgroundLevel3', backgroundVariant = 'backgroundLevel1', locale = 'en', customItemKey, isLoadingMoreItems, children, }) => {
34
- const { headerGroups, prepareRow, rows, setRowHeight, setHiddenColumns, selectedRowIds, onBottom, onBottomOffset, isAllRowsSelected, toggleAllRowsSelected, } = useTableContext();
24
+ export const MultiSelectableContent = ({ onMultiSelectionChanged, onSingleRowSelected, onToggleAll, rowHeight = 'h40', separationLineVariant = 'backgroundLevel3', locale = 'en', customItemKey, isLoadingMoreItems, children, }) => {
25
+ const { headerGroups, prepareRow, rows, setRowHeight, setHiddenColumns, selectedRowIds, isAllRowsSelected, toggleAllRowsSelected, } = useTableContext();
35
26
  useEffect(() => {
36
27
  setRowHeight(rowHeight);
37
28
  }, [rowHeight, setRowHeight]);
@@ -57,14 +48,8 @@ export const MultiSelectableContent = ({ onMultiSelectionChanged, onSingleRowSel
57
48
  }
58
49
  currentRow.toggleRowSelected(!currentRow.isSelected);
59
50
  };
60
- const { hasScrollbar, setHasScrollbar, scrollBarWidth, handleScrollbarWidth, } = useTableScrollbar();
61
- const itemKey = (index, data) => {
62
- if (typeof customItemKey === 'function') {
63
- return customItemKey(index, data);
64
- }
65
- return index;
66
- };
67
- const { bodyRef, headerRef } = useSyncedScroll();
51
+ const { hasScrollbar, scrollBarWidth, handleScrollbarWidth } = useTableScrollbar();
52
+ const { headerRef } = useSyncedScroll();
68
53
  const RenderRow = memo(({ index, style }) => {
69
54
  const row = rows[index];
70
55
  prepareRow(row);
@@ -85,7 +70,7 @@ export const MultiSelectableContent = ({ onMultiSelectionChanged, onSingleRowSel
85
70
  }
86
71
  : () => handleMultipleSelectedRows(selectedRowIds, rows, row, index),
87
72
  };
88
- return (_jsx(TableRowMultiSelectable, { ...rowProps, isSelected: row.isSelected, separationLineVariant: separationLineVariant, backgroundVariant: backgroundVariant, className: "tr", children: row.cells.map((cell) => {
73
+ return (_jsx(TableRowMultiSelectable, { ...rowProps, isSelected: row.isSelected, separationLineVariant: separationLineVariant, className: "tr", children: row.cells.map((cell) => {
89
74
  const cellProps = cell.getCellProps({
90
75
  style: {
91
76
  ...cell.column.cellStyle,
@@ -107,7 +92,7 @@ export const MultiSelectableContent = ({ onMultiSelectionChanged, onSingleRowSel
107
92
  return (_jsx("div", { ...cellProps, className: "td", children: cell.render('Cell') }));
108
93
  }) }));
109
94
  }, areEqual);
110
- return (_jsxs(_Fragment, { children: [_jsx("div", { children: headerGroups.map((headerGroup) => (_jsx(HeadRow, { ...headerGroup.getHeaderGroupProps(), hasScrollBar: hasScrollbar, scrollBarWidth: scrollBarWidth, rowHeight: rowHeight, ref: headerRef, children: headerGroup.headers.map((column) => {
95
+ return (_jsxs(_Fragment, { children: [_jsx("div", { children: headerGroups.map((headerGroup) => (_jsx(HeadRow, { ...headerGroup.getHeaderGroupProps(), hasScrollBar: hasScrollbar, scrollBarWidth: scrollBarWidth, rowHeight: rowHeight, separationLineVariant: separationLineVariant, ref: headerRef, children: headerGroup.headers.map((column) => {
111
96
  const headerStyleProps = column.getHeaderProps(Object.assign(column.getSortByToggleProps(), {
112
97
  style: { ...column === null || column === void 0 ? void 0 : column.cellStyle, position: 'relative' },
113
98
  }));
@@ -134,5 +119,5 @@ export const MultiSelectableContent = ({ onMultiSelectionChanged, onSingleRowSel
134
119
  }
135
120
  }
136
121
  }, children: column.render('Header') })) : (column.render('Header')), _jsx(SortCaret, { column: column })] }) }));
137
- }) }))) }), _jsx(TableBody, { role: "rowgroup", className: "tbody", ref: handleScrollbarWidth, children: typeof children === 'function' ? (children(_jsx(VirtualizedRows, { rows: rows, listRef: bodyRef, itemKey: itemKey, rowHeight: rowHeight, setHasScrollbar: setHasScrollbar, onBottom: onBottom, onBottomOffset: onBottomOffset, RenderRow: RenderRow }))) : rows.length ? (_jsx(VirtualizedRows, { rows: rows, listRef: bodyRef, itemKey: itemKey, rowHeight: rowHeight, setHasScrollbar: setHasScrollbar, onBottom: onBottom, onBottomOffset: onBottomOffset, RenderRow: RenderRow })) : (_jsx(NoResult, { children: translations[locale].noResult })) }), isLoadingMoreItems && (_jsx(Box, { display: "flex", justifyContent: "center", marginTop: spacing.r16, marginBottom: spacing.r16, children: _jsx(Loader, { size: "large" }) }))] }));
122
+ }) }))) }), _jsx(TableBody, { role: "rowgroup", className: "tbody", ref: handleScrollbarWidth, children: _jsx(TableRows, { locale: locale, children: children, customItemKey: customItemKey, RenderRow: RenderRow }) }), isLoadingMoreItems && (_jsx(Box, { display: "flex", justifyContent: "center", marginTop: spacing.r16, marginBottom: spacing.r16, children: _jsx(Loader, { size: "large" }) }))] }));
138
123
  };
@@ -8,12 +8,6 @@ export type DisplayedName = {
8
8
  export type SearchProps = {
9
9
  onChange: (arg0: string) => void;
10
10
  value?: string;
11
- /**
12
- * @deprecated
13
- * All the Table should display the Total Number of Entity.
14
- */
15
- displayTotalOf?: boolean;
16
- displayedName: DisplayedName;
17
11
  locale?: TableLocalType;
18
12
  totalCount?: number;
19
13
  } & Omit<Props, 'disableToggle' | 'onChange'>;
@@ -1 +1 @@
1
- {"version":3,"file":"Search.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tablev2/Search.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,KAAK,EAAE,MAAM,sCAAsC,CAAC;AAE7D,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAG9C,MAAM,MAAM,aAAa,GAAG;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,EAAE,aAAa,CAAC;IAC7B,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,GAAG,IAAI,CAAC,KAAK,EAAE,eAAe,GAAG,UAAU,CAAC,CAAC;AA0B9C,eAAO,MAAM,cAAc;YAKjB;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE;WACrC,MAAM;YACL,IAAI,GAAG,IAAI;iBAapB,CAAC;AAEF,wBAAgB,WAAW,CAAC,KAAK,EAAE,WAAW,eAuC7C"}
1
+ {"version":3,"file":"Search.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tablev2/Search.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,KAAK,EAAE,MAAM,sCAAsC,CAAC;AAE7D,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAG9C,MAAM,MAAM,aAAa,GAAG;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,GAAG,IAAI,CAAC,KAAK,EAAE,eAAe,GAAG,UAAU,CAAC,CAAC;AA0B9C,eAAO,MAAM,cAAc;YAKjB;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE;WACrC,MAAM;YACL,IAAI,GAAG,IAAI;iBAapB,CAAC;AAEF,wBAAgB,WAAW,CAAC,KAAK,EAAE,WAAW,eAkC7C"}