@longline/aqua-ui 1.0.231 → 1.0.233

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.
@@ -39,7 +39,7 @@ var Openable = function (_a) {
39
39
  refs: [toggleRef, paneRef],
40
40
  onClose: props.onClose,
41
41
  escapeToClose: true,
42
- blurToClose: true
42
+ blurToClose: false
43
43
  });
44
44
  var _d = usePopper(toggleRef.current, paneRef.current, {
45
45
  placement: 'bottom-end',
@@ -28,7 +28,7 @@ var ColumnsManagerBase = function (props) {
28
28
  refs: [wrapperRef],
29
29
  onClose: props.onClose,
30
30
  escapeToClose: true,
31
- blurToClose: true
31
+ blurToClose: false
32
32
  });
33
33
  return (React.createElement("div", { className: props.className, ref: wrapperRef },
34
34
  React.createElement(GlassPane, { animated: true, bordered: true },
@@ -132,7 +132,7 @@ var TableBase = function (_a) {
132
132
  };
133
133
  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"])));
134
134
  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]; });
135
- var TableStyled = styled(TableBase)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n .inner {\n position: absolute;\n box-sizing: border-box;\n left: 0;\n top: 0;\n width: 100%;\n padding-bottom: 48px;\n }\n\n // Appearance:\n font: ", ";\n color: ", ";\n background-color: ", ";\n\n .row {\n width: 100%;\n height: ", "px;\n display: flex;\n flex-direction: row;\n }\n .row.clickable {\n cursor: pointer;\n }\n\n // Optional row hover effect:\n ", "\n\n // Striped rows:\n ", "\n\n // General styles for cells:\n .cell {\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 min-width: 0; \n\n // 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 // Cell widths:\n ", "\n\n .cell.check {\n width: 48px;\n }\n\n .cell.columns {\n width: 48px;\n }\n\n .header {\n // Position and size:\n position: absolute;\n top: 0;\n z-index: 200;\n height: ", "px;\n }\n\n .header .cell {\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 // cell bottom border color:\n .cell {\n &:after {\n background-color: ", ";\n } \n }\n // Active row cells:\n .row.active .cell {\n background-color: ", ";\n }\n // Last column has double right margin:\n .cell:last-child {\n padding-right: 32px;\n }\n // Last row has no bottom border:\n .row:last-child .cell {\n &:after {\n visibility: hidden;\n } \n }\n // Spans in cells are ellipsized:\n .cell > span {\n width: 100%;\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 // Expanded row makes its cells sticky:\n .row.expanded {\n position: sticky;\n top: 0;\n z-index: 100;\n }\n"], ["\n .inner {\n position: absolute;\n box-sizing: border-box;\n left: 0;\n top: 0;\n width: 100%;\n padding-bottom: 48px;\n }\n\n // Appearance:\n font: ", ";\n color: ", ";\n background-color: ", ";\n\n .row {\n width: 100%;\n height: ", "px;\n display: flex;\n flex-direction: row;\n }\n .row.clickable {\n cursor: pointer;\n }\n\n // Optional row hover effect:\n ", "\n\n // Striped rows:\n ", "\n\n // General styles for cells:\n .cell {\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 min-width: 0; \n\n // 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 // Cell widths:\n ", "\n\n .cell.check {\n width: 48px;\n }\n\n .cell.columns {\n width: 48px;\n }\n\n .header {\n // Position and size:\n position: absolute;\n top: 0;\n z-index: 200;\n height: ", "px;\n }\n\n .header .cell {\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 // cell bottom border color:\n .cell {\n &:after {\n background-color: ", ";\n } \n }\n // Active row cells:\n .row.active .cell {\n background-color: ", ";\n }\n // Last column has double right margin:\n .cell:last-child {\n padding-right: 32px;\n }\n // Last row has no bottom border:\n .row:last-child .cell {\n &:after {\n visibility: hidden;\n } \n }\n // Spans in cells are ellipsized:\n .cell > span {\n width: 100%;\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 // Expanded row makes its cells sticky:\n .row.expanded {\n position: sticky;\n top: 0;\n z-index: 100;\n }\n"])), 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.rowHeight; }, function (p) { return p.hover && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n .row:hover .cell { background-color: ", "; }\n "], ["\n .row:hover .cell { 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 .row:nth-child(2n+2) .cell {\n background-color: ", ";\n }\n "], ["\n .row:nth-child(2n+2) .cell {\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.columns.filter(function (c) { return c.active; }).map(function (c, i) {
135
+ var TableStyled = styled(TableBase)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n .inner {\n position: absolute;\n box-sizing: border-box;\n left: 0;\n top: 0;\n width: 100%;\n padding-bottom: 48px;\n }\n\n // Appearance:\n font: ", ";\n color: ", ";\n background-color: ", ";\n\n .row {\n width: 100%;\n height: ", "px;\n display: flex;\n flex-direction: row;\n }\n .row.clickable {\n cursor: pointer;\n }\n\n // Optional row hover effect:\n ", "\n\n // Striped rows:\n ", "\n\n // General styles for cells:\n .cell {\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 min-width: 0; \n\n // 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 // Cell widths:\n ", "\n\n .cell.check {\n width: 48px;\n }\n\n .cell.columns {\n width: 48px;\n }\n\n .header {\n // Position and size:\n position: absolute;\n top: 0;\n z-index: 200;\n height: ", "px;\n }\n\n .header .cell {\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 // cell bottom border color:\n .cell {\n &:after {\n background-color: ", ";\n } \n }\n // Active row cells:\n .row.active .cell {\n background-color: ", ";\n }\n // Last column has double right margin:\n .cell:last-child {\n padding-right: 32px;\n }\n // Last row has no bottom border:\n .row:last-child .cell {\n &:after {\n visibility: hidden;\n } \n }\n // Spans in cells are ellipsized:\n .cell > span {\n max-width: 100%;\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 // Expanded row makes its cells sticky:\n .row.expanded {\n position: sticky;\n top: 0;\n z-index: 100;\n }\n"], ["\n .inner {\n position: absolute;\n box-sizing: border-box;\n left: 0;\n top: 0;\n width: 100%;\n padding-bottom: 48px;\n }\n\n // Appearance:\n font: ", ";\n color: ", ";\n background-color: ", ";\n\n .row {\n width: 100%;\n height: ", "px;\n display: flex;\n flex-direction: row;\n }\n .row.clickable {\n cursor: pointer;\n }\n\n // Optional row hover effect:\n ", "\n\n // Striped rows:\n ", "\n\n // General styles for cells:\n .cell {\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 min-width: 0; \n\n // 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 // Cell widths:\n ", "\n\n .cell.check {\n width: 48px;\n }\n\n .cell.columns {\n width: 48px;\n }\n\n .header {\n // Position and size:\n position: absolute;\n top: 0;\n z-index: 200;\n height: ", "px;\n }\n\n .header .cell {\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 // cell bottom border color:\n .cell {\n &:after {\n background-color: ", ";\n } \n }\n // Active row cells:\n .row.active .cell {\n background-color: ", ";\n }\n // Last column has double right margin:\n .cell:last-child {\n padding-right: 32px;\n }\n // Last row has no bottom border:\n .row:last-child .cell {\n &:after {\n visibility: hidden;\n } \n }\n // Spans in cells are ellipsized:\n .cell > span {\n max-width: 100%;\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 // Expanded row makes its cells sticky:\n .row.expanded {\n position: sticky;\n top: 0;\n z-index: 100;\n }\n"])), 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.rowHeight; }, function (p) { return p.hover && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n .row:hover .cell { background-color: ", "; }\n "], ["\n .row:hover .cell { 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 .row:nth-child(2n+2) .cell {\n background-color: ", ";\n }\n "], ["\n .row:nth-child(2n+2) .cell {\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.columns.filter(function (c) { return c.active; }).map(function (c, i) {
136
136
  var _a;
137
137
  var width_definition = (_a = c.width) !== null && _a !== void 0 ? _a : 1;
138
138
  var cellIndex = p.onCheck ? i + 2 : i + 1;
@@ -53,7 +53,7 @@ var DateInputBase = function (props) {
53
53
  refs: [wrapperRef, bodyRef],
54
54
  onClose: function () { return setOpen(false); },
55
55
  escapeToClose: true,
56
- blurToClose: true
56
+ blurToClose: false
57
57
  });
