@salt-ds/lab 1.0.0-alpha.34 → 1.0.0-alpha.36

package/css/salt-lab.css

@@ -567,6 +567,11 @@
   z-index: calc(var(--salt-zIndex-flyover) - 1);
 }
 
+/* src/combo-box-next/ComboBoxNext.css */
+.saltComboBoxNext-focused {
+  outline: var(--salt-focused-outline);
+}
+
 /* src/contact-details/ContactDetails.css */
 .salt-density-touch {
   --contactDetails-default-primary-fontSize: 30px;
@@ -851,183 +856,6 @@
   transform: translateY(var(--deckLayout-transform-value));
 }
 
-/* src/dialog/Dialog.css */
-.saltDialog {
-  position: fixed;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  margin: auto;
-  display: flex;
-  flex-direction: column;
-  padding-top: var(--salt-spacing-300);
-  padding-bottom: var(--salt-spacing-300);
-  background: var(--salt-container-primary-background);
-  box-shadow: var(--salt-overlayable-shadow-modal);
-  overflow-y: auto;
-  z-index: var(--salt-zIndex-drawer);
-  height: min-content;
-  border: var(--salt-container-borderStyle) var(--salt-separable-tertiary-borderColor) var(--salt-size-border);
-  box-sizing: border-box;
-  border-radius: var(--salt-palette-corner, 0);
-}
-.saltDialog-info {
-  border-color: var(--salt-status-info-borderColor);
-}
-.saltDialog-error {
-  border-color: var(--salt-status-error-borderColor);
-}
-.saltDialog-warning {
-  border-color: var(--salt-status-warning-borderColor);
-}
-.saltDialog-success {
-  border-color: var(--salt-status-success-borderColor);
-}
-.saltDialog.saltDialog-enterAnimation {
-  animation: var(--salt-animation-fade-in-center);
-}
-.saltDialog.saltDialog-exitAnimation {
-  animation: var(--salt-animation-fade-out-back);
-}
-.saltDialog-small-xs {
-  width: 100%;
-  max-height: 48%;
-}
-.saltDialog-small-sm {
-  width: 56%;
-  max-height: 48%;
-}
-.saltDialog-small-md {
-  width: 36%;
-  max-height: 48%;
-}
-.saltDialog-small-lg {
-  width: 24%;
-  max-height: 48%;
-}
-.saltDialog-small-xl {
-  width: 24%;
-  max-height: 48%;
-}
-.saltDialog-medium-xs {
-  width: 100%;
-  max-height: 72%;
-}
-.saltDialog-medium-sm {
-  width: 84%;
-  max-height: 72%;
-}
-.saltDialog-medium-md {
-  width: 68%;
-  max-height: 72%;
-}
-.saltDialog-medium-lg {
-  width: 48%;
-  max-height: 72%;
-}
-.saltDialog-medium-xl {
-  width: 48%;
-  max-height: 72%;
-}
-.saltDialog-large-xs {
-  width: 100%;
-  max-height: 84%;
-}
-.saltDialog-large-sm {
-  width: 96%;
-  max-height: 84%;
-}
-.saltDialog-large-md {
-  width: 84%;
-  max-height: 84%;
-}
-.saltDialog-large-lg {
-  width: 72%;
-  max-height: 84%;
-}
-.saltDialog-large-xl {
-  width: 72%;
-  max-height: 84%;
-}
-
-/* src/dialog/DialogActions.css */
-.saltDialogActions {
-  padding: var(--salt-spacing-300);
-  padding-bottom: 0;
-  display: flex;
-  justify-content: flex-end;
-  gap: var(--salt-spacing-100);
-}
-
-/* src/dialog/DialogCloseButton.css */
-.saltButton.saltDialogCloseButton {
-  position: absolute;
-  top: 0;
-  right: 0;
-}
-
-/* src/dialog/DialogContent.css */
-.saltDialogContent {
-  color: var(--salt-content-primary-foreground);
-  min-height: var(--salt-text-lineHeight);
-  overflow-y: auto;
-  background: var(--salt-container-primary-background);
-  padding-bottom: var(--salt-spacing-50);
-  margin-left: var(--salt-spacing-200);
-  margin-right: var(--salt-spacing-300);
-  padding-right: var(--salt-spacing-300);
-  padding-left: var(--salt-spacing-100);
-  border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) transparent;
-  box-shadow: none;
-}
-.saltDialogContent-scroll {
-  border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor);
-  box-shadow: var(--salt-overlayable-shadow-scroll);
-}
-
-/* src/dialog/DialogHeader.css */
-.saltDialogHeader {
-  padding-bottom: var(--salt-spacing-100);
-  padding-left: var(--salt-spacing-300);
-  padding-right: var(--salt-spacing-300);
-  align-items: center;
-  display: flex;
-  flex-direction: row;
-  gap: var(--salt-spacing-100);
-  box-sizing: border-box;
-}
-.saltDialogHeader-header {
-  margin: 0;
-}
-.saltDialogHeader .saltStatusIndicator.saltIcon {
-  --icon-size: var(--salt-text-h2-lineHeight);
-}
-.saltDialogHeader-withAccent {
-  position: relative;
-}
-.saltDialogHeader-withAccent::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: var(--salt-spacing-100);
-  width: var(--salt-size-accent);
-  background: var(--salt-accent-background);
-}
-.saltDialogHeader-error::before {
-  background: var(--salt-status-error-borderColor);
-}
-.saltDialogHeader-info::before {
-  background: var(--salt-status-info-borderColor);
-}
-.saltDialogHeader-success::before {
-  background: var(--salt-status-success-borderColor);
-}
-.saltDialogHeader-warning::before {
-  background: var(--salt-status-warning-borderColor);
-}
-
 /* src/dropdown/Dropdown.css */
 .saltDropdown {
   --saltIcon-margin: 2px 0 0 8px;
@@ -2308,10 +2136,6 @@
   gap: var(--salt-spacing-100);
   position: relative;
   align-items: center;
-  margin-top: var(--salt-size-border);
-  margin-bottom: var(--salt-size-border);
-  border-top: var(--salt-size-border) var(--salt-container-borderStyle) transparent;
-  border-bottom: var(--salt-size-border) var(--salt-container-borderStyle) transparent;
   cursor: var(--salt-selectable-cursor-hover);
   box-sizing: border-box;
 }
