@kaizen/components 1.37.1 → 1.38.0

package/dist/esm/MultiSelect/MultiSelect.mjs

@@ -0,0 +1,111 @@
+import { __rest, __assign } from 'tslib';
+import React, { useId, useRef } from 'react';
+import classnames from 'classnames';
+import { FieldMessage } from '../FieldMessage/FieldMessage.mjs';
+import { Heading } from '../Heading/Heading.mjs';
+import { MultiSelectOptions } from './subcomponents/MultiSelectOptions/MultiSelectOptions.mjs';
+import { MultiSelectToggle } from './subcomponents/MultiSelectToggle/MultiSelectToggle.mjs';
+import { Popover } from './subcomponents/Popover/Popover.mjs';
+import { useFloating } from '@floating-ui/react-dom';
+import styles from './MultiSelect.module.scss.mjs';
+const MultiSelect = /*#__PURE__*/function () {
+  const MultiSelect = function (_a) {
+    var propsId = _a.id,
+      label = _a.label,
+      items = _a.items,
+      selectedValues = _a.selectedValues,
+      description = _a.description,
+      onSelectedValuesChange = _a.onSelectedValuesChange,
+      isOpen = _a.isOpen,
+      onOpenChange = _a.onOpenChange,
+      classNameOverride = _a.classNameOverride,
+      validationMessage = _a.validationMessage,
+      restProps = __rest(_a, ["id", "label", "items", "selectedValues", "description", "onSelectedValuesChange", "isOpen", "onOpenChange", "classNameOverride", "validationMessage"]);
+    var id = propsId !== null && propsId !== void 0 ? propsId : useId();
+    var descriptionId = "".concat(id, "-description");
+    var validationId = "".concat(id, "-validation-message");
+    var toggleButtonRef = useRef(null);
+    var refs = useFloating().refs;
+    var handleToggleClick = function () {
+      return onOpenChange(!isOpen);
+    };
+    var handleClose = function () {
+      return onOpenChange(false);
+    };
+    var onClickOutside = function (e) {
+      var toggle = refs.reference.current;
+      var isInToggle = toggle.contains(e.target);
+      if (!isInToggle) {
+        e.stopPropagation();
+        handleClose();
+      }
+    };
+    var itemsMap = items.reduce(function (acc, item) {
+      acc[item.value] = item;
+      return acc;
+    }, {});
+    var handleOnRemoveOption = function (optionValue) {
+      var newValues = new Set(selectedValues.values());
+      newValues.delete(optionValue);
+      onSelectedValuesChange(newValues);
+    };
+    var handleRemoveAllOptions = function () {
+      var newValues = new Set([]);
+      onSelectedValuesChange(newValues);
+    };
+    return /*#__PURE__*/React.createElement("div", __assign({
+      id: id,
+      className: classnames(classNameOverride)
+    }, restProps), /*#__PURE__*/React.createElement(Heading, {
+      tag: "span",
+      variant: "heading-6",
+      id: "".concat(id, "--label")
+    }, label), /*#__PURE__*/React.createElement("div", {
+      ref: refs.setReference,
+      className: styles.toggleContainer
+    }, /*#__PURE__*/React.createElement(MultiSelectToggle, {
+      ref: toggleButtonRef,
+      id: "".concat(id, "--toggle"),
+      "aria-labelledby": "".concat(id, "--label"),
+      "aria-describedby": "".concat(validationId, " ").concat(descriptionId),
+      "aria-controls": "".concat(id, "--popover"),
+      onClick: handleToggleClick,
+      isOpen: isOpen,
+      selectedOptions: Array.from(selectedValues).map(function (value) {
+        return itemsMap[value];
+      }),
+      status: validationMessage === null || validationMessage === void 0 ? void 0 : validationMessage.status,
+      onRemoveOption: handleOnRemoveOption,
+      onRemoveAllOptions: handleRemoveAllOptions
+    })), validationMessage && ( /*#__PURE__*/React.createElement(FieldMessage, __assign({
+      id: validationId
+    }, validationMessage))), description && /*#__PURE__*/React.createElement(FieldMessage, {
+      id: descriptionId,
+      message: description
+    }), isOpen && ( /*#__PURE__*/React.createElement(Popover, {
+      refs: refs,
+      id: "".concat(id, "--popover"),
+      focusOnProps: {
+        enabled: true,
+        onClickOutside: onClickOutside,
+        onEscapeKey: handleClose,
+        shards: [toggleButtonRef],
+        noIsolation: true,
+        onActivation: function () {
+          var _a, _b;
+          return (_b = (_a = refs.floating) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+      },
+      classNameOverride: styles.popover
+    }, /*#__PURE__*/React.createElement(MultiSelectOptions, {
+      id: "".concat(id, "--options"),
+      options: items,
+      onChange: onSelectedValuesChange,
+      selectedValues: selectedValues
+    }))));
+  };
+  MultiSelect.displayName = "MultiSelect";
+  return MultiSelect;
+}();
+export { MultiSelect };
+//# sourceMappingURL=MultiSelect.mjs.map

package/dist/esm/MultiSelect/MultiSelect.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelect.mjs","sources":["../../../src/MultiSelect/MultiSelect.tsx"],"sourcesContent":["import React, { HTMLAttributes, useRef, useId } from \"react\"\nimport classnames from \"classnames\"\nimport { ReactFocusOnProps } from \"react-focus-on/dist/es5/types\"\nimport { FieldMessage, FieldMessageProps } from \"~components/FieldMessage\"\nimport { Heading } from \"~components/Heading\"\nimport { OverrideClassName } from \"~types/OverrideClassName\"\nimport {\n  MultiSelectOptions,\n  MultiSelectOptionsProps,\n} from \"./subcomponents/MultiSelectOptions\"\nimport { MultiSelectToggle } from \"./subcomponents/MultiSelectToggle\"\nimport { Popover, useFloating } from \"./subcomponents/Popover\"\nimport { MultiSelectOption, ValidationMessage } from \"./types\"\nimport styles from \"./MultiSelect.module.scss\"\n\nexport type MultiSelectProps = {\n  label: string\n  items: MultiSelectOptionsProps[\"options\"]\n  selectedValues: Set<MultiSelectOption[\"value\"]>\n  /**\n   * A description that provides context for the field\n   */\n  description?: FieldMessageProps[\"message\"]\n  onSelectedValuesChange: MultiSelectOptionsProps[\"onChange\"]\n  isOpen: boolean\n  onOpenChange: (isOpen: boolean) => void\n  /** A status and message to provide context to the validation issue  */\n  validationMessage?: ValidationMessage\n} & OverrideClassName<HTMLAttributes<HTMLDivElement>>\n\nexport const MultiSelect = ({\n  id: propsId,\n  label,\n  items,\n  selectedValues,\n  description,\n  onSelectedValuesChange,\n  isOpen,\n  onOpenChange,\n  classNameOverride,\n  validationMessage,\n  ...restProps\n}: MultiSelectProps): JSX.Element => {\n  const id = propsId ?? useId()\n  const descriptionId = `${id}-description`\n  const validationId = `${id}-validation-message`\n\n  const toggleButtonRef = useRef<HTMLButtonElement>(null)\n  const { refs } = useFloating()\n\n  const handleToggleClick = (): void => onOpenChange(!isOpen)\n  const handleClose = (): void => onOpenChange(false)\n\n  const onClickOutside: ReactFocusOnProps[\"onClickOutside\"] = e => {\n    const toggle = refs.reference.current as Node\n    const isInToggle = toggle.contains(e.target as HTMLElement)\n    if (!isInToggle) {\n      e.stopPropagation()\n      handleClose()\n    }\n  }\n\n  const itemsMap = items.reduce(\n    (acc, item) => {\n      acc[item.value] = item\n      return acc\n    },\n    {} as Record<MultiSelectOption[\"value\"], MultiSelectOption>\n  )\n\n  const handleOnRemoveOption = (\n    optionValue: MultiSelectOption[\"value\"]\n  ): void => {\n    const newValues = new Set(selectedValues.values())\n    newValues.delete(optionValue)\n    onSelectedValuesChange(newValues)\n  }\n\n  const handleRemoveAllOptions = (): void => {\n    const newValues = new Set([])\n    onSelectedValuesChange(newValues)\n  }\n\n  return (\n    <div id={id} className={classnames(classNameOverride)} {...restProps}>\n      <Heading tag=\"span\" variant=\"heading-6\" id={`${id}--label`}>\n        {label}\n      </Heading>\n\n      <div ref={refs.setReference} className={styles.toggleContainer}>\n        <MultiSelectToggle\n          ref={toggleButtonRef}\n          id={`${id}--toggle`}\n          aria-labelledby={`${id}--label`}\n          aria-describedby={`${validationId} ${descriptionId}`}\n          aria-controls={`${id}--popover`}\n          onClick={handleToggleClick}\n          isOpen={isOpen}\n          selectedOptions={Array.from(selectedValues).map(\n            value => itemsMap[value]\n          )}\n          status={validationMessage?.status}\n          onRemoveOption={handleOnRemoveOption}\n          onRemoveAllOptions={handleRemoveAllOptions}\n        />\n      </div>\n\n      {validationMessage && (\n        <FieldMessage id={validationId} {...validationMessage} />\n      )}\n      {description && <FieldMessage id={descriptionId} message={description} />}\n\n      {isOpen && (\n        <Popover\n          refs={refs}\n          id={`${id}--popover`}\n          focusOnProps={{\n            enabled: true,\n            onClickOutside,\n            onEscapeKey: handleClose,\n            shards: [toggleButtonRef],\n            noIsolation: true,\n            onActivation: (): void => refs.floating?.current?.focus(),\n          }}\n          classNameOverride={styles.popover}\n        >\n          <MultiSelectOptions\n            id={`${id}--options`}\n            options={items}\n            onChange={onSelectedValuesChange}\n            selectedValues={selectedValues}\n          />\n        </Popover>\n      )}\n    </div>\n  )\n}\n\nMultiSelect.displayName = \"MultiSelect\"\n"],"names":["MultiSelect","_a","propsId","id","label","items","selectedValues","description","onSelectedValuesChange","isOpen","onOpenChange","classNameOverride","validationMessage","restProps","__rest","useId","descriptionId","concat","validationId","toggleButtonRef","useRef","refs","useFloating","handleToggleClick","handleClose","onClickOutside","e","toggle","reference","current","isInToggle","contains","target","stopPropagation","itemsMap","reduce","acc","item","value","handleOnRemoveOption","optionValue","newValues","Set","values","delete","handleRemoveAllOptions","React","createElement","__assign","className","classnames","Heading","tag","variant","ref","setReference","styles","toggleContainer","MultiSelectToggle","onClick","selectedOptions","Array","from","map","status","onRemoveOption","onRemoveAllOptions","FieldMessage","message","Popover","focusOnProps","enabled","onEscapeKey","shards","noIsolation","onActivation","_b","floating","focus","popover","MultiSelectOptions","options","onChange","displayName"],"mappings":"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"}

