@stack-spot/portal-components 2.26.0 → 2.27.0

package/src/components/form/Select/types.ts

@@ -1,112 +1,112 @@
-import { InputHTMLAttributes } from 'react'
-
-export interface GenericAccessibleLabel {
-  /**
-   * This is how the option's label will be rendered inside the dropdown list. This can be any React element.
-   * 
-   * Attention: be careful, this should not have any important information that can't be represented through text (accessibility).
-   */
-  option: React.ReactElement,
-  /**
-   * This is a required text representation of the option. This is used for accessibility.
-   */
-  text: string,
-  /**
-   * This is how the option's label will be rendered as the select current value.
-   * 
-   * If not provided, will be rendered using `option`.
-   */
-  selected?: React.ReactElement,
-}
-
-export interface DetailedLabel {
-  title: string,
-  description?: string,
-  image?: React.ReactElement,
-}
-
-export type AccessibleLabel = string | DetailedLabel | GenericAccessibleLabel
-
-type FilterObjectByValueType<T, Type> = { [K in keyof T as T[K] extends Type ? K : never]: T[K] }
-export type KeyOfType<Data, Type> = Data extends Record<string, any> ? keyof FilterObjectByValueType<Data, Type> : never
-
-interface BaseSelectProps<
-  Option, Label extends AccessibleLabel
-> extends Omit<InputHTMLAttributes<HTMLSelectElement>, 'value' | 'onChange'> {
-  /**
-   * The current value.
-   */
-  value: Option | undefined,
-  /**
-   * The label for the empty option. The empty option sets the value to undefined.
-   * 
-   * If this is not set, there won't be an empty option for this select.
-   */
-  emptyOption?: Label,
-  /**
-   * The options to render in this selection menu.
-   */
-  options: Option[] | undefined, // this may be undefined if isLoading is true
-  /**
-   * Provides the value of each option. This can be either a key of the option object or a function that receives the option and returns
-   * the value.
-   * 
-   * This is required if the options don't have a relevant value returned by `toString()`.
-   * 
-   * @example
-   * - `'id'`
-   * - `(option) => option.id`
-   */
-  renderValue?: KeyOfType<Option, string> | ((item: NonNullable<Option>) => string),
-  /**
-   * Provides the label of each option. This can be either a key of the option object or a function that receives the option and returns
-   * the label.
-   * 
-   * This is required if the options don't have a relevant value returned by `toString()`.
-   * 
-   * @example
-   * - `'name'`
-   * - `(option) => option.name`
-   */
-  renderLabel?: KeyOfType<Option, Label> | ((item: NonNullable<Option>) => Label),
-  /**
-   * Called when the value changes.
-   * @param value the new value.
-   */
-  onChange: (value: Option | undefined) => void,
-  /**
-   * The maximum number of items before showing a vertical scroll bar.
-   * @default 6
-   */
-  maxItems?: number,
-  /**
-   * Whether or not the options are being loaded. The field will become disabled while isLoading is true.
-   */
-  isLoading?: boolean,
-}
-
-interface OptionalSelectProps<Option, Label extends AccessibleLabel> extends BaseSelectProps<Option, Label> {
-  emptyOption: Label,
-}
-
-interface RequiredSelectProps<Option, Label extends AccessibleLabel> extends Omit<BaseSelectProps<Option, Label>, 'onChange'> {
-  emptyOption?: undefined,
-  value: Option | undefined, // this may be undefined if isLoading is true
-  onChange: (value: Option) => void,
-}
-
-export type SelectProps<Option> = OptionalSelectProps<Option, string> | RequiredSelectProps<Option, string>
-export type DetailedSelectProps<Option> = OptionalSelectProps<Option, DetailedLabel> | RequiredSelectProps<Option, DetailedLabel>
-export type CustomSelectProps<Option> = (
-  OptionalSelectProps<Option, GenericAccessibleLabel>
-  | RequiredSelectProps<Option, GenericAccessibleLabel>
-) & {
-  /**
-   * Controls the height of component when it's closed.
-   * 
-   * Developer note: it would be nice to automatically calculate this instead of expecting a prop.
-   * 
-   * @default '42px'
-   */
-  height?: string,
-}
+import { InputHTMLAttributes } from 'react'
+
+export interface GenericAccessibleLabel {
+  /**
+   * This is how the option's label will be rendered inside the dropdown list. This can be any React element.
+   * 
+   * Attention: be careful, this should not have any important information that can't be represented through text (accessibility).
+   */
+  option: React.ReactElement,
+  /**
+   * This is a required text representation of the option. This is used for accessibility.
+   */
+  text: string,
+  /**
+   * This is how the option's label will be rendered as the select current value.
+   * 
+   * If not provided, will be rendered using `option`.
+   */
+  selected?: React.ReactElement,
+}
+
+export interface DetailedLabel {
+  title: string,
+  description?: string,
+  image?: React.ReactElement,
+}
+
+export type AccessibleLabel = string | DetailedLabel | GenericAccessibleLabel
+
+type FilterObjectByValueType<T, Type> = { [K in keyof T as T[K] extends Type ? K : never]: T[K] }
+export type KeyOfType<Data, Type> = Data extends Record<string, any> ? keyof FilterObjectByValueType<Data, Type> : never
+
+interface BaseSelectProps<
+  Option, Label extends AccessibleLabel
+> extends Omit<InputHTMLAttributes<HTMLSelectElement>, 'value' | 'onChange'> {
+  /**
+   * The current value.
+   */
+  value: Option | undefined,
+  /**
+   * The label for the empty option. The empty option sets the value to undefined.
+   * 
+   * If this is not set, there won't be an empty option for this select.
+   */
+  emptyOption?: Label,
+  /**
+   * The options to render in this selection menu.
+   */
+  options: Option[] | undefined, // this may be undefined if isLoading is true
+  /**
+   * Provides the value of each option. This can be either a key of the option object or a function that receives the option and returns
+   * the value.
+   * 
+   * This is required if the options don't have a relevant value returned by `toString()`.
+   * 
+   * @example
+   * - `'id'`
+   * - `(option) => option.id`
+   */
+  renderValue?: KeyOfType<Option, string> | ((item: NonNullable<Option>) => string),
+  /**
+   * Provides the label of each option. This can be either a key of the option object or a function that receives the option and returns
+   * the label.
+   * 
+   * This is required if the options don't have a relevant value returned by `toString()`.
+   * 
+   * @example
+   * - `'name'`
+   * - `(option) => option.name`
+   */
+  renderLabel?: KeyOfType<Option, Label> | ((item: NonNullable<Option>) => Label),
+  /**
+   * Called when the value changes.
+   * @param value the new value.
+   */
+  onChange: (value: Option | undefined) => void,
+  /**
+   * The maximum number of items before showing a vertical scroll bar.
+   * @default 6
+   */
+  maxItems?: number,
+  /**
+   * Whether or not the options are being loaded. The field will become disabled while isLoading is true.
+   */
+  isLoading?: boolean,
+}
+
+interface OptionalSelectProps<Option, Label extends AccessibleLabel> extends BaseSelectProps<Option, Label> {
+  emptyOption: Label,
+}
+
+interface RequiredSelectProps<Option, Label extends AccessibleLabel> extends Omit<BaseSelectProps<Option, Label>, 'onChange'> {
+  emptyOption?: undefined,
+  value: Option | undefined, // this may be undefined if isLoading is true
+  onChange: (value: Option) => void,
+}
+
+export type SelectProps<Option> = OptionalSelectProps<Option, string> | RequiredSelectProps<Option, string>
+export type DetailedSelectProps<Option> = OptionalSelectProps<Option, DetailedLabel> | RequiredSelectProps<Option, DetailedLabel>
+export type CustomSelectProps<Option> = (
+  OptionalSelectProps<Option, GenericAccessibleLabel>
+  | RequiredSelectProps<Option, GenericAccessibleLabel>
+) & {
+  /**
+   * Controls the height of component when it's closed.
+   * 
+   * Developer note: it would be nice to automatically calculate this instead of expecting a prop.
+   * 
+   * @default '42px'
+   */
+  height?: string,
+}

