@bronzelabs/oakma-ui 0.0.1 → 0.0.2

package/src/hooks/useFocusTrap/scopeTab.ts

@@ -1,46 +0,0 @@
-// Utils
-import { findTabbableDescendants } from "./tabbable"
-
-/*
-
-
-
-
-*/
-
-const scopeTab = (node: HTMLElement, event: KeyboardEvent): void => {
-  const tabbable = findTabbableDescendants(node)
-  if (!tabbable.length) {
-    event.preventDefault()
-    return
-  }
-  const finalTabbable = tabbable[event.shiftKey ? 0 : tabbable.length - 1]
-  const root = node.getRootNode() as unknown as DocumentOrShadowRoot
-  let leavingFinalTabbable = finalTabbable === root.activeElement || node === root.activeElement
-
-  const activeElement = root.activeElement as Element
-  const activeElementIsRadio =
-    activeElement.tagName === "INPUT" && activeElement.getAttribute("type") === "radio"
-  if (activeElementIsRadio) {
-    const activeRadioGroup = tabbable.filter(
-      element =>
-        element.getAttribute("type") === "radio" &&
-        element.getAttribute("name") === activeElement.getAttribute("name"),
-    )
-    leavingFinalTabbable = activeRadioGroup.includes(finalTabbable)
-  }
-
-  if (!leavingFinalTabbable) {
-    return
-  }
-
-  event.preventDefault()
-
-  const target = tabbable[event.shiftKey ? tabbable.length - 1 : 0]
-
-  if (target) {
-    target.focus()
-  }
-}
-
-export { scopeTab }

package/src/hooks/useFocusTrap/tabbable.ts

@@ -1,107 +0,0 @@
-// Constants
-const TABBABLE_NODES = /input|select|textarea|button|object/
-const FOCUS_SELECTOR = "a, input, select, textarea, button, object, [tabindex]"
-
-/*
-
-
-
-
-*/
-
-/**
- * Retruns true if the given element is hidden (has `display: none;`).
- *
- * @param {HTMLElement} element
- * @returns {boolean}
- */
-const hidden = (element: HTMLElement): boolean => {
-  return element.style.display === "none"
-}
-
-/**
- * Returns true if the given element is visible.
- *
- * @param {HTMLElement} element
- * @returns {boolean}
- */
-const visible = (element: HTMLElement): boolean => {
-  const isHidden =
-    element.getAttribute("aria-hidden") ||
-    element.getAttribute("hidden") ||
-    element.getAttribute("type") === "hidden"
-
-  if (isHidden) {
-    return false
-  }
-
-  let parentElement: HTMLElement = element
-  while (parentElement) {
-    if (parentElement === document.body || parentElement.nodeType === 11) {
-      break
-    }
-
-    if (hidden(parentElement)) {
-      return false
-    }
-
-    parentElement = parentElement.parentNode as HTMLElement
-  }
-
-  return true
-}
-
-/**
- * Gets the tab index of the given element.
- *
- * @param {HTMLElement} element
- * @returns {number}
- */
-const getElementTabIndex = (element: HTMLElement): number => {
-  let tabIndex: string | null | undefined = element.getAttribute("tabindex")
-  if (tabIndex === null) {
-    tabIndex = undefined
-  }
-  return parseInt(tabIndex as string, 10)
-}
-
-/**
- * Returns true of the given element is able to receive focus.
- *
- * @param {HTMLElement} element
- * @returns {boolean}
- */
-const focusable = (element: HTMLElement): boolean => {
-  const nodeName = element.nodeName.toLowerCase()
-  const isTabIndexNotNaN = !Number.isNaN(getElementTabIndex(element))
-  const res =
-    // @ts-ignore
-    (TABBABLE_NODES.test(nodeName) && !element.disabled) ||
-    (element instanceof HTMLAnchorElement ? element.href || isTabIndexNotNaN : isTabIndexNotNaN)
-
-  return !!(res && visible(element))
-}
-
-/**
- * Returns true of the given element is able to be tabbed.
- *
- * @param {HTMLElement} element
- * @returns {boolean}
- */
-const tabbable = (element: HTMLElement): boolean => {
-  const tabIndex = getElementTabIndex(element)
-  const isTabIndexNaN = Number.isNaN(tabIndex)
-  return (isTabIndexNaN || tabIndex >= 0) && focusable(element)
-}
-
-/**
- * Retreives an array of tabbable HTMLElements that are children of the given element.
- *
- * @param {HTMLElement} element
- * @returns {HTMLElement[]}
- */
-const findTabbableDescendants = (element: HTMLElement): HTMLElement[] => {
-  return Array.from(element.querySelectorAll<HTMLElement>(FOCUS_SELECTOR)).filter(tabbable)
-}
-
-export { FOCUS_SELECTOR, focusable, tabbable, findTabbableDescendants }

