@salt-ds/core 1.0.0 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist-cjs/packages/core/src/aria-announcer/useAriaAnnouncer.js +1 -0
- package/dist-cjs/packages/core/src/aria-announcer/useAriaAnnouncer.js.map +1 -1
- package/dist-cjs/packages/core/src/border-item/BorderItem.js +3 -6
- package/dist-cjs/packages/core/src/border-item/BorderItem.js.map +1 -1
- package/dist-cjs/packages/core/src/border-layout/BorderLayout.js +3 -6
- package/dist-cjs/packages/core/src/border-layout/BorderLayout.js.map +1 -1
- package/dist-cjs/packages/core/src/button/Button.js +3 -6
- package/dist-cjs/packages/core/src/button/Button.js.map +1 -1
- package/dist-cjs/packages/core/src/card/Card.css.js +9 -0
- package/dist-cjs/packages/core/src/card/Card.css.js.map +1 -0
- package/dist-cjs/packages/core/src/card/Card.js +37 -0
- package/dist-cjs/packages/core/src/card/Card.js.map +1 -0
- package/dist-cjs/packages/core/src/flex-item/FlexItem.js +3 -6
- package/dist-cjs/packages/core/src/flex-item/FlexItem.js.map +1 -1
- package/dist-cjs/packages/core/src/flex-layout/FlexLayout.css.js +1 -1
- package/dist-cjs/packages/core/src/flex-layout/FlexLayout.js +4 -10
- package/dist-cjs/packages/core/src/flex-layout/FlexLayout.js.map +1 -1
- package/dist-cjs/packages/core/src/flow-layout/FlowLayout.js +3 -2
- package/dist-cjs/packages/core/src/flow-layout/FlowLayout.js.map +1 -1
- package/dist-cjs/packages/core/src/grid-item/GridItem.js +3 -6
- package/dist-cjs/packages/core/src/grid-item/GridItem.js.map +1 -1
- package/dist-cjs/packages/core/src/grid-layout/GridLayout.js +3 -6
- package/dist-cjs/packages/core/src/grid-layout/GridLayout.js.map +1 -1
- package/dist-cjs/packages/core/src/index.js +16 -0
- package/dist-cjs/packages/core/src/index.js.map +1 -1
- package/dist-cjs/packages/core/src/link/Link.css.js +1 -1
- package/dist-cjs/packages/core/src/link/Link.js +3 -6
- package/dist-cjs/packages/core/src/link/Link.js.map +1 -1
- package/dist-cjs/packages/core/src/panel/Panel.css.js +9 -0
- package/dist-cjs/packages/core/src/panel/Panel.css.js.map +1 -0
- package/dist-cjs/packages/core/src/panel/Panel.js +26 -0
- package/dist-cjs/packages/core/src/panel/Panel.js.map +1 -0
- package/dist-cjs/packages/core/src/salt-provider/SaltProvider.js +4 -4
- package/dist-cjs/packages/core/src/salt-provider/SaltProvider.js.map +1 -1
- package/dist-cjs/packages/core/src/spinner/Spinner.css.js +9 -0
- package/dist-cjs/packages/core/src/spinner/Spinner.css.js.map +1 -0
- package/dist-cjs/packages/core/src/spinner/Spinner.js +81 -0
- package/dist-cjs/packages/core/src/spinner/Spinner.js.map +1 -0
- package/dist-cjs/packages/core/src/spinner/svgSpinners/SpinnerSVG.js +80 -0
- package/dist-cjs/packages/core/src/spinner/svgSpinners/SpinnerSVG.js.map +1 -0
- package/dist-cjs/packages/core/src/split-layout/SplitLayout.js +25 -0
- package/dist-cjs/packages/core/src/split-layout/SplitLayout.js.map +1 -0
- package/dist-cjs/packages/core/src/stack-layout/StackLayout.css.js +9 -0
- package/dist-cjs/packages/core/src/stack-layout/StackLayout.css.js.map +1 -0
- package/dist-cjs/packages/core/src/stack-layout/StackLayout.js +38 -3
- package/dist-cjs/packages/core/src/stack-layout/StackLayout.js.map +1 -1
- package/dist-cjs/packages/core/src/status-indicator/StatusIndicator.js +3 -6
- package/dist-cjs/packages/core/src/status-indicator/StatusIndicator.js.map +1 -1
- package/dist-cjs/packages/core/src/text/Display.js +5 -8
- package/dist-cjs/packages/core/src/text/Display.js.map +1 -1
- package/dist-cjs/packages/core/src/text/Text.css.js +1 -1
- package/dist-cjs/packages/core/src/text/Text.js +7 -8
- package/dist-cjs/packages/core/src/text/Text.js.map +1 -1
- package/dist-cjs/packages/core/src/theme/Theme.js.map +1 -1
- package/dist-cjs/packages/core/src/tooltip/Tooltip.css.js +9 -0
- package/dist-cjs/packages/core/src/tooltip/Tooltip.css.js.map +1 -0
- package/dist-cjs/packages/core/src/tooltip/Tooltip.js +91 -0
- package/dist-cjs/packages/core/src/tooltip/Tooltip.js.map +1 -0
- package/dist-cjs/packages/core/src/tooltip/useAriaAnnounce.js +94 -0
- package/dist-cjs/packages/core/src/tooltip/useAriaAnnounce.js.map +1 -0
- package/dist-cjs/packages/core/src/tooltip/useTooltip.js +106 -0
- package/dist-cjs/packages/core/src/tooltip/useTooltip.js.map +1 -0
- package/dist-cjs/packages/core/src/utils/marginMiddleware.js.map +1 -1
- package/dist-cjs/packages/core/src/utils/useFloatingUI.js +38 -0
- package/dist-cjs/packages/core/src/utils/useFloatingUI.js.map +1 -0
- package/dist-cjs/packages/core/src/viewport/ViewportProvider.js +5 -1
- package/dist-cjs/packages/core/src/viewport/ViewportProvider.js.map +1 -1
- package/dist-es/packages/core/src/aria-announcer/useAriaAnnouncer.js +1 -0
- package/dist-es/packages/core/src/aria-announcer/useAriaAnnouncer.js.map +1 -1
- package/dist-es/packages/core/src/border-item/BorderItem.js +3 -2
- package/dist-es/packages/core/src/border-item/BorderItem.js.map +1 -1
- package/dist-es/packages/core/src/border-layout/BorderLayout.js +3 -2
- package/dist-es/packages/core/src/border-layout/BorderLayout.js.map +1 -1
- package/dist-es/packages/core/src/button/Button.js +3 -2
- package/dist-es/packages/core/src/button/Button.js.map +1 -1
- package/dist-es/packages/core/src/card/Card.css.js +7 -0
- package/dist-es/packages/core/src/card/Card.css.js.map +1 -0
- package/dist-es/packages/core/src/card/Card.js +33 -0
- package/dist-es/packages/core/src/card/Card.js.map +1 -0
- package/dist-es/packages/core/src/flex-item/FlexItem.js +3 -2
- package/dist-es/packages/core/src/flex-item/FlexItem.js.map +1 -1
- package/dist-es/packages/core/src/flex-layout/FlexLayout.css.js +1 -1
- package/dist-es/packages/core/src/flex-layout/FlexLayout.js +5 -7
- package/dist-es/packages/core/src/flex-layout/FlexLayout.js.map +1 -1
- package/dist-es/packages/core/src/flow-layout/FlowLayout.js +3 -2
- package/dist-es/packages/core/src/flow-layout/FlowLayout.js.map +1 -1
- package/dist-es/packages/core/src/grid-item/GridItem.js +3 -2
- package/dist-es/packages/core/src/grid-item/GridItem.js.map +1 -1
- package/dist-es/packages/core/src/grid-layout/GridLayout.js +3 -2
- package/dist-es/packages/core/src/grid-layout/GridLayout.js.map +1 -1
- package/dist-es/packages/core/src/index.js +7 -0
- package/dist-es/packages/core/src/index.js.map +1 -1
- package/dist-es/packages/core/src/link/Link.css.js +1 -1
- package/dist-es/packages/core/src/link/Link.js +3 -2
- package/dist-es/packages/core/src/link/Link.js.map +1 -1
- package/dist-es/packages/core/src/panel/Panel.css.js +7 -0
- package/dist-es/packages/core/src/panel/Panel.css.js.map +1 -0
- package/dist-es/packages/core/src/panel/Panel.js +22 -0
- package/dist-es/packages/core/src/panel/Panel.js.map +1 -0
- package/dist-es/packages/core/src/salt-provider/SaltProvider.js +4 -3
- package/dist-es/packages/core/src/salt-provider/SaltProvider.js.map +1 -1
- package/dist-es/packages/core/src/spinner/Spinner.css.js +7 -0
- package/dist-es/packages/core/src/spinner/Spinner.css.js.map +1 -0
- package/dist-es/packages/core/src/spinner/Spinner.js +76 -0
- package/dist-es/packages/core/src/spinner/Spinner.js.map +1 -0
- package/dist-es/packages/core/src/spinner/svgSpinners/SpinnerSVG.js +76 -0
- package/dist-es/packages/core/src/spinner/svgSpinners/SpinnerSVG.js.map +1 -0
- package/dist-es/packages/core/src/split-layout/SplitLayout.js +21 -0
- package/dist-es/packages/core/src/split-layout/SplitLayout.js.map +1 -0
- package/dist-es/packages/core/src/stack-layout/StackLayout.css.js +7 -0
- package/dist-es/packages/core/src/stack-layout/StackLayout.css.js.map +1 -0
- package/dist-es/packages/core/src/stack-layout/StackLayout.js +38 -3
- package/dist-es/packages/core/src/stack-layout/StackLayout.js.map +1 -1
- package/dist-es/packages/core/src/status-indicator/StatusIndicator.js +3 -2
- package/dist-es/packages/core/src/status-indicator/StatusIndicator.js.map +1 -1
- package/dist-es/packages/core/src/text/Display.js +5 -4
- package/dist-es/packages/core/src/text/Display.js.map +1 -1
- package/dist-es/packages/core/src/text/Text.css.js +1 -1
- package/dist-es/packages/core/src/text/Text.js +7 -4
- package/dist-es/packages/core/src/text/Text.js.map +1 -1
- package/dist-es/packages/core/src/theme/Theme.js.map +1 -1
- package/dist-es/packages/core/src/tooltip/Tooltip.css.js +7 -0
- package/dist-es/packages/core/src/tooltip/Tooltip.css.js.map +1 -0
- package/dist-es/packages/core/src/tooltip/Tooltip.js +87 -0
- package/dist-es/packages/core/src/tooltip/Tooltip.js.map +1 -0
- package/dist-es/packages/core/src/tooltip/useAriaAnnounce.js +90 -0
- package/dist-es/packages/core/src/tooltip/useAriaAnnounce.js.map +1 -0
- package/dist-es/packages/core/src/tooltip/useTooltip.js +102 -0
- package/dist-es/packages/core/src/tooltip/useTooltip.js.map +1 -0
- package/dist-es/packages/core/src/utils/marginMiddleware.js.map +1 -1
- package/dist-es/packages/core/src/utils/useFloatingUI.js +33 -0
- package/dist-es/packages/core/src/utils/useFloatingUI.js.map +1 -0
- package/dist-es/packages/core/src/viewport/ViewportProvider.js +6 -2
- package/dist-es/packages/core/src/viewport/ViewportProvider.js.map +1 -1
- package/dist-types/border-item/BorderItem.d.ts +1 -1
- package/dist-types/card/Card.d.ts +18 -0
- package/dist-types/card/index.d.ts +1 -0
- package/dist-types/flex-layout/FlexLayout.d.ts +2 -0
- package/dist-types/flow-layout/FlowLayout.d.ts +7 -4
- package/dist-types/index.d.ts +5 -0
- package/dist-types/link/Link.d.ts +2 -2
- package/dist-types/panel/Panel.d.ts +20 -0
- package/dist-types/panel/index.d.ts +1 -0
- package/dist-types/spinner/Spinner.d.ts +45 -0
- package/dist-types/spinner/index.d.ts +1 -0
- package/dist-types/spinner/svgSpinners/SpinnerSVG.d.ts +5 -0
- package/dist-types/split-layout/SplitLayout.d.ts +28 -0
- package/dist-types/split-layout/index.d.ts +1 -0
- package/dist-types/stack-layout/StackLayout.d.ts +14 -6
- package/dist-types/text/Display.d.ts +3 -3
- package/dist-types/text/Headings.d.ts +4 -4
- package/dist-types/text/Label.d.ts +1 -1
- package/dist-types/text/Text.d.ts +4 -0
- package/dist-types/theme/Theme.d.ts +1 -1
- package/dist-types/tooltip/Tooltip.d.ts +47 -0
- package/dist-types/tooltip/index.d.ts +2 -0
- package/dist-types/tooltip/useAriaAnnounce.d.ts +9 -0
- package/dist-types/tooltip/useTooltip.d.ts +36 -0
- package/dist-types/utils/index.d.ts +1 -0
- package/dist-types/utils/useFloatingUI.d.ts +34 -0
- package/package.json +4 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Display.js","sources":["../src/text/Display.tsx"],"sourcesContent":["import { makePrefixer } from \"../utils\";\nimport
|
|
1
|
+
{"version":3,"file":"Display.js","sources":["../src/text/Display.tsx"],"sourcesContent":["import { makePrefixer } from \"../utils\";\nimport { clsx } from \"clsx\";\nimport { forwardRef } from \"react\";\nimport { Text, TextProps } from \"./Text\";\n\nconst withBaseName = makePrefixer(\"saltText\");\n\nexport const Display1 = forwardRef<\n HTMLSpanElement,\n Omit<TextProps<\"span\">, \"as\">\n>(function Display1({ children, className, ...rest }, ref) {\n return (\n <Text\n as=\"span\"\n className={clsx(className, withBaseName(`display1`))}\n ref={ref}\n {...rest}\n >\n {children}\n </Text>\n );\n});\n\nexport const Display2 = forwardRef<\n HTMLSpanElement,\n Omit<TextProps<\"span\">, \"as\">\n>(function Display2({ children, className, ...rest }, ref) {\n return (\n <Text\n as=\"span\"\n className={clsx(className, withBaseName(`display2`))}\n ref={ref}\n {...rest}\n >\n {children}\n </Text>\n );\n});\n\nexport const Display3 = forwardRef<\n HTMLSpanElement,\n Omit<TextProps<\"span\">, \"as\">\n>(function Display3({ children, className, ...rest }, ref) {\n return (\n <Text\n as=\"span\"\n className={clsx(className, withBaseName(`display3`))}\n ref={ref}\n {...rest}\n >\n {children}\n </Text>\n );\n});\n"],"names":["makePrefixer","forwardRef","Display1","jsx","Text","clsx","Display2","Display3"],"mappings":";;;;;;;;;;;;;;AAKA,MAAM,YAAA,GAAeA,0BAAa,UAAU,CAAA,CAAA;AAE/B,MAAA,QAAA,GAAWC,iBAGtB,SAASC,SAAAA,CAAS,EAAE,QAAU,EAAA,SAAA,EAAA,GAAc,IAAK,EAAA,EAAG,GAAK,EAAA;AACzD,EAAA,uBACGC,cAAA,CAAAC,SAAA,EAAA;AAAA,IACC,EAAG,EAAA,MAAA;AAAA,IACH,SAAW,EAAAC,SAAA,CAAK,SAAW,EAAA,YAAA,CAAa,UAAU,CAAC,CAAA;AAAA,IACnD,GAAA;AAAA,IACC,GAAG,IAAA;AAAA,IAEH,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC,EAAA;AAEY,MAAA,QAAA,GAAWJ,iBAGtB,SAASK,SAAAA,CAAS,EAAE,QAAU,EAAA,SAAA,EAAA,GAAc,IAAK,EAAA,EAAG,GAAK,EAAA;AACzD,EAAA,uBACGH,cAAA,CAAAC,SAAA,EAAA;AAAA,IACC,EAAG,EAAA,MAAA;AAAA,IACH,SAAW,EAAAC,SAAA,CAAK,SAAW,EAAA,YAAA,CAAa,UAAU,CAAC,CAAA;AAAA,IACnD,GAAA;AAAA,IACC,GAAG,IAAA;AAAA,IAEH,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC,EAAA;AAEY,MAAA,QAAA,GAAWJ,iBAGtB,SAASM,SAAAA,CAAS,EAAE,QAAU,EAAA,SAAA,EAAA,GAAc,IAAK,EAAA,EAAG,GAAK,EAAA;AACzD,EAAA,uBACGJ,cAAA,CAAAC,SAAA,EAAA;AAAA,IACC,EAAG,EAAA,MAAA;AAAA,IACH,SAAW,EAAAC,SAAA,CAAK,SAAW,EAAA,YAAA,CAAa,UAAU,CAAC,CAAA;AAAA,IACnD,GAAA;AAAA,IACC,GAAG,IAAA;AAAA,IAEH,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;;;"}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
|
|
4
4
|
|
|
5
|
-
var css_248z = "/* Main css class. Style for body text */\n.saltText {\n
|
|
5
|
+
var css_248z = "/* Main css class. Style for body text */\n.saltText {\n color: var(--saltText-color, var(--text-color));\n}\n\n.saltText::selection {\n background: var(--saltText-highlight, var(--salt-text-background-selected));\n}\n\n/* Allows truncation */\n.saltText-lineClamp {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: var(--text-max-rows, 0);\n overflow: hidden;\n word-break: break-word;\n}\n\n/* Primary variant */\n.saltText-primary {\n --text-color: var(--salt-text-primary-foreground);\n}\n\n/* Disabled primary variant */\n.saltText-primary.saltText-disabled {\n --text-color: var(--salt-text-primary-foreground-disabled);\n}\n\n/* Secondary variant */\n.saltText-secondary {\n --text-color: var(--salt-text-secondary-foreground);\n}\n\n/* Disabled secondary variant */\n.saltText-secondary.saltText-disabled {\n --text-color: var(--salt-text-secondary-foreground-disabled);\n}\n\n/* Body emphasis strong */\n.saltText strong {\n font-weight: var(--salt-text-fontWeight-strong);\n}\n/* Body emphasis small */\n.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Display 1 */\n.saltText-display1.saltText {\n font-size: var(--salt-text-display1-fontSize);\n font-weight: var(--salt-text-display1-fontWeight);\n line-height: var(--salt-text-display1-lineHeight);\n}\n\n/* Display 2 */\n.saltText-display2.saltText {\n font-size: var(--salt-text-display2-fontSize);\n font-weight: var(--salt-text-display2-fontWeight);\n line-height: var(--salt-text-display2-lineHeight);\n}\n\n/* Display 3 */\n.saltText-display3.saltText {\n font-size: var(--salt-text-display3-fontSize);\n font-weight: var(--salt-text-display3-fontWeight);\n line-height: var(--salt-text-display3-lineHeight);\n}\n\n/* Heading 1 */\nh1.saltText,\n.saltText-h1.saltText {\n font-size: var(--salt-text-h1-fontSize);\n font-weight: var(--salt-text-h1-fontWeight);\n line-height: var(--salt-text-h1-lineHeight);\n}\n\n/* H1 emphasis strong */\nh1.saltText strong,\n.saltText-h1.saltText strong {\n font-weight: var(--salt-text-h1-fontWeight-strong);\n}\n/* H1 emphasis small */\nh1.saltText small,\n.saltText-h1.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-h1-fontWeight-small);\n}\n\n/* Heading 2 */\nh2.saltText,\n.saltText-h2.saltText {\n font-size: var(--salt-text-h2-fontSize);\n font-weight: var(--salt-text-h2-fontWeight);\n line-height: var(--salt-text-h2-lineHeight);\n}\n\n/* H2 emphasis strong */\nh2.saltText strong,\n.saltText-h2.saltText strong {\n font-weight: var(--salt-text-h2-fontWeight-strong);\n}\n/* H2 emphasis small */\nh2.saltText small,\n.saltText-h2.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-h2-fontWeight-small);\n}\n\n/* Heading 3 */\nh3.saltText,\n.saltText-h3.saltText {\n font-size: var(--salt-text-h3-fontSize);\n font-weight: var(--salt-text-h3-fontWeight);\n line-height: var(--salt-text-h3-lineHeight);\n}\n\n/* H3 emphasis strong */\nh3.saltText strong,\n.saltText-h3.saltText strong {\n font-weight: var(--salt-text-h3-fontWeight-strong);\n}\n/* H3 emphasis small */\nh3.saltText small,\n.saltText-h3.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-h3-fontWeight-small);\n}\n\n/* Heading 4 */\nh4.saltText,\n.saltText-h4.saltText {\n font-size: var(--salt-text-h4-fontSize);\n font-weight: var(--salt-text-h4-fontWeight);\n line-height: var(--salt-text-h4-lineHeight);\n}\n\n/* H4 emphasis strong */\nh4.saltText strong,\n.saltText-h4.saltText strong {\n font-weight: var(--salt-text-h4-fontWeight-strong);\n}\n/* H4 emphasis small */\nh4.saltText small,\n.saltText-h4.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-h4-fontWeight-small);\n}\n\n/* Label */\nlabel.saltText,\n.saltText-label.saltText {\n font-size: var(--salt-text-label-fontSize);\n line-height: var(--salt-text-label-lineHeight);\n font-weight: var(--salt-text-fontWeight);\n}\n\n/* Label emphasis strong */\nlabel.saltText strong,\n.saltText-label.saltText strong {\n font-weight: var(--salt-text-fontWeight-strong);\n}\n/* Label emphasis small */\nlabel.saltText small,\n.saltText-label.saltText small {\n font-size: inherit;\n font-weight: var(--salt-text-fontWeight-small);\n}\n";
|
|
6
6
|
styleInject_es(css_248z);
|
|
7
7
|
|
|
8
8
|
module.exports = css_248z;
|
|
@@ -5,32 +5,31 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
6
|
var React = require('react');
|
|
7
7
|
var makePrefixer = require('../utils/makePrefixer.js');
|
|
8
|
+
require('../utils/useFloatingUI.js');
|
|
8
9
|
require('../utils/useId.js');
|
|
9
10
|
require('../salt-provider/SaltProvider.js');
|
|
10
11
|
require('../viewport/ViewportProvider.js');
|
|
11
|
-
var
|
|
12
|
+
var clsx = require('clsx');
|
|
12
13
|
require('./Text.css.js');
|
|
13
14
|
|
|
14
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
15
|
-
|
|
16
|
-
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
|
17
|
-
|
|
18
15
|
const withBaseName = makePrefixer.makePrefixer("saltText");
|
|
19
16
|
const Text = React.forwardRef(
|
|
20
17
|
({
|
|
18
|
+
as,
|
|
21
19
|
children,
|
|
22
20
|
className,
|
|
23
|
-
|
|
21
|
+
disabled = false,
|
|
24
22
|
maxRows,
|
|
23
|
+
style,
|
|
25
24
|
styleAs,
|
|
26
25
|
variant = "primary",
|
|
27
|
-
style,
|
|
28
26
|
...restProps
|
|
29
27
|
}, ref) => {
|
|
30
28
|
const Component = as || "div";
|
|
31
29
|
const textStyles = { "--text-max-rows": maxRows, ...style };
|
|
32
30
|
return /* @__PURE__ */ jsxRuntime.jsx(Component, {
|
|
33
|
-
className:
|
|
31
|
+
className: clsx.clsx(withBaseName(), className, {
|
|
32
|
+
[withBaseName("disabled")]: disabled,
|
|
34
33
|
[withBaseName("lineClamp")]: maxRows,
|
|
35
34
|
[withBaseName(styleAs || "")]: styleAs,
|
|
36
35
|
[withBaseName(variant)]: variant
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.js","sources":["../src/text/Text.tsx"],"sourcesContent":["import {\n makePrefixer,\n PolymorphicComponentPropWithRef,\n PolymorphicRef,\n} from \"../utils\";\nimport
|
|
1
|
+
{"version":3,"file":"Text.js","sources":["../src/text/Text.tsx"],"sourcesContent":["import {\n makePrefixer,\n PolymorphicComponentPropWithRef,\n PolymorphicRef,\n} from \"../utils\";\nimport { clsx } from \"clsx\";\nimport { ElementType, forwardRef, ReactElement } from \"react\";\n\nimport \"./Text.css\";\n\nexport type TextProps<T extends ElementType> = PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * Applies disabled styling when true\n */\n disabled?: boolean;\n /**\n * Apply text truncation by mentioning number of rows to be displayed\n */\n maxRows?: number;\n /**\n * Match styling to another text component's style\n */\n styleAs?:\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"label\"\n | \"display1\"\n | \"display2\"\n | \"display3\";\n /**\n * Change text color palette\n */\n variant?: \"primary\" | \"secondary\";\n }\n>;\n\ntype TextComponent = <T extends ElementType = \"div\">(\n props: TextProps<T>\n) => ReactElement | null;\n\nconst withBaseName = makePrefixer(\"saltText\");\n\nexport const Text: TextComponent = forwardRef(\n <T extends ElementType = \"div\">(\n {\n as,\n children,\n className,\n disabled = false,\n maxRows,\n style,\n styleAs,\n variant = \"primary\",\n ...restProps\n }: TextProps<T>,\n ref?: PolymorphicRef<T>\n ) => {\n const Component = as || \"div\";\n\n const textStyles = { \"--text-max-rows\": maxRows, ...style };\n\n return (\n <Component\n className={clsx(withBaseName(), className, {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"lineClamp\")]: maxRows,\n [withBaseName(styleAs || \"\")]: styleAs,\n [withBaseName(variant)]: variant,\n })}\n {...restProps}\n ref={ref}\n style={textStyles}\n >\n {children}\n </Component>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","jsx","clsx"],"mappings":";;;;;;;;;;;;;;AA4CA,MAAM,YAAA,GAAeA,0BAAa,UAAU,CAAA,CAAA;AAErC,MAAM,IAAsB,GAAAC,gBAAA;AAAA,EACjC,CACE;AAAA,IACE,EAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAW,GAAA,KAAA;AAAA,IACX,OAAA;AAAA,IACA,KAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAU,GAAA,SAAA;AAAA,IACP,GAAA,SAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,YAAY,EAAM,IAAA,KAAA,CAAA;AAExB,IAAA,MAAM,UAAa,GAAA,EAAE,iBAAmB,EAAA,OAAA,EAAS,GAAG,KAAM,EAAA,CAAA;AAE1D,IAAA,uBACGC,cAAA,CAAA,SAAA,EAAA;AAAA,MACC,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAW,EAAA;AAAA,QACzC,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,QAC5B,CAAC,YAAa,CAAA,WAAW,CAAI,GAAA,OAAA;AAAA,QAC7B,CAAC,YAAA,CAAa,OAAW,IAAA,EAAE,CAAI,GAAA,OAAA;AAAA,QAC/B,CAAC,YAAa,CAAA,OAAO,CAAI,GAAA,OAAA;AAAA,OAC1B,CAAA;AAAA,MACA,GAAG,SAAA;AAAA,MACJ,GAAA;AAAA,MACA,KAAO,EAAA,UAAA;AAAA,MAEN,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Theme.js","sources":["../src/theme/Theme.ts"],"sourcesContent":["export type characteristic =\n | \"accent\"\n | \"actionable\"\n | \"container\"\n | \"
|
|
1
|
+
{"version":3,"file":"Theme.js","sources":["../src/theme/Theme.ts"],"sourcesContent":["export type characteristic =\n | \"accent\"\n | \"actionable\"\n | \"container\"\n | \"differential\"\n | \"draggable\"\n | \"editable\"\n | \"focused\"\n | \"measured\"\n | \"navigable\"\n | \"overlayable\"\n | \"selectable\"\n | \"separable\"\n | \"status\"\n | \"taggable\"\n | \"target\"\n | \"text\";\n\nexport type ThemeName = string;\n\nexport const getCharacteristicValue = (\n themeName: ThemeName,\n characteristicName: characteristic,\n variant: string,\n scopeElement?: HTMLElement\n): string | null => {\n const cssVariableName = `--salt-${characteristicName}-${variant}`;\n const scopeTarget =\n scopeElement || document.body.querySelector(`.${themeName}`);\n if (scopeTarget) {\n const style = getComputedStyle(scopeTarget);\n const variableValue = style.getPropertyValue(cssVariableName);\n if (variableValue) {\n return variableValue;\n }\n }\n return null;\n};\n"],"names":[],"mappings":";;;;AAoBO,MAAM,sBAAyB,GAAA,CACpC,SACA,EAAA,kBAAA,EACA,SACA,YACkB,KAAA;AAClB,EAAM,MAAA,eAAA,GAAkB,UAAU,kBAAsB,CAAA,CAAA,EAAA,OAAA,CAAA,CAAA,CAAA;AACxD,EAAA,MAAM,cACJ,YAAgB,IAAA,QAAA,CAAS,IAAK,CAAA,aAAA,CAAc,IAAI,SAAW,CAAA,CAAA,CAAA,CAAA;AAC7D,EAAA,IAAI,WAAa,EAAA;AACf,IAAM,MAAA,KAAA,GAAQ,iBAAiB,WAAW,CAAA,CAAA;AAC1C,IAAM,MAAA,aAAA,GAAgB,KAAM,CAAA,gBAAA,CAAiB,eAAe,CAAA,CAAA;AAC5D,IAAA,IAAI,aAAe,EAAA;AACjB,MAAO,OAAA,aAAA,CAAA;AAAA,KACT;AAAA,GACF;AACA,EAAO,OAAA,IAAA,CAAA;AACT;;;;"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
|
|
4
|
+
|
|
5
|
+
var css_248z = "/* Styles applied to root component */\n.saltTooltip {\n --tooltip-background: var(--saltTooltip-background, var(--salt-container-primary-background));\n --tooltip-zIndex: var(--saltTooltip-zIndex, var(--salt-zIndex-flyover));\n}\n\n.saltTooltip {\n background: var(--tooltip-background);\n border-color: var(--saltTooltip-borderColor, var(--tooltip-status-borderColor));\n border-width: var(--saltTooltip-borderWidth, var(--salt-size-border));\n border-style: var(--saltTooltip-borderStyle, var(--salt-container-borderStyle));\n box-shadow: var(--saltTooltip-shadow, var(--salt-overlayable-shadow-popout));\n color: var(--saltTooltip-text-color, var(--salt-text-primary-foreground));\n max-width: var(--saltTooltip-maxWidth, 230px);\n padding: var(--saltTooltip-padding, var(--salt-size-unit));\n position: relative;\n text-align: var(--saltTooltip-textAlign, left);\n z-index: var(--tooltip-zIndex);\n}\n\n/* Styles applied to container */\n.saltTooltip-container {\n display: flex;\n align-items: baseline;\n position: relative;\n}\n\n/* Styles applied to content */\n.saltTooltip-content {\n overflow: hidden;\n}\n\n/* Styles applied to status indicator */\n.saltTooltip-icon {\n --saltIcon-margin: 0 var(--saltTooltip-icon-marginRight, 6px) 0 0;\n vertical-align: top;\n align-self: center;\n}\n\n/* Styles applied to arrow */\n.saltTooltip-arrow,\n.saltTooltip-arrow::after {\n border: var(--salt-size-sharktooth-height) solid transparent;\n position: absolute;\n}\n\n.saltTooltip-arrow::after {\n content: \"\";\n}\n\n.saltTooltip[data-placement^=\"top\"] .saltTooltip-arrow {\n border-top-color: var(--tooltip-status-borderColor);\n bottom: -11px;\n}\n\n.saltTooltip[data-placement^=\"bottom\"] .saltTooltip-arrow {\n border-bottom-color: var(--tooltip-status-borderColor);\n top: -11px;\n}\n\n.saltTooltip[data-placement^=\"left\"] .saltTooltip-arrow {\n border-left-color: var(--tooltip-status-borderColor);\n right: -11px;\n}\n\n.saltTooltip[data-placement^=\"right\"] .saltTooltip-arrow {\n border-right-color: var(--tooltip-status-borderColor);\n left: -11px;\n}\n\n.saltTooltip[data-placement^=\"top\"] .saltTooltip-arrow::after {\n border-top-color: var(--tooltip-background);\n bottom: -4px;\n left: calc(100% - var(--salt-size-sharktooth-height));\n}\n\n.saltTooltip[data-placement^=\"bottom\"] .saltTooltip-arrow::after {\n border-bottom-color: var(--tooltip-background);\n top: -4px;\n left: calc(100% - var(--salt-size-sharktooth-height));\n}\n\n.saltTooltip[data-placement^=\"left\"] .saltTooltip-arrow::after {\n border-left-color: var(--tooltip-background);\n right: -4px;\n top: calc(100% - var(--salt-size-sharktooth-height));\n}\n\n.saltTooltip[data-placement^=\"right\"] .saltTooltip-arrow::after {\n border-right-color: var(--tooltip-background);\n left: -4px;\n top: calc(100% - var(--salt-size-sharktooth-height));\n}\n\n/* Styles applied when status = \"info\" */\n.saltTooltip-info {\n --tooltip-status-borderColor: var(--salt-status-info-borderColor);\n}\n\n/* Styles applied when status = \"error\" */\n.saltTooltip-error {\n --tooltip-status-borderColor: var(--salt-status-error-borderColor);\n}\n\n/* Styles applied when status = \"warning\" */\n.saltTooltip-warning {\n --tooltip-status-borderColor: var(--salt-status-warning-borderColor);\n}\n\n/* Styles applied when status = \"success\" */\n.saltTooltip-success {\n --tooltip-status-borderColor: var(--salt-status-success-borderColor);\n}\n";
|
|
6
|
+
styleInject_es(css_248z);
|
|
7
|
+
|
|
8
|
+
module.exports = css_248z;
|
|
9
|
+
//# sourceMappingURL=Tooltip.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tooltip.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
+
var clsx = require('clsx');
|
|
7
|
+
var React = require('react');
|
|
8
|
+
var StatusIndicator = require('../status-indicator/StatusIndicator.js');
|
|
9
|
+
var makePrefixer = require('../utils/makePrefixer.js');
|
|
10
|
+
require('../utils/useFloatingUI.js');
|
|
11
|
+
var useForkRef = require('../utils/useForkRef.js');
|
|
12
|
+
require('../utils/useId.js');
|
|
13
|
+
require('../salt-provider/SaltProvider.js');
|
|
14
|
+
require('../viewport/ViewportProvider.js');
|
|
15
|
+
var useTooltip = require('./useTooltip.js');
|
|
16
|
+
require('./Tooltip.css.js');
|
|
17
|
+
|
|
18
|
+
const withBaseName = makePrefixer.makePrefixer("saltTooltip");
|
|
19
|
+
const Tooltip = React.forwardRef(
|
|
20
|
+
function Tooltip2(props, ref) {
|
|
21
|
+
const {
|
|
22
|
+
children,
|
|
23
|
+
className,
|
|
24
|
+
disabled,
|
|
25
|
+
hideArrow = false,
|
|
26
|
+
hideIcon = false,
|
|
27
|
+
open: openProp,
|
|
28
|
+
content,
|
|
29
|
+
status = "info",
|
|
30
|
+
placement = "right",
|
|
31
|
+
enterDelay = 300,
|
|
32
|
+
leaveDelay = 0,
|
|
33
|
+
...rest
|
|
34
|
+
} = props;
|
|
35
|
+
const hookProps = {
|
|
36
|
+
open: openProp,
|
|
37
|
+
placement,
|
|
38
|
+
enterDelay,
|
|
39
|
+
leaveDelay,
|
|
40
|
+
...rest
|
|
41
|
+
};
|
|
42
|
+
const {
|
|
43
|
+
arrowProps,
|
|
44
|
+
open,
|
|
45
|
+
floating,
|
|
46
|
+
reference,
|
|
47
|
+
getTriggerProps,
|
|
48
|
+
getTooltipProps
|
|
49
|
+
} = useTooltip.useTooltip(hookProps);
|
|
50
|
+
const triggerRef = useForkRef.useForkRef(
|
|
51
|
+
React.isValidElement(children) ? children.ref : null,
|
|
52
|
+
reference
|
|
53
|
+
);
|
|
54
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
55
|
+
children: [
|
|
56
|
+
open && !disabled && /* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
57
|
+
className: clsx.clsx(withBaseName(), withBaseName(status), className),
|
|
58
|
+
ref: floating,
|
|
59
|
+
...getTooltipProps(),
|
|
60
|
+
children: [
|
|
61
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
62
|
+
className: withBaseName("container"),
|
|
63
|
+
children: [
|
|
64
|
+
!hideIcon && /* @__PURE__ */ jsxRuntime.jsx(StatusIndicator.StatusIndicator, {
|
|
65
|
+
status,
|
|
66
|
+
size: 1,
|
|
67
|
+
className: withBaseName("icon")
|
|
68
|
+
}),
|
|
69
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", {
|
|
70
|
+
className: withBaseName("content"),
|
|
71
|
+
children: content
|
|
72
|
+
})
|
|
73
|
+
]
|
|
74
|
+
}),
|
|
75
|
+
!hideArrow && /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
76
|
+
className: withBaseName("arrow"),
|
|
77
|
+
...arrowProps
|
|
78
|
+
})
|
|
79
|
+
]
|
|
80
|
+
}),
|
|
81
|
+
React.isValidElement(children) && React.cloneElement(children, {
|
|
82
|
+
...getTriggerProps(),
|
|
83
|
+
ref: triggerRef
|
|
84
|
+
})
|
|
85
|
+
]
|
|
86
|
+
});
|
|
87
|
+
}
|
|
88
|
+
);
|
|
89
|
+
|
|
90
|
+
exports.Tooltip = Tooltip;
|
|
91
|
+
//# sourceMappingURL=Tooltip.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tooltip.js","sources":["../src/tooltip/Tooltip.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n cloneElement,\n forwardRef,\n HTMLAttributes,\n ReactNode,\n isValidElement,\n} from \"react\";\nimport { StatusIndicator, ValidationStatus } from \"../status-indicator\";\nimport { UseFloatingUIProps, makePrefixer, useForkRef } from \"../utils\";\nimport { useTooltip, UseTooltipProps } from \"./useTooltip\";\nimport \"./Tooltip.css\";\n\nconst withBaseName = makePrefixer(\"saltTooltip\");\n\nexport interface TooltipProps\n extends HTMLAttributes<HTMLDivElement>,\n Pick<UseFloatingUIProps, \"open\" | \"onOpenChange\" | \"placement\"> {\n /**\n * The children will be the tooltip's trigger.\n */\n children: ReactNode;\n /**\n * Whether to hide the tooltip arrow. Defaults to `false`.\n */\n hideArrow?: boolean;\n /**\n * Whether to hide the state icon within the tooltip. Defaults to `false`.\n */\n hideIcon?: boolean;\n /**\n * Content displayed inside the tooltip. Can be a string or a React component.\n */\n content: ReactNode;\n /**\n * A string to determine the current status of the tooltip. Defaults to 'info'.\n */\n status?: ValidationStatus;\n /**\n * Delay in milliseconds before the tooltip is shown\n */\n enterDelay?: number;\n /**\n * Delay in milliseconds before the tooltip is hidden\n */\n leaveDelay?: number;\n /**\n * Option to not display the tooltip. Can be used in conditional situations like text truncation.\n */\n disabled?: boolean;\n /**\n * Option to remove the hover listener\n */\n disableHoverListener?: boolean;\n /**\n * Option to remove the focus listener\n */\n disableFocusListener?: boolean;\n}\n\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(\n function Tooltip(props, ref) {\n const {\n children,\n className,\n disabled,\n hideArrow = false,\n hideIcon = false,\n open: openProp,\n content,\n status = \"info\",\n placement = \"right\",\n enterDelay = 300,\n leaveDelay = 0,\n ...rest\n } = props;\n\n const hookProps: UseTooltipProps = {\n open: openProp,\n placement,\n enterDelay,\n leaveDelay,\n ...rest,\n };\n\n const {\n arrowProps,\n open,\n floating,\n reference,\n getTriggerProps,\n getTooltipProps,\n } = useTooltip(hookProps);\n\n const triggerRef = useForkRef(\n // @ts-ignore\n isValidElement(children) ? children.ref : null,\n reference\n );\n\n return (\n <>\n {open && !disabled && (\n <div\n className={clsx(withBaseName(), withBaseName(status), className)}\n ref={floating}\n {...getTooltipProps()}\n >\n <div className={withBaseName(\"container\")}>\n {!hideIcon && (\n <StatusIndicator\n status={status}\n size={1}\n className={withBaseName(\"icon\")}\n />\n )}\n <span className={withBaseName(\"content\")}>{content}</span>\n </div>\n {!hideArrow && (\n <div className={withBaseName(\"arrow\")} {...arrowProps} />\n )}\n </div>\n )}\n\n {isValidElement(children) &&\n cloneElement(children, {\n ...getTriggerProps(),\n ref: triggerRef,\n })}\n </>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","Tooltip","useTooltip","useForkRef","isValidElement","jsxs","Fragment","clsx","jsx","StatusIndicator","cloneElement"],"mappings":";;;;;;;;;;;;;;;;;AAaA,MAAM,YAAA,GAAeA,0BAAa,aAAa,CAAA,CAAA;AA+CxC,MAAM,OAAU,GAAAC,gBAAA;AAAA,EACrB,SAASC,QAAQ,CAAA,KAAA,EAAO,GAAK,EAAA;AAC3B,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAY,GAAA,KAAA;AAAA,MACZ,QAAW,GAAA,KAAA;AAAA,MACX,IAAM,EAAA,QAAA;AAAA,MACN,OAAA;AAAA,MACA,MAAS,GAAA,MAAA;AAAA,MACT,SAAY,GAAA,OAAA;AAAA,MACZ,UAAa,GAAA,GAAA;AAAA,MACb,UAAa,GAAA,CAAA;AAAA,MACV,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,SAA6B,GAAA;AAAA,MACjC,IAAM,EAAA,QAAA;AAAA,MACN,SAAA;AAAA,MACA,UAAA;AAAA,MACA,UAAA;AAAA,MACA,GAAG,IAAA;AAAA,KACL,CAAA;AAEA,IAAM,MAAA;AAAA,MACJ,UAAA;AAAA,MACA,IAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,eAAA;AAAA,MACA,eAAA;AAAA,KACF,GAAIC,sBAAW,SAAS,CAAA,CAAA;AAExB,IAAA,MAAM,UAAa,GAAAC,qBAAA;AAAA,MAEjBC,oBAAe,CAAA,QAAQ,CAAI,GAAA,QAAA,CAAS,GAAM,GAAA,IAAA;AAAA,MAC1C,SAAA;AAAA,KACF,CAAA;AAEA,IACE,uBAAAC,eAAA,CAAAC,mBAAA,EAAA;AAAA,MACG,QAAA,EAAA;AAAA,QAAQ,IAAA,IAAA,CAAC,4BACPD,eAAA,CAAA,KAAA,EAAA;AAAA,UACC,WAAWE,SAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,MAAM,GAAG,SAAS,CAAA;AAAA,UAC/D,GAAK,EAAA,QAAA;AAAA,UACJ,GAAG,eAAgB,EAAA;AAAA,UAEpB,QAAA,EAAA;AAAA,4BAACF,eAAA,CAAA,KAAA,EAAA;AAAA,cAAI,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,cACrC,QAAA,EAAA;AAAA,gBAAA,CAAC,4BACCG,cAAA,CAAAC,+BAAA,EAAA;AAAA,kBACC,MAAA;AAAA,kBACA,IAAM,EAAA,CAAA;AAAA,kBACN,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,iBAChC,CAAA;AAAA,gCAEDD,cAAA,CAAA,MAAA,EAAA;AAAA,kBAAK,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,kBAAI,QAAA,EAAA,OAAA;AAAA,iBAAQ,CAAA;AAAA,eAAA;AAAA,aACrD,CAAA;AAAA,YACC,CAAC,6BACCA,cAAA,CAAA,KAAA,EAAA;AAAA,cAAI,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,cAAI,GAAG,UAAA;AAAA,aAAY,CAAA;AAAA,WAAA;AAAA,SAE3D,CAAA;AAAA,QAGDJ,oBAAe,CAAA,QAAQ,CACtB,IAAAM,kBAAA,CAAa,QAAU,EAAA;AAAA,UACrB,GAAG,eAAgB,EAAA;AAAA,UACnB,GAAK,EAAA,UAAA;AAAA,SACN,CAAA;AAAA,OAAA;AAAA,KACL,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var React = require('react');
|
|
6
|
+
require('../aria-announcer/AriaAnnouncerContext.js');
|
|
7
|
+
require('react/jsx-runtime');
|
|
8
|
+
var useAriaAnnouncer = require('../aria-announcer/useAriaAnnouncer.js');
|
|
9
|
+
require('../utils/useFloatingUI.js');
|
|
10
|
+
require('../utils/useId.js');
|
|
11
|
+
var useIsomorphicLayoutEffect = require('../utils/useIsomorphicLayoutEffect.js');
|
|
12
|
+
require('../salt-provider/SaltProvider.js');
|
|
13
|
+
require('../viewport/ViewportProvider.js');
|
|
14
|
+
|
|
15
|
+
function getDocument(floating) {
|
|
16
|
+
var _a;
|
|
17
|
+
return (_a = floating == null ? void 0 : floating.ownerDocument) != null ? _a : document;
|
|
18
|
+
}
|
|
19
|
+
function getWindow(value) {
|
|
20
|
+
var _a;
|
|
21
|
+
return (_a = getDocument(value).defaultView) != null ? _a : window;
|
|
22
|
+
}
|
|
23
|
+
function isElement(value) {
|
|
24
|
+
return value ? value instanceof getWindow(value).Element : false;
|
|
25
|
+
}
|
|
26
|
+
function getDelay(value, prop, pointerType) {
|
|
27
|
+
if (pointerType && pointerType !== "mouse") {
|
|
28
|
+
return 0;
|
|
29
|
+
}
|
|
30
|
+
if (typeof value === "number") {
|
|
31
|
+
return value;
|
|
32
|
+
}
|
|
33
|
+
return value == null ? void 0 : value[prop];
|
|
34
|
+
}
|
|
35
|
+
const useAriaAnnounce = (context, { delay = 0 }) => {
|
|
36
|
+
const { open, dataRef, refs } = context;
|
|
37
|
+
const pointerTypeRef = React.useRef();
|
|
38
|
+
const timeoutRef = React.useRef();
|
|
39
|
+
const blockMouseMoveRef = React.useRef(true);
|
|
40
|
+
const { announce } = useAriaAnnouncer.useAriaAnnouncer();
|
|
41
|
+
useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
|
|
42
|
+
if (!open) {
|
|
43
|
+
pointerTypeRef.current = void 0;
|
|
44
|
+
}
|
|
45
|
+
});
|
|
46
|
+
React.useEffect(() => {
|
|
47
|
+
const reference = refs.reference.current;
|
|
48
|
+
function announceFloating() {
|
|
49
|
+
var _a;
|
|
50
|
+
const tooltipContent = (_a = refs.floating.current) == null ? void 0 : _a.innerText;
|
|
51
|
+
if (tooltipContent) {
|
|
52
|
+
announce(tooltipContent);
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
function onMouseEnter(event) {
|
|
56
|
+
clearTimeout(timeoutRef.current);
|
|
57
|
+
if (open) {
|
|
58
|
+
return;
|
|
59
|
+
}
|
|
60
|
+
blockMouseMoveRef.current = false;
|
|
61
|
+
dataRef.current.openEvent = event;
|
|
62
|
+
if (delay) {
|
|
63
|
+
timeoutRef.current = window.setTimeout(() => {
|
|
64
|
+
announceFloating();
|
|
65
|
+
}, getDelay(delay, "open", pointerTypeRef.current));
|
|
66
|
+
} else {
|
|
67
|
+
announceFloating();
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
if (isElement(reference)) {
|
|
71
|
+
reference.addEventListener("mouseenter", onMouseEnter);
|
|
72
|
+
return () => {
|
|
73
|
+
reference.removeEventListener("mouseenter", onMouseEnter);
|
|
74
|
+
};
|
|
75
|
+
}
|
|
76
|
+
}, [dataRef, delay, open, refs.reference, refs.floating, announce]);
|
|
77
|
+
function setPointerRef(event) {
|
|
78
|
+
pointerTypeRef.current = event.pointerType;
|
|
79
|
+
}
|
|
80
|
+
return {
|
|
81
|
+
reference: {
|
|
82
|
+
onPointerDown: setPointerRef,
|
|
83
|
+
onPointerEnter: setPointerRef
|
|
84
|
+
},
|
|
85
|
+
floating: {
|
|
86
|
+
onMouseEnter() {
|
|
87
|
+
clearTimeout(timeoutRef.current);
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
};
|
|
91
|
+
};
|
|
92
|
+
|
|
93
|
+
exports.useAriaAnnounce = useAriaAnnounce;
|
|
94
|
+
//# sourceMappingURL=useAriaAnnounce.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useAriaAnnounce.js","sources":["../src/tooltip/useAriaAnnounce.ts"],"sourcesContent":["import type { ElementProps, FloatingContext } from \"@floating-ui/react\";\nimport { PointerEvent, useEffect, useRef } from \"react\";\nimport { useAriaAnnouncer } from \"../aria-announcer\";\nimport { useIsomorphicLayoutEffect } from \"../utils\";\n\nfunction getDocument(floating: HTMLElement | null) {\n return floating?.ownerDocument ?? document;\n}\n\n// TODO: Check whether can be anything more restrictive than `any`\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction getWindow(value: any) {\n return getDocument(value).defaultView ?? window;\n}\n\nfunction isElement(value: unknown): value is HTMLElement {\n return value ? value instanceof getWindow(value).Element : false;\n}\n\nfunction getDelay(\n value: Props[\"delay\"],\n prop: \"open\" | \"close\",\n pointerType?: PointerEvent[\"pointerType\"]\n) {\n if (pointerType && pointerType !== \"mouse\") {\n return 0;\n }\n\n if (typeof value === \"number\") {\n return value;\n }\n\n return value?.[prop];\n}\n\ntype Props = {\n delay?: number | Partial<{ open: number; close: number }>;\n};\n\nexport const useAriaAnnounce = (\n context: FloatingContext,\n { delay = 0 }: Props\n): ElementProps => {\n const { open, dataRef, refs } = context;\n\n const pointerTypeRef = useRef<PointerEvent[\"pointerType\"]>();\n const timeoutRef = useRef<number>();\n const blockMouseMoveRef = useRef(true);\n const { announce } = useAriaAnnouncer();\n\n useIsomorphicLayoutEffect(() => {\n if (!open) {\n pointerTypeRef.current = undefined;\n }\n });\n\n useEffect(() => {\n const reference = refs.reference.current;\n function announceFloating() {\n const tooltipContent = refs.floating.current?.innerText;\n\n if (tooltipContent) {\n announce(tooltipContent);\n }\n }\n\n function onMouseEnter(event: MouseEvent) {\n clearTimeout(timeoutRef.current);\n\n if (open) {\n return;\n }\n\n blockMouseMoveRef.current = false;\n dataRef.current.openEvent = event;\n\n if (delay) {\n timeoutRef.current = window.setTimeout(() => {\n announceFloating();\n }, getDelay(delay, \"open\", pointerTypeRef.current));\n } else {\n announceFloating();\n }\n }\n\n if (isElement(reference)) {\n reference.addEventListener(\"mouseenter\", onMouseEnter);\n return () => {\n reference.removeEventListener(\"mouseenter\", onMouseEnter);\n };\n }\n }, [dataRef, delay, open, refs.reference, refs.floating, announce]);\n\n function setPointerRef(event: PointerEvent) {\n pointerTypeRef.current = event.pointerType;\n }\n\n return {\n reference: {\n onPointerDown: setPointerRef,\n onPointerEnter: setPointerRef,\n },\n floating: {\n onMouseEnter() {\n clearTimeout(timeoutRef.current);\n },\n },\n };\n};\n"],"names":["useRef","useAriaAnnouncer","useIsomorphicLayoutEffect","useEffect"],"mappings":"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"}
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var react = require('@floating-ui/react');
|
|
6
|
+
var React = require('react');
|
|
7
|
+
var useControlled = require('../utils/useControlled.js');
|
|
8
|
+
var useFloatingUI = require('../utils/useFloatingUI.js');
|
|
9
|
+
require('../utils/useId.js');
|
|
10
|
+
require('../salt-provider/SaltProvider.js');
|
|
11
|
+
require('../viewport/ViewportProvider.js');
|
|
12
|
+
var useAriaAnnounce = require('./useAriaAnnounce.js');
|
|
13
|
+
|
|
14
|
+
function useTooltip(props) {
|
|
15
|
+
const {
|
|
16
|
+
enterDelay,
|
|
17
|
+
leaveDelay,
|
|
18
|
+
open: openProp,
|
|
19
|
+
onOpenChange,
|
|
20
|
+
placement: placementProp,
|
|
21
|
+
disableHoverListener,
|
|
22
|
+
disableFocusListener
|
|
23
|
+
} = props || {};
|
|
24
|
+
const arrowRef = React.useRef(null);
|
|
25
|
+
const [open, setOpen] = useControlled.useControlled({
|
|
26
|
+
controlled: openProp,
|
|
27
|
+
default: false,
|
|
28
|
+
name: "Tooltip",
|
|
29
|
+
state: "open"
|
|
30
|
+
});
|
|
31
|
+
const handleOpenChange = (open2) => {
|
|
32
|
+
setOpen(open2);
|
|
33
|
+
onOpenChange == null ? void 0 : onOpenChange(open2);
|
|
34
|
+
};
|
|
35
|
+
const {
|
|
36
|
+
floating,
|
|
37
|
+
reference,
|
|
38
|
+
x,
|
|
39
|
+
y,
|
|
40
|
+
strategy,
|
|
41
|
+
middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },
|
|
42
|
+
placement,
|
|
43
|
+
context
|
|
44
|
+
} = useFloatingUI.useFloatingUI({
|
|
45
|
+
open,
|
|
46
|
+
onOpenChange: handleOpenChange,
|
|
47
|
+
placement: placementProp,
|
|
48
|
+
middleware: [
|
|
49
|
+
react.offset(8),
|
|
50
|
+
react.flip(),
|
|
51
|
+
react.shift({ limiter: react.limitShift() }),
|
|
52
|
+
react.arrow({ element: arrowRef })
|
|
53
|
+
]
|
|
54
|
+
});
|
|
55
|
+
const { getReferenceProps, getFloatingProps } = react.useInteractions([
|
|
56
|
+
react.useHover(context, {
|
|
57
|
+
delay: {
|
|
58
|
+
open: enterDelay,
|
|
59
|
+
close: leaveDelay
|
|
60
|
+
},
|
|
61
|
+
enabled: !disableHoverListener,
|
|
62
|
+
handleClose: react.safePolygon()
|
|
63
|
+
}),
|
|
64
|
+
react.useFocus(context, { enabled: !disableFocusListener }),
|
|
65
|
+
react.useRole(context, { role: "tooltip" }),
|
|
66
|
+
react.useDismiss(context),
|
|
67
|
+
useAriaAnnounce.useAriaAnnounce(context, {
|
|
68
|
+
delay: {
|
|
69
|
+
open: enterDelay,
|
|
70
|
+
close: leaveDelay
|
|
71
|
+
}
|
|
72
|
+
})
|
|
73
|
+
]);
|
|
74
|
+
const arrowProps = {
|
|
75
|
+
ref: arrowRef,
|
|
76
|
+
style: {
|
|
77
|
+
left: arrowX ? `${arrowX}px` : "",
|
|
78
|
+
top: arrowY ? `${arrowY}px` : ""
|
|
79
|
+
}
|
|
80
|
+
};
|
|
81
|
+
const getTooltipProps = () => {
|
|
82
|
+
return getFloatingProps({
|
|
83
|
+
"data-placement": placement,
|
|
84
|
+
ref: floating,
|
|
85
|
+
style: {
|
|
86
|
+
top: y != null ? y : "",
|
|
87
|
+
left: x != null ? x : "",
|
|
88
|
+
position: strategy
|
|
89
|
+
}
|
|
90
|
+
});
|
|
91
|
+
};
|
|
92
|
+
const getTriggerProps = () => getReferenceProps({
|
|
93
|
+
ref: reference
|
|
94
|
+
});
|
|
95
|
+
return {
|
|
96
|
+
arrowProps,
|
|
97
|
+
open,
|
|
98
|
+
floating,
|
|
99
|
+
reference,
|
|
100
|
+
getTooltipProps,
|
|
101
|
+
getTriggerProps
|
|
102
|
+
};
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
exports.useTooltip = useTooltip;
|
|
106
|
+
//# sourceMappingURL=useTooltip.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useTooltip.js","sources":["../src/tooltip/useTooltip.ts"],"sourcesContent":["import {\n arrow,\n flip,\n offset,\n safePolygon,\n shift,\n useDismiss,\n useFocus,\n useHover,\n useInteractions,\n useRole,\n limitShift,\n} from \"@floating-ui/react\";\nimport { HTMLProps, useRef } from \"react\";\nimport { useControlled, UseFloatingUIProps, useFloatingUI } from \"../utils\";\nimport { useAriaAnnounce } from \"./useAriaAnnounce\";\n\nexport interface UseTooltipProps\n extends Partial<\n Pick<UseFloatingUIProps, \"onOpenChange\" | \"open\" | \"placement\">\n > {\n /**\n * Do not respond to focus events.\n */\n disableFocusListener?: boolean;\n /**\n * Do not respond to hover events.\n */\n disableHoverListener?: boolean;\n /**\n * The number of milliseconds to wait before showing the tooltip.\n * This prop won't impact the enter touch delay (`enterTouchDelay`).\n */\n enterDelay?: number;\n /**\n * The number of milliseconds to wait before hiding the tooltip.\n * This prop won't impact the leave touch delay (`leaveTouchDelay`).\n */\n leaveDelay?: number;\n}\n\nexport function useTooltip(props?: UseTooltipProps) {\n const {\n enterDelay,\n leaveDelay,\n open: openProp,\n onOpenChange,\n placement: placementProp,\n disableHoverListener,\n disableFocusListener,\n } = props || {};\n\n const arrowRef = useRef<HTMLDivElement | null>(null);\n\n const [open, setOpen] = useControlled({\n controlled: openProp,\n default: false,\n name: \"Tooltip\",\n state: \"open\",\n });\n const handleOpenChange = (open: boolean) => {\n setOpen(open);\n onOpenChange?.(open);\n };\n\n const {\n floating,\n reference,\n x,\n y,\n strategy,\n middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },\n placement,\n context,\n } = useFloatingUI({\n open,\n onOpenChange: handleOpenChange,\n placement: placementProp,\n middleware: [\n offset(8),\n flip(),\n shift({ limiter: limitShift() }),\n arrow({ element: arrowRef }),\n ],\n });\n\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useHover(context, {\n delay: {\n open: enterDelay,\n close: leaveDelay,\n },\n enabled: !disableHoverListener,\n handleClose: safePolygon(),\n }),\n useFocus(context, { enabled: !disableFocusListener }),\n useRole(context, { role: \"tooltip\" }),\n useDismiss(context),\n useAriaAnnounce(context, {\n delay: {\n open: enterDelay,\n close: leaveDelay,\n },\n }),\n ]);\n\n const arrowProps = {\n ref: arrowRef,\n style: {\n left: arrowX ? `${arrowX}px` : \"\",\n top: arrowY ? `${arrowY}px` : \"\",\n },\n };\n\n const getTooltipProps = (): HTMLProps<HTMLDivElement> => {\n return getFloatingProps({\n // @ts-ignore\n \"data-placement\": placement,\n ref: floating,\n style: {\n top: y ?? \"\",\n left: x ?? \"\",\n position: strategy,\n },\n });\n };\n\n const getTriggerProps = () =>\n getReferenceProps({\n ref: reference,\n });\n\n return {\n arrowProps,\n open,\n floating,\n reference,\n getTooltipProps,\n getTriggerProps,\n };\n}\n"],"names":["useRef","useControlled","open","useFloatingUI","offset","flip","shift","limitShift","arrow","useInteractions","useHover","safePolygon","useFocus","useRole","useDismiss","useAriaAnnounce"],"mappings":";;;;;;;;;;;;;AAyCO,SAAS,WAAW,KAAyB,EAAA;AAClD,EAAM,MAAA;AAAA,IACJ,UAAA;AAAA,IACA,UAAA;AAAA,IACA,IAAM,EAAA,QAAA;AAAA,IACN,YAAA;AAAA,IACA,SAAW,EAAA,aAAA;AAAA,IACX,oBAAA;AAAA,IACA,oBAAA;AAAA,GACF,GAAI,SAAS,EAAC,CAAA;AAEd,EAAM,MAAA,QAAA,GAAWA,aAA8B,IAAI,CAAA,CAAA;AAEnD,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAIC,2BAAc,CAAA;AAAA,IACpC,UAAY,EAAA,QAAA;AAAA,IACZ,OAAS,EAAA,KAAA;AAAA,IACT,IAAM,EAAA,SAAA;AAAA,IACN,KAAO,EAAA,MAAA;AAAA,GACR,CAAA,CAAA;AACD,EAAM,MAAA,gBAAA,GAAmB,CAACC,KAAkB,KAAA;AAC1C,IAAA,OAAA,CAAQA,KAAI,CAAA,CAAA;AACZ,IAAeA,YAAAA,IAAAA,IAAAA,GAAAA,KAAAA,CAAAA,GAAAA,YAAAA,CAAAA,KAAAA,CAAAA,CAAAA;AAAA,GACjB,CAAA;AAEA,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,CAAA;AAAA,IACA,CAAA;AAAA,IACA,QAAA;AAAA,IACA,cAAA,EAAgB,EAAE,KAAA,EAAO,EAAE,CAAA,EAAG,QAAQ,CAAG,EAAA,MAAA,EAAW,GAAA,EAAG,EAAA;AAAA,IACvD,SAAA;AAAA,IACA,OAAA;AAAA,MACEC,2BAAc,CAAA;AAAA,IAChB,IAAA;AAAA,IACA,YAAc,EAAA,gBAAA;AAAA,IACd,SAAW,EAAA,aAAA;AAAA,IACX,UAAY,EAAA;AAAA,MACVC,aAAO,CAAC,CAAA;AAAA,MACRC,UAAK,EAAA;AAAA,MACLC,WAAM,CAAA,EAAE,OAAS,EAAAC,gBAAA,IAAc,CAAA;AAAA,MAC/BC,WAAM,CAAA,EAAE,OAAS,EAAA,QAAA,EAAU,CAAA;AAAA,KAC7B;AAAA,GACD,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,iBAAA,EAAmB,gBAAiB,EAAA,GAAIC,qBAAgB,CAAA;AAAA,IAC9DC,eAAS,OAAS,EAAA;AAAA,MAChB,KAAO,EAAA;AAAA,QACL,IAAM,EAAA,UAAA;AAAA,QACN,KAAO,EAAA,UAAA;AAAA,OACT;AAAA,MACA,SAAS,CAAC,oBAAA;AAAA,MACV,aAAaC,iBAAY,EAAA;AAAA,KAC1B,CAAA;AAAA,IACDC,eAAS,OAAS,EAAA,EAAE,OAAS,EAAA,CAAC,sBAAsB,CAAA;AAAA,IACpDC,aAAQ,CAAA,OAAA,EAAS,EAAE,IAAA,EAAM,WAAW,CAAA;AAAA,IACpCC,iBAAW,OAAO,CAAA;AAAA,IAClBC,gCAAgB,OAAS,EAAA;AAAA,MACvB,KAAO,EAAA;AAAA,QACL,IAAM,EAAA,UAAA;AAAA,QACN,KAAO,EAAA,UAAA;AAAA,OACT;AAAA,KACD,CAAA;AAAA,GACF,CAAA,CAAA;AAED,EAAA,MAAM,UAAa,GAAA;AAAA,IACjB,GAAK,EAAA,QAAA;AAAA,IACL,KAAO,EAAA;AAAA,MACL,IAAA,EAAM,MAAS,GAAA,CAAA,EAAG,MAAa,CAAA,EAAA,CAAA,GAAA,EAAA;AAAA,MAC/B,GAAA,EAAK,MAAS,GAAA,CAAA,EAAG,MAAa,CAAA,EAAA,CAAA,GAAA,EAAA;AAAA,KAChC;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,kBAAkB,MAAiC;AACvD,IAAA,OAAO,gBAAiB,CAAA;AAAA,MAEtB,gBAAkB,EAAA,SAAA;AAAA,MAClB,GAAK,EAAA,QAAA;AAAA,MACL,KAAO,EAAA;AAAA,QACL,KAAK,CAAK,IAAA,IAAA,GAAA,CAAA,GAAA,EAAA;AAAA,QACV,MAAM,CAAK,IAAA,IAAA,GAAA,CAAA,GAAA,EAAA;AAAA,QACX,QAAU,EAAA,QAAA;AAAA,OACZ;AAAA,KACD,CAAA,CAAA;AAAA,GACH,CAAA;AAEA,EAAM,MAAA,eAAA,GAAkB,MACtB,iBAAkB,CAAA;AAAA,IAChB,GAAK,EAAA,SAAA;AAAA,GACN,CAAA,CAAA;AAEH,EAAO,OAAA;AAAA,IACL,UAAA;AAAA,IACA,IAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,eAAA;AAAA,IACA,eAAA;AAAA,GACF,CAAA;AACF;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"marginMiddleware.js","sources":["../src/utils/marginMiddleware.ts"],"sourcesContent":["import { Middleware } from \"@floating-ui/core\";\nimport { MiddlewareArguments } from \"@floating-ui/react
|
|
1
|
+
{"version":3,"file":"marginMiddleware.js","sources":["../src/utils/marginMiddleware.ts"],"sourcesContent":["import { Middleware } from \"@floating-ui/core\";\nimport { MiddlewareArguments } from \"@floating-ui/react\";\n\nexport const margin = (value = 0): Middleware => ({\n name: \"margin\",\n options: value,\n fn(middlewareArguments: MiddlewareArguments) {\n const { x, y, elements } = middlewareArguments;\n\n if (elements.floating.children.length > 0) {\n const rootChildElement = elements.floating.children[0] as HTMLElement;\n rootChildElement.style.setProperty(\"margin\", value.toString());\n }\n return {\n x: x,\n y: y,\n };\n },\n});\n"],"names":[],"mappings":";;;;AAGa,MAAA,MAAA,GAAS,CAAC,KAAA,GAAQ,CAAmB,MAAA;AAAA,EAChD,IAAM,EAAA,QAAA;AAAA,EACN,OAAS,EAAA,KAAA;AAAA,EACT,GAAG,mBAA0C,EAAA;AAC3C,IAAA,MAAM,EAAE,CAAA,EAAG,CAAG,EAAA,QAAA,EAAa,GAAA,mBAAA,CAAA;AAE3B,IAAA,IAAI,QAAS,CAAA,QAAA,CAAS,QAAS,CAAA,MAAA,GAAS,CAAG,EAAA;AACzC,MAAM,MAAA,gBAAA,GAAmB,QAAS,CAAA,QAAA,CAAS,QAAS,CAAA,CAAA,CAAA,CAAA;AACpD,MAAA,gBAAA,CAAiB,KAAM,CAAA,WAAA,CAAY,QAAU,EAAA,KAAA,CAAM,UAAU,CAAA,CAAA;AAAA,KAC/D;AACA,IAAO,OAAA;AAAA,MACL,CAAA;AAAA,MACA,CAAA;AAAA,KACF,CAAA;AAAA,GACF;AACF,CAAA;;;;"}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var react = require('@floating-ui/react');
|
|
6
|
+
|
|
7
|
+
const DEFAULT_FLOATING_UI_MIDDLEWARE = [
|
|
8
|
+
react.flip(),
|
|
9
|
+
react.shift({ limiter: react.limitShift() })
|
|
10
|
+
];
|
|
11
|
+
function useFloatingUI(props) {
|
|
12
|
+
const {
|
|
13
|
+
placement,
|
|
14
|
+
strategy,
|
|
15
|
+
middleware = DEFAULT_FLOATING_UI_MIDDLEWARE,
|
|
16
|
+
open = false,
|
|
17
|
+
onOpenChange
|
|
18
|
+
} = props;
|
|
19
|
+
const { reference, floating, refs, update, ...rest } = react.useFloating({
|
|
20
|
+
placement,
|
|
21
|
+
strategy,
|
|
22
|
+
middleware,
|
|
23
|
+
open,
|
|
24
|
+
onOpenChange,
|
|
25
|
+
whileElementsMounted: react.autoUpdate
|
|
26
|
+
});
|
|
27
|
+
return {
|
|
28
|
+
reference,
|
|
29
|
+
floating,
|
|
30
|
+
refs,
|
|
31
|
+
update,
|
|
32
|
+
...rest
|
|
33
|
+
};
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
exports.DEFAULT_FLOATING_UI_MIDDLEWARE = DEFAULT_FLOATING_UI_MIDDLEWARE;
|
|
37
|
+
exports.useFloatingUI = useFloatingUI;
|
|
38
|
+
//# sourceMappingURL=useFloatingUI.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useFloatingUI.js","sources":["../src/utils/useFloatingUI.tsx"],"sourcesContent":["import type { Middleware, Placement, Strategy } from \"@floating-ui/react\";\nimport {\n autoUpdate,\n flip,\n limitShift,\n shift,\n useFloating,\n} from \"@floating-ui/react\";\n\nexport type UseFloatingUIProps = {\n /**\n * Set position relative to trigger\n */\n placement?: Placement;\n strategy?: Strategy;\n middleware?: Middleware[];\n /**\n * Set visible state. Defaults to false\n */\n open?: boolean;\n /**\n * Callback function triggered when open state changes\n */\n onOpenChange?: (open: boolean) => void;\n};\n\nexport const DEFAULT_FLOATING_UI_MIDDLEWARE = [\n flip(),\n shift({ limiter: limitShift() }),\n];\n\nexport function useFloatingUI(\n props: UseFloatingUIProps\n): ReturnType<typeof useFloating> {\n const {\n placement,\n strategy,\n middleware = DEFAULT_FLOATING_UI_MIDDLEWARE,\n open = false,\n onOpenChange,\n } = props;\n\n const { reference, floating, refs, update, ...rest } = useFloating({\n placement,\n strategy,\n middleware,\n open,\n onOpenChange,\n whileElementsMounted: autoUpdate,\n });\n\n return {\n reference,\n floating,\n refs,\n update,\n ...rest,\n };\n}\n"],"names":["flip","shift","limitShift","useFloating","autoUpdate"],"mappings":";;;;;;AA0BO,MAAM,8BAAiC,GAAA;AAAA,EAC5CA,UAAK,EAAA;AAAA,EACLC,WAAM,CAAA,EAAE,OAAS,EAAAC,gBAAA,IAAc,CAAA;AACjC,EAAA;AAEO,SAAS,cACd,KACgC,EAAA;AAChC,EAAM,MAAA;AAAA,IACJ,SAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAa,GAAA,8BAAA;AAAA,IACb,IAAO,GAAA,KAAA;AAAA,IACP,YAAA;AAAA,GACE,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,EAAE,SAAW,EAAA,QAAA,EAAU,MAAM,MAAW,EAAA,GAAA,IAAA,KAASC,iBAAY,CAAA;AAAA,IACjE,SAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,IAAA;AAAA,IACA,YAAA;AAAA,IACA,oBAAsB,EAAAC,gBAAA;AAAA,GACvB,CAAA,CAAA;AAED,EAAO,OAAA;AAAA,IACL,SAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA;AAAA,IACA,MAAA;AAAA,IACA,GAAG,IAAA;AAAA,GACL,CAAA;AACF;;;;;"}
|
|
@@ -4,6 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
6
|
var React = require('react');
|
|
7
|
+
require('../utils/useFloatingUI.js');
|
|
8
|
+
require('../utils/useId.js');
|
|
9
|
+
var useIsomorphicLayoutEffect = require('../utils/useIsomorphicLayoutEffect.js');
|
|
10
|
+
require('../salt-provider/SaltProvider.js');
|
|
7
11
|
|
|
8
12
|
const ViewportContext = React.createContext(null);
|
|
9
13
|
const ViewportProvider = ({ children }) => {
|
|
@@ -11,7 +15,7 @@ const ViewportProvider = ({ children }) => {
|
|
|
11
15
|
const [viewport, setViewport] = React.useState(existingViewport);
|
|
12
16
|
const noExistingViewport = existingViewport === null;
|
|
13
17
|
const viewportValue = existingViewport || viewport || 0;
|
|
14
|
-
|
|
18
|
+
useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
|
|
15
19
|
let observer = null;
|
|
16
20
|
if (noExistingViewport) {
|
|
17
21
|
observer = new ResizeObserver(
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ViewportProvider.js","sources":["../src/viewport/ViewportProvider.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"ViewportProvider.js","sources":["../src/viewport/ViewportProvider.tsx"],"sourcesContent":["import { createContext, useState, useContext, ReactNode } from \"react\";\nimport { useIsomorphicLayoutEffect } from \"../utils\";\n\nconst ViewportContext = createContext<number | null>(null);\n\ntype ViewportProviderProps = {\n children?: ReactNode;\n};\n\nconst ViewportProvider = ({ children }: ViewportProviderProps) => {\n // Get value directly from the ViewportContext so we can detect if the value is null (no inherited ViewportProvider)\n const existingViewport = useContext(ViewportContext);\n const [viewport, setViewport] = useState(existingViewport);\n\n const noExistingViewport = existingViewport === null;\n const viewportValue = existingViewport || viewport || 0;\n\n useIsomorphicLayoutEffect(() => {\n let observer: ResizeObserver | null = null;\n\n if (noExistingViewport) {\n observer = new ResizeObserver(\n (observerEntries: ResizeObserverEntry[]) => {\n setViewport(observerEntries[0].contentRect.width);\n }\n );\n\n observer.observe(document.body);\n }\n\n return () => {\n if (observer) {\n observer.disconnect();\n }\n };\n }, [noExistingViewport]);\n\n return (\n <ViewportContext.Provider value={viewportValue}>\n {children}\n </ViewportContext.Provider>\n );\n};\n\nconst useViewport = (): number => {\n const value = useContext(ViewportContext);\n return value === null ? 0 : value;\n};\n\nexport { ViewportProvider, ViewportContext, useViewport };\n"],"names":["createContext","useContext","useState","useIsomorphicLayoutEffect","jsx"],"mappings":";;;;;;;;;;;AAGM,MAAA,eAAA,GAAkBA,oBAA6B,IAAI,EAAA;AAMzD,MAAM,gBAAmB,GAAA,CAAC,EAAE,QAAA,EAAsC,KAAA;AAEhE,EAAM,MAAA,gBAAA,GAAmBC,iBAAW,eAAe,CAAA,CAAA;AACnD,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIC,eAAS,gBAAgB,CAAA,CAAA;AAEzD,EAAA,MAAM,qBAAqB,gBAAqB,KAAA,IAAA,CAAA;AAChD,EAAM,MAAA,aAAA,GAAgB,oBAAoB,QAAY,IAAA,CAAA,CAAA;AAEtD,EAAAC,mDAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,QAAkC,GAAA,IAAA,CAAA;AAEtC,IAAA,IAAI,kBAAoB,EAAA;AACtB,MAAA,QAAA,GAAW,IAAI,cAAA;AAAA,QACb,CAAC,eAA2C,KAAA;AAC1C,UAAY,WAAA,CAAA,eAAA,CAAgB,CAAG,CAAA,CAAA,WAAA,CAAY,KAAK,CAAA,CAAA;AAAA,SAClD;AAAA,OACF,CAAA;AAEA,MAAS,QAAA,CAAA,OAAA,CAAQ,SAAS,IAAI,CAAA,CAAA;AAAA,KAChC;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,QAAU,EAAA;AACZ,QAAA,QAAA,CAAS,UAAW,EAAA,CAAA;AAAA,OACtB;AAAA,KACF,CAAA;AAAA,GACF,EAAG,CAAC,kBAAkB,CAAC,CAAA,CAAA;AAEvB,EACE,uBAAAC,cAAA,CAAC,gBAAgB,QAAhB,EAAA;AAAA,IAAyB,KAAO,EAAA,aAAA;AAAA,IAC9B,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,EAAA;AAEA,MAAM,cAAc,MAAc;AAChC,EAAM,MAAA,KAAA,GAAQH,iBAAW,eAAe,CAAA,CAAA;AACxC,EAAO,OAAA,KAAA,KAAU,OAAO,CAAI,GAAA,KAAA,CAAA;AAC9B;;;;;;"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { useContext, useRef, useCallback, useMemo, useEffect } from 'react';
|
|
2
2
|
import { debounce } from '../utils/debounce.js';
|
|
3
|
+
import '../utils/useFloatingUI.js';
|
|
3
4
|
import '../utils/useId.js';
|
|
4
5
|
import '../salt-provider/SaltProvider.js';
|
|
5
6
|
import '../viewport/ViewportProvider.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAriaAnnouncer.js","sources":["../src/aria-announcer/useAriaAnnouncer.ts"],"sourcesContent":["import { useCallback, useContext, useEffect, useMemo, useRef } from \"react\";\nimport { debounce } from \"../utils\";\nimport { AriaAnnouncer, AriaAnnouncerContext } from \"./AriaAnnouncerContext\";\n\nexport type useAnnouncerOptions = {\n debounce?: number;\n};\nexport type useAriaAnnouncerHook = (\n options?: useAnnouncerOptions\n) => AriaAnnouncer;\n\nlet warnedOnce = false;\n\nexport const useAriaAnnouncer: useAriaAnnouncerHook = ({\n debounce: debounceInterval = 0,\n} = {}) => {\n const context = useContext(AriaAnnouncerContext);\n const mountedRef = useRef(true);\n const baseAnnounce = useCallback(\n (announcement: string, delay?: number) => {\n const isReactAnnouncerInstalled = context && context.announce;\n\n if (process.env.NODE_ENV !== \"production\") {\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 (mountedRef.current) {\n if (isReactAnnouncerInstalled) {\n context.announce(announcement);\n }\n }\n }\n\n if (delay) {\n setTimeout(makeAnnouncement, delay);\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 const ariaAnnouncer = useMemo(\n () => ({\n ...context,\n announce,\n }),\n [context, announce]\n );\n\n useEffect(\n () => () => {\n mountedRef.current = false;\n },\n []\n );\n\n return ariaAnnouncer;\n};\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useAriaAnnouncer.js","sources":["../src/aria-announcer/useAriaAnnouncer.ts"],"sourcesContent":["import { useCallback, useContext, useEffect, useMemo, useRef } from \"react\";\nimport { debounce } from \"../utils\";\nimport { AriaAnnouncer, AriaAnnouncerContext } from \"./AriaAnnouncerContext\";\n\nexport type useAnnouncerOptions = {\n debounce?: number;\n};\nexport type useAriaAnnouncerHook = (\n options?: useAnnouncerOptions\n) => AriaAnnouncer;\n\nlet warnedOnce = false;\n\nexport const useAriaAnnouncer: useAriaAnnouncerHook = ({\n debounce: debounceInterval = 0,\n} = {}) => {\n const context = useContext(AriaAnnouncerContext);\n const mountedRef = useRef(true);\n const baseAnnounce = useCallback(\n (announcement: string, delay?: number) => {\n const isReactAnnouncerInstalled = context && context.announce;\n\n if (process.env.NODE_ENV !== \"production\") {\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 (mountedRef.current) {\n if (isReactAnnouncerInstalled) {\n context.announce(announcement);\n }\n }\n }\n\n if (delay) {\n setTimeout(makeAnnouncement, delay);\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 const ariaAnnouncer = useMemo(\n () => ({\n ...context,\n announce,\n }),\n [context, announce]\n );\n\n useEffect(\n () => () => {\n mountedRef.current = false;\n },\n []\n );\n\n return ariaAnnouncer;\n};\n"],"names":[],"mappings":";;;;;;;;AAWA,IAAI,UAAa,GAAA,KAAA,CAAA;AAEV,MAAM,mBAAyC,CAAC;AAAA,EACrD,UAAU,gBAAmB,GAAA,CAAA;AAC/B,CAAA,GAAI,EAAO,KAAA;AACT,EAAM,MAAA,OAAA,GAAU,WAAW,oBAAoB,CAAA,CAAA;AAC/C,EAAM,MAAA,UAAA,GAAa,OAAO,IAAI,CAAA,CAAA;AAC9B,EAAA,MAAM,YAAe,GAAA,WAAA;AAAA,IACnB,CAAC,cAAsB,KAAmB,KAAA;AACxC,MAAM,MAAA,yBAAA,GAA4B,WAAW,OAAQ,CAAA,QAAA,CAAA;AAErD,MAAI,IAAA,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,QAAA,IAAI,6BAA6B,UAAY,EAAA;AAC3C,UAAQ,OAAA,CAAA,IAAA;AAAA,YACN,iIAAA;AAAA,WACF,CAAA;AACA,UAAa,UAAA,GAAA,IAAA,CAAA;AAAA,SACf;AAAA,OACF;AAEA,MAAA,SAAS,gBAAmB,GAAA;AAC1B,QAAA,IAAI,WAAW,OAAS,EAAA;AACtB,UAAA,IAAI,yBAA2B,EAAA;AAC7B,YAAA,OAAA,CAAQ,SAAS,YAAY,CAAA,CAAA;AAAA,WAC/B;AAAA,SACF;AAAA,OACF;AAEA,MAAA,IAAI,KAAO,EAAA;AACT,QAAA,UAAA,CAAW,kBAAkB,KAAK,CAAA,CAAA;AAAA,OAC7B,MAAA;AACL,QAAiB,gBAAA,EAAA,CAAA;AAAA,OACnB;AAAA,KACF;AAAA,IACA,CAAC,OAAO,CAAA;AAAA,GACV,CAAA;AAEA,EAAA,MAAM,QAAW,GAAA,OAAA;AAAA,IACf,MACE,gBAAmB,GAAA,CAAA,GACf,QAAS,CAAA,YAAA,EAAc,gBAAgB,CACvC,GAAA,YAAA;AAAA,IACN,CAAC,cAAc,gBAAgB,CAAA;AAAA,GACjC,CAAA;AAEA,EAAA,MAAM,aAAgB,GAAA,OAAA;AAAA,IACpB,OAAO;AAAA,MACL,GAAG,OAAA;AAAA,MACH,QAAA;AAAA,KACF,CAAA;AAAA,IACA,CAAC,SAAS,QAAQ,CAAA;AAAA,GACpB,CAAA;AAEA,EAAA,SAAA;AAAA,IACE,MAAM,MAAM;AACV,MAAA,UAAA,CAAW,OAAU,GAAA,KAAA,CAAA;AAAA,KACvB;AAAA,IACA,EAAC;AAAA,GACH,CAAA;AAEA,EAAO,OAAA,aAAA,CAAA;AACT;;;;"}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { forwardRef } from 'react';
|
|
3
|
-
import
|
|
3
|
+
import { clsx } from 'clsx';
|
|
4
4
|
import { GridItem } from '../grid-item/GridItem.js';
|
|
5
5
|
import './BorderItem.css.js';
|
|
6
6
|
import { makePrefixer } from '../utils/makePrefixer.js';
|
|
7
|
+
import '../utils/useFloatingUI.js';
|
|
7
8
|
import '../utils/useId.js';
|
|
8
9
|
import '../salt-provider/SaltProvider.js';
|
|
9
10
|
import '../viewport/ViewportProvider.js';
|
|
@@ -31,7 +32,7 @@ const BorderItem = forwardRef(
|
|
|
31
32
|
};
|
|
32
33
|
return /* @__PURE__ */ jsx(GridItem, {
|
|
33
34
|
ref,
|
|
34
|
-
className:
|
|
35
|
+
className: clsx(withBaseName(), className, "saltGridItem-area", {
|
|
35
36
|
[withBaseName("sticky")]: sticky
|
|
36
37
|
}),
|
|
37
38
|
style: gridItemStyles,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BorderItem.js","sources":["../src/border-item/BorderItem.tsx"],"sourcesContent":["import { forwardRef, ElementType, ReactElement } from \"react\";\nimport
|
|
1
|
+
{"version":3,"file":"BorderItem.js","sources":["../src/border-item/BorderItem.tsx"],"sourcesContent":["import { forwardRef, ElementType, ReactElement } from \"react\";\nimport { clsx } from \"clsx\";\nimport { GridItem, GridItemProps } from \"../grid-item\";\nimport \"./BorderItem.css\";\nimport {\n makePrefixer,\n PolymorphicComponentPropWithRef,\n PolymorphicRef,\n} from \"../utils\";\n\nexport const BORDER_POSITION = [\n \"north\",\n \"west\",\n \"center\",\n \"east\",\n \"south\",\n] as const;\n\nexport type BorderPosition = typeof BORDER_POSITION[number];\n\nexport type BorderItemProps<T extends ElementType> =\n PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * Aligns a grid item inside a cell along the inline (row) axis. Defaults to \"stretch\"\n */\n horizontalAlignment?: GridItemProps<T>[\"horizontalAlignment\"];\n /**\n * Aligns a grid item inside a cell along the block (column) axis. Defaults to \"stretch\"\n */\n verticalAlignment?: GridItemProps<T>[\"verticalAlignment\"];\n /**\n * Position in the Border Layout\n */\n position: BorderPosition;\n /**\n * Defines if the item should stick to the edges of its container. Defaults to \"false\"\n */\n sticky?: boolean;\n }\n >;\n\nconst withBaseName = makePrefixer(\"saltBorderItem\");\n\ntype BorderItemComponent = <T extends ElementType = \"div\">(\n props: BorderItemProps<T>\n) => ReactElement | null;\n\nexport const BorderItem: BorderItemComponent = forwardRef(\n <T extends ElementType>(\n {\n children,\n className,\n position,\n sticky = false,\n style,\n ...rest\n }: BorderItemProps<T>,\n ref?: PolymorphicRef<T>\n ) => {\n const gridItemStyles = {\n ...style,\n \"--gridItem-gridArea\": position,\n };\n\n return (\n <GridItem\n ref={ref}\n className={clsx(withBaseName(), className, \"saltGridItem-area\", {\n [withBaseName(\"sticky\")]: sticky,\n })}\n style={gridItemStyles}\n {...rest}\n >\n {children}\n </GridItem>\n );\n }\n);\n"],"names":[],"mappings":";;;;;;;;;;;AAUO,MAAM,eAAkB,GAAA;AAAA,EAC7B,OAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AACF,EAAA;AA2BA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA,CAAA;AAM3C,MAAM,UAAkC,GAAA,UAAA;AAAA,EAC7C,CACE;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAS,GAAA,KAAA;AAAA,IACT,KAAA;AAAA,IACG,GAAA,IAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,cAAiB,GAAA;AAAA,MACrB,GAAG,KAAA;AAAA,MACH,qBAAuB,EAAA,QAAA;AAAA,KACzB,CAAA;AAEA,IAAA,uBACG,GAAA,CAAA,QAAA,EAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,WAAW,mBAAqB,EAAA;AAAA,QAC9D,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,OAC3B,CAAA;AAAA,MACD,KAAO,EAAA,cAAA;AAAA,MACN,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|