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

package/src/utils/options.ts

@@ -1,9 +1,9 @@
-import { isNil } from 'lodash'
-
-export function defaultRenderLabel(option: any) {
-  return isNil(option) ? '' : `${option}`
-}
-
-export function defaultRenderKey(option: any) {
-  return ['string', 'number'].includes(typeof option) ? `${option}` : undefined
-}
+import { isNil } from 'lodash'
+
+export function defaultRenderLabel(option: any) {
+  return isNil(option) ? '' : `${option}`
+}
+
+export function defaultRenderKey(option: any) {
+  return ['string', 'number'].includes(typeof option) ? `${option}` : undefined
+}

package/src/utils/radio.ts

@@ -1,93 +1,93 @@
-import { useEffect, useMemo, useRef, useState } from 'react'
-import { defaultRenderKey } from './options'
-
-export interface RadioGroupHookParams<T, F = string> {
-  /**
-   * The initial value for the radio group.
-   */
-  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 radio 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 | undefined, previousValue: T | undefined) => void,
-}
-
-/**
- * Use this hook to easily implement filtering for a radio group.
- * @param params the parameters to create the controls.
- * @returns the checkbox controls.
- */
-export function useRadioGroupControls<T, F = string>(params: RadioGroupHookParams<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 valueKey = value ? renderKey(value) : undefined
-    const isValueFilteredOut = value && !params.applyFilter?.(filter, value)
-    const filtered = params.options.filter(o => params.applyFilter?.(filter, o))
-    return {
-      options: isValueFilteredOut ? [value, ...filtered] : filtered,
-      isUnfilteredButChecked: (o: T) => isValueFilteredOut && renderKey(o) === valueKey,
-    }
-  }, [params.options, filter])
-
-  return {
-    /**
-     * The current filter applied.
-     */
-    filter,
-    /**
-     * Apply a new filter.
-     */
-    setFilter: setFilter,
-    /**
-     * The options that should be passed to the radio group.
-     */
-    options,
-    /**
-     * The value that should be passed to the radio group.
-     */
-    value,
-    /**
-     * Changes the current value, should be passed to the property `onChange` of the radio group.
-     */
-    setValue,
-    /**
-     * A function to render a unique key for an option. Should be passed to the property `renderKey` of the radio 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,
-  }
-}
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { defaultRenderKey } from './options'
+
+export interface RadioGroupHookParams<T, F = string> {
+  /**
+   * The initial value for the radio group.
+   */
+  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 radio 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 | undefined, previousValue: T | undefined) => void,
+}
+
+/**
+ * Use this hook to easily implement filtering for a radio group.
+ * @param params the parameters to create the controls.
+ * @returns the checkbox controls.
+ */
+export function useRadioGroupControls<T, F = string>(params: RadioGroupHookParams<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 valueKey = value ? renderKey(value) : undefined
+    const isValueFilteredOut = value && !params.applyFilter?.(filter, value)
+    const filtered = params.options.filter(o => params.applyFilter?.(filter, o))
+    return {
+      options: isValueFilteredOut ? [value, ...filtered] : filtered,
+      isUnfilteredButChecked: (o: T) => isValueFilteredOut && renderKey(o) === valueKey,
+    }
+  }, [params.options, filter])
+
+  return {
+    /**
+     * The current filter applied.
+     */
+    filter,
+    /**
+     * Apply a new filter.
+     */
+    setFilter: setFilter,
+    /**
+     * The options that should be passed to the radio group.
+     */
+    options,
+    /**
+     * The value that should be passed to the radio group.
+     */
+    value,
+    /**
+     * Changes the current value, should be passed to the property `onChange` of the radio group.
+     */
+    setValue,
+    /**
+     * A function to render a unique key for an option. Should be passed to the property `renderKey` of the radio 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,
+  }
+}

package/src/utils/react.ts

@@ -1,6 +1,6 @@
-/* eslint-disable react/display-name */
-import { forwardRef } from 'react'
-
-export function withRef<T extends (...args: any[]) => any>(fc: T): T {
-  return forwardRef((props, ref) => fc({ ...props, ref })) as any
-}
+/* eslint-disable react/display-name */
+import { forwardRef } from 'react'
+
+export function withRef<T extends (...args: any[]) => any>(fc: T): T {
+  return forwardRef((props, ref) => fc({ ...props, ref })) as any
+}

package/src/utils/time.ts

@@ -1,5 +1,5 @@
-export function delay(ms: number) {
-  return new Promise<void>(resolve => {
-    setTimeout(resolve, ms)
-  })
-}
+export function delay(ms: number) {
+  return new Promise<void>(resolve => {
+    setTimeout(resolve, ms)
+  })
+}

package/tsconfig.json

@@ -1,10 +1,10 @@
-{
-  "extends": "../../tsconfig.json",
-  "include": ["src"],
-  "compilerOptions": {
-    "outDir": "dist",
-    "paths": {
-      "css/*": ["../css/*"]
-    }
-  }
-}
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src"],
+  "compilerOptions": {
+    "outDir": "dist",
+    "paths": {
+      "css/*": ["../css/*"]
+    }
+  }
+}

package/dist/components/Autocomplete/Autocomplete.d.ts

