@stack-spot/portal-components 2.27.0 → 2.27.2

package/src/components/Select/CustomMenu.tsx

@@ -1,16 +1,16 @@
-import { ReactNode } from 'react'
-import { components, GroupBase, MenuProps } from 'react-select'
-
-interface CustomMenuProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>>
-  extends MenuProps<Option, IsMulti, Group> {
-  afterList?: ReactNode,
-}
-
-export const CustomMenu = <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(
-  props: CustomMenuProps<Option, IsMulti, Group>,
-) => (
-    <components.Menu {...props}>
-      {props.children}
-      {props.afterList && <>{props.afterList}</>}
-    </components.Menu>
-  )
+import { ReactNode } from 'react'
+import { components, GroupBase, MenuProps } from 'react-select'
+
+interface CustomMenuProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>>
+  extends MenuProps<Option, IsMulti, Group> {
+  afterList?: ReactNode,
+}
+
+export const CustomMenu = <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(
+  props: CustomMenuProps<Option, IsMulti, Group>,
+) => (
+    <components.Menu {...props}>
+      {props.children}
+      {props.afterList && <>{props.afterList}</>}
+    </components.Menu>
+  )

package/src/components/Select/LabelItem.tsx

@@ -1,8 +1,8 @@
-import { Box, Text } from '@citric/core'
-import { MultiValueGenericProps } from 'react-select'
-
-export const LabelItem = (props: MultiValueGenericProps<any>) => (
-  <Box>
-    <Text>{props.data.label}</Text>
-  </Box>
-)
+import { Box, Text } from '@citric/core'
+import { MultiValueGenericProps } from 'react-select'
+
+export const LabelItem = (props: MultiValueGenericProps<any>) => (
+  <Box>
+    <Text>{props.data.label}</Text>
+  </Box>
+)

package/src/components/Select/MultiValue.tsx

