@weasel-js/ui 1.4.3 → 1.5.0

package/dist/chunks/ComboBox-BBRRWvdc.js

@@ -1,107 +0,0 @@
-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, ComboBox as s, FieldError as c, Input as l, Label as u, ListBox as d, ListBoxItem as f, Popover as p, Text as m } from "react-aria-components";
-var h = {
-	field: "_field_ijbwo_1",
-	frame: "_frame_ijbwo_9",
-	openButton: "_openButton_ijbwo_53",
-	popover: "_popover_ijbwo_75",
-	listbox: "_listbox_ijbwo_80",
-	option: "_option_ijbwo_93",
-	empty: "_empty_ijbwo_116",
-	fit: "_fit_ijbwo_125",
-	sizer: "_sizer_ijbwo_146"
-};
-//#endregion
-//#region src/components/ComboBox/ComboBox.tsx
-function g(i) {
-	let { label: a, description: f, errorMessage: g, placeholder: y, options: b, children: x, selectedKey: S, defaultSelectedKey: C, onSelectionChange: w, emptyLabel: T = "No matches", width: E = "fill", className: D, portalContainer: O, ...k } = i, { anchor: A, portalProps: j } = e(O);
-	return /* @__PURE__ */ r(s, {
-		...k,
-		selectedKey: S,
-		defaultSelectedKey: C,
-		onSelectionChange: w ? (e) => w(e) : void 0,
-		className: [
-			h.field,
-			E === "fit" && h.fit,
-			t.root,
-			D
-		].filter(Boolean).join(" "),
-		children: [
-			A,
-			a !== void 0 && /* @__PURE__ */ n(u, {
-				className: t.label,
-				children: a
-			}),
-			/* @__PURE__ */ r("div", {
-				className: h.frame,
-				children: [
-					/* @__PURE__ */ n(l, { placeholder: y }),
-					E === "fit" && /* @__PURE__ */ r("span", {
-						className: h.sizer,
-						"aria-hidden": "true",
-						children: [y !== void 0 && /* @__PURE__ */ n("span", { children: y }), _(b, x).map((e, t) => /* @__PURE__ */ n("span", { children: e }, t))]
-					}),
-					/* @__PURE__ */ n(o, {
-						className: h.openButton,
-						"aria-label": "Show options",
-						children: /* @__PURE__ */ n("svg", {
-							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"
-							})
-						})
-					})
-				]
-			}),
-			f !== void 0 && /* @__PURE__ */ n(m, {
-				slot: "description",
-				className: t.hint,
-				children: f
-			}),
-			/* @__PURE__ */ n(c, {
-				className: t.error,
-				children: g
-			}),
-			/* @__PURE__ */ n(p, {
-				className: h.popover,
-				"data-weasel-overlay": "",
-				...j,
-				children: /* @__PURE__ */ n(d, {
-					className: h.listbox,
-					renderEmptyState: () => /* @__PURE__ */ n("div", {
-						className: h.empty,
-						children: T
-					}),
-					children: b === void 0 ? x : b.map((e) => /* @__PURE__ */ n(v, {
-						id: e.value,
-						textValue: e.textValue,
-						isDisabled: e.isDisabled,
-						children: e.label
-					}, String(e.value)))
-				})
-			})
-		]
-	});
-}
-function _(e, t) {
-	return e === void 0 ? i.toArray(t).map((e) => a(e) ? e.props.children : e) : e.map((e) => e.label);
-}
-function v({ className: e, ...t }) {
-	return /* @__PURE__ */ n(f, {
-		...t,
-		className: [h.option, e].filter(Boolean).join(" ")
-	});
-}
-//#endregion
-export { v as n, g as t };
-
-//# sourceMappingURL=ComboBox-BBRRWvdc.js.map

