@strapi/design-system 1.7.10 → 1.8.1

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 (116) hide show
  1. package/README.md +9 -17
  2. package/dist/Button/Button.cjs +2 -2
  3. package/dist/Button/Button.js +4 -4
  4. package/dist/Combobox/Combobox.cjs +14 -13
  5. package/dist/Combobox/Combobox.js +73 -68
  6. package/dist/DatePicker/DatePicker.cjs +82 -6
  7. package/dist/DatePicker/DatePicker.js +414 -55
  8. package/dist/DateTimePicker/DateTimePicker.cjs +7 -1
  9. package/dist/DateTimePicker/DateTimePicker.js +97 -53
  10. package/dist/DateTimePicker/index.cjs +1 -1
  11. package/dist/DateTimePicker/index.js +3 -2
  12. package/dist/DesignSystemProvider.cjs +1 -0
  13. package/dist/DesignSystemProvider.js +10 -0
  14. package/dist/Grid/Grid.cjs +3 -3
  15. package/dist/Grid/Grid.js +6 -3
  16. package/dist/MainNav/MainNav.cjs +2 -2
  17. package/dist/MainNav/MainNav.js +9 -31
  18. package/dist/MainNav/MainNavContext.cjs +1 -1
  19. package/dist/MainNav/MainNavContext.js +1 -1
  20. package/dist/MainNav/NavBrand.cjs +3 -3
  21. package/dist/MainNav/NavBrand.js +12 -38
  22. package/dist/MainNav/NavCondense.cjs +2 -2
  23. package/dist/MainNav/NavCondense.js +15 -23
  24. package/dist/MainNav/NavFooter.cjs +1 -1
  25. package/dist/MainNav/NavFooter.js +4 -10
  26. package/dist/MainNav/NavLink.cjs +9 -9
  27. package/dist/MainNav/NavLink.js +13 -35
  28. package/dist/MainNav/NavSection.cjs +1 -1
  29. package/dist/MainNav/NavSection.js +9 -43
  30. package/dist/MainNav/NavSections.cjs +2 -2
  31. package/dist/MainNav/NavSections.js +7 -21
  32. package/dist/MainNav/NavUser.cjs +2 -2
  33. package/dist/MainNav/NavUser.js +13 -27
  34. package/dist/NumberInput/NumberInput.cjs +2 -2
  35. package/dist/NumberInput/NumberInput.js +40 -40
  36. package/dist/Popover/Popover.cjs +3 -4
  37. package/dist/Popover/Popover.js +46 -48
  38. package/dist/Popover/index.cjs +1 -1
  39. package/dist/Popover/index.js +5 -9
  40. package/dist/Popover/primitives.cjs +1 -0
  41. package/dist/Popover/primitives.js +5 -0
  42. package/dist/Searchbar/Searchbar.cjs +2 -2
  43. package/dist/Searchbar/Searchbar.js +5 -5
  44. package/dist/Select/SelectParts.cjs +1 -1
  45. package/dist/Select/SelectParts.js +1 -1
  46. package/dist/Select/SingleSelect.cjs +1 -1
  47. package/dist/Select/SingleSelect.js +36 -32
  48. package/dist/SimpleMenu/SimpleMenu.cjs +9 -9
  49. package/dist/SimpleMenu/SimpleMenu.js +62 -151
  50. package/dist/SubNav/SubNav.cjs +5 -5
  51. package/dist/SubNav/SubNav.js +8 -13
  52. package/dist/SubNav/SubNavHeader.cjs +3 -3
  53. package/dist/SubNav/SubNavHeader.js +29 -76
  54. package/dist/SubNav/SubNavLink.cjs +13 -13
  55. package/dist/SubNav/SubNavLink.js +20 -52
  56. package/dist/SubNav/SubNavLinkSection.cjs +4 -4
  57. package/dist/SubNav/SubNavLinkSection.js +19 -35
  58. package/dist/SubNav/SubNavSection.cjs +2 -2
  59. package/dist/SubNav/SubNavSection.js +15 -55
  60. package/dist/SubNav/SubNavSectionLabel.cjs +3 -3
  61. package/dist/SubNav/SubNavSectionLabel.js +10 -38
  62. package/dist/SubNav/SubNavSections.cjs +1 -1
  63. package/dist/SubNav/SubNavSections.js +4 -18
  64. package/dist/TextInput/TextInput.cjs +1 -1
  65. package/dist/TextInput/TextInput.js +5 -5
  66. package/dist/ThemeProvider/ThemeProvider.cjs +2 -2
  67. package/dist/ThemeProvider/ThemeProvider.js +4 -3
  68. package/dist/TimePicker/TimePicker.cjs +5 -7
  69. package/dist/TimePicker/TimePicker.js +79 -33
  70. package/dist/TimePicker/index.cjs +1 -1
  71. package/dist/TimePicker/index.js +3 -2
  72. package/dist/helpers/context.cjs +1 -0
  73. package/dist/helpers/context.js +21 -0
  74. package/dist/helpers/getDefaultLocale.cjs +4 -1
  75. package/dist/helpers/getDefaultLocale.js +7 -2
  76. package/dist/hooks/useDateFormatter.cjs +1 -0
  77. package/dist/hooks/useDateFormatter.js +20 -0
  78. package/dist/index.cjs +1 -1
  79. package/dist/index.js +309 -304
  80. package/dist/v2/Breadcrumbs/Breadcrumbs.cjs +2 -2
  81. package/dist/v2/Breadcrumbs/Breadcrumbs.js +15 -23
  82. package/dist/v2/Breadcrumbs/Crumb.cjs +1 -1
  83. package/dist/v2/Breadcrumbs/Crumb.js +6 -25
  84. package/dist/v2/Breadcrumbs/CrumbLink.cjs +2 -2
  85. package/dist/v2/Breadcrumbs/CrumbLink.js +6 -15
  86. package/dist/v2/Breadcrumbs/CrumbSimpleMenu.cjs +4 -3
  87. package/dist/v2/Breadcrumbs/CrumbSimpleMenu.js +8 -14
  88. package/dist/v2/Breadcrumbs/Divider.cjs +1 -1
  89. package/dist/v2/Breadcrumbs/Divider.js +3 -4
  90. package/dist/v2/SimpleMenu/Menu.cjs +10 -10
  91. package/dist/v2/SimpleMenu/Menu.js +11 -11
  92. package/package.json +11 -10
  93. package/dist/DatePicker/DatePickerCalendar.cjs +0 -1
  94. package/dist/DatePicker/DatePickerCalendar.js +0 -43
  95. package/dist/DatePicker/DatePickerTd.cjs +0 -19
  96. package/dist/DatePicker/DatePickerTd.js +0 -29
  97. package/dist/DatePicker/DatePickerTh.cjs +0 -9
  98. package/dist/DatePicker/DatePickerTh.js +0 -18
  99. package/dist/DatePicker/compareDates.cjs +0 -1
  100. package/dist/DatePicker/compareDates.js +0 -4
  101. package/dist/DatePicker/components.cjs +0 -39
  102. package/dist/DatePicker/components.js +0 -53
  103. package/dist/DatePicker/utils/formatDate.cjs +0 -1
  104. package/dist/DatePicker/utils/formatDate.js +0 -4
  105. package/dist/DatePicker/utils/generateWeeks.cjs +0 -1
  106. package/dist/DatePicker/utils/generateWeeks.js +0 -17
  107. package/dist/DatePicker/utils/getDayOfWeek.cjs +0 -1
  108. package/dist/DatePicker/utils/getDayOfWeek.js +0 -15
  109. package/dist/DatePicker/utils/getMonths.cjs +0 -1
  110. package/dist/DatePicker/utils/getMonths.js +0 -7
  111. package/dist/DatePicker/utils/getYears.cjs +0 -1
  112. package/dist/DatePicker/utils/getYears.js +0 -9
  113. package/dist/DatePicker/utils/index.cjs +0 -1
  114. package/dist/DatePicker/utils/index.js +0 -12
  115. package/dist/DateTimePicker/parseDate.cjs +0 -1
  116. package/dist/DateTimePicker/parseDate.js +0 -8
