How to use terra-disclosure-manager - 10 common examples

requestFocus={this.props.disclosureManager.requestFocus}
          releaseFocus={this.props.disclosureManager.releaseFocus}
        >
          <p>{paraOne}</p>
        
        <button>
        <br>
        <br>
        </button><button>
      
    );
  }
}

DialogModalWithFocus.propTypes = propTypes;
export default withDisclosureManager(DialogModalWithFocus);
</button>

document.getElementById('popup-in-modal')}
        >
          
        
        <button id="popup-in-modal">
      
    );
  }
}

NotificationDialogWithFocus.propTypes = propTypes;
export default withDisclosureManager(NotificationDialogWithFocus);
</button>

import React from 'react';
import PropTypes from 'prop-types';
import { withDisclosureManager, disclosureManagerShape } from 'terra-disclosure-manager';
import { Route } from 'react-router-dom';
import Button from 'terra-button';
import classNames from 'classnames/bind';

import ContentContainer from 'terra-content-container';
import styles from './ApplicationContent.module.scss';

const cx = classNames.bind(styles);

const DisclosureComponent = withDisclosureManager(({ disclosureManager }) => (
  
    <p>Hello World</p>
    <button>
  
));

const dummyContent = (
  <div>
    <h2>Lorem ipsum dolor sit amet</h2>
    <hr>
    <p>Nullam ornare sapien at sapien aliquam commodo. Pellentesque auctor, metus consectetur elementum venenatis, lectus libero tristique leo, ac blandit nunc metus vitae sem. Nam finibus orci quis aliquet elementum. Duis in pretium dolor, ac commodo nibh.</p>
    <p>Proin pellentesque lectus vitae risus imperdiet tempus. Sed ac justo luctus, iaculis quam in, cursus augue. In quis erat tincidunt, pellentesque velit in, pharetra ipsum. Praesent et tincidunt arcu. Ut imperdiet risus id leo eleifend vehicula. Maecenas non tempor arcu, nec posuere lectus. Pellentesque varius magna nunc, sit amet vehicula nisi fermentum et. Ut nibh sem, feugiat blandit lacus ut, mattis maximus libero. Ut tincidunt nibh in imperdiet finibus. Phasellus eu hendrerit justo. Aliquam ac dolor sit amet metus ornare tristique at viverra sem. Vivamus non erat enim. Praesent tempor lorem felis, in aliquam lacus aliquet in. Phasellus quam felis, porttitor eget dictum at, hendrerit in sem. Duis volutpat orci sed mauris pharetra, at mollis diam placerat. Phasellus sed leo dolor. Praesent leo risus, finibus elementum aliquam at, bibendum non eros. Nunc feugiat semper nisi nec sollicitudin. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sed feugiat lectus. Proin tellus justo, rhoncus vel arcu eget, molestie placerat lacus. Aliquam diam urna, finibus nec nisi ultricies, egestas vulputate tellus. Suspendisse varius metus eget orci sollicitudin lacinia. Morbi ornare arcu leo, non auctor mauris finibus ac. Etiam placerat orci at dui iaculis, ornare sagittis augue euismod. Etiam in justo vel ex gravida placerat eget quis libero. Etiam sit amet nisl neque. Sed id fringilla elit. Vestibulum vitae varius enim, sed luctus magna.</p>
    <p>Cras et ante blandit, tincidunt lacus non, tincidunt quam. Duis id eros gravida, eleifend leo non, mattis mi. Phasellus rutrum sapien at vehicula facilisis. Curabitur elementum, lacus vitae auctor interdum, sem turpis maximus urna, a vulputate sapien felis faucibus turpis. Pellentesque nec tempor libero. Nunc est augue, luctus non lorem quis, ultricies elementum tortor. Nam blandit lacus varius orci rutrum dignissim. Donec a vehicula odio. Nam lobortis metus vel nisi tincidunt, eget viverra quam tempor. Nam sed dictum metus. Ut laoreet ex eget dapibus condimentum. Sed quis bibendum ligula. Integer nec mollis urna, gravida pharetra massa. Sed nec tortor posuere, volutpat magna at, rhoncus orci.</p>
    <h2>Orci varius natoque penatibus et.</h2></div></button>

this.setState({
                text: event.target.value,
              });
            }}
          />
          {this.state.text &amp;&amp; this.state.text.length ? <p>Component has unsaved changes!</p> : null}
        
      
    );
  }
}