package/src/hooks/useFocusTrap/useFocusTrap.ts

@@ -1,97 +0,0 @@
-import { useCallback, useEffect, useRef } from "react"
-import { FOCUS_SELECTOR, focusable, tabbable } from "./tabbable"
-import { scopeTab } from "./scopeTab"
-import { createAriaHider } from "./createAriaHider"
-
-/*
-
-
-
-
-*/
-
-const useFocusTrap = <T extends HTMLElement = HTMLElement>(
-  isActive = true,
-): ((instance: T | null) => void) => {
-  const ref = useRef<T | null>(null)
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
-  const restoreAria = useRef<Function | null>(null)
-
-  const focusNode = (node: HTMLElement): void => {
-    let focusElement: HTMLElement | null = node.querySelector("[data-autofocus]")
-
-    if (!focusElement) {
-      const children = Array.from<HTMLElement>(node.querySelectorAll(FOCUS_SELECTOR))
-      focusElement = children.find(tabbable) || children.find(focusable) || null
-      if (!focusElement && focusable(node)) focusElement = node
-    }
-
-    if (focusElement) {
-      focusElement.focus({ preventScroll: true })
-    }
-  }
-
-  const setRef = useCallback(
-    (node: T | null) => {
-      if (!isActive) {
-        return
-      }
-
-      if (node === null) {
-        if (restoreAria.current) {
-          restoreAria.current()
-          restoreAria.current = null
-        }
-        return
-      }
-
-      restoreAria.current = createAriaHider(node)
-      if (ref.current === node) {
-        return
-      }
-
-      if (node) {
-        // Delay processing the HTML node by a frame. This ensures focus is assigned correctly.
-        setTimeout(() => {
-          if (node.getRootNode()) {
-            focusNode(node)
-          }
-        })
-
-        ref.current = node
-      } else {
-        ref.current = null
-      }
-    },
-    [isActive],
-  )
-
-  useEffect(() => {
-    if (!isActive) {
-      return undefined
-    }
-
-    if (ref.current) {
-      setTimeout(() => focusNode(ref.current!))
-    }
-
-    const handleKeyDown = (event: KeyboardEvent): void => {
-      if (event.key === "Tab" && ref.current) {
-        scopeTab(ref.current, event)
-      }
-    }
-
-    document.addEventListener("keydown", handleKeyDown)
-    return () => {
-      document.removeEventListener("keydown", handleKeyDown)
-
-      if (restoreAria.current) {
-        restoreAria.current()
-      }
-    }
-  }, [isActive])
-
-  return setRef
-}
-
-export { useFocusTrap }

package/src/hooks/useIsomorphicLayoutEffect.ts

@@ -1,14 +0,0 @@
-"use client"
-
-import { useEffect, useLayoutEffect } from "react"
-
-/*
-
-
-
-
-*/
-
-const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect
-
-export { useIsomorphicLayoutEffect }

package/src/hooks/useLockBodyScroll.ts

@@ -1,24 +0,0 @@
-"use client"
-
-// Utils
-import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect"
-
-/*
-
-
-
-
-
-*/
-
-export function useLockBodyScroll(lock: boolean = true): void {
-  useIsomorphicLayoutEffect(() => {
-    if (!lock) return
-
-    const previousValue = document.body.style.overflow
-    document.body.style.overflow = "hidden"
-    return () => {
-      document.body.style.overflow = previousValue
-    }
-  }, [lock])
-}

