@acmekit/docs-ui 2.13.41

package/src/components/RootProviders/index.tsx

@@ -0,0 +1,31 @@
+import React from "react"
+import { BrowserProvider } from "../../providers/BrowserProvider"
+import { ColorModeProvider } from "../../providers/ColorMode"
+import {
+  LayoutProvider,
+  type LayoutProviderProps,
+} from "../../providers/Layout"
+import { MobileProvider } from "../../providers/Mobile"
+import { ModalProvider } from "../../providers/Modal"
+
+type RootProvidersProps = {
+  children: React.ReactNode
+  layoutProviderProps?: Omit<LayoutProviderProps, "children">
+}
+
+export const RootProviders = ({
+  children,
+  layoutProviderProps = {},
+}: RootProvidersProps) => {
+  return (
+    <BrowserProvider>
+      <MobileProvider>
+        <LayoutProvider {...layoutProviderProps}>
+          <ColorModeProvider>
+            <ModalProvider>{children}</ModalProvider>
+          </ColorModeProvider>
+        </LayoutProvider>
+      </MobileProvider>
+    </BrowserProvider>
+  )
+}

package/src/components/Select/Badge/index.tsx

@@ -0,0 +1,122 @@
+
+import React, { useCallback, useRef, useState } from "react"
+import { useSelect } from "../../../hooks"
+import clsx from "clsx"
+import { SelectDropdown, SelectProps } from ".."
+import { TriangleDownMini } from "@acmekit/icons"
+
+export const SelectBadge = ({
+  value,
+  options,
+  setSelected,
+  addSelected,
+  removeSelected,
+  multiple,
+  className,
+  addAll = multiple,
+  handleAddAll,
+  ...props
+}: SelectProps) => {
+  const [open, setOpen] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+  const dropdownRef = useRef<HTMLDivElement>(null)
+  const {
+    isValueSelected,
+    isAllSelected,
+    handleChange,
+    handleSelectAll,
+    setSelectedValues,
+  } = useSelect({
+    value,
+    options,
+    multiple,
+    setSelected,
+    removeSelected,
+    addSelected,
+    handleAddAll,
+  })
+
+  const getSelectedText = useCallback(() => {
+    let str = ""
+    const selectedOptions = options.filter((option) =>
+      value.includes(option.value)
+    )
+
+    if (isAllSelected) {
+      str = "All areas"
+    } else {
+      if (
+        (!Array.isArray(value) && !value) ||
+        (Array.isArray(value) && !value.length)
+      ) {
+        str = "No Filters Selected"
+      } else {
+        str = selectedOptions[0].label
+      }
+    }
+
+    return (
+      <>
+        <span
+          className={clsx(
+            "text-compact-x-small-plus text-acmekit-tag-neutral-text"
+          )}
+        >
+          {str}
+          {!isAllSelected && selectedOptions.length > 1 && (
+            <> + {selectedOptions.length - 1}</>
+          )}
+        </span>
+      </>
+    )
+  }, [isAllSelected, options, value])
+
+  return (
+    <div
+      className={clsx("relative w-fit", className)}
+      data-testid="select-badge"
+    >
+      <div
+        className={clsx(
+          "border-acmekit-tag-neutral-border rounded-docs_sm border border-solid",
+          "h-fit cursor-pointer pl-docs_0.25 pr-[3px] text-acmekit-tag-neutral-text",
+          "bg-acmekit-tag-neutral-bg",
+          "flex items-center gap-[3px] whitespace-nowrap",
+          "text-acmekit-fg-subtle",
+          open && "bg-acmekit-tag-neutral-bg-hover"
+        )}
+        ref={ref}
+        onClick={(e) => {
+          if (!dropdownRef.current?.contains(e.target as Element)) {
+            setOpen((prev) => !prev)
+          }
+        }}
+        data-testid="select-badge-dropdown"
+      >
+        {getSelectedText()}
+        <TriangleDownMini className="text-acmekit-tag-neutral-icon" />
+      </div>
+      <input
+        type="hidden"
+        name={props.name}
+        value={Array.isArray(value) ? value.join(",") : value}
+      />
+      <SelectDropdown
+        options={options}
+        open={open}
+        setOpen={setOpen}
+        addAll={addAll}
+        multiple={multiple}
+        isAllSelected={isAllSelected}
+        isValueSelected={isValueSelected}
+        handleSelectAll={handleSelectAll}
+        handleChange={handleChange}
+        parentRef={ref as React.RefObject<HTMLDivElement>}
+        passedRef={dropdownRef}
+        setSelectedValues={setSelectedValues}
+      />
+    </div>
+  )
+}
+
+export default SelectBadge

