@stack-spot/portal-components 2.27.0 → 2.27.2

package/src/components/ScrollView.tsx

@@ -1,57 +1,57 @@
-import { OneOfColorSchemesWithVariants, OneOfPalettesWithVariants } from '@citric/core'
-import { getColor } from '@citric/core/dist/utils/theme'
-import { styled } from 'styled-components'
-
-type Color = OneOfColorSchemesWithVariants | OneOfPalettesWithVariants
-
-interface Props {
-  /**
-   * By default, the ScrollView scrolls in both directions
-   */
-  direction?: 'horizontal' | 'vertical' | 'both',
-  /**
-   * The color of the track in the scroll bar (background)
-   * light.400 by default
-   */
-  trackColor?: Color,
-  /**
-   * The color of the thumb in the scroll bar (foreground)
-   * light.700 by default
-   */
-  thumbColor?: Color,
-  /**
-   * `auto` to show the scroll-bar only when the content overflows. `scroll` to always show it.
-   * `auto` by default
-   */
-  scrollType?: 'auto' | 'scroll',
-}
-
-function getDirectionStyle({ direction = 'both', scrollType = 'auto' }: Props) {
-  const x = direction === 'both' || direction === 'horizontal' ? `overflow-x: ${scrollType};` : ''
-  const y = direction === 'both' || direction === 'vertical' ? `overflow-x: ${scrollType};` : ''
-  return `${x}${y}`
-}
-
-/**
- * Renders a component that provides scrolling. 
- * 
- * @param options the props for rendering the component: {@link Props}. 
- */
-
-export const ScrollView = styled.div<Props>`
-  ${getDirectionStyle}
-  &::-webkit-scrollbar {
-    width: 4px;
-    height: 4px;
-  }
-  &::-webkit-scrollbar-track {
-    background: ${({ theme, trackColor = 'light.400' }) => getColor(theme, trackColor)};
-    border-radius: 2px;
-    left: 40px;
-  }
-  &::-webkit-scrollbar-thumb,
-  &::-webkit-scrollbar-thumb:hover {
-    background: ${({ theme, thumbColor = 'light.700' }) => getColor(theme, thumbColor)};
-    border-radius: 2px;
-  }
-`
+import { OneOfColorSchemesWithVariants, OneOfPalettesWithVariants } from '@citric/core'
+import { getColor } from '@citric/core/dist/utils/theme'
+import { styled } from 'styled-components'
+
+type Color = OneOfColorSchemesWithVariants | OneOfPalettesWithVariants
+
+interface Props {
+  /**
+   * By default, the ScrollView scrolls in both directions
+   */
+  direction?: 'horizontal' | 'vertical' | 'both',
+  /**
+   * The color of the track in the scroll bar (background)
+   * light.400 by default
+   */
+  trackColor?: Color,
+  /**
+   * The color of the thumb in the scroll bar (foreground)
+   * light.700 by default
+   */
+  thumbColor?: Color,
+  /**
+   * `auto` to show the scroll-bar only when the content overflows. `scroll` to always show it.
+   * `auto` by default
+   */
+  scrollType?: 'auto' | 'scroll',
+}
+
+function getDirectionStyle({ direction = 'both', scrollType = 'auto' }: Props) {
+  const x = direction === 'both' || direction === 'horizontal' ? `overflow-x: ${scrollType};` : ''
+  const y = direction === 'both' || direction === 'vertical' ? `overflow-x: ${scrollType};` : ''
+  return `${x}${y}`
+}
+
+/**
+ * Renders a component that provides scrolling. 
+ * 
+ * @param options the props for rendering the component: {@link Props}. 
+ */
+
+export const ScrollView = styled.div<Props>`
+  ${getDirectionStyle}
+  &::-webkit-scrollbar {
+    width: 4px;
+    height: 4px;
+  }
+  &::-webkit-scrollbar-track {
+    background: ${({ theme, trackColor = 'light.400' }) => getColor(theme, trackColor)};
+    border-radius: 2px;
+    left: 40px;
+  }
+  &::-webkit-scrollbar-thumb,
+  &::-webkit-scrollbar-thumb:hover {
+    background: ${({ theme, thumbColor = 'light.700' }) => getColor(theme, thumbColor)};
+    border-radius: 2px;
+  }
+`

package/src/components/Select/BadgeItem.tsx