@@ -2327,7 +2151,27 @@
 }
 .saltOption[aria-selected=true] {
   background: var(--salt-selectable-background-selected);
-  border-color: var(--salt-selectable-borderColor-selected);
+}
+.saltOption[aria-selected=true]::before {
+  content: "";
+  display: block;
+  position: absolute;
+  top: -1px;
+  bottom: -1px;
+  left: 0;
+  width: 100%;
+}
+.saltOption[aria-selected=true]::before {
+  border-top: var(--salt-size-border) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);
+  border-bottom: var(--salt-size-border) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);
+}
+.saltOption[aria-selected=true]:first-of-type::before {
+  border-top: unset;
+  top: 0;
+}
+.saltOption[aria-selected=true]:last-of-type::before {
+  border-bottom: unset;
+  bottom: 0;
 }
 .saltOption[aria-disabled=true] {
   color: var(--salt-content-primary-foreground-disabled);
@@ -2362,6 +2206,9 @@
   max-height: inherit;
   min-height: inherit;
   box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--salt-size-border);
 }
 .saltOptionList-collapsed {
   display: none;
@@ -2388,17 +2235,9 @@
   width: max-content;
 }
 .saltOverlayPanelBase-container {
-  animation: fade-in var(--salt-duration-perceptible) ease-in-out;
+  animation: var(--salt-animation-fade-in-center);
   position: relative;
 }
-@keyframes fade-in {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
 .saltOverlayPanelBase-content {
   overflow: auto;
   padding: var(--saltOverlay-content-padding, var(--salt-spacing-100) 0 var(--salt-spacing-100) var(--salt-spacing-100));
@@ -2435,6 +2274,223 @@
   }
 }
 
