@strapi/design-system 1.15.0-typescript.1 → 1.16.0-typescript.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/DatePicker/DatePicker.js +13 -7
  2. package/dist/DatePicker/DatePicker.mjs +13 -7
  3. package/dist/Select/MultiSelect.d.ts +1 -1
  4. package/dist/Select/SingleSelect.d.ts +1 -1
  5. package/dist/SimpleMenu/SimpleMenu.d.ts +1 -1
  6. package/package.json +10 -10
package/dist/DatePicker/DatePicker.js CHANGED
@@ -598,7 +598,7 @@ const DatePickerCalendar = React__namespace.forwardRef(({ monthSelectLabel, year
598
598
  onCalendarDateChange(updatedDate);
599
599
  };
600
600
  const getDatesInWeek = makeGetDatesInWeek(startDate, locale);
601
- return (jsxRuntime.jsxs(Flex.Flex, { ref: ref, direction: "column", alignItems: "stretch", padding: 4, ...restProps, children: [jsxRuntime.jsxs(ToolbarFlex, { justifyContent: "flex-start", paddingBottom: 4, paddingLeft: 2, paddingRight: 2, gap: 2, children: [jsxRuntime.jsx(SingleSelect.SingleSelectInput, { label: monthSelectLabel, size: "S", value: months[calendarDate.month - 1], onChange: handleMonthChange, children: months.map((month) => (jsxRuntime.jsx(SingleSelect.SingleSelectOption, { value: month, children: month }, month))) }), jsxRuntime.jsx(SingleSelect.SingleSelectInput, { size: "S", value: calendarDate.year.toString(), label: yearSelectLabel, onChange: handleYearChange, children: years.map((year) => (jsxRuntime.jsx(SingleSelect.SingleSelectOption, { value: year, children: year }, year))) })] }), jsxRuntime.jsxs("table", { role: "grid", children: [jsxRuntime.jsx("thead", { "aria-hidden": true, children: jsxRuntime.jsx("tr", { "aria-rowindex": 0, children: weekDays.map((day, index) => (jsxRuntime.jsx(DatePickerHeaderCell, { "aria-colindex": index, children: day }, day))) }) }), jsxRuntime.jsx("tbody", { children: [...new Array(6).keys()].map((weekIndex) => (jsxRuntime.jsx("tr", { "aria-rowindex": weekIndex + 2, children: getDatesInWeek(weekIndex).map((date, index) => date ? (jsxRuntime.jsx(DatePickerCalendarCell, { "aria-colindex": index + 1, date: date, startDate: startDate }, date.toString())) : (jsxRuntime.jsx(Cell, { "aria-colindex": index + 1 }))) }, weekIndex))) })] })] }));
601
+ return (jsxRuntime.jsxs(Flex.Flex, { ref: ref, direction: "column", alignItems: "stretch", padding: 4, ...restProps, children: [jsxRuntime.jsxs(ToolbarFlex, { justifyContent: "flex-start", paddingBottom: 4, paddingLeft: 2, paddingRight: 2, gap: 2, children: [jsxRuntime.jsx(SingleSelect.SingleSelectInput, { label: monthSelectLabel, size: "S", value: months[calendarDate.month - 1], onChange: handleMonthChange, children: months.map((month) => (jsxRuntime.jsx(SingleSelect.SingleSelectOption, { value: month, children: month }, month))) }), jsxRuntime.jsx(SingleSelect.SingleSelectInput, { size: "S", value: calendarDate.year.toString(), label: yearSelectLabel, onChange: handleYearChange, children: years.map((year) => (jsxRuntime.jsx(SingleSelect.SingleSelectOption, { value: year, children: year }, year))) })] }), jsxRuntime.jsxs("table", { role: "grid", children: [jsxRuntime.jsx("thead", { "aria-hidden": true, children: jsxRuntime.jsx("tr", { "aria-rowindex": 0, children: weekDays.map((day, index) => (jsxRuntime.jsx(DatePickerHeaderCell, { "aria-colindex": index, children: day }, day))) }) }), jsxRuntime.jsx("tbody", { children: [...new Array(6).keys()].map((weekIndex) => (jsxRuntime.jsx("tr", { "aria-rowindex": weekIndex + 2, children: getDatesInWeek(weekIndex).map((date, index) => date ? (jsxRuntime.jsx(DatePickerCalendarCell, { "aria-colindex": index + 1, date: date, startDate: startDate, disabled: minDate.compare(date) > 0 || date.compare(maxDate) > 0 }, date.toString())) : (jsxRuntime.jsx(Cell, { "aria-colindex": index + 1 }))) }, weekIndex))) })] })] }));
602
602
  });
