@stack-spot/citric-react 0.36.0 → 0.37.1-beta.1

package/src/components/Table.tsx

@@ -1,234 +1,234 @@
-import { listToClass } from '@stack-spot/portal-theme'
-import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
-import { useEffect, useRef } from 'react'
-import { applyCSSVariable } from '../utils/css'
-import { withRef } from '../utils/react'
-import { CitricComponent } from './CitricComponent'
-
-export interface BaseTableProps {
-  /**
-   * The overall table's appearance. Includes a default configuration for every other styling related prop.
-   * 
-   * @default 'spaced'
-   */
-  appearance?: 'stripped' | 'spaced',
-  /**
-   * Whether or not to color each row a different color. Only valid when appearance is "spaced".
-   * 
-   * @default false
-   */
-  stripped?: boolean,
-  /**
-   * If true, there's no spacing between rows. Only valid when appearance is "spaced".
-   * 
-   * @default false
-   */
-  compressed?: boolean,
-  /**
-   * Shows an outer border for the whole table.
-   * 
-   * @default "true if appearance is 'stripped', false otherwise"
-   */
-  showBorders?: boolean,
-  /**
-   * Shows borders in each of the rows.
-   * 
-   * @default false
-   */
-  showRowBorders?: boolean,
-  /**
-   * Shows borders in the header.
-   * 
-   * @default "false if appearance is 'stripped', true otherwise"
-   */
-  showHeaderBorders?: boolean,
-  /**
-   * Whether or not the table borders are rounded.
-   * 
-   * @default true
-   */
-  rounded?: boolean,
-  /**
-   * Whether or not each row in the table have rounded borders.
-   * 
-   * @default "false if appearance is 'stripped', true otherwise"
-   */
-  roundedRows?: boolean,
-  /**
-   * If true, all headers are uppercase.
-   * 
-   * @default false
-   */
-  uppercaseHeader?: boolean,
-  /**
-   * Allows rows to act as accordions. To create an accordion row, use `<tbody>` to group two `<tr>` elements, where the first is the actual
-   * row and the second is the collapsible content of the row. The row with the collapsible content must be defined as `<Tr accordion>`.
-   * 
-   * @default false
-   */
-  accordionRows?: boolean,
-}
-
-export type SortingDirection = 'asc' | 'desc'
-
-interface BaseThProps {
-  /**
-   * Which is the current direction of the sorting? Only relevant if 'onSort' is set.
-   * 
-   * @default 'desc'
-   */
-  direction?: SortingDirection,
-  /**
-   * What to do when the header is clicked (sorting).
-   */
-  onSort?: (value: SortingDirection | undefined) => void,
-}
-
-interface BaseTrProps {
-  /**
-   * True if this table is an accordion, false otherwise.
-   * 
-   * @default false
-   */
-  accordion?: boolean,
-  /**
-   * If the next row is an accordion, what should make it expand or contract? A click on a button in the last column or a click anywhere in
-   * the row?
-   * 
-   * @default 'button'
-   */
-  accordionTrigger?: 'button' | 'row',
-  /**
-   * Sets the maximum height of this accordion. Only valid if `accordion` is true.
-   * 
-   * @default '200px'
-   */
-  accordionMaxHeight?: string,
-}
-
-export type TableProps = React.JSX.IntrinsicElements['table'] & BaseTableProps
-export type ThProps = React.JSX.IntrinsicElements['th'] & BaseThProps
-export type TrProps = React.JSX.IntrinsicElements['tr'] & BaseTrProps
-
-/**
- * Renders an HTML table. Use its props for customizing the appearance.
- * 
- * - If you need to use Accordion rows, use `<Tr>`instead of `<tr>`.
- * - If you need to sort columns, use `<Th>`instead of `<th>`.
- * 
- * This works exactly like the HTML tag "table".
- * 
- * Attention: prefer using the component "SmartTable". Use this only if you need full control over the table.
- */
-export const Table = withRef(({
-  appearance, stripped, compressed, showBorders, showHeaderBorders, showRowBorders, rounded, roundedRows, uppercaseHeader, className,
-  children, accordionRows, ...props
-}: TableProps) => {
-  const classes = listToClass([
-    className,
-    stripped && 'stripped',
-    compressed && 'compressed',
-    showBorders && 'bordered',
-    showHeaderBorders === false && 'borderless-header',
-    showRowBorders && 'bordered-rows',
-    rounded === false && 'square',
-    roundedRows === false && 'square-rows',
-    uppercaseHeader && 'uppercase-header',
-    accordionRows && 'accordion-rows',
-  ])
-  return (
-    <CitricComponent tag="table" component="table" data-appearance={appearance} className={classes} {...props}>
-      {children}
-    </CitricComponent>
-  )
-})
-
-export const Th = withRef(({ direction, onSort, children, className, ...props }: ThProps) => {
-  const t = useTranslate(dictionary)
-  let tip: string | undefined
-  const label = typeof children === 'string' ? children : undefined
-  if (onSort && !direction) tip = label ? `${label}. ${t.sortAscending}` : t.sortAscending
-  if (onSort && direction === 'asc') tip = label ? `${label}. ${t.sortDescending}` : t.sortDescending
-  if (onSort && direction === 'desc') tip = label ? `${label}. ${t.sortNone}` : t.sortNone
-
-  function handleSort() {
-    if (!direction) onSort?.('asc')
-    else if (direction === 'asc') onSort?.('desc')
-    else onSort?.(undefined)
-  }
-
-  return (
-    <th
-      className={listToClass([onSort && 'sortable', direction, className])}
-      onClick={onSort? handleSort : undefined}
-      onKeyDown={onSort ? (e => e.key === 'Enter' && handleSort()) : undefined}
-      aria-label={tip}
-      tabIndex={onSort ? 0 : undefined}
-      {...props}
-    >
-      {children}
-    </th>
-  )
-})
-
-export const Tr = withRef(
-  ({
-    ref: outerRef, accordion, accordionTrigger, accordionMaxHeight, children, className, style, onClick, ...props
-  }: TrProps) => {
-    const innerRef = useRef<HTMLTableRowElement | null>(null)
-    const ref = outerRef as React.MutableRefObject<HTMLTableRowElement | null> ?? innerRef
-
-    useEffect(() => {
-      if (!accordion) return
-      const checkbox = ref.current?.closest('tbody')?.querySelector('td:last-child input[aria-controls]')
-      if (checkbox instanceof HTMLElement) {
-        const onChange = (e: Event) => {
-          if (!ref.current || !(e.target instanceof HTMLInputElement)) return
-          if (e.target.checked) {
-            ref.current.setAttribute('aria-hidden', 'false')
-            ref.current.removeAttribute('inert')
-          } else {
-            ref.current.setAttribute('aria-hidden', 'true')
-            ref.current.setAttribute('inert', 'true')
-          }
-        }
-        checkbox.addEventListener('change', onChange)
-        return () => checkbox.removeEventListener('change', onChange)
-      }
-    }, [ref.current])
-
-    return (
-      <tr
-        ref={ref}
-        {...props}
-        className={listToClass([className, accordion && 'accordion', (accordionTrigger === 'row' || onClick) && 'clickable'])}
-        onClick={accordionTrigger === 'row'
-          ? (e) => {
-            const checkbox = ref.current?.querySelector('td:last-child input[aria-controls]')
-            if (checkbox instanceof HTMLInputElement && e.target !== checkbox) checkbox.click()
-            onClick?.(e)
-          }
-          : onClick
-        }
-        style={applyCSSVariable(style, 'max-height', accordionMaxHeight)}
-        aria-hidden={accordion}
-        {...(accordion ? { inert: 'true' } : {})}
-      >
-        {children}
-      </tr>
-    )
-  },
-)
-
-const dictionary = {
-  en: {
-    sortAscending: 'Click to sort in ascending order.',
-    sortDescending: 'Click to sort in descending order.',
-    sortNone: 'Click to remove sorting.',
-  },
-  pt: {
-    sortAscending: 'Clique para ordenar em ordem crescente.',
-    sortDescending: 'Clique para ordenar em ordem decrescente.',
-    sortNone: 'Clique para remover a ordenação.',
-  },
-} satisfies Dictionary
+import { listToClass } from '@stack-spot/portal-theme'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { useEffect, useRef } from 'react'
+import { applyCSSVariable } from '../utils/css'
+import { withRef } from '../utils/react'
+import { CitricComponent } from './CitricComponent'
+
+export interface BaseTableProps {
+  /**
+   * The overall table's appearance. Includes a default configuration for every other styling related prop.
+   * 
+   * @default 'spaced'
+   */
+  appearance?: 'stripped' | 'spaced',
+  /**
+   * Whether or not to color each row a different color. Only valid when appearance is "spaced".
+   * 
+   * @default false
+   */
+  stripped?: boolean,
+  /**
+   * If true, there's no spacing between rows. Only valid when appearance is "spaced".
+   * 
+   * @default false
+   */
+  compressed?: boolean,
+  /**
+   * Shows an outer border for the whole table.
+   * 
+   * @default "true if appearance is 'stripped', false otherwise"
+   */
+  showBorders?: boolean,
+  /**
+   * Shows borders in each of the rows.
+   * 
+   * @default false
+   */
+  showRowBorders?: boolean,
+  /**
+   * Shows borders in the header.
+   * 
+   * @default "false if appearance is 'stripped', true otherwise"
+   */
+  showHeaderBorders?: boolean,
+  /**
+   * Whether or not the table borders are rounded.
+   * 
+   * @default true
+   */
+  rounded?: boolean,
+  /**
+   * Whether or not each row in the table have rounded borders.
+   * 
+   * @default "false if appearance is 'stripped', true otherwise"
+   */
+  roundedRows?: boolean,
+  /**
+   * If true, all headers are uppercase.
+   * 
+   * @default false
+   */
+  uppercaseHeader?: boolean,
+  /**
+   * Allows rows to act as accordions. To create an accordion row, use `<tbody>` to group two `<tr>` elements, where the first is the actual
+   * row and the second is the collapsible content of the row. The row with the collapsible content must be defined as `<Tr accordion>`.
+   * 
+   * @default false
+   */
+  accordionRows?: boolean,
+}
+
+export type SortingDirection = 'asc' | 'desc'
+
+interface BaseThProps {
+  /**
+   * Which is the current direction of the sorting? Only relevant if 'onSort' is set.
+   * 
+   * @default 'desc'
+   */
+  direction?: SortingDirection,
+  /**
+   * What to do when the header is clicked (sorting).
+   */
+  onSort?: (value: SortingDirection | undefined) => void,
+}
+
+interface BaseTrProps {
+  /**
+   * True if this table is an accordion, false otherwise.
+   * 
+   * @default false
+   */
+  accordion?: boolean,
+  /**
+   * If the next row is an accordion, what should make it expand or contract? A click on a button in the last column or a click anywhere in
+   * the row?
+   * 
+   * @default 'button'
+   */
+  accordionTrigger?: 'button' | 'row',
+  /**
+   * Sets the maximum height of this accordion. Only valid if `accordion` is true.
+   * 
+   * @default '200px'
+   */
+  accordionMaxHeight?: string,
+}
+
+export type TableProps = React.JSX.IntrinsicElements['table'] & BaseTableProps
+export type ThProps = React.JSX.IntrinsicElements['th'] & BaseThProps
+export type TrProps = React.JSX.IntrinsicElements['tr'] & BaseTrProps
+
+/**
+ * Renders an HTML table. Use its props for customizing the appearance.
+ * 
+ * - If you need to use Accordion rows, use `<Tr>`instead of `<tr>`.
+ * - If you need to sort columns, use `<Th>`instead of `<th>`.
+ * 
+ * This works exactly like the HTML tag "table".
+ * 
+ * Attention: prefer using the component "SmartTable". Use this only if you need full control over the table.
+ */
+export const Table = withRef(({
+  appearance, stripped, compressed, showBorders, showHeaderBorders, showRowBorders, rounded, roundedRows, uppercaseHeader, className,
+  children, accordionRows, ...props
+}: TableProps) => {
+  const classes = listToClass([
+    className,
+    stripped && 'stripped',
+    compressed && 'compressed',
+    showBorders && 'bordered',
+    showHeaderBorders === false && 'borderless-header',
+    showRowBorders && 'bordered-rows',
+    rounded === false && 'square',
+    roundedRows === false && 'square-rows',
+    uppercaseHeader && 'uppercase-header',
+    accordionRows && 'accordion-rows',
+  ])
+  return (
+    <CitricComponent tag="table" component="table" data-appearance={appearance} className={classes} {...props}>
+      {children}
+    </CitricComponent>
+  )
+})
+
+export const Th = withRef(({ direction, onSort, children, className, ...props }: ThProps) => {
+  const t = useTranslate(dictionary)
+  let tip: string | undefined
+  const label = typeof children === 'string' ? children : undefined
+  if (onSort && !direction) tip = label ? `${label}. ${t.sortAscending}` : t.sortAscending
+  if (onSort && direction === 'asc') tip = label ? `${label}. ${t.sortDescending}` : t.sortDescending
+  if (onSort && direction === 'desc') tip = label ? `${label}. ${t.sortNone}` : t.sortNone
+
+  function handleSort() {
+    if (!direction) onSort?.('asc')
+    else if (direction === 'asc') onSort?.('desc')
+    else onSort?.(undefined)
+  }
+
+  return (
+    <th
+      className={listToClass([onSort && 'sortable', direction, className])}
+      onClick={onSort? handleSort : undefined}
+      onKeyDown={onSort ? (e => e.key === 'Enter' && handleSort()) : undefined}
+      aria-label={tip}
+      tabIndex={onSort ? 0 : undefined}
+      {...props}
+    >
+      {children}
+    </th>
+  )
+})
+
+export const Tr = withRef(
+  ({
+    ref: outerRef, accordion, accordionTrigger, accordionMaxHeight, children, className, style, onClick, ...props
+  }: TrProps) => {
+    const innerRef = useRef<HTMLTableRowElement | null>(null)
+    const ref = outerRef as React.MutableRefObject<HTMLTableRowElement | null> ?? innerRef
+
+    useEffect(() => {
+      if (!accordion) return
+      const checkbox = ref.current?.closest('tbody')?.querySelector('td:last-child input[aria-controls]')
+      if (checkbox instanceof HTMLElement) {
+        const onChange = (e: Event) => {
+          if (!ref.current || !(e.target instanceof HTMLInputElement)) return
+          if (e.target.checked) {
+            ref.current.setAttribute('aria-hidden', 'false')
+            ref.current.removeAttribute('inert')
+          } else {
+            ref.current.setAttribute('aria-hidden', 'true')
+            ref.current.setAttribute('inert', 'true')
+          }
+        }
+        checkbox.addEventListener('change', onChange)
+        return () => checkbox.removeEventListener('change', onChange)
+      }
+    }, [ref.current])
+
+    return (
+      <tr
+        ref={ref}
+        {...props}
+        className={listToClass([className, accordion && 'accordion', (accordionTrigger === 'row' || onClick) && 'clickable'])}
+        onClick={accordionTrigger === 'row'
+          ? (e) => {
+            const checkbox = ref.current?.querySelector('td:last-child input[aria-controls]')
+            if (checkbox instanceof HTMLInputElement && e.target !== checkbox) checkbox.click()
+            onClick?.(e)
+          }
+          : onClick
+        }
+        style={applyCSSVariable(style, 'max-height', accordionMaxHeight)}
+        aria-hidden={accordion}
+        {...(accordion ? { inert: 'true' } : {})}
+      >
+        {children}
+      </tr>
+    )
+  },
+)
+
+const dictionary = {
+  en: {
+    sortAscending: 'Click to sort in ascending order.',
+    sortDescending: 'Click to sort in descending order.',
+    sortNone: 'Click to remove sorting.',
+  },
+  pt: {
+    sortAscending: 'Clique para ordenar em ordem crescente.',
+    sortDescending: 'Clique para ordenar em ordem decrescente.',
+    sortNone: 'Clique para remover a ordenação.',
+  },
+} satisfies Dictionary