package/src/components/Select/Dropdown/index.tsx

@@ -0,0 +1,188 @@
+
+import React, { useCallback, useEffect, useRef } from "react"
+import clsx from "clsx"
+import { OptionType } from "../../../hooks/use-select"
+import { Ref } from "../../../types"
+import { CheckMini, EllipseMiniSolid } from "@acmekit/icons"
+
+export type SelectDropdownProps = {
+  options: OptionType[]
+  open: boolean
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>
+  addAll?: boolean
+  multiple?: boolean
+  isAllSelected: boolean
+  isValueSelected: (val: string) => boolean
+  handleSelectAll: () => void
+  handleChange?: (selectedValue: string, wasSelected: boolean) => void
+  parentRef?: React.RefObject<HTMLDivElement>
+  className?: string
+  passedRef?: Ref<HTMLDivElement>
+  setSelectedValues?: (values: string[]) => void
+}
+
+export const SelectDropdown = ({
+  open,
+  setOpen,
+  options,
+  addAll,
+  multiple = false,
+  isAllSelected,
+  isValueSelected,
+  handleSelectAll,
+  handleChange: handleSelectChange,
+  parentRef,
+  className,
+  passedRef,
+  setSelectedValues,
+}: SelectDropdownProps) => {
+  const ref = useRef<HTMLDivElement | null>(null)
+  const setRefs = useCallback(
+    (node: HTMLDivElement) => {
+      // Ref's from useRef needs to have the node assigned to `current`
+      ;(ref as any).current = node
+      if (typeof passedRef === "function") {
+        passedRef(node)
+      } else if (passedRef && "current" in passedRef) {
+        ;(passedRef as any).current = node
+      }
+    },
+    [passedRef]
+  )
+
+  const handleChange = (clickedValue: string, wasSelected: boolean) => {
+    if (isAllSelected && setSelectedValues) {
+      setSelectedValues([clickedValue])
+    } else {
+      handleSelectChange?.(clickedValue, wasSelected)
+    }
+    if (!multiple) {
+      setOpen(false)
+    }
+  }
+
+  const handleOutsideClick = useCallback(
+    (e: MouseEvent) => {
+      if (
+        open &&
+        !ref.current?.contains(e.target as Element) &&
+        !parentRef?.current?.contains(e.target as Element)
+      ) {
+        setOpen(false)
+      }
+    },
+    [open, parentRef, setOpen]
+  )
+
+  useEffect(() => {
+    document.body.addEventListener("click", handleOutsideClick)
+
+    return () => {
+      document.body.removeEventListener("click", handleOutsideClick)
+    }
+  }, [handleOutsideClick])
+
+  const getSelectOption = (option: OptionType, index: number) => {
+    const originalIsSelected = isValueSelected(option.value)
+    const isSelected = isAllSelected
+      ? option.isAllOption || false
+      : originalIsSelected
+
+    return (
+      <li
+        key={index}
+        className={clsx(
+          "px-docs_0.25",
+          index <= 0 && "rounded-t-docs_DEFAULT",
+          index === options.length - 1 && "rounded-b-docs_DEFAULT"
+        )}
+        onClick={() => {
+          if (option.isAllOption) {
+            handleSelectAll()
+          } else {
+            handleChange(option.value, originalIsSelected)
+          }
+        }}
+      >
+        <div
+          className={clsx(
+            "px-docs_0.5 py-docs_0.25 flex-1 min-w-max rounded-docs_xs",
+            "hover:bg-acmekit-bg-component-hover cursor-pointer",
+            "flex gap-docs_0.5 text-acmekit-fg-base items-center",
+            !isSelected && "text-compact-small",
+            isSelected && "text-compact-small-plus"
+          )}
+          data-testid="select-dropdown-option"
+        >
+          <span>
+            {isSelected && (
+              <>
+                {option.isAllOption && <EllipseMiniSolid />}
+                {!option.isAllOption && (
+                  <>
+                    {multiple && <CheckMini />}
+                    {!multiple && <EllipseMiniSolid />}
+                  </>
+                )}
+              </>
+            )}
+            {!isSelected && <EllipseMiniSolid className="invisible" />}
+          </span>
+          <span className="flex-1">{option.label}</span>
+        </div>
+      </li>
+    )
+  }
+
+  const getDivider = () => (
+    <svg
+      width="176"
+      height="8"
+      viewBox="0 0 176 8"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect width="168" height="8" transform="translate(4)" fill="#FAFAFA" />
+      <rect y="4" width="176" height="1" fill="white" />
+      <rect y="3" width="176" height="1" fill="#E4E4E7" />
+    </svg>
+  )
+
+  return (
+    <div
+      className={clsx(
+        "absolute left-0 md:left-docs_1",
+        "z-10",
+        "h-0 translate-y-0 overflow-hidden transition-transform",
+        open && "h-auto translate-y-docs_0.5 !overflow-visible",
+        className
+      )}
+      ref={setRefs}
+      data-testid="select-dropdown-wrapper"
+    >
+      <ul
+        className={clsx(
+          "mb-0 py-docs_0.25 overflow-auto rounded-docs_DEFAULT",
+          "bg-acmekit-bg-component text-acmekit-fg-base",
+          "shadow-elevation-flyout dark:shadow-elevation-flyout-dark list-none",
+          "flex flex-col"
+        )}
+      >
+        {addAll && (
+          <>
+            {getSelectOption(
+              {
+                value: "all",
+                label: "All Areas",
+                isAllOption: true,
+              },
+              -1
+            )}
+            {getDivider()}
+          </>
+        )}
+        {options.map(getSelectOption)}
+      </ul>
+    </div>
+  )
+}