@@ -1,4 +1,4 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),n=require("react"),f=require("prop-types"),m=require("styled-components"),p=require("./Divider.cjs"),a=require("../../Flex/Flex.cjs"),y=require("../../Box/Box.cjs"),l=e=>e&&e.__esModule?e:{default:e},r=l(f),b=l(m),g=b.default(a.Flex)`
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),i=require("react"),u=require("styled-components"),h=require("./Divider.cjs"),s=require("../../Flex/Flex.cjs"),m=require("../../Box/Box.cjs"),b=e=>e&&e.__esModule?e:{default:e},f=b(u),x=f.default(s.Flex)`
2
2
  // CrumbLinks do have padding-x, because they need to have a
3
3
  // interaction effect, which mis-aligns the breadcrumbs on the left.
4
4
  // This normalizes the behavior by moving the first item to left by
@@ -6,4 +6,4 @@
6
6
  :first-child {
7
7
  margin-left: ${({theme:e})=>`calc(-1*${e.spaces[2]})`};
8
8
  }
9
- `,s=({label:e,children:d,...o})=>{const i=n.Children.toArray(d);return t.jsx(y.Box,{"aria-label":e,...o,children:t.jsx(g,{as:"ol",horizontal:!0,children:n.Children.map(i,(u,c)=>{const h=i.length>1&&c+1<i.length;return t.jsxs(a.Flex,{inline:!0,as:"li",children:[u,h&&t.jsx(p.Divider,{})]})})})})};s.displayName="Breadcrumbs";s.propTypes={children:r.default.oneOfType([r.default.arrayOf(r.default.node),r.default.node]).isRequired,label:r.default.string.isRequired};exports.Breadcrumbs=s;
9
+ `,n=({label:e,children:a,...l})=>{const r=i.Children.toArray(a);return t.jsx(m.Box,{"aria-label":e,...l,children:t.jsx(x,{as:"ol",children:i.Children.map(r,(o,c)=>{const d=r.length>1&&c+1<r.length;return t.jsxs(s.Flex,{inline:!0,as:"li",children:[o,d&&t.jsx(h.Divider,{})]})})})})};n.displayName="Breadcrumbs";exports.Breadcrumbs=n;
@@ -1,33 +1,25 @@
1
- import { jsx as t, jsxs as c } from "react/jsx-runtime";
2
- import { Children as o } from "react";
3
- import e from "prop-types";
4
- import p from "styled-components";
5
- import { Divider as f } from "./Divider.js";
6
- import { Flex as n } from "../../Flex/Flex.js";
7
- import { Box as u } from "../../Box/Box.js";
8
- const y = p(n)`
1
+ import { jsx as i, jsxs as h } from "react/jsx-runtime";
2
+ import { Children as t } from "react";
3
+ import d from "styled-components";
4
+ import { Divider as c } from "./Divider.js";
5
+ import { Flex as a } from "../../Flex/Flex.js";
6
+ import { Box as f } from "../../Box/Box.js";
7
+ const p = d(a)`
9
8
  // CrumbLinks do have padding-x, because they need to have a
10
9
  // interaction effect, which mis-aligns the breadcrumbs on the left.
11
10
  // This normalizes the behavior by moving the first item to left by
12
11
  // the same amount it has inner padding
13
12
  :first-child {
14
- margin-left: ${({ theme: r }) => `calc(-1*${r.spaces[2]})`};
13
+ margin-left: ${({ theme: e }) => `calc(-1*${e.spaces[2]})`};
15
14
  }
16
- `, a = ({ label: r, children: s, ...l }) => {
17
- const i = o.toArray(s);
18
- return /* @__PURE__ */ t(u, { "aria-label": r, ...l, children: /* @__PURE__ */ t(y, { as: "ol", horizontal: !0, children: o.map(i, (m, d) => {
19
- const h = i.length > 1 && d + 1 < i.length;
20
- return /* @__PURE__ */ c(n, { inline: !0, as: "li", children: [
21
- m,
22
- h && /* @__PURE__ */ t(f, {})
23
- ] });
15
+ `, b = ({ label: e, children: n, ...o }) => {
16
+ const r = t.toArray(n);
17
+ return i(f, { "aria-label": e, ...o, children: i(p, { as: "ol", children: t.map(r, (s, l) => {
18
+ const m = r.length > 1 && l + 1 < r.length;
19
+ return h(a, { inline: !0, as: "li", children: [s, m && i(c, {})] });
24
20
  }) }) });
25
21
  };
26
- a.displayName = "Breadcrumbs";
27
- a.propTypes = {
28
- children: e.oneOfType([e.arrayOf(e.node), e.node]).isRequired,
29
- label: e.string.isRequired
30
- };
22
+ b.displayName = "Breadcrumbs";
31
23
  export {
32
- a as Breadcrumbs
24
+ b as Breadcrumbs
33
25
  };
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime");require("react");const a=require("prop-types"),u=require("../../Box/Box.cjs"),d=require("../../Typography/Typography.cjs"),p=e=>e&&e.__esModule?e:{default:e},i=p(a),r=({children:e,isCurrent:t,...n})=>o.jsx(u.Box,{paddingLeft:2,paddingRight:2,paddingTop:1,paddingBottom:1,children:o.jsx(d.Typography,{variant:"pi",textColor:"neutral800",fontWeight:t?"bold":"normal","aria-current":t,...n,children:e})});r.displayName="Crumb";r.defaultProps={isCurrent:!1};r.propTypes={children:i.default.node.isRequired,isCurrent:i.default.bool};exports.Crumb=r;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),a=require("../../Box/Box.cjs"),n=require("../../Typography/Typography.cjs"),t=({children:o,isCurrent:e=!1,...i})=>r.jsx(a.Box,{paddingLeft:2,paddingRight:2,paddingTop:1,paddingBottom:1,children:r.jsx(n.Typography,{variant:"pi",textColor:"neutral800",fontWeight:e?"bold":"normal","aria-current":e,...i,children:o})});t.displayName="Crumb";exports.Crumb=t;
@@ -1,27 +1,8 @@
1
- import { jsx as p } from "react/jsx-runtime";
2
- import "react";
3
- import i from "prop-types";
4
- import { Box as a } from "../../Box/Box.js";
5
- import { Typography as d } from "../../Typography/Typography.js";
6
- const r = ({ children: t, isCurrent: o, ...e }) => /* @__PURE__ */ p(a, { paddingLeft: 2, paddingRight: 2, paddingTop: 1, paddingBottom: 1, children: /* @__PURE__ */ p(
7
- d,
8
- {
9
- variant: "pi",
10
- textColor: "neutral800",
11
- fontWeight: o ? "bold" : "normal",
12
- "aria-current": o,
13
- ...e,
14
- children: t
15
- }
16
- ) });
17
- r.displayName = "Crumb";
18
- r.defaultProps = {
19
- isCurrent: !1
20
- };
21
- r.propTypes = {
22
- children: i.node.isRequired,
23
- isCurrent: i.bool
24
- };
1
+ import { jsx as r } from "react/jsx-runtime";
2
+ import { Box as i } from "../../Box/Box.js";
3
+ import { Typography as p } from "../../Typography/Typography.js";
4
+ const d = ({ children: t, isCurrent: o = !1, ...a }) => r(i, { paddingLeft: 2, paddingRight: 2, paddingTop: 1, paddingBottom: 1, children: r(p, { variant: "pi", textColor: "neutral800", fontWeight: o ? "bold" : "normal", "aria-current": o, ...a, children: t }) });
5
+ d.displayName = "Crumb";
25
6
  export {
26
- r as Crumb
7
+ d as Crumb
27
8
  };
