Improved Responsiveness controllers - "remember" latest state of selected breakpoint.

layouts/scripts/dist/index.min.js

@@ -11180,16 +11180,12 @@ function ResponsiveButton({
   active,
   onSelect
 }) {
-  // active = true;
   const [state, setState] = react.exports.useState({
     open: true,
-    breakpoint: defaultResponsiveOptions[mode]
+    activeBreakpoint: defaultResponsiveOptions[mode]
   });
 
-  const updateState = update => {
+  const updateState = update => setState(Object.assign({}, state, update));
-    // update.open = true;
-    setState(Object.assign({}, state, update));
-  };
 
   react.exports.useEffect(() => {
     const closeDropdown = e => isEscHit(e) ? updateState({
@@ -11206,11 +11202,10 @@ function ResponsiveButton({
     };
   }); // Blur event / Outside click
 
-  const outsideClickAction = async e => (await isClickOutside(e)) ? updateState({
+  const handleBlur = async e => (await isClickOutside(e)) ? updateState({
     open: false
   }) : null;
 
-  const handleBlur = react.exports.useCallback(outsideClickAction, []);
   return /*#__PURE__*/React.createElement(ResponsiveButtonStyle, {
     tabIndex: "0",
     onBlur: handleBlur
@@ -11220,27 +11215,27 @@ function ResponsiveButton({
     onClick: () => select()
   }, mode), active && state.open && responsiveOptions[mode] && /*#__PURE__*/React.createElement(ResponsiveOptionsDropdown, null, responsiveOptions[mode].map(breakpoint => {
     return /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("a", {
-      className: state.breakpoint === breakpoint ? 'active' : '',
+      className: state.activeBreakpoint === breakpoint ? 'active' : '',
       onClick: () => select(breakpoint)
     }, breakpoint));
   }))); //
   // Actions
   //
 
-  function select(breakpoint = null) {
+  function select(activeBreakpoint = null) {
     // Click on option in Dropdown.
-    if (breakpoint) {
+    if (activeBreakpoint) {
       updateState({
         open: false,
-        breakpoint
+        activeBreakpoint
       });
-      onSelect(breakpoint);
+      onSelect(activeBreakpoint);
       return;
     } // Click on device button.
 
 
     if (!active) {
-      onSelect(state.breakpoint);
+      onSelect(state.activeBreakpoint);
       updateState({
         open: false
       });
@@ -11254,9 +11249,7 @@ function ResponsiveButton({
 async function isClickOutside(e) {
   const currentTarget = e.currentTarget;
   return new Promise(resolve => {
-    setTimeout(() => {
+    setTimeout(() => resolve(!currentTarget.contains(document.activeElement)));
-      resolve(!currentTarget.contains(document.activeElement));
-    }, 100);
   });
 }
 function isEscHit(event) {

layouts/scripts/toolbar/responsive-button/ResponsiveButton.jsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useEffect, useState} from "react";
+import React, {useEffect, useState} from "react";
 import {ButtonStyling, ResponsiveButtonStyle, ResponsiveOptionsDropdown} from "./responsive-button.style.js";
 
 const responsiveOptions = {
@@ -15,12 +15,8 @@ const defaultResponsiveOptions = {
 }
 
 export function ResponsiveButton({mode, active, onSelect}) {
-  // active = true;
+  const [state, setState] = useState({open: true, activeBreakpoint: defaultResponsiveOptions[mode]});
-  const [state, setState] = useState({open: true, breakpoint: defaultResponsiveOptions[mode]});
+  const updateState = (update) => setState(Object.assign({}, state, update));
-  const updateState = (update) => {
-    // update.open = true;
-    setState(Object.assign({}, state, update));
-  }
 
   useEffect(() => {
     const closeDropdown = (e) => isEscHit(e) ? updateState({open: false}) : null;
@@ -36,8 +32,7 @@ export function ResponsiveButton({mode, active, onSelect}) {
   });
 
   // Blur event / Outside click
-  const outsideClickAction = async (e) => await isClickOutside(e) ? updateState({open: false}) : null;
+  const handleBlur = async (e) => await isClickOutside(e) ? updateState({open: false}) : null;
-  const handleBlur = useCallback(outsideClickAction, []);
 
   return <ResponsiveButtonStyle tabIndex='0' onBlur={handleBlur}>
     <ButtonStyling data-mode={mode} data-active={active} onClick={() => select()}>{mode}</ButtonStyling>
@@ -45,7 +40,7 @@ export function ResponsiveButton({mode, active, onSelect}) {
       <ResponsiveOptionsDropdown>
         {responsiveOptions[mode].map((breakpoint) => {
           return <li>
-            <a className={state.breakpoint === breakpoint ? 'active' : ''} onClick={() => select(breakpoint)}>{breakpoint}</a>
+            <a className={state.activeBreakpoint === breakpoint ? 'active' : ''} onClick={() => select(breakpoint)}>{breakpoint}</a>
           </li>;
         })}
       </ResponsiveOptionsDropdown>
@@ -56,17 +51,17 @@ export function ResponsiveButton({mode, active, onSelect}) {
   // Actions
   //
 
-  function select(breakpoint = null) {
+  function select(activeBreakpoint = null) {
     // Click on option in Dropdown.
-    if (breakpoint) {
+    if (activeBreakpoint) {
-      updateState({open: false, breakpoint});
+      updateState({open: false, activeBreakpoint});
-      onSelect(breakpoint);
+      onSelect(activeBreakpoint);
       return;
     }
 
     // Click on device button.
     if (!active) {
-      onSelect(state.breakpoint)
+      onSelect(state.activeBreakpoint)
       updateState({open: false});
     } else {
       updateState({open: true});
@@ -82,9 +77,7 @@ export async function isClickOutside(e) {
   const currentTarget = e.currentTarget;
 
   return new Promise(resolve => {
-    setTimeout(() => {
+    setTimeout(() => resolve(!currentTarget.contains(document.activeElement)));
-      resolve(!currentTarget.contains(document.activeElement));
-    }, 100);
   })
 }