@@ -1,58 +1,58 @@
-import { SxProperties } from '@citric/core/dist/sx'
-import { TimesMini } from '@citric/icons'
-import { Badge, IconButton } from '@citric/ui'
-import { Dictionary, interpolate, useTranslate } from '@stack-spot/portal-translate'
-import { MouseEvent } from 'react'
-import { components, GroupBase, MultiValueProps } from 'react-select'
-import { CreatableSelectOptionType } from './types'
-
-export const BadgeItem = (props: MultiValueProps<CreatableSelectOptionType, boolean, GroupBase<any>>) => {
-  const t = useTranslate(dictionary)
-
-  const handleClick = <T extends HTMLElement>(event: MouseEvent<T>) => {
-    props.removeProps.onClick?.(event as unknown as MouseEvent<HTMLDivElement>)
-  }
-
-  return (
-    <components.MultiValue {...props}>
-      <Badge
-        appearance="square"
-        className="badge"
-        palette="cyan"
-        sx={{ mb: 2, 
-          '.badge-citric-container:not(:has(> button:first-child))': {
-            marginRight: 0,
-          },
-        } as SxProperties}
-        afterElement={
-          <components.MultiValueRemove {...props}>
-            <IconButton
-              type="button"
-              aria-label={interpolate(t.ariaLabelRemoveItemButton, props.children)}
-              colorIcon="cyan.800"
-              appearance="square"
-              onClick={(e) => {
-                e.stopPropagation()
-                handleClick(e)
-              }}
-            >
-              <TimesMini />
-            </IconButton>
-          </components.MultiValueRemove>
-        }
-      >
-        {props.children}
-      </Badge>
-    </components.MultiValue>
-  )
-}
-
-const dictionary = {
-  en: {
-    ariaLabelRemoveItemButton: 'Remove item $0',
-  },
-  pt: {
-    ariaLabelRemoveItemButton: 'Remover item $0',
-  },
-} satisfies Dictionary
-
+import { SxProperties } from '@citric/core/dist/sx'
+import { TimesMini } from '@citric/icons'
+import { Badge, IconButton } from '@citric/ui'
+import { Dictionary, interpolate, useTranslate } from '@stack-spot/portal-translate'
+import { MouseEvent } from 'react'
+import { components, GroupBase, MultiValueProps } from 'react-select'
+import { CreatableSelectOptionType } from './types'
+
+export const BadgeItem = (props: MultiValueProps<CreatableSelectOptionType, boolean, GroupBase<any>>) => {
+  const t = useTranslate(dictionary)
+
+  const handleClick = <T extends HTMLElement>(event: MouseEvent<T>) => {
+    props.removeProps.onClick?.(event as unknown as MouseEvent<HTMLDivElement>)
+  }
+
+  return (
+    <components.MultiValue {...props}>
+      <Badge
+        appearance="square"
+        className="badge"
+        palette="cyan"
+        sx={{ mb: 2, 
+          '.badge-citric-container:not(:has(> button:first-child))': {
+            marginRight: 0,
+          },
+        } as SxProperties}
+        afterElement={
+          <components.MultiValueRemove {...props}>
+            <IconButton
+              type="button"
+              aria-label={interpolate(t.ariaLabelRemoveItemButton, props.children)}
+              colorIcon="cyan.800"
+              appearance="square"
+              onClick={(e) => {
+                e.stopPropagation()
+                handleClick(e)
+              }}
+            >
+              <TimesMini />
+            </IconButton>
+          </components.MultiValueRemove>
+        }
+      >
+        {props.children}
+      </Badge>
+    </components.MultiValue>
+  )
+}
+
+const dictionary = {
+  en: {
+    ariaLabelRemoveItemButton: 'Remove item $0',
+  },
+  pt: {
+    ariaLabelRemoveItemButton: 'Remover item $0',
+  },
+} satisfies Dictionary
+

package/src/components/Select/ClearInput.tsx