package/src/components/Select/Input/index.tsx

@@ -0,0 +1,123 @@
+
+import React, { useRef, useState } from "react"
+import clsx from "clsx"
+import { useSelect } from "../../../hooks"
+import { SelectDropdown, SelectProps } from ".."
+import { Badge } from "../../../components/Badge"
+import { ChevronUpDown, XMarkMini } from "@acmekit/icons"
+
+export const SelectInput = ({
+  value,
+  options,
+  setSelected,
+  addSelected,
+  removeSelected,
+  multiple,
+  className,
+  addAll = multiple,
+  handleAddAll,
+  showClearButton = true,
+  ...props
+}: SelectProps) => {
+  const [open, setOpen] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+  const dropdownRef = useRef<HTMLDivElement>(null)
+  const {
+    isValueSelected,
+    hasSelectedValue,
+    hasSelectedValues,
+    selectedValues,
+    isAllSelected,
+    handleChange,
+    handleSelectAll,
+  } = useSelect({
+    value,
+    options,
+    multiple,
+    setSelected,
+    removeSelected,
+    addSelected,
+    handleAddAll,
+  })
+
+  return (
+    <div
+      className={clsx(
+        "px-docs_0.75 relative py-[9px]",
+        "border-acmekit-border-base rounded-docs_sm border border-solid",
+        "bg-acmekit-bg-field shadow-button-neutral dark:shadow-button-neutral-dark",
+        "hover:bg-acmekit-bg-field-hover",
+        "active:shadow-active dark:active:shadow-active-dark",
+        "focus:shadow-active dark:focus:shadow-active-dark",
+        "text-acmekit-fg-base text-compact-medium",
+        "disabled:bg-acmekit-bg-disabled",
+        "disabled:text-acmekit-fg-disabled",
+        "flex items-center gap-docs_0.5",
+        !hasSelectedValues && "placeholder:text-acmekit-fg-muted",
+        hasSelectedValues && "placeholder:text-acmekit-fg-base",
+        className
+      )}
+      ref={ref}
+      onClick={(e) => {
+        if (!dropdownRef.current?.contains(e.target as Element)) {
+          setOpen((prev) => !prev)
+        }
+      }}
+      data-testid="select-input"
+    >
+      {hasSelectedValues && (
+        <Badge
+          variant="neutral"
+          className={clsx("flex", showClearButton && "flex-1")}
+        >
+          <span
+            className={clsx(
+              "text-compact-medium-plus inline-block",
+              showClearButton && "mr-docs_0.125"
+            )}
+          >
+            {(value as string[]).length}
+          </span>
+          {showClearButton && (
+            <XMarkMini
+              className="text-acmekit-tag-neutral-icon"
+              onClick={(e) => {
+                e.stopPropagation()
+                setSelected?.([])
+              }}
+            />
+          )}
+        </Badge>
+      )}
+      <span
+        className={clsx(
+          "inline-block flex-1 select-none overflow-ellipsis whitespace-nowrap break-words",
+          hasSelectedValues && "max-w-1/3"
+        )}
+      >
+        {!multiple && hasSelectedValue && selectedValues.length
+          ? selectedValues[0].label
+          : props.placeholder}
+      </span>
+      <ChevronUpDown className="text-acmekit-fg-muted" />
+      <input
+        type="hidden"
+        name={props.name}
+        value={Array.isArray(value) ? value.join(",") : value}
+      />
+      <SelectDropdown
+        options={options}
+        open={open}
+        setOpen={setOpen}
+        addAll={addAll}
+        multiple={multiple}
+        isAllSelected={isAllSelected}
+        isValueSelected={isValueSelected}
+        handleSelectAll={handleSelectAll}
+        handleChange={handleChange}
+        parentRef={ref as React.RefObject<HTMLDivElement>}
+        passedRef={dropdownRef}
+      />
+    </div>
+  )
+}

