@stack-spot/citric-react 0.42.0-beta.0 → 0.42.0

package/src/utils/acessibility.ts

@@ -1,92 +1,92 @@
-export type TagPriority = 'a' | 'button' | 'input' | 'textarea' | 'select' | 'other'
-export type TagPriorityElement = TagPriority | TagPriority[]
-
-interface FocusOptions {
-  /**
-   * Instead of focusing the first element overall, focus the first according to this list of priorities.
-   * 
-   * 'other' means elements that are normally not focusable, but have positive tabIndex values.
-   */
-  priority?: TagPriorityElement[],
-  /**
-   * Ignores any element that matches this query selector.
-   */
-  ignore?: string,
-}
-
-const selectors: Record<TagPriority, string> = {
-  a: 'a[href]:not(:disabled)',
-  button: 'button:not(:disabled)',
-  input: 'input:not(:disabled):not([type="hidden"])',
-  select: 'textarea:not(:disabled)',
-  textarea: 'select:not(:disabled)',
-  other: '[tabindex]:not([tabindex="-1"])',
-}
-
-/**
- * Focus the first focusable child of the element provided. If the element has no focusable child, nothing happens.
- * 
- * A priority list can be passed in the second parameter, as an option. If it's provided, it will focus the first element according to the
- * list.
- * 
- * An ignore query selector can also be passed in the options parameter. If the first focusable element matches the query selector, the
- * next element is focused instead.
- * 
- * Elements with `auto-focus={false}` will be ignored.
- * 
- * @example
- * Suppose the children of element are: h1, button, p, input, select.
- * 1. We don't pass a priority list. The focused element will be the button.
- * 2. Our priority list is ['button']. The focused element will be the button.
- * 3. Our priority list is ['input', 'button']. The focused element will be the input.
- * 4. Our priority list is ['select', 'input']. The focused element will be the select.
- * 5. Our priority list is [['select', 'input'], 'button']. The focused element will be the input.
- * 
- * @param element the element to search a child to focus.
- * @param options optional.
- */
-export function focusFirstChild(element: HTMLElement | Document | null | undefined, { priority = [], ignore }: FocusOptions = {}) {
-  const allFocusableTags: TagPriority[] = ['a', 'button', 'input', 'other', 'select', 'textarea']
-  const focusableList: (NodeListOf<HTMLElement> | undefined)[] = [
-    element?.querySelectorAll(allFocusableTags.map(t => selectors[t]).join(', ')),
-  ]
-  for (const p of priority) {
-    const tags = Array.isArray(p) ? p : [p]
-    const querySelectors = tags.map(t => selectors[t])
-    focusableList.unshift(element?.querySelectorAll(querySelectors.join(', ')))
-  }
-  for (const focusable of focusableList ?? []) {
-    for (const f of focusable ?? []) {
-      if (f.getAttribute('auto-focus') !== 'false' && (!ignore || !f.matches(ignore))) {
-        const styles = window.getComputedStyle(f)
-        if (styles.display != 'none' && styles.visibility != 'hidden') return f.focus()
-      }
-    }
-  }
-}
-
-/**
- * Checks if an element can receive focus.
- * 
- * Elements can receive focus only if:
- * - they exist;
- * - they're visible;
- * - they're not disabled;
- * - they are a focusable tag name or have a positive tab index;
- * - they don't have a negative tab index.
- * @param element the element to check.
- * @returns true if the element is focusable, false otherwise.
- */
-export function isFocusable(element?: Element | null) {
-  if (!element) return false
-  // is disabled: return false
-  if (element.ariaDisabled || element.getAttribute('disabled') !== null) return false
-  // is invisible: return false
-  if (!element.checkVisibility({ checkOpacity: true, checkVisibilityCSS: true })) return false
-  // has tab index: return false if negative, true otherwise
-  const tabIndexStr = element.getAttribute('tabindex')
-  const tabIndex = tabIndexStr ? parseInt(tabIndexStr) : undefined
-  if (tabIndex !== undefined) return tabIndex >= 0
-  // check the tag name
-  return ['a', 'button', 'input', 'iframe', 'select', 'textarea'].includes(element.tagName.toLowerCase() ?? '')
-}
+export type TagPriority = 'a' | 'button' | 'input' | 'textarea' | 'select' | 'other'
+export type TagPriorityElement = TagPriority | TagPriority[]
+
+interface FocusOptions {
+  /**
+   * Instead of focusing the first element overall, focus the first according to this list of priorities.
+   * 
+   * 'other' means elements that are normally not focusable, but have positive tabIndex values.
+   */
+  priority?: TagPriorityElement[],
+  /**
+   * Ignores any element that matches this query selector.
+   */
+  ignore?: string,
+}
+
+const selectors: Record<TagPriority, string> = {
+  a: 'a[href]:not(:disabled)',
+  button: 'button:not(:disabled)',
+  input: 'input:not(:disabled):not([type="hidden"])',
+  select: 'textarea:not(:disabled)',
+  textarea: 'select:not(:disabled)',
+  other: '[tabindex]:not([tabindex="-1"])',
+}
+
+/**
+ * Focus the first focusable child of the element provided. If the element has no focusable child, nothing happens.
+ * 
+ * A priority list can be passed in the second parameter, as an option. If it's provided, it will focus the first element according to the
+ * list.
+ * 
+ * An ignore query selector can also be passed in the options parameter. If the first focusable element matches the query selector, the
+ * next element is focused instead.
+ * 
+ * Elements with `auto-focus={false}` will be ignored.
+ * 
+ * @example
+ * Suppose the children of element are: h1, button, p, input, select.
+ * 1. We don't pass a priority list. The focused element will be the button.
+ * 2. Our priority list is ['button']. The focused element will be the button.
+ * 3. Our priority list is ['input', 'button']. The focused element will be the input.
+ * 4. Our priority list is ['select', 'input']. The focused element will be the select.
+ * 5. Our priority list is [['select', 'input'], 'button']. The focused element will be the input.
+ * 
+ * @param element the element to search a child to focus.
+ * @param options optional.
+ */
+export function focusFirstChild(element: HTMLElement | Document | null | undefined, { priority = [], ignore }: FocusOptions = {}) {
+  const allFocusableTags: TagPriority[] = ['a', 'button', 'input', 'other', 'select', 'textarea']
+  const focusableList: (NodeListOf<HTMLElement> | undefined)[] = [
+    element?.querySelectorAll(allFocusableTags.map(t => selectors[t]).join(', ')),
+  ]
+  for (const p of priority) {
+    const tags = Array.isArray(p) ? p : [p]
+    const querySelectors = tags.map(t => selectors[t])
+    focusableList.unshift(element?.querySelectorAll(querySelectors.join(', ')))
+  }
+  for (const focusable of focusableList ?? []) {
+    for (const f of focusable ?? []) {
+      if (f.getAttribute('auto-focus') !== 'false' && (!ignore || !f.matches(ignore))) {
+        const styles = window.getComputedStyle(f)
+        if (styles.display != 'none' && styles.visibility != 'hidden') return f.focus()
+      }
+    }
+  }
+}
+
+/**
+ * Checks if an element can receive focus.
+ * 
+ * Elements can receive focus only if:
+ * - they exist;
+ * - they're visible;
+ * - they're not disabled;
+ * - they are a focusable tag name or have a positive tab index;
+ * - they don't have a negative tab index.
+ * @param element the element to check.
+ * @returns true if the element is focusable, false otherwise.
+ */
+export function isFocusable(element?: Element | null) {
+  if (!element) return false
+  // is disabled: return false
+  if (element.ariaDisabled || element.getAttribute('disabled') !== null) return false
+  // is invisible: return false
+  if (!element.checkVisibility({ checkOpacity: true, checkVisibilityCSS: true })) return false
+  // has tab index: return false if negative, true otherwise
+  const tabIndexStr = element.getAttribute('tabindex')
+  const tabIndex = tabIndexStr ? parseInt(tabIndexStr) : undefined
+  if (tabIndex !== undefined) return tabIndex >= 0
+  // check the tag name
+  return ['a', 'button', 'input', 'iframe', 'select', 'textarea'].includes(element.tagName.toLowerCase() ?? '')
+}

