dce-reactkit 3.5.6 → 3.5.7

package/dist/esm/types/components/{ScrollLockToBottomContainer.d.ts → AutoscrollToBottomContainer.d.ts}

@@ -1,7 +1,9 @@
 /**
  * Container that automatically scrolls when new items are added,
  *   lets the user scroll up to see old items, but resumes
- *   autoscroll when the user scrolls back to the bottom
+ *   autoscroll when the user scrolls back to the bottom.
+ *   Note: takes up full height of parent, so parent should
+ *   have a determined height for the scroll to work.
  * @author Gabe Abrams
  */
 import React from 'react';
@@ -15,5 +17,5 @@ type AutoScrollItem = {
     id: string | number;
     item: React.ReactNode;
 };
-declare const ScrollLockToBottom: React.FC<Props>;
-export default ScrollLockToBottom;
+declare const AutoscrollToBottomContainer: React.FC<Props>;
+export default AutoscrollToBottomContainer;

package/dist/esm/types/index.d.ts

@@ -19,7 +19,7 @@ import CSVDownloadButton from './components/CSVDownloadButton';
 import DBEntryManagerPanel from './components/DBEntryManagerPanel';
 import Tooltip from './components/Tooltip';
 import ToggleSwitch from './components/ToggleSwitch';
-import ScrollLockToBottom from './components/ScrollLockToBottomContainer';
+import AutoscrollToBottomContainer from './components/AutoscrollToBottomContainer';
 import ErrorWithCode from './errors/ErrorWithCode';
 import MINUTE_IN_MS from './constants/MINUTE_IN_MS';
 import HOUR_IN_MS from './constants/HOUR_IN_MS';
@@ -83,4 +83,4 @@ import PickableItem from './components/ItemPicker/types/PickableItem';
 import DBEntry from './components/DBEntryManagerPanel/types/DBEntry';
 import DBEntryField from './components/DBEntryManagerPanel/types/DBEntryField';
 import DBEntryFieldType from './components/DBEntryManagerPanel/types/DBEntryFieldType';
-export { AppWrapper, LoadingSpinner, ErrorBox, Modal, TabBox, RadioButton, CheckboxButton, ButtonInputGroup, SimpleDateChooser, Drawer, PopSuccessMark, PopFailureMark, PopPendingMark, CopiableBox, ItemPicker, LogReviewer, IntelliTable, CSVDownloadButton, DBEntryManagerPanel, Tooltip, ToggleSwitch, ScrollLockToBottom, alert, confirm, showFatalError, ErrorWithCode, MINUTE_IN_MS, HOUR_IN_MS, DAY_IN_MS, DynamicWord, abbreviate, avg, ceilToNumDecimals, floorToNumDecimals, forceNumIntoBounds, padDecimalZeros, padZerosLeft, roundToNumDecimals, sum, waitMs, getOrdinal, getTimeInfoInET, stubServerEndpoint, startMinWait, getHumanReadableDate, getPartOfDay, stringsToHumanReadableList, onlyKeepLetters, parallelLimit, getMonthName, genCSV, canReviewLogs, isMobileOrTablet, extractProp, compareArraysByProp, genCommaList, validateEmail, validatePhoneNumber, validateString, getLocalTimeInfo, idify, initClient, visitServerEndpoint, logClientEvent, addFatalErrorHandler, initServer, genRouteHandler, handleError, handleSuccess, initLogCollection, addDBEditorEndpoints, ModalButtonType, ModalSize, ModalType, ReactKitErrorCode, Variant, DayOfWeek, Log, LogType, LogSource, LogAction, LogBuiltInMetadata, LogMetadataType, IntelliTableColumn, PickableItem, DBEntry, DBEntryField, DBEntryFieldType, ParamType, };
+export { AppWrapper, LoadingSpinner, ErrorBox, Modal, TabBox, RadioButton, CheckboxButton, ButtonInputGroup, SimpleDateChooser, Drawer, PopSuccessMark, PopFailureMark, PopPendingMark, CopiableBox, ItemPicker, LogReviewer, IntelliTable, CSVDownloadButton, DBEntryManagerPanel, Tooltip, ToggleSwitch, AutoscrollToBottomContainer, alert, confirm, showFatalError, ErrorWithCode, MINUTE_IN_MS, HOUR_IN_MS, DAY_IN_MS, DynamicWord, abbreviate, avg, ceilToNumDecimals, floorToNumDecimals, forceNumIntoBounds, padDecimalZeros, padZerosLeft, roundToNumDecimals, sum, waitMs, getOrdinal, getTimeInfoInET, stubServerEndpoint, startMinWait, getHumanReadableDate, getPartOfDay, stringsToHumanReadableList, onlyKeepLetters, parallelLimit, getMonthName, genCSV, canReviewLogs, isMobileOrTablet, extractProp, compareArraysByProp, genCommaList, validateEmail, validatePhoneNumber, validateString, getLocalTimeInfo, idify, initClient, visitServerEndpoint, logClientEvent, addFatalErrorHandler, initServer, genRouteHandler, handleError, handleSuccess, initLogCollection, addDBEditorEndpoints, ModalButtonType, ModalSize, ModalType, ReactKitErrorCode, Variant, DayOfWeek, Log, LogType, LogSource, LogAction, LogBuiltInMetadata, LogMetadataType, IntelliTableColumn, PickableItem, DBEntry, DBEntryField, DBEntryFieldType, ParamType, };

