@bronzelabs/oakma-ui 0.0.1

package/src/hooks/useFocusTrap/scopeTab.ts

@@ -0,0 +1,46 @@
+// 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

@@ -0,0 +1,107 @@
+// 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

@@ -0,0 +1,97 @@
+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

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

package/src/hooks/useLockBodyScroll.ts

@@ -0,0 +1,24 @@
+"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

@@ -0,0 +1,53 @@
+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

@@ -0,0 +1,22 @@
+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

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

package/src/types/helpers.ts

@@ -0,0 +1,11 @@
+/*
+
+
+
+
+
+*/
+
+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

@@ -0,0 +1,39 @@
+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

@@ -0,0 +1,21 @@
+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

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

package/src/utils/array/uniqBy.ts

@@ -0,0 +1,12 @@
+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

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

package/src/utils/common/isFunction.ts

@@ -0,0 +1,17 @@
+/**
+ * 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

@@ -0,0 +1,15 @@
+/**
+ * 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

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

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "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

@@ -0,0 +1,19 @@
+{
+  "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

@@ -0,0 +1,16 @@
+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";` },
+})