agroptima-design-system 1.2.32-beta.0 → 1.2.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "1.2.32-beta.0",
+  "version": "1.2.32",
   "scripts": {
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006 --ci",

package/src/atoms/InputWithSelect/InputWithSelect.scss

@@ -40,10 +40,6 @@
   }
 }
 
-// Input.scss colors every .icon inside .input-container as neutral-400 by
-// default (see .password-icon there for the same kind of exception). This
-// selector is qualified one level deeper than that rule so it wins on
-// specificity regardless of CSS load order between the two files.
 .input-with-select .input-container .input-suffix .select-suffix-trigger {
   @include mixins.icon-color(var(--primary-color-600));
 

package/src/atoms/InputWithSelect/InputWithSelect.tsx

@@ -10,6 +10,7 @@ import type { Option } from '../Select'
 import { SelectItem } from '../Select/SelectItem'
 
 const ESCAPE_KEY = 'Escape'
+const EMPTY_OPTION: Option = { id: '', label: '' }
 
 export interface InputWithSelectProps extends Omit<
   InputProps,
@@ -17,7 +18,7 @@ export interface InputWithSelectProps extends Omit<
 > {
   options: Option[]
   selectAccessibilityLabel: string
-  selectName?: string
+  selectFieldName?: string
   defaultSelectedOption?: string
   onSelectChange?: (value: string) => void
 }
@@ -25,7 +26,7 @@ export interface InputWithSelectProps extends Omit<
 export function InputWithSelect({
   options,
   selectAccessibilityLabel,
-  selectName,
+  selectFieldName,
   defaultSelectedOption,
   onSelectChange = () => {},
   className,
@@ -33,18 +34,15 @@ export function InputWithSelect({
 }: InputWithSelectProps): React.JSX.Element {
   const { isOpen, close, toggle } = useOpen()
   const defaultOption =
-    options.find((option) => option.id === defaultSelectedOption) || options[0]
+    options.find((option) => option.id === defaultSelectedOption) ||
+    options[0] ||
+    EMPTY_OPTION
   const [selectedOption, setSelectedOption] = useState<Option>(defaultOption)
   const containerRef = useRef(null)
   const triggerRef = useRef<HTMLButtonElement>(null)
   const optionsId = `${props.id || props.name}-select-options`
 
-  function handleClose() {
-    if (!isOpen) return
-    close()
-  }
-
-  useOutsideClick(containerRef, handleClose)
+  useOutsideClick(containerRef, close)
 
   useEffect(() => {
     if (!isOpen) return
@@ -76,7 +74,7 @@ export function InputWithSelect({
             type="button"
             role="combobox"
             className="select-suffix-trigger"
-            aria-label={selectAccessibilityLabel}
+            aria-label={`${selectAccessibilityLabel}: ${selectedOption.label}`}
             aria-haspopup="listbox"
             aria-expanded={isOpen}
             aria-controls={optionsId}
@@ -86,8 +84,12 @@ export function InputWithSelect({
             <span>{selectedOption.label}</span>
             <Icon size="3" name={isOpen ? 'AngleUp' : 'AngleDown'} decorative />
           </button>
-          {selectName && (
-            <input type="hidden" name={selectName} value={selectedOption.id} />
+          {selectFieldName && (
+            <input
+              type="hidden"
+              name={selectFieldName}
+              value={selectedOption.id}
+            />
           )}
           {isOpen && (
             <ul id={optionsId} className="select-suffix-options" role="listbox">

package/src/stories/Changelog.mdx

@@ -6,7 +6,8 @@ import { Meta } from "@storybook/addon-docs/blocks";
 
 ## 1.2.32
 
-* Add new variant style for Input component
+* Add InputWithSelect component
+* Add `React.ReactNode` support to Input's `suffix` prop
 
 ## 1.2.31
 

package/src/stories/InputWithSelect.stories.tsx

@@ -9,7 +9,7 @@ const meta = {
       description: {
         component:
           '<h2>Usage guidelines</h2>' +
-          '<p>The InputWithSelect component is used when the value the user types needs a unit or symbol attached to it, such as a discount percentage or a measurement. It combines an input field with a compact select fused into the same field, placed as a suffix.</p>' +
+          '<p>The InputWithSelect component is used when the value the user types needs a unit or symbol attached to it, such as a percentage or a measurement. It combines an input field with a compact select fused into the same field, placed as a suffix.</p>' +
           '<ul>' +
           '  <li>Use when the unit is closely tied to the value and only a short, fixed list of symbols applies (e.g. %, kg, m²)</li>' +
           '  <li>Keep the list of options short, these are not meant to be searched</li>' +
@@ -30,7 +30,7 @@ const meta = {
     name: {
       description: 'Set name property for the input value',
     },
-    selectName: {
+    selectFieldName: {
       description:
         'Set name property for the hidden input holding the selected option, if it needs to be submitted in a form',
     },
@@ -61,24 +61,25 @@ type Story = StoryObj<typeof meta>
 
 export const Primary: Story = {
   args: {
-    label: 'Discount',
-    name: 'discount',
+    label: 'Weight',
+    name: 'weight',
     type: 'number',
     defaultValue: 10,
-    helpText: 'Applied to the total amount',
-    selectAccessibilityLabel: 'Select discount unit',
+    helpText: 'This text can help you',
+    selectAccessibilityLabel: 'Select weight unit',
     options: [
-      { id: '%', label: '%' },
-      { id: 'eur', label: '€' },
+      { id: 'kg', label: 'kg' },
+      { id: 'g', label: 'g' },
+      { id: 'lb', label: 'lb' },
     ],
-    id: 'discount',
+    id: 'weight',
   },
 }
 
 export const WithErrors: Story = {
   args: {
     ...Primary.args,
-    errors: ['Discount must be lower than 100%'],
+    errors: ['Weight must be greater than 0'],
   },
 }
 

package/tests/InputWithSelect.spec.tsx

@@ -4,8 +4,8 @@ import React from 'react'
 import { InputWithSelect } from '../src/atoms/InputWithSelect'
 
 const options = [
-  { id: '%', label: '%' },
-  { id: 'kg', label: 'kg' },
+  { id: 'percentage', label: '%' },
+  { id: 'kilogram', label: 'kg' },
 ]
 
 describe('InputWithSelect', () => {
@@ -22,50 +22,49 @@ describe('InputWithSelect', () => {
 
     expect(screen.getByRole('spinbutton')).toBeInTheDocument()
     expect(
-      screen.getByRole('combobox', { name: 'Select unit' }),
+      screen.getByRole('combobox', { name: 'Select unit: %' }),
     ).toHaveTextContent('%')
   })
 
-  it('respects the default selected option', () => {
+  it('opens the options list and updates the selected option on click', async () => {
+    const user = userEvent.setup()
+    const handleSelectChange = jest.fn()
     render(
       <InputWithSelect
-        defaultSelectedOption="kg"
         label="Discount"
         name="discount"
+        onSelectChange={handleSelectChange}
         options={options}
         selectAccessibilityLabel="Select unit"
         type="number"
       />,
     )
 
+    await user.click(screen.getByRole('combobox', { name: 'Select unit: %' }))
+    expect(screen.getByRole('listbox')).toBeInTheDocument()
+
+    await user.click(screen.getByRole('option', { name: 'kg' }))
+
+    expect(handleSelectChange).toHaveBeenCalledWith('kilogram')
     expect(
-      screen.getByRole('combobox', { name: 'Select unit' }),
+      screen.getByRole('combobox', { name: 'Select unit: kg' }),
     ).toHaveTextContent('kg')
+    expect(screen.queryByRole('listbox')).not.toBeInTheDocument()
   })
 
-  it('opens the options list and updates the selected option on click', async () => {
-    const user = userEvent.setup()
-    const handleSelectChange = jest.fn()
+  it('renders an empty selection without crashing when options is empty', () => {
     render(
       <InputWithSelect
         label="Discount"
         name="discount"
-        onSelectChange={handleSelectChange}
-        options={options}
+        options={[]}
         selectAccessibilityLabel="Select unit"
         type="number"
       />,
     )
 
-    await user.click(screen.getByRole('combobox', { name: 'Select unit' }))
-    expect(screen.getByRole('listbox')).toBeInTheDocument()
-
-    await user.click(screen.getByRole('option', { name: 'kg' }))
-
-    expect(handleSelectChange).toHaveBeenCalledWith('kg')
     expect(
-      screen.getByRole('combobox', { name: 'Select unit' }),
-    ).toHaveTextContent('kg')
-    expect(screen.queryByRole('listbox')).not.toBeInTheDocument()
+      screen.getByRole('combobox', { name: 'Select unit:' }),
+    ).toHaveTextContent('')
   })
 })

package/tests/library.ts

@@ -23,6 +23,7 @@ export * as IconButton from '../src/stories/IconButton.stories'
 export * as InfiniteSelect from '../src/stories/InfiniteSelect.stories'
 export * as Input from '../src/stories/Input.stories'
 export * as InputWithButton from '../src/stories/InputWithButton.stories'
+export * as InputWithSelect from '../src/stories/InputWithSelect.stories'
 export * as Label from '../src/stories/Label.stories'
 export * as Menu from '../src/stories/Menu.stories'
 export * as Modal from '../src/stories/Modal.stories'

package/.claude/scheduled_tasks.lock

@@ -1 +0,0 @@
-{"sessionId":"f3e7999c-f3bc-4b21-918e-276243976569","pid":533964,"procStart":"130173790","acquiredAt":1785859988086}