@12-apps/ui 5.0.0 → 5.1.0

package/dist/form/CreatableSelect.js

@@ -0,0 +1,156 @@
+import {
+  FormControl,
+  FormLabel,
+  FormMessage
+} from "../chunk-FD4W36WR.js";
+import "../chunk-PZ5AY32C.js";
+
+// src/components/form/CreatableSelect/CreatableSelect.tsx
+import { alpha } from "@mui/material";
+import { Autocomplete, createFilterOptions } from "@mui/material";
+import { CircularProgress } from "@mui/material";
+import { TextField } from "@mui/material";
+import { useId, useMemo } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var CREATE_PREFIX = " create:";
+var filterOptions = createFilterOptions();
+var INDENT_STEP = 16;
+var MUI_SIZE = { xs: "small", sm: "small", md: "medium", lg: "medium", xl: "medium" };
+var fieldSx = {
+  "& .MuiOutlinedInput-root": {
+    "& fieldset": {
+      borderColor: (theme) => alpha(theme.palette.divider, 0.23)
+    },
+    "&:hover fieldset": { borderColor: "primary.main" },
+    "&.Mui-focused fieldset": { borderColor: "primary.main", borderWidth: 2 },
+    "&.Mui-error fieldset": { borderColor: "error.main" }
+  }
+};
+function buildFilter(onCreate, createOptionLabel) {
+  return (available, params) => {
+    const filtered = filterOptions(available, params);
+    const input = params.inputValue.trim();
+    const alreadyExists = available.some(
+      (option) => option.label.toLowerCase() === input.toLowerCase()
+    );
+    if (input && !alreadyExists && onCreate) {
+      filtered.push({
+        value: `${CREATE_PREFIX}${input}`,
+        label: createOptionLabel(input),
+        isCreate: true
+      });
+    }
+    return filtered;
+  };
+}
+function renderIndentedOption(props, option) {
+  const { key, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      ...rest,
+      style: { paddingLeft: INDENT_STEP * (1 + (option.depth ?? 0)) },
+      children: option.label
+    },
+    key ?? option.value
+  );
+}
+function renderField(params, field) {
+  return /* @__PURE__ */ jsx(
+    TextField,
+    {
+      ...params,
+      id: field.inputId,
+      placeholder: field.placeholder,
+      error: Boolean(field.error),
+      size: MUI_SIZE[field.size],
+      sx: fieldSx,
+      inputProps: { ...params.inputProps, "data-testid": `${field.dataTestId}-input` },
+      slotProps: {
+        input: {
+          ...params.InputProps,
+          endAdornment: /* @__PURE__ */ jsxs(Fragment, { children: [
+            field.loading ? /* @__PURE__ */ jsx(CircularProgress, { color: "inherit", size: 18 }) : null,
+            params.InputProps.endAdornment
+          ] })
+        }
+      }
+    }
+  );
+}
+function useInternalOptions(options, value) {
+  const items = useMemo(
+    () => options.map(({ value: optionValue, label, depth }) => ({
+      value: optionValue,
+      label,
+      depth
+    })),
+    [options]
+  );
+  const selected = useMemo(
+    () => items.find((option) => option.value === value) ?? null,
+    [items, value]
+  );
+  return { items, selected };
+}
+function handlePick(next, onChange, onCreate) {
+  if (!next) {
+    onChange(null);
+    return;
+  }
+  if (next.isCreate) {
+    void onCreate?.(next.value.slice(CREATE_PREFIX.length));
+    return;
+  }
+  onChange(next.value);
+}
+function CreatableSelect({
+  options,
+  value,
+  onChange,
+  onCreate,
+  label,
+  error,
+  placeholder,
+  createOptionLabel = (input) => `Criar "${input}"`,
+  noOptionsText,
+  disabled = false,
+  loading = false,
+  fullWidth = true,
+  size = "md",
+  dataTestId = "creatable-select"
+}) {
+  const inputId = useId();
+  const { items, selected } = useInternalOptions(options, value);
+  return /* @__PURE__ */ jsxs(FormControl, { fullWidth, error: Boolean(error), children: [
+    label && /* @__PURE__ */ jsx(FormLabel, { htmlFor: inputId, error: Boolean(error), children: label }),
+    /* @__PURE__ */ jsx(
+      Autocomplete,
+      {
+        value: selected,
+        options: items,
+        disabled,
+        loading,
+        fullWidth,
+        size: MUI_SIZE[size],
+        handleHomeEndKeys: true,
+        selectOnFocus: true,
+        clearOnBlur: true,
+        "data-testid": dataTestId,
+        noOptionsText,
+        slotProps: { popper: { sx: { zIndex: (theme) => theme.zIndex.modal + 100 } } },
+        getOptionLabel: (option) => typeof option === "string" ? option : option.label,
+        isOptionEqualToValue: (option, current) => option.value === current.value,
+        renderOption: renderIndentedOption,
+        filterOptions: buildFilter(onCreate, createOptionLabel),
+        onChange: (_event, next) => handlePick(next, onChange, onCreate),
+        renderInput: (params) => renderField(params, { inputId, placeholder, error, loading, size, dataTestId })
+      }
+    ),
+    error && /* @__PURE__ */ jsx(FormMessage, { error: true, dataTestId: `${dataTestId}-message`, children: error })
+  ] });
+}
+export {
+  CreatableSelect
+};
+//# sourceMappingURL=CreatableSelect.js.map

