@okta/odyssey-react-mui 1.27.1 → 1.29.0

package/dist/labs/DataView/testSupportData.js

@@ -0,0 +1,201 @@
+/*!
+ * Copyright (c) 2024-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.
+ */
+import { Status } from "../../Status.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const columns = [{
+  accessorKey: "order",
+  header: "ID",
+  enableColumnFilter: false,
+  size: 120
+}, {
+  accessorKey: "name",
+  header: "Name",
+  enableHiding: false
+}, {
+  accessorKey: "city",
+  header: "City"
+}, {
+  accessorKey: "state",
+  header: "State"
+}, {
+  accessorKey: "age",
+  header: "Age",
+  size: 80,
+  filterVariant: "range"
+}, {
+  accessorKey: "risk",
+  header: "Risk level",
+  Cell: ({
+    cell
+  }) => {
+    const value = cell.getValue();
+    const severity = value === "low" ? "success" : value === "medium" ? "warning" : "error";
+    return _jsx(Status, {
+      label: value.charAt(0).toUpperCase() + value.slice(1),
+      severity: severity
+    });
+  },
+  filterVariant: "multi-select",
+  filterSelectOptions: [{
+    label: "Low",
+    value: "low"
+  }, {
+    label: "Medium",
+    value: "medium"
+  }, {
+    label: "High",
+    value: "high"
+  }]
+}];
+export const data = [{
+  order: 1,
+  id: "1",
+  name: "Luke Skywalker",
+  city: "Mos Eisley",
+  state: "Tatooine",
+  age: 19,
+  risk: "low"
+}, {
+  order: 2,
+  id: "2",
+  name: "Han Solo",
+  city: "Corellia",
+  state: "Corellia",
+  age: 40,
+  risk: "medium"
+}, {
+  order: 3,
+  id: "3",
+  name: "Leia Organa",
+  city: "Alderaan City",
+  state: "Alderaan",
+  age: 19,
+  risk: "low"
+}, {
+  order: 4,
+  id: "4",
+  name: "Chewbacca",
+  city: "Kashyyyk City",
+  state: "Kashyyyk",
+  age: 50,
+  risk: "high"
+}, {
+  order: 5,
+  id: "5",
+  name: "C-3P0",
+  city: "Mos Espa",
+  state: "Tatooine",
+  age: 25,
+  risk: "low"
+}, {
+  order: 6,
+  id: "6",
+  name: "R2-D2",
+  city: "Theed",
+  state: "Naboo",
+  age: 25,
+  risk: "low"
+}];
+let result = [];
+for (let i = 0; i < 50; i++) {
+  result = result.concat(data);
+}
+export const lotsOfData = result;
+export const filterData = ({
+  data,
+  ...args
+}) => {
+  const {
+    search,
+    filters,
+    sort,
+    page = 1,
+    resultsPerPage = 20
+  } = args;
+  const searchFiltered = search ? data.filter(row => Object.values(row).some(value => value.toString().toLowerCase().includes(search.toLowerCase()))) : data;
+  const personKeys = ["order", "id", "name", "city", "state", "age", "risk"];
+  const isKeyOfPerson = key => {
+    return personKeys.includes(key);
+  };
+  const handleStartLetterFilter = (row, value) => {
+    if (typeof row.name !== "string") return true;
+    const firstLetter = row.name[0]?.toLowerCase();
+    if (value === "vowel") return "aeiou".includes(firstLetter);
+    if (value === "consonant") return !"aeiou".includes(firstLetter);
+    return true;
+  };
+  const handleStandardFilter = (row, id, value) => {
+    const rowValue = String(row[id]).toLowerCase();
+    if (value === null || value === undefined) {
+      return true;
+    }
+    if (typeof value === "string" || typeof value === "number") {
+      return rowValue.includes(String(value).toLowerCase());
+    }
+    if (Array.isArray(value)) {
+      return value.some(arrayValue => {
+        const filterValue = typeof arrayValue === "object" ? arrayValue.value : arrayValue;
+        return row[id]?.toString().toLowerCase().includes(filterValue.toString().toLowerCase());
+      });
+    }
+    return false;
+  };
+  const compareValues = (a, b, desc) => {
+    if (a < b) return desc ? 1 : -1;
+    if (a > b) return desc ? -1 : 1;
+    return 0;
+  };
+  const columnFiltered = filters ? searchFiltered.filter(row => filters.every(({
+    id,
+    value
+  }) => {
+    if (value === null || value === undefined) {
+      return true;
+    }
+    if (id === "startLetter") {
+      return handleStartLetterFilter(row, value);
+    }
+    if (isKeyOfPerson(id)) {
+      return handleStandardFilter(row, id, value);
+    }
+    return true;
+  })) : searchFiltered;
+  const sorted = sort && sort.length > 0 ? [...columnFiltered].sort((a, b) => sort.reduce((result, {
+    id,
+    desc
+  }) => {
+    if (result !== 0) return result;
+    if (isKeyOfPerson(id)) {
+      const aValue = a[id];
+      const bValue = b[id];
+      return compareValues(aValue, bValue, desc);
+    }
+    return 0;
+  }, 0)) : columnFiltered;
+  const startRow = (page - 1) * resultsPerPage;
+  const endRow = startRow + resultsPerPage;
+  return sorted.slice(startRow, endRow);
+};
+export const reorderData = ({
+  data,
+  rowId,
+  newRowIndex
+}) => {
+  const rowIndex = data.findIndex(row => row.id === rowId);
+  if (rowIndex === -1) {
+    return data;
+  }
+  const [removedRow] = data.splice(rowIndex, 1);
+  const reorderedData = [...data.slice(0, newRowIndex), removedRow, ...data.slice(newRowIndex)];
+  return reorderedData;
+};
+//# sourceMappingURL=testSupportData.js.map

