@stack-spot/portal-components 2.26.0 → 2.27.0

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

@@ -1,85 +1,85 @@
-import { useCallback } from 'react'
-import { CustomSelect } from './CustomSelect'
-import { DetailedLabel, DetailedSelectProps, GenericAccessibleLabel, KeyOfType } from './types'
-import { parseLabel } from './utils'
-
-function getOptionAsLabel<
-  Option,
-  T extends KeyOfType<Option, string> | ((o: NonNullable<Option>) => DetailedLabel)
->(
-  option: Option,
-  renderer: T | undefined,
-): GenericAccessibleLabel {
-  let result: DetailedLabel | undefined
-  if (typeof renderer === 'function') result = option ? renderer(option) : undefined
-  else if (typeof renderer === 'string') result = option[renderer as keyof Option] as DetailedLabel
-  return parseLabel(result ?? `${option ?? ''}`)
-}
-
-/**
- * Renders a Select component using the Citric Design System.
- * 
- * The styled version of the select component is rendered on top of the default select from the browser. Visual users will use the Citric
- * version of a Select, but blind users, who interacts with the keyboard, will use the default browser select instead, which is already
- * highly optimized for accessibility.
- * 
- * The DetailedSelect lets you set an image, a title and a description for each option. To do so, use the prop `renderLabel` and
- * `emptyOption`. The accessible string for each option will always be `option.title: option.description`.
- * 
- * To use more customizable labels, check the `CustomSelect`. To use more simple labels (just strings) use `Select`.
- * 
- * The DetailedSelect expects a {@link DetailedLabel} to create labels.
- * 
- * Tips:
- * - This is a controlled field. You can't use it any other way. If you're using it with react-hook-form, you need to wrap it under the
- * component `<Controller>` from the same library.
- * - `value` is required and must be of the same type of an item of the array of options. `value` is only optional if `emptyOption` is
- * provided, in this case, an empty option is rendered and the value is undefined when it's selected.
- * - A consequence of the previous rule is that you can't have an empty selection if you don't set a value for `emptyOption`. This
- * component must work exactly like the browser's `select`, so this behavior is intended.
- * - If `renderLabel` or `renderValue` are not provided, this will use the `toString` method of the object to set the option's title.
- * 
- * @example
- * options as a string array
- * ```
- * const options = ['option 1', 'option 2', 'option 3']
- * 
- * function renderDetailedLabel(option: string) {
- *   return {
- *     title: option,
- *     description: 'my description',
- *     image: <img src="/my-image.png" />,
- *  }
- * }
- * 
- * const MyComponent = {
- *   const [value, setValue] = useState(options[0])
- *   return <DetailedSelect options={options} value={value} onChange={setValue} renderLabel={renderDetailedLabel} />
- * }
- * ```
- * @example
- * options as an object array
- * ```
- * const options = [{ id: 1, name: 'John', age: 34 }, { id: 2, name: 'Marcia', age: 28 }, { id: 3, name: 'Angeline', age: 58 }]
- * 
- * function renderDetailedLabel(option: (typeof options)[number]) {
- *   return {
- *     title: option.name,
- *     description: `${option.age} years old`,
- *     image: <img src="/my-image.png" />,
- *   }
- * }
- * 
- * const MyComponent = {
- *   const [value, setValue] = useState(options[0])
- *   // below, renderValue could be `o => o.id`
- *   return <DetailedSelect options={options} value={value} onChange={setValue} renderValue="id" renderLabel={renderDetailedLabel} />
- * }
- * ```
- * @param props the component props: {@link DetailedSelectProps}.
- */
-export function DetailedSelect<T>({ renderLabel, emptyOption, ...props }: DetailedSelectProps<T>) {
-  const renderLabelRef = useCallback((option: T) => getOptionAsLabel(option, renderLabel), [])
-  // @ts-ignore the following usage is correct, Typescript is getting confused because it doesn't know if `emptyOption` is undefined or not.
-  return <CustomSelect renderLabel={renderLabelRef} emptyOption={emptyOption ? parseLabel(emptyOption) : undefined} {...props} />
-}
+import { useCallback } from 'react'
+import { CustomSelect } from './CustomSelect'
+import { DetailedLabel, DetailedSelectProps, GenericAccessibleLabel, KeyOfType } from './types'
+import { parseLabel } from './utils'
+
+function getOptionAsLabel<
+  Option,
+  T extends KeyOfType<Option, string> | ((o: NonNullable<Option>) => DetailedLabel)
+>(
+  option: Option,
+  renderer: T | undefined,
+): GenericAccessibleLabel {
+  let result: DetailedLabel | undefined
+  if (typeof renderer === 'function') result = option ? renderer(option) : undefined
+  else if (typeof renderer === 'string') result = option[renderer as keyof Option] as DetailedLabel
+  return parseLabel(result ?? `${option ?? ''}`)
+}
+
+/**
+ * Renders a Select component using the Citric Design System.
+ * 
+ * The styled version of the select component is rendered on top of the default select from the browser. Visual users will use the Citric
+ * version of a Select, but blind users, who interacts with the keyboard, will use the default browser select instead, which is already
+ * highly optimized for accessibility.
+ * 
+ * The DetailedSelect lets you set an image, a title and a description for each option. To do so, use the prop `renderLabel` and
+ * `emptyOption`. The accessible string for each option will always be `option.title: option.description`.
+ * 
+ * To use more customizable labels, check the `CustomSelect`. To use more simple labels (just strings) use `Select`.
+ * 
+ * The DetailedSelect expects a {@link DetailedLabel} to create labels.
+ * 
+ * Tips:
+ * - This is a controlled field. You can't use it any other way. If you're using it with react-hook-form, you need to wrap it under the
+ * component `<Controller>` from the same library.
+ * - `value` is required and must be of the same type of an item of the array of options. `value` is only optional if `emptyOption` is
+ * provided, in this case, an empty option is rendered and the value is undefined when it's selected.
+ * - A consequence of the previous rule is that you can't have an empty selection if you don't set a value for `emptyOption`. This
+ * component must work exactly like the browser's `select`, so this behavior is intended.
+ * - If `renderLabel` or `renderValue` are not provided, this will use the `toString` method of the object to set the option's title.
+ * 
+ * @example
+ * options as a string array
+ * ```
+ * const options = ['option 1', 'option 2', 'option 3']
+ * 
+ * function renderDetailedLabel(option: string) {
+ *   return {
+ *     title: option,
+ *     description: 'my description',
+ *     image: <img src="/my-image.png" />,
+ *  }
+ * }
+ * 
+ * const MyComponent = {
+ *   const [value, setValue] = useState(options[0])
+ *   return <DetailedSelect options={options} value={value} onChange={setValue} renderLabel={renderDetailedLabel} />
+ * }
+ * ```
+ * @example
+ * options as an object array
+ * ```
+ * const options = [{ id: 1, name: 'John', age: 34 }, { id: 2, name: 'Marcia', age: 28 }, { id: 3, name: 'Angeline', age: 58 }]
+ * 
+ * function renderDetailedLabel(option: (typeof options)[number]) {
+ *   return {
+ *     title: option.name,
+ *     description: `${option.age} years old`,
+ *     image: <img src="/my-image.png" />,
+ *   }
+ * }
+ * 
+ * const MyComponent = {
+ *   const [value, setValue] = useState(options[0])
+ *   // below, renderValue could be `o => o.id`
+ *   return <DetailedSelect options={options} value={value} onChange={setValue} renderValue="id" renderLabel={renderDetailedLabel} />
+ * }
+ * ```
+ * @param props the component props: {@link DetailedSelectProps}.
+ */
+export function DetailedSelect<T>({ renderLabel, emptyOption, ...props }: DetailedSelectProps<T>) {
+  const renderLabelRef = useCallback((option: T) => getOptionAsLabel(option, renderLabel), [])
+  // @ts-ignore the following usage is correct, Typescript is getting confused because it doesn't know if `emptyOption` is undefined or not.
+  return <CustomSelect renderLabel={renderLabelRef} emptyOption={emptyOption ? parseLabel(emptyOption) : undefined} {...props} />
+}

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

