@indico-data/design-system 2.52.0 → 2.53.0

package/lib/index.esm.js

@@ -7200,16 +7200,16 @@ const DisplayFormError = ({ message }) => {
 };
 
 const Input = React__default.forwardRef((_a, ref) => {
-    var { id, name, placeholder, isRequired, isDisabled, readonly, isClearable, errorMessage, helpText, iconName, onChange, onBlur, onKeyDown, className } = _a, rest = __rest(_a, ["id", "name", "placeholder", "isRequired", "isDisabled", "readonly", "isClearable", "errorMessage", "helpText", "iconName", "onChange", "onBlur", "onKeyDown", "className"]);
+    var { id, name, placeholder, isRequired, isDisabled, readonly, isClearable, errorMessage, helpText, maxLength, iconName, onChange, onBlur, onKeyDown, className } = _a, rest = __rest(_a, ["id", "name", "placeholder", "isRequired", "isDisabled", "readonly", "isClearable", "errorMessage", "helpText", "maxLength", "iconName", "onChange", "onBlur", "onKeyDown", "className"]);
     const hasErrors = errorMessage && errorMessage.length > 0;
     const handleClear = () => {
-        onChange({ target: { value: '' } });
+        onChange === null || onChange === void 0 ? void 0 : onChange({ target: { value: '' } });
     };
     const inputClasses = classNames('input', {
         error: hasErrors,
         'input--has-icon': iconName,
     }, className);
-    return (jsxs(Fragment, { children: [jsxs("div", { className: "input-wrapper", children: [iconName && (jsx(Icon, { name: iconName, "data-testid": `${name}-embedded-icon`, className: "embedded-icon" })), jsx("input", Object.assign({ ref: ref, id: id, "data-testid": `form-input-${name}`, name: name, type: "text", disabled: isDisabled, placeholder: placeholder, readOnly: readonly, onChange: onChange, onBlur: onBlur, onKeyDown: onKeyDown, className: inputClasses, "aria-invalid": hasErrors ? true : undefined, "aria-describedby": hasErrors || helpText ? `${name}-helper` : undefined, "aria-required": isRequired }, rest)), isClearable && !isDisabled && (jsx(Icon, { name: "x-close", "data-testid": `${name}-clearable-icon`, size: "sm", onClick: handleClear, className: "clearable-icon" }))] }), hasErrors && jsx(DisplayFormError, { message: errorMessage }), helpText && (jsx("div", { "data-testid": `${name}-help-text`, className: "help-text", id: `${name}-helper`, children: helpText }))] }));
+    return (jsxs(Fragment, { children: [jsxs("div", { className: "input-wrapper", children: [iconName && (jsx(Icon, { name: iconName, "data-testid": `${name}-embedded-icon`, className: "embedded-icon" })), jsx("input", Object.assign({ ref: ref, id: id, "data-testid": `form-input-${name}`, name: name, type: "text", disabled: isDisabled, placeholder: placeholder, readOnly: readonly, onChange: onChange, onBlur: onBlur, maxLength: maxLength, onKeyDown: onKeyDown, className: inputClasses, "aria-invalid": hasErrors ? true : undefined, "aria-describedby": hasErrors || helpText ? `${name}-helper` : undefined, "aria-required": isRequired }, rest)), isClearable && !isDisabled && (jsx(Icon, { name: "x-close", "data-testid": `${name}-clearable-icon`, size: "sm", onClick: handleClear, className: "clearable-icon" }))] }), hasErrors && jsx(DisplayFormError, { message: errorMessage }), helpText && (jsx("div", { "data-testid": `${name}-help-text`, className: "help-text", id: `${name}-helper`, children: helpText }))] }));
 });
 const LabeledInput = withLabel(Input);
 
@@ -13567,37 +13567,38 @@ const getCommonProps = (props) => {
     });
 };
 
