@recursica/adapter-mui-v7 1.0.0

package/src/components/Dropdown/Dropdown.module.css

@@ -0,0 +1,535 @@
+/* Brand-layer exemptions (recursica-allow-brand) — see recursica-token-analyzer README.md.
+ * Global hover/focus/disabled state tokens (recursica_variables_scoped.css header, 'Hover & Focus states' / 'Disabled state' — implicit rule for every interactive element; components must not define their own per-component treatment).
+ *   recursica-allow-brand: --recursica_brand_states_focus_blur
+ *   recursica-allow-brand: --recursica_brand_states_focus_border-size
+ *   recursica-allow-brand: --recursica_brand_states_focus_color
+ *   recursica-allow-brand: --recursica_brand_states_focus_margin
+ *   recursica-allow-brand: --recursica_brand_states_hover_color
+ *   recursica-allow-brand: --recursica_brand_states_hover_opacity
+ * No ui-kit token exists for the input-to-menu gap (see `.dropdown` below) — reusing the same
+ * generic dimension token AutoComplete.module.css's `.popper` uses, instead of hardcoding an
+ * unexplained pixel value.
+ *   recursica-allow-brand: --recursica_brand_dimensions_general_default
+ */
+
+/* LAYOUT SPACING OVERRIDES:
+   - Sets the --form-control-margin-bottom spacing hook to map component-specific layout tokens.
+   - Also sets the --dropdown-control-{max,min}-width hooks consumed inline in Dropdown.tsx, since
+     the token schema no longer provides a single layout-agnostic min/max width. */
+.layoutOverride {
+  --form-control-margin-bottom: var(
+    --recursica_ui-kit_components_dropdown_variants_layouts_stacked_properties_top-bottom-margin
+  );
+  --dropdown-control-max-width: var(
+    --recursica_ui-kit_components_dropdown_variants_layouts_stacked_properties_max-width
+  );
+  --dropdown-control-min-width: var(
+    --recursica_ui-kit_components_dropdown_variants_layouts_stacked_properties_min-width
+  );
+}
+
+.layoutOverride[data-form-layout="side-by-side"] {
+  --form-control-margin-bottom: var(
+    --recursica_ui-kit_components_dropdown_variants_layouts_side-by-side_properties_top-bottom-margin
+  );
+  --dropdown-control-max-width: var(
+    --recursica_ui-kit_components_dropdown_variants_layouts_side-by-side_properties_max-width
+  );
+  --dropdown-control-min-width: var(
+    --recursica_ui-kit_components_dropdown_variants_layouts_side-by-side_properties_min-width
+  );
+}
+
+/* HARDCODED VALUES:
+   - border-width: 1px. Native geometric boundary for the input box.
+   - border-style: solid. Native structural rendering rule.
+   - outline: none. Bypassing browser focus rings to rely strictly on Recursica focus states natively.
+   - flex/layout: display: flex on the root wrapper safely encapsulating internal section rendering.
+   - placeholder opacity: 0.5. The dropdown parameters currently lack a dedicated placeholder-opacity variable.
+*/
+
+.root {
+  display: flex;
+  position: relative;
+  width: 100%;
+  min-height: var(--recursica_ui-kit_components_dropdown_properties_min-height);
+
+  /* Override Mantine native Input variables governing section spacing padding mathematics safely */
+  --input-left-section-size: calc(
+    var(--recursica_ui-kit_components_dropdown_properties_horizontal-padding) +
+      var(--recursica_ui-kit_components_dropdown_properties_icon-size) +
+      var(--recursica_ui-kit_components_dropdown_properties_icon-text-gap)
+  );
+  --input-right-section-size: calc(
+    var(--recursica_ui-kit_components_dropdown_properties_horizontal-padding) +
+      var(--recursica_ui-kit_components_dropdown_properties_icon-size) +
+      var(--recursica_ui-kit_components_dropdown_properties_icon-text-gap)
+  );
+}
+
+.input {
+  /* Structural Overrides */
+  width: 100%;
+  box-sizing: border-box;
+  margin: 0;
+
+  /* Box Geometry
+     `!important` throughout: MUI's own `.MuiSelect-select`/`.MuiOutlinedInput-input` styled rules
+     (e.g. `minHeight: 1.4375em`, and outlined-variant default padding) are equal-specificity
+     single-class selectors injected by emotion at runtime, after this CSS module's own stylesheet
+     — on that tie they win by source order, which is what silently shrank the control below the
+     min-height token (measured 42.8px vs Mantine's 48px) even though the token was already wired
+     here. Same root cause as the notchedOutline double-border fix below. */
+  min-height: var(
+    --recursica_ui-kit_components_dropdown_properties_min-height
+  ) !important;
+  padding-top: var(
+    --recursica_ui-kit_components_dropdown_properties_vertical-padding
+  ) !important;
+  padding-bottom: var(
+    --recursica_ui-kit_components_dropdown_properties_vertical-padding
+  ) !important;
+  padding-left: var(
+    --recursica_ui-kit_components_dropdown_properties_horizontal-padding
+  ) !important;
+  padding-right: var(
+    --recursica_ui-kit_components_dropdown_properties_horizontal-padding
+  ) !important;
+  border-radius: var(
+    --recursica_ui-kit_components_dropdown_properties_border-radius
+  );
+  border-width: 1px;
+  border-style: solid;
+
+  /* Strict Typography Unification */
+  font-family: var(
+    --recursica_ui-kit_components_dropdown_properties_text_font-family
+  );
+  font-size: var(
+    --recursica_ui-kit_components_dropdown_properties_text_font-size
+  );
+  font-style: var(
+    --recursica_ui-kit_components_dropdown_properties_text_font-style
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_dropdown_properties_text_font-weight
+  );
+  letter-spacing: var(
+    --recursica_ui-kit_components_dropdown_properties_text_letter-spacing
+  );
+  line-height: var(
+    --recursica_ui-kit_components_dropdown_properties_text_line-height
+  );
+  text-decoration: var(
+    --recursica_ui-kit_components_dropdown_properties_text_text-decoration
+  );
+  text-transform: var(
+    --recursica_ui-kit_components_dropdown_properties_text_text-transform
+  );
+
+  /* Base State Default Execution */
+  background-color: var(
+    --recursica_ui-kit_components_dropdown_properties_colors_background-color
+  );
+  border-color: var(
+    --recursica_ui-kit_components_dropdown_properties_colors_border-color
+  );
+  color: var(
+    --recursica_ui-kit_components_dropdown_properties_colors_text-color
+  );
+
+  outline: none;
+}
+
+.input::placeholder {
+  /* HARDCODE: Dropdown properties currently missing placeholder-opacity tokens from Figma JSON */
+  opacity: 0.5;
+  color: inherit;
+}
+
+/* MUI's Select has no native placeholder concept (it isn't a text <input>) — the closed field's
+   `renderValue` wraps the placeholder string in this span instead, matching `.input::placeholder`
+   above so an empty Select reads the same as an empty text control. */
+.placeholder {
+  opacity: 0.5;
+  color: inherit;
+}
+
+/* MUI's outlined variant renders its own `<fieldset class="MuiOutlinedInput-notchedOutline">` as a
+   separate absolutely-positioned sibling of `.input` — independent of the border we already draw
+   on `.input` above. Left alone, it shows its own default/focused/error border (theme grays/blue/
+   red) UNDERNEATH ours, which is what produced the double border (bug: static-error story showing
+   a leftover dark border under the red one) and MUI's own blue focus ring leaking in alongside the
+   Recursica focus box-shadow. We own the border entirely via `.input`, so this native outline is
+   never needed — always neutralize it. */
+.root :global(.MuiOutlinedInput-notchedOutline) {
+  border: none !important;
+}
+
+/* Dynamic Padding Overrides */
+.root[data-with-left-section] .input {
+  padding-left: var(--input-left-section-size) !important;
+}
+
+.root[data-with-right-section] .input {
+  padding-right: var(--input-right-section-size) !important;
+}
+
+/* Flexible End-Caps (Icons, actions)
+   Absolutely positioned within `.root` (already `position: relative`), NOT flex siblings of
+   `.input` in the row. MUI passes `startAdornment`/`endAdornment` as ordinary flex children next
+   to the select div, so as siblings they'd add their own width on top of `.input`'s already-100%-
+   width box instead of sharing it — the reserved padding above only carves out space *inside*
+   `.input`'s own bordered box, so a sibling rendered outside that box overflows past the visible
+   border (bug: leading icon / the clear+chevron pair sat outside the control's right edge).
+   Absolute positioning is Mantine's own technique for the equivalent `Input.Section` slot, which
+   is why the mantine-adapter never had this bug. */
+.section {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--recursica_ui-kit_components_dropdown_properties_icon-text-gap);
+  pointer-events: none;
+}
+
+.section[data-position="left"] {
+  left: 0;
+  justify-content: flex-start;
+  padding-left: var(
+    --recursica_ui-kit_components_dropdown_properties_horizontal-padding
+  );
+}
+
+.section[data-position="right"] {
+  right: 0;
+  justify-content: flex-end;
+  padding-right: var(
+    --recursica_ui-kit_components_dropdown_properties_horizontal-padding
+  );
+  /* Unlike the left section (decorative icon only), this one can hold the interactive clear
+     button, so it needs to opt back into pointer events itself. */
+  pointer-events: auto;
+}
+
+.section :global(svg) {
+  width: var(--recursica_ui-kit_components_dropdown_properties_icon-size);
+  height: var(--recursica_ui-kit_components_dropdown_properties_icon-size);
+  color: var(
+    --recursica_ui-kit_components_dropdown_properties_colors_leading-icon
+  );
+}
+
+.section[data-position="right"] :global(svg) {
+  color: var(
+    --recursica_ui-kit_components_dropdown_properties_colors_trailing-icon
+  );
+}
+
+/* Clear ("x") button rendered inside the right section when `clearable` and a value is present.
+   Sized/colored via the same icon tokens as the rest of the right section (rather than any
+   default browser/library button chrome), same treatment as the mantine-adapter's equivalent
+   fix to its native clear button (see DROPDOWN_IMPLEMENTATION_NOTES.md). */
+.clearButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--recursica_ui-kit_components_dropdown_properties_icon-size);
+  height: var(--recursica_ui-kit_components_dropdown_properties_icon-size);
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: transparent;
+  color: var(
+    --recursica_ui-kit_components_dropdown_properties_colors_trailing-icon
+  );
+  cursor: pointer;
+  outline: none;
+}
+
+.clearButton svg {
+  width: 100%;
+  height: 100%;
+}
+
+.clearButton:focus-visible {
+  box-shadow:
+    0 0 0 var(--recursica_brand_states_focus_border-size)
+      var(--recursica_brand_states_focus_color),
+    0 0 var(--recursica_brand_states_focus_blur)
+      var(--recursica_brand_states_focus_margin)
+      var(--recursica_brand_states_focus_color);
+}
+
+/* -------------------------------------
+   STATE CASCADE ARCHITECTURE
+-------------------------------------- */
+
+/* Focus State Mapping (Triggered internally via browser pseudo-pseudo-class) */
+/* The token schema no longer provides per-component focus colors; apply the generic focus ring
+   tokens as a box-shadow ring instead of a color swap. */
+.input:focus-within,
+.input:focus {
+  box-shadow:
+    0 0 0 var(--recursica_brand_states_focus_border-size)
+      var(--recursica_brand_states_focus_color),
+    0 0 var(--recursica_brand_states_focus_blur)
+      var(--recursica_brand_states_focus_margin)
+      var(--recursica_brand_states_focus_color);
+}
+
+/* Error State Mapping (Propagated strictly down from the wrapper DOM context) */
+.root[data-error] .input {
+  border-color: var(
+    --recursica_ui-kit_components_dropdown_variants_states_error_properties_colors_border-color
+  ) !important;
+  background-color: var(
+    --recursica_ui-kit_components_dropdown_variants_states_error_properties_colors_background-color
+  ) !important;
+  color: var(
+    --recursica_ui-kit_components_dropdown_variants_states_error_properties_colors_text-color
+  ) !important;
+}
+
+.root[data-error] .section[data-position="left"] :global(svg) {
+  color: var(
+    --recursica_ui-kit_components_dropdown_variants_states_error_properties_colors_leading-icon
+  ) !important;
+}
+
+.root[data-error] .section[data-position="right"] :global(svg) {
+  color: var(
+    --recursica_ui-kit_components_dropdown_variants_states_error_properties_colors_trailing-icon
+  ) !important;
+}
+
+/* Disabled State Mapping (Propagated strictly down from the wrapper DOM context) */
+.root[data-disabled] .input {
+  border-color: var(
+    --recursica_ui-kit_components_dropdown_variants_states_disabled_properties_colors_border-color
+  ) !important;
+  background-color: var(
+    --recursica_ui-kit_components_dropdown_variants_states_disabled_properties_colors_background-color
+  ) !important;
+  color: var(
+    --recursica_ui-kit_components_dropdown_variants_states_disabled_properties_colors_text-color
+  ) !important;
+  opacity: var(
+    --recursica_ui-kit_components_dropdown_variants_states_disabled_properties_opacity
+  ) !important;
+  cursor: not-allowed;
+}
+
+.root[data-disabled] .section[data-position="left"] :global(svg) {
+  color: var(
+    --recursica_ui-kit_components_dropdown_variants_states_disabled_properties_colors_leading-icon
+  ) !important;
+}
+
+.root[data-disabled] .section[data-position="right"] :global(svg) {
+  color: var(
+    --recursica_ui-kit_components_dropdown_variants_states_disabled_properties_colors_trailing-icon
+  ) !important;
+}
+
+/* -------------------------------------
+   DROPDOWN & OPTIONS ARCHITECTURE
+-------------------------------------- */
+
+.dropdown {
+  background-color: var(
+    --recursica_ui-kit_components_dropdown_properties_colors_background-color
+  );
+  border: 1px solid
+    var(--recursica_ui-kit_components_dropdown_properties_colors_border-color);
+  border-radius: var(
+    --recursica_ui-kit_components_dropdown_properties_border-radius
+  );
+  overflow: hidden;
+  /* Same missing input-to-menu gap as AutoComplete.module.css's `.popper` — MUI's Select renders
+     this menu flush against the input, with no offset token in the schema either. Reusing the
+     same --recursica_brand_dimensions_general_default stand-in for consistency; see AutoComplete's
+     comment for the full reasoning. No inline `margin: 0` to beat here (Select's Menu is a
+     Popover, not a Popper — it positions via computed `top`/`left`, not an inline margin), so no
+     `!important` needed. */
+  margin-top: var(--recursica_brand_dimensions_general_default);
+}
+
+/* The visible top/bottom gap inside the open menu, before/after the option list, is MUI's own
+   `.MuiList-padding` default (8px) on the inner `<ul>` — not driven by any Recursica token. Wire
+   it to the same dropdown vertical-padding token the closed control itself uses, matching the
+   mantine-adapter fix (its `.dropdown` had the same gap, driven by Mantine's own untokenized
+   4px `--combobox-padding` default). `!important` needed to beat MUI's own emotion-generated
+   `.MuiList-padding` rule at equal selector specificity. */
+.dropdown :global(.MuiMenu-list) {
+  padding-top: var(
+    --recursica_ui-kit_components_dropdown_properties_vertical-padding
+  ) !important;
+  padding-bottom: var(
+    --recursica_ui-kit_components_dropdown_properties_vertical-padding
+  ) !important;
+}
+
+.option {
+  font-family: var(
+    --recursica_ui-kit_components_dropdown_properties_text_font-family
+  );
+  font-size: var(
+    --recursica_ui-kit_components_dropdown_properties_text_font-size
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_dropdown_properties_text_font-weight
+  );
+  color: var(
+    --recursica_ui-kit_components_dropdown_properties_colors_text-color
+  );
+  /* Padding/inter-item gap reuse the menu-item component's tokens (same reasoning as the icon/
+     supporting-text tokens below) instead of an arbitrary scaled dropdown padding — matches the
+     mantine-adapter's equivalent Menu.module.css `.item` padding + gap exactly. `!important` on
+     padding: MUI's `MenuItem` root sets its own paddingTop/Bottom (MenuItem.js) plus paddingLeft/
+     Right 16px via its `gutters` variant, both at equal selector specificity to this rule, so
+     without it the winner depends on emotion's injection order rather than this stylesheet. */
+  padding: var(
+      --recursica_ui-kit_components_menu-item_properties_vertical-padding
+    )
+    var(--recursica_ui-kit_components_menu-item_properties_horizontal-padding) !important;
+  margin-bottom: var(--recursica_ui-kit_components_menu_properties_item-gap);
+  cursor: pointer;
+  /* MUI's `MenuItem` also forces `white-space: nowrap` by default; override it so long
+     labels/supportingText wrap instead of overflowing. Same equal-specificity reasoning. */
+  white-space: normal !important;
+}
+
+.option:last-of-type {
+  margin-bottom: 0;
+}
+
+/* No per-option hovered token exists in the schema; use the generic overlay tint (same technique
+   as the Mantine reference implementation) to highlight a hovered-but-not-selected option.
+   `!important` is required here: MUI's own `.Mui-selected` (and `.Mui-selected:hover`) classes
+   carry their own default primary-blue tint at equal selector specificity, and without it that
+   default tint wins over this token-driven one. */
+.option[data-hovered="true"],
+.option:hover {
+  background-color: color-mix(
+    in srgb,
+    var(--recursica_brand_states_hover_color)
+      calc(var(--recursica_brand_states_hover_opacity) * 100%),
+    transparent
+  ) !important;
+}
+
+/* No dedicated dropdown-option "selected" token exists in the schema either, but the menu-item
+   component's selected-state colors are the closest real token family for the same concept (a
+   selected row in a list) — reused here rather than the neutral hover tint above, which is what
+   previously made the selected option read as grey instead of Recursica's brand color. */
+.option[data-selected="true"],
+.option[data-combobox-selected="true"] {
+  background-color: var(
+    --recursica_ui-kit_components_menu-item_variants_selection-states_selected_properties_colors_background-color
+  ) !important;
+  color: var(
+    --recursica_ui-kit_components_menu-item_variants_selection-states_selected_properties_colors_text-color
+  ) !important;
+}
+
+/* Rich option content (leadingIcon/supportingText — see MANTINE_ADAPTER_RICH_OPTION_DATA.md). No
+   dedicated dropdown-option icon or supporting-text token exists in the schema either; reuse the
+   menu-item component's tokens for the same reason the selected-state colors above do. Matches
+   the mantine-adapter's equivalent classes. */
+.optionContent {
+  display: flex;
+  align-items: center;
+  gap: var(--recursica_ui-kit_components_menu-item_properties_icon-text-gap);
+}
+
+.optionIcon {
+  display: flex;
+  flex-shrink: 0;
+  width: var(
+    --recursica_ui-kit_components_menu-item_properties_icon-leading-size
+  );
+  height: var(
+    --recursica_ui-kit_components_menu-item_properties_icon-leading-size
+  );
+  color: var(
+    --recursica_ui-kit_components_menu-item_variants_selection-states_unselected_properties_colors_leading-icon-color
+  );
+}
+
+.optionIcon :global(svg) {
+  width: 100%;
+  height: 100%;
+}
+
+.optionText {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  gap: var(--recursica_ui-kit_components_menu-item_properties_text-gap);
+}
+
+/* Default: label/supportingText each truncate to a single line with an ellipsis. */
+.optionText > * {
+  overflow: clip; /* HARDCODE: `hidden` clips descenders (e.g. "g") when text_line-height is
+    tighter than the font's natural ascent+descent; overflow-clip-margin gives ink a small bleed
+    allowance while still clipping genuinely overflowing text (see Chip's IMPLEMENTATION_NOTES.md). */
+  overflow-clip-margin: 0.35em;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Applied alongside .optionText when `wrapItemText` is true — long values wrap onto additional
+   lines instead of overflowing the fixed-width dropdown. */
+.optionTextWrap > * {
+  overflow: visible;
+  text-overflow: clip;
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+
+.optionSupportingText {
+  font-family: var(
+    --recursica_ui-kit_components_menu-item_properties_supporting-text_font-family
+  );
+  font-size: var(
+    --recursica_ui-kit_components_menu-item_properties_supporting-text_font-size
+  );
+  font-style: var(
+    --recursica_ui-kit_components_menu-item_properties_supporting-text_font-style
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_menu-item_properties_supporting-text_font-weight
+  );
+  letter-spacing: var(
+    --recursica_ui-kit_components_menu-item_properties_supporting-text_letter-spacing
+  );
+  line-height: var(
+    --recursica_ui-kit_components_menu-item_properties_supporting-text_line-height
+  );
+  text-decoration: var(
+    --recursica_ui-kit_components_menu-item_properties_supporting-text_text-decoration
+  );
+  text-transform: var(
+    --recursica_ui-kit_components_menu-item_properties_supporting-text_text-transform
+  );
+  color: var(
+    --recursica_ui-kit_components_menu-item_variants_selection-states_unselected_properties_colors_supporting-text-color
+  );
+}
+
+.option[data-selected="true"] .optionIcon,
+.option[data-combobox-selected="true"] .optionIcon {
+  color: var(
+    --recursica_ui-kit_components_menu-item_variants_selection-states_selected_properties_colors_leading-icon-color
+  ) !important;
+}
+
+.option[data-selected="true"] .optionSupportingText,
+.option[data-combobox-selected="true"] .optionSupportingText {
+  color: var(
+    --recursica_ui-kit_components_menu-item_variants_selection-states_selected_properties_colors_supporting-text-color
+  ) !important;
+}