diff --git a/packages/components-react/package.json b/packages/components-react/package.json index 5b24a291..c45288a7 100644 --- a/packages/components-react/package.json +++ b/packages/components-react/package.json @@ -41,7 +41,7 @@ ], "dependencies": { "@utrecht/component-library-css": "6.1.0", - "@utrecht/component-library-react": "7.1.0", + "@utrecht/component-library-react": "7.3.2", "clsx": "2.1.1", "date-fns": "3.6.0", "lodash.chunk": "4.2.0" diff --git a/packages/storybook/src/react-components/select/select.mdx b/packages/storybook/src/react-components/select/select.mdx index 017c1833..d626228a 100644 --- a/packages/storybook/src/react-components/select/select.mdx +++ b/packages/storybook/src/react-components/select/select.mdx @@ -24,23 +24,24 @@ import { CitationDocumentation } from "../../utils/CitationDocumentation.tsx"; ### Disabled - -### Required - - + ### Invalid + ### Focus + ### FocusVisible + ### Hover + diff --git a/packages/storybook/src/react-components/select/select.stories.tsx b/packages/storybook/src/react-components/select/select.stories.tsx index 4e62ca07..ed9efffe 100644 --- a/packages/storybook/src/react-components/select/select.stories.tsx +++ b/packages/storybook/src/react-components/select/select.stories.tsx @@ -5,7 +5,7 @@ import type { Meta, StoryObj } from '@storybook/react'; type Story = StoryObj; const meta = { - title: 'React Components/Select', + title: 'React Components/Form Field/Select', id: 'react-components-select', component: LuxSelect, subcomponents: {}, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5a3454f4..6bab01c3 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -114,8 +114,8 @@ importers: specifier: 6.1.0 version: 6.1.0 '@utrecht/component-library-react': - specifier: 7.1.0 - version: 7.1.0(@babel/runtime@7.25.0)(date-fns@3.6.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: 7.3.2 + version: 7.3.2(@babel/runtime@7.25.0)(date-fns@3.6.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) clsx: specifier: 2.1.1 version: 2.1.1 @@ -2783,11 +2783,42 @@ packages: '@utrecht/button-css@1.2.0': resolution: {integrity: sha512-aYqnmuT5HOshv8Kr9IvBsJef+2KNKRNwLPQHxNC2fSGXWDFzROAeChUr0A1Ylt45aAApAD/bxxIHHBAeS1PwEA==} + '@utrecht/button-react@2.0.1': + resolution: {integrity: sha512-i82z1a96vVFwMCh/m1a88LRn2TZWrifTaP1LP0+R4MdXIfJBfXMwnwzHWi4W1DeVDLMqyiLxCUIXwwsKiSZBxA==} + peerDependencies: + '@babel/runtime': '*' + react: '18' + react-dom: '18' + + '@utrecht/calendar-css@1.2.1': + resolution: {integrity: sha512-kcsrGA6Z0ugHJxab2qaOISYl/yLdKSpV2Ubu1oc4M4S94LYzpPIpWMWyxTOQxE/GdelWC/wVyxDnQz1So5RhvQ==} + + '@utrecht/calendar-react@1.0.3': + resolution: {integrity: sha512-U15R+guV5yFau8/J0864xsvGaCDaKP7VggGHuy218n/6yHmkKs1Sc7wDtKJlm9LDHfzoBzxSoNJRibI7y3Ixlw==} + peerDependencies: + '@babel/runtime': '*' + react: '18' + react-dom: '18' + + '@utrecht/checkbox-react@1.0.1': + resolution: {integrity: sha512-uJemMDcS1pOewVdgZa8GYShin+9NvhzEJKeFfDiWsewz41126OzbvLDAn/Oyl00Bv45Whnh3VU2eDXQSB1itbg==} + peerDependencies: + '@babel/runtime': '*' + react: '18' + react-dom: '18' + + '@utrecht/combobox-react@0.0.2': + resolution: {integrity: sha512-wbmYXqJtIG8exgZ5WlaE15ZacMqNGLVk4n67C20nPoBa2LRB2bJMjhOzkna27h6ULFQ/b/KoN9RRe8Cq3qoNQA==} + peerDependencies: + '@babel/runtime': ^7.23.6 + react: '18' + react-dom: '18' + '@utrecht/component-library-css@6.1.0': resolution: {integrity: sha512-+2qarCIgsNpLpxOcG5Rw3WLqNBASoWJFHMI4RlZJm5JTFfnhnl2wC/ylK23wOOooLNNCmsGrLdvSHHrEThJynw==} - '@utrecht/component-library-react@7.1.0': - resolution: {integrity: sha512-TPYDkuGWKfvhkdFBPtVfUMEXjqqabSia++Ewf2FyRYuCSud/ZxWCkw53Pf7HXlEloAngQMc/BbrJB4f2Ok9B+Q==} + '@utrecht/component-library-react@7.3.2': + resolution: {integrity: sha512-TXmU/CTW8SnCtrXLcx/pz5t4MR0K0cM6b50spxggt2E2+7cgoUfHu1Vhgs0QaAq1YaRoQnfIrfVefqru4uVG+A==} peerDependencies: '@babel/runtime': ^7.23.6 date-fns: ^2.30.0 @@ -2809,18 +2840,60 @@ packages: '@utrecht/document-css@1.1.0': resolution: {integrity: sha512-navpa20l9U2c/gMDNzZ83MF2/VfXJBXVIGw6CoZ7s3uNbR92H6MAvvSn29C/Kg9QGjDAhDd7P5dIyjQ1KrwJfg==} + '@utrecht/fieldset-react@1.0.1': + resolution: {integrity: sha512-u7dXKkCeZGWpnGX0YXfqkMqvp9mWDpo7mVwCqW4kwL5qLBi4sguMCfFpHBNBWESna/jB85o6Kf4ouFoURTO0QQ==} + peerDependencies: + '@babel/runtime': '*' + react: '18' + react-dom: '18' + + '@utrecht/form-field-checkbox-react@1.0.2': + resolution: {integrity: sha512-ftkN5HI13Dx7n87/TCrDhctHibriXQ6ejJy26ZYKQiVqd2aTPDuyen9Z3SUFi3vAI09mp/TEjKP7xnpHLLyvRQ==} + peerDependencies: + '@babel/runtime': '*' + react: '18' + react-dom: '18' + '@utrecht/form-field-css@1.3.0': resolution: {integrity: sha512-AcMdfFMznH/h1RYwqSij93AR35Wv7ov/1pk6jEZXegCyvqPQi1L636QYNBmPN+HyZJUXymRbA85gXONVIRoMBg==} '@utrecht/form-field-description-css@1.3.0': resolution: {integrity: sha512-Be38ejgdCGmEpLdlJTwhqqQPUbRufjKXT9NNqxrVrHnsqfdmNkXaFXQmRTHVBE3I4Jp+JhG+Qsnw6nghytQKTA==} + '@utrecht/form-field-description-react@1.0.1': + resolution: {integrity: sha512-cKH6jAtTzJssAJCBB02tP8ROLzaiSGt7X8VEyq7uKnaITdcCedDQY4tKY/4bRUD8OodAF+N3vp9qXlsurUarnw==} + peerDependencies: + '@babel/runtime': '*' + react: '18' + react-dom: '18' + '@utrecht/form-field-error-message-css@1.3.1': resolution: {integrity: sha512-G8NLWwzL4LuCODpOyMH4fuisgYGBJ+YiBT55w+HVbUR9SyrIBL2gWs3jNyEnTFF4HtjCTUHSS/n/CZqqrq+Yhg==} + '@utrecht/form-field-error-message-react@1.0.1': + resolution: {integrity: sha512-O64RjMS+Be75wizEt1wxAbqCMalZSAQbWspJqw4/O1L7viJKIWp82nLyqqfPy39aAMbm+d440FEcLmZ0rgkWkg==} + peerDependencies: + '@babel/runtime': '*' + react: '18' + react-dom: '18' + + '@utrecht/form-field-react@1.0.1': + resolution: {integrity: sha512-7K0d35HB5HSWZVrlaohlRcJs/8j/s2ZxfvKMsMId321JkL3ZLdLuLMKqjJkOucAa1UGCHnCyqCHXslNpW9q0dA==} + peerDependencies: + '@babel/runtime': '*' + react: '18' + react-dom: '18' + '@utrecht/form-label-css@1.3.0': resolution: {integrity: sha512-EwjgD5Rw0LjJffv2dyAwhHwD0cuMjAPfM/H4395ldPuACnYiqavOF2IB0l0fB8nMvj3XC/VO2Q2m15neocXssg==} + '@utrecht/form-label-react@1.0.1': + resolution: {integrity: sha512-g0x0f5fhcjAwnJFKgFMiMIdKXgd0R/fEGSl+1G7CBGmg1RRM0MopkwJiyaAF0MvUvhWhdWuEE7bNVmxNXdfAKQ==} + peerDependencies: + '@babel/runtime': '*' + react: '18' + react-dom: '18' + '@utrecht/heading-css@1.2.0': resolution: {integrity: sha512-d+H5TfhOKYN+YMau3l/4DR/K3mYjYGbZvxfzflxMD2HnHgOxgYC9YvH/FQysE19mKbepGZPzV1rMYoW/vcwmvg==} @@ -2830,18 +2903,46 @@ packages: '@utrecht/link-css@1.1.0': resolution: {integrity: sha512-L/R5rGvA2RrXJFw/k2l2U7ZgeJuz92pdFDbW1Rtw+7XBK5Z/e+YMpnlDL8fx5VmFk95xO4Jmgv1j6BYiI6vnqA==} + '@utrecht/link-react@1.0.1': + resolution: {integrity: sha512-cjowrM+s/P3RtN9miugDl2pI/DTaB1oQIVpRyrYDb1trTFMUNqpAdrXID1QvNjadc/3cXeV8MvJWsS3AQF901A==} + peerDependencies: + '@babel/runtime': '*' + react: '18' + react-dom: '18' + + '@utrecht/listbox-react@1.0.2': + resolution: {integrity: sha512-xInqmgHIzKj+YkLjk4m5gRfOcjxzc6sasFiEGZIiKe6fmOub1eRL59d22/gA3pmGqVPTn1C7IRhnPrlRU39mWQ==} + peerDependencies: + '@babel/runtime': '*' + react: '18' + react-dom: '18' + '@utrecht/paragraph-css@1.1.0': resolution: {integrity: sha512-HxkYL/W0tkHngucdBFHOK8t7OmUmlnz4uIXP4GBXdA299Hp+RGb/1vaH5A2RaIN0P7/4v6EkuV4lquOcHx0K0Q==} '@utrecht/pre-heading-css@1.2.0': resolution: {integrity: sha512-64r4F/uXyEnQkquCdP5hSQsSfqg0i4tME0/yQ02q1EkU3grUXSebIYi2nwD0Cq2weBBNdyelNwdI2f/slNMMVA==} + '@utrecht/radio-button-react@1.0.1': + resolution: {integrity: sha512-5vMy27n+czlByd16YtV9oP8vczTSED5fqEagztBdv8YjYOfJMt+lt402ZzkQNknQA/+aEKtqhenILcWs/W4kAg==} + peerDependencies: + '@babel/runtime': '*' + react: '18' + react-dom: '18' + '@utrecht/select-css@1.2.0': resolution: {integrity: sha512-bgW5aTjsh47jPxzwHrqJDimQjogIQexjTXX02RutMxmfrGEUrZdL2VrI9zWuRknU9PN93DOnu1hr656fIMLk5w==} '@utrecht/textbox-css@1.3.1': resolution: {integrity: sha512-O0ouypWFt3SQRIrtUoEw5jnHdnHmT1b9AX8lQmoGPHRP0nbg/pRNasNRca9JAxAzc8I6dGe9KyDF94utmjNL+A==} + '@utrecht/textbox-react@1.0.1': + resolution: {integrity: sha512-kJPcxVz2k3fkSbr0RPz/14EF7ktLlLyH83bJl5autWvBYW3fqsIq9ZklIMMf30uErBWVvvdKWrl3KNGUQko5hQ==} + peerDependencies: + '@babel/runtime': ^7.23.6 + react: '18' + react-dom: '18' + '@utrecht/web-component-library-stencil@2.0.0': resolution: {integrity: sha512-tl4YctoEi9nzSrbFLgmIm/BOJzke82NF7TJcmNgzQhBDmWykZNbeNHdx7CE07+TmMR81ZWs8s/umiTCTC6pRUQ==} @@ -3725,6 +3826,10 @@ packages: resolution: {integrity: sha512-t/Ygsytq+R995EJ5PZlD4Cu56sWa8InXySaViRzw9apusqsOO2bQP+SbYzAhR0pFKoB+43lYy8rWban9JSuXnA==} engines: {node: '>= 0.4'} + date-fns@2.30.0: + resolution: {integrity: sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==} + engines: {node: '>=0.11'} + date-fns@3.6.0: resolution: {integrity: sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==} @@ -10480,11 +10585,59 @@ snapshots: '@utrecht/button-css@1.2.0': {} + '@utrecht/button-react@2.0.1(@babel/runtime@7.25.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@babel/runtime': 7.25.0 + clsx: 2.1.1 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + + '@utrecht/calendar-css@1.2.1': {} + + '@utrecht/calendar-react@1.0.3(@babel/runtime@7.25.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@babel/runtime': 7.25.0 + '@utrecht/button-react': 2.0.1(@babel/runtime@7.25.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@utrecht/calendar-css': 1.2.1 + clsx: 2.1.1 + date-fns: 2.30.0 + lodash.chunk: 4.2.0 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + + '@utrecht/checkbox-react@1.0.1(@babel/runtime@7.25.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@babel/runtime': 7.25.0 + clsx: 2.1.1 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + + '@utrecht/combobox-react@0.0.2(@babel/runtime@7.25.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@babel/runtime': 7.25.0 + clsx: 2.1.1 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + '@utrecht/component-library-css@6.1.0': {} - '@utrecht/component-library-react@7.1.0(@babel/runtime@7.25.0)(date-fns@3.6.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@utrecht/component-library-react@7.3.2(@babel/runtime@7.25.0)(date-fns@3.6.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@babel/runtime': 7.25.0 + '@utrecht/button-react': 2.0.1(@babel/runtime@7.25.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@utrecht/calendar-react': 1.0.3(@babel/runtime@7.25.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@utrecht/checkbox-react': 1.0.1(@babel/runtime@7.25.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@utrecht/combobox-react': 0.0.2(@babel/runtime@7.25.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@utrecht/fieldset-react': 1.0.1(@babel/runtime@7.25.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@utrecht/form-field-checkbox-react': 1.0.2(@babel/runtime@7.25.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@utrecht/form-field-description-react': 1.0.1(@babel/runtime@7.25.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@utrecht/form-field-error-message-react': 1.0.1(@babel/runtime@7.25.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@utrecht/form-field-react': 1.0.1(@babel/runtime@7.25.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@utrecht/form-label-react': 1.0.1(@babel/runtime@7.25.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@utrecht/link-react': 1.0.1(@babel/runtime@7.25.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@utrecht/listbox-react': 1.0.2(@babel/runtime@7.25.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@utrecht/radio-button-react': 1.0.1(@babel/runtime@7.25.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@utrecht/textbox-react': 1.0.1(@babel/runtime@7.25.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) clsx: 2.1.1 lodash.chunk: 4.2.0 react: 18.3.1 @@ -10498,28 +10651,103 @@ snapshots: '@utrecht/document-css@1.1.0': {} + '@utrecht/fieldset-react@1.0.1(@babel/runtime@7.25.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@babel/runtime': 7.25.0 + clsx: 2.1.1 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + + '@utrecht/form-field-checkbox-react@1.0.2(@babel/runtime@7.25.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@babel/runtime': 7.25.0 + '@utrecht/checkbox-react': 1.0.1(@babel/runtime@7.25.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@utrecht/form-field-description-react': 1.0.1(@babel/runtime@7.25.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@utrecht/form-field-error-message-react': 1.0.1(@babel/runtime@7.25.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@utrecht/form-field-react': 1.0.1(@babel/runtime@7.25.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@utrecht/form-label-react': 1.0.1(@babel/runtime@7.25.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + clsx: 2.1.1 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + '@utrecht/form-field-css@1.3.0': {} '@utrecht/form-field-description-css@1.3.0': {} + '@utrecht/form-field-description-react@1.0.1(@babel/runtime@7.25.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@babel/runtime': 7.25.0 + clsx: 2.1.1 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + '@utrecht/form-field-error-message-css@1.3.1': {} + '@utrecht/form-field-error-message-react@1.0.1(@babel/runtime@7.25.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@babel/runtime': 7.25.0 + clsx: 2.1.1 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + + '@utrecht/form-field-react@1.0.1(@babel/runtime@7.25.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@babel/runtime': 7.25.0 + clsx: 2.1.1 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + '@utrecht/form-label-css@1.3.0': {} + '@utrecht/form-label-react@1.0.1(@babel/runtime@7.25.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@babel/runtime': 7.25.0 + clsx: 2.1.1 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + '@utrecht/heading-css@1.2.0': {} '@utrecht/heading-group-css@1.2.0': {} '@utrecht/link-css@1.1.0': {} + '@utrecht/link-react@1.0.1(@babel/runtime@7.25.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@babel/runtime': 7.25.0 + clsx: 2.1.1 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + + '@utrecht/listbox-react@1.0.2(@babel/runtime@7.25.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@babel/runtime': 7.25.0 + clsx: 2.1.1 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + '@utrecht/paragraph-css@1.1.0': {} '@utrecht/pre-heading-css@1.2.0': {} + '@utrecht/radio-button-react@1.0.1(@babel/runtime@7.25.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@babel/runtime': 7.25.0 + clsx: 2.1.1 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + '@utrecht/select-css@1.2.0': {} '@utrecht/textbox-css@1.3.1': {} + '@utrecht/textbox-react@1.0.1(@babel/runtime@7.25.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@babel/runtime': 7.25.0 + clsx: 2.1.1 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + '@utrecht/web-component-library-stencil@2.0.0': dependencies: '@stencil/core': 4.18.3 @@ -11578,6 +11806,10 @@ snapshots: es-errors: 1.3.0 is-data-view: 1.0.1 + date-fns@2.30.0: + dependencies: + '@babel/runtime': 7.25.0 + date-fns@3.6.0: {} de-indent@1.0.2: {}