@dynamic-framework/ui-react 2.10.0 → 2.11.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/DPortalStack-6zJm6JoD.js +14 -0
- package/dist/DPortalStack-6zJm6JoD.js.map +1 -0
- package/dist/DPortalStack-D1-GGU4C.js +12 -0
- package/dist/DPortalStack-D1-GGU4C.js.map +1 -0
- package/dist/api.json +7429 -0
- package/dist/css/dynamic-ui.css +95 -26
- package/dist/css/dynamic-ui.min.css +2 -2
- package/dist/esm/components/DAlert/DAlert.js +2 -2
- package/dist/esm/components/DAlert/DAlert.js.map +1 -1
- package/dist/esm/components/DButtonIcon/DButtonIcon.js +6 -3
- package/dist/esm/components/DButtonIcon/DButtonIcon.js.map +1 -1
- package/dist/esm/components/DDataStateWrapper/DDataStateWrapper.js +10 -3
- package/dist/esm/components/DDataStateWrapper/DDataStateWrapper.js.map +1 -1
- package/dist/esm/components/DErrorBoundary/DErrorBoundary.js +3 -3
- package/dist/esm/components/DErrorBoundary/DErrorBoundary.js.map +1 -1
- package/dist/esm/components/DErrorBoundary/components/DefaultErrorBoundary.js +2 -2
- package/dist/esm/components/DErrorBoundary/components/DefaultErrorBoundary.js.map +1 -1
- package/dist/esm/components/DInput/DInput.js +15 -3
- package/dist/esm/components/DInput/DInput.js.map +1 -1
- package/dist/esm/components/DInputCheck/DInputCheck.js +45 -8
- package/dist/esm/components/DInputCheck/DInputCheck.js.map +1 -1
- package/dist/esm/components/DInputCounter/DInputCounter.js +78 -20
- package/dist/esm/components/DInputCounter/DInputCounter.js.map +1 -1
- package/dist/esm/components/DInputCurrency/DInputCurrency.js +8 -3
- package/dist/esm/components/DInputCurrency/DInputCurrency.js.map +1 -1
- package/dist/esm/components/DInputPhone/DInputPhone.js +14 -2
- package/dist/esm/components/DInputPhone/DInputPhone.js.map +1 -1
- package/dist/esm/components/DInputPin/DInputPin.js +3 -1
- package/dist/esm/components/DInputPin/DInputPin.js.map +1 -1
- package/dist/esm/components/DInputRange/DInputRange.js +16 -2
- package/dist/esm/components/DInputRange/DInputRange.js.map +1 -1
- package/dist/esm/components/DInputSelect/DInputSelect.js +18 -4
- package/dist/esm/components/DInputSelect/DInputSelect.js.map +1 -1
- package/dist/esm/components/DInputSwitch/DInputSwitch.js +20 -9
- package/dist/esm/components/DInputSwitch/DInputSwitch.js.map +1 -1
- package/dist/esm/components/DListGroup/DListGroup.js +10 -2
- package/dist/esm/components/DListGroup/DListGroup.js.map +1 -1
- package/dist/esm/components/DListGroup/ListGroupContext.js +11 -0
- package/dist/esm/components/DListGroup/ListGroupContext.js.map +1 -0
- package/dist/esm/components/DListGroup/components/DListGroupItem.js +34 -16
- package/dist/esm/components/DListGroup/components/DListGroupItem.js.map +1 -1
- package/dist/esm/components/DListGroup/components/warnInvalidListMarkup.js +30 -0
- package/dist/esm/components/DListGroup/components/warnInvalidListMarkup.js.map +1 -0
- package/dist/esm/components/DPasswordStrengthMeter/DPasswordStrengthMeter.js +2 -2
- package/dist/esm/components/DPasswordStrengthMeter/DPasswordStrengthMeter.js.map +1 -1
- package/dist/esm/components/DProgress/DProgress.js +9 -3
- package/dist/esm/components/DProgress/DProgress.js.map +1 -1
- package/dist/esm/components/DSelect/DSelect.js +31 -3
- package/dist/esm/components/DSelect/DSelect.js.map +1 -1
- package/dist/esm/components/DSelect/createAriaGuidance.js +57 -0
- package/dist/esm/components/DSelect/createAriaGuidance.js.map +1 -0
- package/dist/esm/components/DTabs/DTabs.js +29 -40
- package/dist/esm/components/DTabs/DTabs.js.map +1 -1
- package/dist/esm/components/DTabs/TabContext.js +3 -2
- package/dist/esm/components/DTabs/TabContext.js.map +1 -1
- package/dist/esm/components/DTabs/components/DTabContent.js +2 -2
- package/dist/esm/components/DTabs/components/DTabContent.js.map +1 -1
- package/dist/esm/components/DTabs/components/DTabsProvider.js +22 -0
- package/dist/esm/components/DTabs/components/DTabsProvider.js.map +1 -0
- package/dist/esm/components/DTabs/index.js +1 -0
- package/dist/esm/components/DTabs/index.js.map +1 -1
- package/dist/esm/components/DToast/DToast.js +7 -2
- package/dist/esm/components/DToast/DToast.js.map +1 -1
- package/dist/esm/components/DToastContainer/useDToast.js +5 -5
- package/dist/esm/components/DToastContainer/useDToast.js.map +1 -1
- package/dist/esm/components/internal/DFormLabel.js +46 -0
- package/dist/esm/components/internal/DFormLabel.js.map +1 -0
- package/dist/esm/contexts/DPortalContext.js +43 -8
- package/dist/esm/contexts/DPortalContext.js.map +1 -1
- package/dist/esm/contexts/portal/DPortalStack.js +12 -0
- package/dist/esm/contexts/portal/DPortalStack.js.map +1 -0
- package/dist/esm/hooks/useControlledState.js +51 -0
- package/dist/esm/hooks/useControlledState.js.map +1 -0
- package/dist/esm/hooks/useInputCurrency.js +73 -19
- package/dist/esm/hooks/useInputCurrency.js.map +1 -1
- package/dist/esm/hooks/useMediaBreakpointUp.js +42 -3
- package/dist/esm/hooks/useMediaBreakpointUp.js.map +1 -1
- package/dist/esm/hooks/useResponsiveProp.js +13 -2
- package/dist/esm/hooks/useResponsiveProp.js.map +1 -1
- package/dist/esm/index.js +1 -0
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/utils/hasLabelContent.js +48 -0
- package/dist/esm/utils/hasLabelContent.js.map +1 -0
- package/dist/esm/utils/isTextLabel.js +23 -0
- package/dist/esm/utils/isTextLabel.js.map +1 -0
- package/dist/esm/utils/labelClickGuard.js +61 -0
- package/dist/esm/utils/labelClickGuard.js.map +1 -0
- package/dist/esm/utils/warnLabelUsage.js +57 -0
- package/dist/esm/utils/warnLabelUsage.js.map +1 -0
- package/dist/icons-core.json +1 -1
- package/dist/index.esm.js +865 -163
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +864 -161
- package/dist/index.js.map +1 -1
- package/dist/types/components/DAlert/DAlert.d.ts +16 -2
- package/dist/types/components/DButtonIcon/DButtonIcon.d.ts +9 -1
- package/dist/types/components/DDataStateWrapper/DDataStateWrapper.d.ts +29 -4
- package/dist/types/components/DDataStateWrapper/index.d.ts +1 -1
- package/dist/types/components/DErrorBoundary/DErrorBoundary.d.ts +6 -1
- package/dist/types/components/DErrorBoundary/components/DefaultErrorBoundary.d.ts +3 -1
- package/dist/types/components/DInput/DInput.d.ts +11 -2
- package/dist/types/components/DInputCheck/DInputCheck.d.ts +28 -3
- package/dist/types/components/DInputCounter/DInputCounter.d.ts +15 -3
- package/dist/types/components/DInputCurrency/DInputCurrency.d.ts +10 -3
- package/dist/types/components/DInputPhone/DInputPhone.d.ts +11 -2
- package/dist/types/components/DInputPin/DInputPin.d.ts +12 -2
- package/dist/types/components/DInputRange/DInputRange.d.ts +15 -2
- package/dist/types/components/DInputSelect/DInputSelect.d.ts +18 -3
- package/dist/types/components/DInputSwitch/DInputSwitch.d.ts +28 -3
- package/dist/types/components/DListGroup/DListGroup.d.ts +12 -1
- package/dist/types/components/DListGroup/ListGroupContext.d.ts +8 -0
- package/dist/types/components/DListGroup/components/DListGroupItem.d.ts +6 -1
- package/dist/types/components/DListGroup/components/warnInvalidListMarkup.d.ts +13 -0
- package/dist/types/components/DPasswordStrengthMeter/DPasswordStrengthMeter.d.ts +18 -3
- package/dist/types/components/DProgress/DProgress.d.ts +13 -1
- package/dist/types/components/DSelect/DSelect.d.ts +23 -3
- package/dist/types/components/DSelect/createAriaGuidance.d.ts +21 -0
- package/dist/types/components/DTabs/DTabs.d.ts +13 -2
- package/dist/types/components/DTabs/TabContext.d.ts +5 -0
- package/dist/types/components/DTabs/components/DTabsProvider.d.ts +11 -0
- package/dist/types/components/DTabs/index.d.ts +1 -0
- package/dist/types/components/DToast/DToast.d.ts +10 -3
- package/dist/types/components/DToastContainer/useDToast.d.ts +8 -1
- package/dist/types/components/index.d.ts +2 -2
- package/dist/types/components/interface.d.ts +7 -0
- package/dist/types/components/internal/DFormLabel.d.ts +30 -0
- package/dist/types/contexts/portal/DPortalStack.d.ts +13 -0
- package/dist/types/hooks/useControlledState.d.ts +17 -0
- package/dist/types/hooks/useInputCurrency.d.ts +26 -1
- package/dist/types/hooks/useMediaBreakpointUp.d.ts +10 -0
- package/dist/types/utils/hasLabelContent.d.ts +30 -0
- package/dist/types/utils/isTextLabel.d.ts +17 -0
- package/dist/types/utils/labelClickGuard.d.ts +20 -0
- package/dist/types/utils/warnLabelUsage.d.ts +43 -0
- package/package.json +8 -3
- package/src/style/abstracts/variables/_body.scss +2 -2
- package/src/style/abstracts/variables/_chips.scss +2 -0
- package/src/style/abstracts/variables/_colors.scss +2 -2
- package/src/style/base/_buttons.scss +4 -1
- package/src/style/base/_input-group.scss +5 -2
- package/src/style/base/_list-group.scss +55 -0
- package/src/style/components/_d-chip.scss +7 -2
- package/src/style/components/_d-tabs.scss +3 -0
- package/src/style/helpers/_color-bg.scss +5 -0
- package/src/style/root/_root.scss +9 -0
|
@@ -1,11 +1,17 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { useId, useMemo,
|
|
2
|
+
import { useId, useMemo, useCallback } from 'react';
|
|
3
3
|
import classNames from 'classnames';
|
|
4
|
+
import DFormLabel from '../internal/DFormLabel.js';
|
|
5
|
+
import hasLabelContent from '../../utils/hasLabelContent.js';
|
|
6
|
+
import warnLabelUsage from '../../utils/warnLabelUsage.js';
|
|
7
|
+
import useControlledState from '../../hooks/useControlledState.js';
|
|
4
8
|
|
|
5
|
-
function DInputSwitch({ id: idProp, label, ariaLabel, name, checked, disabled, invalid = false, valid = false, hint, readonly, className, style, dataAttributes, inputClassName, onChange, }) {
|
|
9
|
+
function DInputSwitch({ id: idProp, label, ariaLabel, name, checked, defaultChecked = false, disabled, invalid = false, valid = false, hint, readonly, className, style, dataAttributes, inputClassName, onChange, }) {
|
|
6
10
|
const innerId = useId();
|
|
7
11
|
const id = useMemo(() => idProp || innerId, [idProp, innerId]);
|
|
8
|
-
|
|
12
|
+
// See `useControlledState` for why `onChange` takes part in this decision.
|
|
13
|
+
const isControlled = checked !== undefined && onChange !== undefined;
|
|
14
|
+
const [isChecked, setIsChecked] = useControlledState(checked, isControlled, defaultChecked);
|
|
9
15
|
const ariaDescribedby = useMemo(() => ([
|
|
10
16
|
!!hint && `${id}Hint`,
|
|
11
17
|
]
|
|
@@ -14,18 +20,23 @@ function DInputSwitch({ id: idProp, label, ariaLabel, name, checked, disabled, i
|
|
|
14
20
|
id,
|
|
15
21
|
hint,
|
|
16
22
|
]);
|
|
17
|
-
useEffect(() => {
|
|
18
|
-
setInternalIsChecked(checked);
|
|
19
|
-
}, [checked]);
|
|
20
23
|
const changeHandler = useCallback((event) => {
|
|
21
24
|
const value = event.currentTarget.checked;
|
|
22
|
-
|
|
25
|
+
setIsChecked(value);
|
|
23
26
|
onChange === null || onChange === void 0 ? void 0 : onChange(value);
|
|
24
|
-
}, [onChange]);
|
|
27
|
+
}, [setIsChecked, onChange]);
|
|
28
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
29
|
+
warnLabelUsage({
|
|
30
|
+
component: 'DInputSwitch',
|
|
31
|
+
label,
|
|
32
|
+
hasAccessibleName: !!ariaLabel,
|
|
33
|
+
accessibleNameProp: 'ariaLabel',
|
|
34
|
+
});
|
|
35
|
+
}
|
|
25
36
|
return (jsxs("div", Object.assign({ className: classNames('form-check form-switch', className) }, dataAttributes, { children: [jsx("input", Object.assign({ id: id, name: name, onChange: readonly ? () => false : changeHandler, className: classNames('form-check-input', {
|
|
26
37
|
'is-invalid': invalid,
|
|
27
38
|
'is-valid': valid,
|
|
28
|
-
}, inputClassName), style: style, type: "checkbox", role: "switch", checked:
|
|
39
|
+
}, inputClassName), style: style, type: "checkbox", role: "switch", checked: isChecked, disabled: disabled, "aria-label": ariaLabel }, ariaDescribedby && { 'aria-describedby': ariaDescribedby })), hasLabelContent(label) && (jsx(DFormLabel, { className: "form-check-label", htmlFor: id, children: label })), hint && (jsx("div", { className: "form-text", id: `${id}Hint`, children: hint }))] })));
|
|
29
40
|
}
|
|
30
41
|
|
|
31
42
|
export { DInputSwitch as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DInputSwitch.js","sources":["../../../../dist-transpiled/components/DInputSwitch/DInputSwitch.js"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport {
|
|
1
|
+
{"version":3,"file":"DInputSwitch.js","sources":["../../../../dist-transpiled/components/DInputSwitch/DInputSwitch.js"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { useCallback, useId, useMemo, } from 'react';\nimport classNames from 'classnames';\nimport DFormLabel from '../internal/DFormLabel';\nimport hasLabelContent from '../../utils/hasLabelContent';\nimport warnLabelUsage from '../../utils/warnLabelUsage';\nimport useControlledState from '../../hooks/useControlledState';\nexport default function DInputSwitch({ id: idProp, label, ariaLabel, name, checked, defaultChecked = false, disabled, invalid = false, valid = false, hint, readonly, className, style, dataAttributes, inputClassName, onChange, }) {\n const innerId = useId();\n const id = useMemo(() => idProp || innerId, [idProp, innerId]);\n // See `useControlledState` for why `onChange` takes part in this decision.\n const isControlled = checked !== undefined && onChange !== undefined;\n const [isChecked, setIsChecked] = useControlledState(checked, isControlled, defaultChecked);\n const ariaDescribedby = useMemo(() => ([\n !!hint && `${id}Hint`,\n ]\n .filter(Boolean)\n .join(' ')), [\n id,\n hint,\n ]);\n const changeHandler = useCallback((event) => {\n const value = event.currentTarget.checked;\n setIsChecked(value);\n onChange === null || onChange === void 0 ? void 0 : onChange(value);\n }, [setIsChecked, onChange]);\n if (process.env.NODE_ENV !== 'production') {\n warnLabelUsage({\n component: 'DInputSwitch',\n label,\n hasAccessibleName: !!ariaLabel,\n accessibleNameProp: 'ariaLabel',\n });\n }\n return (_jsxs(\"div\", Object.assign({ className: classNames('form-check form-switch', className) }, dataAttributes, { children: [_jsx(\"input\", Object.assign({ id: id, name: name, onChange: readonly ? () => false : changeHandler, className: classNames('form-check-input', {\n 'is-invalid': invalid,\n 'is-valid': valid,\n }, inputClassName), style: style, type: \"checkbox\", role: \"switch\", checked: isChecked, disabled: disabled, \"aria-label\": ariaLabel }, ariaDescribedby && { 'aria-describedby': ariaDescribedby })), hasLabelContent(label) && (_jsx(DFormLabel, { className: \"form-check-label\", htmlFor: id, children: label })), hint && (_jsx(\"div\", { className: \"form-text\", id: `${id}Hint`, children: hint }))] })));\n}\n//# sourceMappingURL=DInputSwitch.js.map"],"names":["_jsxs","_jsx"],"mappings":"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"}
|
|
@@ -2,8 +2,9 @@ import { jsx } from 'react/jsx-runtime';
|
|
|
2
2
|
import { useMemo } from 'react';
|
|
3
3
|
import classNames from 'classnames';
|
|
4
4
|
import DListGroupItem from './components/DListGroupItem.js';
|
|
5
|
+
import ListGroupContext from './ListGroupContext.js';
|
|
5
6
|
|
|
6
|
-
function DListGroup({ as = 'ul', numbered, flush, horizontal, children, className, style, dataAttributes, }) {
|
|
7
|
+
function DListGroup({ as = 'ul', numbered, flush, horizontal, ariaLabel, ariaLabelledBy, children, className, style, dataAttributes, }) {
|
|
7
8
|
const Tag = useMemo(() => {
|
|
8
9
|
if (numbered) {
|
|
9
10
|
return 'ol';
|
|
@@ -21,7 +22,14 @@ function DListGroup({ as = 'ul', numbered, flush, horizontal, children, classNam
|
|
|
21
22
|
[listGroupHorizontalClass]: !!horizontal,
|
|
22
23
|
};
|
|
23
24
|
}, [flush, horizontal, numbered]);
|
|
24
|
-
|
|
25
|
+
const labelProps = useMemo(() => {
|
|
26
|
+
if (!ariaLabelledBy && !ariaLabel)
|
|
27
|
+
return {};
|
|
28
|
+
return Object.assign(Object.assign({}, ariaLabelledBy
|
|
29
|
+
? { 'aria-labelledby': ariaLabelledBy }
|
|
30
|
+
: { 'aria-label': ariaLabel }), Tag === 'div' && { role: 'group' });
|
|
31
|
+
}, [ariaLabel, ariaLabelledBy, Tag]);
|
|
32
|
+
return (jsx(ListGroupContext.Provider, { value: Tag, children: jsx(Tag, Object.assign({ className: classNames(generateClasses, className), style: style }, labelProps, dataAttributes, { children: children })) }));
|
|
25
33
|
}
|
|
26
34
|
var DListGroup$1 = Object.assign(DListGroup, {
|
|
27
35
|
Item: DListGroupItem,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DListGroup.js","sources":["../../../../dist-transpiled/components/DListGroup/DListGroup.js"],"sourcesContent":["import { jsx as _jsx } from \"react/jsx-runtime\";\nimport { useMemo } from 'react';\nimport classNames from 'classnames';\nimport DListGroupItem from './components/DListGroupItem';\nfunction DListGroup({ as = 'ul', numbered, flush, horizontal, children, className, style, dataAttributes, }) {\n const Tag = useMemo(() => {\n if (numbered) {\n return 'ol';\n }\n return as;\n }, [numbered, as]);\n const generateClasses = useMemo(() => {\n const listGroupHorizontalClass = typeof horizontal === 'string'\n ? `list-group-horizontal-${horizontal}`\n : 'list-group-horizontal';\n return {\n 'list-group': true,\n 'list-group-numbered': numbered,\n 'list-group-flush': flush,\n [listGroupHorizontalClass]: !!horizontal,\n };\n }, [flush, horizontal, numbered]);\n return (_jsx(Tag, Object.assign({ className: classNames(generateClasses, className), style: style }, dataAttributes, { children: children })));\n}\nexport default Object.assign(DListGroup, {\n Item: DListGroupItem,\n});\n//# sourceMappingURL=DListGroup.js.map"],"names":["_jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"DListGroup.js","sources":["../../../../dist-transpiled/components/DListGroup/DListGroup.js"],"sourcesContent":["import { jsx as _jsx } from \"react/jsx-runtime\";\nimport { useMemo } from 'react';\nimport classNames from 'classnames';\nimport DListGroupItem from './components/DListGroupItem';\nimport ListGroupContext from './ListGroupContext';\nfunction DListGroup({ as = 'ul', numbered, flush, horizontal, ariaLabel, ariaLabelledBy, children, className, style, dataAttributes, }) {\n const Tag = useMemo(() => {\n if (numbered) {\n return 'ol';\n }\n return as;\n }, [numbered, as]);\n const generateClasses = useMemo(() => {\n const listGroupHorizontalClass = typeof horizontal === 'string'\n ? `list-group-horizontal-${horizontal}`\n : 'list-group-horizontal';\n return {\n 'list-group': true,\n 'list-group-numbered': numbered,\n 'list-group-flush': flush,\n [listGroupHorizontalClass]: !!horizontal,\n };\n }, [flush, horizontal, numbered]);\n const labelProps = useMemo(() => {\n if (!ariaLabelledBy && !ariaLabel)\n return {};\n return Object.assign(Object.assign({}, ariaLabelledBy\n ? { 'aria-labelledby': ariaLabelledBy }\n : { 'aria-label': ariaLabel }), Tag === 'div' && { role: 'group' });\n }, [ariaLabel, ariaLabelledBy, Tag]);\n return (_jsx(ListGroupContext.Provider, { value: Tag, children: _jsx(Tag, Object.assign({ className: classNames(generateClasses, className), style: style }, labelProps, dataAttributes, { children: children })) }));\n}\nexport default Object.assign(DListGroup, {\n Item: DListGroupItem,\n});\n//# sourceMappingURL=DListGroup.js.map"],"names":["_jsx"],"mappings":";;;;;;AAKA,SAAS,UAAU,CAAC,EAAE,EAAE,GAAG,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,cAAc,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,cAAc,GAAG,EAAE;AACxI,IAAI,MAAM,GAAG,GAAG,OAAO,CAAC,MAAM;AAC9B,QAAQ,IAAI,QAAQ,EAAE;AACtB,YAAY,OAAO,IAAI;AACvB,QAAQ;AACR,QAAQ,OAAO,EAAE;AACjB,IAAI,CAAC,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;AACtB,IAAI,MAAM,eAAe,GAAG,OAAO,CAAC,MAAM;AAC1C,QAAQ,MAAM,wBAAwB,GAAG,OAAO,UAAU,KAAK;AAC/D,cAAc,CAAC,sBAAsB,EAAE,UAAU,CAAC;AAClD,cAAc,uBAAuB;AACrC,QAAQ,OAAO;AACf,YAAY,YAAY,EAAE,IAAI;AAC9B,YAAY,qBAAqB,EAAE,QAAQ;AAC3C,YAAY,kBAAkB,EAAE,KAAK;AACrC,YAAY,CAAC,wBAAwB,GAAG,CAAC,CAAC,UAAU;AACpD,SAAS;AACT,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC;AACrC,IAAI,MAAM,UAAU,GAAG,OAAO,CAAC,MAAM;AACrC,QAAQ,IAAI,CAAC,cAAc,IAAI,CAAC,SAAS;AACzC,YAAY,OAAO,EAAE;AACrB,QAAQ,OAAO,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE;AAC/C,cAAc,EAAE,iBAAiB,EAAE,cAAc;AACjD,cAAc,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC,EAAE,GAAG,KAAK,KAAK,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;AAC/E,IAAI,CAAC,EAAE,CAAC,SAAS,EAAE,cAAc,EAAE,GAAG,CAAC,CAAC;AACxC,IAAI,QAAQA,GAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAEA,GAAI,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,SAAS,EAAE,UAAU,CAAC,eAAe,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,UAAU,EAAE,cAAc,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC;AACxN;AACA,mBAAe,MAAM,CAAC,MAAM,CAAC,UAAU,EAAE;AACzC,IAAI,IAAI,EAAE,cAAc;AACxB,CAAC,CAAC;;;;"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { createContext } from 'react';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Element the enclosing `DListGroup` renders, so each `DListGroupItem` can
|
|
5
|
+
* check that its own element is valid content for it. `undefined` outside a
|
|
6
|
+
* `DListGroup`.
|
|
7
|
+
*/
|
|
8
|
+
const ListGroupContext = createContext(undefined);
|
|
9
|
+
|
|
10
|
+
export { ListGroupContext as default };
|
|
11
|
+
//# sourceMappingURL=ListGroupContext.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ListGroupContext.js","sources":["../../../../dist-transpiled/components/DListGroup/ListGroupContext.js"],"sourcesContent":["import { createContext } from 'react';\n/**\n * Element the enclosing `DListGroup` renders, so each `DListGroupItem` can\n * check that its own element is valid content for it. `undefined` outside a\n * `DListGroup`.\n */\nconst ListGroupContext = createContext(undefined);\nexport default ListGroupContext;\n//# sourceMappingURL=ListGroupContext.js.map"],"names":[],"mappings":";;AACA;AACA;AACA;AACA;AACA;AACK,MAAC,gBAAgB,GAAG,aAAa,CAAC,SAAS;;;;"}
|
|
@@ -1,10 +1,12 @@
|
|
|
1
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { useMemo } from 'react';
|
|
1
|
+
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { useMemo, useContext } from 'react';
|
|
3
3
|
import classNames from 'classnames';
|
|
4
4
|
import DIcon from '../../DIcon/DIcon.js';
|
|
5
|
+
import ListGroupContext from '../ListGroupContext.js';
|
|
6
|
+
import warnInvalidListMarkup from './warnInvalidListMarkup.js';
|
|
5
7
|
import { useDContext } from '../../../contexts/DContext.js';
|
|
6
8
|
|
|
7
|
-
function DListGroupItem({ as = 'li', action: actionProp, active, disabled, href, onClick, color, iconStart, iconStartFamilyClass, iconStartFamilyPrefix, iconStartMaterialStyle, iconEnd, iconEndFamilyClass, iconEndFamilyPrefix, iconEndMaterialStyle, children, className, style, dataAttributes, }) {
|
|
9
|
+
function DListGroupItem({ as = 'li', action: actionProp, active, ariaCurrent = 'true', disabled, href, onClick, color, iconStart, iconStartFamilyClass, iconStartFamilyPrefix, iconStartMaterialStyle, iconEnd, iconEndFamilyClass, iconEndFamilyPrefix, iconEndMaterialStyle, children, className, style, dataAttributes, }) {
|
|
8
10
|
const { icon: { familyClass, familyPrefix, materialStyle, }, } = useDContext();
|
|
9
11
|
const Tag = useMemo(() => {
|
|
10
12
|
if (href) {
|
|
@@ -15,26 +17,42 @@ function DListGroupItem({ as = 'li', action: actionProp, active, disabled, href,
|
|
|
15
17
|
}
|
|
16
18
|
return as;
|
|
17
19
|
}, [href, as, actionProp]);
|
|
18
|
-
const
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
20
|
+
const container = useContext(ListGroupContext);
|
|
21
|
+
const isInteractive = Tag === 'a' || Tag === 'button';
|
|
22
|
+
// Inside a <ul>/<ol>, a link or button is wrapped in the <li> that carries
|
|
23
|
+
// the item styles, so the group keeps list semantics (`list > listitem >
|
|
24
|
+
// link|button`) without breaking Bootstrap's sibling selectors.
|
|
25
|
+
const isWrapped = isInteractive && (container === 'ul' || container === 'ol');
|
|
26
|
+
if (process.env.NODE_ENV !== 'production' && container === 'div' && Tag === 'li') {
|
|
27
|
+
warnInvalidListMarkup(container, Tag);
|
|
28
|
+
}
|
|
24
29
|
const generateClasses = useMemo(() => ({
|
|
25
30
|
'list-group-item': true,
|
|
26
|
-
'list-group-item-action':
|
|
31
|
+
'list-group-item-action': isInteractive || actionProp,
|
|
32
|
+
'd-list-group-item-interactive': isWrapped,
|
|
27
33
|
[`list-group-item-${color}`]: !!color,
|
|
28
34
|
active,
|
|
29
35
|
disabled,
|
|
30
|
-
}), [
|
|
31
|
-
|
|
36
|
+
}), [isInteractive, actionProp, isWrapped, active, disabled, color]);
|
|
37
|
+
// A disabled link leaves the tab order and can't be activated: without
|
|
38
|
+
// `href` and `onClick`, Enter does nothing. Dropping `href` also drops the
|
|
39
|
+
// implicit link role, so it is set back explicitly. A button uses
|
|
40
|
+
// `disabled`.
|
|
41
|
+
const interactiveProps = useMemo(() => {
|
|
32
42
|
if (Tag === 'button') {
|
|
33
|
-
return Object.assign(Object.assign({}, active && { 'aria-current':
|
|
43
|
+
return Object.assign(Object.assign(Object.assign({ type: 'button' }, onClick && { onClick }), active && { 'aria-current': ariaCurrent }), disabled && { disabled: true });
|
|
44
|
+
}
|
|
45
|
+
if (Tag === 'a') {
|
|
46
|
+
return disabled
|
|
47
|
+
? Object.assign({ role: 'link', 'aria-disabled': true, tabIndex: -1 }, active && { 'aria-current': ariaCurrent }) : Object.assign(Object.assign(Object.assign({}, href && { href }), onClick && { onClick }), active && { 'aria-current': ariaCurrent });
|
|
34
48
|
}
|
|
35
|
-
return Object.assign(Object.assign({}, active && { 'aria-current':
|
|
36
|
-
}, [Tag, active, disabled]);
|
|
37
|
-
|
|
49
|
+
return Object.assign(Object.assign(Object.assign({}, onClick && { onClick }), active && { 'aria-current': ariaCurrent }), disabled && { 'aria-disabled': true });
|
|
50
|
+
}, [Tag, href, onClick, active, ariaCurrent, disabled]);
|
|
51
|
+
const content = (jsxs(Fragment, { children: [iconStart && (jsx(DIcon, { icon: iconStart, familyClass: iconStartFamilyClass !== null && iconStartFamilyClass !== void 0 ? iconStartFamilyClass : familyClass, familyPrefix: iconStartFamilyPrefix !== null && iconStartFamilyPrefix !== void 0 ? iconStartFamilyPrefix : familyPrefix, materialStyle: iconStartMaterialStyle !== null && iconStartMaterialStyle !== void 0 ? iconStartMaterialStyle : materialStyle })), children, iconEnd && (jsx(DIcon, { icon: iconEnd, familyClass: iconEndFamilyClass !== null && iconEndFamilyClass !== void 0 ? iconEndFamilyClass : familyClass, familyPrefix: iconEndFamilyPrefix !== null && iconEndFamilyPrefix !== void 0 ? iconEndFamilyPrefix : familyPrefix, materialStyle: iconEndMaterialStyle !== null && iconEndMaterialStyle !== void 0 ? iconEndMaterialStyle : materialStyle, className: "ms-auto" }))] }));
|
|
52
|
+
if (isWrapped) {
|
|
53
|
+
return (jsx("li", { className: classNames(generateClasses, className), style: style, children: jsx(Tag, Object.assign({ className: "d-list-group-item-link" }, interactiveProps, dataAttributes, { children: content })) }));
|
|
54
|
+
}
|
|
55
|
+
return (jsx(Tag, Object.assign({ className: classNames(generateClasses, className), style: style }, interactiveProps, dataAttributes, { children: content })));
|
|
38
56
|
}
|
|
39
57
|
|
|
40
58
|
export { DListGroupItem as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DListGroupItem.js","sources":["../../../../../dist-transpiled/components/DListGroup/components/DListGroupItem.js"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { useMemo } from 'react';\nimport classNames from 'classnames';\nimport DIcon from '../../DIcon';\nimport { useDContext } from '../../../contexts';\nexport default function DListGroupItem({ as = 'li', action: actionProp, active, disabled, href, onClick, color, iconStart, iconStartFamilyClass, iconStartFamilyPrefix, iconStartMaterialStyle, iconEnd, iconEndFamilyClass, iconEndFamilyPrefix, iconEndMaterialStyle, children, className, style, dataAttributes, }) {\n const { icon: { familyClass, familyPrefix, materialStyle, }, } = useDContext();\n const Tag = useMemo(() => {\n if (href) {\n return 'a';\n }\n if (actionProp) {\n return 'button';\n }\n return as;\n }, [href, as, actionProp]);\n const
|
|
1
|
+
{"version":3,"file":"DListGroupItem.js","sources":["../../../../../dist-transpiled/components/DListGroup/components/DListGroupItem.js"],"sourcesContent":["import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { useContext, useMemo } from 'react';\nimport classNames from 'classnames';\nimport DIcon from '../../DIcon';\nimport { useDContext } from '../../../contexts';\nimport ListGroupContext from '../ListGroupContext';\nimport warnInvalidListMarkup from './warnInvalidListMarkup';\nexport default function DListGroupItem({ as = 'li', action: actionProp, active, ariaCurrent = 'true', disabled, href, onClick, color, iconStart, iconStartFamilyClass, iconStartFamilyPrefix, iconStartMaterialStyle, iconEnd, iconEndFamilyClass, iconEndFamilyPrefix, iconEndMaterialStyle, children, className, style, dataAttributes, }) {\n const { icon: { familyClass, familyPrefix, materialStyle, }, } = useDContext();\n const Tag = useMemo(() => {\n if (href) {\n return 'a';\n }\n if (actionProp) {\n return 'button';\n }\n return as;\n }, [href, as, actionProp]);\n const container = useContext(ListGroupContext);\n const isInteractive = Tag === 'a' || Tag === 'button';\n // Inside a <ul>/<ol>, a link or button is wrapped in the <li> that carries\n // the item styles, so the group keeps list semantics (`list > listitem >\n // link|button`) without breaking Bootstrap's sibling selectors.\n const isWrapped = isInteractive && (container === 'ul' || container === 'ol');\n if (process.env.NODE_ENV !== 'production' && container === 'div' && Tag === 'li') {\n warnInvalidListMarkup(container, Tag);\n }\n const generateClasses = useMemo(() => ({\n 'list-group-item': true,\n 'list-group-item-action': isInteractive || actionProp,\n 'd-list-group-item-interactive': isWrapped,\n [`list-group-item-${color}`]: !!color,\n active,\n disabled,\n }), [isInteractive, actionProp, isWrapped, active, disabled, color]);\n // A disabled link leaves the tab order and can't be activated: without\n // `href` and `onClick`, Enter does nothing. Dropping `href` also drops the\n // implicit link role, so it is set back explicitly. A button uses\n // `disabled`.\n const interactiveProps = useMemo(() => {\n if (Tag === 'button') {\n return Object.assign(Object.assign(Object.assign({ type: 'button' }, onClick && { onClick }), active && { 'aria-current': ariaCurrent }), disabled && { disabled: true });\n }\n if (Tag === 'a') {\n return disabled\n ? Object.assign({ role: 'link', 'aria-disabled': true, tabIndex: -1 }, active && { 'aria-current': ariaCurrent }) : Object.assign(Object.assign(Object.assign({}, href && { href }), onClick && { onClick }), active && { 'aria-current': ariaCurrent });\n }\n return Object.assign(Object.assign(Object.assign({}, onClick && { onClick }), active && { 'aria-current': ariaCurrent }), disabled && { 'aria-disabled': true });\n }, [Tag, href, onClick, active, ariaCurrent, disabled]);\n const content = (_jsxs(_Fragment, { children: [iconStart && (_jsx(DIcon, { icon: iconStart, familyClass: iconStartFamilyClass !== null && iconStartFamilyClass !== void 0 ? iconStartFamilyClass : familyClass, familyPrefix: iconStartFamilyPrefix !== null && iconStartFamilyPrefix !== void 0 ? iconStartFamilyPrefix : familyPrefix, materialStyle: iconStartMaterialStyle !== null && iconStartMaterialStyle !== void 0 ? iconStartMaterialStyle : materialStyle })), children, iconEnd && (_jsx(DIcon, { icon: iconEnd, familyClass: iconEndFamilyClass !== null && iconEndFamilyClass !== void 0 ? iconEndFamilyClass : familyClass, familyPrefix: iconEndFamilyPrefix !== null && iconEndFamilyPrefix !== void 0 ? iconEndFamilyPrefix : familyPrefix, materialStyle: iconEndMaterialStyle !== null && iconEndMaterialStyle !== void 0 ? iconEndMaterialStyle : materialStyle, className: \"ms-auto\" }))] }));\n if (isWrapped) {\n return (_jsx(\"li\", { className: classNames(generateClasses, className), style: style, children: _jsx(Tag, Object.assign({ className: \"d-list-group-item-link\" }, interactiveProps, dataAttributes, { children: content })) }));\n }\n return (_jsx(Tag, Object.assign({ className: classNames(generateClasses, className), style: style }, interactiveProps, dataAttributes, { children: content })));\n}\n//# sourceMappingURL=DListGroupItem.js.map"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;;;;AAOe,SAAS,cAAc,CAAC,EAAE,EAAE,GAAG,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,WAAW,GAAG,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,oBAAoB,EAAE,qBAAqB,EAAE,sBAAsB,EAAE,OAAO,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,cAAc,GAAG,EAAE;AAC7U,IAAI,MAAM,EAAE,IAAI,EAAE,EAAE,WAAW,EAAE,YAAY,EAAE,aAAa,GAAG,GAAG,GAAG,WAAW,EAAE;AAClF,IAAI,MAAM,GAAG,GAAG,OAAO,CAAC,MAAM;AAC9B,QAAQ,IAAI,IAAI,EAAE;AAClB,YAAY,OAAO,GAAG;AACtB,QAAQ;AACR,QAAQ,IAAI,UAAU,EAAE;AACxB,YAAY,OAAO,QAAQ;AAC3B,QAAQ;AACR,QAAQ,OAAO,EAAE;AACjB,IAAI,CAAC,EAAE,CAAC,IAAI,EAAE,EAAE,EAAE,UAAU,CAAC,CAAC;AAC9B,IAAI,MAAM,SAAS,GAAG,UAAU,CAAC,gBAAgB,CAAC;AAClD,IAAI,MAAM,aAAa,GAAG,GAAG,KAAK,GAAG,IAAI,GAAG,KAAK,QAAQ;AACzD;AACA;AACA;AACA,IAAI,MAAM,SAAS,GAAG,aAAa,KAAK,SAAS,KAAK,IAAI,IAAI,SAAS,KAAK,IAAI,CAAC;AACjF,IAAI,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,IAAI,SAAS,KAAK,KAAK,IAAI,GAAG,KAAK,IAAI,EAAE;AACtF,QAAQ,qBAAqB,CAAC,SAAS,EAAE,GAAG,CAAC;AAC7C,IAAI;AACJ,IAAI,MAAM,eAAe,GAAG,OAAO,CAAC,OAAO;AAC3C,QAAQ,iBAAiB,EAAE,IAAI;AAC/B,QAAQ,wBAAwB,EAAE,aAAa,IAAI,UAAU;AAC7D,QAAQ,+BAA+B,EAAE,SAAS;AAClD,QAAQ,CAAC,CAAC,gBAAgB,EAAE,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK;AAC7C,QAAQ,MAAM;AACd,QAAQ,QAAQ;AAChB,KAAK,CAAC,EAAE,CAAC,aAAa,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC;AACxE;AACA;AACA;AACA;AACA,IAAI,MAAM,gBAAgB,GAAG,OAAO,CAAC,MAAM;AAC3C,QAAQ,IAAI,GAAG,KAAK,QAAQ,EAAE;AAC9B,YAAY,OAAO,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,OAAO,IAAI,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,IAAI,EAAE,cAAc,EAAE,WAAW,EAAE,CAAC,EAAE,QAAQ,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AACrL,QAAQ;AACR,QAAQ,IAAI,GAAG,KAAK,GAAG,EAAE;AACzB,YAAY,OAAO;AACnB,kBAAkB,MAAM,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,eAAe,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,MAAM,IAAI,EAAE,cAAc,EAAE,WAAW,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,IAAI,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,IAAI,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,IAAI,EAAE,cAAc,EAAE,WAAW,EAAE,CAAC;AACxQ,QAAQ;AACR,QAAQ,OAAO,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,OAAO,IAAI,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,IAAI,EAAE,cAAc,EAAE,WAAW,EAAE,CAAC,EAAE,QAAQ,IAAI,EAAE,eAAe,EAAE,IAAI,EAAE,CAAC;AACxK,IAAI,CAAC,EAAE,CAAC,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,QAAQ,CAAC,CAAC;AAC3D,IAAI,MAAM,OAAO,IAAIA,IAAK,CAACC,QAAS,EAAE,EAAE,QAAQ,EAAE,CAAC,SAAS,KAAKC,GAAI,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,oBAAoB,KAAK,IAAI,IAAI,oBAAoB,KAAK,MAAM,GAAG,oBAAoB,GAAG,WAAW,EAAE,YAAY,EAAE,qBAAqB,KAAK,IAAI,IAAI,qBAAqB,KAAK,MAAM,GAAG,qBAAqB,GAAG,YAAY,EAAE,aAAa,EAAE,sBAAsB,KAAK,IAAI,IAAI,sBAAsB,KAAK,MAAM,GAAG,sBAAsB,GAAG,aAAa,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,OAAO,KAAKA,GAAI,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,kBAAkB,KAAK,IAAI,IAAI,kBAAkB,KAAK,MAAM,GAAG,kBAAkB,GAAG,WAAW,EAAE,YAAY,EAAE,mBAAmB,KAAK,IAAI,IAAI,mBAAmB,KAAK,MAAM,GAAG,mBAAmB,GAAG,YAAY,EAAE,aAAa,EAAE,oBAAoB,KAAK,IAAI,IAAI,oBAAoB,KAAK,MAAM,GAAG,oBAAoB,GAAG,aAAa,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;AACx3B,IAAI,IAAI,SAAS,EAAE;AACnB,QAAQ,QAAQA,GAAI,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,UAAU,CAAC,eAAe,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAEA,GAAI,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,SAAS,EAAE,wBAAwB,EAAE,EAAE,gBAAgB,EAAE,cAAc,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC;AACrO,IAAI;AACJ,IAAI,QAAQA,GAAI,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,SAAS,EAAE,UAAU,CAAC,eAAe,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,gBAAgB,EAAE,cAAc,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,CAAC;AAClK;;;;"}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Combinations already reported, keyed by container and item element, so the
|
|
3
|
+
* same mismatch only warns once per page load however many items share it.
|
|
4
|
+
*/
|
|
5
|
+
const warnedCombinations = new Set();
|
|
6
|
+
/**
|
|
7
|
+
* Warns, once per combination and only outside production builds, that a
|
|
8
|
+
* `DListGroupItem` renders an element its `DListGroup` container can't hold.
|
|
9
|
+
*
|
|
10
|
+
* Links and buttons inside a <ul>/<ol> are wrapped in an <li>, so the only
|
|
11
|
+
* invalid pair left is a plain item (an <li>) inside `as="div"`: an <li>
|
|
12
|
+
* outside of any list. It doesn't fail visibly, which is why it's reported.
|
|
13
|
+
*
|
|
14
|
+
* The `process.env.NODE_ENV` guard at the call site is what bundlers
|
|
15
|
+
* constant-fold, so the whole call — and this module — drops out of a
|
|
16
|
+
* consumer's production bundle.
|
|
17
|
+
*/
|
|
18
|
+
function warnInvalidListMarkup(container, item) {
|
|
19
|
+
const key = `${container}>${item}`;
|
|
20
|
+
if (warnedCombinations.has(key))
|
|
21
|
+
return;
|
|
22
|
+
warnedCombinations.add(key);
|
|
23
|
+
// eslint-disable-next-line no-console
|
|
24
|
+
console.warn(`[Dynamic UI] DListGroupItem: a <${item}> inside a <${container}> is invalid markup. `
|
|
25
|
+
+ 'Keep the container as a list (the default `as="ul"`, or `numbered`), or render the item '
|
|
26
|
+
+ 'as a link or button. It never appears in production builds.');
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
export { warnInvalidListMarkup as default };
|
|
30
|
+
//# sourceMappingURL=warnInvalidListMarkup.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"warnInvalidListMarkup.js","sources":["../../../../../dist-transpiled/components/DListGroup/components/warnInvalidListMarkup.js"],"sourcesContent":["/**\n * Combinations already reported, keyed by container and item element, so the\n * same mismatch only warns once per page load however many items share it.\n */\nconst warnedCombinations = new Set();\n/**\n * Warns, once per combination and only outside production builds, that a\n * `DListGroupItem` renders an element its `DListGroup` container can't hold.\n *\n * Links and buttons inside a <ul>/<ol> are wrapped in an <li>, so the only\n * invalid pair left is a plain item (an <li>) inside `as=\"div\"`: an <li>\n * outside of any list. It doesn't fail visibly, which is why it's reported.\n *\n * The `process.env.NODE_ENV` guard at the call site is what bundlers\n * constant-fold, so the whole call — and this module — drops out of a\n * consumer's production bundle.\n */\nexport default function warnInvalidListMarkup(container, item) {\n const key = `${container}>${item}`;\n if (warnedCombinations.has(key))\n return;\n warnedCombinations.add(key);\n // eslint-disable-next-line no-console\n console.warn(`[Dynamic UI] DListGroupItem: a <${item}> inside a <${container}> is invalid markup. `\n + 'Keep the container as a list (the default `as=\"ul\"`, or `numbered`), or render the item '\n + 'as a link or button. It never appears in production builds.');\n}\n//# sourceMappingURL=warnInvalidListMarkup.js.map"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,MAAM,kBAAkB,GAAG,IAAI,GAAG,EAAE;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAAS,qBAAqB,CAAC,SAAS,EAAE,IAAI,EAAE;AAC/D,IAAI,MAAM,GAAG,GAAG,CAAC,EAAE,SAAS,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC;AACtC,IAAI,IAAI,kBAAkB,CAAC,GAAG,CAAC,GAAG,CAAC;AACnC,QAAQ;AACR,IAAI,kBAAkB,CAAC,GAAG,CAAC,GAAG,CAAC;AAC/B;AACA,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC,gCAAgC,EAAE,IAAI,CAAC,YAAY,EAAE,SAAS,CAAC,qBAAqB;AACtG,UAAU;AACV,UAAU,6DAA6D,CAAC;AACxE;;;;"}
|
|
@@ -11,7 +11,7 @@ const DEFAULT_VALIDATION_MESSAGES = {
|
|
|
11
11
|
notMatch: 'The password confirmation and the new password do not match.',
|
|
12
12
|
};
|
|
13
13
|
const DEFAULT_ENABLED_CHECKS = ['uppercase', 'lowercase', 'number', 'specialChar'];
|
|
14
|
-
function DPasswordStrengthMeter({ id, label = 'Password', placeholder, value = '', name, disabled = false, invalid = false, validationMessages = DEFAULT_VALIDATION_MESSAGES, enabledChecks = DEFAULT_ENABLED_CHECKS, className, style, dataAttributes, onChange, readonly = false, }) {
|
|
14
|
+
function DPasswordStrengthMeter({ id, label = 'Password', 'aria-label': ariaLabel, placeholder, value = '', name, disabled = false, invalid = false, validationMessages = DEFAULT_VALIDATION_MESSAGES, enabledChecks = DEFAULT_ENABLED_CHECKS, className, style, dataAttributes, onChange, readonly = false, }) {
|
|
15
15
|
const [password, setPassword] = useState(value);
|
|
16
16
|
useEffect(() => {
|
|
17
17
|
setPassword(value);
|
|
@@ -20,7 +20,7 @@ function DPasswordStrengthMeter({ id, label = 'Password', placeholder, value = '
|
|
|
20
20
|
setPassword(newValue);
|
|
21
21
|
onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
|
|
22
22
|
};
|
|
23
|
-
return (jsxs("div", Object.assign({ className: className, style: style }, dataAttributes, { children: [jsx(ForwardedDInputPassword, { id: id, label: label, placeholder: placeholder, value: password, name: name, disabled: disabled, invalid: invalid, onChange: handleChange, readonly: readonly }), jsx(PasswordChecksList, { password: password, validationMessages: validationMessages, enabledChecks: enabledChecks })] })));
|
|
23
|
+
return (jsxs("div", Object.assign({ className: className, style: style }, dataAttributes, { children: [jsx(ForwardedDInputPassword, { id: id, label: label, "aria-label": ariaLabel, placeholder: placeholder, value: password, name: name, disabled: disabled, invalid: invalid, onChange: handleChange, readonly: readonly }), jsx(PasswordChecksList, { password: password, validationMessages: validationMessages, enabledChecks: enabledChecks })] })));
|
|
24
24
|
}
|
|
25
25
|
|
|
26
26
|
export { DPasswordStrengthMeter as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DPasswordStrengthMeter.js","sources":["../../../../dist-transpiled/components/DPasswordStrengthMeter/DPasswordStrengthMeter.js"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { useState, useEffect } from 'react';\nimport DInputPassword from '../DInputPassword';\nimport PasswordChecksList from './PasswordCheckList';\nconst DEFAULT_VALIDATION_MESSAGES = {\n number: 'At least one number',\n lowercaseLetter: 'At least one lowercase letter',\n uppercaseLetter: 'At least one uppercase letter',\n especialChar: 'At least one of these special characters: ~!@#$^*-_=[]{}|;,.?',\n notMatch: 'The password confirmation and the new password do not match.',\n};\nconst DEFAULT_ENABLED_CHECKS = ['uppercase', 'lowercase', 'number', 'specialChar'];\nexport default function DPasswordStrengthMeter({ id, label = 'Password', placeholder, value = '', name, disabled = false, invalid = false, validationMessages = DEFAULT_VALIDATION_MESSAGES, enabledChecks = DEFAULT_ENABLED_CHECKS, className, style, dataAttributes, onChange, readonly = false, }) {\n const [password, setPassword] = useState(value);\n useEffect(() => {\n setPassword(value);\n }, [value]);\n const handleChange = (newValue) => {\n setPassword(newValue);\n onChange === null || onChange === void 0 ? void 0 : onChange(newValue);\n };\n return (_jsxs(\"div\", Object.assign({ className: className, style: style }, dataAttributes, { children: [_jsx(DInputPassword, { id: id, label: label, placeholder: placeholder, value: password, name: name, disabled: disabled, invalid: invalid, onChange: handleChange, readonly: readonly }), _jsx(PasswordChecksList, { password: password, validationMessages: validationMessages, enabledChecks: enabledChecks })] })));\n}\n//# sourceMappingURL=DPasswordStrengthMeter.js.map"],"names":["_jsxs","_jsx","DInputPassword"],"mappings":";;;;;AAIA,MAAM,2BAA2B,GAAG;AACpC,IAAI,MAAM,EAAE,qBAAqB;AACjC,IAAI,eAAe,EAAE,+BAA+B;AACpD,IAAI,eAAe,EAAE,+BAA+B;AACpD,IAAI,YAAY,EAAE,+DAA+D;AACjF,IAAI,QAAQ,EAAE,8DAA8D;AAC5E,CAAC;AACD,MAAM,sBAAsB,GAAG,CAAC,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,aAAa,CAAC;AACnE,SAAS,sBAAsB,CAAC,EAAE,EAAE,EAAE,KAAK,GAAG,UAAU,EAAE,WAAW,EAAE,KAAK,GAAG,EAAE,EAAE,IAAI,EAAE,QAAQ,GAAG,KAAK,EAAE,OAAO,GAAG,KAAK,EAAE,kBAAkB,GAAG,2BAA2B,EAAE,aAAa,GAAG,sBAAsB,EAAE,SAAS,EAAE,KAAK,EAAE,cAAc,EAAE,QAAQ,EAAE,QAAQ,GAAG,KAAK,GAAG,EAAE;
|
|
1
|
+
{"version":3,"file":"DPasswordStrengthMeter.js","sources":["../../../../dist-transpiled/components/DPasswordStrengthMeter/DPasswordStrengthMeter.js"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { useState, useEffect } from 'react';\nimport DInputPassword from '../DInputPassword';\nimport PasswordChecksList from './PasswordCheckList';\nconst DEFAULT_VALIDATION_MESSAGES = {\n number: 'At least one number',\n lowercaseLetter: 'At least one lowercase letter',\n uppercaseLetter: 'At least one uppercase letter',\n especialChar: 'At least one of these special characters: ~!@#$^*-_=[]{}|;,.?',\n notMatch: 'The password confirmation and the new password do not match.',\n};\nconst DEFAULT_ENABLED_CHECKS = ['uppercase', 'lowercase', 'number', 'specialChar'];\nexport default function DPasswordStrengthMeter({ id, label = 'Password', 'aria-label': ariaLabel, placeholder, value = '', name, disabled = false, invalid = false, validationMessages = DEFAULT_VALIDATION_MESSAGES, enabledChecks = DEFAULT_ENABLED_CHECKS, className, style, dataAttributes, onChange, readonly = false, }) {\n const [password, setPassword] = useState(value);\n useEffect(() => {\n setPassword(value);\n }, [value]);\n const handleChange = (newValue) => {\n setPassword(newValue);\n onChange === null || onChange === void 0 ? void 0 : onChange(newValue);\n };\n return (_jsxs(\"div\", Object.assign({ className: className, style: style }, dataAttributes, { children: [_jsx(DInputPassword, { id: id, label: label, \"aria-label\": ariaLabel, placeholder: placeholder, value: password, name: name, disabled: disabled, invalid: invalid, onChange: handleChange, readonly: readonly }), _jsx(PasswordChecksList, { password: password, validationMessages: validationMessages, enabledChecks: enabledChecks })] })));\n}\n//# sourceMappingURL=DPasswordStrengthMeter.js.map"],"names":["_jsxs","_jsx","DInputPassword"],"mappings":";;;;;AAIA,MAAM,2BAA2B,GAAG;AACpC,IAAI,MAAM,EAAE,qBAAqB;AACjC,IAAI,eAAe,EAAE,+BAA+B;AACpD,IAAI,eAAe,EAAE,+BAA+B;AACpD,IAAI,YAAY,EAAE,+DAA+D;AACjF,IAAI,QAAQ,EAAE,8DAA8D;AAC5E,CAAC;AACD,MAAM,sBAAsB,GAAG,CAAC,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,aAAa,CAAC;AACnE,SAAS,sBAAsB,CAAC,EAAE,EAAE,EAAE,KAAK,GAAG,UAAU,EAAE,YAAY,EAAE,SAAS,EAAE,WAAW,EAAE,KAAK,GAAG,EAAE,EAAE,IAAI,EAAE,QAAQ,GAAG,KAAK,EAAE,OAAO,GAAG,KAAK,EAAE,kBAAkB,GAAG,2BAA2B,EAAE,aAAa,GAAG,sBAAsB,EAAE,SAAS,EAAE,KAAK,EAAE,cAAc,EAAE,QAAQ,EAAE,QAAQ,GAAG,KAAK,GAAG,EAAE;AAC/T,IAAI,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AACnD,IAAI,SAAS,CAAC,MAAM;AACpB,QAAQ,WAAW,CAAC,KAAK,CAAC;AAC1B,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;AACf,IAAI,MAAM,YAAY,GAAG,CAAC,QAAQ,KAAK;AACvC,QAAQ,WAAW,CAAC,QAAQ,CAAC;AAC7B,QAAQ,QAAQ,KAAK,IAAI,IAAI,QAAQ,KAAK,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAC,QAAQ,CAAC;AAC9E,IAAI,CAAC;AACL,IAAI,QAAQA,IAAK,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,cAAc,EAAE,EAAE,QAAQ,EAAE,CAACC,GAAI,CAACC,uBAAc,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,WAAW,EAAE,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,EAAED,GAAI,CAAC,kBAAkB,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,aAAa,EAAE,aAAa,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;AACzb;;;;"}
|
|
@@ -2,14 +2,20 @@ import { jsx } from 'react/jsx-runtime';
|
|
|
2
2
|
import classNames from 'classnames';
|
|
3
3
|
import { useMemo } from 'react';
|
|
4
4
|
|
|
5
|
-
function DProgress({ className, style, currentValue, minValue = 0, maxValue = 100, hideCurrentValue = false, enableStripedAnimation = false, height, dataAttributes, }) {
|
|
6
|
-
const percentage = useMemo(() =>
|
|
5
|
+
function DProgress({ className, style, currentValue, minValue = 0, maxValue = 100, hideCurrentValue = false, enableStripedAnimation = false, height, ariaLabel, ariaLabelledBy, dataAttributes, }) {
|
|
6
|
+
const percentage = useMemo(() => {
|
|
7
|
+
const range = maxValue - minValue;
|
|
8
|
+
if (range <= 0) {
|
|
9
|
+
return 0;
|
|
10
|
+
}
|
|
11
|
+
return Math.round(((currentValue - minValue) * 100) / range);
|
|
12
|
+
}, [currentValue, minValue, maxValue]);
|
|
7
13
|
const formatProgress = useMemo(() => `${percentage}%`, [percentage]);
|
|
8
14
|
const generateClasses = useMemo(() => ({
|
|
9
15
|
'progress-bar': true,
|
|
10
16
|
'progress-bar-striped progress-bar-animated': enableStripedAnimation,
|
|
11
17
|
}), [enableStripedAnimation]);
|
|
12
|
-
return (jsx("div", Object.assign({ className: classNames('progress', className), style: Object.assign({ height }, style) }, dataAttributes, { children: jsx("div", { className: classNames(generateClasses), role: "progressbar", "aria-label":
|
|
18
|
+
return (jsx("div", Object.assign({ className: classNames('progress', className), style: Object.assign({ height }, style) }, dataAttributes, { children: jsx("div", { className: classNames(generateClasses), role: "progressbar", "aria-label": ariaLabelledBy ? undefined : (ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : 'Progress bar'), "aria-labelledby": ariaLabelledBy, style: { width: formatProgress }, "aria-valuenow": currentValue, "aria-valuemin": minValue, "aria-valuemax": maxValue, children: !hideCurrentValue && formatProgress }) })));
|
|
13
19
|
}
|
|
14
20
|
|
|
15
21
|
export { DProgress as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DProgress.js","sources":["../../../../dist-transpiled/components/DProgress/DProgress.js"],"sourcesContent":["import { jsx as _jsx } from \"react/jsx-runtime\";\nimport classNames from 'classnames';\nimport { useMemo } from 'react';\nexport default function DProgress({ className, style, currentValue, minValue = 0, maxValue = 100, hideCurrentValue = false, enableStripedAnimation = false, height, dataAttributes, }) {\n const percentage = useMemo(() => (Math.round((currentValue * 100) /
|
|
1
|
+
{"version":3,"file":"DProgress.js","sources":["../../../../dist-transpiled/components/DProgress/DProgress.js"],"sourcesContent":["import { jsx as _jsx } from \"react/jsx-runtime\";\nimport classNames from 'classnames';\nimport { useMemo } from 'react';\nexport default function DProgress({ className, style, currentValue, minValue = 0, maxValue = 100, hideCurrentValue = false, enableStripedAnimation = false, height, ariaLabel, ariaLabelledBy, dataAttributes, }) {\n const percentage = useMemo(() => {\n const range = maxValue - minValue;\n if (range <= 0) {\n return 0;\n }\n return Math.round(((currentValue - minValue) * 100) / range);\n }, [currentValue, minValue, maxValue]);\n const formatProgress = useMemo(() => `${percentage}%`, [percentage]);\n const generateClasses = useMemo(() => ({\n 'progress-bar': true,\n 'progress-bar-striped progress-bar-animated': enableStripedAnimation,\n }), [enableStripedAnimation]);\n return (_jsx(\"div\", Object.assign({ className: classNames('progress', className), style: Object.assign({ height }, style) }, dataAttributes, { children: _jsx(\"div\", { className: classNames(generateClasses), role: \"progressbar\", \"aria-label\": ariaLabelledBy ? undefined : (ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : 'Progress bar'), \"aria-labelledby\": ariaLabelledBy, style: { width: formatProgress }, \"aria-valuenow\": currentValue, \"aria-valuemin\": minValue, \"aria-valuemax\": maxValue, children: !hideCurrentValue && formatProgress }) })));\n}\n//# sourceMappingURL=DProgress.js.map"],"names":["_jsx"],"mappings":";;;;AAGe,SAAS,SAAS,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,YAAY,EAAE,QAAQ,GAAG,CAAC,EAAE,QAAQ,GAAG,GAAG,EAAE,gBAAgB,GAAG,KAAK,EAAE,sBAAsB,GAAG,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,cAAc,GAAG,EAAE;AAClN,IAAI,MAAM,UAAU,GAAG,OAAO,CAAC,MAAM;AACrC,QAAQ,MAAM,KAAK,GAAG,QAAQ,GAAG,QAAQ;AACzC,QAAQ,IAAI,KAAK,IAAI,CAAC,EAAE;AACxB,YAAY,OAAO,CAAC;AACpB,QAAQ;AACR,QAAQ,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,YAAY,GAAG,QAAQ,IAAI,GAAG,IAAI,KAAK,CAAC;AACpE,IAAI,CAAC,EAAE,CAAC,YAAY,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;AAC1C,IAAI,MAAM,cAAc,GAAG,OAAO,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC;AACxE,IAAI,MAAM,eAAe,GAAG,OAAO,CAAC,OAAO;AAC3C,QAAQ,cAAc,EAAE,IAAI;AAC5B,QAAQ,4CAA4C,EAAE,sBAAsB;AAC5E,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAAC,CAAC;AACjC,IAAI,QAAQA,GAAI,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,SAAS,EAAE,UAAU,CAAC,UAAU,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,MAAM,EAAE,EAAE,KAAK,CAAC,EAAE,EAAE,cAAc,EAAE,EAAE,QAAQ,EAAEA,GAAI,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,UAAU,CAAC,eAAe,CAAC,EAAE,IAAI,EAAE,aAAa,EAAE,YAAY,EAAE,cAAc,GAAG,SAAS,IAAI,SAAS,KAAK,IAAI,IAAI,SAAS,KAAK,MAAM,GAAG,SAAS,GAAG,cAAc,CAAC,EAAE,iBAAiB,EAAE,cAAc,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,EAAE,eAAe,EAAE,YAAY,EAAE,eAAe,EAAE,QAAQ,EAAE,eAAe,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,gBAAgB,IAAI,cAAc,EAAE,CAAC,EAAE,CAAC,CAAC;AAC5iB;;;;"}
|
|
@@ -15,25 +15,53 @@ import DSelectOptionEmoji from './components/DSelectOptionEmoji.js';
|
|
|
15
15
|
import DSelectSingleValueEmoji from './components/DSelectSingleValueEmoji.js';
|
|
16
16
|
import DSelectSingleValueEmojiText from './components/DSelectSingleValueEmojiText.js';
|
|
17
17
|
import DSelectPlaceholder from './components/DSelectPlaceholder.js';
|
|
18
|
+
import createAriaGuidance from './createAriaGuidance.js';
|
|
19
|
+
import DFormLabel from '../internal/DFormLabel.js';
|
|
20
|
+
import hasLabelContent from '../../utils/hasLabelContent.js';
|
|
21
|
+
import isTextLabel from '../../utils/isTextLabel.js';
|
|
22
|
+
import warnLabelUsage from '../../utils/warnLabelUsage.js';
|
|
18
23
|
|
|
19
24
|
function DSelect(_a) {
|
|
20
|
-
var { id: idProp, className, style, label, hint, iconFamilyClass, iconFamilyPrefix, iconStart, iconStartFamilyClass, iconStartFamilyPrefix, iconStartAriaLabel, iconStartTabIndex, iconEnd, iconEndFamilyClass, iconEndFamilyPrefix, iconEndAriaLabel, iconEndTabIndex, invalid, valid, menuWithMaxContent = false, disabled, clearable, loading, floatingLabel = false, rtl, searchable, multi, components, defaultValue, placeholder, onIconStartClick, onIconEndClick, dataAttributes, ariaLabel
|
|
25
|
+
var { id: idProp, inputId: inputIdProp, className, style, label, hint, iconFamilyClass, iconFamilyPrefix, iconStart, iconStartFamilyClass, iconStartFamilyPrefix, iconStartAriaLabel, iconStartTabIndex, iconEnd, iconEndFamilyClass, iconEndFamilyPrefix, iconEndAriaLabel, iconEndTabIndex, invalid, valid, menuWithMaxContent = false, disabled, clearable, loading, floatingLabel = false, rtl, searchable, multi, components, defaultValue, placeholder, onIconStartClick, onIconEndClick, dataAttributes, ariaLabel, ariaLiveMessages } = _a, props = __rest(_a, ["id", "inputId", "className", "style", "label", "hint", "iconFamilyClass", "iconFamilyPrefix", "iconStart", "iconStartFamilyClass", "iconStartFamilyPrefix", "iconStartAriaLabel", "iconStartTabIndex", "iconEnd", "iconEndFamilyClass", "iconEndFamilyPrefix", "iconEndAriaLabel", "iconEndTabIndex", "invalid", "valid", "menuWithMaxContent", "disabled", "clearable", "loading", "floatingLabel", "rtl", "searchable", "multi", "components", "defaultValue", "placeholder", "onIconStartClick", "onIconEndClick", "dataAttributes", "ariaLabel", "ariaLiveMessages"]);
|
|
21
26
|
const innerId = useId();
|
|
22
27
|
const id = useMemo(() => idProp || innerId, [idProp, innerId]);
|
|
28
|
+
// The `<label>` must point at the element react-select renders the input
|
|
29
|
+
// with, so an explicit `inputId` wins over `id` for both.
|
|
30
|
+
const inputId = inputIdProp || id;
|
|
31
|
+
// A text label or `aria-labelledby` names the control without going through
|
|
32
|
+
// `aria-label`, which is all react-select's focus announcement reads, so it
|
|
33
|
+
// is handed those names explicitly. Messages passed by the consumer still
|
|
34
|
+
// take precedence.
|
|
35
|
+
const textLabel = hasLabelContent(label) && isTextLabel(label) ? String(label) : undefined;
|
|
36
|
+
const labelledBy = props['aria-labelledby'];
|
|
37
|
+
const liveMessages = useMemo(() => (textLabel || labelledBy
|
|
38
|
+
? Object.assign({ guidance: createAriaGuidance({ labelledBy, label: textLabel }) }, ariaLiveMessages) : ariaLiveMessages), [textLabel, labelledBy, ariaLiveMessages]);
|
|
23
39
|
const handleOnIconStartClick = useCallback(() => {
|
|
24
40
|
onIconStartClick === null || onIconStartClick === void 0 ? void 0 : onIconStartClick(defaultValue);
|
|
25
41
|
}, [onIconStartClick, defaultValue]);
|
|
26
42
|
const handleOnIconEndClick = useCallback(() => {
|
|
27
43
|
onIconEndClick === null || onIconEndClick === void 0 ? void 0 : onIconEndClick(defaultValue);
|
|
28
44
|
}, [onIconEndClick, defaultValue]);
|
|
45
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
46
|
+
warnLabelUsage({
|
|
47
|
+
component: 'DSelect',
|
|
48
|
+
label,
|
|
49
|
+
// `{...props}` is spread after `ariaLabel`, so a native `aria-label` in it
|
|
50
|
+
// is the one that reaches the input, even when it is `undefined`.
|
|
51
|
+
hasAccessibleName: !!('aria-label' in props ? props['aria-label'] : ariaLabel)
|
|
52
|
+
|| !!labelledBy,
|
|
53
|
+
accessibleNameProp: 'ariaLabel',
|
|
54
|
+
floatingLabel,
|
|
55
|
+
});
|
|
56
|
+
}
|
|
29
57
|
return (jsxs("div", Object.assign({ className: classNames('d-select', className, {
|
|
30
58
|
'd-select-floating': floatingLabel,
|
|
31
59
|
disabled: disabled || loading,
|
|
32
|
-
}), style: style }, dataAttributes, { children: [label && (jsx(
|
|
60
|
+
}), style: style }, dataAttributes, { children: [hasLabelContent(label) && (jsx(DFormLabel, { htmlFor: inputId, children: label })), jsxs("div", { className: classNames({
|
|
33
61
|
'input-group': true,
|
|
34
62
|
'has-validation': invalid,
|
|
35
63
|
disabled: disabled || loading,
|
|
36
|
-
}), children: [iconStart && (jsx("button", { type: "button", className: "input-group-text", id: `${id}Start`, onClick: handleOnIconStartClick, disabled: disabled || loading, "aria-label": iconStartAriaLabel, tabIndex: iconStartTabIndex, children: jsx(DIcon, { icon: iconStart, familyClass: iconStartFamilyClass, familyPrefix: iconStartFamilyPrefix }) })), jsx(Select, Object.assign({ id: `${id}Container`, inputId:
|
|
64
|
+
}), children: [iconStart && (jsx("button", { type: "button", className: "input-group-text", id: `${id}Start`, onClick: handleOnIconStartClick, disabled: disabled || loading, "aria-label": iconStartAriaLabel, tabIndex: iconStartTabIndex, children: jsx(DIcon, { icon: iconStart, familyClass: iconStartFamilyClass, familyPrefix: iconStartFamilyPrefix }) })), jsx(Select, Object.assign({ id: `${id}Container`, inputId: inputId, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (hasLabelContent(label) || props['aria-labelledby'] ? undefined : 'Search for an option'), ariaLiveMessages: liveMessages, styles: {
|
|
37
65
|
control: (base) => (Object.assign(Object.assign({}, base), { minHeight: 'unset' })),
|
|
38
66
|
container: (base) => (Object.assign(Object.assign({}, base), { flex: 1 })),
|
|
39
67
|
menu: (base) => (Object.assign(Object.assign({}, base), { width: menuWithMaxContent ? 'max-context' : '100%', zIndex: 1000 })),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DSelect.js","sources":["../../../../dist-transpiled/components/DSelect/DSelect.js"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport Select from 'react-select';\nimport { useCallback, useId, useMemo } from 'react';\nimport classNames from 'classnames';\nimport DIcon from '../DIcon';\nimport DSelectOptionCheck from './components/DSelectOptionCheck';\nimport DSelectOptionIcon from './components/DSelectOptionIcon';\nimport DSelectSingleValueIconText from './components/DSelectSingleValueIconText';\nimport DSelectDropdownIndicator from './components/DSelectDropdownIndicator';\nimport DSelectClearIndicator from './components/DSelectClearIndicator';\nimport DSelectMultiValueRemove from './components/DSelectMultiValueRemove';\nimport DSelectLoadingIndicator from './components/DSelectLoadingIndicator';\nimport DSelectOptionEmoji from './components/DSelectOptionEmoji';\nimport DSelectSingleValueEmoji from './components/DSelectSingleValueEmoji';\nimport DSelectSingleValueEmojiText from './components/DSelectSingleValueEmojiText';\nimport DSelectPlaceholder from './components/DSelectPlaceholder';\nfunction DSelect(_a) {\n var { id: idProp, className, style, label, hint, iconFamilyClass, iconFamilyPrefix, iconStart, iconStartFamilyClass, iconStartFamilyPrefix, iconStartAriaLabel, iconStartTabIndex, iconEnd, iconEndFamilyClass, iconEndFamilyPrefix, iconEndAriaLabel, iconEndTabIndex, invalid, valid, menuWithMaxContent = false, disabled, clearable, loading, floatingLabel = false, rtl, searchable, multi, components, defaultValue, placeholder, onIconStartClick, onIconEndClick, dataAttributes, ariaLabel = 'Search for an option' } = _a, props = __rest(_a, [\"id\", \"className\", \"style\", \"label\", \"hint\", \"iconFamilyClass\", \"iconFamilyPrefix\", \"iconStart\", \"iconStartFamilyClass\", \"iconStartFamilyPrefix\", \"iconStartAriaLabel\", \"iconStartTabIndex\", \"iconEnd\", \"iconEndFamilyClass\", \"iconEndFamilyPrefix\", \"iconEndAriaLabel\", \"iconEndTabIndex\", \"invalid\", \"valid\", \"menuWithMaxContent\", \"disabled\", \"clearable\", \"loading\", \"floatingLabel\", \"rtl\", \"searchable\", \"multi\", \"components\", \"defaultValue\", \"placeholder\", \"onIconStartClick\", \"onIconEndClick\", \"dataAttributes\", \"ariaLabel\"]);\n const innerId = useId();\n const id = useMemo(() => idProp || innerId, [idProp, innerId]);\n const handleOnIconStartClick = useCallback(() => {\n onIconStartClick === null || onIconStartClick === void 0 ? void 0 : onIconStartClick(defaultValue);\n }, [onIconStartClick, defaultValue]);\n const handleOnIconEndClick = useCallback(() => {\n onIconEndClick === null || onIconEndClick === void 0 ? void 0 : onIconEndClick(defaultValue);\n }, [onIconEndClick, defaultValue]);\n return (_jsxs(\"div\", Object.assign({ className: classNames('d-select', className, {\n 'd-select-floating': floatingLabel,\n disabled: disabled || loading,\n }), style: style }, dataAttributes, { children: [label && (_jsx(\"label\", { htmlFor: id, children: label })), _jsxs(\"div\", { className: classNames({\n 'input-group': true,\n 'has-validation': invalid,\n disabled: disabled || loading,\n }), children: [iconStart && (_jsx(\"button\", { type: \"button\", className: \"input-group-text\", id: `${id}Start`, onClick: handleOnIconStartClick, disabled: disabled || loading, \"aria-label\": iconStartAriaLabel, tabIndex: iconStartTabIndex, children: _jsx(DIcon, { icon: iconStart, familyClass: iconStartFamilyClass, familyPrefix: iconStartFamilyPrefix }) })), _jsx(Select, Object.assign({ id: `${id}Container`, inputId: id, \"aria-label\": ariaLabel, styles: {\n control: (base) => (Object.assign(Object.assign({}, base), { minHeight: 'unset' })),\n container: (base) => (Object.assign(Object.assign({}, base), { flex: 1 })),\n menu: (base) => (Object.assign(Object.assign({}, base), { width: menuWithMaxContent ? 'max-context' : '100%', zIndex: 1000 })),\n }, className: classNames('d-select-component', {\n 'is-invalid': invalid,\n 'is-valid': valid,\n }), classNamePrefix: \"d-select\", isDisabled: disabled || loading, isClearable: clearable, isLoading: loading, isRtl: rtl, isSearchable: searchable, isMulti: multi, defaultValue: defaultValue, placeholder: floatingLabel ? '' : placeholder, unstyled: true, components: Object.assign({ Placeholder: DSelectPlaceholder, DropdownIndicator: DSelectDropdownIndicator, ClearIndicator: DSelectClearIndicator, MultiValueRemove: DSelectMultiValueRemove, LoadingIndicator: DSelectLoadingIndicator }, components) }, props)), (iconEnd && !loading) && (_jsx(\"button\", { type: \"button\", className: \"input-group-text\", id: `${id}End`, onClick: handleOnIconEndClick, disabled: disabled || loading, \"aria-label\": iconEndAriaLabel, tabIndex: iconEndTabIndex, children: iconEnd && (_jsx(DIcon, { icon: iconEnd, familyClass: iconEndFamilyClass, familyPrefix: iconEndFamilyPrefix })) }))] }), hint && (_jsx(\"div\", { className: \"form-text\", id: `${id}Hint`, children: hint }))] })));\n}\nexport default Object.assign(DSelect, {\n OptionCheck: DSelectOptionCheck,\n OptionIcon: DSelectOptionIcon,\n SingleValueIconText: DSelectSingleValueIconText,\n DropdownIndicator: DSelectDropdownIndicator,\n ClearIndicator: DSelectClearIndicator,\n MultiValueRemove: DSelectMultiValueRemove,\n LoadingIndicator: DSelectLoadingIndicator,\n OptionEmoji: DSelectOptionEmoji,\n SingleValueEmoji: DSelectSingleValueEmoji,\n SingleValueEmojiText: DSelectSingleValueEmojiText,\n Placeholder: DSelectPlaceholder,\n});\n//# sourceMappingURL=DSelect.js.map"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;AAiBA,SAAS,OAAO,CAAC,EAAE,EAAE;AACrB,IAAI,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,eAAe,EAAE,gBAAgB,EAAE,SAAS,EAAE,oBAAoB,EAAE,qBAAqB,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,OAAO,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,eAAe,EAAE,OAAO,EAAE,KAAK,EAAE,kBAAkB,GAAG,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,aAAa,GAAG,KAAK,EAAE,GAAG,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,WAAW,EAAE,gBAAgB,EAAE,cAAc,EAAE,cAAc,EAAE,SAAS,GAAG,sBAAsB,EAAE,GAAG,EAAE,EAAE,KAAK,GAAG,MAAM,CAAC,EAAE,EAAE,CAAC,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,WAAW,EAAE,sBAAsB,EAAE,uBAAuB,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,SAAS,EAAE,oBAAoB,EAAE,qBAAqB,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,SAAS,EAAE,OAAO,EAAE,oBAAoB,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,EAAE,eAAe,EAAE,KAAK,EAAE,YAAY,EAAE,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,aAAa,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,WAAW,CAAC,CAAC;AACxiC,IAAI,MAAM,OAAO,GAAG,KAAK,EAAE;AAC3B,IAAI,MAAM,EAAE,GAAG,OAAO,CAAC,MAAM,MAAM,IAAI,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAClE,IAAI,MAAM,sBAAsB,GAAG,WAAW,CAAC,MAAM;AACrD,QAAQ,gBAAgB,KAAK,IAAI,IAAI,gBAAgB,KAAK,MAAM,GAAG,MAAM,GAAG,gBAAgB,CAAC,YAAY,CAAC;AAC1G,IAAI,CAAC,EAAE,CAAC,gBAAgB,EAAE,YAAY,CAAC,CAAC;AACxC,IAAI,MAAM,oBAAoB,GAAG,WAAW,CAAC,MAAM;AACnD,QAAQ,cAAc,KAAK,IAAI,IAAI,cAAc,KAAK,MAAM,GAAG,MAAM,GAAG,cAAc,CAAC,YAAY,CAAC;AACpG,IAAI,CAAC,EAAE,CAAC,cAAc,EAAE,YAAY,CAAC,CAAC;AACtC,IAAI,QAAQA,IAAK,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,SAAS,EAAE,UAAU,CAAC,UAAU,EAAE,SAAS,EAAE;AACtF,YAAY,mBAAmB,EAAE,aAAa;AAC9C,YAAY,QAAQ,EAAE,QAAQ,IAAI,OAAO;AACzC,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,cAAc,EAAE,EAAE,QAAQ,EAAE,CAAC,KAAK,KAAKC,GAAI,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC,EAAED,IAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,UAAU,CAAC;AAC1J,oBAAoB,aAAa,EAAE,IAAI;AACvC,oBAAoB,gBAAgB,EAAE,OAAO;AAC7C,oBAAoB,QAAQ,EAAE,QAAQ,IAAI,OAAO;AACjD,iBAAiB,CAAC,EAAE,QAAQ,EAAE,CAAC,SAAS,KAAKC,GAAI,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,kBAAkB,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,sBAAsB,EAAE,QAAQ,EAAE,QAAQ,IAAI,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,QAAQ,EAAE,iBAAiB,EAAE,QAAQ,EAAEA,GAAI,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,oBAAoB,EAAE,YAAY,EAAE,qBAAqB,EAAE,CAAC,EAAE,CAAC,CAAC,EAAEA,GAAI,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,EAAE;AACvd,4BAA4B,OAAO,EAAE,CAAC,IAAI,MAAM,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,CAAC;AAC/G,4BAA4B,SAAS,EAAE,CAAC,IAAI,MAAM,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC;AACtG,4BAA4B,IAAI,EAAE,CAAC,IAAI,MAAM,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,KAAK,EAAE,kBAAkB,GAAG,aAAa,GAAG,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;AAC1J,yBAAyB,EAAE,SAAS,EAAE,UAAU,CAAC,oBAAoB,EAAE;AACvE,4BAA4B,YAAY,EAAE,OAAO;AACjD,4BAA4B,UAAU,EAAE,KAAK;AAC7C,yBAAyB,CAAC,EAAE,eAAe,EAAE,UAAU,EAAE,UAAU,EAAE,QAAQ,IAAI,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,EAAE,YAAY,EAAE,UAAU,EAAE,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,aAAa,GAAG,EAAE,GAAG,WAAW,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,WAAW,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,wBAAwB,EAAE,cAAc,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,uBAAuB,EAAE,gBAAgB,EAAE,uBAAuB,EAAE,EAAE,UAAU,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,OAAO,IAAI,CAAC,OAAO,MAAMA,GAAI,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,kBAAkB,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,EAAE,OAAO,EAAE,oBAAoB,EAAE,QAAQ,EAAE,QAAQ,IAAI,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,QAAQ,EAAE,eAAe,EAAE,QAAQ,EAAE,OAAO,KAAKA,GAAI,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,YAAY,EAAE,mBAAmB,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,IAAI,KAAKA,GAAI,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;AACr9B;AACA,gBAAe,MAAM,CAAC,MAAM,CAAC,OAAO,EAAE;AACtC,IAAI,WAAW,EAAE,kBAAkB;AACnC,IAAI,UAAU,EAAE,iBAAiB;AACjC,IAAI,mBAAmB,EAAE,0BAA0B;AACnD,IAAI,iBAAiB,EAAE,wBAAwB;AAC/C,IAAI,cAAc,EAAE,qBAAqB;AACzC,IAAI,gBAAgB,EAAE,uBAAuB;AAC7C,IAAI,gBAAgB,EAAE,uBAAuB;AAC7C,IAAI,WAAW,EAAE,kBAAkB;AACnC,IAAI,gBAAgB,EAAE,uBAAuB;AAC7C,IAAI,oBAAoB,EAAE,2BAA2B;AACrD,IAAI,WAAW,EAAE,kBAAkB;AACnC,CAAC,CAAC;;;;"}
|
|
1
|
+
{"version":3,"file":"DSelect.js","sources":["../../../../dist-transpiled/components/DSelect/DSelect.js"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport Select from 'react-select';\nimport { useCallback, useId, useMemo } from 'react';\nimport classNames from 'classnames';\nimport DIcon from '../DIcon';\nimport DSelectOptionCheck from './components/DSelectOptionCheck';\nimport DSelectOptionIcon from './components/DSelectOptionIcon';\nimport DSelectSingleValueIconText from './components/DSelectSingleValueIconText';\nimport DSelectDropdownIndicator from './components/DSelectDropdownIndicator';\nimport DSelectClearIndicator from './components/DSelectClearIndicator';\nimport DSelectMultiValueRemove from './components/DSelectMultiValueRemove';\nimport DSelectLoadingIndicator from './components/DSelectLoadingIndicator';\nimport DSelectOptionEmoji from './components/DSelectOptionEmoji';\nimport DSelectSingleValueEmoji from './components/DSelectSingleValueEmoji';\nimport DSelectSingleValueEmojiText from './components/DSelectSingleValueEmojiText';\nimport DSelectPlaceholder from './components/DSelectPlaceholder';\nimport createAriaGuidance from './createAriaGuidance';\nimport DFormLabel from '../internal/DFormLabel';\nimport hasLabelContent from '../../utils/hasLabelContent';\nimport isTextLabel from '../../utils/isTextLabel';\nimport warnLabelUsage from '../../utils/warnLabelUsage';\nfunction DSelect(_a) {\n var { id: idProp, inputId: inputIdProp, className, style, label, hint, iconFamilyClass, iconFamilyPrefix, iconStart, iconStartFamilyClass, iconStartFamilyPrefix, iconStartAriaLabel, iconStartTabIndex, iconEnd, iconEndFamilyClass, iconEndFamilyPrefix, iconEndAriaLabel, iconEndTabIndex, invalid, valid, menuWithMaxContent = false, disabled, clearable, loading, floatingLabel = false, rtl, searchable, multi, components, defaultValue, placeholder, onIconStartClick, onIconEndClick, dataAttributes, ariaLabel, ariaLiveMessages } = _a, props = __rest(_a, [\"id\", \"inputId\", \"className\", \"style\", \"label\", \"hint\", \"iconFamilyClass\", \"iconFamilyPrefix\", \"iconStart\", \"iconStartFamilyClass\", \"iconStartFamilyPrefix\", \"iconStartAriaLabel\", \"iconStartTabIndex\", \"iconEnd\", \"iconEndFamilyClass\", \"iconEndFamilyPrefix\", \"iconEndAriaLabel\", \"iconEndTabIndex\", \"invalid\", \"valid\", \"menuWithMaxContent\", \"disabled\", \"clearable\", \"loading\", \"floatingLabel\", \"rtl\", \"searchable\", \"multi\", \"components\", \"defaultValue\", \"placeholder\", \"onIconStartClick\", \"onIconEndClick\", \"dataAttributes\", \"ariaLabel\", \"ariaLiveMessages\"]);\n const innerId = useId();\n const id = useMemo(() => idProp || innerId, [idProp, innerId]);\n // The `<label>` must point at the element react-select renders the input\n // with, so an explicit `inputId` wins over `id` for both.\n const inputId = inputIdProp || id;\n // A text label or `aria-labelledby` names the control without going through\n // `aria-label`, which is all react-select's focus announcement reads, so it\n // is handed those names explicitly. Messages passed by the consumer still\n // take precedence.\n const textLabel = hasLabelContent(label) && isTextLabel(label) ? String(label) : undefined;\n const labelledBy = props['aria-labelledby'];\n const liveMessages = useMemo(() => (textLabel || labelledBy\n ? Object.assign({ guidance: createAriaGuidance({ labelledBy, label: textLabel }) }, ariaLiveMessages) : ariaLiveMessages), [textLabel, labelledBy, ariaLiveMessages]);\n const handleOnIconStartClick = useCallback(() => {\n onIconStartClick === null || onIconStartClick === void 0 ? void 0 : onIconStartClick(defaultValue);\n }, [onIconStartClick, defaultValue]);\n const handleOnIconEndClick = useCallback(() => {\n onIconEndClick === null || onIconEndClick === void 0 ? void 0 : onIconEndClick(defaultValue);\n }, [onIconEndClick, defaultValue]);\n if (process.env.NODE_ENV !== 'production') {\n warnLabelUsage({\n component: 'DSelect',\n label,\n // `{...props}` is spread after `ariaLabel`, so a native `aria-label` in it\n // is the one that reaches the input, even when it is `undefined`.\n hasAccessibleName: !!('aria-label' in props ? props['aria-label'] : ariaLabel)\n || !!labelledBy,\n accessibleNameProp: 'ariaLabel',\n floatingLabel,\n });\n }\n return (_jsxs(\"div\", Object.assign({ className: classNames('d-select', className, {\n 'd-select-floating': floatingLabel,\n disabled: disabled || loading,\n }), style: style }, dataAttributes, { children: [hasLabelContent(label) && (_jsx(DFormLabel, { htmlFor: inputId, children: label })), _jsxs(\"div\", { className: classNames({\n 'input-group': true,\n 'has-validation': invalid,\n disabled: disabled || loading,\n }), children: [iconStart && (_jsx(\"button\", { type: \"button\", className: \"input-group-text\", id: `${id}Start`, onClick: handleOnIconStartClick, disabled: disabled || loading, \"aria-label\": iconStartAriaLabel, tabIndex: iconStartTabIndex, children: _jsx(DIcon, { icon: iconStart, familyClass: iconStartFamilyClass, familyPrefix: iconStartFamilyPrefix }) })), _jsx(Select, Object.assign({ id: `${id}Container`, inputId: inputId, \"aria-label\": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (hasLabelContent(label) || props['aria-labelledby'] ? undefined : 'Search for an option'), ariaLiveMessages: liveMessages, styles: {\n control: (base) => (Object.assign(Object.assign({}, base), { minHeight: 'unset' })),\n container: (base) => (Object.assign(Object.assign({}, base), { flex: 1 })),\n menu: (base) => (Object.assign(Object.assign({}, base), { width: menuWithMaxContent ? 'max-context' : '100%', zIndex: 1000 })),\n }, className: classNames('d-select-component', {\n 'is-invalid': invalid,\n 'is-valid': valid,\n }), classNamePrefix: \"d-select\", isDisabled: disabled || loading, isClearable: clearable, isLoading: loading, isRtl: rtl, isSearchable: searchable, isMulti: multi, defaultValue: defaultValue, placeholder: floatingLabel ? '' : placeholder, unstyled: true, components: Object.assign({ Placeholder: DSelectPlaceholder, DropdownIndicator: DSelectDropdownIndicator, ClearIndicator: DSelectClearIndicator, MultiValueRemove: DSelectMultiValueRemove, LoadingIndicator: DSelectLoadingIndicator }, components) }, props)), (iconEnd && !loading) && (_jsx(\"button\", { type: \"button\", className: \"input-group-text\", id: `${id}End`, onClick: handleOnIconEndClick, disabled: disabled || loading, \"aria-label\": iconEndAriaLabel, tabIndex: iconEndTabIndex, children: iconEnd && (_jsx(DIcon, { icon: iconEnd, familyClass: iconEndFamilyClass, familyPrefix: iconEndFamilyPrefix })) }))] }), hint && (_jsx(\"div\", { className: \"form-text\", id: `${id}Hint`, children: hint }))] })));\n}\nexport default Object.assign(DSelect, {\n OptionCheck: DSelectOptionCheck,\n OptionIcon: DSelectOptionIcon,\n SingleValueIconText: DSelectSingleValueIconText,\n DropdownIndicator: DSelectDropdownIndicator,\n ClearIndicator: DSelectClearIndicator,\n MultiValueRemove: DSelectMultiValueRemove,\n LoadingIndicator: DSelectLoadingIndicator,\n OptionEmoji: DSelectOptionEmoji,\n SingleValueEmoji: DSelectSingleValueEmoji,\n SingleValueEmojiText: DSelectSingleValueEmojiText,\n Placeholder: DSelectPlaceholder,\n});\n//# sourceMappingURL=DSelect.js.map"],"names":["_jsxs","_jsx"],"mappings":"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"}
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Name of the elements an `aria-labelledby` points at, joined as the accessible
|
|
3
|
+
* name computation does. Read when the message is built rather than when the
|
|
4
|
+
* select renders, since the referenced elements may render after it.
|
|
5
|
+
*
|
|
6
|
+
* Each element contributes its own `aria-label` when it has one, and its text
|
|
7
|
+
* otherwise. That covers the targets a select is labelled by in practice — a
|
|
8
|
+
* heading, a span, a labelled region — without shipping the full accessible
|
|
9
|
+
* name algorithm; names derived from descendants' `aria-label`, `alt` or
|
|
10
|
+
* hidden content are not resolved, so pass `ariaLiveMessages` for those.
|
|
11
|
+
*/
|
|
12
|
+
function resolveLabelledBy(labelledBy) {
|
|
13
|
+
if (typeof document === 'undefined')
|
|
14
|
+
return '';
|
|
15
|
+
return labelledBy
|
|
16
|
+
.split(/\s+/)
|
|
17
|
+
.map((ref) => {
|
|
18
|
+
var _a, _b;
|
|
19
|
+
const element = document.getElementById(ref);
|
|
20
|
+
return ((_a = element === null || element === void 0 ? void 0 : element.getAttribute('aria-label')) === null || _a === void 0 ? void 0 : _a.trim()) || ((_b = element === null || element === void 0 ? void 0 : element.textContent) === null || _b === void 0 ? void 0 : _b.trim());
|
|
21
|
+
})
|
|
22
|
+
.filter(Boolean)
|
|
23
|
+
.join(' ');
|
|
24
|
+
}
|
|
25
|
+
/**
|
|
26
|
+
* Builds react-select's `guidance` live message around the control's name.
|
|
27
|
+
*
|
|
28
|
+
* react-select announces "<aria-label> is focused" on the first focus of the
|
|
29
|
+
* input, falling back to "Select" when there is no `aria-label`. Neither a text
|
|
30
|
+
* `label` nor `aria-labelledby` reaches that message, so the announcement would
|
|
31
|
+
* disagree with the name assistive technology exposes.
|
|
32
|
+
*
|
|
33
|
+
* The name follows the accessible name precedence: `aria-labelledby`, then
|
|
34
|
+
* `aria-label`, then the `<label>`. react-select does not export its default
|
|
35
|
+
* messages, so this mirrors them for every context and only swaps the name.
|
|
36
|
+
*/
|
|
37
|
+
function createAriaGuidance({ labelledBy, label }) {
|
|
38
|
+
return ({ 'aria-label': ariaLabel, context, isSearchable, isMulti, tabSelectsValue, isInitialFocus, }) => {
|
|
39
|
+
switch (context) {
|
|
40
|
+
case 'menu':
|
|
41
|
+
return `Use Up and Down to choose options, press Enter to select the currently focused option, press Escape to exit the menu${tabSelectsValue ? ', press Tab to select the option and exit the menu' : ''}.`;
|
|
42
|
+
case 'input': {
|
|
43
|
+
if (!isInitialFocus)
|
|
44
|
+
return '';
|
|
45
|
+
const name = (labelledBy && resolveLabelledBy(labelledBy)) || ariaLabel || label || 'Select';
|
|
46
|
+
return `${name} is focused ${isSearchable ? ',type to refine list' : ''}, press Down to open the menu, ${isMulti ? ' press left to focus selected values' : ''}`;
|
|
47
|
+
}
|
|
48
|
+
case 'value':
|
|
49
|
+
return 'Use left and right to toggle between focused values, press Backspace to remove the currently focused value';
|
|
50
|
+
default:
|
|
51
|
+
return '';
|
|
52
|
+
}
|
|
53
|
+
};
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
export { createAriaGuidance as default };
|
|
57
|
+
//# sourceMappingURL=createAriaGuidance.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"createAriaGuidance.js","sources":["../../../../dist-transpiled/components/DSelect/createAriaGuidance.js"],"sourcesContent":["/**\n * Name of the elements an `aria-labelledby` points at, joined as the accessible\n * name computation does. Read when the message is built rather than when the\n * select renders, since the referenced elements may render after it.\n *\n * Each element contributes its own `aria-label` when it has one, and its text\n * otherwise. That covers the targets a select is labelled by in practice — a\n * heading, a span, a labelled region — without shipping the full accessible\n * name algorithm; names derived from descendants' `aria-label`, `alt` or\n * hidden content are not resolved, so pass `ariaLiveMessages` for those.\n */\nfunction resolveLabelledBy(labelledBy) {\n if (typeof document === 'undefined')\n return '';\n return labelledBy\n .split(/\\s+/)\n .map((ref) => {\n var _a, _b;\n const element = document.getElementById(ref);\n return ((_a = element === null || element === void 0 ? void 0 : element.getAttribute('aria-label')) === null || _a === void 0 ? void 0 : _a.trim()) || ((_b = element === null || element === void 0 ? void 0 : element.textContent) === null || _b === void 0 ? void 0 : _b.trim());\n })\n .filter(Boolean)\n .join(' ');\n}\n/**\n * Builds react-select's `guidance` live message around the control's name.\n *\n * react-select announces \"<aria-label> is focused\" on the first focus of the\n * input, falling back to \"Select\" when there is no `aria-label`. Neither a text\n * `label` nor `aria-labelledby` reaches that message, so the announcement would\n * disagree with the name assistive technology exposes.\n *\n * The name follows the accessible name precedence: `aria-labelledby`, then\n * `aria-label`, then the `<label>`. react-select does not export its default\n * messages, so this mirrors them for every context and only swaps the name.\n */\nexport default function createAriaGuidance({ labelledBy, label }) {\n return ({ 'aria-label': ariaLabel, context, isSearchable, isMulti, tabSelectsValue, isInitialFocus, }) => {\n switch (context) {\n case 'menu':\n return `Use Up and Down to choose options, press Enter to select the currently focused option, press Escape to exit the menu${tabSelectsValue ? ', press Tab to select the option and exit the menu' : ''}.`;\n case 'input': {\n if (!isInitialFocus)\n return '';\n const name = (labelledBy && resolveLabelledBy(labelledBy)) || ariaLabel || label || 'Select';\n return `${name} is focused ${isSearchable ? ',type to refine list' : ''}, press Down to open the menu, ${isMulti ? ' press left to focus selected values' : ''}`;\n }\n case 'value':\n return 'Use left and right to toggle between focused values, press Backspace to remove the currently focused value';\n default:\n return '';\n }\n };\n}\n//# sourceMappingURL=createAriaGuidance.js.map"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS,iBAAiB,CAAC,UAAU,EAAE;AACvC,IAAI,IAAI,OAAO,QAAQ,KAAK,WAAW;AACvC,QAAQ,OAAO,EAAE;AACjB,IAAI,OAAO;AACX,SAAS,KAAK,CAAC,KAAK;AACpB,SAAS,GAAG,CAAC,CAAC,GAAG,KAAK;AACtB,QAAQ,IAAI,EAAE,EAAE,EAAE;AAClB,QAAQ,MAAM,OAAO,GAAG,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC;AACpD,QAAQ,OAAO,CAAC,CAAC,EAAE,GAAG,OAAO,KAAK,IAAI,IAAI,OAAO,KAAK,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,YAAY,CAAC,YAAY,CAAC,MAAM,IAAI,IAAI,EAAE,KAAK,MAAM,GAAG,MAAM,GAAG,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,EAAE,GAAG,OAAO,KAAK,IAAI,IAAI,OAAO,KAAK,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,WAAW,MAAM,IAAI,IAAI,EAAE,KAAK,MAAM,GAAG,MAAM,GAAG,EAAE,CAAC,IAAI,EAAE,CAAC;AAC5R,IAAI,CAAC;AACL,SAAS,MAAM,CAAC,OAAO;AACvB,SAAS,IAAI,CAAC,GAAG,CAAC;AAClB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAAS,kBAAkB,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,EAAE;AAClE,IAAI,OAAO,CAAC,EAAE,YAAY,EAAE,SAAS,EAAE,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,eAAe,EAAE,cAAc,GAAG,KAAK;AAC9G,QAAQ,QAAQ,OAAO;AACvB,YAAY,KAAK,MAAM;AACvB,gBAAgB,OAAO,CAAC,oHAAoH,EAAE,eAAe,GAAG,oDAAoD,GAAG,EAAE,CAAC,CAAC,CAAC;AAC5N,YAAY,KAAK,OAAO,EAAE;AAC1B,gBAAgB,IAAI,CAAC,cAAc;AACnC,oBAAoB,OAAO,EAAE;AAC7B,gBAAgB,MAAM,IAAI,GAAG,CAAC,UAAU,IAAI,iBAAiB,CAAC,UAAU,CAAC,KAAK,SAAS,IAAI,KAAK,IAAI,QAAQ;AAC5G,gBAAgB,OAAO,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,YAAY,GAAG,sBAAsB,GAAG,EAAE,CAAC,+BAA+B,EAAE,OAAO,GAAG,sCAAsC,GAAG,EAAE,CAAC,CAAC;AAChL,YAAY;AACZ,YAAY,KAAK,OAAO;AACxB,gBAAgB,OAAO,4GAA4G;AACnI,YAAY;AACZ,gBAAgB,OAAO,EAAE;AACzB;AACA,IAAI,CAAC;AACL;;;;"}
|