@astryxdesign/core 0.1.8-canary.0db5dfd → 0.1.8-canary.2061d8b
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/CheckboxList/CheckboxListItem.d.ts.map +1 -1
- package/dist/CheckboxList/CheckboxListItem.js +4 -10
- package/dist/Dialog/Dialog.d.ts.map +1 -1
- package/dist/Dialog/Dialog.js +4 -3
- package/dist/Field/Field.d.ts.map +1 -1
- package/dist/Field/Field.js +2 -3
- package/dist/Popover/Popover.d.ts.map +1 -1
- package/dist/Popover/Popover.js +3 -2
- package/dist/Popover/usePopover.d.ts.map +1 -1
- package/dist/Popover/usePopover.js +3 -9
- package/dist/Table/BaseTable.d.ts.map +1 -1
- package/dist/Table/BaseTable.js +3 -2
- package/dist/Table/useBaseTablePlugins.d.ts.map +1 -1
- package/dist/Table/useBaseTablePlugins.js +5 -3
- package/dist/Thumbnail/Thumbnail.d.ts +1 -8
- package/dist/Thumbnail/Thumbnail.d.ts.map +1 -1
- package/dist/Thumbnail/Thumbnail.js +11 -56
- package/dist/Timestamp/Timestamp.d.ts.map +1 -1
- package/dist/Timestamp/Timestamp.js +2 -1
- package/dist/Toast/useToast.d.ts.map +1 -1
- package/dist/Toast/useToast.js +2 -5
- package/dist/astryx.css +0 -5
- package/dist/astryx.umd.js +47 -47
- package/dist/astryx.umd.js.map +4 -4
- package/dist/hooks/index.d.ts +1 -0
- package/dist/hooks/index.d.ts.map +1 -1
- package/dist/hooks/index.js +2 -1
- package/dist/hooks/useDevWarning.d.ts +18 -0
- package/dist/hooks/useDevWarning.d.ts.map +1 -0
- package/dist/hooks/useDevWarning.js +49 -0
- package/dist/hooks/useOverflow.d.ts.map +1 -1
- package/dist/hooks/useOverflow.js +2 -3
- package/dist/i18n/resolve.d.ts.map +1 -1
- package/dist/i18n/resolve.js +7 -18
- package/dist/theme/Theme.d.ts.map +1 -1
- package/dist/theme/Theme.js +2 -7
- package/dist/theme/syntax/defineSyntaxTheme.d.ts.map +1 -1
- package/dist/theme/syntax/defineSyntaxTheme.js +2 -1
- package/dist/utils/devWarning.d.ts +42 -0
- package/dist/utils/devWarning.d.ts.map +1 -0
- package/dist/utils/devWarning.js +88 -0
- package/dist/utils/index.d.ts +1 -0
- package/dist/utils/index.d.ts.map +1 -1
- package/dist/utils/index.js +2 -1
- package/package.json +1 -1
- package/src/CheckboxList/CheckboxListItem.tsx +11 -19
- package/src/Dialog/Dialog.tsx +6 -4
- package/src/Field/Field.tsx +6 -5
- package/src/Popover/Popover.tsx +7 -4
- package/src/Popover/usePopover.tsx +9 -13
- package/src/Table/BaseTable.tsx +3 -5
- package/src/Table/useBaseTablePlugins.ts +10 -6
- package/src/Thumbnail/Thumbnail.doc.mjs +0 -9
- package/src/Thumbnail/Thumbnail.test.tsx +0 -30
- package/src/Thumbnail/Thumbnail.tsx +12 -44
- package/src/Timestamp/Timestamp.tsx +7 -3
- package/src/Toast/useToast.tsx +7 -8
- package/src/hooks/index.ts +2 -0
- package/src/hooks/useDevWarning.test.tsx +45 -0
- package/src/hooks/useDevWarning.ts +54 -0
- package/src/hooks/useOverflow.ts +8 -11
- package/src/i18n/resolve.ts +9 -21
- package/src/theme/Theme.tsx +11 -14
- package/src/theme/syntax/defineSyntaxTheme.ts +5 -6
- package/src/utils/devWarning.test.ts +56 -0
- package/src/utils/devWarning.ts +102 -0
- package/src/utils/index.ts +2 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxListItem.d.ts","sourceRoot":"","sources":["../../src/CheckboxList/CheckboxListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,
|
|
1
|
+
{"version":3,"file":"CheckboxListItem.d.ts","sourceRoot":"","sources":["../../src/CheckboxList/CheckboxListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAuB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAI3D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAuB5C,MAAM,WAAW,qBAAsB,SAAQ,SAAS,CAAC,aAAa,CAAC;IACrE;;;;;;OAMG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;;;;;;;;;;;;;;;;OAiBG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC;IACtC;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;CAChC;AAMD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,YAAY,EAAE,SAAS,EACvB,KAAK,EACL,WAAW,EACX,UAAU,EACV,UAAU,EAAE,cAAsB,EAClC,SAAS,EAAE,aAAqB,EAChC,SAAS,EACT,OAAO,EACP,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EAAE,WAAW,EACpB,GAAG,SAAS,EACb,EAAE,qBAAqB,+BA6HvB;yBA7Ie,gBAAgB"}
|
|
@@ -15,11 +15,12 @@
|
|
|
15
15
|
* - /apps/storybook/stories/CheckboxList.stories.tsx
|
|
16
16
|
* - /packages/cli/templates/blocks/components/CheckboxList/ (showcase blocks)
|
|
17
17
|
*/
|
|
18
|
-
import { use
|
|
18
|
+
import { use } from 'react';
|
|
19
19
|
import * as stylex from '@stylexjs/stylex';
|
|
20
20
|
import "../theme/tokens.stylex.js";
|
|
21
21
|
import { colorVars } from "../theme/tokens.stylex.js";
|
|
22
22
|
import { composeEventHandlers } from "../utils/index.js";
|
|
23
|
+
import { useDevWarning } from "../hooks/useDevWarning.js";
|
|
23
24
|
import { CheckboxInput } from "../CheckboxInput/CheckboxInput.js";
|
|
24
25
|
import { ListItem } from "../List/ListItem.js";
|
|
25
26
|
import { ListContext } from "../List/ListContext.js";
|
|
@@ -93,15 +94,8 @@ export function CheckboxListItem({
|
|
|
93
94
|
const checkboxLabel = ariaLabel ?? (typeof label === 'string' ? label : t('@astryx.checkboxList.item.checkbox'));
|
|
94
95
|
|
|
95
96
|
// Dev-time guardrail: a rich label without `aria-label` leaves the
|
|
96
|
-
// checkbox with the generic name "Checkbox".
|
|
97
|
-
|
|
98
|
-
const warnedUnnamedCheckboxRef = useRef(false);
|
|
99
|
-
useEffect(() => {
|
|
100
|
-
if (typeof label !== 'string' && ariaLabel == null && !warnedUnnamedCheckboxRef.current) {
|
|
101
|
-
warnedUnnamedCheckboxRef.current = true;
|
|
102
|
-
console.warn('CheckboxListItem: `label` is a ReactNode, so the checkbox falls ' + 'back to the generic accessible name "Checkbox". Pass ' + '`aria-label` with a concise string equivalent of the visible ' + 'label so screen readers can tell items apart.');
|
|
103
|
-
}
|
|
104
|
-
}, [label, ariaLabel]);
|
|
97
|
+
// checkbox with the generic name "Checkbox".
|
|
98
|
+
useDevWarning('CheckboxListItem', '`label` is a ReactNode, so the checkbox falls ' + 'back to the generic accessible name "Checkbox". Pass ' + '`aria-label` with a concise string equivalent of the visible ' + 'label so screen readers can tell items apart.', typeof label !== 'string' && ariaLabel == null);
|
|
105
99
|
|
|
106
100
|
// Density from list context for checkbox sizing
|
|
107
101
|
const listCtx = use(ListContext);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAoB5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAoB5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAyBhD;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,IAAI,CAAC;IACf,UAAU,EAAE,IAAI,CAAC;CAClB;AAED;;;;;;GAMG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,gBAAgB,CAAC;AAEnD;;;;;GAKG;AACH,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;AAEzD;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB;AA+HD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC/D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;OAOG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC;IAE3C;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC;IAEpC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,QAAgB,EAChB,YAAY,EACZ,KAAW,EACX,SAAkB,EAClB,QAAQ,EACR,OAAoB,EACpB,OAAgB,EAChB,OAAO,EACP,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,sCAwSb;yBAxTe,MAAM"}
|
package/dist/Dialog/Dialog.js
CHANGED
|
@@ -24,6 +24,7 @@ import { colorVars, radiusVars, durationVars, easeVars, shadowVars } from "../th
|
|
|
24
24
|
import { container } from "../Layout/container.stylex.js";
|
|
25
25
|
import { paddingStyles, containerPaddingInlineVarStyles, containerPaddingBlockStartVarStyles, containerPaddingBlockEndVarStyles, spacingStepToToken } from "../Layout/padding.stylex.js";
|
|
26
26
|
import { mergeProps, mergeRefs } from "../utils/index.js";
|
|
27
|
+
import { devWarn } from "../utils/devWarning.js";
|
|
27
28
|
import { DialogContext } from "./DialogContext.js";
|
|
28
29
|
import { themeProps } from "../utils/themeProps.js";
|
|
29
30
|
|
|
@@ -351,14 +352,14 @@ export function Dialog({
|
|
|
351
352
|
}, [isOpen, isInline, allowEscape, onOpenChange]);
|
|
352
353
|
|
|
353
354
|
// Dev-time guardrail: an open modal should always have an accessible name.
|
|
354
|
-
//
|
|
355
|
-
//
|
|
355
|
+
// The header-title check reads the DOM, so this stays in an effect; the ref
|
|
356
|
+
// keeps it to one warning per component instance.
|
|
356
357
|
const warnedUnnamedDialogRef = useRef(false);
|
|
357
358
|
useEffect(() => {
|
|
358
359
|
const hasHeaderTitle = dialogRef.current?.querySelector(`#${CSS.escape(titleId)}`) != null;
|
|
359
360
|
if (isOpen && !isInline && !hasConsumerName && !hasHeaderTitle && !warnedUnnamedDialogRef.current) {
|
|
360
361
|
warnedUnnamedDialogRef.current = true;
|
|
361
|
-
|
|
362
|
+
devWarn('Dialog', 'open dialog has no accessible name. Add a DialogHeader ' + 'with a `title`, or pass `aria-label`/`aria-labelledby`.');
|
|
362
363
|
}
|
|
363
364
|
}, [isOpen, isInline, hasConsumerName, titleId]);
|
|
364
365
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../src/Field/Field.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAM,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAI9C,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../src/Field/Field.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAM,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAI9C,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAqCtC,YAAY,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAE9C,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAE9D,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,IAAI,EAAE,eAAe,CAAC;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,UAAW,SAAQ,IAAI,CACtC,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,wCAAwC;IACxC,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;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACjC;;;OAGG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IACxC;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,OAAO,EACP,OAAO,EACP,YAAoB,EACpB,aAAa,EACb,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,SAAS,EACT,MAAM,EACN,YAAY,EACZ,aAA0B,EAC1B,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,UAAU,+BAqGZ;yBA3He,KAAK"}
|
package/dist/Field/Field.js
CHANGED
|
@@ -22,6 +22,7 @@ import { FieldStatus } from "../FieldStatus/FieldStatus.js";
|
|
|
22
22
|
import "../theme/tokens.stylex.js";
|
|
23
23
|
import { spacingVars, borderVars } from "../theme/tokens.stylex.js";
|
|
24
24
|
import { mergeProps } from "../utils/index.js";
|
|
25
|
+
import { useDevWarning } from "../hooks/useDevWarning.js";
|
|
25
26
|
import { FormLayoutContext } from "../FormLayout/FormLayoutContext.js";
|
|
26
27
|
import { Text } from "../Text/index.js";
|
|
27
28
|
import { themeProps } from "../utils/themeProps.js";
|
|
@@ -93,9 +94,7 @@ export function Field({
|
|
|
93
94
|
const isHorizontalLabels = direction === 'horizontal-labels';
|
|
94
95
|
const resolvedDescriptionID = descriptionID ?? (description ? `${inputID}-desc` : undefined);
|
|
95
96
|
const resolvedMessageID = status?.messageID ?? (status?.message ? `${inputID}-status` : undefined);
|
|
96
|
-
|
|
97
|
-
console.warn('Field: isOptional and isRequired are mutually exclusive. isOptional takes precedence.');
|
|
98
|
-
}
|
|
97
|
+
useDevWarning('Field', 'isOptional and isRequired are mutually exclusive. isOptional takes precedence.', isOptional && isRequired);
|
|
99
98
|
const labelNode = /*#__PURE__*/_jsx(FieldLabel, {
|
|
100
99
|
label: label,
|
|
101
100
|
inputID: inputID,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../src/Popover/Popover.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,EAGZ,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../src/Popover/Popover.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,EAGZ,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,cAAc,EAAE,cAAc,EAAC,MAAM,mBAAmB,CAAC;AA4BtE;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC,2EAA2E;IAC3E,GAAG,EAAE,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IACtC,sCAAsC;IACtC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,+DAA+D;IAC/D,eAAe,EAAE,QAAQ,CAAC;IAC1B,6DAA6D;IAC7D,eAAe,EAAE,OAAO,CAAC;IACzB,4DAA4D;IAC5D,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,YAAa,SAAQ,IAAI,CACxC,SAAS,EACT,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA6BG;IACH,QAAQ,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,yBAAyB,KAAK,SAAS,CAAC,CAAC;IAEzE;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAEzC;;OAEG;IACH,OAAO,EAAE,SAAS,CAAC;IAEnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;;;;OAOG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAsCD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,SAAS,EACT,OAAO,EACP,SAAmB,EACnB,SAAmB,EACnB,MAAM,EACN,YAAY,EACZ,SAAgB,EAChB,KAAK,EACL,KAAK,EACL,cAAc,EACd,gBAAgB,EAChB,YAAY,EACZ,eAAsB,EACtB,gBAAuB,EACvB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,GACtB,EAAE,YAAY,GAAG,YAAY,CAkR7B;yBAtSe,OAAO"}
|
package/dist/Popover/Popover.js
CHANGED
|
@@ -20,6 +20,7 @@ import React, { useCallback, useRef } from 'react';
|
|
|
20
20
|
import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js";
|
|
21
21
|
import * as stylex from '@stylexjs/stylex';
|
|
22
22
|
import { mergeProps } from "../utils/index.js";
|
|
23
|
+
import { devWarn } from "../utils/devWarning.js";
|
|
23
24
|
import { usePopover } from "./usePopover.js";
|
|
24
25
|
import { layerAnimations } from "../Layer/layerAnimations.stylex.js";
|
|
25
26
|
import "../theme/tokens.stylex.js";
|
|
@@ -228,7 +229,7 @@ export function Popover({
|
|
|
228
229
|
}
|
|
229
230
|
const button = findTriggerButton(el);
|
|
230
231
|
if (!button) {
|
|
231
|
-
|
|
232
|
+
devWarn('Popover', 'anchorRef must reference a <button> or [role="button"] element. ' + 'The popover trigger implements the button + dialog ARIA pattern.');
|
|
232
233
|
}
|
|
233
234
|
if (!button) {
|
|
234
235
|
return;
|
|
@@ -267,7 +268,7 @@ export function Popover({
|
|
|
267
268
|
// Find the button inside the wrapper
|
|
268
269
|
const button = findTriggerButton(wrapper);
|
|
269
270
|
if (!button) {
|
|
270
|
-
|
|
271
|
+
devWarn('Popover', 'children must contain a <button> or [role="button"] element. ' + 'The popover trigger implements the button + dialog ARIA pattern.');
|
|
271
272
|
}
|
|
272
273
|
if (!button) {
|
|
273
274
|
return;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePopover.d.ts","sourceRoot":"","sources":["../../src/Popover/usePopover.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,EAAiC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE5E,OAAO,EAAW,KAAK,kBAAkB,EAAC,MAAM,mBAAmB,CAAC;AAEpE,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"usePopover.d.ts","sourceRoot":"","sources":["../../src/Popover/usePopover.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,EAAiC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE5E,OAAO,EAAW,KAAK,kBAAkB,EAAC,MAAM,mBAAmB,CAAC;AAEpE,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AA2DnD;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IAEtB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;;;;;;;OAUG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;;;;;;;;OAYG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAEzB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;;;;;;OASG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,UAAU,EAAE,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IAE7C;;;;OAIG;IACH,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAEnD;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;;;OAIG;IACH,IAAI,EAAE,CAAC,OAAO,CAAC,EAAE;QAAC,aAAa,CAAC,EAAE,OAAO,CAAA;KAAC,KAAK,IAAI,CAAC;IAEpD;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;IAEjB;;OAEG;IACH,MAAM,EAAE,MAAM,IAAI,CAAC;IAEnB;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;;;;;;;;;;OAWG;IACH,MAAM,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,KAAK,CAAC,EAAE,kBAAkB,KAAK,SAAS,CAAC;IAEvE;;OAEG;IACH,YAAY,EAAE;QACZ,eAAe,EAAE,QAAQ,GAAG,MAAM,CAAC;QACnC,eAAe,EAAE,OAAO,CAAC;QACzB,eAAe,EAAE,MAAM,CAAC;KACzB,CAAC;CACH;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,wBAAgB,UAAU,CAAC,OAAO,GAAE,iBAAsB,GAAG,gBAAgB,CAyJ5E"}
|
|
@@ -22,6 +22,7 @@ import "../theme/tokens.stylex.js";
|
|
|
22
22
|
import { colorVars, spacingVars, radiusVars, shadowVars } from "../theme/tokens.stylex.js";
|
|
23
23
|
import { Button } from "../Button/index.js";
|
|
24
24
|
import { useTranslator } from "../i18n/index.js";
|
|
25
|
+
import { useDevWarning } from "../hooks/useDevWarning.js";
|
|
25
26
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
26
27
|
const styles = {
|
|
27
28
|
surface: {
|
|
@@ -169,15 +170,8 @@ export function usePopover(options = {}) {
|
|
|
169
170
|
'aria-controls': layer.id
|
|
170
171
|
};
|
|
171
172
|
|
|
172
|
-
// Dev-time guardrail: a dialog popover should always be labeled.
|
|
173
|
-
|
|
174
|
-
const warnedUnnamedDialogRef = useRef(false);
|
|
175
|
-
useEffect(() => {
|
|
176
|
-
if (role === 'dialog' && !dialogLabel && !warnedUnnamedDialogRef.current) {
|
|
177
|
-
warnedUnnamedDialogRef.current = true;
|
|
178
|
-
console.warn('usePopover: role="dialog" without a `dialogLabel` renders an unnamed ' + 'dialog. Pass `dialogLabel`, or use `role: "none"` for listbox/menu ' + 'popups whose content already carries its own role.');
|
|
179
|
-
}
|
|
180
|
-
}, [role, dialogLabel]);
|
|
173
|
+
// Dev-time guardrail: a dialog popover should always be labeled.
|
|
174
|
+
useDevWarning('usePopover', 'role="dialog" without a `dialogLabel` renders an unnamed ' + 'dialog. Pass `dialogLabel`, or use `role: "none"` for listbox/menu ' + 'popups whose content already carries its own role.', role === 'dialog' && !dialogLabel);
|
|
181
175
|
|
|
182
176
|
// Wrapped render function that includes surface styles and optional hidden close button
|
|
183
177
|
const render = useCallback((children, props) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseTable.d.ts","sourceRoot":"","sources":["../../src/Table/BaseTable.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAe,KAAK,YAAY,EAAkB,KAAK,GAAG,EAAC,MAAM,OAAO,CAAC;AAGhF,OAAO,KAAK,EACV,cAAc,EAYf,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"BaseTable.d.ts","sourceRoot":"","sources":["../../src/Table/BaseTable.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAe,KAAK,YAAY,EAAkB,KAAK,GAAG,EAAC,MAAM,OAAO,CAAC;AAGhF,OAAO,KAAK,EACV,cAAc,EAYf,MAAM,SAAS,CAAC;AAyjBjB;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,SAAS,EAAqB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC3E,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG;IAAC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAA;CAAC,KACrD,YAAY,CAAC"}
|
package/dist/Table/BaseTable.js
CHANGED
|
@@ -25,6 +25,7 @@ import { TableHeaderCell } from "./TableHeaderCell.js";
|
|
|
25
25
|
import { TableHeader } from "./TableHeader.js";
|
|
26
26
|
import { TableBody } from "./TableBody.js";
|
|
27
27
|
import { mergeProps } from "../utils/index.js";
|
|
28
|
+
import { devError } from "../utils/devWarning.js";
|
|
28
29
|
import { EmptyState } from "../EmptyState/index.js";
|
|
29
30
|
import { Text } from "../Text/index.js";
|
|
30
31
|
import { themeProps } from "../utils/themeProps.js";
|
|
@@ -59,7 +60,7 @@ function applyPlugins(plugins, getter, initial, ...args) {
|
|
|
59
60
|
try {
|
|
60
61
|
return transform(acc, ...args);
|
|
61
62
|
} catch (error) {
|
|
62
|
-
|
|
63
|
+
devError('Table', `Plugin at index ${index} threw in transform:`, error);
|
|
63
64
|
return acc;
|
|
64
65
|
}
|
|
65
66
|
}, initial);
|
|
@@ -444,7 +445,7 @@ function BaseTableInner({
|
|
|
444
445
|
try {
|
|
445
446
|
tableElement = plugin.transformTableContext(tableElement);
|
|
446
447
|
} catch (error) {
|
|
447
|
-
|
|
448
|
+
devError('Table', 'Plugin threw in transformTableContext:', error);
|
|
448
449
|
}
|
|
449
450
|
}
|
|
450
451
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useBaseTablePlugins.d.ts","sourceRoot":"","sources":["../../src/Table/useBaseTablePlugins.ts"],"names":[],"mappings":"AAuCA,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"useBaseTablePlugins.d.ts","sourceRoot":"","sources":["../../src/Table/useBaseTablePlugins.ts"],"names":[],"mappings":"AAuCA,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,SAAS,CAAC;AAkHzC;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,mBAAmB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACnE,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,EAC7B,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,GAAG,SAAS,GACtD,WAAW,CAAC,CAAC,CAAC,EAAE,CA2ClB"}
|
|
@@ -36,6 +36,8 @@
|
|
|
36
36
|
* - /packages/core/src/Table/Table.tsx (primary consumer)
|
|
37
37
|
*/
|
|
38
38
|
import { useRef } from 'react';
|
|
39
|
+
import { devWarn } from "../utils/devWarning.js";
|
|
40
|
+
|
|
39
41
|
// ======================================================================// Canonical Plugin Order
|
|
40
42
|
// ======================================================================
|
|
41
43
|
/**
|
|
@@ -86,7 +88,7 @@ function validatePlugin(name, plugin) {
|
|
|
86
88
|
// Warn about unknown keys (likely misspelled transform names)
|
|
87
89
|
for (const key of keys) {
|
|
88
90
|
if (!VALID_TRANSFORM_KEYS.has(key)) {
|
|
89
|
-
|
|
91
|
+
devWarn('Table', `Plugin "${name}" has unknown key "${key}". ` + `Valid keys: ${[...VALID_TRANSFORM_KEYS].join(', ')}. ` + `This key will be ignored.`);
|
|
90
92
|
}
|
|
91
93
|
}
|
|
92
94
|
|
|
@@ -95,7 +97,7 @@ function validatePlugin(name, plugin) {
|
|
|
95
97
|
if (VALID_TRANSFORM_KEYS.has(key)) {
|
|
96
98
|
const value = plugin[key];
|
|
97
99
|
if (value != null && typeof value !== 'function') {
|
|
98
|
-
|
|
100
|
+
devWarn('Table', `Plugin "${name}" has non-function value for "${key}" ` + `(got ${typeof value}). Transform will be skipped.`);
|
|
99
101
|
}
|
|
100
102
|
}
|
|
101
103
|
}
|
|
@@ -103,7 +105,7 @@ function validatePlugin(name, plugin) {
|
|
|
103
105
|
// Warn about empty plugins that add pipeline overhead
|
|
104
106
|
const hasTransforms = keys.some(key => VALID_TRANSFORM_KEYS.has(key) && typeof plugin[key] === 'function');
|
|
105
107
|
if (!hasTransforms) {
|
|
106
|
-
|
|
108
|
+
devWarn('Table', `Plugin "${name}" has no transform methods. ` + `It will be included in the pipeline but won't do anything.`);
|
|
107
109
|
}
|
|
108
110
|
}
|
|
109
111
|
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import type { BaseProps } from '../BaseProps';
|
|
2
|
-
import type { Elevation } from '../utils/types';
|
|
3
2
|
export interface ThumbnailProps extends BaseProps<HTMLDivElement> {
|
|
4
3
|
/** Ref forwarded to the root element */
|
|
5
4
|
ref?: React.Ref<HTMLDivElement>;
|
|
@@ -52,12 +51,6 @@ export interface ThumbnailProps extends BaseProps<HTMLDivElement> {
|
|
|
52
51
|
* @default false
|
|
53
52
|
*/
|
|
54
53
|
isDisabled?: boolean;
|
|
55
|
-
/**
|
|
56
|
-
* Resting elevation — the shadow depth the tile sits at. `none` (the default)
|
|
57
|
-
* keeps the existing hover-only shadow; a set level raises the tile at rest.
|
|
58
|
-
* @default 'none'
|
|
59
|
-
*/
|
|
60
|
-
elevation?: Elevation;
|
|
61
54
|
/**
|
|
62
55
|
* Test ID for testing frameworks.
|
|
63
56
|
*/
|
|
@@ -79,7 +72,7 @@ export interface ThumbnailProps extends BaseProps<HTMLDivElement> {
|
|
|
79
72
|
* <Thumbnail src="/preview.png" alt="Preview" onClick={() => {}} label="preview.png" />
|
|
80
73
|
* ```
|
|
81
74
|
*/
|
|
82
|
-
export declare function Thumbnail({ src, alt, label, onRemove, onClick, isLoading, isDisabled,
|
|
75
|
+
export declare function Thumbnail({ src, alt, label, onRemove, onClick, isLoading, isDisabled, xstyle, className, style, 'data-testid': testId, ref, ...props }: ThumbnailProps): import("react").JSX.Element;
|
|
83
76
|
export declare namespace Thumbnail {
|
|
84
77
|
var displayName: string;
|
|
85
78
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Thumbnail.d.ts","sourceRoot":"","sources":["../../src/Thumbnail/Thumbnail.tsx"],"names":[],"mappings":"AA4CA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"Thumbnail.d.ts","sourceRoot":"","sources":["../../src/Thumbnail/Thumbnail.tsx"],"names":[],"mappings":"AA4CA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAQ5C,MAAM,WAAW,cAAe,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;;;;;;OASG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACzC;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAgID;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,SAAS,CAAC,EACxB,GAAG,EACH,GAAG,EACH,KAAK,EACL,QAAQ,EACR,OAAO,EACP,SAAiB,EACjB,UAAkB,EAClB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,cAAc,+BA4HhB;yBA1Ie,SAAS"}
|
|
@@ -24,7 +24,6 @@
|
|
|
24
24
|
* - /apps/storybook/stories/Thumbnail.stories.tsx
|
|
25
25
|
* - /packages/cli/templates/blocks/components/Thumbnail/ (showcase blocks)
|
|
26
26
|
*/
|
|
27
|
-
import { useEffect, useRef } from 'react';
|
|
28
27
|
import * as stylex from '@stylexjs/stylex';
|
|
29
28
|
import "../theme/tokens.stylex.js";
|
|
30
29
|
import { colorVars, radiusVars, spacingVars, shadowVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
|
|
@@ -35,6 +34,7 @@ import { Spinner } from "../Spinner/index.js";
|
|
|
35
34
|
import { Tooltip } from "../Tooltip/Tooltip.js";
|
|
36
35
|
import { MediaTheme } from "../theme/MediaTheme.js";
|
|
37
36
|
import { useImageMode } from "../hooks/useImageMode.js";
|
|
37
|
+
import { useDevWarning } from "../hooks/useDevWarning.js";
|
|
38
38
|
import { mergeProps } from "../utils/index.js";
|
|
39
39
|
import { themeProps } from "../utils/themeProps.js";
|
|
40
40
|
import { useTranslator } from "../i18n/index.js";
|
|
@@ -61,27 +61,6 @@ const styles = {
|
|
|
61
61
|
kHBbk8: "xc8icb0",
|
|
62
62
|
$$css: true
|
|
63
63
|
},
|
|
64
|
-
imageContainer: {
|
|
65
|
-
kVAEAm: "x1n2onr6",
|
|
66
|
-
kzqmXN: "xh8yej3",
|
|
67
|
-
kOBAk4: "x1plog1",
|
|
68
|
-
kaIpWk: "xh6dtrn",
|
|
69
|
-
kVQacm: "xb3r6kr",
|
|
70
|
-
kWkggS: "x17x4s8c",
|
|
71
|
-
kGVxlE: "xeu2mjo",
|
|
72
|
-
$$css: true
|
|
73
|
-
},
|
|
74
|
-
interactive: {
|
|
75
|
-
kkrTdU: "x1ypdohk",
|
|
76
|
-
k1ekBW: "x1kx2cm7",
|
|
77
|
-
kIyJzY: "xuedmi6",
|
|
78
|
-
kAMwcw: "xlr8y92",
|
|
79
|
-
kGVxlE: "xeu2mjo xhouywz",
|
|
80
|
-
kSiTet: "x1hc1fzr xzomjkg x1tmayz8",
|
|
81
|
-
kI3sdo: "x1irc7jg",
|
|
82
|
-
kInvED: "x1wfwxd8 xdjuwb3",
|
|
83
|
-
$$css: true
|
|
84
|
-
},
|
|
85
64
|
removeButtonOverrides: {
|
|
86
65
|
kVAEAm: "x10l6tqk",
|
|
87
66
|
k87sOh: "x8d4r5l",
|
|
@@ -99,29 +78,6 @@ const styles = {
|
|
|
99
78
|
}
|
|
100
79
|
};
|
|
101
80
|
|
|
102
|
-
// Resting elevation → shadow token. Sets --_thumbnail-elevation (read by the
|
|
103
|
-
// image container and the interactive hover style) rather than box-shadow
|
|
104
|
-
// directly, so a set resting elevation survives the interactive hover bump.
|
|
105
|
-
// 'none' is the default — the existing hover-only shadow is unchanged.
|
|
106
|
-
const elevationStyles = {
|
|
107
|
-
none: {
|
|
108
|
-
"--_thumbnail-elevation": "x1wylu3c",
|
|
109
|
-
$$css: true
|
|
110
|
-
},
|
|
111
|
-
low: {
|
|
112
|
-
"--_thumbnail-elevation": "xj84mtc",
|
|
113
|
-
$$css: true
|
|
114
|
-
},
|
|
115
|
-
med: {
|
|
116
|
-
"--_thumbnail-elevation": "x1kzb63o",
|
|
117
|
-
$$css: true
|
|
118
|
-
},
|
|
119
|
-
high: {
|
|
120
|
-
"--_thumbnail-elevation": "x1jj9ot9",
|
|
121
|
-
$$css: true
|
|
122
|
-
}
|
|
123
|
-
};
|
|
124
|
-
|
|
125
81
|
// =============================================================================
|
|
126
82
|
// Placeholder icon — a simple image silhouette
|
|
127
83
|
// =============================================================================
|
|
@@ -167,7 +123,6 @@ export function Thumbnail({
|
|
|
167
123
|
onClick,
|
|
168
124
|
isLoading = false,
|
|
169
125
|
isDisabled = false,
|
|
170
|
-
elevation = 'none',
|
|
171
126
|
xstyle,
|
|
172
127
|
className,
|
|
173
128
|
style,
|
|
@@ -196,16 +151,9 @@ export function Thumbnail({
|
|
|
196
151
|
// technology. That is fine when the thumbnail is otherwise named — `label`
|
|
197
152
|
// (or a consumer-provided aria name) becomes the group's accessible name —
|
|
198
153
|
// but with no name source at all the group falls back to a generic
|
|
199
|
-
// "thumbnail".
|
|
200
|
-
// on every render.
|
|
154
|
+
// "thumbnail".
|
|
201
155
|
const hasNameSource = alt != null || label != null || props['aria-label'] != null || props['aria-labelledby'] != null;
|
|
202
|
-
|
|
203
|
-
useEffect(() => {
|
|
204
|
-
if (hasSrc && !hasNameSource && !warnedUnnamedImageRef.current) {
|
|
205
|
-
warnedUnnamedImageRef.current = true;
|
|
206
|
-
console.warn('Thumbnail: `src` is set without `alt` or `label`. The image is ' + 'treated as decorative and hidden from assistive technology, and ' + 'the thumbnail falls back to a generic "thumbnail" name. Pass ' + '`alt` to describe the image content, or `label` (file name) to ' + 'name the thumbnail.');
|
|
207
|
-
}
|
|
208
|
-
}, [hasSrc, hasNameSource]);
|
|
156
|
+
useDevWarning('Thumbnail', '`src` is set without `alt` or `label`. The image is ' + 'treated as decorative and hidden from assistive technology, and ' + 'the thumbnail falls back to a generic "thumbnail" name. Pass ' + '`alt` to describe the image content, or `label` (file name) to ' + 'name the thumbnail.', hasSrc && !hasNameSource);
|
|
209
157
|
const imageContent = /*#__PURE__*/_jsxs(_Fragment, {
|
|
210
158
|
children: [showImage && /*#__PURE__*/_jsx("img", {
|
|
211
159
|
src: src,
|
|
@@ -249,7 +197,14 @@ export function Thumbnail({
|
|
|
249
197
|
...mergeProps(themeProps('thumbnail'), stylex.props(styles.root, isDisabled && styles.disabled, xstyle), className, style),
|
|
250
198
|
...props,
|
|
251
199
|
children: /*#__PURE__*/_jsxs("div", {
|
|
252
|
-
...
|
|
200
|
+
...{
|
|
201
|
+
0: {
|
|
202
|
+
className: "x1n2onr6 xh8yej3 x1plog1 xh6dtrn xb3r6kr x17x4s8c"
|
|
203
|
+
},
|
|
204
|
+
1: {
|
|
205
|
+
className: "x1n2onr6 xh8yej3 x1plog1 xh6dtrn xb3r6kr x17x4s8c x1ypdohk x1kx2cm7 xuedmi6 xlr8y92 x1gnnqk1 xhouywz x1hc1fzr xzomjkg x1tmayz8 x1irc7jg x1wfwxd8 xdjuwb3"
|
|
206
|
+
}
|
|
207
|
+
}[!!isInteractive << 0],
|
|
253
208
|
children: [isInteractive ? /*#__PURE__*/_jsx("button", {
|
|
254
209
|
type: "button",
|
|
255
210
|
onClick: onClick,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Timestamp.d.ts","sourceRoot":"","sources":["../../src/Timestamp/Timestamp.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAC,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"Timestamp.d.ts","sourceRoot":"","sources":["../../src/Timestamp/Timestamp.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAC,MAAM,gBAAgB,CAAC;AAG9E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAY5C,MAAM,MAAM,eAAe,GACvB,UAAU,GACV,MAAM,GACN,MAAM,GACN,WAAW,GACX,MAAM,GACN,aAAa,GACb,kBAAkB,GAClB,aAAa,CAAC;AAElB,MAAM,WAAW,cAAe,SAAQ,SAAS,CAAC,eAAe,CAAC;IAChE,kDAAkD;IAClD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACjC,uFAAuF;IACvF,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB;;;;;;;;;;;OAWG;IACH,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,sCAAsC;IACtC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AA0OD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,MAAe,EACf,aAAsC,EACtC,UAAiB,EACjB,eAAuB,EACvB,MAAc,EACd,IAAmB,EACnB,IAAI,EACJ,KAAmB,EACnB,MAAM,EACN,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,aAAa,EAAE,MAAM,GACtB,EAAE,cAAc,sCA6GhB;yBA7He,SAAS"}
|
|
@@ -19,6 +19,7 @@ import { useEffect, useRef, useState, lazy, Suspense } from 'react';
|
|
|
19
19
|
import * as stylex from '@stylexjs/stylex';
|
|
20
20
|
import { Text } from "../Text/index.js";
|
|
21
21
|
import { mergeProps, mergeRefs } from "../utils/index.js";
|
|
22
|
+
import { useDevWarning } from "../hooks/useDevWarning.js";
|
|
22
23
|
import { themeProps } from "../utils/themeProps.js";
|
|
23
24
|
import "../theme/tokens.stylex.js";
|
|
24
25
|
import { colorVars } from "../theme/tokens.stylex.js";
|
|
@@ -291,10 +292,10 @@ export function Timestamp({
|
|
|
291
292
|
}, interval);
|
|
292
293
|
return () => clearInterval(timer);
|
|
293
294
|
}, [isLive, isValidDate, effectiveFormat, diffSeconds]);
|
|
295
|
+
useDevWarning('Timestamp', `could not parse value ${JSON.stringify(value)} as a date. Rendering nothing.`, !isValidDate);
|
|
294
296
|
|
|
295
297
|
// Placed after all hooks so the hook order stays stable across renders.
|
|
296
298
|
if (!isValidDate) {
|
|
297
|
-
console.warn(`Timestamp: could not parse value ${JSON.stringify(value)} as a date. Rendering nothing.`);
|
|
298
299
|
return null;
|
|
299
300
|
}
|
|
300
301
|
const showTooltip = hasTooltip && effectiveFormat === 'relative';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useToast.d.ts","sourceRoot":"","sources":["../../src/Toast/useToast.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useToast.d.ts","sourceRoot":"","sources":["../../src/Toast/useToast.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAGV,WAAW,EAEZ,MAAM,SAAS,CAAC;AAoIjB;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,QAAQ,IAAI,WAAW,CAetC"}
|
package/dist/Toast/useToast.js
CHANGED
|
@@ -7,11 +7,11 @@ import { createRoot } from 'react-dom/client';
|
|
|
7
7
|
import { dataAttr } from "../naming.js";
|
|
8
8
|
import { ToastContext } from "./ToastContext.js";
|
|
9
9
|
import { ToastViewport } from "./ToastViewport.js";
|
|
10
|
+
import { warnOnce } from "../utils/devWarning.js";
|
|
10
11
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
11
12
|
// Fallback singleton
|
|
12
13
|
let fallbackContext = null;
|
|
13
14
|
let fallbackRoot = null;
|
|
14
|
-
let fallbackWarned = false;
|
|
15
15
|
const ROOT_THEME_ATTRS = ['data-theme', dataAttr('theme')];
|
|
16
16
|
|
|
17
17
|
// The fallback container is a detached tree with no ThemeContext, so this
|
|
@@ -57,10 +57,7 @@ function getFallbackContext() {
|
|
|
57
57
|
if (typeof document === 'undefined') {
|
|
58
58
|
throw new Error('useToast: Cannot create fallback viewport during SSR. ' + 'Wrap your app with <LayerProvider> or <AppShell>.');
|
|
59
59
|
}
|
|
60
|
-
|
|
61
|
-
fallbackWarned = true;
|
|
62
|
-
console.warn('useToast: No LayerProvider found. Using fallback viewport. ' + 'Wrap your app with <LayerProvider> or <AppShell> for full control.');
|
|
63
|
-
}
|
|
60
|
+
warnOnce('toast-fallback-viewport', 'useToast', 'No LayerProvider found. Using fallback viewport. ' + 'Wrap your app with <LayerProvider> or <AppShell> for full control.');
|
|
64
61
|
const container = document.createElement('div');
|
|
65
62
|
container.setAttribute('data-astryx-toast-fallback', '');
|
|
66
63
|
document.body.appendChild(container);
|
package/dist/astryx.css
CHANGED
|
@@ -92,10 +92,6 @@
|
|
|
92
92
|
.x9icjy1{--_segmented-control-radius:var(--radius-element)}
|
|
93
93
|
.xficto1{--_tab-indicator-bottom:calc(-1 * (var(--spacing-1) + var(--border-width)))}
|
|
94
94
|
.xbrl7fg{--_tab-indicator-bottom:var(--x---_tab-indicator-bottom)}
|
|
95
|
-
.x1wylu3c{--_thumbnail-elevation:none}
|
|
96
|
-
.x1jj9ot9{--_thumbnail-elevation:var(--shadow-high)}
|
|
97
|
-
.xj84mtc{--_thumbnail-elevation:var(--shadow-low)}
|
|
98
|
-
.x1kzb63o{--_thumbnail-elevation:var(--shadow-med)}
|
|
99
95
|
.x1f8er9e{--_tree-focus-outline-offset:0}
|
|
100
96
|
.x1hb5tod{--_tree-focus-outline:none}
|
|
101
97
|
.xnvcwyz{--astryx-section-padding:var(--spacing-0-5)}
|
|
@@ -603,7 +599,6 @@
|
|
|
603
599
|
.x1iobdd1:not(#\#):not(#\#):not(#\#){box-shadow:inset 0 0 0 1px var(--color-text-primary)}
|
|
604
600
|
.x1gnnqk1:not(#\#):not(#\#):not(#\#){box-shadow:none}
|
|
605
601
|
.x1p8z4y0:not(#\#):not(#\#):not(#\#){box-shadow:var(--_card-ring,0 0 transparent),var(--_card-elevation,0 0 transparent)}
|
|
606
|
-
.xeu2mjo:not(#\#):not(#\#):not(#\#){box-shadow:var(--_thumbnail-elevation,none)}
|
|
607
602
|
.x1kcpxr7:not(#\#):not(#\#):not(#\#){box-shadow:var(--shadow-high)}
|
|
608
603
|
.x1i5ehqx:not(#\#):not(#\#):not(#\#){box-shadow:var(--shadow-low)}
|
|
609
604
|
.x14hfi27:not(#\#):not(#\#):not(#\#){box-shadow:var(--shadow-med)}
|