@infonomic/uikit 5.2.1 → 5.3.0

package/dist/components/scroll-to-top/scroll-to-top.d.ts

@@ -1,10 +1,15 @@
-import type React from 'react';
-type ScrollToTopIntrinsicProps = React.JSX.IntrinsicElements['button'];
-interface ScrollToTopProps extends ScrollToTopIntrinsicProps {
+import { type ComponentProps } from 'react';
+export interface ScrollToTopProps extends ComponentProps<'button'> {
+    /**
+     * The scroll position (Y-axis) in pixels that triggers the button to appear.
+     * @default 200
+     */
+    showAt?: number;
+    /**
+     * The target scroll position (Y-axis) to scroll to when clicked.
+     * @default -65
+     */
     offset?: number;
 }
-export type { ScrollToTopProps };
-export declare const ScrollToTop: ({ ref, offset, ...rest }: ScrollToTopProps & {
-    ref?: React.RefObject<HTMLButtonElement>;
-}) => React.JSX.Element;
+export declare function ScrollToTop({ className, showAt, offset, type, 'aria-label': ariaLabel, onClick, ...props }: ScrollToTopProps): import("react").JSX.Element;
 //# sourceMappingURL=scroll-to-top.d.ts.map

package/dist/components/scroll-to-top/scroll-to-top.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-to-top.d.ts","sourceRoot":"","sources":["../../../src/components/scroll-to-top/scroll-to-top.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,KAAK,yBAAyB,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAA;AACtE,UAAU,gBAAiB,SAAQ,yBAAyB;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,YAAY,EAAE,gBAAgB,EAAE,CAAA;AAEhC,eAAO,MAAM,WAAW,GAAwB,0BAI7C,gBAAgB,GAAG;IACpB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAA;CACzC,sBA2CA,CAAA"}
+{"version":3,"file":"scroll-to-top.d.ts","sourceRoot":"","sources":["../../../src/components/scroll-to-top/scroll-to-top.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,cAAc,EAAuB,MAAM,OAAO,CAAA;AAIhE,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,QAAQ,CAAC;IAChE;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,MAAY,EACZ,MAAY,EACZ,IAAe,EACf,YAAY,EAAE,SAA2B,EACzC,OAAO,EACP,GAAG,KAAK,EACT,EAAE,gBAAgB,+BAuDlB"}

package/dist/components/scroll-to-top/scroll-to-top.js

@@ -3,43 +3,53 @@ import { jsx } from "react/jsx-runtime";
 import classnames from "classnames";
 import { useEffect, useState } from "react";
 import scroll_to_top_module from "./scroll-to-top.module.js";
-const scroll_to_top_ScrollToTop = function({ ref, offset = -65, ...rest }) {
+function ScrollToTop({ className, showAt = 200, offset = -65, type = 'button', 'aria-label': ariaLabel = 'Scroll to top', onClick, ...props }) {
     const [show, setShow] = useState(false);
-    const handleOnClick = ()=>{
+    const handleOnClick = (e)=>{
         window.scrollTo({
             top: offset,
             left: 0,
             behavior: 'smooth'
         });
+        onClick?.(e);
     };
     useEffect(()=>{
+        let ticking = false;
         const handleOnScroll = ()=>{
-            const scrollTop = window.scrollY;
-            scrollTop > 200 ? setShow(true) : setShow(false);
+            if (!ticking) {
+                window.requestAnimationFrame(()=>{
+                    setShow(window.scrollY > showAt);
+                    ticking = false;
+                });
+                ticking = true;
+            }
         };
-        if ('undefined' != typeof window) window.addEventListener('scroll', handleOnScroll);
+        window.addEventListener('scroll', handleOnScroll, {
+            passive: true
+        });
         return ()=>{
             window.removeEventListener('scroll', handleOnScroll);
         };
-    }, []);
+    }, [
+        showAt
+    ]);
     return /*#__PURE__*/ jsx("button", {
-        ref: ref,
-        ...rest,
+        type: type,
+        "aria-label": ariaLabel,
         onClick: handleOnClick,
-        type: "button",
-        id: "scroll-to-top",
         className: classnames('scroll-to-top', scroll_to_top_module["scroll-to-top"], {
             'scroll-to-top-shown': show,
             [scroll_to_top_module["scroll-to-top-shown"]]: show
-        }),
+        }, className),
+        ...props,
         children: /*#__PURE__*/ jsx("span", {
+            "aria-hidden": "true",
             children: /*#__PURE__*/ jsx("svg", {
                 className: "icon",
                 style: {
                     fill: 'currentColor'
                 },
                 focusable: "false",
-                "aria-hidden": "true",
                 viewBox: "0 0 51 32",
                 children: /*#__PURE__*/ jsx("path", {
                     d: "M25.4,9.8L45.6,30l4.5-4.5L25.4,0.8L0.8,25.4L5.3,30L25.4,9.8z"
@@ -47,5 +57,5 @@ const scroll_to_top_ScrollToTop = function({ ref, offset = -65, ...rest }) {
             })
         })
     });
-};
-export { scroll_to_top_ScrollToTop as ScrollToTop };
+}
+export { ScrollToTop };

package/package.json

@@ -2,7 +2,7 @@
   "name": "@infonomic/uikit",
   "private": false,
   "license": "MIT",
-  "version": "5.2.1",
+  "version": "5.3.0",
   "type": "module",
   "description": "Infonomic UI kit is a collection of reusable UI components and utilities for React and Astro.",
   "keywords": [

package/src/astro.d.ts

@@ -14,6 +14,7 @@ import type InputComponent from './components/forms/input.astro'
 import type InputAdornmentComponent from './components/forms/input-adornment.astro'
 import type LabelComponent from './components/forms/label.astro'
 import type SectionComponent from './components/section/section.astro'
+import type ScrollToTopComponent from './components/scroll-to-top/scroll-to-top.astro'
 import type CloseIconComponent from './icons/close-icon.astro'
 import type IconElementComponent from './icons/icon-element.astro'
 import type LightIconComponent from './icons/light-icon.astro'
@@ -41,3 +42,4 @@ export declare const LightIcon: typeof LightIconComponent
 export declare const MoonIcon: typeof MoonIconComponent
 export declare const SearchIcon: typeof SearchIconComponent
 export declare const Section: typeof SectionComponent
+export declare const ScrollToTop: typeof ScrollToTopComponent

package/src/astro.js

@@ -14,12 +14,14 @@ import InputComponent from './components/forms/input.astro'
 import InputAdornmentComponent from './components/forms/input-adornment.astro'
 import LabelComponent from './components/forms/label.astro'
 import SectionComponent from './components/section/section.astro'
+import ScrollToTopComponent from './components/scroll-to-top/scroll-to-top.astro'
 import CloseIconComponent from './icons/close-icon.astro'
 import IconElementComponent from './icons/icon-element.astro'
 import LightIconComponent from './icons/light-icon.astro'
 import MoonIconComponent from './icons/moon-icon.astro'
 import SearchIconComponent from './icons/search-icon.astro'
 
+
 export const Button = ButtonComponent
 export const Hamburger = HamburgerComponent
 export const IconButton = IconButtonComponent
@@ -36,6 +38,7 @@ export const InputAdornment = InputAdornmentComponent
 export const Input = InputComponent
 export const Label = LabelComponent
 export const Section = SectionComponent
+export const ScrollToTop = ScrollToTopComponent
 export const IconElement = IconElementComponent
 export const LightIcon = LightIconComponent
 export const MoonIcon = MoonIconComponent

package/src/components/scroll-to-top/scroll-to-top.astro

@@ -0,0 +1,75 @@
+---
+import styles from './scroll-to-top.module.css'
+
+interface Props {
+  class?: string
+  showAt?: number
+  offset?: number
+  'aria-label'?: string
+  [key: string]: any
+}
+
+const {
+  class: className,
+  showAt = 200,
+  offset = -65,
+  'aria-label': ariaLabel = 'Scroll to top',
+  ...rest
+} = Astro.props
+---
+
+<button
+  type="button"
+  aria-label={ariaLabel}
+  class:list={['scroll-to-top', styles['scroll-to-top'], className]}
+  data-show-at={showAt}
+  data-offset={offset}
+  data-class-shown={styles['scroll-to-top-shown']}
+  {...rest}
+>
+  <span aria-hidden="true">
+    <svg class="icon" style="fill: currentColor" focusable="false" viewBox="0 0 51 32">
+      <path d="M25.4,9.8L45.6,30l4.5-4.5L25.4,0.8L0.8,25.4L5.3,30L25.4,9.8z"></path>
+    </svg>
+  </span>
+</button>
+
+<script>
+  const buttons = document.querySelectorAll('button.scroll-to-top')
+
+  buttons.forEach((button) => {
+    if (!(button instanceof HTMLElement)) return
+
+    const showAt = Number(button.dataset.showAt) || 200
+    const offset = Number(button.dataset.offset) || -65
+    const classShown = button.dataset.classShown
+
+    if (classShown == null) return
+
+    // Click Handler
+    button.addEventListener('click', () => {
+      window.scrollTo({ top: offset, left: 0, behavior: 'smooth' })
+    })
+
+    // Scroll Handler
+    let ticking = false
+    const handleOnScroll = () => {
+      if (!ticking) {
+        window.requestAnimationFrame(() => {
+          const shouldShow = window.scrollY > showAt
+          if (shouldShow) {
+            button.classList.add(classShown)
+            button.classList.add('scroll-to-top-shown')
+          } else {
+            button.classList.remove(classShown)
+            button.classList.remove('scroll-to-top-shown')
+          }
+          ticking = false
+        })
+        ticking = true
+      }
+    }
+
+    window.addEventListener('scroll', handleOnScroll, { passive: true })
+  })
+</script>

package/src/components/scroll-to-top/scroll-to-top.tsx

@@ -1,62 +1,81 @@
 'use client'
 
-import type React from 'react'
 import cx from 'classnames'
-import { useEffect, useState } from 'react'
+import { type ComponentProps, useEffect, useState } from 'react'
 
-import style from './scroll-to-top.module.css'
+import styles from './scroll-to-top.module.css'
 
-type ScrollToTopIntrinsicProps = React.JSX.IntrinsicElements['button']
-interface ScrollToTopProps extends ScrollToTopIntrinsicProps {
+export interface ScrollToTopProps extends ComponentProps<'button'> {
+  /**
+   * The scroll position (Y-axis) in pixels that triggers the button to appear.
+   * @default 200
+   */
+  showAt?: number
+  /**
+   * The target scroll position (Y-axis) to scroll to when clicked.
+   * @default -65
+   */
   offset?: number
 }
 
-export type { ScrollToTopProps }
-
-export const ScrollToTop = function ScrollToTop({
-  ref,
+export function ScrollToTop({
+  className,
+  showAt = 200,
   offset = -65,
-  ...rest
-}: ScrollToTopProps & {
-  ref?: React.RefObject<HTMLButtonElement>
-}) {
+  type = 'button',
+  'aria-label': ariaLabel = 'Scroll to top',
+  onClick,
+  ...props
+}: ScrollToTopProps) {
   const [show, setShow] = useState(false)
 
-  const handleOnClick = (): void => {
+  const handleOnClick = (e: React.MouseEvent<HTMLButtonElement>): void => {
     window.scrollTo({ top: offset, left: 0, behavior: 'smooth' })
+    onClick?.(e)
   }
 
   useEffect(() => {
+    let ticking = false
+
     const handleOnScroll = (): void => {
-      const scrollTop = window.scrollY
-      if (scrollTop > 200) {
-        setShow(true)
-      } else {
-        setShow(false)
+      if (!ticking) {
+        window.requestAnimationFrame(() => {
+          setShow(window.scrollY > showAt)
+          ticking = false
+        })
+        ticking = true
       }
     }
-    if (typeof window !== 'undefined') {
-      window.addEventListener('scroll', handleOnScroll)
-    }
+
+    window.addEventListener('scroll', handleOnScroll, { passive: true })
     return () => {
       window.removeEventListener('scroll', handleOnScroll)
     }
-  }, [])
+  }, [showAt])
 
   return (
     <button
-      ref={ref}
-      {...rest}
+      type={type}
+      aria-label={ariaLabel}
       onClick={handleOnClick}
-      type="button"
-      id="scroll-to-top"
-      className={cx('scroll-to-top', style['scroll-to-top'], {
-        'scroll-to-top-shown': show,
-        [style['scroll-to-top-shown']]: show,
-      })}
+      className={cx(
+        'scroll-to-top',
+        styles['scroll-to-top'],
+        {
+          'scroll-to-top-shown': show,
+          [styles['scroll-to-top-shown']]: show,
+        },
+        className
+      )}
+      {...props}
     >
-      <span>
-        <svg className="icon" style={{fill: 'currentColor'}} focusable="false" aria-hidden="true" viewBox="0 0 51 32">
+      <span aria-hidden="true">
+        <svg
+          className="icon"
+          style={{ fill: 'currentColor' }}
+          focusable="false"
+          viewBox="0 0 51 32"
+        >
           <path d="M25.4,9.8L45.6,30l4.5-4.5L25.4,0.8L0.8,25.4L5.3,30L25.4,9.8z" />
         </svg>
       </span>