@salt-ds/lab 1.0.0-alpha.27 → 1.0.0-alpha.28

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.
Files changed (122) hide show
  1. package/css/salt-lab.css +1 -200
  2. package/dist-cjs/index.js +0 -14
  3. package/dist-cjs/index.js.map +1 -1
  4. package/dist-cjs/layer-layout/LayerLayout.js +1 -2
  5. package/dist-cjs/layer-layout/LayerLayout.js.map +1 -1
  6. package/dist-es/index.js +0 -7
  7. package/dist-es/index.js.map +1 -1
  8. package/dist-es/layer-layout/LayerLayout.js +1 -2
  9. package/dist-es/layer-layout/LayerLayout.js.map +1 -1
  10. package/dist-types/index.d.ts +0 -3
  11. package/dist-types/layer-layout/LayerLayout.d.ts +1 -1
  12. package/package.json +2 -2
  13. package/dist-cjs/navigation-item/ConditionalWrapper.js +0 -35
  14. package/dist-cjs/navigation-item/ConditionalWrapper.js.map +0 -1
  15. package/dist-cjs/navigation-item/ExpansionIcon.js +0 -29
  16. package/dist-cjs/navigation-item/ExpansionIcon.js.map +0 -1
  17. package/dist-cjs/navigation-item/NavigationItem.css.js +0 -6
  18. package/dist-cjs/navigation-item/NavigationItem.css.js.map +0 -1
  19. package/dist-cjs/navigation-item/NavigationItem.js +0 -78
  20. package/dist-cjs/navigation-item/NavigationItem.js.map +0 -1
  21. package/dist-cjs/pagination/CompactInput.css.js +0 -6
  22. package/dist-cjs/pagination/CompactInput.css.js.map +0 -1
  23. package/dist-cjs/pagination/CompactInput.js +0 -62
  24. package/dist-cjs/pagination/CompactInput.js.map +0 -1
  25. package/dist-cjs/pagination/CompactPaginator.css.js +0 -6
  26. package/dist-cjs/pagination/CompactPaginator.css.js.map +0 -1
  27. package/dist-cjs/pagination/CompactPaginator.js +0 -76
  28. package/dist-cjs/pagination/CompactPaginator.js.map +0 -1
  29. package/dist-cjs/pagination/GoToInput.css.js +0 -6
  30. package/dist-cjs/pagination/GoToInput.css.js.map +0 -1
  31. package/dist-cjs/pagination/GoToInput.js +0 -77
  32. package/dist-cjs/pagination/GoToInput.js.map +0 -1
  33. package/dist-cjs/pagination/PageButton.css.js +0 -6
  34. package/dist-cjs/pagination/PageButton.css.js.map +0 -1
  35. package/dist-cjs/pagination/PageButton.js +0 -44
  36. package/dist-cjs/pagination/PageButton.js.map +0 -1
  37. package/dist-cjs/pagination/PageRanges.css.js +0 -6
  38. package/dist-cjs/pagination/PageRanges.css.js.map +0 -1
  39. package/dist-cjs/pagination/PageRanges.js +0 -73
  40. package/dist-cjs/pagination/PageRanges.js.map +0 -1
  41. package/dist-cjs/pagination/Pagination.css.js +0 -6
  42. package/dist-cjs/pagination/Pagination.css.js.map +0 -1
  43. package/dist-cjs/pagination/Pagination.js +0 -78
  44. package/dist-cjs/pagination/Pagination.js.map +0 -1
  45. package/dist-cjs/pagination/PaginationContext.js +0 -17
  46. package/dist-cjs/pagination/PaginationContext.js.map +0 -1
  47. package/dist-cjs/pagination/Paginator.css.js +0 -6
  48. package/dist-cjs/pagination/Paginator.css.js.map +0 -1
  49. package/dist-cjs/pagination/Paginator.js +0 -69
  50. package/dist-cjs/pagination/Paginator.js.map +0 -1
  51. package/dist-cjs/pagination/usePagination.js +0 -27
  52. package/dist-cjs/pagination/usePagination.js.map +0 -1
  53. package/dist-cjs/pagination/usePaginationContext.js +0 -19
  54. package/dist-cjs/pagination/usePaginationContext.js.map +0 -1
  55. package/dist-cjs/scrim/Scrim.css.js +0 -6
  56. package/dist-cjs/scrim/Scrim.css.js.map +0 -1
  57. package/dist-cjs/scrim/Scrim.js +0 -40
  58. package/dist-cjs/scrim/Scrim.js.map +0 -1
  59. package/dist-es/navigation-item/ConditionalWrapper.js +0 -31
  60. package/dist-es/navigation-item/ConditionalWrapper.js.map +0 -1
  61. package/dist-es/navigation-item/ExpansionIcon.js +0 -25
  62. package/dist-es/navigation-item/ExpansionIcon.js.map +0 -1
  63. package/dist-es/navigation-item/NavigationItem.css.js +0 -4
  64. package/dist-es/navigation-item/NavigationItem.css.js.map +0 -1
  65. package/dist-es/navigation-item/NavigationItem.js +0 -74
  66. package/dist-es/navigation-item/NavigationItem.js.map +0 -1
  67. package/dist-es/pagination/CompactInput.css.js +0 -4
  68. package/dist-es/pagination/CompactInput.css.js.map +0 -1
  69. package/dist-es/pagination/CompactInput.js +0 -58
  70. package/dist-es/pagination/CompactInput.js.map +0 -1
  71. package/dist-es/pagination/CompactPaginator.css.js +0 -4
  72. package/dist-es/pagination/CompactPaginator.css.js.map +0 -1
  73. package/dist-es/pagination/CompactPaginator.js +0 -72
  74. package/dist-es/pagination/CompactPaginator.js.map +0 -1
  75. package/dist-es/pagination/GoToInput.css.js +0 -4
  76. package/dist-es/pagination/GoToInput.css.js.map +0 -1
  77. package/dist-es/pagination/GoToInput.js +0 -73
  78. package/dist-es/pagination/GoToInput.js.map +0 -1
  79. package/dist-es/pagination/PageButton.css.js +0 -4
  80. package/dist-es/pagination/PageButton.css.js.map +0 -1
  81. package/dist-es/pagination/PageButton.js +0 -40
  82. package/dist-es/pagination/PageButton.js.map +0 -1
  83. package/dist-es/pagination/PageRanges.css.js +0 -4
  84. package/dist-es/pagination/PageRanges.css.js.map +0 -1
  85. package/dist-es/pagination/PageRanges.js +0 -69
  86. package/dist-es/pagination/PageRanges.js.map +0 -1
  87. package/dist-es/pagination/Pagination.css.js +0 -4
  88. package/dist-es/pagination/Pagination.css.js.map +0 -1
  89. package/dist-es/pagination/Pagination.js +0 -74
  90. package/dist-es/pagination/Pagination.js.map +0 -1
  91. package/dist-es/pagination/PaginationContext.js +0 -13
  92. package/dist-es/pagination/PaginationContext.js.map +0 -1
  93. package/dist-es/pagination/Paginator.css.js +0 -4
  94. package/dist-es/pagination/Paginator.css.js.map +0 -1
  95. package/dist-es/pagination/Paginator.js +0 -65
  96. package/dist-es/pagination/Paginator.js.map +0 -1
  97. package/dist-es/pagination/usePagination.js +0 -23
  98. package/dist-es/pagination/usePagination.js.map +0 -1
  99. package/dist-es/pagination/usePaginationContext.js +0 -15
  100. package/dist-es/pagination/usePaginationContext.js.map +0 -1
  101. package/dist-es/scrim/Scrim.css.js +0 -4
  102. package/dist-es/scrim/Scrim.css.js.map +0 -1
  103. package/dist-es/scrim/Scrim.js +0 -36
  104. package/dist-es/scrim/Scrim.js.map +0 -1
  105. package/dist-types/navigation-item/ConditionalWrapper.d.ts +0 -8
  106. package/dist-types/navigation-item/ExpansionIcon.d.ts +0 -2
  107. package/dist-types/navigation-item/NavigationItem.d.ts +0 -36
  108. package/dist-types/navigation-item/index.d.ts +0 -1
  109. package/dist-types/pagination/CompactInput.d.ts +0 -2
  110. package/dist-types/pagination/CompactPaginator.d.ts +0 -1
  111. package/dist-types/pagination/GoToInput.d.ts +0 -16
  112. package/dist-types/pagination/PageButton.d.ts +0 -6
  113. package/dist-types/pagination/PageRanges.d.ts +0 -5
  114. package/dist-types/pagination/Pagination.d.ts +0 -20
  115. package/dist-types/pagination/PaginationContext.d.ts +0 -7
  116. package/dist-types/pagination/Paginator.d.ts +0 -12
  117. package/dist-types/pagination/index.d.ts +0 -5
  118. package/dist-types/pagination/usePagination.d.ts +0 -2
  119. package/dist-types/pagination/usePaginationContext.d.ts +0 -1
  120. package/dist-types/scrim/Scrim.d.ts +0 -13
  121. package/dist-types/scrim/index.d.ts +0 -1
  122. package/dist-types/scrim/internal/PreventFocus.d.ts +0 -1