package/dist/labs/DataView/testSupportData.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"testSupportData.js","names":["Status","jsx","_jsx","columns","accessorKey","header","enableColumnFilter","size","enableHiding","filterVariant","Cell","cell","value","getValue","severity","label","charAt","toUpperCase","slice","filterSelectOptions","data","order","id","name","city","state","age","risk","result","i","concat","lotsOfData","filterData","args","search","filters","sort","page","resultsPerPage","searchFiltered","filter","row","Object","values","some","toString","toLowerCase","includes","personKeys","isKeyOfPerson","key","handleStartLetterFilter","firstLetter","handleStandardFilter","rowValue","String","undefined","Array","isArray","arrayValue","filterValue","compareValues","a","b","desc","columnFiltered","every","sorted","length","reduce","aValue","bValue","startRow","endRow","reorderData","rowId","newRowIndex","rowIndex","findIndex","removedRow","splice","reorderedData"],"sources":["../../../src/labs/DataView/testSupportData.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2024-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 { Status } from \"../../Status\";\nimport { DataColumns, DataFilter, DataGetDataType } from \"../\";\n\nexport type Person = {\n  order: number;\n  id: string;\n  name: string;\n  city: string;\n  state: string;\n  age: number;\n  risk: \"high\" | \"medium\" | \"low\";\n};\n\nexport const columns: DataColumns<Person> = [\n  {\n    accessorKey: \"order\",\n    header: \"ID\",\n    enableColumnFilter: false,\n    size: 120,\n  },\n  {\n    accessorKey: \"name\",\n    header: \"Name\",\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"city\",\n    header: \"City\",\n  },\n  {\n    accessorKey: \"state\",\n    header: \"State\",\n  },\n  {\n    accessorKey: \"age\",\n    header: \"Age\",\n    size: 80,\n    filterVariant: \"range\",\n  },\n  {\n    accessorKey: \"risk\",\n    header: \"Risk level\",\n    Cell: ({ cell }) => {\n      const value = cell.getValue<string>();\n      const severity =\n        value === \"low\" ? \"success\" : value === \"medium\" ? \"warning\" : \"error\";\n      return (\n        <Status\n          label={value.charAt(0).toUpperCase() + value.slice(1)}\n          severity={severity}\n        />\n      );\n    },\n    filterVariant: \"multi-select\",\n    filterSelectOptions: [\n      {\n        label: \"Low\",\n        value: \"low\",\n      },\n      {\n        label: \"Medium\",\n        value: \"medium\",\n      },\n      {\n        label: \"High\",\n        value: \"high\",\n      },\n    ],\n  },\n];\n\nexport const data: Person[] = [\n  {\n    order: 1,\n    id: \"1\",\n    name: \"Luke Skywalker\",\n    city: \"Mos Eisley\",\n    state: \"Tatooine\",\n    age: 19,\n    risk: \"low\",\n  },\n  {\n    order: 2,\n    id: \"2\",\n    name: \"Han Solo\",\n    city: \"Corellia\",\n    state: \"Corellia\",\n    age: 40,\n    risk: \"medium\",\n  },\n  {\n    order: 3,\n    id: \"3\",\n    name: \"Leia Organa\",\n    city: \"Alderaan City\",\n    state: \"Alderaan\",\n    age: 19,\n    risk: \"low\",\n  },\n  {\n    order: 4,\n    id: \"4\",\n    name: \"Chewbacca\",\n    city: \"Kashyyyk City\",\n    state: \"Kashyyyk\",\n    age: 50,\n    risk: \"high\",\n  },\n  {\n    order: 5,\n    id: \"5\",\n    name: \"C-3P0\",\n    city: \"Mos Espa\",\n    state: \"Tatooine\",\n    age: 25,\n    risk: \"low\",\n  },\n  {\n    order: 6,\n    id: \"6\",\n    name: \"R2-D2\",\n    city: \"Theed\",\n    state: \"Naboo\",\n    age: 25,\n    risk: \"low\",\n  },\n];\n\nlet result: Person[] = [];\nfor (let i = 0; i < 50; i++) {\n  result = result.concat(data);\n}\nexport const lotsOfData = result;\n\nexport const filterData = ({\n  data,\n  ...args\n}: {\n  data: Person[];\n} & DataGetDataType) => {\n  const { search, filters, sort, page = 1, resultsPerPage = 20 } = args;\n\n  const searchFiltered = search\n    ? data.filter((row) =>\n        Object.values(row).some((value) =>\n          value.toString().toLowerCase().includes(search.toLowerCase()),\n        ),\n      )\n    : data;\n\n  const personKeys: (keyof Person)[] = [\n    \"order\",\n    \"id\",\n    \"name\",\n    \"city\",\n    \"state\",\n    \"age\",\n    \"risk\",\n  ];\n\n  const isKeyOfPerson = (key: string): key is keyof Person => {\n    return personKeys.includes(key as keyof Person);\n  };\n\n  const handleStartLetterFilter = (\n    row: Person,\n    value: DataFilter[\"value\"],\n  ): boolean => {\n    if (typeof row.name !== \"string\") return true;\n    const firstLetter = row.name[0]?.toLowerCase();\n    if (value === \"vowel\") return \"aeiou\".includes(firstLetter);\n    if (value === \"consonant\") return !\"aeiou\".includes(firstLetter);\n    return true;\n  };\n\n  const handleStandardFilter = (\n    row: Person,\n    id: keyof Person,\n    value: DataFilter[\"value\"],\n  ): boolean => {\n    const rowValue = String(row[id]).toLowerCase();\n\n    if (value === null || value === undefined) {\n      return true;\n    }\n\n    if (typeof value === \"string\" || typeof value === \"number\") {\n      return rowValue.includes(String(value).toLowerCase());\n    }\n\n    if (Array.isArray(value)) {\n      return value.some((arrayValue) => {\n        const filterValue =\n          typeof arrayValue === \"object\" ? arrayValue.value : arrayValue;\n        return row[id as keyof Person]\n          ?.toString()\n          .toLowerCase()\n          .includes(filterValue.toString().toLowerCase());\n      });\n    }\n\n    return false;\n  };\n\n  const compareValues = (\n    a: string | number,\n    b: string | number,\n    desc: boolean,\n  ): number => {\n    if (a < b) return desc ? 1 : -1;\n    if (a > b) return desc ? -1 : 1;\n    return 0;\n  };\n\n  // In a real-world scenario, the consumer would provide their own backend\n  // filtering/searching logic. This is a demo of what that could look like\n  // for the provided sample data and demo filters.\n  const columnFiltered = filters\n    ? searchFiltered.filter((row) =>\n        filters.every(({ id, value }: DataFilter) => {\n          // If the filter value is null, return all the data\n          if (value === null || value === undefined) {\n            return true;\n          }\n\n          // Handle custom filters\n          if (id === \"startLetter\") {\n            return handleStartLetterFilter(row, value);\n          }\n\n          // Handle standard Person properties\n          if (isKeyOfPerson(id)) {\n            return handleStandardFilter(row, id, value);\n          }\n\n          return true;\n        }),\n      )\n    : searchFiltered;\n\n  const sorted =\n    sort && sort.length > 0\n      ? [...columnFiltered].sort((a, b) =>\n          sort.reduce((result, { id, desc }) => {\n            if (result !== 0) return result;\n\n            if (isKeyOfPerson(id)) {\n              const aValue = a[id];\n              const bValue = b[id];\n              return compareValues(aValue, bValue, desc);\n            }\n\n            // Handle custom sort fields if needed\n            return 0;\n          }, 0),\n        )\n      : columnFiltered;\n\n  const startRow = (page - 1) * resultsPerPage;\n  const endRow = startRow + resultsPerPage;\n\n  return sorted.slice(startRow, endRow);\n};\n\nexport const reorderData = <Data extends Person>({\n  data,\n  rowId,\n  newRowIndex,\n}: {\n  data: Data[];\n  rowId: string | number;\n  newRowIndex: number;\n}): Data[] => {\n  const rowIndex = data.findIndex((row) => row.id === rowId);\n\n  if (rowIndex === -1) {\n    return data;\n  }\n\n  const [removedRow] = data.splice(rowIndex, 1);\n\n  const reorderedData = [\n    ...data.slice(0, newRowIndex),\n    removedRow,\n    ...data.slice(newRowIndex),\n  ];\n\n  return reorderedData;\n};\n"],"mappings":"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"}

