@indico-data/design-system 1.0.53 → 1.0.55

package/lib/index.esm.js

@@ -1594,7 +1594,7 @@ function Icon(_a) {
         console.error(`${props.name} is not a valid icon name.`);
         return null;
     }
-    return (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 (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) {
@@ -23090,12 +23090,22 @@ const StyledNoInputDatePicker = styled.div `
 
 function CustomCaption(props) {
     const { goToMonth, nextMonth, previousMonth } = useNavigation();
-    return (jsxs("div", { className: "custom__caption", children: [jsx("button", { className: "custom__caption__action__button", disabled: !previousMonth, onClick: () => previousMonth && goToMonth(previousMonth), children: jsx(Icon, { size: [10], ariaLabel: "Previous Month", name: "chevron-left" }) }), jsx("h2", { className: "custom__caption__text", children: format(props.displayMonth, 'MMM yyyy') }), jsx("button", { className: "custom__caption__action__button", disabled: !nextMonth, onClick: () => nextMonth && goToMonth(nextMonth), children: jsx(Icon, { size: [10], ariaLabel: "Next Month", name: "chevron-right" }) })] }));
+    return (jsxs("div", { className: "custom__caption", children: [jsx("button", { className: "custom__caption__action__button", disabled: !previousMonth, onClick: (event) => {
+                    event.preventDefault();
+                    if (previousMonth) {
+                        goToMonth(previousMonth);
+                    }
+                }, children: jsx(Icon, { size: [10], ariaLabel: "Previous Month", name: "chevron-left" }) }), jsx("h2", { className: "custom__caption__text", children: format(props.displayMonth, 'MMM yyyy') }), jsx("button", { className: "custom__caption__action__button", disabled: !nextMonth, onClick: (event) => {
+                    event.preventDefault();
+                    if (nextMonth) {
+                        goToMonth(nextMonth);
+                    }
+                }, children: 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] = useState(selected || undefined);
-    const [range, setRange] = useState(undefined);
+    const [localSelectedRange, setLocalSelectedRange] = useState(selectedRange || undefined);
     const [isPopperOpen, setIsPopperOpen] = useState(isOpen || false);
     const [popperElement, setPopperElement] = useState(null);
     const popperRef = useRef(null);
@@ -23111,17 +23121,34 @@ const NoInputDatePicker = (props) => {
         ],
     });
     const [isTrapActive, setIsTrapActive] = useState(false);
+    const datePickerRef = useRef(null);
+    // Addresses clickout side bug when implementing in an application
     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
+    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) => {
@@ -23135,7 +23162,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();
@@ -23144,14 +23171,15 @@ const NoInputDatePicker = (props) => {
             onChange(range);
         }
     };
-    return (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 ? (jsx("div", { id: `picker-label--${id}`, className: "visually-hidden", children: label })) : null, jsx("div", { ref: popperRef, className: "no__input__date__picker-inputParent", children: 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 && (jsx(FocusTrap$1, { active: isTrapActive, focusTrapOptions: {
+    return (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 ? (jsx("div", { id: `picker-label--${id}`, className: "visually-hidden", children: label })) : null, jsx("div", { ref: popperRef, className: "no__input__date__picker-inputParent", children: 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 && (jsx(FocusTrap$1, { active: isTrapActive, focusTrapOptions: {
                     initialFocus: false,
                     allowOutsideClick: true,
                     clickOutsideDeactivates: true,
                     onDeactivate: closePopper,
+                    fallbackFocus: popperRef.current || undefined,
                 }, children: 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 ? (jsx(DayPicker, { components: {
                             Caption: CustomCaption,
-                        }, disabled: disabled, mode: 'range', defaultMonth: localSelected, selected: range, onSelect: handleRangeSelect, fromDate: disableBeforeDate, toDate: disableAfterDate, "data-testid": "range-datepicker" })) : (jsx(DayPicker, { components: {
+                        }, disabled: disabled, mode: 'range', defaultMonth: localSelected, selected: localSelectedRange, onSelect: handleRangeSelect, fromDate: disableBeforeDate, toDate: disableAfterDate, "data-testid": "range-datepicker" })) : (jsx(DayPicker, { components: {
                             Caption: CustomCaption,
                         }, disabled: disabled, mode: 'single', defaultMonth: localSelected, selected: localSelected, onSelect: handleDaySelect, fromDate: disableBeforeDate, toDate: disableAfterDate, "data-testid": "single-datepicker" })) })) }))] }));
 };
@@ -25762,5 +25790,95 @@ function TextTruncate({ string, maxChars, children }) {
     return string.length > maxChars ? (jsxs(StyledTextTruncate, { title: string, children: [`${string.substring(0, maxChars)}...`, children] })) : (jsxs(StyledTextTruncate, { children: [string, children] }));
 }
 
-export { animation as ANIMATION, Radio$1 as AbstractRadio, RadioGroup$1 as AbstractRadioGroup, Accordion, breakpoints as BREAKPOINT, BarSpinner, BorderSelect, Button$1 as Button, allColors as COLORS, CirclePulse, CircleSpinner, ConfirmModal, DatePicker, Drawer, EditableInput, GlobalStyles, Icon, IconButton, ListTable, LoadingAwareContainer, LoadingList, margin as MARGINS, MATH, mediaQueries as MEDIA_QUERIES, ModalBase, MultiCombobox, NoInputDatePicker, NumberInput, padding as PADDINGS, Pagination, PercentageRing, Radio, RadioGroup, RandomLoadingMessage, spacings as SPACING, SearchInput, Section, SectionBlock, SectionBody, SectionHeader, SectionTable, Select, Shrug, SingleCombobox, StyledWizard, typography as TYPOGRAPHY, TextInput, TextTruncate, Wizard, WizardCard, WizardSection, WizardWithSidebar, faIcons, indicons };
+const StyledToggle = styled.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 (jsxs(StyledToggle, { className: classNames(className, {
+            disabled,
+        }), "data-cy": props['data-cy'], id: id, children: [jsx("input", { "aria-label": props['aria-label'], type: "checkbox", disabled: disabled, checked: value, onChange: onChange }), jsx("span", { className: "slider round" }), checkedIconName && (jsx(Icon, { name: checkedIconName, size: [iconSize || 5], className: "checked-icon" })), notCheckedIconName && (jsx(Icon, { name: notCheckedIconName, size: [iconSize || 5], className: "not-checked-icon" }))] }));
+};
+
+export { animation as ANIMATION, Radio$1 as AbstractRadio, RadioGroup$1 as AbstractRadioGroup, Accordion, breakpoints as BREAKPOINT, BarSpinner, BorderSelect, Button$1 as Button, allColors as COLORS, CirclePulse, CircleSpinner, ConfirmModal, DatePicker, Drawer, EditableInput, GlobalStyles, Icon, IconButton, ListTable, LoadingAwareContainer, LoadingList, margin as MARGINS, MATH, mediaQueries as MEDIA_QUERIES, ModalBase, MultiCombobox, NoInputDatePicker, NumberInput, padding as PADDINGS, Pagination, PercentageRing, Radio, RadioGroup, RandomLoadingMessage, spacings as SPACING, SearchInput, Section, SectionBlock, SectionBody, SectionHeader, SectionTable, Select, Shrug, SingleCombobox, StyledWizard, typography as TYPOGRAPHY, TextInput, TextTruncate, Toggle, Wizard, WizardCard, WizardSection, WizardWithSidebar, faIcons, indicons };
 //# sourceMappingURL=index.esm.js.map