package/css/salt-lab.css CHANGED
@@ -2362,86 +2362,6 @@
2362
2362
  align-items: flex-end;
2363
2363
  }
2364
2364
 
2365
- /* src/navigation-item/NavigationItem.css */
2366
- .saltNavigationItem-wrapper {
2367
- display: flex;
2368
- gap: var(--salt-spacing-100);
2369
- align-items: center;
2370
- position: relative;
2371
- background: none;
2372
- border: none;
2373
- font-size: var(--salt-text-fontSize);
2374
- text-decoration: none;
2375
- cursor: var(--salt-selectable-cursor-hover);
2376
- transition: all var(--salt-duration-instant) ease-in-out;
2377
- }
2378
- .saltNavigationItem-rootItem {
2379
- font-weight: var(--salt-text-fontWeight-strong);
2380
- }
2381
- .saltNavigationItem-label .saltIcon {
2382
- top: var(--salt-spacing-25);
2383
- }
2384
- .saltNavigationItem-horizontal {
2385
- min-height: calc(var(--salt-size-base) + var(--salt-spacing-100) * 2);
2386
- padding: 0 var(--salt-spacing-100);
2387
- width: fit-content;
2388
- }
2389
- .saltNavigationItem-vertical {
2390
- min-height: calc(var(--salt-size-base) + var(--salt-spacing-50) * 2);
2391
- padding-top: 0;
2392
- padding-bottom: 0;
2393
- padding-right: var(--salt-spacing-100);
2394
- padding-left: calc(var(--salt-spacing-300) * (min(var(--saltNavigationItem-level, 0) + 1, 2)));
2395
- width: 100%;
2396
- }
2397
- .saltNavigationItem-label {
2398
- color: var(--salt-content-primary-foreground);
2399
- line-height: var(--salt-text-lineHeight);
2400
- font-family: var(--salt-text-fontFamily);
2401
- padding-left: calc(var(--saltNavigationItem-level, 0) * var(--salt-spacing-100));
2402
- flex: 1;
2403
- text-align: left;
2404
- display: flex;
2405
- align-items: baseline;
2406
- gap: var(--salt-spacing-100);
2407
- }
2408
- .saltNavigationItem-label .saltBadge {
2409
- margin-left: auto;
2410
- }
2411
- .saltNavigationItem-wrapper:focus-visible {
2412
- outline: var(--salt-focused-outline);
2413
- }
2414
- .saltNavigationItem-wrapper:focus:not(:focus-visible) {
2415
- outline: 0;
2416
- }
2417
- .saltNavigationItem-wrapper::after {
2418
- content: "";
2419
- position: absolute;
2420
- top: var(--salt-spacing-25);
2421
- left: 0;
2422
- display: block;
2423
- }
2424
- .saltNavigationItem-horizontal::after {
2425
- width: 100%;
2426
- height: var(--salt-size-indicator);
2427
- }
2428
- .saltNavigationItem-vertical::after {
2429
- width: var(--salt-size-indicator);
2430
- left: var(--salt-spacing-25);
2431
- height: calc(100% - var(--salt-spacing-50));
2432
- }
2433
- .saltNavigationItem-wrapper:hover::after,
2434
- .saltNavigationItem-wrapper:focus-visible::after {
2435
- background: var(--salt-navigable-indicator-hover);
2436
- transition: all var(--salt-duration-perceptible) ease-in-out;
2437
- }
2438
- .saltNavigationItem-active::after,
2439
- .saltNavigationItem-active:hover::after,
2440
- .saltNavigationItem-active:focus::after {
2441
- background: var(--salt-navigable-indicator-active);
2442
- transition: all var(--salt-duration-perceptible) ease-in-out;
2443
- }
2444
-
2445
2365
  /* src/option/Option.css */
2446
2366
  .saltOption {
2447
2367
  color: var(--salt-content-primary-foreground);
@@ -2589,102 +2509,6 @@
2589
2509
  z-index: var(--salt-zIndex-default);
2590
2510
  }
2591
2511
 
2592
- /* src/pagination/CompactInput.css */
2593
- .saltCompactInput {
2594
- --saltInput-paddingLeft: 0;
2595
- --saltInput-paddingRight: 0;
2596
- }
2597
- .saltCompactInput-defaultSize.saltInput {
2598
- --saltInput-minWidth: var(--salt-size-base);
2599
- width: var(--salt-size-base);
2600
- }
2601
-
2602
- /* src/pagination/CompactPaginator.css */
2603
- .saltCompactPaginator {
2604
- flex-wrap: nowrap;
2605
- display: flex;
2606
- gap: var(--salt-spacing-100);
2607
- align-items: center;
2608
- }
2609
- .saltCompactPaginator-arrowButton {
2610
- --saltButton-width: var(--salt-size-base);
2611
- --saltButton-height: var(--salt-size-base);
2612
- --saltButton-padding: var(--salt-spacing-100);
2613
- }
2614
-
2615
- /* src/pagination/GoToInput.css */
2616
- .saltGoToInput.saltFormField {
2617
- display: flex;
2618
- flex-direction: row;
2619
- gap: var(--salt-spacing-100);
2620
- align-items: baseline;
2621
- text-wrap: nowrap;
2622
- }
2623
- .saltGoToInput-input {
2624
- height: var(--salt-size-base);
2625
- --saltInput-minWidth: unset;
2626
- }
2627
- .saltGoToInput-inputDefaultSize {
2628
- --saltInput-minWidth: var(--salt-size-base);
2629
- max-width: var(--salt-size-base);
2630
- width: var(--salt-size-base);
2631
- }
2632
-
2633
- /* src/pagination/PageButton.css */
2634
- .saltPageButton {
2635
- --saltButton-minWidth: var(--salt-size-base);
2636
- --saltButton-fontWeight: var(--salt-text-fontWeight);
2637
- --saltButton-height: var(--salt-size-base);
2638
- --saltButton-text-color: var(--salt-content-primary-foreground);
2639
- --saltButton-background-active: var(--salt-selectable-background-selected);
2640
- --saltButton-text-color-active: var(--salt-content-primary-foreground);
2641
- }
2642
- .saltPageButton:hover,
2643
- .saltPageButton:focus-visible {
2644
- --saltButton-background-hover: var(--salt-selectable-background-hover);
2645
- }
2646
- .saltPageButton:disabled {
2647
- --saltButton-text-color-disabled: var(--salt-content-secondary-foreground);
2648
- --saltButton-cursor-disabled: var(--salt-editable-cursor-readonly);
2649
- }
2650
- .saltPageButton-selected {
2651
- --saltButton-background: var(--salt-selectable-background-selected);
2652
- }
2653
- .saltPageButton-selected:focus-visible {
2654
- --saltButton-background-hover: var(--salt-selectable-background-selected);
2655
- }
2656
- .saltPageButton-fixed {
2657
- --saltButton-padding: 0;
2658
- }
2659
-
2660
- /* src/pagination/PageRanges.css */
2661
- .saltPageRanges-ellipsis {
2662
- display: inline-flex;
2663
- width: var(--salt-size-base);
2664
- height: var(--salt-size-base);
2665
- line-height: var(--salt-size-base);
2666
- justify-content: center;
2667
- }
2668
-
2669
- /* src/pagination/Pagination.css */
2670
- .saltPagination {
2671
- display: flex;
2672
- flex-direction: row;
2673
- align-items: center;
2674
- }
2675
-
2676
- /* src/pagination/Paginator.css */
2677
- .saltPaginator {
2678
- display: flex;
2679
- flex-wrap: nowrap;
2680
- }
2681
- .saltPaginator-arrowButton-previous {
2682
- --saltButton-margin: 0 var(--salt-spacing-100) 0 0;
2683
- }
2684
- .saltPaginator-arrowButton-next {
2685
- --saltButton-margin: 0 0 0 var(--salt-spacing-100);
2686
- }
2687
-
2688
2512
  /* src/parent-child-item/ParentChildItem.css */