@@ -1,67 +1,67 @@
-import { useCallback } from 'react'
-import { CustomSelect } from './CustomSelect'
-import { GenericAccessibleLabel, KeyOfType, SelectProps } from './types'
-import { parseLabel } from './utils'
-
-function getOptionAsLabel<
-  Option,
-  T extends KeyOfType<Option, string> | ((o: NonNullable<Option>) => string)
->(
-  option: Option,
-  renderer: T | undefined,
-): GenericAccessibleLabel {
-  let result: string | undefined
-  if (typeof renderer === 'function') result = option ? renderer(option) : undefined
-  else if (typeof renderer === 'string') result = option[renderer as keyof Option] as string
-  return parseLabel(result ?? `${option ?? ''}`)
-}
-
-/**
- * Renders a Select component using the Citric Design System.
- * 
- * The styled version of the select component is rendered on top of the default select from the browser. Visual users will use the Citric
- * version of a Select, but blind users, who interacts with the keyboard, will use the default browser select instead, which is already
- * highly optimized for accessibility.
- * 
- * The Select component renders each option as a string. To use more customizable labels, check the `DetailedSelect` and `CustomSelect`
- * components.
- * 
- * The Select component expects plain strings to create labels.
- * 
- * Tips:
- * - This is a controlled field. You can't use it any other way. If you're using it with react-hook-form, you need to wrap it under the
- * component `<Controller>` from the same library.
- * - `value` is required and must be of the same type of an item of the array of options. `value` is only optional if `emptyOption` is
- * provided, in this case, an empty option is rendered and the value is undefined when it's selected.
- * - A consequence of the previous rule is that you can't have an empty selection if you don't set a value for `emptyOption`. This
- * component must work exactly like the browser's `select`, so this behavior is intended.
- * - If `renderLabel` or `renderValue` are not provided, this will use the `toString` method of the object.
- * 
- * @example
- * options as a string array
- * ```
- * const options = ['option 1', 'option 2', 'option 3']
- * 
- * const MyComponent = {
- *   const [value, setValue] = useState(options[0])
- *   return <Select options={options} value={value} onChange={setValue} />
- * }
- * ```
- * @example
- * options as an object array
- * ```
- * const options = [{ id: 1, name: 'John', age: 34 }, { id: 2, name: 'Marcia', age: 28 }, { id: 3, name: 'Angeline', age: 58 }]
- * 
- * const MyComponent = {
- *   const [value, setValue] = useState(options[0])
- *   // below, renderValue could be `o => o.id` and renderLabel `o => o.name`.
- *   return <Select options={options} value={value} onChange={setValue} renderValue="id" renderLabel="name" />
- * }
- * ```
- * @param props the component props: {@link CustomSelectProps}.
- */
-export function Select<T>({ renderLabel, emptyOption, ...props }: SelectProps<T>) {
-  const renderLabelRef = useCallback((option: T) => getOptionAsLabel(option, renderLabel), [])
-  // @ts-ignore the following usage is correct, Typescript is getting confused because it doesn't know if `emptyOption` is undefined or not.
-  return <CustomSelect renderLabel={renderLabelRef} emptyOption={emptyOption ? parseLabel(emptyOption) : undefined} {...props} />
-}
+import { useCallback } from 'react'
+import { CustomSelect } from './CustomSelect'
+import { GenericAccessibleLabel, KeyOfType, SelectProps } from './types'
+import { parseLabel } from './utils'
+
+function getOptionAsLabel<
+  Option,
+  T extends KeyOfType<Option, string> | ((o: NonNullable<Option>) => string)
+>(
+  option: Option,
+  renderer: T | undefined,
+): GenericAccessibleLabel {
+  let result: string | undefined
+  if (typeof renderer === 'function') result = option ? renderer(option) : undefined
+  else if (typeof renderer === 'string') result = option[renderer as keyof Option] as string
+  return parseLabel(result ?? `${option ?? ''}`)
+}
+
+/**
+ * Renders a Select component using the Citric Design System.
+ * 
+ * The styled version of the select component is rendered on top of the default select from the browser. Visual users will use the Citric
+ * version of a Select, but blind users, who interacts with the keyboard, will use the default browser select instead, which is already
+ * highly optimized for accessibility.
+ * 
+ * The Select component renders each option as a string. To use more customizable labels, check the `DetailedSelect` and `CustomSelect`
+ * components.
+ * 
+ * The Select component expects plain strings to create labels.
+ * 
+ * Tips:
+ * - This is a controlled field. You can't use it any other way. If you're using it with react-hook-form, you need to wrap it under the
+ * component `<Controller>` from the same library.
+ * - `value` is required and must be of the same type of an item of the array of options. `value` is only optional if `emptyOption` is
+ * provided, in this case, an empty option is rendered and the value is undefined when it's selected.
+ * - A consequence of the previous rule is that you can't have an empty selection if you don't set a value for `emptyOption`. This
+ * component must work exactly like the browser's `select`, so this behavior is intended.
+ * - If `renderLabel` or `renderValue` are not provided, this will use the `toString` method of the object.
+ * 
+ * @example
+ * options as a string array
+ * ```
+ * const options = ['option 1', 'option 2', 'option 3']
+ * 
+ * const MyComponent = {
+ *   const [value, setValue] = useState(options[0])
+ *   return <Select options={options} value={value} onChange={setValue} />
+ * }
+ * ```
+ * @example
+ * options as an object array
+ * ```
+ * const options = [{ id: 1, name: 'John', age: 34 }, { id: 2, name: 'Marcia', age: 28 }, { id: 3, name: 'Angeline', age: 58 }]
+ * 
+ * const MyComponent = {
+ *   const [value, setValue] = useState(options[0])
+ *   // below, renderValue could be `o => o.id` and renderLabel `o => o.name`.
+ *   return <Select options={options} value={value} onChange={setValue} renderValue="id" renderLabel="name" />
+ * }
+ * ```
+ * @param props the component props: {@link CustomSelectProps}.
+ */
+export function Select<T>({ renderLabel, emptyOption, ...props }: SelectProps<T>) {
+  const renderLabelRef = useCallback((option: T) => getOptionAsLabel(option, renderLabel), [])
+  // @ts-ignore the following usage is correct, Typescript is getting confused because it doesn't know if `emptyOption` is undefined or not.
+  return <CustomSelect renderLabel={renderLabelRef} emptyOption={emptyOption ? parseLabel(emptyOption) : undefined} {...props} />
+}

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