package/dist/esm/MultiSelect/MultiSelect.module.scss.mjs

@@ -0,0 +1,6 @@
+var styles = {
+  "toggleContainer": "MultiSelect-module_toggleContainer__AxNnf",
+  "popover": "MultiSelect-module_popover__jI13O"
+};
+export { styles as default };
+//# sourceMappingURL=MultiSelect.module.scss.mjs.map

package/dist/esm/MultiSelect/MultiSelect.module.scss.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelect.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/esm/MultiSelect/subcomponents/Checkbox/Checkbox.mjs

@@ -0,0 +1,58 @@
+import { __rest, __assign } from 'tslib';
+import React, { useRef, useEffect } from 'react';
+import classnames from 'classnames';
+import '../../../Icon/subcomponents/SVG/SVG.mjs';
+import { CheckIcon } from '../../../Icon/CheckIcon.mjs';
+import { MinusIcon } from '../../../Icon/MinusIcon.mjs';
+import styles from './Checkbox.module.scss.mjs';
+var renderIcon = function (status) {
+  switch (status) {
+    case "indeterminate":
+      return /*#__PURE__*/React.createElement(MinusIcon, {
+        role: "presentation",
+        classNameOverride: styles.icon
+      });
+    case "checked":
+      return /*#__PURE__*/React.createElement(CheckIcon, {
+        role: "presentation",
+        classNameOverride: styles.icon
+      });
+    default:
+      return null;
+  }
+};
+const Checkbox = /*#__PURE__*/function () {
+  const Checkbox = function (_a) {
+    var checkedStatus = _a.checkedStatus,
+      classNameOverride = _a.classNameOverride,
+      restProps = __rest(_a, ["checkedStatus", "classNameOverride"]);
+    var checkboxRef = useRef(null);
+    useEffect(function () {
+      if (checkboxRef.current) {
+        if (checkedStatus === "checked") {
+          checkboxRef.current.checked = true;
+          checkboxRef.current.indeterminate = false;
+        } else if (checkedStatus === "unchecked") {
+          checkboxRef.current.checked = false;
+          checkboxRef.current.indeterminate = false;
+        } else if (checkedStatus === "indeterminate") {
+          checkboxRef.current.checked = false;
+          checkboxRef.current.indeterminate = true;
+        }
+      }
+    }, [checkedStatus]);
+    return /*#__PURE__*/React.createElement("span", {
+      className: classnames(styles.checkbox, checkedStatus !== "unchecked" && styles.selected, classNameOverride)
+    }, /*#__PURE__*/React.createElement("input", __assign({
+      ref: checkboxRef,
+      type: "checkbox",
+      className: styles.nativeCheckbox
+    }, restProps)), /*#__PURE__*/React.createElement("span", {
+      className: styles.iconContainer
+    }, renderIcon(checkedStatus)));
+  };
+  Checkbox.displayName = "Checkbox";
+  return Checkbox;
+}();
+export { Checkbox };
+//# sourceMappingURL=Checkbox.mjs.map

package/dist/esm/MultiSelect/subcomponents/Checkbox/Checkbox.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.mjs","sources":["../../../../../src/MultiSelect/subcomponents/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useEffect, useRef, InputHTMLAttributes } from \"react\"\nimport classnames from \"classnames\"\nimport { CheckIcon, MinusIcon } from \"~components/Icon\"\nimport { OverrideClassName } from \"~types/OverrideClassName\"\nimport styles from \"./Checkbox.module.scss\"\n\nexport type CheckedStatus = \"checked\" | \"unchecked\" | \"indeterminate\"\n\ntype ReadOnly = {\n  readOnly: true\n  onChange?: never\n}\n\ntype Controlled = {\n  readOnly?: false\n  onChange: Required<InputHTMLAttributes<HTMLInputElement>[\"onChange\"]>\n}\n\nexport type CheckboxProps = {\n  checkedStatus: CheckedStatus\n} & (ReadOnly | Controlled) &\n  OverrideClassName<\n    // `checked` is omitted as it conflicts with controlled checkboxes\n    Omit<InputHTMLAttributes<HTMLInputElement>, \"type\" | \"checked\">\n  >\n\nconst renderIcon = (status: CheckedStatus): JSX.Element | null => {\n  switch (status) {\n    case \"indeterminate\":\n      return <MinusIcon role=\"presentation\" classNameOverride={styles.icon} />\n    case \"checked\":\n      return <CheckIcon role=\"presentation\" classNameOverride={styles.icon} />\n    default:\n      return null\n  }\n}\n\nexport const Checkbox = ({\n  checkedStatus,\n  classNameOverride,\n  ...restProps\n}: CheckboxProps): JSX.Element => {\n  const checkboxRef = useRef<HTMLInputElement>(null)\n\n  useEffect(() => {\n    if (checkboxRef.current) {\n      if (checkedStatus === \"checked\") {\n        checkboxRef.current.checked = true\n        checkboxRef.current.indeterminate = false\n      } else if (checkedStatus === \"unchecked\") {\n        checkboxRef.current.checked = false\n        checkboxRef.current.indeterminate = false\n      } else if (checkedStatus === \"indeterminate\") {\n        checkboxRef.current.checked = false\n        checkboxRef.current.indeterminate = true\n      }\n    }\n  }, [checkedStatus])\n\n  return (\n    <span\n      className={classnames(\n        styles.checkbox,\n        checkedStatus !== \"unchecked\" && styles.selected,\n        classNameOverride\n      )}\n    >\n      <input\n        ref={checkboxRef}\n        type=\"checkbox\"\n        className={styles.nativeCheckbox}\n        {...restProps}\n      />\n      <span className={styles.iconContainer}>{renderIcon(checkedStatus)}</span>\n    </span>\n  )\n}\n\nCheckbox.displayName = \"Checkbox\"\n"],"names":["renderIcon","status","React","createElement","MinusIcon","role","classNameOverride","styles","icon","CheckIcon","Checkbox","_a","checkedStatus","restProps","__rest","checkboxRef","useRef","useEffect","current","checked","indeterminate","className","classnames","checkbox","selected","__assign","ref","type","nativeCheckbox","iconContainer","displayName"],"mappings":";;;;;;;AA0BA,IAAMA,UAAU,GAAG,SAAAA,CAACC,MAAqB,EAAA;EACvC,QAAQA,MAAM;IACZ,KAAK,eAAe;MAClB,oBAAOC,KAAC,CAAAC,aAAA,CAAAC,SAAS,EAAC;QAAAC,IAAI,EAAC,cAAc;QAACC,iBAAiB,EAAEC,MAAM,CAACC;MAAI,EAAI;IAC1E,KAAK,SAAS;MACZ,oBAAON,KAAC,CAAAC,aAAA,CAAAM,SAAS,EAAC;QAAAJ,IAAI,EAAC,cAAc;QAACC,iBAAiB,EAAEC,MAAM,CAACC;MAAI,EAAI;IAC1E;MACE,OAAO,IAAI;EACd;AACH,CAAC;AAAA,MAEYE,QAAQ;EAAA,MAARA,QAAQ,GAAG,SAAAA,CAACC,EAIT,EAAA;IAHd,IAAAC,aAAa,mBAAA;MACbN,iBAAiB,uBAAA;MACdO,SAAS,GAHWC,MAAA,CAAAH,EAAA,EAAA,CAAA,eAAA,EAAA,mBAAA,CAIxB,CADa;IAEZ,IAAMI,WAAW,GAAGC,MAAM,CAAmB,IAAI,CAAC;IAElDC,SAAS,CAAC,YAAA;MACR,IAAIF,WAAW,CAACG,OAAO,EAAE;QACvB,IAAIN,aAAa,KAAK,SAAS,EAAE;UAC/BG,WAAW,CAACG,OAAO,CAACC,OAAO,GAAG,IAAI;UAClCJ,WAAW,CAACG,OAAO,CAACE,aAAa,GAAG,KAAK;QAC1C,CAAA,MAAM,IAAIR,aAAa,KAAK,WAAW,EAAE;UACxCG,WAAW,CAACG,OAAO,CAACC,OAAO,GAAG,KAAK;UACnCJ,WAAW,CAACG,OAAO,CAACE,aAAa,GAAG,KAAK;QAC1C,CAAA,MAAM,IAAIR,aAAa,KAAK,eAAe,EAAE;UAC5CG,WAAW,CAACG,OAAO,CAACC,OAAO,GAAG,KAAK;UACnCJ,WAAW,CAACG,OAAO,CAACE,aAAa,GAAG,IAAI;QACzC;MACF;IACH,CAAC,EAAE,CAACR,aAAa,CAAC,CAAC;IAEnB,oBACEV,KACE,CAAAC,aAAA,CAAA,MAAA,EAAA;MAAAkB,SAAS,EAAEC,UAAU,CACnBf,MAAM,CAACgB,QAAQ,EACfX,aAAa,KAAK,WAAW,IAAIL,MAAM,CAACiB,QAAQ,EAChDlB,iBAAiB;IAClB,CAAA,eAEDJ,KAAA,CAAAC,aAAA,CAAA,OAAA,EAAAsB,QAAA,CAAA;MACEC,GAAG,EAAEX,WAAW;MAChBY,IAAI,EAAC,UAAU;MACfN,SAAS,EAAEd,MAAM,CAACqB;IAAc,CAAA,EAC5Bf,SAAS,CACb,CAAA,eACFX,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;MAAMkB,SAAS,EAAEd,MAAM,CAACsB;IAAa,CAAA,EAAG7B,UAAU,CAACY,aAAa,CAAC,CAAQ,CACpE;EAEX,CAAC;EAEDF,QAAQ,CAACoB,WAAW,GAAG,UAAU;EAAA,OAzCpBpB,QAAQ;AAAA;"}