2689
2513
  .saltParentChildItem-slide-top {
2690
2514
  animation: var(--salt-animation-slide-in-top);
@@ -2806,29 +2630,6 @@
2806
2630
  .saltQueryInputSearchList-value {
2807
2631
  }
2808
2632
 
2809
- /* src/scrim/Scrim.css */
2810
- .saltScrim {
2811
- top: 0;
2812
- left: 0;
2813
- right: 0;
2814
- width: 100%;
2815
- bottom: 0;
2816
- height: 100%;
2817
- display: flex;
2818
- z-index: calc(var(--salt-zIndex-drawer) - 1);
2819
- position: absolute;
2820
- align-items: center;
2821
- justify-content: center;
2822
- background: var(--saltScrim-background, var(--salt-overlayable-background));
2823
- -webkit-tap-highlight-color: transparent;
2824
- }
2825
- .saltScrim:focus {
2826
- outline: none;
2827
- }
2828
- .saltScrim-fixed {
2829
- position: fixed;
2830
- }
2831
-
2832
2633
  /* src/search-input/SearchInput.css */
2833
2634
  .saltSearchInput .saltInputLegacy-input::-webkit-search-cancel-button {
2834
2635
  display: none;
@@ -4729,4 +4530,4 @@
4729
4530
  margin: calc(var(--salt-size-unit) / 2) 0;
4730
4531
  }
4731
4532
 
4732
- /* src/41bc2559-7199-41be-8e85-b1f19e44903a.css */
4533
+ /* src/1b733dc3-fa31-49b0-a310-7267703d59d9.css */
package/dist-cjs/index.js CHANGED
@@ -103,16 +103,10 @@ var MenuButton = require('./menu-button/MenuButton.js');
103
103
  var Metric = require('./metric/Metric.js');
104
104
  var MetricHeader = require('./metric/MetricHeader.js');
105
105
  var MetricContent = require('./metric/MetricContent.js');
106
- var NavigationItem = require('./navigation-item/NavigationItem.js');
107
106
  var Option = require('./option/Option.js');
108
107
  var OptionGroup = require('./option/OptionGroup.js');
109
108
  var Overlay = require('./overlay/Overlay.js');
110
109
  var useOverlay = require('./overlay/useOverlay.js');
111
- var Pagination = require('./pagination/Pagination.js');
112
- var Paginator = require('./pagination/Paginator.js');
113
- var CompactInput = require('./pagination/CompactInput.js');
114
- var CompactPaginator = require('./pagination/CompactPaginator.js');
115
- var GoToInput = require('./pagination/GoToInput.js');
116
110
  var ParentChildItem = require('./parent-child-item/ParentChildItem.js');
117
111
  var ParentChildLayout = require('./parent-child-layout/ParentChildLayout.js');
118
112
  var Portal = require('./portal/Portal.js');
@@ -130,7 +124,6 @@ var useOverflowLayout = require('./responsive/useOverflowLayout.js');
130
124
  var useWidth = require('./responsive/useWidth.js');
131
125
  var overflowUtils = require('./responsive/overflowUtils.js');
132
126
  var utils = require('./responsive/utils.js');
133
- var Scrim = require('./scrim/Scrim.js');
134
127
  var SearchInput = require('./search-input/SearchInput.js');
135
128
  var SkipLink = require('./skip-link/SkipLink.js');
136
129
  var SkipLinks = require('./skip-link/SkipLinks.js');
@@ -270,16 +263,10 @@ exports.MenuButton = MenuButton.MenuButton;
270
263
  exports.Metric = Metric.Metric;
271
264
  exports.MetricHeader = MetricHeader.MetricHeader;
272
265
  exports.MetricContent = MetricContent.MetricContent;
273
- exports.NavigationItem = NavigationItem.NavigationItem;
274
266
  exports.Option = Option.Option;
275
267
  exports.OptionGroup = OptionGroup.OptionGroup;
276
268
  exports.Overlay = Overlay.Overlay;
277
269
  exports.useOverlay = useOverlay.useOverlay;
278
- exports.Pagination = Pagination.Pagination;
279
- exports.Paginator = Paginator.Paginator;
280
- exports.CompactInput = CompactInput.CompactInput;
281
- exports.CompactPaginator = CompactPaginator.CompactPaginator;
282
- exports.GoToInput = GoToInput.GoToInput;
283
270
  exports.ParentChildItem = ParentChildItem.ParentChildItem;
284
271
  exports.ParentChildLayout = ParentChildLayout.ParentChildLayout;
285
272
  exports.Portal = Portal.Portal;
@@ -322,7 +309,6 @@ exports.notOverflowed = overflowUtils.notOverflowed;
322
309
  exports.popNextItemByPriority = overflowUtils.popNextItemByPriority;
323
310
  exports.isResponsiveAttribute = utils.isResponsiveAttribute;
324
311
  exports.liftResponsivePropsToFormField = utils.liftResponsivePropsToFormField;
325
- exports.Scrim = Scrim.Scrim;
326
312
  exports.SearchInput = SearchInput.SearchInput;
327
313
  exports.SkipLink = SkipLink.SkipLink;
328
314
  exports.SkipLinks = SkipLinks.SkipLinks;
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -5,7 +5,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var jsxRuntime = require('react/jsx-runtime');
6
6
  var React = require('react');
7
7
  var clsx = require('clsx');
8
- var Scrim = require('../scrim/Scrim.js');
9
8
  var core = require('@salt-ds/core');
10
9
  var useIsViewportLargerThanBreakpoint = require('../utils/useIsViewportLargerThanBreakpoint.js');
11
10
  var window = require('@salt-ds/window');
@@ -80,7 +79,7 @@ const LayerLayout = React.forwardRef(
80
79
  ...rest,
81
80
  children
82
81
  }) : null;