+/* src/pill-input/PillInput.css */
+.saltPillInput {
+  --input-borderColor: var(--salt-editable-borderColor);
+  --input-borderStyle: var(--salt-editable-borderStyle);
+  --input-outlineColor: var(--salt-focused-outlineColor);
+  --input-borderWidth: var(--salt-size-border);
+  align-items: center;
+  background: var(--saltInput-background, var(--input-background));
+  color: var(--saltInput-color, var(--salt-content-primary-foreground));
+  display: inline-flex;
+  font-family: var(--salt-text-fontFamily);
+  font-size: var(--saltInput-fontSize, var(--salt-text-fontSize));
+  line-height: var(--saltInput-lineHeight, var(--salt-text-lineHeight));
+  min-height: var(--saltInput-minHeight, var(--salt-size-base));
+  min-width: var(--saltInput-minWidth, 4em);
+  padding-left: var(--saltInput-paddingLeft, var(--salt-spacing-50));
+  padding-right: var(--saltInput-paddingRight, var(--salt-spacing-100));
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+}
+.saltPillInput-truncate {
+  height: var(--salt-size-base);
+}
+.saltPillInput-truncate .saltPillInput-inputWrapper {
+  flex-wrap: nowrap;
+}
+.saltPillInput:hover {
+  --input-borderStyle: var(--salt-editable-borderStyle-hover);
+  --input-borderColor: var(--salt-editable-borderColor-hover);
+  background: var(--saltInput-background-hover, var(--input-background-hover));
+  cursor: var(--salt-editable-cursor-hover);
+}
+.saltPillInput:active {
+  --input-borderColor: var(--salt-editable-borderColor-active);
+  --input-borderStyle: var(--salt-editable-borderStyle-active);
+  --input-borderWidth: var(--salt-editable-borderWidth-active);
+  background: var(--saltInput-background-active, var(--input-background-active));
+  cursor: var(--salt-editable-cursor-active);
+}
+.saltPillInput-primary {
+  --input-background: var(--salt-editable-primary-background);
+  --input-background-active: var(--salt-editable-primary-background-active);
+  --input-background-hover: var(--salt-editable-primary-background-hover);
+  --input-background-disabled: var(--salt-editable-primary-background-disabled);
+  --input-background-readonly: var(--salt-editable-primary-background-readonly);
+}
+.saltPillInput-secondary {
+  --input-background: var(--salt-editable-secondary-background);
+  --input-background-active: var(--salt-editable-secondary-background-active);
+  --input-background-hover: var(--salt-editable-secondary-background-active);
+  --input-background-disabled: var(--salt-editable-secondary-background-disabled);
+  --input-background-readonly: var(--salt-editable-secondary-background-readonly);
+}
+.saltPillInput-error,
+.saltPillInput-error:hover {
+  --input-background: var(--salt-status-error-background);
+  --input-background-active: var(--salt-status-error-background);
+  --input-background-hover: var(--salt-status-error-background);
+  --input-borderColor: var(--salt-status-error-borderColor);
+  --input-outlineColor: var(--salt-status-error-borderColor);
+}
+.saltPillInput-warning,
+.saltPillInput-warning:hover {
+  --input-background: var(--salt-status-warning-background);
+  --input-background-active: var(--salt-status-warning-background);
+  --input-background-hover: var(--salt-status-warning-background);
+  --input-borderColor: var(--salt-status-warning-borderColor);
+  --input-outlineColor: var(--salt-status-warning-borderColor);
+}
+.saltPillInput-success,
+.saltPillInput-success:hover {
+  --input-background: var(--salt-status-success-background);
+  --input-background-active: var(--salt-status-success-background);
+  --input-background-hover: var(--salt-status-success-background);
+  --input-borderColor: var(--salt-status-success-borderColor);
+  --input-outlineColor: var(--salt-status-success-borderColor);
+}
+.saltPillInput-input {
+  background: none;
+  border: none;
+  box-sizing: content-box;
+  color: inherit;
+  cursor: inherit;
+  display: block;
+  flex: 1;
+  font: inherit;
+  height: 100%;
+  letter-spacing: var(--saltInput-letterSpacing, 0);
+  margin: 0;
+  min-width: 0;
+  overflow: hidden;
+  padding: 0;
+  text-align: var(--input-textAlign);
+  width: 100%;
+}
+.saltPillInput-input:focus {
+  outline: none;
+}
+.saltPillInput-input::selection {
+  background: var(--salt-content-foreground-highlight);
+}
+.saltPillInput-input::placeholder {
+  color: var(--salt-content-secondary-foreground);
+  font-weight: var(--salt-text-fontWeight-small);
+}
+.saltPillInput-focused {
+  --input-borderColor: var(--input-outlineColor);
+  --input-borderWidth: var(--salt-editable-borderWidth-active);
+  outline: var(--saltInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--input-outlineColor));
+}
+.saltPillInput.saltPillInput-readOnly {
+  --input-borderColor: var(--salt-editable-borderColor-readonly);
+  --input-borderStyle: var(--salt-editable-borderStyle-readonly);
+  --input-borderWidth: var(--salt-size-border);
+  background: var(--input-background-readonly);
+  cursor: var(--salt-editable-cursor-readonly);
+}
+.saltPillInput-focused.saltPillInput-disabled {
+  --input-borderWidth: var(--salt-size-border);
+  outline: none;
+}
+.saltPillInput-focused.saltPillInput-readOnly {
+  --input-borderWidth: var(--salt-size-border);
+}
+.saltPillInput-disabled .saltPillInput-input::selection {
+  background: none;
+}
+.saltPillInput.saltPillInput-disabled,
+.saltPillInput.saltPillInput-disabled:hover,
+.saltPillInput.saltPillInput-disabled:active {
+  --input-borderColor: var(--salt-editable-borderColor-disabled);
+  --input-borderStyle: var(--salt-editable-borderStyle-disabled);
+  --input-borderWidth: var(--salt-size-border);
+  background: var(--input-background-disabled);
+  cursor: var(--salt-editable-cursor-disabled);
+  color: var(--saltInput-color-disabled, var(--salt-content-primary-foreground-disabled));
+}
+.saltPillInput-activationIndicator {
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  position: absolute;
+  border-bottom: var(--input-borderWidth) var(--input-borderStyle) var(--input-borderColor);
+}
+.saltPillInput-startAdornmentContainer {
+  align-items: center;
+  display: inline-flex;
+  padding-right: var(--salt-spacing-100);
+  column-gap: var(--salt-spacing-100);
+}
+.saltPillInput-endAdornmentContainer {
+  align-items: center;
+  display: inline-flex;
+  padding-left: var(--salt-spacing-100);
+  padding-top: var(--salt-spacing-50);
+  column-gap: var(--salt-spacing-100);
+  align-self: flex-start;
+}
+.saltPillInput-readOnly .saltPillInput-startAdornmentContainer {
+  margin-left: var(--salt-spacing-50);
+}
+.saltPillInput-startAdornmentContainer .saltButton ~ .saltButton {
+  margin-left: calc(-1 * var(--salt-spacing-50));
+}
+.saltPillInput-endAdornmentContainer .saltButton ~ .saltButton {
+  margin-left: calc(-1 * var(--salt-spacing-50));
+}
+.saltPillInput-startAdornmentContainer .saltButton:first-child {
+  margin-left: calc(var(--salt-spacing-50) * -1);
+}
+.saltPillInput-endAdornmentContainer .saltButton:last-child {
+  margin-right: calc(var(--salt-spacing-50) * -1);
+}
+.saltPillInput-startAdornmentContainer > .saltButton,
+.saltPillInput-endAdornmentContainer > .saltButton {
+  --saltButton-padding: var(--salt-spacing-50);
+  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));
+}
+.saltPillInput-inputWrapper {
+  display: flex;
+  gap: var(--salt-spacing-50);
+  align-items: center;
+  flex: 1;
+  padding: var(--salt-spacing-50) 0;
+  flex-wrap: wrap;
+  max-height: inherit;
+  height: inherit;
+  overflow-y: auto;
+  box-sizing: border-box;
+}
+.saltPillInput-pillList {
+  display: contents;
+}
+.saltPillInput .saltPill:focus-visible {
+  background: var(--salt-selectable-background-hover);
+  outline: none;
+}
+.saltPillInput .saltPill:hover {
+  background: var(--salt-selectable-background-hover);
+}
+.saltPillInput .saltPill:active {
+  background: var(--salt-actionable-primary-background-active);
+  --saltPill-color: var(--salt-actionable-primary-foreground-active);
+  --saltIcon-color: var(--salt-actionable-primary-foreground-active);
+}
+div[role=listitem] {
+  display: inline;
+}
+.saltPillInput-overflowIndicator {
+  width: calc(var(--salt-size-base) - var(--salt-spacing-100));
+  height: calc(var(--salt-size-base) - var(--salt-spacing-100));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 /* src/query-input/QueryInput.css */
 .saltQueryInput {
 }
@@ -3246,6 +3302,11 @@
   font-weight: var(--salt-text-fontWeight);
   line-height: var(--salt-text-lineHeight);
 }