package/dist/esm/MultiSelect/subcomponents/Checkbox/Checkbox.module.scss.mjs

@@ -0,0 +1,9 @@
+var styles = {
+  "checkbox": "Checkbox-module_checkbox__0LHj5",
+  "selected": "Checkbox-module_selected__-Nd6E",
+  "nativeCheckbox": "Checkbox-module_nativeCheckbox__BauKG",
+  "iconContainer": "Checkbox-module_iconContainer__Nsip6",
+  "icon": "Checkbox-module_icon__2b48e"
+};
+export { styles as default };
+//# sourceMappingURL=Checkbox.module.scss.mjs.map

package/dist/esm/MultiSelect/subcomponents/Checkbox/Checkbox.module.scss.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist/esm/MultiSelect/subcomponents/MultiSelectOptionField/MultiSelectOptionField.mjs

@@ -0,0 +1,31 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import classnames from 'classnames';
+import { Checkbox } from '../Checkbox/Checkbox.mjs';
+import styles from './MultiSelectOptionField.module.scss.mjs';
+const MultiSelectOptionField = /*#__PURE__*/function () {
+  const MultiSelectOptionField = function (_a) {
+    var id = _a.id,
+      option = _a.option,
+      checkedStatus = _a.checkedStatus,
+      onChange = _a.onChange,
+      classNameOverride = _a.classNameOverride,
+      restProps = __rest(_a, ["id", "option", "checkedStatus", "onChange", "classNameOverride"]);
+    return /*#__PURE__*/React.createElement("div", __assign({
+      className: classnames(styles.multiSelectOptionField, classNameOverride)
+    }, restProps), /*#__PURE__*/React.createElement(Checkbox, {
+      id: id,
+      checkedStatus: checkedStatus,
+      onChange: onChange,
+      value: option.value,
+      classNameOverride: classnames(styles.checkbox, [checkedStatus !== "unchecked" && styles.checked])
+    }), /*#__PURE__*/React.createElement("label", {
+      htmlFor: id,
+      className: styles.label
+    }, option.label));
+  };
+  MultiSelectOptionField.displayName = "MultiSelect.OptionField";
+  return MultiSelectOptionField;
+}();
+export { MultiSelectOptionField };
+//# sourceMappingURL=MultiSelectOptionField.mjs.map

package/dist/esm/MultiSelect/subcomponents/MultiSelectOptionField/MultiSelectOptionField.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelectOptionField.mjs","sources":["../../../../../src/MultiSelect/subcomponents/MultiSelectOptionField/MultiSelectOptionField.tsx"],"sourcesContent":["import React, { HTMLAttributes } from \"react\"\nimport classnames from \"classnames\"\nimport { OverrideClassName } from \"~types/OverrideClassName\"\nimport { MultiSelectOption } from \"../../types\"\nimport { Checkbox, CheckboxProps } from \"../Checkbox\"\nimport styles from \"./MultiSelectOptionField.module.scss\"\n\nexport type MultiSelectOptionFieldProps = {\n  id: string\n  option: MultiSelectOption\n  checkedStatus: CheckboxProps[\"checkedStatus\"]\n  onChange: CheckboxProps[\"onChange\"]\n} & OverrideClassName<Omit<HTMLAttributes<HTMLDivElement>, \"id\" | \"onChange\">>\n\nexport const MultiSelectOptionField = ({\n  id,\n  option,\n  checkedStatus,\n  onChange,\n  classNameOverride,\n  ...restProps\n}: MultiSelectOptionFieldProps): JSX.Element => (\n  <div\n    className={classnames(styles.multiSelectOptionField, classNameOverride)}\n    {...restProps}\n  >\n    <Checkbox\n      id={id}\n      checkedStatus={checkedStatus}\n      onChange={onChange}\n      value={option.value}\n      classNameOverride={classnames(styles.checkbox, [\n        checkedStatus !== \"unchecked\" && styles.checked,\n      ])}\n    />\n    <label htmlFor={id} className={styles.label}>\n      {option.label}\n    </label>\n  </div>\n)\n\nMultiSelectOptionField.displayName = \"MultiSelect.OptionField\"\n"],"names":["MultiSelectOptionField","_a","id","option","checkedStatus","onChange","classNameOverride","restProps","__rest","React","createElement","__assign","className","classnames","styles","multiSelectOptionField","Checkbox","value","checkbox","checked","htmlFor","label","displayName"],"mappings":";;;;;MAcaA,sBAAsB;EAAA,MAAtBA,sBAAsB,GAAG,SAAAA,CAACC,EAOT,EAAA;IAN5B,IAAAC,EAAE,GAAAD,EAAA,CAAAC,EAAA;MACFC,MAAM,GAAAF,EAAA,CAAAE,MAAA;MACNC,aAAa,GAAAH,EAAA,CAAAG,aAAA;MACbC,QAAQ,GAAAJ,EAAA,CAAAI,QAAA;MACRC,iBAAiB,GAAAL,EAAA,CAAAK,iBAAA;MACdC,SAAS,GAAAC,MAAA,CAAAP,EAAA,EANyB,kEAOtC,CADa;IACkC,oBAC9CQ,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAAC,QAAA,CAAA;MACEC,SAAS,EAAEC,UAAU,CAACC,MAAM,CAACC,sBAAsB,EAAET,iBAAiB;IAAC,GACnEC,SAAS,CAAA,eAEbE,KAAC,CAAAC,aAAA,CAAAM,QAAQ,EACP;MAAAd,EAAE,EAAEA,EAAE;MACNE,aAAa,EAAEA,aAAa;MAC5BC,QAAQ,EAAEA,QAAQ;MAClBY,KAAK,EAAEd,MAAM,CAACc,KAAK;MACnBX,iBAAiB,EAAEO,UAAU,CAACC,MAAM,CAACI,QAAQ,EAAE,CAC7Cd,aAAa,KAAK,WAAW,IAAIU,MAAM,CAACK,OAAO,CAChD;KACD,CAAA,eACFV,KAAA,CAAAC,aAAA,CAAA,OAAA,EAAA;MAAOU,OAAO,EAAElB,EAAE;MAAEU,SAAS,EAAEE,MAAM,CAACO;IAAK,CAAA,EACxClB,MAAM,CAACkB,KAAK,CACP,CACJ;GACP;EAEDrB,sBAAsB,CAACsB,WAAW,GAAG,yBAAyB;EAAA,OA3BjDtB,sBAAsB;AAAA;"}

package/dist/esm/MultiSelect/subcomponents/MultiSelectOptionField/MultiSelectOptionField.module.scss.mjs

@@ -0,0 +1,8 @@
+var styles = {
+  "multiSelectOptionField": "MultiSelectOptionField-module_multiSelectOptionField__-PNh-",
+  "checkbox": "MultiSelectOptionField-module_checkbox__rDOxI",
+  "checked": "MultiSelectOptionField-module_checked__wo-TX",
+  "label": "MultiSelectOptionField-module_label__79KfB"
+};
+export { styles as default };
+//# sourceMappingURL=MultiSelectOptionField.module.scss.mjs.map

package/dist/esm/MultiSelect/subcomponents/MultiSelectOptionField/MultiSelectOptionField.module.scss.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelectOptionField.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/esm/MultiSelect/subcomponents/MultiSelectOptions/MultiSelectOptions.mjs

@@ -0,0 +1,52 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import classnames from 'classnames';
+import { Text } from '../../../Text/Text.mjs';
+import { VisuallyHidden } from '../../../VisuallyHidden/VisuallyHidden.mjs';
+import { MultiSelectOptionField } from '../MultiSelectOptionField/MultiSelectOptionField.mjs';
+import styles from './MultiSelectOptions.module.scss.mjs';
+const MultiSelectOptions = /*#__PURE__*/function () {
+  const MultiSelectOptions = function (_a) {
+    var id = _a.id,
+      options = _a.options,
+      selectedValues = _a.selectedValues,
+      onChange = _a.onChange,
+      classNameOverride = _a.classNameOverride,
+      restProps = __rest(_a, ["id", "options", "selectedValues", "onChange", "classNameOverride"]);
+    var optionsCountId = "".concat(id, "--options-count");
+    var handleOptionChange = function (optionValue) {
+      var newValues = new Set(selectedValues.values());
+      if (newValues.has(optionValue)) {
+        newValues.delete(optionValue);
+      } else {
+        newValues.add(optionValue);
+      }
+      onChange(newValues);
+    };
+    return /*#__PURE__*/React.createElement("fieldset", __assign({
+      id: id,
+      "aria-describedby": optionsCountId,
+      className: classnames(styles.multiSelectOptions, classNameOverride)
+    }, restProps), /*#__PURE__*/React.createElement(VisuallyHidden, {
+      id: optionsCountId,
+      "aria-live": "polite"
+    }, "Options available: ", options.length), options.length === 0 ? ( /*#__PURE__*/React.createElement(Text, {
+      tag: "span",
+      variant: "body"
+    }, "No options available")) : options.map(function (option) {
+      return /*#__PURE__*/React.createElement(MultiSelectOptionField, {
+        key: option.value,
+        id: "".concat(id, "--").concat(option.value),
+        onChange: function () {
+          return handleOptionChange(option.value);
+        },
+        checkedStatus: selectedValues.has(option.value) ? "checked" : "unchecked",
+        option: option
+      });
+    }));
+  };
+  MultiSelectOptions.displayName = "MultiSelectOptions";
+  return MultiSelectOptions;
+}();
+export { MultiSelectOptions };
+//# sourceMappingURL=MultiSelectOptions.mjs.map

