Merge pull request #1900 from Kajabi/develop

chore: next version bump

packages/sage-react/.storybook/preview-head.html

@@ -2,7 +2,31 @@
   Need local instance of Pine CORE running. not PINE ICONS
   Make sure that the port here matches what is running in your local instance.
 -->
-<script type="module" src="https://localhost:7300/build/pine-core.esm.js"></script>
-<script nomodule src="https://localhost:7300/build/index.esm.js"></script>
+<script>
+  const LOCAL_PORT = 7301;
+  const host = window.location.host;
+  const timestamp = new Date().getTime(); // Generate a unique timestamp
+
+  if ( host.includes('localhost') ) {
+    window.PINE_CORE_URL = `https://localhost:${LOCAL_PORT}/build`;
+  } else {
+    window.PINE_CORE_URL = 'https://cdn.jsdelivr.net/npm/@pine-ds/core/dist/pine-core';
+  }
+
+  function setScriptLinks() {
+    const scriptModule = document.getElementById("scriptModule");
+    const scriptNoModule = document.getElementById("scriptNoModule");
+    const linkStyleSheet = document.getElementById("linkStyleSheet");
+
+    scriptModule.src = `${window.PINE_CORE_URL}/pine-core.esm.js?v=${timestamp}`;
+    scriptNoModule.src = `${window.PINE_CORE_URL}/index.esm.js?v=${timestamp}`;
+    linkStyleSheet.href = `${window.PINE_CORE_URL}/pine-core.css?v=${timestamp}`;
+  }
+
+  document.addEventListener('DOMContentLoaded', setScriptLinks);
+</script>
+
+<script id="scriptNoModule" nomodule></script>
+<script id="scriptModule" type="module"></script>
+<link id="linkStyleSheet" rel="stylesheet" />
 
-<link rel="stylesheet" href="https://localhost:7300/build/pine-core.css" />

packages/sage-react/lib/Drawer/Drawer.jsx

@@ -11,6 +11,8 @@ import {
   DRAWER_END_COLLAPSE,
 } from './configs';
 
+/* eslint-disable react-hooks/exhaustive-deps */
+
 export const Drawer = ({
   active,
   children,

packages/sage-react/lib/Icon/Icon.jsx

@@ -15,6 +15,7 @@ export const Icon = ({
   icon,
   label,
   size,
+  ...rest
 }) => {
   const classNames = classnames(
     className,
@@ -57,7 +58,7 @@ export const Icon = ({
   };
 
   const renderIcon = () => (
-    <pds-icon name={icon} class={`t-sage--color-${color} ${classNames}`} size={sizeMapping[size]} />
+    <pds-icon name={icon} class={`t-sage--color-${color} ${classNames}`} size={sizeMapping[size]} {...rest} />
   );
 
   const setBackgroundDimensions = () => {

packages/sage-react/lib/Input/Input.jsx

@@ -8,6 +8,8 @@ import {
   INPUT_TYPE
 } from './configs';
 
+/* eslint-disable react-hooks/exhaustive-deps */
+
 export const Input = React.forwardRef(({
   autocomplete,
   className,

packages/sage-react/lib/Input/Input.story.jsx

@@ -4,6 +4,8 @@ import { SageTokens } from '../configs';
 import { Input } from './Input';
 import { Popover } from '../Popover';
 
+/* eslint-disable no-console */
+
 export default {
   title: 'Sage/Input',
   component: Input,

packages/sage-react/lib/Label/Label.jsx

@@ -67,7 +67,7 @@ export const Label = React.forwardRef(({
       </TagName>
       {interactiveType === LABEL_INTERACTIVE_TYPES.SECONDARY_BUTTON && secondaryButton}
       {(interactiveType === LABEL_INTERACTIVE_TYPES.DROPDOWN) && (
-        <span className="sage-label__decor-icon sage-label__decor-icon--down-small" />
+        <pds-icon className="sage-label__decor-icon" name="down-small" />
       )}
     </span>
   );

packages/sage-react/lib/PanelControls/PanelControls.story.jsx

@@ -9,6 +9,8 @@ import { Table } from '../Table';
 import { getNews } from '../services/newsapi';
 import { PanelControls } from './PanelControls';
 
+/* eslint-disable react-hooks/exhaustive-deps */
+
 // TODO: Consider how select all affects all items
 // when only one page is currently selected
 

packages/sage-react/lib/Table/Table.jsx

@@ -9,6 +9,8 @@ import { TableRow } from './TableRow';
 import { SELECTION_TYPES } from '../PanelControls/configs';
 import { Checkbox } from '../Toggle';
 
+/* eslint-disable react-hooks/exhaustive-deps */
+
 //
 // Tables are built out from a provided set of rows.
 // These rows can be provided in a variety of formats,

packages/sage-react/lib/Table/TableRow.jsx

@@ -7,6 +7,8 @@ import { cellPropTypes } from './configs';
 import { TableHelpers } from '../helpers';
 import { Checkbox } from '../Toggle';
 
+/* eslint-disable react-hooks/exhaustive-deps */
+
 export const TableRow = ({
   className,
   cells,

packages/sage-react/lib/Toast/Toast.jsx

@@ -6,6 +6,8 @@ import { SageTokens } from '../configs';
 import { Icon } from '../Icon';
 import { TOAST_TYPES } from './configs';
 
+/* eslint-disable react-hooks/exhaustive-deps */
+
 export const Toast = ({
   className,
   description,

packages/sage-react/lib/Toggle/Switch.story.jsx

@@ -3,6 +3,8 @@ import { disableArgs, selectArgs } from '../story-support/helpers';
 import { Switch } from './Switch';
 import { Toggle } from './Toggle';
 
+/* eslint-disable react/forbid-foreign-prop-types */
+
 export default {
   title: 'Sage/Switch',
   component: Switch,

packages/sage-react/lib/Tooltip/TooltipElement.jsx

@@ -5,6 +5,8 @@ import {
   TOOLTIP_POSITIONS
 } from './configs';
 
+/* eslint-disable react-hooks/exhaustive-deps */
+
 const TOOLTIP_DISTANCE = 8;
 
 export const TooltipElement = ({

packages/sage-react/lib/Typeahead/Typeahead.jsx

@@ -5,6 +5,8 @@ import { Search } from '../Search';
 import { useFocusTrap, useDebounceEffect } from '../common/hooks';
 import { TypeaheadPanel } from './TypeaheadPanel';
 
+/* eslint-disable react-hooks/exhaustive-deps */
+
 const A11Y_ID = uuid();
 
 export const Typeahead = ({

packages/sage-react/lib/common/hooks/useDebounceEffect.jsx

@@ -1,5 +1,7 @@
 import { useEffect, useCallback } from 'react';
 
+/* eslint-disable react-hooks/exhaustive-deps */
+
 export const useDebounceEffect = (effect, deps, delay = 250) => {
   const callback = useCallback(effect, deps);
 

packages/sage-react/lib/common/hooks/useFocusTrap.jsx

@@ -1,6 +1,8 @@
 import { useEffect } from 'react';
 import { createFocusTrap } from 'focus-trap';
 
+/* eslint-disable react-hooks/exhaustive-deps */
+
 /**
 *
 * @param {Boolean} active          - React boolean state