@infonomic/uikit 5.44.0 → 6.0.1

package/src/lib/ripple.ts

@@ -0,0 +1,95 @@
+/**
+ * Material-style ripple effect.
+ *
+ * Based on material-ripple-effects by Sajad Ahmad Nawabi (https://github.com/sajadevo/material-ripple-effects)
+ * Original work licensed under the MIT License.
+ * Copyright (c) 2021 Sajad Ahmad Nawabi
+ *
+ * Adapted for use as an internal ESM/TypeScript module with minor improvements.
+ */
+
+export type RippleColor = 'light' | 'dark'
+
+export class Ripple {
+  private x = 0
+  private y = 0
+  private z = 0
+
+  private findFurthestPoint(
+    clickPointX: number,
+    elementWidth: number,
+    offsetX: number,
+    clickPointY: number,
+    elementHeight: number,
+    offsetY: number
+  ): number {
+    this.x = clickPointX - offsetX > elementWidth / 2 ? 0 : elementWidth
+    this.y = clickPointY - offsetY > elementHeight / 2 ? 0 : elementHeight
+    this.z = Math.hypot(this.x - (clickPointX - offsetX), this.y - (clickPointY - offsetY))
+
+    return this.z
+  }
+
+  private applyStyles(
+    element: HTMLSpanElement,
+    color: RippleColor,
+    rect: DOMRect,
+    radius: number,
+    clientX: number,
+    clientY: number
+  ): void {
+    element.classList.add('ripple')
+    element.style.backgroundColor = color === 'dark' ? 'rgba(0,0,0, 0.2)' : 'rgba(255,255,255, 0.3)'
+    element.style.borderRadius = '50%'
+    element.style.pointerEvents = 'none'
+    element.style.position = 'absolute'
+    element.style.left = clientX - rect.left - radius + 'px'
+    element.style.top = clientY - rect.top - radius + 'px'
+    element.style.width = element.style.height = radius * 2 + 'px'
+  }
+
+  private applyAnimation(element: HTMLSpanElement): void {
+    element.animate(
+      [
+        { transform: 'scale(0)', opacity: 1 },
+        { transform: 'scale(1.5)', opacity: 0 },
+      ],
+      {
+        duration: 500,
+        easing: 'linear',
+      }
+    )
+  }
+
+  create(
+    event: MouseEvent | { clientX: number; clientY: number; currentTarget: EventTarget | null },
+    color: RippleColor = 'light'
+  ): void {
+    const element = event.currentTarget as HTMLElement
+
+    element.style.position = 'relative'
+    element.style.overflow = 'hidden'
+
+    const rect = element.getBoundingClientRect()
+
+    const radius = this.findFurthestPoint(
+      event.clientX,
+      element.offsetWidth,
+      rect.left,
+      event.clientY,
+      element.offsetHeight,
+      rect.top
+    )
+
+    const circle = document.createElement('span')
+
+    this.applyStyles(circle, color, rect, radius, event.clientX, event.clientY)
+    this.applyAnimation(circle)
+
+    element.appendChild(circle)
+
+    setTimeout(() => circle.remove(), 500)
+  }
+}
+
+export default Ripple

package/src/widgets/datepicker/datepicker.module.css

@@ -1,6 +1,7 @@
 @layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-components;
 
 @layer infonomic-components {
+
   .container,
   :global(.infonomic-datepicker-container) {
     position: relative;
@@ -33,19 +34,19 @@
       box-shadow: var(--shadow-md);
     }
 
-    &[data-state="open"][data-side="top"] {
+    &[data-open][data-side="top"] {
       animation-name: slideDownAndFade;
     }
 
-    &[data-state="open"][data-side="right"] {
+    &[data-open][data-side="right"] {
       animation-name: slideLeftAndFade;
     }
 
-    &[data-state="open"][data-side="bottom"] {
+    &[data-open][data-side="bottom"] {
       animation-name: slideUpAndFade;
     }
 
-    &[data-state="open"][data-side="left"] {
+    &[data-open][data-side="left"] {
       animation-name: slideRightAndFade;
     }
   }
@@ -204,4 +205,4 @@
       transform: translateX(0);
     }
   }
-}
+}

