@jobber/components 8.22.0 → 8.23.0

package/dist/resolveAriaLabelledBy-es.js

@@ -0,0 +1,162 @@
+import * as React from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+const defaultItemEquality = (itemValue, selectedValue) => Object.is(itemValue, selectedValue);
+function compareItemEquality(itemValue, selectedValue, comparer) {
+  if (itemValue == null || selectedValue == null) {
+    return Object.is(itemValue, selectedValue);
+  }
+  return comparer(itemValue, selectedValue);
+}
+function selectedValueIncludes(selectedValues, itemValue, comparer) {
+  if (!selectedValues || selectedValues.length === 0) {
+    return false;
+  }
+  return selectedValues.some(selectedValue => {
+    if (selectedValue === undefined) {
+      return false;
+    }
+    return compareItemEquality(itemValue, selectedValue, comparer);
+  });
+}
+function findItemIndex(itemValues, selectedValue, comparer) {
+  if (!itemValues || itemValues.length === 0) {
+    return -1;
+  }
+  return itemValues.findIndex(itemValue => {
+    if (itemValue === undefined) {
+      return false;
+    }
+    return compareItemEquality(itemValue, selectedValue, comparer);
+  });
+}
+function removeItem(selectedValues, itemValue, comparer) {
+  return selectedValues.filter(selectedValue => !compareItemEquality(itemValue, selectedValue, comparer));
+}
+
+function serializeValue(value) {
+  if (value == null) {
+    return '';
+  }
+  if (typeof value === 'string') {
+    return value;
+  }
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return String(value);
+  }
+}
+
+function isGroupedItems(items) {
+  return items != null && items.length > 0 && typeof items[0] === 'object' && items[0] != null && 'items' in items[0];
+}
+
+/**
+ * Checks if the items array contains an item with a null value that has a non-null label.
+ */
+function hasNullItemLabel(items) {
+  if (!Array.isArray(items)) {
+    return items != null && 'null' in items;
+  }
+  const arrayItems = items;
+  if (isGroupedItems(arrayItems)) {
+    for (const group of arrayItems) {
+      for (const item of group.items) {
+        if (item && item.value == null && item.label != null) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+  for (const item of arrayItems) {
+    if (item && item.value == null && item.label != null) {
+      return true;
+    }
+  }
+  return false;
+}
+function stringifyAsLabel(item, itemToStringLabel) {
+  if (itemToStringLabel && item != null) {
+    return itemToStringLabel(item) ?? '';
+  }
+  if (item && typeof item === 'object') {
+    if ('label' in item && item.label != null) {
+      return String(item.label);
+    }
+    if ('value' in item) {
+      return String(item.value);
+    }
+  }
+  return serializeValue(item);
+}
+function stringifyAsValue(item, itemToStringValue) {
+  if (itemToStringValue && item != null) {
+    return itemToStringValue(item) ?? '';
+  }
+  if (item && typeof item === 'object' && 'value' in item && 'label' in item) {
+    return serializeValue(item.value);
+  }
+  return serializeValue(item);
+}
+function resolveSelectedLabel(value, items, itemToStringLabel) {
+  function fallback() {
+    return stringifyAsLabel(value, itemToStringLabel);
+  }
+  if (itemToStringLabel && value != null) {
+    return itemToStringLabel(value);
+  }
+
+  // Custom object with explicit label takes precedence
+  if (value && typeof value === 'object' && 'label' in value && value.label != null) {
+    return value.label;
+  }
+
+  // Items provided as plain record map
+  if (items && !Array.isArray(items)) {
+    return items[value] ?? fallback();
+  }
+
+  // Items provided as array (flat or grouped)
+  if (Array.isArray(items)) {
+    const arrayItems = items;
+    const flatItems = isGroupedItems(arrayItems) ? arrayItems.flatMap(group => group.items) : arrayItems;
+    if (value == null || typeof value !== 'object') {
+      const match = flatItems.find(item => item.value === value);
+      if (match && match.label != null) {
+        return match.label;
+      }
+      return fallback();
+    }
+
+    // Object without explicit label: try matching by its `value` property
+    if ('value' in value) {
+      const match = flatItems.find(item => item && item.value === value.value);
+      if (match && match.label != null) {
+        return match.label;
+      }
+    }
+  }
+  return fallback();
+}
+function resolveMultipleLabels(values, items, itemToStringLabel) {
+  return values.reduce((acc, value, index) => {
+    if (index > 0) {
+      acc.push(', ');
+    }
+    acc.push(/*#__PURE__*/jsx(React.Fragment, {
+      children: resolveSelectedLabel(value, items, itemToStringLabel)
+    }, index));
+    return acc;
+  }, []);
+}
+
+function getDefaultLabelId(id) {
+  return id == null ? undefined : `${id}-label`;
+}
+function resolveAriaLabelledBy(fieldLabelId, localLabelId) {
+  return fieldLabelId ?? localLabelId;
+}
+
+export { resolveMultipleLabels as a, resolveSelectedLabel as b, compareItemEquality as c, defaultItemEquality as d, selectedValueIncludes as e, findItemIndex as f, removeItem as g, hasNullItemLabel as h, stringifyAsLabel as i, isGroupedItems as j, getDefaultLabelId as k, resolveAriaLabelledBy as r, stringifyAsValue as s };

package/dist/styles.css

@@ -5504,6 +5504,331 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   font-size: var(--typography--fontSize-small);
 }
 
+/* ============================================================
+   SelectPrimitive
+   Styled wrappers around BaseUI Select parts with Atlantis tokens.
+   No field structure abstraction — consumers compose their own.
+   ============================================================ */
+
+/* ------ Trigger ------ */
+
+.WQiJQH4jadQ- {
+  /* Field tokens */
+  --field--placeholder-color: var(--color-text--secondary);
+  --field--value-color: var(--color-heading);
+  --field--border-color: var(--color-border--interactive);
+  --field--height: var(--space-largest);
+  --field--padding-x: var(--space-base);
+  --field--background-color: var(--color-surface);
+  /* Space reserved on the right for the chevron icon */
+  --field--icon-area: calc(
+    var(--base-unit) * 1.25 + var(--field--padding-x) + var(--space-small)
+  );
+
+  display: -ms-flexbox;
+
+  display: flex;
+  position: relative;
+  -ms-flex-align: center;
+      align-items: center;
+  width: 100%;
+  height: 48px;
+  height: var(--field--height);
+  box-sizing: border-box;
+  padding: 0 calc(
+    16px * 1.25 + 16px + 8px
+  ) 0 16px;
+  padding: 0 var(--field--icon-area) 0 var(--field--padding-x);
+  border: 1px solid hsl(200, 13%, 87%);
+  border: var(--border-base) solid var(--field--border-color);
+  border-top-right-radius: 8px;
+  border-top-right-radius: var(
+    --public-field--top-right-radius,
+    var(--radius-base)
+  );
+  border-bottom-right-radius: 8px;
+  border-bottom-right-radius: var(
+    --public-field--bottom-right-radius,
+    var(--radius-base)
+  );
+  border-bottom-left-radius: 8px;
+  border-bottom-left-radius: var(
+    --public-field--bottom-left-radius,
+    var(--radius-base)
+  );
+  border-top-left-radius: 8px;
+  border-top-left-radius: var(
+    --public-field--top-left-radius,
+    var(--radius-base)
+  );
+  outline: none;
+  color: hsl(197, 90%, 12%);
+  color: var(--field--value-color);
+  font-family: inherit;
+  font-size: 14px;
+  font-size: var(--typography--fontSize-base);
+  text-align: left;
+  background-color: rgba(255, 255, 255, 1);
+  background-color: var(--field--background-color);
+  cursor: pointer;
+
+  transition: box-shadow 200ms ease-out,
+    border-color 200ms ease-out;
+
+  transition: box-shadow var(--timing-base) ease-out,
+    border-color var(--timing-base) ease-out;
+  -webkit-appearance: none;
+          appearance: none;
+}
+
+.WQiJQH4jadQ-:focus-visible,
+.WQiJQH4jadQ-[data-popup-open] {
+  box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px hsl(198, 12%, 57%);
+  box-shadow: var(--shadow-focus);
+}
+
+.WQiJQH4jadQ-:disabled {
+  --field--placeholder-color: var(--color-disabled);
+  --field--value-color: var(--color-disabled);
+  --field--background-color: var(--color-disabled--secondary);
+  --field--border-color: var(--color-border);
+  cursor: not-allowed;
+}
+
+.WQiJQH4jadQ-[data-readonly] {
+  --field--border-color: var(--color-border);
+  --field--background-color: var(--color-disabled--secondary);
+  pointer-events: none;
+  cursor: default;
+}
+
+.WQiJQH4jadQ-[data-invalid] {
+  --field--border-color: var(--color-critical);
+}
+
+/* ------ Value / placeholder text ------ */
+
+.P2HhjOjxY34- {
+  -ms-flex: 1;
+      flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  color: var(--field--value-color);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+.WQiJQH4jadQ-[data-placeholder] .P2HhjOjxY34- {
+  color: var(--field--placeholder-color);
+}
+
+/* ------ Chevron icon ------ */
+
+.cxgFUCKcXcw- {
+  display: -ms-flexbox;
+  display: flex;
+  position: absolute;
+  top: 50%;
+  right: var(--field--padding-x);
+  pointer-events: none;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+  -ms-flex-align: center;
+      align-items: center;
+}
+
+._3BEK4Z1gGis- {
+  display: -ms-flexbox;
+  display: flex;
+  transition: -webkit-transform 100ms;
+  transition: -webkit-transform var(--timing-quick);
+  transition: transform 100ms;
+  transition: transform var(--timing-quick);
+  transition: transform 100ms, -webkit-transform 100ms;
+  transition: transform var(--timing-quick), -webkit-transform var(--timing-quick);
+}
+
+.WQiJQH4jadQ-[data-popup-open] ._3BEK4Z1gGis- {
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
+}
+
+/* ============================================================
+   Popup / Dropdown — mirrors Menu dropdown styling
+   ============================================================ */
+
+.g221yZJtRrU- {
+  z-index: 1001;
+  z-index: var(--elevation-modal);
+}
+
+.vifRnCQ18ss- {
+  min-width: var(--anchor-width);
+  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1), 0px 4px 12px 0px rgba(0, 0, 0, 0.05);
+  box-shadow: var(--shadow-base);
+  box-sizing: border-box;
+  padding: 0;
+  border: 1px solid hsl(200, 13%, 87%);
+  border: var(--border-base) solid var(--color-border);
+  border-radius: 8px;
+  border-radius: var(--radius-base);
+  outline: none;
+  overflow: hidden;
+  background-color: rgba(255, 255, 255, 1);
+  background-color: var(--color-surface);
+}
+
+.WsOmdkQ0SWU- {
+  --menu-space: var(--space-small);
+  --menu-item-min-height: calc(var(--base-unit) * 2.5);
+  --menu-item-padding-y: var(--space-small);
+  --menu-item-padding-x: var(--space-small);
+  --menu-item-gap: var(--space-small);
+
+  display: -ms-flexbox;
+
+  display: flex;
+  -ms-flex-direction: column;
+      flex-direction: column;
+  max-height: min(
+    72vh,
+    max(0px, calc(var(--available-height) - 16px))
+  );
+  max-height: min(
+    72vh,
+    max(0px, calc(var(--available-height) - var(--space-base)))
+  );
+  box-sizing: border-box;
+  padding: 8px;
+  padding: var(--menu-space);
+  border-radius: inherit;
+  overflow: auto;
+}
+
+/* ------ Item ------ */
+
+.wQ2wXu1YH-k- {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: center;
+      align-items: center;
+  gap: var(--menu-item-gap);
+  width: 100%;
+  min-height: var(--menu-item-min-height);
+  box-sizing: border-box;
+  padding: var(--menu-item-padding-y) var(--menu-item-padding-x);
+  border: none;
+  border-radius: 4px;
+  border-radius: var(--radius-small);
+  outline: none;
+  color: inherit;
+  font-family: inherit;
+  font-size: 14px;
+  font-size: var(--typography--fontSize-base);
+  text-align: left;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+      user-select: none;
+  background: transparent;
+  cursor: pointer;
+
+  transition: background-color 200ms ease-out;
+
+  transition: background-color var(--timing-base) ease-out;
+}
+
+.wQ2wXu1YH-k-[data-highlighted] {
+  background-color: hsl(43, 18%, 92%);
+  background-color: var(--color-surface--hover);
+}
+
+.wQ2wXu1YH-k-[data-disabled] {
+  color: hsl(0, 0%, 58%);
+  color: var(--color-disabled);
+  cursor: not-allowed;
+}
+
+/* ------ Item text ------ */
+
+._--Vi-17OUiU- {
+  -ms-flex: 1;
+      flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ------ Item indicator (checkmark) ------ */
+
+.CfjooR3I8Jc- {
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  /* Hidden by default; revealed via CSS when the item is selected.
+     Using visibility (not display) so layout width is always reserved. */
+  visibility: hidden;
+  min-width: calc(16px * 1.5);
+  min-width: calc(var(--base-unit) * 1.5);
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+  -ms-flex-align: center;
+      align-items: center;
+  -ms-flex-pack: center;
+      justify-content: center;
+}
+
+.wQ2wXu1YH-k-[data-selected] .CfjooR3I8Jc- {
+  visibility: visible;
+}
+
+/* ------ Separator ------ */
+
+.lI5-MyBERFY- {
+  margin: 8px 0;
+  margin: var(--space-small) 0;
+  border: none;
+  border-bottom: 1px solid hsl(200, 13%, 87%);
+  border-bottom: var(--border-base) solid var(--color-border);
+}
+
+/* ------ Group ------ */
+
+._21z9KBWR06w- {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-direction: column;
+      flex-direction: column;
+}
+
+._21z9KBWR06w-:not(:last-child) {
+  padding-bottom: 8px;
+  padding-bottom: var(--space-small);
+  border-bottom: 1px solid hsl(200, 13%, 87%);
+  border-bottom: var(--border-base) solid var(--color-border);
+}
+
+._21z9KBWR06w-:not(:first-child) {
+  margin-top: 8px;
+  margin-top: var(--space-small);
+}
+
+/* ------ Group label ------ */
+
+.ZhtKkgZiSQI- {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: center;
+      align-items: center;
+  padding: 8px 8px 4px;
+  padding: var(--space-small) var(--space-small) var(--space-smaller);
+  color: hsl(197, 21%, 36%);
+  color: var(--color-text--secondary);
+  font-size: 14px;
+  font-size: var(--typography--fontSize-base);
+  font-weight: 400;
+}
+
 .kub1yKbFFN0- {
   display: -ms-flexbox;
   display: flex;