@astryxdesign/core 0.4.4 → 0.4.5-canary.1dc3e5d
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/CHANGELOG.md +39 -0
- package/dist/BottomSheet/BottomSheet.d.ts +11 -2
- package/dist/BottomSheet/BottomSheet.d.ts.map +1 -1
- package/dist/BottomSheet/BottomSheet.js +4 -0
- package/dist/BottomSheet/BottomSheetPanel.d.ts +5 -2
- package/dist/BottomSheet/BottomSheetPanel.d.ts.map +1 -1
- package/dist/BottomSheet/BottomSheetPanel.js +56 -13
- package/dist/BottomSheet/index.d.ts +1 -1
- package/dist/BottomSheet/index.d.ts.map +1 -1
- package/dist/BottomSheet/snapOffsets.d.ts +57 -20
- package/dist/BottomSheet/snapOffsets.d.ts.map +1 -1
- package/dist/BottomSheet/snapOffsets.js +106 -30
- package/dist/BottomSheet/useSheetGestures.d.ts +13 -8
- package/dist/BottomSheet/useSheetGestures.d.ts.map +1 -1
- package/dist/BottomSheet/useSheetGestures.js +160 -64
- package/dist/Calendar/Calendar.d.ts +17 -0
- package/dist/Calendar/Calendar.d.ts.map +1 -1
- package/dist/Calendar/Calendar.js +34 -3
- package/dist/Calendar/getStandaloneShortWeekdayNames.d.ts +14 -0
- package/dist/Calendar/getStandaloneShortWeekdayNames.d.ts.map +1 -0
- package/dist/Calendar/getStandaloneShortWeekdayNames.js +26 -0
- package/dist/Calendar/hooks/useCalendarConstraints.d.ts +22 -1
- package/dist/Calendar/hooks/useCalendarConstraints.d.ts.map +1 -1
- package/dist/Calendar/hooks/useCalendarConstraints.js +26 -4
- package/dist/Calendar/hooks/useCalendarDays.d.ts.map +1 -1
- package/dist/Calendar/hooks/useCalendarDays.js +14 -10
- package/dist/Calendar/standaloneShortWeekdayNames.generated.d.ts +47 -0
- package/dist/Calendar/standaloneShortWeekdayNames.generated.d.ts.map +1 -0
- package/dist/Calendar/standaloneShortWeekdayNames.generated.js +40 -0
- package/dist/CheckboxInput/CheckboxInput.d.ts.map +1 -1
- package/dist/CheckboxInput/CheckboxInput.js +9 -0
- package/dist/ComplexSelector/ComplexSelector.d.ts.map +1 -1
- package/dist/ComplexSelector/ComplexSelector.js +6 -1
- package/dist/DateInput/DateInput.d.ts.map +1 -1
- package/dist/DateInput/DateInput.js +6 -1
- package/dist/DateRangeInput/DateRangeInput.d.ts +23 -1
- package/dist/DateRangeInput/DateRangeInput.d.ts.map +1 -1
- package/dist/DateRangeInput/DateRangeInput.js +38 -3
- package/dist/DateTimeInput/DateTimeInput.d.ts.map +1 -1
- package/dist/DateTimeInput/DateTimeInput.js +7 -2
- package/dist/Field/FieldLabel.d.ts +2 -1
- package/dist/Field/FieldLabel.d.ts.map +1 -1
- package/dist/Field/FieldLabel.js +21 -3
- package/dist/Field/InputClearButton.d.ts +2 -1
- package/dist/Field/InputClearButton.d.ts.map +1 -1
- package/dist/Field/InputClearButton.js +6 -1
- package/dist/FormLayout/FormLayout.d.ts +24 -2
- package/dist/FormLayout/FormLayout.d.ts.map +1 -1
- package/dist/FormLayout/FormLayout.js +7 -2
- package/dist/FormLayout/FormLayoutContext.d.ts +15 -2
- package/dist/FormLayout/FormLayoutContext.d.ts.map +1 -1
- package/dist/FormLayout/FormLayoutContext.js +19 -4
- package/dist/FormLayout/index.d.ts +1 -1
- package/dist/FormLayout/index.d.ts.map +1 -1
- package/dist/Markdown/Markdown.d.ts +8 -0
- package/dist/Markdown/Markdown.d.ts.map +1 -1
- package/dist/Markdown/Markdown.js +31 -3
- package/dist/Markdown/parser.d.ts +14 -2
- package/dist/Markdown/parser.d.ts.map +1 -1
- package/dist/Markdown/parser.js +50 -2
- package/dist/MultiSelector/MultiSelector.d.ts.map +1 -1
- package/dist/MultiSelector/MultiSelector.js +6 -1
- package/dist/NumberInput/NumberInput.d.ts.map +1 -1
- package/dist/NumberInput/NumberInput.js +6 -1
- package/dist/Outline/parseOutlineFromMarkdown.d.ts +2 -0
- package/dist/Outline/parseOutlineFromMarkdown.d.ts.map +1 -1
- package/dist/Outline/parseOutlineFromMarkdown.js +5 -31
- package/dist/RadioList/RadioList.d.ts.map +1 -1
- package/dist/RadioList/RadioList.js +12 -1
- package/dist/Selector/Selector.d.ts.map +1 -1
- package/dist/Selector/Selector.js +6 -1
- package/dist/StatusDot/StatusDot.d.ts +43 -3
- package/dist/StatusDot/StatusDot.d.ts.map +1 -1
- package/dist/StatusDot/StatusDot.js +42 -5
- package/dist/Switch/Switch.d.ts.map +1 -1
- package/dist/Switch/Switch.js +9 -0
- package/dist/Table/plugins/rowExpansion/useTableRowExpansion.d.ts.map +1 -1
- package/dist/Table/plugins/rowExpansion/useTableRowExpansion.js +7 -2
- package/dist/TextArea/TextArea.d.ts.map +1 -1
- package/dist/TextArea/TextArea.js +6 -1
- package/dist/TextInput/TextInput.d.ts.map +1 -1
- package/dist/TextInput/TextInput.js +6 -1
- package/dist/TimeInput/TimeInput.d.ts.map +1 -1
- package/dist/TimeInput/TimeInput.js +6 -1
- package/dist/hooks/useResolvedRequired.d.ts +19 -0
- package/dist/hooks/useResolvedRequired.d.ts.map +1 -0
- package/dist/hooks/useResolvedRequired.js +40 -0
- package/dist/utils/plainDate.d.ts +6 -0
- package/dist/utils/plainDate.d.ts.map +1 -1
- package/dist/utils/plainDate.js +12 -0
- package/locales/af-ZA.json +958 -0
- package/locales/ar-SA.json +998 -0
- package/locales/ca-ES.json +974 -0
- package/locales/cs-CZ.json +990 -0
- package/locales/da-DK.json +966 -0
- package/locales/de-DE.json +966 -0
- package/locales/el-GR.json +990 -0
- package/locales/en.json +4 -0
- package/locales/es-ES.json +978 -0
- package/locales/fi-FI.json +990 -0
- package/locales/fr-FR.json +928 -0
- package/locales/he-IL.json +990 -0
- package/locales/hu-HU.json +990 -0
- package/locales/it-IT.json +978 -0
- package/locales/ja-JP.json +998 -0
- package/locales/ko-KR.json +990 -0
- package/locales/nl-NL.json +954 -0
- package/locales/no-NO.json +978 -0
- package/locales/pl-PL.json +982 -0
- package/locales/pseudo.json +3 -0
- package/locales/pt-BR.json +982 -0
- package/locales/pt-PT.json +982 -0
- package/locales/ro-RO.json +982 -0
- package/locales/ru-RU.json +990 -0
- package/locales/sr-SP.json +990 -0
- package/locales/sv-SE.json +986 -0
- package/locales/tr-TR.json +990 -0
- package/locales/uk-UA.json +990 -0
- package/locales/vi-VN.json +986 -0
- package/locales/zh-CN.json +998 -0
- package/locales/zh-TW.json +998 -0
- package/package.json +3 -3
- package/src/BottomSheet/BottomSheet.doc.mjs +36 -3
- package/src/BottomSheet/BottomSheet.test.tsx +153 -2
- package/src/BottomSheet/BottomSheet.tsx +16 -2
- package/src/BottomSheet/BottomSheetPanel.tsx +67 -13
- package/src/BottomSheet/index.ts +5 -1
- package/src/BottomSheet/snapOffsets.test.ts +114 -47
- package/src/BottomSheet/snapOffsets.ts +119 -33
- package/src/BottomSheet/useSheetGestures.test.ts +113 -15
- package/src/BottomSheet/useSheetGestures.ts +196 -100
- package/src/Calendar/Calendar.doc.mjs +16 -0
- package/src/Calendar/Calendar.test.tsx +137 -0
- package/src/Calendar/Calendar.tsx +65 -2
- package/src/Calendar/getStandaloneShortWeekdayNames.test.ts +54 -0
- package/src/Calendar/getStandaloneShortWeekdayNames.ts +38 -0
- package/src/Calendar/hooks/useCalendarConstraints.ts +54 -3
- package/src/Calendar/hooks/useCalendarDays.ts +13 -10
- package/src/Calendar/standaloneShortWeekdayNames.generated.ts +50 -0
- package/src/CheckboxInput/CheckboxInput.tsx +6 -0
- package/src/ComplexSelector/ComplexSelector.tsx +3 -1
- package/src/DateInput/DateInput.tsx +3 -1
- package/src/DateRangeInput/DateRangeInput.doc.mjs +16 -0
- package/src/DateRangeInput/DateRangeInput.test.tsx +81 -1
- package/src/DateRangeInput/DateRangeInput.tsx +72 -1
- package/src/DateTimeInput/DateTimeInput.tsx +4 -2
- package/src/Field/Field.doc.mjs +1 -0
- package/src/Field/FieldLabel.tsx +20 -4
- package/src/Field/InputClearButton.test.tsx +25 -0
- package/src/Field/InputClearButton.tsx +4 -1
- package/src/FormLayout/FormLayout.doc.mjs +13 -0
- package/src/FormLayout/FormLayout.test.tsx +181 -4
- package/src/FormLayout/FormLayout.tsx +33 -2
- package/src/FormLayout/FormLayoutContext.ts +22 -7
- package/src/FormLayout/index.ts +1 -1
- package/src/Markdown/Markdown.doc.mjs +3 -0
- package/src/Markdown/Markdown.test.tsx +78 -0
- package/src/Markdown/Markdown.tsx +41 -1
- package/src/Markdown/parser.ts +60 -2
- package/src/MultiSelector/MultiSelector.tsx +3 -1
- package/src/NumberInput/NumberInput.tsx +3 -1
- package/src/Outline/Outline.doc.mjs +2 -0
- package/src/Outline/parseOutlineFromMarkdown.ts +10 -40
- package/src/RadioList/RadioList.tsx +9 -1
- package/src/Selector/Selector.tsx +3 -1
- package/src/StatusDot/StatusDot.doc.mjs +13 -0
- package/src/StatusDot/StatusDot.test.tsx +115 -8
- package/src/StatusDot/StatusDot.tsx +74 -9
- package/src/Switch/Switch.tsx +6 -0
- package/src/Table/plugins/rowExpansion/useTableRowExpansion.tsx +20 -2
- package/src/TextArea/TextArea.tsx +3 -1
- package/src/TextInput/TextInput.tsx +3 -1
- package/src/TimeInput/TimeInput.tsx +3 -1
- package/src/hooks/useResolvedRequired.ts +42 -0
- package/src/utils/plainDate.test.ts +50 -0
- package/src/utils/plainDate.ts +12 -0
|
@@ -2,7 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
4
|
* @file parseOutlineFromMarkdown.ts
|
|
5
|
-
* @input Uses Markdown parser internals
|
|
5
|
+
* @input Uses Markdown parser internals (parseMarkdown + heading slug
|
|
6
|
+
* helpers) and OutlineItem type
|
|
6
7
|
* @output Exports parseOutlineFromMarkdown for extracting heading outlines from Markdown
|
|
7
8
|
* @position Pure utility; consumed by useOutlineFromMarkdown and public exports
|
|
8
9
|
*
|
|
@@ -11,41 +12,14 @@
|
|
|
11
12
|
* - /packages/core/src/Outline/index.ts
|
|
12
13
|
*/
|
|
13
14
|
|
|
14
|
-
import { parseMarkdown } from "../Markdown/parser.js";
|
|
15
|
-
function inlineText(nodes) {
|
|
16
|
-
return nodes.map(node => {
|
|
17
|
-
switch (node.type) {
|
|
18
|
-
case 'text':
|
|
19
|
-
case 'code':
|
|
20
|
-
return node.content;
|
|
21
|
-
case 'bold':
|
|
22
|
-
case 'italic':
|
|
23
|
-
case 'strikethrough':
|
|
24
|
-
case 'link':
|
|
25
|
-
return inlineText(node.children);
|
|
26
|
-
case 'image':
|
|
27
|
-
return node.alt;
|
|
28
|
-
case 'citation':
|
|
29
|
-
case 'break':
|
|
30
|
-
return '';
|
|
31
|
-
}
|
|
32
|
-
}).join('');
|
|
33
|
-
}
|
|
34
|
-
function slugify(value) {
|
|
35
|
-
return value.trim().toLowerCase().replace(/['"]/g, '').replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '');
|
|
36
|
-
}
|
|
37
|
-
function uniqueSlug(baseSlug, counts) {
|
|
38
|
-
const fallbackSlug = baseSlug || 'section';
|
|
39
|
-
const count = counts.get(fallbackSlug) ?? 0;
|
|
40
|
-
counts.set(fallbackSlug, count + 1);
|
|
41
|
-
return count === 0 ? fallbackSlug : `${fallbackSlug}-${count}`;
|
|
42
|
-
}
|
|
43
|
-
|
|
15
|
+
import { parseMarkdown, inlineText, slugify, uniqueSlug } from "../Markdown/parser.js";
|
|
44
16
|
/**
|
|
45
17
|
* Extract heading items from a Markdown string.
|
|
46
18
|
*
|
|
47
19
|
* Uses Markdown's parser so fenced code blocks, tables, lists, and inline
|
|
48
20
|
* formatting are interpreted consistently with rendered Markdown output.
|
|
21
|
+
* Ids come from the parser's shared slug helpers, so they always match the
|
|
22
|
+
* `id` attributes Markdown renders on its headings.
|
|
49
23
|
*/
|
|
50
24
|
export function parseOutlineFromMarkdown(markdown) {
|
|
51
25
|
const counts = new Map();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioList.d.ts","sourceRoot":"","sources":["../../src/RadioList/RadioList.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EAMZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"RadioList.d.ts","sourceRoot":"","sources":["../../src/RadioList/RadioList.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EAMZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAIhD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAG9C;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,CAAC;AAExC,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,UAAU,EAAE,OAAO,CAAC;IACpB;;;;;OAKG;IACH,kBAAkB,EAAE,OAAO,CAAC;IAC5B,UAAU,EAAE,OAAO,CAAC;IACpB,IAAI,EAAE,aAAa,CAAC;IACpB,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB;AAED,eAAO,MAAM,gBAAgB,6CAE5B,CAAC;AAiBF,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,SAAS,CAAC,WAAW,CAAC,EACtB,UAAU,CACX;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;;;;OASG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,SAAS,CAAC,EACxB,GAAG,EACH,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,KAAK,EACL,QAAQ,EACR,WAAwB,EACxB,UAAkB,EAClB,eAAe,EACf,UAAkB,EAClB,UAAkB,EAClB,IAAW,EACX,MAAM,EACN,YAAY,EACZ,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,UAAU,EACzB,QAAQ,EACR,QAAQ,GACT,EAAE,cAAc,qBAwMhB;yBA9Ne,SAAS"}
|
|
@@ -21,6 +21,7 @@ import "../theme/tokens.stylex.js";
|
|
|
21
21
|
import { spacingVars } from "../theme/tokens.stylex.js";
|
|
22
22
|
import { Field } from "../Field/Field.js";
|
|
23
23
|
import { useTooltip } from "../Tooltip/index.js";
|
|
24
|
+
import { useResolvedRequired } from "../hooks/useResolvedRequired.js";
|
|
24
25
|
import { mergeProps } from "../utils/index.js";
|
|
25
26
|
import { themeProps } from "../utils/themeProps.js";
|
|
26
27
|
|
|
@@ -76,6 +77,16 @@ export function RadioList({
|
|
|
76
77
|
const statusMessageID = useId();
|
|
77
78
|
const groupRef = useRef(null);
|
|
78
79
|
|
|
80
|
+
// The radiogroup exposes the *effective* required state so a form-wide
|
|
81
|
+
// `defaultOptionality="required"` is announced even when the group carries no
|
|
82
|
+
// visible indicator. Individual radios keep their native `required` bound to
|
|
83
|
+
// the explicit `isRequired` (via context), so a layout default never switches
|
|
84
|
+
// on browser validation for the group.
|
|
85
|
+
const isEffectivelyRequired = useResolvedRequired({
|
|
86
|
+
isRequired,
|
|
87
|
+
isOptional
|
|
88
|
+
});
|
|
89
|
+
|
|
79
90
|
// Disabled-reason tooltip. Applies to the whole-group disabled state. Disabled
|
|
80
91
|
// controls swallow pointer events, so the tooltip listeners attach to the
|
|
81
92
|
// radiogroup container and the radios stay perceivable via aria-disabled
|
|
@@ -203,7 +214,7 @@ export function RadioList({
|
|
|
203
214
|
onFocus: handleFocus,
|
|
204
215
|
"aria-describedby": [description ? descriptionID : null, status?.message ? statusMessageID : null, showsDisabledMessage ? disabledMessageTooltip.describedBy : null].filter(Boolean).join(' ') || undefined,
|
|
205
216
|
"aria-invalid": status?.type === 'error' ? true : undefined,
|
|
206
|
-
"aria-required":
|
|
217
|
+
"aria-required": isEffectivelyRequired || undefined,
|
|
207
218
|
...mergeProps(themeProps('radio-list', {
|
|
208
219
|
orientation,
|
|
209
220
|
size
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Selector.d.ts","sourceRoot":"","sources":["../../src/Selector/Selector.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,EASZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAE5D,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,cAAc,CAAC;AAEpD,OAAO,EAML,KAAK,kBAAkB,EACxB,MAAM,UAAU,CAAC;AAGlB,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,mBAAmB,CAAC;AAgBtD,OAAO,KAAK,EAAC,kBAAkB,EAAE,kBAAkB,EAAC,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"Selector.d.ts","sourceRoot":"","sources":["../../src/Selector/Selector.tsx"],"names":[],"mappings":"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"}
|
|
@@ -33,6 +33,7 @@ import { colorVars, sizeVars, spacingVars, radiusVars, durationVars, easeVars, t
|
|
|
33
33
|
import { isOptionData, isDivider, isSection, normalizeOption, getSelectableOptions } from "./utils.js";
|
|
34
34
|
import { useCombobox, useSelectedItemOffset } from "./hooks.js";
|
|
35
35
|
import { useTypeahead } from "../hooks/useTypeahead.js";
|
|
36
|
+
import { useResolvedRequired } from "../hooks/useResolvedRequired.js";
|
|
36
37
|
import { SelectorOption } from "./SelectorOption.js";
|
|
37
38
|
import { getInputARIA, isImeKeyEvent, mergeProps } from "../utils/index.js";
|
|
38
39
|
import { useSize } from "../SizeContext/SizeContext.js";
|
|
@@ -294,6 +295,10 @@ export function Selector(props) {
|
|
|
294
295
|
hasClear: hasClearProp,
|
|
295
296
|
...rest
|
|
296
297
|
} = props;
|
|
298
|
+
const isEffectivelyRequired = useResolvedRequired({
|
|
299
|
+
isRequired,
|
|
300
|
+
isOptional
|
|
301
|
+
});
|
|
297
302
|
const placeholder = placeholderFromProps ?? t('@astryx.selector.placeholder');
|
|
298
303
|
const searchPlaceholder = searchPlaceholderFromProps ?? t('@astryx.selector.searchPlaceholder');
|
|
299
304
|
const hasClear = hasClearProp === true;
|
|
@@ -805,7 +810,7 @@ export function Selector(props) {
|
|
|
805
810
|
"aria-activedescendant": !hasSearch && popover.isOpen && highlightedIndex >= 0 ? getItemId(highlightedIndex) : undefined,
|
|
806
811
|
"aria-describedby": ariaDescribedBy,
|
|
807
812
|
"aria-labelledby": ariaLabelledBy,
|
|
808
|
-
"aria-required":
|
|
813
|
+
"aria-required": isEffectivelyRequired ? 'true' : undefined,
|
|
809
814
|
"aria-invalid": status?.type === 'error' ? 'true' : undefined,
|
|
810
815
|
"aria-busy": isBusy || undefined
|
|
811
816
|
// With a disabledMessage the trigger keeps focusability via
|
|
@@ -1,3 +1,17 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @file StatusDot.tsx
|
|
3
|
+
* @input Uses React
|
|
4
|
+
* @output Exports StatusDot component, StatusDotProps, StatusDotVariant types
|
|
5
|
+
* @position Core implementation; consumed by index.ts
|
|
6
|
+
*
|
|
7
|
+
* SYNC: When modified, update these files to stay in sync:
|
|
8
|
+
* - /packages/core/src/StatusDot/StatusDot.doc.mjs (props table, features, implementation notes)
|
|
9
|
+
* - /packages/core/src/StatusDot/StatusDot.test.tsx (tests for new/changed behavior)
|
|
10
|
+
* - /packages/core/src/StatusDot/index.ts (exports if types change)
|
|
11
|
+
* - /apps/storybook/stories/StatusDot.stories.tsx (storybook stories)
|
|
12
|
+
* - /packages/cli/assets/templates/blocks/components/StatusDot/ (showcase blocks)
|
|
13
|
+
*/
|
|
14
|
+
import type { ReactNode } from 'react';
|
|
1
15
|
import type { BaseProps } from '../BaseProps';
|
|
2
16
|
import type { StatusDotVariantMap } from './index';
|
|
3
17
|
/**
|
|
@@ -13,7 +27,8 @@ export interface StatusDotProps extends BaseProps<HTMLSpanElement> {
|
|
|
13
27
|
*/
|
|
14
28
|
variant: StatusDotVariant;
|
|
15
29
|
/**
|
|
16
|
-
* Accessible label describing the status. Required for a11y
|
|
30
|
+
* Accessible label describing the status. Required for a11y — it is the
|
|
31
|
+
* dot's `aria-label`, so the status reaches screen readers without hover.
|
|
17
32
|
*/
|
|
18
33
|
label: string;
|
|
19
34
|
/**
|
|
@@ -27,11 +42,35 @@ export interface StatusDotProps extends BaseProps<HTMLSpanElement> {
|
|
|
27
42
|
* When omitted, no tooltip is rendered.
|
|
28
43
|
*/
|
|
29
44
|
tooltip?: string;
|
|
45
|
+
/**
|
|
46
|
+
* Optional icon to render centered inside the dot. Accepts any ReactNode
|
|
47
|
+
* (typically an SVG icon), painted in the dot's `currentColor` ink. Same
|
|
48
|
+
* contract as `AvatarStatusDot`'s `icon`.
|
|
49
|
+
*
|
|
50
|
+
* By default the dot is a colour-only signal; an icon gives the status a
|
|
51
|
+
* non-colour mark, so use a different icon per status — the same icon on
|
|
52
|
+
* every variant leaves the statuses distinguishable by colour alone
|
|
53
|
+
* (WCAG 2.1 SC 1.4.1). Booleans and empty strings are ignored (safe for
|
|
54
|
+
* `cond && <Icon />`).
|
|
55
|
+
*
|
|
56
|
+
* @example
|
|
57
|
+
* ```
|
|
58
|
+
* <StatusDot variant="success" label="Verified" icon={<CheckIcon />} />
|
|
59
|
+
* ```
|
|
60
|
+
*/
|
|
61
|
+
icon?: ReactNode;
|
|
30
62
|
}
|
|
31
63
|
/**
|
|
32
64
|
* A small colored dot indicator for status display (online/offline, severity, etc).
|
|
33
65
|
*
|
|
34
|
-
* Fixed 8px size.
|
|
66
|
+
* Fixed 8px size. By default the dot conveys status by colour only, which is
|
|
67
|
+
* not accessible in isolation (WCAG 2.1 SC 1.4.1) — treat it as a signal the
|
|
68
|
+
* surrounding UI must make accessible: use it as a binary present/absent
|
|
69
|
+
* signal, pair it with a visible label, pass `icon` so the status carries a
|
|
70
|
+
* non-colour mark, or convey the status accessibly elsewhere. See the usage
|
|
71
|
+
* guidance in the component docs.
|
|
72
|
+
*
|
|
73
|
+
* Renders as a non-focusable `<span>` with `role="img"` and
|
|
35
74
|
* `aria-label` for accessibility. Styles use Astryx theme tokens via StyleX.
|
|
36
75
|
* Wrap your app in `<Theme>` to apply a theme.
|
|
37
76
|
*
|
|
@@ -41,9 +80,10 @@ export interface StatusDotProps extends BaseProps<HTMLSpanElement> {
|
|
|
41
80
|
* <StatusDot variant="error" label="Offline" />
|
|
42
81
|
* <StatusDot variant="success" label="Live" isPulsing />
|
|
43
82
|
* <StatusDot variant="success" label="Online" tooltip="Online" />
|
|
83
|
+
* <StatusDot variant="success" label="Verified" icon={<CheckIcon />} />
|
|
44
84
|
* ```
|
|
45
85
|
*/
|
|
46
|
-
export declare function StatusDot({ variant, label, isPulsing, tooltip, xstyle, className, style, ref, ...props }: StatusDotProps): import("react").JSX.Element;
|
|
86
|
+
export declare function StatusDot({ variant, label, isPulsing, tooltip, icon, xstyle, className, style, ref, ...props }: StatusDotProps): import("react").JSX.Element;
|
|
47
87
|
export declare namespace StatusDot {
|
|
48
88
|
var displayName: string;
|
|
49
89
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StatusDot.d.ts","sourceRoot":"","sources":["../../src/StatusDot/StatusDot.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"StatusDot.d.ts","sourceRoot":"","sources":["../../src/StatusDot/StatusDot.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAIrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAI5C,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,SAAS,CAAC;AAoFjD;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GAAG,MAAM,mBAAmB,CAAC;AAEzD,MAAM,WAAW,cAAe,SAAQ,SAAS,CAAC,eAAe,CAAC;IAChE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACjC;;OAEG;IACH,OAAO,EAAE,gBAAgB,CAAC;IAC1B;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;;;;;;;;;;OAeG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,SAAS,CAAC,EACxB,OAAO,EACP,KAAK,EACL,SAAiB,EACjB,OAAO,EACP,IAAI,EACJ,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,cAAc,+BAmChB;yBA9Ce,SAAS"}
|
|
@@ -19,7 +19,7 @@ import * as stylex from '@stylexjs/stylex';
|
|
|
19
19
|
import "../theme/tokens.stylex.js";
|
|
20
20
|
import { colorVars } from "../theme/tokens.stylex.js";
|
|
21
21
|
import { Tooltip } from "../Tooltip/Tooltip.js";
|
|
22
|
-
import { mergeProps } from "../utils/index.js";
|
|
22
|
+
import { isRenderable, mergeProps } from "../utils/index.js";
|
|
23
23
|
import { themeProps } from "../utils/themeProps.js";
|
|
24
24
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
25
25
|
/**
|
|
@@ -27,12 +27,17 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
27
27
|
*/
|
|
28
28
|
const pulseKeyframes = "xtut5q7-B";
|
|
29
29
|
|
|
30
|
+
/** Fixed dot size in px. A user-supplied icon is drawn into this same field. */
|
|
31
|
+
const DOT_SIZE = 8;
|
|
32
|
+
|
|
30
33
|
/**
|
|
31
34
|
* Base styles
|
|
32
35
|
*/
|
|
33
36
|
const styles = {
|
|
34
37
|
base: {
|
|
35
|
-
k1xSpc: "
|
|
38
|
+
k1xSpc: "x3nfvp2",
|
|
39
|
+
kGNEyG: "x6s0dn4",
|
|
40
|
+
kjj79g: "xl56j7k",
|
|
36
41
|
kaIpWk: "x16rqkct",
|
|
37
42
|
kmuXW: "x2lah0s",
|
|
38
43
|
kzqmXN: "x1xc55vz",
|
|
@@ -53,27 +58,40 @@ const styles = {
|
|
|
53
58
|
};
|
|
54
59
|
|
|
55
60
|
/**
|
|
56
|
-
* Variant styles mapping to theme color tokens
|
|
61
|
+
* Variant styles mapping to theme color tokens.
|
|
62
|
+
*
|
|
63
|
+
* Each variant sets both the plate colour and an ink colour: a user-supplied
|
|
64
|
+
* `icon` paints from `currentColor`, so plate and ink can never drift out of
|
|
65
|
+
* contrast (same contract as AvatarStatusDot). The ink is each plate's
|
|
66
|
+
* dedicated `--color-on-*` pairing (the Badge precedent), not the surface
|
|
67
|
+
* colour: on-warning is a fixed dark ink, which keeps an icon legible on the
|
|
68
|
+
* yellow plate (~9.6:1) where a light surface ink lands near 2:1. Neutral has
|
|
69
|
+
* no `--color-on-*` token; its mid-grey plate takes the surface ink.
|
|
57
70
|
*/
|
|
58
71
|
const variants = {
|
|
59
72
|
success: {
|
|
60
73
|
kWkggS: "xdsz4j9",
|
|
74
|
+
kMwMTN: "xri61p4",
|
|
61
75
|
$$css: true
|
|
62
76
|
},
|
|
63
77
|
warning: {
|
|
64
78
|
kWkggS: "x1q8g9m5",
|
|
79
|
+
kMwMTN: "xrebv38",
|
|
65
80
|
$$css: true
|
|
66
81
|
},
|
|
67
82
|
error: {
|
|
68
83
|
kWkggS: "x1pjz0fi",
|
|
84
|
+
kMwMTN: "x1m024r3",
|
|
69
85
|
$$css: true
|
|
70
86
|
},
|
|
71
87
|
accent: {
|
|
72
88
|
kWkggS: "x1ewilqj",
|
|
89
|
+
kMwMTN: "x17wrial",
|
|
73
90
|
$$css: true
|
|
74
91
|
},
|
|
75
92
|
neutral: {
|
|
76
93
|
kWkggS: "x1q5y3ey",
|
|
94
|
+
kMwMTN: "xrkvqaz",
|
|
77
95
|
$$css: true
|
|
78
96
|
}
|
|
79
97
|
};
|
|
@@ -86,7 +104,14 @@ const variants = {
|
|
|
86
104
|
/**
|
|
87
105
|
* A small colored dot indicator for status display (online/offline, severity, etc).
|
|
88
106
|
*
|
|
89
|
-
* Fixed 8px size.
|
|
107
|
+
* Fixed 8px size. By default the dot conveys status by colour only, which is
|
|
108
|
+
* not accessible in isolation (WCAG 2.1 SC 1.4.1) — treat it as a signal the
|
|
109
|
+
* surrounding UI must make accessible: use it as a binary present/absent
|
|
110
|
+
* signal, pair it with a visible label, pass `icon` so the status carries a
|
|
111
|
+
* non-colour mark, or convey the status accessibly elsewhere. See the usage
|
|
112
|
+
* guidance in the component docs.
|
|
113
|
+
*
|
|
114
|
+
* Renders as a non-focusable `<span>` with `role="img"` and
|
|
90
115
|
* `aria-label` for accessibility. Styles use Astryx theme tokens via StyleX.
|
|
91
116
|
* Wrap your app in `<Theme>` to apply a theme.
|
|
92
117
|
*
|
|
@@ -96,6 +121,7 @@ const variants = {
|
|
|
96
121
|
* <StatusDot variant="error" label="Offline" />
|
|
97
122
|
* <StatusDot variant="success" label="Live" isPulsing />
|
|
98
123
|
* <StatusDot variant="success" label="Online" tooltip="Online" />
|
|
124
|
+
* <StatusDot variant="success" label="Verified" icon={<CheckIcon />} />
|
|
99
125
|
* ```
|
|
100
126
|
*/
|
|
101
127
|
export function StatusDot({
|
|
@@ -103,12 +129,16 @@ export function StatusDot({
|
|
|
103
129
|
label,
|
|
104
130
|
isPulsing = false,
|
|
105
131
|
tooltip,
|
|
132
|
+
icon,
|
|
106
133
|
xstyle,
|
|
107
134
|
className,
|
|
108
135
|
style,
|
|
109
136
|
ref,
|
|
110
137
|
...props
|
|
111
138
|
}) {
|
|
139
|
+
// Booleans and empty renders don't count (safe for `cond && <Icon />`) —
|
|
140
|
+
// same contract as AvatarStatusDot.
|
|
141
|
+
const showsIcon = isRenderable(icon);
|
|
112
142
|
const dot = /*#__PURE__*/_jsx("span", {
|
|
113
143
|
ref: ref,
|
|
114
144
|
role: "img",
|
|
@@ -116,7 +146,14 @@ export function StatusDot({
|
|
|
116
146
|
...mergeProps(themeProps('statusdot', {
|
|
117
147
|
variant
|
|
118
148
|
}), stylex.props(styles.base, variants[variant], isPulsing && styles.pulsing, isPulsing && styles.reducedMotion, xstyle), className, style),
|
|
119
|
-
...props
|
|
149
|
+
...props,
|
|
150
|
+
children: showsIcon && /*#__PURE__*/_jsx("span", {
|
|
151
|
+
"aria-hidden": "true",
|
|
152
|
+
...{
|
|
153
|
+
className: "x78zum5 x6s0dn4 xl56j7k x14ju556 x1xc55vz xdk7pt"
|
|
154
|
+
},
|
|
155
|
+
children: icon
|
|
156
|
+
})
|
|
120
157
|
});
|
|
121
158
|
if (tooltip) {
|
|
122
159
|
return /*#__PURE__*/_jsx(Tooltip, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../src/Switch/Switch.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAIL,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAcf,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AACtC,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAKhD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../src/Switch/Switch.tsx"],"names":[],"mappings":"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"}
|
package/dist/Switch/Switch.js
CHANGED
|
@@ -28,6 +28,7 @@ import "./switch.markers.stylex.js";
|
|
|
28
28
|
import { switchScope } from "./switch.markers.stylex.js";
|
|
29
29
|
import { themeProps } from "../utils/themeProps.js";
|
|
30
30
|
import { VisuallyHidden } from "../VisuallyHidden/index.js";
|
|
31
|
+
import { useResolvedRequired } from "../hooks/useResolvedRequired.js";
|
|
31
32
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
32
33
|
const wrapperSizeStyles = {
|
|
33
34
|
sm: {
|
|
@@ -275,6 +276,13 @@ export function Switch({
|
|
|
275
276
|
const id = useId();
|
|
276
277
|
const descriptionID = useId();
|
|
277
278
|
const statusMessageID = useId();
|
|
279
|
+
// Announce the effective required state (form default included) while the
|
|
280
|
+
// native `required` stays bound to the explicit `isRequired` so a layout
|
|
281
|
+
// default never switches on browser validation.
|
|
282
|
+
const isEffectivelyRequired = useResolvedRequired({
|
|
283
|
+
isRequired,
|
|
284
|
+
isOptional
|
|
285
|
+
});
|
|
278
286
|
const [, startTransition] = useTransition();
|
|
279
287
|
const [optimisticValue, setOptimisticValue] = useOptimistic(value);
|
|
280
288
|
const isBusy = isLoading || optimisticValue !== value;
|
|
@@ -329,6 +337,7 @@ export function Switch({
|
|
|
329
337
|
"aria-disabled": showsDisabledMessage ? 'true' : undefined,
|
|
330
338
|
form: showsDisabledMessage ? '' : undefined,
|
|
331
339
|
required: isRequired,
|
|
340
|
+
"aria-required": isEffectivelyRequired ? 'true' : undefined,
|
|
332
341
|
onChange: e => {
|
|
333
342
|
if (isDisabled || isBusy) {
|
|
334
343
|
return;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTableRowExpansion.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/rowExpansion/useTableRowExpansion.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAAkB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"useTableRowExpansion.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/rowExpansion/useTableRowExpansion.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAAkB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAOtD,OAAO,KAAK,EACV,WAAW,EAIZ,MAAM,aAAa,CAAC;AAMrB;;;;;;GAMG;AACH,MAAM,WAAW,0BAA0B,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC3E,0CAA0C;IAC1C,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC1B,2DAA2D;IAC3D,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,kDAAkD;IAClD,SAAS,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAC/B;;;OAGG;IACH,cAAc,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,CAAC;IACvC;;;OAGG;IACH,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC;CAC5C;AAkGD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACpE,MAAM,EAAE,0BAA0B,CAAC,CAAC,CAAC,GACpC,WAAW,CAAC,CAAC,CAAC,CAwIhB"}
|
|
@@ -23,6 +23,7 @@ import { spacingVars, colorVars, radiusVars } from "../../../theme/tokens.stylex
|
|
|
23
23
|
import { Icon } from "../../../Icon/index.js";
|
|
24
24
|
import { resolveContextActions } from "../../tableContextMenu.js";
|
|
25
25
|
import { useTranslator } from "../../../i18n/index.js";
|
|
26
|
+
import { rtlStyles } from "../../../utils/index.js";
|
|
26
27
|
|
|
27
28
|
// =============================================================================
|
|
28
29
|
// Config
|
|
@@ -57,10 +58,10 @@ function ExpansionChevron({
|
|
|
57
58
|
type: "button",
|
|
58
59
|
...{
|
|
59
60
|
0: {
|
|
60
|
-
className: "x3nfvp2 x6s0dn4 xl56j7k x1mtvzj0 xvpftlf xx3sua9 x1ypdohk xv9yike x12pfavo xx6bhzk x1717udv x1ilzqfv x1cqbx0l"
|
|
61
|
+
className: "x3nfvp2 x6s0dn4 xl56j7k x1mtvzj0 xvpftlf xx3sua9 x1ypdohk xv9yike x12pfavo xx6bhzk x1717udv x1ilzqfv x1cqbx0l x7p49u4 xaafvuh"
|
|
61
62
|
},
|
|
62
63
|
1: {
|
|
63
|
-
className: "x3nfvp2 x6s0dn4 xl56j7k x1mtvzj0 xvpftlf xx3sua9 x1ypdohk xv9yike x12pfavo xx6bhzk x1717udv x1ilzqfv x1cqbx0l x1iffjtl"
|
|
64
|
+
className: "x3nfvp2 x6s0dn4 xl56j7k x1mtvzj0 xvpftlf xx3sua9 x1ypdohk xv9yike x12pfavo xx6bhzk x1717udv x1ilzqfv x1cqbx0l x1iffjtl x1nxqau"
|
|
64
65
|
}
|
|
65
66
|
}[!!isExpanded << 0],
|
|
66
67
|
onClick: e => {
|
|
@@ -162,6 +163,10 @@ export function useTableRowExpansion(config) {
|
|
|
162
163
|
icon: isExpanded ? 'chevronDown' : 'chevronRight',
|
|
163
164
|
size: "xsm",
|
|
164
165
|
"aria-hidden": true
|
|
166
|
+
// chevronDown needs no mirroring; chevronRight (collapsed,
|
|
167
|
+
// pointing toward the reveal direction) does.
|
|
168
|
+
,
|
|
169
|
+
xstyle: !isExpanded && rtlStyles.mirror
|
|
165
170
|
}),
|
|
166
171
|
onSelect: () => onToggle(key)
|
|
167
172
|
}]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../src/TextArea/TextArea.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAOL,KAAK,WAAW,EAChB,KAAK,cAAc,EACnB,KAAK,UAAU,EACf,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAQf,OAAO,EAML,KAAK,kBAAkB,EACxB,MAAM,UAAU,CAAC;AAClB,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAI5D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../src/TextArea/TextArea.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAOL,KAAK,WAAW,EAChB,KAAK,cAAc,EACnB,KAAK,UAAU,EACf,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAQf,OAAO,EAML,KAAK,kBAAkB,EACxB,MAAM,UAAU,CAAC;AAClB,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAI5D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AA6H9C,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAEjE,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE9C,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,IAAI,EAAE,kBAAkB,CAAC;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,aAAc,SAAQ,IAAI,CACzC,SAAS,EACT,UAAU,GAAG,cAAc,CAC5B;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;IACrC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,WAAW,CAAC,mBAAmB,CAAC,KAAK,IAAI,CAAC;IACxE,qEAAqE;IACrE,YAAY,CAAC,EAAE,CACb,KAAK,EAAE,MAAM,EACb,CAAC,EAAE,WAAW,CAAC,mBAAmB,CAAC,KAChC,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1B,8DAA8D;IAC9D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;OAIG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACjC;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,cAAc,CAAC,mBAAmB,CAAC,KAAK,IAAI,CAAC;IAC3D;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;OAIG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,mBAAmB,CAAC,KAAK,IAAI,CAAC;IACvD;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,mBAAmB,CAAC,KAAK,IAAI,CAAC;CACvD;AAED;;;;;;;;GAQG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,QAAQ,EACR,YAAY,EACZ,SAAiB,EACjB,KAAK,EACL,WAAW,EACX,IAAQ,EACR,UAAkB,EAClB,UAAkB,EAClB,eAAe,EACf,MAAM,EACN,aAA0B,EAC1B,YAAY,EACZ,SAAS,EACT,aAAoB,EACpB,OAAO,EACP,SAAS,EACT,YAAoB,EACpB,IAAI,EAAE,QAAQ,EACd,QAAQ,EACR,OAAO,EACP,MAAM,EACN,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,aAAa,+BAkQf;yBAnSe,QAAQ"}
|
|
@@ -27,6 +27,7 @@ import { mergeProps, mergeRefs } from "../utils/index.js";
|
|
|
27
27
|
import { useInputContainer } from "../hooks/useInputContainer.js";
|
|
28
28
|
import { useInputStatusIcon } from "../hooks/useInputStatusIcon.js";
|
|
29
29
|
import { useAnnounce } from "../hooks/useAnnounce.js";
|
|
30
|
+
import { useResolvedRequired } from "../hooks/useResolvedRequired.js";
|
|
30
31
|
import { useSize } from "../SizeContext/SizeContext.js";
|
|
31
32
|
import { themeProps } from "../utils/themeProps.js";
|
|
32
33
|
import { characterCount } from "../utils/characters.js";
|
|
@@ -139,6 +140,10 @@ export function TextArea({
|
|
|
139
140
|
}) {
|
|
140
141
|
const size = useSize(sizeProp, 'md');
|
|
141
142
|
const t = useTranslator();
|
|
143
|
+
const isEffectivelyRequired = useResolvedRequired({
|
|
144
|
+
isRequired,
|
|
145
|
+
isOptional
|
|
146
|
+
});
|
|
142
147
|
const announce = useAnnounce();
|
|
143
148
|
const id = useId();
|
|
144
149
|
const descriptionID = useId();
|
|
@@ -303,7 +308,7 @@ export function TextArea({
|
|
|
303
308
|
autoFocus: hasAutoFocus,
|
|
304
309
|
"data-autofocus": hasAutoFocus || undefined,
|
|
305
310
|
"aria-describedby": ariaDescribedBy,
|
|
306
|
-
"aria-required":
|
|
311
|
+
"aria-required": isEffectivelyRequired ? 'true' : undefined,
|
|
307
312
|
"aria-invalid": status?.type === 'error' || maxLength != null && valueLength > maxLength ? 'true' : undefined,
|
|
308
313
|
"aria-busy": isBusy || undefined,
|
|
309
314
|
...stylex.props(styles.textarea, textareaSizeStyles[size], isDisabled && styles.textareaDisabled, Boolean(startIcon) && styles.textareaWithStartIcon,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../src/TextInput/TextInput.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAML,KAAK,WAAW,EAChB,KAAK,aAAa,EAClB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAO3C,OAAO,EAGL,KAAK,WAAW,EAKhB,KAAK,kBAAkB,EACxB,MAAM,UAAU,CAAC;AAClB,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAgCtD,QAAA,MAAM,UAAU;;;;;;;;;;EAUd,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,UAAU,CAAC;AAMpD,YAAY,EACV,WAAW,IAAI,eAAe,EAC9B,eAAe,IAAI,mBAAmB,GACvC,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../src/TextInput/TextInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -47,6 +47,7 @@ import { mergeProps, mergeRefs } from "../utils/index.js";
|
|
|
47
47
|
import { useSize } from "../SizeContext/SizeContext.js";
|
|
48
48
|
import { useInputContainer } from "../hooks/useInputContainer.js";
|
|
49
49
|
import { useInputStatusIcon } from "../hooks/useInputStatusIcon.js";
|
|
50
|
+
import { useResolvedRequired } from "../hooks/useResolvedRequired.js";
|
|
50
51
|
import { useInputGroup } from "../InputGroup/InputGroupContext.js";
|
|
51
52
|
import { themeProps } from "../utils/themeProps.js";
|
|
52
53
|
import { useTranslator } from "../i18n/index.js";
|
|
@@ -93,6 +94,10 @@ export function TextInput({
|
|
|
93
94
|
...rest
|
|
94
95
|
}) {
|
|
95
96
|
const t = useTranslator();
|
|
97
|
+
const isEffectivelyRequired = useResolvedRequired({
|
|
98
|
+
isRequired,
|
|
99
|
+
isOptional
|
|
100
|
+
});
|
|
96
101
|
const size = useSize(sizeProp, 'md');
|
|
97
102
|
const id = useId();
|
|
98
103
|
const inputLabelID = useId();
|
|
@@ -215,7 +220,7 @@ export function TextInput({
|
|
|
215
220
|
autoFocus: hasAutoFocus,
|
|
216
221
|
"data-autofocus": hasAutoFocus || undefined,
|
|
217
222
|
"aria-describedby": ariaDescribedBy,
|
|
218
|
-
"aria-required":
|
|
223
|
+
"aria-required": isEffectivelyRequired ? 'true' : undefined,
|
|
219
224
|
"aria-invalid": status?.type === 'error' ? 'true' : undefined,
|
|
220
225
|
"aria-busy": isBusy || undefined,
|
|
221
226
|
"aria-labelledby": ariaLabelledBy,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TimeInput.d.ts","sourceRoot":"","sources":["../../src/TimeInput/TimeInput.tsx"],"names":[],"mappings":"AA8BA,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAO3C,OAAO,EAGL,KAAK,WAAW,EAKhB,KAAK,kBAAkB,EACxB,MAAM,UAAU,CAAC;AAIlB,OAAO,EACL,KAAK,aAAa,EAWnB,MAAM,UAAU,CAAC;AAClB,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"TimeInput.d.ts","sourceRoot":"","sources":["../../src/TimeInput/TimeInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -28,6 +28,7 @@ import { useSize } from "../SizeContext/SizeContext.js";
|
|
|
28
28
|
import { useAnnounce } from "../hooks/useAnnounce.js";
|
|
29
29
|
import { useInputContainer } from "../hooks/useInputContainer.js";
|
|
30
30
|
import { useInputStatusIcon } from "../hooks/useInputStatusIcon.js";
|
|
31
|
+
import { useResolvedRequired } from "../hooks/useResolvedRequired.js";
|
|
31
32
|
import { useInputGroup } from "../InputGroup/InputGroupContext.js";
|
|
32
33
|
import { groupStyles } from "../InputGroup/groupStyles.js";
|
|
33
34
|
import { useTooltip } from "../Tooltip/index.js";
|
|
@@ -99,6 +100,10 @@ export function TimeInput({
|
|
|
99
100
|
ref
|
|
100
101
|
}) {
|
|
101
102
|
const t = useTranslator();
|
|
103
|
+
const isEffectivelyRequired = useResolvedRequired({
|
|
104
|
+
isRequired,
|
|
105
|
+
isOptional
|
|
106
|
+
});
|
|
102
107
|
const placeholder = placeholderFromProps ?? t('@astryx.timeInput.placeholder');
|
|
103
108
|
const size = useSize(sizeProp, 'md');
|
|
104
109
|
const id = useId();
|
|
@@ -367,7 +372,7 @@ export function TimeInput({
|
|
|
367
372
|
autoFocus: hasAutoFocus,
|
|
368
373
|
"data-autofocus": hasAutoFocus || undefined,
|
|
369
374
|
"aria-describedby": ariaDescribedBy,
|
|
370
|
-
"aria-required":
|
|
375
|
+
"aria-required": isEffectivelyRequired ? 'true' : undefined,
|
|
371
376
|
"aria-invalid": status?.type === 'error' || !isInputValid ? 'true' : undefined,
|
|
372
377
|
"aria-busy": isBusy || undefined,
|
|
373
378
|
"aria-labelledby": ariaLabelledBy,
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Resolve a field's effective *required* state for `aria-required`, honoring a
|
|
3
|
+
* surrounding `FormLayout`'s `defaultOptionality`.
|
|
4
|
+
*
|
|
5
|
+
* Under `defaultOptionality="required"` a field is required unless it opts out
|
|
6
|
+
* with `isOptional`. The visible indicator is suppressed for the unmarked
|
|
7
|
+
* majority, so those fields must still expose `aria-required` — otherwise a
|
|
8
|
+
* sighted user reads them as required (form-wide default, no indicator) while a
|
|
9
|
+
* screen reader hears "not required". This closes that mismatch.
|
|
10
|
+
*
|
|
11
|
+
* Semantics only: this drives `aria-required`, never the native `required`
|
|
12
|
+
* attribute, so a layout-level default can't silently switch on browser
|
|
13
|
+
* validation bubbles. `isOptional` takes precedence, matching `FieldLabel`.
|
|
14
|
+
*/
|
|
15
|
+
export declare function useResolvedRequired({ isRequired, isOptional, }: {
|
|
16
|
+
isRequired?: boolean;
|
|
17
|
+
isOptional?: boolean;
|
|
18
|
+
}): boolean;
|
|
19
|
+
//# sourceMappingURL=useResolvedRequired.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useResolvedRequired.d.ts","sourceRoot":"","sources":["../../src/hooks/useResolvedRequired.ts"],"names":[],"mappings":"AAkBA;;;;;;;;;;;;;GAaG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,UAAkB,EAClB,UAAkB,GACnB,EAAE;IACD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,GAAG,OAAO,CAGV"}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
|
+
|
|
3
|
+
'use client';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* @file useResolvedRequired.ts
|
|
7
|
+
* @input Uses React, FormLayoutContext
|
|
8
|
+
* @output Exports useResolvedRequired
|
|
9
|
+
* @position Resolves a field's effective aria-required against the form default
|
|
10
|
+
*
|
|
11
|
+
* SYNC: When modified, update these files to stay in sync:
|
|
12
|
+
* - /packages/core/src/FormLayout/FormLayoutContext.ts (defaultOptionality source)
|
|
13
|
+
* - /packages/core/src/FormLayout/FormLayout.tsx (prop doc: aria-required behavior)
|
|
14
|
+
*/
|
|
15
|
+
import { use } from 'react';
|
|
16
|
+
import { FormLayoutContext } from "../FormLayout/FormLayoutContext.js";
|
|
17
|
+
|
|
18
|
+
/**
|
|
19
|
+
* Resolve a field's effective *required* state for `aria-required`, honoring a
|
|
20
|
+
* surrounding `FormLayout`'s `defaultOptionality`.
|
|
21
|
+
*
|
|
22
|
+
* Under `defaultOptionality="required"` a field is required unless it opts out
|
|
23
|
+
* with `isOptional`. The visible indicator is suppressed for the unmarked
|
|
24
|
+
* majority, so those fields must still expose `aria-required` — otherwise a
|
|
25
|
+
* sighted user reads them as required (form-wide default, no indicator) while a
|
|
26
|
+
* screen reader hears "not required". This closes that mismatch.
|
|
27
|
+
*
|
|
28
|
+
* Semantics only: this drives `aria-required`, never the native `required`
|
|
29
|
+
* attribute, so a layout-level default can't silently switch on browser
|
|
30
|
+
* validation bubbles. `isOptional` takes precedence, matching `FieldLabel`.
|
|
31
|
+
*/
|
|
32
|
+
export function useResolvedRequired({
|
|
33
|
+
isRequired = false,
|
|
34
|
+
isOptional = false
|
|
35
|
+
}) {
|
|
36
|
+
const {
|
|
37
|
+
defaultOptionality
|
|
38
|
+
} = use(FormLayoutContext);
|
|
39
|
+
return !isOptional && (isRequired || defaultOptionality === 'required');
|
|
40
|
+
}
|