@spaziodati/atoka-design-system 10.1.0 → 10.2.0

package/CardsPage/index.js

@@ -7,7 +7,7 @@ import Col from "react-bootstrap/Col";
 import { f as findChildByComponent } from "../_shared/Utils-CXFvxozf.js";
 import { F as Form } from "../_shared/Form-l9l_S-Uk.js";
 import classnames from "classnames";
-import { S as SelectDropdown } from "../_shared/SelectDropdown-BqLfmaLM.js";
+import { S as SelectDropdown } from "../_shared/SelectDropdown-GHblwuD9.js";
 import { faList } from "@fortawesome/pro-light-svg-icons/faList";
 import { faTh } from "@fortawesome/pro-light-svg-icons/faTh";
 import { T as ToggleButtonGroup } from "../_shared/ToggleButtonGroup-Duq22aii.js";

package/DatePicker/index.js

@@ -1,4 +1,4 @@
-import { D } from "../_shared/DatePicker-B83yTQAi.js";
+import { D } from "../_shared/DatePicker-DLES5hkO.js";
 export {
   D as DatePicker
 };

package/DatePickerInput/index.js

@@ -5,7 +5,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faTimes } from "@fortawesome/pro-light-svg-icons/faTimes";
 import { a as FormControl } from "../_shared/Form-l9l_S-Uk.js";
 import { I as InputGroupComponent } from "../_shared/InputGroupShortcut-B6ccNgw4.js";
