@cimpress/react-components/dist/src/InlineEdit/InlineEdit.js

React components to support the MCP styleguide

"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.InlineEdit = InlineEdit;
const css_1 = require("@emotion/css");
const react_1 = __importStar(require("react"));
const use_id_1 = __importDefault(require("@accessible/use-id"));
const colors = __importStar(require("../colors"));
const cvar_1 = __importDefault(require("../theme/cvar"));
const CloseSvg_1 = __importDefault(require("../icons/CloseSvg"));
const CheckSvg_1 = require("../icons/CheckSvg");
const PencilSvg_1 = __importDefault(require("../icons/PencilSvg"));
const FeatureFlags_1 = require("../FeatureFlags");
const inlineEditInactiveTextColorVariable = '--crc-inline-edit-inactive-text-color';
const inlineEditBorderVariable = '--crc-inline-edit-border';
const validationMessageStyles = (0, css_1.css) `
  color: ${(0, cvar_1.default)('color-background-error')};
  margin-top: 4px;
  font-size: 12px;
`;
const rootStyles = (0, css_1.css) `
  ${`${inlineEditInactiveTextColorVariable}: ${colors.cobalt.base};`}
  ${`${inlineEditBorderVariable}: ${(0, cvar_1.default)('color-inline-edit-border')};`}
`;
const disabledStyles = (0, css_1.css) `
  ${`${inlineEditInactiveTextColorVariable}: ${colors.disabled.darker};`}
  ${`${inlineEditBorderVariable}: ${colors.disabled.darker};`}
`;
const marginBottomStyles = (0, css_1.css) `
  margin-bottom: 20px;
`;
const resetButtonStyles = (0, css_1.css) `
  background-color: transparent;
  border-width: 0;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  line-height: inherit;
  padding: 0;
`;
const editButtonStyles = (0, css_1.css) `
  display: flex;
  align-items: center;
  color: var(${inlineEditInactiveTextColorVariable});
  padding: 4px;
  border-bottom: 1px dashed var(${inlineEditBorderVariable});
  text-align: left;
  /* font size * line height + padding + border */
  min-height: calc(1em * var(--crc-inline-edit-line-height) + 8px + 1px);

  &:not(:disabled):hover {
    cursor: pointer;
    background-color: ${(0, cvar_1.default)('color-button-secondary-hover')};

    > svg {
      display: inline-block;
    }
  }

  &:disabled {
    cursor: not-allowed;
  }

  > svg {
    display: none;
    margin-left: 8px;
  }
`;
const inputStyles = (0, css_1.css) `
  border: 0;
  padding: 4px;
  border-bottom: 1px solid var(${inlineEditBorderVariable});

  &::placeholder {
    color: var(${inlineEditInactiveTextColorVariable});
  }

  &:focus {
    outline: none;
  }
`;
const measureTextStyles = (0, css_1.css) `
  position: absolute;
  top: -9999px;
  left: -9999px;
  visibility: hidden;
  top: 0;
  left: 0;
  padding: 4px;
  line-height: 1.5;
  height: 0;
  white-space: pre;
  overflow-x: scroll;

  > svg {
    margin-left: 8px;
  }
`;
const inputWrapperStyles = (0, css_1.css) `
  display: flex;
  align-items: flex-end;
`;
const inputButtonStyles = (0, css_1.css) `
  display: inline-flex;
  align-items: center;
  background: ${(0, cvar_1.default)('color-button-default')};
  color: ${(0, cvar_1.default)('color-inline-edit-border')};
  font-size: 14px;
  border-radius: 2px;
  border: none;
  padding: 5px;
  margin-bottom: 1px;
  box-shadow: 0px 1px 2px 0px rgba(58, 65, 76, 0.5);

  &:hover {
    cursor: pointer;
    background-color: ${(0, cvar_1.default)('color-button-secondary-active')};
  }
`;
const labelStyles = (0, css_1.css) `
  position: relative;
  display: block;
  color: ${(0, cvar_1.default)('color-text-label')};
  font-size: 14px;
  line-height: 1.5;
`;
const redAsterixStyles = (0, css_1.css) `
  color: ${(0, cvar_1.default)('color-required-asterisk')};
`;
const sizeDefaultsStyles = (0, css_1.css) `
  margin-top: 0;
  margin-bottom: 0;
  line-height: var(--crc-inline-edit-line-height);
`;
const textStylesMap = {
    default: (0, css_1.css) `
    --crc-inline-edit-line-height: 1.5;
    font-size: 14px;
  `,
    small: (0, css_1.css) `
    --crc-inline-edit-line-height: 1.5;
    font-size: 85%;
  `,
    h1: (0, css_1.css) `
    --crc-inline-edit-line-height: 1.15;
    font: ${(0, cvar_1.default)('text-h1')};
  `,
    h2: (0, css_1.css) `
    --crc-inline-edit-line-height: 1.15;
    font: ${(0, cvar_1.default)('text-h2')};
  `,
    h3: (0, css_1.css) `
    --crc-inline-edit-line-height: 1.15;
    font: ${(0, cvar_1.default)('text-h3')};
  `,
    h4: (0, css_1.css) `
    --crc-inline-edit-line-height: 1.15;
    font: ${(0, cvar_1.default)('text-h4')};
  `,
    h5: (0, css_1.css) `
    --crc-inline-edit-line-height: 1.15;
    font: ${(0, cvar_1.default)('text-h5')};
  `,
    h6: (0, css_1.css) `
    --crc-inline-edit-line-height: 1.15;
    font: ${(0, cvar_1.default)('text-h6')};
  `,
};
const buttonsWrapperStyles = (0, css_1.css) `
  margin-left: 8px;
  display: flex;
  gap: 4px;
`;
function InlineEdit(_a) {
    var { id, label, name, value, placeholder, onSave, onCancel, minWidth = 130, required, requiredWarningMessage = 'This Field is Required', size = 'default', validateInput, onEditStateChange } = _a, props = __rest(_a, ["id", "label", "name", "value", "placeholder", "onSave", "onCancel", "minWidth", "required", "requiredWarningMessage", "size", "validateInput", "onEditStateChange"]);
    const { v17_noOuterSpacing } = (0, FeatureFlags_1.useFeatureFlags)();
    const [showInput, setShowInput] = (0, react_1.useState)(false);
    const [localValue, setLocalValue] = (0, react_1.useState)(() => value !== null && value !== void 0 ? value : '');
    const [committedValue, setCommittedValue] = (0, react_1.useState)(() => localValue);
    const editButtonRef = (0, react_1.useRef)(null);
    const inputRef = (0, react_1.useRef)(null);
    const measureTextRef = (0, react_1.useRef)(null);
    const [inputWidth, setInputWidth] = (0, react_1.useState)(() => { var _a, _b; return (_b = (_a = editButtonRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) !== null && _b !== void 0 ? _b : 0; });
    const inputId = (0, use_id_1.default)(id);
    const [validationMessage, setValidationMessage] = (0, react_1.useState)();
    function save(e) {
        if (!validate(localValue)) {
            return;
        }
        setCommittedValue(localValue);
        setShowInput(false);
        onSave === null || onSave === void 0 ? void 0 : onSave({ value: localValue, name }, e);
    }
    function cancel(e) {
        setLocalValue(committedValue);
        setShowInput(false);
        onCancel === null || onCancel === void 0 ? void 0 : onCancel({ value: committedValue, name }, e);
    }
    const previousIsValid = (0, react_1.useRef)(true);
    function validate(value) {
        var _a, _b, _c, _d, _e;
        const isValid = ((_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.checkValidity()) !== null && _b !== void 0 ? _b : true) && (validateInput === null || validateInput === void 0 ? void 0 : validateInput(value)) == null;
        previousIsValid.current = isValid;
        const htmlIsValid = (_d = (_c = inputRef.current) === null || _c === void 0 ? void 0 : _c.checkValidity()) !== null && _d !== void 0 ? _d : true;
        const customIsValid = (validateInput === null || validateInput === void 0 ? void 0 : validateInput(value)) == null;
        if (!htmlIsValid) {
            if ((_e = inputRef.current) === null || _e === void 0 ? void 0 : _e.validity.valueMissing) {
                setValidationMessage(requiredWarningMessage);
            }
        }
        const customValidationMessage = validateInput === null || validateInput === void 0 ? void 0 : validateInput(value);
        if (customValidationMessage) {
            setValidationMessage(customValidationMessage);
        }
        if (htmlIsValid && customIsValid) {
            setValidationMessage('');
        }
        return htmlIsValid && customIsValid;
    }
    function handleKeyDown(e) {
        e.stopPropagation();
        if (e.key === 'Enter') {
            save(e);
        }
        if (e.key === 'Escape') {
            cancel(e);
        }
    }
    (0, react_1.useEffect)(() => {
        var _a, _b;
        setInputWidth((_b = (_a = editButtonRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) !== null && _b !== void 0 ? _b : 0);
    }, []);
    (0, react_1.useEffect)(() => {
        var _a, _b;
        setInputWidth((_b = (_a = measureTextRef.current) === null || _a === void 0 ? void 0 : _a.scrollWidth) !== null && _b !== void 0 ? _b : 0);
    }, [localValue, size, minWidth]);
    (0, react_1.useEffect)(() => {
        var _a;
        if (showInput && props.type === 'textarea' && inputRef.current && inputRef.current.textContent) {
            // Set the cursor to the end of the text and scroll to the end
            inputRef.current.setSelectionRange((_a = inputRef.current.textContent) === null || _a === void 0 ? void 0 : _a.length, inputRef.current.textContent.length);
            inputRef.current.scrollTop = inputRef.current.scrollHeight;
        }
    }, [props.type, showInput]);
    const onEditStateChangeRef = (0, react_1.useRef)(onEditStateChange);
    (0, react_1.useEffect)(() => {
        onEditStateChangeRef.current = onEditStateChange;
    }, [onEditStateChange]);
    (0, react_1.useEffect)(() => {
        var _a;
        (_a = onEditStateChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onEditStateChangeRef, showInput);
    }, [showInput]);
    (0, react_1.useEffect)(() => {
        setLocalValue(value !== null && value !== void 0 ? value : '');
        setCommittedValue(value !== null && value !== void 0 ? value : '');
    }, [value]);
    const sizeStyles = (0, css_1.cx)(textStylesMap[size], sizeDefaultsStyles);
    let inputOrTextAreaElement;
    if (props.type === 'textarea') {
        const { type, onChange, onBlur, onKeyDown } = props, textAreaProps = __rest(props, ["type", "onChange", "onBlur", "onKeyDown"]);
        inputOrTextAreaElement = (react_1.default.createElement("textarea", Object.assign({}, textAreaProps, { id: inputId, ref: inputRef, className: (0, css_1.cx)(sizeStyles, inputStyles), style: { width: inputWidth, minWidth }, 
            // eslint-disable-next-line jsx-a11y/no-autofocus
            autoFocus: true, placeholder: placeholder, value: localValue, name: name, required: required, onBlur: e => {
                validate(e.currentTarget.value);
                onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
            }, onChange: e => {
                setLocalValue(e.currentTarget.value);
                validate(e.currentTarget.value);
                onChange === null || onChange === void 0 ? void 0 : onChange(e);
            }, onKeyDown: e => {
                handleKeyDown(e);
                onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
            } })));
    }
    else {
        const { onChange, onBlur, onKeyDown } = props, inputProps = __rest(props, ["onChange", "onBlur", "onKeyDown"]);
        inputOrTextAreaElement = (react_1.default.createElement("input", Object.assign({}, inputProps, { id: inputId, ref: inputRef, className: (0, css_1.cx)(sizeStyles, inputStyles), style: { width: inputWidth, minWidth }, 
            // eslint-disable-next-line jsx-a11y/no-autofocus
            autoFocus: true, placeholder: placeholder, value: localValue, name: name, required: required, onBlur: e => {
                validate(e.currentTarget.value);
                onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
            }, onChange: e => {
                setLocalValue(e.currentTarget.value);
                validate(e.currentTarget.value);
                onChange === null || onChange === void 0 ? void 0 : onChange(e);
            }, onKeyDown: e => {
                handleKeyDown(e);
                onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
            } })));
    }
    const children = showInput ? (react_1.default.createElement("div", { className: inputWrapperStyles },
        inputOrTextAreaElement,
        react_1.default.createElement("div", { className: buttonsWrapperStyles },
            react_1.default.createElement("button", { className: inputButtonStyles, onClick: save, "aria-label": "Save" },
                react_1.default.createElement(CheckSvg_1.CheckSvg, { color: (0, cvar_1.default)('color-inline-edit-border') })),
            react_1.default.createElement("button", { className: inputButtonStyles, onClick: cancel, "aria-label": "Cancel" },
                react_1.default.createElement(CloseSvg_1.default, { color: (0, cvar_1.default)('color-inline-edit-border'), width: "1em", height: "1em" }))))) : (react_1.default.createElement("button", { className: (0, css_1.cx)(resetButtonStyles, sizeStyles, editButtonStyles), onClick: () => setShowInput(true), style: { minWidth }, ref: editButtonRef, disabled: props.disabled },
        localValue || placeholder,
        (label === '' || label == null) && required && react_1.default.createElement("sup", { className: redAsterixStyles }, "*"),
        react_1.default.createElement(PencilSvg_1.default, { size: "14px", color: (0, cvar_1.default)('color-inline-edit-border') })));
    return (react_1.default.createElement("div", { className: (0, css_1.cx)(rootStyles, props.disabled && disabledStyles, !v17_noOuterSpacing && marginBottomStyles) },
        label && (react_1.default.createElement("label", { className: labelStyles, htmlFor: inputId },
            label,
            required && react_1.default.createElement("sup", { className: redAsterixStyles }, "*"))),
        children,
        validationMessage && react_1.default.createElement("p", { className: validationMessageStyles }, validationMessage),
        react_1.default.createElement("div", { ref: measureTextRef, className: (0, css_1.cx)(sizeStyles, measureTextStyles), style: { minWidth } },
            localValue || placeholder,
            (label === '' || label == null) && required && react_1.default.createElement("sup", { className: redAsterixStyles }, "*"),
            react_1.default.createElement(PencilSvg_1.default, { size: "14px", color: (0, cvar_1.default)('color-inline-edit-border') }))));
}
//# sourceMappingURL=InlineEdit.js.map