terra_ui_components 0.0.117__tar.gz → 0.0.118__tar.gz

{terra_ui_components-0.0.117 → terra_ui_components-0.0.118}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: terra_ui_components
-Version: 0.0.117
+Version: 0.0.118
 Summary: NASA Terra UI Components Library
 License-File: LICENSE.md
 Requires-Python: >=3.8

{terra_ui_components-0.0.117 → terra_ui_components-0.0.118}/docs/pages/components/data-subsetter.md

@@ -11,9 +11,7 @@ The `<terra-data-subsetter>` component provides a complete UI for subsetting and
 
 ```html:preview
 <div style="height: 200px;">
-    <terra-dialog id="my-dialog" width="80%">
-        <terra-data-subsetter collection-entry-id="OMAERO_003"></terra-data-subsetter>
-    </terra-dialog>
+    <terra-data-subsetter collection-entry-id="OMAERO_003" dialog="my-dialog"></terra-data-subsetter>
     <terra-button for-dialog="my-dialog">
         Open Subsetter
     </terra-button>
@@ -60,13 +58,13 @@ The `<terra-data-subsetter>` component provides a complete UI for subsetting and
 
 ```html:preview
 <div style="height: 200px;">
-    <terra-dialog id="my-dialog">
-        <terra-data-subsetter collection-entry-id="OMAERO_003"></terra-data-subsetter>
-    </terra-dialog>
+    <terra-data-subsetter collection-entry-id="OMAERO_003" dialog="my-dialog"></terra-data-subsetter>
     <terra-button for-dialog="my-dialog">
         Open Subsetter
     </terra-button>
 </div>