package/dist/labs/DataView/useFilterConversion.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFilterConversion.js","names":["useCallback","useMemo","useFilterConversion","columns","filters","convertFilterSelectOptions","options","map","option","label","value","convertColumnToFilter","column","enableColumnFilter","accessorKey","id","header","variant","filterVariant","filterSelectOptions","dataTableFilters","providedFilters","reduce","accumulator","item","foundColumn","find","filter","concat"],"sources":["../../../src/labs/DataView/useFilterConversion.ts"],"sourcesContent":["/*!\n * Copyright (c) 2024-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 { useCallback, useMemo } from \"react\";\nimport { MRT_RowData } from \"material-react-table\";\n\nimport { DataFilter } from \"../DataFilters\";\nimport { DataTableColumn } from \"../../DataTable\";\nimport { UniversalProps, TableLayoutProps } from \"./componentTypes\";\n\ntype FilterConversionType = {\n  columns?: TableLayoutProps[\"columns\"];\n  filters?: UniversalProps[\"filters\"];\n};\n\nexport const useFilterConversion = ({\n  columns,\n  filters,\n}: FilterConversionType) => {\n  const convertFilterSelectOptions = useCallback(\n    (options: DataTableColumn<MRT_RowData>[\"filterSelectOptions\"]) =>\n      options?.map((option) =>\n        typeof option === \"string\"\n          ? {\n              label: option,\n              value: option,\n            }\n          : {\n              // If the option isn't a string, it must have value and/or option defined\n              // If either is undefined, use the other\n              label: option.label ?? option.value,\n              value: option.value ?? option.label,\n            },\n      ),\n    [],\n  );\n\n  const convertColumnToFilter = useCallback(\n    (column: DataTableColumn<MRT_RowData>) =>\n      column.enableColumnFilter !== false && column.accessorKey\n        ? ({\n            id: column.accessorKey,\n            label: column.header,\n            variant: column.filterVariant,\n            options: convertFilterSelectOptions(column.filterSelectOptions),\n          } satisfies DataFilter as DataFilter)\n        : null,\n    [convertFilterSelectOptions],\n  );\n\n  const dataTableFilters = useMemo(() => {\n    // Filters may be manually set via the `filters` variable;\n    // If not, they may be inferred from `columns`\n    const providedFilters = filters || columns || [];\n\n    return providedFilters.reduce<DataFilter[]>((accumulator, item) => {\n      if (typeof item === \"string\") {\n        const foundColumn = columns?.find(\n          (column) => column.accessorKey === item,\n        );\n        const filter = foundColumn && convertColumnToFilter(foundColumn);\n        return filter ? accumulator.concat(filter) : accumulator;\n      }\n\n      if (\"accessorKey\" in item) {\n        const filter = convertColumnToFilter(item);\n        return filter ? accumulator.concat(filter) : accumulator;\n      }\n\n      if (\"label\" in item) {\n        return accumulator.concat(item);\n      }\n\n      return accumulator;\n    }, []);\n  }, [columns, filters]);\n\n  return dataTableFilters;\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,WAAW,EAAEC,OAAO,QAAQ,OAAO;AAY5C,OAAO,MAAMC,mBAAmB,GAAGA,CAAC;EAClCC,OAAO;EACPC;AACoB,CAAC,KAAK;EAC1B,MAAMC,0BAA0B,GAAGL,WAAW,CAC3CM,OAA4D,IAC3DA,OAAO,EAAEC,GAAG,CAAEC,MAAM,IAClB,OAAOA,MAAM,KAAK,QAAQ,GACtB;IACEC,KAAK,EAAED,MAAM;IACbE,KAAK,EAAEF;EACT,CAAC,GACD;IAGEC,KAAK,EAAED,MAAM,CAACC,KAAK,IAAID,MAAM,CAACE,KAAK;IACnCA,KAAK,EAAEF,MAAM,CAACE,KAAK,IAAIF,MAAM,CAACC;EAChC,CACN,CAAC,EACH,EACF,CAAC;EAED,MAAME,qBAAqB,GAAGX,WAAW,CACtCY,MAAoC,IACnCA,MAAM,CAACC,kBAAkB,KAAK,KAAK,IAAID,MAAM,CAACE,WAAW,GACpD;IACCC,EAAE,EAAEH,MAAM,CAACE,WAAW;IACtBL,KAAK,EAAEG,MAAM,CAACI,MAAM;IACpBC,OAAO,EAAEL,MAAM,CAACM,aAAa;IAC7BZ,OAAO,EAAED,0BAA0B,CAACO,MAAM,CAACO,mBAAmB;EAChE,CAAC,GACD,IAAI,EACV,CAACd,0BAA0B,CAC7B,CAAC;EAED,MAAMe,gBAAgB,GAAGnB,OAAO,CAAC,MAAM;IAGrC,MAAMoB,eAAe,GAAGjB,OAAO,IAAID,OAAO,IAAI,EAAE;IAEhD,OAAOkB,eAAe,CAACC,MAAM,CAAe,CAACC,WAAW,EAAEC,IAAI,KAAK;MACjE,IAAI,OAAOA,IAAI,KAAK,QAAQ,EAAE;QAC5B,MAAMC,WAAW,GAAGtB,OAAO,EAAEuB,IAAI,CAC9Bd,MAAM,IAAKA,MAAM,CAACE,WAAW,KAAKU,IACrC,CAAC;QACD,MAAMG,MAAM,GAAGF,WAAW,IAAId,qBAAqB,CAACc,WAAW,CAAC;QAChE,OAAOE,MAAM,GAAGJ,WAAW,CAACK,MAAM,CAACD,MAAM,CAAC,GAAGJ,WAAW;MAC1D;MAEA,IAAI,aAAa,IAAIC,IAAI,EAAE;QACzB,MAAMG,MAAM,GAAGhB,qBAAqB,CAACa,IAAI,CAAC;QAC1C,OAAOG,MAAM,GAAGJ,WAAW,CAACK,MAAM,CAACD,MAAM,CAAC,GAAGJ,WAAW;MAC1D;MAEA,IAAI,OAAO,IAAIC,IAAI,EAAE;QACnB,OAAOD,WAAW,CAACK,MAAM,CAACJ,IAAI,CAAC;MACjC;MAEA,OAAOD,WAAW;IACpB,CAAC,EAAE,EAAE,CAAC;EACR,CAAC,EAAE,CAACpB,OAAO,EAAEC,OAAO,CAAC,CAAC;EAEtB,OAAOgB,gBAAgB;AACzB,CAAC"}
+{"version":3,"file":"useFilterConversion.js","names":["useCallback","useMemo","useFilterConversion","columns","filters","convertFilterSelectOptions","options","map","option","label","value","convertColumnToFilter","column","enableColumnFilter","accessorKey","id","header","variant","filterVariant","filterSelectOptions","dataTableFilters","providedFilters","reduce","accumulator","item","foundColumn","find","filter","concat"],"sources":["../../../src/labs/DataView/useFilterConversion.ts"],"sourcesContent":["/*!\n * Copyright (c) 2024-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 { useCallback, useMemo } from \"react\";\nimport { MRT_RowData } from \"material-react-table\";\n\nimport { DataFilter } from \"../DataFilters\";\nimport { DataTableColumn } from \"../../DataTable\";\nimport { UniversalProps, TableLayoutProps } from \"./componentTypes\";\n\ntype FilterConversionType<TData extends MRT_RowData> = {\n  columns?: TableLayoutProps<TData>[\"columns\"];\n  filters?: UniversalProps<TData>[\"filters\"];\n};\n\nexport const useFilterConversion = <TData extends MRT_RowData>({\n  columns,\n  filters,\n}: FilterConversionType<TData>) => {\n  const convertFilterSelectOptions = useCallback(\n    (options: DataTableColumn<MRT_RowData>[\"filterSelectOptions\"]) =>\n      options?.map((option) =>\n        typeof option === \"string\"\n          ? {\n              label: option,\n              value: option,\n            }\n          : {\n              // If the option isn't a string, it must have value and/or option defined\n              // If either is undefined, use the other\n              label: option.label ?? option.value,\n              value: option.value ?? option.label,\n            },\n      ),\n    [],\n  );\n\n  const convertColumnToFilter = useCallback(\n    (column: DataTableColumn<TData>) =>\n      column.enableColumnFilter !== false && column.accessorKey\n        ? {\n            id: column.accessorKey,\n            label: column.header,\n            variant: column.filterVariant,\n            options: convertFilterSelectOptions(column.filterSelectOptions),\n          }\n        : null,\n    [convertFilterSelectOptions],\n  );\n\n  const dataTableFilters = useMemo(() => {\n    // Filters may be manually set via the `filters` variable;\n    // If not, they may be inferred from `columns`\n    const providedFilters = filters || columns || [];\n\n    return providedFilters.reduce<DataFilter[]>((accumulator, item) => {\n      if (typeof item === \"string\") {\n        const foundColumn = columns?.find(\n          (column) => column.accessorKey === item,\n        );\n        const filter = foundColumn && convertColumnToFilter(foundColumn);\n        return filter ? accumulator.concat(filter) : accumulator;\n      }\n\n      if (\"accessorKey\" in item) {\n        const filter = convertColumnToFilter(item);\n        return filter ? accumulator.concat(filter) : accumulator;\n      }\n\n      if (\"label\" in item) {\n        return accumulator.concat(item);\n      }\n\n      return accumulator;\n    }, []);\n  }, [columns, filters]);\n\n  return dataTableFilters;\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,WAAW,EAAEC,OAAO,QAAQ,OAAO;AAY5C,OAAO,MAAMC,mBAAmB,GAAGA,CAA4B;EAC7DC,OAAO;EACPC;AAC2B,CAAC,KAAK;EACjC,MAAMC,0BAA0B,GAAGL,WAAW,CAC3CM,OAA4D,IAC3DA,OAAO,EAAEC,GAAG,CAAEC,MAAM,IAClB,OAAOA,MAAM,KAAK,QAAQ,GACtB;IACEC,KAAK,EAAED,MAAM;IACbE,KAAK,EAAEF;EACT,CAAC,GACD;IAGEC,KAAK,EAAED,MAAM,CAACC,KAAK,IAAID,MAAM,CAACE,KAAK;IACnCA,KAAK,EAAEF,MAAM,CAACE,KAAK,IAAIF,MAAM,CAACC;EAChC,CACN,CAAC,EACH,EACF,CAAC;EAED,MAAME,qBAAqB,GAAGX,WAAW,CACtCY,MAA8B,IAC7BA,MAAM,CAACC,kBAAkB,KAAK,KAAK,IAAID,MAAM,CAACE,WAAW,GACrD;IACEC,EAAE,EAAEH,MAAM,CAACE,WAAW;IACtBL,KAAK,EAAEG,MAAM,CAACI,MAAM;IACpBC,OAAO,EAAEL,MAAM,CAACM,aAAa;IAC7BZ,OAAO,EAAED,0BAA0B,CAACO,MAAM,CAACO,mBAAmB;EAChE,CAAC,GACD,IAAI,EACV,CAACd,0BAA0B,CAC7B,CAAC;EAED,MAAMe,gBAAgB,GAAGnB,OAAO,CAAC,MAAM;IAGrC,MAAMoB,eAAe,GAAGjB,OAAO,IAAID,OAAO,IAAI,EAAE;IAEhD,OAAOkB,eAAe,CAACC,MAAM,CAAe,CAACC,WAAW,EAAEC,IAAI,KAAK;MACjE,IAAI,OAAOA,IAAI,KAAK,QAAQ,EAAE;QAC5B,MAAMC,WAAW,GAAGtB,OAAO,EAAEuB,IAAI,CAC9Bd,MAAM,IAAKA,MAAM,CAACE,WAAW,KAAKU,IACrC,CAAC;QACD,MAAMG,MAAM,GAAGF,WAAW,IAAId,qBAAqB,CAACc,WAAW,CAAC;QAChE,OAAOE,MAAM,GAAGJ,WAAW,CAACK,MAAM,CAACD,MAAM,CAAC,GAAGJ,WAAW;MAC1D;MAEA,IAAI,aAAa,IAAIC,IAAI,EAAE;QACzB,MAAMG,MAAM,GAAGhB,qBAAqB,CAACa,IAAI,CAAC;QAC1C,OAAOG,MAAM,GAAGJ,WAAW,CAACK,MAAM,CAACD,MAAM,CAAC,GAAGJ,WAAW;MAC1D;MAEA,IAAI,OAAO,IAAIC,IAAI,EAAE;QACnB,OAAOD,WAAW,CAACK,MAAM,CAACJ,IAAI,CAAC;MACjC;MAEA,OAAOD,WAAW;IACpB,CAAC,EAAE,EAAE,CAAC;EACR,CAAC,EAAE,CAACpB,OAAO,EAAEC,OAAO,CAAC,CAAC;EAEtB,OAAOgB,gBAAgB;AACzB,CAAC"}

package/dist/labs/{DateField.js → DatePickers/DateField.js}

@@ -14,7 +14,7 @@ import _InputAdornment from "@mui/material/InputAdornment";
 import { memo, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
 import { DateField as MuiDateField } from "@mui/x-date-pickers";
 import { useTranslation } from "react-i18next";
-import { Field } from "../Field.js";
+import { Field } from "../../Field.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 const useOdysseyDateError = () => {

package/dist/labs/DatePickers/DateField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateField.js","names":["memo","useCallback","useEffect","useImperativeHandle","useRef","useState","DateField","MuiDateField","useTranslation","Field","jsx","_jsx","Fragment","_Fragment","useOdysseyDateError","t","Map","formatDateTimeToUtcIsoDateString","value","toUTC","toISO","defaultValue","endAdornment","errorMessage","hasInitialFocus","hint","HintLinkComponent","id","idOverride","inputRef","isDisabled","isOptional","isReadOnly","label","minDate","maxDate","onBlur","onChange","onFocus","timezone","errorMap","displayedErrorMessage","setDisplayedErrorMessage","internalValidationError","localInputRef","focus","current","checkMinMaxValidity","hasMinError","hasMaxError","get","clearErrorMessages","undefined","validateAndCallOnChange","validationContext","validationError","hasEnteredFullYear","year","toString","length","odysseyValidationError","isValid","dateStringFromDateTime","checkFieldValidityAndSetError","event","hasVisibleAdornment","renderFieldComponent","ariaDescribedBy","errorMessageElementId","labelElementId","autoFocus","disabled","inputProps","InputProps","error","Boolean","children","_InputAdornment","position","name","readOnly","variant","fieldType","hasVisibleLabel","MemoizedDateField","displayName"],"sources":["../../../src/labs/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 {\n  FocusEventHandler,\n  memo,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from \"react\";\nimport { InputAdornment } from \"@mui/material\";\nimport {\n  DateField as MuiDateField,\n  DateFieldProps as MuiDateFieldProps,\n  DateValidationError,\n} from \"@mui/x-date-pickers\";\nimport { DateTime } from \"luxon\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { Field, RenderFieldComponentProps } from \"../../Field\";\nimport { TextFieldProps } from \"../../TextField\";\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(\n    inputRef,\n    () => {\n      return {\n        focus: () => {\n          localInputRef.current?.focus();\n        },\n      };\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        minDate={minDate}\n        maxDate={maxDate}\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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"}

package/dist/labs/DatePickers/DateFieldActionBar.js

@@ -0,0 +1,56 @@
+/*!
+ * 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.
+ */
+
+import { memo } from "react";
+import { useTranslation } from "react-i18next";
+import styled from "@emotion/styled";
+import { Button } from "../../Buttons/index.js";
+import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const ActionContainer = styled.div(({
+  odysseyDesignTokens
+}) => ({
+  display: "flex",
+  justifyContent: "flex-end",
+  paddingInline: odysseyDesignTokens.Spacing4,
+  paddingBlockEnd: odysseyDesignTokens.Spacing4
+}));
+const DateFieldActionBar = ({
+  actions,
+  onAccept,
+  onCancel
+}) => {
+  const {
+    t
+  } = useTranslation();
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  if (actions && actions.length > 0) {
+    return _jsxs(ActionContainer, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      children: [_jsx(Button, {
+        label: t("picker.labels.action.cancel"),
+        onClick: onCancel,
+        variant: "floating"
+      }), _jsx(Button, {
+        label: t("picker.labels.action.apply"),
+        onClick: onAccept,
+        variant: "primary"
+      })]
+    });
+  }
+  return null;
+};
+const MemoizedDateFieldActionBar = memo(DateFieldActionBar);
+MemoizedDateFieldActionBar.displayName = "DateFieldActionBar";
+export { MemoizedDateFieldActionBar as DateFieldActionBar };
+//# sourceMappingURL=DateFieldActionBar.js.map