package/src/hooks/useOnClickOutside.ts

@@ -1,53 +0,0 @@
-import { RefObject } from "react"
-
-// Utils
-import { useEventListener } from "./useEventListener"
-
-// Types
-type Handler = (event: MouseEvent) => void
-
-/*
-
-
-
-
-*/
-
-export function useOnClickOutside<T extends HTMLElement | null = HTMLElement>(
-  ref: RefObject<T>,
-  handler: Handler,
-  mouseEvent: "mousedown" | "mouseup" = "mousedown",
-): void {
-  useEventListener(mouseEvent, event => {
-    const el = ref?.current
-
-    // Do nothing if clicking ref's element or descendent elements
-    if (!el || el.contains(event.target as Node)) {
-      return
-    }
-
-    /**
-     * 26/05/25 - not sure if we still need this in Oakma, but leaving it in for now just in case.
-     * ---
-     *
-     * We have to do an annoying dance here to check if the click was on a the
-     * clear indicator of a dropdown or multiselect.
-     *
-     * This is because when one of these components is used within a modal,
-     * clicking the clear indicator will close the modal.
-     */
-    const isDropdownIndicator = (el: any): boolean => {
-      if (!(el instanceof HTMLElement)) return false
-      return Array.from(el?.classList).some(className => className?.endsWith("-indicatorContainer"))
-    }
-
-    if (
-      isDropdownIndicator((event.target as HTMLElement)?.parentNode) ||
-      isDropdownIndicator((event.target as HTMLElement)?.parentNode?.parentNode)
-    ) {
-      return
-    }
-
-    handler(event)
-  })
-}

package/src/index.ts

@@ -1,22 +0,0 @@
-export { default as Button, type ButtonProps, BUTTON_VARIANTS, type ButtonVariant, BUTTON_SIZES, type ButtonSize } from "./components/Button"
-export { default as Checkbox, type CheckboxProps, CHECKBOX_SIZES, type CheckboxSize } from "./components/Checkbox"
-export { default as Chip, type ChipProps, CHIP_SIZES, type ChipSize } from "./components/Chip"
-export { default as Drawer, type DrawerProps, DRAWER_POSITIONS, type DrawerPosition } from "./components/Drawer"
-export { default as Dropdown, type DropdownProps, AsyncDropdown, type AsyncDropdownProps, type DropdownSize } from "./components/Dropdown"
-export { default as Logo, type LogoProps } from "./components/Logo"
-export { default as Modal, type ModalProps } from "./components/Modal"
-export { default as MultiSelect, type MultiSelectProps, AsyncMultiSelect, type AsyncMultiSelectProps } from "./components/MultiSelect"
-export { default as Notification, type NotificationProps } from "./components/Notification"
-export {
-  default as Notifications,
-  NotificationsProvider,
-  NotificationsContext,
-  useNotifications,
-  type NotificationsProps,
-  type NotificationsContextType,
-} from "./components/Notifications"
-export { default as Select, type SelectProps, type SelectSize } from "./components/Select"
-export { default as Spinner, type SpinnerProps } from "./components/Spinner"
-export { default as TextArea, type TextAreaProps, type TextAreaSize } from "./components/TextArea"
-export { default as TextInput, type TextInputProps, type TextInputSize } from "./components/TextInput"
-export { default as Toggle, type ToggleProps } from "./components/Toggle"

package/src/tailwind.css

@@ -1,4 +0,0 @@
-@import "tailwindcss";
-@import "@bronzelabs/oakma-tailwind-preset";
-
-@source not "./**/*.stories.tsx";

package/src/types/helpers.ts

@@ -1,11 +0,0 @@
-/*
-
-
-
-
-
-*/
-
-export type PickPartial<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>
-
-export type SingleOrArray<T> = T | T[]

package/src/types/polymorphic.ts

