@longline/aqua-ui 1.0.46 → 1.0.48

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.
@@ -27,10 +27,11 @@ var BoxWrapperBase = function (props) {
27
27
  };
28
28
  return (React.createElement("div", { className: props.className, onClick: handleClick, ref: wrapper },
29
29
  props.label,
30
- props.children,
30
+ React.createElement(Control, null, props.children),
31
31
  React.createElement(HintBackground, null, props.hint)));
32
32
  };
33
33
  var HintBackground = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: absolute;\n left: 0;\n bottom: 0;\n right: 0;\n height: 22px;\n border-bottom-left-radius: ", "px;\n border-bottom-right-radius: ", "px;\n"], ["\n position: absolute;\n left: 0;\n bottom: 0;\n right: 0;\n height: 22px;\n border-bottom-left-radius: ", "px;\n border-bottom-right-radius: ", "px;\n"])), function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.radius.normal; });
34
- var BoxWrapper = styled(BoxWrapperBase)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n // Size:\n position: relative;\n box-sizing: border-box;\n margin-bottom: 8px;\n height: 80px;\n \n // Appearance:\n border-radius: ", "px;\n background-color: ", ";\n border: none;\n\n // Content:\n display: flex;\n align-items: center;\n justify-content: start;\n\n // Hint/error background:\n ", " {\n ", "\n }\n\n // Hover:\n &:hover {\n outline: solid 2px ", ";\n }\n\n &:focus-within {\n outline: solid 2px ", ";\n } \n\n ", " {\n position: absolute;\n left: 12px;\n right: 12px;\n top: 10px;\n color: ", ";\n }\n\n ", " {\n position: absolute;\n left: 12px;\n right: 12px;\n bottom: 2px;\n color: ", ";\n }\n\n // Error state:\n ", "\n\n // Disabled state:\n ", "\n\n // Ghost state:\n ", "\n\n // Fields may provide their weight in relative units to other fields.\n ", "\n"], ["\n // Size:\n position: relative;\n box-sizing: border-box;\n margin-bottom: 8px;\n height: 80px;\n \n // Appearance:\n border-radius: ", "px;\n background-color: ", ";\n border: none;\n\n // Content:\n display: flex;\n align-items: center;\n justify-content: start;\n\n // Hint/error background:\n ", " {\n ", "\n }\n\n // Hover:\n &:hover {\n outline: solid 2px ", ";\n }\n\n &:focus-within {\n outline: solid 2px ", ";\n } \n\n ", " {\n position: absolute;\n left: 12px;\n right: 12px;\n top: 10px;\n color: ", ";\n }\n\n ", " {\n position: absolute;\n left: 12px;\n right: 12px;\n bottom: 2px;\n color: ", ";\n }\n\n // Error state:\n ", "\n\n // Disabled state:\n ", "\n\n // Ghost state:\n ", "\n\n // Fields may provide their weight in relative units to other fields.\n ", "\n"])), function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.colors.neutral[100]; }, HintBackground, function (p) { return !p.ghost && !p.disabled && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background: ", ";\n "], ["\n background: ", ";\n "])), p.error ? p.theme.colors.negative : p.theme.colors.neutral[95]); }, function (p) { return p.theme.colors.primary[2]; }, function (p) { return p.theme.colors.primary[1]; }, Label, function (p) { return p.theme.colors.primary[2]; }, Hint, function (p) { return p.error ? p.theme.colors.neutral[100] : p.theme.colors.primary[3]; }, function (p) { return p.error && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n outline: solid 2px ", ";\n &:hover, &:focus-within {\n outline: solid 2px ", ";\n }\n "], ["\n outline: solid 2px ", ";\n &:hover, &:focus-within {\n outline: solid 2px ", ";\n }\n "])), p.theme.colors.negative, p.theme.colors.negative); }, function (p) { return p.disabled && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n user-select: none;\n outline: solid 2px ", ";\n background-color: ", ";\n pointer-events: none;\n ", " {\n color: ", ";\n }\n ", " {\n color: ", ";\n }\n "], ["\n user-select: none;\n outline: solid 2px ", ";\n background-color: ", ";\n pointer-events: none;\n ", " {\n color: ", ";\n }\n ", " {\n color: ", ";\n }\n "])), p.theme.colors.primary[4], p.theme.colors.primary[4], Label, p.theme.colors.neutral[50], Hint, p.theme.colors.neutral[50]); }, function (p) { return p.ghost && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n outline: dashed 1px ", ";\n background-color: transparent;\n pointer-events: none;\n\n ", " {\n color: transparent;\n text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n } \n ", " {\n color: transparent;\n text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n } \n "], ["\n outline: dashed 1px ", ";\n background-color: transparent;\n pointer-events: none;\n\n ", " {\n color: transparent;\n text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n } \n ", " {\n color: transparent;\n text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n } \n "])), p.theme.colors.primary[2], Label, function (p) { return p.theme.colors.primary[1]; }, Hint, function (p) { return p.theme.colors.primary[1]; }); }, function (p) { return p.weight && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["flex: ", ""], ["flex: ", ""])), p.weight); });
34
+ var Control = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding-top: 25px;\n padding-bottom: 25px;\n"], ["\n display: flex;\n align-items: center;\n padding-top: 25px;\n padding-bottom: 25px;\n"])));
35
+ var BoxWrapper = styled(BoxWrapperBase)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n // Size:\n position: relative;\n box-sizing: border-box;\n margin-bottom: 8px;\n min-height: 80px;\n \n // Appearance:\n border-radius: ", "px;\n background-color: ", ";\n border: none;\n\n // Hint/error background:\n ", " {\n ", "\n }\n\n // Hover:\n &:hover {\n outline: solid 2px ", ";\n }\n\n &:focus-within {\n outline: solid 2px ", ";\n } \n\n ", " {\n position: absolute;\n left: 12px;\n right: 12px;\n top: 10px;\n color: ", ";\n }\n\n ", " {\n position: absolute;\n left: 12px;\n right: 12px;\n bottom: 2px;\n color: ", ";\n }\n\n // Error state:\n ", "\n\n // Disabled state:\n ", "\n\n // Ghost state:\n ", "\n\n // Fields may provide their weight in relative units to other fields.\n ", "\n"], ["\n // Size:\n position: relative;\n box-sizing: border-box;\n margin-bottom: 8px;\n min-height: 80px;\n \n // Appearance:\n border-radius: ", "px;\n background-color: ", ";\n border: none;\n\n // Hint/error background:\n ", " {\n ", "\n }\n\n // Hover:\n &:hover {\n outline: solid 2px ", ";\n }\n\n &:focus-within {\n outline: solid 2px ", ";\n } \n\n ", " {\n position: absolute;\n left: 12px;\n right: 12px;\n top: 10px;\n color: ", ";\n }\n\n ", " {\n position: absolute;\n left: 12px;\n right: 12px;\n bottom: 2px;\n color: ", ";\n }\n\n // Error state:\n ", "\n\n // Disabled state:\n ", "\n\n // Ghost state:\n ", "\n\n // Fields may provide their weight in relative units to other fields.\n ", "\n"])), function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.colors.neutral[100]; }, HintBackground, function (p) { return !p.ghost && !p.disabled && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background: ", ";\n "], ["\n background: ", ";\n "])), p.error ? p.theme.colors.negative : p.theme.colors.neutral[95]); }, function (p) { return p.theme.colors.primary[2]; }, function (p) { return p.theme.colors.primary[1]; }, Label, function (p) { return p.theme.colors.primary[2]; }, Hint, function (p) { return p.error ? p.theme.colors.neutral[100] : p.theme.colors.primary[3]; }, function (p) { return p.error && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n outline: solid 2px ", ";\n &:hover, &:focus-within {\n outline: solid 2px ", ";\n }\n "], ["\n outline: solid 2px ", ";\n &:hover, &:focus-within {\n outline: solid 2px ", ";\n }\n "])), p.theme.colors.negative, p.theme.colors.negative); }, function (p) { return p.disabled && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n user-select: none;\n outline: solid 2px ", ";\n background-color: ", ";\n pointer-events: none;\n ", " {\n color: ", ";\n }\n ", " {\n color: ", ";\n }\n "], ["\n user-select: none;\n outline: solid 2px ", ";\n background-color: ", ";\n pointer-events: none;\n ", " {\n color: ", ";\n }\n ", " {\n color: ", ";\n }\n "])), p.theme.colors.primary[4], p.theme.colors.primary[4], Label, p.theme.colors.neutral[50], Hint, p.theme.colors.neutral[50]); }, function (p) { return p.ghost && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n outline: dashed 1px ", ";\n background-color: transparent;\n pointer-events: none;\n\n ", " {\n color: transparent;\n text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n } \n ", " {\n color: transparent;\n text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n } \n "], ["\n outline: dashed 1px ", ";\n background-color: transparent;\n pointer-events: none;\n\n ", " {\n color: transparent;\n text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n } \n ", " {\n color: transparent;\n text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n } \n "])), p.theme.colors.primary[2], Label, function (p) { return p.theme.colors.primary[1]; }, Hint, function (p) { return p.theme.colors.primary[1]; }); }, function (p) { return p.weight && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["flex: ", ""], ["flex: ", ""])), p.weight); });
35
36
  export { BoxWrapper };
