@serendie/ui/dist/components/Select/Select.js

Adaptive UI component library as part of Serendie Design System by Mitsubishi Electric

import { jsxs as a, jsx as e } from "react/jsx-runtime";
import { createListCollection as T } from "../../node_modules/@ark-ui/react/dist/components/collection/list-collection.js";
import { Portal as N } from "../../node_modules/@ark-ui/react/dist/components/portal/portal.js";
import { select_exports as s } from "../../node_modules/@ark-ui/react/dist/components/select/select.js";
import { SerendieSymbolChevronDown as R } from "@serendie/symbols";
import { List as z } from "../List/List.js";
import { ListItem as P } from "../List/ListItem.js";
import { useAutoPortalContainer as V } from "../../hooks/useAutoPortalContainer.js";
import { useTranslations as B } from "../../i18n/index.js";
import { css as r } from "../../styled-system/css/css.js";
import { cx as L } from "../../styled-system/css/cx.js";
import { sva as I } from "../../styled-system/css/sva.js";
const p = I({
  slots: ["root", "valueText", "trigger", "content", "item", "iconBox"],
  base: {
    root: {
      display: "inline-grid",
      "@layer components": {
        width: "min(100%, 300px)"
      },
      rowGap: "sd.system.dimension.spacing.extraSmall"
    },
    trigger: {
      width: "100%",
      textAlign: "left",
      display: "grid",
      gridTemplateColumns: "1fr auto",
      paddingTop: "sd.system.dimension.spacing.small",
      paddingRight: "sd.system.dimension.spacing.extraSmall",
      paddingBottom: "sd.system.dimension.spacing.small",
      paddingLeft: "sd.system.dimension.spacing.medium",
      alignItems: "center",
      borderRadius: "sd.system.dimension.radius.medium",
      outlineStyle: "solid",
      outlineWidth: "sd.system.dimension.border.medium",
      outlineColor: "sd.system.color.component.outline",
      bg: "sd.system.color.component.surface",
      cursor: "pointer",
      _enabled: {
        _focusVisible: {
          outlineWidth: "sd.system.dimension.border.thick",
          outlineColor: "sd.system.color.impression.primary"
        },
        _hover: {
          outlineColor: "sd.system.color.interaction.hovered",
          bg: "color-mix(in srgb, {colors.sd.system.color.component.surface}, {colors.sd.system.color.interaction.hoveredVariant})"
        }
      },
      _disabled: {
        bgColor: "sd.system.color.interaction.disabled",
        color: "sd.system.color.interaction.disabledOnSurface",
        cursor: "not-allowed"
      },
      _invalid: {
        outlineColor: "sd.system.color.impression.negative"
      }
    },
    valueText: {
      outline: "none",
      width: "100%",
      whiteSpace: "nowrap",
      overflow: "hidden",
      textOverflow: "ellipsis",
      textStyle: {
        base: "sd.system.typography.body.medium_compact",
        expanded: "sd.system.typography.body.medium_expanded"
      },
      "[data-placeholder-shown] &": {
        color: "sd.system.color.component.onSurfaceVariant"
      },
      _disabled: {
        "[data-placeholder-shown] &": {
          color: "sd.system.color.interaction.disabledOnSurface"
        }
      }
    },
    content: {
      bgColor: "sd.system.color.component.surfaceContainerBright",
      borderRadius: "sd.system.dimension.radius.medium",
      boxShadow: "sd.system.elevation.shadow.level1",
      zIndex: "sd.system.elevation.zIndex.dropdown",
      width: "100%",
      cursor: "pointer"
    },
    item: {
      width: "100%"
    },
    iconBox: {
      w: "40px",
      display: "flex",
      justifyContent: "center",
      transition: "transform 0.2s",
      "[data-disabled] &": {
        color: "sd.system.color.interaction.disabledOnSurface"
      },
      "[data-state='open'] &": {
        transform: "rotate(180deg)"
      }
    }
  },
  variants: {
    size: {
      medium: {
        root: {
          textStyle: {
            base: "sd.system.typography.body.medium_compact",
            expanded: "sd.system.typography.body.medium_expanded"
          }
        },
        valueText: {
          textStyle: {
            base: "sd.system.typography.body.medium_compact",
            expanded: "sd.system.typography.body.medium_expanded"
          }
        },
        trigger: {
          height: 48
        },
        item: {}
      },
      small: {
        root: {
          "@layer components": {
            width: "min(100%, 150px)"
          },
          textStyle: {
            base: "sd.system.typography.body.small_compact"
          }
        },
        valueText: {
          textStyle: {
            base: "sd.system.typography.body.small_compact",
            expanded: "sd.system.typography.body.small_expanded"
          }
        },
        trigger: {
          height: 32,
          paddingTop: "sd.system.dimension.spacing.twoExtraSmall",
          paddingRight: "sd.system.dimension.spacing.extraSmall",
          paddingBottom: "sd.system.dimension.spacing.twoExtraSmall",
          paddingLeft: "sd.system.dimension.spacing.extraSmall",
          borderRadius: "sd.system.dimension.radius.small"
        },
        content: {
          borderRadius: "sd.system.dimension.radius.small"
        },
        item: {}
      }
    }
  },
  defaultVariants: {
    size: "medium"
  }
}), Q = ({
  placeholder: y = "",
  label: d,
  required: g,
  requiredLabel: u,
  invalid: n,
  invalidMessage: m,
  className: x,
  items: h = [],
  portalled: l = !0,
  ...b
}) => {
  const f = B(), [i, S] = p.splitVariantProps(b), t = p(i), { collection: A, ...v } = S, { triggerRef: w, portalContainerRef: _ } = V(l), c = T({
    items: h,
    itemToString: (o) => o.label,
    itemToValue: (o) => o.value
  });
  return /* @__PURE__ */ a(
    s.Root,
    {
      ...v,
      collection: c,
      invalid: n,
      className: L(t.root, x),
      positioning: {
        sameWidth: !0,
        offset: {
          mainAxis: 1,
          crossAxis: 0
        }
      },
      children: [
        d && i.size != "small" && // smallの場合はラベルを表示しない
        /* @__PURE__ */ a(
          s.Label,
          {
            className: r({
              textStyle: {
                base: "sd.system.typography.label.medium_compact",
                expanded: "sd.system.typography.label.medium_expanded"
              }
            }),
            children: [
              d,
              g && /* @__PURE__ */ e(
                "span",
                {
                  className: r({
                    pl: "sd.system.dimension.spacing.extraSmall",
                    color: "sd.system.color.impression.negative"
                  }),
                  children: u ?? f("common.required")
                }
              )
            ]
          }
        ),
        /* @__PURE__ */ e(s.Control, { children: /* @__PURE__ */ a(s.Trigger, { className: t.trigger, ref: w, children: [
          /* @__PURE__ */ e(
            s.ValueText,
            {
              placeholder: y,
              className: t.valueText
            }
          ),
          /* @__PURE__ */ e(R, { className: t.iconBox })
        ] }) }),
        n && m && /* @__PURE__ */ e(
          "div",
          {
            className: r({
              textStyle: {
                base: "sd.system.typography.body.extraSmall_compact",
                expanded: "sd.system.typography.body.extraSmall_expanded"
              },
              color: "sd.system.color.impression.negative"
            }),
            children: m
          }
        ),
        /* @__PURE__ */ e(N, { disabled: !l, container: _, children: /* @__PURE__ */ e(s.Positioner, { children: /* @__PURE__ */ e(s.Content, { className: t.content, children: /* @__PURE__ */ e(z, { children: c.items.map((o, C) => /* @__PURE__ */ e(s.Item, { item: o, children: /* @__PURE__ */ e(
          P,
          {
            title: o.label,
            value: o.value,
            className: t.item,
            size: i.size == "small" ? "small" : void 0
          }
        ) }, C)) }) }) }) })
      ]
    }
  );
};
export {
  Q as Select,
  p as SelectStyle
};