package/dist/esm/MultiSelect/subcomponents/MultiSelectOptions/MultiSelectOptions.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelectOptions.mjs","sources":["../../../../../src/MultiSelect/subcomponents/MultiSelectOptions/MultiSelectOptions.tsx"],"sourcesContent":["import React, { HTMLAttributes } from \"react\"\nimport classnames from \"classnames\"\nimport { Text } from \"~components/Text\"\nimport { VisuallyHidden } from \"~components/VisuallyHidden\"\nimport { OverrideClassName } from \"~types/OverrideClassName\"\nimport { MultiSelectOption } from \"../../types\"\nimport { MultiSelectOptionField } from \"../MultiSelectOptionField\"\nimport styles from \"./MultiSelectOptions.module.scss\"\n\nexport type MultiSelectOptionsProps = {\n  id: string\n  options: MultiSelectOption[]\n  selectedValues: Set<MultiSelectOption[\"value\"]>\n  onChange: (selectedValues: Set<MultiSelectOption[\"value\"]>) => void\n} & OverrideClassName<Omit<HTMLAttributes<HTMLFieldSetElement>, \"onChange\">>\n\nexport const MultiSelectOptions = ({\n  id,\n  options,\n  selectedValues,\n  onChange,\n  classNameOverride,\n  ...restProps\n}: MultiSelectOptionsProps): JSX.Element => {\n  const optionsCountId = `${id}--options-count`\n\n  const handleOptionChange = (\n    optionValue: MultiSelectOption[\"value\"]\n  ): void => {\n    const newValues = new Set(selectedValues.values())\n    if (newValues.has(optionValue)) {\n      newValues.delete(optionValue)\n    } else {\n      newValues.add(optionValue)\n    }\n    onChange(newValues)\n  }\n\n  return (\n    <fieldset\n      id={id}\n      aria-describedby={optionsCountId}\n      className={classnames(styles.multiSelectOptions, classNameOverride)}\n      {...restProps}\n    >\n      <VisuallyHidden id={optionsCountId} aria-live=\"polite\">\n        Options available: {options.length}\n      </VisuallyHidden>\n      {options.length === 0 ? (\n        <Text tag=\"span\" variant=\"body\">\n          No options available\n        </Text>\n      ) : (\n        options.map(option => (\n          <MultiSelectOptionField\n            key={option.value}\n            id={`${id}--${option.value}`}\n            onChange={() => handleOptionChange(option.value)}\n            checkedStatus={\n              selectedValues.has(option.value) ? \"checked\" : \"unchecked\"\n            }\n            option={option}\n          />\n        ))\n      )}\n    </fieldset>\n  )\n}\n\nMultiSelectOptions.displayName = \"MultiSelectOptions\"\n"],"names":["MultiSelectOptions","_a","id","options","selectedValues","onChange","classNameOverride","restProps","__rest","optionsCountId","concat","handleOptionChange","optionValue","newValues","Set","values","has","delete","add","React","createElement","__assign","className","classnames","styles","multiSelectOptions","VisuallyHidden","length","Text","tag","variant","map","option","MultiSelectOptionField","key","value","checkedStatus","displayName"],"mappings":";;;;;;;MAgBaA,kBAAkB;EAAA,MAAlBA,kBAAkB,GAAG,SAAAA,CAACC,EAOT,EAAA;IANxB,IAAAC,EAAE,GAAAD,EAAA,CAAAC,EAAA;MACFC,OAAO,GAAAF,EAAA,CAAAE,OAAA;MACPC,cAAc,GAAAH,EAAA,CAAAG,cAAA;MACdC,QAAQ,GAAAJ,EAAA,CAAAI,QAAA;MACRC,iBAAiB,GAAAL,EAAA,CAAAK,iBAAA;MACdC,SAAS,GAAAC,MAAA,CAAAP,EAAA,EANqB,oEAOlC,CADa;IAEZ,IAAMQ,cAAc,GAAG,EAAG,CAAAC,MAAA,CAAAR,EAAE,oBAAiB;IAE7C,IAAMS,kBAAkB,GAAG,SAAAA,CACzBC,WAAuC,EAAA;MAEvC,IAAMC,SAAS,GAAG,IAAIC,GAAG,CAACV,cAAc,CAACW,MAAM,CAAE,CAAA,CAAC;MAClD,IAAIF,SAAS,CAACG,GAAG,CAACJ,WAAW,CAAC,EAAE;QAC9BC,SAAS,CAACI,MAAM,CAACL,WAAW,CAAC;MAC9B,CAAA,MAAM;QACLC,SAAS,CAACK,GAAG,CAACN,WAAW,CAAC;MAC3B;MACDP,QAAQ,CAACQ,SAAS,CAAC;IACrB,CAAC;IAED,oBACEM,KACE,CAAAC,aAAA,CAAA,UAAA,EAAAC,QAAA,CAAA;MAAAnB,EAAE,EAAEA,EAAE;MAAA,kBAAA,EACYO,cAAc;MAChCa,SAAS,EAAEC,UAAU,CAACC,MAAM,CAACC,kBAAkB,EAAEnB,iBAAiB;OAC9DC,SAAS,CAAA,eAEbY,KAAA,CAAAC,aAAA,CAACM,cAAc,EAAC;MAAAxB,EAAE,EAAEO,cAAc;mBAAY;IAAQ,CAAA,yBAChCN,OAAO,CAACwB,MAAM,CACnB,EAChBxB,OAAO,CAACwB,MAAM,KAAK,CAAC,kBACnBR,KAAC,CAAAC,aAAA,CAAAQ,IAAI;MAACC,GAAG,EAAC,MAAM;MAACC,OAAO,EAAC;IAAM,CAAA,EAAA,sBAAA,CAExB,IAEP3B,OAAO,CAAC4B,GAAG,CAAC,UAAAC,MAAM,EAAA;MAAI,oBACpBb,KAAA,CAAAC,aAAA,CAACa,sBAAsB,EACrB;QAAAC,GAAG,EAAEF,MAAM,CAACG,KAAK;QACjBjC,EAAE,EAAE,EAAA,CAAAQ,MAAA,CAAGR,EAAE,EAAA,IAAA,CAAA,CAAAQ,MAAA,CAAKsB,MAAM,CAACG,KAAK,CAAE;QAC5B9B,QAAQ,EAAE,SAAAA,CAAA,EAAM;UAAA,OAAAM,kBAAkB,CAACqB,MAAM,CAACG,KAAK,CAAC;QAAA,CAAA;QAChDC,aAAa,EACXhC,cAAc,CAACY,GAAG,CAACgB,MAAM,CAACG,KAAK,CAAC,GAAG,SAAS,GAAG,WAAW;QAE5DH,MAAM,EAAEA;QACR;IACH,CAAA,CACF,CACQ;EAEf,CAAC;EAEDhC,kBAAkB,CAACqC,WAAW,GAAG,oBAAoB;EAAA,OArDxCrC,kBAAkB;AAAA;"}

package/dist/esm/MultiSelect/subcomponents/MultiSelectOptions/MultiSelectOptions.module.scss.mjs

@@ -0,0 +1,5 @@
+var styles = {
+  "multiSelectOptions": "MultiSelectOptions-module_multiSelectOptions__b8hYg"
+};
+export { styles as default };
+//# sourceMappingURL=MultiSelectOptions.module.scss.mjs.map

package/dist/esm/MultiSelect/subcomponents/MultiSelectOptions/MultiSelectOptions.module.scss.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelectOptions.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/esm/MultiSelect/subcomponents/MultiSelectToggle/MultiSelectToggle.mjs