package/src/components/Tabs/TabController.ts

@@ -1,54 +1,54 @@
-import { ValueController } from '../../utils/ValueController'
-
-export class TabController<Key extends string> extends ValueController<Key> {
-  private tabOrder: Key[]
-
-  constructor(tabOrder: Key[], value: Key) {
-    super(value)
-    this.tabOrder = tabOrder
-  }
-
-  private getCurrentIndex() {
-    return this.tabOrder.findIndex(t => t === this.value)
-  }
-
-  /**
-   * @returns true if there's another tab after the one currently selected. False otherwise.
-   */
-  hasNext(): boolean {
-    const current = this.getCurrentIndex()
-    return current > -1 && current + 1 < this.tabOrder.length
-  }
-
-  /**
-   * @returns true if there's a tab before the one currently selected. False otherwise.
-   */
-  hasPrevious(): boolean {
-    const current = this.getCurrentIndex()
-    return current > -1 && current - 1 >= 0
-  }
-
-  /**
-   * Selects the tab on the right of the one currently selected. If there's no next tab, nothing happens.
-   * @returns true if the tab is changed, false otherwise.
-   */
-  next(): boolean {
-    if (this.hasNext()) {
-      this.setValue(this.tabOrder[this.getCurrentIndex() + 1])
-      return true
-    }
-    return false
-  }
-
-  /**
-   * Selects the tab on the left of the one currently selected. If there's no previous tab, nothing happens.
-   * @returns true if the tab is changed, false otherwise.
-   */
-  previous(): boolean {
-    if (this.hasPrevious()) {
-      this.setValue(this.tabOrder[this.getCurrentIndex() - 1])
-      return true
-    }
-    return false
-  }
-}
+import { ValueController } from '../../utils/ValueController'
+
+export class TabController<Key extends string> extends ValueController<Key> {
+  private tabOrder: Key[]
+
+  constructor(tabOrder: Key[], value: Key) {
+    super(value)
+    this.tabOrder = tabOrder
+  }
+
+  private getCurrentIndex() {
+    return this.tabOrder.findIndex(t => t === this.value)
+  }
+
+  /**
+   * @returns true if there's another tab after the one currently selected. False otherwise.
+   */
+  hasNext(): boolean {
+    const current = this.getCurrentIndex()
+    return current > -1 && current + 1 < this.tabOrder.length
+  }
+
+  /**
+   * @returns true if there's a tab before the one currently selected. False otherwise.
+   */
+  hasPrevious(): boolean {
+    const current = this.getCurrentIndex()
+    return current > -1 && current - 1 >= 0
+  }
+
+  /**
+   * Selects the tab on the right of the one currently selected. If there's no next tab, nothing happens.
+   * @returns true if the tab is changed, false otherwise.
+   */
+  next(): boolean {
+    if (this.hasNext()) {
+      this.setValue(this.tabOrder[this.getCurrentIndex() + 1])
+      return true
+    }
+    return false
+  }
+
+  /**
+   * Selects the tab on the left of the one currently selected. If there's no previous tab, nothing happens.
+   * @returns true if the tab is changed, false otherwise.
+   */
+  previous(): boolean {
+    if (this.hasPrevious()) {
+      this.setValue(this.tabOrder[this.getCurrentIndex() - 1])
+      return true
+    }
+    return false
+  }
+}