+.saltTabstripNext-container {
+  display: inherit;
+  width: 100%;
+  position: relative;
+}
 .saltTabstripNext-main {
   padding-left: var(--salt-spacing-300);
   padding-right: var(--salt-spacing-300);
@@ -4319,4 +4380,4 @@
   margin: calc(var(--salt-size-unit) / 2) 0;
 }
 
-/* src/c6e1d4ac-675b-4241-bf4e-3d3c78a6ade3.css */
+/* src/55c2911a-9f10-4671-b3ef-bce78434a397.css */

package/dist-cjs/combo-box-next/ComboBoxNext.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltComboBoxNext-focused {\n  outline: var(--salt-focused-outline);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=ComboBoxNext.css.js.map

package/dist-cjs/combo-box-next/ComboBoxNext.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboBoxNext.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist-cjs/combo-box-next/ComboBoxNext.js

@@ -12,6 +12,10 @@ var react = require('@floating-ui/react');
 var icons = require('@salt-ds/icons');
 var useComboBoxNext = require('./useComboBoxNext.js');
 var OptionList = require('../option/OptionList.js');
+var PillInput = require('../pill-input/PillInput.js');
+var window = require('@salt-ds/window');
+var styles = require('@salt-ds/styles');
+var ComboBoxNext$1 = require('./ComboBoxNext.css.js');
 
 const withBaseName = core.makePrefixer("saltComboBoxNext");
 const ComboBoxNext = React.forwardRef(function ComboBox(props, ref) {
@@ -39,8 +43,15 @@ const ComboBoxNext = React.forwardRef(function ComboBox(props, ref) {
     value,
     defaultValue,
     valueToString = ListControlState.defaultValueToString,
+    truncate,
     ...rest
   } = props;
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-combo-box-next",
+    css: ComboBoxNext$1,
+    window: targetWindow
+  });
   const {
     a11yProps: { "aria-labelledby": formFieldLabelledBy } = {},
     disabled: formFieldDisabled,
@@ -218,6 +229,11 @@ const ComboBoxNext = React.forwardRef(function ComboBox(props, ref) {
     });
     onChange == null ? void 0 : onChange(event);
   };
+  const handlePillRemove = (event, index) => {
+    event.stopPropagation();
+    const removed = selectedState[index];
+    select(event, getOptionsMatching((option) => option.value === removed)[0]);
+  };
   const handleListMouseOver = () => {
     setFocusVisibleState(false);
   };
@@ -262,8 +278,15 @@ const ComboBoxNext = React.forwardRef(function ComboBox(props, ref) {
   return /* @__PURE__ */ jsxRuntime.jsxs(ListControlContext.ListControlContext.Provider, {
     value: listControl,
     children: [
-      /* @__PURE__ */ jsxRuntime.jsx(core.Input, {
-        className: clsx.clsx(withBaseName(), className),
+      /* @__PURE__ */ jsxRuntime.jsx(PillInput.PillInput, {
+        className: clsx.clsx(
+          withBaseName(),
+          {
+            [withBaseName("focused")]: focusedState,
+            [withBaseName("focusVisible")]: focusVisibleState
+          },
+          className
+        ),
         endAdornment: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
           children: [
             endAdornment,
@@ -307,7 +330,12 @@ const ComboBoxNext = React.forwardRef(function ComboBox(props, ref) {
           onBlur,
           onFocus: handleFocus,
           ...rest
-        })
+        }),
+        pills: multiselect ? selectedState.map((item) => valueToString(item)) : [],
+        truncate: truncate && !focusedState && !openState,
+        onPillRemove: handlePillRemove,
+        hidePillClose: !focusedState || readOnly,
+        emptyReadOnlyMarker: readOnly && selectedState.length > 0 ? "" : void 0
       }),
       /* @__PURE__ */ jsxRuntime.jsx(FloatingComponent, {
         open: (openState || focusedState) && !readOnly && children != void 0,