package/src/components/Select/index.ts

@@ -0,0 +1,13 @@
+import type { OptionType, SelectOptions } from "../../hooks"
+
+export type SelectProps = {
+  options: OptionType[]
+  multiple?: boolean
+  addAll?: boolean
+  showClearButton?: boolean
+} & SelectOptions &
+  React.ComponentProps<"input">
+
+export * from "./Badge"
+export * from "./Dropdown"
+export * from "./Input"

package/src/components/Sidebar/Child/index.tsx

@@ -0,0 +1,43 @@
+
+import React, { useMemo } from "react"
+import clsx from "clsx"
+import { ArrowUturnLeft } from "@acmekit/icons"
+import { useSidebar } from "../../../providers/Sidebar"
+
+export const SidebarChild = () => {
+  const { goBack, shownSidebar } = useSidebar()
+
+  const title = useMemo(() => {
+    if (!shownSidebar) {
+      return ""
+    }
+
+    return "childSidebarTitle" in shownSidebar
+      ? shownSidebar.childSidebarTitle || shownSidebar.title
+      : shownSidebar.title
+  }, [shownSidebar])
+
+  if (!shownSidebar) {
+    return <></>
+  }
+
+  return (
+    <div className="px-docs_0.75" data-testid="sidebar-child">
+      <div
+        onClick={goBack}
+        className={clsx(
+          "flex items-center justify-start my-docs_0.75 gap-[10px]",
+          "border border-transparent cursor-pointer mx-docs_0.5",
+          "!text-acmekit-fg-base !text-compact-small-plus"
+        )}
+        tabIndex={-1}
+        data-testid="sidebar-child-back-button"
+      >
+        <ArrowUturnLeft />
+        <span className="truncate flex-1" data-testid="sidebar-child-title">
+          {title}
+        </span>
+      </div>
+    </div>
+  )
+}

package/src/components/Sidebar/Item/Category/index.tsx

