@strapi/design-system 1.7.6 → 1.7.8

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 (143) hide show
  1. package/dist/BaseButton/BaseButton.cjs +3 -3
  2. package/dist/BaseButton/BaseButton.js +5 -5
  3. package/dist/Box/Box.cjs +2 -2
  4. package/dist/Box/Box.js +1 -1
  5. package/dist/CarouselInput/Carousel.cjs +6 -7
  6. package/dist/CarouselInput/Carousel.js +25 -79
  7. package/dist/CarouselInput/CarouselActions.cjs +1 -1
  8. package/dist/CarouselInput/CarouselActions.js +1 -14
  9. package/dist/CarouselInput/CarouselImage.cjs +3 -4
  10. package/dist/CarouselInput/CarouselImage.js +13 -23
  11. package/dist/CarouselInput/CarouselInput.cjs +1 -1
  12. package/dist/CarouselInput/CarouselInput.js +12 -75
  13. package/dist/CarouselInput/CarouselSlide.cjs +1 -3
  14. package/dist/CarouselInput/CarouselSlide.js +4 -29
  15. package/dist/Checkbox/Checkbox.cjs +3 -3
  16. package/dist/Checkbox/Checkbox.js +18 -40
  17. package/dist/Dialog/Dialog.cjs +5 -5
  18. package/dist/Dialog/Dialog.js +21 -49
  19. package/dist/Dialog/DialogBody.cjs +2 -2
  20. package/dist/Dialog/DialogBody.js +6 -19
  21. package/dist/Dialog/DialogFooter.cjs +2 -2
  22. package/dist/Dialog/DialogFooter.js +7 -21
  23. package/dist/Grid/Grid.cjs +3 -3
  24. package/dist/Grid/Grid.js +8 -22
  25. package/dist/Grid/GridItem.cjs +2 -2
  26. package/dist/Grid/GridItem.js +10 -27
  27. package/dist/Layout/ActionLayout.cjs +1 -9
  28. package/dist/Layout/ActionLayout.js +4 -27
  29. package/dist/Layout/ContentLayout.cjs +1 -1
  30. package/dist/Layout/ContentLayout.js +4 -9
  31. package/dist/Layout/GridLayout.cjs +3 -3
  32. package/dist/Layout/GridLayout.js +4 -8
  33. package/dist/Layout/HeaderLayout.cjs +4 -4
  34. package/dist/Layout/HeaderLayout.js +25 -120
  35. package/dist/Layout/Layout.cjs +4 -4
  36. package/dist/Layout/Layout.js +7 -19
  37. package/dist/Layout/TwoColsLayout.cjs +1 -1
  38. package/dist/Layout/TwoColsLayout.js +6 -15
  39. package/dist/ModalLayout/ModalBody.cjs +2 -2
  40. package/dist/ModalLayout/ModalBody.js +4 -5
  41. package/dist/ModalLayout/ModalContext.cjs +1 -1
  42. package/dist/ModalLayout/ModalContext.js +2 -1
  43. package/dist/ModalLayout/ModalFooter.cjs +2 -6
  44. package/dist/ModalLayout/ModalFooter.js +9 -26
  45. package/dist/ModalLayout/ModalHeader.cjs +2 -2
  46. package/dist/ModalLayout/ModalHeader.js +10 -22
  47. package/dist/ModalLayout/ModalLayout.cjs +3 -5
  48. package/dist/ModalLayout/ModalLayout.js +10 -30
  49. package/dist/NumberInput/NumberInput.cjs +2 -2
  50. package/dist/NumberInput/NumberInput.js +68 -168
  51. package/dist/Pagination/Pagination.cjs +1 -5
  52. package/dist/Pagination/Pagination.js +7 -21
  53. package/dist/Pagination/components.cjs +7 -10
  54. package/dist/Pagination/components.js +34 -81
  55. package/dist/Popover/Popover.cjs +3 -3
  56. package/dist/Popover/Popover.js +67 -66
  57. package/dist/ProgressBar/ProgressBar.cjs +5 -5
  58. package/dist/ProgressBar/ProgressBar.js +6 -37
  59. package/dist/Radio/Radio.cjs +1 -4
  60. package/dist/Radio/Radio.js +5 -18
  61. package/dist/Searchbar/SearchForm.cjs +1 -1
  62. package/dist/Searchbar/SearchForm.js +2 -3
  63. package/dist/Searchbar/Searchbar.cjs +10 -11
  64. package/dist/Searchbar/Searchbar.js +25 -54
  65. package/dist/Status/Status.cjs +6 -6
  66. package/dist/Status/Status.js +8 -46
  67. package/dist/Switch/Switch.cjs +5 -5
  68. package/dist/Switch/Switch.js +16 -52
  69. package/dist/Table/Cell.cjs +3 -3
  70. package/dist/Table/Cell.js +10 -23
  71. package/dist/Table/TFooter.cjs +3 -3
  72. package/dist/Table/TFooter.js +8 -20
  73. package/dist/Table/Table.cjs +12 -12
  74. package/dist/Table/Table.js +19 -31
  75. package/dist/Table/Tbody.cjs +2 -2
  76. package/dist/Table/Tbody.js +4 -5
  77. package/dist/Table/Thead.cjs +2 -2
  78. package/dist/Table/Thead.js +6 -7
  79. package/dist/Table/Tr.cjs +1 -1
  80. package/dist/Table/Tr.js +3 -4
  81. package/dist/Tabs/TabGroup.cjs +1 -1
  82. package/dist/Tabs/TabGroup.js +13 -37
  83. package/dist/Tabs/TabPanels.cjs +1 -1
  84. package/dist/Tabs/TabPanels.js +11 -22
  85. package/dist/Tabs/Tabs.cjs +2 -2
  86. package/dist/Tabs/Tabs.js +55 -110
  87. package/dist/Tabs/TabsContext.cjs +1 -1
  88. package/dist/Tabs/TabsContext.js +11 -4
  89. package/dist/Textarea/Textarea.cjs +14 -12
  90. package/dist/Textarea/Textarea.js +33 -55
  91. package/dist/ToggleCheckbox/ToggleCheckbox.cjs +8 -8
  92. package/dist/ToggleCheckbox/ToggleCheckbox.js +25 -121
  93. package/dist/ToggleInput/ToggleInput.cjs +3 -3
  94. package/dist/ToggleInput/ToggleInput.js +17 -70
  95. package/dist/Typography/Typography.cjs +1 -1
  96. package/dist/Typography/Typography.js +6 -6
  97. package/dist/hooks/useControllableState.cjs +1 -1
  98. package/dist/hooks/useControllableState.js +6 -6
  99. package/dist/themes/utils.cjs +2 -2
  100. package/dist/themes/utils.js +1 -1
  101. package/dist/v2/MainNav/MainNav.cjs +2 -2
  102. package/dist/v2/MainNav/MainNav.js +9 -31
  103. package/dist/v2/MainNav/MainNavContext.cjs +1 -1
  104. package/dist/v2/MainNav/MainNavContext.js +1 -1
  105. package/dist/v2/MainNav/NavBrand.cjs +3 -3
  106. package/dist/v2/MainNav/NavBrand.js +13 -36
  107. package/dist/v2/MainNav/NavCondense.cjs +2 -5
  108. package/dist/v2/MainNav/NavCondense.js +15 -22
  109. package/dist/v2/MainNav/NavFooter.cjs +1 -1
  110. package/dist/v2/MainNav/NavFooter.js +4 -10
  111. package/dist/v2/MainNav/NavLink.cjs +10 -10
  112. package/dist/v2/MainNav/NavLink.js +18 -39
  113. package/dist/v2/MainNav/NavSection.cjs +1 -1
  114. package/dist/v2/MainNav/NavSection.js +8 -42
  115. package/dist/v2/MainNav/NavSections.cjs +2 -2
  116. package/dist/v2/MainNav/NavSections.js +8 -22
  117. package/dist/v2/MainNav/NavUser.cjs +2 -2
  118. package/dist/v2/MainNav/NavUser.js +13 -27
  119. package/dist/v2/Pagination/Pagination.cjs +1 -5
  120. package/dist/v2/Pagination/Pagination.js +7 -21
  121. package/dist/v2/Pagination/components.cjs +7 -10
  122. package/dist/v2/Pagination/components.js +32 -65
  123. package/dist/v2/SubNav/SubNav.cjs +5 -5
  124. package/dist/v2/SubNav/SubNav.js +8 -13
  125. package/dist/v2/SubNav/SubNavHeader.cjs +3 -3
  126. package/dist/v2/SubNav/SubNavHeader.js +30 -77
  127. package/dist/v2/SubNav/SubNavLink.cjs +5 -5
  128. package/dist/v2/SubNav/SubNavLink.js +13 -47
  129. package/dist/v2/SubNav/SubNavLinkSection.cjs +4 -4
  130. package/dist/v2/SubNav/SubNavLinkSection.js +19 -34
  131. package/dist/v2/SubNav/SubNavSection.cjs +2 -2
  132. package/dist/v2/SubNav/SubNavSection.js +16 -55
  133. package/dist/v2/SubNav/SubNavSectionLabel.cjs +3 -3
  134. package/dist/v2/SubNav/SubNavSectionLabel.js +10 -38
  135. package/dist/v2/SubNav/SubNavSections.cjs +1 -1
  136. package/dist/v2/SubNav/SubNavSections.js +4 -18
  137. package/package.json +4 -4
  138. package/dist/Grid/GridContext.cjs +0 -1
  139. package/dist/Grid/GridContext.js +0 -6
  140. package/dist/Tabs/useTabsFocus.cjs +0 -1
  141. package/dist/Tabs/useTabsFocus.js +0 -17
  142. package/dist/Textarea/TextareaInput.cjs +0 -30
  143. package/dist/Textarea/TextareaInput.js +0 -65
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@strapi/design-system",
3
- "version": "1.7.6",
3
+ "version": "1.7.8",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "sideEffects": false,
@@ -24,7 +24,7 @@
24
24
  "@radix-ui/react-dismissable-layer": "^1.0.3",
