@epam/ai-dial-ui-kit 0.14.0-dev.36 → 0.14.0-dev.37
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/CHANGELOG.md +1 -0
- package/dist/DateCellRenderer-DNPEX0I7.cjs +1 -0
- package/dist/{DateCellRenderer-s9DQ6Fjk.cjs → DateCellRenderer-p6k-mVZt.cjs} +27 -27
- package/dist/IconButton-DWqoaBWf.cjs +1 -0
- package/dist/JsonEditor-BZCyPc2D.cjs +1 -0
- package/dist/{MarkdownEditor-5kljDPcm.cjs → MarkdownEditor-CBH7ILah.cjs} +1 -1
- package/dist/{MarkdownEditor-C0_gU7Fi.cjs → MarkdownEditor-CMRC_XsQ.cjs} +1 -1
- package/dist/MarkdownEditorContainer-B_6-Gd-T.cjs +1 -0
- package/dist/{Switch-CtdhpYik.cjs → Switch-CUKClcEz.cjs} +1 -1
- package/dist/components/MarkdownEditor/MarkdownEditorContainer.js +18 -16
- package/dist/components/New/Tooltip/TooltipContent.js +16 -16
- package/dist/components/Tooltip/TooltipContent.js +11 -11
- package/dist/components-manifest.json +6 -6
- package/dist/dial-ui-kit.cjs +2 -2
- package/dist/editor-BKQqPhwX.cjs +1 -0
- package/dist/editors.cjs +1 -1
- package/dist/file-manager.cjs +1 -1
- package/dist/grid.cjs +1 -1
- package/dist/hooks/use-has-hover.js +17 -0
- package/dist/lazy-CJ-0Pjkj.cjs +1 -0
- package/dist/migration-guides/0.14.0/button-tooltip-2-0.md +1 -1
- package/dist/src/components/New/EllipsisTooltip/EllipsisTooltip.d.ts +1 -1
- package/dist/src/components/New/Tooltip/Tooltip.d.ts +1 -1
- package/dist/src/components/New/Tooltip/TooltipContent.d.ts +4 -3
- package/dist/src/components/Tooltip/TooltipContent.d.ts +4 -0
- package/dist/src/hooks/use-has-hover.d.ts +20 -0
- package/dist/src/utils/__tests__/pointer.spec.d.ts +1 -0
- package/dist/src/utils/pointer.d.ts +29 -0
- package/dist/{use-file-manager-tabs-3AM-Fjrr.cjs → use-file-manager-tabs-CIQjiyK-.cjs} +2 -2
- package/dist/utils/pointer.js +5 -0
- package/package.json +1 -1
- package/dist/DateCellRenderer-CPm5auvF.cjs +0 -1
- package/dist/IconButton-BCbBgnzo.cjs +0 -1
- package/dist/JsonEditor-BlaSMX26.cjs +0 -1
- package/dist/MarkdownEditorContainer-D4bI2w3-.cjs +0 -1
- package/dist/lazy-B1eG0EeX.cjs +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";const r=require("./lazy-CJ-0Pjkj.cjs"),o={[r.EditorThemes.dark]:{base:"vs-dark",inherit:!1,rules:[{token:"string.key.json",foreground:"#37BABC"},{token:"string.value.json",foreground:"#5C8DEA"},{token:"number",foreground:"#D97C27"},{token:"keyword.json",foreground:"#F4CE46"},{token:"delimiter",foreground:"#EEF1F7"},{token:"delimiter.bracket.json",foreground:"#A972FF"},{token:"delimiter.parenthesis",foreground:"#A972FF"}],colors:{"editor.foreground":"#F76464","editor.background":"#161B2D","editorCursor.foreground":"#EEF1F7","editor.selectionBackground":"#5C8DEA2B","editorLineNumber.foreground":"#242C42","scrollbarSlider.background":"#242C42","scrollbarSlider.hoverBackground":"#242C42","scrollbarSlider.activeBackground":"#242C42"}},[r.EditorThemes.light]:{base:"vs",inherit:!1,rules:[{token:"string.key.json",foreground:"#009D9F"},{token:"string.value.json",foreground:"#2764D9"},{token:"number",foreground:"#B25500"},{token:"keyword.json",foreground:"#3F3D25"},{token:"delimiter",foreground:"#161B2D"},{token:"delimiter.bracket.json",foreground:"#7E39EC"},{token:"delimiter.parenthesis",foreground:"#7E39EC"}],colors:{"editor.foreground":"#AE2F2F","editor.background":"#EEF1F7","editorCursor.foreground":"#161B2D","editor.selectionBackground":"#5C8DEA2B","editorLineNumber.foreground":"#242C42","scrollbarSlider.background":"#242C42","scrollbarSlider.hoverBackground":"#242C42","scrollbarSlider.activeBackground":"#242C42"}}};exports.EDITOR_THEMES_CONFIG=o;
|
package/dist/editors.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./lazy-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./lazy-CJ-0Pjkj.cjs"),r=()=>Promise.resolve().then(()=>require("./MarkdownEditorContainer-B_6-Gd-T.cjs"));exports.EditorThemes=o.EditorThemes;exports.LazyDialJsonEditor=o.LazyDialJsonEditor;exports.LazyDialMarkdownEditor=o.LazyDialMarkdownEditor;exports.LazyMarkdownEditor=o.LazyMarkdownEditor;exports.LazyDialMarkdownEditorContainer=r;
|
package/dist/file-manager.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./use-file-manager-tabs-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./use-file-manager-tabs-CIQjiyK-.cjs");exports.DialDestinationFolderPopup=e.DialDestinationFolderPopup;exports.DialFileManager=e.DialFileManager;exports.DialFileManagerActions=e.DialFileManagerActions;exports.DialFileManagerTabs=e.DialFileManagerTabs;exports.DialFoldersTree=e.DialFoldersTree;exports.FileManagerColumnKey=e.FileManagerColumnKey;exports.FileManagerProvider=e.FileManagerProvider;exports.NAME_COLUMN=e.NAME_COLUMN;exports.SIZE_COLUMN=e.SIZE_COLUMN;exports.UPDATED_AT_COLUMN=e.UPDATED_AT_COLUMN;exports.useDialFileManagerTabs=e.useDialFileManagerTabs;exports.useFileManagerContext=e.useFileManagerContext;
|
package/dist/grid.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./DateCellRenderer-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./DateCellRenderer-p6k-mVZt.cjs"),D=require("./DateCellRenderer-DNPEX0I7.cjs");exports.DEFAULT_GRID_DATE_FORMAT_OPTIONS=e.DEFAULT_DATE_FORMAT_OPTIONS;exports.DEFAULT_GRID_DATE_LOCALE=e.DEFAULT_LOCALE;exports.DialDateCellRenderer=e.DialDateCellRenderer;exports.DialGrid=e.DialGrid;exports.GridSelectionMode=e.GridSelectionMode;exports.baseColumnComparator=e.baseColumnComparator;exports.checkColDefsChanges=e.checkColDefsChanges;exports.convertGridDateToDate=e.convertToDate;exports.convertToDate=e.convertToDate;exports.DEFAULT_DATE_FORMAT_OPTIONS=D.DEFAULT_DATE_FORMAT_OPTIONS;exports.DEFAULT_DATE_LOCALE=D.DEFAULT_LOCALE;exports.DateCellRenderer=D.DateCellRenderer;exports.GRID_ALIGN_RIGHT_CLASS=D.GRID_ALIGN_RIGHT_CLASS;exports.GRID_ROOT_CLASS=D.GRID_ROOT_CLASS;exports.GRID_ROW_HEIGHT=D.ROW_HEIGHT;exports.GRID_SELECTION_COLUMN_ID=D.GRID_SELECTION_COLUMN_ID;exports.GRID_THEME_PARAMS=D.GRID_THEME_PARAMS;exports.Grid=D.Grid;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { useState as s, useEffect as i } from "react";
|
|
2
|
+
import { hasNoHoverSupport as a, NO_HOVER_MEDIA_QUERY as c } from "../utils/pointer.js";
|
|
3
|
+
const u = () => {
|
|
4
|
+
const [o, t] = s(() => !a());
|
|
5
|
+
return i(() => {
|
|
6
|
+
if (typeof window > "u" || typeof window.matchMedia != "function")
|
|
7
|
+
return;
|
|
8
|
+
const e = window.matchMedia(c);
|
|
9
|
+
if (t(!e.matches), typeof e.addEventListener != "function")
|
|
10
|
+
return;
|
|
11
|
+
const n = (r) => t(!r.matches);
|
|
12
|
+
return e.addEventListener("change", n), () => e.removeEventListener("change", n);
|
|
13
|
+
}, []), o;
|
|
14
|
+
};
|
|
15
|
+
export {
|
|
16
|
+
u as useHasHover
|
|
17
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";var o=(r=>(r.dark="dark",r.light="light",r))(o||{});const e=()=>Promise.resolve().then(()=>require("./JsonEditor-BZCyPc2D.cjs")),i=()=>Promise.resolve().then(()=>require("./MarkdownEditor-CBH7ILah.cjs")),a=()=>Promise.resolve().then(()=>require("./MarkdownEditor-CMRC_XsQ.cjs"));exports.EditorThemes=o;exports.LazyDialJsonEditor=e;exports.LazyDialMarkdownEditor=i;exports.LazyMarkdownEditor=a;
|
|
@@ -106,6 +106,6 @@ npm run test
|
|
|
106
106
|
## Notes
|
|
107
107
|
|
|
108
108
|
- The 1.0 `DialButton` and `DialIconButton` are untouched and keep the 1.0 tooltip.
|
|
109
|
-
- As in 1.0, the 2.0 tooltip renders nothing on
|
|
109
|
+
- As in 1.0, the 2.0 tooltip renders nothing on a touch-only device, so a tooltip still cannot be a
|
|
110
110
|
control's only accessible name. Both buttons continue to fall back to a string
|
|
111
111
|
`tooltipProps.tooltip` as their `aria-label` when nothing else names them.
|
|
@@ -22,7 +22,7 @@ export interface EllipsisTooltipProps extends TooltipContainerOptions {
|
|
|
22
22
|
*
|
|
23
23
|
* a11y: while truncated, the full string is exposed as the element's
|
|
24
24
|
* `aria-label`, so a screen reader reads the whole label even though the
|
|
25
|
-
* tooltip itself renders nothing on
|
|
25
|
+
* tooltip itself renders nothing on a touch-only device.
|
|
26
26
|
*
|
|
27
27
|
* @example
|
|
28
28
|
* ```tsx
|
|
@@ -19,7 +19,7 @@ export interface TooltipProps extends TooltipContainerOptions {
|
|
|
19
19
|
* Tooltip text does not reach assistive technology unless the trigger itself
|
|
20
20
|
* carries it: pass `asChild` so the `aria-describedby` lands on the control
|
|
21
21
|
* rather than on a wrapper `<span>`, and never let a tooltip be the only
|
|
22
|
-
* accessible name of a control — it renders nothing on
|
|
22
|
+
* accessible name of a control — it renders nothing on a touch-only device.
|
|
23
23
|
*
|
|
24
24
|
* @example
|
|
25
25
|
* ```tsx
|
|
@@ -7,9 +7,10 @@ export interface TooltipContentProps extends HTMLProps<HTMLDivElement> {
|
|
|
7
7
|
* Design system 2.0
|
|
8
8
|
*
|
|
9
9
|
* Rendered in a portal, above popups and dropdowns, with an arrow pointing back
|
|
10
|
-
* at the trigger. Renders nothing on a
|
|
11
|
-
* to reveal it — so a control must never depend on a tooltip alone to be
|
|
12
|
-
* understood, or to have an accessible name.
|
|
10
|
+
* at the trigger. Renders nothing on a touch-only device, where no pointer can
|
|
11
|
+
* hover to reveal it — so a control must never depend on a tooltip alone to be
|
|
12
|
+
* understood, or to have an accessible name. A narrow viewport is not itself
|
|
13
|
+
* disqualifying: an embed a few hundred pixels wide still hovers on a desktop.
|
|
13
14
|
*
|
|
14
15
|
* @param children - The content to display inside the tooltip
|
|
15
16
|
* @param [className] - Additional CSS classes applied to the tooltip bubble
|
|
@@ -6,6 +6,10 @@ export interface Props extends HTMLProps<HTMLDivElement> {
|
|
|
6
6
|
* The content area of a tooltip that displays the tooltip information
|
|
7
7
|
* Design system 1.0
|
|
8
8
|
*
|
|
9
|
+
* Renders nothing on a touch-only device, where no pointer can hover to reveal
|
|
10
|
+
* it. A narrow viewport is not itself disqualifying: an embed a few hundred
|
|
11
|
+
* pixels wide still hovers on a desktop.
|
|
12
|
+
*
|
|
9
13
|
* @param children - The content to display inside the tooltip
|
|
10
14
|
* @param [style] - Additional inline styles for the tooltip content
|
|
11
15
|
*/
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* A React hook that reports whether the device's primary pointer can hover.
|
|
3
|
+
*
|
|
4
|
+
* Tracks the `hover: none` media query rather than the viewport width, so a
|
|
5
|
+
* narrow embed on a desktop still counts as hover-capable, and re-evaluates
|
|
6
|
+
* when a hybrid device switches input — a tablet that gains a trackpad starts
|
|
7
|
+
* hovering without a reload.
|
|
8
|
+
*
|
|
9
|
+
* Defaults to `true` where the capability cannot be read (SSR, or a browser
|
|
10
|
+
* without `matchMedia`), so hover-only UI is never dropped on a guess.
|
|
11
|
+
*
|
|
12
|
+
* @returns {boolean} `true` when the pointer can hover, `false` on a touch-only device.
|
|
13
|
+
*
|
|
14
|
+
* @example
|
|
15
|
+
* const hasHover = useHasHover();
|
|
16
|
+
* if (!hasHover) {
|
|
17
|
+
* return null; // Nothing would ever reveal a hover-only bubble here
|
|
18
|
+
* }
|
|
19
|
+
*/
|
|
20
|
+
export declare const useHasHover: () => boolean;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Media query matched only by a device that positively reports it cannot hover
|
|
3
|
+
* its primary pointer — a touch-only phone or tablet.
|
|
4
|
+
*
|
|
5
|
+
* `(hover: none)` is deliberately the whole query. `(pointer: coarse)` would
|
|
6
|
+
* also catch a touchscreen laptop driven by a mouse and a TV remote, both of
|
|
7
|
+
* which hover perfectly well.
|
|
8
|
+
*/
|
|
9
|
+
export declare const NO_HOVER_MEDIA_QUERY = "(hover: none)";
|
|
10
|
+
/**
|
|
11
|
+
* Reports whether the device says its primary pointer cannot hover.
|
|
12
|
+
*
|
|
13
|
+
* Keyed on input capability rather than viewport width on purpose: an app
|
|
14
|
+
* embedded in a narrow desktop iframe sees a `window.innerWidth` of a few
|
|
15
|
+
* hundred pixels while still being driven by a mouse, so a width test would
|
|
16
|
+
* wrongly strip its hover-only affordances.
|
|
17
|
+
*
|
|
18
|
+
* Returns `false` when there is no `window` (SSR) or no `matchMedia` support,
|
|
19
|
+
* so hover-only UI stays rendered rather than silently disappearing wherever
|
|
20
|
+
* the question cannot be answered.
|
|
21
|
+
*
|
|
22
|
+
* @returns {boolean} `true` only when the device reports `hover: none`.
|
|
23
|
+
*
|
|
24
|
+
* @example
|
|
25
|
+
* if (!hasNoHoverSupport()) {
|
|
26
|
+
* console.log('The pointer can hover — hover-only affordances are usable');
|
|
27
|
+
* }
|
|
28
|
+
*/
|
|
29
|
+
export declare const hasNoHoverSupport: () => boolean;
|