@royaloperahouse/chord 2.2.12 → 2.2.13
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/CHANGELOG.md +4 -0
- package/dist/chord.cjs.development.js +82 -28
- package/dist/chord.cjs.development.js.map +1 -1
- package/dist/chord.cjs.production.min.js +1 -1
- package/dist/chord.cjs.production.min.js.map +1 -1
- package/dist/chord.esm.js +82 -29
- package/dist/chord.esm.js.map +1 -1
- package/dist/components/index.d.ts +2 -2
- package/dist/components/molecules/Select2/Select2.d.ts +7 -1
- package/dist/components/molecules/Select2/Select2.style.d.ts +2 -2
- package/dist/components/molecules/Select2Async/Select2Async.d.ts +18 -0
- package/dist/components/molecules/Select2Async/index.d.ts +2 -0
- package/dist/components/molecules/index.d.ts +2 -1
- package/dist/index.d.ts +2 -2
- package/dist/types/formTypes.d.ts +6 -2
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -12,6 +12,7 @@ var moment = _interopDefault(require('moment'));
|
|
|
12
12
|
var server = require('react-dom/server');
|
|
13
13
|
var Select$1 = require('react-select');
|
|
14
14
|
var Select$1__default = _interopDefault(Select$1);
|
|
15
|
+
var Select$2 = _interopDefault(require('react-select/async'));
|
|
15
16
|
var Modal = _interopDefault(require('react-modal'));
|
|
16
17
|
var ScrollLock = _interopDefault(require('react-scrolllock'));
|
|
17
18
|
|
|
@@ -8698,7 +8699,7 @@ function Select(_ref3) {
|
|
|
8698
8699
|
|
|
8699
8700
|
var _templateObject$19, _templateObject2$Q, _templateObject3$I, _templateObject4$y;
|
|
8700
8701
|
var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$19 || (_templateObject$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
8701
|
-
var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: auto;\n max-width: ", ";\n\n .chord-select__control {\n min-height: 48px;\n border-radius: 0;\n transition: none;\n border: ", ";\n &:hover {\n border-color: ", ";\n }\n }\n .chord-select__control--is-focused {\n border-color: var(--base-color-darkgrey);\n box-shadow: ", ";\n }\n .chord-
|
|
8702
|
+
var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: auto;\n max-width: ", ";\n\n .chord-select__control {\n min-height: 48px;\n border-radius: 0;\n transition: none;\n border: ", ";\n &:hover {\n border-color: ", ";\n }\n }\n .chord-select__control--is-focused {\n border-color: var(--base-color-darkgrey);\n box-shadow: ", ";\n }\n .chord-select__control--menu-is-open {\n .chord-select__indicator {\n svg {\n transform: rotate(180deg);\n }\n }\n }\n .chord-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 .chord-select__single-value,\n .chord-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 .chord-select__placeholder {\n color: var(--base-color-darkgrey);\n }\n .chord-select__single-value {\n color: var(--base-color-black);\n }\n .chord-select__value-container {\n padding-left: 20px;\n padding-right: 20px;\n padding-top: 1px;\n padding-bottom: 0px;\n }\n .chord-select--is-disabled {\n .chord-select__control {\n border: 1px solid var(--base-color-lightgrey);\n background: var(--base-color-lightgrey);\n }\n .chord-select__indicator,\n .chord-select__single-value {\n color: var(--base-color-darkgrey);\n }\n }\n .chord-select__menu {\n margin-top: -1px;\n box-shadow: none;\n border-radius: 0;\n border: 1px solid var(--base-color-darkgrey);\n background: var(--base-color-lightgrey);\n }\n .chord-select__menu-list {\n padding-top: 0;\n padding-bottom: 0;\n }\n .chord-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 &.chord-select__option--is-focused {\n background: var(--base-color-midgrey);\n }\n }\n .chord-select__option--is-selected {\n color: var(--base-color-black);\n background: none;\n }\n .chord-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 .chord-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 .chord-select__menu-notice--loading {\n font-style: italic;\n }\n"])), function (_ref) {
|
|
8702
8703
|
var width = _ref.width;
|
|
8703
8704
|
if (!width) return 'none';
|
|
8704
8705
|
return width + 'px';
|
|
@@ -8715,12 +8716,12 @@ var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$Q || (_t
|
|
|
8715
8716
|
if (darkMode) return "0 0 0 4px var(--base-color-lemonchiffon)";
|
|
8716
8717
|
return "0 0 0 3px var(--base-color-lapislazuli)";
|
|
8717
8718
|
});
|
|
8718
|
-
var TextLabel$3 = /*#__PURE__*/styled__default.
|
|
8719
|
+
var TextLabel$3 = /*#__PURE__*/styled__default.div(_templateObject3$I || (_templateObject3$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 0 20px;\n color: ", ";\n"])), function (_ref5) {
|
|
8719
8720
|
var darkMode = _ref5.darkMode;
|
|
8720
8721
|
if (darkMode) return "var(--base-color-white)";
|
|
8721
8722
|
return "var(--base-color-black)";
|
|
8722
8723
|
});
|
|
8723
|
-
var ErrorLabel$4 = /*#__PURE__*/styled__default.
|
|
8724
|
+
var ErrorLabel$4 = /*#__PURE__*/styled__default.div(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 20px 0 0;\n color: ", ";\n"])), function (_ref6) {
|
|
8724
8725
|
var darkMode = _ref6.darkMode;
|
|
8725
8726
|
if (darkMode) return "var(--base-color-white)";
|
|
8726
8727
|
return "var(--base-color-errorstate)";
|
|
@@ -8731,6 +8732,28 @@ var DropdownIndicator = function DropdownIndicator(props) {
|
|
|
8731
8732
|
iconName: "DropdownArrow"
|
|
8732
8733
|
}));
|
|
8733
8734
|
};
|
|
8735
|
+
var WrapperComponent = function WrapperComponent(_ref) {
|
|
8736
|
+
var label = _ref.label,
|
|
8737
|
+
error = _ref.error,
|
|
8738
|
+
width = _ref.width,
|
|
8739
|
+
darkMode = _ref.darkMode,
|
|
8740
|
+
children = _ref.children;
|
|
8741
|
+
return /*#__PURE__*/React__default.createElement(Container$4, null, /*#__PURE__*/React__default.createElement("label", null, !!label && /*#__PURE__*/React__default.createElement(TextLabel$3, {
|
|
8742
|
+
darkMode: darkMode,
|
|
8743
|
+
"data-testid": "select2-text-label"
|
|
8744
|
+
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
8745
|
+
level: 6
|
|
8746
|
+
}, label)), /*#__PURE__*/React__default.createElement(SelectWrapper$1, {
|
|
8747
|
+
width: width,
|
|
8748
|
+
error: error,
|
|
8749
|
+
darkMode: darkMode
|
|
8750
|
+
}, children)), !!error && /*#__PURE__*/React__default.createElement(ErrorLabel$4, {
|
|
8751
|
+
darkMode: darkMode,
|
|
8752
|
+
"data-testid": "select2-error-label"
|
|
8753
|
+
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
8754
|
+
level: 6
|
|
8755
|
+
}, error)));
|
|
8756
|
+
};
|
|
8734
8757
|
/**
|
|
8735
8758
|
* A Select2 component wraps react-select with Chord styling and additional elements like
|
|
8736
8759
|
* text and error labels. This should be used just as usual react-select component.
|
|
@@ -8746,42 +8769,72 @@ var DropdownIndicator = function DropdownIndicator(props) {
|
|
|
8746
8769
|
* to be rendered on a dark / coloured background, you can use the `darkMode` prop.
|
|
8747
8770
|
*/
|
|
8748
8771
|
|
|
8772
|
+
var SelectComponent = function SelectComponent(_ref2) {
|
|
8773
|
+
var label = _ref2.label,
|
|
8774
|
+
error = _ref2.error,
|
|
8775
|
+
width = _ref2.width,
|
|
8776
|
+
_ref2$darkMode = _ref2.darkMode,
|
|
8777
|
+
darkMode = _ref2$darkMode === void 0 ? false : _ref2$darkMode,
|
|
8778
|
+
_ref2$isSearchable = _ref2.isSearchable,
|
|
8779
|
+
isSearchable = _ref2$isSearchable === void 0 ? false : _ref2$isSearchable,
|
|
8780
|
+
components = _ref2.components,
|
|
8781
|
+
selectProps = _objectWithoutPropertiesLoose(_ref2, ["label", "error", "width", "darkMode", "isSearchable", "components"]);
|
|
8782
|
+
|
|
8783
|
+
return /*#__PURE__*/React__default.createElement(WrapperComponent, {
|
|
8784
|
+
label: label,
|
|
8785
|
+
error: error,
|
|
8786
|
+
width: width,
|
|
8787
|
+
darkMode: darkMode
|
|
8788
|
+
}, /*#__PURE__*/React__default.createElement(Select$1__default, Object.assign({}, selectProps, {
|
|
8789
|
+
components: _extends({
|
|
8790
|
+
DropdownIndicator: DropdownIndicator,
|
|
8791
|
+
LoadingIndicator: undefined,
|
|
8792
|
+
IndicatorSeparator: undefined
|
|
8793
|
+
}, components),
|
|
8794
|
+
className: "chord-select-container",
|
|
8795
|
+
classNamePrefix: "chord-select",
|
|
8796
|
+
isSearchable: isSearchable
|
|
8797
|
+
})));
|
|
8798
|
+
};
|
|
8749
8799
|
|
|
8750
|
-
|
|
8800
|
+
/**
|
|
8801
|
+
* The Select2Async component is similar to Select 2, but uses react-select async
|
|
8802
|
+
* component for select instead of regular react-select component. This can be used
|
|
8803
|
+
* for selects with dynamically loaded options, live search components etc.
|
|
8804
|
+
*
|
|
8805
|
+
* # Error state
|
|
8806
|
+
* An error label will be shown below the select if the `error` prop exists.
|
|
8807
|
+
* Also select will be rendered with a red border. An empty string can be passed to
|
|
8808
|
+
* render only error state without error message.
|
|
8809
|
+
*
|
|
8810
|
+
* # Light / Dark mode
|
|
8811
|
+
* The component can also adapt its styles for light / dark mode. If you want this component
|
|
8812
|
+
* to be rendered on a dark / coloured background, you can use the `darkMode` prop.
|
|
8813
|
+
*/
|
|
8814
|
+
|
|
8815
|
+
var SelectComponent$1 = function SelectComponent(_ref) {
|
|
8751
8816
|
var label = _ref.label,
|
|
8752
8817
|
error = _ref.error,
|
|
8753
8818
|
width = _ref.width,
|
|
8754
8819
|
_ref$darkMode = _ref.darkMode,
|
|
8755
8820
|
darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
|
|
8756
|
-
|
|
8757
|
-
|
|
8758
|
-
_ref$placeholder = _ref.placeholder,
|
|
8759
|
-
placeholder = _ref$placeholder === void 0 ? 'Please select' : _ref$placeholder,
|
|
8760
|
-
selectProps = _objectWithoutPropertiesLoose(_ref, ["label", "error", "width", "darkMode", "isSearchable", "placeholder"]);
|
|
8821
|
+
components = _ref.components,
|
|
8822
|
+
selectProps = _objectWithoutPropertiesLoose(_ref, ["label", "error", "width", "darkMode", "components"]);
|
|
8761
8823
|
|
|
8762
|
-
return /*#__PURE__*/React__default.createElement(
|
|
8763
|
-
|
|
8764
|
-
"data-testid": "select2-text-label"
|
|
8765
|
-
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
8766
|
-
level: 6
|
|
8767
|
-
}, label)), /*#__PURE__*/React__default.createElement(SelectWrapper$1, {
|
|
8768
|
-
width: width,
|
|
8824
|
+
return /*#__PURE__*/React__default.createElement(WrapperComponent, {
|
|
8825
|
+
label: label,
|
|
8769
8826
|
error: error,
|
|
8827
|
+
width: width,
|
|
8770
8828
|
darkMode: darkMode
|
|
8771
|
-
}, /*#__PURE__*/React__default.createElement(Select$
|
|
8772
|
-
components: {
|
|
8773
|
-
DropdownIndicator: DropdownIndicator
|
|
8774
|
-
|
|
8775
|
-
|
|
8776
|
-
|
|
8829
|
+
}, /*#__PURE__*/React__default.createElement(Select$2, Object.assign({}, selectProps, {
|
|
8830
|
+
components: _extends({
|
|
8831
|
+
DropdownIndicator: DropdownIndicator,
|
|
8832
|
+
LoadingIndicator: undefined,
|
|
8833
|
+
IndicatorSeparator: undefined
|
|
8834
|
+
}, components),
|
|
8777
8835
|
className: "chord-select-container",
|
|
8778
8836
|
classNamePrefix: "chord-select"
|
|
8779
|
-
}
|
|
8780
|
-
darkMode: darkMode,
|
|
8781
|
-
"data-testid": "select2-error-label"
|
|
8782
|
-
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
8783
|
-
level: 6
|
|
8784
|
-
}, error)));
|
|
8837
|
+
})));
|
|
8785
8838
|
};
|
|
8786
8839
|
|
|
8787
8840
|
var _templateObject$1a;
|
|
@@ -10652,6 +10705,7 @@ exports.SectionSplitter = SectionSplitter;
|
|
|
10652
10705
|
exports.SectionTitle = SectionTitle;
|
|
10653
10706
|
exports.Select = Select;
|
|
10654
10707
|
exports.Select2 = SelectComponent;
|
|
10708
|
+
exports.Select2Async = SelectComponent$1;
|
|
10655
10709
|
exports.Sponsorship = Sponsorship;
|
|
10656
10710
|
exports.StatusBanner = StatusBanner;
|
|
10657
10711
|
exports.Stepper = Component;
|