@@ -1,4 +1,4 @@
-export { CustomSelect } from './CustomSelect'
-export { DetailedSelect } from './DetailedSelect'
-export { Select } from './Select'
-export * from './types'
+export { CustomSelect } from './CustomSelect'
+export { DetailedSelect } from './DetailedSelect'
+export { Select } from './Select'
+export * from './types'

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

@@ -1,165 +1,165 @@
-import { theme } from '@stack-spot/portal-theme'
-import { styled } from 'styled-components'
-
-export const SelectBox = styled.div<{ $maxItems: number, $inputHeight: string }>`
-  position: relative;
-  // controls the height of component when it's closed
-  height: ${({ $inputHeight }) => $inputHeight};
-
-  select {
-    border: none;
-    opacity: 0;
-    pointer-events: none;
-    // prevents visual overflow
-    max-width: 10px;
-  }
-  
-  .fake-select {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    border-radius: 0.25rem;
-    display: flex;
-    flex-direction: column;
-    border: 1px solid ${theme.color.light[600]};
-    transition: border-color 0.3s, box-shadow 0.3s;
-    background-color: ${theme.color.light[300]};
-
-    /* lets the z-index unset until the animation on the height ends. */
-    &:not(.open) {
-      z-index: unset;
-      animation: 0.3s z-index-animation;
-      @keyframes z-index-animation {
-        0% {
-          z-index: 1;
-        }
-        99% {
-          z-index: 1;
-        }
-        100% {
-          z-index: unset;
-        }
-      }
-    }
-
-    &.disabled {
-      background-color: ${theme.color.light[500]};
-      color: ${theme.color.light[700]};
-      .current-value {
-        cursor: not-allowed;
-      }
-    }
-
-    .arrow {
-      transition: transform ease-in-out 0.3s;
-    }
-
-    &.focused, &.open {
-      border: 1px solid ${theme.color.primary[500]};
-      box-shadow: 0 0 0 1px ${theme.color.primary[500]};
-    }
-
-    &.open {
-      z-index: 1;
-      .arrow {
-        transform: rotate(180deg);
-      }
-      .options {
-        /* lets the overflow be hidden until the animation on the height ends. */
-        overflow-y: auto;
-        animation: 0.3s overflow-animation;
-        @keyframes overflow-animation {
-          0% {
-            overflow-y: hidden;
-          }
-          99% {
-            overflow-y: hidden;
-          }
-          100% {
-            overflow-y: auto;
-          }
-        }
-      }
-    }
-
-    .current-value {
-      height: calc(100% - 2px);
-      display: flex;
-      flex-direction: row;
-      padding: 8px;
-      justify-content: space-between;
-      align-items: center;
-      cursor: pointer;
-    }
-
-    .clipped-text {
-      text-overflow: ellipsis;
-      width: 100%;
-      overflow: hidden;
-      white-space: nowrap;
-    }
-
-    .options {
-      list-style: none;
-      padding: 0;
-      margin: 0;
-      overflow-y: hidden;
-      transition: height ease-in-out 0.3s;
-      scrollbar-gutter: stable;
-
-      li {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        padding: 9px;
-        border-top: 1px solid ${theme.color.light[600]};
-        cursor: pointer;
-        transition: background-color 0.2s;
-        &:hover, &:focus {
-          background-color: ${theme.color.light[500]};
-        }
-        outline: none;
-      }
-
-      .detailed {
-        display: flex;
-        flex-direction: row;
-        gap: 10px;
-        align-items: center;
-        .image {
-          width: 40px;
-          height: 40px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          flex-shrink: 0;
-          overflow: hidden;
-          & > * {
-            max-width: 100%;
-            max-height: 100%;
-          }
-        }
-        .text-content {
-          display: flex;
-          flex-direction: column;
-          gap: 5px;
-          .description {
-            color: ${theme.color.light[700]};
-          }
-        }
-      }
-
-      /* the list is inert when, and only when, its having its height measured */
-      &[inert] {
-        opacity: 0;
-        pointer-events: none;
-        position: absolute;
-        /* we don't want to have the height measured over the height of $maxItems */
-        li:nth-child(n+${({ $maxItems }) => $maxItems + 1}) {
-          display: none;
-        }
-      }
-    }
-  }
-`
+import { theme } from '@stack-spot/portal-theme'
+import { styled } from 'styled-components'
+
+export const SelectBox = styled.div<{ $maxItems: number, $inputHeight: string }>`
+  position: relative;
+  // controls the height of component when it's closed
+  height: ${({ $inputHeight }) => $inputHeight};
+
+  select {
+    border: none;
+    opacity: 0;
+    pointer-events: none;
+    // prevents visual overflow
+    max-width: 10px;
+  }
+  
+  .fake-select {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    border-radius: 0.25rem;
+    display: flex;
+    flex-direction: column;
+    border: 1px solid ${theme.color.light[600]};
+    transition: border-color 0.3s, box-shadow 0.3s;
+    background-color: ${theme.color.light[300]};
+
+    /* lets the z-index unset until the animation on the height ends. */
+    &:not(.open) {
+      z-index: unset;
+      animation: 0.3s z-index-animation;
+      @keyframes z-index-animation {
+        0% {
+          z-index: 1;
+        }
+        99% {
+          z-index: 1;
+        }
+        100% {
+          z-index: unset;
+        }
+      }
+    }
+
+    &.disabled {
+      background-color: ${theme.color.light[500]};
+      color: ${theme.color.light[700]};
+      .current-value {
+        cursor: not-allowed;
+      }
+    }
+
+    .arrow {
+      transition: transform ease-in-out 0.3s;
+    }
+
+    &.focused, &.open {
+      border: 1px solid ${theme.color.primary[500]};
+      box-shadow: 0 0 0 1px ${theme.color.primary[500]};
+    }
+
+    &.open {
+      z-index: 1;
+      .arrow {
+        transform: rotate(180deg);
+      }
+      .options {
+        /* lets the overflow be hidden until the animation on the height ends. */
+        overflow-y: auto;
+        animation: 0.3s overflow-animation;
+        @keyframes overflow-animation {
+          0% {
+            overflow-y: hidden;
+          }
+          99% {
+            overflow-y: hidden;
+          }
+          100% {
+            overflow-y: auto;
+          }
+        }
+      }
+    }
+
+    .current-value {
+      height: calc(100% - 2px);
+      display: flex;
+      flex-direction: row;
+      padding: 8px;
+      justify-content: space-between;
+      align-items: center;
+      cursor: pointer;
+    }
+
+    .clipped-text {
+      text-overflow: ellipsis;
+      width: 100%;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+
+    .options {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+      overflow-y: hidden;
+      transition: height ease-in-out 0.3s;
+      scrollbar-gutter: stable;
+
+      li {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        padding: 9px;
+        border-top: 1px solid ${theme.color.light[600]};
+        cursor: pointer;
+        transition: background-color 0.2s;
+        &:hover, &:focus {
+          background-color: ${theme.color.light[500]};
+        }
+        outline: none;
+      }
+
+      .detailed {
+        display: flex;
+        flex-direction: row;
+        gap: 10px;
+        align-items: center;
+        .image {
+          width: 40px;
+          height: 40px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex-shrink: 0;
+          overflow: hidden;
+          & > * {
+            max-width: 100%;
+            max-height: 100%;
+          }
+        }
+        .text-content {
+          display: flex;
+          flex-direction: column;
+          gap: 5px;
+          .description {
+            color: ${theme.color.light[700]};
+          }
+        }
+      }
+
+      /* the list is inert when, and only when, its having its height measured */
+      &[inert] {
+        opacity: 0;
+        pointer-events: none;
+        position: absolute;
+        /* we don't want to have the height measured over the height of $maxItems */
+        li:nth-child(n+${({ $maxItems }) => $maxItems + 1}) {
+          display: none;
+        }
+      }
+    }
+  }
+`