58
58
  // Open the dropdown.
59
59
  var doOpen = function () {
@@ -14,7 +14,7 @@ var __assign = (this && this.__assign) || function () {
14
14
  return __assign.apply(this, arguments);
15
15
  };
16
16
  import * as React from 'react';
17
- import styled from 'styled-components';
17
+ import styled, { css } from 'styled-components';
18
18
  import { InputWrapper } from './InputWrapper';
19
19
  var InputBase = function (props) {
20
20
  var _a;
@@ -74,8 +74,8 @@ var InputBase = function (props) {
74
74
  return (React.createElement(InputWrapper, { fluid: props.fluid, ghost: props.ghost, error: props.error, disabled: props.disabled, transparent: props.transparent, icon: props.icon, iconPosition: props.iconPosition, onClear: (props.clearable && props.value) ? handleClear : null, onToggleReveal: props.revealable ? handleToggleReveal : null, revealed: revealed, unit: props.unit },
75
75
  React.createElement("input", { className: props.className, ref: inputRef, tabIndex: props.noTabIndex ? -1 : 0, value: value, placeholder: props.placeholder, disabled: props.disabled, type: props.type == 'password' ? (revealed ? 'text' : 'password') : props.type, maxLength: props.maxLength, autoComplete: props.autocomplete, onChange: handleChange, onFocus: props.onFocus })));
76
76
  };
77
- var InputStyled = styled(InputBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n // Dimensions:\n width: 100%;\n box-sizing: border-box;\n z-index: 0;\n border: none;\n\n outline: solid 3px rebeccapurple;\n background: transparent;\n padding: 0;\n margin: 0;\n outline: none;\n\n // Font\n font: ", ";\n text-align: left;\n color: ", ";\n\n // Define colors for placeholder text.\n &::placeholder {\n color: rgb(from ", " r g b / 50%);\n opacity: 1 !important; /* Firefox applies opacity */\n }\n\n // Focus:\n &:focus {\n &::placeholder {\n color: rgb(from ", " r g b / 30%);\n }\n }\n\n // Make sure HTML5 validation does not show up.\n &:valid {\n box-shadow: none;\n }\n &:invalid {\n box-shadow: none;\n }\n\n // Turn off number spinners.\n &[type=number]::-webkit-inner-spin-button, \n &[type=number]::-webkit-outer-spin-button { \n -webkit-appearance: none; /* Webkit (Chrome) */\n margin: 0; \n } \n &[type=number] {\n appearance:textfield;\n -moz-appearance:textfield; /* Firefox */\n } \n"], ["\n // Dimensions:\n width: 100%;\n box-sizing: border-box;\n z-index: 0;\n border: none;\n\n outline: solid 3px rebeccapurple;\n background: transparent;\n padding: 0;\n margin: 0;\n outline: none;\n\n // Font\n font: ", ";\n text-align: left;\n color: ", ";\n\n // Define colors for placeholder text.\n &::placeholder {\n color: rgb(from ", " r g b / 50%);\n opacity: 1 !important; /* Firefox applies opacity */\n }\n\n // Focus:\n &:focus {\n &::placeholder {\n color: rgb(from ", " r g b / 30%);\n }\n }\n\n // Make sure HTML5 validation does not show up.\n &:valid {\n box-shadow: none;\n }\n &:invalid {\n box-shadow: none;\n }\n\n // Turn off number spinners.\n &[type=number]::-webkit-inner-spin-button, \n &[type=number]::-webkit-outer-spin-button { \n -webkit-appearance: none; /* Webkit (Chrome) */\n margin: 0; \n } \n &[type=number] {\n appearance:textfield;\n -moz-appearance:textfield; /* Firefox */\n } \n"])), function (p) { return p.theme.font.bodyMedium; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.primary[3]; });
77
+ var InputStyled = styled(InputBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n // Dimensions:\n width: 100%;\n box-sizing: border-box;\n z-index: 0;\n border: none;\n\n outline: solid 3px rebeccapurple;\n background: transparent;\n padding: 0;\n margin: 0;\n outline: none;\n\n // Font\n font: ", ";\n text-align: left;\n color: ", ";\n\n // Define colors for placeholder text.\n &::placeholder {\n color: rgb(from ", " r g b / 50%);\n opacity: 1 !important; /* Firefox applies opacity */\n }\n\n // Focus:\n &:focus {\n &::placeholder {\n color: rgb(from ", " r g b / 30%);\n }\n }\n\n ", "\n\n // Make sure HTML5 validation does not show up.\n &:valid {\n box-shadow: none;\n }\n &:invalid {\n box-shadow: none;\n }\n\n // Turn off number spinners.\n &[type=number]::-webkit-inner-spin-button, \n &[type=number]::-webkit-outer-spin-button { \n -webkit-appearance: none; /* Webkit (Chrome) */\n margin: 0; \n } \n &[type=number] {\n appearance:textfield;\n -moz-appearance:textfield; /* Firefox */\n } \n"], ["\n // Dimensions:\n width: 100%;\n box-sizing: border-box;\n z-index: 0;\n border: none;\n\n outline: solid 3px rebeccapurple;\n background: transparent;\n padding: 0;\n margin: 0;\n outline: none;\n\n // Font\n font: ", ";\n text-align: left;\n color: ", ";\n\n // Define colors for placeholder text.\n &::placeholder {\n color: rgb(from ", " r g b / 50%);\n opacity: 1 !important; /* Firefox applies opacity */\n }\n\n // Focus:\n &:focus {\n &::placeholder {\n color: rgb(from ", " r g b / 30%);\n }\n }\n\n ", "\n\n // Make sure HTML5 validation does not show up.\n &:valid {\n box-shadow: none;\n }\n &:invalid {\n box-shadow: none;\n }\n\n // Turn off number spinners.\n &[type=number]::-webkit-inner-spin-button, \n &[type=number]::-webkit-outer-spin-button { \n -webkit-appearance: none; /* Webkit (Chrome) */\n margin: 0; \n } \n &[type=number] {\n appearance:textfield;\n -moz-appearance:textfield; /* Firefox */\n } \n"])), function (p) { return p.theme.font.bodyMedium; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.disabled && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n color: ", ";\n "], ["\n color: ", ";\n "])), p.theme.colors.neutral[50]); });
78
78
  var Input = function (props) { return React.createElement(InputStyled, __assign({}, props)); };
79
79
  Input.displayName = 'Input';
80
80
  export { Input };
81
- var templateObject_1;
81
+ var templateObject_1, templateObject_2;
@@ -41,7 +41,7 @@ var MonthRangeBase = function (props) {
41
41
  refs: [wrapperRef, bodyRef],
42
42
  onClose: function () { return setOpen(false); },
43
43
  escapeToClose: true,
44
- blurToClose: true
44
+ blurToClose: false
45
45
  });
46
46
  var handleToggle = function () {
47
47
  if (!open) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@longline/aqua-ui",
3
- "version": "1.0.231",
3
+ "version": "1.0.233",
4
4
  "description": "AquaUI",
5
5
  "author": "Alexander van Oostenrijk / Longline Environment",
6
6
  "license": "Commercial",
@@ -59,7 +59,7 @@ var DialogBase = function (props) {
59
59
  refs: [windowRef],
60
60
  onClose: close,
61
61
  escapeToClose: true,
62
- blurToClose: true
62
+ blurToClose: false
63
63
  });
64
64
  React.useEffect(function () {
65
65
  toggle(props.open);