@linzjs/lui 21.40.0 → 21.40.3

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [21.40.3](https://github.com/linz/lui/compare/v21.40.2...v21.40.3) (2024-07-17)
+
+
+### Bug Fixes
+
+* trigger release for switch button style change ([#1143](https://github.com/linz/lui/issues/1143)) ([7cf3f50](https://github.com/linz/lui/commit/7cf3f50f93ef3eac919ba7b24f72e1581c246424))
+
+## [21.40.1](https://github.com/linz/lui/compare/v21.40.0...v21.40.1) (2024-07-16)
+
+
+### Bug Fixes
+
+* **LuiModalV2:** set modal appElement via props ([#1140](https://github.com/linz/lui/issues/1140)) ([a2f52a5](https://github.com/linz/lui/commit/a2f52a59edecf2d691bf480eb41916affd3408b7))
+
 # [21.40.0](https://github.com/linz/lui/compare/v21.39.3...v21.40.0) (2024-07-16)
 
 

package/dist/index.js

@@ -42266,14 +42266,9 @@ var LuiModalV2 = function (props) {
     var showHelpButton = Boolean(props.helpLink);
     var showButtons = showCloseButton || showHelpButton;
     var showHeadingIcon = props.headingIcon && !props.isLoading;
-    // this is here for the tests
-    React.useEffect(function () {
-        if (isProcess && !isTest)
-            Modal.setAppElement('#root');
-    }, []);
     return (React__default["default"].createElement(Modal, { key: props.key, isOpen: true, 
         // disble the `shouldClose` props as we handle them ourselves
-        shouldCloseOnOverlayClick: false, shouldCloseOnEsc: false, overlayClassName: "modal", className: props.lowContrast ? 'lui-scrim-low-contrast' : 'lui-scrim', 
+        shouldCloseOnOverlayClick: false, shouldCloseOnEsc: false, overlayClassName: "modal", className: props.lowContrast ? 'lui-scrim-low-contrast' : 'lui-scrim', appElement: document.getElementById('root'), 
         // required to prevent warnings that are not applicable in real usage
         ariaHideApp: !isTest, parentSelector: props.appendToElement },
         React__default["default"].createElement("div", { ref: function (el) {
@@ -47024,14 +47019,14 @@ var LuiSidePanelProvider = function (_a) {
         React__default["default"].createElement(LuiSidePanelContainer, __assign({}, props))));
 };
 
-var css_248z$g = ".lui-switch-checkbox {\n  height: 0;\n  width: 0;\n  visibility: hidden;\n}\n\n.lui-switch-label {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  cursor: pointer;\n  width: 40px;\n  height: 20px;\n  background: grey;\n  border-radius: 40px;\n  position: relative;\n  transition: background-color 0.2s;\n}\n\n.lui-switch-label .lui-switch-button {\n  content: \"\";\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: 18px;\n  height: 16px;\n  border-radius: 18px;\n  transition: 0.2s;\n  background: #fff;\n  box-shadow: 0 0 2px 0 rgba(10, 10, 10, 0.29);\n}\n\n.lui-switch-checkbox:checked + .lui-switch-label .lui-switch-button {\n  left: calc(100% - 2px);\n  transform: translateX(-100%);\n}\n\n.lui-switch-label:active .lui-switch-button {\n  width: 20px;\n}";
+var css_248z$g = ".lui-switch-checkbox {\n  height: 0;\n  width: 0;\n  visibility: hidden;\n}\n\n.lui-switch-label {\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  width: 40px;\n  padding: 2px;\n  background: #ffffff;\n  border: 1px solid #007198;\n  border-radius: 40px;\n  position: relative;\n  transition: background-color 0.2s;\n}\n\n.lui-switch-label .lui-switch-button {\n  content: \"\";\n  position: relative;\n  width: 14px;\n  height: 14px;\n  border-radius: 50%;\n  transition: 0.2s;\n  background: #007198;\n  box-shadow: 0 0 2px 0 rgba(10, 10, 10, 0.29);\n}\n\n.lui-switch-label-checked {\n  background: #007198;\n}\n.lui-switch-label-checked .lui-switch-button {\n  transform: translateX(20px);\n  background: #ffffff;\n}\n\n.lui-switch-checkbox:disabled + .lui-switch-label {\n  border: 1px solid #989189;\n  background: #eaeaea;\n}\n.lui-switch-checkbox:disabled + .lui-switch-label .lui-switch-button {\n  background: #989189;\n}\n.lui-switch-checkbox:disabled + .lui-switch-label-checked {\n  background: #989189;\n}\n.lui-switch-checkbox:disabled + .lui-switch-label-checked .lui-switch-button {\n  background: #eaeaea;\n}";
 styleInject(css_248z$g);
 
 var LuiSwitchButton = function (props) {
     var generatedId = useGenerateOrDefaultId();
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement("input", __assign({ className: "lui-switch-checkbox", type: "checkbox", "data-testid": 'lui-switch-new', id: generatedId }, props)),
-        React__default["default"].createElement("label", { "data-testid": "label", style: { background: props.checked ? '#007198' : 'gray' }, className: "lui-switch-label", htmlFor: generatedId },
+        React__default["default"].createElement("label", { "data-testid": "label", className: clsx('lui-switch-label', props.checked ? 'lui-switch-label-checked' : null), htmlFor: generatedId },
             React__default["default"].createElement("span", { className: "lui-switch-button" }))));
 };