@royaloperahouse/harmonic 0.18.3-e → 0.18.3-experiment-2
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/README.md +2 -3
- package/dist/components/molecules/Select2/Select2.d.ts +1 -1
- package/dist/components/molecules/SkipToMain/SkipToMain.style.d.ts +1 -1
- package/dist/harmonic.cjs.development.js +32 -63
- 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 +32 -63
- package/dist/harmonic.esm.js.map +1 -1
- package/package.json +1 -1
package/dist/harmonic.esm.js
CHANGED
|
@@ -5927,43 +5927,21 @@ var Accordion = function Accordion(_ref) {
|
|
|
5927
5927
|
var content = useRef(null);
|
|
5928
5928
|
var timeoutRef = useRef(null);
|
|
5929
5929
|
var rafRef = useRef(null);
|
|
5930
|
-
var resizeObserverRef = useRef(null);
|
|
5931
5930
|
useEffect(function () {
|
|
5932
|
-
if (content.current && initOpen) {
|
|
5931
|
+
if (content != null && content.current && initOpen) {
|
|
5933
5932
|
setTextHeight(content.current.scrollHeight + "px");
|
|
5934
5933
|
}
|
|
5935
|
-
}, [initOpen]);
|
|
5934
|
+
}, [content, initOpen]);
|
|
5936
5935
|
useEffect(function () {
|
|
5937
|
-
|
|
5938
|
-
|
|
5939
|
-
|
|
5936
|
+
if (openAccordion && content != null && content.current) {
|
|
5937
|
+
rafRef.current = window.requestAnimationFrame(function () {
|
|
5938
|
+
var _content$current$scro, _content$current;
|
|
5939
|
+
setTextHeight(((_content$current$scro = (_content$current = content.current) == null ? void 0 : _content$current.scrollHeight) != null ? _content$current$scro : 0) + "px");
|
|
5940
|
+
});
|
|
5941
|
+
} else if (!openAccordion) {
|
|
5940
5942
|
setTextHeight('0px');
|
|
5941
|
-
if (resizeObserverRef.current) {
|
|
5942
|
-
resizeObserverRef.current.disconnect();
|
|
5943
|
-
resizeObserverRef.current = null;
|
|
5944
|
-
}
|
|
5945
|
-
return;
|
|
5946
5943
|
}
|
|
5947
|
-
|
|
5948
|
-
setTextHeight(el.scrollHeight + "px");
|
|
5949
|
-
};
|
|
5950
|
-
rafRef.current = window.requestAnimationFrame(updateHeight);
|
|
5951
|
-
if ('ResizeObserver' in window) {
|
|
5952
|
-
var ro = new ResizeObserver(updateHeight);
|
|
5953
|
-
ro.observe(el);
|
|
5954
|
-
resizeObserverRef.current = ro;
|
|
5955
|
-
return function () {
|
|
5956
|
-
ro.disconnect();
|
|
5957
|
-
resizeObserverRef.current = null;
|
|
5958
|
-
};
|
|
5959
|
-
}
|
|
5960
|
-
return function () {
|
|
5961
|
-
if (rafRef.current) {
|
|
5962
|
-
window.cancelAnimationFrame(rafRef.current);
|
|
5963
|
-
rafRef.current = null;
|
|
5964
|
-
}
|
|
5965
|
-
};
|
|
5966
|
-
}, [openAccordion, childrenVisibility, children]);
|
|
5944
|
+
}, [openAccordion, childrenVisibility, content]);
|
|
5967
5945
|
useEffect(function () {
|
|
5968
5946
|
return function () {
|
|
5969
5947
|
if (timeoutRef.current) {
|
|
@@ -5974,10 +5952,6 @@ var Accordion = function Accordion(_ref) {
|
|
|
5974
5952
|
window.cancelAnimationFrame(rafRef.current);
|
|
5975
5953
|
rafRef.current = null;
|
|
5976
5954
|
}
|
|
5977
|
-
if (resizeObserverRef.current) {
|
|
5978
|
-
resizeObserverRef.current.disconnect();
|
|
5979
|
-
resizeObserverRef.current = null;
|
|
5980
|
-
}
|
|
5981
5955
|
};
|
|
5982
5956
|
}, []);
|
|
5983
5957
|
var toggleAccordion = function toggleAccordion() {
|
|
@@ -6026,9 +6000,9 @@ var Accordion = function Accordion(_ref) {
|
|
|
6026
6000
|
"aria-live": openAccordion ? 'polite' : 'off',
|
|
6027
6001
|
tag: "div",
|
|
6028
6002
|
size: "large"
|
|
6029
|
-
}, childrenVisibility &&
|
|
6003
|
+
}, childrenVisibility && /*#__PURE__*/React__default.createElement(ChildrenContainer, {
|
|
6030
6004
|
isVisible: childrenVisibility
|
|
6031
|
-
}, children)))
|
|
6005
|
+
}, children)));
|
|
6032
6006
|
};
|
|
6033
6007
|
|
|
6034
6008
|
var _templateObject$E;
|
|
@@ -9981,35 +9955,35 @@ function Select(_ref3) {
|
|
|
9981
9955
|
|
|
9982
9956
|
var _templateObject$1a, _templateObject2$U, _templateObject3$G, _templateObject4$y;
|
|
9983
9957
|
var Container$4 = /*#__PURE__*/styled.div(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
9984
|
-
var SelectWrapper$1 = /*#__PURE__*/styled.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
|
|
9958
|
+
var SelectWrapper$1 = /*#__PURE__*/styled.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-color-dark-grey);\n box-shadow: ", ";\n }\n .harmonic-select__control--menu-is-open {\n .harmonic-select__indicator {\n svg {\n transform: rotate(180deg);\n }\n }\n }\n .harmonic-select__indicator {\n font-size: 25px;\n padding: 0;\n margin-right: 12px;\n color: var(--base-color-black);\n svg {\n height: 1em;\n width: 1em;\n color: inherit;\n path {\n fill: currentColor;\n color: inherit;\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-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n }\n .harmonic-select__placeholder {\n color: var(--base-color-dark-grey);\n }\n .harmonic-select__single-value {\n color: var(--base-color-black);\n }\n .harmonic-select__value-container {\n padding-left: 20px;\n padding-right: 20px;\n padding-top: 1px;\n padding-bottom: 0px;\n }\n .harmonic-select--is-disabled {\n .harmonic-select__control {\n border: 1px solid var(--base-color-light-grey);\n background: var(--base-color-light-grey);\n }\n .harmonic-select__indicator,\n .harmonic-select__single-value {\n color: var(--base-color-dark-grey);\n }\n }\n .harmonic-select__menu {\n margin-top: -1px;\n box-shadow: none;\n border-radius: 0;\n border: 1px solid var(--base-color-dark-grey);\n background: var(--base-color-light-grey);\n }\n .harmonic-select__menu-list {\n padding-top: 0;\n padding-bottom: 0;\n }\n .harmonic-select__option {\n padding: 10px 20px;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n color: var(--base-color-black);\n &:active,\n &.harmonic-select__option--is-focused {\n background: var(--base-color-mid-grey);\n }\n }\n .harmonic-select__option--is-selected {\n color: var(--base-color-black);\n background: none;\n }\n .harmonic-select__input-container {\n margin: 0;\n padding-top: 0;\n padding-bottom: 0;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n color: var(--base-color-black);\n }\n .harmonic-select__menu-notice {\n padding: 20px 20px;\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n color: var(--base-color-black);\n text-align: left;\n }\n .harmonic-select__menu-notice--loading {\n font-style: italic;\n }\n"])), function (_ref) {
|
|
9985
9959
|
var width = _ref.width;
|
|
9986
9960
|
if (!width) return 'none';
|
|
9987
9961
|
return width + "px";
|
|
9988
9962
|
}, function (_ref2) {
|
|
9989
9963
|
var error = _ref2.error;
|
|
9990
|
-
if (error !== undefined) return "1px solid var(--color-
|
|
9991
|
-
return "1px solid var(--color-
|
|
9964
|
+
if (error !== undefined) return "1px solid var(--base-color-errorstate)";
|
|
9965
|
+
return "1px solid var(--base-color-dark-grey)";
|
|
9992
9966
|
}, function (_ref3) {
|
|
9993
9967
|
var error = _ref3.error;
|
|
9994
|
-
if (error !== undefined) return "var(--color-
|
|
9995
|
-
return "var(--color-
|
|
9968
|
+
if (error !== undefined) return "var(--base-color-errorstate)";
|
|
9969
|
+
return "var(--base-color-dark-grey)";
|
|
9996
9970
|
}, function (_ref4) {
|
|
9997
9971
|
var darkMode = _ref4.darkMode;
|
|
9998
|
-
if (darkMode) return "0 0 0 4px var(--color-
|
|
9999
|
-
return "0 0 0 3px var(--color-
|
|
10000
|
-
}
|
|
10001
|
-
var TextLabel$4 = /*#__PURE__*/styled.div(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 0
|
|
9972
|
+
if (darkMode) return "0 0 0 4px var(--base-color-lemonchiffon)";
|
|
9973
|
+
return "0 0 0 3px var(--base-color-lapislazuli)";
|
|
9974
|
+
});
|
|
9975
|
+
var TextLabel$4 = /*#__PURE__*/styled.div(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 0 20px;\n color: ", ";\n"])), function (_ref5) {
|
|
10002
9976
|
var darkMode = _ref5.darkMode;
|
|
10003
|
-
if (darkMode) return "var(--color-
|
|
10004
|
-
return "var(--color-
|
|
9977
|
+
if (darkMode) return "var(--base-color-white)";
|
|
9978
|
+
return "var(--base-color-black)";
|
|
10005
9979
|
});
|
|
10006
9980
|
var ErrorLabel$5 = /*#__PURE__*/styled.div(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 20px 0 0;\n color: ", ";\n"])), function (_ref6) {
|
|
10007
9981
|
var darkMode = _ref6.darkMode;
|
|
10008
|
-
if (darkMode) return "var(--color-
|
|
10009
|
-
return "var(--color-
|
|
9982
|
+
if (darkMode) return "var(--base-color-white)";
|
|
9983
|
+
return "var(--base-color-errorstate)";
|
|
10010
9984
|
});
|
|
10011
9985
|
|
|
10012
|
-
var _excluded$o = ["label", "error", "width", "darkMode", "isSearchable", "components"
|
|
9986
|
+
var _excluded$o = ["label", "error", "width", "darkMode", "isSearchable", "components"];
|
|
10013
9987
|
var DropdownIndicator = function DropdownIndicator(props) {
|
|
10014
9988
|
return /*#__PURE__*/React__default.createElement(components.DropdownIndicator, Object.assign({}, props), /*#__PURE__*/React__default.createElement(Icon, {
|
|
10015
9989
|
iconName: "DropdownArrow"
|
|
@@ -10020,15 +9994,12 @@ var WrapperComponent = function WrapperComponent(_ref) {
|
|
|
10020
9994
|
error = _ref.error,
|
|
10021
9995
|
width = _ref.width,
|
|
10022
9996
|
darkMode = _ref.darkMode,
|
|
10023
|
-
children = _ref.children
|
|
10024
|
-
|
|
10025
|
-
return /*#__PURE__*/React__default.createElement(Container$4, {
|
|
10026
|
-
className: className
|
|
10027
|
-
}, /*#__PURE__*/React__default.createElement("label", null, !!label && (/*#__PURE__*/React__default.createElement(TextLabel$4, {
|
|
9997
|
+
children = _ref.children;
|
|
9998
|
+
return /*#__PURE__*/React__default.createElement(Container$4, null, /*#__PURE__*/React__default.createElement("label", null, !!label && (/*#__PURE__*/React__default.createElement(TextLabel$4, {
|
|
10028
9999
|
darkMode: darkMode,
|
|
10029
10000
|
"data-testid": "select2-text-label"
|
|
10030
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
10031
|
-
|
|
10001
|
+
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
10002
|
+
level: 6
|
|
10032
10003
|
}, label))), /*#__PURE__*/React__default.createElement(SelectWrapper$1, {
|
|
10033
10004
|
width: width,
|
|
10034
10005
|
error: error,
|
|
@@ -10036,8 +10007,8 @@ var WrapperComponent = function WrapperComponent(_ref) {
|
|
|
10036
10007
|
}, children)), !!error && (/*#__PURE__*/React__default.createElement(ErrorLabel$5, {
|
|
10037
10008
|
darkMode: darkMode,
|
|
10038
10009
|
"data-testid": "select2-error-label"
|
|
10039
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
10040
|
-
|
|
10010
|
+
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
10011
|
+
level: 6
|
|
10041
10012
|
}, error))));
|
|
10042
10013
|
};
|
|
10043
10014
|
/**
|
|
@@ -10063,14 +10034,12 @@ var SelectComponent = function SelectComponent(_ref2) {
|
|
|
10063
10034
|
_ref2$isSearchable = _ref2.isSearchable,
|
|
10064
10035
|
isSearchable = _ref2$isSearchable === void 0 ? false : _ref2$isSearchable,
|
|
10065
10036
|
components = _ref2.components,
|
|
10066
|
-
className = _ref2.className,
|
|
10067
10037
|
selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$o);
|
|
10068
10038
|
return /*#__PURE__*/React__default.createElement(WrapperComponent, {
|
|
10069
10039
|
label: label,
|
|
10070
10040
|
error: error,
|
|
10071
10041
|
width: width,
|
|
10072
|
-
darkMode: darkMode
|
|
10073
|
-
className: className
|
|
10042
|
+
darkMode: darkMode
|
|
10074
10043
|
}, /*#__PURE__*/React__default.createElement(Select$1, Object.assign({}, selectProps, {
|
|
10075
10044
|
components: _extends({
|
|
10076
10045
|
DropdownIndicator: DropdownIndicator,
|