@indico-data/design-system 1.0.53 → 1.0.55

package/lib/index.js

@@ -1619,7 +1619,7 @@ function Icon(_a) {
         console.error(`${props.name} is not a valid icon name.`);
         return null;
     }
-    return (jsxRuntime$1.jsx("svg", Object.assign({}, iconComponentProps, ariaLabel, dimensions, { role: "img", className: props.className, "data-cy": props['data-cy'], "data-testid": props['data-testid'], fill: props.fill || 'currentColor', id: props.id, style: style, onClick: props.onClick })));
+    return (jsxRuntime$1.jsx("svg", Object.assign({}, iconComponentProps, ariaLabel, dimensions, { ref: props.ref, role: "img", className: props.className, "data-cy": props['data-cy'], "data-testid": props['data-testid'], fill: props.fill || 'currentColor', id: props.id, style: style, onClick: props.onClick })));
 }
 function returnDimensions(sizeProp) {
     if (sizeProp.length > 1) {
@@ -23115,12 +23115,22 @@ const StyledNoInputDatePicker = styled__default.default.div `
 
 function CustomCaption(props) {
     const { goToMonth, nextMonth, previousMonth } = useNavigation();
-    return (jsxRuntime$1.jsxs("div", { className: "custom__caption", children: [jsxRuntime$1.jsx("button", { className: "custom__caption__action__button", disabled: !previousMonth, onClick: () => previousMonth && goToMonth(previousMonth), children: jsxRuntime$1.jsx(Icon, { size: [10], ariaLabel: "Previous Month", name: "chevron-left" }) }), jsxRuntime$1.jsx("h2", { className: "custom__caption__text", children: format(props.displayMonth, 'MMM yyyy') }), jsxRuntime$1.jsx("button", { className: "custom__caption__action__button", disabled: !nextMonth, onClick: () => nextMonth && goToMonth(nextMonth), children: jsxRuntime$1.jsx(Icon, { size: [10], ariaLabel: "Next Month", name: "chevron-right" }) })] }));
+    return (jsxRuntime$1.jsxs("div", { className: "custom__caption", children: [jsxRuntime$1.jsx("button", { className: "custom__caption__action__button", disabled: !previousMonth, onClick: (event) => {
+                    event.preventDefault();
+                    if (previousMonth) {
+                        goToMonth(previousMonth);
+                    }
+                }, children: jsxRuntime$1.jsx(Icon, { size: [10], ariaLabel: "Previous Month", name: "chevron-left" }) }), jsxRuntime$1.jsx("h2", { className: "custom__caption__text", children: format(props.displayMonth, 'MMM yyyy') }), jsxRuntime$1.jsx("button", { className: "custom__caption__action__button", disabled: !nextMonth, onClick: (event) => {
+                    event.preventDefault();
+                    if (nextMonth) {
+                        goToMonth(nextMonth);
+                    }
+                }, children: jsxRuntime$1.jsx(Icon, { size: [10], ariaLabel: "Next Month", name: "chevron-right" }) })] }));
 }
 const NoInputDatePicker = (props) => {
-    const { ariaLabel, className, disabled, disableBeforeDate, disableAfterDate, id, label, onChange, selected, triggerIcon, triggerIconSize, isRangePicker, isOpen, } = props;
+    const { ariaLabel, className, disabled, disableBeforeDate, disableAfterDate, id, label, onChange, selected, triggerIcon, triggerIconSize, isRangePicker, selectedRange, isOpen, clearOnClose, } = props;
     const [localSelected, setLocalSelected] = React$1.useState(selected || undefined);
-    const [range, setRange] = React$1.useState(undefined);
+    const [localSelectedRange, setLocalSelectedRange] = React$1.useState(selectedRange || undefined);
     const [isPopperOpen, setIsPopperOpen] = React$1.useState(isOpen || false);
     const [popperElement, setPopperElement] = React$1.useState(null);
     const popperRef = React$1.useRef(null);
@@ -23136,17 +23146,34 @@ const NoInputDatePicker = (props) => {
         ],
     });
     const [isTrapActive, setIsTrapActive] = React$1.useState(false);
+    const datePickerRef = React$1.useRef(null);
+    // Addresses clickout side bug when implementing in an application
     React$1.useEffect(() => {
+        const handleClickOutside = (event) => {
+            // Close the date picker only when clicked outside
+            if (datePickerRef.current &&
+                event.target instanceof Node &&
+                !datePickerRef.current.contains(event.target)) {
+                closePopper();
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, []);
+    // Allow datepicker to load before setting active trap
+    React$1.useLayoutEffect(() => {
         if (isOpen) {
-            // Delay the activation of the FocusTrap to allow the DayPicker to render
-            const timeoutId = setTimeout(() => setIsTrapActive(true), 0);
-            return () => clearTimeout(timeoutId);
+            setIsTrapActive(true);
         }
         else {
             setIsTrapActive(false);
         }
     }, [isOpen]);
     const closePopper = () => {
+        clearOnClose && setLocalSelected(undefined);
+        clearOnClose && setLocalSelectedRange(undefined);
         setIsPopperOpen(false);
     };
     const handleDaySelect = (date) => {
@@ -23160,7 +23187,7 @@ const NoInputDatePicker = (props) => {
         }
     };
     const handleRangeSelect = (range) => {
-        setRange(range);
+        setLocalSelectedRange(range);
         if ((range === null || range === void 0 ? void 0 : range.from) && (range === null || range === void 0 ? void 0 : range.to)) {
             onChange(range);
             closePopper();
@@ -23169,14 +23196,15 @@ const NoInputDatePicker = (props) => {
             onChange(range);
         }
     };
-    return (jsxRuntime$1.jsxs(StyledNoInputDatePicker, { className: className, "aria-label": ariaLabel || 'date select', "aria-describedby": `picker-label--${id}`, "data-cy": props['data-cy'], "data-testid": props['data-testid'], id: id, children: [label ? (jsxRuntime$1.jsx("div", { id: `picker-label--${id}`, className: "visually-hidden", children: label })) : null, jsxRuntime$1.jsx("div", { ref: popperRef, className: "no__input__date__picker-inputParent", children: jsxRuntime$1.jsx(Icon, { "aria-label": "Open date picker", name: triggerIcon, size: triggerIconSize, className: "date__picker__trigger", "data-testid": `datepicker-trigger-for-${id}`, onClick: () => setIsPopperOpen(!isPopperOpen) }) }), isPopperOpen && (jsxRuntime$1.jsx(FocusTrap$1, { active: isTrapActive, focusTrapOptions: {
+    return (jsxRuntime$1.jsxs(StyledNoInputDatePicker, { className: className, "aria-label": ariaLabel || 'date select', "aria-describedby": `picker-label--${id}`, "data-cy": props['data-cy'], "data-testid": props['data-testid'], id: id, ref: datePickerRef, children: [label ? (jsxRuntime$1.jsx("div", { id: `picker-label--${id}`, className: "visually-hidden", children: label })) : null, jsxRuntime$1.jsx("div", { ref: popperRef, className: "no__input__date__picker-inputParent", children: jsxRuntime$1.jsx(Icon, { "aria-label": "Open date picker", name: triggerIcon, size: triggerIconSize, className: "date__picker__trigger", "data-testid": `datepicker-trigger-for-${id}`, onClick: () => setIsPopperOpen(!isPopperOpen) }) }), isPopperOpen && (jsxRuntime$1.jsx(FocusTrap$1, { active: isTrapActive, focusTrapOptions: {
                     initialFocus: false,
                     allowOutsideClick: true,
                     clickOutsideDeactivates: true,
                     onDeactivate: closePopper,
+                    fallbackFocus: popperRef.current || undefined,
                 }, children: jsxRuntime$1.jsx("div", Object.assign({ tabIndex: -1, style: popper.styles.popper, className: "DayPickerInput-Overlay" }, popper.attributes.popper, { ref: setPopperElement, role: "dialog", "aria-label": "DayPicker calendar", "data-testid": "datepicker-dialog", children: isRangePicker ? (jsxRuntime$1.jsx(DayPicker, { components: {
                             Caption: CustomCaption,
-                        }, disabled: disabled, mode: 'range', defaultMonth: localSelected, selected: range, onSelect: handleRangeSelect, fromDate: disableBeforeDate, toDate: disableAfterDate, "data-testid": "range-datepicker" })) : (jsxRuntime$1.jsx(DayPicker, { components: {
+                        }, disabled: disabled, mode: 'range', defaultMonth: localSelected, selected: localSelectedRange, onSelect: handleRangeSelect, fromDate: disableBeforeDate, toDate: disableAfterDate, "data-testid": "range-datepicker" })) : (jsxRuntime$1.jsx(DayPicker, { components: {
                             Caption: CustomCaption,
                         }, disabled: disabled, mode: 'single', defaultMonth: localSelected, selected: localSelected, onSelect: handleDaySelect, fromDate: disableBeforeDate, toDate: disableAfterDate, "data-testid": "single-datepicker" })) })) }))] }));
 };
@@ -25787,6 +25815,96 @@ function TextTruncate({ string, maxChars, children }) {
     return string.length > maxChars ? (jsxRuntime$1.jsxs(StyledTextTruncate, { title: string, children: [`${string.substring(0, maxChars)}...`, children] })) : (jsxRuntime$1.jsxs(StyledTextTruncate, { children: [string, children] }));
 }
 
+const StyledToggle = styled__default.default.label `
+  position: relative;
+  display: inline-block;
+  width: 28px;
+  height: 18px;
+  border: 2px solid ${allColors.defaultFontColor};
+  border-radius: 34px;
+  margin-bottom: 0;
+  cursor: pointer;
+
+  & input {
+    display: none;
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .slider {
+    position: absolute;
+    top: 0;
+    left: -1px;
+    right: 0;
+    bottom: 0;
+    transition: 0.4s;
+    border-radius: 34px;
+  }
+
+  .slider:before {
+    position: absolute;
+    content: '';
+    height: 17px;
+    width: 17px;
+    left: -1px;
+    bottom: -1px;
+    background-color: ${allColors.clay};
+    transition: 0.4s;
+    border: 2px solid ${allColors.defaultFontColor};
+    border-radius: 50%;
+  }
+
+  input:checked + .slider {
+    background-color: ${allColors.defaultFontColor};
+    width: 100%;
+  }
+
+  input:checked + .slider:before {
+    transform: translateX(12px);
+  }
+
+  p {
+    position: relative;
+    left: 35px;
+    bottom: 2px;
+  }
+
+  .checked-icon,
+  .not-checked-icon {
+    position: absolute;
+    pointer-events: none;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .checked-icon {
+    fill: #fff;
+    display: none;
+    left: 3px;
+  }
+
+  .not-checked-icon {
+    right: 3px;
+  }
+
+  input:checked ~ .not-checked-icon {
+    display: none;
+  }
+  input:checked ~ .checked-icon {
+    display: block;
+  }
+`;
+
+const Toggle = (props) => {
+    const { disabled, onChange, value, className, id, checkedIconName, notCheckedIconName, iconSize, } = props;
+    return (jsxRuntime$1.jsxs(StyledToggle, { className: classNames(className, {
+            disabled,
+        }), "data-cy": props['data-cy'], id: id, children: [jsxRuntime$1.jsx("input", { "aria-label": props['aria-label'], type: "checkbox", disabled: disabled, checked: value, onChange: onChange }), jsxRuntime$1.jsx("span", { className: "slider round" }), checkedIconName && (jsxRuntime$1.jsx(Icon, { name: checkedIconName, size: [iconSize || 5], className: "checked-icon" })), notCheckedIconName && (jsxRuntime$1.jsx(Icon, { name: notCheckedIconName, size: [iconSize || 5], className: "not-checked-icon" }))] }));
+};
+
 exports.ANIMATION = animation;
 exports.AbstractRadio = Radio$1;
 exports.AbstractRadioGroup = RadioGroup$1;
@@ -25835,6 +25953,7 @@ exports.StyledWizard = StyledWizard;
 exports.TYPOGRAPHY = typography;
 exports.TextInput = TextInput;
 exports.TextTruncate = TextTruncate;
+exports.Toggle = Toggle;
 exports.Wizard = Wizard;
 exports.WizardCard = WizardCard;
 exports.WizardSection = WizardSection;