603
603
  const makeGetDatesInWeek = (from, locale) => (weekIndex) => {
604
604
  let date$1 = from.add({ weeks: weekIndex });
@@ -664,7 +664,7 @@ const Th = styled__default.default(Box.Box) `
664
664
  * DatePickerCalendarCell
665
665
  * -----------------------------------------------------------------------------------------------*/
666
666
  const DATE_PICKER_CALEDNAR_CELL_NAME = 'DatePickerCalendarCell';
667
- const DatePickerCalendarCell = React__namespace.forwardRef(({ date: date$1, startDate, ...props }, forwardedRef) => {
667
+ const DatePickerCalendarCell = React__namespace.forwardRef(({ date: date$1, startDate, disabled, ...props }, forwardedRef) => {
668
668
  const { timeZone, locale, calendarDate, onValueChange, onOpenChange, onTextValueChange, onCalendarDateChange } = useDatePickerContext(DATE_PICKER_CALEDNAR_CELL_NAME);
669
669
  const isSelected = date.isSameDay(calendarDate, date$1);
670
670
  const dateFormatter = useDateFormatter.useDateFormatter(locale, {
@@ -699,19 +699,25 @@ const DatePickerCalendarCell = React__namespace.forwardRef(({ date: date$1, star
699
699
  onValueChange(date$1);
700
700
  onTextValueChange(textValueFormatter.format(date$1.toDate(timeZone)));
701
701
  onOpenChange(false);
702
- }), children: jsxRuntime.jsx(Typography.Typography, { variant: "pi", textColor: textColor, children: formattedDate }) }));
702
+ }), "aria-disabled": disabled, children: jsxRuntime.jsx(Typography.Typography, { variant: "pi", textColor: textColor, children: formattedDate }) }));
703
703
  });
704
704
  const Cell = styled__default.default(Box.Box) `
705
705
  text-align: center;
706
706
  padding: ${7 / 16}rem;
707
707
  // Trick to prevent the outline from overflowing because of the general outline-offset
708
708
  outline-offset: -2px !important;
709
+ &[aria-disabled='true'] {
710
+ pointer-events: none;
711
+ opacity: 0.5;
712
+ }
709
713
 
710
- &:hover {
711
- background: ${({ theme }) => theme.colors.primary100};
714
+ &[aria-disabled='false'] {
715
+ &:hover {
716
+ background: ${({ theme }) => theme.colors.primary100};
712
717
 
713
- & > ${Typography.Typography} {
714
- color: ${({ theme }) => theme.colors.primary600};
718
+ & > ${Typography.Typography} {
719
+ color: ${({ theme }) => theme.colors.primary600};
720
+ }
715
721
  }
716
722
  }
717
723
  `;
package/dist/DatePicker/DatePicker.mjs CHANGED
@@ -571,7 +571,7 @@ const DatePickerCalendar = React.forwardRef(({ monthSelectLabel, yearSelectLabel
571
571
  onCalendarDateChange(updatedDate);
572
572
  };
573
573
  const getDatesInWeek = makeGetDatesInWeek(startDate, locale);
574
- return (jsxs(Flex, { ref: ref, direction: "column", alignItems: "stretch", padding: 4, ...restProps, children: [jsxs(ToolbarFlex, { justifyContent: "flex-start", paddingBottom: 4, paddingLeft: 2, paddingRight: 2, gap: 2, children: [jsx(SingleSelectInput, { label: monthSelectLabel, size: "S", value: months[calendarDate.month - 1], onChange: handleMonthChange, children: months.map((month) => (jsx(SingleSelectOption, { value: month, children: month }, month))) }), jsx(SingleSelectInput, { size: "S", value: calendarDate.year.toString(), label: yearSelectLabel, onChange: handleYearChange, children: years.map((year) => (jsx(SingleSelectOption, { value: year, children: year }, year))) })] }), jsxs("table", { role: "grid", children: [jsx("thead", { "aria-hidden": true, children: jsx("tr", { "aria-rowindex": 0, children: weekDays.map((day, index) => (jsx(DatePickerHeaderCell, { "aria-colindex": index, children: day }, day))) }) }), jsx("tbody", { children: [...new Array(6).keys()].map((weekIndex) => (jsx("tr", { "aria-rowindex": weekIndex + 2, children: getDatesInWeek(weekIndex).map((date, index) => date ? (jsx(DatePickerCalendarCell, { "aria-colindex": index + 1, date: date, startDate: startDate }, date.toString())) : (jsx(Cell, { "aria-colindex": index + 1 }))) }, weekIndex))) })] })] }));
574
+ return (jsxs(Flex, { ref: ref, direction: "column", alignItems: "stretch", padding: 4, ...restProps, children: [jsxs(ToolbarFlex, { justifyContent: "flex-start", paddingBottom: 4, paddingLeft: 2, paddingRight: 2, gap: 2, children: [jsx(SingleSelectInput, { label: monthSelectLabel, size: "S", value: months[calendarDate.month - 1], onChange: handleMonthChange, children: months.map((month) => (jsx(SingleSelectOption, { value: month, children: month }, month))) }), jsx(SingleSelectInput, { size: "S", value: calendarDate.year.toString(), label: yearSelectLabel, onChange: handleYearChange, children: years.map((year) => (jsx(SingleSelectOption, { value: year, children: year }, year))) })] }), jsxs("table", { role: "grid", children: [jsx("thead", { "aria-hidden": true, children: jsx("tr", { "aria-rowindex": 0, children: weekDays.map((day, index) => (jsx(DatePickerHeaderCell, { "aria-colindex": index, children: day }, day))) }) }), jsx("tbody", { children: [...new Array(6).keys()].map((weekIndex) => (jsx("tr", { "aria-rowindex": weekIndex + 2, children: getDatesInWeek(weekIndex).map((date, index) => date ? (jsx(DatePickerCalendarCell, { "aria-colindex": index + 1, date: date, startDate: startDate, disabled: minDate.compare(date) > 0 || date.compare(maxDate) > 0 }, date.toString())) : (jsx(Cell, { "aria-colindex": index + 1 }))) }, weekIndex))) })] })] }));
575
575
  });
576
576
  const makeGetDatesInWeek = (from, locale) => (weekIndex) => {
577
577
  let date = from.add({ weeks: weekIndex });
@@ -637,7 +637,7 @@ const Th = styled(Box) `
637
637
  * DatePickerCalendarCell
638
638
  * -----------------------------------------------------------------------------------------------*/
639
639
  const DATE_PICKER_CALEDNAR_CELL_NAME = 'DatePickerCalendarCell';
640
- const DatePickerCalendarCell = React.forwardRef(({ date, startDate, ...props }, forwardedRef) => {
640
+ const DatePickerCalendarCell = React.forwardRef(({ date, startDate, disabled, ...props }, forwardedRef) => {
641
641
  const { timeZone, locale, calendarDate, onValueChange, onOpenChange, onTextValueChange, onCalendarDateChange } = useDatePickerContext(DATE_PICKER_CALEDNAR_CELL_NAME);
642
642
  const isSelected = isSameDay(calendarDate, date);
643
643
  const dateFormatter = useDateFormatter(locale, {
@@ -672,19 +672,25 @@ const DatePickerCalendarCell = React.forwardRef(({ date, startDate, ...props },
672
672
  onValueChange(date);
673
673
  onTextValueChange(textValueFormatter.format(date.toDate(timeZone)));
674
674
  onOpenChange(false);
675
- }), children: jsx(Typography, { variant: "pi", textColor: textColor, children: formattedDate }) }));
675
+ }), "aria-disabled": disabled, children: jsx(Typography, { variant: "pi", textColor: textColor, children: formattedDate }) }));
676
676
  });