package/dist/labs/DatePickers/DateFieldActionBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateFieldActionBar.js","names":["memo","useTranslation","styled","Button","useOdysseyDesignTokens","jsx","_jsx","jsxs","_jsxs","ActionContainer","div","odysseyDesignTokens","display","justifyContent","paddingInline","Spacing4","paddingBlockEnd","DateFieldActionBar","actions","onAccept","onCancel","t","length","children","label","onClick","variant","MemoizedDateFieldActionBar","displayName"],"sources":["../../../src/labs/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 { memo } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { PickersActionBarProps } from \"@mui/x-date-pickers\";\nimport styled from \"@emotion/styled\";\n\nimport { Button } from \"../../Buttons\";\nimport {\n  useOdysseyDesignTokens,\n  DesignTokens,\n} from \"../../OdysseyDesignTokensContext\";\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":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAQ,OAAO;AAC5B,SAASC,cAAc,QAAQ,eAAe;AAE9C,OAAOC,MAAM,MAAM,iBAAiB;AAAC,SAE5BC,MAAM;AAAA,SAEbC,sBAAsB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAIxB,MAAMC,eAAe,GAAGP,MAAM,CAACQ,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,GAAGpB,cAAc,CAAC,CAAC;EAC9B,MAAMU,mBAAmB,GAAGP,sBAAsB,CAAC,CAAC;EAGpD,IAAIc,OAAO,IAAIA,OAAO,CAACI,MAAM,GAAG,CAAC,EAAE;IACjC,OACEd,KAAA,CAACC,eAAe;MAACE,mBAAmB,EAAEA,mBAAoB;MAAAY,QAAA,GACxDjB,IAAA,CAACH,MAAM;QACLqB,KAAK,EAAEH,CAAC,CAAC,6BAA6B,CAAE;QACxCI,OAAO,EAAEL,QAAS;QAClBM,OAAO,EAAC;MAAU,CACnB,CAAC,EACFpB,IAAA,CAACH,MAAM;QACLqB,KAAK,EAAEH,CAAC,CAAC,4BAA4B,CAAE;QACvCI,OAAO,EAAEN,QAAS;QAClBO,OAAO,EAAC;MAAS,CAClB,CAAC;IAAA,CACa,CAAC;EAEtB;EAEA,OAAO,IAAI;AACb,CAAC;AAED,MAAMC,0BAA0B,GAAG3B,IAAI,CAACiB,kBAAkB,CAAC;AAC3DU,0BAA0B,CAACC,WAAW,GAAG,oBAAoB;AAE7D,SAASD,0BAA0B,IAAIV,kBAAkB"}