@@ -0,0 +1,87 @@
+import { __rest, __assign } from 'tslib';
+import React, { forwardRef, useId } from 'react';
+import classnames from 'classnames';
+import { ClearButton } from '../../../ClearButton/ClearButton.mjs';
+import '../../../Icon/subcomponents/SVG/SVG.mjs';
+import { ChevronDownIcon } from '../../../Icon/ChevronDownIcon.mjs';
+import { ChevronUpIcon } from '../../../Icon/ChevronUpIcon.mjs';
+import { RemovableTag } from '../../../__future__/Tag/RemovableTag/RemovableTag.mjs';
+import '../../../__future__/Tag/Tag/Tag.mjs';
+import styles from './MultiSelectToggle.module.scss.mjs';
+const MultiSelectToggle = /*#__PURE__*/function () {
+  const MultiSelectToggle = /*#__PURE__*/forwardRef(function (_a, ref) {
+    var onClick = _a.onClick,
+      ariaLabelledBy = _a["aria-labelledby"],
+      ariaDescribedBy = _a["aria-describedby"],
+      ariaControls = _a["aria-controls"],
+      _b = _a.isOpen,
+      isOpen = _b === void 0 ? false : _b,
+      classNameOverride = _a.classNameOverride,
+      selectedOptions = _a.selectedOptions,
+      onRemoveOption = _a.onRemoveOption,
+      onRemoveAllOptions = _a.onRemoveAllOptions,
+      status = _a.status,
+      restProps = __rest(_a, ["onClick", "aria-labelledby", "aria-describedby", "aria-controls", "isOpen", "classNameOverride", "selectedOptions", "onRemoveOption", "onRemoveAllOptions", "status"]);
+    var clearAllId = useId();
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", __assign({
+      className: classnames(styles.multiSelectToggle, classNameOverride, status && styles[status]),
+      onClick: onClick
+    }, restProps), /*#__PURE__*/React.createElement("button", {
+      ref: ref,
+      className: styles.toggleButton,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-describedby": ariaDescribedBy,
+      "aria-controls": ariaControls,
+      "aria-expanded": isOpen,
+      "aria-haspopup": "dialog",
+      type: "button",
+      onClick: function (e) {
+        e.stopPropagation();
+        onClick(e);
+      }
+    }, isOpen ? ( /*#__PURE__*/React.createElement(ChevronUpIcon, {
+      role: "presentation"
+    })) : ( /*#__PURE__*/React.createElement(ChevronDownIcon, {
+      role: "presentation"
+    }))), /*#__PURE__*/React.createElement("div", {
+      className: classnames(styles.selectedItemsContainer, selectedOptions.length && styles.hasSelectedItems)
+    }, selectedOptions.length > 0 && ( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("ul", {
+      role: "list",
+      className: styles.selectedItems
+    }, selectedOptions.map(function (_a) {
+      var label = _a.label,
+        value = _a.value;
+      return (
+        /*#__PURE__*/
+        // This stops the underlying toggle collapsing the popover when interactive with Tags
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events
+        React.createElement("li", {
+          key: value,
+          onClick: function (e) {
+            return e.stopPropagation();
+          }
+        }, /*#__PURE__*/React.createElement(RemovableTag, {
+          removeButtonProps: {
+            ariaLabel: "Remove option: ".concat(label),
+            onClick: function () {
+              return onRemoveOption(value);
+            }
+          }
+        }, label))
+      );
+    })), /*#__PURE__*/React.createElement(ClearButton, {
+      id: clearAllId,
+      "aria-label": "Remove all options from ",
+      "aria-labelledby": "".concat(clearAllId, " ").concat(ariaLabelledBy),
+      classNameOverride: styles.clearAllButton,
+      onClick: function (e) {
+        e.stopPropagation();
+        onRemoveAllOptions();
+      }
+    }))))));
+  });
+  MultiSelectToggle.displayName = "MultiSelectToggle";
+  return MultiSelectToggle;
+}();
+export { MultiSelectToggle };
+//# sourceMappingURL=MultiSelectToggle.mjs.map

package/dist/esm/MultiSelect/subcomponents/MultiSelectToggle/MultiSelectToggle.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelectToggle.mjs","sources":["../../../../../src/MultiSelect/subcomponents/MultiSelectToggle/MultiSelectToggle.tsx"],"sourcesContent":["import React, { HTMLAttributes, forwardRef, useId } from \"react\"\nimport classnames from \"classnames\"\nimport { ClearButton } from \"~components/ClearButton\"\nimport { FieldMessageProps } from \"~components/FieldMessage\"\nimport { ChevronDownIcon, ChevronUpIcon } from \"~components/Icon\"\nimport { RemovableTag } from \"~components/__future__/Tag\"\nimport { OverrideClassName } from \"~types/OverrideClassName\"\nimport { MultiSelectOption } from \"../../types\"\nimport styles from \"./MultiSelectToggle.module.scss\"\n\nexport type MultiSelectToggleProps = {\n  onClick: React.MouseEventHandler\n  [\"aria-labelledby\"]: string\n  [\"aria-controls\"]: string\n  selectedOptions: MultiSelectOption[]\n  isOpen?: boolean\n  status?: FieldMessageProps[\"status\"]\n  onRemoveOption: (optionValue: MultiSelectOption[\"value\"]) => void\n  onRemoveAllOptions: () => void\n} & OverrideClassName<HTMLAttributes<HTMLDivElement>>\n\nexport const MultiSelectToggle = forwardRef<\n  HTMLButtonElement,\n  MultiSelectToggleProps\n>(\n  (\n    {\n      onClick,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-describedby\": ariaDescribedBy,\n      \"aria-controls\": ariaControls,\n      isOpen = false,\n      classNameOverride,\n      selectedOptions,\n      onRemoveOption,\n      onRemoveAllOptions,\n      status,\n      ...restProps\n    },\n    ref\n  ): JSX.Element => {\n    const clearAllId = useId()\n    return (\n      <>\n        {/*\n         * The inner <button> is the actual semantic element, and the onClick here\n         * is just a quality-of-life implementation for mouse users.\n         */}\n        {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}\n        <div\n          className={classnames(\n            styles.multiSelectToggle,\n            classNameOverride,\n            status && styles[status]\n          )}\n          onClick={onClick}\n          {...restProps}\n        >\n          <button\n            ref={ref}\n            className={styles.toggleButton}\n            aria-labelledby={ariaLabelledBy}\n            aria-describedby={ariaDescribedBy}\n            aria-controls={ariaControls}\n            aria-expanded={isOpen}\n            aria-haspopup=\"dialog\"\n            type=\"button\"\n            onClick={e => {\n              e.stopPropagation()\n              onClick(e)\n            }}\n          >\n            {isOpen ? (\n              <ChevronUpIcon role=\"presentation\" />\n            ) : (\n              <ChevronDownIcon role=\"presentation\" />\n            )}\n          </button>\n\n          <div\n            className={classnames(\n              styles.selectedItemsContainer,\n              selectedOptions.length && styles.hasSelectedItems\n            )}\n          >\n            {selectedOptions.length > 0 && (\n              <>\n                {/* list-style: none removes role=\"list\" in Safari */}\n                {/* eslint-disable-next-line jsx-a11y/no-redundant-roles */}\n                <ul role=\"list\" className={styles.selectedItems}>\n                  {selectedOptions.map(({ label, value }) => (\n                    // This stops the underlying toggle collapsing the popover when interactive with Tags\n                    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events\n                    <li key={value} onClick={e => e.stopPropagation()}>\n                      <RemovableTag\n                        removeButtonProps={{\n                          ariaLabel: `Remove option: ${label}`,\n                          onClick: () => onRemoveOption(value),\n                        }}\n                      >\n                        {label}\n                      </RemovableTag>\n                    </li>\n                  ))}\n                </ul>\n\n                <ClearButton\n                  id={clearAllId}\n                  aria-label=\"Remove all options from \"\n                  aria-labelledby={`${clearAllId} ${ariaLabelledBy}`}\n                  classNameOverride={styles.clearAllButton}\n                  onClick={e => {\n                    e.stopPropagation()\n                    onRemoveAllOptions()\n                  }}\n                />\n              </>\n            )}\n          </div>\n        </div>\n      </>\n    )\n  }\n)\n\nMultiSelectToggle.displayName = \"MultiSelectToggle\"\n"],"names":["MultiSelectToggle","forwardRef","_a","ref","onClick","ariaLabelledBy","ariaDescribedBy","ariaControls","_b","isOpen","classNameOverride","selectedOptions","onRemoveOption","onRemoveAllOptions","status","restProps","__rest","clearAllId","useId","React","createElement","Fragment","__assign","className","classnames","styles","multiSelectToggle","toggleButton","type","e","stopPropagation","ChevronUpIcon","role","ChevronDownIcon","selectedItemsContainer","length","hasSelectedItems","selectedItems","map","label","value","key","RemovableTag","removeButtonProps","ariaLabel","concat","ClearButton","id","clearAllButton","displayName"],"mappings":"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"}

package/dist/esm/MultiSelect/subcomponents/MultiSelectToggle/MultiSelectToggle.module.scss.mjs

@@ -0,0 +1,12 @@
+var styles = {
+  "multiSelectToggle": "MultiSelectToggle-module_multiSelectToggle__CeR4G",
+  "error": "MultiSelectToggle-module_error__LJZKT",
+  "caution": "MultiSelectToggle-module_caution__hFOzy",
+  "toggleButton": "MultiSelectToggle-module_toggleButton__38-Qi",
+  "selectedItemsContainer": "MultiSelectToggle-module_selectedItemsContainer__OawF7",
+  "hasSelectedItems": "MultiSelectToggle-module_hasSelectedItems__S7KXg",
+  "selectedItems": "MultiSelectToggle-module_selectedItems__R-byj",
+  "clearAllButton": "MultiSelectToggle-module_clearAllButton__yWNQi"
+};
+export { styles as default };
+//# sourceMappingURL=MultiSelectToggle.module.scss.mjs.map

package/dist/esm/MultiSelect/subcomponents/MultiSelectToggle/MultiSelectToggle.module.scss.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelectToggle.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}

package/dist/esm/MultiSelect/subcomponents/Popover/Popover.mjs

@@ -35,13 +35,15 @@ const Popover = /*#__PURE__*/function () {
       whileElementsMounted: autoUpdate
     }, floatingOptions)).floatingStyles;
     return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(FocusOn, __assign({
+      enabled: false,
       scrollLock: false
     }, focusOnProps), /*#__PURE__*/React.createElement("div", __assign({
       ref: refs.setFloating,
       style: floatingStyles,
       className: classnames(styles.popover, classNameOverride),
       role: "dialog",
-      "aria-modal": "true"
+      "aria-modal": "true",
+      tabIndex: -1
     }, restProps), children)), portalContainer !== null && portalContainer !== void 0 ? portalContainer : document.body);
   };
   Popover.displayName = "Popover";