@@ -1,49 +1,49 @@
-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 { MultiValueProps, components } from 'react-select'
-
-export const MultiValue = (props: MultiValueProps) => {
-  const t = useTranslate(dictionary)
-  return (
-    <>
-      <components.MultiValue {...props}>
-        <Badge appearance="square" className="badge" palette="cyan" sx={
-        { 
-          mr: 0,
-          my: 0,
-          '.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)}
-              appearance="square"
-              colorIcon="cyan.800"
-              onClick={(e: React.MouseEvent<HTMLElement, MouseEvent>) => {
-                e.stopPropagation()
-                props.removeProps?.onClick?.(e as React.MouseEvent<HTMLDivElement, MouseEvent>)
-              }}>
-              <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 { MultiValueProps, components } from 'react-select'
+
+export const MultiValue = (props: MultiValueProps) => {
+  const t = useTranslate(dictionary)
+  return (
+    <>
+      <components.MultiValue {...props}>
+        <Badge appearance="square" className="badge" palette="cyan" sx={
+        { 
+          mr: 0,
+          my: 0,
+          '.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)}
+              appearance="square"
+              colorIcon="cyan.800"
+              onClick={(e: React.MouseEvent<HTMLElement, MouseEvent>) => {
+                e.stopPropagation()
+                props.removeProps?.onClick?.(e as React.MouseEvent<HTMLDivElement, MouseEvent>)
+              }}>
+              <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/SelectInfiniteScroll.tsx

@@ -1,82 +1,82 @@
-import { IconBox } from '@citric/core'
-import { LoadingCircular } from '@citric/ui'
-import InfiniteScroll from 'react-infinite-scroll-component'
-import { components, GroupBase, MenuListProps } from 'react-select'
-import { SelectSearch, SelectSearchProps } from './SelectSearch'
-
-interface CustomMenuListProps {
-  loadMore: () => void,
-  hasMore: boolean,
-}
-
-const MenuList = <
-  OptionType,
-  IsMulti extends boolean = false,
-  Group extends GroupBase<OptionType> = GroupBase<OptionType>
->(props: MenuListProps<OptionType, IsMulti, Group>) => {
-  const { children, selectProps } = props
-  const { loadMore, hasMore, options, isLoadingMore } = selectProps as typeof selectProps &
-    CustomMenuListProps & { isLoadingMore?: boolean }
-
-  return (
-    <InfiniteScroll
-      dataLength={options.length}
-      next={loadMore}
-      hasMore={hasMore}
-      scrollableTarget="list-item"
-      scrollThreshold={0.8}
-      loader={isLoadingMore ? <IconBox w={12} colorBg="light.300" sx={{ alignItems: 'center', justifyContent: 'center' }}>
-        <LoadingCircular />
-      </IconBox> : null}
-      style={{ overflow: 'hidden' }}
-    >
-      <components.MenuList {...props} innerProps={{ ...props.innerProps, id: 'list-item' }}>{children}</components.MenuList>
-    </InfiniteScroll>
-  )
-}
-
-type Option = { value: string, label: string }
-
-export interface SelectInfiniteScrollProps extends SelectSearchProps {
-  options: Option[],
-  loadMore: () => void,
-  hasMore: boolean,
-  isLoadingMore?: boolean,
-}
-
-export const SelectInfiniteScroll = ({
-  options,
-  loadMore,
-  hasMore,
-  isLoadingMore,
-  ...props
-}: SelectInfiniteScrollProps) => (
-  <SelectSearch
-    components={{ MenuList }}
-    options={options}
-    closeMenuOnSelect={false}
-    styles={{
-      control: () => ({
-        minHeight: '2.5rem',
-        height: 'auto',
-      }),
-      menu: () => ({
-        position: 'absolute',
-      }),
-      menuList: (base) => ({
-        ...base,
-        maxHeight: 300,
-        overflowY: 'auto',
-      }),
-      input: () => ({
-        position: 'relative',
-      }),
-    }}
-    // @ts-ignore: Essas props não existem no tipo, mas são acessíveis via selectProps no MenuList
-    loadMore={loadMore}
-    hasMore={hasMore}
-    isLoadingMore={isLoadingMore}
-    {...props}
-  />
-)
-
+import { IconBox } from '@citric/core'
+import { LoadingCircular } from '@citric/ui'
+import InfiniteScroll from 'react-infinite-scroll-component'
+import { components, GroupBase, MenuListProps } from 'react-select'
+import { SelectSearch, SelectSearchProps } from './SelectSearch'
+
+interface CustomMenuListProps {
+  loadMore: () => void,
+  hasMore: boolean,
+}
+
+const MenuList = <
+  OptionType,
+  IsMulti extends boolean = false,
+  Group extends GroupBase<OptionType> = GroupBase<OptionType>
+>(props: MenuListProps<OptionType, IsMulti, Group>) => {
+  const { children, selectProps } = props
+  const { loadMore, hasMore, options, isLoadingMore } = selectProps as typeof selectProps &
+    CustomMenuListProps & { isLoadingMore?: boolean }
+
+  return (
+    <InfiniteScroll
+      dataLength={options.length}
+      next={loadMore}
+      hasMore={hasMore}
+      scrollableTarget="list-item"
+      scrollThreshold={0.8}
+      loader={isLoadingMore ? <IconBox w={12} colorBg="light.300" sx={{ alignItems: 'center', justifyContent: 'center' }}>
+        <LoadingCircular />
+      </IconBox> : null}
+      style={{ overflow: 'hidden' }}
+    >
+      <components.MenuList {...props} innerProps={{ ...props.innerProps, id: 'list-item' }}>{children}</components.MenuList>
+    </InfiniteScroll>
+  )
+}
+
+type Option = { value: string, label: string }
+
+export interface SelectInfiniteScrollProps extends SelectSearchProps {
+  options: Option[],
+  loadMore: () => void,
+  hasMore: boolean,
+  isLoadingMore?: boolean,
+}
+
+export const SelectInfiniteScroll = ({
+  options,
+  loadMore,
+  hasMore,
+  isLoadingMore,
+  ...props
+}: SelectInfiniteScrollProps) => (
+  <SelectSearch
+    components={{ MenuList }}
+    options={options}
+    closeMenuOnSelect={false}
+    styles={{
+      control: () => ({
+        minHeight: '2.5rem',
+        height: 'auto',
+      }),
+      menu: () => ({
+        position: 'absolute',
+      }),
+      menuList: (base) => ({
+        ...base,
+        maxHeight: 300,
+        overflowY: 'auto',
+      }),
+      input: () => ({
+        position: 'relative',
+      }),
+    }}
+    // @ts-ignore: Essas props não existem no tipo, mas são acessíveis via selectProps no MenuList
+    loadMore={loadMore}
+    hasMore={hasMore}
+    isLoadingMore={isLoadingMore}
+    {...props}
+  />
+)
+