25
25
  "@radix-ui/react-dropdown-menu": "^2.0.4",
26
26
  "@radix-ui/react-focus-scope": "1.0.2",
27
- "@strapi/ui-primitives": "^1.7.6",
27
+ "@strapi/ui-primitives": "^1.7.8",
28
28
  "@uiw/react-codemirror": "^4.19.16",
29
29
  "aria-hidden": "^1.2.3",
30
30
  "compute-scroll-into-view": "^3.0.3",
@@ -33,7 +33,7 @@
33
33
  },
34
34
  "devDependencies": {
35
35
  "@playwright/test": "1.33.0",
36
- "@strapi/icons": "^1.7.6",
36
+ "@strapi/icons": "^1.7.8",
37
37
  "@types/react-router-dom": "^5.3.3",
38
38
  "@types/styled-components": "^5.1.26",
39
39
  "axe-playwright": "^1.2.3",
@@ -64,5 +64,5 @@
64
64
  "test:e2e:watch": "chokidar '**/__tests__/*.e2e.js' -c 'npm run test:e2e -- --retries=0 {path}'",
65
65
  "test:e2e:debug": "cross-env PWDEBUG=1 playwright test"
66
66
  },
67
- "gitHead": "953be7427371cdb5d7063803078fa7939ce1ecf1"
67
+ "gitHead": "d82da913a5a9f8d8abd785e95f893fa4100d5793"
68
68
  }
