@arc-ui/components 12.0.0-beta.13 → 12.0.0-beta.14.1

package/lib/_shared/cjs/DatePicker-CmRbyMHi.cjs

@@ -0,0 +1,316 @@
+'use strict';
+
+var filterAttrs = require('./filter-attrs-eK6E_34o.cjs');
+var React = require('react');
+var index$2 = require('./index-CTlXMLug.cjs');
+var index$3 = require('./index-BCsybVMl.cjs');
+var Calendar = require('./Calendar-BC-wjsFG.cjs');
+var index = require('./index-BLRjGROQ.cjs');
+var index$1 = require('./index-DXNM3D1d.cjs');
+var TextInput = require('./TextInput-DT4hi02U.cjs');
+
+/**
+ * @name startOfDay
+ * @category Day Helpers
+ * @summary Return the start of a day for the given date.
+ *
+ * @description
+ * Return the start of a day for the given date.
+ * The result will be in the local timezone.
+ *
+ * @param {Date|Number} date - the original date
+ * @returns {Date} the start of a day
+ * @throws {TypeError} 1 argument required
+ *
+ * @example
+ * // The start of a day for 2 September 2014 11:55:00:
+ * const result = startOfDay(new Date(2014, 8, 2, 11, 55, 0))
+ * //=> Tue Sep 02 2014 00:00:00
+ */
+function startOfDay(dirtyDate) {
+  index.requiredArgs(1, arguments);
+  var date = index.toDate(dirtyDate);
+  date.setHours(0, 0, 0, 0);
+  return date;
+}
+
+/**
+ * @name isSameDay
+ * @category Day Helpers
+ * @summary Are the given dates in the same day (and year and month)?
+ *
+ * @description
+ * Are the given dates in the same day (and year and month)?
+ *
+ * @param {Date|Number} dateLeft - the first date to check
+ * @param {Date|Number} dateRight - the second date to check
+ * @returns {Boolean} the dates are in the same day (and year and month)
+ * @throws {TypeError} 2 arguments required
+ *
+ * @example
+ * // Are 4 September 06:00:00 and 4 September 18:00:00 in the same day?
+ * const result = isSameDay(new Date(2014, 8, 4, 6, 0), new Date(2014, 8, 4, 18, 0))
+ * //=> true
+ *
+ * @example
+ * // Are 4 September and 4 October in the same day?
+ * const result = isSameDay(new Date(2014, 8, 4), new Date(2014, 9, 4))
+ * //=> false
+ *
+ * @example
+ * // Are 4 September, 2014 and 4 September, 2015 in the same day?
+ * const result = isSameDay(new Date(2014, 8, 4), new Date(2015, 8, 4))
+ * //=> false
+ */
+function isSameDay(dirtyDateLeft, dirtyDateRight) {
+  index.requiredArgs(2, arguments);
+  var dateLeftStartOfDay = startOfDay(dirtyDateLeft);
+  var dateRightStartOfDay = startOfDay(dirtyDateRight);
+  return dateLeftStartOfDay.getTime() === dateRightStartOfDay.getTime();
+}
+
+var parseRangeString = function (value) {
+    if (value === void 0) { value = ""; }
+    var _a = value.replace(/\s/g, "").split("-"), _b = _a[0], start = _b === void 0 ? "" : _b, _c = _a[1], end = _c === void 0 ? "" : _c;
+    var _d = start.split("/"), startDay = _d[0], startMonth = _d[1], startYear = _d[2];
+    var _e = end.split("/"), endDay = _e[0], endMonth = _e[1], endYear = _e[2];
+    return {
+        start: {
+            date: start,
+            day: startDay,
+            month: startMonth,
+            year: startYear,
+        },
+        end: {
+            date: end,
+            day: endDay,
+            month: endMonth,
+            year: endYear,
+        },
+    };
+};
+
+var parseDateString = function (value) {
+    var _a = value.split("/"), day = _a[0], month = _a[1], year = _a[2];
+    return {
+        day: day,
+        month: month,
+        year: year,
+    };
+};
+
+var isDateValid = function (value) {
+    if (value === void 0) { value = ""; }
+    var _a = value.split("/"), day = _a[0], month = _a[1], year = _a[2];
+    return (/^\d{2}\/\d{2}\/\d{4}$/.test(value) &&
+        index.isValid(new Date("".concat(year, "-").concat(month, "-").concat(day))));
+};
+
+var isRangeValid = function (value) {
+    if (value === void 0) { value = ""; }
+    var _a = value.replace(/\s/g, "").split("-"), _b = _a[0], start = _b === void 0 ? "" : _b, _c = _a[1], end = _c === void 0 ? "" : _c;
+    return isDateValid(start) && isDateValid(end);
+};
+
+var DATE_FORMAT = "dd/MM/yyyy";
+
+var formatDate = function (value) {
+    return index.format(value, DATE_FORMAT);
+};
+
+var isDisabledDate = function (disabledDates, date) {
+    return Boolean(disabledDates &&
+        disabledDates.find(function (disabledDate) { return isSameDay(date, disabledDate); }));
+};
+
+var convertDateStringToDate = function (value) {
+    if (value === void 0) { value = ""; }
+    var _a = parseDateString(value), day = _a.day, month = _a.month, year = _a.year;
+    var isValidDate = isDateValid(value);
+    return isValidDate ? new Date("".concat(year, "-").concat(month, "-").concat(day)) : new Date();
+};
+
+var convertRangeStringToDates = function (value) {
+    if (value === void 0) { value = ""; }
+    var _a = parseRangeString(value), start = _a.start, end = _a.end;
+    return filterAttrs.__spreadArray(filterAttrs.__spreadArray([], (isDateValid(start.date)
+        ? [new Date("".concat(start.year, "-").concat(start.month, "-").concat(start.day))]
+        : []), true), (isDateValid(end.date)
+        ? [new Date("".concat(end.year, "-").concat(end.month, "-").concat(end.day))]
+        : []), true);
+};
+
+/**
+ * Use `DatePicker` to clearly present available dates and allow users to choose a way to enter information.
+ */
+var DatePicker = React.forwardRef(function (_a, ref) {
+    var errorMessage = _a.errorMessage, helper = _a.helper, id = _a.id, label = _a.label, isDisabled = _a.isDisabled, isReadOnly = _a.isReadOnly, isRequired = _a.isRequired, labelSize = _a.labelSize, inputSize = _a.inputSize, _b = _a.value, value = _b === void 0 ? "" : _b, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, onDateSelect = _a.onDateSelect, onRangeSelect = _a.onRangeSelect, onClickDisclosure = _a.onClickDisclosure, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, type = _a.type, _c = _a.isFluid, isFluid = _c === void 0 ? false : _c, _d = _a.selectionType, selectionType = _d === void 0 ? "single" : _d, disabledDates = _a.disabledDates, minDate = _a.minDate, maxDate = _a.maxDate, props = filterAttrs.__rest(_a, ["errorMessage", "helper", "id", "label", "isDisabled", "isReadOnly", "isRequired", "labelSize", "inputSize", "value", "name", "onBlur", "onChange", "onDateSelect", "onRangeSelect", "onClickDisclosure", "disclosureTitle", "disclosureText", "type", "isFluid", "selectionType", "disabledDates", "minDate", "maxDate"]);
+    var _e = index$1.useThemeElement(), themeElement = _e[0], setThemeElement = _e[1];
+    var _f = React.useState("Choose date"), ariaLabel = _f[0], setAriaLabel = _f[1];
+    var _g = React.useState(false), showCalendar = _g[0], setShowCalendar = _g[1];
+    var buttonRef = React.useRef(null);
+    var ourRef = React.useRef(null);
+    var previousValidValue = React.useRef(value);
+    var lowerCaseDateFormat = DATE_FORMAT.toLowerCase();
+    var placeHolder = selectionType === "range"
+        ? "".concat(lowerCaseDateFormat, " - ").concat(lowerCaseDateFormat)
+        : lowerCaseDateFormat;
+    React.useEffect(function () {
+        if (selectionType === "single" &&
+            isDateValid(value) &&
+            !isDisabledDate(disabledDates, convertDateStringToDate(value))) {
+            previousValidValue.current = value;
+        }
+        if (selectionType === "range" && isRangeValid(value)) {
+            var rangeHasDisabledDates = convertRangeStringToDates(value).some(function (rangeValue) { return isDisabledDate(disabledDates, rangeValue); });
+            if (!rangeHasDisabledDates) {
+                previousValidValue.current = value;
+            }
+        }
+    }, [value, disabledDates, selectionType]);
+    var getDatePickerRef = function (elementRef) {
+        ourRef.current = elementRef;
+        if (ref && typeof ref === "object") {
+            ref.current = elementRef;
+        }
+        if (ref && typeof ref === "function") {
+            ref(elementRef);
+        }
+    };
+    var dispatchChangeEvent = function (e, value) {
+        onChange &&
+            onChange(filterAttrs.__assign(filterAttrs.__assign({}, e), { target: filterAttrs.__assign(filterAttrs.__assign({}, e.target), { value: value }) }));
+    };
+    var handleRangeSelect = function (rangeSelection) {
+        var start = formatDate(rangeSelection.start);
+        var end = rangeSelection.end ? formatDate(rangeSelection.end) : null;
+        onRangeSelect &&
+            onRangeSelect(filterAttrs.__assign(filterAttrs.__assign({}, rangeSelection), { formattedRange: "".concat(start).concat(end ? " - ".concat(end) : "") }));
+        rangeSelection.isSelectionComplete && setShowCalendar(false);
+    };
+    var handleDateSelect = function (value) {
+        onDateSelect &&
+            onDateSelect({
+                date: value,
+                formattedDate: formatDate(value),
+            });
+        setShowCalendar(false);
+    };
+    var handleSingleSelectionBlur = function (e) {
+        if (value && isDateValid(value) && selectionType === "single") {
+            var _a = parseDateString(value), day = _a.day, month = _a.month, year = _a.year;
+            var date = new Date("".concat(year, "-").concat(month, "-").concat(day));
+            var isDateBeforeMinDate = minDate && Calendar.isBefore(date, minDate);
+            var isDateAfterMaxDate = maxDate && Calendar.isAfter(date, maxDate);
+            var isDisabledValue = isDisabledDate(disabledDates, date);
+            if (isDateBeforeMinDate) {
+                return dispatchChangeEvent(e, "".concat(formatDate(minDate)));
+            }
+            if (isDateAfterMaxDate) {
+                return dispatchChangeEvent(e, "".concat(formatDate(maxDate)));
+            }
+            if (isDisabledValue) {
+                var date_1 = previousValidValue.current
+                    ? convertDateStringToDate(previousValidValue.current)
+                    : new Date();
+                return dispatchChangeEvent(e, "".concat(formatDate(date_1)));
+            }
+        }
+    };
+    var handleRangeSelectionBlur = function (e) {
+        if (isRangeValid(value) && selectionType === "range") {
+            var _a = convertRangeStringToDates(value), start = _a[0], end = _a[1];
+            var isStartDateBeforeMinDate = minDate && Calendar.isBefore(start, minDate);
+            var isEndDateAfterMaxDate = maxDate && Calendar.isAfter(end, maxDate);
+            var isStartDateDisabled = isDisabledDate(disabledDates, start);
+            var isEndDateDisabled = isDisabledDate(disabledDates, end);
+            if (isStartDateBeforeMinDate && isEndDateAfterMaxDate) {
+                return dispatchChangeEvent(e, "".concat(formatDate(minDate), " - ").concat(formatDate(maxDate)));
+            }
+            if (isStartDateBeforeMinDate) {
+                return dispatchChangeEvent(e, "".concat(formatDate(minDate), " - ").concat(formatDate(end)));
+            }
+            if (isEndDateAfterMaxDate) {
+                return dispatchChangeEvent(e, "".concat(formatDate(start), " - ").concat(formatDate(maxDate)));
+            }
+            if (isStartDateDisabled || isEndDateDisabled) {
+                var _b = previousValidValue.current
+                    ? convertRangeStringToDates(previousValidValue.current)
+                    : [], start_1 = _b[0], end_1 = _b[1];
+                return dispatchChangeEvent(e, start_1 && end_1 ? "".concat(formatDate(start_1), " - ").concat(formatDate(end_1)) : "");
+            }
+            if (Calendar.isAfter(start, end)) {
+                var _c = [start, end].sort(Calendar.compareAsc), orderedStart = _c[0], orderedEnd = _c[1];
+                return dispatchChangeEvent(e, "".concat(formatDate(orderedStart), " - ").concat(formatDate(orderedEnd)));
+            }
+        }
+    };
+    var handleBlur = function (e) {
+        onBlur && onBlur(e);
+        if (selectionType === "single") {
+            handleSingleSelectionBlur(e);
+        }
+        if (selectionType === "range") {
+            handleRangeSelectionBlur(e);
+        }
+    };
+    var handleChange = function (e) {
+        onChange && onChange(e);
+    };
+    var handleCalendarOpenChange = function (isOpen) {
+        if (document.activeElement)
+            setShowCalendar(isOpen);
+    };
+    var handleIconClick = function () {
+        var _a;
+        !((_a = ourRef.current) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement)) &&
+            !isDisabled &&
+            !isReadOnly &&
+            setShowCalendar(true);
+    };
+    var handleIconFocus = function () {
+        if (selectionType === "range" && isRangeValid(value)) {
+            var _a = convertRangeStringToDates(value), start = _a[0], end = _a[1];
+            return setAriaLabel("Change dates, currently selected dates are ".concat(index.format(start, "EEEE do MMMM, yyyy"), " to ").concat(index.format(end, "EEEE do MMMM, yyyy")));
+        }
+        if (selectionType === "single" && isDateValid(value)) {
+            var date = convertDateStringToDate(value);
+            return setAriaLabel("Change date, currently selected date is ".concat(index.format(date, "EEEE do MMMM, yyyy")));
+        }
+        setAriaLabel("Choose Date");
+    };
+    var handleCalendarClose = function () {
+        var _a, _b;
+        if (((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.tagName) === "BODY") {
+            (_b = buttonRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+    };
+    var onCancelClick = function () {
+        setShowCalendar(false);
+    };
+    var handleAutoFocus = function (e) {
+        e.preventDefault();
+    };
+    return (React.createElement("div", { ref: setThemeElement, className: index$2.classNames({
+            "arc-DatePicker--constrained": !isFluid,
+        }) },
+        React.createElement(TextInput.TextInputWithPlaceHolder, filterAttrs.__assign({ ref: getDatePickerRef, iconButton: {
+                onClick: handleIconClick,
+                onFocus: handleIconFocus,
+                icon: "datePickerCalendar",
+                label: ariaLabel,
+                ref: buttonRef,
+            }, placeholder: placeHolder, errorMessage: errorMessage, helper: helper, id: id, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, label: label, labelSize: labelSize, maxLength: selectionType === "range" ? 23 : 10, name: name, onBlur: handleBlur, onChange: handleChange, onClickDisclosure: onClickDisclosure, type: "text", value: value, disclosureTitle: disclosureTitle, disclosureText: disclosureText, inputSize: inputSize }, props, filterAttrs.filterAttrs(props))),
+        React.createElement(index$3.Root2, filterAttrs.__assign({ open: showCalendar, onOpenChange: handleCalendarOpenChange }, filterAttrs.filterAttrs(props)),
+            React.createElement(index$3.Anchor2, null),
+            React.createElement(index$3.Portal, { container: themeElement },
+                React.createElement(index$3.Content2, { align: "start", "aria-modal": "true", "aria-label": "Choose Date", className: "arc-DatePicker-modal", onOpenAutoFocus: handleAutoFocus, onCloseAutoFocus: handleCalendarClose },
+                    React.createElement(Calendar.Calendar, { autoFocusOnMount: true, type: type, onCancelClick: onCancelClick, selectionType: selectionType, selectedDate: convertDateStringToDate(value), selectedRange: convertRangeStringToDates(value), disabledDates: disabledDates, minDate: minDate, maxDate: maxDate, onDateSelect: handleDateSelect, onRangeSelect: handleRangeSelect }))))));
+});
+
+exports.DATE_FORMAT = DATE_FORMAT;
+exports.DatePicker = DatePicker;
+exports.isDateValid = isDateValid;
+exports.isRangeValid = isRangeValid;
+exports.parseDateString = parseDateString;
+exports.parseRangeString = parseRangeString;

package/lib/_shared/cjs/DisclosureMini-CtvDxVaG.cjs

@@ -0,0 +1,37 @@
+'use strict';
+
+var filterAttrs = require('./filter-attrs-eK6E_34o.cjs');
+var React = require('react');
+var index = require('./index-CTlXMLug.cjs');
+var Text = require('./Text-Cr5nmYmx.cjs');
+var Surface = require('./Surface-BFx1yNsq.cjs');
+var ThemeIcon = require('./ThemeIcon-BoxbjTaQ.cjs');
+
+/**
+ * Use `DisclosureMini` to show and hide sections of content.
+ */
+var DisclosureMini = function (_a) {
+    var children = _a.children, summary = _a.summary, onClick = _a.onClick, id = _a.id, _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, _c = _a.iconPosition, iconPosition = _c === void 0 ? "left" : _c, _d = _a.size, size = _d === void 0 ? "l" : _d, props = filterAttrs.__rest(_a, ["children", "summary", "onClick", "id", "isOpen", "iconPosition", "size"]);
+    var surface = React.useContext(Surface.Context).surface;
+    var _e = React.useState(false), disclousreState = _e[0], setDisclosureState = _e[1];
+    var handleOnClick = function () {
+        onClick && onClick();
+        setDisclosureState(function (prevState) { return !prevState; });
+    };
+    return (React.createElement("details", filterAttrs.__assign({ "data-testid": "DisclosureMini", className: index.classNames("arc-DisclosureMini", {
+            "arc-DisclosureMini--onDarkSurface": surface === "dark",
+        }), open: isOpen }, filterAttrs.filterAttrs(props)),
+        React.createElement("summary", { "data-testid": "DisclosureMiniSummary", className: index.classNames("arc-DisclosureMini-summary arc-DisclosureMini-summary--icon-".concat(iconPosition), {
+                "arc-DisclosureMini-summary--small": size === "s",
+            }), onClick: handleOnClick, "aria-expanded": disclousreState },
+            React.createElement("div", { className: index.classNames("arc-DisclosureMini-summary-icon", {
+                    "arc-DisclosureMini-summary-icon--small": size === "s",
+                }) },
+                React.createElement(ThemeIcon.ThemeIcon, { icon: "disclosureMiniExpand" })),
+            React.createElement(Text.Text, { size: size === "l" ? "m" : "s" }, summary)),
+        React.createElement("div", { className: "arc-DisclosureMini-details" },
+            React.createElement(Text.Text, { size: size === "l" ? "m" : "s" },
+                React.createElement("span", { id: id }, children)))));
+};
+
+exports.DisclosureMini = DisclosureMini;

package/lib/_shared/cjs/Download-CrIytI74.cjs

@@ -0,0 +1,39 @@
+'use strict';
+
+var filterAttrs = require('./filter-attrs-eK6E_34o.cjs');
+var React = require('react');
+var index = require('./index-CTlXMLug.cjs');
+var Text = require('./Text-Cr5nmYmx.cjs');
+var ThemeIcon = require('./ThemeIcon-BoxbjTaQ.cjs');
+var VerticalSpace = require('./VerticalSpace-BJvST6WP.cjs');
+
+var Download = function (_a) {
+    var name = _a.name, onClick = _a.onClick, description = _a.description, href = _a.href, type = _a.type, size = _a.size, _b = _a.icon, icon = _b === void 0 ? "downloadFile" : _b, _c = _a.isCompact, isCompact = _c === void 0 ? false : _c, _d = _a.isFullWidth, isFullWidth = _d === void 0 ? true : _d;
+    var linkProps = href
+        ? {
+            href: href,
+            download: true,
+            target: "_blank",
+            rel: "noreferrer",
+        }
+        : {
+            role: "button",
+        };
+    return (React.createElement("a", filterAttrs.__assign({}, linkProps, { className: index.classNames("arc-Download", {
+            "arc-Download--maxContent": !isFullWidth,
+            "arc-Download--compact": isCompact,
+        }), "aria-label": name, onClick: onClick }),
+        React.createElement("div", { className: "arc-Download-iconContainer" },
+            React.createElement(ThemeIcon.ThemeIcon, { size: isCompact ? 40 : 64, icon: icon })),
+        React.createElement("div", { className: "arc-Download-contentContainer" },
+            React.createElement("span", { className: "arc-Download-name" }, name),
+            React.createElement(Text.Text, { tone: "muted", size: "xs" },
+                type,
+                "\u00A0",
+                size && "| ".concat(size)),
+            description && (React.createElement(React.Fragment, null,
+                React.createElement(VerticalSpace.VerticalSpace, { size: "4" }),
+                React.createElement(Text.Text, { tone: "supporting" }, description))))));
+};
+
+exports.Download = Download;

package/lib/_shared/cjs/Filter-qdfbndHd.cjs

@@ -0,0 +1,120 @@
+'use strict';
+
+var filterAttrs = require('./filter-attrs-eK6E_34o.cjs');
+var React = require('react');
+var index = require('./index-CTlXMLug.cjs');
+var Surface = require('./Surface-BFx1yNsq.cjs');
+var VisuallyHidden = require('./VisuallyHidden-B4XCvPYP.cjs');
+
+var FilterControl = function (_a) {
+    var children = _a.children, onClick = _a.onClick, _b = _a.isSelected, isSelected = _b === void 0 ? false : _b;
+    var surface = React.useContext(Surface.Context).surface;
+    var _c = React.useState(isSelected), selected = _c[0], setSelected = _c[1];
+    var onClickHandler = function () {
+        onClick && onClick();
+        setSelected(function (previousValue) { return !previousValue; });
+    };
+    return (React.createElement("button", { className: index.classNames("arc-FilterControl", {
+            "arc-FilterControl--onDarkSurface": surface === "dark",
+            "arc-FilterControl--selected": selected,
+        }), onClick: onClickHandler, tabIndex: 0, "aria-pressed": selected },
+        React.createElement("div", { className: "arc-FilterControl-text" },
+            React.createElement(VisuallyHidden.VisuallyHidden, null, "Filter by"),
+            " ",
+            children)));
+};
+
+var FilterControls = function (_a) {
+    var children = _a.children, controlsAlignment = _a.controlsAlignment;
+    return (React.createElement("div", { className: index.classNames("arc-FilterControls", {
+            "arc-FilterControls--alignLeft": controlsAlignment === "left",
+            "arc-FilterControls--alignRight": controlsAlignment === "right",
+        }) }, children));
+};
+
+var FilterItem = function (_a) {
+    var children = _a.children;
+    return React.createElement("div", { className: "arc-FilterItem" }, children);
+};
+
+var FilterItems = function (_a) {
+    var children = _a.children, error = _a.error, _b = _a.displayType, displayType = _b === void 0 ? "grid" : _b;
+    return React.Children.toArray(children).length > 0 ? (React.createElement("div", null,
+        React.createElement("div", { className: "arc-FilterItems-offscreen", "aria-live": "assertive" }, React.Children.toArray(children).length > 0
+            ? "".concat(React.Children.toArray(children).length, " records listed.")
+            : null),
+        React.createElement("div", { className: index.classNames("arc-FilterItems", {
+                "arc-FilterItems--list": displayType === "list",
+                "arc-FilterItems--grid": displayType === "grid",
+            }) }, displayType === "list"
+            ? React.Children.toArray(children).map(function (child, index, array) { return (React.createElement(React.Fragment, { key: index },
+                child,
+                index !== array.length - 1 && (React.createElement(React.Fragment, null,
+                    React.createElement("div", { className: "arc-FilterItems-separator", "data-testid": "arc-FilterItems-separator" }))))); })
+            : children))) : (React.createElement("div", { "aria-live": "assertive" }, error));
+};
+
+/** Use `Filter` to filter and categorise page content. */
+var Filter = function (_a) {
+    var children = _a.children, onChange = _a.onChange, displayType = _a.displayType, controlsAlignment = _a.controlsAlignment, _b = _a.logicType, logicType = _b === void 0 ? "OR" : _b, error = _a.error, props = filterAttrs.__rest(_a, ["children", "onChange", "displayType", "controlsAlignment", "logicType", "error"]);
+    var _c = React.useState([]), selectedControls = _c[0], setSelectedControls = _c[1];
+    var controls = React.Children.toArray(children).find(function (child) { return React.isValidElement(child) && child.type === FilterControls; });
+    var items = React.Children.toArray(children).find(function (child) { return React.isValidElement(child) && child.type === FilterItems; });
+    React.useEffect(function () {
+        var initialSelectedControls = [];
+        if (controls && React.isValidElement(controls)) {
+            React.Children.forEach(controls.props.children, function (child) {
+                if (child.props.isSelected) {
+                    initialSelectedControls.push(child.props.children);
+                }
+            });
+        }
+        setSelectedControls(initialSelectedControls);
+    }, []);
+    var handleControlClick = function (clickedControl) {
+        if (selectedControls.includes(clickedControl)) {
+            var updatedControls = selectedControls.filter(function (control) { return control !== clickedControl; });
+            setSelectedControls(updatedControls);
+            if (onChange) {
+                onChange(updatedControls);
+            }
+        }
+        else {
+            var updatedControls = filterAttrs.__spreadArray(filterAttrs.__spreadArray([], selectedControls, true), [clickedControl], false);
+            setSelectedControls(updatedControls);
+            if (onChange) {
+                onChange(updatedControls);
+            }
+        }
+    };
+    var filterItems = React.Children.toArray(items && React.isValidElement(items) && items.props.children);
+    var filteredItems = filterItems.filter(function (filteredItem) {
+        // If no tags are selected, show all items
+        if (selectedControls.length === 0) {
+            return true;
+        }
+        // If logicType is "AND", all selected tags should be present in the item's tags
+        if (logicType === "AND") {
+            return selectedControls.every(function (control) {
+                return filteredItem.props.tags.includes(control);
+            });
+        }
+        else {
+            // Check if item has tags property and if any selected tags are present in item's tags
+            return selectedControls.some(function (control) {
+                return filteredItem.props.tags.includes(control);
+            });
+        }
+    });
+    return (React.createElement("div", filterAttrs.__assign({ className: "arc-Filter" }, filterAttrs.filterAttrs(props)),
+        React.createElement(FilterControls, { controlsAlignment: controlsAlignment }, controls &&
+            React.isValidElement(controls) &&
+            React.Children.map(controls.props.children, function (control, index) { return (React.createElement(FilterControl, { key: index, onClick: function () { return handleControlClick(control.props.children); }, isSelected: control.props.isSelected }, control.props.children)); })),
+        React.createElement(FilterItems, { displayType: displayType, error: error }, filteredItems.map(function (item) { return item.props.children; }))));
+};
+Filter.Controls = FilterControls;
+Filter.Control = FilterControl;
+Filter.Items = FilterItems;
+Filter.Item = FilterItem;
+
+exports.Filter = Filter;

package/lib/_shared/cjs/FormControl-D3-JbAVb.cjs

@@ -0,0 +1,108 @@
+'use strict';
+
+var filterAttrs = require('./filter-attrs-eK6E_34o.cjs');
+var React = require('react');
+var index = require('./index-CTlXMLug.cjs');
+var Surface = require('./Surface-BFx1yNsq.cjs');
+var DisclosureMini = require('./DisclosureMini-CtvDxVaG.cjs');
+var VisuallyHidden = require('./VisuallyHidden-B4XCvPYP.cjs');
+var ThemeIcon = require('./ThemeIcon-BoxbjTaQ.cjs');
+
+/**
+ * Optionally define ariaDescribedBy if errorMessage or helper exist.
+ */
+var useAriaDescribedby = function (_a) {
+    var id = _a.id, _b = _a.idError, idError = _b === void 0 ? "".concat(id, "-error") : _b, _c = _a.idHelper, idHelper = _c === void 0 ? "".concat(id, "-helper") : _c, _d = _a.idDisclosure, idDisclosure = _d === void 0 ? "".concat(id, "-disclosure") : _d, errorMessage = _a.errorMessage, helper = _a.helper, disclosureText = _a.disclosureText;
+    if (!id) {
+        return {
+            ariaDescribedby: undefined,
+            idHelper: undefined,
+            idError: undefined,
+            idDisclosure: undefined,
+        };
+    }
+    var ariaDescribedbyArr = [];
+    if (errorMessage) {
+        ariaDescribedbyArr.push(idError);
+    }
+    if (helper) {
+        ariaDescribedbyArr.push(idHelper);
+    }
+    if (disclosureText) {
+        ariaDescribedbyArr.push(idDisclosure);
+    }
+    var ariaDescribedby = ariaDescribedbyArr.length > 0 ? ariaDescribedbyArr.join(" ") : undefined;
+    return { ariaDescribedby: ariaDescribedby, idError: idError, idHelper: idHelper, idDisclosure: idDisclosure };
+};
+
+var defaultContext = {
+    requirementStatus: null,
+};
+var Context = React.createContext(defaultContext);
+var Provider = Context.Provider;
+/**
+ * Use `FormControl` to provide inputs with labels, helper text and error messages
+ */
+var FormControl = function (_a) {
+    var children = _a.children, _b = _a.elementType, ElementType = _b === void 0 ? "div" : _b, errorMessage = _a.errorMessage, helper = _a.helper, htmlFor = _a.htmlFor, supplementaryInfo = _a.supplementaryInfo, id = _a.id, label = _a.label, _c = _a.labelSize, labelSize = _c === void 0 ? "l" : _c, _d = _a.labelPosition, labelPosition = _d === void 0 ? "top" : _d, _e = _a.requirementStatus, requirementStatus = _e === void 0 ? "optional" : _e, _f = _a.helperUnderLabel, helperUnderLabel = _f === void 0 ? false : _f, isDisabled = _a.isDisabled, _g = _a.hideLabel, hideLabel = _g === void 0 ? false : _g, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, onClickDisclosure = _a.onClickDisclosure, props = filterAttrs.__rest(_a, ["children", "elementType", "errorMessage", "helper", "htmlFor", "supplementaryInfo", "id", "label", "labelSize", "labelPosition", "requirementStatus", "helperUnderLabel", "isDisabled", "hideLabel", "disclosureTitle", "disclosureText", "onClickDisclosure"]);
+    var surface = React.useContext(Surface.Context).surface;
+    var _h = useAriaDescribedby({
+        disclosureText: disclosureText,
+        errorMessage: errorMessage,
+        helper: helper,
+        id: htmlFor || id, // `htmlFor` is preference to keep this deterministic with TextInput
+    }), ariaDescribedby = _h.ariaDescribedby, idError = _h.idError, idHelper = _h.idHelper, idDisclosure = _h.idDisclosure;
+    var LabelType = ElementType === "div" ? "label" : "legend";
+    var elementProps = {};
+    var labelProps = {};
+    if (LabelType === "label") {
+        labelProps["htmlFor"] = htmlFor;
+        if (htmlFor) {
+            labelProps["id"] = "".concat(htmlFor, "-label");
+        }
+        else if (id) {
+            labelProps["id"] = "".concat(id, "-label");
+        }
+    }
+    else {
+        elementProps["aria-describedby"] = ariaDescribedby;
+    }
+    var hasInfo = helperUnderLabel
+        ? Boolean(errorMessage || disclosureTitle || supplementaryInfo)
+        : Boolean(errorMessage || disclosureTitle || helper || supplementaryInfo);
+    return (React.createElement(Provider, { value: { requirementStatus: requirementStatus } },
+        React.createElement(ElementType, filterAttrs.__assign({ className: index.classNames({
+                "arc-FormControl": true,
+                "arc-FormControl--isDisabled": isDisabled,
+                "arc-FormControl--smallLabel": labelSize === "s",
+                "arc-FormControl--onDarkSurface": surface === "dark",
+                "arc-FormControl--sideLabel": labelPosition === "left",
+            }), id: id }, elementProps, filterAttrs.filterAttrs(props)),
+            hideLabel === true ? (React.createElement(VisuallyHidden.VisuallyHidden, null,
+                React.createElement(LabelType, filterAttrs.__assign({ className: index.classNames("arc-FormControl-label", {
+                        "arc-FormControl-label--withHelperUnderLabel": helperUnderLabel && helper,
+                    }) }, labelProps),
+                    label,
+                    requirementStatus === "optional" && (React.createElement("span", { className: "arc-FormControl-labelOptional" }, "(optional)"))))) : (React.createElement(LabelType, filterAttrs.__assign({ className: index.classNames("arc-FormControl-label", {
+                    "arc-FormControl-label--withHelperUnderLabel": helperUnderLabel && helper,
+                }) }, labelProps),
+                label,
+                requirementStatus === "optional" && (React.createElement("span", { className: "arc-FormControl-labelOptional" }, "(optional)")))),
+            helperUnderLabel && helper && (React.createElement("div", { className: "arc-FormControl-helper arc-FormControl-helper--underLabel", id: idHelper }, helper)),
+            children,
+            React.createElement("div", { className: index.classNames("arc-FormControl-info", {
+                    "arc-FormControl-info--hasContent": hasInfo,
+                }) },
+                ((helper && !helperUnderLabel) ||
+                    errorMessage ||
+                    disclosureTitle) && (React.createElement("div", { className: "arc-FormControl-helperContainer" }, errorMessage ? (React.createElement("div", { className: "arc-FormControl-error", id: idError },
+                    React.createElement("span", { className: "arc-FormControl-error--icon" },
+                        React.createElement(ThemeIcon.ThemeIcon, { icon: "formControlAlert" })),
+                    errorMessage)) : (!helperUnderLabel &&
+                    (disclosureTitle ? (React.createElement(DisclosureMini.DisclosureMini, { onClick: onClickDisclosure, summary: disclosureTitle, size: labelSize, id: idDisclosure }, disclosureText)) : (helper && (React.createElement("div", { className: "arc-FormControl-helper", id: idHelper }, helper))))))),
+                supplementaryInfo && (React.createElement("div", { className: "arc-FormControl-supplementaryInfo" }, supplementaryInfo))))));
+};
+
+exports.Context = Context;
+exports.FormControl = FormControl;
+exports.useAriaDescribedby = useAriaDescribedby;