-import { M as MultiModeDatePicker } from "../_shared/MultiModeDatePicker-ZX2nGY4n.js";
+import { M as MultiModeDatePicker } from "../_shared/MultiModeDatePicker-BVFPSsWL.js";
 function useClickOutside(callback) {
   const ref = React__default.useRef(null);
   useEffect(() => {

package/EditableString/index.js

@@ -7,7 +7,7 @@ import "../_shared/Form-l9l_S-Uk.js";
 import { c as isStringEmpty } from "../_shared/Text-DT1G7-vq.js";
 import "../_shared/Style-CSNnkrg3.js";
 import { B as Button } from "../_shared/Button-Bn8PyQFK.js";
-import { I as InlineStringEditor } from "../_shared/InlineStringEditor-mo49_wqf.js";
+import { I as InlineStringEditor } from "../_shared/InlineStringEditor-Qd51lEZm.js";
 import { _ as _inheritsLoose, a as _extends, b as _objectWithoutPropertiesLoose, T as TransitionGroupContext, P as PropTypes, C as CSSTransition } from "../_shared/CSSTransition-BGcESi-j.js";
 function _assertThisInitialized(e) {
   if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");

package/InlineStringEditor/index.js

@@ -1,4 +1,4 @@
-import { I } from "../_shared/InlineStringEditor-mo49_wqf.js";
+import { I } from "../_shared/InlineStringEditor-Qd51lEZm.js";
 export {
   I as InlineStringEditor
 };

package/MultiModeDatePicker/index.js

@@ -1,4 +1,4 @@
-import { M } from "../_shared/MultiModeDatePicker-ZX2nGY4n.js";
+import { M } from "../_shared/MultiModeDatePicker-BVFPSsWL.js";
 export {
   M as MultiModeDatePicker
 };

package/SelectDropdown/SelectDropdown.d.ts

@@ -16,17 +16,25 @@ export interface SelectDropdownProps extends PropsWithClassName {
     direction?: 'up' | 'down';
     isFixed?: boolean;
 }
+interface SelectDropdownState {
+    isInsideModal: boolean;
+}
 /**
  * ### Overview
  *
  * The `SelectDropdown` allows users to either filter or sort items in a list according to specific parameters.
  */
-export declare class SelectDropdown extends React.PureComponent<React.PropsWithChildren<SelectDropdownProps>> {
+export declare class SelectDropdown extends React.PureComponent<React.PropsWithChildren<SelectDropdownProps>, SelectDropdownState> {
     static displayName: string;
     static defaultProps: Partial<SelectDropdownProps>;
+    private wrapperRef;
+    state: SelectDropdownState;
+    componentDidMount(): void;
+    private get isEffectivelyFixed();
     private renderOptions;
     private renderItem;
     private renderSelectedValue;
     private get popperConfig();
     render(): React.ReactNode;
 }
+export {};

package/SelectDropdown/index.js

@@ -1,4 +1,4 @@
-import { S } from "../_shared/SelectDropdown-BqLfmaLM.js";
+import { S } from "../_shared/SelectDropdown-GHblwuD9.js";
 export {
   S as SelectDropdown
 };

package/_shared/{DatePicker-B83yTQAi.js → DatePicker-DLES5hkO.js}

@@ -7,7 +7,7 @@ import ReactDOM__default from "react-dom";
 import { faChevronLeft } from "@fortawesome/pro-regular-svg-icons/faChevronLeft";
 import { faChevronRight } from "@fortawesome/pro-regular-svg-icons/faChevronRight";
 import { B as Button } from "./Button-Bn8PyQFK.js";
-import { S as SelectDropdown } from "./SelectDropdown-BqLfmaLM.js";
+import { S as SelectDropdown } from "./SelectDropdown-GHblwuD9.js";
 function r(e) {
   var t, f, n = "";
   if ("string" == typeof e || "number" == typeof e) n += e;

package/_shared/{InlineStringEditor-mo49_wqf.js → InlineStringEditor-Qd51lEZm.js}

@@ -6,7 +6,7 @@ import { faTimes } from "@fortawesome/pro-light-svg-icons/faTimes";
 import classnames from "classnames";
 import { B as Button } from "./Button-Bn8PyQFK.js";
 import { F as Form, a as FormControl } from "./Form-l9l_S-Uk.js";
-import { S as SelectDropdown } from "./SelectDropdown-BqLfmaLM.js";
+import { S as SelectDropdown } from "./SelectDropdown-GHblwuD9.js";
 class InlineStringEditor extends React__default.Component {
   static displayName = "InlineStringEditor";
   static defaultProps = {

package/_shared/{MultiModeDatePicker-ZX2nGY4n.js → MultiModeDatePicker-BVFPSsWL.js}

@@ -3,7 +3,7 @@ import { useState } from "react";
 import Col from "react-bootstrap/Col";
 import Row from "react-bootstrap/Row";
 import { B as Button } from "./Button-Bn8PyQFK.js";
-import { D as DatePicker, p as parse } from "./DatePicker-B83yTQAi.js";
+import { D as DatePicker, p as parse } from "./DatePicker-DLES5hkO.js";
 import { T as TabSwitcher } from "./TabSwitcher-jXRZG1zt.js";
 import { b as FormControlFeedBack, a as FormControl } from "./Form-l9l_S-Uk.js";
 const formatOptions = {

package/_shared/{SelectDropdown-BqLfmaLM.js → SelectDropdown-GHblwuD9.js}

@@ -3,6 +3,35 @@ import React__default from "react";
 import BsDropdown from "react-bootstrap/Dropdown";
 import classnames from "classnames";
 import { D as Dropdown, a as AtokaCustomDropdownToggleWithChevron } from "./AtokaDropdownToggles-B6q-ieDU.js";
+function fixedPositionFromRectFn({ state }) {
+  const reference = state.elements.reference;
+  const toggle = reference.closest?.(".atoka-select-dropdown")?.querySelector(".atoka-dropdown-toggle") ?? reference;
+  const rect = toggle.getBoundingClientRect();
+  state.styles.popper = {
+    ...state.styles.popper,
+    position: "fixed",
+    top: `${rect.bottom}px`,
+    left: `${rect.left}px`,
+    right: "auto",
+    bottom: "auto",
+    width: `${rect.width}px`,
+    transform: "none",
+    margin: "0"
+  };
+}
+const FIXED_POPPER_MODIFIERS = [
+  {
+    name: "fixedPositionFromRect",
+    enabled: true,
+    phase: "beforeWrite",
+    requires: ["computeStyles"],
+    fn: fixedPositionFromRectFn
+  },
+  {
+    name: "offset",
+    enabled: false
+  }
+];
 class SelectDropdown extends React__default.PureComponent {
   static displayName = "SelectDropdown";
   static defaultProps = {
@@ -10,6 +39,16 @@ class SelectDropdown extends React__default.PureComponent {
     placeholder: "--",
     direction: "down"
   };
+  wrapperRef = React__default.createRef();
+  state = { isInsideModal: false };
+  componentDidMount() {
+    if (this.wrapperRef.current?.closest(".modal")) {
+      this.setState({ isInsideModal: true });
+    }
+  }
+  get isEffectivelyFixed() {
+    return this.props.isFixed || this.state.isInsideModal;
+  }
   renderOptions() {
     return this.props.options.map(this.renderItem);
   }
@@ -32,41 +71,29 @@ class SelectDropdown extends React__default.PureComponent {
     return this.props.renderSelectedValue?.(selection) ?? selection.label;
   }
   get popperConfig() {
-    if (!this.props.isFixed) {
+    if (!this.isEffectivelyFixed) {
       return void 0;
     }
     return {
       strategy: "fixed",
-      modifiers: [
-        {
-          name: "sameWidth",
-          enabled: true,
-          phase: "beforeWrite",
-          requires: ["computeStyles"],
-          fn: ({ state }) => {
-            state.styles.popper.width = `${state.rects.reference.width}px`;
-          },
-          effect: ({ state }) => {
-            const element = state.elements.reference;
-            state.elements.popper.style.width = `${element.offsetWidth}px`;
-          }
-        }
-      ]
+      modifiers: FIXED_POPPER_MODIFIERS
     };
   }
   render() {
+    const isFixed = this.isEffectivelyFixed;
     const classNames = classnames("atoka-select-dropdown", this.props.className, this.props.size, {
       "is-invalid": this.props.isInvalid,
-      "position-static": this.props.isFixed
+      "position-static": isFixed,
+      "is-fixed": isFixed
     }), menuClassNames = classnames(
       "atoka-select-dropdown-menu",
       this.props.size,
       this.props.menuClassName
     );
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs(Dropdown, { onSelect: this.props.onSelect, className: classNames, drop: this.props.direction, children: [
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: this.wrapperRef, style: { display: "contents" }, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Dropdown, { onSelect: this.props.onSelect, className: classNames, drop: this.props.direction, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(Dropdown.Toggle, { disabled: this.props.disabled, as: AtokaCustomDropdownToggleWithChevron, children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "dropdown-toggle-text-container", children: this.renderSelectedValue() }) }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(BsDropdown.Menu, { className: menuClassNames, flip: false, popperConfig: this.popperConfig, children: this.renderOptions() })
-    ] });
+    ] }) });
   }
 }
 export {