feat: stretch-full-width-select-field

packages/kaspersky-hexa-ui/src/select/stories/FieldDefaultWidth.tsx

@@ -0,0 +1,124 @@
+import { Field } from '@src/field'
+import { Textbox } from '@src/input'
+import { StoryObj } from '@storybook/react'
+import React from 'react'
+import styled from 'styled-components'
+
+import { Select } from '../Select'
+import { SelectProps } from '../types'
+
+type Story = StoryObj<SelectProps>
+
+const selectOptions = [
+  { label: 'Option 1', value: '1' },
+  { label: 'Option 2', value: '2' },
+  { label: 'Option 3', value: '3' }
+]
+
+type FormFieldsProps = {
+  labelType?: 'default' | 'full'
+}
+
+const FormFields = ({ labelType = 'default' }: FormFieldsProps) => (
+  <>
+    <Field
+      required
+      labelType={labelType}
+      labelPosition="before"
+      label="Name"
+      control={<Textbox placeholder="Enter name" />}
+    />
+    <Field
+      required
+      labelType={labelType}
+      labelPosition="before"
+      label="Category"
+      control={
+        <Select
+          placeholder="Select"
+          options={selectOptions}
+        />
+      }
+    />
+    <Field
+      required
+      labelType={labelType}
+      labelPosition="before"
+      label="Type"
+      control={
+        <Select
+          placeholder="Select"
+          options={selectOptions}
+        />
+      }
+    />
+    <Field
+      required
+      labelType={labelType}
+      labelPosition="before"
+      label="Status"
+      control={
+        <Select
+          placeholder="Select"
+          options={selectOptions}
+        />
+      }
+    />
+  </>
+)
+
+const FormLayout = styled.div`
+  width: 100%;
+  max-width: 640px;
+
+  .kl6-field + .kl6-field {
+    margin-top: 16px;
+  }
+`
+
+/**
+ * Same specificity trick as SidebarFilters.module.scss (.valueRow × 3).
+ * Plain ".kl6-field-control-box { min-width: unset }" loses to Field fieldCss.
+ */
+const ClientLikeLayout = styled(FormLayout)`
+  &&& .kl6-field .kl6-field-control-wrapper .kl6-field-control-box {
+    min-width: unset;
+  }
+`
+
+export const FieldDefaultWidth: Story = {
+  render: () => (
+    <FormLayout>
+      <FormFields />
+    </FormLayout>
+  ),
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      description: {
+        story:
+          'Control case: labelType="default" + min-width: 200px on control-box. ' +
+          'Select and Textbox stay the same width.'
+      }
+    }
+  }
+}
+
+export const FieldDefaultWidthRepro: Story = {
+  render: () => (
+    <ClientLikeLayout>
+      <FormFields labelType="full" />
+    </ClientLikeLayout>
+  ),
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      description: {
+        story:
+          'Repro attempt: labelType="full" + min-width: unset on control-box ' +
+          '(SidebarFilters / QuickFilter pattern). Select rows should be ' +
+          'narrower than the Textbox row.'
+      }
+    }
+  }
+}

packages/kaspersky-hexa-ui/src/sidebar/Sidebar.stories.tsx

@@ -588,6 +588,8 @@ export const WithToolbarAndTabs: StoryWithButton = {
   }
 }
 
+export { SelectInSidebar, SelectInSidebarWithField } from './stories/SelectInSidebar'
+
 type PaletteStory = StoryObj<ThemedPaletteProps>
 export const ColorTokens: PaletteStory = {
   args: { source: componentColors.sidebar },

packages/kaspersky-hexa-ui/src/sidebar/stories/SelectInSidebar.tsx

@@ -0,0 +1,98 @@
+import { Button } from '@src/button'
+import { Field } from '@src/field'
+import { Select } from '@src/select'
+import { StoryObj } from '@storybook/react'
+import React, { useState } from 'react'
+
+import { Sidebar } from '../Sidebar'
+import { SidebarProps } from '../types'
+
+type Story = StoryObj<SidebarProps>
+
+const selectOptions = [
+  { label: 'test', value: 1 },
+  { label: 'Option 2', value: 2 }
+]
+
+/**
+ * Client repro: Select inside Sidebar (no Field).
+ * 1. Click "Open" → Sidebar opens, Select is full width.
+ * 2. Open Select dropdown → trigger may collapse to min-content.
+ * 3. DevTools: inspect `.ant-select` — styled-components class with
+ *    `width: 100%` may disappear after opening.
+ */
+export const SelectInSidebar: Story = {
+  render: () => {
+    const [visible, setVisible] = useState(false)
+
+    return (
+      <>
+        <Button onClick={() => setVisible(true)}>Open</Button>
+        <Sidebar
+          title="Test"
+          visible={visible}
+          onClose={() => setVisible(false)}
+        >
+          <Select
+            mode="multiple"
+            options={selectOptions}
+          />
+        </Sidebar>
+      </>
+    )
+  },
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      description: {
+        story:
+          'Client repro from Telegram: multiselect in Sidebar without Field. ' +
+          'Open the sidebar, then open the select — width may collapse after ' +
+          'the dropdown opens. Check DevTools on `.ant-select` for styled-components ' +
+          'class with `width: 100%` before/after.'
+      }
+    }
+  }
+}
+
+/**
+ * Same scenario with Field — reported in product forms inside Sidebar.
+ */
+export const SelectInSidebarWithField: Story = {
+  render: () => {
+    const [visible, setVisible] = useState(false)
+
+    return (
+      <>
+        <Button onClick={() => setVisible(true)}>Open</Button>
+        <Sidebar
+          title="Test"
+          visible={visible}
+          onClose={() => setVisible(false)}
+        >
+          <Field
+            labelPosition="before"
+            label="Category"
+            control={
+              <Select
+                mode="multiple"
+                placeholder="Select"
+                options={selectOptions}
+              />
+            }
+          />
+        </Sidebar>
+      </>
+    )
+  },
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      description: {
+        story:
+          'Sidebar + Field + Select. Use when validating width inside form ' +
+          'layouts in drawer content.'
+      }
+    }
+  }
+}