package/dist/index.d.ts

@@ -609,7 +609,9 @@ declare const ToggleSwitch: React.FC<Props$1>;
 /**
  * Container that automatically scrolls when new items are added,
  *   lets the user scroll up to see old items, but resumes
- *   autoscroll when the user scrolls back to the bottom
+ *   autoscroll when the user scrolls back to the bottom.
+ *   Note: takes up full height of parent, so parent should
+ *   have a determined height for the scroll to work.
  * @author Gabe Abrams
  */
 
@@ -622,7 +624,7 @@ type AutoScrollItem = {
     id: string | number;
     item: React.ReactNode;
 };
-declare const ScrollLockToBottom: React.FC<Props>;
+declare const AutoscrollToBottomContainer: React.FC<Props>;
 
 /**
  * An error with a code
@@ -1410,4 +1412,4 @@ declare const LogBuiltInMetadata: {
     };
 };
 
-export { AppWrapper, ButtonInputGroup, CSVDownloadButton, CheckboxButton, CopiableBox, DAY_IN_MS, DBEntry, DBEntryField, DBEntryFieldType, DBEntryManagerPanel, DayOfWeek, Drawer, DynamicWord, ErrorBox, ErrorWithCode, HOUR_IN_MS, IntelliTable, IntelliTableColumn, ItemPicker, LoadingSpinner, Log, LogAction, LogBuiltInMetadata, LogMetadataType, LogReviewer, LogSource, LogType, MINUTE_IN_MS, Modal, ModalButtonType, ModalSize, ModalType, ParamType, PickableItem, PopFailureMark, PopPendingMark, PopSuccessMark, RadioButton, ReactKitErrorCode, ScrollLockToBottom, SimpleDateChooser, TabBox, ToggleSwitch, Tooltip, Variant, abbreviate, addDBEditorEndpoints, addFatalErrorHandler, alert, avg, canReviewLogs, ceilToNumDecimals, compareArraysByProp, confirm, extractProp, floorToNumDecimals, forceNumIntoBounds, genCSV, genCommaList, genRouteHandler, getHumanReadableDate, getLocalTimeInfo, getMonthName, getOrdinal, getPartOfDay, getTimeInfoInET, handleError, handleSuccess, idify, initClient, initLogCollection, initServer, isMobileOrTablet, logClientEvent, onlyKeepLetters, padDecimalZeros, padZerosLeft, parallelLimit, roundToNumDecimals, showFatalError, startMinWait, stringsToHumanReadableList, stubServerEndpoint, sum, validateEmail, validatePhoneNumber, validateString, visitServerEndpoint, waitMs };
+export { AppWrapper, AutoscrollToBottomContainer, ButtonInputGroup, CSVDownloadButton, CheckboxButton, CopiableBox, DAY_IN_MS, DBEntry, DBEntryField, DBEntryFieldType, DBEntryManagerPanel, DayOfWeek, Drawer, DynamicWord, ErrorBox, ErrorWithCode, HOUR_IN_MS, IntelliTable, IntelliTableColumn, ItemPicker, LoadingSpinner, Log, LogAction, LogBuiltInMetadata, LogMetadataType, LogReviewer, LogSource, LogType, MINUTE_IN_MS, Modal, ModalButtonType, ModalSize, ModalType, ParamType, PickableItem, PopFailureMark, PopPendingMark, PopSuccessMark, RadioButton, ReactKitErrorCode, SimpleDateChooser, TabBox, ToggleSwitch, Tooltip, Variant, abbreviate, addDBEditorEndpoints, addFatalErrorHandler, alert, avg, canReviewLogs, ceilToNumDecimals, compareArraysByProp, confirm, extractProp, floorToNumDecimals, forceNumIntoBounds, genCSV, genCommaList, genRouteHandler, getHumanReadableDate, getLocalTimeInfo, getMonthName, getOrdinal, getPartOfDay, getTimeInfoInET, handleError, handleSuccess, idify, initClient, initLogCollection, initServer, isMobileOrTablet, logClientEvent, onlyKeepLetters, padDecimalZeros, padZerosLeft, parallelLimit, roundToNumDecimals, showFatalError, startMinWait, stringsToHumanReadableList, stubServerEndpoint, sum, validateEmail, validatePhoneNumber, validateString, visitServerEndpoint, waitMs };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dce-reactkit",
-  "version": "3.5.6",
+  "version": "3.5.7",
   "description": "Shared components for Harvard DCE apps",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/{ScrollLockToBottomContainer.tsx → AutoscrollToBottomContainer.tsx}

@@ -1,7 +1,9 @@
 /**
  * Container that automatically scrolls when new items are added,
  *   lets the user scroll up to see old items, but resumes
- *   autoscroll when the user scrolls back to the bottom
+ *   autoscroll when the user scrolls back to the bottom.
+ *   Note: takes up full height of parent, so parent should
+ *   have a determined height for the scroll to work.
  * @author Gabe Abrams
  */
 