package/dist/esm/MultiSelect/subcomponents/Popover/Popover.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.mjs","sources":["../../../../../src/MultiSelect/subcomponents/Popover/Popover.tsx"],"sourcesContent":["import React, { HTMLAttributes } from \"react\"\nimport { createPortal } from \"react-dom\"\nimport {\n  autoUpdate,\n  flip,\n  offset,\n  ReferenceType,\n  useFloating,\n  UseFloatingReturn,\n  UseFloatingOptions,\n  size,\n} from \"@floating-ui/react-dom\"\nimport classnames from \"classnames\"\nimport { FocusOn } from \"react-focus-on\"\nimport { ReactFocusOnProps } from \"react-focus-on/dist/es5/types\"\nimport { OverrideClassName } from \"~types/OverrideClassName\"\nimport styles from \"./Popover.module.scss\"\n\nexport type PopoverProps<RT extends ReferenceType = ReferenceType> = {\n  children: React.ReactNode\n  refs: UseFloatingReturn<RT>[\"refs\"]\n  /**\n   * passes in additional options / override for https://floating-ui.com/docs/tooltip#usefloating-hook\n   */\n  floatingOptions?: Omit<UseFloatingOptions, \"elements\">\n  focusOnProps?: Omit<ReactFocusOnProps, \"children\">\n  portalContainer?: Element | DocumentFragment\n} & OverrideClassName<HTMLAttributes<HTMLDivElement>>\n\nexport const Popover = <RT extends ReferenceType>({\n  children,\n  refs,\n  floatingOptions,\n  focusOnProps,\n  portalContainer,\n  classNameOverride,\n  ...restProps\n}: PopoverProps<RT>): JSX.Element => {\n  const { floatingStyles } = useFloating({\n    elements: {\n      reference: refs.reference.current,\n      floating: refs.floating.current,\n    },\n    placement: \"bottom-start\",\n    middleware: [\n      offset(6),\n      flip(),\n      size({\n        apply({ availableWidth, availableHeight, elements }) {\n          Object.assign(elements.floating.style, {\n            maxWidth: `${Math.min(availableWidth, 400)}px`,\n            minWidth: `${Math.min(availableWidth, 196)}px`,\n            maxHeight: `${Math.min(availableHeight, 352)}px`,\n          })\n        },\n      }),\n    ],\n    whileElementsMounted: autoUpdate,\n    ...floatingOptions,\n  })\n\n  return createPortal(\n    <FocusOn scrollLock={false} {...focusOnProps}>\n      <div\n        ref={refs.setFloating}\n        style={floatingStyles}\n        className={classnames(styles.popover, classNameOverride)}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        {...restProps}\n      >\n        {children}\n      </div>\n    </FocusOn>,\n    portalContainer ?? document.body\n  )\n}\n\nPopover.displayName = \"Popover\"\n"],"names":["Popover","_a","children","refs","floatingOptions","focusOnProps","portalContainer","classNameOverride","restProps","__rest","floatingStyles","useFloating","__assign","elements","reference","current","floating","placement","middleware","offset","flip","size","apply","availableWidth","availableHeight","Object","assign","style","maxWidth","concat","Math","min","minWidth","maxHeight","whileElementsMounted","autoUpdate","createPortal","React","createElement","FocusOn","scrollLock","ref","setFloating","className","classnames","styles","popover","role","document","body","displayName"],"mappings":";;;;;;;MA6BaA,OAAO;EAAA,MAAPA,OAAO,GAAG,SAAAA,CAA2BC,EAQ/B,EAAA;IAPjB,IAAAC,QAAQ,cAAA;MACRC,IAAI,UAAA;MACJC,eAAe,qBAAA;MACfC,YAAY,kBAAA;MACZC,eAAe,qBAAA;MACfC,iBAAiB,uBAAA;MACdC,SAAS,GAPoCC,MAAA,CAAAR,EAAA,EAAA,CAAA,UAAA,EAAA,MAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,iBAAA,EAAA,mBAAA,CAQjD,CADa;IAEJ,IAAAS,cAAc,GAAKC,WAAW,CAAAC,QAAA,CAAA;MACpCC,QAAQ,EAAE;QACRC,SAAS,EAAEX,IAAI,CAACW,SAAS,CAACC,OAAO;QACjCC,QAAQ,EAAEb,IAAI,CAACa,QAAQ,CAACD;MACzB,CAAA;MACDE,SAAS,EAAE,cAAc;MACzBC,UAAU,EAAE,CACVC,MAAM,CAAC,CAAC,CAAC,EACTC,IAAI,CAAE,CAAA,EACNC,IAAI,CAAC;QACHC,KAAK,YAACrB,EAA6C,EAAA;UAA3C,IAAAsB,cAAc,oBAAA;YAAEC,eAAe,GAAAvB,EAAA,CAAAuB,eAAA;YAAEX,QAAQ,GAAAZ,EAAA,CAAAY,QAAA;UAC/CY,MAAM,CAACC,MAAM,CAACb,QAAQ,CAACG,QAAQ,CAACW,KAAK,EAAE;YACrCC,QAAQ,EAAE,EAAG,CAAAC,MAAA,CAAAC,IAAI,CAACC,GAAG,CAACR,cAAc,EAAE,GAAG,CAAC,EAAI,IAAA,CAAA;YAC9CS,QAAQ,EAAE,EAAG,CAAAH,MAAA,CAAAC,IAAI,CAACC,GAAG,CAACR,cAAc,EAAE,GAAG,CAAC,EAAI,IAAA,CAAA;YAC9CU,SAAS,EAAE,EAAG,CAAAJ,MAAA,CAAAC,IAAI,CAACC,GAAG,CAACP,eAAe,EAAE,GAAG,CAAC,EAAI,IAAA;UACjD,CAAA,CAAC;QACH;OACF,CAAC,CACH;MACDU,oBAAoB,EAAEC;IAAU,GAC7B/B,eAAe,CAAA,CAClB,eArBoB;IAuBtB,oBAAOgC,YAAY,eACjBC,KAAC,CAAAC,aAAA,CAAAC,OAAO;MAACC,UAAU,EAAE;IAAK,CAAA,EAAMnC,YAAY,CAAA,eAC1CgC,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA1B,QAAA,CAAA;MACE6B,GAAG,EAAEtC,IAAI,CAACuC,WAAW;MACrBf,KAAK,EAAEjB,cAAc;MACrBiC,SAAS,EAAEC,UAAU,CAACC,MAAM,CAACC,OAAO,EAAEvC,iBAAiB,CAAC;MACxDwC,IAAI,EAAC,QAAQ;oBACF;IAAM,CAAA,EACbvC,SAAS,CAEZ,EAAAN,QAAQ,CACL,CACE,EACVI,eAAe,KAAf,IAAA,IAAAA,eAAe,cAAfA,eAAe,GAAI0C,QAAQ,CAACC,IAAI,CACjC;EACH,CAAC;EAEDjD,OAAO,CAACkD,WAAW,GAAG,SAAS;EAAA,OAjDlBlD,OAAO;AAAA;"}
+{"version":3,"file":"Popover.mjs","sources":["../../../../../src/MultiSelect/subcomponents/Popover/Popover.tsx"],"sourcesContent":["import React, { HTMLAttributes } from \"react\"\nimport { createPortal } from \"react-dom\"\nimport {\n  autoUpdate,\n  flip,\n  offset,\n  ReferenceType,\n  useFloating,\n  UseFloatingReturn,\n  UseFloatingOptions,\n  size,\n} from \"@floating-ui/react-dom\"\nimport classnames from \"classnames\"\nimport { FocusOn } from \"react-focus-on\"\nimport { ReactFocusOnProps } from \"react-focus-on/dist/es5/types\"\nimport { OverrideClassName } from \"~types/OverrideClassName\"\nimport styles from \"./Popover.module.scss\"\n\nexport type PopoverProps<RT extends ReferenceType = ReferenceType> = {\n  children: React.ReactNode\n  refs: UseFloatingReturn<RT>[\"refs\"]\n  /**\n   * passes in additional options / override for https://floating-ui.com/docs/tooltip#usefloating-hook\n   */\n  floatingOptions?: Omit<UseFloatingOptions, \"elements\">\n  focusOnProps?: Omit<ReactFocusOnProps, \"children\">\n  portalContainer?: Element | DocumentFragment\n} & OverrideClassName<HTMLAttributes<HTMLDivElement>>\n\nexport const Popover = <RT extends ReferenceType>({\n  children,\n  refs,\n  floatingOptions,\n  focusOnProps,\n  portalContainer,\n  classNameOverride,\n  ...restProps\n}: PopoverProps<RT>): JSX.Element => {\n  const { floatingStyles } = useFloating({\n    elements: {\n      reference: refs.reference.current,\n      floating: refs.floating.current,\n    },\n    placement: \"bottom-start\",\n    middleware: [\n      offset(6),\n      flip(),\n      size({\n        apply({ availableWidth, availableHeight, elements }) {\n          Object.assign(elements.floating.style, {\n            maxWidth: `${Math.min(availableWidth, 400)}px`,\n            minWidth: `${Math.min(availableWidth, 196)}px`,\n            maxHeight: `${Math.min(availableHeight, 352)}px`,\n          })\n        },\n      }),\n    ],\n    whileElementsMounted: autoUpdate,\n    ...floatingOptions,\n  })\n\n  return createPortal(\n    <FocusOn enabled={false} scrollLock={false} {...focusOnProps}>\n      <div\n        ref={refs.setFloating}\n        style={floatingStyles}\n        className={classnames(styles.popover, classNameOverride)}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        tabIndex={-1}\n        {...restProps}\n      >\n        {children}\n      </div>\n    </FocusOn>,\n    portalContainer ?? document.body\n  )\n}\n\nPopover.displayName = \"Popover\"\n"],"names":["Popover","_a","children","refs","floatingOptions","focusOnProps","portalContainer","classNameOverride","restProps","__rest","floatingStyles","useFloating","__assign","elements","reference","current","floating","placement","middleware","offset","flip","size","apply","availableWidth","availableHeight","Object","assign","style","maxWidth","concat","Math","min","minWidth","maxHeight","whileElementsMounted","autoUpdate","createPortal","React","createElement","FocusOn","enabled","scrollLock","ref","setFloating","className","classnames","styles","popover","role","tabIndex","document","body","displayName"],"mappings":";;;;;;;MA6BaA,OAAO;EAAA,MAAPA,OAAO,GAAG,SAAAA,CAA2BC,EAQ/B,EAAA;IAPjB,IAAAC,QAAQ,cAAA;MACRC,IAAI,UAAA;MACJC,eAAe,qBAAA;MACfC,YAAY,kBAAA;MACZC,eAAe,qBAAA;MACfC,iBAAiB,uBAAA;MACdC,SAAS,GAPoCC,MAAA,CAAAR,EAAA,EAAA,CAAA,UAAA,EAAA,MAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,iBAAA,EAAA,mBAAA,CAQjD,CADa;IAEJ,IAAAS,cAAc,GAAKC,WAAW,CAAAC,QAAA,CAAA;MACpCC,QAAQ,EAAE;QACRC,SAAS,EAAEX,IAAI,CAACW,SAAS,CAACC,OAAO;QACjCC,QAAQ,EAAEb,IAAI,CAACa,QAAQ,CAACD;MACzB,CAAA;MACDE,SAAS,EAAE,cAAc;MACzBC,UAAU,EAAE,CACVC,MAAM,CAAC,CAAC,CAAC,EACTC,IAAI,CAAE,CAAA,EACNC,IAAI,CAAC;QACHC,KAAK,YAACrB,EAA6C,EAAA;UAA3C,IAAAsB,cAAc,oBAAA;YAAEC,eAAe,GAAAvB,EAAA,CAAAuB,eAAA;YAAEX,QAAQ,GAAAZ,EAAA,CAAAY,QAAA;UAC/CY,MAAM,CAACC,MAAM,CAACb,QAAQ,CAACG,QAAQ,CAACW,KAAK,EAAE;YACrCC,QAAQ,EAAE,EAAG,CAAAC,MAAA,CAAAC,IAAI,CAACC,GAAG,CAACR,cAAc,EAAE,GAAG,CAAC,EAAI,IAAA,CAAA;YAC9CS,QAAQ,EAAE,EAAG,CAAAH,MAAA,CAAAC,IAAI,CAACC,GAAG,CAACR,cAAc,EAAE,GAAG,CAAC,EAAI,IAAA,CAAA;YAC9CU,SAAS,EAAE,EAAG,CAAAJ,MAAA,CAAAC,IAAI,CAACC,GAAG,CAACP,eAAe,EAAE,GAAG,CAAC,EAAI,IAAA;UACjD,CAAA,CAAC;QACH;OACF,CAAC,CACH;MACDU,oBAAoB,EAAEC;IAAU,GAC7B/B,eAAe,CAAA,CAClB,eArBoB;IAuBtB,oBAAOgC,YAAY,eACjBC,KAAC,CAAAC,aAAA,CAAAC,OAAO,EAAC3B,QAAA,CAAA;MAAA4B,OAAO,EAAE,KAAK;MAAEC,UAAU,EAAE;IAAK,GAAMpC,YAAY,CAAA,eAC1DgC,KACE,CAAAC,aAAA,CAAA,KAAA,EAAA1B,QAAA,CAAA;MAAA8B,GAAG,EAAEvC,IAAI,CAACwC,WAAW;MACrBhB,KAAK,EAAEjB,cAAc;MACrBkC,SAAS,EAAEC,UAAU,CAACC,MAAM,CAACC,OAAO,EAAExC,iBAAiB,CAAC;MACxDyC,IAAI,EAAC,QAAQ;oBACF,MAAM;MACjBC,QAAQ,EAAE,CAAC;IAAC,CACR,EAAAzC,SAAS,CAEZ,EAAAN,QAAQ,CACL,CACE,EACVI,eAAe,KAAA,IAAA,IAAfA,eAAe,KAAf,KAAA,CAAA,GAAAA,eAAe,GAAI4C,QAAQ,CAACC,IAAI,CACjC;EACH,CAAC;EAEDnD,OAAO,CAACoD,WAAW,GAAG,SAAS;EAAA,OAlDlBpD,OAAO;AAAA;"}