@@ -1,211 +0,0 @@
-import { ColorPaletteName, ColorSchemeName } from '@stack-spot/portal-theme';
-export interface BaseAutocompleteProps<T, Multiple extends boolean = false> {
-    /**
-     * The list of options available for selection.
-     */
-    options: T[];
-    /**
-     * The current value(s) selected.
-     * - Single selection: T | null
-     * - Multiple selection: T[]
-     */
-    value: Multiple extends true ? T[] : (T | null);
-    /**
-     * Callback fired when the value changes.
-     */
-    onChange: Multiple extends true ? (value: T[]) => void : (value: T | null) => void;
-    /**
-     * If true, enables multiple selection mode.
-     * @default false
-     */
-    multiple?: Multiple;
-    /**
-     * If true, allows the user to enter values that are not in the options list.
-     * @default false
-     */
-    freeSolo?: boolean;
-    /**
-     * If true, allows creating new options when no match is found.
-     * Shows an "Add [value]" option at the top of the list.
-     * @default false
-     */
-    creatable?: boolean;
-    /**
-     * Callback fired when a new option is created.
-     * Required when creatable is true and you want manual control.
-     */
-    onCreate?: (inputValue: string) => void;
-    /**
-     * Function to create a new option object from the input value.
-     * Required when creatable is true without onCreate and working with objects.
-     *
-     * @example
-     * ```tsx
-     * getOptionFromInput={(inputValue) => ({ id: Date.now(), name: inputValue })}
-     * ```
-     */
-    getOptionFromInput?: (inputValue: string) => T;
-    /**
-     * The input value (controlled).
-     */
-    inputValue?: string;
-    /**
-     * Callback fired when the input value changes.
-     */
-    onInputChange?: (value: string) => void;
-    /**
-     * A function to render the item label.
-     * @default "the item's toString() result."
-     */
-    renderLabel?: (option: T) => string;
-    /**
-     * A function to generate a unique key for each option.
-     */
-    renderKey?: (option: T) => string | number;
-    /**
-     * A function to render an option in the dropdown.
-     */
-    renderOption?: (option: T) => React.ReactNode;
-    /**
-     * A function to render a tag in multiple mode.
-     */
-    renderTag?: (option: T, onRemove: () => void) => React.ReactNode;
-    /**
-     * Custom filter function for options.
-     * @default filters by label includes input (case insensitive)
-     */
-    filterOptions?: (options: T[], inputValue: string) => T[];
-    /**
-     * If true, shows a loading indicator.
-     * @default false
-     */
-    loading?: boolean;
-    /**
-     * If true, the component is disabled.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Placeholder text for the input.
-     */
-    placeholder?: string;
-    /**
-     * Maximum height for the dropdown panel in pixels.
-     */
-    maxHeight?: number;
-    /**
-     * Maximum number of tags to show before truncating.
-     * Only applies when multiple is true.
-     */
-    maxTagsToShow?: number;
-    /**
-     * If true, automatically highlights the first option.
-     * @default false
-     */
-    autoHighlight?: boolean;
-    /**
-     * If true, clears the input value when an option is selected.
-     * Only applies when multiple is true.
-     * @default true (for multiple)
-     */
-    clearOnSelect?: boolean;
-    /**
-     * If true, the popup will open on input focus.
-     * @default true
-     */
-    openOnFocus?: boolean;
-    /**
-     * Callback fired when an option is selected (before onChange).
-     */
-    onSelect?: (option: T | null) => void;
-    /**
-     * Text to display when no options are available.
-     */
-    noOptionsText?: string;
-    /**
-     * Text to display when loading.
-     */
-    loadingText?: string;
-    /**
-     * Callback fired when the user scrolls to the end of the options list.
-     * Useful for implementing infinite scroll/pagination.
-     *
-     * @example
-     * ```tsx
-     * <Autocomplete
-     *   options={options}
-     *   onScrollEnd={() => fetchMoreOptions()}
-     *   loading={isFetchingMore}
-     * />
-     * ```
-     */
-    onScrollEnd?: () => void;
-    /**
-     * Margin in pixels before the end of the list to trigger onScrollEnd.
-     * @default 200
-     */
-    scrollEndMargin?: number;
-    /**
-     * Color scheme for the tags (badges) in multiple mode.
-     * @example 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info'
-     */
-    tagColorScheme?: ColorSchemeName;
-    /**
-     * Color palette for the tags (badges) in multiple mode.
-     * @example 'blue' | 'green' | 'red' | 'yellow' | 'purple'
-     */
-    tagColorPalette?: ColorPaletteName;
-    /**
-     * Appearance of the tags (badges) in multiple mode.
-     * @default 'circle'
-     */
-    tagAppearance?: 'square' | 'circle';
-}
-export type AutocompleteProps<T, Multiple extends boolean = false> = Omit<React.JSX.IntrinsicElements['div'], 'ref' | 'onChange' | 'onSelect'> & BaseAutocompleteProps<T, Multiple>;
-/**
- * A combination of a text input and a dropdown that suggests options as the user types.
- * Supports both single and multiple selection modes, similar to Material-UI Autocomplete.
- *
- * @example
- * Basic usage (single selection):
- * ```tsx
- * const [value, setValue] = useState<Option | null>(null)
- *
- * <Autocomplete
- *   options={options}
- *   value={value}
- *   onChange={setValue}
- *   renderLabel={o => o.name}
- *   renderKey={o => o.id}
- * />
- * ```
- *
- * @example
- * Multiple selection with tags:
- * ```tsx
- * const [value, setValue] = useState<Option[]>([])
- *
- * <Autocomplete
- *   multiple
- *   options={options}
- *   value={value}
- *   onChange={setValue}
- *   renderLabel={o => o.name}
- *   renderKey={o => o.id}
- * />
- * ```
- *
- * @example
- * Free solo (allow custom values):
- * ```tsx
- * <Autocomplete
- *   freeSolo
- *   options={options}
- *   value={value}
- *   onChange={setValue}
- *   renderLabel={o => o.name}
- * />
- * ```
- */
-export declare const Autocomplete: <T, Multiple extends boolean = false>(props: AutocompleteProps<T, Multiple>) => React.ReactElement;
-//# sourceMappingURL=Autocomplete.d.ts.map

package/dist/components/Autocomplete/Autocomplete.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../src/components/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":"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"}