@@ -1,24 +1,24 @@
-import { Times } from '@citric/icons'
-import { IconButton } from '@citric/ui'
-import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
-import { ClearIndicatorProps, components } from 'react-select'
-
-export const ClearInput = (props: ClearIndicatorProps<any>) => {
-  const t = useTranslate(dictionary)
-  return (
-    <components.ClearIndicator {...props}>
-      <IconButton role="button" type="button" onClick={() => props.clearValue()} aria-label={t.ariaLabelClearInput}>
-        <Times />
-      </IconButton>
-    </components.ClearIndicator>
-  )
-}
-
-const dictionary = {
-  en: {
-    ariaLabelClearInput: 'Clear all field values',
-  },
-  pt: {
-    ariaLabelClearInput: 'Limpar todos valores do campo',
-  },
-} satisfies Dictionary
+import { Times } from '@citric/icons'
+import { IconButton } from '@citric/ui'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { ClearIndicatorProps, components } from 'react-select'
+
+export const ClearInput = (props: ClearIndicatorProps<any>) => {
+  const t = useTranslate(dictionary)
+  return (
+    <components.ClearIndicator {...props}>
+      <IconButton role="button" type="button" onClick={() => props.clearValue()} aria-label={t.ariaLabelClearInput}>
+        <Times />
+      </IconButton>
+    </components.ClearIndicator>
+  )
+}
+
+const dictionary = {
+  en: {
+    ariaLabelClearInput: 'Clear all field values',
+  },
+  pt: {
+    ariaLabelClearInput: 'Limpar todos valores do campo',
+  },
+} satisfies Dictionary

package/src/components/Select/CloseItem.tsx

@@ -1,38 +1,38 @@
-import { IconBox } from '@citric/core'
-import { SxProperties } from '@citric/core/dist/sx'
-import { TimesMini } from '@citric/icons'
-import { IconButton } from '@citric/ui'
-import { Dictionary, interpolate, useTranslate } from '@stack-spot/portal-translate'
-import { MultiValueRemoveProps, components } from 'react-select'
-
-export const CloseItem = (props: MultiValueRemoveProps<any>) => {
-  const t = useTranslate(dictionary)
-  return (
-    <components.MultiValueRemove {...props}>
-      <IconButton
-        type="button"
-        aria-label={interpolate(t.ariaLabelRemoveItemButton, props.data.value)}
-        sx={{
-          bg: 'transparent',
-          border: 'none',
-          px: 0,
-          w: 'auto',
-          height: 'auto',
-          '&:hover, &:focus': { bg: 'transparent' },
-        } as SxProperties}>
-        <IconBox size="xs" sx={{ px: 0 }}>
-          <TimesMini />
-        </IconBox>
-      </IconButton>
-    </components.MultiValueRemove>
-  )
-}
-
-const dictionary = {
-  en: {
-    ariaLabelRemoveItemButton: 'Remove item $0',
-  },
-  pt: {
-    ariaLabelRemoveItemButton: 'Remover item $0',
-  },
-} satisfies Dictionary
+import { IconBox } from '@citric/core'
+import { SxProperties } from '@citric/core/dist/sx'
+import { TimesMini } from '@citric/icons'
+import { IconButton } from '@citric/ui'
+import { Dictionary, interpolate, useTranslate } from '@stack-spot/portal-translate'
+import { MultiValueRemoveProps, components } from 'react-select'
+
+export const CloseItem = (props: MultiValueRemoveProps<any>) => {
+  const t = useTranslate(dictionary)
+  return (
+    <components.MultiValueRemove {...props}>
+      <IconButton
+        type="button"
+        aria-label={interpolate(t.ariaLabelRemoveItemButton, props.data.value)}
+        sx={{
+          bg: 'transparent',
+          border: 'none',
+          px: 0,
+          w: 'auto',
+          height: 'auto',
+          '&:hover, &:focus': { bg: 'transparent' },
+        } as SxProperties}>
+        <IconBox size="xs" sx={{ px: 0 }}>
+          <TimesMini />
+        </IconBox>
+      </IconButton>
+    </components.MultiValueRemove>
+  )
+}
+
+const dictionary = {
+  en: {
+    ariaLabelRemoveItemButton: 'Remove item $0',
+  },
+  pt: {
+    ariaLabelRemoveItemButton: 'Remover item $0',
+  },
+} satisfies Dictionary

package/src/components/Select/CreatableSelect.tsx