@@ -1,4 +1,4 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime");require("react");const i=require("prop-types"),u=require("styled-components"),l=require("../../BaseLink/BaseLink.cjs"),t=e=>e&&e.__esModule?e:{default:e},r=t(i),d=t(u),a=d.default(l.BaseLink)`
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),n=require("styled-components"),s=require("../../BaseLink/BaseLink.cjs"),i=e=>e&&e.__esModule?e:{default:e},l=i(n),u=l.default(s.BaseLink)`
2
2
  border-radius: ${({theme:e})=>e.borderRadius};
3
3
  color: ${({theme:e})=>e.colors.neutral600};
4
4
  font-size: ${({theme:e})=>e.fontSizes[1]};
@@ -11,4 +11,4 @@
11
11
  background-color: ${({theme:e})=>e.colors.neutral200};
12
12
  color: ${({theme:e})=>e.colors.neutral700};
13
13
  }
14
- `,o=({children:e,...s})=>n.jsx(a,{...s,children:e});o.displayName="CrumbLink";o.defaultProps={to:void 0};o.propTypes={children:r.default.node.isRequired,to:r.default.string};exports.CrumbLink=o;
14
+ `,o=({children:e,...r})=>t.jsx(u,{...r,children:e});o.displayName="CrumbLink";exports.CrumbLink=o;
@@ -1,9 +1,7 @@
1
- import { jsx as s } from "react/jsx-runtime";
2
- import "react";
3
- import e from "prop-types";
4
- import t from "styled-components";
1
+ import { jsx as e } from "react/jsx-runtime";
2
+ import i from "styled-components";
5
3
  import { BaseLink as n } from "../../BaseLink/BaseLink.js";
6
- const d = t(n)`
4
+ const s = i(n)`
7
5
  border-radius: ${({ theme: o }) => o.borderRadius};
8
6
  color: ${({ theme: o }) => o.colors.neutral600};
9
7
  font-size: ${({ theme: o }) => o.fontSizes[1]};
@@ -16,15 +14,8 @@ const d = t(n)`
16
14
  background-color: ${({ theme: o }) => o.colors.neutral200};
17
15
  color: ${({ theme: o }) => o.colors.neutral700};
18
16
  }
19
- `, r = ({ children: o, ...i }) => /* @__PURE__ */ s(d, { ...i, children: o });
20
- r.displayName = "CrumbLink";
21
- r.defaultProps = {
22
- to: void 0
23
- };
24
- r.propTypes = {
25
- children: e.node.isRequired,
26
- to: e.string
27
- };
17
+ `, t = ({ children: o, ...r }) => e(s, { ...r, children: o });
18
+ t.displayName = "CrumbLink";
28
19
  export {
29
- r as CrumbLink
20
+ t as CrumbLink
30
21
  };
