@strapi/design-system 1.6.5 → 1.7.0-alpha.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.
- package/README.md +55 -0
- package/dist/BaseButton/BaseButton.cjs +4 -4
- package/dist/BaseButton/BaseButton.js +18 -17
- package/dist/BaseLink/BaseLink.cjs +1 -3
- package/dist/BaseLink/BaseLink.js +14 -14
- package/dist/Combobox/Combobox.cjs +104 -1
- package/dist/Combobox/Combobox.js +348 -278
- package/dist/Combobox/ComboboxList.cjs +1 -1
- package/dist/Combobox/ComboboxList.js +7 -6
- package/dist/Combobox/ComboboxOption.cjs +1 -1
- package/dist/Combobox/ComboboxOption.js +3 -29
- package/dist/DatePicker/DatePicker.cjs +12 -1
- package/dist/DatePicker/DatePicker.js +79 -100
- package/dist/DatePicker/DatePickerCalendar.cjs +1 -1
- package/dist/DatePicker/DatePickerCalendar.js +124 -57
- package/dist/DatePicker/DatePickerTd.cjs +4 -4
- package/dist/DatePicker/DatePickerTd.js +42 -24
- package/dist/DatePicker/DatePickerTh.cjs +3 -3
- package/dist/DatePicker/DatePickerTh.js +29 -12
- package/dist/DatePicker/components.cjs +8 -6
- package/dist/DatePicker/components.js +15 -13
- package/dist/DatePicker/utils/getDayOfWeek.js +8 -8
- package/dist/DatePicker/utils/getMonths.cjs +1 -1
- package/dist/DatePicker/utils/getMonths.js +3 -3
- package/dist/DatePicker/utils/getYears.cjs +1 -1
- package/dist/DatePicker/utils/getYears.js +1 -1
- package/dist/DateTimePicker/DateTimePicker.cjs +1 -1
- package/dist/DateTimePicker/DateTimePicker.js +97 -104
- package/dist/DateTimePicker/parseDate.cjs +1 -1
- package/dist/DateTimePicker/parseDate.js +2 -1
- package/dist/Field/FieldHint.cjs +1 -1
- package/dist/Field/FieldHint.js +3 -3
- package/dist/Field/FieldLabel.cjs +5 -2
- package/dist/Field/FieldLabel.js +27 -27
- package/dist/IconButton/IconButton.cjs +4 -4
- package/dist/IconButton/IconButton.js +32 -30
- package/dist/NumberInput/NumberInput.cjs +2 -2
- package/dist/NumberInput/NumberInput.js +31 -31
- package/dist/RawTable/RawCell.cjs +1 -1
- package/dist/RawTable/RawCell.js +4 -1
- package/dist/Select/MultiSelect.cjs +30 -0
- package/dist/Select/MultiSelect.js +239 -0
- package/dist/Select/MultiSelectNested.cjs +3 -1
- package/dist/Select/MultiSelectNested.js +25 -12
- package/dist/Select/OptGroup.cjs +1 -1
- package/dist/Select/OptGroup.js +3 -22
- package/dist/Select/Option.cjs +1 -45
- package/dist/Select/Option.js +12 -100
- package/dist/Select/Select.cjs +1 -3
- package/dist/Select/Select.js +9 -205
- package/dist/Select/SelectList.cjs +1 -1
- package/dist/Select/SelectList.js +98 -80
- package/dist/Select/SelectParts.cjs +79 -0
- package/dist/Select/SelectParts.js +221 -0
- package/dist/Select/SingleSelect.cjs +1 -0
- package/dist/Select/SingleSelect.js +129 -0
- package/dist/Select/index.cjs +1 -1
- package/dist/Select/index.js +15 -10
- package/dist/TextButton/TextButton.cjs +6 -12
- package/dist/TextButton/TextButton.js +32 -46
- package/dist/TextInput/TextInput.cjs +1 -1
- package/dist/TextInput/TextInput.js +47 -46
- package/dist/TimePicker/TimePicker.cjs +5 -7
- package/dist/TimePicker/TimePicker.js +53 -103
- package/dist/helpers/objects.cjs +1 -1
- package/dist/helpers/objects.js +6 -22
- package/dist/hooks/useComposeRefs.cjs +1 -0
- package/dist/hooks/useComposeRefs.js +14 -0
- package/dist/hooks/useIntersection.cjs +1 -1
- package/dist/hooks/useIntersection.js +7 -7
- package/dist/index.cjs +1 -1
- package/dist/index.js +143 -138
- package/dist/themes/extendTheme.cjs +4 -4
- package/dist/themes/extendTheme.js +21 -13
- package/dist/themes/utils.cjs +6 -6
- package/dist/themes/utils.js +7 -6
- package/dist/v2/Link/Link.cjs +13 -11
- package/dist/v2/Link/Link.js +52 -37
- package/dist/v2/SimpleMenu/Menu.cjs +65 -0
- package/dist/v2/SimpleMenu/Menu.js +229 -0
- package/dist/v2/SimpleMenu/SimpleMenu.cjs +1 -33
- package/dist/v2/SimpleMenu/SimpleMenu.js +37 -176
- package/dist/v2/SimpleMenu/index.cjs +1 -1
- package/dist/v2/SimpleMenu/index.js +5 -3
- package/dist/v2/index.cjs +1 -1
- package/dist/v2/index.js +53 -51
- package/package.json +7 -19
- package/dist/Combobox/components.cjs +0 -53
- package/dist/Combobox/components.js +0 -64
- package/dist/Combobox/utils.cjs +0 -1
- package/dist/Combobox/utils.js +0 -78
- package/dist/DateTimePicker/DateTimePickerProps.cjs +0 -1
- package/dist/DateTimePicker/DateTimePickerProps.js +0 -40
- package/dist/DateTimePicker/__tests__/parseDate.test.cjs +0 -1
- package/dist/DateTimePicker/__tests__/parseDate.test.js +0 -8
- package/dist/Select/SelectButton.cjs +0 -19
- package/dist/Select/SelectButton.js +0 -67
- package/dist/Select/SelectTags.cjs +0 -6
- package/dist/Select/SelectTags.js +0 -38
- package/dist/Select/components.cjs +0 -39
- package/dist/Select/components.js +0 -48
- package/dist/Select/constants.cjs +0 -1
- package/dist/Select/constants.js +0 -8
- package/dist/Select/hooks/useButtonRef.cjs +0 -1
- package/dist/Select/hooks/useButtonRef.js +0 -13
- package/dist/Select/hooks/useListRef.cjs +0 -1
- package/dist/Select/hooks/useListRef.js +0 -18
- package/dist/Select/utils.cjs +0 -1
- package/dist/Select/utils.js +0 -17
- package/dist/helpers/arrays.cjs +0 -1
- package/dist/helpers/arrays.js +0 -6
- package/dist/v2/SimpleMenu/utils.cjs +0 -12
- package/dist/v2/SimpleMenu/utils.js +0 -15
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={Keyboard:"down:keyboard",Mouse:"down:mouse"},o={Keyboard:"up:keyboard",Mouse:"up:mouse"};exports.DownState=e;exports.UpState=o;
|
package/dist/Select/constants.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react"),s=require("../constants.cjs"),c=t=>{const r=e.useRef(null),n=e.useRef(null),u=e.useRef();return t&&(u.current=t),e.useEffect(()=>{!n.current||t||(u.current===s.DownState.Keyboard||u.current===s.UpState.Keyboard)&&r.current.focus()},[t]),e.useEffect(()=>{n.current=!0},[]),r};exports.useButtonRef=c;
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { useRef as e, useEffect as n } from "react";
|
|
2
|
-
import { DownState as f, UpState as c } from "../constants.js";
|
|
3
|
-
const m = (t) => {
|
|
4
|
-
const u = e(null), o = e(null), r = e();
|
|
5
|
-
return t && (r.current = t), n(() => {
|
|
6
|
-
!o.current || t || (r.current === f.Keyboard || r.current === c.Keyboard) && u.current.focus();
|
|
7
|
-
}, [t]), n(() => {
|
|
8
|
-
o.current = !0;
|
|
9
|
-
}, []), u;
|
|
10
|
-
};
|
|
11
|
-
export {
|
|
12
|
-
m as useButtonRef
|
|
13
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react"),s=require("../constants.cjs"),u=require("../utils.cjs"),i=r=>{const e=o.useRef(null);return o.useEffect(()=>{e.current.focus()},[]),o.useEffect(()=>{if(!e.current)return;const n=e.current.querySelector('[aria-selected="true"]'),c=e.current.querySelectorAll('[role="option"]');let t;n?t=n:r===s.UpState.Keyboard?t=c[c.length-1]:r===s.DownState.Keyboard&&(t=c[0]),t&&(r===s.UpState.Keyboard||r===s.DownState.Keyboard)&&u.changeDescendant(e.current,t)},[]),e};exports.useListRef=i;
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import { useRef as i, useEffect as c } from "react";
|
|
2
|
-
import { UpState as s, DownState as f } from "../constants.js";
|
|
3
|
-
import { changeDescendant as l } from "../utils.js";
|
|
4
|
-
const y = (r) => {
|
|
5
|
-
const e = i(null);
|
|
6
|
-
return c(() => {
|
|
7
|
-
e.current.focus();
|
|
8
|
-
}, []), c(() => {
|
|
9
|
-
if (!e.current)
|
|
10
|
-
return;
|
|
11
|
-
const n = e.current.querySelector('[aria-selected="true"]'), o = e.current.querySelectorAll('[role="option"]');
|
|
12
|
-
let t;
|
|
13
|
-
n ? t = n : r === s.Keyboard ? t = o[o.length - 1] : r === f.Keyboard && (t = o[0]), t && (r === s.Keyboard || r === f.Keyboard) && l(e.current, t);
|
|
14
|
-
}, []), e;
|
|
15
|
-
};
|
|
16
|
-
export {
|
|
17
|
-
y as useListRef
|
|
18
|
-
};
|
package/dist/Select/utils.cjs
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("compute-scroll-into-view"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},r=a(s),i=(e,t)=>{e.setAttribute("aria-activedescendant",t.getAttribute("id")),e.querySelectorAll('[role="option"]').forEach(c=>c.classList.remove("is-focused")),t.classList.add("is-focused"),r.default(t,{scrollMode:"if-needed",block:"nearest",inline:"nearest"}).forEach(({el:c,top:o,left:n})=>{c.scrollTop=o,c.scrollLeft=n})},l=e=>{const t=e.getAttribute("aria-activedescendant");return e.querySelector(`#${t}`)};exports.changeDescendant=i;exports.getActiveDescendant=l;
|
package/dist/Select/utils.js
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import n from "compute-scroll-into-view";
|
|
2
|
-
const d = (e, t) => {
|
|
3
|
-
e.setAttribute("aria-activedescendant", t.getAttribute("id")), e.querySelectorAll('[role="option"]').forEach((c) => c.classList.remove("is-focused")), t.classList.add("is-focused"), n(t, {
|
|
4
|
-
scrollMode: "if-needed",
|
|
5
|
-
block: "nearest",
|
|
6
|
-
inline: "nearest"
|
|
7
|
-
}).forEach(({ el: c, top: o, left: s }) => {
|
|
8
|
-
c.scrollTop = o, c.scrollLeft = s;
|
|
9
|
-
});
|
|
10
|
-
}, l = (e) => {
|
|
11
|
-
const t = e.getAttribute("aria-activedescendant");
|
|
12
|
-
return e.querySelector(`#${t}`);
|
|
13
|
-
};
|
|
14
|
-
export {
|
|
15
|
-
d as changeDescendant,
|
|
16
|
-
l as getActiveDescendant
|
|
17
|
-
};
|
package/dist/helpers/arrays.cjs
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});function e(r){return r&&typeof r=="object"&&Array.isArray(r)}exports.isArray=e;
|
package/dist/helpers/arrays.js
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=({theme:o})=>`
|
|
2
|
-
text-align: left;
|
|
3
|
-
width: 100%;
|
|
4
|
-
color: ${o.colors.neutral800};
|
|
5
|
-
border-radius: ${o.borderRadius};
|
|
6
|
-
&:focus {
|
|
7
|
-
background-color: ${o.colors.primary100};
|
|
8
|
-
}
|
|
9
|
-
&:not([aria-disabled]):hover {
|
|
10
|
-
background-color: ${o.colors.primary100};
|
|
11
|
-
}
|
|
12
|
-
`;exports.getOptionStyle=r;
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
const r = ({ theme: o }) => `
|
|
2
|
-
text-align: left;
|
|
3
|
-
width: 100%;
|
|
4
|
-
color: ${o.colors.neutral800};
|
|
5
|
-
border-radius: ${o.borderRadius};
|
|
6
|
-
&:focus {
|
|
7
|
-
background-color: ${o.colors.primary100};
|
|
8
|
-
}
|
|
9
|
-
&:not([aria-disabled]):hover {
|
|
10
|
-
background-color: ${o.colors.primary100};
|
|
11
|
-
}
|
|
12
|
-
`;
|
|
13
|
-
export {
|
|
14
|
-
r as getOptionStyle
|
|
15
|
-
};
|