New SelectMenu component

package.json

@@ -27,6 +27,7 @@
     "@aws-sdk/client-lambda": "^3.210.0",
     "@codesandbox/sandpack-react": "^1.17.0",
     "@codesandbox/sandpack-themes": "^1.17.0",
+    "@floating-ui/react": "^0.18.1",
     "@types/react": "^16.2.0",
     "chalk": "4.1.2",
     "classnames": "^2.3.2",

src/chromatic/HoverStyle.tsx

@@ -13,7 +13,11 @@ const generateUnhoveredSelector = (
 
   const hoverSelectorText = selectorText
     .split(', ')
-    .filter(text => text.includes(':hover') || text.includes('--hover'))
+    .filter(
+      text =>
+        (text.includes(':hover') || text.includes('--hover')) &&
+        !text.includes(':not(:hover)')
+    )
     .map(selector =>
       `#${hoverContainerId} ${selector}`
         .replace(/:hover/i, '')

src/chromatic/utils.tsx

@@ -38,7 +38,11 @@ export const generateChromaticStory: any = (
 
 const mergeStories: any = module => {
   const stories = Object.keys(module)
-    .filter(moduleExports => moduleExports !== 'default')
+    .filter(
+      moduleExports =>
+        moduleExports !== 'default' &&
+        !module[moduleExports].parameters?.chromatic?.disableSnapshot
+    )
     .map(moduleExportName => {
       return {
         name: moduleExportName,

src/components/select-menu/SelectMenu.chromatic.stories.tsx

@@ -0,0 +1,152 @@
+import * as React from 'react';
+import * as SelectMenuStories from './SelectMenu.stories.mdx';
+import {generateChromaticStory} from '../../chromatic/utils';
+import SelectMenu, {SIZE as SELECT_SIZE} from './SelectMenu';
+
+import Text from '../text/Text';
+import Flex from '../flex/Flex';
+
+const onOptionChange = () => null;
+
+export const Sizes = args => {
+  return (
+    <div style={{display: 'flex', flexDirection: 'row'}}>
+      {Object.values(SELECT_SIZE).map(size => (
+        <div style={{width: '200px'}} key={size}>
+          <SelectMenu
+            {...args}
+            defaultExpanded
+            size={size}
+            onOptionChange={onOptionChange}
+          />
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export const DifferentPopupLenghts = args => {
+  return (
+    <Flex direction="row" style={{gap: '40px'}}>
+      <div style={{width: '200px'}}>
+        <Text>Popup with wide content:</Text>
+        <SelectMenu
+          options={[
+            {
+              value: 'tv',
+              label: 'Usłyszałem o Brainly w reklamie telewizyjnej w telewizji',
+              icon: {
+                name: 'physics',
+                isSubjectIcon: true,
+              },
+            },
+            {
+              value: 'fb',
+              label: 'Media społecznościowe',
+              icon: {
+                name: 'history',
+                isSubjectIcon: true,
+              },
+            },
+            {
+              value: 'search',
+              label: 'Wyszukiwarka internetowa',
+              icon: {
+                name: 'science',
+                isSubjectIcon: true,
+              },
+            },
+          ]}
+          defaultExpanded
+          onOptionChange={onOptionChange}
+        />
+      </div>
+      <div style={{width: '400px'}}>
+        <Text>
+          Popup with short content that stretches to 70% of the input:
+        </Text>
+        <SelectMenu
+          {...args}
+          withIcons={false}
+          defaultExpanded
+          options={[
+            {
+              value: 'tv',
+              label: '1',
+            },
+            {value: 'fb', label: '2'},
+            {
+              value: 'search',
+              label: '3',
+            },
+          ]}
+          placeholder="Select something from the list"
+          onOptionChange={onOptionChange}
+        />
+      </div>
+      <div>
+        <Text>Popup with short content and short input:</Text>
+        <div style={{width: '120px'}}>
+          <SelectMenu
+            {...args}
+            withIcons={false}
+            defaultExpanded
+            options={[
+              {
+                value: 'tv',
+                label: '1',
+              },
+              {value: 'fb', label: '2'},
+              {
+                value: 'search',
+                label: '3',
+              },
+            ]}
+            placeholder="Age"
+            onOptionChange={onOptionChange}
+          />
+        </div>
+      </div>
+    </Flex>
+  );
+};
+
+const Hovers = args => {
+  const types = [{name: 'default'}, {disabled: true, name: 'disabled'}];
+
+  return (
+    <div>
+      {types.map(t => (
+        <div key={t.name}>
+          {t.name}
+          <SelectMenu {...args} {...t} onOptionChange={onOptionChange} />
+        </div>
+      ))}
+      <div style={{background: 'black'}}>
+        {types.map(t => (
+          <div key={t.name}>
+            <span style={{color: 'white'}}>White: {t.name}</span>
+            <SelectMenu
+              {...args}
+              {...t}
+              color="white"
+              onOptionChange={onOptionChange}
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export const Default = generateChromaticStory(
+  {
+    ...SelectMenuStories,
+  },
+  {
+    storiesToHover: [Hovers],
+  }
+);
+const {includeStories, ...meta} = SelectMenuStories.default;
+
+export default meta;