v4.0.0

Author: based-ghost

__stories__/helpers/components/CodeMarkup.tsx

@@ -97,9 +97,7 @@ const CodeMarkup = memo<CodeMarkupProps>(({
   formatFn
 }) => (
   <CodeMarkupContainer>
-    <Header>
-      {header}
-    </Header>
+    <Header>{header}</Header>
     <PreContainer>
       <SyntaxHighlighter
         wrapLines

__stories__/helpers/styled/index.ts

@@ -131,7 +131,7 @@ export const Li = styled.li`
 
 export const TextHeader = styled.span`
   color: #476582;
-  font-size: 94%;
+  font-size: 90%;
   line-height: 1.7;
   border-radius: 4px;
   padding: .175em .475em;

src/components/Value/index.tsx

@@ -55,7 +55,8 @@ const Value: FunctionComponent<ValueProps> = ({
   }
 
   if (!isMulti) {
-    return <SingleValue>{renderOptionLabel(selectedOption[0].data)}</SingleValue>;
+    const labelNode = renderOptionLabel(selectedOption[0].data);
+    return <SingleValue>{labelNode}</SingleValue>;
   }
 
   return (

src/hooks/useMenuPositioner.ts

@@ -47,7 +47,7 @@ const useMenuPositioner = (
 
   useUpdateEffect(() => {
     if (menuOpen) {
-      const handleOnMenuOpen = (availableSpace?: number): void => {
+      const handleOnMenuOpen = (availableSpace?: number) => {
         onMenuOpenRef();
         if (availableSpace) {
           resetMenuHeightRef.current = true;

src/utils/menu.ts

@@ -15,28 +15,28 @@ function easeOutCubic(t: number, b: number, c: number, d: number): number {
 /**
  * @private
  */
-function getScrollTop(el: Element): number {
+function getScrollTop(el: HTMLElement): number {
   return isDocumentElement(el) ? window.pageYOffset : el.scrollTop;
 }
 
 /**
  * @private
  */
-function scrollTo(el: Element, top: number): void {
+function scrollTo(el: HTMLElement, top: number): void {
   isDocumentElement(el) ? window.scrollTo(0, top) : (el.scrollTop = top);
 }
 
 /**
  * @private
  */
-function isDocumentElement(el: Element | typeof window): boolean {
+function isDocumentElement(el: HTMLElement | typeof window): boolean {
   return el === document.body || el === document.documentElement || el === window;
 }
 
 /**
  * @private
  */
-function getScrollParent(el: Element): Element {
+function getScrollParent(el: HTMLElement): HTMLElement {
   let style = getComputedStyle(el);
   const isParentAbs = style.position === 'absolute';
   const overflowRegExp = /(auto|scroll)/;
@@ -45,7 +45,7 @@ function getScrollParent(el: Element): Element {
     return document.documentElement;
   }
 
-  for (let parent: Element | null = el; (parent = parent?.parentElement); ) {
+  for (let parent: HTMLElement | null = el; (parent = parent?.parentElement);) {
     style = getComputedStyle(parent);
     if (
       !(isParentAbs && style.position === 'static') &&
@@ -62,7 +62,7 @@ function getScrollParent(el: Element): Element {
  * @private
  */
 function smoothScrollTo(
-  el: Element,
+  el: HTMLElement,
   to: number,
   duration: number = 300,
   callback?: CallbackFn
@@ -87,8 +87,8 @@ function smoothScrollTo(
  */
 export const calculateMenuTop = (
   menuHeight: number,
-  menuEl: Element | null,
-  controlEl: Element | null
+  menuEl: HTMLElement | null,
+  controlEl: HTMLElement | null
 ): string => {
   const menuElStyle = menuEl && getComputedStyle(menuEl);
   const marginBottom = menuElStyle ? parseInt(menuElStyle.marginBottom, 10) : 0;
@@ -101,7 +101,7 @@ export const calculateMenuTop = (
   return `calc(${basePx}px + ${adjustPx}px)`;
 };
 
-export const menuFitsBelowControl = (el: Element | null): boolean => {
+export const menuFitsBelowControl = (el: HTMLElement | null): boolean => {
   if (!el) return true;
 
   const scrollParent = getScrollParent(el);
@@ -117,7 +117,7 @@ export const menuFitsBelowControl = (el: Element | null): boolean => {
  * scroll can performed to show the menu in full view. Also, execute a callback if defined.
  */
 export const scrollMenuIntoViewOnOpen = (
-  menuEl: Element | null,
+  menuEl: HTMLElement | null,
   menuScrollDuration: number | undefined,
   scrollMenuIntoView: boolean | undefined,
   handleOnMenuOpen: (availableSpace?: number) => void

tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "jsx": "react",
-    "target": "ES2018",
+    "target": "ES2020",
     "module": "ESNext",
     "moduleResolution": "node",
     "strict": true,