package/src/widgets/datepicker/datepicker.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 /**
- * @file DatePicker component using react-day-picker and radix-ui
+ * @file DatePicker component using react-day-picker and @base-ui/react
  * Portions copyright (c) 2023 Maliksidk19 licensed under the MIT
  * license found in the LICENSE file in the root directory of this source tree.
  * of https://github.com/Maliksidk19/shadcn-datetime-picker/
@@ -10,9 +10,9 @@
 import type React from 'react'
 import { useEffect, useRef, useState } from 'react'
 
+import { Popover } from '@base-ui/react/popover'
 import cx from 'classnames'
 import { format } from 'date-fns'
-import { Popover } from 'radix-ui'
 
 import { Button } from '../../components/button/button.js'
 import { IconButton } from '../../components/button/icon-button.js'
@@ -70,8 +70,8 @@ export function DatePicker({
   inputWrapperClassName,
   containerClassName,
   contentClassName,
-  onClear = () => {},
-  onDateChange = () => {},
+  onClear = () => { },
+  onDateChange = () => { },
   validatorFn,
   helpText,
   errorText,
@@ -198,152 +198,154 @@ export function DatePicker({
       </div>
 
       <Popover.Root open={isOpen} onOpenChange={setIsOpen}>
-        <Popover.Trigger asChild>
-          <div style={{ position: 'relative', height: '1px' }}>
-            <span className="sr-only">Select date</span>
-          </div>
+        <Popover.Trigger
+          nativeButton={false}
+          render={<div style={{ position: 'relative', height: '1px' }} />}
+        >
+          <span className="sr-only">Select date</span>
         </Popover.Trigger>
         <Popover.Portal>
-          <Popover.Content
-            sideOffset={5}
-            className={cx('infonomic-datepicker-content', styles.content, contentClassName)}
-          >
-            <div
-              className={cx(
-                'infonomic-datepicker-content-components',
-                styles['content-components']
-              )}
+          <Popover.Positioner sideOffset={5}>
+            <Popover.Popup
+              className={cx('infonomic-datepicker-content', styles.content, contentClassName)}
             >
-              <div ref={calendarRef}>
-                <Calendar
-                  mode="single"
-                  required
-                  captionLayout="dropdown"
-                  selected={date ?? undefined}
-                  month={month ?? undefined}
-                  onMonthChange={setMonth}
-                  onSelect={(selectedDate: Date) => {
-                    if (selectedDate) {
-                      const [hours, minutes] = time.split(':')
-                      selectedDate.setHours(
-                        Number.parseInt(hours, 10),
-                        Number.parseInt(minutes, 10)
-                      )
-                      setDate(selectedDate)
-                      setMonth(selectedDate)
-                      handleOnDateChange(selectedDate)
-                    }
-                  }}
-                  startMonth={new Date(new Date().getFullYear() - yearsInPast, 0)}
-                  endMonth={new Date(new Date().getFullYear() + yearsInFuture, 0)}
+              <div
+                className={cx(
+                  'infonomic-datepicker-content-components',
+                  styles['content-components']
+                )}
+              >
+                <div ref={calendarRef}>
+                  <Calendar
+                    mode="single"
+                    required
+                    captionLayout="dropdown"
+                    selected={date ?? undefined}
+                    month={month ?? undefined}
+                    onMonthChange={setMonth}
+                    onSelect={(selectedDate: Date) => {
+                      if (selectedDate) {
+                        const [hours, minutes] = time.split(':')
+                        selectedDate.setHours(
+                          Number.parseInt(hours, 10),
+                          Number.parseInt(minutes, 10)
+                        )
+                        setDate(selectedDate)
+                        setMonth(selectedDate)
+                        handleOnDateChange(selectedDate)
+                      }
+                    }}
+                    startMonth={new Date(new Date().getFullYear() - yearsInPast, 0)}
+                    endMonth={new Date(new Date().getFullYear() + yearsInFuture, 0)}
                   // TODO: add props
                   // disabled={(date) =>
                   //   Number(date) < Date.now() - 1000 * 60 * 60 * 24 ||
                   //   Number(date) > Date.now() + 1000 * 60 * 60 * 24 * 30
                   // }
-                />
-              </div>
-              {mode === 'datetime' && (
-                <div className={styles['time-picker-container']}>
-                  <ScrollArea className={styles['time-picker-scroll-area']}>
-                    <div className={styles['time-picker']}>
-                      {Array.from({ length: 96 }).map((_, i) => {
-                        const hour = Math.floor(i / 4)
-                          .toString()
-                          .padStart(2, '0')
-                        const minute = ((i % 4) * 15).toString().padStart(2, '0')
-                        const timeValue = `${hour}:${minute}`
-                        return (
-                          <Button
-                            key={i}
-                            size="sm"
-                            className={styles['time-picker-button']}
-                            variant="outlined"
-                            onClick={() => {
-                              setTime(timeValue)
-                              if (date) {
-                                const newDate = new Date(date.getTime())
-                                newDate.setHours(
-                                  Number.parseInt(hour, 10),
-                                  Number.parseInt(minute, 10),
-                                  0
-                                )
-                                setDate(newDate)
-                                handleOnDateChange(newDate)
-                              }
-                            }}
-                          >
-                            {timeValue}
-                          </Button>
-                        )
-                      })}
-                    </div>
-                  </ScrollArea>
+                  />
                 </div>
-              )}
-            </div>
-            <div
-              className={cx(
-                'infonomic-datepicker-status-and-actions',
-                styles['status-and-actions']
-              )}
-            >
-              <div className={cx('infonomic-datepicker-content-status', styles['content-status'])}>
-                {date ? format(date, mode === 'datetime' ? 'PPPp' : 'PPP') : 'No date selected'}
+                {mode === 'datetime' && (
+                  <div className={styles['time-picker-container']}>
+                    <ScrollArea className={styles['time-picker-scroll-area']}>
+                      <div className={styles['time-picker']}>
+                        {Array.from({ length: 96 }).map((_, i) => {
+                          const hour = Math.floor(i / 4)
+                            .toString()
+                            .padStart(2, '0')
+                          const minute = ((i % 4) * 15).toString().padStart(2, '0')
+                          const timeValue = `${hour}:${minute}`
+                          return (
+                            <Button
+                              key={i}
+                              size="sm"
+                              className={styles['time-picker-button']}
+                              variant="outlined"
+                              onClick={() => {
+                                setTime(timeValue)
+                                if (date) {
+                                  const newDate = new Date(date.getTime())
+                                  newDate.setHours(
+                                    Number.parseInt(hour, 10),
+                                    Number.parseInt(minute, 10),
+                                    0
+                                  )
+                                  setDate(newDate)
+                                  handleOnDateChange(newDate)
+                                }
+                              }}
+                            >
+                              {timeValue}
+                            </Button>
+                          )
+                        })}
+                      </div>
+                    </ScrollArea>
+                  </div>
+                )}
               </div>
               <div
-                className={cx('infonomic-datepicker-content-actions', styles['content-actions'])}
+                className={cx(
+                  'infonomic-datepicker-status-and-actions',
+                  styles['status-and-actions']
+                )}
               >
-                <div>
-                  <Button
-                    variant="outlined"
-                    size="sm"
-                    className={cx(
-                      'infonomic-datepicker-content-actions-button',
-                      styles['content-actions-button']
-                    )}
-                    onClick={() => {
-                      const today = new Date()
-                      setDate(today)
-                      setMonth(today)
-                      handleOnDateChange(today)
-                    }}
-                  >
-                    Today
-                  </Button>
+                <div className={cx('infonomic-datepicker-content-status', styles['content-status'])}>
+                  {date ? format(date, mode === 'datetime' ? 'PPPp' : 'PPP') : 'No date selected'}
                 </div>
-                <div style={{ display: 'flex', gap: 'var(--spacing-12)' }}>
-                  <Button
-                    size="sm"
-                    intent="noeffect"
-                    className={cx(
-                      'infonomic-datepicker-content-actions-button',
-                      styles['content-actions-button']
-                    )}
-                    onClick={() => {
-                      setIsOpen(false)
-                    }}
-                  >
-                    Cancel
-                  </Button>
-                  <Button
-                    variant="outlined"
-                    size="sm"
-                    className={cx(
-                      'infonomic-datepicker-content-actions-button',
-                      styles['content-actions-button']
-                    )}
-                    onClick={() => {
-                      setIsOpen(false)
-                      handleOnDateChange(date)
-                    }}
-                  >
-                    Select
-                  </Button>
+                <div
+                  className={cx('infonomic-datepicker-content-actions', styles['content-actions'])}
+                >
+                  <div>
+                    <Button
+                      variant="outlined"
+                      size="sm"
+                      className={cx(
+                        'infonomic-datepicker-content-actions-button',
+                        styles['content-actions-button']
+                      )}
+                      onClick={() => {
+                        const today = new Date()
+                        setDate(today)
+                        setMonth(today)
+                        handleOnDateChange(today)
+                      }}
+                    >
+                      Today
+                    </Button>
+                  </div>
+                  <div style={{ display: 'flex', gap: 'var(--spacing-12)' }}>
+                    <Button
+                      size="sm"
+                      intent="noeffect"
+                      className={cx(
+                        'infonomic-datepicker-content-actions-button',
+                        styles['content-actions-button']
+                      )}
+                      onClick={() => {
+                        setIsOpen(false)
+                      }}
+                    >
+                      Cancel
+                    </Button>
+                    <Button
+                      variant="outlined"
+                      size="sm"
+                      className={cx(
+                        'infonomic-datepicker-content-actions-button',
+                        styles['content-actions-button']
+                      )}
+                      onClick={() => {
+                        setIsOpen(false)
+                        handleOnDateChange(date)
+                      }}
+                    >
+                      Select
+                    </Button>
+                  </div>
                 </div>
               </div>
-            </div>
-          </Popover.Content>
+            </Popover.Popup>
+          </Popover.Positioner>
         </Popover.Portal>
       </Popover.Root>
     </div>

package/src/widgets/drawer/drawer-wrapper.tsx

@@ -4,11 +4,11 @@
 import type React from 'react'
 import { useEffect } from 'react'
 
-import { useFocusTrap } from '@mantine/hooks'
 import cx from 'classnames'
 import type { HTMLMotionProps } from 'motion/react'
 import { m } from 'motion/react'
 
+import { useFocusTrap } from '../../hooks/use-focus-trap/index.js'
 import styles from './drawer.module.css'
 
 export interface DrawerWrapperProps extends HTMLMotionProps<'div'> {

package/src/widgets/modal/modal-wrapper.tsx

@@ -4,11 +4,11 @@
 import type React from 'react'
 import { useEffect } from 'react'
 
-import { useFocusTrap } from '@mantine/hooks'
 import cx from 'classnames'
 import type { HTMLMotionProps } from 'motion/react'
 import { m } from 'motion/react'
 
+import { useFocusTrap } from '../../hooks/use-focus-trap/index.js'
 import styles from './modal.module.css'
 
 export interface ModalWrapperProps extends HTMLMotionProps<'div'> {