-const DatePicker = (props) => {
-    const { mode = 'single', className, captionLayout = 'dropdown', selected, id, month, defaultMonth, startMonth, endMonth, components, numberOfMonths, isDisabled, formatters, weekStartsOn, firstWeekContainsDate, today, isRequired, min, max, onSelect, onMonthChange, onNextClick, onPrevClick, onDayClick } = props, rest = __rest(props, ["mode", "className", "captionLayout", "selected", "id", "month", "defaultMonth", "startMonth", "endMonth", "components", "numberOfMonths", "isDisabled", "formatters", "weekStartsOn", "firstWeekContainsDate", "today", "isRequired", "min", "max", "onSelect", "onMonthChange", "onNextClick", "onPrevClick", "onDayClick"]);
-    const futureDateByYear = (year) => new Date(new Date().getFullYear() + year, 11, 31);
-    const endMonthDefault = endMonth !== null && endMonth !== void 0 ? endMonth : futureDateByYear(5);
-    const modeMap = {
-        single: {
-            mode: 'single',
-            numberOfMonths: numberOfMonths !== null && numberOfMonths !== void 0 ? numberOfMonths : 1,
-            selected: selected,
-            onSelect: onSelect,
-            endMonth: endMonthDefault,
-        },
-        multiple: {
-            mode: 'multiple',
-            numberOfMonths: numberOfMonths !== null && numberOfMonths !== void 0 ? numberOfMonths : 1,
-            selected: selected,
-            onSelect: onSelect,
-            endMonth: endMonthDefault,
-        },
-        range: {
-            mode: 'range',
-            numberOfMonths: numberOfMonths !== null && numberOfMonths !== void 0 ? numberOfMonths : 2,
-            selected: selected,
-            onSelect: onSelect,
-            endMonth: endMonthDefault,
-        },
+const Form = (_a) => {
+    var { children, onSubmit, action, method, target, autocomplete, noValidate, enctype, rel } = _a, rest = __rest(_a, ["children", "onSubmit", "action", "method", "target", "autocomplete", "noValidate", "enctype", "rel"]);
+    const handleSubmit = (e) => {
+        e.preventDefault(); // Prevent the default form submission
+        // Create a FormData object, passing in the form (e.currentTarget)
+        const formData = new FormData(e.currentTarget);
+        // Convert FormData into a plain object
+        const formObject = Array.from(formData.entries()).reduce((obj, [key, value]) => {
+            obj[key] = value.toString();
+            return obj;
+        }, {});
+        // Call the onSubmit prop, if provided, passing the form object instead of the event
+        if (onSubmit) {
+            onSubmit(formObject); // Modified to pass formObject instead of e
+        }
     };
-    const modeProps = modeMap[mode];
-    const commonProps = getCommonProps(props);
-    const finalProps = Object.assign(Object.assign(Object.assign({}, commonProps), rest), modeProps);
-    return jsx(DayPicker, Object.assign({}, finalProps));
+    return (jsx("form", Object.assign({ onSubmit: handleSubmit, action: action, method: method, target: target, autoComplete: autocomplete, noValidate: noValidate, encType: enctype, rel: rel }, rest, { children: children })));
+};
+
+const Skeleton = (_a) => {
+    var { className, height, width, isCircle, isFullHeight } = _a, rest = __rest(_a, ["className", "height", "width", "isCircle", "isFullHeight"]);
+    const dynamicStyle = Object.assign(Object.assign({}, (height && { height: typeof height === 'number' ? `${height}px` : height })), (width && { width: typeof width === 'number' ? `${width}px` : width }));
+    const circleClass = isCircle ? 'skeleton--circle' : '';
+    const fullHeightClass = isFullHeight ? 'skeleton--full-height' : '';
+    const combinedClassName = `skeleton ${circleClass} ${fullHeightClass} ${className || ''}`.trim();
+    return jsx("div", Object.assign({ className: combinedClassName, style: dynamicStyle }, rest));
+};
+
+const Card = (_a) => {
+    var { className = '', children, title, subtitle, hasBoxShadow = false } = _a, rest = __rest(_a, ["className", "children", "title", "subtitle", "hasBoxShadow"]);
+    const cardClasses = classNames('card', { 'card--box-shadow': hasBoxShadow }, className);
+    return (jsxs("div", Object.assign({ className: cardClasses }, rest, { children: [(title || subtitle) && (jsxs("div", { className: "card__header", children: [title && jsx("h2", { children: title }), subtitle && jsx("p", { children: subtitle })] })), jsx("div", { className: "card__content", children: children })] })));
 };
 
 function getNodeName(node) {
@@ -15300,6 +15301,15 @@ function FloatUI({ children, ariaLabel, isOpen: controlledIsOpen, setIsOpen: con
                 (isPortal ? (jsx(FloatingPortal, { id: portalOptions === null || portalOptions === void 0 ? void 0 : portalOptions.rootId, children: tooltipContent })) : (tooltipContent))] }));
 }
 