83
- return disableScrim ? layerLayout : /* @__PURE__ */ jsxRuntime.jsx(Scrim.Scrim, {
82
+ return disableScrim ? layerLayout : /* @__PURE__ */ jsxRuntime.jsx(core.Scrim, {
84
83
  open: showComponent,
85
84
  className: clsx.clsx({
86
85
  [withBaseName("enter-animation")]: enterAnimation,
@@ -1 +1 @@
1
- {"version":3,"file":"LayerLayout.js","sources":["../src/layer-layout/LayerLayout.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, useEffect, useState } from \"react\";\nimport { clsx } from \"clsx\";\n\nimport { Scrim, ScrimProps } from \"../scrim\";\n\nimport { Breakpoints, makePrefixer, usePrevious } from \"@salt-ds/core\";\nimport { useIsViewportLargerThanBreakpoint } from \"../utils\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport layerLayoutCss from \"./LayerLayout.css\";\n\nexport const LAYER_POSITIONS = [\n \"center\",\n \"left\",\n \"top\",\n \"right\",\n \"bottom\",\n] as const;\n\nexport type LayerPositions = (typeof LAYER_POSITIONS)[number];\n\nexport interface LayerLayoutProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * Disable the scrim.\n */\n disableScrim?: boolean;\n /**\n * Defines the layer position within the screen.\n */\n position?: LayerPositions;\n /**\n * Breakpoint at which the layer will become fullscreen.\n */\n fullScreenAtBreakpoint?: keyof Breakpoints;\n /**\n * Disable all animations.\n */\n disableAnimations?: boolean;\n /**\n * Display or hide the component.\n */\n isOpen?: boolean;\n /**\n * Props to be passed to the Scrim component.\n */\n scrimProps?: Partial<ScrimProps>;\n}\n\nconst withBaseName = makePrefixer(\"saltLayerLayout\");\n\nconst ariaAttributes = { role: \"dialog\", \"aria-modal\": true };\n\nexport const LayerLayout = forwardRef<HTMLDivElement, LayerLayoutProps>(\n function LayerLayout(props, ref) {\n const {\n children,\n className,\n disableScrim = false,\n position = \"center\",\n fullScreenAtBreakpoint = \"sm\",\n disableAnimations = false,\n scrimProps,\n isOpen = true,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-layer-layout\",\n css: layerLayoutCss,\n window: targetWindow,\n });\n\n const previousDisableAnimationsProp = usePrevious(\n disableAnimations,\n [disableAnimations],\n false\n ); // we check the previous value for this prop to prevent the animations from triggering again when it changes\n\n const [showComponent, setShowComponent] = useState(false);\n\n const [isAnimating, setIsAnimating] = useState(false);\n\n useEffect(() => {\n if ((!isOpen && disableAnimations) || (!isOpen && !isAnimating)) {\n setShowComponent(false);\n }\n\n if (isOpen && !showComponent) {\n setShowComponent(true);\n }\n }, [isOpen, showComponent, disableAnimations, isAnimating]);\n\n const fullScreen = useIsViewportLargerThanBreakpoint(\n fullScreenAtBreakpoint\n );\n\n const anchored = position !== \"center\" && !fullScreen;\n\n const enterAnimation =\n !disableAnimations && isOpen && !previousDisableAnimationsProp;\n\n const exitAnimation = !disableAnimations && !isOpen;\n\n const layerLayout = showComponent ? (\n <div\n ref={ref}\n className={clsx(withBaseName(), className, {\n [withBaseName(\"anchor\")]: anchored,\n [withBaseName(\"fullScreen\")]: fullScreen,\n [withBaseName(position)]: !fullScreen,\n [withBaseName(\"enter-animation\")]: enterAnimation,\n [withBaseName(\"exit-animation\")]: exitAnimation,\n })}\n onAnimationStart={() => setIsAnimating(true)}\n onAnimationEnd={() => {\n if (!isOpen && showComponent) {\n setShowComponent(false);\n }\n }}\n {...(disableScrim && ariaAttributes)}\n {...rest}\n >\n {children}\n </div>\n ) : null;\n\n return disableScrim ? (\n layerLayout\n ) : (\n <Scrim\n open={showComponent}\n className={clsx({\n [withBaseName(\"enter-animation\")]: enterAnimation,\n [withBaseName(\"exit-animation\")]: exitAnimation,\n })}\n {...scrimProps}\n >\n {layerLayout}\n </Scrim>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","LayerLayout","useWindow","useComponentCssInjection","layerLayoutCss","usePrevious","useState","useEffect","useIsViewportLargerThanBreakpoint","jsx","clsx","Scrim"],"mappings":"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"}
1
+ {"version":3,"file":"LayerLayout.js","sources":["../src/layer-layout/LayerLayout.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, useEffect, useState } from \"react\";\nimport { clsx } from \"clsx\";\n\nimport { Scrim, ScrimProps } from \"@salt-ds/core\";\n\nimport { Breakpoints, makePrefixer, usePrevious } from \"@salt-ds/core\";\nimport { useIsViewportLargerThanBreakpoint } from \"../utils\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport layerLayoutCss from \"./LayerLayout.css\";\n\nexport const LAYER_POSITIONS = [\n \"center\",\n \"left\",\n \"top\",\n \"right\",\n \"bottom\",\n] as const;\n\nexport type LayerPositions = (typeof LAYER_POSITIONS)[number];\n\nexport interface LayerLayoutProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * Disable the scrim.\n */\n disableScrim?: boolean;\n /**\n * Defines the layer position within the screen.\n */\n position?: LayerPositions;\n /**\n * Breakpoint at which the layer will become fullscreen.\n */\n fullScreenAtBreakpoint?: keyof Breakpoints;\n /**\n * Disable all animations.\n */\n disableAnimations?: boolean;\n /**\n * Display or hide the component.\n */\n isOpen?: boolean;\n /**\n * Props to be passed to the Scrim component.\n */\n scrimProps?: Partial<ScrimProps>;\n}\n\nconst withBaseName = makePrefixer(\"saltLayerLayout\");\n\nconst ariaAttributes = { role: \"dialog\", \"aria-modal\": true };\n\nexport const LayerLayout = forwardRef<HTMLDivElement, LayerLayoutProps>(\n function LayerLayout(props, ref) {\n const {\n children,\n className,\n disableScrim = false,\n position = \"center\",\n fullScreenAtBreakpoint = \"sm\",\n disableAnimations = false,\n scrimProps,\n isOpen = true,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-layer-layout\",\n css: layerLayoutCss,\n window: targetWindow,\n });\n\n const previousDisableAnimationsProp = usePrevious(\n disableAnimations,\n [disableAnimations],\n false\n ); // we check the previous value for this prop to prevent the animations from triggering again when it changes\n\n const [showComponent, setShowComponent] = useState(false);\n\n const [isAnimating, setIsAnimating] = useState(false);\n\n useEffect(() => {\n if ((!isOpen && disableAnimations) || (!isOpen && !isAnimating)) {\n setShowComponent(false);\n }\n\n if (isOpen && !showComponent) {\n setShowComponent(true);\n }\n }, [isOpen, showComponent, disableAnimations, isAnimating]);\n\n const fullScreen = useIsViewportLargerThanBreakpoint(\n fullScreenAtBreakpoint\n );\n\n const anchored = position !== \"center\" && !fullScreen;\n\n const enterAnimation =\n !disableAnimations && isOpen && !previousDisableAnimationsProp;\n\n const exitAnimation = !disableAnimations && !isOpen;\n\n const layerLayout = showComponent ? (\n <div\n ref={ref}\n className={clsx(withBaseName(), className, {\n [withBaseName(\"anchor\")]: anchored,\n [withBaseName(\"fullScreen\")]: fullScreen,\n [withBaseName(position)]: !fullScreen,\n [withBaseName(\"enter-animation\")]: enterAnimation,\n [withBaseName(\"exit-animation\")]: exitAnimation,\n })}\n onAnimationStart={() => setIsAnimating(true)}\n onAnimationEnd={() => {\n if (!isOpen && showComponent) {\n setShowComponent(false);\n }\n }}\n {...(disableScrim && ariaAttributes)}\n {...rest}\n >\n {children}\n </div>\n ) : null;\n\n return disableScrim ? (\n layerLayout\n ) : (\n <Scrim\n open={showComponent}\n className={clsx({\n [withBaseName(\"enter-animation\")]: enterAnimation,\n [withBaseName(\"exit-animation\")]: exitAnimation,\n })}\n {...scrimProps}\n >\n {layerLayout}\n </Scrim>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","LayerLayout","useWindow","useComponentCssInjection","layerLayoutCss","usePrevious","useState","useEffect","useIsViewportLargerThanBreakpoint","jsx","clsx","Scrim"],"mappings":"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"}
package/dist-es/index.js CHANGED
@@ -99,16 +99,10 @@ export { MenuButton } from './menu-button/MenuButton.js';
99
99
  export { Metric } from './metric/Metric.js';
100
100
  export { MetricHeader } from './metric/MetricHeader.js';
101
101
  export { MetricContent } from './metric/MetricContent.js';
102
- export { NavigationItem } from './navigation-item/NavigationItem.js';
103
102
  export { Option } from './option/Option.js';
104
103
  export { OptionGroup } from './option/OptionGroup.js';
105
104
  export { Overlay } from './overlay/Overlay.js';
106
105
  export { useOverlay } from './overlay/useOverlay.js';
107
- export { Pagination } from './pagination/Pagination.js';
108
- export { Paginator } from './pagination/Paginator.js';
109
- export { CompactInput } from './pagination/CompactInput.js';
110
- export { CompactPaginator } from './pagination/CompactPaginator.js';
111
- export { GoToInput } from './pagination/GoToInput.js';
112
106
  export { ParentChildItem } from './parent-child-item/ParentChildItem.js';
113
107
  export { ParentChildLayout } from './parent-child-layout/ParentChildLayout.js';
114
108
  export { Portal } from './portal/Portal.js';
@@ -126,7 +120,6 @@ export { useOverflowLayout } from './responsive/useOverflowLayout.js';
126
120
  export { useWidth } from './responsive/useWidth.js';
127
121
  export { DropdownPlaceholder, NO_DATA, addAll, allExceptOverflowIndicator, byDescendingPriority, getDropdownPlaceholder, getElementForItem, getIsOverflowed, getOverflowIndicator, getRuntimePadding, isCollapsed, isCollapsedOrCollapsing, isCollapsible, isCollapsing, isOverflowed, measureContainer, measureContainerOverflow, measureElementSize, measureOverflowItems, notOverflowed, popNextItemByPriority } from './responsive/overflowUtils.js';
128
122
  export { isResponsiveAttribute, liftResponsivePropsToFormField } from './responsive/utils.js';
129
- export { Scrim } from './scrim/Scrim.js';
130
123
  export { SearchInput } from './search-input/SearchInput.js';
131
124
  export { SkipLink } from './skip-link/SkipLink.js';
132
125
  export { SkipLinks } from './skip-link/SkipLinks.js';
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -1,8 +1,7 @@
1
1
  import { jsx } from 'react/jsx-runtime';
2
2
  import { forwardRef, useState, useEffect } from 'react';
3
3
  import { clsx } from 'clsx';
4
- import { Scrim } from '../scrim/Scrim.js';
5
- import { makePrefixer, usePrevious } from '@salt-ds/core';
4
+ import { makePrefixer, usePrevious, Scrim } from '@salt-ds/core';
6
5
  import { useIsViewportLargerThanBreakpoint } from '../utils/useIsViewportLargerThanBreakpoint.js';
7
6
  import { useWindow } from '@salt-ds/window';
8
7
  import { useComponentCssInjection } from '@salt-ds/styles';
@@ -1 +1 @@
1
- {"version":3,"file":"LayerLayout.js","sources":["../src/layer-layout/LayerLayout.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, useEffect, useState } from \"react\";\nimport { clsx } from \"clsx\";\n\nimport { Scrim, ScrimProps } from \"../scrim\";\n\nimport { Breakpoints, makePrefixer, usePrevious } from \"@salt-ds/core\";\nimport { useIsViewportLargerThanBreakpoint } from \"../utils\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport layerLayoutCss from \"./LayerLayout.css\";\n\nexport const LAYER_POSITIONS = [\n \"center\",\n \"left\",\n \"top\",\n \"right\",\n \"bottom\",\n] as const;\n\nexport type LayerPositions = (typeof LAYER_POSITIONS)[number];\n\nexport interface LayerLayoutProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * Disable the scrim.\n */\n disableScrim?: boolean;\n /**\n * Defines the layer position within the screen.\n */\n position?: LayerPositions;\n /**\n * Breakpoint at which the layer will become fullscreen.\n */\n fullScreenAtBreakpoint?: keyof Breakpoints;\n /**\n * Disable all animations.\n */\n disableAnimations?: boolean;\n /**\n * Display or hide the component.\n */\n isOpen?: boolean;\n /**\n * Props to be passed to the Scrim component.\n */\n scrimProps?: Partial<ScrimProps>;\n}\n\nconst withBaseName = makePrefixer(\"saltLayerLayout\");\n\nconst ariaAttributes = { role: \"dialog\", \"aria-modal\": true };\n\nexport const LayerLayout = forwardRef<HTMLDivElement, LayerLayoutProps>(\n function LayerLayout(props, ref) {\n const {\n children,\n className,\n disableScrim = false,\n position = \"center\",\n fullScreenAtBreakpoint = \"sm\",\n disableAnimations = false,\n scrimProps,\n isOpen = true,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-layer-layout\",\n css: layerLayoutCss,\n window: targetWindow,\n });\n\n const previousDisableAnimationsProp = usePrevious(\n disableAnimations,\n [disableAnimations],\n false\n ); // we check the previous value for this prop to prevent the animations from triggering again when it changes\n\n const [showComponent, setShowComponent] = useState(false);\n\n const [isAnimating, setIsAnimating] = useState(false);\n\n useEffect(() => {\n if ((!isOpen && disableAnimations) || (!isOpen && !isAnimating)) {\n setShowComponent(false);\n }\n\n if (isOpen && !showComponent) {\n setShowComponent(true);\n }\n }, [isOpen, showComponent, disableAnimations, isAnimating]);\n\n const fullScreen = useIsViewportLargerThanBreakpoint(\n fullScreenAtBreakpoint\n );\n\n const anchored = position !== \"center\" && !fullScreen;\n\n const enterAnimation =\n !disableAnimations && isOpen && !previousDisableAnimationsProp;\n\n const exitAnimation = !disableAnimations && !isOpen;\n\n const layerLayout = showComponent ? (\n <div\n ref={ref}\n className={clsx(withBaseName(), className, {\n [withBaseName(\"anchor\")]: anchored,\n [withBaseName(\"fullScreen\")]: fullScreen,\n [withBaseName(position)]: !fullScreen,\n [withBaseName(\"enter-animation\")]: enterAnimation,\n [withBaseName(\"exit-animation\")]: exitAnimation,\n })}\n onAnimationStart={() => setIsAnimating(true)}\n onAnimationEnd={() => {\n if (!isOpen && showComponent) {\n setShowComponent(false);\n }\n }}\n {...(disableScrim && ariaAttributes)}\n {...rest}\n >\n {children}\n </div>\n ) : null;\n\n return disableScrim ? (\n layerLayout\n ) : (\n <Scrim\n open={showComponent}\n className={clsx({\n [withBaseName(\"enter-animation\")]: enterAnimation,\n [withBaseName(\"exit-animation\")]: exitAnimation,\n })}\n {...scrimProps}\n >\n {layerLayout}\n </Scrim>\n );\n }\n);\n"],"names":["LayerLayout","layerLayoutCss"],"mappings":"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"}
1
+ {"version":3,"file":"LayerLayout.js","sources":["../src/layer-layout/LayerLayout.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, useEffect, useState } from \"react\";\nimport { clsx } from \"clsx\";\n\nimport { Scrim, ScrimProps } from \"@salt-ds/core\";\n\nimport { Breakpoints, makePrefixer, usePrevious } from \"@salt-ds/core\";\nimport { useIsViewportLargerThanBreakpoint } from \"../utils\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport layerLayoutCss from \"./LayerLayout.css\";\n\nexport const LAYER_POSITIONS = [\n \"center\",\n \"left\",\n \"top\",\n \"right\",\n \"bottom\",\n] as const;\n\nexport type LayerPositions = (typeof LAYER_POSITIONS)[number];\n\nexport interface LayerLayoutProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * Disable the scrim.\n */\n disableScrim?: boolean;\n /**\n * Defines the layer position within the screen.\n */\n position?: LayerPositions;\n /**\n * Breakpoint at which the layer will become fullscreen.\n */\n fullScreenAtBreakpoint?: keyof Breakpoints;\n /**\n * Disable all animations.\n */\n disableAnimations?: boolean;\n /**\n * Display or hide the component.\n */\n isOpen?: boolean;\n /**\n * Props to be passed to the Scrim component.\n */\n scrimProps?: Partial<ScrimProps>;\n}\n\nconst withBaseName = makePrefixer(\"saltLayerLayout\");\n\nconst ariaAttributes = { role: \"dialog\", \"aria-modal\": true };\n\nexport const LayerLayout = forwardRef<HTMLDivElement, LayerLayoutProps>(\n function LayerLayout(props, ref) {\n const {\n children,\n className,\n disableScrim = false,\n position = \"center\",\n fullScreenAtBreakpoint = \"sm\",\n disableAnimations = false,\n scrimProps,\n isOpen = true,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-layer-layout\",\n css: layerLayoutCss,\n window: targetWindow,\n });\n\n const previousDisableAnimationsProp = usePrevious(\n disableAnimations,\n [disableAnimations],\n false\n ); // we check the previous value for this prop to prevent the animations from triggering again when it changes\n\n const [showComponent, setShowComponent] = useState(false);\n\n const [isAnimating, setIsAnimating] = useState(false);\n\n useEffect(() => {\n if ((!isOpen && disableAnimations) || (!isOpen && !isAnimating)) {\n setShowComponent(false);\n }\n\n if (isOpen && !showComponent) {\n setShowComponent(true);\n }\n }, [isOpen, showComponent, disableAnimations, isAnimating]);\n\n const fullScreen = useIsViewportLargerThanBreakpoint(\n fullScreenAtBreakpoint\n );\n\n const anchored = position !== \"center\" && !fullScreen;\n\n const enterAnimation =\n !disableAnimations && isOpen && !previousDisableAnimationsProp;\n\n const exitAnimation = !disableAnimations && !isOpen;\n\n const layerLayout = showComponent ? (\n <div\n ref={ref}\n className={clsx(withBaseName(), className, {\n [withBaseName(\"anchor\")]: anchored,\n [withBaseName(\"fullScreen\")]: fullScreen,\n [withBaseName(position)]: !fullScreen,\n [withBaseName(\"enter-animation\")]: enterAnimation,\n [withBaseName(\"exit-animation\")]: exitAnimation,\n })}\n onAnimationStart={() => setIsAnimating(true)}\n onAnimationEnd={() => {\n if (!isOpen && showComponent) {\n setShowComponent(false);\n }\n }}\n {...(disableScrim && ariaAttributes)}\n {...rest}\n >\n {children}\n </div>\n ) : null;\n\n return disableScrim ? (\n layerLayout\n ) : (\n <Scrim\n open={showComponent}\n className={clsx({\n [withBaseName(\"enter-animation\")]: enterAnimation,\n [withBaseName(\"exit-animation\")]: exitAnimation,\n })}\n {...scrimProps}\n >\n {layerLayout}\n </Scrim>\n );\n }\n);\n"],"names":["LayerLayout","layerLayoutCss"],"mappings":"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"}
@@ -32,17 +32,14 @@ export * from "./list-next";
32
32
  export * from "./logo";
33
33
  export * from "./menu-button";
34
34
  export * from "./metric";
35
- export * from "./navigation-item";
36
35
  export * from "./option";
37
36
  export * from "./overlay";
38
- export * from "./pagination";
39
37
  export * from "./parent-child-item";
40
38
  export * from "./parent-child-layout";
41
39
  export * from "./portal";
42
40
  export * from "./progress";
43
41
  export * from "./query-input";
44
42
  export * from "./responsive";
45
- export * from "./scrim";
46
43
  export * from "./search-input";
47
44
  export * from "./skip-link";
48
45
  export * from "./slider";
@@ -1,5 +1,5 @@
1
1
  import { HTMLAttributes } from "react";
2
- import { ScrimProps } from "../scrim";
2
+ import { ScrimProps } from "@salt-ds/core";
3
3
  import { Breakpoints } from "@salt-ds/core";
4
4
  export declare const LAYER_POSITIONS: readonly ["center", "left", "top", "right", "bottom"];
5
5
  export declare type LayerPositions = (typeof LAYER_POSITIONS)[number];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salt-ds/lab",
3
- "version": "1.0.0-alpha.27",
3
+ "version": "1.0.0-alpha.28",
4
4
  "license": "Apache-2.0",
5
5
  "repository": {
6
6
  "type": "git",
@@ -26,7 +26,7 @@
26
26
  "react-window": "^1.8.6",
27
27
  "rifm": "^0.12.0",
28
28
  "tinycolor2": "^1.4.2",
29
- "@salt-ds/core": "^1.14.0",
29
+ "@salt-ds/core": "^1.15.0",
30
30
  "@salt-ds/window": "^0.1.1",
31
31
  "@salt-ds/styles": "^0.2.1",
32
32
  "@salt-ds/icons": "^1.9.1"
@@ -1,35 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var jsxRuntime = require('react/jsx-runtime');
6
-
7
- const ConditionalWrapper = ({
8
- children,
9
- className,
10
- parent,
11
- expanded,
12
- onExpand,
13
- active,
14
- href
15
- }) => {
16
- const handleExpand = (event) => {
17
- event.stopPropagation();
18
- onExpand == null ? void 0 : onExpand(event);
19
- };
20
- return parent || href === void 0 ? /* @__PURE__ */ jsxRuntime.jsx("button", {
21
- "aria-label": "expand",
22
- "aria-expanded": expanded,
23
- className,
24
- onClick: handleExpand,
25
- children
26
- }) : /* @__PURE__ */ jsxRuntime.jsx("a", {
27
- "aria-current": active ? "page" : void 0,
28
- href,
29
- className,
30
- children
31
- });
32
- };
33
-
34
- exports.ConditionalWrapper = ConditionalWrapper;
35
- //# sourceMappingURL=ConditionalWrapper.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ConditionalWrapper.js","sources":["../src/navigation-item/ConditionalWrapper.tsx"],"sourcesContent":["import { MouseEvent, ReactNode } from \"react\";\nimport { NavigationItemProps } from \"./NavigationItem\";\n\ninterface ConditionalWrapperProps\n extends Pick<\n NavigationItemProps,\n \"parent\" | \"expanded\" | \"onExpand\" | \"active\" | \"href\" | \"onClick\"\n > {\n children: ReactNode;\n className: string;\n}\n\nexport const ConditionalWrapper = ({\n children,\n className,\n parent,\n expanded,\n onExpand,\n active,\n href,\n}: ConditionalWrapperProps) => {\n const handleExpand = (event: MouseEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n onExpand?.(event);\n };\n\n return parent || href === undefined ? (\n <button\n aria-label=\"expand\"\n aria-expanded={expanded}\n className={className}\n onClick={handleExpand}\n >\n {children}\n </button>\n ) : (\n <a\n aria-current={active ? \"page\" : undefined}\n href={href}\n className={className}\n >\n {children}\n </a>\n );\n};\n"],"names":["jsx"],"mappings":";;;;;;AAYO,MAAM,qBAAqB,CAAC;AAAA,EACjC,QAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,IAAA;AACF,CAA+B,KAAA;AAC7B,EAAM,MAAA,YAAA,GAAe,CAAC,KAAyC,KAAA;AAC7D,IAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AACtB,IAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACb,CAAA;AAEA,EAAO,OAAA,MAAA,IAAU,IAAS,KAAA,KAAA,CAAA,mBACvBA,cAAA,CAAA,QAAA,EAAA;AAAA,IACC,YAAW,EAAA,QAAA;AAAA,IACX,eAAe,EAAA,QAAA;AAAA,IACf,SAAA;AAAA,IACA,OAAS,EAAA,YAAA;AAAA,IAER,QAAA;AAAA,GACH,oBAECA,cAAA,CAAA,GAAA,EAAA;AAAA,IACC,cAAA,EAAc,SAAS,MAAS,GAAA,KAAA,CAAA;AAAA,IAChC,IAAA;AAAA,IACA,SAAA;AAAA,IAEC,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ;;;;"}
@@ -1,29 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var jsxRuntime = require('react/jsx-runtime');
6
- var icons = require('@salt-ds/icons');
7
-
8
- const iconExpansionMap = {
9
- vertical: {
10
- expanded: icons.ChevronDownIcon,
11
- collapsed: icons.ChevronRightIcon
12
- },
13
- horizontal: {
14
- expanded: icons.ChevronDownIcon,
15
- collapsed: icons.ChevronDownIcon
16
- }
17
- };
18
- function ExpansionIcon({
19
- expanded = false,
20
- orientation = "horizontal"
21
- }) {
22
- const Icon = iconExpansionMap[orientation][expanded ? "expanded" : "collapsed"];
23
- return /* @__PURE__ */ jsxRuntime.jsx(Icon, {
24
- "aria-hidden": "true"
25
- });
26
- }
27
-
28
- exports.ExpansionIcon = ExpansionIcon;
29
- //# sourceMappingURL=ExpansionIcon.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ExpansionIcon.js","sources":["../src/navigation-item/ExpansionIcon.tsx"],"sourcesContent":["import { ChevronDownIcon, ChevronRightIcon } from \"@salt-ds/icons\";\nimport { NavigationItemProps } from \"./NavigationItem\";\n\nconst iconExpansionMap = {\n vertical: {\n expanded: ChevronDownIcon,\n collapsed: ChevronRightIcon,\n },\n horizontal: {\n expanded: ChevronDownIcon,\n collapsed: ChevronDownIcon,\n },\n};\n\nexport function ExpansionIcon({\n expanded = false,\n orientation = \"horizontal\",\n}: Pick<NavigationItemProps, \"expanded\" | \"orientation\" | \"className\">) {\n const Icon =\n iconExpansionMap[orientation][expanded ? \"expanded\" : \"collapsed\"];\n return <Icon aria-hidden=\"true\" />;\n}\n"],"names":["ChevronDownIcon","ChevronRightIcon","jsx"],"mappings":";;;;;;;AAGA,MAAM,gBAAmB,GAAA;AAAA,EACvB,QAAU,EAAA;AAAA,IACR,QAAU,EAAAA,qBAAA;AAAA,IACV,SAAW,EAAAC,sBAAA;AAAA,GACb;AAAA,EACA,UAAY,EAAA;AAAA,IACV,QAAU,EAAAD,qBAAA;AAAA,IACV,SAAW,EAAAA,qBAAA;AAAA,GACb;AACF,CAAA,CAAA;AAEO,SAAS,aAAc,CAAA;AAAA,EAC5B,QAAW,GAAA,KAAA;AAAA,EACX,WAAc,GAAA,YAAA;AAChB,CAAwE,EAAA;AACtE,EAAA,MAAM,IACJ,GAAA,gBAAA,CAAiB,WAAa,CAAA,CAAA,QAAA,GAAW,UAAa,GAAA,WAAA,CAAA,CAAA;AACxD,EAAA,uBAAQE,cAAA,CAAA,IAAA,EAAA;AAAA,IAAK,aAAY,EAAA,MAAA;AAAA,GAAO,CAAA,CAAA;AAClC;;;;"}
@@ -1,6 +0,0 @@
1
- 'use strict';
2
-
3
- var css_248z = "/* Vars applied to root NavigationItem component */\n.saltNavigationItem-wrapper {\n display: flex;\n gap: var(--salt-spacing-100);\n align-items: center;\n position: relative;\n background: none;\n border: none;\n font-size: var(--salt-text-fontSize);\n text-decoration: none;\n cursor: var(--salt-selectable-cursor-hover);\n /* Hover off animation */\n transition: all var(--salt-duration-instant) ease-in-out;\n}\n\n/* Vars applied to NavigationItem component when root */\n.saltNavigationItem-rootItem {\n font-weight: var(--salt-text-fontWeight-strong);\n}\n\n/* Styles applied to NavigationItem icon */\n.saltNavigationItem-label .saltIcon {\n top: var(--salt-spacing-25);\n}\n\n/* Styles applied when orientation = \"horizontal\" */\n.saltNavigationItem-horizontal {\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-100) * 2);\n padding: 0 var(--salt-spacing-100);\n width: fit-content;\n}\n\n/* Styles applied when orientation = \"vertical\" */\n.saltNavigationItem-vertical {\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-50) * 2);\n padding-top: 0;\n padding-bottom: 0;\n padding-right: var(--salt-spacing-100);\n padding-left: calc(var(--salt-spacing-300) * (min(var(--saltNavigationItem-level, 0) + 1, 2)));\n width: 100%;\n}\n\n/* Styles applied to NavigationItem label */\n.saltNavigationItem-label {\n color: var(--salt-content-primary-foreground);\n line-height: var(--salt-text-lineHeight);\n font-family: var(--salt-text-fontFamily);\n padding-left: calc(var(--saltNavigationItem-level, 0) * var(--salt-spacing-100));\n flex: 1;\n text-align: left;\n display: flex;\n align-items: baseline;\n gap: var(--salt-spacing-100);\n}\n\n/* Styles applied to NavigationItem Badge */\n.saltNavigationItem-label .saltBadge {\n margin-left: auto;\n}\n\n/* Styles applied to NavigationItem when focus is visible */\n.saltNavigationItem-wrapper:focus-visible {\n outline: var(--salt-focused-outline);\n}\n\n/* Styles applied to NavigationItem for non-keyboard focus */\n.saltNavigationItem-wrapper:focus:not(:focus-visible) {\n outline: 0;\n}\n\n/* Styles applied to activation line */\n.saltNavigationItem-wrapper::after {\n content: \"\";\n position: absolute;\n top: var(--salt-spacing-25);\n left: 0;\n display: block;\n}\n\n/* Styles applied to activation line when orientation = \"horizontal\" */\n.saltNavigationItem-horizontal::after {\n width: 100%;\n height: var(--salt-size-indicator);\n}\n\n/* Styles applied to activation line when orientation = \"vertical\" */\n.saltNavigationItem-vertical::after {\n width: var(--salt-size-indicator);\n left: var(--salt-spacing-25);\n height: calc(100% - var(--salt-spacing-50));\n}\n\n/* Styles applied to activation line on hover */\n.saltNavigationItem-wrapper:hover::after,\n.saltNavigationItem-wrapper:focus-visible::after {\n background: var(--salt-navigable-indicator-hover);\n /* Hover on animation */\n transition: all var(--salt-duration-perceptible) ease-in-out;\n}\n\n/* Styles applied to activation line when item is active */\n.saltNavigationItem-active::after,\n.saltNavigationItem-active:hover::after,\n.saltNavigationItem-active:focus::after {\n background: var(--salt-navigable-indicator-active);\n /* Hover on animation */\n transition: all var(--salt-duration-perceptible) ease-in-out;\n}\n";
4
-
5
- module.exports = css_248z;
6
- //# sourceMappingURL=NavigationItem.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"NavigationItem.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
@@ -1,78 +0,0 @@
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 core = require('@salt-ds/core');
8
- var clsx = require('clsx');
9
- var ExpansionIcon = require('./ExpansionIcon.js');
10
- var ConditionalWrapper = require('./ConditionalWrapper.js');
11
- var NavigationItem$1 = require('./NavigationItem.css.js');
12
- var window = require('@salt-ds/window');
13
- var styles = require('@salt-ds/styles');
14
-
15
- const withBaseName = core.makePrefixer("saltNavigationItem");
16
- const NavigationItem = React.forwardRef(
17
- function NavigationItem2(props, ref) {
18
- const {
19
- active,
20
- blurActive,
21
- children,
22
- className,
23
- expanded = false,
24
- orientation = "horizontal",
25
- parent,
26
- level = 0,
27
- onExpand,
28
- href,
29
- style: styleProp,
30
- ...rest
31
- } = props;
32
- const targetWindow = window.useWindow();
33
- styles.useComponentCssInjection({
34
- testId: "salt-navigation-item",
35
- css: NavigationItem$1,
36
- window: targetWindow
37
- });
38
- const style = {
39
- ...styleProp,
40
- "--saltNavigationItem-level": `${level}`
41
- };
42
- return /* @__PURE__ */ jsxRuntime.jsx("div", {
43
- ref,
44
- className: clsx.clsx(withBaseName(), className),
45
- style,
46
- ...rest,
47
- children: /* @__PURE__ */ jsxRuntime.jsxs(ConditionalWrapper.ConditionalWrapper, {
48
- className: clsx.clsx(
49
- withBaseName("wrapper"),
50
- {
51
- [withBaseName("active")]: active || blurActive,
52
- [withBaseName("blurActive")]: blurActive,
53
- [withBaseName("rootItem")]: level === 0
54
- },
55
- withBaseName(orientation)
56
- ),
57
- parent,
58
- expanded,
59
- onExpand,
60
- active,
61
- href,
62
- children: [
63
- /* @__PURE__ */ jsxRuntime.jsx("span", {
64
- className: withBaseName("label"),
65
- children
66
- }),
67
- parent && /* @__PURE__ */ jsxRuntime.jsx(ExpansionIcon.ExpansionIcon, {
68
- expanded,
69
- orientation
70
- })
71
- ]
72
- })
73
- });
74
- }
75
- );
76
-
77
- exports.NavigationItem = NavigationItem;
78
- //# sourceMappingURL=NavigationItem.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"NavigationItem.js","sources":["../src/navigation-item/NavigationItem.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef, MouseEventHandler } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { ExpansionIcon } from \"./ExpansionIcon\";\nimport { ConditionalWrapper } from \"./ConditionalWrapper\";\n\nimport navigationItemCss from \"./NavigationItem.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nexport interface NavigationItemProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Whether the navigation item is active.\n */\n active?: boolean;\n /**\n * Whether the nested group is collapsed and there is an active nested item within it.\n */\n blurActive?: boolean;\n /**\n * Whether the navigation item is expanded.\n */\n expanded?: boolean;\n /**\n * Level of nesting.\n */\n level?: number;\n /**\n * The orientation of the navigation item.\n */\n orientation?: \"horizontal\" | \"vertical\";\n /**\n * Whether the navigation item is a parent with nested items.\n */\n parent?: boolean;\n /**\n * Action to be triggered when the navigation item is expanded.\n */\n onExpand?: MouseEventHandler<HTMLButtonElement>;\n /**\n * Href to be passed to the Link element.\n */\n href?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltNavigationItem\");\n\nexport const NavigationItem = forwardRef<HTMLDivElement, NavigationItemProps>(\n function NavigationItem(props, ref) {\n const {\n active,\n blurActive,\n children,\n className,\n expanded = false,\n orientation = \"horizontal\",\n parent,\n level = 0,\n onExpand,\n href,\n style: styleProp,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-navigation-item\",\n css: navigationItemCss,\n window: targetWindow,\n });\n\n const style = {\n ...styleProp,\n \"--saltNavigationItem-level\": `${level}`,\n };\n\n return (\n <div\n ref={ref}\n className={clsx(withBaseName(), className)}\n style={style}\n {...rest}\n >\n <ConditionalWrapper\n className={clsx(\n withBaseName(\"wrapper\"),\n {\n [withBaseName(\"active\")]: active || blurActive,\n [withBaseName(\"blurActive\")]: blurActive,\n [withBaseName(\"rootItem\")]: level === 0,\n },\n withBaseName(orientation)\n )}\n parent={parent}\n expanded={expanded}\n onExpand={onExpand}\n active={active}\n href={href}\n >\n <span className={withBaseName(\"label\")}>{children}</span>\n {parent && (\n <ExpansionIcon expanded={expanded} orientation={orientation} />\n )}\n </ConditionalWrapper>\n </div>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","NavigationItem","useWindow","useComponentCssInjection","navigationItemCss","jsx","clsx","jsxs","ConditionalWrapper","ExpansionIcon"],"mappings":";;;;;;;;;;;;;;AA6CA,MAAM,YAAA,GAAeA,kBAAa,oBAAoB,CAAA,CAAA;AAE/C,MAAM,cAAiB,GAAAC,gBAAA;AAAA,EAC5B,SAASC,eAAe,CAAA,KAAA,EAAO,GAAK,EAAA;AAClC,IAAM,MAAA;AAAA,MACJ,MAAA;AAAA,MACA,UAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAW,GAAA,KAAA;AAAA,MACX,WAAc,GAAA,YAAA;AAAA,MACd,MAAA;AAAA,MACA,KAAQ,GAAA,CAAA;AAAA,MACR,QAAA;AAAA,MACA,IAAA;AAAA,MACA,KAAO,EAAA,SAAA;AAAA,MACJ,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,sBAAA;AAAA,MACR,GAAK,EAAAC,gBAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,KAAQ,GAAA;AAAA,MACZ,GAAG,SAAA;AAAA,MACH,8BAA8B,CAAG,EAAA,KAAA,CAAA,CAAA;AAAA,KACnC,CAAA;AAEA,IAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,KAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEJ,QAAC,kBAAAC,eAAA,CAAAC,qCAAA,EAAA;AAAA,QACC,SAAW,EAAAF,SAAA;AAAA,UACT,aAAa,SAAS,CAAA;AAAA,UACtB;AAAA,YACE,CAAC,YAAA,CAAa,QAAQ,CAAA,GAAI,MAAU,IAAA,UAAA;AAAA,YACpC,CAAC,YAAa,CAAA,YAAY,CAAI,GAAA,UAAA;AAAA,YAC9B,CAAC,YAAA,CAAa,UAAU,CAAA,GAAI,KAAU,KAAA,CAAA;AAAA,WACxC;AAAA,UACA,aAAa,WAAW,CAAA;AAAA,SAC1B;AAAA,QACA,MAAA;AAAA,QACA,QAAA;AAAA,QACA,QAAA;AAAA,QACA,MAAA;AAAA,QACA,IAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAACD,cAAA,CAAA,MAAA,EAAA;AAAA,YAAK,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,YAAI,QAAA;AAAA,WAAS,CAAA;AAAA,UACjD,0BACEA,cAAA,CAAAI,2BAAA,EAAA;AAAA,YAAc,QAAA;AAAA,YAAoB,WAAA;AAAA,WAA0B,CAAA;AAAA,SAAA;AAAA,OAEjE,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
@@ -1,6 +0,0 @@
1
- 'use strict';
2
-
3
- var css_248z = ".saltCompactInput {\n --saltInput-paddingLeft: 0;\n --saltInput-paddingRight: 0;\n}\n\n.saltCompactInput-defaultSize.saltInput {\n --saltInput-minWidth: var(--salt-size-base);\n width: var(--salt-size-base);\n}\n";
4
-
5
- module.exports = css_248z;
6
- //# sourceMappingURL=CompactInput.css.js.map