@weasel-js/ui 1.4.2 → 1.4.3

package/dist/chunks/Select-CacMfs4v.js

@@ -0,0 +1,124 @@
+import { r as e } from "./portalHost-CjpCnuGU.js";
+import { n as t } from "./Field-dzlxOGxT.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Children as i, isValidElement as a } from "react";
+import { Button as o, FieldError as s, Label as c, ListBox as l, ListBoxItem as u, Popover as d, Select as f, SelectValue as p, Text as m } from "react-aria-components";
+var h = {
+	field: "_field_1wahg_1",
+	trigger: "_trigger_1wahg_9",
+	value: "_value_1wahg_41",
+	chevron: "_chevron_1wahg_54",
+	popover: "_popover_1wahg_61",
+	listbox: "_listbox_1wahg_67",
+	option: "_option_1wahg_80",
+	check: "_check_1wahg_105",
+	fit: "_fit_1wahg_118",
+	sizer: "_sizer_1wahg_129"
+};
+//#endregion
+//#region src/components/Select/Select.tsx
+function g(i) {
+	let { label: a, description: u, errorMessage: g, placeholder: y, options: x, children: S, selectedKey: C, defaultSelectedKey: w, onSelectionChange: T, width: E = "fill", className: D, portalContainer: O, ...k } = i, { anchor: A, portalProps: j } = e(O);
+	return /* @__PURE__ */ r(f, {
+		...k,
+		selectedKey: C,
+		defaultSelectedKey: w,
+		onSelectionChange: T ? (e) => T(e) : void 0,
+		className: [
+			h.field,
+			E === "fit" && h.fit,
+			t.root,
+			D
+		].filter(Boolean).join(" "),
+		children: [
+			A,
+			a !== void 0 && /* @__PURE__ */ n(c, {
+				className: t.label,
+				children: a
+			}),
+			/* @__PURE__ */ r(o, {
+				className: h.trigger,
+				children: [
+					/* @__PURE__ */ n(p, {
+						className: h.value,
+						children: ({ defaultChildren: e, isPlaceholder: t }) => t ? y ?? e : e
+					}),
+					E === "fit" && /* @__PURE__ */ r("span", {
+						className: h.sizer,
+						"aria-hidden": "true",
+						children: [y !== void 0 && /* @__PURE__ */ n("span", { children: y }), v(x, S).map((e, t) => /* @__PURE__ */ r("span", { children: [/* @__PURE__ */ n(_, {}), e] }, t))]
+					}),
+					/* @__PURE__ */ n("svg", {
+						className: h.chevron,
+						viewBox: "0 0 10 10",
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ n("path", {
+							d: "M2 4 L5 7 L8 4",
+							fill: "none",
+							stroke: "currentColor",
+							strokeWidth: "1.5",
+							strokeLinecap: "round",
+							strokeLinejoin: "round"
+						})
+					})
+				]
+			}),
+			u !== void 0 && /* @__PURE__ */ n(m, {
+				slot: "description",
+				className: t.hint,
+				children: u
+			}),
+			/* @__PURE__ */ n(s, {
+				className: t.error,
+				children: g
+			}),
+			/* @__PURE__ */ n(d, {
+				className: h.popover,
+				"data-weasel-overlay": "",
+				...j,
+				children: /* @__PURE__ */ n(l, {
+					className: h.listbox,
+					children: x === void 0 ? S : x.map((e) => /* @__PURE__ */ n(b, {
+						id: e.value,
+						isDisabled: e.isDisabled,
+						textValue: e.textValue,
+						children: e.label
+					}, String(e.value)))
+				})
+			})
+		]
+	});
+}
+function _() {
+	return /* @__PURE__ */ n("svg", {
+		className: h.check,
+		viewBox: "0 0 10 10",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ n("polyline", {
+			points: "1.5,5 4,7.5 8.5,3",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "1.6",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	});
+}
+function v(e, t) {
+	return e === void 0 ? i.toArray(t).map((e) => a(e) ? e.props.children : e) : e.map((e) => e.label);
+}
+function y(e, t) {
+	return t === void 0 ? typeof e == "string" || typeof e == "number" ? String(e) : void 0 : t;
+}
+function b({ children: e, className: t, textValue: i, ...a }) {
+	return /* @__PURE__ */ r(u, {
+		...a,
+		textValue: y(e, i),
+		className: [h.option, t].filter(Boolean).join(" "),
+		children: [/* @__PURE__ */ n(_, {}), e]
+	});
+}
+//#endregion
+export { b as n, g as t };
+
+//# sourceMappingURL=Select-CacMfs4v.js.map

package/dist/chunks/Select-CacMfs4v.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select-CacMfs4v.js","names":[],"sources":["../../src/components/Select/Select.module.css","../../src/components/Select/Select.tsx"],"sourcesContent":[".field {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  min-width: 0;\n  gap: 4px;\n}\n\n.trigger {\n  display: flex;\n  width: 100%;\n  align-items: center;\n  gap: 6px;\n  height: var(--wzl-control-h);\n  padding: 0 6px 0 10px;\n  background: var(--wzl-surface-sunken);\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n  color: var(--wzl-fg);\n  font-family: var(--wzl-font-ui);\n  font-size: var(--wzl-font-size);\n  line-height: 1;\n  cursor: pointer;\n  transition: border-color var(--wzl-motion-fast), box-shadow var(--wzl-motion-fast);\n}\n\n.trigger[data-focus-visible] {\n  border-color: var(--wzl-focus-ring);\n  box-shadow: 0 0 0 1px var(--wzl-focus-ring);\n}\n\n.field[data-invalid] .trigger {\n  border-color: var(--wzl-danger);\n}\n\n.trigger[data-disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.value {\n  flex: 1;\n  min-width: 0;\n  text-align: left;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.value[data-placeholder] {\n  color: var(--wzl-fg-subtle);\n}\n\n.chevron {\n  width: 10px;\n  height: 10px;\n  color: var(--wzl-fg-muted);\n  flex: 0 0 auto;\n}\n\n.popover {\n  min-width: var(--trigger-width);\n  max-height: inherit;\n  outline: none;\n}\n\n.listbox {\n  background: var(--wzl-surface-raised);\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-md);\n  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);\n  padding: 4px;\n  max-height: 280px;\n  overflow: auto;\n  outline: none;\n  font-family: var(--wzl-font-ui);\n  font-size: var(--wzl-font-size);\n}\n\n.option {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 4px 8px;\n  border-radius: var(--wzl-radius-sm);\n  cursor: pointer;\n  color: var(--wzl-fg);\n  outline: none;\n}\n\n.option[data-focused] {\n  background: var(--wzl-surface-hover);\n}\n\n.option[data-selected] {\n  color: var(--wzl-fg);\n  font-weight: var(--wzl-font-weight-medium);\n}\n\n.option[data-disabled] {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n\n.check {\n  width: 10px;\n  height: 10px;\n  flex: 0 0 auto;\n  opacity: 0;\n}\n\n.option[data-selected] .check {\n  opacity: 1;\n}\n\n/* `width='fit'`: a hidden stack of every option label shares the value's grid\n   cell, so the trigger sizes to its widest option and never resizes on select. */\n.fit {\n  width: auto;\n  max-width: 100%;\n}\n\n.fit .trigger {\n  display: grid;\n  grid-template-columns: auto auto;\n}\n\n.fit .value,\n.fit .sizer {\n  grid-area: 1 / 1;\n}\n\n.fit .chevron {\n  grid-area: 1 / 2;\n}\n\n.sizer {\n  display: grid;\n  height: 0;\n  overflow: hidden;\n  visibility: hidden;\n  white-space: nowrap;\n}\n\n.sizer > * {\n  grid-area: 1 / 1;\n}\n","import { Children, isValidElement, type ReactNode } from 'react';\nimport {\n  Select as RACSelect,\n  Label,\n  Button as RACButton,\n  SelectValue,\n  Popover as RACPopover,\n  ListBox as RACListBox,\n  ListBoxItem as RACListBoxItem,\n  Text,\n  FieldError,\n  type SelectProps as RACSelectProps,\n  type ListBoxItemProps as RACListBoxItemProps,\n  type ValidationResult,\n} from 'react-aria-components';\nimport { fieldClasses } from '../Field/Field';\nimport { useOverlayPortal, type OverlayPortalProps } from '../../overlays/portalHost';\nimport s from './Select.module.css';\n\n/** One option in a {@link Select}'s `options` list. */\nexport type SelectOption = {\n  value: string;\n  label: ReactNode;\n  isDisabled?: boolean;\n  /**\n   * Plain-text form of `label`, for type-to-select and screen readers.\n   * Only needed when `label` isn't a bare string — a label built from\n   * elements has no text React Aria can read off it. A string label\n   * supplies this itself.\n   */\n  textValue?: string;\n};\n\ntype Key = string | number;\n\n/**\n * Props for {@link Select}, on top of React Aria's `Select` props, with the\n * selection key narrowed to the option value type.\n */\nexport type SelectProps<T extends Key = string> = Omit<RACSelectProps<object>, 'children' | 'className' | 'selectedKey' | 'defaultSelectedKey' | 'onSelectionChange'> & {\n  label?: ReactNode;\n  description?: ReactNode;\n  errorMessage?: ReactNode | ((v: ValidationResult) => ReactNode);\n  placeholder?: string;\n  /** Either pass `options` for a quick render, or `children` for full control. */\n  options?: ReadonlyArray<SelectOption & { value: T }>;\n  children?: ReactNode;\n  selectedKey?: T | null;\n  defaultSelectedKey?: T;\n  onSelectionChange?: (key: T) => void;\n  /**\n   * `'fill'` (the default) takes the width of whatever row the select sits in.\n   * `'fit'` sizes the trigger to its widest option, so it neither swallows a\n   * toolbar's slack nor changes width as the selection moves.\n   */\n  width?: 'fill' | 'fit';\n  className?: string;\n} & OverlayPortalProps;\n\n/**\n * Form select wrapping React Aria's Select. Pass either `options` for a\n * quick declarative render or `children` of `<SelectItem>` for control over\n * each row.\n *\n * The selection key type is parameterized so consumers with a string-literal\n * union for `value` (e.g. `'r' | 'g' | 'b'`) get a typed `onSelectionChange`.\n */\nexport function Select<T extends Key = string>(props: SelectProps<T>) {\n  const {\n    label,\n    description,\n    errorMessage,\n    placeholder,\n    options,\n    children,\n    selectedKey,\n    defaultSelectedKey,\n    onSelectionChange,\n    width = 'fill',\n    className,\n    portalContainer,\n    ...rest\n  } = props;\n\n  const { anchor, portalProps } = useOverlayPortal(portalContainer);\n\n  return (\n    <RACSelect\n      {...rest}\n      selectedKey={selectedKey}\n      defaultSelectedKey={defaultSelectedKey}\n      onSelectionChange={onSelectionChange ? (k) => onSelectionChange(k as T) : undefined}\n      className={[s.field, width === 'fit' && s.fit, fieldClasses.root, className]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      {anchor}\n      {label !== undefined && <Label className={fieldClasses.label}>{label}</Label>}\n      <RACButton className={s.trigger}>\n        <SelectValue className={s.value}>\n          {({ defaultChildren, isPlaceholder }) =>\n            isPlaceholder ? (placeholder ?? defaultChildren) : defaultChildren\n          }\n        </SelectValue>\n        {width === 'fit' && (\n          <span className={s.sizer} aria-hidden=\"true\">\n            {placeholder !== undefined && <span>{placeholder}</span>}\n            {optionLabels(options, children).map((l, i) => (\n              <span key={i}>\n                <CheckMark />\n                {l}\n              </span>\n            ))}\n          </span>\n        )}\n        <svg className={s.chevron} viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n          <path d=\"M2 4 L5 7 L8 4\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        </svg>\n      </RACButton>\n      {description !== undefined && (\n        <Text slot=\"description\" className={fieldClasses.hint}>\n          {description}\n        </Text>\n      )}\n      <FieldError className={fieldClasses.error}>{errorMessage}</FieldError>\n      {/* `data-weasel-overlay` marks DOM that belongs to this control but\n          renders in a portal, outside the subtree the trigger sits in. Any\n          consumer reasoning about \"did focus leave my component?\" via\n          `closest()` gets the wrong answer without it — a text editor whose\n          font menu lives here would end its session the moment the menu is\n          clicked. */}\n      <RACPopover className={s.popover} data-weasel-overlay=\"\" {...portalProps}>\n        <RACListBox className={s.listbox}>\n          {options !== undefined\n            ? options.map((o) => (\n                <SelectItem\n                  key={String(o.value)}\n                  id={o.value}\n                  isDisabled={o.isDisabled}\n                  textValue={o.textValue}\n                >\n                  {o.label}\n                </SelectItem>\n              ))\n            : children}\n        </RACListBox>\n      </RACPopover>\n    </RACSelect>\n  );\n}\n\n/* A selected row's mark travels into the trigger with its label, so a\n   `width='fit'` sizer has to allow for it too. */\nfunction CheckMark() {\n  return (\n    <svg className={s.check} viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n      <polyline points=\"1.5,5 4,7.5 8.5,3\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.6\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  );\n}\n\n/**\n * The labels a `width='fit'` trigger measures itself against. In the children\n * form the label sits one element deep, inside a `SelectItem`.\n */\nfunction optionLabels(\n  options: ReadonlyArray<SelectOption> | undefined,\n  children: ReactNode,\n): ReactNode[] {\n  if (options !== undefined) return options.map((o) => o.label);\n  return Children.toArray(children).map((c) =>\n    isValidElement<{ children?: ReactNode }>(c) ? c.props.children : c,\n  );\n}\n\n/** Props for {@link SelectItem}, on top of React Aria's `ListBoxItem` props. */\nexport type SelectItemProps = Omit<RACListBoxItemProps, 'className' | 'children'> & {\n  children?: ReactNode;\n  className?: string;\n};\n\n/**\n * Every row renders a check mark beside its label, so from React Aria's\n * side the children are never plain text and it can't derive the string\n * type-to-select and screen readers need — it warns once per row. A string\n * label already *is* that string, so derive it rather than making every\n * call site restate it; anything richer has to say what it reads as.\n */\nfunction textValueOf(children: ReactNode, explicit: string | undefined): string | undefined {\n  if (explicit !== undefined) return explicit;\n  return typeof children === 'string' || typeof children === 'number'\n    ? String(children)\n    : undefined;\n}\n\n/**\n * One row in a {@link Select}'s list, with a leading check mark when\n * selected. A string child supplies its own `textValue`; anything richer must\n * pass one so type-to-select and screen readers have something to read.\n */\nexport function SelectItem({ children, className, textValue, ...rest }: SelectItemProps) {\n  return (\n    <RACListBoxItem\n      {...rest}\n      textValue={textValueOf(children, textValue)}\n      className={[s.option, className].filter(Boolean).join(' ')}\n    >\n      <CheckMark />\n      {children}\n    </RACListBoxItem>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;ACmEA,SAAgB,EAA+B,GAAuB;CACpE,IAAM,EACJ,UACA,gBACA,iBACA,gBACA,YACA,aACA,gBACA,uBACA,sBACA,WAAQ,QACR,cACA,oBACA,GAAG,MACD,GAEE,EAAE,WAAQ,mBAAgB,EAAiB,EAAgB;AAEjE,QACE,kBAAC,GAAD;EACE,GAAI;EACS;EACO;EACpB,mBAAmB,KAAqB,MAAM,EAAkB,EAAO,GAAG,KAAA;EAC1E,WAAW;GAAC,EAAE;GAAO,MAAU,SAAS,EAAE;GAAK,EAAa;GAAM;GAAU,CACzE,OAAO,QAAQ,CACf,KAAK,IAAI;YAPd;GASG;GACA,MAAU,KAAA,KAAa,kBAAC,GAAD;IAAO,WAAW,EAAa;cAAQ;IAAc,CAAA;GAC7E,kBAAC,GAAD;IAAW,WAAW,EAAE;cAAxB;KACE,kBAAC,GAAD;MAAa,WAAW,EAAE;iBACtB,EAAE,oBAAiB,uBACnB,IAAiB,KAAe,IAAmB;MAEzC,CAAA;KACb,MAAU,SACT,kBAAC,QAAD;MAAM,WAAW,EAAE;MAAO,eAAY;gBAAtC,CACG,MAAgB,KAAA,KAAa,kBAAC,QAAD,EAAA,UAAO,GAAmB,CAAA,EACvD,EAAa,GAAS,EAAS,CAAC,KAAK,GAAG,MACvC,kBAAC,QAAD,EAAA,UAAA,CACE,kBAAC,GAAD,EAAa,CAAA,EACZ,EACI,EAAA,EAHI,EAGJ,CACP,CACG;;KAET,kBAAC,OAAD;MAAK,WAAW,EAAE;MAAS,SAAQ;MAAY,eAAY;gBACzD,kBAAC,QAAD;OAAM,GAAE;OAAiB,MAAK;OAAO,QAAO;OAAe,aAAY;OAAM,eAAc;OAAQ,gBAAe;OAAU,CAAA;MACxH,CAAA;KACI;;GACX,MAAgB,KAAA,KACf,kBAAC,GAAD;IAAM,MAAK;IAAc,WAAW,EAAa;cAC9C;IACI,CAAA;GAET,kBAAC,GAAD;IAAY,WAAW,EAAa;cAAQ;IAA0B,CAAA;GAOtE,kBAAC,GAAD;IAAY,WAAW,EAAE;IAAS,uBAAoB;IAAG,GAAI;cAC3D,kBAAC,GAAD;KAAY,WAAW,EAAE;eACtB,MAAY,KAAA,IAWT,IAVA,EAAQ,KAAK,MACX,kBAAC,GAAD;MAEE,IAAI,EAAE;MACN,YAAY,EAAE;MACd,WAAW,EAAE;gBAEZ,EAAE;MACQ,EANN,OAAO,EAAE,MAAM,CAMT,CACb;KAEK,CAAA;IACF,CAAA;GACH;;;AAMhB,SAAS,IAAY;AACnB,QACE,kBAAC,OAAD;EAAK,WAAW,EAAE;EAAO,SAAQ;EAAY,eAAY;YACvD,kBAAC,YAAD;GAAU,QAAO;GAAoB,MAAK;GAAO,QAAO;GAAe,aAAY;GAAM,eAAc;GAAQ,gBAAe;GAAU,CAAA;EACpI,CAAA;;AAQV,SAAS,EACP,GACA,GACa;AAEb,QADI,MAAY,KAAA,IACT,EAAS,QAAQ,EAAS,CAAC,KAAK,MACrC,EAAyC,EAAE,GAAG,EAAE,MAAM,WAAW,EAClE,GAHiC,EAAQ,KAAK,MAAM,EAAE,MAAM;;AAmB/D,SAAS,EAAY,GAAqB,GAAkD;AAE1F,QADI,MAAa,KAAA,IACV,OAAO,KAAa,YAAY,OAAO,KAAa,WACvD,OAAO,EAAS,GAChB,KAAA,IAH+B;;AAWrC,SAAgB,EAAW,EAAE,aAAU,cAAW,cAAW,GAAG,KAAyB;AACvF,QACE,kBAAC,GAAD;EACE,GAAI;EACJ,WAAW,EAAY,GAAU,EAAU;EAC3C,WAAW,CAAC,EAAE,QAAQ,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;YAH5D,CAKE,kBAAC,GAAD,EAAa,CAAA,EACZ,EACc"}