@longline/aqua-ui 1.0.152 → 1.0.153
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.
|
@@ -31,7 +31,7 @@ interface IProps {
|
|
|
31
31
|
footer?: React.ReactNode;
|
|
32
32
|
/**
|
|
33
33
|
* Does content scroll? If an Infobox is placed in a flex container,
|
|
34
|
-
* like `Dockable.fill`, then it will the area available to it.
|
|
34
|
+
* like `Dockable.fill`, then it will occupy the area available to it.
|
|
35
35
|
* The content scrolling must then be activated.
|
|
36
36
|
* @default false
|
|
37
37
|
*/
|
|
@@ -15,6 +15,7 @@ var __assign = (this && this.__assign) || function () {
|
|
|
15
15
|
};
|
|
16
16
|
import * as React from 'react';
|
|
17
17
|
import styled, { css } from "styled-components";
|
|
18
|
+
import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
|
|
18
19
|
import { GlassPane } from '../../GlassPane';
|
|
19
20
|
import { Header } from './Header';
|
|
20
21
|
var ContentBase = function (props) {
|
|
@@ -22,11 +23,19 @@ var ContentBase = function (props) {
|
|
|
22
23
|
React.createElement(GlassPane, { bordered: true },
|
|
23
24
|
props.header && React.createElement(Header, null, props.header),
|
|
24
25
|
React.createElement(PaneContent, null,
|
|
25
|
-
React.createElement(
|
|
26
|
+
React.createElement(OverlayScrollbarsComponent, { defer: true, options: { scrollbars: { theme: 'os-theme-dark', autoHide: 'leave' } }, style: props.scroll ? {
|
|
27
|
+
position: 'absolute',
|
|
28
|
+
left: 0,
|
|
29
|
+
top: 0,
|
|
30
|
+
right: 0,
|
|
31
|
+
bottom: 0,
|
|
32
|
+
overflowY: 'auto'
|
|
33
|
+
} : {} },
|
|
34
|
+
React.createElement(Padding, { "$padded": props.padded }, props.children)))));
|
|
26
35
|
};
|
|
27
|
-
var
|
|
28
|
-
var PaneContent = styled.div(
|
|
29
|
-
var ContentStyled = styled(ContentBase)(
|
|
36
|
+
var Padding = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (p) { return p.$padded == true && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding: 10px 22px 10px 22px;\n "], ["\n padding: 10px 22px 10px 22px;\n "]))); });
|
|
37
|
+
var PaneContent = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: relative;\n flex: 1;\n box-sizing: border-box;\n"], ["\n position: relative;\n flex: 1;\n box-sizing: border-box;\n"])));
|
|
38
|
+
var ContentStyled = styled(ContentBase)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n // Size:\n position: relative;\n box-sizing: border-box;\n min-height: ", ";\n flex: 1;\n\n // Content:\n display: flex;\n\n // Appearance:\n color: ", ";\n font: ", ";\n\n // Behavior:\n pointer-events: all; // undo InfoBox's events blocking.\n"], ["\n // Size:\n position: relative;\n box-sizing: border-box;\n min-height: ", ";\n flex: 1;\n\n // Content:\n display: flex;\n\n // Appearance:\n color: ", ";\n font: ", ";\n\n // Behavior:\n pointer-events: all; // undo InfoBox's events blocking.\n"
|
|
30
39
|
/**
|
|
31
40
|
* InfoBox.Content fills up all vertical space it can get.
|
|
32
41
|
*/
|
|
@@ -36,4 +45,4 @@ var ContentStyled = styled(ContentBase)(templateObject_5 || (templateObject_5 =
|
|
|
36
45
|
*/
|
|
37
46
|
var Content = function (props) { return React.createElement(ContentStyled, __assign({}, props)); };
|
|
38
47
|
export { Content };
|
|
39
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4
|
|
48
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
package/containers/List/List.js
CHANGED
|
@@ -4,6 +4,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
4
4
|
};
|
|
5
5
|
import * as React from 'react';
|
|
6
6
|
import styled from 'styled-components';
|
|
7
|
+
import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
|
|
7
8
|
import { SVG } from '../../svg';
|
|
8
9
|
import { Input } from '../../inputs/Input';
|
|
9
10
|
/**
|
|
@@ -22,9 +23,17 @@ var List = React.forwardRef(function (props, ref) {
|
|
|
22
23
|
props.onSearch &&
|
|
23
24
|
React.createElement(SearchBox, { onClick: function (e) { return e.stopPropagation(); } },
|
|
24
25
|
React.createElement(Input, { noTabIndex: true, icon: SVG.Icons.Search, placeholder: props.placeholder, clearable: true, value: props.search, transparent: true, fluid: true, type: "text", onChange: props.onSearch })),
|
|
25
|
-
React.createElement(Inner, { ref: ref, tabIndex: -1 },
|
|
26
|
+
React.createElement(Inner, { ref: ref, tabIndex: -1 },
|
|
27
|
+
React.createElement(OverlayScrollbarsComponent, { defer: true, className: "scroller", options: { scrollbars: { theme: 'os-theme-dark', autoHide: 'leave' } }, style: {
|
|
28
|
+
position: "absolute",
|
|
29
|
+
left: 0,
|
|
30
|
+
top: 0,
|
|
31
|
+
right: 0,
|
|
32
|
+
bottom: 0,
|
|
33
|
+
overflowY: "auto",
|
|
34
|
+
} }, props.children)));
|
|
26
35
|
});
|
|
27
|
-
var Inner = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n"], ["\n"
|
|
36
|
+
var Inner = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"
|
|
28
37
|
/**
|
|
29
38
|
* A search input is contained within a SearchBox to give it the same
|
|
30
39
|
* height as other list items. This is important for opening/closing
|
|
@@ -37,11 +46,11 @@ var Inner = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObj
|
|
|
37
46
|
* the list to the correct height.
|
|
38
47
|
*/
|
|
39
48
|
var SearchBox = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n box-sizing: border-box;\n padding-left: 4px;\n padding-right: 4px;\n display: flex;\n align-items: center;\n border-bottom: solid 1px ", ";\n & input {\n font: ", ";\n }\n"], ["\n box-sizing: border-box;\n padding-left: 4px;\n padding-right: 4px;\n display: flex;\n align-items: center;\n border-bottom: solid 1px ", ";\n & input {\n font: ", ";\n }\n"])), function (p) { return p.theme.colors.neutral[80]; }, function (p) { return p.theme.font.bodyMedium; });
|
|
40
|
-
var ListStyled = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: 100%;\n background-color: ", ";\n border-radius: ", "px;\n box-shadow: ", ";\n overflow: hidden;\n font: ", ";\n\n ", " {\n height: ", ";\n
|
|
49
|
+
var ListStyled = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: 100%;\n background-color: ", ";\n border-radius: ", "px;\n box-shadow: ", ";\n overflow: hidden;\n font: ", ";\n\n ", " {\n height: ", ";\n }\n\n ", " {\n height: ", "px;\n }\n\n .scroller > div > div {\n //height: ", "px;\n //height: 42px;\n }\n"], ["\n width: 100%;\n background-color: ", ";\n border-radius: ", "px;\n box-shadow: ", ";\n overflow: hidden;\n font: ", ";\n\n ", " {\n height: ", ";\n }\n\n ", " {\n height: ", "px;\n }\n\n .scroller > div > div {\n //height: ", "px;\n //height: 42px;\n }\n"])), function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.shadows.medium; }, function (p) { return p.theme.font.bodyMedium; }, Inner, function (p) { return p.$maxItems
|
|
41
50
|
? ((p.$contract
|
|
42
51
|
? Math.min(p.$count, p.$maxItems)
|
|
43
52
|
: p.$maxItems)
|
|
44
53
|
* (p.$tall ? 56 : 42)) + "px"
|
|
45
|
-
: "100%"; }, SearchBox, function (p) { return p.$tall ? 56 : 42; },
|
|
54
|
+
: "100%"; }, SearchBox, function (p) { return p.$tall ? 56 : 42; }, function (p) { return p.$tall ? 56 : 42; });
|
|
46
55
|
export { List };
|
|
47
56
|
var templateObject_1, templateObject_2, templateObject_3;
|
|
@@ -27,6 +27,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
27
27
|
import * as React from 'react';
|
|
28
28
|
import styled, { css } from 'styled-components';
|
|
29
29
|
import { usePopper } from 'react-popper';
|
|
30
|
+
import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
|
|
30
31
|
import { Header } from './Header';
|
|
31
32
|
import { Body } from './Body';
|
|
32
33
|
import { darken } from '../../helper/darken';
|
|
@@ -48,7 +49,7 @@ var TableBase = function (_a) {
|
|
|
48
49
|
{
|
|
49
50
|
name: 'offset',
|
|
50
51
|
options: {
|
|
51
|
-
offset: [0, 16]
|
|
52
|
+
offset: [0, 16]
|
|
52
53
|
},
|
|
53
54
|
}, {
|
|
54
55
|
name: 'flip',
|
|
@@ -56,7 +57,7 @@ var TableBase = function (_a) {
|
|
|
56
57
|
}, {
|
|
57
58
|
name: 'preventOverflow',
|
|
58
59
|
options: {
|
|
59
|
-
boundary: innerRef.current,
|
|
60
|
+
boundary: innerRef.current ? innerRef.current.getElement() : null,
|
|
60
61
|
tether: false,
|
|
61
62
|
padding: { top: HEADER_HEIGHT, bottom: 16 }
|
|
62
63
|
}
|
|
@@ -78,7 +79,7 @@ var TableBase = function (_a) {
|
|
|
78
79
|
setTime(Math.random());
|
|
79
80
|
});
|
|
80
81
|
resizeObserver.observe(auxRef.current);
|
|
81
|
-
resizeObserver.observe(innerRef.current);
|
|
82
|
+
resizeObserver.observe(innerRef.current.getElement());
|
|
82
83
|
return function () { return resizeObserver.disconnect(); };
|
|
83
84
|
}, []);
|
|
84
85
|
// If desired, scroll newly selected item into view.
|
|
@@ -99,7 +100,14 @@ var TableBase = function (_a) {
|
|
|
99
100
|
(!Array.isArray(props.data) || props.data.length == 0) &&
|
|
100
101
|
React.createElement(NoData, { dark: props.dark, component: props.noData }),
|
|
101
102
|
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 })),
|
|
102
|
-
React.createElement(
|
|
103
|
+
React.createElement(OverlayScrollbarsComponent, { ref: innerRef, defer: true, options: { scrollbars: { theme: 'os-theme-light', autoHide: 'leave' } }, style: {
|
|
104
|
+
position: "absolute",
|
|
105
|
+
left: 0,
|
|
106
|
+
top: 0,
|
|
107
|
+
right: 0,
|
|
108
|
+
bottom: 0,
|
|
109
|
+
overflowY: "auto",
|
|
110
|
+
} },
|
|
103
111
|
React.createElement("table", { className: className },
|
|
104
112
|
props.noheader != true && React.createElement(Header, __assign({}, props, { columns: activeColumns, onOpenColumns: props.onOpenColumns })),
|
|
105
113
|
React.createElement(Body, __assign({ ref: setActiveRef }, props, { columns: activeColumns })))),
|
|
@@ -107,8 +115,7 @@ var TableBase = function (_a) {
|
|
|
107
115
|
};
|
|
108
116
|
var AuxHolder = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n z-index: 1;\n pointer-events: none;\n // Children must turn pointer-events back on.\n"], ["\n z-index: 1;\n pointer-events: none;\n // Children must turn pointer-events back on.\n"])));
|
|
109
117
|
var Wrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n // Size and position. A table fills its container.\n position: relative;\n width: 100%;\n height: 100%;\n background-color: ", ";\n"], ["\n // Size and position. A table fills its container.\n position: relative;\n width: 100%;\n height: 100%;\n background-color: ", ";\n"])), function (p) { return p.$dark ? p.theme.colors.primary[3] : p.theme.colors.neutral[100]; });
|
|
110
|
-
var
|
|
111
|
-
var TableStyled = styled(TableBase)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n position: absolute;\n box-sizing: border-box;\n left: 0;\n top: 0;\n width: 100%;\n border-collapse: collapse; \n table-layout: fixed; \n padding-bottom: 48px;\n\n // Grid:\n display: grid;\n grid-template-rows: ", "px;\n grid-auto-rows: auto;\n\n // Convert column widths a string suitable for grid template:\n grid-template-columns: ", ";\n\n // Appearance:\n font: ", ";\n color: ", ";\n background-color: ", ";\n\n // <thead>, <tbody> and <tr> must not participate in CSS grid:\n tr, tbody, thead { display: contents; }\n\n // <tr>,<th>,<td> must be styled here, once, because otherwise \n // styled-components would create too many classes.\n tr {\n position: relative;\n }\n tr.clickable {\n cursor: pointer;\n }\n\n // Optional row hover effect:\n ", "\n\n // Striped rows:\n ", "\n\n // General styles for both TD and TH:\n th, td {\n position: relative;\n box-sizing: border-box;\n white-space: nowrap;\n text-align: left;\n user-select: none;\n outline: none;\n padding-left: 16px;\n padding-right: 16px; \n\n // th, td use flexbox to vertical-align content:\n display: flex;\n align-items: center;\n justify-content: left;\n\n // Underline.\n &:after {\n content: '';\n position: absolute;\n left: 0;\n bottom: 0;\n right: 0;\n height: 1px;\n transition: background-color ", "ms ease-in-out;\n } \n }\n\n th {\n // Position and size:\n position: sticky;\n top: 0;\n z-index: 100;\n gap: 8px;\n justify-content: space-between;\n // Appearance\n background: ", ";\n &.sort {\n background: ", ";\n }\n &:after { \n background-color: ", "; \n }\n // Header shadow:\n ", "\n }\n // td bottom border color:\n td {\n &:after {\n background-color: ", ";\n } \n }\n // Active row TDs:\n tr.active td {\n background-color: ", ";\n }\n // Last column has double right margin:\n td:last-child {\n padding-right: 32px;\n }\n // Last row has no bottom border:\n tr:last-child td {\n &:after {\n visibility: hidden;\n } \n }\n // Spans in td/th are ellipsized:\n td > span, th > span {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n }\n\n // Grid:\n ", "\n\n // If onColumns is present, remove last column header's hover underline:\n // Also remove last gridline.\n ", "\n\n // Change styles for table to be vertically oriented:\n ", "\n\n // Expanded row makes its cells sticky:\n tr.expanded {\n td {\n position: sticky;\n top: ", "px;\n align-self: flex-start;\n z-index: 1;\n }\n }\n"], ["\n position: absolute;\n box-sizing: border-box;\n left: 0;\n top: 0;\n width: 100%;\n border-collapse: collapse; \n table-layout: fixed; \n padding-bottom: 48px;\n\n // Grid:\n display: grid;\n grid-template-rows: ", "px;\n grid-auto-rows: auto;\n\n // Convert column widths a string suitable for grid template:\n grid-template-columns: ", ";\n\n // Appearance:\n font: ", ";\n color: ", ";\n background-color: ", ";\n\n // <thead>, <tbody> and <tr> must not participate in CSS grid:\n tr, tbody, thead { display: contents; }\n\n // <tr>,<th>,<td> must be styled here, once, because otherwise \n // styled-components would create too many classes.\n tr {\n position: relative;\n }\n tr.clickable {\n cursor: pointer;\n }\n\n // Optional row hover effect:\n ", "\n\n // Striped rows:\n ", "\n\n // General styles for both TD and TH:\n th, td {\n position: relative;\n box-sizing: border-box;\n white-space: nowrap;\n text-align: left;\n user-select: none;\n outline: none;\n padding-left: 16px;\n padding-right: 16px; \n\n // th, td use flexbox to vertical-align content:\n display: flex;\n align-items: center;\n justify-content: left;\n\n // Underline.\n &:after {\n content: '';\n position: absolute;\n left: 0;\n bottom: 0;\n right: 0;\n height: 1px;\n transition: background-color ", "ms ease-in-out;\n } \n }\n\n th {\n // Position and size:\n position: sticky;\n top: 0;\n z-index: 100;\n gap: 8px;\n justify-content: space-between;\n // Appearance\n background: ", ";\n &.sort {\n background: ", ";\n }\n &:after { \n background-color: ", "; \n }\n // Header shadow:\n ", "\n }\n // td bottom border color:\n td {\n &:after {\n background-color: ", ";\n } \n }\n // Active row TDs:\n tr.active td {\n background-color: ", ";\n }\n // Last column has double right margin:\n td:last-child {\n padding-right: 32px;\n }\n // Last row has no bottom border:\n tr:last-child td {\n &:after {\n visibility: hidden;\n } \n }\n // Spans in td/th are ellipsized:\n td > span, th > span {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n }\n\n // Grid:\n ", "\n\n // If onColumns is present, remove last column header's hover underline:\n // Also remove last gridline.\n ", "\n\n // Change styles for table to be vertically oriented:\n ", "\n\n // Expanded row makes its cells sticky:\n tr.expanded {\n td {\n position: sticky;\n top: ", "px;\n align-self: flex-start;\n z-index: 1;\n }\n }\n"])), HEADER_HEIGHT, function (p) {
|
|
118
|
+
var TableStyled = styled(TableBase)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n position: absolute;\n box-sizing: border-box;\n left: 0;\n top: 0;\n width: 100%;\n border-collapse: collapse; \n table-layout: fixed; \n padding-bottom: 48px;\n\n // Grid:\n display: grid;\n grid-template-rows: ", "px;\n grid-auto-rows: auto;\n\n // Convert column widths a string suitable for grid template:\n grid-template-columns: ", ";\n\n // Appearance:\n font: ", ";\n color: ", ";\n background-color: ", ";\n\n // <thead>, <tbody> and <tr> must not participate in CSS grid:\n tr, tbody, thead { display: contents; }\n\n // <tr>,<th>,<td> must be styled here, once, because otherwise \n // styled-components would create too many classes.\n tr {\n position: relative;\n }\n tr.clickable {\n cursor: pointer;\n }\n\n // Optional row hover effect:\n ", "\n\n // Striped rows:\n ", "\n\n // General styles for both TD and TH:\n th, td {\n position: relative;\n box-sizing: border-box;\n white-space: nowrap;\n text-align: left;\n user-select: none;\n outline: none;\n padding-left: 16px;\n padding-right: 16px; \n\n // th, td use flexbox to vertical-align content:\n display: flex;\n align-items: center;\n justify-content: left;\n\n // Underline.\n &:after {\n content: '';\n position: absolute;\n left: 0;\n bottom: 0;\n right: 0;\n height: 1px;\n transition: background-color ", "ms ease-in-out;\n } \n }\n\n th {\n // Position and size:\n position: sticky;\n top: 0;\n z-index: 100;\n gap: 8px;\n justify-content: space-between;\n // Appearance\n background: ", ";\n &.sort {\n background: ", ";\n }\n &:after { \n background-color: ", "; \n }\n // Header shadow:\n ", "\n }\n // td bottom border color:\n td {\n &:after {\n background-color: ", ";\n } \n }\n // Active row TDs:\n tr.active td {\n background-color: ", ";\n }\n // Last column has double right margin:\n td:last-child {\n padding-right: 32px;\n }\n // Last row has no bottom border:\n tr:last-child td {\n &:after {\n visibility: hidden;\n } \n }\n // Spans in td/th are ellipsized:\n td > span, th > span {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n }\n\n // Grid:\n ", "\n\n // If onColumns is present, remove last column header's hover underline:\n // Also remove last gridline.\n ", "\n\n // Change styles for table to be vertically oriented:\n ", "\n\n // Expanded row makes its cells sticky:\n tr.expanded {\n td {\n position: sticky;\n top: ", "px;\n align-self: flex-start;\n z-index: 1;\n }\n }\n"], ["\n position: absolute;\n box-sizing: border-box;\n left: 0;\n top: 0;\n width: 100%;\n border-collapse: collapse; \n table-layout: fixed; \n padding-bottom: 48px;\n\n // Grid:\n display: grid;\n grid-template-rows: ", "px;\n grid-auto-rows: auto;\n\n // Convert column widths a string suitable for grid template:\n grid-template-columns: ", ";\n\n // Appearance:\n font: ", ";\n color: ", ";\n background-color: ", ";\n\n // <thead>, <tbody> and <tr> must not participate in CSS grid:\n tr, tbody, thead { display: contents; }\n\n // <tr>,<th>,<td> must be styled here, once, because otherwise \n // styled-components would create too many classes.\n tr {\n position: relative;\n }\n tr.clickable {\n cursor: pointer;\n }\n\n // Optional row hover effect:\n ", "\n\n // Striped rows:\n ", "\n\n // General styles for both TD and TH:\n th, td {\n position: relative;\n box-sizing: border-box;\n white-space: nowrap;\n text-align: left;\n user-select: none;\n outline: none;\n padding-left: 16px;\n padding-right: 16px; \n\n // th, td use flexbox to vertical-align content:\n display: flex;\n align-items: center;\n justify-content: left;\n\n // Underline.\n &:after {\n content: '';\n position: absolute;\n left: 0;\n bottom: 0;\n right: 0;\n height: 1px;\n transition: background-color ", "ms ease-in-out;\n } \n }\n\n th {\n // Position and size:\n position: sticky;\n top: 0;\n z-index: 100;\n gap: 8px;\n justify-content: space-between;\n // Appearance\n background: ", ";\n &.sort {\n background: ", ";\n }\n &:after { \n background-color: ", "; \n }\n // Header shadow:\n ", "\n }\n // td bottom border color:\n td {\n &:after {\n background-color: ", ";\n } \n }\n // Active row TDs:\n tr.active td {\n background-color: ", ";\n }\n // Last column has double right margin:\n td:last-child {\n padding-right: 32px;\n }\n // Last row has no bottom border:\n tr:last-child td {\n &:after {\n visibility: hidden;\n } \n }\n // Spans in td/th are ellipsized:\n td > span, th > span {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n }\n\n // Grid:\n ", "\n\n // If onColumns is present, remove last column header's hover underline:\n // Also remove last gridline.\n ", "\n\n // Change styles for table to be vertically oriented:\n ", "\n\n // Expanded row makes its cells sticky:\n tr.expanded {\n td {\n position: sticky;\n top: ", "px;\n align-self: flex-start;\n z-index: 1;\n }\n }\n"])), HEADER_HEIGHT, function (p) {
|
|
112
119
|
// Prefix a check column?
|
|
113
120
|
return (p.onCheck ? ['48px'] : []).concat(
|
|
114
121
|
// Actual columns:
|
|
@@ -123,7 +130,7 @@ var TableStyled = styled(TableBase)(templateObject_10 || (templateObject_10 = __
|
|
|
123
130
|
// Postfix an columns management column?
|
|
124
131
|
.concat(p.columnsEditable ? ['48px'] : [])
|
|
125
132
|
.join(" ");
|
|
126
|
-
}, function (p) { return p.theme.font.bodyMedium; }, function (p) { return p.dark ? p.theme.colors.neutral[100] : p.theme.colors.neutral[10]; }, function (p) { return p.dark ? p.theme.colors.primary[3] : p.theme.colors.neutral[100]; }, function (p) { return p.hover && css(
|
|
133
|
+
}, function (p) { return p.theme.font.bodyMedium; }, function (p) { return p.dark ? p.theme.colors.neutral[100] : p.theme.colors.neutral[10]; }, function (p) { return p.dark ? p.theme.colors.primary[3] : p.theme.colors.neutral[100]; }, function (p) { return p.hover && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n tr:hover td { background-color: ", "; }\n "], ["\n tr:hover td { background-color: ", "; }\n "])), p.dark ? p.theme.colors.primary[4] : p.theme.colors.neutral[95]); }, function (p) { return p.striped && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n tr:nth-child(2n+2) td {\n background-color: ", ";\n }\n "], ["\n tr:nth-child(2n+2) td {\n background-color: ", ";\n }\n "])), darken(0.02, p.dark ? p.theme.colors.primary[3] : p.theme.colors.neutral[100])); }, function (p) { return p.theme.animation.duration; }, function (p) { return p.dark ? p.theme.colors.primary[5] : p.theme.colors.neutral[100]; }, function (p) { return p.dark ? p.theme.colors.neutral[10] : p.theme.colors.neutral[95]; }, function (p) { return p.dark ? p.theme.colors.primary[2] : p.theme.colors.neutral[80]; }, function (p) { return p.shadow && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n &:before {\n position: absolute;\n pointer-events: none;\n content: '';\n z-index: 1;\n top: calc(100%);\n left: 0;\n right: 0;\n height: 8px;\n background: linear-gradient(rgba(0,0,0,0.1), transparent);\n }\n "], ["\n &:before {\n position: absolute;\n pointer-events: none;\n content: '';\n z-index: 1;\n top: calc(100%);\n left: 0;\n right: 0;\n height: 8px;\n background: linear-gradient(rgba(0,0,0,0.1), transparent);\n }\n "]))); }, function (p) { return p.dark ? p.theme.colors.primary[2] : p.theme.colors.neutral[80]; }, function (p) { return p.theme.colors.primary[1]; }, function (p) { return p.grid && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n td:not(:last-child), th:not(:last-child) {\n border-right: dashed 1px ", ";\n }\n "], ["\n td:not(:last-child), th:not(:last-child) {\n border-right: dashed 1px ", ";\n }\n "])), p.dark ? p.theme.colors.primary[2] : p.theme.colors.neutral[80]); }, function (p) { return p.columnsEditable && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n th:last-child {\n &:hover {\n &:after { \n background-color: ", ";\n }\n }\n }\n th:nth-last-child(2), td:nth-last-child(2) {\n border-right: none;\n }\n "], ["\n th:last-child {\n &:hover {\n &:after { \n background-color: ", ";\n }\n }\n }\n th:nth-last-child(2), td:nth-last-child(2) {\n border-right: none;\n }\n "])), function (p) { return p.theme.colors.primary[2]; }); }, function (p) { return p.narrow && css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n grid-template-columns: 1fr;\n tr th {\n display: none;\n } \n th, td:not(:last-child) {\n &:after {\n visibility: hidden;\n }\n }\n td {\n flex-direction: column;\n align-items: start;\n justify-content: center;\n }\n td span.label {\n font: ", ";\n }\n td:last-child {\n padding-right: 16px;\n }\n "], ["\n grid-template-columns: 1fr;\n tr th {\n display: none;\n } \n th, td:not(:last-child) {\n &:after {\n visibility: hidden;\n }\n }\n td {\n flex-direction: column;\n align-items: start;\n justify-content: center;\n }\n td span.label {\n font: ", ";\n }\n td:last-child {\n padding-right: 16px;\n }\n "])), function (p) { return p.theme.font.labelSmall; }); }, HEADER_HEIGHT);
|
|
127
134
|
var Table = function (props) { return React.createElement(TableStyled, __assign({}, props)); };
|
|
128
135
|
export { Table };
|
|
129
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9
|
|
136
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
|
|
@@ -216,7 +216,7 @@ var DropdownBase = function (props) {
|
|
|
216
216
|
else {
|
|
217
217
|
updateValue(props.data[prevIndex]);
|
|
218
218
|
}
|
|
219
|
-
bodyRef.current.children[0].children[0].children[prevIndex].scrollIntoView({ block: 'start', inline: 'nearest'
|
|
219
|
+
// bodyRef.current.children[0].children[0].children[prevIndex].scrollIntoView({ block: 'start', inline: 'nearest'});
|
|
220
220
|
};
|
|
221
221
|
var selectNextItem = function () {
|
|
222
222
|
if (!props.data)
|
|
@@ -230,7 +230,7 @@ var DropdownBase = function (props) {
|
|
|
230
230
|
else {
|
|
231
231
|
updateValue(props.data[nextIndex]);
|
|
232
232
|
}
|
|
233
|
-
bodyRef.current.children[0].children[0].children[nextIndex].scrollIntoView({ block: 'end', inline: 'nearest'
|
|
233
|
+
// bodyRef.current.children[0].children[0].children[nextIndex].scrollIntoView({ block: 'end', inline: 'nearest'});
|
|
234
234
|
};
|
|
235
235
|
//
|
|
236
236
|
// A key was pressed while the selector had focus.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@longline/aqua-ui",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.153",
|
|
4
4
|
"description": "AquaUI",
|
|
5
5
|
"author": "Alexander van Oostenrijk / Longline Environment",
|
|
6
6
|
"license": "Commercial",
|
|
@@ -58,6 +58,7 @@
|
|
|
58
58
|
"date-fns": "^4.1.0",
|
|
59
59
|
"gl-matrix": "^3.4.3",
|
|
60
60
|
"mapbox-gl": "^3.7.0",
|
|
61
|
+
"overlayscrollbars-react": "^0.5.6",
|
|
61
62
|
"react": "^18.3.1",
|
|
62
63
|
"react-dom": "^18.3.1",
|
|
63
64
|
"react-map-gl": "^7.1.7",
|