@aokiapp/rjsf-mantine-corporate/lib/widgets/PillInputWidget.mjs

Corporational variant of theme, based on @aokiapp/rjsf-mantine-theme

import { jsx, jsxs } from 'react/jsx-runtime';
import { createErrors } from '@aokiapp/rjsf-mantine-theme';
import { Pill, PillsInput } from '@mantine/core';
import { labelValue, ariaDescribedByIds } from '@rjsf/utils';
import { useMemo, useCallback, useState } from 'react';

function PillInputWidget({
  id,
  placeholder,
  label,
  hideLabel,
  value,
  required,
  readonly,
  disabled,
  onChange: onChangeBase,
  onChangeOverride,
  autofocus,
  rawErrors,
  hideError,
  schema,
  options: { description, removeOnBackspace = false, punctuation = null }
}) {
  if (schema.type !== "array" || typeof schema.items !== "object" || Array.isArray(schema.items) || schema.items.type !== "string") {
    throw new Error("The PillInputWidget is only compatible with a schema that is an array of unique strings");
  }
  const _value = useMemo(() => Array.isArray(value) ? value : [], [value]);
  const onChange = onChangeOverride || onChangeBase;
  const onRemove = useCallback(
    (i) => {
      onChange(_value.filter((_, index) => index !== i));
    },
    [_value, onChange]
  );
  const onAdd = useCallback(
    (value2) => {
      onChange([..._value, value2]);
    },
    [_value, onChange]
  );
  const onBulkAdd = useCallback(
    (values) => {
      onChange([..._value, ...values]);
    },
    [_value, onChange]
  );
  const currentPills = _value.map((v, i) => /* @__PURE__ */ jsx(
    Pill,
    {
      withRemoveButton: !disabled && !readonly,
      onRemove: () => {
        onRemove(i);
      },
      children: v
    },
    i
  ));
  const [tmpValue, setTmpValue] = useState("");
  const handleChange = useCallback(
    (e) => {
      const v = e.target.value;
      if (typeof punctuation === "string" && punctuation.length) {
        const split = v.split(punctuation);
        onBulkAdd(split.slice(0, -1));
        setTmpValue(split[split.length - 1]);
      } else {
        setTmpValue(v);
      }
    },
    [onBulkAdd, punctuation]
  );
  const [isComposing, setIsComposing] = useState(false);
  const handleCompositionStart = useCallback(() => {
    setIsComposing(true);
  }, [setIsComposing]);
  const handleCompositionEnd = useCallback(() => {
    setIsComposing(false);
  }, [setIsComposing]);
  const handleBlur = useCallback(() => {
    if (tmpValue) {
      onAdd(tmpValue);
      setTmpValue("");
    }
  }, [tmpValue, onAdd]);
  const handleKeyDown = useCallback(
    (e) => {
      if (e.key === "Enter" && !isComposing && tmpValue) {
        e.preventDefault();
        onAdd(tmpValue);
        setTmpValue("");
      }
      if (e.key === "Backspace" && !tmpValue && _value.length > 0) {
        e.preventDefault();
        const last = _value[_value.length - 1];
        onRemove(_value.length - 1);
        if (!removeOnBackspace) {
          setTmpValue(last);
        }
      }
    },
    [isComposing, tmpValue, _value, onAdd, onRemove, removeOnBackspace]
  );
  const pillInput = /* @__PURE__ */ jsx(
    PillsInput.Field,
    {
      placeholder,
      id,
      value: tmpValue,
      onChange: handleChange,
      onKeyDown: handleKeyDown,
      onCompositionStart: handleCompositionStart,
      onCompositionEnd: handleCompositionEnd,
      autoFocus: autofocus,
      disabled: disabled || readonly,
      onBlur: handleBlur
    }
  );
  return /* @__PURE__ */ jsx(
    PillsInput,
    {
      label: labelValue(label, hideLabel, void 0),
      description,
      disabled: disabled || readonly,
      error: createErrors(rawErrors, hideError),
      "aria-describedby": ariaDescribedByIds(id),
      required,
      className: "armt-widget-pill-input",
      children: /* @__PURE__ */ jsxs(Pill.Group, { children: [
        currentPills,
        pillInput
      ] })
    }
  );
}

export { PillInputWidget as default };
//# sourceMappingURL=PillInputWidget.mjs.map