@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
|
@@ -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 = ".saltLink {\n --link-color-hover: var(--saltLink-color-hover, var(--salt-text-link-foreground-hover));\n --link-color-active: var(--saltLink-color-active, var(--salt-text-link-foreground-active));\n --link-color-visited: var(--saltLink-color-visited, var(--salt-text-link-foreground-visited));\n /* When focused, we also want hover style */\n --link-color-focus: var(--saltLink-color-focus, var(--link-color-hover));\n --link-
|
|
5
|
+
var css_248z = ".saltLink {\n --link-color-hover: var(--saltLink-color-hover, var(--salt-text-link-foreground-hover));\n --link-color-active: var(--saltLink-color-active, var(--salt-text-link-foreground-active));\n --link-color-visited: var(--saltLink-color-visited, var(--salt-text-link-foreground-visited));\n /* When focused, we also want hover style */\n --link-color-focus: var(--saltLink-color-focus, var(--link-color-hover));\n\n --link-textDecoration: var(--salt-text-link-textDecoration);\n --link-textDecoration-hover: var(--salt-text-link-textDecoration-hover);\n\n --link-fontFamily: var(--salt-text-fontFamily);\n --link-focus-outline: var(--salt-focused-outline);\n}\n\n/* Main css class */\n.saltLink {\n color: var(--link-color);\n letter-spacing: 0px;\n text-decoration: var(--link-textDecoration);\n font-family: var(--link-fontFamily);\n}\n\n/* Primary variant */\n.saltText-primary {\n --link-color: var(--salt-text-primary-foreground);\n}\n\n/* Secondary variant */\n.saltText-secondary {\n --link-color: var(--salt-text-secondary-foreground);\n}\n\n/* External link's icon */\n.saltLink-icon {\n margin-left: calc(var(--salt-size-unit) * 0.75);\n margin-bottom: -2px;\n}\n\n/* Set color for visited link */\n.saltLink:visited {\n --saltIcon-color: var(--link-color-visited);\n color: var(--link-color-visited);\n}\n\n/* Set color for hovered link */\n.saltLink:hover {\n --saltIcon-color: var(--link-color-hover);\n color: var(--link-color-hover);\n text-decoration: var(--link-textDecoration-hover);\n}\n\n/* Set color for active link */\n.saltLink:active {\n --saltIcon-color: var(--link-color-active);\n color: var(--link-color-active);\n}\n\n/* Set color for focused link */\n.saltLink:focus {\n --saltIcon-color: var(--link-color-focus);\n outline: var(--link-focus-outline);\n color: var(--link-color-focus);\n text-decoration: var(--link-textDecoration-hover);\n}\n\n/* Class for ADA content */\n.saltLink-externalLinkADA {\n display: block;\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n top: 0px;\n left: 0px;\n opacity: 0;\n}\n";
|
|
6
6
|
styleInject_es(css_248z);
|
|
7
7
|
|
|
8
8
|
module.exports = css_248z;
|
|
@@ -4,9 +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
|
-
var
|
|
7
|
+
var clsx = require('clsx');
|
|
8
8
|
var icons = require('@salt-ds/icons');
|
|
9
9
|
var makePrefixer = require('../utils/makePrefixer.js');
|
|
10
|
+
require('../utils/useFloatingUI.js');
|
|
10
11
|
require('../utils/useId.js');
|
|
11
12
|
require('../salt-provider/SaltProvider.js');
|
|
12
13
|
require('../viewport/ViewportProvider.js');
|
|
@@ -16,10 +17,6 @@ require('../text/Headings.js');
|
|
|
16
17
|
require('../text/Label.js');
|
|
17
18
|
require('./Link.css.js');
|
|
18
19
|
|
|
19
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
20
|
-
|
|
21
|
-
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
|
22
|
-
|
|
23
20
|
const withBaseName = makePrefixer.makePrefixer("saltLink");
|
|
24
21
|
const Link = React.forwardRef(function Link2({
|
|
25
22
|
IconComponent = icons.TearOutIcon,
|
|
@@ -32,7 +29,7 @@ const Link = React.forwardRef(function Link2({
|
|
|
32
29
|
}, ref) {
|
|
33
30
|
return /* @__PURE__ */ jsxRuntime.jsxs(Text.Text, {
|
|
34
31
|
as: "a",
|
|
35
|
-
className:
|
|
32
|
+
className: clsx.clsx(withBaseName(), className),
|
|
36
33
|
href,
|
|
37
34
|
ref,
|
|
38
35
|
target,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.js","sources":["../src/link/Link.tsx"],"sourcesContent":["import { ComponentType, forwardRef, ReactElement } from \"react\";\nimport
|
|
1
|
+
{"version":3,"file":"Link.js","sources":["../src/link/Link.tsx"],"sourcesContent":["import { ComponentType, forwardRef, ReactElement } from \"react\";\nimport { clsx } from \"clsx\";\nimport { IconProps, TearOutIcon } from \"@salt-ds/icons\";\nimport { makePrefixer } from \"../utils\";\nimport { Text, TextProps } from \"../text\";\n\nimport \"./Link.css\";\n\nconst withBaseName = makePrefixer(\"saltLink\");\n\n/**\n * Links are a fundamental navigation element. When clicked, they take the user to an entirely different page.\n *\n * @example\n * <LinkExample to=\"#link\">Action</LinkExample>\n */\nexport interface LinkProps extends Omit<TextProps<\"a\">, \"as\" | \"disabled\"> {\n IconComponent?: ComponentType<IconProps>;\n}\n\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(\n {\n IconComponent = TearOutIcon,\n href,\n className,\n children,\n variant = \"primary\",\n target = \"_self\",\n ...rest\n },\n ref\n): ReactElement<LinkProps> {\n return (\n <Text\n as=\"a\"\n className={clsx(withBaseName(), className)}\n href={href}\n ref={ref}\n target={target}\n variant={variant}\n {...rest}\n >\n {children}\n {target === \"_blank\" && (\n <>\n <IconComponent className={withBaseName(\"icon\")} aria-hidden />\n <span className={withBaseName(\"externalLinkADA\")}>External Link</span>\n </>\n )}\n </Text>\n );\n});\n"],"names":["makePrefixer","forwardRef","Link","TearOutIcon","jsxs","Text","clsx","Fragment","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;AAQA,MAAM,YAAA,GAAeA,0BAAa,UAAU,CAAA,CAAA;AAY/B,MAAA,IAAA,GAAOC,gBAAyC,CAAA,SAASC,KACpE,CAAA;AAAA,EACE,aAAgB,GAAAC,iBAAA;AAAA,EAChB,IAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAU,GAAA,SAAA;AAAA,EACV,MAAS,GAAA,OAAA;AAAA,EACN,GAAA,IAAA;AACL,CAAA,EACA,GACyB,EAAA;AACzB,EAAA,uBACGC,eAAA,CAAAC,SAAA,EAAA;AAAA,IACC,EAAG,EAAA,GAAA;AAAA,IACH,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IACzC,IAAA;AAAA,IACA,GAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,IACC,GAAG,IAAA;AAAA,IAEH,QAAA,EAAA;AAAA,MAAA,QAAA;AAAA,MACA,WAAW,QACV,oBAAAF,eAAA,CAAAG,mBAAA,EAAA;AAAA,QACE,QAAA,EAAA;AAAA,0BAACC,cAAA,CAAA,aAAA,EAAA;AAAA,YAAc,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,YAAG,aAAW,EAAA,IAAA;AAAA,WAAC,CAAA;AAAA,0BAC3DA,cAAA,CAAA,MAAA,EAAA;AAAA,YAAK,SAAA,EAAW,aAAa,iBAAiB,CAAA;AAAA,YAAG,QAAA,EAAA,eAAA;AAAA,WAAa,CAAA;AAAA,SAAA;AAAA,OACjE,CAAA;AAAA,KAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -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 the root element when variant=\"primary\" */\n.saltPanel-primary.saltPanel {\n --panel-background: var(--salt-container-primary-background);\n}\n\n/* Styles applied to the root element when variant=\"secondary\" */\n.saltPanel-secondary.saltPanel {\n --panel-background: var(--salt-container-secondary-background);\n}\n\n/* Styles applied to the root element */\n.saltPanel {\n background: var(--saltPanel-background, var(--panel-background));\n color: var(--saltPanel-color, inherit);\n height: var(--saltPanel-height, 100%);\n overflow: auto;\n padding: var(--saltPanel-padding, calc(var(--salt-size-unit) * 3));\n width: var(--saltPanel-width, 100%);\n}\n";
|
|
6
|
+
styleInject_es(css_248z);
|
|
7
|
+
|
|
8
|
+
module.exports = css_248z;
|
|
9
|
+
//# sourceMappingURL=Panel.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Panel.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
|
|
@@ -0,0 +1,26 @@
|
|
|
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 makePrefixer = require('../utils/makePrefixer.js');
|
|
9
|
+
require('../utils/useFloatingUI.js');
|
|
10
|
+
require('../utils/useId.js');
|
|
11
|
+
require('../salt-provider/SaltProvider.js');
|
|
12
|
+
require('../viewport/ViewportProvider.js');
|
|
13
|
+
require('./Panel.css.js');
|
|
14
|
+
|
|
15
|
+
const withBaseName = makePrefixer.makePrefixer("saltPanel");
|
|
16
|
+
const Panel = React.forwardRef(function Panel2({ className, children, variant = "primary", ...restProps }, ref) {
|
|
17
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
18
|
+
className: clsx.clsx(withBaseName(), withBaseName(variant), className),
|
|
19
|
+
ref,
|
|
20
|
+
...restProps,
|
|
21
|
+
children
|
|
22
|
+
});
|
|
23
|
+
});
|
|
24
|
+
|
|
25
|
+
exports.Panel = Panel;
|
|
26
|
+
//# sourceMappingURL=Panel.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Panel.js","sources":["../src/panel/Panel.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes } from \"react\";\nimport { makePrefixer } from \"../utils\";\n\nimport \"./Panel.css\";\n\n/**\n * Panel component that acts as wrapper around a node\n *\n * @example\n * const PanelExample = () => (\n * <Panel>\n * <p>This is a panel around some text.</p>\n * </Panel>\n * );\n *\n */\n\nexport interface PanelProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * Styling variant; defaults to \"primary\".\n */\n variant?: \"primary\" | \"secondary\";\n}\n\nconst withBaseName = makePrefixer(\"saltPanel\");\n\nexport const Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(\n { className, children, variant = \"primary\", ...restProps },\n ref\n) {\n return (\n <div\n className={clsx(withBaseName(), withBaseName(variant), className)}\n ref={ref}\n {...restProps}\n >\n {children}\n </div>\n );\n});\n"],"names":["makePrefixer","forwardRef","Panel","jsx","clsx"],"mappings":";;;;;;;;;;;;;;AAyBA,MAAM,YAAA,GAAeA,0BAAa,WAAW,CAAA,CAAA;AAEhC,MAAA,KAAA,GAAQC,gBAAuC,CAAA,SAASC,MACnE,CAAA,EAAE,SAAW,EAAA,QAAA,EAAU,OAAU,GAAA,SAAA,EAAA,GAAc,SAAU,EAAA,EACzD,GACA,EAAA;AACA,EAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,IACC,WAAWC,SAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,OAAO,GAAG,SAAS,CAAA;AAAA,IAChE,GAAA;AAAA,IACC,GAAG,SAAA;AAAA,IAEH,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -3,9 +3,10 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
-
var
|
|
6
|
+
var clsx = require('clsx');
|
|
7
7
|
var React = require('react');
|
|
8
8
|
require('../aria-announcer/AriaAnnouncerContext.js');
|
|
9
|
+
require('../utils/useFloatingUI.js');
|
|
9
10
|
require('../utils/useId.js');
|
|
10
11
|
var useIsomorphicLayoutEffect = require('../utils/useIsomorphicLayoutEffect.js');
|
|
11
12
|
var ViewportProvider = require('../viewport/ViewportProvider.js');
|
|
@@ -15,7 +16,6 @@ require('./SaltProvider.css.js');
|
|
|
15
16
|
|
|
16
17
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
17
18
|
|
|
18
|
-
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
|
19
19
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
20
20
|
|
|
21
21
|
const DEFAULT_DENSITY = "medium";
|
|
@@ -35,7 +35,7 @@ const createThemedChildren = (children, themeName, density, mode, applyClassesTo
|
|
|
35
35
|
} else if (applyClassesTo === "child") {
|
|
36
36
|
if (React__default["default"].isValidElement(children)) {
|
|
37
37
|
return React__default["default"].cloneElement(children, {
|
|
38
|
-
className:
|
|
38
|
+
className: clsx.clsx(
|
|
39
39
|
(_a = children.props) == null ? void 0 : _a.className,
|
|
40
40
|
...themeNames,
|
|
41
41
|
`salt-density-${density}`
|
|
@@ -53,7 +53,7 @@ SaltProvider can only apply CSS classes for theming to a single nested child ele
|
|
|
53
53
|
}
|
|
54
54
|
} else {
|
|
55
55
|
return /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
56
|
-
className:
|
|
56
|
+
className: clsx.clsx(
|
|
57
57
|
`salt-provider`,
|
|
58
58
|
...themeNames,
|
|
59
59
|
`salt-density-${density}`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SaltProvider.js","sources":["../src/salt-provider/SaltProvider.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, {\n createContext,\n HTMLAttributes,\n ReactElement,\n ReactNode,\n useContext,\n useMemo,\n} from \"react\";\nimport { AriaAnnouncerProvider } from \"../aria-announcer\";\nimport { Breakpoints, DEFAULT_BREAKPOINTS } from \"../breakpoints\";\nimport { Density, Mode, ThemeName } from \"../theme\";\nimport { ViewportProvider } from \"../viewport\";\nimport { useIsomorphicLayoutEffect } from \"../utils\";\n\nimport \"./SaltProvider.css\";\n\nexport const DEFAULT_DENSITY = \"medium\";\n\nconst DEFAULT_THEME_NAME = \"salt-theme\";\n\nconst DEFAULT_MODE = \"light\";\n\nexport interface ThemeContextProps {\n theme: ThemeName;\n mode: Mode;\n}\n\nexport const DensityContext = createContext<Density>(DEFAULT_DENSITY);\n\nexport const ThemeContext = createContext<ThemeContextProps>({\n theme: \"\",\n mode: DEFAULT_MODE,\n});\n\nexport const BreakpointContext =\n createContext<Breakpoints>(DEFAULT_BREAKPOINTS);\n\nconst createThemedChildren = (\n children: ReactNode,\n themeName: ThemeName,\n density: Density,\n mode: Mode,\n applyClassesTo?: TargetElement\n) => {\n const themeNames =\n themeName === DEFAULT_THEME_NAME\n ? [DEFAULT_THEME_NAME]\n : [DEFAULT_THEME_NAME, themeName];\n if (applyClassesTo === \"root\") {\n return children;\n } else if (applyClassesTo === \"child\") {\n if (React.isValidElement<HTMLAttributes<HTMLElement>>(children)) {\n return React.cloneElement(children, {\n className: cx(\n children.props?.className,\n ...themeNames,\n `salt-density-${density}`\n ),\n // @ts-ignore\n \"data-mode\": mode,\n });\n } else {\n console.warn(\n `\\nSaltProvider can only apply CSS classes for theming to a single nested child element of the SaltProvider.\n Either wrap elements with a single container or consider removing the applyClassesToChild prop, in which case a\n div element will wrap your child elements`\n );\n return children;\n }\n } else {\n return (\n <div\n className={cx(\n `salt-provider`,\n ...themeNames,\n `salt-density-${density}`\n )}\n data-mode={mode}\n >\n {children}\n </div>\n );\n }\n};\n\ntype TargetElement = \"root\" | \"scope\" | \"child\";\n\ntype SaltProviderBaseProps = {\n applyClassesTo?: TargetElement;\n density?: Density;\n theme?: ThemeName;\n mode?: Mode;\n breakpoints?: Breakpoints;\n};\n\ninterface SaltProviderThatAppliesClassesToChild extends SaltProviderBaseProps {\n children: ReactElement;\n applyClassesTo: \"child\";\n}\n\ninterface SaltProviderThatInjectsThemeElement extends SaltProviderBaseProps {\n children: ReactNode;\n}\n\ninterface SaltProviderThatClassesToRoot\n extends SaltProviderThatInjectsThemeElement {\n applyClassesTo: \"root\";\n}\n\ntype SaltProviderProps =\n | SaltProviderThatAppliesClassesToChild\n | SaltProviderThatInjectsThemeElement\n | SaltProviderThatClassesToRoot;\n\nexport function SaltProvider({\n applyClassesTo: applyClassesToProp,\n children,\n density: densityProp,\n theme: themeProp,\n mode: modeProp,\n breakpoints: breakpointsProp,\n}: SaltProviderProps) {\n const inheritedDensity = useContext(DensityContext);\n const { theme: inheritedThemes, mode: inheritedMode } = useTheme();\n\n const isRoot = inheritedThemes === undefined || inheritedThemes === \"\";\n const density = densityProp ?? inheritedDensity ?? DEFAULT_DENSITY;\n const themeName =\n themeProp ??\n (inheritedThemes === \"\" ? DEFAULT_THEME_NAME : inheritedThemes);\n const mode = modeProp ?? inheritedMode;\n const breakpoints = breakpointsProp ?? DEFAULT_BREAKPOINTS;\n\n const applyClassesTo = applyClassesToProp ?? (isRoot ? \"root\" : \"scope\");\n\n const themeContextValue = useMemo(\n () => ({ theme: themeName, mode }),\n [themeName, mode]\n );\n\n const themedChildren = createThemedChildren(\n children,\n themeName,\n density,\n mode,\n applyClassesTo\n );\n\n useIsomorphicLayoutEffect(() => {\n const themeNames =\n themeName === DEFAULT_THEME_NAME\n ? [DEFAULT_THEME_NAME]\n : [DEFAULT_THEME_NAME, themeName];\n if (applyClassesTo === \"root\") {\n if (isRoot) {\n // add the styles we want to apply\n document.documentElement.classList.add(\n ...themeNames,\n `salt-density-${density}`\n );\n document.documentElement.dataset.mode = mode;\n } else {\n console.warn(\n \"\\nSaltProvider can only apply CSS classes to the root if it is the root level SaltProvider.\"\n );\n }\n }\n return () => {\n if (applyClassesTo === \"root\") {\n // When unmounting/remounting, remove the applied styles from the root\n document.documentElement.classList.remove(\n ...themeNames,\n `salt-density-${density}`\n );\n document.documentElement.dataset.mode = undefined;\n }\n };\n }, [applyClassesTo, density, isRoot, mode, themeName]);\n\n const saltProvider = (\n <DensityContext.Provider value={density}>\n <ThemeContext.Provider value={themeContextValue}>\n <BreakpointContext.Provider value={breakpoints}>\n <ViewportProvider>{themedChildren}</ViewportProvider>\n </BreakpointContext.Provider>\n </ThemeContext.Provider>\n </DensityContext.Provider>\n );\n\n if (isRoot) {\n return <AriaAnnouncerProvider>{saltProvider}</AriaAnnouncerProvider>;\n } else {\n return saltProvider;\n }\n}\n\nexport const useTheme = (): ThemeContextProps => {\n return useContext(ThemeContext);\n};\n\n/**\n * `useDensity` merges density value from `DensityContext` with the one from component's props.\n */\nexport function useDensity(density?: Density): Density {\n const densityFromContext = useContext(DensityContext);\n return density || densityFromContext || DEFAULT_DENSITY;\n}\n\nexport const useBreakpoints = (): Breakpoints => {\n return useContext(BreakpointContext);\n};\n"],"names":["createContext","DEFAULT_BREAKPOINTS","React","cx","jsx","useContext","useMemo","useIsomorphicLayoutEffect","ViewportProvider","AriaAnnouncerProvider"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SaltProvider.js","sources":["../src/salt-provider/SaltProvider.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport React, {\n createContext,\n HTMLAttributes,\n ReactElement,\n ReactNode,\n useContext,\n useMemo,\n} from \"react\";\nimport { AriaAnnouncerProvider } from \"../aria-announcer\";\nimport { Breakpoints, DEFAULT_BREAKPOINTS } from \"../breakpoints\";\nimport { Density, Mode, ThemeName } from \"../theme\";\nimport { ViewportProvider } from \"../viewport\";\nimport { useIsomorphicLayoutEffect } from \"../utils\";\n\nimport \"./SaltProvider.css\";\n\nexport const DEFAULT_DENSITY = \"medium\";\n\nconst DEFAULT_THEME_NAME = \"salt-theme\";\n\nconst DEFAULT_MODE = \"light\";\n\nexport interface ThemeContextProps {\n theme: ThemeName;\n mode: Mode;\n}\n\nexport const DensityContext = createContext<Density>(DEFAULT_DENSITY);\n\nexport const ThemeContext = createContext<ThemeContextProps>({\n theme: \"\",\n mode: DEFAULT_MODE,\n});\n\nexport const BreakpointContext =\n createContext<Breakpoints>(DEFAULT_BREAKPOINTS);\n\nconst createThemedChildren = (\n children: ReactNode,\n themeName: ThemeName,\n density: Density,\n mode: Mode,\n applyClassesTo?: TargetElement\n) => {\n const themeNames =\n themeName === DEFAULT_THEME_NAME\n ? [DEFAULT_THEME_NAME]\n : [DEFAULT_THEME_NAME, themeName];\n if (applyClassesTo === \"root\") {\n return children;\n } else if (applyClassesTo === \"child\") {\n if (React.isValidElement<HTMLAttributes<HTMLElement>>(children)) {\n return React.cloneElement(children, {\n className: clsx(\n children.props?.className,\n ...themeNames,\n `salt-density-${density}`\n ),\n // @ts-ignore\n \"data-mode\": mode,\n });\n } else {\n console.warn(\n `\\nSaltProvider can only apply CSS classes for theming to a single nested child element of the SaltProvider.\n Either wrap elements with a single container or consider removing the applyClassesToChild prop, in which case a\n div element will wrap your child elements`\n );\n return children;\n }\n } else {\n return (\n <div\n className={clsx(\n `salt-provider`,\n ...themeNames,\n `salt-density-${density}`\n )}\n data-mode={mode}\n >\n {children}\n </div>\n );\n }\n};\n\ntype TargetElement = \"root\" | \"scope\" | \"child\";\n\ntype SaltProviderBaseProps = {\n applyClassesTo?: TargetElement;\n density?: Density;\n theme?: ThemeName;\n mode?: Mode;\n breakpoints?: Breakpoints;\n};\n\ninterface SaltProviderThatAppliesClassesToChild extends SaltProviderBaseProps {\n children: ReactElement;\n applyClassesTo: \"child\";\n}\n\ninterface SaltProviderThatInjectsThemeElement extends SaltProviderBaseProps {\n children: ReactNode;\n}\n\ninterface SaltProviderThatClassesToRoot\n extends SaltProviderThatInjectsThemeElement {\n applyClassesTo: \"root\";\n}\n\ntype SaltProviderProps =\n | SaltProviderThatAppliesClassesToChild\n | SaltProviderThatInjectsThemeElement\n | SaltProviderThatClassesToRoot;\n\nexport function SaltProvider({\n applyClassesTo: applyClassesToProp,\n children,\n density: densityProp,\n theme: themeProp,\n mode: modeProp,\n breakpoints: breakpointsProp,\n}: SaltProviderProps) {\n const inheritedDensity = useContext(DensityContext);\n const { theme: inheritedThemes, mode: inheritedMode } = useTheme();\n\n const isRoot = inheritedThemes === undefined || inheritedThemes === \"\";\n const density = densityProp ?? inheritedDensity ?? DEFAULT_DENSITY;\n const themeName =\n themeProp ??\n (inheritedThemes === \"\" ? DEFAULT_THEME_NAME : inheritedThemes);\n const mode = modeProp ?? inheritedMode;\n const breakpoints = breakpointsProp ?? DEFAULT_BREAKPOINTS;\n\n const applyClassesTo = applyClassesToProp ?? (isRoot ? \"root\" : \"scope\");\n\n const themeContextValue = useMemo(\n () => ({ theme: themeName, mode }),\n [themeName, mode]\n );\n\n const themedChildren = createThemedChildren(\n children,\n themeName,\n density,\n mode,\n applyClassesTo\n );\n\n useIsomorphicLayoutEffect(() => {\n const themeNames =\n themeName === DEFAULT_THEME_NAME\n ? [DEFAULT_THEME_NAME]\n : [DEFAULT_THEME_NAME, themeName];\n if (applyClassesTo === \"root\") {\n if (isRoot) {\n // add the styles we want to apply\n document.documentElement.classList.add(\n ...themeNames,\n `salt-density-${density}`\n );\n document.documentElement.dataset.mode = mode;\n } else {\n console.warn(\n \"\\nSaltProvider can only apply CSS classes to the root if it is the root level SaltProvider.\"\n );\n }\n }\n return () => {\n if (applyClassesTo === \"root\") {\n // When unmounting/remounting, remove the applied styles from the root\n document.documentElement.classList.remove(\n ...themeNames,\n `salt-density-${density}`\n );\n document.documentElement.dataset.mode = undefined;\n }\n };\n }, [applyClassesTo, density, isRoot, mode, themeName]);\n\n const saltProvider = (\n <DensityContext.Provider value={density}>\n <ThemeContext.Provider value={themeContextValue}>\n <BreakpointContext.Provider value={breakpoints}>\n <ViewportProvider>{themedChildren}</ViewportProvider>\n </BreakpointContext.Provider>\n </ThemeContext.Provider>\n </DensityContext.Provider>\n );\n\n if (isRoot) {\n return <AriaAnnouncerProvider>{saltProvider}</AriaAnnouncerProvider>;\n } else {\n return saltProvider;\n }\n}\n\nexport const useTheme = (): ThemeContextProps => {\n return useContext(ThemeContext);\n};\n\n/**\n * `useDensity` merges density value from `DensityContext` with the one from component's props.\n */\nexport function useDensity(density?: Density): Density {\n const densityFromContext = useContext(DensityContext);\n return density || densityFromContext || DEFAULT_DENSITY;\n}\n\nexport const useBreakpoints = (): Breakpoints => {\n return useContext(BreakpointContext);\n};\n"],"names":["createContext","DEFAULT_BREAKPOINTS","React","clsx","jsx","useContext","useMemo","useIsomorphicLayoutEffect","ViewportProvider","AriaAnnouncerProvider"],"mappings":"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"}
|
|
@@ -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 the root element */\n.saltSpinner {\n position: relative;\n}\n\n/* Styles applied to the SVG stop elements */\n.saltSpinner-gradientStop {\n stop-color: var(--saltSpinner-gradient-color, var(--salt-measured-fill));\n}\n\n/* Styles applied when `size=\"default\"` */\n.saltSpinner-default {\n height: var(--salt-size-base);\n width: var(--salt-size-base);\n}\n\n/* Styles applied when `size=\"large\"` */\n.saltSpinner-large {\n height: calc(var(--salt-size-base) * 2);\n width: calc(var(--salt-size-base) * 2);\n}\n\n/* Styles applied to the SVG */\n.saltSpinner-spinner {\n animation: spinner 0.9s linear infinite;\n width: 100%;\n height: 100%;\n position: absolute;\n left: 0;\n top: 0;\n}\n\n@keyframes spinner {\n 0% {\n transform: rotate(0);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n";
|
|
6
|
+
styleInject_es(css_248z);
|
|
7
|
+
|
|
8
|
+
module.exports = css_248z;
|
|
9
|
+
//# sourceMappingURL=Spinner.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Spinner.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
|
|
@@ -0,0 +1,81 @@
|
|
|
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
|
+
require('../aria-announcer/AriaAnnouncerContext.js');
|
|
9
|
+
var useAriaAnnouncer = require('../aria-announcer/useAriaAnnouncer.js');
|
|
10
|
+
var makePrefixer = require('../utils/makePrefixer.js');
|
|
11
|
+
require('../utils/useFloatingUI.js');
|
|
12
|
+
var useId = require('../utils/useId.js');
|
|
13
|
+
require('../salt-provider/SaltProvider.js');
|
|
14
|
+
require('../viewport/ViewportProvider.js');
|
|
15
|
+
var SpinnerSVG = require('./svgSpinners/SpinnerSVG.js');
|
|
16
|
+
require('./Spinner.css.js');
|
|
17
|
+
|
|
18
|
+
const SpinnerSizeValues = ["default", "large"];
|
|
19
|
+
const withBaseName = makePrefixer.makePrefixer("saltSpinner");
|
|
20
|
+
const Spinner = React.forwardRef(
|
|
21
|
+
function Spinner2({
|
|
22
|
+
"aria-label": ariaLabel = "loading",
|
|
23
|
+
announcerInterval = 5e3,
|
|
24
|
+
announcerTimeout = 2e4,
|
|
25
|
+
completionAnnouncement = `finished ${ariaLabel}`,
|
|
26
|
+
disableAnnouncer,
|
|
27
|
+
role = "img",
|
|
28
|
+
className,
|
|
29
|
+
size = "default",
|
|
30
|
+
id: idProp,
|
|
31
|
+
...rest
|
|
32
|
+
}, ref) {
|
|
33
|
+
const id = useId.useId(idProp);
|
|
34
|
+
const { announce } = useAriaAnnouncer.useAriaAnnouncer();
|
|
35
|
+
React.useEffect(() => {
|
|
36
|
+
if (disableAnnouncer)
|
|
37
|
+
return;
|
|
38
|
+
announce(ariaLabel);
|
|
39
|
+
const startTime = new Date().getTime();
|
|
40
|
+
const interval = setInterval(() => {
|
|
41
|
+
if (new Date().getTime() - startTime > announcerTimeout) {
|
|
42
|
+
announce(
|
|
43
|
+
`${ariaLabel} is still in progress, but will no longer announce.`
|
|
44
|
+
);
|
|
45
|
+
clearInterval(interval);
|
|
46
|
+
return;
|
|
47
|
+
}
|
|
48
|
+
announce(ariaLabel);
|
|
49
|
+
}, announcerInterval);
|
|
50
|
+
return () => {
|
|
51
|
+
if (disableAnnouncer)
|
|
52
|
+
return;
|
|
53
|
+
clearInterval(interval);
|
|
54
|
+
if (completionAnnouncement) {
|
|
55
|
+
announce(completionAnnouncement);
|
|
56
|
+
}
|
|
57
|
+
};
|
|
58
|
+
}, [
|
|
59
|
+
announce,
|
|
60
|
+
announcerInterval,
|
|
61
|
+
announcerTimeout,
|
|
62
|
+
ariaLabel,
|
|
63
|
+
completionAnnouncement,
|
|
64
|
+
disableAnnouncer
|
|
65
|
+
]);
|
|
66
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
67
|
+
"aria-label": ariaLabel,
|
|
68
|
+
className: clsx.clsx(withBaseName(), withBaseName(size), className),
|
|
69
|
+
ref,
|
|
70
|
+
role,
|
|
71
|
+
...rest,
|
|
72
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(SpinnerSVG.SpinnerSVG, {
|
|
73
|
+
id
|
|
74
|
+
})
|
|
75
|
+
});
|
|
76
|
+
}
|
|
77
|
+
);
|
|
78
|
+
|
|
79
|
+
exports.Spinner = Spinner;
|
|
80
|
+
exports.SpinnerSizeValues = SpinnerSizeValues;
|
|
81
|
+
//# sourceMappingURL=Spinner.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Spinner.js","sources":["../src/spinner/Spinner.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes, useEffect } from \"react\";\nimport { useAriaAnnouncer } from \"../aria-announcer\";\nimport { makePrefixer, useId } from \"../utils\";\nimport { SpinnerSVG } from \"./svgSpinners/SpinnerSVG\";\n\nimport \"./Spinner.css\";\n\n/**\n * Spinner component, provides an indeterminate loading indicator\n *\n * @example\n * <Spinner size=\"default | large\" />\n */\n\nexport const SpinnerSizeValues = [\"default\", \"large\"] as const;\nexport type SpinnerSize = typeof SpinnerSizeValues[number];\nconst withBaseName = makePrefixer(\"saltSpinner\");\n\nexport interface SpinnerProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * Determines the interval on which the component will continue to announce the aria-label. Defaults to 5000ms (5s)\n */\n announcerInterval?: number;\n /**\n * * Determines the interval after which the component will stop announcing the aria-label. Defaults to 20000ms (20s)\n */\n announcerTimeout?: number;\n /**\n * The className(s) of the component\n */\n className?: string;\n /**\n * Determines the message to be announced by the component when it unmounts. Set to null if not needed.\n */\n completionAnnouncement?: string | null;\n /**\n * If true, built in aria announcer will be inactive\n */\n disableAnnouncer?: boolean;\n /**\n * The prop for the role attribute of the component\n */\n role?: string;\n /**\n * Determines the size of the spinner. Must be one of: 'default', 'large'.\n */\n size?: SpinnerSize;\n /**\n * The ids of the SvgSpinner components\n */\n id?: string;\n}\n\nexport const Spinner = forwardRef<HTMLDivElement, SpinnerProps>(\n function Spinner(\n {\n \"aria-label\": ariaLabel = \"loading\",\n announcerInterval = 5000,\n announcerTimeout = 20000,\n completionAnnouncement = `finished ${ariaLabel}`,\n disableAnnouncer,\n role = \"img\",\n className,\n size = \"default\",\n id: idProp,\n ...rest\n },\n ref\n ) {\n const id = useId(idProp);\n\n const { announce } = useAriaAnnouncer();\n\n useEffect(() => {\n if (disableAnnouncer) return;\n\n announce(ariaLabel);\n\n const startTime = new Date().getTime();\n\n const interval =\n // announcerInterval > 0 &&\n // above line was causing typescript type error that I didn't manage to sort out right away\n setInterval(() => {\n if (new Date().getTime() - startTime > announcerTimeout) {\n // the announcer will stop after 20s\n announce(\n `${ariaLabel} is still in progress, but will no longer announce.`\n );\n clearInterval(interval);\n return;\n }\n announce(ariaLabel);\n }, announcerInterval);\n\n return () => {\n if (disableAnnouncer) return;\n\n clearInterval(interval);\n if (completionAnnouncement) {\n announce(completionAnnouncement);\n }\n };\n }, [\n announce,\n announcerInterval,\n announcerTimeout,\n ariaLabel,\n completionAnnouncement,\n disableAnnouncer,\n ]);\n\n return (\n <div\n aria-label={ariaLabel}\n className={clsx(withBaseName(), withBaseName(size), className)}\n ref={ref}\n role={role}\n {...rest}\n >\n <SpinnerSVG id={id!} />\n </div>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","Spinner","useId","useAriaAnnouncer","useEffect","jsx","clsx","SpinnerSVG"],"mappings":";;;;;;;;;;;;;;;;;AAea,MAAA,iBAAA,GAAoB,CAAC,SAAA,EAAW,OAAO,EAAA;AAEpD,MAAM,YAAA,GAAeA,0BAAa,aAAa,CAAA,CAAA;AAqCxC,MAAM,OAAU,GAAAC,gBAAA;AAAA,EACrB,SAASC,QACP,CAAA;AAAA,IACE,cAAc,SAAY,GAAA,SAAA;AAAA,IAC1B,iBAAoB,GAAA,GAAA;AAAA,IACpB,gBAAmB,GAAA,GAAA;AAAA,IACnB,yBAAyB,CAAY,SAAA,EAAA,SAAA,CAAA,CAAA;AAAA,IACrC,gBAAA;AAAA,IACA,IAAO,GAAA,KAAA;AAAA,IACP,SAAA;AAAA,IACA,IAAO,GAAA,SAAA;AAAA,IACP,EAAI,EAAA,MAAA;AAAA,IACD,GAAA,IAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAM,MAAA,EAAA,GAAKC,YAAM,MAAM,CAAA,CAAA;AAEvB,IAAM,MAAA,EAAE,QAAS,EAAA,GAAIC,iCAAiB,EAAA,CAAA;AAEtC,IAAAC,eAAA,CAAU,MAAM;AACd,MAAI,IAAA,gBAAA;AAAkB,QAAA,OAAA;AAEtB,MAAA,QAAA,CAAS,SAAS,CAAA,CAAA;AAElB,MAAA,MAAM,SAAY,GAAA,IAAI,IAAK,EAAA,CAAE,OAAQ,EAAA,CAAA;AAErC,MAAM,MAAA,QAAA,GAGJ,YAAY,MAAM;AAChB,QAAA,IAAI,IAAI,IAAK,EAAA,CAAE,OAAQ,EAAA,GAAI,YAAY,gBAAkB,EAAA;AAEvD,UAAA,QAAA;AAAA,YACE,CAAG,EAAA,SAAA,CAAA,mDAAA,CAAA;AAAA,WACL,CAAA;AACA,UAAA,aAAA,CAAc,QAAQ,CAAA,CAAA;AACtB,UAAA,OAAA;AAAA,SACF;AACA,QAAA,QAAA,CAAS,SAAS,CAAA,CAAA;AAAA,SACjB,iBAAiB,CAAA,CAAA;AAEtB,MAAA,OAAO,MAAM;AACX,QAAI,IAAA,gBAAA;AAAkB,UAAA,OAAA;AAEtB,QAAA,aAAA,CAAc,QAAQ,CAAA,CAAA;AACtB,QAAA,IAAI,sBAAwB,EAAA;AAC1B,UAAA,QAAA,CAAS,sBAAsB,CAAA,CAAA;AAAA,SACjC;AAAA,OACF,CAAA;AAAA,KACC,EAAA;AAAA,MACD,QAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA;AAAA,MACA,SAAA;AAAA,MACA,sBAAA;AAAA,MACA,gBAAA;AAAA,KACD,CAAA,CAAA;AAED,IAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,MACC,YAAY,EAAA,SAAA;AAAA,MACZ,WAAWC,SAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,IAAI,GAAG,SAAS,CAAA;AAAA,MAC7D,GAAA;AAAA,MACA,IAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEJ,QAAC,kBAAAD,cAAA,CAAAE,qBAAA,EAAA;AAAA,QAAW,EAAA;AAAA,OAAS,CAAA;AAAA,KACvB,CAAA,CAAA;AAAA,GAEJ;AACF;;;;;"}
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
+
require('react');
|
|
7
|
+
var makePrefixer = require('../../utils/makePrefixer.js');
|
|
8
|
+
require('../../utils/useFloatingUI.js');
|
|
9
|
+
require('../../utils/useId.js');
|
|
10
|
+
require('../../salt-provider/SaltProvider.js');
|
|
11
|
+
require('../../viewport/ViewportProvider.js');
|
|
12
|
+
|
|
13
|
+
const withBaseName = makePrefixer.makePrefixer("saltSpinner");
|
|
14
|
+
const SpinnerSVG = (props) => {
|
|
15
|
+
const { id, rest } = props;
|
|
16
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("svg", {
|
|
17
|
+
className: withBaseName("spinner"),
|
|
18
|
+
viewBox: "0 0 28 28",
|
|
19
|
+
id,
|
|
20
|
+
...rest,
|
|
21
|
+
children: [
|
|
22
|
+
/* @__PURE__ */ jsxRuntime.jsxs("defs", {
|
|
23
|
+
children: [
|
|
24
|
+
/* @__PURE__ */ jsxRuntime.jsxs("linearGradient", {
|
|
25
|
+
id: `${id}-1`,
|
|
26
|
+
x1: "100%",
|
|
27
|
+
x2: "0%",
|
|
28
|
+
y1: "78%",
|
|
29
|
+
y2: "78%",
|
|
30
|
+
children: [
|
|
31
|
+
/* @__PURE__ */ jsxRuntime.jsx("stop", {
|
|
32
|
+
className: withBaseName("gradientStop"),
|
|
33
|
+
offset: "0%"
|
|
34
|
+
}),
|
|
35
|
+
/* @__PURE__ */ jsxRuntime.jsx("stop", {
|
|
36
|
+
className: withBaseName("gradientStop"),
|
|
37
|
+
offset: "100%"
|
|
38
|
+
})
|
|
39
|
+
]
|
|
40
|
+
}),
|
|
41
|
+
/* @__PURE__ */ jsxRuntime.jsxs("linearGradient", {
|
|
42
|
+
id: `${id}-2`,
|
|
43
|
+
x1: "13%",
|
|
44
|
+
x2: "100%",
|
|
45
|
+
y1: "0%",
|
|
46
|
+
y2: "87%",
|
|
47
|
+
children: [
|
|
48
|
+
/* @__PURE__ */ jsxRuntime.jsx("stop", {
|
|
49
|
+
className: withBaseName("gradientStop"),
|
|
50
|
+
offset: "0%"
|
|
51
|
+
}),
|
|
52
|
+
/* @__PURE__ */ jsxRuntime.jsx("stop", {
|
|
53
|
+
className: withBaseName("gradientStop"),
|
|
54
|
+
offset: "100%",
|
|
55
|
+
stopOpacity: "0"
|
|
56
|
+
})
|
|
57
|
+
]
|
|
58
|
+
})
|
|
59
|
+
]
|
|
60
|
+
}),
|
|
61
|
+
/* @__PURE__ */ jsxRuntime.jsxs("g", {
|
|
62
|
+
fill: "none",
|
|
63
|
+
fillRule: "evenodd",
|
|
64
|
+
children: [
|
|
65
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", {
|
|
66
|
+
d: "M28 14H24C24 8.47715 19.5228 4 14 4C8.47715 4 4 8.47715 4 14 H 0 C0 6.26801 6.26801 0 14 0C21.732 0 28 6.26801 28 14Z",
|
|
67
|
+
fill: `url(#${id}-1)`
|
|
68
|
+
}),
|
|
69
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", {
|
|
70
|
+
d: "M4 14 C4 19.5228 8.47715 24 14 24V28C6.26801 28 0 21.732 0 14 Z",
|
|
71
|
+
fill: `url(#${id}-2)`
|
|
72
|
+
})
|
|
73
|
+
]
|
|
74
|
+
})
|
|
75
|
+
]
|
|
76
|
+
});
|
|
77
|
+
};
|
|
78
|
+
|
|
79
|
+
exports.SpinnerSVG = SpinnerSVG;
|
|
80
|
+
//# sourceMappingURL=SpinnerSVG.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SpinnerSVG.js","sources":["../src/spinner/svgSpinners/SpinnerSVG.tsx"],"sourcesContent":["import { SVGAttributes } from \"react\";\nimport { makePrefixer } from \"../../utils\";\n\nconst withBaseName = makePrefixer(\"saltSpinner\");\n\n/* SVG based on MD, do not change viewbox attribute */\nexport const SpinnerSVG = (props: {\n id: string;\n rest?: Omit<SVGAttributes<SVGSVGElement>, \"id\">;\n}) => {\n const { id, rest } = props;\n return (\n <svg\n className={withBaseName(\"spinner\")}\n viewBox=\"0 0 28 28\"\n id={id}\n {...rest}\n >\n <defs>\n <linearGradient id={`${id}-1`} x1=\"100%\" x2=\"0%\" y1=\"78%\" y2=\"78%\">\n <stop className={withBaseName(\"gradientStop\")} offset=\"0%\" />\n <stop className={withBaseName(\"gradientStop\")} offset=\"100%\" />\n </linearGradient>\n <linearGradient id={`${id}-2`} x1=\"13%\" x2=\"100%\" y1=\"0%\" y2=\"87%\">\n <stop className={withBaseName(\"gradientStop\")} offset=\"0%\" />\n <stop\n className={withBaseName(\"gradientStop\")}\n offset=\"100%\"\n stopOpacity=\"0\"\n />\n </linearGradient>\n </defs>\n <g fill=\"none\" fillRule=\"evenodd\">\n <path\n d=\"M28 14H24C24 8.47715 19.5228 4 14 4C8.47715 4 4 8.47715 4 14 H 0 C0 6.26801 6.26801 0 14 0C21.732 0 28 6.26801 28 14Z\"\n fill={`url(#${id}-1)`}\n />\n <path\n d=\"M4 14 C4 19.5228 8.47715 24 14 24V28C6.26801 28 0 21.732 0 14 Z\"\n fill={`url(#${id}-2)`}\n />\n </g>\n </svg>\n );\n};\n"],"names":["makePrefixer","jsxs","jsx"],"mappings":";;;;;;;;;;;;AAGA,MAAM,YAAA,GAAeA,0BAAa,aAAa,CAAA,CAAA;AAGlC,MAAA,UAAA,GAAa,CAAC,KAGrB,KAAA;AACJ,EAAM,MAAA,EAAE,EAAI,EAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AACrB,EAAA,uBACGC,eAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,IACjC,OAAQ,EAAA,WAAA;AAAA,IACR,EAAA;AAAA,IACC,GAAG,IAAA;AAAA,IAEJ,QAAA,EAAA;AAAA,sBAACA,eAAA,CAAA,MAAA,EAAA;AAAA,QACC,QAAA,EAAA;AAAA,0BAACA,eAAA,CAAA,gBAAA,EAAA;AAAA,YAAe,IAAI,CAAG,EAAA,EAAA,CAAA,EAAA,CAAA;AAAA,YAAQ,EAAG,EAAA,MAAA;AAAA,YAAO,EAAG,EAAA,IAAA;AAAA,YAAK,EAAG,EAAA,KAAA;AAAA,YAAM,EAAG,EAAA,KAAA;AAAA,YAC3D,QAAA,EAAA;AAAA,8BAACC,cAAA,CAAA,MAAA,EAAA;AAAA,gBAAK,SAAA,EAAW,aAAa,cAAc,CAAA;AAAA,gBAAG,MAAO,EAAA,IAAA;AAAA,eAAK,CAAA;AAAA,8BAC1DA,cAAA,CAAA,MAAA,EAAA;AAAA,gBAAK,SAAA,EAAW,aAAa,cAAc,CAAA;AAAA,gBAAG,MAAO,EAAA,MAAA;AAAA,eAAO,CAAA;AAAA,aAAA;AAAA,WAC/D,CAAA;AAAA,0BACCD,eAAA,CAAA,gBAAA,EAAA;AAAA,YAAe,IAAI,CAAG,EAAA,EAAA,CAAA,EAAA,CAAA;AAAA,YAAQ,EAAG,EAAA,KAAA;AAAA,YAAM,EAAG,EAAA,MAAA;AAAA,YAAO,EAAG,EAAA,IAAA;AAAA,YAAK,EAAG,EAAA,KAAA;AAAA,YAC3D,QAAA,EAAA;AAAA,8BAACC,cAAA,CAAA,MAAA,EAAA;AAAA,gBAAK,SAAA,EAAW,aAAa,cAAc,CAAA;AAAA,gBAAG,MAAO,EAAA,IAAA;AAAA,eAAK,CAAA;AAAA,8BAC1DA,cAAA,CAAA,MAAA,EAAA;AAAA,gBACC,SAAA,EAAW,aAAa,cAAc,CAAA;AAAA,gBACtC,MAAO,EAAA,MAAA;AAAA,gBACP,WAAY,EAAA,GAAA;AAAA,eACd,CAAA;AAAA,aAAA;AAAA,WACF,CAAA;AAAA,SAAA;AAAA,OACF,CAAA;AAAA,sBACCD,eAAA,CAAA,GAAA,EAAA;AAAA,QAAE,IAAK,EAAA,MAAA;AAAA,QAAO,QAAS,EAAA,SAAA;AAAA,QACtB,QAAA,EAAA;AAAA,0BAACC,cAAA,CAAA,MAAA,EAAA;AAAA,YACC,CAAE,EAAA,uHAAA;AAAA,YACF,MAAM,CAAQ,KAAA,EAAA,EAAA,CAAA,GAAA,CAAA;AAAA,WAChB,CAAA;AAAA,0BACCA,cAAA,CAAA,MAAA,EAAA;AAAA,YACC,CAAE,EAAA,iEAAA;AAAA,YACF,MAAM,CAAQ,KAAA,EAAA,EAAA,CAAA,GAAA,CAAA;AAAA,WAChB,CAAA;AAAA,SAAA;AAAA,OACF,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
+
var React = require('react');
|
|
7
|
+
var FlexLayout = require('../flex-layout/FlexLayout.js');
|
|
8
|
+
|
|
9
|
+
const SplitLayout = React.forwardRef(
|
|
10
|
+
({ endItem, startItem, ...rest }, ref) => {
|
|
11
|
+
const justify = endItem && !startItem ? "end" : "space-between";
|
|
12
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(FlexLayout.FlexLayout, {
|
|
13
|
+
ref,
|
|
14
|
+
justify,
|
|
15
|
+
...rest,
|
|
16
|
+
children: [
|
|
17
|
+
startItem,
|
|
18
|
+
endItem
|
|
19
|
+
]
|
|
20
|
+
});
|
|
21
|
+
}
|
|
22
|
+
);
|
|
23
|
+
|
|
24
|
+
exports.SplitLayout = SplitLayout;
|
|
25
|
+
//# sourceMappingURL=SplitLayout.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SplitLayout.js","sources":["../src/split-layout/SplitLayout.tsx"],"sourcesContent":["import { ElementType, forwardRef, ReactElement, ReactNode } from \"react\";\nimport { FlexLayout, FlexLayoutProps } from \"../flex-layout\";\nimport { PolymorphicComponentPropWithRef, PolymorphicRef } from \"../utils\";\n\nexport type SplitLayoutProps<T extends ElementType> =\n PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * Defines the default behavior for how flex items are laid out along the cross axis on the current line.\n */\n align?: FlexLayoutProps<ElementType>[\"align\"];\n /**\n * Establishes the main-axis, defining the direction children are placed. Default is \"row\".\n */\n direction?: FlexLayoutProps<ElementType>[\"direction\"];\n /**\n * End component to be rendered.\n */\n endItem?: ReactNode;\n /**\n * Controls the space between left and right items.\n */\n gap?: FlexLayoutProps<ElementType>[\"gap\"];\n /**\n * Start component to be rendered.\n */\n startItem?: ReactNode;\n }\n >;\n\ntype SplitLayoutComponent = <T extends ElementType = \"div\">(\n props: SplitLayoutProps<T>\n) => ReactElement | null;\n\nexport const SplitLayout: SplitLayoutComponent = forwardRef(\n <T extends ElementType = \"div\">(\n { endItem, startItem, ...rest }: SplitLayoutProps<T>,\n ref?: PolymorphicRef<T>\n ) => {\n const justify = endItem && !startItem ? \"end\" : \"space-between\";\n return (\n <FlexLayout ref={ref} justify={justify} {...rest}>\n {startItem}\n {endItem}\n </FlexLayout>\n );\n }\n);\n"],"names":["forwardRef","jsxs","FlexLayout"],"mappings":";;;;;;;;AAmCO,MAAM,WAAoC,GAAAA,gBAAA;AAAA,EAC/C,CACE,EAAE,OAAA,EAAS,SAAc,EAAA,GAAA,IAAA,IACzB,GACG,KAAA;AACH,IAAA,MAAM,OAAU,GAAA,OAAA,IAAW,CAAC,SAAA,GAAY,KAAQ,GAAA,eAAA,CAAA;AAChD,IAAA,uBACGC,eAAA,CAAAC,qBAAA,EAAA;AAAA,MAAW,GAAA;AAAA,MAAU,OAAA;AAAA,MAAmB,GAAG,IAAA;AAAA,MACzC,QAAA,EAAA;AAAA,QAAA,SAAA;AAAA,QACA,OAAA;AAAA,OAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -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 = "/* Default variables applied to the root element */\n.saltStackLayout {\n --stackLayout-gap-multiplier: var(--stackLayout-gap-density-multiplier, 3);\n --stackLayout-separator-weight: var(--salt-size-border, 1);\n --stackLayout-gap: calc(var(--salt-size-unit) * var(--stackLayout-gap-multiplier));\n}\n\n.saltStackLayout-separator > * {\n position: relative;\n}\n.saltStackLayout-separator > *:not(:last-child)::after {\n position: absolute;\n display: block;\n content: \"\";\n background-color: var(--salt-separable-secondary-borderColor);\n}\n\n/* \n * Seperator offset based on seperator alignment\n * var(--stackLayout-separator-weight) is used to take into account the thickness of the seperator,so even at higher weights it will be at the start/center/end\n*/\n.saltStackLayout-separator-start {\n --stackLayout-seperator-offset: calc(var(--stackLayout-separator-weight) * -1);\n}\n.saltStackLayout-separator-center {\n --stackLayout-seperator-offset: calc((var(--stackLayout-gap) * -0.5) + (var(--stackLayout-separator-weight) * -0.5));\n}\n.saltStackLayout-separator-end {\n --stackLayout-seperator-offset: calc(var(--stackLayout-gap) * -1);\n}\n\n/* When alignment is 'row' and we have seperators (last child doesn't need a seperator) */\n.saltStackLayout-row.saltStackLayout-separator > *:not(:last-child)::after {\n height: 100%;\n width: var(--stackLayout-separator-weight);\n right: var(--stackLayout-seperator-offset);\n top: 0;\n}\n\n/* When alignment is 'column' and we have seperators (last child doesn't need a seperator) */\n.saltStackLayout-column.saltStackLayout-separator > *:not(:last-child)::after {\n width: 100%;\n height: var(--stackLayout-separator-weight);\n bottom: var(--stackLayout-seperator-offset);\n left: 0;\n}\n";
|
|
6
|
+
styleInject_es(css_248z);
|
|
7
|
+
|
|
8
|
+
module.exports = css_248z;
|
|
9
|
+
//# sourceMappingURL=StackLayout.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"StackLayout.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
|
|
@@ -5,13 +5,48 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
6
|
var React = require('react');
|
|
7
7
|
var FlexLayout = require('../flex-layout/FlexLayout.js');
|
|
8
|
+
var makePrefixer = require('../utils/makePrefixer.js');
|
|
9
|
+
require('../utils/useFloatingUI.js');
|
|
10
|
+
require('../utils/useId.js');
|
|
11
|
+
var useResponsiveProp = require('../utils/useResponsiveProp.js');
|
|
12
|
+
var clsx = require('clsx');
|
|
13
|
+
require('./StackLayout.css.js');
|
|
8
14
|
|
|
15
|
+
const withBaseName = makePrefixer.makePrefixer("saltStackLayout");
|
|
9
16
|
const StackLayout = React.forwardRef(
|
|
10
|
-
|
|
17
|
+
({
|
|
18
|
+
children,
|
|
19
|
+
className,
|
|
20
|
+
direction = "column",
|
|
21
|
+
gap,
|
|
22
|
+
separators,
|
|
23
|
+
style,
|
|
24
|
+
...rest
|
|
25
|
+
}, ref) => {
|
|
26
|
+
const flexGap = useResponsiveProp.useResponsiveProp(gap, 3);
|
|
27
|
+
const separatorAlignment = separators === true ? "center" : separators;
|
|
28
|
+
const flexDirection = useResponsiveProp.useResponsiveProp(direction, "column");
|
|
29
|
+
const stackLayoutStyles = {
|
|
30
|
+
...style,
|
|
31
|
+
"--stackLayout-gap-multiplier": flexGap
|
|
32
|
+
};
|
|
11
33
|
return /* @__PURE__ */ jsxRuntime.jsx(FlexLayout.FlexLayout, {
|
|
12
|
-
|
|
34
|
+
className: clsx.clsx(
|
|
35
|
+
className,
|
|
36
|
+
withBaseName(),
|
|
37
|
+
withBaseName(flexDirection),
|
|
38
|
+
{
|
|
39
|
+
[withBaseName("separator")]: !!separatorAlignment,
|
|
40
|
+
[separatorAlignment ? withBaseName(`separator-${separatorAlignment}`) : ""]: separatorAlignment
|
|
41
|
+
}
|
|
42
|
+
),
|
|
13
43
|
ref,
|
|
14
|
-
|
|
44
|
+
direction,
|
|
45
|
+
style: stackLayoutStyles,
|
|
46
|
+
wrap: false,
|
|
47
|
+
gap: flexGap,
|
|
48
|
+
...rest,
|
|
49
|
+
children
|
|
15
50
|
});
|
|
16
51
|
}
|
|
17
52
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StackLayout.js","sources":["../src/stack-layout/StackLayout.tsx"],"sourcesContent":["import { ElementType, forwardRef,
|
|
1
|
+
{"version":3,"file":"StackLayout.js","sources":["../src/stack-layout/StackLayout.tsx"],"sourcesContent":["import { ElementType, forwardRef, ReactElement } from \"react\";\nimport {\n FlexLayout,\n FlexLayoutProps,\n LayoutDirection,\n LayoutSeparator,\n} from \"../flex-layout\";\nimport {\n makePrefixer,\n PolymorphicComponentPropWithRef,\n PolymorphicRef,\n ResponsiveProp,\n useResponsiveProp,\n} from \"../utils\";\nimport { clsx } from \"clsx\";\nimport \"./StackLayout.css\";\n\nconst withBaseName = makePrefixer(\"saltStackLayout\");\n\nexport type StackLayoutProps<T extends ElementType> =\n PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * Defines the default behavior for how flex items are laid out along the cross axis on the current line, default is \"stretch\".\n */\n align?: FlexLayoutProps<ElementType>[\"align\"];\n /**\n * Establishes the main-axis, defining the direction children are placed. Default is \"column\".\n */\n direction?: ResponsiveProp<LayoutDirection>;\n /**\n * Controls the space between items, default is 3.\n */\n gap?: FlexLayoutProps<ElementType>[\"gap\"];\n /**\n * Adds a separator between elements, default is false.\n */\n separators?: LayoutSeparator | boolean;\n }\n >;\n\ntype StackLayoutComponent = <T extends ElementType = \"div\">(\n props: StackLayoutProps<T>\n) => ReactElement | null;\n\nexport const StackLayout: StackLayoutComponent = forwardRef(\n <T extends ElementType = \"div\">(\n {\n children,\n className,\n direction = \"column\",\n gap,\n separators,\n style,\n ...rest\n }: StackLayoutProps<T>,\n ref?: PolymorphicRef<T>\n ) => {\n const flexGap = useResponsiveProp(gap, 3);\n const separatorAlignment = separators === true ? \"center\" : separators;\n const flexDirection = useResponsiveProp(direction, \"column\");\n const stackLayoutStyles = {\n ...style,\n \"--stackLayout-gap-multiplier\": flexGap,\n };\n return (\n <FlexLayout\n className={clsx(\n className,\n withBaseName(),\n withBaseName(flexDirection),\n {\n [withBaseName(\"separator\")]: !!separatorAlignment,\n [separatorAlignment\n ? withBaseName(`separator-${separatorAlignment}`)\n : \"\"]: separatorAlignment,\n }\n )}\n ref={ref}\n direction={direction}\n style={stackLayoutStyles}\n wrap={false}\n gap={flexGap}\n {...rest}\n >\n {children}\n </FlexLayout>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","useResponsiveProp","jsx","FlexLayout","clsx"],"mappings":";;;;;;;;;;;;;;AAiBA,MAAM,YAAA,GAAeA,0BAAa,iBAAiB,CAAA,CAAA;AA6B5C,MAAM,WAAoC,GAAAC,gBAAA;AAAA,EAC/C,CACE;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAY,GAAA,QAAA;AAAA,IACZ,GAAA;AAAA,IACA,UAAA;AAAA,IACA,KAAA;AAAA,IACG,GAAA,IAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAM,MAAA,OAAA,GAAUC,mCAAkB,CAAA,GAAA,EAAK,CAAC,CAAA,CAAA;AACxC,IAAM,MAAA,kBAAA,GAAqB,UAAe,KAAA,IAAA,GAAO,QAAW,GAAA,UAAA,CAAA;AAC5D,IAAM,MAAA,aAAA,GAAgBA,mCAAkB,CAAA,SAAA,EAAW,QAAQ,CAAA,CAAA;AAC3D,IAAA,MAAM,iBAAoB,GAAA;AAAA,MACxB,GAAG,KAAA;AAAA,MACH,8BAAgC,EAAA,OAAA;AAAA,KAClC,CAAA;AACA,IAAA,uBACGC,cAAA,CAAAC,qBAAA,EAAA;AAAA,MACC,SAAW,EAAAC,SAAA;AAAA,QACT,SAAA;AAAA,QACA,YAAa,EAAA;AAAA,QACb,aAAa,aAAa,CAAA;AAAA,QAC1B;AAAA,UACE,CAAC,YAAA,CAAa,WAAW,CAAA,GAAI,CAAC,CAAC,kBAAA;AAAA,UAC/B,CAAC,kBACG,GAAA,YAAA,CAAa,CAAa,UAAA,EAAA,kBAAA,CAAA,CAAoB,IAC9C,EAAK,GAAA,kBAAA;AAAA,SACX;AAAA,OACF;AAAA,MACA,GAAA;AAAA,MACA,SAAA;AAAA,MACA,KAAO,EAAA,iBAAA;AAAA,MACP,IAAM,EAAA,KAAA;AAAA,MACN,GAAK,EAAA,OAAA;AAAA,MACJ,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -4,18 +4,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
6
|
var icons$1 = require('@salt-ds/icons');
|
|
7
|
-
var
|
|
7
|
+
var clsx = require('clsx');
|
|
8
8
|
var React = require('react');
|
|
9
9
|
var makePrefixer = require('../utils/makePrefixer.js');
|
|
10
|
+
require('../utils/useFloatingUI.js');
|
|
10
11
|
require('../utils/useId.js');
|
|
11
12
|
require('../salt-provider/SaltProvider.js');
|
|
12
13
|
require('../viewport/ViewportProvider.js');
|
|
13
14
|
require('./StatusIndicator.css.js');
|
|
14
15
|
|
|
15
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
16
|
-
|
|
17
|
-
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
|
18
|
-
|
|
19
16
|
const icons = {
|
|
20
17
|
error: icons$1.ErrorSolidIcon,
|
|
21
18
|
success: icons$1.SuccessTickIcon,
|
|
@@ -34,7 +31,7 @@ const StatusIndicator = React.forwardRef(
|
|
|
34
31
|
const IconComponent = icons[status];
|
|
35
32
|
const ariaLabel = statusToAriaLabelMap[status];
|
|
36
33
|
return /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {
|
|
37
|
-
className:
|
|
34
|
+
className: clsx.clsx(withBaseName(), withBaseName(status), className),
|
|
38
35
|
size,
|
|
39
36
|
"aria-label": ariaLabel,
|
|
40
37
|
...restProps,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StatusIndicator.js","sources":["../src/status-indicator/StatusIndicator.tsx"],"sourcesContent":["import {\n DEFAULT_ICON_SIZE,\n ErrorSolidIcon,\n IconProps,\n InfoSolidIcon,\n SuccessTickIcon,\n WarningSolidIcon,\n} from \"@salt-ds/icons\";\nimport
|
|
1
|
+
{"version":3,"file":"StatusIndicator.js","sources":["../src/status-indicator/StatusIndicator.tsx"],"sourcesContent":["import {\n DEFAULT_ICON_SIZE,\n ErrorSolidIcon,\n IconProps,\n InfoSolidIcon,\n SuccessTickIcon,\n WarningSolidIcon,\n} from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport { forwardRef } from \"react\";\nimport { makePrefixer } from \"../utils\";\nimport { ValidationStatus } from \"./ValidationStatus\";\n\nimport \"./StatusIndicator.css\";\n\nconst icons = {\n error: ErrorSolidIcon,\n success: SuccessTickIcon,\n warning: WarningSolidIcon,\n info: InfoSolidIcon,\n};\n\nexport interface StatusIndicatorProps extends IconProps {\n /**\n * Status indicator to be displayed.\n */\n status: ValidationStatus;\n}\n\nconst statusToAriaLabelMap: Record<ValidationStatus, string> = {\n error: \"error\",\n success: \"success\",\n warning: \"warning\",\n info: \"info\",\n};\n\nconst withBaseName = makePrefixer(\"saltStatusIndicator\");\n\nexport const StatusIndicator = forwardRef<SVGSVGElement, StatusIndicatorProps>(\n function StatusIndicator(\n { className, status, size = DEFAULT_ICON_SIZE, ...restProps },\n ref\n ) {\n const IconComponent = icons[status];\n const ariaLabel = statusToAriaLabelMap[status];\n\n return (\n <IconComponent\n className={clsx(withBaseName(), withBaseName(status), className)}\n size={size}\n aria-label={ariaLabel}\n {...restProps}\n ref={ref}\n />\n );\n }\n);\n"],"names":["ErrorSolidIcon","SuccessTickIcon","WarningSolidIcon","InfoSolidIcon","makePrefixer","forwardRef","StatusIndicator","DEFAULT_ICON_SIZE","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;AAeA,MAAM,KAAQ,GAAA;AAAA,EACZ,KAAO,EAAAA,sBAAA;AAAA,EACP,OAAS,EAAAC,uBAAA;AAAA,EACT,OAAS,EAAAC,wBAAA;AAAA,EACT,IAAM,EAAAC,qBAAA;AACR,CAAA,CAAA;AASA,MAAM,oBAAyD,GAAA;AAAA,EAC7D,KAAO,EAAA,OAAA;AAAA,EACP,OAAS,EAAA,SAAA;AAAA,EACT,OAAS,EAAA,SAAA;AAAA,EACT,IAAM,EAAA,MAAA;AACR,CAAA,CAAA;AAEA,MAAM,YAAA,GAAeC,0BAAa,qBAAqB,CAAA,CAAA;AAEhD,MAAM,eAAkB,GAAAC,gBAAA;AAAA,EAC7B,SAASC,iBACP,EAAE,SAAA,EAAW,QAAQ,IAAO,GAAAC,yBAAA,EAAA,GAAsB,SAAU,EAAA,EAC5D,GACA,EAAA;AACA,IAAA,MAAM,gBAAgB,KAAM,CAAA,MAAA,CAAA,CAAA;AAC5B,IAAA,MAAM,YAAY,oBAAqB,CAAA,MAAA,CAAA,CAAA;AAEvC,IAAA,uBACGC,cAAA,CAAA,aAAA,EAAA;AAAA,MACC,WAAWC,SAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,MAAM,GAAG,SAAS,CAAA;AAAA,MAC/D,IAAA;AAAA,MACA,YAAY,EAAA,SAAA;AAAA,MACX,GAAG,SAAA;AAAA,MACJ,GAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -5,21 +5,18 @@ 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
|
var Text = require('./Text.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 Display1 = React.forwardRef(function Display12({ children, className, ...rest }, ref) {
|
|
20
17
|
return /* @__PURE__ */ jsxRuntime.jsx(Text.Text, {
|
|
21
18
|
as: "span",
|
|
22
|
-
className:
|
|
19
|
+
className: clsx.clsx(className, withBaseName(`display1`)),
|
|
23
20
|
ref,
|
|
24
21
|
...rest,
|
|
25
22
|
children
|
|
@@ -28,7 +25,7 @@ const Display1 = React.forwardRef(function Display12({ children, className, ...r
|
|
|
28
25
|
const Display2 = React.forwardRef(function Display22({ children, className, ...rest }, ref) {
|
|
29
26
|
return /* @__PURE__ */ jsxRuntime.jsx(Text.Text, {
|
|
30
27
|
as: "span",
|
|
31
|
-
className:
|
|
28
|
+
className: clsx.clsx(className, withBaseName(`display2`)),
|
|
32
29
|
ref,
|
|
33
30
|
...rest,
|
|
34
31
|
children
|
|
@@ -37,7 +34,7 @@ const Display2 = React.forwardRef(function Display22({ children, className, ...r
|
|
|
37
34
|
const Display3 = React.forwardRef(function Display32({ children, className, ...rest }, ref) {
|
|
38
35
|
return /* @__PURE__ */ jsxRuntime.jsx(Text.Text, {
|
|
39
36
|
as: "span",
|
|
40
|
-
className:
|
|
37
|
+
className: clsx.clsx(className, withBaseName(`display3`)),
|
|
41
38
|
ref,
|
|
42
39
|
...rest,
|
|
43
40
|
children
|