package/src/utils/checkbox.ts

@@ -1,121 +1,121 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { defaultRenderKey } from './options'
-
-export interface CheckboxGroupHookParams<T, F = string> {
-  /**
-   * The initial value for the checkbox group.
-   * 
-   * @default []
-   */
-  initialValue?: T[],
-  /**
-   * A function to apply a filter to an option. Must return true if the option respects the filter and false otherwise.
-   * @param filter the current filter.
-   * @param option the current option.
-   * @returns true if the option should pass the filter, false if the option should be discarded.
-   */
-  applyFilter?: (filter: F, option: T) => boolean,
-  /**
-   * The full set of options for the checkbox group.
-   */
-  options: T[],
-  /**
-   * A function that produces a unique id for an option.
-   * @param option the current option.
-   * @returns a unique key.
-   */
-  renderKey: (option: T) => string | number | undefined,
-  /**
-   * A function to call whenever the value changes.
-   * @param newValue the new value.
-   * @param previousValue the previous value.
-   */
-  onChange?: (newValue: T[], previousValue: T[]) => void,
-}
-
-/**
- * Use this hook to easily implement filtering and selection controls for a checkbox group.
- * @param params the parameters to create the controls.
- * @returns the checkbox controls.
- */
-export function useCheckboxGroupControls<T, F = string>(params: CheckboxGroupHookParams<T, F>) {
-  const [value, setValue] = useState(params.initialValue ?? [])
-  const [filter, setFilter] = useState<F | undefined>()
-  const previousValue = useRef(value)
-  const renderKey = params.renderKey ?? defaultRenderKey
-
-  useEffect(() => {
-    params.onChange?.(value, previousValue.current)
-    previousValue.current = value
-  }, [value])
-
-  const { options, isUnfilteredButChecked } = useMemo(() => {
-    if (!params.applyFilter || !filter) return { options: params.options, isUnfilteredButChecked: () => false }
-    const filtered: T[] = []
-    const unfilteredButChecked: T[] = []
-    const map = new Map<number | string | undefined, boolean>()
-    const valueKeys = value.map(o => renderKey(o))
-    for (const o of params.options) {
-      const key = renderKey(o)
-      if (params.applyFilter(filter, o)) filtered.push(o)
-      else if (valueKeys.includes(key)) {
-        unfilteredButChecked.push(o)
-        map.set(key, true)
-      }
-    }
-    return { options: [...unfilteredButChecked, ...filtered], isUnfilteredButChecked: (o: T) => map.has(renderKey(o)) }
-  }, [params.options, filter])
-
-  const selectAll = useCallback(() => {
-    setValue([...options])
-  }, [options])
-
-  const removeSelection = useCallback(() => {
-    setValue([])
-  }, [])
-
-  return {
-    /**
-     * Selects all the options currently visible.
-     */
-    selectAll,
-    /**
-     * Removes all options from the selection.
-     */
-    removeSelection,
-    /**
-     * The current filter applied.
-     */
-    filter,
-    /**
-     * Apply a new filter.
-     */
-    setFilter,
-    /**
-     * The options that should be passed to the checkbox group.
-     */
-    options,
-    /**
-     * The value that should be passed to the checkbox group.
-     */
-    value,
-    /**
-     * Changes the current value, should be passed to the property `onChange` of the checkbox group.
-     */
-    setValue,
-    /**
-     * A function to render a unique key for an option. Should be passed to the property `renderKey` of the checkbox group.
-     */
-    renderKey,
-    /**
-     * A function that returns true if the option is filtered out, but checked.
-     * @param option the option to check.
-     * @returns true if the option was filtered out, but is checked; false otherwise.
-     */
-    isUnfilteredButChecked,
-    /**
-     * True if all options showing are selected, false otherwise.
-     */
-    isAllSelected: value.length === options.length,
-  }
-}
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { defaultRenderKey } from './options'
+
+export interface CheckboxGroupHookParams<T, F = string> {
+  /**
+   * The initial value for the checkbox group.
+   * 
+   * @default []
+   */
+  initialValue?: T[],
+  /**
+   * A function to apply a filter to an option. Must return true if the option respects the filter and false otherwise.
+   * @param filter the current filter.
+   * @param option the current option.
+   * @returns true if the option should pass the filter, false if the option should be discarded.
+   */
+  applyFilter?: (filter: F, option: T) => boolean,
+  /**
+   * The full set of options for the checkbox group.
+   */
+  options: T[],
+  /**
+   * A function that produces a unique id for an option.
+   * @param option the current option.
+   * @returns a unique key.
+   */
+  renderKey: (option: T) => string | number | undefined,
+  /**
+   * A function to call whenever the value changes.
+   * @param newValue the new value.
+   * @param previousValue the previous value.
+   */
+  onChange?: (newValue: T[], previousValue: T[]) => void,
+}
+
+/**
+ * Use this hook to easily implement filtering and selection controls for a checkbox group.
+ * @param params the parameters to create the controls.
+ * @returns the checkbox controls.
+ */
+export function useCheckboxGroupControls<T, F = string>(params: CheckboxGroupHookParams<T, F>) {
+  const [value, setValue] = useState(params.initialValue ?? [])
+  const [filter, setFilter] = useState<F | undefined>()
+  const previousValue = useRef(value)
+  const renderKey = params.renderKey ?? defaultRenderKey
+
+  useEffect(() => {
+    params.onChange?.(value, previousValue.current)
+    previousValue.current = value
+  }, [value])
+
+  const { options, isUnfilteredButChecked } = useMemo(() => {
+    if (!params.applyFilter || !filter) return { options: params.options, isUnfilteredButChecked: () => false }
+    const filtered: T[] = []
+    const unfilteredButChecked: T[] = []
+    const map = new Map<number | string | undefined, boolean>()
+    const valueKeys = value.map(o => renderKey(o))
+    for (const o of params.options) {
+      const key = renderKey(o)
+      if (params.applyFilter(filter, o)) filtered.push(o)
+      else if (valueKeys.includes(key)) {
+        unfilteredButChecked.push(o)
+        map.set(key, true)
+      }
+    }
+    return { options: [...unfilteredButChecked, ...filtered], isUnfilteredButChecked: (o: T) => map.has(renderKey(o)) }
+  }, [params.options, filter])
+
+  const selectAll = useCallback(() => {
+    setValue([...options])
+  }, [options])
+
+  const removeSelection = useCallback(() => {
+    setValue([])
+  }, [])
+
+  return {
+    /**
+     * Selects all the options currently visible.
+     */
+    selectAll,
+    /**
+     * Removes all options from the selection.
+     */
+    removeSelection,
+    /**
+     * The current filter applied.
+     */
+    filter,
+    /**
+     * Apply a new filter.
+     */
+    setFilter,
+    /**
+     * The options that should be passed to the checkbox group.
+     */
+    options,
+    /**
+     * The value that should be passed to the checkbox group.
+     */
+    value,
+    /**
+     * Changes the current value, should be passed to the property `onChange` of the checkbox group.
+     */
+    setValue,
+    /**
+     * A function to render a unique key for an option. Should be passed to the property `renderKey` of the checkbox group.
+     */
+    renderKey,
+    /**
+     * A function that returns true if the option is filtered out, but checked.
+     * @param option the option to check.
+     * @returns true if the option was filtered out, but is checked; false otherwise.
+     */
+    isUnfilteredButChecked,
+    /**
+     * True if all options showing are selected, false otherwise.
+     */
+    isAllSelected: value.length === options.length,
+  }
+}

