[bug]: TimePicker crashes with "Cannot destructure property 'value' of 'parts.find(...)'" when rendering datetime fields

[envzone-linh-pham]

What version of design-system are you using?

What version of design-system are you using?:

• Strapi Design System version: 2.1.2 (also tested with 2.0.0-rc.18 and 2.0.0-rc.30)
• Browser: Microsoft Edge (Chromium) / Chrome
• Node.js: 22.20.0
• Strapi: 5.33.4 (also tested with 5.32.0, 5.33.1)
• OS: Windows 10

What's Wrong?

When viewing or creating entries in any Content Type that contains a datetime field, the admin panel crashes with the error:

TypeError: Cannot destructure property 'value' of 'parts.find(...)' as it is undefined.
at TimePicker.tsx:72:22

The error occurs in TimePicker.tsx at line 72 where the code assumes Intl.DateTimeFormat().formatToParts() will always return a part with type === 'literal':

const { value: separator } = parts.find((part) => part.type === 'literal')!;

When no literal part exists (e.g., certain locales or edge cases), find() returns undefined, and destructuring fails.

Console error:
React Router caught the following error during render TypeError: Cannot destructure property 'value' of 'parts.find(...)' as it is undefined.

Screen error:
"Something went wrong - Cannot destructure property 'value' of 'parts.find(...)' as it is undefined."

To Reproduce

1. Create a Content Type with a datetime field (e.g., created_at or published_at)
2. Go to Content Manager in the Strapi admin panel
3. Click on the Content Type to view entries
4. Click "Create new entry" or edit an existing entry
5. The admin panel crashes with the TimePicker error

Expected Behaviour

The datetime field should render correctly without crashing. The TimePicker component should handle cases where Intl.DateTimeFormat().formatToParts() does not return a literal type part.

Suggested fix: Add a null check before destructuring:

const literalPart = parts.find((part) => part.type === 'literal');
const separator = literalPart?.value ?? ':';

This issue was not present in earlier Strapi versions (around 5.29.0). It appears to be a regression.

Additional Context

Versions Tested (all have the same issue)

• Strapi 5.32.0 with @strapi/design-system 2.0.0-rc.18
• Strapi 5.32.0 with @strapi/design-system 2.0.0-rc.30
• Strapi 5.33.4 with @strapi/design-system 2.1.2
• Strapi 5.33.4 with resolutions forcing @strapi/design-system 2.1.2

Stack Trace

TypeError: Cannot destructure property 'value' of 'parts.find(...)' as it is undefined.
    at TimePicker.tsx:72:22
    at mountMemo (react-dom.development.js:16406:19)
    at Object.useMemo (react-dom.development.js:16851:16)
    at Object.useMemo (react.development.js:1650:21)
    at TimePicker.tsx:70:29
    at renderWithHooks (react-dom.development.js:15486:18)
    at updateForwardRef (react-dom.development.js:19245:20)
    at beginWork (react-dom.development.js:21675:16)
    at beginWork$1 (react-dom.development.js:27465:14)
    at performUnitOfWork (react-dom.development.js:26596:12)