@strapi/design-system 1.4.1 → 1.5.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/dist/Accordion/AccordionContent.cjs +1 -1
- package/dist/Accordion/AccordionContent.js +17 -37
- package/dist/Accordion/AccordionToggle.cjs +6 -6
- package/dist/Accordion/AccordionToggle.js +75 -96
- package/dist/Alert/Alert.cjs +12 -12
- package/dist/Alert/Alert.js +83 -102
- package/dist/Alert/utils.cjs +1 -1
- package/dist/Alert/utils.js +3 -3
- package/dist/Avatar/Avatar.cjs +4 -4
- package/dist/Avatar/Avatar.js +41 -35
- package/dist/Badge/Badge.cjs +4 -4
- package/dist/Badge/Badge.js +29 -49
- package/dist/BaseButton/BaseButton.cjs +3 -3
- package/dist/BaseButton/BaseButton.js +20 -42
- package/dist/BaseCheckbox/BaseCheckbox.cjs +6 -6
- package/dist/BaseCheckbox/BaseCheckbox.js +35 -55
- package/dist/BaseLink/BaseLink.cjs +2 -2
- package/dist/BaseLink/BaseLink.js +21 -43
- package/dist/BaseRadio/BaseRadio.cjs +8 -8
- package/dist/BaseRadio/BaseRadio.js +31 -51
- package/dist/BaseRadio/RadioGroup.cjs +1 -1
- package/dist/BaseRadio/RadioGroup.js +24 -44
- package/dist/Box/BoxProps.cjs +1 -1
- package/dist/Box/BoxProps.js +10 -19
- package/dist/Breadcrumbs/Breadcrumbs.cjs +4 -4
- package/dist/Breadcrumbs/Breadcrumbs.js +29 -50
- package/dist/Button/Button.cjs +14 -14
- package/dist/Button/Button.js +53 -73
- package/dist/Card/Card.cjs +1 -1
- package/dist/Card/Card.js +17 -37
- package/dist/Card/CardAsset.cjs +4 -4
- package/dist/Card/CardAsset.js +19 -42
- package/dist/Card/CardBadge.cjs +3 -3
- package/dist/Card/CardBadge.js +9 -18
- package/dist/Card/CardBody.cjs +1 -1
- package/dist/Card/CardBody.js +8 -19
- package/dist/Card/CardCheckbox.cjs +1 -1
- package/dist/Card/CardCheckbox.js +12 -22
- package/dist/Card/CardContent.cjs +2 -2
- package/dist/Card/CardContent.js +11 -32
- package/dist/Card/CardHeader.cjs +2 -2
- package/dist/Card/CardHeader.js +9 -19
- package/dist/Card/CardTimer.cjs +2 -2
- package/dist/Card/CardTimer.js +20 -42
- package/dist/Card/CardTitle.cjs +1 -1
- package/dist/Card/CardTitle.js +16 -27
- package/dist/CarouselInput/Carousel.cjs +6 -6
- package/dist/CarouselInput/Carousel.js +77 -107
- package/dist/CarouselInput/CarouselActions.cjs +1 -1
- package/dist/CarouselInput/CarouselActions.js +7 -17
- package/dist/CarouselInput/CarouselImage.cjs +3 -3
- package/dist/CarouselInput/CarouselImage.js +26 -38
- package/dist/CarouselInput/CarouselInput.cjs +1 -1
- package/dist/CarouselInput/CarouselInput.js +49 -83
- package/dist/CarouselInput/CarouselSlide.cjs +2 -2
- package/dist/CarouselInput/CarouselSlide.js +20 -42
- package/dist/Checkbox/Checkbox.cjs +2 -2
- package/dist/Checkbox/Checkbox.js +44 -63
- package/dist/Combobox/Combobox.cjs +1 -1
- package/dist/Combobox/Combobox.js +196 -246
- package/dist/Combobox/ComboboxOption.cjs +1 -1
- package/dist/Combobox/ComboboxOption.js +25 -47
- package/dist/Combobox/utils.cjs +1 -1
- package/dist/Combobox/utils.js +21 -21
- package/dist/DatePicker/DatePicker.cjs +1 -1
- package/dist/DatePicker/DatePicker.js +87 -109
- package/dist/DatePicker/DatePickerCalendar.cjs +1 -1
- package/dist/DatePicker/DatePickerCalendar.js +1 -1
- package/dist/DatePicker/DatePickerTd.cjs +4 -4
- package/dist/DatePicker/DatePickerTd.js +23 -42
- package/dist/DatePicker/DatePickerTh.cjs +3 -3
- package/dist/DatePicker/DatePickerTh.js +23 -44
- package/dist/DatePicker/utils/getYears.cjs +1 -1
- package/dist/DatePicker/utils/getYears.js +6 -7
- package/dist/DateTimePicker/DateTimePicker.cjs +1 -1
- package/dist/DateTimePicker/DateTimePicker.js +92 -126
- package/dist/DateTimePicker/DateTimePickerProps.cjs +1 -1
- package/dist/DateTimePicker/DateTimePickerProps.js +10 -19
- package/dist/Dialog/Dialog.cjs +5 -5
- package/dist/Dialog/Dialog.js +39 -58
- package/dist/Divider/Divider.cjs +4 -2
- package/dist/Divider/Divider.js +17 -38
- package/dist/Field/Field.cjs +1 -1
- package/dist/Field/Field.js +20 -39
- package/dist/Field/FieldAction.cjs +2 -2
- package/dist/Field/FieldAction.js +13 -35
- package/dist/Field/FieldInput.cjs +6 -6
- package/dist/Field/FieldInput.js +47 -67
- package/dist/Field/FieldLabel.cjs +3 -3
- package/dist/Field/FieldLabel.js +26 -46
- package/dist/Flex/FlexProps.cjs +1 -1
- package/dist/Flex/FlexProps.js +10 -19
- package/dist/FocusTrap/FocusTrap.cjs +1 -1
- package/dist/FocusTrap/FocusTrap.js +32 -52
- package/dist/Grid/Grid.cjs +3 -3
- package/dist/Grid/Grid.js +20 -42
- package/dist/Grid/GridItem.cjs +2 -2
- package/dist/Grid/GridItem.js +22 -41
- package/dist/Icon/Icon.cjs +2 -2
- package/dist/Icon/Icon.js +17 -27
- package/dist/IconButton/IconButton.cjs +4 -4
- package/dist/IconButton/IconButton.js +44 -64
- package/dist/KeyboardNavigable/KeyboardNavigable.cjs +1 -1
- package/dist/KeyboardNavigable/KeyboardNavigable.js +38 -58
- package/dist/Layout/HeaderLayout.cjs +2 -2
- package/dist/Layout/HeaderLayout.js +78 -96
- package/dist/Link/Link.cjs +6 -6
- package/dist/Link/Link.js +34 -54
- package/dist/LinkButton/LinkButton.cjs +10 -10
- package/dist/LinkButton/LinkButton.js +47 -69
- package/dist/Loader/Loader.cjs +4 -4
- package/dist/Loader/Loader.js +25 -47
- package/dist/Main/Main.cjs +2 -2
- package/dist/Main/Main.js +15 -35
- package/dist/MainNav/MainNav.cjs +2 -2
- package/dist/MainNav/MainNav.js +19 -40
- package/dist/MainNav/NavCondense.cjs +3 -3
- package/dist/MainNav/NavCondense.js +20 -40
- package/dist/MainNav/NavFooter.cjs +3 -0
- package/dist/MainNav/NavFooter.js +14 -0
- package/dist/MainNav/NavLink.cjs +13 -13
- package/dist/MainNav/NavLink.js +57 -76
- package/dist/MainNav/NavSection.cjs +1 -1
- package/dist/MainNav/NavSection.js +46 -67
- package/dist/MainNav/NavSections.cjs +4 -1
- package/dist/MainNav/NavSections.js +23 -40
- package/dist/MainNav/NavUser.cjs +2 -6
- package/dist/MainNav/NavUser.js +31 -55
- package/dist/MainNav/index.cjs +1 -1
- package/dist/MainNav/index.js +14 -12
- package/dist/ModalLayout/ModalBody.cjs +2 -2
- package/dist/ModalLayout/ModalBody.js +9 -19
- package/dist/ModalLayout/ModalLayout.cjs +3 -3
- package/dist/ModalLayout/ModalLayout.js +30 -52
- package/dist/NumberInput/NumberInput.cjs +6 -6
- package/dist/NumberInput/NumberInput.js +123 -157
- package/dist/Pagination/components.cjs +7 -7
- package/dist/Pagination/components.js +65 -88
- package/dist/Popover/Popover.cjs +3 -3
- package/dist/Popover/Popover.js +65 -91
- package/dist/Portal/Portal.cjs +1 -1
- package/dist/Portal/Portal.js +11 -12
- package/dist/ProgressBar/ProgressBar.cjs +2 -2
- package/dist/ProgressBar/ProgressBar.js +27 -49
- package/dist/Radio/Radio.cjs +2 -2
- package/dist/Radio/Radio.js +19 -40
- package/dist/RawTable/RawCell.cjs +1 -1
- package/dist/RawTable/RawCell.js +69 -89
- package/dist/RawTable/RawTable.cjs +1 -1
- package/dist/RawTable/RawTable.js +46 -66
- package/dist/RawTable/RawTbody.cjs +1 -1
- package/dist/RawTable/RawTbody.js +11 -30
- package/dist/RawTable/RawThead.cjs +1 -1
- package/dist/RawTable/RawThead.js +10 -29
- package/dist/RawTable/RawTr.cjs +1 -1
- package/dist/RawTable/RawTr.js +14 -34
- package/dist/Searchbar/SearchForm.cjs +1 -1
- package/dist/Searchbar/SearchForm.js +5 -16
- package/dist/Searchbar/Searchbar.cjs +7 -7
- package/dist/Searchbar/Searchbar.js +45 -65
- package/dist/Select/MultiSelectNested.cjs +1 -1
- package/dist/Select/MultiSelectNested.js +23 -45
- package/dist/Select/OptGroup.cjs +1 -1
- package/dist/Select/OptGroup.js +15 -35
- package/dist/Select/Option.cjs +7 -7
- package/dist/Select/Option.js +37 -57
- package/dist/Select/Select.cjs +2 -2
- package/dist/Select/Select.js +145 -186
- package/dist/Select/SelectButton.cjs +2 -2
- package/dist/Select/SelectButton.js +33 -53
- package/dist/SimpleMenu/SimpleMenu.cjs +9 -9
- package/dist/SimpleMenu/SimpleMenu.js +137 -163
- package/dist/Stack/Stack.cjs +3 -3
- package/dist/Stack/Stack.js +29 -50
- package/dist/Status/Status.cjs +4 -4
- package/dist/Status/Status.js +30 -50
- package/dist/SubNav/SubNav.cjs +3 -3
- package/dist/SubNav/SubNav.js +15 -37
- package/dist/SubNav/SubNavHeader.cjs +2 -2
- package/dist/SubNav/SubNavHeader.js +38 -39
- package/dist/SubNav/SubNavLink.cjs +6 -6
- package/dist/SubNav/SubNavLink.js +39 -61
- package/dist/SubNav/SubNavSections.cjs +1 -1
- package/dist/SubNav/SubNavSections.js +17 -39
- package/dist/Switch/Switch.cjs +5 -5
- package/dist/Switch/Switch.js +35 -57
- package/dist/Table/Cell.cjs +3 -3
- package/dist/Table/Cell.js +20 -40
- package/dist/Table/TFooter.cjs +3 -3
- package/dist/Table/TFooter.js +28 -50
- package/dist/Table/Table.cjs +5 -5
- package/dist/Table/Table.js +35 -55
- package/dist/Table/Tbody.cjs +2 -2
- package/dist/Table/Tbody.js +8 -17
- package/dist/Table/Thead.cjs +2 -2
- package/dist/Table/Thead.js +8 -17
- package/dist/Table/Tr.cjs +2 -2
- package/dist/Table/Tr.js +8 -17
- package/dist/Tabs/TabGroup.cjs +1 -1
- package/dist/Tabs/TabGroup.js +26 -45
- package/dist/Tabs/TabPanels.cjs +1 -1
- package/dist/Tabs/TabPanels.js +24 -43
- package/dist/Tabs/Tabs.cjs +2 -2
- package/dist/Tabs/Tabs.js +94 -112
- package/dist/Tag/Tag.cjs +4 -4
- package/dist/Tag/Tag.js +27 -50
- package/dist/TextButton/TextButton.cjs +6 -6
- package/dist/TextButton/TextButton.js +39 -59
- package/dist/TextInput/TextInput.cjs +1 -1
- package/dist/TextInput/TextInput.js +49 -69
- package/dist/Textarea/Textarea.cjs +3 -3
- package/dist/Textarea/Textarea.js +43 -63
- package/dist/Textarea/TextareaInput.cjs +4 -4
- package/dist/Textarea/TextareaInput.js +30 -50
- package/dist/TimePicker/TimePicker.cjs +3 -3
- package/dist/TimePicker/TimePicker.js +62 -95
- package/dist/ToggleCheckbox/ToggleCheckbox.cjs +8 -8
- package/dist/ToggleCheckbox/ToggleCheckbox.js +56 -78
- package/dist/ToggleInput/ToggleInput.cjs +3 -3
- package/dist/ToggleInput/ToggleInput.js +65 -97
- package/dist/Tooltip/Tooltip.cjs +2 -2
- package/dist/Tooltip/Tooltip.js +38 -57
- package/dist/Typography/TypographyProps.cjs +1 -1
- package/dist/Typography/TypographyProps.js +13 -22
- package/dist/helpers/getDefaultLocale.cjs +1 -1
- package/dist/helpers/getDefaultLocale.js +1 -1
- package/dist/helpers/handleResponsiveValues.cjs +5 -5
- package/dist/helpers/handleResponsiveValues.js +14 -14
- package/dist/index.cjs +1 -1
- package/dist/index.js +150 -148
- package/dist/themes/darkTheme/index.cjs +1 -1
- package/dist/themes/darkTheme/index.js +8 -18
- package/dist/themes/extendTheme.cjs +4 -4
- package/dist/themes/extendTheme.js +18 -29
- package/dist/themes/lightTheme/index.cjs +1 -1
- package/dist/themes/lightTheme/index.js +8 -18
- package/dist/v2/Breadcrumbs/Breadcrumbs.cjs +2 -2
- package/dist/v2/Breadcrumbs/Breadcrumbs.js +23 -43
- package/dist/v2/Breadcrumbs/Crumb.cjs +1 -1
- package/dist/v2/Breadcrumbs/Crumb.js +22 -44
- package/dist/v2/Breadcrumbs/CrumbLink.cjs +2 -2
- package/dist/v2/Breadcrumbs/CrumbLink.js +14 -35
- package/dist/v2/Breadcrumbs/CrumbSimpleMenu.cjs +2 -2
- package/dist/v2/Breadcrumbs/CrumbSimpleMenu.js +19 -41
- package/dist/v2/Link/Link.cjs +5 -5
- package/dist/v2/Link/Link.js +42 -64
- package/dist/v2/LinkButton/LinkButton.cjs +10 -10
- package/dist/v2/LinkButton/LinkButton.js +51 -75
- package/dist/v2/MainNav/MainNav.cjs +2 -2
- package/dist/v2/MainNav/MainNav.js +19 -40
- package/dist/v2/MainNav/NavBrand.cjs +3 -3
- package/dist/v2/MainNav/NavBrand.js +57 -78
- package/dist/v2/MainNav/NavCondense.cjs +3 -3
- package/dist/v2/MainNav/NavCondense.js +20 -40
- package/dist/v2/MainNav/NavFooter.cjs +3 -0
- package/dist/v2/MainNav/NavFooter.js +14 -0
- package/dist/v2/MainNav/NavLink.cjs +13 -13
- package/dist/v2/MainNav/NavLink.js +60 -81
- package/dist/v2/MainNav/NavSection.cjs +1 -1
- package/dist/v2/MainNav/NavSection.js +46 -67
- package/dist/v2/MainNav/NavSections.cjs +4 -1
- package/dist/v2/MainNav/NavSections.js +23 -40
- package/dist/v2/MainNav/NavUser.cjs +2 -6
- package/dist/v2/MainNav/NavUser.js +31 -55
- package/dist/v2/MainNav/index.cjs +1 -1
- package/dist/v2/MainNav/index.js +14 -12
- package/dist/v2/Pagination/components.cjs +7 -7
- package/dist/v2/Pagination/components.js +65 -89
- package/dist/v2/SimpleMenu/SimpleMenu.cjs +9 -9
- package/dist/v2/SimpleMenu/SimpleMenu.js +131 -156
- package/dist/v2/SubNav/SubNav.cjs +3 -3
- package/dist/v2/SubNav/SubNav.js +15 -37
- package/dist/v2/SubNav/SubNavHeader.cjs +2 -2
- package/dist/v2/SubNav/SubNavHeader.js +38 -39
- package/dist/v2/SubNav/SubNavLink.cjs +6 -6
- package/dist/v2/SubNav/SubNavLink.js +42 -64
- package/dist/v2/SubNav/SubNavSections.cjs +1 -1
- package/dist/v2/SubNav/SubNavSections.js +17 -39
- package/dist/v2/index.cjs +1 -1
- package/dist/v2/index.js +37 -35
- package/package.json +4 -4
package/dist/Tabs/TabPanels.js
CHANGED
|
@@ -1,51 +1,32 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
for (var a of n(e))
|
|
18
|
-
t.indexOf(a) < 0 && m.call(e, a) && (r[a] = e[a]);
|
|
19
|
-
return r;
|
|
20
|
-
};
|
|
21
|
-
import T, { Children as I, cloneElement as $ } from "react";
|
|
22
|
-
import f from "prop-types";
|
|
23
|
-
import { useTabs as h } from "./TabsContext.js";
|
|
24
|
-
const v = (r) => {
|
|
25
|
-
var a = r, { children: e } = a, t = p(a, ["children"]);
|
|
26
|
-
const { id: o, selectedTabIndex: d } = h(), y = I.toArray(e).map((s, l) => $(s, { id: `${o}-${l}` })).filter((s, l) => l === d);
|
|
27
|
-
return /* @__PURE__ */ T.createElement("div", i({}, t), y);
|
|
28
|
-
};
|
|
29
|
-
v.propTypes = {
|
|
30
|
-
children: f.node.isRequired
|
|
31
|
-
};
|
|
32
|
-
const u = (r) => {
|
|
33
|
-
var a = r, { id: e } = a, t = p(a, ["id"]);
|
|
34
|
-
const o = `${e}-tab`, d = `${e}-tabpanel`;
|
|
35
|
-
return /* @__PURE__ */ T.createElement("div", i({
|
|
36
|
-
id: d,
|
|
1
|
+
import d, { Children as s, cloneElement as c } from "react";
|
|
2
|
+
import l from "prop-types";
|
|
3
|
+
import { useTabs as b } from "./TabsContext.js";
|
|
4
|
+
const m = ({ children: e, ...t }) => {
|
|
5
|
+
const { id: r, selectedTabIndex: a } = b(), p = s.toArray(e).map((o, n) => c(o, { id: `${r}-${n}` })).filter((o, n) => n === a);
|
|
6
|
+
return /* @__PURE__ */ d.createElement("div", {
|
|
7
|
+
...t
|
|
8
|
+
}, p);
|
|
9
|
+
};
|
|
10
|
+
m.propTypes = {
|
|
11
|
+
children: l.node.isRequired
|
|
12
|
+
};
|
|
13
|
+
const i = ({ id: e, ...t }) => {
|
|
14
|
+
const r = `${e}-tab`, a = `${e}-tabpanel`;
|
|
15
|
+
return /* @__PURE__ */ d.createElement("div", {
|
|
16
|
+
id: a,
|
|
37
17
|
role: "tabpanel",
|
|
38
18
|
tabIndex: 0,
|
|
39
|
-
"aria-labelledby":
|
|
40
|
-
|
|
19
|
+
"aria-labelledby": r,
|
|
20
|
+
...t
|
|
21
|
+
});
|
|
41
22
|
};
|
|
42
|
-
|
|
23
|
+
i.defaultProps = {
|
|
43
24
|
id: void 0
|
|
44
25
|
};
|
|
45
|
-
|
|
46
|
-
id:
|
|
26
|
+
i.propTypes = {
|
|
27
|
+
id: l.string
|
|
47
28
|
};
|
|
48
29
|
export {
|
|
49
|
-
|
|
50
|
-
|
|
30
|
+
i as TabPanel,
|
|
31
|
+
m as TabPanels
|
|
51
32
|
};
|
package/dist/Tabs/Tabs.cjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
"use strict";
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const v=require("react"),K=require("prop-types"),q=require("styled-components"),_=require("./TabsContext.cjs"),D=require("../Typography/Typography.cjs"),x=require("../helpers/keyboardKeys.cjs"),w=require("./useTabsFocus.cjs"),m=require("./components.cjs"),C=n=>n&&typeof n=="object"&&"default"in n?n:{default:n},d=C(v),l=C(K),R=C(q),j=R.default.button`
|
|
2
2
|
&[aria-disabled='true'] {
|
|
3
3
|
cursor: not-allowed;
|
|
4
4
|
}
|
|
5
|
-
`,
|
|
5
|
+
`,k=({children:n,...b})=>{const{id:h,selectedTabIndex:u,selectTabIndex:o,label:p,variant:f,onTabChange:g}=_.useTabs(),y=w.useTabsFocus(u,g),a=v.Children.toArray(n).map((t,i)=>v.cloneElement(t,{id:`${h}-${i}`,index:i,selectedTabIndex:u,onTabClick:()=>o(i),variant:f})),T=t=>{if(!a.every(r=>r.props.disabled))switch(t.key){case x.KeyboardKeys.RIGHT:{const r=u+1,e=s=>a[s].props.disabled?s===a.length-1?e(0):e(s+1):s,c=e(r>=a.length?0:r);o(c);break}case x.KeyboardKeys.LEFT:{const r=u-1,e=s=>a[s].props.disabled?e(s===0?a.length-1:s-1):s,c=e(r<0?a.length-1:r);o(c);break}case x.KeyboardKeys.HOME:{const r=a.findIndex(e=>!e.props.disabled);o(r);break}case x.KeyboardKeys.END:{const e=a.map((c,s)=>({isDisabled:c.props.disabled,index:s})).reverse().find(({isDisabled:c})=>!c);e&&o(e.index);break}}};return f==="simple"?d.default.createElement("div",{ref:y,role:"tablist","aria-label":p,onKeyDown:T,...b},a):d.default.createElement(m.DefaultTabsRow,{ref:y,role:"tablist",alignItems:"flex-end","aria-label":p,onKeyDown:T,...b},a)};k.propTypes={children:l.default.node.isRequired};const I=({disabled:n,id:b,children:h,variant:u,hasError:o,index:p,selectedTabIndex:f,onTabClick:g,...y})=>{const a=`${b}-tab`,T=`${b}-tabpanel`,t=p===f,i=()=>{n||g()};if(u==="simple"){let e;return o?e="danger600":t?e="primary600":e="neutral600",d.default.createElement(j,{id:a,role:"tab","aria-controls":t?T:void 0,tabIndex:t?0:-1,"aria-selected":t,type:"button",onClick:i,"aria-disabled":n,...y},d.default.createElement(m.SimpleTabBox,{padding:4,selected:t,hasError:o},d.default.createElement(D.Typography,{variant:"sigma",textColor:e},h)))}o&&console.warn('The "hasError" prop is only available for the "simple" variant.');const r=f-1===p;return d.default.createElement(m.DefaultTabButton,{id:a,role:"tab",type:"button","aria-controls":t?T:void 0,tabIndex:t?0:-1,"aria-selected":t,onClick:i,"aria-disabled":n,showRightBorder:r,...y},d.default.createElement(m.DefaultTabBox,{padding:t?4:3,background:t?"neutral0":"neutral100",selected:t},d.default.createElement(D.Typography,{fontWeight:"bold",textColor:t?"primary700":"neutral600"},h)))};I.defaultProps={disabled:!1,hasError:!1,id:void 0,index:void 0,onTabClick:void 0,selectedTabIndex:void 0,variant:void 0};I.propTypes={children:l.default.node.isRequired,disabled:l.default.bool,hasError:l.default.bool,id:l.default.string,index:l.default.number,onTabClick:l.default.func,selectedTabIndex:l.default.number,variant:l.default.oneOf(["simple"])};exports.Tab=I;exports.Tabs=k;
|
package/dist/Tabs/Tabs.js
CHANGED
|
@@ -1,133 +1,115 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
return e;
|
|
11
|
-
};
|
|
12
|
-
var C = (e, t) => {
|
|
13
|
-
var a = {};
|
|
14
|
-
for (var o in e)
|
|
15
|
-
k.call(e, o) && t.indexOf(o) < 0 && (a[o] = e[o]);
|
|
16
|
-
if (e != null && v)
|
|
17
|
-
for (var o of v(e))
|
|
18
|
-
t.indexOf(o) < 0 && w.call(e, o) && (a[o] = e[o]);
|
|
19
|
-
return a;
|
|
20
|
-
};
|
|
21
|
-
import c, { Children as A, cloneElement as N } from "react";
|
|
22
|
-
import d from "prop-types";
|
|
23
|
-
import O from "styled-components";
|
|
24
|
-
import { useTabs as $ } from "./TabsContext.js";
|
|
25
|
-
import { Typography as R } from "../Typography/Typography.js";
|
|
26
|
-
import { KeyboardKeys as g } from "../helpers/keyboardKeys.js";
|
|
27
|
-
import { useTabsFocus as W } from "./useTabsFocus.js";
|
|
28
|
-
import { DefaultTabsRow as q, SimpleTabBox as F, DefaultTabButton as H, DefaultTabBox as _ } from "./components.js";
|
|
29
|
-
const G = O.button`
|
|
1
|
+
import l, { Children as C, cloneElement as D } from "react";
|
|
2
|
+
import i from "prop-types";
|
|
3
|
+
import E from "styled-components";
|
|
4
|
+
import { useTabs as k } from "./TabsContext.js";
|
|
5
|
+
import { Typography as I } from "../Typography/Typography.js";
|
|
6
|
+
import { KeyboardKeys as T } from "../helpers/keyboardKeys.js";
|
|
7
|
+
import { useTabsFocus as w } from "./useTabsFocus.js";
|
|
8
|
+
import { DefaultTabsRow as R, SimpleTabBox as B, DefaultTabButton as K, DefaultTabBox as P } from "./components.js";
|
|
9
|
+
const A = E.button`
|
|
30
10
|
&[aria-disabled='true'] {
|
|
31
11
|
cursor: not-allowed;
|
|
32
12
|
}
|
|
33
|
-
`,
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
variant: x
|
|
13
|
+
`, N = ({ children: b, ...p }) => {
|
|
14
|
+
const { id: h, selectedTabIndex: c, selectTabIndex: o, label: m, variant: u, onTabChange: y } = k(), f = w(c, y), a = C.toArray(b).map(
|
|
15
|
+
(t, s) => D(t, {
|
|
16
|
+
id: `${h}-${s}`,
|
|
17
|
+
index: s,
|
|
18
|
+
selectedTabIndex: c,
|
|
19
|
+
onTabClick: () => o(s),
|
|
20
|
+
variant: u
|
|
42
21
|
})
|
|
43
|
-
),
|
|
44
|
-
if (!
|
|
45
|
-
switch (
|
|
46
|
-
case
|
|
47
|
-
const
|
|
48
|
-
|
|
22
|
+
), x = (t) => {
|
|
23
|
+
if (!a.every((n) => n.props.disabled))
|
|
24
|
+
switch (t.key) {
|
|
25
|
+
case T.RIGHT: {
|
|
26
|
+
const n = c + 1, e = (r) => a[r].props.disabled ? r === a.length - 1 ? e(0) : e(r + 1) : r, d = e(n >= a.length ? 0 : n);
|
|
27
|
+
o(d);
|
|
49
28
|
break;
|
|
50
29
|
}
|
|
51
|
-
case
|
|
52
|
-
const
|
|
53
|
-
|
|
30
|
+
case T.LEFT: {
|
|
31
|
+
const n = c - 1, e = (r) => a[r].props.disabled ? e(r === 0 ? a.length - 1 : r - 1) : r, d = e(n < 0 ? a.length - 1 : n);
|
|
32
|
+
o(d);
|
|
54
33
|
break;
|
|
55
34
|
}
|
|
56
|
-
case
|
|
57
|
-
const
|
|
58
|
-
|
|
35
|
+
case T.HOME: {
|
|
36
|
+
const n = a.findIndex((e) => !e.props.disabled);
|
|
37
|
+
o(n);
|
|
59
38
|
break;
|
|
60
39
|
}
|
|
61
|
-
case
|
|
62
|
-
const
|
|
63
|
-
|
|
40
|
+
case T.END: {
|
|
41
|
+
const e = a.map((d, r) => ({ isDisabled: d.props.disabled, index: r })).reverse().find(({ isDisabled: d }) => !d);
|
|
42
|
+
e && o(e.index);
|
|
64
43
|
break;
|
|
65
44
|
}
|
|
66
45
|
}
|
|
67
46
|
};
|
|
68
|
-
return
|
|
69
|
-
ref:
|
|
47
|
+
return u === "simple" ? /* @__PURE__ */ l.createElement("div", {
|
|
48
|
+
ref: f,
|
|
70
49
|
role: "tablist",
|
|
71
|
-
"aria-label":
|
|
72
|
-
onKeyDown:
|
|
73
|
-
|
|
74
|
-
|
|
50
|
+
"aria-label": m,
|
|
51
|
+
onKeyDown: x,
|
|
52
|
+
...p
|
|
53
|
+
}, a) : /* @__PURE__ */ l.createElement(R, {
|
|
54
|
+
ref: f,
|
|
75
55
|
role: "tablist",
|
|
76
56
|
alignItems: "flex-end",
|
|
77
|
-
"aria-label":
|
|
78
|
-
onKeyDown:
|
|
79
|
-
|
|
57
|
+
"aria-label": m,
|
|
58
|
+
onKeyDown: x,
|
|
59
|
+
...p
|
|
60
|
+
}, a);
|
|
80
61
|
};
|
|
81
|
-
|
|
82
|
-
children:
|
|
62
|
+
N.propTypes = {
|
|
63
|
+
children: i.node.isRequired
|
|
83
64
|
};
|
|
84
|
-
const
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
e || I();
|
|
65
|
+
const v = ({ disabled: b, id: p, children: h, variant: c, hasError: o, index: m, selectedTabIndex: u, onTabClick: y, ...f }) => {
|
|
66
|
+
const a = `${p}-tab`, x = `${p}-tabpanel`, t = m === u, s = () => {
|
|
67
|
+
b || y();
|
|
88
68
|
};
|
|
89
|
-
if (
|
|
90
|
-
let
|
|
91
|
-
return
|
|
92
|
-
id:
|
|
69
|
+
if (c === "simple") {
|
|
70
|
+
let e;
|
|
71
|
+
return o ? e = "danger600" : t ? e = "primary600" : e = "neutral600", /* @__PURE__ */ l.createElement(A, {
|
|
72
|
+
id: a,
|
|
93
73
|
role: "tab",
|
|
94
|
-
"aria-controls":
|
|
95
|
-
tabIndex:
|
|
96
|
-
"aria-selected":
|
|
74
|
+
"aria-controls": t ? x : void 0,
|
|
75
|
+
tabIndex: t ? 0 : -1,
|
|
76
|
+
"aria-selected": t,
|
|
97
77
|
type: "button",
|
|
98
|
-
onClick:
|
|
99
|
-
"aria-disabled":
|
|
100
|
-
|
|
78
|
+
onClick: s,
|
|
79
|
+
"aria-disabled": b,
|
|
80
|
+
...f
|
|
81
|
+
}, /* @__PURE__ */ l.createElement(B, {
|
|
101
82
|
padding: 4,
|
|
102
|
-
selected:
|
|
103
|
-
hasError:
|
|
104
|
-
}, /* @__PURE__ */
|
|
83
|
+
selected: t,
|
|
84
|
+
hasError: o
|
|
85
|
+
}, /* @__PURE__ */ l.createElement(I, {
|
|
105
86
|
variant: "sigma",
|
|
106
|
-
textColor:
|
|
107
|
-
},
|
|
87
|
+
textColor: e
|
|
88
|
+
}, h)));
|
|
108
89
|
}
|
|
109
|
-
|
|
110
|
-
const
|
|
111
|
-
return /* @__PURE__ */
|
|
112
|
-
id:
|
|
90
|
+
o && console.warn('The "hasError" prop is only available for the "simple" variant.');
|
|
91
|
+
const n = u - 1 === m;
|
|
92
|
+
return /* @__PURE__ */ l.createElement(K, {
|
|
93
|
+
id: a,
|
|
113
94
|
role: "tab",
|
|
114
95
|
type: "button",
|
|
115
|
-
"aria-controls":
|
|
116
|
-
tabIndex:
|
|
117
|
-
"aria-selected":
|
|
118
|
-
onClick:
|
|
119
|
-
"aria-disabled":
|
|
120
|
-
showRightBorder:
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
96
|
+
"aria-controls": t ? x : void 0,
|
|
97
|
+
tabIndex: t ? 0 : -1,
|
|
98
|
+
"aria-selected": t,
|
|
99
|
+
onClick: s,
|
|
100
|
+
"aria-disabled": b,
|
|
101
|
+
showRightBorder: n,
|
|
102
|
+
...f
|
|
103
|
+
}, /* @__PURE__ */ l.createElement(P, {
|
|
104
|
+
padding: t ? 4 : 3,
|
|
105
|
+
background: t ? "neutral0" : "neutral100",
|
|
106
|
+
selected: t
|
|
107
|
+
}, /* @__PURE__ */ l.createElement(I, {
|
|
126
108
|
fontWeight: "bold",
|
|
127
|
-
textColor:
|
|
128
|
-
},
|
|
109
|
+
textColor: t ? "primary700" : "neutral600"
|
|
110
|
+
}, h)));
|
|
129
111
|
};
|
|
130
|
-
|
|
112
|
+
v.defaultProps = {
|
|
131
113
|
disabled: !1,
|
|
132
114
|
hasError: !1,
|
|
133
115
|
id: void 0,
|
|
@@ -136,17 +118,17 @@ B.defaultProps = {
|
|
|
136
118
|
selectedTabIndex: void 0,
|
|
137
119
|
variant: void 0
|
|
138
120
|
};
|
|
139
|
-
|
|
140
|
-
children:
|
|
141
|
-
disabled:
|
|
142
|
-
hasError:
|
|
143
|
-
id:
|
|
144
|
-
index:
|
|
145
|
-
onTabClick:
|
|
146
|
-
selectedTabIndex:
|
|
147
|
-
variant:
|
|
121
|
+
v.propTypes = {
|
|
122
|
+
children: i.node.isRequired,
|
|
123
|
+
disabled: i.bool,
|
|
124
|
+
hasError: i.bool,
|
|
125
|
+
id: i.string,
|
|
126
|
+
index: i.number,
|
|
127
|
+
onTabClick: i.func,
|
|
128
|
+
selectedTabIndex: i.number,
|
|
129
|
+
variant: i.oneOf(["simple"])
|
|
148
130
|
};
|
|
149
131
|
export {
|
|
150
|
-
|
|
151
|
-
|
|
132
|
+
v as Tab,
|
|
133
|
+
N as Tabs
|
|
152
134
|
};
|
package/dist/Tag/Tag.cjs
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
"use strict";
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const g=require("react"),y=require("prop-types"),h=require("styled-components"),m=require("../Typography/Typography.cjs"),s=require("../Box/Box.cjs"),i=require("../Flex/Flex.cjs"),n=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},a=n(g),o=n(y),d=n(h),T=d.default(s.Box)`
|
|
2
2
|
svg {
|
|
3
3
|
height: ${8/16}rem;
|
|
4
4
|
width: ${8/16}rem;
|
|
5
5
|
}
|
|
6
6
|
|
|
7
7
|
svg path {
|
|
8
|
-
fill: ${
|
|
8
|
+
fill: ${({theme:e,...r})=>r["aria-disabled"]?e.colors.neutral600:e.colors.primary600};
|
|
9
9
|
}
|
|
10
|
-
`,
|
|
10
|
+
`,x=d.default(m.Typography)`
|
|
11
11
|
border-right: 1px solid ${({theme:e,disabled:r})=>r?e.colors.neutral300:e.colors.primary200};
|
|
12
12
|
color: inherit;
|
|
13
13
|
padding-right: ${({theme:e})=>e.spaces[2]};
|
|
14
|
-
`,
|
|
14
|
+
`,l=({children:e,icon:r,disabled:t,onClick:u,...c})=>{const p=f=>{t||u(f)};return a.default.createElement(T,{as:"button",background:t?"neutral200":"primary100",color:t?"neutral700":"primary600",paddingLeft:3,paddingRight:3,onClick:p,"aria-disabled":t,borderWidth:"1px",borderStyle:"solid",borderColor:t?"neutral300":"primary200",hasRadius:!0,height:`${32/16}rem`,...c},a.default.createElement(i.Flex,null,a.default.createElement(x,{disabled:t,variant:"pi",fontWeight:"bold",as:"span"},e),a.default.createElement(s.Box,{paddingLeft:2},a.default.createElement(i.Flex,null,r))))};l.displayName="Tag";l.defaultProps={disabled:!1,onClick:void 0};l.propTypes={children:o.default.node.isRequired,disabled:o.default.bool,icon:o.default.element.isRequired,onClick:o.default.func};exports.Tag=l;
|
package/dist/Tag/Tag.js
CHANGED
|
@@ -1,83 +1,60 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
for (var e of i(o))
|
|
9
|
-
m.call(o, e) && s(r, e, o[e]);
|
|
10
|
-
return r;
|
|
11
|
-
};
|
|
12
|
-
var n = (r, o) => {
|
|
13
|
-
var e = {};
|
|
14
|
-
for (var t in r)
|
|
15
|
-
c.call(r, t) && o.indexOf(t) < 0 && (e[t] = r[t]);
|
|
16
|
-
if (r != null && i)
|
|
17
|
-
for (var t of i(r))
|
|
18
|
-
o.indexOf(t) < 0 && m.call(r, t) && (e[t] = r[t]);
|
|
19
|
-
return e;
|
|
20
|
-
};
|
|
21
|
-
import a from "react";
|
|
22
|
-
import l from "prop-types";
|
|
23
|
-
import f from "styled-components";
|
|
24
|
-
import { Typography as $ } from "../Typography/Typography.js";
|
|
25
|
-
import { Box as h } from "../Box/Box.js";
|
|
26
|
-
import { Flex as u } from "../Flex/Flex.js";
|
|
27
|
-
const k = f(h)`
|
|
1
|
+
import t from "react";
|
|
2
|
+
import a from "prop-types";
|
|
3
|
+
import n from "styled-components";
|
|
4
|
+
import { Typography as g } from "../Typography/Typography.js";
|
|
5
|
+
import { Box as p } from "../Box/Box.js";
|
|
6
|
+
import { Flex as l } from "../Flex/Flex.js";
|
|
7
|
+
const u = n(p)`
|
|
28
8
|
svg {
|
|
29
9
|
height: ${8 / 16}rem;
|
|
30
10
|
width: ${8 / 16}rem;
|
|
31
11
|
}
|
|
32
12
|
|
|
33
13
|
svg path {
|
|
34
|
-
fill: ${(
|
|
35
|
-
var t = e, { theme: r } = t, o = n(t, ["theme"]);
|
|
36
|
-
return o["aria-disabled"] ? r.colors.neutral600 : r.colors.primary600;
|
|
37
|
-
}};
|
|
14
|
+
fill: ${({ theme: r, ...o }) => o["aria-disabled"] ? r.colors.neutral600 : r.colors.primary600};
|
|
38
15
|
}
|
|
39
|
-
`,
|
|
16
|
+
`, f = n(g)`
|
|
40
17
|
border-right: 1px solid ${({ theme: r, disabled: o }) => o ? r.colors.neutral300 : r.colors.primary200};
|
|
41
18
|
color: inherit;
|
|
42
19
|
padding-right: ${({ theme: r }) => r.spaces[2]};
|
|
43
|
-
`,
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
e || t(b);
|
|
20
|
+
`, i = ({ children: r, icon: o, disabled: e, onClick: d, ...s }) => {
|
|
21
|
+
const c = (m) => {
|
|
22
|
+
e || d(m);
|
|
47
23
|
};
|
|
48
|
-
return /* @__PURE__ */
|
|
24
|
+
return /* @__PURE__ */ t.createElement(u, {
|
|
49
25
|
as: "button",
|
|
50
26
|
background: e ? "neutral200" : "primary100",
|
|
51
27
|
color: e ? "neutral700" : "primary600",
|
|
52
28
|
paddingLeft: 3,
|
|
53
29
|
paddingRight: 3,
|
|
54
|
-
onClick:
|
|
30
|
+
onClick: c,
|
|
55
31
|
"aria-disabled": e,
|
|
56
32
|
borderWidth: "1px",
|
|
57
33
|
borderStyle: "solid",
|
|
58
34
|
borderColor: e ? "neutral300" : "primary200",
|
|
59
35
|
hasRadius: !0,
|
|
60
|
-
height: `${32 / 16}rem
|
|
61
|
-
|
|
36
|
+
height: `${32 / 16}rem`,
|
|
37
|
+
...s
|
|
38
|
+
}, /* @__PURE__ */ t.createElement(l, null, /* @__PURE__ */ t.createElement(f, {
|
|
62
39
|
disabled: e,
|
|
63
40
|
variant: "pi",
|
|
64
41
|
fontWeight: "bold",
|
|
65
42
|
as: "span"
|
|
66
|
-
}, r), /* @__PURE__ */
|
|
43
|
+
}, r), /* @__PURE__ */ t.createElement(p, {
|
|
67
44
|
paddingLeft: 2
|
|
68
|
-
}, /* @__PURE__ */
|
|
45
|
+
}, /* @__PURE__ */ t.createElement(l, null, o))));
|
|
69
46
|
};
|
|
70
|
-
|
|
71
|
-
|
|
47
|
+
i.displayName = "Tag";
|
|
48
|
+
i.defaultProps = {
|
|
72
49
|
disabled: !1,
|
|
73
50
|
onClick: void 0
|
|
74
51
|
};
|
|
75
|
-
|
|
76
|
-
children:
|
|
77
|
-
disabled:
|
|
78
|
-
icon:
|
|
79
|
-
onClick:
|
|
52
|
+
i.propTypes = {
|
|
53
|
+
children: a.node.isRequired,
|
|
54
|
+
disabled: a.bool,
|
|
55
|
+
icon: a.element.isRequired,
|
|
56
|
+
onClick: a.func
|
|
80
57
|
};
|
|
81
58
|
export {
|
|
82
|
-
|
|
59
|
+
i as Tag
|
|
83
60
|
};
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
"use strict";
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const x=require("react"),b=require("prop-types"),f=require("styled-components"),h=require("@strapi/icons/Loader"),c=require("../Box/Box.cjs"),v=require("../Typography/Typography.cjs"),T=require("../Flex/Flex.cjs"),_=require("../themes/utils.cjs"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=o(x),a=o(b),p=o(f),q=o(h),B=f.keyframes`
|
|
2
2
|
from {
|
|
3
3
|
transform: rotate(0deg);
|
|
4
4
|
}
|
|
5
5
|
to {
|
|
6
6
|
transform: rotate(359deg);
|
|
7
7
|
}
|
|
8
|
-
`,
|
|
9
|
-
animation: ${
|
|
8
|
+
`,j=p.default.div`
|
|
9
|
+
animation: ${B} 2s infinite linear;
|
|
10
10
|
will-change: transform;
|
|
11
|
-
`,
|
|
11
|
+
`,E=p.default(T.Flex)`
|
|
12
12
|
background: transparent;
|
|
13
13
|
border: none;
|
|
14
14
|
|
|
@@ -28,5 +28,5 @@
|
|
|
28
28
|
fill: ${({theme:e})=>e.colors.primary600};
|
|
29
29
|
}
|
|
30
30
|
|
|
31
|
-
${
|
|
32
|
-
`,
|
|
31
|
+
${_.buttonFocusStyle}
|
|
32
|
+
`,r=t.default.forwardRef(({children:e,startIcon:l,endIcon:s,onClick:d,disabled:i,loading:n,...y},m)=>{const g=d&&!i?d:void 0,u=i||n;return t.default.createElement(E,{ref:m,"aria-disabled":u,onClick:g,as:"button",type:"button",...y},(l||n)&&t.default.createElement(c.Box,{as:"span",paddingRight:2,"aria-hidden":!0},n?t.default.createElement(j,null,t.default.createElement(q.default,null)):l),t.default.createElement(v.Typography,{variant:"pi",textColor:u?"neutral600":"primary600"},e),s&&t.default.createElement(c.Box,{as:"span",paddingLeft:2,"aria-hidden":!0},s))});r.displayName="TextButton";r.defaultProps={disabled:!1,startIcon:void 0,endIcon:void 0,loading:!1,onClick:void 0};r.propTypes={children:a.default.node.isRequired,disabled:a.default.bool,endIcon:a.default.element,loading:a.default.bool,onClick:a.default.func,startIcon:a.default.element};exports.TextButton=r;
|