"node": "14.18.1",
"npm": "6.14.15"
"os" : windows

Getting this error . It looks this folder is missing https://github.com/strapi/design-system/tree/main/packages/strapi-design-system/src/carousel

Please fix this asap

ModuleNotFoundError: Module not found: Error: Can't resolve '@strapi/design-system/Carousel' in 'D:\project\node_modules\@strapi\plugin-upload\admin\src\components\MediaLibraryInput\Carousel' at D:\project\node_modules\webpack\lib\Compilation.js:1765:28 at D:\project\node_modules\webpack\lib\NormalModuleFactory.js:730:13 at eval (eval at create (D:\project\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:10:1) at D:\project\node_modules\webpack\lib\NormalModuleFactory.js:273:22 at eval (eval at create (D:\project\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:9:1) at D:\project\node_modules\webpack\lib\NormalModuleFactory.js:402:22 at D:\project\node_modules\webpack\lib\NormalModuleFactory.js:117:11 at D:\project\node_modules\webpack\lib\NormalModuleFactory.js:646:24 at D:\project\node_modules\webpack\lib\NormalModuleFactory.js:800:8 at D:\project\node_modules\webpack\lib\NormalModuleFactory.js:920:5 at D:\project\node_modules\neo-async\async.js:6883:13 at D:\project\node_modules\webpack\lib\NormalModuleFactory.js:903:45 at finishWithoutResolve (D:\project\node_modules\enhanced-resolve\lib\Resolver.js:296:11) at D:\project\node_modules\enhanced-resolve\lib\Resolver.js:362:15 at D:\project\node_modules\enhanced-resolve\lib\Resolver.js:410:5 at eval (eval at create (D:\project\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1) resolve '@strapi/design-system/Carousel' in 'D:\project\node_modules\@strapi\plugin-upload\admin\src\components\MediaLibraryInput\Carousel' Parsed request is a module using description file: D:\project\node_modules\@strapi\plugin-upload\package.json (relative path: ./admin/src/components/MediaLibraryInput/Carousel) Field 'browser' doesn't contain a valid alias configuration resolve as module D:\project\node_modules\@strapi\plugin-upload\admin\src\components\MediaLibraryInput\Carousel\node_modules doesn't exist or is not a directory D:\project\node_modules\@strapi\plugin-upload\admin\src\components\MediaLibraryInput\node_modules doesn't exist or is not a directory D:\project\node_modules\@strapi\plugin-upload\admin\src\components\node_modules doesn't exist or is not a directory D:\project\node_modules\@strapi\plugin-upload\admin\src\node_modules doesn't exist or is not a directory D:\project\node_modules\@strapi\plugin-upload\admin\node_modules doesn't exist or is not a directory looking for modules in D:\project\node_modules\@strapi\plugin-upload\node_modules D:\project\node_modules\@strapi\plugin-upload\node_modules\@strapi\design-system doesn't exist D:\project\node_modules\@strapi\node_modules doesn't exist or is not a directory D:\project\node_modules\node_modules doesn't exist or is not a directory looking for modules in D:\project\node_modules existing directory D:\project\node_modules\@strapi\design-system using description file: D:\project\node_modules\@strapi\design-system\package.json (relative path: .) using description file: D:\project\node_modules\@strapi\design-system\package.json (relative path: ./Carousel) no extension Field 'browser' doesn't contain a valid alias configuration D:\project\node_modules\@strapi\design-system\Carousel doesn't exist .js Field 'browser' doesn't contain a valid alias configuration D:\project\node_modules\@strapi\design-system\Carousel.js doesn't exist .jsx Field 'browser' doesn't contain a valid alias configuration D:\project\node_modules\@strapi\design-system\Carousel.jsx doesn't exist .react.js Field 'browser' doesn't contain a valid alias configuration D:\project\node_modules\@strapi\design-system\Carousel.react.js doesn't exist as directory D:\project\node_modules\@strapi\design-system\Carousel doesn't exist D:\node_modules doesn't exist or is not a directory D:\node_modules doesn't exist or is not a directory ModuleNotFoundError: Module not found: Error: Can't resolve '@strapi/design-system/Carousel' in 'D:\project\node_modules\@strapi\plugin-upload\admin\src\components\MediaLibraryInput\Carousel' at D:\project\node_modules\webpack\lib\Compilation.js:1765:28 at D:\project\node_modules\webpack\lib\NormalModuleFactory.js:730:13 at eval (eval at create (D:\project\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:10:1) at D:\project\node_modules\webpack\lib\NormalModuleFactory.js:273:22 at eval (eval at create (D:\project\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:9:1) at D:\project\node_modules\webpack\lib\NormalModuleFactory.js:402:22 at D:\project\node_modules\webpack\lib\NormalModuleFactory.js:117:11 at D:\project\node_modules\webpack\lib\NormalModuleFactory.js:646:24 at D:\project\node_modules\webpack\lib\NormalModuleFactory.js:800:8 at D:\project\node_modules\webpack\lib\NormalModuleFactory.js:920:5 at D:\project\node_modules\neo-async\async.js:6883:13 at D:\project\node_modules\webpack\lib\NormalModuleFactory.js:903:45 at finishWithoutResolve (D:\project\node_modules\enhanced-resolve\lib\Resolver.js:296:11) at D:\project\node_modules\enhanced-resolve\lib\Resolver.js:362:15 at D:\project\node_modules\enhanced-resolve\lib\Resolver.js:410:5 at eval (eval at create (D:\project\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1) resolve '@strapi/design-system/Carousel' in 'D:\project\node_modules\@strapi\plugin-upload\admin\src\components\MediaLibraryInput\Carousel' Parsed request is a module using description file: D:\project\node_modules\@strapi\plugin-upload\package.json (relative path: ./admin/src/components/MediaLibraryInput/Carousel) Field 'browser' doesn't contain a valid alias configuration resolve as module D:\project\node_modules\@strapi\plugin-upload\admin\src\components\MediaLibraryInput\Carousel\node_modules doesn't exist or is not a directory D:\project\node_modules\@strapi\plugin-upload\admin\src\components\MediaLibraryInput\node_modules doesn't exist or is not a directory D:\project\node_modules\@strapi\plugin-upload\admin\src\components\node_modules doesn't exist or is not a directory D:\project\node_modules\@strapi\plugin-upload\admin\src\node_modules doesn't exist or is not a directory D:\project\node_modules\@strapi\plugin-upload\admin\node_modules doesn't exist or is not a directory looking for modules in D:\project\node_modules\@strapi\plugin-upload\node_modules D:\project\node_modules\@strapi\plugin-upload\node_modules\@strapi\design-system doesn't exist D:\project\node_modules\@strapi\node_modules doesn't exist or is not a directory D:\project\node_modules\node_modules doesn't exist or is not a directory looking for modules in D:\project\node_modules existing directory D:\project\node_modules\@strapi\design-system using description file: D:\project\node_modules\@strapi\design-system\package.json (relative path: .) using description file: D:\project\node_modules\@strapi\design-system\package.json (relative path: ./Carousel) no extension Field 'browser' doesn't contain a valid alias configuration D:\project\node_modules\@strapi\design-system\Carousel doesn't exist .js Field 'browser' doesn't contain a valid alias configuration D:\project\node_modules\@strapi\design-system\Carousel.js doesn't exist .jsx Field 'browser' doesn't contain a valid alias configuration D:\project\node_modules\@strapi\design-system\Carousel.jsx doesn't exist .react.js Field 'browser' doesn't contain a valid alias configuration D:\project\node_modules\@strapi\design-system\Carousel.react.js doesn't exist as directory D:\project\node_modules\@strapi\design-system\Carousel doesn't exist D:\node_modules doesn't exist or is not a directory D:\node_modules doesn't exist or is not a directory npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] build: strapi build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\USER\AppData\Roaming\npm-cache_logs\2022-03-07T11_19_42_847Z-debug.log`

Bug report

Required System information

• Node.js version: 16.14.2
• NPM version: 8.5.0
• Strapi version: 4.2.2
• Database: PostgreSQL 13 (Alpine)
• Operating system: Ubuntu 20.04.4

Describe the bug

When updating component with beforeHook Strapi Admin UI is not changing value of number field. New value appears only after page refresh or interacting with field. (Put request is sending data)

Steps to reproduce the behavior

1. Create collection/single
2. Create component with "Number" field
3. Add component to collection (tested as single component)
4. Add before update hook that somehow changes field value with entity service update (code will be below)
5. Save and check network / field

Expected behavior

Field value should refresh as it working with other field types inside component.

Screenshots

After clicking save

Field focus

Remove focus

Code snippets

module.exports = {
  beforeUpdate: async (event) => {
    console.log(event.params.data.test);

    if (event.params.data.test.id) {
      await strapi.entityService.update(
        'test.test',
        event.params.data.test.id,
        {
          data: { text: '1', number: 1, boolean: true },
        },
      );
    }
  },
};

Additional context

Request:

{
      createdAt: "2022-07-04T23:58:43.896Z"
      createdBy: 1
      id: 1
      publishedAt: null
      sitemap_exclude: false
      test: {}
      updateField: "123345"
      updatedAt: "2022-07-05T00:10:28.626Z"
      updatedBy: 1
}

Response:

{
"id":1,
      "createdAt":"2022-07-04T23:58:43.896Z",
      "updatedAt":"2022-07-05T00:10:33.493Z",
      "publishedAt":null,
      "sitemap_exclude":false,
      "updateField":"123345",
      "test":{"id":4,"text":"1","number":1,"boolean":true}
}

Bug report

Required System information

• Npm version: 8.11.0
• NodeJS version: 16.15.1
• Strapi Design System version: https://registry.npmjs.org/@strapi/design-system/-/design-system-0.0.1-alpha.79.tgz
• Browser: Chrome Version 102.0.5005.115 (official build) (64-Bit)

Describe the bug

Can´t get the Flex Component to display a gap.

https://design-system-git-main-strapijs.vercel.app/?path=/docs/design-system-technical-components-flex--base
says:
"gap
Supports responsive values
{ desktop: number, mobile: number, tablet: number } | number | number[] | string"
but does not give examples.

<Flex direction="column" gap={10}>
<Flex direction="column" gap="10">
<Flex direction="column" gap="10px">
<Flex direction="column" gap={"10"}>
<Flex direction="column" gap={"10px"}>
<Flex direction="column" gap={{desktop:10}}>
etc.

all don´t show a gap.

Steps to reproduce the behavior

<Flex direction="column" gap={10}>
      <div>test1</div>
      <div>test2</div>
      <div>test3</div>
      <div>test4</div>
      <div>test5</div>
</Flex>

Additional context

I´m developing a plugin for "@strapi/strapi": "4.1.8"

Thank you all for your work!

Bug report

The alignment of components and the button to add a new component in the content-type-builder looks a bit off.

I'd suggest:

• indent the bullet points
• visually align the plus icon better

Required System information

• Node.js version: Not applicable.
• NPM version: Not applicable.
• Strapi version: v4
• Database: Not applicable.
• Operating system: Not applicable.

Steps to reproduce the behavior

1. Go to to content-type-builder
2. Add a few components

Expected behavior

A good alignment would help to make the hierarchy clearer. Components should be indented within the toggled area.

Screenshots

Current	Proposal

// cc @tlmn

Bug report

Describe the bug

In a date picker, I'm trying to type in the year of the date string manually. When trying to delete the year (in order to change it to a different year) from eg. 06/03/2021 the year string fills up automatically with preceding 0s to 4 digits after a short moment:06/03/0202

I would like to enter a date from the 1950s. Using the UI instead of typing, to get back 70 years month by month would take a long time.

Steps to reproduce the behavior

1. Open a collection type that contains a date picker.
2. Click on a day to prefill the date string
3. Try to change the year of the date string (by deleting the year from the end of the string)

Expected behavior

The date string should be editable without being overwritten automatically. Only after clicking outside the input field or pressing enter, a correction of the string should apply.

Screenshots

System

• Node.js version: v12.20.1
• NPM version:
• Strapi version: v3.6.3
• Database: Postgres
• Operating system: Docker/Ubuntu

Additional context

strapi/buffet#68

This work is licensed under what license? Could you add it to the project's codebase?

Thanks

Bug report

Required System information

• Npm version: 6.14.9
• NodeJS version: >=12.x.x <=16.x.x
• Strapi Design System version: 1.1.1
• Browser: N/A

Describe the bug

When including @strapi/icons v1.1.1 as a dependency in my Strapi app, running it locally works fine but once I deploy (Heroku in my case) the build crashes with the following error:

-----> Installing dependencies
       Installing node modules (package.json)
       npm ERR! code ERESOLVE
       npm ERR! ERESOLVE unable to resolve dependency tree
       npm ERR! 
       npm ERR! While resolving: [email protected]
       npm ERR! Found: @strapi/[email protected]
       npm ERR! node_modules/@strapi/icons
       npm ERR!   @strapi/icons@"1.1.1" from the root project
       npm ERR! 
       npm ERR! Could not resolve dependency:
       npm ERR! peer @strapi/icons@"^0.0.1-alpha.73" from @strapi/[email protected]
       npm ERR! node_modules/@strapi/design-system
       npm ERR!   @strapi/design-system@"1.1.1" from the root project
       npm ERR! 
       npm ERR! Fix the upstream dependency conflict, or retry
       npm ERR! this command with --force, or --legacy-peer-deps
       npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

I narrowed this down to the icons package by removing all of my dependencies and deploying to Heroku, which ran a successful build. I continued to restore other packages with successful builds until I re-introduced the icons package. No other custom plugins or packages were part of these builds.

Steps to reproduce the behavior

1. Run yarn add @strapi/[email protected]
2. Deploy app to Heroku (it's the only service I've been using for Strapi so far)
3. The build should fail with the error message listed above.

Expected behavior

To have no mention of version 0.0.1-alpha.73 of any packages.

Screenshots

Here is a quick preview of my Heroku builds where I removed all dependencies and restored each one successfully until icons was re-introduced.

Bug report

Required System information

• Npm version 8.12.1
• NodeJS version: v16.15.1
• Strapi Design System version: @strapi/[email protected]
• Browser: Firefox

Describe the bug

Adding a JSX node object to the "hint" property of a TextInput generates a warning Warning: Failed prop type: Invalid prop 'hint' of type 'object' supplied to 'Field', expected so adding a line break to it is not possible without spaming the console

Steps to reproduce the behavior

1. Create a TextInput
2. Add a hint with linebreak as string hint="aaa<br/>bbb"
   
3. the "<br/ >" appears on the page
4. Replace it by a JSX object hint={<span>aaa<br/>bbb</span>} then it works
   
5. But your console is obfuscated by warnings

Expected behavior

The console should remain clean

Screenshots

Code snippets

<TextInput
  name="myInput"
  hint={
    <span>
      - First line
      <br/>
      - Second line
    </span>
  }
  value={123}
/>

Additional context

Adding node propType for hints would be very useful here https://github.com/strapi/design-system/blob/main/packages/strapi-design-system/src/TextInput/TextInput.js#L59

PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.node,
    PropTypes.arrayOf(PropTypes.node),
])

Bug report

Required System information

• Node.js version: v14
• NPM version: v6
• Strapi version: v4.2.2
• Database: SQLite3
• Operating system: Linux Mint 20.3

Describe the bug

Sometimes when selecting a boolean value it will select the opposite value then where your mouse pointer is. This appears to be random per boolean field and it looks like it depends on if the boolean had a value before and you click clear

Steps to reproduce the behavior

Loom video shared internally as it contain's customer information. See internal TID1663 or my post in the product slack channel.

Short summary:

1. Create a content-type with a boolean field
2. Try to click on the boolean false
3. If the value is properly selected, hit clear
4. Try to click on true
5. Notice that the false value is selected instead

Alternatively repeat this logic selecting true first, clear, then select false if you cannot reproduce.

Expected behavior

Boolean value should select the value your mouse is on

Additional context

EE Customer, Internal TID1663

  colors: {
    alternative100: '#f6ecfc',
    alternative200: '#e0c1f4',
    alternative500: '#ac73e6',
    alternative600: '#9736e8',
    alternative700: '#8312d1',
    danger100: '#fcecea',
    danger200: '#f5c0b8',
    danger500: '#ee5e52',
    danger600: '#d02b20',
    danger700: '#b72b1a',
    neutral0: '#ffffff',
    neutral100: '#f6f6f9',
    neutral1000: '#181826',
    neutral150: '#eaeaef',
    neutral200: '#dcdce4',
    neutral300: '#c0c0cf',
    neutral400: '#a5a5ba',
    neutral500: '#8e8ea9',
    neutral600: '#666687',
    neutral700: '#4a4a6a',
    neutral800: '#32324d',
    neutral900: '#212134',
    primary100: '#f0f0ff',
    primary200: '#d9d8ff',
    primary500: '#DC5C20',
    primary600: '#DC5C20',
    primary700: '#DC5C20',
    secondary100: '#eaf5ff',
    secondary200: '#b8e1ff',
    secondary500: '#66b7f1',
    secondary600: '#0c75af',
    secondary700: '#006096',
    success100: '#eafbe7',
    success200: '#c6f0c2',
    success500: '#5cb176',
    success600: '#328048',
    success700: '#2f6846',
    warning100: '#fdf4dc',
    warning200: '#fae7b9',
    warning500: '#f29d41',
    warning600: '#d9822f',
    warning700: '#be5d01',
  },
}

export default theme

This code overrides light theme colors only, but if I switch to dark theme everything goes back to default.

Bug report

Required System information

• Npm version: 6.14.17
• NodeJS version: v14.19.3
• Strapi Design System version: 1.1.1
• Browser: Firefox 101.0
• React/React-DOM version: 18.1.0
• NextJS version: 10.0.6

Describe the bug

I am using Next.js (React) and try to add starpi-design-system's Combobox. Error ReferenceError: Element is not defined occurred when NextJS page is loaded (reference code below). Box component alone is working.

Steps to reproduce the behavior

1. ComboBox is added according to documentation.

function HomePage {
  const [comboValue, setComboValue] = useState('');

  return (
      <>
        <Box padding={8} background="neutral100">
          <Combobox label="Food" value={comboValue} onChange={setComboValue}>
            <ComboboxOption value="hamburger">Hamburger</ComboboxOption>
            <ComboboxOption value="bagel">Bagel</ComboboxOption>
            <ComboboxOption value="tartuffo">Tartuffo</ComboboxOption>
            <ComboboxOption value="carbonara">Carbonara</ComboboxOption>
          </Combobox>

4. Start NextJS with yarn dev
5. load the page at localhost:3000
6. See error

Full Error Log

yarn dev
yarn run v1.22.18
$ node server/server.js
Loaded env from /.env.local
info  - Using external babel configuration from /.babelrc
event - compiled successfully
> Ready on http://localhost:3000
event - build page: /404
wait  - compiling...
event - build page: /
event - build page: /
event - compiled successfully
ReferenceError: Element is not defined
    at eval (webpack-internal:///./src/Popover/Popover.js:180:75)
    at Module../src/Popover/Popover.js (\node_modules\@strapi\design-system\Combobox.development.js:598:1)
    at __webpack_require__ (\node_modules\@strapi\design-system\Combobox.development.js:30:30)
    at eval (webpack-internal:///./src/Popover/index.js:2:66)
    at Module../src/Popover/index.js (\node_modules\@strapi\design-system\Combobox.development.js:610:1)
    at __webpack_require__ (\node_modules\@strapi\design-system\Combobox.development.js:30:30)
    at eval (webpack-internal:///./src/Combobox/Combobox.js:24:67)
    at Module../src/Combobox/Combobox.js (\node_modules\@strapi\design-system\Combobox.development.js:370:1)
    at __webpack_require__ (\node_modules\@strapi\design-system\Combobox.development.js:30:30)
    at eval (webpack-internal:///./src/Combobox/index.js:2:67)
    at Module../src/Combobox/index.js (\node_modules\@strapi\design-system\Combobox.development.js:418:1)
    at __webpack_require__ (\node_modules\@strapi\design-system\Combobox.development.js:30:30)
    at \node_modules\@strapi\design-system\Combobox.development.js:94:18
    at \node_modules\@strapi\design-system\Combobox.development.js:97:10
    at webpackUniversalModuleDefinition (\node_modules\@strapi\design-system\Combobox.development.js:3:20)
    at Object.<anonymous> (\node_modules\@strapi\design-system\Combobox.development.js:10:3)
ReferenceError: Element is not defined
    at eval (webpack-internal:///./src/Popover/Popover.js:180:75)
    at Module../src/Popover/Popover.js (\node_modules\@strapi\design-system\Combobox.development.js:598:1)
    at __webpack_require__ (\node_modules\@strapi\design-system\Combobox.development.js:30:30)
    at eval (webpack-internal:///./src/Popover/index.js:2:66)
    at Module../src/Popover/index.js (\node_modules\@strapi\design-system\Combobox.development.js:610:1)
    at __webpack_require__ (\node_modules\@strapi\design-system\Combobox.development.js:30:30)
    at eval (webpack-internal:///./src/Combobox/Combobox.js:24:67)
    at Module../src/Combobox/Combobox.js (\node_modules\@strapi\design-system\Combobox.development.js:370:1)
    at __webpack_require__ (\node_modules\@strapi\design-system\Combobox.development.js:30:30)
    at eval (webpack-internal:///./src/Combobox/index.js:2:67)
    at Module../src/Combobox/index.js (\node_modules\@strapi\design-system\Combobox.development.js:418:1)
    at __webpack_require__ (\node_modules\@strapi\design-system\Combobox.development.js:30:30)
    at \node_modules\@strapi\design-system\Combobox.development.js:94:18
    at \node_modules\@strapi\design-system\Combobox.development.js:97:10
    at webpackUniversalModuleDefinition (\node_modules\@strapi\design-system\Combobox.development.js:3:20)
    at Object.<anonymous> (\node_modules\@strapi\design-system\Combobox.development.js:10:3)

Bug report

Required System information

• Npm version 8.3.1
• NodeJS version: 16.14.0
• Strapi Design System version: 1.0.0
• Browser: chrome: chrome 100

Describe the bug

custom fonts do not apply to the text input component
so our input fields are using browser default fonts

Steps to reproduce the behavior

1. go to storybook -> input field
2. type something on basic text input
3. check the applied font on computers on your browser, you will see default browser fonts

Expected behavior

we want this font ( global font styles ) to be applied to text inputs
--apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif

Screenshots

Code snippets

I'm raising a simple pr to inherit input font exactly like our textareas

Bug report

Required System information

• Node.js version: 16.13.0
• NPM version: 8.10.0
• Strapi version: 4.2.0
• Database: MySQL
• Operating system: macOS 12.4

Describe the bug

The content manager is not using the system font on Safari, Helvetica Neue is used instead of San Francisco. The bug is not present in other browsers.

Steps to reproduce the behavior

Use a Safari extension like WhatFont to inspect the fonts on the page.

Expected behavior

San Francisco should be used instead of Helvetica Neue as it is the macOS system font.

Screenshots

Code snippets

https://github.com/strapi/strapi/blob/5cbb60ce4b652e84dd8d65ffa2713437ecb4e619/packages/core/admin/admin/src/content-manager/components/Wysiwyg/EditorStylesContainer.js#L19

Additional context

This can be fixed by replacing --apple-system with -apple-system which is the correct font family name.

Currently the Select and Combobox components are very complex and complicated to understand. It is hard to extend them, because the way events are handled get in the way.

This leads to a problem, that we still have react-select in the codebase of @strapi/strapi. In the content-squad we will need to extend both components in the near future. Before-hand we'd like to explore, if we can make both components easier to maintain, by using a framework like: https://github.com/downshift-js/downshift or https://www.radix-ui.com/docs/primitives/components/select .

Bug report

Required System information

• Node.js version: 14.7.6
• NPM version: 8.5.3
• Strapi version: 4.1.5
• Database: postgresql
• Operating system: Mac OS

Describe the bug

I Have a Collection-Type with a Dynamic Zone that has around 70+ Selectable Components
When i open the Content-Type-Builder and select the Collection-Type
The Browser Freezes for 30-60 seconds and is unresponsive
After that i can click on things, but if i do an action like editing a field or changing to another Collection-type that has this setup it does the same again

I Ran a JS Profiler and the culprit seems to be the FontAwesome implementation

Steps to reproduce the behavior

1. Create a Collection Type that has a Dynamic Zone
2. Select 70+ Component Types for the Dynamic Zone
3. Select the Collection-Type in the Content-Type-Builder

Expected behavior

Dont Freeze the Browser

Screenshots

Code snippets

If applicable, add code samples to help explain your problem.

Additional context

I think the Problem is that the react-fontawesome component thats used uses svg in js for the icons , and is not really optimized so it takes forever to load the icons.
I suggest moving to a classes + font solution to fix this problem.
I tried Wrapping the Fontawesome Components in React.memo but it didn't work.

It was suggested by Hicham on the discord to create an issue for this so it can be discussed with the team.

The current InputJSON component used in the content manager is not currently available via the design system.

This component should be added as it is quite useful for plugin developers for json inputs such as a field for the user to input request body data (my use case). The alternative at the moment is to either use a textarea or the developer creates their own version of it, neither of which are desirable alternative.

When in Content Manager and I try to Publish an item that is in Draft, I can get into the item, but there is no Publish or Save buttons. I found that it is being caused by the item in the h1 at the top of the div for the header that shares the space of those two buttons is too long and there is not a scroll bar to get to them. I went into inspector and deleted the h1, the Publish and Save showed up, I hit the Publish, and it worked.

Here is a link to the discord where I put a screenshot of the missing buttons and the too long header: https://discordapp.com/channels/811989166782021633/841755530007805983/943509621631516742

Bug report

When a decimal with a lot of decimals is used in the NumberInput, it renders the internal JS Number representation instead of a well formatted string.

Example: 00000000001 -> 1e-10

The latter can not be edited.

Required System information

• Strapi Design System version: 1.2.1

Additional context

• Refs strapi/strapi#13993

Hello !
I just wonder if we could use a local / google font instead of system fonts please ?

There is a weird bug that Table component actually hijacks keys like left, right, home, end etc. for elements within it.
Example code:

() => {
  const [content, setContent] = useState('Try using control keys');
  return <Table>
    <Box padding={10}>
        <Textarea placeholder="This is a content placeholder" label="Content" name="content" hint="Description line" error={content.length < 5 ? 'Content is too short' : undefined} onChange={e => setContent(e.target.value)}>
      {content}
    </Textarea>
  </Box>
</Table>;
}

Try editing it using arrow keys and home / end keys, they don't work.

Bug report

Required System information

• Npm version: 8.5.0
• NodeJS version: 16.4.2
• Strapi Design System version: 1.2.0
• Browser: Chrome

Describe the bug

The MenuItem component support internal links but not externals.

Steps to reproduce the behavior

1. Use the SimpleMenu and MenuItem components
2. Try to add a href/isExternal props to use the MenuItem component as an external link.

Hi there!

I was wondering if there are any plans for typescript support, or whether I should write type declarations and submit them to DefinitelyTyped. Which if I am not mistaken, is simply a matter of converting the propTypes and defaultTypes to typed functions and interfaces.

Please guide me to the correct way of contributing regarding this.

Required System information
Npm version: 8.5.0
NodeJS version: 16.4.2
Strapi Design System version: 1.2.0
Browser: Chrome
Describe the bug

While customizing a MenuItem components for our needs with SC, I figured that an error on SimpleMenu children proptype is trigger. IMO, the proptype should accept a react node instead of a strict type of component.

Steps to reproduce the behavior

• Use the SimpleMenu
• Customize a MenuItem with styled-component

const StyledMenuItem = styled(MenuItem)`
   ...
`;

• The SimpleMenu children proptype should trigger an error

As shown in the image above, on the left side it's the disabled Switch, but actually it has a default value although it can't be changed. But since the change of the design, there's no way I can tell if it's on or off. It's quite inconvinient. Please make it visually distinguishable. Thanks!

Bug report

Required System information

• Npm version: 8.5.4
• NodeJS version: v16.14.2
• Strapi Design System version: 4.3.2-beta1
• Browser: All

Describe the bug

This project has peer-dependencies errors

Steps to reproduce the behavior

npm install --strict-peer-deps

Expected behavior

Install dependencies successfully

Current behavior

 ERR_NPM_PEER_DEP_ISSUES  Unmet peer dependencies

.
└─┬ @strapi/strapi
  └─┬ @strapi/admin
    ├─┬ @strapi/design-system
    │ └── ✕ unmet peer @strapi/icons@^0.0.1-alpha.73: found 1.1.1 in @strapi/admin
    └─┬ react-virtualized
      ├── ✕ unmet peer react@"^15.3.0 || ^16.0.0-alpha": found 17.0.2 in @strapi/admin
      └── ✕ unmet peer react-dom@"^15.3.0 || ^16.0.0-alpha": found 17.0.2 in @strapi/admin

Additional context

The error occurs also with pnpm

When installing the DS on a nextjs project for instance and trying to use SubNav, it throws an error because it can't find the react-router-dom library (defined as a peer dependency)

Bug report

Required System information

I think version does not really matter for the issue.
I think v4.x.x all shows the same issue.

• Node.js version:
• NPM version:
• Strapi version: 4.3.1
• Database:
• Operating system: mac chrome browser

Describe the bug

When editing float field in Content manager, you won't be able to set "3.0" and store with precisions.
UI drops any tailing 0s leaving the value as 3

I think this could be controversial but IMO, UI should not be interfere with what user want to save as long as it's valid value.
3.0 3.00 3.000 all are valid and should be stored as is instead of 3 which could interpreted as integer when parsing graphql response.

Steps to reproduce the behavior

1. create a model with a float or decimal field
2. try to change value with some 0 precision such as 1.0 2.0 3.0000
3. UI removes .000 and sets the value as integer

Expected behavior

Don't change value if the value is valid

Screenshots

I am using Select component and it is working fine if i switch between routes.If i refresh the page which i use the Select components it shows the error:

ReferenceError: Element is not defined
at Module. (/node_modules/@strapi/design-system/Select.production.js:1:26212)

Describe the bug

A non-editable field should not show autocomplete options.

Steps to reproduce the behavior

1. Configue a view with a non-editable field.
2. Click on the field and see the autocomplete options.

Expected behavior

Non autocomplete options.

Screenshots

This issue was previously opened on the main Strapi repository

Bug report

Required System information

• Node.js version: Node v16
• NPM version: 8.4.0
• Strapi version: Strapi v4.2
• Database: postgres
• Operating system: Debian

Describe the bug

If you set the view for a model in the content-type builder to have isEditable: false on a boolean entry you can still clear the value

Steps to reproduce the behavior

1. Go to a collection
2. Click on configure the view
3. Scroll down to boolean value
4. set isEditable to false
5. See error

Expected behavior

The component correctly prevents changes on the toggle but the clear button is still rendered despite the above configuration.

Screenshots

I noticed two additional buttons for the Select Canvas:

• Show the error state
• Show the disabled state

Take a look at the screenshot:

And at the same time, there's information -> This story is not configured to handle controls.

I'm just wondering: is there a reason why the controls aren't configured?

The plugin is super easy to use and it gives you the ability to interact with all component props (no need to change the component, just the story). Having buttons for error or disabled states wouldn't be needed anymore.

Storybook Controls

Bug report

Required System information

• NodeJS version: 16
• Strapi Design System version: 1.2.1
• Browser: chrome

Describe the bug

The callback onLoadMore is not called.

The Combobox element has two props (hasMoreItems and onLoadMore) that (as I can assume from the names) are meant for paginated loading of combobox options.

However, they don't actually work.
I set the hasMoreItems prop to true to get infinite scrolling.
And I have initially some options loaded. When I scroll to the bottom of the combobox options list I expect the callback to fire, so I can load more items.
But the callback never happens if the number of options in the list is relatively small (e.g. 50 items) and fires only once if the number is large enough (say 100 items page).

Steps to reproduce the behavior

Open this code sandbox and you will find an example that uses Combobox and exhibits this bug.
https://codesandbox.io/s/unruffled-swartz-3jz2go?file=/src/combo.jsx

Expected behavior

If hasMoreItems prop is set to true whenever I scroll to the bottom of the combobox options list, the combobox should call the onLoadMore callback.

Color "neutral800" is used as a highlight and text color.

In the Design System Storybook Layout component is suggested to be imported as a default export:

import Layout from '@strapi/design-system/Layout';

However, this component should be imported as a named export instead:

import { Layout } from '@strapi/design-system/Layout';

Importing it as a default export break the application. The documentation on Storybook should be changed to import Layout component as a named export.

Steps to reproduce:

1. Generate new plugin in Strapi
2. Add the Layout component to plugin's front end importing it with default export syntax (as suggested in the Storybook)

Link to the Storybook page:

https://design-system-alpha.vercel.app/?path=/docs/design-system-components-layout--base

Bug report

Required System information

• Node.js version: 14.19.3
• NPM version: 6-14-17
• Strapi version: 4.1.12
• Database: Mysql
• Operating system: Ubuntu

Describe the bug

I've a numeric field for a price, decimal 2.22
I use the Spanish locale where the comma is the decimal separator, I've tried it with different browsers, operating systems and computers, and the same thing happens everywhere. When you enter a number with decimals an erratic behavior is generated, as it shows points then commas, then deletes them, etc. a chaos. Better watch the video to have a good idea...

Steps to reproduce the behavior

1. Add a numeric field
2. Supose that set your regional configuration as Spain,
3. Fill the field with numbers
4. Enjoy the error

Expected behavior

Use always same decimal separator as the regional config ... and don't change the value multipling it for 100

Screenshots

• Extract
• from the SubNavLink
• Make sure that the link can be wrapped with a next/link thing so that it can be used in nextjs projects

Bug report

Required System information

• Node.js version: v14
• NPM version: 8.12.1
• Strapi version: v4
• Database: SQLite
• Operating system: Windows 10
• Browser: Firefox 101.0.1

Describe the bug

The date picker's year drop-down is not wide enough to accommodate the scrollbar

Steps to reproduce the behavior

1. Go to content-type editor
2. Add a date field to a content-type
3. Go to the content-type in the content manager
4. Click on date field
5. Click on year in the calendar popup
6. The scrollbar obscures the last digit for the year

Expected behavior

The scrollbar should not obscure the year being selected

Screenshots

Additional context

I believe this is just an issue with the way Firefox renders scrollbars. I don't think Strapi's UI is taking into account that Firefox's scrollbars are generally wider than Chrome's

Bug report

Required System information

• Node.js version: v14.18.1
• NPM version: 6.14.15
• Strapi version: 4.1.12
• Database: sqlite
• Operating system: macOS 12.4

Describe the bug

When overriding theme variables, default buttons do not seem to be overridden

Steps to reproduce the behavior

1. Clone https://github.com/samturrell/strapi-button-bug
2. Copy .env.example to .env
3. Run yarn strapi develop --watch-admin
4. Open the UI at http://127.0.0.1:1338/admin
5. Log in with email: [email protected] password: Example1!
6. Navigate to the content manager http://127.0.0.1:1338/admin/content-manager/collectionType/api::page.page?page=1&pageSize=10&sort=title:ASC
7. Observe the button in the top right
8. Hold down left click on the button in the top right
9. Observe that the overridden theme values are applied for this state

This is consistent across the strapi UI where the button variant is default

Expected behavior

The button should utilise the provided theme values for the default state

Screenshots

Default state:

Active state:

Code snippets

N/A

Additional context

N/A

Bug report

Required System information

• Node.js version: 16.15.0
• NPM version: 8.11.0
• Strapi version: 4.2.3
• Database: SQLite
• Operating system: Windows 10, stable latest

Describe the bug

When you are making a record and put the value zero, "0", in the integer field with the value disappears when you select another field. The field has a minimum of zero, and has required on.

Steps to reproduce the behavior

1. Go to any record
2. Click on a new record
3. Scroll down any integer field
4. Put zero
5. select another field
6. See the zero disappear

Expected behavior

The value zero should not disappear when you are not focusing on the field.

Create an abstract RawModal component to avoid duplicating the logic and the style:

• Modal style with overlay
• Handle the click outside & the focus

Bug report

Required System information

• Npm version 8.7.0
• NodeJS version: 16.14.2
• Strapi Design System version: 1.1.0
• Browser: Brave 1.39.111

Describe the bug

KeyboardNavigable component always calls preventDefault() on arrow key events. I think this is unintended since preventDefault() gets called again if the isValidFocusedElement() check passes.

Steps to reproduce the behavior

Please see the discussion here strapi/strapi#13342 for an instance of the issue. If a form input field is contained in a KeyboardNavigable component, then the arrow keys will not work to move the cursor in that field. As the original issue there has it, using the latest Strapi version:

1. Content-Type builder: Create a singular type and add a repeatable component with a text input
2. Content Manager: Add a component, type anything in the input field and try to move the cursor with the arrow keys.

Expected behavior

KeyboardNavigable component calls preventDefault() only when the isValidFocusedElement() check passes.

Hi there,

I was wondering if its appropriate for me to create a PR of basically proof reading the documentation and fixing some mistakes that I have across of. I won't changing much content only simple rewordings where necessary (repetition, wrong format, etc..)

All the best!

This two calendar options would be great:
month view:
https://github.com/wojtekmaj/react-calendar
year view:
https://github.com/BelkaLab/react-yearly-calendar

Bug report

Required System information

• Npm version: 8.1.2
• NodeJS version: 14.15.1
• Strapi Design System version: 1.1.0
• Browser: Firefox

Describe the bug

When a selected value is passed to a radio group on page load, the selected radio button is not checked.

Steps to reproduce the behavior

https://codesandbox.io/s/divine-resonance-pjrzj3?file=/src/App.js - this code sandbox demonstrates the issue.
I have passed a default value to the selected useState. However, the radio button which matches the selected value is not checked when the page first loads.

Expected behavior

The radio button which matches the selected value should be checked.

Screenshots

If applicable, add screenshots to help explain your problem.

Code snippets

I believe this can be fixed by passing a checked prop to RadioInput component in BaseRadio (https://github.com/strapi/design-system/blob/main/packages/strapi-design-system/src/BaseRadio/BaseRadio.js)

Additional context

Add any other context about the problem here.

While looking into this issue in Strapi I discover that for NumericInput it is not possible to pass formatting options for decimal values.

NumericInput validation is based on Intl.NumberFormat extended by @internazionalied/number. Do you thing that would be possible to expose options like minimumFractionDigits in some way? What's your opinion?

Bug report

Required System information

• Node.js version: 16 lts
• NPM version: 8.x
• Strapi version: 4.2.3
• Database: PostgreSQL 13
• Operating system: macOS 12.4

Describe the bug

Blank date picker always show initial value '1/1/1970'

Steps to reproduce the behavior

Expected behavior

Blank date picker's placeholder value may be better with empty string or 'mm/dd/yyyy'

Screenshots

Code snippets

Additional context

Bug report

Required System information

• NodeJS version: 16.14.0
• Strapi Design System version: 4.2.2
• Browser: Chrome

Describe the bug

Pressing Arrow Keys inside a TextInput element does not move cursor inside the text field. Instead it moves focus to other elements on the page.

Steps to reproduce the behavior

Here is a piece of React JSX that exhibit this behaviour:

<Table>
<Tbody>
  {entries.map((entry, index) => (
    <Tr key={index}>
      <Td>
        <TextInput
          name={`${index}.title`}
          aria-label="item title"
          onChange={(e) => updateEntry(index, { title: e.target.value })}
          value={entries[index].title}
        />
      </Td>
</Tbody>
</Table>

This will render a table with rows having a TextInput component each.
Try using arrow keys in any of the inputs, and it won't move a cursor within the text but rather move the focus to other elements on the page.

Expected behavior

Since TextInput is an element for working with text, it should behave like any text editor.
Arrows should move the cursor within the text and all the shortcuts involving arrow keys should work too, e.g. CMD+SHIFT+ARROW should select entire line, and so on.

Screenshots

If applicable, add screenshots to help explain your problem.

Code snippets

Additional context

The same behaviour can be seen with TextInput components that are placed inside repeatable component in Content-Manager view.
This is a clue that the issue is really with the <Table> component...
If I wrap the TextInput in a div that intercepts the keyDown and keyUp events and stop propagating them up to parent, I can use the TextInput as expected.

Bug report

Required System information

• Node.js version: v16.14.0
• NPM version:
• Strapi version: v4.1.7
• Database: Sqlite
• Operating system: Ubuntu 16.04 / WSL

Describe the bug

The width of the date selector dropdowns for changing month / year in the admin panel does not take scroll bar width into account, and content is this hidden behind the scroll bar. This is particularly problematic when the last digit of the year is cut off.

This seems to be isolated to Firefox (98.0.2), Chromium-based browsers seem to work fine.

Steps to reproduce the behavior

1. Create a model with date field
2. Try and change the month/year
3. See error

Expected behavior

Dropdown content should be visible.

Screenshots

Code snippets

Vanilla Strapi installation.

Additional context

Add any other context about the problem here.