@longline/aqua-ui 1.0.49 → 1.0.51
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.
|
@@ -18,6 +18,8 @@ interface IProps {
|
|
|
18
18
|
search?: string;
|
|
19
19
|
/** If set, list items will be extra tall. */
|
|
20
20
|
tall?: boolean;
|
|
21
|
+
/** Minimum body width for narrow dropdowns. */
|
|
22
|
+
minBodyWidth?: number;
|
|
21
23
|
}
|
|
22
24
|
declare const Body: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<IProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
23
25
|
ref?: React.Ref<HTMLDivElement>;
|
package/inputs/Dropdown/Body.js
CHANGED
|
@@ -6,9 +6,15 @@ import * as React from 'react';
|
|
|
6
6
|
import styled, { css } from 'styled-components';
|
|
7
7
|
import { List } from '../../containers/List';
|
|
8
8
|
var BodyBase = React.forwardRef(function (props, ref) {
|
|
9
|
-
|
|
9
|
+
var wrapperRef = React.useRef(null);
|
|
10
|
+
// Determine if dropdown is on the left or right-hand side of the viewport:
|
|
11
|
+
var isRight = true;
|
|
12
|
+
if (wrapperRef.current) {
|
|
13
|
+
isRight = wrapperRef.current.getBoundingClientRect().left > window.innerWidth / 2;
|
|
14
|
+
}
|
|
15
|
+
return (React.createElement("div", { className: "".concat(props.className, " ").concat(isRight ? 'right' : ''), tabIndex: -1, ref: wrapperRef },
|
|
10
16
|
React.createElement(List, { tall: props.tall, maxItems: props.maxItems, contract: true, onSearch: props.onSearch, ref: ref }, props.children)));
|
|
11
17
|
});
|
|
12
|
-
var Body = styled(BodyBase)(
|
|
18
|
+
var Body = styled(BodyBase)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n position: absolute;\n z-index: 100;\n box-sizing: border-box;\n outline: none;\n visibility: ", ";\n font: ", ";\n\n // Width:\n ", "\n ", "\n \n // Transparent fill be placed over thick FieldWrapper's border.\n ", "\n\n // In case of minBodyWidth, left or right align the body depending\n // on where the Dropdown is in the viewport:\n ", "\n\n // Dropbox can open upwards or downwards. This affects its positioning \n // relative to the parent.\n // Transparent Dropdowns have more distance from the selector so that\n // they appear outside of the FieldWrapper.\n ", "\n ", "\n\n transition: opacity ", "ms ease-in-out,\n max-height 0ms linear ", "ms;\n max-height: 0;\n opacity: 0;\n ", "\n"], ["\n position: absolute;\n z-index: 100;\n box-sizing: border-box;\n outline: none;\n visibility: ", ";\n font: ", ";\n\n // Width:\n ", "\n ", "\n \n // Transparent fill be placed over thick FieldWrapper's border.\n ", "\n\n // In case of minBodyWidth, left or right align the body depending\n // on where the Dropdown is in the viewport:\n ", "\n\n // Dropbox can open upwards or downwards. This affects its positioning \n // relative to the parent.\n // Transparent Dropdowns have more distance from the selector so that\n // they appear outside of the FieldWrapper.\n ", "\n ", "\n\n transition: opacity ", "ms ease-in-out,\n max-height 0ms linear ", "ms;\n max-height: 0;\n opacity: 0;\n ", "\n"])), function (p) { return p.open ? 'visible' : 'hidden'; }, function (p) { return p.theme.font.bodyMedium; }, function (p) { return p.minBodyWidth && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n min-width: ", "px;\n "], ["\n min-width: ", "px;\n "])), p.minBodyWidth); }, function (p) { return !p.transparent && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["width: 100%;"], ["width: 100%;"]))); }, function (p) { return p.transparent && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["left: -2px; right: -2px;"], ["left: -2px; right: -2px;"]))); }, function (p) { return p.minBodyWidth && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n left: 0;\n right: auto;\n &.right {\n right: 0;\n left: auto;\n }\n "], ["\n left: 0;\n right: auto;\n &.right {\n right: 0;\n left: auto;\n }\n "]))); }, function (p) { return p.upwards && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n bottom: calc(100% + ", ");\n "], ["\n bottom: calc(100% + ", ");\n "])), p.transparent ? "30px" : "8px"); }, function (p) { return !p.upwards && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n top: calc(100% + ", ");\n "], ["\n top: calc(100% + ", ");\n "])), p.transparent ? "30px" : "8px"); }, function (p) { return p.theme.animation.duration * 0; }, function (p) { return p.theme.animation.duration * 0; }, function (p) { return p.open && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n transition: opacity ", "ms ease-in,\n max-height 0ms linear;\n max-height: 1000px;\n opacity: 1;\n "], ["\n transition: opacity ", "ms ease-in,\n max-height 0ms linear;\n max-height: 1000px;\n opacity: 1;\n "])), function (p) { return p.theme.animation.duration; }); });
|
|
13
19
|
export { Body };
|
|
14
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|
|
20
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
|
|
@@ -90,6 +90,10 @@ interface IDropdownProps {
|
|
|
90
90
|
* If set, list items will be extra tall.
|
|
91
91
|
*/
|
|
92
92
|
tall?: boolean;
|
|
93
|
+
/**
|
|
94
|
+
* A minimum body width can be set for dropdowns that are very narrow.
|
|
95
|
+
*/
|
|
96
|
+
minBodyWidth?: number;
|
|
93
97
|
/**
|
|
94
98
|
* Fired when the Dropdown value changes.
|
|
95
99
|
*/
|
|
@@ -395,7 +395,7 @@ var DropdownBase = function (props) {
|
|
|
395
395
|
var children = getBodyChildren();
|
|
396
396
|
return (React.createElement("div", { className: props.className, tabIndex: props.disabled ? -1 : 0, ref: wrapperRef, onKeyDown: handleKeyDown, onClick: handleClickDropdown },
|
|
397
397
|
React.createElement(Selector, { open: open, error: props.error, disabled: props.disabled, upwards: upwards, transparent: props.transparent, ghost: props.ghost, multiple: props.multiple, onClick: handleSelectorClicked, onClear: (props.clearable && !showPlaceholder) ? handleClear : null, placeholder: showPlaceholder }, label),
|
|
398
|
-
React.createElement(Body, { ref: bodyRef, upwards: upwards, open: open, transparent: props.transparent, maxItems: props.maxItems, onSearch: props.onSearch ? handleSearch : null, search: search, tall: props.tall }, children)));
|
|
398
|
+
React.createElement(Body, { ref: bodyRef, upwards: upwards, open: open, transparent: props.transparent, maxItems: props.maxItems, onSearch: props.onSearch ? handleSearch : null, search: search, tall: props.tall, minBodyWidth: props.minBodyWidth }, children)));
|
|
399
399
|
};
|
|
400
400
|
var DropdownStyled = styled(DropdownBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n // Dropdown has a minimum width. \n width: 250px;\n // A fluid Dropdown occupies full horizontal width. \n ", " \n outline: none;\n user-select: none;\n font: ", ";\n color: ", ";\n"], ["\n position: relative;\n // Dropdown has a minimum width. \n width: 250px;\n // A fluid Dropdown occupies full horizontal width. \n ", " \n outline: none;\n user-select: none;\n font: ", ";\n color: ", ";\n"
|
|
401
401
|
/**
|
package/inputs/Slider/Slider.js
CHANGED
|
@@ -177,13 +177,13 @@ var Knob = styled.div(templateObject_12 || (templateObject_12 = __makeTemplateOb
|
|
|
177
177
|
var KnobPosition = styled.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0px;\n z-index: 0; // Required z-offset for Knob::before\n"], ["\n position: absolute;\n left: 0;\n top: 0px;\n z-index: 0; // Required z-offset for Knob::before\n"])));
|
|
178
178
|
var TrackFill = styled.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n right: 50%;\n background-color: ", ";\n ", "\n ", " \n border-radius: 2px;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n right: 50%;\n background-color: ", ";\n ", "\n ", " \n border-radius: 2px;\n"])), function (p) { return p.theme.colors.primary[1]; }, function (p) { return p.$error && css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), p.theme.colors.negative); }, function (p) { return p.$disabled && css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), p.theme.colors.neutral[30]); });
|
|
179
179
|
var Track = styled.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n position: relative;\n height: 4px;\n border-radius: 2px;\n box-sizing: border-box;\n background-color: ", ";\n\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n padding-top: 1px;\n padding-left: 2px;\n padding-right: 2px;\n"], ["\n position: relative;\n height: 4px;\n border-radius: 2px;\n box-sizing: border-box;\n background-color: ", ";\n\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n padding-top: 1px;\n padding-left: 2px;\n padding-right: 2px;\n"])), function (p) { return p.theme.colors.primary[5]; });
|
|
180
|
-
var SliderStyled = styled(SliderBase)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n position: relative;\n min-width: ", ";\n box-sizing: border-box;\n // Padding above and below to capture mouse-down\n padding-top:
|
|
180
|
+
var SliderStyled = styled(SliderBase)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n position: relative;\n min-width: ", ";\n box-sizing: border-box;\n // Padding above and below to capture mouse-down\n padding-top: 52px;\n padding-bottom: 14px;\n ", "\n cursor: ", ";\n user-select: none;\n outline: none;\n ", "\n\n ", "\n"], ["\n position: relative;\n min-width: ", ";\n box-sizing: border-box;\n // Padding above and below to capture mouse-down\n padding-top: 52px;\n padding-bottom: 14px;\n ", "\n cursor: ", ";\n user-select: none;\n outline: none;\n ", "\n\n ", "\n"
|
|
181
181
|
/**
|
|
182
182
|
* Sliders allow users to view and select a value (or range) along a track.
|
|
183
183
|
* They're ideal for adjusting settings such as volume and brightness, or for
|
|
184
184
|
* applying image filters.
|
|
185
185
|
*/
|
|
186
|
-
])), function (p) { return p.fluid == true ? '100%' : '200px'; }, function (p) { return p.padded && css(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n padding-left:
|
|
186
|
+
])), function (p) { return p.fluid == true ? '100%' : '200px'; }, function (p) { return p.padded && css(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n padding-left: 20px;\n padding-right: 20px;\n "], ["\n padding-left: 20px;\n padding-right: 20px;\n "]))); }, function (p) { return p.disabled ? 'auto' : 'pointer'; }, function (p) { return p.disabled && css(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n pointer-events: none;\n "], ["\n pointer-events: none;\n "]))); }, function (p) { return !p.disabled && css(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n // Focus ring:\n &:focus ", ":before {\n animation: ", " 2s linear infinite;\n }\n\n &:hover ", ":before {\n animation: none;\n opacity: 0.7;\n } \n\n // Active focus ring:\n &:active ", ":before {\n animation: none;\n opacity: 1;\n }\n "], ["\n // Focus ring:\n &:focus ", ":before {\n animation: ", " 2s linear infinite;\n }\n\n &:hover ", ":before {\n animation: none;\n opacity: 0.7;\n } \n\n // Active focus ring:\n &:active ", ":before {\n animation: none;\n opacity: 1;\n }\n "])), Knob, Pulse, Knob, Knob); });
|
|
187
187
|
/**
|
|
188
188
|
* Sliders allow users to view and select a value (or range) along a track.
|
|
189
189
|
* They're ideal for adjusting settings such as volume and brightness, or for
|