@harvest-profit/npk
Version:
NPK UI Design System
171 lines • 10.6 kB
JavaScript
;
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 () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.useBaseInput = exports.BaseInputContext = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importStar(require("react"));
const BaseInput_module_css_1 = __importDefault(require("./BaseInput.module.css"));
const Placeholder_1 = __importDefault(require("../Placeholder"));
const utils_1 = require("../utils");
exports.BaseInputContext = react_1.default.createContext({});
const useBaseInput = (props) => {
const inheritedContext = (0, react_1.useContext)(exports.BaseInputContext);
let providedLabel = `${props['label']}`;
if (providedLabel === '[Object object]')
providedLabel = '';
if (providedLabel === '' || providedLabel === 'undefined')
providedLabel = null;
let fullAriaLabelledBy = props['aria-labelledby'] || inheritedContext['aria-labelledby'];
if (inheritedContext.labelingIds.label) {
fullAriaLabelledBy = `${fullAriaLabelledBy || ''} ${inheritedContext.labelingIds.label}`;
}
if (inheritedContext.labelingIds.additional) {
fullAriaLabelledBy = `${fullAriaLabelledBy || ''} ${inheritedContext.labelingIds.additional}`;
}
return {
disabled: props.disabled || inheritedContext.disabled || props.loading || inheritedContext.loading,
'aria-label': props['aria-label'] || inheritedContext['aria-label'] || providedLabel,
'aria-labelledby': fullAriaLabelledBy,
id: props.id,
name: props.name || inheritedContext.name,
autoFocus: props.autoFocus,
placeholder: props.placeholder,
'aria-invalid': props['aria-invalid'],
'aria-required': props['aria-required'],
'aria-describedby': props['aria-describedby'] || inheritedContext.labelingIds.description,
'aria-controls': props['aria-controls'],
'aria-activedescendant': props['aria-activedescendant'],
'aria-autocomplete': props['aria-autocomplete'],
'autoComplete': props['autoComplete'],
'autoCorrect': props['autoCorrect'],
'autoCapitalize': props['autoCapitalize'],
form: props.form,
rows: props.rows,
type: props.type || 'text'
};
};
exports.useBaseInput = useBaseInput;
const isPlainContents = (element) => {
return typeof element === 'string' || typeof element === 'number';
};
const isValidElement = (element) => {
return typeof element === 'string' || react_1.default.isValidElement(element);
};
const preventFocusOnMouseDown = (event) => {
const targetNode = event.target;
if (targetNode.parentNode && targetNode.parentNode.contains(document.activeElement)) {
event.preventDefault();
}
};
let incId = 0; // note, replace with useId when we finally get to a later version of react.
const BaseInput = ({ className = '', variant, as: Tag = 'span', disabled, muted, label, labelDescription, labelRequirement, info, error, size, align, labelAlign, block, leadingVisual: LeadingVisual, trailingVisual: TrailingVisual, children, contentsProps = {}, contentsRef = () => null, containsSegments, onClick, onMouseDown, style, width, loading = false, ...props }) => {
const inheritedContext = (0, react_1.useContext)(exports.BaseInputContext);
variant = variant || inheritedContext.variant;
size = size || inheritedContext.size;
align = align || inheritedContext.align;
disabled = disabled || inheritedContext.disabled;
props['aria-label'] = props['aria-label'] || inheritedContext['aria-label'];
props['aria-labelledby'] = props['aria-labelledby'] || inheritedContext['aria-labelledby'];
const [uniqueID] = (0, react_1.useState)([`npk-ctrl-${incId++}`].filter(k => !!k).join(' '));
const labelingIds = { ...inheritedContext?.labelingIds || {}, uuid: uniqueID };
if (label)
labelingIds.label = `${uniqueID}-label`;
if (labelRequirement)
console.warn('NPK: Please use aria-required instead of labelRequirement on input');
if (labelDescription)
labelingIds.description = `${uniqueID}-description`;
if (props.hasOwnProperty('aria-required') || labelRequirement)
labelingIds.requirement = `${uniqueID}-requirement`;
if (error)
labelingIds.error = `${uniqueID}-error`;
if (info)
labelingIds.info = `${uniqueID}-info`;
const widthStyles = width ? { width } : {};
let additionalAriaLabel = null;
if (inheritedContext['aria-labelledby'] || (inheritedContext.labelingIds || {}).label) {
if (!props['aria-label'] && !props['placeholder'] && !props['name'] && !inheritedContext['name'])
console.warn('NPK: Please provide an aria-label, name, or placeholder for this input in this group');
labelingIds.additional = `${labelingIds.uuid}-more`;
additionalAriaLabel = ((0, jsx_runtime_1.jsx)("span", { "aria-hidden": true, id: labelingIds.additional, "aria-label": props['aria-label'] || props['name'] || inheritedContext['name'] || props['placeholder'] }));
}
let renderResult = null;
if (loading) {
const style = { height: null };
if (props.type === 'textarea' && props.rows) {
style.height = `${props.rows * 24}px`;
}
renderResult = (0, jsx_runtime_1.jsx)(Placeholder_1.default, { className: BaseInput_module_css_1.default.BaseInputPlaceholder, width: width || (block ? 'auto' : 210), "data-size": size, style: style });
}
else {
const tagProps = {};
if (props['data-component'])
tagProps['data-component'] = props['data-component'];
if (props['onPaste'])
tagProps['onPaste'] = props['onPaste'];
Object.keys(props).forEach(key => {
if (key.startsWith('data-')) {
tagProps[key] = props[key];
}
});
renderResult = ((0, jsx_runtime_1.jsxs)(Tag, { className: `${BaseInput_module_css_1.default.BaseInput} ${containsSegments ? BaseInput_module_css_1.default.SegmentedInput : ''} ${label ? '' : className}`, "data-variant": variant, "data-size": size, "data-align": align, "data-muted": muted, "data-block": block, "aria-disabled": disabled, onClick: onClick, onMouseDown: onMouseDown, style: { ...widthStyles, ...style }, "data-textarea": props.type === 'textarea' ? 'true' : undefined, ...tagProps, children: [LeadingVisual && ((0, jsx_runtime_1.jsx)("span", { "data-component": "leadingVisual", onMouseDown: preventFocusOnMouseDown, "data-visual": isPlainContents(LeadingVisual) ? 'text' : 'visual', children: isValidElement(LeadingVisual) ? LeadingVisual : (0, jsx_runtime_1.jsx)(LeadingVisual, {}) })), (0, jsx_runtime_1.jsx)("div", { ...contentsProps, ref: contentsRef, "data-component": "contents", children: (0, jsx_runtime_1.jsxs)(exports.BaseInputContext.Provider, { value: {
disabled,
loading,
variant: 'plain',
size,
align,
'aria-label': props['aria-label'],
'aria-labelledby': props['aria-labelledby'],
name: props['name'],
labelingIds
}, children: [children, additionalAriaLabel] }) }), TrailingVisual && ((0, jsx_runtime_1.jsx)("span", { "data-component": "trailingVisual", onMouseDown: preventFocusOnMouseDown, "data-visual": isPlainContents(TrailingVisual) ? 'text' : 'visual', children: isValidElement(TrailingVisual) ? TrailingVisual : (0, jsx_runtime_1.jsx)(TrailingVisual, {}) }))] }));
}
if (label) {
return ((0, jsx_runtime_1.jsxs)("label", { "data-label-align": labelAlign, className: `${BaseInput_module_css_1.default.Label} ${className}`, onClick: (e) => {
if (e.currentTarget.contains(document.activeElement)) {
e.preventDefault();
return;
}
const nextElem = (0, utils_1.nextFocusableElement)({ parentElem: e.currentTarget });
nextElem?.focus();
e.preventDefault();
}, children: [(0, jsx_runtime_1.jsxs)("span", { "data-component": "label", children: [(0, jsx_runtime_1.jsx)("span", { id: labelingIds.label, "data-component": "label-contents", children: label }), (props.hasOwnProperty('aria-required') || labelRequirement) && ((0, jsx_runtime_1.jsx)("span", { "data-component": "label-requirement", id: labelingIds.requirement, children: props.hasOwnProperty('aria-required') ? (`${props['aria-required']}` === 'true' ? '* required' : 'optional') : labelRequirement }))] }), labelDescription && (0, jsx_runtime_1.jsx)("span", { "data-component": "label-description", id: labelingIds.description, children: labelDescription }), renderResult, (info || error) && ((0, jsx_runtime_1.jsx)("span", { "data-component": "label-info", "data-error": !!error, children: error || info }))] }));
}
return renderResult;
};
exports.default = BaseInput;
//# sourceMappingURL=BaseInput.js.map