@aokiapp/rjsf-mantine-corporate/dist/widgets/PillInputWidget.cjs

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

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var rjsfMantineTheme = require('@aokiapp/rjsf-mantine-theme');
var core = require('@mantine/core');
var utils = require('@rjsf/utils');
var react = require('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 = react.useMemo(() => Array.isArray(value) ? value : [], [value]);
  const onChange = onChangeOverride || onChangeBase;
  const onRemove = react.useCallback(
    (i) => {
      onChange(_value.filter((_, index) => index !== i));
    },
    [_value, onChange]
  );
  const onAdd = react.useCallback(
    (value2) => {
      onChange([..._value, value2]);
    },
    [_value, onChange]
  );
  const onBulkAdd = react.useCallback(
    (values) => {
      onChange([..._value, ...values]);
    },
    [_value, onChange]
  );
  const currentPills = _value.map((v, i) => /* @__PURE__ */ jsxRuntime.jsx(
    core.Pill,
    {
      withRemoveButton: !disabled && !readonly,
      onRemove: () => {
        onRemove(i);
      },
      children: v
    },
    i
  ));
  const [tmpValue, setTmpValue] = react.useState("");
  const handleChange = react.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] = react.useState(false);
  const handleCompositionStart = react.useCallback(() => {
    setIsComposing(true);
  }, [setIsComposing]);
  const handleCompositionEnd = react.useCallback(() => {
    setIsComposing(false);
  }, [setIsComposing]);
  const handleBlur = react.useCallback(() => {
    if (tmpValue) {
      onAdd(tmpValue);
      setTmpValue("");
    }
  }, [tmpValue, onAdd]);
  const handleKeyDown = react.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__ */ jsxRuntime.jsx(
    core.PillsInput.Field,
    {
      placeholder,
      id,
      value: tmpValue,
      onChange: handleChange,
      onKeyDown: handleKeyDown,
      onCompositionStart: handleCompositionStart,
      onCompositionEnd: handleCompositionEnd,
      autoFocus: autofocus,
      disabled: disabled || readonly,
      onBlur: handleBlur
    }
  );
  return /* @__PURE__ */ jsxRuntime.jsx(
    core.PillsInput,
    {
      label: utils.labelValue(label, hideLabel, void 0),
      description,
      disabled: disabled || readonly,
      error: rjsfMantineTheme.createErrors(rawErrors, hideError),
      "aria-describedby": utils.ariaDescribedByIds(id),
      required,
      className: "armt-widget-pill-input",
      children: /* @__PURE__ */ jsxRuntime.jsxs(core.Pill.Group, { children: [
        currentPills,
        pillInput
      ] })
    }
  );
}

exports.default = PillInputWidget;
//# sourceMappingURL=PillInputWidget.cjs.map