studiokit-scaffolding-js 7.0.8-alpha.2 → 7.0.8-alpha.3

package/lib/components/Quill/CustomToolbar.js

@@ -234,14 +234,13 @@ var CustomToolbar = function (props) {
     var guid = props.guid, sectionOptions = props.sectionOptions, moreSectionOptions = props.moreSectionOptions, className = props.className, disabled = props.disabled, reactQuillRef = props.reactQuillRef, isVisibleWhenDisabled = props.isVisibleWhenDisabled;
     var _a = react_1.useState(false), isInitialized = _a[0], setIsInitialized = _a[1];
     var _b = react_1.useState(false), isShowingMoreOptions = _b[0], setIsShowingMoreOptions = _b[1];
-    var ref = react_1.default.createRef();
+    var toolbarRef = react_1.default.createRef();
     react_1.useEffect(function () {
-        var _a;
-        // initialize the toolbar after reactQuill exists and the buttons are displayed
-        if (!isInitialized && reactQuillRef && (!disabled || isVisibleWhenDisabled)) {
-            accessibilityFix_1.applyAccessibilityHacks(ref, reactQuillRef.getEditor());
+        // initialize the toolbar after toolbarRef and reactQuill exist and the buttons are displayed
+        if (!isInitialized && toolbarRef.current && reactQuillRef && (!disabled || isVisibleWhenDisabled)) {
+            accessibilityFix_1.applyAccessibilityHacks(toolbarRef, reactQuillRef.getEditor());
             // manually modify the table picker select svg icon
-            var label = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.querySelector('.ql-table .ql-picker-label');
+            var label = toolbarRef.current.querySelector('.ql-table .ql-picker-label');
             if (label) {
                 var svg = label.childNodes[0];
                 var polygons = svg.querySelectorAll('polygon');
@@ -259,11 +258,11 @@ var CustomToolbar = function (props) {
             }
             setIsInitialized(true);
         }
-    }, [disabled, isInitialized, isVisibleWhenDisabled, reactQuillRef, ref]);
+    }, [disabled, isInitialized, isVisibleWhenDisabled, reactQuillRef, toolbarRef]);
     var toolbarSections = react_1.useMemo(function () { return getToolbarSectionsForOptions(sectionOptions); }, [sectionOptions]);
     var hasMoreOptions = !lodash_1.isUndefined(moreSectionOptions);
     var moreToolbarSections = react_1.useMemo(function () { return (!lodash_1.isUndefined(moreSectionOptions) ? getToolbarSectionsForOptions(moreSectionOptions) : []); }, [moreSectionOptions]);
-    return (react_1.default.createElement("div", { id: "quill-toolbar-" + guid, className: "" + (className ? " " + className : '') + (disabled ? ' disabled' : '') + (!isVisibleWhenDisabled && disabled ? ' disabled-invisible' : ''), ref: ref }, (!disabled || isVisibleWhenDisabled) && (react_1.default.createElement(react_1.default.Fragment, null,
+    return (react_1.default.createElement("div", { id: "quill-toolbar-" + guid, className: "" + (className ? " " + className : '') + (disabled ? ' disabled' : '') + (!isVisibleWhenDisabled && disabled ? ' disabled-invisible' : ''), ref: toolbarRef }, (!disabled || isVisibleWhenDisabled) && (react_1.default.createElement(react_1.default.Fragment, null,
         toolbarSections.map(function (section, i) { return (react_1.default.createElement("span", { className: "ql-formats", key: i }, section(disabled))); }),
         hasMoreOptions && (react_1.default.createElement("button", { className: "more-options f6 fw5" + (isShowingMoreOptions ? ' expanded color-primary' : ''), type: "button", title: "More options", "aria-expanded": isShowingMoreOptions, onClick: function () { return setIsShowingMoreOptions(!isShowingMoreOptions); } },
             react_1.default.createElement(MoreHoriz_1.default, { className: "ma0" }))),

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "studiokit-scaffolding-js",
-	"version": "7.0.8-alpha.2",
+	"version": "7.0.8-alpha.3",
 	"description": "Common scaffolding for Studio apps at Purdue",
 	"repository": "https://gitlab.com/purdue-informatics/studiokit/studiokit-scaffolding-js",
 	"license": "MIT",