package/dist/chunks/ComboBox-BBRRWvdc.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ComboBox-BBRRWvdc.js","names":[],"sources":["../../src/components/ComboBox/ComboBox.module.css","../../src/components/ComboBox/ComboBox.tsx"],"sourcesContent":[".field {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  min-width: 0;\n  gap: 4px;\n}\n\n.frame {\n  display: flex;\n  align-items: stretch;\n  height: var(--wzl-field-h, var(--wzl-control-h));\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  overflow: hidden;\n  transition: border-color var(--wzl-motion-fast), box-shadow var(--wzl-motion-fast);\n}\n\n.frame:focus-within {\n  border-color: var(--wzl-focus-ring);\n  box-shadow: 0 0 0 1px var(--wzl-focus-ring);\n}\n\n.field[data-invalid] .frame {\n  border-color: var(--wzl-danger);\n}\n\n.field[data-disabled] .frame {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.frame input {\n  flex: 1;\n  min-width: 0;\n  background: transparent;\n  border: none;\n  outline: none;\n  color: inherit;\n  font: inherit;\n  padding: 0 var(--wzl-field-pad-x);\n}\n\n.frame input::placeholder {\n  color: var(--wzl-fg-subtle);\n}\n\n.openButton {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  background: transparent;\n  border: none;\n  border-left: 1px solid var(--wzl-border);\n  color: var(--wzl-fg-muted);\n  cursor: pointer;\n  padding: 0;\n}\n\n.openButton[data-hovered]:not([data-disabled]) {\n  color: var(--wzl-fg);\n}\n\n.openButton svg {\n  width: 10px;\n  height: 10px;\n}\n\n.popover {\n  min-width: var(--trigger-width);\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  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  font-weight: var(--wzl-font-weight-medium);\n}\n\n.option[data-disabled] {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n\n.empty {\n  padding: 6px 8px;\n  color: var(--wzl-fg-subtle);\n  font-size: var(--wzl-font-size-sm);\n}\n\n/* `width='fit'`: a hidden stack of every option label shares the input's grid\n   cell, so the field is wide enough for whichever option is chosen and takes\n   no more of the row than that. */\n.fit {\n  width: auto;\n  max-width: 100%;\n}\n\n.fit .frame {\n  display: grid;\n  grid-template-columns: auto auto;\n  width: fit-content;\n  max-width: 100%;\n}\n\n/* `width: 0` keeps the input's 20-character intrinsic width out of the track\n   sizing — the sizer is what the column measures — and `min-width` then\n   stretches it back across whatever that came to. */\n.fit .frame input {\n  grid-area: 1 / 1;\n  width: 0;\n  min-width: 100%;\n}\n\n.fit .sizer {\n  grid-area: 1 / 1;\n}\n\n.fit .openButton {\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  padding: 0 var(--wzl-field-pad-x);\n}\n\n.sizer > * {\n  grid-area: 1 / 1;\n}\n","import { Children, isValidElement, type ReactNode } from 'react';\nimport {\n  ComboBox as RACComboBox,\n  Label,\n  Input as RACInput,\n  Button as RACButton,\n  Popover as RACPopover,\n  ListBox as RACListBox,\n  ListBoxItem as RACListBoxItem,\n  Text,\n  FieldError,\n  type ComboBoxProps as RACComboBoxProps,\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 './ComboBox.module.css';\n\n/**\n * One option in a {@link ComboBox}'s `options` list. `textValue` is the\n * plain-text form used for filtering and screen readers, needed only when\n * `label` isn't a bare string.\n */\nexport type ComboBoxOption = {\n  value: string;\n  label: ReactNode;\n  textValue?: string;\n  isDisabled?: boolean;\n};\n\ntype Key = string | number;\n\n/**\n * Props for {@link ComboBox}, on top of React Aria's `ComboBox` props, with\n * the selection key narrowed to the option value type.\n */\nexport type ComboBoxProps<T extends Key = string> = Omit<RACComboBoxProps<object>, 'children' | 'className' | 'selectedKey' | 'defaultSelectedKey' | 'onSelectionChange'> & {\n  label?: ReactNode;\n  description?: ReactNode;\n  errorMessage?: ReactNode | ((v: ValidationResult) => ReactNode);\n  placeholder?: string;\n  options?: ReadonlyArray<ComboBoxOption & { value: T }>;\n  children?: ReactNode;\n  selectedKey?: T | null;\n  defaultSelectedKey?: T;\n  onSelectionChange?: (key: T | null) => void;\n  emptyLabel?: ReactNode;\n  /**\n   * `'fill'` (the default) takes the width of whatever row the combo box sits\n   * in. `'fit'` sizes the input to its widest option, so it neither swallows a\n   * toolbar's slack nor cuts a selection off once one is made.\n   */\n  width?: 'fill' | 'fit';\n  className?: string;\n} & OverlayPortalProps;\n\n/**\n * Filterable single-select wrapping React Aria's ComboBox. The user can\n * type to filter; selection commits to `onSelectionChange`. When no value\n * is in the input, selection clears (key becomes null).\n */\nexport function ComboBox<T extends Key = string>(props: ComboBoxProps<T>) {\n  const {\n    label,\n    description,\n    errorMessage,\n    placeholder,\n    options,\n    children,\n    selectedKey,\n    defaultSelectedKey,\n    onSelectionChange,\n    emptyLabel = 'No matches',\n    width = 'fill',\n    className,\n    portalContainer,\n    ...rest\n  } = props;\n\n  const { anchor, portalProps } = useOverlayPortal(portalContainer);\n\n  return (\n    <RACComboBox\n      {...rest}\n      selectedKey={selectedKey}\n      defaultSelectedKey={defaultSelectedKey}\n      onSelectionChange={onSelectionChange ? (k) => onSelectionChange(k as T | null) : 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      <div className={s.frame}>\n        <RACInput placeholder={placeholder} />\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}>{l}</span>\n            ))}\n          </span>\n        )}\n        <RACButton className={s.openButton} aria-label=\"Show options\">\n          <svg 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      </div>\n      {description !== undefined && (\n        <Text slot=\"description\" className={fieldClasses.hint}>\n          {description}\n        </Text>\n      )}\n      <FieldError className={fieldClasses.error}>{errorMessage}</FieldError>\n      <RACPopover className={s.popover} data-weasel-overlay=\"\" {...portalProps}>\n        <RACListBox className={s.listbox} renderEmptyState={() => <div className={s.empty}>{emptyLabel}</div>}>\n          {options !== undefined\n            ? options.map((o) => (\n                <ComboBoxItem key={String(o.value)} id={o.value} textValue={o.textValue} isDisabled={o.isDisabled}>\n                  {o.label}\n                </ComboBoxItem>\n              ))\n            : children}\n        </RACListBox>\n      </RACPopover>\n    </RACComboBox>\n  );\n}\n\n/**\n * The labels a `width='fit'` input measures itself against. In the children\n * form the label sits one element deep, inside a `ComboBoxItem`.\n */\nfunction optionLabels(\n  options: ReadonlyArray<ComboBoxOption> | 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 ComboBoxItem}, on top of React Aria's `ListBoxItem` props. */\nexport type ComboBoxItemProps = Omit<RACListBoxItemProps, 'className'> & {\n  className?: string;\n};\n\n/** One row in a {@link ComboBox}'s filtered list. */\nexport function ComboBoxItem({ className, ...rest }: ComboBoxItemProps) {\n  return <RACListBoxItem {...rest} className={[s.option, className].filter(Boolean).join(' ')} />;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AC8DA,SAAgB,EAAiC,GAAyB;CACxE,IAAM,EACJ,UACA,gBACA,iBACA,gBACA,YACA,aACA,gBACA,uBACA,sBACA,gBAAa,cACb,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,EAAc,GAAG,KAAA;EACjF,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,OAAD;IAAK,WAAW,EAAE;cAAlB;KACE,kBAAC,GAAD,EAAuB,gBAAe,CAAA;KACrC,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,UAAe,GAAS,EAAb,EAAa,CACxB,CACG;;KAET,kBAAC,GAAD;MAAW,WAAW,EAAE;MAAY,cAAW;gBAC7C,kBAAC,OAAD;OAAK,SAAQ;OAAY,eAAY;iBACnC,kBAAC,QAAD;QAAM,GAAE;QAAiB,MAAK;QAAO,QAAO;QAAe,aAAY;QAAM,eAAc;QAAQ,gBAAe;QAAU,CAAA;OACxH,CAAA;MACI,CAAA;KACR;;GACL,MAAgB,KAAA,KACf,kBAAC,GAAD;IAAM,MAAK;IAAc,WAAW,EAAa;cAC9C;IACI,CAAA;GAET,kBAAC,GAAD;IAAY,WAAW,EAAa;cAAQ;IAA0B,CAAA;GACtE,kBAAC,GAAD;IAAY,WAAW,EAAE;IAAS,uBAAoB;IAAG,GAAI;cAC3D,kBAAC,GAAD;KAAY,WAAW,EAAE;KAAS,wBAAwB,kBAAC,OAAD;MAAK,WAAW,EAAE;gBAAQ;MAAiB,CAAA;eAClG,MAAY,KAAA,IAMT,IALA,EAAQ,KAAK,MACX,kBAAC,GAAD;MAAoC,IAAI,EAAE;MAAO,WAAW,EAAE;MAAW,YAAY,EAAE;gBACpF,EAAE;MACU,EAFI,OAAO,EAAE,MAAM,CAEnB,CACf;KAEK,CAAA;IACF,CAAA;GACD;;;AAQlB,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;;AAY/D,SAAgB,EAAa,EAAE,cAAW,GAAG,KAA2B;AACtE,QAAO,kBAAC,GAAD;EAAgB,GAAI;EAAM,WAAW,CAAC,EAAE,QAAQ,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EAAI,CAAA"}