@@ -1 +0,0 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=e.createContext({gap:0,gridCols:12}),o=()=>e.useContext(t);exports.GridContext=t;exports.useGrid=o;
@@ -1,6 +0,0 @@
1
- import { createContext as t, useContext as o } from "react";
2
- const e = t({ gap: 0, gridCols: 12 }), n = () => o(e);
3
- export {
4
- e as GridContext,
5
- n as useGrid
6
- };
@@ -1 +0,0 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react"),o=require("@strapi/ui-primitives"),i=(r,c)=>{const e=u.useRef(null),t=u.useRef(null),n=o.useCallbackRef(c);return u.useEffect(()=>{if(e.current){if(t.current){const s=e.current.querySelector('[tabindex="0"]');s&&(s.focus(),n(r))}t.current||(t.current=!0)}},[r,n]),e};exports.useTabsFocus=i;
@@ -1,17 +0,0 @@
1
- import { useRef as c, useEffect as f } from "react";
2
- import { useCallbackRef as s } from "@strapi/ui-primitives";
3
- const i = (t, o) => {
4
- const e = c(null), r = c(null), u = s(o);
5
- return f(() => {
6
- if (e.current) {
7
- if (r.current) {
8
- const n = e.current.querySelector('[tabindex="0"]');
9
- n && (n.focus(), u(t));
10
- }
11
- r.current || (r.current = !0);
12
- }
13
- }, [t, u]), e;
14
- };
15
- export {
16
- i as useTabsFocus
17
- };
@@ -1,30 +0,0 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),$=require("react"),b=require("prop-types"),y=require("styled-components"),g=require("../themes/utils.cjs"),x=require("../Field/FieldContext.cjs"),l=e=>e&&e.__esModule?e:{default:e},T=l(b),d=l(y),q=d.default.div`
2
- border: 1px solid ${({theme:e,hasError:r})=>r?e.colors.danger600:e.colors.neutral200};
3
- border-radius: ${({theme:e})=>e.borderRadius};
4
-
5
- padding-left: ${({theme:e,hasLeftAction:r})=>r?0:e.spaces[4]};
6
- padding-right: ${({theme:e,hasRightAction:r})=>r?0:e.spaces[4]};
7
- padding-top: ${({theme:e})=>`${e.spaces[3]}`};
8
- padding-bottom: ${({theme:e})=>`${e.spaces[3]}`};
9
-
10
- background: ${({theme:e,disabled:r})=>r?e.colors.neutral150:e.colors.neutral0};
11
- ${g.inputFocusStyle()}
12
- `,h=d.default.textarea`
13
- display: block;
14
- width: 100%;
15
- font-weight: 400;
16
- font-size: ${14/16}rem;
17
- border: none;
18
- color: ${({theme:e,disabled:r})=>r?e.colors.neutral600:e.colors.neutral800};
19
- resize: none;
20
- background: inherit;
21
-
22
- ::placeholder {
23
- color: ${({theme:e})=>e.colors.neutral500};
24
- opacity: 1;
25
- }
26
-
27
- &:focus-within {
28
- outline: none;
29
- }
30
- `,o=$.forwardRef(({disabled:e,...r},u)=>{const{id:t,error:n,hint:c,name:p,required:f}=x.useField();let a;n?a=`${t}-error`:c&&(a=`${t}-hint`);const s=!!n;return i.jsx(q,{hasError:s,disabled:e,children:i.jsx(h,{id:t,name:p,ref:u,"aria-describedby":a,"aria-invalid":s,disabled:e,hasError:s,"aria-required":f,...r})})});o.displayName="TextareaInput";o.defaultProps={disabled:!1};o.propTypes={disabled:T.default.bool};exports.TextareaInput=o;
@@ -1,65 +0,0 @@
1
- import { jsx as n } from "react/jsx-runtime";
2
- import { forwardRef as f } from "react";
3
- import $ from "prop-types";
4
- import d from "styled-components";
5
- import { inputFocusStyle as m } from "../themes/utils.js";
6
- import { useField as b } from "../Field/FieldContext.js";
7
- const g = d.div`
8
- border: 1px solid ${({ theme: r, hasError: o }) => o ? r.colors.danger600 : r.colors.neutral200};
9
- border-radius: ${({ theme: r }) => r.borderRadius};
10
-
11
- padding-left: ${({ theme: r, hasLeftAction: o }) => o ? 0 : r.spaces[4]};
12
- padding-right: ${({ theme: r, hasRightAction: o }) => o ? 0 : r.spaces[4]};
13
- padding-top: ${({ theme: r }) => `${r.spaces[3]}`};
14
- padding-bottom: ${({ theme: r }) => `${r.spaces[3]}`};
15
-
16
- background: ${({ theme: r, disabled: o }) => o ? r.colors.neutral150 : r.colors.neutral0};
17
- ${m()}
18
- `, x = d.textarea`
19
- display: block;
20
- width: 100%;
21
- font-weight: 400;
22
- font-size: ${14 / 16}rem;
23
- border: none;
24
- color: ${({ theme: r, disabled: o }) => o ? r.colors.neutral600 : r.colors.neutral800};
25
- resize: none;
26
- background: inherit;
27
-
28
- ::placeholder {
29
- color: ${({ theme: r }) => r.colors.neutral500};
30
- opacity: 1;
31
- }
32
-
33
- &:focus-within {
34
- outline: none;
35
- }
36
- `, t = f(({ disabled: r, ...o }, l) => {
37
- const { id: e, error: s, hint: p, name: c, required: u } = b();
38
- let a;
39
- s ? a = `${e}-error` : p && (a = `${e}-hint`);
40
- const i = !!s;
41
- return /* @__PURE__ */ n(g, { hasError: i, disabled: r, children: /* @__PURE__ */ n(
42
- x,
43
- {
44
- id: e,
45
- name: c,
46
- ref: l,
47
- "aria-describedby": a,
48
- "aria-invalid": i,
49
- disabled: r,
50
- hasError: i,
51
- "aria-required": u,
52
- ...o
53
- }
54
- ) });
55
- });
56
- t.displayName = "TextareaInput";
57
- t.defaultProps = {
58
- disabled: !1
59
- };
60
- t.propTypes = {
61
- disabled: $.bool
62
- };
63
- export {
64
- t as TextareaInput
65
- };