677
677
  const Cell = styled(Box) `
678
678
  text-align: center;
679
679
  padding: ${7 / 16}rem;
680
680
  // Trick to prevent the outline from overflowing because of the general outline-offset
681
681
  outline-offset: -2px !important;
682
+ &[aria-disabled='true'] {
683
+ pointer-events: none;
684
+ opacity: 0.5;
685
+ }
682
686
 
683
- &:hover {
684
- background: ${({ theme }) => theme.colors.primary100};
687
+ &[aria-disabled='false'] {
688
+ &:hover {
689
+ background: ${({ theme }) => theme.colors.primary100};
685
690
 
686
- & > ${Typography} {
687
- color: ${({ theme }) => theme.colors.primary600};
691
+ & > ${Typography} {
692
+ color: ${({ theme }) => theme.colors.primary600};
693
+ }
688
694
  }
689
695
  }
690
696
  `;
package/dist/Select/MultiSelect.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as React from 'react';
2
2
  import * as SelectParts from './SelectParts';
3
3
  import { FieldLabelProps, FieldProps } from '../Field';
4
- type MultiSelectPropsWithoutLabel = Omit<SelectParts.MultiSelectProps, 'value' | 'multi'> & Pick<SelectParts.ContentProps, 'onCloseAutoFocus'> & Pick<SelectParts.TriggerProps, 'clearLabel' | 'onClear' | 'size' | 'startIcon' | 'placeholder'> & Pick<FieldProps, 'hint' | 'id' | 'error'> & {
4
+ type MultiSelectPropsWithoutLabel = Omit<SelectParts.MultiSelectProps, 'value' | 'multi'> & Pick<SelectParts.ContentProps, 'onCloseAutoFocus'> & Pick<SelectParts.TriggerProps, 'clearLabel' | 'onClear' | 'size' | 'startIcon'> & Pick<SelectParts.ValueProps, 'placeholder'> & Pick<FieldProps, 'hint' | 'id' | 'error'> & {
5
5
  /**
6
6
  * @default (value) => value.join(',')
7
7
  */
package/dist/Select/SingleSelect.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as React from 'react';
2
2
  import * as SelectParts from './SelectParts';
3
3
  import { FieldLabelProps, FieldProps } from '../Field';
4
- type SingleSelectPropsWithoutLabel = Omit<SelectParts.SingleSelectProps, 'value'> & Pick<SelectParts.ContentProps, 'onCloseAutoFocus'> & Pick<SelectParts.TriggerProps, 'clearLabel' | 'onClear' | 'size' | 'startIcon' | 'placeholder'> & Pick<FieldProps, 'error' | 'hint' | 'id'> & {
4
+ type SingleSelectPropsWithoutLabel = Omit<SelectParts.SingleSelectProps, 'value'> & Pick<SelectParts.ContentProps, 'onCloseAutoFocus'> & Pick<SelectParts.TriggerProps, 'clearLabel' | 'onClear' | 'size' | 'startIcon'> & Pick<SelectParts.ValueProps, 'placeholder'> & Pick<FieldProps, 'error' | 'hint' | 'id'> & {
5
5
  /**
6
6
  * @default (value) => value.toString()
7
7
  */
package/dist/SimpleMenu/SimpleMenu.d.ts CHANGED
@@ -30,4 +30,4 @@ export type SimpleMenuProps<As extends React.ElementType = React.ElementType> =
30
30
  */
31
31
  size?: 'S' | 'M';
32
32
  };
33
- export declare const SimpleMenu: <As extends React.ElementType<any> = React.ForwardRefExoticComponent<import("../Button").ButtonProps & React.RefAttributes<HTMLButtonElement>>>({ label, children, id, as: asComp, onOpen, onClose, size, popoverPlacement, onReachEnd, ...props }: SimpleMenuProps<As>) => import("react/jsx-runtime").JSX.Element;
33
+ export declare const SimpleMenu: <As extends React.ElementType<any, keyof React.JSX.IntrinsicElements> = React.ForwardRefExoticComponent<import("../Button").ButtonProps & React.RefAttributes<HTMLButtonElement>>>({ label, children, id, as: asComp, onOpen, onClose, size, popoverPlacement, onReachEnd, ...props }: SimpleMenuProps<As>) => import("react/jsx-runtime").JSX.Element;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@strapi/design-system",
3
- "version": "1.15.0-typescript.1",
3
+ "version": "1.16.0-typescript.0",
4
4
  "license": "MIT",
5
5
  "sideEffects": false,
6
6
  "main": "./dist/index.js",
@@ -27,31 +27,31 @@
27
27
  ],
28
28
  "dependencies": {
29
29
  "@codemirror/lang-json": "^6.0.1",
30
- "@floating-ui/react-dom": "^2.0.5",
31
- "@internationalized/date": "^3.5.1",
32
- "@internationalized/number": "^3.5.0",
30
+ "@floating-ui/react-dom": "^2.0.8",
31
+ "@internationalized/date": "^3.5.2",
32
+ "@internationalized/number": "^3.5.1",
33
33
  "@radix-ui/react-dismissable-layer": "^1.0.5",
34
34
  "@radix-ui/react-dropdown-menu": "^2.0.6",
35
35
  "@radix-ui/react-focus-scope": "1.0.4",
36
- "@strapi/ui-primitives": "^1.15.0-typescript.1",
37
- "@uiw/react-codemirror": "^4.21.21",
36
+ "@strapi/ui-primitives": "1.16.0-typescript.0",
37
+ "@uiw/react-codemirror": "^4.21.24",
38
38
  "aria-hidden": "^1.2.3",
39
39
  "compute-scroll-into-view": "^3.1.0",
40
40
  "prop-types": "^15.8.1",
41
41
  "react-remove-scroll": "^2.5.7"
42
42
  },
43
43
  "devDependencies": {
44
- "@playwright/test": "1.40.1",
45
- "@strapi/icons": "^1.15.0-typescript.1",
44
+ "@playwright/test": "1.41.2",
45
+ "@strapi/icons": "1.16.0-typescript.0",
46
46
  "@types/react-router-dom": "^5.3.3",
47
47
  "@types/styled-components": "^5.1.26",
48
- "axe-playwright": "^1.2.3",
48
+ "axe-playwright": "^2.0.1",
49
49
  "cross-env": "^7.0.3",
50
50
  "react-router-dom": "^5.3.4",
51
51
  "styled-components": "^5.3.11"
52
52
  },
53
53
  "peerDependencies": {
54
- "@strapi/icons": "1.15.0-typescript.1",
54
+ "@strapi/icons": "1.16.0-typescript.0",
55
55
  "react": "^17.0.0 || ^18.0.0",
56
56
  "react-dom": "^17.0.0 || ^18.0.0",
57
57
  "react-router-dom": "^5.2.0",