package/dist/esm/Notification/subcomponents/GenericNotification/GenericNotification.mjs

@@ -62,10 +62,10 @@ const GenericNotification = /*#__PURE__*/function () {
       type: type
     })), /*#__PURE__*/React.createElement("div", {
       className: classnames(styles.textContainer, forceMultiline && styles.forceMultiline)
-    }, style !== "global" && /*#__PURE__*/React.createElement(NotificationHeading, {
+    }, style !== "global" && ( /*#__PURE__*/React.createElement(NotificationHeading, {
       titleProp: title,
       headingProps: headingProps
-    }), children && /*#__PURE__*/React.createElement("div", {
+    })), children && /*#__PURE__*/React.createElement("div", {
       className: styles.text
     }, children)), !persistent && /*#__PURE__*/React.createElement(CancelButton, {
       onClick: function () {

package/dist/esm/Notification/subcomponents/GenericNotification/GenericNotification.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"GenericNotification.mjs","sources":["../../../../../src/Notification/subcomponents/GenericNotification/GenericNotification.tsx"],"sourcesContent":["import React, { HTMLAttributes, useEffect, useRef, useState } from \"react\"\nimport classnames from \"classnames\"\nimport { HeadingProps } from \"~components/Heading\"\nimport { NotificationType } from \"~components/Notification/types\"\nimport { OverrideClassName } from \"~types/OverrideClassName\"\nimport { CancelButton } from \"../CancelButton\"\nimport { NotificationHeading } from \"../NotificationHeading\"\nimport { NotificationIcon } from \"../NotificationIcon\"\nimport styles from \"./GenericNotification.module.scss\"\n\nexport type GenericNotificationProps = {\n  type: NotificationType\n  style: \"global\" | \"inline\" | \"toast\"\n  children?: React.ReactNode\n  title?: string\n  persistent?: boolean\n  onHide?: () => void\n  noBottomMargin?: boolean\n  forceMultiline?: boolean\n  headingProps?: HeadingProps\n} & OverrideClassName<HTMLAttributes<HTMLDivElement>>\n\nexport const GenericNotification = ({\n  type,\n  style,\n  children,\n  title,\n  persistent = false,\n  onHide,\n  noBottomMargin,\n  forceMultiline,\n  headingProps,\n  classNameOverride,\n  ...restProps\n}: GenericNotificationProps): JSX.Element | null => {\n  const [isHidden, setIsHidden] = useState<boolean>(true)\n  const [isRemoved, setIsRemoved] = useState<boolean>(false)\n\n  const containerRef = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    requestAnimationFrame(() => {\n      if (containerRef.current) {\n        setIsHidden(false)\n      }\n    })\n  }, [])\n\n  const getMarginTop = (): string => {\n    if (isHidden && containerRef.current) {\n      return -containerRef.current.clientHeight + \"px\"\n    }\n    return \"0\"\n  }\n\n  const onTransitionEnd = (e: React.TransitionEvent<HTMLDivElement>): void => {\n    // Be careful: this assumes the final CSS property to be animated is \"margin-top\".\n    if (isHidden && e.propertyName === \"margin-top\") {\n      setIsRemoved(true)\n      onHide?.()\n    }\n  }\n\n  if (isRemoved) {\n    return null\n  }\n\n  return (\n    <div\n      ref={containerRef}\n      className={classnames(\n        styles.notification,\n        styles[type],\n        styles[style],\n        isHidden && styles.hidden,\n        noBottomMargin && styles.noBottomMargin,\n        classNameOverride,\n        persistent && styles.persistent\n      )}\n      style={{ marginTop: getMarginTop() }}\n      onTransitionEnd={onTransitionEnd}\n      {...restProps}\n    >\n      <div className={styles.icon}>\n        <NotificationIcon type={type} />\n      </div>\n      <div\n        className={classnames(\n          styles.textContainer,\n          forceMultiline && styles.forceMultiline\n        )}\n      >\n        {style !== \"global\" && (\n          <NotificationHeading titleProp={title} headingProps={headingProps} />\n        )}\n        {children && <div className={styles.text}>{children}</div>}\n      </div>\n      {!persistent && <CancelButton onClick={() => setIsHidden(true)} />}\n    </div>\n  )\n}\n\nGenericNotification.displayName = \"GenericNotification\"\n"],"names":["GenericNotification","_a","type","style","children","title","_b","persistent","onHide","noBottomMargin","forceMultiline","headingProps","classNameOverride","restProps","__rest","_c","useState","isHidden","setIsHidden","_d","isRemoved","setIsRemoved","containerRef","useRef","useEffect","requestAnimationFrame","current","getMarginTop","clientHeight","onTransitionEnd","e","propertyName","React","createElement","__assign","ref","className","classnames","styles","notification","hidden","marginTop","icon","NotificationIcon","textContainer","NotificationHeading","titleProp","text","CancelButton","onClick","displayName"],"mappings":";;;;;;;MAsBaA,mBAAmB;EAAA,MAAnBA,mBAAmB,GAAG,SAAAA,CAACC,EAYT,EAAA;IAXzB,IAAAC,IAAI,GAAAD,EAAA,CAAAC,IAAA;MACJC,KAAK,GAAAF,EAAA,CAAAE,KAAA;MACLC,QAAQ,GAAAH,EAAA,CAAAG,QAAA;MACRC,KAAK,WAAA;MACLC,EAAA,GAAAL,EAAA,CAAAM,UAAkB;MAAlBA,UAAU,mBAAG,KAAK,GAAAD,EAAA;MAClBE,MAAM,YAAA;MACNC,cAAc,GAAAR,EAAA,CAAAQ,cAAA;MACdC,cAAc,GAAAT,EAAA,CAAAS,cAAA;MACdC,YAAY,GAAAV,EAAA,CAAAU,YAAA;MACZC,iBAAiB,GAAAX,EAAA,CAAAW,iBAAA;MACdC,SAAS,GAAAC,MAAA,CAAAb,EAAA,EAXsB,uIAYnC,CADa;IAEN,IAAAc,EAAA,GAA0BC,QAAQ,CAAU,IAAI,CAAC;MAAhDC,QAAQ,GAAAF,EAAA,CAAA,CAAA,CAAA;MAAEG,WAAW,GAAAH,EAAA,CAAA,CAAA,CAA2B;IACjD,IAAAI,EAAA,GAA4BH,QAAQ,CAAU,KAAK,CAAC;MAAnDI,SAAS,GAAAD,EAAA,CAAA,CAAA,CAAA;MAAEE,YAAY,GAAAF,EAAA,CAAA,CAAA,CAA4B;IAE1D,IAAMG,YAAY,GAAGC,MAAM,CAAiB,IAAI,CAAC;IAEjDC,SAAS,CAAC,YAAA;MACRC,qBAAqB,CAAC,YAAA;QACpB,IAAIH,YAAY,CAACI,OAAO,EAAE;UACxBR,WAAW,CAAC,KAAK,CAAC;QACnB;MACH,CAAC,CAAC;IACH,CAAA,EAAE,EAAE,CAAC;IAEN,IAAMS,YAAY,GAAG,SAAAA,CAAA,EAAA;MACnB,IAAIV,QAAQ,IAAIK,YAAY,CAACI,OAAO,EAAE;QACpC,OAAO,CAACJ,YAAY,CAACI,OAAO,CAACE,YAAY,GAAG,IAAI;MACjD;MACD,OAAO,GAAG;IACZ,CAAC;IAED,IAAMC,eAAe,GAAG,SAAAA,CAACC,CAAwC,EAAA;;MAE/D,IAAIb,QAAQ,IAAIa,CAAC,CAACC,YAAY,KAAK,YAAY,EAAE;QAC/CV,YAAY,CAAC,IAAI,CAAC;QAClBb,MAAM,KAAN,IAAA,IAAAA,MAAM,KAAN,KAAA,CAAA,GAAA,KAAA,CAAA,GAAAA,MAAM,EAAI;MACX;IACH,CAAC;IAED,IAAIY,SAAS,EAAE;MACb,OAAO,IAAI;IACZ;IAED,oBACEY,KACE,CAAAC,aAAA,CAAA,KAAA,EAAAC,QAAA,CAAA;MAAAC,GAAG,EAAEb,YAAY;MACjBc,SAAS,EAAEC,UAAU,CACnBC,MAAM,CAACC,YAAY,EACnBD,MAAM,CAACpC,IAAI,CAAC,EACZoC,MAAM,CAACnC,KAAK,CAAC,EACbc,QAAQ,IAAIqB,MAAM,CAACE,MAAM,EACzB/B,cAAc,IAAI6B,MAAM,CAAC7B,cAAc,EACvCG,iBAAiB,EACjBL,UAAU,IAAI+B,MAAM,CAAC/B,UAAU,CAChC;MACDJ,KAAK,EAAE;QAAEsC,SAAS,EAAEd,YAAY,CAAE;MAAA,CAAE;MACpCE,eAAe,EAAEA;IAAe,CAAA,EAC5BhB,SAAS,CAAA,eAEbmB,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;MAAKG,SAAS,EAAEE,MAAM,CAACI;IAAI,CAAA,eACzBV,KAAA,CAAAC,aAAA,CAACU,gBAAgB,EAAC;MAAAzC,IAAI,EAAEA;MAAQ,CAC5B,eACN8B,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;MACEG,SAAS,EAAEC,UAAU,CACnBC,MAAM,CAACM,aAAa,EACpBlC,cAAc,IAAI4B,MAAM,CAAC5B,cAAc;IACxC,CAAA,EAEAP,KAAK,KAAK,QAAQ,iBACjB6B,oBAACa,mBAAmB,EAAA;MAACC,SAAS,EAAEzC,KAAK;MAAEM,YAAY,EAAEA;IAAY,EAClE,EACAP,QAAQ,iBAAI4B,KAAK,CAAAC,aAAA,CAAA,KAAA,EAAA;MAAAG,SAAS,EAAEE,MAAM,CAACS;KAAI,EAAG3C,QAAQ,CAAO,CACtD,EACL,CAACG,UAAU,iBAAIyB,KAAA,CAAAC,aAAA,CAACe,YAAY,EAAC;MAAAC,OAAO,EAAE,SAAAA,CAAA,EAAM;QAAA,OAAA/B,WAAW,CAAC,IAAI,CAAC;MAAA;IAAA,CAAI,CAAA,CAC9D;EAEV,CAAC;EAEDlB,mBAAmB,CAACkD,WAAW,GAAG,qBAAqB;EAAA,OAhF1ClD,mBAAmB;AAAA;"}
+{"version":3,"file":"GenericNotification.mjs","sources":["../../../../../src/Notification/subcomponents/GenericNotification/GenericNotification.tsx"],"sourcesContent":["import React, { HTMLAttributes, useEffect, useRef, useState } from \"react\"\nimport classnames from \"classnames\"\nimport { HeadingProps } from \"~components/Heading\"\nimport { NotificationType } from \"~components/Notification/types\"\nimport { OverrideClassName } from \"~types/OverrideClassName\"\nimport { CancelButton } from \"../CancelButton\"\nimport { NotificationHeading } from \"../NotificationHeading\"\nimport { NotificationIcon } from \"../NotificationIcon\"\nimport styles from \"./GenericNotification.module.scss\"\n\nexport type GenericNotificationProps = {\n  type: NotificationType\n  style: \"global\" | \"inline\" | \"toast\"\n  children?: React.ReactNode\n  title?: string\n  persistent?: boolean\n  onHide?: () => void\n  noBottomMargin?: boolean\n  forceMultiline?: boolean\n  headingProps?: HeadingProps\n} & OverrideClassName<HTMLAttributes<HTMLDivElement>>\n\nexport const GenericNotification = ({\n  type,\n  style,\n  children,\n  title,\n  persistent = false,\n  onHide,\n  noBottomMargin,\n  forceMultiline,\n  headingProps,\n  classNameOverride,\n  ...restProps\n}: GenericNotificationProps): JSX.Element | null => {\n  const [isHidden, setIsHidden] = useState<boolean>(true)\n  const [isRemoved, setIsRemoved] = useState<boolean>(false)\n\n  const containerRef = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    requestAnimationFrame(() => {\n      if (containerRef.current) {\n        setIsHidden(false)\n      }\n    })\n  }, [])\n\n  const getMarginTop = (): string => {\n    if (isHidden && containerRef.current) {\n      return -containerRef.current.clientHeight + \"px\"\n    }\n    return \"0\"\n  }\n\n  const onTransitionEnd = (e: React.TransitionEvent<HTMLDivElement>): void => {\n    // Be careful: this assumes the final CSS property to be animated is \"margin-top\".\n    if (isHidden && e.propertyName === \"margin-top\") {\n      setIsRemoved(true)\n      onHide?.()\n    }\n  }\n\n  if (isRemoved) {\n    return null\n  }\n\n  return (\n    <div\n      ref={containerRef}\n      className={classnames(\n        styles.notification,\n        styles[type],\n        styles[style],\n        isHidden && styles.hidden,\n        noBottomMargin && styles.noBottomMargin,\n        classNameOverride,\n        persistent && styles.persistent\n      )}\n      style={{ marginTop: getMarginTop() }}\n      onTransitionEnd={onTransitionEnd}\n      {...restProps}\n    >\n      <div className={styles.icon}>\n        <NotificationIcon type={type} />\n      </div>\n      <div\n        className={classnames(\n          styles.textContainer,\n          forceMultiline && styles.forceMultiline\n        )}\n      >\n        {style !== \"global\" && (\n          <NotificationHeading titleProp={title} headingProps={headingProps} />\n        )}\n        {children && <div className={styles.text}>{children}</div>}\n      </div>\n      {!persistent && <CancelButton onClick={() => setIsHidden(true)} />}\n    </div>\n  )\n}\n\nGenericNotification.displayName = \"GenericNotification\"\n"],"names":["GenericNotification","_a","type","style","children","title","_b","persistent","onHide","noBottomMargin","forceMultiline","headingProps","classNameOverride","restProps","__rest","_c","useState","isHidden","setIsHidden","_d","isRemoved","setIsRemoved","containerRef","useRef","useEffect","requestAnimationFrame","current","getMarginTop","clientHeight","onTransitionEnd","e","propertyName","React","createElement","__assign","ref","className","classnames","styles","notification","hidden","marginTop","icon","NotificationIcon","textContainer","NotificationHeading","titleProp","text","CancelButton","onClick","displayName"],"mappings":"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"}

package/dist/esm/Pagination/Pagination.mjs

@@ -72,17 +72,17 @@ var Pagination = function (_a) {
       // Calculate and add truncate before group of main pages
       var firstEllipsisPageNumber = mainPagesStart - 1;
       var showPageInsteadOfFirstEllipsis = firstEllipsisPageNumber === firstPagesEnd + 1;
-      items.push(showPageInsteadOfFirstEllipsis ? paginationIndicator(firstEllipsisPageNumber) : /*#__PURE__*/React.createElement(TruncateIndicator, {
+      items.push(showPageInsteadOfFirstEllipsis ? paginationIndicator(firstEllipsisPageNumber) : ( /*#__PURE__*/React.createElement(TruncateIndicator, {
         key: firstEllipsisPageNumber
-      }));
+      })));
       // Add group of main pages
       items.push.apply(items, mainPages);
       // Calculate and add truncate after group of main pages
       var secondEllipsisPageNumber = mainPagesEnd + 1;
       var showPageInsteadOfSecondEllipsis = secondEllipsisPageNumber === lastPagesStart - 1;
-      items.push(showPageInsteadOfSecondEllipsis ? paginationIndicator(secondEllipsisPageNumber) : /*#__PURE__*/React.createElement(TruncateIndicator, {
+      items.push(showPageInsteadOfSecondEllipsis ? paginationIndicator(secondEllipsisPageNumber) : ( /*#__PURE__*/React.createElement(TruncateIndicator, {
         key: secondEllipsisPageNumber
-      }));
+      })));
       // Add group of last pages
       items.push.apply(items, lastPages);
     }