@@ -0,0 +1,151 @@
+
+// @refresh reset
+
+import React, { useEffect, useMemo, useState } from "react"
+import { Sidebar } from "../../../../types"
+import { Badge } from "../../../../components/Badge"
+import { Loading } from "../../../../components/Loading"
+import { SidebarItem } from "../../../../components/Sidebar/Item"
+import { useSidebar } from "../../../../providers/Sidebar"
+import clsx from "clsx"
+import { TriangleDownMini, TriangleUpMini } from "@acmekit/icons"
+
+export type SidebarItemCategoryProps = {
+  item: Sidebar.SidebarItemCategory
+} & React.AllHTMLAttributes<HTMLDivElement>
+
+export const SidebarItemCategory = ({
+  item,
+  className,
+}: SidebarItemCategoryProps) => {
+  const [showLoading, setShowLoading] = useState(false)
+  const [open, setOpen] = useState(
+    item.initialOpen !== undefined ? item.initialOpen : false
+  )
+  const {
+    isItemActive,
+    updatePersistedCategoryState,
+    getPersistedCategoryState,
+    persistCategoryState,
+  } = useSidebar()
+  const itemShowLoading = useMemo(() => {
+    return !item.loaded || (item.showLoadingIfEmpty && !item.children?.length)
+  }, [item])
+  const isActive = useMemo(() => {
+    return isItemActive({
+      item,
+    })
+  }, [isItemActive, item])
+
+  useEffect(() => {
+    if (open && itemShowLoading) {
+      setShowLoading(true)
+    }
+  }, [open, itemShowLoading])
+
+  useEffect(() => {
+    if (!itemShowLoading && showLoading) {
+      setShowLoading(false)
+    }
+  }, [itemShowLoading, showLoading])
+
+  useEffect(() => {
+    if (isActive && !open) {
+      setOpen(true)
+    }
+  }, [isActive, item.children])
+
+  useEffect(() => {
+    if (!persistCategoryState) {
+      return
+    }
+    const persistedOpen = getPersistedCategoryState(item.title)
+    if (persistedOpen !== undefined && !isActive) {
+      setOpen(persistedOpen)
+    }
+  }, [persistCategoryState])
+
+  const handleOpen = () => {
+    if (!open) {
+      item.onOpen?.()
+    }
+    if (persistCategoryState) {
+      updatePersistedCategoryState(item.title, !open)
+    }
+    setOpen((prev) => !prev)
+  }
+
+  const isTitleOneWord = useMemo(
+    () => item.title.split(" ").length === 1,
+    [item.title]
+  )
+
+  return (
+    <div
+      className={clsx("my-docs_0.75 first:!mt-0 w-full relative", className)}
+      data-testid="sidebar-item-category-container"
+    >
+      <div className="px-docs_0.75">
+        <div
+          className={clsx(
+            "py-docs_0.25 px-docs_0.5",
+            "flex justify-between items-center gap-docs_0.5",
+            "text-acmekit-fg-muted",
+            "cursor-pointer relative",
+            "z-[2]",
+            !isTitleOneWord && "break-words"
+          )}
+          tabIndex={-1}
+          onClick={handleOpen}
+          data-testid="sidebar-item-category"
+        >
+          <span
+            className={clsx(
+              "text-compact-x-small-plus",
+              isTitleOneWord && "truncate"
+            )}
+            data-testid="sidebar-item-title"
+          >
+            {item.title}
+          </span>
+          {item.additionalElms}
+          {item.badge && (
+            <Badge variant={item.badge.variant}>{item.badge.text}</Badge>
+          )}
+          {!item.additionalElms && (
+            <>
+              {open && <TriangleDownMini />}
+              {!open && <TriangleUpMini />}
+            </>
+          )}
+        </div>
+      </div>
+      {!item.hideChildren && (
+        <ul
+          className={clsx(
+            "ease-ease",
+            "flex flex-col gap-docs_0.125",
+            "z-[1] relative",
+            !open && "overflow-hidden m-0 h-0"
+          )}
+          data-testid="sidebar-item-category-children"
+        >
+          {item.children?.map((childItem, index) => (
+            <SidebarItem
+              item={childItem}
+              key={index}
+              isParentCategoryOpen={open}
+            />
+          ))}
+          {showLoading && (
+            <Loading
+              count={3}
+              className="!mb-0 !px-docs_0.5"
+              barClassName="h-[20px]"
+            />
+          )}
+        </ul>
+      )}
+    </div>
+  )
+}