fix(modal): react - convert hidden false values to undefined

fixes #122

projects/react/src/modal/index.test.tsx

@@ -23,6 +23,20 @@ describe('CdsModal', () => {
     expect(await screen.findByText('My Modal')).toBeInTheDocument();
     expect(document.querySelector('cds-modal-content')).toHaveTextContent(/Lorem Ipsum/);
     expect(document.querySelector('cds-modal-actions')).toHaveTextContent(/Foo/);
+
+    expect(document.querySelector('cds-modal')).not.toHaveAttribute('hidden');
+  });
+
+  it('has attribute hidden when hidden', () => {
+    render(
+      <CdsModal hidden>
+        <CdsModalHeader>
+          <h3 cds-text="title">My Modal</h3>
+        </CdsModalHeader>
+      </CdsModal>
+    );
+
+    expect(document.querySelector('cds-modal')).toHaveAttribute('hidden', 'true');
   });
 
   it('snapshot', () => {

projects/react/src/modal/index.tsx

@@ -10,15 +10,37 @@ import { createComponent } from '@lit-labs/react';
 import * as React from 'react';
 import { logReactVersion } from '../utils/index.js';
 
-export const CdsModal = createComponent(
-  React,
-  'cds-modal',
-  Modal,
-  {
-    onCloseChange: 'closeChange',
-    onCdsMotionChange: 'cdsMotionChange',
-  },
-  'CdsModal'
+/**
+ * Converts a false value for `hidden` to `undefined` so it doesn't get rendered in the DOM
+ *
+ * There is an open issue where lit/react passes the false value to the element in the dom
+ *   this isn't valid per the spec for boolean attributes.
+ *
+ * We mostly work around it with CSS, but it's still causing some problems with the  modal overlay
+ * REMOVE THIS WHEN THE FOLLOWING ISSUE IS RESOLVED (also remove all of the CSS fixes)
+ *
+ * https://github.com/lit/lit/issues/3053
+ * @param CdsButton
+ * @returns CdsButton
+ */
+function removeFalseHiddenProp<P extends { hidden?: boolean }>(Component: React.ComponentType<P>) {
+  return (props: P) => {
+    const { hidden } = props;
+    return <Component {...(props as P)} hidden={hidden ? true : undefined} />;
+  };
+}
+
+export const CdsModal = removeFalseHiddenProp(
+  createComponent(
+    React,
+    'cds-modal',
+    Modal,
+    {
+      onCloseChange: 'closeChange',
+      onCdsMotionChange: 'cdsMotionChange',
+    },
+    'CdsModal'
+  )
 );
 export const CdsModalActions = createComponent(React, 'cds-modal-actions', ModalActions, {}, 'CdsModalActions');
 export const CdsModalContent = createComponent(React, 'cds-modal-content', ModalContent, {}, 'CdsModalContent');