@longline/aqua-ui 1.0.281 → 1.0.283

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.
@@ -102,13 +102,6 @@ var ListViewBase = function (props) {
102
102
  // Is the input data an array? If not, abort.
103
103
  if (!Array.isArray(data))
104
104
  return;
105
- /*
106
- const newData = data.map(d => {
107
- if(item === true) return { ...d, checked: true };
108
- if(item === false) return { ...d, checked: false };
109
- return { ...d, checked: item === d ? !d.checked : !!d.checked };
110
- });
111
- setData(newData);*/
112
105
  props.onCheck(data, item);
113
106
  };
114
107
  var handleColumns = function () {
@@ -38,13 +38,17 @@ import { Anchor } from '../../../containers/Anchor';
38
38
  var HEADER_HEIGHT = 48;
39
39
  var TableBase = function (_a) {
40
40
  var className = _a.className, props = __rest(_a, ["className"]);
41
+ var wrapperRef = React.useRef(null);
41
42
  var innerRef = React.useRef(null);
42
43
  var auxRef = React.useRef(null);
43
44
  var activeColumns = props.columns.filter(function (c) { return c.active; });
44
45
  var _b = React.useState(null), activeRef = _b[0], setActiveRef = _b[1];
45
46
  var _c = React.useState(0), time = _c[0], setTime = _c[1];
46
47
  var _d = React.useState(false), showingNoData = _d[0], setShowingNoData = _d[1];
47
- var _e = usePopper(activeRef, auxRef.current, {
48
+ // Popper latches on to activeRef. In a virtual list, activeRef can be null,
49
+ // when the active item is out of view. In the case, popper latches on
50
+ // to the list itself (wrapperRef.current).
51
+ var _e = usePopper(activeRef !== null && activeRef !== void 0 ? activeRef : wrapperRef.current, auxRef.current, {
48
52
  placement: 'right-start',
49
53
  modifiers: [
50
54
  {
@@ -114,7 +118,7 @@ var TableBase = function (_a) {
114
118
  React.createElement(ColumnsManager, { columns: props.columns, onChange: props.onChangeColumns, onClose: props.onCloseColumns, onReset: props.onResetColumns })),
115
119
  showingNoData && React.createElement(NoData, { dark: props.dark, component: props.noData }),
116
120
  React.createElement(AuxHolder, __assign({ ref: auxRef, style: __assign({ visibility: (props.active && props.aux && Array.isArray(props.data) && props.data.includes(props.active)) ? 'visible' : 'hidden' }, styles.popper) }, attributes.popper), (props.active && props.aux && Array.isArray(props.data) && props.data.includes(props.active)) && React.cloneElement(props.aux, { value: props.active })),
117
- React.createElement("div", { className: className },
121
+ React.createElement("div", { className: className, ref: wrapperRef },
118
122
  props.noheader != true && React.createElement(Header, __assign({}, props, { columns: activeColumns, onOpenColumns: props.onOpenColumns })),
119
123
  React.createElement(OverlayScrollbarsComponent, { ref: innerRef, defer: true, options: {
120
124
  scrollbars: { theme: 'os-theme-light', autoHide: 'leave' }
@@ -14,6 +14,11 @@ interface ITertiaryButtonProps {
14
14
  * that it can be used to prevent the default action or stop propagation.
15
15
  */
16
16
  onClick: (e?: React.MouseEvent) => void;
17
+ /**
18
+ * If set, this button will have the primary color.
19
+ * @default false
20
+ */
21
+ primary?: boolean;
17
22
  }
18
23
  /**
19
24
  * The `TertiaryButton` is connected to a specific area or component such as
@@ -40,7 +40,7 @@ var TertiaryButtonStyled = styled(TertiaryButtonBase)(templateObject_3 || (templ
40
40
  * There is no support for icons (although the React children of the component
41
41
  * could force one in).
42
42
  */
43
- ])), function (p) { return p.theme.font.labelSmall; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.shadows.medium; }, function (p) { return p.theme.shadows.large; }, function (p) { return !p.disabled && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n box-shadow: none;\n "], ["\n background-color: ", ";\n box-shadow: none;\n "])), p.theme.colors.neutral[95]); }, function (p) { return p.disabled && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n cursor: auto;\n box-shadow: none;\n pointer-events: none;\n "], ["\n background-color: ", ";\n cursor: auto;\n box-shadow: none;\n pointer-events: none;\n "])), p.theme.colors.neutral[50]); });
43
+ ])), function (p) { return p.theme.font.labelSmall; }, function (p) { return p.primary ? p.theme.colors.neutral[100] : p.theme.colors.primary[3]; }, function (p) { return p.primary ? p.theme.colors.primary[1] : p.theme.colors.neutral[100]; }, function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.shadows.medium; }, function (p) { return p.theme.shadows.large; }, function (p) { return !p.disabled && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n box-shadow: none;\n "], ["\n background-color: ", ";\n box-shadow: none;\n "])), p.primary ? p.theme.colors.primary[2] : p.theme.colors.neutral[95]); }, function (p) { return p.disabled && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n cursor: auto;\n box-shadow: none;\n pointer-events: none;\n "], ["\n background-color: ", ";\n cursor: auto;\n box-shadow: none;\n pointer-events: none;\n "])), p.theme.colors.neutral[50]); });
44
44
  /**
45
45
  * The `TertiaryButton` is connected to a specific area or component such as
46
46
  * an `InfoBox`. It renders as a `<button>` element.
@@ -7,6 +7,6 @@ import styled from 'styled-components';
7
7
  var FooterBase = function (props) {
8
8
  return React.createElement("div", { className: props.className }, props.children);
9
9
  };
10
- var Footer = styled(FooterBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-top: 12px;\n display: flex;\n justify-content: space-between;\n & > *:only-child {\n margin-left: auto;\n margin-right: auto; /* centers the single child */\n } \n padding-left: 17px;\n padding-right: 17px;\n @media (max-width: 400px) {\n flex-direction: column-reverse;\n justify-content: center;\n gap: 8px;\n align-items: center;\n }\n"], ["\n margin-top: 12px;\n display: flex;\n justify-content: space-between;\n & > *:only-child {\n margin-left: auto;\n margin-right: auto; /* centers the single child */\n } \n padding-left: 17px;\n padding-right: 17px;\n @media (max-width: 400px) {\n flex-direction: column-reverse;\n justify-content: center;\n gap: 8px;\n align-items: center;\n }\n"])));
10
+ var Footer = styled(FooterBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-top: 12px;\n display: flex;\n justify-content: center;\n gap: 16px;\n & > *:only-child {\n margin-left: auto;\n margin-right: auto; /* centers the single child */\n } \n padding-left: 17px;\n padding-right: 17px;\n @media (max-width: 400px) {\n flex-direction: column-reverse;\n justify-content: center;\n gap: 8px;\n align-items: center;\n }\n"], ["\n margin-top: 12px;\n display: flex;\n justify-content: center;\n gap: 16px;\n & > *:only-child {\n margin-left: auto;\n margin-right: auto; /* centers the single child */\n } \n padding-left: 17px;\n padding-right: 17px;\n @media (max-width: 400px) {\n flex-direction: column-reverse;\n justify-content: center;\n gap: 8px;\n align-items: center;\n }\n"])));
11
11
  export { Footer };
12
12
  var templateObject_1;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@longline/aqua-ui",
3
- "version": "1.0.281",
3
+ "version": "1.0.283",
4
4
  "description": "AquaUI",
5
5
  "author": "Alexander van Oostenrijk / Longline Environment",
6
6
  "license": "Commercial",