package/src/utils/css.ts

@@ -1,119 +1,119 @@
-import { ColorKey, listToClass, theme } from '@stack-spot/portal-theme'
-import { SpacingKey } from '@stack-spot/portal-theme/dist/definition'
-import { isNil, omit, omitBy } from 'lodash'
-import { TextAppearance, WithStyleShortcuts } from '../types'
-
-export function colorNameToColorVariable(name: ColorKey): string {
-  return `var(--${name.replaceAll('.', '-')})`
-}
-
-export function applyColor(style: React.CSSProperties | undefined, color: ColorKey | undefined) {
-  return color ? { ...style, color: colorNameToColorVariable(color) } : style
-}
-
-export function textAppearanceToClass(appearance: TextAppearance): string {
-  return `text-${appearance}`
-}
-
-export function applyTextAppearance(className: string | undefined, appearance: TextAppearance | undefined) {
-  return listToClass([className, appearance ? textAppearanceToClass(appearance) : undefined])
-}
-
-export function applyCSSVariable(style: React.CSSProperties | undefined, name: string, value: any) {
-  if (isNil(value)) return style
-  return { ...style, [`--${name}`]: `${value}` } as React.CSSProperties
-}
-
-export function applyCSSVariables(style: React.CSSProperties | undefined, vars: ({ name: string, value: any } | '' | false | undefined)[]) {
-  const newStyle = { ...style }
-  for (const variable of vars) {
-    if (!variable) continue
-    (newStyle as any)[`--${variable.name}`] = variable.value
-  }
-  return newStyle as React.CSSProperties
-}
-
-function spacingToStyle(spacing: SpacingKey | SpacingKey[] | string | undefined) {
-  if (typeof spacing === 'string') return spacing
-  if (typeof spacing === 'number') return theme.spacing[spacing]
-  return spacing?.map(s => theme.spacing[s]).join(' ')
-}
-
-export function getStyleFromProps({
-  bg,
-  fg,
-  border,
-  radius,
-  justifyContent,
-  alignItems,
-  flex,
-  gap,
-  m,
-  mt,
-  mb,
-  ml,
-  mr,
-  p,
-  pt,
-  pb,
-  pl,
-  pr,
-  w,
-  h,
-}: WithStyleShortcuts): React.CSSProperties {
-  const [bgColor, bgLevel] = bg?.split('.') ?? []
-  const [fgColor, fgLevel] = fg?.split('.') ?? []
-  const [borderColor, borderLevel] = border?.split('.') ?? []
-  const borderColorVar = (theme.color as any)[borderColor]?.[borderLevel]
-  const newStyle: React.CSSProperties =  {
-    backgroundColor: (theme.color as any)[bgColor]?.[bgLevel],
-    color: (theme.color as any)[fgColor]?.[fgLevel],
-    border: borderColorVar ? `1px solid ${borderColorVar}` : undefined,
-    borderRadius: radius ? theme.radius[radius] : undefined,
-    justifyContent,
-    alignItems,
-    flex,
-    gap,
-    margin: spacingToStyle(m),
-    marginTop: spacingToStyle(mt),
-    marginBottom: spacingToStyle(mb),
-    marginLeft: spacingToStyle(ml),
-    marginRight: spacingToStyle(mr),
-    padding: spacingToStyle(p),
-    paddingTop: spacingToStyle(pt),
-    paddingBottom: spacingToStyle(pb),
-    paddingLeft: spacingToStyle(pl),
-    paddingRight: spacingToStyle(pr),
-    width: w,
-    height: h,
-  }
-  return omitBy(newStyle, v => v === undefined)
-}
-
-export function applyStyles({ style, ...props }: WithStyleShortcuts & Record<string, any>) {
-  const styleShortcutKeys = [
-    'bg', 'fg', 'border', 'radius', 'justifyContent', 'alignItems', 'flex', 'gap', 'm', 'mt', 'mb', 'ml', 'mr', 'p', 'pt', 'pb', 'pl',
-    'pr', 'w', 'h',
-  ]
-  const newStyle = getStyleFromProps(props)
-  return { style: { ...newStyle, ...style }, ...omit(props, styleShortcutKeys) }
-}
-
-// AI generated
-export function styleObjectToCssString(styleObject: React.CSSProperties = {}) {
-  return Object.entries(styleObject)
-    .map(([property, value]) => {
-      // Convert camelCase to kebab-case
-      const cssProperty = property.replace(/([A-Z])/g, '-$1').toLowerCase()
-
-      // Append 'px' to numeric values for common dimension properties
-      const cssValue =
-        typeof value === 'number' &&
-        !['zIndex', 'opacity', 'fontWeight'].includes(property)
-          ? `${value}px`
-          : value
-
-      return `${cssProperty}: ${cssValue}`
-    })
-    .join('; ')
-}
+import { ColorKey, listToClass, theme } from '@stack-spot/portal-theme'
+import { SpacingKey } from '@stack-spot/portal-theme/dist/definition'
+import { isNil, omit, omitBy } from 'lodash'
+import { TextAppearance, WithStyleShortcuts } from '../types'
+
+export function colorNameToColorVariable(name: ColorKey): string {
+  return `var(--${name.replaceAll('.', '-')})`
+}
+
+export function applyColor(style: React.CSSProperties | undefined, color: ColorKey | undefined) {
+  return color ? { ...style, color: colorNameToColorVariable(color) } : style
+}
+
+export function textAppearanceToClass(appearance: TextAppearance): string {
+  return `text-${appearance}`
+}
+
+export function applyTextAppearance(className: string | undefined, appearance: TextAppearance | undefined) {
+  return listToClass([className, appearance ? textAppearanceToClass(appearance) : undefined])
+}
+
+export function applyCSSVariable(style: React.CSSProperties | undefined, name: string, value: any) {
+  if (isNil(value)) return style
+  return { ...style, [`--${name}`]: `${value}` } as React.CSSProperties
+}
+
+export function applyCSSVariables(style: React.CSSProperties | undefined, vars: ({ name: string, value: any } | '' | false | undefined)[]) {
+  const newStyle = { ...style }
+  for (const variable of vars) {
+    if (!variable) continue
+    (newStyle as any)[`--${variable.name}`] = variable.value
+  }
+  return newStyle as React.CSSProperties
+}
+
+function spacingToStyle(spacing: SpacingKey | SpacingKey[] | string | undefined) {
+  if (typeof spacing === 'string') return spacing
+  if (typeof spacing === 'number') return theme.spacing[spacing]
+  return spacing?.map(s => theme.spacing[s]).join(' ')
+}
+
+export function getStyleFromProps({
+  bg,
+  fg,
+  border,
+  radius,
+  justifyContent,
+  alignItems,
+  flex,
+  gap,
+  m,
+  mt,
+  mb,
+  ml,
+  mr,
+  p,
+  pt,
+  pb,
+  pl,
+  pr,
+  w,
+  h,
+}: WithStyleShortcuts): React.CSSProperties {
+  const [bgColor, bgLevel] = bg?.split('.') ?? []
+  const [fgColor, fgLevel] = fg?.split('.') ?? []
+  const [borderColor, borderLevel] = border?.split('.') ?? []
+  const borderColorVar = (theme.color as any)[borderColor]?.[borderLevel]
+  const newStyle: React.CSSProperties =  {
+    backgroundColor: (theme.color as any)[bgColor]?.[bgLevel],
+    color: (theme.color as any)[fgColor]?.[fgLevel],
+    border: borderColorVar ? `1px solid ${borderColorVar}` : undefined,
+    borderRadius: radius ? theme.radius[radius] : undefined,
+    justifyContent,
+    alignItems,
+    flex,
+    gap,
+    margin: spacingToStyle(m),
+    marginTop: spacingToStyle(mt),
+    marginBottom: spacingToStyle(mb),
+    marginLeft: spacingToStyle(ml),
+    marginRight: spacingToStyle(mr),
+    padding: spacingToStyle(p),
+    paddingTop: spacingToStyle(pt),
+    paddingBottom: spacingToStyle(pb),
+    paddingLeft: spacingToStyle(pl),
+    paddingRight: spacingToStyle(pr),
+    width: w,
+    height: h,
+  }
+  return omitBy(newStyle, v => v === undefined)
+}
+
+export function applyStyles({ style, ...props }: WithStyleShortcuts & Record<string, any>) {
+  const styleShortcutKeys = [
+    'bg', 'fg', 'border', 'radius', 'justifyContent', 'alignItems', 'flex', 'gap', 'm', 'mt', 'mb', 'ml', 'mr', 'p', 'pt', 'pb', 'pl',
+    'pr', 'w', 'h',
+  ]
+  const newStyle = getStyleFromProps(props)
+  return { style: { ...newStyle, ...style }, ...omit(props, styleShortcutKeys) }
+}
+
+// AI generated
+export function styleObjectToCssString(styleObject: React.CSSProperties = {}) {
+  return Object.entries(styleObject)
+    .map(([property, value]) => {
+      // Convert camelCase to kebab-case
+      const cssProperty = property.replace(/([A-Z])/g, '-$1').toLowerCase()
+
+      // Append 'px' to numeric values for common dimension properties
+      const cssValue =
+        typeof value === 'number' &&
+        !['zIndex', 'opacity', 'fontWeight', 'flex', 'flexGrow', 'flexShrink', 'flexBasis'].includes(property)
+          ? `${value}px`
+          : value
+
+      return `${cssProperty}: ${cssValue}`
+    })
+    .join('; ')
+}