@royaloperahouse/harmonic 0.18.3-g → 0.18.3-h
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.
- package/dist/components/molecules/Select2/Select2.d.ts +1 -1
- package/dist/harmonic.cjs.development.js +92 -31
- package/dist/harmonic.cjs.development.js.map +1 -1
- package/dist/harmonic.cjs.production.min.js +1 -1
- package/dist/harmonic.cjs.production.min.js.map +1 -1
- package/dist/harmonic.esm.js +92 -31
- package/dist/harmonic.esm.js.map +1 -1
- package/package.json +1 -1
|
@@ -2,7 +2,7 @@ import React, { FunctionComponent } from 'react';
|
|
|
2
2
|
import { DropdownIndicatorProps } from 'react-select';
|
|
3
3
|
import { ISelect2Props } from '../../../types/formTypes';
|
|
4
4
|
export declare const DropdownIndicator: (props: DropdownIndicatorProps) => React.JSX.Element;
|
|
5
|
-
interface IWrapperProps extends Pick<ISelect2Props, 'label' | 'error' | 'width' | 'darkMode'> {
|
|
5
|
+
interface IWrapperProps extends Pick<ISelect2Props, 'label' | 'error' | 'width' | 'darkMode' | 'className'> {
|
|
6
6
|
children: React.ReactNode;
|
|
7
7
|
}
|
|
8
8
|
export declare const WrapperComponent: FunctionComponent<IWrapperProps>;
|
|
@@ -5990,21 +5990,69 @@ var Accordion = function Accordion(_ref) {
|
|
|
5990
5990
|
var content = React.useRef(null);
|
|
5991
5991
|
var timeoutRef = React.useRef(null);
|
|
5992
5992
|
var rafRef = React.useRef(null);
|
|
5993
|
+
var resizeObserverRef = React.useRef(null);
|
|
5994
|
+
var intervalRef = React.useRef(null);
|
|
5993
5995
|
React.useEffect(function () {
|
|
5994
|
-
if (content
|
|
5996
|
+
if (content.current && initOpen) {
|
|
5995
5997
|
setTextHeight(content.current.scrollHeight + "px");
|
|
5996
5998
|
}
|
|
5997
|
-
}, [
|
|
5999
|
+
}, [initOpen]);
|
|
5998
6000
|
React.useEffect(function () {
|
|
5999
|
-
|
|
6000
|
-
|
|
6001
|
-
|
|
6002
|
-
|
|
6003
|
-
|
|
6004
|
-
|
|
6001
|
+
var cleanup = function cleanup() {
|
|
6002
|
+
return undefined;
|
|
6003
|
+
};
|
|
6004
|
+
var el = content.current;
|
|
6005
|
+
if (!el) return cleanup;
|
|
6006
|
+
if (!openAccordion) {
|
|
6005
6007
|
setTextHeight('0px');
|
|
6008
|
+
if (resizeObserverRef.current) {
|
|
6009
|
+
resizeObserverRef.current.disconnect();
|
|
6010
|
+
resizeObserverRef.current = null;
|
|
6011
|
+
}
|
|
6012
|
+
if (intervalRef.current) {
|
|
6013
|
+
window.clearInterval(intervalRef.current);
|
|
6014
|
+
intervalRef.current = null;
|
|
6015
|
+
}
|
|
6016
|
+
if (rafRef.current) {
|
|
6017
|
+
window.cancelAnimationFrame(rafRef.current);
|
|
6018
|
+
rafRef.current = null;
|
|
6019
|
+
}
|
|
6020
|
+
return cleanup;
|
|
6021
|
+
}
|
|
6022
|
+
var updateHeight = function updateHeight() {
|
|
6023
|
+
setTextHeight(el.scrollHeight + "px");
|
|
6024
|
+
};
|
|
6025
|
+
rafRef.current = window.requestAnimationFrame(updateHeight);
|
|
6026
|
+
if (typeof ResizeObserver !== 'undefined') {
|
|
6027
|
+
var ro = new ResizeObserver(updateHeight);
|
|
6028
|
+
ro.observe(el);
|
|
6029
|
+
resizeObserverRef.current = ro;
|
|
6030
|
+
intervalRef.current = window.setInterval(updateHeight, 200);
|
|
6031
|
+
return function () {
|
|
6032
|
+
ro.disconnect();
|
|
6033
|
+
resizeObserverRef.current = null;
|
|
6034
|
+
if (intervalRef.current) {
|
|
6035
|
+
window.clearInterval(intervalRef.current);
|
|
6036
|
+
intervalRef.current = null;
|
|
6037
|
+
}
|
|
6038
|
+
if (rafRef.current) {
|
|
6039
|
+
window.cancelAnimationFrame(rafRef.current);
|
|
6040
|
+
rafRef.current = null;
|
|
6041
|
+
}
|
|
6042
|
+
};
|
|
6006
6043
|
}
|
|
6007
|
-
|
|
6044
|
+
intervalRef.current = window.setInterval(updateHeight, 200);
|
|
6045
|
+
return function () {
|
|
6046
|
+
if (intervalRef.current) {
|
|
6047
|
+
window.clearInterval(intervalRef.current);
|
|
6048
|
+
intervalRef.current = null;
|
|
6049
|
+
}
|
|
6050
|
+
if (rafRef.current) {
|
|
6051
|
+
window.cancelAnimationFrame(rafRef.current);
|
|
6052
|
+
rafRef.current = null;
|
|
6053
|
+
}
|
|
6054
|
+
};
|
|
6055
|
+
}, [openAccordion, childrenVisibility, children]);
|
|
6008
6056
|
React.useEffect(function () {
|
|
6009
6057
|
return function () {
|
|
6010
6058
|
if (timeoutRef.current) {
|
|
@@ -6015,6 +6063,14 @@ var Accordion = function Accordion(_ref) {
|
|
|
6015
6063
|
window.cancelAnimationFrame(rafRef.current);
|
|
6016
6064
|
rafRef.current = null;
|
|
6017
6065
|
}
|
|
6066
|
+
if (resizeObserverRef.current) {
|
|
6067
|
+
resizeObserverRef.current.disconnect();
|
|
6068
|
+
resizeObserverRef.current = null;
|
|
6069
|
+
}
|
|
6070
|
+
if (intervalRef.current) {
|
|
6071
|
+
window.clearInterval(intervalRef.current);
|
|
6072
|
+
intervalRef.current = null;
|
|
6073
|
+
}
|
|
6018
6074
|
};
|
|
6019
6075
|
}, []);
|
|
6020
6076
|
var toggleAccordion = function toggleAccordion() {
|
|
@@ -10006,35 +10062,35 @@ function Select(_ref3) {
|
|
|
10006
10062
|
|
|
10007
10063
|
var _templateObject$1a, _templateObject2$U, _templateObject3$G, _templateObject4$y;
|
|
10008
10064
|
var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
10009
|
-
var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: auto;\n max-width: ", ";\n\n .harmonic-select__control {\n min-height: 48px;\n border-radius: 0;\n transition: none;\n border: ", ";\n &:hover {\n border-color: ", ";\n }\n }\n .harmonic-select__control--is-focused {\n border-color: var(--base-
|
|
10065
|
+
var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: auto;\n max-width: ", ";\n\n .harmonic-select__control {\n min-height: 48px;\n border-radius: 0;\n transition: none;\n border: ", ";\n &:hover {\n border-color: ", ";\n }\n }\n\n .harmonic-select__control--is-focused {\n border-color: var(--color-base-dark-grey);\n box-shadow: ", ";\n }\n\n .harmonic-select__control--menu-is-open {\n .harmonic-select__indicator {\n svg {\n transform: rotate(180deg);\n }\n }\n }\n\n .harmonic-select__indicator {\n font-size: 25px;\n padding: 0;\n margin-right: 12px;\n color: var(--color-base-black);\n svg {\n height: 1em;\n width: 1em;\n color: inherit;\n path {\n fill: currentColor;\n color: inherit;\n }\n }\n }\n\n .harmonic-select__single-value,\n .harmonic-select__placeholder {\n margin-left: 0;\n margin-right: 0;\n font-family: var(--font-family-sans);\n font-weight: 400;\n font-size: 19px;\n line-height: 26px;\n letter-spacing: -0.5px;\n\n @media ", " {\n font-size: 17px;\n }\n }\n\n .harmonic-select__placeholder {\n color: var(--color-base-dark-grey);\n }\n\n .harmonic-select__single-value {\n color: var(--color-base-black);\n }\n\n .harmonic-select__value-container {\n padding-left: 20px;\n padding-right: 20px;\n padding-top: 1px;\n padding-bottom: 0px;\n }\n\n .harmonic-select--is-disabled {\n .harmonic-select__control {\n border: 1px solid var(--color-base-light-grey);\n background: var(--color-base-light-grey);\n }\n .harmonic-select__indicator,\n .harmonic-select__single-value {\n color: var(--color-base-dark-grey);\n }\n }\n\n .harmonic-select__menu {\n margin-top: -1px;\n box-shadow: none;\n border-radius: 0;\n border: 1px solid var(--color-base-dark-grey);\n background: var(--color-base-light-grey);\n }\n\n .harmonic-select__menu-list {\n padding-top: 0;\n padding-bottom: 0;\n }\n\n .harmonic-select__option {\n padding: 10px 20px;\n font-family: var(--font-family-sans);\n font-weight: 400;\n font-size: 19px;\n line-height: 26px;\n letter-spacing: -0.5px;\n color: var(--color-base-black);\n\n @media ", " {\n font-size: 17px;\n }\n\n &:active,\n &.harmonic-select__option--is-focused {\n background: var(--color-base-mid-grey);\n }\n }\n\n .harmonic-select__option--is-selected {\n color: var(--color-base-black);\n background: none;\n }\n\n .harmonic-select__input-container {\n margin: 0;\n padding-top: 0;\n padding-bottom: 0;\n color: var(--color-base-black);\n }\n\n .harmonic-select__menu-notice {\n color: var(--color-base-black);\n padding: 20px 20px;\n text-align: left;\n }\n\n .harmonic-select__menu-notice--loading {\n font-style: italic;\n }\n"])), function (_ref) {
|
|
10010
10066
|
var width = _ref.width;
|
|
10011
10067
|
if (!width) return 'none';
|
|
10012
10068
|
return width + "px";
|
|
10013
10069
|
}, function (_ref2) {
|
|
10014
10070
|
var error = _ref2.error;
|
|
10015
|
-
if (error !== undefined) return "1px solid var(--base-
|
|
10016
|
-
return "1px solid var(--base-
|
|
10071
|
+
if (error !== undefined) return "1px solid var(--color-base-errorstate)";
|
|
10072
|
+
return "1px solid var(--color-base-dark-grey)";
|
|
10017
10073
|
}, function (_ref3) {
|
|
10018
10074
|
var error = _ref3.error;
|
|
10019
|
-
if (error !== undefined) return "var(--base-
|
|
10020
|
-
return "var(--base-
|
|
10075
|
+
if (error !== undefined) return "var(--color-base-errorstate)";
|
|
10076
|
+
return "var(--color-base-dark-grey)";
|
|
10021
10077
|
}, function (_ref4) {
|
|
10022
10078
|
var darkMode = _ref4.darkMode;
|
|
10023
|
-
if (darkMode) return "0 0 0
|
|
10024
|
-
return "0 0 0
|
|
10025
|
-
});
|
|
10026
|
-
var TextLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 0
|
|
10079
|
+
if (darkMode) return "0 0 0 1px var(--color-state-medium)";
|
|
10080
|
+
return "0 0 0 1px var(--color-state-focused)";
|
|
10081
|
+
}, devices.mobile, devices.mobile);
|
|
10082
|
+
var TextLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 0 24px;\n color: ", ";\n\n @media ", " {\n margin: 0 0 12px;\n }\n"])), function (_ref5) {
|
|
10027
10083
|
var darkMode = _ref5.darkMode;
|
|
10028
|
-
if (darkMode) return "var(--base-
|
|
10029
|
-
return "var(--base-
|
|
10030
|
-
});
|
|
10084
|
+
if (darkMode) return "var(--color-base-white)";
|
|
10085
|
+
return "var(--color-base-black)";
|
|
10086
|
+
}, devices.mobile);
|
|
10031
10087
|
var ErrorLabel$5 = /*#__PURE__*/styled__default.div(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 20px 0 0;\n color: ", ";\n"])), function (_ref6) {
|
|
10032
10088
|
var darkMode = _ref6.darkMode;
|
|
10033
|
-
if (darkMode) return "var(--base-
|
|
10034
|
-
return "var(--base-
|
|
10089
|
+
if (darkMode) return "var(--color-base-white)";
|
|
10090
|
+
return "var(--color-base-errorstate)";
|
|
10035
10091
|
});
|
|
10036
10092
|
|
|
10037
|
-
var _excluded$o = ["label", "error", "width", "darkMode", "isSearchable", "components"];
|
|
10093
|
+
var _excluded$o = ["label", "error", "width", "darkMode", "isSearchable", "components", "className"];
|
|
10038
10094
|
var DropdownIndicator = function DropdownIndicator(props) {
|
|
10039
10095
|
return /*#__PURE__*/React__default.createElement(Select$1.components.DropdownIndicator, Object.assign({}, props), /*#__PURE__*/React__default.createElement(Icon, {
|
|
10040
10096
|
iconName: "DropdownArrow"
|
|
@@ -10045,12 +10101,15 @@ var WrapperComponent = function WrapperComponent(_ref) {
|
|
|
10045
10101
|
error = _ref.error,
|
|
10046
10102
|
width = _ref.width,
|
|
10047
10103
|
darkMode = _ref.darkMode,
|
|
10048
|
-
children = _ref.children
|
|
10049
|
-
|
|
10104
|
+
children = _ref.children,
|
|
10105
|
+
className = _ref.className;
|
|
10106
|
+
return /*#__PURE__*/React__default.createElement(Container$4, {
|
|
10107
|
+
className: className
|
|
10108
|
+
}, /*#__PURE__*/React__default.createElement("label", null, !!label && (/*#__PURE__*/React__default.createElement(TextLabel$4, {
|
|
10050
10109
|
darkMode: darkMode,
|
|
10051
10110
|
"data-testid": "select2-text-label"
|
|
10052
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
10053
|
-
|
|
10111
|
+
}, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
10112
|
+
size: "large"
|
|
10054
10113
|
}, label))), /*#__PURE__*/React__default.createElement(SelectWrapper$1, {
|
|
10055
10114
|
width: width,
|
|
10056
10115
|
error: error,
|
|
@@ -10058,8 +10117,8 @@ var WrapperComponent = function WrapperComponent(_ref) {
|
|
|
10058
10117
|
}, children)), !!error && (/*#__PURE__*/React__default.createElement(ErrorLabel$5, {
|
|
10059
10118
|
darkMode: darkMode,
|
|
10060
10119
|
"data-testid": "select2-error-label"
|
|
10061
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
10062
|
-
|
|
10120
|
+
}, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
10121
|
+
size: "medium"
|
|
10063
10122
|
}, error))));
|
|
10064
10123
|
};
|
|
10065
10124
|
/**
|
|
@@ -10085,12 +10144,14 @@ var SelectComponent = function SelectComponent(_ref2) {
|
|
|
10085
10144
|
_ref2$isSearchable = _ref2.isSearchable,
|
|
10086
10145
|
isSearchable = _ref2$isSearchable === void 0 ? false : _ref2$isSearchable,
|
|
10087
10146
|
components = _ref2.components,
|
|
10147
|
+
className = _ref2.className,
|
|
10088
10148
|
selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$o);
|
|
10089
10149
|
return /*#__PURE__*/React__default.createElement(WrapperComponent, {
|
|
10090
10150
|
label: label,
|
|
10091
10151
|
error: error,
|
|
10092
10152
|
width: width,
|
|
10093
|
-
darkMode: darkMode
|
|
10153
|
+
darkMode: darkMode,
|
|
10154
|
+
className: className
|
|
10094
10155
|
}, /*#__PURE__*/React__default.createElement(Select$1__default, Object.assign({}, selectProps, {
|
|
10095
10156
|
components: _extends({
|
|
10096
10157
|
DropdownIndicator: DropdownIndicator,
|