@@ -1,155 +1,155 @@
-import { theme } from '@stack-spot/portal-theme'
-import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
-import { FC } from 'react'
-import { CSSObjectWithLabel } from 'react-select'
-import Creatable from 'react-select/creatable'
-import { BadgeItem } from './BadgeItem'
-import { CreatableSelectOptionType, CreatableValueType } from './types'
-import { ClearInput } from './ClearInput'
-
-export interface CreatableSelectProps {
-  id?: string,
-  name?: string,
-  disabled?: boolean,
-  isLoading?: boolean,
-  isMulti?: boolean,
-  options?: CreatableSelectOptionType[],
-  className?: string,
-  value?: string | string[],
-  inputValue?: CreatableValueType,
-  onChange: (newValue: CreatableValueType) => void,
-}
-
-export const CreatableSelect: FC<CreatableSelectProps> = 
-({ disabled, options, inputValue, isMulti, onChange, id, ...props }) => {
-  const t = useTranslate(dictionary)
-
-  return (
-    <Creatable
-      placeholder={t.typeYourOption}
-      {...props}
-      inputId={id}
-      isClearable={true}
-      isDisabled={disabled}
-      value={inputValue}
-      options={options}
-      isMulti={isMulti}
-      onChange={onChange}
-      components={{ 
-        MultiValue: BadgeItem, 
-        MultiValueRemove: () => <></>, 
-        ClearIndicator: ClearInput,
-      }}
-      noOptionsMessage={() => (t.typeYourOption)}
-      formatCreateLabel={(value) => (value)}
-      tabSelectsValue={false}
-      styles={{
-        control: (base, state) => ({
-          ...base,
-          minHeight: '2.5rem',
-          height: 'auto',
-          backgroundColor: theme.color.light[300],
-          border: `0.063rem solid ${theme.color.light[600]}`,
-          borderRadius: '0.25rem',
-          fontSize: '0.875rem',
-          fontStyle: 'normal',
-          fontFeatureSettings: '\'clig\' off, \'liga\' off',
-          display: 'flex',
-          alignItems: 'center',
-          outlineColor: theme.color.light[700],
-
-          '&:hover': {
-            border: `0.063rem solid ${theme.color.light[600]}`,
-          },
-
-          ...(state.isFocused || state.menuIsOpen ? {
-            borderColor: `${theme.color.primary[500]} !important`,
-            outline: `0.063rem solid ${theme.color.primary[500]} !important`,
-          } : {}),
-        } as CSSObjectWithLabel),
-        input: () => ({
-          color: theme.color.light.contrastText,
-        }),
-        placeholder: () => ({
-          display: 'none',
-        }),
-        dropdownIndicator: () => ({
-          display: 'none',
-        }),
-        indicatorSeparator: () => ({
-          display: 'none',
-        }),
-        singleValue: (base) => ({
-          ...base,
-          color: theme.color.light.contrastText,
-        } as CSSObjectWithLabel),
-        menu: (base) => ({
-          ...base,
-          backgroundColor: theme.color.light[500],
-          border: `0.063rem solid ${theme.color.light[400]}`,
-          borderRadius: '0.5rem',
-          boxShadow: `0 0 0 0.125rem ${theme.color.gray[600]}`,
-          color: theme.color.light.contrastText,
-        } as CSSObjectWithLabel),
-        multiValue: (base) => ({
-          ...base,
-          backgroundColor: 'inherit',
-          display: 'flex',
-          alignItems: 'center',
-          justifyItems: 'center',
-        }),
-        multiValueRemove: (base) => ({
-          ...base,
-          cursor: 'pointer',
-          backgroundColor: 'inherit',
-          paddingRight: 0,
-          ':hover': {
-            backgroundColor: 'inherit',
-            color: 'inherit',
-          },
-        }),
-        option: (styles, { isDisabled, isFocused, isSelected }) => ({
-          ...styles,
-          backgroundColor: isDisabled
-            ? undefined
-            : isSelected
-              ? theme.color.light[700]
-              : isFocused
-                ? theme.color.light[600]
-                : undefined,
-
-          color: isSelected ? theme.color.light[300] : theme.color.light.contrastText,
-
-          cursor: isDisabled ? 'not-allowed' : 'default',
-
-          ':active': {
-            ...styles[':active'],
-            backgroundColor: !isDisabled
-              ? isSelected
-                ? theme.color.light.contrastText
-                : theme.color.light[600]
-              : undefined,
-          },
-
-          ':hover': {
-            ...styles[':hover'],
-            backgroundColor: !isDisabled
-              ? isSelected
-                ? theme.color.light[700]
-                : theme.color.light[600]
-              : undefined,
-          },
-        } as CSSObjectWithLabel),
-      }}
-    />
-  )
-}
-
-const dictionary = {
-  en: {
-    typeYourOption: 'Type your option',
-  },
-  pt: {
-    typeYourOption: 'Insira a sua opção',
-  },
-} satisfies Dictionary
+import { theme } from '@stack-spot/portal-theme'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { FC } from 'react'
+import { CSSObjectWithLabel } from 'react-select'
+import Creatable from 'react-select/creatable'
+import { BadgeItem } from './BadgeItem'
+import { CreatableSelectOptionType, CreatableValueType } from './types'
+import { ClearInput } from './ClearInput'
+
+export interface CreatableSelectProps {
+  id?: string,
+  name?: string,
+  disabled?: boolean,
+  isLoading?: boolean,
+  isMulti?: boolean,
+  options?: CreatableSelectOptionType[],
+  className?: string,
+  value?: string | string[],
+  inputValue?: CreatableValueType,
+  onChange: (newValue: CreatableValueType) => void,
+}
+
+export const CreatableSelect: FC<CreatableSelectProps> = 
+({ disabled, options, inputValue, isMulti, onChange, id, ...props }) => {
+  const t = useTranslate(dictionary)
+
+  return (
+    <Creatable
+      placeholder={t.typeYourOption}
+      {...props}
+      inputId={id}
+      isClearable={true}
+      isDisabled={disabled}
+      value={inputValue}
+      options={options}
+      isMulti={isMulti}
+      onChange={onChange}
+      components={{ 
+        MultiValue: BadgeItem, 
+        MultiValueRemove: () => <></>, 
+        ClearIndicator: ClearInput,
+      }}
+      noOptionsMessage={() => (t.typeYourOption)}
+      formatCreateLabel={(value) => (value)}
+      tabSelectsValue={false}
+      styles={{
+        control: (base, state) => ({
+          ...base,
+          minHeight: '2.5rem',
+          height: 'auto',
+          backgroundColor: theme.color.light[300],
+          border: `0.063rem solid ${theme.color.light[600]}`,
+          borderRadius: '0.25rem',
+          fontSize: '0.875rem',
+          fontStyle: 'normal',
+          fontFeatureSettings: '\'clig\' off, \'liga\' off',
+          display: 'flex',
+          alignItems: 'center',
+          outlineColor: theme.color.light[700],
+
+          '&:hover': {
+            border: `0.063rem solid ${theme.color.light[600]}`,
+          },
+
+          ...(state.isFocused || state.menuIsOpen ? {
+            borderColor: `${theme.color.primary[500]} !important`,
+            outline: `0.063rem solid ${theme.color.primary[500]} !important`,
+          } : {}),
+        } as CSSObjectWithLabel),
+        input: () => ({
+          color: theme.color.light.contrastText,
+        }),
+        placeholder: () => ({
+          display: 'none',
+        }),
+        dropdownIndicator: () => ({
+          display: 'none',
+        }),
+        indicatorSeparator: () => ({
+          display: 'none',
+        }),
+        singleValue: (base) => ({
+          ...base,
+          color: theme.color.light.contrastText,
+        } as CSSObjectWithLabel),
+        menu: (base) => ({
+          ...base,
+          backgroundColor: theme.color.light[500],
+          border: `0.063rem solid ${theme.color.light[400]}`,
+          borderRadius: '0.5rem',
+          boxShadow: `0 0 0 0.125rem ${theme.color.gray[600]}`,
+          color: theme.color.light.contrastText,
+        } as CSSObjectWithLabel),
+        multiValue: (base) => ({
+          ...base,
+          backgroundColor: 'inherit',
+          display: 'flex',
+          alignItems: 'center',
+          justifyItems: 'center',
+        }),
+        multiValueRemove: (base) => ({
+          ...base,
+          cursor: 'pointer',
+          backgroundColor: 'inherit',
+          paddingRight: 0,
+          ':hover': {
+            backgroundColor: 'inherit',
+            color: 'inherit',
+          },
+        }),
+        option: (styles, { isDisabled, isFocused, isSelected }) => ({
+          ...styles,
+          backgroundColor: isDisabled
+            ? undefined
+            : isSelected
+              ? theme.color.light[700]
+              : isFocused
+                ? theme.color.light[600]
+                : undefined,
+
+          color: isSelected ? theme.color.light[300] : theme.color.light.contrastText,
+
+          cursor: isDisabled ? 'not-allowed' : 'default',
+
+          ':active': {
+            ...styles[':active'],
+            backgroundColor: !isDisabled
+              ? isSelected
+                ? theme.color.light.contrastText
+                : theme.color.light[600]
+              : undefined,
+          },
+
+          ':hover': {
+            ...styles[':hover'],
+            backgroundColor: !isDisabled
+              ? isSelected
+                ? theme.color.light[700]
+                : theme.color.light[600]
+              : undefined,
+          },
+        } as CSSObjectWithLabel),
+      }}
+    />
+  )
+}
+
+const dictionary = {
+  en: {
+    typeYourOption: 'Type your option',
+  },
+  pt: {
+    typeYourOption: 'Insira a sua opção',
+  },
+} satisfies Dictionary