package/dist/labs/DatePickers/DateFieldLocalizationProvider.js

@@ -0,0 +1,32 @@
+/*!
+ * 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.
+ */
+
+import { memo } from "react";
+import { LocalizationProvider } from "@mui/x-date-pickers";
+import { AdapterLuxon } from "@mui/x-date-pickers/AdapterLuxon";
+import { jsx as _jsx } from "react/jsx-runtime";
+const DateFieldLocalizationProvider = ({
+  children,
+  defaultedLanguageCode,
+  localeText
+}) => {
+  return _jsx(LocalizationProvider, {
+    dateAdapter: AdapterLuxon,
+    adapterLocale: defaultedLanguageCode,
+    localeText: localeText,
+    children: children
+  });
+};
+const MemoizedDateFieldLocalizationProvider = memo(DateFieldLocalizationProvider);
+MemoizedDateFieldLocalizationProvider.displayName = "DateFieldLocalizationProvider";
+export { MemoizedDateFieldLocalizationProvider as DateFieldLocalizationProvider };
+//# sourceMappingURL=DateFieldLocalizationProvider.js.map

package/dist/labs/DatePickers/DateFieldLocalizationProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateFieldLocalizationProvider.js","names":["memo","LocalizationProvider","AdapterLuxon","jsx","_jsx","DateFieldLocalizationProvider","children","defaultedLanguageCode","localeText","dateAdapter","adapterLocale","MemoizedDateFieldLocalizationProvider","displayName"],"sources":["../../../src/labs/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 { memo, PropsWithChildren } from \"react\";\nimport { LocalizationProvider } from \"@mui/x-date-pickers\";\nimport { AdapterLuxon } from \"@mui/x-date-pickers/AdapterLuxon\";\n\nimport { DateFieldsTranslations } from \"./useDateFieldsTranslations\";\n\ntype DateFieldLocalizationProviderProps = {\n  localeText: DateFieldsTranslations;\n  defaultedLanguageCode: string;\n};\n\nconst DateFieldLocalizationProvider = ({\n  children,\n  defaultedLanguageCode,\n  localeText,\n}: PropsWithChildren<DateFieldLocalizationProviderProps>) => {\n  return (\n    <LocalizationProvider\n      dateAdapter={AdapterLuxon}\n      adapterLocale={defaultedLanguageCode}\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":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAA2B,OAAO;AAC/C,SAASC,oBAAoB,QAAQ,qBAAqB;AAC1D,SAASC,YAAY,QAAQ,kCAAkC;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAShE,MAAMC,6BAA6B,GAAGA,CAAC;EACrCC,QAAQ;EACRC,qBAAqB;EACrBC;AACqD,CAAC,KAAK;EAC3D,OACEJ,IAAA,CAACH,oBAAoB;IACnBQ,WAAW,EAAEP,YAAa;IAC1BQ,aAAa,EAAEH,qBAAsB;IACrCC,UAAU,EAAEA,UAAW;IAAAF,QAAA,EAEtBA;EAAQ,CACW,CAAC;AAE3B,CAAC;AAED,MAAMK,qCAAqC,GAAGX,IAAI,CAChDK,6BACF,CAAC;AACDM,qCAAqC,CAACC,WAAW,GAC/C,+BAA+B;AAEjC,SAASD,qCAAqC,IAAIN,6BAA6B"}

