@salt-ds/core 1.59.1 → 1.61.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/CHANGELOG.md +64 -0
- package/css/salt-core.css +366 -1
- package/dist-cjs/aria-announcer/AriaAnnounce.js +15 -3
- package/dist-cjs/aria-announcer/AriaAnnounce.js.map +1 -1
- package/dist-cjs/aria-announcer/AriaAnnouncerContext.js.map +1 -1
- package/dist-cjs/aria-announcer/AriaAnnouncerProvider.js +65 -43
- package/dist-cjs/aria-announcer/AriaAnnouncerProvider.js.map +1 -1
- package/dist-cjs/aria-announcer/announcementRegistry.js +31 -0
- package/dist-cjs/aria-announcer/announcementRegistry.js.map +1 -0
- package/dist-cjs/aria-announcer/useAriaAnnouncer.js +44 -16
- package/dist-cjs/aria-announcer/useAriaAnnouncer.js.map +1 -1
- package/dist-cjs/index.js +17 -1
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/navigation-item/NavigationItem.js +2 -0
- package/dist-cjs/navigation-item/NavigationItem.js.map +1 -1
- package/dist-cjs/pagination/Pagination.js +1 -0
- package/dist-cjs/pagination/Pagination.js.map +1 -1
- package/dist-cjs/rating/Rating.css.js +6 -0
- package/dist-cjs/rating/Rating.css.js.map +1 -0
- package/dist-cjs/rating/Rating.js +140 -0
- package/dist-cjs/rating/Rating.js.map +1 -0
- package/dist-cjs/rating/RatingItem.css.js +6 -0
- package/dist-cjs/rating/RatingItem.css.js.map +1 -0
- package/dist-cjs/rating/RatingItem.js +75 -0
- package/dist-cjs/rating/RatingItem.js.map +1 -0
- package/dist-cjs/salt-provider/SaltProvider.js +3 -1
- package/dist-cjs/salt-provider/SaltProvider.js.map +1 -1
- package/dist-cjs/semantic-icon-provider/SemanticIconProvider.js +22 -20
- package/dist-cjs/semantic-icon-provider/SemanticIconProvider.js.map +1 -1
- package/dist-cjs/spinner/Spinner.js +1 -0
- package/dist-cjs/spinner/Spinner.js.map +1 -1
- package/dist-cjs/tabs/Tab.css.js +6 -0
- package/dist-cjs/tabs/Tab.css.js.map +1 -0
- package/dist-cjs/tabs/Tab.js +211 -0
- package/dist-cjs/tabs/Tab.js.map +1 -0
- package/dist-cjs/tabs/TabAction.js +63 -0
- package/dist-cjs/tabs/TabAction.js.map +1 -0
- package/dist-cjs/tabs/TabBar.css.js +6 -0
- package/dist-cjs/tabs/TabBar.css.js.map +1 -0
- package/dist-cjs/tabs/TabBar.js +45 -0
- package/dist-cjs/tabs/TabBar.js.map +1 -0
- package/dist-cjs/tabs/TabList.css.js +6 -0
- package/dist-cjs/tabs/TabList.css.js.map +1 -0
- package/dist-cjs/tabs/TabList.js +281 -0
- package/dist-cjs/tabs/TabList.js.map +1 -0
- package/dist-cjs/tabs/TabPanel.css.js +6 -0
- package/dist-cjs/tabs/TabPanel.css.js.map +1 -0
- package/dist-cjs/tabs/TabPanel.js +98 -0
- package/dist-cjs/tabs/TabPanel.js.map +1 -0
- package/dist-cjs/tabs/TabTrigger.css.js +6 -0
- package/dist-cjs/tabs/TabTrigger.css.js.map +1 -0
- package/dist-cjs/tabs/TabTrigger.js +188 -0
- package/dist-cjs/tabs/TabTrigger.js.map +1 -0
- package/dist-cjs/tabs/Tabs.css.js +6 -0
- package/dist-cjs/tabs/Tabs.css.js.map +1 -0
- package/dist-cjs/tabs/Tabs.js +200 -0
- package/dist-cjs/tabs/Tabs.js.map +1 -0
- package/dist-cjs/tabs/internal/contexts/TabContext.js +26 -0
- package/dist-cjs/tabs/internal/contexts/TabContext.js.map +1 -0
- package/dist-cjs/tabs/internal/contexts/TabListLayoutContext.js +19 -0
- package/dist-cjs/tabs/internal/contexts/TabListLayoutContext.js.map +1 -0
- package/dist-cjs/tabs/internal/contexts/TabSlotRegistryContext.js +22 -0
- package/dist-cjs/tabs/internal/contexts/TabSlotRegistryContext.js.map +1 -0
- package/dist-cjs/tabs/internal/contexts/TabsContext.js +50 -0
- package/dist-cjs/tabs/internal/contexts/TabsContext.js.map +1 -0
- package/dist-cjs/tabs/internal/hooks/useFocusWithRetry.js +64 -0
- package/dist-cjs/tabs/internal/hooks/useFocusWithRetry.js.map +1 -0
- package/dist-cjs/tabs/internal/hooks/useTabListRecovery.js +76 -0
- package/dist-cjs/tabs/internal/hooks/useTabListRecovery.js.map +1 -0
- package/dist-cjs/tabs/internal/hooks/useTabRemovalHandler.js +165 -0
- package/dist-cjs/tabs/internal/hooks/useTabRemovalHandler.js.map +1 -0
- package/dist-cjs/tabs/internal/hooks/useTabSelectionFocus.js +87 -0
- package/dist-cjs/tabs/internal/hooks/useTabSelectionFocus.js.map +1 -0
- package/dist-cjs/tabs/internal/overflow/TabOverflowList.css.js +6 -0
- package/dist-cjs/tabs/internal/overflow/TabOverflowList.css.js.map +1 -0
- package/dist-cjs/tabs/internal/overflow/TabOverflowList.js +245 -0
- package/dist-cjs/tabs/internal/overflow/TabOverflowList.js.map +1 -0
- package/dist-cjs/tabs/internal/overflow/TabSlot.js +30 -0
- package/dist-cjs/tabs/internal/overflow/TabSlot.js.map +1 -0
- package/dist-cjs/tabs/internal/overflow/overflowMath.js +86 -0
- package/dist-cjs/tabs/internal/overflow/overflowMath.js.map +1 -0
- package/dist-cjs/tabs/internal/overflow/useOverflow.js +273 -0
- package/dist-cjs/tabs/internal/overflow/useOverflow.js.map +1 -0
- package/dist-cjs/tabs/internal/overflow/useOverflowLayoutState.js +99 -0
- package/dist-cjs/tabs/internal/overflow/useOverflowLayoutState.js.map +1 -0
- package/dist-cjs/tabs/internal/overflow/useOverflowSelectionState.js +68 -0
- package/dist-cjs/tabs/internal/overflow/useOverflowSelectionState.js.map +1 -0
- package/dist-cjs/tabs/internal/overflow/useRenderedTabWidth.js +92 -0
- package/dist-cjs/tabs/internal/overflow/useRenderedTabWidth.js.map +1 -0
- package/dist-cjs/tabs/internal/overflow/widthMeasurement.js +42 -0
- package/dist-cjs/tabs/internal/overflow/widthMeasurement.js.map +1 -0
- package/dist-cjs/tabs/internal/registry/useCollection.js +197 -0
- package/dist-cjs/tabs/internal/registry/useCollection.js.map +1 -0
- package/dist-cjs/tabs/internal/registry/useRenderedTabsRegistry.js +206 -0
- package/dist-cjs/tabs/internal/registry/useRenderedTabsRegistry.js.map +1 -0
- package/dist-cjs/tabs/internal/utils/domUtils.js +13 -0
- package/dist-cjs/tabs/internal/utils/domUtils.js.map +1 -0
- package/dist-cjs/tooltip/useAriaAnnounce.js +1 -0
- package/dist-cjs/tooltip/useAriaAnnounce.js.map +1 -1
- package/dist-es/aria-announcer/AriaAnnounce.js +15 -3
- package/dist-es/aria-announcer/AriaAnnounce.js.map +1 -1
- package/dist-es/aria-announcer/AriaAnnouncerContext.js.map +1 -1
- package/dist-es/aria-announcer/AriaAnnouncerProvider.js +67 -45
- package/dist-es/aria-announcer/AriaAnnouncerProvider.js.map +1 -1
- package/dist-es/aria-announcer/announcementRegistry.js +28 -0
- package/dist-es/aria-announcer/announcementRegistry.js.map +1 -0
- package/dist-es/aria-announcer/useAriaAnnouncer.js +45 -17
- package/dist-es/aria-announcer/useAriaAnnouncer.js.map +1 -1
- package/dist-es/index.js +9 -1
- package/dist-es/index.js.map +1 -1
- package/dist-es/navigation-item/NavigationItem.js +2 -0
- package/dist-es/navigation-item/NavigationItem.js.map +1 -1
- package/dist-es/pagination/Pagination.js +1 -0
- package/dist-es/pagination/Pagination.js.map +1 -1
- package/dist-es/rating/Rating.css.js +4 -0
- package/dist-es/rating/Rating.css.js.map +1 -0
- package/dist-es/rating/Rating.js +138 -0
- package/dist-es/rating/Rating.js.map +1 -0
- package/dist-es/rating/RatingItem.css.js +4 -0
- package/dist-es/rating/RatingItem.css.js.map +1 -0
- package/dist-es/rating/RatingItem.js +73 -0
- package/dist-es/rating/RatingItem.js.map +1 -0
- package/dist-es/salt-provider/SaltProvider.js +3 -1
- package/dist-es/salt-provider/SaltProvider.js.map +1 -1
- package/dist-es/semantic-icon-provider/SemanticIconProvider.js +23 -21
- package/dist-es/semantic-icon-provider/SemanticIconProvider.js.map +1 -1
- package/dist-es/spinner/Spinner.js +1 -0
- package/dist-es/spinner/Spinner.js.map +1 -1
- package/dist-es/tabs/Tab.css.js +4 -0
- package/dist-es/tabs/Tab.css.js.map +1 -0
- package/dist-es/tabs/Tab.js +209 -0
- package/dist-es/tabs/Tab.js.map +1 -0
- package/dist-es/tabs/TabAction.js +61 -0
- package/dist-es/tabs/TabAction.js.map +1 -0
- package/dist-es/tabs/TabBar.css.js +4 -0
- package/dist-es/tabs/TabBar.css.js.map +1 -0
- package/dist-es/tabs/TabBar.js +43 -0
- package/dist-es/tabs/TabBar.js.map +1 -0
- package/dist-es/tabs/TabList.css.js +4 -0
- package/dist-es/tabs/TabList.css.js.map +1 -0
- package/dist-es/tabs/TabList.js +279 -0
- package/dist-es/tabs/TabList.js.map +1 -0
- package/dist-es/tabs/TabPanel.css.js +4 -0
- package/dist-es/tabs/TabPanel.css.js.map +1 -0
- package/dist-es/tabs/TabPanel.js +96 -0
- package/dist-es/tabs/TabPanel.js.map +1 -0
- package/dist-es/tabs/TabTrigger.css.js +4 -0
- package/dist-es/tabs/TabTrigger.css.js.map +1 -0
- package/dist-es/tabs/TabTrigger.js +186 -0
- package/dist-es/tabs/TabTrigger.js.map +1 -0
- package/dist-es/tabs/Tabs.css.js +4 -0
- package/dist-es/tabs/Tabs.css.js.map +1 -0
- package/dist-es/tabs/Tabs.js +198 -0
- package/dist-es/tabs/Tabs.js.map +1 -0
- package/dist-es/tabs/internal/contexts/TabContext.js +23 -0
- package/dist-es/tabs/internal/contexts/TabContext.js.map +1 -0
- package/dist-es/tabs/internal/contexts/TabListLayoutContext.js +16 -0
- package/dist-es/tabs/internal/contexts/TabListLayoutContext.js.map +1 -0
- package/dist-es/tabs/internal/contexts/TabSlotRegistryContext.js +19 -0
- package/dist-es/tabs/internal/contexts/TabSlotRegistryContext.js.map +1 -0
- package/dist-es/tabs/internal/contexts/TabsContext.js +47 -0
- package/dist-es/tabs/internal/contexts/TabsContext.js.map +1 -0
- package/dist-es/tabs/internal/hooks/useFocusWithRetry.js +62 -0
- package/dist-es/tabs/internal/hooks/useFocusWithRetry.js.map +1 -0
- package/dist-es/tabs/internal/hooks/useTabListRecovery.js +74 -0
- package/dist-es/tabs/internal/hooks/useTabListRecovery.js.map +1 -0
- package/dist-es/tabs/internal/hooks/useTabRemovalHandler.js +163 -0
- package/dist-es/tabs/internal/hooks/useTabRemovalHandler.js.map +1 -0
- package/dist-es/tabs/internal/hooks/useTabSelectionFocus.js +85 -0
- package/dist-es/tabs/internal/hooks/useTabSelectionFocus.js.map +1 -0
- package/dist-es/tabs/internal/overflow/TabOverflowList.css.js +4 -0
- package/dist-es/tabs/internal/overflow/TabOverflowList.css.js.map +1 -0
- package/dist-es/tabs/internal/overflow/TabOverflowList.js +243 -0
- package/dist-es/tabs/internal/overflow/TabOverflowList.js.map +1 -0
- package/dist-es/tabs/internal/overflow/TabSlot.js +28 -0
- package/dist-es/tabs/internal/overflow/TabSlot.js.map +1 -0
- package/dist-es/tabs/internal/overflow/overflowMath.js +82 -0
- package/dist-es/tabs/internal/overflow/overflowMath.js.map +1 -0
- package/dist-es/tabs/internal/overflow/useOverflow.js +271 -0
- package/dist-es/tabs/internal/overflow/useOverflow.js.map +1 -0
- package/dist-es/tabs/internal/overflow/useOverflowLayoutState.js +97 -0
- package/dist-es/tabs/internal/overflow/useOverflowLayoutState.js.map +1 -0
- package/dist-es/tabs/internal/overflow/useOverflowSelectionState.js +66 -0
- package/dist-es/tabs/internal/overflow/useOverflowSelectionState.js.map +1 -0
- package/dist-es/tabs/internal/overflow/useRenderedTabWidth.js +90 -0
- package/dist-es/tabs/internal/overflow/useRenderedTabWidth.js.map +1 -0
- package/dist-es/tabs/internal/overflow/widthMeasurement.js +36 -0
- package/dist-es/tabs/internal/overflow/widthMeasurement.js.map +1 -0
- package/dist-es/tabs/internal/registry/useCollection.js +195 -0
- package/dist-es/tabs/internal/registry/useCollection.js.map +1 -0
- package/dist-es/tabs/internal/registry/useRenderedTabsRegistry.js +204 -0
- package/dist-es/tabs/internal/registry/useRenderedTabsRegistry.js.map +1 -0
- package/dist-es/tabs/internal/utils/domUtils.js +11 -0
- package/dist-es/tabs/internal/utils/domUtils.js.map +1 -0
- package/dist-es/tooltip/useAriaAnnounce.js +1 -0
- package/dist-es/tooltip/useAriaAnnounce.js.map +1 -1
- package/dist-types/aria-announcer/AriaAnnounce.d.ts +9 -2
- package/dist-types/aria-announcer/AriaAnnouncerContext.d.ts +26 -2
- package/dist-types/aria-announcer/AriaAnnouncerProvider.d.ts +6 -7
- package/dist-types/aria-announcer/announcementRegistry.d.ts +5 -0
- package/dist-types/index.d.ts +2 -0
- package/dist-types/rating/Rating.d.ts +48 -0
- package/dist-types/rating/RatingItem.d.ts +47 -0
- package/dist-types/rating/index.d.ts +1 -0
- package/dist-types/semantic-icon-provider/SemanticIconProvider.d.ts +21 -19
- package/dist-types/tabs/Tab.d.ts +12 -0
- package/dist-types/tabs/TabAction.d.ts +4 -0
- package/dist-types/tabs/TabBar.d.ts +12 -0
- package/dist-types/tabs/TabList.d.ts +12 -0
- package/dist-types/tabs/TabPanel.d.ts +9 -0
- package/dist-types/tabs/TabTrigger.d.ts +4 -0
- package/dist-types/tabs/Tabs.d.ts +20 -0
- package/dist-types/tabs/index.d.ts +7 -0
- package/dist-types/tabs/internal/contexts/TabContext.d.ts +12 -0
- package/dist-types/tabs/internal/contexts/TabListLayoutContext.d.ts +9 -0
- package/dist-types/tabs/internal/contexts/TabSlotRegistryContext.d.ts +5 -0
- package/dist-types/tabs/internal/contexts/TabsContext.d.ts +43 -0
- package/dist-types/tabs/internal/hooks/useFocusWithRetry.d.ts +9 -0
- package/dist-types/tabs/internal/hooks/useTabListRecovery.d.ts +12 -0
- package/dist-types/tabs/internal/hooks/useTabRemovalHandler.d.ts +32 -0
- package/dist-types/tabs/internal/hooks/useTabSelectionFocus.d.ts +15 -0
- package/dist-types/tabs/internal/overflow/TabOverflowList.d.ts +10 -0
- package/dist-types/tabs/internal/overflow/TabSlot.d.ts +6 -0
- package/dist-types/tabs/internal/overflow/overflowMath.d.ts +18 -0
- package/dist-types/tabs/internal/overflow/useOverflow.d.ts +11 -0
- package/dist-types/tabs/internal/overflow/useOverflowLayoutState.d.ts +13 -0
- package/dist-types/tabs/internal/overflow/useOverflowSelectionState.d.ts +13 -0
- package/dist-types/tabs/internal/overflow/useRenderedTabWidth.d.ts +12 -0
- package/dist-types/tabs/internal/overflow/widthMeasurement.d.ts +5 -0
- package/dist-types/tabs/internal/registry/useCollection.d.ts +30 -0
- package/dist-types/tabs/internal/registry/useRenderedTabsRegistry.d.ts +12 -0
- package/dist-types/tabs/internal/utils/domUtils.d.ts +1 -0
- package/package.json +3 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AriaAnnouncerProvider.js","sources":["../src/aria-announcer/AriaAnnouncerProvider.tsx"],"sourcesContent":["import {\n type
|
|
1
|
+
{"version":3,"file":"AriaAnnouncerProvider.js","sources":["../src/aria-announcer/AriaAnnouncerProvider.tsx"],"sourcesContent":["import {\n type ComponentPropsWithRef,\n forwardRef,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { useIsomorphicLayoutEffect } from \"../utils/useIsomorphicLayoutEffect\";\nimport {\n type AnnounceFnOptions,\n AriaAnnouncerContext,\n} from \"./AriaAnnouncerContext\";\nimport { registerAnnouncementTarget } from \"./announcementRegistry\";\n\nexport const ANNOUNCEMENT_TIME_IN_DOM = 300; // time between DOM updates\n\nexport interface AriaAnnouncerProviderProps\n extends ComponentPropsWithRef<\"div\"> {\n /**\n * Optional target key used to route announcements to this provider.\n */\n target?: string;\n}\n\nconst AnnouncementRegion = forwardRef<\n HTMLDivElement,\n ComponentPropsWithRef<\"div\">\n>(function AnnouncementRegion(props, ref) {\n return (\n <div\n // Keep the region simple for maximum assistive-tech compatibility.\n // aria-live is applied by the caller (polite/assertive).\n aria-atomic={false}\n ref={ref}\n {...props}\n />\n );\n});\n\ntype AnnouncementMessage = {\n id: string;\n message: string;\n};\n\nexport const AriaAnnouncerProvider = forwardRef<\n HTMLDivElement,\n AriaAnnouncerProviderProps\n>(function AriaAnnouncerProvider({ children, style, target, ...rest }, ref) {\n const [politeAnnouncements, setPoliteAnnouncements] = useState<\n AnnouncementMessage[]\n >([]);\n const [assertiveAnnouncements, setAssertiveAnnouncements] = useState<\n AnnouncementMessage[]\n >([]);\n\n const idCounterRef = useRef(0);\n\n const makeAnnouncement = useCallback(\n (\n message: string,\n assertiveness: \"polite\" | \"assertive\" = \"polite\",\n duration: number = ANNOUNCEMENT_TIME_IN_DOM,\n ) => {\n idCounterRef.current += 1;\n // Date.now() can collide when multiple announcements are created in the same millisecond\n // (e.g. tests with cy.clock, batching, or multiple announces during one tick).\n // Add a monotonic counter suffix to guarantee uniqueness.\n const id = `announce-${assertiveness}-${Date.now()}-${idCounterRef.current}`;\n if (assertiveness === \"polite\") {\n setPoliteAnnouncements((previous) => {\n return previous.concat({ id, message });\n });\n\n setTimeout(() => {\n setPoliteAnnouncements((previous) =>\n previous.filter((announcement) => announcement.id !== id),\n );\n }, duration);\n } else {\n setAssertiveAnnouncements((previous) => {\n return previous.concat({ id, message });\n });\n\n setTimeout(() => {\n setAssertiveAnnouncements((previous) =>\n previous.filter((announcement) => announcement.id !== id),\n );\n }, duration);\n }\n },\n [],\n );\n\n const announce = useCallback(\n (\n announcement: string,\n legacyDelayOrOptions: number | AnnounceFnOptions | undefined = {},\n ) => {\n // Legacy delay (number arg) is handled by useAriaAnnouncer; if we also delayed\n // here we'd apply it twice. Keep supporting the signature but ignore the delay.\n const options: AnnounceFnOptions =\n typeof legacyDelayOrOptions === \"object\" && legacyDelayOrOptions\n ? legacyDelayOrOptions\n : {};\n\n makeAnnouncement(\n announcement,\n options.ariaLive,\n options.duration ?? ANNOUNCEMENT_TIME_IN_DOM,\n );\n },\n [makeAnnouncement],\n );\n\n const value = useMemo(() => ({ announce }), [announce]);\n\n useIsomorphicLayoutEffect(() => {\n if (!target) {\n return;\n }\n return registerAnnouncementTarget(target, announce);\n }, [announce, target]);\n\n return (\n <AriaAnnouncerContext.Provider value={value}>\n {children}\n <div\n // hidden styling based on https://tailwindcss.com/docs/screen-readers\n style={{\n position: \"absolute\",\n height: 1,\n width: 1,\n padding: 0,\n margin: -1,\n overflow: \"hidden\",\n clip: \"rect(0, 0, 0, 0)\",\n whiteSpace: \"nowrap\",\n borderWidth: 0,\n ...style,\n }}\n {...rest}\n ref={ref}\n >\n <AnnouncementRegion aria-live=\"polite\">\n {politeAnnouncements.map((announcement) => (\n <div key={`polite-${announcement.id}`}>{announcement.message}</div>\n ))}\n </AnnouncementRegion>\n <AnnouncementRegion aria-live=\"assertive\">\n {assertiveAnnouncements.map((announcement) => (\n <div key={`assertive-${announcement.id}`}>\n {announcement.message}\n </div>\n ))}\n </AnnouncementRegion>\n </div>\n </AriaAnnouncerContext.Provider>\n );\n});\n"],"names":["forwardRef","AnnouncementRegion","jsx","AriaAnnouncerProvider","useState","useRef","useCallback","useMemo","useIsomorphicLayoutEffect","registerAnnouncementTarget","jsxs","AriaAnnouncerContext"],"mappings":"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"}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
const registry = /* @__PURE__ */ new Map();
|
|
4
|
+
function registerAnnouncementTarget(target, announce) {
|
|
5
|
+
const stack = registry.get(target) ?? [];
|
|
6
|
+
stack.push(announce);
|
|
7
|
+
registry.set(target, stack);
|
|
8
|
+
return () => {
|
|
9
|
+
const currentStack = registry.get(target);
|
|
10
|
+
if (!currentStack) {
|
|
11
|
+
return;
|
|
12
|
+
}
|
|
13
|
+
const index = currentStack.lastIndexOf(announce);
|
|
14
|
+
if (index !== -1) {
|
|
15
|
+
currentStack.splice(index, 1);
|
|
16
|
+
}
|
|
17
|
+
if (currentStack.length === 0) {
|
|
18
|
+
registry.delete(target);
|
|
19
|
+
} else {
|
|
20
|
+
registry.set(target, currentStack);
|
|
21
|
+
}
|
|
22
|
+
};
|
|
23
|
+
}
|
|
24
|
+
function getAnnouncementTarget(target) {
|
|
25
|
+
const stack = registry.get(target);
|
|
26
|
+
return stack == null ? void 0 : stack[stack.length - 1];
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
exports.getAnnouncementTarget = getAnnouncementTarget;
|
|
30
|
+
exports.registerAnnouncementTarget = registerAnnouncementTarget;
|
|
31
|
+
//# sourceMappingURL=announcementRegistry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"announcementRegistry.js","sources":["../src/aria-announcer/announcementRegistry.ts"],"sourcesContent":["import type { AnnounceFnOptions } from \"./AriaAnnouncerContext\";\n\ntype Announcer = (announcement: string, options?: AnnounceFnOptions) => void;\n\nconst registry = new Map<string, Announcer[]>();\n\nexport function registerAnnouncementTarget(\n target: string,\n announce: Announcer,\n): () => void {\n const stack = registry.get(target) ?? [];\n stack.push(announce);\n registry.set(target, stack);\n\n return () => {\n const currentStack = registry.get(target);\n if (!currentStack) {\n return;\n }\n\n // Remove the most recent matching announcer first (LIFO nested providers).\n const index = currentStack.lastIndexOf(announce);\n if (index !== -1) {\n currentStack.splice(index, 1);\n }\n\n if (currentStack.length === 0) {\n registry.delete(target);\n } else {\n registry.set(target, currentStack);\n }\n };\n}\n\nexport function getAnnouncementTarget(target: string): Announcer | undefined {\n const stack = registry.get(target);\n return stack?.[stack.length - 1];\n}\n"],"names":[],"mappings":";;AAIA,MAAM,QAAA,uBAAe,GAAA,EAAyB;AAEvC,SAAS,0BAAA,CACd,QACA,QAAA,EACY;AACZ,EAAA,MAAM,KAAA,GAAQ,QAAA,CAAS,GAAA,CAAI,MAAM,KAAK,EAAC;AACvC,EAAA,KAAA,CAAM,KAAK,QAAQ,CAAA;AACnB,EAAA,QAAA,CAAS,GAAA,CAAI,QAAQ,KAAK,CAAA;AAE1B,EAAA,OAAO,MAAM;AACX,IAAA,MAAM,YAAA,GAAe,QAAA,CAAS,GAAA,CAAI,MAAM,CAAA;AACxC,IAAA,IAAI,CAAC,YAAA,EAAc;AACjB,MAAA;AAAA,IACF;AAGA,IAAA,MAAM,KAAA,GAAQ,YAAA,CAAa,WAAA,CAAY,QAAQ,CAAA;AAC/C,IAAA,IAAI,UAAU,EAAA,EAAI;AAChB,MAAA,YAAA,CAAa,MAAA,CAAO,OAAO,CAAC,CAAA;AAAA,IAC9B;AAEA,IAAA,IAAI,YAAA,CAAa,WAAW,CAAA,EAAG;AAC7B,MAAA,QAAA,CAAS,OAAO,MAAM,CAAA;AAAA,IACxB,CAAA,MAAO;AACL,MAAA,QAAA,CAAS,GAAA,CAAI,QAAQ,YAAY,CAAA;AAAA,IACnC;AAAA,EACF,CAAA;AACF;AAEO,SAAS,sBAAsB,MAAA,EAAuC;AAC3E,EAAA,MAAM,KAAA,GAAQ,QAAA,CAAS,GAAA,CAAI,MAAM,CAAA;AACjC,EAAA,OAAO,KAAA,IAAA,IAAA,GAAA,MAAA,GAAA,KAAA,CAAQ,MAAM,MAAA,GAAS,CAAA,CAAA;AAChC;;;;;"}
|
|
@@ -2,26 +2,61 @@
|
|
|
2
2
|
|
|
3
3
|
var React = require('react');
|
|
4
4
|
var debounce = require('../utils/debounce.js');
|
|
5
|
+
require('clsx');
|
|
6
|
+
require('react/jsx-runtime');
|
|
7
|
+
require('../utils/useFloatingUI/useFloatingUI.js');
|
|
8
|
+
require('../utils/useId.js');
|
|
9
|
+
require('../salt-provider/SaltProvider.js');
|
|
10
|
+
require('../viewport/ViewportProvider.js');
|
|
5
11
|
var AriaAnnouncerContext = require('./AriaAnnouncerContext.js');
|
|
12
|
+
var announcementRegistry = require('./announcementRegistry.js');
|
|
6
13
|
|
|
14
|
+
let warnedOnce = false;
|
|
15
|
+
let warnedLegacyOnce = false;
|
|
7
16
|
const useAriaAnnouncer = ({
|
|
8
17
|
debounce: debounceInterval = 0
|
|
9
18
|
} = {}) => {
|
|
10
19
|
const context = React.useContext(AriaAnnouncerContext.AriaAnnouncerContext);
|
|
11
|
-
const mountedRef = React.useRef(true);
|
|
12
20
|
const baseAnnounce = React.useCallback(
|
|
13
|
-
(announcement,
|
|
21
|
+
(announcement, delayOrOptions = {}) => {
|
|
22
|
+
const isLegacy = typeof delayOrOptions === "number";
|
|
23
|
+
let legacyDelay;
|
|
24
|
+
let options = {};
|
|
25
|
+
if (isLegacy) {
|
|
26
|
+
legacyDelay = delayOrOptions;
|
|
27
|
+
} else {
|
|
28
|
+
options = delayOrOptions;
|
|
29
|
+
}
|
|
14
30
|
const isReactAnnouncerInstalled = context == null ? void 0 : context.announce;
|
|
15
|
-
if (process.env.NODE_ENV !== "production")
|
|
31
|
+
if (process.env.NODE_ENV !== "production") {
|
|
32
|
+
if (legacyDelay !== void 0 && !warnedLegacyOnce) {
|
|
33
|
+
console.warn(
|
|
34
|
+
"useAriaAnnouncer `delay` prop is deprecated, use `duration` through `AnnounceFnOptions` instead."
|
|
35
|
+
);
|
|
36
|
+
warnedLegacyOnce = true;
|
|
37
|
+
}
|
|
38
|
+
if (!isReactAnnouncerInstalled && !warnedOnce) {
|
|
39
|
+
console.warn(
|
|
40
|
+
"useAriaAnnouncer is being used without an AriaAnnouncerProvider. Your application should be wrapped in an AriaAnnouncerProvider"
|
|
41
|
+
);
|
|
42
|
+
warnedOnce = true;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
16
45
|
function makeAnnouncement() {
|
|
17
|
-
if (
|
|
18
|
-
|
|
19
|
-
|
|
46
|
+
if (options.target) {
|
|
47
|
+
const targetAnnouncer = announcementRegistry.getAnnouncementTarget(options.target);
|
|
48
|
+
if (targetAnnouncer) {
|
|
49
|
+
const { target: _target, ...targetOptions } = options;
|
|
50
|
+
targetAnnouncer(announcement, targetOptions);
|
|
51
|
+
return;
|
|
20
52
|
}
|
|
21
53
|
}
|
|
54
|
+
if (isReactAnnouncerInstalled) {
|
|
55
|
+
context.announce(announcement, isLegacy ? legacyDelay : options);
|
|
56
|
+
}
|
|
22
57
|
}
|
|
23
|
-
if (
|
|
24
|
-
setTimeout(makeAnnouncement,
|
|
58
|
+
if (legacyDelay) {
|
|
59
|
+
setTimeout(makeAnnouncement, legacyDelay);
|
|
25
60
|
} else {
|
|
26
61
|
makeAnnouncement();
|
|
27
62
|
}
|
|
@@ -32,20 +67,13 @@ const useAriaAnnouncer = ({
|
|
|
32
67
|
() => debounceInterval > 0 ? debounce.debounce(baseAnnounce, debounceInterval) : baseAnnounce,
|
|
33
68
|
[baseAnnounce, debounceInterval]
|
|
34
69
|
);
|
|
35
|
-
|
|
70
|
+
return React.useMemo(
|
|
36
71
|
() => ({
|
|
37
72
|
...context,
|
|
38
73
|
announce
|
|
39
74
|
}),
|
|
40
75
|
[context, announce]
|
|
41
76
|
);
|
|
42
|
-
React.useEffect(() => {
|
|
43
|
-
mountedRef.current = true;
|
|
44
|
-
return () => {
|
|
45
|
-
mountedRef.current = false;
|
|
46
|
-
};
|
|
47
|
-
}, []);
|
|
48
|
-
return ariaAnnouncer;
|
|
49
77
|
};
|
|
50
78
|
|
|
51
79
|
exports.useAriaAnnouncer = useAriaAnnouncer;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAriaAnnouncer.js","sources":["../src/aria-announcer/useAriaAnnouncer.ts"],"sourcesContent":["import { useCallback, useContext,
|
|
1
|
+
{"version":3,"file":"useAriaAnnouncer.js","sources":["../src/aria-announcer/useAriaAnnouncer.ts"],"sourcesContent":["import { useCallback, useContext, useMemo } from \"react\";\nimport { debounce } from \"../utils\";\nimport {\n type AnnounceFnOptions,\n type AriaAnnouncer,\n AriaAnnouncerContext,\n} from \"./AriaAnnouncerContext\";\nimport { getAnnouncementTarget } from \"./announcementRegistry\";\n\nexport type useAnnouncerOptions = {\n debounce?: number;\n};\nexport type useAriaAnnouncerHook = (\n options?: useAnnouncerOptions,\n) => AriaAnnouncer;\n\nlet warnedOnce = false;\nlet warnedLegacyOnce = false;\n\nexport const useAriaAnnouncer: useAriaAnnouncerHook = ({\n debounce: debounceInterval = 0,\n} = {}) => {\n const context = useContext(AriaAnnouncerContext);\n const baseAnnounce = useCallback(\n (announcement: string, delayOrOptions: number | AnnounceFnOptions = {}) => {\n const isLegacy = typeof delayOrOptions === \"number\";\n let legacyDelay: number | undefined;\n let options: AnnounceFnOptions = {};\n /** TODO remove legacy `delay` arg (number) in favour of `options` (AnnounceFnOptions) as a breaking change */\n if (isLegacy) {\n legacyDelay = delayOrOptions as number;\n } else {\n options = delayOrOptions;\n }\n const isReactAnnouncerInstalled = context?.announce;\n\n if (process.env.NODE_ENV !== \"production\") {\n if (legacyDelay !== undefined && !warnedLegacyOnce) {\n console.warn(\n \"useAriaAnnouncer `delay` prop is deprecated, use `duration` through `AnnounceFnOptions` instead.\",\n );\n warnedLegacyOnce = true;\n }\n if (!isReactAnnouncerInstalled && !warnedOnce) {\n console.warn(\n \"useAriaAnnouncer is being used without an AriaAnnouncerProvider. Your application should be wrapped in an AriaAnnouncerProvider\",\n );\n warnedOnce = true;\n }\n }\n\n function makeAnnouncement() {\n if (options.target) {\n const targetAnnouncer = getAnnouncementTarget(options.target);\n if (targetAnnouncer) {\n const { target: _target, ...targetOptions } = options;\n targetAnnouncer(announcement, targetOptions);\n return;\n }\n }\n\n // Allow announcements from component cleanup.\n // React runs effect cleanups in parent->child ordering, so gating announcements on a\n // hook-level mounted flag can incorrectly block announcements that occur during unmount\n // (e.g. Spinner completionAnnouncement).\n if (isReactAnnouncerInstalled) {\n context.announce(announcement, isLegacy ? legacyDelay : options);\n }\n }\n\n if (legacyDelay) {\n setTimeout(makeAnnouncement, legacyDelay);\n } else {\n makeAnnouncement();\n }\n },\n [context],\n );\n\n const announce = useMemo(\n () =>\n debounceInterval > 0\n ? debounce(baseAnnounce, debounceInterval)\n : baseAnnounce,\n [baseAnnounce, debounceInterval],\n );\n\n return useMemo(\n () => ({\n ...context,\n announce,\n }),\n [context, announce],\n );\n};\n"],"names":["useContext","AriaAnnouncerContext","useCallback","getAnnouncementTarget","useMemo","debounce"],"mappings":";;;;;;;;;;;;;AAgBA,IAAI,UAAA,GAAa,KAAA;AACjB,IAAI,gBAAA,GAAmB,KAAA;AAEhB,MAAM,mBAAyC,CAAC;AAAA,EACrD,UAAU,gBAAA,GAAmB;AAC/B,CAAA,GAAI,EAAC,KAAM;AACT,EAAA,MAAM,OAAA,GAAUA,iBAAWC,yCAAoB,CAAA;AAC/C,EAAA,MAAM,YAAA,GAAeC,iBAAA;AAAA,IACnB,CAAC,YAAA,EAAsB,cAAA,GAA6C,EAAC,KAAM;AACzE,MAAA,MAAM,QAAA,GAAW,OAAO,cAAA,KAAmB,QAAA;AAC3C,MAAA,IAAI,WAAA;AACJ,MAAA,IAAI,UAA6B,EAAC;AAElC,MAAA,IAAI,QAAA,EAAU;AACZ,QAAA,WAAA,GAAc,cAAA;AAAA,MAChB,CAAA,MAAO;AACL,QAAA,OAAA,GAAU,cAAA;AAAA,MACZ;AACA,MAAA,MAAM,4BAA4B,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAS,QAAA;AAE3C,MAAA,IAAI,OAAA,CAAQ,GAAA,CAAI,QAAA,KAAa,YAAA,EAAc;AACzC,QAAA,IAAI,WAAA,KAAgB,MAAA,IAAa,CAAC,gBAAA,EAAkB;AAClD,UAAA,OAAA,CAAQ,IAAA;AAAA,YACN;AAAA,WACF;AACA,UAAA,gBAAA,GAAmB,IAAA;AAAA,QACrB;AACA,QAAA,IAAI,CAAC,yBAAA,IAA6B,CAAC,UAAA,EAAY;AAC7C,UAAA,OAAA,CAAQ,IAAA;AAAA,YACN;AAAA,WACF;AACA,UAAA,UAAA,GAAa,IAAA;AAAA,QACf;AAAA,MACF;AAEA,MAAA,SAAS,gBAAA,GAAmB;AAC1B,QAAA,IAAI,QAAQ,MAAA,EAAQ;AAClB,UAAA,MAAM,eAAA,GAAkBC,0CAAA,CAAsB,OAAA,CAAQ,MAAM,CAAA;AAC5D,UAAA,IAAI,eAAA,EAAiB;AACnB,YAAA,MAAM,EAAE,MAAA,EAAQ,OAAA,EAAS,GAAG,eAAc,GAAI,OAAA;AAC9C,YAAA,eAAA,CAAgB,cAAc,aAAa,CAAA;AAC3C,YAAA;AAAA,UACF;AAAA,QACF;AAMA,QAAA,IAAI,yBAAA,EAA2B;AAC7B,UAAA,OAAA,CAAQ,QAAA,CAAS,YAAA,EAAc,QAAA,GAAW,WAAA,GAAc,OAAO,CAAA;AAAA,QACjE;AAAA,MACF;AAEA,MAAA,IAAI,WAAA,EAAa;AACf,QAAA,UAAA,CAAW,kBAAkB,WAAW,CAAA;AAAA,MAC1C,CAAA,MAAO;AACL,QAAA,gBAAA,EAAiB;AAAA,MACnB;AAAA,IACF,CAAA;AAAA,IACA,CAAC,OAAO;AAAA,GACV;AAEA,EAAA,MAAM,QAAA,GAAWC,aAAA;AAAA,IACf,MACE,gBAAA,GAAmB,CAAA,GACfC,iBAAA,CAAS,YAAA,EAAc,gBAAgB,CAAA,GACvC,YAAA;AAAA,IACN,CAAC,cAAc,gBAAgB;AAAA,GACjC;AAEA,EAAA,OAAOD,aAAA;AAAA,IACL,OAAO;AAAA,MACL,GAAG,OAAA;AAAA,MACH;AAAA,KACF,CAAA;AAAA,IACA,CAAC,SAAS,QAAQ;AAAA,GACpB;AACF;;;;"}
|
package/dist-cjs/index.js
CHANGED
|
@@ -90,6 +90,7 @@ var LinearProgress = require('./progress/LinearProgress/LinearProgress.js');
|
|
|
90
90
|
var RadioButton = require('./radio-button/RadioButton.js');
|
|
91
91
|
var RadioButtonGroup = require('./radio-button/RadioButtonGroup.js');
|
|
92
92
|
var RadioButtonIcon = require('./radio-button/RadioButtonIcon.js');
|
|
93
|
+
var Rating = require('./rating/Rating.js');
|
|
93
94
|
var SaltProvider = require('./salt-provider/SaltProvider.js');
|
|
94
95
|
var Scrim = require('./scrim/Scrim.js');
|
|
95
96
|
var SegmentedButtonGroup = require('./segmented-button-group/SegmentedButtonGroup.js');
|
|
@@ -114,6 +115,13 @@ var TFoot = require('./table/TFoot.js');
|
|
|
114
115
|
var TH = require('./table/TH.js');
|
|
115
116
|
var THead = require('./table/THead.js');
|
|
116
117
|
var TR = require('./table/TR.js');
|
|
118
|
+
var Tab = require('./tabs/Tab.js');
|
|
119
|
+
var TabAction = require('./tabs/TabAction.js');
|
|
120
|
+
var TabBar = require('./tabs/TabBar.js');
|
|
121
|
+
var TabList = require('./tabs/TabList.js');
|
|
122
|
+
var TabPanel = require('./tabs/TabPanel.js');
|
|
123
|
+
var Tabs = require('./tabs/Tabs.js');
|
|
124
|
+
var TabTrigger = require('./tabs/TabTrigger.js');
|
|
117
125
|
var Tag = require('./tag/Tag.js');
|
|
118
126
|
var Code = require('./text/Code.js');
|
|
119
127
|
var Display = require('./text/Display.js');
|
|
@@ -179,7 +187,7 @@ exports.AccordionHeader = AccordionHeader.AccordionHeader;
|
|
|
179
187
|
exports.AccordionPanel = AccordionPanel.AccordionPanel;
|
|
180
188
|
exports.AriaAnnounce = AriaAnnounce.AriaAnnounce;
|
|
181
189
|
exports.AriaAnnouncerContext = AriaAnnouncerContext.AriaAnnouncerContext;
|
|
182
|
-
exports.
|
|
190
|
+
exports.ANNOUNCEMENT_TIME_IN_DOM = AriaAnnouncerProvider.ANNOUNCEMENT_TIME_IN_DOM;
|
|
183
191
|
exports.AriaAnnouncerProvider = AriaAnnouncerProvider.AriaAnnouncerProvider;
|
|
184
192
|
exports.useAriaAnnouncer = useAriaAnnouncer.useAriaAnnouncer;
|
|
185
193
|
exports.Avatar = Avatar.Avatar;
|
|
@@ -276,6 +284,7 @@ exports.LinearProgress = LinearProgress.LinearProgress;
|
|
|
276
284
|
exports.RadioButton = RadioButton.RadioButton;
|
|
277
285
|
exports.RadioButtonGroup = RadioButtonGroup.RadioButtonGroup;
|
|
278
286
|
exports.RadioButtonIcon = RadioButtonIcon.RadioButtonIcon;
|
|
287
|
+
exports.Rating = Rating.Rating;
|
|
279
288
|
exports.BreakpointContext = SaltProvider.BreakpointContext;
|
|
280
289
|
exports.DEFAULT_DENSITY = SaltProvider.DEFAULT_DENSITY;
|
|
281
290
|
exports.DensityContext = SaltProvider.DensityContext;
|
|
@@ -312,6 +321,13 @@ exports.TFoot = TFoot.TFoot;
|
|
|
312
321
|
exports.TH = TH.TH;
|
|
313
322
|
exports.THead = THead.THead;
|
|
314
323
|
exports.TR = TR.TR;
|
|
324
|
+
exports.Tab = Tab.Tab;
|
|
325
|
+
exports.TabAction = TabAction.TabAction;
|
|
326
|
+
exports.TabBar = TabBar.TabBar;
|
|
327
|
+
exports.TabList = TabList.TabList;
|
|
328
|
+
exports.TabPanel = TabPanel.TabPanel;
|
|
329
|
+
exports.Tabs = Tabs.Tabs;
|
|
330
|
+
exports.TabTrigger = TabTrigger.TabTrigger;
|
|
315
331
|
exports.Tag = Tag.Tag;
|
|
316
332
|
exports.Code = Code.Code;
|
|
317
333
|
exports.Display1 = Display.Display1;
|
package/dist-cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -30,6 +30,7 @@ const NavigationItem = React.forwardRef(
|
|
|
30
30
|
level = 0,
|
|
31
31
|
onExpand,
|
|
32
32
|
style: styleProp,
|
|
33
|
+
"aria-controls": ariaControls,
|
|
33
34
|
...rest
|
|
34
35
|
} = props;
|
|
35
36
|
const targetWindow = window.useWindow();
|
|
@@ -67,6 +68,7 @@ const NavigationItem = React.forwardRef(
|
|
|
67
68
|
),
|
|
68
69
|
render: render ?? (isLink ? void 0 : /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button" })),
|
|
69
70
|
"aria-expanded": isLink ? void 0 : expanded,
|
|
71
|
+
"aria-controls": ariaControls,
|
|
70
72
|
onClick: handleClick,
|
|
71
73
|
"aria-current": isLink && active ? "page" : void 0,
|
|
72
74
|
href,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationItem.js","sources":["../src/navigation-item/NavigationItem.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type MouseEvent,\n type MouseEventHandler,\n} from \"react\";\nimport type { RenderPropsType } from \"../utils\";\nimport { makePrefixer } from \"../utils\";\nimport { ExpansionIcon } from \"./ExpansionIcon\";\nimport navigationItemCss from \"./NavigationItem.css\";\nimport { NavigationItemAction } from \"./NavigationItemAction\";\n\nexport interface NavigationItemProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Whether the navigation item is active.\n */\n active?: boolean;\n /**\n * Whether the nested group is collapsed and there is an active nested item within it.\n */\n blurActive?: boolean;\n /**\n * Whether the navigation item is expanded.\n */\n expanded?: boolean;\n /**\n * Level of nesting.\n */\n level?: number;\n /**\n * The orientation of the navigation item.\n */\n orientation?: \"horizontal\" | \"vertical\";\n /**\n * Whether the navigation item is a parent with nested items.\n */\n parent?: boolean;\n /**\n * Render prop to enable customisation of navigation item element.\n */\n render?: RenderPropsType[\"render\"];\n /**\n * Action to be triggered when the navigation item is expanded.\n */\n onExpand?: MouseEventHandler<HTMLButtonElement>;\n /**\n * Href to be passed to the Link element.\n */\n href?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltNavigationItem\");\n\nexport const NavigationItem = forwardRef<HTMLDivElement, NavigationItemProps>(\n function NavigationItem(props, ref) {\n const {\n active,\n blurActive,\n render,\n children,\n className,\n expanded = false,\n href,\n orientation = \"horizontal\",\n parent,\n level = 0,\n onExpand,\n style: styleProp,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-navigation-item\",\n css: navigationItemCss,\n window: targetWindow,\n });\n\n const style = {\n ...styleProp,\n \"--saltNavigationItem-level\": `${level}`,\n };\n\n const isLink = href !== undefined;\n\n const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n onExpand?.(event);\n };\n\n return (\n <div\n ref={ref}\n className={clsx(withBaseName(), className)}\n style={style}\n {...rest}\n >\n <NavigationItemAction\n className={clsx(\n withBaseName(\"wrapper\"),\n {\n [withBaseName(\"active\")]: active || blurActive,\n [withBaseName(\"blurActive\")]: blurActive,\n [withBaseName(\"rootItem\")]: level === 0,\n },\n withBaseName(orientation),\n )}\n render={render ?? (isLink ? undefined : <button type=\"button\" />)}\n aria-expanded={isLink ? undefined : expanded}\n onClick={handleClick}\n aria-current={isLink && active ? \"page\" : undefined}\n href={href}\n >\n <span className={withBaseName(\"label\")}>{children}</span>\n {parent ? (\n <ExpansionIcon expanded={expanded} orientation={orientation} />\n ) : null}\n </NavigationItemAction>\n </div>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","NavigationItem","useWindow","useComponentCssInjection","navigationItemCss","jsx","clsx","jsxs","NavigationItemAction","ExpansionIcon"],"mappings":";;;;;;;;;;;;;;;;AAsDA,MAAM,YAAA,GAAeA,0BAAa,oBAAoB,CAAA;AAE/C,MAAM,cAAA,GAAiBC,gBAAA;AAAA,EAC5B,SAASC,eAAAA,CAAe,KAAA,EAAO,GAAA,EAAK;AAClC,IAAA,MAAM;AAAA,MACJ,MAAA;AAAA,MACA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA,GAAW,KAAA;AAAA,MACX,IAAA;AAAA,MACA,WAAA,GAAc,YAAA;AAAA,MACd,MAAA;AAAA,MACA,KAAA,GAAQ,CAAA;AAAA,MACR,QAAA;AAAA,MACA,KAAA,EAAO,SAAA;AAAA,MACP,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,sBAAA;AAAA,MACR,GAAA,EAAKC,gBAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,KAAA,GAAQ;AAAA,MACZ,GAAG,SAAA;AAAA,MACH,4BAAA,EAA8B,GAAG,KAAK,CAAA;AAAA,KACxC;AAEA,IAAA,MAAM,SAAS,IAAA,KAAS,MAAA;AAExB,IAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAAyC;AAC5D,MAAA,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAW,KAAA,CAAA;AAAA,IACb,CAAA;AAEA,IAAA,uBACEC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACzC,KAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEJ,QAAA,kBAAAC,eAAA;AAAA,UAACC,yCAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAWF,SAAA;AAAA,cACT,aAAa,SAAS,CAAA;AAAA,cACtB;AAAA,gBACE,CAAC,YAAA,CAAa,QAAQ,CAAC,GAAG,MAAA,IAAU,UAAA;AAAA,gBACpC,CAAC,YAAA,CAAa,YAAY,CAAC,GAAG,UAAA;AAAA,gBAC9B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,KAAA,KAAU;AAAA,eACxC;AAAA,cACA,aAAa,WAAW;AAAA,aAC1B;AAAA,YACA,QAAQ,MAAA,KAAW,MAAA,GAAS,yBAAYD,cAAA,CAAC,QAAA,EAAA,EAAO,MAAK,QAAA,EAAS,CAAA,CAAA;AAAA,YAC9D,eAAA,EAAe,SAAS,MAAA,GAAY,QAAA;AAAA,YACpC,OAAA,EAAS,WAAA;AAAA,YACT,cAAA,EAAc,MAAA,IAAU,MAAA,GAAS,MAAA,GAAS,MAAA;AAAA,YAC1C,IAAA;AAAA,YAEA,QAAA,EAAA;AAAA,8BAAAA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,YAAA,CAAa,OAAO,GAAI,QAAA,EAAS,CAAA;AAAA,cACjD,MAAA,mBACCA,cAAA,CAACI,2BAAA,EAAA,EAAc,QAAA,EAAoB,aAA0B,CAAA,GAC3D;AAAA;AAAA;AAAA;AACN;AAAA,KACF;AAAA,EAEJ;AACF;;;;"}
|
|
1
|
+
{"version":3,"file":"NavigationItem.js","sources":["../src/navigation-item/NavigationItem.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type MouseEvent,\n type MouseEventHandler,\n} from \"react\";\nimport type { RenderPropsType } from \"../utils\";\nimport { makePrefixer } from \"../utils\";\nimport { ExpansionIcon } from \"./ExpansionIcon\";\nimport navigationItemCss from \"./NavigationItem.css\";\nimport { NavigationItemAction } from \"./NavigationItemAction\";\n\nexport interface NavigationItemProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Whether the navigation item is active.\n */\n active?: boolean;\n /**\n * Whether the nested group is collapsed and there is an active nested item within it.\n */\n blurActive?: boolean;\n /**\n * Whether the navigation item is expanded.\n */\n expanded?: boolean;\n /**\n * Level of nesting.\n */\n level?: number;\n /**\n * The orientation of the navigation item.\n */\n orientation?: \"horizontal\" | \"vertical\";\n /**\n * Whether the navigation item is a parent with nested items.\n */\n parent?: boolean;\n /**\n * Render prop to enable customisation of navigation item element.\n */\n render?: RenderPropsType[\"render\"];\n /**\n * Action to be triggered when the navigation item is expanded.\n */\n onExpand?: MouseEventHandler<HTMLButtonElement>;\n /**\n * Href to be passed to the Link element.\n */\n href?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltNavigationItem\");\n\nexport const NavigationItem = forwardRef<HTMLDivElement, NavigationItemProps>(\n function NavigationItem(props, ref) {\n const {\n active,\n blurActive,\n render,\n children,\n className,\n expanded = false,\n href,\n orientation = \"horizontal\",\n parent,\n level = 0,\n onExpand,\n style: styleProp,\n \"aria-controls\": ariaControls,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-navigation-item\",\n css: navigationItemCss,\n window: targetWindow,\n });\n\n const style = {\n ...styleProp,\n \"--saltNavigationItem-level\": `${level}`,\n };\n\n const isLink = href !== undefined;\n\n const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n onExpand?.(event);\n };\n\n return (\n <div\n ref={ref}\n className={clsx(withBaseName(), className)}\n style={style}\n {...rest}\n >\n <NavigationItemAction\n className={clsx(\n withBaseName(\"wrapper\"),\n {\n [withBaseName(\"active\")]: active || blurActive,\n [withBaseName(\"blurActive\")]: blurActive,\n [withBaseName(\"rootItem\")]: level === 0,\n },\n withBaseName(orientation),\n )}\n render={render ?? (isLink ? undefined : <button type=\"button\" />)}\n aria-expanded={isLink ? undefined : expanded}\n aria-controls={ariaControls}\n onClick={handleClick}\n aria-current={isLink && active ? \"page\" : undefined}\n href={href}\n >\n <span className={withBaseName(\"label\")}>{children}</span>\n {parent ? (\n <ExpansionIcon expanded={expanded} orientation={orientation} />\n ) : null}\n </NavigationItemAction>\n </div>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","NavigationItem","useWindow","useComponentCssInjection","navigationItemCss","jsx","clsx","jsxs","NavigationItemAction","ExpansionIcon"],"mappings":";;;;;;;;;;;;;;;;AAsDA,MAAM,YAAA,GAAeA,0BAAa,oBAAoB,CAAA;AAE/C,MAAM,cAAA,GAAiBC,gBAAA;AAAA,EAC5B,SAASC,eAAAA,CAAe,KAAA,EAAO,GAAA,EAAK;AAClC,IAAA,MAAM;AAAA,MACJ,MAAA;AAAA,MACA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA,GAAW,KAAA;AAAA,MACX,IAAA;AAAA,MACA,WAAA,GAAc,YAAA;AAAA,MACd,MAAA;AAAA,MACA,KAAA,GAAQ,CAAA;AAAA,MACR,QAAA;AAAA,MACA,KAAA,EAAO,SAAA;AAAA,MACP,eAAA,EAAiB,YAAA;AAAA,MACjB,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,sBAAA;AAAA,MACR,GAAA,EAAKC,gBAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,KAAA,GAAQ;AAAA,MACZ,GAAG,SAAA;AAAA,MACH,4BAAA,EAA8B,GAAG,KAAK,CAAA;AAAA,KACxC;AAEA,IAAA,MAAM,SAAS,IAAA,KAAS,MAAA;AAExB,IAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAAyC;AAC5D,MAAA,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAW,KAAA,CAAA;AAAA,IACb,CAAA;AAEA,IAAA,uBACEC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACzC,KAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEJ,QAAA,kBAAAC,eAAA;AAAA,UAACC,yCAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAWF,SAAA;AAAA,cACT,aAAa,SAAS,CAAA;AAAA,cACtB;AAAA,gBACE,CAAC,YAAA,CAAa,QAAQ,CAAC,GAAG,MAAA,IAAU,UAAA;AAAA,gBACpC,CAAC,YAAA,CAAa,YAAY,CAAC,GAAG,UAAA;AAAA,gBAC9B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,KAAA,KAAU;AAAA,eACxC;AAAA,cACA,aAAa,WAAW;AAAA,aAC1B;AAAA,YACA,QAAQ,MAAA,KAAW,MAAA,GAAS,yBAAYD,cAAA,CAAC,QAAA,EAAA,EAAO,MAAK,QAAA,EAAS,CAAA,CAAA;AAAA,YAC9D,eAAA,EAAe,SAAS,MAAA,GAAY,QAAA;AAAA,YACpC,eAAA,EAAe,YAAA;AAAA,YACf,OAAA,EAAS,WAAA;AAAA,YACT,cAAA,EAAc,MAAA,IAAU,MAAA,GAAS,MAAA,GAAS,MAAA;AAAA,YAC1C,IAAA;AAAA,YAEA,QAAA,EAAA;AAAA,8BAAAA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,YAAA,CAAa,OAAO,GAAI,QAAA,EAAS,CAAA;AAAA,cACjD,MAAA,mBACCA,cAAA,CAACI,2BAAA,EAAA,EAAc,QAAA,EAAoB,aAA0B,CAAA,GAC3D;AAAA;AAAA;AAAA;AACN;AAAA,KACF;AAAA,EAEJ;AACF;;;;"}
|
|
@@ -7,6 +7,7 @@ var clsx = require('clsx');
|
|
|
7
7
|
var React = require('react');
|
|
8
8
|
var useAriaAnnouncer = require('../aria-announcer/useAriaAnnouncer.js');
|
|
9
9
|
require('../aria-announcer/AriaAnnouncerContext.js');
|
|
10
|
+
require('../aria-announcer/AriaAnnouncerProvider.js');
|
|
10
11
|
var makePrefixer = require('../utils/makePrefixer.js');
|
|
11
12
|
var useControlled = require('../utils/useControlled.js');
|
|
12
13
|
require('../utils/useFloatingUI/useFloatingUI.js');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pagination.js","sources":["../src/pagination/Pagination.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n forwardRef,\n type HTMLAttributes,\n type SyntheticEvent,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n} from \"react\";\nimport { useAriaAnnouncer } from \"../aria-announcer\";\nimport { makePrefixer, useControlled } from \"../utils\";\nimport paginationCss from \"./Pagination.css\";\nimport { type PaginationContext, paginationContext } from \"./PaginationContext\";\n\nconst withBaseName = makePrefixer(\"saltPagination\");\n\nconst { Provider } = paginationContext;\n\nexport interface PaginationProps extends HTMLAttributes<HTMLElement> {\n /**\n * Number of pages.\n */\n count: number;\n /**\n * Current/active page.\n */\n page?: number;\n /**\n * Default current/active page.\n */\n defaultPage?: number;\n /**\n * Callback function triggered when current page changed.\n */\n onPageChange?: (event: SyntheticEvent, page: number) => void;\n}\n\nexport const Pagination = forwardRef<HTMLElement, PaginationProps>(\n function Pagination(\n {\n className,\n count,\n children,\n defaultPage = 1,\n page: pageProp,\n onPageChange: onPageChangeProp,\n ...restProps\n },\n ref,\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-pagination\",\n css: paginationCss,\n window: targetWindow,\n });\n\n const [pageState, setPageState] = useControlled({\n controlled: pageProp,\n default: defaultPage,\n name: \"Pagination\",\n state: \"page\",\n });\n\n const onPageChange = useCallback(\n (event: SyntheticEvent, page: number) => {\n setPageState(page);\n onPageChangeProp?.(event, page);\n },\n [onPageChangeProp],\n );\n\n const contextValue: PaginationContext = useMemo(\n () => ({\n page: pageState,\n count,\n onPageChange,\n }),\n [pageState, count, onPageChange],\n );\n\n const { announce } = useAriaAnnouncer();\n const mounted = useRef<boolean>(false);\n\n useEffect(() => {\n if (mounted.current) {\n announce(`Page ${pageState}`);\n } else {\n mounted.current = true;\n }\n }, [announce, pageState]);\n\n if (count < 2) {\n return null;\n }\n\n return (\n <Provider value={contextValue}>\n <nav\n className={clsx(withBaseName(), className)}\n ref={ref}\n {...restProps}\n >\n {children}\n </nav>\n </Provider>\n );\n },\n);\n"],"names":["makePrefixer","paginationContext","forwardRef","Pagination","useWindow","useComponentCssInjection","paginationCss","useControlled","useCallback","useMemo","useAriaAnnouncer","useRef","useEffect","jsx","clsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Pagination.js","sources":["../src/pagination/Pagination.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n forwardRef,\n type HTMLAttributes,\n type SyntheticEvent,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n} from \"react\";\nimport { useAriaAnnouncer } from \"../aria-announcer\";\nimport { makePrefixer, useControlled } from \"../utils\";\nimport paginationCss from \"./Pagination.css\";\nimport { type PaginationContext, paginationContext } from \"./PaginationContext\";\n\nconst withBaseName = makePrefixer(\"saltPagination\");\n\nconst { Provider } = paginationContext;\n\nexport interface PaginationProps extends HTMLAttributes<HTMLElement> {\n /**\n * Number of pages.\n */\n count: number;\n /**\n * Current/active page.\n */\n page?: number;\n /**\n * Default current/active page.\n */\n defaultPage?: number;\n /**\n * Callback function triggered when current page changed.\n */\n onPageChange?: (event: SyntheticEvent, page: number) => void;\n}\n\nexport const Pagination = forwardRef<HTMLElement, PaginationProps>(\n function Pagination(\n {\n className,\n count,\n children,\n defaultPage = 1,\n page: pageProp,\n onPageChange: onPageChangeProp,\n ...restProps\n },\n ref,\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-pagination\",\n css: paginationCss,\n window: targetWindow,\n });\n\n const [pageState, setPageState] = useControlled({\n controlled: pageProp,\n default: defaultPage,\n name: \"Pagination\",\n state: \"page\",\n });\n\n const onPageChange = useCallback(\n (event: SyntheticEvent, page: number) => {\n setPageState(page);\n onPageChangeProp?.(event, page);\n },\n [onPageChangeProp],\n );\n\n const contextValue: PaginationContext = useMemo(\n () => ({\n page: pageState,\n count,\n onPageChange,\n }),\n [pageState, count, onPageChange],\n );\n\n const { announce } = useAriaAnnouncer();\n const mounted = useRef<boolean>(false);\n\n useEffect(() => {\n if (mounted.current) {\n announce(`Page ${pageState}`);\n } else {\n mounted.current = true;\n }\n }, [announce, pageState]);\n\n if (count < 2) {\n return null;\n }\n\n return (\n <Provider value={contextValue}>\n <nav\n className={clsx(withBaseName(), className)}\n ref={ref}\n {...restProps}\n >\n {children}\n </nav>\n </Provider>\n );\n },\n);\n"],"names":["makePrefixer","paginationContext","forwardRef","Pagination","useWindow","useComponentCssInjection","paginationCss","useControlled","useCallback","useMemo","useAriaAnnouncer","useRef","useEffect","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;AAiBA,MAAM,YAAA,GAAeA,0BAAa,gBAAgB,CAAA;AAElD,MAAM,EAAE,UAAS,GAAIC,mCAAA;AAqBd,MAAM,UAAA,GAAaC,gBAAA;AAAA,EACxB,SAASC,WAAAA,CACP;AAAA,IACE,SAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAA,GAAc,CAAA;AAAA,IACd,IAAA,EAAM,QAAA;AAAA,IACN,YAAA,EAAc,gBAAA;AAAA,IACd,GAAG;AAAA,KAEL,GAAA,EACA;AACA,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,iBAAA;AAAA,MACR,GAAA,EAAKC,YAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIC,2BAAA,CAAc;AAAA,MAC9C,UAAA,EAAY,QAAA;AAAA,MACZ,OAAA,EAAS,WAAA;AAAA,MACT,IAAA,EAAM,YAAA;AAAA,MACN,KAAA,EAAO;AAAA,KACR,CAAA;AAED,IAAA,MAAM,YAAA,GAAeC,iBAAA;AAAA,MACnB,CAAC,OAAuB,IAAA,KAAiB;AACvC,QAAA,YAAA,CAAa,IAAI,CAAA;AACjB,QAAA,gBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,gBAAA,CAAmB,KAAA,EAAO,IAAA,CAAA;AAAA,MAC5B,CAAA;AAAA,MACA,CAAC,gBAAgB;AAAA,KACnB;AAEA,IAAA,MAAM,YAAA,GAAkCC,aAAA;AAAA,MACtC,OAAO;AAAA,QACL,IAAA,EAAM,SAAA;AAAA,QACN,KAAA;AAAA,QACA;AAAA,OACF,CAAA;AAAA,MACA,CAAC,SAAA,EAAW,KAAA,EAAO,YAAY;AAAA,KACjC;AAEA,IAAA,MAAM,EAAE,QAAA,EAAS,GAAIC,iCAAA,EAAiB;AACtC,IAAA,MAAM,OAAA,GAAUC,aAAgB,KAAK,CAAA;AAErC,IAAAC,eAAA,CAAU,MAAM;AACd,MAAA,IAAI,QAAQ,OAAA,EAAS;AACnB,QAAA,QAAA,CAAS,CAAA,KAAA,EAAQ,SAAS,CAAA,CAAE,CAAA;AAAA,MAC9B,CAAA,MAAO;AACL,QAAA,OAAA,CAAQ,OAAA,GAAU,IAAA;AAAA,MACpB;AAAA,IACF,CAAA,EAAG,CAAC,QAAA,EAAU,SAAS,CAAC,CAAA;AAExB,IAAA,IAAI,QAAQ,CAAA,EAAG;AACb,MAAA,OAAO,IAAA;AAAA,IACT;AAEA,IAAA,uBACEC,cAAA,CAAC,QAAA,EAAA,EAAS,KAAA,EAAO,YAAA,EACf,QAAA,kBAAAA,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACzC,GAAA;AAAA,QACC,GAAG,SAAA;AAAA,QAEH;AAAA;AAAA,KACH,EACF,CAAA;AAAA,EAEJ;AACF;;;;"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var css_248z = ".saltRating {\n display: inline-flex;\n box-sizing: border-box;\n}\n\n.saltFormField .saltRating-container {\n height: var(--salt-size-base);\n padding-top: calc(var(--salt-spacing-100) + var(--salt-spacing-fixed-100));\n}\n\n.saltFormField .saltRating-label {\n min-height: var(--salt-size-base);\n padding-top: var(--salt-spacing-100);\n}\n\n.saltRating-labelBottom {\n flex-direction: column;\n align-items: flex-start;\n gap: var(--salt-spacing-75);\n}\n\n.saltRating-labelRight {\n flex-direction: row;\n gap: var(--salt-spacing-150);\n}\n\n.saltRating-container {\n display: flex;\n flex-direction: row;\n gap: var(--salt-spacing-150);\n flex-wrap: nowrap;\n justify-content: flex-start;\n padding-top: var(--salt-spacing-fixed-100);\n padding-bottom: var(--salt-spacing-fixed-100);\n box-sizing: border-box;\n}\n\n.saltRating-label {\n color: var(--salt-content-primary-foreground);\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-fontWeight);\n line-height: var(--salt-text-lineHeight);\n box-sizing: border-box;\n}\n";
|
|
4
|
+
|
|
5
|
+
module.exports = css_248z;
|
|
6
|
+
//# sourceMappingURL=Rating.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Rating.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var styles = require('@salt-ds/styles');
|
|
5
|
+
var window = require('@salt-ds/window');
|
|
6
|
+
var clsx = require('clsx');
|
|
7
|
+
var React = require('react');
|
|
8
|
+
require('../form-field-context/FormFieldContext.js');
|
|
9
|
+
var useFormFieldProps = require('../form-field-context/useFormFieldProps.js');
|
|
10
|
+
var capitalize = require('../utils/capitalize.js');
|
|
11
|
+
var makePrefixer = require('../utils/makePrefixer.js');
|
|
12
|
+
var useControlled = require('../utils/useControlled.js');
|
|
13
|
+
require('../utils/useFloatingUI/useFloatingUI.js');
|
|
14
|
+
var useId = require('../utils/useId.js');
|
|
15
|
+
require('../salt-provider/SaltProvider.js');
|
|
16
|
+
require('../viewport/ViewportProvider.js');
|
|
17
|
+
var Rating$1 = require('./Rating.css.js');
|
|
18
|
+
var RatingItem = require('./RatingItem.js');
|
|
19
|
+
|
|
20
|
+
const withBaseName = makePrefixer.makePrefixer("saltRating");
|
|
21
|
+
const defaultGetLabel = (value) => `${value} Star${value > 1 ? "s" : ""}`;
|
|
22
|
+
const Rating = React.forwardRef(function Rating2({
|
|
23
|
+
value: valueProp,
|
|
24
|
+
defaultValue = 0,
|
|
25
|
+
name: nameProp,
|
|
26
|
+
onChange,
|
|
27
|
+
className,
|
|
28
|
+
readOnly: readOnlyProp,
|
|
29
|
+
disabled: disabledProp,
|
|
30
|
+
max = 5,
|
|
31
|
+
getLabel = defaultGetLabel,
|
|
32
|
+
getVisibleLabel,
|
|
33
|
+
labelPlacement = "right",
|
|
34
|
+
"aria-label": ariaLabel,
|
|
35
|
+
"aria-labelledby": ariaLabelledBy,
|
|
36
|
+
"aria-describedby": ariaDescribedBy,
|
|
37
|
+
...restProps
|
|
38
|
+
}, ref) {
|
|
39
|
+
const targetWindow = window.useWindow();
|
|
40
|
+
styles.useComponentCssInjection({
|
|
41
|
+
testId: "salt-rating",
|
|
42
|
+
css: Rating$1,
|
|
43
|
+
window: targetWindow
|
|
44
|
+
});
|
|
45
|
+
const {
|
|
46
|
+
disabled: formFieldDisabled,
|
|
47
|
+
readOnly: formFieldReadOnly,
|
|
48
|
+
a11yProps: {
|
|
49
|
+
"aria-describedby": formFieldDescribedBy,
|
|
50
|
+
"aria-labelledby": formFieldLabelledBy
|
|
51
|
+
} = {}
|
|
52
|
+
} = useFormFieldProps.useFormFieldProps();
|
|
53
|
+
const disabled = formFieldDisabled || disabledProp;
|
|
54
|
+
const readOnly = formFieldReadOnly || readOnlyProp;
|
|
55
|
+
const [hoveredValue, setHoveredValue] = React.useState(0);
|
|
56
|
+
const [selected, setSelected] = useControlled.useControlled({
|
|
57
|
+
controlled: valueProp,
|
|
58
|
+
default: defaultValue,
|
|
59
|
+
name: "Rating",
|
|
60
|
+
state: "value"
|
|
61
|
+
});
|
|
62
|
+
const name = useId.useId(nameProp);
|
|
63
|
+
const handleMouseEnter = (event) => {
|
|
64
|
+
if (readOnly || disabled) return;
|
|
65
|
+
const itemValue = Number.parseInt(event.currentTarget.value, 10);
|
|
66
|
+
setHoveredValue(itemValue);
|
|
67
|
+
};
|
|
68
|
+
const handleChange = (event) => {
|
|
69
|
+
if (readOnly) {
|
|
70
|
+
event.preventDefault();
|
|
71
|
+
return;
|
|
72
|
+
}
|
|
73
|
+
const itemValue = Number.parseInt(event.currentTarget.value, 10);
|
|
74
|
+
setSelected(itemValue);
|
|
75
|
+
onChange == null ? void 0 : onChange(event, itemValue);
|
|
76
|
+
};
|
|
77
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
78
|
+
"div",
|
|
79
|
+
{
|
|
80
|
+
ref,
|
|
81
|
+
className: clsx.clsx(
|
|
82
|
+
withBaseName(),
|
|
83
|
+
withBaseName(`label${capitalize.capitalize(labelPlacement)}`),
|
|
84
|
+
className
|
|
85
|
+
),
|
|
86
|
+
...restProps,
|
|
87
|
+
children: [
|
|
88
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
89
|
+
"div",
|
|
90
|
+
{
|
|
91
|
+
role: "radiogroup",
|
|
92
|
+
className: withBaseName("container"),
|
|
93
|
+
"aria-readonly": readOnly || void 0,
|
|
94
|
+
"aria-label": ariaLabel,
|
|
95
|
+
"aria-labelledby": clsx.clsx(formFieldLabelledBy, ariaLabelledBy) || void 0,
|
|
96
|
+
"aria-describedby": clsx.clsx(formFieldDescribedBy, ariaDescribedBy) || void 0,
|
|
97
|
+
onMouseLeave: () => setHoveredValue(0),
|
|
98
|
+
children: Array.from({ length: max }, (_, index) => {
|
|
99
|
+
const itemValue = index + 1;
|
|
100
|
+
const isHovered = hoveredValue > 0 && itemValue <= hoveredValue;
|
|
101
|
+
const isSelected = hoveredValue === 0 && itemValue <= selected;
|
|
102
|
+
const isUnselecting = hoveredValue > 0 && itemValue > hoveredValue && itemValue <= selected;
|
|
103
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
104
|
+
RatingItem.RatingItem,
|
|
105
|
+
{
|
|
106
|
+
currentRating: selected,
|
|
107
|
+
isHovered,
|
|
108
|
+
isSelected,
|
|
109
|
+
isUnselecting,
|
|
110
|
+
onMouseEnter: handleMouseEnter,
|
|
111
|
+
onChange: handleChange,
|
|
112
|
+
value: itemValue,
|
|
113
|
+
readOnly,
|
|
114
|
+
disabled,
|
|
115
|
+
name,
|
|
116
|
+
"aria-label": getLabel == null ? void 0 : getLabel(itemValue)
|
|
117
|
+
},
|
|
118
|
+
itemValue
|
|
119
|
+
);
|
|
120
|
+
})
|
|
121
|
+
}
|
|
122
|
+
),
|
|
123
|
+
getVisibleLabel && /* @__PURE__ */ jsxRuntime.jsx(
|
|
124
|
+
"div",
|
|
125
|
+
{
|
|
126
|
+
className: clsx.clsx(
|
|
127
|
+
withBaseName("label"),
|
|
128
|
+
withBaseName(`label-${labelPlacement}`)
|
|
129
|
+
),
|
|
130
|
+
"aria-hidden": true,
|
|
131
|
+
children: getVisibleLabel(hoveredValue || selected, max)
|
|
132
|
+
}
|
|
133
|
+
)
|
|
134
|
+
]
|
|
135
|
+
}
|
|
136
|
+
);
|
|
137
|
+
});
|
|
138
|
+
|
|
139
|
+
exports.Rating = Rating;
|
|
140
|
+
//# sourceMappingURL=Rating.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Rating.js","sources":["../src/rating/Rating.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ChangeEvent,\n type ComponentPropsWithoutRef,\n forwardRef,\n type MouseEvent,\n useState,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { capitalize, makePrefixer, useControlled, useId } from \"../utils\";\nimport ratingCss from \"./Rating.css\";\nimport { RatingItem } from \"./RatingItem\";\n\nconst withBaseName = makePrefixer(\"saltRating\");\n\nexport interface RatingProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n /**\n * When provided, the component is controlled.\n */\n value?: number;\n /**\n * Default rating value for uncontrolled mode.\n * @default 0\n */\n defaultValue?: number;\n /**\n * Callback function for rating change.\n * The first parameter is the event, and the second is the selected rating value.\n */\n onChange?: (event: ChangeEvent<HTMLInputElement>, value: number) => void;\n /**\n * If true, the rating component will be in a read-only state.\n */\n readOnly?: boolean;\n /**\n * If true, the rating component will be in a disabled state.\n */\n disabled?: boolean;\n /**\n * Total number of icons displayed.\n * @default 5\n */\n max?: number;\n /**\n * Function used to provide a user-friendly name for the current value of the rating. Primarily used by screen readers.\n */\n getLabel?: (value: number) => string;\n /**\n * Function used to provide a visible label for the rating.\n */\n getVisibleLabel?: (value: number, max: number) => string;\n /**\n * Position of the label relative to the rating component.\n * @default \"right\"\n */\n labelPlacement?: \"right\" | \"bottom\";\n /**\n * The name to be set on each radio button within the group. If not set, then one will be generated for you.\n */\n name?: string;\n}\n\nconst defaultGetLabel = (value: number) =>\n `${value} Star${value > 1 ? \"s\" : \"\"}`;\n\nexport const Rating = forwardRef<HTMLDivElement, RatingProps>(function Rating(\n {\n value: valueProp,\n defaultValue = 0,\n name: nameProp,\n onChange,\n className,\n readOnly: readOnlyProp,\n disabled: disabledProp,\n max = 5,\n getLabel = defaultGetLabel,\n getVisibleLabel,\n labelPlacement = \"right\",\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n ...restProps\n },\n ref,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-rating\",\n css: ratingCss,\n window: targetWindow,\n });\n const {\n disabled: formFieldDisabled,\n readOnly: formFieldReadOnly,\n a11yProps: {\n \"aria-describedby\": formFieldDescribedBy,\n \"aria-labelledby\": formFieldLabelledBy,\n } = {},\n } = useFormFieldProps();\n\n const disabled = formFieldDisabled || disabledProp;\n const readOnly = formFieldReadOnly || readOnlyProp;\n\n const [hoveredValue, setHoveredValue] = useState(0);\n const [selected, setSelected] = useControlled({\n controlled: valueProp,\n default: defaultValue,\n name: \"Rating\",\n state: \"value\",\n });\n const name = useId(nameProp);\n\n const handleMouseEnter = (event: MouseEvent<HTMLInputElement>) => {\n if (readOnly || disabled) return;\n const itemValue = Number.parseInt(event.currentTarget.value, 10);\n setHoveredValue(itemValue);\n };\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n if (readOnly) {\n event.preventDefault();\n return;\n }\n\n const itemValue = Number.parseInt(event.currentTarget.value, 10);\n setSelected(itemValue);\n onChange?.(event, itemValue);\n };\n\n return (\n <div\n ref={ref}\n className={clsx(\n withBaseName(),\n withBaseName(`label${capitalize(labelPlacement)}`),\n className,\n )}\n {...restProps}\n >\n <div\n role=\"radiogroup\"\n className={withBaseName(\"container\")}\n aria-readonly={readOnly || undefined}\n aria-label={ariaLabel}\n aria-labelledby={clsx(formFieldLabelledBy, ariaLabelledBy) || undefined}\n aria-describedby={\n clsx(formFieldDescribedBy, ariaDescribedBy) || undefined\n }\n onMouseLeave={() => setHoveredValue(0)}\n >\n {Array.from({ length: max }, (_, index) => {\n const itemValue = index + 1;\n const isHovered = hoveredValue > 0 && itemValue <= hoveredValue;\n const isSelected = hoveredValue === 0 && itemValue <= selected;\n const isUnselecting =\n hoveredValue > 0 &&\n itemValue > hoveredValue &&\n itemValue <= selected;\n return (\n <RatingItem\n key={itemValue}\n currentRating={selected}\n isHovered={isHovered}\n isSelected={isSelected}\n isUnselecting={isUnselecting}\n onMouseEnter={handleMouseEnter}\n onChange={handleChange}\n value={itemValue}\n readOnly={readOnly}\n disabled={disabled}\n name={name}\n aria-label={getLabel?.(itemValue)}\n />\n );\n })}\n </div>\n {getVisibleLabel && (\n <div\n className={clsx(\n withBaseName(\"label\"),\n withBaseName(`label-${labelPlacement}`),\n )}\n aria-hidden\n >\n {getVisibleLabel(hoveredValue || selected, max)}\n </div>\n )}\n </div>\n );\n});\n"],"names":["makePrefixer","forwardRef","Rating","useWindow","useComponentCssInjection","ratingCss","useFormFieldProps","useState","useControlled","useId","jsxs","clsx","capitalize","jsx","RatingItem"],"mappings":"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"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var css_248z = ".saltRatingItem {\n height: var(--salt-size-icon);\n width: var(--salt-size-icon);\n display: flex;\n position: relative;\n align-items: center;\n justify-content: center;\n cursor: var(--salt-cursor-hover);\n}\n\n.saltRatingItem-disabled,\n.saltRatingItem-readOnly {\n cursor: default;\n}\n\n.saltRatingItem-input {\n position: absolute;\n opacity: 0;\n width: 100%;\n height: 100%;\n margin: 0;\n cursor: inherit;\n z-index: 1;\n}\n\n.saltRatingItem-input::before {\n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n padding: var(--salt-spacing-fixed-600);\n transform: translate(-50%, -50%);\n top: 50%;\n left: 50%;\n box-sizing: content-box;\n}\n\n.saltRatingItem-icon {\n pointer-events: none;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--salt-sentiment-neutral-dataviz);\n}\n\n.saltRatingItem-icon .saltIcon {\n --saltIcon-size: var(--salt-size-icon);\n}\n\n.saltRatingItem-input:focus-visible ~ .saltRatingItem-icon::after {\n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n padding: var(--salt-spacing-fixed-600);\n transform: translate(-50%, -50%);\n top: 50%;\n left: 50%;\n box-sizing: content-box;\n\n border-radius: var(--salt-palette-corner-strongest);\n outline: var(--salt-focused-outline);\n outline-offset: calc(-1 * var(--salt-spacing-fixed-200));\n}\n\n.saltRatingItem-disabled {\n cursor: var(--salt-cursor-disabled);\n opacity: 0.4;\n}\n\n.saltRatingItem-disabled .saltRatingItem-input {\n cursor: var(--salt-cursor-disabled);\n}\n\n.saltRatingItem-selected .saltRatingItem-icon,\n.saltRatingItem-hovered .saltRatingItem-icon,\n.saltRatingItem-unselecting .saltRatingItem-icon {\n color: var(--salt-sentiment-accent-dataviz);\n}\n";
|
|
4
|
+
|
|
5
|
+
module.exports = css_248z;
|
|
6
|
+
//# sourceMappingURL=RatingItem.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RatingItem.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var styles = require('@salt-ds/styles');
|
|
5
|
+
var window = require('@salt-ds/window');
|
|
6
|
+
var clsx = require('clsx');
|
|
7
|
+
var React = require('react');
|
|
8
|
+
var SemanticIconProvider = require('../semantic-icon-provider/SemanticIconProvider.js');
|
|
9
|
+
var makePrefixer = require('../utils/makePrefixer.js');
|
|
10
|
+
require('../utils/useFloatingUI/useFloatingUI.js');
|
|
11
|
+
require('../utils/useId.js');
|
|
12
|
+
require('../salt-provider/SaltProvider.js');
|
|
13
|
+
require('../viewport/ViewportProvider.js');
|
|
14
|
+
var RatingItem$1 = require('./RatingItem.css.js');
|
|
15
|
+
|
|
16
|
+
const withBaseName = makePrefixer.makePrefixer("saltRatingItem");
|
|
17
|
+
const RatingItem = React.forwardRef(
|
|
18
|
+
function RatingItem2(props, ref) {
|
|
19
|
+
const {
|
|
20
|
+
"aria-label": ariaLabel,
|
|
21
|
+
value,
|
|
22
|
+
currentRating,
|
|
23
|
+
isHovered,
|
|
24
|
+
isSelected,
|
|
25
|
+
isUnselecting,
|
|
26
|
+
onMouseEnter,
|
|
27
|
+
onChange,
|
|
28
|
+
readOnly = false,
|
|
29
|
+
disabled = false,
|
|
30
|
+
name
|
|
31
|
+
} = props;
|
|
32
|
+
const { RatingIcon, RatingSelectedIcon, RatingUnselectingIcon } = SemanticIconProvider.useIcon();
|
|
33
|
+
const targetWindow = window.useWindow();
|
|
34
|
+
styles.useComponentCssInjection({
|
|
35
|
+
testId: "salt-rating-item",
|
|
36
|
+
css: RatingItem$1,
|
|
37
|
+
window: targetWindow
|
|
38
|
+
});
|
|
39
|
+
const icon = isHovered || isSelected ? /* @__PURE__ */ jsxRuntime.jsx(RatingSelectedIcon, { "aria-hidden": true }) : isUnselecting ? /* @__PURE__ */ jsxRuntime.jsx(RatingUnselectingIcon, { "aria-hidden": true }) : /* @__PURE__ */ jsxRuntime.jsx(RatingIcon, { "aria-hidden": true });
|
|
40
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
41
|
+
"div",
|
|
42
|
+
{
|
|
43
|
+
className: clsx.clsx(withBaseName(), {
|
|
44
|
+
[withBaseName("hovered")]: isHovered,
|
|
45
|
+
[withBaseName("selected")]: isSelected,
|
|
46
|
+
[withBaseName("unselecting")]: isUnselecting,
|
|
47
|
+
[withBaseName("disabled")]: disabled,
|
|
48
|
+
[withBaseName("readOnly")]: readOnly
|
|
49
|
+
}),
|
|
50
|
+
children: [
|
|
51
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
52
|
+
"input",
|
|
53
|
+
{
|
|
54
|
+
ref,
|
|
55
|
+
type: "radio",
|
|
56
|
+
name,
|
|
57
|
+
value,
|
|
58
|
+
checked: currentRating === value,
|
|
59
|
+
onChange,
|
|
60
|
+
onMouseEnter,
|
|
61
|
+
disabled,
|
|
62
|
+
readOnly,
|
|
63
|
+
className: withBaseName("input"),
|
|
64
|
+
"aria-label": ariaLabel
|
|
65
|
+
}
|
|
66
|
+
),
|
|
67
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: withBaseName("icon"), "aria-hidden": true, children: icon })
|
|
68
|
+
]
|
|
69
|
+
}
|
|
70
|
+
);
|
|
71
|
+
}
|
|
72
|
+
);
|
|
73
|
+
|
|
74
|
+
exports.RatingItem = RatingItem;
|
|
75
|
+
//# sourceMappingURL=RatingItem.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RatingItem.js","sources":["../src/rating/RatingItem.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ChangeEvent,\n type ComponentPropsWithoutRef,\n forwardRef,\n type MouseEvent,\n} from \"react\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { makePrefixer } from \"../utils\";\nimport ratingItemCss from \"./RatingItem.css\";\n\nconst withBaseName = makePrefixer(\"saltRatingItem\");\n\nexport interface RatingItemProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * specifies the value of the feedback item.\n */\n value: number;\n /**\n * To define if the current star is being hovered.\n */\n isHovered?: boolean;\n /**\n * To specify if the item is selected.\n */\n isSelected?: boolean;\n /**\n * defines the current selected rating.\n */\n currentRating?: number;\n /**\n * callback function when feedback item is hovered.\n */\n onMouseEnter: (event: MouseEvent<HTMLInputElement>) => void;\n /**\n * callback function when feedback item is clicked.\n */\n onChange: (event: ChangeEvent<HTMLInputElement>) => void;\n /**\n * If true, the rating item will be in a read-only state.\n */\n readOnly?: boolean;\n /**\n * If true, the rating item will be in a disabled state.\n */\n disabled?: boolean;\n /**\n * Indicates whether the current rating item is in an active state.\n * An active state typically means that the item is visually highlighted\n * or styled differently to indicate that it is part of the current selection\n * or interaction (e.g., hover or focus).\n */\n isUnselecting?: boolean;\n /**\n * Name of the radio group\n */\n name?: string;\n}\n\nexport const RatingItem = forwardRef<HTMLInputElement, RatingItemProps>(\n function RatingItem(props, ref) {\n const {\n \"aria-label\": ariaLabel,\n value,\n currentRating,\n isHovered,\n isSelected,\n isUnselecting,\n onMouseEnter,\n onChange,\n readOnly = false,\n disabled = false,\n name,\n } = props;\n\n const { RatingIcon, RatingSelectedIcon, RatingUnselectingIcon } = useIcon();\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-rating-item\",\n css: ratingItemCss,\n window: targetWindow,\n });\n\n const icon =\n isHovered || isSelected ? (\n <RatingSelectedIcon aria-hidden />\n ) : isUnselecting ? (\n <RatingUnselectingIcon aria-hidden />\n ) : (\n <RatingIcon aria-hidden />\n );\n\n return (\n <div\n className={clsx(withBaseName(), {\n [withBaseName(\"hovered\")]: isHovered,\n [withBaseName(\"selected\")]: isSelected,\n [withBaseName(\"unselecting\")]: isUnselecting,\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"readOnly\")]: readOnly,\n })}\n >\n <input\n ref={ref}\n type=\"radio\"\n name={name}\n value={value}\n checked={currentRating === value}\n onChange={onChange}\n onMouseEnter={onMouseEnter}\n disabled={disabled}\n readOnly={readOnly}\n className={withBaseName(\"input\")}\n aria-label={ariaLabel}\n />\n <span className={withBaseName(\"icon\")} aria-hidden>\n {icon}\n </span>\n </div>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","RatingItem","useIcon","useWindow","useComponentCssInjection","ratingItemCss","jsx","jsxs","clsx"],"mappings":";;;;;;;;;;;;;;;AAaA,MAAM,YAAA,GAAeA,0BAAa,gBAAgB,CAAA;AAgD3C,MAAM,UAAA,GAAaC,gBAAA;AAAA,EACxB,SAASC,WAAAA,CAAW,KAAA,EAAO,GAAA,EAAK;AAC9B,IAAA,MAAM;AAAA,MACJ,YAAA,EAAc,SAAA;AAAA,MACd,KAAA;AAAA,MACA,aAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA;AAAA,MACA,aAAA;AAAA,MACA,YAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA,GAAW,KAAA;AAAA,MACX,QAAA,GAAW,KAAA;AAAA,MACX;AAAA,KACF,GAAI,KAAA;AAEJ,IAAA,MAAM,EAAE,UAAA,EAAY,kBAAA,EAAoB,qBAAA,KAA0BC,4BAAA,EAAQ;AAE1E,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,kBAAA;AAAA,MACR,GAAA,EAAKC,YAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,OACJ,SAAA,IAAa,UAAA,mBACXC,cAAA,CAAC,kBAAA,EAAA,EAAmB,eAAW,IAAA,EAAC,CAAA,GAC9B,aAAA,mBACFA,cAAA,CAAC,yBAAsB,aAAA,EAAW,IAAA,EAAC,oBAEnCA,cAAA,CAAC,UAAA,EAAA,EAAW,eAAW,IAAA,EAAC,CAAA;AAG5B,IAAA,uBACEC,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG;AAAA,UAC9B,CAAC,YAAA,CAAa,SAAS,CAAC,GAAG,SAAA;AAAA,UAC3B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,UAAA;AAAA,UAC5B,CAAC,YAAA,CAAa,aAAa,CAAC,GAAG,aAAA;AAAA,UAC/B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,UAC5B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG;AAAA,SAC7B,CAAA;AAAA,QAED,QAAA,EAAA;AAAA,0BAAAF,cAAA;AAAA,YAAC,OAAA;AAAA,YAAA;AAAA,cACC,GAAA;AAAA,cACA,IAAA,EAAK,OAAA;AAAA,cACL,IAAA;AAAA,cACA,KAAA;AAAA,cACA,SAAS,aAAA,KAAkB,KAAA;AAAA,cAC3B,QAAA;AAAA,cACA,YAAA;AAAA,cACA,QAAA;AAAA,cACA,QAAA;AAAA,cACA,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,cAC/B,YAAA,EAAY;AAAA;AAAA,WACd;AAAA,0BACAA,cAAA,CAAC,UAAK,SAAA,EAAW,YAAA,CAAa,MAAM,CAAA,EAAG,aAAA,EAAW,MAC/C,QAAA,EAAA,IAAA,EACH;AAAA;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;;;;"}
|