package/src/components/form/Select/utils.tsx

@@ -1,28 +1,28 @@
-import { Text } from '@citric/core'
-import { AccessibleLabel, GenericAccessibleLabel } from './types'
-
-export function parseLabel(label: AccessibleLabel): GenericAccessibleLabel {
-  if (typeof label === 'string') {
-    return {
-      option: <Text>{label}</Text>,
-      text: label,
-      selected: <Text className="clipped-text">{label}</Text>,
-    }
-  }
-  if ('title' in label) {
-    return {
-      option: (
-        <div className="detailed">
-          {label.image && <div className="image">{label.image}</div>}
-          <div className="text-content">
-            <Text className="title">{label.title}</Text>
-            {label.description && <Text className="description" appearance="microtext1">{label.description}</Text>}
-          </div>
-        </div>
-      ),
-      text: `${label.title}: ${label.description}`,
-      selected: <Text className="clipped-text">{label.title}</Text>,
-    }
-  }
-  return label
-}
+import { Text } from '@citric/core'
+import { AccessibleLabel, GenericAccessibleLabel } from './types'
+
+export function parseLabel(label: AccessibleLabel): GenericAccessibleLabel {
+  if (typeof label === 'string') {
+    return {
+      option: <Text>{label}</Text>,
+      text: label,
+      selected: <Text className="clipped-text">{label}</Text>,
+    }
+  }
+  if ('title' in label) {
+    return {
+      option: (
+        <div className="detailed">
+          {label.image && <div className="image">{label.image}</div>}
+          <div className="text-content">
+            <Text className="title">{label.title}</Text>
+            {label.description && <Text className="description" appearance="microtext1">{label.description}</Text>}
+          </div>
+        </div>
+      ),
+      text: `${label.title}: ${label.description}`,
+      selected: <Text className="clipped-text">{label.title}</Text>,
+    }
+  }
+  return label
+}