package/dist/labs/{DatePicker.js → DatePickers/DatePicker.js}

@@ -10,18 +10,18 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { memo, useCallback, useEffect, useMemo, useRef } from "react";
 import { useTranslation } from "react-i18next";
-import { DatePicker as MuiDatePicker, LocalizationProvider } from "@mui/x-date-pickers";
-import { AdapterLuxon } from "@mui/x-date-pickers/AdapterLuxon";
+import { DatePicker as MuiDatePicker } from "@mui/x-date-pickers";
 import styled from "@emotion/styled";
-import { Button } from "../Button.js";
-import { ArrowLeftIcon, ArrowRightIcon, CalendarIcon, ChevronDownIcon } from "../icons.generated/index.js";
+import { Button } from "../../Buttons/index.js";
+import { DateFieldActionBar } from "./DateFieldActionBar.js";
 import { DateField } from "./DateField.js";
+import { DateFieldLocalizationProvider } from "./DateFieldLocalizationProvider.js";
 import { datePickerTheme } from "./datePickerTheme.js";
-import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext.js";
-import { OdysseyThemeProvider } from "../OdysseyThemeProvider.js";
-import { TimeZonePicker } from "./TimeZonePicker.js";
+import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
+import { OdysseyThemeProvider } from "../../OdysseyThemeProvider.js";
+import { TimeZonePicker } from "../TimeZonePicker.js";
 import { useOdysseyDateFields } from "./useOdysseyDateFields.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -45,42 +45,6 @@ const TimeZonePickerContainer = styled("div", {
 }) => ({
   marginBlockStart: odysseyDesignTokens.Spacing3
 }));