DisclosureComponent.propTypes = propTypes;
DisclosureComponent.defaultProps = defaultProps;

const WrappedDisclosureComponent = withDisclosureManager(DisclosureComponent);

export default withDisclosureManager(WrappedDisclosureComponent);

this.setState({
                text: event.target.value,
              });
            }}
          />
          {this.state.text &amp;&amp; this.state.text.length ? <p>Component has unsaved changes!</p> : null}
        
      
    );
  }
}

DisclosureComponent.propTypes = propTypes;
DisclosureComponent.defaultProps = defaultProps;

const WrappedDisclosureComponent = withDisclosureManager(DisclosureComponent);

export default WrappedDisclosureComponent;

import React from 'react';
import ModalManager from 'terra-modal-manager';
import SlidePanelManager from 'terra-slide-panel-manager';

import Aggregator from 'terra-aggregator';
import AggregatorItem from 'terra-aggregator/lib/terra-dev-site/doc/common/AggregatorItem';
import { withDisclosureManager } from 'terra-disclosure-manager';

const Wrapper = withDisclosureManager(({ items, disclosureManager }) => (
  
));

const ModalManagerBypass = withDisclosureManager(({ disclosureManager }) => {
  const items = Object.freeze([{
    key: 'SECTION_0',
    component: ,
  }, {
    key: 'SECTION_1',
    component: ,
  }]);

  return (

import React from 'react';
import { withDisclosureManager, disclosureManagerShape } from 'terra-disclosure-manager';
import ModalManager from 'terra-modal-manager';

import ModalAggregator from 'terra-aggregator/lib/terra-dev-site/doc/common/ModalAggregator';

const ModalButton = withDisclosureManager(({ disclosureManager }) => (
  <button type="button"> {
      disclosureManager.disclose({
        preferredType: 'modal',
        size: 'large',
        content: {
          key: 'MODAL_EXAMPLE',
          component: ,
        },
      });
    }}
  &gt;
    Launch Modal
  </button>
));

import PropTypes from 'prop-types';
import Button from 'terra-button';
import ContentContainer from 'terra-content-container';
import Arrange from 'terra-arrange';
import ActionHeader from 'terra-action-header';
import { withDisclosureManager, disclosureManagerShape } from 'terra-disclosure-manager';
import classNames from 'classnames/bind';
import List from './placeholder-list/PlaceholderList';
import Item from './placeholder-list/PlaceholderListItem';
import styles from './AggregatorItem.module.scss';

import DisclosureComponent from './DisclosureComponent';

const cx = classNames.bind(styles);

const ReadonlyModal = withDisclosureManager(({ disclosureManager }) => (
  
    )}
  >
    <div>
      <p>This modal was not presented through the Aggregator. The Aggregator state was maintained.</p>
    </div>
  
));

ReadonlyModal.propTypes = {

<button id="popup-in-modal">
        <br>
        <br>
        </button><button>
      
    
  );
}

ModalContainer.propTypes = {
  disclosureManager: disclosureManagerShape,
};

export default withDisclosureManager(ModalContainer);
</button>

});
            }}
          />
          {this.state.text &amp;&amp; this.state.text.length ? <p>Component has unsaved changes!</p> : null}
        
      
    );
  }
}

DisclosureComponent.propTypes = propTypes;
DisclosureComponent.defaultProps = defaultProps;

const WrappedDisclosureComponent = withDisclosureManager(DisclosureComponent);

export default withDisclosureManager(WrappedDisclosureComponent);