@@ -1,39 +0,0 @@
-import React from "react"
-
-/*
-
-
-
-
-*/
-
-type AsProp<C extends React.ElementType> = {
-  /** The type of element to render the component as. */
-  as?: C
-}
-
-type PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P)
-
-/**
- * @template {React.ElementType} C Component
- * @template {object} P Props
- */
-export type PolymorphicComponentProps<
-  C extends React.ElementType,
-  P = object,
-> = React.PropsWithChildren<P & AsProp<C>> &
-  Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, P>>
-
-/**
- * @template {React.ElementType} C Components
- * @template {object} P Props
- */
-export type PolymorphicComponentPropsWithRef<
-  C extends React.ElementType,
-  P = object,
-> = PolymorphicComponentProps<C, P> & { ref?: PolymorphicRef<C> }
-
-/**
- * @template {React.ElementType} C Component
- */
-export type PolymorphicRef<C extends React.ElementType> = React.ComponentPropsWithRef<C>["ref"]

package/src/utils/animation/variants.ts

@@ -1,21 +0,0 @@
-import type { Variants } from "motion"
-
-/*
-
-
-
-
-
-*/
-
-export const backdropVariants: Variants = {
-  hidden: {
-    opacity: 0,
-    transition: {
-      duration: 0.1,
-    },
-  },
-  visible: {
-    opacity: 1,
-  },
-}

package/src/utils/array/index.ts

@@ -1 +0,0 @@
-export { uniqBy } from "./uniqBy"

package/src/utils/array/uniqBy.ts

@@ -1,12 +0,0 @@
-const uniqBy = <T>(array: T[], iteratee: ((item: T) => unknown) | keyof T): T[] => {
-  const getKey = typeof iteratee === "function" ? iteratee : (item: T) => item[iteratee]
-  const seen = new Set()
-  return array.filter(item => {
-    const key = getKey(item)
-    if (seen.has(key)) return false
-    seen.add(key)
-    return true
-  })
-}
-
-export { uniqBy }

package/src/utils/common/index.ts

@@ -1 +0,0 @@
-export { isFunction } from "./isFunction"

package/src/utils/common/isFunction.ts

@@ -1,17 +0,0 @@
-/**
- * Type guard that checks if a given value is a function
- *
- * @param {any} value
- * @returns {boolean}
- */
-
-/*
-
-
-
-
-*/
-
-const isFunction = (value: any): value is (...args: any[]) => any => typeof value === "function"
-
-export { isFunction }

package/src/utils/react/extractDisplayName.ts

@@ -1,15 +0,0 @@
-/**
- * extractDisplayName
- *
- * @param {React.FC} type
- * @returns {string}
- */
-
-/*
- */
-
-const extractDisplayName = (type: any): string => {
-  return type.displayName || type.name || "unknown"
-}
-
-export { extractDisplayName }

package/src/utils/react/index.ts

@@ -1 +0,0 @@
-export { extractDisplayName } from "./extractDisplayName"

package/tsconfig.json

@@ -1,16 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2022",
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "jsx": "react-jsx",
-    "strict": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "isolatedModules": true,
-    "noEmit": true
-  },
-  "include": ["src", "@types"],
-  "exclude": ["node_modules", "dist"]
-}

package/tsconfig.production.json

@@ -1,19 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "jsx": "react-jsx",
-    "declaration": true,
-    "declarationDir": "dist",
-    "emitDeclarationOnly": true,
-    "isolatedModules": true,
-    "strict": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "ignoreDeprecations": "6.0" // tsup injects baseUrl:"." internally — remove when tsup fixes it
-  },
-  "include": ["src"],
-  "exclude": ["dist", "node_modules", "**/*.spec.tsx", "**/*.stories.tsx"]
-}

package/tsup.config.ts

@@ -1,16 +0,0 @@
-import { defineConfig } from "tsup"
-
-export default defineConfig({
-  entry: ["src/index.ts"],
-  splitting: false,
-  sourcemap: false,
-  minify: true,
-  clean: true,
-  external: ["react", "react-dom"],
-  format: ["esm"],
-  dts: {
-    resolve: true,
-  },
-  tsconfig: "./tsconfig.production.json",
-  // banner: { js: `"use client";` },
-})