+
+
 ```
 
 ## Best Practices

terra_ui_components-0.0.118/docs/pages/components/dialog.md

@@ -0,0 +1,329 @@
+---
+meta:
+    title: Dialog
+    description: 'Dialogs, sometimes called "modals", appear above the page and require the user''s immediate attention.'
+layout: component
+---
+
+<!-- cspell:dictionaries lorem-ipsum -->
+
+```html:preview
+<terra-dialog label="Dialog" class="dialog-overview">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  <terra-button slot="footer" variant="primary">Close</terra-button>
+</terra-dialog>
+
+<terra-button>Open Dialog</terra-button>
+
+<script>
+  const dialog = document.querySelector('.dialog-overview');
+  const openButton = dialog.nextElementSibling;
+  const closeButton = dialog.querySelector('terra-button[slot="footer"]');
+
+  openButton.addEventListener('click', () => dialog.show());
+  closeButton.addEventListener('click', () => dialog.hide());
+</script>
+```
+
+```jsx:react
+import { useState } from 'react';
+import TerraButton from '@nasa-terra/components/dist/react/button';
+import TerraDialog from '@nasa-terra/components/dist/react/dialog';
+
+const App = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <TerraDialog label="Dialog" open={open} onSlAfterHide={() => setOpen(false)}>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        <TerraButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
+          Close
+        </TerraButton>
+      </TerraDialog>
+
+      <TerraButton onClick={() => setOpen(true)}>Open Dialog</TerraButton>
+    </>
+  );
+};
+```
+
+## Examples
+
+### Custom Width
+
+Use the `--width` custom property to set the dialog's width.
+
+```html:preview
+<terra-dialog label="Dialog" class="dialog-width" style="--width: 50vw;">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  <terra-button slot="footer" variant="primary">Close</terra-button>
+</terra-dialog>
+
+<terra-button>Open Dialog</terra-button>
+
+<script>
+  const dialog = document.querySelector('.dialog-width');
+  const openButton = dialog.nextElementSibling;
+  const closeButton = dialog.querySelector('terra-button[slot="footer"]');
+
+  openButton.addEventListener('click', () => dialog.show());
+  closeButton.addEventListener('click', () => dialog.hide());
+</script>
+```
+
+{% raw %}
+
+```jsx:react
+import { useState } from 'react';
+import TerraButton from '@nasa-terra/components/dist/react/button';
+import TerraDialog from '@nasa-terra/components/dist/react/dialog';
+
+const App = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <TerraDialog label="Dialog" open={open} style={{ '--width': '50vw' }} onSlAfterHide={() => setOpen(false)}>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        <TerraButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
+          Close
+        </TerraButton>
+      </TerraDialog>
+
+      <TerraButton onClick={() => setOpen(true)}>Open Dialog</TerraButton>
+    </>
+  );
+};
+```
+
+{% endraw %}
+
+### Scrolling
+
+By design, a dialog's height will never exceed that of the viewport. As such, dialogs will not scroll with the page ensuring the header and footer are always accessible to the user.
+
+```html:preview
+<terra-dialog label="Dialog" class="dialog-scrolling">
+  <div style="height: 150vh; border: dashed 2px var(--terra-color-neutral-200); padding: 0 1rem;">
+    <p>Scroll down and give it a try! 👇</p>
+  </div>
+  <terra-button slot="footer" variant="primary">Close</terra-button>
+</terra-dialog>
+
+<terra-button>Open Dialog</terra-button>
+
+<script>
+  const dialog = document.querySelector('.dialog-scrolling');
+  const openButton = dialog.nextElementSibling;
+  const closeButton = dialog.querySelector('terra-button[slot="footer"]');
+
+  openButton.addEventListener('click', () => dialog.show());
+  closeButton.addEventListener('click', () => dialog.hide());
+</script>
+```
+
+{% raw %}
+
+```jsx:react
+import { useState } from 'react';
+import TerraButton from '@nasa-terra/components/dist/react/button';
+import TerraDialog from '@nasa-terra/components/dist/react/dialog';
+
+const App = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <TerraDialog label="Dialog" open={open} onSlAfterHide={() => setOpen(false)}>
+        <div
+          style={{
+            height: '150vh',
+            border: 'dashed 2px var(--terra-color-neutral-200)',
+            padding: '0 1rem'
+          }}
+        >
+          <p>Scroll down and give it a try! 👇</p>
+        </div>
+
+        <TerraButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
+          Close
+        </TerraButton>
+      </TerraDialog>
+
+      <TerraButton onClick={() => setOpen(true)}>Open Dialog</TerraButton>
+    </>
+  );
+};
+```
+
+{% endraw %}
+
+### Header Actions
+
+The header shows a functional close button by default. You can use the `header-actions` slot to add additional [icon buttons](/components/icon-button) if needed.
+
+```html:preview
+<terra-dialog label="Dialog" class="dialog-header-actions">
+  <terra-button class="new-window" slot="header-actions">Open</terra-button>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  <terra-button slot="footer" variant="primary">Close</terra-button>
+</terra-dialog>
+
+<terra-button>Open Dialog</terra-button>
+
+<script>
+  const dialog = document.querySelector('.dialog-header-actions');
+  const openButton = dialog.nextElementSibling;
+  const closeButton = dialog.querySelector('terra-button[slot="footer"]');
+  const newWindowButton = dialog.querySelector('.new-window');
+
+  openButton.addEventListener('click', () => dialog.show());
+  closeButton.addEventListener('click', () => dialog.hide());
+  newWindowButton.addEventListener('click', () => window.open(location.href));
+</script>
+```
+
+```jsx:react
+import { useState } from 'react';
+import TerraButton from '@nasa-terra/components/dist/react/button';
+import TerraDialog from '@nasa-terra/components/dist/react/dialog';
+import SlIconButton from '@nasa-terra/components/dist/react/icon-button';
+
+const App = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <TerraDialog label="Dialog" open={open} onSlAfterHide={() => setOpen(false)}>
+        <SlIconButton
+          class="new-window"
+          slot="header-actions"
+          name="box-arrow-up-right"
+          onClick={() => window.open(location.href)}
+        />
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        <TerraButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
+          Close
+        </TerraButton>
+      </TerraDialog>
+
+      <TerraButton onClick={() => setOpen(true)}>Open Dialog</TerraButton>
+    </>
+  );
+};
+```
+
+### Preventing the Dialog from Closing
+
+By default, dialogs will close when the user clicks the close button, clicks the overlay, or presses the [[Escape]] key. In most cases, the default behavior is the best behavior in terms of UX. However, there are situations where this may be undesirable, such as when data loss will occur.
+
+To keep the dialog open in such cases, you can cancel the `terra-request-close` event. When canceled, the dialog will remain open and pulse briefly to draw the user's attention to it.
+
+You can use `event.detail.source` to determine what triggered the request to close. This example prevents the dialog from closing when the overlay is clicked, but allows the close button or [[Escape]] to dismiss it.
+
+```html:preview
+<terra-dialog label="Dialog" class="dialog-deny-close">
+  This dialog will not close when you click on the overlay.
+  <terra-button slot="footer" variant="primary">Close</terra-button>
+</terra-dialog>
+
+<terra-button>Open Dialog</terra-button>
+
+<script>
+  const dialog = document.querySelector('.dialog-deny-close');
+  const openButton = dialog.nextElementSibling;
+  const closeButton = dialog.querySelector('terra-button[slot="footer"]');
+
+  openButton.addEventListener('click', () => dialog.show());
+  closeButton.addEventListener('click', () => dialog.hide());
+
+  // Prevent the dialog from closing when the user clicks on the overlay
+  dialog.addEventListener('terra-request-close', event => {
+    if (event.detail.source === 'overlay') {
+      event.preventDefault();
+    }
+  });
+</script>
+```
+
+```jsx:react
+import { useState } from 'react';
+import TerraButton from '@nasa-terra/components/dist/react/button';
+import TerraDialog from '@nasa-terra/components/dist/react/dialog';
+
+const App = () => {
+  const [open, setOpen] = useState(false);
+
+  // Prevent the dialog from closing when the user clicks on the overlay
+  function handleRequestClose(event) {
+    if (event.detail.source === 'overlay') {
+      event.preventDefault();
+    }
+  }
+
+  return (
+    <>
+      <TerraDialog label="Dialog" open={open} onSlRequestClose={handleRequestClose} onSlAfterHide={() => setOpen(false)}>
+        This dialog will not close when you click on the overlay.
+        <TerraButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
+          Close
+        </TerraButton>
+      </TerraDialog>
+
+      <TerraButton onClick={() => setOpen(true)}>Open Dialog</TerraButton>
+    </>
+  );
+};
+```
+
+### Customizing Initial Focus
+
+By default, the dialog's panel will gain focus when opened. This allows a subsequent tab press to focus on the first tabbable element in the dialog. If you want a different element to have focus, add the `autofocus` attribute to it as shown below.
+
+```html:preview
+<terra-dialog label="Dialog" class="dialog-focus">
+  <terra-input autofocus placeholder="I will have focus when the dialog is opened"></terra-input>
+  <terra-button slot="footer" variant="primary">Close</terra-button>
+</terra-dialog>
+
+<terra-button>Open Dialog</terra-button>
+
+<script>
+  const dialog = document.querySelector('.dialog-focus');
+  const input = dialog.querySelector('terra-input');
+  const openButton = dialog.nextElementSibling;
+  const closeButton = dialog.querySelector('terra-button[slot="footer"]');
+
+  openButton.addEventListener('click', () => dialog.show());
+  closeButton.addEventListener('click', () => dialog.hide());
+</script>
+```
+
+```jsx:react
+import { useState } from 'react';
+import TerraButton from '@nasa-terra/components/dist/react/button';
+import TerraDialog from '@nasa-terra/components/dist/react/dialog';
+import TerraInput from '@nasa-terra/components/dist/react/input';
+
+const App = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <TerraDialog label="Dialog" open={open} onSlAfterHide={() => setOpen(false)}>
+        <TerraInput autofocus placeholder="I will have focus when the dialog is opened" />
+        <TerraButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
+          Close
+        </TerraButton>
+      </TerraDialog>
+
+      <TerraButton onClick={() => setOpen(true)}>Open Dialog</TerraButton>
+    </>
+  );
+};
+```
+
+:::tip
+You can further customize initial focus behavior by canceling the `terra-initial-focus` event and setting focus yourself inside the event handler.
+:::

{terra_ui_components-0.0.117 → terra_ui_components-0.0.118}/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@nasa-terra/components",
-  "version": "0.0.117",
+  "version": "0.0.118",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@nasa-terra/components",
-      "version": "0.0.117",
+      "version": "0.0.118",
       "license": "MIT",
       "dependencies": {
         "@apollo/client": "^3.13.8",

{terra_ui_components-0.0.117 → terra_ui_components-0.0.118}/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nasa-terra/components",
   "description": "A collection of NASA Earthdata components",
-  "version": "0.0.117",
+  "version": "0.0.118",
   "homepage": "https://github.com/nasa/terra-ui-components",
   "author": "NASA GES DISC <https://disc.gsfc.nasa.gov>",
   "license": "MIT",

{terra_ui_components-0.0.117 → terra_ui_components-0.0.118}/pyproject.toml

@@ -5,7 +5,7 @@ build-backend = "hatchling.build"
 [project]
 name = "terra_ui_components"
 dependencies = ["anywidget>=0.9"]
-version = "0.0.117"
+version = "0.0.118"
 readme = "README.md"
 description = "NASA Terra UI Components Library"
 requires-python = ">=3.8"

{terra_ui_components-0.0.117 → terra_ui_components-0.0.118}/src/components/button/button.component.ts

@@ -14,6 +14,7 @@ import type {
     TerraDialogHideEvent,
     TerraDialogShowEvent,
 } from '../../terra-ui-components.js'
+import TerraIcon from '../icon/icon.component.js'
 
 /**
  * @summary Buttons represent actions that are available to the user.
@@ -29,11 +30,14 @@ import type {
  * @csspart prefix - The container that wraps the prefix.
  * @csspart label - The button's label.
  * @csspart suffix - The container that wraps the suffix.
- * @csspart caret - The button's caret icon, an `<sl-icon>` element.
+ * @csspart caret - The button's caret icon, an `<terra-icon>` element.
  * @csspart spinner - The spinner that shows when the button is in the loading state.
  */
 export default class TerraButton extends TerraElement implements TerraFormControl {
     static styles: CSSResultGroup = [componentStyles, styles]
+    static dependencies = {
+        'terra-icon': TerraIcon,
+    }
 
     private readonly formControlController = new FormControlController(this, {
         assumeInteractionOn: ['click'],
@@ -243,7 +247,58 @@ export default class TerraButton extends TerraElement implements TerraFormContro
 
         if (this.forDialog) {
             // this is a trigger for a dialog, go ahead and show the dialog
-            const el = document.getElementById(this.forDialog) as TerraDialog
+            // First try document.getElementById (for dialogs in light DOM)
+            let el = document.getElementById(this.forDialog) as TerraDialog
+
+            // If not found, search in shadow DOMs
+            if (!el) {
+                // Helper function to recursively search shadow roots
+                const findInShadowRoots = (
+                    root: Document | ShadowRoot
+                ): TerraDialog | null => {
+                    // Try getElementById if available (Document has it, ShadowRoot doesn't)
+                    if (
+                        'getElementById' in root &&
+                        typeof root.getElementById === 'function'
+                    ) {
+                        const found = root.getElementById(this.forDialog!)
+                        if (found) {
+                            return found as TerraDialog
+                        }
+                    }
+
+                    // Search all elements in this root
+                    const allElements = root.querySelectorAll('*')
+                    for (const element of allElements) {
+                        // Check if this element is the dialog we're looking for
+                        if (
+                            element.id === this.forDialog &&
+                            element.tagName.toLowerCase() === 'terra-dialog'
+                        ) {
+                            return element as TerraDialog
+                        }
+
+                        // If element has a shadow root, search it recursively
+                        if (
+                            element.shadowRoot &&
+                            element.shadowRoot.mode === 'open'
+                        ) {
+                            const found = findInShadowRoots(element.shadowRoot)
+                            if (found) {
+                                return found
+                            }
+                        }
+                    }
+
+                    return null
+                }
+
+                const found = findInShadowRoots(document)
+                if (found) {
+                    el = found
+                }
+            }
+
             el?.show()
         }
     }
@@ -416,6 +471,19 @@ export default class TerraButton extends TerraElement implements TerraFormContro
                     : ``
             }
         </slot>
+        ${
+            this.caret
+                ? html`
+                      <span part="caret" class="button__caret">
+                          <terra-icon
+                              name="solid-chevron-down"
+                              library="heroicons"
+                              aria-hidden="true"
+                          ></terra-icon>
+                      </span>
+                  `
+                : ''
+        }
       </${tag}>
     `
     }

{terra_ui_components-0.0.117 → terra_ui_components-0.0.118}/src/components/button/button.styles.ts

@@ -442,6 +442,8 @@ export default css`
 
     .button--caret .button__caret {
         height: auto;
+        display: flex;
+        align-items: center;
     }
 
     /*