-const ActionContainer = styled.div(({
-  odysseyDesignTokens
-}) => ({
-  display: "flex",
-  justifyContent: "flex-end",
-  paddingInline: odysseyDesignTokens.Spacing4,
-  paddingBlockEnd: odysseyDesignTokens.Spacing4
-}));
-const ActionBar = ({
-  actions,
-  onAccept,
-  onCancel
-}) => {
-  const {
-    t
-  } = useTranslation();
-  const odysseyDesignTokens = useOdysseyDesignTokens();
-  if (actions && actions.length > 0) {
-    return _jsxs(ActionContainer, {
-      odysseyDesignTokens: odysseyDesignTokens,
-      children: [_jsx(Button, {
-        label: t("picker.labels.action.cancel"),
-        onClick: onCancel,
-        variant: "floating"
-      }), _jsx(Button, {
-        label: t("picker.labels.action.apply"),
-        onClick: onAccept,
-        variant: "primary"
-      })]
-    });
-  }
-  return null;
-};
-const MemoizedActionBar = memo(ActionBar);
-MemoizedActionBar.displayName = "ActionBar";
-const formatDayOfWeek = date => date.toFormat("EEE");
 const DatePicker = ({
   defaultValue: defaultValueProp,
   errorMessage,
@@ -110,18 +74,25 @@ const DatePicker = ({
   const inputRef = useRef(null);
   const odysseyDesignTokens = useOdysseyDesignTokens();
   const {
+    closeCalendar,
+    commonIcons,
     defaultedLanguageCode,
     formatDateTimeToUtcIsoDateString,
+    formatDayOfWeek,
     inputValues,
     internalTimeZone,
-    isValidTimeZone,
+    isOpen,
     localeText,
     minDate,
     maxDate,
-    setInternalTimeZone,
+    onInputChange,
+    onTimeZoneChange,
+    popperElement,
+    setPopperElement,
     shouldDisableDate,
     shouldDisableMonth,
-    shouldDisableYear
+    shouldDisableYear,
+    toggleCalendarVisibility
   } = useOdysseyDateFields({
     defaultValue: defaultValueProp,
     errorMessage,
@@ -130,18 +101,17 @@ const DatePicker = ({
     isYearEnabled,
     minDate: minDateProp,
     maxDate: maxDateProp,
+    onInputChange: onInputChangeProp,
     timeZone,
     value: valueProp
   });
-  const [isOpen, setIsOpen] = useState(false);
-  const [popperElement, setPopperElement] = useState();
   const {
     language
   } = i18n;
   const containerRef = useRef(null);
   useEffect(() => {
     setPopperElement(containerRef.current);
-  }, []);
+  }, [setPopperElement]);
   const formatDateTimeToJsDateStringOnCalendarSelection = useCallback(value => {
     if (value) {
       const dateStringFromDateTime = formatDateTimeToUtcIsoDateString(value);
@@ -153,13 +123,6 @@ const DatePicker = ({
       }
     }
   }, [formatDateTimeToUtcIsoDateString, internalTimeZone, onCalendarDateChange]);
-  const onInputChange = useCallback(value => {
-    onInputChangeProp?.(value);
-  }, [onInputChangeProp]);
-  const toggleCalendarVisibility = useCallback(() => setIsOpen(!isOpen), [isOpen]);
-  const resetIsOpen = useCallback(() => {
-    setIsOpen(false);
-  }, []);
   const renderDateField = useCallback(({
     defaultValue,
     inputRef,
@@ -172,7 +135,7 @@ const DatePicker = ({
         label: "",
         onClick: toggleCalendarVisibility,
         size: "small",
-        startIcon: _jsx(CalendarIcon, {}),
+        startIcon: _jsx(commonIcons.CalendarIcon, {}),
         variant: "floating"
       }),
       errorMessage: errorMessage,
@@ -190,14 +153,14 @@ const DatePicker = ({
       timezone: internalTimeZone,
       value: value
     });
-  }, [errorMessage, hint, HintLinkComponent, internalTimeZone, isDisabled, isOptional, isReadOnly, label, onBlur, onInputChange, minDate, maxDate, t, toggleCalendarVisibility]);
+  }, [commonIcons, errorMessage, hint, HintLinkComponent, internalTimeZone, isDisabled, isOptional, isReadOnly, label, onBlur, onInputChange, minDate, maxDate, t, toggleCalendarVisibility]);
   const slots = useMemo(() => ({
-    actionBar: MemoizedActionBar,
+    actionBar: DateFieldActionBar,
     field: muiProps => renderDateField(muiProps),
-    leftArrowIcon: () => _jsx(ArrowLeftIcon, {}),
-    rightArrowIcon: () => _jsx(ArrowRightIcon, {}),
-    switchViewIcon: () => _jsx(ChevronDownIcon, {})
-  }), [renderDateField]);
+    leftArrowIcon: () => _jsx(commonIcons.ArrowLeftIcon, {}),
+    rightArrowIcon: () => _jsx(commonIcons.ArrowRightIcon, {}),
+    switchViewIcon: () => _jsx(commonIcons.ChevronDownIcon, {})
+  }), [commonIcons, renderDateField]);
   const slotProps = useMemo(() => ({
     actionBar: ({
       wrapperVariant,
@@ -215,16 +178,10 @@ const DatePicker = ({
       toolbarPlaceholder: ""
     }
   }), [popperElement]);
-  const onTimeZoneChange = useCallback(timeZone => {
-    if (timeZone && isValidTimeZone(timeZone)) {
-      setInternalTimeZone(timeZone);
-    }
-  }, [isValidTimeZone, setInternalTimeZone]);
   return _jsx(OdysseyThemeProvider, {
     themeOverride: datePickerTheme,
-    children: _jsxs(LocalizationProvider, {
-      dateAdapter: AdapterLuxon,
-      adapterLocale: defaultedLanguageCode,
+    children: _jsxs(DateFieldLocalizationProvider, {
+      defaultedLanguageCode: defaultedLanguageCode,
       localeText: localeText,
       children: [_jsx(DatePickerContainer, {
         children: _jsx(DatePickerWidthContainer, {
@@ -240,7 +197,7 @@ const DatePicker = ({
             minDate: minDate,
             maxDate: maxDate,
             onChange: formatDateTimeToJsDateStringOnCalendarSelection,
-            onClose: resetIsOpen,
+            onClose: closeCalendar,
             open: isOpen,
             readOnly: isReadOnly,
             shouldDisableDate: shouldDisableDate,