@salt-ds/lab 1.0.0-alpha.103 → 1.0.0-alpha.104
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +35 -0
- package/css/salt-lab.css +133 -106
- package/dist-cjs/avatar-group/AvatarGroup.css.js +6 -0
- package/dist-cjs/avatar-group/AvatarGroup.css.js.map +1 -0
- package/dist-cjs/avatar-group/AvatarGroup.js +31 -0
- package/dist-cjs/avatar-group/AvatarGroup.js.map +1 -0
- package/dist-cjs/avatar-group/AvatarGroupCount.css.js +6 -0
- package/dist-cjs/avatar-group/AvatarGroupCount.css.js.map +1 -0
- package/dist-cjs/avatar-group/AvatarGroupCount.js +39 -0
- package/dist-cjs/avatar-group/AvatarGroupCount.js.map +1 -0
- package/dist-cjs/color-chooser/DictTabs.js +9 -1
- package/dist-cjs/color-chooser/DictTabs.js.map +1 -1
- package/dist-cjs/common-hooks/useSelection.js.map +1 -1
- package/dist-cjs/index.js +4 -2
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/list/useList.js +2 -3
- package/dist-cjs/list/useList.js.map +1 -1
- package/dist-es/avatar-group/AvatarGroup.css.js +4 -0
- package/dist-es/avatar-group/AvatarGroup.css.js.map +1 -0
- package/dist-es/avatar-group/AvatarGroup.js +29 -0
- package/dist-es/avatar-group/AvatarGroup.js.map +1 -0
- package/dist-es/avatar-group/AvatarGroupCount.css.js +4 -0
- package/dist-es/avatar-group/AvatarGroupCount.css.js.map +1 -0
- package/dist-es/avatar-group/AvatarGroupCount.js +37 -0
- package/dist-es/avatar-group/AvatarGroupCount.js.map +1 -0
- package/dist-es/color-chooser/DictTabs.js +9 -1
- package/dist-es/color-chooser/DictTabs.js.map +1 -1
- package/dist-es/common-hooks/useSelection.js.map +1 -1
- package/dist-es/index.js +2 -1
- package/dist-es/index.js.map +1 -1
- package/dist-es/list/useList.js +2 -3
- package/dist-es/list/useList.js.map +1 -1
- package/dist-types/avatar-group/AvatarGroup.d.ts +14 -0
- package/dist-types/avatar-group/AvatarGroupCount.d.ts +15 -0
- package/dist-types/avatar-group/index.d.ts +2 -0
- package/dist-types/combo-box-deprecated/internal/useComboBox.d.ts +45 -45
- package/dist-types/combo-box-deprecated/internal/useMultiSelectComboBox.d.ts +91 -91
- package/dist-types/index.d.ts +1 -1
- package/package.json +11 -8
- package/dist-cjs/link-button/LinkButton.css.js +0 -6
- package/dist-cjs/link-button/LinkButton.css.js.map +0 -1
- package/dist-cjs/link-button/LinkButton.js +0 -78
- package/dist-cjs/link-button/LinkButton.js.map +0 -1
- package/dist-es/link-button/LinkButton.css.js +0 -4
- package/dist-es/link-button/LinkButton.css.js.map +0 -1
- package/dist-es/link-button/LinkButton.js +0 -76
- package/dist-es/link-button/LinkButton.js.map +0 -1
- package/dist-types/link-button/LinkButton.d.ts +0 -26
- package/dist-types/link-button/index.d.ts +0 -1
|
@@ -319,18 +319,58 @@ export declare const useMultiSelectComboBox: <Item>(props: Omit<UseMultiSelectCo
|
|
|
319
319
|
"aria-describedby"?: string | undefined;
|
|
320
320
|
};
|
|
321
321
|
onKeyDown: (event: KeyboardEvent<HTMLInputElement | HTMLButtonElement | HTMLDivElement>) => void;
|
|
322
|
+
disabled?: boolean | undefined;
|
|
322
323
|
children?: import("react").ReactNode;
|
|
323
|
-
nonce?: string | undefined | undefined;
|
|
324
324
|
slot?: string | undefined | undefined;
|
|
325
325
|
style?: import("react").CSSProperties | undefined;
|
|
326
326
|
title?: string | undefined | undefined;
|
|
327
|
-
|
|
328
|
-
|
|
327
|
+
dir?: string | undefined | undefined;
|
|
328
|
+
role?: import("react").AriaRole | undefined;
|
|
329
|
+
defaultChecked?: boolean | undefined | undefined;
|
|
330
|
+
defaultValue?: string | number | readonly string[] | undefined;
|
|
331
|
+
suppressContentEditableWarning?: boolean | undefined | undefined;
|
|
329
332
|
suppressHydrationWarning?: boolean | undefined | undefined;
|
|
330
|
-
|
|
333
|
+
accessKey?: string | undefined | undefined;
|
|
334
|
+
autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
|
|
335
|
+
autoFocus?: boolean | undefined | undefined;
|
|
336
|
+
className?: string | undefined | undefined;
|
|
337
|
+
contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
|
|
338
|
+
contextMenu?: string | undefined | undefined;
|
|
339
|
+
draggable?: (boolean | "true" | "false") | undefined;
|
|
340
|
+
enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
|
|
341
|
+
hidden?: boolean | undefined | undefined;
|
|
331
342
|
lang?: string | undefined | undefined;
|
|
332
|
-
|
|
343
|
+
nonce?: string | undefined | undefined;
|
|
344
|
+
spellCheck?: (boolean | "true" | "false") | undefined;
|
|
333
345
|
tabIndex?: number | undefined | undefined;
|
|
346
|
+
translate?: "yes" | "no" | undefined | undefined;
|
|
347
|
+
radioGroup?: string | undefined | undefined;
|
|
348
|
+
about?: string | undefined | undefined;
|
|
349
|
+
content?: string | undefined | undefined;
|
|
350
|
+
datatype?: string | undefined | undefined;
|
|
351
|
+
inlist?: any;
|
|
352
|
+
prefix?: string | undefined | undefined;
|
|
353
|
+
property?: string | undefined | undefined;
|
|
354
|
+
rel?: string | undefined | undefined;
|
|
355
|
+
resource?: string | undefined | undefined;
|
|
356
|
+
rev?: string | undefined | undefined;
|
|
357
|
+
typeof?: string | undefined | undefined;
|
|
358
|
+
vocab?: string | undefined | undefined;
|
|
359
|
+
autoCorrect?: string | undefined | undefined;
|
|
360
|
+
autoSave?: string | undefined | undefined;
|
|
361
|
+
color?: string | undefined | undefined;
|
|
362
|
+
itemProp?: string | undefined | undefined;
|
|
363
|
+
itemScope?: boolean | undefined | undefined;
|
|
364
|
+
itemType?: string | undefined | undefined;
|
|
365
|
+
itemID?: string | undefined | undefined;
|
|
366
|
+
itemRef?: string | undefined | undefined;
|
|
367
|
+
results?: number | undefined | undefined;
|
|
368
|
+
security?: string | undefined | undefined;
|
|
369
|
+
unselectable?: "on" | "off" | undefined | undefined;
|
|
370
|
+
inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
|
|
371
|
+
is?: string | undefined | undefined;
|
|
372
|
+
exportparts?: string | undefined | undefined;
|
|
373
|
+
part?: string | undefined | undefined;
|
|
334
374
|
"aria-activedescendant"?: string | undefined | undefined;
|
|
335
375
|
"aria-atomic"?: (boolean | "true" | "false") | undefined;
|
|
336
376
|
"aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
|
|
@@ -543,52 +583,12 @@ export declare const useMultiSelectComboBox: <Item>(props: Omit<UseMultiSelectCo
|
|
|
543
583
|
onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
|
|
544
584
|
onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
|
|
545
585
|
onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
|
|
546
|
-
defaultChecked?: boolean | undefined | undefined;
|
|
547
|
-
defaultValue?: string | number | readonly string[] | undefined;
|
|
548
|
-
suppressContentEditableWarning?: boolean | undefined | undefined;
|
|
549
|
-
accessKey?: string | undefined | undefined;
|
|
550
|
-
autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
|
|
551
|
-
autoFocus?: boolean | undefined | undefined;
|
|
552
|
-
contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
|
|
553
|
-
contextMenu?: string | undefined | undefined;
|
|
554
|
-
dir?: string | undefined | undefined;
|
|
555
|
-
draggable?: (boolean | "true" | "false") | undefined;
|
|
556
|
-
enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
|
|
557
|
-
hidden?: boolean | undefined | undefined;
|
|
558
|
-
spellCheck?: (boolean | "true" | "false") | undefined;
|
|
559
|
-
translate?: "yes" | "no" | undefined | undefined;
|
|
560
|
-
radioGroup?: string | undefined | undefined;
|
|
561
|
-
about?: string | undefined | undefined;
|
|
562
|
-
content?: string | undefined | undefined;
|
|
563
|
-
datatype?: string | undefined | undefined;
|
|
564
|
-
inlist?: any;
|
|
565
|
-
prefix?: string | undefined | undefined;
|
|
566
|
-
property?: string | undefined | undefined;
|
|
567
|
-
rel?: string | undefined | undefined;
|
|
568
|
-
resource?: string | undefined | undefined;
|
|
569
|
-
rev?: string | undefined | undefined;
|
|
570
|
-
typeof?: string | undefined | undefined;
|
|
571
|
-
vocab?: string | undefined | undefined;
|
|
572
|
-
autoCorrect?: string | undefined | undefined;
|
|
573
|
-
autoSave?: string | undefined | undefined;
|
|
574
|
-
itemProp?: string | undefined | undefined;
|
|
575
|
-
itemScope?: boolean | undefined | undefined;
|
|
576
|
-
itemType?: string | undefined | undefined;
|
|
577
|
-
itemID?: string | undefined | undefined;
|
|
578
|
-
itemRef?: string | undefined | undefined;
|
|
579
|
-
results?: number | undefined | undefined;
|
|
580
|
-
security?: string | undefined | undefined;
|
|
581
|
-
unselectable?: "on" | "off" | undefined | undefined;
|
|
582
|
-
inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
|
|
583
|
-
is?: string | undefined | undefined;
|
|
584
|
-
exportparts?: string | undefined | undefined;
|
|
585
|
-
part?: string | undefined | undefined;
|
|
586
586
|
expanded?: boolean | undefined;
|
|
587
587
|
focused?: boolean | undefined;
|
|
588
|
-
inputRef?: Ref<HTMLInputElement> | undefined;
|
|
589
588
|
itemToString?: import("../..").ItemToString<Item> | undefined;
|
|
590
589
|
highlightedIndex?: number | undefined;
|
|
591
590
|
onClear?: import("react").ReactEventHandler | undefined;
|
|
591
|
+
inputRef?: Ref<HTMLInputElement> | undefined;
|
|
592
592
|
onInputFocus?: import("react").FocusEventHandler<HTMLInputElement> | undefined;
|
|
593
593
|
onInputBlur?: import("react").FocusEventHandler<HTMLInputElement> | undefined;
|
|
594
594
|
onInputChange?: import("react").ChangeEventHandler<HTMLInputElement> | undefined;
|
|
@@ -635,18 +635,58 @@ export declare const useMultiSelectComboBox: <Item>(props: Omit<UseMultiSelectCo
|
|
|
635
635
|
restoreLastFocus?: boolean | undefined;
|
|
636
636
|
virtualized?: boolean | undefined;
|
|
637
637
|
width?: number | string | undefined;
|
|
638
|
+
id?: string | undefined | undefined;
|
|
638
639
|
children?: import("react").ReactNode;
|
|
639
|
-
nonce?: string | undefined | undefined;
|
|
640
640
|
slot?: string | undefined | undefined;
|
|
641
641
|
style?: import("react").CSSProperties | undefined;
|
|
642
642
|
title?: string | undefined | undefined;
|
|
643
|
-
|
|
643
|
+
dir?: string | undefined | undefined;
|
|
644
|
+
role: string;
|
|
645
|
+
defaultChecked?: boolean | undefined | undefined;
|
|
646
|
+
defaultValue?: string | number | readonly string[] | undefined;
|
|
647
|
+
suppressContentEditableWarning?: boolean | undefined | undefined;
|
|
644
648
|
suppressHydrationWarning?: boolean | undefined | undefined;
|
|
645
|
-
|
|
646
|
-
|
|
649
|
+
accessKey?: string | undefined | undefined;
|
|
650
|
+
autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
|
|
651
|
+
autoFocus?: boolean | undefined | undefined;
|
|
652
|
+
className?: string | undefined | undefined;
|
|
653
|
+
contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
|
|
654
|
+
contextMenu?: string | undefined | undefined;
|
|
655
|
+
draggable?: (boolean | "true" | "false") | undefined;
|
|
656
|
+
enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
|
|
657
|
+
hidden?: boolean | undefined | undefined;
|
|
647
658
|
lang?: string | undefined | undefined;
|
|
648
|
-
|
|
659
|
+
nonce?: string | undefined | undefined;
|
|
660
|
+
spellCheck?: (boolean | "true" | "false") | undefined;
|
|
649
661
|
tabIndex?: number | undefined | undefined;
|
|
662
|
+
translate?: "yes" | "no" | undefined | undefined;
|
|
663
|
+
radioGroup?: string | undefined | undefined;
|
|
664
|
+
about?: string | undefined | undefined;
|
|
665
|
+
content?: string | undefined | undefined;
|
|
666
|
+
datatype?: string | undefined | undefined;
|
|
667
|
+
inlist?: any;
|
|
668
|
+
prefix?: string | undefined | undefined;
|
|
669
|
+
property?: string | undefined | undefined;
|
|
670
|
+
rel?: string | undefined | undefined;
|
|
671
|
+
resource?: string | undefined | undefined;
|
|
672
|
+
rev?: string | undefined | undefined;
|
|
673
|
+
typeof?: string | undefined | undefined;
|
|
674
|
+
vocab?: string | undefined | undefined;
|
|
675
|
+
autoCorrect?: string | undefined | undefined;
|
|
676
|
+
autoSave?: string | undefined | undefined;
|
|
677
|
+
color?: string | undefined | undefined;
|
|
678
|
+
itemProp?: string | undefined | undefined;
|
|
679
|
+
itemScope?: boolean | undefined | undefined;
|
|
680
|
+
itemType?: string | undefined | undefined;
|
|
681
|
+
itemID?: string | undefined | undefined;
|
|
682
|
+
itemRef?: string | undefined | undefined;
|
|
683
|
+
results?: number | undefined | undefined;
|
|
684
|
+
security?: string | undefined | undefined;
|
|
685
|
+
unselectable?: "on" | "off" | undefined | undefined;
|
|
686
|
+
inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
|
|
687
|
+
is?: string | undefined | undefined;
|
|
688
|
+
exportparts?: string | undefined | undefined;
|
|
689
|
+
part?: string | undefined | undefined;
|
|
650
690
|
"aria-atomic"?: (boolean | "true" | "false") | undefined;
|
|
651
691
|
"aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
|
|
652
692
|
"aria-braillelabel"?: string | undefined | undefined;
|
|
@@ -857,45 +897,5 @@ export declare const useMultiSelectComboBox: <Item>(props: Omit<UseMultiSelectCo
|
|
|
857
897
|
onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
|
|
858
898
|
onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
|
|
859
899
|
onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
|
|
860
|
-
defaultChecked?: boolean | undefined | undefined;
|
|
861
|
-
defaultValue?: string | number | readonly string[] | undefined;
|
|
862
|
-
suppressContentEditableWarning?: boolean | undefined | undefined;
|
|
863
|
-
accessKey?: string | undefined | undefined;
|
|
864
|
-
autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
|
|
865
|
-
autoFocus?: boolean | undefined | undefined;
|
|
866
|
-
contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
|
|
867
|
-
contextMenu?: string | undefined | undefined;
|
|
868
|
-
dir?: string | undefined | undefined;
|
|
869
|
-
draggable?: (boolean | "true" | "false") | undefined;
|
|
870
|
-
enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
|
|
871
|
-
hidden?: boolean | undefined | undefined;
|
|
872
|
-
spellCheck?: (boolean | "true" | "false") | undefined;
|
|
873
|
-
translate?: "yes" | "no" | undefined | undefined;
|
|
874
|
-
radioGroup?: string | undefined | undefined;
|
|
875
|
-
about?: string | undefined | undefined;
|
|
876
|
-
content?: string | undefined | undefined;
|
|
877
|
-
datatype?: string | undefined | undefined;
|
|
878
|
-
inlist?: any;
|
|
879
|
-
prefix?: string | undefined | undefined;
|
|
880
|
-
property?: string | undefined | undefined;
|
|
881
|
-
rel?: string | undefined | undefined;
|
|
882
|
-
resource?: string | undefined | undefined;
|
|
883
|
-
rev?: string | undefined | undefined;
|
|
884
|
-
typeof?: string | undefined | undefined;
|
|
885
|
-
vocab?: string | undefined | undefined;
|
|
886
|
-
autoCorrect?: string | undefined | undefined;
|
|
887
|
-
autoSave?: string | undefined | undefined;
|
|
888
|
-
itemProp?: string | undefined | undefined;
|
|
889
|
-
itemScope?: boolean | undefined | undefined;
|
|
890
|
-
itemType?: string | undefined | undefined;
|
|
891
|
-
itemID?: string | undefined | undefined;
|
|
892
|
-
itemRef?: string | undefined | undefined;
|
|
893
|
-
results?: number | undefined | undefined;
|
|
894
|
-
security?: string | undefined | undefined;
|
|
895
|
-
unselectable?: "on" | "off" | undefined | undefined;
|
|
896
|
-
inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
|
|
897
|
-
is?: string | undefined | undefined;
|
|
898
|
-
exportparts?: string | undefined | undefined;
|
|
899
|
-
part?: string | undefined | undefined;
|
|
900
900
|
};
|
|
901
901
|
};
|
package/dist-types/index.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export * from "./app-header";
|
|
2
|
+
export * from "./avatar-group";
|
|
2
3
|
export * from "./button-bar";
|
|
3
4
|
export * from "./cascading-menu";
|
|
4
5
|
export * from "./color-chooser";
|
|
@@ -17,7 +18,6 @@ export * from "./form-group";
|
|
|
17
18
|
export * from "./formatted-input";
|
|
18
19
|
export { InputLegacy as Input, type InputLegacyProps as InputProps, StaticInputAdornment, } from "./input-legacy";
|
|
19
20
|
export * from "./layer-layout";
|
|
20
|
-
export * from "./link-button";
|
|
21
21
|
export * from "./list";
|
|
22
22
|
export type { ListChangeHandler as ListChangeHandlerDeprecated, ListSelectHandler as ListSelectHandlerDeprecated, } from "./list-deprecated";
|
|
23
23
|
export { ListItemBase as ListItemBaseDeprecated, useListItem as useListItemDeprecated, } from "./list-deprecated";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@salt-ds/lab",
|
|
3
|
-
"version": "1.0.0-alpha.
|
|
3
|
+
"version": "1.0.0-alpha.104",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -8,20 +8,23 @@
|
|
|
8
8
|
"directory": "packages/lab"
|
|
9
9
|
},
|
|
10
10
|
"bugs": "https://github.com/jpmorganchase/salt-ds/issues",
|
|
11
|
+
"forbiddenDependencies": [
|
|
12
|
+
"@salt-ds/lab"
|
|
13
|
+
],
|
|
11
14
|
"main": "dist-cjs/index.js",
|
|
15
|
+
"typings": "dist-types/index.d.ts",
|
|
12
16
|
"files": [
|
|
13
17
|
"css",
|
|
14
18
|
"dist-cjs",
|
|
15
19
|
"dist-es",
|
|
16
|
-
"dist-types"
|
|
17
|
-
"CHANGELOG.md"
|
|
20
|
+
"dist-types"
|
|
18
21
|
],
|
|
19
22
|
"sideEffects": [
|
|
20
23
|
"*.css"
|
|
21
24
|
],
|
|
22
25
|
"dependencies": {
|
|
23
26
|
"@floating-ui/react": "^0.27.19",
|
|
24
|
-
"@salt-ds/core": "^1.
|
|
27
|
+
"@salt-ds/core": "^1.71.0",
|
|
25
28
|
"@salt-ds/icons": "^1.18.2",
|
|
26
29
|
"@salt-ds/styles": "0.4.0",
|
|
27
30
|
"@salt-ds/window": "0.1.1",
|
|
@@ -46,13 +49,13 @@
|
|
|
46
49
|
}
|
|
47
50
|
},
|
|
48
51
|
"publishConfig": {
|
|
49
|
-
"
|
|
52
|
+
"main": "dist-cjs/index.js",
|
|
53
|
+
"module": "dist-es/index.js",
|
|
50
54
|
"provenance": true
|
|
51
55
|
},
|
|
52
56
|
"scripts": {
|
|
53
57
|
"build": "yarn node ../../scripts/build.mjs",
|
|
54
58
|
"bundle:css": "yarn node ./scripts/build.mjs"
|
|
55
59
|
},
|
|
56
|
-
"module": "dist-es/index.js"
|
|
57
|
-
|
|
58
|
-
}
|
|
60
|
+
"module": "dist-es/index.js"
|
|
61
|
+
}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var css_248z = ".saltLinkButton {\n --linkButton-borderWidth: var(--salt-size-fixed-100);\n\n align-items: var(--saltLinkButton-alignItems, center);\n appearance: none;\n background: var(--saltLinkButton-background, var(--linkButton-background));\n border-color: var(--saltLinkButton-borderColor, var(--linkButton-borderColor, transparent));\n border-style: var(--saltLinkButton-borderStyle, solid);\n border-width: var(--saltLinkButton-borderWidth, var(--linkButton-borderWidth));\n border-radius: var(--saltLinkButton-borderRadius, var(--salt-palette-corner-weak, 0));\n color: var(--saltLinkButton-text-color, var(--linkButton-text-color));\n display: inline-flex;\n gap: var(--salt-spacing-50);\n justify-content: var(--saltLinkButton-justifyContent, center);\n font-size: var(--saltLinkButton-fontSize, var(--salt-text-fontSize));\n font-family: var(--saltLinkButton-fontFamily, var(--salt-text-action-fontFamily));\n line-height: var(--saltLinkButton-lineHeight, var(--salt-text-lineHeight));\n letter-spacing: var(--saltLinkButton-letterSpacing, var(--salt-text-action-letterSpacing));\n text-transform: var(--saltLinkButton-textTransform, var(--salt-text-action-textTransform));\n padding: 0 var(--saltLinkButton-padding, calc(var(--salt-spacing-100) - var(--saltLinkButton-borderWidth, var(--linkButton-borderWidth))));\n margin: var(--saltLinkButton-margin, 0);\n height: var(--saltLinkButton-height, var(--salt-size-base));\n min-width: var(--saltLinkButton-minWidth, unset);\n position: relative;\n text-align: var(--saltLinkButton-textAlign, var(--salt-text-action-textAlign));\n text-decoration: var(--linkButton-textDecoration, var(--salt-text-link-textDecoration));\n text-underline-offset: var(--salt-spacing-fixed-200);\n transition: none;\n width: var(--saltLinkButton-width, auto);\n -webkit-appearance: none;\n -webkit-tap-highlight-color: transparent;\n /* Styles applied to align children*/\n font-weight: var(--saltLinkButton-fontWeight, var(--salt-text-action-fontWeight));\n}\n\n.saltLinkButton-underlineDefault {\n --linkButton-textDecoration: var(--salt-text-link-textDecoration);\n --linkButton-textDecoration-hover: var(--salt-typography-textDecoration-none);\n --linkButton-textDecoration-focus: var(--linkButton-textDecoration-hover);\n}\n\n.saltLinkButton-underlineNever {\n --linkButton-textDecoration: var(--salt-typography-textDecoration-none);\n --linkButton-textDecoration-hover: var(--salt-typography-textDecoration-none);\n --linkButton-textDecoration-focus: var(--salt-typography-textDecoration-none);\n}\n\n/* Class for ADA content - visually hidden but accessible to screen readers.\n Uses clip-path and prevents user selection so the text isn't included\n when users copy the link button's visible content. */\n.saltLinkButton-externalLinkADA {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n user-select: none;\n -webkit-user-select: none;\n}\n\n@media (hover: hover) {\n /* Pseudo-class applied to the root element on hover when LinkButton is not active or disabled */\n .saltLinkButton:hover {\n background: var(--saltLinkButton-background-hover, var(--linkButton-background-hover));\n color: var(--saltLinkButton-text-color-hover, var(--linkButton-text-color-hover));\n border-color: var(--saltLinkButton-borderColor-hover, var(--linkButton-borderColor-hover));\n cursor: var(--salt-cursor-hover);\n text-decoration: var(--linkButton-textDecoration-hover, var(--salt-typography-textDecoration-none));\n }\n}\n\n/* Pseudo-class applied to the root element on focus */\n.saltLinkButton:focus-visible {\n outline: var(--salt-focused-outline);\n\n background: var(--saltLinkButton-background-hover, var(--linkButton-background-hover));\n color: var(--saltLinkButton-text-color-hover, var(--linkButton-text-color-hover));\n border-color: var(--saltLinkButton-borderColor-hover, var(--linkButton-borderColor-hover));\n text-decoration: var(--linkButton-textDecoration-focus, var(--salt-typography-textDecoration-none));\n}\n\n/* Pseudo-class applied to the root element when LinkButton is active */\n.saltLinkButton.saltLinkButton-active:focus-visible,\n.saltLinkButton:focus-visible:active,\n.saltLinkButton:active,\n.saltLinkButton.saltLinkButton-active {\n background: var(--saltLinkButton-background-active, var(--linkButton-background-active));\n color: var(--saltLinkButton-text-color-active, var(--linkButton-text-color-active));\n border-color: var(--saltLinkButton-borderColor-active, var(--linkButton-borderColor-active));\n cursor: var(--salt-cursor-active);\n}\n\n.saltLinkButton-neutral {\n --linkButton-text-color: var(--salt-actionable-subtle-foreground);\n --linkButton-text-color-hover: var(--salt-actionable-subtle-foreground-hover);\n --linkButton-text-color-active: var(--salt-actionable-subtle-foreground-active);\n --linkButton-background: var(--salt-actionable-subtle-background);\n --linkButton-background-hover: var(--salt-actionable-subtle-background-hover);\n --linkButton-background-active: var(--salt-actionable-subtle-background-active);\n --linkButton-borderColor: var(--salt-actionable-subtle-borderColor);\n --linkButton-borderColor-hover: var(--salt-actionable-subtle-borderColor-hover);\n --linkButton-borderColor-active: var(--salt-actionable-subtle-borderColor-active);\n}\n\n.saltLinkButton-accented {\n --linkButton-text-color: var(--salt-actionable-accented-subtle-foreground);\n --linkButton-text-color-hover: var(--salt-actionable-accented-subtle-foreground-hover);\n --linkButton-text-color-active: var(--salt-actionable-accented-subtle-foreground-active);\n --linkButton-background: var(--salt-actionable-accented-subtle-background);\n --linkButton-background-hover: var(--salt-actionable-accented-subtle-background-hover);\n --linkButton-background-active: var(--salt-actionable-accented-subtle-background-active);\n --linkButton-borderColor: var(--salt-actionable-accented-subtle-borderColor);\n --linkButton-borderColor-hover: var(--salt-actionable-accented-subtle-borderColor-hover);\n --linkButton-borderColor-active: var(--salt-actionable-accented-subtle-borderColor-active);\n}\n";
|
|
4
|
-
|
|
5
|
-
module.exports = css_248z;
|
|
6
|
-
//# sourceMappingURL=LinkButton.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"LinkButton.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -1,78 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var core = require('@salt-ds/core');
|
|
5
|
-
var styles = require('@salt-ds/styles');
|
|
6
|
-
var window = require('@salt-ds/window');
|
|
7
|
-
var clsx = require('clsx');
|
|
8
|
-
var react = require('react');
|
|
9
|
-
var LinkButton$1 = require('./LinkButton.css.js');
|
|
10
|
-
|
|
11
|
-
const withBaseName = core.makePrefixer("saltLinkButton");
|
|
12
|
-
const LinkButton = react.forwardRef(
|
|
13
|
-
function LinkButton2(props, ref) {
|
|
14
|
-
const {
|
|
15
|
-
children,
|
|
16
|
-
className,
|
|
17
|
-
IconComponent,
|
|
18
|
-
onBlur,
|
|
19
|
-
onClick,
|
|
20
|
-
onKeyDown,
|
|
21
|
-
onKeyUp,
|
|
22
|
-
sentiment = "neutral",
|
|
23
|
-
target = "_self",
|
|
24
|
-
underline = "default",
|
|
25
|
-
...rest
|
|
26
|
-
} = props;
|
|
27
|
-
const { active, buttonProps } = core.useButton({
|
|
28
|
-
onBlur,
|
|
29
|
-
onClick,
|
|
30
|
-
onKeyDown,
|
|
31
|
-
onKeyUp
|
|
32
|
-
});
|
|
33
|
-
const { tabIndex: _tabIndex, ...activeStateProps } = buttonProps;
|
|
34
|
-
const targetWindow = window.useWindow();
|
|
35
|
-
styles.useComponentCssInjection({
|
|
36
|
-
testId: "salt-link-button",
|
|
37
|
-
css: LinkButton$1,
|
|
38
|
-
window: targetWindow
|
|
39
|
-
});
|
|
40
|
-
const { ExternalIcon } = core.useIcon();
|
|
41
|
-
const LinkButtonIconComponent = IconComponent === void 0 ? ExternalIcon : IconComponent;
|
|
42
|
-
const linkButton = core.renderProps("a", {
|
|
43
|
-
className: clsx.clsx(
|
|
44
|
-
withBaseName(),
|
|
45
|
-
withBaseName(sentiment),
|
|
46
|
-
withBaseName(`underline${core.capitalize(underline)}`),
|
|
47
|
-
{ [withBaseName("active")]: active },
|
|
48
|
-
className
|
|
49
|
-
),
|
|
50
|
-
...activeStateProps,
|
|
51
|
-
...rest,
|
|
52
|
-
ref,
|
|
53
|
-
target,
|
|
54
|
-
children
|
|
55
|
-
});
|
|
56
|
-
if (linkButton.props.target !== "_blank") {
|
|
57
|
-
return linkButton;
|
|
58
|
-
}
|
|
59
|
-
return react.cloneElement(
|
|
60
|
-
linkButton,
|
|
61
|
-
void 0,
|
|
62
|
-
/* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
63
|
-
linkButton.props.children,
|
|
64
|
-
LinkButtonIconComponent && /* @__PURE__ */ jsxRuntime.jsx(
|
|
65
|
-
LinkButtonIconComponent,
|
|
66
|
-
{
|
|
67
|
-
className: withBaseName("icon"),
|
|
68
|
-
"aria-hidden": true
|
|
69
|
-
}
|
|
70
|
-
),
|
|
71
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: withBaseName("externalLinkADA"), children: "Opens in a new tab" })
|
|
72
|
-
] })
|
|
73
|
-
);
|
|
74
|
-
}
|
|
75
|
-
);
|
|
76
|
-
|
|
77
|
-
exports.LinkButton = LinkButton;
|
|
78
|
-
//# sourceMappingURL=LinkButton.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"LinkButton.js","sources":["../src/link-button/LinkButton.tsx"],"sourcesContent":["import {\n capitalize,\n makePrefixer,\n type RenderPropsType,\n renderProps,\n useButton,\n useIcon,\n} from \"@salt-ds/core\";\nimport type { IconProps } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type ComponentType,\n cloneElement,\n forwardRef,\n} from \"react\";\n\nimport linkButtonCss from \"./LinkButton.css\";\n\nconst withBaseName = makePrefixer(\"saltLinkButton\");\n\nexport interface LinkButtonProps extends ComponentPropsWithoutRef<\"a\"> {\n /**\n * Icon component displayed when `target=\"_blank\"`. Defaults to `ExternalIcon` from `SemanticIconProvider`.\n */\n IconComponent?: ComponentType<IconProps> | null;\n /**\n * The sentiment of the button. Options are 'accented' and 'neutral'.\n * 'neutral' is the default value.\n */\n sentiment?: \"accented\" | \"neutral\";\n /**\n * Render prop to enable customisation of anchor element.\n */\n render?: RenderPropsType[\"render\"];\n /**\n * Either \"default\" or \"never\".\n * Determines when underline should be applied to the link button.\n *\n * @default \"default\".\n */\n underline?: \"default\" | \"never\";\n}\n\nexport const LinkButton = forwardRef<HTMLAnchorElement, LinkButtonProps>(\n function LinkButton(props, ref) {\n const {\n children,\n className,\n IconComponent,\n onBlur,\n onClick,\n onKeyDown,\n onKeyUp,\n sentiment = \"neutral\",\n target = \"_self\",\n underline = \"default\",\n ...rest\n } = props;\n\n const { active, buttonProps } = useButton<HTMLAnchorElement>({\n onBlur,\n onClick,\n onKeyDown,\n onKeyUp,\n });\n // Native anchors with an href do not require tabIndex=\"0\".\n const { tabIndex: _tabIndex, ...activeStateProps } = buttonProps;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-link-button\",\n css: linkButtonCss,\n window: targetWindow,\n });\n const { ExternalIcon } = useIcon();\n\n const LinkButtonIconComponent =\n IconComponent === undefined ? ExternalIcon : IconComponent;\n\n const linkButton = renderProps(\"a\", {\n className: clsx(\n withBaseName(),\n withBaseName(sentiment),\n withBaseName(`underline${capitalize(underline)}`),\n { [withBaseName(\"active\")]: active },\n className,\n ),\n ...activeStateProps,\n ...rest,\n ref,\n target,\n children,\n });\n\n if (linkButton.props.target !== \"_blank\") {\n return linkButton;\n }\n\n return cloneElement(\n linkButton,\n undefined,\n <>\n {linkButton.props.children}\n {LinkButtonIconComponent && (\n <LinkButtonIconComponent\n className={withBaseName(\"icon\")}\n aria-hidden\n />\n )}\n <span className={withBaseName(\"externalLinkADA\")}>\n Opens in a new tab\n </span>\n </>,\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","LinkButton","useButton","useWindow","useComponentCssInjection","linkButtonCss","useIcon","renderProps","clsx","capitalize","cloneElement","jsxs","Fragment","jsx"],"mappings":";;;;;;;;;;AAqBA,MAAM,YAAA,GAAeA,kBAAa,gBAAgB,CAAA;AAyB3C,MAAM,UAAA,GAAaC,gBAAA;AAAA,EACxB,SAASC,WAAAA,CAAW,KAAA,EAAO,GAAA,EAAK;AAC9B,IAAA,MAAM;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA,GAAY,SAAA;AAAA,MACZ,MAAA,GAAS,OAAA;AAAA,MACT,SAAA,GAAY,SAAA;AAAA,MACZ,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,MAAM,EAAE,MAAA,EAAQ,WAAA,EAAY,GAAIC,cAAA,CAA6B;AAAA,MAC3D,MAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,GAAG,kBAAiB,GAAI,WAAA;AAErD,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,kBAAA;AAAA,MACR,GAAA,EAAKC,YAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AACD,IAAA,MAAM,EAAE,YAAA,EAAa,GAAIC,YAAA,EAAQ;AAEjC,IAAA,MAAM,uBAAA,GACJ,aAAA,KAAkB,MAAA,GAAY,YAAA,GAAe,aAAA;AAE/C,IAAA,MAAM,UAAA,GAAaC,iBAAY,GAAA,EAAK;AAAA,MAClC,SAAA,EAAWC,SAAA;AAAA,QACT,YAAA,EAAa;AAAA,QACb,aAAa,SAAS,CAAA;AAAA,QACtB,YAAA,CAAa,CAAA,SAAA,EAAYC,eAAA,CAAW,SAAS,CAAC,CAAA,CAAE,CAAA;AAAA,QAChD,EAAE,CAAC,YAAA,CAAa,QAAQ,CAAC,GAAG,MAAA,EAAO;AAAA,QACnC;AAAA,OACF;AAAA,MACA,GAAG,gBAAA;AAAA,MACH,GAAG,IAAA;AAAA,MACH,GAAA;AAAA,MACA,MAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,IAAI,UAAA,CAAW,KAAA,CAAM,MAAA,KAAW,QAAA,EAAU;AACxC,MAAA,OAAO,UAAA;AAAA,IACT;AAEA,IAAA,OAAOC,kBAAA;AAAA,MACL,UAAA;AAAA,MACA,MAAA;AAAA,sBACAC,eAAA,CAAAC,mBAAA,EAAA,EACG,QAAA,EAAA;AAAA,QAAA,UAAA,CAAW,KAAA,CAAM,QAAA;AAAA,QACjB,uBAAA,oBACCC,cAAA;AAAA,UAAC,uBAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,YAC9B,aAAA,EAAW;AAAA;AAAA,SACb;AAAA,uCAED,MAAA,EAAA,EAAK,SAAA,EAAW,YAAA,CAAa,iBAAiB,GAAG,QAAA,EAAA,oBAAA,EAElD;AAAA,OAAA,EACF;AAAA,KACF;AAAA,EACF;AACF;;;;"}
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
var css_248z = ".saltLinkButton {\n --linkButton-borderWidth: var(--salt-size-fixed-100);\n\n align-items: var(--saltLinkButton-alignItems, center);\n appearance: none;\n background: var(--saltLinkButton-background, var(--linkButton-background));\n border-color: var(--saltLinkButton-borderColor, var(--linkButton-borderColor, transparent));\n border-style: var(--saltLinkButton-borderStyle, solid);\n border-width: var(--saltLinkButton-borderWidth, var(--linkButton-borderWidth));\n border-radius: var(--saltLinkButton-borderRadius, var(--salt-palette-corner-weak, 0));\n color: var(--saltLinkButton-text-color, var(--linkButton-text-color));\n display: inline-flex;\n gap: var(--salt-spacing-50);\n justify-content: var(--saltLinkButton-justifyContent, center);\n font-size: var(--saltLinkButton-fontSize, var(--salt-text-fontSize));\n font-family: var(--saltLinkButton-fontFamily, var(--salt-text-action-fontFamily));\n line-height: var(--saltLinkButton-lineHeight, var(--salt-text-lineHeight));\n letter-spacing: var(--saltLinkButton-letterSpacing, var(--salt-text-action-letterSpacing));\n text-transform: var(--saltLinkButton-textTransform, var(--salt-text-action-textTransform));\n padding: 0 var(--saltLinkButton-padding, calc(var(--salt-spacing-100) - var(--saltLinkButton-borderWidth, var(--linkButton-borderWidth))));\n margin: var(--saltLinkButton-margin, 0);\n height: var(--saltLinkButton-height, var(--salt-size-base));\n min-width: var(--saltLinkButton-minWidth, unset);\n position: relative;\n text-align: var(--saltLinkButton-textAlign, var(--salt-text-action-textAlign));\n text-decoration: var(--linkButton-textDecoration, var(--salt-text-link-textDecoration));\n text-underline-offset: var(--salt-spacing-fixed-200);\n transition: none;\n width: var(--saltLinkButton-width, auto);\n -webkit-appearance: none;\n -webkit-tap-highlight-color: transparent;\n /* Styles applied to align children*/\n font-weight: var(--saltLinkButton-fontWeight, var(--salt-text-action-fontWeight));\n}\n\n.saltLinkButton-underlineDefault {\n --linkButton-textDecoration: var(--salt-text-link-textDecoration);\n --linkButton-textDecoration-hover: var(--salt-typography-textDecoration-none);\n --linkButton-textDecoration-focus: var(--linkButton-textDecoration-hover);\n}\n\n.saltLinkButton-underlineNever {\n --linkButton-textDecoration: var(--salt-typography-textDecoration-none);\n --linkButton-textDecoration-hover: var(--salt-typography-textDecoration-none);\n --linkButton-textDecoration-focus: var(--salt-typography-textDecoration-none);\n}\n\n/* Class for ADA content - visually hidden but accessible to screen readers.\n Uses clip-path and prevents user selection so the text isn't included\n when users copy the link button's visible content. */\n.saltLinkButton-externalLinkADA {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n user-select: none;\n -webkit-user-select: none;\n}\n\n@media (hover: hover) {\n /* Pseudo-class applied to the root element on hover when LinkButton is not active or disabled */\n .saltLinkButton:hover {\n background: var(--saltLinkButton-background-hover, var(--linkButton-background-hover));\n color: var(--saltLinkButton-text-color-hover, var(--linkButton-text-color-hover));\n border-color: var(--saltLinkButton-borderColor-hover, var(--linkButton-borderColor-hover));\n cursor: var(--salt-cursor-hover);\n text-decoration: var(--linkButton-textDecoration-hover, var(--salt-typography-textDecoration-none));\n }\n}\n\n/* Pseudo-class applied to the root element on focus */\n.saltLinkButton:focus-visible {\n outline: var(--salt-focused-outline);\n\n background: var(--saltLinkButton-background-hover, var(--linkButton-background-hover));\n color: var(--saltLinkButton-text-color-hover, var(--linkButton-text-color-hover));\n border-color: var(--saltLinkButton-borderColor-hover, var(--linkButton-borderColor-hover));\n text-decoration: var(--linkButton-textDecoration-focus, var(--salt-typography-textDecoration-none));\n}\n\n/* Pseudo-class applied to the root element when LinkButton is active */\n.saltLinkButton.saltLinkButton-active:focus-visible,\n.saltLinkButton:focus-visible:active,\n.saltLinkButton:active,\n.saltLinkButton.saltLinkButton-active {\n background: var(--saltLinkButton-background-active, var(--linkButton-background-active));\n color: var(--saltLinkButton-text-color-active, var(--linkButton-text-color-active));\n border-color: var(--saltLinkButton-borderColor-active, var(--linkButton-borderColor-active));\n cursor: var(--salt-cursor-active);\n}\n\n.saltLinkButton-neutral {\n --linkButton-text-color: var(--salt-actionable-subtle-foreground);\n --linkButton-text-color-hover: var(--salt-actionable-subtle-foreground-hover);\n --linkButton-text-color-active: var(--salt-actionable-subtle-foreground-active);\n --linkButton-background: var(--salt-actionable-subtle-background);\n --linkButton-background-hover: var(--salt-actionable-subtle-background-hover);\n --linkButton-background-active: var(--salt-actionable-subtle-background-active);\n --linkButton-borderColor: var(--salt-actionable-subtle-borderColor);\n --linkButton-borderColor-hover: var(--salt-actionable-subtle-borderColor-hover);\n --linkButton-borderColor-active: var(--salt-actionable-subtle-borderColor-active);\n}\n\n.saltLinkButton-accented {\n --linkButton-text-color: var(--salt-actionable-accented-subtle-foreground);\n --linkButton-text-color-hover: var(--salt-actionable-accented-subtle-foreground-hover);\n --linkButton-text-color-active: var(--salt-actionable-accented-subtle-foreground-active);\n --linkButton-background: var(--salt-actionable-accented-subtle-background);\n --linkButton-background-hover: var(--salt-actionable-accented-subtle-background-hover);\n --linkButton-background-active: var(--salt-actionable-accented-subtle-background-active);\n --linkButton-borderColor: var(--salt-actionable-accented-subtle-borderColor);\n --linkButton-borderColor-hover: var(--salt-actionable-accented-subtle-borderColor-hover);\n --linkButton-borderColor-active: var(--salt-actionable-accented-subtle-borderColor-active);\n}\n";
|
|
2
|
-
|
|
3
|
-
export { css_248z as default };
|
|
4
|
-
//# sourceMappingURL=LinkButton.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"LinkButton.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -1,76 +0,0 @@
|
|
|
1
|
-
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { makePrefixer, useButton, useIcon, renderProps, capitalize } from '@salt-ds/core';
|
|
3
|
-
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
4
|
-
import { useWindow } from '@salt-ds/window';
|
|
5
|
-
import { clsx } from 'clsx';
|
|
6
|
-
import { forwardRef, cloneElement } from 'react';
|
|
7
|
-
import css_248z from './LinkButton.css.js';
|
|
8
|
-
|
|
9
|
-
const withBaseName = makePrefixer("saltLinkButton");
|
|
10
|
-
const LinkButton = forwardRef(
|
|
11
|
-
function LinkButton2(props, ref) {
|
|
12
|
-
const {
|
|
13
|
-
children,
|
|
14
|
-
className,
|
|
15
|
-
IconComponent,
|
|
16
|
-
onBlur,
|
|
17
|
-
onClick,
|
|
18
|
-
onKeyDown,
|
|
19
|
-
onKeyUp,
|
|
20
|
-
sentiment = "neutral",
|
|
21
|
-
target = "_self",
|
|
22
|
-
underline = "default",
|
|
23
|
-
...rest
|
|
24
|
-
} = props;
|
|
25
|
-
const { active, buttonProps } = useButton({
|
|
26
|
-
onBlur,
|
|
27
|
-
onClick,
|
|
28
|
-
onKeyDown,
|
|
29
|
-
onKeyUp
|
|
30
|
-
});
|
|
31
|
-
const { tabIndex: _tabIndex, ...activeStateProps } = buttonProps;
|
|
32
|
-
const targetWindow = useWindow();
|
|
33
|
-
useComponentCssInjection({
|
|
34
|
-
testId: "salt-link-button",
|
|
35
|
-
css: css_248z,
|
|
36
|
-
window: targetWindow
|
|
37
|
-
});
|
|
38
|
-
const { ExternalIcon } = useIcon();
|
|
39
|
-
const LinkButtonIconComponent = IconComponent === void 0 ? ExternalIcon : IconComponent;
|
|
40
|
-
const linkButton = renderProps("a", {
|
|
41
|
-
className: clsx(
|
|
42
|
-
withBaseName(),
|
|
43
|
-
withBaseName(sentiment),
|
|
44
|
-
withBaseName(`underline${capitalize(underline)}`),
|
|
45
|
-
{ [withBaseName("active")]: active },
|
|
46
|
-
className
|
|
47
|
-
),
|
|
48
|
-
...activeStateProps,
|
|
49
|
-
...rest,
|
|
50
|
-
ref,
|
|
51
|
-
target,
|
|
52
|
-
children
|
|
53
|
-
});
|
|
54
|
-
if (linkButton.props.target !== "_blank") {
|
|
55
|
-
return linkButton;
|
|
56
|
-
}
|
|
57
|
-
return cloneElement(
|
|
58
|
-
linkButton,
|
|
59
|
-
void 0,
|
|
60
|
-
/* @__PURE__ */ jsxs(Fragment, { children: [
|
|
61
|
-
linkButton.props.children,
|
|
62
|
-
LinkButtonIconComponent && /* @__PURE__ */ jsx(
|
|
63
|
-
LinkButtonIconComponent,
|
|
64
|
-
{
|
|
65
|
-
className: withBaseName("icon"),
|
|
66
|
-
"aria-hidden": true
|
|
67
|
-
}
|
|
68
|
-
),
|
|
69
|
-
/* @__PURE__ */ jsx("span", { className: withBaseName("externalLinkADA"), children: "Opens in a new tab" })
|
|
70
|
-
] })
|
|
71
|
-
);
|
|
72
|
-
}
|
|
73
|
-
);
|
|
74
|
-
|
|
75
|
-
export { LinkButton };
|
|
76
|
-
//# sourceMappingURL=LinkButton.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"LinkButton.js","sources":["../src/link-button/LinkButton.tsx"],"sourcesContent":["import {\n capitalize,\n makePrefixer,\n type RenderPropsType,\n renderProps,\n useButton,\n useIcon,\n} from \"@salt-ds/core\";\nimport type { IconProps } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type ComponentType,\n cloneElement,\n forwardRef,\n} from \"react\";\n\nimport linkButtonCss from \"./LinkButton.css\";\n\nconst withBaseName = makePrefixer(\"saltLinkButton\");\n\nexport interface LinkButtonProps extends ComponentPropsWithoutRef<\"a\"> {\n /**\n * Icon component displayed when `target=\"_blank\"`. Defaults to `ExternalIcon` from `SemanticIconProvider`.\n */\n IconComponent?: ComponentType<IconProps> | null;\n /**\n * The sentiment of the button. Options are 'accented' and 'neutral'.\n * 'neutral' is the default value.\n */\n sentiment?: \"accented\" | \"neutral\";\n /**\n * Render prop to enable customisation of anchor element.\n */\n render?: RenderPropsType[\"render\"];\n /**\n * Either \"default\" or \"never\".\n * Determines when underline should be applied to the link button.\n *\n * @default \"default\".\n */\n underline?: \"default\" | \"never\";\n}\n\nexport const LinkButton = forwardRef<HTMLAnchorElement, LinkButtonProps>(\n function LinkButton(props, ref) {\n const {\n children,\n className,\n IconComponent,\n onBlur,\n onClick,\n onKeyDown,\n onKeyUp,\n sentiment = \"neutral\",\n target = \"_self\",\n underline = \"default\",\n ...rest\n } = props;\n\n const { active, buttonProps } = useButton<HTMLAnchorElement>({\n onBlur,\n onClick,\n onKeyDown,\n onKeyUp,\n });\n // Native anchors with an href do not require tabIndex=\"0\".\n const { tabIndex: _tabIndex, ...activeStateProps } = buttonProps;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-link-button\",\n css: linkButtonCss,\n window: targetWindow,\n });\n const { ExternalIcon } = useIcon();\n\n const LinkButtonIconComponent =\n IconComponent === undefined ? ExternalIcon : IconComponent;\n\n const linkButton = renderProps(\"a\", {\n className: clsx(\n withBaseName(),\n withBaseName(sentiment),\n withBaseName(`underline${capitalize(underline)}`),\n { [withBaseName(\"active\")]: active },\n className,\n ),\n ...activeStateProps,\n ...rest,\n ref,\n target,\n children,\n });\n\n if (linkButton.props.target !== \"_blank\") {\n return linkButton;\n }\n\n return cloneElement(\n linkButton,\n undefined,\n <>\n {linkButton.props.children}\n {LinkButtonIconComponent && (\n <LinkButtonIconComponent\n className={withBaseName(\"icon\")}\n aria-hidden\n />\n )}\n <span className={withBaseName(\"externalLinkADA\")}>\n Opens in a new tab\n </span>\n </>,\n );\n },\n);\n"],"names":["LinkButton","linkButtonCss"],"mappings":";;;;;;;;AAqBA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA;AAyB3C,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,SAASA,WAAAA,CAAW,KAAA,EAAO,GAAA,EAAK;AAC9B,IAAA,MAAM;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA,GAAY,SAAA;AAAA,MACZ,MAAA,GAAS,OAAA;AAAA,MACT,SAAA,GAAY,SAAA;AAAA,MACZ,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,MAAM,EAAE,MAAA,EAAQ,WAAA,EAAY,GAAI,SAAA,CAA6B;AAAA,MAC3D,MAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,GAAG,kBAAiB,GAAI,WAAA;AAErD,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,kBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AACD,IAAA,MAAM,EAAE,YAAA,EAAa,GAAI,OAAA,EAAQ;AAEjC,IAAA,MAAM,uBAAA,GACJ,aAAA,KAAkB,MAAA,GAAY,YAAA,GAAe,aAAA;AAE/C,IAAA,MAAM,UAAA,GAAa,YAAY,GAAA,EAAK;AAAA,MAClC,SAAA,EAAW,IAAA;AAAA,QACT,YAAA,EAAa;AAAA,QACb,aAAa,SAAS,CAAA;AAAA,QACtB,YAAA,CAAa,CAAA,SAAA,EAAY,UAAA,CAAW,SAAS,CAAC,CAAA,CAAE,CAAA;AAAA,QAChD,EAAE,CAAC,YAAA,CAAa,QAAQ,CAAC,GAAG,MAAA,EAAO;AAAA,QACnC;AAAA,OACF;AAAA,MACA,GAAG,gBAAA;AAAA,MACH,GAAG,IAAA;AAAA,MACH,GAAA;AAAA,MACA,MAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,IAAI,UAAA,CAAW,KAAA,CAAM,MAAA,KAAW,QAAA,EAAU;AACxC,MAAA,OAAO,UAAA;AAAA,IACT;AAEA,IAAA,OAAO,YAAA;AAAA,MACL,UAAA;AAAA,MACA,MAAA;AAAA,sBACA,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,QAAA,UAAA,CAAW,KAAA,CAAM,QAAA;AAAA,QACjB,uBAAA,oBACC,GAAA;AAAA,UAAC,uBAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,YAC9B,aAAA,EAAW;AAAA;AAAA,SACb;AAAA,4BAED,MAAA,EAAA,EAAK,SAAA,EAAW,YAAA,CAAa,iBAAiB,GAAG,QAAA,EAAA,oBAAA,EAElD;AAAA,OAAA,EACF;AAAA,KACF;AAAA,EACF;AACF;;;;"}
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import { type RenderPropsType } from "@salt-ds/core";
|
|
2
|
-
import type { IconProps } from "@salt-ds/icons";
|
|
3
|
-
import { type ComponentPropsWithoutRef, type ComponentType } from "react";
|
|
4
|
-
export interface LinkButtonProps extends ComponentPropsWithoutRef<"a"> {
|
|
5
|
-
/**
|
|
6
|
-
* Icon component displayed when `target="_blank"`. Defaults to `ExternalIcon` from `SemanticIconProvider`.
|
|
7
|
-
*/
|
|
8
|
-
IconComponent?: ComponentType<IconProps> | null;
|
|
9
|
-
/**
|
|
10
|
-
* The sentiment of the button. Options are 'accented' and 'neutral'.
|
|
11
|
-
* 'neutral' is the default value.
|
|
12
|
-
*/
|
|
13
|
-
sentiment?: "accented" | "neutral";
|
|
14
|
-
/**
|
|
15
|
-
* Render prop to enable customisation of anchor element.
|
|
16
|
-
*/
|
|
17
|
-
render?: RenderPropsType["render"];
|
|
18
|
-
/**
|
|
19
|
-
* Either "default" or "never".
|
|
20
|
-
* Determines when underline should be applied to the link button.
|
|
21
|
-
*
|
|
22
|
-
* @default "default".
|
|
23
|
-
*/
|
|
24
|
-
underline?: "default" | "never";
|
|
25
|
-
}
|
|
26
|
-
export declare const LinkButton: import("react").ForwardRefExoticComponent<LinkButtonProps & import("react").RefAttributes<HTMLAnchorElement>>;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./LinkButton";
|