@royaloperahouse/harmonic 0.18.3-h → 0.18.3-j

package/dist/components/molecules/Select2/Select2.d.ts

@@ -2,7 +2,7 @@ import React, { FunctionComponent } from 'react';
 import { DropdownIndicatorProps } from 'react-select';
 import { ISelect2Props } from '../../../types/formTypes';
 export declare const DropdownIndicator: (props: DropdownIndicatorProps) => React.JSX.Element;
-interface IWrapperProps extends Pick<ISelect2Props, 'label' | 'error' | 'width' | 'darkMode' | 'className'> {
+interface IWrapperProps extends Pick<ISelect2Props, 'label' | 'error' | 'width' | 'darkMode'> {
     children: React.ReactNode;
 }
 export declare const WrapperComponent: FunctionComponent<IWrapperProps>;

package/dist/harmonic.cjs.development.js

@@ -5990,69 +5990,21 @@ var Accordion = function Accordion(_ref) {
   var content = React.useRef(null);
   var timeoutRef = React.useRef(null);
   var rafRef = React.useRef(null);
-  var resizeObserverRef = React.useRef(null);
-  var intervalRef = React.useRef(null);
   React.useEffect(function () {
-    if (content.current && initOpen) {
+    if (content != null && content.current && initOpen) {
       setTextHeight(content.current.scrollHeight + "px");
     }
-  }, [initOpen]);
+  }, [content, initOpen]);
   React.useEffect(function () {
-    var cleanup = function cleanup() {
-      return undefined;
-    };
-    var el = content.current;
-    if (!el) return cleanup;
-    if (!openAccordion) {
+    if (openAccordion && content != null && content.current) {
+      rafRef.current = window.requestAnimationFrame(function () {
+        var _content$current$scro, _content$current;
+        setTextHeight(((_content$current$scro = (_content$current = content.current) == null ? void 0 : _content$current.scrollHeight) != null ? _content$current$scro : 0) + "px");
+      });
+    } else if (!openAccordion) {
       setTextHeight('0px');
-      if (resizeObserverRef.current) {
-        resizeObserverRef.current.disconnect();
-        resizeObserverRef.current = null;
-      }
-      if (intervalRef.current) {
-        window.clearInterval(intervalRef.current);
-        intervalRef.current = null;
-      }
-      if (rafRef.current) {
-        window.cancelAnimationFrame(rafRef.current);
-        rafRef.current = null;
-      }
-      return cleanup;
-    }
-    var updateHeight = function updateHeight() {
-      setTextHeight(el.scrollHeight + "px");
-    };
-    rafRef.current = window.requestAnimationFrame(updateHeight);
-    if (typeof ResizeObserver !== 'undefined') {
-      var ro = new ResizeObserver(updateHeight);
-      ro.observe(el);
-      resizeObserverRef.current = ro;
-      intervalRef.current = window.setInterval(updateHeight, 200);
-      return function () {
-        ro.disconnect();
-        resizeObserverRef.current = null;
-        if (intervalRef.current) {
-          window.clearInterval(intervalRef.current);
-          intervalRef.current = null;
-        }
-        if (rafRef.current) {
-          window.cancelAnimationFrame(rafRef.current);
-          rafRef.current = null;
-        }
-      };
     }
-    intervalRef.current = window.setInterval(updateHeight, 200);
-    return function () {
-      if (intervalRef.current) {
-        window.clearInterval(intervalRef.current);
-        intervalRef.current = null;
-      }
-      if (rafRef.current) {
-        window.cancelAnimationFrame(rafRef.current);
-        rafRef.current = null;
-      }
-    };
-  }, [openAccordion, childrenVisibility, children]);
+  }, [openAccordion, childrenVisibility, content]);
   React.useEffect(function () {
     return function () {
       if (timeoutRef.current) {
@@ -6063,14 +6015,6 @@ var Accordion = function Accordion(_ref) {
         window.cancelAnimationFrame(rafRef.current);
         rafRef.current = null;
       }
-      if (resizeObserverRef.current) {
-        resizeObserverRef.current.disconnect();
-        resizeObserverRef.current = null;
-      }
-      if (intervalRef.current) {
-        window.clearInterval(intervalRef.current);
-        intervalRef.current = null;
-      }
     };
   }, []);
   var toggleAccordion = function toggleAccordion() {
@@ -8744,7 +8688,7 @@ var PersonDetails = function PersonDetails(_ref) {
 };
 
 var _templateObject$$, _templateObject2$O;
-var PersonWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$$ || (_templateObject$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: 82px 1fr;\n  grid-template-areas: 'headshot role-person';\n  grid-column-gap: 16px;\n"])));
+var PersonWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$$ || (_templateObject$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: 82px 1fr;\n  grid-template-areas: 'headshot role-person';\n  grid-column-gap: 16px;\n\n  &.person-headshot-grayscale img {\n    filter: grayscale(100%);\n  }\n"])));
 var HeadshotWrapper = /*#__PURE__*/styled__default.div(_templateObject2$O || (_templateObject2$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  grid-area: headshot;\n  img {\n    width: 82px;\n    height: 82px;\n  }\n"])));
 
 var PersonCard = function PersonCard(_ref) {
@@ -8778,7 +8722,8 @@ var PeopleListing = function PeopleListing(_ref) {
     return /*#__PURE__*/React__default.createElement(GridItem, {
       key: role.name + "-" + index
     }, /*#__PURE__*/React__default.createElement(PersonCard, {
-      role: role
+      role: role,
+      className: className
     }));
   }));
 };
@@ -10062,35 +10007,35 @@ function Select(_ref3) {
 
 var _templateObject$1a, _templateObject2$U, _templateObject3$G, _templateObject4$y;
 var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n"])));
-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) {
+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-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) {
   var width = _ref.width;
   if (!width) return 'none';
   return width + "px";
 }, function (_ref2) {
   var error = _ref2.error;
-  if (error !== undefined) return "1px solid var(--color-base-errorstate)";
-  return "1px solid var(--color-base-dark-grey)";
+  if (error !== undefined) return "1px solid var(--base-color-errorstate)";
+  return "1px solid var(--base-color-dark-grey)";
 }, function (_ref3) {
   var error = _ref3.error;
-  if (error !== undefined) return "var(--color-base-errorstate)";
-  return "var(--color-base-dark-grey)";
+  if (error !== undefined) return "var(--base-color-errorstate)";
+  return "var(--base-color-dark-grey)";
 }, function (_ref4) {
   var darkMode = _ref4.darkMode;
-  if (darkMode) return "0 0 0 1px var(--color-state-medium)";
-  return "0 0 0 1px var(--color-state-focused)";
-}, devices.mobile, devices.mobile);
-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) {
+  if (darkMode) return "0 0 0 4px var(--base-color-lemonchiffon)";
+  return "0 0 0 3px var(--base-color-lapislazuli)";
+});
+var TextLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0 0 20px;\n  color: ", ";\n"])), function (_ref5) {
   var darkMode = _ref5.darkMode;
-  if (darkMode) return "var(--color-base-white)";
-  return "var(--color-base-black)";
-}, devices.mobile);
+  if (darkMode) return "var(--base-color-white)";
+  return "var(--base-color-black)";
+});
 var ErrorLabel$5 = /*#__PURE__*/styled__default.div(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 20px 0 0;\n  color: ", ";\n"])), function (_ref6) {
   var darkMode = _ref6.darkMode;
-  if (darkMode) return "var(--color-base-white)";
-  return "var(--color-base-errorstate)";
+  if (darkMode) return "var(--base-color-white)";
+  return "var(--base-color-errorstate)";
 });
 
