@okta/odyssey-contribution-tooling 1.48.0 → 1.49.0

package/dist/cjs/DataTable/useRowReordering.cjs

@@ -0,0 +1,191 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useRowReordering = void 0;
+var _i18n = require("../i18n.generated/i18n.cjs");
+var _OdysseyDesignTokensContext = require("../OdysseyDesignTokensContext.cjs");
+var _reorderDataRowsLocally = require("./reorderDataRowsLocally.cjs");
+/*!
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+const useRowReordering = ({
+  totalRows,
+  onReorderRows,
+  data,
+  setData,
+  draggingRow,
+  setDraggingRow,
+  resultsPerPage,
+  page
+}) => {
+  const {
+    t
+  } = (0, _i18n.useTranslation)();
+  const updateRowOrder = ({
+    rowId,
+    newRowIndex
+  }) => {
+    if (newRowIndex < 0) {
+      return;
+    }
+    if (totalRows && newRowIndex > totalRows) {
+      return;
+    }
+    const newData = (0, _reorderDataRowsLocally.reorderDataRowsLocally)({
+      currentData: data,
+      rowId,
+      newRowIndex
+    });
+    setData(newData);
+    onReorderRows?.({
+      rowId,
+      newRowIndex
+    });
+  };
+  const odysseyDesignTokens = (0, _OdysseyDesignTokensContext.useOdysseyDesignTokens)();
+  const dragHandleStyles = {
+    padding: odysseyDesignTokens.Spacing1,
+    borderRadius: odysseyDesignTokens.BorderRadiusMain,
+    "&:focus-visible": {
+      boxShadow: `0 0 0 2px ${odysseyDesignTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyDesignTokens.PalettePrimaryMain}`,
+      outline: "2px solid transparent",
+      outlineOffset: "1px"
+    }
+  };
+  const dragHandleText = {
+    title: t("table.draghandle.tooltip"),
+    "aria-label": t("table.draghandle.arialabel")
+  };
+  const draggableTableBodyRowClassName = ({
+    currentRowId,
+    draggingRowId,
+    hoveredRowId
+  }) => {
+    if (draggingRowId === currentRowId && hoveredRowId !== currentRowId) {
+      return "isDragging";
+    }
+    if (hoveredRowId === currentRowId && draggingRowId !== currentRowId) {
+      return "isDragTarget";
+    }
+    if (draggingRowId === currentRowId && hoveredRowId === currentRowId) {
+      return "isDragging isDragTarget";
+    }
+    return undefined;
+  };
+  const setHoveredRow = (table, id) => {
+    if (id) {
+      const nextRow = table.getRow(id);
+      if (nextRow) {
+        table.setHoveredRow(nextRow);
+      }
+    }
+  };
+  const handleDragHandleKeyDown = ({
+    table,
+    row,
+    event
+  }) => {
+    const {
+      hoveredRow
+    } = table.getState();
+    const {
+      key
+    } = event;
+    const isSpaceKey = key === " ";
+    const isEnterKey = key === "Enter";
+    const isEscapeKey = key === "Escape";
+    const isArrowDown = key === "ArrowDown";
+    const isArrowUp = key === "ArrowUp";
+    const isSpaceOrEnter = isSpaceKey || isEnterKey;
+    const zeroIndexedPageNumber = page - 1;
+    const currentIndex = row.index + zeroIndexedPageNumber * resultsPerPage;
+    if (isEscapeKey) {
+      resetDraggingAndHoveredRow(table);
+      return;
+    }
+    if (isSpaceOrEnter) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+    if (draggingRow) {
+      if (typeof hoveredRow?.index === "number") {
+        const {
+          index
+        } = hoveredRow;
+        if (isSpaceOrEnter) {
+          const pageRelativeIndex = index + zeroIndexedPageNumber * resultsPerPage;
+          if (pageRelativeIndex !== currentIndex) {
+            updateRowOrder({
+              rowId: row.id,
+              newRowIndex: pageRelativeIndex
+            });
+            setTimeout(() => {
+              resetDraggingAndHoveredRow(table);
+            }, odysseyDesignTokens.TransitionDurationMainAsNumber);
+            return;
+          }
+        }
+        if (isArrowDown || isArrowUp) {
+          const nextIndex = isArrowDown ? index + 1 : index - 1;
+          setHoveredRow(table, data[nextIndex]?.id);
+        }
+      } else {
+        if (isArrowDown || isArrowUp) {
+          const nextIndex = isArrowDown ? row.index + 1 : row.index - 1;
+          setHoveredRow(table, data[nextIndex]?.id);
+        }
+      }
+    } else {
+      if (isSpaceOrEnter) {
+        setDraggingRow(row);
+      }
+    }
+  };
+  const handleDragHandleOnDragEnd = table => {
+    const cols = table.getAllColumns();
+    cols[0].toggleVisibility();
+    const {
+      draggingRow,
+      hoveredRow
+    } = table.getState();
+    if (draggingRow) {
+      updateRowOrder({
+        newRowIndex: hoveredRow.index,
+        rowId: draggingRow.id
+      });
+    }
+    setDraggingRow(null);
+  };
+  const handleDragHandleOnDragCapture = table => {
+    if (!draggingRow && table.getState().draggingRow?.id) {
+      setDraggingRow(table.getState().draggingRow);
+    }
+  };
+  const resetDraggingAndHoveredRow = table => {
+    setDraggingRow(null);
+    table.setHoveredRow(null);
+  };
+  return {
+    dragHandleStyles,
+    dragHandleText,
+    draggableTableBodyRowClassName,
+    handleDragHandleKeyDown,
+    handleDragHandleOnDragCapture,
+    handleDragHandleOnDragEnd,
+    resetDraggingAndHoveredRow,
+    updateRowOrder
+  };
+};
+exports.useRowReordering = useRowReordering;
+//# sourceMappingURL=useRowReordering.cjs.map

package/dist/cjs/DataTable/useRowReordering.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRowReordering.cjs","names":["_i18n","require","_OdysseyDesignTokensContext","_reorderDataRowsLocally","useRowReordering","totalRows","onReorderRows","data","setData","draggingRow","setDraggingRow","resultsPerPage","page","t","useTranslation","updateRowOrder","rowId","newRowIndex","newData","reorderDataRowsLocally","currentData","odysseyDesignTokens","useOdysseyDesignTokens","dragHandleStyles","padding","Spacing1","borderRadius","BorderRadiusMain","boxShadow","HueNeutralWhite","PalettePrimaryMain","outline","outlineOffset","dragHandleText","title","draggableTableBodyRowClassName","currentRowId","draggingRowId","hoveredRowId","undefined","setHoveredRow","table","id","nextRow","getRow","handleDragHandleKeyDown","row","event","hoveredRow","getState","key","isSpaceKey","isEnterKey","isEscapeKey","isArrowDown","isArrowUp","isSpaceOrEnter","zeroIndexedPageNumber","currentIndex","index","resetDraggingAndHoveredRow","preventDefault","stopPropagation","pageRelativeIndex","setTimeout","TransitionDurationMainAsNumber","nextIndex","handleDragHandleOnDragEnd","cols","getAllColumns","toggleVisibility","handleDragHandleOnDragCapture","exports"],"sources":["../../../src/DataTable/useRowReordering.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { MRT_Row, MRT_RowData, MRT_TableInstance } from \"material-react-table\";\nimport { Dispatch, KeyboardEvent, SetStateAction } from \"react\";\n\nimport { useTranslation } from \"../i18n.generated/i18n.js\";\nimport { useOdysseyDesignTokens } from \"../OdysseyDesignTokensContext.js\";\nimport { DataTableProps } from \"./DataTable.js\";\nimport { reorderDataRowsLocally } from \"./reorderDataRowsLocally.js\";\n\nexport const useRowReordering = <TData extends MRT_RowData>({\n  totalRows,\n  onReorderRows,\n  data,\n  setData,\n  draggingRow,\n  setDraggingRow,\n  resultsPerPage,\n  page,\n}: {\n  data: TData[];\n  draggingRow?: MRT_Row<TData> | null;\n  onReorderRows: DataTableProps[\"onReorderRows\"];\n  page: number;\n  resultsPerPage: number;\n  setData: Dispatch<SetStateAction<TData[]>>;\n  setDraggingRow: Dispatch<SetStateAction<MRT_Row<TData> | null | undefined>>;\n  totalRows: DataTableProps[\"totalRows\"];\n}) => {\n  const { t } = useTranslation();\n\n  const updateRowOrder = ({\n    rowId,\n    newRowIndex,\n  }: {\n    newRowIndex: number;\n    rowId: string;\n  }) => {\n    if (newRowIndex < 0) {\n      return;\n    }\n\n    // Needs to include the totalRows check because totalRows might not\n    // be set. If it isn't set, this whole check doesn't matter.\n    if (totalRows && newRowIndex > totalRows) {\n      return;\n    }\n\n    const newData = reorderDataRowsLocally({\n      currentData: data,\n      rowId,\n      newRowIndex,\n    });\n\n    setData(newData);\n    onReorderRows?.({ rowId, newRowIndex });\n  };\n\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const dragHandleStyles = {\n    padding: odysseyDesignTokens.Spacing1,\n    borderRadius: odysseyDesignTokens.BorderRadiusMain,\n    \"&:focus-visible\": {\n      boxShadow: `0 0 0 2px ${odysseyDesignTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyDesignTokens.PalettePrimaryMain}`,\n      outline: \"2px solid transparent\",\n      outlineOffset: \"1px\",\n    },\n  };\n\n  const dragHandleText = {\n    title: t(\"table.draghandle.tooltip\"),\n    \"aria-label\": t(\"table.draghandle.arialabel\"),\n  };\n\n  const draggableTableBodyRowClassName = ({\n    currentRowId,\n    draggingRowId,\n    hoveredRowId,\n  }: {\n    currentRowId: string;\n    draggingRowId?: string;\n    hoveredRowId?: string;\n  }) => {\n    if (draggingRowId === currentRowId && hoveredRowId !== currentRowId) {\n      return \"isDragging\";\n    }\n\n    if (hoveredRowId === currentRowId && draggingRowId !== currentRowId) {\n      return \"isDragTarget\";\n    }\n\n    if (draggingRowId === currentRowId && hoveredRowId === currentRowId) {\n      return \"isDragging isDragTarget\";\n    }\n\n    return undefined;\n  };\n\n  const setHoveredRow = (table: MRT_TableInstance<TData>, id: TData[\"id\"]) => {\n    if (id) {\n      // The `as MRT_Row<TData>` is necessary here to overcome some type/generic\n      // issues with the type of `setHoveredRow` defined by MRT. It's not ideal code,\n      // but it's the only way that works without a much larger rewrite.\n      const nextRow = table.getRow(id) as MRT_Row<TData>;\n\n      if (nextRow) {\n        table.setHoveredRow(nextRow);\n      }\n    }\n  };\n\n  type HandleDragHandleKeyDownArgs = {\n    event: KeyboardEvent<HTMLButtonElement>;\n    row: MRT_Row<TData>;\n    table: MRT_TableInstance<TData>;\n  };\n\n  const handleDragHandleKeyDown = ({\n    table,\n    row,\n    event,\n  }: HandleDragHandleKeyDownArgs) => {\n    const { hoveredRow } = table.getState();\n\n    const { key } = event;\n\n    const isSpaceKey = key === \" \";\n    const isEnterKey = key === \"Enter\";\n    const isEscapeKey = key === \"Escape\";\n    const isArrowDown = key === \"ArrowDown\";\n    const isArrowUp = key === \"ArrowUp\";\n    const isSpaceOrEnter = isSpaceKey || isEnterKey;\n    const zeroIndexedPageNumber = page - 1;\n    const currentIndex = row.index + zeroIndexedPageNumber * resultsPerPage;\n\n    if (isEscapeKey) {\n      resetDraggingAndHoveredRow(table);\n      return;\n    }\n\n    if (isSpaceOrEnter) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n\n    if (draggingRow) {\n      if (typeof hoveredRow?.index === \"number\") {\n        const { index } = hoveredRow;\n\n        if (isSpaceOrEnter) {\n          const pageRelativeIndex =\n            index + zeroIndexedPageNumber * resultsPerPage;\n\n          if (pageRelativeIndex !== currentIndex) {\n            updateRowOrder({\n              rowId: row.id,\n              newRowIndex: pageRelativeIndex,\n            });\n\n            // Can't transition CSS hover effect. Use timeout to delay hovered row effect removal\n            setTimeout(() => {\n              resetDraggingAndHoveredRow(table);\n            }, odysseyDesignTokens.TransitionDurationMainAsNumber);\n            return;\n          }\n        }\n\n        if (isArrowDown || isArrowUp) {\n          const nextIndex = isArrowDown ? index + 1 : index - 1;\n          // This is a legacy file, and this type isn't a problem in `DataView` --Kevin Ghadyani\n          // eslint-disable-next-line @typescript-eslint/no-unsafe-argument\n          setHoveredRow(table, data[nextIndex]?.id);\n        }\n      } else {\n        if (isArrowDown || isArrowUp) {\n          const nextIndex = isArrowDown ? row.index + 1 : row.index - 1;\n          // This is a legacy file, and this type isn't a problem in `DataView` --Kevin Ghadyani\n          // eslint-disable-next-line @typescript-eslint/no-unsafe-argument\n          setHoveredRow(table, data[nextIndex]?.id);\n        }\n      }\n    } else {\n      if (isSpaceOrEnter) {\n        setDraggingRow(row);\n      }\n    }\n  };\n\n  const handleDragHandleOnDragEnd = (table: MRT_TableInstance<TData>) => {\n    const cols = table.getAllColumns();\n    cols[0].toggleVisibility();\n\n    const { draggingRow, hoveredRow } = table.getState();\n    if (draggingRow) {\n      updateRowOrder({\n        newRowIndex: (hoveredRow as TData).index as number,\n        rowId: draggingRow.id,\n      });\n    }\n\n    setDraggingRow(null);\n  };\n\n  const handleDragHandleOnDragCapture = (table: MRT_TableInstance<TData>) => {\n    if (!draggingRow && table.getState().draggingRow?.id) {\n      setDraggingRow(table.getState().draggingRow);\n    }\n  };\n\n  const resetDraggingAndHoveredRow = (table: MRT_TableInstance<TData>) => {\n    setDraggingRow(null);\n    table.setHoveredRow(null);\n  };\n\n  return {\n    dragHandleStyles,\n    dragHandleText,\n    draggableTableBodyRowClassName,\n    handleDragHandleKeyDown,\n    handleDragHandleOnDragCapture,\n    handleDragHandleOnDragEnd,\n    resetDraggingAndHoveredRow,\n    updateRowOrder,\n  };\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/DataTable/useScrollIndication.cjs

@@ -0,0 +1,81 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useScrollIndication = void 0;
+var _react = require("react");
+var _OdysseyDesignTokensContext = require("../OdysseyDesignTokensContext.cjs");
+/*!
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+const useScrollIndication = ({
+  tableOuterContainer,
+  tableInnerContainer,
+  setIsTableContainerScrolledToStart,
+  setIsTableContainerScrolledToEnd,
+  setTableInnerContainerWidth
+}) => {
+  const animationFrameIdRef = (0, _react.useRef)(null);
+  const resizeObserverRef = (0, _react.useRef)(null);
+  const odysseyDesignTokens = (0, _OdysseyDesignTokensContext.useOdysseyDesignTokens)();
+  const checkScrollIndicators = (0, _react.useCallback)(() => {
+    if (!tableOuterContainer || !tableInnerContainer) return;
+    const containerWidth = tableOuterContainer.clientWidth;
+    const contentWidth = tableInnerContainer.scrollWidth;
+    const containerStartScrollPosition = tableInnerContainer.scrollLeft;
+    const containerEndScrollPosition = containerStartScrollPosition + containerWidth;
+    setIsTableContainerScrolledToStart(containerStartScrollPosition <= 16);
+    setIsTableContainerScrolledToEnd(containerEndScrollPosition >= contentWidth - 16);
+  }, [tableInnerContainer, tableOuterContainer, setIsTableContainerScrolledToEnd, setIsTableContainerScrolledToStart]);
+  (0, _react.useEffect)(() => {
+    if (typeof ResizeObserver === "undefined" || resizeObserverRef.current) {
+      return;
+    }
+    let debounceTimer;
+    resizeObserverRef.current = new ResizeObserver(() => {
+      clearTimeout(debounceTimer);
+      debounceTimer = setTimeout(() => {
+        if (!animationFrameIdRef.current) {
+          animationFrameIdRef.current = requestAnimationFrame(() => {
+            checkScrollIndicators();
+            animationFrameIdRef.current = null;
+          });
+        }
+        setTableInnerContainerWidth(tableInnerContainer?.clientWidth ? `${tableInnerContainer.clientWidth - Number(odysseyDesignTokens.BorderWidthMain) * 2}px` : "100%");
+      }, 100);
+    });
+    if (tableOuterContainer && tableOuterContainer.parentElement) {
+      resizeObserverRef.current.observe(tableOuterContainer.parentElement);
+    }
+    return () => {
+      if (resizeObserverRef.current) {
+        resizeObserverRef.current.disconnect();
+        resizeObserverRef.current = null;
+      }
+      clearTimeout(debounceTimer);
+      if (animationFrameIdRef.current) {
+        cancelAnimationFrame(animationFrameIdRef.current);
+        animationFrameIdRef.current = null;
+      }
+    };
+  }, [checkScrollIndicators, setTableInnerContainerWidth, tableOuterContainer, tableInnerContainer, setIsTableContainerScrolledToStart, setIsTableContainerScrolledToEnd, odysseyDesignTokens.BorderWidthMain]);
+  (0, _react.useEffect)(() => {
+    tableInnerContainer?.addEventListener("scroll", checkScrollIndicators);
+    return () => tableInnerContainer?.removeEventListener("scroll", checkScrollIndicators);
+  }, [tableInnerContainer, checkScrollIndicators]);
+  (0, _react.useEffect)(() => {
+    checkScrollIndicators();
+  }, []);
+};
+exports.useScrollIndication = useScrollIndication;
+//# sourceMappingURL=useScrollIndication.cjs.map

package/dist/cjs/DataTable/useScrollIndication.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollIndication.cjs","names":["_react","require","_OdysseyDesignTokensContext","useScrollIndication","tableOuterContainer","tableInnerContainer","setIsTableContainerScrolledToStart","setIsTableContainerScrolledToEnd","setTableInnerContainerWidth","animationFrameIdRef","useRef","resizeObserverRef","odysseyDesignTokens","useOdysseyDesignTokens","checkScrollIndicators","useCallback","containerWidth","clientWidth","contentWidth","scrollWidth","containerStartScrollPosition","scrollLeft","containerEndScrollPosition","useEffect","ResizeObserver","current","debounceTimer","clearTimeout","setTimeout","requestAnimationFrame","Number","BorderWidthMain","parentElement","observe","disconnect","cancelAnimationFrame","addEventListener","removeEventListener","exports"],"sources":["../../../src/DataTable/useScrollIndication.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n  Dispatch,\n  SetStateAction,\n  useCallback,\n  useEffect,\n  useRef,\n} from \"react\";\n\nimport { useOdysseyDesignTokens } from \"../OdysseyDesignTokensContext.js\";\n\ntype UseScrollIndicationProps = {\n  setIsTableContainerScrolledToEnd: Dispatch<SetStateAction<boolean>>;\n  setIsTableContainerScrolledToStart: Dispatch<SetStateAction<boolean>>;\n  setTableInnerContainerWidth: Dispatch<SetStateAction<string>>;\n  tableInnerContainer: HTMLDivElement | null;\n  tableOuterContainer: HTMLDivElement | null;\n};\nexport const useScrollIndication = ({\n  tableOuterContainer,\n  tableInnerContainer,\n  setIsTableContainerScrolledToStart,\n  setIsTableContainerScrolledToEnd,\n  setTableInnerContainerWidth,\n}: UseScrollIndicationProps) => {\n  const animationFrameIdRef = useRef<number | null>(null);\n\n  const resizeObserverRef = useRef<ResizeObserver | null>(null);\n\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const checkScrollIndicators = useCallback(() => {\n    if (!tableOuterContainer || !tableInnerContainer) return;\n\n    const containerWidth = tableOuterContainer.clientWidth;\n    const contentWidth = tableInnerContainer.scrollWidth;\n    const containerStartScrollPosition = tableInnerContainer.scrollLeft;\n    const containerEndScrollPosition =\n      containerStartScrollPosition + containerWidth;\n\n    setIsTableContainerScrolledToStart(containerStartScrollPosition <= 16);\n    setIsTableContainerScrolledToEnd(\n      containerEndScrollPosition >= contentWidth - 16,\n    );\n  }, [\n    tableInnerContainer,\n    tableOuterContainer,\n    setIsTableContainerScrolledToEnd,\n    setIsTableContainerScrolledToStart,\n  ]);\n\n  useEffect(() => {\n    // Avoid creating multiple observers or if ResizeObserver is unsupported\n    if (typeof ResizeObserver === \"undefined\" || resizeObserverRef.current) {\n      return;\n    }\n\n    let debounceTimer: ReturnType<typeof setTimeout>;\n\n    resizeObserverRef.current = new ResizeObserver(() => {\n      clearTimeout(debounceTimer);\n      debounceTimer = setTimeout(() => {\n        if (!animationFrameIdRef.current) {\n          animationFrameIdRef.current = requestAnimationFrame(() => {\n            checkScrollIndicators();\n            animationFrameIdRef.current = null;\n          });\n        }\n\n        setTableInnerContainerWidth(\n          tableInnerContainer?.clientWidth\n            ? `${tableInnerContainer.clientWidth - Number(odysseyDesignTokens.BorderWidthMain) * 2}px` // Account for the border on the outer container\n            : \"100%\",\n        );\n      }, 100); // debounce delay\n    });\n\n    if (tableOuterContainer && tableOuterContainer.parentElement) {\n      resizeObserverRef.current.observe(tableOuterContainer.parentElement);\n    }\n\n    return () => {\n      if (resizeObserverRef.current) {\n        resizeObserverRef.current.disconnect();\n        resizeObserverRef.current = null;\n      }\n      clearTimeout(debounceTimer); // Ensure timer is cleared on component unmount\n      if (animationFrameIdRef.current) {\n        cancelAnimationFrame(animationFrameIdRef.current);\n        animationFrameIdRef.current = null;\n      }\n    };\n  }, [\n    checkScrollIndicators,\n    setTableInnerContainerWidth,\n    tableOuterContainer,\n    tableInnerContainer,\n    setIsTableContainerScrolledToStart,\n    setIsTableContainerScrolledToEnd,\n    odysseyDesignTokens.BorderWidthMain,\n  ]);\n\n  useEffect(() => {\n    tableInnerContainer?.addEventListener(\"scroll\", checkScrollIndicators);\n    return () =>\n      tableInnerContainer?.removeEventListener(\"scroll\", checkScrollIndicators);\n  }, [tableInnerContainer, checkScrollIndicators]); // Re-run when innerContainerRef changes\n\n  // Initial check to set state correctly on mount\n  useEffect(() => {\n    checkScrollIndicators();\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/DatePickers/DateField.cjs

@@ -0,0 +1,171 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DateField = void 0;
+var _InputAdornment2 = _interopRequireDefault(require("@mui/material/InputAdornment"));
+var _xDatePickers = require("@mui/x-date-pickers");
+var _react = require("react");
+var _Field = require("../Field.cjs");
+var _i18n = require("../i18n.generated/i18n.cjs");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/*!
+ * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+const useOdysseyDateError = () => {
+  const {
+    t
+  } = (0, _i18n.useTranslation)();
+  return new Map([["invalidDate", t("picker.error.invalid")], ["maxDate", t("picker.error.maxdate")], ["minDate", t("picker.error.mindate")]]);
+};
+const formatDateTimeToUtcIsoDateString = value => value.toUTC().toISO();
+const DateField = ({
+  defaultValue,
+  endAdornment,
+  errorMessage,
+  hasInitialFocus,
+  hint,
+  HintLinkComponent,
+  id: idOverride,
+  inputRef,
+  isDisabled = false,
+  isOptional = false,
+  isReadOnly,
+  label,
+  minDate,
+  maxDate,
+  onBlur,
+  onChange,
+  onFocus,
+  timezone,
+  value
+}) => {
+  const errorMap = useOdysseyDateError();
+  const [displayedErrorMessage, setDisplayedErrorMessage] = (0, _react.useState)(errorMessage);
+  const internalValidationError = (0, _react.useRef)();
+  const localInputRef = (0, _react.useRef)(null);
+  (0, _react.useImperativeHandle)(inputRef, () => {
+    return {
+      focus: () => {
+        localInputRef.current?.focus();
+      }
+    };
+  }, []);
+  const checkMinMaxValidity = (0, _react.useCallback)(value => {
+    const hasMinError = minDate && value.toUTC() < minDate.toUTC();
+    const hasMaxError = maxDate && value.toUTC() > maxDate.toUTC();
+    if (hasMinError || hasMaxError) {
+      if (hasMinError) {
+        setDisplayedErrorMessage(errorMap.get("minDate"));
+      }
+      if (hasMaxError) {
+        setDisplayedErrorMessage(errorMap.get("maxDate"));
+      }
+      return false;
+    }
+    return true;
+  }, [errorMap, minDate, maxDate]);
+  (0, _react.useEffect)(() => {
+    if (value) {
+      checkMinMaxValidity(value);
+    }
+    if (defaultValue) {
+      checkMinMaxValidity(defaultValue);
+    }
+  }, [checkMinMaxValidity, defaultValue, minDate, maxDate, value]);
+  const clearErrorMessages = (0, _react.useCallback)(() => {
+    setDisplayedErrorMessage(undefined);
+    internalValidationError.current = undefined;
+  }, [internalValidationError, setDisplayedErrorMessage]);
+  const validateAndCallOnChange = (0, _react.useCallback)((value, validationContext) => {
+    clearErrorMessages();
+    const {
+      validationError
+    } = validationContext;
+    const hasEnteredFullYear = value?.year.toString().length === 4;
+    if (validationError) {
+      const odysseyValidationError = errorMap.get(validationError);
+      if (odysseyValidationError) {
+        internalValidationError.current = odysseyValidationError;
+        if (value?.isValid && hasEnteredFullYear) {
+          setDisplayedErrorMessage(odysseyValidationError);
+        }
+      }
+    }
+    if (value?.isValid && !validationError) {
+      const dateStringFromDateTime = formatDateTimeToUtcIsoDateString(value);
+      if (dateStringFromDateTime && checkMinMaxValidity(value)) {
+        onChange?.(dateStringFromDateTime);
+      }
+    }
+  }, [checkMinMaxValidity, clearErrorMessages, errorMap, onChange]);
+  const checkFieldValidityAndSetError = (0, _react.useCallback)(event => {
+    if (internalValidationError?.current && !displayedErrorMessage) {
+      setDisplayedErrorMessage(internalValidationError.current);
+    }
+    onBlur?.(event);
+  }, [displayedErrorMessage, internalValidationError, onBlur]);
+  const hasVisibleAdornment = !isReadOnly && !isDisabled;
+  const renderFieldComponent = (0, _react.useCallback)(({
+    ariaDescribedBy,
+    errorMessageElementId,
+    id,
+    labelElementId
+  }) => (0, _jsxRuntime.jsx)(_xDatePickers.DateField, {
+    autoFocus: hasInitialFocus,
+    defaultValue: defaultValue,
+    disabled: isDisabled,
+    id: id,
+    inputProps: {
+      "aria-describedby": ariaDescribedBy,
+      "aria-errormessage": errorMessageElementId,
+      "aria-labelledby": labelElementId
+    },
+    InputProps: {
+      error: Boolean(displayedErrorMessage || errorMessage),
+      endAdornment: (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+        children: hasVisibleAdornment && (0, _jsxRuntime.jsx)(_InputAdornment2.default, {
+          position: "end",
+          children: endAdornment
+        })
+      })
+    },
+    inputRef: localInputRef,
+    maxDate: maxDate,
+    minDate: minDate,
+    name: id,
+    onBlur: checkFieldValidityAndSetError,
+    onChange: validateAndCallOnChange,
+    onFocus: onFocus,
+    readOnly: isReadOnly,
+    timezone: timezone,
+    value: value,
+    variant: "standard"
+  }), [checkFieldValidityAndSetError, defaultValue, displayedErrorMessage, endAdornment, errorMessage, hasInitialFocus, hasVisibleAdornment, isDisabled, localInputRef, minDate, maxDate, onFocus, isReadOnly, timezone, validateAndCallOnChange, value]);
+  return (0, _jsxRuntime.jsx)(_Field.Field, {
+    errorMessage: displayedErrorMessage || errorMessage,
+    fieldType: "single",
+    hasVisibleLabel: true,
+    hint: hint,
+    HintLinkComponent: HintLinkComponent,
+    id: idOverride,
+    isDisabled: isDisabled,
+    isOptional: isOptional,
+    label: label,
+    renderFieldComponent: renderFieldComponent
+  });
+};
+const MemoizedDateField = exports.DateField = (0, _react.memo)(DateField);
+MemoizedDateField.displayName = "DateField";
+//# sourceMappingURL=DateField.cjs.map

package/dist/cjs/DatePickers/DateField.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateField.cjs","names":["_xDatePickers","require","_react","_Field","_i18n","_jsxRuntime","_interopRequireDefault","e","__esModule","default","useOdysseyDateError","t","useTranslation","Map","formatDateTimeToUtcIsoDateString","value","toUTC","toISO","DateField","defaultValue","endAdornment","errorMessage","hasInitialFocus","hint","HintLinkComponent","id","idOverride","inputRef","isDisabled","isOptional","isReadOnly","label","minDate","maxDate","onBlur","onChange","onFocus","timezone","errorMap","displayedErrorMessage","setDisplayedErrorMessage","useState","internalValidationError","useRef","localInputRef","useImperativeHandle","focus","current","checkMinMaxValidity","useCallback","hasMinError","hasMaxError","get","useEffect","clearErrorMessages","undefined","validateAndCallOnChange","validationContext","validationError","hasEnteredFullYear","year","toString","length","odysseyValidationError","isValid","dateStringFromDateTime","checkFieldValidityAndSetError","event","hasVisibleAdornment","renderFieldComponent","ariaDescribedBy","errorMessageElementId","labelElementId","jsx","autoFocus","disabled","inputProps","InputProps","error","Boolean","Fragment","children","_InputAdornment2","position","name","readOnly","variant","Field","fieldType","hasVisibleLabel","MemoizedDateField","exports","memo","displayName"],"sources":["../../../src/DatePickers/DateField.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { InputAdornment } from \"@mui/material\";\nimport {\n  DateValidationError,\n  DateField as MuiDateField,\n  DateFieldProps as MuiDateFieldProps,\n} from \"@mui/x-date-pickers\";\nimport { DateTime } from \"luxon\";\nimport {\n  FocusEventHandler,\n  memo,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { Field, RenderFieldComponentProps } from \"../Field.js\";\nimport { useTranslation } from \"../i18n.generated/i18n.js\";\nimport { TextFieldProps } from \"../TextField.js\";\n\nexport type DateFieldProps = {\n  onChange?: (value: string) => void;\n} & Pick<\n  MuiDateFieldProps<DateTime>,\n  \"defaultValue\" | \"inputRef\" | \"minDate\" | \"maxDate\" | \"timezone\" | \"value\"\n> &\n  Pick<\n    TextFieldProps,\n    | \"endAdornment\"\n    | \"errorMessage\"\n    | \"hasInitialFocus\"\n    | \"hint\"\n    | \"HintLinkComponent\"\n    | \"id\"\n    | \"isDisabled\"\n    | \"isOptional\"\n    | \"isReadOnly\"\n    | \"label\"\n    | \"onBlur\"\n    | \"onFocus\"\n  >;\n\nconst useOdysseyDateError = () => {\n  const { t } = useTranslation();\n\n  return new Map<DateValidationError, string>([\n    [\"invalidDate\", t(\"picker.error.invalid\")],\n    [\"maxDate\", t(\"picker.error.maxdate\")],\n    [\"minDate\", t(\"picker.error.mindate\")],\n  ]);\n};\n\nconst formatDateTimeToUtcIsoDateString = (value: DateTime) =>\n  value.toUTC().toISO();\n\nconst DateField = ({\n  defaultValue,\n  endAdornment,\n  errorMessage,\n  hasInitialFocus,\n  hint,\n  HintLinkComponent,\n  id: idOverride,\n  inputRef,\n  isDisabled = false,\n  isOptional = false,\n  isReadOnly,\n  label,\n  minDate,\n  maxDate,\n  onBlur,\n  onChange,\n  onFocus,\n  timezone,\n  value,\n}: DateFieldProps) => {\n  const errorMap = useOdysseyDateError();\n  const [displayedErrorMessage, setDisplayedErrorMessage] =\n    useState(errorMessage);\n\n  const internalValidationError = useRef<string | undefined>();\n  const localInputRef = useRef<HTMLInputElement>(null);\n\n  useImperativeHandle(inputRef, () => {\n    return {\n      focus: () => {\n        localInputRef.current?.focus();\n      },\n    };\n  }, []);\n\n  const checkMinMaxValidity = useCallback(\n    (value: DateTime) => {\n      const hasMinError = minDate && value.toUTC() < minDate.toUTC();\n      const hasMaxError = maxDate && value.toUTC() > maxDate.toUTC();\n\n      if (hasMinError || hasMaxError) {\n        if (hasMinError) {\n          setDisplayedErrorMessage(errorMap.get(\"minDate\"));\n        }\n\n        if (hasMaxError) {\n          setDisplayedErrorMessage(errorMap.get(\"maxDate\"));\n        }\n\n        return false;\n      }\n\n      return true;\n    },\n    [errorMap, minDate, maxDate],\n  );\n\n  useEffect(() => {\n    if (value) {\n      checkMinMaxValidity(value);\n    }\n\n    if (defaultValue) {\n      checkMinMaxValidity(defaultValue);\n    }\n  }, [checkMinMaxValidity, defaultValue, minDate, maxDate, value]);\n\n  const clearErrorMessages = useCallback(() => {\n    setDisplayedErrorMessage(undefined);\n    internalValidationError.current = undefined;\n  }, [internalValidationError, setDisplayedErrorMessage]);\n\n  const validateAndCallOnChange = useCallback<\n    NonNullable<MuiDateFieldProps<DateTime>[\"onChange\"]>\n  >(\n    (value, validationContext) => {\n      clearErrorMessages();\n      const { validationError } = validationContext;\n      const hasEnteredFullYear = value?.year.toString().length === 4;\n\n      if (validationError) {\n        const odysseyValidationError = errorMap.get(validationError);\n\n        if (odysseyValidationError) {\n          internalValidationError.current = odysseyValidationError;\n\n          if (value?.isValid && hasEnteredFullYear) {\n            setDisplayedErrorMessage(odysseyValidationError);\n          }\n        }\n      }\n\n      if (value?.isValid && !validationError) {\n        const dateStringFromDateTime = formatDateTimeToUtcIsoDateString(value);\n\n        if (dateStringFromDateTime && checkMinMaxValidity(value)) {\n          onChange?.(dateStringFromDateTime);\n        }\n      }\n    },\n    [checkMinMaxValidity, clearErrorMessages, errorMap, onChange],\n  );\n\n  const checkFieldValidityAndSetError = useCallback<\n    FocusEventHandler<HTMLInputElement>\n  >(\n    (event) => {\n      if (internalValidationError?.current && !displayedErrorMessage) {\n        setDisplayedErrorMessage(internalValidationError.current);\n      }\n      onBlur?.(event);\n    },\n    [displayedErrorMessage, internalValidationError, onBlur],\n  );\n\n  const hasVisibleAdornment = !isReadOnly && !isDisabled;\n\n  const renderFieldComponent = useCallback(\n    ({\n      ariaDescribedBy,\n      errorMessageElementId,\n      id,\n      labelElementId,\n    }: RenderFieldComponentProps) => (\n      <MuiDateField\n        /* eslint-disable-next-line jsx-a11y/no-autofocus */\n        autoFocus={hasInitialFocus}\n        defaultValue={defaultValue}\n        disabled={isDisabled}\n        id={id}\n        inputProps={{\n          \"aria-describedby\": ariaDescribedBy,\n          \"aria-errormessage\": errorMessageElementId,\n          \"aria-labelledby\": labelElementId,\n        }}\n        InputProps={{\n          error: Boolean(displayedErrorMessage || errorMessage),\n          endAdornment: (\n            <>\n              {hasVisibleAdornment && (\n                <InputAdornment position=\"end\">{endAdornment}</InputAdornment>\n              )}\n            </>\n          ),\n        }}\n        inputRef={localInputRef}\n        maxDate={maxDate}\n        minDate={minDate}\n        name={id}\n        onBlur={checkFieldValidityAndSetError}\n        onChange={validateAndCallOnChange}\n        onFocus={onFocus}\n        readOnly={isReadOnly}\n        timezone={timezone}\n        value={value}\n        variant=\"standard\"\n      />\n    ),\n    [\n      checkFieldValidityAndSetError,\n      defaultValue,\n      displayedErrorMessage,\n      endAdornment,\n      errorMessage,\n      hasInitialFocus,\n      hasVisibleAdornment,\n      isDisabled,\n      localInputRef,\n      minDate,\n      maxDate,\n      onFocus,\n      isReadOnly,\n      timezone,\n      validateAndCallOnChange,\n      value,\n    ],\n  );\n\n  return (\n    <Field\n      errorMessage={displayedErrorMessage || errorMessage}\n      fieldType=\"single\"\n      hasVisibleLabel\n      hint={hint}\n      HintLinkComponent={HintLinkComponent}\n      id={idOverride}\n      isDisabled={isDisabled}\n      isOptional={isOptional}\n      label={label}\n      renderFieldComponent={renderFieldComponent}\n    />\n  );\n};\n\nconst MemoizedDateField = memo(DateField);\nMemoizedDateField.displayName = \"DateField\";\n\nexport { MemoizedDateField as DateField };\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/DatePickers/DateFieldActionBar.cjs

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DateFieldActionBar = void 0;
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _react = require("react");
+var _Button = require("../Buttons/Button.cjs");
+var _i18n = require("../i18n.generated/i18n.cjs");
+var _OdysseyDesignTokensContext = require("../OdysseyDesignTokensContext.cjs");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/*!
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+const ActionContainer = _styled.default.div(({
+  odysseyDesignTokens
+}) => ({
+  display: "flex",
+  justifyContent: "flex-end",
+  paddingInline: odysseyDesignTokens.Spacing4,
+  paddingBlockEnd: odysseyDesignTokens.Spacing4
+}));
+const DateFieldActionBar = ({
+  actions,
+  onAccept,
+  onCancel
+}) => {
+  const {
+    t
+  } = (0, _i18n.useTranslation)();
+  const odysseyDesignTokens = (0, _OdysseyDesignTokensContext.useOdysseyDesignTokens)();
+  if (actions && actions.length > 0) {
+    return (0, _jsxRuntime.jsxs)(ActionContainer, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      children: [(0, _jsxRuntime.jsx)(_Button.Button, {
+        label: t("picker.labels.action.cancel"),
+        onClick: onCancel,
+        variant: "floating"
+      }), (0, _jsxRuntime.jsx)(_Button.Button, {
+        label: t("picker.labels.action.apply"),
+        onClick: onAccept,
+        variant: "primary"
+      })]
+    });
+  }
+  return null;
+};
+const MemoizedDateFieldActionBar = exports.DateFieldActionBar = (0, _react.memo)(DateFieldActionBar);
+MemoizedDateFieldActionBar.displayName = "DateFieldActionBar";
+//# sourceMappingURL=DateFieldActionBar.cjs.map

package/dist/cjs/DatePickers/DateFieldActionBar.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateFieldActionBar.cjs","names":["_styled","_interopRequireDefault","require","_react","_Button","_i18n","_OdysseyDesignTokensContext","_jsxRuntime","e","__esModule","default","ActionContainer","styled","div","odysseyDesignTokens","display","justifyContent","paddingInline","Spacing4","paddingBlockEnd","DateFieldActionBar","actions","onAccept","onCancel","t","useTranslation","useOdysseyDesignTokens","length","jsxs","children","jsx","Button","label","onClick","variant","MemoizedDateFieldActionBar","exports","memo","displayName"],"sources":["../../../src/DatePickers/DateFieldActionBar.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport styled from \"@emotion/styled\";\nimport { PickersActionBarProps } from \"@mui/x-date-pickers\";\nimport { memo } from \"react\";\n\nimport { Button } from \"../Buttons/Button.js\";\nimport { useTranslation } from \"../i18n.generated/i18n.js\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../OdysseyDesignTokensContext.js\";\n\nconst ActionContainer = styled.div<{ odysseyDesignTokens: DesignTokens }>(\n  ({ odysseyDesignTokens }) => ({\n    display: \"flex\",\n    justifyContent: \"flex-end\",\n    paddingInline: odysseyDesignTokens.Spacing4,\n    paddingBlockEnd: odysseyDesignTokens.Spacing4,\n  }),\n);\n\nconst DateFieldActionBar = ({\n  actions,\n  onAccept,\n  onCancel,\n}: PickersActionBarProps) => {\n  const { t } = useTranslation();\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  // actions will be [] or [\"accept\", \"cancel\"]\n  if (actions && actions.length > 0) {\n    return (\n      <ActionContainer odysseyDesignTokens={odysseyDesignTokens}>\n        <Button\n          label={t(\"picker.labels.action.cancel\")}\n          onClick={onCancel}\n          variant=\"floating\"\n        />\n        <Button\n          label={t(\"picker.labels.action.apply\")}\n          onClick={onAccept}\n          variant=\"primary\"\n        />\n      </ActionContainer>\n    );\n  }\n\n  return null;\n};\n\nconst MemoizedDateFieldActionBar = memo(DateFieldActionBar);\nMemoizedDateFieldActionBar.displayName = \"DateFieldActionBar\";\n\nexport { MemoizedDateFieldActionBar as DateFieldActionBar };\n"],"mappings":";;;;;;AAYA,IAAAA,OAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,MAAA,GAAAD,OAAA;AAEA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AACA,IAAAI,2BAAA,GAAAJ,OAAA;AAG0C,IAAAK,WAAA,GAAAL,OAAA;AAAA,SAAAD,uBAAAO,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AArB1C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAaA,MAAMG,eAAe,GAAGC,eAAM,CAACC,GAAG,CAChC,CAAC;EAAEC;AAAoB,CAAC,MAAM;EAC5BC,OAAO,EAAE,MAAM;EACfC,cAAc,EAAE,UAAU;EAC1BC,aAAa,EAAEH,mBAAmB,CAACI,QAAQ;EAC3CC,eAAe,EAAEL,mBAAmB,CAACI;AACvC,CAAC,CACH,CAAC;AAED,MAAME,kBAAkB,GAAGA,CAAC;EAC1BC,OAAO;EACPC,QAAQ;EACRC;AACqB,CAAC,KAAK;EAC3B,MAAM;IAAEC;EAAE,CAAC,GAAG,IAAAC,oBAAc,EAAC,CAAC;EAC9B,MAAMX,mBAAmB,GAAG,IAAAY,kDAAsB,EAAC,CAAC;EAGpD,IAAIL,OAAO,IAAIA,OAAO,CAACM,MAAM,GAAG,CAAC,EAAE;IACjC,OACE,IAAApB,WAAA,CAAAqB,IAAA,EAACjB,eAAe;MAACG,mBAAmB,EAAEA,mBAAoB;MAAAe,QAAA,GACxD,IAAAtB,WAAA,CAAAuB,GAAA,EAAC1B,OAAA,CAAA2B,MAAM;QACLC,KAAK,EAAER,CAAC,CAAC,6BAA6B,CAAE;QACxCS,OAAO,EAAEV,QAAS;QAClBW,OAAO,EAAC;MAAU,CACnB,CAAC,EACF,IAAA3B,WAAA,CAAAuB,GAAA,EAAC1B,OAAA,CAAA2B,MAAM;QACLC,KAAK,EAAER,CAAC,CAAC,4BAA4B,CAAE;QACvCS,OAAO,EAAEX,QAAS;QAClBY,OAAO,EAAC;MAAS,CAClB,CAAC;IAAA,CACa,CAAC;EAEtB;EAEA,OAAO,IAAI;AACb,CAAC;AAED,MAAMC,0BAA0B,GAAAC,OAAA,CAAAhB,kBAAA,GAAG,IAAAiB,WAAI,EAACjB,kBAAkB,CAAC;AAC3De,0BAA0B,CAACG,WAAW,GAAG,oBAAoB","ignoreList":[]}

package/dist/cjs/DatePickers/DateFieldLocalizationProvider.cjs

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DateFieldLocalizationProvider = void 0;
+var _xDatePickers = require("@mui/x-date-pickers");
+var _AdapterLuxon = require("@mui/x-date-pickers/AdapterLuxon");
+var _react = require("react");
+var _jsxRuntime = require("react/jsx-runtime");
+/*!
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+const DateFieldLocalizationProvider = ({
+  children,
+  defaultedLanguageCode,
+  localeText
+}) => {
+  return (0, _jsxRuntime.jsx)(_xDatePickers.LocalizationProvider, {
+    adapterLocale: defaultedLanguageCode,
+    dateAdapter: _AdapterLuxon.AdapterLuxon,
+    localeText: localeText,
+    children: children
+  });
+};
+const MemoizedDateFieldLocalizationProvider = exports.DateFieldLocalizationProvider = (0, _react.memo)(DateFieldLocalizationProvider);
+MemoizedDateFieldLocalizationProvider.displayName = "DateFieldLocalizationProvider";
+//# sourceMappingURL=DateFieldLocalizationProvider.cjs.map

package/dist/cjs/DatePickers/DateFieldLocalizationProvider.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateFieldLocalizationProvider.cjs","names":["_xDatePickers","require","_AdapterLuxon","_react","_jsxRuntime","DateFieldLocalizationProvider","children","defaultedLanguageCode","localeText","jsx","LocalizationProvider","adapterLocale","dateAdapter","AdapterLuxon","MemoizedDateFieldLocalizationProvider","exports","memo","displayName"],"sources":["../../../src/DatePickers/DateFieldLocalizationProvider.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { LocalizationProvider } from \"@mui/x-date-pickers\";\nimport { AdapterLuxon } from \"@mui/x-date-pickers/AdapterLuxon\";\nimport { memo, PropsWithChildren } from \"react\";\n\nimport { DateFieldsTranslations } from \"./useDateFieldsTranslations.js\";\n\ntype DateFieldLocalizationProviderProps = {\n  defaultedLanguageCode: string;\n  localeText: DateFieldsTranslations;\n};\n\nconst DateFieldLocalizationProvider = ({\n  children,\n  defaultedLanguageCode,\n  localeText,\n}: PropsWithChildren<DateFieldLocalizationProviderProps>) => {\n  return (\n    <LocalizationProvider\n      adapterLocale={defaultedLanguageCode}\n      dateAdapter={AdapterLuxon}\n      localeText={localeText}\n    >\n      {children}\n    </LocalizationProvider>\n  );\n};\n\nconst MemoizedDateFieldLocalizationProvider = memo(\n  DateFieldLocalizationProvider,\n);\nMemoizedDateFieldLocalizationProvider.displayName =\n  \"DateFieldLocalizationProvider\";\n\nexport { MemoizedDateFieldLocalizationProvider as DateFieldLocalizationProvider };\n"],"mappings":";;;;;;AAYA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AAAgD,IAAAG,WAAA,GAAAH,OAAA;AAdhD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAaA,MAAMI,6BAA6B,GAAGA,CAAC;EACrCC,QAAQ;EACRC,qBAAqB;EACrBC;AACqD,CAAC,KAAK;EAC3D,OACE,IAAAJ,WAAA,CAAAK,GAAA,EAACT,aAAA,CAAAU,oBAAoB;IACnBC,aAAa,EAAEJ,qBAAsB;IACrCK,WAAW,EAAEC,0BAAa;IAC1BL,UAAU,EAAEA,UAAW;IAAAF,QAAA,EAEtBA;EAAQ,CACW,CAAC;AAE3B,CAAC;AAED,MAAMQ,qCAAqC,GAAAC,OAAA,CAAAV,6BAAA,GAAG,IAAAW,WAAI,EAChDX,6BACF,CAAC;AACDS,qCAAqC,CAACG,WAAW,GAC/C,+BAA+B","ignoreList":[]}