@strapi/design-system 1.4.2 → 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/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 +85 -117
- 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 +3 -3
|
@@ -1,19 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
var n = Object.prototype.hasOwnProperty, p = Object.prototype.propertyIsEnumerable;
|
|
5
|
-
var a = (r, e, o) => e in r ? f(r, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : r[e] = o, c = (r, e) => {
|
|
6
|
-
for (var o in e || (e = {}))
|
|
7
|
-
n.call(e, o) && a(r, o, e[o]);
|
|
8
|
-
if (t)
|
|
9
|
-
for (var o of t(e))
|
|
10
|
-
p.call(e, o) && a(r, o, e[o]);
|
|
11
|
-
return r;
|
|
12
|
-
}, m = (r, e) => l(r, h(e));
|
|
13
|
-
import s from "react";
|
|
14
|
-
const i = (r) => /* @__PURE__ */ s.createElement("form", m(c({}, r), {
|
|
1
|
+
import r from "react";
|
|
2
|
+
const t = (e) => /* @__PURE__ */ r.createElement("form", {
|
|
3
|
+
...e,
|
|
15
4
|
role: "search"
|
|
16
|
-
})
|
|
5
|
+
});
|
|
17
6
|
export {
|
|
18
|
-
|
|
7
|
+
t as SearchForm
|
|
19
8
|
};
|
|
@@ -1,29 +1,29 @@
|
|
|
1
|
-
"use strict";
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react"),_=require("prop-types"),S=require("styled-components"),R=require("@strapi/icons/Search"),E=require("@strapi/icons/Cross"),C=require("../themes/sizes.cjs"),v=require("../Field/Field.cjs"),x=require("../Field/FieldLabel.cjs"),i=require("../Field/FieldInput.cjs");require("../Field/FieldContext.cjs");require("../Typography/Typography.cjs");const $=require("../Field/FieldAction.cjs"),z=require("../VisuallyHidden/VisuallyHidden.cjs"),I=require("../themes/utils.cjs"),d=require("../Flex/Flex.cjs"),r=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=r(a),l=r(_),n=r(S),T=r(R),w=r(E),A=n.default(d.Flex)`
|
|
2
2
|
font-size: 0.5rem;
|
|
3
3
|
svg path {
|
|
4
4
|
fill: ${({theme:e})=>e.colors.neutral400};
|
|
5
5
|
}
|
|
6
|
-
`,
|
|
6
|
+
`,o=n.default(d.Flex)`
|
|
7
7
|
font-size: 0.8rem;
|
|
8
8
|
|
|
9
9
|
svg path {
|
|
10
10
|
fill: ${({theme:e})=>e.colors.neutral800};
|
|
11
11
|
}
|
|
12
|
-
`,
|
|
12
|
+
`,L=n.default.div`
|
|
13
13
|
border-radius: ${({theme:e})=>e.borderRadius};
|
|
14
14
|
box-shadow: ${({theme:e})=>e.shadows.filterShadow};
|
|
15
15
|
|
|
16
16
|
&:focus-within {
|
|
17
|
-
${
|
|
17
|
+
${o} {
|
|
18
18
|
svg path {
|
|
19
19
|
fill: ${({theme:e})=>e.colors.primary600};
|
|
20
20
|
}
|
|
21
21
|
}
|
|
22
22
|
}
|
|
23
23
|
|
|
24
|
-
${
|
|
24
|
+
${i.InputWrapper} {
|
|
25
25
|
border: 1px solid transparent;
|
|
26
26
|
}
|
|
27
27
|
|
|
28
|
-
${
|
|
29
|
-
`,
|
|
28
|
+
${I.inputFocusStyle(i.InputWrapper)}
|
|
29
|
+
`,s=a.forwardRef(({name:e,size:f,children:p,value:u,onClear:F,clearLabel:h,...y},m)=>{const c=a.useRef(null),q=u.length>0,b=j=>{F(j),c.current.focus()},g=m||c;return t.default.createElement(L,null,t.default.createElement(v.Field,{name:e},t.default.createElement(z.VisuallyHidden,null,t.default.createElement(x.FieldLabel,null,p)),t.default.createElement(i.FieldInput,{ref:g,value:u,startAction:t.default.createElement(o,null,t.default.createElement(T.default,{"aria-hidden":!0})),size:f,endAction:q?t.default.createElement($.FieldAction,{label:h,onClick:b},t.default.createElement(A,null,t.default.createElement(w.default,null))):void 0,...y})))});s.displayName="Searchbar";s.defaultProps={value:"",size:"M"};s.propTypes={children:l.default.node.isRequired,clearLabel:l.default.string.isRequired,name:l.default.string.isRequired,onClear:l.default.func.isRequired,size:l.default.oneOf(Object.keys(C.sizes.input)),value:l.default.string};exports.Searchbar=s;
|
|
@@ -1,99 +1,79 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
return e;
|
|
11
|
-
};
|
|
12
|
-
var h = (e, t) => {
|
|
13
|
-
var r = {};
|
|
14
|
-
for (var o in e)
|
|
15
|
-
u.call(e, o) && t.indexOf(o) < 0 && (r[o] = e[o]);
|
|
16
|
-
if (e != null && n)
|
|
17
|
-
for (var o of n(e))
|
|
18
|
-
t.indexOf(o) < 0 && d.call(e, o) && (r[o] = e[o]);
|
|
19
|
-
return r;
|
|
20
|
-
};
|
|
21
|
-
import l, { forwardRef as q, useRef as x } from "react";
|
|
22
|
-
import i from "prop-types";
|
|
23
|
-
import a from "styled-components";
|
|
24
|
-
import I from "@strapi/icons/Search";
|
|
25
|
-
import W from "@strapi/icons/Cross";
|
|
26
|
-
import { sizes as A } from "../themes/sizes.js";
|
|
27
|
-
import { Field as k } from "../Field/Field.js";
|
|
28
|
-
import { FieldLabel as L } from "../Field/FieldLabel.js";
|
|
29
|
-
import { InputWrapper as b, FieldInput as O } from "../Field/FieldInput.js";
|
|
1
|
+
import r, { forwardRef as y, useRef as $ } from "react";
|
|
2
|
+
import t from "prop-types";
|
|
3
|
+
import o from "styled-components";
|
|
4
|
+
import S from "@strapi/icons/Search";
|
|
5
|
+
import v from "@strapi/icons/Cross";
|
|
6
|
+
import { sizes as C } from "../themes/sizes.js";
|
|
7
|
+
import { Field as F } from "../Field/Field.js";
|
|
8
|
+
import { FieldLabel as w } from "../Field/FieldLabel.js";
|
|
9
|
+
import { InputWrapper as a, FieldInput as z } from "../Field/FieldInput.js";
|
|
30
10
|
import "../Field/FieldContext.js";
|
|
31
11
|
import "../Typography/Typography.js";
|
|
32
|
-
import { FieldAction as
|
|
33
|
-
import { VisuallyHidden as
|
|
34
|
-
import { inputFocusStyle as
|
|
35
|
-
import { Flex as
|
|
36
|
-
const
|
|
12
|
+
import { FieldAction as q } from "../Field/FieldAction.js";
|
|
13
|
+
import { VisuallyHidden as x } from "../VisuallyHidden/VisuallyHidden.js";
|
|
14
|
+
import { inputFocusStyle as I } from "../themes/utils.js";
|
|
15
|
+
import { Flex as s } from "../Flex/Flex.js";
|
|
16
|
+
const W = o(s)`
|
|
37
17
|
font-size: 0.5rem;
|
|
38
18
|
svg path {
|
|
39
19
|
fill: ${({ theme: e }) => e.colors.neutral400};
|
|
40
20
|
}
|
|
41
|
-
`,
|
|
21
|
+
`, m = o(s)`
|
|
42
22
|
font-size: 0.8rem;
|
|
43
23
|
|
|
44
24
|
svg path {
|
|
45
25
|
fill: ${({ theme: e }) => e.colors.neutral800};
|
|
46
26
|
}
|
|
47
|
-
`,
|
|
27
|
+
`, A = o.div`
|
|
48
28
|
border-radius: ${({ theme: e }) => e.borderRadius};
|
|
49
29
|
box-shadow: ${({ theme: e }) => e.shadows.filterShadow};
|
|
50
30
|
|
|
51
31
|
&:focus-within {
|
|
52
|
-
${
|
|
32
|
+
${m} {
|
|
53
33
|
svg path {
|
|
54
34
|
fill: ${({ theme: e }) => e.colors.primary600};
|
|
55
35
|
}
|
|
56
36
|
}
|
|
57
37
|
}
|
|
58
38
|
|
|
59
|
-
${
|
|
39
|
+
${a} {
|
|
60
40
|
border: 1px solid transparent;
|
|
61
41
|
}
|
|
62
42
|
|
|
63
|
-
${
|
|
64
|
-
`,
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
return /* @__PURE__ */ l.createElement(H, null, /* @__PURE__ */ l.createElement(k, {
|
|
43
|
+
${I(a)}
|
|
44
|
+
`, l = y(({ name: e, size: p, children: c, value: i, onClear: u, clearLabel: d, ...f }, h) => {
|
|
45
|
+
const n = $(null), b = i.length > 0, E = (g) => {
|
|
46
|
+
u(g), n.current.focus();
|
|
47
|
+
}, R = h || n;
|
|
48
|
+
return /* @__PURE__ */ r.createElement(A, null, /* @__PURE__ */ r.createElement(F, {
|
|
70
49
|
name: e
|
|
71
|
-
}, /* @__PURE__ */
|
|
72
|
-
ref:
|
|
73
|
-
value:
|
|
74
|
-
startAction: /* @__PURE__ */
|
|
50
|
+
}, /* @__PURE__ */ r.createElement(x, null, /* @__PURE__ */ r.createElement(w, null, c)), /* @__PURE__ */ r.createElement(z, {
|
|
51
|
+
ref: R,
|
|
52
|
+
value: i,
|
|
53
|
+
startAction: /* @__PURE__ */ r.createElement(m, null, /* @__PURE__ */ r.createElement(S, {
|
|
75
54
|
"aria-hidden": !0
|
|
76
55
|
})),
|
|
77
|
-
size:
|
|
78
|
-
endAction:
|
|
79
|
-
label:
|
|
80
|
-
onClick:
|
|
81
|
-
}, /* @__PURE__ */
|
|
82
|
-
|
|
56
|
+
size: p,
|
|
57
|
+
endAction: b ? /* @__PURE__ */ r.createElement(q, {
|
|
58
|
+
label: d,
|
|
59
|
+
onClick: E
|
|
60
|
+
}, /* @__PURE__ */ r.createElement(W, null, /* @__PURE__ */ r.createElement(v, null))) : void 0,
|
|
61
|
+
...f
|
|
62
|
+
})));
|
|
83
63
|
});
|
|
84
|
-
|
|
85
|
-
|
|
64
|
+
l.displayName = "Searchbar";
|
|
65
|
+
l.defaultProps = {
|
|
86
66
|
value: "",
|
|
87
67
|
size: "M"
|
|
88
68
|
};
|
|
89
|
-
|
|
90
|
-
children:
|
|
91
|
-
clearLabel:
|
|
92
|
-
name:
|
|
93
|
-
onClear:
|
|
94
|
-
size:
|
|
95
|
-
value:
|
|
69
|
+
l.propTypes = {
|
|
70
|
+
children: t.node.isRequired,
|
|
71
|
+
clearLabel: t.string.isRequired,
|
|
72
|
+
name: t.string.isRequired,
|
|
73
|
+
onClear: t.func.isRequired,
|
|
74
|
+
size: t.oneOf(Object.keys(C.input)),
|
|
75
|
+
value: t.string
|
|
96
76
|
};
|
|
97
77
|
export {
|
|
98
|
-
|
|
78
|
+
l as Searchbar
|
|
99
79
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react"),f=require("prop-types"),d=require("./OptGroup.cjs"),c=require("./Option.cjs"),y=require("./Select.cjs"),l=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=l(i),p=l(f),s=({options:e,...n})=>t.default.createElement(y.Select,{multi:!0,...n},e.map(({label:r,value:o,children:a})=>a?t.default.createElement(d.OptGroup,{key:r,label:r},a?.map(u=>t.default.createElement(c.Option,{key:u.value,value:u.value},u.label))):t.default.createElement(c.Option,{key:o,value:o},r)));s.propTypes={options:p.default.arrayOf(p.default.object).isRequired};exports.MultiSelectNested=s;
|
|
@@ -1,48 +1,26 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
import { OptGroup as v } from "./OptGroup.js";
|
|
24
|
-
import { Option as c } from "./Option.js";
|
|
25
|
-
import { Select as R } from "./Select.js";
|
|
26
|
-
const S = (o) => {
|
|
27
|
-
var r = o, { options: e } = r, t = n(r, ["options"]);
|
|
28
|
-
return /* @__PURE__ */ a.createElement(R, k({
|
|
29
|
-
multi: !0
|
|
30
|
-
}, t), e.map(
|
|
31
|
-
({ label: u, value: s, children: m }) => m ? /* @__PURE__ */ a.createElement(v, {
|
|
32
|
-
key: u,
|
|
33
|
-
label: u
|
|
34
|
-
}, m == null ? void 0 : m.map((f) => /* @__PURE__ */ a.createElement(c, {
|
|
35
|
-
key: f.value,
|
|
36
|
-
value: f.value
|
|
37
|
-
}, f.label))) : /* @__PURE__ */ a.createElement(c, {
|
|
38
|
-
key: s,
|
|
39
|
-
value: s
|
|
40
|
-
}, u)
|
|
41
|
-
));
|
|
42
|
-
};
|
|
43
|
-
S.propTypes = {
|
|
44
|
-
options: O.arrayOf(O.object).isRequired
|
|
1
|
+
import e from "react";
|
|
2
|
+
import p from "prop-types";
|
|
3
|
+
import { OptGroup as f } from "./OptGroup.js";
|
|
4
|
+
import { Option as a } from "./Option.js";
|
|
5
|
+
import { Select as n } from "./Select.js";
|
|
6
|
+
const c = ({ options: u, ...i }) => /* @__PURE__ */ e.createElement(n, {
|
|
7
|
+
multi: !0,
|
|
8
|
+
...i
|
|
9
|
+
}, u.map(
|
|
10
|
+
({ label: t, value: o, children: m }) => m ? /* @__PURE__ */ e.createElement(f, {
|
|
11
|
+
key: t,
|
|
12
|
+
label: t
|
|
13
|
+
}, m?.map((r) => /* @__PURE__ */ e.createElement(a, {
|
|
14
|
+
key: r.value,
|
|
15
|
+
value: r.value
|
|
16
|
+
}, r.label))) : /* @__PURE__ */ e.createElement(a, {
|
|
17
|
+
key: o,
|
|
18
|
+
value: o
|
|
19
|
+
}, t)
|
|
20
|
+
));
|
|
21
|
+
c.propTypes = {
|
|
22
|
+
options: p.arrayOf(p.object).isRequired
|
|
45
23
|
};
|
|
46
24
|
export {
|
|
47
|
-
|
|
25
|
+
c as MultiSelectNested
|
|
48
26
|
};
|
package/dist/Select/OptGroup.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("prop-types"),i=require("react"),d=require("./Option.cjs"),u=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=u(s),r=u(i),a=({children:e,label:o,...p})=>{const l=e.map(n=>n.props.value);return r.default.createElement(r.default.Fragment,null,r.default.createElement(d.Option,{"data-opt-group":!0,"data-opt-group-children":l,"aria-label":`${o}, ${e.length} items`,...p},o),e)};a.propTypes={children:t.default.arrayOf(t.default.node).isRequired,label:t.default.string.isRequired};a.displayName="OptGroup";exports.OptGroup=a;
|
package/dist/Select/OptGroup.js
CHANGED
|
@@ -1,40 +1,20 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
if (o)
|
|
8
|
-
for (var t of o(r))
|
|
9
|
-
u.call(r, t) && m(e, t, r[t]);
|
|
10
|
-
return e;
|
|
11
|
-
};
|
|
12
|
-
var d = (e, r) => {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in e)
|
|
15
|
-
n.call(e, p) && r.indexOf(p) < 0 && (t[p] = e[p]);
|
|
16
|
-
if (e != null && o)
|
|
17
|
-
for (var p of o(e))
|
|
18
|
-
r.indexOf(p) < 0 && u.call(e, p) && (t[p] = e[p]);
|
|
19
|
-
return t;
|
|
20
|
-
};
|
|
21
|
-
import a from "prop-types";
|
|
22
|
-
import i from "react";
|
|
23
|
-
import { Option as O } from "./Option.js";
|
|
24
|
-
const c = (p) => {
|
|
25
|
-
var l = p, { children: e, label: r } = l, t = d(l, ["children", "label"]);
|
|
26
|
-
const f = e.map((g) => g.props.value);
|
|
27
|
-
return /* @__PURE__ */ i.createElement(i.Fragment, null, /* @__PURE__ */ i.createElement(O, s({
|
|
1
|
+
import r from "prop-types";
|
|
2
|
+
import t from "react";
|
|
3
|
+
import { Option as m } from "./Option.js";
|
|
4
|
+
const o = ({ children: e, label: p, ...a }) => {
|
|
5
|
+
const i = e.map((l) => l.props.value);
|
|
6
|
+
return /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(m, {
|
|
28
7
|
"data-opt-group": !0,
|
|
29
|
-
"data-opt-group-children":
|
|
30
|
-
"aria-label": `${
|
|
31
|
-
|
|
8
|
+
"data-opt-group-children": i,
|
|
9
|
+
"aria-label": `${p}, ${e.length} items`,
|
|
10
|
+
...a
|
|
11
|
+
}, p), e);
|
|
32
12
|
};
|
|
33
|
-
|
|
34
|
-
children:
|
|
35
|
-
label:
|
|
13
|
+
o.propTypes = {
|
|
14
|
+
children: r.arrayOf(r.node).isRequired,
|
|
15
|
+
label: r.string.isRequired
|
|
36
16
|
};
|
|
37
|
-
|
|
17
|
+
o.displayName = "OptGroup";
|
|
38
18
|
export {
|
|
39
|
-
|
|
19
|
+
o as OptGroup
|
|
40
20
|
};
|
package/dist/Select/Option.cjs
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
"use strict";
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react"),y=require("prop-types"),b=require("styled-components"),n=require("../Box/Box.cjs"),m=require("../Typography/Typography.cjs"),x=require("../Flex/Flex.cjs"),k=require("../BaseCheckbox/assets/checkmark.cjs"),i=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},r=i(s),t=i(y),u=i(b),R=u.default.div`
|
|
2
2
|
border: 1px solid
|
|
3
|
-
${({theme:e,selected:
|
|
3
|
+
${({theme:e,selected:o,indeterminate:a})=>o||a?e.colors.primary600:e.colors.neutral300};
|
|
4
4
|
border-radius: ${({theme:e})=>e.borderRadius};
|
|
5
5
|
height: 18px;
|
|
6
6
|
width: 18px;
|
|
7
7
|
position: relative;
|
|
8
8
|
z-index: 1;
|
|
9
9
|
overflow: hidden;
|
|
10
|
-
background-color: ${({theme:e,selected:
|
|
10
|
+
background-color: ${({theme:e,selected:o,indeterminate:a})=>o||a?e.colors.primary600:e.colors.neutral0};
|
|
11
11
|
|
|
12
|
-
${({theme:e,indeterminate:
|
|
12
|
+
${({theme:e,indeterminate:o})=>o&&`&::after {
|
|
13
13
|
content: '';
|
|
14
14
|
display: block;
|
|
15
15
|
position: relative;
|
|
@@ -27,14 +27,14 @@
|
|
|
27
27
|
${({selected:e})=>e&&`
|
|
28
28
|
&::after {
|
|
29
29
|
content: '';
|
|
30
|
-
background: url(${
|
|
30
|
+
background: url(${k}) no-repeat no-repeat center center;
|
|
31
31
|
width: 100%;
|
|
32
32
|
height: 100%;
|
|
33
33
|
position: absolute;
|
|
34
34
|
}
|
|
35
35
|
|
|
36
36
|
`}
|
|
37
|
-
`,
|
|
37
|
+
`,T=u.default(n.Box)`
|
|
38
38
|
width: 100%;
|
|
39
39
|
border: none;
|
|
40
40
|
text-align: left;
|
|
@@ -46,4 +46,4 @@
|
|
|
46
46
|
&:hover {
|
|
47
47
|
background: ${({theme:e})=>e.colors.primary100};
|
|
48
48
|
}
|
|
49
|
-
`,
|
|
49
|
+
`,l=({selected:e,indeterminate:o,children:a,value:c,multi:p,isChild:f,startIcon:d,...g})=>{const h=s.useRef(null);return r.default.createElement(T,{as:"li",hasRadius:!0,paddingLeft:f?7:4,paddingRight:4,paddingTop:2,paddingBottom:2,ref:h,role:"option","aria-selected":e,background:"neutral0","data-strapi-value":c,...g},r.default.createElement(x.Flex,null,d&&r.default.createElement(n.Box,{paddingRight:2,"aria-hidden":!0},d),p&&r.default.createElement(n.Box,{paddingRight:2,"aria-hidden":!0},r.default.createElement(R,{selected:e,indeterminate:o})),r.default.createElement(m.Typography,{textColor:e?"primary600":"neutral800",fontWeight:e?"bold":null},a)))};l.defaultProps={isChild:!1,multi:!1,selected:!1,startIcon:void 0,indeterminate:!1};l.propTypes={children:t.default.oneOfType([t.default.string,t.default.number]).isRequired,indeterminate:t.default.bool,isChild:t.default.bool,multi:t.default.bool,selected:t.default.bool,startIcon:t.default.node,value:t.default.oneOfType([t.default.string,t.default.number]).isRequired};l.displayName="Option";exports.Option=l;
|
package/dist/Select/Option.js
CHANGED
|
@@ -1,42 +1,22 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
m.call(o, r) && c(e, r, o[r]);
|
|
10
|
-
return e;
|
|
11
|
-
};
|
|
12
|
-
var h = (e, o) => {
|
|
13
|
-
var r = {};
|
|
14
|
-
for (var t in e)
|
|
15
|
-
u.call(e, t) && o.indexOf(t) < 0 && (r[t] = e[t]);
|
|
16
|
-
if (e != null && n)
|
|
17
|
-
for (var t of n(e))
|
|
18
|
-
o.indexOf(t) < 0 && m.call(e, t) && (r[t] = e[t]);
|
|
19
|
-
return r;
|
|
20
|
-
};
|
|
21
|
-
import a, { useRef as $ } from "react";
|
|
22
|
-
import i from "prop-types";
|
|
23
|
-
import g from "styled-components";
|
|
24
|
-
import { Box as l } from "../Box/Box.js";
|
|
25
|
-
import { Typography as v } from "../Typography/Typography.js";
|
|
26
|
-
import { Flex as w } from "../Flex/Flex.js";
|
|
27
|
-
import E from "../BaseCheckbox/assets/checkmark.js";
|
|
28
|
-
const T = g.div`
|
|
1
|
+
import t, { useRef as f } from "react";
|
|
2
|
+
import o from "prop-types";
|
|
3
|
+
import d from "styled-components";
|
|
4
|
+
import { Box as a } from "../Box/Box.js";
|
|
5
|
+
import { Typography as h } from "../Typography/Typography.js";
|
|
6
|
+
import { Flex as g } from "../Flex/Flex.js";
|
|
7
|
+
import b from "../BaseCheckbox/assets/checkmark.js";
|
|
8
|
+
const y = d.div`
|
|
29
9
|
border: 1px solid
|
|
30
|
-
${({ theme: e, selected:
|
|
10
|
+
${({ theme: e, selected: r, indeterminate: i }) => r || i ? e.colors.primary600 : e.colors.neutral300};
|
|
31
11
|
border-radius: ${({ theme: e }) => e.borderRadius};
|
|
32
12
|
height: 18px;
|
|
33
13
|
width: 18px;
|
|
34
14
|
position: relative;
|
|
35
15
|
z-index: 1;
|
|
36
16
|
overflow: hidden;
|
|
37
|
-
background-color: ${({ theme: e, selected:
|
|
17
|
+
background-color: ${({ theme: e, selected: r, indeterminate: i }) => r || i ? e.colors.primary600 : e.colors.neutral0};
|
|
38
18
|
|
|
39
|
-
${({ theme: e, indeterminate:
|
|
19
|
+
${({ theme: e, indeterminate: r }) => r && `&::after {
|
|
40
20
|
content: '';
|
|
41
21
|
display: block;
|
|
42
22
|
position: relative;
|
|
@@ -54,14 +34,14 @@ const T = g.div`
|
|
|
54
34
|
${({ selected: e }) => e && `
|
|
55
35
|
&::after {
|
|
56
36
|
content: '';
|
|
57
|
-
background: url(${
|
|
37
|
+
background: url(${b}) no-repeat no-repeat center center;
|
|
58
38
|
width: 100%;
|
|
59
39
|
height: 100%;
|
|
60
40
|
position: absolute;
|
|
61
41
|
}
|
|
62
42
|
|
|
63
43
|
`}
|
|
64
|
-
`,
|
|
44
|
+
`, x = d(a)`
|
|
65
45
|
width: 100%;
|
|
66
46
|
border: none;
|
|
67
47
|
text-align: left;
|
|
@@ -73,52 +53,52 @@ const T = g.div`
|
|
|
73
53
|
&:hover {
|
|
74
54
|
background: ${({ theme: e }) => e.colors.primary100};
|
|
75
55
|
}
|
|
76
|
-
`,
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
return /* @__PURE__ */ a.createElement(O, f({
|
|
56
|
+
`, n = ({ selected: e, indeterminate: r, children: i, value: p, multi: s, isChild: c, startIcon: l, ...u }) => {
|
|
57
|
+
const m = f(null);
|
|
58
|
+
return /* @__PURE__ */ t.createElement(x, {
|
|
80
59
|
as: "li",
|
|
81
60
|
hasRadius: !0,
|
|
82
|
-
paddingLeft:
|
|
61
|
+
paddingLeft: c ? 7 : 4,
|
|
83
62
|
paddingRight: 4,
|
|
84
63
|
paddingTop: 2,
|
|
85
64
|
paddingBottom: 2,
|
|
86
|
-
ref:
|
|
65
|
+
ref: m,
|
|
87
66
|
role: "option",
|
|
88
67
|
"aria-selected": e,
|
|
89
68
|
background: "neutral0",
|
|
90
|
-
"data-strapi-value":
|
|
91
|
-
|
|
69
|
+
"data-strapi-value": p,
|
|
70
|
+
...u
|
|
71
|
+
}, /* @__PURE__ */ t.createElement(g, null, l && /* @__PURE__ */ t.createElement(a, {
|
|
92
72
|
paddingRight: 2,
|
|
93
73
|
"aria-hidden": !0
|
|
94
|
-
},
|
|
74
|
+
}, l), s && /* @__PURE__ */ t.createElement(a, {
|
|
95
75
|
paddingRight: 2,
|
|
96
76
|
"aria-hidden": !0
|
|
97
|
-
}, /* @__PURE__ */
|
|
77
|
+
}, /* @__PURE__ */ t.createElement(y, {
|
|
98
78
|
selected: e,
|
|
99
|
-
indeterminate:
|
|
100
|
-
})), /* @__PURE__ */
|
|
79
|
+
indeterminate: r
|
|
80
|
+
})), /* @__PURE__ */ t.createElement(h, {
|
|
101
81
|
textColor: e ? "primary600" : "neutral800",
|
|
102
82
|
fontWeight: e ? "bold" : null
|
|
103
|
-
},
|
|
83
|
+
}, i)));
|
|
104
84
|
};
|
|
105
|
-
|
|
85
|
+
n.defaultProps = {
|
|
106
86
|
isChild: !1,
|
|
107
87
|
multi: !1,
|
|
108
88
|
selected: !1,
|
|
109
89
|
startIcon: void 0,
|
|
110
90
|
indeterminate: !1
|
|
111
91
|
};
|
|
112
|
-
|
|
113
|
-
children:
|
|
114
|
-
indeterminate:
|
|
115
|
-
isChild:
|
|
116
|
-
multi:
|
|
117
|
-
selected:
|
|
118
|
-
startIcon:
|
|
119
|
-
value:
|
|
92
|
+
n.propTypes = {
|
|
93
|
+
children: o.oneOfType([o.string, o.number]).isRequired,
|
|
94
|
+
indeterminate: o.bool,
|
|
95
|
+
isChild: o.bool,
|
|
96
|
+
multi: o.bool,
|
|
97
|
+
selected: o.bool,
|
|
98
|
+
startIcon: o.node,
|
|
99
|
+
value: o.oneOfType([o.string, o.number]).isRequired
|
|
120
100
|
};
|
|
121
|
-
|
|
101
|
+
n.displayName = "Option";
|
|
122
102
|
export {
|
|
123
|
-
|
|
103
|
+
n as Option
|
|
124
104
|
};
|
package/dist/Select/Select.cjs
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
"use strict";
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("react"),te=require("prop-types"),le=require("@strapi/icons/CarretDown"),re=require("@strapi/icons/Cross"),ne=require("styled-components"),oe=require("../themes/sizes.cjs"),ae=require("./SelectButton.cjs"),se=require("../Field/Field.cjs"),ie=require("../Field/FieldLabel.cjs");require("../Field/FieldInput.cjs");const ce=require("../Field/FieldHint.cjs"),de=require("../Field/FieldError.cjs");require("../Field/FieldContext.cjs");require("../Field/FieldAction.cjs");const ue=require("../Popover/Popover.cjs"),fe=require("../Stack/Stack.cjs"),P=require("../Typography/Typography.cjs"),v=require("../Flex/Flex.cjs"),A=require("../Box/Box.cjs"),pe=require("../helpers/useId.cjs"),ye=require("./SelectList.cjs"),x=require("./components.cjs"),he=require("./hooks/useButtonRef.cjs"),z=require("../VisuallyHidden/VisuallyHidden.cjs"),me=require("./constants.cjs"),G=require("../helpers/escapeSelector.cjs"),Ee=require("./SelectTags.cjs"),p=o=>o&&typeof o=="object"&&"default"in o?o:{default:o},l=p(u),e=p(te),ge=p(le),be=p(re),qe=p(ne),Fe=qe.default(v.Flex)`
|
|
2
2
|
width: 100%;
|
|
3
|
-
`,
|
|
3
|
+
`,C=({label:o,labelAction:W,id:N,children:J,customizeContent:y,placeholder:q,onChange:F,value:r,hint:S,error:h,disabled:i,clearLabel:I,onClear:O,onReachEnd:K,multi:a,required:Q,selectButtonTitle:U,size:V,startIcon:_,withTags:m,...X})=>{const n=pe.useId("select",N),[E,g]=u.useState(void 0),R=he.useButtonRef(E),L=u.useRef(null),$=`${n}-label`,b=`${n}-content`,D=typeof h=="string";let j;if(D?j=`${n}-error`:S&&(j=`${n}-hint`),m&&!a)throw new Error('The "withTags" props can only be used when the "multi" prop is present');const Y=()=>{g(void 0)},Z=()=>{i||(O(),R.current.focus())},w=t=>{t.preventDefault(),!i&&(t.nativeEvent.which===3||t.nativeEvent.button===2||g(me.DownState.Mouse))},B=(t,s=!0)=>{a?F(r.includes(t)?r.filter(c=>c!==t):[...r,t]):(F(t),s&&g(void 0))},k=t=>{F(r.includes(t[0])?r.filter((s,c,f)=>f.indexOf(s)<0,t):[...r,...t])};let T,H=[];const M=(t,s)=>{const c=`${n}-option-${t.props.value}`,f=a?r.includes(t.props.value):t.props.value===r;return f&&(m?H.push({label:t.props.children,value:t.props.value}):T=t.props.children),u.cloneElement(t,{id:G.escapeSelector(c),onClick:()=>B(t.props.value),selected:f,multi:a,isChild:s})},ee=u.Children.toArray(J).map(t=>{if(t.type.displayName==="OptGroup"){const s=`${n}-option-${t.props.label}`,c=t.props.children.every(d=>r.includes(d.props.value)),f=!c&&t.props.children.some(d=>r.includes(d.props.value));return u.cloneElement(t,{id:G.escapeSelector(s),onClick:()=>k(t.props.children.map(d=>d.props.value)),selected:c,indeterminate:f,multi:a,children:u.Children.toArray(t.props.children).map(d=>M(d,!0)),value:t.props.label})}return M(t)});return l.default.createElement(se.Field,{hint:S,error:h,id:n,required:Q},l.default.createElement(fe.Stack,{spacing:o||S||D?1:0},o&&l.default.createElement(ie.FieldLabel,{action:W},o),l.default.createElement(x.SelectButtonWrapper,{size:V,hasError:Boolean(h),disabled:i,ref:L},l.default.createElement(ae.SelectButton,{ref:R,labelledBy:`${n} ${$} ${b}`,"aria-describedby":j,expanded:Boolean(E),onTrigger:g,id:n,hasError:Boolean(h),disabled:i,onMouseDown:w,...X}),l.default.createElement(Fe,{justifyContent:"space-between"},l.default.createElement(v.Flex,null,_&&l.default.createElement(A.Box,{paddingLeft:3,"aria-hidden":!0},_),m&&l.default.createElement(Ee.SelectTags,{tags:H,onRemoveTag:B,disabled:i}),l.default.createElement(A.Box,{paddingLeft:4,paddingRight:4},m?l.default.createElement(l.default.Fragment,null,!r||r.length===0?l.default.createElement(P.Typography,{ellipsis:!0,id:b,textColor:"neutral600"},q):null,l.default.createElement(z.VisuallyHidden,{as:"span",id:b},y?y(r):T||q,r.join(", "))):l.default.createElement(P.Typography,{ellipsis:!0,id:b,textColor:r?"neutral800":"neutral600"},y?y(r):T||q,a&&l.default.createElement(z.VisuallyHidden,{as:"span"},r.join(", "))))),l.default.createElement(v.Flex,null,(a&&r&&r.length||!a&&r)&&O&&l.default.createElement(x.IconBox,{as:"button",type:"button",onClick:Z,"aria-label":I,"aria-disabled":i,title:I},l.default.createElement(be.default,null)),l.default.createElement(x.CaretBox,{paddingLeft:3,"aria-hidden":!0,as:"button",type:"button",onMouseDown:w,tabIndex:-1,disabled:i,title:U},l.default.createElement(ge.default,null))))),l.default.createElement(ce.FieldHint,null),l.default.createElement(de.FieldError,null)),E&&l.default.createElement(ue.Popover,{source:L,spacing:4,fullWidth:!0,intersectionId:`select-list-intersection-${n}`,onReachEnd:K},l.default.createElement(ye.SelectList,{selectId:n,labelledBy:o?$:void 0,onEscape:Y,expanded:E,onSelectItem:(t,s)=>s?k(t):B(t,!1),multi:a},ee)))};C.defaultProps={"aria-label":void 0,children:[],clearLabel:"Clear",customizeContent:void 0,disabled:!1,id:void 0,label:void 0,labelAction:void 0,multi:!1,onChange(){},onClear:void 0,onReachEnd:void 0,value:void 0,hint:void 0,error:void 0,placeholder:"Select...",required:!1,selectButtonTitle:"Carret Down Button",size:"M",startIcon:void 0,withTags:!1};C.propTypes={"aria-label":e.default.string,children:e.default.oneOfType([e.default.arrayOf(e.default.node),e.default.node]),clearLabel:e.default.string,customizeContent:e.default.func,disabled:e.default.bool,error:e.default.oneOfType([e.default.string,e.default.bool]),hint:e.default.oneOfType([e.default.string,e.default.node,e.default.arrayOf(e.default.node)]),id:e.default.oneOfType([e.default.string,e.default.number]),label:e.default.string,labelAction:e.default.element,multi:e.default.bool,onChange:e.default.func,onClear:e.default.func,onReachEnd:e.default.func,placeholder:e.default.string,required:e.default.bool,selectButtonTitle:e.default.string,size:e.default.oneOf(Object.keys(oe.sizes.input)),startIcon:e.default.element,value:e.default.oneOfType([e.default.arrayOf(e.default.oneOfType([e.default.string,e.default.number])),e.default.string,e.default.number]),withTags:e.default.bool};exports.Select=C;
|