package/dist/form/CreatableSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/form/CreatableSelect/CreatableSelect.tsx"],"sourcesContent":["'use client';\n\nimport { alpha } from '@mui/material';\nimport { Autocomplete, createFilterOptions } from '@mui/material';\nimport type { AutocompleteRenderInputParams } from '@mui/material';\nimport { CircularProgress } from '@mui/material';\nimport { TextField } from '@mui/material';\nimport { useId, useMemo } from 'react';\n\nimport { FormControl, FormLabel, FormMessage } from '../Form';\nimport type { CreatableSelectOption, CreatableSelectProps } from './CreatableSelect.types';\nimport type { SizeValue } from '../../../tokens/scales';\n\n/** Internal option shape: a real option, or the synthetic \"create new\" row. */\ninterface InternalOption extends CreatableSelectOption {\n  /** True for the synthetic row that triggers {@link CreatableSelectProps.onCreate}. */\n  isCreate?: boolean;\n}\n\n/** Prefix that marks a synthetic create-row value so it can never collide with a real one. */\nconst CREATE_PREFIX = ' create:';\n\nconst filterOptions = createFilterOptions<InternalOption>();\n\n/** How far one nesting level indents a dropdown row, in px. */\nconst INDENT_STEP = 16;\n\n/** `sm`/`md` → MUI's own scale, the same mapping {@link Input} uses. */\n// All five house stops onto MUI's two. `xs`/`sm` draw small; `md` and up draw\n// medium, because an autocomplete field has no third or fourth height to give.\nconst MUI_SIZE = { xs: 'small', sm: 'small', md: 'medium', lg: 'medium', xl: 'medium' } as const;\n\n/** Match the outlined border treatment of `Input` so siblings look identical. */\nconst fieldSx = {\n  '& .MuiOutlinedInput-root': {\n    '& fieldset': {\n      borderColor: (theme: { palette: { divider: string } }) => alpha(theme.palette.divider, 0.23),\n    },\n    '&:hover fieldset': { borderColor: 'primary.main' },\n    '&.Mui-focused fieldset': { borderColor: 'primary.main', borderWidth: 2 },\n    '&.Mui-error fieldset': { borderColor: 'error.main' },\n  },\n} as const;\n\n/**\n * The filter that appends the synthetic \"create\" row when the typed text matches\n * no existing option. Built per render from the two props it closes over.\n */\nfunction buildFilter(\n  onCreate: CreatableSelectProps['onCreate'],\n  createOptionLabel: (input: string) => string,\n) {\n  return (available: InternalOption[], params: { inputValue: string }): InternalOption[] => {\n    const filtered = filterOptions(available, params as Parameters<typeof filterOptions>[1]);\n    const input = params.inputValue.trim();\n    const alreadyExists = available.some(\n      (option) => option.label.toLowerCase() === input.toLowerCase(),\n    );\n    if (input && !alreadyExists && onCreate) {\n      filtered.push({\n        value: `${CREATE_PREFIX}${input}`,\n        label: createOptionLabel(input),\n        isCreate: true,\n      });\n    }\n    return filtered;\n  };\n}\n\n/**\n * A nested option is indented on its ROW; the label itself stays the bare name,\n * so the closed field never shows the tree drawing (see `depth`).\n */\nfunction renderIndentedOption(\n  props: React.HTMLAttributes<HTMLLIElement>,\n  option: InternalOption,\n): React.JSX.Element {\n  const { key, ...rest } = props as typeof props & { key?: string };\n  return (\n    <li\n      key={key ?? option.value}\n      {...rest}\n      style={{ paddingLeft: INDENT_STEP * (1 + (option.depth ?? 0)) }}\n    >\n      {option.label}\n    </li>\n  );\n}\n\n/** The text field Autocomplete renders, with the library's border + a loading adornment. */\nfunction renderField(\n  params: AutocompleteRenderInputParams,\n  field: {\n    inputId: string;\n    placeholder?: string;\n    error?: string;\n    loading: boolean;\n    size: SizeValue;\n    dataTestId: string;\n  },\n): React.JSX.Element {\n  return (\n    <TextField\n      {...params}\n      id={field.inputId}\n      placeholder={field.placeholder}\n      error={Boolean(field.error)}\n      size={MUI_SIZE[field.size]}\n      sx={fieldSx}\n      inputProps={{ ...params.inputProps, 'data-testid': `${field.dataTestId}-input` }}\n      slotProps={{\n        input: {\n          ...params.InputProps,\n          endAdornment: (\n            <>\n              {field.loading ? <CircularProgress color=\"inherit\" size={18} /> : null}\n              {params.InputProps.endAdornment}\n            </>\n          ),\n        },\n      }}\n    />\n  );\n}\n\n/**\n * The option list, plus the selected OBJECT MUI wants, from the controlled value.\n * `depth` is carried through: it is what {@link renderIndentedOption} draws.\n */\nfunction useInternalOptions(\n  options: CreatableSelectOption[],\n  value: string | null,\n): { items: InternalOption[]; selected: InternalOption | null } {\n  const items = useMemo<InternalOption[]>(\n    () => options.map(({ value: optionValue, label, depth }) => ({\n      value: optionValue,\n      label,\n      depth,\n    })),\n    [options],\n  );\n  const selected = useMemo<InternalOption | null>(\n    () => items.find((option) => option.value === value) ?? null,\n    [items, value],\n  );\n  return { items, selected };\n}\n\n/** Route a picked row: cleared, the synthetic create row, or a real option. */\nfunction handlePick(\n  next: InternalOption | null,\n  onChange: CreatableSelectProps['onChange'],\n  onCreate: CreatableSelectProps['onCreate'],\n): void {\n  if (!next) {\n    onChange(null);\n    return;\n  }\n  if (next.isCreate) {\n    void onCreate?.(next.value.slice(CREATE_PREFIX.length));\n    return;\n  }\n  onChange(next.value);\n}\n\n/**\n * A single-select, searchable combobox that can create a new option on the fly.\n *\n * Type to filter {@link CreatableSelectProps.options}; when the typed text matches\n * no option and {@link CreatableSelectProps.onCreate} is provided, a \"create\" row\n * appears and selecting it (Enter or click) calls `onCreate` with the raw text —\n * the parent persists it, then feeds the new option back via `options`/`value`.\n *\n * Chrome matches the library's other form fields: an external {@link FormLabel}\n * above the control (not a floating label), the same outlined border treatment as\n * {@link Input} and the same `sm`/`md` scale, so it lines up with sibling fields\n * in a grid row.\n */\nexport function CreatableSelect({\n  options,\n  value,\n  onChange,\n  onCreate,\n  label,\n  error,\n  placeholder,\n  createOptionLabel = (input) => `Criar \"${input}\"`,\n  noOptionsText,\n  disabled = false,\n  loading = false,\n  fullWidth = true,\n  size = 'md',\n  dataTestId = 'creatable-select',\n}: CreatableSelectProps): React.JSX.Element {\n  const inputId = useId();\n  const { items, selected } = useInternalOptions(options, value);\n\n  return (\n    <FormControl fullWidth={fullWidth} error={Boolean(error)}>\n      {label && (\n        <FormLabel htmlFor={inputId} error={Boolean(error)}>\n          {label}\n        </FormLabel>\n      )}\n      <Autocomplete<InternalOption, false, false, false>\n        value={selected}\n        options={items}\n        disabled={disabled}\n        loading={loading}\n        fullWidth={fullWidth}\n        size={MUI_SIZE[size]}\n        handleHomeEndKeys\n        selectOnFocus\n        clearOnBlur\n        data-testid={dataTestId}\n        noOptionsText={noOptionsText}\n        // Lift the dropdown above stacked modals: the default popup z-index is\n        // `modal` (1300), but a stacked sheet at depth ≥2 sits at 1300 + depth*10,\n        // which would otherwise cover the options. +100 clears ~10 stack levels.\n        slotProps={{ popper: { sx: { zIndex: (theme) => theme.zIndex.modal + 100 } } }}\n        getOptionLabel={(option) => (typeof option === 'string' ? option : option.label)}\n        isOptionEqualToValue={(option, current) => option.value === current.value}\n        renderOption={renderIndentedOption}\n        filterOptions={buildFilter(onCreate, createOptionLabel)}\n        onChange={(_event, next) => handlePick(next, onChange, onCreate)}\n        renderInput={(params) =>\n          renderField(params, { inputId, placeholder, error, loading, size, dataTestId })\n        }\n      />\n      {error && <FormMessage error dataTestId={`${dataTestId}-message`}>{error}</FormMessage>}\n    </FormControl>\n  );\n}\n"],"mappings":"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","names":[]}