+function Menu(_a) {
+    var { children, className } = _a, rest = __rest(_a, ["children", "className"]);
+    return (jsx("div", Object.assign({ className: classNames('menu', className) }, rest, { children: React__default.Children.map(children, (child) => React__default.isValidElement(child)
+            ? React__default.cloneElement(child, {
+                className: classNames(child.props.className, 'menu-item'),
+            })
+            : child) })));
+}
+
 const IconTriggerDatePicker = (props) => {
     const { ariaLabel, className, isDisabled, disableBeforeDate, disableAfterDate, id, label, onSelect, selected, triggerIcon, triggerIconSize, mode, isOpen, clearOnClose, initialMonth } = props, rest = __rest(props, ["ariaLabel", "className", "isDisabled", "disableBeforeDate", "disableAfterDate", "id", "label", "onSelect", "selected", "triggerIcon", "triggerIconSize", "mode", "isOpen", "clearOnClose", "initialMonth"]);
     const [localMonth, setLocalMonth] = useState(initialMonth !== null && initialMonth !== void 0 ? initialMonth : new Date());
@@ -20747,66 +20757,6 @@ function SingleInputDatePicker(props) {
     return (jsxs(FloatUI, { isOpen: isOpen, ariaLabel: ariaLabel, children: [jsx(LabeledInput, { id: inputId, value: localTextValue, placeholder: inputPlaceholder, isDisabled: isDisabled, iconName: inputIconName, isClearable: isClearable, onChange: handleInputChange, errorMessage: errorMessage, label: 'Single Date Picker', name: 'Date Picker' }), jsx(DatePicker, Object.assign({ captionLayout: captionLayout, mode: "single", selected: selected, onSelect: handleDayPickerSelect, month: localMonth, onMonthChange: setLocalMonth }, rest))] }));
 }
 
-const Form = (_a) => {
-    var { children, onSubmit, action, method, target, autocomplete, noValidate, enctype, rel } = _a, rest = __rest(_a, ["children", "onSubmit", "action", "method", "target", "autocomplete", "noValidate", "enctype", "rel"]);
-    const handleSubmit = (e) => {
-        e.preventDefault(); // Prevent the default form submission
-        // Create a FormData object, passing in the form (e.currentTarget)
-        const formData = new FormData(e.currentTarget);
-        // Convert FormData into a plain object
-        const formObject = Array.from(formData.entries()).reduce((obj, [key, value]) => {
-            obj[key] = value.toString();
-            return obj;
-        }, {});
-        // Call the onSubmit prop, if provided, passing the form object instead of the event
-        if (onSubmit) {
-            onSubmit(formObject); // Modified to pass formObject instead of e
-        }
-    };
-    return (jsx("form", Object.assign({ onSubmit: handleSubmit, action: action, method: method, target: target, autoComplete: autocomplete, noValidate: noValidate, encType: enctype, rel: rel }, rest, { children: children })));
-};
-
-const Skeleton = (_a) => {
-    var { className, height, width, isCircle, isFullHeight } = _a, rest = __rest(_a, ["className", "height", "width", "isCircle", "isFullHeight"]);
-    const dynamicStyle = Object.assign(Object.assign({}, (height && { height: typeof height === 'number' ? `${height}px` : height })), (width && { width: typeof width === 'number' ? `${width}px` : width }));
-    const circleClass = isCircle ? 'skeleton--circle' : '';
-    const fullHeightClass = isFullHeight ? 'skeleton--full-height' : '';
-    const combinedClassName = `skeleton ${circleClass} ${fullHeightClass} ${className || ''}`.trim();
-    return jsx("div", Object.assign({ className: combinedClassName, style: dynamicStyle }, rest));
-};
-
-const Card = (_a) => {
-    var { className = '', children, title, subtitle, hasBoxShadow = false } = _a, rest = __rest(_a, ["className", "children", "title", "subtitle", "hasBoxShadow"]);
-    const cardClasses = classNames('card', { 'card--box-shadow': hasBoxShadow }, className);
-    return (jsxs("div", Object.assign({ className: cardClasses }, rest, { children: [(title || subtitle) && (jsxs("div", { className: "card__header", children: [title && jsx("h2", { children: title }), subtitle && jsx("p", { children: subtitle })] })), jsx("div", { className: "card__content", children: children })] })));
-};
-
-function Menu(_a) {
-    var { children, className } = _a, rest = __rest(_a, ["children", "className"]);
-    return (jsx("div", Object.assign({ className: classNames('menu', className) }, rest, { children: React__default.Children.map(children, (child) => React__default.isValidElement(child)
-            ? React__default.cloneElement(child, {
-                className: classNames(child.props.className, 'menu-item'),
-            })
-            : child) })));
-}
-
-const Pill = (_a) => {
-    var { children, className, color = 'info', size = 'sm' } = _a, rest = __rest(_a, ["children", "className", "color", "size"]);
-    const pillClasses = classNames('pill', className, {
-        [`pill--${color}`]: color,
-        [`pill--${size}`]: size,
-    });
-    return (jsx("div", Object.assign({ className: pillClasses }, rest, { children: children })));
-};
-
-const Badge = (_a) => {
-    var { className = '', children, size = 'md', string } = _a, rest = __rest(_a, ["className", "children", "size", "string"]);
-    const badgeClasses = classNames('badge', {
-        [`badge--${size}`]: size,
-    }, className);
-    return (jsx("div", Object.assign({ className: badgeClasses }, rest, { children: string ? jsx("p", { children: string }) : children })));
-};
-
 var lib = {exports: {}};
 
 var Modal$2 = {};
@@ -22634,6 +22584,14 @@ const Modal = (_a) => {
     return (jsx(ReactModal, Object.assign({ style: {}, className: modalClasses, overlayClassName: overlayClasses, testId: testId, isOpen: isOpen, onRequestClose: onRequestClose, portalClassName: portalClassName, appElement: appElement, parentSelector: parentSelector, shouldCloseOnOverlayClick: shouldCloseOnOverlayClick, shouldCloseOnEsc: shouldCloseOnEsc, contentElement: contentElement, overlayElement: overlayElement }, rest, { children: jsxs("div", { className: "modal-content", children: [jsx(Button$1, { className: "modal-close-button", onClick: onRequestClose, variant: "link", size: "md", iconLeft: "x-close", ariaLabel: "Close" }), jsx("div", { className: "modal-body", children: children })] }) })));
 };
 
+const Badge = (_a) => {
+    var { className = '', children, size = 'md', string } = _a, rest = __rest(_a, ["className", "children", "size", "string"]);
+    const badgeClasses = classNames('badge', {
+        [`badge--${size}`]: size,
+    }, className);
+    return (jsx("div", Object.assign({ className: badgeClasses }, rest, { children: string ? jsx("p", { children: string }) : children })));
+};
+
 /**
    * table-core
    *
@@ -43008,5 +42966,104 @@ function TanstackTable(_a) {
                         }), children: [jsx("thead", { className: "tanstack-table__thead", children: jsx(TableHeader, { table: table, ref: thRefs }) }), jsx("tbody", { className: "tanstack-table__tbody", children: renderBody() })] }), hasSelectedRows && (jsx(ActionBar, { table: table, TableActions: TableActions, className: actionBarClassName }))] }), shouldRenderPagination ? (jsx(TablePagination, { currentPage: currentPage, rowCount: rowCount, onChangePage: onChangePage, rowsPerPage: rowsPerPage, totalEntriesText: totalEntriesText !== null && totalEntriesText !== void 0 ? totalEntriesText : `${totalRowsOnPage} of ${rowCount} entries` })) : null] }));
 }
 
-export { Badge, BarSpinner, Button$1 as Button, Card, Checkbox, CirclePulse, CircleSpinner, Col, Container, DatePicker, FloatUI, Form, Icon, IconTriggerDatePicker, LabeledInput as Input, Menu, Modal, LabeledPasswordInput as PasswordInput, Pill, Radio as RadioInput, Row, Select$1 as SelectInput, SingleInputDatePicker, Skeleton, Table, TanstackTable, LabeledTextarea as Textarea, Toggle as ToggleInput, Tooltip, arrow$2 as arrow, autoPlacement, autoUpdate$1 as autoUpdate, computePosition$2 as computePosition, detectOverflow$1 as detectOverflow, flip$2 as flip, getOverflowAncestors$1 as getOverflowAncestors, hide$1 as hide, inline, limitShift, offset$2 as offset, platform$1 as platform, registerFontAwesomeIcons, shift$2 as shift, size, useFloating$1 as useFloating };
+const hourOptions = Array.from({ length: 12 }, (_, i) => {
+    const num = `${i + 1}`;
+    return {
+        label: num,
+        value: num,
+    };
+});
+const minuteOptions = Array.from({ length: 60 }, (_, i) => {
+    const num = `${i}`.padStart(2, '0');
+    return {
+        label: num,
+        value: num,
+    };
+});
+const periodOptions = [
+    { label: 'AM', value: 'am' },
+    { label: 'PM', value: 'pm' },
+];
+
+// Parse initial time value
+const parseTimeValue = (time) => {
+    if (!time)
+        return { hours: '12', minutes: '00', period: 'am' };
+    const match = time.match(/(\d{1,2}):(\d{2})\s*(am|pm)/i);
+    if (!match)
+        return { hours: '12', minutes: '00', period: 'am' };
+    const [, hours, minutes, period] = match;
+    return {
+        hours: hours,
+        minutes: minutes,
+        period: period.toLowerCase(),
+    };
+};
+
+const TimePicker = ({ timeValue = '', label = 'Time Picker', onTimeChange, }) => {
+    const initialTime = parseTimeValue(timeValue);
+    const [hours, setHours] = useState(initialTime.hours);
+    const [minutes, setMinutes] = useState(initialTime.minutes);
+    const [period, setPeriod] = useState(initialTime.period);
+    const handleHourChange = (option) => {
+        setHours((option === null || option === void 0 ? void 0 : option.value) || '12');
+        onTimeChange === null || onTimeChange === void 0 ? void 0 : onTimeChange(`${(option === null || option === void 0 ? void 0 : option.value) || '12'}:${minutes} ${period.toUpperCase()}`);
+    };
+    const handleMinuteChange = (option) => {
+        setMinutes((option === null || option === void 0 ? void 0 : option.value) || '00');
+        onTimeChange === null || onTimeChange === void 0 ? void 0 : onTimeChange(`${hours}:${(option === null || option === void 0 ? void 0 : option.value) || '00'} ${period.toUpperCase()}`);
+    };
+    const handlePeriodChange = (option) => {
+        setPeriod((option === null || option === void 0 ? void 0 : option.value) || 'am');
+        onTimeChange === null || onTimeChange === void 0 ? void 0 : onTimeChange(`${hours}:${minutes} ${((option === null || option === void 0 ? void 0 : option.value) || 'am').toUpperCase()}`);
+    };
+    return (jsx("div", { className: "time-input-wrapper", children: jsxs(FloatUI, { ariaLabel: label, children: [jsx(LabeledInput, { "data-testid": "time-picker-input", name: "hours", label: label, hasHiddenLabel: true, value: `${hours}:${minutes} ${period.toUpperCase()}`, readonly: true, className: "time-picker-input" }), jsxs(Row, { gutterWidth: 0, className: "time-picker-row", children: [jsx(Col, { xs: "content", children: jsx(Select$1, { menuIsOpen: true, className: "hour-menu", components: { DropdownIndicator: () => null, IndicatorSeparator: () => null }, name: "hours", value: { label: hours, value: hours }, onChange: handleHourChange, options: hourOptions }) }), jsx(Col, { xs: "content", children: jsx(Select$1, { className: "minute-menu", components: { DropdownIndicator: () => null, IndicatorSeparator: () => null }, name: "minutes", options: minuteOptions, menuIsOpen: true, value: { label: minutes.padStart(2, '0'), value: minutes }, onChange: handleMinuteChange }) }), jsx(Col, { xs: "content", children: jsx(Select$1, { menuIsOpen: true, className: "period-menu", components: { DropdownIndicator: () => null, IndicatorSeparator: () => null }, name: "period", options: periodOptions, value: { label: period.toUpperCase(), value: period }, onChange: handlePeriodChange }) })] })] }) }));
+};
+
+const DatePicker = (props) => {
+    const { mode = 'single', className, captionLayout = 'dropdown', selected, hasTimePicker = false, id, month, defaultMonth, startMonth, endMonth, components, numberOfMonths, isDisabled, formatters, weekStartsOn, firstWeekContainsDate, today, timeValue, isRequired, min, max, onTimeChange, onSelect, onMonthChange, onNextClick, onPrevClick, onDayClick } = props, rest = __rest(props, ["mode", "className", "captionLayout", "selected", "hasTimePicker", "id", "month", "defaultMonth", "startMonth", "endMonth", "components", "numberOfMonths", "isDisabled", "formatters", "weekStartsOn", "firstWeekContainsDate", "today", "timeValue", "isRequired", "min", "max", "onTimeChange", "onSelect", "onMonthChange", "onNextClick", "onPrevClick", "onDayClick"]);
+    const futureDateByYear = (year) => new Date(new Date().getFullYear() + year, 11, 31);
+    const endMonthDefault = endMonth !== null && endMonth !== void 0 ? endMonth : futureDateByYear(5);
+    const modeMap = {
+        single: {
+            mode: 'single',
+            numberOfMonths: numberOfMonths !== null && numberOfMonths !== void 0 ? numberOfMonths : 1,
+            selected: selected,
+            onSelect: onSelect,
+            endMonth: endMonthDefault,
+        },
+        multiple: {
+            mode: 'multiple',
+            numberOfMonths: numberOfMonths !== null && numberOfMonths !== void 0 ? numberOfMonths : 1,
+            selected: selected,
+            onSelect: onSelect,
+            endMonth: endMonthDefault,
+        },
+        range: {
+            mode: 'range',
+            numberOfMonths: numberOfMonths !== null && numberOfMonths !== void 0 ? numberOfMonths : 2,
+            selected: selected,
+            onSelect: onSelect,
+            endMonth: endMonthDefault,
+        },
+    };
+    const modeProps = modeMap[mode];
+    const commonProps = getCommonProps(props);
+    const handleTimeChange = (time) => {
+        onTimeChange === null || onTimeChange === void 0 ? void 0 : onTimeChange(time);
+    };
+    const finalProps = Object.assign(Object.assign(Object.assign({}, commonProps), rest), modeProps);
+    return (jsxs(Fragment, { children: [hasTimePicker && (jsx("div", { className: "time-picker-wrapper", children: jsxs(Row, { align: "center", children: [jsx(Col, { xs: "content", children: jsx("p", { className: "ma-0", children: "Select Time" }) }), jsx(Col, { children: jsx(TimePicker, { timeValue: timeValue !== null && timeValue !== void 0 ? timeValue : '', onTimeChange: handleTimeChange }) })] }) })), jsx(DayPicker, Object.assign({}, finalProps))] }));
+};
+
+const Pill = (_a) => {
+    var { children, className, color = 'info', size = 'sm' } = _a, rest = __rest(_a, ["children", "className", "color", "size"]);
+    const pillClasses = classNames('pill', className, {
+        [`pill--${color}`]: color,
+        [`pill--${size}`]: size,
+    });
+    return (jsx("div", Object.assign({ className: pillClasses }, rest, { children: children })));
+};
+
+export { Badge, BarSpinner, Button$1 as Button, Card, Checkbox, CirclePulse, CircleSpinner, Col, Container, DatePicker, FloatUI, Form, Icon, IconTriggerDatePicker, LabeledInput as Input, Menu, Modal, LabeledPasswordInput as PasswordInput, Pill, Radio as RadioInput, Row, Select$1 as SelectInput, SingleInputDatePicker, Skeleton, Table, TanstackTable, LabeledTextarea as Textarea, TimePicker, Toggle as ToggleInput, Tooltip, arrow$2 as arrow, autoPlacement, autoUpdate$1 as autoUpdate, computePosition$2 as computePosition, detectOverflow$1 as detectOverflow, flip$2 as flip, getOverflowAncestors$1 as getOverflowAncestors, hide$1 as hide, inline, limitShift, offset$2 as offset, platform$1 as platform, registerFontAwesomeIcons, shift$2 as shift, size, useFloating$1 as useFloating };
 //# sourceMappingURL=index.esm.js.map