@@ -48,13 +50,13 @@ type AutoScrollItem = {
 /*------------------------------------------------------------------------*/
 
 const style = `
-  .ScrollLockToBottom-outer-container {
+  .AutoscrollToBottomContainer-outer-container {
     /* Take up all space */
     height: 100%;
     position: relative;
   }
 
-  .ScrollLockToBottom-scrollable-container {
+  .AutoscrollToBottomContainer-scrollable-container {
     /* Take up max 100% height, don't take it up if not needed */
     /* (so column-reverse layout doesn't start at the bottom) */
     max-height: 100%;
@@ -69,7 +71,7 @@ const style = `
     flex-direction: column-reverse;
   }
 
-  .ScrollLockToBottom-jump-to-bottom-container {
+  .AutoscrollToBottomContainer-jump-to-bottom-container {
     /* Don't take any space in parent */
     height: 0;
     overflow: visible;
@@ -86,7 +88,7 @@ const style = `
     text-align: center;
   }
 
-  .ScrollLockToBottom-item-container {
+  .AutoscrollToBottomContainer-item-container {
     /* Normal Height */
     position: relative;
     z-index: 1;
@@ -197,7 +199,7 @@ const reducer = (state: State, action: Action): State => {
 /* ------------------------------ Component ----------------------------- */
 /*------------------------------------------------------------------------*/
 
-const ScrollLockToBottom: React.FC<Props> = (props) => {
+const AutoscrollToBottomContainer: React.FC<Props> = (props) => {
   /*------------------------------------------------------------------------*/
   /* -------------------------------- Setup ------------------------------- */
   /*------------------------------------------------------------------------*/
@@ -385,10 +387,10 @@ const ScrollLockToBottom: React.FC<Props> = (props) => {
   let jumpToBottomButton: React.ReactNode;
   if (jumpToBottomButtonVisible) {
     jumpToBottomButton = (
-      <div className={`ScrollLockToBottom-jump-to-bottom-container ScrollLockToBottom-for-${idify(itemsName ?? 'items')}`}>
+      <div className={`AutoscrollToBottomContainer-jump-to-bottom-container AutoscrollToBottomContainer-for-${idify(itemsName ?? 'items')}`}>
         <button
           type="button"
-          className={`ScrollLockToBottom-jump-to-bottom-button ScrollLockToBottom-jump-to-bottom-button-for-${idify(itemsName ?? 'items')} btn btn-sm btn-${jumpToBottomButtonVariant} pt-0 pb-0`}
+          className={`AutoscrollToBottomContainer-jump-to-bottom-button AutoscrollToBottomContainer-jump-to-bottom-button-for-${idify(itemsName ?? 'items')} btn btn-sm btn-${jumpToBottomButtonVariant} pt-0 pb-0`}
           onClick={scrollToBottom}
           aria-label="scroll back to bottom and show new content"
         >
@@ -406,7 +408,7 @@ const ScrollLockToBottom: React.FC<Props> = (props) => {
 
   // Main UI
   return (
-    <div className="ScrollLockToBottom-outer-container bg-warning">
+    <div className="AutoscrollToBottomContainer-outer-container">
       {/* Style */}
       <style>
         {style}
@@ -417,7 +419,7 @@ const ScrollLockToBottom: React.FC<Props> = (props) => {
 
       {/* Scrollable Item Container */}
       <div
-        className="ScrollLockToBottom-scrollable-container"
+        className="AutoscrollToBottomContainer-scrollable-container"
         onScroll={() => {
           handleScroll();
         }}
@@ -430,7 +432,7 @@ const ScrollLockToBottom: React.FC<Props> = (props) => {
             .map((item) => {
               return (
                 <div
-                  className="ScrollLockToBottom-item-container"
+                  className="AutoscrollToBottomContainer-item-container"
                   key={item.id}
                 >
                   {item.item}
@@ -450,4 +452,4 @@ const ScrollLockToBottom: React.FC<Props> = (props) => {
 /*------------------------------------------------------------------------*/
 
 // Export component
-export default ScrollLockToBottom;
+export default AutoscrollToBottomContainer;

package/src/index.ts

@@ -25,7 +25,7 @@ import CSVDownloadButton from './components/CSVDownloadButton';
 import DBEntryManagerPanel from './components/DBEntryManagerPanel';
 import Tooltip from './components/Tooltip';
 import ToggleSwitch from './components/ToggleSwitch';
-import ScrollLockToBottom from './components/ScrollLockToBottomContainer';
+import AutoscrollToBottomContainer from './components/AutoscrollToBottomContainer';
 
 // Import errors
 import ErrorWithCode from './errors/ErrorWithCode';
@@ -126,7 +126,7 @@ export {
   DBEntryManagerPanel,
   Tooltip,
   ToggleSwitch,
-  ScrollLockToBottom,
+  AutoscrollToBottomContainer,
   // Global functions
   alert,
   confirm,