feat: select

Author: shiftpsh

example/src/stories/Select.stories.tsx

@@ -1,4 +1,4 @@
-import { Select } from '@solved-ac/ui-react'
+import { Centering, Select } from '@solved-ac/ui-react'
 import { ComponentMeta, ComponentStory } from '@storybook/react'
 import React from 'react'
 
@@ -18,25 +18,41 @@ export default {
       description:
         'Whether the selector should take up the full width of its container',
     },
+    disableEllipsis: {
+      control: 'boolean',
+      description: 'Whether the selector should disable ellipsis',
+    },
   },
 } as ComponentMeta<typeof Select>
 
-const Template: ComponentStory<typeof Select> = (args) => <Select {...args} />
+const Template: ComponentStory<typeof Select> = (args) => (
+  <Centering>
+    <Select {...args} />
+  </Centering>
+)
 
 export const Default = Template.bind({})
 Default.args = {
   value: 'Select',
   items: Array(10)
     .fill(undefined)
-    .map((_, i) => `Item ${i}`),
+    .map((_, i) => `Item ${i + 1}`),
 }
 
 export const LongEntries = Template.bind({})
 LongEntries.args = {
   value: 'Select',
   items: Array(256)
     .fill(undefined)
-    .map((_, i) => `Item ${i}`),
+    .map((_, i) => `Item ${i + 1}`),
+}
+
+export const LongContents = Template.bind({})
+LongContents.args = {
+  value: 'Select',
+  items: Array(256)
+    .fill(undefined)
+    .map((_, i) => `Item ${i + 1} `.repeat(i + 1)),
 }
 
 export const CustomRender = Template.bind({})

package.json

@@ -31,7 +31,7 @@
   "peerDependencies": {
     "@emotion/react": ">=11",
     "@emotion/styled": ">=11",
-    "@floating-ui/react-dom-interactions": "^0.8.0",
+    "@floating-ui/react-dom-interactions": "^0.13.3",
     "framer-motion": "6.x",
     "react": ">=17",
     "react-dom": ">=17"
@@ -41,7 +41,7 @@
     "@babel/plugin-proposal-optional-chaining": "^7.16.7",
     "@emotion/react": "^11.1.5",
     "@emotion/styled": "^11.1.5",
-    "@floating-ui/react-dom-interactions": "^0.8.0",
+    "@floating-ui/react-dom-interactions": "^0.13.3",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",

src/components/$List/ListItem.tsx

@@ -83,17 +83,7 @@ export const ListItem: PC<'div', ListItemProps> = React.forwardRef(
       hoverColor || (backgroundColor && computeHoverColor(backgroundColor))
 
     return (
-      <ListItemWrapper
-        style={{
-          [vars.backgroundColor]: backgroundColor,
-          [vars.hoverBackgroundColor]: computedHoverColor,
-          [vars.textColor]:
-            backgroundColor && readableColor(backgroundColor, solvedTheme),
-          [vars.hoverTextColor]:
-            computedHoverColor &&
-            readableColor(computedHoverColor, solvedTheme),
-        }}
-      >
+      <ListItemWrapper>
         <ListItemContainer
           ref={ref}
           as={as}
@@ -102,7 +92,16 @@ export const ListItem: PC<'div', ListItemProps> = React.forwardRef(
           disabled={disabled && clickable}
           clickable={clickable}
           padding={padding}
-          style={style}
+          style={{
+            [vars.backgroundColor]: backgroundColor,
+            [vars.hoverBackgroundColor]: computedHoverColor,
+            [vars.textColor]:
+              backgroundColor && readableColor(backgroundColor, solvedTheme),
+            [vars.hoverTextColor]:
+              computedHoverColor &&
+              readableColor(computedHoverColor, solvedTheme),
+            ...style,
+          }}
           {...rest}
         >
           {children}