36
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
37
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
@@ -6,9 +6,9 @@ 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
- return React.createElement("div", { className: props.className, tabIndex: -1 },
10
- React.createElement(List, { tall: props.tall, maxItems: props.maxItems, contract: true, onSearch: props.onSearch, ref: ref }, props.children));
9
+ return (React.createElement("div", { className: props.className, tabIndex: -1 },
10
+ React.createElement(List, { tall: props.tall, maxItems: props.maxItems, contract: true, onSearch: props.onSearch, ref: ref }, props.children)));
11
11
  });
12
- var Body = styled(BodyBase)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: absolute;\n z-index: 100;\n box-sizing: border-box;\n overflow-y: hidden;\n outline: none;\n font: ", ";\n\n // Width:\n ", "\n // Transparent fill be placed over thick FieldWrapper's border.\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 overflow-y: hidden;\n outline: none;\n font: ", ";\n\n // Width:\n ", "\n // Transparent fill be placed over thick FieldWrapper's border.\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.theme.font.bodyMedium; }, function (p) { return !p.transparent && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["width: 100%;"], ["width: 100%;"]))); }, function (p) { return p.transparent && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["left: -2px; right: -2px;"], ["left: -2px; right: -2px;"]))); }, function (p) { return p.upwards && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n bottom: calc(100% + ", ");\n "], ["\n bottom: calc(100% + ", ");\n "])), p.transparent ? "30px" : "8px"); }, function (p) { return !p.upwards && css(templateObject_4 || (templateObject_4 = __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_5 || (templateObject_5 = __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; }); });
12
+ var Body = styled(BodyBase)(templateObject_6 || (templateObject_6 = __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 // Transparent fill be placed over thick FieldWrapper's border.\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 // Transparent fill be placed over thick FieldWrapper's border.\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.transparent && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["width: 100%;"], ["width: 100%;"]))); }, function (p) { return p.transparent && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["left: -2px; right: -2px;"], ["left: -2px; right: -2px;"]))); }, function (p) { return p.upwards && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n bottom: calc(100% + ", ");\n "], ["\n bottom: calc(100% + ", ");\n "])), p.transparent ? "30px" : "8px"); }, function (p) { return !p.upwards && css(templateObject_4 || (templateObject_4 = __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_5 || (templateObject_5 = __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
13
  export { Body };
14
14
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
@@ -6,6 +6,11 @@ interface IProps {
6
6
  * Current value.
7
7
  */
8
8
  value?: number;
9
+ /**
10
+ * If set, `Slider` will fill all horizontal space available to it.
11
+ * @default false
12
+ */
13
+ fluid?: boolean;
9
14
  /**
10
15
  * Minimum value.
11
16
  * @default 0
@@ -27,10 +32,6 @@ interface IProps {
27
32
  * `delta` will be 10% of the value range.
28
33
  */
29
34
  delta?: number;
30
- /**
31
- * Event is triggered when slider's value changes.
32
- */
33
- onChange?: (value: number) => void;
34
35
  /**
35
36
  * Should ticks be displayed? If so, how many?
36
37
  * @default 0
@@ -53,11 +54,15 @@ interface IProps {
53
54
  * A `Slider` can be in an `error` state.
54
55
  */
55
56
  error?: boolean;
57
+ /**
58
+ * Event is triggered when slider's value changes.
59
+ */
60
+ onChange?: (value: number) => void;
56
61
  }
57
62
  /**
58
63
  * Sliders allow users to view and select a value (or range) along a track.
59
- * Theyre ideal for adjusting settings such as volume and brightness, or for
64
+ * They're ideal for adjusting settings such as volume and brightness, or for
60
65
  * applying image filters.
61
66
  */
62
- declare const Slider: ({ min, max, ...props }: IProps) => React.JSX.Element;
67
+ declare const Slider: ({ min, max, fluid, ...props }: IProps) => React.JSX.Element;
63
68
  export { Slider, IProps };
@@ -177,21 +177,21 @@ 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: 200px;\n margin-top: 44px;\n padding-top: 8px; // Padding above and below to capture mouse-down\n padding-bottom: 8px;\n ", "\n cursor: ", ";\n user-select: none;\n outline: none;\n ", "\n\n ", "\n"], ["\n position: relative;\n min-width: 200px;\n margin-top: 44px;\n padding-top: 8px; // Padding above and below to capture mouse-down\n padding-bottom: 8px;\n ", "\n cursor: ", ";\n user-select: none;\n outline: none;\n ", "\n\n ", "\n"
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: 48px;\n padding-bottom: 8px;\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: 48px;\n padding-bottom: 8px;\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
- * Theyre ideal for adjusting settings such as volume and brightness, or for
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.padded && css(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n padding-left: 12px;\n padding-right: 12px;\n "], ["\n padding-left: 12px;\n padding-right: 12px;\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); });
186
+ ])), function (p) { return p.fluid == true ? '100%' : '200px'; }, function (p) { return p.padded && css(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n padding-left: 12px;\n padding-right: 12px;\n "], ["\n padding-left: 12px;\n padding-right: 12px;\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
- * Theyre ideal for adjusting settings such as volume and brightness, or for
189
+ * They're ideal for adjusting settings such as volume and brightness, or for
190
190
  * applying image filters.
191
191
  */
192
192
  var Slider = function (_a) {
193
- var _b = _a.min, min = _b === void 0 ? 0 : _b, _c = _a.max, max = _c === void 0 ? 100 : _c, props = __rest(_a, ["min", "max"]);
194
- return React.createElement(SliderStyled, __assign({ min: min, max: max }, props));
193
+ var _b = _a.min, min = _b === void 0 ? 0 : _b, _c = _a.max, max = _c === void 0 ? 100 : _c, _d = _a.fluid, fluid = _d === void 0 ? false : _d, props = __rest(_a, ["min", "max", "fluid"]);
194
+ return React.createElement(SliderStyled, __assign({ min: min, max: max, fluid: fluid }, props));
195
195
  };
196
196
  export { Slider };
197
197
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21;
package/map/Map/Map.d.ts CHANGED
@@ -62,6 +62,11 @@ interface IProps {
62
62
  * @default []
63
63
  */
64
64
  interactiveLayerIDs?: string[];
65
+ /**
66
+ * If set, map cannot be rotated using dragging or touch gestures.
67
+ * @default false
68
+ */
69
+ noRotate?: boolean;
65
70
  /**
66
71
  * Fired when map is loaded.
67
72
  */
@@ -72,5 +77,5 @@ interface IProps {
72
77
  onClick?: (e: MapMouseEvent) => void;
73
78
  }
74
79
  declare const useViewState: () => ViewState;
75
- declare const Map: ({ longitude, latitude, zoom, pitch, bearing, clipped, logoPosition, interactiveLayerIDs, minZoom, maxZoom, ...props }: IProps) => React.JSX.Element;
80
+ declare const Map: ({ longitude, latitude, zoom, pitch, bearing, clipped, logoPosition, interactiveLayerIDs, noRotate, minZoom, maxZoom, ...props }: IProps) => React.JSX.Element;
76
81
  export { Map, useViewState };
package/map/Map/Map.js CHANGED
@@ -201,8 +201,15 @@ var MapBase = function (props) {
201
201
  };
202
202
  }, []);
203
203
  var handleLoad = function (e) {
204
+ var map = e.target;
205
+ if (props.noRotate) {
206
+ // disable map rotation using right click + drag
207
+ map.dragRotate.disable();
208
+ // disable map rotation using touch rotation gesture
209
+ map.touchZoomRotate.disableRotation();
210
+ }
204
211
  if (props.onLoad)
205
- props.onLoad(e.target);
212
+ props.onLoad(map);
206
213
  };
207
214
  var handleMove = function (e) {
208
215
  setViewState(e.viewState);
@@ -218,8 +225,8 @@ var MapBase = function (props) {
218
225
  };
219
226
  var Controls = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n pointer-events: none;\n & > * {\n pointer-events: all;\n }\n\n ", ";\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n pointer-events: none;\n & > * {\n pointer-events: all;\n }\n\n ", ";\n"])), function (p) { return p.theme.font.bodyMedium; });
220
227
  var Map = function (_a) {
221
- var _b = _a.longitude, longitude = _b === void 0 ? -64.6 : _b, _c = _a.latitude, latitude = _c === void 0 ? 44.02 : _c, _d = _a.zoom, zoom = _d === void 0 ? 11 : _d, _e = _a.pitch, pitch = _e === void 0 ? 0 : _e, _f = _a.bearing, bearing = _f === void 0 ? 0 : _f, _g = _a.clipped, clipped = _g === void 0 ? false : _g, _h = _a.logoPosition, logoPosition = _h === void 0 ? 'top-right' : _h, _j = _a.interactiveLayerIDs, interactiveLayerIDs = _j === void 0 ? [] : _j, _k = _a.minZoom, minZoom = _k === void 0 ? 1 : _k, _l = _a.maxZoom, maxZoom = _l === void 0 ? 20 : _l, props = __rest(_a, ["longitude", "latitude", "zoom", "pitch", "bearing", "clipped", "logoPosition", "interactiveLayerIDs", "minZoom", "maxZoom"]);
222
- return React.createElement(MapBase, __assign({ longitude: longitude, latitude: latitude, zoom: zoom, pitch: pitch, bearing: bearing, clipped: clipped, logoPosition: logoPosition, interactiveLayerIDs: interactiveLayerIDs, minZoom: minZoom, maxZoom: maxZoom }, props));
228
+ var _b = _a.longitude, longitude = _b === void 0 ? -64.6 : _b, _c = _a.latitude, latitude = _c === void 0 ? 44.02 : _c, _d = _a.zoom, zoom = _d === void 0 ? 11 : _d, _e = _a.pitch, pitch = _e === void 0 ? 0 : _e, _f = _a.bearing, bearing = _f === void 0 ? 0 : _f, _g = _a.clipped, clipped = _g === void 0 ? false : _g, _h = _a.logoPosition, logoPosition = _h === void 0 ? 'top-right' : _h, _j = _a.interactiveLayerIDs, interactiveLayerIDs = _j === void 0 ? [] : _j, _k = _a.noRotate, noRotate = _k === void 0 ? false : _k, _l = _a.minZoom, minZoom = _l === void 0 ? 1 : _l, _m = _a.maxZoom, maxZoom = _m === void 0 ? 20 : _m, props = __rest(_a, ["longitude", "latitude", "zoom", "pitch", "bearing", "clipped", "logoPosition", "interactiveLayerIDs", "noRotate", "minZoom", "maxZoom"]);
229
+ return React.createElement(MapBase, __assign({ longitude: longitude, latitude: latitude, zoom: zoom, pitch: pitch, bearing: bearing, clipped: clipped, logoPosition: logoPosition, interactiveLayerIDs: interactiveLayerIDs, noRotate: noRotate, minZoom: minZoom, maxZoom: maxZoom }, props));
223
230
  };
224
231
  export { Map, useViewState };
225
232
  var templateObject_1;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@longline/aqua-ui",
3
- "version": "1.0.46",
3
+ "version": "1.0.48",
4
4
  "description": "AquaUI",
5
5
  "author": "Alexander van Oostenrijk / Longline Environment",
6
6
  "license": "Commercial",