-var _excluded$o = ["label", "error", "width", "darkMode", "isSearchable", "components", "className"];
+var _excluded$o = ["label", "error", "width", "darkMode", "isSearchable", "components"];
 var DropdownIndicator = function DropdownIndicator(props) {
   return /*#__PURE__*/React__default.createElement(Select$1.components.DropdownIndicator, Object.assign({}, props), /*#__PURE__*/React__default.createElement(Icon, {
     iconName: "DropdownArrow"
@@ -10101,15 +10046,12 @@ var WrapperComponent = function WrapperComponent(_ref) {
     error = _ref.error,
     width = _ref.width,
     darkMode = _ref.darkMode,
-    children = _ref.children,
-    className = _ref.className;
-  return /*#__PURE__*/React__default.createElement(Container$4, {
-    className: className
-  }, /*#__PURE__*/React__default.createElement("label", null, !!label && (/*#__PURE__*/React__default.createElement(TextLabel$4, {
+    children = _ref.children;
+  return /*#__PURE__*/React__default.createElement(Container$4, null, /*#__PURE__*/React__default.createElement("label", null, !!label && (/*#__PURE__*/React__default.createElement(TextLabel$4, {
     darkMode: darkMode,
     "data-testid": "select2-text-label"
-  }, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
-    size: "large"
+  }, /*#__PURE__*/React__default.createElement(AltHeader, {
+    level: 6
   }, label))), /*#__PURE__*/React__default.createElement(SelectWrapper$1, {
     width: width,
     error: error,
@@ -10117,8 +10059,8 @@ var WrapperComponent = function WrapperComponent(_ref) {
   }, children)), !!error && (/*#__PURE__*/React__default.createElement(ErrorLabel$5, {
     darkMode: darkMode,
     "data-testid": "select2-error-label"
-  }, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
-    size: "medium"
+  }, /*#__PURE__*/React__default.createElement(AltHeader, {
+    level: 6
   }, error))));
 };
 /**
@@ -10144,14 +10086,12 @@ var SelectComponent = function SelectComponent(_ref2) {
     _ref2$isSearchable = _ref2.isSearchable,
     isSearchable = _ref2$isSearchable === void 0 ? false : _ref2$isSearchable,
     components = _ref2.components,
-    className = _ref2.className,
     selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$o);
   return /*#__PURE__*/React__default.createElement(WrapperComponent, {
     label: label,
     error: error,
     width: width,
-    darkMode: darkMode,
-    className: className
+    darkMode: darkMode
   }, /*#__PURE__*/React__default.createElement(Select$1__default, Object.assign({}, selectProps, {
     components: _extends({
       DropdownIndicator: DropdownIndicator,