@@ -1,8 +1,9 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime");require("react");const s=require("@strapi/icons"),i=require("prop-types"),l=require("styled-components"),a=require("../SimpleMenu/SimpleMenu.cjs"),d=require("../../Button/Button.cjs"),o=e=>e&&e.__esModule?e:{default:e},r=o(i),c=o(l),p=c.default(d.Button)`
2
- padding: ${({theme:e})=>`${e.spaces[1]} ${e.spaces[3]}`};
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),o=require("styled-components"),s=require("../SimpleMenu/SimpleMenu.cjs"),l=require("../../Button/Button.cjs"),r=e=>e&&e.__esModule?e:{default:e},i=r(o),c=i.default(l.Button)`
2
+ padding: ${({theme:e})=>`${e.spaces[1]} ${e.spaces[2]}`};
3
+ height: unset;
3
4
 
4
5
  :hover,
5
6
  :focus {
6
7
  background-color: ${({theme:e})=>e.colors.neutral200};
7
8
  }
8
- `,t=({children:e,...n})=>u.jsx(a.SimpleMenu,{noBorder:!0,icon:u.jsx(s.CarretDown,{}),as:p,size:"S",...n,children:e});t.displayName="CrumbSimpleMenu";t.propTypes={"aria-label":r.default.string.isRequired,children:r.default.oneOfType([r.default.arrayOf(r.default.node),r.default.node]).isRequired};exports.CrumbSimpleMenu=t;
9
+ `,t=({children:e,...u})=>n.jsx(s.SimpleMenu,{endIcon:null,as:c,size:"S",...u,children:e});t.displayName="CrumbSimpleMenu";exports.CrumbSimpleMenu=t;
@@ -1,23 +1,17 @@
1
- import { jsx as e } from "react/jsx-runtime";
2
- import "react";
3
- import { CarretDown as t } from "@strapi/icons";
4
- import o from "prop-types";
5
- import m from "styled-components";
6
- import { SimpleMenu as n } from "../SimpleMenu/SimpleMenu.js";
1
+ import { jsx as r } from "react/jsx-runtime";
2
+ import n from "styled-components";
3
+ import { SimpleMenu as t } from "../SimpleMenu/SimpleMenu.js";
7
4
  import { Button as s } from "../../Button/Button.js";
8
- const a = m(s)`
9
- padding: ${({ theme: r }) => `${r.spaces[1]} ${r.spaces[3]}`};
5
+ const m = n(s)`
6
+ padding: ${({ theme: o }) => `${o.spaces[1]} ${o.spaces[2]}`};
7
+ height: unset;
10
8
 
11
9
  :hover,
12
10
  :focus {
13
- background-color: ${({ theme: r }) => r.colors.neutral200};
11
+ background-color: ${({ theme: o }) => o.colors.neutral200};
14
12
  }
15
- `, i = ({ children: r, ...p }) => /* @__PURE__ */ e(n, { noBorder: !0, icon: /* @__PURE__ */ e(t, {}), as: a, size: "S", ...p, children: r });
13
+ `, i = ({ children: o, ...e }) => r(t, { endIcon: null, as: m, size: "S", ...e, children: o });
16
14
  i.displayName = "CrumbSimpleMenu";
17
- i.propTypes = {
18
- "aria-label": o.string.isRequired,
19
- children: o.oneOfType([o.arrayOf(o.node), o.node]).isRequired
20
- };
21
15
  export {
22
16
  i as CrumbSimpleMenu
23
17
  };
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime");require("react");const i=require("../../Box/Box.cjs"),t=require("../../Typography/Typography.cjs"),r=()=>e.jsx(i.Box,{"aria-hidden":!0,paddingLeft:1,paddingRight:1,children:e.jsx(t.Typography,{variant:"pi",textColor:"neutral500",children:"/"})});r.displayName="Divider";exports.Divider=r;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("../../Box/Box.cjs"),t=require("../../Typography/Typography.cjs"),r=()=>e.jsx(i.Box,{"aria-hidden":!0,paddingLeft:1,paddingRight:1,children:e.jsx(t.Typography,{variant:"pi",textColor:"neutral500",children:"/"})});r.displayName="Divider";exports.Divider=r;
@@ -1,9 +1,8 @@
1
1
  import { jsx as r } from "react/jsx-runtime";
2
- import "react";
3
2
  import { Box as i } from "../../Box/Box.js";
4
3
  import { Typography as t } from "../../Typography/Typography.js";
5
- const o = () => /* @__PURE__ */ r(i, { "aria-hidden": !0, paddingLeft: 1, paddingRight: 1, children: /* @__PURE__ */ r(t, { variant: "pi", textColor: "neutral500", children: "/" }) });
6
- o.displayName = "Divider";
4
+ const e = () => r(i, { "aria-hidden": !0, paddingLeft: 1, paddingRight: 1, children: r(t, { variant: "pi", textColor: "neutral500", children: "/" }) });
5
+ e.displayName = "Divider";
7
6
  export {
8
- o as Divider
7
+ e as Divider
9
8
  };
@@ -1,4 +1,4 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),l=require("react"),y=require("@radix-ui/react-dropdown-menu"),d=require("@strapi/icons"),c=require("styled-components"),S=require("../../helpers/theme.cjs"),w=require("../Link/Link.cjs"),j=require("../../Button/Button.cjs"),m=require("../../Box/Box.cjs"),u=require("../../Flex/Flex.cjs"),i=require("../../Typography/Typography.cjs"),T=e=>e&&e.__esModule?e:{default:e};function C(e){if(e&&e.__esModule)return e;const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const o in e)if(o!=="default"){const s=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(r,o,s.get?s:{enumerable:!0,get:()=>e[o]})}}return r.default=e,Object.freeze(r)}const n=C(y),a=T(c),R=n.Root,$=l.forwardRef(({size:e,...r},o)=>t.jsx(n.Trigger,{asChild:!0,children:t.jsx(j.Button,{ref:o,type:"button",variant:"ghost",endIcon:t.jsx(d.CarretDown,{width:`${6/16}rem`,height:`${4/16}rem`,"aria-hidden":!0}),paddingTop:e==="S"?1:2,paddingBottom:e==="S"?1:2,paddingLeft:e==="S"?3:4,paddingRight:e==="S"?3:4,...r})})),v=l.forwardRef(({children:e,intersectionId:r,popoverPlacement:o="bottom-start",...s},p)=>{const[f,x]=o.split("-");return t.jsx(n.Portal,{children:t.jsx(n.Content,{align:x,side:f,loop:!0,asChild:!0,children:t.jsxs(h,{ref:p,direction:"column",borderStyle:"solid",borderWidth:"1px",borderColor:"neutral150",hasRadius:!0,background:"neutral0",shadow:"filterShadow",maxHeight:"15rem",padding:1,alignItems:"flex-start",position:"relative",overflow:"auto",...s,children:[e,t.jsx(m.Box,{id:r,width:"100%",height:"1px"})]})})})}),h=a.default(u.Flex)`
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),s=require("react"),y=require("@radix-ui/react-dropdown-menu"),d=require("@strapi/icons"),c=require("styled-components"),S=require("../../helpers/theme.cjs"),w=require("../Link/Link.cjs"),j=require("../../Button/Button.cjs"),m=require("../../Box/Box.cjs"),u=require("../../Flex/Flex.cjs"),a=require("../../Typography/Typography.cjs"),T=e=>e&&e.__esModule?e:{default:e};function C(e){if(e&&e.__esModule)return e;const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const o in e)if(o!=="default"){const i=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(r,o,i.get?i:{enumerable:!0,get:()=>e[o]})}}return r.default=e,Object.freeze(r)}const n=C(y),l=T(c),R=n.Root,v=s.forwardRef(({size:e,endIcon:r=t.jsx(d.CarretDown,{width:`${6/16}rem`,height:`${4/16}rem`,"aria-hidden":!0}),...o},i)=>t.jsx(n.Trigger,{asChild:!0,children:t.jsx(j.Button,{ref:i,type:"button",variant:"ghost",endIcon:r,paddingTop:e==="S"?1:2,paddingBottom:e==="S"?1:2,paddingLeft:e==="S"?3:4,paddingRight:e==="S"?3:4,...o})})),$=s.forwardRef(({children:e,intersectionId:r,popoverPlacement:o="bottom-start",...i},f)=>{const[p,x]=o.split("-");return t.jsx(n.Portal,{children:t.jsx(n.Content,{align:x,side:p,loop:!0,asChild:!0,children:t.jsxs(h,{ref:f,direction:"column",borderStyle:"solid",borderWidth:"1px",borderColor:"neutral150",hasRadius:!0,background:"neutral0",shadow:"filterShadow",maxHeight:"15rem",padding:1,alignItems:"flex-start",position:"relative",overflow:"auto",...i,children:[e,t.jsx(m.Box,{id:r,width:"100%",height:"1px"})]})})})}),h=l.default(u.Flex)`
2
2
  scrollbar-width: none;
3
3
  -ms-overflow-style: none;
4
4
  -webkit-overflow-scrolling: touch;
@@ -6,20 +6,20 @@
6
6
  &::-webkit-scrollbar {
7
7
  display: none;
8
8
  }
9
- `,k=({onSelect:e,disabled:r=!1,...o})=>t.jsx(n.Item,{asChild:!0,onSelect:e,disabled:r,children:o.isLink||o.isExternal?t.jsx(M,{color:"neutral800",...o,isExternal:o.isExternal??!1,children:t.jsx(i.Typography,{children:o.children})}):t.jsx(b,{cursor:"pointer",color:"neutral800",background:"transparent",borderStyle:"none",...o,children:t.jsx(i.Typography,{children:o.children})})}),g=({theme:e})=>c.css`
9
+ `,k=({onSelect:e,disabled:r=!1,...o})=>t.jsx(n.Item,{asChild:!0,onSelect:e,disabled:r,children:o.isLink||o.isExternal?t.jsx(M,{color:"neutral800",...o,isExternal:o.isExternal??!1,children:t.jsx(a.Typography,{children:o.children})}):t.jsx(b,{cursor:"pointer",color:"neutral800",background:"transparent",borderStyle:"none",...o,children:t.jsx(a.Typography,{children:o.children})})}),g=({theme:e})=>c.css`
10
10
  text-align: left;
11
11
  width: 100%;
12
12
  border-radius: ${e.borderRadius};
13
13
  padding: ${e.spaces[2]} ${e.spaces[4]};
14
14
 
15
- ${i.Typography} {
15
+ ${a.Typography} {
16
16
  color: inherit;
17
17
  }
18
18
 
19
19
  &[aria-disabled] {
20
20
  cursor: not-allowed;
21
21
 
22
- ${i.Typography} {
22
+ ${a.Typography} {
23
23
  color: ${e.colors.neutral500};
24
24
  }
25
25
  }
@@ -35,9 +35,9 @@
35
35
  content: none;
36
36
  }
37
37
  }
38
- `,b=a.default(u.Flex)`
38
+ `,b=l.default(u.Flex)`
39
39
  ${g}
40
- `,M=a.default(w.Link)`
40
+ `,M=l.default(w.Link)`
41
41
  /* We include this here again because typically when people use OptionLink they provide an as prop which cancels the Box props */
42
42
  color: ${({theme:e,color:r})=>S.extractStyleFromTheme(e.colors,r,void 0)};
43
43
  text-decoration: none;
@@ -52,14 +52,14 @@
52
52
  }
53
53
 
54
54
  ${g}
55
- `,q=l.forwardRef((e,r)=>t.jsx(n.Label,{asChild:!0,children:t.jsx(L,{ref:r,variant:"sigma",textColor:"neutral600",...e})})),L=a.default(i.Typography)`
55
+ `,q=s.forwardRef((e,r)=>t.jsx(n.Label,{asChild:!0,children:t.jsx(L,{ref:r,variant:"sigma",textColor:"neutral600",...e})})),L=l.default(a.Typography)`
56
56
  padding: ${({theme:e})=>e.spaces[2]} ${({theme:e})=>e.spaces[4]};
57
- `,O=n.Sub,_=l.forwardRef(({disabled:e=!1,...r},o)=>t.jsx(n.SubTrigger,{asChild:!0,disabled:e,children:t.jsxs(B,{ref:o,color:"neutral800",as:"button",type:"button",background:"transparent",borderStyle:"none",gap:5,...r,children:[t.jsx(i.Typography,{children:r.children}),t.jsx(I,{height:12,width:12})]})})),B=a.default(b)`
57
+ `,O=n.Sub,_=s.forwardRef(({disabled:e=!1,...r},o)=>t.jsx(n.SubTrigger,{asChild:!0,disabled:e,children:t.jsxs(B,{ref:o,color:"neutral800",as:"button",type:"button",background:"transparent",borderStyle:"none",gap:5,...r,children:[t.jsx(a.Typography,{children:r.children}),t.jsx(I,{height:12,width:12})]})})),B=l.default(b)`
58
58
  &[data-state='open'] {
59
59
  background-color: ${({theme:e})=>e.colors.primary100};
60
60
  }
61
- `,I=a.default(d.ChevronRight)`
61
+ `,I=l.default(d.ChevronRight)`
62
62
  path {
63
63
  fill: ${({theme:e})=>e.colors.neutral500};
64
64
  }
65
- `,D=l.forwardRef((e,r)=>t.jsx(n.Portal,{children:t.jsx(n.SubContent,{sideOffset:8,asChild:!0,children:t.jsx(h,{ref:r,direction:"column",borderStyle:"solid",borderWidth:"1px",borderColor:"neutral150",hasRadius:!0,background:"neutral0",shadow:"filterShadow",maxHeight:"15rem",padding:1,alignItems:"flex-start",...e})})})),P=R,F=$,E=v,W=k,H=q,A=O,N=_,V=D;exports.Content=E;exports.Item=W;exports.Label=H;exports.Root=P;exports.SubContent=V;exports.SubRoot=A;exports.SubTrigger=N;exports.Trigger=F;
65
+ `,D=s.forwardRef((e,r)=>t.jsx(n.Portal,{children:t.jsx(n.SubContent,{sideOffset:8,asChild:!0,children:t.jsx(h,{ref:r,direction:"column",borderStyle:"solid",borderWidth:"1px",borderColor:"neutral150",hasRadius:!0,background:"neutral0",shadow:"filterShadow",maxHeight:"15rem",padding:1,alignItems:"flex-start",overflow:"auto",...e})})})),P=R,F=v,E=$,W=k,H=q,A=O,N=_,V=D;exports.Content=E;exports.Item=W;exports.Label=H;exports.Root=P;exports.SubContent=V;exports.SubRoot=A;exports.SubTrigger=N;exports.Trigger=F;
@@ -1,4 +1,4 @@
1
- import { jsx as e, jsxs as d } from "react/jsx-runtime";
1
+ import { jsx as e, jsxs as s } from "react/jsx-runtime";
2
2
  import { forwardRef as a } from "react";
3
3
  import * as n from "@radix-ui/react-dropdown-menu";
4
4
  import { CarretDown as f, ChevronRight as S } from "@strapi/icons";
@@ -7,12 +7,12 @@ import { extractStyleFromTheme as x } from "../../helpers/theme.js";
7
7
  import { Link as y } from "../Link/Link.js";
8
8
  import { Button as C } from "../../Button/Button.js";
9
9
  import { Box as $ } from "../../Box/Box.js";
10
- import { Flex as s } from "../../Flex/Flex.js";
10
+ import { Flex as c } from "../../Flex/Flex.js";
11
11
  import { Typography as i } from "../../Typography/Typography.js";
12
- const v = n.Root, k = a(({ size: r, ...o }, t) => e(n.Trigger, { asChild: !0, children: e(C, { ref: t, type: "button", variant: "ghost", endIcon: e(f, { width: `${6 / 16}rem`, height: `${4 / 16}rem`, "aria-hidden": !0 }), paddingTop: r === "S" ? 1 : 2, paddingBottom: r === "S" ? 1 : 2, paddingLeft: r === "S" ? 3 : 4, paddingRight: r === "S" ? 3 : 4, ...o }) })), R = a(({ children: r, intersectionId: o, popoverPlacement: t = "bottom-start", ...g }, p) => {
12
+ const v = n.Root, k = a(({ size: r, endIcon: o = e(f, { width: `${6 / 16}rem`, height: `${4 / 16}rem`, "aria-hidden": !0 }), ...t }, d) => e(n.Trigger, { asChild: !0, children: e(C, { ref: d, type: "button", variant: "ghost", endIcon: o, paddingTop: r === "S" ? 1 : 2, paddingBottom: r === "S" ? 1 : 2, paddingLeft: r === "S" ? 3 : 4, paddingRight: r === "S" ? 3 : 4, ...t }) })), R = a(({ children: r, intersectionId: o, popoverPlacement: t = "bottom-start", ...d }, p) => {
13
13
  const [b, m] = t.split("-");
14
- return e(n.Portal, { children: e(n.Content, { align: m, side: b, loop: !0, asChild: !0, children: d(c, { ref: p, direction: "column", borderStyle: "solid", borderWidth: "1px", borderColor: "neutral150", hasRadius: !0, background: "neutral0", shadow: "filterShadow", maxHeight: "15rem", padding: 1, alignItems: "flex-start", position: "relative", overflow: "auto", ...g, children: [r, e($, { id: o, width: "100%", height: "1px" })] }) }) });
15
- }), c = l(s)`
14
+ return e(n.Portal, { children: e(n.Content, { align: m, side: b, loop: !0, asChild: !0, children: s(u, { ref: p, direction: "column", borderStyle: "solid", borderWidth: "1px", borderColor: "neutral150", hasRadius: !0, background: "neutral0", shadow: "filterShadow", maxHeight: "15rem", padding: 1, alignItems: "flex-start", position: "relative", overflow: "auto", ...d, children: [r, e($, { id: o, width: "100%", height: "1px" })] }) }) });
15
+ }), u = l(c)`
16
16
  scrollbar-width: none;
17
17
  -ms-overflow-style: none;
18
18
  -webkit-overflow-scrolling: touch;
@@ -20,7 +20,7 @@ const v = n.Root, k = a(({ size: r, ...o }, t) => e(n.Trigger, { asChild: !0, ch
20
20
  &::-webkit-scrollbar {
21
21
  display: none;
22
22
  }
23
- `, T = ({ onSelect: r, disabled: o = !1, ...t }) => e(n.Item, { asChild: !0, onSelect: r, disabled: o, children: t.isLink || t.isExternal ? e(L, { color: "neutral800", ...t, isExternal: t.isExternal ?? !1, children: e(i, { children: t.children }) }) : e(h, { cursor: "pointer", color: "neutral800", background: "transparent", borderStyle: "none", ...t, children: e(i, { children: t.children }) }) }), u = ({ theme: r }) => w`
23
+ `, T = ({ onSelect: r, disabled: o = !1, ...t }) => e(n.Item, { asChild: !0, onSelect: r, disabled: o, children: t.isLink || t.isExternal ? e(L, { color: "neutral800", ...t, isExternal: t.isExternal ?? !1, children: e(i, { children: t.children }) }) : e(g, { cursor: "pointer", color: "neutral800", background: "transparent", borderStyle: "none", ...t, children: e(i, { children: t.children }) }) }), h = ({ theme: r }) => w`
24
24
  text-align: left;
25
25
  width: 100%;
26
26
  border-radius: ${r.borderRadius};
@@ -49,8 +49,8 @@ const v = n.Root, k = a(({ size: r, ...o }, t) => e(n.Trigger, { asChild: !0, ch
49
49
  content: none;
50
50
  }
51
51
  }
52
- `, h = l(s)`
53
- ${u}
52
+ `, g = l(c)`
53
+ ${h}
54
54
  `, L = l(y)`
55
55
  /* We include this here again because typically when people use OptionLink they provide an as prop which cancels the Box props */
56
56
  color: ${({ theme: r, color: o }) => x(r.colors, o, void 0)};
@@ -65,10 +65,10 @@ const v = n.Root, k = a(({ size: r, ...o }, t) => e(n.Trigger, { asChild: !0, ch
65
65
  fill: currentColor;
66
66
  }
67
67
 
68
- ${u}
68
+ ${h}
69
69
  `, M = a((r, o) => e(n.Label, { asChild: !0, children: e(I, { ref: o, variant: "sigma", textColor: "neutral600", ...r }) })), I = l(i)`
70
70
  padding: ${({ theme: r }) => r.spaces[2]} ${({ theme: r }) => r.spaces[4]};
71
- `, B = n.Sub, O = a(({ disabled: r = !1, ...o }, t) => e(n.SubTrigger, { asChild: !0, disabled: r, children: d(E, { ref: t, color: "neutral800", as: "button", type: "button", background: "transparent", borderStyle: "none", gap: 5, ...o, children: [e(i, { children: o.children }), e(W, { height: 12, width: 12 })] }) })), E = l(h)`
71
+ `, B = n.Sub, O = a(({ disabled: r = !1, ...o }, t) => e(n.SubTrigger, { asChild: !0, disabled: r, children: s(E, { ref: t, color: "neutral800", as: "button", type: "button", background: "transparent", borderStyle: "none", gap: 5, ...o, children: [e(i, { children: o.children }), e(W, { height: 12, width: 12 })] }) })), E = l(g)`
72
72
  &[data-state='open'] {
73
73
  background-color: ${({ theme: r }) => r.colors.primary100};
74
74
  }
@@ -76,7 +76,7 @@ const v = n.Root, k = a(({ size: r, ...o }, t) => e(n.Trigger, { asChild: !0, ch
76
76
  path {
77
77
  fill: ${({ theme: r }) => r.colors.neutral500};
78
78
  }
79
- `, j = a((r, o) => e(n.Portal, { children: e(n.SubContent, { sideOffset: 8, asChild: !0, children: e(c, { ref: o, direction: "column", borderStyle: "solid", borderWidth: "1px", borderColor: "neutral150", hasRadius: !0, background: "neutral0", shadow: "filterShadow", maxHeight: "15rem", padding: 1, alignItems: "flex-start", ...r }) }) })), N = v, Q = k, U = R, X = T, Y = M, Z = B, _ = O, z = j;
79
+ `, j = a((r, o) => e(n.Portal, { children: e(n.SubContent, { sideOffset: 8, asChild: !0, children: e(u, { ref: o, direction: "column", borderStyle: "solid", borderWidth: "1px", borderColor: "neutral150", hasRadius: !0, background: "neutral0", shadow: "filterShadow", maxHeight: "15rem", padding: 1, alignItems: "flex-start", overflow: "auto", ...r }) }) })), N = v, Q = k, U = R, X = T, Y = M, Z = B, _ = O, z = j;
80
80
  export {
81
81
  U as Content,
82
82
  X as Item,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@strapi/design-system",
3
- "version": "1.7.10",
3
+ "version": "1.8.1",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "sideEffects": false,
@@ -20,12 +20,13 @@
20
20
  "dependencies": {
21
21
  "@codemirror/lang-json": "^6.0.1",
22
22
  "@floating-ui/react-dom": "^1.3.0",
23
+ "@internationalized/date": "^3.2.0",
23
24
  "@internationalized/number": "^3.2.0",
24
- "@radix-ui/react-dismissable-layer": "^1.0.3",
25
- "@radix-ui/react-dropdown-menu": "^2.0.4",
26
- "@radix-ui/react-focus-scope": "1.0.2",
27
- "@strapi/ui-primitives": "^1.7.10",
28
- "@uiw/react-codemirror": "^4.19.16",
25
+ "@radix-ui/react-dismissable-layer": "^1.0.4",
26
+ "@radix-ui/react-dropdown-menu": "^2.0.5",
27
+ "@radix-ui/react-focus-scope": "1.0.3",
28
+ "@strapi/ui-primitives": "^1.8.1",
29
+ "@uiw/react-codemirror": "^4.21.3",
29
30
  "aria-hidden": "^1.2.3",
30
31
  "compute-scroll-into-view": "^3.0.3",
31
32
  "prop-types": "^15.8.1",
@@ -33,13 +34,13 @@
33
34
  },
34
35
  "devDependencies": {
35
36
  "@playwright/test": "1.33.0",
36
- "@strapi/icons": "^1.7.10",
37
+ "@strapi/icons": "^1.8.1",
37
38
  "@types/react-router-dom": "^5.3.3",
38
39
  "@types/styled-components": "^5.1.26",
39
40
  "axe-playwright": "^1.2.3",
40
41
  "cross-env": "^7.0.3",
41
42
  "react-router-dom": "^5.3.4",
42
- "styled-components": "^5.3.10"
43
+ "styled-components": "^5.3.11"
43
44
  },
44
45
  "peerDependencies": {
45
46
  "@strapi/icons": "^1.5.0",
@@ -53,7 +54,7 @@
53
54
  "build": "yarn build:prod",
54
55
  "build:prod": "vite build",
55
56
  "clean": "rimraf dist node_modules",
56
- "generate:types": "tsc --noEmit false --emitDeclarationOnly --declarationDir dist",
57
+ "generate:types": "tsc --noEmit false --declaration --emitDeclarationOnly --declarationDir dist",
57
58
  "lint": "eslint . --ext .js,.jsx,.tsx,.ts",
58
59
  "format": "yarn lint --fix",
59
60
  "test": "jest -c jest.config.js",
@@ -64,5 +65,5 @@
64
65
  "test:e2e:watch": "chokidar '**/__tests__/*.e2e.js' -c 'npm run test:e2e -- --retries=0 {path}'",
65
66
  "test:e2e:debug": "cross-env PWDEBUG=1 playwright test"
66
67
  },
67
- "gitHead": "c5116e561a1373177b9bfe2dc5a8a0abb1260900"
68
+ "gitHead": "203b39b5eae476962807fa10b73ed0731d694da6"
68
69
  }
@@ -1 +0,0 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),j=require("react"),O=require("./components.cjs"),W=require("./DatePickerTd.cjs"),n=require("./DatePickerTh.cjs"),$=require("../helpers/getDefaultLocale.cjs"),E=require("./utils/generateWeeks.cjs"),H=require("./utils/getDayOfWeek.cjs"),I=require("./utils/getMonths.cjs"),V=require("./utils/getYears.cjs"),s=require("../SimpleMenu/SimpleMenu.cjs"),z=require("../RawTable/RawTable.cjs"),A=require("../RawTable/RawThead.cjs"),D=require("../RawTable/RawTr.cjs"),G=require("../RawTable/RawTbody.cjs"),J=require("./utils/formatDate.cjs"),K=require("../FocusTrap/FocusTrap.cjs"),h=require("../Box/Box.cjs"),N=require("../Flex/Flex.cjs"),Q=require("../VisuallyHidden/VisuallyHidden.cjs"),U=({onEscape:i,popoverSource:o,...l})=>e.jsx(O.DatePickerPopover,{source:o,role:"dialog","aria-modal":"true",spacing:4,children:e.jsx(K.FocusTrap,{onEscape:i,children:e.jsx(p,{...l})})}),p=({selectedDate:i,initialDate:o=new Date,locale:l,onChange:x,minDate:k,maxDate:T})=>{const[c,d]=j.useState(o),[g,q,w]=E.generateWeeks(c,i),{sun:P,mon:m,tue:f,wed:R,thu:C,fri:M,sat:y}=H.getDayOfWeek(),u=I.getMonths(),S=V.getYears(k,T),b=l||$.getDefaultLocale();j.useEffect(()=>{i&&d(i)},[i]);const F=r=>{const t=new Date(c);t.setMonth(u.indexOf(r)),d(t)},Y=r=>{const t=new Date(c);t.setFullYear(r),d(t)},B=r=>()=>{x&&x(r)};return e.jsxs(h.Box,{padding:4,children:[e.jsx(h.Box,{paddingBottom:4,paddingLeft:2,paddingRight:2,children:e.jsxs(N.Flex,{children:[e.jsx(s.SimpleMenu,{label:u[c.getMonth()],children:u.map(r=>e.jsx(s.MenuItem,{onClick:()=>F(r),children:r},r))}),e.jsx(h.Box,{paddingLeft:2,children:e.jsx(s.SimpleMenu,{label:c.getFullYear(),children:S.map(r=>e.jsx(s.MenuItem,{onClick:()=>Y(r),children:r},r))})})]})}),e.jsxs(z.RawTable,{colCount:7,rowCount:g.length+1,initialCol:w,initialRow:q,role:"grid",children:[e.jsx(A.RawThead,{children:e.jsxs(D.RawTr,{"aria-rowindex":1,children:[e.jsx(n.DatePickerTh,{children:P}),e.jsx(n.DatePickerTh,{children:m}),e.jsx(n.DatePickerTh,{children:f}),e.jsx(n.DatePickerTh,{children:R}),e.jsx(n.DatePickerTh,{children:C}),e.jsx(n.DatePickerTh,{children:M}),e.jsx(n.DatePickerTh,{children:y})]})}),e.jsx(G.RawTbody,{children:g.map((r,t)=>e.jsx(D.RawTr,{children:r.map(({date:a,outsideMonth:v,isSelected:L})=>e.jsxs(W.DatePickerTd,{outsideMonth:v,onSelectDay:B(a),isSelected:L,children:[e.jsx("span",{"aria-hidden":!0,children:a.getDate()}),e.jsx(Q.VisuallyHidden,{children:e.jsx("span",{children:J.formatDate(a,b)})})]},`${a.getFullYear()}-${a.getMonth()+1}-${a.getDate()}`))},t))})]})]})};exports.DatePickerCalendar=U;exports.DatePickerCalendarContent=p;
@@ -1,43 +0,0 @@
1
- import { jsx as e, jsxs as l } from "react/jsx-runtime";
2
- import { useState as E, useEffect as O } from "react";
3
- import { DatePickerPopover as W } from "./components.js";
4
- import { DatePickerTd as H } from "./DatePickerTd.js";
5
- import { DatePickerTh as t } from "./DatePickerTh.js";
6
- import { getDefaultLocale as I } from "../helpers/getDefaultLocale.js";
7
- import { generateWeeks as V } from "./utils/generateWeeks.js";
8
- import { getDayOfWeek as q } from "./utils/getDayOfWeek.js";
9
- import { getMonths as z } from "./utils/getMonths.js";
10
- import { getYears as A } from "./utils/getYears.js";
11
- import { SimpleMenu as u, MenuItem as g } from "../SimpleMenu/SimpleMenu.js";
12
- import { RawTable as G } from "../RawTable/RawTable.js";
13
- import { RawThead as J } from "../RawTable/RawThead.js";
14
- import { RawTr as D } from "../RawTable/RawTr.js";
15
- import { RawTbody as K } from "../RawTable/RawTbody.js";
16
- import { formatDate as N } from "./utils/formatDate.js";
17
- import { FocusTrap as Q } from "../FocusTrap/FocusTrap.js";
18
- import { Box as p } from "../Box/Box.js";
19
- import { Flex as U } from "../Flex/Flex.js";
20
- import { VisuallyHidden as X } from "../VisuallyHidden/VisuallyHidden.js";
21
- const ke = ({ onEscape: i, popoverSource: c, ...d }) => e(W, { source: c, role: "dialog", "aria-modal": "true", spacing: 4, children: e(Q, { onEscape: i, children: e(Z, { ...d }) }) }), Z = ({ selectedDate: i, initialDate: c = /* @__PURE__ */ new Date(), locale: d, onChange: s, minDate: w, maxDate: k }) => {
22
- const [a, m] = E(c), [f, C, M] = V(a, i), { sun: x, mon: R, tue: T, wed: P, thu: F, fri: S, sat: Y } = q(), h = z(), b = A(w, k), y = d || I();
23
- O(() => {
24
- i && m(i);
25
- }, [i]);
26
- const v = (r) => {
27
- const o = new Date(a);
28
- o.setMonth(h.indexOf(r)), m(o);
29
- }, L = (r) => {
30
- const o = new Date(a);
31
- o.setFullYear(r), m(o);
32
- }, $ = (r) => () => {
33
- s && s(r);
34
- };
35
- return l(p, { padding: 4, children: [e(p, { paddingBottom: 4, paddingLeft: 2, paddingRight: 2, children: l(U, { children: [e(u, { label: h[a.getMonth()], children: h.map((r) => e(g, { onClick: () => v(r), children: r }, r)) }), e(p, { paddingLeft: 2, children: e(u, { label: a.getFullYear(), children: b.map((r) => e(g, { onClick: () => L(r), children: r }, r)) }) })] }) }), l(G, { colCount: 7, rowCount: f.length + 1, initialCol: M, initialRow: C, role: "grid", children: [e(J, { children: l(D, { "aria-rowindex": 1, children: [e(t, { children: x }), e(t, { children: R }), e(t, { children: T }), e(t, { children: P }), e(t, { children: F }), e(t, { children: S }), e(t, { children: Y })] }) }), e(K, { children: f.map((r, o) => (
36
- // eslint-disable-next-line react/no-array-index-key
37
- e(D, { children: r.map(({ date: n, outsideMonth: j, isSelected: B }) => l(H, { outsideMonth: j, onSelectDay: $(n), isSelected: B, children: [e("span", { "aria-hidden": !0, children: n.getDate() }), e(X, { children: e("span", { children: N(n, y) }) })] }, `${n.getFullYear()}-${n.getMonth() + 1}-${n.getDate()}`)) }, o)
38
- )) })] })] });
39
- };
40
- export {
41
- ke as DatePickerCalendar,
42
- Z as DatePickerCalendarContent
43
- };
@@ -1,19 +0,0 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),u=require("styled-components"),s=require("../RawTable/RawCell.cjs"),l=require("../Typography/Typography.cjs"),c=e=>e&&e.__esModule?e:{default:e},d=c(u),f=d.default.button`
2
- border: none;
3
- background: ${({theme:e,$isSelected:r})=>r?e.colors.primary100:e.colors.neutral0};
4
- height: ${32/16}rem;
5
- text-align: center;
6
- width: ${32/16}rem;
7
- border-radius: ${({theme:e})=>e.borderRadius};
8
-
9
- // Trick to prevent the outline from overflowing because of the general outline-offset
10
- outline-offset: -2px;
11
-
12
- &:hover {
13
- background: ${({theme:e})=>e.colors.primary100};
14
- }
15
-
16
- &:hover > ${l.Typography} {
17
- color: ${({theme:e})=>e.colors.primary600};
18
- }
19
- `,p=({children:e,outsideMonth:r=!1,onSelectDay:i,isSelected:t=!1,...a})=>{let o="neutral900";return t?o="primary600":r&&(o="neutral600"),n.jsx(s.RawTd,{...a,children:n.jsx(f,{tabIndex:-1,onClick:i,$isSelected:t,type:"button",children:n.jsx(l.Typography,{variant:"pi",textColor:o,fontWeight:t?"bold":void 0,children:e})})})};exports.DatePickerTd=p;
@@ -1,29 +0,0 @@
1
- import { jsx as n } from "react/jsx-runtime";
2
- import c from "styled-components";
3
- import { RawTd as d } from "../RawTable/RawCell.js";
4
- import { Typography as i } from "../Typography/Typography.js";
5
- const f = c.button`
6
- border: none;
7
- background: ${({ theme: r, $isSelected: o }) => o ? r.colors.primary100 : r.colors.neutral0};
8
- height: ${32 / 16}rem;
9
- text-align: center;
10
- width: ${32 / 16}rem;
11
- border-radius: ${({ theme: r }) => r.borderRadius};
12
-
13
- // Trick to prevent the outline from overflowing because of the general outline-offset
14
- outline-offset: -2px;
15
-
16
- &:hover {
17
- background: ${({ theme: r }) => r.colors.primary100};
18
- }
19
-
20
- &:hover > ${i} {
21
- color: ${({ theme: r }) => r.colors.primary600};
22
- }
23
- `, h = ({ children: r, outsideMonth: o = !1, onSelectDay: l, isSelected: e = !1, ...a }) => {
24
- let t = "neutral900";
25
- return e ? t = "primary600" : o && (t = "neutral600"), n(d, { ...a, children: n(f, { tabIndex: -1, onClick: l, $isSelected: e, type: "button", children: n(i, { variant: "pi", textColor: t, fontWeight: e ? "bold" : void 0, children: r }) }) });
26
- };
27
- export {
28
- h as DatePickerTd
29
- };
@@ -1,9 +0,0 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),o=require("styled-components"),n=require("../RawTable/RawCell.cjs"),s=require("../Flex/Flex.cjs"),l=require("../Typography/Typography.cjs"),a=require("../VisuallyHidden/VisuallyHidden.cjs"),u=e=>e&&e.__esModule?e:{default:e},r=u(o),c=r.default(n.RawTh)`
2
- // Trick to prevent the outline from overflowing because of the general outline-offset
3
- outline-offset: -2px;
4
- border-radius: ${({theme:e})=>e.borderRadius};
5
- text-transform: capitalize;
6
- `,d=r.default(s.Flex)`
7
- height: ${24/16}rem;
8
- width: ${32/16}rem;
9
- `,h=({children:e,...i})=>t.jsx(c,{...i,children:t.jsxs(d,{justifyContent:"center",children:[t.jsx(l.Typography,{variant:"pi",fontWeight:"bold",color:"neutral800","aria-hidden":!0,children:e.substr(0,2)}),t.jsx(a.VisuallyHidden,{children:t.jsx("span",{children:e})})]})});exports.DatePickerTh=h;
@@ -1,18 +0,0 @@
1
- import { jsx as e, jsxs as i } from "react/jsx-runtime";
2
- import t from "styled-components";
3
- import { RawTh as n } from "../RawTable/RawCell.js";
4
- import { Flex as a } from "../Flex/Flex.js";
5
- import { Typography as s } from "../Typography/Typography.js";
6
- import { VisuallyHidden as l } from "../VisuallyHidden/VisuallyHidden.js";
7
- const f = t(n)`
8
- // Trick to prevent the outline from overflowing because of the general outline-offset
9
- outline-offset: -2px;
10
- border-radius: ${({ theme: r }) => r.borderRadius};
11
- text-transform: capitalize;
12
- `, h = t(a)`
13
- height: ${24 / 16}rem;
14
- width: ${32 / 16}rem;
15
- `, T = ({ children: r, ...o }) => e(f, { ...o, children: i(h, { justifyContent: "center", children: [e(s, { variant: "pi", fontWeight: "bold", color: "neutral800", "aria-hidden": !0, children: r.substr(0, 2) }), e(l, { children: e("span", { children: r }) })] }) });
16
- export {
17
- T as DatePickerTh
18
- };
@@ -1 +0,0 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=(e,t)=>!e||!t?!1:e.getFullYear()===t.getFullYear()&&e.getMonth()===t.getMonth()&&e.getDate()===t.getDate();exports.isDateEqual=l;
@@ -1,4 +0,0 @@
1
- const r = (e, t) => !e || !t ? !1 : e.getFullYear() === t.getFullYear() && e.getMonth() === t.getMonth() && e.getDate() === t.getDate();
2
- export {
3
- r as isDateEqual
4
- };
@@ -1,39 +0,0 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("styled-components"),n=require("../Field/FieldInput.cjs"),a=require("../Popover/Popover.cjs"),i=require("../Box/Box.cjs"),d=e=>e&&e.__esModule?e:{default:e},r=d(o),s=r.default(a.Popover)`
2
- max-height: ${3*6}rem;
3
- overflow: hidden;
4
- `;/**
5
- * @preserve
6
- * @deprecated This component will be removed in the next major version
7
- */const l=r.default.button`
8
- border: none;
9
- background: transparent;
10
- border-radius: ${({theme:e})=>e.borderRadius};
11
- cursor: ${e=>e["aria-disabled"]?"not-allowed":void 0};
12
-
13
- & svg path {
14
- fill: ${({theme:e})=>e.colors.neutral500};
15
- }
16
- `,u=r.default.div`
17
- ${({bold:e,theme:t})=>e?o.css`
18
- & ${n.InputWrapper} {
19
- border: 1px solid ${t.colors.primary600};
20
- }
21
- `:""}
22
- `;/**
23
- * @preserve
24
- * @deprecated This component will be removed in the next major version
25
- */const c=r.default(i.Box)`
26
- background: transparent;
27
- border: none;
28
- position: relative;
29
- z-index: 1;
30
-
31
- svg {
32
- height: ${11/16}rem;
33
- width: ${11/16}rem;
34
- }
35
-
36
- svg path {
37
- fill: ${({theme:e})=>e.colors.neutral600};
38
- }
39
- `;exports.DatePickerButton=l;exports.DatePickerPopover=s;exports.DatePickerWrapper=u;exports.IconBox=c;